/* ══════════════════════════════════════════════════════════════════
   Feat · sistema de diseño compartido (web pública: / y /carta)
   Tokens canónicos + componentes comunes. Lo específico de cada página
   vive inline en su <head>. El Club (/club/) tiene tema propio inline.
   ══════════════════════════════════════════════════════════════════ */
/* fuentes autohospedadas (subset latin, variables): sin terceros en la ruta crítica */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/cinzel-var.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk-var.woff2) format('woff2')}
/* (2 nov, Nacho: «sí, publícala») Feat Titular, la letra sacada del logo con DaVinci
   (assets/fuente/LEEME.md). Un solo peso: el rango 100-900 evita que el navegador la
   engorde a mano cuando un título pide 600 o 700. Lo que no tiene lo pinta Cinzel. */
@font-face{font-family:'Feat Titular';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/feat-titular.woff2) format('woff2')}
/* La arroba, las flechas y las comillas inglesas no están en Feat Titular: en vez de la
   Cinzel de detrás (su @ es una A en un círculo), las pinta Hanken dentro de la misma
   familia. Va después a propósito: el navegador mira primero la última declarada. */
@font-face{font-family:'Feat Titular';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/hanken-grotesk-var.woff2) format('woff2');unicode-range:U+0040,U+2190-21FF,U+201C-201E}
/* (31 oct, sistema v2) Marcellus se retira: h3 y nombres van en Cinzel 500 (.t3),
   lemas y entradillas en Hanken. prueba-sistema.mjs no deja que vuelva. */
:root{
  /* alto de la cabecera: 68px a cualquier ancho desde que se fue la cinta de
     obras (31 oct). Ya no lo mide nadie: es fijo. */
  --cabecera:4.25rem;
  /* ── LAS TRES SUPERFICIES (2 ago) ──────────────────────────────────────
     carbón es el FONDO base y no se toca: #2B241E es el color canónico de la
     marca. carbón-2 son las superficies ELEVADAS (secciones alternas, tarjetas,
     menús, diálogos) y carbón-3 el hueco PROFUNDO (cierre, marco de las fotos).

     Antes: carbón 1,87% de luminancia · carbón-2 1,23% · carbón-3 0,42%. O sea
     los tres en una franja de 1,5 puntos, con un contraste ENTRE superficies de
     1,10 y de 1,14 entre una tarjeta y su fondo. Todo era el mismo casi-negro y
     lo único que separaba las piezas eran filetes de 1px: eso es lo que se leía
     como "falta de luz", que en realidad era falta de RECORRIDO TONAL — el texto
     ya cumplía AA de sobra (crema 13,58, humo 6,10, trigo 5,80).

     Y estaba INVERTIDO: carbón-2 vestía lo elevado y era más oscuro que el
     fondo. Un material elevado recibe más luz, no menos. Ahora el escalón
     base→elevado es de +7,1 puntos de L*, antes era de −4,3.

     No subir también el base: se probó #332B23 y el trigo de los .rotulo caía a
     4,30, por debajo de AA. El recorrido se gana por arriba, no por abajo. */
  --carbon:#2B241E; --carbon-2:#3C332A; --carbon-3:#1A1511;
  --crema:#F7F1E4; --arena:#EFE5D0;
  --terracota:#C4592B; --terracota-cl:#D9713F; --terracota-d:#A34620;
  /* (2 nov, Nacho: «oscurece el naranja de los botones lo que necesite») El FONDO
     del botón primario: con crema encima da 4,62:1 (AA pide 4,5; #C4592B daba 3,88).
     Un punto más hondo que la marca, que sigue en --terracota para todo lo demás.
     Al pasar el ratón, más hondo aún (--terracota-d, 5,4:1): aclarar lo bajaba a 2,9. */
  --terracota-boton:#B34E26;
  --trigo:#C9973B; --egeo:#2F5D7C; --oliva:#7C8A4D;
  /* (1 sep, auditoría) --piedra se USABA en dos hojas sin estar declarada:
     var() inválido y el color caía al heredado. El valor es el del canon. */
  --piedra:#7A6F5E;
  /* humo .62→.70 y línea .14→.17: con las superficies más claras, los valores
     viejos volvían a fundirse con el fondo y perdíamos lo ganado. */
  --humo:rgba(247,241,228,.70); --linea:rgba(247,241,228,.17);
  --z-nav:30; --z-fab:40;

  /* ── MOTION (6 ago) ────────────────────────────────────────────────────
     Había UNA curva y luego `ease` genérico suelto en varias transiciones, que
     es el ease-in-out del navegador: arranca lento, y en un cambio de estado
     eso se siente como retardo. Dos curvas, las dos de SALIDA:
       --exp  entradas y desplazamientos (lo que llega de fuera)
       --sal  cambios de estado en el sitio (color, fondo, ancho de un punto)
     Nada de rebote ni elástico: esta marca es piedra, no goma. */
  --exp:cubic-bezier(.16,1,.3,1);
  --sal:cubic-bezier(.25,1,.5,1);

  /* ── ESPACIADO (6 ago) ─────────────────────────────────────────────────
     Medido: las secciones de la portada tenían 72, 65, 79, 65 y 79px de
     relleno — cinco valores para la misma decisión, cada sección con su
     clamp() inventado. Eso no se ve como error, se siente como descuido.
     Una escala, y el ritmo se elige DENTRO de ella. */
  --e1:.5rem; --e2:.75rem; --e3:1rem; --e4:1.5rem; --e5:2rem; --e6:3rem;
  /* Escala tipográfica: un solo tamaño para los titulares de sección, para que
     el escalón entre el h1 del hero y ellos se lea de verdad. */
  /* (2 sep, barrido de Nacho: «unificar tipografías») El token pasa a ser LA
     escala real de titular de sección: mapa, faq, cierre, cápsulas y el Club
     leen de aquí. El valor es el del lenguaje nuevo (portal/cápsulas). */
  --t-seccion:clamp(1.8rem,3.6vw,2.5rem);
  /* La cifra: manda DENTRO de su tarjeta (2,3 veces el cuerpo de al lado) pero
     por debajo del titular de su sección. Un dato de apoyo no puede pesar como
     el titular de la página — iba a 54px, lo mismo que el h1 del hero. */
  --t-cifra:clamp(1.9rem,3.1vw,2.3rem);
  --aire:clamp(3.5rem,8vh,5.5rem);        /* respiración normal de sección */
  --aire-largo:clamp(5rem,12vh,7.5rem);   /* la que abre capítulo */

  /* ── EL SISTEMA v2 (31 oct, design_handoff_sistema_feat) ─────────────────
     Dos familias, siete tamaños, tres radios, tres anchos. En web/ no se escribe
     un font-size, un border-radius ni un color que no salga de aquí: lo vigila
     scripts/prueba-sistema.mjs. --trigo-cl (#F2D48A) NO vive aquí: es solo de
     /club y lo declara su página (decisión 4A). */
  --aviso:#F09077;                  /* SOLO texto de error (3B) */
  /* (2 nov) Títulos, nombres y cifras en Feat Titular; las etiquetas pequeñas en
     mayúsculas espaciadas siguen en Cinzel, que se lee mejor a 12-13 px. */
  --f-display:'Feat Titular','Cinzel',serif;
  --f-etiqueta:'Cinzel',serif;
  --f-texto:'Hanken Grotesk',system-ui,sans-serif;
  --t1:clamp(2.2rem,5vw,3.4rem);    /* h1 · Feat Titular 600 */
  --t2:clamp(1.8rem,3.6vw,2.5rem);  /* h2 de sección y cifras · Feat Titular 600 */
  --t3:1.3rem;                      /* h3, nombre de plato, diálogo · Hanken 600 (el plato, en Feat Titular) */
  --t4:1.15rem;                     /* entradilla · Hanken */
  --t5:1rem;                        /* cuerpo */
  --t6:.88rem;                      /* nota, pie, ayuda de campo · MÍNIMO de lectura */
  --t7:.8rem;                       /* rótulo (Cinzel 700) y etiqueta de campo */
  /* (3 nov, la B) El título de una ventana (la hoja): Hanken 700, entre t3 y t2. Nacho:
     «las letras se ven anticuadas y pequeñas»; a t3 el título de la caja era como una tarjeta. */
  --t-ventana:1.6rem;
  --r-campo:10px;                   /* campos, chips, botones cuadrados */
  --r-tarjeta:18px;                 /* tarjetas, diálogos, menús, fotos */
  --r-pildora:999px;                /* CTA, avatares, píldoras, círculos */
  --gutter:clamp(1.25rem,3.2vw,3rem);
  --ancho-web:none;                 /* 6B, cerrada el 31 oct: pantalla completa (Nacho) */
  --ancho-lectura:46rem;
  --ancho-ficha:34rem;
  --marco:rgba(201,151,59,.3);      /* borde de foto y filete del cierre (v3) */
  --marco-fuerte:rgba(201,151,59,.5);
}
/* (9 ago) El aire entre secciones, a escala móvil: el mínimo de 5rem de
   --aire-largo estaba pensado para escritorio y en pantalla estrecha acumulaba
   aire muerto entre bloques (medido: hasta 160px seguidos de nada). Un cambio
   de token y las once páginas respiran igual. */
@media(max-width:900px){:root{--aire:clamp(2.5rem,6vh,4rem);--aire-largo:clamp(3rem,8vh,5rem)}}

/* (11 sep) Aquí vivió la vista previa ?look=sf (la dirección superfuüd,
   descartada el 2 ago). Se fue con su activador de /club/index.html. */

/* (2 ago) Aquí vivió el bloque de vista previa [data-luz]. Sus valores son ya
   los tokens de :root y los focos cálidos viven en el <head> de index.html,
   junto a las secciones que visten. El activador ?luz se ha retirado de las
   13 páginas: ya no hay nada que previsualizar. */
*{margin:0;padding:0;box-sizing:border-box}

/* ── ENLACES DENTRO DEL TEXTO (18 ago) ───────────────────────────────────────
   30 enlaces del sitio salian en el AZUL POR DEFECTO del navegador (#0000EE):
   todos los de dentro de un parrafo — la privacidad, el aviso legal, las
   condiciones, el pie de /cuenta. Nadie los habia mirado porque no rompen nada,
   pero son la unica parte de Feat pintada por Chrome y no por nosotros.
   El color NO va en el texto: `--terracota` se queda en 3,50 sobre carbon y en
   3,88 sobre crema, o sea que no llega a AA en NINGUNO de los dos fondos. Y un
   token que cambie con el tema es justo la trampa que ya ha mordido tres veces
   (trigo sobre crema). Asi que el texto conserva el contraste que ya tenia —
   hereda— y la marca la pone el SUBRAYADO, que al no ser texto no debe cumplir
   ese minimo. Funciona igual en tema claro y oscuro sin voltear nada.
   Acotado a `a:not([class])` dentro de prosa: cualquier enlace con clase manda
   sobre esto, asi que ningun componente cambia. */
:where(p, li, td, dd, figcaption) a:not([class]){
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--terracota);
  text-decoration-thickness:.09em;
  text-underline-offset:.2em;
}
:where(p, li, td, dd, figcaption) a:not([class]):hover{text-decoration-color:currentColor}
/* Va AQUI ARRIBA y no al final a proposito: comparte especificidad (0,1,1) con
   reglas de componente como `.consent a` o `.wa a`, asi que si fuera despues
   ganaria por orden y les robaria su color — paso: dos enlaces de /empresas que
   estaban en trigo a proposito se volvieron crema. Una base se declara antes;
   el componente que venga despues manda. */

/* ── `hidden` GANA SIEMPRE (15 ago) ─────────────────────────────────────────
   El atributo `hidden` del navegador vale `display:none` con especificidad de
   ETIQUETA (0,0,1), así que cualquier `display` puesto desde una CLASE (0,1,0)
   le gana. El JS pone `el.hidden = true`, el elemento SIGUE EN PANTALLA y no
   hay ningún error: solo un dato de relleno a la vista.
   Ha mordido CUATRO veces: las dos puertas del alta visibles junto a los
   campos, el botón "Volver" en el primer paso, la píldora de Google apagada y
   —la que vio Nacho— un CERO enorme en dorado presidiendo su alta, porque el
   marcador de zona nace con "0" dentro y `hidden` puesto.
   Se venía parcheando con una guarda `SELECTOR[hidden]` por cada caso, y esa
   partida no se gana: hay que acordarse cada vez. Una línea aquí la cierra
   entera. El `!important` es el punto: si algo lleva `hidden`, se esconde, y no
   hay clase que discuta. Un elemento que quiera verse, que no lleve `hidden`. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--carbon); color:var(--crema);
  font-family:'Hanken Grotesk',system-ui,sans-serif; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto es obligatorio: sin él, el atributo height="900" del HTML gana
   al aspect-ratio del CSS y las fotos salen estiradas en vertical. */
img{max-width:100%;height:auto;display:block}
::selection{background:var(--terracota);color:var(--crema)}
:focus-visible{outline:2px solid var(--trigo);outline-offset:3px;border-radius:2px}
/* ── EL ANCHO DE LA WEB (3 ago, Nacho) ─────────────────────────────────────
   "parece que en algunas pantallas metes un espaciado y en otras no. Prefiero
   todo a pantalla completa y por tanto el margen que sea el de la pantalla.
   Aplica esto para todo en toda la web."

   Antes: `width:min(100% - 2.5rem, 1180px)` centrado. En un monitor de 2000px
   eso dejaba 410px de vacío a cada lado y la web parecía una columna flotando;
   en uno de 1200 casi tocaba los bordes. Dos comportamientos distintos según la
   pantalla, que es justo lo que se notaba como "a veces sí y a veces no".

   Ahora: SIEMPRE todo el ancho, y el margen es un gutter que crece con la
   pantalla (20px en móvil, hasta 48 en escritorio). Un solo comportamiento.
   Los bloques de TEXTO largo conservan su propio `max-width` en ch — el ancho
   de la web puede ser el de la pantalla, pero una línea de 2000px no se lee. */
/* (31 oct, decisión 6B) El sistema v2 propuso un tope de 82rem centrado; Nacho
   lo probó y elige PANTALLA COMPLETA, como el 3 ago. --ancho-web vale none: el
   gutter sigue creciendo con la pantalla y el texto corrido guarda su medida. */
.wrap{width:100%;max-width:var(--ancho-web);box-sizing:border-box;padding-inline:var(--gutter);margin-inline:auto}
.wrap--lectura{max-width:var(--ancho-lectura)}
.wrap--ficha{max-width:var(--ancho-ficha)}
/* (30 jul) line-height 1.06 -> 1.00. En superfuud.es —la referencia que puso Nacho—
   el display va a 1,00 exacto: las lineas se apilan y el titular se lee como un
   BLOQUE, no como un parrafo. Es lo que mas se nota de su tipografia, y es lo unico
   de ella que se puede copiar sin tocar la nuestra: Cinzel se queda (identidad
   registrada) y el tracking POSITIVO tambien, que es lo que la hace inscripcion
   romana — el suyo es negativo porque es una grotesca. */
.inscrip{font-family:var(--f-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;line-height:1;text-wrap:balance}
/* ─────────── rótulo de franja: UNA sola pieza en toda la web ───────────
   Había cuatro variantes sueltas (.rotulo, .kicker, .tablon__eti, .zona-eti), casi
   todas a .7rem, que no se leían. Las demás clases son alias de esta.
   (1 nov, Nacho: «¿por qué el tipo de letra de las secciones es diferente?») El
   rótulo iba a t4 (18 px) y las pestañas y la etiqueta de guía a t7 (13 px), con
   tres espaciados distintos. Ahora las tres son LA ETIQUETA (DOGMA D13): Cinzel
   700, t7 (el token que dice «rótulo»), .2em, mayúsculas. */
.zona-eti,.rotulo,.kicker,.tablon__eti{
  font-family:'Cinzel',serif;font-size:var(--t7);font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--trigo);display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem}
