@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   EMEC FESTIVAL — VIII edición · 07.11.2026
   Sistema visual: registro claro, fiel al cartel EMEC08.
   Sistema de movimiento: heredado de MAPPA (ver data/ANIMACIONES.md).

   Traducción de la "firma" de profundidad: MAPPA irradia halos dorados sobre
   negro. En un registro claro de cartel eso no existe: la profundidad se
   construye con BLOQUES PLANOS y SOMBRAS DURAS con desplazamiento (lógica de
   serigrafía). Misma coreografía, otro material.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─────────────── 1. FUENTES ─────────────── */
@font-face{font-family:'Kanit';src:url('../fonts/kanit-800-latin.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Kanit';src:url('../fonts/kanit-600-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-400800-latin.woff2') format('woff2');
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ─────────────── 2. TOKENS ─────────────── */
:root{
  /* ── Marca — extraídos de los SVG del cartel EMEC08 ── */
  --cyan:#00bbdc;
  --cream:#fbefd9;
  --orange:#ea6d04;
  --ink:#232021;
  --yellow:#fff689;

  /* ── Superficie oscura: el cian oscurecido, no un segundo hue ──
     El marino del cartel (#0c0575) queda a 52° del cian: al ocupar
     secciones enteras competía con él y apagaba el naranja. El petróleo
     conserva el hue del cian (216.5°) bajando lightness y croma, así la
     página es UNA escala de valor y el naranja —a 167°— es el único
     acontecimiento cromático. */
  --petrol:#00343f;         /* superficie oscura (pre-registro, lugar) */
  --petrol-deep:#012932;    /* hundido: inputs, paneles, mar, badge de fecha */
  --petrol-shadow:#001a20;  /* sombra dura sobre oscuro */

  /* Superficies derivadas */
  --cyan-deep:#00a5c4;
  --cream-warm:#f6e6cb;

  /* ── Rampa de texto: colores EXPLÍCITOS, no alfa ──
     Con alfa el contraste depende de lo que haya detrás y deja de ser
     verificable. Cada nivel está calculado contra su superficie.
     Ratios WCAG 2.2 anotados. */

  /* sobre CIAN — a L .73 sólo caben dos niveles que pasen AA */
  --tc-1:#232021;           /* 7.03:1 */
  --tc-2:#033945;           /* 5.46:1 — micro-texto, kickers */

  /* sobre CREMA */
  --tr-1:#232021;           /* 14.19:1 */
  --tr-2:#31484e;           /* 8.51:1 — cuerpo */
  --tr-3:#4a6871;           /* 5.26:1 — micro-texto */

  /* sobre PETRÓLEO — calculada contra el fondo MÁS CLARO posible (#1f4c56),
     que es petróleo con el píxel blanco de la foto de fondo al 12%. Contra
     petróleo sólido los ratios son aún mejores (los de la derecha), así que
     estos números son el suelo garantizado en toda la sección. */
  --tp-1:#fbefd9;           /*  8.29:1 → 11.80 sobre sólido */
  --tp-2:#dcf0f5;           /*  8.01:1 → 11.40 — cuerpo, lede */
  --tp-3:#abc5cc;           /*  5.21:1 →  7.42 — labels, placeholder, notas */

  /* sobre TINTA */
  --ti-1:#fbefd9;           /* 14.19:1 */
  --ti-2:#aec0c4;           /* 8.57:1 — enlaces */
  --ti-3:#80969c;           /* 5.20:1 — legal */

  /* ── Naranja: relleno vs texto ──
     El naranja de marca sobre crema da 2.76:1, así que no vale ni para
     texto grande. Se reserva a rellenos y su hermano oscurecido (mismo
     hue) cubre cifras y texto sobre superficies claras. */
  --rust:#9d4701;           /* 5.53:1 sobre crema — margen sobre el 4.5 exigido */


  /* Líneas — los bordes de CONTROL llegan a 3:1 (WCAG 2.2 · 1.4.11);
     los filetes puramente decorativos pueden quedarse por debajo. */
  --hair-ink:rgba(35,32,33,.18);        /* filete decorativo sobre claro */
  --rule-ink:rgba(35,32,33,.42);        /* separador estructural sobre claro */
  --ctrl-ink:var(--ink);                /* control sobre claro — 7.03:1 */
  --hair-cream:rgba(251,239,217,.16);   /* filete decorativo sobre oscuro */
  --ctrl-dark:#7b99a1;                  /* control sobre oscuro — 3.11:1 con foto */
  --ctrl-dark-strong:#abc5cc;           /* control enfatizado — 5.21:1 con foto */

  /* Semánticos (solo formularios) */
  --bad-on-dark:#ff9a86;    /* 6.54:1 sobre petróleo */
  --bad-on-light:#a82d13;   /* 6.05:1 sobre crema */

  /* Radios */
  --r-pill:999px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
  --r-xs:8px;

  /* Sombras duras — LA firma de profundidad de este registro */
  --sh-ink:0 4px 0 var(--ink);
  --sh-ink-lift:0 8px 0 var(--ink);
  --sh-soft:0 22px 44px -26px rgba(0,26,32,.55);

  /* Curvas (idénticas a MAPPA — el movimiento es agnóstico de marca) */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --ease-grow:cubic-bezier(.2,.8,.2,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);

  /* Duraciones */
  --d-micro:.2s;
  --d-hover:.3s;
  --d-exit:.4s;
  --d-modal:.55s;
  --d-reveal:.85s;
  --d-enter:1.15s;
  --d-unzoom:2.2s;

  /* Tipografía */
  --font-display:'Kanit',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;

  /* Layout */
  --w-max:1100px;
  --w-narrow:760px;
  --w-form:660px;
  --pad-x:clamp(1.15rem,5vw,2.5rem);
  --sec-y:clamp(3.6rem,9vw,6.5rem);
  /* Alto de la franja de arena que separa el cuerpo del footer. Es un token
     porque lo usan dos reglas que tienen que coincidir al píxel: la propia
     franja y el hueco que le reserva la sección de encima. */
  --arena-h:clamp(70px,12vw,150px);
  /* Alto de la franja de olas del hero. Token, y no un valor suelto, porque de él
     salen otras dos cosas que tienen que cuadrar con él: el ancho del tile del
     mar y la distancia que recorre la animación. */
  --olas-h:clamp(67px,10.8vw,125px);
  /* Proporción del viewBox de mar.svg (1235.78 / 375.43). De ella sale el ancho
     de un tile a cualquier altura, y ese ancho es EXACTAMENTE lo que la animación
     tiene que recorrer para que el bucle no dé un salto. Va aquí y no repetida en
     cada sitio que dibuja el mar. */
  --olas-prop:3.2916;
  --olas-w:calc(var(--olas-h) * var(--olas-prop));
}

/* ── Tokens por superficie ──────────────────────────────────────────────
   Cada sección declara qué superficie es y hereda su rampa. Los componentes
   sólo usan --t-1/2/3, --line y --ctrl: así el mismo botón, input o kicker
   es legible en cualquier sección sin reglas por contexto, y el contraste
   se verifica una vez por superficie en lugar de una vez por combinación. */
:root,
.hero,.pasos{                      /* superficie CIAN */
  --t-1:var(--tc-1); --t-2:var(--tc-2); --t-3:var(--tc-2);
  --line:var(--hair-ink); --line-strong:var(--rule-ink);
  --ctrl:var(--ctrl-ink); --accent-text:var(--tc-1);
}
.pilares,.faq,.menu__panel{        /* superficie CREMA */
  --t-1:var(--tr-1); --t-2:var(--tr-2); --t-3:var(--tr-3);
  --line:var(--hair-ink); --line-strong:var(--rule-ink);
  --ctrl:var(--ctrl-ink); --accent-text:var(--rust);
}
.prereg,.lugar,.menu__hero{        /* superficie PETRÓLEO */
  --t-1:var(--tp-1); --t-2:var(--tp-2); --t-3:var(--tp-3);
  --line:var(--hair-cream); --line-strong:var(--ctrl-dark);
  --ctrl:var(--ctrl-dark); --accent-text:var(--yellow);
}
.marquee,.footer{                  /* superficie TINTA */
  --t-1:var(--ti-1); --t-2:var(--ti-2); --t-3:var(--ti-3);
  --line:var(--hair-cream); --line-strong:var(--ctrl-dark);
  --ctrl:var(--ctrl-dark); --accent-text:var(--orange);
}

/* ─────────────── 3. RESET Y BASE ─────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
html:not(.no-smooth){scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cyan);
  color:var(--t-1);
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html.is-loading body{overflow:hidden}
body.menu-open{overflow:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
/* [hidden] debe ganar a cualquier display de autor (.form es flex, .done es block) */
[hidden]{display:none !important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--yellow);color:var(--ink)}

:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:4px}
.prereg :focus-visible,.lugar :focus-visible,.footer :focus-visible{outline-color:var(--yellow)}

.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.skiplink{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--ink);color:var(--cream);
  padding:.7rem 1.1rem;border-radius:var(--r-pill);font-size:.72rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;transition:top var(--d-hover) var(--ease-out)}
.skiplink:focus{top:1rem}

/* Scrollbar de marca */
*{scrollbar-color:var(--petrol) rgba(35,32,33,.1)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:rgba(35,32,33,.08)}
::-webkit-scrollbar-thumb{background:var(--petrol);border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--orange);background-clip:content-box}

/* ─────────────── 4. TIPOGRAFÍA DEL SISTEMA ─────────────── */
/* Regla de oro: cuanto más pequeño el texto, más tracking.
   Cuando el tracking pasa de .3em se compensa con text-indent. */

.kicker{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;
  font-size:.6rem;font-weight:800;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;line-height:2;color:var(--t-3);
}
.kicker--on-dark{color:var(--t-3)}
/* El interpunto es la puntuación de marca */
.kicker span+span::before{content:'·';margin-right:.75rem;color:inherit;opacity:.55}

.h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,5.6vw,3.3rem);line-height:.96;
  letter-spacing:-.005em;text-transform:uppercase;
  color:var(--t-1);margin:.7rem 0 1.2rem;
  text-wrap:balance;
}
.h2--cream{color:var(--t-1)}

.lede{
  font-size:clamp(.95rem,1.6vw,1.06rem);line-height:1.72;
  max-width:54ch;color:var(--t-2);font-weight:500;
}
.lede--ink{color:var(--t-2)}
.lede strong{color:var(--t-1);font-weight:800}
.lede--ink strong{color:var(--t-1)}

.microline{
  margin-top:2rem;font-size:.62rem;font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;line-height:2;color:var(--t-3);
}
.microline--cream{color:var(--t-3)}

.wrap{width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad-x)}
.wrap--narrow{max-width:var(--w-narrow)}

/* ─────────────── 5. BOTONES ─────────────── */
.btn{
  --btn-shadow:var(--sh-ink);
  --btn-shadow-lift:var(--sh-ink-lift);
  --btn-shadow-press:0 2px 0 var(--ink);
  --btn-keyline:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:800;
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.95rem 1.7rem;border-radius:var(--r-pill);
  border:2px solid var(--btn-keyline);
  transition:transform var(--d-hover) var(--ease-out),
             box-shadow var(--d-hover) var(--ease-out),
             background-color var(--d-hover),color var(--d-hover);
  will-change:transform;
}
.btn--big{font-size:.86rem;padding:1.15rem 2.2rem}

/* Texto en tinta, no en crema: crema sobre naranja da 2.76:1 y no pasa AA */
.btn--solid{background:var(--orange);color:var(--ink);box-shadow:var(--btn-shadow)}
.btn--solid:hover{transform:translateY(-4px);box-shadow:var(--btn-shadow-lift)}
.btn--solid:active{transform:translateY(1px);box-shadow:var(--btn-shadow-press)}

.btn--ghost{background:transparent;color:var(--t-1);border-color:var(--ctrl)}
.btn--ghost:hover{background:var(--ink);color:var(--cream)}
.btn--ghost-cream{border-color:var(--cream);color:var(--cream)}
.btn--ghost-cream:hover{background:var(--cream);color:var(--ink)}

/* Sobre petróleo la sombra dura no existe: cualquier tinta más oscura que la
   superficie se queda en 1.3:1 y el desplazamiento no se lee. Aquí el borde
   del botón pasa a ser un filete crema (11.8:1) —el keyline de una segunda
   plancha— y la elevación la da una sombra difusa. */
.prereg .btn,.lugar .btn{
  --btn-keyline:var(--cream);
  --btn-shadow:none;
  --btn-shadow-lift:var(--sh-soft);
  --btn-shadow-press:none;
}

