/* =========================================================
   TELECLUB MASDACHE — hoja única de la web pública

   De dónde sale la paleta
   -----------------------
   Del propio rótulo de la fachada y del pueblo. El óvalo del logotipo
   da la arena; la ermita y las casas de Masdache, la cal; y el suelo
   sobre el que está sentado el pueblo entero —el picón de las coladas
   del Timanfaya— da la tinta. El acento no es dorado: es el color de
   la brasa, que es de donde sale casi toda la carta.

   No se carga ninguna hoja de fuera. Las dos tipografías van en
   `assets/fonts/` y los iconos en `assets/vendor/fontawesome-6.5.2/`,
   servidos desde el propio dominio. Aquí no hay Tailwind ni ningún
   otro framework: las rejillas están escritas a mano, que son cuatro.
   Con eso la `Content-Security-Policy` puede decir `script-src 'self'`
   sin `unsafe-inline` ni `unsafe-eval`.

   Los tres gestos que sostienen el diseño
   ---------------------------------------
   1. EL ARCO. El medio punto de la puerta de la ermita del logotipo.
      Enmarca la foto del hero, corona las fichas de la cocina y cierra
      los carteles. Es lo que hace que la web se reconozca de lejos.
   2. EL PICÓN. Los bloques oscuros llevan un grano de puntos muy
      tenue (`.grano`), que es el lapilli visto de cerca.
   3. LA CHAPA. El óvalo con doble filete del rótulo, reducido a
      etiqueta: los rótulos de sección y las pastillas del pie.
   ========================================================= */

:root {
  /* --- Color --- */
  --picon:       #17140F;   /* tinta volcánica: pies, bloques oscuros, texto fuerte */
  --picon-alto:  #241F17;   /* un punto más claro, para hovers sobre oscuro */
  --picon-hondo: #0E0C09;   /* el más hondo: el pie de página */
  --cal:         #F7F3EA;   /* cal canaria: el fondo de casi todo */
  --cal-alta:    #FFFCF6;   /* superficies levantadas sobre la cal */
  --arena:       #E5D0AB;   /* el óvalo del rótulo */
  --arena-honda: #C8A876;   /* filetes y bordes sobre claro */
  --arena-suave: #F0E4CE;

  /* La brasa es el acento. Sobre la cal da 5,1:1, así que vale también
     para texto pequeño: los rótulos de sección van a 12 px. El tono
     «tinta» se reserva para cuando cae sobre la arena, que es más
     clara y come contraste. */
  --brasa:       #B0451E;
  --brasa-viva:  #D2632C;   /* sobre oscuro: 4,9:1 contra el picón */
  --brasa-tinta: #8E3717;

  /* El verde de las parras de La Geria. Solo para decir «sí»: la mesa
     confirmada en la página de consulta. Sobre su tono suave da 6,3:1. */
  --vid:         #4B6A33;
  --vid-suave:   #E4ECDA;

  --texto:       #241F19;
  --apagado:     #6B6055;
  --linea:       rgba(36, 31, 25, .13);
  --filete:      #DED5C6;

  /* --- Escala tipográfica --- */
  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;

  /* --- Medidas --- */
  --shell: 1240px;
  /* Alto de las fotos de las dos cintas de la galería. Manda el alto y
     no el ancho: cada foto conserva su proporción y la cinta se ve
     pareja aunque las haya verticales y apaisadas mezcladas. */
  --foto-alto: 190px;
  --header-h: 92px;         /* alto de la cabecera en reposo */
  --header-fijo: 68px;      /* ya compactada por el scroll */
  --radio: 6px;
  /* Margen izquierdo del `.shell`. Lo usan el hero y «La casa» para
     alinear su columna de texto con el resto de la página aunque su
     caja se salga del contenedor. */
  --canal: max(20px, calc((100vw - var(--shell)) / 2 + 20px));

  /* Sombra de las piezas que se levantan del papel. Dos capas: una
     corta y densa que las pega al fondo y otra larga y difusa. */
  --sombra-corta: 0 2px 6px rgba(23, 20, 15, .07);
  --sombra:       0 2px 6px rgba(23, 20, 15, .07), 0 18px 40px -18px rgba(23, 20, 15, .28);
  --sombra-alta:  0 4px 10px rgba(23, 20, 15, .10), 0 34px 70px -28px rgba(23, 20, 15, .42);
}

@media (min-width: 768px)  { :root { --header-h: 108px; --header-fijo: 74px; --foto-alto: 240px; } }
@media (min-width: 1120px) { :root { --header-h: 122px; --header-fijo: 80px; --foto-alto: 300px; } }
/* Y de aquí en adelante crece con la pantalla, que no es capricho: un
   juego de fotos de la cinta tiene que medir más que el ancho de la
   ventana o, al dar la vuelta, se ve el hueco entre el final de un juego
   y el principio del siguiente. Con las nueve fotos de la fila más corta
   eso son unos ocho anchos por cada píxel de alto, así que 16vw deja
   margen de sobra en cualquier pantalla. */
@media (min-width: 1900px) { :root { --foto-alto: 16vw; } }

/* =========================================================
   1. RESET Y BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* El formulario de reserva y su resguardo se turnan con el atributo
   `hidden`. Cualquier `display` de una clase le ganaría, así que aquí
   se le devuelve la última palabra. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Al saltar a un ancla la cabecera ya está compactada: se reserva ese
     alto y no el del reposo, o quedaría un hueco muerto sobre el título. */
  scroll-padding-top: calc(var(--header-fijo) + 18px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--arena-honda) #E9E1D2;
  scrollbar-width: thin;
}

body {
  margin: 0;
  background: var(--cal);
  color: var(--texto);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Con el menú o la ampliación de foto abiertos, el fondo no se mueve.
   `overflow: hidden` a secas no basta en iOS —el cuerpo sigue rebotando—
   así que se fija el cuerpo entero y script.js le pone de `top` la
   posición guardada, para devolverla al cerrar. */
body.bloqueado {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 0; }
strong, b { font-weight: 700; }
::selection { background: var(--brasa); color: var(--cal-alta); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #E9E1D2; }
::-webkit-scrollbar-thumb { background: var(--arena-honda); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brasa); }

/* El foco visible es innegociable: se navega la web entera con el
   tabulador. Va con `:focus-visible` para que no salte al hacer clic. */
:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 2px;
}
.oscuro :focus-visible,
.site-footer :focus-visible { outline-color: var(--arena); }

.saltar {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 4000;
  padding: .7rem 1.2rem;
  background: var(--picon);
  color: var(--cal);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.saltar:focus { transform: translateY(0); }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 640px) { .shell { padding-inline: 32px; } }

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   2. TIPOGRAFÍA COMPARTIDA
   ========================================================= */
.titular {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  color: var(--picon);
}
.titular em {
  font-style: italic;
  font-weight: 400;
  color: var(--brasa);
}
.oscuro .titular, .site-footer .titular { color: var(--cal); }
.oscuro .titular em { color: var(--brasa-viva); }

.titular--grande { font-size: clamp(2.4rem, 1.3rem + 4.2vw, 4.4rem); }

/* Un titular pegado a su párrafo se lee como un bloque solo. Este margen va
   aquí y no en `.titular` para que las cabeceras de sección —que ya llevan
   su propio espaciado— no lo hereden dos veces. */
.titular + p,
.titular + .entradilla { margin-top: 1.15rem; }

/* El rótulo de sección: versalitas con un filete de brasa delante. */
.rotulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--brasa);
}
.rotulo::before {
  content: "";
  width: 30px; height: 2px;
  flex: none;
  background: currentColor;
}
.oscuro .rotulo, .site-footer .rotulo { color: var(--brasa-viva); }
.rotulo--centrado { justify-content: center; }

/* La chapa: el óvalo del rótulo de la fachada, con su doble filete. */
.chapa {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1.35rem;
  border: 1.5px solid var(--picon);
  border-radius: 999px;
  background: var(--arena);
  color: var(--picon);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
}
.chapa::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed rgba(23, 20, 15, .45);
  border-radius: 999px;
  pointer-events: none;
}
.chapa i { color: var(--brasa-tinta); font-size: .95em; }

.entradilla {
  max-width: 62ch;
  font-size: var(--fs-lg);
  color: var(--apagado);
}
.oscuro .entradilla { color: rgba(247, 243, 234, .74); }

