/* ============================================================
   MUNDO IMPRESSO — O mundo em camadas
   Paleta: preto #0A0A0B · grafite #17181A/#212226 · branco quente
   #F5EFE6 · âmbar #E8A33D / #B97A1F
   Tipografia: Fraunces (display editorial) + Instrument Sans
   ============================================================ */

:root{
  --ink:#0A0A0B;
  --graphite:#17181A;
  --graphite-2:#212226;
  --warm:#F5EFE6;
  --warm-dim:rgba(245,239,230,.62);
  --warm-faint:rgba(245,239,230,.38);
  --amber:#E8A33D;
  --amber-deep:#B97A1F;
  --line:rgba(245,239,230,.12);
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pad:clamp(1.25rem, 4vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth }
html.lenis, html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }

body{
  background:var(--ink);
  color:var(--warm);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100% }
a{ color:inherit }

::selection{ background:var(--amber); color:var(--ink) }

/* ---------- utilitários tipográficos ---------- */
.eyebrow{
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--amber);
  font-weight:600;
}
.amber{ color:var(--amber) }

/* ---------- cabeçalho ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem var(--pad);
  background:linear-gradient(to bottom, rgba(10,10,11,.85), rgba(10,10,11,0));
  pointer-events:none;
}
.site-header > *{ pointer-events:auto }
.brand{
  display:flex; align-items:center; gap:.75rem;
  text-decoration:none;
}
.brand img{ width:44px; height:44px; border-radius:10px }
.brand-name{
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:500;
  letter-spacing:.01em;
}
.brand-name em{ font-style:italic; color:var(--amber) }
.brand-slogan{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(.9rem, 1.6vw, 1.05rem);
  color:var(--warm-dim);
}

/* ---------- trilho de camadas (assinatura) ---------- */
.layer-rail{
  position:fixed;
  right:calc(var(--pad) * .5);
  top:50%;
  transform:translateY(-50%);
  z-index:55;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.8rem;
}
.layer-rail-track{
  width:2px; height:34vh;
  background:var(--line);
  position:relative;
  overflow:hidden;
}
.layer-rail-fill{
  position:absolute; left:0; bottom:0; width:100%; height:0%;
  background:repeating-linear-gradient(to top, var(--amber) 0 3px, transparent 3px 6px);
}
.layer-rail-label{
  writing-mode:vertical-rl;
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--warm-faint);
  white-space:nowrap;
}
#railLayer{ color:var(--amber) }

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:7rem var(--pad) 5rem;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(232,163,61,.10), transparent 55%),
    linear-gradient(var(--graphite), var(--ink) 70%);
  overflow:hidden;
}
.hero-layers{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
}
.hero-layers i{
  height:1px; background:var(--line);
  transform-origin:left center;
  transform:scaleX(0);
}
.hero-inner{ position:relative; max-width:60rem; text-align:center }
.hero-eyebrow{ margin-bottom:1.6rem }
.hero-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.7rem, 8.5vw, 6.4rem);
  line-height:1.04;
  letter-spacing:-.015em;
}
.hero-title .line{ display:block; overflow:hidden }
.hero-title .line > span{ display:inline-block; transform:translateY(110%) }
.hero-sub{
  margin:2rem auto 0;
  max-width:38rem;
  color:var(--warm-dim);
  font-size:clamp(1rem, 1.7vw, 1.15rem);
  opacity:0;
}
.hero-actions{
  margin-top:2.6rem;
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  opacity:0;
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.9rem;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  text-decoration:none;
  letter-spacing:.02em;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
.btn-amber{
  background:var(--amber); color:var(--ink);
}
.btn-amber:hover{ background:#f2b658; transform:translateY(-2px) }
.btn-ghost{
  border:1px solid var(--line); color:var(--warm);
}
.btn-ghost:hover{ border-color:var(--amber); color:var(--amber); transform:translateY(-2px) }
.btn-lg{ padding:1.15rem 2.4rem; font-size:1.05rem }

.scroll-cue{
  position:absolute; bottom:2rem; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
}
.scroll-cue-line{
  width:1px; height:52px; background:var(--line);
  position:relative; overflow:hidden;
}
.scroll-cue-line::after{
  content:""; position:absolute; left:0; top:-40%;
  width:100%; height:40%;
  background:var(--amber);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{ to{ top:110% } }
.scroll-cue-text{
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--warm-faint);
}

/* ---------- cenas (canvas fixado por sticky + ScrollTrigger) ---------- */
.scene{
  position:relative;
  height:420vh;             /* distância de rolagem que “toca” o clipe */
  background:var(--ink);
}
.scene-long{ height:520vh }
.scene-sticky{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
}
.scene-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.scene-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,10,11,.88) 0%, rgba(10,10,11,.25) 34%, rgba(10,10,11,0) 55%),
    linear-gradient(to bottom, rgba(10,10,11,.55), transparent 26%);
  pointer-events:none;
}
.scene-copy{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  bottom:clamp(3.2rem, 9vh, 6rem);
  max-width:44rem;
}
.scene-eyebrow{ margin-bottom:1rem; opacity:0 }
.scene-title{
  font-family:var(--display);
  font-weight:400;
  font-style:italic;
  font-size:clamp(2.4rem, 6.5vw, 5rem);
  line-height:1.05;
  letter-spacing:-.01em;
  opacity:0;
}
.scene-text{
  margin-top:1.1rem;
  max-width:34rem;
  color:var(--warm-dim);
  font-size:clamp(.95rem, 1.5vw, 1.1rem);
  opacity:0;
}
.scene-hud{
  position:absolute;
  top:5.4rem;
  right:var(--pad);
  display:flex; align-items:center; gap:.7rem;
  font-size:.62rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--warm-faint);
}
.hud-layer{ color:var(--amber); min-width:7.5em }
.hud-sep{ width:2.4rem; height:1px; background:var(--line) }

