@font-face{font-family:'BrandAnton';src:url('../pizzeria/assets/fonts/anton.woff2') format('woff2');font-display:block}
@font-face{font-family:'BrandScript';src:url('../pizzeria/assets/fonts/yellowtail.woff2') format('woff2');font-display:block}
/* =========================================================
   4B — UI editorial sobre la escena 3D
   Paleta: hormigón, ladrillo, crema, rojo, naranja, verde, rosa
   ========================================================= */
:root{
  --ink:#120b0a; --ink2:#1c1210; --cream:#f3e4cc; --cream2:#e6d3b3;
  --red:#ff4a2b; --orange:#ff8a3d; --green:#2f9e5f; --pink:#ff7ab0; --concrete:#8a8580;
  --f-disp:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --pad:clamp(16px,3vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--cream);-webkit-text-size-adjust:100%}
body{font-family:var(--f-disp);background:var(--ink);overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- escena ---------- */
.scrollspace{height:1800vh;pointer-events:none}
.gl{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;z-index:0;background:#120b0a}
.ui{position:fixed;inset:0;z-index:5;pointer-events:none;font-family:var(--f-disp)}
.ui>*{pointer-events:none}
.ui button,.ui a{pointer-events:auto}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:50;background:var(--ink);display:grid;place-content:center;justify-items:center;gap:18px;transition:opacity .9s ease .1s,visibility 0s linear 1s}
.loader.is-done{opacity:0;visibility:hidden}
.loader__mark{font-weight:800;font-size:clamp(64px,12vw,120px);letter-spacing:-.05em;line-height:1;color:var(--cream)}
.loader__bar{width:min(240px,50vw);height:2px;background:rgba(243,228,204,.16);overflow:hidden}
.loader__bar i{display:block;height:100%;width:0;background:var(--red);transition:width .25s ease}
.loader__txt{font:400 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.6}

/* ---------- barra superior ---------- */
.top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:var(--pad);z-index:3}
.top__logo{font-weight:800;font-size:26px;letter-spacing:-.05em;text-decoration:none;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.top__logo span{color:var(--red)}
.pill{display:inline-flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid rgba(243,228,204,.35);border-radius:999px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(10px);background:rgba(18,11,10,.35);transition:border-color .3s,background .3s}
.pill:hover{border-color:var(--cream);background:rgba(18,11,10,.6)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px}
.eq b{display:block;width:2px;height:3px;background:currentColor;border-radius:1px}
.pill[aria-pressed="true"] .eq b{animation:eq .9s ease-in-out infinite}
.pill[aria-pressed="true"] .eq b:nth-child(2){animation-delay:.15s}
.pill[aria-pressed="true"] .eq b:nth-child(3){animation-delay:.3s}
.pill[aria-pressed="true"] .eq b:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* ---------- capítulos (lateral) ---------- */
.chapters{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);display:flex;gap:14px;z-index:2}
.chapters ol{list-style:none;display:grid;gap:16px}
.chapters li{display:flex;gap:10px;align-items:baseline;opacity:.38;transition:opacity .5s,transform .5s;font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase}
.chapters li b{font-weight:500;max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .6s ease}
.chapters li.is-on{opacity:1;transform:translateX(4px)}
.chapters li.is-on b{max-width:200px}
.chapters li.is-on span{color:var(--red)}
.chapters__line{position:relative;width:1px;background:rgba(243,228,204,.18);order:-1}
.chapters__line i{position:absolute;left:0;top:0;width:1px;height:0;background:var(--red)}

