/* ═══════════════════════════════════════════════════════════════════════════
   SR. GAM · Dirección "Turno de Mediodía" · piel VERDE HEALTHY (2026)
   ---------------------------------------------------------------------------
   Sistema: _design/sistema/sr-gam-sistema.md
   Movimiento: _design/sistema/tabla-de-movimiento.md
   Se carga DESPUÉS de base.css. Ningún hex crudo fuera del :root.

   Por qué verde: el negocio se autodefine, textual, como "Creadores de la
   opción saludable en comida rápida" y lleva así desde 1990. El verde no es
   maquillaje: es su posicionamiento declarado, que hoy no comunican. Además
   los saca del naranja/rojo genérico de toda la competencia de comida rápida.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ───── COLOR · HOJA · EL VERDE DUEÑO ─────
     #456524 es EL color de Sr. GAM. Verde de hoja madura con una punta de
     amarillo (matiz ~90°, el del aguacate maduro y el nopal asado), no el
     verde-menta de app de salud. Es lo bastante profundo para ser fondo de
     encabezado con texto hueso encima (6.5:1) y lo bastante saturado para
     leerse como color de marca y no como gris verdoso. */
  --hoja:     #456524;
  --hoja-700: #2C441B;   /* hover de superficies verdes, fila propia */
  --hoja-900: #16230D;   /* bloque de cierre, pie, placa esmaltada */
  --hoja-400: #A9C46F;   /* tramo de apertura de la barra, bordes sobre verde */
  --hoja-200: #DDE9C3;   /* "migajón verde": texto pequeño sobre verde */
  --hoja-100: #EDF2DE;   /* velo verde clarísimo, fondo de aviso */

  /* ───── COLOR · LIMA · el acento vivo ─────
     Se usa con disciplina: SOLO lo que se puede tocar (botones, CTA, badge)
     y el estado "abierto". Nunca como texto sobre hueso: ahí da 1.19:1.
     Como fondo lleva tinta encima (13.1:1); como texto va sobre verde. */
  --lima:        #C9F24B;
  --lima-fuerte: #B7E332;  /* hover del botón primario */
  --lima-honda:  #6F9B12;  /* la misma lima donde tiene que aguantar contraste */

  /* ───── COLOR · FRUTA · lo que de verdad venden ─────
     Salen de la carta real: fresa (smoothies, crepas, bionicos), mango
     (licuados, smoothies, jugos) y betabel (la mezcla de jugos). Se usan
     para distinguir categorías del menú, no para decorar. */
  --fresa:       #B4234A;  --fresa-200:   #F7D6DE;
  --mango:       #97590A;  --mango-200:   #F8E3B0;  --mango-400: #D8973A;
  --betabel:     #7C3080;  --betabel-200: #EBD8ED;

  /* ───── COLOR · neutros ─────
     Fondo hueso, no blanco puro: el blanco puro grita clínica y esto es
     comida hecha al momento. La nata (#FFFDF7) es la superficie de las
     fichas: apenas más clara que el papel, para que la ficha flote. */
  --hueso:        #F7F4EA;
  --crema:        #EDE8D9;
  --nata:         #FFFDF7;
  --linea:        #8C816A;   /* regla impresa: 3.49:1 sobre hueso */
  --linea-fuerte: #5F5745;   /* borde en hover / activo */
  --tinta:        #14200E;   /* verde tan oscuro que lee como negro: 15.4:1 */
  --tinta-2:      #4A5344;
  --tinta-inv:    #FBFDF4;

  /* ───── COLOR · funcionales (UI, no marca) ───── */
  --ok:      #3F6B12;   /* "abierto" en texto */
  --alerta:  #A32617;
  --aviso:   var(--mango);
  --ambar:   #A85A12;   /* última orden: alerta que sigue contrastando */
  --apagado: #46543F;   /* cerrado: verde profundo, desaturado, apagado */

  /* ───── COLOR · roles semánticos ───── */
  --fondo:         var(--hueso);
  --fondo-elev:    var(--crema);
  --fondo-tarjeta: var(--nata);
  --fondo-oscuro:  var(--hoja);
  --texto:         var(--tinta);
  --texto-2:       var(--tinta-2);
  --texto-inv:     var(--tinta-inv);
  --borde:         var(--linea);
  --borde-fuerte:  var(--linea-fuerte);
  --accion:        var(--lima);
  --accion-hover:  var(--lima-fuerte);
  --sobre-accion:  var(--tinta);
  --scrim:         rgba(20, 32, 14, .55);

  /* Divisores y velos SOBRE verde. Variantes con alfa de --tinta-inv;
     se declaran aquí para no dejar ningún color suelto fuera de este bloque. */
  --linea-inv:       rgba(251, 253, 244, .22);
  --linea-inv-suave: rgba(251, 253, 244, .14);

  /* ───── TIPOGRAFÍA · familias ───── */
  --f-display: "Archivo", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --f-texto:   "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-datos:   "IBM Plex Mono", ui-monospace, "SF Mono", "Consolas", monospace;

  /* ───── TIPOGRAFÍA · escala ───── */
  --t-micro:  0.75rem;
  --t-cap:    0.8125rem;
  --t-sm:     0.9375rem;
  --t-base:   1rem;
  --t-lg:     1.1875rem;
  --t-precio: 1.25rem;
  --t-xl:     1.5rem;
  --t-2xl:    clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem);
  --t-3xl:    clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);
  --t-4xl:    clamp(2.75rem, 1.2rem + 6.8vw, 5.75rem);

  /* ───── TIPOGRAFÍA · ejes de Archivo ───── */
  --var-h1:    "wdth" 66, "wght" 900;
  --var-h2:    "wdth" 68, "wght" 800;
  --var-h3:    "wdth" 72, "wght" 800;
  --var-h4:    "wdth" 78, "wght" 700;

  /* ───── TIPOGRAFÍA · line-height ───── */
  --lh-hero: 0.92;
  --lh-3xl:  1.0;
  --lh-2xl:  1.1;
  --lh-xl:   1.2;
  --lh-lg:   1.4;
  --lh-base: 1.6;
  --lh-sm:   1.5;
  --lh-mono: 1.2;

  /* ───── TIPOGRAFÍA · tracking ───── */
  --tr-hero:  -0.032em;
  --tr-3xl:   -0.026em;
  --tr-2xl:   -0.018em;
  --tr-xl:    -0.010em;
  --tr-base:   0em;
  --tr-micro:  0.09em;

  /* ───── ESPACIADO (base 4px) ───── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --seccion-y: clamp(72px, 4vw + 40px, 128px);

  /* ───── RADIOS (lenguaje de rótulo impreso) ───── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-pill: 999px;   /* SOLO botones de acción y el sello */

  /* ───── ELEVACIÓN ("ficha impresa sobre la barra") ───── */
  --e0: none;
  --e1: 0 2px 0 0 var(--linea);
  --e2: 0 1px 0 0 rgba(20,32,14,.24), 0 3px 0 0 rgba(20,32,14,.14);
  --e3: 0 1px 0 rgba(20,32,14,.10), 0 10px 28px -12px rgba(20,32,14,.34);
  --e4: 0 24px 60px -20px rgba(20,32,14,.48);
  --anillo-foco: 0 0 0 2px var(--hueso), 0 0 0 4px var(--tinta);

  /* ───── LAYOUT ───── */
  --ancho-max:     1120px;
  --ancho-lectura: 60ch;
  --margen:        16px;
  --gutter:        12px;

  /* ───── Z-INDEX propios ─────
     Los de la librería (--z-wa 400, --z-drawer 500, --z-modal 600,
     --z-toast 800) los define base.css y NO se tocan: si se bajaran a la
     escala del sistema, el botón flotante de WhatsApp taparía el cajón del
     pedido. Aquí solo viven las capas de esta página, todas por debajo. */
  --z-sticky-cat: 10;
  --z-header:     20;
  --z-jornada:    30;
  --z-popover:    40;

  /* ───── MOVIMIENTO ───── */
  --d-1: 100ms; --d-2: 140ms; --d-3: 200ms; --d-4: 260ms;
  --d-5: 320ms; --d-6: 420ms; --d-7: 520ms; --d-8: 700ms;
  --d-reloj: 600ms;
  --ease-salida:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-entra-sale: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-cajon:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-color:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-reloj:      linear;
  --stagger: 50ms;
  --desplazamiento-revelado: 14px;

  /* ───── FIRMA · La Barra de la Jornada ─────
     Jornada = 08:00 → 17:00. El CIERRE está verificado (ficha de Maps).
     La APERTURA es un supuesto: ver LEEME.md, dato a validar con el dueño. */
  --jornada-abre:   480;
  --jornada-cierra: 1020;
  --jornada-total:  540;
  --progreso: 0;
  --jornada-alto: 44px;

  /* ───── Puentes hacia base.css y hacia lib/ ─────
     base.css, ui.js, cart.js y whatsapp.js leen custom properties públicas
     con nombre propio. Se enlazan aquí para que los componentes de la
     librería hereden esta paleta sin tocar una línea de lib/.
     Ojo: --color-sobre-acento es TINTA, no blanco, porque el acento pasó a
     ser lima; blanco sobre lima daría 1.3:1. */
  --color-fondo:        var(--fondo);
  --color-fondo-alt:    var(--crema);
  --color-superficie:   var(--nata);
  --color-texto:        var(--texto);
  --color-texto-suave:  var(--texto-2);
  --color-borde:        var(--borde);
  --color-acento:       var(--accion);
  --color-sobre-acento: var(--sobre-accion);
  --color-backdrop:     var(--scrim);
  --color-exito:        var(--ok);
  --color-error:        var(--alerta);
  --fuente-texto:       var(--f-texto);
  --fuente-titulos:     var(--f-display);
  --radio-sm:  var(--r-sm);
  --radio-md:  var(--r-md);
  --radio-lg:  var(--r-md);
  --sombra-media: var(--e2);
  --sombra-alta:  var(--e4);
  --ancho-contenedor: var(--ancho-max);
  --ancho-contenedor-angosto: 720px;
  --dur-reveal: var(--d-7);
  --reveal-desplazamiento: var(--desplazamiento-revelado);
  /* base.css usa --offset-ancla en scroll-padding-top: así ninguna ancla
     queda escondida bajo la barra fija. Lo mide JS junto con --alto-fijo. */
  --offset-ancla: var(--alto-fijo, 150px);
}

