/* =============================================================
   BRASA — dirección de arte y detalles finos de la carta
   Concepto: una revista editorial del fuego y el oficio.
   Grano de película, fotos con el mismo tono cálido, humo, capítulos
   numerados, tipografía en movimiento y un taller para armar la pizza.
   Se carga al final (después de carta-premium.css).
   ============================================================= */
:root {
  --h1-grad: linear-gradient(180deg, #fff6dc 0%, var(--gold-hi) 45%, var(--primary) 78%, var(--gold-deep) 100%);
  --h2-grad: linear-gradient(180deg, #fff1c8, var(--gold-hi) 55%, var(--primary));
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Grano de película (toda la página) ---------- */
body::after {
  content: ''; position: fixed; inset: -60%; z-index: 450; pointer-events: none; opacity: .075; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(5) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -4%); } 60% { transform: translate(-2%, -2%); } 80% { transform: translate(4%, 2%); } }

/* ---------- Mismo tono cálido en todas las fotos (no se ven "de banco de imágenes") ---------- */
.dish-media img, .board-media img, .row-thumb, .plate-pizza, .cta-pizza, .up-item img, .reorder img, .cart-item img, .opts-head img, .hero-bg img {
  filter: sepia(.14) saturate(1.14) contrast(1.06) brightness(.96);
}
.dish:hover .dish-media img { filter: sepia(.08) saturate(1.25) contrast(1.08) brightness(1); }
.dish-media::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 60px rgba(30, 12, 4, .55); }

/* ---------- Barra de desplazamiento, selección y progreso ---------- */
html { scrollbar-color: #6e4b17 #0b0806; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0b0806; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8f6119, #d6a03c); border-radius: 10px; border: 2px solid #0b0806; }
::selection { background: #f4d27d; color: #1b1206; }
.site-header { position: sticky; }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold-grad); transform-origin: left; scale: var(--sp, 0) 1; opacity: .9; box-shadow: 0 0 12px rgba(244,210,125,.6); pointer-events: none; }

/* ---------- Presentación de entrada (primera visita) ---------- */
.intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, #241508, #0b0806 65%); transition: clip-path .9s cubic-bezier(.76, 0, .24, 1); clip-path: inset(0 0 0 0); animation: introSafety 0s 3s forwards; }
.intro.out { clip-path: inset(0 0 100% 0); }
.intro-core { position: relative; display: grid; place-items: center; }
.intro-core img { width: 120px; height: 120px; border-radius: 50%; animation: introLogo 1.1s var(--spring) both; filter: drop-shadow(0 0 40px rgba(240,122,42,.55)); }
.intro-fire { position: absolute; inset: -30px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(244,210,125,.9), transparent 30%, rgba(240,122,42,.8) 55%, transparent 70%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 65%, transparent 66%); mask: radial-gradient(circle, transparent 62%, #000 63%, #000 65%, transparent 66%); animation: spin 1.4s linear infinite; }
.intro-line { position: absolute; left: 50%; bottom: 18%; width: 140px; height: 2px; margin-left: -70px; background: rgba(244,210,125,.15); overflow: hidden; border-radius: 2px; }
.intro-line::after { content: ''; position: absolute; inset: 0; background: var(--gold-grad); transform-origin: left; animation: introBar 1s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes introLogo { from { opacity: 0; transform: scale(.6) rotate(-30deg); } }
@keyframes introBar { from { transform: scaleX(0); } }
@keyframes introSafety { to { visibility: hidden; pointer-events: none; } }
/* Mientras está la presentación, la portada espera para animarse después */
body.intro-wait .hero-copy > *, body.intro-wait .hero-plate, body.intro-wait .h1-top .ch, body.intro-wait .h1-script { animation-play-state: paused; }

/* ---------- Portada: humo, profundidad y título animado ---------- */
.smoke { position: absolute; left: 20%; right: 20%; top: -18%; height: 60%; pointer-events: none; z-index: 1; }
.smoke i { position: absolute; bottom: 0; left: 40%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 238, 215, .16), rgba(255, 238, 215, 0) 65%); filter: blur(14px); opacity: 0; animation: smoke 9s ease-in infinite; }
.smoke i:nth-child(2) { left: 18%; animation-delay: -2.2s; animation-duration: 10s; }
.smoke i:nth-child(3) { left: 55%; animation-delay: -4.6s; animation-duration: 8.5s; }
.smoke i:nth-child(4) { left: 30%; animation-delay: -6.8s; animation-duration: 11s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 40%) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-30%, -140%) scale(1.8); } }

