/* ==========================================================================
   OMAYA SANCTUARY — sistema visual
   Fuente única de verdad: Omaya_Brand System.pdf (brandartstudio, 16/03/2026).

   Las tres reglas del manual que mandan sobre todo lo demás:

   1. TIPOGRAFÍA. Solo dos familias, las del manual y ninguna más.
      Herculanum ALL CAPS tracking 20 para los títulos.
      EB Garamond tracking 180 ALL CAPS para los antetítulos (statement text).
      EB Garamond tracking 0 para el cuerpo.
   2. PALETA. Los 5 hex del manual y ninguno más. Los tintes que aparecen son
      siempre uno de esos 5 con alfa, nunca un color nuevo.
   3. COMPOSICIÓN. El manual arma todo con bloques planos de color y fotos a
      sangre en una grilla dura. Las secciones alternan superficie: verde,
      crema, salvia. Eso es la marca — no un fondo verde de punta a punta.

   CONTRASTE. Con solo 5 colores hay exactamente cuatro pares que pasan AA en
   texto chico, y el sitio no usa ningún otro para texto:
      crema sobre verde 9,31 · verde sobre crema 9,31
      salvia sobre verde 5,33 · verde sobre salvia 5,33
   El dorado (3,19 contra verde, 2,92 contra crema) NO lleva texto nunca: es
   filete, marco, ornamento y número grande. Es exactamente lo que el cliente
   viene tachando en rojo desde la call del 7/7.
   ========================================================================== */

/* ── Familias del manual ──────────────────────────────────────────────── */
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'EB Garamond';
  src:url('../fonts/EBGaramond-Italic.woff2') format('woff2');
  font-weight:400 800; font-style:italic; font-display:swap;
}
/* Herculanum (Linotype). El cliente confirmó que licencia la fuente para web.
   Subset latino, 16 KB. Es la voz de los títulos en todo el manual. */
@font-face{
  font-family:'Herculanum';
  src:url('../fonts/Herculanum.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* Paleta oficial — pág. 04 del manual */
  --verde:#214334;      /* 25% primario */
  --medio:#638D75;      /* 25% primario */
  --salvia:#A8BAA8;     /* 25% primario */
  --oro:#AA8555;        /* 12,5% secundario */
  --crema:#EFEDDC;      /* 12,5% secundario */

  /* Tokens de superficie. Cada sección declara los suyos y todo lo de adentro
     —texto, filetes, botones— los hereda. Así ningún componente puede quedar
     con un contraste inválido por estar en la sección equivocada. */
  --bg:var(--verde);
  --tinta:var(--crema);      /* texto principal   9,31 */
  --tinta-2:var(--salvia);   /* texto secundario  5,33 */
  --filete:rgba(170,133,85,.42);
  --filete-fuerte:rgba(170,133,85,.7);
  --btn-bg:var(--crema);
  --btn-tinta:var(--verde);

  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);

  --navh:clamp(66px,7vw,88px);
  --pad:clamp(1.25rem,4.6vw,4rem);
  --max:1320px;
  --sec-y:clamp(4rem,7.5vw,7rem);
}

/* ── Superficies ──────────────────────────────────────────────────────── */
.s-verde{
  --bg:var(--verde); --tinta:var(--crema); --tinta-2:var(--salvia);
  --filete:rgba(170,133,85,.42); --filete-fuerte:rgba(170,133,85,.75);
  --btn-bg:var(--crema); --btn-tinta:var(--verde);
}
.s-crema{
  --bg:var(--crema); --tinta:var(--verde); --tinta-2:var(--verde);
  --filete:rgba(170,133,85,.55); --filete-fuerte:var(--oro);
  --btn-bg:var(--verde); --btn-tinta:var(--crema);
}
.s-salvia{
  --bg:var(--salvia); --tinta:var(--verde); --tinta-2:var(--verde);
  --filete:rgba(33,67,52,.3); --filete-fuerte:rgba(33,67,52,.55);
  --btn-bg:var(--verde); --btn-tinta:var(--crema);
}
.s-verde,.s-crema,.s-salvia{background:var(--bg);color:var(--tinta)}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--verde);color:var(--crema);
  font-family:'EB Garamond',Georgia,'Times New Roman',serif;
  font-size:clamp(1.04rem,.5vw + .94rem,1.2rem);line-height:1.75;
  font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
/* El navegador le pone `margin: 1em 40px` a todo <figure>. Con las fotos
   metidas en figuras, ninguna llegaba a sangre: quedaba un marco de 40 px del
   color de la sección. El manual las usa de punta a punta. */
figure{margin:0}
/* Los controles de formulario NO heredan la tipografía del documento: un
   <button> sin font-family se dibuja con la del sistema (Arial). Así se coló
   una tipografía que no está en el manual, en la etiqueta de la galería y en
   las flechas del visor. Con esto ningún elemento puede escaparse de las dos
   familias del brandbook. */
button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.28em}
::selection{background:var(--oro);color:var(--crema)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--tight{max-width:820px}
.sec{padding-block:var(--sec-y);position:relative}
.sec--band{padding-block:clamp(3rem,5.5vw,5rem)}
.sec--flushb{padding-bottom:0}
.center{text-align:center}
.center .kicker--rule,.center .secnum{justify-content:center}
.center .kicker--rule::after{display:none}
.center .lede{margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Salto al contenido: invisible hasta que alguien navega con teclado. */
/* Se posa DEBAJO de la barra (88px): en .6rem le tapaba el wordmark. */
.skip{
  position:fixed;top:6rem;left:.9rem;z-index:120;
  /* El desplazamiento tiene que superar el `top`, no solo la propia altura. */
  transform:translateY(calc(-100% - 7rem));
  background:var(--crema);color:var(--verde);padding:.7rem 1.2rem;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.17em;text-decoration:none;
  transition:transform .3s var(--out);
}
.skip:focus{transform:none}

/* ── Escala tipográfica del manual ────────────────────────────────────── */

/* STATEMENT TEXT — EB Garamond, ALL CAPS, tracking 180 */
.kicker{
  margin:0 0 1.5rem;font-size:clamp(.63rem,.24vw + .58rem,.74rem);
  text-transform:uppercase;letter-spacing:.18em;font-weight:500;
  color:var(--tinta-2);
}
.kicker--rule{display:flex;align-items:center;gap:1.1rem}
.kicker--rule::after{content:'';flex:1;height:1px;background:var(--filete);max-width:8rem}

/* TITLE TEXT — Herculanum, ALL CAPS, tracking 20 */
.title{
  font-family:'Herculanum','EB Garamond',serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.04;
  margin:0 0 1.6rem;text-wrap:balance;
  font-size:clamp(1.85rem,4.3vw,3.5rem);
}
.title--xl{font-size:clamp(2.3rem,6.6vw,5rem);line-height:1}
.title--sm{font-size:clamp(1.25rem,2vw,1.6rem);margin-bottom:.9rem}

/* Los enunciados de marca del manual mezclan romana y bastardilla dentro de la
   misma frase: "RECONNECT with your ESSENCE". Las mayúsculas van en Garamond
   con tracking 180 y las minúsculas en itálica sin tracking. */
.statement{
  font-family:'EB Garamond',serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.42;
  font-size:clamp(1.05rem,2.3vw,1.85rem);margin:0;text-wrap:balance;
}
.statement i,.statement em{text-transform:lowercase;font-style:italic;letter-spacing:0}
.statement--xl{font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.3}

/* Cita larga: romana + itálica, caja normal (pág. 10 del manual) */
.quote{
  font-family:'EB Garamond',serif;font-size:clamp(1.5rem,3.6vw,2.9rem);
  line-height:1.28;letter-spacing:-.01em;margin:0;text-wrap:balance;
}
.quote i,.quote em{font-style:italic}

.lede{font-size:clamp(1.06rem,.6vw + .92rem,1.26rem);line-height:1.72;margin:0 0 1.3rem;max-width:56ch;color:var(--tinta)}
.lede--2{color:var(--tinta-2)}
p{margin:0 0 1.2rem}
.note{font-size:.86rem;line-height:1.6;color:var(--tinta-2);margin:0}

/* Cifra grande estilo "10 Days": Garamond enorme + itálica debajo, filete al medio */
.numeral{font-size:clamp(3rem,9vw,6.4rem);line-height:.86;font-weight:400;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.02em;margin:0}

/* Numeración de sección: 01. — ornamento, no texto de lectura */
.secnum{
  font-size:.72rem;letter-spacing:.22em;color:var(--tinta-2);
  display:flex;align-items:center;gap:.9rem;margin:0 0 1.4rem;
}
.secnum::after{content:'';width:3.2rem;height:1px;background:var(--filete-fuerte)}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.05em 2.3em;border:1px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-tinta);
  font-family:'EB Garamond',serif;font-size:.79rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.17em;text-decoration:none;cursor:pointer;
  border-radius:0;transition:color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--out);
}
/* El relleno del hover vive DETRÁS del texto (z-index negativo dentro del
   propio botón, que aísla su contexto). Un ::before con inset:0 sin z-index
   se pinta encima y tapa la etiqueta: ese bug ya pasó una vez. */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--btn-tinta);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .55s var(--out);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{color:var(--btn-bg)}
