/* ════════════════════════════════════════════════════════════════════
   CANTINA TAPACHULA — sistema visual
   La composición, las medidas y los espacios reproducen la estructura de
   la web de referencia (La Única Madrid) según la auditoría del 12/9/2026.
   La identidad —logo, fotografías, tipografía de titulares y detalles— es
   de Tapachula.

   Medidas de referencia respetadas:
     · contenedor 1200px, margen lateral 120px
     · barra de navegación 100px; enlaces 20px/600
     · portada 900px de alto
     · texto de presentación 383px de ancho, botones 210×57 y 160×57
     · franja de valores en tres columnas de 380px
     · pie ~816px con los datos alineados a la izquierda
   ════════════════════════════════════════════════════════════════════ */

/* ── Tipografías, servidas desde la propia web ──
   Antes venían de Google Fonts: dos conexiones más antes de pintar texto y la
   IP de cada visitante enviada a Google (por eso la política de cookies las
   nombraba). Solo el juego latino, que cubre el castellano (ñ, tildes, ¿¡, €).
   Albert Sans es variable: un único archivo para 400–700. Licencia SIL OFL. */
@font-face {
  font-family: 'Albert Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fuentes/albert-sans.woff2') format('woff2');
}
@font-face {
  font-family: 'Almendra'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fuentes/almendra-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Almendra'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fuentes/almendra-700.woff2') format('woff2');
}

/* ── Reinicio ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, iframe { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
ul { list-style: none; }
/* `hidden` tiene que ganar siempre: sin esto, un display propio (flex, grid)
   deja a la vista elementos que el JavaScript ha ocultado. */
[hidden] { display: none !important; }

/* ── Tokens ── */
:root {
  /* La referencia trabaja sobre blanco y gris muy claro, con tinta parda
     casi negra. El oro de Tapachula entra solo como detalle. */
  --blanco:    #FFFFFF;
  --claro:     #F2F2F2;   /* gris de fondo de las secciones */
  --tinta:     #1F1A15;   /* titulares y botones */
  --gris:      #6B6B6B;   /* cuerpo de texto (#878787 no llegaba al contraste mínimo 4,5:1) */
  --gris-l:    #D8D8D8;   /* líneas */
  --pie:       #141312;   /* pie casi negro */
  --pie-2:     #0C0B0A;   /* barra de copyright */
  --oro:       #C59D5F;   /* detalle de marca, contenido */
  --oro-claro: #8C6A2C;   /* el oro sobre fondo claro: cifras y estrellas (≥4,5:1 sobre blanco) */

  --serif: 'Almendra', 'Baskerville', 'Libre Baskerville', 'Times New Roman', serif;
  --sans:  'Albert Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --barra-h: 100px;
  --contenedor: 1200px;
  --lateral: 120px;

  /* Cámara del botón «Ver foto», en la propia hoja para no pedir otro archivo */
  --icono-camara: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.4 4h5.2l1.1 2H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4.3l1.1-2Zm2.6 4.8A4.7 4.7 0 1 0 12 18.2a4.7 4.7 0 0 0 0-9.4Zm0 2a2.7 2.7 0 1 1 0 5.4 2.7 2.7 0 0 1 0-5.4Z'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 26px;
  color: var(--gris);
  background: var(--blanco);
  overflow-x: clip;
}
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Contenedor ── */
.contenedor { max-width: var(--contenedor); margin: 0 auto; padding: 0 20px; }

/* ════ BARRA SUPERIOR ════
   Transparente y superpuesta a la portada; en las páginas interiores va
   sobre su propia cabecera fotográfica. */
.barra {
  position: absolute; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--barra-h);
  display: flex; align-items: center;
  padding: 0 45px;
}
.barra-logo { flex-shrink: 0; margin-right: 30px; }
.barra-logo img { height: 90px; width: auto; }

.barra-nav { display: flex; align-items: center; }
.barra-nav a {
  font-size: 20px; font-weight: 600; line-height: var(--barra-h);
  color: var(--blanco);
  padding: 0 17px;
  position: relative;
  transition: opacity .25s;
}
.barra-nav a:hover { opacity: .75; }
.barra-nav a.activo::after {
  content: ''; position: absolute; left: 17px; right: 17px; bottom: 34px;
  height: 2px; background: var(--blanco);
}

.barra-redes { margin-left: auto; display: flex; gap: 14px; }
.barra-redes a {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  color: var(--blanco);
  transition: background .25s, border-color .25s;
}
.barra-redes svg { width: 16px; height: 16px; }
/* Cada red con su color de marca y el símbolo en blanco: sobre la foto de
   portada se reconocen de un vistazo. El hover aclara en vez de pintar un
   fondo claro, que borraría el color. */
.barra-redes a[aria-label="Instagram"] {
  background: radial-gradient(circle at 28% 108%, #FEDA75 0%, #FA7E1E 24%, #D62976 52%, #962FBF 76%, #4F5BD5 100%);
  border-color: transparent; color: var(--blanco);
}
.barra-redes a { box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.barra-redes a:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Hamburguesa: solo en tablet y móvil */
.barra-menu { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.barra-menu span { display: block; width: 22px; height: 2px; background: var(--tinta); }

/* Panel blanco desplegable, como la referencia (no es una capa negra) */
.menu-movil {
  display: none;
  position: absolute; top: var(--barra-h); left: 15px; right: 15px; z-index: 95;
  background: var(--blanco);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.menu-movil.abierto { display: block; }
.menu-movil a {
  display: block;
  padding: 15px 18px;
  font-size: 15px; color: var(--tinta);
  border-bottom: 1px solid var(--gris-l);
}
.menu-movil a:last-child { border-bottom: none; }
.menu-movil a.activo { font-weight: 600; }

/* ════ BOTONES ════
   Rectangulares y oscuros en el contenido; negro en la portada. Solo el
   botón fijo de móvil tiene forma de píldora. */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  height: 57px; padding: 0 45px;
  background: var(--tinta); color: var(--blanco);
  font-size: 16px; font-weight: 600; line-height: 57px;
  border-radius: 999px;   /* píldora: petición expresa del cliente (14/9/2026) */
  transition: background .25s;
}
.boton:hover { background: #2E2721; }
.boton--claro {
  background: transparent; color: var(--tinta);
  border: 1px solid var(--tinta);
}
.boton--claro:hover { background: var(--tinta); color: var(--blanco); }
.boton--portada {
  height: 50px; padding: 0 20px; min-width: 138px;
  background: #000; font-size: 20px; font-weight: 500; line-height: 50px;
}

/* ════ PORTADA (hero audiovisual) ════ */
/* El vídeo ocupa la pantalla entera: antes se quedaba en 560 px y en un móvil
   dejaba casi 400 px de hueco por debajo. svh y no vh porque en el móvil la
   barra del navegador cambia el vh al desplazarse y el hero pegaría un salto. */
.portada {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 430px;
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  background: #1a1613;
}
.portada-media { position: absolute; inset: 0; }
.portada-media img,
.portada-media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--foco, 50% 42%);
}
.portada-media video { position: absolute; inset: 0; }
.portada.sin-video .portada-video { display: none; }
.portada-velo {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,10,8,.42), rgba(12,10,8,.16) 38%, rgba(12,10,8,.52) 78%, rgba(12,10,8,.72));
}
/* Pie de la portada fundido a negro puro: la sección del taco que viene
   debajo es negra y los ingredientes entran por su borde superior, así
   parecen caer desde la portada en vez de aparecer tras una línea. Va por
   encima del velo y por debajo del titular (z-index 2). */
.portada::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  height: 22%; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.55) 55%, #000);
}
/* Titular, botón y píldora van casi al pie del vídeo, no en el centro. */
.portada-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 34px;
  text-align: center;
  padding: 0 24px clamp(26px, 8vh, 92px);
  /* En iPhone, hueco extra para la barra inferior del navegador. */
  padding: 0 24px calc(clamp(26px, 8svh, 92px) + env(safe-area-inset-bottom, 0px));
}
.portada-marca { width: min(500px, 76vw); height: auto; }
/* La portada va con texto, no con el emblema: el logo ya está en la barra */
.portada-titulo {
  font-family: var(--serif);
  font-size: clamp(42px, 6.4vw, 92px);
  font-weight: 700; line-height: 1.06;
  color: var(--blanco);
  letter-spacing: .5px;
  text-shadow: 0 4px 26px rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.35);
  max-width: 16ch;
}

/* ════ PRESENTACIÓN ════
   Foto grande a la izquierda; marca, título, tres párrafos y dos botones
   a la derecha. En móvil: imagen arriba y texto debajo. */
.presenta { background: var(--claro); padding: 100px 0 110px; }
.presenta-grid {
  display: grid; grid-template-columns: 688px minmax(0, 383px);
  gap: 79px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.presenta-foto img { width: 100%; height: 462px; object-fit: cover; }
.presenta-marca {
  font-family: var(--serif); font-size: 50px; font-weight: 700;
  line-height: 50px; color: var(--tinta); letter-spacing: .5px;
  margin-bottom: 50px;
}
.presenta-titulo {
  font-family: var(--serif); font-size: 50px; font-weight: 700;
  line-height: 50px; color: var(--tinta);
  margin-bottom: 38px;
}
.presenta-texto p { font-size: 15px; line-height: 25px; color: var(--gris); margin-bottom: 25px; }
.presenta-botones { display: flex; flex-direction: column; align-items: flex-start; gap: 33px; margin-top: 33px; }

/* ════ FRANJA DE VALORES ════
   Tres columnas sobre una fotografía a todo el ancho. */
.valores {
  position: relative; min-height: 520px;
  display: flex; align-items: center;
  background: #2b2622;
  overflow: hidden;
}
.valores-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.valores-velo { position: absolute; inset: 0; background: rgba(16,13,11,.34); }
.valores-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, 380px);
  gap: 30px; justify-content: center;
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 60px 20px;
}
.valor-t {
  font-family: var(--serif); font-size: 37px; font-weight: 700; line-height: 33px;
  color: var(--blanco);
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.valor-t span { display: block; margin-top: 15px; }

/* ════ RESEÑAS ════
   Encaje mínimo dentro de la presentación/identidad, antes de la ubicación.
   Texto y estrellas; sin fotos. */
.resenas { background: var(--blanco); padding: 96px 0; }
.resenas-cabeza { text-align: center; margin-bottom: 46px; }
.resenas-nota {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--serif); font-size: 50px; font-weight: 700; color: var(--tinta);
  line-height: 1;
}
.resenas-estrellas { color: var(--oro-claro); font-size: 22px; letter-spacing: 3px; }
.resenas-fuente { display: block; margin-top: 12px; font-size: 15px; color: var(--gris); }
.resenas-fuente a { color: var(--tinta); border-bottom: 1px solid var(--gris-l); }
.resenas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.resena { border-top: 1px solid var(--gris-l); padding-top: 24px; }
.resena-estrellas { color: var(--oro-claro); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.resena p { font-size: 15px; line-height: 26px; color: var(--gris); }
.resena footer {
  margin-top: 16px; font-size: 13px; color: var(--tinta); font-weight: 600;
  background: none; padding: 0;
}
.resena footer span { font-weight: 400; color: var(--gris); margin-left: 8px; }

/* ════ UBICACIÓN ════ */
.ubicacion { background: var(--claro); padding: 110px 0; }
.ubicacion-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.ubicacion-mapa { min-height: 430px; }
.ubicacion-mapa iframe { width: 100%; height: 100%; min-height: 430px; border: 0; filter: grayscale(10%); }
.ubicacion-titulo {
  font-family: var(--serif); font-size: 50px; font-weight: 700; line-height: 50px;
  color: var(--tinta); margin-bottom: 30px;
}
.ubicacion-datos p { font-size: 15px; line-height: 26px; margin-bottom: 18px; }
.ubicacion-datos strong { color: var(--tinta); font-weight: 600; }
.ubicacion-acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
/* Rótulo de los horarios dentro de «Dónde estamos» y de Reservas */
.ubicacion-sub {
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--tinta); margin: 30px 0 8px;
}

/* ════ CABECERA DE PÁGINAS INTERIORES ════ */
.cabecera {
  position: relative; height: 520px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #1a1613;
}
.cabecera img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cabecera-velo { position: absolute; inset: 0; background: rgba(14,11,9,.45); }
.cabecera h1 {
  position: relative; z-index: 2;
  font-family: var(--serif); font-size: 50px; font-weight: 700; line-height: 69px;
  color: var(--blanco); text-align: center; padding: 0 24px;
  /* Reserva de espacio para que el logo de la barra no se solape con el
     título en móvil, como sí ocurre en la referencia. */
  margin-top: 40px;
}

/* ════ PIE ════ */
.pie { background: var(--pie); color: rgba(255,255,255,.62); padding: 96px 0 0; }
.pie-grid { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.pie-dato {
  display: flex; align-items: flex-start; gap: 14px;
  font-family: var(--serif); font-size: 12px; line-height: 15.6px;
  letter-spacing: .6px; text-transform: uppercase;
  margin-bottom: 18px; max-width: 420px;
}
.pie-dato svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,.45); }
.pie-dato a:hover { color: var(--blanco); }
.pie-enlaces {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 46px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 12px; letter-spacing: .4px;
}
.pie-enlaces a:hover { color: var(--blanco); }
.pie-copy {
  margin-top: 56px; padding: 22px 20px;
  background: var(--pie-2);
  text-align: center; font-size: 11px; font-weight: 500; letter-spacing: .4px;
  color: rgba(255,255,255,.5);
}

/* ════ BOTÓN FIJO DE RESERVA ════ */
.reservar-fijo { display: none; }

/* ════ ADAPTACIÓN ════
   La referencia cambia en 1000, 768, 600 y 480. Se respetan esos saltos. */
@media (max-width: 1200px) {
  .presenta-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 46px; }
  .valores-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .barra { padding: 0 24px; }
  .barra-nav a { font-size: 16px; padding: 0 11px; }
  .presenta { padding: 76px 0 84px; }
  .presenta-foto img { height: 380px; }
}
@media (max-width: 768px) {
  :root { --barra-h: 98px; }
  .barra { justify-content: center; padding: 0 16px; }
  .barra-logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
  .barra-logo img { height: 88px; }
  .barra-nav, .barra-redes { display: none; }
  .barra-menu { display: flex; margin-right: auto; }
  .barra--oscura .barra-menu span { background: var(--blanco); }

  .portada-marca { width: min(300px, 68vw); }
  .portada-inner { gap: 24px; }
  .boton--portada { height: 32px; min-width: 80px; padding: 0 14px; font-size: 11px; line-height: 32px; }

  .presenta-grid { grid-template-columns: 1fr; gap: 30px; }
  .presenta-foto img { height: 300px; }
  .presenta-marca, .presenta-titulo { font-size: 40px; line-height: 44px; }
  .presenta-texto p { font-size: 16px; line-height: 27px; }
  .presenta-botones { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .boton { height: 56px; padding: 0 26px; font-size: 15px; line-height: 56px; }

  .valores-grid { grid-template-columns: 1fr; gap: 40px; padding: 64px 24px; }
  .valores { min-height: 0; }

  .resenas-grid { grid-template-columns: 1fr; gap: 26px; }
  .ubicacion-grid { grid-template-columns: 1fr; gap: 34px; }
  .ubicacion-mapa, .ubicacion-mapa iframe { min-height: 320px; }
  .cabecera { height: 380px; }
  .cabecera h1 { font-size: 36px; line-height: 44px; margin-top: 30px; }

  /* Botón fijo de reserva: solo hasta 768px, como en la referencia */
  .reservar-fijo {
    display: inline-flex; align-items: center; justify-content: center;
    position: fixed; right: 18px; bottom: 24px; z-index: 85;
    height: 54px; min-width: 117px; padding: 14px 24px;
    background: #000; color: var(--blanco);
    font-size: 16px; font-weight: 700; border-radius: 40px;
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
  }
}
@media (max-width: 600px) {
  .presenta { padding: 60px 0 70px; }
  .presenta-marca, .presenta-titulo { font-size: 36px; line-height: 40px; }
  .ubicacion { padding: 70px 0; }
  .resenas { padding: 70px 0; }
  .pie { padding-top: 70px; }
}
@media (max-width: 480px) {
  .presenta-botones .boton { flex: 1 1 100%; }
}

/* ════ HORARIOS (pie, contacto, reservas) ════ */
.horario-fila {
  display: flex; justify-content: space-between; gap: 20px;
  font-family: var(--serif); font-size: 12px; line-height: 15.6px;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 7px 0; max-width: 420px;
}
.reservas-horarios { max-width: 430px; margin: 0 auto; text-align: left; }
.ubicacion .horario-fila, .contacto-datos .horario-fila,
.reservas-horarios .horario-fila {
  font-family: var(--sans); font-size: 14px; line-height: 22px;
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--gris-l); max-width: none;
}
.ubicacion .horario-fila span:last-child,
.contacto-datos .horario-fila span:last-child,
.reservas-horarios .horario-fila span:last-child { color: var(--tinta); }

