/* ==========================================================================
   The Salt House · sal-y-tinta
   Fuente de verdad: design-system/MASTER.md
   Idea rectora: el unico color de esta web es la comida.
   ========================================================================== */

/* Las fuentes se cargan con un <link> en el <head> de cada pagina (build.py, FUENTES). */

/* ---------- tokens ---------- */
:root{
  --tinta:#0B0B0C;
  --sal:#F3F1EC;
  --ostra:#C9C4B8;
  --humo:#6E6A63;
  --salmuera:#4A6B60;

  --display:'Baskervville', Georgia, 'Times New Roman', serif;
  --versal:'Baskervville SC', 'Baskervville', Georgia, serif;
  --texto:'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* escala tipografica fluida */
  --t-xs:.75rem;
  --t-s:.875rem;
  --t-m:1rem;
  --t-l:clamp(1.125rem,.95rem + .7vw,1.375rem);
  --t-xl:clamp(1.6rem,1.2rem + 1.9vw,2.6rem);
  --t-2xl:clamp(2.2rem,1.4rem + 3.6vw,4.4rem);
  --t-3xl:clamp(2.9rem,1.5rem + 6vw,7rem);

  --aire:clamp(4rem,9vw,9rem);       /* separacion vertical entre secciones */
  --gotera:clamp(1.15rem,4vw,2.5rem); /* padding lateral */
  --ancho:78rem;
  --medida:34rem;                     /* ancho maximo de parrafo */

  --filete:1px solid var(--ostra);
  --transicion:.5s cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

html{scroll-behavior:smooth}
body{
  background:var(--sal);
  color:var(--tinta);
  font-family:var(--texto);
  font-weight:400;
  font-size:var(--t-m);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- utilidades ---------- */
.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gotera)}
.seccion{padding-block:var(--aire)}
.tinta{background:var(--tinta);color:var(--sal)}
.tinta .rotulo{color:var(--ostra)}
.tinta .apunte{color:var(--ostra)}
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* saltar al contenido */
.saltar{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tinta);color:var(--sal);padding:.9rem 1.3rem}
.saltar:focus{left:.5rem;top:.5rem}

/* ---------- tipografia ---------- */
h1,h2,h3,.display{
  font-family:var(--display);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.015em;
  /* Sin guiones automaticos: Nigel no quiere "Sun-day" (30-09). Una palabra que
     no quepa se parte sin guion antes que desbordar. */
  hyphens:manual;
  overflow-wrap:break-word;
}
h1{font-size:var(--t-3xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl)}

.rotulo{
  font-family:var(--versal);
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--humo);
  display:block;
}

.entradilla{font-size:var(--t-l);line-height:1.55;max-width:var(--medida)}
.apunte{color:var(--humo);font-size:var(--t-s)}
p{max-width:var(--medida)}
em{font-style:italic}

/* ---------- enlaces y foco ---------- */
a{text-decoration:none}
a:not(.btn){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--ostra);
  transition:text-decoration-color .25s;
}
a:not(.btn):hover{text-decoration-color:var(--salmuera)}
:focus-visible{outline:2px solid var(--salmuera);outline-offset:3px;border-radius:2px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.9rem 1.9rem;
  font-family:var(--texto);font-size:var(--t-s);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--tinta);
  background:var(--tinta);color:var(--sal);
  cursor:pointer;transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:transparent;color:var(--tinta)}
.btn--fantasma{background:transparent;color:var(--tinta)}
.btn--fantasma:hover{background:var(--tinta);color:var(--sal)}
/* contexto oscuro: .tinta y tambien el hero, que es oscuro sin llevar la clase.
   Sin esto el boton fantasma queda tinta sobre tinta, es decir invisible. */
.tinta .btn,.hero__cuerpo .btn{background:var(--sal);color:var(--tinta);border-color:var(--sal)}
.tinta .btn:hover,.hero__cuerpo .btn:hover{background:transparent;color:var(--sal)}
.tinta .btn--fantasma,.hero__cuerpo .btn--fantasma{background:transparent;color:var(--sal)}
.tinta .btn--fantasma:hover,.hero__cuerpo .btn--fantasma:hover{background:var(--sal);color:var(--tinta)}

/* ---------- cabecera ---------- */
.cabecera{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb,var(--sal) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:var(--filete);
}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:68px;
}
.marca{display:flex;align-items:center;gap:.7rem;text-decoration:none!important}
.marca__texto{font-family:var(--versal);font-size:.95rem;letter-spacing:.18em;line-height:1;white-space:nowrap}
.marca__sub{font-family:var(--texto);font-size:.6rem;letter-spacing:.3em;color:var(--humo);text-transform:uppercase}

.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{
  font-size:var(--t-s);letter-spacing:.08em;
  text-decoration:none!important;padding-block:.4rem;
  border-bottom:1px solid transparent;transition:border-color .25s;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--tinta)}

