/* ═══════════════════════════════════════════════════════════
   VIBRA BOLIVIA — v4 (teaser)
   Todavia no se anuncia fecha, sede ni precios: la pagina es
   hero + formulario de aviso + ediciones anteriores.
   Fuente libre: Montserrat, la misma que usa la web de Vibra Perú.
   ═══════════════════════════════════════════════════════════ */

:root{
  --night:#0E0320;
  --night-2:#160733;
  --ink:#0E0320;

  --amber:#FFD24A;
  --orange:#FF9A20;
  --orange-deep:#F4610C;
  --orange-dark:#B92E06;

  --magenta:#E8188C;
  --cobalt:#2B5FE3;
  --cyan:#29C5F6;
  --green:#7BE23C;
  --cream:#FFF4E3;

  --dim:rgb(255 244 227 / .62);
  --hair:rgb(255 244 227 / .14);

  --maxw:1280px;
  --gut:clamp(18px,4.5vw,56px);
  --hd:66px;
  --rail:0px;          /* pasa a 100px de 1000px para arriba */

  /* Grano fino: da textura de impresion y tapa el banding de los degrades
     y los artefactos de compresion del video. */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Una sola familia, como en la web de Vibra Perú: Montserrat para todo.
     Antes eran dos (Oswald condensada para titulares, Poppins para texto).
     Montserrat es mucho mas ancha que Oswald, asi que todos los titulares
     bajaron de cuerpo y llevan tracking negativo. */
  --f-head:'Montserrat', system-ui, sans-serif;
  --f-body:'Montserrat', system-ui, sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--cream);
  font:400 16px/1.6 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* ── marquesinas (CSS puro, no JS como la referencia) ── */
.topbar,.radio{overflow:hidden;white-space:nowrap}
.topbar__track,.radio__track{display:inline-flex;align-items:center;gap:14px;padding-right:14px;
  will-change:transform;animation:slide 34s linear infinite}
.topbar:hover .topbar__track,.radio:hover .radio__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