.zona-eti::after,.rotulo::after,.kicker::after,.tablon__eti::after{
  content:'';flex:1;height:1px;max-width:7rem;
  background:linear-gradient(90deg,rgba(201,151,59,.5),transparent)}
/* en tema claro el trigo sobre crema no tiene contraste: manda la terracota oscura */
/* ── Centrados cuando la franja va centrada (2 ago) ──────────────────────
   La lista apuntaba a `.entrar-portal .kicker` y `.banda .zona-eti`, dos alias
   que en /club/ ya no se usan: al unificarlo todo en .rotulo, esas dos reglas
   dejaron de casar y los rótulos se quedaron a la izquierda bajo un titular
   centrado. Y faltaba `.ganas__cab`, que llevaba el desajuste desde antes:
   "BENEFICIOS" colgando a la izquierda con "Beneficios del Club." centrado.
   El filete degradado se apaga en los centrados: al centrar, la línea sale de
   un solo lado y descuadra la etiqueta. */
.quees__cab .rotulo,.entrar-portal .rotulo,.banda .rotulo,.ganas__cab .rotulo,.caps__cab .rotulo{justify-content:center}
.quees__cab .rotulo::after,.entrar-portal .rotulo::after,.banda .rotulo::after,.ganas__cab .rotulo::after,.caps__cab .rotulo::after{display:none}
/* (3 sep, Nacho: «todo tema oscuro») Aquí vivía el TEMA CLARO entero: el
   remapeo de tokens del atributo data-tema y ~50 reglas de nav, footer,
   rótulos y portales en crema. /cuenta y el marco de /poster pasaron a carbón
   y ya no queda NINGUNA página clara; solo la lámina imprimible del póster,
   que es papel y va en literales propios. Si el claro vuelve, se recupera de
   git. Los comentarios históricos de abajo cuentan bugs de esa era. */
/* (15 ago, Nacho: "la vista móvil del club sigue sin verse bien") ESTA REGLA
   ERA LA CULPABLE. Pintaba el fondo crema en `.nav` A SECAS, o sea SIEMPRE,
   saltándose el mecanismo que el resto de la web ya usa: `.nav` nace
   transparente y el fondo lo trae `.nav--puesta` al bajar. Resultado en el
   Club, que tiene foto a sangre: una plancha crema opaca de 117px —el 18% de
   un iPhone 13 mini— tapando la portada, y encima la cinta de obras justo
   arriba: DOS bandas claras antes de ver la foto.
   Ahora el fondo llega cuando toca. En páginas SIN foto a sangre (/cuenta) la
   barra sigue sólida desde el principio, que es lo que allí hace falta: no hay
   imagen debajo y una barra flotando sobre texto se lee peor. */
/* (22 ago, la captura de Nacho en /cuenta) La barra iba al 94% TAMBIEN en las
   paginas claras sin foto, y ese 6% de transparencia era el fantasma que el vio:
   el titulo "Cerrar sesion en todos los dispositivos" leyendose a traves de la
   barra al hacer scroll. En una pagina sin imagen debajo no hay nada que dejar
   intuir — la barra va OPACA. El cristal del 94+blur queda solo para cuando hay
   foto (nav--puesta sobre hero a sangre), que es donde gana algo a cambio. */
/* (1 sep, auditoría) El menú abierto no tenía variante clara: en tema claro la
   barra se ponía en cristal carbón sobre el panel crema. Mismos valores que
   su .nav--puesta de aquí arriba. */
/* Sobre la foto, CRISTAL en vez de plancha: se lee la barra y se intuye la
   imagen debajo. El .62 no es estético, es el mínimo que aguanta: medido contra
   el percentil 5 de la franja de foto que queda bajo la nav (L=0,008 — los
   olivos en sombra), con el velo claro de la portada ya aplicado, los enlaces
   dan 8,9:1 y el logo 3,0:1. Con menos velo el texto se cae. */
/* (22 ago, Nacho: "quiero que la barra del club se comporte igual que en el
   resto"). Tenia razon en que NO se comportaba igual: aqui llevaba un cristal
   crema al 62% SIEMPRE, tambien arriba del todo, mientras el resto de paginas
   flota transparente y solo gana superficie al bajar. El cristal existia por
   contraste (la foto de la cala es clara), pero la superficie no tiene por que
   ponerla LA BARRA: la pone el HERO, que es la receta de la portada oscura — su
   foto lleva el velo y la nav flota limpia. El lavado crema de la franja alta
   del hero del club se refuerza (en su pagina) y esta regla pasa a transparente. */
/* La cinta de obras no llegaba con el cristal: su terracota se quedaba en 4,2:1
   y a 12px pide 4,5. Y no se arregla con un poco más de velo — sobre crema el
   #A34620 tiene un techo de ~4,6, así que necesita crema CASI PURA debajo.
   Se le da: son 35px de barra de estado, no de foto. El reparto queda en 35px
   sólidos + 82px de cristal, en vez de los 117px de plancha de antes. */
/* .72 de opacidad sobre crema: las secciones solo se leían al pasar el ratón. Texto sólido. */
/* El pie iba al 60% sobre crema: 3,98, por debajo de 4,5. Al 72% sube a 5,76. */
/* (2 ago) El avatar de la cuenta iba en trigo sobre crema: 2,34 de contraste a
   16px. Es la inicial de tu nombre y el único acceso a tu cuenta en /club/ y
   /cuenta, o sea de lo último que debería costar leerse. Mismo arreglo que el
   resto del tema claro: terracota oscura (5,75). */
/* (26 ago) Las tres guias del pie: una linea flexible encima de la legal.
   El color lo dan `footer a` y su variante de tema claro — cero reglas nuevas
   de color. width:100% la fuerza a su propia fila dentro del flex del wrap. */
/* (11 sep) El enlace activo de la nav: carta y empresas lo tenían cada una en su
   <style> y /club ponía aria-current sin regla, así que allí no se veía. Una vez. */
.nav__links a[aria-current="page"]{color:var(--trigo)}
/* (11 sep) El rótulo con sello: el dibujo que lleva /club (emblema de 22 px en vez del
   filete). Compartido para que /cuenta y las pantallas del socio se lean como el Club. */
.rotulo--sello{display:flex;align-items:center;gap:.55rem}
.rotulo--sello::after{display:none}
.rotulo--sello::before{content:"";width:22px;height:22px;border-radius:50%;flex:none;background:url(/img/insp/emblema-carbon.webp) center/cover;border:1px solid rgba(196,89,43,.4)}

/* (31 oct, ronda 3) Aquí vivía .obras, la cinta «Todavía no repartimos». Se fue de
   las 12 páginas: el pre-lanzamiento se cuenta en el carrito, las FAQ y el cierre. */
/* ─────────── cabecera con menú (liquid glass) ─────────── */
/* ── LA BARRA APARECE AL SUBIR (3 ago, Nacho) ──────────────────────────────
   "la barra superior con fondo debe aparecer con el scroll hacia arriba; cuando
   se entra y cuando se baja no debe estar (estilo superfuud.es), así queda más
   limpio."
   (5 ago) DOS estados, y los pone miembro.js con UNA clase:
     · arriba del todo (sin clase)   → transparente, sin borde ni sombra. El hero
       se ve entero desde el primer píxel, que es de lo que se trata. Encima
       flotan el logo, el CTA y la hamburguesa, que están SIEMPRE.
     · al bajar (.nav--puesta)       → aparece la barra, con su fondo, su cristal
       y sus cifras.
   Antes eran tres, y el tercero retiraba la cabecera ENTERA al bajar: te
   quedabas sin logo ni menú justo mientras leías. Fuera.
   El fondo va en `.nav--puesta` y no en `.nav`: si estuviera siempre, al entrar
   habría una banda oscura sobre la foto del bowl. */
/* ── LA CABECERA FLOTA, NO EMPUJA (5 ago, Nacho) ───────────────────────────
   "Al quitar la barra, las imágenes de fondo del inicio deberían verse hasta
   arriba del todo." Iba en `sticky`, así que aunque fuera transparente seguía
   OCUPANDO su hueco en el flujo y empujaba el hero ~68px hacia abajo: quedaba
   una banda muerta encima de la foto. Con `fixed` sale del flujo y la foto
   nace en y=0, con el logo y la hamburguesa flotando encima.
   Lo que antes descontaba el hero (`--cabecera`) ya no hay que descontarlo:
   ver `.hero` más abajo. Las páginas que NO son la portada recuperan el hueco
   con un `padding-top` en su primer bloque (`.nav-hueco`). */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  background:transparent;border-bottom:1px solid transparent;
  transition:transform .32s var(--exp),background .28s ease,
             border-color .28s ease,box-shadow .28s ease;
}
/* La cinta de obras vive DENTRO de `<header class="nav">` en las 13 páginas
   (el 5 ago se metieron las dos que la tenían suelta), así que cabecera y cinta
   son UNA sola pieza fija y no hay que sincronizar dos alturas.
   El precio de sacarla del flujo: quien iba debajo se le mete por detrás. La
   portada lo QUIERE (la foto a sangre); el resto recupera el hueco solo, sin
   número mágico, con `main{padding-top}` en su propia página… salvo que lleve
   `.hero-a-sangre`, que es como la portada declara que la foto manda. */
body:not(.hero-a-sangre) main{padding-top:var(--cabecera)}
.nav--puesta{
  background:rgba(43,36,30,.62);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom-color:rgba(247,241,228,.1);
  box-shadow:inset 0 1px 0 rgba(247,241,228,.06);
}
/* (5 ago) `.nav--fuera` retirado con su JS: la cabecera ya no se va nunca —
   el logo, el CTA y la hamburguesa tienen que estar siempre (orden de Nacho). */
/* Con el menú abierto la barra NUNCA se retira ni se queda transparente: el
   panel cuelga de ella y se iría con él. */
