/* ---------- Tokens ----------
   A Lareira no facilitó logo propio (no hay web previa ni logo accesible
   por Instagram, que bloquea el scraping — ver README). La paleta sale de
   la propia idea de marca elegida para el sitio ("brasas nocturnas"): un
   carbón casi negro como color de reposo de TODA la página (no solo el
   hero) y tonos de brasa/rescoldo como acento — deliberadamente distinta
   de las cremas casi idénticas de Melao/A Taberna do Rio/O Logradouro y
   del negro+dorado de O Carballo. A diferencia de Melao v2 (que también
   vive mayormente en tono oscuro), aquí NO hay mecánica de día/noche en
   ningún momento — el tono oscuro es simplemente el "punto de brasa" del
   sitio, constante, con la sección de bodega como único contraste en papel
   cálido (ver .bodega). */
:root {
  --brasa: #17120F;
  --brasa-2: #201812;
  --brasa-3: #2A2019;
  --rescoldo: #7A1F12;
  --rescoldo-hondo: #4E140C;
  --ascua: #E85D2B;
  --ascua-tenue: #F0885A;
  --llama: #F7A339;
  --humo: #E7E1D8;
  --humo-tenue: #B7ACA0;
  --humo-mas-tenue: #7C7169;
  --ceniza: #3A322C;
  --papel: #F1E9D8;
  --papel-2: #E6DAC0;
  --tinta-papel: #241A10;

  --linea: color-mix(in srgb, var(--humo) 14%, transparent);
  --linea-suave: color-mix(in srgb, var(--humo) 8%, transparent);

  --display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 4.5rem;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--brasa);
  color: var(--humo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; background: none; border: none; padding: 0; color: inherit; cursor: pointer; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ascua);
  color: var(--brasa);
  padding: 0.6rem 1rem;
  border-radius: 0.4rem;
  font-weight: 700;
  transition: top 0.2s ease;
  z-index: 300;
}
.skip-link:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--ascua); outline-offset: 3px; }

/* Grano muy sutil de humo */
.grain {
  position: fixed; inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.section-block { padding: clamp(4.5rem, 10vw, 8rem) 1.5rem; position: relative; }
.section-inner { max-width: 74rem; margin: 0 auto; position: relative; z-index: 2; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ascua);
  margin: 0 0 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--ascua);
  box-shadow: 0 0 0.5rem var(--ascua);
  flex-shrink: 0;
}

h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--humo);
}
h2 em { font-style: normal; color: var(--ascua); }

/* ---------- Split word reveal ---------- */
.split-wrap { display: inline; }
.split-word {
  display: inline-block;
  overflow: hidden;
  padding: 0.12em 0;
  margin: -0.12em 0;
}
.split-word > span { display: inline-block; will-change: transform; }