.idiomas{display:flex;gap:.15rem;align-items:center;font-size:var(--t-xs);letter-spacing:.1em}
.idiomas a{text-decoration:none!important;padding:.3rem .45rem;color:var(--humo);text-transform:uppercase}
.idiomas a[aria-current="true"]{color:var(--tinta);text-decoration:underline!important;text-underline-offset:.3em}
.idiomas span{color:var(--ostra)}

.menu-btn{display:none;background:none;border:0;padding:.6rem;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1px;background:var(--tinta);margin:6px 0;transition:transform .3s,opacity .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:clamp(30rem,88vh,54rem);display:grid;align-items:end;background:var(--tinta);overflow:hidden}
.hero__fondo{position:absolute;inset:0}
.hero__fondo picture{display:block;width:100%;height:100%}
.hero__fondo img{width:100%;height:100%;object-fit:cover;opacity:.72}
.hero__fondo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,12,.55) 0%,rgba(11,11,12,.15) 38%,rgba(11,11,12,.92) 100%);
}
.hero__cuerpo{position:relative;z-index:2;color:var(--sal);padding-block:var(--aire) clamp(2.5rem,5vw,4rem)}
.hero__cuerpo .rotulo,.hero__cuerpo .apunte{color:var(--ostra)}
/* El <br> del HTML ya fuerza el corte entre las dos frases. NO se usa
   white-space:nowrap: a 546px el titular medía 502px en un contenedor de 502px,
   es decir cero margen, y cualquier tipografía de respaldo lo desbordaba.
   Sin nowrap, si no cabe envuelve — feo, pero nunca saca scroll horizontal. */
.hero h1{margin-block:.5rem 1.2rem;text-wrap:balance}
@media(min-width:34rem){.hero h1{max-width:none}}
.hero__pie{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;align-items:center;margin-top:2rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.8rem}

/* hero corto: paginas interiores */
.hero--corto{min-height:clamp(20rem,52vh,30rem)}
.hero--corto h1{font-size:var(--t-2xl)}

/* portada (Nigel, 30-09): el titular arriba, en el cielo de la foto, para no tapar
   el local; la entradilla y los botones, abajo. */
.hero--portada{align-items:stretch}
.hero--portada .hero__cuerpo{
  display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem;
  padding-block:clamp(2rem,5vw,3.5rem) clamp(2.5rem,5vw,4rem);
}
.hero--portada .rotulo{font-size:var(--t-m);letter-spacing:.2em}
/* un punto mas pequeno que --t-3xl: asi las dos lineas caben en el cielo y no
   tapan el rotulo del local (a 1280 px el cielo mide ~320 px) */
.hero--portada h1{font-size:clamp(2.6rem,1.2rem + 4.6vw,5.4rem)}
@media(max-width:55.99rem){
  /* movil: el bloque de abajo, mas corto, para que no tape el rotulo del local:
     los dos botones en una fila y menos aire entre piezas */
  .hero--portada .hero__cuerpo{gap:1.5rem}
  .hero--portada .entradilla{font-size:1rem;line-height:1.5}
  .hero--portada .hero__acciones{flex-wrap:nowrap;margin-top:1.2rem!important}
  .hero--portada .hero__acciones .btn{flex:1 1 0;padding-inline:.7rem;letter-spacing:.08em}
  .hero--portada .hero__pie{margin-top:1rem;gap:.2rem 1.2rem}
}
/* domingo: el titular en negrita y el horario grande (Nigel, 30-09) */
.hero--sunday h1{font-weight:600}
.hero__horas{
  font-family:var(--display);font-size:var(--t-xl);line-height:1.1;
  margin-top:1.2rem;color:var(--sal);font-variant-numeric:tabular-nums;
}

/* agrupador derecho de la cabecera */
.cabecera__fin{display:flex;align-items:center;gap:1rem}

/* caja de precio del carvery */
.precio-caja{
  border:1px solid var(--ostra);padding:clamp(1.6rem,4vw,2.4rem);
  display:flex;flex-direction:column;align-items:flex-start;
}
.precio-caja__cifra{
  font-family:var(--display);font-size:var(--t-3xl);line-height:1;
  margin-block:.5rem .8rem;font-variant-numeric:tabular-nums;
}

/* En movil el texto de las cabeceras interiores cae sobre el plato, que es la
   zona mas clara de la foto. Se refuerza el velo SOLO ahi: en el hero de portada
   el texto va sobre zonas oscuras y oscurecerlo mas apagaria la lampara. */
@media(max-width:55.99rem){
  .hero--corto .hero__fondo::after{
    background:linear-gradient(180deg,
      rgba(11,11,12,.55) 0%,
      rgba(11,11,12,.42) 26%,
      rgba(11,11,12,.72) 62%,
      rgba(11,11,12,.93) 100%);
  }
}

