/* ==========================================================================
   Bar Restaurante Industrial — styles.css
   Mobile-first. Sin librerías: CSS moderno + SVG inline.
   Tokens en tokens.css (cargar antes).
   ========================================================================== */

/* =============================================================
   1. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--texto);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
address { font-style: normal; }

::selection { background: var(--brasa); color: var(--crema); }

:focus-visible {
  outline: 2px solid var(--brasa);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   2. Utilidades
   ============================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1.1rem;
  background: var(--crema); color: var(--carbon);
  font-weight: 600; border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--dur-rapida) var(--ease-brasa);
}
.skip-link:focus { top: 1rem; }

.overline {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--acento);
}

.seccion { padding: var(--space-seccion) var(--gutter); }

.seccion-cabecera { max-width: 1100px; margin: 0 auto var(--space-8); }
.seccion-cabecera h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin-top: var(--space-2);
}
.seccion-lede {
  max-width: 46ch;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}

/* Botones */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.9em;
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: .03em;
  border-radius: var(--radius-sm);
  transition:
    transform var(--dur-chispa) var(--ease-brasa),
    box-shadow var(--dur-rapida) var(--ease-brasa),
    background-color var(--dur-rapida) var(--ease-brasa),
    color var(--dur-rapida) var(--ease-brasa);
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

.btn-brasa {
  background: linear-gradient(140deg, var(--brasa-viva), var(--brasa) 55%);
  color: var(--crema);
  box-shadow: var(--glow-brasa);
}
.btn-brasa:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-brasa-hover);
}
.btn-brasa:hover:active { transform: translateY(-2px) scale(.97); }

.btn-fantasma {
  border: 1px solid var(--hormigon-40);
  color: var(--crema);
}
.btn-fantasma:hover {
  background: var(--crema);
  color: var(--carbon);
  border-color: var(--crema);
}

/* Reveal escalonado (IntersectionObserver) — sin JS nunca se oculta nada */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--dur-media) var(--ease-brasa),
    transform var(--dur-media) var(--ease-brasa);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* =============================================================
   3. Topbar
   ============================================================= */
.topbar {
  position: absolute; inset: 0 0 auto 0;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--gutter);
  z-index: 10;
}
.marca { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.marca-sub {
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--hormigon);
}
.topnav { display: none; }
@media (min-width: 720px) {
  .topnav { display: flex; gap: var(--space-8); }
  .topnav a {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--crema-60);
    padding-bottom: 2px;
    background: linear-gradient(var(--brasa), var(--brasa)) left bottom / 0% 2px no-repeat;
    transition: color var(--dur-rapida) var(--ease-brasa),
                background-size var(--dur-rapida) var(--ease-brasa);
  }
  .topnav a:hover { color: var(--crema); background-size: 100% 2px; }
}

/* =============================================================
   4. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: calc(var(--space-24)) var(--gutter) var(--space-24);
  isolation: isolate;
  /* Placeholder provisional de foto de brasa: ascuas + noche del polígono */
  background:
    radial-gradient(130% 85% at 50% 118%, #47200d 0%, #2a1710 30%, var(--carbon) 64%);
}

.hero-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

.humo {
  position: absolute;
  width: 68vmax; height: 68vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 239, 228, .05), transparent 72%);
  filter: blur(10px);
}
.humo-a { bottom: -22vmax; left: -18vmax; animation: humo-deriva 26s var(--ease-humo) infinite alternate; }
.humo-b { bottom: -30vmax; right: -24vmax; animation: humo-deriva 34s var(--ease-humo) infinite alternate-reverse; }
@keyframes humo-deriva {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, -14vmax, 0) scale(1.18); }
}

.brasa-suelo {
  position: absolute;
  inset: auto -10% -6% -10%;
  height: 34%;
  background:
    radial-gradient(58% 90% at 50% 100%, rgba(232, 85, 26, .34), transparent 68%),
    radial-gradient(26% 55% at 34% 100%, rgba(232, 85, 26, .22), transparent 70%),
    radial-gradient(22% 50% at 68% 100%, rgba(245, 160, 26, .14), transparent 70%);
  filter: blur(6px);
  animation: rescoldo 5.5s var(--ease-humo) infinite alternate;
}
@keyframes rescoldo {
  from { opacity: .75; }
  to   { opacity: 1; }
}