/* ---------- Header: cabecera "parrilla" ----------
   En vez de una barra con pill/rail lateral (Melao/A Taberna do Rio) o una
   superposición a pantalla completa (O Carballo/Melao v2), la cabecera se
   dibuja como las barras horizontales de una parrilla: los enlaces de
   sección son "varillas" y un punto de brasa (.grate-ember) se desliza
   entre ellas para marcar la sección activa — hace de indicador de
   navegación y de progreso de lectura a la vez, sin una barra de progreso
   aparte. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--brasa) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea-suave);
}
.header-inner {
  max-width: 78rem;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--humo);
  margin-right: auto;
}
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; }
.brand em { font-style: normal; color: var(--ascua); }

.grate-nav {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
}
.grate-nav ul { display: flex; align-items: stretch; height: 100%; }
.grate-nav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--humo-tenue);
  border-top: 3px solid transparent;
  transition: color 0.2s ease;
}
.grate-nav a::after {
  content: "";
  position: absolute;
  left: 0.9rem; right: 0.9rem; top: 0;
  height: 3px;
  background: transparent;
}
.grate-nav a:hover, .grate-nav a:focus-visible { color: var(--humo); }
.grate-nav a.is-active { color: var(--ascua-tenue); }
.grate-ember {
  position: absolute;
  top: -1px; left: 0;
  width: 2.2rem; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--ascua), var(--llama), var(--ascua), transparent);
  box-shadow: 0 0 10px 1px var(--ascua);
  opacity: 0;
  transition: left 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
  pointer-events: none;
}
.grate-ember.is-visible { opacity: 1; }

.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.05rem;
  border-radius: 100px;
  background: var(--ascua);
  color: var(--brasa);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nav-call:hover, .nav-call:focus-visible { background: var(--llama); transform: translateY(-1px); }
.nav-call iconify-icon { font-size: 1.1rem; }

.nav-toggle {
  display: none;
  font-size: 1.4rem;
  position: relative;
  width: 2.2rem; height: 2.2rem;
  align-items: center; justify-content: center;
  color: var(--humo);
  border-radius: 50%;
  border: 1px solid var(--linea);
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline; }

.quick-panel {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 99;
  background: var(--brasa-2);
  border-bottom: 1px solid var(--linea);
  padding: 0.5rem 1.25rem 1.25rem;
}
.quick-panel[hidden] { display: none; }
.quick-panel ul { display: flex; flex-direction: column; }
.quick-panel a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.25rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--humo);
  border-top: 1px solid var(--linea-suave);
}
.quick-panel li:first-child a { border-top: none; }
.quick-panel a span.q-dot { color: var(--ascua); font-size: 0.7rem; }
.quick-panel-call {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ascua-tenue);
  font-weight: 700;
}

@media (max-width: 880px) {
  .grate-nav, .nav-call { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ---------- Grill gauge: indicador fijo de progreso ----------
   Sustituye al contador de kilómetros/reloj de otras familias: aquí no hay
   dato real que mostrar en vivo (no tenemos el horario semanal completo
   del negocio — ver README), así que en vez de inventar un dato se usa un
   indicador puramente decorativo de progreso de lectura con la metáfora
   de la propia brasa encendiéndose a medida que se avanza por la página.
   Marcado aria-hidden: no transmite información, es ambientación. */
.grill-gauge {
  position: fixed;
  left: 1.4rem; bottom: 1.4rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 2.6rem;
  padding: 0.6rem 0.4rem;
  border-radius: 100px;
  background: color-mix(in srgb, var(--brasa-2) 92%, transparent);
  border: 1px solid var(--linea);
}
.grill-gauge-track {
  position: relative;
  width: 0.35rem;
  height: 6rem;
  border-radius: 100px;
  background: var(--ceniza);
  overflow: hidden;
}
.grill-gauge-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0%;
  border-radius: 100px;
  background: linear-gradient(0deg, var(--rescoldo), var(--ascua) 55%, var(--llama));
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--ascua) 60%, transparent);
}
.grill-gauge-icon { font-size: 1rem; color: var(--ascua); }
@media (max-width: 640px) {
  .grill-gauge { left: 0.85rem; bottom: 5.5rem; width: 2.2rem; padding: 0.5rem 0.3rem; }
  .grill-gauge-track { height: 4.4rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.9rem 1.7rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn span { position: relative; }
.btn-primary {
  background: var(--ascua);
  color: var(--brasa);
  box-shadow: 0 14px 30px -16px color-mix(in srgb, var(--ascua) 70%, transparent);
}
.btn-primary:hover, .btn-primary:focus-visible { background: var(--llama); }
.btn-ghost {
  background: transparent;
  color: var(--humo);
  border: 1.5px solid color-mix(in srgb, var(--humo) 28%, transparent);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--ascua-tenue); color: var(--ascua-tenue); }
.bodega .btn-ghost { color: var(--tinta-papel); border-color: color-mix(in srgb, var(--tinta-papel) 28%, transparent); }
.bodega .btn-ghost:hover, .bodega .btn-ghost:focus-visible { border-color: var(--rescoldo); color: var(--rescoldo); }

/* ---------- Hero ----------
   Escena de brasas encendidas a sangre completa (canvas 2D, ver
   js/scene-brasas.js): partículas de ascua que nacen en un lecho de brasa
   al pie del encuadre, ascienden con turbulencia y se apagan de blanco-
   candente a rojo a ceniza. Ninguna familia hermana usa esta técnica:
   Melao usa un shader de blobs, A Taberna do Rio/O Logradouro usan iconos
   de platos orbitando, Marabú usa partículas ambiente *de fondo* tras una
   foto, O Carballo usa un sendero de señalización. Aquí el fuego mismo es
   el sujeto del hero, no un fondo ambiental. */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 100%, color-mix(in srgb, var(--rescoldo) 45%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--brasa) 0%, #0E0A08 100%);
}
.hero-scene-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero.is-animated .hero-scene-canvas { opacity: 1; }
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--brasa) 2%, color-mix(in srgb, var(--brasa) 35%, transparent) 34%, transparent 64%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 78rem;
  margin: 0 auto;
  width: 100%;
  padding: 3rem 1.5rem 4.5rem;
}
.hero-content { max-width: 42rem; }

