/* =========================================================================
   Mundo Ecuestre — hoja de estilos
   -------------------------------------------------------------------------
   DISS-A     · BEM.
   DISS-B     · Identificadores en inglés; solo el contenido va en español.
   DISS-FE-01 · WHATWG + WCAG 2.2. Piso A, objetivo AA. Se apunta además a
                1.4.8 (AAA) en medida de línea e interlineado, porque el objeto
                de esta página es texto largo que se lee de corrido.
   DISS-FE-02 · Tokens vivos: cada valor se declara UNA vez y se consume.
   DISS-MO-01/02/03/05 · Solo movimiento CSS, con los tokens medidos, encendido
                dentro de prefers-reduced-motion: no-preference.

   Dirección de arte · 2026-09-08. Las cuatro decisiones y su porqué:
   1. Tipografía con voz (Bitter + Archivo). La evidencia dice que la
      tipografía es la única palanca de carta con efecto medido sobre la
      cuenta; el resto del arsenal —recuadros, destacados— no lo tiene.
   2. Lectura secuencial, sin énfasis repartido. Yang 2012: la carta se lee
      como un libro. Los destacados dispersos trabajan en contra.
   3. Guía de puntos entre plato y precio: el gesto propio de una carta, y el
      que hace que el precio se lea sin buscarlo. Cuesta cero bytes.
   4. Franja oscura de portada: presencia sin peso. Ni una sola imagen — el
      peso de la página es la razón por la que este sitio existe.
   ========================================================================= */

html { overflow-x: clip; }   /* red de seguridad del sangrado; `clip` y no
                                `hidden` porque hidden rompe position: sticky */

/* ================================================ RESPALDOS CON MÉTRICA AJUSTADA
   El único desplazamiento de maquetación que quedaba (CLS 0,076, medido con
   Lighthouse 13.4.1) lo causaba el relevo de la fuente de respaldo por la
   fuente web: Georgia y system-ui no tienen la misma altura de x ni el mismo
   ancho medio que la tipografía definitiva, así que la portada se reacomodaba
   al terminar de bajarla.

   `size-adjust` (CSS Fonts 4) hace que el respaldo OCUPE lo mismo que la fuente
   final. Los dos valores están MEDIDOS en el navegador, no estimados, y el
   procedimiento queda escrito en cada uno. No añade ni una petición de red. */
@font-face {
  font-family: "Bitter respaldo";
  src: local("Georgia"), local("Times New Roman");
  /* MEDIDO, no estimado (2026-09-08, Chrome): la misma frase sin salto de línea
     mide 1082,5 px en Bitter y 1205,5 px en Georgia al mismo cuerpo → 89,8 %.
     La altura de línea de la casa es sin unidad, así que el alto del renglón no
     depende de la fuente: basta con igualar el ancho. Se vuelve a medir CADA
     VEZ que cambia la tipografía; una vez lo escribí «estimado» y me quedó al
     revés (103 % donde iban 93), y el titular saltaba de tres líneas a dos. */
  size-adjust: 89.8%;
}
@font-face {
  font-family: "Archivo respaldo";
  src: local("Helvetica Neue"), local("Arial");
  /* Igual, medido: 848 px en Archivo contra 864,5 px en Arial → 98,1 %. */
  size-adjust: 98.1%;
}

:root {
  color-scheme: light;
  /* ---------------------------------------------------------------- marca */
  /* Medido en OKLCH sobre los propios logos del cliente, 2026-09-08.
     El logo madre es 45 % DORADO y solo 5 % verde: el dorado ES la marca; el
     verde era el degradado que oscurecía una foto de fondo del sitio viejo, y
     lo confundí con identidad. Corregido.

     Sus nueve tonos van de L 0.287 a L 0.816 — 53 % de diferencia de
     luminosidad PERCIBIDA. Por eso unos gritaban y otros desaparecían. Aquí se
     fijan L y C y solo varía el TONO: cada marca conserva su identidad y todas
     pesan igual. (Itten, contraste de extensión · W3C CSS Color 4.) */
  --brand-hue: 91.1;

  --brand-paper:    oklch(0.968 0.012 var(--brand-hue));
  --brand-paper-2:  oklch(0.945 0.016 var(--brand-hue));
  --brand-paper-3:  oklch(0.912 0.022 var(--brand-hue));
  --brand-rule:     oklch(0.855 0.026 var(--brand-hue));
  --brand-ink:      oklch(0.190 0.014 var(--brand-hue));
  --brand-ink-2:    oklch(0.300 0.014 var(--brand-hue));
  --brand-ink-mute: oklch(0.505 0.018 var(--brand-hue));
  --brand-accent:      oklch(0.520 0.115 var(--brand-hue));
  --brand-accent-dark: oklch(0.800 0.130 var(--brand-hue));
  --brand-danger: oklch(0.500 0.140 27);
  --brand-focus:  oklch(0.550 0.120 var(--brand-hue));

  /* ------------------------------------------------------------ semántico */
  --color-page:           var(--brand-paper);
  --color-surface:        var(--brand-paper-2);
  --color-surface-raised: var(--brand-paper-3);
  /* El campo de la portada: un tinte cálido propio, más saturado que el papel.
     Separa el escenario del resto del sitio SIN apagarlo — que es exactamente
     lo que costó la pasada de tinta: el 94 % del color de la primera pantalla,
     medido (78,1 % → 4,7 % de superficie con color). */
  --color-escenario:      oklch(0.916 0.024 84);
  --color-rule:           var(--brand-rule);
  --color-rule-soft:      var(--brand-paper-3);
  --color-text:           var(--brand-ink);
  --color-text-muted:     var(--brand-ink-mute);
  /* La tinta de en medio. `--brand-ink-2` estaba declarada en la rampa desde
     el principio y casi sin consumir; le faltaba nombre semántico para poder
     usarse sin saltarse la capa. Sirve para lo que está entre el texto y el
     texto apagado: los rótulos de estructura, que tienen que leerse sin
     pesar. */
  --color-text-soft:      var(--brand-ink-2);
  --color-accent:         var(--brand-accent);
  --color-danger:         var(--brand-danger);
  --color-focus:          var(--brand-focus);
  /* De estos seis solo sobrevive el uso del `.skip-link`, que debe destacar
     sobre cualquier fondo. El encabezado, la portada y el pie dejaron de ser
     oscuros el 2026-09-08. */
  --color-inverse-bg:     var(--brand-ink);
  --color-inverse-bg-2:   var(--brand-ink-2);
  --color-inverse-text:   var(--brand-paper);
  --color-inverse-muted:  oklch(0.720 0.020 var(--brand-hue));
  --color-inverse-accent: var(--brand-accent-dark);
  --color-inverse-rule:   oklch(0.968 0.012 var(--brand-hue) / 0.24);

  /* PARNAS · el tono de CADA unidad lo escribe el JS desde el dato: la hoja de
     estilos no conoce los nueve colores, solo sabe que cada unidad tiene uno.
     «De qué color es La Vaquerita» cambia con la unidad, no con el sistema de
     diseño, así que esa decisión se oculta en el dato. El respaldo es el tono
     de marca, por si el dato faltara. */
  --venue-hue: var(--brand-hue);
  /* L .450 y no .520: al volverse CAMPO el tono pálido, el rótulo de 11,8 px
     quedó a 4,47 contra su propio fondo —falla 1.4.3 por 0,03— porque texto y
     campo comparten tono y ahí el contraste se adelgaza. Medido sobre los nueve
     tonos: a L .450 el peor sube a 6,07 (el verde de Don Juan, el más luminoso
     de los nueve, es el que manda). De paso el acento se calma. */
  --color-venue:      oklch(0.450 0.115 var(--venue-hue));
  --color-venue-soft: oklch(0.945 0.035 var(--venue-hue));
  --color-venue-line: oklch(0.720 0.090 var(--venue-hue));
  /* Para los signos GRANDES. Mismo claro, más croma: a L .450 y C .115 el azul
     del Club sale #155792 y a tamaño grande se ve lavado. Subiendo el croma a
     .150 sale #0056A4 y el contraste apenas se mueve (peor caso 6,07 → 5,95,
     muy por encima del piso 3:1 de WCAG 1.4.11 para gráficos). */
  --color-venue-strong: oklch(0.450 0.150 var(--venue-hue));
  /* OJO: estas tres de aquí arriba son solo el RESPALDO. Se vuelven a declarar
     en cada elemento que fija su propio tono — ver «.venue-card, .venue-header,
     .mesa__sign» más abajo, y el porqué escrito ahí. */

  /* ----------------------------------------------------------- tipografía */
  --font-display: "Bitter", "Bitter respaldo", Georgia, "Times New Roman", serif;
  --font-text: "Archivo", "Archivo respaldo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ESCALA MODULAR · base 17 px (1.0625rem), razón 1.2 — tercera menor.
     Bringhurst: «una escala modular, como una escala musical, es un conjunto
     preestablecido de proporciones armónicas». La clave es que la razón sea
     CONSTANTE. La escala anterior no lo era: medida sobre la página, sus
     razones iban de 1.083 a 1.882 — ocho tamaños sueltos, no una escala. Eso
     es lo que se sentía como falta de armonía.

     El PISO lo pone la evidencia, no el gusto: Legge & Bigelow (2011, J. Vision
     11(5):8) fijan el tamaño crítico de lectura en 0.2° de x-height. Para
     Archivo a 35 cm —un celular sobre la mesa, que es nuestro caso— eso son
     8.9 px de cuerpo. Nuestro texto va a 17 px: muy por encima. La evidencia
     da un piso y una meseta de 10×; NO dice qué tamaño usar. Eso lo decide la
     escala. */
  --text-2xs: 0.738rem;   /* paso −2 · 11.8 px */
  --text-xs:  0.885rem;   /* paso −1 · 14.2 px */
  --text-sm:  0.960rem;   /* paso −0.5 · 15.4 px — el único medio paso, para
                             que el texto secundario no colapse con el rótulo */
  --text-md:  1.0625rem;  /* paso  0 · 17 px — el cuerpo */
  --text-lg:  1.275rem;   /* paso +1 · 20.4 px */
  --text-xl:  1.530rem;   /* paso +2 · 24.5 px */
  --text-2xl: 1.836rem;   /* paso +3 · 29.4 px */
  --text-3xl: clamp(2.203rem, 8vw, 3.807rem);
  --text-hero: clamp(2.203rem, 5.4vw, 3.173rem);   /* pasos +4 a +6 */
  --text-3xl-title: clamp(1.836rem, 4.5vw, 2.643rem);  /* pasos +3 a +5 */  /* pasos +4 a +7 */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  --leading-tight: 1.08;
  --leading-snug:  1.28;
  --leading-body:  1.55;   /* WCAG 1.4.8 pide >= 1.5 */

  --tracking-label: 0.14em;
  --tracking-tight: -0.014em;

  /* WCAG 1.4.8 (AAA): ancho no mayor a 80 caracteres. Nos quedamos debajo. */
  --measure: 68ch;
  --measure-narrow: 52ch;

  /* LA TIPOGRAFÍA CAMBIÓ EL 2026-09-08. Era Fraunces, y el dueño la mató:
     «alguna tipografía se ve con esa curva, como la de la familia, y se ve
     horrible». Tenía razón y el defecto es identificable: Fraunces lleva un eje
     WONK y remates de trazo curvos en la «a», la «y» y la «f» — es su gracia y
     es exactamente lo que chirría al lado de un sistema de dibujos de borde
     duro y primitivas geométricas.

     La reemplaza **Bitter**, una egipcia (slab). El remate de una egipcia es un
     RECTÁNGULO: el mismo idioma que los pictogramas de la casa. Se eligió
     mirando diez candidatas compuestas con el titular real —no de memoria—, y
     la comparación está en `la-tipografia-y-la-forma.md`.

     Sin ejes variables: se midió que una variable con ejes de forma cuesta
     298 KB contra 74 KB en estáticas, sobre un sitio que entero pesa 84 KB. */

  /* ------------------------------------------------------------- espacio */
  --space-2xs: 0.25rem;
  /* El verde oficial de WhatsApp estaba cableado dos veces dentro de
     `.button--wa` y ahora hace falta también en la lista de canales: se nombra
     una vez y se usa desde aquí. */
  --color-wa: oklch(0.520 0.150 158);
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* -------------------------------------------------------------- maqueta */
  --layout-max: 66rem;
  --layout-gutter: var(--space-lg);
  --size-hairline: 1px;
  --size-tap-min: 2.75rem;   /* 44px. WCAG 2.5.8 (AA) pide 24; el piso propio es 44 */
  /* ESCALA MODULAR DE OBJETO · una unidad, y todo lo demás es un múltiplo suyo.
     Antes esto eran tres valores sueltos (5.5 · 8.5 · y un 3.75rem para los
     dibujos), y por eso la página se veía plana: todo caía en la misma franja
     media. Vignelli, en su Canon: «a disc within a disc will have a diameter
     half the size of the larger or a third of it, but not an odd, casual size».
     Aicher, Múnich 72: lo que hace legible un destino con muchas sedes no es
     que cada sede sea bonita, es que todas obedezcan un sistema.

     La escalera queda: ×1 una cocina · ×2 lo que se hace aquí y la cocina de la
     casa · ×4 el sitio entero. Un rango de 4:1 donde antes había 1,7:1. */
  --size-unit: 5rem;
  --size-portrait:    var(--size-unit);             /* ×1 · una cocina */
  --size-portrait-lg: calc(var(--size-unit) * 2);   /* ×2 · la cocina de la casa */
  --size-mark:        calc(var(--size-unit) * 2);   /* ×2 · qué se hace aquí */
  --size-hero-art:    calc(var(--size-unit) * 4);   /* ×4 · el sitio entero */
  --size-logo: 2.5rem;
  --size-search-max: 34rem;
  --radius-sm: 2px;
  /* El referente que fijó el dueño —Disney World es-co— redondea todos sus
     mosaicos. Suave, no de burbuja: es lo que hace que una rejilla de bloques
     de color se lea como «cosas para tocar» y no como una tabla. */
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-header: 0 1px 0 oklch(0.190 0.014 var(--brand-hue) / 0.14);

  /* El JS mide el header y reescribe este token. El valor de aquí es el
     RESPALDO: el mayor alto observado, para que sin JS el ancla se pase de
     largo en vez de tapar el título. */
  --header-height: 5.75rem;
  /* Alto de la barra de destinos de teléfono. Se declara aquí para que el
     desplazamiento a anclas lo sume: al hacerse pegajosa, el bloque que tapa
     el destino de un enlace ya no es solo el encabezado. Sin esto, tocar
     «Comer» deja el título de la sección DEBAJO de la barra. */
  --barra-height: 0px;
  --scroll-anchor-offset: calc(var(--header-height) + var(--barra-height) + var(--space-xs));

  /* -------------------------------------- movimiento (DISS-MO-02, medidos) */
  --motion-instant: 100ms;
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-medium:  250ms;
  --motion-wide:    300ms;
  --ease-house:     cubic-bezier(.2, 0, 0, 1);
  --ease-in-out:    cubic-bezier(.4, 0, .2, 1);
  --ease-out:       cubic-bezier(.4, 0, 1, 1);
  --motion-lift-sm: -1px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--scroll-anchor-offset);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semi); }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------- utilidad */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: var(--space-xs);
  z-index: 10;
  background-color: var(--color-inverse-bg);
  color: var(--color-inverse-text);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-200%);
  /* Medido: 42 px de alto. El piso táctil de la casa son 44 y este enlace es
     precisamente el que usa quien navega por teclado. */
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: var(--size-hairline);
  height: var(--size-hairline);
  margin: calc(var(--size-hairline) * -1);
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ página */
.page__main {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 0 var(--layout-gutter) var(--space-3xl);
}