@media (min-width: 768px) { :root { --margen: 28px; --gutter: 16px; } }
@media (min-width: 1024px) { :root { --gutter: 24px; } }

/* ═══ Movimiento reducido: MENOS movimiento, no cero. ═══ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-1: 0ms;  --d-2: 0ms;  --d-3: 120ms; --d-4: 120ms;
    --d-5: 140ms; --d-6: 160ms; --d-7: 160ms; --d-8: 160ms;
    --d-reloj: 0ms;
    --stagger: 0ms;
    --desplazamiento-revelado: 0px;
  }
  html { scroll-behavior: auto; }
  .jornada__marcador,
  .jornada__relleno { transition: none !important; }
  .jornada__frase--entra { animation: none !important; }
  [data-loop] { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. BASE DE PÁGINA
   ═══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--texto);
  background: var(--fondo);
  /* El alto real de la barra fija lo mide JS y lo escribe en --alto-fijo.
     El valor de reserva mantiene la página usable si el JS no corre. */
  padding-top: var(--alto-fijo, 150px);
}

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; }
h1 { font-size: var(--t-4xl); font-variation-settings: var(--var-h1); letter-spacing: var(--tr-hero); line-height: var(--lh-hero); }
h2 { font-size: var(--t-3xl); font-variation-settings: var(--var-h2); letter-spacing: var(--tr-3xl); line-height: var(--lh-3xl); }
h3 { font-size: var(--t-2xl); font-variation-settings: var(--var-h3); letter-spacing: var(--tr-2xl); line-height: var(--lh-2xl); }
h4 { font-size: var(--t-xl); font-variation-settings: var(--var-h4); letter-spacing: var(--tr-xl); line-height: var(--lh-xl); }

