/* ==========================================================================
   Gumba's Italian Restaurant — sistema visual «La sala a las siete»
   Prototipo Hospitality del Estudio.  Toda la pagina reescala desde --paso.
   Contrastes medidos ANTES de escribir esto:
     hueso  #F4EFE6 sobre #241C19 -> 14,61:1
     apagado #B0A199 sobre #241C19 ->  6,70:1
     ambar  #E8A33C en los dos sentidos -> 7,76:1
   ========================================================================== */

/* -- 0 · las tipografias, alojadas aqui -------------------------------
   Bodoni Moda porque Giambattista Bodoni era italiano, de Parma. La letra
   tiene una razon, no es decoracion. Variable con eje optico: a 7em el
   contraste sube solo, que es exactamente lo que hace que se vea cara.
   Nada de Google Fonts en linea: en la portada de un cliente no se depende
   de un tercero en la ruta critica de los primeros 400 ms.               */
@font-face{
  font-family:"Bodoni Moda"; src:url(../fonts/bodoni-moda-latin.woff2) format("woff2");
  font-weight:400 900; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Instrument Sans"; src:url(../fonts/instrument-sans-latin.woff2) format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* -- 1 · el numero que manda ------------------------------------------- */
:root{
  --c-accent-t:#E8A33C;
  font-size: clamp(11.5px, .75vw + 8.6px, 16px);

  --display:"Bodoni Moda","Didot","Bodoni MT",Georgia,"Times New Roman",serif;
  --text:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  /* los dos anclajes. Ninguno es puro. */
  --c-ink:#241C19;          /* espresso calido */
  --c-paper:#F4EFE6;        /* hueso */
  --c-surface:#2E2320;
  --c-deep:#1A1412;
  --c-muted-on-dark:#B0A199;
  --c-muted-on-light:#6B5D55;
  --c-accent:#E8A33C;       /* ambar de vela. SOLO la accion principal. */
  /* El ambar es DECORATIVO: como fondo de un boton va bien, pero como TEXTO
     sobre papel claro da 1,88:1. Para texto existe --c-accent-t, que cambia
     con el tema. Medido: #E8A33C sobre #241C19 = 7,76 | #7E5210 sobre
     #F4EFE6 = 5,91. Y ninguno de los dos lleva opacidad encima jamas:
     #7E5210 al 85% se cae a 4,27 y al 72% a 3,02. */
  --c-accent-oscuro:#7E5210;
  /* el aviso usa la tinta del acento, que cambia con el tema */

  --c-ink-15:rgba(36,28,25,.15);
  --c-paper-15:rgba(244,239,230,.15);
  --c-paper-25:rgba(244,239,230,.25);

  /* escala tipografica, en em contra la raiz */
  --t-1:.833em; --t0:1.111em; --t1:1.667em; --t2:2.222em;
  --t3:3.333em; --t4:5em;     --t5:7.222em;

  /* escalera de espacio, no lineal porque la percepcion no lo es */
  --s1:.277em; --s2:.416em; --s3:.833em; --s4:1.666em; --s5:2.5em;
  --s6:4.167em; --s7:6.666em; --s8:10.833em; --s9:15em;

  --ancho:82em;
  --canal:clamp(1.25rem,5vw,4rem);
  --r-sm:.555em; --r-md:1.111em; --r-pill:999em;
  --barra:4.4em;
}

.theme-dark { --fg:var(--c-paper); --bg:var(--c-ink);   --fg-soft:var(--c-muted-on-dark);  --hairline:var(--c-paper-15); --c-accent-t:var(--c-accent); }
.theme-light{ --fg:var(--c-ink);   --bg:var(--c-paper); --fg-soft:var(--c-muted-on-light); --hairline:var(--c-ink-15); --c-accent-t:var(--c-accent-oscuro); }

/* -- 2 · base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--text); font-size:var(--t0); line-height:1.55;
  letter-spacing:-.011em; color:var(--fg); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* las superficies del navegador. Salir con los colores de fabrica es la senal
   mas barata de que una pagina se monto en vez de construirse. */
::selection{background:var(--c-accent); color:var(--c-ink)}
:root{caret-color:var(--c-accent); scrollbar-color:var(--c-surface) var(--c-ink)}
img,svg,video,canvas{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--c-accent); outline-offset:3px; border-radius:2px}