/* cena dupla — clipes lado a lado, sempre */
.duo-grid{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:var(--ink);
}
.duo-cell{ position:relative; overflow:hidden }
.duo-cell .scene-canvas{ position:absolute; inset:0 }

/* ---------- CTA final ---------- */
.cta{
  position:relative;
  padding:clamp(6rem, 16vh, 11rem) var(--pad);
  text-align:center;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(232,163,61,.12), transparent 60%),
    var(--graphite);
  overflow:hidden;
}
.cta-layers{
  position:absolute; inset:auto 0 0 0; height:38%;
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none; opacity:.6;
}
.cta-layers i{ height:1px; background:var(--line) }
.cta-inner{ position:relative; max-width:46rem; margin:0 auto }
.cta-title{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.08;
  margin-top:1.2rem;
}
.cta-text{ margin:1.4rem auto 2.4rem; max-width:34rem; color:var(--warm-dim) }
.cta-hint{ margin-top:1.2rem; font-size:.8rem; color:var(--warm-faint) }

/* ---------- rodapé ---------- */
.site-footer{
  padding:2.6rem var(--pad) 3rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1.4rem;
  align-items:center; justify-content:space-between;
  background:var(--ink);
}
.foot-brand{
  display:flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-style:italic;
  color:var(--warm-dim); font-size:.95rem;
}
.foot-brand img{ border-radius:8px }
.foot-nav{ display:flex; flex-wrap:wrap; gap:1.4rem }
.foot-nav a{
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--warm-dim); text-decoration:none;
}
.foot-nav a:hover{ color:var(--amber) }
.foot-note{ font-size:.78rem; color:var(--warm-faint); width:100% }

/* ---------- responsivo ---------- */
@media (max-width:760px){
  .brand-slogan{ display:none }
  .layer-rail{ right:.4rem }
  .layer-rail-track{ height:24vh }
  .scene{ height:320vh }
  .scene-long{ height:400vh }
  .scene-hud{ top:4.6rem; right:var(--pad) }
  .hud-sep{ display:none }
  .hud-file{ display:none }
  .scene-copy{ bottom:2.6rem }
  .duo-grid{ grid-template-columns:1fr 1fr }  /* lado a lado também no mobile */
  .site-footer{ flex-direction:column; align-items:flex-start }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .scroll-cue-line::after{ animation:none }
  .hero-title .line > span{ transform:none }
  .hero-sub,.hero-actions,.scene-eyebrow,.scene-title,.scene-text{ opacity:1 }
  .g-item{ opacity:1; transform:none; transition:none }
}

