/* Restaurante El Pirata · BORRADOR de su web, en local. Sin publicar.
   Tres colores: el negro de su bandera, el blanco de su cal y un AZUL POR EL MAR, el de la paleta «Stephanny»
   (S·T·E → #5577EE), que pidio la persona de la sesion. Los aprueba el restaurante.
   Letra: Cormorant Garamond (titulos y carta) y EB Garamond (texto), romanas clasicas como la de su placa. Las dos,
   licencia OFL 1.1 (fuentes/OFL-*.txt), de Fontsource 5.3.0, bajadas el 17-oct con el si de la persona de la sesion y
   servidas desde la propia web: nada se pide fuera. Las fotos, del propio restaurante (fotos/).
   Movimiento: por defecto SE MUEVE PARA TODOS, aunque el sistema de quien visita pida reducirlo (decision de la persona, 31-oct).
   En papel, quieto. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fuentes/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("fuentes/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fuentes/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fuentes/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fuentes/eb-garamond-latin-600-normal.woff2") format("woff2"); }

:root {
  --tinta: #141414;   /* la bandera */
  --cal: #FBF9F4;     /* la fachada */
  --arena: #F1ECE1;
  /* el azul: #5577EE de la paleta, en su mismo tono (OKLCH 268,5) y lo justo mas oscuro para texto AA
     sobre la arena (4,68:1) y la cal (5,24:1) */
  --azul: #415FD4;
  --mar-hondo: #121D47;   /* el mismo azul, de noche: el fondo de la reserva */
  --azul-palido: #AEC3F9; /* el mismo azul, sobre el mar hondo (9,26:1) */
  --piedra: #5E574D;  /* el zocalo */
  --borde: #8C8476;
  --linea: #DDD5C7;   /* filetes, solo decorativos */

  --sello-prop-fondo: #FFE58A;
  --sello-sim-texto: #5B1F7A;   --sello-sim-fondo: #F3E8FA;

  --letra: "EB Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --letra-titulos: "Cormorant Garamond", "EB Garamond", "Palatino Linotype", Georgia, serif;
  --ancho: 72rem;
  /* el aire entre partes: crece con la pantalla */
  --aire: clamp(5rem, 9vw, 8.5rem);
  --curva: cubic-bezier(0.2, 0.6, 0.2, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1.1875rem;
  line-height: 1.65;
  /* cifras de texto, como en un libro; las de horas y coordenadas, rectas (abajo) */
  font-variant-numeric: oldstyle-nums;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; }

::selection { background: var(--azul); color: var(--cal); }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 { font-family: var(--letra-titulos); font-weight: 500; line-height: 1.06; }
h2 { margin: 0 0 1.5rem; font-size: clamp(2.6rem, 5.2vw, 4.25rem); letter-spacing: -0.012em; }
h3 { margin: 0 0 0.5rem; font-size: 1.5rem; }
h2 em, h3 em { font-style: italic; }
h1, h2, h3, .entrada { text-wrap: balance; }
p { text-wrap: pretty; }

/* saltar al contenido: solo se ve con el teclado */
.saltar {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 30;
  padding: 0.7rem 1.1rem; background: var(--cal); color: var(--tinta);
  font-size: 0.9375rem; font-weight: 600; text-decoration: none; border: 2px solid var(--tinta);
}
.saltar:focus { top: 0.75rem; }

/* los rotulos: mayusculas espaciadas, de tamaño fijo. Los woff2 de Fontsource no traen versalitas de verdad
   (medido: con la sintesis apagada salen minusculas), y las que imita el navegador quedan diminutas. */
.rotulo, .seccion-num, .boton, .enlace-flecha, .portada-lugar, .ficha-casa dt, .destacado-grupo, .carta h3, .horario th, .barra-enlaces a, .pie-titulo {
  font-variant-caps: normal;
  text-transform: uppercase;
}

/* cada parte de la casa, con su numero romano (como la placa) y un filete hasta el borde */
.seccion-num {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin: 0 0 clamp(2.25rem, 4vw, 3.25rem);
  color: var(--piedra);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.22em;
}
.seccion-num .num {
  font-family: var(--letra-titulos);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--azul);
}
.seccion-num::after { content: ""; flex: 1; border-top: 1px solid var(--linea); transform: translateY(-0.35em); }

.entrada { margin: 0 0 1.25rem; font-family: var(--letra-titulos); font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.38; }
.nota { color: var(--piedra); font-size: 1.0625rem; font-style: italic; }
.cifras { font-variant-numeric: lining-nums tabular-nums; }
.sin-corte { white-space: nowrap; }