:focus-visible {
  outline: none;
  box-shadow: var(--anillo-foco);
  border-radius: var(--r-xs);
}

::selection { background: var(--lima); color: var(--tinta); }

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.seccion { padding-block: var(--seccion-y); }
.seccion--elev { background: var(--fondo-elev); }
.seccion--oscura { background: var(--fondo-oscuro); color: var(--texto-inv); }
.seccion--oscura h2, .seccion--oscura h3 { color: var(--texto-inv); }

.rotulo {
  font-family: var(--f-datos);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: var(--tr-micro);
  text-transform: uppercase;
  color: var(--texto-2);
  margin-bottom: var(--s-3);
}
.seccion--oscura .rotulo { color: var(--hoja-200); }

.entradilla {
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
  color: var(--texto-2);
  max-width: var(--ancho-lectura);
  margin-top: var(--s-4);
}
.seccion--oscura .entradilla { color: var(--hoja-200); }

.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 {
  position: absolute; left: var(--s-4); top: -100px; z-index: 90;
  background: var(--tinta); color: var(--texto-inv);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm);
}
.saltar:focus { top: var(--s-2); }

/* Botones ---------------------------------------------------------------- */

/* El botón primario es LIMA con tinta encima. Es la decisión más audaz de la
   piel y está donde debe estar: en lo único que se toca. Un botón lima sobre
   hueso no lo tiene ningún otro puesto de comida rápida de la ciudad. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 14px 26px;
  font: 700 var(--t-base)/1 var(--f-texto);
  border-radius: var(--r-pill);          /* la excepción del sistema */
  background: var(--accion); color: var(--sobre-accion);
  text-decoration: none;
  transition: background-color var(--d-2) var(--ease-color);
}
.btn--sec {
  background: transparent; color: var(--texto);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);            /* solo el de pedido es pastilla */
  font-weight: 600;
}
.seccion--oscura .btn--sec { color: var(--texto-inv); border-color: var(--hoja-400); }
.btn svg { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accion-hover); }
  .btn--sec:hover { background: transparent; border-color: var(--tinta); }
  .seccion--oscura .btn--sec:hover { border-color: var(--lima); }
}

.acciones { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* ═══════════════════════════════════════════════════════════════════════════
   2. ELEMENTO FIRMA · LA BARRA DE LA JORNADA
   ---------------------------------------------------------------------------
   Es un reloj, no una barra de progreso decorativa. Por eso:
     · nace en su posición (sin animación de entrada) — G1
     · el marcador se mueve en 600 ms LINEAR — G2 (el tiempo no acelera)
     · el color del relleno cambia en 420 ms --ease-color — G3
     · la frase entra con translateY + opacidad, 240 ms — G4
   Toda la información vive en el TEXTO. La pista es decorativa: el color
   nunca es el único indicador.

   PIEL VERDE: la escala de la pista pasó a verde (apertura → hoja-400,
   pico → lima honda, última → mango). El relleno cambia de color por estado:
   abierto = lima honda (el acento vivo), pico = el verde dueño, última orden
   = ámbar de alerta, cerrado = verde apagado. Los cinco estados siguen
   llevando su frase escrita: el color nunca es el único indicador.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La barra fija: reloj de jornada arriba, rótulo del local debajo.
   Un solo contenedor fijo para que no haya dos alturas que sincronizar. */
.barra-fija {
  position: fixed; inset-block-start: 0; inset-inline: 0;
  z-index: var(--z-jornada);
  box-shadow: var(--e3);
  padding-top: env(safe-area-inset-top);
  background: var(--nata);
}

.jornada {
  background: var(--nata);
  border-bottom: 1px solid var(--borde);
}

.jornada__caja {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: var(--s-2) var(--margen) var(--s-3);
  display: grid; gap: var(--s-2);
  grid-template-columns: 1fr auto;
  align-items: center;
}

.jornada__texto { grid-column: 1; min-width: 0; overflow: hidden; }

.jornada__hora {
  font-family: var(--f-datos); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-micro); text-transform: uppercase;
  color: var(--texto-2); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: var(--s-2);
}
/* El punto de estado lleva SIEMPRE un anillo en el verde dueño: así el
   contorno da 6.1:1 contra la nata aunque el relleno sea lima (1.2:1).
   Es la única forma honesta de usar lima como señal sobre fondo claro. */
