@charset "UTF-8";
/* ════════
   SALA CALYPSO · salacalypso.es
   Sistema visual — hoja única. Sin framework, sin build, sin CDN, sin terceros.
   Implementa el §5 del BRIEF-WEB-CALYPSO.md. v1.0 · 2026-08-10
   ────────
   ORIENTACIÓN: MÓVIL PRIMERO. Todo lo que hay antes del §9 es el CSS de móvil.
   TODAS las media queries del fichero son (min-width: …). No hay ni una
   (max-width: …) y no se debe añadir ninguna: el diseño SUBE, no BAJA.

   ██ REGLA DE CONTRASTE QUE NO SE PUEDE VIOLAR ██

     SOBRE RELLENO DE COLOR, EL TEXTO ES SIEMPRE #0E1B24 (--tinta).
     NUNCA blanco. NUNCA crema. En ningún botón, chip, etiqueta ni distintivo.

     Medido con la fórmula oficial WCAG 2.x (brief §5.1-B):
       #0E1B24 sobre coral #FF5E5B .....  5,83:1  ✅
       #0E1B24 sobre turquesa #00B7A8 ..  6,94:1  ✅
       #0E1B24 sobre dorado #E8B84B ....  9,48:1  ✅
       #0E1B24 sobre crema #F4EBDD ..... 14,80:1  ✅
       blanco sobre coral .............  2,9982:1 🔴 PROHIBIDO
       crema  sobre coral .............  2,54:1   🔴 PROHIBIDO
       blanco sobre turquesa ..........  2,52:1   🔴 PROHIBIDO
       crema  sobre turquesa ..........  2,13:1   🔴 PROHIBIDO
       blanco sobre dorado ............  1,84:1   🔴 PROHIBIDO

     El caso traicionero es BLANCO SOBRE CORAL: 2,9982:1. Un verificador que
     redondee a dos decimales lo da por 3,00 y lo deja pasar como texto
     grande. NO PASA. Falla por 0,0018. No lo reintroduzcas.

   OTRAS REGLAS DURAS DEL SISTEMA (brief §5):
   · Sobre la base #0E1B24 los cuatro colores pasan AA de texto normal, pero
     TEXTO LARGO SIEMPRE EN CREMA: turquesa y coral no llegan a AAA y sobre
     casi-negro producen halo.
   · Dentro de .seccion--crema el ÚNICO texto válido es #0E1B24 — kickers
     incluidos, que en el resto de la web van en dorado. Coral 2,54 · turquesa
     2,13 · dorado 1,56 sobre crema: los tres fallan incluso como componente.
   · Un botón coral o turquesa sobre crema incumple SC 1.4.11 (2,54 y 2,13
     contra el umbral 3:1). Lleva contorno #0E1B24 de 2 px. Está automatizado
     con `.seccion--crema .btn--…`: no lo quites.
   · Nunca `font-weight` ≤ 300 sobre #0E1B24.
   · Nunca `opacity` sobre texto: usar los HEX compuestos (--texto-2/--texto-3).
   · La elevación se hace con COLOR, no con sombra. Solo dos sombras en toda
     la web: la de la barra fija y los glow de color. Cero drop-shadow.
   · CERO PARPADEO en toda la web (SC 2.3.1). El neón se sugiere con glow fijo.
   · CERO TELÉFONO en cualquier forma. Este fichero no contiene ni puede
     contener un enlace de llamada, un número, ni un componente pensado para
     llamar o para abrir una app de mensajería. No se le añade ninguno.

   ÍNDICE  (busca «═══ N ·» para saltar de sección)
     1 @font-face · 2 tokens :root (2.7 = SUSTITUCIÓN DE FOTOS) · 3 reset y
     base · 4 accesibilidad · 5 layout · 6 tipografía · 7 componentes ·
     8 la única animación · 9 media queries · 10 impresión
   ════════ */


/* ═══ 1 · TIPOGRAFÍAS ════════
   AUTOALOJADAS. Cero peticiones a servidores de fuentes de terceros.
   Motivo (brief §8.3): el CERO TERCEROS es lo único que permite prescindir
   del banner de cookies y publicar una privacidad de un párrafo; y con las
   fuentes remotas el navegador transmite la IP del visitante a EE. UU. antes
   de cualquier consentimiento — el ángulo RGPD que lo hace inasumible.
   ⚠️ Si alguien las reintroduce como recurso remoto, VUELVEN el banner y la
      política de cookies (condición de reversión del brief §8.6).

   Descargados a disco el 2026-08-10 (instancias ESTÁTICAS de una sola
   variación, subconjunto `latin`). En ejecución no se contacta con nadie:
       inter-400-latin.woff2 23.664 B · inter-600-latin.woff2 24.452 B
       outfit-700-latin.woff2 14.060 B  →  62.176 B = 60,7 KB
   Reproduce dígito a dígito la medición del brief §8.3.
   Los `-latin-ext` están en disco pero un visitante español NO los descarga:
   el `unicode-range` los deja fuera. Coste en la primera carga: 0 B.

   Monoton NO viaja a la web (brief §8.3): el wordmark se compone en Monoton
   y se exporta como SVG en trazados. Ahorra 16.492 B y el FOUT del elemento
   de marca. No añadas un @font-face de Monoton.

   RUTAS ABSOLUTAS DESDE LA RAÍZ (`/assets/fonts/…`) a propósito: así funcionan
   igual con <link> que pegando la hoja en un <style> del <head>.
   ⚠️ El sitio se sirve desde un servidor con raíz en `web/`. No vale file://.
   ════════ */

