:root {
  --night: #0b0a09;
  --ink: #f7f2e9;
  --ink-2: rgba(247, 242, 233, .42);
  --red: #c8281a;
  --cream: #ece5d8;
  --char: #1a1714;
  --pad: clamp(16px, 4vw, 56px);
  --serif: "Bodoni Moda", Georgia, serif;
  --wide: "Archivo", Helvetica, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--night); color: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.5; background: var(--night); overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.mono { font-family: var(--mono); font-size: 11px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; }
.it { font-style: italic; }
.red-ink { color: var(--red); }
::selection { background: var(--red); color: var(--ink); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ---------- Cursor, mecha y grano ---------- */
@media (pointer: fine) {
  html.js:not(.is-preview), html.js:not(.is-preview) a, html.js:not(.is-preview) .row { cursor: none; }
}
.spoon { position: fixed; left: 0; top: 0; z-index: 60; width: 64px; pointer-events: none; opacity: 0; transition: opacity .3s; will-change: transform; }
.spoon img { width: 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.spoon.on { opacity: 1; }
@media (pointer: coarse) { .spoon { display: none; } }

.fuse { position: fixed; right: clamp(10px, 2.4vw, 30px); top: 13vh; height: 62vh; width: 18px; z-index: 40; pointer-events: none; }
.fuse svg { width: 100%; height: 100%; overflow: visible; }
.fuse path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fuse-base { stroke: rgba(247, 242, 233, .22); stroke-width: 1; }
.fuse-lit { stroke: #f1c45c; stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255, 190, 70, .9)); }
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Cabecera ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px var(--pad); transition: background .4s, box-shadow .4s, padding .4s; }
.nav.solid { background: rgba(11, 10, 9, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding-top: 16px; padding-bottom: 16px; }
.wordmark { font-family: var(--wide); font-weight: 700; font-stretch: 125%; font-size: 17px; letter-spacing: .32em; text-transform: uppercase; text-decoration: none; }
.nav nav { display: flex; gap: clamp(14px, 2vw, 22px); }
.nav nav a { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; opacity: .9; }
.nav nav a:hover { color: #ff6b4f; }

/* ---------- 1 · Hero ---------- */
.hero { position: relative; height: 720vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); }
.heat { position: absolute; inset: 0; z-index: 1; opacity: 0; background: linear-gradient(180deg, rgba(11, 10, 9, 0) 20%, #3a1a0c 70%, #6b2f13 100%); }
.flour { position: absolute; inset: -10%; z-index: 2; opacity: 0; pointer-events: none; }
.flour i { position: absolute; border-radius: 50%; background: #f3ead8; box-shadow: 0 0 6px rgba(243, 234, 216, .5); }
.word-tomate { position: absolute; left: 0; top: 50%; z-index: 3; font-family: var(--wide); font-weight: 900; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(90px, 21vw, 340px); line-height: .8; letter-spacing: -.02em; color: var(--red); white-space: nowrap; transform: translate3d(100vw, -50%, 0); will-change: transform; }
.tomato { position: absolute; left: 0; top: 40%; z-index: 6; width: clamp(150px, 22vw, 320px); transform: translate3d(-40vw, 0, 0); will-change: transform; }
.tomato img { width: 100%; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55)); }
.pizza { position: absolute; left: 0; top: 0; z-index: 5; width: min(64vh, 84vw); aspect-ratio: 1; will-change: transform; }
.pizza img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); }
.pizza-shade { position: absolute; inset: 0; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(11, 10, 9, .25), rgba(11, 10, 9, .85) 70%); }

.hero-title { position: absolute; inset: 0; z-index: 7; display: flex; align-items: center; padding: 0 var(--pad); pointer-events: none; }
.hero-title h1 { font-weight: 400; font-size: clamp(64px, 11.5vw, 190px); line-height: .98; letter-spacing: -.02em; }
.hero-title h1 span { display: block; }
.hero-title .red { color: var(--red); margin-left: 15%; }
.hero-title .in2 { margin-left: 4.5%; }
.hero-tag, .hero-scroll { position: absolute; bottom: clamp(22px, 5vh, 54px); z-index: 7; color: rgba(247, 242, 233, .8); }
.hero-tag { left: var(--pad); }
.hero-scroll { right: calc(var(--pad) + 30px); color: var(--ink-2); }

.ch { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; display: flex; flex-direction: column; justify-content: center; }
.ch1 .mono { padding: 0 var(--pad); }
.big { font-family: var(--wide); font-weight: 900; font-stretch: 125%; text-transform: uppercase; line-height: .82; letter-spacing: -.02em; }
.ch1 .big { font-size: clamp(64px, 16vw, 260px); text-align: center; color: var(--ink); margin: .12em 0 0; }
.ch-text { max-width: 34ch; margin: clamp(18px, 3vh, 38px) var(--pad) 0; font-style: italic; font-size: clamp(19px, 2vw, 28px); line-height: 1.3; color: var(--ink); }
.ch2-cap { position: absolute; right: calc(var(--pad) + 30px); bottom: clamp(60px, 14vh, 140px); z-index: 7; text-align: right; color: var(--red); opacity: 0; }
.ch2-cap span { color: var(--ink-2); }
.ch3-label { position: absolute; left: var(--pad); top: calc(50% - 34vh); z-index: 7; color: #e07a3a; opacity: 0; }
.ch3 { z-index: 7; align-items: center; text-align: center; }
.ch3 .big { font-size: clamp(90px, 22vw, 360px); color: var(--ink); mix-blend-mode: normal; }
.ch3-sub { opacity: 0; margin-top: clamp(10px, 2vh, 26px); font-style: italic; font-size: clamp(22px, 2.6vw, 38px); color: rgba(247, 242, 233, .8); }
.red-wash { position: absolute; inset: 0; z-index: 9; background: var(--red); opacity: 0; pointer-events: none; }

/* ---------- 2 · Pregunta ---------- */
.ask { position: relative; min-height: 100vh; background: var(--red); padding: 18vh var(--pad) 12vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.ask-line { position: absolute; left: 0; right: 0; top: 34%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 220, 160, .7) 20%, rgba(11, 10, 9, .35) 55%, rgba(255, 220, 160, .6) 80%, transparent); transform-origin: left; transform: scaleX(var(--line, 0)); }
.ask h2 { font-weight: 400; font-size: clamp(56px, 9.5vw, 150px); line-height: .96; letter-spacing: -.02em; color: var(--ink); }
.ask h2 span { display: block; }
.ask-meta { position: absolute; right: calc(var(--pad) + 30px); bottom: 12vh; color: rgba(247, 242, 233, .75); }

/* ---------- 3 · Carta ---------- */
.menu { position: relative; padding: 70px var(--pad) 90px; padding-right: calc(var(--pad) + 30px); background: var(--night); }
.menu-head { display: flex; justify-content: space-between; color: var(--ink-2); padding-bottom: 22px; }
.menu-head h2 { font: inherit; color: var(--ink); }
.rows { border-top: 1px solid rgba(247, 242, 233, .12); }
.row { position: relative; display: grid; grid-template-columns: 54px 1fr auto auto auto; align-items: center; column-gap: 14px; padding: clamp(14px, 2.2vh, 22px) 0; border-bottom: 1px solid rgba(247, 242, 233, .12); }
.row .n { color: var(--ink-2); transition: color .3s; }
.row-name { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.row h3 { font-weight: 400; font-size: clamp(36px, 5.2vw, 76px); line-height: 1.02; letter-spacing: -.015em; }
.row-name p { color: var(--ink-2); margin-top: 6px; font-size: 10.5px; }
.row .thumb { display: none; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.row .cur { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 9px; color: var(--ink-2); }
.row .price { font-style: italic; font-size: clamp(30px, 3.4vw, 48px); min-width: 1.6ch; text-align: right; transition: color .3s; }
.row:hover .n, .row.hot .n, .row:hover .price, .row.hot .price { color: var(--red); }
.row:hover .row-name, .row.hot .row-name { transform: translateX(26px); }
.menu-foot { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; color: var(--ink-2); }
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: clamp(130px, 13vw, 190px); aspect-ratio: 1; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.6); transition: opacity .25s; }
.peek img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 18px 40px rgba(0, 0, 0, .55); border: 3px solid rgba(247, 242, 233, .1); }
.peek span { position: absolute; left: 62%; top: 50%; background: var(--night); color: var(--ink); padding: 5px 10px; font-size: 10px; border: 1px solid rgba(247, 242, 233, .2); }
.peek.on { opacity: 1; }