.cabecera-sec { margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.cabecera-sec--centro { text-align: center; }
.cabecera-sec--centro .rotulo { justify-content: center; }
.cabecera-sec--centro .entradilla { margin-inline: auto; }
.cabecera-sec .entradilla { margin-top: 1.1rem; }

.cabecera-sec--partida {
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 900px) {
  .cabecera-sec--partida {
    grid-template-columns: 1fr minmax(280px, 30rem);
    align-items: end;
    gap: 3rem;
  }
  .cabecera-sec--partida .entradilla { margin-top: 0; padding-bottom: .4rem; }
}

/* =========================================================
   3. BOTONES
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: center;
  transition: background-color .22s ease, color .22s ease,
              border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn i { font-size: .95em; }

.btn-brasa {
  background: var(--brasa);
  border-color: var(--brasa);
  color: var(--cal-alta);
  box-shadow: var(--sombra-corta);
}
.btn-brasa:hover { background: var(--brasa-tinta); border-color: var(--brasa-tinta); box-shadow: var(--sombra); }

.btn-picon {
  background: var(--picon);
  border-color: var(--picon);
  color: var(--cal);
  box-shadow: var(--sombra-corta);
}
.btn-picon:hover { background: var(--picon-alto); border-color: var(--picon-alto); box-shadow: var(--sombra); }

.btn-arena {
  background: var(--arena);
  border-color: var(--arena);
  color: var(--picon);
}
.btn-arena:hover { background: var(--arena-suave); border-color: var(--arena-suave); }

.btn-linea {
  border-color: var(--picon);
  color: var(--picon);
}
.btn-linea:hover { background: var(--picon); color: var(--cal); }
.oscuro .btn-linea, .site-footer .btn-linea { border-color: rgba(229, 208, 171, .55); color: var(--arena); }
.oscuro .btn-linea:hover, .site-footer .btn-linea:hover { background: var(--arena); color: var(--picon); }

.btn-bloque { display: flex; width: 100%; }

/* =========================================================
   4. PIEZAS DE LA CASA — arco, grano, volcán
   ========================================================= */

/* EL ARCO. Medio punto exacto: para una caja de proporción 3/4 el
   radio vertical del arco es (ancho/2) / alto = 37,5 %. Si se cambia
   la proporción hay que recalcularlo o el arco sale ovalado. */
.arco {
  aspect-ratio: 3 / 4;
  border-radius: 50% 50% var(--radio) var(--radio) / 37.5% 37.5% var(--radio) var(--radio);
  overflow: hidden;
}
.arco > img { width: 100%; height: 100%; object-fit: cover; }

.arco--ancho {
  aspect-ratio: 4 / 3;
  border-radius: 50% 50% var(--radio) var(--radio) / 66.6% 66.6% var(--radio) var(--radio);
}

/* EL PICÓN. El lapilli visto de cerca: una trama de puntos muy tenue
   sobre los bloques oscuros. Va en `background-image` y no en un
   pseudoelemento para que no estorbe a nada de dentro. */
.oscuro {
  position: relative;
  background-color: var(--picon);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(229, 208, 171, .055) 1px, transparent 0);
  background-size: 8px 8px;
  color: var(--cal);
}
.oscuro h2, .oscuro h3 { color: var(--cal); }
.oscuro p { color: rgba(247, 243, 234, .78); }

/* EL VOLCÁN. La montaña del rótulo, calcada del logotipo: el perfil, el
   pliegue de la ladera y el espolón que baja por delante. No es un
   dibujo nuevo —está sacado píxel a píxel del PNG de la marca— y por eso
   la web y el rótulo de la fachada se reconocen como la misma casa.
   Se dibuja sola al entrar en pantalla, y sustituye al filete de
   siempre entre bloques. */
.separador {
  display: flex;
  justify-content: center;
  padding: clamp(2.4rem, 6vw, 4.2rem) 20px;
  color: var(--arena-honda);
}
.separador--justo { padding-block: clamp(1.6rem, 4vw, 2.6rem); }
.oscuro .separador { color: rgba(229, 208, 171, .5); }

.volcan { width: min(330px, 80vw); height: auto; }

/* Cada trazo lleva `pathLength="1"` en el SVG, así que su longitud real
   —que depende del `viewBox` y de la escala— deja de importar: se dibuja
   con un guion de 1 y se anima el desfase de 1 a 0. Sin eso habría que
   medir cada camino con JavaScript. */
.volcan-t {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(.65, 0, .35, 1);
}
.volcan.se-dibuja .volcan-t { stroke-dashoffset: 0; }
/* Se dibuja en el orden en que se dibujaría a mano y de izquierda a
   derecha, como se escribe: la línea, el perfil, el pliegue de dentro,
   el espolón, la línea de la derecha y, al final, el sol.
   El orden de los `path` en el SVG es el mismo, así que si se añade o se
   quita un trazo hay que recontar estos `nth-of-type`. */
.volcan-t:nth-of-type(2) { transition-delay: .3s; }
.volcan-t:nth-of-type(3) { transition-delay: .95s; }
.volcan-t:nth-of-type(4) { transition-delay: 1.15s; }
.volcan-t:nth-of-type(5) { transition-delay: 1.3s; }
.volcan-sol { opacity: 0; transition: opacity .6s ease 1.8s; }
.volcan.se-dibuja .volcan-sol { opacity: 1; }

/* Aparición al hacer scroll. Un velo de desenfoque muy corto además
   del desplazamiento: el bloque «enfoca» en vez de solo subir. */
.aparece {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease;
}
.aparece.esta-dentro { opacity: 1; transform: none; filter: none; }
.aparece-2 { transition-delay: .1s; }
.aparece-3 { transition-delay: .2s; }
.aparece-4 { transition-delay: .3s; }

/* =========================================================
   5. CURSOR PERSONALIZADO
   ========================================================= */
.cursor-aro, .cursor-punto {
  position: fixed;
  top: 0; left: 0;
  z-index: 99999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  /* La posición la compone el rAF de script.js: nunca se transiciona
     `transform` para no pelearse con él. */
  transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
}
.cursor-punto {
  width: 6px; height: 6px;
  background: var(--brasa);
  transition: opacity .3s ease, background-color .2s ease;
}
.cursor-aro {
  width: 34px; height: 34px;
  border: 1.5px solid rgba(176, 69, 30, .6);
  transition: opacity .3s ease, border-color .2s ease, background-color .2s ease;
}
.cursor-listo .cursor-aro, .cursor-listo .cursor-punto { opacity: 1; }
.cursor-sobre .cursor-aro { border-color: var(--brasa); background: rgba(176, 69, 30, .12); }
.cursor-sobre .cursor-punto { background: var(--arena); }

/* El cursor nativo solo se esconde cuando el nuestro ya está en
   pantalla (`cursor-listo` lo pone el primer movimiento del ratón). Si
   el JS no llegara, quien entra con ratón se queda con el suyo y no sin
   ninguno. Y hay que nombrar `a`, `button` y compañía uno por uno: la
   hoja del navegador declara un cursor sobre ellos, y una declaración
   siempre gana a un valor heredado. */
body.cursor-listo,
body.cursor-listo a,
body.cursor-listo button,
body.cursor-listo [role="button"],
body.cursor-listo label,
body.cursor-listo select,
body.cursor-listo summary { cursor: none; }

@media (hover: none), (pointer: coarse) {
  body.cursor-listo,
  body.cursor-listo a,
  body.cursor-listo button,
  body.cursor-listo [role="button"],
  body.cursor-listo label,
  body.cursor-listo select,
  body.cursor-listo summary { cursor: auto; }
  .cursor-aro, .cursor-punto { display: none; }
}

/* =========================================================
   6. CABECERA
   ========================================================= */
.cabecera {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: height .3s ease, background-color .3s ease, box-shadow .3s ease,
              border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.cabecera-dentro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

/* En cuanto se baja, la cabecera se posa: se compacta, coge fondo de
   cal y deja un filete. Antes de eso flota sobre el hero. */
.cabecera.esta-fija {
  height: var(--header-fijo);
  background: rgba(247, 243, 234, .93);
  backdrop-filter: saturate(1.25) blur(12px);
  -webkit-backdrop-filter: saturate(1.25) blur(12px);
  border-bottom-color: var(--linea);
  box-shadow: 0 10px 30px -22px rgba(23, 20, 15, .5);
}

.marca { display: block; flex: none; }
.marca img {
  width: auto;
  height: clamp(46px, 3.4vw + 32px, 66px);
  transition: height .3s ease;
}
.cabecera.esta-fija .marca img { height: clamp(38px, 2.2vw + 28px, 48px); }

/* La navegación va en la serif de la casa, no en la de texto: es la
   misma letra con remates del rótulo de la fachada, y con siete
   palabras sueltas en una línea es donde más se nota que esto es un
   restaurante y no una plantilla. Se le baja el `opsz` a mano —a este
   cuerpo el tamaño óptico automático afila demasiado el contraste y
   los palos finos se pierden sobre la cal— y se le da un pelo de
   interletraje, que Fraunces monta muy justo en caja baja. */
.nav-principal {
  display: none;
  gap: 1.05rem;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: .97rem;
  font-weight: 500;
  letter-spacing: .004em;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 14;
  /* «La casa» y «Cómo llegar» son de dos palabras: sin esto, en cuanto
     la barra se estrecha, parten y la cabecera se va a dos líneas. */
  white-space: nowrap;
}
@media (min-width: 1000px) { .nav-principal { display: flex; } }
/* Siete epígrafes en una línea: en cuanto sobra sitio, respiran. */
@media (min-width: 1140px) { .nav-principal { gap: 1.5rem;  font-size: 1.02rem; } }
@media (min-width: 1320px) { .nav-principal { gap: 1.9rem;  font-size: 1.0625rem; } }

.nav-principal a {
  position: relative;
  padding: .35rem 0;
  color: var(--picon);
  transition: color .2s ease;
}
.nav-principal a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--brasa);
  transition: right .28s cubic-bezier(.22, 1, .36, 1);
}
.nav-principal a:hover { color: var(--brasa); }
.nav-principal a:hover::after,
.nav-principal a.es-actual::after { right: 0; }
.nav-principal a.es-actual { color: var(--brasa); }

.acciones-cabecera {
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.4vw, 1rem);
}

.tel-cabecera {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.1rem;
  border: 1.5px solid var(--picon);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: background-color .2s ease, color .2s ease;
}
.tel-cabecera:hover { background: var(--picon); color: var(--cal); }
@media (min-width: 640px) { .tel-cabecera { display: inline-flex; } }