.topbar{background:var(--magenta);color:#fff;padding:8px 0}
.topbar span{font:700 11px/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase}
.topbar i{opacity:.55;font-style:normal}

/* Banda de aguayo. Antes era una franja de 14px con rayas diagonales, muy
   plana al lado de los ornamentos de la web de Perú. Ahora teje de verdad:
   dos juegos de rayas cruzadas a 45° arman una retícula de rombos sobre las
   bandas de color, y el borde oscuro arriba y abajo le da el corte duro de
   textil. Sigue siendo CSS puro, cero imagenes. */
.aguayo{
  --w:34px;                       /* ancho de cada banda de color */
  height:30px;position:relative;z-index:2;
  border-block:3px solid rgb(14 3 32 / .88);
  background-color:var(--night-2);
  background-image:
    /* Rombos: el paso (21px) esta calculado sobre los 30px de alto para que
       entre una sola fila y la retícula se lea como rombo, no como trama. */
    repeating-linear-gradient( 45deg,rgb(255 244 227 / .92) 0 3px,transparent 3px 21px),
    repeating-linear-gradient(-45deg,rgb(255 244 227 / .92) 0 3px,transparent 3px 21px),
    /* separador oscuro entre bandas, como el hilo de urdimbre */
    repeating-linear-gradient(90deg,rgb(14 3 32 / .55) 0 2px,transparent 2px var(--w)),
    repeating-linear-gradient(90deg,
      var(--magenta)     0                   var(--w),
      var(--amber)       var(--w)            calc(2 * var(--w)),
      var(--cyan)        calc(2 * var(--w))  calc(3 * var(--w)),
      var(--orange-deep) calc(3 * var(--w))  calc(4 * var(--w)),
      var(--green)       calc(4 * var(--w))  calc(5 * var(--w)),
      var(--cobalt)      calc(5 * var(--w))  calc(6 * var(--w)))}
@media (max-width:620px){ .aguayo{--w:24px;height:22px;border-block-width:2px} }

.radio{background:#000;padding:9px 0}
.radio span{font:700 12px/1 var(--f-head);letter-spacing:.15em;text-transform:uppercase;color:var(--amber)}
.radio i{color:var(--magenta);font-style:normal;font-size:11px}

/* ── RAIL LATERAL ──────────────────────────────────────────
   Columna fija de 100px sobre el borde izquierdo. Flota encima del
   contenido (no lo empuja) y es translucida, asi el video del hero
   se ve por detras. Se le suma blur, que la referencia no tiene. */
.rail{position:fixed;inset:0 auto 0 0;z-index:150;width:var(--rail);
  display:none;flex-direction:column;align-items:center;
  background:rgb(23 8 48 / .42);
  backdrop-filter:blur(9px) saturate(1.15);
  border-right:1px solid rgb(255 244 227 / .1)}
.rail__logo{display:grid;place-items:center;width:100%;height:74px;
  background:var(--magenta);flex:none}
.rail__logo img{width:56px;height:56px}
.rail .burger{margin:auto 0}   /* centrado vertical exacto */

/* ── header (sticky: mejora sobre la referencia) ── */
.hd{position:sticky;top:0;z-index:90;height:var(--hd);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:0 var(--gut);background:rgb(14 3 32 / .86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--hair);transition:background .3s}
.hd.is-stuck{background:rgb(14 3 32 / .97)}
.hd__logo,.hd__logo img{display:block;width:46px;height:46px}
/* Sin barra horizontal: la navegacion vive entera en el overlay del burger,
   igual que en el sitio de referencia. */
.hd__end{display:flex;align-items:center;gap:12px}
/* El burger esta a todos los anchos: abre el panel lateral, que lleva la
   navegacion completa. El nav horizontal queda como atajo en desktop. */
.burger{display:flex;width:34px;height:28px;flex-direction:column;justify-content:center;gap:6px}
.burger span{display:block;height:2px;background:var(--cream);transition:transform .3s,opacity .3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ── botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;
  font:800 13px/1 var(--f-head);letter-spacing:.09em;text-transform:uppercase;
  padding:13px 24px;border-radius:3px;transition:transform .28s var(--ease),background .25s,box-shadow .28s}
.btn--buy{background:var(--green);color:var(--ink);padding:10px 16px;font-size:12px}
.btn--buy:hover{transform:translateY(-2px)}
.btn--cta{background:var(--green);color:var(--ink);padding:16px 30px;font-size:15px;
  box-shadow:0 4px 0 #4FA81F}
.btn--cta:hover{transform:translateY(2px);box-shadow:0 2px 0 #4FA81F}
.btn--cta:active{transform:translateY(4px);box-shadow:none}
.btn--ghost{border:1px solid rgb(255 244 227 / .4)}
.btn--ghost:hover{background:rgb(255 244 227 / .12)}

/* ── MENU OVERLAY ──────────────────────────────────────────
   Cubre toda la pantalla, como el del sitio de referencia: logo
   arriba a la izquierda, Cerrar arriba a la derecha, items
   alineados a la izquierda en sans liviano y caja alta. */
.panel{position:fixed;inset:0;z-index:200}
.panel[hidden]{display:none}
/* El fondo entra como cortina desde arriba y los items caen escalonados.
   Antes era un fundido seco de .3s y se sentia brusco. */
.panel__scrim{position:absolute;inset:0;background:var(--night);
  transform-origin:top;transform:scaleY(0);
  transition:transform .5s cubic-bezier(.76,0,.24,1)}
.panel.is-open .panel__scrim{transform:scaleY(1)}

.panel__inner{position:absolute;inset:0;
  display:flex;flex-direction:column;
  padding:clamp(22px,3vw,38px) clamp(22px,4vw,54px) clamp(26px,3vw,40px);
  overflow-y:auto;overscroll-behavior:contain}

/* cada bloque entra con su propio retardo */
.panel__top,.panel__nav a,.panel__sub,.panel__foot{
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .55s var(--ease)}
.panel.is-open .panel__top,
.panel.is-open .panel__nav a,
.panel.is-open .panel__sub,
.panel.is-open .panel__foot{opacity:1;transform:none}

.panel.is-open .panel__top{transition-delay:.24s}
.panel.is-open .panel__nav a:nth-child(1){transition-delay:.30s}
.panel.is-open .panel__nav a:nth-child(2){transition-delay:.36s}
.panel.is-open .panel__nav a:nth-child(3){transition-delay:.42s}
.panel.is-open .panel__nav a:nth-child(4){transition-delay:.48s}
.panel.is-open .panel__nav a:nth-child(5){transition-delay:.54s}
.panel.is-open .panel__sub{transition-delay:.58s}
.panel.is-open .panel__foot{transition-delay:.62s}

/* al cerrar sale todo junto y rapido, sin escalonar */
.panel:not(.is-open) .panel__top,
.panel:not(.is-open) .panel__nav a,
.panel:not(.is-open) .panel__sub,
.panel:not(.is-open) .panel__foot{transition-duration:.18s;transition-delay:0s}
.panel:not(.is-open) .panel__scrim{transition-delay:.1s}

.panel__inner:focus{outline:none}
.panel__edge{position:absolute;inset:0 0 auto 0;height:6px;
  background:repeating-linear-gradient(90deg,
    var(--magenta) 0 22px, var(--amber) 22px 44px, var(--cyan) 44px 66px,
    var(--orange-deep) 66px 88px, var(--green) 88px 110px)}

.panel__top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.panel__logo,.panel__logo img{display:block;width:72px;height:72px}
.panel__close{display:flex;align-items:center;gap:12px;
  font:700 12px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;padding:10px 0}
.panel__close i{position:relative;width:20px;height:20px}
.panel__close i::before,.panel__close i::after{content:'';position:absolute;top:50%;left:0;
  width:100%;height:1.5px;background:currentColor}
.panel__close i::before{transform:rotate(45deg)}
.panel__close i::after{transform:rotate(-45deg)}
.panel__close:hover{color:var(--amber)}

/* bloque de navegacion, alineado a la izquierda y centrado en vertical */
.panel__nav{flex:1;display:flex;flex-direction:column;justify-content:center;
  gap:clamp(6px,1vw,12px);padding-left:clamp(0px,9vw,150px);max-width:900px}
.panel__nav a{font:400 clamp(26px,3.6vw,44px)/1.22 var(--f-body);
  color:rgb(255 244 227 / .62);transition:color .2s var(--ease)}
.panel__nav a:first-child{color:var(--cream)}
.panel__nav a:hover{color:var(--amber)}

.panel__sub{display:flex;flex-wrap:wrap;gap:10px 24px;
  padding-left:clamp(0px,9vw,150px);margin-bottom:clamp(18px,2.4vw,30px)}
.panel__sub a{font-size:14px;color:var(--dim);transition:color .2s}
.panel__sub a:hover{color:var(--cream)}

.panel__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;
  padding-top:clamp(16px,2vw,24px);border-top:1px solid var(--hair)}
.panel__when{font:700 12px/1.5 var(--f-head);letter-spacing:.1em;text-transform:uppercase;
  margin-right:auto}
.panel__when span{display:block;color:var(--dim);letter-spacing:.06em}
.panel__social{display:flex;flex-wrap:wrap;gap:8px}
.panel__social a{font:700 10px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);padding:8px 12px;transition:background .25s}
.panel__social a:hover{background:rgb(255 244 227 / .12)}

body.is-locked{overflow:hidden}

/* ── HERO ── */
.hero{position:relative;min-height:calc(100dvh - var(--hd));display:grid;place-items:center;
  overflow:hidden;isolation:isolate;padding:60px var(--gut) 72px}
.hero__media{position:absolute;inset:0;z-index:-2;background:#000;overflow:hidden}
.hero__poster,.hero__poster img,.hero__media video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* Sin video (mobile, ahorro de datos, reduced motion) el poster respira con un
   zoom lento. Cuando el video arranca, se funde encima y el poster queda quieto. */
.hero__poster{animation:kb 30s ease-in-out infinite alternate;will-change:transform}
.hero__media.has-video .hero__poster{animation:none}
.hero__media video{opacity:0;transition:opacity .9s ease}
.hero__media video.is-playing{opacity:1}
@keyframes kb{to{transform:scale(1.07)}}
.hero__scrim{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(14 3 32 / .72),rgb(14 3 32 / .34) 42%,rgb(14 3 32 / .95))}
.hero__scrim::after{content:'';position:absolute;inset:0;opacity:.055;
  background-image:var(--grain);background-size:180px 180px}
.hero__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vw,44px);text-align:center}