/* ─────────────── 6. PRELOADER + VUELO DEL LOGO ─────────────── */
.preloader{
  position:fixed;inset:0;z-index:150;
  display:grid;place-items:center;
  background:var(--cyan);
  transition:background-color var(--d-exit) ease;
}
html:not(.is-loading) .preloader{background:transparent;pointer-events:none}
html.logo-landed .preloader{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}

.preloader__mark{position:relative;width:min(46vw,300px);aspect-ratio:368.72/183.24}
.preloader__base{width:100%;height:100%;fill:var(--cream);opacity:.16}
/* Capa de "llenado": el propio logo como máscara + revelado por clip-path */
.preloader__fill{
  position:absolute;inset:0;background:var(--cream);
  -webkit-mask:url('../img/logo.svg') center/contain no-repeat;
          mask:url('../img/logo.svg') center/contain no-repeat;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.35s cubic-bezier(.4,0,.2,1) .15s;
}
html.is-filling .preloader__fill{clip-path:inset(0)}
html.is-filling .preloader__mark{animation:pre-glow 1.8s ease-in-out 1.5s infinite}
html.flying .preloader__mark{animation:none}
@keyframes pre-glow{50%{filter:drop-shadow(0 0 26px rgba(251,239,217,.55))}}

/* ─────────────── 7. NAV ─────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;gap:1.4rem;
  padding:.85rem var(--pad-x);
  background:rgba(0,187,220,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
          backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(251,239,217,.22);
  transform:translateY(-110%);
  transition:transform .85s var(--ease-inout);
}
body.is-ready .nav{transform:translateY(0)}
.nav__logo{flex:0 0 auto;width:82px}
.nav__logo svg{width:100%;height:auto;fill:var(--cream);
  filter:drop-shadow(0 2px 0 rgba(35,32,33,.22));
  transition:opacity .2s;opacity:0}
html.logo-landed .nav__logo svg{opacity:1}

.nav__links{display:flex;gap:1.6rem;margin-left:auto}
.nav__links a{
  font-family:var(--font-display);font-weight:600;font-size:.72rem;
  letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;
  color:var(--ink);position:relative;padding:.3rem 0;
}
.nav__links a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--ink);
  transition:right var(--d-hover) var(--ease-out);
}
.nav__links a:hover::after{right:0}
/* Selector de idioma del nav: códigos de dos letras para no robar sitio al
   CTA. El activo no es enlace. En móvil desaparece: ahí vive en el menú. */
.nav__lang{display:flex;align-items:center;gap:.1rem;flex:0 0 auto}
.nav__lang a,.nav__lang-on{
  padding:.34rem .42rem;border-radius:var(--r-xs);
  font-family:var(--font-display);font-weight:800;font-size:.66rem;
  letter-spacing:.08em;transition:background-color var(--d-hover),color var(--d-hover)}
/* Tinta, igual que el resto de enlaces del nav, y NO --t-2.
   El fondo del nav es cian al 72%, así que compone con lo que hay detrás: en la
   home es cian y sale bien, pero en las interiores el body es petróleo y la
   barra queda un teal bastante más oscuro. Sobre él, --t-2 (#033945, que también
   es un teal oscuro) daba 3.54:1 en un texto de 11px, por debajo del 4.5:1 que
   exige WCAG 2.2. Con tinta pasa en las dos superficies, y además unifica el
   color de todos los enlaces de la barra, que no había razón para que fueran
   distintos. */
.nav__lang a{color:var(--ink)}
.nav__lang a:hover{background:rgba(35,32,33,.1);color:var(--t-1)}
.nav__lang-on{background:var(--ink);color:var(--cream)}

.nav__cta{padding:.62rem 1.2rem;font-size:.68rem}

.burger{display:none;flex:0 0 auto;width:42px;height:42px;border:2px solid var(--ink);
  border-radius:var(--r-pill);position:relative;background:var(--cream)}
.burger span{position:absolute;left:50%;width:16px;height:2px;background:var(--ink);
  border-radius:2px;transform:translateX(-50%);transition:transform var(--d-hover) var(--ease-out),opacity .2s}
.burger span:nth-child(1){top:14px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateX(-50%) translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateX(-50%) translateY(-6px) rotate(-45deg)}

/* ─────────────── 8. MENÚ LATERAL ─────────────── */
.menu{position:fixed;inset:0;z-index:120}
.menu__backdrop{position:absolute;inset:0;background:rgba(35,32,33,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;transition:opacity var(--d-exit) ease}
.menu.is-open .menu__backdrop{opacity:1;transition-delay:.05s}
.menu__panel{
  position:absolute;top:0;right:0;bottom:0;width:min(370px,86vw);
  display:flex;flex-direction:column;gap:1.4rem;
  padding:1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom,0px));
  background:var(--cream);border-left:2px solid var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);
  transition:transform .5s var(--ease-out);
}
.menu.is-open .menu__panel{transform:translateX(0)}
.menu__close{width:40px;height:40px;border:2px solid var(--ink);border-radius:var(--r-pill);
  position:relative;align-self:flex-end;flex:0 0 auto;
  transition:transform var(--d-hover) var(--ease-out),background-color var(--d-hover)}
.menu__close:hover{transform:rotate(90deg);background:var(--ink)}
.menu__close span{position:absolute;top:50%;left:50%;width:15px;height:2px;background:var(--ink);
  border-radius:2px;transition:background-color var(--d-hover)}
.menu__close:hover span{background:var(--cream)}
.menu__close span:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.menu__close span:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}

.menu__hero{position:relative;display:flex;flex-direction:column;gap:.35rem;
  padding:1.2rem;border-radius:var(--r-md);overflow:hidden;
  background:var(--petrol);color:var(--cream);border:2px solid var(--ink);
  transition:transform var(--d-hover) var(--ease-out)}
/* Misma receta que la sección del formulario: foto al 12% sobre petróleo, y por
   tanto los mismos ratios ya verificados. El encuadre se sesga a los cañones,
   que es lo único que se lee a este tamaño; el isotipo que había antes aquí
   era una mancha. */
/* Foto de fondo con velo. Dos capas en una sola declaración: el degradado va
   primero (encima) y mantiene petróleo macizo sobre los dos tercios donde vive
   el texto —medido: la tinta del titular llega al 64,4% del ancho, así que el
   velo es macizo hasta el 70%— y los ratios verificados no cambian; la foto se
   deja ver en la banda derecha, que está libre. El isotipo que había antes aquí era una
   mancha a este tamaño. */
.menu__hero::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(95deg, var(--petrol) 0 70%, rgba(0,52,63,.25) 100%),
    url('../img/prereg-fondo.webp') 32% 40%/cover no-repeat;
}
.menu__hero > *{position:relative;z-index:1}
.menu__hero:hover{transform:translateY(-3px)}
/* El isotipo es naranja: sobre marino y translúcido daría un morado ajeno a la
   paleta. Se reduce a silueta crema, que sí pertenece al sistema. */
/* Velo degradado: disuelve el canto del bloque y protege la legibilidad del copy */
.menu__hero-kicker{z-index:1;font-size:.55rem;font-weight:800;
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:var(--yellow)}
.menu__hero-title{z-index:1;font-family:var(--font-display);font-weight:800;
  font-size:1.4rem;line-height:1;text-transform:uppercase}
.menu__hero-note{z-index:1;font-size:.58rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--t-3)}

.menu__list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.menu__list a{display:block;padding:.85rem 0;border-bottom:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:.06em;
  text-transform:uppercase;
  /* MAPPA desplaza este hover con padding-left; aquí va con transform:
     mismo resultado visual sin provocar layout en cada frame. */
  transition:transform var(--d-hover) var(--ease-out),color var(--d-hover)}
.menu__list a:hover{transform:translateX(.5rem);color:var(--accent-text)}
/* Selector de idioma del menú. El activo no es enlace: no se enlaza a uno mismo. */
.menu__lang{display:flex;gap:1px;margin-top:auto;
  background:var(--line-strong);border:2px solid var(--ctrl);border-radius:var(--r-pill);overflow:hidden}
.menu__lang a,.menu__lang-on{
  flex:1 1 0;text-align:center;padding:.55rem .3rem;
  font-size:.6rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:var(--cream);color:var(--t-2);transition:background-color var(--d-hover),color var(--d-hover)}
.menu__lang a:hover{background:var(--cream-warm);color:var(--t-1)}
.menu__lang-on{background:var(--ink);color:var(--cream)}

.menu__social{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1.2rem;
  font-size:.6rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--t-3)}
.menu__social a:hover{color:var(--accent-text)}

/* ─────────────── 9. GRANO Y DESGASTE ─────────────── */
.grain{
  position:absolute;inset:-100px;z-index:4;pointer-events:none;
  opacity:.09;mix-blend-mode:multiply;
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(4) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}
  75%{transform:translate(-2%,-2%)}
}
/* Motas de desgaste extraídas del propio cartel */
.wear::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('../img/desgaste.webp') center/cover no-repeat;
  opacity:.22;
}
.wear--dark::before{opacity:.1}

/* ─────────────── 10. PATRÓN DE ENTRADA (máscara) ─────────────── */
.anim-line{display:block;overflow:hidden;clip-path:inset(0 -8px)}
.anim-line>span{display:inline-block;transform:translateY(115%);
  transition:transform var(--d-enter) var(--ease-out)}
body.is-ready .anim-line>span{transform:translateY(0)}

/* Variante SIN máscara. El patrón de máscara necesita overflow:hidden, y eso
   recorta cualquier sombra que el contenido proyecte hacia fuera: la fila de
   botones medía exacto y se comía los 4px de sombra dura, que es lo que hacía
   parecer el botón cortado. Aquí la entrada es fundido + elevación. */
.anim-rise{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease-out),transform var(--d-enter) var(--ease-out)}
body.is-ready .anim-rise{opacity:1;transform:none}
/* Delays orquestados a mano: ~120ms entre hermanos */
.hero__kicker>span{transition-delay:1s}
.hero__wordmark>span{transition-delay:1.12s}
/* Las piezas de móvil ocupan el mismo hueco de la cascada que las que
   sustituyen: el estado donde iba el kicker, la fecha donde iba el wordmark. */
.hero__status{transition-delay:1s}
.hero__when{transition-delay:1.12s}
.hero__meta .anim-line:nth-child(1)>span{transition-delay:1.34s}
.hero__meta .anim-line:nth-child(2)>span{transition-delay:1.46s}
.hero__meta .anim-line:nth-child(3)>span{transition-delay:1.58s}
.hero__actions{transition-delay:1.74s}
.hero__note>span{transition-delay:1.88s}

/* Reveals de scroll — bidireccionales.
   Dos patrones, repartidos POR ROL y no a discreción:
     · los titulares suben línea a línea tras una máscara (la firma del sistema)
     · todo lo demás entra con fundido + elevación, en orden de lectura
   La sección ya no se desvanece entera: si lo hiciera, el escalonado de dentro
   quedaría enmascarado por el fundido del padre. */
