/* Private Chef Fabián Argüello · marca A «Tu firma» con los colores que escogió Fabián (25-set-2026).
   Papel #F6F4EF · Tinta #252524 · Oliva pálido #CBD0B9 · Latón mate #B7A07A (solo acentos) · Ceniza #655E53 (texto secundario sobre Papel).
   Reglas de contraste: sobre Oliva la letra va en Tinta; el Latón como texto chico solo sobre Tinta.
   v5 (15-oct-2026): portada con panel de foto (el chef primero, nada encima), firma al cierre, citas en Tinta. */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/assets/fonts/jost.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --papel: #F6F4EF;
  --tinta: #252524;
  --oliva: #CBD0B9;
  --laton: #B7A07A;
  --ceniza: #655E53;
  --wa: #25D366;
  --filete: rgba(37, 37, 36, 0.16);
  --filete-osc: rgba(246, 244, 239, 0.16);
  --ancho: 72rem;
  --margen: max(1.25rem, calc((100% - var(--ancho)) / 2));
  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* el lugar para la barra de WhatsApp del teléfono va dentro del pie (Tinta), ver .pie-dentro */
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1rem; text-wrap: pretty; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
h3 { font-size: 1.4rem; }

:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.heroe :focus-visible, .cierre :focus-visible, .citas :focus-visible, .pie :focus-visible, .portada .cabecera :focus-visible { outline-color: var(--laton); }

.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--tinta); color: var(--papel); padding: 0.6rem 1rem; text-decoration: none;
}
.saltar:focus { top: 1rem; }

/* ---------- encabezado ---------- */
.cabecera { position: relative; z-index: 10; background: var(--papel); border-bottom: 1px solid var(--filete); }
.portada .cabecera { background: var(--tinta); color: var(--papel); border-bottom-color: var(--filete-osc); }
.cabecera-fila {
  max-width: var(--ancho); margin: 0 auto; padding: 0.7rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.5rem;
}
.marca { display: flex; align-items: center; gap: 0.55rem; text-decoration: none; }
.mono { width: 2.2rem; height: 2.2rem; }
.marca-nombre { font-family: var(--serif); font-size: 1.2rem; line-height: 1; }
.cabecera nav { order: 3; width: 100%; }
.cabecera nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; }
.cabecera nav a {
  display: inline-block; padding: 0.35rem 0; text-decoration: none;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
}
.cabecera nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--laton); text-decoration-thickness: 2px; text-underline-offset: 0.45em; }
.cabecera .boton-wa-chico { display: none; }

/* ---------- botón de WhatsApp (el único verde del sitio, con letra Tinta) ---------- */
.boton-wa {
  display: inline-block; background: var(--wa); color: var(--tinta); text-decoration: none;
  font-family: var(--sans); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 1rem 1.6rem; line-height: 1.3; text-align: center;
}
/* la barra fija del teléfono se esconde cuando ya se ve otro botón verde o el armador (main.js marca .barra-oculta) */
.barra-wa {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--papel); border-top: 1px solid var(--filete);
  transition: transform 0.3s ease, visibility 0s;
}
.barra-wa .boton-wa { display: block; }
.barra-oculta .barra-wa { transform: translateY(110%); visibility: hidden; transition: transform 0.3s ease, visibility 0s 0.3s; }
/* la barra entra un momento después de cargar: así no asoma encima de la firma de la portada mientras main.js decide.
   Solo «backwards» (nunca «both»): al terminar la animación manda otra vez .barra-oculta. Sin JS entra igual. */
@media (prefers-reduced-motion: no-preference) {
  .barra-wa { animation: barra-entra 0.35s ease 1.2s backwards; }
}
@keyframes barra-entra { from { transform: translateY(110%); } to { transform: none; } }

