/* =================================================================
   Rodízio & Diversão — "Mundo mágico vivo" engine
   Design system + layer slots + dark film + foreground content
   ================================================================= */
:root{
  /* brand UI colors (spec §3) */
  --gold:#FFD23F; --cyan:#46ECFF; --magenta:#FF5CE1; --purple:#B36BFF; --green:#3DF5A6;
  --wa1:#2fe673; --wa2:#129a4b; --wa-sh:#0b6b38; --yellow:#FEDC02;
  --bg:#0a0612; --glass:rgba(14,10,26,.46);

  /* world layout — the source art's aspect (1536x2752 ≈ 0.558) */
  --world-aspect: 0.558;

  /* DARK FILM strength — balanced so the concept art reads RICH & detailed
     behind, while content still pops with contrast (client rejected both
     too-dark=washed and too-light=no contrast). 0=world visible, 1=black.
     Per-section contrast comes mostly from text-shadow + the vignette, so the
     film itself can stay light. Overridden a touch heavier on mobile.       */
  /* Lightened so the VIVID approved world art reads through (client wants the
     colours to pop like the concept stills). Contrast for text comes from
     text-shadow + the vignette, not a heavy film. */
  --film-top: .12;
  --film-mid: .24;
  --film-bot: .36;

  /* parallax travel scale (multiplied per-layer in engine.js) */
  --pll: 1;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}            /* Lenis owns smoothing */
html,body{height:100%}
body{
  background:var(--bg);
  color:#fff;
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}

/* =================================================================
   INTRO GATE — fullscreen hero short, fades out to reveal the home
   ================================================================= */
body.gate-on{ overflow:hidden; height:100%; }
#intro-gate{
  position:fixed; inset:0; z-index:100;
  background:#040308;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity .85s ease;
}
#intro-gate.gone{ opacity:0; pointer-events:none; }
#intro-video{
  width:100%; height:100%;
  object-fit:contain;                 /* portrait clip: fill mobile, letterbox desktop */
  background:#040308;
}
#gate-skip, #gate-sound{
  position:absolute; z-index:2;
  font-family:"Fredoka",sans-serif; font-weight:600; font-size:.9rem;
  color:#fff; background:rgba(10,6,18,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); border-radius:999px;
  padding:11px 18px; cursor:pointer; line-height:1;
  transition:transform .15s ease, background .2s ease;
}
#gate-skip:hover, #gate-sound:hover{ background:rgba(179,107,255,.4); transform:translateY(-1px); }
#gate-skip{ right:max(16px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); }
#gate-sound{ left:max(16px,env(safe-area-inset-left)); bottom:max(20px,env(safe-area-inset-bottom)); }

/* =================================================================
   MENU — fixed header (logo reveals on scroll) + mobile drawer
   ================================================================= */
#menu{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px clamp(14px,4vw,30px);
  transition:background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
}
#menu.rolou{ background:rgba(10,6,18,.74); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 6px 26px rgba(0,0,0,.45); }
#menu .m-logo{ flex:0 0 auto; line-height:0; opacity:0; transform:translateY(-6px);
  transition:opacity .3s ease, transform .3s ease; }
#menu .m-logo img{ height:clamp(34px,7vw,46px); width:auto; display:block; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); }
#menu.rolou .m-logo{ opacity:1; transform:none; }
.m-nav{ display:none; }
.m-zap{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font-family:"Fredoka",sans-serif; font-weight:700; font-size:.92rem; color:#06210f;
  background:linear-gradient(180deg,var(--wa1),var(--wa2)); padding:9px 16px; border-radius:999px;
  box-shadow:0 5px 0 var(--wa-sh), 0 8px 18px rgba(18,154,75,.4); }
.m-zap svg{ width:17px; height:17px; }
#m-burger{ flex:0 0 auto; width:44px; height:44px; display:flex; flex-direction:column; justify-content:center;
  gap:5px; background:rgba(14,10,26,.55); border:1px solid rgba(255,255,255,.22); border-radius:12px; cursor:pointer;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:0 11px; }
