/* Taquería El Anafre: la noche y la brasa. Condensado enorme, casi negro, una marquesina de cortes. */
@font-face { font-family: 'Big Shoulders Display'; src: url('../_shared/fonts/big-shoulders-display-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Schibsted Grotesk'; src: url('../_shared/fonts/schibsted-grotesk-latin-wght-normal.woff2') format('woff2-variations'); font-weight: 400 900; font-style: normal; font-display: swap; }

:root {
  --bg: #0c0a08;
  --fg: #f5ece0;
  --muted: #b6a89a;
  --line: rgba(245, 236, 224, 0.14);
  --surface: #1a1411;
  --accent: #ff5a2e;
  --accent-fg: #180d07;
  --glow: #ffb238;
  --wa: #25a35a;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius: 8px;
  --radius-lg: 4px;
  --btn-radius: 8px;
  --item-ratio: 4 / 3;
  --split-ratio: 4 / 5;
}

h1, h2, h3, .brand, .price, .facts-strip strong, .table caption, .status, .zones strong { text-transform: uppercase; }
.price { color: var(--accent); }
.ledger .price { color: var(--accent); font-size: var(--step-1); }

/* Cabecera: marca angosta sobre fondo casi negro con desenfoque. */
.site-header { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.brand { font-size: 1.8rem; }
.brand-mark { border-radius: var(--radius); }
.nav-panel a:not(.btn) { text-transform: uppercase; }

/* Sin JavaScript el botón hamburguesa no abre nada: esta lista queda visible como alternativa. */
.nav-noscript { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding: 0.9rem var(--gutter) 1.1rem; border-top: 1px solid var(--line); background: var(--bg); }
.nav-noscript a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-soft); text-decoration: none; text-transform: uppercase; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; }
@media (min-width: 900px) { .nav-noscript { display: none; } }

/* Hero: la brasa de fondo, el titular al piso. */
.hero-full { min-height: min(94svh, 60rem); }
.hero-full::before { background: linear-gradient(to top, rgba(12, 10, 8, 0.94), rgba(12, 10, 8, 0.5) 48%, rgba(12, 10, 8, 0.12)); }
.hero-full h1 { font-size: clamp(3.4rem, 1.4rem + 9.5vw, 9.5rem); max-width: 15ch; line-height: 0.88; }
.hero-full h1 span { color: var(--accent); }
.hero-full .lead { max-width: 34rem; }

/* Estado del horario: un punto que cambia de color según la hora del navegador. */
.status { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.55rem 1.1rem 0.55rem 0.9rem; border-radius: 999px; background: rgba(245, 236, 224, 0.1); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.92); }
.status::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 999px; background: var(--muted); flex: none; }
.status[data-open='true']::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }

/* Marquesina: la firma del sitio. Los cortes de la noche cruzan la pantalla como el rótulo de la taquería. */
.marquee-block { border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 4vw, 2.5rem); background: var(--bg); }
.marquee-track { align-items: baseline; }
.marquee-track .cut { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 4.5vw, 4.5rem); line-height: 1; letter-spacing: -0.01em; color: var(--fg); }
.marquee-track .cut.is-ember { color: var(--accent); text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 55%, transparent), 0 0 42px color-mix(in srgb, var(--accent) 35%, transparent); }
.marquee-track .flame { width: 1rem; height: 1rem; flex: none; color: var(--muted); opacity: 0.6; }

/* Franja de datos: tres hechos, sin fondo de color, con hairlines. */
.facts-strip { background: var(--surface); border-color: var(--line); }
.facts-strip strong { color: var(--accent); }
.facts-strip span { color: var(--muted); }

/* Nota del menú: una sola foto junto al encabezado de la carta, no una rejilla. */
.menu-note { display: flex; gap: 1.25rem; align-items: center; margin-bottom: clamp(2rem, 5vw, 3rem); }
.menu-note img { width: 7.5rem; height: 7.5rem; object-fit: cover; border-radius: var(--radius); flex: none; }
.menu-note h3 { font-size: var(--step-1); }
.menu-note p { margin-top: 0.35rem; color: var(--fg-soft); font-size: var(--step--1); max-width: 32rem; }
@media (min-width: 640px) { .menu-note img { width: 9rem; height: 9rem; } }

/* Carta como ledger impreso: nombre, descripción y precio, sin fotos ni tarjetas. */
.ledger h3 { font-size: var(--step-1); text-transform: none; }
.ledger li { align-items: baseline; }

/* Pasos para pedir: reutiliza .reasons con el numeral como folio. */
.steps .num { font-size: var(--step-3); }

/* Zonas de entrega: tabla real, hairlines por fila. */
.table caption { color: var(--fg); }
.table .note { margin-top: 1.25rem; color: var(--muted); font-size: var(--step--1); }

/* Nosotros */
.split h2 { font-size: var(--step-4); }

/* Banda con cita: el carbón al fondo. */
.band::before { background: linear-gradient(to top, rgba(12, 10, 8, 0.88), rgba(12, 10, 8, 0.4) 55%, rgba(12, 10, 8, 0.1)); }
.band blockquote p { font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem); }

/* Preguntas */
.faq summary::after { color: var(--accent); }

/* Botones y enlaces */
.btn-ghost { border-color: rgba(245, 236, 224, 0.3); }
.hero-full .btn-ghost { color: #fff; }
.item-link:hover, .contact .links a:hover { text-decoration-color: var(--accent); }

/* Barra fija de pedido en móvil */
.sticky-cta { background: var(--bg); border-color: var(--line); }