/* ── Wordmark del hero ──
   Es el titular. Ocupa el ancho que le deja el hero y nunca pasa de 720px,
   asi el relieve del logo no se empasta en pantallas grandes. */
.mark{margin:0}
.mark img{width:min(86vw,720px);height:auto;
  filter:drop-shadow(0 10px 26px rgb(14 3 32 / .55))}
@media (min-width:1000px){ .mark img{width:min(58vw,720px)} }

/* ── Claim en relieve ──
   El 3D de los titulares de Perú son PNG dibujados. Acá sale de apilar
   sombras solidas: el contorno lo dan ocho text-shadow al ras (paint-order
   no sirve, que -webkit-text-stroke recorta el interior de la letra), y la
   extrusion son capas de 1px cada vez mas abajo. */
.claim{display:flex;flex-direction:column;align-items:center;gap:.06em;
  text-transform:uppercase;text-align:center;line-height:.94;
  font-family:var(--f-head);font-weight:900;letter-spacing:-.015em;
  color:var(--cream);
  text-shadow:
    -2px -2px 0 var(--ink),  2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink),  2px  2px 0 var(--ink),
     0   -2px 0 var(--ink),  0    2px 0 var(--ink),
    -2px  0   0 var(--ink),  2px  0   0 var(--ink),
     0 3px 0 #2A0A52, 0 4px 0 #2A0A52, 0 5px 0 #240946,
     0 6px 0 #1E073B, 0 9px 16px rgb(14 3 32 / .55)}