/* ---------- hoy en la casa (signature) ---------- */
.hoy{border-block:var(--filete);background:var(--sal)}
.hoy__caja{
  display:grid;gap:1.2rem 3rem;align-items:center;
  grid-template-columns:auto 1fr auto;
  padding-block:1.5rem;
}
.hoy__dia{
  font-family:var(--versal);font-size:var(--t-xs);letter-spacing:.22em;
  text-transform:uppercase;color:var(--humo);white-space:nowrap;
}
.hoy__estado{font-family:var(--display);font-size:var(--t-l);line-height:1.3}
.hoy__estado b{font-weight:400;border-bottom:1px solid var(--salmuera);padding-bottom:.1em}
.hoy__punto{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--salmuera);margin-right:.6rem;vertical-align:middle;
}
.hoy__punto--cerrado{background:var(--ostra)}

/* ---------- rejilla editorial asimetrica ---------- */
.duo{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:56rem){
  .duo{grid-template-columns:1fr 1fr}
  .duo--ancho-izq{grid-template-columns:1.25fr 1fr}
  .duo--ancho-der{grid-template-columns:1fr 1.25fr}
  .duo--invertido>*:first-child{order:2}
}
.duo__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.duo__media--apaisado img{aspect-ratio:3/2}

/* foto a sangre por un lado */
.sangre-der .duo__media{margin-right:calc(-1 * var(--gotera))}
.sangre-izq .duo__media{margin-left:calc(-1 * var(--gotera))}
@media(min-width:78rem){
  .sangre-der .duo__media{margin-right:calc((100vw - var(--ancho)) / -2 - var(--gotera))}
  .sangre-izq .duo__media{margin-left:calc((100vw - var(--ancho)) / -2 - var(--gotera))}
}

/* ---------- las dos cocinas ---------- */
.cocinas{display:grid;gap:0;border-top:var(--filete)}
@media(min-width:56rem){.cocinas{grid-template-columns:1fr 1fr}}
.cocina{padding:clamp(2.2rem,5vw,3.6rem) 0;border-bottom:var(--filete)}
@media(min-width:56rem){
  .cocina{padding:clamp(2.5rem,4vw,3.8rem) clamp(2rem,4vw,3.5rem)}
  .cocina:first-child{padding-left:0;border-right:var(--filete)}
  .cocina:last-child{padding-right:0}
}
.cocina__dias{font-family:var(--versal);font-size:var(--t-s);letter-spacing:.2em;text-transform:uppercase;color:var(--humo)}
.cocina h3{margin-block:.7rem .9rem}
.cocina__horario{font-size:var(--t-s);letter-spacing:.06em;color:var(--humo);margin-top:1.4rem;padding-top:1rem;border-top:var(--filete)}
.cocina__aviso{
  margin-top:1rem;padding:.75rem 1rem;
  border-left:2px solid var(--salmuera);
  background:color-mix(in srgb,var(--salmuera) 7%,transparent);
  font-size:var(--t-s);
}

/* ---------- costra de sal (signature) ---------- */
.costra{position:relative;display:block;width:100%;margin-inline:auto}
.costra__foto{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}

/* la grieta sobrevive como filete que cruza la seccion firma */
.grieta-filete{display:block;width:100%;height:24px;margin-bottom:clamp(2.5rem,6vw,4.5rem);overflow:visible}
.grieta-filete .costra__grieta{stroke:var(--ostra);stroke-width:1;opacity:.55}
.costra__grieta{
  fill:none;stroke:var(--sal);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:var(--largo,600);stroke-dashoffset:var(--largo,600);
  transition:stroke-dashoffset 1.7s cubic-bezier(.65,0,.35,1);
}
.visible .costra__grieta{stroke-dashoffset:0}
/* el nombre del plato va en HTML, no dentro del SVG: mejor tipografia,
   seleccionable, traducible y accesible */
.costra__pie{display:block;text-align:center;margin-top:clamp(1.4rem,3vw,2.2rem)}
.costra__plato{
  display:block;font-family:var(--display);font-size:var(--t-xl);
  line-height:1.2;color:var(--sal);
}
.costra__nota{
  display:block;margin-top:.6rem;
  font-family:var(--versal);font-size:var(--t-xs);
  letter-spacing:.24em;text-transform:uppercase;color:var(--humo);
}