.nav.abierto{transform:none;background:rgba(43,36,30,.62);
  backdrop-filter:blur(18px) saturate(1.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);
  border-bottom-color:rgba(247,241,228,.1)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
/* Sin JS la barra se comporta como siempre: opaca y fija. Si no, quien tenga el
   JS bloqueado se queda con una barra transparente sobre la foto. */
html:not(.js) .nav{background:rgba(43,36,30,.62);border-bottom-color:rgba(247,241,228,.1)}
/* (10 ago, horda sin-JS) Los vídeos de fondo solo se encienden con JS
   (motion.js les pone el src). Sin JS, Chromium pinta la CAJA del <video>
   vacío en NEGRO encima de la foto — el hero salía como una banda oscura con
   controles fantasma. Sin JS, fuera el vídeo: la foto ya está debajo. */
html:not(.js) video[data-fondo]{display:none}
/* `margin-left:auto` en el CTA: empuja Únete y la hamburguesa contra el margen
   derecho y deja el logo solo a la izquierda. Antes iba en `.nav__links`, que
   ahora es un panel absoluto y ya no cuenta en el reparto — por eso los tres se
   quedaban apelotonados a la izquierda. */
.nav .wrap{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
/* ── LAS TRES CIFRAS DE LA BARRA (3 ago, Nacho) ────────────────────────────
   Centradas de verdad —`position:absolute` + `left:50%`— y no "en medio de lo
   que quede": con flex, el centro se movería según lo que ocupen el logo y el
   CTA, y bailaría entre páginas según si hay avatar o no.
   Sutiles a propósito: acompañan, no compiten. La cifra en trigo y la palabra
   en humo, a 0,72rem. */
.nav__cifras{
  position:absolute;left:50%;translate:-50% 0;
  display:flex;gap:1.6rem;align-items:baseline;white-space:nowrap;
  font-size:.82rem;letter-spacing:.04em;color:var(--humo);pointer-events:none;
  /* (5 ago) Van CON la barra: arriba del todo no hay barra, así que
     tampoco cifras — solo el logo, el CTA y la hamburguesa. */
  opacity:0;transition:opacity .28s ease;
}
.nav--puesta .nav__cifras{opacity:1}
.nav__cifras b{font-family:var(--f-display);font-weight:700;font-size:1rem;color:var(--trigo);margin-right:.28rem}
.nav .wrap{position:relative}
/* En móvil no caben: la barra es logo + CTA + menú y punto. */
@media(max-width:900px){.nav__cifras{display:none}}

/* ── QUÉ EMPUJA A LA DERECHA (4 ago, Nacho: "arregla el error de ubicación
   del menú y del icono de perfil") ─────────────────────────────────────────
   El `margin-left:auto` estaba en `.nav__unete`. Funciona mientras el CTA
   existe — pero al iniciar sesión `pintarNav` lo pone `hidden`, y un elemento
   con `display:none` NO empuja nada: el avatar y la hamburguesa se venían con
   el logo a la izquierda. Y el apaño de `.nav__unete~.nav__burger` tampoco
   servía, porque el hermano seguía en el DOM aunque estuviera oculto: el
   selector `~` no sabe nada de visibilidad.

   Ahora empuja el LOGO, que es el único elemento de la barra que siempre está
   y siempre va a la izquierda. Todo lo demás —CTA, avatar, hamburguesa, haya
   sesión o no— cae a la derecha solo. Una regla, sin casos.
   (Va en la regla base de `.marca`, más abajo, para no tener dos.) */
.nav__links{display:flex;gap:1.4rem;margin-left:auto;align-items:center}
/* :not(.nav__avatar) — el avatar de tu cuenta tiene su propio look (círculo con inicial)
   y no debe heredar el "botón plano" de la nav ni el remapeo del tema claro.
   :not(.nav__unete):not(.nav__club) — son pastillas con su propio relleno y borde, y
   este selector (dos clases) le ganaba por especificidad: nunca llegaron a pintarse. */
.nav__links a:not(.nav__unete),.nav__links button:not(.nav__avatar){
  font:inherit;font-size:.88rem;font-weight:600;color:rgba(247,241,228,.78);
  background:none;border:none;cursor:pointer;padding:.35rem .2rem;text-decoration:none;
  transition:color .2s;
}
.nav__links a:hover,.nav__links button:not(.nav__avatar):hover{color:var(--trigo)}
/* (4 ago, Nacho) "la píldora de Únete debe llamar más la atención". Iba en
   borde fino trigo —el lenguaje de los botones SECUNDARIOS— siendo la acción
   principal de la barra. Pasa a terracota sólida, como el resto de CTAs
   primarios de la web: mismo color, misma jerarquía. */
.nav__unete{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;padding:0 1.3rem;border-radius:var(--r-pildora);font-size:var(--t6);font-weight:700;
  letter-spacing:.01em;color:var(--crema);
  background:var(--terracota-boton);border:1.5px solid var(--terracota-boton);text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(196,89,43,.55);
  transition:background .2s,color .2s,border-color .2s,translate .22s var(--exp);
}
.nav__unete:hover{background:var(--terracota-d);border-color:var(--terracota-d);color:var(--crema);translate:0 -1px}
.nav__unete:active{translate:0 0}
/* ── La nav bajo ZOOM (10 ago, el iPhone de Nacho) ─────────────────────────
   Safari guarda un zoom por sitio (Aa → 115-125%) y con él la píldora de
   Únete salía DESPROPORCIONADA: ~27% del ancho de un 13 mini, comiéndose la
   fila. En pantallas estrechas la barra cede ANTES de que el zoom la rompa:
   píldora y huecos más compactos. El mínimo táctil se conserva (44px lo pone
   el alto total, no el padding). */
@media(max-width:430px){
  /* La fila entera medía ~372px con un viewport de 320: la hamburguesa se
     salía del borde (visto en captura). Cede TODO un poco — logo, wordmark,
     píldora y huecos — y la fila entra a 320 con margen. */
  .nav .wrap{gap:.5rem;padding-inline:.9rem}
  /* (31 oct) A .72rem quedaba bajo el mínimo de un botón (5A: .8rem): se gana el
     sitio con menos espaciado de letra, no con un cuerpo más pequeño. */
  .nav__unete{padding:0 1rem;font-size:var(--t6);gap:.35rem}
  .marca{gap:.45rem}
  /* ⚠️ El tamaño del casco y del wordmark NO se puede tocar aquí: sus reglas
     base viven más abajo (≈850) y ganarían por orden. El bloque compacto del
     logo está junto a ellas. */
}

/* ── Alturas de dedo en la nav, SOLO en pantallas táctiles ────────────────
   En móvil la hamburguesa (44px) tapaba el problema, pero en TABLET la nav
   se muestra entera y sus enlaces medían 34-41px de alto: por debajo del
   mínimo de 44 y con el dedo se fallan. `pointer: coarse` limita el arreglo
   a lo táctil, así que la nav de escritorio con ratón no engorda. */
@media (pointer: coarse){
  .nav__links a,
  .nav__links button:not(.nav__avatar){min-height:44px;display:inline-flex;align-items:center}
  .marca{min-height:44px}
}
/* ── "Entrar" · la puerta de VOLVER (3 ago) ────────────────────────────────
   Deliberadamente MENOS peso que "Únete": son dos acciones distintas y solo una
   es la que queremos que haga un desconocido. Enlace de texto contra pastilla
   con borde — la jerarquía la marca la forma, no el tamaño. */
.nav__entrar{background:none;border:none;padding:.42rem .5rem;font:inherit;font-size:.95rem;
  font-weight:500;color:rgba(247,241,228,.72);cursor:pointer;border-radius:10px;
  transition:color .2s}
.nav__entrar:hover{color:var(--crema)}
@media(max-width:900px){
  /* dentro de la hamburguesa es un ítem más de la lista */
  .nav__entrar{font-size:1.35rem;padding:.9rem 1.6rem;text-align:left;width:100%}
}
/* [hidden] debe ganar al display del CTA (si no, "Únete" convive con tu avatar) */
.nav__unete[hidden]{display:none}
/* (31 oct, cabecera v2) El panel lleva su propio «Únete» al pie: es LA acción,
   como su «Pide ahora». El de la barra se queda en la barra a cualquier ancho. */
/* (2 nov, Nacho: «¿qué propósito sirve?») Ninguno: con el menú abierto el mismo botón ya
   está arriba, en la barra. Fuera del panel. */
.nav__links .nav__unete--panel{display:none !important}
.nav__links .nav__unete{margin:auto 1.6rem 0;align-self:stretch;justify-content:center;min-height:52px;font-size:var(--t5)}
/* (2 nov) En escritorio la píldora no se estira: a pantalla completa medía
   1.000 px de ancho. Va bajo la lista, alineada con ella, a su tamaño. */
@media(min-width:721px){.nav__links .nav__unete{margin-inline:2.4rem;align-self:flex-start;min-width:16rem}}
/* miembro (sesión ligera): el CTA "Únete" pasa a ser tu identidad (oro) */

/* ── TU CUENTA en la nav: avatar con inicial + desplegable (todo lo del usuario en un sitio) ── */
.nav__yo{position:relative;display:inline-flex}
/* especificidad alta a propósito: gana a `.nav__links button` y al remapeo del tema claro */
.nav .nav__yo .nav__avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer;
  /* (2 nov, Nacho: «la inicial debería ser de la tipografía de Feat») Feat Titular, un
     punto más grande que la Cinzel de antes porque es más estrecha; el padding-top la
     centra a ojo (la letra no tiene astas que bajen de la línea). */
  font-family:var(--f-display);font-weight:600;font-size:1.35rem;line-height:1;padding-top:2px;
  color:var(--trigo);background:rgba(201,151,59,.16);border:1.5px solid var(--trigo);
  transition:background .2s,color .2s,translate .22s var(--exp);
}
.nav .nav__yo .nav__avatar:hover{background:var(--trigo);color:var(--carbon);translate:0 -1px}
.nav__menu{
  position:absolute;top:calc(100% + .55rem);right:0;z-index:40;width:17rem;
  background:var(--carbon-2);border:1px solid var(--linea);border-radius:18px;padding:.55rem;
  box-shadow:0 22px 44px -20px rgba(0,0,0,.5);
  display:none;flex-direction:column;text-align:left;
}
.nav__menu[data-abierto]{display:flex}
/* (2 nov, Nacho: «las letras de este desplegable se ven anticuadas y pequeñas»; eligió la C
   sin el número de socio) Arriba, una caja hundida con tu nombre y tus sellos y saldo; debajo,
   las tres puertas en letra de cuerpo, con su icono en trigo. */
.nav__menu-cab{padding:.9rem 1rem;margin-bottom:.45rem;border-radius:var(--r-campo);background:var(--carbon-3)}
/* (2 nov, Nacho: «ha quedado descuadrado con mucho espacio… ¿más grande y simétrico el texto
   de dentro?») El ancho se fija y lo llenan: las dos cifras a medias exactas de la caja, y
   nombre, cifras y puertas un escalón más grandes. «saldo» pasa a «ganados», como en el
   mando del Club: es dinero de tu Link, no bowls. */
.nav__menu-cab b{display:block;font-family:var(--f-texto);font-weight:700;font-size:var(--t3);color:var(--crema);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav__menu-cifras{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.7rem}
.nav__menu-cifras[hidden]{display:none}
.nav__menu-cifras span{display:flex;flex-direction:column;gap:.2rem;font-size:var(--t6);color:var(--humo)}
.nav__menu-cifras strong{font-family:var(--f-display);font-weight:600;font-size:var(--t3);line-height:1.05;color:var(--trigo)}
/* (4 ago, Nacho) el email que iba aquí debajo, fuera: "no necesito ver qué
   correo estoy usando". La cabecera queda con el nombre y punto. */
/* (28 jul) Aquí vivía `.nav__stats`, el preview de 4 cifras del desplegable:
   duplicaba las stats de /cuenta y costaba un fetch a /api/fundador en CADA carga
   de CADA página para pintar un número que casi nadie miraba. Fuera. */
/* (4 ago) Iban en versalitas de Cinzel a t7 para hablar como el panel grande; el 2 nov
   Nacho las vio «anticuadas y pequeñas»: letra de cuerpo, a t5. */
.nav .nav__yo .nav__menu a,.nav .nav__yo .nav__menu button{
  display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;
  padding:.85rem 1rem;border-radius:10px;
  font-family:var(--f-texto);font-weight:600;font-size:var(--t4);letter-spacing:0;
  text-transform:none;
  color:var(--crema);background:none;border:none;cursor:pointer;text-decoration:none;
  transition:background .16s,color .16s;
}
.nav .nav__yo .nav__menu a:hover,.nav .nav__yo .nav__menu button:hover{background:rgba(201,151,59,.14);color:var(--trigo)}
.nav__menu svg{width:22px;height:22px;flex:none;color:var(--trigo)}
.nav__menu .sep{height:1px;background:var(--linea);margin:.35rem .3rem}
.nav .nav__yo .nav__menu .salir{font-weight:500;font-size:var(--t6);color:var(--humo)}
/* (4 ago, Nacho) FUERA el bloque móvil que había aquí. Hacía dos estropicios:
   `.nav__yo{width:100%}` convertía al avatar en un flex-item que absorbía TODO
   el hueco de la barra (la inicial quedaba clavada en el CENTRO, lejos de la
   hamburguesa), y `.nav__menu{position:static}` metía el desplegable DENTRO de
   la barra — al abrir el perfil crecía la cabecera entera en vez de abrirse un
   menú propio. El desplegable absoluto de arriba vale a cualquier ancho: el
   avatar vive siempre en la barra, pegado a la hamburguesa. */
/* (31 oct) Aquí vivía la píldora de «El Club» (borde egeo). La cabecera v2 trata
   las cinco entradas igual; la activa va en trigo (aria-current). */
/* aviso "ya estás dentro" en la landing: oculto por defecto, visible para miembros.
   ── (4 ago) LAS TRES REGLAS LLEVAN `html` DELANTE, Y NO ES ADORNO ────────────
   `.solo-miembro{display:none}` es (0,1,0) y vive en la línea 382; `.btn` es
   (0,1,0) y vive 200 líneas MÁS ABAJO. A igual especificidad manda el orden, así
   que cualquier `<a class="btn solo-miembro">` se saltaba el ocultado y salía
   SIEMPRE. Se veía en el destacado del Club: "Entrar al Club" y "Ver el Club",
   los dos a la vez, sin sesión. Con `html` delante suben a (0,1,1) y ganan a
   `.btn` esté donde esté. Encontrado midiendo el display computado, no leyendo:
   la regla estaba escrita y parecía correcta. */
html .solo-miembro{display:none}
html.es-miembro .solo-miembro{display:block}
html.es-miembro .oculto-miembro{display:none}
/* Un botón oculto no debe ocupar sitio ni empujar a sus vecinos */
html.es-miembro a.btn.solo-miembro,html.es-miembro button.btn.solo-miembro{display:inline-flex}
/* Secciones ENTERAS que solo tienen sentido para quien aún no ha entrado (la puerta
   de registro, el argumentario de qué es el Club). Quien ya está dentro viene a usar
   el Club, no a que se lo vendan otra vez. */
html.es-miembro .solo-visita{display:none}
/* ─────────── campo de zona (CP o ciudad) ───────────
   Vive aquí y no en cada página porque TODOS los formularios de alta lo llevan.
   El eco de la provincia va DENTRO del campo, a la derecha: confirma que hemos
   entendido el código postal sin añadir una línea que descuadre la fila del botón. */
.campo--zona{flex:1 1 11rem}
.campo__eco{position:absolute;right:1rem;top:50%;translate:0 -50%;pointer-events:none;
  font-size:.72rem;letter-spacing:.04em;color:var(--trigo);max-width:8.5rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  opacity:0;transition:opacity .2s}
.campo__eco.puesto{opacity:1}
/* ── menú móvil: hamburguesa que despliega TODAS las secciones ── */
/* 44px es el mínimo que se acierta con el pulgar; estaba en 38,8 y es el ÚNICO
   acceso al menú en móvil. */
/* (30 jul) La hamburguesa, dentro de un círculo. En superfuud.es va así —un
   botón redondo sólido arriba a la derecha— y es la misma familia de forma que
   las píldoras de los CTA: la web pasa a tener UN vocabulario de contorno en vez
   de dos. El área táctil no cambia (44px), solo se dibuja. */
/* El círculo se dibuja con --linea, NO con rgba(247,241,228,...) literal: /cuenta
   y /club/ van en tema claro y esos crema se volvían invisibles sobre fondo
   claro. Es la misma trampa que avisa CLAUDE.md para los estilos de JS, y la pisé
   igual escribiendo CSS. --linea y --crema ya están remapeados por tema. */
/* SIN margin-left:auto (4 ago): quedaba OTRO auto además del margin-right del
   logo, y dos autos se reparten el hueco a partes iguales — el avatar quedaba
   atrapado en el centro exacto, solapando las cifras. Quién empuja es el LOGO
   y solo el logo. */
/* (5 ago, Nacho) "que el icono de perfil y la hamburguesa se vean más y mejor".
   El borde iba en --linea (crema al 17%): a un palmo era invisible. Se viste con
   el MISMO lenguaje que el avatar de al lado —fondo trigo al 16% y borde trigo—
   para que los dos accesos de la derecha pesen igual. */
.nav__burger{display:none;background:rgba(201,151,59,.16);border:1.5px solid var(--trigo);
  border-radius:50%;color:var(--crema);cursor:pointer;padding:0;line-height:0;
  width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center;
  transition:background .2s,border-color .2s,color .2s}
.nav__burger:hover{background:var(--trigo);color:var(--carbon)}
.nav__burger svg{display:block;width:26px;height:26px}
.nav__burger .cerrar{display:none}
.nav.abierto .nav__burger .abrir{display:none}
.nav.abierto .nav__burger .cerrar{display:block}
/* ── LA HAMBURGUESA, TAMBIÉN EN ESCRITORIO (3 ago, Nacho) ──────────────────
   "toda la barra superior de secciones debería estar escondida detrás de un
   menú hamburguesa como en la vista móvil, queda más limpio."
   El breakpoint pasa de 720px a TODOS los anchos. La barra se queda con lo
   imprescindible —logo a la izquierda, Únete y hamburguesa a la derecha— y las
   secciones viven dentro del panel. Menos cosas compitiendo con el hero, que
   es lo que tiene que mirarse al entrar.
   `Únete` se queda FUERA del menú a propósito: es la acción de la página, y
   esconder la acción detrás de dos toques es justo la fricción que estamos
   quitando en todo lo demás. */
.nav__burger{display:inline-flex}
/* ── EL MENÚ SE ABRE Y SE CIERRA (4 ago, Nacho) ───────────────────────────
   Dos intentos fallidos antes de este, y los dos por la misma razón: querer
   animar el ALTO de un panel que por diseño es de pantalla completa.
     1) `display:grid` + `grid-template-rows:0fr→1fr`. Anima, pero cambia el
        modelo de caja: el panel se maquetaba con `flex-direction:column` y al
        pasar a grid los enlaces dejaron de apilarse y se repartieron por toda
        la pantalla con huecos enormes. Es lo que se veía en la captura.
     2) `max-height`. Ni siquiera llegaba a hacer nada: el panel lleva
        `min-height:calc(100dvh - 3.6rem)` —es full-screen a propósito desde el
        31 jul— y en CSS `min-height` GANA a `max-height`. Medido: el panel
        seguía midiendo 802px con `max-height:640px` puesto.

   Conclusión: aquí no hay alto que animar, porque el alto es fijo y querido.
   Se anima lo que no toca el reparto — opacidad, un desplazamiento corto y la
   visibilidad — y se deja de alternar `display`, que además nunca fue animable.
   `visibility` con retardo cierra el detalle: sin ella el panel oculto sigue
   atrapando el tabulador. */
.nav__links{
  /* la maqueta del panel, INTACTA — es la de siempre y no la toca la animación */
  position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
  gap:0;margin:0;padding:1.4rem 0 max(1.4rem,env(safe-area-inset-bottom));
  background:var(--carbon-2);border-bottom:1px solid var(--linea);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
  /* y encima, lo único que se anima */
  display:flex;
  opacity:0;visibility:hidden;translate:0 -10px;pointer-events:none;
  transition:opacity .24s ease,translate .34s var(--exp),visibility 0s linear .34s;
}
.nav.abierto .nav__links{
  opacity:1;visibility:visible;translate:0 0;pointer-events:auto;
  transition:opacity .28s ease,translate .38s var(--exp),visibility 0s;
}
/* (2 nov, Nacho: «no debería haber scroll posible estando en el índice») Con el menú abierto
   la página de detrás no se mueve: ni la rueda ni el dedo, y sin la barra de scroll. Si el
   propio menú no cabe, se desplaza él sin arrastrar la página. */
html:has(.nav.abierto){overflow:hidden}
.nav__links{overscroll-behavior:contain}
@media(prefers-reduced-motion:reduce){
  .nav__links,.nav.abierto .nav__links{transition-duration:.01s}
}
.nav.abierto .nav__links>*{animation:none}
/* `:not(.nav__avatar)` SIEMPRE en las reglas que dan ancho: sin él, el círculo
   de la inicial se estira a todo el ancho del panel y sale como elipse. Ya pasó
   una vez (3 ago) y se arregló; esta regla es nueva y no puede repetirlo. */
/* (4 ago, Nacho) "para el menú, una tipografía más nuestra". Iba en Hanken —la
   del cuerpo— y un menú a pantalla completa es DISPLAY: le toca Cinzel, la de
   las inscripciones, con versalitas y aire. Es la misma decisión que los
   rótulos de sección. */
/* (2 nov, Nacho: «estos textos de índices deberían ser más grandes») A pantalla completa el
   menú es lo único que hay: los índices van a tamaño de título de franja (t2), con menos
   aire entre letras porque Feat Titular ya es ancha. */
.nav.abierto .nav__links a:not(.nav__unete),.nav.abierto .nav__links button:not(.nav__avatar){
  padding:.95rem 1.6rem;width:100%;text-align:left;
  font-family:var(--f-display);font-weight:600;font-size:var(--t1);line-height:1.1;
  letter-spacing:.04em;text-transform:uppercase}   /* (2 nov, Nacho: «las letras podrían ser más grandes») t2 → t1 */
.nav.abierto .nav__links .nav__avatar{margin:.6rem 1.6rem .1rem;align-self:flex-start}
/* (3 ago, Nacho) "el menú hamburguesa debe abrirse ocupando toda la pantalla."
   También en escritorio: un desplegable pequeño sobre la página deja la mitad
   del hero peleando por la atención con los enlaces. A pantalla completa el
   menú es lo único que hay, que es lo que se espera al abrirlo.
   `min-height` y no `height:100%`: el panel cuelga de `top:100%` de una nav
   sticky, así que el porcentaje no se referiría al viewport. 3,6rem es el alto
   de la barra ya pegada arriba. */
@media(min-width:721px){
  /* (1 sep, auditoría) 3.6rem era el alto de una barra que ya no existe: con
     la cinta de obras la cabecera mide 6.4-7.6rem y el CTA del fondo quedaba
     cortado. Manda --nav-alto, que la propia nav mantiene al día. */
  .nav__links{min-height:calc(100dvh - var(--nav-alto, 68px));overflow-y:auto;padding-block:2.2rem}
  .nav.abierto .nav__links a:not(.nav__unete),
  .nav.abierto .nav__links button:not(.nav__avatar){font-size:var(--t1);padding-inline:2.4rem}
}

@media(max-width:720px){
  .nav__burger{display:inline-flex}
  /* ── EL MENÚ, A PANTALLA COMPLETA (31 jul) ────────────────────────────────
     Medido abierto a 375x812: ocupaba el 36% del alto, así que por debajo se
     seguía viendo la página cortada a media frase. Y los cinco enlaces tenían
     TRES tamaños distintos (16,3 / 13,1 / 11,5px) y TRES formas (texto, píldora,
     botón). Superfuud lo resuelve al revés: panel que cubre, una sola lista, un
     solo tamaño, y el CTA abajo del todo. Eso es lo que Nacho pidió copiar.
     El alto se da con min-height y no con `height:100%`: el panel cuelga de
     `top:100%` de una nav sticky, así que el porcentaje no se refiere al
     viewport. 3.6rem es el alto de la barra ya pegada arriba. */
  .nav__links{
    position:absolute;top:100%;left:0;right:0;margin-left:0;
    flex-direction:column;align-items:stretch;gap:0;
    min-height:calc(100dvh - var(--nav-alto, 68px));overflow-y:auto;
    background:var(--carbon-2);
    padding:1.4rem 0 max(1.4rem,env(safe-area-inset-bottom));
    /* (4 ago) Aquí había `display:none` y `.nav.abierto{display:flex}`. Se
       quitan: `display` no se puede animar, así que mientras estuvieran el menú
       seguiría apareciendo de golpe. Ocultarlo lo hacen ahora la opacidad y la
       visibilidad, que sí se animan (ver el bloque del menú, más arriba). */
    display:flex;
  }
  /* UN solo tamaño para todo lo que es navegar.
     Con `.nav.abierto` delante a propósito: la regla base de la barra es
     `.nav__links a:not(.nav__unete):not(.nav__club)`, que con sus dos :not()
     pesa más que un selector normal y dejaba Inicio/La carta/Empresas en 14px
     mientras El Club subía a 21,6. Medido con getComputedStyle, no supuesto. */
  /* (3 ago, Nacho) "el icono de la inicial sale en elipse achatada". El `button`
     de este selector no distinguía el AVATAR de tu cuenta, así que dentro de la
     hamburguesa se le aplicaba `width:100%` y el círculo de 38px pasaba a medir
     375×38 — una elipse. Su `align-self:flex-start` no podía salvarlo: con el
     ancho fijado al 100%, alinear no encoge nada.
     Se excluye igual que en las otras seis reglas de la nav, que ya lo hacían
     con `:not(.nav__avatar)`; a esta se le había escapado. */
  .nav.abierto .nav__links a:not(.nav__unete),.nav.abierto .nav__links button:not(.nav__avatar){
    padding:.95rem 1.6rem;font-size:var(--t2);width:100%;text-align:left}
  /* El Club deja de ser una píldora suelta en medio de una lista: dentro del
     panel es un enlace más, como en superfuud, donde todos los items son
     iguales. La píldora con seña egeo sigue intacta en la barra de escritorio,
     que es donde tiene sentido distinguir un portal entre enlaces planos.
     Aquí NO se le pone color propio: el único token azul es --egeo (#2F5D7C),
     que sobre el carbón no se lee, y no hay variante clara. Antes de escribir
     `var(--egeo-cl)` comprobé que ese token no existe — habría fallado en
     silencio, que es justo como se colaron los crema invisibles en tema claro. */

}


/* ═══ LOS DIÁLOGOS (`.pedido`) ═══════════════════════════════════════════════
   (4 ago) Estas reglas vivían dentro del <style> de /carta, que era la única
   página con diálogos. Al abrir los PORTALES del Club —packs y afiliado— el
   <dialog> salía sin ningún estilo: caja blanca, sin centrar, pegada arriba a
   la izquierda. No era un fallo de los portales; era que su ropa estaba en otra
   página. Aquí las tiene cualquiera que abra uno.
   `.pedido__x` y `.pedido__cuerpo` son las clases que usan los portales nuevos;
   `.dlg-cuerpo` se conserva porque /carta la usa en sus diálogos viejos. */
/* (3 nov 2026, Nacho elige la B: «la B») LA HOJA. Toda ventana de la web es la misma
   pieza: en el móvil sube desde abajo a todo el ancho, con su asa, como en las apps
   (Uber, el banco); desde 601 px, centrada. Arriba, la X redonda; el título en Hanken
   grande (--t-ventana); los botones a todo el ancho, el que avanza primero. Sin
   animación de entrada (D8: solo se mueven la cinta y la galería).
   La llevan .pedido (reserva, cubiertos, Packs, el Link) y quien añada la clase .hoja
   (la caja de cuenta, salir, confirmar el correo, el carnet). */
dialog.hoja,dialog.pedido{border:1px solid var(--linea);padding:0;margin:auto;background:var(--carbon-2);color:var(--crema);
  width:min(92vw,28rem);max-height:calc(100dvh - 2rem);overflow-y:auto;overscroll-behavior:contain;
  border-radius:var(--r-tarjeta);box-shadow:0 30px 70px -30px rgba(0,0,0,.65)}
dialog.hoja::backdrop,dialog.pedido::backdrop{background:rgba(26,21,17,.72);backdrop-filter:blur(3px)}
@media(max-width:600px){
  dialog.hoja,dialog.pedido{width:100%;max-width:none;margin:auto 0 0;max-height:calc(100dvh - 1rem);
    border-width:1px 0 0;border-radius:var(--r-tarjeta) var(--r-tarjeta) 0 0;padding-bottom:env(safe-area-inset-bottom)}
  dialog.hoja::before,dialog.pedido::before{content:"";display:block;width:40px;height:5px;margin:10px auto 0;
    border-radius:var(--r-pildora);background:rgba(247,241,228,.28)}
}
.hoja__cuerpo,.dlg-cuerpo,.pedido__cuerpo{position:relative;padding:28px}
@media(max-width:600px){.hoja__cuerpo,.dlg-cuerpo,.pedido__cuerpo{padding:16px 20px 24px}}
/* Arriba: la píldora (si la hay) y la X, en la misma línea. */
.hoja__arriba{display:flex;align-items:center;gap:.6rem;margin-bottom:1.25rem}
.hoja__arriba>:first-child:not(.hoja__x){flex:1;min-width:0}
.hoja__x,.pedido__x button{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;margin-left:auto;padding:0;
  border:0;border-radius:50%;background:rgba(247,241,228,.08);color:var(--crema);cursor:pointer;transition:background .18s var(--sal)}
.hoja__x:hover,.pedido__x button:hover{background:rgba(247,241,228,.15)}
.hoja__x svg,.pedido__x svg{width:20px;height:20px}
.hoja__x--suelta,.pedido__x{position:absolute;top:16px;right:16px;z-index:2}
@media(max-width:600px){.hoja__x--suelta,.pedido__x{top:8px;right:12px}}
.hoja__titulo,.dlg-cuerpo h3,.pedido__cuerpo h3{font-family:var(--f-texto);font-weight:700;font-size:var(--t-ventana);line-height:1.15;
  letter-spacing:-.01em;margin:0;text-wrap:balance}
.pedido__cuerpo h3{padding-right:52px}
.dlg-cuerpo h3 em,.pedido__cuerpo h3 em{font-style:normal;color:var(--trigo)}
.hoja__sub,.dlg-cuerpo>p{font-size:var(--t5);line-height:1.5;color:var(--humo);margin:.5rem 0 0}
.hoja__icono{display:grid;place-items:center;width:56px;height:56px;margin-bottom:1rem;border-radius:50%;
  border:1.5px solid var(--marco-fuerte);color:var(--trigo)}
.hoja__icono svg{width:26px;height:26px}
.hoja__pies,.dlg-pies{display:flex;flex-direction:column;gap:.6rem;margin-top:1.5rem}
.hoja__pies .btn,.dlg-pies .btn{width:100%}
@media(min-width:601px){.hoja__pies,.dlg-pies{flex-direction:row-reverse}.hoja__pies .btn,.dlg-pies .btn{flex:1 1 0;width:auto;padding-inline:1rem}}
/* La píldora de la hoja: la de las pestañas en pequeño, el elegido en crema. */
.hoja__pild{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;border-radius:var(--r-pildora);
  background:var(--carbon-3);border:1px solid var(--marco)}
.hoja__pild button{min-height:44px;padding:0 .6rem;border:0;border-radius:var(--r-pildora);background:none;color:rgba(247,241,228,.72);
  font:inherit;font-size:var(--t5);font-weight:600;line-height:1.15;cursor:pointer;transition:background .2s var(--sal),color .2s var(--sal)}
.hoja__pild button:hover{color:var(--crema)}
.hoja__pild button[aria-pressed="true"]{background:var(--crema);color:var(--carbon)}
.hoja__pild button:focus-visible{outline:2px solid var(--terracota);outline-offset:2px}
/* El campo de la hoja: la etiqueta dentro de la caja, encima de lo que escribes. */
.campo-hoja{display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-height:58px;padding:.45rem 1rem;
  border-radius:var(--r-campo);background:var(--carbon-3);border:1.5px solid transparent;cursor:text;transition:border-color .18s var(--sal)}
.campo-hoja label{font-size:var(--t7);font-weight:600;line-height:1.2;color:var(--humo);cursor:text}
.campo-hoja input{display:block;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--crema);
  font:inherit;font-size:var(--t5);line-height:1.5;outline:none}
.campo-hoja input::placeholder{color:rgba(247,241,228,.42)}
.campo-hoja:hover{border-color:var(--linea)}
.campo-hoja:focus-within{border-color:var(--crema)}
.campo-hoja:has([aria-invalid="true"]){border-color:var(--terracota)}
/* La «o» entre el botón y Google. */
.hoja__o{display:flex;align-items:center;gap:.75rem;margin:.9rem 0;font-size:var(--t6);color:var(--humo)}
.hoja__o::before,.hoja__o::after{content:"";flex:1;height:1px;background:var(--linea)}
.dlg-msg{background:var(--carbon-3);border-radius:var(--r-campo);padding:14px 16px;font-size:var(--t6);line-height:1.55;
  white-space:pre-wrap;word-break:break-word;margin:1rem 0 0;color:var(--arena)}
.pedido__cuerpo .btn{width:100%;justify-content:center;margin-top:.4rem}
.pedido__cuerpo .nota{margin-top:.7rem;font-size:var(--t6);color:var(--humo);text-align:center}
.pedido__cuerpo .nota[data-estado="error"]{color:var(--aviso)}
/* (31 oct) Aquí vivía «los portales siempre oscuros aunque la página vaya en tema
   claro», en literales: ya no hay tema claro y .pedido los viste con tokens. */

/* ═══ EL INTERIOR DE LOS PORTALES ════════════════════════════════════════════
   (4 ago) Esto vivía en el <style> de /club. Mismo error que `.pedido`: la
   pantalla la puede abrir cualquier página —los packs ya se abren también desde
   /carta— y su ropa no puede estar guardada en una sola casa. Aquí la tienen
   todas. Colores LITERALES: el portal es oscuro siempre, aunque la página vaya
   en tema claro, así que los tokens remapeados lo invertirían. */
/* ── Las pantallas ────────────────────────────────────────────────────────
   Heredan `.pedido`, que es el diálogo que ya usa /carta: una sola forma de
   ventana en toda la web. Aquí solo va lo suyo. */
.pantalla-packs,.pantalla-afiliado{width:min(94vw,520px)}
.pantalla-packs .rotulo,.pantalla-afiliado .rotulo{margin-bottom:.5rem}
.pkx__intro,.afx__aviso{color:var(--humo);font-size:.95rem;line-height:1.55;margin:.3rem 0 1.1rem;text-wrap:pretty}
/* (15 ago, Nacho) LA CARA DEL SOCIO en la reserva de packs: sus datos escritos
   como frase, no como formulario. La regla que sale de aquí y vale para toda la
   web: si ya tenemos el dato NO se pide — como mucho se enseña, con una salida
   por si no es él. Rellenar un campo con sus datos no cuenta como no preguntar. */
.pkx__socio-dato{color:var(--humo);font-size:1rem;line-height:1.6;margin:.3rem 0 1.1rem;
  padding:.9rem 1rem;border-radius:10px;background:rgba(247,241,228,.05);
  border:1px solid rgba(201,151,59,.28);text-wrap:pretty}
.pkx__socio-dato b{color:var(--crema);font-weight:600;word-break:break-word}
.pkx__socio-dato [hidden]{display:none}
.pkx__otro{display:block;width:100%;margin-top:.7rem;padding:.6rem;background:none;border:none;
  font:inherit;font-size:.86rem;color:var(--humo);text-decoration:underline;text-underline-offset:3px;
  cursor:pointer;min-height:44px}
.pkx__otro:hover{color:var(--crema)}
.pkx__letra,.afx__letra{list-style:none;display:grid;gap:.5rem;margin:1.1rem 0 1.2rem;padding:0;
  font-size:.86rem;line-height:1.5;color:var(--humo)}
.pkx__letra li,.afx__letra li{padding-left:1rem;position:relative}
.pkx__letra li::before,.afx__letra li::before{content:"·";position:absolute;left:.25rem;color:var(--trigo);font-weight:700}
.pkx__letra b,.afx__letra b{color:var(--crema)}

/* El trato del afiliado: dos cifras, una a cada lado.
   (31 oct, DOGMA v3) Como la tira .datos: cifra en crema sobre el fondo, entre
   filetes. Antes iba en terracota OSCURA sobre carbón-2, que no llegaba a AA. */
.afx__trato{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:.4rem 0 1.3rem;padding:1rem 0;border-block:1px solid var(--linea)}
.afx__trato>div{display:flex;flex-direction:column;gap:.35rem}
.afx__trato b{display:block;font-family:var(--f-display);font-weight:600;font-size:var(--t2);line-height:1;color:var(--crema)}
.afx__trato b i{font-style:normal;font-size:var(--t5)}
.afx__trato>div>span{font-size:var(--t6);line-height:1.4;color:var(--humo)}

.afx__campo{display:block;margin-bottom:1rem}
.afx__et{display:block;font-family:var(--f-etiqueta);font-size:var(--t7);letter-spacing:.16em;
  text-transform:uppercase;color:var(--humo);margin-bottom:.4rem}
.afx__caja{display:flex;gap:.5rem}
/* (31 oct) El campo, hundido como todos los de la web oscura: en crema era el
   único bloque claro dentro de un diálogo oscuro. */
.afx__caja input{flex:1;min-width:0;min-height:48px;padding:0 14px;font:inherit;font-size:var(--t5);
  background:var(--carbon-3);color:var(--crema);border:1px solid var(--linea);border-radius:var(--r-campo)}
.afx__qr{display:grid;place-items:center;padding:14px;margin-bottom:1rem;
  background:var(--crema);border:1px solid rgba(247,241,228,.18);border-radius:10px}
.afx__qr svg{width:min(170px,52vw);height:auto;display:block}
.afx__repartir{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.afx__ejemplo{display:block;text-align:center;padding:.7rem;margin-bottom:1rem;
  border:1px dashed var(--linea);border-radius:var(--r-campo);color:var(--humo);font-size:var(--t6)}
@media(max-width:520px){
  .afx__repartir{grid-template-columns:1fr}
}

/* El botón de copiar NO puede heredar el `width:100%` de los botones del
   portal: es un flex-item junto al campo, y con el 100% se comía el ancho
   entero y dejaba el enlace en 30px (medido). */
.afx__caja .btn{width:auto;flex:none;padding-block:0;padding-inline:1.2rem}

/* ── ELEGIR PACK, dentro del portal (movido de /carta el 4 ago) ────────────
   Los estilos vivían en el <style> de carta.html y la pantalla también se abre
   desde /club: allí los botones salían desnudos. Tokens, no literales: en las
   páginas oscuras resuelven igual que antes y en claro se remapean solos. */
.packs-elige{display:grid;gap:.6rem;margin:1.1rem 0 1.3rem}
.pk{display:flex;align-items:center;gap:.9rem;width:100%;padding:.9rem 1.1rem;
  background:rgba(247,241,228,.05);border:1.5px solid var(--linea);border-radius:18px;
  color:var(--crema);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .18s,background .18s}
.pk:hover{border-color:rgba(201,151,59,.5)}
.pk[aria-checked="true"]{border-color:var(--trigo);background:rgba(201,151,59,.1)}
.pk__u{font-family:var(--f-display);font-weight:700;font-size:1.35rem;line-height:1;min-width:2.6rem}
.pk__tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.pk__tx b{font-size:1rem;font-weight:700}
.pk__tx small{font-size:.8rem;color:var(--humo);margin-top:.15rem}
.pk__dto{font-size:.78rem;font-weight:700;color:var(--trigo);white-space:nowrap}
/* (31 oct) La chapa en Hanken, como un botón: en Cinzel versal a .8rem «El más
   equilibrado» medía más que su columna en el móvil y se salía de la tarjeta. */
.pk__chapa{font-family:var(--f-texto);font-size:var(--t7);font-weight:700;letter-spacing:.04em;
  color:var(--carbon);background:var(--trigo);max-width:100%;
  padding:.15rem .55rem;border-radius:var(--r-pildora);margin-top:.35rem;align-self:flex-start}

/* (3 sep) Aquí vivían LOS PORTALES EN TEMA CLARO (24 reglas): fuera con él. */
/* el aspa de cerrar: sus cremas translúcidos desaparecen sobre crema */
/* el trigo sobre crema no se lee (regla de la casa): manda la terracota oscura */

/* ─────────── HERO ─────────── */
/* La cabecera es sticky y OCUPA sitio: con 100svh el hero medía ventana + cabecera y
   el "Desliza" nacía fuera de pantalla. Se le descuenta. */

.marca{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-right:auto}
/* (5 ago, Nacho: "aumenta el tamaño del logo y de las letras") 34→44px. */
.marca img{width:46px;height:35px}
/* (31 oct, cabecera v2) El wordmark es una <img> del SVG en crema
   (img/feat-wordmark-crema.svg, sacado del logo maestro con la A hueca por
   <mask>). Ya no va como máscara en terracota: la marca en la barra es crema. */
.marca .marca__nombre{width:auto;height:24px}
/* A 320 con avatar la fila no cabe: el casco solo dice la marca. */
@media(max-width:340px){.marca .marca__nombre{display:none}}
/* (30 jul) EL TERMINO vw DE ESTOS CLAMP ESTABA PENSADO SOLO PARA ESCRITORIO: a 375px,
   3,6-4,6vw son 13-17px, asi que SIEMPRE ganaba el minimo y los titulares quedaban
   congelados en 29-33px (9vw) mientras el de superfuud va a 13,3vw y ocupa el 31%
   de la pantalla. Ahora el vw manda tambien en movil. Los MAXIMOS no se tocan: en
   escritorio no cambia nada. */
/* (30 jul) TECHO MATEMATICO, y esta cifra YA ESTA EN SU MAXIMO: no volver a
   subirla. Medido, no estimado:
     · A 375px el ancho util son 335px; 'Comida real.' en UNA linea (orden de
       Nacho) con el tracking de la casa no pasa de 40,5px = 10,8vw.
     · Pero manda la pantalla PEQUENA: a 320px el ancho util cae a 280px y el
       texto ya mide 277. Con 10,5vw quedaban 2,5px de holgura, y con
       `white-space:nowrap` pasarse un pixel no parte la linea — saca scroll
       horizontal a TODA la pagina. 10,4vw deja ~6px, que es lo minimo sano.
   Y el objetivo de superfuud (13,3vw) es INALCANZABLE aqui por aritmetica:
   ellos llegan porque su titular parte en cinco lineas de ~10 caracteres; el
   nuestro son 12 caracteres en un renglon. Para igualarlos habria que romper
   la linea, que es justo lo que Nacho pidio que no pasara. */
/*     · El MINIMO del clamp era 2,1rem = 33,6px, y a 320px es el que manda (10,4vw
       son 33,3): dejaba 2,6px de holgura. Baja a 1,95rem para que ahi gobierne el
       vw y queden ~5,6px. A 375px no cambia nada: alli ya mandaba el vw. */

/* (30 jul, Nacho) "comida real debe ir en una misma línea": el display:block de
   arriba era para titulares de dos tramos; este h1 corto va entero en un renglón. */

/* misma especificidad que el display:block de arriba, y detrás: gana */

/* foto: mitad derecha, a sangre, disolviéndose en el carbón */

/* ── EL HERO EN MÓVIL, RECONSTRUIDO (4 ago, Nacho: "colapsa y pierde estructura")
   Aquí vivía `min-height:0; flex-direction:column-reverse; justify-content:
   flex-end`. Eran reglas de una estructura ANTERIOR, cuando el hero tenía la
   foto EN FLUJO (`.hero__foto`) y column-reverse la subía por encima del texto.
   Hoy la foto es `.hero__cine`, que está en posición ABSOLUTA: no queda nada
   que invertir, y lo único que sobrevivía era el `min-height:0` — que es,
   literalmente, la orden de colapsar. Medido a 375×812: el hero se quedaba en
   501px con 812 disponibles, la foto (cuadrada, en `contain`) se plantaba a
   media altura DEBAJO del texto, y la cuenta atrás —absoluta a 1,5rem del
   fondo— aterrizaba ENCIMA de la caja de captura, sobre "Privacidad y baja".

   La reconstrucción traduce a móvil el corte que en escritorio funciona (foto
   a la derecha, texto a la izquierda): aquí no hay derecha, así que el corte
   es HORIZONTAL — la foto es una banda arriba que se funde en el carbón, y
   debajo, sobre fondo sólido, el titular, la promesa y la caja. Cada cosa en
   su zona: eso es la estructura que se había perdido. */
@media(max-width:900px){
  /* ── (9 ago, Nacho) RECOMPUESTO CON LA RECETA DE LA MAQUETA DE LA APP ─────
     "Abarrotada: solo texto, con foto abajo". La composición nueva es la de la
     pantalla 1 de docs/APP_MAQUETA.html, ya aprobada: la foto ocupa TODO el
     hero, el bloque de texto se ancla ABAJO sobre su degradado, y la comida
     queda visible en el tercio medio. El velo y el degradado del texto viven
     en el <style> de index.html (van después de este archivo y a igual
     especificidad ganan — lección medida y anotada allí).
     92svh y no 100: la cinta asoma por abajo y se intuye que hay más
     (herencia del "achátalo" del 5 ago — se conserva el propósito, no la cifra). */
  /* padding-top = la cabecera: cuando el contenido NO cabe (320×568), el
     margin-top:auto del wrap se hace 0 y el texto arrancaba en y=0, DEBAJO de
     la barra fija — el titular chocaba con "Todavía no repartimos". La foto
     sigue sangrando tras la barra (es absoluta), solo se protege el flujo. */
/* (15 ago) 92 → 95svh, y no es cosmética: es aritmética. Lo que tiene que
     asomar por abajo es la CINTA, que está hecha para eso. Con 92svh la cinta
     (57px) solo desborda el pliegue si la pantalla mide menos de 712px; en un
     iPhone de 750 cabía entera y lo que asomaba era una RAYITA DE 3px de la
     sección siguiente, en otro tono — se lee como un fallo de pintado, no como
     "hay más abajo". Lo cazó scripts/prueba-encuadres.mjs.
     Con 95svh la cinta desborda en cualquier pantalla de hasta 1140px de alto,
     o sea en todos los móviles: el corte siempre cae donde debe. */
    
  .hero__cine::before{display:none}
  /* El wrap baja al fondo con margin-top:auto. NO lleva flex:1 a propósito:
     con flex:1 su caja crecía hasta arriba y el degradado ::before —cuyos
     porcentajes son relativos a la caja— se estiraba sobre toda la foto,
     apagándola. Encogido al contenido, el degradado protege solo el texto. */
  .hero__wrap{display:flex;flex-direction:column;margin-top:auto}
  /* (9 ago) La alineación vuelve a la IZQUIERDA, como la maqueta: el centrado
     del 5 ago era para la composición de banda (texto sobre carbón plano, a lo
     ancho), que muere hoy. Anclado abajo y sobre foto, el bloque a la
     izquierda lee como cartel de marca. */
  
}
/* Botones: rótulo grabado (versalitas espaciadas), plancha de radio fino */
/* ── BOTONES: 3 niveles (31 oct, sistema v2) ──────────────────────────────
   Primario en --terracota-boton con la etiqueta en crema puro (4,62:1 desde el
   2 nov; la decisión 5A lo aceptaba a 3,9:1 sobre --terracota y Nacho mandó
   oscurecerlo). Nunca por debajo de .8rem ni de peso 700.
   Píldora de 48px; .btn--borde secundario, .btn--texto enlace subrayado.
   NADA de white-space:nowrap: en español las etiquetas son largas y a 375px el
   botón se salía de la pantalla. Que rompa línea y no pase de su contenedor. */
/* (3 nov, Nacho elige la B) La etiqueta en letra de cuerpo, sin versalitas espaciadas:
   «las letras se ven anticuadas y pequeñas». Las mayúsculas a .8rem eran de 2019. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:48px;padding:0 2rem;
  border-radius:var(--r-pildora);font-family:var(--f-texto);font-weight:700;font-size:var(--t5);
  letter-spacing:.01em;text-transform:none;text-decoration:none;cursor:pointer;
  background:var(--terracota-boton);border:1px solid var(--terracota-boton);color:var(--crema);
  box-shadow:0 12px 28px -14px rgba(196,89,43,.7);max-width:100%;text-wrap:balance;
  transition:background .2s,border-color .2s,translate .24s var(--exp)}
.btn:hover{background:var(--terracota-d);border-color:var(--terracota-d);translate:0 -1px}
.btn:active{translate:0 0}
.btn--grande{min-height:52px}
.btn--texto{min-height:0;padding:0;border:0;background:none;box-shadow:none;text-transform:none;letter-spacing:0;
  font-weight:600;font-size:var(--t5);text-decoration:underline;text-decoration-color:var(--terracota);text-underline-offset:.25em}
.btn--texto:hover{background:none;text-decoration-color:var(--crema);translate:0}
.btn--peligro{background:var(--terracota-d);border-color:var(--terracota-d)}
.btn svg{width:1.1em;height:1.1em;flex:none}
/* --humo, NO el crema literal: este color estaba hardcodeado y en las páginas de
   tema claro (/club/, /cuenta) quedaba crema sobre crema — contraste 1,00, texto
   literalmente invisible. Se comía la frase que explica el login sin contraseña,
   justo en el paso de alta del Club. El token se remapea con el tema; el literal no. */
/* (30 jul) .85rem = 13,6px. Dos motivos para subirlo a 1rem:
   1. LEGIBILIDAD. 16px es el mínimo de cuerpo en móvil, y este párrafo es del
      que depende que el consentimiento sea informado ("te enviamos un correo…
      y tú decides · Privacidad y baja"). El mismo argumento que ya justificó
      quitarle el opacity a .consent unas líneas más abajo.
   2. superfuud.es —la referencia de Nacho— usa UN solo tamaño de cuerpo, 16px
      con interlineado 1,5, en toda la página. Nosotros teníamos cinco tamaños
      distintos conviviendo (13,12 · 13,6 · 15,04 · 16,32 · 17). Parte de que su
      web se vea más limpia y segura es justo eso: no tener cinco voces.
   Va DEBAJO del botón, así que no toca el pliegue del hero (verificado). */
.nota{margin-top:.9rem;font-size:1rem;line-height:1.5;color:var(--humo);min-height:1.4em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa{display:none;margin-top:1.1rem;font-size:.95rem;color:var(--humo)}
.wa.visible{display:block}
.wa a{color:var(--trigo);text-underline-offset:3px}
/* Sin opacity: --humo ya trae la suavidad justa en los dos temas (4,76 sobre crema).
   El .82 encima lo dejaba en 3,37 — por debajo del mínimo, y en el único párrafo
   del que depende que el consentimiento sea informado. */
/* (30 jul) Pasada de LEGIBILIDAD, a la vez convergencia con superfuud.es: su web
   usa UN solo tamaño de cuerpo (16px/1,5) en toda la página; nosotros teníamos
   cinco conviviendo, y los dos más pequeños caían en texto que hay que LEER para
   decidir. 16px es además el mínimo de cuerpo en móvil. */
/* .consent iba a .72rem = 11,52px. Es el párrafo del que depende que el
   consentimiento sea informado; ya se le quitó el opacity por eso mismo, y
   dejarlo a 11px era el mismo problema por otra vía. */
.consent{margin-top:.55rem;font-size:.95rem;line-height:1.5;color:var(--humo);max-width:46ch}
.consent a{color:var(--trigo);text-decoration:underline;text-underline-offset:2px}

/* ── EL HONEYPOT ───────────────────────────────────────────────────────────
   Un campo que ninguna persona ve ni rellena, y que los bots que completan todo
   lo que encuentran sí rellenan. Se esconde con posicionamiento y NO con
   `display:none` ni `hidden`: los scripts más listos saltan lo que está oculto
   de la forma obvia, pero este sigue siendo un input normal en el DOM.
   `aria-hidden` y `tabindex="-1"` para que un lector de pantalla o el tabulador
   no lo encuentren nunca: es una trampa para máquinas, no para personas. */
.trampa{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ── DENTRO DE LA APP ──────────────────────────────────────────────────────
   `en-app` lo pone miembro.js cuando la web corre dentro de la app nativa
   (Capacitor). En un navegador normal nada de esto se aplica.
     · la barra de estado del móvil (hora, batería) se superpone a la nav si no
       se le deja su hueco: `env(safe-area-inset-top)` es exactamente ese hueco;
     · la barra de "todavía no repartimos" ya la habrá visto quien se ha
       instalado la app — dentro es ruido permanente;
     · y no se ofrece "descargar la app" a quien ya está en ella. */
.en-app .nav{padding-top:env(safe-area-inset-top,0)}

/* (31 oct) Aquí vivían .plato (foto 5:7 con el texto encima, sobre degradado) y
   la «ventana» [data-deriva]. La carta v3 usa .producto (al final del fichero) y
   la foto ya no se mueve (D8): fuera las dos. */
/* ─────────── LA CUENTA (inscripción) ─────────── */

/* (31 oct) El cierre viejo (radial terracota desde abajo, centrado) se fue: el
   .cierre plano de la capa v3, al final de este fichero, es el único. */
/* ── tablón de sugerencias (landing + club; theme-aware por tokens) ── */
.tablon{padding:clamp(3.5rem,8vh,6rem) 0;border-top:1px solid var(--linea)}

.tablon h2{font-size:var(--t2);margin-bottom:.7rem}
.tablon h2 em{font-style:normal;color:var(--trigo)}

.tablon__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(15.5rem,100%),1fr));gap:.8rem;margin-bottom:1.7rem}
.tablon__c{background:rgba(247,241,228,.08);border:1px solid var(--linea);border-radius:18px;padding:1rem 1.15rem;font-size:.95rem;line-height:1.5;color:var(--crema);text-wrap:pretty}
.tablon__add{display:flex;gap:.6rem;flex-wrap:wrap;max-width:40rem}
.tablon__add input{flex:1 1 16rem;padding:.9rem 1.1rem;font:inherit;font-size:1rem;background:var(--carbon-3);color:var(--crema);border:1.5px solid var(--linea);border-radius:10px}
.tablon__add input::placeholder{color:var(--humo)}
.tablon__add input:focus{border-color:var(--trigo)}

/* (31 oct) Aquí vivían .club y .club h2 (la sección del Club de la portada
   vieja, que ya no existe) y .club__qr/.club__app-txt (sin uso). Se van: desde
   la v3 body.club es la página del Club y estas reglas la pisaban. */

/* ═══ «¿QUÉ ES FEAT?» · la pantalla de la marca (31 oct, DOGMA v3) ══════════════
   La abre «¿Qué es Feat?» del menú en las 12 páginas (web/js/marca.js). A
   pantalla completa, sobre carbón: portada partida con el sello, misión y
   visión, los valores con icono en círculo y, desde el 31 oct, el mapa y la
   expansión (que salen de la portada). Fuera los colores fijos «para el tema
   claro» (no existe desde el 3 sep) y los focos de luz y los hover que movían. */
dialog.marca-pantalla{border:none;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;
  background:var(--carbon);color:var(--crema)}
dialog.marca-pantalla::backdrop{background:var(--carbon-3)}
.mp{position:relative;height:100%;overflow-y:auto;padding-bottom:clamp(2.5rem,6vw,5rem)}
.mp__cerrar{position:fixed;top:1rem;right:1rem;z-index:2;width:44px;height:44px;padding:0;border-radius:50%;
  border:0;background:rgba(247,241,228,.1);color:var(--crema);cursor:pointer;display:grid;place-items:center;transition:background .18s var(--sal)}
.mp__cerrar:hover{background:rgba(247,241,228,.18)}
.mp__cerrar svg{width:20px;height:20px}
.mp__portada{padding-block:clamp(3.5rem,8vw,5.5rem) clamp(2rem,5vw,3.5rem)}
.mp__portada .portada__texto p:not(.rotulo){color:rgba(247,241,228,.84)}
.mp__portada .portada__texto p b{color:var(--crema);font-weight:600}
.mp__sello{width:min(20rem,70vw);height:auto;justify-self:center}
/* (2 nov, Nacho: «encuadre mal hecho») En dos columnas el sello medía más que el texto y
   asomaba por arriba y por abajo. Ahora mide lo mismo que el bloque de texto, del rótulo a
   la última línea: height 0 + min-height 100 % no cuenta al medir la fila y luego la llena. */
@media(min-width:900px){
  .mp__portada .portada__rejilla{align-items:stretch}
  .mp__sello{width:auto;height:0;min-height:100%;max-width:100%;object-fit:contain}
}
.mp__bloque{padding-block:clamp(2rem,5vw,3.5rem)}
.mp__bloque .wrap:not(.mapa__wrap){display:flex;flex-direction:column;gap:1.2rem}
.mp__dos,.mp__valores{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:0 clamp(1.5rem,3vw,2.5rem)}
.mp__dos li,.mp__valores li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:1rem;align-items:start;padding:1.1rem 0;border-top:1px solid var(--linea)}
/* (2 nov, Nacho: «en ¿Qué es Feat? los iconos salen descentrados») Esta regla también
   cogía el círculo del icono (es otro span hijo del li) y lo volvía columna: el icono
   se quedaba pegado arriba. El círculo se queda con su rejilla centrada. */