/* ---------- héroe de la portada (fondo Tinta, como la lámina A8) ---------- */
.heroe { background: var(--tinta); color: var(--papel); }
.heroe-dentro { padding: 2.5rem var(--margen) 2.75rem; }
.logo-heroe { width: min(100%, 27rem); height: auto; margin: 0 0 2rem -0.4rem; }
.heroe h1 { max-width: 14ch; }
.heroe-base { color: var(--oliva); font-size: 1rem; }
.heroe .boton-wa { margin: 0.75rem 0 1.25rem; }
.heroe-directo { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--oliva); max-width: 32ch; }
.heroe .foto { margin: 0; }
.heroe-texto { font-size: 1.15rem; line-height: 1.5; max-width: 34ch; }
.heroe-texto a { color: var(--papel); text-decoration-color: var(--laton); text-underline-offset: 0.2em; }

/* portada v5 (15-oct-2026): panel de foto SIN nada encima. Teléfono: la foto arriba y el texto abajo, sobre Tinta.
   Desde 60rem: texto a la izquierda y foto a la derecha. El logo va sobre Tinta sólida: sin velo y sin sombras. */
/* width: 100% a propósito (15-oct): sin un ancho fijo, el max-height pasaba por el aspect-ratio a un ANCHO máximo y en
   casi todo teléfono real (390×664 con las barras de Safari) la foto quedaba angosta, pegada a la izquierda, con una
   franja Tinta vacía a la derecha. Con el ancho fijo, el tope solo recorta un poco arriba y abajo (object-fit: cover).
   Las filas van explícitas: los controles del panel (main.js) comparten la celda de la foto, encima, sin tocar el texto. */
.heroe-retrato { display: grid; }
.heroe-foto { grid-row: 1; grid-column: 1; position: relative; isolation: isolate; width: 100%; margin: 0; aspect-ratio: 4 / 5; max-height: 62vh; max-height: 62svh; overflow: hidden; background: var(--tinta); }
.heroe-foto picture { position: absolute; inset: 0; }
.heroe-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* el salmón: el original trae el pelo pegado al borde de arriba, así que esa foto se ancla arriba (nunca le corta más) */
.heroe-foto .diapo-arriba img { object-position: 50% 0%; }
.heroe-retrato .heroe-dentro { grid-row: 2; grid-column: 1; padding: 2rem var(--margen) 2.75rem; }
.heroe-retrato .logo-heroe { width: 15rem; margin: 0 0 1.75rem -0.3rem; }

/* las fotos del panel: fundido lento, sin acercamiento. La que entra va encima; la que sale se queda quieta debajo
   hasta que la otra terminó de aparecer (así nunca se ve el fondo a media transición). */
.diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.diapo.activa { opacity: 1; z-index: 2; }
.diapo.saliente { opacity: 1; z-index: 1; transition: none; }

/* controles del panel (main.js): barritas de Latón que se llenan y pausa, en una pestaña Tinta pegada a la esquina.
   En el DOM van después del texto (el teclado llega antes al botón verde); la grilla los pone en la celda de la foto. */
.heroe-controles {
  grid-row: 1; grid-column: 1; align-self: end; justify-self: start; z-index: 3; display: flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.6rem 0.45rem 0.75rem; background: var(--tinta);
}
.heroe-marca { position: relative; width: 1.7rem; height: 1.6rem; padding: 0; border: 0; background: none; cursor: pointer; }
.heroe-marca[hidden] { display: none; }
.heroe-marca::before, .heroe-marca::after { content: ""; position: absolute; left: 0.1rem; right: 0.1rem; top: 50%; height: 2px; margin-top: -1px; }
.heroe-marca::before { background: rgba(246, 244, 239, 0.45); }   /* 3,5:1 sobre Tinta (WCAG 1.4.11) */
.heroe-marca::after { background: var(--laton); transform: scaleX(0); transform-origin: left; }
.heroe-marca.activa::after { animation: llenar var(--dura, 6.5s) linear forwards; }
.en-pausa .heroe-marca.activa::after { animation-play-state: paused; }
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.heroe-pausa {
  width: 1.9rem; height: 1.9rem; margin-left: 0.3rem; border: 1px solid rgba(246, 244, 239, 0.5); border-radius: 50%;
  background: none; cursor: pointer; position: relative; flex: none;
}
.heroe-pausa::before, .heroe-pausa::after { content: ""; position: absolute; top: 0.6rem; width: 2px; height: 0.6rem; background: var(--papel); }
.heroe-pausa::before { left: 0.72rem; }
.heroe-pausa::after { left: 0.99rem; }
.heroe-pausa.en-pausa::before { left: 0.74rem; top: 0.55rem; width: 0; height: 0; background: none;
  border-style: solid; border-width: 0.36rem 0 0.36rem 0.6rem; border-color: transparent transparent transparent var(--papel); }