.btn--line{background:transparent;border-color:var(--tinta);color:var(--tinta)}
.btn--line::before{background:var(--tinta)}
.btn--line:hover,.btn--line:focus-visible{color:var(--bg)}
.btn--sm{padding:.78em 1.5em;font-size:.7rem}
.btn--full{width:100%}
.btn[hidden]{display:none}

/* Enlace de texto con filete dorado que crece */
.link{
  display:inline-block;text-decoration:none;position:relative;padding-bottom:.18em;
  font-size:.8rem;text-transform:uppercase;letter-spacing:.17em;color:var(--tinta);
}
.link::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--filete-fuerte);
  transform:scaleX(1);transform-origin:left;transition:transform .55s var(--out);
}
.link:hover::after{transform:scaleX(.4);transform-origin:left}

/* ── Grano y patrón de ondas del manual ───────────────────────────────── */
.grain{
  position:fixed;inset:-100%;z-index:9;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}16%{transform:translate(-3%,-4%)}33%{transform:translate(-6%,3%)}
  50%{transform:translate(4%,-3%)}66%{transform:translate(-2%,5%)}83%{transform:translate(3%,2%)}
}
/* La textura tono sobre tono de las páginas 9 y 10: líneas onduladas del propio
   manual, en crema sobre salvia. Deriva despacio, no gira ni parpadea. */
.wavebg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wavebg i{
  position:absolute;inset:-10% -10% -10% -10%;
  background:url('../img/pattern-wave.svg') repeat;
  background-size:clamp(320px,34vw,520px);
  opacity:.46;animation:drift 46s linear infinite;
}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-8%,-4%,0)}}
.s-verde .wavebg i{opacity:.13}
.wavebg + *{position:relative;z-index:1}

/* ══ NAV ═══════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  height:var(--navh);padding-inline:var(--pad);
  background:var(--verde);box-shadow:0 1px 0 rgba(170,133,85,.42);
  transition:height .5s var(--ease),box-shadow .5s;
}
.nav__brand{display:block;line-height:0}
.nav__brand img{width:clamp(112px,11vw,148px);transition:width .55s var(--ease)}
.nav__right{display:flex;align-items:center;gap:clamp(.8rem,2.4vw,2rem)}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2rem)}
.nav__links a{
  font-size:.71rem;text-transform:uppercase;letter-spacing:.18em;text-decoration:none;
  color:var(--crema);position:relative;padding-bottom:.25em;
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--oro);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav.is-stuck{height:calc(var(--navh) * .82);box-shadow:0 1px 0 var(--oro)}
.nav.is-stuck .nav__brand img{width:104px}
.nav__prog{position:absolute;left:0;bottom:0;height:1px;background:var(--oro);width:0;transition:width .12s linear}
.lang{display:flex;align-items:center;gap:.4rem;font-size:.7rem;letter-spacing:.16em;color:var(--crema)}
.lang button{
  background:none;border:0;padding:.2rem 0;color:inherit;font:inherit;letter-spacing:inherit;
  cursor:pointer;border-bottom:1px solid transparent;transition:border-color .4s,opacity .4s;opacity:.62;
}
.lang button.is-on{opacity:1;border-color:var(--oro)}
.lang button:hover{opacity:1}
@media (max-width:820px){.nav__links{display:none}}
@media (max-width:520px){.nav__right .btn{display:none}.nav.is-stuck .nav__right .btn{display:inline-flex}}

/* ══ HERO PARTIDO ══════════════════════════════════════════════════════
   La composición de la pág. 08 del manual: bloque plano de color a un lado,
   fotografía a sangre al otro. Nada de texto flotando sobre una foto. */
.hero{display:grid;grid-template-columns:1.02fr .98fr;margin-top:var(--navh);min-height:calc(100svh - var(--navh));background:var(--verde)}
.hero__panel{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(3rem,6vw,5rem) clamp(1.5rem,4.4vw,4.6rem);
  position:relative;overflow:hidden;
}
.hero__logo{width:min(74%,300px);margin:0 0 clamp(1.8rem,4vw,3rem)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  margin:0 0 1.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta-2);
}
.hero__meta span{display:flex;align-items:center;gap:1.4rem}
.hero__meta span::after{content:'';width:1.6rem;height:1px;background:var(--filete-fuerte)}
.hero__meta span:last-child::after{display:none}
.hero__date{
  font-size:clamp(2.6rem,7.4vw,5.2rem);line-height:1;letter-spacing:.02em;margin:.2rem 0 1.6rem;
  font-variant-numeric:tabular-nums lining-nums;color:var(--tinta);
}
/* El separador de la fecha es un ornamento, no texto: se dibuja. Como carácter
   dorado quedaba en 2,88 y ninguna auditoría de contraste lo iba a perdonar. */