/* ---------- carta ---------- */
.platos{border-top:var(--filete);margin-top:2.5rem}
.plato{
  display:grid;gap:.3rem 1.5rem;
  grid-template-columns:1fr auto;
  padding-block:1.5rem;border-bottom:var(--filete);
  align-items:baseline;
}
.plato__nombre{font-family:var(--display);font-size:var(--t-xl);line-height:1.15}
.plato__precio{font-family:var(--display);font-size:var(--t-l);white-space:nowrap;font-variant-numeric:tabular-nums}
.plato__desc{grid-column:1/-1;color:var(--humo);font-size:var(--t-s);max-width:44ch;margin-top:.15rem}
.plato__etiqueta{
  display:inline-block;margin-left:.7rem;vertical-align:middle;
  font-family:var(--texto);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--salmuera);border:1px solid currentColor;padding:.15rem .45rem;
}
.plato__alergenos{grid-column:1/-1;color:var(--humo);font-size:var(--t-xs);letter-spacing:.02em}

/* carta completa (29-09): 55 platos en grupos plegables, con el gesto del FAQ.
   En movil llegan cerrados (regla del movil compacto); en escritorio salt.js
   los abre todos, que ahi la carta se lee de un vistazo. */
.carta{border-top:var(--filete)}
.carta__grupo{border-bottom:var(--filete)}
.carta__grupo summary{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:1rem;row-gap:.2rem;
  padding-block:1.4rem;cursor:pointer;list-style:none;
}
.carta__grupo summary::-webkit-details-marker{display:none}
.carta__grupo summary::after{
  content:'+';order:2;font-family:var(--texto);font-size:1.4rem;line-height:1;
  color:var(--humo);flex:none;transition:transform .3s,color .3s;
}
.carta__grupo[open] summary::after{transform:rotate(45deg);color:var(--salmuera)}
.carta__grupo summary:hover .carta__titulo{color:var(--salmuera)}
.carta__titulo{flex:1 1 auto;font-size:var(--t-xl);line-height:1.15}
.carta__resumen{order:3;flex-basis:100%;color:var(--humo);font-size:var(--t-s)}
.carta .platos{margin-top:0;padding-bottom:1.5rem}
.carta .plato{padding-block:1.1rem}
.carta .plato:last-child{border-bottom:0}
.carta .plato__nombre{font-size:var(--t-l)}
@media(min-width:56rem){
  .carta__titulo{flex:0 1 auto}
  .carta__resumen{order:2;flex-basis:auto;margin-left:auto}
  .carta__grupo summary::after{order:3}
  .carta .platos{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,5vw,5rem)}
  .carta .plato:nth-last-child(2):nth-child(odd){border-bottom:0}
}
@media(max-width:55.99rem){
  /* en la carta el nombre ya es pequeno: el precio cabe en su misma linea */
  .carta .plato{grid-template-columns:1fr auto}
  .carta .plato__precio{grid-row:auto;justify-self:end;margin-top:0}
}

/* ---------- galeria ---------- */
.galeria{display:grid;gap:clamp(.5rem,1.4vw,1rem);grid-template-columns:repeat(2,1fr)}
@media(min-width:56rem){
  .galeria{grid-template-columns:repeat(4,1fr);grid-auto-rows:min(21vw,16rem)}
  .galeria__pieza--alta{grid-row:span 2}
  .galeria__pieza--ancha{grid-column:span 2}
}
.galeria__pieza{position:relative;overflow:hidden;background:var(--ostra)}
.galeria__pieza img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
@media(max-width:55.99rem){
  /* MOVIL COMPACTO (regla del 08-09): la galeria apilada se comia 1.284px.
     Pasa a carrusel de deslizar: una fila, con el borde de la siguiente foto
     asomando para que se vea que hay mas. Sin JS, solo scroll-snap. */
  .galeria{
    display:flex;gap:.7rem;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--gotera);
    margin-inline:calc(-1 * var(--gotera));
    padding-inline:var(--gotera);
    padding-bottom:.6rem;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .galeria__pieza{
    flex:0 0 78%;scroll-snap-align:start;
    aspect-ratio:4/3;grid-row:auto!important;grid-column:auto!important;
  }
  .galeria__pieza--alta{aspect-ratio:4/3}
  .galeria::-webkit-scrollbar{height:3px}
  .galeria::-webkit-scrollbar-thumb{background:var(--ostra)}
}
.galeria__pieza:hover img{transform:scale(1.045)}