.claim span{font-size:clamp(21px,4vw,44px)}
.claim b{font-size:clamp(30px,6vw,68px);color:var(--amber);font-weight:900}

/* "Proximamente": pildora magenta, apoyada en el claim.
   El tracking abre un hueco al final de la palabra, asi que se le
   descuenta al padding derecho para que el bloque quede optico. */
.soon{display:inline-flex}
.soon span{background:var(--magenta);color:#fff;rotate:-1.6deg;
  padding:11px calc(26px - .3em) 13px 26px;
  border:3px solid var(--ink);border-radius:100px;
  font:800 clamp(13px,2vw,20px)/1 var(--f-head);letter-spacing:.3em;text-transform:uppercase;
  box-shadow:0 5px 0 rgb(14 3 32 / .6)}

/* ── Countdown, tomado de la web de Perú ──
   Cajas blancas de esquina muy redondeada, borde negro grueso, sombra
   solida abajo, y la etiqueta afuera de la caja. */
.cd{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(9px,1.6vw,16px)}
.cd[hidden]{display:none}
.cd div{display:flex;flex-direction:column;align-items:center;gap:9px}
.cd b{display:grid;place-items:center;
  min-width:clamp(62px,9vw,104px);padding:clamp(9px,1.3vw,15px) clamp(7px,1vw,12px);
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);border-radius:clamp(14px,2.2vw,24px);
  box-shadow:0 5px 0 rgb(14 3 32 / .6);
  font:900 clamp(25px,4.2vw,44px)/1 var(--f-head);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.cd span{font:800 10px/1 var(--f-head);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cream);text-shadow:0 2px 6px rgb(14 3 32 / .8)}

/* ── AVISO ── */
.reveal{position:relative;overflow:hidden;text-align:center;
  padding:clamp(52px,7vw,92px) var(--gut) clamp(56px,7vw,96px);
  background:#1B0A3C}
.reveal__bg{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 14% 4%,rgb(232 24 140 / .55),transparent 72%),
    radial-gradient(38% 44% at 86% 8%,rgb(43 95 227 / .55),transparent 72%),
    radial-gradient(58% 44% at 50% 106%,rgb(244 97 12 / .5),transparent 72%),
    repeating-linear-gradient(90deg,rgb(255 244 227 / .045) 0 1px,transparent 1px 96px)}
.reveal__bg::after{content:'';position:absolute;inset:0;opacity:.05;
  background-image:var(--grain);background-size:180px 180px}

.reveal__title{position:relative;font:900 clamp(23px,3.7vw,46px)/1.02 var(--f-head);
  letter-spacing:-.02em;text-transform:uppercase;margin-bottom:clamp(20px,3vw,32px)}
.reveal__lead{position:relative;max-width:52ch;margin:0 auto clamp(28px,4vw,44px);
  color:var(--dim);font-size:clamp(15px,1.5vw,17px)}