.heroe-pausa.en-pausa::after { display: none; }

/* la firma se escribe sola al entrar (una vez, menos de 2 s): primero el trazo, después los puntos, el rombo y PRIVATE CHEF.
   No depende de .js a propósito: main.js carga diferido y el logo parpadearía. Con «reducir movimiento» se ve entera. */
@media (prefers-reduced-motion: no-preference) {
  .logo-heroe { animation: firmar 1.6s cubic-bezier(0.55, 0.08, 0.25, 1) 0.2s both; }
  .logo-heroe path + path, .logo-heroe text, .logo-heroe polygon { animation: puntear 0.5s ease 1.7s both; }
}
@keyframes firmar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes puntear { from { opacity: 0; } to { opacity: 1; } }

.prueba-social {
  margin: 0; padding: 1.4rem var(--margen); border-bottom: 1px solid var(--filete);
  color: var(--ceniza); font-size: 0.98rem;
}

/* ---------- marcos de foto (todavía no hay fotos: Oliva con rótulo Tinta) ---------- */
.foto { position: relative; margin: 0; background: var(--oliva); width: 100%; }
.foto-16x9 { aspect-ratio: 16 / 9; }
.foto-4x3 { aspect-ratio: 4 / 3; }
.foto-3x4 { aspect-ratio: 3 / 4; }   /* llena su columna (/about): con tope quedaba corta contra los filetes */
.foto figcaption {
  position: absolute; left: 1rem; right: 1rem; bottom: 0.9rem;
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; line-height: 1.5; color: var(--tinta);
}

/* ---------- secciones ---------- */
.bloque { padding: 3.25rem var(--margen); }
.bloque > p, .bloque > div > p { max-width: 42rem; }
.migas { padding: 1.5rem var(--margen) 0; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.migas li { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ceniza); }
.migas li + li::before { content: "·"; margin: 0 0.5rem; }
.migas a { text-decoration: none; }
.migas a:hover { text-decoration: underline; }

/* rótulo: con el filete corto de Latón encima (IDENTIDAD §6: «antes de un título»); el rombo queda solo en el logo */
.rotulo {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ceniza); margin: 0 0 0.9rem; line-height: 1.4;
}
.rotulo::before { content: ""; display: block; width: 28px; height: 2px; background: var(--laton); margin-bottom: 0.85rem; }
.titulo-seccion { font-size: clamp(1.8rem, 4.5vw, 2.5rem); }
.titulo-chico { font-size: 1.5rem; margin-top: 2.25rem; }
.entrada { font-size: 1.2rem; line-height: 1.55; max-width: 38em; }
.centrado { text-align: center; }
.centrado .entrada { margin-inline: auto; }
.centrado .rotulo::before { margin-inline: auto; }