.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 9px;
  border-radius: var(--radio);
}
@media (min-width: 1000px) { .hamburguesa { display: none; } }
.hamburguesa span {
  display: block;
  height: 2px;
  background: var(--picon);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease, width .3s ease;
}
.hamburguesa span:nth-child(2) { width: 70%; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Selector de idioma --- */
.idioma { position: relative; }
.idioma-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--picon);
  transition: border-color .2s ease, background-color .2s ease;
}
.idioma-btn:hover { border-color: var(--picon); }
.idioma-flecha { font-size: .6em; transition: transform .25s ease; }
.idioma.esta-abierto .idioma-flecha { transform: rotate(180deg); }

.idioma-lista {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 172px;
  padding: .35rem;
  background: var(--cal-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.idioma-lista button {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .55rem .7rem;
  border-radius: 4px;
  font-size: var(--fs-sm);
  text-align: left;
  transition: background-color .15s ease;
}
.idioma-lista button:hover { background: var(--arena-suave); }
.idioma-corto {
  min-width: 26px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--brasa);
}
.idioma-nombre { flex: 1; }
.idioma-tic { opacity: 0; font-size: .8em; color: var(--brasa); }
.idioma-lista .es-actual .idioma-tic { opacity: 1; }

/* En el pie y en el menú móvil el selector va sobre oscuro */
.site-footer .idioma-btn, .menu-movil .idioma-btn {
  border-color: rgba(229, 208, 171, .3);
  color: var(--arena);
}
.site-footer .idioma-btn:hover, .menu-movil .idioma-btn:hover { border-color: var(--arena); }
.menu-movil .idioma-lista { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }

/* =========================================================
   7. MENÚ MÓVIL
   ========================================================= */
.velo-menu {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: rgba(14, 12, 9, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.velo-menu.esta-abierto { opacity: 1; visibility: visible; }

.menu-movil {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 960;
  width: min(360px, 88vw);
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 2rem;
  background: var(--picon);
  background-image: radial-gradient(circle at 1px 1px, rgba(229, 208, 171, .06) 1px, transparent 0);
  background-size: 8px 8px;
  color: var(--cal);
  transform: translateX(102%);
  transition: transform .38s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movil.esta-abierto { transform: none; }

.menu-movil-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.6rem;
}
.menu-movil-alto img { height: 52px; width: auto; }
.cerrar-menu {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 208, 171, .3);
  border-radius: var(--radio);
  color: var(--arena);
  font-size: 1.1rem;
  transition: background-color .2s ease, color .2s ease;
}
.cerrar-menu:hover { background: var(--arena); color: var(--picon); }

.nav-movil { display: flex; flex-direction: column; }
.nav-movil a {
  padding: .95rem 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cal);
  border-bottom: 1px solid rgba(229, 208, 171, .13);
  transition: color .2s ease, padding-left .2s ease;
}
.nav-movil a:hover, .nav-movil a.es-actual { color: var(--brasa-viva); padding-left: .5rem; }

.menu-movil-bajo {
  margin-top: auto;
  padding-top: 1.6rem;
  display: grid;
  gap: 1rem;
}
.menu-movil-tel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   8. HERO
   ========================================================= */
.hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(1.6rem, 5vw, 3.6rem));
  padding-bottom: clamp(2.4rem, 6vw, 4.5rem);
  overflow: hidden;
}
/* El sol de la tarde entrando por la izquierda: un lavado muy suave de
   arena que despega el hero del resto de la cal. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 8% 0%, rgba(229, 208, 171, .55), transparent 62%),
    radial-gradient(90% 70% at 100% 100%, rgba(176, 69, 30, .07), transparent 60%);
  pointer-events: none;
}

/* El nombre del pueblo, enorme y casi borrado, de fondo. */
.hero-fondo {
  position: absolute;
  right: -.06em;
  bottom: -.16em;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(6rem, 22vw, 20rem);
  font-weight: 700;
  line-height: .75;
  letter-spacing: -.04em;
  color: rgba(23, 20, 15, .045);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero-rejilla {
  position: relative;
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-rejilla {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

.hero-copia > .chapa { margin-bottom: 1.5rem; }
.hero-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(2.5rem, 1.1rem + 5.6vw, 4.7rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--picon);
  margin-bottom: 1.2rem;
}
.hero-titulo em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--brasa);
}
.hero-entrada {
  max-width: 46ch;
  font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  color: var(--apagado);
  margin-bottom: 2rem;
}
.hero-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-bottom: 2.2rem;
}

.hero-datos {
  display: grid;
  gap: .8rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: var(--fs-sm);
  color: var(--apagado);
}
@media (min-width: 560px) { .hero-datos { grid-template-columns: 1fr 1fr; gap: 1.2rem; } }
.hero-datos li { display: flex; align-items: flex-start; gap: .65rem; }
.hero-datos i { margin-top: .3em; color: var(--brasa); flex: none; }
.hero-datos strong { display: block; color: var(--picon); font-weight: 600; }

/* --- La estampa: la foto dentro del arco de la ermita --- */

/* La caja se ciñe al ancho del marco en vez de ocupar toda la columna:
   así la plancha de picón de detrás puede ser exactamente la misma
   figura, y no una mancha con vida propia. */
.hero-estampa {
  position: relative;
  width: min(100%, 430px);
  margin-inline: auto;
  /* El medio punto de la ermita, escrito una sola vez: lo comparten el
     marco, su filete y la plancha de detrás. Si se toca aquí, se mueven
     los tres a la vez y siguen siendo la misma figura. */
  --arco-radio: 50% 50% var(--radio) var(--radio) / 37.5% 37.5% var(--radio) var(--radio);
}

/* LA SEGUNDA PLANCHA. El mismo arco en picón, corrido abajo y a la
   derecha, como el segundo pase de una estampación mal registrada. Es
   lo que le da peso a la estampa y evita que la foto flote sobre la
   cal. Antes era una mancha más ancha que el marco, con otra curvatura
   y descentrada: asomaba por los cuatro lados a la vez y no se leía
   como sombra de nada. */
.hero-estampa::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(var(--corrimiento), var(--corrimiento));
  --corrimiento: clamp(9px, 2.4vw, 20px);
  background-color: var(--picon);
  background-image: radial-gradient(circle at 1px 1px, rgba(229, 208, 171, .09) 1px, transparent 0);
  background-size: 8px 8px;
  border-radius: var(--arco-radio);
}

.hero-arco {
  position: relative;
  width: 100%;
  padding: 10px;
  background: var(--cal-alta);
  border-radius: var(--arco-radio);
  /* Sombra corta: la que separa el marco de la plancha. La larga y
     difusa de antes emborronaba el filo del picón, que es justo lo que
     tiene que verse. */
  box-shadow: var(--sombra);
}
/* El doble filete de arena, como el del óvalo del rótulo. */
.hero-arco::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--arena-honda);
  border-radius: var(--arco-radio);
  pointer-events: none;
}
.hero-arco > .arco { box-shadow: inset 0 0 0 1px rgba(23, 20, 15, .08); }

/* La chapa colgada del arco, con el horario de hoy. */
.hero-chapa {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  box-shadow: var(--sombra);
}
.hero-chapa .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--apagado);
  flex: none;
}
.hero-chapa.esta-abierto .punto {
  background: #2E7D32;
  box-shadow: 0 0 0 0 rgba(46, 125, 50, .55);
  animation: latido 2.4s ease-out infinite;
}
@keyframes latido {
  70%  { box-shadow: 0 0 0 9px rgba(46, 125, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0); }
}

.hero-pie {
  margin-top: 2.4rem;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--apagado);
}

.hero-baja {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--apagado);
}
@media (min-width: 1120px) { .hero-baja { display: flex; } }
.hero-baja-linea {
  width: 1px; height: 44px;
  background: linear-gradient(var(--arena-honda), transparent);
  position: relative;
  overflow: hidden;
}
.hero-baja-linea::after {
  content: "";
  position: absolute;
  left: 0; top: -40%;
  width: 1px; height: 40%;
  background: var(--brasa);
  animation: baja 2.2s ease-in-out infinite;
}
@keyframes baja { to { top: 110%; } }

/* =========================================================
   9. LA CASA
   ========================================================= */
.casa { padding-block: clamp(3.5rem, 9vw, 7rem) 0; }