.ascuas { position: absolute; inset: 0; width: 100%; height: 100%; }

.grano {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.hero-inner { max-width: 1100px; margin-inline: auto; width: 100%; }

.hero-kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--hormigon);
  animation: aparece var(--dur-media) var(--ease-brasa) .15s both;
}

.hero-titulo {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.hero-titulo .linea { display: block; overflow: hidden; padding-block: .02em; }
.hero-titulo .palabra {
  display: inline-block;
  animation: sube-palabra var(--dur-lenta) var(--ease-brasa) both;
  animation-delay: calc(250ms + var(--i, 0) * 150ms);
}
@keyframes sube-palabra {
  from { transform: translateY(112%); }
  to   { transform: translateY(0); }
}
.palabra-fuego {
  background: linear-gradient(105deg, var(--crema) 30%, var(--brasa-viva) 78%, var(--brasa));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.palabra-hueca {
  color: transparent;
  -webkit-text-stroke: 2px var(--crema-60);
  font-size: .82em;
}
.punto { font-style: normal; color: var(--brasa); }

.hero-lede {
  max-width: 42ch;
  margin-top: var(--space-6);
  font-size: var(--text-lg);
  color: color-mix(in srgb, var(--crema) 82%, var(--hormigon));
  animation: aparece var(--dur-lenta) var(--ease-brasa) .8s both;
}

.hero-cta {
  margin-top: var(--space-8);
  animation: aparece var(--dur-lenta) var(--ease-brasa) 1s both;
}

@keyframes aparece {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Tarjeta pizarra flotante — solo desktop */
.tarjeta-pizarra { display: none; }
@media (min-width: 1280px) {
  .tarjeta-pizarra {
    display: block;
    position: absolute;
    right: clamp(2rem, 6vw, 7rem);
    top: 50%;
    width: 300px;
    padding: var(--space-6);
    border-radius: var(--radius-md);
    background:
      radial-gradient(60% 45% at 25% 20%, rgba(245, 239, 228, .05), transparent 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
      var(--pizarra);
    border: 6px solid transparent;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, .5),
      var(--shadow-pizarra);
    border-image: repeating-linear-gradient(97deg, var(--madera) 0 7px, #5d3f26 7px 13px, #755238 13px 22px) 6;
    transform: translateY(calc(-50% + var(--parallax, 0px))) rotate(1.6deg);
    will-change: transform;
    animation: aparece var(--dur-lenta) var(--ease-brasa) 1.15s both;
  }
  .tarjeta-kicker {
    font-family: var(--font-tiza);
    font-size: 1.35rem;
    color: var(--brasa-viva);
    line-height: 1;
  }
  .tarjeta-fecha {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--hormigon);
    margin-top: var(--space-1);
  }
  .tarjeta-platos { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
  .tarjeta-platos li {
    font-family: var(--font-tiza);
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--tiza);
    text-shadow: 0 0 1px rgba(245, 239, 228, .35);
  }
  .tarjeta-platos li:nth-child(odd) { transform: rotate(-.5deg); }
  .tarjeta-precio {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--hormigon);
  }
  .tarjeta-precio span {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--crema);
    background: var(--brasa);
    padding: .18em .5em;
    border-radius: var(--radius-sm);
    transform: rotate(-4deg);
    margin-right: .4em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
  }
  .tarjeta-enlace {
    display: inline-block;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brasa-viva);
  }
  .tarjeta-enlace:hover { color: var(--crema); }
}