/* pasos */
.pasos { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.pasos li { border-top: 1px solid var(--filete); padding-top: 1.1rem; }
.paso-n { display: block; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.2em; color: var(--ceniza); margin-bottom: 0.6rem; }
.pasos h3 { margin-bottom: 0.4rem; }
.pasos p { margin: 0; }

/* bloque de tranquilidad: palabras exactas, separadas con filetes; el último renglón cierra como unos créditos */
.tranquilidad { padding: 3rem var(--margen); border-top: 1px solid var(--filete); }
.tranquilidad ul { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.tranquilidad li { padding: 0.95rem 0; border-top: 1px solid var(--filete); font-size: 1.08rem; }
.tranquilidad li:last-child {
  border-bottom: 1px solid var(--filete);
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.25;
}

/* tarjeta de la cena de llegada: Oliva con letra Tinta; el filete en Tinta (Latón sobre Oliva no se ve) */
.tarjeta-llegada { background: var(--oliva); color: var(--tinta); padding: 3rem var(--margen); }
.tarjeta-llegada .rotulo { color: var(--tinta); }
.tarjeta-llegada .rotulo::before { background: var(--tinta); }
.tarjeta-llegada p { max-width: 40em; }

.enlace-flecha {
  display: inline-block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; padding: 0.3rem 0;
}
.enlace-flecha::after { content: "\2192"; margin-left: 0.45em; }

/* cierre y pie: Tinta. Cada página termina con la firma, en negativo y sobre Tinta sólida. */
.cierre { background: var(--tinta); color: var(--papel); padding: 3.25rem var(--margen); }
.cierre p { color: var(--oliva); max-width: 36em; }
.cierre .boton-wa { margin-top: 0.5rem; }
.firma-cierre { width: min(78vw, 20rem); height: auto; margin-top: 2.5rem; }
.pie { background: var(--tinta); color: var(--oliva); border-top: 1px solid var(--filete-osc); }
.pie-dentro { padding: 2.75rem var(--margen) calc(8rem + env(safe-area-inset-bottom, 0px)); font-size: 0.92rem; }
.pie-marca { display: flex; flex-flow: row wrap; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; }
.mono-pie { width: 2.6rem; height: 2.6rem; color: var(--papel); }
.pie .marca-nombre { color: var(--papel); }
.pie-oficio { font-size: 0.72rem; font-weight: 400; letter-spacing: 0.46em; text-transform: uppercase; color: var(--laton); }
.pie a { color: var(--papel); }
.pie-enlaces { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; }
.pie-legal { font-size: 0.8rem; margin: 1.5rem 0 0; }

/* «Send to your group»: contorno, nunca verde (main.js lo muestra solo si el teléfono puede compartir) */
.boton-compartir {
  display: block; margin: 1rem 0 0; padding: 0.85rem 1.3rem; background: none; border: 1px solid var(--papel); color: var(--papel);
  font: 500 0.8rem/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
}
.boton-compartir[hidden] { display: none; }

/* sobre él, cena de llegada */
.dos-col { display: grid; gap: 2.25rem; align-items: start; }
.lista-filete { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
.lista-filete li { padding: 0.8rem 0; border-top: 1px solid var(--filete); }
.lista-filete li:last-child { border-bottom: 1px solid var(--filete); }
.lista-num { margin: 0 0 1.5rem; padding-left: 1.3rem; max-width: 42rem; }
.lista-num li { padding: 0.35rem 0; }

/* menús */
.menus { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 2.25rem; }
.menu { display: flex; flex-direction: column; justify-content: flex-start; gap: 1rem; scroll-margin-top: 5rem; }
.menu .foto { order: -1; }
.menu h2 { font-size: 1.9rem; margin-bottom: 0.3rem; }
.menu p { margin: 0; }
.menu-texto .enlace-flecha { margin-top: 0.75rem; }

/* condiciones y contacto */
.condiciones { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 42rem; }
.condiciones li { padding: 0.75rem 0; border-top: 1px solid var(--filete); }
.condiciones li:last-child { border-bottom: 1px solid var(--filete); }
.contacto .boton-wa { margin: 0.5rem 0 1rem; }
.numero { font-size: 1.1rem; letter-spacing: 0.04em; }
.nota { color: var(--ceniza); }

/* ---------- fotos reales del banco de Fabián (14-oct-2026): el Oliva queda de fondo mientras cargan ---------- */
.foto.con-foto { background: none; aspect-ratio: auto; }
.con-foto picture { display: block; background: var(--oliva); overflow: hidden; }
.con-foto img { width: 100%; height: 100%; object-fit: cover; }
.foto-16x9.con-foto picture { aspect-ratio: 16 / 9; }
.foto-4x3.con-foto picture { aspect-ratio: 4 / 3; }
.foto-3x4.con-foto picture { aspect-ratio: 3 / 4; }
.foto-1x1.con-foto picture { aspect-ratio: 1 / 1; }
.con-foto figcaption {
  position: static; padding: 0.65rem 0 0; color: var(--ceniza);
  font-size: 0.7rem; letter-spacing: 0.18em;
}

/* galería de la portada: mosaico (la primera grande), se amplía al tocarla */
.galeria { border-top: 1px solid var(--filete); }
.galeria-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.75rem; }
.galeria-rejilla figure:first-child { grid-column: span 2; }
.galeria-rejilla figure:last-child { grid-column: span 2; }
/* la última (Fabián emplatando) en el teléfono: 4:3 desde arriba, para que se le vea la cara y la mano con la cuchara */
.galeria-rejilla figure:last-child picture { aspect-ratio: 4 / 3; }
.galeria-rejilla figure:last-child img { object-position: 50% 0%; }

/* toda foto real: se acerca un poco al pasar el mouse */
.con-foto { position: relative; }
.con-foto img { transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) {
  .con-foto:hover img, .tarjetas-menu a:hover img, .menu:hover img { transform: scale(1.05); }
}
.ampliar { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; }
.ampliar::after {
  content: "+"; position: absolute; right: 0.8rem; bottom: 0.8rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: rgba(37, 37, 36, 0.72); color: var(--laton); font: 300 1.5rem/2.1rem var(--sans); text-align: center;
  opacity: 0; transform: scale(0.8); transition: opacity 0.35s, transform 0.35s;
}
.ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; transform: none; }
/* el foco por FUERA de la foto, sobre el Papel (13,9:1); adentro, sobre la foto, el Latón no se distinguía */
.ampliar:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* visor de fotos (dialog) */
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(37, 37, 36, 0.97); color: var(--papel); }
.visor::backdrop { background: rgba(37, 37, 36, 0.9); }
.visor[open] { display: flex; align-items: center; justify-content: center; animation: aparecer 0.35s ease; }
.visor-foto { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; max-width: min(92vw, 60rem); }
.visor-foto img { max-height: 80vh; width: auto; max-width: 100%; opacity: 0; transform: scale(0.98); transition: opacity 0.4s, transform 0.5s; }
.visor.cargada .visor-foto img { opacity: 1; transform: none; }
.visor figcaption { font-size: 0.82rem; letter-spacing: 0.04em; color: var(--oliva); text-align: center; max-width: 40rem; }
.visor button { position: absolute; border: 0; background: none; color: var(--papel); cursor: pointer; font: 300 2rem/1 var(--sans); padding: 0.8rem 1rem; }
.visor button:hover { color: var(--laton); }
.visor button:focus-visible { outline: 2px solid var(--laton); }
.visor-cerrar { top: 0.6rem; right: 0.8rem; }
.visor-ant { left: 0.4rem; top: 50%; transform: translateY(-50%); }
.visor-sig { right: 0.4rem; top: 50%; transform: translateY(-50%); }
.visor-abierto { overflow: hidden; }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