.mp__dos li>span:not(.icono-circulo),.mp__valores li>span:not(.icono-circulo){display:flex;flex-direction:column;gap:.25rem}
.mp__dos b.t3{color:var(--crema)}
.mp__valores b{font-weight:600;color:var(--crema)}
.mp__dos li>span>span,.mp__valores li>span>span{color:rgba(247,241,228,.84);text-wrap:pretty}
.mp__expansion{background:var(--carbon-2);margin-top:clamp(1.5rem,4vw,2.5rem)}

/* ─────────── b2b mini ─────────── */
.b2b{border-block:1px solid var(--linea);padding:clamp(3.5rem,9vh,5.5rem) 0;position:relative;overflow:clip}
.b2b::before{content:"";position:absolute;inset:0;background:url(/img/insp/banquete-pano.jpg) center 42%/cover no-repeat}
.b2b::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(26,21,17,.93) 30%,rgba(26,21,17,.72) 68%,rgba(26,21,17,.5))}
.b2b .wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.b2b h2{font-size:var(--t2)}
.b2b p{color:rgba(247,241,228,.8);max-width:46ch;font-size:.95rem}
.b2b .btn{flex:none}
/* (3 nov, la B) El secundario, con el filo suave: el crema entero gritaba tanto como el primario. */
.btn--borde{background:transparent;border:1.5px solid rgba(247,241,228,.32);color:var(--crema);box-shadow:none}
.btn--borde:hover{background:rgba(247,241,228,.08);border-color:var(--crema)}
.escena{position:relative;min-height:100svh;display:grid;place-items:center;padding:6rem 0 4rem}
.escena + .escena{border-top:1px solid rgba(247,241,228,.07)}
.escena .wrap{display:grid;grid-template-columns:auto minmax(0,34rem);gap:clamp(2rem,5vw,4.5rem);align-items:center;justify-content:center}
/* (4 ago, Nacho: "la versión de tablet no se ve bien") ─────────────────────
   Este corte estaba en 880 px. La web tenía CINCO valores distintos —820, 860,
   880, 900 y 1000— para la MISMA decisión: "dos columnas ya no caben, apila".
   El efecto en tablet era el que se veía: a 834 px (iPad en vertical) unas
   secciones ya habían apilado y otras seguían en dos columnas de 380 px, así
   que media página iba en modo móvil y la otra media en modo escritorio.
   Todos los cortes de apilado pasan a 900, que es el que ya usaban la nav y el
   hero. Un solo umbral: o cabe en dos columnas, o no cabe. */