.dot{
  display:inline-block;width:.11em;height:.11em;border-radius:50%;
  background:var(--oro);vertical-align:.34em;margin-inline:.3em;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.hero__foot{
  margin-top:auto;padding-top:clamp(2rem,4vw,3rem);
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
}
/* Hero con el video primero (03/09). El video manda: ocupa el ancho entero
   y el texto va debajo, sobre el verde, donde el contraste esta garantizado. */
/* `flow-root`, no `block`: el hero hereda `margin-top:var(--navh)` de `.hero`
   y sin contexto de formato propio el margen superior de la pieza de video
   COLAPSA contra el del hero — el video quedaba pegado a la barra. */
.hero--vid{display:flow-root;min-height:0}
.hero__bajo{background:var(--verde);color:var(--crema);text-align:center;
  padding-block:clamp(2.4rem,5vw,4rem)}
/* `.lede` trae `max-width:56ch` y `margin:0 0 1.3rem`: en un bloque centrado
   la CAJA se pegaba a la izquierda aunque el texto fuera centrado. Se ve solo
   en pantallas anchas, donde 56ch entra de sobra. */
.hero__bajo .lede{margin-inline:auto}
.hero__bajo .hero__foot{margin-top:clamp(1.2rem,2.4vw,1.8rem);opacity:.78}

.hero__media{position:relative;overflow:hidden;min-height:56svh}
/* El video de portada ocupa el panel igual que la foto que habia antes. */
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  transform:scale(1.08);animation:ken 30s var(--ease) infinite alternate;
}
@keyframes ken{from{transform:scale(1.08)}to{transform:scale(1.2) translate3d(-1.2%,-1.4%,0)}}
/* Marco dorado interior: el filete del manual, no una sombra ni un degradé */
.hero__media::after{content:'';position:absolute;inset:clamp(.8rem,1.6vw,1.6rem);border:1px solid rgba(239,237,220,.34);pointer-events:none}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  /* En vertical la foto se comía la pantalla y el título quedaba abajo del
     pliegue: la fotografía abre, pero el titular tiene que entrar con ella. */
  .hero__media{min-height:44svh;order:-1}
  .hero__panel{padding-block:clamp(2.6rem,7vw,4rem)}
  .hero__logo{width:min(70%,250px)}
}

/* ══ CUENTA REGRESIVA ══════════════════════════════════════════════════
   Tratamiento "10 Days" del manual: cifra grande en romana, palabra en
   itálica debajo, filete al medio. */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.4rem,2vw,2rem);margin:0;padding:0;list-style:none}
.count li{text-align:center;position:relative;padding-inline:clamp(.2rem,1vw,1rem)}
.count li + li::before{content:'';position:absolute;left:0;top:12%;bottom:12%;width:1px;background:var(--filete)}
.count__n{
  display:block;font-size:clamp(2.2rem,7vw,5rem);line-height:.94;
  font-variant-numeric:tabular-nums lining-nums;color:var(--tinta);
}
.count__n.is-tick{animation:tick .5s var(--out)}
@keyframes tick{0%{opacity:0;transform:translateY(-.16em)}100%{opacity:1;transform:none}}
.count__l{
  display:block;margin-top:.7rem;padding-top:.7rem;position:relative;
  font-style:italic;font-size:clamp(.82rem,1.2vw,1.02rem);color:var(--tinta-2);letter-spacing:.02em;
}
.count__l::before{content:'';position:absolute;top:0;left:50%;translate:-50% 0;width:2.2rem;height:1px;background:var(--filete-fuerte)}
@media (max-width:560px){.count{gap:.2rem}.count li{padding-inline:.1rem}}

/* ══ GRILLA DE MARCA ═══════════════════════════════════════════════════
   La página 10 del manual, tal cual: celdas duras a sangre, unas con foto,
   otras planas de color, otras solo tipografía. Sin bordes redondeados,
   sin sombras, sin degradés sobre las fotos. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.cell{position:relative;overflow:hidden;margin:0;aspect-ratio:1;display:flex}
.cell--wide{grid-column:span 2;aspect-ratio:2}
.cell--tall{grid-row:span 2;aspect-ratio:1/2}
.cell--photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--out)}
.cell--photo:hover img{transform:scale(1.06)}
/* Las celdas de color se estiran a la altura que marca la fila de fotos, pero
   sin proporción fija: si el texto es más alto que la foto, la fila crece en
   vez de recortar la frase. Con `overflow:hidden` y aspecto 1:1 se comía la
   última línea en pantallas angostas. */
