/* SHOWTIME · webs de venta (marcas, cena, clubes). Base compartida. */
@font-face{font-family:'Classy Vogue';src:url('/assets/Classyvogueregular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'Miedinger';src:url('/assets/Miedinger.ttf') format('truetype');font-display:swap}
:root{
  --negro:#050507;--panel:#0C0B14;--violeta:#3F00D1;--violeta2:#5900FF;--azul:#2F5BFF;--lila:#9C8BFF;
  --blanco:#fff;--gris:#8E8C9A;--gris-claro:#C9C7D3;--linea:rgba(255,255,255,.12);
  --max:1180px;--g:clamp(16px,5vw,40px);
  --suave:cubic-bezier(.22,.61,.36,1);--salida:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--negro)}
body{background:var(--negro);color:var(--blanco);font-family:Inter,-apple-system,"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit}
.vis{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* marcas tipograficas */
.st{font-family:'Classy Vogue',serif;font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:.9;color:#fff}
.mw{font-family:'Miedinger',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0;line-height:1}
.grad{background:linear-gradient(100deg,#fff 0%,var(--lila) 45%,var(--azul) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* barra de arriba: material translucido */
.barra{position:fixed;z-index:50;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) var(--g) 12px;transition:background .4s var(--suave),-webkit-backdrop-filter .4s,backdrop-filter .4s}
.barra.solida{background:rgba(5,5,7,.62);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.barra .st{font-size:1.05rem;line-height:1}
.lengua{display:flex;border:1px solid rgba(255,255,255,.24);border-radius:999px;overflow:hidden}
.lengua button{background:none;border:0;color:var(--gris-claro);font:inherit;font-size:.66rem;letter-spacing:.16em;font-weight:600;padding:8px 12px;cursor:pointer;transition:color .2s,background .2s}
.lengua button.on{color:var(--negro);background:#fff}

/* hero */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero .media{position:absolute;inset:0;will-change:transform}
.hero video,.hero .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,5,7,.45) 0%,rgba(5,5,7,0) 22%,rgba(5,5,7,0) 45%,rgba(5,5,7,.78) 82%,var(--negro) 100%)}
.hero-in{position:absolute;z-index:2;left:0;right:0;bottom:0;max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(44px,9vh,96px);will-change:transform,opacity}
.presentan{display:flex;align-items:center;gap:.6em;font-size:clamp(.8rem,2.6vw,1rem);margin-bottom:clamp(14px,2.4vh,22px);color:#fff}
.presentan i{font-style:normal;font-family:Inter,Helvetica,sans-serif;font-size:.8em;color:var(--gris-claro)}
.hero .st.grande{font-size:clamp(3.2rem,15.5vw,11rem)}
.hero h1{font-size:clamp(1.7rem,6.6vw,3.6rem);line-height:1.06;font-weight:600;letter-spacing:0;margin-top:clamp(14px,2.5vh,24px);max-width:16ch}
.hero .bajada{font-size:clamp(1rem,3.4vw,1.3rem);line-height:1.45;color:var(--gris-claro);margin-top:14px;max-width:34ch}
.bajar{position:absolute;z-index:2;left:50%;bottom:16px;width:1px;height:34px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));transform:translateX(-50%);animation:bajar 2.4s var(--suave) infinite}
@keyframes bajar{0%{transform:translateX(-50%) scaleY(0);transform-origin:top}50%{transform:translateX(-50%) scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:translateX(-50%) scaleY(0);transform-origin:bottom}}

/* pantallas: una idea por pantalla */
.pantalla{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:var(--max);margin:0 auto;padding:clamp(80px,14vh,140px) var(--g)}
.pantalla.centro{align-items:center;text-align:center}
.rotulo{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--lila);margin-bottom:18px}
.enorme{font-size:clamp(2.4rem,10vw,6.6rem);line-height:1.02;font-weight:600;letter-spacing:0;max-width:14ch}
.grande{font-size:clamp(2rem,7.4vw,4.6rem);line-height:1.06;font-weight:600;letter-spacing:0;max-width:16ch}
.medio{font-size:clamp(1.35rem,4.6vw,2.4rem);line-height:1.2;font-weight:500;letter-spacing:0;max-width:24ch}
.chico{font-size:clamp(1rem,3.2vw,1.2rem);line-height:1.5;color:var(--gris-claro);max-width:36ch;margin-top:20px}
.centro .enorme,.centro .grande,.centro .medio,.centro .chico{margin-left:auto;margin-right:auto}

/* manifiesto: las palabras se prenden con el scroll */
.manifiesto{font-size:clamp(1.7rem,6.4vw,4rem);line-height:1.14;font-weight:600;letter-spacing:0;max-width:20ch}
.manifiesto .p{color:rgba(255,255,255,.16);transition:color .5s var(--suave)}
.manifiesto .p.on{color:#fff}

/* pin: video pegado y las frases pasan por encima */
.pin{position:relative}
.pin .fondo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.pin .fondo video,.pin .fondo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pin .fondo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.55),rgba(5,5,7,.25) 40%,rgba(5,5,7,.6));pointer-events:none}
.pin .pasos{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh}
.pin .paso{height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--g)}
.pin .paso > div{opacity:0;transform:translateY(30px) scale(.98);transition:opacity .8s var(--suave),transform 1s var(--salida)}
.pin .paso.on > div{opacity:1;transform:none}
.pin .paso .n{display:block;font-size:.72rem;letter-spacing:.26em;font-weight:600;color:var(--lila);margin-bottom:16px}
.pin .paso .chico{margin-left:auto;margin-right:auto;color:#fff;opacity:.85}

/* tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,20px);max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(60px,10vh,120px)}
.tarjeta{position:relative;border-radius:22px;overflow:hidden;background:var(--panel);aspect-ratio:3/4.6;isolation:isolate}
.tarjeta video,.tarjeta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.tarjeta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,7,.6) 0%,rgba(5,5,7,0) 30%,rgba(5,5,7,0) 55%,rgba(5,5,7,.88) 100%)}
.tarjeta .t{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,3vw,30px)}
.tarjeta .n{position:absolute;top:clamp(18px,2.6vw,26px);left:clamp(20px,3vw,30px);font-size:.72rem;letter-spacing:.26em;font-weight:600;color:var(--gris-claro)}
.tarjeta h3{font-size:clamp(1.4rem,4.6vw,2rem);line-height:1.1;font-weight:600;letter-spacing:0}
.tarjeta p{font-size:.98rem;line-height:1.45;color:var(--gris-claro);margin-top:10px;max-width:30ch}

/* video ancho con borde redondeado */
.ancho{max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.marco{position:relative;border-radius:24px;overflow:hidden;background:#000}
.marco video,.marco img{width:100%;height:100%;object-fit:cover}
.marco.v45{aspect-ratio:4/5;max-width:560px;margin:0 auto}
.marco.v169{aspect-ratio:16/9}
.sonido{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(5,5,7,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff;font:inherit;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:11px 16px;cursor:pointer;transition:transform .12s ease,background .2s}
.sonido:active{transform:scale(.96)}
.sonido svg{width:16px;height:16px}

/* duo */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,20px);max-width:var(--max);margin:0 auto;padding:0 var(--g)}
.duo figure{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--panel)}
.duo img{width:100%;height:100%;object-fit:cover}
.duo figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3vw,28px);background:linear-gradient(180deg,transparent,rgba(5,5,7,.85))}
.duo .mw{font-size:clamp(1.3rem,4.4vw,2.6rem)}