.casa-rejilla {
  display: grid;
  gap: clamp(2.2rem, 5vw, 3.5rem);
}
@media (min-width: 940px) {
  .casa-rejilla {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  /* Los cuatro datos van sueltos en la rejilla y cruzan las dos columnas:
     así cierran la sección de lado a lado en vez de amontonarse bajo las
     fotos dejando medio ancho vacío. En móvil siguen apilados. */
  .casa-cifras { grid-column: 1 / -1; }
  .casa-texto  { grid-column: 2; }
}

.casa-fotos { position: relative; }
.casa-fotos > img {
  width: 100%;
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
/* El marco de arena desplazado: el mismo gesto del rótulo de la fachada. */
.casa-marco {
  position: absolute;
  left: -14px; top: -14px;
  width: 58%; height: 46%;
  border: 1.5px solid var(--arena-honda);
  border-radius: var(--radio);
  pointer-events: none;
}
.casa-inset {
  position: absolute;
  right: -12px;
  bottom: -34px;
  width: 47%;
  margin: 0;
  padding: 8px;
  background: var(--cal-alta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.casa-inset img { width: 100%; border-radius: 3px; }
.casa-inset figcaption {
  padding: .55rem .2rem .1rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
  text-align: center;
}
@media (max-width: 559px) {
  .casa-inset { position: static; width: 62%; margin: 1rem 0 0 auto; }
  .casa-marco { display: none; }
}

.casa-texto > p { margin-bottom: 1.15em; }
.casa-cita {
  margin: 2rem 0 0;
  padding: 1.4rem 0 1.4rem 1.6rem;
  border-left: 3px solid var(--brasa);
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--picon);
}
.casa-cita cite {
  display: block;
  margin-top: .8rem;
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}

.casa-cifras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1rem;
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
/* Las cuatro en fila en cuanto hay sitio. Este bloque tiene que ir DESPUÉS
   de la regla de arriba: los media queries no suman especificidad, así que
   entre dos declaraciones iguales gana la que esté más abajo. */
@media (min-width: 560px) {
  .casa-cifras { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cifra-num {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--brasa);
  font-variant-numeric: tabular-nums;
}
.cifra-txt {
  display: block;
  margin-top: .5rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* =========================================================
   10. LA BANDA DE ESPECIALIDADES
   ========================================================= */
.banda {
  overflow: hidden;
  padding-block: clamp(.9rem, 2vw, 1.3rem);
  border-block: 1px solid rgba(229, 208, 171, .18);
}
.cinta-caja { overflow: hidden; }
.cinta {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 2.4rem;
  animation: rueda var(--vel, 46s) linear infinite;
}
.cinta-caja:hover .cinta,
.cinta-caja:focus-within .cinta { animation-play-state: paused; }
@keyframes rueda { to { transform: translateX(-50%); } }

.cinta-item {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.15rem, .9rem + .9vw, 1.9rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .01em;
  color: var(--arena);
  white-space: nowrap;
}
/* Entre plato y plato, la misma montaña del rótulo en pequeño. A este
   cuerpo el pliegue y el espolón ya no se leen como tales, pero dejan
   el garabato reconocible; por eso el trazo va fino (1,15 sobre un
   viewBox de 36) en vez de engordar y emborronarlos. */
.cinta-sep { flex: none; color: var(--brasa-viva); display: flex; }
.cinta-sep svg { width: 40px; height: auto; }

/* =========================================================
   11. EL PLATO DE LA CASA
   ========================================================= */
.plato {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
}
.plato::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 78% 20%, rgba(176, 69, 30, .28), transparent 62%);
  pointer-events: none;
}
.plato-rejilla {
  position: relative;
  display: grid;
  gap: clamp(2.8rem, 6vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .plato-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); }
}

.plato-precio {
  display: inline-flex;
  align-items: baseline;
  gap: .6rem;
  margin: 1.6rem 0 1.8rem;
  padding: .7rem 1.3rem;
  border: 1px solid rgba(229, 208, 171, .35);
  border-radius: var(--radio);
  background: rgba(229, 208, 171, .07);
}
.plato-precio b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--arena);
  font-variant-numeric: tabular-nums;
}
.plato-precio span {
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, .65);
}

.plato-lista { display: grid; gap: .85rem; margin-bottom: 2rem; }
.plato-lista li {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: var(--fs-sm);
  color: rgba(247, 243, 234, .8);
}
.plato-lista i { margin-top: .35em; color: var(--brasa-viva); flex: none; }

.plato-botones { display: flex; flex-wrap: wrap; gap: .8rem; }

/* La composición: el cartel de la casa y, asomando, la foto real. */
.plato-fotos { position: relative; }
.plato-cartel {
  position: relative;
  width: min(100%, 440px);
  margin: 0 auto;
  padding: 12px;
  background: var(--cal-alta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  transform: rotate(-1.6deg);
}
.plato-cartel img { width: 100%; border-radius: 3px; }
.plato-foto {
  position: absolute;
  right: -4%;
  bottom: -13%;
  width: 40%;
  max-width: 186px;
  margin: 0;
  padding: 7px;
  background: var(--cal-alta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  transform: rotate(4.5deg);
}
.plato-foto img { width: 100%; border-radius: 3px; aspect-ratio: 3/4; object-fit: cover; }
@media (max-width: 599px) { .plato-foto { display: none; } }

/* =========================================================
   12. LA COCINA
   ========================================================= */
.cocina { padding-block: clamp(3.5rem, 9vw, 7rem); }

.cocina-rejilla {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr));
}
/* Son seis fichas: en cuanto caben cuatro por fila queda una fila coja de
   dos. Con tres y tres el bloque cierra cuadrado. */
@media (min-width: 1040px) {
  .cocina-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.6rem 1.6rem 1.9rem;
  background: var(--cal-alta);
  border: 1px solid var(--linea);
  border-radius: 50% 50% var(--radio) var(--radio) / 44px 44px var(--radio) var(--radio);
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease,
              border-color .3s ease;
}
.ficha:hover {
  transform: translateY(-6px);
  border-color: var(--arena-honda);
  box-shadow: var(--sombra);
}
/* El arco de arena que corona la ficha, como el vano de la ermita. */
.ficha::before {
  content: "";
  position: absolute;
  left: 50%; top: 10px;
  width: calc(100% - 20px);
  height: 78px;
  transform: translateX(-50%);
  border: 1px solid var(--arena-honda);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 38px 38px 0 0;
  opacity: .5;
  transition: opacity .3s ease;
}
.ficha:hover::before { opacity: 1; }

.ficha-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  background: var(--arena-suave);
  color: var(--brasa-tinta);
  font-size: 1.25rem;
  transition: background-color .3s ease, color .3s ease;
}
.ficha:hover .ficha-ico { background: var(--brasa); color: var(--cal-alta); }

.ficha-num {
  position: absolute;
  right: 1.1rem; top: 1rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--arena-honda);
  font-variant-numeric: tabular-nums;
}
.ficha h3 {
  margin-bottom: .6rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.28rem;
  font-weight: 600;
  text-align: center;
  /* Los nombres largos de plato parten en dos renglones parejos en vez de
     dejar una palabra sola abajo («… de pulpo y / gamba»). */
  text-wrap: balance;
  color: var(--picon);
}
.ficha p {
  font-size: var(--fs-sm);
  color: var(--apagado);
  text-align: center;
}

.cocina-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 2rem;
  border-top: 1px solid var(--linea);
}
.cocina-pie p { max-width: 46ch; color: var(--apagado); }

/* =========================================================
   13. LA CARTELERA — los carteles de la casa
   ========================================================= */
.cartelera {
  padding-block: clamp(3.5rem, 9vw, 6rem);
  overflow: hidden;
}
.cartelera-cinta { margin-top: clamp(1.6rem, 4vw, 2.6rem); }
.cartelera-cinta .cinta { gap: clamp(1rem, 2.5vw, 1.8rem); align-items: flex-start; }

.cartel {
  position: relative;
  flex: none;
  width: clamp(190px, 24vw, 268px);
  margin: 14px 0 26px;
  padding: 9px 9px 11px;
  background: var(--cal-alta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  transform: rotate(var(--giro, 0deg));
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.cartel:hover { transform: rotate(0deg) translateY(-8px) scale(1.03); z-index: 3; }
/* Sin `aspect-ratio`: cada cartel conserva la proporción con la que se
   diseñó. Recortarlos a una medida común le comía el rótulo de arriba a
   unos y el pie a otros, y son carteles: el texto es la mitad del cartel.
   Que las alturas bailen un poco es justo lo que se quiere en un tablón. */
.cartel img {
  width: 100%;
  border-radius: 3px;
  background: var(--arena-suave);
}
.cartel figcaption {
  padding: .6rem .3rem .1rem;
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  color: var(--apagado);
}
/* La chincheta */
.cartel::before {
  content: "";
  position: absolute;
  left: 50%; top: -7px;
  width: 13px; height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brasa-viva), var(--brasa-tinta) 62%, #5C2310);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .45);
}

.cartelera-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.8rem;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  font-size: var(--fs-sm);
  color: rgba(247, 243, 234, .68);
}
.cartelera-pie li { display: flex; align-items: center; gap: .6rem; }
.cartelera-pie i { color: var(--brasa-viva); }

/* =========================================================
   14. GALERÍA
   ========================================================= */
.galeria { padding-block: clamp(3.5rem, 9vw, 7rem) 0; }

/* Dos cintas de fotos que corren en sentidos contrarios, a sangre y de
   borde a borde. Mismo patrón que la banda de especialidades: cada vía
   lleva dos juegos idénticos, mide `max-content` y se traslada al
   -50 %, que es justo un juego. Con eso el bucle no tiene costura. */
.galeria-cintas { margin-top: clamp(1.6rem, 4vw, 2.6rem); }

/* Los dos extremos se desvanecen: las fotos aparecen y desaparecen «de
   la nada» en vez de cortarse en seco contra el borde de la pantalla. */