.jornada__hora::before {
  content: ""; width: 9px; height: 9px; border-radius: var(--r-pill);
  background: var(--texto-2);
  box-shadow: 0 0 0 1.5px var(--hoja);
  transition: background-color var(--d-6) var(--ease-color);
}

.jornada__frase {
  font-size: var(--t-sm); font-weight: 600; line-height: var(--lh-sm);
  color: var(--texto); margin: 2px 0 0;
}
/* G4: el texto nuevo empuja al viejo desde abajo. Se usa animation y no
   transition porque el cambio es de contenido, no de estado del elemento. */
.jornada__frase--entra { animation: jornada-frase var(--d-4) var(--ease-salida); }
@keyframes jornada-frase {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.jornada__detalle {
  font-size: var(--t-micro); color: var(--texto-2); margin: 0;
  font-variant-numeric: tabular-nums;
}

.jornada__cta {
  grid-column: 2; grid-row: 1; align-self: center;
  min-height: var(--jornada-alto);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-4);
  font: 700 var(--t-cap)/1 var(--f-texto);
  color: var(--sobre-accion); background: var(--accion);
  border-radius: var(--r-pill); text-decoration: none; white-space: nowrap;
  transition: background-color var(--d-2) var(--ease-color),
              color var(--d-2) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) {
  .jornada__cta:hover { background: var(--accion-hover); }
}

/* --- la pista --- */

.jornada__pista {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; height: 10px; margin-top: var(--s-1);
  background: var(--crema); border-radius: var(--r-xs);
  overflow: hidden;
}

.jornada__tramo {
  position: absolute; inset-block: 0;
  left: calc(var(--a, 0) * 100%);
  width: calc((var(--b, 0) - var(--a, 0)) * 100%);
  border: 0; padding: 0; cursor: pointer;
  background: var(--hoja-400);
}
.jornada__tramo[data-tramo="pico"]   { background: var(--lima-honda); }
.jornada__tramo[data-tramo="ultima"] { background: var(--mango-400); }

.jornada__relleno {
  position: absolute; inset-block: 0; left: 0; width: 100%;
  transform-origin: left center;
  transform: scaleX(var(--progreso, 0));
  background: var(--lima-honda);
  mix-blend-mode: multiply;
  /* G2 linear + G3 el color con su propia curva. Nunca `transition: all`. */
  transition:
    transform var(--d-reloj) var(--ease-reloj),
    background-color var(--d-6) var(--ease-color);
}

/* El marcador es un riel del ancho completo que se desplaza por su propio
   ancho (translateX en %). Así se anima SOLO transform: nunca `left`, que
   dispararía layout en cada frame del reloj. La línea visible es el ::before
   pegado a su borde izquierdo. */
.jornada__marcador {
  position: absolute; inset-block: -2px; left: 0; width: 100%;
  pointer-events: none;
  transform: translateX(calc(var(--progreso, 0) * 100%));
  transition: transform var(--d-reloj) var(--ease-reloj);
}
.jornada__marcador::before {
  content: ""; position: absolute; inset-block: 0; left: -1px;
  width: 2px; background: var(--tinta);
}

/* --- estados de la barra --- */

.jornada[data-estado="abierto"] .jornada__hora::before,
.jornada[data-estado="pico"]    .jornada__hora::before { background: var(--lima); }
.jornada[data-estado="ultima"]  .jornada__hora::before { background: var(--ambar); }
.jornada[data-estado="cerrado"] .jornada__hora::before,
.jornada[data-estado="antes"]   .jornada__hora::before { background: var(--apagado); }

.jornada[data-estado="pico"]   .jornada__relleno { background: var(--hoja); }
.jornada[data-estado="ultima"] .jornada__relleno { background: var(--ambar); }
.jornada[data-estado="cerrado"] .jornada__relleno,
.jornada[data-estado="antes"]   .jornada__relleno { background: var(--apagado); }

/* Cuando el local cerró, el CTA deja de ser lima: la acción ya no es
   "pedir ahora". Verde apagado con texto hueso, 7.9:1. */
.jornada[data-estado="cerrado"] .jornada__cta,
.jornada[data-estado="antes"]   .jornada__cta {
  background: var(--apagado); color: var(--texto-inv);
}
.jornada[data-estado="ultima"] .jornada__cta {
  background: var(--ambar); color: var(--texto-inv);
}
@media (hover: hover) and (pointer: fine) {
  .jornada[data-estado="cerrado"] .jornada__cta:hover,
  .jornada[data-estado="antes"] .jornada__cta:hover { background: var(--hoja-700); }
  .jornada[data-estado="ultima"] .jornada__cta:hover { background: var(--mango); }
}

.jornada__leyenda {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-family: var(--f-datos); font-size: 11px; color: var(--texto-2);
  margin-top: 6px;
}
.jornada__leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.jornada__leyenda i {
  width: 10px; height: 10px; border-radius: var(--r-xs); display: block;
  box-shadow: 0 0 0 1px var(--linea);
}
.jornada__leyenda .lg-1 { background: var(--hoja-400); }
.jornada__leyenda .lg-2 { background: var(--lima-honda); }
.jornada__leyenda .lg-3 { background: var(--mango-400); }

/* En móvil la barra fija se aprieta: quitarle 40 px de alto a un teléfono de
   640 px es devolverle una sexta parte de la pantalla al contenido. Se van
   la leyenda y el detalle; la frase de estado, que es la información, se
   queda siempre. */