/* Indicador de scroll */
.scroll-hint {
  position: absolute;
  left: 50%; bottom: max(var(--space-6), env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--space-2);
  z-index: 2;
  animation: aparece var(--dur-lenta) var(--ease-brasa) 1.5s both;
}
.scroll-hint-texto {
  font-family: var(--font-tiza);
  font-size: 1.15rem;
  color: var(--hormigon);
  transition: color var(--dur-rapida) var(--ease-brasa);
}
.scroll-hint:hover .scroll-hint-texto { color: var(--crema); }
.scroll-hint-linea {
  position: relative;
  width: 1px; height: 44px;
  background: var(--hormigon-40);
  overflow: hidden;
}
.scroll-hint-linea::after {
  content: "";
  position: absolute; left: -1.5px; top: -6px;
  width: 4px; height: 6px;
  border-radius: 50%;
  background: var(--brasa);
  box-shadow: 0 0 6px 1px rgba(232, 85, 26, .8);
  animation: gota-ascua 2.4s var(--ease-hierro) infinite;
}
@keyframes gota-ascua {
  0%   { transform: translateY(0); opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}

@media (max-width: 1279.5px) {
  .hero { padding-bottom: var(--space-16); }
}

/* =============================================================
   5. La pizarra de hoy
   ============================================================= */
.seccion-pizarra {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(0, 0, 0, .35), transparent 70%),
    var(--carbon);
}
.seccion-pizarra .seccion-cabecera { text-align: center; }

/* Marco de madera con veta */
.marco {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(12px, 2.6vw, 22px);
  border-radius: var(--radius-md);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .18) 38%, rgba(255, 255, 255, .06) 66%, rgba(0, 0, 0, .24)),
    repeating-linear-gradient(97deg,
      var(--madera) 0 7px,
      #5d3f26 7px 12px,
      #77543a 12px 21px,
      #64432a 21px 30px);
  box-shadow:
    var(--shadow-pizarra),
    inset 0 2px 2px rgba(255, 255, 255, .22),
    inset 0 -3px 6px rgba(0, 0, 0, .45);
}

/* Superficie de pizarra: ruido + restos de tiza borrada + viñeta */
.pizarra {
  position: relative;
  border-radius: 6px;
  padding: clamp(1.6rem, 5vw, 3.2rem);
  padding-top: clamp(2.6rem, 7vw, 3.6rem);
  background-image:
    radial-gradient(50% 42% at 16% 22%, rgba(245, 239, 228, .05), transparent 70%),
    radial-gradient(44% 38% at 80% 70%, rgba(245, 239, 228, .04), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(245, 239, 228, .025), transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-color: var(--pizarra);
  box-shadow: inset 0 0 64px rgba(0, 0, 0, .55), inset 0 0 6px rgba(0, 0, 0, .6);
}

/* Pasada de trapo: banda diagonal de tiza medio borrada */
.pizarra-borrado {
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 26%, rgba(245, 239, 228, .045) 40%, rgba(245, 239, 228, .015) 52%, transparent 66%),
    linear-gradient(74deg, transparent 60%, rgba(245, 239, 228, .03) 74%, transparent 88%);
  pointer-events: none;
}

