@charset "UTF-8";
/* ==========================================================================
   LA CARPANTA — Brenes, desde 1940
   Hoja de estilos única. Sin build, sin dependencias.

   Índice
   01 · Tokens de diseño (tema claro y oscuro)
   02 · Reajuste base y accesibilidad estructural
   03 · Tipografía
   04 · Maquetación y contenedores
   05 · Cabecera y navegación
   06 · Botones y enlaces de acción
   07 · Migas de pan
   08 · Portada (hero)
   09 · Tarjetas y rejillas
   10 · La carta
   11 · Historia y línea del tiempo
   12 · Avisos y marcadores de contenido pendiente
   13 · Imágenes y marcadores de foto
   14 · Pie de página
   15 · Animación de aparición
   16 · Barra de herramientas de accesibilidad
   17 · Utilidades
   18 · Impresión

   NOTA DE CONTRASTE — todos los pares texto/fondo se han comprobado a mano.
   Claro:  tinta/papel 15.2:1 · tinta-suave/papel 8.6:1 · burdeos/papel 8.0:1
   Oscuro: papel/tinta 15.6:1 · papel-suave/tinta 9.7:1 · latón/tinta 9.9:1
   Todos superan el 7:1 que exige WCAG 2.2 nivel AAA para texto normal.
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS DE DISEÑO
   ========================================================================== */

:root {
  /* --- Color: tema claro (por defecto) --- */
  --papel:            #F5F0E6;  /* fondo general, color de papel viejo */
  --papel-alto:       #FBF8F1;  /* tarjetas, superficies elevadas */
  --papel-hundido:    #EBE4D6;  /* zonas rebajadas, separadores */
  --tinta:            #1F1B16;  /* texto principal */
  --tinta-suave:      #4A423A;  /* texto secundario */
  --burdeos:          #8C1D18;  /* acento principal */
  --burdeos-fuerte:   #6E1512;  /* acento en hover/activo */
  --azulejo:          #1F4E79;  /* acento secundario, cenefas */
  --laton:            #A6761D;  /* solo decorativo o texto grande */
  --borde:            #D8CFBC;
  --borde-fuerte:     #B9AC93;
  --sobre-acento:     #FBF8F1;  /* texto que va encima del acento */
  --sombra:           25 27 22; /* componentes RGB para rgb(… / α) */

  /* --- Tipografía --- */
  --letra-titulo: "Fraunces", "Georgia", "Times New Roman", serif;
  --letra-texto:  "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala fluida. El mínimo es 18px: por debajo de eso la lectura
     se complica para personas mayores o con baja visión. */
  --t--1:   clamp(1rem,     0.97rem + 0.15vw, 1.0625rem);
  --t-0:    clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
  --t-1:    clamp(1.3rem,   1.24rem + 0.3vw,  1.5rem);
  --t-2:    clamp(1.55rem,  1.44rem + 0.55vw, 1.95rem);
  --t-3:    clamp(1.9rem,   1.7rem  + 1vw,    2.6rem);
  --t-4:    clamp(2.3rem,   1.95rem + 1.75vw, 3.4rem);
  --t-5:    clamp(2.8rem,   2.1rem  + 3.5vw,  4.8rem);

  /* --- Ritmo vertical --- */
  --e-1: 0.375rem;
  --e-2: 0.75rem;
  --e-3: 1.25rem;
  --e-4: 2rem;
  --e-5: 3rem;
  --e-6: 4.5rem;

  /* --- Medidas --- */
  --ancho-texto:  38rem;   /* ~68 caracteres: el óptimo de lectura */
  --ancho-medio:  62rem;
  --ancho-ancho:  78rem;
  --radio:        3px;     /* casi recto: el redondeo excesivo resta solera */
  --radio-grande: 6px;

  /* --- Movimiento --- */
  --dur-corta: 160ms;
  --dur-media: 320ms;
  --dur-larga: 620ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Control de tamaño de texto del usuario (barra de accesibilidad) --- */
  --escala-usuario: 1;

  color-scheme: light dark;
}