/* La carta la escribe el JS después de leer el dato, así que hasta ese momento
   el pie está arrimado al encabezado y luego lo empuja media pantalla abajo:
   CLS 0,149 medido con Lighthouse 13.4.1 en la página de unidad. Reservar el
   alto de la ventana desde el primer pintado deja el pie donde va a quedar.
   No es un maquillaje del número: es el hueco que el contenido va a ocupar. */
[data-venue-root] { min-height: 100svh; }
[data-venue-root]:has(.venue-header) { min-height: 0; }

/* ------------------------------------------------------------- site-header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 3;
  /* Era una banda de tinta arriba del todo. Aclarada: se sostiene con un filete
     y la sombra, no con una masa oscura. */
  background-color: var(--color-page);
  color: var(--color-text);
  border-bottom: var(--size-hairline) solid var(--color-rule);
  box-shadow: var(--shadow-header);
}

/* ------------------------------------------- fila 1 · barra de servicio
   El referente la usa para región, buscador y cuenta. Aquí lleva lo que un
   visitante necesita antes que nada: dónde queda y si está abierto. En teléfono
   se oculta —el ancho no da para dos filas— y esos dos datos vuelven a salir en
   «Cómo llegar». */
.site-header__utility {
  display: none;
  background-color: var(--color-surface-raised);
  border-bottom: var(--size-hairline) solid var(--color-rule);
  font-size: var(--text-2xs);
  /* `soft` y no `muted`: el horario medía **4,56** de contraste, seis
     centésimas sobre el mínimo para 11,8 px. Es el mismo filo que tenía el
     rótulo de grupo y se corrige con el mismo token. */
  color: var(--color-text-soft);
  font-weight: var(--weight-medium);
}
.site-header__utility-inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: 6px var(--layout-gutter);
  display: flex;
  align-items: center;
  /* Vuelve `space-between`: la fila tiene otra vez DOS ocupantes —el lugar a
     la izquierda, el estado y el horario a la derecha—, así que repartir el
     espacio entre ellos es lo que corresponde. El borde derecho sigue
     alineado con el de «Llamar» de la fila de abajo. (Fue `flex-end` entre el
     2026-09-10 02:10 y esta pasada, mientras la fila tuvo un solo ocupante.) */
  justify-content: space-between;
  gap: var(--space-md);
}
/* UNA SOLA FIRMA EN LA FRANJA, y es la misma regla que ya se aplicó a la fila
   de abajo (adenda E del alfabeto). Medido antes: el lugar iba en peso 500 y
   contraste **14,22**; el horario en peso 400 y **4,56**. El sitio gritaba y
   el horario susurraba — al revés de lo que importa, porque el dato accionable
   es a qué hora cierra.
   Los dos pasan al mismo peso y a la misma tinta. La jerarquía la lleva el
   PUNTO DE ESTADO —verde o gris, con su color propio—, que es lo único que
   debe destacar aquí y no es tipografía. */
.site-header__where { font-weight: var(--weight-medium); }
/* `md` y no `xs` en el hueco: entre semana esta fila lleva DOS frases largas
   —el aviso de la escuela y el horario de los restaurantes— y con 8 px se
   leían como una sola oración corrida. Con 16 px se separan sin necesidad de
   meter un separador tipográfico, que además chocaría con los « · » que ya
   viven dentro de la propia línea de horario. */
.site-header__when { display: flex; align-items: center; gap: var(--space-md); }
/* EL HORARIO COMPLETO ES EL RESPALDO, NO UN ACOMPAÑANTE.
   Medido un sábado a las 14:00, la franja decía:
     «Abierto ahora · hasta las 9:00 p. m. · Restaurantes: viernes a domingo y
      festivos · 11:30 a. m. – 9:00 p. m.»
   **«9:00 p. m.» dos veces en la misma línea**, y «viernes a domingo»
   repitiendo lo que «Abierto ahora» ya había resuelto: 105 caracteres para
   contestar una pregunta de dos palabras. Es la regla dura de la casa —un
   valor no se escribe dos veces— rota en el texto que se ve.

   El JS ya distingue los dos casos con honestidad: afirma solo de viernes a
   domingo, y **de lunes a jueves calla porque podría ser festivo**. Lo que
   faltaba era la consecuencia: cuando hay respuesta, el horario semanal
   sobra; cuando no la hay, el horario es lo único que se puede decir, y
   entonces sí se muestra —con su «Restaurantes:» delante, porque la escuela
   tiene otro horario y decirlo a secas sería falso—. */
.site-header__when:has(.estado:not([hidden])) [data-site-hours] { display: none; }

/* «¿Está abierto?» es la primera pregunta de quien va a salir, y el referente
   la responde en su primer bloque. Aquí se responde en la barra de servicio, y
   solo cuando se puede afirmar sin riesgo — el porqué, en `menu.js`. */
/* LA SALVAGUARDA QUE FALTABA EN TODA LA CASA, y costó un hueco fantasma.
   `hidden` solo lo aplica la hoja del navegador, con especificidad de tipo:
   **cualquier clase que declare `display` lo anula en silencio**. Medido en
   `.estado`: el atributo estaba puesto —`hidden: true`— y el elemento
   computaba `display: flex`. No se veía porque queda de 0 × 0, pero **seguía
   contando como hijo de un `flex` y generaba su hueco**: los 24 px entre el
   reloj y el horario eran dos huecos de 12, no uno.
   Va con `!important` a propósito: `hidden` es una declaración de intención
   del HTML y no debe poder perderla contra una clase. */
[hidden] { display: none !important; }

.estado { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.estado__punto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background-color: var(--color-text-muted);
}
.estado--abierto .estado__punto { background-color: oklch(0.520 0.150 158); }
.estado--abierto .estado__texto { color: oklch(0.430 0.120 158); }
.estado--cerrado .estado__texto { color: var(--color-text); }
.estado__detalle { color: var(--color-text-muted); }
@media (min-width: 48em) {
  .site-header__utility { display: block; }
}

/* ------------------------------------------------- fila 2 · navegación */
.site-header__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  /* El aire vertical baja de `sm` a `2xs`: con el logotipo completo de tres
     líneas, la barra se iba a 93 px y empujaba el botón del hero 25 px más
     abajo. La marca no se achica —es la que manda—; lo que cede es el aire. */
  padding: var(--space-2xs) var(--layout-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.site-header__actions { display: flex; align-items: center; gap: var(--space-xs); }
/* En teléfono no caben los dos: manda WhatsApp, que es la llamada real.
   Especificidad 0-2-0 a propósito: `.button` declara su propio `display` y está
   MÁS ABAJO en la hoja; con un solo selector de clase volvía a ganar y a 320 px
   el botón «Llamar» se salía del encabezado. Cuarta vez en este encargo. */
.site-header__actions .site-header__call { display: none; }
/* Medido a 768: con la navegación, WhatsApp y «Llamar» el encabezado se pasaba
   del ancho y «Llamar» salía cortado. Solo aparece cuando de verdad cabe. */
@media (min-width: 64em) {
  .site-header__actions .site-header__call { display: inline-flex; }
}

.site-header__brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  /* Las DOS dimensiones, no solo el alto. Al retirar el bloque tipográfico en
     teléfono, el enlace se quedó con el ancho del emblema —39 px— y cayó por
     debajo del piso táctil de la casa. El objetivo que se toca no depende del
     tamaño del dibujo que lleva dentro. */
  min-height: var(--size-tap-min);
  min-width: var(--size-tap-min);
  justify-content: flex-start;
  /* NO SE ENCOGE. Este enlace es un ítem flexible del encabezado y venía con
     el `flex-shrink: 1` de fábrica, mientras sus dos hijos —emblema y
     wordmark— llevan `flex-shrink: 0`. Resultado medido a 768 px: la CAJA del
     enlace se encogía a 51 px y el dibujo seguía pintando 171, saliéndose por
     la derecha y SOLAPANDO 96 px con la navegación. Dos defectos en uno: el
     logotipo montado encima del menú, y solo 51 de sus 171 px cliqueables.

     Con `flex: none` el conflicto deja de resolverse en silencio: si algún día
     no cabe, desborda, y el desbordamiento sí lo caza la batería. Un defecto
     que se ve es mejor que uno que se tapa. */
  flex: none;
}

/* El escudo del cliente: cabeza de caballo y montaña. Sale de su propio menú
   impreso (Don Juan de Dios, contracarátula), que es donde vive el logotipo
   nuevo; su portal de cartas todavía muestra el viejo.

   Es una silueta de UNA SOLA TINTA, así que el archivo entra como MÁSCARA y el
   color lo pone la hoja con `currentColor`: el mismo PNG sirve sobre el campo
   claro y sobre el oscuro, y el logotipo no se escribe dos veces.

   El tamaño no es gusto: en hoja de contacto a 64 / 32 / 24 px, el escudo se
   lee hasta 32 y por debajo se vuelve mancha. `--size-logo` son 40. */
.site-header__logo {
  display: block;
  /* El hueco se declara desde el primer pintado —Lighthouse lo midió una vez
     como «Media element lacking an explicit size»— con la proporción real del
     archivo, 202 × 220. */
  /* EL EMBLEMA —escudo con hojas—, la parte gráfica entera del logotipo.
     Caja medida: 222,2 × 266,5.

     SU TAMAÑO NO ES LIBRE: en el logotipo original el emblema mide 266,5 de
     alto y el bloque de texto 199,9, o sea que **el emblema es 1,33 veces más
     alto que el texto**. Antes aquí la razón era 0,70 —invertida— y por eso el
     escudo parecía un adorno pegado a un rótulo grande.
     `--size-logo` es el alto del BLOQUE; el emblema lo multiplica por 1,33. */
  width: calc(var(--size-logo) * 1.33 * 222.2 / 266.5);
  aspect-ratio: 222.2 / 266.5;
  height: calc(var(--size-logo) * 1.33);
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(../img/marca/mundo-ecuestre-emblema.svg) center / contain no-repeat;
          mask: url(../img/marca/mundo-ecuestre-emblema.svg) center / contain no-repeat;
}

/* EL WORDMARK del logotipo, en lugar del nombre compuesto con Bitter. Misma
   técnica que el escudo: máscara de una tinta, así hereda el color y sirve
   sobre claro y sobre oscuro con un solo archivo. Caja medida: 434 × 200. */
.site-header__wordmark {
  display: block;
  /* EL BLOQUE TIPOGRÁFICO, en DOS líneas: filetes superiores, MUNDO y
     ECUESTRE. Caja medida: 434 × 170,1.

     «NATURALEZA» se fue, y no por gusto: mide 17,1 de alto —el **9 %** del
     bloque— pero obliga a una tercera línea que sube el bloque un 18 %. Y a
     tamaño de barra era ilegible: medido en hoja de contacto, se lee desde
     200 px de bloque y por debajo de 140 es una mancha; aquí caben ~100.
     Un descriptor que no se lee no informa: ocupa. Sigue en el pie, donde el
     logotipo va entero y grande.

     Y sin los filetes superiores: Daniel los quitó y tiene razón —el filete
     enmarcaba un bloque de TRES líneas; con dos, cierra por arriba una forma
     que ya no lo necesitaba y le añade peso al lado que compite con el
     emblema—. Caja sin filetes: 424,2 × 147,8. */
  width: calc(var(--size-logo) * 424.2 / 147.8);
  aspect-ratio: 424.2 / 147.8;
  height: var(--size-logo);
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(../img/marca/mundo-ecuestre-wordmark.svg) center / contain no-repeat;
          mask: url(../img/marca/mundo-ecuestre-wordmark.svg) center / contain no-repeat;
}

/* La navegación va en el medio y empuja la acción al extremo. Debajo de 48em
   se retira: a 320 px tres enlaces más el logo más el botón no caben sin
   apretarlos por debajo del objetivo táctil, y las secciones están ahí abajo
   a un dedo de distancia. */
.site-nav { display: none; }

@media (min-width: 48em) {
  .site-header__inner { gap: var(--space-lg); }
  .site-nav {
    display: flex;
    gap: var(--space-md);
    margin-inline-start: auto;
  }
  .site-nav__link {
    /* Sin `nowrap`, a 768 px «Cómo llegar» partía en dos líneas y el enlace
       quedaba de 44 px de ancho: por debajo del piso táctil de la casa.
       (Antes esto estaba en DOS bloques `.site-nav__link` seguidos; se
       fundieron: la misma regla escrita dos veces es una regresión esperando.) */
    white-space: nowrap;
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
    /* Medido: 40 px. Piso de la casa, 44. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: var(--size-tap-min);
    /* El subrayado ya NO es un borde de cada enlace: es un elemento que se
       desliza entre ellos (ver `.site-nav__sub`). El borde se queda como
       reserva de espacio para que el texto no salte. */
    border-bottom: 2px solid transparent;
    opacity: 0.66;
  }
  .site-nav__link:hover,
  .site-nav__link:focus-visible { opacity: 1; }

  /* EL SIGNO DE CADA SECCIÓN. Los tres ya existían en el alfabeto —caballo,
     plato y pin—; no se dibujó ninguno nuevo. 20 px y no 14: medido en hoja de
     contacto, la silueta del caballo deja de leerse por debajo de ~20. */
  /* QUINTA VEZ la trampa de cascada, y esta vez medida antes de creerla:
     `.ic` fija 1,15em y vive DESPUÉS en el archivo, así que con la misma
     especificidad ganaba y el signo salía a 16 px, no a 20. Se sube la
     especificidad en vez de confiar en el orden — el orden se rompe al mover
     un bloque; la especificidad, no. */
  /* 26 y no 20: en Airbnb el signo pesa tanto como el rótulo, y a 20 el
     nuestro quedaba de acompañante. 26 es lo que cabe sin que la barra crezca
     —el enlace ya mide 44 de alto por el piso táctil— y sin que los tres
     enlaces desborden a 768 px, que es donde antes partía «Cómo llegar». */
  .site-nav .site-nav__ic { width: 26px; height: 26px; flex: none; }

  /* EL COLOR DEL ENCABEZADO — Lance Wyman: un tono por línea.
     No es una paleta nueva: son los MISMOS tonos del sistema de nueve, cada
     sección con el de aquello que nombra. El del caballo es el del Club
     Deportivo (250,2), el del plato el de Don Juan (143,9), y el del pin el
     dorado de la casa. Un icono gris no dice nada que el texto no diga ya;
     con su tono, el color hace de índice.
     El rótulo se queda en tinta: el color va en el SIGNO, no en el texto —
     así el contraste del texto no depende del tono. */
  .site-nav__link[data-tono="monta"]  { --venue-hue: 250.2; }
  .site-nav__link[data-tono="cocina"] { --venue-hue: 143.9; }
  .site-nav__link[data-tono="lugar"]  { --venue-hue: 84; }
  .site-nav .site-nav__ic { color: oklch(0.480 0.110 var(--venue-hue)); }
  /* Al pasar por encima el tono se ahonda: el signo se enciende antes que el
     texto, que es lo que hace que el color se lea como respuesta y no como
     decoración. */
  .site-nav__link:hover .site-nav__ic,
  .site-nav__link:focus-visible .site-nav__ic { color: oklch(0.400 0.135 var(--venue-hue)); }

  /* EL SUBRAYADO DESLIZANTE. Un solo elemento para los tres enlaces, con la
     mecánica medida en Airbnb el 2026-09-09: base de 10 px que se estira con
     `scaleX` y se desplaza con `translateX`, 300 ms, cubic-bezier(.2,0,0,1).
     Nunca se anima `left` ni `width` —serían recálculos de maquetación en cada
     cuadro—; `transform` lo resuelve el compositor. DISS-MO-05. */
  .site-nav { position: relative; }
  .site-nav__sub {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10px;
    height: 2px;
    /* El tono lo pone el enlace al que llega (lo copia el JS). Sin tono
       —antes del primer paso, o si algo falla— se queda en el dorado de la
       casa: nunca sin color. */
    background-color: oklch(0.480 0.110 var(--venue-hue, 84));
    transform-origin: 0 50%;
    transform: scaleX(0);
    pointer-events: none;
  }
}

