/* ==========================================================================
   Pulpería 9 Rabos — tokens
   "Atardecer en el muelle": negro, el oro real del truck, y el blanco y azul
   de Galicia como acento identitario. Apartado 3 del brief.
   ========================================================================== */

:root {
  /* --- Color: fondos ------------------------------------------------ */
  --negro:          #0B0B0C;
  --negro-humo:     #141416;
  --negro-puro:     #000000;

  /* --- Color: marca. Muestreados de las fotos reales ----------------- */
  --oro:            #DFAA2F;   /* el galón de la chaquetilla de Iñaki */
  --oro-claro:      #E8B439;
  --oro-profundo:   #C29005;   /* el "9" del rótulo */

  /* --- Color: Galicia ------------------------------------------------ */
  --azul-atlantico: #0B5FA5;   /* SOLO sobre --blanco-cal: 1.9:1 en negro */
  --azul-hondo:     #073C6B;
  --azul-luz:       #4A9BE0;   /* la versión que sí se lee en negro: 6.6:1 */
  --blanco-cal:     #F5F3EE;

  /* --- Color: texto -------------------------------------------------- */
  --hueso:          #F2EFE7;   /* 16.8:1 sobre --negro */
  --gris-marea:     #9A948A;   /*  6.5:1 sobre --negro — texto secundario */
  --gris-apagado:   #57524B;   /*  2.5:1 — SOLO bordes y adornos, nunca texto */

  /* --- Materiales: la pizarra y la madera de la carta ------------------ */
  /* No son colores de marca, son texturas. Van aparte para que nadie los
     confunda con la paleta ni los use como color de interfaz. */
  --pizarra-alto:  #1B1C1A;
  --pizarra-medio: #161715;
  --pizarra-bajo:  #101110;
  --pizarra-banda: #131413;
  --carta-alto:    #121316;
  --carta-medio:   #0E0F11;

  /* --- Color: derivados ---------------------------------------------- */
  --borde:          rgba(223, 170, 47, 0.18);
  --borde-fuerte:   rgba(223, 170, 47, 0.38);
  --oro-velo:       rgba(223, 170, 47, 0.08);
  --negro-velo:     rgba(11, 11, 12, 0.72);

  /* --- Tipografía ----------------------------------------------------- */
  --fuente-titular: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --fuente-plato:   "Fraunces", Georgia, "Times New Roman", serif;
  --fuente-cuerpo:  "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida. El titular del hero va de 2.5rem @390px a 6.5rem @1440px. */
  --t-hero:    clamp(2.5rem, 1.014rem + 6.095vw, 6.5rem);
  --t-h2:      clamp(2rem, 1.257rem + 3.048vw, 4rem);
  --t-h3:      clamp(1.375rem, 1.143rem + 0.952vw, 2rem);
  --t-plato:   clamp(1.25rem, 1.111rem + 0.571vw, 1.625rem);
  --t-precio:  clamp(1.5rem, 1.222rem + 1.143vw, 2.25rem);
  --t-lead:    clamp(1.125rem, 1.032rem + 0.381vw, 1.375rem);
  --t-cuerpo:  clamp(1rem, 0.954rem + 0.190vw, 1.125rem);
  --t-pequeno: 0.9375rem;
  --t-micro:   0.8125rem;

  --peso-titular: 600;
  --peso-fuerte:  700;
  --alto-titular: 0.96;
  --alto-cuerpo:  1.65;
  --track-acto:   0.28em;   /* los rótulos de acto van muy abiertos */
  --track-titular: 0.005em;

  /* --- Espaciado: rejilla de 8 px ------------------------------------- */
  --e1: 8px;   --e2: 16px;  --e3: 24px;  --e4: 32px;
  --e5: 40px;  --e6: 48px;  --e8: 64px;  --e10: 80px;
  --e12: 96px; --e16: 128px;

  --hueco-seccion: clamp(80px, 12vw, 160px);
  --hueco-acto:    clamp(120px, 18vw, 220px);
  --ancho-max:     1280px;
  --ancho-texto:   64ch;
  --margen:        clamp(20px, 5vw, 40px);

  /* --- Forma ---------------------------------------------------------- */
  --radio:       3px;
  --radio-pildora: 999px;
  --linea:       1px solid var(--borde);

  /* --- Movimiento ------------------------------------------------------ */
  --dur-corta:  180ms;
  --dur-media:  350ms;
  --dur-larga:  500ms;
  --dur-salida: 175ms;              /* las salidas, a la mitad */
  --sal-entra:  cubic-bezier(0.16, 1, 0.3, 1);      /* power2/3.out */
  --sal-sale:   cubic-bezier(0.65, 0, 0.35, 1);     /* power2.inOut */

  /* --- Capas ------------------------------------------------------------ */
  --z-fondo: 0;
  --z-contenido: 1;
  --z-cabecera: 50;
  --z-pizarra: 100;
}

/* El bloque de prefers-reduced-motion que ponia todas las duraciones a 1ms se
   quito a proposito: apagaba tambien los cambios de color y el foco, que no
   marean a nadie y ayudan a entender la interfaz. Lo que se anula ahora es el
   MOVIMIENTO, y eso se hace en base.css. */