.reveal{opacity:1;transform:none}
.stagger-item{opacity:0;transform:translateY(24px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.in-view .stagger-item{opacity:1;transform:none}

/* Línea de titular enmascarada, versión disparada por scroll.
   El padding-bottom da aire a las gambas de la 'g' y la 'j', que con
   line-height .96 se recortarían contra la máscara; se compensa con el margin
   negativo para no alterar el ritmo vertical. El 120% de desplazamiento es
   mayor que ese alto + padding, así que en reposo la línea queda oculta. */
.rl{display:block;overflow:hidden;clip-path:inset(0 -8px);
  padding-bottom:.14em;margin-bottom:-.14em}
.rl>span{display:inline-block;transform:translateY(120%);
  transition:transform 1s var(--ease-out)}
.in-view .rl>span{transform:translateY(0)}

/* ─────────────── 11. HERO ─────────────── */
.hero{
  position:relative;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:calc(5.5rem + var(--pad-x)) 0 clamp(11rem,26vw,17rem);
  background:var(--cyan);
}
.hero__inner{
  position:relative;z-index:5;
  width:100%;max-width:var(--w-max);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
}
.hero__col{min-width:0}

.hero__kicker{margin-bottom:1.1rem}
.hero__kicker>span{display:flex;flex-wrap:wrap;gap:.7rem;
  font-size:.62rem;font-weight:800;letter-spacing:.42em;text-indent:.42em;
  text-transform:uppercase;color:var(--ink)}
.hero__kicker b{font-weight:800}
.hero__kicker b+b::before{content:'·';margin-right:.7rem;color:inherit;opacity:.5}

.hero__title{margin:0}
.hero__wordmark{width:min(100%,520px)}
.hero__wordmark svg{width:100%;height:auto;fill:var(--cream);
  filter:drop-shadow(0 6px 0 rgba(35,32,33,.28))}

.hero__meta{display:flex;flex-direction:column;gap:.1rem;margin-top:1.2rem}
.hero__meta span span{font-family:var(--font-display);font-weight:600;
  font-size:clamp(.82rem,2.1vw,1.05rem);letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;color:var(--ink);line-height:1.7}

.hero__actions{margin-top:1.9rem}
.hero__actions>span{display:flex;flex-wrap:wrap;gap:.7rem}
.hero__note{margin-top:1rem}
.hero__note>span{font-size:.58rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--t-3)}

/* ── Píldora de estado y fecha tipográfica: sólo existen en móvil ── */
.hero__status,.hero__when{display:none}

.hero__status{
  align-items:center;gap:.5rem;
  padding:.42rem .85rem .42rem .7rem;margin-bottom:1.1rem;
  border:2px solid var(--ink);border-radius:var(--r-pill);
  background:var(--cream);box-shadow:var(--sh-ink);
  font-size:.6rem;font-weight:800;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;color:var(--ink);
}
.hero__status i{
  width:8px;height:8px;flex:0 0 auto;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 3px rgba(234,109,4,.28);
  animation:status-pulse 2.4s ease-in-out infinite;
}
@keyframes status-pulse{50%{box-shadow:0 0 0 6px rgba(234,109,4,0)}}

.hero__when{flex-direction:column;align-items:flex-start;gap:.1rem}
.hero__when-day{font-size:.62rem;font-weight:800;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--t-2)}
.hero__when-big{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.7rem,14vw,3.7rem);line-height:.88;
  letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.hero__when-year{font-size:.66rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-2)}

.hero__col--art{position:relative;display:flex;justify-content:center;align-items:flex-end}
/* ── Isotipo, con su versión animada encima ──
   El wrapper existe para que el lienzo del vídeo pueda superponerse exactamente
   sobre la imagen. Los dos salen del mismo archivo y tienen el mismo encuadre, así
   que el relevo no mueve ni un píxel.

   460px y no 420: el encuadre nuevo incluye el recorrido completo de la cola, que
   se mueve más abajo que en la pose fija, y el cuadrado quedaría un 10% más
   pequeño manteniendo el ancho anterior. */
.hero__isowrap{position:relative;display:block;width:min(100%,460px)}
.hero__isowrap > *{display:block;width:100%;height:auto}
/* El lienzo va encima y entra con una fundida corta mientras la imagen se apaga
   con la misma. La imagen no se quita de la maqueta: es la que da el alto al
   hueco, y sin ella el hero pegaría un salto. El JS la vuelve a encender si el
   vídeo falla. */
.hero__iso--anim{
  position:absolute;inset:0;
  opacity:0;transition:opacity .5s linear;pointer-events:none;
}
.hero__iso--anim.is-on{opacity:1}
.hero__iso{width:min(100%,460px);height:auto;
  transform:scale(1.14);opacity:0;
  transition:transform var(--d-unzoom) var(--ease-out),opacity 1s ease}
body.is-ready .hero__iso{transform:scale(1);opacity:1}
.hero__date{
  position:absolute;top:-4%;right:2%;width:clamp(78px,13vw,132px);z-index:2;
  filter:drop-shadow(0 5px 0 rgba(35,32,33,.3));
  transform:scale(.6) rotate(-14deg);opacity:0;
  transition:transform .8s var(--ease-spring) 1.5s,opacity .5s ease 1.5s;
}
body.is-ready .hero__date{transform:scale(1) rotate(-8deg);opacity:1}
.hero__date{animation:date-bob 5.4s ease-in-out 2.6s infinite}
@keyframes date-bob{50%{transform:scale(1) rotate(-4deg) translateY(-7px)}}

/* Decoración del cartel */
.hero__deco{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero__deco img{position:absolute;will-change:transform}
.hero__yellow{top:-14%;left:-16%;width:clamp(320px,52vw,720px);opacity:.95}
.hero__retazo{top:26%;right:-3%;width:clamp(44px,7vw,96px);transform:rotate(12deg)}
.hero__star4{top:12%;right:22%;width:clamp(30px,4.4vw,58px)}
.hero__star8{bottom:30%;left:4%;width:clamp(26px,3.6vw,46px);
  animation:spin-slow 34s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
/* ── El ave, meciéndose ───────────────────────────────────────────────────
   Se queda siempre dentro del encuadre: no entra ni sale. Es un vaivén de
   verdad —dos keyframes con ease-in-out y alternate—, así frena en los dos
   extremos y el bucle no tiene costura ni salto. Ciclo completo de 14 s.
   Va en la capa de decoración (z 2), por debajo del grano y del contenido:
   nunca puede tapar texto y recibe la misma pátina que el resto del cartel. */
.hero__bird{
  top:13%;left:34%;width:clamp(22px,3vw,34px);
  animation:bird-sway 7s ease-in-out infinite alternate;
}
@keyframes bird-sway{
  from{transform:translate(-9px,  4px) rotate(-4deg)}
  to  {transform:translate( 9px, -6px) rotate(3deg)}
}

/* Mar + arena al pie del hero */
.hero__sea{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none}
.hero__waves{
  height:var(--olas-h);
  background:url('../img/mar.svg') repeat-x left bottom;
  /* El ancho se calcula en vez de dejarlo en `auto`: la animación tiene que
     recorrer EXACTAMENTE un tile, y para eso hay que saber cuánto mide. */
  background-size:var(--olas-w) 100%;
  animation:waves 26s linear infinite;
}
/* Del 0 al ancho de un tile. Antes iba de `center` —468 px a 1280 de ancho— a
   1236 px fijos, que no era ni un número entero de tiles ni la misma distancia a
   cada tamaño de pantalla: el mar daba un salto de 209 px cada 26 segundos. Medido
   en el navegador, no deducido. */
@keyframes waves{
  from{background-position-x:0}
  to{background-position-x:var(--olas-w)}
}
/* La arena NO se repite: su borde superior es orgánico y el tile deja costura.
   Una sola pieza a todo el ancho, recortada por altura. */
.hero__sand{
  height:clamp(72px,13vw,150px);
  /* Sube sobre las olas en lugar de apoyarse en ellas. El borde superior de la
     arena es irregular y translúcido, así que por ahí asoma el mar y las dos
     franjas se entrelazan en vez de quedar apiladas. Antes eran -2px, que sólo
     tapaban la costura. */
  margin-top:calc(var(--olas-h) * -.28);
  background:url('../img/arena.webp') no-repeat center top;
  background-size:100% auto;
}

/* Badge de scroll */
.scrollbadge{
  /* Por encima del mar: la franja de olas + arena ocupa el pie del hero */
  position:absolute;z-index:6;left:50%;bottom:clamp(13rem,28vw,17.5rem);
  width:96px;height:96px;translate:-50% 0;
  display:grid;place-items:center;
  opacity:0;transition:opacity 1s ease 2.2s;
}
body.is-ready .scrollbadge{opacity:1}
html.logo-landed .scrollbadge{transition-duration:.35s;transition-delay:0s}
body.is-scrolled .scrollbadge{opacity:0;pointer-events:none}
.scrollbadge svg{position:absolute;inset:0;width:100%;height:100%;
  animation:spin-slow 16s linear infinite;overflow:visible}
.scrollbadge text{font-family:var(--font-body);font-size:8.4px;font-weight:800;
  letter-spacing:.05em;fill:var(--ink);text-transform:uppercase}
.scrollbadge__arrow{width:9px;height:9px;border-right:2px solid var(--ink);
  border-bottom:2px solid var(--ink);transform:rotate(45deg);
  animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:rotate(45deg) translate(5px,5px);opacity:.5}}

/* ─────────────── 12. MARQUEE ─────────────── */
.marquee{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--cream);
  border-block:2px solid var(--ink);
  padding:.85rem 0;
}
.marquee__track{display:flex;width:max-content;animation:marq 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__half{display:flex;flex:0 0 auto;padding-right:2.4rem}
.marquee__half span{
  display:flex;align-items:center;flex:0 0 auto;padding-right:2.4rem;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  letter-spacing:.22em;text-indent:.22em;text-transform:uppercase;white-space:nowrap;
}
.marquee__half span::after{
  content:'';width:14px;height:14px;margin-left:2.4rem;flex:0 0 auto;
  background:var(--orange);
  -webkit-mask:url('../img/estrella-negra.svg') center/contain no-repeat;
          mask:url('../img/estrella-negra.svg') center/contain no-repeat;
}
@keyframes marq{to{transform:translateX(-50%)}}

/* ─────────────── 13. PRE-REGISTRO ─────────────── */
.prereg{
  position:relative;overflow:hidden;
  background:var(--petrol);color:var(--t-1);
  padding-block:var(--sec-y);
}
.prereg::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,var(--petrol),var(--petrol-deep));
}
/* Foto de la edición anterior, apenas insinuada bajo el petróleo.
   Blend NORMAL y no `screen`: con screen sólo se veían las zonas claras, así
   que el público en silueta era invisible por definición y la foto se quedaba
   en humo. Con opacidad simple las sombras también asoman —oscureciendo el
   petróleo, lo que sólo mejora el contraste— y la escena se reconoce.
   El 12% es el techo: el aclarado máximo posible lleva el fondo a #1f4c56 y la
   rampa --tp-* está calculada justo contra ese peor caso, así que el contraste
   está garantizado sea cual sea el píxel que caiga detrás del texto.
   Desaturada un poco para que el azul de los cañones no compita con el hue de
   la sección. Si el archivo falta, la sección se queda en petróleo liso. */
.prereg__foto{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url('../img/prereg-fondo.webp') center/cover no-repeat;
  filter:saturate(.75) contrast(1.05);
  opacity:.12;
}

.prereg__inner{position:relative;z-index:2;width:100%;max-width:var(--w-max);
  margin-inline:auto;padding-inline:var(--pad-x)}
.prereg__head{max-width:var(--w-narrow)}

/* ── Countdown ── */
.cd{margin:clamp(1.7rem,4.2vw,2.6rem) 0 clamp(1.4rem,3.4vw,2rem)}
.cd__label{font-size:.6rem;font-weight:800;letter-spacing:.3em;text-indent:.3em;
  text-transform:uppercase;color:var(--t-2);margin-bottom:.85rem}
.cd.is-urgent .cd__label{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55}}

.cd__cells{display:flex;align-items:stretch;gap:clamp(.3rem,1.2vw,.65rem);flex-wrap:wrap}
/* Celda plana: el mismo pozo hundido que los inputs del formulario, sin
   degradado ni filete de luz encima. Tres tratamientos apilados hacían ruido
   y no aportaban nada que el borde no dijera ya. */
.cd__cell{
  position:relative;flex:1 1 0;min-width:62px;max-width:112px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  padding:clamp(.62rem,1.7vw,.95rem) .4rem;
  border:2px solid var(--ctrl);border-radius:var(--r-md);
  background:var(--petrol-deep);
  transition:border-color var(--d-hover),box-shadow var(--d-hover);
}
/* Las cifras van en crema. El amarillo deja de ser decoración permanente y
   pasa a significar algo: sólo aparece cuando el cierre está a menos de 24 h. */
.cd__value{
  font-family:var(--font-display);font-weight:800;
  /* Bajado desde 3.1rem: al lado del h2 competía con el titular en vez de
     acompañarlo. El countdown informa, no encabeza. */
  font-size:clamp(1.5rem,4.4vw,2.2rem);line-height:1;
  color:var(--cream);font-variant-numeric:tabular-nums;
  transition:color var(--d-hover);
}
.cd__cell i{font-style:normal;font-size:.52rem;font-weight:800;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--t-3)}
.cd__sep{align-self:center;font-family:var(--font-display);font-weight:800;font-size:1rem;
  color:var(--ctrl-dark-strong);animation:pulse 2s ease-in-out infinite}
.cd__deadline{margin-top:.9rem;font-size:.6rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-3)}

/* Tick con motion blur — solo el dígito que cambia */
.cd__value.is-ticking{animation:tick .42s var(--ease-out)}
@keyframes tick{
  0%{transform:translateY(-46%);filter:blur(1.5px);opacity:0}
  60%{filter:blur(0)}
  100%{transform:translateY(0);opacity:1}
}