#m-burger span{ display:block; height:2.5px; background:#fff; border-radius:3px; transition:transform .3s, opacity .3s; }
body.drawer-open #m-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
body.drawer-open #m-burger span:nth-child(2){ opacity:0; }
body.drawer-open #m-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
@media (min-width:920px){
  .m-nav{ display:flex; gap:20px; margin-left:auto; align-items:center;
    font-family:"Fredoka",sans-serif; font-weight:600; font-size:.95rem; }
  .m-nav a{ color:#efe9ff; text-decoration:none; opacity:.92; transition:color .2s; }
  .m-nav a:hover{ color:var(--gold); }
  .m-zap{ margin-left:22px; }
  #m-burger{ display:none; }
}

/* mobile drawer */
#m-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:55; width:min(82vw,320px);
  background:linear-gradient(180deg,#160d2e,#0a0612); box-shadow:-12px 0 40px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:2px; padding:84px 22px 30px;
  transform:translateX(105%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  border-left:1px solid rgba(179,107,255,.3);
}
body.drawer-open #m-drawer{ transform:none; }
#m-drawer a{ color:#efe9ff; text-decoration:none; font-family:"Fredoka",sans-serif; font-weight:600;
  font-size:1.05rem; padding:13px 8px; border-radius:10px; transition:background .2s, color .2s; }
#m-drawer a:hover{ background:rgba(179,107,255,.16); color:var(--gold); }
#m-drawer hr{ border:0; border-top:1px solid rgba(255,255,255,.12); margin:10px 4px; }
#m-drawer .d-zap{ margin-top:10px; text-align:center; color:#06210f;
  background:linear-gradient(180deg,var(--wa1),var(--wa2)); box-shadow:0 5px 0 var(--wa-sh); }
#m-scrim{ position:fixed; inset:0; z-index:54; background:rgba(4,2,10,.55); opacity:0; pointer-events:none;
  transition:opacity .35s ease; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
body.drawer-open #m-scrim{ opacity:1; pointer-events:auto; }

/* ---- floating MUSIC toggle (shown only when the track loads) ---- */
#music-btn{ position:fixed; left:max(14px,env(safe-area-inset-left)); bottom:max(16px,env(safe-area-inset-bottom));
  z-index:48; width:48px; height:48px; border-radius:50%; cursor:pointer; display:none;
  align-items:center; justify-content:center; font-size:1.2rem;
  background:rgba(14,10,26,.62); border:1px solid rgba(255,210,63,.5); color:var(--gold);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.45); }
#music-btn.ready{ display:flex; }
#music-btn.playing{ animation:musPulse 1.8s ease-in-out infinite; }
@keyframes musPulse{ 0%,100%{box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 0 rgba(255,210,63,.4)} 50%{box-shadow:0 6px 20px rgba(0,0,0,.45), 0 0 0 8px rgba(255,210,63,0)} }

/* =================================================================
   THE LIVING WORLD  (fixed canvas behind everything)
   ================================================================= */
#world{
  position:fixed; inset:0; z-index:0;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 8%, #221038 0%, #0a0612 62%);
  /* a touch of base color in case layers are still loading */
}

/* full-bleed magic-world scenes — engine cross-fades + gently dollies them.
   Sharp full images (no slicing) => the dragon never doubles, never blurs. */
.wscene{
  position:absolute; inset:0;
  background-size:cover; background-position:center top;   /* show the TOP (the dragon/sky) on wide viewports */
  background-repeat:no-repeat;
  opacity:0; transform:scale(1.04);
  will-change:transform,opacity; backface-visibility:hidden;
  pointer-events:none;
}
.wscene:first-child{ opacity:1; }    /* hero scene visible before JS / reduced-motion */

/* HOME: one tall stitched world the camera DESCENDS through (engine pans
   background-position-y). 100% width => sharp; taller-than-viewport => pannable. */
.wscene--strip{
  background-size:100% auto;
  background-position:center 0%;
  transform:none;
}

/* breathing room at the end so the camera dwells fully on the final city scene */
.world-finale{ min-height:92vh; pointer-events:none; }

/* container the parallax layers live in */
#layers{position:absolute; inset:0;}

/* each scene (exterior pillars / carved city) is its own stacked group so the
   engine can cross-fade between them. They occupy the same box; depth bands
   register identically -> a clean dissolve from outside into the city. */