/* hueco marcado: solo en la maqueta, se sustituye por foto real del cliente */
.hueco{
  display:grid;place-content:center;gap:.4rem;text-align:center;
  background:repeating-linear-gradient(45deg,#E7E3DA,#E7E3DA 11px,#DEDAD0 11px,#DEDAD0 22px);
  color:var(--humo);min-height:12rem;padding:1.5rem;
  border:1px dashed var(--ostra);
}
.hueco__t{font-family:var(--versal);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.hueco__d{font-size:.72rem;line-height:1.5;max-width:26ch}

/* variante oscura: para el hero, donde el hueco NO debe competir con el titular.
   Fondo tinta solido y la nota discreta abajo a la derecha. */
.hueco--oscuro{
  /* arriba a la derecha: el copy del hero vive abajo a la izquierda */
  place-content:start end;text-align:right;
  background:
    radial-gradient(120% 90% at 68% 18%, #232326 0%, #0B0B0C 62%),
    var(--tinta);
  border:0;color:var(--humo);
  width:100%;height:100%;min-height:0;
  padding:clamp(1rem,3vw,2rem);
}
.hueco--oscuro .hueco__t{color:var(--ostra);opacity:.55}
.hueco--oscuro .hueco__d{opacity:.5;max-width:34ch}
@media(max-width:55.99rem){
  /* en movil el hero va justo de alto y la nota de maqueta se come la cabecera */
  .hueco--oscuro .hueco__d,.hueco--oscuro .hueco__t{display:none}
}
@media(max-width:26rem){
  /* iPhone estrecho: que THE SALT HOUSE quepa en una linea */
  .marca__texto{font-size:.78rem;letter-spacing:.13em}
  .marca__sub{font-size:.52rem;letter-spacing:.24em}
  .idiomas a{padding:.3rem .3rem}
}

/* ---------- objeciones / faq ---------- */
.faq{border-top:var(--filete);max-width:52rem}
.faq__item{border-bottom:var(--filete)}
.faq__item summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  padding-block:1.35rem;cursor:pointer;list-style:none;
  font-family:var(--display);font-size:var(--t-l);line-height:1.35;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'+';font-family:var(--texto);font-size:1.4rem;line-height:1;
  color:var(--humo);flex:none;transition:transform .3s,color .3s;
}
.faq__item[open] summary::after{transform:rotate(45deg);color:var(--salmuera)}
.faq__item summary:hover{color:var(--salmuera)}
.faq__item p{padding-bottom:1.5rem;color:var(--humo);max-width:52ch}

/* ---------- resenas ---------- */
.resenas{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
@media(min-width:52rem){.resenas{grid-template-columns:repeat(3,1fr)}}
.resena{border-top:2px solid var(--tinta);padding-top:1.4rem;display:flex;flex-direction:column;gap:.9rem}
.tinta .resena{border-top-color:var(--sal)}
.resena__texto{font-family:var(--display);font-size:var(--t-l);line-height:1.45}
.resena__firma{font-size:var(--t-xs);letter-spacing:.13em;text-transform:uppercase;color:var(--humo);margin-top:auto}
.tinta .resena__firma{color:var(--ostra)}

.notas{display:flex;flex-wrap:wrap;gap:2.5rem;padding-top:2.5rem;margin-top:2.5rem;border-top:var(--filete)}
.nota__cifra{font-family:var(--display);font-size:var(--t-xl);line-height:1}
.nota__fuente{font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--humo);margin-top:.35rem}
.tinta .nota__fuente{color:var(--ostra)}

/* ---------- datos / ubicacion ---------- */
.datos{display:grid;gap:2rem 3rem}
@media(min-width:48rem){.datos{grid-template-columns:repeat(3,1fr)}}
.dato dt{font-family:var(--versal);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--humo);margin-bottom:.5rem}
.dato dd{margin:0;font-size:var(--t-m);line-height:1.7}
.mapa{width:100%;aspect-ratio:16/9;border:0;filter:grayscale(1) contrast(.92)}

/* ---------- pie ---------- */
.pie{background:var(--tinta);color:var(--sal);padding-block:clamp(3rem,6vw,5rem) 2rem}
.pie a{color:var(--sal)}
.pie__rejilla{display:grid;gap:2.5rem;margin-bottom:2.5rem}
/* movil compacto: dos columnas, no cuatro bloques apilados (ahorra ~450px) */
@media(max-width:47.99rem){
  .pie__rejilla{grid-template-columns:1fr 1fr;gap:1.8rem 1.5rem}
  .pie__rejilla>:first-child{grid-column:1/-1}
  .pie__enlace{min-height:40px;font-size:var(--t-s)}
}
@media(min-width:48rem){.pie__rejilla{grid-template-columns:1.5fr 1fr 1fr 1fr}}
@media(min-width:64rem){.pie__rejilla{grid-template-columns:1.4fr 1fr 1fr 1.3fr}}

/* "Part of 3 Amigos Group": exigido por la clausula 02 del contrato */
.pie__grupo{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  padding-block:1.5rem;
  border-top:1px solid color-mix(in srgb,var(--sal) 18%,transparent);
}
.pie__grupo-cta{
  font-family:var(--texto);font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--sal);
  text-decoration:underline;text-underline-offset:.3em;
  text-decoration-color:var(--ostra);
  display:inline-flex;align-items:center;min-height:44px;
}
.pie__grupo-cta:hover{text-decoration-color:var(--sal)}
.pie__lista{margin-top:.6rem;display:flex;flex-direction:column}
/* los tres legales en una linea (Nigel, 30-09) */
.pie__lista--linea{flex-direction:row;flex-wrap:nowrap;align-items:center;column-gap:.4rem}
.pie__lista--linea .pie__enlace{font-size:var(--t-s);white-space:nowrap}
/* por debajo de 64rem la columna Legal no da para la linea (en aleman, menos):
   baja a una fila propia, a todo el ancho */
