/* =============================================================================
   piel.css - Gumba's Italian Restaurant. «La sala a las siete».

   Lo que sale del negocio y solo de el. Se carga DESPUES de motor.css.
   Contrastes medidos ANTES de escribir una linea:
     hueso   #F4EFE6 sobre #241C19 -> 14,61:1
     apagado #B0A199 sobre #241C19 ->  6,70:1
     apagado #6B5D55 sobre #F4EFE6 ->  5,52:1
     ambar   #E8A33C sobre #241C19 ->  7,76:1   (decorativo Y texto en oscuro)
     ambar   #7E5210 sobre #F4EFE6 ->  5,91:1   (texto en claro)
   ========================================================================== */

/* -- 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;
}

:root{
  --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: ni negro ni blanco. */
  --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 manda --c-accent-t, que el motor
     conmuta con el tema. Y ninguno de los dos lleva opacidad encima jamas:
     #7E5210 al 85% se cae a 4,27 y al 72% a 3,02. */
  --on-accent:#241C19;        /* lo que va ENCIMA del ambar -> 7,76 (el hueso da 1,88) */
  --c-accent-claro:#E8A33C;   /* tinta de acento en tema oscuro  -> 7,76 */
  --c-accent-oscuro:#7E5210;  /* tinta de acento en tema claro   -> 5,91 */

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

  --c-accent-t:#E8A33C;     /* respaldo si nada pone tema */
  --hero-fondo:#704122;     /* medido de la foto del fondo */
}
.dolly__escena{background:var(--hero-fondo)}

/* -- 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)}
}