/* --- Color: tema oscuro (preferencia del sistema) --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --papel:          #16130F;
    --papel-alto:     #201C17;
    --papel-hundido:  #0E0C0A;
    --tinta:          #F0EADC;
    --tinta-suave:    #C4B9A6;
    --burdeos:        #E9B44C;  /* en oscuro el acento pasa a latón: el burdeos
                                   no llega a 7:1 sobre fondo negro */
    --burdeos-fuerte: #F5CE7E;
    --azulejo:        #8FBBE0;
    --laton:          #E9B44C;
    --borde:          #3A332B;
    --borde-fuerte:   #574D41;
    --sobre-acento:   #16130F;
    --sombra:         0 0 0;
  }
}

/* El interruptor manual gana sobre el sistema, en los dos sentidos. */
:root[data-tema="oscuro"] {
  --papel:          #16130F;
  --papel-alto:     #201C17;
  --papel-hundido:  #0E0C0A;
  --tinta:          #F0EADC;
  --tinta-suave:    #C4B9A6;
  --burdeos:        #E9B44C;
  --burdeos-fuerte: #F5CE7E;
  --azulejo:        #8FBBE0;
  --laton:          #E9B44C;
  --borde:          #3A332B;
  --borde-fuerte:   #574D41;
  --sobre-acento:   #16130F;
  --sombra:         0 0 0;
}

/* Modo de alto contraste del sistema operativo. */
@media (prefers-contrast: more) {
  :root {
    --tinta-suave: var(--tinta);
    --borde: var(--tinta);
    --borde-fuerte: var(--tinta);
  }
}

/* ==========================================================================
   02 · REAJUSTE BASE Y ACCESIBILIDAD ESTRUCTURAL
   ========================================================================== */

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

/* El atributo `hidden` tiene que ganar siempre.
   Sin esto, cualquier clase que declare `display` (como .estado o .plato)
   deja visible un elemento marcado como oculto, y el lector de pantalla
   lo anuncia igual. Es de los pocos !important justificados. */
[hidden] { display: none !important; }

html {
  /* La escala del usuario multiplica el tamaño raíz: al ir todo en rem,
     un solo valor agranda la página entera sin romper la maquetación. */
  font-size: calc(100% * var(--escala-usuario));
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-texto);
  font-size: var(--t-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Enlace de salto: invisible hasta que recibe el foco con el tabulador.
   Es lo primero que encuentra quien navega con teclado o lector de pantalla. */
.salto-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 999;
  transform: translate(-50%, -120%);
  padding: var(--e-2) var(--e-3);
  background-color: var(--burdeos);
  color: var(--sobre-acento);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 var(--radio) var(--radio);
  transition: transform var(--dur-corta) var(--curva);
}
.salto-contenido:focus-visible { transform: translate(-50%, 0); }

/* Foco visible siempre y con contraste propio. Nunca se elimina. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--burdeos);
  outline-offset: 3px;
  border-radius: var(--radio);
}

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

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

/* ==========================================================================
   03 · TIPOGRAFÍA
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--letra-titulo);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 var(--e-3);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 40;
}

h1 { font-size: var(--t-4); }
h2 { font-size: var(--t-3); margin-top: var(--e-5); }
h3 { font-size: var(--t-1); margin-top: var(--e-4); }
h4 { font-size: var(--t-0); margin-top: var(--e-3); }

p, li { text-wrap: pretty; }
p  { margin: 0 0 var(--e-3); max-width: var(--ancho-texto); }
ul, ol { padding-left: 1.35em; }
li { margin-bottom: var(--e-1); }

a { color: var(--burdeos); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--burdeos-fuerte); text-decoration-thickness: 0.14em; }

strong, b { font-weight: 700; }

/* Antetítulo en versalitas: el recurso tipográfico que da el aire de taberna. */
.antetitulo {
  display: block;
  font-family: var(--letra-texto);
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e-2);
}