h1,h2,h3,h4{font-family:var(--display); font-weight:500; margin:0;
  font-optical-sizing:auto; overflow-wrap:break-word}
h1{font-size:var(--t5); line-height:.846; letter-spacing:-.04em}
h2{font-size:var(--t4); line-height:.889; letter-spacing:-.035em}
h3{font-size:var(--t3); line-height:1;    letter-spacing:-.03em}
h4{font-size:var(--t2); line-height:1.125;letter-spacing:-.025em}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--t1); line-height:1.35; letter-spacing:-.02em}
.ceja{font-family:var(--text); font-size:.72em; font-weight:500;
      letter-spacing:.22em; text-transform:uppercase; color:var(--c-accent-t);
      margin:0 0 var(--s4)}
.fina{font-size:var(--t-1); line-height:1.4; color:var(--fg-soft)}

.wrap{width:min(var(--ancho),100% - var(--canal)*2); margin-inline:auto}
.banda{position:relative; padding-block:var(--s8); background:var(--bg); color:var(--fg)}
.banda + .banda{padding-top:var(--s8)}
.banda--cambia{padding-block:var(--s9)}

/* -- 3 · la barra ------------------------------------------------------ */
.barra{
  position:fixed; inset:0 0 auto; z-index:40; height:var(--barra);
  display:flex; align-items:center; gap:var(--s4);
  padding-inline:var(--canal);
  background:var(--c-ink); color:var(--c-paper);          /* SOLIDA, nunca translucida */
  border-bottom:1px solid var(--c-paper-15);
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.barra.theme-light{background:var(--c-paper); color:var(--c-ink); border-bottom-color:var(--c-ink-15)}
.barra__marca{font-family:var(--display); font-weight:500; font-size:1.45em;
  letter-spacing:.02em; text-decoration:none; line-height:1; white-space:nowrap;
  transform-origin:50% 50%; will-change:auto}
.barra__marca sup{font-size:.32em; vertical-align:1.25em; letter-spacing:.2em;
  margin-left:.55em; font-family:var(--text); font-weight:500; opacity:.55}
.barra__enlaces{margin-left:auto; display:flex; gap:var(--s5); align-items:center;
                font-size:var(--t-1); letter-spacing:.1em; text-transform:uppercase}
.barra__enlaces a{text-decoration:none; opacity:.82; transition:opacity .2s}
.barra__enlaces a:hover{opacity:1}
.barra__tel{font-variant-numeric:tabular-nums; letter-spacing:.04em}
@media (max-width:860px){ .barra__enlaces .oculta-movil{display:none} }

/* -- 4 · el heroe: la camara ------------------------------------------- */
.dolly{position:relative; height:250vh}
.dolly__escena{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:#704122;                    /* medido del fondo */
}
/* SIN will-change y SIN translateZ: promover una capa que luego se escala es
   exactamente lo que hace que Chrome deje de pintarla. */
.dolly__fondo,.dolly__lamina{position:absolute; inset:0}
.dolly__fondo img,.dolly__lamina img{width:100%; height:100%; max-width:none; object-fit:cover}
.dolly__lamina{z-index:2}
.dolly__vineta{position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 48%,rgba(0,0,0,0) 0%,rgba(20,14,11,.28) 76%,rgba(20,14,11,.52) 100%)}
/* el velo que sostiene el contraste del texto: sube segun la sala se aclara */
.dolly__velo{position:absolute; inset:0; z-index:4; pointer-events:none; opacity:.34;
  background:linear-gradient(180deg,rgba(15,10,8,.72) 0%,rgba(15,10,8,.42) 46%,rgba(15,10,8,.78) 100%)}
.dolly__ui{position:absolute; inset:0; z-index:5; display:grid; place-items:center;
  pointer-events:none; color:var(--c-paper); text-align:center}
.dolly__ui a{pointer-events:auto}
.dolly__titulo{font-size:clamp(2.8rem,9.5vw,7.5rem); line-height:.9; letter-spacing:-.045em;
  margin:0; display:grid; gap:.04em; max-width:14ch}
.dolly__titulo span{display:block}
.dolly__pie{position:absolute; left:0; right:0; bottom:var(--s8); z-index:5;
  display:flex; justify-content:center; gap:var(--s5); color:var(--c-paper);
  font-size:var(--t-1); letter-spacing:.18em; text-transform:uppercase; opacity:.9}
