/* Paleta medida del menú impreso: rojo #c41d30, negro cálido #231f20, blanco.
   Proporción: blanco ~60 · negro ~30 · rojo ~10 (solo precio, acciones y acentos). */
:root {
  --rojo: #c41d30;
  --rojo-hondo: #9e1626;
  --negro: #231f20;
  --blanco: #ffffff;
  --niebla: #f5f2f1;     /* blanco con un toque del negro cálido, para alternar secciones */
  --gris: #6a6264;       /* 5.6:1 sobre blanco */
  --linea: #e4dedd;

  --titulos: "Roboto Slab", Rockwell, Georgia, serif;   /* hermana de la tipografía del logo */
  --texto: "Exo 2", "Segoe UI", system-ui, sans-serif;   /* la del menú */
  --radio: 18px;
  --sombra: 0 18px 40px rgba(35, 31, 32, .22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; font-family: var(--texto); font-size: 1.0625rem; color: var(--negro); background: var(--blanco); line-height: 1.55; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.05; }
h1, h2 { font-family: var(--titulos); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
.seccion--oscura :focus-visible, .carrito__cab :focus-visible { outline-color: var(--blanco); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}