@media(max-width:900px){
.escena .wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.6rem}
}
.escena h3{font-size:var(--t1);margin-bottom:.8rem}
.escena h3 em{font-style:normal;color:var(--trigo)}
/* (31 jul) `:not(.rotulo)` — esta regla vestía de humo TODO párrafo de la escena,
   incluido el rótulo, que es una etiqueta y no texto corrido: se comía su trigo
   por especificidad (.escena p gana a .rotulo). Un rótulo no es un párrafo. */
.escena p:not(.rotulo){color:var(--humo);max-width:44ch;text-wrap:pretty}
.escena__visual{width:min(19rem,58vw)}
.escena__visual img{width:100%;height:auto;border-radius:50%;box-shadow:0 30px 70px -20px rgba(0,0,0,.8)}
/* cartilla 5×2 simétrica: el sello es el medallón de Feat (corredor con ánfora) */
.ev-anillo{-webkit-mask-image:radial-gradient(circle,transparent 77%,rgba(0,0,0,1) 77.5%);mask-image:radial-gradient(circle,transparent 77%,rgba(0,0,0,1) 77.5%)}
.ev-centro{-webkit-mask-image:radial-gradient(circle,rgba(0,0,0,1) 54%,transparent 54.5%);mask-image:radial-gradient(circle,rgba(0,0,0,1) 54%,transparent 54.5%)}
.ev-corona{-webkit-mask-image:radial-gradient(circle,transparent 53.5%,rgba(0,0,0,1) 54%,rgba(0,0,0,1) 77.5%,transparent 78%);mask-image:radial-gradient(circle,transparent 53.5%,rgba(0,0,0,1) 54%,rgba(0,0,0,1) 77.5%,transparent 78%)}
.ev-corona.t2{clip-path:polygon(50% 50%,188% -30%,210% 50%,188% 130%)}
/* anclas: aterrizan justo bajo el nav.
   El 72px fijo se quedo corto el 18 ago, cuando la nav paso a llevar el banner
   de cuenta atras encima: la nav mide 116px en movil y 104 en escritorio, asi
   que TODA ancla del sitio (las secciones de /club, sobre todo) aterrizaba 44px
   demasiado arriba y el titulo quedaba escondido detras de la barra. Ahora la
   medida la pone la propia nav en --nav-alto (miembro.js, ResizeObserver), asi
   que se corrige sola el dia que el banner se apague. El 72 queda de respaldo
   por si no hay JS. */