.dolly__destino{position:absolute; left:50%; top:31%; width:9.5em; height:2.1em;
  transform:translate(-50%,-50%); pointer-events:none; visibility:hidden}

/* -- 5 · la afirmacion ------------------------------------------------- */
.claim{min-height:78vh; display:grid; align-content:center}
.claim h2{max-width:16ch}
.claim p{max-width:44ch; color:var(--fg-soft); margin-top:var(--s5)}

/* -- 6 · la prueba ----------------------------------------------------- */
.prueba{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding-block:var(--s6)}
.prueba div{display:grid; gap:var(--s2)}
.prueba b{font-family:var(--display); font-weight:500; font-size:var(--t3);
  line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.prueba span{font-size:var(--t-1); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft)}
@media (max-width:760px){ .prueba{grid-template-columns:repeat(2,1fr); gap:var(--s5)} }

/* -- 7 · los platos, uno por pantalla ---------------------------------- */
.banda.plato{position:relative; min-height:100vh; min-height:100svh;
  display:grid; align-items:end; padding:0; overflow:clip}
.plato__txt{padding-block:var(--s7)}
.plato__foto{position:absolute; inset:0; z-index:0}
.plato__foto img{width:100%; height:100%; object-fit:cover}
/* El velo va POR ENCIMA del lienzo del shader (z-index 2 contra 1). Sin
   esto el canvas de WebGL lo tapaba y el texto quedaba sobre la foto pelada:
   ilegible, y ademas era invisible en el CSS porque el degradado si estaba.
   El contraste sobre una foto no se arregla con text-shadow; eso es la senal
   de que nadie resolvio el problema. */
.plato__foto::after{content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(0deg,
    rgba(14,10,8,.95) 0%, rgba(14,10,8,.9) 30%,
    rgba(14,10,8,.62) 52%, rgba(14,10,8,.22) 76%, rgba(14,10,8,.05) 100%)}
.plato__txt{position:relative; z-index:3; color:var(--c-paper); max-width:34em}
.plato__txt h3{margin-bottom:var(--s3)}
.plato__precio{font-family:var(--display); font-size:var(--t2); color:var(--c-accent);
  font-variant-numeric:tabular-nums}