/* ---------- 4 · Manifiesto ---------- */
.manifesto { position: relative; background: var(--cream); color: var(--night); min-height: 210vh; padding: 16vh var(--pad) 12vh; overflow: hidden; }
.mani-label { position: relative; z-index: 2; }
.manifesto h2 { position: relative; z-index: 2; margin-top: 7vh; font-weight: 400; font-size: clamp(46px, 7.4vw, 124px); line-height: 1; letter-spacing: -.02em; text-align: center; }
.manifesto h2 span { display: block; }
.manifesto h2 .it { padding-left: 10%; }
.mani-text { position: relative; z-index: 2; max-width: 23ch; margin: 9vh 0 0 30%; font-style: italic; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.35; }
.ph { position: absolute; z-index: 1; background: #fff; padding: 6px; box-shadow: 0 22px 40px rgba(40, 25, 10, .28); will-change: transform; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.04); }
.ph1 { left: 4%; top: 46%; width: clamp(150px, 19vw, 300px); aspect-ratio: 4 / 5; rotate: -7deg; }
.ph2 { right: 9%; top: 50%; width: clamp(150px, 20vw, 320px); aspect-ratio: 4 / 3; rotate: 5deg; }
.ph3 { left: 38%; top: 66%; width: clamp(120px, 13vw, 210px); aspect-ratio: 1; rotate: -4deg; }
.ph4 { left: 52%; top: 80%; width: clamp(150px, 17vw, 270px); aspect-ratio: 4 / 5; rotate: 4deg; z-index: 3; }
.specs { position: absolute; right: calc(var(--pad) + 30px); top: 76%; z-index: 2; text-align: right; }
.specs div { display: flex; justify-content: flex-end; gap: 10px; }
.specs dt::after { content: ""; }
.trio { position: absolute; left: var(--pad); top: 79%; z-index: 2; font-family: var(--wide); font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--red); font-size: clamp(54px, 10vw, 150px); line-height: .84; letter-spacing: -.02em; }
.trio span { display: block; }