.cinta-fotos {
  /* `clip` en vez de `hidden` donde el navegador lo entiende: con
     `hidden` la caja sigue siendo desplazable por programa, y al
     enfocar con el tabulador una foto de dentro el navegador la
     desplazaba para enseñarla y descuadraba la cinta entera. */
  overflow: hidden;
  overflow: clip;
  /* Este hueco no es decoración: la foto se levanta 4 px al pasar el
     ratón y sin él se la comería el recorte. Y como las dos cintas lo
     llevan, entre fila y fila queda ya la misma separación que entre
     foto y foto: por eso no hay `margin` entre ellas. */
  padding-block: 5px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
}
@media (min-width: 1024px) {
  .cinta-fotos {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}

.cinta-fotos-via {
  display: flex;
  align-items: flex-start;
  width: max-content;
  will-change: transform;
}
/* Las dos van a velocidades distintas y en sentidos contrarios: si
   fueran iguales se leerían como una sola rejilla que se desliza. */
.cinta-fotos-via--izquierda { animation: rueda 74s linear infinite; }
.cinta-fotos-via--derecha   { animation: rueda-alreves 86s linear infinite; }
/* Se paran con el ratón encima y también cuando el foco del teclado
   está dentro: lo que se mueve se tiene que poder parar (WCAG 2.2.2). */
.cinta-fotos:hover .cinta-fotos-via,
.cinta-fotos:focus-within .cinta-fotos-via { animation-play-state: paused; }

@keyframes rueda-alreves {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* La separación va como `margin` de cada foto y NO como `gap` de la
   vía: con `gap` los dos juegos no miden exactamente lo mismo y el
   -50 % dejaría medio hueco a la vista en cada vuelta. */
.pieza {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: var(--foto-alto);
  margin: 0 clamp(.35rem, .9vw, .7rem) 0 0;
  padding: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--arena-suave);
  box-shadow: var(--sombra-corta);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.pieza img {
  height: 100%;
  width: auto;
  max-width: none;      /* el reset le pone 100 %, y aquí manda el alto */
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.pieza:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.pieza-lupa {
  position: absolute;
  right: .7rem; bottom: .7rem;
  width: 36px; height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(23, 20, 15, .78);
  color: var(--cal);
  font-size: .82rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.pieza:hover img { transform: scale(1.06); }
.pieza:hover .pieza-lupa,
.pieza:focus-visible .pieza-lupa { opacity: 1; transform: none; }

/* Para quien navega con teclado: anuncia la galería y abre por la
   primera foto. Solo aparece cuando le llega el foco. */
.abrir-galeria {
  display: block;
  width: 100%;
  height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0 dashed var(--arena-honda);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  color: var(--brasa);
  opacity: 0;
  overflow: hidden;
}
.abrir-galeria:focus-visible {
  height: auto;
  margin-bottom: 1rem;
  padding: .8rem;
  border-width: 1px;
  opacity: 1;
}

/* =========================================================
   15. AMPLIACIÓN DE FOTO
   ========================================================= */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(14, 12, 9, .95);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.lupa.esta-abierto { display: flex; }
.lupa-escena {
  position: relative;
  margin: 0;
  max-width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}
.lupa-escena img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto;
  border-radius: var(--radio);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
  animation: entra-foto .35s cubic-bezier(.22, 1, .36, 1);
}
@keyframes entra-foto { from { opacity: 0; transform: scale(.96); } }
.lupa-escena figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem 1rem;
  font-size: var(--fs-sm);
  color: rgba(247, 243, 234, .78);
  text-align: center;
}
.lupa-cuenta {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  color: var(--arena);
}
.lupa-btn {
  position: fixed;
  z-index: 2;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(229, 208, 171, .3);
  border-radius: 50%;
  background: rgba(23, 20, 15, .6);
  color: var(--cal);
  font-size: 1.05rem;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.lupa-btn:hover { background: var(--brasa); border-color: var(--brasa); }
.lupa-cerrar { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lupa-ant { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lupa-sig { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lupa-ant:hover, .lupa-sig:hover { transform: translateY(-50%) scale(1.07); }

/* =========================================================
   16. POR QUÉ VENIR
   ========================================================= */
.porque { padding-block: clamp(3.5rem, 9vw, 7rem); }

.porque-rejilla {
  display: grid;
  gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.razon {
  padding: 1.8rem 1.4rem;
  border: 1px solid rgba(229, 208, 171, .18);
  border-radius: var(--radio);
  background: rgba(229, 208, 171, .04);
  transition: border-color .3s ease, background-color .3s ease, transform .3s ease;
}
.razon:hover {
  border-color: rgba(229, 208, 171, .45);
  background: rgba(229, 208, 171, .08);
  transform: translateY(-4px);
}
.razon-ico {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 1.1rem;
  border: 1px solid rgba(229, 208, 171, .35);
  border-radius: 50% 50% 4px 4px / 60% 60% 4px 4px;
  color: var(--brasa-viva);
  font-size: 1.1rem;
}
.razon h3 {
  margin-bottom: .55rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
}
.razon p { font-size: var(--fs-sm); }

/* La cita de la casa, con la foto de la mesa larga al lado. */
.cita-casa {
  display: grid;
  gap: clamp(1.8rem, 4vw, 3rem);
  align-items: center;
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
  padding-top: clamp(2.6rem, 6vw, 4rem);
  border-top: 1px solid rgba(229, 208, 171, .18);
}
@media (min-width: 820px) {
  .cita-casa { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
.cita-casa img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.cita-casa blockquote { margin: 0; }
.cita-comilla {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: .5;
  color: var(--brasa-viva);
}
.cita-casa p {
  margin: 1.2rem 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.9rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.34;
  color: var(--cal);
}
.cita-casa cite {
  display: block;
  margin-top: 1.2rem;
  font-family: 'Archivo', sans-serif;
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--arena);
}

/* =========================================================
   17. DÓNDE ESTAMOS
   ========================================================= */
.donde { padding-block: clamp(3.5rem, 9vw, 7rem); }
.donde-rejilla {
  display: grid;
  gap: clamp(2.2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 940px) {
  .donde-rejilla { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.donde-fotos { position: relative; }
.donde-fotos .arco {
  width: min(100%, 400px);
  margin-inline: auto;
  border: 8px solid var(--cal-alta);
  box-shadow: var(--sombra-alta);
}
.donde-sello {
  position: absolute;
  left: 0; bottom: 6%;
  width: min(190px, 44%);
  padding: 6px;
  margin: 0;
  background: var(--cal-alta);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
  transform: rotate(-3.5deg);
}
.donde-sello img { width: 100%; border-radius: 3px; }
@media (max-width: 599px) { .donde-sello { display: none; } }

.donde-lista { display: grid; gap: 1.5rem; margin: 2rem 0; }
.donde-lista li { display: flex; gap: 1.1rem; }
.donde-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50% 50% 4px 4px / 60% 60% 4px 4px;
  background: var(--arena-suave);
  color: var(--brasa-tinta);
  font-size: 1rem;
}
.donde-lista small {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: .15rem;
}
.donde-lista a { font-weight: 500; border-bottom: 1px solid var(--arena-honda); transition: color .2s ease, border-color .2s ease; }
.donde-lista a:hover { color: var(--brasa); border-color: var(--brasa); }
.donde-horario { font-variant-numeric: tabular-nums; }
.donde-horario b { font-weight: 600; }

.donde-avisos {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
}
.aviso-pastilla {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .95rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--cal-alta);
  font-size: var(--fs-xs);
  color: var(--apagado);
}
.aviso-pastilla i { color: var(--brasa); }

/* =========================================================
   18. RESERVAR
   ========================================================= */
.reservar {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  background:
    linear-gradient(180deg, var(--arena-suave), var(--cal) 62%);
}
.reservar-rejilla {
  display: grid;
  gap: clamp(2.4rem, 5vw, 4rem);
  align-items: start;
}
@media (min-width: 980px) {
  .reservar-rejilla { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
}

.reservar-datos .donde-lista { margin-top: 2rem; }
.reservar-redes { display: flex; gap: .7rem; margin-top: 2rem; }
.reservar-redes a {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid var(--picon);
  border-radius: var(--radio);
  font-size: 1.05rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.reservar-redes a:hover { background: var(--picon); color: var(--cal); transform: translateY(-3px); }

/* --- La ficha del formulario --- */
.ficha-reserva {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--cal-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.ficha-reserva::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  border-radius: var(--radio) var(--radio) 0 0;
  background: linear-gradient(90deg, var(--brasa), var(--arena-honda), var(--brasa));
}
.ficha-reserva-alto { margin-bottom: 1.6rem; }
.ficha-reserva-alto h2,
.ficha-reserva-alto h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--picon);
}
.ficha-reserva-alto p {
  margin-top: .4rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
}

.rejilla-campos { display: grid; gap: 1.1rem; }
@media (min-width: 520px) { .rejilla-campos--2 { grid-template-columns: 1fr 1fr; } }

.campo { display: block; }
.campo-tit {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}
.campo-pista {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--brasa);
}

.campo input[type="text"],
.campo input[type="tel"],
.campo input[type="email"],
.campo textarea,
.contador input,
.fecha-btn {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--cal);
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  font-size: var(--fs-base);
  color: var(--texto);
  transition: border-color .2s ease, background-color .2s ease;
}
.campo textarea { resize: vertical; min-height: 88px; }
.campo input::placeholder, .campo textarea::placeholder { color: #A2988B; }
.campo input:focus, .campo textarea:focus, .fecha-btn:focus { background: var(--cal-alta); }
.campo input:hover, .campo textarea:hover, .fecha-btn:hover { border-color: var(--arena-honda); }
.campo.esta-mal input, .campo.esta-mal textarea, .campo.esta-mal .fecha-btn { border-color: var(--brasa); }

/* El correo va solo en su fila, con una línea debajo que explica para qué
   se pide: es lo que decide si luego se lee lo que le mandamos. */
.campo--suelto { margin-top: 1.1rem; }
.campo-ayuda {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin-top: .45rem;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--apagado);
}
.campo-ayuda i { color: var(--brasa); }

.fecha-caja { position: relative; }
.fecha-btn {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-align: left;
}
.fecha-btn i { color: var(--brasa); }
.fecha-txt { flex: 1; }
.fecha-btn .fa-chevron-down { font-size: .7em; color: var(--apagado); transition: transform .25s ease; }
.fecha-btn[aria-expanded="true"] .fa-chevron-down { transform: rotate(180deg); }
/* Sin día elegido, el botón se lee como un hueco por rellenar. */
.fecha-btn:not(.tiene-dia) .fecha-txt { color: #8F857A; }

/* --- El calendario --- */
.calendario {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  width: min(330px, calc(100vw - 56px));
  padding: 1rem;
  background: var(--cal-alta);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.cal-alto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .8rem;
}
.cal-mes {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--picon);
}
.cal-nav {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: .8rem;
  transition: background-color .2s ease, color .2s ease;
}
.cal-nav:hover:not(:disabled) { background: var(--picon); color: var(--cal); }
.cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.cal-semana, .cal-dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.cal-semana span {
  padding: .3rem 0;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--apagado);
}
.cal-dia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  transition: background-color .15s ease, color .15s ease;
}
.cal-dia:disabled { color: #C3BAAC; cursor: not-allowed; }
.cal-dia:not(:disabled):hover { background: var(--arena-suave); }
.cal-dia.es-hoy { box-shadow: inset 0 0 0 1.5px var(--arena-honda); }
.cal-dia.esta-elegido { background: var(--brasa); color: var(--cal-alta); font-weight: 600; }
.cal-hueco { aspect-ratio: 1; }
/* Los días de descanso y los cierres sueltos van tachados, y al pasar por
   encima dicen por qué (el `title` del botón). */
.cal-dia.es-cerrado { text-decoration: line-through; text-decoration-thickness: 1px; }
.cal-dia.es-cerrado:disabled { cursor: help; }
.cal-pie {
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--linea);
  font-size: .72rem;
  color: var(--apagado);
  text-align: center;
}

/* --- Contador de comensales --- */
.contador {
  display: flex;
  align-items: center;
  gap: .4rem;
}
.contador input {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  -moz-appearance: textfield;
  appearance: textfield;
}
.contador input::-webkit-outer-spin-button,
.contador input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.contador-btn {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  color: var(--picon);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.contador-btn:hover { background: var(--picon); border-color: var(--picon); color: var(--cal); }

/* --- Turnos --- */
.turnos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: .5rem;
}
.turno {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .1rem;
  min-height: 3.1rem;
  padding: .5rem .3rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--cal);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.turno:hover { border-color: var(--arena-honda); }
.turno.esta-elegido { background: var(--picon); border-color: var(--picon); color: var(--cal); }
.turno-h { line-height: 1.2; }
.turno-n {
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--brasa);
}
.turno.esta-elegido .turno-n { color: var(--arena); }
/* Un turno sin sitio, o que ya se ha echado encima: se ve, pero apagado y
   tachado, para que la lista no parezca que tiene huecos. */
.turno.esta-lleno {
  background: transparent;
  border-style: dashed;
  color: #9D9386;
  cursor: not-allowed;
}
.turno.esta-lleno:hover { border-color: var(--linea); }
.turno.esta-lleno .turno-h { text-decoration: line-through; text-decoration-thickness: 1px; }
.turno.esta-lleno .turno-n { color: inherit; }
.turnos-vacio {
  grid-column: 1 / -1;
  padding: .8rem 1rem;
  border: 1px dashed var(--arena-honda);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  color: var(--apagado);
}
/* Mientras la base contesta, el aviso late despacio. */
.turnos-vacio.esta-cargando { animation: late 1.4s ease-in-out infinite; }
@keyframes late { 50% { opacity: .5; } }
/* Debajo de las horas: a qué hora cierra la cocina ese día y cuál es la
   última mesa. */
.turnos-nota {
  grid-column: 1 / -1;
  margin-top: .2rem;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--apagado);
}

/* --- Elección de sitio --- */
.sitios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.sitio {
  display: grid;
  gap: .35rem;
  place-items: center;
  padding: .8rem .4rem;
  border: 1.5px solid var(--linea);
  border-radius: var(--radio);
  background: var(--cal);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.sitio i { font-size: 1rem; color: var(--brasa); transition: color .18s ease; }
.sitio:hover { border-color: var(--arena-honda); }
.sitio.esta-elegido { background: var(--picon); border-color: var(--picon); color: var(--cal); }
.sitio.esta-elegido i { color: var(--arena); }

/* --- Casillas --- */
.casillas { display: grid; gap: .6rem; }
.casilla {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
}
.casilla input { flex: none; width: 18px; height: 18px; margin-top: .22em; accent-color: var(--brasa); }
.casilla i { color: var(--brasa); margin-right: .25rem; }
.casilla a { color: var(--brasa); border-bottom: 1px solid currentColor; }

.reserva-aviso {
  display: flex;
  gap: .7rem;
  padding: .85rem 1rem;
  margin-bottom: 1.2rem;
  border-radius: var(--radio);
  background: var(--arena-suave);
  border: 1px solid var(--arena-honda);
  font-size: var(--fs-sm);
  color: var(--texto);
}
.reserva-aviso i { color: var(--brasa-tinta); margin-top: .25em; }
/* El aviso que escribe la casa en el panel (vacaciones, un día especial):
   va en oscuro para que no se confunda con los avisos del formulario. */
.reserva-aviso--casa {
  background: var(--picon);
  border-color: var(--picon);
  color: var(--cal);
}
.reserva-aviso--casa i { color: var(--brasa-viva); }

/* Lo que va diciendo el formulario. Los errores, en brasa; «Enviando la
   petición…», en gris. */
.reserva-estado {
  margin-top: .9rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--apagado);
  min-height: 1.4em;
}
.reserva-estado.es-error { color: var(--brasa-tinta); }
.btn.esta-cargando { cursor: progress; opacity: .72; }
.btn.esta-cargando:hover { transform: none; }
.r-max { font-variant-numeric: tabular-nums; }
.reserva-legal {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--apagado);
}
.reserva-legal a { color: var(--brasa); border-bottom: 1px solid currentColor; }

.separa-campos {
  margin: 1.5rem 0;
  border-top: 1px solid var(--linea);
}

/* --- El resguardo --- */
.resguardo { text-align: center; }
.resguardo-sello {
  display: grid;
  place-items: center;
  width: 66px; height: 66px;
  margin: 0 auto 1.2rem;
  border-radius: 50%;
  background: var(--arena-suave);
  color: var(--brasa-tinta);
  font-size: 1.5rem;
}
.resguardo h2,
.resguardo h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 600;
  color: var(--picon);
}
.resguardo h2 em,
.resguardo h3 em { font-style: italic; font-weight: 400; color: var(--brasa); }
.resguardo-rotulo {
  margin-bottom: .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brasa);
}
.resguardo-txt { margin-top: .8rem; font-size: var(--fs-sm); color: var(--apagado); }