.hero-eyebrow {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ascua-tenue);
  margin-bottom: 1.3rem;
}
.hero-title {
  font-family: var(--display);
  font-size: clamp(2.9rem, 7vw, 5.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--humo);
}
.hero-title em { font-style: normal; color: var(--ascua); }
.hero-claim {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  line-height: 1.6;
  color: var(--humo-tenue);
  max-width: 34rem;
  margin-top: 1.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.3rem; }
.hero-actions .btn-ghost { border-color: color-mix(in srgb, var(--humo) 32%, transparent); }
.hero-actions .btn-ghost:hover, .hero-actions .btn-ghost:focus-visible { border-color: var(--ascua-tenue); color: var(--ascua-tenue); }

.hero-meta {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--humo);
  background: color-mix(in srgb, var(--humo) 8%, transparent);
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 0.5rem 1rem;
}
.hero-chip iconify-icon { font-size: 1.05rem; color: var(--ascua); }
.hero-chip strong { font-weight: 800; }

.scroll-cue {
  position: absolute;
  left: 1.5rem; bottom: 1.75rem;
  z-index: 2;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--humo) 28%, transparent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--humo);
  animation: bob 2.4s ease-in-out infinite;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.scroll-cue:hover, .scroll-cue:focus-visible {
  border-color: var(--ascua-tenue);
  color: var(--ascua-tenue);
  background: color-mix(in srgb, var(--ascua) 12%, transparent);
}
@keyframes bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, 6px); } }
.motion-reduced .scroll-cue { animation: none; }

@media (max-width: 900px) {
  .hero { min-height: 96vh; }
}

/* ---------- Ghost watermark ---------- */
.ghost-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(6rem, 24vw, 18rem);
  color: var(--humo);
  opacity: 0.035;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
  letter-spacing: -0.02em;
}
.bodega .ghost-word { color: var(--tinta-papel); opacity: 0.045; }

/* ---------- El fuego: manifiesto + ambientes ---------- */
.fuego { background: var(--brasa); overflow: hidden; }
.fuego-lead { margin-top: 1.25rem; max-width: 40rem; color: var(--humo-tenue); font-size: 1.05rem; line-height: 1.65; }

.ambientes-strip {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ambiente-card {
  position: relative;
  padding: 2rem 1.6rem;
  border-radius: 1.1rem;
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  transform-style: preserve-3d;
  will-change: transform;
  overflow: hidden;
}
.ambiente-card::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ascua) 28%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.ambiente-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ascua) 16%, transparent);
  color: var(--ascua);
  font-size: 1.5rem;
}
.ambiente-card h3 { margin-top: 1.2rem; font-family: var(--display); font-size: 1.25rem; font-weight: 700; }
.ambiente-card p { margin-top: 0.6rem; color: var(--humo-tenue); font-size: 0.9rem; line-height: 1.55; }

@media (max-width: 820px) {
  .ambientes-strip { grid-template-columns: 1fr; }
}

/* ---------- La comanda: carril de comandas colgadas ----------
   La carta se presenta como un carril metálico del que cuelgan las
   "comandas" (tickets de cocina) por categoría — cada comanda agrupa
   varios platos con precio en fuente mono, sujeta por una pinza arriba.
   Deliberadamente distinto de: la rejilla de fotos de Melao, la hoja de
   precios impresa de A Taberna do Rio, el foco+índice sin precios de
   O Logradouro, y las tarjetas-sello individuales de O Carballo (una por
   plato, con sello circular) — aquí cada tarjeta agrupa una categoría
   entera y cuelga de un hilo, no lleva sello de precio por tarjeta. */
.comanda { background: var(--brasa); overflow: hidden; }
.comanda-lead { margin-top: 1.25rem; max-width: 42rem; color: var(--humo-tenue); font-size: 1.02rem; line-height: 1.6; }