/* El scroll da profundidad: la pizza se aleja girando y el texto sube (variables desde efectos.js) */
.hero-plate { translate: 0 calc(var(--hp, 0) * 90px); scale: calc(1 - var(--hp, 0) * .14); }
.plate-spin { rotate: calc(var(--hp, 0) * 70deg); }
.hero-copy { translate: 0 calc(var(--hp, 0) * -50px); opacity: calc(1 - var(--hp, 0) * 1.4); }
.hero-bg { translate: 0 calc(var(--hp, 0) * 140px); }

/* Título: las letras suben una por una, y "de las brasas" se escribe a mano */
.h1-top.is-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.h1-top .wd { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em; margin-bottom: -.1em; }
.h1-top .ch { display: inline-block; background: var(--h1-grad); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(115%) rotate(8deg); animation: chUp .95s var(--ease-out) forwards; animation-delay: calc(var(--c) * 42ms + .35s); }
@keyframes chUp { to { transform: none; } }
.h1-script { clip-path: inset(-25% 102% -25% -2%); animation: writeOn 1.5s cubic-bezier(.6, 0, .25, 1) 1.05s forwards; }
@keyframes writeOn { to { clip-path: inset(-25% -6% -25% -2%); } }

/* ---------- Capítulos numerados ---------- */
.ch-n { font-style: normal; display: inline-grid; place-items: center; min-width: 1.9em; height: 1.55em; padding: 0 .35em; border-radius: 6px; background: var(--gold-grad); color: #1b1206; font-family: var(--font-cond); font-weight: 700; letter-spacing: .04em; font-size: .78rem; box-shadow: 0 4px 12px -4px rgba(240,160,60,.7); }

/* ---------- Títulos de sección: las palabras suben al aparecer ---------- */
.h2-pro.is-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; }
.h2-pro .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.h2-pro .wi { display: inline-block; background: var(--h2-grad); -webkit-background-clip: text; background-clip: text; color: transparent; transform: translateY(110%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--w) * 70ms + .1s); }
.in .h2-pro .wi, .h2-pro.in .wi { transform: none; }

/* ---------- Tipografía gigante en movimiento ---------- */
.kinetic { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1rem, 3vw, 2rem); pointer-events: none; user-select: none; }
.kin-row { white-space: nowrap; will-change: transform; }
.kin-row span { display: inline-block; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 1; letter-spacing: .02em; }
.kin-row:not(.kin-solid) span { font-size: clamp(3.4rem, 11vw, 10rem); color: transparent; -webkit-text-stroke: 1.5px rgba(244,210,125,.35); }
.kin-solid { margin-top: .4rem; }
.kin-solid span { font-family: var(--font-cond); font-weight: 700; font-size: clamp(1.6rem, 4.4vw, 3.6rem); letter-spacing: .12em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Taller: arma tu pizza ---------- */
.sizes-pro { padding: 0; border: 0; background: none; }
.taller { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: 32px; border: 1px solid var(--glass-line);
  background: radial-gradient(ellipse 60% 70% at 25% 50%, rgba(240,122,42,.16), transparent 70%), linear-gradient(160deg, rgba(39,31,23,.85), rgba(16,12,9,.92)); box-shadow: 0 40px 80px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04); }