/* ════ NUESTRA HISTORIA: cronología alterna ════
   Dos columnas estrechas escalonadas en escritorio (la segunda baja ~200px),
   lectura secuencial en móvil. */
.cronologia { background: var(--blanco); padding: 110px 0; }
.cronologia-grid {
  display: grid; grid-template-columns: 347px 347px;
  justify-content: center; column-gap: 48px;
}
.cronologia-col:nth-child(2) { margin-top: 200px; }
.hito { border-left: 1px solid var(--gris-l); padding: 0 0 70px 28px; position: relative; }
.hito::before {
  content: ''; position: absolute; left: -4px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--tinta);
}
.hito-anio {
  font-family: var(--serif); font-size: 37px; font-weight: 700; line-height: 33px;
  color: var(--tinta); margin-bottom: 18px;
}
.hito img { width: 100%; height: 220px; object-fit: cover; margin-bottom: 18px; }
.hito p { font-size: 15px; line-height: 25px; }
.hito--pendiente .hito-anio { color: var(--gris); }
.hito--pendiente { opacity: .85; }
.pendiente {
  display: inline-block; margin-top: 10px;
  font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gris); border: 1px dashed var(--gris-l); padding: 4px 10px;
}

/* ════ Sobre nosotros (página de historia) ════
   Foto del comedor y el texto de la familia, en dos columnas; en el teléfono,
   la foto encima. Sustituye a la cronología (sus reglas siguen más arriba
   por si vuelve, pero ya no se usan). */
.nosotros { background: var(--blanco); padding: 92px 0; }
.nosotros-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.nosotros-foto { margin: 0; }
.nosotros-foto img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.nosotros-texto h2 {
  font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 44px;
  color: var(--tinta); margin-bottom: 26px; text-wrap: balance;
}
.nosotros-texto p { margin-bottom: 18px; }
.nosotros-texto p:last-child { margin-bottom: 0; }
@media (max-width: 980px) {
  .nosotros-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 768px) {
  .nosotros { padding: 56px 0; }
  .nosotros-texto h2 { font-size: 32px; line-height: 36px; }
}

/* ════ Ventanas de flores (página de historia) ════
   Un solo fondo de flores, quieto detrás de la página, que se ve por tres
   «ventanas»: la cabecera, la franja fina entre el texto y el vídeo, y el pie.
   Cada ventana (.ventana) lleva dentro una capa (.ventana-capa) que mide una
   pantalla y se desplaza exactamente lo contrario que la ventana, así que
   respecto a la pantalla no se mueve. Como las tres capas usan la misma trama,
   el mismo tamaño y la misma posición respecto a la pantalla, las flores de
   una ventana continúan en la siguiente: parece un único fondo.
   · `background-attachment: fixed` haría lo mismo, pero el iPhone lo ignora.
   · Donde el navegador sabe atar animaciones al scroll (Chrome, Safari 26) lo
     hace él, en el compositor; donde no, app.js. app.js también escribe
     `--alto` (la altura real de cada ventana) al cargar y al cambiar de tamaño.
   · `overflow: clip` y no `hidden`: hidden la convertiría en contenedor de
     scroll y la línea de tiempo dejaría de seguir la página. Si el anfitrión
     ya lleva `overflow: hidden` (cabecera, pie) da igual: la línea de tiempo
     la define el propio anfitrión respecto a la página.
   · No se apaga con «reducir movimiento» (ver azulejos). */
.ventana { position: relative; overflow: clip; view-timeline-name: --ventana; }
.ventana-capa {
  position: absolute; left: 0; right: 0; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  background-color: #060505;
  background-image: url('img/patrones/flores-bordado.webp');
  background-size: 1670px 260px; background-repeat: repeat; background-position: center top;
  will-change: transform; backface-visibility: hidden; pointer-events: none;
}
@keyframes ventana-fija {
  from { transform: translate3d(0, -100vh, 0); transform: translate3d(0, -100svh, 0); }
  to   { transform: translate3d(0, var(--alto, 0px), 0); }
}
@supports (view-timeline-name: --a) {
  .ventana-capa {
    animation-name: ventana-fija;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --ventana;
    animation-range: cover 0% cover 100%;
    animation-duration: auto !important;   /* gana a la regla global de «reducir movimiento» */
  }
}
@media (max-width: 768px) {
  .ventana-capa { background-size: 1100px 171px; }
}
/* La franja fina del medio */
.ventana-flores { --alto: clamp(100px, 12vw, 170px); height: var(--alto); background-color: #060505; }
/* La cabecera: la capa sustituye al fondo propio; velo y título van encima. */
.cabecera--flores.ventana { background-image: none; }
/* El pie: sin las flores difuminadas propias (serían otro fondo); el degradado
   de encima se refuerza un poco para que el texto se lea sobre las flores
   nítidas. */
.pie.ventana::before { display: none; }
.pie.ventana::after { background: linear-gradient(180deg, rgba(8,6,5,.5), rgba(8,6,5,.7)); }

/* ════ Bloque final de identidad (con el espacio de vídeo 2) ════ */
.identidad { background: var(--claro); padding: 110px 0; }
.identidad-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.identidad h2 {
  font-family: var(--serif); font-size: 50px; font-weight: 700; line-height: 50px;
  color: var(--tinta); margin-bottom: 28px;
}
.identidad p { margin-bottom: 20px; }
.video-presenta { position: relative; background: #1a1613; aspect-ratio: 16 / 9; overflow: hidden; }
.video-presenta img, .video-presenta video { width: 100%; height: 100%; object-fit: cover; }
.video-presenta figcaption {
  font-size: 13px; color: var(--gris); margin-top: 12px;
}

/* ════ NUESTRA CARTA: portada breve ════ */
.carta-portada {
  position: relative; min-height: 620px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: #1a1613;
}
/* La foto es vertical: se encuadra algo por debajo del centro para que el
   plato quede a la vista en pantallas apaisadas. */
.carta-portada img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.carta-portada .cabecera-velo { background: rgba(14,11,9,.5); }
.carta-portada-inner { position: relative; z-index: 2; text-align: center; padding: 60px 24px; }
.carta-portada h1 {
  font-family: var(--serif); font-size: 50px; font-weight: 700; line-height: 50px;
  color: var(--blanco); margin-bottom: 40px;
}
.carta-botones { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.carta-botones .boton { background: var(--blanco); color: var(--tinta); min-width: 260px; }
.carta-botones .boton:hover { background: var(--oro); color: var(--tinta); }
.carta-nota { margin-top: 34px; font-size: 13px; color: rgba(255,255,255,.75); }
.carta-nota a { color: var(--blanco); border-bottom: 1px solid rgba(255,255,255,.5); }

/* ════ EVENTOS ════ */
.eventos-panel { background: var(--claro); padding: 96px 0; }
.panel {
  background: rgba(31,26,21,.92); color: rgba(255,255,255,.78);
  border-radius: 10px; padding: 40px; max-width: 900px; margin: 0 auto;
}
.panel > p { margin-bottom: 26px; }
.desplegable { border-top: 1px solid rgba(255,255,255,.14); }
.desplegable:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.desplegable-b {
  width: 100%; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 4px; color: var(--blanco);
  font-family: var(--sans); font-size: 17px; font-weight: 600;
}
.desplegable-b span { font-size: 22px; line-height: 1; }
.desplegable-c { display: none; padding: 0 4px 22px; font-size: 15px; line-height: 26px; }
.desplegable-c.abierto { display: block; }
.desplegable-b[aria-expanded="true"] { color: var(--oro); }

.formulario { background: #0F0E0D; padding: 90px 0; }
.formulario h2 { font-family: var(--serif); font-size: 37px; color: var(--blanco); text-align: center; margin-bottom: 14px; }
.formulario p.intro { text-align: center; color: rgba(255,255,255,.6); margin-bottom: 40px; }
.formulario form { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.formulario label { display: block; color: var(--blanco); font-size: 14px; margin-bottom: 7px; }
.formulario input, .formulario textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid transparent; font-family: var(--sans); font-size: 15px;
}
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.formulario .boton { width: 100%; }
.formulario .aviso { font-size: 12px; color: rgba(255,255,255,.55); line-height: 20px; }

.banner { position: relative; aspect-ratio: 4 / 1; background: #201b17; overflow: hidden; }
.banner img { width: 100%; height: 100%; object-fit: cover; }
.banner-marcador {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  border: 1px dashed rgba(255,255,255,.25);
}

/* ════ RESERVAS ════ */
.reservas-bloque { background: var(--blanco); padding: 110px 0; text-align: center; }
.reservas-bloque h2 { font-family: var(--serif); font-size: 50px; line-height: 50px; color: var(--tinta); margin-bottom: 24px; }
.reservas-tel {
  font-family: var(--serif); font-size: 44px; color: var(--tinta);
  display: inline-block; margin: 18px 0 26px;
}
.reservas-motor { width: 100%; min-height: 700px; border: 0; }
.reservas-nota { max-width: 620px; margin: 30px auto 0; font-size: 14px; }

/* ════ CONTACTO ════ */
.contacto-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: start; }
.contacto-mapa { min-height: 470px; }
.contacto-mapa iframe { width: 100%; height: 100%; min-height: 470px; border: 0; }
.contacto-datos h2 { font-family: var(--serif); font-size: 50px; line-height: 50px; color: var(--tinta); margin-bottom: 30px; }
.contacto-datos p { margin-bottom: 18px; }
.contacto-datos strong { color: var(--tinta); font-weight: 600; }

/* ════ CARTA HTML LARGA (ruta secundaria) ════ */
.carta-html { padding: 70px 0 100px; }
.carta-html h1 { font-family: var(--serif); font-size: 50px; line-height: 50px; color: var(--tinta); margin-bottom: 12px; }
/* ── Menú de secciones ──
   La carta no se sirve entera de entrada: primero se ofrecen las nueve
   categorías en tarjetas y el cliente elige. Lo monta app.js, así que sin
   JavaScript la carta sigue completa y navegable por anclas. */
.carta-menu {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; margin: 26px 0 10px;
}
.carta-tarjeta {
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  background: var(--blanco); border: 1px solid var(--gris-l); border-radius: 10px;
  overflow: hidden; padding: 0;
  box-shadow: 0 6px 18px rgba(60,35,0,.1);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.carta-tarjeta:hover {
  transform: translateY(-3px); border-color: var(--tinta);
  box-shadow: 0 14px 30px rgba(60,35,0,.2);
}
/* Las fotos del menú son verticales: la tarjeta las presenta en 3:4 en vez de
   una franja apaisada, que las recortaba casi enteras. */
.carta-tarjeta-foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--claro); }
.carta-tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; }
.carta-tarjeta-t {
  font-family: var(--serif); font-size: 21px; line-height: 24px; color: var(--tinta);
  padding: 14px 16px 0;
}
.carta-tarjeta-n { font-size: 13px; color: var(--gris); padding: 5px 16px 15px; }

.carta-volver {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 22px 0 0; padding: 9px 16px;
  font-size: 13.5px; font-weight: 600; color: var(--tinta);
  background: rgba(31,26,21,.06); border: 1px solid rgba(31,26,21,.16);
  border-radius: 999px;
  transition: background .2s, border-color .2s;
}
.carta-volver:hover { background: rgba(31,26,21,.14); border-color: var(--tinta); }

@media (max-width: 768px) {
  .carta-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .carta-tarjeta-t { font-size: 17px; line-height: 20px; padding: 11px 12px 0; }
  .carta-tarjeta-n { font-size: 12px; padding: 4px 12px 12px; }
}

/* Índice de la carta convertido en pestañas: dentro de una sección sirve para
   saltar a otra sin volver al menú. Sin JavaScript siguen siendo enlaces de
   anclaje y la carta se ve entera, como antes. */
.carta-indice {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 22px -8px 34px; padding: 12px 8px;
  /* Mismo cristal que el panel: los platos se desenfocan al pasar debajo. */
  background: rgba(255,251,244,.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(31,26,21,.12);
}
.carta-indice a {
  font-size: 13.5px; font-weight: 600; line-height: 1;
  color: var(--tinta); background: rgba(31,26,21,.06);
  border: 1px solid rgba(31,26,21,.12); border-bottom: 1px solid rgba(31,26,21,.12);
  border-radius: 999px; padding: 9px 15px;
  white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.carta-indice a:hover { background: rgba(31,26,21,.12); border-color: rgba(31,26,21,.3); }
.carta-indice a[aria-current="true"] {
  background: var(--tinta); color: var(--blanco); border-color: var(--tinta);
}
@media (max-width: 768px) {
  /* En el teléfono las pestañas van en una tira que se desliza a lo ancho */
  .carta-indice {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 18px -15px 26px; padding: 10px 15px;
  }
  .carta-indice::-webkit-scrollbar { display: none; }
  .carta-indice a { font-size: 13px; padding: 8px 13px; }
}
.carta-cat { margin-bottom: 60px; scroll-margin-top: 120px; }
.carta-cat h2 {
  font-family: var(--serif); font-size: 37px; line-height: 40px; color: var(--tinta);
  padding-bottom: 14px; border-bottom: 1px solid var(--gris-l); margin-bottom: 8px;
}
.plato { border-bottom: 1px solid rgba(31,26,21,.12); padding: 18px 0; }
.plato-linea { display: flex; align-items: baseline; gap: 14px; }
.plato-nombre { font-size: 18px; color: var(--tinta); font-weight: 600; flex-shrink: 1; }
.plato-guia { flex: 1; border-bottom: 1px dotted var(--gris-l); transform: translateY(-4px); }
.plato-precio { font-size: 18px; color: var(--tinta); font-weight: 600; white-space: nowrap; }
.plato-desc { font-size: 15px; line-height: 24px; margin-top: 6px; max-width: 70ch; }
/* Ajuste de Elisa: la foto no manda; se abre al pulsar el plato */
.plato-foto { display: none; margin-top: 14px; }
.plato-foto img { width: 100%; max-width: 340px; height: auto; border-radius: 8px; }
.plato.abierto .plato-foto { display: block; }
/* «Ver foto» como botón, no como enlace discreto: es la única manera de
   llegar a la foto del plato, así que tiene que cantar. */
.plato-ver {
  margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: .2px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 0; border-radius: 999px;
  background: var(--tinta); color: var(--blanco);
  box-shadow: 0 3px 12px rgba(31,26,21,.22);
  transition: background .2s, color .2s, transform .2s;
}
.plato-ver::before {
  content: ''; width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--icono-camara) center / contain no-repeat;
  mask: var(--icono-camara) center / contain no-repeat;
}
.plato-ver:hover { background: var(--oro); color: var(--tinta); transform: translateY(-1px); }
.plato.abierto .plato-ver { background: var(--oro); color: var(--tinta); }

/* ════ PÁGINAS DE TEXTO (legales) ════ */
.texto-legal { padding: 70px 0 100px; }
.texto-legal h1 { font-family: var(--serif); font-size: 44px; line-height: 48px; color: var(--tinta); margin-bottom: 26px; }
.texto-legal h2 { font-family: var(--serif); font-size: 26px; color: var(--tinta); margin: 34px 0 12px; }
.texto-legal p, .texto-legal li { margin-bottom: 14px; max-width: 75ch; }
.texto-legal ul { padding-left: 20px; list-style: disc; }

/* ════ GALERÍA (ruta secundaria) ════ */
.galeria-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.galeria-grid img { width: 100%; height: 260px; object-fit: cover; }

@media (max-width: 1000px) {
  .cronologia-grid { grid-template-columns: 1fr; }
  .cronologia-col:nth-child(2) { margin-top: 0; }
  .identidad-grid, .contacto-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 768px) {
  .cronologia, .identidad, .reservas-bloque { padding: 70px 0; }
  .identidad h2, .contacto-datos h2, .reservas-bloque h2 { font-size: 36px; line-height: 40px; }
  .carta-portada h1 { font-size: 36px; line-height: 42px; }
  .carta-portada { min-height: 460px; }
  .panel { padding: 26px 20px; }
  .reservas-tel { font-size: 34px; }
  .galeria-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galeria-grid img { height: 190px; }
  .carta-html h1 { font-size: 36px; line-height: 40px; }
  .carta-cat h2 { font-size: 30px; }
  .plato-nombre, .plato-precio { font-size: 17px; }
  .plato-desc { font-size: 15px; }
}

/* ════ FONDO DE AZULEJOS ════
   Patrón propio (img/patrones/azulejos.svg) con un velo encima para que el
   texto se lea. Cubre la sección de principio a fin. */
.azulejos {
  position: relative;
  background-image: url('img/patrones/azulejos.webp');
  background-size: 620px auto;
  background-repeat: repeat;
  background-color: #12151C;
}
/* Velo suave: deja ver el rojo y el crema de los azulejos, y el texto se
   apoya en su propia sombra para leerse. */
.azulejos::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,9,8,.58), rgba(10,9,8,.42) 50%, rgba(10,9,8,.62));
}
.azulejos > * { position: relative; z-index: 1; }