/* menús en la portada: tres tarjetas con foto */
.menus-portada { border-top: 1px solid var(--filete); }
.tarjetas-menu { list-style: none; margin: 1.75rem 0 2rem; padding: 0; display: grid; gap: 1.75rem; }
.tarjetas-menu a { display: block; text-decoration: none; }
.tarjetas-menu .foto { overflow: hidden; }
.tarjetas-menu h3 { font-size: 1.7rem; margin: 1rem 0 0.2rem; }
.tarjetas-menu p { margin: 0; color: var(--ceniza); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.tarjetas-menu a:hover h3 { text-decoration: underline; text-decoration-color: var(--laton); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* las fotos y tarjetas no se salen al acercarse */
.con-foto picture { overflow: hidden; }

/* platos de cenas anteriores (/experiences) */
.platos { border-top: 1px solid var(--filete); }
.platos-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; margin-top: 1.75rem; }
.platos-rejilla figcaption { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta); }

/* celebraciones */
.celebrar { border-top: 1px solid var(--filete); align-items: center; }
.celebrar-linea { margin: -0.5rem 0 1.25rem; font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--ceniza); }

/* armador de la consulta (abre WhatsApp con el mensaje listo). Oliva con letra Tinta (9,7:1); Ceniza sobre Oliva no pasa. */
.planear { background: var(--oliva); border-top: 1px solid var(--filete); scroll-margin-top: 5rem; }
.planear .rotulo { color: var(--tinta); }
.planear .rotulo::before { background: var(--tinta); }
.planear-rejilla { display: grid; gap: 2rem; margin-top: 1.75rem; }
.planear-form { display: grid; gap: 1.1rem; max-width: 46rem; }
.planear-form[hidden] { display: none; }
.planear-form label { display: grid; align-content: start; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.planear-form input, .planear-form select {
  font: inherit; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta);
  padding: 0 0.8rem; border: 1px solid rgba(37, 37, 36, 0.28); border-radius: 0; background: var(--papel); height: 3rem; line-height: 1.2;
  transition: border-color 0.2s;
}
.planear-form input::placeholder { color: var(--ceniza); }
.planear-form input:focus, .planear-form select:focus { outline: 2px solid var(--tinta); outline-offset: 2px; border-color: var(--tinta); box-shadow: none; }
.planear-form .ayuda { font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta); }
.planear-form [hidden] { display: none; }
.planear-form button { justify-self: start; border: 0; cursor: pointer; margin-top: 0.4rem; }
/* el mensaje tal como le va a llegar a Fabián, mientras se escribe */
.vista-mensaje { position: sticky; top: 5.5rem; margin: 0; background: var(--papel); padding: 1.5rem; border-top: 2px solid var(--laton); }
.vista-mensaje[hidden] { display: none; }
.vista-mensaje .rotulo::before { display: none; }
.vista-texto { white-space: pre-wrap; margin: 0; font-size: 0.98rem; }
.vista-origen { display: block; margin-top: 0.5rem; font-size: 0.78rem; color: var(--ceniza); }   /* «(from: …)»: llega, pero en chico */
/* después de enviarlo: un aviso tranquilo para quien vuelve de WhatsApp */
.planear-listo { max-width: 40rem; }
.planear-listo:focus { outline: none; }   /* recibe el foco al enviar (tabindex -1) para que el teclado siga desde ahí; no es un control */
.planear-listo p { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; }
.planear-listo .boton-wa { margin: 0.25rem 1.5rem 0.75rem 0; }
.planear-listo button { background: none; border: 0; color: var(--tinta); font-family: var(--sans); cursor: pointer; }