@media(max-width:63.99rem){.pie__rejilla>:last-child{grid-column:1/-1}}
.pie__sep{color:var(--ostra)}
.pie__enlace{
  display:flex;align-items:center;min-height:40px;
  text-decoration:none!important;
  border-bottom:1px solid transparent;
}
.pie__enlace:hover{border-bottom-color:var(--ostra)}
.pie__legal{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:space-between;
  padding-top:1.6rem;border-top:1px solid color-mix(in srgb,var(--sal) 22%,transparent);
  font-size:var(--t-xs);color:var(--ostra);
}

/* ---------- cta fija en movil ---------- */
.cta-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;gap:1px;background:var(--ostra);
  border-top:var(--filete);
}
.cta-movil a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:56px;background:var(--sal);color:var(--tinta);
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none!important;
}
.cta-movil a.principal{background:var(--tinta);color:var(--sal);flex:1.6}

/* ---------- cookies ---------- */
/* El banner NO tapa la barra fija de reserva del movil: se apila encima. */
.ck{position:relative;z-index:120}
.ck__banner{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--tinta);color:var(--sal);
  border-top:1px solid color-mix(in srgb,var(--sal) 22%,transparent);
  padding:clamp(1.1rem,3vw,1.6rem) 0;
}
.ck__caja{
  display:grid;gap:1.2rem 2.5rem;align-items:center;
  grid-template-columns:1fr auto;
}
.ck__texto{max-width:62ch;font-size:var(--t-s);line-height:1.6;color:var(--sal)}
.ck__texto a{color:var(--sal);text-decoration-color:var(--ostra)}
.ck__botones{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

/* Aceptar y Rechazar con el MISMO peso visual: lo exige la AEPD.
   Si rechazar cuesta mas que aceptar, el consentimiento no es valido. */
.ck__btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.75rem 1.6rem;
  font-family:var(--texto);font-size:var(--t-xs);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  background:var(--sal);color:var(--tinta);border:1px solid var(--sal);
  cursor:pointer;transition:background .25s,color .25s;
}
.ck__btn:hover{background:transparent;color:var(--sal)}
.ck__btn--texto{
  background:transparent;color:var(--ostra);border-color:transparent;
  text-decoration:underline;text-underline-offset:.25em;padding-inline:.6rem;
}
.ck__btn--texto:hover{background:transparent;color:var(--sal)}

/* panel de ajustes */
/* [hidden] pone display:none desde la hoja del navegador, y cualquier display
   declarado aqui lo pisa. Sin esta linea el panel sale abierto al cargar. */
.ck__banner[hidden],.ck__panel[hidden]{display:none}
.ck__panel{
  position:fixed;inset:0;z-index:130;
  display:grid;place-items:center;padding:var(--gotera);
  background:color-mix(in srgb,var(--tinta) 72%,transparent);
  backdrop-filter:blur(3px);
}
.ck__dialogo{
  width:100%;max-width:34rem;max-height:86vh;overflow-y:auto;
  background:var(--sal);color:var(--tinta);
  padding:clamp(1.6rem,4vw,2.4rem);border:1px solid var(--ostra);
}
.ck__dialogo h2{font-size:var(--t-xl);margin-bottom:.8rem}
.ck__grupo{
  display:grid;gap:.4rem 1rem;grid-template-columns:1fr auto;
  align-items:start;padding-block:1.2rem;border-top:var(--filete);
}
.ck__grupo h3{font-size:var(--t-l);font-family:var(--display)}
.ck__grupo p{grid-column:1;color:var(--humo);font-size:var(--t-s);max-width:46ch}
.ck__fijo{
  grid-row:1;grid-column:2;align-self:center;
  font-family:var(--versal);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--humo);white-space:nowrap;
}
.ck__interruptor{grid-row:1;grid-column:2;align-self:center;display:inline-flex;align-items:center;gap:.6rem;cursor:pointer}
.ck__interruptor input{width:20px;height:20px;accent-color:var(--salmuera);cursor:pointer}
.ck__pie{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end;margin-top:1.6rem;padding-top:1.4rem;border-top:var(--filete)}
.ck__panel .ck__btn{background:var(--tinta);color:var(--sal);border-color:var(--tinta)}
.ck__panel .ck__btn:hover{background:transparent;color:var(--tinta)}
.ck__panel .ck__btn--texto{background:transparent;color:var(--humo);border-color:transparent}
.ck__panel .ck__btn--texto:hover{color:var(--tinta)}