.site-header__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.site-header__place {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* -------------------------------------------------------------------- hero */
/* REESCRITO 2026-09-08. La versión anterior era una banda oscura con un
   degradado `rgb(11 33 22 / .86)` — VERDE, tono sRGB 150°, escrito a mano
   dentro de un background-image. Sobrevivió a la auditoría de paleta porque
   ningún token lo declaraba y porque mi instrumento leía background-COLOR y no
   background-IMAGE. Ocupaba el 13 % del área y era lo primero que se veía: era
   «el verde por todos lados» que reportó el dueño. Se fue.
   Lo que ocupa su lugar no es un fondo: es un DIBUJO. */
/* CAMPO DE COLOR. Hasta aquí la página era crema de arriba abajo: cuatro
   secciones idénticas —título, filete, rejilla de cajas— sobre el mismo fondo.
   Por eso «se veía igual» aunque los dibujos y el color por unidad estuvieran
   bien: no había ni un solo campo lleno en toda la página.

   Lo que se miró para decidirlo (2026-09-08, navegando de verdad, no leyendo
   HTML): Singita abre con foto a sangre de borde a borde y el titular encima,
   sin caja; Disney abre con foto a sangre y el buscador de tickets metido
   dentro. Los dos usan el ancho completo. Nosotros usábamos una columna.

   Foto a sangre no podemos: la suya mide 340×259. Lo que sí tenemos es tinta,
   el dorado, y una herradura. Así que el campo es de color y el dibujo se sale
   del borde — Vignelli: la escala se puede manipular «purposely out of scale». */
.hero {
  position: relative;
  overflow: hidden;
  /* La portada era un campo de TINTA. El dueño lo dijo varias veces: demasiado
     oscuro. El campo se queda —la composición no era el problema— pero en papel.
     Lo que la sostiene ahora es la herradura enorme saliéndose del borde, no el
     color del fondo. */
  background-color: var(--color-escenario);
  border-bottom: var(--size-hairline) solid var(--color-rule);
  color: var(--color-text);
}

.hero__inner {
  max-width: var(--layout-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--layout-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

/* ====================================================== LOS NUEVE MOSAICOS
   El bloque de «horarios de los parques» del referente, traído tal cual: un
   mosaico por sitio, con su imagen, su color y su precio de entrada. Es la
   portada y es el índice: quien llega ve de una los nueve negocios que hay,
   que es lo que el dueño pidió desde el principio.

   Tres columnas siempre. El valor de esta rejilla es que se vean JUNTOS. */
.units {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Dos columnas en las pantallas más angostas y tres a partir de 22em (352 px).
     Medido a 320: con tres columnas el mosaico queda de 88 px y «Pequelandia»
     toca los dos bordes; con dos queda de 136 px y respira. De 352 en adelante
     las tres caben, y ver los nueve de un golpe vale más que el aire. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Filas iguales: si no, «Santander Dulce» parte en dos líneas y su fila entera
     crece, y los nueve dejan de leerse como un conjunto. */
  grid-auto-rows: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 22em) {
  .units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* EL HUÉRFANO. Siete en tres columnas dejan 3 + 3 + 1, y ese último solo,
     pegado a la izquierda, se lee como un error de maquetación y no como el
     séptimo restaurante. Se centra. Es la misma razón por la que se centra un
     último renglón corto en tipografía: un resto alineado a un borde parece
     un corte, y centrado parece un final. */
}
/* CON TOPE DE ANCHO, y la falta de tope fue un defecto real: sin él la regla
   seguía viva a 1440, donde la rejilla tiene SIETE columnas y no hay huérfano,
   y empujaba la séptima tarjeta a una segunda fila. Una regla de excepción sin
   el rango donde la excepción existe deja de ser una excepción. */
@media (min-width: 22em) and (max-width: 55.99em) {
  .units--comer > .unit:last-child:nth-child(7) { grid-column: 2; }
}
/* ═════════════════ LAS DOS REGIONES DEL HERO · Palmer 1992
   El mecanismo es la REGIÓN COMÚN, no el rótulo ni el orden. Palmer demuestra
   que agrupa por encima de la proximidad y de la similitud (Figs. 2C y 2D), y
   —esto es lo que la hace posible aquí— que las regiones ANIDADAS construyen
   jerarquía (Fig. 5A): la tarjeta ya es una región de color que dice QUIÉN es,
   y la banda es la región mayor que dice DE QUÉ TIPO es. No compiten.

   Por eso NO se recolorean las tarjetas por categoría: sería gastar el color
   dos veces. Los nueve tonos medidos siguen intactos. */
.grupos {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
}

.grupo { width: 100%; }

/* EL RÓTULO. No inventa vocabulario: son las mismas dos palabras que ya usan
   la navegación del encabezado y los dos títulos de sección de más abajo.
   El hero era el único sitio del sitio donde la distinción no existía. */
/* EL RÓTULO DE GRUPO, calibrado el 2026-09-10. No inventa vocabulario —son
   las mismas dos palabras de la navegación y de las secciones— y ahora
   tampoco inventa valores. Tres cosas cambian y las tres son medibles:

   · TRACKING · escribía `0.09em` A MANO teniendo la casa el token
     `--tracking-label` (0,14em), usado ya diez veces. Ese 0,09 era un tercer
     valor de tracking en un sistema que tiene dos, y **existía solo en tres
     sitios: aquí y en dos reglas que ya estaban muertas**. Al limpiarlas
     desaparece del archivo. Regla dura de la casa: un valor no se escribe
     dos veces.
   · TINTA · `--color-text-muted` sobre el escenario mide **4,60**, diez
     centésimas por encima del mínimo de WCAG 1.4.3 para 11,8 px. Pasa, pero
     con un margen que cualquier retoque del fondo se lleva por delante. Sube
     a `--color-text-soft`, que mapea `--brand-ink-2` —una tinta que ya
     estaba declarada en la rampa y casi sin usar—.
   · CAJA · se queda en versalitas, y esto va contra la intuición de oficio.
     Arditi & Cho (Vision Research, 2007) midieron que a tamaños cercanos al
     umbral **las mayúsculas se leen MÁS rápido** que la caja mixta, y que la
     ventaja se desvanece al crecer. Aviso honesto: llegó por un resumen del
     abstract —el paper está tras muro— y mide velocidad de lectura de texto
     corrido, no reconocimiento de un rótulo de dos palabras. Responde a una
     pregunta parecida, no a la nuestra. Cuenta como respaldo débil de no
     cambiar algo que ya funciona, no como razón para elegirlo.

   Y se simplifica la caja: sin la ficha del contador ya no hay dos hijos que
   alinear, así que `flex` y `gap` sobraban. */
.grupo__rotulo {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-align: center;
}

/* ═══════ AQUÍ IBA LA BANDA, y se fue el 2026-09-10
   Daniel: «la parte que encierra las dos… quita. Siento que choca, que mejor
   todas estén sueltas».

   ERA LA REGIÓN COMÚN DE PALMER y se defendió con fuente primaria, así que
   quitarla se escribe con las dos caras:

   · LO QUE SE PIERDE: el mecanismo que, medido en laboratorio, agrupa por
     encima de la proximidad y de la similitud (Palmer 1992, Figs. 2C y 2D).
   · LO QUE LO SOSTIENE IGUAL: la separación ya no dependía de la banda. Entre
     que se puso y hoy entró la **escala ×2** —círculo de 176 contra 88, eje
     horizontal, tarjeta de otro tamaño— y el grupo pasó a ir **primero**, con
     su rótulo y su cuenta. La banda era el cinturón; el tirante es la escala.
     Palmer mismo lo permite: es una regla *ceteris paribus*, y aquí el resto
     de los factores ya no están en contra sino a favor.

   Queda la comprobación de siempre: si algún día se quita también la escala,
   vuelve el problema que la banda resolvía, y hay que volver a resolverlo. */
.grupo--hacer {
  /* Sin superficie, sin filete y sin relleno: solo el ancho, para que dos
     tarjetas no se estiren a 620 px cada una en una pantalla de 1440. */
  max-width: 56rem;
  margin-inline: auto;
}

/* ═══════ LA TARJETA DE EXPERIENCIA · el círculo ×2, y el eje girado
   Nació para acompañar a la banda —agrupar sin cambiar de escala se lee como
   una raya, no como una jerarquía— y al quitarse la banda pasó a ser **lo
   único que separa**. Por eso importa más que antes, no menos.

   Y NO HAY QUE INVENTAR EL VALOR: la escalera de objeto de esta casa ya lo
   tenía escrito y firmado —×1 una cocina · **×2 lo que se hace aquí** · ×4 el
   sitio entero—. El token se llama `--size-mark` y su comentario dice
   literalmente «qué se hace aquí». Estaba declarado y sin usar. 88 → 176, que
   es 2:1 exacto: Vignelli, no una medida casual.

   EL EJE GIRA, y el motivo es de sitio, no de teoría: dos tarjetas verticales
   con círculo de 176 miden ~300 px de alto y empujan el par entero bajo el
   doblez a 1440×900, donde solo había 22 px de margen. En horizontal caben.
   Que además lea distinto es la consecuencia, no la razón.

   NO SE TOCA NI LA FORMA NI EL COLOR: el círculo sigue siendo el círculo —el
   sistema de Aicher que sostiene todo esto— y cada una conserva su tono. Lo
   único que cambia es cuánto ocupa. */
@media (min-width: 48em) {
  .units--hacer .unit__link {
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    text-align: left;
    padding: var(--space-md);
  }
  .units--hacer .unit__media { width: var(--size-mark); max-width: none; flex: none; }
  .units--hacer .unit__body  { text-align: left; padding: 0; }
  .units--hacer .unit__name  { font-size: var(--text-xl); }
  .units--hacer .unit__what  { font-size: var(--text-md); }
  .units--hacer .unit__signo { width: 66%; height: 66%; }
}

/* EN TELÉFONO LA RAZÓN ×2 NO SE CUMPLE, Y SE DICE. Con el círculo de cocina en
   70-80 px, uno de 160 dejaría 134 px de texto en una tarjeta de 342. Se pone
   en 120 y la escalera ×1/×2/×4 se rompe aquí a propósito.
   Lo que separa en teléfono no es la escala: es la FORMA. La tarjeta de
   experiencia pasa a ancho completo —342 × 152 contra 106 × 176 de una
   cocina—, que es 2,9 veces el área y se ve sin medir nada. */
@media (max-width: 47.99em) {
  .units--hacer { grid-template-columns: minmax(0, 1fr); }
  .units--hacer .unit__link {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    text-align: left;
    padding: var(--space-sm);
  }
  .units--hacer .unit__media { width: calc(var(--size-unit) * 1.5); max-width: none; flex: none; }
  .units--hacer .unit__body  { text-align: left; padding: 0; }
  .units--hacer .unit__name  { font-size: var(--text-lg); }
  .units--hacer .unit__what  { font-size: var(--text-sm); }
  /* La acción vuelve. Se ocultaba porque en un mosaico de 88 px no cabían tres
     renglones; aquí hay ancho de sobra, y «Ver planes» contra «Ver la carta»
     es justamente lo que distingue a los dos grupos. */
  .units--hacer .unit__cta   { display: inline-flex; }
}

/* ═══════ AQUÍ VIVIÓ EL RANGO 2:1 ENTRE LAS DOS DE PLANES, y se retiró el
   mismo día que entró. Daniel: «quiero que las tarjetas del parque de niños
   y la de equitación tengan el mismo peso, tanto en desktop como en mobile».

   SE ESCRIBE POR QUÉ ENTRÓ, porque el argumento era medido y puede volver:
   Club Deportivo y Pequelandia pesaban **1,00 : 1 exacto en los cinco
   anchos**, así que subir el grupo entero había subido a Pequelandia gratis
   y la prioridad ecuestre existía como orden de lectura y no como jerarquía.
   El rango se hizo con los dos peldaños que la escalera de objeto ya tenía
   —ancho 2fr/1fr y círculo `--size-mark`/`--size-portrait`, 2:1 exacto—.

   Y SE ESCRIBE POR QUÉ SE VA: **la prioridad no desaparece, cambia de
   soporte.** Sigue estando en el ORDEN —el grupo de planes va primero, y el
   Club Deportivo primero dentro de él— y en el TEXTO —«Escuela de equitación
   y monta recreativa» frente a «Juegos para niños»—. Lo que el dueño rechaza
   no es la prioridad: es que se exprese en tamaño.

   Para devolverlo: el marcador `unit--rango` en `menu.js` y este bloque.

   LO QUE HAY QUE VIGILAR AL QUITARLO: compactar al acompañante era lo que
   había llevado los restaurantes de 0/7 a 3/7 enteros sobre el doblez a
   360 px. Al volver al peso igual, esa altura se recupera. Se compensa con
   lo que se retiró arriba —el kicker y las dos fichas de contador— y se
   MIDE, no se supone: el criterio es que los restaurantes EMPIECEN por
   encima del doblez, rótulo visible y primera fila asomando. */

/* La caja vacía que reserva el sitio de un mosaico mientras baja el dato.
   Tiene el mismo alto que el mosaico real: retrato + dos renglones. */
.unit--esqueleto {
  background-color: var(--color-surface-raised);
  border-radius: var(--radius-lg);
  display: grid;
  justify-items: center;
  padding: var(--space-md) var(--space-sm);
  min-height: calc(var(--size-portrait) + 6.4em);
}
.unit--esqueleto .unit__media {
  display: block;
  width: 78%;
  max-width: var(--size-portrait);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--color-rule);
  border-color: transparent;
}

/* ================================= EL RECORTE · VUELVE EL CÍRCULO, Y CON RAZÓN
   Lo cambié a cuadrado el 2026-09-08 con dos argumentos —el área que gana un
   cuadrado (π/4 = 78,5 %) y que el referente no usa círculos— y el dueño lo
   miró y dijo lo contrario: «se veía mejor con círculos». Tenía razón, y el
   fundamento estaba escrito en esta misma casa, en un documento que NO consulté:

     `proceso/derivacion/el-modelo-de-pagina.md`, H8, sobre Otl Aicher:
     «encaja con lo que ya construimos —nueve tonos, nueve marcas, EL MISMO
      CÍRCULO—: eso ya es el principio de un sistema Aicher, sin saberlo.»

   El principio de Aicher (Múnich 72) es que **el sistema lo sostiene una forma
   geométrica constante**, no las piezas. Aquí las nueve imágenes son de
   naturalezas distintas —tres fotos de comida, cinco logotipos, una unidad sin
   imagen—: el círculo les impone UNA forma y las convierte en un conjunto. El
   cuadrado enseña las diferencias, y la rejilla deja de leerse como sistema.
   Vignelli, además, razona en discos: «a disc within a disc will have a
   diameter half the size of the larger… but not an odd, casual size».

   LO QUE SÍ SE QUEDA DEL EXPERIMENTO CUADRADO. El cuadrado destapó que un
   logotipo traía media palabra cortada y que la «foto» del restaurante era la
   portada de un menú. Esos archivos se recortaron y no vuelven atrás: ahora el
   círculo contiene imágenes limpias en vez de tapar imágenes sucias.
   La lección: una forma que esconde defectos deja que los defectos se queden —
   así que se revisa con la forma cruda y se publica con la forma del sistema. */
.unit__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  background-color: var(--color-venue-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
}

.unit__media {
  width: 78%;
  max-width: var(--size-portrait);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background-color: var(--color-page);
  border: 2px solid var(--color-venue-line);
}
.unit__photo { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
/* Un logotipo se contiene; una foto se recorta. Lo decide el dato. */
.unit__photo--logo { object-fit: contain; padding: 6%; }
/* El mosaico con SIGNO: mismo círculo, mismo borde, misma proporción que los
   demás; adentro va la pieza del alfabeto en el tono de la unidad. El signo
   respira igual que un logotipo contenido (6 % de aire), para que los nueve
   círculos sigan leyéndose como una serie. */
/* EL MEDALLÓN, y esto era un defecto medido, no un gusto.
   El disco del signo llevaba `--color-venue-soft`… que es EXACTAMENTE el mismo
   color que `.unit__link`, la tarjeta que tiene detrás. Comprobado leyendo la
   cadena de fondos: los dos en `oklch(0.945 0.035 250.2)`. **No había disco:
   había un aro de 2 px y un icono flotando** — y justo al lado, tarjetas cuyo
   círculo va lleno de fotografía. La diferencia de peso era enorme y se leía
   como una imagen que falta, no como una decisión.

   Se invierte: **el disco va en el tono FUERTE de la sede y el signo se
   reserva en el suave**. Así el círculo se LLENA, que es lo que hace una
   fotografía, y las dos clases de tarjeta pesan lo mismo. Es Wyman —el color
   como índice— usado a plena fuerza justo donde la página empieza.

   Sigue sin sustituir a la fotografía que falta: la hace menos urgente de ver
   y no menos urgente de pedir. */
.unit__media--signo {
  display: grid;
  place-items: center;
  background-color: var(--color-venue);
  border-color: var(--color-venue);
}
.unit__signo {
  width: 62%;
  height: 62%;
  /* `--sig-tinta` Y NO `color`, y esto fue un defecto real de 24 horas.
     Los signos del alfabeto no pintan con `currentColor`: pintan con
     `--sig-tinta`. Puse `color: var(--color-venue-soft)` creyendo que
     invertía el signo y no hizo NADA — la tinta seguía en el tono fuerte.
     Medido: disco `oklch(0.45 0.115 250.2)` contra signo
     `oklch(0.450 0.150 250.2)`. **La misma luminosidad, 0.45 las dos**; solo
     cambiaba el croma. Contraste **2,81**, por debajo del piso de 3:1 que
     WCAG 1.4.11 pide para un gráfico que hay que distinguir. Azul sobre azul.

     La lección, y ya van varias de la misma familia: **escribir una propiedad
     no es cambiar lo que se ve.** Tras tocar un color hay que leer el color
     EFECTIVO del elemento que pinta, no el de su contenedor. */
  color: var(--color-venue-soft);
}
/* SÉPTIMA VEZ la trampa de cascada, y esta vez con un agravante: la escribí
   creyendo que la había arreglado. `.unit__signo` lleva TAMBIÉN la clase
   `sig`, y `.sig` está en la lista de selectores que declara `--sig-tinta`
   unos 500 renglones más abajo. Misma especificidad (0,1,0) → gana el último,
   y el último es el de abajo. Por eso mi declaración no pintaba nada.
   Se sube la especificidad a (0,2,0) en vez de mover el bloque: el orden se
   rompe cuando alguien mueve algo; la especificidad, no. */
.unit__media--signo .unit__signo { --sig-tinta: var(--color-venue-soft); }

.unit__media--empty {
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-venue);
  line-height: 1;
}

.unit__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  padding: var(--space-xs) var(--space-sm) var(--space-sm);
  text-align: center;
}

.unit__name {
  font-family: var(--font-display);
  font-size: var(--text-md);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

/* Qué es, en palabras de cualquiera. Es la línea que faltaba: «Pequelandia» no
   le dice nada a quien no conoce el sitio; «Juegos para niños», sí. */
.unit__what {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
}

/* La acción. Aquí iba el precio, que es un dato y no una invitación. Va en el
   color de la unidad y con flecha, igual que el pie de su tarjeta grande. */
.unit__cta {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-venue);
  margin-top: auto;
  padding-top: var(--space-xs);
}
/* La flecha era el carácter «→» de la tipografía, que no obedece al grosor ni
   a la rejilla del alfabeto. Ahora es un signo del sistema, dibujado en línea
   por el JS. */
.unit__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  /* NO SE PARTE. A siete columnas la tarjeta mide 157 px y «VER LA CARTA»
     caía en dos renglones en las siete: una acción partida deja de leerse
     como un botón y empieza a leerse como una frase. Se le quita el tracking
     de rótulo —que es lo que la hacía 12 px más ancha— y se prohíbe el corte. */
  white-space: nowrap;
  letter-spacing: 0.06em;
}
/* Un estado no es una acción: ni color de enlace ni flecha. */
.unit__cta--estado { color: var(--color-text-muted); }
.unit__cta--estado::after { content: none; }