/* Inter 400 — cuerpo */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/inter-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/inter-400-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Inter 600 — énfasis y kickers */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/inter-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url("/assets/fonts/inter-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Outfit 700 — titulares, cifra display y botones */
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/outfit-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Outfit";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("/assets/fonts/outfit-700-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* ═══ 2 · TOKENS ════════ */
:root{

  /* ── 2.1 · COLOR ────────
     PALETA FIJA. Cinco colores. No se cambian, no se «ajustan», no se añade
     ninguno. La única libertad es la proporción (brief R-3 y §5.2):
       #0E1B24 ≥60 %  ·  #F4EBDD ~22 %  ·  #FF5E5B ~10 %
       #E8B84B ~5 %   ·  #00B7A8 ~3 %                                      */
  --base:      #0E1B24;   /* Negro Medianoche */
  --turquesa:  #00B7A8;   /* Turquesa Calypso */
  --coral:     #FF5E5B;   /* Coral Atardecer  */
  --dorado:    #E8B84B;   /* Dorado Arena     */
  --crema:     #F4EBDD;   /* Crema Concha     */

  /* Tinta: el ÚNICO color de texto válido sobre cualquier relleno de color
     y sobre la sección crema. Es #0E1B24. Alias con nombre propio para que
     la regla se lea sola en cada declaración. */
  --tinta:     #0E1B24;

  /* Superficies y bordes derivados — HEX COMPUESTOS, calculados sobre la
     base. Se usan SIEMPRE en lugar de `opacity` (brief §5.1-E). */
  --sup:          #1C272F;  /* crema 6 %  · fondo de tarjeta. Sobre él:
                               crema 12,87 · dorado 8,25 · turquesa 6,04 ·
                               coral 5,07 — los cuatro pasan AA */
  --linea:        #5A5232;  /* dorado 35 % · 2,24:1 · SOLO DECORACIÓN */
  --linea-fuerte: #7B6A38;  /* dorado 50 % · 3,30:1 · mínimo si un borde
                               dorado es el ÚNICO indicador de un control */
  --texto:        #F4EBDD;  /* 14,80:1 · texto largo, siempre este */
  --texto-2:      #AFADA6;  /* crema 70 % · 7,79:1 · secundario, pies */
  --texto-3:      #818380;  /* crema 50 % · 4,57:1 · ÚLTIMO nivel válido
                               para texto normal. Por debajo, nada de texto */
  --borde-campo:  #6A6E6E;  /* crema 40 % · 3,39:1 · suelo de borde de input */

  /* ── 2.2 · TIPOGRAFÍA ────────
     Reserva alineada del brief §8.3. Nunca font-weight ≤ 300 sobre la base. */
  --f-titular: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-cuerpo:  "Inter",  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala (px y rem, base 16) — brief §5.3 */
  --t-h1:         clamp(2.25rem, 9vw, 4rem);      /* 36 → 64 px */
  --t-cifra:      clamp(2.75rem, 12vw, 5.5rem);   /* 44 → 88 px */
  --t-h2:         clamp(1.75rem, 6vw, 2.75rem);   /* 28 → 44 px */
  --t-h3:         1.25rem;                        /* 20 px */
  --t-kicker:     0.8125rem;                      /* 13 px */
  --t-entradilla: 1.1875rem;                      /* 19 px */
  --t-cuerpo:     1.0625rem;                      /* 17 px */
  --t-aux:        0.9375rem;                      /* 15 px */
  --t-boton:      1.0625rem;                      /* 17 px */
  --t-campo:      1rem;                           /* 16 px — SUELO DURO.
                     Por debajo, Safari iOS hace auto-zoom al enfocar. Se
                     arregla subiendo la fuente, NUNCA con maximum-scale=1
                     ni user-scalable=no (incumple WCAG 1.4.4). */

  --lh-h1: 1.05;  --lh-cifra: 1;    --lh-h2: 1.1;   --lh-h3: 1.2;
  --lh-kicker: 1.3; --lh-entradilla: 1.55; --lh-cuerpo: 1.6; --lh-aux: 1.5;

  --medida: 34rem;   /* longitud máxima de línea: 65–70 caracteres */

  /* ── 2.3 · ESPACIADO (escala base 4) y MEDIDAS ──────── */
  --e-4:4px;  --e-8:8px;  --e-12:12px; --e-16:16px; --e-24:24px;
  --e-32:32px; --e-48:48px; --e-64:64px; --e-96:96px; --e-128:128px;

  --ancho:         1120px;  /* contenedor */
  --pad-lateral:   20px;    /* → 32px en ≥768 */
  --pad-seccion:   64px;    /* → 96px en ≥768 · 128px en ≥1200 */
  --gap-tarjetas:  16px;    /* → 24px en ≥768 */
  --gap-toque:     8px;     /* separación mínima entre objetivos táctiles */

  --h-toque:  48px;   /* mínimo de TODO lo interactivo (WCAG 2.2 SC 2.5.8
                         permite 24; 24 px no lo acierta un pulgar a las 2
                         de la madrugada — brief §5.6) */
  --h-cta:    56px;   /* CTA principal */
  --h-header: 72px;
  --h-barra:  7.375rem;  /* = 118 px a raíz 16. Alto de reserva de la barra fija
                         en móvil. main.js lo mide y lo corrige; sin JS este
                         valor manda. Se baja en ≥560.
                         ██ VA EN rem, NO EN px, Y ES DELIBERADO ██
                         La barra crece con la letra (todo su texto está en
                         rem). Con la reserva en píxeles fijos, quien agranda
                         la letra del navegador y navega SIN JS se quedaba con
                         118 px reservados para una barra de ~240 px: la línea
                         del copyright quedaba tapada y fuera de alcance, sin
                         barra de scroll que delatara que faltaba algo. Eso es
                         pérdida de contenido al redimensionar el texto
                         (SC 1.4.4). En rem, la reserva sigue a la letra sola.
                         A tamaño por defecto vale exactamente lo mismo que
                         antes, así que no cambia ni un píxel del diseño. */

  /* ── 2.4 · RADIOS ──────── */
  --r-sm:   8px;                   /* chips, inputs */
  --r-md:   14px;                  /* botones */
  --r-lg:   24px;                  /* tarjetas */
  --r-arco: 999px 999px 24px 24px; /* EFECTO 3 · el arco tropical.
                                      Es el gesto más reconocible del sistema
                                      y la forma que ata la marca sin depender
                                      de fotos. Si algo hay que repetir, es
                                      este. Se conserva cuando lleguen. */
  --r-pill: 999px;                 /* chip de estado */

  /* ── 2.5 · MOVIMIENTO Y CAPAS ──────── */
  --dur:  240ms;
  --ease: ease-out;
  --z-barra:  40;

  /* ── 2.6 · EFECTOS RETRO-TROPICALES (brief §5.5) ──────── */

  /* EFECTO 6 · RETIRADO en el pase de arte (2026-08-10). El grano vivía en
     `body::after` con mix-blend-mode:overlay. Con overlay sobre fondo oscuro
     la amplitud es 2·Cb·Cs: con Cb=14/255 el recorrido MÁXIMO a opacidad 1 es
     28/255, y al .05 que tenía eran ±1,5 — medido por V5, imperceptible. Para
     ±4 haría falta opacidad ≈.29, y a esa opacidad la sección crema y los
     discos claros de las tarjetas se ensucian. No se puede subir: se quita.
     La textura se recupera donde SÍ se ve: franjas (efecto 2) y marcos (§7.5). */

  /* EFECTO 7 · La hoja de palmera como marca de agua.
     Isotipo en SVG en línea (dorado #E8B84B baked-in: un SVG externo en
     background-image NO puede heredar currentColor, así que el color va
     dentro). Se usa en .seccion--marca y dentro de .marco.
     ⚠️ NO cambiar la ruta a url("/assets/img/isotipo-calypso.svg"): ese fichero
        trae color="#00B7A8" y fill="#FF5E5B" y saldría una marca de agua
        turquesa y coral. El color se hornea aquí, en el data-URI.
     PASE DE ARTE 2026-08-10: era circle+arco, o sea un disco y una «C». Ahora
     es el path `sc-palma` REAL del isotipo (siete frondas + media luna), con
     su viewBox de 0 0 100 100. El circle `sc-sol` NO se copia: en silueta a un
     solo color se comería las frondas y volveríamos al borrón. */
  --marca-agua:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23E8B84B' d='M89.56 22.98C87.77 19.79 85.17 17.18 82.05 15.4C79.57 10.74 75.74 7.41 71.2 5.84C68.71 10.05 66.49 14.09 64.63 17.68C64.03 14.72 63.29 11.25 62.41 7.49C56.63 3.48 49.98 2.16 43.69 3.63C44.83 12.13 46.19 19.97 47.63 26.7C44.69 22.11 40.95 16.8 36.55 11.14C29.14 11.56 22.6 14.83 18.1 20.24C24.66 27.29 31.12 33.62 37.04 38.89C31.24 36.33 24.29 33.73 16.58 31.35C12.46 35.37 10.16 40.6 10.04 46.19C10.36 50.56 11.39 54.92 13.05 58.92A44.24 44.24 0 0 0 89.56 82.55A33.87 33.87 0 1 1 89.56 22.98Z'/%3E%3C/svg%3E");

  /* La misma marca con la opacidad BAKED-IN en el propio SVG. Hace falta una
     segunda variable porque una capa de `background-image` NO admite
     `opacity`: esa propiedad afecta al elemento entero, no a una capa suelta.
     Dentro de .marco la marca es una filigrana de fondo, no un dibujo. */
  --marca-agua-tenue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='.17'%3E%3Cpath fill='%23E8B84B' d='M89.56 22.98C87.77 19.79 85.17 17.18 82.05 15.4C79.57 10.74 75.74 7.41 71.2 5.84C68.71 10.05 66.49 14.09 64.63 17.68C64.03 14.72 63.29 11.25 62.41 7.49C56.63 3.48 49.98 2.16 43.69 3.63C44.83 12.13 46.19 19.97 47.63 26.7C44.69 22.11 40.95 16.8 36.55 11.14C29.14 11.56 22.6 14.83 18.1 20.24C24.66 27.29 31.12 33.62 37.04 38.89C31.24 36.33 24.29 33.73 16.58 31.35C12.46 35.37 10.16 40.6 10.04 46.19C10.36 50.56 11.39 54.92 13.05 58.92A44.24 44.24 0 0 0 89.56 82.55A33.87 33.87 0 1 1 89.56 22.98Z'/%3E%3C/svg%3E");

  /* EFECTO 2 · Las franjas de póster. Cuatro bandas de crema que cortan el
     sol, al modo de los carteles de los 70. 0 bytes de imagen.
     PASE DE ARTE 2026-08-10: la causa de que V5 midiera solo +3/255 era
     GEOMÉTRICA, no de opacidad: las bandas caían en el tercio superior del
     pseudo-elemento, justo donde la máscara (centrada en 50% 100%) más las
     apagaba. Ahora las bandas viven en el 46-72 % de la caja, que es la mitad
     VISIBLE del disco del sol, y la máscara de .hero::after comparte su
     geometría exacta. Separación creciente hacia abajo = perspectiva de cartel.
     ██ TECHO DURO 12 % ██ Peor caso apilado (base + sol coral 25 % + banda
     crema 12 %) compone #5F4347: crema 7,26:1 (AAA) y dorado 4,65:1 (AA).
     Con banda al 18 % el compuesto sería #694F51 y la crema caería a 6,26:1,
     perdiendo AAA. NO SUBIR DEL 12 %. Medido con la fórmula WCAG 2026-08-10. */
  --franjas:linear-gradient(180deg,
      rgba(244,235,221,0)    0%,   rgba(244,235,221,0)    46%,
      rgba(244,235,221,.12) 46%,   rgba(244,235,221,.12) 49%,
      rgba(244,235,221,0)   49%,   rgba(244,235,221,0)    55%,
      rgba(244,235,221,.09) 55%,   rgba(244,235,221,.09) 57.5%,
      rgba(244,235,221,0)   57.5%, rgba(244,235,221,0)    63%,
      rgba(244,235,221,.06) 63%,   rgba(244,235,221,.06) 65%,
      rgba(244,235,221,0)   65%,   rgba(244,235,221,0)    70%,
      rgba(244,235,221,.04) 70%,   rgba(244,235,221,.04) 71.5%,
      rgba(244,235,221,0)   71.5%, rgba(244,235,221,0)   100%);

  /* Glow de color. NUNCA sombra negra sobre #0E1B24: no aporta elevación,
     solo peso de render. Y NUNCA parpadeo (SC 2.3.1).
     PASE DE ARTE 2026-08-10 · EFECTO 5: una sombra sola con radio grande lee
     como «título borroso». Un rótulo encendido tiene núcleo apretado + halo
     medio + derrame amplio. La tercera capa es CORAL y muy abierta: hace que
     el turquesa parezca luz sobre pared cálida y engancha el H1 con el sol.
     ██ TECHO 38 % en la capa apretada ██ El peor píxel es el pegado al glifo:
     compuesto #095656, crema encima 7,18:1 (AAA). Con .45 bajaría a 6,16:1
     (AA pero no AAA). Y sigue siendo ESTÁTICA: cero @keyframes, SC 2.3.1. */
  --neon:  0 0 6px rgba(0,183,168,.38),
           0 0 22px rgba(0,183,168,.26),
           0 0 54px rgba(255,94,91,.16);
  --glow:  0 0 24px rgba(0,183,168,.28);

  /* ── 2.7 · ██ BLOQUE DE SUSTITUCIÓN DE FOTOS ██ ────────
     ESTADO: 0 fotos entregadas. El diseño está TERMINADO sin ellas — cada
     hueco es una caja de proporción fija con un degradado retro-tropical de
     la paleta, el isotipo y una etiqueta tipográfica. El degradado ES parte
     del diseño, no un marcador de posición feo.

     EL DÍA QUE LLEGUEN LAS FOTOS: se descomentan las seis líneas de abajo
     (las que hagan falta) y NADA MÁS.
       · No se toca el HTML.
       · No se toca ninguna otra regla de este fichero.
       · CLS = 0 antes y después: la caja ya tenía su `aspect-ratio` reservado.
       · Sin riesgo de imagen rota: el degradado queda DEBAJO. Si la foto no
         está declarada se ve el diseño; si está, la tapa.
     Reglas de exportación (brief §6.3): AVIF con respaldo WebP · tarjeta
     ≤45 KB a 800 px · hero ≤120 KB a 1200 px · el recorte se hace al
     exportar, no con object-fit sobre un archivo de 4 MB.
     ⚠️ Los comentarios CSS NO ANIDAN: cada línea de abajo es su propio
        comentario. Al descomentar, se quitan sus DOS marcas, no más.
     ──────── */

  --foto-copas:  image-set(url("/assets/img/copas.avif") type("image/avif"), url("/assets/img/copas.webp") type("image/webp"));
  --foto-juego:  image-set(url("/assets/img/juego.avif") type("image/avif"), url("/assets/img/juego.webp") type("image/webp"));
  --foto-noches: image-set(url("/assets/img/noches.avif") type("image/avif"), url("/assets/img/noches.webp") type("image/webp"));
  --foto-evento: image-set(url("/assets/img/evento.avif") type("image/avif"), url("/assets/img/evento.webp") type("image/webp"));
  --foto-sala:   image-set(url("/assets/img/sala-montada.avif") type("image/avif"), url("/assets/img/sala-montada.webp") type("image/webp"));
  --foto-hero:   image-set(url("/assets/img/hero.avif") type("image/avif"), url("/assets/img/hero.webp") type("image/webp"));
  color-scheme: dark;
}


/* ═══ 3 · RESET Y BASE ════════ */
*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* guarda contra el desbordamiento lateral a 320 px. `clip` (a diferencia de
     `hidden`) no crea contenedor de scroll y no rompe position:sticky. */
  overflow-x:clip;
  /* los objetivos de ancla no quedan tapados: ni por arriba ni por la barra */
  scroll-padding-block: var(--e-24) calc(var(--h-barra) + var(--e-16));
}

body{
  margin:0;
  background-color:var(--base);
  color:var(--texto);
  font-family:var(--f-cuerpo);
  font-size:var(--t-cuerpo);
  font-weight:400;
  line-height:var(--lh-cuerpo);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Reserva del alto de la barra fija: la barra NUNCA tapa el pie.
     Sin JS manda el valor de CSS + el inset del notch. Con JS, main.js mide
     la barra real y escribe --h-barra-real (que YA incluye el inset, porque
     la barra se lo pone en su propio padding): por eso son dos variables y
     no una — si fuera una sola, se sumaría el safe-area dos veces. */
  padding-bottom:var(--h-barra-real,
                     calc(var(--h-barra) + env(safe-area-inset-bottom, 0px)));
  min-height:100vh;
  min-height:100svh;
}

h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; }
img,svg,picture,video{ display:block; max-width:100%; height:auto; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; }
a{ color:var(--turquesa); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:2px; }
address{ font-style:normal; }
hr{ border:0; border-top:1px solid var(--linea); margin:var(--e-32) 0; }
/* Red de seguridad: varios componentes de este fichero declaran `display`,
   lo que pisaría al `[hidden]` del navegador. Con esto, `hidden` siempre
   oculta — de ello depende la degradación del botón de copiar. */
[hidden]{ display:none !important; }
::selection{ background:var(--dorado); color:var(--tinta); }  /* tinta sobre relleno */


/* ═══ 4 · ACCESIBILIDAD TRANSVERSAL ════════ */

/* Foco. NUNCA `outline:none` sin sustituto (brief §5.1-F).
   El dorado da 9,48:1 sobre la base, pero solo 1,37:1 sobre turquesa: por eso
   el anillo se dibuja FUERA con 2 px de separación, así sus vecinos son la
   base a ambos lados y no el relleno del control. */
:focus-visible{
  outline:3px solid var(--dorado);
  outline-offset:2px;
}
/* …salvo dentro de la sección crema, donde el dorado da 1,56:1 y el anillo
   sería invisible. Ahí el foco es tinta: 14,80:1. Derivación obligada del
   hallazgo D del brief §5.1 — no es una licencia, es la misma regla. */