.pizarra-columnas { display: grid; gap: var(--space-8); }
@media (min-width: 720px) {
  .pizarra-columnas { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.pizarra-rubrica {
  position: relative;
  display: inline-block;
  font-family: var(--font-tiza);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  line-height: 1.1;
  color: var(--tiza);
  text-shadow: 0 0 1px rgba(245, 239, 228, .4);
  margin-bottom: var(--space-4);
}

/* Subrayado de tiza naranja: trazo SVG real */
.raya {
  position: absolute;
  left: -2%; bottom: -.35em;
  width: 104%; height: .5em;
  overflow: visible;
}
.raya path {
  fill: none;
  stroke: var(--brasa-viva);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: .9;
}
.js .raya path {
  stroke-dasharray: 130;
  stroke-dashoffset: 130;
}
.js .is-writing .raya path {
  animation: trazo-tiza calc(var(--dur-tiza) * .38) var(--ease-brasa) forwards;
  animation-delay: calc(var(--col, 0) * var(--stagger) * 4 + 120ms);
}
@keyframes trazo-tiza {
  to { stroke-dashoffset: 0; }
}

.platos { display: grid; gap: var(--space-3); }

.plato {
  font-family: var(--font-tiza);
  font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.55rem);
  line-height: 1.28;
  color: var(--tiza);
  text-shadow: 0 0 1px rgba(245, 239, 228, .35);
  -webkit-mask-image: linear-gradient(105deg, #000 52%, transparent 72%);
  mask-image: linear-gradient(105deg, #000 52%, transparent 72%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0;
  mask-position: 0% 0;
}
.plato:nth-child(odd)  { transform: rotate(-.45deg); }
.plato:nth-child(even) { transform: rotate(.35deg) translateX(2px); }

/* Escritura con tiza al entrar en viewport */
.js [data-pizarra] .plato { opacity: 0; }
.js [data-pizarra].is-writing .plato {
  animation: tiza-escribe calc(var(--dur-tiza) * .4) var(--ease-hierro) both;
  animation-delay: calc(var(--i, 0) * var(--stagger) * 1.8);
}
@keyframes tiza-escribe {
  from { opacity: 1; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}

.pizarra-incluye {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px dashed rgba(245, 239, 228, .22);
  text-align: center;
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.5rem);
  color: color-mix(in srgb, var(--crema) 78%, var(--pizarra));
}

/* Precio: pegatina redonda Brasa, rotada */
.precio-sticker {
  position: absolute;
  top: clamp(-26px, -3vw, -18px);
  right: clamp(-8px, 1vw, 26px);
  width: clamp(96px, 21vw, 136px);
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, var(--brasa-viva), var(--brasa) 62%);
  color: var(--crema);
  transform: rotate(-6deg);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .5),
    0 0 0 5px rgba(245, 239, 228, .08),
    var(--glow-brasa);
  z-index: 2;
  transition: transform var(--dur-rapida) var(--ease-rebote);
}
.precio-sticker:hover { transform: rotate(-2.5deg) scale(1.04); }
.precio-cifra {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem);
  line-height: 1;
}
.precio-sub {
  font-family: var(--font-tiza);
  font-weight: 600;
  font-size: clamp(.95rem, .85rem + .5vw, 1.15rem);
  line-height: 1;
  opacity: .95;
}
.js [data-pizarra] .precio-sticker { scale: 0; }
.js [data-pizarra].is-writing .precio-sticker {
  animation: sello calc(var(--dur-tiza) * .45) var(--ease-rebote) forwards;
  animation-delay: calc(var(--total, 12) * var(--stagger) * 1.8 + 200ms);
}

/* Borrado de tiza (lo usa la demo del flujo WhatsApp→pizarra) */
.js [data-pizarra].is-borrando .plato {
  opacity: 1;
  animation: tiza-borra 460ms var(--ease-humo) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}
@keyframes tiza-borra {
  to { opacity: 0; filter: blur(3px); -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
.js [data-pizarra].is-borrando .precio-sticker {
  scale: 1;
  animation: sello-fuera 320ms var(--ease-hierro) forwards;
}
@keyframes sello-fuera {
  to { scale: 0; rotate: 24deg; }
}
@keyframes sello {
  from { scale: 0; rotate: -30deg; }
  to   { scale: 1; rotate: 0deg; }
}
.precio-sticker.tiembla { animation: tiembla .5s var(--ease-rebote); }
@keyframes tiembla {
  0%, 100% { transform: rotate(-6deg); }
  30% { transform: rotate(-1deg) scale(1.06); }
  60% { transform: rotate(-9deg); }
}

.pizarra-nota {
  max-width: 980px;
  margin: var(--space-6) auto 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--hormigon);
}
.nota-tiza { color: var(--brasa); margin-right: .35em; }
.nota-detalle { display: block; margin-top: var(--space-1); font-size: var(--text-xs); }

/* =============================================================
   6. Para los peques / Celebraciones
   (única sección con el verde Terraza — token con scope)
   ============================================================= */
.seccion-celebraciones {
  position: relative;
  background: var(--crema);
  color: var(--carbon);
  padding-top: calc(var(--space-seccion) + 34px);
  transition: background-color 1200ms var(--ease-humo);
}
.seccion-celebraciones.is-atmo {
  background: color-mix(in srgb, var(--crema) 90%, var(--terraza));
}

/* Toldo de terraza: rayas + festón */
.toldo {
  position: absolute; top: 0; left: 0; right: 0;
  height: 26px;
  background: repeating-linear-gradient(90deg,
    var(--terraza) 0 44px,
    color-mix(in srgb, var(--terraza) 26%, var(--crema)) 44px 88px);
}
.toldo::after {
  content: "";
  position: absolute; top: 100%; left: 0; right: 0;
  height: 13px;
  background-image: radial-gradient(circle at 22px -4px, var(--terraza-oscuro) 14px, transparent 15px);
  background-size: 44px 13px;
  background-repeat: repeat-x;
  opacity: .85;
}

.celebraciones-inner { max-width: 1100px; margin: 0 auto; }

.seccion-celebraciones .overline { color: var(--terraza-oscuro); }
.seccion-celebraciones h2 { color: var(--carbon); }

.titulo-anotacion {
  display: inline-block;
  font-family: var(--font-tiza);
  font-weight: 600;
  font-size: .48em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--acento);
  transform: rotate(-5deg) translateY(-.4em);
  margin-left: .2em;
}