.ticket-rail-wrap {
  position: relative;
  margin-top: 4rem;
}
.ticket-wire {
  position: absolute;
  left: 0; right: 0; top: 1.1rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ceniza) 4%, var(--ceniza) 96%, transparent);
}
.ticket-rail-wrap::before,
.ticket-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0; bottom: 1.9rem;
  width: clamp(1.25rem, 6vw, 4rem);
  z-index: 3;
  pointer-events: none;
}
.ticket-rail-wrap::before { left: 0; background: linear-gradient(90deg, var(--brasa), transparent); }
.ticket-rail-wrap::after { right: 0; background: linear-gradient(-90deg, var(--brasa), transparent); }

.ticket-rail {
  position: relative;
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  padding: 0 clamp(1.25rem, 6vw, 4rem) 1.75rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ascua) transparent;
}
.ticket-rail::-webkit-scrollbar { height: 6px; }
.ticket-rail::-webkit-scrollbar-track { background: transparent; }
.ticket-rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--rescoldo), var(--ascua));
  border-radius: 100px;
}
.ticket-rail::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, var(--ascua), var(--llama)); }
.ticket-chit {
  position: relative;
  flex: 0 0 auto;
  width: min(86vw, 21rem);
  margin-top: 2.2rem;
  background: var(--papel);
  color: var(--tinta-papel);
  border-radius: 0.4rem;
  padding: 1.6rem 1.5rem 1.75rem;
  box-shadow: 0 24px 44px -22px rgba(0,0,0,0.55);
  scroll-snap-align: start;
  transform-style: preserve-3d;
  will-change: transform;
}
.ticket-chit:nth-child(odd) { transform: rotate(-1.1deg); }
.ticket-chit:nth-child(even) { transform: rotate(0.9deg); }
.ticket-chit::before {
  content: "";
  position: absolute;
  left: 50%; top: -1.3rem;
  transform: translateX(-50%);
  width: 0.9rem; height: 1.3rem;
  background: var(--ceniza);
  border-radius: 2px;
  box-shadow: 0 0.35rem 0 -0.1rem var(--brasa-2);
}
.ticket-chit::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.45rem;
  height: 0.9rem;
  background: repeating-linear-gradient(90deg, var(--brasa) 0 0.5rem, transparent 0.5rem 1rem);
  background-size: 1rem 100%;
  -webkit-mask: radial-gradient(circle at 0.25rem 0, transparent 0.25rem, black 0.26rem);
  mask: radial-gradient(circle at 0.25rem 0, transparent 0.25rem, black 0.26rem);
}
.ticket-chit-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--tinta-papel) 28%, transparent);
  padding-bottom: 0.75rem;
  margin-bottom: 0.9rem;
}
.ticket-chit-head h3 {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ticket-chit-head span {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: color-mix(in srgb, var(--tinta-papel) 55%, transparent);
}
.ticket-chit ul { display: flex; flex-direction: column; gap: 0.55rem; }
.ticket-chit li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.92rem;
}
.ticket-chit li .dish {
  flex: 0 0 auto;
}
.ticket-chit li .dish small {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--tinta-papel) 55%, transparent);
  margin-top: 0.1rem;
  line-height: 1.4;
}
.ticket-chit li .leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--tinta-papel) 35%, transparent);
  transform: translateY(-0.3rem);
  min-width: 0.5rem;
}
.ticket-chit li .price {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
}
.ticket-chit li .price small { font-family: var(--sans); font-weight: 500; font-size: 0.68rem; }
.ticket-chit-foot {
  margin-top: 1.1rem;
  padding-top: 0.85rem;
  border-top: 1px dashed color-mix(in srgb, var(--tinta-papel) 28%, transparent);
  font-size: 0.76rem;
  color: color-mix(in srgb, var(--tinta-papel) 62%, transparent);
  font-style: italic;
}

.comanda-note {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--humo-tenue);
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  border-radius: 100px;
  padding: 0.5rem 1.1rem;
}
.comanda-note iconify-icon { font-size: 1.05rem; color: var(--ascua); }

@media (max-width: 480px) {
  .ticket-chit { padding: 1.3rem 1.2rem 1.5rem; }
}

/* ---------- La bodega: única sección en tono papel ----------
   Contraste deliberado dentro de un sitio mayormente oscuro: la bodega se
   lee como el propio listado de vinos impreso en papel cálido, agrupado
   por familia con un borde de color por categoría. Ninguna web hermana
   tiene sección de bodega — es contenido nuevo, no una variación de carta. */