/* ============================================================== LOS PLANES
   Tarjeta grande, no banda a sangre completa con un icono al lado. */
.plan-grid {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
}
@media (min-width: 40em) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background-color: var(--color-venue-soft);
  border-radius: var(--radius-lg);
}
.plan__art { width: calc(var(--size-unit) * 1.1); height: auto; }
.plan__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.plan__text { color: var(--color-text-muted); max-width: var(--measure-narrow); }
.plan__price { font-family: var(--font-display); font-size: var(--text-lg); }
.plan__cta { margin-top: auto; }
/* Especificidad 0-2-0 a propósito: `.button` declara sus propias variables y
   está MÁS ABAJO en la hoja, así que con un solo selector de clase volvía a
   ganar y el botón salía transparente. Es la tercera vez en este encargo que
   una regla escrita antes pierde contra una escrita después; la lección es
   siempre la misma: mirar dónde está la otra, no solo qué dice. */
.plan .plan__cta {
  /* En el dorado de marca los dos botones se veían iguales y apagados. Cada
     plan empuja con SU color. El botón se pinta con variables (`--button-bg`),
     así que hay que reasignar ESAS y no `background-color`: escribiéndolo
     directo, la regla de `.button` volvía a ganar y el botón seguía dorado.
     Blanco sobre `--color-venue` (L 0.45) da 8:1. */
  --button-bg: var(--color-venue);
  --button-fg: var(--color-page);
  --button-border: var(--color-venue);
}

/* El anillo del estribo: aro grueso, no relleno. */
.sig__ring   { fill: none; stroke: var(--sig-tinta); stroke-width: 8; }

/* La portada en teléfono: el aire de arriba se recorta para que los tres
   mosaicos entren por encima del doblez junto con el titular. */
@media (max-width: 47.99em) {
  .hero__inner { padding-block: var(--space-sm) var(--space-lg); gap: var(--space-md); }

  /* El kicker en una línea: a 390 px «RUITOQUE ALTO, PIEDECUESTA · A 20
     MINUTOS DE BUCARAMANGA» ocupaba tres y empujaba el titular. */
  /* «Mundo Ecuestre» partía en dos líneas a 320 y duplicaba el alto de la barra.
     Se oculta AQUÍ y no en la regla base: la base va después en el archivo y
     ganaba, así que el escritorio se quedaba sin el rótulo. */
  .site-header__name { font-size: var(--text-md); }
  .site-header__place { display: none; }
  /* AQUÍ HABÍA una regla de ancho para `.marca--portada` en teléfono, y era
     código muerto por partida doble: la portada ya no usa el emblema, y
     además nunca se aplicó —la regla base, de la misma especificidad, va
     DESPUÉS en el archivo y ganaba—. Medido en su día a 390: el emblema
     ocupaba 144 px, no los 112 que esta regla creía fijar. Sexta vez que esta
     casa tropieza con lo mismo. */

  /* LA MARCA EN TELÉFONO: entera otra vez.
     Se había retirado el bloque tipográfico porque a 320 px el par más el
     botón de WhatsApp desbordaban (356 > 320). Ahora **el WhatsApp se fue a la
     barra del pulgar**, y el ancho que ocupaba deja sitio de sobra para la
     marca completa. Un elemento que se va a su sitio correcto libera a otro. */
  /* A 320 px caben tres mosaicos si el retrato baja de tamaño y el nombre al
     paso −1. El precio se queda: es lo que hace que el mosaico sirva para algo
     además de nombrar. */
  .unit__link { padding: var(--space-sm) 6px var(--space-xs); }
  .unit__body { padding-top: var(--space-xs); }
  .unit__name { font-size: var(--text-sm); }
  /* A 320 px las tres líneas de texto no caben en un mosaico de 88 px sin
     apretarse: la que se va es la acción, porque el mosaico entero YA es el
     enlace y la sección de abajo repite el gesto con más aire. Lo que se queda
     es qué es cada sitio, que es lo que no se podía adivinar. */
  .unit__cta { display: none; }
  .unit__what { font-size: var(--text-2xs); }
}

/* ══════════════ LA PORTADA EN VERTICAL · texto arriba, mosaicos abajo
   Era de dos columnas —titular a la izquierda, los nueve a la derecha— y pasa
   a una sola. Daniel: «cambia a un esquema vertical donde los textos están
   arriba y las cards abajo», y antes de eso: «quiero que le demos foco a las
   cards».

   MEDIDO ANTES DE TOCAR, porque «foco» tiene que ser un número: a 1440 px los
   nueve mosaicos ocupaban el **29,4 %** del área del hero y su rejilla medía
   552 px de 1440 —el 38 % del ancho—. La mitad de la portada la gastaba una
   columna de texto de cuatro renglones.

   En vertical la rejilla se lleva el ancho entero, y el texto deja de competir
   por el eje horizontal para ordenarse por el vertical: primero se lee, después
   se elige. */