/* ============================================================
   CABEÇALHO DESTACADO + MENU PRINCIPAL
   ============================================================ */
.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:80;
  display:block;
  padding:0;
  background:rgba(10,10,11,.96);
  border-bottom:1px solid rgba(232,163,61,.35);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  background:linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:.8;
}
.header-inner{
  width:min(100%, 1500px);
  min-height:92px;
  margin:0 auto;
  padding:.7rem var(--pad);
  display:flex;
  align-items:center;
  gap:clamp(1rem,2.5vw,2.4rem);
}
.brand{ flex:0 0 auto; gap:.9rem }
.brand img{
  width:68px;
  height:68px;
  border-radius:15px;
  object-fit:contain;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.3));
}
.brand-copy{ display:flex; flex-direction:column; line-height:1.05 }
.brand-name{
  font-size:clamp(1.35rem,2vw,1.85rem);
  white-space:nowrap;
}
.brand-slogan{
  display:block;
  margin-top:.42rem;
  font-family:var(--sans);
  font-size:.66rem;
  font-style:normal;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--warm-faint);
}
.main-nav{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(.15rem,.7vw,.65rem);
}
.main-nav a{
  position:relative;
  padding:.72rem .72rem;
  border-radius:999px;
  color:var(--warm-dim);
  text-decoration:none;
  font-size:clamp(.73rem,.85vw,.9rem);
  font-weight:600;
  white-space:nowrap;
  transition:color .22s ease, background .22s ease, transform .22s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--ink);
  background:var(--amber);
  transform:translateY(-1px);
  outline:none;
}
.social-nav{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding-left:1rem;
  border-left:1px solid var(--line);
}
.social-nav a{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--warm-dim);
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.social-nav a:hover,
.social-nav a:focus-visible{
  color:var(--ink);
  background:var(--amber);
  border-color:var(--amber);
  transform:translateY(-2px);
  outline:none;
}
.social-nav svg{ width:19px; height:19px; fill:currentColor }
.hero{ padding-top:11rem }

/* páginas internas */
.subpage-main{ padding-top:92px; min-height:100vh; background:var(--ink) }
.subpage-hero{
  min-height:72vh;
  display:grid;
  align-items:end;
  padding:clamp(7rem,14vh,11rem) var(--pad) clamp(4rem,10vh,7rem);
  background:
    radial-gradient(80% 80% at 80% 20%, rgba(232,163,61,.16), transparent 60%),
    linear-gradient(145deg,var(--graphite),var(--ink));
}
.subpage-hero-inner{ max-width:850px }
.subpage-title{
  margin-top:1rem;
  font-family:var(--display);
  font-size:clamp(3rem,8vw,6.6rem);
  font-weight:400;
  line-height:.98;
}
.subpage-lead{ margin-top:1.6rem; max-width:650px; color:var(--warm-dim); font-size:clamp(1rem,1.5vw,1.2rem) }
.subpage-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap }
.subpage-content{ padding:clamp(4rem,10vh,7rem) var(--pad) }
.subpage-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; max-width:1200px; margin:0 auto }
.subpage-card{ padding:2rem; border:1px solid var(--line); border-radius:18px; background:var(--graphite); }
.subpage-card h2{ font-family:var(--display); font-weight:400; font-size:1.65rem; color:var(--amber) }
.subpage-card p{ margin-top:.7rem; color:var(--warm-dim) }