.seccion--crema :focus-visible{
  outline-color:var(--tinta);
}
/* No se quita el foco a quien navega con ratón sin más: solo se evita el
   doble anillo del UA en navegadores que soportan :focus-visible. */
:focus:not(:focus-visible){ outline:none; }

/* Enlace de salto al contenido. Visible en cuanto recibe foco. */
.saltar{
  position:absolute;
  left:var(--e-8);
  top:var(--e-8);
  z-index:100;
  transform:translateY(-160%);
  background:var(--dorado);
  color:var(--tinta);                 /* tinta sobre relleno */
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-boton);
  line-height:1;
  padding:var(--e-16) var(--e-24);
  border-radius:var(--r-md);
  text-decoration:none;
}
.saltar:focus{ transform:translateY(0); }

/* Solo para lectores de pantalla. */
.sr-solo{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);          /* respaldo para motores antiguos */
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Movimiento reducido: red de seguridad global. Cada animación y transición
   del fichero está además envuelta en `no-preference`; esto cubre cualquier
   cosa que se añada después sin acordarse. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}


/* ═══ 5 · LAYOUT ════════ */

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  padding-inline:var(--pad-lateral);
}

.seccion{
  position:relative;
  overflow:hidden;               /* recorta el sol, las franjas y la marca de
                                    agua: sin esto hay scroll lateral a 320 px */
  padding-block:var(--pad-seccion);
}

/* Sección invertida (fondo crema). UNA SOLA en toda la home: «Tu evento».
   Dentro de ella TODO el texto es tinta, kickers incluidos. */
.seccion--crema{
  background:var(--crema);
  color:var(--tinta);
}
.seccion--crema .kicker{ color:var(--tinta); }
.seccion--crema .seccion__texto,
.seccion--crema p,
.seccion--crema li,
.seccion--crema .aux{ color:var(--tinta); }
.seccion--crema a{ color:var(--tinta); }

/* EFECTO 7 · la hoja de palmera como marca de agua, esquina superior derecha.
   Decorativa: no lleva contenido y el contenedor está fuera del flujo. */
.seccion--marca::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:320px; aspect-ratio:1;
  background:var(--marca-agua) no-repeat center/contain;
  opacity:.08;
  transform:translate(20%,-14%) rotate(-8deg);
  pointer-events:none;
}

/* EFECTO 4 · el filete dorado. Separador entre secciones: línea de 1 px
   #5A5232 con un rombo de 6 px en #E8B84B centrado encima. Decoración pura,
   por eso 2,24:1 es suficiente. */
.filete{
  position:relative;
  height:1px;
  border:0;
  margin:0;
  background:var(--linea);
}
.filete::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:6px; height:6px;
  background:var(--dorado);
  transform:translate(-50%,-50%) rotate(45deg);
}

/* Rejillas. Móvil = una columna. Suben en el §9. */
.rejilla{
  display:grid;
  gap:var(--gap-tarjetas);
  grid-template-columns:1fr;
}
.rejilla--2,
.rejilla--3,
.rejilla--4{ grid-template-columns:1fr; }

/* Pila vertical con separación coherente. */
.pila > * + *{ margin-top:var(--e-16); }
.pila--suelta > * + *{ margin-top:var(--e-24); }


/* ═══ 6 · TIPOGRAFÍA DE CONTENIDO ════════ */

.kicker{
  font-family:var(--f-cuerpo);
  font-weight:600;
  font-size:var(--t-kicker);
  line-height:var(--lh-kicker);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dorado);            /* 9,48:1 sobre la base */
  margin:0 0 var(--e-12);
}

.titulo-1{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-h1);
  line-height:var(--lh-h1);
  letter-spacing:-.02em;
  color:var(--texto);
  text-wrap:balance;
  margin:0;
}

.titulo-2{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-h2);
  line-height:var(--lh-h2);
  letter-spacing:-.01em;
  color:var(--texto);
  text-wrap:balance;
  margin:0 0 var(--e-16);
}
.seccion--crema .titulo-2{ color:var(--tinta); }

.titulo-3{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:var(--lh-h3);
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--texto);
  margin:0 0 var(--e-8);
}
.seccion--crema .titulo-3{ color:var(--tinta); }

.entradilla{
  font-size:var(--t-entradilla);
  line-height:var(--lh-entradilla);
  color:var(--texto);
  max-width:var(--medida);
  text-wrap:pretty;
}

.texto{
  font-size:var(--t-cuerpo);
  line-height:var(--lh-cuerpo);
  color:var(--texto);
  max-width:var(--medida);
  text-wrap:pretty;
}

/* Auxiliar: pies, etiquetas, línea de datos. 7,79:1. */
.aux{
  font-size:var(--t-aux);
  line-height:var(--lh-aux);
  color:var(--texto-2);
}

/* Prosa larga (aviso legal, privacidad). Un solo contenedor y dentro se
   escribe HTML semántico sin clases. */
.prosa{ max-width:var(--medida); }
.prosa h2{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--texto);
  margin:var(--e-48) 0 var(--e-12);
}
.prosa h3{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.125rem;
  line-height:1.25;
  color:var(--texto);
  margin:var(--e-32) 0 var(--e-8);
}
.prosa > :first-child{ margin-top:0; }
.prosa p,
.prosa ul,
.prosa ol{ margin:0 0 var(--e-16); }
.prosa ul,
.prosa ol{ padding-left:1.25em; }
.prosa li{ margin-bottom:var(--e-8); }
.prosa ul{ list-style:none; padding-left:0; }
.prosa ul li{ position:relative; padding-left:1.4em; }
.prosa ul li::before{
  content:"";
  position:absolute;
  left:.3em; top:.62em;
  width:6px; height:6px;
  background:var(--dorado);
  transform:rotate(45deg);
}

/* Lista con rombo dorado (p. ej. «Lo que hay en la sala»). */
.lista-marca{ list-style:none; }
.lista-marca li{
  position:relative;
  padding-left:1.5em;
  margin-bottom:var(--e-12);
  max-width:var(--medida);
}
.lista-marca li::before{
  content:"";
  position:absolute;
  left:.25em; top:.62em;
  width:7px; height:7px;
  background:var(--dorado);
  transform:rotate(45deg);
}
.seccion--crema .lista-marca li::before{ background:var(--tinta); }


/* ═══ 7 · COMPONENTES ════════ */

/* ── 7.1 · BOTONES ────────
   Alto mínimo 48 px SIEMPRE (56 px en el CTA principal). Sin uppercase:
   mejor legibilidad nocturna. Texto en Outfit 700 a 17 px.               */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--e-8);
  min-height:var(--h-toque);
  padding:var(--e-12) var(--e-24);
  border:2px solid transparent;
  border-radius:var(--r-md);
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-boton);
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* CTA principal — relleno coral, texto TINTA. 5,83:1. */
.btn--primario{
  background:var(--coral);
  border-color:var(--coral);
  color:var(--tinta);              /* ██ NUNCA blanco ni crema aquí ██ */
}

/* CTA secundaria — perfilada en turquesa. Borde de color pleno: 6,94:1,
   por encima del umbral 3:1 de SC 1.4.11 para componentes. */
.btn--secundario{
  background:transparent;
  border-color:var(--turquesa);
  color:var(--turquesa);
}

/* Terciaria — perfilada en dorado. 9,48:1. */
.btn--dorado{
  background:transparent;
  border-color:var(--dorado);
  color:var(--dorado);
}

/* Modificadores de tamaño y caja. */
.btn--grande{ min-height:var(--h-cta); padding-inline:var(--e-32); }
.btn--bloque{ display:flex; width:100%; }

/* ██ SOBRE FONDO CREMA ██ — automático, no depende de que nadie se acuerde.
   Un botón coral sobre crema da 2,54:1 contra su fondo e incumple SC 1.4.11:
   sin contorno el botón NO se distingue del fondo. El contorno tinta da
   14,80:1 y resuelve el componente sin tocar el color de acción.
   El turquesa sobre crema (2,13:1) falla como texto Y como componente: ahí
   la secundaria pasa entera a tinta. */
.seccion--crema .btn--primario{ border-color:var(--tinta); }
.seccion--crema .btn--secundario,
.seccion--crema .btn--dorado{ border-color:var(--tinta); color:var(--tinta); }
/* Versión manual del mismo contorno, por si hace falta fuera de .seccion--crema */
.btn--contorno-tinta{ border-color:var(--tinta); }

/* Estados. Hover solo en dispositivos con puntero fino: en táctil el hover
   se queda «pegado» después del toque. */
@media (hover: hover){
  .btn--primario:hover{ box-shadow:var(--glow); }         /* glow de COLOR */
  .btn--secundario:hover{ background:var(--turquesa); color:var(--tinta); }
  .btn--dorado:hover{ background:var(--dorado); color:var(--tinta); }
  .seccion--crema .btn--secundario:hover,
  .seccion--crema .btn--dorado:hover{ background:var(--tinta); color:var(--crema); }
}
.btn:active{ transform:translateY(1px); }
@media (prefers-reduced-motion: no-preference){
  .btn{ transition:box-shadow var(--dur) var(--ease),
                   background-color 160ms var(--ease),
                   color 160ms var(--ease); }
}

/* Grupo de botones: separación ≥ 8 px entre objetivos táctiles. */
.acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-12);
  margin-top:var(--e-24);
}
.acciones .btn{ flex:1 1 auto; }


/* ── 7.2 · CHIP DE ESTADO ────────
   «Abierto ahora» / «Abrimos a las 18:30». SIN JS muestra el horario servido
   en el HTML («18:30 – 03:30»): el estado en vivo es un extra, nunca un
   requisito, y jamás se deja un hueco vacío.
   ⚠️ El color NUNCA es el único portador de la información: el texto dice
      siempre el estado. El punto solo lo refuerza.                        */
.chip{
  display:inline-flex;
  align-items:center;
  gap:var(--e-8);
  min-height:34px;
  padding:var(--e-8) var(--e-16);
  border:1px solid var(--linea-fuerte);   /* 3,30:1 · válido como indicador */
  border-radius:var(--r-pill);
  background:var(--sup);
  font-size:var(--t-aux);
  font-weight:600;
  line-height:1;
  color:var(--texto);
  white-space:nowrap;
}
.chip__punto{
  width:9px; height:9px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--dorado);          /* neutro mientras no hay estado (sin JS) */
}
/* Estado en vivo. Lo pone main.js sobre el contenedor: data-estado="abierto"
   | "cerrado". El punto del chip «abierto» es coral (brief §5.2) y el glow
   del chip es turquesa. Glow FIJO: cero parpadeo (SC 2.3.1). */
[data-estado="abierto"] .chip__punto{ background:var(--coral); }
[data-estado="cerrado"] .chip__punto{ background:var(--texto-3); }
.chip[data-estado="abierto"]{
  border-color:var(--turquesa);
  box-shadow:var(--glow);
  text-shadow:var(--neon);           /* EFECTO 5 · neón FIJO, nunca intermitente */
}


/* ── 7.3 · CABECERA ────────
   No es sticky (brief §2.3). Sin hamburguesa: con seis bloques, una URL
   extra y una barra fija de acción, un desplegable en móvil solo añade un
   componente que fallar. En ≥900 px aparecen los enlaces en texto.       */
.cabecera{
  position:relative;
  z-index:2;
  border-bottom:1px solid var(--linea);
}
.cabecera__interior{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e-16);
  min-height:var(--h-header);
  padding-block:var(--e-12);
}
.cabecera__marca{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-toque);
  text-decoration:none;
}
/* El wordmark es un SVG en trazados compuesto en Monoton: la fuente no viaja
   a la web. Se dibuja al primer píxel y escala a cualquier tamaño. */