/* Estados de urgencia — nunca rojo. Aquí sí entra el amarillo, y por eso
   se nota: en reposo el countdown es blanco y sereno. */
.cd.is-urgent .cd__label{color:var(--yellow)}
.cd.is-urgent .cd__value{color:var(--yellow)}
.cd.is-urgent .cd__cell{border-color:var(--yellow);
  box-shadow:0 0 0 4px rgba(255,246,137,.14)}
.cd.is-over .cd__cell{opacity:.4;filter:grayscale(1)}
.cd.is-over .cd__sep{animation:none}

/* ── Formulario ── */
/* ── Formulario + objeciones ───────────────────────────────────────────────
   La mitad derecha del contenedor estaba vacía en desktop, y era justo donde
   el lector duda. Las objeciones se resuelven ahí, no en el FAQ tres secciones
   más abajo. En móvil van delante del formulario: primero se despejan las
   dudas, después se piden los datos. */
.prereg__grid{
  display:grid;grid-template-columns:minmax(0,var(--w-form)) 1fr;
  gap:clamp(1.6rem,5vw,3.4rem);align-items:start;
  margin-top:clamp(1.4rem,4vw,2.2rem);
}
.fwrap{min-width:0}
.form{display:flex;flex-direction:column;gap:1.05rem}

.objections{padding-top:.3rem}
.objections ul{display:flex;flex-direction:column;gap:1px;
  background:var(--line);border-radius:var(--r-md);overflow:hidden}
.objections li{
  position:relative;background:var(--petrol-deep);
  padding:.8rem 1rem .8rem 2.35rem;
  font-size:.82rem;line-height:1.55;color:var(--t-2);
}
/* Viñeta con la estrella del cartel, no un glifo prestado */
.objections li::before{
  content:'';position:absolute;left:1rem;top:1rem;
  width:11px;height:11px;background:var(--yellow);
  -webkit-mask:url('../img/estrella-negra.svg') center/contain no-repeat;
          mask:url('../img/estrella-negra.svg') center/contain no-repeat;
}

.field{display:flex;flex-direction:column;gap:.42rem;min-width:0}
.field label{font-size:.56rem;font-weight:800;letter-spacing:.22em;text-indent:.22em;
  text-transform:uppercase;color:var(--t-3)}
/* La razón de pedir el teléfono va en la etiqueta, no debajo: ahí llegaba
   cuando la persona ya había dudado. */
.field__why{letter-spacing:.12em;font-weight:700;text-transform:none;opacity:.85}
.field__why::before{content:'— '}
/* Marca de obligatorio. Sólo decorativa: quien exige el campo de verdad es el
   atributo required, que es lo que anuncian los lectores de pantalla. */
.req{color:var(--bad-on-dark);margin-left:.15em}

/* ── Teléfono con selector de prefijo ─────────────────────────────────────
   Una sola caja: el botón de país vive dentro del campo, separado por un
   filete. El foco lo pinta el contenedor con :focus-within, así el conjunto
   se comporta como un único control. */
.tel-group{position:relative}
.tel{
  display:flex;align-items:stretch;
  background:var(--petrol-deep);
  border:2px solid var(--ctrl);border-radius:var(--r-sm);
  transition:border-color var(--d-hover);
}
.tel:focus-within{border-color:var(--yellow)}
.tel.bad{border-color:var(--bad-on-dark)}

.tel__country{
  display:flex;align-items:center;gap:.45rem;
  flex:0 0 auto;padding:0 .7rem 0 .85rem;
  /* Mismo peso y color que el borde de la caja: leen como una sola pieza
     partida en dos, que es la convención de este control. Antes iba a 1px y al
     16% de opacidad y quedaba invisible al lado del borde del input. */
  border-right:2px solid var(--ctrl);
  border-radius:calc(var(--r-sm) - 2px) 0 0 calc(var(--r-sm) - 2px);
  transition:background-color var(--d-hover);
}
.tel__country:hover{background:rgba(251,239,217,.07)}
.tel__country[aria-expanded="true"]{background:rgba(251,239,217,.1)}
.tel__flag{
  width:22px;height:15px;flex:0 0 auto;border-radius:2px;
  /* El filete evita que las banderas con blanco al borde se derramen */
  box-shadow:0 0 0 1px rgba(0,0,0,.28);
}
.tel__dial{
  font-family:var(--font-body);font-weight:700;font-size:.86rem;
  color:var(--t-1);font-variant-numeric:tabular-nums;
}
.tel__caret{
  width:0;height:0;flex:0 0 auto;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--t-3);
  transition:transform var(--d-hover) var(--ease-out);
}
.tel__country[aria-expanded="true"] .tel__caret{transform:rotate(180deg)}

/* El input vive DENTRO de la caja compuesta: no dibuja borde propio en ningún
   estado. Hace falta más especificidad que `.field input`, que va después en el
   archivo y con el mismo peso le devolvía su borde de 2px y su radio de 12px —
   eso era el rectángulo redondeado que aparecía dentro de la caja, y su borde
   izquierdo el que se confundía con el separador. El foco y el error los pinta
   el contenedor (.tel:focus-within / .tel.bad), no el input. */
.field .tel input,
.field .tel input:focus,
.field .tel input.bad{
  flex:1 1 auto;min-width:0;
  padding:.95rem 1rem;
  border:0;border-radius:0;background:none;outline:none;
}

/* ── Lista de países ── */
/* Absoluta y por encima del dock (z 80): en flujo empujaba el formulario y
   en móvil el dock se comía la mitad de la lista.
   Ojo: .prereg__inner tiene z-index 2 y por tanto crea contexto de
   apilamiento, así que el z-index de la lista queda encerrado dentro. Se
   eleva el contenedor sólo mientras el desplegable está abierto. */
body.tel-open .prereg__inner{z-index:90}
.tel__list{
  position:absolute;top:100%;left:0;right:0;z-index:95;
  margin-top:.4rem;max-height:min(16rem,42vh);overflow-y:auto;overscroll-behavior:contain;
  background:var(--petrol-deep);
  border:2px solid var(--ctrl);border-radius:var(--r-sm);
  box-shadow:var(--sh-soft);
}
.tel__opt{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .85rem;cursor:pointer;
  font-size:.86rem;line-height:1.3;color:var(--t-2);
  border-bottom:1px solid var(--line);
  transition:background-color var(--d-micro),color var(--d-micro);
}
.tel__opt:last-child{border-bottom:0}
.tel__opt svg{width:22px;height:15px;flex:0 0 auto;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.tel__opt b{flex:1 1 auto;font-weight:600;color:var(--t-1)}
.tel__opt i{font-style:normal;font-weight:700;color:var(--t-3);
  font-variant-numeric:tabular-nums}
.tel__opt:hover,.tel__opt.is-active{background:rgba(251,239,217,.1);color:var(--t-1)}
.tel__opt[aria-selected="true"]{background:rgba(255,246,137,.14)}
.tel__opt[aria-selected="true"] i{color:var(--yellow)}
/* input, select y textarea comparten forma: son el mismo control a ojos de quien
   rellena, y que el desplegable se vea distinto de la casilla de al lado no tiene
   ninguna justificación. */
.field input,
.field select,
.field textarea{
  width:100%;padding:.95rem 1.05rem;
  font-family:var(--font-body);font-size:1rem;font-weight:600;/* ≥1rem: sin zoom en iOS */
  color:var(--cream);background:var(--petrol-deep);
  border:2px solid var(--ctrl);border-radius:var(--r-sm);
  transition:border-color var(--d-hover),background-color var(--d-hover);
}
.field input::placeholder,
.field textarea::placeholder{color:var(--t-3);font-weight:500}
.field input:focus,
.field select:focus,
.field textarea:focus{outline:none;border-color:var(--yellow)}
.field input.bad,
.field select.bad,
.field textarea.bad{border-color:var(--bad-on-dark)}

/* El desplegable se dibuja a mano: el nativo trae su propia flecha del sistema,
   que sobre petróleo aparece en gris del sistema y rompe la paleta. */
.field select{
  -webkit-appearance:none;appearance:none;cursor:pointer;
  padding-right:2.6rem;
  background-image:linear-gradient(45deg,transparent 49%,var(--cream) 50%),
                   linear-gradient(-45deg,transparent 49%,var(--cream) 50%);
  background-size:7px 7px,7px 7px;
  background-position:right 1.3rem center,right .95rem center;
  background-repeat:no-repeat;
}
/* Las opciones sí las pinta el sistema operativo, no el CSS de la página: se les
   fija color explícito para que no salgan blanco sobre blanco en modo oscuro. */
.field select option{background:var(--petrol-deep);color:var(--cream)}

.field textarea{
  resize:vertical;min-height:7.5rem;line-height:1.6;
  /* font-weight 500 y no 600: un párrafo entero en semibold cansa de leer */
  font-weight:500;
}
.field__hint{font-size:.62rem;line-height:1.7;color:var(--t-3)}

.ferr{font-size:.66rem;font-weight:700;line-height:1.6;color:var(--bad-on-dark);min-height:0}
.ferr:empty{display:none}

.check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  margin-top:.3rem;cursor:pointer}
.check input{position:absolute;opacity:0;width:22px;height:22px;margin:0}
.check__box{
  width:22px;height:22px;flex:0 0 auto;border-radius:7px;
  border:2px solid var(--ctrl);background:var(--petrol-deep);
  position:relative;transition:border-color var(--d-hover),background-color var(--d-hover)}
.check__box::after{
  content:'';position:absolute;left:5px;top:1px;width:8px;height:13px;
  border-right:2.5px solid var(--petrol);border-bottom:2.5px solid var(--petrol);
  transform:rotate(42deg) scale(0);transform-origin:center;
  transition:transform .4s var(--ease-spring)}
.check input:checked+.check__box{background:var(--yellow);border-color:var(--yellow)}
.check input:checked+.check__box::after{transform:rotate(42deg) scale(1)}
.check input:focus-visible+.check__box{box-shadow:0 0 0 4px rgba(255,246,137,.3)}
.check input.bad+.check__box{border-color:var(--bad-on-dark)}
.check__text{font-size:.76rem;line-height:1.65;color:var(--t-2)}
.check__text a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form__err{padding:.8rem 1rem;border-radius:var(--r-sm);
  background:#3a1710;border:2px solid var(--bad-on-dark);
  font-size:.78rem;font-weight:700;color:#ffc7bb}
.form__submit{margin-top:.5rem;align-self:flex-start;position:relative}
.form__submit[disabled]{cursor:wait;opacity:.82}
.form__submit .spinner{display:none}
.form__submit.is-busy .form__submit-label{opacity:.5}
.form__submit.is-busy .spinner{display:block}
.spinner{width:15px;height:15px;border-radius:50%;
  border:2.5px solid rgba(251,239,217,.35);border-top-color:var(--cream);
  animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form__note{font-size:.58rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-3)}

/* ── Éxito ── */
.done,.closed{position:relative;padding:clamp(1.5rem,4vw,2.2rem);
  border:2px solid var(--ctrl);border-radius:var(--r-lg);
  background:var(--petrol-deep);
  overflow:hidden}
.done__check{width:54px;height:54px;border-radius:50%;background:var(--yellow);
  display:grid;place-items:center;margin-bottom:1rem;
  animation:pop .6s var(--ease-spring) both}
@keyframes pop{from{transform:scale(0)}}
.done__check i{display:block;width:12px;height:20px;margin-top:-4px;
  border-right:3px solid var(--petrol);border-bottom:3px solid var(--petrol);
  transform:rotate(42deg)}
.done__title{font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.4rem,4vw,2rem);line-height:1;text-transform:uppercase;
  color:var(--cream);margin-bottom:.7rem}
.done__text{font-size:.95rem;line-height:1.7;color:var(--t-2);max-width:48ch}
.done__text strong{color:var(--yellow)}
.done__steps{margin-top:1.2rem;display:grid;gap:1px;background:var(--line)}
.done__steps li{background:var(--petrol-deep);padding:.8rem 1rem;
  font-size:.78rem;line-height:1.6;color:var(--t-2)}
.done__steps b{color:var(--cream)}
.done__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

/* Partículas de celebración */
.done__parts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.part{position:absolute;bottom:-14px;width:7px;height:7px;border-radius:2px;
  background:var(--yellow);animation:rise 2.6s ease-out forwards}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translateY(-320px) rotate(320deg);opacity:0}
}