.bodega { background: var(--papel); color: var(--tinta-papel); overflow: hidden; }
.bodega .eyebrow { color: var(--rescoldo); }
.bodega .eyebrow::before { background: var(--rescoldo); box-shadow: 0 0 0.5rem var(--rescoldo); }
.bodega h2 { color: var(--tinta-papel); }
.bodega-lead { margin-top: 1.25rem; max-width: 42rem; color: color-mix(in srgb, var(--tinta-papel) 75%, transparent); font-size: 1.02rem; line-height: 1.6; }

.bodega-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
}
.bodega-family {
  border-left: 3px solid var(--fam-color, var(--rescoldo));
  padding-left: 1.1rem;
}
.bodega-family h3 {
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--fam-color, var(--rescoldo));
}
.bodega-family ul { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.45rem; }
.bodega-family li {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.86rem;
}
.bodega-family li .leader {
  flex: 1 1 auto;
  border-bottom: 1px dotted color-mix(in srgb, var(--tinta-papel) 30%, transparent);
  transform: translateY(-0.25rem);
  min-width: 0.4rem;
}
.bodega-family li .price { font-family: var(--mono); font-size: 0.82rem; font-weight: 700; white-space: nowrap; }

.bodega-count {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.bodega-count-figure {
  font-family: var(--display);
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--rescoldo);
  line-height: 1;
}
.bodega-count-text { max-width: 22rem; font-size: 0.9rem; color: color-mix(in srgb, var(--tinta-papel) 72%, transparent); }

@media (max-width: 900px) {
  .bodega-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .bodega-grid { grid-template-columns: 1fr; }
}

/* ---------- Lo que dicen: sello de valoración ----------
   Un numeral grande tratado como marca de hierro (contorno quemado vía
   sombra/filtro, no una ilustración figurativa) en vez del anillo cónico
   de A Taberna do Rio/O Carballo o el carrusel de Melao v2. Sin avatares
   inventados: solo nombre, estrellas y cita real. */
.reconocimientos { background: var(--brasa); }
.reconocimientos-lead { margin-top: 1.25rem; max-width: 42rem; color: var(--humo-tenue); font-size: 1.02rem; line-height: 1.6; }

.rating-stamp {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.rating-stamp-value {
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 7rem);
  font-weight: 800;
  line-height: 0.85;
  color: var(--humo);
  text-shadow: 0 0 26px color-mix(in srgb, var(--ascua) 55%, transparent), 0 0 60px color-mix(in srgb, var(--rescoldo) 40%, transparent);
  letter-spacing: -0.03em;
}
.rating-stamp-copy { min-width: 14rem; }
.rating-stamp-stars { display: inline-flex; gap: 3px; color: var(--ascua); font-size: 1.25rem; }
.rating-stamp-count { margin-top: 0.5rem; font-size: 0.95rem; color: var(--humo-tenue); }
.rating-stamp-source { margin-top: 0.35rem; font-size: 0.8rem; color: var(--humo-mas-tenue); }

.reviews-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.review-ticket {
  position: relative;
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  border-radius: 0.9rem;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-ticket-stars { color: var(--ascua); letter-spacing: 0.12em; font-size: 0.95rem; }
.review-ticket-quote { font-size: 0.94rem; line-height: 1.58; color: var(--humo); flex-grow: 1; }
.review-ticket-meta { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.82rem; color: var(--humo-mas-tenue); border-top: 1px solid var(--linea-suave); padding-top: 0.85rem; }
.review-ticket-meta strong { color: var(--humo); font-weight: 700; }

@media (max-width: 900px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ---------- Reservar y llegar ---------- */
.reservar { background: var(--brasa); }
.reservar.spotlight {
  background:
    radial-gradient(560px circle at var(--mx, 50%) var(--my, 20%), color-mix(in srgb, var(--rescoldo) 32%, transparent) 0%, transparent 68%),
    var(--brasa);
}
.reservar-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.reservar-lead { margin-top: 1.25rem; max-width: 38rem; color: var(--humo-tenue); font-size: 1.02rem; line-height: 1.6; }

.info-list { margin-top: 1.9rem; display: flex; flex-direction: column; gap: 1rem; }
.info-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; }
.info-list a { border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.info-list a:hover, .info-list a:focus-visible { border-color: currentColor; color: var(--ascua-tenue); }
.info-list .item-icon { font-size: 1.3rem; color: var(--ascua); flex-shrink: 0; margin-top: 0.1rem; }
.info-list li small { display: block; margin-top: 0.15rem; font-size: 0.8rem; color: var(--humo-mas-tenue); }

/* ---------- Horario en directo ----------
   Datos reales aportados por el negocio (captura de su ficha de Google,
   14-09-2026): lunes, jueves, viernes, sábado y domingo 10:00–23:00;
   martes y miércoles cerrado — ver HOURS en js/main.js. Mismo componente
   de datos que otras familias del workspace (timeline 8h–26h con la
   franja de hoy y una marca de "ahora"), recoloreado en tonos de brasa. */
.clock-card {
  margin-top: 1.9rem;
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  border-radius: 1.1rem;
  padding: 1.4rem 1.5rem;
}
.hours-status-row { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; margin-bottom: 0.9rem; }
.live-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ascua);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ascua) 25%, transparent), 0 0 8px 1px color-mix(in srgb, var(--ascua) 60%, transparent);
  flex-shrink: 0;
}
.live-dot.is-closed { background: var(--humo-mas-tenue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--humo-mas-tenue) 22%, transparent); }