[id]{scroll-margin-top:calc(var(--nav-alto, 68px) + 14px)}

/* nav que se tiñe al bajar */
/* (5 ago) `.nav--solida` retirada. Hacía LO MISMO que `.nav--puesta` —dar
   fondo a la barra al pasar de 60px— pero con otro color (.86 de #221C17 contra
   .62 de #2B241E) y desde otro sitio (motion.js con ScrollTrigger, mientras
   miembro.js hacía lo suyo con scroll). Dos sistemas para una sola decisión, y
   el resultado dependía de cuál ganara: exactamente el tipo de incoherencia que
   se está cazando esta semana. Manda `.nav--puesta`, que es la que tiene el
   cristal y el filete. */
/* (31 oct, DOGMA v3 · D8) Aquí vivían el texto partido ([data-split], .linea-split)
   y las entradas animadas de motion.js con GSAP. En la web solo se mueven la
   cinta y la galería del Club: motion.js y GSAP se fueron. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ── Píldora de descarga de la app (6 ago) ──────────────────────────────
   La pinta FEAT.pildoraApp() y SOLO existe cuando hay app de verdad: si
   FEAT.APP.lista es false, el contenedor se queda vacío y con [hidden], así
   que estos estilos no llegan a aplicarse. No prometemos app hasta tenerla. */
.pildora-app{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
  padding:.9rem 1.1rem;border:1px solid var(--linea);border-radius:18px;
  background:color-mix(in srgb,var(--carbon-2) 70%,transparent)}
.pildora-app p{margin:0;flex:1 1 12rem;font-size:.95rem;line-height:1.45;color:var(--humo)}
.pildora-app .btn{flex:none}
@media(max-width:520px){
.pildora-app{flex-direction:column;align-items:stretch;text-align:center}
.pildora-app .btn{width:100%;justify-content:center}
}

/* (31 oct, DOGMA v3) Aquí vivían las guías de septiembre: .ghero (foto a sangre
   con velo), .gsec/.gsec--alt, .gbanda, .gpilares y .gcruce. Se retiran: la
   guía es .portada + .guia + .cierre, al final de este fichero. */

/* ══════════════════════════════════════════════════════════════════════════
   SISTEMA v2 + CAPA v3 (31 oct 2026) · design_handoff_sistema_feat/DOGMA.md
   Va al FINAL a propósito: a igual especificidad gana a lo de arriba.
   Filosofía: la gente no lee, asimila. Un título, una frase, una acción. La
   foto es un objeto enmarcado sobre el carbón, nunca un fondo con velo; el
   texto va siempre sobre color plano (salvo el portal de la home).
   ══════════════════════════════════════════════════════════════════════════ */
/* ── Tipografía (h1 .t1 · h2 .t2 · h3 y nombres .t3 · entradilla .t4) ── */
.t1{font-family:var(--f-display);font-weight:600;font-size:var(--t1);line-height:1;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
.t2{font-family:var(--f-display);font-weight:600;font-size:var(--t2);line-height:1.05;letter-spacing:.04em;text-transform:uppercase;text-wrap:balance}
/* (2 nov, Nacho: «tampoco hay que abusar de esta tipografía») Feat Titular es para lo que
   se lee de lejos: el nombre de la página (t1), los títulos de franja (t2), las cifras
   grandes, los nombres de los platos y la firma (inscripción, portal, inicial, carnet,
   pestañas). Lo que se LEE va en Hanken: el lema bajo el título (una frase entera en
   letra de cincel cansaba), los títulos de tarjeta, diálogo y apartado (t3), las líneas
   del carrito y los sellos de la foto. Lo vigila prueba-titular.mjs. */
.t2--frase{font-family:var(--f-texto);font-weight:600;text-transform:none;letter-spacing:-.01em;line-height:1.15}
.t3{font-family:var(--f-texto);font-weight:600;font-size:var(--t3);line-height:1.25;letter-spacing:-.005em;text-wrap:balance}
.t4{font-size:var(--t4);line-height:1.5}
/* (2 nov, revisión de concurso) Ninguna palabra sola en la última línea: «verdad»,
   «sello», «equipos.» y «vez» se quedaban colgando a 390 px. Los títulos se
   equilibran y el texto corrido evita la huérfana (Safari sin `pretty` corta
   como antes: no rompe nada). */
h1,h2,h3,h4{text-wrap:balance}
p,li,dd,dt,figcaption,summary{text-wrap:pretty}
.t1 em,.t2 em{font-style:normal;color:var(--terracota-cl)}
/* Énfasis de color solo en h1 y en el h2 del cierre (ronda 2) */
.t2 em{color:inherit}.cierre .t2 em{color:var(--terracota-cl)}
body.club .t1 em,body.club .cierre .t2 em{color:var(--trigo-cl)}

/* ── Iconos de web/club/iconos.svg en toda la web (7B) ── */
.ico{width:22px;height:22px;flex:none}
.ico--trigo{color:var(--trigo)}

/* ── Greca: separador entre franjas (máscara: el SVG usa currentColor) ── */
.greca{height:14px;max-width:var(--ancho-web);margin-inline:auto;background:var(--trigo);opacity:.45;
  -webkit-mask:url(/img/greca.svg) repeat-x center/auto 100%;mask:url(/img/greca.svg) repeat-x center/auto 100%}

/* ── FAQ abierta (ronda 3): <dl> con pregunta y respuesta a la vista ── */
.faq{border-top:1px solid var(--linea)}
.faq>div{display:flex;flex-wrap:wrap;gap:.4rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.faq dt{flex:1 1 200px;min-width:0;font-weight:600;line-height:1.4;color:var(--crema);text-wrap:balance}
.faq dd{flex:2 1 300px;min-width:0;color:rgba(247,241,228,.84);line-height:1.65;text-wrap:pretty}

/* ── Fila: foto pequeña o icono · nombre + una línea · dato o flecha ── */
.fila{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:.8rem 0;
  border-bottom:1px solid var(--linea);text-decoration:none;color:var(--crema)}
a.fila:hover{color:var(--trigo)}
.fila img{width:64px;height:64px;border-radius:var(--r-campo);object-fit:cover;object-position:center 58%}
.fila img.fila__hueco{object-fit:contain;padding:.75rem;background:var(--carbon-3)}  /* bowl sin foto propia (carta v2) */
.fila--guia{grid-template-columns:72px minmax(0,1fr) auto;gap:1rem;padding:1rem 0;border-block:1px solid var(--linea)}
.fila--guia img{width:72px;height:72px}
.fila--icono{grid-template-columns:44px minmax(0,1fr) auto;padding:.9rem 0}
.fila__nombre{font-weight:600;line-height:1.3}
.fila__nota{display:block;font-size:var(--t6);line-height:1.4;color:var(--humo)}
.fila__dato{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
.fila__flecha{color:var(--trigo);font-size:var(--t4)}

/* ── Flechas (1 nov, Nacho: «crea un sistema de flechas»). DOGMA D12 ──
   → AVANZA: al final de la fila o del enlace, en trigo (.fila__flecha).
   ← VUELVE: solo el icono, en la línea del título y a su izquierda, espejo
   del × de cerrar: mismo tamaño de toque (44 px), mismo trazo, mismo hover.
   Nunca en una fila propia ni con la palabra a la vista: «Volver» va en el
   aria-label. El margen negativo pone la punta de la flecha en el borde del
   texto, no el borde de la zona de toque. */
.volver{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:-12px;padding:0;
  background:none;border:none;border-radius:var(--r-campo);color:var(--humo);cursor:pointer;transition:color .18s,background .18s}
.volver svg{width:20px;height:20px}
.volver:hover{color:var(--crema);background:rgba(247,241,228,.08)}
.volver[hidden]{display:none}

/* ── Lista tipográfica (guías): filete + icono o numeral + título 600 + frase ── */
.lista{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.lista li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.6rem;padding:1rem 0;border-bottom:1px solid var(--linea)}
.lista--icono li{grid-template-columns:22px minmax(0,1fr);gap:.9rem;padding:.9rem 0}
.lista li>span:not(.icono-circulo){display:flex;flex-direction:column;gap:.15rem}
.lista b{color:var(--crema);font-weight:600}

/* ── Tira de datos: cifras con su etiqueta ── */
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));gap:1rem;padding:1.2rem 0;border-block:1px solid var(--linea)}
.datos>div{display:flex;flex-direction:column;gap:.35rem}
.datos dt{font-family:var(--f-display);font-weight:600;font-size:var(--t2);line-height:1;color:var(--crema)}
.datos dd{font-size:var(--t6);line-height:1.4;color:var(--humo)}