.resguardo-datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 1.6rem 0;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 520px) { .resguardo-datos { grid-template-columns: repeat(4, 1fr); } }
.resguardo-datos > div { padding: .95rem .6rem; background: var(--cal); }
.resguardo-datos dt {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}
.resguardo-datos dd {
  margin: .3rem 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--picon);
  font-variant-numeric: tabular-nums;
}
/* El localizador se lee letra a letra —se dicta por teléfono—, así que va
   en letra de máquina, que no confunde la O con el 0. */
.resguardo-datos dd.resguardo-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .98rem;
  letter-spacing: .04em;
  color: var(--brasa-tinta);
  overflow-wrap: anywhere;
}
.resguardo-botones { display: grid; gap: .7rem; }
.resguardo-botones--mas { margin-top: .7rem; }
.resguardo-botones > :only-child { grid-column: 1 / -1; }
.resguardo-spam {
  margin-top: 1rem;
  font-size: var(--fs-xs);
  color: var(--apagado);
}
@media (min-width: 520px) { .resguardo-botones { grid-template-columns: 1fr 1fr; } }
.resguardo-otra {
  margin-top: 1.2rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
  border-bottom: 1px solid var(--arena-honda);
}
.resguardo-otra:hover { color: var(--brasa); border-color: var(--brasa); }

/* El sello cambia con el estado de la reserva (página /reserva). */
.resguardo-sello.es-espera { background: var(--arena-suave); color: var(--brasa-tinta); }
.resguardo-sello.es-si     { background: var(--vid-suave); color: var(--vid); }
.resguardo-sello.es-no     { background: #F4DFD5; color: var(--brasa-tinta); }
.resguardo-sello.es-pasada { background: var(--filete); color: var(--apagado); }

/* --- ¿Ya tienes reserva? --- */
.ya-reserva {
  margin-top: 2rem;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px dashed var(--arena-honda);
  border-radius: var(--radio);
  background: var(--cal-alta);
}
.ya-reserva-t {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--picon);
}
.ya-reserva-p {
  margin: .3rem 0 1rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
}

/* --- La ventana del localizador ---
   Tapa la página con la penumbra del picón; el scroll de detrás lo
   bloquea script.js con `body.bloqueado`. Por encima de la cabecera
   (900) y del aviso de cookies (940); por debajo de la ampliación de
   fotos (2000). */
.ventana {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 12, 9, .64);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: ventana-velo .25s ease both;
}
.ventana-caja {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100svh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.6rem, 4vw, 2.2rem);
  background: var(--cal-alta);
  border-top: 4px solid var(--brasa);
  border-radius: calc(var(--radio) * 2);
  box-shadow: var(--sombra-alta);
  animation: ventana-sube .32s cubic-bezier(.2, .7, .2, 1) both;
}
.ventana-x {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--apagado);
  transition: background-color .2s ease, color .2s ease;
}
.ventana-x:hover { background: var(--arena-suave); color: var(--picon); }
.ventana-t {
  margin-top: .35rem;
  padding-right: 2.4rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--picon);
}
.ventana-p {
  margin: .6rem 0 1.3rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
}
@keyframes ventana-velo { from { opacity: 0; } }
@keyframes ventana-sube { from { opacity: 0; transform: translateY(14px); } }