.scene{position:absolute; inset:0; will-change:opacity; backface-visibility:hidden;}
#scene-exterior{z-index:1;}   /* on top at the start of the journey */
#scene-city{z-index:0;}       /* rises in beneath as we descend */

/* ---- LAYER SLOT ------------------------------------------------
   Every depth band is one of these. engine.js sets, per layer:
     --top   : top offset as % of the world stage height
     --w     : width as % of stage width (>100 = overscan for pan room)
     left/transform are handled here. The art file is the background.
   To drop FINAL layered art: replace the .webp files in assets/world/,
   keep (or regenerate) layers.json, and the slots fill automatically. */
.layer{
  position:absolute;
  left:50%;
  top:var(--top, 0%);
  width:var(--w, 116%);
  transform:translate3d(-50%,0,0) scale(var(--s,1));
  transform-origin:50% 40%;
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  will-change:transform;
  backface-visibility:hidden;
  pointer-events:none;
}
/* aspect is enforced via inline height in engine (per layer h/w) */

/* COVER scaling is computed PER SCENE in engine.js (setSceneCover): the
   exterior is portrait, the desktop city is 16:9 — a single stage scale can't
   cover both, so each scene gets its own --cover-scale and the engine multiplies
   the scroll push-in on top. Overflow is clipped by #world. */
#layers{ transform-origin:50% 42%; }

/* atmospheric haze washes between depths -> "entering the mist" */
.atmo{position:absolute; left:0; right:0; pointer-events:none; will-change:transform,opacity; mix-blend-mode:screen;}
.atmo-far{ top:18%; height:46%;
  background:radial-gradient(60% 70% at 50% 40%, rgba(120,90,200,.20), transparent 70%);}
.atmo-near{ top:46%; height:54%;
  background:radial-gradient(70% 60% at 50% 60%, rgba(70,236,255,.12), transparent 72%);}

/* =================================================================
   LIVING CREATURES
   ================================================================= */
#creatures{position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;}