/* Estados de la fase — la visibilidad de form/done/closed la gobierna el JS
   con [hidden]; aquí sólo lo accesorio. */
body.phase-cerrado .cd__deadline{visibility:hidden}

/* ─────────────── 14. PILARES ─────────────── */
.pilares{position:relative;overflow:hidden;background:var(--cream);
  padding-block:var(--sec-y);border-bottom:2px solid var(--ink)}
.grid4{
  margin-top:clamp(2rem,5vw,3rem);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:2px;background:var(--line-strong);
  border:2px solid var(--ink);border-radius:var(--r-md);overflow:hidden;
}
.cell{background:var(--cream);padding:clamp(1.3rem,3vw,1.9rem);
  display:flex;flex-direction:column;gap:.55rem;
  transition:background-color var(--d-hover)}
.cell:hover{background:var(--cream-warm)}
/* ── Las letras del logotipo ──
   No son texto con la tipografía de la web: son las cuatro letras del logotipo
   de marca, recortadas del original una a una. Van como MÁSCARA y no como <img>
   por dos motivos: el archivo viene en crema y estas tarjetas son crema —se
   vería una letra invisible—, y así el color es una decisión del CSS. Es la
   misma técnica que usa .lugar__star.

   La altura de cada una se deriva de su propio viewBox sobre 149, que es el de
   la más alta. Poniéndoles a todas la misma altura, la E y la E invertida —de
   143— saldrían un 4% más grandes de la cuenta y el conjunto dejaría de leerse
   como el logotipo. Los números del viewBox se declaran aquí al lado para que se
   vea de dónde sale la proporción. */
/* Sin padding: con overflow:hidden el relleno queda DENTRO del recorte, así que
   cualquier hueco por debajo dejaría asomar la letra mientras sube. Estas letras
   no tienen gambas, así que no hace falta el aire que sí necesitan los titulares. */
.cell__letra{display:block;overflow:hidden;transition:transform var(--d-hover) var(--ease-out)}
.cell__letter{
  display:block;
  height:calc(clamp(52px,7vw,74px) * var(--vh) / 149);
  aspect-ratio:var(--vw) / var(--vh);
  background:var(--accent-text);
  -webkit-mask:var(--img) left bottom/contain no-repeat;
          mask:var(--img) left bottom/contain no-repeat;
}
.cell__letter--e {--vw:62; --vh:143; --img:url('../img/letra-e.svg')}
.cell__letter--m {--vw:130;--vh:149; --img:url('../img/letra-m.svg')}
.cell__letter--e2{--vw:62; --vh:143; --img:url('../img/letra-e2.svg')}
.cell__letter--c {--vw:62; --vh:149; --img:url('../img/letra-c.svg')}

/* La entrada es la firma del sistema —subir desde detrás de una máscara, lo
   mismo que hacen los titulares—, aplicada aquí a la marca. El estado escondido
   lo arma el JS al añadir .stagger-item, nunca el CSS por defecto: si estuviera
   aquí, sin JS las cuatro tarjetas se quedarían con un hueco vacío. Es la misma
   precaución que ya tomaba el escalonado genérico.

   Se sobreescribe ese escalonado en lugar de usarlo tal cual: el genérico es un
   fundido con 24px de elevación, y una letra a media opacidad subiendo por
   encima del texto de al lado se ve como un error, no como una entrada. */
.cell__letter.stagger-item{opacity:1;transform:translateY(112%)}
.in-view .cell__letter.stagger-item{transform:none}

/* Al pasar por encima de la tarjeta la letra se asoma un poco. Es la única
   animación permanente que se permite aquí: cuatro letras en bucle en mitad de
   un bloque de lectura serían un distractor, no un detalle.

   El nudge va en el CONTENEDOR y no en la letra a propósito. En la letra
   compartiría la propiedad `transform` con la entrada, y como esta regla va más
   abajo en el archivo con la misma especificidad, su `transition` ganaría: la
   letra entraría con la velocidad de un hover en vez de con la de una entrada.
   En elementos distintos, las dos animaciones no se pisan. */
.cell:hover .cell__letra{transform:translateY(-4px)}
.cell h3{font-family:var(--font-display);font-weight:800;font-size:1.02rem;
  letter-spacing:.1em;text-transform:uppercase}
.cell p{font-size:.82rem;line-height:1.72;color:var(--t-2)}

/* ── Adornos de sección ──────────────────────────────────────────────────
   Los mismos elementos del cartel que ya viven en el hero, repartidos por el
   resto de la página: uno por sección y nada más. La contención es el punto —con
   tres por bloque esto deja de ser un cartel y pasa a ser ruido—.

   Van DETRÁS de todo (z-index 0 contra el contenido, que va en 2) y sin eventos,
   así que no pueden tapar ni interceptar nada. Y en opacidades bajas: se notan al
   pasar la vista, no se miran.

   El movimiento lo da `data-flota`, que los mece según su propia posición en la
   pantalla. Es a propósito que dependa del scroll y no de un bucle: un adorno que
   se mueve solo al lado de un párrafo compite con la lectura, y uno que se mueve
   sólo mientras te desplazas acompaña. Los bucles se quedan donde ya estaban —el
   hero, que es cartel y no texto—.

   `loading=lazy` porque están todos por debajo del pliegue, y sin peticiones
   nuevas: los tres archivos ya los descarga el hero. */
.deco{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  will-change:transform;
}
/* El contenido de estas secciones sube por encima del adorno. `.wrap` ya es el
   contenedor de todas, así que basta con una regla. */
.pilares > .wrap, .pasos > .wrap, .faq > .wrap{position:relative;z-index:2}

/* OJO CON LA PROPIEDAD QUE SE ANIMA. El flotado escribe `translate` desde el JS;
   si los @keyframes de aquí animaran `transform`, uno pisaría al otro y ganaría el
   estilo en línea —el adorno se quedaría quieto o dejaría de flotar, según el
   orden—. Por eso estos dos animan `rotate`, que es una propiedad independiente y
   compone con `translate` sin tocarla. Los del hero siguen con transform: allí no
   hay flotado que los estorbe. */
@keyframes deco-giro{to{rotate:360deg}}
@keyframes deco-mecer{from{rotate:-5deg}to{rotate:4deg}}

/* POR DEBAJO DE 900px NO SE PINTAN. Un adorno de margen necesita margen, y en una
   pantalla estrecha la columna de texto ocupa el ancho entero: el adorno dejaría de
   estar al lado del contenido para estar debajo, y eso no es decoración, es un
   estorbo detrás de lo que se lee. Medido: a 768px los tres solapaban la columna. */
@media (max-width:900px){ .deco{display:none} }

/* Arriba a la derecha, girando muy despacio: el mismo gesto que la estrella del
   hero, a un tercio de velocidad porque aquí hay texto al lado. */
.deco--pilares{
  top:6%;right:-2%;width:clamp(70px,11vw,150px);opacity:.07;
  animation:deco-giro 96s linear infinite;
}
/* La única grande. La sección de pasos es un bloque de cian plano y lo aguanta:
   por debajo de las tarjetas y a muy baja opacidad, da profundidad sin decir nada. */
.deco--pasos{
  bottom:-12%;left:-6%;width:clamp(180px,30vw,420px);opacity:.13;
}
/* El ave, meciéndose como en el hero pero más lenta y más pequeña. Es el elemento
   con más carácter del cartel y por eso va en la sección más árida: una lista de
   preguntas. */
.deco--faq{
  bottom:9%;right:5%;width:clamp(26px,4vw,52px);opacity:.18;
  animation:deco-mecer 11s ease-in-out infinite alternate;
}

/* ─────────────── 15. PASOS ─────────────── */
.pasos{position:relative;overflow:hidden;background:var(--cyan);padding-block:var(--sec-y)}
.steps{margin-top:clamp(2rem,5vw,3rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,2vw,1.2rem)}
.step{
  position:relative;padding:clamp(1.4rem,3.2vw,2rem);
  background:var(--cream);border:2px solid var(--ink);border-radius:var(--r-md);
  box-shadow:var(--sh-ink);
  transition:transform var(--d-hover) var(--ease-out),box-shadow var(--d-hover) var(--ease-out);
}
.step:hover{transform:translateY(-5px);box-shadow:var(--sh-ink-lift)}
.step__n{display:block;font-family:var(--font-display);font-weight:800;font-size:.86rem;
  letter-spacing:.22em;color:var(--accent-text);margin-bottom:.8rem}
.step h3{font-family:var(--font-display);font-weight:800;font-size:1.1rem;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.5rem}
.step p{font-size:.84rem;line-height:1.72;color:var(--t-2)}

/* ─────────────── 16. LUGAR ─────────────── */
.lugar{position:relative;overflow:hidden;background:var(--petrol);color:var(--t-1);
  padding-block:var(--sec-y)}
.lugar__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;position:relative;z-index:2}
.lugar__lockups{display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;margin-top:1.8rem}
/* Los lockups llevan el nombre del recinto: tienen que leerse. Silueta crema
   sobre petróleo = 11.8:1. */
.lugar__lockups img{height:clamp(30px,4.4vw,44px);width:auto;
  filter:brightness(0) invert(.96) sepia(.16) saturate(.5)}
.lugar__art{position:relative;min-height:220px;display:grid;place-items:center}

/* Sobre petróleo, la estrella y el mar en petróleo profundo se quedaban en
   1.3:1: barro invisible. Aquí van en CIAN —la luz del mismo hue— pintado por
   máscara, así el mismo SVG sirve en claro y en oscuro sin duplicar archivo. */
.lugar__star{
  width:clamp(90px,16vw,180px);aspect-ratio:183.24/194.42;
  background:var(--cyan);opacity:.62;
  -webkit-mask:url('../img/estrella-azul.svg') center/contain no-repeat;
          mask:url('../img/estrella-azul.svg') center/contain no-repeat;
  animation:date-bob 7s ease-in-out infinite;
}
/* Mismo mar y mismo arreglo que en el hero: el tile mide 210,6 px a esta altura y
   la animación desplazaba 1236 px desde `center`, o sea ni un número entero de
   tiles ni la misma distancia. Aquí se notaba menos —va al 30% de opacidad y
   detrás del contenido—, pero el salto estaba. */
.lugar__waves{
  --h:64px;
  position:absolute;left:0;right:0;bottom:0;height:var(--h);opacity:.3;
  background:var(--cyan);
  -webkit-mask:url('../img/mar.svg') repeat-x left bottom/calc(var(--h) * var(--olas-prop)) 100%;
          mask:url('../img/mar.svg') repeat-x left bottom/calc(var(--h) * var(--olas-prop)) 100%;
  animation:waves-mask 30s linear infinite;
}
@keyframes waves-mask{
  from{-webkit-mask-position-x:0;mask-position-x:0}
  to{-webkit-mask-position-x:calc(var(--h) * var(--olas-prop));
     mask-position-x:calc(var(--h) * var(--olas-prop))}
}

/* ─────────────── 17. FAQ ─────────────── */
.faq{position:relative;overflow:hidden;background:var(--cream);padding-block:var(--sec-y);
  border-top:2px solid var(--ink)}
.qa{border-bottom:1px solid var(--line)}
.qa:first-of-type{border-top:1px solid var(--line);margin-top:clamp(1.6rem,4vw,2.4rem)}
.qa summary{
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.1rem 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:clamp(.92rem,2.2vw,1.06rem);
  letter-spacing:.03em;transition:color var(--d-hover)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-text)}
.qa summary i{position:relative;flex:0 0 auto;width:26px;height:26px;
  border:2px solid var(--ink);border-radius:var(--r-pill);
  transition:transform var(--d-hover) var(--ease-grow),background-color var(--d-hover)}