@media (max-width:1180px){
  .header-inner{ flex-wrap:wrap; padding-bottom:.8rem }
  .brand{ order:1 }
  .social-nav{ order:2; margin-left:auto }
  .main-nav{
    order:3;
    width:100%;
    justify-content:flex-start;
    overflow-x:auto;
    padding:.25rem 0 .1rem;
    scrollbar-width:none;
  }
  .main-nav::-webkit-scrollbar{ display:none }
  .hero{ padding-top:13rem }
  .subpage-main{ padding-top:145px }
}
@media (max-width:760px){
  .header-inner{ min-height:auto; gap:.6rem 1rem; padding:.6rem 1rem .7rem }
  .brand img{ width:54px; height:54px; border-radius:12px }
  .brand-name{ font-size:1.28rem }
  .brand-slogan{ font-size:.55rem; letter-spacing:.14em }
  .social-nav{ padding-left:.6rem; gap:.3rem }
  .social-nav a{ width:34px; height:34px }
  .main-nav a{ font-size:.72rem; padding:.55rem .7rem; background:rgba(245,239,230,.05) }
  .hero{ padding-top:12.5rem }
  .subpage-main{ padding-top:136px }
  .subpage-grid{ grid-template-columns:1fr }
}
@media (max-width:440px){
  .brand-slogan{ display:none }
  .social-nav a{ width:31px; height:31px }
  .social-nav svg{ width:16px; height:16px }
}


/* ============================================================
   HERO PREMIUM — IMPRESSÃO 3D EM DESTAQUE
   ============================================================ */