.cell--flat{aspect-ratio:auto;align-items:center;justify-content:center;padding:clamp(1.4rem,3vw,2.6rem);text-align:center}
.cell--flat .statement{font-size:clamp(.98rem,1.9vw,1.6rem)}
.cell--flat.s-verde{background:var(--verde)}
.cell--flat.s-crema{background:var(--crema)}
.cell--flat.s-salvia{background:var(--salvia)}
.cell__mark{width:min(58%,190px);height:auto;margin:0 auto;object-fit:contain}
.cell__cap{
  position:absolute;left:0;right:0;bottom:0;margin:0;
  padding:clamp(.8rem,1.6vw,1.15rem) clamp(1rem,2.2vw,1.6rem);
  background:var(--crema);color:var(--verde);
  font-size:.66rem;text-transform:uppercase;letter-spacing:.2em;
  transform:translateY(101%);transition:transform .6s var(--out);
}
.cell--photo:hover .cell__cap,.cell--photo:focus-within .cell__cap{transform:none}
@media (hover:none){.cell__cap{transform:none}}
@media (max-width:820px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cell--wide{grid-column:span 2;aspect-ratio:2}
  .cell--tall{grid-row:auto;aspect-ratio:1}
}
@media (max-width:480px){
  .grid{grid-template-columns:1fr}
  .cell,.cell--wide,.cell--tall{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .cell--flat{aspect-ratio:auto;min-height:46vw}
}

/* ══ BLOQUE PARTIDO (texto ∕ foto) ═════════════════════════════════════ */
.duo{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0}
.duo__text{display:flex;flex-direction:column;justify-content:center;padding:var(--sec-y) clamp(1.4rem,5vw,5rem)}
.duo__media{position:relative;overflow:hidden;min-height:clamp(320px,52vw,680px)}
.duo__media img{width:100%;height:100%;object-fit:cover}
.duo--flip .duo__media{order:-1}
@media (max-width:880px){
  .duo{grid-template-columns:1fr}
  .duo--flip .duo__media{order:0}
  .duo__media{min-height:64vw}
}

/* ══ MARQUESINA ════════════════════════════════════════════════════════ */
.marq{overflow:hidden;padding-block:clamp(1.6rem,3vw,2.6rem);border-block:1px solid var(--filete)}
.marq__row{display:flex;width:max-content;animation:slide 42s linear infinite}
.marq:hover .marq__row{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marq__row span{
  font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;letter-spacing:.05em;
  font-size:clamp(1.3rem,3.2vw,2.4rem);padding-inline:clamp(1rem,2.4vw,2rem);white-space:nowrap;
  display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);color:var(--tinta);
}
.marq__row span::after{content:'';width:7px;height:7px;background:var(--oro);border-radius:50%;flex:none}

/* ══ TIRA DE FOTOS ═════════════════════════════════════════════════════ */
.strip{display:block;width:100%;border:0;padding:0;background:none;cursor:pointer;position:relative;overflow:hidden}
/* La duración va con la cantidad de fotos: 10 fotos corrían en 66s; con 24
   (13/09/2026) la misma velocidad son ~160s. Si se agregan fotos, subirla. */
.strip__row{display:flex;width:max-content;animation:slide 160s linear infinite}
.strip:hover .strip__row{animation-play-state:paused}
.strip__row img{height:clamp(230px,32vw,440px);width:auto;flex:none;object-fit:cover}
.strip__cta{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:inline-flex;align-items:center;gap:.9rem;padding:1rem 1.9rem;
  background:var(--crema);color:var(--verde);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.19em;font-weight:600;
  transition:background .45s,color .45s,transform .5s var(--out);
}
/* Solo la escala: el centrado lo hace `translate`, y repetirlo aca lo
   aplicaba dos veces —el boton se corria 177px al acercar el mouse. */
.strip:hover .strip__cta{background:var(--verde);color:var(--crema);transform:scale(1.03)}
.strip__cta svg{width:15px;fill:currentColor;flex:none}
.strip__cta span{white-space:nowrap}
@media (max-width:560px){
  .strip__cta{padding:.85rem 1.2rem;gap:.6rem;font-size:.62rem;letter-spacing:.16em}
}

/* ══ ENTRADAS ══════════════════════════════════════════════════════════ */
.tix{display:grid;gap:clamp(1.2rem,2.4vw,2rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.tix--one{grid-template-columns:minmax(0,520px);justify-content:center}
/* La entrada es una pieza en verde sobre la superficie crema: una tarjeta
   crema sobre fondo crema no se veía. Las muescas del troquel se pintan del
   color de la sección, así que recortan de verdad. */
.ticket{
  position:relative;display:flex;flex-direction:column;gap:1.15rem;text-align:left;
  padding:clamp(1.9rem,3.4vw,2.9rem);
  background:var(--verde);color:var(--crema);
  box-shadow:inset 0 0 0 1px rgba(170,133,85,.55);
  transition:transform .6s var(--out),box-shadow .6s var(--ease);
}
.ticket:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 1px var(--oro),0 26px 60px -34px rgba(33,67,52,.9)}
.ticket--dest{box-shadow:inset 0 0 0 2px var(--oro)}
.ticket__tag{
  position:absolute;top:0;right:clamp(1.4rem,3vw,2.4rem);translate:0 -50%;
  background:var(--oro);color:var(--verde);
  padding:.45em 1.1em;font-size:.62rem;text-transform:uppercase;letter-spacing:.2em;font-weight:700;
}
.ticket__name{
  font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;letter-spacing:.04em;
  font-size:clamp(1.15rem,1.9vw,1.45rem);margin:0;color:var(--crema);
}
.ticket__amt{font-size:clamp(2.8rem,5.4vw,3.9rem);line-height:1;margin:0;font-variant-numeric:tabular-nums lining-nums}
.ticket__amt sup{font-size:.3em;vertical-align:1em;letter-spacing:.2em;margin-left:.45em;color:var(--salvia)}
/* Troquel: línea punteada dorada y dos muescas del color de la sección. */
.ticket__perf{position:relative;height:1px;margin:.5rem calc(-1 * clamp(1.9rem,3.4vw,2.9rem));
  background:repeating-linear-gradient(to right,var(--oro) 0 7px,transparent 7px 14px);opacity:.75}
.ticket__perf::before,.ticket__perf::after{
  content:'';position:absolute;top:50%;translate:0 -50%;width:20px;height:20px;border-radius:50%;background:var(--bg);
}
.ticket__perf::before{left:-10px}
.ticket__perf::after{right:-10px}
.ticket__inc{list-style:none;margin:0;padding:0;display:grid;gap:.65rem;flex:1}
.ticket__inc li{position:relative;padding-left:1.4rem;font-size:1rem;line-height:1.55;color:var(--salvia)}
.ticket__inc li::before{content:'';position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--oro);border-radius:50%}
.ticket .btn{--btn-bg:var(--crema);--btn-tinta:var(--verde);margin-top:.5rem}
/* Aclaración de que la lista de abajo es de TODA entrada, no de un tipo
   puntual: mismo tono que .ticket__inc, sin viñeta. */
.ticket__note{font-size:.86rem;line-height:1.6;color:var(--salvia);margin:0}

/* ══ APORTES ═══════════════════════════════════════════════════════════
   El cliente mando una captura de la propuesta VIVA senalando "especificamente
   el metodo de eligir los donaciones": tarjeta con filete, monto grande,
   beneficio y su propia accion, una por fila en telefono. Antes eran paneles
   crema; el filete sobre el verde es lo que el marco.

   Toda la tarjeta es el enlace: en la captura no hay un boton adentro de una
   caja, la caja ES el boton. */
.aportes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);
  margin-top:clamp(2.2rem,4vw,3.2rem);
}
.aporte{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;
  padding:clamp(1.4rem,2.4vw,2rem);text-decoration:none;color:var(--tinta);
  box-shadow:inset 0 0 0 1px var(--filete);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease);
}
.aporte:hover,.aporte:focus-visible{box-shadow:inset 0 0 0 1px var(--oro);transform:translateY(-3px)}
.aporte__amt{
  font-size:clamp(2.1rem,3.8vw,2.9rem);line-height:1;margin:0;
  font-variant-numeric:tabular-nums lining-nums;
}
.aporte__amt sup{font-size:.28em;vertical-align:1.1em;letter-spacing:.2em;margin-left:.4em;opacity:.72}
/* Salvia, no dorado: el dorado no lleva texto ni cuando mide 10px. */
.aporte__tag{
  margin:0;font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--tinta-2);
}
.aporte__ben{margin:0;font-size:.92rem;line-height:1.5;color:var(--tinta-2);flex:1}
.aporte__cta{
  margin-top:.7rem;padding-top:.7rem;font-size:.66rem;letter-spacing:.19em;
  text-transform:uppercase;font-weight:600;
}
@media (max-width:900px){.aportes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.aportes{grid-template-columns:1fr}}

/* ── Bandas de foto a sangre ───────────────────────────────────────────
   El brief las pide en dos lugares: una foto hermosa antes del proposito
   humano y una imagen a todo el ancho en el cierre. El texto va SIEMPRE
   debajo, nunca encima: ninguna foto de Omaya aguanta texto arriba (la mejor
   zona de la mejor foto da 3,33 contra el crema). */
.banda{margin:0;overflow:hidden;line-height:0;background:var(--verde)}
.banda img{width:100%;height:clamp(240px,34vw,420px);object-fit:cover;display:block}
.banda--alta img{height:clamp(280px,42vw,540px)}

/* ── Carrusel de la obra ───────────────────────────────────────────────
   Scroll nativo con snap: rueda, dedo y teclado andan sin JS; las flechas
   solo empujan. A sangre a proposito —la foto llega hasta el borde, que es
   como compone el manual. */