/* ── PIE único: cuatro columnas + fila legal ── */
footer{background:var(--carbon-3);border-top:1px solid var(--linea);font-size:var(--t6);color:var(--humo);line-height:1.5}
footer .pie__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:2rem 2.5rem;padding-block:3rem 1.5rem}
footer .pie__marca{grid-column:1/-1;max-width:28rem;display:flex;flex-direction:column;gap:.9rem}
/* (31 oct, Nacho: «el ancho del pie, el mismo problema») Con auto-fit y la marca
   ocupando la fila entera, las pistas vacías no se pliegan (la marca las ocupa) y
   en escritorio Feat · Guías · Contacto se quedaban en la mitad izquierda. En
   escritorio, una sola fila que llena el ancho: la marca y las tres columnas. */
@media(min-width:900px){
  footer .pie__cols{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}
  footer .pie__marca{grid-column:auto}
}
footer .pie__marca .marca{margin:0;min-height:0;align-self:flex-start}
footer .pie__marca p{color:var(--humo)}
footer .pie__lema{font-family:var(--f-etiqueta);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--trigo) !important}
footer nav,footer .pie__cols>div:not(.pie__marca){display:flex;flex-direction:column;gap:.5rem}
/* (2 nov) Dedo: los enlaces del pie medían 21 px de alto. En pantalla táctil
   el relleno sube la diana a 40 px y el hueco se descuenta, así que la lista
   mide casi lo mismo. */
@media(pointer:coarse){
  footer nav,footer .pie__cols>div:not(.pie__marca){gap:0}
  footer .pie__cols a,footer .pie__links a{padding-block:.6rem}
  footer .pie__links{gap:0 1.2rem}}
footer .pie__tit{font-family:var(--f-etiqueta);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--trigo);margin-bottom:.3rem}
footer .pie__cols a{color:var(--crema);text-decoration:none}
footer a:hover{color:var(--trigo)}
footer .pie__legal{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-block:1rem 2rem;border-top:1px solid var(--linea);font-size:.82rem}
footer .pie__links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-left:auto}
/* (2 nov) En móvil la fila legal se parte: el © quedaba a la izquierda y los
   enlaces, solos en la línea de abajo, pegados a la derecha. Abajo, a la izquierda. */
@media(max-width:600px){footer .pie__links{margin-left:0}}
footer .pie__links a{color:inherit;text-decoration:none}

/* ══ CAPA v3 · la «estética Club» en toda la web ══════════════════════════ */
/* D2 · FOTO ENMARCADA: toda <img> fuera del portal de la home. La proporción
   del marco es la del archivo: no se recorta para encajar. */
.foto{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-tarjeta);border:1px solid var(--marco)}
.foto--1x1{aspect-ratio:1}
.foto--4x3{aspect-ratio:4/3}
.foto--16x9{aspect-ratio:16/9}
.foto--16x10{aspect-ratio:16/10}
figure.figura{display:flex;flex-direction:column;gap:.6rem;margin:0}
figure.figura figcaption{font-size:var(--t6);line-height:1.5;color:var(--humo)}

/* D1 · PORTADA PARTIDA: texto | foto enmarcada. Sin velo ni sombra de texto. */
.portada{padding-block:clamp(2rem,5vw,4rem) clamp(2.5rem,6vw,5rem)}
.portada--guia{padding-bottom:0}
.portada__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(1.5rem,4vw,4rem);align-items:center}
.portada__texto{display:flex;flex-direction:column;gap:.9rem;max-width:34rem}
.portada__texto--club{gap:1.6rem}
.portada__texto p{margin:0}
.portada__foto{max-width:32rem;justify-self:end}
.portada__foto--ancha{max-width:36rem}
/* (2 nov, Nacho, sobre el Club: «ese espacio del medio que se genera dependiendo del
   ancho hay que corregirlo») Con dos columnas iguales, el texto (34rem como mucho) se
   quedaba a la izquierda de la suya y la foto (32rem) al fondo de la otra: entre los dos,
   un hueco que crecía con la pantalla. Después («todo poco simétrico») la foto pegada al
   texto dejaba el hueco al borde derecho. Ahora son dos mitades iguales: el texto llena la
   suya (cada frase guarda su medida de lectura) y la foto la otra, de borde a borde; si la
   pantalla es muy ancha, la foto no pasa del 80 % del alto y recorta lo justo. */
.portada__pic{display:contents}.portada__pic>source{display:none}
/* (3 nov, Nacho, en tableta: «aquí pasa lo mismo») En una columna el texto se quedaba en su
   carril de 34rem con un hueco a la derecha, y la foto, de 32rem, pegada al borde derecho con
   otro a la izquierda. Las dos llenan el ancho; la foto, como mucho al 70 % del alto. */
@media(max-width:899px){
  .portada__texto{max-width:none}
  .portada__foto,.portada__foto--ancha{width:100%;height:auto;max-width:none;max-height:70svh;object-fit:cover;justify-self:stretch}
}
@media(min-width:900px){
  .portada__rejilla{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .portada__texto{max-width:none}
  .portada__foto,.portada__foto--ancha{width:100%;height:auto;max-width:none;max-height:80svh;object-fit:cover;justify-self:stretch}
}

/* Rótulo de portada o cierre (D4: nunca dentro de tarjeta, fila o paso) */
.rotulo--solo{margin:0}
.rotulo--solo::after{display:none}

/* D3 · CIERRE PLANO: banda --carbon-3 con filete dorado arriba. */
.cierre{position:static;min-height:0;padding:0;text-align:left;background:var(--carbon-3);border-top:1px solid var(--marco)}
.cierre::after{content:none}
.cierre__rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,7vw,5.5rem)}
.cierre__texto{display:flex;flex-direction:column;gap:1.2rem;max-width:34rem}
.cierre__texto p{margin:0;max-width:44ch}
.cierre__texto p:not(.rotulo){color:rgba(247,241,228,.88)}
.cierre__foto{max-width:30rem;justify-self:end;object-position:center 40%}
.cierre__acciones{display:flex;flex-wrap:wrap;gap:.6rem;padding-top:.4rem}
/* (2 nov) En móvil los dos botones se apilan y salían de anchos distintos (209
   y 218 px): una columna de rejilla los iguala al más ancho, sin estirarlos. */
@media(max-width:520px){.cierre__acciones{display:grid;justify-content:start}}
.cierre .btn{min-height:52px;box-shadow:none}

/* D8 · CINTA en bucle (home, bajo el portal) */
/* (2 nov, Nacho: «publica») La cinta en azul Egeo, el segundo color de su Pinterest:
   una línea de mar bajo las dos puertas. Sobre egeo el trigo no llega a la norma de
   lectura (2,7:1), así que las cifras van en crema y las palabras en crema al 86 % (5:1). */
.cinta{overflow:hidden;border-block:1px solid rgba(247,241,228,.22);background:var(--egeo);padding:1.05rem 0}
.cinta__pista{display:flex;width:max-content;animation:desfila 92s linear infinite} /* 4 tandas: 2× el recorrido de la maqueta, misma velocidad */
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta__pista span{margin-right:3.5rem;font-family:var(--f-etiqueta);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(247,241,228,.86);white-space:nowrap}
.cinta__pista span b{font-weight:700;color:var(--crema)}
@keyframes desfila{to{transform:translateX(-50%)}}

/* D8 · GALERÍA en bucle (club) */
.galeria{margin-inline:calc(-1 * var(--gutter));height:clamp(150px,16vw,210px);overflow:hidden;
  -webkit-mask:linear-gradient(to right,transparent,rgba(0,0,0,1) var(--gutter),rgba(0,0,0,1) calc(100% - var(--gutter)),transparent);
          mask:linear-gradient(to right,transparent,rgba(0,0,0,1) var(--gutter),rgba(0,0,0,1) calc(100% - var(--gutter)),transparent)}
.galeria__pista{display:flex;width:max-content;height:100%;animation:desfila 135s linear infinite} /* 6 tandas: 3× el recorrido, misma velocidad */
/* (2 nov, Nacho: «no quiero que pare de rotar cuando pasa el ratón por encima») Sin pausa al
   pasar: para mirar una foto, se toca y se abre en grande. */
.galeria__foto{position:relative;flex:none;width:160px;margin:0 clamp(.5rem,1vw,.8rem) 0 0;border-radius:var(--r-tarjeta);overflow:hidden;border:1px solid var(--linea)}
.galeria__foto--ancha{width:300px}
.galeria__foto img{display:block;width:100%;height:100%;object-fit:cover}
.galeria__pie{position:absolute;inset:auto 0 0;padding:1.4rem .8rem .6rem;background:linear-gradient(to top,rgba(26,21,17,.9),rgba(26,21,17,0));font-size:var(--t7);font-weight:600;line-height:1.3;color:var(--crema)}

/* D9 · PESTAÑAS para contenido secundario del mismo rango */
/* (2 nov, Nacho: «el selector se ve poquito… más grande, más distintivo, que se note que
   es un selector») Era una fila de etiquetas pequeñas con un subrayado. Ahora es un
   selector de verdad: una píldora con los tres botones dentro, la letra de los títulos a
   tamaño de entradilla y el elegido relleno en crema, como un interruptor. */
.pestanas-barra{padding-top:clamp(1.5rem,4vw,2.5rem)}
/* (2 nov, Nacho: «se quedan espacios que se podrían arreglar con buenos encuadres y
   centrados») La píldora ocupa el ancho de la página, como lo que abre debajo: medio
   ancho dejaba un hueco a la derecha. Tres partes iguales a cualquier ancho. */
.pestanas{display:grid;width:100%;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;padding:6px;border-radius:var(--r-pildora);
  background:var(--carbon-3);border:1px solid var(--marco)}
.pestanas button,.pestanas a{appearance:none;border:0;border-radius:var(--r-pildora);min-height:52px;padding:0 1.6rem;background:none;cursor:pointer;
  font-family:var(--f-display);font-weight:600;font-size:var(--t4);letter-spacing:.06em;text-transform:uppercase;line-height:1.1;
  color:rgba(247,241,228,.72);white-space:nowrap;transition:background .2s var(--sal),color .2s var(--sal)}
.pestanas button:hover,.pestanas a:hover{color:var(--crema);background:rgba(247,241,228,.07)}
.pestanas button[aria-pressed="true"],.pestanas a[aria-current="page"]{background:var(--crema);color:var(--carbon)}
/* (3 nov) La misma píldora, con enlaces, parte «Empresas» en dos páginas (/empresas y /cocinas). */
.pestanas a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none}
@media(max-width:600px){
  .pestanas button,.pestanas a{padding:0 .4rem;font-size:var(--t5);letter-spacing:.02em;white-space:normal;text-wrap:balance}}
.pestanas__panel{padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,6vw,5rem)}
/* (1 nov, Nacho) Al cambiar de pestaña no se reajusta nada: con JS los paneles
   comparten celda y la zona mide lo que el más alto. El de fuera, visibility
   (no `hidden`, que lo sacaría del cálculo). Sin JS se leen los tres seguidos. */
.pestanas__paneles[data-apiladas]{display:grid}
.pestanas__paneles[data-apiladas]>.pestanas__panel{grid-area:1/1;min-width:0}
.pestanas__panel--fuera{visibility:hidden}

/* ══════════════════════════════════════════════════════════════════
   EMPRESAS · DOGMA v3 (31 oct 2026, design_handoff_sistema_feat)
   Portada partida (texto | bowl enmarcado), tres pasos con icono en
   círculo, el banquete enmarcado con su frase al lado, las ventajas y el
   formulario B2B plano. (3 nov) Sube aquí desde empresas.html: /cocinas, la
   otra mitad de «Empresas», usa las mismas piezas (y .emp-reparto, suya).
   ══════════════════════════════════════════════════════════════════ */
.emp-portada h1{max-width:16ch}
.emp-portada .emp-lema em,.solicitud .emp-lema em{color:var(--terracota-cl)}   /* (3 nov) y el de /equipo */
.emp-portada .portada__texto>p:not(.t2){max-width:44ch;font-size:var(--t4);line-height:1.5;color:rgba(247,241,228,.92)}
.emp-portada .btn{align-self:flex-start;margin-top:.4rem}

.emp-pasos{padding-block:clamp(2.5rem,6vw,5rem)}
.emp-pasos .wrap{display:flex;flex-direction:column;gap:1.6rem}
.emp-pasos ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1rem}
.emp-pasos li{display:flex;flex-direction:column;gap:.8rem;padding:1.4rem;border-radius:var(--r-tarjeta);background:var(--carbon-2);border:1px solid var(--linea)}
.emp-pasos li>span:last-child{color:var(--humo);text-wrap:pretty}

.emp-banda{padding-bottom:clamp(2.5rem,6vw,5rem)}
.emp-banda figure{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:clamp(1.5rem,4vw,3rem);align-items:center;margin:0}
.emp-banda figcaption{max-width:34ch;font-family:var(--f-texto);font-weight:500;font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.3;color:var(--crema)}
.emp-banda figcaption em{font-style:normal;color:var(--terracota-cl)}