/* ---------- título de apertura ---------- */
.title{position:absolute;left:var(--pad);bottom:12vh;max-width:min(680px,88vw);z-index:2;transition:opacity .4s linear}
.title__eye{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.title h1{font-weight:800;font-size:clamp(120px,24vw,300px);line-height:.82;letter-spacing:-.07em;text-shadow:0 8px 60px rgba(0,0,0,.55)}
.title h1 em{font-style:normal;color:var(--red)}
.title__sub{font:italic 400 clamp(20px,2.4vw,30px)/1.2 var(--f-serif);margin-top:14px;opacity:.9}

/* ---------- tarjeta de capítulo ---------- */
.card{position:absolute;right:var(--pad);bottom:11vh;max-width:min(360px,80vw);text-align:right;opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;z-index:2}
.card.is-on{opacity:1;transform:none}
.card__num{font:500 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--red);margin-bottom:10px}
.card__t{font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:.95;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.card__d{font:italic 400 clamp(17px,1.7vw,21px)/1.3 var(--f-serif);margin-top:10px;opacity:.85;text-shadow:0 2px 18px rgba(0,0,0,.7)}

/* ---------- bocadillos ---------- */
.bubbles{position:absolute;inset:0;overflow:hidden;z-index:4}
.bub{position:absolute;left:0;top:0;transform:translate3d(-999px,-999px,0);will-change:transform;opacity:0;pointer-events:none}
.bub__in{position:relative;transform-origin:50% 100%;transform:translateY(14px) scale(.6);opacity:0;transition:opacity .28s ease,transform .5s cubic-bezier(.2,1.3,.4,1)}
.bub.is-dot .bub__in,.bub.is-open .bub__in,.bub.is-out .bub__in{opacity:1;transform:none}
.bub.is-out .bub__in{opacity:0;transform:translateY(-14px) scale(.94);transition:opacity .45s ease,transform .5s ease}
.bub{opacity:1}
.bub__card{position:relative;background:var(--cream);color:var(--ink);border-radius:16px 16px 16px 4px;padding:0;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45),0 0 0 1px rgba(18,11,10,.9);width:14px;height:14px;border-radius:14px;transition:width .5s cubic-bezier(.2,.9,.3,1),height .5s cubic-bezier(.2,.9,.3,1),border-radius .5s ease}
.bub.is-open .bub__card{width:var(--w,210px);height:var(--h,64px);border-radius:16px 16px 16px 4px}
.bub.is-out .bub__card{width:var(--w,210px);height:var(--h,64px);border-radius:16px 16px 16px 4px}
.bub__txt{position:absolute;inset:0;padding:11px 15px 12px;display:grid;align-content:center;gap:3px;opacity:0;transition:opacity .3s ease .25s}
.bub.is-open .bub__txt{opacity:1}
.bub.is-out .bub__txt{opacity:1}
.bub__who{font:500 9.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--red))}
.bub__msg{font:500 15.5px/1.22 var(--f-disp);letter-spacing:-.01em;white-space:nowrap}
.bub__tail{position:absolute;left:16px;bottom:-9px;width:16px;height:12px;background:var(--cream);clip-path:polygon(0 0,100% 0,0 100%);opacity:0;transition:opacity .2s ease .15s;filter:drop-shadow(0 1px 0 rgba(18,11,10,.9))}
.bub.is-open .bub__tail,.bub.is-out .bub__tail{opacity:1}
.bub.is-right .bub__card{border-radius:16px 16px 4px 16px}
.bub.is-right .bub__tail{left:auto;right:16px;clip-path:polygon(0 0,100% 0,100% 100%)}
.bub.is-dot .bub__card{background:var(--c,var(--cream))}