.carr{position:relative;margin-top:clamp(2.4rem,4.5vw,3.6rem)}
.carr__pista{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  /* Alineado con el texto de la seccion, no con el borde de la pantalla: la
     primera foto arranca donde arranca el titulo. */
  padding-inline:calc(var(--pad) + max(0px, (100% - var(--max)) / 2));
  /* Sin scroll-padding, el snap alinea la primera foto contra el borde del
     scroller y se come la sangria: la pista aparece corrida al cargar. */
  scroll-padding-inline:calc(var(--pad) + max(0px, (100% - var(--max)) / 2));
  padding-bottom:clamp(1.5rem,3vw,2.4rem);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carr__pista::-webkit-scrollbar{display:none}
.carr__pista:focus-visible{outline:1px solid var(--oro);outline-offset:-4px}
.carr__it{margin:0;flex:none;width:clamp(240px,30vw,420px);scroll-snap-align:start}
.carr__it img{width:100%;height:clamp(300px,34vw,460px);object-fit:cover;display:block}
.carr__it figcaption{
  margin-top:.9rem;font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.78rem;color:var(--tinta);
}
.carr__nav{display:flex;gap:.5rem;padding-inline:calc(var(--pad) + max(0px, (100% - var(--max)) / 2));margin-top:.2rem}
.carr__b{
  width:44px;height:44px;border:1px solid var(--filete-fuerte);background:transparent;
  color:var(--tinta);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:background .35s,color .35s,opacity .35s;
}
.carr__b:hover:not(:disabled){background:var(--tinta);color:var(--bg)}
.carr__b:disabled{opacity:.28;cursor:default}
@media (hover:none){.carr__nav{display:none}}

/* ── Comunidad mensual: la lista de lo que incluye ────────────────── */
.perks{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .4rem}
.perks li{
  font-size:.82rem;letter-spacing:.04em;padding:.45em .9em;
  box-shadow:inset 0 0 0 1px var(--filete);color:var(--tinta-2);
}

/* ── Monto libre ──────────────────────────────────────────────────── */
.libre{display:grid;gap:1.2rem;justify-items:center;margin-top:clamp(1.8rem,3.4vw,2.6rem)}
/* Las dos modalidades del monto libre: dejando los datos o anonimo. */
.libre__vias{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.libre__vias .btn{cursor:pointer;font-family:inherit}
.libre__campo{
  display:flex;align-items:baseline;gap:.4rem;
  border-bottom:1px solid var(--filete-fuerte);padding-bottom:.3rem;
}
.libre__cur{font-size:clamp(1.6rem,3vw,2.2rem);color:var(--tinta-2)}
.libre__cur--fin{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.libre__campo input{
  width:5.5ch;border:0;background:transparent;color:var(--tinta);
  font-family:inherit;font-size:clamp(2.4rem,5vw,3.4rem);line-height:1;
  text-align:center;font-variant-numeric:tabular-nums lining-nums;
}
.libre__campo input:focus{outline:0}
.libre__campo:focus-within{border-color:var(--tinta)}
.libre__campo input::-webkit-outer-spin-button,
.libre__campo input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.libre__campo input[type=number]{-moz-appearance:textfield}

/* ── Cierre ───────────────────────────────────────────────────────── */
.cierre__cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:clamp(2rem,3.6vw,2.8rem)}

/* La casilla y la letra chica viven en secciones de cualquier superficie, asi
   que se pintan con los tokens de la seccion, nunca con un color fijo: en la
   seccion verde un borde verde no se ve. */
.check{display:flex;gap:.65rem;align-items:flex-start;cursor:pointer;font-size:.86rem;line-height:1.5;margin:0;color:var(--tinta)}
.check input{
  appearance:none;flex:none;width:16px;height:16px;margin-top:.32em;
  border:1px solid var(--filete-fuerte);background:transparent;cursor:pointer;transition:background .3s,border-color .3s;
}
.check input:checked{background:var(--tinta);border-color:var(--tinta)}
.check input:checked::after{content:'';display:block;width:5px;height:9px;margin:1px auto 0;border:solid var(--bg);border-width:0 1.5px 1.5px 0;transform:rotate(42deg)}
.fine{font-size:.76rem;line-height:1.5;margin:0;color:var(--tinta);opacity:.82}
.fine a{color:inherit}

/* Bloque de papel: el formulario vive sobre una superficie crema apoyada en el
   panel de ondas. Sobre el patrón directamente, el borde de los campos caía a
   1,9 de contraste y no se veía dónde escribir. */
.paper{
  background:var(--crema);color:var(--verde);
  --tinta:var(--verde);--tinta-2:var(--verde);
  --filete:rgba(170,133,85,.55);--filete-fuerte:var(--oro);
  --btn-bg:var(--verde);--btn-tinta:var(--crema);
  padding:clamp(1.8rem,3.4vw,2.8rem);
  box-shadow:inset 0 0 0 1px rgba(170,133,85,.5);
  max-width:560px;margin-inline:auto;
}
.paper .form{max-width:none}

/* ══ FORMULARIO ════════════════════════════════════════════════════════ */
.form{display:grid;gap:1rem;max-width:520px;text-align:left}
.form[hidden]{display:none}
.form--center{margin-inline:auto}
.field{position:relative}
.field input,.field select{
  width:100%;padding:1.55rem 1.05rem .7rem;border-radius:0;
  background:transparent;border:1px solid var(--filete);
  color:var(--tinta);font:inherit;font-size:1.02rem;
  transition:border-color .4s,box-shadow .4s;
}
.field select{padding:1.15rem 1.05rem;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AA8555'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:20px}
.s-crema .field select option,.s-salvia .field select option{background:var(--crema);color:var(--verde)}
.s-verde .field select option{background:var(--verde);color:var(--crema)}
.field input:focus,.field select:focus{outline:0;border-color:var(--filete-fuerte);box-shadow:0 0 0 2px rgba(170,133,85,.25)}
.field label{
  position:absolute;left:1.05rem;top:1.12rem;pointer-events:none;transform-origin:left top;
  font-size:1rem;color:var(--tinta-2);
  transition:transform .35s var(--out),color .35s;
}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-.78rem) scale(.7)}
.form__msg{margin:0;min-height:1.4em;font-size:.94rem;color:var(--tinta)}
.form__msg.err{color:var(--tinta);font-style:italic}
.done{
  max-width:520px;padding:clamp(1.8rem,3.4vw,2.6rem);text-align:center;
  box-shadow:inset 0 0 0 1px var(--filete-fuerte);display:grid;gap:.7rem;justify-items:center;
}
.done[hidden]{display:none}
.done__mark{width:48px;margin:0 auto .4rem}
.done__t{font-family:'Herculanum','EB Garamond',serif;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.2rem,2.4vw,1.55rem);margin:0}
.done__s{margin:0;color:var(--tinta-2);font-size:.98rem;max-width:36ch}

/* Chrome pisa el fondo del autocompletado con blanco: el box-shadow interior es
   la única forma de recuperarlo. Un valor por superficie. */
.s-verde .field input:-webkit-autofill{-webkit-text-fill-color:var(--crema);-webkit-box-shadow:0 0 0 1000px var(--verde) inset;caret-color:var(--crema)}
.s-crema .field input:-webkit-autofill,.s-salvia .field input:-webkit-autofill{-webkit-text-fill-color:var(--verde);-webkit-box-shadow:0 0 0 1000px var(--crema) inset;caret-color:var(--verde)}
.field input:-webkit-autofill{transition:background-color 9999s ease-in-out 0s}

/* ══ FOOTER ════════════════════════════════════════════════════════════ */
.foot{background:var(--verde);color:var(--crema);padding:clamp(3.5rem,7vw,6rem) 0 2rem;border-top:1px solid rgba(170,133,85,.42)}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(2rem,4vw,3rem)}
@media (max-width:760px){.foot__grid{grid-template-columns:1fr}}
.foot__logo{width:180px;margin-bottom:1.3rem}
.foot__col{display:grid;gap:.6rem;align-content:start}
.foot__col a{font-size:.94rem;color:var(--salvia);text-decoration:none;width:fit-content;transition:color .4s}
.foot__col a:hover{color:var(--crema)}
.foot__base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;
  margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.4rem;border-top:1px solid rgba(170,133,85,.3);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.17em;color:var(--salvia);
}