/* ── formulario de aviso ──────────────────────────────────
   Va dentro de un panel: asi la alineacion a la izquierda queda
   intencional y no como un corte contra la seccion centrada. */
.lead{position:relative;max-width:560px;margin-inline:auto;text-align:left;
  display:flex;flex-direction:column;gap:22px;
  padding:clamp(24px,3vw,34px);
  background:rgb(14 3 32 / .5);border:1px solid rgb(255 244 227 / .16);
  border-radius:6px;backdrop-filter:blur(6px)}

.lead__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin:0;display:flex;flex-direction:column;gap:7px;border:0;padding:0;min-width:0}
.field label,.field legend{font:700 11px/1 var(--f-head);letter-spacing:.14em;
  text-transform:uppercase;color:rgb(255 244 227 / .78);padding:0;float:none}
.field input[type=text],.field input[type=tel]{
  width:100%;font:400 16px/1.2 var(--f-body);color:var(--cream);
  background:rgb(255 244 227 / .07);border:1px solid rgb(255 244 227 / .26);
  border-radius:4px;padding:13px 14px;outline:none;
  transition:border-color .2s,background .2s,box-shadow .2s}
.field input::placeholder{color:rgb(255 244 227 / .38)}
.field input:hover{border-color:rgb(255 244 227 / .42)}
.field input:focus{border-color:var(--amber);background:rgb(255 244 227 / .1);
  box-shadow:0 0 0 3px rgb(255 210 74 / .18)}
.field input[aria-invalid=true]{border-color:#FF6B6B;background:rgb(255 107 107 / .08)}

/* El slot de error solo ocupa lugar cuando hay error. Con min-height fijo
   metia un hueco muerto debajo de cada campo y descuadraba el ritmo. */
.field__err{font-size:13px;line-height:1.35;color:#FF8A8A}
.field__err:empty{display:none}

/* el telefono no necesita el ancho completo */
.field--tel input{max-width:280px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1px}
.chips label{cursor:pointer}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips span{display:inline-block;font:700 12px/1 var(--f-head);letter-spacing:.08em;
  text-transform:uppercase;padding:11px 14px;border-radius:100px;
  border:1px solid rgb(255 244 227 / .26);
  transition:background .2s,border-color .2s,color .2s}
.chips label:hover span{border-color:rgb(255 244 227 / .5)}
.chips input:checked + span{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.chips input:focus-visible + span{outline:3px solid var(--amber);outline-offset:3px}

.check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  font-size:14.5px;line-height:1.45;color:var(--cream);
  padding-top:2px;border-top:1px solid rgb(255 244 227 / .12);padding-top:20px}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--green)}
.check b{color:var(--amber)}