.qa summary i::before,.qa summary i::after{content:'';position:absolute;top:50%;left:50%;
  width:10px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
.qa summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa[open] summary i{transform:rotate(45deg);background:var(--yellow)}
.qa[open] summary{color:var(--accent-text)}
.qa__body{padding:0 0 1.3rem;max-width:62ch}
.qa__body p{font-size:.88rem;line-height:1.78;color:var(--t-2)}
.qa__body a{color:var(--petrol);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ─────────────── 18. FOOTER ─────────────── */
.footer{position:relative;background:var(--ink);color:var(--t-1);
  padding-block:clamp(2.6rem,6vw,3.8rem) 2.5rem}
/* La arena tiene el borde superior irregular y transparente, y ese hueco hay
   que rellenarlo con el color de lo que hay ENCIMA. Pintarlo de crema a mano
   funcionaba en la home (FAQ crema) y dejaba una banda crema pegada en las
   páginas de fondo petróleo.
   Así que la franja no se rellena: se coloca por completo por encima del footer
   (`bottom:100%`) y se sale de él, de modo que el hueco de la cresta deja ver
   la sección anterior, sea del color que sea. La tinta del footer empieza justo
   donde acaba la duna: orilla, no franja. Por eso el footer ya no lleva
   `overflow:hidden` —recortaría la franja— ni el hueco superior que antes
   reservaba para ella. */
/* El recorte del PNG deja 2 px translúcidos en el borde izquierdo y 1 px en el
   derecho. Con el relleno crema no se notaban; sin relleno serían dos hilos del
   color de arriba cruzando la duna de lado a lado. Se desborda la imagen 4 px
   por cada lado para que esos bordes caigan fuera de la caja. */
.footer__sand{position:absolute;bottom:100%;left:0;right:0;height:var(--arena-h);
  background:url('../img/arena.webp') no-repeat -4px top;
  background-size:calc(100% + 8px) auto;pointer-events:none}
/* El hueco lo reserva quien está encima, porque es su espacio el que se ocupa.
   Y tiene que reservarlo la última sección PINTADA, no el <main> que la envuelve:
   <main> es transparente, así que el hueco se llenaría con el fondo del body
   —cian en la home— y volvería a aparecer una franja de otro color bajo el FAQ.
   Los selectores ganan en especificidad a .faq/.doc/.venta, que declaran su
   propio padding-block. */
main:has(+ .footer) > :last-child,
section:has(+ .footer),
div:has(+ .footer){padding-bottom:calc(var(--arena-h) + var(--sec-y) * .55)}
.footer__inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:1.6rem}
.footer__logo{width:120px}
.footer__logo svg{width:100%;height:auto;fill:var(--cream)}
.footer__claim{font-size:.72rem;font-weight:600;letter-spacing:.16em;line-height:2.1;
  text-transform:uppercase;color:var(--t-3)}
.footer__claim b{color:var(--cream)}
.footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem;
  padding-block:1.8rem;border-block:1px solid var(--line)}
.footer__cols h4{font-size:.56rem;font-weight:800;letter-spacing:.28em;text-indent:.28em;
  text-transform:uppercase;color:var(--orange);margin-bottom:.9rem}
.footer__cols a{display:block;padding:.3rem 0;font-size:.8rem;font-weight:600;
  color:var(--t-2);transition:color var(--d-hover)}
.footer__cols a:hover{color:var(--cream)}
.footer__cols i{display:inline-block;font-style:normal;
  transition:transform var(--d-hover) var(--ease-out)}
.footer__cols a:hover i{transform:translate(3px,-3px);color:var(--orange)}
/* ── Instituciones, patrocinadores y Punto Violeta ──
   Siempre presentes. La franja de logos es un SVG monocromo claro que ya viene
   en el tono del footer; el Punto Violeta va aparte porque es una marca de
   seguridad, no un patrocinio, y se identifica sola. */
.footer__marks{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.4rem,4vw,3rem);
  padding-block:1.8rem;border-bottom:1px solid var(--line);
}
.footer__sponsors{
  flex:1 1 auto;min-width:0;width:100%;max-width:720px;height:auto;
  /* Los logos institucionales se entregan planos: se bajan un punto para que
     no compitan con el contenido, y recuperan su peso al pasar por encima. */
  opacity:.78;transition:opacity var(--d-hover);
}
.footer__marks:hover .footer__sponsors{opacity:1}
.footer__pv{flex:0 0 auto;width:clamp(56px,7vw,76px);height:auto}

.footer__legal{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-3)}

/* ─────────────── 19. DOCK MÓVIL ─────────────── */
.dock{
  display:none;position:fixed;z-index:80;
  left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  flex-direction:column;gap:.6rem;padding:.8rem .9rem;
  border-radius:18px;border:2px solid var(--ink);
  background:rgba(251,239,217,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
          backdrop-filter:blur(20px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 30px -14px rgba(35,32,33,.6);
  transform:translateY(calc(100% + 6rem));
  transition:transform .9s var(--ease-out) 1.45s;
}
body.is-ready .dock{transform:translateY(0)}
.dock__count{display:flex;align-items:baseline;justify-content:center;gap:.5rem}
.dock__cell{display:inline-flex;align-items:baseline;gap:.12rem}
.dock__cell b{font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  color:var(--petrol);font-variant-numeric:tabular-nums}
.dock__cell i{font-style:normal;font-size:.55rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--t-3)}
/* El fondo del dock es cristal: con alfa el contraste dependería de lo que
   pase por detrás. Color explícito. */
.dock__sep{color:var(--t-3);font-size:.85rem}
/* El relleno naranja sobre el cristal crema del dock sólo da 2.38:1: el
   límite del control no se distinguía (WCAG 2.2 · 1.4.11). El keyline de
   tinta del resto del sistema lo resuelve y además unifica los botones. */
.dock__btn{display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.7rem .5rem;border-radius:13px;background:var(--orange);color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34);transition:filter var(--d-hover)}
.dock__btn:active{filter:brightness(1.12)}
.dock__btn span{font-family:var(--font-display);font-weight:800;font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase}
/* Sobre naranja sólo la tinta al 100% pasa 4.5:1, así que la jerarquía de
   esta segunda línea la dan el tamaño y el tracking, no un color lavado. */
.dock__btn small{font-size:.54rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink)}
body.phase-cerrado .dock__count{display:none}

/* ─────────────── 19b. CONSENTIMIENTO ───────────────
   Hoja inferior sobre superficie TINTA. Tres botones al mismo peso visual: el
   único que va relleno es "aceptar todo" porque es el afirmativo, pero los otros
   dos son igual de grandes, igual de legibles y están en la misma fila. Un
   banner donde rechazar cuesta más que aceptar no recoge un consentimiento
   válido, y eso vale tanto para el diseño como para la ley.

   z-index 130: por encima del dock (80) y del nav (90), y también del menú
   lateral (120), para que la decisión siga alcanzable con el menú abierto. */
.consent{
  --t-1:var(--ti-1); --t-2:var(--ti-2); --t-3:var(--ti-3);
  --line:var(--hair-cream); --ctrl:var(--ctrl-dark); --accent-text:var(--orange);
  position:fixed;z-index:130;
  left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));
  display:flex;justify-content:center;pointer-events:none;
}
.consent__caja{
  pointer-events:auto;width:100%;max-width:560px;
  display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.1rem,3.4vw,1.5rem);
  background:var(--ink);color:var(--t-1);
  border:2px solid var(--cream);border-radius:18px;
  box-shadow:0 22px 46px -20px rgba(1,26,32,.75);
  /* Entra desde abajo. El estado de reposo es el desplazado: si el JS no llega a
     abrirlo, el banner nunca se ve a medias. */
  transform:translateY(calc(100% + 1.5rem));opacity:0;
  transition:transform .7s var(--ease-out),opacity .5s linear;
}
.consent.is-open .consent__caja{transform:none;opacity:1}
.consent__titulo{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1rem,2.6vw,1.16rem);line-height:1.05;text-transform:uppercase;
  letter-spacing:.01em;color:var(--cream);
}
.consent__texto{margin:0;font-size:.82rem;line-height:1.62;color:var(--t-2)}
.consent__botones{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.2rem}
.consent__botones .btn{flex:1 1 auto;justify-content:center;
  padding:.8rem 1.1rem;font-size:.68rem;white-space:nowrap}
.consent__legal{margin:0;font-size:.63rem;line-height:1.7;color:var(--t-3)}
.consent__legal a{color:var(--cream);text-decoration:underline;text-underline-offset:3px}
/* Mientras se decide, el dock se queda guardado: dos barras apiladas abajo en un
   móvil no dejan ver la página, y la decisión va primero. */
body:has(.consent.is-open) .dock{
  transform:translateY(calc(100% + 6rem));transition-delay:0s}
/* Sin medición configurada no hay preferencias que abrir: el enlace del pie
   llevaría a un banner que consent.js ha quitado del DOM. */
html[data-consent="sinmedicion"] [data-consent-abrir]{display:none}
@media (prefers-reduced-motion:reduce){
  .consent__caja{transition-duration:.01ms}
}

/* ─────────────── 20. RESPONSIVE (4 breakpoints) ─────────────── */
@media (max-width:1000px){
  /* Por debajo de ~1000px no caben 660px de formulario + las objeciones con
     una medida legible al lado: se apilan, y las dudas van primero. */
  /* En vertical `cover` se come los lados: la posición se sesga hacia la
     cabina para que el recorte estrecho siga conteniendo la escena. */
  .prereg__foto{background-position:64% center}
  .prereg__grid{grid-template-columns:1fr;gap:1.7rem}
  .objections{order:-1;padding-top:0}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:1rem}
  .lugar__grid{grid-template-columns:1fr}
  .lugar__art{order:-1;min-height:150px}
}

@media (max-width:820px){
  .nav__links,.nav__lang{display:none}
  .nav__cta{margin-left:auto}
  .burger{display:block}
  .dock{display:flex}
  .footer{padding-bottom:10rem}

  /* ── Jerarquía de la primera pantalla en móvil ─────────────────────────
     Orden: ESTADO → isotipo → FECHA → LUGAR → acción.
     Fuera el wordmark: era el elemento más grande de la pantalla y no aporta
     nada nuevo, porque está a 8px en el nav. Los ~145px que libera son justo
     los que le faltaban a la fecha y al lugar para caber sobre el dock.
     Fuera también el badge SVG: la fecha pasa a ser tipográfica y tenerla dos
     veces sería redundante.
     display:contents disuelve las dos columnas del grid, y así se puede
     intercalar el isotipo entre el estado y la fecha con `order`. */
  .hero{padding-top:calc(4.2rem + var(--pad-x));padding-bottom:clamp(12rem,32vw,17rem)}
  .hero__inner{display:flex;flex-direction:column;align-items:flex-start;gap:0}
  .hero__col,.hero__col--art{display:contents}

  .hero__status{display:inline-flex;order:1}
  .hero__isowrap{order:2;width:min(46%,190px);margin-bottom:1.3rem}
  .hero__iso{width:100%}
  .hero__title{order:3}
  .hero__meta{order:4;margin-top:.8rem}
  .hero__actions{order:5;margin-top:1.5rem}
  .hero__note{order:6}

  .hero__kicker,.hero__wordmark,.hero__date{display:none}
  .hero__when{display:flex}

  /* El recinto manda sobre el número de edición, que ya viaja en el bloque de
     fecha: la primera línea del meta sobra aquí. */
  .hero__meta .anim-line:nth-child(1){display:none}
  .hero__meta .anim-line:nth-child(2) span{font-size:1rem;color:var(--ink)}
  .hero__meta .anim-line:nth-child(3) span{font-size:.78rem;color:var(--t-2)}
  .hero__meta span span{letter-spacing:.14em;text-indent:.14em}

  /* El ave se recoloca al hueco que queda a la derecha del isotipo. En su
     sitio de desktop lo taparía, y más abajo quedaba pegada al texto. */
  .hero__bird{top:20%;left:auto;right:20%}
  .hero__star8{display:none}
  /* El CTA secundario quedaría justo detrás del dock, asomando el borde.
     En móvil la navegación ya la dan el dock y el menú lateral. */
  .hero__actions .btn--ghost{display:none}
  .scrollbadge{display:none}
}

/* Móviles cortos (SE, minis): la restricción no es el ancho sino la ALTURA.
   Con 667px de alto el CTA se metía debajo del dock, así que aquí se recorta
   el isotipo y se aprieta el aire, sin castigar a las pantallas largas. */
@media (max-width:820px) and (max-height:740px){
  .hero{padding-top:calc(3.5rem + var(--pad-x))}
  .hero__isowrap{width:min(34%,132px);margin-bottom:.85rem}
  .hero__iso{width:100%}
  .hero__status{margin-bottom:.8rem}
  .hero__when-big{font-size:clamp(2.1rem,11vw,2.7rem)}
  .hero__meta{margin-top:.55rem}
  .hero__meta .anim-line:nth-child(2) span{font-size:.92rem}
  .hero__actions{margin-top:1.05rem}
  /* La nota de fricción cero dice lo mismo que el dock ("Gratis · 30 s"), que
     siempre está a la vista: en 4px de sobra, se cae la repetida. */
  .hero__note{display:none}
}