/* ---------- 5 · Masa ---------- */
.dough { position: relative; height: 280vh; background: var(--night); }
.dough-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.dough-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dough-shadow { position: absolute; left: 50%; top: 50%; width: 46vh; height: 9vh; margin-left: -23vh; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); transform: translate3d(0, 22vh, 0); z-index: 0; }
.dough-48 { position: absolute; left: 50%; top: 50%; z-index: 2; font-family: var(--wide); font-weight: 900; font-stretch: 125%; font-size: clamp(120px, 24vw, 380px); line-height: 1; letter-spacing: -.03em; color: #1d2436; mix-blend-mode: multiply; opacity: 0; transform: translate(-50%, -50%) scale(.94); pointer-events: none; }
.dough-cap { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 3; text-align: center; font-style: italic; font-size: clamp(18px, 1.8vw, 24px); color: rgba(247, 242, 233, .7); opacity: 0; padding: 0 var(--pad); }

/* ---------- 6 · Fotos ---------- */
.reel { position: relative; height: 420vh; background: var(--night); }
.reel-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.reel-label { position: absolute; left: var(--pad); top: 13vh; color: var(--ink-2); z-index: 2; }
.reel-count { position: absolute; right: calc(var(--pad) + 30px); bottom: 7vh; color: var(--ink-2); z-index: 2; }
.reel-count b { font-weight: 400; color: var(--ink); }
.track { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: flex-start; gap: 5vw; padding: 0 12vw 0 var(--pad); will-change: transform; }
.frame { position: relative; flex: none; }
.fimg { width: 100%; height: 100%; overflow: hidden; background: var(--char); }
.fimg img { width: 112%; height: 100%; max-width: none; object-fit: cover; filter: saturate(.85) contrast(1.05) brightness(.92) sepia(.12); will-change: transform; }
.frame figcaption { position: absolute; left: 0; top: calc(100% + 12px); color: var(--ink-2); white-space: nowrap; font-size: 10px; }
.fr1 { width: clamp(220px, 26vw, 420px); height: 52vh; margin-top: 24vh; }
.fr2 { width: clamp(280px, 34vw, 560px); height: 40vh; margin-top: 30vh; }
.fr3 { width: clamp(200px, 22vw, 340px); height: 54vh; margin-top: 14vh; }
.fr4 { width: clamp(280px, 32vw, 520px); height: 44vh; margin-top: 26vh; }
.fr5 { width: clamp(220px, 25vw, 400px); height: 50vh; margin-top: 16vh; }
.fr6 { width: clamp(320px, 44vw, 700px); height: 26vh; margin-top: 36vh; }
.fr7 { width: clamp(260px, 30vw, 460px); margin-top: 32vh; font-style: italic; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.12; color: var(--ink); }

/* ---------- 7 · Reservar ---------- */
.visit { position: relative; background: var(--red); padding: 18vh var(--pad) 9vh; padding-right: calc(var(--pad) + 30px); }
.visit h2 { font-weight: 400; font-size: clamp(60px, 10vw, 160px); line-height: .96; letter-spacing: -.02em; }
.visit h2 span { display: block; }
.visit h2 .it { padding-left: 1.2em; }
.ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 7vh; }
.btn { display: inline-flex; align-items: center; gap: 28px; padding: 22px 30px; font-size: 13px; text-decoration: none; border: 1px solid rgba(247, 242, 233, .55); transition: background .3s, color .3s, transform .3s; }
.btn.solid { background: var(--night); border-color: var(--night); }
.btn.solid:hover { background: var(--ink); color: var(--night); }
.btn.line:hover { background: rgba(247, 242, 233, .12); }
.btn span { font-size: 20px; letter-spacing: 0; transition: transform .3s; }
.btn:hover span { transform: translateX(6px); }
.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 12vh; color: rgba(247, 242, 233, .82); font-size: 11.5px; }
.info address { font-style: normal; }
.info a { text-decoration: none; }
.info a:hover { color: var(--night); }
.hours div { display: grid; grid-template-columns: 8.5em 1fr; }