.wordmark{
  display:block;
  height:26px;
  width:auto;
}
.cabecera__nav{ display:none; }        /* aparece en ≥900 px (§9) */
.nav__lista{
  display:flex;
  align-items:center;
  gap:var(--e-8);
  list-style:none;
}
.nav__enlace{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-toque);
  padding:0 var(--e-12);
  border-radius:var(--r-sm);
  color:var(--texto);
  font-size:var(--t-aux);
  font-weight:600;
  text-decoration:none;
}
@media (hover: hover){
  .nav__enlace:hover{ color:var(--dorado); }
}


/* ── 7.4 · HERO ────────
   Resuelve el 70 % de las visitas: qué somos, dónde, a qué hora, abierto
   ahora y dos botones — todo por encima de los 600 px en móvil.          */
.hero{
  position:relative;
  overflow:hidden;
  /* ██ RECORTE MEDIDO 2026-08-10 (A4) · era `var(--e-48) var(--e-64)` ██
     A3 §7 midió que tras el pase de arte el hero crecía 36-37 px y el SEGUNDO
     CTA se salía del techo de 600 px del brief §2.3 en 3 de los 6 casos
     móviles. Bajo «Tu evento privado» había 64 px EXACTOS hasta el filete, en
     los seis casos: este `padding-block-end`.
     ⚠️ LA TRAMPA: el padding INFERIOR no sube el botón ni un píxel, solo
        acorta el hero. Al CTA lo suben el padding SUPERIOR (48→32) y los otros
        dos recortes de A4: `.hero__acciones` (§7.4) y `.cifra--hero` (§11).
        Sin los tres no se llega. Aquí: −16 px de CTA, −48 px de hero.
     Los 32 px que quedan bajo el botón son respiración: por debajo se pega al
     filete. NO bajar más. El §9 (≥768 px) reescribe esto con 64/96: el
     escritorio no se entera. */
  padding-block:var(--e-32);
  isolation:isolate;
  /* PASE DE ARTE 2026-08-10 · la SEGUNDA LUZ, desde el suelo. El hero no tenía
     fondo propio: el sol subió (abajo) y este turquesa rellena el hueco muerto
     entre los botones y el filete, y da la tensión coral-arriba / agua-abajo
     de la paleta. El núcleo .16 está FUERA del elemento (at 50% 118%), así que
     el alfa máximo visible es ≈.12. Con él, el peor punto de .hero__datos
     (#AFADA6) es 6,35:1 → AA. Si algún día se exige AAA ahí, se baja el núcleo
     de .16 a .10 (7,05:1); NO se sube. Es background dentro de overflow:hidden:
     no puede generar CLS ni desplazamiento horizontal. */
  background-image:radial-gradient(ellipse 120% 46% at 50% 118%,
    rgba(0,183,168,.16) 0%, rgba(0,183,168,.05) 50%, transparent 78%);
}

/* EFECTO 1 · el sol de medianoche. Degradado radial fijo detrás del H1.
   TECHO MEDIDO: con coral al 25 % el fondo compuesto es #4A2C32 y el texto
   crema encima mantiene 10,47:1 (dorado 6,71:1). El límite absoluto antes
   de perder AAA para crema es coral al 30 % (9,60:1). ██ NO SUBIR DEL 25 % ██
   PASE DE ARTE 2026-08-10: deja de anclarse ABAJO (donde quedaba detrás de los
   botones, robándole contraste al CTA coral) y se ancla ARRIBA. El disco queda
   cortado por el borde superior del hero, que es donde la cabecera YA tiene su
   filete dorado de 1 px: ese filete es el horizonte y el sol se pone detrás.
   Y el degradado deja de ser niebla y adquiere ARO.
   ⚠️ `closest-side` es OBLIGATORIO: sin él el radio se mide a la esquina
      (×1,414) y las cuatro paradas de porcentaje se van al garete.
   ██ EL -46 % ES EL ÚNICO MANDO QUE SE TOCA AQUÍ. NUNCA LA OPACIDAD. ██
   Medido a 390 px: el escalón duro 33 %→33,4 % cae en y=229 CSS. El -46 %
   es además el valor exacto en el que la banda fuerte de las franjas (46 %
   de la caja) queda a ras del filete y 100 % visible, a CUALQUIER anchura:
   por encima de -46 % la banda empieza a salirse del hero por arriba. */
.hero::before{
  content:"";
  position:absolute;
  inset:0 auto auto 50%;
  width:min(640px,132vw);
  aspect-ratio:1;
  transform:translate(-50%,-46%);
  background:radial-gradient(circle closest-side at 50% 50%,
    rgba(255,94,91,.25)  0    33%,
    rgba(255,94,91,.13) 33.4% 46%,
    rgba(255,94,91,.05)  46%  62%,
    transparent 72%);
  pointer-events:none;
  z-index:-1;
}
/* EFECTO 2 · las franjas de póster, que cortan el sol.
   La máscara las concentra alrededor del sol y las apaga hacia los lados: sin
   ella, en pantalla ancha son bandas de borde a borde que parecen un fallo de
   render en vez de un gesto de cartel. Si el navegador no entiende `mask`,
   se ven las bandas completas dentro del cuadrado del sol — sigue siendo un
   efecto de cartel, no un roto.
   PASE DE ARTE 2026-08-10: comparte la geometría EXACTA de .hero::before para
   que las bandas caigan donde la máscara está a tope. Antes ocupaba la mitad
   inferior del hero con la máscara centrada en 50% 100% y apagaba justo las
   dos bandas más fuertes (V5-D5: +3 sobre 255). */
.hero::after{
  content:"";
  position:absolute;
  inset:0 auto auto 50%;
  width:min(640px,132vw);
  aspect-ratio:1;
  transform:translate(-50%,-46%);   /* ██ SIEMPRE IGUAL AL DE .hero::before ██
                                       si se descuadran, las franjas dejan de
                                       cortar el sol y pierden la máscara */
  background:var(--franjas);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,
                     #000 0 34%, rgba(0,0,0,.55) 46%, transparent 64%);
          mask-image:radial-gradient(circle closest-side at 50% 50%,
                     #000 0 34%, rgba(0,0,0,.55) 46%, transparent 64%);
  pointer-events:none;
  z-index:-1;
}

.hero__titulo{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-h1);
  line-height:var(--lh-h1);
  letter-spacing:-.02em;
  color:var(--texto);
  text-wrap:balance;
  margin:0;
  text-shadow:var(--neon);         /* EFECTO 5 · neón FIJO */
}
/* Subrayado turquesa del H1 (brief §5.2). No necesita marcado extra. */
.hero__titulo::after{
  content:"";
  display:block;
  width:92px;
  height:5px;
  margin-top:var(--e-16);
  border-radius:var(--r-pill);
  background:var(--turquesa);
}
.hero__entradilla{
  margin-top:var(--e-24);
  font-size:var(--t-entradilla);
  line-height:var(--lh-entradilla);
  color:var(--texto);
  max-width:var(--medida);
  text-wrap:pretty;
}
/* Línea de datos bajo la entradilla: crema al 70 % = #AFADA6, 7,79:1. */
.hero__datos{
  margin-top:var(--e-16);
  font-size:var(--t-aux);
  line-height:var(--lh-aux);
  color:var(--texto-2);
}
.hero__acciones{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-12);
  /* RECORTE MEDIDO 2026-08-10 (A4) · era `var(--e-32)`. −8 px sobre el borde
     inferior del segundo CTA. Se restaura a 32 px en el §9 (≥768 px): el
     escritorio no tiene el problema y no cambia. */
  margin-top:var(--e-24);
}
.hero__acciones .btn{ flex:1 1 auto; }


/* ── 7.5 · MARCO DE IMAGEN (hueco de foto que YA es diseño) ────────
   Caja de proporción fija rellena con un degradado retro-tropical de la
   paleta + el isotipo + una etiqueta tipográfica. Se sustituye por una foto
   descomentando UNA línea del §2.7, sin tocar el HTML y con CLS = 0.
   Orden de capas (la primera es la de arriba):
     1 foto · 2 marca de agua · 3 franjas · 4 sol · 5 horizonte · 6 cielo
   ⚠️ CORRECCIÓN MEDIDA 2026-08-10 (B2-A4): el sol y el horizonte estaban al
      revés y el filete de 1 px CRUZABA el disco de lado a lado — en
      `.marco--copas` lo partía por la mitad exacta (horizonte 74 %, centro
      del sol 74 %). Un horizonte pasa POR DETRÁS del sol. No volver a
      invertirlas: si el `linear-gradient` sube por encima del
      `radial-gradient`, vuelve la costura en las 5 cajas.
   PASE DE ARTE 2026-08-10: la COMPOSICIÓN se parametriza. Antes las cuatro
   variantes compartían posición del disco (50% 72%), radio (21 %) y posición
   de la marca de agua, y solo cambiaban dos tokens de color: eran la misma
   imagen recoloreada cuatro veces (V5-D1, el 25 % del scroll de la home).
   Ahora cada una es un PAISAJE distinto con la misma gramática, y se añade la
   LÍNEA DE HORIZONTE, que es lo que convierte «un círculo sobre un degradado»
   en «un sol sobre un paisaje».                                            */
.marco{
  position:relative;
  aspect-ratio:4 / 5;                /* mismo formato que el post 4:5 de IG:
                                        una foto sirve para las dos cosas */
  border-radius:var(--r-arco);       /* EFECTO 3 · el arco tropical: INTOCABLE */
  overflow:hidden;
  background-color:var(--sup);
  /* Mandos de la escena. Cada variante los reescribe: x/y/r del sol, altura
     del horizonte y x/y/tamaño de la palmera. */
  --marco-x:50%;  --marco-y:72%;  --marco-r:21%;
  --marco-h:72%;
  --marca-x:16%;  --marca-y:13%;  --marca-s:34%;
  background-image:
     var(--foto, none),
     var(--marca-agua-tenue),
     var(--franjas),
     radial-gradient(circle at var(--marco-x) var(--marco-y),
        var(--marco-sol) 0 var(--marco-r),
        transparent calc(var(--marco-r) + .6%)),
     linear-gradient(to bottom,
        transparent calc(var(--marco-h) - .5px),
        var(--linea) calc(var(--marco-h) - .5px) calc(var(--marco-h) + .5px),
        transparent calc(var(--marco-h) + .5px)),
     var(--marco-cielo);
  background-size:     cover, var(--marca-s) auto, auto, auto, auto, auto;
  background-position: center, var(--marca-x) var(--marca-y),
                       center, center, center, center;
  background-repeat:   no-repeat;
  /* Receta del cielo: noche arriba, HALO CÁLIDO EN EL HORIZONTE (a la altura
     del sol, 66 %) y vuelta a la noche abajo. Es la lectura de atardecer que
     pide la paleta — «Coral Atardecer» — y la misma idea que el sol de
     medianoche del hero. */
  --marco-sol:rgba(255,94,91,.85);
  --marco-halo:rgba(255,94,91,.30);
  --marco-cielo:linear-gradient(180deg,
      rgba(232,184,75,.10) 0%, rgba(14,27,36,0) 32%,
      var(--marco-halo) 66%, rgba(14,27,36,0) 96%);
}
/* Sol grande y bajo, casi centrado: el atardecer canónico de la colección. */
.marco--copas{
  --foto:var(--foto-copas, none);
  --marco-sol:rgba(255,94,91,.85);
  --marco-halo:rgba(255,94,91,.32);
  --marco-x:50%; --marco-y:74%; --marco-r:25%;
  --marco-h:74%;
  --marca-x:16%; --marca-y:13%; --marca-s:34%;
}
/* Sol pequeño y alto a la izquierda, palmera al otro lado: aire y distancia. */
.marco--juego{
  --foto:var(--foto-juego, none);
  --marco-sol:rgba(0,183,168,.82);
  --marco-halo:rgba(0,183,168,.26);
  --marco-x:30%; --marco-y:60%; --marco-r:14%;
  --marco-h:68%;
  --marca-x:88%; --marca-y:10%; --marca-s:26%;
}
/* Sol enorme HUNDIÉNDOSE por la esquina: el más nocturno de los cuatro.
   El disco al 36 % con centro al 92 % queda muy recortado por abajo a
   propósito. Verificado: no toca la píldora .marco__etiqueta. */