/* ══ VISOR DE GALERÍA ══════════════════════════════════════════════════ */
.viewer{position:fixed;inset:0;z-index:60;background:var(--verde);opacity:0;transition:opacity .6s var(--ease)}
.viewer[hidden]{display:none}
.viewer.is-open{opacity:1}
.viewer__stage{position:absolute;inset:0;overflow:hidden}
.viewer__stage img{
  /* contain, no cover: este visor existe para MIRAR la foto. Con cover, una
     foto vertical dentro de una ventana apaisada se estiraba hasta 1,62x —por
     encima de su resolucion, o sea pixeles inventados— y dejaba ver el 40%.
     Las bandas al costado son el verde de la marca, no un hueco. */
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(1.03);transition:opacity 1.2s var(--ease),transform 6.5s linear;
}
/* El movimiento va hacia AFUERA y termina en la foto entera: con cover el
   zoom crecia y agrandaba el estiramiento justo cuando mas se la mira. */
.viewer__stage img.is-on{opacity:1;transform:scale(1)}
.viewer__bar{position:absolute;left:50%;bottom:clamp(1.4rem,3vw,2.2rem);translate:-50% 0;z-index:2;display:flex;gap:.4rem}
.viewer__bar i{display:block;width:26px;height:2px;background:rgba(239,237,220,.3);cursor:pointer;position:relative;overflow:hidden}
.viewer__bar i.is-on::after{content:'';position:absolute;inset:0;background:var(--oro);transform-origin:left;animation:barfill 5s linear forwards}
@keyframes barfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.viewer__close,.viewer__nav{
  position:absolute;z-index:3;background:rgba(33,67,52,.55);border:1px solid rgba(239,237,220,.4);
  color:var(--crema);cursor:pointer;display:grid;place-content:center;
  transition:background .4s,color .4s,transform .4s var(--ease);
}
.viewer__close{top:clamp(1rem,2.4vw,1.8rem);right:clamp(1rem,2.4vw,1.8rem);width:46px;height:46px;font-size:1rem}
.viewer__nav{top:50%;translate:0 -50%;width:50px;height:50px;font-size:1.8rem;line-height:0;padding-bottom:.16em}
.viewer__nav--prev{left:clamp(.7rem,2.4vw,2rem)}
.viewer__nav--next{right:clamp(.7rem,2.4vw,2rem)}
.viewer__close:hover,.viewer__nav:hover{background:var(--crema);color:var(--verde);border-color:var(--crema)}
.viewer__nav:hover{translate:0 -50%}
body.is-locked{overflow:hidden}

/* ══ MOVIMIENTO ════════════════════════════════════════════════════════
   Todo entra con la misma gramática: la tipografía sube desde una máscara y
   las fotografías se descubren con una cortina. Nada rebota ni gira. */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.1s var(--out)}
.rv.in{opacity:1;transform:none}
.rv[style*="--d"]{transition-delay:calc(var(--d,0) * 90ms)}

.rvimg{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--out)}
.rvimg.in{clip-path:inset(0 0 0 0)}
.rvimg > img,.rvimg img{transform:scale(1.14);transition:transform 1.6s var(--out)}
.rvimg.in img{transform:scale(1)}

.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.split .w > .t{
  display:inline-block;font-style:inherit;transform:translateY(110%);
  transition:transform .9s var(--out);transition-delay:calc(var(--i,0) * 52ms);
}
.split.in .w > .t{transform:none}

@media (prefers-reduced-motion:reduce){
  .rv,.rvimg,.split .w > .t{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .grain,.marq__row,.strip__row,.wavebg i,.hero__media img{animation:none!important}
}
.no-js .rv,.no-js .rvimg,.no-js .split .w > .t{opacity:1;transform:none;clip-path:none}

/* ══ BARRA FIJA DE APORTE (mobile) ═════════════════════════════════════ */
.stickycta{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(1rem,4vw,1.4rem);
  background:var(--verde);color:var(--crema);
  box-shadow:0 -1px 0 rgba(170,133,85,.55);
  transform:translateY(105%);transition:transform .5s var(--out);
}
.stickycta span{font-size:.78rem;letter-spacing:.06em}
.stickycta .btn{--btn-bg:var(--crema);--btn-tinta:var(--verde);flex:none}
.stickycta.is-on{transform:none}
@media (max-width:760px){
  .stickycta{display:flex}
  body{padding-bottom:0}
}

/* ══ PRELOADER ═════════════════════════════════════════════════════════ */
.pre{
  position:fixed;inset:0;z-index:100;background:var(--verde);
  display:grid;place-content:center;justify-items:center;gap:1.9rem;
  transition:opacity .9s var(--ease),visibility .9s;
}
.pre.is-done{opacity:0;visibility:hidden}
.pre img{width:74px;opacity:0;animation:markIn 1.4s var(--out) forwards}
@keyframes markIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.pre__line{width:118px;height:1px;background:rgba(239,237,220,.16);overflow:hidden}
.pre__line i{display:block;height:100%;width:0;background:var(--oro);animation:load 1.4s var(--ease) forwards}
@keyframes load{to{width:100%}}

/* ══ PÁGINA DE GRACIAS ═════════════════════════════════════════════════ */
.thanks{display:grid;grid-template-columns:1.02fr .98fr;margin-top:var(--navh);min-height:calc(100svh - var(--navh))}
@media (max-width:900px){.thanks{grid-template-columns:1fr}.thanks__media{min-height:44svh;order:-1}}
.thanks__panel{display:flex;flex-direction:column;justify-content:center;padding:clamp(3rem,6vw,5rem) clamp(1.4rem,4.4vw,4.6rem)}
.thanks__media{position:relative;overflow:hidden;min-height:50svh}
.thanks__media img{width:100%;height:100%;object-fit:cover}
.thanks__mark{width:58px;margin:0 0 1.6rem}
.box{margin:2rem 0 0;padding:clamp(1.4rem,3vw,2rem);box-shadow:inset 0 0 0 1px var(--filete-fuerte);display:grid;gap:.5rem}
.box[hidden]{display:none}
.box__date{font-size:clamp(1.8rem,4vw,2.4rem);line-height:1;margin:0;font-variant-numeric:tabular-nums lining-nums;letter-spacing:.03em}
.box__place{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta-2)}

/* ══ VIDEO PRINCIPAL ═══════════════════════════════════════════════════
   Una pieza enmarcada en filete dorado, centrada sobre el verde. El botón
   habla el mismo idioma que el de la tira de fotos: placa crema, triángulo y
   versalita. Sobre el póster hay un velo de verde con alfa (no un color
   nuevo) para que la placa tenga contra qué recortarse.

   El archivo es 16:9 (1920x1080) y la caja se declara con esa misma
   proporción, así `contain` nunca tiene nada que recortar: el intento previo
   de `cover` con `max-height` le cortaba la cabeza a quien habla (11% en
   1440x900, 32% en 2560x1218). */