/* ---------- 8 · Pie ---------- */
.foot { position: relative; background: var(--night); padding: 24vh var(--pad) 40px; padding-right: calc(var(--pad) + 30px); overflow: hidden; }
.slice { position: absolute; right: -4vw; top: 2vh; width: min(52vw, 760px); z-index: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); will-change: transform; }
.foot h2 { position: relative; z-index: 1; font-weight: 400; font-size: clamp(56px, 9vw, 140px); line-height: 1; letter-spacing: -.02em; }
.foot-cols { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 14vh; }
.foot-cols .wordmark { font-size: 15px; }
.foot-cols .dim { color: var(--ink-2); }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: #ff6b4f; }
.foot-cols .r { text-align: right; }
.foot-line { position: relative; z-index: 1; margin-top: 9vh; padding-top: 20px; border-top: 1px solid rgba(247, 242, 233, .1); color: var(--ink-2); text-transform: none; letter-spacing: .08em; }

/* ---------- Móvil ---------- */
@media (max-width: 640px) {
  .nav { padding-top: 18px; padding-bottom: 18px; }
  .wordmark { font-size: 15px; letter-spacing: .26em; }
  .nav nav { gap: 12px; }
  .nav nav a { font-size: 10.5px; }
  .hero-title { align-items: flex-start; padding-top: 17vh; }
  .hero-title h1 { font-size: clamp(56px, 17vw, 90px); }
  .hero-scroll { right: var(--pad); }
  .ch2-cap, .ch3-label, .ask-meta, .reel-count { right: var(--pad); }
  .row { grid-template-columns: 30px 1fr auto auto; column-gap: 10px; }
  .row .cur { display: none; }
  .row .thumb { display: block; width: 46px; height: 46px; }
  .row h3 { font-size: clamp(30px, 9vw, 42px); }
  .row:hover .row-name { transform: none; }
  .menu, .visit, .foot { padding-right: var(--pad); }
  .manifesto { min-height: 0; padding-bottom: 8vh; display: flex; flex-direction: column; }
  .manifesto h2 { text-align: left; }
  .manifesto h2 .it { padding-left: 0; }
  .mani-text { margin: 5vh 0 0 18%; }
  .ph, .specs, .trio { position: relative; left: auto; right: auto; top: auto; }
  .ph1 { width: 66%; margin: 6vh 0 0 2%; }
  .ph2 { width: 58%; margin: -5vh 0 0 auto; }
  .ph3 { width: 46%; margin: -3vh 0 0 6%; }
  .ph4 { width: 54%; margin: -12vh 0 0 auto; }
  .specs { margin: 6vh 26px 0 auto; }
  .trio { margin-top: 5vh; }
  .dough-shadow { width: 34vh; margin-left: -17vh; }
  .fr1 { height: 44vh; } .fr3 { height: 46vh; } .fr6 { height: 22vh; }
  .info { grid-template-columns: 1fr; gap: 22px; margin-top: 8vh; }
  .btn { padding: 18px 22px; gap: 18px; }
  .slice { width: 92vw; right: -24vw; top: 2vh; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-cols .r { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Preview y movimiento reducido ---------- */
html.is-preview { scrollbar-width: none; }
html.is-preview::-webkit-scrollbar { display: none; }
html.is-preview body { pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
}