.clock-timeline { margin: 0.2rem 0 0.5rem; }
.clock-row { display: flex; align-items: center; gap: 0.5rem; height: 1.7rem; }
.clock-row-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--humo-mas-tenue);
  width: 2.6rem;
  flex-shrink: 0;
}
.clock-track {
  position: relative;
  flex: 1 1 auto;
  height: 0.55rem;
  border-radius: 100px;
  background: var(--ceniza);
  overflow: hidden;
}
.clock-window {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--rescoldo), var(--ascua) 60%, var(--llama));
  border-radius: 100px;
}
.clock-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  padding-left: 2.6rem;
  font-size: 0.65rem;
  color: var(--humo-mas-tenue);
}
.clock-now {
  position: absolute;
  top: -0.3rem; bottom: -0.3rem;
  left: 0;
  width: 2px;
  background: var(--humo);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brasa-2) 60%, transparent);
}
.clock-now::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--humo);
}

.hours-detail { margin-top: 1rem; }
.hours-detail summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ascua-tenue);
  list-style: none;
}
.hours-detail summary::-webkit-details-marker { display: none; }
.hours-detail summary::before { content: "+ "; }
.hours-detail[open] summary::before { content: "− "; }
.hours-list { margin-top: 0.7rem; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.9rem;
  color: var(--humo-tenue);
  border-top: 1px solid var(--linea-suave);
}
.hours-list li:first-child { border-top: none; }
.hours-list li.is-today { color: var(--humo); font-weight: 700; }

.grupos-note {
  margin-top: 1.75rem;
  padding: 1.25rem 1.4rem;
  border-radius: 1rem;
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  display: flex;
  gap: 0.85rem;
}
.grupos-note iconify-icon { font-size: 1.4rem; color: var(--ascua); flex-shrink: 0; }
.grupos-note p { font-size: 0.88rem; line-height: 1.55; color: var(--humo-tenue); }
.grupos-note strong { color: var(--humo); }

.map-card {
  border-radius: 1.1rem;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--linea);
}
.map-card iframe { width: 100%; height: 100%; }
.map-consent {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  background: var(--brasa-2);
  color: var(--humo);
  font-weight: 700;
  transition: background-color 0.2s ease;
}
.map-consent:hover, .map-consent:focus-visible { background: var(--brasa-3); }
.map-consent iconify-icon { font-size: 2rem; color: var(--ascua); }

@media (max-width: 860px) {
  .reservar-inner { grid-template-columns: 1fr; }
  .map-card { max-width: 26rem; }
}

/* ---------- Footer ---------- */
.site-footer { background: #0E0A08; color: color-mix(in srgb, var(--humo) 82%, transparent); }
.footer-inner {
  padding: clamp(3.5rem, 8vw, 5rem) 1.5rem 3rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 2.5rem;
}
.footer-brand .brand { color: var(--humo); margin-right: 0; }
.footer-brand p { margin-top: 0.9rem; color: var(--humo-mas-tenue); max-width: 22rem; font-size: 0.9rem; line-height: 1.55; }
.footer-brand-socials { margin-top: 1.1rem; display: flex; gap: 0.65rem; }
.footer-brand-socials a {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--humo) 8%, transparent);
  color: var(--humo);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.footer-brand-socials a:hover, .footer-brand-socials a:focus-visible { background: var(--ascua); color: var(--brasa); }