.vid{
  /* El video es una PIEZA enmarcada, no un fondo (Nico, 06/09: "esta full
     screen, tendria que ser un widget"). A sangre, 16:9 daba 1440x810 en una
     laptop de 1440x900 y 1440 de alto en un monitor de 2560: la primera
     pantalla era el video y nada mas, ni el titulo ni el boton entraban.
     Ahora mide lo mismo que la columna de texto que va debajo —820px, el
     `wrap--tight` del titular— y los tres entran juntos en el primer golpe
     de vista. El ancho lo decide el ANCHO de la ventana y NUNCA el alto: el
     tope viejo en svh (calc(80svh * 16/9)) hacia que la pieza cruzara o no
     el bloque de texto segun la maquina, y nunca quedaba alineada.
     Filete dorado alrededor: el manual usa el oro como marco, no como texto.
     Nada de `outline` con offset para el segundo filete — el figure lleva
     `.rvimg`, que revela con `clip-path`, y el clip se come todo lo que
     sobresalga de la caja. */
  position:relative;overflow:hidden;
  width:min(100% - 2 * var(--pad), 820px);
  margin:clamp(1.6rem,3.6vw,3rem) auto clamp(.4rem,1vw,1rem);
  border:1px solid var(--filete-fuerte);
  background:var(--verde);
}
.vid__el{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:contain;
  background:var(--verde);
}
.vid::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(33,67,52,.42),rgba(33,67,52,.06));
  transition:opacity .6s var(--ease);
}
.vid.is-playing::after{opacity:0}
/* En reposo, el play va en CÍRCULO: una placa de texto en el medio del
   póster se lee como un cartel pegado encima y tapa la imagen. El círculo
   es además la única curva del manual —el isotipo y los retratos de las
   págs. 11 y 12— y acá está justificada: es el control de reproducción
   universal. La etiqueta de texto se reserva para el estado `is-auto`, que
   sí necesita decir algo ("escuchalo con sonido"). */
.vid__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;gap:.9rem;
  width:clamp(3.4rem,6.5vw,4.6rem);height:clamp(3.4rem,6.5vw,4.6rem);padding:0;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--crema);color:var(--verde);
  box-shadow:0 0 0 1px var(--oro), 0 0 0 .5rem color-mix(in srgb,var(--verde) 22%,transparent);
  font-family:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.19em;font-weight:600;
  transition:background .45s,color .45s,transform .5s var(--out),opacity .45s;
}
/* Idem: `translate` ya centra, aca va solo la escala. */
.vid__play:hover,.vid__play:focus-visible{background:var(--oro);color:var(--verde);transform:scale(1.07)}
/* El triángulo se corre un pelo: centrado geométricamente, un play siempre
   parece desplazado a la izquierda. */
.vid__play svg{width:38%;fill:currentColor;flex:none;margin-left:8%}
.vid__play span{white-space:nowrap}
/* En reposo el círculo no lleva texto; la etiqueta vuelve con `is-auto`. */
.vid:not(.is-auto) .vid__lbl{display:none}
.vid.is-playing:not(.is-auto) .vid__play{opacity:0;pointer-events:none}

/* Arranque solo: la placa se corre a una esquina y ofrece el sonido, para no
   taparle la cara a una pieza que ya está corriendo. */
.vid__ico,.vid__lbl{display:none}
.vid__ico--play,.vid__lbl--play{display:inline}
.vid__ico--play{display:block}
.vid.is-auto .vid__ico--play,.vid.is-auto .vid__lbl--play{display:none}
.vid.is-auto .vid__ico--snd{display:block}
.vid.is-auto .vid__lbl--snd{display:inline}
/* Arriba a la derecha, no abajo: los subtitulos del video estan QUEMADOS en
   la parte de abajo del cuadro y la placa se los comia. Fue el motivo por el
   que se habia apagado el arranque automatico. */
.vid.is-auto .vid__play{
  left:auto;bottom:auto;translate:none;
  right:clamp(1rem,2.6vw,2.2rem);top:clamp(1rem,2.6vw,2.2rem);
  width:auto;height:auto;border-radius:0;box-shadow:none;
  padding:.85rem 1.4rem;font-size:.66rem;
}
.vid.is-auto .vid__play svg{width:15px;margin-left:0}
.vid.is-auto .vid__play:hover,.vid.is-auto .vid__play:focus-visible{transform:scale(1.03)}
/* El velo tambien va arriba, por lo mismo: abajo tapaba los subtitulos. */
.vid.is-auto::after{background:linear-gradient(to bottom,rgba(33,67,52,.5),rgba(33,67,52,0) 42%)}
@media (max-width:560px){
  /* Solo el boton CON etiqueta lleva padding. Aplicado tambien al circular
     el padding le comia el content-box: el svg mide 38% de esa caja y
     quedaba en 6px dentro de un circulo de 54. Se veia un circulo vacio.
     Con la pieza en 348px (06/09) la placa medía 185px — el 53% del cuadro,
     una etiqueta más grande que el video. Se aprieta hasta ~130px. */
  .vid.is-auto .vid__play{padding:.55rem .85rem;gap:.45rem;font-size:.54rem;letter-spacing:.12em}
  .vid.is-auto .vid__play svg{width:12px}
  .vid.is-auto .vid__play{right:.7rem;top:.7rem}
}
/* En 320px la pieza mide 280 y la placa se comia el 56% del cuadro. La
   etiqueta no se esconde —sin ella el boton se queda sin nombre accesible,
   porque los dos svg van aria-hidden y no hay aria-label— asi que se aprieta
   hasta que entra en un tercio del ancho. */
@media (max-width:400px){
  .vid.is-auto .vid__play{padding:.4rem .6rem;gap:.32rem;font-size:.46rem;letter-spacing:.08em}
  .vid.is-auto .vid__play svg{width:10px}
  .vid.is-auto .vid__play{right:.5rem;top:.5rem}
}


/* Los datos del monto libre. La factura de GHL los exige: sin contacto no hay
   factura y sin factura no hay forma de cobrar un importe elegido. Van en dos
   columnas en escritorio y apilados en telefono, con el mismo alto de campo
   que el formulario de la lista de espera. */
.libre__datos{display:grid;gap:.9rem;grid-template-columns:1fr 1fr;
              margin:1.1rem 0 .2rem;text-align:left}
@media (max-width:640px){.libre__datos{grid-template-columns:1fr}}


/* ── El aporte, mientras se arma ──────────────────────────────────────
   Armar la factura tarda unos tres segundos (tres llamadas a GHL, una
   detrás de otra). Ese silencio se lee como "no anduvo": la persona
   vuelve a apretar y cada apretón de más es una factura de más en el CRM,
   que después no se puede borrar.

   La señal es un filete que recorre el borde inferior del botón,
   no un disco que gira: el sistema de esta marca no tiene curvas salvo el
   círculo, y ya usa el filete como elemento propio. Los campos se atenúan
   para que quede claro que el momento de escribir pasó.

   Va en `currentColor` y no en dorado: el botón principal de VIVA ES dorado,
   y ahí un filete dorado no se ve. El color del texto de un botón ya
   contrasta con el fondo de ese botón — es la única garantía que no depende
   de cuál sea el botón. */
.is-esperando .libre__datos,
.is-esperando .libre__campo,
.is-esperando .libre__monto{opacity:.5;transition:opacity .3s ease}
.is-esperando [data-libre]{position:relative;overflow:hidden;cursor:progress;opacity:.85}
.is-esperando [data-libre]::after{content:"";position:absolute;left:0;bottom:0;
  height:2px;width:40%;background:currentColor;
  animation:omaya-esperando 1.15s cubic-bezier(.5,0,.5,1) infinite}
@keyframes omaya-esperando{
  0%{transform:translateX(-110%)}
  100%{transform:translateX(360%)}
}
/* Quien pidió menos movimiento igual tiene que saber que algo pasa: el
   filete deja de correr pero se queda puesto. */
@media (prefers-reduced-motion:reduce){
  .is-esperando [data-libre]::after{animation:none;width:100%}
}