.entradilla {
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--tinta-suave);
  max-width: 34rem;
}

.texto-centrado { text-align: center; }
.texto-centrado p, .texto-centrado .entradilla { margin-inline: auto; }

blockquote {
  margin: var(--e-4) 0;
  padding-left: var(--e-3);
  border-left: 3px solid var(--burdeos);
  font-family: var(--letra-titulo);
  font-size: var(--t-1);
  font-style: italic;
  line-height: 1.45;
  color: var(--tinta);
}
blockquote cite {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--letra-texto);
  font-size: var(--t--1);
  font-style: normal;
  color: var(--tinta-suave);
}

/* ==========================================================================
   04 · MAQUETACIÓN Y CONTENEDORES
   ========================================================================== */

.contenedor        { width: min(100% - 2.5rem, var(--ancho-ancho)); margin-inline: auto; }
.contenedor--medio { width: min(100% - 2.5rem, var(--ancho-medio)); margin-inline: auto; }
.contenedor--texto { width: min(100% - 2.5rem, var(--ancho-texto)); margin-inline: auto; }

.seccion { padding-block: var(--e-6); }
.seccion--compacta { padding-block: var(--e-5); }
.seccion--fondo { background-color: var(--papel-alto); }

/* Cenefa de azulejo sevillano. SVG en línea: nítido a cualquier resolución
   y sin una sola petición extra al servidor. */
.cenefa {
  height: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' fill='%23FBF8F1'/%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20 Z' fill='none' stroke='%231F4E79' stroke-width='2'/%3E%3Cpath d='M20 11 L29 20 L20 29 L11 20 Z' fill='%231F4E79'/%3E%3Ccircle cx='20' cy='20' r='3' fill='%23FBF8F1'/%3E%3Cpath d='M0 0 L6 6 M40 0 L34 6 M0 40 L6 34 M40 40 L34 34' stroke='%238C1D18' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: auto 34px;
  border-block: 1px solid var(--borde);
}

.separador {
  border: 0;
  height: 1px;
  background-color: var(--borde);
  margin-block: var(--e-5);
}

/* Filete corto que acompaña a los títulos de sección. */
.filete { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-4); }
.filete::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--borde-fuerte), transparent);
}

/* ==========================================================================
   05 · CABECERA Y NAVEGACIÓN
   ========================================================================== */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--papel);
  border-bottom: 1px solid var(--borde);
}

.cabecera__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  padding-block: var(--e-3);
}

.marca { display: flex; flex-direction: column; text-decoration: none; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca__nombre {
  font-family: var(--letra-titulo);
  font-size: var(--t-1);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "WONK" 1, "opsz" 40;
}
.marca__desde {
  margin-top: 0.3em;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--burdeos);
}

/* Sin menú hamburguesa, a propósito.
   Con cinco enlaces caben siempre; un botón que despliega es un obstáculo
   de más para quien usa lector de pantalla, y en móvil el desplegable
   es de los patrones que más problemas dan a personas mayores. */
.nav__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__lista li { margin-bottom: 0; }

.nav__enlace {
  display: flex;
  align-items: center;
  /* 48px de alto mínimo: el objetivo táctil que recomienda WCAG 2.2. */
  min-height: 48px;
  padding-inline: 0.35rem;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.nav__enlace:hover { color: var(--burdeos); border-bottom-color: var(--borde-fuerte); }

/* La página actual se marca con color Y con un filete: nunca solo con color,
   porque quien no distingue el burdeos no vería ninguna diferencia. */
.nav__enlace[aria-current="page"] {
  color: var(--burdeos);
  border-bottom-color: var(--burdeos);
}

@media (max-width: 46rem) {
  .cabecera { position: static; }
  .cabecera__interior { justify-content: center; text-align: center; }
  .marca { align-items: center; }
  .nav__lista { justify-content: center; }
}

/* ==========================================================================
   06 · BOTONES Y ENLACES DE ACCIÓN
   ========================================================================== */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.7em 1.5em;
  border: 2px solid transparent;
  border-radius: var(--radio);
  font-family: var(--letra-texto);
  font-size: var(--t-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva),
              color var(--dur-corta) var(--curva),
              transform var(--dur-corta) var(--curva);
}