@media(max-width:55.99rem){
  /* la barra de reserva mide 57px: el banner se sube por encima */
  .ck__banner{bottom:57px}
  .ck__caja{grid-template-columns:1fr}
  .ck__botones{width:100%}
  .ck__botones .ck__btn{flex:1 1 auto}
}

/* ---------- paginas legales ---------- */
.legal{max-width:44rem}
.legal h2{font-size:var(--t-xl);margin-block:2.6rem .9rem}
.legal h2:first-of-type{margin-top:1.5rem}
.legal h3{font-size:var(--t-l);margin-block:1.8rem .6rem}
.legal p,.legal li{max-width:none;margin-bottom:.9rem}
.legal ul{list-style:none;padding-left:0}
.legal ul li{position:relative;padding-left:1.3rem}
.legal ul li::before{content:'—';position:absolute;left:0;color:var(--ostra)}
.legal__dato{
  border-left:2px solid var(--salmuera);padding:.9rem 1.2rem;margin-block:1.2rem;
  background:color-mix(in srgb,var(--salmuera) 6%,transparent);
}
.legal__dato p{margin-bottom:.25rem}
.legal__fecha{margin-top:3rem;padding-top:1.2rem;border-top:var(--filete);color:var(--humo);font-size:var(--t-s)}
.legal table{width:100%;border-collapse:collapse;margin-block:1.2rem;font-size:var(--t-s)}
.legal th,.legal td{text-align:left;padding:.7rem .8rem;border-bottom:var(--filete);vertical-align:top}
.legal th{font-family:var(--versal);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--humo);font-weight:400}

/* En movil una tabla de 5 columnas no cabe en 500px y sacaba scroll lateral,
   que es peor que ser larga. Cada fila pasa a bloque con su etiqueta. */
@media(max-width:47.99rem){
  .legal table,.legal tbody,.legal tr,.legal td{display:block;width:100%}
  .legal thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .legal tr{padding-block:1rem;border-bottom:var(--filete)}
  .legal td{border:0;padding:.2rem 0}
  .legal td::before{
    content:attr(data-et);display:block;
    font-family:var(--versal);font-size:.62rem;letter-spacing:.16em;
    text-transform:uppercase;color:var(--humo);margin-bottom:.15rem;
  }
  .legal td code{word-break:break-word}
}

/* ---------- revelado ---------- */
/* Solo aparece, no se mueve: el deslizamiento hacia arriba hacia que el texto
   "saltara" al cambiar de pagina (Nigel, 30-09). */
.rev{opacity:0;transition:opacity .7s var(--transicion)}
.rev.visible{opacity:1}
.rev--d1{transition-delay:.1s}
.rev--d2{transition-delay:.2s}
.rev--d3{transition-delay:.3s}

/* ---------- movil ---------- */
@media(max-width:55.99rem){
  /* WCAG 2.5.5: 44px de objetivo tactil. Afecta sobre todo al telefono,
     que en un restaurante es el enlace que mas se pulsa. */
  .idiomas a{min-height:44px;display:inline-flex;align-items:center;padding-inline:.5rem}
  .pie__enlace{min-height:44px}
  /* tap-to-call: en un restaurante es el enlace mas pulsado del sitio.
     Va donde va (pie, ficha de direccion, pagina de reservas). */
  a[href^="tel:"],a[href^="https://wa.me"]{
    display:inline-flex;align-items:center;min-height:44px;
  }
  .menu-btn{min-height:44px;min-width:44px;display:flex;flex-direction:column;justify-content:center}
  .enlace-accion{margin-top:1rem}
  .enlace-accion a{display:inline-flex;align-items:center;min-height:44px}
}

@media(max-width:22.5rem){
  /* 320px (iPhone SE): marca + idiomas + hamburguesa no caben en los 283px
     utiles y sacaban 9px de scroll horizontal. */
  :root{--gotera:.9rem}
  .cabecera__fin{gap:.35rem}
  .marca__texto{font-size:.66rem;letter-spacing:.06em}
  .marca__sub{font-size:.46rem;letter-spacing:.18em}
  .idiomas{font-size:.6rem}
  .idiomas a{padding-inline:.28rem}
  .menu-btn{padding:.5rem .25rem}
  .menu-btn span{width:20px}
}