.plato__d{color:#EAE1D8; max-width:44ch}

/* -- 8 · la sala, con el aire caliente (WebGL) ------------------------- */
.sala{display:grid; grid-template-columns:1fr 1fr; gap:0; align-items:stretch}
.sala__media{position:relative; min-height:34em; overflow:hidden; background:var(--c-deep)}
.sala__media img,.sala__media canvas{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* NO se le pone position: .plato__foto ya es absolute y .sala__media
   relative. Al ir esta regla despues en el archivo, un position aqui le
   ganaba por orden y convertia la foto de fondo en una fila de la rejilla
   de 1877 px de alto. Medido el 26 ago 2026. */
[data-haze] canvas{position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity .8s ease; z-index:1}
[data-haze].webgl canvas{opacity:1}
[data-haze].webgl > img{opacity:0}
.sala__txt{display:grid; align-content:center; padding:var(--s7) var(--canal);
  background:var(--c-surface); color:var(--c-paper)}
.sala__txt h3{margin-bottom:var(--s4)}
.claim h2,.banda .wrap > h2{margin-bottom:var(--s4)}
.sala__txt p{color:#D6C9C0; max-width:38ch}
@media (max-width:900px){ .sala{grid-template-columns:1fr} .sala__media{min-height:22em} }

/* -- 9 · la carta ------------------------------------------------------ */
.carta{display:grid; grid-template-columns:16em minmax(0,1fr); gap:var(--s6); align-items:start; min-width:0}
.carta__rail{position:sticky; top:calc(var(--barra) + var(--s4)); display:grid; gap:var(--s1);
  max-height:calc(100vh - var(--barra) - var(--s6)); overflow:auto; padding-right:var(--s3)}
.carta__rail button{
  all:unset; cursor:pointer; padding:var(--s2) var(--s3); border-radius:var(--r-sm);
  font-size:var(--t-1); letter-spacing:.06em; color:var(--fg-soft);
  border-left:2px solid transparent; transition:color .2s, border-color .2s, background-color .2s;
}
.carta__rail button:hover{color:var(--fg)}
.carta__rail button[aria-current="true"]{color:var(--fg); border-left-color:var(--c-accent-t);
  background:var(--hairline); font-weight:500}
.carta__rail button[aria-current="true"] i{color:var(--fg)}
.carta__rail button:active{transform:translateX(1px)}
/* El numero de platos NO lleva opacidad: --fg-soft da 5,52:1 y al 55% cae a
   2,27. Es la misma leccion de --faint, por cuarta vez en este proyecto. */
.carta__rail i{font-style:normal; color:var(--fg-soft); font-size:.9em}
.carta__buscar{grid-column:1/-1; display:flex; gap:var(--s3); align-items:center;
  border-bottom:1px solid var(--hairline); padding-bottom:var(--s3); margin-bottom:var(--s5)}
.carta__buscar input{
  all:unset; flex:1; font-family:var(--text); font-size:var(--t1); color:var(--fg);
  letter-spacing:-.02em; min-width:0;
}
.carta__buscar input::placeholder{color:var(--fg-soft)}
.carta__cuenta{font-size:var(--t-1); color:var(--fg-soft); letter-spacing:.1em;
  text-transform:uppercase; white-space:nowrap; font-variant-numeric:tabular-nums}
.seccion{content-visibility:auto; contain-intrinsic-size:auto 40em}
.seccion h3{margin-bottom:var(--s5); position:relative; padding-bottom:var(--s3);
  border-bottom:1px solid var(--hairline)}
.seccion + .seccion{margin-top:var(--s7)}
.linea{display:grid; grid-template-columns:1fr auto; gap:0 var(--s5);
  padding:var(--s4) 0; border-bottom:1px solid var(--hairline)}
.linea__n{font-family:var(--display); font-size:var(--t1); line-height:1.15;
  letter-spacing:-.02em; margin:0}
.linea__d{grid-column:1/2; color:var(--fg-soft); font-size:.94em; margin:var(--s2) 0 0; max-width:60ch}
.linea__p{font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; white-space:nowrap; align-self:start}
.linea__sello{display:inline-block; margin-left:var(--s3); vertical-align:.18em;
  font-family:var(--text); font-size:.5em; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-ink); background:var(--c-accent); padding:.28em .6em; border-radius:var(--r-pill)}
@media (max-width:900px){
  .carta{grid-template-columns:minmax(0,1fr)}
  .carta__rail{position:static; min-width:0; max-height:none; display:flex; overflow:auto;
    gap:var(--s2); padding-bottom:var(--s3); margin-bottom:var(--s5);
    border-bottom:1px solid var(--hairline)}
  .carta__rail button{white-space:nowrap; border-left:0; border-bottom:2px solid transparent}
  .carta__rail button[aria-current="true"]{border-left:0; border-bottom-color:var(--c-accent)}
}

/* -- 10 · las preguntas ------------------------------------------------ */
.faq{display:grid; gap:0; max-width:52em}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s4) 0;
  font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em;
  display:flex; justify-content:space-between; gap:var(--s4); align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"\002B"; color:var(--c-accent-t); font-family:var(--text); font-size:.7em}
.faq details[open] summary::after{content:"\2212"}
.faq p{margin:0 0 var(--s4); color:var(--fg-soft); max-width:56ch}
.aviso{color:var(--c-accent-t); font-weight:500}

/* -- 11 · el cierre ---------------------------------------------------- */
.cierre{min-height:92vh; display:grid; align-content:center; gap:var(--s6)}
.cierre__grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s7); align-items:start}
.canal{display:grid; gap:var(--s4); align-content:start}
.canal a{display:flex; align-items:center; gap:var(--s4); text-decoration:none;
  padding:var(--s4); border:1px solid var(--hairline); border-radius:var(--r-md);
  transition:border-color .25s, transform .25s}