.boton--principal {
  background-color: var(--burdeos);
  border-color: var(--burdeos);
  color: var(--sobre-acento);
}
.boton--principal:hover {
  background-color: var(--burdeos-fuerte);
  border-color: var(--burdeos-fuerte);
  color: var(--sobre-acento);
}

.boton--secundario {
  background-color: transparent;
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}
.boton--secundario:hover {
  border-color: var(--tinta);
  background-color: var(--papel-hundido);
  color: var(--tinta);
}

.boton:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .boton:active { transform: none; } }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* Icono. Usa currentColor para heredar siempre el contraste del contenedor. */
.icono {
  width: 1.15em; height: 1.15em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.icono--relleno { fill: currentColor; stroke: none; }

/* ==========================================================================
   07 · MIGAS DE PAN
   ========================================================================== */

.migas { padding-block: var(--e-3) 0; font-size: var(--t--1); }
.migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--tinta-suave);
}
.migas__lista li { display: flex; align-items: center; gap: 0.5em; margin-bottom: 0; }
.migas__lista li + li::before { content: "›"; color: var(--borde-fuerte); font-size: 1.15em; }
.migas a { color: var(--tinta-suave); }
.migas a:hover { color: var(--burdeos); }
.migas [aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* ==========================================================================
   08 · PORTADA (HERO)
   ========================================================================== */

.portada { padding-block: var(--e-6) var(--e-5); }

.portada__rejilla { display: grid; gap: var(--e-5); align-items: center; }
@media (min-width: 60rem) {
  .portada__rejilla { grid-template-columns: 1.05fr 0.95fr; gap: var(--e-6); }
}

.portada__titulo {
  font-size: var(--t-5);
  margin-bottom: var(--e-3);
  font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 144;
}

.portada__anio {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  margin-top: var(--e-3);
  font-family: var(--letra-titulo);
  font-size: var(--t-1);
  font-weight: 700;
  color: var(--burdeos);
}
.portada__contador { font-size: var(--t-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   09 · TARJETAS Y REJILLAS
   ========================================================================== */

.rejilla { display: grid; gap: var(--e-4); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-4);
  background-color: var(--papel-alto);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
}
.tarjeta h3 { margin-top: 0; }
.tarjeta p:last-child { margin-bottom: 0; }

/* Tarjeta enlazada entera. El enlace real sigue siendo el título, así el
   lector de pantalla anuncia un texto con sentido y no "enlace, tarjeta". */
.tarjeta--enlace {
  position: relative;
  transition: border-color var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}
.tarjeta--enlace:hover { border-color: var(--borde-fuerte); }
.tarjeta--enlace a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tarjeta--enlace:focus-within { outline: 3px solid var(--burdeos); outline-offset: 3px; }
.tarjeta--enlace a:focus-visible { outline: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tarjeta--enlace:hover { transform: translateY(-3px); }
}

/* Dato suelto destacado: horario, dirección, teléfono. */
.dato { display: flex; gap: var(--e-3); align-items: flex-start; }
.dato + .dato { margin-top: var(--e-3); }
.dato__icono { color: var(--burdeos); flex: none; margin-top: 0.25em; }
.dato__titulo { font-weight: 700; margin: 0 0 0.15em; }
.dato p { margin: 0; }

/* ==========================================================================
   10 · LA CARTA
   ========================================================================== */

/* La carta va en HTML de verdad, no en un PDF ni en una foto del cartel.
   Es el error más repetido en las webs de restaurantes y deja fuera a
   cualquiera que use lector de pantalla, y a quien necesite ampliar el texto. */

.carta-seccion { margin-bottom: var(--e-6); }
.carta-seccion__titulo { margin-top: 0; }

.platos { list-style: none; margin: 0; padding: 0; }

.plato {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25em var(--e-3);
  align-items: baseline;
  padding-block: var(--e-3);
  border-bottom: 1px solid var(--borde);
  margin-bottom: 0;
}
.plato:last-child { border-bottom: 0; }

.plato__nombre {
  margin: 0;
  font-family: var(--letra-titulo);
  font-size: var(--t-1);
  font-weight: 600;
  line-height: 1.25;
}
.plato__precio {
  font-family: var(--letra-titulo);
  font-size: var(--t-1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--burdeos);
  white-space: nowrap;
}
.plato__descripcion {
  grid-column: 1 / -1;
  margin: 0;
  max-width: var(--ancho-texto);
  color: var(--tinta-suave);
  font-size: var(--t--1);
}
.plato__alergenos {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: var(--e-1);
  list-style: none;
  padding: 0;
}
.plato__alergenos li { margin-bottom: 0; }

/* Alérgeno: icono + texto SIEMPRE juntos. Jamás un punto de color a secas,
   porque quien tiene daltonismo no recibiría ninguna información. */
.alergeno {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0.6em 0.2em;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background-color: var(--papel);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.alergeno__simbolo { font-size: 1em; }

.plato--destacado .plato__nombre::after {
  content: "De la casa";
  display: inline-block;
  margin-left: 0.7em;
  padding: 0.1em 0.6em 0.15em;
  border-radius: 999px;
  background-color: var(--burdeos);
  color: var(--sobre-acento);
  font-family: var(--letra-texto);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Filtros de la carta. Sin JavaScript no aparecen y se ve la carta entera:
   nunca se esconde contenido que el usuario no pueda recuperar. */
.filtros { display: none; }
.filtros[data-activo] { display: block; margin-bottom: var(--e-5); }
.filtros__titulo { margin: 0 0 var(--e-2); font-size: var(--t--1); font-weight: 700; }
.filtros__grupo { display: flex; flex-wrap: wrap; gap: var(--e-2); }

.filtro {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.4em 1em;
  border: 2px solid var(--borde-fuerte);
  border-radius: 999px;
  background-color: transparent;
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--t--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva),
              border-color var(--dur-corta) var(--curva),
              color var(--dur-corta) var(--curva);
}
.filtro:hover { border-color: var(--tinta); }

/* Filtro activo: color + marca de verificación + aria-pressed.
   Tres señales distintas para tres formas distintas de percibir. */
.filtro[aria-pressed="true"] {
  background-color: var(--burdeos);
  border-color: var(--burdeos);
  color: var(--sobre-acento);
}
.filtro__marca { width: 1em; opacity: 0; }
.filtro[aria-pressed="true"] .filtro__marca { opacity: 1; }

.filtros__resultado {
  margin-top: var(--e-3);
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--tinta-suave);
}

/* ==========================================================================
   11 · HISTORIA Y LÍNEA DEL TIEMPO
   ========================================================================== */

.cronologia { position: relative; list-style: none; margin: 0; padding: 0; }

.cronologia::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--burdeos), var(--borde-fuerte));
}