/* las secciones aparecen al bajar (solo con JS y si el visitante no pidió reducir movimiento) */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(26px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--retraso, 0s); }
  .js .revelar.visible { opacity: 1; transform: none; }
}
@media print {
  .js .revelar { opacity: 1; transform: none; }
  .barra-wa, .heroe-controles, .ampliar, .boton-compartir { display: none; }
  /* una foto nunca se parte entre dos hojas: la caja se partía y la imagen no, y salía una caja Oliva vacía */
  .foto, .con-foto picture, figure, .heroe-foto { break-inside: avoid; }
}

/* botones y enlaces con vida */
.boton-wa { transition: transform 0.25s; }
.boton-wa:hover { transform: translateY(-2px); }
.enlace-flecha::after { display: inline-block; transition: transform 0.3s; }
.enlace-flecha:hover::after { transform: translateX(4px); }
.cabecera { transition: box-shadow 0.3s; }
.cabecera.con-sombra { box-shadow: 0 10px 30px -18px rgba(37, 37, 36, 0.55); }

/* transición suave entre páginas (navegadores que la soportan) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* menús en la portada, zonas y preguntas */
.menus-breve { border-top: 1px solid var(--filete); }
.zona { border-top: 1px solid var(--filete); }
.zona-fotos { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.bloque.solo-foto { padding-top: 0; }
.solo-foto .foto { max-width: 60rem; }
.preguntas { margin-top: 2rem; max-width: 46rem; }
.pregunta { border-top: 1px solid var(--filete); padding: 1.4rem 0; }
.pregunta:last-child { border-bottom: 1px solid var(--filete); }
.pregunta h2 { font-size: 1.55rem; margin-bottom: 0.5rem; }
.pregunta p { margin: 0; }   /* el enlace va tras un espacio normal: si salta de renglón, queda al ras del texto */
.cierre-faq { margin: 1.5rem 0 0; }
.cierre .cierre-faq a, .cierre .citas-google a { color: var(--papel); }

/* lo que escribieron los huéspedes: un capítulo de noche (Tinta) justo antes del botón final */
.citas { background: var(--tinta); color: var(--papel); border-top: 0; }
.citas .nota { color: var(--oliva); }
.citas-lista { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 2.25rem; }
.citas-lista li::before { content: ""; display: block; width: 28px; height: 2px; background: var(--laton); margin-bottom: 1.1rem; }
.citas blockquote { margin: 0; }
.citas blockquote p { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1.4; margin: 0 0 0.6rem; max-width: 34em; color: var(--papel); }
.citas-lista li:first-child blockquote p { font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.25; }
.citas .cita-quien { color: var(--laton); }
.citas a { color: var(--papel); text-decoration-color: var(--laton); }
.citas-google { margin: 2.5rem 0 0; }
.citas + .cierre { border-top: 1px solid var(--filete-osc); }
.cita-zona { margin: 1.75rem 0 0; max-width: 40rem; }
.cita-zona::before { content: ""; display: block; width: 28px; height: 2px; background: var(--laton); margin-bottom: 1rem; }
.cita-zona p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.4; margin: 0 0 0.6rem; }
.cita-quien { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ceniza); margin: 0; }