/* ════ NUESTRA HISTORIA EN LA PORTADA ════ */
.historia-home { padding: 110px 0; }
.historia-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px; align-items: center;
}
.historia-texto .antetitulo {
  font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--oro); margin-bottom: 14px;
}
.historia-texto h2 {
  font-family: var(--serif); font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700; line-height: 1.08; color: var(--blanco); margin-bottom: 24px;
  text-shadow: 0 3px 22px rgba(0,0,0,.85), 0 0 50px rgba(0,0,0,.6);
}
.historia-texto .antetitulo { text-shadow: 0 2px 12px rgba(0,0,0,.9); }
.historia-texto p {
  color: rgba(255,255,255,.92); font-size: 16px; line-height: 27px; margin-bottom: 18px;
  text-shadow: 0 2px 14px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.7);
}
.historia-texto .boton { margin-top: 16px; background: var(--blanco); color: var(--tinta); }
.historia-texto .boton:hover { background: var(--oro); color: var(--tinta); }

.historia-video {
  position: relative; overflow: hidden; border-radius: 4px;
  background: #0d0c0b; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.historia-video video { width: 100%; height: auto; display: block; }
.historia-video img { width: 100%; height: auto; display: block; }
.historia-pie { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.6); }

/* ════ INDICADOR DE ABIERTO / CERRADO ════
   Discreto a propósito: es un dato de apoyo bajo el botón de reservar, no
   un titular. El cliente lo pidió más pequeño (14/9/2026). */
.estado-pildora {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 40px;
  background: rgba(10,9,8,.55); border: 1px solid rgba(255,255,255,.35);
  color: var(--blanco); font-size: 12px; font-weight: 500; line-height: 1.3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.estado-punto {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #7ED957; box-shadow: 0 0 0 3px rgba(126,217,87,.22);
}
.estado-pildora[data-abierto="no"] .estado-punto {
  background: #E5533D; box-shadow: 0 0 0 3px rgba(229,83,61,.22);
}
@media (max-width: 768px) {
  .estado-pildora { font-size: 11px; padding: 4px 10px; gap: 6px; }
}
/* Sobre fondo claro (contacto, reservas) */
.sobre-claro .estado-pildora {
  background: rgba(31,26,21,.06); border-color: rgba(31,26,21,.25); color: var(--tinta);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ════ GLOVO EN EL PIE ════ */
.pie-glovo {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-family: var(--serif); font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
}
.pie-glovo img { width: 28px; height: 28px; border-radius: 7px; }
.pie-glovo:hover { color: var(--blanco); }

/* ════ PARALLAX DE LA FRANJA DE VALORES ════
   El fondo es más alto que la sección y app.js lo desplaza más despacio que
   el scroll. Con transform, que va fluido también en móvil; si el sistema
   pide menos movimiento, se queda quieto. */
.valores { overflow: hidden; }
.valores-foto {
  position: absolute; left: 0; top: -18%;
  width: 100%; height: 136%;
  object-fit: cover;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 900px) {
  .historia-grid { grid-template-columns: 1fr; gap: 30px; }
  .historia-video { max-width: 420px; margin: 0 auto; }
  .historia-home { padding: 74px 0; }
}

/* ════ ESCALA GENERAL ════
   Las medidas calcadas de la referencia están pensadas para una pantalla de
   1440 px; en portátiles y monitores normales todo se veía demasiado grande.
   Aquí se baja el conjunto manteniendo la misma composición y jerarquía. */
:root { --barra-h: 104px; }
.barra { padding: 0 36px; }
.barra-logo img { height: 96px; }
.barra-nav a { font-size: 16px; padding: 0 14px; }
.barra-nav a.activo::after { left: 14px; right: 14px; bottom: 28px; }
.barra-redes a { width: 30px; height: 30px; }
.barra-redes svg { width: 14px; height: 14px; }

.portada-titulo { font-size: clamp(34px, 4.6vw, 64px); }
.boton--portada { height: 46px; font-size: 16px; line-height: 46px; min-width: 124px; }

.boton { height: 52px; padding: 0 34px; font-size: 15px; line-height: 52px; }

.presenta { padding: 84px 0 92px; }
.presenta-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; }
.presenta-foto img { max-height: 470px; }
.presenta-marca { font-size: 34px; line-height: 36px; margin-bottom: 26px; }
.presenta-titulo { font-size: 40px; line-height: 42px; margin-bottom: 26px; }
.presenta-texto p { font-size: 15px; line-height: 25px; }
.presenta-botones { gap: 16px; margin-top: 26px; }

.valores { min-height: 430px; }
/* Franja de solo fotografía: sin texto encima, así que tampoco lleva velo.
   La sección toma la proporción de la imagen (2048×768) para que el rótulo
   entre entero; el fondo es algo más alto para que el parallax tenga margen. */
.valores--solo-foto {
  min-height: 0; height: auto;
  /* Algo más apaisada que la imagen: así entra completa de lado a lado y lo
     único que se recorta es madera, arriba y abajo, que es donde el parallax
     necesita margen. */
  /* Bastante más baja que la imagen: ese sobrante es el recorrido del
     parallax, y cuanto mayor es, más se nota el efecto ventana. */
  aspect-ratio: 2048 / 500; max-height: 440px;
  display: flex; align-items: center; overflow: hidden;
}
.valores--solo-foto .valores-velo { display: none; }
.valores--solo-foto .valores-foto {
  position: static; width: 100%; height: auto; flex: 0 0 auto; object-fit: fill;
}
@media (max-width: 768px) {
  /* En móvil la imagen a ancho completo mide poco de alto: la franja se ajusta
     casi a su proporción para que no quede una tira demasiado fina. */
  .valores--solo-foto { aspect-ratio: 2048 / 700; max-height: none; }
}
.valores-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; padding: 54px 20px; }
.valor-t { font-size: 30px; line-height: 32px; }
.valor-t span { margin-top: 10px; }

.resenas { padding: 80px 0; }
.resenas-nota { font-size: 42px; }
.resenas-estrellas { font-size: 19px; }

.historia-home { padding: 92px 0; }
.historia-texto h2 { font-size: clamp(30px, 3.4vw, 42px); margin-bottom: 20px; }
.historia-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 48px; }

.ubicacion { padding: 88px 0; }
.ubicacion-titulo, .contacto-datos h2, .reservas-bloque h2, .identidad h2 {
  font-size: 40px; line-height: 42px;
}
.cabecera { height: 420px; }
.cabecera h1 { font-size: 42px; line-height: 46px; }
.carta-portada { min-height: 520px; }
.carta-portada h1 { font-size: 42px; line-height: 46px; margin-bottom: 32px; }
.carta-html h1 { font-size: 42px; line-height: 46px; }
.carta-cat h2 { font-size: 30px; line-height: 34px; }
.hito-anio { font-size: 30px; line-height: 32px; }
.reservas-tel { font-size: 38px; }
.reservas-bloque { padding: 92px 0; }
.cronologia { padding: 92px 0; }
.identidad { padding: 92px 0; }
/* El vídeo de presentación es vertical: su columna se mantiene estrecha para
   que no se estire a lo alto y descuadre el bloque. */
.identidad-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: start; }
.identidad-grid .video-presenta { max-height: 560px; }
.identidad-grid .video-presenta video { height: 100%; object-fit: cover; }
@media (max-width: 1000px) {
  .identidad-grid { grid-template-columns: 1fr; }
  .identidad-grid figure { max-width: 320px; }
}

@media (max-width: 768px) {
  :root { --barra-h: 98px; }
  .barra-logo img { height: 88px; }
  .presenta-marca { font-size: 30px; line-height: 32px; }
  .presenta-titulo, .ubicacion-titulo, .contacto-datos h2, .reservas-bloque h2,
  .identidad h2, .cabecera h1, .carta-portada h1, .carta-html h1 { font-size: 32px; line-height: 36px; }
  .valor-t { font-size: 27px; line-height: 30px; }
  .boton { height: 50px; padding: 0 24px; line-height: 50px; }
}

/* ════ BOTONES PERSISTENTES: GLOVO Y LLAMAR ════
   Dos círculos apilados abajo a la derecha, siempre a la vista y sin
   cruzarse por delante del texto. Glovo abajo (el más usado, al alcance
   del pulgar) y llamar encima. Nada más: el botón de volver arriba se
   retiró el 12/9/2026 por petición expresa. */
.glovo-fijo, .llamar-fijo {
  position: fixed; right: 22px; z-index: 86;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
.glovo-fijo { bottom: 24px; background: #FFC244; color: #1F1A15; }
/* Anillo blanco: sin él, el círculo de llamar desaparece sobre el pie negro */
.llamar-fijo {
  bottom: 92px; background: #16120F; color: var(--blanco);
  box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 8px 24px rgba(0,0,0,.3);
}
.llamar-fijo:hover { box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(0,0,0,.36); }
.glovo-fijo:hover, .llamar-fijo:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.36); }
.glovo-fijo img { width: 34px; height: 34px; border-radius: 50%; }
.llamar-fijo svg { width: 24px; height: 24px; }

@media (max-width: 768px) {
  .glovo-fijo, .llamar-fijo { right: 16px; width: 52px; height: 52px; }
  .glovo-fijo { bottom: 20px; }
  .llamar-fijo { bottom: 82px; }
  .glovo-fijo img { width: 31px; height: 31px; }
}

/* ════ AJUSTES DE USO ════
   Objetivos táctiles cómodos y nada que se salga en pantallas estrechas. */
.barra-menu { width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: -10px; }
.pie-glovo { min-height: 44px; }
.barra-redes a { width: 44px; height: 44px; }

@media (max-width: 360px) {
  /* A 320 px los botones anchos se salían un par de píxeles */
  .boton { padding: 0 16px; max-width: 100%; }
  .presenta-botones { width: 100%; }
  .presenta-botones .boton { flex: 1 1 100%; }
  .glovo-fijo, .llamar-fijo { width: 48px; height: 48px; }
  .glovo-fijo img { width: 28px; height: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   ADAPTACIÓN FINAL — va al final a propósito
   Los bloques de ajuste anteriores redefinían las rejillas sin media query
   y pisaban las reglas de móvil, así que en pantallas estrechas el texto
   se quedaba en una columna de una palabra por línea. Estas reglas mandan.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .presenta-grid,
  .historia-grid,
  .identidad-grid,
  .contacto-grid,
  .ubicacion-grid,
  .cronologia-grid { grid-template-columns: 1fr !important; gap: 30px; }

  .presenta-grid { padding: 0 20px; }
  .presenta-foto img { height: auto; max-height: 360px; }
  .cronologia-col:nth-child(2) { margin-top: 0; }
  .identidad-grid figure,
  .historia-figura,
  .identidad-grid .video-presenta,
  .historia-video { max-width: 340px; margin-left: 0; }
  .resenas-grid { grid-template-columns: 1fr; gap: 24px; }
  .valores-grid { grid-template-columns: 1fr; gap: 28px; }
  .galeria-grid { grid-template-columns: 1fr 1fr; }
  .visita-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  /* Tipografía a escala de móvil, mande quien mande antes */
  .presenta-marca { font-size: 26px !important; line-height: 30px !important; margin-bottom: 16px; }
  .presenta-titulo,
  .ubicacion-titulo,
  .contacto-datos h2,
  .reservas-bloque h2,
  .identidad h2,
  .cabecera h1,
  .carta-portada h1,
  .carta-html h1 { font-size: 30px !important; line-height: 34px !important; }
  .historia-texto h2 { font-size: 28px !important; line-height: 32px !important; }
  .portada-titulo { font-size: clamp(28px, 8.5vw, 40px) !important; }
  .valor-t { font-size: 24px !important; line-height: 27px !important; }
  .resenas-nota { font-size: 34px !important; }
  .reservas-tel { font-size: 30px !important; }
  .hito-anio { font-size: 25px !important; line-height: 28px !important; }

  .presenta { padding: 54px 0 60px; }
  .historia-home, .ubicacion, .resenas, .cronologia, .identidad, .reservas-bloque { padding: 56px 0; }
  .contenedor { padding: 0 18px; }
  .presenta-texto p, .historia-texto p { font-size: 16px; line-height: 26px; }

  /* Los botones ocupan el ancho: se pulsan mejor y no parten el texto */
  .presenta-botones { flex-direction: column; align-items: stretch; width: 100%; }
  .presenta-botones .boton, .historia-texto .boton { width: 100%; }
  .carta-botones .boton { width: 100%; min-width: 0; }
}

@media (max-width: 768px) {
  /* Los círculos respetan la franja de gestos del iPhone */
  .glovo-fijo { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .llamar-fijo { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }

  /* La hamburguesa era tinta oscura sobre fotos oscuras: en móvil, que es
     donde es la única navegación, no se veía. Lleva su propia chapa para
     leerse igual sobre foto que sobre fondo claro. */
  .barra-menu {
    width: 44px; height: 44px; padding: 0; gap: 5px;
    border-radius: 50%; background: rgba(18,15,12,.42);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  }
  .barra-menu span { background: var(--blanco); width: 20px; }

  /* En pantalla estrecha un azulejo claro ocupaba media línea de texto:
     patrón más pequeño y velo algo más cerrado para que se lea siempre. */
  .azulejos { background-size: 340px auto; }
  .azulejos::before {
    background: linear-gradient(180deg, rgba(10,9,8,.70), rgba(10,9,8,.58) 50%, rgba(10,9,8,.72));
  }

  /* Por debajo de 16px Safari de iPhone amplía la página al tocar el campo
     y deja el formulario descuadrado. */
  .formulario input, .formulario textarea, select, input, textarea { font-size: 16px; }

  /* Enlaces de contacto: alto cómodo para el dedo sin tocar la tipografía */
  .pie-dato { align-items: center; margin-bottom: 4px; }
  .pie-dato a, .pie-glovo { display: inline-flex; align-items: center; min-height: 40px; }
  .pie-dato svg { margin-top: 0; }
  .pie-enlaces a { padding: 7px 0; }
  .reservas-tel { padding: 6px 0; display: inline-block; }
}

/* La carta completa no tiene foto de cabecera: su título arrancaba por
   debajo de la barra y se le montaba encima. Deja siempre el hueco. */
/* Hueco generoso por arriba: es la ventana por la que se ve la cocina
   antes de que empiece el panel de la carta. */
.carta-html { padding-top: calc(var(--barra-h) + 78px); }

/* ════ MARCA EN LA BARRA (provisional) ════
   Fuera el logo de la catrina hasta que llegue el nuevo. Mientras, el
   nombre en texto: se lee sobre foto y sobre fondo claro por igual. */
/* Logo nuevo de la catrina (12/9/2026): emblema con fondo transparente, 300 px
   de lado, en WebP. En la barra va a 84 px, lo que cabe en los 100 px de alto
   sin pisar los enlaces; en el pie, pequeño (64 px). */
.barra-logo { display: inline-flex; align-items: center; min-height: 46px; }
.barra-logo img {
  height: 96px; width: auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.4));
}
/* En carta completa y legales la barra lleva franja de tinta (más abajo), así
   que el emblema conserva su sombra: la regla que la quitaba ya no aplica. */