.hito { position: relative; padding-left: 2.75rem; padding-bottom: var(--e-5); margin-bottom: 0; }
.hito:last-child { padding-bottom: 0; }

.hito::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background-color: var(--papel);
  border: 3px solid var(--burdeos);
}

.hito__anio {
  display: block;
  margin-bottom: var(--e-2);
  font-family: var(--letra-titulo);
  font-size: var(--t-2);
  font-weight: 800;
  line-height: 1;
  color: var(--burdeos);
  font-variant-numeric: tabular-nums;
}
.hito__titulo { margin: 0 0 var(--e-2); font-size: var(--t-1); }
.hito p:last-child { margin-bottom: 0; }

/* ==========================================================================
   12 · AVISOS Y MARCADORES DE CONTENIDO PENDIENTE
   ========================================================================== */

.aviso {
  display: flex;
  gap: var(--e-3);
  margin-block: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde-fuerte);
  border-left: 4px solid var(--azulejo);
  border-radius: var(--radio);
  background-color: var(--papel-alto);
}
.aviso__icono { color: var(--azulejo); flex: none; margin-top: 0.3em; }
.aviso p { margin: 0; }
.aviso p + p { margin-top: var(--e-2); }
.aviso--importante { border-left-color: var(--burdeos); }
.aviso--importante .aviso__icono { color: var(--burdeos); }