/* fireflies + glints are spawned by engine.js as .spark elements */
.spark{
  position:absolute; border-radius:50%;
  width:var(--sz,6px); height:var(--sz,6px);
  background:radial-gradient(circle, #fff 0%, var(--c,#FFD23F) 45%, transparent 72%);
  opacity:0; will-change:transform,opacity; mix-blend-mode:screen;
  filter:drop-shadow(0 0 6px var(--c,#FFD23F));
}
.glint{ mix-blend-mode:screen; filter:blur(.4px) drop-shadow(0 0 8px var(--cyan)); }

/* fairy = bright core + soft halo + a trailing tail (CSS) */
.fairy{
  position:absolute; left:0; top:0; width:14px; height:14px;
  will-change:transform; pointer-events:none;
}
.fairy::before{ /* halo + core */
  content:""; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, var(--fc,#FF5CE1) 38%, transparent 70%);
  filter:drop-shadow(0 0 10px var(--fc,#FF5CE1));
}
.fairy .trail{
  position:absolute; left:50%; top:50%; width:46px; height:4px; border-radius:4px;
  transform:translate(-100%,-50%);
  background:linear-gradient(90deg, transparent, var(--fc,#FF5CE1));
  filter:blur(1.5px); opacity:.7;
}

/* DRAGON sprite — engine animates the flight path; CSS flaps the wings */
/* animated flying dragon — a LIVING creature that glides across the world.
   It flies through the MID sky (engine flyDragon y≈35–55%), so it reads as a
   dragon soaring THROUGH the scene, not a ghost on top of the painted one. */
#dragon{ position:absolute; top:0; left:0; width:300px; z-index:3; pointer-events:none; will-change:transform; opacity:0; }
#dragon img{width:100%; height:auto; filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));}
#dragon .wing-near{transform-origin:150px 96px; animation:flap 2.4s ease-in-out infinite;}
#dragon .wing-far{transform-origin:150px 92px; animation:flap 2.4s ease-in-out infinite; animation-delay:-.12s; }
@keyframes flap{
  0%,100%{transform:rotate(0deg) scaleY(1)}
  50%    {transform:rotate(-14deg) scaleY(.86)}
}

/* =================================================================
   DARK FILM + VIGNETTE  (between world and content)
   ================================================================= */
#film{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(8,5,16, var(--film-top))  0%,
    rgba(8,5,16, var(--film-mid))  46%,
    rgba(8,5,16, var(--film-bot)) 100%);
}
#vignette{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(4,2,10,.72) 100%);
}

/* =================================================================
   FOREGROUND CONTENT
   ================================================================= */
#content{position:relative; z-index:5;}

.screen{min-height:100svh; display:flex; align-items:center; justify-content:center;}
.block{
  max-width:760px; margin:0 auto;
  padding:clamp(64px,12vh,140px) 22px;
}

/* ---- typography ---- */
.eyebrow{
  font-family:"Fredoka",sans-serif; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; font-size:.78rem; color:var(--cyan);
  text-shadow:0 0 16px rgba(70,236,255,.5); margin-bottom:.5rem;
}
.display{
  font-family:"Cinzel Decorative",serif; font-weight:900; line-height:1.04;
  font-size:clamp(2.2rem,8vw,4.6rem);
  overflow-wrap:break-word; word-break:normal; hyphens:none;   /* never split a word mid-glyph awkwardly */
  background:linear-gradient(180deg,#fff, #ffe9a8 60%, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(255,210,63,.25));
  margin-bottom:1rem;
}
.lede{
  font-size:clamp(1.05rem,2.6vw,1.25rem); line-height:1.6; color:#f1ecff;
  max-width:46ch; margin-bottom:1.6rem;
  /* stronger readability over the bright parallax bands */
  text-shadow:0 2px 10px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.6);
}

/* ---- glass cards (foreground, neon glow) ---- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(179,107,255,.35);
  border-radius:22px;
  box-shadow:
    0 18px 50px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(70,236,255,.06);
}

/* ---- HERO ---- */
#hero{position:relative; overflow:hidden;}
#stars{position:absolute; inset:0; pointer-events:none;}
.st{position:absolute; width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;box-shadow:0 0 6px #fff;will-change:transform,opacity;}
#flash{position:absolute; left:50%; top:42%; width:40px;height:40px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
  background:radial-gradient(circle,#fff 0%, rgba(255,230,160,.9) 30%, rgba(255,210,63,0) 70%);
  mix-blend-mode:screen; will-change:transform,opacity;}
#burst{position:absolute; left:50%; top:42%; width:0;height:0; pointer-events:none;}
.pcl{position:absolute; left:0;top:0; border-radius:50%; transform:translate(-50%,-50%); will-change:transform,opacity; mix-blend-mode:screen;}

.hero-stage{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:6vh 7vw;}

/* LIVING LOGO ----------------------------------------------------
   .logo-live wraps the <img> + the #logo-fx overlay. The overlay is the
   EXACT box of the rendered image; engine.js places eyelids/smile-glows in
   % of that box, so they track the logo at any size. The art is untouched. */
.logo-live{position:relative; display:inline-block; line-height:0;
  width:min(82vw,520px); max-height:36vh;}
#logo{width:100%; height:auto; max-height:36vh; object-fit:contain; opacity:0; transform:scale(.2);
  will-change:transform,opacity; filter:drop-shadow(0 8px 26px rgba(0,0,0,.55));}
.logo-fx{position:absolute; inset:0; pointer-events:none; z-index:2;
  /* the fx layer inherits the SAME transform feel as the logo via JS sync */}
/* an eyelid = a rounded cap, skin-colored, hinged at its TOP. Closed = full
   height (covers the eye); open = scaleY(0) (invisible). A faint lower rim +
   inner shadow sell it as a real lid sweeping down. */
.eyelid{position:absolute; transform-origin:50% 0%; transform:scaleY(0);
  border-radius:46% 46% 50% 50%/70% 70% 40% 40%;
  background:linear-gradient(180deg, var(--lid-hi, #d23) 0%, var(--lid, #b22) 64%, var(--lid-lo,#7a1410) 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  will-change:transform;}
/* smile glow = a soft warm bloom that pulses over a mouth (faces "beaming") */
.smileglow{position:absolute; border-radius:50%; opacity:0; will-change:opacity,transform;
  background:radial-gradient(circle, rgba(255,240,180,.55) 0%, rgba(255,210,90,.18) 45%, transparent 72%);
  mix-blend-mode:screen;}
#tag{margin-top:2.4vh; font-family:"Fredoka",sans-serif; font-weight:700; color:#fff;
  font-size:clamp(1rem,4.6vw,1.55rem); opacity:0; transform:translateY(16px); max-width:18ch;
  text-shadow:0 2px 14px rgba(0,0,0,.6), 0 0 18px rgba(179,107,255,.45);}
#tag b{color:var(--yellow)}
#ctas{margin-top:3vh; display:flex; flex-direction:column; gap:14px; align-items:center; width:min(86vw,420px);}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:"Fredoka",sans-serif; font-weight:700; font-size:1.08rem; letter-spacing:.01em;
  text-decoration:none; padding:15px 22px; border-radius:999px; border:0; cursor:pointer; width:100%;
  will-change:transform; transition:transform .15s ease;}
.btn:active{transform:translateY(2px) scale(.99)}
.btn svg{width:20px;height:20px; flex:0 0 auto}
.btn-wa{color:#06210f; background:linear-gradient(180deg,var(--wa1),var(--wa2));
  box-shadow:0 7px 0 var(--wa-sh), 0 12px 26px rgba(18,154,75,.42);}
.btn-sec{color:#3a2410; background:linear-gradient(180deg,#FFE36b,var(--yellow));
  box-shadow:0 7px 0 #c9a400, 0 12px 24px rgba(254,220,2,.3);}
.btn-lg{font-size:1.15rem; padding:18px 24px;}
#ctas .btn{opacity:0; transform:translateY(20px);}

.scroll-hint{position:absolute; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#cdbff5; z-index:2;
  font-family:"Fredoka",sans-serif; font-size:.82rem; letter-spacing:.05em; opacity:.0;
  text-shadow:0 2px 10px rgba(0,0,0,.7);}
.scroll-hint svg{width:22px;height:22px; animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---- RODÍZIO prices ---- */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:6px 0 26px;}
.price-card{padding:22px 18px; text-align:center; display:flex; flex-direction:column; gap:6px;}
.price-card--gold{border-color:rgba(255,210,63,.5); box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(255,210,63,.18), inset 0 1px 0 rgba(255,255,255,.1);}
.price-day{font-family:"Fredoka",sans-serif; font-weight:600; color:#d7c8ff; font-size:.92rem;}
.price-val{font-family:"Cinzel Decorative",serif; font-weight:900; color:#fff; font-size:clamp(2rem,9vw,2.8rem); line-height:1;}
.price-val i{font-style:normal; font-size:.5em; color:var(--gold); vertical-align:.5em; margin-right:2px;}
.price-val sup{font-size:.42em; color:var(--gold);}
.price-foot{color:#b9aee0; font-size:.82rem;}

.taste-list{display:flex; flex-wrap:wrap; gap:10px 12px; justify-content:center; list-style:none;}
.taste-list li{font-family:"Fredoka",sans-serif; font-weight:600; font-size:.98rem; color:#fff;
  background:rgba(179,107,255,.14); border:1px solid rgba(179,107,255,.34);
  padding:10px 16px; border-radius:999px; text-shadow:0 1px 8px rgba(0,0,0,.6);}

/* ---- MAGIC DOOR component (+ gallery) lives in door.css (portable) ---- */
/* wider container for the 3+3 door gallery */
.block--wide{ max-width:1120px; }
.gallery-cta{ margin-top:clamp(40px,7vw,64px); text-align:center; color:#f3eeff;
  font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.45;
  max-width:24ch; margin-inline:auto;}
.gallery-cta .btn-inline{ display:inline-flex; width:auto; margin-top:12px; }

/* ---- MANIFESTO (frase oficial do cliente) ---- */
.manifesto{ margin:clamp(34px,6vw,52px) auto 0; max-width:660px; text-align:center;
  font-family:"Cinzel Decorative",serif; font-weight:700; font-style:italic;
  font-size:clamp(1.08rem,3.5vw,1.46rem); line-height:1.46; color:#fff;
  text-shadow:0 0 22px rgba(255,210,63,.32), 0 2px 10px rgba(0,0,0,.65);}

/* ---- ESPAÇO cards ---- */
.card-row{display:grid; grid-template-columns:1fr; gap:14px;}
.info-card{padding:20px;}
.info-card h3{font-family:"Fredoka",sans-serif; font-weight:700; color:var(--cyan); margin-bottom:6px; font-size:1.1rem;}
.info-card p{color:#d7cdf0; font-size:.96rem;}

/* ---- RESERVAR ---- */
.reserve-card{padding:26px 22px; text-align:center; display:flex; flex-direction:column; gap:14px; align-items:center;}
.reserve-perk{font-size:1.08rem; color:#fff;}
.reserve-perk b{color:var(--green)}
.reserve-warn{color:var(--gold); font-family:"Fredoka",sans-serif; font-weight:600;}
.reserve-addr{color:#c2b6e6; font-size:.9rem; margin-top:4px;}
.site-foot{text-align:center; color:#8c80b0; font-size:.84rem; padding:30px 0 60px;}

/* ---- reveal-on-scroll ---- */
.reveal{opacity:0; transform:translateY(34px);}      /* engine animates in */

/* dev badge */
#dev{position:fixed; right:10px; bottom:10px; z-index:60; font-family:monospace; font-size:.72rem;
  color:#9affd0; background:rgba(10,6,18,.8); border:1px solid rgba(70,236,255,.3); padding:5px 9px; border-radius:8px;}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (min-width:720px){
  .card-row{grid-template-columns:repeat(3,1fr);}
}

/* mobile: a touch heavier film (small screen, content denser) + tame
   creatures (engine also caps counts). Still balanced — world stays readable. */
@media (max-width:719px){
  :root{ --film-top:.16; --film-mid:.30; --film-bot:.44; }
  /* smaller display headings so long words (ex: "brinquedoteca") never break mid-word */
  .display{ font-size:clamp(1.95rem,7.4vw,3rem); }
  #dragon{ width:clamp(130px,42vw,200px); }
  .atmo{ opacity:.7 }
  /* lighter glass blur on mobile = far cheaper per-frame compositing */
  .glass{ -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  /* offscreen blocks skip layout/paint until scrolled near */
  .block{ content-visibility:auto; contain-intrinsic-size:auto 720px; }
}

/* low-power devices (engine adds .lite to <html>): drop the most
   expensive compositing — backdrop blur + screen blending. */
html.lite .glass{ -webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(14,10,26,.74); }
html.lite .spark, html.lite .fairy::before, html.lite .glint{ mix-blend-mode:normal; }
html.lite .atmo{ display:none; }

/* =================================================================
   MIRROR BUILD — Pizza Gyn structure in the Magic theme
   (destaques · rotas · personagens · espaço · transparência ·
    reservar · footer). Brand accents woven as colored keywords.
   ================================================================= */

/* colored keyword spans inside the .display h2 — MAGIC palette (no brand red) */
.display .tr{ color:var(--magenta); -webkit-text-fill-color:var(--magenta);
  filter:drop-shadow(0 0 18px rgba(255,92,225,.55)); }
.display .tg{ color:var(--green); -webkit-text-fill-color:var(--green);
  filter:drop-shadow(0 0 18px rgba(61,245,166,.5)); }
.display .ty{ color:var(--gold); -webkit-text-fill-color:var(--gold);
  filter:drop-shadow(0 0 18px rgba(255,210,63,.55)); }

/* squiggle underline accent (decorative divider under a kicker/title) */
.squiggle{ display:block; width:120px; height:12px; margin:10px auto 0;
  background:
    radial-gradient(circle at 10px 6px,transparent 5px,var(--magenta) 6px,transparent 7px) 0 0/24px 12px repeat-x;
  opacity:.7; filter:drop-shadow(0 0 8px rgba(255,92,225,.5)); }

/* ---- 1 · DESTAQUES (supporting line under each video door) ---- */
.door-line{ margin:10px auto 0; max-width:30ch; text-align:center;
  font-family:"Nunito",sans-serif; font-weight:600; line-height:1.45;
  font-size:clamp(.9rem,2.6vw,1rem); color:#d9d0f2;
  text-shadow:0 2px 10px rgba(0,0,0,.7); }

/* ---- 2 · ROTAS (anchor cards to the dedicated LPs) ---- */
.rotas{ display:grid; grid-template-columns:1fr; gap:14px; }
.rota{ display:flex; align-items:center; gap:16px; padding:18px 20px;
  text-decoration:none; transition:transform .18s ease, border-color .2s ease, box-shadow .2s ease; }
.rota:hover,.rota:focus-visible{ transform:translateY(-3px);
  border-color:rgba(70,236,255,.6);
  box-shadow:0 22px 54px rgba(0,0,0,.55), 0 0 30px rgba(70,236,255,.2), inset 0 1px 0 rgba(255,255,255,.1); }
.rota-ico{ font-size:2rem; line-height:1; flex:0 0 auto;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.rota-body{ display:flex; flex-direction:column; gap:3px; flex:1 1 auto; min-width:0; }
.rota-title{ font-family:"Fredoka",sans-serif; font-weight:700; color:#fff;
  font-size:1.12rem; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.rota-desc{ color:#cabfe8; font-size:.9rem; line-height:1.4; }
.rota-go{ flex:0 0 auto; font-family:"Fredoka",sans-serif; font-weight:700;
  color:var(--cyan); font-size:1rem; text-shadow:0 0 12px rgba(70,236,255,.5); }

/* ---- 4 · ESPAÇO — static gold-glow photo frames (NOT doors) ---- */
.fotos{ column-count:2; column-gap:clamp(14px,3vw,22px); margin-top:clamp(24px,4vw,36px); }
.foto{ position:relative; break-inside:avoid; margin:0 0 clamp(14px,3vw,22px); border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,210,63,.5);
  box-shadow:0 16px 44px rgba(0,0,0,.5), 0 0 26px rgba(255,210,63,.16), inset 0 1px 0 rgba(255,255,255,.08);
  background:#0c0820; }
.foto img{ width:100%; height:auto; display:block;
  transition:transform .5s ease; }
.foto:hover img{ transform:scale(1.05); }

/* manifesto small attribution line */
.manifesto small{ display:block; margin-top:.9rem;
  font-family:"Fredoka",sans-serif; font-style:normal; font-weight:600;
  font-size:.86rem; letter-spacing:.04em; color:var(--gold);
  text-shadow:0 0 14px rgba(255,210,63,.4); }

/* ---- 5 · TRANSPARÊNCIA — two columns + prices table ---- */
.transparencia{ display:grid; grid-template-columns:1fr; gap:16px;
  margin-top:clamp(24px,4vw,36px); }
.tcol{ padding:22px 22px; }
.tcol h3{ font-family:"Fredoka",sans-serif; font-weight:700; font-size:1.18rem;
  margin-bottom:14px; }
.tcol--in h3{ color:var(--green); text-shadow:0 0 14px rgba(61,245,166,.4); }
.tcol--out h3{ color:var(--gold); text-shadow:0 0 14px rgba(255,210,63,.4); }
.tcol ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.tcol li{ position:relative; padding-left:28px; color:#e9e2ff; line-height:1.45;
  font-size:.98rem; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.tcol--in li::before{ content:"✓"; position:absolute; left:0; top:0;
  color:#02B602; font-weight:800; font-size:1.05rem;
  text-shadow:0 0 10px rgba(2,182,6,.6); }
.tcol--out li::before{ content:"•"; position:absolute; left:6px; top:-2px;
  color:var(--gold); font-size:1.4rem; line-height:1; }

.precos{ margin-top:clamp(24px,4vw,36px); }
.precos-title{ font-family:"Cinzel Decorative",serif; font-weight:700;
  text-align:center; color:#fff; font-size:clamp(1.2rem,4.5vw,1.6rem);
  margin-bottom:16px; text-shadow:0 0 18px rgba(255,210,63,.35), 0 2px 10px rgba(0,0,0,.6); }
.preco-tabela{ width:100%; max-width:560px; margin:0 auto; border-collapse:collapse;
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(179,107,255,.35); border-radius:18px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.preco-tabela tr{ border-bottom:1px solid rgba(179,107,255,.18); }
.preco-tabela tr:last-child{ border-bottom:0; }
.preco-tabela th{ text-align:left; padding:14px 18px; font-family:"Nunito",sans-serif;
  font-weight:700; color:#e9e2ff; font-size:.96rem; }
.preco-tabela td{ text-align:right; padding:14px 18px; white-space:nowrap;
  font-family:"Cinzel Decorative",serif; font-weight:700; color:var(--gold);
  font-size:1.06rem; text-shadow:0 0 12px rgba(255,210,63,.3); }
.precos-foot{ text-align:center; color:#b9aee0; font-size:.86rem; margin-top:14px; }

/* ---- 6 · RESERVAR — spinning selo badge ---- */
.selo{ position:relative; display:inline-flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; width:170px; height:170px; border-radius:50%;
  padding:18px; text-align:center; color:#1a0f02;
  background:conic-gradient(from 0deg,#FFE36b,var(--yellow),#FFD23F,#FFE36b,var(--yellow));
  box-shadow:0 14px 40px rgba(0,0,0,.5), 0 0 34px rgba(254,220,2,.45),
    inset 0 0 0 4px rgba(255,255,255,.5), inset 0 0 0 7px var(--magenta);
  animation:seloSpin 14s linear infinite; }
@keyframes seloSpin{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
.selo-emoji{ font-size:1.8rem; line-height:1; }
.selo-txt{ font-family:"Fredoka",sans-serif; font-weight:700; line-height:1.15;
  font-size:.78rem; letter-spacing:.01em; max-width:130px;
  /* counter-spin the text so it stays readable while the disc rotates */
  animation:seloSpinTxt 14s linear infinite; }
@keyframes seloSpinTxt{ from{ transform:rotate(0) } to{ transform:rotate(-360deg) } }

/* ---- 7 · FOOTER ---- */
.site-footer{ border-top:1px solid rgba(179,107,255,.25);
  margin-top:clamp(20px,4vw,40px); }
.foot-grid{ display:grid; grid-template-columns:1fr; gap:30px; text-align:center; }
.foot-brand img{ margin:0 auto 12px; width:min(60vw,220px); height:auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)); }
.foot-brand p{ color:#cabfe8; font-size:.92rem; line-height:1.5; max-width:34ch; margin:0 auto;
  text-shadow:0 1px 8px rgba(0,0,0,.5); }
.foot-col h4{ font-family:"Fredoka",sans-serif; font-weight:700; color:var(--cyan);
  font-size:1.02rem; margin-bottom:10px; letter-spacing:.04em;
  text-shadow:0 0 12px rgba(70,236,255,.4); }
.foot-col p{ color:#d7cdf0; font-size:.94rem; line-height:1.55; margin-bottom:6px; }
.foot-col a{ color:#d7cdf0; text-decoration:none; transition:color .18s ease; }
.foot-col a:hover{ color:var(--gold); }
.foot-copy{ text-align:center; color:#8c80b0; font-size:.82rem;
  padding:28px 0 60px; margin-top:30px; border-top:1px solid rgba(179,107,255,.14); }

/* ---- responsive: desktop layouts for the mirror sections ---- */
@media (min-width:720px){
  .rotas{ grid-template-columns:repeat(3,1fr); }
  .rota{ flex-direction:column; text-align:center; gap:10px; padding:26px 20px; }
  .rota-body{ align-items:center; }
  .transparencia{ grid-template-columns:1fr 1fr; }
  .fotos{ column-count:3; }
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; text-align:left; align-items:start; }
  .foot-brand img{ margin:0 0 12px; }
  .foot-brand p{ margin:0; }
}

/* =================================================================
   REDUCED MOTION — static crisp world, no parallax/creatures
   ================================================================= */
@media (prefers-reduced-motion: reduce){
  .selo{ animation:none !important; }
  .selo-txt{ animation:none !important; }
  #layers, #creatures, #flash, #burst, #stars, #bg-video{ display:none !important; }
  #world-static{ opacity:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  #logo{ opacity:1 !important; transform:none !important; }
  #logo-fx{ display:none !important; }          /* living-logo overlay off */
  #tag, #ctas .btn{ opacity:1 !important; transform:none !important; }
  #dragon .wing-near, #dragon .wing-far{ animation:none !important; }
  .scroll-hint{ opacity:.7 !important; }
}