@media (min-width: 56em) {
  .hero__inner {
    /* Sigue saliéndose de la jaula de 66 rem, ahora por la razón contraria:
       antes para que el titular cupiera en dos renglones al lado de los
       mosaicos; ahora para que los mosaicos tengan dónde crecer. */
    max-width: 78rem;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "tiles";
    justify-items: center;
    /* MEDIDO, no estimado. Con 64 arriba y 64 de separación, el texto y su
       aire se llevaban 386 px antes del primer mosaico y las tarjetas se
       cortaban por el doblez. 24 arriba y 40 de separación: el aire sigue
       existiendo —el bloque de texto no toca el encabezado ni la rejilla— y
       las tres primeras tarjetas entran enteras. */
    gap: var(--space-xl);
    padding-block: var(--space-lg) var(--space-2xl);
  }
  /* El texto se centra y se estrecha. Vignelli: el ancho de una columna de
     lectura no depende de cuánto sitio hay, sino de cuánto texto es cómodo. */
  .hero__text {
    grid-area: text;
    max-width: 46rem;
  }
  .grupos { grid-area: tiles; width: 100%; }

  .units--hacer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════ LOS SIETE · dos repartos, y el primero corrige un defecto
   Escribí `repeat(7)` desde 56em y me creí el número sin barrer los anchos
   intermedios. Barrido después, y el resultado era malo:

     896 px → tarjeta de **106**   ·  1024 → 125  ·  1100 → 135
     1152   → 143                  ·  1280 → 157  ·  1440 → 157 (tope 78rem)

   Los 166 px que dice mi comentario solo existen a partir de 1200. **Entre 56em
   y 72em la tarjeta quedaba en 106 px: MENOS que los 176 de la maqueta de dos
   columnas que acababa de sustituir.** O sea que en toda esa franja el cambio
   empeoraba justo lo que se pedía mejorar.

   La lección es la de siempre en esta casa y van varias: un número medido en UN
   ancho no es un número medido. */
@media (min-width: 56em) and (max-width: 71.99em) {
  /* 4 + 3, con la segunda fila CENTRADA. Ocho pistas y cada tarjeta ocupa dos:
     así los tres de abajo caen en los huecos de los cuatro de arriba.
     Las TRES posiciones van explícitas. Con solo mover la quinta, el resto se
     acomoda solo detrás y la fila queda descuadrada 100 px a la derecha. */
  .units--comer { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .units--comer .unit              { grid-column: span 2; }
  .units--comer .unit:nth-child(5) { grid-column: 2 / span 2; }
  .units--comer .unit:nth-child(6) { grid-column: 4 / span 2; }
  .units--comer .unit:nth-child(7) { grid-column: 6 / span 2; }
}

@media (min-width: 72em) {
  /* Aquí sí: siete en fila, de 143 a 157 px por tarjeta. De todas las formas
     de repartir nueve en una rejilla, 7 + 2 es la única que además es CIERTA. */
  .units--comer { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════ LA MARCA · un MÓDULO (Parnas)
   Un módulo oculta una decisión y quien lo usa no sabe cuál. La decisión que se
   oculta aquí es **qué ocupa el sitio más visible de la portada**. La portada
   pide `marca--portada` —dice dónde está, no qué quiere— y este bloque decide.

   Ha cambiado tres veces sin que la portada se enterara: primero una herradura,
   después una cabeza de caballo en medallón, ahora un anillo construido desde
   el dato. Eso es exactamente lo que compra un módulo. */
.marca {
  display: block;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

/* LA MARCA DE PORTADA — hoy, el logotipo del cliente.
   El módulo sigue siendo el de Parnas: la portada pide `marca--portada` y no
   sabe qué recibe. Ha llevado una herradura, una cabeza de caballo, un anillo
   de nueve segmentos y ahora el logotipo. El anillo NO se borró: su
   constructor sigue en el JS y la librería lo muestra.
   Va como máscara para que herede el color, igual que en encabezado y pie: un
   archivo, una tinta. */
.marca--portada {
  /* SOLO EL EMBLEMA —escudo y hojas—, no el logotipo entero. El nombre ya está
     en texto en el encabezado y el titular viene justo debajo: repetir
     «MUNDO ECUESTRE» en imagen era decirlo tres veces en la misma pantalla.
     Los dos filetes tampoco entran: existen para enmarcar la palabra, y sin
     ella son dos rayas sueltas compitiendo con el titular.
     Caja medida del emblema: 222,2 × 266,5.

     Y el tamaño lo sigue mandando el BOTÓN, no la marca: el hero está centrado
     verticalmente, así que cada píxel de alto que gana la marca baja el botón
     medio píxel. Sin las tres líneas de texto el emblema es más compacto, así
     que a 9rem ocupa menos alto que el logotipo entero y el botón sube. */
  width: 9rem;
  margin-bottom: var(--space-md);
  aspect-ratio: 222.2 / 266.5;
  height: auto;
  background-color: currentColor;
  color: var(--color-text);
  -webkit-mask: url(../img/marca/mundo-ecuestre-emblema.svg) center / contain no-repeat;
          mask: url(../img/marca/mundo-ecuestre-emblema.svg) center / contain no-repeat;
}

/* Los segmentos: uno por unidad, con su tono medido. `.tono` les entrega los
   tokens —la clase que existe justo para esto—. */
.marca__arco {
  --color-venue: oklch(0.500 0.130 var(--venue-hue));
  stroke: var(--color-venue);
  stroke-width: 12;
  fill: none;
  stroke-linecap: butt;
}

.hero__title {
  font-family: var(--font-display);
  /* BAJA UN ESCALÓN REAL: de 64 px máximos a `--text-hero`, 50,8. No es un
     retoque —es un 21 % menos de alto de línea— y se hace porque el titular
     dejó de ser el mensaje: ahora rotula la rejilla que tiene debajo, y un
     rótulo no puede pesar más que lo que rotula.

     Se usa el TOKEN que ya existía para esto en vez de un `clamp` a mano. El
     valor suelto era la única medida tipográfica de la casa que no salía de la
     escala; que estuviera en el sitio más visible lo hacía peor, no mejor.

     Y SE FUE EL SALTO MANUAL. El `<br>` existía porque en «Nueve sitios / un
     mismo bosque» las dos mitades ERAN la idea. En «Elige tu próxima
     experiencia» no hay dos mitades: solo había un corte. Lo reparte
     `text-wrap: balance` según el ancho, que es donde sí debe decidirse. */
  /* Baja OTRO escalón, a `--text-3xl-title` (42,3 px máximos), por decisión
     de Daniel. Es el tercer recorte seguido del bloque de texto y va en la
     misma dirección que los dos anteriores: el titular rotula la rejilla, y un
     rótulo no compite con lo que rotula. Medido: pasa de pesar 2,1 veces el
     nombre de una tarjeta a pesar 1,7, y libera ~55 px de alto. */
  font-size: var(--text-3xl-title);
  line-height: 1.05;
  letter-spacing: -0.025em;
  /* Cero, y no `--space-md`: ese margen existía para separarlo del emblema,
     que ya no está. Un margen que sobrevive a lo que lo justificaba es aire
     que nadie pidió. */
  margin-top: 0;
  max-width: none;
  text-wrap: balance;
}

/* LOS HECHOS. Sustituyen a la entradilla literaria Y a las credenciales: dos
   renglones, cero adjetivos. El primero, lo que hay, en el tono de la tinta;
   el segundo, dónde y cuándo, apagado. Ninguno se puede decir al revés sin que
   deje de ser cierto — que es la prueba de Nielsen y el único filtro que se
   usó para escribirlos. */
/* EN TELÉFONO los tres hechos se apilan y el punto medio se va: al envolver, el
   punto quedaba al PRINCIPIO del renglón y parecía una viñeta puesta por
   accidente. Tres renglones, uno por hecho.

   VA AQUÍ, DESPUÉS DE LA REGLA BASE, y no arriba con el resto del bloque móvil:
   allí quedaba ANTES en el archivo y la base —de la misma especificidad— le
   ganaba. Es la cuarta vez que esta casa tropieza con lo mismo, y la lección ya
   está escrita: mirar dónde está la otra regla, no solo qué dice. */
@media (max-width: 47.99em) {
}


/* UN SOLO EJE, Y DECLARADO UNA SOLA VEZ. Estaba en dos medias —una para
   teléfono y otra desde 56em— y entre las dos quedaba un hueco: de 768 a 895 px
   el titular salía alineado a la izquierda mientras los rótulos de grupo y las
   nueve tarjetas iban centrados. Un valor repartido en dos rangos deja un
   tercero sin cubrir; en la base no hay hueco posible. */
.hero__text { text-align: center; }

.hero__estado { margin-top: var(--space-sm); font-size: var(--text-sm); }
.hero__estado:has([hidden]) { display: none; }


/* --------------------------------------------------------------- secciones */
.section { margin-top: var(--space-2xl); }

/* La franja oscura del hero ya separa: la primera sección no necesita el
   mismo aire que las de en medio. */
.section--first { margin-top: var(--space-xl); }

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* MEDIDO el 2026-09-08, y es la razón de que la página «se viera igual» dos
   veces seguidas después de cambiarle el color: las TRES secciones del cuerpo
   tenían la misma silueta exacta — fondo transparente, sin sangrar, contenido a
   976 px, empiezan con H2, filete de 2 px bajo el título, alineación start. Tres
   de tres. Y la misma molécula (rótulo → nombre → texto → enlace) repetida 15
   veces. El color cambiaba; la FORMA no cambió nunca.
   Este filete era la firma de esa igualdad, repetida tres veces. Se va, y cada
   sección pasa a tener forma propia: banda a sangre · riel horizontal · columna. */
.section__title { font-size: var(--text-3xl-title); }

/* ------------------------------------------------- 1 · BANDA · qué se hace aquí
   Sale de la jaula de 66rem y ocupa el ancho de la ventana con fondo propio.
   Es la primera vez que algo del cuerpo llega al borde. */
.section--band {
  margin-inline: calc(50% - 50vw);
  padding: var(--space-2xl) calc(50vw - 50% + var(--layout-gutter));
  background-color: var(--color-surface);
}

.section__lead {
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-top: var(--space-sm);
}

/* ----------------------------------------------------------------- botones */
.button {
  --button-bg: transparent;
  --button-fg: var(--color-text);
  --button-border: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-tap-min);
  padding: var(--space-xs) var(--space-lg);
  border: var(--size-hairline) solid var(--button-border);
  border-radius: var(--radius-pill);
  background-color: var(--button-bg);
  color: var(--button-fg);
  font-family: var(--font-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  cursor: pointer;
}

/* «Los botones son muy planos», dijo el dueño, y tenía razón: los tres del
   encabezado eran la MISMA píldora de contorno dorado. Tres pesos iguales es
   cero jerarquía, y un contorno no tiene masa.
   El arreglo NO es una sombra. El lenguaje de esta página es plano por decisión
   —Niemann no usa sombras—, así que el peso se consigue con lo único que da
   peso en plano: SUPERFICIE LLENA y contraste. Uno lleno, los demás callados. */
/* SIN SUBIR EL TAMAÑO DE LETRA. El rango de «principal» ya lo dicen el
   RELLENO —fondo sólido contra contorno— y el relleno de caja. Subir además
   la tipografía era el cuarto portador del mismo rango, y rompía la fila:
   medido en las acciones de «Cómo llegar», tres botones con **dos tamaños de
   letra, dos tamaños de signo y 23,3 % de dispersión óptica**.
   Es la misma regla de la adenda E, aplicada a una fila que sí tiene jerarquía:
   cuando hay rango, lo lleva UNA cosa, no cuatro. */
.button--primary {
  --button-bg: var(--color-text);
  --button-fg: var(--color-page);
  --button-border: var(--color-text);
  padding: var(--space-sm) var(--space-xl);
}

/* `--inverse` existía para el encabezado de tinta, que ya no existe. */

/* Lleno: la acción del encabezado se ve sin necesidad de una masa oscura. */
/* WHATSAPP · el botón más visible de la página, como «Obtén Tickets» en el
   referente. El verde es el de la marca de WhatsApp usado para nombrar el
   servicio al que lleva; el glifo es una burbuja PROPIA, no su logotipo.
   Blanco sobre oklch(0.52 0.15 158) da 4,6:1 — pasa AA para texto normal. */
/* Todos los botones separan su signo del rótulo. Antes solo lo hacía
   `.button--wa`, y en «Llamar» el auricular quedaba PEGADO a la palabra. */
.button { gap: var(--space-2xs); }

/* WHATSAPP LLENO — el botón que convierte, y hay UNO solo en la página: el
   del hero. El del encabezado dejó de serlo: dos botones verdes en la primera
   pantalla competían entre sí y ninguno mandaba. */
.button--wa {
  --button-bg: var(--color-wa);
  --button-fg: #fff;
  --button-border: var(--color-wa);
}
/* En el ENCABEZADO, WhatsApp se viste como «Llamar»: mismo peso, mismo color,
   misma familia. El verde se reserva para la llamada principal del hero. El
   signo conserva su tinta verde, que es lo que lo nombra sin gritar. */
.site-header__action.button--wa {
  --button-bg: transparent;
  --button-fg: var(--color-text);
  --button-border: transparent;
}
.site-header__action.button--wa .ic { color: var(--color-wa); }
.site-header__action.button--wa:hover { --button-bg: var(--color-surface-raised); }
/* EL SIGNO EN LÍNEA. Un solo tamaño para todos los signos del alfabeto que
   acompañan a un texto: 1,15 em, para que crezca con la letra y no con un
   número suelto. */
.ic { width: 1.15em; height: 1.15em; flex: none; }
/* SIN `opacity`. Llevaba color apagado Y 0,7 encima: doble atenuación, y la
   segunda es la que engaña. Medido componiendo la opacidad contra su fondo:
   **2,67** — por debajo del 3:1 que WCAG 1.4.11 pide para un gráfico que hay
   que distinguir. Sin componer daba 4,56, que es el número que uno lee si
   mira el color y no lo que se pinta. **Tercera vez esta semana con la misma
   trampa.** El apagado lo hace el color y basta.
   Se usa en un solo sitio —el reloj de la franja de servicio— y ahí toma la
   misma tinta que el texto al que acompaña: una fila, una firma. */
.ic--mudo { color: var(--color-text-soft); }

/* LOS DOS USOS DEL MISMO ALFABETO. El signo de una COCINA lleva el tono de esa
   cocina; el de INTERFAZ —teléfono, WhatsApp, flecha, reloj— es parte de su
   botón y toma el color del texto que acompaña. Un solo dibujo, dos tintas. */
.ic { --sig-tinta: currentColor; --sig-hueco: transparent; }

.button--filled {
  --button-bg: var(--color-accent);
  --button-fg: var(--color-page);
  --button-border: var(--color-accent);
}

/* Secundario: sin caja. No compite con el lleno y no finge ser botón. */
.button--quiet {
  --button-border: transparent;
  --button-fg: var(--color-text);
  padding-inline: var(--space-md);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
  text-decoration-color: var(--color-rule);
}
.button--quiet:hover { text-decoration-color: var(--color-accent); }

.button--compact {
  padding: var(--space-2xs) var(--space-md);
  font-size: var(--text-xs);
}

/* ============================================== color por unidad · DEFECTO
   Estos tres tokens vivían SOLO en :root. Ahí `var(--venue-hue)` se resolvía
   una vez, contra el tono de marca, y el valor ya resuelto era el que heredaba.
   Poner --venue-hue en la tarjeta no los recalculaba: una propiedad
   personalizada se sustituye donde se DECLARA, no donde se usa.
   Consecuencia medida el 2026-09-08 sobre la página renderizada: los cinco
   fondos del índice caían entre 44° y 47° de tono sRGB y el acento ocupaba el
   0.1 % del área. Los nueve colores que el JS venía escribiendo desde el dato
   —verde de Don Juan, violeta de Pequelandia, azul del Club— no llegaban a la
   pantalla. Eso, y no un exceso de dorado, es «un solo color por todos lados».
   Se redeclaran en cada elemento que fija su propio tono. */
/* ══ QUINTA VEZ, Y LA ÚLTIMA: la lista se acabó, y en su lugar hay un NOMBRE.
   Cada vez que apareció un elemento nuevo que recibe `--venue-hue` había que
   acordarse de añadirlo a esta lista a mano, y nadie avisaba: el modo oscuro,
   `.arc__item`, los signos de la mesa, `--color-venue-strong`, y ahora las
   muestras de color de la librería, que salieron las nueve doradas.

   `.tono` es la clase que dice «este elemento fija su propio tono de unidad».
   Quien la ponga, recibe los tokens. Las cinco clases siguen porque ya la
   cumplen sin decirlo, pero lo nuevo se marca con `.tono` y se acabó el
   olvido. */
.tono,
.unit,
.plan,
.venue-card,
.venue-header,
.sig {
  --color-venue:        oklch(0.450 0.115 var(--venue-hue));
  --color-venue-soft:   oklch(0.945 0.035 var(--venue-hue));
  --color-venue-line:   oklch(0.720 0.090 var(--venue-hue));
  /* CUARTA VEZ que este mismo defecto aparece al añadir un token nuevo: si se
     declara SOLO en :root, `var(--venue-hue)` se resuelve una vez contra el
     tono de marca y todo sale dorado. Cada token de unidad tiene que estar
     también AQUÍ. La lista hay que ampliarla a mano y nadie avisa. */
  --color-venue-strong: oklch(0.450 0.150 var(--venue-hue));
  /* Y la tinta del alfabeto, aquí mismo por la misma razón. */
  --sig-tinta: oklch(0.450 0.150 var(--venue-hue));
  --sig-hueco: oklch(0.945 0.035 var(--venue-hue));
}

/* ================================================================ dibujos
   Sistema de una sola idea: EL CÍRCULO ES EL MISMO.
   La herradura abierta, la pelota y el plato son la misma circunferencia leída
   de tres maneras, y los NUEVE PUNTOS son siempre los mismos nueve: en la
   herradura son los clavos que la sujetan, en el plato son las nueve cocinas.
   Se dibuja con primitivas (círculos y un arco), no con trazados a mano: la
   reducción es el asunto, no el virtuosismo. Van en el HTML, no en un archivo:
   cero peticiones de red y heredan el color del texto. */

/* El nudo del globo y el borde interior del plato. Sin clase propia el nudo
   heredaba `fill: none` del trazo padre y no se dibujaba: en CSS la regla le
   gana al atributo de presentación `fill`, siempre. */

/* El dibujo de cada cosa que se hace aquí, en su propia caja. */
/* Estos tres dibujos son ahora la RAÍZ de la página: lo que se hace aquí. Al
   ×2 de la unidad pesan lo mismo que la cocina de la casa y la mitad que el
   sitio entero — que es exactamente el rango que les corresponde. */
/* ------------------------------------------------------ rejilla de unidades */
/* ------------------------------------------------ 2 · LAS SIETE, TODAS A LA VEZ
   Aquí hubo un riel horizontal y fue un ERROR MÍO, medido: a 1280 px se veían
   2 de 7 cocinas sin desplazar; a 390 px, CERO. El dueño lo dijo antes que el
   instrumento — «los datos en ese carrusel se ven menos»— y tenía razón.

   Y la evidencia es vieja y clara. NN/g: «no puedes contar con que la gente vea
   la información en los carruseles… se los saltan y se pierden todo lo que no
   esté en el primer cuadro.» Cambié forma por contenido, que es el peor cambio
   que se puede hacer en una página cuyo trabajo es que alguien decida venir.

   Vuelven las siete a la vez. Lo que cambia respecto de la rejilla original es
   que ahora cada una trae SU PRECIO DE ENTRADA. */
.venue-grid {
  display: grid;
  /* Columnas EXPLÍCITAS, no `auto-fill` con `min()`: a 320 px auto-fill calculó
     dos pistas donde solo cabía una y la página se iba a 456 de ancho. Con
     `minmax(0, 1fr)` la pista no tiene suelo de contenido mínimo, así que no
     puede estirarse: el desborde deja de ser posible, no solo improbable. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-lg);
  align-items: stretch;
}
@media (min-width: 40em) {
  .venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .venue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* `min-width: 0` no es cosmético: un ítem de rejilla trae `min-width: auto`, así
   que su contenido más ancho se vuelve el MÍNIMO de la pista y la estira. A
   320 px la tarjeta medía 456 y sacaba la página de la pantalla. */
.venue-card { min-width: 0; }
.venue-card--featured { grid-column: 1 / -1; }

/* Panel vertical: imagen arriba a sangre, texto debajo. */
.venue-card__link { flex-direction: column; }
.venue-card__summary { max-width: none; }

/* HABÍA DOS `margin-top: auto` en la misma columna —el precio y el pie— y con
   dos, el espacio libre SE REPARTE entre los dos en vez de irse todo arriba.
   Por eso las tarjetas de una misma fila mostraban el precio a alturas
   distintas: no era el contenido, era el reparto. El hueco lo absorbe ahora una
   sola pieza, el resumen, y precio y pie quedan clavados al fondo en las siete.
   (Es la regla de composición: un elemento que se repite va SIEMPRE en el mismo
   sitio de cada tarjeta.) */
.venue-card__summary { flex: 1 1 auto; }

/* El precio de entrada cierra la tarjeta, pegado abajo para que las siete
   alineen sus precios en la misma línea aunque los textos midan distinto. */
.venue-card__price {
  padding-top: var(--space-md);
  font-size: var(--text-lg);
  font-family: var(--font-display);
  color: var(--color-text);
}
.venue-card__price-label {
  font-family: var(--font-text);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.venue-card__price-value { font-variant-numeric: tabular-nums; }

.venue-grid__loading,
.loading {
  padding: var(--space-lg);
  color: var(--color-text-muted);
  background-color: var(--color-page);
}

/* La tarjeta entera es el destino. Un botón dentro de una caja que ya es
   tocable es ruido, y en móvil compite con su propio contenedor. */
/* CAMPO DE COLOR POR UNIDAD. Los nueve tonos existían y solo se veían en un
   rótulo de 11 px y un aro de 2 px. Aicher, Múnich 72: lo que hace legible un
   destino con muchas sedes es que el sistema —forma y COLOR— se vea. Aquí el
   color pasa a ser la superficie de la tarjeta, no su adorno.
   Sigue siendo Itten: el tono es palidísimo (L .945, croma .035), así que el
   área grande la lleva un color de muy poca fuerza y el acento sigue mandando
   en dosis pequeñas. Lo que cambia es que la página por fin tiene campos. */
.venue-card {
  background-color: var(--color-venue-soft);
  display: flex;
  /* Mismo radio que los mosaicos: dos lenguajes de esquina en la misma página
     se leen como dos plantillas pegadas. */
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.venue-card__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-lg);
  text-decoration: none;
  color: inherit;
}

.venue-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* La foto es lo primero que se ve y lo que da apetito. Relación fija para que
   la rejilla no salte mientras cargan, y `object-fit` para no deformar. */
/* Retrato circular. La razón no es estética: las imágenes de origen son
   CUADRADAS (1200×1200), y recortarlas a una banda ancha les corta la mitad.
   Un círculo sobre una fuente cuadrada no pierde nada y da a las nueve
   unidades la misma forma, que es lo que las vuelve un conjunto. */
/* Círculo, por lo mismo que en los mosaicos: la forma constante es lo que
   convierte nueve imágenes de naturalezas distintas en un conjunto (Aicher).
   El tamaño sale de la escalera modular de la casa, no de un valor suelto —
   Vignelli: «a disc within a disc… half the size of the larger… but not an odd,
   casual size». */
/* ═══════ LA CAJA DEL SIGNO SE CALCULA POR SIGNO, no es una para todos
   Medido el 2026-09-10 con `signos-contra-la-envolvente.mjs`: con la misma
   caja de 88 px, las siete cocinas daban alturas de tinta de **56 a 92**, o
   sea **64,3 % de dispersión** contra el límite de 15 % de la casa. Se veía
   sin medir: la parrilla dominaba la rejilla y la taza parecía de otro juego.
   Y es la pieza donde el sistema tiene que ser más inflexible, porque es la
   identidad de cada sede (Wyman).

   POR QUÉ PASA, y no es un descuido de dibujo: la regla de las envolventes
   (adenda F) iguala **áreas**, no alturas — el techo de tinta de una apaisada
   es 0,64 y el de una vertical 0,80—. Dos signos que llenaran perfectamente
   su envolvente, uno apaisado y otro vertical, tendrían **25 % de diferencia
   en la vara cumpliendo las dos reglas**. Lo incompatible es la caja única,
   no los signos.

   LOS NÚMEROS SON GENERADOS, no elegidos: salen de dividir la tinta más baja
   —`sig-cafe`, 56— entre la de cada uno. Se regeneran corriendo el
   instrumento; si un signo se redibuja, su número cambia. Va la altura medida
   al lado de cada uno para poder comprobarlo sin correr nada.

   ES UN PARCHE HONESTO. El arreglo de fondo es redibujar los cinco signos que
   no llenan su envolvente y aplicar entonces una caja por FAMILIA —vertical
   ×1,000 · cuadrado ×1,111 · apaisado ×1,250—, que es una regla y no una
   tabla. Eso cuesta dibujo y hoja de contacto; esto cierra hoy la peor cifra
   de la página. */
.venue-card .sig { width: var(--sig-caja, var(--size-portrait)); height: var(--sig-caja, var(--size-portrait)); }
.venue-card[data-sign="parrilla"]  { --sig-caja: 53.6px; }   /* tinta 92,0 */
.venue-card[data-sign="helado"]    { --sig-caja: 58.8px; }   /* tinta 83,8 */
.venue-card[data-sign="chocolate"] { --sig-caja: 68.4px; }   /* tinta 72,0 */
.venue-card[data-sign="oblea"]     { --sig-caja: 72.5px; }   /* tinta 68,0 */
.venue-card[data-sign="vino"]      { --sig-caja: 72.5px; }   /* tinta 68,0 */
.venue-card[data-sign="coctel"]    { --sig-caja: 77.0px; }   /* tinta 64,0 */
.venue-card[data-sign="cafe"]      { --sig-caja: 88.0px; }   /* tinta 56,0 */

.venue-card__media {
  width: var(--size-portrait);
  height: var(--size-portrait);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background-color: var(--color-page);
  border: 2px solid var(--color-venue-line);
}

.venue-card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* El logo de La Cava es un PNG con transparencia, no una foto: se contiene
   en vez de recortarse, sobre el fondo de la casa. */
/* Un logotipo no se recorta: se contiene, sobre el fondo de la casa. Recortar
   un logo al círculo le corta el nombre de la marca. */
.venue-card--logo .venue-card__photo { object-fit: contain; padding: 6%; }

/* Aquí es donde el color de la unidad hace su trabajo: en dosis pequeñas,
   nunca en el fondo. Itten: la superficie la lleva el neutro, la identidad la
   llevan los acentos. */
/* ============================================ EL SIGNO DE CADA COCINA · WYMAN
   Dibujado con las mismas primitivas que el resto y en el tono medido de su
   cocina. `sig__cut` va del color del CAMPO de la tarjeta, no del papel: así el
   corte se ve igual sobre cualquiera de los siete fondos. */
/* El signo es un elemento propio, no una viñeta: a 1,35 em del rótulo medía
   16 px y no se leía ninguno. Al tamaño de la unidad se lee cada uno. */
.sig--header {
  width: calc(var(--size-unit) * 1.4);
  height: calc(var(--size-unit) * 1.4);
  margin-bottom: var(--space-md);
}

.sig {
  display: block;
  width: var(--size-unit);
  height: var(--size-unit);
  margin-bottom: var(--space-sm);
}
/* EL PINTADO DEL ALFABETO VA POR VARIABLES, y no es un capricho: `<use>` clona
   el símbolo dentro de un ÁRBOL SOMBRA, y un selector descendente del documento
   —`.ic .sig__fill`— NO cruza esa frontera. Lo único que la cruza es la
   herencia, así que el color se pasa en propiedades personalizadas.
   Medido: con el selector descendente, la burbuja de WhatsApp salía verde
   oscuro dentro del botón verde. */
.sig__fill     { fill: var(--sig-tinta); }
.sig__cut-fill { fill: var(--sig-hueco); }
.sig__cut      { stroke: var(--sig-hueco); stroke-width: 8; fill: none; stroke-linecap: round; }
.sig__stroke   { stroke: var(--sig-tinta); stroke-width: 8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* La banda gruesa: la masa de la herradura y el puente del auricular. Es el
   único grosor distinto del sistema, y tiene su razón — es masa, no línea. */
.sig__banda  { stroke: var(--sig-tinta); stroke-width: 16; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.venue-card__kicker {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-venue);
  margin-bottom: var(--space-xs);
}

.venue-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.venue-card__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-top: var(--space-2xs);
}

.venue-card__summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  max-width: var(--measure-narrow);
}

.venue-card__footer {
  padding-top: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-venue);
}


/* El fondo era --color-surface-raised (L .912) y el resumen en gris apagado
   daba 4.56:1 contra él: pasa AA por un 1 %. Un margen así se pierde con
   cualquier retoque. Sube a --color-surface (L .945) → 5.05:1. La tarjeta
   sigue distinguiéndose: fondo propio y rótulo en rojo. */
/* LA COCINA DE LA CASA · Don Juan de Dios tiene 129 de los 328 ítems —el 39 %
   de todo lo que se vende aquí— y hasta ahora ocupaba la misma caja que una
   oblea. Nueve cajas iguales dicen «estas cosas son equivalentes», y no lo son:
   eso era la mitad de lo plano. Quién es el buque insignia lo dice el DATO
   (`featured`), no la hoja de estilos: cambia con el negocio.
   Efecto lateral que sale gratis: la fila entera para la cocina de la casa y
   las otras SEIS reparten exacto — dos columnas → tres filas de dos; tres
   columnas → dos filas de tres. Sin celda vacía en ningún ancho.

   Esto era `span 2`, resto del riel horizontal que se eliminó, y como está más
   abajo en la cascada pisaba al `1 / -1` de arriba: a tres columnas dejaba una
   celda vacía y la tarjeta insignia no ocupaba la fila. */
.venue-card--featured {
  grid-column: 1 / -1;
}
.venue-card--featured .venue-card__name { font-size: var(--text-2xl); }
.venue-card--featured .venue-card__summary { max-width: var(--measure); }

/* Ocupar la fila entera y seguir apilando en vertical deja media tarjeta vacía:
   el contenido se queda en una columna angosta y el color de la unidad se
   convierte en un campo hueco. Desde que hay dos columnas, la insignia se
   acuesta —retrato a la izquierda, todo lo demás a la derecha— y usa el ancho
   que se le dio. El retrato sube de tamaño en la misma escalera modular
   (`--size-unit`), no con un número suelto. */
@media (min-width: 40em) {
  .venue-card--featured .venue-card__link {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
  /* El doble exacto del retrato normal: relación modular, no un valor suelto. */
  .venue-card--featured .venue-card__media {
    width: var(--size-portrait-lg);
    height: var(--size-portrait-lg);
  }
  .venue-card--featured .venue-card__body { align-self: center; }
  /* Acostada ya no hay altura sobrante que repartir: el resumen deja de
     estirarse para que el precio no se despegue del texto. */
  .venue-card--featured .venue-card__summary { flex: 0 1 auto; }
  .venue-card--featured .venue-card__price,
  .venue-card--featured .venue-card__footer { padding-top: var(--space-md); }
}

.venue-card--missing { background-color: var(--color-surface); }
.venue-card--missing .venue-card__kicker { color: var(--color-danger); }

/* ==================================================== cómo se llega · RUTA
   Un DIAGRAMA, no un mapa. Vignelli tituló lo suyo del metro de Nueva York
   «New York City Subway Diagram» y escribió dentro «this diagram represents all
   lines and stations»: un diagrama conserva el orden y las decisiones, y no
   promete geometría. Aquí la geometría no la tenemos —y por eso no se finge—:
   «Mundo Ecuestre» no está en OpenStreetMap y nadie nos ha dicho dónde queda
   cada unidad dentro del terreno. Lo que sí tenemos es su propia frase de
   indicaciones, con cuatro puntos verificables. Eso es lo que se dibuja.

   Y las paradas son círculos: el mismo círculo de toda la página. La ruta
   termina en la herradura, que es exactamente lo que pasa cuando uno llega. */
.route {
  list-style: none;
  margin: 0 0 var(--space-lg);
  padding: 0;
}

.route__stop {
  position: relative;
  display: grid;
  grid-template-columns: var(--size-unit) 1fr;   /* la columna del trazo = la unidad */
  column-gap: var(--space-md);
  /* `start` y no `center`: el segundo hijo es nombre MÁS nota, así que
     centrar ponía el disco a la altura del bloque entero y no del nombre.
     Medido: a 1440 el desfase era de 13,9 px y no se notaba; **a 320 px, con
     la nota en tres renglones, el disco del giro quedaba 49,6 px por debajo
     de «Tres Esquinas»** — medio centímetro, al lado de la palabra
     equivocada. Otra vez: un criterio medido en un solo ancho no es un
     criterio. */
  align-items: start;
  padding-block: var(--space-sm);
}

/* El trazo. Se dibuja por parada y no de una sola vez, para que empiece en la
   primera y termine en la última sin sobresalir por ningún extremo. */
.route__stop::before {
  content: "";
  position: absolute;
  left: calc(var(--size-unit) / 2);
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background-color: var(--color-rule);
}
.route__stop:first-child::before { top: 50%; }
.route__stop:last-child::before { bottom: 50%; }

/* EL MISMO NÚMERO QUE EL DIBUJO. Antes eran puntos sin nombre: quien miraba el
   mapa no tenía cómo saber cuál parada era la 3. El número es lo que une las
   dos piezas — el diagrama se ve, la indicación se lee, y hablan de lo mismo. */
.route__num {
  justify-self: center;
  position: relative;                            /* por encima del trazo */
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-text);
  color: var(--color-page);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  font-variant-numeric: tabular-nums;
}

/* El giro es la única DECISIÓN de todo el recorrido: es donde uno se pierde.
   Aro abierto contra disco lleno — dos FORMAS, no dos tonos. */
.route__stop--turn .route__num {
  background-color: var(--color-page);
  color: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-accent);
}
/* AQUÍ el giro subía además el PESO de su nombre, y la llegada cambiaba de
   familia y de tamaño. Cuatro portadores para dos rangos. El aro abierto
   contra el disco lleno ya los dice, y con la FORMA, que es lo correcto.
   Medido a 320 antes de quitarlo: cinco pasos con tres tamaños, dos pesos y
   dos familias en una sola columna — 7 de 11 dimensiones con un solo valor.
   Es el mismo argumento del botón principal: cuando hay rango, lo lleva UNA
   cosa. */

.route__stop--arrival .route__num { background-color: var(--color-accent); }
.route__stop--arrival { padding-block: var(--space-md); }

.route__place {
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.route__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
  max-width: var(--measure-narrow);
}

/* --------------------------------------------------- cabecera de una carta */
.venue-header {
  /* BANDA DE LA UNIDAD. La página de una sede llevaba el mismo papel que todo
     lo demás: no se sabía en cuál estabas. Ahora se abre con el campo de su
     color —el mismo que su plato en la mesa y el de su tarjeta— y su signo.
     El sistema tiene que aparecer en los TRES sitios donde aparece la sede. */
  margin-inline: calc(50% - 50vw);
  padding: var(--space-2xl) max(var(--layout-gutter),
           calc((100vw - var(--layout-max)) / 2 + var(--layout-gutter)));
  background-color: var(--color-venue-soft);
}

/* Misma forma que en la portada. Antes era una banda 21:9 sobre una imagen
   cuadrada de 440 px: se estiraba al doble y se pixelaba. */
.venue-header__media {
  width: var(--size-portrait-lg);
  height: var(--size-portrait-lg);
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--color-page);
  border: 2px solid var(--color-venue-line);
  margin-bottom: var(--space-lg);
}

.venue-header__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}

/* Sin imagen: el hueco se reserva igual, con la inicial de la unidad en su
   tono. Un hueco que desaparece rompe la alineación de toda la fila. */
.venue-card__media--empty,
.venue-header__media--empty {
  display: grid;
  place-items: center;
  background-color: var(--color-venue-soft);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-venue);
  line-height: 1;
}