/* ---------- indicaciones ---------- */
.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font:500 10px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;transition:opacity .5s;z-index:2}
.hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--cream),transparent);animation:hint 2.2s ease-in-out infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(243,228,204,.08);z-index:3}
.progress i{display:block;height:100%;width:0;background:var(--red)}
.letterbox{position:absolute;inset:0;box-shadow:inset 0 0 0 0 #000;transition:box-shadow 1s ease}
.grain{display:none}

/* ---------- siguiente sección ---------- */
.next{position:relative;z-index:6;min-height:100vh;background:var(--ink);display:grid;place-items:center;padding:12vh var(--pad);box-shadow:0 -60px 90px 20px var(--ink)}
.next__in{max-width:900px}
.next__eye{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin-bottom:22px}
.next h2{font-weight:800;font-size:clamp(44px,8vw,120px);line-height:.92;letter-spacing:-.05em}
.next h2 em{font:italic 400 1em/1 var(--f-serif);letter-spacing:-.02em;color:var(--orange)}
.next p:not(.next__eye){font:italic 400 clamp(19px,2vw,26px)/1.35 var(--f-serif);opacity:.8;margin-top:26px;max-width:560px}
.next__cta{display:inline-block;margin-top:34px;padding:16px 26px;border:1px solid var(--cream);border-radius:999px;text-decoration:none;font:500 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;transition:background .3s,color .3s}
.next__cta:hover{background:var(--cream);color:var(--ink)}

@media (max-width:820px){
  .chapters{left:12px}
  .chapters li b{display:none}
  .card{right:16px;bottom:9vh}
  .bub__msg{font-size:14px}
  .title{bottom:14vh}
}
@media (prefers-reduced-motion:reduce){
  .hint i{animation:none}
}

/* mirada libre 360° */
.gl{cursor:grab;touch-action:pan-y}
.gl.is-look{cursor:grabbing}
.lookhint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font:500 11px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.09em;text-transform:uppercase;color:rgba(239,228,208,.82);background:rgba(16,12,10,.42);border:1px solid rgba(239,228,208,.16);padding:9px 14px;border-radius:99px;backdrop-filter:blur(6px);opacity:0;transition:opacity .8s ease;white-space:nowrap}
.lookhint b{color:#ff7a4a;font-weight:600}
.lookhint.is-on{opacity:1}
@media (max-width:760px){.lookhint{display:none}}

/* subtítulos de la conversación */
.sub{position:fixed;left:50%;bottom:calc(64px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);z-index:5;max-width:min(760px,88vw);text-align:center;pointer-events:none;opacity:0;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.3,1)}
.sub.is-on{opacity:1;transform:translate(-50%,0)}
.sub__who{display:inline-block;margin-bottom:8px;padding:3px 10px 4px;border-radius:99px;background:var(--c,#ff4a2b);color:#120b0a;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.sub__txt{display:block;font-weight:600;font-size:clamp(18px,2.4vw,28px);line-height:1.22;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85),0 0 2px rgba(0,0,0,.9)}

/* subtítulos karaoke + aviso de scroll */
.sub__txt .w{opacity:.42;transition:opacity .16s ease,color .16s ease}
.sub__txt .w.on{opacity:1}
.nudge{position:fixed;left:50%;bottom:20px;transform:translate(-50%,8px);z-index:5;display:grid;justify-items:center;gap:6px;pointer-events:none;opacity:0;transition:opacity .5s ease,transform .5s ease;font:500 10px/1 var(--f-mono,ui-monospace,monospace);letter-spacing:.24em;text-transform:uppercase;color:rgba(243,228,204,.86);text-shadow:0 2px 10px rgba(0,0,0,.7)}
.nudge.is-on{opacity:1;transform:translate(-50%,0)}
.nudge i{display:block;width:1px;height:26px;background:linear-gradient(rgba(243,228,204,.9),transparent);animation:hint 1.8s ease-in-out infinite;transform-origin:top}
.chapters li:hover{opacity:.85}

.sound.is-hint,#soundBtn.is-hint{animation:soundHint 1.6s ease-in-out infinite;box-shadow:0 0 0 0 rgba(255,74,43,.55)}
@keyframes soundHint{0%{box-shadow:0 0 0 0 rgba(255,74,43,.55)}70%{box-shadow:0 0 0 12px rgba(255,74,43,0)}100%{box-shadow:0 0 0 0 rgba(255,74,43,0)}}

/* ---- móvil del ascensor + montaje de la web de la pizzería ---- */
.carta{position:fixed;inset:0;z-index:8;pointer-events:none;display:grid;place-items:end center;padding-bottom:clamp(20px,6vh,70px)}
.carta[hidden]{display:none}
.carta__phone{position:relative;width:min(300px,68vw);aspect-ratio:9/17.5;border-radius:38px;padding:9px;background:#151112;box-shadow:0 0 0 2px #2b2224,0 40px 80px -20px rgba(0,0,0,.8),0 0 120px rgba(212,42,36,.28);transform:translateY(120%) rotate(6deg);opacity:0;pointer-events:auto;transition:transform 1.1s cubic-bezier(.16,1,.3,1),opacity .6s}
.carta.is-in .carta__phone{transform:translateY(0) rotate(-3deg);opacity:1}
.carta.is-press .carta__phone{transform:translateY(-2%) rotate(-3deg) scale(1.04);transition-duration:.5s}
.carta__notch{position:absolute;left:50%;top:14px;width:84px;height:22px;border-radius:14px;background:#000;transform:translateX(-50%);z-index:2}
.carta__screen{height:100%;border-radius:30px;background:#F4EBCB;color:#1C1210;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;align-items:center;padding:52px 18px 20px;gap:10px;overflow:hidden}
.carta__app{font:400 34px/1 'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.carta__app span{font:400 40px/1 'Yellowtail',cursive;color:#A81E1A;text-transform:none;margin-right:4px}
.carta__pizza{width:88%;height:auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.35));animation:cartaSpin 14s linear infinite}
@keyframes cartaSpin{to{transform:rotate(360deg)}}
.carta__tag{font:italic 500 13px/1.35 'Fraunces',Georgia,serif;text-align:center;opacity:.85}
.carta__btn{width:100%;font:400 24px/1 'Anton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.03em;background:#A81E1A;color:#FFF8E4;border:0;border-radius:999px;padding:16px 10px 12px;cursor:pointer;animation:cartaPulse 1.6s ease-in-out infinite;transition:transform .2s,background .2s}
.carta__btn:hover{background:#1C1210}
.carta.is-press .carta__btn{animation:none;transform:scale(.94);background:#1C1210}
@keyframes cartaPulse{50%{box-shadow:0 0 0 12px rgba(168,30,26,.22)}}
.carta__finger{position:fixed;left:50%;top:78%;width:46px;height:46px;margin:-23px;border-radius:50%;background:rgba(255,248,228,.55);border:2px solid rgba(255,248,228,.9);opacity:0;pointer-events:none;z-index:9;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.pzmount{position:fixed;inset:0;z-index:60;transform:translateY(102%);visibility:hidden;pointer-events:none}
.pzmount.is-live{visibility:visible;pointer-events:auto}
body.in-pizzeria{overflow:hidden}
body.in-pizzeria .scrollspace,body.in-pizzeria .gl,body.in-pizzeria .ui,body.in-pizzeria .carta,body.in-pizzeria .letterbox{display:none!important}
@media (prefers-reduced-motion:reduce){.carta__pizza,.carta__btn{animation:none}}

/* ---------- atajo a la web de Da Mario (barra flotante sobre el edificio) ---------- */
.bnav{--c-tom:#E2412A;--c-tomd:#B9301E;--c-cre:#F2E6CD;--c-ink:#1B1210;--c-bas:#2E6B3B;position:absolute;left:50%;top:calc(var(--pad) + 50px);z-index:4;width:min(940px,calc(100% - 2*var(--pad)));display:flex;align-items:center;justify-content:space-between;gap:18px;padding:8px 10px 8px 22px;background:var(--c-cre);color:var(--c-ink);border:2.5px solid var(--c-ink);border-radius:999px;pointer-events:auto;opacity:0;transform:translate(-50%,-16px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1);box-shadow:0 14px 40px -14px rgba(0,0,0,.6)}
.bnav.is-in{opacity:1;transform:translate(-50%,0)}
.bnav a{text-decoration:none;color:inherit}
.bnav__brand{font:400 27px/1 'BrandAnton',Impact,sans-serif;text-transform:uppercase;padding-top:3px;white-space:nowrap}
.bnav__brand span{font:400 33px/1 'BrandScript','Brush Script MT',cursive;text-transform:none;color:var(--c-tomd);margin-right:4px}
.bnav__links{display:flex;gap:clamp(14px,2.4vw,36px)}
.bnav__links a{position:relative;font:400 12px/1 'BrandAnton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.12em;padding:6px 0;white-space:nowrap}
.bnav__links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--c-tom);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.bnav__links a:hover::after,.bnav__links a:focus-visible::after{transform:scaleX(1)}
.bnav__right{display:flex;align-items:center;gap:12px}
.bnav__open{display:inline-flex;align-items:center;gap:8px;font:400 11px/1 'BrandAnton',Impact,sans-serif;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.bnav__open i{width:10px;height:10px;border-radius:50%;background:var(--c-bas);animation:bnavPulse 2.2s infinite}
.bnav__open.is-closed i{background:var(--c-tomd);animation:none}
@keyframes bnavPulse{70%{box-shadow:0 0 0 9px rgba(27,18,16,0)}0%{box-shadow:0 0 0 0 rgba(27,18,16,.4)}}
.bnav__btn{display:inline-flex;align-items:center;gap:10px;font:400 12px/1 'BrandAnton',Impact,sans-serif;text-transform:uppercase;letter-spacing:.1em;padding:13px 16px 13px 20px;background:var(--c-tomd);color:#FFF8E6!important;border-radius:999px;transition:background .3s}
.bnav__btn:hover,.bnav__btn:focus-visible{background:var(--c-ink)}
.bnav__btn b{display:inline-grid;place-items:center;min-width:24px;height:24px;background:#FFF8E6;color:var(--c-tomd);border-radius:50%;font:400 12px/1 'BrandAnton',Impact,sans-serif}
.bnav.is-loading .bnav__btn{opacity:.75}
@media (max-width:860px){.bnav__open{display:none}}
@media (max-width:640px){.bnav__links{display:none}.bnav{padding:6px 8px 6px 18px}.bnav__brand{font-size:23px}.bnav__brand span{font-size:28px}}
@media (prefers-reduced-motion:reduce){.bnav{transition:opacity .2s}.bnav__open i{animation:none}}

/* ---------- inicio: sin logos 4B, bordes oscurecidos y arco de luz sobre las ventanas del loft ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.spot{--sx:38%;--sy:66%;--rx:34vw;--ry:20vh;position:absolute;inset:0;pointer-events:none;z-index:0;opacity:var(--o,1);
  background:
    radial-gradient(ellipse var(--rx) var(--ry) at var(--sx) var(--sy),rgba(6,3,2,0) 0%,rgba(6,3,2,0) 46%,rgba(6,3,2,.40) 76%,rgba(6,3,2,.62) 100%),
    radial-gradient(ellipse 80% 76% at 50% 46%,rgba(0,0,0,0) 44%,rgba(0,0,0,.6) 100%)}
.spot__glow{position:absolute;inset:0;mix-blend-mode:screen;background:radial-gradient(ellipse calc(var(--rx)*.95) calc(var(--ry)*1.2) at var(--sx) var(--sy),rgba(255,178,96,.22),rgba(255,140,60,.09) 55%,transparent 78%)}
.title__eye{font-size:12px;opacity:.95;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.title__sub{font-size:clamp(24px,3.2vw,42px);text-shadow:0 3px 24px rgba(0,0,0,.75)}
.hint{bottom:84px;padding:12px 22px 10px;gap:10px;font:600 13px/1 var(--f-mono);letter-spacing:.32em;color:#fff;background:rgba(14,8,6,.62);border:1px solid rgba(243,228,204,.5);border-radius:26px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-shadow:0 1px 8px rgba(0,0,0,.6);z-index:3}
.hint i{height:30px}

/* subtítulos legibles sobre cualquier fondo (camisetas claras, ventanas): velo suave detrás y sin la tarjeta del capítulo mientras hay diálogo */
.sub{padding:12px 20px 14px}
.sub::before{content:'';position:absolute;inset:-14px -46px;z-index:-1;background:radial-gradient(ellipse at 50% 55%,rgba(10,5,4,.7) 0,rgba(10,5,4,.5) 48%,rgba(10,5,4,0) 76%);filter:blur(5px);pointer-events:none}
#ui:has(#sub.is-on) .card{opacity:0!important;transition-duration:.2s}