@media (max-width: 560px) {
  .jornada__leyenda { display: none; }
  .jornada__detalle { display: none; }
  .jornada__cta { padding: 0 var(--s-3); font-size: 12px; }
  .cabecera__caja { min-height: 50px; }
  .jornada__caja { padding-bottom: var(--s-2); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. ENCABEZADO
   ═══════════════════════════════════════════════════════════════════════════ */

.cabecera { background: var(--hoja); color: var(--texto-inv); }
.cabecera__caja {
  max-width: var(--ancho-max); margin-inline: auto;
  padding: 6px var(--margen);
  display: flex; align-items: center; gap: var(--s-4); min-height: 56px;
}
.marca-logo {
  color: var(--texto-inv); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 44px;
}
.marca-logo__svg { display: block; height: 28px; width: auto; }
.marca-logo b {
  font-family: var(--f-datos); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-micro); color: var(--hoja-200);
  border-left: 1px solid var(--linea-inv); padding-left: var(--s-3);
}
@media (max-width: 420px) { .marca-logo b { display: none; } }
.cabecera__nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-1); }
.cabecera__nav a {
  color: var(--hoja-200); text-decoration: none;
  font-size: var(--t-cap); font-weight: 500;
  padding: var(--s-3) var(--s-3); border-radius: var(--r-sm);
  min-height: 44px; display: inline-flex; align-items: center;
}
@media (hover: hover) and (pointer: fine) { .cabecera__nav a:hover { color: var(--nata); } }
@media (max-width: 720px) { .cabecera__nav a.oculta-movil { display: none; } }

.btn-pedido {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  background: var(--accion); color: var(--sobre-accion);
  border-radius: var(--r-pill); font: 700 var(--t-cap)/1 var(--f-texto);
  transition: background-color var(--d-2) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) { .btn-pedido:hover { background: var(--accion-hover); } }
.btn-pedido .lib-badge { background: var(--hoja-900); color: var(--lima); }

/* ═══════════════════════════════════════════════════════════════════════════
   4. HERO
   ═══════════════════════════════════════════════════════════════════════════ */

.hero { padding-block: var(--s-8) var(--s-7); position: relative; overflow: hidden; }
.hero__caja {
  max-width: var(--ancho-max); margin-inline: auto; padding-inline: var(--margen);
  display: grid; gap: var(--s-6);
}
@media (min-width: 900px) {
  .hero__caja { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; }
}

.hero__desde {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-datos); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-micro); text-transform: uppercase;
  color: var(--hoja);
  border: 1px solid var(--hoja); border-radius: var(--r-xs);
  padding: 6px var(--s-3);
}

.hero h1 { margin-top: var(--s-4); }
/* El resaltado lima es la firma cromática del hero: la frase del precio va
   subrayada como con marcatextos, en el acento vivo, con el verde dueño
   encima (5.5:1 sobre la lima, 6.1:1 sobre el hueso). */
.hero h1 em {
  font-style: normal; color: var(--hoja);
  background-image: linear-gradient(transparent 60%, var(--lima) 60%);
  padding-inline: 2px;
}

.hero__sub {
  font-size: var(--t-lg); line-height: var(--lh-lg); color: var(--texto-2);
  max-width: 46ch; margin-top: var(--s-4);
}

.hero__datos {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5);
  font-family: var(--f-datos); font-size: var(--t-cap);
  font-variant-numeric: tabular-nums; color: var(--texto-2);
}
.hero__datos b { color: var(--texto); font-weight: 600; }

#hero-estado {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--f-datos); font-size: var(--t-cap); font-weight: 500;
  padding: 6px var(--s-3); border-radius: var(--r-xs);
  background: var(--crema); color: var(--texto-2);
}
#hero-estado[data-abierto="true"] { color: var(--ok); }

/* La placa esmaltada del 69 — el signo gráfico de la marca. Aparece GRANDE
   una sola vez en toda la página: aquí, en el hero, que es también la puerta
   al bloque de ubicación. El dibujo vive en assets/img/placa-69.svg; aquí
   solo se le da sitio. */
.placa {
  display: grid; place-items: center;
  max-width: 380px; margin-inline: auto; width: 100%;
}
.placa img { width: 100%; height: auto; display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. MENÚ
   ---------------------------------------------------------------------------
   Los acentos frutales trabajan aquí y solo aquí: cada categoría tiene su
   color y la ficha lo repite en su filo izquierdo. Sirve para escanear una
   lista de 39 productos, no para decorar. El color nunca va solo: la
   categoría siempre está escrita en el chip.
   ═══════════════════════════════════════════════════════════════════════════ */

.menu__controles {
  position: sticky; top: var(--alto-fijo, 150px);
  z-index: var(--z-sticky-cat);
  background: var(--fondo); padding-block: var(--s-3);
  margin-top: var(--s-6);
  border-bottom: 1px solid var(--borde);
}

.buscador { position: relative; display: flex; gap: var(--s-2); align-items: center; }
.buscador input {
  flex: 1 1 auto; min-height: 48px;
  padding: 0 var(--s-4); border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm); background: var(--nata); color: var(--texto);
  font-size: var(--t-base);
  transition: border-color var(--d-2) var(--ease-color);
}
.buscador input::placeholder { color: var(--texto-2); }
.buscador input:focus-visible { border-color: var(--hoja); }
#menu-limpiar {
  min-height: 48px; padding: 0 var(--s-4);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-sm);
  font-size: var(--t-cap); font-weight: 600; color: var(--texto-2);
  background: var(--nata);
}