/* Misma regla que en la tarjeta: un logotipo se contiene, no se recorta. */
.venue-header--logo .venue-header__photo { object-fit: contain; padding: 6%; }

.venue-header__kicker {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-venue);
  margin-bottom: var(--space-sm);
}

.venue-header__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  max-width: 16ch;
}

/* Es un <span> dentro del <h1>: sin `display: block` se pega al final del
   nombre y se lee «Don Juan de DiosParrilla». */
.venue-header__subtitle {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-snug);
  margin-top: var(--space-2xs);
}

.venue-header__summary {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

.venue-header__meta { margin-top: var(--space-lg); }

/* ----------------------------------------------------------------- buscador */
/* padding y no margin: como primer hijo, el margen se colapsaba con el
   contenedor y el buscador quedaba pegado a la regla de la cabecera. */
.menu-search { padding-top: var(--space-xl); }

.search__label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.search__control {
  display: flex;
  gap: var(--space-xs);
  max-width: var(--size-search-max);
}

.search__input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--size-tap-min);
  padding: var(--space-xs) var(--space-md);
  border: var(--size-hairline) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background-color: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: var(--text-md);
}
.search__input::placeholder { color: var(--color-text-muted); }

.search__status {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------------------ índice de secciones */
.section-index { margin-top: var(--space-lg); }

.section-index__title {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: var(--space-xs);
}

.section-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.section-index__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  padding: var(--space-2xs) var(--space-md);
  border: var(--size-hairline) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  text-decoration: none;
}