/* Marcador de dato pendiente de confirmar con el local.
   Deliberadamente visible: así no se publica sin querer con datos falsos. */
.pendiente {
  padding: 0.05em 0.45em;
  border: 1px dashed #B38600;
  border-radius: var(--radio);
  background-color: #FFF3CD;
  color: #5C4400;
  font-weight: 700;
  font-size: 0.9em;
  white-space: nowrap;
}
:root[data-tema="oscuro"] .pendiente { background-color: #3D3208; color: #FFE28A; border-color: #8A6D00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .pendiente { background-color: #3D3208; color: #FFE28A; border-color: #8A6D00; }
}

/* Indicador de abierto / cerrado. Punto de color + palabra: nunca solo el punto. */
.estado { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; }
.estado__punto { width: 0.7em; height: 0.7em; border-radius: 50%; flex: none; }
.estado--abierto .estado__punto { background-color: #1B7A3D; box-shadow: 0 0 0 3px rgb(27 122 61 / 0.18); }
.estado--cerrado .estado__punto { background-color: var(--tinta-suave); }
:root[data-tema="oscuro"] .estado--abierto .estado__punto { background-color: #5FD98A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .estado--abierto .estado__punto { background-color: #5FD98A; }
}

/* Tabla de horarios. */
.horario { width: 100%; border-collapse: collapse; margin-block: var(--e-3); }
.horario caption { text-align: left; font-weight: 700; margin-bottom: var(--e-2); }
.horario th, .horario td { text-align: left; padding: 0.55em 0.75em 0.55em 0; border-bottom: 1px solid var(--borde); }
.horario th { font-weight: 600; }
.horario td { font-variant-numeric: tabular-nums; }
.horario tr[data-hoy] { background-color: var(--papel-hundido); }
.horario tr[data-hoy] th::after { content: " · hoy"; color: var(--burdeos); font-weight: 700; }

/* ==========================================================================
   13 · IMÁGENES Y MARCADORES DE FOTO
   ========================================================================== */

.figura { margin: 0; }
.figura img { width: 100%; border: 1px solid var(--borde); border-radius: var(--radio-grande); }
.figura figcaption { margin-top: var(--e-2); font-size: var(--t--1); color: var(--tinta-suave); }

/* Marcador de foto pendiente. Reserva el hueco con la proporción exacta,
   así al meter la foto real la maquetación no da ningún salto. */
.marcador-foto {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--proporcion, 3 / 2);
  padding: var(--e-3);
  border: 2px dashed var(--borde-fuerte);
  border-radius: var(--radio-grande);
  background-color: var(--papel-hundido);
  background-image: repeating-linear-gradient(45deg,
      transparent 0 12px,
      rgb(var(--sombra) / 0.045) 12px 24px);
  overflow: hidden;
  text-align: center;
  color: var(--tinta-suave);
}
.marcador-foto__etiqueta { margin: 0 0 0.35em; font-weight: 700; font-size: var(--t--1); color: var(--tinta); }
.marcador-foto__medida { margin: 0; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.marcador-foto--alto     { --proporcion: 4 / 5; }
.marcador-foto--ancho    { --proporcion: 16 / 9; }
.marcador-foto--cuadrado { --proporcion: 1 / 1; }

/* ==========================================================================
   14 · PIE DE PÁGINA
   ========================================================================== */

.pie {
  margin-top: var(--e-6);
  padding-block: var(--e-5) var(--e-4);
  background-color: var(--papel-alto);
  border-top: 1px solid var(--borde);
}
.pie__rejilla { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.pie h2 {
  margin: 0 0 var(--e-2);
  font-family: var(--letra-texto);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: var(--e-1); }
.pie a { color: var(--tinta); text-decoration-color: var(--borde-fuerte); }
.pie a:hover { color: var(--burdeos); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
  font-size: var(--t--1);
  color: var(--tinta-suave);
}
.pie__legal p { margin: 0; max-width: none; }

.redes { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.redes a { display: inline-flex; align-items: center; gap: 0.45em; min-height: 48px; }

/* ==========================================================================
   15 · ANIMACIÓN DE APARICIÓN
   ========================================================================== */

/* El estado de partida solo se aplica si hay JavaScript (la clase js va en
   <html>) y si el usuario no ha pedido reducir el movimiento. Sin esas dos
   condiciones el contenido simplemente está ahí, visible desde el principio. */
.js .aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-larga) var(--curva), transform var(--dur-larga) var(--curva);
}
.js .aparece.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .aparece { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   16 · BARRA DE HERRAMIENTAS DE ACCESIBILIDAD
   ========================================================================== */

/* Muchas personas mayores no saben que el navegador tiene zoom. Un control
   de tamaño visible en la propia página resuelve eso sin que tengan que
   aprender nada. Se inyecta por JS y no aparece si no hay JS. */
.herramientas {
  background-color: var(--papel-hundido);
  border-bottom: 1px solid var(--borde);
  font-size: var(--t--1);
}
.herramientas__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e-2) var(--e-3);
  padding-block: 0.35rem;
}
.herramientas__grupo { display: flex; align-items: center; gap: var(--e-2); }
.herramientas__etiqueta { font-weight: 600; color: var(--tinta-suave); }