/* ---------- pantallas medianas y grandes ---------- */
@media (max-width: 47.99rem) {
  html { scroll-padding-bottom: 5.5rem; }
  /* el menú del teléfono se parte en filas, como en la v4 (el de una fila que se deslizaba de lado está RECHAZADO en el
     plan del 15-oct: CONTACT quedaba cortado a 320 px sin ninguna señal de que la fila se movía). */
  /* tercera vuelta (15-oct): un botón de WhatsApp chico a la derecha del nombre, en la primera fila (que en el teléfono
     queda vacía a la derecha). Así la primera pantalla siempre tiene un botón verde, aunque la barra de abajo se esconda
     para no tapar la firma. Solo con JS: sin JS la barra no se esconde nunca y dos botones serían uno de más. No cambia
     el alto de la fila (31 px contra los 35 del monograma), así que no mueve nada al aparecer. */
  .js .cabecera .boton-wa-chico {
    display: inline-block; margin-left: auto; padding: 0.55rem 0.8rem; font-size: 0.66rem; letter-spacing: 0.12em;
  }
  .js .cabecera-fila { column-gap: 0.75rem; }
  /* la pestaña de pausa va al pie de la foto: al llegarle con el teclado desde abajo, se sube hasta que la foto que
     controla quede a la vista (antes se veía solo una franja de la foto y el foco quedaba cortado arriba) */
  .heroe-controles button { scroll-margin-top: 55vh; scroll-margin-top: 55svh; }
  /* las flechas del visor caen encima de la foto (92vw): con fondo propio se ven sobre cualquier foto (WCAG 1.4.11) */
  .visor .visor-ant, .visor .visor-sig {
    display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0;
    border-radius: 50%; background: rgba(37, 37, 36, 0.8); font-size: 1.4rem; line-height: 1;
  }
}
@media (min-width: 48rem) {
  html { scroll-padding-top: 4.5rem; }
  .pie-dentro { padding-bottom: 3rem; }
  .barra-wa { display: none; }
  .cabecera { position: sticky; top: 0; }
  .cabecera nav { order: 0; width: auto; margin-left: auto; }
  .cabecera nav ul { gap: 0.35rem 1.4rem; }
  .cabecera nav a { font-size: 0.74rem; letter-spacing: 0.2em; }
  .cabecera .boton-wa-chico { display: inline-block; padding: 0.6rem 1rem; font-size: 0.72rem; }
  .pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
  .menus { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .heroe-dentro { padding-top: 4rem; padding-bottom: 4rem; }
  .heroe-foto { aspect-ratio: 5 / 4; max-height: 78vh; max-height: 78svh; }
  .galeria-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .galeria-rejilla figure:first-child { grid-column: span 2; grid-row: span 2; }
  .galeria-rejilla figure:last-child { grid-column: auto; }
  .galeria-rejilla figure:last-child picture { aspect-ratio: 1 / 1; }
  .galeria-rejilla figure:last-child img { object-position: 50% 50%; }
  .tarjetas-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .platos-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem 1.25rem; }
  .planear-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
  .planear-form .ancho, .planear-form button { grid-column: 1 / -1; }
  .zona-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .citas-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; }
  .citas-lista li:first-child { grid-column: 1 / -1; }
}
/* tableta vertical (768-959): menú y botón más juntos para que todo quepa en una fila con el logo */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .cabecera-fila { gap: 0.6rem 1rem; }
  .cabecera nav ul { gap: 0.35rem 0.9rem; }
  .cabecera nav a { font-size: 0.7rem; letter-spacing: 0.12em; }
}
@media (min-width: 60rem) {
  .dos-col { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 4rem; }
  /* portada: el texto a la izquierda (5) y la foto a la derecha (7), de borde a borde; nunca uno encima del otro */
  .heroe-retrato { grid-template-columns: var(--margen) minmax(0, 5fr) minmax(0, 7fr); min-height: 88vh; min-height: min(calc(100svh - 3.7rem), 52rem); }
  .heroe-retrato .heroe-dentro { grid-column: 2; grid-row: 1; align-self: center; padding: 3.5rem 3rem 3.5rem 0; }
  .heroe-retrato .logo-heroe { width: min(100%, 23rem); margin-bottom: 2.25rem; }
  .heroe-retrato h1 { max-width: 10.5em; font-size: clamp(2.6rem, 3.6vw, 3.6rem); }
  .heroe-foto { grid-column: 3; grid-row: 1; aspect-ratio: auto; max-height: none; }
  /* la pestaña de pausa ARRIBA del panel: en laptops de 768-864 de alto, abajo quedaba debajo del borde de la pantalla */
  .heroe-controles { grid-column: 3; grid-row: 1; align-self: start; }
  .heroe-foto img { object-position: 50% 35%; }
  .planear-rejilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .cierre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 3rem; align-items: end; }
  .cierre > * { grid-column: 1; justify-self: start; }
  .firma-cierre { grid-column: 2; grid-row: 1 / span 6; justify-self: end; width: min(100%, 26rem); margin: 0; }
  .bloque, .tranquilidad { padding-top: 5rem; padding-bottom: 5rem; }
}
/* laptops de poca altura (768-896 px): la firma y el aire del héroe un poco menores, para que el héroe quepa en la
   primera pantalla (la firma sigue arriba del mínimo de la marca, 15rem) */
@media (min-width: 60rem) and (max-height: 56rem) {
  .heroe-retrato .logo-heroe { width: min(100%, 19rem); margin-bottom: 1.5rem; }
  .heroe-retrato .heroe-dentro { padding-top: 2.5rem; padding-bottom: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* alto contraste de Windows (forced colors): las marcas y la pausa de la portada siguen viéndose */
@media (forced-colors: active) {
  .heroe-marca::before, .heroe-marca::after, .heroe-pausa::before, .heroe-pausa::after { forced-color-adjust: none; background: CanvasText; }
  .heroe-marca::before { opacity: 0.5; }
  .heroe-pausa { border-color: CanvasText; }
}
.citas .rotulo { color: var(--laton); }