.hero.hero-3d{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(8.5rem,13vh,10rem) var(--pad) clamp(2rem,4vh,3rem);
  background:
    radial-gradient(65% 90% at 76% 48%, rgba(232,163,61,.12), transparent 58%),
    linear-gradient(90deg,#090909 0%,#0b0b0c 48%,#050505 100%);
}
.hero-3d .hero-layout{
  position:relative;
  z-index:2;
  width:min(100%,1500px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(480px,1.12fr);
  align-items:center;
  gap:clamp(2rem,4vw,5rem);
}
.hero-3d .hero-inner{
  max-width:690px;
  text-align:left;
}
.hero-3d .hero-title{
  font-size:clamp(3.6rem,6.5vw,7rem);
  line-height:.94;
  letter-spacing:-.035em;
}
.hero-3d .hero-title .line > span{ transform:translateY(110%) }
.hero-accent{
  display:block;
  width:86px;
  height:3px;
  margin:1.8rem 0 1.6rem;
  background:var(--amber);
}
.hero-3d .hero-sub{
  margin:0;
  max-width:34rem;
  font-size:clamp(1rem,1.25vw,1.2rem);
  line-height:1.75;
}
.hero-3d .hero-actions{
  justify-content:flex-start;
  margin-top:2rem;
}
.hero-3d .btn{ min-height:58px; padding:1rem 1.75rem }
.play-icon{
  width:24px;height:24px;border:1px solid currentColor;border-radius:50%;
  display:grid;place-items:center;font-size:.62rem;padding-left:2px;
}
.hero-visual{
  position:relative;
  min-height:clamp(430px,58vh,720px);
  border-radius:40px;
  overflow:hidden;
  border:1px solid rgba(232,163,61,.24);
  box-shadow:0 30px 85px rgba(0,0,0,.58),0 0 80px rgba(232,163,61,.07);
  background:#070707;
}
.hero-visual::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,5,5,.1),transparent 24%),linear-gradient(to top,rgba(0,0,0,.24),transparent 35%);
  pointer-events:none;
}
.hero-visual img{
  width:100%;height:100%;position:absolute;inset:0;
  object-fit:cover;object-position:center;
}
.hero-benefits{
  position:relative;
  z-index:3;
  width:min(100%,1500px);
  margin:clamp(1.8rem,4vh,3rem) auto 0;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid rgba(232,163,61,.18);
}
.benefit-item{
  min-width:0;
  padding:1.35rem clamp(.7rem,1.4vw,1.4rem) .6rem;
  text-align:center;
  position:relative;
}
.benefit-item+ .benefit-item{ border-left:1px solid rgba(232,163,61,.2) }
.benefit-item svg{
  width:38px;height:38px;margin:0 auto .65rem;
  fill:none;stroke:var(--amber);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.benefit-item strong{
  display:block;color:var(--amber);text-transform:uppercase;
  font-size:clamp(.66rem,.75vw,.82rem);line-height:1.25;
}
.benefit-item span{
  display:block;margin-top:.45rem;color:var(--warm-dim);
  font-size:clamp(.68rem,.78vw,.82rem);
}
.hero-3d .scroll-cue{ display:none }

@media (max-width:1100px){
  .hero.hero-3d{ padding-top:13rem }
  .hero-3d .hero-layout{ grid-template-columns:1fr 1fr; gap:1.6rem }
  .hero-3d .hero-title{ font-size:clamp(3rem,6vw,5.2rem) }
  .hero-visual{ min-height:520px }
  .hero-benefits{ grid-template-columns:repeat(3,1fr) }
  .benefit-item:nth-child(4){ border-left:0 }
}
@media (max-width:800px){
  .hero.hero-3d{ padding-top:12.5rem }
  .hero-3d .hero-layout{ grid-template-columns:1fr }
  .hero-3d .hero-inner{ max-width:none }
  .hero-visual{ min-height:440px; order:-1 }
  .hero-benefits{ grid-template-columns:repeat(2,1fr) }
  .benefit-item:nth-child(odd){ border-left:0 }
  .benefit-item:nth-child(4){ border-left:1px solid rgba(232,163,61,.2) }
}
@media (max-width:520px){
  .hero-3d .hero-title{ font-size:clamp(2.7rem,14vw,4.3rem) }
  .hero-visual{ min-height:330px; border-radius:24px }
  .hero-3d .hero-actions{ flex-direction:column; align-items:stretch }
  .hero-3d .btn{ justify-content:center }
  .hero-benefits{ grid-template-columns:1fr }
  .benefit-item+ .benefit-item{ border-left:0; border-top:1px solid rgba(232,163,61,.2) }
}

/* ============================================================
   CENAS EM DUAS COLUNAS — TEXTO À ESQUERDA / ANIMAÇÃO À DIREITA
   Mantém a sequência de frames ligada à rolagem, mas evita que
   as imagens ocupem toda a tela.
   ============================================================ */
@media (min-width: 901px){
  .scene{
    background:
      radial-gradient(55% 75% at 78% 50%, rgba(232,163,61,.075), transparent 62%),
      linear-gradient(135deg,#09090a 0%,#111214 48%,#080809 100%);
  }

  .scene-sticky{
    top:0;
    height:100svh;
    min-height:720px;
    display:block;
    padding:clamp(7.8rem,12vh,9.5rem) var(--pad) clamp(3rem,7vh,5rem);
  }

  .scene-sticky::before{
    content:"";
    position:absolute;
    left:var(--pad);
    top:50%;
    width:clamp(1px,.12vw,2px);
    height:clamp(160px,28vh,270px);
    transform:translateY(-50%);
    background:linear-gradient(to bottom,transparent,var(--amber),transparent);
    opacity:.42;
  }

  .scene-canvas,
  .scene-duo .duo-grid{
    position:absolute;
    left:auto;
    right:clamp(2.7rem,5.5vw,6.5rem);
    top:clamp(8.2rem,13vh,10rem);
    bottom:clamp(3.2rem,7vh,5.2rem);
    width:min(54vw,920px);
    height:auto;
    border-radius:clamp(18px,2vw,34px);
    overflow:hidden;
    border:1px solid rgba(232,163,61,.24);
    box-shadow:0 30px 80px rgba(0,0,0,.58),0 0 70px rgba(232,163,61,.06);
    background:#090909;
  }

  .scene-canvas{
    inset:auto clamp(2.7rem,5.5vw,6.5rem) clamp(3.2rem,7vh,5.2rem) auto;
    width:min(54vw,920px);
    height:calc(100svh - clamp(11.4rem,20vh,15.2rem));
    min-height:500px;
  }

  .scene-shade{
    left:auto;
    right:clamp(2.7rem,5.5vw,6.5rem);
    top:clamp(8.2rem,13vh,10rem);
    bottom:clamp(3.2rem,7vh,5.2rem);
    width:min(54vw,920px);
    border-radius:clamp(18px,2vw,34px);
    background:
      linear-gradient(to top,rgba(10,10,11,.36),transparent 40%),
      linear-gradient(to right,rgba(10,10,11,.15),transparent 24%);
  }

  .scene-copy{
    left:clamp(4rem,7vw,8rem);
    right:auto;
    top:50%;
    bottom:auto;
    width:min(34vw,560px);
    max-width:560px;
    transform:translateY(-50%);
    padding-left:clamp(1rem,2.2vw,2rem);
  }

  .scene-title{
    font-size:clamp(3.4rem,5.3vw,6.2rem);
    line-height:.98;
  }

  .scene-text{
    max-width:31rem;
    font-size:clamp(1rem,1.15vw,1.18rem);
    line-height:1.8;
  }

  .scene-hud{
    top:clamp(9.1rem,14vh,10.8rem);
    right:clamp(4rem,7vw,8rem);
    z-index:4;
    padding:.55rem .8rem;
    border-radius:999px;
    background:rgba(10,10,11,.58);
    border:1px solid rgba(245,239,230,.1);
    backdrop-filter:blur(8px);
  }

  .scene-duo .duo-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .scene-duo .scene-shade{
    z-index:2;
  }

  .scene-duo .scene-copy,
  .scene-duo .scene-hud{
    z-index:3;
  }
}

@media (max-width:900px){
  .scene{
    height:340vh;
    background:linear-gradient(var(--ink),var(--graphite),var(--ink));
  }
  .scene-long{ height:420vh }
  .scene-sticky{
    padding:8.5rem var(--pad) 2rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.5rem;
  }
  .scene-canvas,
  .scene-duo .duo-grid{
    position:relative;
    inset:auto;
    order:2;
    width:100%;
    height:min(52vh,540px);
    min-height:330px;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(232,163,61,.22);
    box-shadow:0 24px 60px rgba(0,0,0,.48);
  }
  .scene-copy{
    position:relative;
    inset:auto;
    order:1;
    max-width:42rem;
  }
  .scene-title{ font-size:clamp(2.7rem,10vw,4.5rem) }
  .scene-text{ max-width:38rem }
  .scene-shade{
    display:none;
  }
  .scene-hud{
    top:7.2rem;
    right:var(--pad);
  }
  .scene-duo .duo-grid{ grid-template-columns:1fr 1fr }
}




/* ============================================================
   INTERAÇÕES MODERNAS — MENU, REDES SOCIAIS E BOTÕES
   Mantém o fundo original e usa brilho, traço e movimento.
   ============================================================ */
.main-nav a{
  isolation:isolate;
  overflow:hidden;
  background:transparent;
  transition:color .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), text-shadow .28s ease;
}
.main-nav a::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:.38rem;
  width:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, var(--amber), #ffd990, var(--amber), transparent);
  box-shadow:0 0 12px rgba(232,163,61,.75);
  transform:translateX(-50%);
  transition:width .34s cubic-bezier(.2,.8,.2,1);
}
.main-nav a::after{
  content:"";
  position:absolute;
  inset:-40% -70%;
  z-index:-1;
  background:linear-gradient(110deg, transparent 42%, rgba(255,217,144,.18) 50%, transparent 58%);
  transform:translateX(-65%) rotate(2deg);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.main-nav a:hover,
.main-nav a:focus-visible{
  color:var(--amber);
  background:transparent;
  transform:translateY(-2px);
  text-shadow:0 0 18px rgba(232,163,61,.35);
  outline:none;
}
.main-nav a:hover::before,
.main-nav a:focus-visible::before{ width:calc(100% - 1.25rem) }
.main-nav a:hover::after,
.main-nav a:focus-visible::after{ transform:translateX(65%) rotate(2deg) }

.social-nav a{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:transparent;
  transition:color .3s ease, border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.social-nav a::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:-1;
  border-radius:50%;
  border:1px solid transparent;
  transform:scale(.55) rotate(-35deg);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease, border-color .35s ease;
}
.social-nav a::after{
  content:"";
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  top:2px;
  right:3px;
  background:var(--amber);
  box-shadow:0 0 12px var(--amber);
  opacity:0;
  transform:scale(0);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.social-nav a:hover,
.social-nav a:focus-visible{
  color:var(--amber);
  background:transparent;
  border-color:rgba(232,163,61,.85);
  transform:translateY(-3px) rotate(-3deg) scale(1.06);
  box-shadow:0 8px 24px rgba(0,0,0,.3), 0 0 18px rgba(232,163,61,.18);
  outline:none;
}
.social-nav a:hover::before,
.social-nav a:focus-visible::before{
  border-color:rgba(232,163,61,.45);
  transform:scale(1) rotate(0);
  opacity:1;
}
.social-nav a:hover::after,
.social-nav a:focus-visible::after{ opacity:1; transform:scale(1) }
.social-nav a:hover svg,
.social-nav a:focus-visible svg{ animation:socialIconPulse .55s cubic-bezier(.2,.8,.2,1) }
@keyframes socialIconPulse{
  0%{ transform:scale(1) rotate(0) }
  45%{ transform:scale(1.18) rotate(6deg) }
  100%{ transform:scale(1) rotate(0) }
}

.btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  border-radius:inherit;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.65) 45%, transparent 70%);
  transform:translateX(-135%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.btn::after{
  content:"";
  position:absolute;
  inset:1px;
  z-index:-1;
  border-radius:inherit;
  background:inherit;
}
.btn:hover::before,
.btn:focus-visible::before{ transform:translateX(135%) }
.btn:hover,
.btn:focus-visible{
  transform:translateY(-3px) scale(1.015);
  box-shadow:0 12px 30px rgba(0,0,0,.28), 0 0 22px rgba(232,163,61,.2);
}
.btn-amber:hover,
.btn-amber:focus-visible{
  background:var(--amber);
  color:var(--ink);
}
.btn-ghost:hover,
.btn-ghost:focus-visible{
  background:transparent;
  color:var(--amber);
  border-color:rgba(232,163,61,.8);
}
.btn svg,
.btn .store-icon{
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.btn:hover svg,
.btn:focus-visible svg{ transform:translateX(2px) scale(1.08) }
.btn:hover .store-icon,
.btn:focus-visible .store-icon{ transform:translate(3px,-3px) }
.store-icon{
  display:inline-grid;
  place-items:center;
  font-size:1.15rem;
  line-height:1;
}

@media (prefers-reduced-motion:reduce){
  .main-nav a::before,.main-nav a::after,.social-nav a,.social-nav a::before,.social-nav a::after,.btn,.btn::before,.btn svg,.btn .store-icon{
    transition:none !important;
    animation:none !important;
  }
}


/* ============================================================
   AJUSTES SOLICITADOS — HERO E INDICADORES
   ============================================================ */
.layer-rail,
.scene-hud,
.hero-visual-label,
.visual-label,
.interactive-label,
[data-label="visualizacao-3d"]{
  display:none !important;
}

.hero-3d .hero-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.9rem;
  width:min(100%, 510px);
}
.hero-3d .hero-actions .btn{
  width:100%;
  justify-content:center;
  text-align:center;
}

.hero-visual{
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  background:transparent !important;
}

@media (max-width:520px){
  .hero-3d .hero-actions{
    width:100%;
    align-items:stretch;
  }
}

/* Botões principais da tela inicial com o mesmo padrão visual */
.hero-3d .hero-actions .btn-amber {
  background: var(--amber);
  color: var(--ink);
  border: 1px solid var(--amber);
}
.hero-3d .hero-actions .btn-amber:hover,
.hero-3d .hero-actions .btn-amber:focus-visible {
  background: var(--amber);
  color: var(--ink);
  border-color: var(--amber);
}