.lead__send{width:100%;margin-top:2px}
.lead__send[disabled]{opacity:.6;cursor:progress}
.lead__msg:empty{display:none}
.lead__msg{font-size:14.5px;line-height:1.4;margin-top:-8px}
.lead__msg[data-state=ok]{color:var(--green)}
.lead__msg[data-state=error]{color:#FF8A8A}
.lead__legal{font-size:12px;line-height:1.55;color:rgb(255 244 227 / .48);
  margin-top:-10px}

@media (max-width:560px){
  .lead__row{grid-template-columns:1fr}
  .field--tel input{max-width:none}
}

/* ── titulos de seccion ── */
.h2{font:900 clamp(24px,3.8vw,46px)/1.02 var(--f-head);letter-spacing:-.02em;text-transform:uppercase;
  margin-bottom:clamp(24px,3.4vw,44px)}
.h2 .ch{display:inline-block;opacity:0;transform:translateY(.4em)}
.h2.is-in .ch{animation:rise .55s var(--ease) forwards;animation-delay:calc(var(--i) * 20ms)}
@keyframes rise{to{opacity:1;transform:none}}
.wd{display:inline-block;white-space:nowrap}
.sp{display:inline-block;width:.26em}

/* ── EDICIONES ANTERIORES ──
     Una edicion por bloque de color, con su resumen oficial adentro. */
.eds{background:#000;padding:clamp(52px,7vw,90px) 0 clamp(56px,7vw,96px)}
.eds__wrap{max-width:1100px;margin-inline:auto;padding-inline:var(--gut)}
.eds .h2{text-align:center}
.ed{position:relative;background:var(--cobalt);
  padding:clamp(28px,4vw,52px) clamp(20px,3.4vw,44px) clamp(32px,4.4vw,56px)}
.ed + .ed{margin-top:clamp(34px,5vw,64px)}
.ed--2026{background:var(--orange-deep)}

/* ── stickers troquelados ── */
.sticker{position:absolute;z-index:3;pointer-events:none;
  filter:drop-shadow(4px 5px 0 rgb(14 3 32 / .45))}
.sticker svg{display:block}
.sticker--speaker{left:-46px;top:36%;rotate:-11deg}
.sticker--round{right:-40px;top:-40px;rotate:13deg}
.sticker--tag{right:24px;bottom:-18px;rotate:-4deg;
  background:var(--green);color:var(--ink);
  font:800 13px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 16px;border:3px solid var(--cream);border-radius:100px}

@media (max-width:900px){
  .sticker--speaker{left:-24px;top:auto;bottom:-30px;scale:.7}
  .sticker--round{right:-18px;top:-30px;scale:.72}
  .sticker--tag{display:none}
}
@media (max-width:560px){
  .sticker--speaker{display:none}
  .sticker--round{right:-14px;top:-24px;scale:.6}
}
.ed__title{position:relative;z-index:1;text-align:center;margin-bottom:clamp(20px,3vw,34px);
  font:900 clamp(23px,3.4vw,42px)/1.03 var(--f-head);letter-spacing:-.02em;text-transform:uppercase}
.ed__title span{display:block;font-size:.44em;letter-spacing:.16em;color:rgb(255 244 227 / .8);margin-top:8px}

/* Edicion sin video todavia: misma caja, imagen fija y cartel encima. */
.player__still{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.player__still img{width:100%;height:100%;object-fit:cover}
.ed__soon{position:absolute;inset:0;display:grid;place-items:center;background:rgb(14 3 32 / .58)}
.ed__soon span{border:3px solid var(--cream);padding:12px calc(22px - .22em) 13px 22px;
  font:800 clamp(11px,1.7vw,16px)/1 var(--f-head);letter-spacing:.18em;text-transform:uppercase;
  text-align:center}
.player__facade{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000}
.player__facade img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.player__facade::after{content:'';position:absolute;inset:0;background:rgb(14 3 32 / .26)}
.player__facade:hover img{transform:scale(1.04)}
.player__play{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:80px;height:80px;border-radius:50%;background:var(--green);
  box-shadow:0 5px 0 #4FA81F;transition:transform .3s var(--ease)}
.player__play::before{content:'';position:absolute;left:56%;top:50%;translate:-50% -50%;
  border-left:23px solid var(--ink);border-top:14px solid transparent;border-bottom:14px solid transparent}
.player__facade:hover .player__play{transform:translate(-50%,-50%) scale(1.08)}
.player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

/* ── FOOTER ── */
.ft{background:#000;padding:clamp(38px,5vw,60px) var(--gut) 30px;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.ft__logo,.ft__logo img{display:block;width:84px;height:84px}
.ft__social{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ft__social a{font:700 11px/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--hair);padding:9px 14px;transition:background .25s}
.ft__social a:hover{background:rgb(255 244 227 / .12)}
.ft__copy{font-size:12px;color:rgb(255 244 227 / .5)}

/* ── de 1000px para arriba: manda el rail, el header se retira ── */
@media (min-width:1000px){
  :root{--rail:100px}
  .rail{display:flex}
  .hd{display:none}
  /* El rail flota sobre el contenido, asi que hay que correrlo para no
     taparlo. Tres casos distintos, no se resuelven todos igual: */

  /* 1. secciones a sangre: se agranda el padding interno */
  .topbar,.radio,.reveal,.ft,.hero__inner{padding-left:calc(var(--gut) + var(--rail))}

  /* 2. seccion a sangre con hijo centrado: se corre la seccion, asi el hijo
        sigue centrado en el espacio que queda */
  .eds{padding-left:var(--rail)}
}

/* ── responsive ── */
@media (max-width:620px){
  .hd .btn--buy{padding:9px 12px;font-size:11px}
}

/* ── accesibilidad ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .h2 .ch{opacity:1!important;transform:none!important}
  .hero__media img{animation:none}
}