.marco--noches{
  --foto:var(--foto-noches, none);
  --marco-sol:rgba(232,184,75,.84);
  --marco-halo:rgba(255,94,91,.26);
  --marco-x:64%; --marco-y:92%; --marco-r:36%;
  --marco-h:78%;
  --marca-x:6%;  --marca-y:92%; --marca-s:46%;
}
/* Luna crema sobre horizonte turquesa: la lectura de «isla» y la única de las
   cuatro en clave fría, para que las cuatro tarjetas no sean el mismo cuadro.
   Aquí el disco sube ALTO y se hace pequeño: deja de ser sol y pasa a ser luna.
   ⚠️ Crema sobre dorado da un caqui sucio: no volver a emparejarlos. */
.marco--evento{
  --marco-x:50%; --marco-y:34%; --marco-r:12%;
  --marco-h:70%;
  --marca-x:92%; --marca-y:86%; --marca-s:30%;
  --foto:var(--foto-evento, none);
  --marco-sol:rgba(244,235,221,.74);
  --marco-halo:rgba(0,183,168,.22);
}
/* Caja 3/2 de /eventos-privados/ */
.marco--sala{
  aspect-ratio:3 / 2;
  --foto:var(--foto-sala, none);
  --marco-sol:rgba(255,94,91,.82);
  --marco-halo:rgba(255,94,91,.28);
}
/* Caja 16/9 reservada para el hero el día que haya fachada de noche */
.marco--hero{
  aspect-ratio:16 / 9;
  --foto:var(--foto-hero, none);
}
/* Etiqueta tipográfica dentro del marco. Píldora de relleno TINTA con texto
   crema: 14,80:1 garantizados pase lo que pase detrás — hoy con degradado y
   mañana con foto. Sin depender de un scrim que se pueda romper. */
.marco__etiqueta{
  position:absolute;
  left:var(--e-12);
  bottom:var(--e-12);
  padding:6px var(--e-12);
  border-radius:var(--r-pill);
  background:var(--base);
  color:var(--crema);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1;
}


/* ── 7.6 · TARJETAS (los 4 pilares) ────────
   Elevación por COLOR, no por sombra: fondo #1C272F + borde #5A5232.
   Sobre #1C272F: crema 12,87 · dorado 8,25 · turquesa 6,04 · coral 5,07.  */
.tarjeta{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--sup);
  border:1px solid var(--linea);       /* decorativo */
  border-radius:var(--r-lg);
  padding:var(--e-16);
  overflow:hidden;
}
.tarjeta .marco{ margin-bottom:var(--e-16); }
.tarjeta__cuerpo{ display:flex; flex-direction:column; flex:1 1 auto; }
.tarjeta__texto{
  font-size:var(--t-cuerpo);
  line-height:var(--lh-cuerpo);
  color:var(--texto);
}
/* Pie de tarjeta con enlace. La tarjeta entera es pulsable mediante el
   «stretched link»: el <a> real se estira sobre toda la tarjeta, así el
   objetivo táctil es enorme y sigue habiendo UN solo enlace accesible. */
.tarjeta__mas{
  margin-top:var(--e-16);
  display:inline-flex;
  align-items:center;
  gap:var(--e-8);
  min-height:var(--h-toque);
  color:var(--turquesa);
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-boton);
  text-decoration:none;
}
.tarjeta__mas::before{
  content:"";
  position:absolute;
  inset:0;
}
@media (hover: hover){
  .tarjeta__mas:hover{ text-decoration:underline; text-underline-offset:.2em; }
}
/* El anillo de foco se dibuja sobre la tarjeta entera, no sobre el texto.
   Se quita el anillo del enlace SOLO dentro del @supports: si el navegador
   no entendiera :has(), quitarlo fuera dejaría el foco invisible. Aquí el
   sustituto y la retirada viajan juntos, así que nunca hay hueco. */
@supports selector(:has(*)){
  .tarjeta:has(.tarjeta__mas:focus-visible){
    outline:3px solid var(--dorado);
    outline-offset:2px;
  }
  .tarjeta__mas:focus-visible{ outline:none; }
  @media (hover: hover){
    .tarjeta:has(.tarjeta__mas:hover){ border-color:var(--linea-fuerte); }
  }
}


/* ── 7.7 · HORARIO · la cifra display ────────
   El activo visual que carga el peso es la TIPOGRAFÍA: el 18:30 → 3:30 a
   88 px es la pieza más fuerte de la página. Es el diferencial real —
   ningún competidor de Alcañiz publica su horario.                        */
.cifra{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-cifra);
  line-height:var(--lh-cifra);
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--texto);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.18em;
  margin:0 0 var(--e-24);
}
/* La flecha va en coral (brief §3). Se dibuja en CSS y NO como carácter:
   U+2192 no está en el subset `latin` de Inter ni de Outfit, así que un «→»
   escrito caería en una fuente del sistema y desentonaría a 88 px.
   Dibujada con em escala sola con la cifra y cuesta 0 bytes de fuente. */
.cifra__flecha{
  position:relative;
  display:inline-block;
  width:.62em;
  height:.5em;
  flex:0 0 auto;
}
.cifra__flecha::before{     /* asta */
  content:"";
  position:absolute;
  left:0; top:50%;
  width:100%;
  height:.075em;
  background:var(--coral);
  transform:translateY(-50%);
  border-radius:2px;
}
.cifra__flecha::after{      /* punta */
  content:"";
  position:absolute;
  right:.02em; top:50%;
  width:.24em; height:.24em;
  border-top:.075em solid var(--coral);
  border-right:.075em solid var(--coral);
  transform:translateY(-50%) rotate(45deg);
}
.horario__texto{ max-width:var(--medida); }

/* Sub-bloque «Esta semana en Calypso» — ██ EL ÚNICO BLOQUE EDITABLE DEL
   SITIO ██. Su contenido por defecto es un programa que NO CADUCA: si nadie
   lo toca nunca, sigue siendo verdad. No se escriben días concretos que no
   consten, ni fechas: una agenda caducada comunica «esto está cerrado». */
.semana{
  margin-top:var(--e-32);
  padding:var(--e-24);
  border:1px solid var(--linea);
  border-left:3px solid var(--dorado);
  border-radius:var(--r-lg);
  background:var(--sup);
  max-width:var(--medida);
}
.semana .kicker{ margin-bottom:var(--e-8); }
.semana__texto{ color:var(--texto); }


/* ── 7.8 · BLOQUE «TU EVENTO» (dentro de .seccion--crema) ──────── */
.evento__caja{
  border:2px solid var(--tinta);
  border-radius:var(--r-arco);       /* EFECTO 3 · el arco tropical */
  padding:var(--e-32) var(--e-24) var(--e-24);
  background:var(--crema);
}


/* ── 7.9 · PREGUNTAS ────────
   Sin acordeón a propósito: nada de ocultar contenido detrás de una
   interacción, y así todo el texto está en el HTML servido y es indexable.
   (No se marca como FAQPage: Google retiró el resultado enriquecido el
   7 de mayo de 2026.)                                                     */
.faq{ display:grid; gap:var(--e-24); }
.faq__item{
  padding-bottom:var(--e-24);
  border-bottom:1px solid var(--linea);
  max-width:var(--medida);
}
.faq__item:last-child{ border-bottom:0; padding-bottom:0; }
.faq__pregunta{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.125rem;               /* 18 px */
  line-height:1.3;
  color:var(--dorado);              /* 9,48:1 · título corto, no texto largo */
  margin:0 0 var(--e-8);
}
.seccion--crema .faq__pregunta{ color:var(--tinta); }
.faq__respuesta{ color:var(--texto); }


/* ── 7.10 · DÓNDE ESTAMOS · NAP ────────
   NAP en TEXTO PLANO: no imagen, no iframe, seleccionable e indexable.
   ⚠️ NUNCA un <iframe> de Google Maps: carga desde Google al abrir la
      página, transmite la IP y coloca cookies antes de cualquier
      consentimiento — por sí solo obliga a banner. Maps va como ENLACE. */
.nap{
  font-size:var(--t-entradilla);
  line-height:1.45;
  color:var(--texto);
  margin-bottom:var(--e-16);
}
.nap__nombre{
  font-family:var(--f-titular);
  font-weight:700;
  letter-spacing:.01em;
  display:block;
}
.nap__linea{ display:block; }


/* ── 7.11 · EMAIL (el único canal de vuelta) ────────
   Siempre de las tres maneras a la vez: texto seleccionable + mailto: +
   botón de copiar. Motivo: en iOS sin cuenta de correo configurada un
   mailto: no hace absolutamente nada y el usuario cree que está roto.
   ⛔ NO se ofusca el email: rompe accesibilidad y no-JS a cambio de nada. */
.email{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--e-12);
}
.email__enlace{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-toque);
  font-size:var(--t-entradilla);
  font-weight:600;
  color:var(--turquesa);
  text-decoration:underline;
  text-underline-offset:.2em;
  word-break:break-word;
}
.seccion--crema .email__enlace{ color:var(--tinta); }
/* Botón de copiar. Nace con el atributo `hidden` en el HTML y main.js se lo
   quita SOLO si existe navigator.clipboard. Sin JS, sin API o en un origen
   no seguro (donde esa API no existe) sigue oculto y quedan el mailto: y el
   texto seleccionable — que es la degradación correcta: un botón que no
   copia es un botón roto. */
.email__copiar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--h-toque);
  min-width:var(--h-toque);
  padding:0 var(--e-16);
  border:2px solid var(--dorado);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--dorado);
  font-family:var(--f-titular);
  font-weight:700;
  font-size:var(--t-aux);
  line-height:1;
  cursor:pointer;
}
.seccion--crema .email__copiar{ border-color:var(--tinta); color:var(--tinta); }
@media (hover: hover){
  .email__copiar:hover{ background:var(--dorado); color:var(--tinta); }
  .seccion--crema .email__copiar:hover{ background:var(--tinta); color:var(--crema); }
}
.email__copiar[hidden]{ display:none; }
/* Confirmación de 2 s. Es una región aria-live: el estado se anuncia, no
   se deduce del color. */
.email__aviso{
  font-size:var(--t-aux);
  color:var(--turquesa);
  min-height:1.5em;
  flex-basis:100%;
}
.seccion--crema .email__aviso{ color:var(--tinta); }


/* ── 7.12 · PASOS («Cómo lo montamos») ──────── */
.pasos{ list-style:none; counter-reset:paso; display:grid; gap:var(--e-24); }
.paso{
  counter-increment:paso;
  position:relative;
  padding-left:calc(var(--e-48) + var(--e-8));
  max-width:var(--medida);
}
.paso::before{
  content:counter(paso);
  position:absolute;
  left:0; top:0;
  width:var(--e-48); height:var(--e-48);
  display:grid;
  place-content:center;
  border-radius:var(--r-pill);
  background:var(--dorado);
  color:var(--tinta);                /* tinta sobre relleno · 9,48:1 */
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.25rem;
  line-height:1;
}
.paso__titulo{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.125rem;
  line-height:1.3;
  margin:var(--e-8) 0 var(--e-8);
  color:var(--texto);
}
.seccion--crema .paso__titulo{ color:var(--tinta); }


/* ── 7.13 · FORMULARIO (listo para la v2) ────────
   No se publica hasta que esté CONFIRMADO que el buzón recibe. Estilos aquí
   para que la v2 no toque el sistema visual.
   Reglas duras: <label> real y VISIBLE en cada campo — el placeholder NO es
   una etiqueta. Errores en TEXTO, asociados con aria-describedby, nunca solo
   un borde rojo. Fuente del control 16 px: por debajo, Safari iOS hace
   auto-zoom al enfocar.
   ⛔ El formulario NO pide teléfono. Ni el del visitante ni el nuestro.    */