/* Los colores de categoría. Salen de lo que de verdad venden. */
.chip[data-cat="todo"],         .platillo[data-cat="todo"]         { --cat: var(--tinta); }
.chip[data-cat="baguettes"],    .platillo[data-cat="baguettes"]    { --cat: var(--hoja); }
.chip[data-cat="ensaladas"],    .platillo[data-cat="ensaladas"]    { --cat: var(--lima-honda); }
.chip[data-cat="complementos"], .platillo[data-cat="complementos"] { --cat: var(--mango); }
.chip[data-cat="bebidas"],      .platillo[data-cat="bebidas"]      { --cat: var(--betabel); }
.chip[data-cat="postres"],      .platillo[data-cat="postres"]      { --cat: var(--fresa); }
.chip[data-cat="combos"],       .platillo[data-cat="combos"]       { --cat: var(--hoja-700); }

.chips {
  position: relative; display: flex; gap: var(--s-2);
  overflow-x: auto; scrollbar-width: none;
  margin-top: var(--s-3); padding-bottom: var(--s-2);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: 40px; padding: 0 var(--s-4);
  border: 1px solid var(--borde); border-radius: var(--r-xs);
  background: var(--nata); color: var(--texto-2);
  font-size: var(--t-cap); font-weight: 600; white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--d-2) var(--ease-color), border-color var(--d-2) var(--ease-color);
}
.chip::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: var(--r-pill); background: var(--cat, var(--tinta));
}
.chip[aria-pressed="true"] { color: var(--texto); border-color: var(--cat, var(--tinta)); }
/* Es el MISMO indicador que se desliza, no dos que se cruzan (tabla #9). */
.chips__indicador {
  position: absolute; left: 0; bottom: 0; width: 1px; height: 2px;
  background: var(--hoja); transform-origin: left center;
  transform: translate3d(0, 0, 0) scaleX(0);
  transition: transform var(--d-4) var(--ease-entra-sale);
}

.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.tag {
  min-height: 36px; padding: 0 var(--s-3);
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-xs);
  font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: .02em;
  color: var(--texto-2); background: var(--nata);
  transition: background-color var(--d-2) var(--ease-color), color var(--d-2) var(--ease-color);
}
.tag[aria-pressed="true"] {
  background: var(--tinta); color: var(--texto-inv); border-style: solid; border-color: var(--tinta);
}

.menu__meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); margin-top: var(--s-5); flex-wrap: wrap;
}
#menu-conteo { font-family: var(--f-datos); font-size: var(--t-micro); color: var(--texto-2); letter-spacing: var(--tr-micro); text-transform: uppercase; }

.aviso-linea {
  display: flex; gap: var(--s-3); align-items: flex-start;
  background: var(--hoja-100); border-left: 3px solid var(--hoja);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-xs);
  font-size: var(--t-cap); color: var(--texto-2); margin-top: var(--s-4);
}
.aviso-linea strong { color: var(--texto); }

/* Lista y ficha de platillo -------------------------------------------- */

.menu-lista {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; gap: var(--s-4);
}
@media (min-width: 768px) { .menu-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Nunca 3 columnas: el precio deja de alinearse y el escaneo se rompe. */

.menu-lista--entra { animation: menu-entra 160ms var(--ease-salida); }
@keyframes menu-entra { from { opacity: 0; } to { opacity: 1; } }

.platillo {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4);
  padding: var(--s-4);
  background: var(--nata); border: 1px solid var(--borde);
  border-left: 4px solid var(--cat, var(--hoja));
  border-radius: var(--r-sm); box-shadow: var(--e1);
  transition: box-shadow var(--d-2) var(--ease-color), border-color var(--d-2) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) {
  .platillo:hover {
    box-shadow: var(--e2);
    border-color: var(--borde-fuerte);
    border-left-color: var(--cat, var(--hoja));
  }
}
.platillo__img {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--r-sm); background: var(--crema);
}
.platillo__cuerpo { min-width: 0; display: flex; flex-direction: column; }

.platillo__marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.marca {
  font-family: var(--f-datos); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--r-xs);
  background: var(--crema); color: var(--texto-2);
}
/* Distinción visual clave: lo que SÍ es de su carta contra lo que proponemos. */
.marca--carta { background: var(--hoja-200); color: var(--hoja-900); }
.marca--propuesta { background: var(--nata); color: var(--mango); border: 1px dashed var(--mango); }
.marca--top { background: var(--fresa); color: var(--texto-inv); }

.platillo__nombre { font-size: var(--t-lg); font-family: var(--f-texto); font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.platillo__carta { font-family: var(--f-datos); font-size: 11px; color: var(--texto-2); margin-top: 3px; }
.platillo__desc { font-size: var(--t-sm); color: var(--texto-2); margin-top: var(--s-2); }
.platillo__aviso {
  font-size: var(--t-micro); color: var(--mango); margin-top: var(--s-2);
  display: flex; gap: 6px;
}
.platillo__aviso::before { content: "·"; }

.platillo__pie {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.platillo__precio {
  font-family: var(--f-datos); font-size: var(--t-precio); font-weight: 600;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--texto);
}
.platillo__add {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4);
  background: var(--accion); color: var(--sobre-accion);
  border-radius: var(--r-pill); font: 700 var(--t-cap)/1 var(--f-texto);
  transition: background-color var(--d-2) var(--ease-color);
}
@media (hover: hover) and (pointer: fine) { .platillo__add:hover { background: var(--accion-hover); } }