/* --- Los sellos --- */
.sello {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border: 1.5px dashed currentColor;
  border-radius: 3px;
  font-family: var(--letra);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.sello-sim  { color: var(--sello-sim-texto);  background: var(--sello-sim-fondo); }

/* --- Botones: rectos, de filete fino, en versalitas --- */
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.5rem 1.7rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.boton-lleno { background: var(--cal); color: var(--tinta); border-color: var(--cal); }
.boton-lleno:hover { background: transparent; color: var(--cal); }
.boton-borde { color: var(--cal); }
.boton-borde:hover { background: var(--cal); color: var(--tinta); }
.boton-oscuro { background: var(--tinta); color: var(--cal); border-color: var(--tinta); }
.boton-oscuro:hover { background: transparent; color: var(--tinta); }

/* un enlace que lleva a otro sitio: en versalitas, con su filete y su flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.enlace-flecha::after { content: " →"; white-space: pre; transition: transform 0.25s var(--curva); }
.enlace-flecha:hover::after { transform: translateX(0.3em); }

/* los telefonos: una fila de enlaces con dedo de alto (44 px) */
.contacto-fila { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; }
.contacto-fila a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- La barra que acompana al bajar: sale cuando la portada se va --- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: none;
  background: rgba(20, 20, 20, 0.97);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cal);
  border-bottom: 1px solid rgba(251, 249, 244, 0.18);
}
.js .barra { display: block; visibility: hidden; transform: translateY(-100%); }
.js .barra.barra--ver { visibility: visible; transform: none; }
.barra-progreso { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul-palido); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.barra-fila { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 3.75rem; }
.barra-nombre { display: inline-flex; align-items: center; min-height: 44px; color: var(--cal); font-family: var(--letra-titulos); font-size: 1.6rem; font-style: italic; line-height: 1; text-decoration: none; }
.barra-enlaces { display: none; gap: 0.25rem 1.5rem; margin: 0 auto; }
.barra-enlaces a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cal); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-decoration: none; border-bottom: 1px solid transparent; }
.barra-enlaces a:hover, .barra-enlaces a[aria-current="true"] { border-bottom-color: var(--cal); }
.barra .boton { min-height: 44px; padding: 0.35rem 1.2rem 0.5rem; }
.barra :focus-visible { outline-color: var(--sello-prop-fondo); }

/* --- Portada: la foto de la terraza y su texto ---
   En el movil, la foto arriba y el texto debajo, sobre la tinta (el plato se ve entero).
   En ancho, el texto encima de la foto, a la izquierda. */
.portada {
  position: relative;
  color: var(--cal);
  background: var(--tinta);
  overflow: hidden;
}
.portada-foto {
  width: 100%;
  height: 56vh;
  min-height: 18rem;
  max-height: 30rem;
  object-fit: cover;
  object-position: 62% 70%;
}
.portada-texto {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--ancho);
  margin: -5rem auto 0;
  padding: 5rem 1.25rem 4.5rem;
  /* funde la foto con la tinta: el texto empieza ya sobre la tinta lisa */
  background: linear-gradient(180deg, rgba(20,20,20,0) 0, rgba(20,20,20,0.85) 3rem, var(--tinta) 5rem);
}
.portada-contacto a { color: var(--cal); }
/* el logo y, bajo la bandera y a la derecha del mastil, «50 · Aniversario · 1975 - 2025», como en su placa.
   En la portada y en el pie. Las medidas salen de la placa, en proporcion al ancho del logo
   (cqw = 1 % de ese ancho; delante, lo mismo con --ancho-marca, para el navegador que no lo entienda). */