.seccion-celebraciones .seccion-lede {
  color: color-mix(in srgb, var(--carbon) 78%, var(--crema));
}

.celebraciones-grid {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}
@media (min-width: 720px) {
  .celebraciones-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

.celebra-card {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--crema) 55%, white);
  border: 1px solid color-mix(in srgb, var(--terraza) 18%, transparent);
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--dur-rapida) var(--ease-brasa),
    box-shadow var(--dur-rapida) var(--ease-brasa);
}
.celebra-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
.celebra-icono {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--terraza) 14%, var(--crema));
  color: var(--acento);
  margin-bottom: var(--space-4);
}
.celebra-icono svg { width: 30px; height: 30px; }
.celebra-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -.01em;
}
.celebra-card p {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--carbon) 72%, var(--crema));
}

.celebraciones-cta {
  margin-top: var(--space-12);
  text-align: center;
}
.cta-texto {
  font-family: var(--font-tiza);
  font-weight: 600;
  font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
  line-height: 1.25;
  color: var(--terraza-oscuro);
}
.btn-whatsapp {
  margin-top: var(--space-6);
  background: var(--acento);
  color: var(--crema);
  font-size: var(--text-lg);
  padding: 1em 2.1em;
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--terraza) 65%, transparent);
}
.btn-whatsapp:hover {
  transform: translateY(-2px);
  background: var(--terraza-oscuro);
  box-shadow: 0 16px 34px -8px color-mix(in srgb, var(--terraza) 75%, transparent);
}
.cta-nota {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--carbon) 60%, var(--crema));
}

/* =============================================================
   7. Horarios y ubicación
   ============================================================= */
.seccion-horarios {
  background:
    radial-gradient(80% 40% at 50% 0%, rgba(0, 0, 0, .3), transparent 70%),
    var(--carbon);
}
.seccion-horarios .seccion-cabecera { margin-bottom: var(--space-6); }

.horario-pieza {
  max-width: 1100px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}
.hora-grande {
  background: linear-gradient(170deg, var(--brasa-viva) 20%, var(--brasa) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.28em;
  letter-spacing: -.02em;
}
.horario-pieza em {
  font-style: normal;
  font-family: var(--font-tiza);
  font-weight: 700;
  font-size: 1.12em;
  text-transform: none;
  color: var(--brasa-viva);
}

.horarios-grid {
  max-width: 1100px;
  margin: var(--space-12) auto 0;
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 960px) {
  .horarios-grid { grid-template-columns: 1fr 1.15fr; align-items: start; gap: var(--space-16); }
}

.horario-lista { display: grid; gap: var(--space-4); }
.horario-item {
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--hormigon-40);
}
.horario-item dt {
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.horario-item dd { margin-top: var(--space-1); color: var(--hormigon); font-size: var(--text-sm); }

.horario-julio {
  border-left-color: var(--brasa);
  background: linear-gradient(100deg, rgba(232, 85, 26, .12), transparent 70%);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.horario-julio dd strong { color: var(--crema); }
.julio-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .72em;
  background: var(--brasa);
  color: var(--crema);
  padding: .2em .55em;
  border-radius: var(--radius-sm);
  transform: rotate(-2deg);
  margin-right: .5em;
}

.direccion { margin-top: var(--space-8); color: var(--hormigon); font-size: var(--text-sm); }
.direccion strong { color: var(--crema); font-size: var(--text-base); }
.direccion-tel { margin-top: var(--space-3); }
.direccion-tel a {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--crema);
  transition: color var(--dur-rapida) var(--ease-brasa);
}
.direccion-tel a:hover { color: var(--brasa-viva); }