#menu-vacio {
  background: var(--crema); border-radius: var(--r-sm);
  padding: var(--s-7) var(--s-5); text-align: center; margin-top: var(--s-5);
  color: var(--texto-2);
}

/* Selector de hora de recogida, dentro del cajón del pedido -------------- */

.recogida {
  border: 1px solid var(--borde); border-radius: var(--r-sm);
  padding: var(--s-4); margin: var(--s-3) 0;
  background: var(--crema);
}
.recogida__titulo { font-family: var(--f-texto); font-size: var(--t-base); font-weight: 700; }
.recogida__nota { font-size: var(--t-micro); color: var(--texto-2); margin-top: 4px; font-variant-numeric: tabular-nums; }
.recogida__opciones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-3); }
.recogida__op {
  min-height: 40px; padding: 0 var(--s-3);
  border: 1px solid var(--borde-fuerte); border-radius: var(--r-xs);
  background: var(--nata); color: var(--texto-2);
  font-family: var(--f-datos); font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  /* El color cambia al instante: el usuario compara muchas horas seguidas
     y animarlo volvería lenta la comparación (tabla #27). */
}
.recogida__op[aria-pressed="true"] {
  background: var(--hoja); color: var(--texto-inv); border-color: var(--hoja);
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. WAYFINDING · LOCAL 69
   ═══════════════════════════════════════════════════════════════════════════ */

.donde__grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .donde__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; } }

.mapa {
  background: var(--nata); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: var(--s-4); box-shadow: var(--e1);
}
.mapa svg { width: 100%; height: auto; }
.mapa__pie {
  font-family: var(--f-datos); font-size: var(--t-micro); color: var(--texto-2);
  margin-top: var(--s-3); letter-spacing: .02em;
}

.donde__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); }
.donde__lista li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); }
.donde__paso {
  font-family: var(--f-datos); font-size: var(--t-cap); font-weight: 600;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--hoja); color: var(--lima); border-radius: var(--r-xs);
}
.donde__lista strong { display: block; }
.donde__lista span { font-size: var(--t-sm); color: var(--texto-2); }

.pendiente {
  border: 1px dashed var(--borde-fuerte); border-radius: var(--r-sm);
  padding: var(--s-4); margin-top: var(--s-5);
  font-size: var(--t-cap); color: var(--texto-2); background: var(--nata);
}
.pendiente strong { color: var(--mango); display: block; margin-bottom: 4px; font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. PRUEBA SOCIAL HONESTA
   ═══════════════════════════════════════════════════════════════════════════ */

.social__grid { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 768px) { .social__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.senal {
  background: var(--nata); border: 1px solid var(--borde);
  border-radius: var(--r-sm); padding: var(--s-5); box-shadow: var(--e1);
}
.senal__num {
  font-family: var(--f-display); font-variation-settings: var(--var-h2);
  font-size: var(--t-2xl); letter-spacing: var(--tr-2xl);
  font-variant-numeric: tabular-nums; display: block;
}
.senal__que { font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--texto-2); }
.senal p { font-size: var(--t-sm); color: var(--texto-2); margin-top: var(--s-3); }

.estrellas { display: inline-flex; gap: 2px; vertical-align: middle; }
.estrellas svg { width: 18px; height: 18px; color: var(--mango); }

.operativo {
  background: var(--hoja-700); color: var(--texto-inv);
  border-radius: var(--r-sm); padding: var(--s-5); margin-top: var(--s-5);
}
.operativo dl { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
@media (min-width: 640px) { .operativo dl { grid-template-columns: repeat(3, 1fr); } }
.operativo dt { font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--hoja-200); }
.operativo dd { margin: 4px 0 0; font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   8. ANTES / DESPUÉS DE LA PRESENCIA DIGITAL
   ═══════════════════════════════════════════════════════════════════════════ */

.tabla-comp { width: 100%; margin-top: var(--s-6); border-collapse: collapse; }
.tabla-comp caption { text-align: left; font-size: var(--t-cap); color: var(--hoja-200); padding-bottom: var(--s-3); }
.tabla-comp th, .tabla-comp td { text-align: left; padding: var(--s-4) var(--s-3); border-bottom: 1px solid var(--linea-inv); vertical-align: top; }
.tabla-comp th { font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--hoja-200); font-weight: 500; }
.tabla-comp td { font-size: var(--t-sm); }
.tabla-comp .num { font-family: var(--f-datos); font-variant-numeric: tabular-nums; font-size: var(--t-precio); font-weight: 600; white-space: nowrap; }
/* La fila propia se hunde en verde profundo en vez de aclararse: así el
   texto pequeño gana contraste (8.5:1) en vez de perderlo. */
.tabla-comp tr[data-propio="true"] { background: var(--hoja-700); }
.tabla-comp tr[data-propio="true"] .num { color: var(--lima); }
.tabla-comp ul { list-style: none; padding: 0; margin: 0; font-size: var(--t-micro); color: var(--hoja-200); }
@media (max-width: 720px) {
  .tabla-comp thead { display: none; }
  .tabla-comp tr { display: grid; gap: 4px; padding-block: var(--s-3); border-bottom: 1px solid var(--linea-inv); }
  .tabla-comp td { border: 0; padding: 2px var(--s-3); }
}

.diag { display: grid; gap: var(--s-4); margin-top: var(--s-7); }
@media (min-width: 768px) { .diag { grid-template-columns: repeat(3, 1fr); } }
.diag__item {
  border: 1px solid var(--linea-inv); border-radius: var(--r-sm);
  padding: var(--s-5);
}
.diag__item h3 { font-size: var(--t-xl); font-variation-settings: var(--var-h4); letter-spacing: var(--tr-xl); }
.diag__item p { font-size: var(--t-sm); color: var(--hoja-200); margin-top: var(--s-3); }
.diag__item code {
  font-family: var(--f-datos); font-size: var(--t-micro);
  background: var(--hoja-900); padding: 2px 6px; border-radius: var(--r-xs);
  color: var(--lima);
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. HISTORIA
   ═══════════════════════════════════════════════════════════════════════════ */

.linea { list-style: none; padding: 0; margin: var(--s-7) 0 0; position: relative; }
.linea::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px;
  background: var(--linea);
}
.linea li { position: relative; padding-left: var(--s-6); padding-bottom: var(--s-6); }
.linea li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: var(--r-pill);
  background: var(--nata); border: 3px solid var(--hoja);
}
/* El último hito —el que todavía no pasa— se rellena de lima: es lo único
   que la marca está proponiendo hacia adelante. */
