/* sección 3: ejemplos por rubro (abanico de celulares + visor con la web real) */
.ejemplos{overflow:hidden}
.ejemplos .wrap{display:grid;gap:clamp(14px,2.4vw,24px)}
.ej__sub{color:var(--dim);max-width:48ch;font-size:clamp(1rem,1.5vw,1.15rem)}
.ej__escena{position:relative;margin-top:clamp(18px,3vw,40px);padding:clamp(28px,5vw,64px) 0 clamp(36px,5vw,64px)}
.ej__escena::before{content:"";position:absolute;left:50%;top:48%;width:min(1100px,130%);aspect-ratio:2/1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(181,242,61,.22),rgba(30,149,29,.10) 55%,transparent);pointer-events:none}
.ej__fan{position:relative;list-style:none;display:flex;justify-content:center;align-items:flex-end;padding:0 var(--gut)}
.ej__fan li{--r:0deg;--y:0px;flex:0 0 clamp(150px,15.2vw,224px);margin-left:calc(-1 * clamp(14px,2.4vw,36px));position:relative;z-index:1}
.ej__fan li:first-child{margin-left:0}
.ej__fan li:nth-child(1){--r:-12deg;--y:34px}
.ej__fan li:nth-child(2){--r:-7.5deg;--y:12px}
.ej__fan li:nth-child(3){--r:-2.5deg;--y:0px}
.ej__fan li:nth-child(4){--r:2.5deg;--y:0px}
.ej__fan li:nth-child(5){--r:7.5deg;--y:12px}
.ej__fan li:nth-child(6){--r:12deg;--y:34px}

.ej__cel{position:relative;display:block;container-type:inline-size;aspect-ratio:390/844;border-radius:13%/6%;padding:3.2%;
  background:linear-gradient(145deg,#33443a,#0b0f0c 38%,#1a251d);box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 0 1px rgba(181,242,61,.16);
  transform:translateY(var(--y)) rotate(var(--r));transform-origin:50% 100%;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s;
  animation:ejFlota 7s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.2s)}
.ej__fan li:nth-child(2) .ej__cel{--k:1}.ej__fan li:nth-child(3) .ej__cel{--k:2}.ej__fan li:nth-child(4) .ej__cel{--k:3}.ej__fan li:nth-child(5) .ej__cel{--k:4}.ej__fan li:nth-child(6) .ej__cel{--k:5}
@keyframes ejFlota{50%{translate:0 -7px}}
.ej__pant{display:block;position:relative;height:100%;border-radius:10%/4.6%;overflow:hidden;background:#05080a;padding-top:10%}
.ej__pant img{width:100%;height:100%;object-fit:cover;object-position:top}
.ej__pant::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%);pointer-events:none}
.ej__pant::after{content:"";position:absolute;z-index:3;left:50%;top:1.2%;width:24%;height:2.4%;transform:translateX(-50%);border-radius:99px;background:#05080a}
.ej__rot{position:absolute;z-index:4;left:50%;bottom:5%;transform:translateX(-50%);width:84%;text-align:center;padding:4cqw 3cqw;border-radius:6cqw;
  background:var(--lima);color:var(--tinta);box-shadow:0 8px 22px rgba(0,0,0,.4)}
.ej__rot b{display:block;font-size:6.6cqw;line-height:1.1;font-weight:800;letter-spacing:-.01em}
.ej__rot i{display:block;font-style:normal;font-size:5.4cqw;line-height:1.2;font-weight:600;margin-top:1cqw;opacity:.8}
@media (hover:hover){
  .ej__fan li:hover{z-index:9}
  .ej__fan li:hover .ej__cel,.ej__cel:focus-visible{transform:translateY(-14px) rotate(0deg) scale(1.08);animation-play-state:paused;box-shadow:0 44px 90px rgba(0,0,0,.7),0 0 0 2px var(--lima)}
}
.ej__cel:focus-visible{outline:none;box-shadow:0 0 0 3px var(--lima),0 34px 70px rgba(0,0,0,.6)}
.ej__desliza{display:none;text-align:center;color:var(--dim);font:500 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase}

.ej__pie{display:grid;gap:clamp(12px,2vw,20px);justify-items:center;text-align:center}
.ej__norubro{display:inline-block;font-size:clamp(1rem,1.6vw,1.2rem);padding:.7em 1.3em;border-radius:999px;border:1px dashed rgba(181,242,61,.5);color:var(--texto)}
.ej__norubro b{color:var(--lima)}
.ej__cierre h3{font-size:clamp(1.5rem,3.4vw,2.4rem);margin-bottom:16px;line-height:1.1}

/* celulares y pantallas angostas: carrusel que se desliza con el dedo */
@media (max-width:899px){
  .ej__fan{justify-content:flex-start;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:30px 22vw 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .ej__fan::-webkit-scrollbar{display:none}
  .ej__fan li,.ej__fan li:first-child{flex:0 0 clamp(190px,56vw,250px);margin-left:0;scroll-snap-align:center}
  .ej__fan li:nth-child(n){--r:0deg;--y:0px}
  .ej__desliza{display:block}
}

/* visor: la web real dentro de un celular */
.visor{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;border:0;padding:0;background:rgba(3,7,5,.88);backdrop-filter:blur(10px);color:var(--texto);overflow:hidden}
.visor:not([open]){display:none}
.visor__in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px}
.visor__barra{display:flex;align-items:center;gap:8px;width:min(100%,520px);justify-content:space-between}
.visor__tit{font-weight:700;font-size:1.05rem;text-align:center;flex:1;line-height:1.2}
.visor__tit small{display:block;font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lima);margin-top:3px}
.visor__b{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;line-height:1}
.visor__b:hover{background:rgba(255,255,255,.16)}
.visor__b:focus-visible,.visor__ext:focus-visible{outline:3px solid var(--lima);outline-offset:2px}
.visor__marco{position:relative;border-radius:46px;padding:12px;background:linear-gradient(145deg,#33443a,#0b0f0c 40%,#1a251d);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(181,242,61,.2);flex:0 0 auto}
.visor__pant{position:relative;width:390px;height:844px;border-radius:36px;overflow:hidden;background:#05080a;transform-origin:0 0}
.visor__pant img,.visor__pant iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.visor__pant img{object-fit:cover;object-position:top}
.visor__pant iframe{opacity:0;transition:opacity .5s;background:#fff}
.visor__pant iframe.listo{opacity:1}
.visor__ext{color:var(--lima);font-weight:700;font-size:.95rem;text-decoration:underline;text-underline-offset:4px}
@media (max-width:600px){
  .visor__in{padding:0;gap:0;justify-content:flex-start}
  .visor__barra{width:100%;padding:8px 10px;background:rgba(5,10,7,.94);border-bottom:1px solid rgba(255,255,255,.1)}
  .visor__marco{padding:0;border-radius:0;background:none;box-shadow:none;width:100%;flex:1 1 auto;min-height:0}
  .visor__pant{width:100%!important;height:100%!important;border-radius:0;transform:none!important}
  .visor__ext{display:block;width:100%;text-align:center;padding:12px 10px calc(12px + env(safe-area-inset-bottom));background:rgba(5,10,7,.96);border-top:1px solid rgba(255,255,255,.1);text-decoration:none;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.ej__cel{animation:none;transition:none}.visor__pant iframe{transition:none}}
/* el halo detrás del abanico es más ancho que la pantalla en tabletas: se recorta a los costados para que no aparezca barra horizontal */
.ej__escena{overflow-x:clip}