/* ----------------------------------------------------------- las secciones */
.menu-sections { margin-top: var(--space-2xl); }
.menu-section + .menu-section { margin-top: var(--space-2xl); }

.menu-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  padding-bottom: var(--space-xs);
  border-bottom: var(--size-hairline) solid var(--color-text);
  text-wrap: balance;
}

.menu-section__note {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  max-width: var(--measure);
}

.menu-section__list { margin-top: var(--space-md); }

/* ---------------------------------------------------------------- el plato */
/* La guía de puntos entre el nombre y el precio es el gesto propio de una
   carta y resuelve el problema real: que el precio se lea sin buscarlo.
   Es tipografía —la única palanca con efecto medido— y cuesta cero bytes. */
.menu-item {
  padding: var(--space-md) 0;
  border-bottom: var(--size-hairline) solid var(--color-rule-soft);
}
.menu-item:last-child { border-bottom: 0; }

.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.menu-item__name {
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  flex: 0 1 auto;
}

/* La guía crece para ocupar el hueco entre el plato y el precio. Es decorativa:
   sin contenido con significado, así que el lector de pantalla no la anuncia.
   `order` la coloca ENTRE los dos: en el DOM el pseudo-elemento va al final, y
   sin esto los puntos salían detrás del precio en vez de empujarlo al margen. */
.menu-item__name { order: 1; }
.menu-item__head::after {
  order: 2;
  content: "";
  flex: 1 1 auto;
  align-self: flex-end;
  min-width: var(--space-md);
  margin-bottom: 0.32em;
  border-bottom: var(--size-hairline) dotted var(--color-rule);
}
.menu-item__price { order: 3; }

.menu-item__price {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  white-space: nowrap;
  flex: 0 0 auto;
}

.menu-item__description {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: var(--measure);
}

/* Un solo destacado discreto, y no repartido: Yang 2012 dice que la lectura es
   secuencial y que el énfasis disperso trabaja en contra. Una línea al margen,
   no un recuadro. */
.menu-item--featured {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-md);
}

.menu-item__flag {
  display: inline-block;
  margin-top: var(--space-xs);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-danger);
}

/* ------------------------------------------------------------ estado vacío */
.empty-state {
  margin-top: var(--space-xl);
  padding: var(--space-xl) var(--space-lg);
  background-color: var(--color-surface-raised);
  text-align: center;
}

.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.empty-state__text {
  margin: var(--space-sm) auto 0;
  max-width: var(--measure-narrow);
  color: var(--color-text-muted);
}

.empty-state__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ----------------------------------------------------------------- paneles */
/* ═════════════════════════════════════════════════════ EL MAPA DIBUJADO
   Un alzado, no una planta: lo que hay que entender de este camino es que se
   SUBE. Todo el dibujo son primitivas del alfabeto de la casa —arco, recta,
   círculo, rectángulo— y el mismo grosor. */
.mapa { margin: 0 0 var(--space-lg); }
.mapa__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background-color: var(--color-page);
}
.mapa__ladera { fill: var(--color-surface-raised); }
.mapa__ciudad rect { fill: var(--color-rule); }
.mapa__via {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 9;      /* la vía punteada: es un diagrama, no un plano */
}
.mapa__parada circle { fill: var(--color-text); }
/* El giro es lo único donde alguien se pierde, así que se marca distinto del
   destino: aro abierto contra disco lleno. Dos estados, dos formas — no dos
   tonos del mismo color, que a 320 px no se distinguen. */
.mapa__parada--giro circle {
  fill: var(--color-page);
  stroke: var(--color-accent);
  stroke-width: 4;
}
.mapa__parada--giro .mapa__numero { fill: var(--color-accent); }
.mapa__parada--llegada circle { fill: var(--color-accent); }
.mapa__numero {
  fill: var(--color-page);
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: 600;
}
.mapa__rotulo {
  fill: var(--color-text);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
}
.mapa__pie {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.info-panel {
  border-radius: var(--radius-lg);
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface);
  border-left: 2px solid var(--color-accent);
}

.info-panel__text {
  margin-top: var(--space-md);
  max-width: var(--measure);
  color: var(--color-text-muted);
}

.info-panel__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.info-list { display: grid; gap: var(--space-md); }
.info-list__row { display: grid; gap: var(--space-2xs); }

/* LOS RÓTULOS DE ESTRUCTURA, a la tinta que el hero fijó. Inventario medido:
   cuatro tintas y tres tamaños para un mismo papel. `--color-text-muted` a
   11,8 px mide 4,60 sobre el escenario —diez centésimas sobre el mínimo—, y
   por eso el hero pasó sus rótulos a `--color-text-soft`. Estos tres se
   quedaron atrás. */
.info-list__term .ic { width: 1.15em; height: 1.15em; flex: none; }
.info-list__term {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-soft);
  /* El signo y su palabra son una unidad: se alinean por su centro óptico y
     llevan el mismo aire que la navegación. Sin esto la burbuja quedaba pegada
     a la «A». */
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.info-list__value { font-weight: var(--weight-medium); }
.info-list__note {
  display: block;
  font-weight: var(--weight-regular);
  color: var(--color-text-muted);
}

/* Es el objetivo más importante del sitio: el sitio no toma reservas, se llama.
   Como `inline` medía 23 px de alto —uno por debajo de WCAG 2.5.8— y aunque la
   excepción «inline» lo perdonaría, aquí no aplica: no está dentro de una frase. */
.info-list__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--size-tap-min);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  text-underline-offset: 3px;
}

/* Los canales por tema. Cada uno es un enlace de WhatsApp con su propio número
   y su propio mensaje precargado, así que el negocio sabe por qué le escriben
   sin preguntarlo. Van en columna: a 320 px, cuatro etiquetas en fila se
   apretaban por debajo del piso táctil de la casa. */
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.canales__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: var(--size-tap-min);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--size-hairline) solid transparent;
}
.canales__link:hover,
.canales__link:focus-visible { border-bottom-color: var(--color-accent); }
.canales__link .ic { width: 1em; height: 1em; flex: none; color: var(--color-wa); }

/* ─────────────────────────────── EL MOVIMIENTO DE LA NAVEGACIÓN ─────────
   DISS-MO-06: el movimiento es OPT-IN. Fuera de este bloque no hay ninguna
   transición, así que quien pide menos movimiento no recibe ninguno — no hay
   que acordarse de apagarlo.
   Duración y curva: las dos medidas en Airbnb (300 ms · cubic-bezier(.2,0,0,1)),
   que además caen dentro del rango 100–300 ms que esta casa ya tenía escrito. */
@media (prefers-reduced-motion: no-preference) {
  .site-nav__sub {
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
  }
  .site-nav__link { transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1); }

  /* UN GESTO POR SIGNO, y cada uno es lo que ese objeto HACE de verdad
     —Niemann: una idea por signo—. Solo `transform`, finitos, sin bucle. */
  /* El gesto se alarga y se amplifica: a 420 ms y con recorridos pequeños
     apenas se notaba. 560 ms con más recorrido se LEE como un gesto y sigue
     siendo finito —no hay bucle—, que es lo que pide DISS-MO-05. */
  .site-nav__link:hover .site-nav__ic,
  .site-nav__link:focus-visible .site-nav__ic { animation-duration: 560ms; animation-timing-function: cubic-bezier(0.2, 0, 0, 1); }

  .site-nav__link[data-gesto="corcovea"]:hover .site-nav__ic,
  .site-nav__link[data-gesto="corcovea"]:focus-visible .site-nav__ic { animation-name: gesto-corcovea; }
  .site-nav__link[data-gesto="posa"]:hover .site-nav__ic,
  .site-nav__link[data-gesto="posa"]:focus-visible .site-nav__ic { animation-name: gesto-posa; }
  .site-nav__link[data-gesto="clava"]:hover .site-nav__ic,
  .site-nav__link[data-gesto="clava"]:focus-visible .site-nav__ic { animation-name: gesto-clava; }
}

/* El caballo se ENCABRITA: se alza sobre los cuartos traseros y vuelve.
   El origen está abajo, que es donde apoya. */
@keyframes gesto-corcovea {
  0%   { transform: rotate(0) translateY(0); }
  30%  { transform: rotate(-22deg) translateY(-4px); }
  55%  { transform: rotate(8deg) translateY(0); }
  78%  { transform: rotate(-4deg); }
  100% { transform: rotate(0) translateY(0); }
}
/* El plato SE POSA en la mesa: baja y asienta. */
@keyframes gesto-posa {
  0%   { transform: translateY(0) scale(1); }
  28%  { transform: translateY(-6px) scale(1.12); }
  58%  { transform: translateY(0) scale(0.93); }
  80%  { transform: translateY(0) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
/* El pin CAE y se clava en el mapa. */
@keyframes gesto-clava {
  0%   { transform: translateY(0); }
  26%  { transform: translateY(-10px); }
  52%  { transform: translateY(2px) scaleY(0.86); }
  74%  { transform: translateY(-3px) scaleY(1.04); }
  100% { transform: translateY(0) scaleY(1); }
}
.site-nav__link[data-gesto="corcovea"] .site-nav__ic { transform-origin: 50% 90%; }
.site-nav__link[data-gesto="clava"]    .site-nav__ic { transform-origin: 50% 100%; }

/* LA FRANJA APRETADA · 768 a 895 px, donde todo aparece a la vez.
   A 48em entra la navegación y se retira la barra de destinos del teléfono,
   pero el ancho todavía no da: medido a 768, marca (171) + navegación (361) +
   acciones (204) = 736 contra 688 disponibles. Falta sitio de verdad.
   Lo que se retira es el WORDMARK y no la navegación, porque el nombre ya está
   dicho —en el `aria-label` del enlace, en el titular y en el pie— mientras que
   los tres destinos no están dichos en ningún otro sitio de esa franja. */
@media (min-width: 48em) and (max-width: 55.99em) {
  .site-header__wordmark { display: none; }
}

/* ═══════════════════════════════ EL ENLACE SOCIAL DEL ENCABEZADO ═══════ */
.site-header__social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text);
  text-decoration: none;
  /* MISMA tipografía que los enlaces de la barra. Antes iba en versalitas, a
     11,8 px, peso 400 y con 1,65 de tracking: era la tercera tipografía de una
     fila que ya tenía dos, y por eso chocaba. Medido, no supuesto. */
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  opacity: 0.66;
  /* Las DOS dimensiones. Es la SEGUNDA vez en esta sesión: cuando se oculta
     el rótulo de un enlace y queda el signo solo, el ancho cae con él.
     REGLA: todo enlace que pueda quedarse sin texto lleva `min-width`, no solo
     `min-height`. */
  min-height: var(--size-tap-min);
  min-width: var(--size-tap-min);
  justify-content: center;
}
.site-header__social:hover,
.site-header__social:focus-visible { opacity: 1; }
.site-header__social .ic { width: 20px; height: 20px; }
/* Por debajo de 64em se queda el signo solo: la palabra no cabe junto a la
   marca completa, y el signo con su `aria-label` ya dice a dónde lleva. */
.site-header__social span { display: none; }
@media (min-width: 64em) { .site-header__social span { display: inline; } }

/* ═════════════════════════ EL EQUILIBRIO DE LA BARRA PRINCIPAL ════════
   Seis elementos en una fila con TRES sistemas tipográficos —tres pesos, tres
   trackings, dos cajas y tres tamaños de signo— se leen como un montaje, no
   como una barra. Aquí hay UNA sola tipografía.

   La jerarquía no la hace la fuente: la hacen la POSICIÓN y el TAMAÑO DEL
   SIGNO. Los destinos llevan signo de 26; las acciones, de 20. Vignelli: pocos
   valores, y que cada uno signifique algo. */