.taller-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.taller-board { position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #2c241d, #17110c 70%); box-shadow: inset 0 0 0 2px rgba(244,210,125,.16), inset 0 -20px 40px rgba(0,0,0,.6), 0 40px 70px -30px rgba(0,0,0,.95); }
.taller-board::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; border: 1px dashed rgba(244,210,125,.12); }
.taller-pizza { position: relative; width: 86%; height: auto; scale: var(--ts, 1); transition: scale .8s var(--spring); filter: drop-shadow(0 24px 30px rgba(0,0,0,.75)) drop-shadow(0 0 30px rgba(240,122,42,.22)); }
.taller-pizza.bump { animation: tpTurn .8s var(--ease-out); }
@keyframes tpTurn { 0% { rotate: -16deg; } 100% { rotate: 0deg; } }
.taller-pizza.bump .tp-layer { animation: tpPop .6s var(--ease-out); }
@keyframes tpPop { from { opacity: .2; transform: scale(.86); } }
.tp-slices line { stroke: rgba(110, 50, 14, .38); stroke-width: .9; }
.tp-cuts line { stroke: #2a1408; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: cutIn .55s var(--ease-out) .15s forwards; }
@keyframes cutIn { to { stroke-dashoffset: 0; } }
.taller-dim { position: absolute; left: 50%; bottom: -1.6rem; translate: -50% 0; width: calc(86% * var(--ts, 1)); display: flex; align-items: center; gap: .6rem; transition: width .8s var(--spring); }
.taller-dim i { flex: 1; height: 1px; background: rgba(244,210,125,.45); position: relative; }
.taller-dim i:first-child::before, .taller-dim i:last-child::after { content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: rgba(244,210,125,.6); }
.taller-dim i:first-child::before { left: 0; } .taller-dim i:last-child::after { right: 0; }
.taller-dim b { font-family: var(--font-cond); letter-spacing: .1em; font-size: .9rem; color: var(--gold-hi); white-space: nowrap; }
.taller-ui h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .5rem 0 .2rem; color: #fff6dc; }
.taller-sub { margin: 0 0 1.2rem; color: var(--ember-hi); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; }
.t-label { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--muted); margin: 1rem 0 .5rem; }
.t-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.t-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.t-chip { display: grid; gap: .05rem; padding: .7rem .4rem; border-radius: 14px; border: 1.5px solid var(--glass-line); background: rgba(255,255,255,.03); color: var(--ink); text-align: center; transition: border-color .25s, background .25s, transform .3s var(--spring), box-shadow .3s; }
.t-chip b { font-family: var(--font-cond); font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.t-chip small { color: var(--muted); font-size: .74rem; }
.t-chip:hover { border-color: rgba(244,210,125,.45); transform: translateY(-2px); }
.t-chip[aria-pressed="true"] { border-color: var(--gold-hi); background: rgba(214,160,60,.14); box-shadow: 0 0 0 4px rgba(214,160,60,.12), 0 12px 24px -16px rgba(240,160,60,.9); }
.t-chip[aria-pressed="true"] b { color: var(--gold-hi); }
.t-chip:disabled { opacity: .3; pointer-events: none; }
.t-note { margin: .6rem 0 0; color: var(--muted); font-size: .85rem; }
.t-read { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1.4rem 0; border-block: 1px solid var(--glass-line); }
.t-read div { padding: .9rem .4rem; text-align: center; }
.t-read div + div { border-left: 1px solid var(--glass-line); }
.t-read b { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-read span { display: block; margin-top: .35rem; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); }
.t-go { width: 100%; gap: .5rem; }
.t-go svg { width: 18px; height: 18px; }

/* ---------- Tarjetas con inclinación 3D al pasar el mouse ---------- */
.has-tilt .dish[data-reveal].in:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px); transition: transform .18s ease-out, box-shadow .5s var(--ease-out), border-color .4s; }
.magnetic { transition: translate .45s var(--spring); }

/* ---------- Pie: la marca en grande ---------- */
.footer-mark { overflow: hidden; height: clamp(70px, 15vw, 210px); margin: 2.5rem 0 0; user-select: none; }
.footer-mark span { display: block; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: clamp(110px, 26vw, 360px); line-height: .82; letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1.5px rgba(244,210,125,.2);
  background: linear-gradient(180deg, rgba(244,210,125,.16), rgba(244,210,125,0) 75%); -webkit-background-clip: text; background-clip: text; transition: -webkit-text-stroke-color .6s; }
.site-footer:hover .footer-mark span { -webkit-text-stroke-color: rgba(244,210,125,.38); }
.footer-mark + .footer-bottom { margin-top: 0; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
  .taller { grid-template-columns: 1fr; }
  .taller-stage { width: min(100%, 420px); justify-self: center; margin-bottom: 1.6rem; }
  .smoke { top: -10%; }
}
@media (max-width: 640px) {
  .t-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body::after { animation: none; opacity: .06; }
}

/* ---------- Sin movimiento para quien lo pide en su equipo ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .intro { display: none; }
  .smoke { display: none; }
  .h1-top .ch { transform: none; animation: none; }
  .h1-script { clip-path: none; animation: none; }
  .h2-pro .wi { transform: none; transition: none; }
  .hero-plate, .plate-spin, .hero-copy, .hero-bg { translate: none; scale: none; rotate: none; opacity: 1; }
  .taller-pizza, .taller-pizza.bump, .taller-pizza.bump .tp-layer { animation: none; transition: none; }
  .tp-cuts line { animation: none; stroke-dashoffset: 0; }
}