@media(max-width:55.99rem){
  .menu-btn{display:block}
  .nav{
    position:fixed;inset:68px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--sal);border-bottom:var(--filete);
    padding:1rem var(--gotera) 2rem;
    transform:translateY(-120%);transition:transform .45s cubic-bezier(.22,.61,.36,1);
    max-height:calc(100vh - 68px);overflow-y:auto;
  }
  .nav[data-abierto="true"]{transform:none}
  .nav a{width:100%;padding-block:1rem;border-bottom:var(--filete)!important;font-size:var(--t-l);font-family:var(--display)}
  body{padding-bottom:56px}
  .cta-movil{display:flex}
  .hoy__caja{grid-template-columns:1fr;gap:.6rem}
  .plato{grid-template-columns:1fr}
  .plato__precio{grid-row:1;justify-self:start;margin-top:.2rem}
}

/* ---------- movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rev{opacity:1;transform:none}
  .costra__grieta{stroke-dashoffset:0}
}

/* ---------- impresion ---------- */
@media print{
  .cabecera,.cta-movil,.hero__fondo,.mapa{display:none}
  body{background:#fff;color:#000}
}

/* ---------- cambios del 30-09 ---------- */
/* portada, junto al mapa: el rotulo S|H, para encontrar la puerta */
.donde__foto{margin:0 0 1rem}
.donde__foto img{width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
/* reservar: un solo boton, grande */
.reserva-principal{max-width:46rem}
.reserva-principal h2{margin-bottom:1rem}
/* "hoy en la casa": el dia y el estado los pone salt.js al cargar. Hasta entonces
   la caja no se ve, para que el texto no cambie delante del visitante (Nigel, 30-09:
   "wording keeps jumping"). Sin JS aparece igual, al segundo. */
.hoy:not([data-servicio]) .hoy__caja{visibility:hidden;animation:hoy-sin-js 0s 1s forwards}
@keyframes hoy-sin-js{to{visibility:visible}}
/* bebidas (01-10): muchas lineas cortas, asi que van compactas y con subtitulos */
.carta__sub{
  font-family:var(--versal);font-size:var(--t-xs);font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--humo);margin:1.6rem 0 .3rem;
}
.carta__grupo--compacta .platos{padding-bottom:.4rem}
.carta__grupo--compacta .plato{padding-block:.55rem;gap:0 1rem}
.carta__grupo--compacta .plato__nombre,.carta__grupo--compacta .plato__precio{font-size:var(--t-m)}
.carta__grupo--compacta .plato__desc{margin-top:0}

/* ---------- cambios del 01-10 (Nigel) ---------- */
/* portada: el titular, centrado en el cielo de la foto. El cielo es el 32 % de
   arriba de la foto, y la foto cubre el hero: mide lo que el mas alto de los dos,
   el hero (su min-height) o dos tercios del ancho. En movil el titular ya llena
   el cielo y bajarlo taparia el rotulo: solo desde 701 px, donde la portada usa la
   foto apaisada (hasta 700 va el recorte vertical y la cuenta no vale). */
@media(min-width:701px){
  .hero--portada .hero__cuerpo{padding-top:0}
  .hero--portada .hero__arriba{
    min-height:calc(.32 * max(clamp(30rem,88vh,54rem), 66.7vw));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(2rem,5vw,3.5rem) 1rem;
  }
}
/* carta: los platos que estaban en "The room", tres columnas (una pieza alta) */
@media(min-width:56rem){
  .galeria--platos{grid-template-columns:repeat(3,1fr)}
}
/* reservar: sin hueco bajo el mapa; en escritorio el mapa llena el alto del texto */
@media(min-width:56rem){
  .duo--mapa{align-items:stretch}
  .duo--mapa>:last-child{display:flex;flex-direction:column}
  .duo--mapa .mapa{flex:1;aspect-ratio:auto;min-height:16rem}
}

/* ---------- cambios del 02-10 (Nigel) ---------- */
/* portada en movil: en un movil grande (430 px) el titular cabe en dos lineas y
   quedaba pegado arriba. Se centra tambien en el cielo. Hasta 700 px va el recorte
   vertical (900x1355): la foto mide lo que el mas alto de los dos, el hero o 1,506
   veces el ancho, y el cielo es su 35 % de arriba (hasta el rotulo). Con el titular
   en cuatro lineas (375 px) ya llena el cielo y se queda donde estaba. */
@media(max-width:700px){
  .hero--portada .hero__cuerpo{padding-top:0}
  .hero--portada .hero__arriba{
    min-height:calc(.35 * max(clamp(30rem,88vh,54rem), 150.6vw));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(2rem,5vw,3.5rem) .5rem;
  }
}
/* telefono: "(only operates during opening hours)" detras, en pequeno */
.tel-nota{display:block;margin-top:.2rem;font-size:var(--t-xs);line-height:1.4;color:var(--humo)}
.pie .tel-nota{color:var(--ostra)}
/* reservar, al final (Nigel, 02-10): una linea para la pregunta, otra para el telefono
   con su nota y otra para WhatsApp */
.otras-vias p{margin:0;line-height:1.6}
.otras-vias p+p{margin-top:.45rem}