/* En el pie el emblema va pequeño y en la misma línea del nombre, para que el
   pie no crezca: la altura se queda como antes de tener logo. */
.pie-t--marca { display: flex; align-items: center; gap: 11px; }
.pie-logo { width: 38px; height: auto; flex-shrink: 0; }
/* Sobre fondo claro la chapa de la hamburguesa va opaca, o los trazos
   blancos se quedan en gris sobre gris */
body:has(.texto-legal, .carta-html) .barra-menu { background: rgba(18,15,12,.9); }
/* Carta completa y legales no tienen foto de cabecera: los enlaces blancos se
   perdían sobre el fondo claro —y ahora sobre el patrón de la carta—, así que
   ahí la barra lleva su propia franja de tinta. */
body:has(.texto-legal, .carta-html) .barra {
  background: linear-gradient(180deg, rgba(16,13,11,.94), rgba(16,13,11,.82));
}
body:has(.texto-legal, .carta-html) .barra-logo img { filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }

/* Entre 769 y 1000 px la barra no daba de sí: los seis enlaces empujaban los
   iconos de redes fuera de la pantalla (93 px de recorte a 820). En ese tramo
   manda la hamburguesa, que es donde cambia también la referencia. */
@media (max-width: 1000px) {
  .barra { justify-content: center; }
  .barra-nav, .barra-redes { display: none; }
  .barra-menu { display: flex; margin-right: auto; }
  .barra-logo { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; }
}

/* ════ FONDO DE LA CARTA ════
   Detrás de toda la página corre el vídeo de la cocina —el guacamole—, en
   bucle y sin sonido. La capa va `fixed`: el navegador la compone una vez y
   no repinta nada al desplazarse. La lista va sobre un panel claro para que
   precios y descripciones se sigan leyendo, y entre los dos hay un velo
   oscuro que sujeta el contraste pase lo que pase en la imagen.
   La monta app.js desde config.js → cartaFondoVideo. */
.carta-html { background-color: #17130F; }
.carta-fondo {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: #17130F;
}
.carta-fondo-cartel, .carta-fondo-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* El vídeo solo asoma cuando ya está dando imagen; hasta entonces manda el
   póster y no se ve ningún hueco negro. */
.carta-fondo-video { opacity: 0; transition: opacity .9s ease; }
.carta-fondo--corriendo .carta-fondo-video { opacity: 1; }
/* Velo suave: solo lo justo para que el panel no compita con el vídeo. Antes
   era mucho más oscuro y el vídeo casi no se veía (petición del cliente,
   15/9/2026: «que se vea mejor el fondo»). */
.carta-fondo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18,14,11,.40), rgba(18,14,11,.20) 45%, rgba(18,14,11,.46));
}
/* ── El panel de la carta: cristal oscuro ──
   Referencia del cliente (15/9/2026): panel negro translúcido con el fondo
   desenfocado detrás, texto claro, precios y detalles en dorado, cada plato
   con su foto en miniatura y un «+»; la foto se abre grande al tocarla y el
   resto de la fila no hace nada.
   El negro va al 74 %: con el vídeo del guacamole hay zonas muy claras (el
   molcajete, la encimera) y por debajo de eso el texto blanco no llegaba a
   4,5:1. */
.carta-html .contenedor {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 45%, rgba(255,255,255,.05)) rgba(18,14,11,.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  max-width: 1000px;
  padding: 44px 38px 52px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 24px 70px rgba(0,0,0,.5);
  color: rgba(245,239,230,.78);
}
/* Sin backdrop-filter (navegadores viejos) el cristal sería solo un panel
   medio transparente sobre vídeo en movimiento: ilegible. Se vuelve opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .carta-html .contenedor { background: rgba(20,16,12,.96); }
}
@media (max-width: 768px) {
  /* Márgenes a los lados: es por ahí por donde se ve el vídeo nítido. */
  .carta-html { padding-left: 0; padding-right: 0; }
  .carta-html .contenedor {
    padding: 26px 15px 32px; margin: 0 16px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
}
@media (max-width: 380px) {
  .carta-html .contenedor { margin: 0 10px; padding: 22px 14px 28px; }
}

/* Texto sobre el cristal oscuro */
.carta-html h1 { color: #F5EFE6; }
.carta-html .contenedor strong { color: #F5EFE6; }

/* Pestañas de categorías: chips de cristal, la activa en dorado */
.carta-html .carta-indice {
  background: rgba(18,14,11,.55);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.carta-html .carta-indice a {
  font-family: var(--serif); font-weight: 400; font-size: 16px;
  color: #F5EFE6; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.28); padding: 10px 18px;
}
.carta-html .carta-indice a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.carta-html .carta-indice a[aria-current="true"] {
  background: linear-gradient(180deg, #F3E2B8, #D6BB80); color: #2A2018; border-color: #EAD6A5;
  box-shadow: 0 0 0 1px rgba(234,214,165,.35), 0 6px 18px rgba(0,0,0,.35);
}
.carta-html .carta-volver {
  color: #F5EFE6; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28);
}
.carta-html .carta-volver:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }

/* Menú de secciones: tarjetas de cristal */
.carta-html .carta-tarjeta {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.carta-html .carta-tarjeta:hover { border-color: rgba(255,255,255,.5); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.carta-html .carta-tarjeta-foto { background: rgba(255,255,255,.04); }
.carta-html .carta-tarjeta-t { color: #F5EFE6; }
.carta-html .carta-tarjeta-n { color: rgba(245,239,230,.6); }

/* Cabecera de categoría: título en mayúsculas espaciadas, cuenta en dorado
   y una raya corta dorada */
.carta-html .carta-cat h2 {
  color: #F5EFE6; font-weight: 400; font-size: 34px; line-height: 38px;
  text-transform: uppercase; letter-spacing: .14em;
  border-bottom: 0; padding-bottom: 6px; margin-bottom: 0;
}
.carta-html .carta-cat > h2 + p {
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--oro); margin-bottom: 26px !important;
}
.carta-html .carta-cat > h2 + p::after {
  content: ''; display: block; width: 56px; height: 1px; background: var(--oro); margin-top: 16px;
}

/* Fila de plato: texto a la izquierda, miniatura a la derecha */
.carta-html .plato {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px;
  align-items: start; padding: 22px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  cursor: default;
}
.carta-html .plato-linea { grid-column: 1; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; }
.carta-html .plato-guia { display: none; }
.carta-html .plato-nombre { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 26px; color: #F5EFE6; }
.carta-html .plato-precio { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--oro); }
.carta-html .plato-desc { grid-column: 1; color: rgba(245,239,230,.72); margin-top: 8px; }
.carta-html .plato-ver { display: none; }     /* lo sustituye la miniatura */
.carta-html .plato-foto {
  display: block; grid-column: 2; grid-row: 1 / span 3;
  position: relative; margin: 0;
  width: 132px; height: 132px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  cursor: pointer; transition: transform .2s, box-shadow .2s;
}
.carta-html .plato-foto:hover, .carta-html .plato-foto:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,.5); outline: none; border-color: rgba(255,255,255,.5); }
.carta-html .plato-foto img { width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0; display: block; }
/* El «+» de cristal en la esquina de la miniatura */
.carta-html .plato-foto::after {
  content: '+'; position: absolute; right: 8px; bottom: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.36);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.65);
  color: #fff; font: 400 24px/32px var(--sans); text-align: center;
}
@media (max-width: 768px) {
  .carta-html .plato { column-gap: 14px; padding: 18px 0; }
  .carta-html .plato-nombre { font-size: 20px; line-height: 24px; }
  .carta-html .plato-precio { font-size: 18px; }
  .carta-html .plato-foto { width: 108px; height: 108px; border-radius: 12px; }
  .carta-html .plato-foto::after { width: 30px; height: 30px; font-size: 21px; line-height: 28px; right: 6px; bottom: 6px; }
}

/* Lema al pie del panel */
.carta-lema {
  display: flex; align-items: center; gap: 18px;
  margin: 40px 0 0; font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(245,239,230,.8); text-align: center; white-space: nowrap;
}
.carta-lema::before, .carta-lema::after { content: ''; flex: 1; height: 1px; background: rgba(214,187,128,.7); }

/* ── Visor: la foto grande al tocar la miniatura ──
   Lo crea app.js. Fondo desenfocado, caja de cristal con nombre y precio,
   se cierra tocando fuera, con la × o con Escape. */
.visor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 22px; }
.visor[hidden] { display: none; }
.visor-fondo { position: absolute; inset: 0; background: rgba(10,8,6,.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.visor-caja {
  position: relative; margin: 0; display: inline-flex; flex-direction: column;
  max-width: min(92vw, 720px);
  background: rgba(24,19,15,.74);
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.22); border-radius: 22px;
  padding: 12px 12px 16px; box-shadow: 0 30px 90px rgba(0,0,0,.6);
  animation: visor-entra .28s ease-out;
}
.visor-img { display: block; width: auto; max-width: 100%; max-height: 72vh; object-fit: contain; border-radius: 14px; }
.visor-pie {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 6px 0; font-family: var(--serif); font-size: 22px; line-height: 26px; color: #F5EFE6;
}
.visor-precio { color: var(--oro); white-space: nowrap; }
.visor-cerrar {
  position: absolute; top: -14px; right: -14px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(30,24,18,.9); border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-size: 26px; line-height: 40px; text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}
.visor-cerrar:hover { background: var(--oro); color: #2A2018; }
body.visor-abierto { overflow: hidden; }
@keyframes visor-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Las tres secciones de bebidas no tienen foto por plato —tampoco la tenían en
   la web antigua—, así que abren con una toma de la categoría. */
.carta-cat-foto {
  width: 100%; height: 190px; object-fit: cover;
  margin: 0 0 26px;
}
@media (max-width: 768px) {
  .carta-cat-foto { height: 150px; margin-bottom: 20px; }
}

/* ── Rótulo TAPACHULA y contador de años ──
   Elisa lo quería más grande y «en blanco». La sección tiene fondo gris muy
   claro, donde el blanco no se vería: va en tinta, a mayor tamaño y con más
   cuerpo, que es lo que consigue el mismo golpe de vista (y en una pantalla
   invertida, como la suya, sale blanco). */
/* Con `.presenta-texto p` delante: si no, esa regla gana por especificidad y
   el rótulo se queda en gris de párrafo. */
.presenta-texto .presenta-marca {
  font-size: 44px; line-height: 46px; font-weight: 700;
  letter-spacing: 2px; color: var(--tinta);
  margin-bottom: 18px;
}
.presenta-anos { display: flex; align-items: baseline; gap: 12px; margin: 0 0 26px; }
.presenta-contador {
  font-family: var(--serif); font-size: 40px; line-height: 1; font-weight: 700;
  color: var(--oro-claro); font-variant-numeric: tabular-nums;
}
.presenta-anos-txt { font-size: 13px; line-height: 18px; color: var(--gris); max-width: 190px; }
@media (max-width: 768px) {
  .presenta-texto .presenta-marca { font-size: 34px !important; line-height: 36px !important; letter-spacing: 1.4px; }
  .presenta-contador { font-size: 34px; }
}

/* ════ CAPAS DE PARALLAX ════
   Cada patrón que se mueve vive en su propia capa y solo recibe `transform`,
   que la tarjeta gráfica compone sin repintar. Antes se movía el
   `background-position` del bloque entero y el scroll temblaba. `.con-capa`
   apaga el fondo del anfitrión cuando la capa ya está puesta; sin JavaScript
   no hay capa y el fondo se ve igual que siempre, quieto. */
.capa-patron {
  position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  z-index: 0; pointer-events: none;
  background-repeat: repeat; background-position: center top;
  transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
}
/* La de la carta va fija al tamaño de la pantalla: el documento mide miles de
   píxeles y pintar todo eso en cada fotograma era imposible. */
.capa-patron--fija { position: fixed; top: -10vh; height: 120vh; }
.con-capa { background-image: none; }

.cabecera--flores .capa-patron {
  background-image: url('img/patrones/flores-bordado.webp');
  background-size: 1670px 260px;
}
.cabecera-velo { z-index: 1; }
/* Azulejos: la capa se desliza en LATERAL, de izquierda a derecha mientras
   la sección cruza la pantalla (antes subía 90px en vertical y apenas se
   notaba). Es más ancha que la sección por `--lateral` a cada lado y la
   sección la recorta con `overflow: clip` (no `hidden`: eso la convertiría
   en contenedor de scroll y la línea de tiempo de la animación dejaría de
   seguir la página). Donde el navegador sabe atar animaciones al scroll
   (Chrome, Safari 26) la mueve él mismo en el compositor, fina incluso con
   el scroll por inercia del iPhone; donde no, la mueve app.js con el mismo
   recorrido. No se apaga con «reducir movimiento»: el iPhone del cliente lo
   tiene activado y la sección se veía muerta. */
.azulejos { overflow: clip; }
.azulejos .capa-patron {
  --lateral: 440px;
  top: 0; height: 100%;
  left: calc(var(--lateral) * -1); right: calc(var(--lateral) * -1);
  background-image: url('img/patrones/azulejos.webp');
  background-size: 620px 349px;
}
@keyframes azulejos-lateral {
  from { transform: translate3d(calc(var(--lateral) * -1), 0, 0); }
  to   { transform: translate3d(var(--lateral), 0, 0); }
}
@supports (animation-timeline: view()) {
  .azulejos .capa-patron {
    animation-name: azulejos-lateral;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
    /* Gana a la regla global de «reducir movimiento» (duración .001ms). */
    animation-duration: auto !important;
  }
}
.azulejos::before { z-index: 1; }
/* El fondo de la carta se movía desde JavaScript y en el iPhone temblaba: con
   el scroll por inercia, Safari no actualiza los `transform` que escribe el
   código hasta que el dedo se levanta, así que la capa daba tirones. Ahora la
   mueve el propio navegador con una animación atada al scroll, que corre en el
   compositor. Donde no exista esa función, la capa se queda fija y quieta: el
   contenido se desliza por encima y no hay nada que pueda vibrar. */
.carta-html .contenedor { position: relative; z-index: 1; }

/* ── Botón flotante de la carta ──
   Encima del de llamar, con su rótulo debajo: es el acceso que más se busca. */
.carta-fijo {
  position: fixed; right: 22px; bottom: 160px; z-index: 86;
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--blanco); color: var(--tinta);
  box-shadow: 0 0 0 2px rgba(31,26,21,.9), 0 8px 24px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
.carta-fijo svg { width: 25px; height: 25px; }
.carta-fijo:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--tinta), 0 12px 30px rgba(0,0,0,.36); }
/* El rótulo va encima del círculo: debajo chocaba con el botón de llamar */
.carta-fijo-txt {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-family: var(--serif); font-size: 10px; font-weight: 700;
  letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--blanco); background: rgba(20,17,15,.92);
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
@media (max-width: 768px) {
  .cabecera--flores .capa-patron { background-size: 1100px 171px; }
  .azulejos .capa-patron { background-size: 340px 192px; --lateral: 340px; }
  /* Los tres círculos, más juntos y algo menores en el teléfono */
  .carta-fijo { right: 16px; width: 52px; height: 52px; bottom: calc(144px + env(safe-area-inset-bottom, 0px)); }
  .carta-fijo svg { width: 23px; height: 23px; }
}
@media (max-width: 380px) {
  .carta-html .capa-patron { background-size: 215px 217px; --paso: 217px; }
}