.marca-placa { position: relative; width: var(--ancho-marca); container-type: inline-size; }
.marca-placa .marca-logo { margin: 0; }
.marca-logo img { display: block; width: 100%; height: auto; }
.portada-marca { --ancho-marca: min(22rem, 78vw); }
.marca-placa .aniversario {
  position: relative;
  width: 52%;
  margin: -24% 0 0 20%;
  /* la letra de la placa: romana con cifras rectas */
  font-family: "Times New Roman", Times, "Noto Serif", "Liberation Serif", serif;
  font-variant-numeric: lining-nums;
  line-height: 1;
  text-align: center;
}
.aniversario span { display: block; }
.aniversario-cifra { font-size: calc(var(--ancho-marca) * 0.36); font-size: 36cqw; line-height: 0.8; }
.aniversario-palabra { margin-top: 0.15em; font-size: calc(var(--ancho-marca) * 0.068); font-size: 6.8cqw; letter-spacing: 0.03em; text-transform: uppercase; }
.aniversario-anos { font-size: calc(var(--ancho-marca) * 0.074); font-size: 7.4cqw; letter-spacing: 0.03em; }
.portada-lugar {
  margin: 1.75rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.26em;
}
.portada .temporada {
  margin: 1.4rem 0 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(251,249,244,0.45);
  font-family: var(--letra-titulos);
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.3;
  text-wrap: balance;
}
.portada .temporada-sub { display: block; margin-top: 0.55rem; font-family: var(--letra); font-size: 0.8125rem; font-style: normal; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.portada-contacto { margin: 1rem 0 0; font-size: 1.125rem; }
.portada :focus-visible { outline-color: var(--sello-prop-fondo); }
/* las olas del borde de la portada y del arranque de la reserva: dos capas del color de la pagina, solo adorno. Quietas salvo con movimiento permitido (abajo).
   Cada svg mide tres anchos y empieza medio ancho a la izquierda: sobra para correr de lado y para moverse al bajar */
.olas { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; height: clamp(2.6rem, 7vw, 7rem); overflow: hidden; pointer-events: none; color: var(--cal); }
.ola { position: absolute; left: -50%; bottom: 0; width: 300%; height: 100%; fill: currentColor; }
.ola-atras { opacity: 0.4; }
.olas-arriba { top: -1px; bottom: auto; transform: scaleY(-1); }
/* adornos que solo salen con movimiento permitido (abajo) */
.portada-baja, .cinta { display: none; }

/* al saltar a un ancla, un respiro por encima del titulo */
[id] { scroll-margin-top: 1.5rem; }
section[id], .bloque[id] { scroll-margin-top: 4.5rem; }

/* las fotos: un marco que las recorta, con el color de la foto mientras llega */
.marco { position: relative; margin: 0; overflow: hidden; background: var(--medio, var(--arena)); }
.marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --- I · La casa --- */
.casa { padding: var(--aire) 0 calc(var(--aire) * 0.8); }
.casa-rejilla { display: grid; gap: 1.5rem 5rem; }
.casa h2 { margin: 0; }
.casa-texto { max-width: 34rem; }
.casa-texto p:last-child { margin-bottom: 0; }
.ficha-casa { margin: 2.5rem 0 0; display: grid; border-top: 1px solid var(--tinta); border-bottom: 1px solid var(--linea); }
.ficha-casa div { padding: 1.1rem 0; }
.ficha-casa div + div { border-top: 1px solid var(--linea); }
.ficha-casa dt { color: var(--piedra); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; }
.ficha-casa dd { margin: 0.1rem 0 0; font-family: var(--letra-titulos); font-size: 1.65rem; line-height: 1.2; }
.ficha-casa dd a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -0.35rem; }