@media (max-width:560px){
  :root{--sec-y:clamp(3rem,11vw,4rem)}
  .grid4{grid-template-columns:1fr}
  .cd__cells{gap:.3rem}
  .cd__cell{min-width:0;padding:.62rem .2rem}
  .cd__sep{display:none}
  .footer__cols{grid-template-columns:1fr;gap:1.4rem}
  .footer__marks{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .footer__sponsors{max-width:100%}
}

/* ─────────────── 21. REDUCED MOTION (cierre del sistema) ─────────────── */
@media (prefers-reduced-motion:reduce){
  html:not(.no-smooth){scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  /* Los spinners no se eliminan: se ralentizan (siguen comunicando "cargando") */
  .spinner{animation:spin 3s linear infinite !important;animation-duration:3s !important}
  .anim-line>span{transform:none !important}
  .anim-rise{opacity:1 !important;transform:none !important}
  .reveal,.stagger-item{opacity:1 !important;transform:none !important}
  .rl>span{transform:none !important}
  .hero__iso{opacity:1 !important;transform:none !important}
  .hero__date{opacity:1 !important;transform:rotate(-8deg) !important}
  .nav{transform:none !important}
  .dock{transform:none !important}
  .grain{display:none}
  .preloader{display:none}
}


/* ─────────────── 22. PÁGINA DE ENTRADAS ───────────────
   Conversión pura: sin hero y sin reveals. Lo único que importa es que el
   widget de Xceed se vea y funcione, así que va enmarcado y centrado sobre
   petróleo, y nada compite con él. */
.pag-entradas{background:var(--petrol)}
.venta{
  --t-1:var(--tp-1); --t-2:var(--tp-2); --t-3:var(--tp-3);
  --line:var(--hair-cream); --ctrl:var(--ctrl-dark); --accent-text:var(--yellow);
  position:relative;background:var(--petrol);color:var(--t-1);
  min-height:100svh;padding-block:calc(5.5rem + var(--pad-x)) var(--sec-y);
}
.venta__titulo{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,5.6vw,3.1rem);line-height:.96;text-transform:uppercase;
  color:var(--t-1);text-wrap:balance;
}
.venta__meta{
  margin-top:.7rem;font-size:.62rem;font-weight:800;letter-spacing:.26em;
  text-indent:.26em;text-transform:uppercase;color:var(--t-3);
}

/* Marco del widget: el filete crema es el mismo keyline que usan los botones
   sobre oscuro, para que el bloque de terceros no parezca pegado con cola. */
.venta__marco{
  position:relative;margin-top:clamp(1.6rem,4vw,2.4rem);
  min-height:22rem;padding:clamp(.9rem,2.5vw,1.4rem);
  border:2px solid var(--ctrl);border-radius:var(--r-lg);
  background:var(--petrol-deep);
}
.venta__cargando,.venta__respaldo{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:2rem;text-align:center;
}
.venta__cargando p,.venta__respaldo p{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--t-3);max-width:34ch;line-height:1.9;
}
/* El spinner no desaparece con reduced-motion: se ralentiza. Sigue diciendo
   "cargando" sin marear. Regla heredada del sistema. */
.venta__cargando .spinner{width:22px;height:22px;border-width:3px}

/* Fase previa: sin widget, así que el bloque respira como una sección normal
   en lugar de fingir un marco vacío. */
.venta__previa{margin-top:clamp(1.8rem,4.5vw,2.8rem);max-width:var(--w-narrow)}
.venta__previa .cd{margin-block:clamp(1.6rem,4vw,2.4rem)}
.venta__acciones{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.4rem}
.venta-previa .venta__marco{display:none}

#xceed-widget{min-height:20rem}
.venta__marco.is-listo .venta__cargando{display:none}

.venta__nota{
  margin-top:1.4rem;font-size:.6rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--t-3);line-height:2;
}

@media (max-width:820px){
  .venta{padding-top:calc(4.5rem + var(--pad-x));padding-bottom:10rem}
  .venta__marco{min-height:18rem}
}


/* ─────────────── 23. PÁGINAS DE DOCUMENTO ───────────────
   Plantilla tipográfica para upgrades, legales y textos largos: medida corta,
   interlineado generoso y nada que compita con la lectura. Sobre petróleo,
   así que hereda la rampa oscura ya verificada. */
.pag-doc{background:var(--petrol)}
.doc{
  --t-1:var(--tp-1); --t-2:var(--tp-2); --t-3:var(--tp-3);
  --line:var(--hair-cream); --ctrl:var(--ctrl-dark); --accent-text:var(--yellow);
  background:var(--petrol);color:var(--t-1);
  min-height:100svh;padding-block:calc(5.5rem + var(--pad-x)) var(--sec-y);
}
.doc__titulo{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.8rem,5.2vw,2.9rem);line-height:1;text-transform:uppercase;
  text-wrap:balance;
}
.doc__lede{margin-top:1.1rem;font-size:clamp(.95rem,1.6vw,1.06rem);
  line-height:1.75;max-width:60ch;color:var(--t-2)}
.doc__h2{margin-top:2.6rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.1rem,2.6vw,1.4rem);text-transform:uppercase;letter-spacing:.04em}
.doc__p{margin-top:.7rem;font-size:.92rem;line-height:1.8;max-width:62ch;color:var(--t-2)}
.doc__cierre{margin-top:2.8rem;font-size:.78rem;line-height:1.9;color:var(--t-3);max-width:60ch}

/* Aviso destacado. Keyline completo de 2px y no filete lateral: el borde de un
   solo lado es el tic más reconocible de interfaz generada, y aquí además el
   sistema ya tiene su propio lenguaje para llamar la atención —las celdas del
   countdown en estado urgente llevan exactamente este tratamiento—. */
.aviso{
  margin-top:1.8rem;padding:1.05rem 1.2rem;
  border:2px solid rgba(255,246,137,.5);border-radius:var(--r-md);
  background:rgba(255,246,137,.08);
  font-size:.9rem;line-height:1.75;color:var(--t-1);max-width:62ch;
}

/* Pasos numerados en columna, para leerse como instrucciones y no como cards */
.pasos-doc{margin-top:2.4rem;display:flex;flex-direction:column;gap:1.8rem}
.pasos-doc li{padding-left:3.4rem;position:relative;max-width:62ch}
.pasos-doc__n{
  position:absolute;left:0;top:-.15rem;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--accent-text);font-variant-numeric:tabular-nums;
}
.pasos-doc h2{font-family:var(--font-display);font-weight:800;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.05em}
.pasos-doc p{margin-top:.45rem;font-size:.9rem;line-height:1.78;color:var(--t-2)}
.pasos-doc .btn{margin-top:.9rem}

.doc .fwrap{margin-top:3rem;max-width:var(--w-form)}

/* Cuerpo de los documentos largos. Medida de 62ch e interlineado de 1.85: la
   plantilla legal de MAPPA (§4.10) usa 1.8 y aquí el texto es más denso. */
.doc__fecha{margin-top:.9rem;font-size:.6rem;font-weight:800;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--t-3)}
.doc__cuerpo{margin-top:2.6rem;max-width:64ch}
.doc__cuerpo h2{
  margin-top:2.8rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.1rem,2.8vw,1.45rem);line-height:1.1;text-transform:uppercase;
  letter-spacing:.03em;color:var(--t-1);
}
.doc__cuerpo h2:first-child{margin-top:0}
.doc__cuerpo h3{
  margin-top:1.9rem;font-size:.66rem;font-weight:800;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--accent-text);
}
.doc__cuerpo p{margin-top:1rem;font-size:.94rem;line-height:1.85;color:var(--t-2)}
.doc__cuerpo p strong{color:var(--t-1);font-weight:800}
.doc__cuerpo a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px}

/* Listas con la estrella del cartel como viñeta, en máscara sobre el acento */
.doc__lista{margin-top:1.2rem;display:flex;flex-direction:column;gap:.6rem}
.doc__lista li{
  position:relative;padding-left:1.5rem;
  font-size:.9rem;line-height:1.75;color:var(--t-2);
}
.doc__lista li::before{
  content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;
  background:var(--accent-text);
  -webkit-mask:url('../img/estrella-negra.svg') center/contain no-repeat;
          mask:url('../img/estrella-negra.svg') center/contain no-repeat;
}

/* ── Frase de arranque de un documento ──
   Lo primero que se lee en las condiciones y en la privacidad. En las condiciones
   ES la cláusula: comprar la entrada implica aceptarlas.
   Lo destacan la medida corta, el cuerpo mayor, el peso y la tinta al 100%. Tenía
   además un filete de acento a la izquierda y sobraba: cuatro señales para un
   párrafo son una de más, y la que menos aportaba era el filete. */
.doc__aviso{
  margin:0 0 .4rem;max-width:56ch;
  font-size:1rem;font-weight:600;line-height:1.7;color:var(--t-1);
}

/* ─────────────── 21 quater. 404 ───────────────
   Una sola página para todo el sitio, así que lleva los tres idiomas: el español
   completo y los otros dos reducidos a titular, frase y enlaces. No se ocultan
   los otros idiomas con JS: quien llega aquí puede venir de cualquier sitio y lo
   que necesita es una salida, no una detección de idioma que falle. */
.err404__codigo{
  margin:0 0 .6rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(3.4rem,14vw,7rem);line-height:.82;letter-spacing:-.02em;
  /* Contorno y no relleno: es un dato, no el mensaje. El mensaje es el titular. */
  color:transparent;-webkit-text-stroke:2px var(--ctrl-dark);
}
.err404__idioma + .err404__idioma{
  margin-top:clamp(2rem,5vw,2.8rem);padding-top:clamp(1.6rem,4vw,2.2rem);
  border-top:1px solid var(--line);
}
.err404__h2{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.1rem,3vw,1.5rem);line-height:1.05;text-transform:uppercase;
  color:var(--t-1);
}
.err404__p{margin:.7rem 0 0;font-size:.9rem;line-height:1.75;color:var(--t-2);max-width:54ch}
.err404__p b{color:var(--t-1);font-weight:800}
.err404__enlaces{margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.err404__enlaces--min{gap:.45rem;font-size:.85rem;font-weight:700;color:var(--t-3)}
.err404__enlaces--min a{color:var(--t-1);text-decoration:underline;text-underline-offset:3px}
.err404__enlaces--min a:hover{color:var(--accent-text)}

/* ── Lista numerada de las condiciones ──
   El número se pinta a mano con un contador porque los marcadores nativos no se
   pueden alinear con la rejilla tipográfica ni recibir la familia de titulares, y
   aquí cada punto se cita por su número (1.4, 1.6…). */
.doc__num{margin-top:1.3rem;padding:0;list-style:none;counter-reset:cond;
  display:flex;flex-direction:column;gap:1rem}
.doc__num li{counter-increment:cond;position:relative;padding-left:2.6rem;
  font-size:.92rem;line-height:1.8;color:var(--t-2)}
.doc__num li::before{
  content:'1.' counter(cond);position:absolute;left:0;top:.05em;
  font-family:var(--font-display);font-weight:800;font-size:.82rem;
  letter-spacing:.02em;color:var(--accent-text);font-variant-numeric:tabular-nums;
}

/* ── Tablas de cookies ──
   Una tabla de verdad y no una lista maquillada: son datos tabulares y un lector
   de pantalla tiene que poder anunciar «columna: duración». En móvil no se
   reordena a tarjetas —perdería la relación entre celda y cabecera—: se deja
   desplazar en su propio contenedor. */
.doc__tabla{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:1.2rem;width:100%;border-collapse:collapse;
  font-size:.82rem;line-height:1.6;
}
.doc__tabla thead th{
  padding:.55rem .8rem .55rem 0;text-align:left;vertical-align:bottom;
  font-size:.56rem;font-weight:800;letter-spacing:.2em;text-indent:.2em;
  text-transform:uppercase;color:var(--t-3);
  border-bottom:2px solid var(--line-strong);white-space:nowrap;
}
.doc__tabla td{
  padding:.75rem .8rem .75rem 0;vertical-align:top;color:var(--t-2);
  border-bottom:1px solid var(--line);
}
.doc__tabla td:first-child{color:var(--t-1);font-weight:700}
.doc__tabla td:last-child,.doc__tabla th:last-child{padding-right:0;white-space:nowrap}
.doc__tabla code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;
  /* Sin fondo de color: sobre petróleo cualquier relleno tenue baja el contraste
     por debajo de 4.5:1. El monoespaciado ya distingue el nombre técnico. */
  color:var(--t-1);
}

/* Botón dentro de un documento: reabrir el aviso de cookies desde la propia
   política, que es donde la gente va a buscarlo. */