.seccion-horarios .btn-fantasma { margin-top: var(--space-6); }

/* Mapa oscuro (SVG estilizado, cero peso) */
.mapa {
  border-radius: var(--radius-md);
  border: 1px solid rgba(245, 239, 228, .09);
  background:
    radial-gradient(90% 90% at 50% 40%, #232323, #141414),
    var(--carbon-90);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.mapa svg { width: 100%; height: auto; }
.mapa-vial path {
  fill: none;
  stroke: rgba(138, 138, 133, .38);
  stroke-width: 5;
  stroke-linecap: round;
}
.mapa-vial-menor path { stroke-width: 2; stroke: rgba(138, 138, 133, .25); }
.mapa-parcela rect {
  fill: rgba(245, 239, 228, .045);
  stroke: rgba(245, 239, 228, .09);
}
.mapa-bar rect {
  fill: rgba(232, 85, 26, .18);
  stroke: var(--brasa);
  stroke-width: 1.5;
}
.mapa-pin path { fill: var(--brasa); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .55)); }
.pin-pulso {
  fill: none;
  stroke: var(--brasa);
  stroke-width: 2;
  transform-origin: 242px 192px;
  animation: pin-late 2.8s var(--ease-humo) infinite;
}
@keyframes pin-late {
  0%   { transform: scale(.5); opacity: .9; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
.mapa-etiqueta {
  fill: rgba(245, 239, 228, .75);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mapa-etiqueta-sec { fill: rgba(138, 138, 133, .6); font-size: 12px; }

/* =============================================================
   8. Footer + barra CTA móvil
   ============================================================= */
.pie {
  padding: var(--space-12) var(--gutter);
  padding-bottom: calc(var(--space-12) + 76px + env(safe-area-inset-bottom));
  background: var(--carbon-90);
  border-top: 1px solid rgba(245, 239, 228, .07);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--hormigon);
}
.pie a { color: var(--crema); }
.pie a:hover { color: var(--brasa-viva); }
.pie-legal { margin-top: var(--space-2); font-size: var(--text-xs); }
@media (min-width: 960px) {
  .pie { padding-bottom: var(--space-12); }
}

.barra-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: color-mix(in srgb, var(--carbon) 94%, black);
  border-top: 1px solid rgba(245, 239, 228, .12);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 960px) {
  .barra-cta { display: none; }
}
.barra-btn {
  display: flex; align-items: center; justify-content: center;
  gap: .55em;
  padding: 1.05rem .5rem;
  font-weight: 600;
  font-size: var(--text-base);
  letter-spacing: .02em;
  transition: transform var(--dur-chispa) var(--ease-brasa), filter var(--dur-chispa) var(--ease-brasa);
  -webkit-tap-highlight-color: transparent;
}
.barra-btn svg { width: 1.25em; height: 1.25em; }
.barra-llamar { color: var(--crema); }
.barra-whatsapp { background: var(--brasa); color: var(--crema); }
.barra-btn:active,
.barra-btn.is-pulsado {
  transform: scale(.94);
  filter: brightness(1.2);
}

/* Modo foto (?foto): fija cada animación en su fotograma final (QA/capturas) */
html.modo-foto { scroll-behavior: auto; }
.modo-foto *, .modo-foto *::before, .modo-foto *::after {
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}

/* =============================================================
   9. Reduced motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .humo, .brasa-suelo { animation: none; }
  .ascuas { display: none; }
  .scroll-hint-linea::after { animation: none; opacity: .8; transform: translateY(18px); }
  .pin-pulso { animation: none; opacity: 0; }
}