/* ════ CABECERAS DE FLORES ════
   Nuestra Historia, Eventos, Reservas y Contacto abren con el bordado de flores
   (12/9/2026: sustituye al dibujo anterior). Viene sobre negro, así que repite
   sin costura en vertical —negro contra negro— y va espejado en horizontal. Al
   ser ya oscuro, el velo es mucho más suave que antes. */
.cabecera--flores {
  background-color: #060505;
  background-image: url('img/patrones/flores-bordado.webp');
  background-repeat: repeat;
  background-size: 1670px auto;
  background-position: center center;
}
.cabecera--flores .cabecera-velo { background: rgba(6,5,5,.3); }
.cabecera h1 { text-shadow: 0 3px 20px rgba(0,0,0,.7), 0 0 46px rgba(0,0,0,.45); }
@media (max-width: 768px) {
  .cabecera--flores { background-size: 1100px auto; }
}

/* ════ EL PIE: FLORES DETRÁS, INFORMACIÓN EN TRES COLUMNAS ════
   Las flores ocupan el pie entero, a todo color y a escala de trama (el
   azulejo va espejado en los dos ejes, así repite sin costura). Encima, la
   información en tres bloques con su rótulo —cómo localizarnos, a dónde ir
   dentro de la web, y a domicilio más legal—. Cada bloque va sobre su propio
   panel de tinta, no chapa por línea: se lee limpio y las flores siguen a la
   vista alrededor y entre las columnas. */
.pie {
  position: relative;
  background: var(--pie);
  color: rgba(255,255,255,.62);
  padding: 0 0 42px;
  overflow: hidden;
}
/* Las flores, difuminadas: se ven pero no compiten con el texto, así no
   hacen falta chapas ni paneles negros encima. El inset negativo evita que
   el desenfoque deje los bordes claros. */
.pie::before {
  content: '';
  position: absolute; inset: -10px;
  background-image: url('img/patrones/flores-bordado.webp');
  background-repeat: repeat;
  background-size: 1670px auto;
  background-position: top center;
  opacity: .92;
  filter: blur(6px);
  pointer-events: none;
}
/* Y un degradado encima: oscurece lo justo donde va el texto. Con el bordado
   sobre negro hace falta mucho menos que con el dibujo claro de antes. */
.pie::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,6,5,.36), rgba(8,6,5,.56));
  pointer-events: none;
}
.pie-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 38px 56px;
  max-width: 1200px; margin: 0 auto;
  padding: 44px 20px 30px;
}
/* Los dos reconocimientos del Restaurant Guru, en dos placas iguales y
   pequeñas: la insignia de 2024 es ancha y el certificado de 2026 alto, así
   que cada uno se centra en su cuadro y ninguno se deforma. En ordenador van
   ancladas al hueco libre de la izquierda de la línea de copyright, así que
   no suman ni un píxel a la altura del pie. */
.pie-premios {
  /* A la derecha del todo y una debajo de la otra, en el hueco que ya estaba
     vacío: al ir en posición absoluta no añaden ni un píxel de altura. */
  position: absolute; z-index: 1;
  top: 44px; right: max(20px, calc(50% - 580px));
  display: flex; flex-direction: column; gap: 10px;
}
.premio {
  width: 58px; height: 58px; padding: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.94); border-radius: 5px;
  transition: transform .2s;
}
.premio:hover { transform: translateY(-2px); }
.premio img { width: 100%; height: 100%; object-fit: contain; }
.pie-col { background: none; padding: 0; }
.pie-t {
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  line-height: 18px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--blanco); margin-bottom: 20px;
}
.pie-t--seg { margin-top: 34px; }

.pie-dato {
  display: flex; align-items: flex-start; gap: 12px;
  background: none; padding: 0; margin-bottom: 14px;
  font-family: var(--sans); font-size: 14px; line-height: 22px;
  letter-spacing: 0; text-transform: none; max-width: 340px;
}
.pie-dato svg { width: 15px; height: 15px; margin-top: 3px; color: rgba(255,255,255,.6); }
.pie-dato a, .pie-lista a, .pie-glovo { color: rgba(255,255,255,.84); transition: color .2s; }
.pie-dato a:hover, .pie-lista a:hover, .pie-glovo:hover { color: var(--blanco); }

.pie-lista li { margin-bottom: 11px; }
.pie-lista a { font-size: 14px; line-height: 22px; }

.pie-redes { display: flex; gap: 12px; margin-top: 22px; }
.pie-redes a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.7);
  transition: background .2s, border-color .2s, color .2s;
}
.pie-redes a:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); color: var(--blanco); }
.pie-redes svg { width: 17px; height: 17px; }

.pie-glovo {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; padding: 0; margin: 0;
  font-family: var(--sans); font-size: 14px; letter-spacing: 0; text-transform: none;
}
.pie-glovo img { width: 26px; height: 26px; border-radius: 50%; }

/* El copyright, sin chapa: una línea fina lo separa del resto */
.pie-copy {
  position: relative; z-index: 1;
  max-width: 1160px; margin: 0 auto; padding: 22px 20px 0;
  background: none;
  border-top: 1px solid rgba(255,255,255,.16);
  text-align: center; font-size: 11px; letter-spacing: .6px;
  color: rgba(255,255,255,.5);
}
/* Crédito de autoría: enlace de texto, visible, centrado en la página y en el
   HTML que sirve el servidor. La frase va en gris apagado y el nombre en
   violeta con un brillo que recorre las letras sin parar, como la referencia
   que pasó Elisa. Si el navegador no sabe recortar el fondo al texto, se
   queda el violeta liso: nunca transparente. */
.credito {
  position: relative; z-index: 1;
  width: 100%; margin: 6px auto 0; padding: 0 20px;
  text-align: center; font-size: 13px; line-height: 20px; letter-spacing: .2px;
  color: rgba(255,255,255,.46);
}
.credito a {
  color: #5A6BFF; font-weight: 700; letter-spacing: .1px;
  text-decoration: none; white-space: nowrap;
}
.credito a:hover { color: #93A3FF; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .credito a {
    background-image: linear-gradient(100deg, #3C4DFF 0%, #5A6BFF 28%, #CFD8FF 50%, #5A6BFF 72%, #3C4DFF 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: credito-brillo 3.4s linear infinite;
  }
  .credito a:hover { animation-duration: 1.6s; }
}
@keyframes credito-brillo {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}

@media (max-width: 1100px) {
  .pie-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, .95fr); gap: 36px 34px; }
}
@media (max-width: 900px) {
  .pie-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 22px; }
}
@media (max-width: 768px) {
  /* Petición de Elisa: la catrina, más grande. La barra sube a 98 px para
     dejarle sitio sin que el emblema se salga por arriba. */
  .barra-logo img { height: 88px; }
  .pie-logo { width: 34px; }
  /* Los datos de contacto a todo el ancho y las dos listas de enlaces una al
     lado de la otra: en una sola columna el pie medía 1.066 px de scroll.
     Abajo, hueco para que los círculos flotantes no tapen la última línea. */
  .pie-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px; padding: 32px 20px 16px;
  }
  .pie-col:first-child { grid-column: 1 / -1; }
  /* En móvil siguen a la derecha y apiladas, al lado de los datos de
     contacto, que se recortan para dejarles el sitio. Así el pie tampoco
     crece en el teléfono. */
  .pie-premios { top: 30px; right: 16px; gap: 8px; }
  .premio { width: 46px; height: 46px; }
  .pie-col:first-child .pie-dato { max-width: calc(100% - 74px); }
  /* Hueco abajo para que los círculos flotantes no tapen el copyright */
  .pie { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* El azulejo no se reescala con la pantalla: misma flor que en ordenador */
  .pie::before { background-size: 1100px auto; }
}
@media (max-width: 360px) {
  .barra-logo img { height: 74px; }
}

/* En móvil las horas iban alineadas a la derecha, justo debajo de los
   círculos flotantes, que tapaban el final de la línea. Se apilan: día
   arriba y horas debajo, las dos a la izquierda y a salvo. */
@media (max-width: 600px) {
  .ubicacion .horario-fila,
  .contacto-datos .horario-fila,
  .reservas-horarios .horario-fila {
    flex-direction: column; gap: 0; padding: 9px 0;
  }
  .ubicacion .horario-fila span:first-child,
  .contacto-datos .horario-fila span:first-child,
  .reservas-horarios .horario-fila span:first-child {
    font-size: 13px; letter-spacing: .4px; text-transform: uppercase;
  }
  .ubicacion .horario-fila span:last-child,
  .contacto-datos .horario-fila span:last-child,
  .reservas-horarios .horario-fila span:last-child { font-weight: 600; }
}

/* Nada puede provocar desplazamiento lateral */
html, body { max-width: 100%; overflow-x: clip; }

/* Respeto al ajuste de movimiento reducido del sistema */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ════ EL TACO, MONTADO CON EL SCROLL ════
   Va entre la portada y la presentación. La pista mide 1,65 pantallas;
   dentro, una caja pegajosa deja la imagen quieta mientras se recorre, y
   taco.js elige el fotograma según el desplazamiento: en escritorio moviendo
   el `currentTime` de un <video>, en el teléfono dibujando cuadros WebP en
   un <canvas>.

   Dos avisos para quien venga detrás:
   · Ni .taco ni .taco-pista pueden llevar overflow: hidden. Un ancestro con
     overflow recortado convierte al sticky en inútil. El recorte va en
     .taco-fijo, que es el propio elemento pegajoso.
   · El fondo es EXACTAMENTE el del vídeo y de los cuadros: negro puro desde
     el 16/9/2026 (vídeos nuevos sobre negro; la cadena que los prepara deja
     el fondo a 0 y desvanece los bordes, así el rectángulo del vídeo no se
     distingue de la sección). Si algún día se cambia el material, hay que
     volver a medirlo y actualizar los dos sitios (aquí y config.js). */
.taco {
  position: relative;
  background: #000;
}
/* 2,1 pantallas de recorrido para la animación (el ritmo de la versión crema,
   que tenía 1,8 con la caja quieta) pero arrancando cuando la sección asoma
   bajo la portada: la caja solo se queda quieta 1,1 pantallas (antes 1,8).
   Con 1,65 el taco se montaba demasiado deprisa. */