.emp-ventajas{padding-block:clamp(2.5rem,6vw,5rem);background:var(--carbon-2)}
.emp-ventajas .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2rem;align-items:start}
.emp-ventajas ul{list-style:none;display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.emp-ventajas li{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid var(--linea);color:rgba(247,241,228,.82);text-wrap:pretty}
.emp-ventajas li .ico{margin-top:3px}
.emp-ventajas li b{color:var(--crema);font-weight:600}

/* (3 nov) «¿Ya trabajas con Feat? Entra en tu área de cocina» (/cocinas), discreto. */
.emp-acceso,.emp-portada .portada__texto>p.emp-acceso{margin:0;font-size:var(--t6);color:var(--humo)}
.emp-acceso a{color:var(--crema);text-underline-offset:3px}
/* (3 nov) Las dos rutas de «Cocinar Feat» (/cocinas): darse de alta o entrar en su cuenta, del mismo peso. */
.emp-rutas{display:flex;flex-wrap:wrap;gap:.8rem}
.emp-rutas>.btn{flex:1 1 15rem;justify-content:center;text-align:center}

/* ── LOS FORMULARIOS DE «EMPRESAS» (3 nov) ──────────────────────────────────
   «¿Lo montamos en tu oficina?» (/empresas) y «Quiero ser cocina Feat» (/cocinas):
   planos, en una columna y con las opciones en píldoras. Vivían en empresas.html;
   suben aquí al ser dos. Ninguno es la caja del Club: no crean socio. */
.solicitud{padding-block:clamp(2.5rem,6vw,5rem)}
.solicitud .wrap{display:flex;flex-direction:column;gap:1.2rem;text-align:center}
.solicitud .wrap>p{color:rgba(247,241,228,.8);text-wrap:pretty}
.solicitud form{display:flex;flex-direction:column;gap:.9rem;text-align:left}
.solicitud .campo,.solicitud fieldset{position:relative;flex:none;display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;border:0;
  font-size:var(--t6);font-weight:500;color:rgba(247,241,228,.78)}
.solicitud legend{width:100%;padding:0;margin-bottom:.35rem}
.solicitud .campo input,.solicitud .campo select,.solicitud .campo textarea{display:block;width:100%;min-height:48px;padding:0 1rem;border-radius:var(--r-campo);
  background:var(--carbon-3);border:1px solid var(--linea);color:var(--crema);font:inherit;font-size:var(--t5)}
.solicitud .campo textarea{min-height:5.5rem;padding:.75rem 1rem;resize:vertical}
.solicitud .campo :focus{border-color:var(--crema);outline:none}
.solicitud .campo [aria-invalid="true"]{border-color:var(--terracota)}
.solicitud .campo small{font-weight:400;color:var(--humo)}
.solicitud .campo__eco{top:auto;bottom:24px;translate:0 50%}
/* (3 nov, Nacho: «los formularios quedan mal, especialmente las casillas de días») Las casillas
   son píldoras, como el voto de «Crea tu Bowl»: sin el cuadrado del navegador (el input sigue
   ahí, invisible y encima, para el teclado y el lector de pantalla), la marcada rellena y con su
   check. La misma regla vale en las pantallas de trabajo: trabajo.css da la vuelta a los tokens.
   .chips--rejilla las pone en columnas iguales; .chips--dias, los días en una sola fila. */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips--rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9.5rem,100%),1fr))}
.chips--dias{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.4rem}
.chip{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:.5rem 1.1rem;
  border-radius:var(--r-pildora);cursor:pointer;background:var(--carbon-3);border:1px solid var(--marco);color:var(--crema);
  font-size:var(--t5);font-weight:500;line-height:1.2;text-align:center;transition:background .15s var(--sal),color .15s var(--sal)}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip:hover{border-color:var(--crema)}
.chip:has(input:checked){background:var(--crema);border-color:var(--crema);color:var(--carbon);font-weight:600}
.chip:has(input:checked)::before{content:"";flex:none;width:.32em;height:.62em;border:solid currentColor;border-width:0 .15em .15em 0;
  transform:translateY(-.08em) rotate(45deg)}
.chips--dias .chip{padding:.5rem 0}
.chips--dias .chip::before{display:none}
.chip:has(input:focus-visible){outline:2px solid var(--terracota);outline-offset:2px}
.solicitud .nota,.solicitud .consent{margin:0;max-width:none;font-size:var(--t6);color:var(--humo);text-align:center;min-height:0}
/* (2 nov) En móvil la columna ya es la pantalla entera: centrado, el título y
   las notas no compartían eje con las etiquetas de los campos. Todo a la izquierda. */
@media(max-width:600px){.solicitud .wrap,.solicitud .nota,.solicitud .consent{text-align:left}}
.solicitud .nota[data-estado="error"]{color:var(--aviso);font-weight:600}
.solicitud .consent a{color:inherit}
.solicitud .wa{margin:0;font-size:.95rem;color:rgba(247,241,228,.8)}
.solicitud .wa a{color:inherit}
.solicitud .btn[disabled]{opacity:.6;cursor:default}
.solicitud .gracias{padding:1.4rem;border-radius:var(--r-tarjeta);background:var(--carbon-2);border:1px solid var(--marco);text-align:left}
.solicitud .gracias strong{display:block;margin-bottom:.3rem;font-family:var(--f-texto);font-weight:700;font-size:var(--t3);color:var(--trigo)}

/* D4 · ICONO EN CÍRCULO: sustituye a rótulos y numerales de tarjetas, pasos y filas */
.icono-circulo{width:44px;height:44px;border-radius:50%;border:1px solid var(--marco-fuerte);display:grid;place-items:center;flex:none}
.icono-circulo svg{width:22px;height:22px;color:var(--trigo)}

/* Cartilla: grande (cierre del Club) y en fila (portada del Club, cierre de la home) */
.cartilla{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem;max-width:300px}
.cartilla__sello{aspect-ratio:1;border-radius:50%;border:1.5px solid var(--trigo);background:var(--carbon-3);display:grid;place-items:center}
.cartilla__sello[data-puesto]{background:rgba(201,151,59,.22)}
.cartilla__sello img{width:60%;height:auto}
.cartilla--grande{grid-template-columns:repeat(5,1fr);gap:clamp(.6rem,1.5vw,1rem);max-width:28rem}
.cartilla--fila{grid-template-columns:repeat(10,1fr);gap:.4rem;max-width:26rem}

/* D8 · MOVIMIENTO: solo .cinta__pista y .galeria__pista. Nada más se mueve. */
@media (prefers-reduced-motion:reduce){.cinta__pista,.galeria__pista{animation:none}}

/* ══ GUÍAS (ronda 3 + v3): portada partida y artículo a una columna ══════════
   Índice numerado, secciones 01…08 con h2 en Cinzel de caja baja, listas
   tipográficas, filas a la carta y a las otras guías, una figura enmarcada,
   la greca antes de las preguntas y el cierre plano. */
.portada__entradilla{max-width:44ch;color:rgba(247,241,228,.92);text-wrap:pretty}
.portada__entradilla b{color:var(--crema)}
.guia{width:100%;max-width:var(--ancho-lectura);margin-inline:auto;padding:clamp(2rem,5vw,3.5rem) var(--gutter) clamp(2.5rem,6vw,5rem);display:flex;flex-direction:column}
.guia__indice{display:flex;flex-direction:column;gap:.7rem;padding:1.2rem 0;border-block:1px solid var(--linea)}
.guia__indice ol{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:.35rem 2rem}
.guia__indice a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.4rem;align-items:baseline;min-height:32px;text-decoration:none;color:var(--crema)}
.guia__indice a:hover{color:var(--trigo)}
.guia__eti{font-family:var(--f-etiqueta);font-size:var(--t7);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--trigo)}
.guia__num{font-family:var(--f-etiqueta);font-size:var(--t7);font-weight:700;letter-spacing:.1em;color:var(--trigo)}
.guia__cab{display:flex;flex-direction:column;gap:.5rem}
.guia__cab .guia__num{letter-spacing:.22em}
.guia section{display:flex;flex-direction:column;gap:1rem;padding-top:2.8rem}
.guia h2{font-family:var(--f-texto);font-weight:700;font-size:var(--t3);line-height:1.25;color:var(--crema);text-wrap:balance}
.guia h3{margin-top:.6rem;font-size:var(--t6);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--crema)}
.guia p{color:rgba(247,241,228,.84);text-wrap:pretty}
.guia b{color:var(--crema);font-weight:600}
.guia .entradilla{margin-top:2rem;font-size:var(--t4);line-height:1.5;color:rgba(247,241,228,.92)}
.guia .guia__nota{font-size:var(--t6);line-height:1.5;color:var(--humo)}
.guia figure{margin-top:2.8rem;display:flex;flex-direction:column;gap:.6rem}
.guia figcaption{font-size:var(--t6);line-height:1.5;color:var(--humo)}
.guia>.greca{width:100%;margin-top:3.5rem}
/* (2 nov, revisión de concurso) En escritorio la guía tenía DOS ejes: la portada
   arrancaba en el margen de la web y el artículo, centrado, 260 px más adentro.
   Ahora el artículo sale del mismo margen que la portada, el logo y el pie, y el
   índice «En esta guía» pasa a la columna de la derecha, quieto mientras lees
   (sticky nativo: nada de pins, que rompían las anclas). La columna del índice
   llena el resto del ancho, así que la regla de anchos se cumple. */
@media(min-width:1100px){
  .guia{max-width:none;margin-inline:0;display:grid;align-items:start;
    grid-template-columns:minmax(0,var(--ancho-lectura)) minmax(13rem,1fr);column-gap:clamp(3rem,6vw,6rem)}
  .guia>*{grid-column:1}
  .guia>.guia__indice{grid-column:2;grid-row:1/span 40;position:sticky;top:calc(var(--cabecera) + 2rem);
    max-height:calc(100vh - var(--cabecera) - 4rem);overflow-y:auto;
    padding:0 0 0 1.5rem;border-block:0;border-left:1px solid var(--linea)}
  .guia__indice ol{grid-template-columns:minmax(0,1fr)}
}
.guia__dato{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;padding:1.2rem 0;border-block:1px solid var(--linea)}
.guia__dato b{font-family:var(--f-display);font-weight:600;font-size:var(--t2);line-height:1}
.guia__dato span{font-size:var(--t6);line-height:1.4;color:var(--humo)}
.datos--guia{gap:1rem 1.5rem}
.datos--guia dt{font-size:var(--t3)}
.lista__d{color:rgba(247,241,228,.84)}
.lista li>.guia__num{line-height:1.9}
.lista--icono .ico{margin-top:3px}
.lista--envio li{display:flex;align-items:center;gap:.8rem;padding:.75rem 0}
.ico--arena{color:var(--arena)}
.filas{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.fila__tx{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.fila--guia .fila__tx{gap:.15rem}
.fila b{font-weight:600}
.guia__mapa{display:flex;flex-direction:column;gap:.6rem}
/* Los 19 distritos, plegados (ronda 3) */
.distritos summary{display:flex;align-items:center;justify-content:space-between;gap:.8rem;min-height:48px;padding:0 .2rem;
  border-bottom:1px solid var(--linea);list-style:none;cursor:pointer;font-weight:600;color:var(--crema)}
.distritos summary::-webkit-details-marker{display:none}
.distritos summary:hover{color:var(--trigo)}
.distritos__ocultar,.distritos__menos,.distritos[open] .distritos__ver,.distritos[open] .distritos__mas{display:none}
.distritos[open] .distritos__ocultar,.distritos[open] .distritos__menos{display:inline}
.distritos ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 2rem}
.distritos li{display:flex;flex-direction:column;gap:.1rem;padding:.7rem 0;border-bottom:1px solid var(--linea)}

/* El ranking de zonas junto al mapa (lo pinta /api/zonas desde marca.js) */
.mapa__wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:2rem;align-items:center}
.mapa__texto{display:flex;flex-direction:column;gap:.9rem}
.mapa__texto>p{color:rgba(247,241,228,.84)}
.mapa__fases{list-style:none;margin-top:.4rem;display:flex;flex-direction:column;border-top:1px solid var(--linea);counter-reset:fase}
.mapa__fases li{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--linea);counter-increment:fase}
.mapa__fases li::before{content:counter(fase,upper-roman);font-family:var(--f-display);font-weight:700;color:var(--trigo);width:1.4rem}
.mapa__fases b{font-weight:600;color:var(--crema)}
/* «próximamente»: píldora oliva (en zona / disponible) */
.mapa__fases span:not([data-n]){margin-left:auto;padding:4px 10px;border-radius:var(--r-pildora);background:rgba(124,138,77,.28);
  border:1px solid var(--oliva);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--crema)}
/* Con datos: la zona que lidera se marca en trigo y la cifra va en humo */
.mapa__fases li[data-lider] b{color:var(--trigo)}
.mapa__fases span[data-n]{margin-left:auto;font-size:var(--t6);color:var(--humo);font-variant-numeric:tabular-nums}
.mapa__pie{font-size:var(--t6);color:var(--humo)}
/* ── EL MAPA (ronda 4): el SVG en línea de la portada, también en la guía de
   reparto. Quieto (D8): sin trazado de rutas ni latido; las ciudades con gente
   se encienden en trigo. ── */
.mapa__lienzo{margin:0}
.mapa__lienzo svg{width:100%;height:auto;display:block;overflow:visible}
.mapa__silueta{fill:rgba(247,241,228,.055);stroke:rgba(247,241,228,.34);stroke-width:2;stroke-linejoin:round}
.mapa__ruta{fill:none;stroke:var(--trigo);stroke-width:1.4;stroke-linecap:round;opacity:.75}
.mapa__ruta--tenue{stroke:var(--piedra);opacity:.5;stroke-dasharray:3 5}
.mapa__ciudad text{font-family:var(--f-etiqueta);font-size:.95rem;font-weight:700;letter-spacing:.14em;text-anchor:middle;
  fill:var(--humo);paint-order:stroke;stroke:rgba(26,21,17,.55);stroke-width:3px}
.mapa__ciudad .mapa__punto{fill:var(--piedra)}
.mapa__ciudad--luego .mapa__punto{fill:var(--trigo)}
.mapa__ciudad--luego text{fill:var(--crema)}
.mapa__ciudad--ahora .mapa__punto{fill:var(--terracota)}
.mapa__ciudad--ahora text{fill:var(--terracota-cl);font-size:17px}
.mapa__halo{fill:var(--terracota);opacity:.18}
.mapa__ciudad--vivo .mapa__punto{fill:var(--trigo)}
.mapa__ciudad--vivo text{fill:var(--crema)}
.mapa__luz{fill:var(--trigo);opacity:.16}

/* ══ LAS PÁGINAS LEGALES (aviso legal, condiciones, privacidad) · 31 oct, DOGMA v3 ══
   Vivían en tres <style> copiados uno de otro. Ahora es un artículo de lectura
   como el de las guías (.guia): h1 de página, h2 de sección en Cinzel t3, texto a
   .84 y la fecha en --humo (en --piedra no llegaba a AA). `body main.legal` gana a
   `body:not(.hero-a-sangre) main`, que antes le quitaba el aire de arriba y
   dejaba el h1 pegado a la cabecera. */
body main.legal{padding:calc(var(--cabecera) + clamp(2rem,5vw,3.5rem)) 0 clamp(2.5rem,6vw,5rem)}
.legal .wrap{max-width:var(--ancho-lectura)}
.legal h1{margin-bottom:.8rem}
.legal h1 em{font-style:normal;color:var(--trigo)}
.legal .intro{font-size:var(--t4);line-height:1.5;color:rgba(247,241,228,.92);margin-bottom:2rem;text-wrap:pretty}
.legal h2{font-family:var(--f-texto);font-weight:700;font-size:var(--t3);line-height:1.25;color:var(--crema);margin:2.6rem 0 .8rem;text-wrap:balance}
.legal h3{font-size:var(--t6);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--crema);margin:1.6rem 0 .5rem}
.legal p,.legal ul{color:rgba(247,241,228,.84);margin-bottom:.9rem;text-wrap:pretty}
.legal ul{margin-left:1.2rem}
.legal li{margin-bottom:.4rem}
.legal b{color:var(--crema);font-weight:600}
.legal a{color:var(--crema)}
.legal .fecha{font-size:var(--t6);color:var(--humo);margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--linea)}
.legal .aviso{border-block:1px solid var(--linea);padding:1rem 0;margin-bottom:1.2rem}
.legal .aviso p:last-child{margin-bottom:0}
.legal table{width:100%;border-collapse:collapse;font-size:var(--t6);margin:.6rem 0 1rem}
/* (31 oct, prueba-desborde) La tabla medía 407px en un móvil de 360: las palabras
   largas («finalidades», los plazos) no parten. Que partan dentro de su celda. */
.legal th,.legal td{overflow-wrap:anywhere;hyphens:auto}
.legal th{text-align:left;font-family:var(--f-etiqueta);font-size:var(--t7);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--trigo);padding:.5rem .6rem;border-bottom:1px solid var(--linea)}
.legal td{padding:.6rem;border-bottom:1px solid var(--linea);color:var(--humo);vertical-align:top}
.legal td b{color:var(--crema)}