.site-header__actions .button {
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  /* Y las dos dimensiones que la primera pasada NO miró, y que el ojo sí vio:
     · OPACIDAD — los cuatro destinos y el social descansan en 0,66 y estas dos
       estaban en 1. Mismo color, distinta opacidad: se leían más oscuras, que
       es exactamente la queja, y además invertía la jerarquía (las acciones
       pesaban más que los destinos).
     · SUBRAYADO — «Llamar» hereda `.button--quiet`, que subraya. Era el único
       subrayado en pie de la fila; el subrayado de este encabezado es el que
       se desliza bajo la navegación, y no puede haber dos.
     La lección: «una sola firma tipográfica» no se comprueba solo en tamaño,
     peso, tracking y caja. Se comprueba en TODO lo que el ojo suma. */
  opacity: 0.66;
  text-decoration: none;
}
.site-header__actions .button:hover,
.site-header__actions .button:focus-visible { opacity: 1; }
.site-header__actions .ic { width: 20px; height: 20px; }

/* Y una separación real entre los dos grupos: los destinos terminan, las
   acciones empiezan. Sin esto, seis cosas seguidas parecen una lista de seis. */
@media (min-width: 48em) {
  .site-header__actions {
    /* SIN `margin-inline-start`: el `gap` del contenedor ya paga esa
       separación, y pagarla dos veces sacaba la fila de su canal.
       Medido a 1024: el borde derecho de la fila 1 caía en 984 —el canal— y
       el de la fila 2 en **1007**, 23 px fuera. No lo cazaba ninguna batería
       porque el DOCUMENTO no desborda: solo se sale el contenido de una fila
       respecto de la otra, y eso hay que medirlo comparando los dos bordes.
       Es un valor escrito dos veces, que es la regla dura de la casa. */
    padding-inline-start: var(--space-lg);
    border-inline-start: var(--size-hairline) solid var(--color-rule);
  }
}

@media (max-width: 47.99em) {
  /* Su alto real, medido: 56 de contenido + el filete. Va aquí y no en :root
     porque por encima de 48em la barra no existe y el desplazamiento no debe
     reservarle sitio. */
  :root { --barra-height: 57px; }
}

/* ═════════════════════════ LA BARRA DE DESTINOS, SOLO EN TELÉFONO ═════
   Cuatro destinos que en teléfono no caben dentro del encabezado —marca,
   nav, WhatsApp, Instagram y llamada en 320 px es imposible— y que antes
   simplemente NO EXISTÍAN: la nav se retiraba. Se retiraba del sitio
   equivocado; lo que había que mover era la fila, no borrarla.

   VA ARRIBA, bajo el encabezado. Es un cambio de criterio y se escribe como
   tal, porque el argumento anterior no era falso:

   · A FAVOR DE ABAJO (lo que se resigna): el borde inferior es la zona verde
     del pulgar y las esquinas superiores la roja —Steven Hoober, UXmatters
     2013—, y Apple pone los destinos de primer nivel en una barra inferior
     de máximo cinco (Human Interface Guidelines).
   · A FAVOR DE ARRIBA (lo que pesó más): **el referente de este encargo la
     pone arriba** —la barra de categorías de Airbnb va bajo el logotipo—, y
     una barra fija abajo tapa contenido durante todo el desplazamiento,
     mientras que ésta se va con la página.

   Lo que se pierde es alcance del pulgar en cuatro enlaces de navegación,
   que se tocan una vez por visita. Lo que se gana es la pantalla completa
   durante el resto de la visita. */
.barra-pulgar { display: none; }

@media (max-width: 47.99em) {
  .barra-pulgar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* PEGAJOSA, bajo el encabezado. Al traerla de abajo arriba se quedó
       `static` y se iba con la página: medido, tras desplazar 600 px el
       encabezado seguía en 0 y la barra estaba en **−538**. En teléfono la
       navegación desaparecía en cuanto se empezaba a leer, que es justo
       cuando hace falta.

       El desplazamiento sale de `--header-height`, que **ya lo mide el JS**
       con un `ResizeObserver` sobre el encabezado y lo escribe en `:root`.
       Un número fijo aquí se rompería en cuanto la marca envuelva a 320 px.

       `z-index` 2 y no 3: si alguna vez se solapan, manda el encabezado. */
    position: sticky;
    top: var(--header-height);
    z-index: 2;
    background-color: var(--color-surface);
    border-bottom: var(--size-hairline) solid var(--color-rule);
  }
  .barra-pulgar__enlace {
    /* REJILLA de dos filas fijas —signo y rótulo— y no `flex` centrado.
       Con flex, el de WhatsApp arrancaba 6 px más abajo que los otros tres:
       su signo es de otra clase y el centrado los repartía distinto. Con dos
       filas de alto fijo, los cuatro alinean por construcción. */
    display: grid;
    grid-template-rows: 24px auto;
    justify-items: center;
    align-content: center;
    gap: 4px;
    min-height: 56px;
    padding: var(--space-2xs) 2px;
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--text-2xs);
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
  }
  .barra-pulgar__enlace .sig,
  .barra-pulgar__enlace .ic { width: 24px; height: 24px; flex: none; }
  /* Cada destino con el tono de su sección, igual que arriba (Wyman). */
  .barra-pulgar__enlace[data-tono="monta"]  { --venue-hue: 250.2; }
  .barra-pulgar__enlace[data-tono="cocina"] { --venue-hue: 143.9; }
  .barra-pulgar__enlace[data-tono="lugar"]  { --venue-hue: 84; }
  .barra-pulgar__enlace[data-tono] .sig { color: oklch(0.480 0.110 var(--venue-hue)); }
  .barra-pulgar__enlace--wa .ic { color: var(--color-wa); }
  .barra-pulgar__enlace:active { background-color: var(--color-surface-raised); }

  /* En teléfono el WhatsApp del encabezado sobra: está abajo, en la mano. */
  .site-header__action { display: none; }
}

/* ------------------------------------------------------------------ avisos */
.notice {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-surface-raised);
  border-left: 2px solid var(--color-danger);
}
.notice__title { font-weight: var(--weight-semi); margin-bottom: var(--space-xs); }
.notice__text { color: var(--color-text-muted); max-width: var(--measure); }
.notice__actions {
  margin-top: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ------------------------------------------------------------ volver atrás */
.back-link-wrapper { padding-top: var(--space-lg); }

/* La flecha de vuelta mira al otro lado: es el mismo signo girado, no otro
   dibujo. Un alfabeto se estira, no se amplía. */
.back-link .ic { transform: rotate(180deg); }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--size-tap-min);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  text-decoration: none;
  color: var(--color-text-muted);
}

.back-link:hover { color: var(--color-text); }

/* ------------------------------------------------------------------ footer */
.site-footer {
  margin-top: var(--space-3xl);
  padding: var(--space-xl) var(--layout-gutter);
  background-color: var(--color-surface);
  color: var(--color-text);
  border-top: var(--size-hairline) solid var(--color-rule);
  text-align: center;
}
/* El logotipo completo del cliente, como firma. Mismo archivo-máscara, misma
   razón. Medido en la misma hoja de contacto: por debajo de ~180 px «ECUESTRE»
   y los superíndices COL/BGA dejan de leerse, así que aquí no baja de 180 —
   a 320 px de ancho, 68vw son 218. */
.site-footer__marca {
  display: block;
  /* El logotipo es casi cuadrado (434 × 466), no apaisado: a 218 px de ancho
     mediría 234 de alto y se comería el pie. 150 lo deja en 161, y sigue por
     encima del mínimo medido de 120. */
  width: min(9.5rem, 55vw);
  aspect-ratio: 434 / 466;
  margin: 0 auto var(--space-lg);
  background-color: currentColor;
  -webkit-mask: url(../img/marca/mundo-ecuestre-lockup.svg) center / contain no-repeat;
          mask: url(../img/marca/mundo-ecuestre-lockup.svg) center / contain no-repeat;
}

.site-footer__note { font-weight: var(--weight-medium); }
.site-footer__legal {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
/* El nombre viejo se conserva a la vista durante la transición: mucha gente
   conoce el sitio como «Mundo Ecuestre» y el letrero de la vía todavía lo dice.
   Va más callado que el nombre nuevo, no escondido. */
.site-footer__antes { opacity: 0.72; }

/* LAS REDES. Sin glifo de terceros —las normas de Instagram prohíben modificar
   su marca, y el alfabeto de esta casa son 17 signos PROPIOS—, así que el enlace
   es texto: la red y el nombre de usuario, que es lo que de verdad dice a dónde
   va. La red va en versalitas chicas y el usuario con el peso; juntos ocupan
   menos que el objetivo táctil, así que el piso de 44 px se declara. */
.social { list-style: none; margin: 0 0 var(--space-sm); padding: 0; display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; }
.social__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: var(--size-tap-min);
  justify-content: center;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--size-hairline) solid transparent;
}
.social__link:hover,
.social__link:focus-visible { border-bottom-color: var(--color-accent); }
.social__red {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-soft);
  font-weight: var(--weight-semi);
}
.social__handle { font-weight: var(--weight-medium); }

/* SALVAGUARDA. El logotipo se pinta con `mask`: si el navegador no la soporta,
   `background-color: currentColor` deja un RECTÁNGULO sólido donde debería ir
   la marca —peor que no ponerla—. Sin máscara, no hay marca: el nombre en texto
   del encabezado y el del pie siguen diciendo quién es. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .site-header__logo,
  .site-header__wordmark,
  .site-footer__marca,
  .marca--portada { display: none; }
}

/* ============================================================== escritorio */
@media (min-width: 48em) {
  :root {
    --layout-gutter: var(--space-xl);
    --text-md: 1.275rem;   /* paso +1: en escritorio el cuerpo sube un escalón
                              entero de la escala, no un valor inventado */
  }

  .venue-card__link { padding: var(--space-xl); }
  /* Sube la UNIDAD, no cada pieza por separado: la escalera se conserva. */
  :root { --size-unit: 5.5rem; }
  .menu-item__head { gap: var(--space-md); }
}

@media (min-width: 64em) {
  /* ERA `--space-3xl`, 96 px, y era la regla que ganaba: estaba después en el
     archivo que la del hero vertical y anulaba en silencio el recorte de
     arriba. Se medía 96 px de aire entre el encabezado y el titular en la
     pantalla más grande, justo donde más caro sale.
     Existía para la maqueta de dos columnas, donde el bloque de texto estaba
     centrado verticalmente contra una rejilla alta y necesitaba aire para no
     pegarse. En vertical ese aire ya lo pone el `gap`. */
  .hero__inner { padding-block: var(--space-lg) var(--space-2xl); }
}

/* ============================================================== movimiento */
/* DISS-MO-03: el movimiento SE ENCIENDE. Nada de esto existe si el sistema no
   declara preferencia por el movimiento. DISS-MO-05: solo transform y opacity. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .skip-link { transition: transform var(--motion-fast) var(--ease-house); }

  .button,
  .section-index__link {
    transition: transform var(--motion-base) var(--ease-house);
  }

  .venue-card__footer::after {
    transition: transform var(--motion-base) var(--ease-house);
  }

  .button:hover,
  .section-index__link:hover { transform: translateY(var(--motion-lift-sm)); }

  .venue-card__link:hover .venue-card__footer::after {
    transform: translateX(var(--space-2xs));
  }

  /* ------------------------------------------------------------ entrada
     DISS-MO-05 · solo `transform` y `opacity`. Nada de `stroke-dashoffset`
     para «dibujar» el trazo: eso repinta en CPU y además no hace falta.
     Ver `el-estandar-de-movimiento.md`, §A3.

     El estado EN REPOSO es visible. La animación solo existe dentro de este
     bloque, así que si alguien pidió menos movimiento —o si esto no se aplica
     por lo que sea— la página queda quieta y completa, nunca en blanco.
     Es la regla de Airbnb medida en H5: `no-preference`, no `reduce`. */
  

  /* Los mosaicos, las tarjetas de plan y los retratos reaccionan al puntero, no
     solos: WCAG 2.2.2 (nivel A) solo exige control sobre lo que se mueve por su
     cuenta más de 5 s. Aquí nada se mueve solo.
     Solo `transform` y `opacity` (DISS-MO-05). */
  .tile__link,
  .plan__art,
  .venue-card__media {
    transition: transform var(--motion-base) var(--ease-house);
  }
  .tile__link:hover { transform: translateY(-3px); }
  .plan:hover .plan__art { transform: scale(1.05); }
  .venue-card__link:hover .venue-card__media { transform: scale(1.03); }

  /* El giro del diagrama: el único punto donde uno se puede perder. Late una
     vez al pasar por encima, no en bucle. */
  .route__num { transition: transform var(--motion-fast) var(--ease-house); }
  .route__stop--turn:hover .route__num { transform: scale(1.12); }

  /* ══════════ EL ANILLO SE CIERRA · animación SVG hecha a mano
     Los nueve segmentos entran uno tras otro, en el sentido de las agujas, y
     el anillo se cierra. Es literalmente lo que dice el titular ocurriendo:
     nueve sitios, un mismo bosque.

     Reemplaza a «el caballo alza la cabeza», que se retiró con el sello.
     Solo `transform` y `opacity` (DISS-MO-05) — nada de `stroke-dashoffset`,
     que repinta en CPU y choca con nuestra propia regla—. FINITA: nueve pasos
     de 55 ms, así que WCAG 2.2.2 (nivel A) no pide control. Y todo dentro de
     `prefers-reduced-motion: no-preference`: quien pidió menos movimiento ve
     el anillo entero y quieto, que es el estado en reposo. */
  @keyframes entra-arco {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: none; }
  }
  .marca__arco {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: entra-arco var(--motion-base) var(--ease-house) backwards;
    animation-delay: calc(160ms + var(--paso) * 55ms);
  }

  /* Los mosaicos entran uno detrás de otro al cargar. El estado en reposo es
     visible: si esto no se aplica, la página queda quieta y completa. */
  @keyframes entra-mosaico {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .unit { animation: entra-mosaico var(--motion-base) var(--ease-house) backwards; }
  .unit:nth-child(1) { animation-delay: 60ms; }
  .unit:nth-child(2) { animation-delay: 110ms; }
  .unit:nth-child(3) { animation-delay: 160ms; }
  .unit:nth-child(4) { animation-delay: 210ms; }
  .unit:nth-child(5) { animation-delay: 260ms; }
  .unit:nth-child(6) { animation-delay: 310ms; }
  .unit:nth-child(7) { animation-delay: 360ms; }
  .unit:nth-child(8) { animation-delay: 410ms; }
  .unit:nth-child(9) { animation-delay: 460ms; }
}

/* ============================================================= modo oscuro */
/* El sitio se abre por QR, al aire libre, y buena parte de las veces de noche.
   Respetar la preferencia del sistema aquí no es adorno. */
/* EL ESQUEMA OSCURO SE RETIRÓ el 2026-09-08, por decisión del dueño y repetida
   por él varias veces: «todo se ve muy oscuro». Su sistema está en modo oscuro,
   así que veía la página entera casi negra — y encima yo había puesto la portada
   en tinta. Aquí no había nada que discutir.

   `color-scheme: light` en :root hace que también las barras de desplazamiento y
   los controles del formulario de búsqueda se pinten claros; sin eso el
   navegador los sigue pintando oscuros aunque la página sea clara.

   Lo que se pierde y hay que saberlo: el sitio se abre por QR al aire libre y
   buena parte de las veces de noche. Si eso pesa más adelante, el bloque
   retirado está en el registro del encargo, no perdido. */