/* --- II · La cocina --- */
.cocina { padding: calc(var(--aire) * 0.7) 0 var(--aire); }
.cocina-intro { display: grid; gap: 0 5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.cocina-intro h2 { margin: 0 0 1.25rem; }
.destacados { list-style: none; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; display: grid; gap: 2.5rem; }
.destacado { display: flex; flex-direction: column; margin: 0; }
.destacado .marco { aspect-ratio: 4 / 3; }
.destacado-grupo {
  margin: 1.1rem 0 0.3rem;
  color: var(--piedra);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.destacado h3 { margin: 0; font-size: 1.6rem; font-style: italic; line-height: 1.2; }

.galeria { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
.galeria .marco { aspect-ratio: 1; }

/* --- El Pirata en medios: un carril de nombres que se mueve solo con movimiento permitido (abajo), en gris que se
       colorea al pasar. Sin movimiento (o sin JavaScript), una fila que se parte en lineas, quieta. --- */
.medios { padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(3.5rem, 6vw, 5rem); border-block: 1px solid var(--linea); background: var(--cal); overflow: hidden; }
.medios-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.medios h2 { margin: 0; font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.medios-pausa { display: none; min-height: 44px; min-width: 44px; padding: 0.4rem 1rem; border: 1px solid var(--borde); background: none; color: var(--piedra); font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: color 0.25s, border-color 0.25s; }
.medios-pausa:hover { color: var(--azul); border-color: var(--azul); }
.medios-carril, .medios-copia { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2.5rem; }
.medios-copia { display: none; }
.medio { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 0.55rem 0.5rem; color: var(--piedra); text-decoration: none; text-align: center; filter: grayscale(1); transition: color 0.3s, transform 0.3s var(--curva); }
.medio-nombre { font-size: 1.6rem; line-height: 1.1; white-space: nowrap; }
.medio-nota { margin-top: 0.3rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }
.medio:hover, .medio:focus-visible { color: var(--azul); }
/* los logos (medios/*.svg): una mascara con el color del texto, asi pasan de gris a azul igual que los nombres */
.medio-logo { display: block; background: currentColor; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.medio-logo-pontevedra-viva { --logo: url("medios/pontevedra-viva.svg"); width: 9.5rem; height: 2.1rem; }
.medio-logo-hule-y-mantel { --logo: url("medios/hule-y-mantel.svg"); width: 12rem; height: 4.4rem; margin-block: -1.1rem; }
.medio-logo-el-espanol { --logo: url("medios/el-espanol.svg"); width: 10rem; height: 1.95rem; }
.medio-logo + .medio-nota { margin-top: 0.55rem; }
/* cada nombre, con su aire: hasta tener los logos oficiales, solo letra */
.medio-voz .medio-nombre { font-family: var(--letra-titulos); font-weight: 500; font-style: italic; font-size: 1.85rem; }
.medio-repsol .medio-nombre { font-family: var(--letra); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.3rem; }
.medio-pviva .medio-nombre { font-family: var(--letra); font-weight: 600; letter-spacing: -0.01em; font-size: 1.55rem; }
.medio-hule .medio-nombre { font-family: var(--letra-titulos); font-weight: 500; font-size: 1.8rem; letter-spacing: 0.02em; }
.medio-espanol .medio-nombre { font-family: var(--letra-titulos); font-weight: 500; font-size: 1.9rem; letter-spacing: 0.04em; }
.medio-faro .medio-nombre { font-family: var(--letra); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- III · La carta: una hoja impresa, con su doble filete --- */
.carta { padding: var(--aire) 0; background: var(--arena); overflow-x: clip; }
.carta .seccion-num::after { border-color: var(--borde); }
.carta-hoja {
  padding: 3.5rem 1.5rem 3rem;
  background: var(--cal);
  border: 1px solid var(--borde);
  outline: 1px solid var(--borde);
  outline-offset: -0.6rem;
  box-shadow: 0 1.25rem 3rem -1.5rem rgba(20, 20, 20, 0.25);
}
.carta-casa { margin: 0 0 1.25rem; color: var(--piedra); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; }
.carta-hoja h2 { margin-bottom: 0.4rem; text-align: center; }
.carta-fecha { margin: 0; text-align: center; }
.carta-grupo { margin-top: 3rem; }
.carta h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  color: var(--azul);
  font-family: var(--letra);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.26em;
}
.carta h3::before, .carta h3::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.carta-lista { list-style: none; margin: 0; padding: 0; }
/* los platos en la letra de los titulos: la carta se lee como una hoja de verdad */
.carta-lista li { padding: 0.42rem 0; font-family: var(--letra-titulos); font-size: 1.375rem; line-height: 1.25; break-inside: avoid; }
.carta abbr {
  margin-left: 0.25rem;
  color: var(--azul);
  font-family: var(--letra);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  vertical-align: 0.2em;
}
/* el asterisco, a su tamaño */
.carta abbr.marca-gluten { font-size: 1.25rem; vertical-align: baseline; }
.carta-pie { max-width: 40rem; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--linea); text-align: center; }
.leyenda { margin: 0 0 0.75rem; color: var(--piedra); font-size: 1.0625rem; }
.aviso-alergenos { margin: 0; font-style: italic; }
.aviso-alergenos strong { font-style: normal; font-weight: 600; }

/* --- IV · Donde y cuando --- */
.donde-horario { padding: var(--aire) 0; }
.dos-columnas { display: grid; gap: 4rem; }
.donde-horario h2 { font-size: clamp(2.25rem, 3.6vw, 3rem); }
address { margin: 0 0 1.25rem; font-family: var(--letra-titulos); font-size: 1.75rem; font-style: normal; line-height: 1.35; }
.coordenadas { margin: 0 0 1.25rem; color: var(--piedra); font-size: 1.0625rem; }
.horario { width: 100%; border-collapse: collapse; border-top: 1px solid var(--tinta); }
.horario caption { caption-side: bottom; padding-top: 0.9rem; color: var(--piedra); font-size: 1.0625rem; font-style: italic; text-align: left; }
.horario th, .horario td { padding: 0.85rem 0.25rem; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--linea); }
.horario th { width: 45%; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; }
.horario td { font-variant-numeric: lining-nums tabular-nums; }
.horario .cerrado { color: var(--piedra); font-style: italic; }

/* --- V · Reservas --- */
.reservar { position: relative; padding: var(--aire) 0; background: var(--mar-hondo); color: var(--cal); text-align: center; }
.reservar .seccion-num { justify-content: center; color: var(--azul-palido); }
.reservar .seccion-num .num { color: var(--azul-palido); }
.reservar .seccion-num::before { content: ""; flex: 1; border-top: 1px solid rgba(174,195,249,0.35); transform: translateY(-0.35em); }
.reservar .seccion-num::after { border-color: rgba(174,195,249,0.35); }
.reservar h2 { font-size: clamp(2.8rem, 6vw, 4.75rem); }
.reservar-caja > p { max-width: 36rem; margin-left: auto; margin-right: auto; }
.reservar .acciones { justify-content: center; margin-top: 2.25rem; }
.reservar .boton-lleno { color: var(--mar-hondo); }
.reservar .boton-lleno:hover { color: var(--cal); }
.reservar .boton-borde:hover { color: var(--mar-hondo); }
.reservar :focus-visible { outline-color: var(--sello-prop-fondo); }
.reservar a { color: var(--cal); }
.aviso-simulado { margin: 1rem auto 0; min-height: 1.6em; color: var(--sello-prop-fondo); font-weight: 600; }
.reservar-nota { margin-top: 1.75rem; color: var(--azul-palido); font-size: 1.0625rem; font-style: italic; }
.reservar-ejemplo { margin-top: 0.5rem; }
.enlace-boton { min-height: 44px; padding: 0.4rem 0.6rem; border: 0; background: none; color: var(--cal); font: inherit; font-size: 1.0625rem; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.enlace-boton:hover { color: var(--azul-palido); }

/* --- Pie --- */
.pie { padding: 4.5rem 0 3rem; background: var(--tinta); color: var(--cal); font-size: 1.0625rem; }
.pie a { color: var(--cal); }
.pie p { margin: 0 0 0.35rem; }
/* en el movil: el logo y «Dónde» a todo el ancho; «Llamar» y «La casa» uno al lado del otro */
.pie-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }
.pie-rejilla > :nth-child(-n+2) { grid-column: 1 / -1; }
/* mas ancho que antes (10rem): asi «Aniversario» no baja de 14 px */
.pie-marca { --ancho-marca: 13rem; }
.pie-titulo { margin: 0 0 0.6rem; color: var(--azul-palido); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; }
.pie-datos a, .pie-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-nav { display: flex; flex-direction: column; }
.pie-legal { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(251,249,244,0.2); display: flex; flex-wrap: wrap; gap: 0.35rem 2rem; align-items: center; font-size: 1rem; }
.pie-legal p { margin: 0; }.pie :focus-visible { outline-color: var(--sello-prop-fondo); }
.pie-legal-enlaces { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pie-legal a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- Las paginas legales (aviso-legal.html y privacidad.html): texto corto y legible, sobre la cal --- */
.legal-cab { background: var(--tinta); }
.legal-cab-fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.legal-volver { display: inline-flex; align-items: center; min-height: 44px; color: var(--cal); font-size: 1.0625rem; }
.legal-cab :focus-visible { outline-color: var(--sello-prop-fondo); }
.legal { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(4rem, 8vw, 6.5rem); }
.legal-texto { max-width: 46rem; }
.legal h1 { margin: 0 0 1rem; font-size: clamp(2.6rem, 6vw, 4rem); letter-spacing: -0.012em; }
.legal-intro { margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--piedra); }
.legal h2 { margin: clamp(2rem, 4vw, 2.75rem) 0 0.75rem; font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: 0; }
.legal p, .legal li { margin: 0 0 1rem; }
.legal-lista { margin: 0; padding-left: 1.25rem; }
.legal-datos { margin: 0 0 1rem; display: grid; gap: 0.9rem; }
.legal-datos > div { padding-top: 0.9rem; border-top: 1px solid var(--linea); }
.legal-datos dt { color: var(--piedra); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.legal-datos dd { margin: 0.15rem 0 0; font-family: var(--letra-titulos); font-size: 1.4rem; line-height: 1.3; }
.legal-datos dd a, .legal-enlace, .legal-fecha a { display: inline-flex; align-items: center; min-height: 44px; }
.legal-fecha { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); color: var(--piedra); font-size: 1rem; }
.pie-simple { padding: 2.5rem 0 2rem; }
.pie-nav-simple { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.pie-nav-simple a { display: inline-flex; align-items: center; min-height: 44px; }
/* solo para lectores de pantalla */
.solo-lector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- El visor de fotos (app.js): la foto ampliada, sobre la tinta --- */
.marco-ampliar { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.marco-ampliar:focus-visible { outline: 3px solid var(--sello-prop-fondo); outline-offset: -6px; }
.visor { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(12, 12, 12, 0.94); color: var(--cal); }
.visor::backdrop { background: rgba(12, 12, 12, 0.94); }
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor-fig { margin: 0; padding: 4.5rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }
.visor-img { max-width: 100%; max-height: calc(100dvh - 10rem); width: auto; height: auto; object-fit: contain; }
.visor-pie { max-width: 40rem; font-size: 1.0625rem; font-style: italic; text-align: center; }
.visor-boton { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0 0 0.2rem; border: 1px solid rgba(251,249,244,0.6); background: rgba(20,20,20,0.6); color: var(--cal); font: inherit; font-size: 1.9rem; line-height: 1; cursor: pointer; transition: background-color 0.25s, color 0.25s; }
.visor-boton:hover { background: var(--cal); color: var(--tinta); }
.visor-boton:focus-visible { outline: 3px solid var(--sello-prop-fondo); outline-offset: 3px; }
.visor-cerrar { top: 1rem; right: 1rem; }
.visor-ant { left: 1rem; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 47.99rem) { .visor-ant, .visor-sig { top: auto; bottom: 1rem; transform: none; } .visor-ant { left: calc(50% - 4rem); } .visor-sig { right: calc(50% - 4rem); } .visor-fig { padding-bottom: 5rem; } .visor-img { max-height: calc(100dvh - 13rem); } }

/* --- A partir de tableta y ordenador --- */
@media (min-width: 48rem) {
  .envoltura { padding: 0 2rem; }
  .casa-rejilla { grid-template-columns: 5fr 6fr; align-items: start; }
  .ficha-casa { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .ficha-casa div + div { border-top: 0; border-left: 1px solid var(--linea); padding-left: 1.75rem; }
  .cocina-intro { grid-template-columns: 5fr 6fr; align-items: start; }
  .cocina-intro .entrada { margin: 0.55rem 0 1.6rem; }
  /* la remolacha, alta, a la izquierda; los tacos y la stracciatella, uno sobre otro */
  .destacados { grid-template-columns: 7fr 5fr; gap: 2.5rem 3rem; }
  .destacado-grande { grid-row: 1 / span 2; }
  .destacado-grande .marco { flex: 1 1 auto; aspect-ratio: auto; min-height: 24rem; }
  .galeria { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 15rem; }
  .galeria .marco { aspect-ratio: auto; }
  .galeria .marco:first-child { grid-row: span 2; }
  .carta-hoja { padding: 5.5rem 5rem 4.25rem; }
  .carta-grupo .carta-lista { columns: 2; column-gap: 5rem; }
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: 6rem; }
  .pie-rejilla { grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 4rem; align-items: start; }
  .pie-rejilla > :nth-child(-n+2) { grid-column: auto; }
  .barra-fila { gap: 2rem; }
  .barra-enlaces { display: flex; }
}

/* --- Portada en tableta (768 a 1023 px): la foto arriba y, debajo, el logo a la izquierda y lo demas a su lado,
       para que el negro no quede medio vacio --- */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .portada-texto { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 3rem; align-items: center; padding-bottom: 4.75rem; }
  .portada-texto > * { grid-column: 2; }
  .portada-texto > .portada-marca { grid-column: 1; grid-row: 1 / span 5; }
  .portada-lugar { margin-top: 0; }
  .portada .temporada { margin-bottom: 1.5rem; }
}

/* --- Portada en ancho, desde 1024 px. Mas estrecho, el texto ocupa mas parte del ancho y acaba donde
       el velo es flojo (a 768 px, hacia el 66 %: unos 2,4:1, calculado): hasta 1024, la foto arriba y el
       texto debajo, como en el movil --- */
@media (min-width: 64rem) {
  /* el texto a la izquierda, encima de la foto, y el plato a la vista a la derecha */
  .portada { display: flex; align-items: center; min-height: min(100vh, 58rem); }
  .portada-foto {
    position: absolute;
    inset: 0;
    height: 100%;
    max-height: none;
    object-position: 70% 55%;
  }
  /* oscurece la foto donde va el texto: blanco sobre ella, 4,5:1 o mas */
  .portada::after {
    content: "";
    position: absolute;
    inset: 0;
    /* medido en el navegador el 2026-10-17, peor caso (pixel blanco debajo): a 1440 el texto acaba en el
       49,5 % del ancho (la linea de la temporada; velo 0,69: 7,0:1); a 1024, en el 49,3 % (velo 0,70: 7,1:1) */
    background: linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.85) 40%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.15) 75%, rgba(10,10,10,0) 100%);
  }
  .portada-texto { margin: 0 auto; padding: 6rem 2rem; background: none; }
  .portada-texto > * { max-width: 34rem; }
  .pie-legal { margin-top: 3.5rem; }
}

/* --- Movimiento: sobrio, para todos (solo en pantalla; en papel, quieto) --- */
@media screen {
  /* --- La portada, en capas ---
     app.js pone en .portada: --y (px bajados) y --p (0 a 1: lo bajado, sobre el alto de la portada); y, solo con raton,
     --mx / --my (px ya escalados), --lx / --ly (donde esta el puntero) y --lz (0 a 1).
     La foto sube mas despacio que la pagina y se acerca; el texto sube un poco mas deprisa y se apaga (solo en ancho, que va sobre la foto);
     las olas se corren de lado. Al abrir: la foto llega de cerca y a oscuras, la bandera se despliega y el texto entra de uno en uno. */
  .portada-foto {
    animation: acerca 3.6s var(--curva) both;
    translate: calc(var(--mx, 0) * -1px) calc(var(--y, 0) * 0.4px + var(--my, 0) * -1px);
    scale: calc(1.04 + var(--p, 0) * 0.12);
    will-change: translate, scale;
  }
  @media (min-width: 64rem) {
    .portada-foto { top: -6rem; height: calc(100% + 6rem); }
    .portada-texto { translate: calc(var(--mx, 0) * 0.5px) calc(var(--y, 0) * -0.14px); opacity: calc(1.6 - var(--p, 0) * 2); }
    /* la luz que sigue al raton, sobre el mismo velo de siempre (a lo sumo 0,17 de azul claro: el texto sigue por encima de 5:1) */
    .portada::after { background: radial-gradient(36rem circle at var(--lx, 70%) var(--ly, 50%), rgba(130, 160, 255, calc(0.17 * var(--lz, 0))), transparent 65%), linear-gradient(90deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.85) 40%, rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.15) 75%, rgba(10,10,10,0) 100%); }
  }
  .portada-texto > * { animation: entra 1.05s var(--curva) both; }
  .portada-texto > :nth-child(1) { animation-delay: 0.1s; }
  .portada-texto > :nth-child(2) { animation-delay: 0.3s; }
  .portada-texto > :nth-child(3) { animation-delay: 0.45s; }
  .portada-texto > :nth-child(4) { animation-delay: 0.6s; }
  .portada-texto > :nth-child(5) { animation-delay: 0.75s; }
  .portada-texto > .portada-marca { animation: bandera 1.6s var(--curva) 0.15s both; }
  @keyframes acerca { from { transform: scale(1.16); filter: brightness(0.5); } to { transform: none; filter: none; } }
  @keyframes entra { from { opacity: 0; transform: translateY(26px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes bandera { from { opacity: 0; clip-path: inset(-10% 100% -10% -10%); transform: translateX(-1.5rem); } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); transform: none; } }

  /* las olas del borde: dos capas que corren de lado, y al bajar la de delante va a un lado y la de atras al otro */
  .ola-delante { animation: ola 34s linear infinite; translate: calc(var(--p, 0) * -28vw) 0; }
  .ola-atras { animation: ola 23s linear infinite reverse; translate: calc(var(--p, 0) * 28vw) 0; }
  @keyframes ola { to { transform: translateX(-33.3333%); } }

  /* una raya con una luz que baja, bajo la portada, que se va en cuanto se empieza a bajar */
  @media (min-width: 64rem) {
    .portada-baja { display: block; position: absolute; left: 50%; bottom: calc(clamp(2.6rem, 7vw, 7rem) + 0.6rem); z-index: 3; width: 1px; height: 3.25rem; background: rgba(251,249,244,0.28); opacity: calc(1.2 - var(--p, 0) * 8); overflow: hidden; pointer-events: none; }
    .portada-baja::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: var(--cal); animation: baja 2.2s var(--curva) 1.8s infinite both; }
    @keyframes baja { from { translate: 0 -100%; } to { translate: 0 260%; } }
  }

  /* cada parte aparece al llegar (solo si hay JS; sin el, todo se ve) */
  .js .revela { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--curva), transform 1.1s var(--curva); transition-delay: var(--retraso, 0s); }
  .js .revela.visto { opacity: 1; transform: none; }
  /* la hoja de la carta se endereza al llegar: echada hacia atras (el borde de abajo se aleja, asi no ensancha la pagina) */
  .js .carta-hoja.revela { transform: perspective(1400px) rotateX(-6deg) translateY(40px); transform-origin: 50% 0; }
  .js .carta-hoja.revela.visto { transform: none; }

  /* el carril de medios: pasa de derecha a izquierda; se para al pasar el raton, con el foco o con su boton */
  .js .medios-pista { -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .js .medios-pausa { display: inline-flex; align-items: center; justify-content: center; }
  .js .medios-pista { display: flex; width: 100%; }
  .js .medios-carril, .js .medios-copia { display: flex; flex-wrap: nowrap; justify-content: flex-start; flex: 0 0 auto; gap: 0 3.5rem; padding-right: 3.5rem; min-width: 100%; animation: medios 48s linear infinite; }
  .js .medios-copia { display: flex; }
  .medios:hover .medios-carril, .medios:hover .medios-copia, .medios:focus-within .medios-carril, .medios:focus-within .medios-copia,
  .medios.medios--pausa .medios-carril, .medios.medios--pausa .medios-copia { animation-play-state: paused; }
  @keyframes medios { from { transform: translateX(0); } to { transform: translateX(-100%); } }

  /* las fotos se acercan un poco al pasar el raton */
  .marco img { transition: transform 1.2s var(--curva); }
  @media (hover: hover) { .marco:hover img { transform: scale(1.045); } }

  /* microinteracciones: el boton se hunde al pulsarlo y su filete avanza; la carta marca el plato al pasar; el titulo del plato se subraya */
  .boton { transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.2s var(--curva), translate 0.3s var(--curva), box-shadow 0.3s var(--curva); }
  @media (hover: hover) { .boton:hover { transform: translateY(-2px); box-shadow: 0 0.6rem 1.2rem -0.7rem rgba(0,0,0,0.5); } }
  .boton:active { transform: translateY(0) scale(0.97); box-shadow: none; }
  .carta-lista li { position: relative; transition: padding-left 0.35s var(--curva), color 0.25s; }
  .carta-lista li::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.9rem; border-top: 1px solid var(--azul); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.35s var(--curva); }
  @media (hover: hover) { .carta-lista li:hover { padding-left: 1.4rem; color: var(--azul); } .carta-lista li:hover::before { transform: scaleX(1); } }
  .destacado h3 { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--curva); width: fit-content; max-width: 100%; }
  @media (hover: hover) { .destacado:hover h3 { background-size: 100% 1px; } }

  /* --- Lo que se mueve al bajar y al pasar el raton (app.js pone las variables; sin JS, todo quieto) --- */
  /* los titulos: las palabras suben de una en una desde una linea */
  .js .titulo-pal .pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.07em 0.14em; margin: 0 -0.07em -0.14em; }
  .js .titulo-pal .pal > span { display: inline-block; transform: translateY(112%); transition: transform 1.1s var(--curva); transition-delay: calc(var(--w, 0) * 70ms + var(--retraso, 0s) + 0.1s); }
  .js .revela.visto .titulo-pal .pal > span { transform: none; }

  /* el numero romano sube y su filete se dibuja hasta el borde */
  .js .seccion-num::after { transform: translateY(-0.35em) scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--curva) 0.25s; }
  .js .seccion-num.visto::after { transform: translateY(-0.35em) scaleX(1); }
  .js .seccion-num .num { display: inline-block; opacity: 0; translate: 0 0.6em; transition: opacity 0.9s var(--curva), translate 0.9s var(--curva); }
  .js .seccion-num.visto .num { opacity: 1; translate: 0 0; }

  /* las fotos de la cocina: se destapan de arriba abajo mientras se alejan, y dentro de su marco se mueven con el scroll (--fy, de -1 a 1) */
  .js .destacado .marco, .js .galeria .marco { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--curva) calc(var(--k, 0) * 0.09s), transform 0.45s var(--curva); }
  .js .revela.visto .marco { clip-path: inset(0 0 0 0); }
  .js .destacado .marco img, .js .galeria .marco img { top: -10%; bottom: auto; height: 120%; scale: 1.25; translate: 0 calc(var(--fy, 0) * -7.5%); transition: scale 1.9s var(--curva) calc(var(--k, 0) * 0.09s), transform 1.2s var(--curva); }
  .js .revela.visto .marco img { scale: 1; }
  /* con raton: la foto se inclina hacia donde se apunta y le pasa un destello */
  .destacado .marco::after, .galeria .marco::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(16rem circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.22), transparent 65%); transition: opacity 0.4s; }
  @media (hover: hover) {
    .destacado .marco:hover, .galeria .marco:hover { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
    .destacado .marco:hover::after, .galeria .marco:hover::after { opacity: 1; }
  }

  /* los botones siguen un poco al puntero (--bx / --by, px) */
  .boton { translate: calc(var(--bx, 0) * 1px) calc(var(--by, 0) * 1px); }

  /* los platos de la carta entran de uno en uno, en cuanto la hoja se endereza */
  .js .carta-lista li { opacity: 0; }
  .js .carta-hoja.visto .carta-lista li { animation: lista 0.9s var(--curva) both; animation-delay: calc(var(--i, 0) * 45ms + 0.4s); }
  @keyframes lista { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }

  /* la cinta de letras entre la casa y la cocina: una fila va hacia un lado y la otra hacia el otro al bajar (--cf, de -1 a 1) */
  .cinta { display: block; overflow: hidden; padding: clamp(0.5rem, 2vw, 1.5rem) 0; pointer-events: none; user-select: none; }
  .cinta p { margin: 0; display: flex; justify-content: center; font-family: var(--letra-titulos); font-style: italic; font-size: clamp(3.6rem, 11vw, 10rem); line-height: 1.04; letter-spacing: -0.01em; white-space: nowrap; }
  .cinta span { flex: none; will-change: translate; translate: calc(var(--cf, 0) * -16vw) 0; }
  .cinta-2 span { translate: calc(var(--cf, 0) * 16vw) 0; }
  .cinta-1 { color: transparent; -webkit-text-stroke: 1px var(--borde); }
  .cinta-2 { color: rgba(65, 95, 212, 0.1); -webkit-text-stroke: 1px var(--azul); }

  .js .barra { transition: transform 0.4s var(--curva), visibility 0s linear 0.4s; }
  .js .barra.barra--ver { transition: transform 0.4s var(--curva), visibility 0s; }
}