.doc__accion{margin-top:1.5rem}
.doc__accion .btn{font-size:.68rem;padding:.75rem 1.3rem}

/* ─────────────── 21 bis. CONTACTO ───────────────
   Rejilla de bloques y no una columna de texto: aquí no se lee, se busca un dato
   concreto —el correo, la dirección, cómo llegar— y cada uno tiene que poder
   encontrarse de un vistazo. Dos columnas desde 700px; el mapa y los datos de la
   empresa ocupan el ancho entero. */
.contacto{
  margin-top:clamp(2.4rem,6vw,3.4rem);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.6rem,4vw,2.6rem);
}
.contacto__bloque--ancho{grid-column:1 / -1}
/* La dirección es el bloque más alto: ocupa las dos filas de su columna para que
   los dos cortos se apilen al lado en lugar de dejar un hueco muerto debajo. */
.contacto__bloque--doble{grid-row:span 2}
.contacto__h2{
  margin:0 0 .9rem;font-size:.6rem;font-weight:800;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--accent-text);
}
/* El correo es el elemento más importante de la página, así que va con la
   familia de titulares y se parte por donde toca en pantallas estrechas
   —`break-word` y no `anywhere`: un correo cortado en mitad del dominio no se
   puede leer en voz alta por teléfono—. */
.contacto__correo{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.05rem,3.4vw,1.5rem);line-height:1.15;
  color:var(--t-1);text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:5px;overflow-wrap:break-word;
  transition:color var(--d-hover)}
.contacto__correo:hover{color:var(--accent-text)}
.contacto__dir{margin:0;font-size:.92rem;line-height:1.85;color:var(--t-2)}
.contacto__dir b{color:var(--t-1);font-weight:800}
.contacto__dir--legal{font-size:.82rem;color:var(--t-3)}
/* Cuando la nota va ANTES del formulario y no después de un dato */
.contacto__nota--arriba{margin-top:0;margin-bottom:1.4rem}
.contacto__nota{margin:.9rem 0 0;font-size:.8rem;line-height:1.7;color:var(--t-3);max-width:46ch}
.contacto__enlaces{margin:.9rem 0 0;display:flex;flex-direction:column;gap:.45rem}
.contacto__enlaces a{
  font-size:.88rem;font-weight:700;color:var(--t-1);
  text-decoration:underline;text-underline-offset:3px;transition:color var(--d-hover)}
.contacto__enlaces a:hover{color:var(--accent-text)}
.contacto__enlaces i{display:inline-block;font-style:normal;
  transition:transform var(--d-hover) var(--ease-out)}
.contacto__enlaces a:hover i{transform:translate(3px,-3px)}
.contacto__enlaces--redes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem}

/* Mapa. aspect-ratio y no altura fija: reserva el hueco antes de que el iframe
   cargue, así no hay salto de layout (CLS) cuando entra. */
.mapa{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:2px solid var(--line-strong);border-radius:var(--r-md);
  background:var(--petrol-deep);
}
/* El respaldo vive debajo del iframe y sólo se ve si el iframe no pinta nada. */
.mapa__respaldo{
  position:absolute;inset:0;z-index:0;display:grid;place-items:center;
  padding:1.2rem;text-align:center;
  font-size:.8rem;font-weight:700;color:var(--tp-2);
  text-decoration:underline;text-underline-offset:3px;
}
.mapa__marco{position:relative;z-index:1;display:block;width:100%;height:100%;border:0;
  /* El mapa de OSM es claro y sobre petróleo canta. Se le baja un punto el
     brillo y la saturación para que se integre sin dejar de ser legible. */
  filter:saturate(.82) contrast(1.04) brightness(.96)}

@media (max-width:700px){
  .contacto{grid-template-columns:1fr}
}

/* ─────────────── 21 ter. AVISO DE ESTADO ───────────────
   Bloque para decir "esto todavía no está abierto" sin que parezca un error.
   Lo usa /pre-recarga/ mientras no exista el widget: la página antigua se
   quedaba en "Comprobando disponibilidad…" y eso sí parecía roto. */
.aviso{
  margin-top:clamp(2rem,5vw,2.8rem);padding:clamp(1.3rem,3.5vw,1.9rem);
  border:2px solid var(--cream);border-radius:var(--r-md);
  background:var(--petrol-deep);
}
.aviso__kicker{margin:0 0 .7rem;font-size:.58rem;font-weight:800;letter-spacing:.24em;
  text-indent:.24em;text-transform:uppercase;color:var(--yellow)}
.aviso__texto{margin:0;font-size:.95rem;line-height:1.75;color:var(--t-1);max-width:52ch}
.aviso__acciones{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* ─────────────── 22. EDICIONES PASADAS ───────────────
   Índice. Cada edición entra por su foto, que es lo único que cuenta de verdad
   lo que fue; el texto sólo la identifica. */
.fichas{
  margin-top:clamp(2.4rem,6vw,3.4rem);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,1.6rem);
}
.fichas__ficha{
  display:flex;flex-direction:column;gap:.85rem;
  /* El keyline aparece al pasar por encima: en reposo la foto ya delimita la
     tarjeta y un borde permanente convierte la rejilla en una cuadrícula de
     cajas en lugar de una serie de imágenes. */
  transition:transform var(--d-med) var(--ease-out);
}
.fichas__foto{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/5;border-radius:var(--r-md);
  border:2px solid var(--line);background:var(--petrol-deep);
  transition:border-color var(--d-hover);
}
.fichas__foto img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease-out),filter var(--d-med);
  /* Un punto por debajo en reposo: al pasar por encima la foto se despierta, y
     eso es lo que dice cuál está seleccionada sin añadir ningún adorno. */
  filter:saturate(.9) brightness(.88);
}
.fichas__ficha:hover{transform:translateY(-4px)}
.fichas__ficha:hover .fichas__foto{border-color:var(--cream)}
.fichas__ficha:hover .fichas__foto img{transform:scale(1.045);filter:none}
.fichas__ficha:focus-visible{outline:none}
.fichas__ficha:focus-visible .fichas__foto{border-color:var(--yellow);
  box-shadow:0 0 0 3px var(--petrol),0 0 0 6px var(--yellow)}
.fichas__pie{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.fichas__titulo{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1rem,2.4vw,1.3rem);line-height:1;text-transform:uppercase;
  letter-spacing:.02em;color:var(--t-1);
}
.fichas__meta{font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--t-3);white-space:nowrap}
.fichas__nota{margin-top:clamp(2rem,5vw,2.8rem);font-size:.78rem;line-height:1.7;
  color:var(--t-3);max-width:56ch}

/* ── Ficha de una edición: line-up al lado del cartel ── */
.edicion{
  margin-top:clamp(2.2rem,5vw,3rem);
  display:grid;grid-template-columns:1fr minmax(0,270px);
  gap:clamp(1.6rem,4vw,2.6rem);align-items:start;
}
.edicion__lineup{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.05rem,2.6vw,1.4rem);line-height:1.3;
  color:var(--t-1);text-wrap:pretty;
}
.edicion__extra{margin:1.1rem 0 0;font-size:.88rem;line-height:1.75;color:var(--t-2);max-width:52ch}
.cartel{margin:0}
/* padding y background a cero: es un <button> y el navegador le pone 1px 6px de
   relleno, que descuadraba el cartel respecto a la columna del line-up. */
.cartel__boton{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.cartel__boton img{
  display:block;width:100%;height:auto;border-radius:var(--r-sm);
  border:2px solid var(--line);transition:border-color var(--d-hover),transform var(--d-med) var(--ease-out);
}
.cartel__boton:hover img{border-color:var(--cream);transform:translateY(-3px)}

/* ── Rejilla de fotos ──
   Filas de alto fijo y las verticales ocupando dos: así una foto vertical se ve
   entera en lugar de recortada por la cintura, sin necesidad de masonry ni de
   medir nada con JS. */
.galeria{
  margin-top:clamp(2.4rem,6vw,3.4rem);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));
  grid-auto-rows:172px;gap:clamp(.5rem,1.4vw,.9rem);
}
.galeria__celda{
  position:relative;overflow:hidden;padding:0;border:0;cursor:zoom-in;
  border-radius:var(--r-sm);background:var(--petrol-deep);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
  /* --i lo pone visor.js con la posición dentro de la fila: la cascada entra por
     filas y no foto a foto, porque 18 fotos escalonadas de una en una tardan
     tres segundos y para entonces ya has bajado. */
  transition-delay:calc(var(--i,0) * 90ms);
}
.galeria__celda.is-in{opacity:1;transform:none}
.galeria__celda--alta{grid-row:span 2}
.galeria__celda img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease-out),filter var(--d-med);
  filter:saturate(.92) brightness(.92);
}
.galeria__celda:hover img{transform:scale(1.05);filter:none}
.galeria__celda:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.galeria__volver{margin:0 0 1.6rem}
.galeria__volver a{font-size:.62rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--t-3);transition:color var(--d-hover)}
.galeria__volver a:hover{color:var(--t-1)}
.galeria__cta{margin-top:clamp(2rem,5vw,2.6rem)}

/* ── Visor ──
   Capa sobre toda la página. Por detrás hay fotos y un cartel muy claro, y con
   la tinta a un 97% seguían leyéndose el titular y el line-up por debajo, lo que
   convertía el fondo en ruido justo alrededor de la foto que se quiere mirar.
   Se resuelve con desenfoque en lugar de subiendo la opacidad: el fondo deja de
   competir sin dejar de ser una capa por encima, que es lo que hace entender que
   se cierra y se vuelve. Mismo material que el nav y el dock. */
.visor{
  position:fixed;inset:0;z-index:160;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(.75rem,3vw,2.5rem);
  background:rgba(35,32,33,.9);
  -webkit-backdrop-filter:blur(22px) saturate(.6);
          backdrop-filter:blur(22px) saturate(.6);
  opacity:0;transition:opacity .26s linear;
}
/* Sin soporte de backdrop-filter no hay desenfoque, así que ahí sí hace falta
   que la tinta tape del todo. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .visor{background:var(--ink)}
}
.visor.is-open{opacity:1}
body.visor-abierto{overflow:hidden}
.visor__lienzo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0;
}
.visor__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;border-radius:var(--r-sm);
  opacity:0;transform:scale(.985);
  transition:opacity .3s linear,transform .4s var(--ease-out);
}
.visor__img.is-lista{opacity:1;transform:none}
.visor__cerrar,.visor__nav{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:44px;height:44px;border-radius:var(--r-pill);
  border:2px solid var(--ctrl-dark);background:rgba(35,32,33,.72);
  color:var(--cream);cursor:pointer;
  transition:background-color var(--d-hover),border-color var(--d-hover),transform var(--d-hover);
}
.visor__cerrar:hover,.visor__nav:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.visor__cerrar:focus-visible,.visor__nav:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.visor__cerrar{top:clamp(.75rem,3vw,1.6rem);right:clamp(.75rem,3vw,1.6rem)}
.visor__cerrar span{position:absolute;width:16px;height:2px;background:currentColor}
.visor__cerrar span:first-child{transform:rotate(45deg)}
.visor__cerrar span:last-child{transform:rotate(-45deg)}
.visor__nav{top:50%;margin-top:-22px;font-size:1.6rem;line-height:1;padding-bottom:4px}
.visor__nav--prev{left:clamp(.5rem,2vw,1.6rem)}
.visor__nav--next{right:clamp(.5rem,2vw,1.6rem)}
.visor__contador{
  position:absolute;bottom:clamp(.6rem,2.5vw,1.4rem);left:0;right:0;margin:0;
  text-align:center;font-size:.58rem;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tp-3);font-variant-numeric:tabular-nums;
}

@media (max-width:820px){
  .fichas{grid-template-columns:1fr}
  .fichas__foto{aspect-ratio:16/10}
  .edicion{grid-template-columns:1fr}
  /* El cartel primero en móvil: es la imagen, y el line-up se lee mejor debajo */
  .cartel{order:-1;max-width:280px}
}
@media (max-width:520px){
  .galeria{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:132px}
  .visor__nav{width:38px;height:38px;margin-top:-19px}
}
@media (prefers-reduced-motion:reduce){
  .galeria__celda{opacity:1;transform:none;transition-delay:0s}
  .visor__img{transition-duration:.01ms}
}

@media (max-width:820px){
  .doc{padding-top:calc(4.5rem + var(--pad-x));padding-bottom:10rem}
  .pasos-doc li{padding-left:2.8rem}
}