.campo{ display:block; margin-bottom:var(--e-24); max-width:var(--medida); }
.campo__etiqueta{
  display:block;
  font-size:var(--t-aux);
  font-weight:600;
  color:var(--texto);
  margin-bottom:var(--e-8);
}
.campo__req{ color:var(--coral); }        /* 5,83:1 sobre la base */
.campo__control{
  display:block;
  width:100%;
  min-height:var(--h-toque);
  padding:var(--e-12) var(--e-16);
  border:2px solid var(--borde-campo);    /* 3,39:1 · suelo de SC 1.4.11.
                                             ⛔ un campo NO puede distinguirse
                                             solo por un borde de crema al
                                             20 % (1,29–2,46:1) */
  border-radius:var(--r-sm);
  background:var(--sup);
  color:var(--texto);
  font-family:var(--f-cuerpo);
  font-size:var(--t-campo);               /* ██ 16 px, SUELO DURO ██ */
  line-height:1.4;
}
textarea.campo__control{ min-height:120px; resize:vertical; }
.campo__control::placeholder{ color:var(--texto-3); opacity:1; }
.campo__control:focus-visible{ border-color:var(--dorado); }
.campo__ayuda{ margin-top:var(--e-8); font-size:var(--t-aux); color:var(--texto-2); }
.campo__error{
  margin-top:var(--e-8);
  font-size:var(--t-aux);
  font-weight:600;
  color:var(--coral);
}
.campo__error:empty{ display:none; }
.campo--error .campo__control{ border-color:var(--coral); }

/* Casilla de consentimiento. El objetivo táctil es la etiqueta entera
   (≥48 px de alto), no el cuadrado de 24 px. */
.casilla{
  display:flex;
  align-items:flex-start;
  gap:var(--e-12);
  min-height:var(--h-toque);
  padding:var(--e-8) 0;
  margin-bottom:var(--e-24);
  max-width:var(--medida);
  cursor:pointer;
  font-size:var(--t-aux);
  line-height:var(--lh-aux);
}
/* Se dibuja a mano en vez de usar `accent-color`: el UA pinta la marca en
   BLANCO sobre el color de acento, y blanco sobre turquesa da 2,52:1 —
   prohibido. Aquí la marca es tinta sobre turquesa: 6,94:1. */
.casilla__control{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 auto;
  width:24px; height:24px;
  margin:2px 0 0;
  border:2px solid var(--turquesa);
  border-radius:6px;
  background:transparent;
  display:grid;
  place-content:center;
  cursor:pointer;
}
.casilla__control::before{
  content:"";
  width:13px; height:13px;
  transform:scale(0);
  box-shadow:inset 1em 1em var(--tinta);
  clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);
}
.casilla__control:checked{ background:var(--turquesa); }
.casilla__control:checked::before{ transform:scale(1); }
@media (prefers-reduced-motion: no-preference){
  .casilla__control::before{ transition:transform 120ms var(--ease); }
}


/* ── 7.14 · MIGAS DE PAN ──────── */
.migas{ margin-bottom:var(--e-16); }
.migas__lista{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--e-8);
  list-style:none;
  font-size:var(--t-aux);
  color:var(--texto-2);
}
.migas__lista li + li::before{ content:"·"; margin-right:var(--e-8); color:var(--linea-fuerte); }
.migas a{ color:var(--texto-2); }


/* ── 7.15 · PIE ──────── */
.pie{
  border-top:1px solid var(--linea);
  padding-block:var(--e-48);
  background:var(--base);
}
.pie__marca{
  font-family:var(--f-titular);
  font-weight:700;
  font-size:1.25rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--texto);
  margin-bottom:var(--e-4);
}
.pie__claim{ color:var(--dorado); font-size:var(--t-aux); margin-bottom:var(--e-24); }
.pie__bloque + .pie__bloque{ margin-top:var(--e-32); }
.pie__nap{ color:var(--texto-2); font-size:var(--t-aux); line-height:1.7; }
.pie__enlaces,
.pie__legales{
  display:flex;
  flex-wrap:wrap;
  /* Row-gap 8 px, no 4: en móvil estas listas SIEMPRE se parten en dos filas y
     los enlaces miden 48 px de alto. Con 4 px, las filas quedan visualmente
     pegadas y el margen de error del pulgar desaparece. El brief §5.4 y §5.6
     fijan 8 px como separación mínima entre objetivos táctiles adyacentes. */
  gap:var(--e-8) var(--e-16);
  list-style:none;
}
.pie__enlaces a,
.pie__legales a{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-toque);
  color:var(--texto);
  font-size:var(--t-aux);
  text-decoration:none;
}
.pie__legales a{ color:var(--texto-2); }
@media (hover: hover){
  .pie__enlaces a:hover,
  .pie__legales a:hover{ color:var(--dorado); text-decoration:underline; }
}
.pie__copy{
  margin-top:var(--e-32);
  padding-top:var(--e-16);
  border-top:1px solid var(--linea);
  color:var(--texto-3);              /* 4,57:1 · último nivel válido */
  font-size:var(--t-aux);
}


/* ── 7.16 · BARRA FIJA INFERIOR ────────
   La conversión está a 0 clics desde cualquier píxel de cualquier página.
   Sustituye al botón «Llamar» que la restricción de teléfono elimina.
   Se desliza fuera cuando el bloque de conversión de valor está en pantalla
   (IntersectionObserver): un solo CTA visible a la vez. Sin JS la barra
   simplemente se queda — no se rompe nada.                                */
.barra{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:var(--z-barra);
  background:var(--base);
  border-top:1px solid var(--linea);
  box-shadow:0 -8px 24px rgba(0,0,0,.45);   /* ÚNICA sombra negra permitida:
                                               separa la barra del contenido
                                               que pasa por debajo */
  padding:var(--e-8) var(--pad-lateral)
          calc(var(--e-8) + env(safe-area-inset-bottom, 0px));
  transform:translateY(0);
  visibility:visible;
}
.barra__interior{
  width:100%;
  max-width:var(--ancho);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--e-8);
}
.barra__info{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:var(--t-kicker);
  line-height:1.35;
  min-height:34px;                 /* alto estable: la barra no salta cuando
                                      el JS sustituye el texto por el estado */
}
.barra__dir{ color:var(--texto-2); }
.barra__estado{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--texto);
  font-weight:600;
}
.barra__punto{
  width:8px; height:8px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  background:var(--dorado);
}
[data-estado="abierto"] .barra__punto{ background:var(--coral); }
[data-estado="cerrado"] .barra__punto{ background:var(--texto-3); }
.barra__acciones{
  display:flex;
  gap:var(--gap-toque);            /* ≥8 px entre objetivos táctiles */
}
/* Anchos del brief §4.2/§4.3: principal 62 %, secundaria 38 %. */
.barra__acciones .btn--primario{ flex:62 1 0; min-height:var(--h-cta); }
.barra__acciones .btn--secundario{ flex:38 1 0; min-height:var(--h-cta); padding-inline:var(--e-12); }

/* Oculta. `visibility:hidden` la saca también del orden de tabulación: sin
   esto quedarían enlaces enfocables e invisibles. */
.barra--oculta{
  transform:translateY(110%);
  visibility:hidden;
}
@media (prefers-reduced-motion: no-preference){
  .barra{ transition:transform var(--dur) var(--ease), visibility 0s; }
  .barra--oculta{ transition:transform var(--dur) var(--ease),
                             visibility 0s linear var(--dur); }
}


/* ═══ 8 · LA ÚNICA ANIMACIÓN ════════
   Entrada de tarjetas: translateY(8px) + opacity, 240 ms, ease-out.
   ██ EL CONTENIDO ES VISIBLE POR DEFECTO EN EL CSS BASE ██. La animación
   vive dentro de `no-preference`, no lleva `animation-fill-mode`, no lleva
   retardo y no depende de JS ni de scroll. Nunca `opacity:0` en el estado
   base: una captura sin scroll debe devolver la página con su contenido,
   no en blanco.                                                            */
@media (prefers-reduced-motion: no-preference){
  @keyframes calypso-aparece{
    from{ opacity:0; transform:translateY(8px); }
    to  { opacity:1; transform:none; }
  }
  .aparece{ animation:calypso-aparece var(--dur) var(--ease); }
}


/* ═══ 9 · MEDIA QUERIES ════════
   ██ TODAS son (min-width). No hay ni una (max-width) y no se añade ninguna.
   El CSS de arriba es el de móvil; aquí el diseño SUBE.                    */

/* ── ≥560 px · dos columnas y barra en una sola fila ──────── */
@media (min-width: 560px){
  :root{ --h-barra:4.75rem; }   /* = 76 px a raíz 16 · en rem por lo mismo que el §2.5 */

  .rejilla--2,
  .rejilla--4{ grid-template-columns:repeat(2,1fr); }

  .barra__interior{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--e-16);
  }
  .barra__info{ min-height:0; }
  .barra__acciones{ flex:0 0 auto; }
  .barra__acciones .btn{ flex:0 0 auto; }

  .hero__acciones .btn,
  .acciones .btn{ flex:0 0 auto; }
}

/* ── ≥768 px · espaciados grandes ──────── */
@media (min-width: 768px){
  :root{
    --pad-lateral:32px;
    --pad-seccion:96px;
    --gap-tarjetas:24px;
  }

  .rejilla--3{ grid-template-columns:repeat(3,1fr); }

  .hero{ padding-block:var(--e-64) var(--e-96); }
  /* El recorte del hero de A4 (2026-08-10) es SOLO de móvil: a 1366 px el
     segundo CTA nunca se salió de los 600 px, así que aquí se devuelve el
     espaciado a su valor original y el escritorio queda idéntico al píxel a
     como lo dejó el pase de arte. Mismo patrón que la línea de arriba, que ya
     reescribía el `padding-block` del hero.
     ⚠️ La otra mitad de esta restauración —la de `.cifra--hero`— NO puede
        vivir aquí: `.cifra--hero` se declara en el §11, que va DESPUÉS de
        esta sección, y a igual especificidad gana la última. Una @media no
        sube la especificidad. Está al lado de su regla, en el §11. */
  .hero__acciones{ margin-top:var(--e-32); }
  .wordmark{ height:30px; }

  .tarjeta{ padding:var(--e-24); }

  .pie__interior{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--e-48);
    align-items:start;
  }
  .pie__bloque + .pie__bloque{ margin-top:0; }
  .pie__copy{ grid-column:1 / -1; }

  .seccion--marca::before{ width:400px; }
}

/* ── ≥900 px · el header muestra los enlaces en texto ──────── */
@media (min-width: 900px){
  .cabecera__nav{ display:block; }

  /* PASE DE ARTE 2026-08-10 · el hero pasa a ser ancho y el titular se queda a
     la izquierda: con el sol centrado quedaría A SU DERECHA, como un adorno
     suelto. Al 36 % vuelve a estar DETRÁS del titular, que es donde tiene que
     estar. Solo se mueve el eje X: el -38 % vertical no cambia. */
  .hero::before,
  .hero::after{ left:36%; }
}

/* ── ≥1024 px · los cuatro pilares en fila ──────── */
@media (min-width: 1024px){
  .rejilla--4{ grid-template-columns:repeat(4,1fr); }

  /* El hero es de UNA columna: en la v1 no lleva imagen, y una rejilla de dos
     dejaría media pantalla muerta. El texto se limita para no estirar el H1.
     El día que exista la foto de fachada, se añade el modificador y la caja
     `.marco.marco--hero` como segundo hijo — sin tocar nada más. */
  .hero__interior > *{ max-width:44rem; }
  .hero__interior--con-imagen{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:var(--e-64);
    align-items:center;
  }
  .hero__interior--con-imagen > *{ max-width:none; }
  .horario{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:var(--e-64);
    align-items:start;
  }
  .semana{ margin-top:0; }
}