/* --- La página /reserva --- */
.consulta { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); }
.consulta-caja > * { max-width: 40rem; }
.consulta-motivo {
  max-width: 46ch;
  margin: 1rem auto 0;
  padding: .8rem 1rem;
  border-left: 3px solid var(--arena-honda);
  border-radius: 0 var(--radio) var(--radio) 0;
  background: var(--arena-suave);
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: left;
  color: var(--texto);
}

/* =========================================================
   19. PIE DE PÁGINA
   ========================================================= */
.site-footer {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5rem);
  background-color: var(--picon-hondo);
  background-image: radial-gradient(circle at 1px 1px, rgba(229, 208, 171, .05) 1px, transparent 0);
  background-size: 8px 8px;
  color: rgba(247, 243, 234, .72);
  font-size: var(--fs-sm);
}
.footer-rejilla {
  display: grid;
  gap: 2.4rem;
  padding-bottom: clamp(2.4rem, 5vw, 3.5rem);
}
@media (min-width: 620px)  { .footer-rejilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-rejilla { grid-template-columns: 1.7fr 1fr 1.1fr 1.3fr; gap: 3rem; } }

.footer-marca img { height: 74px; width: auto; margin-bottom: 1.2rem; }
.footer-marca p { max-width: 38ch; }

.redes { display: flex; gap: .6rem; margin-top: 1.4rem; }
.redes a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(229, 208, 171, .28);
  border-radius: var(--radio);
  color: var(--arena);
  font-size: 1rem;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.redes a:hover { background: var(--arena); color: var(--picon); transform: translateY(-3px); }
.redes svg { width: 19px; height: auto; }

.footer-col h3 {
  margin-bottom: 1.1rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--arena);
}
.footer-col li + li { margin-top: .6rem; }
.footer-col a { transition: color .2s ease, padding-left .2s ease; }
.footer-col a:hover { color: var(--brasa-viva); padding-left: .3rem; }
.footer-contacto li { display: flex; gap: .8rem; }
.footer-contacto i { margin-top: .35em; color: var(--brasa-viva); flex: none; width: 14px; }
.footer-contacto .donde-horario { font-variant-numeric: tabular-nums; }

.footer-bajo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.6rem;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(229, 208, 171, .14);
  font-size: var(--fs-xs);
  color: rgba(247, 243, 234, .5);
}
.footer-bajo a:hover { color: var(--arena); }
/* El botón de reservar está casi siempre a la vista, así que al llegar al
   final de la página se sentaría encima de los enlaces legales de la
   esquina. El pie le guarda el hueco: lo que mide el botón (3.5rem) más su
   margen. */
.footer-bajo { padding-bottom: calc(1.4rem + 3.5rem + clamp(14px, 3vw, 26px)); }

/* El botón flotante de reservar. Va dentro del pie a propósito:
   `position: fixed` lo mantiene pegado a la esquina igual, y así no
   queda contenido fuera de ningún landmark para un lector de pantalla.
   En la portada se retira mientras el formulario está en pantalla
   (`.esta-oculto`, lo pone script.js); en las demás páginas se queda. */
.reservar-flota {
  position: fixed;
  right: clamp(14px, 3vw, 26px);
  bottom: clamp(14px, 3vw, 26px);
  z-index: 800;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  background: var(--brasa);
  color: var(--cal-alta);
  font-size: var(--fs-sm);
  font-weight: 600;
  box-shadow: 0 10px 26px -8px rgba(176, 69, 30, .7);
  transition: background-color .2s ease, opacity .25s ease, transform .25s ease, visibility .25s;
}
.reservar-flota:hover { background: var(--brasa-tinta); }
.reservar-flota i { font-size: 1.15rem; }
.reservar-flota.esta-oculto {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.96);
  pointer-events: none;
}
@media (max-width: 479px) { .reservar-flota-txt { display: none; } .reservar-flota { padding: .95rem; } }

/* =========================================================
   20. PÁGINAS INTERIORES
   ========================================================= */
.pagina-alto {
  padding-top: calc(var(--header-h) + clamp(1.8rem, 5vw, 3.4rem));
  padding-bottom: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(180deg, var(--arena-suave), var(--cal));
}
.volver {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--apagado);
  transition: color .2s ease, gap .2s ease;
}
.volver:hover { color: var(--brasa); gap: .85rem; }
.pagina-entrada { max-width: 66ch; margin-top: 1.2rem; font-size: var(--fs-lg); color: var(--apagado); }
.pagina-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.8rem;
}
.pagina-etiquetas li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border: 1px solid var(--arena-honda);
  border-radius: 999px;
  background: var(--cal-alta);
  font-size: var(--fs-xs);
  color: var(--texto);
}
.pagina-etiquetas i { color: var(--brasa); }

/* --- La carta --- */
.carta { padding-bottom: clamp(3rem, 7vw, 5rem); }
.carta-bloques { display: grid; gap: clamp(2.4rem, 5vw, 3.6rem); }
.carta-bloque { min-width: 0; }
/* Lo que se ve mientras la carta llega, o si no llega. */
.carta-estado {
  grid-column: 1 / -1;
  padding: 1.3rem 1.5rem;
  border: 1px dashed var(--arena-honda);
  border-radius: var(--radio);
  background: var(--cal-alta);
  text-align: center;
  color: var(--apagado);
}
.carta-estado.es-cargando { animation: late 1.4s ease-in-out infinite; }
.carta-estado.es-error,
.carta-estado.es-vacia { border-style: solid; border-color: var(--brasa); color: var(--texto); }
.carta-estado a { font-weight: 600; color: var(--brasa); border-bottom: 1px solid currentColor; white-space: nowrap; }
@media (min-width: 900px) {
  .carta-bloques { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .carta-bloque--ancho { grid-column: 1 / -1; }
}

.carta-bloque-alto {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
  padding-bottom: .9rem;
  border-bottom: 2px solid var(--picon);
}
.carta-bloque-alto h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
  font-weight: 600;
  color: var(--picon);
}
.carta-bloque-alto i { color: var(--brasa); font-size: 1.05rem; }
.carta-bloque-alto h2 em { font-style: italic; font-weight: 400; color: var(--brasa); }
.carta-bloque-sub {
  margin: -.6rem 0 1rem;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--apagado);
}
.carta-bloque-alto .carta-cuenta {
  margin-left: auto;
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

.plato-linea {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: .3rem .8rem;
  padding: .75rem 0;
  border-bottom: 1px dotted var(--filete);
}
.plato-linea:last-child { border-bottom: 0; }
.plato-nombre {
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--texto);
}
.plato-linea.es-estrella .plato-nombre { color: var(--brasa-tinta); font-weight: 700; }
.plato-marca {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .55rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: var(--brasa);
  color: var(--cal-alta);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .12em;
}
.plato-precio-linea {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--picon);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plato-nota {
  display: block;
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: .68rem;
  font-weight: 500;
  text-align: right;
  white-space: normal;
  color: var(--apagado);
}
.plato-glosa,
.plato-desc {
  grid-column: 1 / -1;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--apagado);
}
.plato-sabores {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .4rem;
}
.plato-sabores li {
  padding: .15rem .6rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  font-size: .68rem;
  color: var(--apagado);
}

/* Los alérgenos del plato: los iconos en fila, con el nombre al pasar por
   encima y en el `aria-label`. */
.plato-alerg {
  grid-column: 1 / -1;
  font-size: .85rem;
  line-height: 1.2;
  letter-spacing: .12em;
}

.carta-menu-nino {
  padding: 1.4rem 1.6rem;
  border: 1.5px solid var(--arena-honda);
  border-radius: var(--radio);
  background: var(--cal-alta);
}
.carta-menu-nino .plato-linea { border: 0; padding-top: 0; }

.carta-extras {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}
.carta-extra {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: var(--cal-alta);
  font-size: var(--fs-xs);
  color: var(--apagado);
}
.carta-extra b { font-weight: 700; color: var(--picon); font-variant-numeric: tabular-nums; }

/* La leyenda de alérgenos, al final: solo los que se usan. */
.alergenos-lista { display: flex; flex-wrap: wrap; gap: .5rem; }
.alergenos-lista li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .85rem;
  border: 1px solid var(--filete);
  border-radius: 999px;
  background: var(--cal-alta);
  font-size: var(--fs-xs);
  color: var(--texto);
}
.alergenos-ico { font-size: 1rem; line-height: 1; }
.alergenos-nota {
  max-width: 70ch;
  margin-top: 1rem;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--apagado);
}

.carta-nota {
  display: grid;
  gap: .8rem;
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--arena-honda);
  background: var(--arena-suave);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: var(--fs-sm);
  color: var(--texto);
}
.carta-nota p { display: flex; gap: .8rem; margin: 0; }
.carta-nota i { margin-top: .3em; color: var(--brasa-tinta); flex: none; }

.carta-cierre {
  margin-top: clamp(2.6rem, 6vw, 4rem);
  padding: clamp(2rem, 5vw, 3.2rem);
  border-radius: var(--radio);
  text-align: center;
}
.carta-cierre h2 { margin-bottom: 1rem; }
.carta-cierre p { max-width: 56ch; margin-inline: auto; }
.carta-cierre-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 1.8rem;
}