.taco-pista { height: 210vh; height: 210svh; }
.taco-fijo {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.taco-marco {
  position: absolute; inset: 0;
  pointer-events: none;
}
/* `contain`: el vídeo se ve entero, como en la versión crema que aprobó el
   cliente (los ingredientes apilados sobre la tortilla bajan y la cámara se
   acerca). El fondo es negro puro, así que los márgenes no se notan. El
   lienzo del teléfono encuadra por su cuenta (taco.js). Ni un solo transform
   sobre ninguno de los tres. */
.taco-cartel, .taco-video, .taco-lienzo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.taco-cartel, .taco-video { object-fit: contain; }
/* El póster NO se oculta nunca. El vídeo (escritorio) o el lienzo (teléfono)
   son opacos y van encima: en cuanto pintan lo tapan entero, y si algo se
   niega a pintar debajo sigue habiendo imagen. Ocultarlo dejaba la sección
   en blanco. */
.taco-video, .taco-lienzo { opacity: 0; transition: opacity .25s ease; }
.taco--listo .taco-video, .taco--listo .taco-lienzo { opacity: 1; }

/* Sin scrub —apagado en config.js o material que no carga— queda el taco
   terminado y una sola pantalla de sección. «Menos movimiento» ya NO lo
   apaga: taco.js explica por qué. */
.taco--fijo .taco-pista { height: 100vh; height: 100svh; }

/* Frases que aparecen y desaparecen con el scroll, alrededor del taco.
   Los textos y sus ventanas están en config.js; taco.js las crea, las
   funde y las mueve (opacity y transform van en línea).
   · ≥1200px: a los lados del vídeo, a media altura, alternando izquierda y
     derecha (el vídeo ocupa el centro y los lados son negros).
   · ≤768px: arriba, escalonadas, sobre el negro que queda encima de los
     ingredientes.
   · Entre medias no hay sitio limpio: no se muestran. */
.taco-frases { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.taco-frase {
  position: absolute; display: none; margin: 0;
  opacity: 0; will-change: opacity, transform;
  font-family: var(--serif, 'Almendra', serif); font-weight: 700;
  font-size: clamp(26px, 2.5vw, 44px); line-height: 1.12;
  color: #F5EFE6; text-wrap: balance;     /* claro: la sección es negra */
  text-shadow: 0 2px 18px rgba(0, 0, 0, .75), 0 0 3px rgba(0, 0, 0, .6);
}
@media (min-width: 1200px) {
  .taco-frase { display: block; top: 40%; max-width: 15%; }
  .taco-frase--izq { left: 4%; text-align: left; }
  .taco-frase--der { right: 4%; text-align: right; }
}
@media (max-width: 768px) {
  .taco-frase { display: block; max-width: 88%; font-size: 27px; }
  .taco-frase--izq { left: 6%; text-align: left; }
  .taco-frase--der { right: 6%; text-align: right; }
  /* Las tres en la franja de arriba de la caja, que en el teléfono mide lo
     justo para ellas (ver más abajo). */
  .taco-frase { top: 22px; }
}

@media (max-height: 520px) { .taco-pista { height: 180vh; height: 180svh; } }

/* Teléfono: la caja pegajosa NO ocupa la pantalla entera. El taco es más
   ancho que alto, así que a lo ancho del móvil solo llena la parte baja de una
   caja de pantalla completa y quedaba una franja negra enorme entre la
   portada y los ingredientes. Ahora la caja mide lo que ocupa la animación
   (91vw: la pila de ingredientes y la tortilla, encuadradas por taco.js) más
   130px para las frases, y se queda pegada ABAJO de la pantalla: aparece justo
   después de la portada y, al soltarse, lo siguiente viene pegado al taco.
   El recorrido de la animación es la caja más 1,2 pantallas de caja quieta.
   taco.js lee el `top` de la caja para calcular el progreso. */
@media (max-width: 768px) {
  .taco { --caja: min(100svh, calc(91vw + 130px)); }
  .taco-fijo { height: var(--caja); top: calc(100svh - var(--caja)); }
  .taco-pista { height: calc(var(--caja) + 120svh); }
  .taco-cartel { object-position: 50% 100%; }
}

/* ════ PRESENTACIÓN A SANGRE (17/9/2026) ════
   Va al final a propósito: manda sobre los ajustes anteriores de .presenta.
   · La foto (fachada con mariachis, vertical) llega a los bordes de la
     pantalla: en el teléfono a todo el ancho; en ordenador ocupa la mitad
     izquierda entera y el texto va en la derecha, alineado con el contenedor.
   · Al entrar en pantalla la foto «se abre»: el marco pasa de recortado a
     completo y la imagen se aleja un poco. Lo mueve el propio scroll (el
     navegador en el compositor, o app.js donde no sabe), no un temporizador.
   · Los textos se escriben letra a letra según se baja (app.js, data-escribe).
   · Nada de esto se apaga con «reducir movimiento» (el iPhone del cliente lo
     tiene activado): todo sigue al dedo y se para con él. */
.presenta { padding: 0; overflow: clip; }
.presenta .presenta-grid {
  max-width: none; margin: 0; padding: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; align-items: center;
}
.presenta .presenta-foto {
  position: relative; overflow: hidden;
  height: min(100svh, 880px); min-height: 640px;
  background: #1a1613;
  view-timeline-name: --presenta-foto;
}
.presenta .presenta-foto img {
  display: block; width: 100%; height: 100%; max-height: none;
  object-fit: cover; object-position: 50% 58%;
  transform-origin: 50% 55%;
}
.presenta .presenta-texto {
  padding: 90px max(20px, calc(50vw - 600px)) 90px 64px;
}
.presenta .presenta-texto > * { max-width: 470px; }

@keyframes presenta-foto-marco {
  from { clip-path: inset(9% 7% 9% 7%); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes presenta-foto-imagen {
  from { transform: scale(1.22); }
  to   { transform: scale(1); }
}
@supports (view-timeline-name: --a) {
  .presenta .presenta-foto {
    animation-name: presenta-foto-marco; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --presenta-foto; animation-range: entry 0% cover 42%;
    animation-duration: auto !important;
  }
  .presenta .presenta-foto img {
    animation-name: presenta-foto-imagen; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --presenta-foto; animation-range: entry 0% cover 55%;
    animation-duration: auto !important;
  }
}

/* Letras que se escriben: el texto real sigue en la página (buscadores y
   lectores de pantalla lo leen entero desde un span oculto) y la copia visible
   va letra a letra. Las letras ocultas ocupan su sitio, así que el párrafo no
   salta al escribirse. El cursor va en posición absoluta por lo mismo. */
.letra { opacity: 0; transition: opacity .14s linear; }
.letra.v { opacity: 1; }
.letra.cursor { position: relative; }
.letra.cursor::after {
  content: ''; position: absolute; top: .12em; bottom: .08em; right: -.14em;
  width: 2px; background: currentColor;
  animation: letra-cursor 1s steps(1) infinite;
}
@keyframes letra-cursor { 50% { opacity: 0; } }
/* Los botones aparecen al terminar de escribirse el texto. Solo se esconden
   si app.js ha arrancado (clase en <html>): sin JavaScript se ven siempre. */
.con-escritura [data-aparece] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .4s ease, transform .4s ease; }
.con-escritura [data-aparece].v { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .presenta .presenta-grid { grid-template-columns: 1fr !important; gap: 0; }
  .presenta .presenta-foto { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 88svh; }
  .presenta .presenta-texto { padding: 46px 20px 64px; }
  .presenta .presenta-texto > * { max-width: 560px; }
}

/* ════ CABECERAS DE FLORES CON EL SCROLL, EN EL COMPOSITOR (17/9/2026) ════
   Contacto, Eventos y Reservas: al bajar, el bordado baja más despacio que la
   página (0,32 de su altura) y el titular baja un poco y se apaga. Lo hacía
   app.js escribiendo transform en cada fotograma; donde el navegador sabe
   atar animaciones al scroll lo hace él, fuera del hilo principal (más fino
   con el scroll por inercia del iPhone). Recorrido «exit»: 0 con la cabecera
   arriba del todo, 1 cuando acaba de salir. app.js escribe `--alto`, la altura
   real, y sigue moviéndolo en los navegadores que no saben. Historia no entra:
   su cabecera es una ventana de flores fija. */
@keyframes cabecera-capa { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 22.857%, 0); } }
@keyframes cabecera-titulo {
  from { transform: translate3d(0, 0, 0); opacity: 1; }
  to   { transform: translate3d(0, calc(var(--alto, 420px) * .22), 0); opacity: .26; }
}
@supports (view-timeline-name: --a) {
  .cabecera--flores:not(.ventana) { view-timeline-name: --cabecera; }
  .cabecera--flores:not(.ventana) .capa-patron,
  .cabecera--flores:not(.ventana) h1 {
    animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --cabecera; animation-range: exit 0% exit 100%;
    animation-duration: auto !important;
  }
  .cabecera--flores:not(.ventana) .capa-patron { animation-name: cabecera-capa; }
  .cabecera--flores:not(.ventana) h1 { animation-name: cabecera-titulo; }
}

/* ════════════════════════════════════════════════════════════════════
   SIETE ANIMACIONES NUEVAS (17/9/2026)
   Aviso «desliza», partículas del taco, luchadores que se juntan, reseñas
   que entran, fotos de la carta que se abren, galería en pasarela y papel
   picado. Todo lo que va atado al scroll lo hace el navegador donde sabe
   (animation-timeline) y app.js / taco.js donde no. Nada de lo que sigue al
   dedo se apaga con «reducir movimiento» (el iPhone del cliente lo tiene
   activado); lo que se mueve solo, sí.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. Aviso «desliza» al pie de la portada ──
   Una gota dorada baja por una línea fina. Se funde en cuanto se empieza a
   bajar. El titular sube lo justo para dejarle sitio. */
.portada-inner { padding-bottom: calc(clamp(26px, 8svh, 92px) + 56px + env(safe-area-inset-bottom, 0px)); }
.portada-desliza {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  transform: translateX(-50%);
  pointer-events: none; color: rgba(255,255,255,.84);
}
.portada-desliza-txt {
  font: 600 10.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase;
  margin-right: -.34em;                       /* compensa el espaciado de la última letra */
  text-shadow: 0 1px 8px rgba(0,0,0,.6);
}
.portada-desliza-linea {
  position: relative; display: block; width: 1px; height: 40px; overflow: hidden;
  background: rgba(255,255,255,.26);
}
.portada-desliza-linea span {
  position: absolute; left: 0; top: 0; width: 1px; height: 15px;
  background: var(--oro);
  animation: desliza-gota 2.2s cubic-bezier(.6, 0, .3, 1) infinite;
}
@keyframes desliza-gota {
  0%        { transform: translate3d(0, -15px, 0); }
  70%, 100% { transform: translate3d(0, 40px, 0); }
}
/* Con «reducir movimiento» la gota no viaja: late en su sitio (solo opacidad) */
@keyframes desliza-latido { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .portada-desliza-linea span {
    top: 12px; transform: none;
    animation-name: desliza-latido; animation-duration: 2.4s !important;
    animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  }
}
@keyframes desliza-sale { to { opacity: 0; } }
@supports (animation-timeline: scroll()) {
  .portada-desliza {
    animation-name: desliza-sale; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: scroll(root); animation-range: 0px 180px;
    animation-duration: auto !important;
  }
}

/* ── 2. Partículas del taco ──
   Hojas de cilantro, cebolla, tomate y carne recortadas del propio póster
   (config.js › tacoVideo.particulas). taco.js las coloca y las mueve con el
   mismo recorrido que el vídeo; aquí solo el vaivén lento, que es lo único
   que se mueve solo y por eso se apaga con «reducir movimiento». Van encima
   del vídeo y debajo de las frases. */
.taco-particulas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.taco-particula {
  position: absolute; display: block; height: auto;
  transform: translate3d(-50%, 0, 0); will-change: transform;
}
.taco-particula img {
  display: block; width: 100%; height: auto;
  animation: particula-flota 9s ease-in-out infinite alternate;
}
@keyframes particula-flota {
  from { transform: translate3d(-5px, 7px, 0) rotate(-8deg); }
  to   { transform: translate3d(6px, -9px, 0) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) { .taco-particula img { animation: none !important; } }

/* ── 3. Luchadores que se juntan ──
   La franja es ahora una escena de tres capas: la madera con los rótulos
   (placa limpia) y cada luchador recortado en su sitio exacto, así que
   quietos se ve la imagen original tal cual. En cuanto asoma un tercio de la
   franja, el de la mesa llega desde la izquierda y el del tequila desde la
   derecha; se encuentran con la franja algo por encima del centro de la
   pantalla y ahí se quedan. El parallax vertical de la franja sigue moviendo la escena entera. */
.valores--luchadores { view-timeline-name: --luchadores; }
/* top: 0 anula el top: -18% de la franja antigua (con position: relative sí cuenta) */
.valores--luchadores .franja-escena { position: relative; top: 0; aspect-ratio: 2048 / 768; }
.franja-escena > img { position: absolute; display: block; max-width: none; }
.franja-fondo { left: 0; top: 0; width: 100%; height: 100%; }
.franja-luchador { height: auto; will-change: transform; }
.franja-luchador--izq { left: 19.7754%; top: 19.1406%; width: 38.9648%; }
.franja-luchador--der { left: 49.3164%; top: 2.7344%; width: 27.0508%; }
/* Recorrido: un 36 % del ancho de la franja cada uno (en % de su propio ancho) */
@keyframes luchador-izq { from { transform: translate3d(-92.4%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes luchador-der { from { transform: translate3d(133.1%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@supports (view-timeline-name: --a) {
  .franja-luchador {
    animation-timing-function: cubic-bezier(.22, .61, .36, 1); animation-fill-mode: both;
    animation-timeline: --luchadores; animation-range: entry 35% cover 62%;
    animation-duration: auto !important;
  }
  .franja-luchador--izq { animation-name: luchador-izq; }
  .franja-luchador--der { animation-name: luchador-der; }
}

/* ── 4. Reseñas que entran ──
   La nota sube de 0,0 a la real y las estrellas se rellenan a la vez (app.js).
   Las tres tarjetas entran escalonadas desde abajo y sus estrellas se pintan
   de izquierda a derecha. */
.resenas-cifra { display: inline-block; min-width: 2.1ch; text-align: right; font-variant-numeric: tabular-nums; }
.resenas-estrellas { position: relative; display: inline-block; }
.estrellas-base { color: #E6DDCC; }
.estrellas-oro {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  color: var(--oro-claro); clip-path: inset(0 100% 0 0);
}
@keyframes resena-entra {
  from { opacity: 0; transform: translate3d(0, 60px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes estrellas-pinta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@supports (animation-timeline: view()) {
  .resena, .resena-estrellas {
    animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-duration: auto !important;
  }
  .resena { animation-name: resena-entra; animation-range: entry 0% cover 30%; }
  .resena:nth-child(2) { animation-range: entry 30% cover 38%; }
  .resena:nth-child(3) { animation-range: entry 60% cover 46%; }
  .resena-estrellas { animation-name: estrellas-pinta; animation-range: entry 60% cover 42%; }
  .resena:nth-child(2) .resena-estrellas { animation-range: entry 90% cover 50%; }
  .resena:nth-child(3) .resena-estrellas { animation-range: cover 30% cover 58%; }
  @media (max-width: 980px) {
    .resena, .resena:nth-child(2), .resena:nth-child(3) { animation-range: entry 0% cover 30%; }
    .resena-estrellas,
    .resena:nth-child(2) .resena-estrellas,
    .resena:nth-child(3) .resena-estrellas { animation-range: entry 70% cover 40%; }
  }
}

/* ── 5. Fotos de la carta que se abren ──
   Mismo gesto que la fachada de la portada: el marco pasa de recortado a
   completo y la foto se aleja un poco. En las tarjetas de sección y en las
   miniaturas de cada plato. El recorte final sale del marco (-40px) para no
   comerse la sombra de la miniatura. */
/* `clip` y no `hidden`: un marco con overflow: hidden es un contenedor de
   scroll, y la animación atada a view() de lo que va dentro se ataría a él (que
   no se mueve) en vez de a la página. */
.carta-tarjeta, .carta-tarjeta-foto, .carta-html .plato-foto { overflow: clip; }
@keyframes foto-marco-abre {
  from { clip-path: inset(13% 11% round 14px); }
  to   { clip-path: inset(-40px round 0); }
}
@keyframes foto-imagen-abre { from { transform: scale(1.26); } to { transform: scale(1); } }
@supports (animation-timeline: view()) {
  .carta-tarjeta-foto, .carta-tarjeta-foto img,
  .carta-html .plato-foto, .carta-html .plato-foto img, .carta-cat-foto {
    animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: view(); animation-duration: auto !important;
  }
  .carta-tarjeta-foto, .carta-html .plato-foto, .carta-cat-foto { animation-name: foto-marco-abre; }
  .carta-tarjeta-foto img, .carta-html .plato-foto img { animation-name: foto-imagen-abre; }
  .carta-tarjeta-foto, .carta-cat-foto { animation-range: entry 0% cover 42%; }
  .carta-tarjeta-foto img { animation-range: entry 0% cover 55%; }
  .carta-html .plato-foto { animation-range: entry 0% cover 30%; }
  .carta-html .plato-foto img { animation-range: entry 0% cover 40%; }
}
/* Sin animaciones atadas al scroll: app.js marca .fotos-vigia y abre cada
   foto al asomar, con una transición. */
.fotos-vigia .carta-tarjeta-foto, .fotos-vigia .carta-html .plato-foto, .fotos-vigia .carta-cat-foto {
  clip-path: inset(13% 11% round 14px); transition: clip-path .9s cubic-bezier(.2, .7, .2, 1);
}
.fotos-vigia .carta-tarjeta-foto img, .fotos-vigia .carta-html .plato-foto img {
  transform: scale(1.26); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.fotos-vigia .carta-tarjeta-foto.foto-vista, .fotos-vigia .carta-html .plato-foto.foto-vista,
.fotos-vigia .carta-cat-foto.foto-vista { clip-path: inset(-40px round 0); }
.fotos-vigia .carta-tarjeta-foto.foto-vista img, .fotos-vigia .carta-html .plato-foto.foto-vista img { transform: scale(1); }

/* ── 6. Galería en pasarela ──
   La sección se queda fija y las fotos pasan de derecha a izquierda mientras
   se baja. app.js calcula el recorrido (--recorrido, en px sin unidad) y la
   altura de la sección; el movimiento lo hace el navegador atado al scroll
   (o app.js donde no sabe). Sin JavaScript es una tira que se desliza a lo
   ancho con el dedo. */
.galeria { position: relative; background: #0F0D0B; color: rgba(245,239,230,.72); }
.galeria-fija { position: relative; overflow: hidden; padding: 70px 0 60px; }
.galeria-cabeza {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  max-width: 1200px; margin: 0 auto 34px; padding: 0 20px;
}
.galeria-intro { font-size: 15px; line-height: 24px; max-width: 46ch; }
.galeria-cuenta { font-family: var(--serif); font-size: 22px; color: #F5EFE6; white-space: nowrap; }
.galeria-cuenta span { color: var(--oro); }
.galeria-pista {
  display: flex; align-items: flex-start; gap: clamp(22px, 3vw, 48px);
  width: max-content; margin: 0; padding: 0 max(20px, calc(50vw - 600px)); list-style: none;
}
.galeria-item { margin: 0; flex: 0 0 auto; }
.galeria-item:nth-child(even) { margin-top: clamp(30px, 7svh, 80px); }
.galeria-item img {
  display: block; height: min(54svh, 520px); width: auto; max-width: none;
  object-fit: cover; border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.galeria-item:nth-child(even) img { height: min(44svh, 430px); }
.galeria-item figcaption {
  margin-top: 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245,239,230,.6);
}
.galeria-rotulo {
  position: absolute; left: 0; bottom: -0.16em; z-index: 0; margin: 0;
  font-family: var(--serif); font-weight: 700; font-size: clamp(120px, 22vw, 330px); line-height: 1;
  white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(197,157,95,.16);
  pointer-events: none;
}
.galeria-cabeza, .galeria-pista, .galeria-avance { position: relative; z-index: 1; }
.galeria-avance {
  display: none; height: 2px; max-width: 1200px; margin: 38px auto 0;
  background: rgba(255,255,255,.12); overflow: hidden;
}
.galeria-avance span { display: block; height: 100%; background: var(--oro); transform-origin: 0 50%; transform: scaleX(0); }
.galeria-final { background: #0F0D0B; padding: 10px 20px 90px; text-align: center; }
.galeria-final .boton { background: var(--oro); color: var(--tinta); }
.galeria-final .boton:hover { background: #F5EFE6; }
@media (max-width: 768px) {
  .galeria-cabeza { margin-bottom: 22px; }
  .galeria-intro { font-size: 14px; line-height: 21px; }
  .galeria-cuenta { font-size: 18px; }
  .galeria-item img, .galeria-item:nth-child(even) img {
    width: 76vw; height: auto; aspect-ratio: 4 / 5; max-height: 58svh;
  }
  .galeria-item:nth-child(even) { margin-top: 5svh; }
  .galeria-item:nth-child(even) img { aspect-ratio: 1 / 1; }
  .galeria-item figcaption { font-size: 10.5px; letter-spacing: .16em; max-width: 76vw; }
}
@media (max-height: 560px) and (min-width: 769px) {
  .galeria-item img { height: 58svh; }
  .galeria-item:nth-child(even) img { height: 48svh; }
  .galeria-item:nth-child(even) { margin-top: 4svh; }
}

/* ── 7. Papel picado en Eventos ──
   Una guirnalda cruza la franja clara bajo la cabecera. La cuerda es una
   curva; cada banderita cuelga de su punto (--t de 0 a 1) y app.js la
   balancea con el scroll: una ola que recorre la guirnalda al bajar o subir,
   y un empujón de «viento» con la velocidad que se asienta enseguida (solo
   sin «reducir movimiento»). */
.eventos-panel--papel { position: relative; padding-top: 190px; overflow: hidden; }
.papel-picado {
  --sag: 42px; --ancho: 62px;
  position: absolute; left: -2%; right: -2%; top: 18px; height: 150px;
  pointer-events: none; z-index: 1;
}
.papel-cuerda { position: absolute; left: 0; top: 0; width: 100%; height: 100px; overflow: visible; }
.papel-cuerda path { fill: none; stroke: #6B5A45; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.papel {
  position: absolute; display: block;
  left: calc(var(--t) * 100%);
  top: calc(4 * var(--t) * (1 - var(--t)) * var(--sag) + 3px);
  width: var(--ancho); height: calc(var(--ancho) * 1.24);
  color: var(--c); opacity: .93;
  transform-origin: 50% 0;
  transform: translate3d(-50%, 0, 0);
  will-change: transform;
}
.papel svg { display: block; width: 100%; height: 100%; overflow: visible; }
.papel svg use { fill: currentColor; }
@media (max-width: 768px) {
  .eventos-panel--papel { padding-top: 124px; }
  .papel-picado { --sag: 22px; --ancho: 36px; top: 12px; height: 90px; }
  .papel-cuerda { height: 52px; }
  .papel:nth-child(odd of .papel) { display: none; }
}

/* ════ MAPA A PETICIÓN (17/9/2026) ════
   Google Maps instala cookies de Google al cargarse. Para no necesitar banner
   de cookies, el mapa no se carga hasta que el visitante pulsa «Ver el mapa»
   (y a partir de ahí se recuerda). Mientras, la fachada con la dirección. */
.mapa-diferido { position: relative; overflow: hidden; background: #1a1613; }
.mapa-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mapa-aviso {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(14,11,9,.5), rgba(14,11,9,.78));
  color: rgba(245,239,230,.86);
}
.mapa-pin { width: 34px; height: 34px; color: var(--oro); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.mapa-dir { font-family: var(--serif); font-size: 24px; line-height: 30px; color: #fff; margin: 0 !important; }
.mapa-boton { background: #fff; color: var(--tinta); }
.mapa-boton:hover { background: var(--oro); color: var(--tinta); }
.mapa-nota { max-width: 36ch; margin: 0 !important; font-size: 12.5px !important; line-height: 18px !important; color: rgba(245,239,230,.86) !important; }
.mapa-nota a, .mapa-enlace { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.mapa-enlace { font-size: 13px; }
.mapa--cargado .mapa-aviso, .mapa--cargado .mapa-foto { display: none; }

/* ── Textos legales: fecha y datos que faltan por rellenar ── */
.legal-fecha { font-size: 13px; color: var(--gris); margin-top: -12px; }
.texto-legal ul { margin-bottom: 14px; }
.texto-legal a { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }
.texto-legal code { font-size: 13px; background: var(--claro); padding: 1px 6px; border-radius: 4px; }
mark.pendiente { background: #FFE9A8; color: var(--tinta); padding: 0 5px; border-radius: 3px; }

/* ════ PÁGINA 404 ════ */
.error-404 { background: var(--blanco); padding: 90px 0 110px; text-align: center; }
.error-404-cifra {
  font-family: var(--serif); font-weight: 700; font-size: clamp(90px, 16vw, 170px); line-height: 1;
  color: var(--oro-claro); margin-bottom: 10px;
}
.error-404 h2 { font-family: var(--serif); font-size: 36px; line-height: 40px; color: var(--tinta); margin-bottom: 16px; }
.error-404 p { max-width: 520px; margin: 0 auto; }
.error-404-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }
@media (max-width: 600px) {
  .error-404 { padding: 60px 0 80px; }
  .error-404 h2 { font-size: 28px; line-height: 32px; }
  .error-404-botones .boton { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   FONDO DE FLORES CONTINUO, TARJETAS FLOTANTES Y ESQUINAS REDONDAS
   (17/9/2026, petición del cliente)
   · Un único bordado de flores FIJO detrás de toda la web (body::before).
     Cabeceras de flores y pies son transparentes: ventanas por las que se ve
     ese fondo quieto mientras la página sube (el efecto de Nuestra Historia,
     ahora en todas). Sustituye a las capas .ventana-capa y .capa-patron de
     las cabeceras, que había que mover fotograma a fotograma.
   · En Historia, Reservas, Contacto, Eventos y la 404 (body.pagina-tarjetas)
     cada bloque es una tarjeta redondeada con margen a los lados y hueco
     entre tarjetas: por ahí también se ven las flores, quietas, mientras las
     tarjetas pasan por encima.
   · Nada con esquinas en punta: tarjetas, fotos, mapas, vídeos, paneles y
     campos llevan el radio de los tokens.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --radio: 30px;       /* tarjetas grandes */
  --radio-m: 20px;     /* fotos, mapas, vídeos, paneles */
  --radio-s: 12px;     /* campos, placas pequeñas */
  --margen-tarjeta: clamp(12px, 3.6vw, 56px);
  --hueco-tarjeta: clamp(44px, 8vw, 130px);
}
/* El fondo va en html y el body queda transparente: si el body pinta su
   propio fondo, tapa la capa de flores (z-index -1). */
html { background-color: #060505; }
body { background: transparent; }
body::before {
  content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  background-color: #060505;
  background-image: url('img/patrones/flores-bordado.webp');
  background-size: 1670px 260px; background-repeat: repeat; background-position: center top;
  pointer-events: none;
  will-change: transform; transform: translateZ(0);
}
@media (max-width: 768px) { body::before { background-size: 1100px 171px; } }

/* Lo que antes se apoyaba en el blanco del body lo pone ahora cada bloque */
.texto-legal { background: var(--blanco); }

/* La carta completa lleva su propio fondo fijo (vídeo): se recorta a su
   sección para que no asome por el pie, que ahora es transparente. */
.carta-html { clip-path: inset(0); }

/* ── Cabeceras de flores: ventanas ── */
.cabecera--flores, .cabecera--flores.con-capa { background: transparent; }
.cabecera--flores .capa-patron { display: none; }
.cabecera--flores .cabecera-velo {
  background: linear-gradient(180deg, rgba(6,5,5,.5), rgba(6,5,5,.32) 55%, rgba(6,5,5,0));
}
@supports (view-timeline-name: --a) {
  .cabecera--flores { view-timeline-name: --cabecera; }
  .cabecera--flores h1 {
    animation-name: cabecera-titulo; animation-timing-function: linear; animation-fill-mode: both;
    animation-timeline: --cabecera; animation-range: exit 0% exit 100%;
    animation-duration: auto !important;
  }
}

/* ── Pies: ventanas en todas las páginas ──
   Igual que el de Nuestra Historia: sin fondo propio ni flores difuminadas,
   con el mismo degradado encima para que el texto se lea sobre las flores. */
.pie { background: transparent; }
.pie::before { display: none; }
.pie::after { background: linear-gradient(180deg, rgba(8,6,5,.35), rgba(8,6,5,.49)); }
.premio { border-radius: var(--radio-s); }

/* ── Tarjetas flotantes ── */
.pagina-tarjetas main > section:not(.cabecera),
.pagina-tarjetas main > .banner {
  position: relative;
  width: min(1320px, calc(100% - 2 * var(--margen-tarjeta)));
  margin: 0 auto var(--hueco-tarjeta);
  border-radius: var(--radio);
  overflow: clip;
  box-shadow: 0 30px 90px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.04) inset;
}
/* La primera se monta sobre el pie de la cabecera: flota encima de las flores */
.pagina-tarjetas main > .cabecera + section { margin-top: -70px; z-index: 2; }
/* El último hueco lo deja el pie (su degradado empieza transparente) */
.pagina-tarjetas main > :last-child { margin-bottom: clamp(56px, 9vw, 140px); }
.pagina-tarjetas .banner { aspect-ratio: 4 / 1; }

/* Entrada suave: la tarjeta sube un poco al asomar, sobre las flores quietas */
@keyframes tarjeta-flota {
  from { transform: translate3d(0, 70px, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
@supports (animation-timeline: view()) {
  .pagina-tarjetas main > section:not(.cabecera),
  .pagina-tarjetas main > .banner {
    animation-name: tarjeta-flota; animation-timing-function: cubic-bezier(.2, .7, .3, 1); animation-fill-mode: both;
    animation-timeline: view(); animation-range: entry 0% entry 45%;
    animation-duration: auto !important;
  }
}
@media (max-width: 768px) {
  :root { --radio: 24px; --radio-m: 16px; }
  .pagina-tarjetas main > .cabecera + section { margin-top: -44px; }
}

/* ── Esquinas redondas en todo lo demás ── */
.presenta .presenta-foto { border-radius: var(--radio); }
@keyframes presenta-foto-marco {
  from { clip-path: inset(9% 7% 9% 7% round var(--radio)); }
  to   { clip-path: inset(0 0 0 0 round var(--radio)); }
}
.historia-video, .video-presenta, .ubicacion-mapa, .contacto-mapa, .mapa-diferido,
.nosotros-foto img, .carta-cat-foto, .galeria-item img, .panel, .menu-movil,
.carta-tarjeta, .banner, .banner img, .banner-marcador {
  border-radius: var(--radio-m);
}
.ubicacion-mapa, .contacto-mapa, .video-presenta, .historia-video, .carta-tarjeta { overflow: hidden; }
.ubicacion-mapa iframe, .contacto-mapa iframe { border-radius: inherit; }
.formulario input, .formulario textarea { border-radius: var(--radio-s); }
.galeria-avance, .galeria-avance span { border-radius: 2px; }
.menu-movil { overflow: hidden; }
/* Dentro de una tarjeta, lo que la llena entera hereda su curva */
.pagina-tarjetas .banner img { border-radius: 0; }
.premio img { border-radius: 6px; }
.carta-indice { border-radius: 16px; }

/* ════ PIE: CRISTAL OSCURO DETRÁS DE LAS LETRAS (17/9/2026) ════
   Cada texto del pie lleva pegada detrás una píldora de cristal oscuro suave
   (a la mitad de intensidad desde el 17/9/2026, para que se vean las flores),
   estilo Apple: difumina y apaga las flores solo donde hay letras, con un
   brillo fino en el borde. Donde no hay texto, las flores quedan tal cual
   (con el mismo degradado que el pie de Nuestra Historia). Sin
   backdrop-filter, la píldora se vuelve casi opaca. */
.pie-t, .pie-dato, .pie-lista a, .pie-glovo, .pie-copy, .credito {
  width: fit-content; max-width: 100%;
  background:
    linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.015) 45%, rgba(255,255,255,.025)),
    rgba(12,9,7,.17);
  -webkit-backdrop-filter: blur(6px) saturate(1.25) brightness(.92);
  backdrop-filter: blur(6px) saturate(1.25) brightness(.92);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.14);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pie-t, .pie-dato, .pie-lista a, .pie-glovo, .pie-copy, .credito { background: rgba(14,11,9,.55); }
}
.pie-t { display: flex; align-items: center; padding: 6px 14px; margin-bottom: 14px; }
.pie-t--marca { gap: 10px; padding: 5px 16px 5px 8px; }
.pie-t--seg { margin-top: 26px; }
.pie-dato { display: flex; padding: 7px 14px 7px 12px; margin-bottom: 8px; }
.pie-dato a { min-height: 0; }
.pie-lista li { margin-bottom: 8px; }
.pie-lista a { display: inline-block; padding: 5px 14px; line-height: 22px; }
.pie-glovo { display: inline-flex; padding: 5px 16px 5px 6px; min-height: 0; }
.pie-redes { gap: 10px; margin-top: 14px; }
.pie-redes a {
  background: rgba(12,9,7,.17);
  -webkit-backdrop-filter: blur(6px) saturate(1.25) brightness(.92);
  backdrop-filter: blur(6px) saturate(1.25) brightness(.92);
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 18px rgba(0,0,0,.14);
}
/* Copyright y crédito: centrados, cada uno en su píldora; sin la raya de
   separación (no hay letras en ella). */
.pie-copy {
  margin: 30px auto 0; padding: 6px 16px;
  border-top: 0;
  color: rgba(255,255,255,.66);
}
.credito { margin: 8px auto 0; padding: 5px 16px; color: rgba(255,255,255,.6); }
@media (max-width: 768px) {
  .pie-lista a { padding: 5px 12px; }
  .pie-copy, .credito { margin-left: 16px; margin-right: 16px; margin-inline: auto; }
  .pie-copy { font-size: 10.5px; }
}

/* ════════════════════════════════════════════════════════════════════
   LOS AÑOS EN GRANDE, GALERÍA A MANO Y TEXTO MÁS GRANDE (17/9/2026)
   ════════════════════════════════════════════════════════════════════ */
:root { --rojo: #C2102E; }   /* el rojo del rótulo de la fachada, más vivo */

/* ── Los años, en el centro de la pantalla ──
   El contador sube de 1996 a 2026 con el scroll y despacio (app.js,
   CONTADOR ATADO AL SCROLL). El año va en rojo cantina sobre el gris claro
   de la presentación, que sigue arriba. */
.anos {
  background: var(--claro);
  padding: 0 20px clamp(54px, 9vw, 110px);
  text-align: center;
}
.anos-linea { display: block; margin: 0; }
.anos-cifra {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(104px, 19vw, 300px); line-height: .9; letter-spacing: -.015em;
  color: var(--rojo); font-variant-numeric: tabular-nums;
  text-shadow: 0 14px 40px rgba(194, 16, 46, .16);
}
.anos-txt {
  display: block; margin-top: clamp(6px, 1.4vw, 18px);
  font-family: var(--sans); font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gris);
}
.presenta { padding-bottom: clamp(30px, 5vw, 60px) !important; }

/* ── Galería: tira que se pasa a mano ── */
.galeria-fija { position: relative; overflow: clip; padding: 64px 0 54px; }
.galeria-cabeza { align-items: center; }
.galeria-mandos { display: flex; align-items: center; gap: 10px; }
.galeria-flecha {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #F5EFE6; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  transition: background .2s, border-color .2s, opacity .2s;
}
.galeria-flecha svg { width: 22px; height: 22px; }
.galeria-flecha:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); }
.galeria-flecha:disabled { opacity: .3; cursor: default; }
.galeria-carril {
  position: relative; z-index: 1;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: rgba(197,157,95,.6) rgba(255,255,255,.08);
  cursor: grab;
}
.galeria-carril--arrastrando { cursor: grabbing; scroll-snap-type: none; }
.galeria-carril:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }
.galeria-carril::-webkit-scrollbar { height: 8px; }
.galeria-carril::-webkit-scrollbar-track { background: rgba(255,255,255,.07); border-radius: 8px; }
.galeria-carril::-webkit-scrollbar-thumb { background: rgba(197,157,95,.6); border-radius: 8px; }
.galeria-item { scroll-snap-align: center; }
.galeria-item img { user-select: none; -webkit-user-drag: none; }
.galeria-avance { display: block; width: calc(100% - 40px); }
/* El rótulo del fondo: crece y se desplaza según se avanza (--p, de 0 a 1) */
.galeria-rotulo {
  left: 6%; bottom: 8%;
  transform-origin: 0% 100%;
  transform: translate3d(calc(var(--p, 0) * -18%), 0, 0) scale(calc(1 + var(--p, 0) * .55));
  -webkit-text-stroke: 1px rgba(197,157,95,.22);
  will-change: transform;
}
@media (max-width: 768px) {
  .galeria-fija { padding: 44px 0 40px; }
  .galeria-flecha { width: 42px; height: 42px; }
  .galeria-rotulo { font-size: clamp(74px, 26vw, 150px); left: 5%; bottom: 10%; }
}

/* ── Texto más grande: el público de la cantina es mayor (17/9/2026) ──
   Segunda subida el mismo día: el cuerpo pasa a 19 px en ordenador y 18 px en
   el teléfono, y todo lo pequeño (notas, pies de foto, pie de página) sube
   en proporción. */
body { font-size: 19px; line-height: 31px; }
p, li, dd, dt, figcaption, label, blockquote,
.presenta-texto p, .nosotros-texto p, .identidad p, .ubicacion-datos p,
.contacto-datos p, .resena p, .plato-desc, .texto-legal p, .texto-legal li,
.desplegable-c, .panel > p, .galeria-intro, .reservas-nota, .carta-html p {
  font-size: 19px; line-height: 31px;
}
.mapa-nota { font-size: 15.5px !important; line-height: 23px !important; }
.carta-nota, .formulario .aviso, .legal-fecha, .resenas-fuente { font-size: 17px; line-height: 27px; }
.resena footer { font-size: 17px; }
.resena footer span { font-size: 16px; }
.ubicacion .horario-fila, .contacto-datos .horario-fila, .reservas-horarios .horario-fila { font-size: 18px; line-height: 28px; }
.formulario label { font-size: 18px; }
.formulario input, .formulario textarea { font-size: 19px; }
.desplegable-b { font-size: 20px; }
.carta-tarjeta-t { font-size: 24px; line-height: 28px; }
.carta-tarjeta-n { font-size: 16px; }
.carta-html .plato-nombre { font-size: 24px; line-height: 29px; }
.carta-html .plato-precio { font-size: 22px; }
.carta-html .plato-desc { font-size: 18px; line-height: 29px; }
.carta-indice a, .carta-volver { font-size: 16.5px; }
.historia-pie, .video-presenta figcaption, .galeria-item figcaption { font-size: 15px; }
.pie-dato, .pie-lista a, .pie-glovo { font-size: 17px; line-height: 26px; }
.pie-t { font-size: 15px; }
.pie-copy { font-size: 14px; }
.credito { font-size: 16px; }
.boton { font-size: 18px; }
.estado-pildora { font-size: 16px; }
.galeria-cuenta { font-size: 26px; }
.anos-txt { font-size: clamp(16px, 1.7vw, 21px); }
@media (min-width: 1200px) { .barra-nav a { font-size: 17px; } }
.menu-movil a { font-size: 20px; }
@media (max-width: 768px) {
  body { font-size: 18px; line-height: 30px; }
  p, li, dd, dt, figcaption, label, blockquote,
  .presenta-texto p, .nosotros-texto p, .identidad p, .ubicacion-datos p,
  .contacto-datos p, .resena p, .plato-desc, .texto-legal p, .texto-legal li,
  .desplegable-c, .panel > p, .galeria-intro, .reservas-nota, .carta-html p {
    font-size: 18px; line-height: 30px;
  }
  .carta-html .plato-nombre { font-size: 22px; line-height: 27px; }
  .carta-html .plato-desc { font-size: 17.5px; line-height: 28px; }
  .pie-dato, .pie-lista a, .pie-glovo { font-size: 16.5px; }
  .pie-copy { font-size: 13px; }
  .boton { font-size: 17.5px; }
  .ubicacion .horario-fila span:first-child,
  .contacto-datos .horario-fila span:first-child,
  .reservas-horarios .horario-fila span:first-child { font-size: 15px; }
}

/* ════ WHATSAPP EN BOTONES Y FORMULARIOS (17/9/2026) ════ */
.boton--whatsapp { background: #0F7A3E; color: #fff; gap: 10px; }   /* verde WhatsApp oscurecido: texto blanco a 5,4:1 */
.boton--whatsapp::before {
  content: ''; width: 20px; height: 20px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2A9.7 9.7 0 0 0 3.7 17l-1.3 4.8 4.9-1.3A9.7 9.7 0 1 0 12 2.2Zm0 17.7c-1.5 0-2.9-.4-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1 1 12 19.9Zm4.4-6c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.8 1c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.5-.4h-.5a.9.9 0 0 0-.6.3 2.7 2.7 0 0 0-.9 2c0 1.2.9 2.4 1 2.5.1.2 1.7 2.7 4.2 3.8 1.6.7 2.2.7 3 .6.5-.1 1.4-.6 1.6-1.2.2-.6.2-1.1.1-1.2l-.5-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2A9.7 9.7 0 0 0 3.7 17l-1.3 4.8 4.9-1.3A9.7 9.7 0 1 0 12 2.2Zm0 17.7c-1.5 0-2.9-.4-4.1-1.1l-.3-.2-2.9.8.8-2.8-.2-.3A8 8 0 1 1 12 19.9Zm4.4-6c-.2-.1-1.4-.7-1.7-.8-.2-.1-.4-.1-.5.1l-.8 1c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.5-.4h-.5a.9.9 0 0 0-.6.3 2.7 2.7 0 0 0-.9 2c0 1.2.9 2.4 1 2.5.1.2 1.7 2.7 4.2 3.8 1.6.7 2.2.7 3 .6.5-.1 1.4-.6 1.6-1.2.2-.6.2-1.1.1-1.2l-.5-.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.boton--whatsapp:hover { background: #0B6E35; color: #fff; }
.reservas-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.formulario .aviso a { color: #fff; text-decoration: underline; }
.formulario--contacto form { max-width: 640px; }

/* ════ GALERÍA: EL RÓTULO PASA BAJO LAS FOTOS (17/9/2026) ════
   «Cantina Tapachula» va en su propia fila, entre las fotos y la barra de
   avance, y pasa de derecha a izquierda —creciendo un poco— según se pasan
   las fotos con el dedo o las flechas (--p de 0 a 1, --pasa en px). Menos
   hueco vacío hasta la barra, el botón y el pie. */
.galeria-rotulo-fila {
  position: relative; z-index: 1; overflow: hidden;
  margin-top: clamp(10px, 2vw, 22px);
  padding-left: max(20px, calc(50vw - 600px));
}
.galeria .galeria-rotulo {
  position: relative; left: auto; bottom: auto; z-index: auto;
  display: inline-block; margin: 0; white-space: nowrap;
  font-size: clamp(72px, 12vw, 190px); line-height: 1.02;
  color: transparent; -webkit-text-stroke: 1.5px rgba(197,157,95,.6);
  transform-origin: 0% 60%;
  transform: translate3d(calc(var(--p, 0) * var(--pasa, 0) * -1px), 0, 0) scale(calc(1 + var(--p, 0) * .15));
  will-change: transform;
}
.galeria .galeria-avance { margin-top: 14px; }
.galeria-fija { padding-bottom: 26px; }
.galeria-final { padding: 26px 20px 46px; }
@media (max-width: 768px) {
  .galeria .galeria-rotulo { font-size: clamp(64px, 20vw, 110px); -webkit-text-stroke-width: 1.2px; }
  .galeria-fija { padding-bottom: 20px; }
  .galeria-final { padding: 22px 20px 36px; }
}

/* ════ LA CATRINA, EN GRANDE (17/9/2026) ════
   Petición: que la catrina se vea más y haga marca. El emblema cuelga de la
   barra como un sello: arranca arriba y baja por debajo de la franja de los
   enlaces, que siguen a la altura de siempre. En móvil va centrado. En el
   pie pasa a ser un sello de verdad junto al nombre. */
.barra-logo { align-self: flex-start; margin-top: 8px; min-height: 0; }
.barra-logo img {
  height: 172px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
}
body:has(.texto-legal, .carta-html) .barra-logo img { filter: drop-shadow(0 4px 14px rgba(0,0,0,.6)); }
@media (min-width: 1200px) {
  .barra-logo img { height: 190px; }
}
@media (min-width: 1001px) and (max-width: 1199px) {
  .barra-logo img { height: 150px; }
  .barra-logo { margin-right: 18px; }
}
/* Lo que arranca arriba del todo baja para que el sello no lo tape */
.texto-legal { padding-top: 230px !important; }
@media (max-width: 1000px) {
  .texto-legal { padding-top: 196px !important; }
  .carta-portada-inner { padding-top: 186px; }
}
@media (max-width: 1000px) {
  .barra-logo { top: 6px; }
  .barra-logo img { height: 150px; }
}
@media (max-width: 360px) {
  .barra-logo img { height: 128px; }
}
.pie-t--marca { gap: 16px; }
.pie-logo { width: 84px; }
@media (max-width: 768px) {
  .pie-logo { width: 70px; }
}

/* ════ FOTOS DE LA CARTA EN HORIZONTAL (17/9/2026) ════
   Cambio de criterio del cliente: las tomas horizontales del reportaje, las
   más cercanas al plato, para que dé ganas de tocar la comida. Las fotos van
   sin recortar ni retocar (1200×800, 3:2), así que tarjetas y miniaturas
   pasan a 3:2 y se ven enteras. Copón y canutillos no tienen toma horizontal
   y siguen con la vertical, encuadrada en el mismo marco. */
.carta-tarjeta-foto { aspect-ratio: 3 / 2; }
.carta-html .plato-foto { width: 186px; height: 124px; }
@media (max-width: 768px) {
  .carta-html .plato-foto { width: 132px; height: 88px; }
}

/* ════ «CARTA COMPLETA», EN GRANDE Y EN ROJO (17/9/2026) ════
   Petición: el título de la carta más grande, rojo y llamativo, y debajo solo
   «Gran variedad de platos». El rojo se aviva sobre el cristal oscuro para
   que llegue a contraste de texto grande (4,3:1). */
.carta-html h1 {
  color: #EF3347;
  font-size: clamp(52px, 6.4vw, 84px); line-height: 1.02;
  margin-bottom: 14px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 28px rgba(239,51,71,.35);
}
.carta-html .carta-variedad {
  font-family: var(--serif); font-size: 26px; line-height: 1.25; color: #F5EFE6;
}
@media (max-width: 768px) {
  .carta-html h1 { font-size: clamp(42px, 12.5vw, 54px) !important; line-height: 1.04 !important; }
  .carta-html .carta-variedad { font-size: 22px; }
}

/* ════ PORTADA: LAS FLORES DEL FONDO, DESPUÉS (17/9/2026, rendimiento) ════
   En la portada el bordado fijo no se ve hasta bajar (lo tapan el vídeo y
   el taco), pero sus 250 KB se pedían los primeros. Ahí se pinta cuando la
   página ha cargado: app.js pone .flores-ya en el evento load. */
body.flores-diferidas:not(.flores-ya)::before { background-image: none; }
/* El <picture> de la portada no debe alterar el encuadre del póster */
.portada-media picture { display: contents; }

/* ════ «NUESTROS PLATILLOS MEXICANOS», EN MOSTAZA (17/9/2026) ════
   Texto y color que pidió Elisa: el título en mostaza (sustituye al rojo) y
   su aviso sobre celíacos. El título es más largo que «Carta completa», así
   que baja un punto para ir en dos líneas como mucho. */
.carta-html h1 {
  color: #E3A82B;
  font-size: clamp(46px, 5.2vw, 72px); line-height: 1.04;
  text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 28px rgba(227,168,43,.28);
}
.carta-html .carta-avisos { margin-top: 10px; }
@media (max-width: 768px) {
  .carta-html h1 { font-size: clamp(36px, 10.4vw, 44px) !important; line-height: 1.06 !important; }
}
/* El título, centrado: en el móvil «Mexicanos» queda en el medio justo de la
   pantalla (el panel va centrado con márgenes iguales). */
.carta-html h1 { text-align: center; }

/* ════ SOLO INSTAGRAM (17/9/2026) ════
   Fuera Facebook, a petición del cliente. El símbolo de Instagram pasa a ser
   el oficial (marco redondeado, objetivo y punto, macizos con huecos), que a
   16 px se lee limpio; el trazo fino de antes se empastaba. */
.barra-redes svg { width: 18px; height: 18px; }
.pie-redes svg { width: 19px; height: 19px; }
/* En el pie el símbolo quedaba suelto sobre las flores: mismo círculo de
   color que en la barra, que se ve de lejos. */
.pie-redes a[aria-label="Instagram"] {
  background: radial-gradient(circle at 28% 108%, #FEDA75 0%, #FA7E1E 24%, #D62976 52%, #962FBF 76%, #4F5BD5 100%);
  border-color: transparent; color: var(--blanco);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.pie-redes a[aria-label="Instagram"]:hover { filter: brightness(1.12); background: radial-gradient(circle at 28% 108%, #FEDA75 0%, #FA7E1E 24%, #D62976 52%, #962FBF 76%, #4F5BD5 100%); }

/* El símbolo de Instagram ahora es el oficial de la marca (Simple Icons):
   un solo trazo macizo, idéntico al de la app. */
.barra-redes svg, .pie-redes svg { width: 19px; height: 19px; }

/* ════ «MÉXICO EN CADA BOCADO» SIN CORTARSE (17/9/2026) ════
   Con el texto más grande y el espaciado de .3em se salía del panel por la
   derecha en el móvil. Ahí va algo más junto y, si hace falta, en dos líneas. */
@media (max-width: 768px) {
  .carta-lema {
    white-space: normal; letter-spacing: .16em; font-size: 11px;
    gap: 10px; justify-content: center;
  }
}