/* ── ≥1200 px · respiración máxima ──────── */
@media (min-width: 1200px){
  :root{ --pad-seccion:128px; }
}


/* ═══ 10 · IMPRESIÓN ════════
   Un local se imprime para llevarse la dirección. Fondo blanco, tinta negra,
   fuera lo fijo y lo decorativo.                                           */
@media print{
  body{ background:#fff; color:#000; padding-bottom:0; }
  .barra,
  .saltar,
  .seccion--marca::before,
  .hero::before,
  .hero::after,
  .email__copiar{ display:none !important; }
  .seccion{ padding-block:var(--e-24); overflow:visible; }
  .titulo-1,.titulo-2,.titulo-3,.hero__titulo,.cifra,
  .texto,.entradilla,.nap,.aux,.faq__pregunta,.faq__respuesta{ color:#000; }
  .tarjeta,.semana,.marco{ background:none; border-color:#999; }
  .marco{ display:none; }
  a{ color:#000; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:.8em; }
}


/* ═══ === añadido por las páginas legales (/aviso-legal/ · /privacidad/) === ══
   Tres clases nuevas y un bloque de impresión que solo alcanza a `.prosa`, un
   contenedor que únicamente usan estas dos páginas (contrato §4).
   Ninguna regla anterior se toca.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── MARCADOR DE DATO QUE FALTA ────────
   Los datos fiscales del titular (razón social, NIF/CIF, domicilio social,
   inscripción registral y licencia de actividad) NO CONSTAN, y el art. 10 de
   la LSSI obliga a publicarlos. Se dejan marcados y se ven: si alguien
   despliega estas páginas sin rellenarlos, el fallo salta a la cara en vez de
   pasar desapercibido entre la letra pequeña.
   Coral sobre la base = 5,83:1 (brief §5.1-A): pasa AA de texto normal, así
   que el marcador se lee igual de bien que el resto del párrafo. El subrayado
   de 2 px hace que el aviso no dependa SOLO del color.
   Al rellenar el dato se borra el <span> entero, etiqueta incluida.           */
.pendiente{
  font-weight:600;
  color:var(--coral);
  border-bottom:2px solid var(--coral);
}

/* ── LOGO A SU TAMAÑO MÍNIMO LEGIBLE ────────
   ██ NO BORRAR ESTA REGLA. LA USAN LA HOME Y LAS DOS LEGALES. ██
   `index.html` la pide por su nombre en `class="wordmark wordmark--firma"` y
   lo dice en su comentario; `/aviso-legal/` y `/privacidad/` igual.

   Motivo, medido y no estimado: `.wordmark` (§7.3) fija 26 px de alto, medida
   pensada para un lockup horizontal de proporción 300×34. El fichero que hay
   en disco es otro — `assets/img/logo-calypso.svg`, viewBox 320×100, la firma
   completa (isotipo + SALA + CALYPSO) — y a 26 px sale de 83 px de ancho: la
   palabra «SALA» mide 3,5 px y desaparece. El mínimo está medido y escrito en
   `assets/img/_COMO-USAR-EL-LOGO.md`: 48 px de alto, 154 de ancho; por debajo
   de ahí se usa el isotipo solo.
   48 px + los 12 + 12 px de padding de `.cabecera__interior` = 72 px, que es
   exactamente `--h-header`: la cabecera NO cambia de altura por esto.

   Su consecuencia en el ancho la resuelve el bloque de la home, más abajo,
   con `.cabecera__interior{flex-wrap:wrap}`. Las dos reglas van juntas: esta
   sin aquella recorta el chip de estado a 320 px.
   ⚠️ `.wordmark` no se toca: sigue siendo el valor por defecto del componente. */
.wordmark--firma{ height:48px; }

/* ── MIGAS CON OBJETIVO TÁCTIL COMPLETO ────────
   Medido en Chromium real: el enlace «Inicio» de `.migas` sale de 19 px de
   alto. Sobrevive a SC 2.5.8 por la excepción de separación (no hay ningún
   otro objetivo dentro de su círculo de 24 px), pero incumple el suelo propio
   del brief §5.6: 48 px en todo lo interactivo, «porque 24 px no lo acierta
   un pulgar a las 2 de la madrugada».
   Se arregla con un MODIFICADOR, no tocando `.migas`: `/eventos-privados/`
   usa el mismo componente y su maquetación no puede cambiar de alto sin que
   se entere quien la escribe. Solo cambia la caja pulsable; el tipo, el color
   y la separación siguen siendo los del §7.14.                               */
.migas--legal .migas__lista a{
  display:inline-flex;
  align-items:center;
  min-height:var(--h-toque);
}

/* ── IMPRESIÓN ────────
   Un aviso legal se imprime más que ninguna otra página del sitio. El §10 pasa
   a tinta negra `.texto`, `.aux` y los títulos de sección, pero no los de
   `.prosa`, que declaran `color:var(--texto)` (crema) y sobre papel blanco
   desaparecerían. Se corrigen aquí, junto con el rombo de las listas y el
   marcador de pendiente.                                                      */
@media print{
  .prosa h2,
  .prosa h3{ color:#000; }
  .prosa ul li::before{ background:#000; }
  .pendiente{ color:#000; border-bottom-color:#000; }
}


/* ═══ === añadido por index.html (la home) === ═════════════════════════════
   UNA regla, y no toca nada de lo escrito arriba.

   El alto del logo NO se resuelve aquí: la home usa `.wordmark--firma`, el
   modificador que ya dejó escrito el bloque de las páginas legales. Los dos
   agentes llegamos al mismo dato medido (48 px de alto / 154 de ancho, mínimo
   para que «SALA» se lea) y a la misma conclusión, así que la regla vive una
   sola vez y en su sitio. Aquí no se duplica.

   Lo que sí falta es la consecuencia de ese ancho, y afecta a las cuatro
   páginas. Medido en Chromium real, no estimado: a 320 px la cabecera tiene
   280 px útiles, y 154 (logo) + 16 (gap) + ~150 (chip, ~193 con el texto
   «Abrimos a las 18:30») no caben en una línea. `.cabecera__interior` es un
   flex con `nowrap` implícito, así que el chip se saldría y lo recortaría el
   `overflow-x:clip` del <html>: el estado de apertura desaparecería justo en
   móvil, que es donde importa, y sin dejar rastro de scroll horizontal que
   delate el fallo. Lo mismo ocurre entre 900 y ~960 px, cuando aparece el
   <nav> en texto.
   Con `wrap`, la cabecera pasa a dos filas SOLO cuando no cabe y vuelve a una
   en cuanto cabe. No introduce CLS: main.js va con `defer`, así que el texto
   del chip ya es el definitivo en el primer pintado.
   Comprobado a 320 · 360 · 390 · 412 · 768 · 900 · 960 · 1024 · 1280 px, con
   JS y sin JS, y en los dos estados del chip: cero desbordamiento lateral.   */
.cabecera__interior{ flex-wrap:wrap; }


/* ═══ === añadido en la reparación del 2026-08-10 (V6) === ═════════════════
   TRES reglas nuevas. Ninguna toca ni una línea de lo escrito arriba: van al
   final a propósito, así que ganan por orden de cascada con la MISMA
   especificidad y se pueden borrar de una pieza sin dejar rastro.
   ───────────────────────────────────────────────────────────────────────── */

/* 1 · EFECTO 4 · el rombo del filete estaba RECORTADO, no dibujado.
   La hoja de usuario del navegador aplica `overflow:hidden` a `<hr>`. La regla
   `.filete` del §5 resetea `border`, `margin` y `height`, pero no `overflow`:
   el pseudo-elemento absoluto quedaba recortado a la caja de 1 px de la línea,
   así que el rombo de 6×6 girado 45° (8,49 px de diagonal) se veía como una
   raya de ~8×1 px. El ornamento de firma del sistema no existía en ninguna de
   sus seis apariciones. Se arregla con una declaración; el rombo está fuera
   de flujo, así que no mueve nada ni introduce CLS. */
.filete{ overflow:visible; }

/* 2 · FORMULARIO v2 DENTRO DE LA SECCIÓN CREMA · contraste.
   Hoy no afecta a nadie —el formulario está comentado en /eventos-privados/—,
   pero sus instrucciones de activación dicen que sustituirá al bloque v1 EN
   ESE MISMO SITIO, que es una `.seccion--crema`. El bloque crema del §5
   reasigna `.kicker`, `p`, `li`, `.aux` y `a`, pero estos cuatro `<span>`
   declaran su propio color y ganan por especificidad. Medido con la fórmula
   WCAG sobre crema #F4EBDD:
       .campo__etiqueta   crema sobre crema  →  1,00:1   (INVISIBLE)
       .campo__req        coral sobre crema  →  2,54:1
       .campo__error      coral sobre crema  →  2,54:1
       .campo__ayuda      #AFADA6 s/ crema   →  1,90:1
   Un formulario sin etiquetas visibles no se puede rellenar, y es la única vía
   de conversión de valor del sitio. En tinta: 14,80:1, y además cumple la
   regla 2 del contrato («dentro de .seccion--crema TODO el texto es #0E1B24»).
   ⚠️ Al activar la v2, revisar también el borde turquesa de `.casilla__control`
      (§7.13): sobre crema da 2,13:1 y SC 1.4.11 pide 3:1 a los límites de un
      control. No se toca aquí porque cambia el aspecto del estado marcado y
      eso es decisión de diseño, no una corrección mecánica. */
.seccion--crema .campo__etiqueta,
.seccion--crema .campo__req,
.seccion--crema .campo__error,
.seccion--crema .campo__ayuda{ color:var(--tinta); }

/* 3 · El texto de ejemplo de los campos es TEXTO y le aplica SC 1.4.3.
   `--texto-3` da 4,57:1 sobre `--base`, que es de donde sale esa cifra, pero
   el campo tiene fondo propio `--sup` #1C272F y ahí se queda en 3,98:1: por
   debajo del 4,5:1 de AA. `--texto-2` #AFADA6 sobre #1C272F da 6,77:1 y sigue
   siendo claramente más apagado que el valor escrito (crema sobre #1C272F,
   12,88:1), que es lo único que el marcador de posición tiene que comunicar. */
.campo__control::placeholder{ color:var(--texto-2); }


/* ═══ === pase de arte (2026-08-10) === ════════════════════════════════════
   DOS reglas nuevas. Todo lo demás del pase se hizo EN SU SITIO, sobre las
   reglas y los tokens que ya existían, porque eran sustituciones (el sol, las
   franjas, la marca de agua, el neón, los marcos) y duplicarlas aquí habría
   dejado dos versiones del mismo efecto en el fichero.
   ───────────────────────────────────────────────────────────────────────── */

/* 1 · EL 18:30 → 3:30 SUBE AL HERO.
   Era la cuarta línea de un párrafo de 19 px, y es el dato que 0 de 9
   competidores de Alcañiz publica (brief §1): la ventaja competitiva real.
   Se REUTILIZA `.cifra` entera —flex-wrap, tabular-nums, la flecha coral
   dibujada en CSS, el `.sr-solo` con la «a»—: cero componentes nuevos.
   Solo cambia el cuerpo, porque en el hero convive con un H1 de 36 px y a
   88 px se lo comería. El `clamp` parte de 34 px para que a 320 px y con la
   raíz a 32 px la cifra siga cabiendo; si no cabe, `.cifra` es flex-wrap y
   parte en dos líneas igual que la de Horario.
   La cifra sale ahora DOS veces en la home: repetición deliberada de la firma
   de marca, no un descuido. */
.cifra--hero{
  font-size:clamp(2.125rem, 9vw, 3.25rem);
  /* RECORTE MEDIDO 2026-08-10 (A4) · el margen inferior era `var(--e-24)`.
     −8 px más sobre el segundo CTA. El superior se deja en 8 px porque NO
     cuenta: colapsa con el `margin-bottom:12px` que trae `.kicker` y gana el
     12. Se restaura a 24 px en el §9 (≥768 px). */
  margin:var(--e-8) 0 var(--e-16);
}
/* Restauración del valor de escritorio. Va AQUÍ y no en el §9 porque el §9
   está más arriba en el fichero y, a igual especificidad, ganaría la regla de
   arriba: una @media no aporta especificidad. */
@media (min-width: 768px){
  .cifra--hero{ margin:var(--e-8) 0 var(--e-24); }
}
/* El `.kicker` trae `margin:0 0 12px`, así que sin esto quedaría pegado a la
   entradilla. Solo dispara donde un kicker sigue a la entradilla del hero, o
   sea únicamente en la home: /eventos-privados/ no lleva cifra y no se entera. */
.hero__entradilla + .kicker{ margin-top:var(--e-24); }

/* 2 · CORRECCIÓN MEDIDA (no estaba en el plan; sale de verificar el cambio 5).
   En /eventos-privados/ las migas son lo PRIMERO del hero, así que caen justo
   donde el sol y sus franjas son más fuertes. Barrido de 76 anchuras de 320 a
   1920 px, muestreando el fondo compuesto real bajo cada caja de línea:
       «Tu evento privado»  #AFADA6 sobre base+sol 25 %+banda 9 % (#593E41)
       = 4,27:1 a 460 px  ❌  (el suelo de AA para texto normal es 4,5:1)
   El aviso del propio plan lo anticipaba: «--texto-2 NO puede quedar bajo una
   banda fuerte». Bajar la banda no vale —haría falta llegar al 6 % y volvemos
   al efecto invisible que midió V5—, así que sube el TEXTO, que es lo que ya
   hace `.hero__entradilla` (crema, no --texto-2) por estar sobre el sol.
   Tras el cambio, el peor caso del hero entero en las 76 anchuras es 7,26:1.
   Solo alcanza a las migas DENTRO de un hero, o sea únicamente a esa página:
   en /aviso-legal/ y /privacidad/ las migas van dentro de `.seccion` y no se
   enteran. El separador «·» sube a --texto-2 para que no desaparezca bajo la
   banda (con --linea-fuerte caía de 3,30:1 a 1,81:1) y sigue siendo más
   apagado que los términos, que es su papel. */
.hero .migas__lista,
.hero .migas a{ color:var(--texto); }
.hero .migas__lista li + li::before{ color:var(--texto-2); }


/* ═══ === v2: iconos, fotos y repaso === ═════════════════════════════════════
   Integración 2026-08-10. Solo AÑADE, salvo el orden de capas de `.marco`
   §7.5, editado en su sitio y anotado allí (B2-A4).
   FOTOS: 0 integradas; las seis `--foto-*` del §2.7 siguen comentadas.
   ⚠️ VA AL FINAL: `.lista-marca--iconos li::before` empata en especificidad
      (0,1,2) con `.lista-marca li::before` del §6 y solo gana por orden.
   ⚠️ PESO AL BORDE: primera carga 110,7 de 112 KB gzip. Lo que se añada aquí
      —comentarios incluidos— se paga en el techo. Por eso este bloque está
      documentado FUERA: el porqué medido de cada regla, con las cifras de
      antes y después, está en _verificacion/B3-integracion-v2.md.
   ───────────────────────────────────────────────────────────────────────── */

/* ── v2.1 · ICONOS · 10 <symbol> en /assets/img/iconos.svg (948 B gzip), 12
   usos, UNA petición del mismo origen: siguen siendo 0 externas.
   El trazo se declara AQUÍ y no en el sprite: con <use> a otro documento el
   clon hereda del <svg> anfitrión, no de la raíz del sprite.
   Caja en `rem` y `flex:none`: reservada antes de que llegue el sprite —CLS
   0— y escala con la raíz. Turquesa 6,94:1 sobre --base, 6,04:1 sobre --sup.
   Decorativos: si el sprite no llegara, no se pierde información. */
.icono{
  display:block;
  width:1.5rem;
  height:1.5rem;
  flex:none;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--turquesa);
}
/* Sobre relleno crema, tinta. Hoy no hay ninguno ahí; queda por si se mueve
   una tarjeta. */
.seccion--crema .icono{ color:var(--tinta); }
/* Encima del h3, no en línea: la columna de `.rejilla--4` ya parte «COPAS Y
   COCTELERÍA» en dos a 1366 px. */
.tarjeta__icono{ margin-bottom:var(--e-8); }
/* En la lista el icono SUSTITUYE al rombo: con `content:none` el pseudo no
   llega a generarse y la regla de §6 para crema se queda sin caja. El margen
   lo centra en la primera línea y se recalcula solo con la raíz a 32 px. */
.lista-marca--iconos li{
  display:flex;
  gap:var(--e-12);
  align-items:flex-start;
  padding-left:0;
}
.lista-marca--iconos li::before{ content:none; }
.lista-marca--iconos .icono{ margin-top:calc((1.6em - 1.5rem) / 2); }
/* El §10 imprime en negro: el turquesa saldría gris y parecería suciedad. */
@media print{ .icono{ color:#000; } }

/* ── v2.2 · B2-A2 · la marca de agua pintaba ENCIMA del contenido y manchaba
   el recuadro «Esta semana». Los dos pseudos del hero ya llevan `z-index:-1`.
   ⚠️ `z-index:-1` A SECAS NO VALE: `#tu-evento` es `.seccion--crema` y tiene
      fondo propio, así que la capa negativa se iría detrás de ese fondo y la
      palmera desaparecería. `isolation` es lo que ordena las dos variantes:
      fondo → marca de agua → contenido. */
.seccion--marca{ isolation:isolate; }
.seccion--marca::before{ z-index:-1; }

/* ── v2.3 · B2-A3 · la barra iba 32 px fuera de la columna en ≥1184 px:
   `.contenedor` tiene max-width 1120 CON padding y `.barra__interior` lo
   tenía SIN él (el padding vive en `.barra`, que es de borde a borde). */
.barra__interior{ max-width:calc(var(--ancho) - var(--pad-lateral) * 2); }

/* ── v2.4 · B2-A1 · REFLUJO A 200 % (WCAG 1.4.4/1.4.10): con la raíz a 32 px
   se perdía texto EN SILENCIO, porque `html{overflow-x:clip}` impide que
   crezca `scrollWidth`. El ancho mínimo del correo sin regla de corte es la
   cadena entera y `.faq{display:grid}` se lo pasaba a la COLUMNA: los cuatro
   `.faq__item` medían 458 px dentro de 350.
   Hacen falta las dos piezas: `minmax(0,1fr)` quita el mínimo automático de
   la pista y `overflow-wrap` parte la cadena dentro de su caja. `anywhere`
   donde además debe bajar el mínimo intrínseco; `break-word` en prosa. */
.faq{ grid-template-columns:minmax(0,1fr); }
.faq__item{ min-width:0; }
.faq__respuesta a[href^="mailto:"],
.prosa a[href^="mailto:"]{ overflow-wrap:anywhere; }
.faq__respuesta,
.prosa p,
.prosa li,
.pie__nap{ overflow-wrap:break-word; }
/* El `word-break` del §7.11 no bastaba: lo que no encogía era la CAJA. */
.email{ min-width:0; }
.email__enlace{ min-width:0; overflow-wrap:anywhere; }

/* ── v2.5 · B2-M4 · el h2 quedaba a la misma distancia de su kicker que de su
   contenido (12,9 / 13,4 a 1366): 16 px fijos contra un h2 que va de 28 a 44.
   ⛔ No se toca el margen del `.kicker`: colapsa a propósito con el de
      `.cifra--hero`, medido al final de este fichero. */
@media (min-width: 768px){
  .titulo-2{ margin-bottom:var(--e-24); }
}

/* ── v2.6 · B2-M1 · «NOCHES Y SHOWS» ocupa una línea y los otros tres títulos
   dos: su párrafo arrancaba 24 px más arriba. Se reservan dos líneas, en rem.
   Es `min-height`: si un título necesitara tres, crece y no se recorta. */
@media (min-width: 1024px){
  .rejilla--4 .titulo-3{ min-height:calc(2 * var(--lh-h3) * var(--t-h3)); }
}

/* ── v2.7 · B2-M6 · los dos kickers de «Horario» son el mismo componente uno
   al lado del otro y su tinta iba 25 px desalineada: lo metía el padding de
   `.semana`, y se le descuenta ese mismo padding. */
@media (min-width: 1024px){
  .horario .semana{ margin-top:calc(var(--e-24) * -1); }
}

/* ── v2.8 · B2-M7 · la fila de «Lo que hay en la sala» la mide la caja 3/2 de
   la derecha y la lista dejaba ~190 px de columna vacía. Modificador y no
   selector de id, para que sirva la próxima vez. */
@media (min-width: 768px){
  .rejilla--centrada{ align-items:center; }
}

/* ── v2.9 · B2-M3 · `.email__aviso` es un <span> VACÍO con `flex-basis:100%`
   y reservaba una fila entera en las cuatro páginas. Con `auto` ocupa 0 de
   ancho y cabe en la fila del botón, que ya mide 48: 82,5 → 48 px, y sigue
   sin haber salto al aparecer «Copiado». El `min-height` se conserva. */
.email__aviso{ flex-basis:auto; }

/* ── v2.10 · B2-M5 · la rejilla del pie alinea cajas, no textos: los enlaces
   son cajas de 48 px con el texto centrado y la columna derecha colgaba
   11 px. Se sube el medio-interlineado sobrante, sin tocar los 48. */
@media (min-width: 768px){
  .pie__enlaces{ margin-top:calc((var(--h-toque) - 1.5em) / -2); }
}

/* ── v2.11 · B2-B2 · la bola numerada colgaba 4,3 px por debajo de la palabra
   que numera; su centro va a 24 px del borde y el del glifo del título a
   8 + (1,3 × 1,125 rem)/2. Se sube esa diferencia, como cálculo para que siga
   valiendo a 32 px de raíz. Y el aire hasta el texto pasa de 8 a 16. */
.paso{ padding-left:calc(var(--e-48) + var(--e-16)); }
.paso::before{ top:calc(var(--e-8) + (1.3 * 1.125rem) / 2 - var(--e-48) / 2); }

/* ── v2.12 · B2-B8 · a 320 px con el texto al 200 % los dos botones de la
   barra se salían 51 px que `overflow-x:clip` recortaba. Con `wrap` se apilan
   SOLO cuando no caben: medido en 25 combinaciones de 320–412 px × raíz
   16–32, a tamaño normal no cambia ni un píxel en ninguna. */
.barra__acciones{ flex-wrap:wrap; }

/* ── v2.13 · B2-B1 · viudas: `.texto` y `.entradilla` ya declaran
   `text-wrap:pretty` y estos seis no. Misma receta, donde faltaba. */
.tarjeta__texto,
.faq__respuesta,
.prosa p,
.prosa li,
.aux,
.hero__datos{ text-wrap:pretty; }

/* ═══ v4 · FOTOS DEL LOCAL (2026-08-22) ═══════════════════════════════════
   Las 6 variables --foto-* del §2.7 quedan declaradas: cada `.marco` tapa su
   degradado con la foto, sin tocar el marcado (esa era la via prevista).
   AQUI solo se resuelve el UNICO caso que el sistema no cubria: el hero.
   .marco--hero se pinta SOLO en >=900px. Motivo medido, no estetico: en movil
   el hero es de una columna, asi que la caja 16:9 caeria DEBAJO del texto y
   empujaria el segundo CTA fuera de la primera pantalla — la regresion que se
   cerro el 11-ago (A4-fix-hero: 6/6 casos dentro del techo de 600 px).
   En movil el hero conserva su atmosfera propia (sol de medianoche + franjas),
   que no depende de ninguna imagen. */
.marco--hero{ display:none; }
@media (min-width:900px){
  .marco--hero{ display:block; }
}