.linea li:last-child::before { background: var(--lima); border-color: var(--hoja); }
.linea__anio {
  font-family: var(--f-datos); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--hoja);
}
.linea h3 { font-size: var(--t-xl); font-variation-settings: var(--var-h4); letter-spacing: var(--tr-xl); margin-top: 4px; }
.linea p { font-size: var(--t-sm); color: var(--texto-2); margin-top: var(--s-2); max-width: var(--ancho-lectura); }

/* ═══════════════════════════════════════════════════════════════════════════
   10. CIERRE Y PIE
   ═══════════════════════════════════════════════════════════════════════════ */

.cierre { background: var(--hoja-900); color: var(--texto-inv); }
.cierre .entradilla { color: var(--hoja-200); }
.cierre .rotulo { color: var(--hoja-200); }
.cierre .btn--sec { color: var(--texto-inv); border-color: var(--hoja-400); }
@media (hover: hover) and (pointer: fine) {
  .cierre .btn--sec:hover { border-color: var(--lima); }
}

.pie { background: var(--hoja-900); color: var(--hoja-200); border-top: 1px solid var(--linea-inv-suave); }
.pie__grid { display: grid; gap: var(--s-6); padding-block: var(--s-7); }
@media (min-width: 768px) { .pie__grid { grid-template-columns: repeat(3, 1fr); } }
.pie h2, .pie h3 { color: var(--texto-inv); font-size: var(--t-xl); font-variation-settings: var(--var-h4); letter-spacing: var(--tr-xl); }
.pie__marca { display: flex; align-items: center; gap: var(--s-3); }
.pie__sello { width: 46px; height: 46px; display: block; flex: 0 0 auto; }
.pie address { font-style: normal; font-size: var(--t-sm); margin-top: var(--s-3); line-height: var(--lh-lg); }
.pie a { color: var(--lima); }
.pie dl { margin-top: var(--s-3); font-size: var(--t-sm); }
.pie dt { font-family: var(--f-datos); font-size: var(--t-micro); letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--hoja-400); margin-top: var(--s-3); }
.pie dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.pie__legal {
  border-top: 1px solid var(--linea-inv-suave);
  padding-block: var(--s-4);
  font-size: var(--t-micro); color: var(--hoja-200);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); justify-content: space-between;
}

/* Bloque de datos estructurados a la vista: es parte del argumento SEO.
   El dueño tiene que VER lo que Google va a leer. */
.schema-visible {
  margin-top: var(--s-6);
  border: 1px solid var(--linea-inv); border-radius: var(--r-sm);
  background: var(--hoja-700);
}
.schema-visible summary {
  cursor: pointer; padding: var(--s-4);
  font-family: var(--f-datos); font-size: var(--t-micro);
  letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--hoja-200);
  min-height: 44px; display: flex; align-items: center;
}
.schema-visible pre {
  margin: 0; padding: 0 var(--s-4) var(--s-4);
  overflow-x: auto; font-family: var(--f-datos); font-size: 11px;
  line-height: 1.55; color: var(--hoja-200); white-space: pre;
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. AJUSTES A LOS COMPONENTES DE lib/
   No se edita lib/. Se ajusta desde aquí, que es donde vive el estilo.
   Con el acento en lima hubo que corregir dos sitios de la librería a mano:
   los bordes de foco (lima sobre nata da 1.2:1) y el icono del toast info.
   ═══════════════════════════════════════════════════════════════════════════ */

.lib-drawer { border-top-left-radius: var(--r-md); }
.lib-drawer__titulo { font-family: var(--f-display); font-variation-settings: var(--var-h4); letter-spacing: var(--tr-xl); }
.lib-cart-cta { border-radius: var(--r-pill) !important; font-family: var(--f-texto); }
.lib-cart-item__total, .lib-cart-total span:last-child, .lib-cart-linea b { font-family: var(--f-datos); }
.lib-cart-item__nota:focus { border-color: var(--hoja); }
.lib-propina[aria-checked="true"] {
  background: var(--hoja); border-color: var(--hoja); color: var(--texto-inv);
}
.lib-toast { border-radius: var(--r-sm); }
.lib-toast[data-tipo="info"] .lib-toast__icono { color: var(--hoja); }