.herramientas__boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-width: 44px;
  min-height: 44px;
  padding: 0.2em 0.7em;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background-color: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--dur-corta) var(--curva), border-color var(--dur-corta) var(--curva);
}
.herramientas__boton:hover { border-color: var(--tinta); background-color: var(--papel-alto); }
.herramientas__boton[aria-pressed="true"] { background-color: var(--tinta); color: var(--papel); border-color: var(--tinta); }

@media (max-width: 46rem) {
  .herramientas__interior { justify-content: center; }
}

/* ==========================================================================
   17 · UTILIDADES
   --------------------------------------------------------------------------
   Pocas y con nombre propio. Sirven para no dejar estilos sueltos en el HTML,
   que es lo que convierte una hoja de estilos en un sitio donde nadie
   se atreve a tocar nada.
   ========================================================================== */

/* Un título dentro de un filete no trae margen propio: lo pone el filete. */
.filete > :where(h1, h2, h3) { margin: 0; }

/* Primer elemento de una columna: el hueco ya lo pone la rejilla. */
.sin-margen-arriba { margin-top: 0; }

.lista-limpia { list-style: none; padding: 0; }
.lista-limpia > li { margin-bottom: 0; }

.grupo-botones--centrado { justify-content: center; }

.nota      { margin-top: var(--e-3); }
.separado  { margin-top: var(--e-5); }

/* Marca de confirmación grande de la página de gracias. */
.marca-exito {
  display: block;
  margin: 0 auto var(--e-3);
  color: var(--burdeos);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   18 · IMPRESIÓN
   ========================================================================== */

/* Que la carta se pueda imprimir en A4 y quede legible es más útil de lo que
   parece: el propio bar la imprime para la mesa. */
@media print {
  .herramientas, .cabecera nav, .migas, .pie, .cenefa,
  .grupo-botones, .filtros, .salto-contenido, .marcador-foto { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .seccion { padding-block: 0.5cm; }
  .plato { break-inside: avoid; }
  .carta-seccion { break-inside: avoid-page; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}