/* --- Páginas legales --- */
.legal { padding-block: clamp(2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem); }
.legal-caja { max-width: 78ch; }
.legal-fecha {
  margin-top: 1rem;
  font-size: var(--fs-sm);
  color: var(--apagado);
}
.legal-bloque + .legal-bloque { margin-top: clamp(2rem, 4vw, 2.8rem); }
.legal-bloque h2 {
  margin-bottom: .9rem;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem);
  font-weight: 600;
  color: var(--picon);
}
.legal-bloque h3 {
  margin: 1.6rem 0 .6rem;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--picon);
}
.legal-cuerpo p { color: var(--apagado); }
.legal-cuerpo ul { margin: .8rem 0 1.2rem; display: grid; gap: .5rem; }
/* La raya va colgada a la izquierda y no como hermana en un flex: con
   `display: flex`, un <strong> al principio del punto se iba a una columna
   propia y el resto de la frase a otra. */
.legal-cuerpo li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--apagado);
  font-size: var(--fs-sm);
}
.legal-cuerpo li::before { content: "—"; position: absolute; left: 0; color: var(--brasa); }
.legal-cuerpo a { color: var(--brasa); border-bottom: 1px solid currentColor; }

.legal-datos {
  display: grid;
  gap: 1px;
  margin: 1.2rem 0;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 560px) { .legal-datos { grid-template-columns: 1fr 1fr; } }
.legal-datos > div { padding: .9rem 1.1rem; background: var(--cal-alta); }
.legal-datos dt {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--apagado);
}
.legal-datos dd { margin: .25rem 0 0; font-size: var(--fs-sm); color: var(--texto); }

.tabla-caja { overflow-x: auto; margin: 1.2rem 0; }
.legal-tabla {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.legal-tabla th, .legal-tabla td {
  padding: .75rem .9rem;
  border: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.legal-tabla th { background: var(--arena-suave); font-weight: 700; color: var(--picon); }
.legal-tabla td { color: var(--apagado); background: var(--cal-alta); }

/* --- 404 --- */
.perdido {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 4rem) 20px;
  text-align: center;
}
.perdido-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(5rem, 18vw, 11rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--brasa);
}
.perdido p { max-width: 46ch; margin-inline: auto; color: var(--apagado); }
.perdido-botones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
}

/* =========================================================
   21. MOVIMIENTO REDUCIDO E IMPRESIÓN
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .aparece { opacity: 1; transform: none; filter: none; }
  .volcan-t { stroke-dashoffset: 0; }
  .volcan-sol { opacity: 1; }
  /* Las cintas se paran del todo: con la regla de arriba durarían una
     milésima y darían un salto de un juego entero, que es peor que no
     moverse. Se quedan quietas donde empiezan. */
  .cinta, .cinta-fotos-via { animation: none; }
  .turnos-vacio.esta-cargando, .carta-estado.es-cargando { animation: none; }
}

@media print {
  .cabecera, .menu-movil, .velo-menu, .reservar-flota, .hero-baja, .aviso-cookies, .ventana,
  .cursor-aro, .cursor-punto, .lupa, .separador, .abrir-galeria { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .oscuro, .site-footer { background: #fff !important; color: #000 !important; }
  .oscuro p, .site-footer p, .titular, .oscuro .titular { color: #000 !important; }
  a { text-decoration: underline; }
  .plato-linea { break-inside: avoid; }
  /* La ficha de una reserva se imprime entera, sin los botones. */
  .resguardo-botones, .resguardo-otra, #cns-form { display: none !important; }
  .carta-bloques { grid-template-columns: 1fr 1fr; }
  .pagina-alto { padding-top: 0; }
  /* La galería se imprime como una tirada de fotos y no como una cinta:
     sin recorte, sin desvanecido, sin movimiento y sin el juego 2, que
     es una copia y saldría cada plato dos veces. */
  .cinta-fotos { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .cinta-fotos-via { width: auto; flex-wrap: wrap; animation: none; transform: none; }
  .pieza[aria-hidden="true"] { display: none; }
  .pieza { break-inside: avoid; }
}

/* El hueco que la propiedad tiene que rellenar en las paginas legales.
   Se ve a simple vista a proposito: sin el nombre y el NIF del titular,
   el aviso legal no cumple el articulo 10 de la LSSI. */
.por-completar {
  padding: .1rem .5rem;
  border-radius: 3px;
  background: #FFE9B0;
  color: #6B4A00;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .1em;
}
.legal-cuerpo code {
  padding: .1rem .4rem;
  border-radius: 3px;
  background: var(--arena-suave);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}
.legal-cuerpo strong { color: var(--picon); }

/* Los `style="--giro: …"` que llevaban los carteles y las cintas están aquí
   como clases. No es cosmética: sin un solo atributo `style` en el HTML, la
   `Content-Security-Policy` puede decir `style-src 'self'` a secas, sin
   `unsafe-inline`. Ese es el interruptor que apaga la mitad de los ataques
   de inyección de estilos. */
.cinta--especialidades { --vel: 54s; }
.cinta--carteles       { --vel: 68s; }
.cartel--g1 { --giro: -2deg; }
.cartel--g2 { --giro: 1.6deg; }
.cartel--g3 { --giro: -1.2deg; }
.cartel--g4 { --giro: 2.2deg; }
.cartel--g5 { --giro: -1.8deg; }
.cartel--g6 { --giro: 1.2deg; }
.cartel--g7 { --giro: -2.4deg; }
.casillas--sueltas { margin-top: 1rem; }
.btn--suelto { margin-top: 1.4rem; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; }

/* «Configurar cookies», en el pie: un botón —no lleva a ninguna página,
   abre el aviso— con la misma pinta que los enlaces de al lado. */
.footer-boton { text-align: left; transition: color .2s ease; }
.footer-boton:hover { color: var(--arena); }

/* Los datos del titular van en dos columnas. Con un número impar de filas
   la última se estira a lo ancho: si no, a su lado queda un hueco del
   color del filete que parece una casilla vacía. */
@media (min-width: 560px) {
  .legal-datos > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* =========================================================
   22. EL AVISO DE COOKIES
   Lo monta script.js (sección 9). En pantalla ancha es una tarjeta abajo
   a la izquierda, para no pisar el botón de reservar de la derecha; en el
   móvil va a todo lo ancho y es el botón el que sube.
   ========================================================= */
.aviso-cookies {
  position: fixed;
  left: clamp(10px, 3vw, 26px);
  right: clamp(10px, 3vw, 26px);
  bottom: clamp(10px, 3vw, 26px);
  /* Por encima del botón de reservar (800) y de la cabecera (900); por debajo del
     menú de móvil (950/960) y de la ampliación de fotos (2000), que se
     abren encima a propósito. */
  z-index: 940;
  max-height: calc(100vh - 2 * clamp(10px, 3vw, 26px));
  max-height: calc(100svh - 2 * clamp(10px, 3vw, 26px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--cal-alta);
  border: 1px solid var(--filete);
  border-top: 3px solid var(--brasa);
  border-radius: calc(var(--radio) * 2);
  box-shadow: var(--sombra-alta);
  color: var(--texto);
  font-size: var(--fs-sm);
  line-height: 1.55;
  animation: aviso-sube .5s cubic-bezier(.2, .7, .2, 1) both;
}
@media (min-width: 720px) {
  .aviso-cookies { right: auto; width: 27rem; padding: 1.5rem 1.6rem 1.2rem; }
}
@keyframes aviso-sube { from { opacity: 0; transform: translateY(16px); } }

.aviso-cookies-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--picon);
}
/* Recibe el foco al abrir el aviso desde el pie, para que el lector de
   pantalla empiece por aquí; no es un control y no lleva anillo. */
.aviso-cookies-titulo:focus { outline: none; }
.aviso-cookies-txt { margin: .6rem 0 0; color: var(--apagado); }

/* Aceptar y rechazar: mismo tamaño, mismo color, uno al lado del otro. */
.aviso-cookies-botones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.1rem;
}
.aviso-cookies-botones .btn { padding: .85rem 1rem; }

.aviso-cookies-bajo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1rem;
  margin: .9rem 0 0;
  font-size: var(--fs-xs);
}
.aviso-cookies-enlace {
  font-weight: 600;
  color: var(--brasa);
  border-bottom: 1px solid currentColor;
}
.aviso-cookies-enlace:hover { color: var(--brasa-tinta); }

.aviso-cookies-ajustes {
  display: grid;
  gap: .6rem;
  margin-top: 1rem;
}
.ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .9rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--cal);
}
.ajuste-txt { display: grid; gap: .1rem; }
.ajuste-txt b { font-size: var(--fs-sm); color: var(--picon); }
.ajuste-txt span { font-size: var(--fs-xs); line-height: 1.45; color: var(--apagado); }
.ajuste-fijo {
  flex: none;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--apagado);
}

/* El interruptor es una casilla de verdad —se marca con la barra
   espaciadora y el lector de pantalla la anuncia como interruptor—
   vestida de palanca. */
.interruptor {
  flex: none;
  position: relative;
  width: 46px; height: 26px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 999px;
  background: var(--filete);
  cursor: pointer;
  transition: background-color .2s ease;
}
.interruptor::before {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--cal-alta);
  box-shadow: 0 1px 3px rgba(23, 20, 15, .3);
  transition: transform .2s ease;
}
.interruptor:checked { background: var(--brasa); }
.interruptor:checked::before { transform: translateX(20px); }
/* El foco visible general redondea a 2 px: aquí la palanca perdería la forma. */
.interruptor:focus-visible { border-radius: 999px; }

/* Con los dos a lo ancho, el botón de reservar sube lo que mida el aviso.
   La medida la escribe script.js en --aviso-alto. */
@media (max-width: 719px) {
  .hay-aviso-cookies .reservar-flota { bottom: calc(var(--aviso-alto, 0px) + clamp(10px, 3vw, 26px) + 12px); }
}