.footer-nav ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-nav a, .footer-contact a { display: inline-flex; align-items: center; gap: 0.55rem; opacity: 0.85; transition: opacity 0.2s ease, color 0.2s ease; font-size: 0.92rem; }
.footer-nav a:hover, .footer-contact a:hover, .footer-nav a:focus-visible, .footer-contact a:focus-visible { opacity: 1; }
.footer-nav a.is-active { opacity: 1; color: var(--ascua-tenue); }
.footer-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-contact iconify-icon { font-size: 1.1rem; color: var(--ascua); }

.footer-bottom { border-top: 1px solid var(--linea-suave); }
.footer-bottom .section-inner {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-credit { font-size: 0.82rem; color: var(--humo-mas-tenue); }
.back-to-top {
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%;
  border: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.back-to-top:hover, .back-to-top:focus-visible { border-color: var(--ascua); transform: translateY(-2px); }

@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr; }
}

/* ---------- Call FAB ----------
   El negocio solo tiene teléfono fijo (981 70 39 56), no un móvil de
   WhatsApp confirmado, así que el flotante llama en vez de abrir WhatsApp
   (a diferencia de las otras familias) — con un pulso de brasa en vez del
   verde de WhatsApp. */
.call-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 170;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.4rem 0.7rem 0.7rem;
  border-radius: 100px;
  background: linear-gradient(160deg, var(--llama) 0%, var(--ascua) 55%, var(--rescoldo) 100%);
  color: var(--brasa);
  font-weight: 800;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  box-shadow: 0 20px 38px -16px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(18px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), bottom 0.3s ease;
}
.call-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.call-fab:hover, .call-fab:focus-visible { transform: translateY(-4px) scale(1.03); }
.call-fab:active { transform: translateY(-1px) scale(0.98); }
.call-fab-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brasa) 15%, transparent);
  position: relative;
}
.call-fab-icon iconify-icon { font-size: 1.25rem; color: var(--brasa); }
.call-fab-label { white-space: nowrap; }
body.has-cookie-banner .call-fab { bottom: 7.5rem; }

.call-fab-pulse {
  position: absolute;
  inset: -1px;
  border-radius: 100px;
  border: 1.5px solid color-mix(in srgb, var(--ascua) 70%, transparent);
  animation: call-pulse 2.6s ease-out infinite;
  z-index: -1;
}
@keyframes call-pulse {
  0% { transform: scale(1); opacity: 0.65; }
  100% { transform: scale(1.22); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .call-fab-pulse { animation: none; opacity: 0; }
  .call-fab { transition: opacity 0.01s linear, bottom 0.01s linear; }
}
@media (max-width: 560px) {
  .call-fab-label { display: none; }
  .call-fab { padding: 0.6rem; right: 1rem; }
  body.has-cookie-banner .call-fab { bottom: 13rem; }
}

/* ---------- Cursor personalizado ---------- */
.cursor-ring, .cursor-dot {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 1.6rem; height: 1.6rem;
  margin: -0.8rem;
  border: 1.5px solid #FFFFFF;
  transition: opacity 0.2s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease;
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px;
  background: #FFFFFF;
  transition: opacity 0.2s ease;
}
.cursor-ring.is-visible, .cursor-dot.is-visible { opacity: 0.9; }
.cursor-ring.is-hover {
  width: 2.6rem; height: 2.6rem;
  margin: -1.3rem;
  background: color-mix(in srgb, white 18%, transparent);
}
.cursor-dot.is-hover { opacity: 0; }
body.custom-cursor-active, body.custom-cursor-active a, body.custom-cursor-active button {
  cursor: none;
}
@media (max-width: 900px), (pointer: coarse) {
  .cursor-ring, .cursor-dot { display: none; }
}

/* ---------- Cookie banner ---------- */
.cookie-banner {
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 180;
  max-width: 34rem;
  margin: 0 auto;
  background: var(--brasa-2);
  border: 1px solid var(--linea);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,0.55);
}
.cookie-banner p { font-size: 0.88rem; color: var(--humo-tenue); flex: 1 1 16rem; }
.cookie-banner[hidden] { display: none; }

/* ---------- Reveal defaults ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal-group] h2 { opacity: 1; }
}

/* ---------- Reduced motion & no-JS safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-scene-canvas { display: none; }
  .scroll-cue { animation: none; }
  .call-fab-pulse { animation: none; }
  * { scroll-behavior: auto !important; }
}
.motion-reduced .split-word > span { transform: none !important; opacity: 1 !important; }