/* galeria de fotos que se desliza sola con el scroll (sin scroll horizontal de pagina) */
.tira{overflow:hidden;padding:clamp(40px,8vh,80px) 0}
.tira .riel{display:flex;gap:clamp(10px,1.6vw,18px);width:max-content;will-change:transform}
.tira img{height:clamp(260px,52vh,520px);width:auto;border-radius:18px;object-fit:cover;aspect-ratio:2/3}

/* palabras de clubes: cada una su pantalla con video */
.golpe{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;align-items:flex-end;background:#000}
.golpe video,.golpe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.golpe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,7,.1) 40%,rgba(5,5,7,.85))}
.golpe .t{position:relative;z-index:2;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--g) clamp(48px,10vh,110px)}
.golpe .enorme{max-width:12ch}

/* formulario */
.cierre{text-align:center;max-width:var(--max);margin:0 auto;padding:clamp(100px,18vh,180px) var(--g) clamp(60px,10vh,100px)}
.cierre .frase{font-size:clamp(2.2rem,9vw,6rem);line-height:1.02;font-weight:600;letter-spacing:0;max-width:14ch;margin:0 auto}
.cierre .st.frase{font-weight:400;font-size:clamp(3rem,13vw,8.4rem)}
.cierre .chico{margin:22px auto 0}
#pedido{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;max-width:880px;margin:44px auto 0;text-align:left}
#pedido label{display:flex;flex-direction:column;gap:8px}
#pedido label span{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gris)}
#pedido input{background:var(--panel);border:1px solid var(--linea);border-radius:14px;color:#fff;font:inherit;font-size:16px;padding:16px 18px;outline:none;transition:border-color .2s,background .2s;width:100%}
#pedido input:focus{border-color:var(--violeta2);background:#110E22}
#pedido .trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#pedido button{background:#fff;border:0;border-radius:999px;color:var(--negro);font:inherit;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:18px 32px;cursor:pointer;transition:background .2s,transform .1s ease}
#pedido button:active{transform:scale(.97)}
#pedido button:disabled{opacity:.5;cursor:default}
#pedido .aviso{grid-column:1/-1;min-height:1.3em;font-size:.95rem;color:var(--gris-claro);text-align:center}
#pedido .aviso.error{color:#ff9a9a}
#pedido.listo label,#pedido.listo button{display:none}
#pedido.listo .aviso{font-size:1.2rem;color:#fff}
footer{border-top:1px solid var(--linea);padding:28px var(--g) max(28px,env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:.7em;font-size:.82rem;color:var(--gris)}
footer i{font-style:normal;font-size:.8em}

/* aparicion suave */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--suave),transform 1.1s var(--salida)}
.js .rv.si{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

@media (max-width:820px){
  .tarjetas{grid-template-columns:1fr}
  .tarjeta{aspect-ratio:4/5}
  #pedido{grid-template-columns:1fr}
  #pedido button{width:100%}
  .duo{grid-template-columns:1fr;gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.pin .paso > div{opacity:1;transform:none;transition:none}
  .manifiesto .p{color:#fff;transition:none}
  .bajar{animation:none}
  .hero .media,.hero-in{transform:none!important;opacity:1!important}
}
@media (prefers-reduced-transparency:reduce){
  .barra.solida,.sonido{background:#0C0B14;-webkit-backdrop-filter:none;backdrop-filter:none}
}