/* ══ COMPRA DE ENTRADAS ═══════════════════════════════════════════════════
   La compra ocurre dentro de /entradas, no en otro dominio: quien decide
   comprar no debería aterrizar en una página que no se parece a la que lo
   convenció. El motor sigue siendo omaya-tickets; esto es su cara.

   El panel va en verde sobre la sección crema —es el objeto, no el fondo— y
   sostiene los cuatro pasos. La textura de ondas le da atmósfera sin poner
   texto sobre una foto, que en esta marca no se hace. */
.tix--cat{grid-template-columns:repeat(3,1fr);align-items:stretch}
@media (max-width:900px){.tix--cat{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}

/* La elegida se marca en oro y las otras se apagan: la decisión queda a la
   vista mientras se completan los pasos de abajo. */
.tix--eligiendo .ticket{transition:opacity .5s var(--ease),transform .6s var(--out),box-shadow .6s var(--ease)}
.tix--eligiendo .ticket:not(.is-elegida){opacity:.44}
.ticket.is-elegida{box-shadow:inset 0 0 0 2px var(--oro)}
/* Dos de los tres tipos no tienen beneficios propios —el cliente no los
   definió— así que sin esto sus tarjetas quedaban con el botón a media
   altura y un hueco debajo. El pie se ancla abajo en las tres. */
.tix--cat .ticket__cupo{margin-top:auto}
.ticket__cupo{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--salvia)}
.ticket__amt small{font-size:.26em;letter-spacing:.2em;text-transform:uppercase;color:var(--salvia);margin-left:.5em;vertical-align:.9em}
.ticket[aria-disabled="true"]{opacity:.5}
.ticket[aria-disabled="true"] .btn{pointer-events:none;opacity:.6}

/* El ancho del panel es el de una carta, no el de la página: los campos de
   un formulario a 1320px son incomodísimos de recorrer con la vista.
   `scroll-margin-top` es por la barra fija: sin eso, al abrirse el panel la
   nav le comía el encabezado. */
.buy{position:relative;overflow:hidden;margin:clamp(2.4rem,4.5vw,3.6rem) auto 0;text-align:left;
  max-width:820px;scroll-margin-top:calc(var(--navh) + 1.2rem)}
.buy[hidden]{display:none}
.buy__in{position:relative;z-index:1;padding:clamp(1.8rem,3.6vw,3.2rem)}
.buy__head{display:flex;align-items:center;gap:1rem;margin-bottom:clamp(1.6rem,2.6vw,2.2rem)}
.buy__mark{width:34px;height:auto;flex:none}
.buy__when{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;color:var(--tinta-2)}

/* Los cuatro pasos: número en Herculanum y un filete que se llena. No es una
   barra de progreso con porcentaje —es el mismo filete oro del sistema. */
.buy__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 clamp(1.8rem,3vw,2.4rem);padding:0;list-style:none}
.buy__step{display:grid;gap:.5rem;font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-2)}
.buy__step::before{content:'';height:1px;background:var(--filete);transform-origin:left;transition:background .5s var(--ease)}
.buy__step.is-done::before,.buy__step.is-now::before{background:var(--filete-fuerte)}
.buy__step.is-now{color:var(--tinta)}
.buy__step b{font-family:'Herculanum','EB Garamond',serif;font-weight:400;letter-spacing:.04em;margin-right:.5em}
@media (max-width:560px){.buy__step span{display:none}.buy__steps{gap:.4rem}}

.buy__pane{display:grid;gap:1.15rem;max-width:560px}
.buy__pane[hidden]{display:none}
.buy__t{font-family:'Herculanum','EB Garamond',serif;font-weight:400;text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.2;margin:0}
.buy__s{margin:0;color:var(--tinta-2);font-size:.98rem;line-height:1.6}

/* Contador: dos botones cuadrados y el número en grande. Nada de flechitas
   de input numérico, que en el celular son imposibles de acertar. */
.buy__count{display:flex;align-items:center;gap:1.2rem}
.buy__pm{width:54px;height:54px;flex:none;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid var(--filete-fuerte);color:var(--tinta);
  font-size:1.5rem;line-height:0;padding-bottom:.1em;border-radius:0;
  transition:background .4s var(--ease),color .4s var(--ease)}
.buy__pm:hover:not(:disabled),.buy__pm:focus-visible:not(:disabled){background:var(--tinta);color:var(--bg)}
.buy__pm:disabled{opacity:.35;cursor:not-allowed}
.buy__n{font-size:clamp(2.6rem,6vw,3.4rem);line-height:1;min-width:2.2ch;text-align:center;
  font-variant-numeric:tabular-nums lining-nums;margin:0}

/* Chips de donación: rectángulos con filete; el elegido invierte. */
.buy__chips{display:flex;flex-wrap:wrap;gap:.6rem}
.buy__chip{padding:.75em 1.3em;cursor:pointer;background:transparent;border:1px solid var(--filete);
  color:var(--tinta);font:inherit;font-size:.82rem;letter-spacing:.06em;border-radius:0;
  transition:border-color .4s var(--ease),background .4s var(--ease),color .4s var(--ease)}
.buy__chip:hover,.buy__chip:focus-visible{border-color:var(--filete-fuerte)}
.buy__chip.is-on{background:var(--tinta);color:var(--bg);border-color:var(--tinta)}

/* Resumen: la línea que acompaña hasta el final. Vive dentro del panel, no
   flotando encima —un CTA flotante tapando un formulario ya nos costó caro. */
.buy__sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.6rem;
  padding-top:1.1rem;border-top:1px solid var(--filete)}
.buy__sum p{margin:0}
.buy__sumq{font-size:.9rem;color:var(--tinta-2)}
.buy__sumt{font-size:clamp(1.5rem,3vw,2rem);line-height:1;font-variant-numeric:tabular-nums lining-nums}
.buy__sumt sup{font-size:.34em;vertical-align:1.1em;letter-spacing:.2em;margin-left:.4em;color:var(--tinta-2)}

.buy__err{margin:0;font-size:.92rem;line-height:1.55;color:var(--tinta);font-style:italic;min-height:1.3em}
.buy__err[hidden]{display:none}
.buy__back{background:transparent;border:0;padding:0;cursor:pointer;color:var(--tinta-2);font:inherit;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;justify-self:start;
  transition:color .4s var(--ease)}
.buy__back:hover,.buy__back:focus-visible{color:var(--tinta)}
.buy__fine{font-size:.76rem;line-height:1.55;color:var(--tinta-2);margin:0}


/* Mientras se crea la factura en GHL el botón no puede parecer muerto: el
   mismo filete que corre en la web de aportes. */
.buy.is-esperando .buy__pane{opacity:.55;transition:opacity .3s ease}
.buy.is-esperando [data-pagar]{position:relative;overflow:hidden;cursor:progress}
.buy.is-esperando [data-pagar]::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:40%;
  background:currentColor;animation:omaya-esperando 1.15s cubic-bezier(.5,0,.5,1) infinite}
@media (prefers-reduced-motion:reduce){.buy.is-esperando [data-pagar]::after{animation:none;width:100%}}

/* El teléfono va partido en país + número, como en el checkout viejo: el
   código de país escrito a mano es la causa número uno de un WhatsApp que
   nunca llega. */
.buy__tel{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:.7rem}
@media (max-width:520px){.buy__tel{grid-template-columns:1fr}}