.canal a:hover{border-color:var(--c-accent)}
.canal a:active{transform:translateY(1px)}
.canal strong{display:block; font-family:var(--display); font-size:var(--t1); letter-spacing:-.02em}
.canal small{color:var(--fg-soft)}
.canal .flecha{margin-left:auto; color:var(--c-accent); font-size:var(--t1)}
.mapa{border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:#EDE3CF}
.mapa svg{width:100%; height:auto; display:block}
@media (max-width:900px){ .cierre__grid{grid-template-columns:1fr; gap:var(--s6)} }

/* -- 12 · el pie ------------------------------------------------------- */
.pie{padding-block:var(--s6); border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:var(--s4) var(--s6); align-items:baseline;
  font-size:var(--t-1); color:var(--fg-soft)}
.pie a{text-decoration:none}
.pie a:hover{color:var(--fg)}
.pie__nota{margin-left:auto; max-width:34ch; text-align:right}
@media (max-width:760px){ .pie__nota{margin-left:0; text-align:left} }

/* -- 13 · la accion que siempre esta -------------------------------- */
.pastilla{
  position:fixed; left:50%; bottom:var(--s4); transform:translateX(-50%);
  z-index:45; display:inline-flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s2) var(--s2) var(--s5);
  background:var(--c-accent); color:var(--c-ink); text-decoration:none;
  border-radius:var(--r-pill); font-family:var(--display); font-weight:500;
  font-size:var(--t0); letter-spacing:-.01em;
  box-shadow:0 2px 14px rgba(0,0,0,.28);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.pastilla:hover{box-shadow:0 4px 22px rgba(0,0,0,.34)}
.pastilla:active{transform:translateX(-50%) translateY(2px) scale(.985)}
.pastilla__punta{display:grid; place-items:center; width:2.4em; height:2.4em;
  border-radius:50%; background:var(--c-ink); color:var(--c-accent); font-size:.9em}
/* En el telefono la pastilla se encoge y baja: a 390 px se comia una linea
   de la carta. Sigue siendo la unica accion principal de la pagina. */
@media (max-width:760px){
  .pastilla{font-size:.92em; bottom:var(--s3); padding-left:var(--s4)}
  .pastilla__punta{width:2.1em; height:2.1em}
}
.ultimo{padding-bottom:var(--s8)}

/* -- 14 · idioma ------------------------------------------------------- */
.lang{display:inline-flex; border:1px solid var(--c-paper-25); border-radius:var(--r-pill);
  overflow:hidden; font-size:.9em}
.barra.theme-light .lang{border-color:var(--c-ink-15)}
.lang button{all:unset; cursor:pointer; padding:.3em .7em; letter-spacing:.1em; color:inherit}
.lang button:active{opacity:.7}
.lang button[aria-pressed="true"]{background:var(--c-paper); color:var(--c-ink)}
.barra.theme-light .lang button[aria-pressed="true"]{background:var(--c-ink); color:var(--c-paper)}

/* -- 15 · la mocion ---------------------------------------------------- */
/* Nada nace invisible sin JavaScript: la clase .js la pone un script del head.
   Sin ella todo esto no existe y la pagina se ve entera. */
.js .rv{opacity:0; transform:translateY(1.4em)}
.js .rv-blur{opacity:0; filter:blur(28px)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv-blur{opacity:1; transform:none; filter:none}
  .dolly{height:100vh}
  .dolly__lamina{transform:scale(1.55)}
  .dolly__fondo{transform:scale(1.28)}
  .dolly__velo{opacity:.55}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
@media (max-width:991px){ .dolly{height:200vh} }

/* -- 16 · el telefono --------------------------------------------------
   La escala editorial que hace que esto parezca caro en un escritorio se
   sale de la pantalla en un movil: a 390 px el h2 daba seis caracteres por
   linea y las palabras se cortaban por el borde derecho. Se baja un peldano
   entero la escala de titulares, y la barra se aprieta: a 390 px se llevaba
   por delante el conmutador de idioma.
   Medido con `mirar-movil.py`, que renderiza a 390 px de verdad. NO vale
   redimensionar la ventana: se piden 402 y innerWidth devuelve 606. */
@media (max-width:760px){
  h1{font-size:var(--t4)}
  h2{font-size:var(--t3)}
  h3{font-size:var(--t2)}
  h4{font-size:var(--t1)}
  .lede{font-size:var(--t0)}
  .claim h2{max-width:none}
  .claim{min-height:auto}
  .banda{padding-block:var(--s7)}
  .banda + .banda{padding-top:var(--s7)}
  .banda--cambia{padding-block:var(--s7)}
  .barra{gap:var(--s3)}
  .barra__marca{font-size:1.12em}
  .barra__marca sup{font-size:.3em; margin-left:.35em}
  .barra__enlaces{gap:var(--s4)}
  .barra__tel{font-size:.84em}
  .lang{font-size:.76em}
  .prueba b{font-size:var(--t2)}
  .cierre{min-height:auto}
  .sala__txt{padding:var(--s6) var(--canal)}
}