/* ============================================================
   TOP CHALÉS RJ 021 — Landing de Conversão
   Desenvolvido por Atlas Tecnologias · atlastecnologias.com.br
   ------------------------------------------------------------
   1.  Tokens & Reset
   2.  Tipografia & Utilitários
   3.  Botões & CTAs
   4.  Header / Nav / Dynamic Island
   5.  Hero
   6.  Marquee
   7.  Cards (texture / spotlight / bento)
   8.  Modelos
   9.  Processo (scroll stack)
   10. Simulador
   11. FAQ
   12. Formulário de qualificação
   13. Footer + Selo Atlas
   14. Animações de scroll
   15. Responsivo
   ============================================================ */

/* ---------- 1. TOKENS & RESET ---------- */
:root{
  /* ---- superfícies (base: CARVÃO #1A1A1A do manual) ---- */
  --bg:          #1A1A1A;
  --bg-2:        #151515;
  --surface:     #212020;
  --surface-2:   #292725;
  --elevated:    #34312D;
  --line:        rgba(217,198,168,.10);
  --line-strong: rgba(217,198,168,.20);

  /* ---- cores da marca ---- */
  --copper:       #B87333;   /* COBRE */
  --copper-light: #D89A57;
  --copper-deep:  #8A5424;
  --sand:         #D9C6A8;   /* AREIA QUENTE */
  --sand-deep:    #A08F73;
  --offwhite:     #F7F4E9;   /* OFF-WHITE */
  --whats:        #25D366;
  --whats-deep:   #128C7E;
  --atlas-lime:   #C8F135;

  /* ---- texto ---- */
  --text:        #F7F4E9;
  --text-2:      #C9BCA6;
  --muted:       #948A7B;
  --faint:       #918879;   /* 4,97:1 no carvao e 4,57:1 no --surface — passa no WCAG AA */

  /* ---- efeitos ---- */
  --glow-copper: 0 0 0 1px rgba(184,115,51,.28), 0 18px 50px -12px rgba(184,115,51,.38);
  --shadow-lg:   0 30px 80px -20px rgba(0,0,0,.85);
  --shadow-md:   0 16px 40px -14px rgba(0,0,0,.7);
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;

  /* ---- layout ---- */
  --max:         1200px;
  --gutter:      clamp(20px, 5vw, 40px);
  --section-y:   clamp(62px, 8.5vw, 112px);

  /* ---- tipografia do manual ---- */
  --font-display: "Montserrat", Arial, Helvetica, sans-serif;
  --font-ui:      "Raleway", Arial, Helvetica, sans-serif;
  --font-atlas:   "Syne", var(--font-ui);

  --ease:        cubic-bezier(.22,1,.36,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:clamp(15px,1.05vw,16.5px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* textura de grão global — dá o acabamento "premium" */
body::before{
  content:"";
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
::selection{ background:var(--copper); color:#1A1A1A; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#34312D; border-radius:99px; border:3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--sand-deep); }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; border-radius:6px; }

/* ---------- 2. TIPOGRAFIA & UTILITÁRIOS ---------- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:1380px; }

section{ position:relative; padding-block:var(--section-y); }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.14; letter-spacing:-.02em; text-wrap:balance; }
h1{ font-size:clamp(2.05rem,4.3vw,3.5rem); font-weight:700; letter-spacing:-.022em; }
h2{ font-size:clamp(1.75rem,3.5vw,2.7rem); font-weight:700; letter-spacing:-.02em; }
h3{ font-size:clamp(1.15rem,1.9vw,1.45rem); font-weight:600; }

p{ color:var(--text-2); }
strong{ color:var(--text); font-weight:600; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--font-display); font-size:.7rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--copper-light);
  margin-bottom:1.5rem;
}
.eyebrow::before,.eyebrow::after{ content:""; height:2px; width:26px; background:var(--copper); flex:none; }
.section-head:not(.center) .eyebrow::after,
.hero .eyebrow::after{ display:none; }

.section-head{ max-width:820px; margin-bottom:clamp(2.5rem,5vw,4rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head p{ font-size:1.06rem; margin-top:1.1rem; max-width:62ch; }
.section-head.center p{ margin-inline:auto; }

.text-copper{ color:var(--copper-light); }
.text-muted{ color:var(--muted); }
.small{ font-size:.85rem; }
.xsmall{ font-size:.76rem; line-height:1.55; }

/* gradiente de título (cult-ui gradient-heading) */
/* Era um degradê animado percorrendo o título — bonito por dois segundos e
   genérico para sempre. Cobre chapado destaca igual e não chama atenção
   para si mesmo. */
.destaque{ color:var(--copper-light); }

/* linha divisória luminosa */
.hairline{ height:1px; width:100%; background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--line-strong) 80%,transparent); }

/* fundo de seção com brilho */
/* As bolhas de brilho desfocadas saíram: são a assinatura de landing page
   gerada, e não diziam nada sobre serralheria nem sobre chalé. O que separa
   as seções agora é o corte diagonal e o padrão do manual da marca. */

/* ---------- 3. BOTÕES & CTAs ---------- */
.btn{
  --btn-bg:var(--elevated);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:var(--radius-sm);
  font-weight:650; font-size:.95rem; letter-spacing:-.01em; line-height:1;
  border:1px solid var(--line-strong); background:var(--btn-bg); color:var(--text);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s, background .3s;
  will-change:transform; isolation:isolate; overflow:hidden; text-align:center;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.24); }
.btn:active{ transform:translateY(0) scale(.985); }
.btn svg{ flex:none; }

/* botão WhatsApp com brilho animado (bg-animate-button) */
.btn-whats{
  background:linear-gradient(135deg,var(--copper-light) 0%,var(--copper) 48%,var(--copper-deep) 100%);
  color:#1A1A1A; border:0; font-weight:700;
  padding:1.05rem 1.9rem; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase;
  font-family:var(--font-display);
  box-shadow:0 10px 30px -10px rgba(184,115,51,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-whats::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);
  transform:translateX(-120%); transition:none;
}
.btn-whats:hover{ box-shadow:0 16px 44px -12px rgba(184,115,51,.72), inset 0 1px 0 rgba(255,255,255,.34); }
.btn-whats:hover::after{ animation:shine 1.05s var(--ease) forwards; }
@keyframes shine{ to{ transform:translateX(120%); } }

/* CTA secundário: contorno cobre (o primário é o preenchido) */
.btn-copper{
  background:transparent; color:var(--copper-light); border:1.5px solid var(--copper);
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.05em; text-transform:uppercase;
}
.btn-copper:hover{ background:rgba(184,115,51,.14); border-color:var(--copper-light); color:var(--offwhite); }

.btn-ghost{ background:rgba(255,255,255,.035); backdrop-filter:blur(8px); font-family:var(--font-display); font-weight:600; letter-spacing:.03em; }
.btn-ghost:hover{ background:rgba(255,255,255,.07); }

.btn-lg{ padding:1.15rem 2.1rem; font-size:.98rem; }
.btn-block{ width:100%; }

.cta-row{ display:flex; flex-wrap:wrap; gap:.85rem; align-items:center; }

/* micro-prova abaixo dos CTAs */
.cta-note{ display:flex; align-items:center; gap:.5rem; font-size:.82rem; color:var(--muted); margin-top:1.1rem; }
.cta-note svg{ color:var(--copper-light); flex:none; }

/* ---------- 4. HEADER / NAV / DYNAMIC ISLAND ---------- */
.progress{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:1001;
  background:linear-gradient(90deg,var(--copper),var(--copper-light));
  transform-origin:0 50%; transform:scaleX(0); transition:transform .1s linear;
}

.header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding-block:1.15rem; transition:padding .4s var(--ease), background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  padding-block:.7rem;
  background:rgba(26,26,26,.78);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.brand{ display:flex; align-items:center; gap:.7rem; flex:none; }
.brand-mark{ width:42px; height:42px; flex:none; display:grid; place-items:center; }
.brand-mark svg{ width:100%; height:100%; }
.brand-text{
  line-height:1.05; padding-left:.75rem;
  border-left:2px solid var(--copper);
}
.brand-name{ font-family:var(--font-display); font-size:.98rem; font-weight:700; letter-spacing:.14em; display:block; }
.brand-sub{
  display:flex; align-items:center; gap:.4rem;
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--copper); font-weight:600;
  margin-top:.22rem;
}
.brand-sub::before,.brand-sub::after{ content:""; height:2px; width:12px; background:var(--copper); flex:none; }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  padding:.5rem .85rem; border-radius:6px; font-size:.86rem; font-weight:500; letter-spacing:.02em; color:var(--text-2);
  white-space:nowrap;
  transition:color .25s, background .25s;
}
.nav a:hover{ color:var(--text); background:rgba(255,255,255,.055); }

.header-cta{ display:flex; align-items:center; gap:.6rem; flex:none; }

.burger{ display:none; width:42px; height:42px; border-radius:8px; border:1px solid var(--line-strong); place-items:center; background:rgba(255,255,255,.04); }
.burger span{ display:block; width:17px; height:1.6px; background:var(--text); border-radius:2px; transition:transform .35s var(--ease), opacity .2s; }
.burger span+span{ margin-top:4.5px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(6.1px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-6.1px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:999; display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:6rem var(--gutter) 3rem;
  background:rgba(18,18,18,.97); backdrop-filter:blur(22px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
body.menu-open .mobile-menu{ opacity:1; visibility:visible; }
.mobile-menu a{
  font-family:var(--font-display); font-weight:600; font-size:clamp(1.35rem,5.6vw,1.9rem); letter-spacing:.01em; padding:.5rem 0;
  border-bottom:1px solid var(--line); color:var(--text-2);
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
body.menu-open .mobile-menu a{ opacity:1; transform:none; }
.mobile-menu a:hover{ color:var(--copper); }
.mobile-menu .btn{ margin-top:1.8rem; }

/* Dynamic Island — CTA flutuante persistente (cult-ui/skiper) */
.island{
  position:fixed; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); z-index:997;
  transform:translate(-50%,140%); opacity:0;
  display:flex; align-items:center; gap:.75rem;
  padding:.55rem .6rem .55rem 1.15rem; border-radius:var(--radius);
  background:rgba(26,26,26,.86); backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line-strong);
  box-shadow:0 20px 50px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .6s var(--ease), opacity .45s var(--ease);
  max-width:calc(100vw - 28px);
}
.island.is-visible{ transform:translate(-50%,0); opacity:1; }
.island-txt{ font-size:.85rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.island-txt b{ display:block; font-size:.93rem; font-weight:700; }
.island-txt span{ color:var(--muted); font-size:.76rem; }
.island .btn{ padding:.72rem 1.15rem; font-size:.88rem; flex:none; min-height:44px; }

/* ---------- 5. HERO ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(104px,13vh,150px); padding-bottom:clamp(44px,6vh,80px);
  overflow:hidden;
}
/* O FUNDO DO HERO É O CHALÉ.
   Antes havia grade, bolhas de brilho e um spotlight seguindo o cursor —
   três enfeites genéricos, enquanto a peça de verdade aparecia como
   miniatura dentro de um card. Inverteu-se: a fotografia ocupa a direita e
   sangra na borda, o texto fica na esquerda sobre o escuro. */
.hero-foto{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-foto img{
  position:absolute; top:0; right:0; height:100%; width:min(52%, 720px);
  object-fit:contain; object-position:100% 50%;
  /* a borda esquerda da foto se dissolve: sem isso fica uma emenda reta */
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 12%, #000 34%);
  /* a entrada: a foto assenta em vez de simplesmente aparecer */
  animation:fotoAssenta 1.7s var(--ease) .1s both;
}
/* Véu em três tempos: escurece a esquerda para o texto, o topo para o menu
   e o rodapé para a ficha. Sem isso nada em cima da foto é legível. */
.hero-foto::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(26,26,26,.94) 30%, rgba(26,26,26,.55) 48%, rgba(26,26,26,.12) 66%, transparent 80%),
    linear-gradient(180deg, rgba(26,26,26,.86) 0%, rgba(26,26,26,.3) 14%, transparent 34%, rgba(26,26,26,.55) 74%, var(--bg) 100%);
}
@keyframes fotoAssenta{
  from{ opacity:0; transform:scale(1.07); }
  to{ opacity:1; transform:scale(1); }
}

/* Grão de filme. É o oposto exato do degradê liso: dá à página a textura
   de coisa fotografada em vez de coisa renderizada. */
.grao{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.hero .wrap{ position:relative; z-index:2; }

.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4.5rem); align-items:center; }

.hero h1{ margin-bottom:1.5rem; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .word{
  display:inline-block; will-change:transform,opacity;
  opacity:0; transform:translateY(105%) rotate(4deg);
  animation:wordUp .95s var(--ease) .22s forwards;
}
@keyframes wordUp{ to{ opacity:1; transform:none; } }

.hero-sub{ font-size:clamp(1.02rem,1.35vw,1.16rem); max-width:56ch; margin-bottom:2rem; }

.hero-badges{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.2rem; }
.badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:500; color:var(--text-2);
  padding:.52rem .9rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--line);
  border-left:2px solid var(--copper);
  backdrop-filter:blur(6px);
}
.badge svg{ width:14px; height:14px; color:var(--copper-light); flex:none; }

/* cartão de preço no hero */
/* A FICHA DO HERO.
   Era um card com fundo, borda, sombra e vídeo dentro — uma caixa disputando
   atenção com a fotografia. Virou etiqueta de museu: hairline em cobre, tipo
   alinhado à esquerda, sem fundo. A peça é a foto; a ficha só identifica. */
.hero-ficha{
  align-self:center; max-width:21.5rem; position:relative;
  padding:1.3rem 1.4rem 1.4rem; margin-left:auto;
}
/* chão próprio da ficha: uma placa escura que desbota nas bordas, como
   legenda de filme. Sem isso o preço some no meio da madeira. */
.hero-ficha::before{
  content:""; position:absolute; inset:-1.6rem -1.8rem -2rem -2.2rem; z-index:-1;
  background:radial-gradient(ellipse 78% 70% at 40% 52%,
    rgba(14,14,14,.95) 0%, rgba(14,14,14,.85) 42%, rgba(14,14,14,.42) 70%, transparent 92%);
}
.ficha-linha{ display:block; width:52px; height:2px; background:var(--copper); margin-bottom:1.1rem; }
.ficha-nome{
  font-family:var(--font-display); font-size:1.16rem; font-weight:700;
  letter-spacing:.01em; margin-bottom:.4rem;
}
.ficha-meta{ font-size:.84rem; color:var(--text-2); line-height:1.5; margin-bottom:1.2rem; text-shadow:0 1px 4px rgba(0,0,0,.85); }
.ficha-preco{ display:flex; align-items:baseline; gap:.55rem; margin-bottom:.5rem; }
.ficha-preco b{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(2.1rem,3.4vw,2.7rem); color:var(--offwhite); line-height:1;
}
.ficha-preco span{
  font-family:var(--font-ui); font-size:.68rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.ficha-alt{
  font-size:.82rem; color:var(--text-2); line-height:1.55;
  padding-top:.95rem; border-top:1px solid var(--line-strong);
  text-shadow:0 1px 4px rgba(0,0,0,.85);
}
/* link sublinhado que se completa no hover, em vez de mais um botão cobre */
.ficha-cta{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.15rem;
  font-family:var(--font-ui); font-size:.78rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--offwhite);
  padding-bottom:.4rem; position:relative; min-height:44px;
}
.ficha-cta svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.ficha-cta::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--copper); transform:scaleX(.34); transform-origin:left;
  transition:transform .45s var(--ease);
}
.ficha-cta:hover::after{ transform:scaleX(1); }
.ficha-cta:hover svg{ transform:translateX(4px); }


/* ---------- 6. MARQUEE ---------- */
.marquee{
  position:relative; padding-block:1.15rem; overflow:hidden;
  border-block:1px solid var(--line); background:rgba(255,255,255,.018);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{ display:flex; width:max-content; gap:0; animation:scrollX 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; gap:2.6rem; padding-right:2.6rem; }
.marquee-item{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  font-size:.88rem; font-weight:600; color:var(--text-2); letter-spacing:.01em;
}
.marquee-item svg{ width:15px; height:15px; color:var(--copper); flex:none; }
.marquee-item::after{ content:"—"; color:var(--faint); margin-left:2.6rem; }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ---------- 7. CARDS (texture / spotlight / bento) ---------- */
/* texture card — camadas de borda no estilo cult-ui */
.tcard{
  position:relative; border-radius:var(--radius-lg); padding:1px;
  background:linear-gradient(160deg,var(--line-strong),transparent 40%,transparent 60%,rgba(184,115,51,.16));
  transition:transform .5s var(--ease);
}
.tcard-inner{
  position:relative; height:100%; border-radius:calc(var(--radius-lg) - 1px);
  background:linear-gradient(165deg,var(--surface-2),var(--surface) 55%,var(--bg-2));
  border:1px solid rgba(255,255,255,.045);
  padding:clamp(1.4rem,2.4vw,2rem);
  overflow:hidden;
}
.tcard:hover{ transform:translateY(-4px); }

/* spotlight — segue o cursor (variáveis --mx/--my via JS) */
.spot{ position:relative; overflow:hidden; }
.spot::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(184,115,51,.14), transparent 62%);
  transition:opacity .4s var(--ease); z-index:1;
}
.spot:hover::before{ opacity:1; }
.spot > *{ position:relative; z-index:2; }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.stat{ background:var(--bg-2); padding:clamp(1.3rem,2.4vw,2rem); text-align:center; transition:background .4s; }
.stat:hover{ background:var(--surface); }
.stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.7rem,3vw,2.4rem); font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--copper-light); }
.stat span{ display:block; margin-top:.6rem; font-size:.82rem; color:var(--muted); line-height:1.4; }

/* bento */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.75rem,1.3vw,1.1rem); }
.bento .tcard{ grid-column:span 2; }
.bento .tcard.span-3{ grid-column:span 3; }
.bento .tcard.span-4{ grid-column:span 4; }
.bento .tcard.span-6{ grid-column:span 6; }

.feat-ico{
  width:46px; height:46px; border-radius:8px; display:grid; place-items:center; margin-bottom:1.15rem;
  background:linear-gradient(155deg,rgba(184,115,51,.20),rgba(184,115,51,.05));
  border:1px solid rgba(184,115,51,.2); color:var(--copper);
}
.feat-ico svg{ width:22px; height:22px; }
.tcard h3{ margin-bottom:.6rem; font-family:var(--font-ui); font-weight:700; font-size:1.06rem; letter-spacing:-.015em; }
.tcard p{ font-size:.93rem; line-height:1.62; }

/* lista com check */
.checks{ list-style:none; display:grid; gap:.72rem; }
.checks li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:var(--text-2); line-height:1.5; }
.checks li svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--copper); }
.checks.green li svg{ color:var(--copper-light); }

/* ---------- 8. MODELOS ---------- */
.models{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.6rem); }
.model{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(170deg,var(--surface-2),var(--bg-2));
  border:1px solid var(--line-strong);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
}
.model:hover{ transform:translateY(-6px); border-color:rgba(184,115,51,.3); box-shadow:var(--shadow-lg); }
.model.featured{ border-color:rgba(184,115,51,.34); }
.model.featured::before{
  content:"MAIS PROCURADO"; position:absolute; top:1rem; right:1rem; z-index:3;
  font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.18em;
  padding:.42rem .75rem; border-radius:4px; color:#1A1A1A;
  background:linear-gradient(135deg,var(--copper-light),var(--copper));
  box-shadow:0 6px 18px -6px rgba(184,115,51,.6);
}
.model-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(160deg,#211910,#0D0A07); border-bottom:1px solid var(--line); }
.model-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.model:hover .model-media img{ transform:scale(1.05); }
.model-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(26,26,26,.78)); }
.model-area{
  position:absolute; bottom:1rem; left:1rem; z-index:2;
  font-family:var(--font-display); font-size:.68rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.44rem .8rem; border-radius:4px; color:var(--text);
  background:rgba(26,26,26,.65); backdrop-filter:blur(10px); border:1px solid var(--line-strong);
}
.model-body{ padding:clamp(1.4rem,2.4vw,2rem); display:flex; flex-direction:column; flex:1; }
.model-body h3{ font-family:var(--font-display); font-size:clamp(1.3rem,2.1vw,1.6rem); font-weight:700; margin-bottom:.4rem; }
.model-desc{ font-size:.95rem; margin-bottom:1.4rem; }

.model-price{ padding:1.15rem; border-radius:var(--radius-sm); background:rgba(255,255,255,.028); border:1px solid var(--line); margin-bottom:1.35rem; }
.model-price .pv{ display:flex; align-items:baseline; gap:.45rem; }
.model-price .pv b{ font-family:var(--font-display); font-size:clamp(1.65rem,2.7vw,2.05rem); font-weight:700; letter-spacing:-.03em; }
.model-price .pv small{ font-size:.82rem; color:var(--muted); }
.model-price .pp{ margin-top:.5rem; padding-top:.7rem; border-top:1px dashed var(--line-strong); font-size:.84rem; color:var(--text-2); }
.model-price .pp b{ color:var(--copper-light); font-weight:700; }
.model-price .pn{ margin-top:.45rem; font-size:.73rem; color:var(--faint); line-height:1.45; }

.spec-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%;
  padding:.85rem 1.1rem; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font-family:var(--font-display); font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; transition:background .3s, border-color .3s;
}
.spec-toggle:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); }
.spec-toggle svg{ width:16px; height:16px; color:var(--copper); transition:transform .45s var(--ease); }
.spec-toggle[aria-expanded="true"] svg{ transform:rotate(180deg); }
.spec-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.spec-panel[data-open="true"]{ grid-template-rows:1fr; }
.spec-panel > div{ overflow:hidden; }
.spec-list{ list-style:none; display:grid; gap:.55rem; padding-top:1.15rem; }
.spec-list li{ display:flex; gap:.6rem; font-size:.87rem; color:var(--text-2); line-height:1.5; }
.spec-list li svg{ width:15px; height:15px; flex:none; margin-top:3px; color:var(--sand); }
.spec-note{ margin-top:1rem; padding:.8rem .95rem; border-radius:10px; font-size:.76rem; line-height:1.5;
  background:rgba(184,115,51,.07); border:1px solid rgba(184,115,51,.18); color:var(--text-2); }
.model .btn{ margin-top:auto; }
.model-body .btn{ margin-top:1.5rem; }

/* ---------- 9. PROCESSO (scroll stack) ---------- */
.steps{ display:grid; gap:clamp(.9rem,1.6vw,1.2rem); }
.step{
  position:sticky; top:calc(50vh - 190px);
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg,var(--surface-2),var(--bg-2));
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-md);
  padding:clamp(1.5rem,3vw,2.4rem);
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,2.6vw,2.2rem); align-items:start;
  transition:transform .5s var(--ease);
}
.step-n{
  width:clamp(52px,6vw,68px); height:clamp(52px,6vw,68px); border-radius:8px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.5rem); font-weight:700; color:#1A1A1A;
  background:linear-gradient(150deg,var(--copper-light),var(--copper) 60%,var(--copper-deep));
  box-shadow:0 10px 26px -10px rgba(184,115,51,.6), inset 0 1px 0 rgba(255,255,255,.35); flex:none;
}
.step h3{ font-family:var(--font-display); font-size:clamp(1.18rem,2vw,1.5rem); font-weight:700; margin-bottom:.55rem; }
.step p{ font-size:.96rem; max-width:64ch; }
.step-proof{
  margin-top:1.1rem; display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:600; color:var(--copper-light);
  padding:.45rem .85rem; border-radius:4px;
  background:rgba(184,115,51,.09); border:1px solid rgba(184,115,51,.2);
}
.step-proof svg{ width:14px; height:14px; flex:none; }

/* ---------- SEGMENTOS ---------- */
.segments{ display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:clamp(.8rem,1.4vw,1.1rem); }
.segment{
  padding:clamp(1.3rem,2.2vw,1.8rem); border-radius:var(--radius);
  background:linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .35s, background .35s;
}
.segment:hover{ transform:translateY(-4px); border-color:rgba(184,115,51,.26); }
.segment .feat-ico{ width:40px; height:40px; border-radius:11px; margin-bottom:1rem; }
.segment .feat-ico svg{ width:19px; height:19px; }
.segment h3{ font-family:var(--font-ui); font-size:1rem; font-weight:700; margin-bottom:.45rem; }
.segment p{ font-size:.88rem; line-height:1.6; }

/* ---------- CONFIANÇA / INSTITUCIONAL ---------- */
.trust{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.trust-list{ display:grid; gap:1rem; }
.trust-item{
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:1.1rem 1.25rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.026); border:1px solid var(--line);
  transition:background .35s, border-color .35s, transform .4s var(--ease);
}
.trust-item:hover{ background:rgba(255,255,255,.05); border-color:var(--line-strong); transform:translateX(4px); }
.trust-item .ico{ width:36px; height:36px; border-radius:6px; display:grid; place-items:center; flex:none;
  background:rgba(184,115,51,.12); border:1px solid rgba(184,115,51,.24); color:var(--copper-light); }
.trust-item .ico svg{ width:17px; height:17px; }
.trust-item h4{ font-family:var(--font-ui); font-size:.95rem; font-weight:700; margin-bottom:.2rem; }
.trust-item p{ font-size:.85rem; line-height:1.55; }

/* ---------- 10. SIMULADOR ---------- */
.sim{
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg,rgba(34,27,20,.9),rgba(13,10,8,.96));
  border:1px solid var(--line-strong); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:1.02fr .98fr;
}
.sim-controls{ padding:clamp(1.5rem,3vw,2.6rem); border-right:1px solid var(--line); }
.sim-out{ padding:clamp(1.5rem,3vw,2.6rem); background:radial-gradient(ellipse 90% 70% at 70% 0%, rgba(184,115,51,.11), transparent 62%); display:flex; flex-direction:column; }

.field{ margin-bottom:1.5rem; }
.field:last-child{ margin-bottom:0; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.85rem; font-weight:650; margin-bottom:.7rem; }
.field label output{ font-family:var(--font-display); font-size:1rem; color:var(--copper-light); font-weight:700; }

/* A caixa do range tem 44px de altura (alvo de toque de celular);
   o trilho fino de 4px e desenhado nos pseudo-elementos. */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px;
  background:transparent; border:0; margin:0; cursor:pointer; outline:none;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:var(--elevated);
  border:1px solid var(--line); box-sizing:border-box;
}
input[type=range]::-moz-range-track{
  height:4px; border-radius:2px; background:var(--elevated);
  border:1px solid var(--line); box-sizing:border-box;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; cursor:grab; margin-top:-9px;
  background:linear-gradient(150deg,var(--copper-light),var(--copper-deep));
  box-shadow:0 0 0 4px rgba(184,115,51,.16), 0 4px 12px -2px rgba(0,0,0,.7);
  border:2px solid #1A1A1A; transition:box-shadow .25s, transform .2s;
}
input[type=range]::-webkit-slider-thumb:hover{ box-shadow:0 0 0 7px rgba(184,115,51,.22), 0 4px 12px -2px rgba(0,0,0,.7); }
input[type=range]::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(.94); }
input[type=range]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; border:2px solid #1A1A1A; cursor:grab;
  background:linear-gradient(150deg,var(--copper-light),var(--copper-deep));
  box-shadow:0 0 0 4px rgba(184,115,51,.16);
}

.sim-result{ display:grid; gap:.15rem; margin-bottom:1.4rem; }
.sim-result span{ font-size:.8rem; color:var(--muted); letter-spacing:.02em; }
.sim-result b{ font-family:var(--font-display); font-size:clamp(2rem,4.2vw,2.9rem); font-weight:700; letter-spacing:-.035em; line-height:1.05; color:var(--copper-light); }
.sim-rows{ display:grid; gap:.6rem; padding:1.1rem 0; margin-bottom:1.2rem; border-block:1px solid var(--line); }
.sim-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.88rem; }
.sim-row span{ color:var(--muted); }
.sim-row b{ font-weight:650; font-variant-numeric:tabular-nums; }
.sim-disclaimer{ font-size:.72rem; line-height:1.55; color:var(--faint); margin-top:auto; padding-top:1.2rem; }

/* ---------- 11. FAQ ---------- */
.faq{ display:grid; gap:.7rem; max-width:880px; margin-inline:auto; }
.faq-item{
  border-radius:var(--radius-sm); overflow:hidden;
  background:linear-gradient(165deg,var(--surface),var(--bg-2));
  border:1px solid var(--line); transition:border-color .35s, background .35s;
}
.faq-item:hover{ border-color:var(--line-strong); }
.faq-item[data-open="true"]{ border-color:rgba(184,115,51,.28); background:linear-gradient(165deg,var(--surface-2),var(--bg-2)); }
.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.15rem clamp(1.1rem,2vw,1.5rem); text-align:left;
  font-size:1rem; font-weight:650; letter-spacing:-.01em; line-height:1.4;
}
.faq-q .plus{ position:relative; width:20px; height:20px; flex:none; }
.faq-q .plus::before,.faq-q .plus::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--copper); border-radius:2px; transition:transform .45s var(--ease), opacity .3s;
}
.faq-q .plus::before{ width:13px; height:1.8px; }
.faq-q .plus::after{ width:1.8px; height:13px; }
.faq-item[data-open="true"] .plus::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.faq-item[data-open="true"] .faq-a{ grid-template-rows:1fr; }
.faq-a > div{ overflow:hidden; }
.faq-a p{ padding:0 clamp(1.1rem,2vw,1.5rem) 1.35rem; font-size:.94rem; line-height:1.68; max-width:72ch; }
.faq-a p + p{ padding-top:0; margin-top:-.5rem; }

/* ---------- 12. FORMULÁRIO DE QUALIFICAÇÃO ---------- */
.form-wrap{
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(165deg,rgba(34,27,20,.92),rgba(13,10,8,.96));
  border:1px solid var(--line-strong); box-shadow:var(--shadow-lg);
  display:grid; grid-template-columns:.85fr 1.15fr;
}
.form-aside{
  padding:clamp(1.6rem,3.2vw,2.8rem);
  background:
    radial-gradient(ellipse 100% 70% at 0% 0%, rgba(184,115,51,.15), transparent 60%),
    linear-gradient(170deg,rgba(217,198,168,.14),transparent);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
}
.form-aside h3{ font-family:var(--font-display); font-size:clamp(1.32rem,2.3vw,1.75rem); font-weight:700; margin-bottom:.8rem; }
.form-aside > p{ font-size:.94rem; margin-bottom:1.6rem; }
.form-main{ padding:clamp(1.6rem,3.2vw,2.8rem); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-grid .full{ grid-column:1/-1; }

.ipt{ display:flex; flex-direction:column; gap:.5rem; }
.ipt > span{ font-size:.79rem; font-weight:650; color:var(--text-2); letter-spacing:.01em; }
.ipt input,.ipt select,.ipt textarea{
  width:100%; padding:.82rem 1rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--line-strong);
  font-size:.92rem; transition:border-color .3s, background .3s, box-shadow .3s;
  appearance:none;
}
.ipt textarea{ resize:vertical; min-height:88px; }
.ipt select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:15px; padding-right:2.4rem;
  cursor:pointer;
}
.ipt select option{ background:#212020; color:var(--text); }
.ipt input::placeholder,.ipt textarea::placeholder{ color:var(--faint); }
.ipt input:focus,.ipt select:focus,.ipt textarea:focus{
  outline:none; border-color:rgba(184,115,51,.55); background:rgba(184,115,51,.05);
  box-shadow:0 0 0 3px rgba(184,115,51,.12);
}
.ipt.invalid input,.ipt.invalid select{ border-color:#E0574A; box-shadow:0 0 0 3px rgba(224,87,74,.13); }
.form-foot{ margin-top:1.5rem; }
.form-foot .btn{ width:100%; }
.privacy{ font-size:.72rem; color:var(--faint); margin-top:.9rem; text-align:center; line-height:1.5; }
.privacy a{ color:var(--muted); text-decoration:underline; text-underline-offset:2px; }

/* ---------- CTA FINAL ---------- */
.final-cta{ position:relative; text-align:center; overflow:hidden; }
.final-cta .wrap{ position:relative; z-index:2; }
.final-cta h2{ margin-bottom:1.2rem; }
.final-cta p{ font-size:1.06rem; max-width:58ch; margin:0 auto 2.2rem; }
.final-cta .cta-row{ justify-content:center; }

/* ---------- 13. FOOTER + SELO ATLAS ---------- */
.footer{ border-top:1px solid var(--line); background:linear-gradient(180deg,var(--bg-2),#111111); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(2rem,4vw,3.5rem); padding-bottom:2.8rem; }
.footer-brand p{ font-size:.9rem; margin-top:1.1rem; max-width:42ch; }
.footer h4{ font-family:var(--font-ui); font-size:.75rem; font-weight:750; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin-bottom:1.15rem; }
.footer-links{ list-style:none; display:grid; gap:.15rem; }
.footer-links a{ font-size:.9rem; color:var(--text-2); transition:color .25s, transform .25s var(--ease); display:flex; align-items:center; min-height:44px; }
.footer-links a:hover{ color:var(--copper); transform:translateX(3px); }
.footer-contact{ display:grid; gap:.2rem; }
.footer-contact a{ display:inline-flex; align-items:center; gap:.6rem; min-height:44px; font-size:.9rem; color:var(--text-2); transition:color .25s; }
.footer-contact a:hover{ color:var(--copper); }
.footer-contact svg{ width:16px; height:16px; flex:none; color:var(--muted); }

.footer-legal{ padding-top:2rem; border-top:1px solid var(--line); font-size:.76rem; color:var(--faint); line-height:1.65; }
.footer-legal p + p{ margin-top:.6rem; }

.footer-bottom{
  margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.copy{ font-size:.78rem; color:var(--faint); }

/* selo Atlas */
.atlas-badge{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.6rem 1.05rem .6rem .8rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03); border:1px solid var(--line);
  transition:border-color .4s var(--ease), background .4s, transform .4s var(--ease), box-shadow .4s var(--ease);
}
.atlas-badge:hover{
  border-color:rgba(200,241,53,.45); background:rgba(200,241,53,.06); transform:translateY(-2px);
  box-shadow:0 12px 30px -12px rgba(200,241,53,.35);
}
.atlas-badge .dev{ font-size:.7rem; color:var(--faint); letter-spacing:.02em; line-height:1.2; display:block; }
.atlas-badge .atlas-logo{ display:flex; align-items:center; gap:.5rem; }
.atlas-badge svg{ width:22px; height:22px; color:var(--atlas-lime); transition:transform .5s var(--ease); flex:none; }
.atlas-badge:hover svg{ transform:translateY(-2px); }
.atlas-word{ font-family:var(--font-atlas); display:grid; gap:3px; }
.atlas-word b{ display:block; font-size:.98rem; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--text); transition:color .35s; }
.atlas-word i{ display:block; font-style:normal; font-size:.5rem; font-weight:600; line-height:1; letter-spacing:.24em; color:var(--muted); }
.atlas-badge:hover .atlas-word b{ color:var(--atlas-lime); }

/* ---------- 14. ANIMAÇÕES DE SCROLL ---------- */
/* O estado escondido so existe quando o JS assumiu a pagina (html.js).
   Sem isso, uma falha no main.js deixaria o site inteiro invisivel. */
.js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .85s var(--ease); will-change:opacity,transform; }
.js [data-reveal].in{ opacity:1; transform:none; }
.js [data-reveal="left"]{ transform:translateX(-30px); }
.js [data-reveal="right"]{ transform:translateX(30px); }
.js [data-reveal="scale"]{ transform:scale(.955); }
.js [data-reveal].in{ transform:none; }
[data-delay="1"]{ transition-delay:.09s; } [data-delay="2"]{ transition-delay:.18s; }
[data-delay="3"]{ transition-delay:.27s; } [data-delay="4"]{ transition-delay:.36s; }
[data-delay="5"]{ transition-delay:.45s; } [data-delay="6"]{ transition-delay:.54s; }

/* text reveal por linha no scroll */
.reveal-text .word{ display:inline-block; transition:opacity .5s var(--ease); }
.js .reveal-text .word{ opacity:.16; }
.reveal-text .word.lit{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal], .js [data-reveal]{ opacity:1 !important; transform:none !important; }
  .reveal-text .word, .js .reveal-text .word{ opacity:1 !important; }
  .hero h1 .word{ opacity:1 !important; transform:none !important; animation:none !important; }
  .step{ position:relative; top:auto; }
}

/* ---------- 15. RESPONSIVO ---------- */
@media (max-width:1080px){
  .hero-inner{ grid-template-columns:1fr; gap:2.4rem; }
  /* Numa coluna só, a fotografia deixa de ser a metade direita e passa a
     ser o fundo inteiro: cobre a largura toda, ancorada no alto, e o véu
     vira vertical para o texto continuar legível por cima. */
  .hero-foto img{
    width:100%; object-fit:cover; object-position:50% 16%;
    mask-image:none; -webkit-mask-image:none;
  }
  .hero-foto::after{
    background:linear-gradient(180deg,
      rgba(26,26,26,.82) 0%, rgba(26,26,26,.42) 18%,
      rgba(26,26,26,.62) 34%, rgba(26,26,26,.88) 50%, var(--bg) 76%);
  }
  /* o título passa por cima da parte clara da foto e precisa de sombra */
  .hero h1, .hero .eyebrow{ text-shadow:0 2px 12px rgba(10,10,10,.9); }
  .hero-ficha{ margin-left:0; max-width:none; padding:0; align-self:start; }
  .hero-ficha::before{ display:none; }   /* o véu vertical já dá o contraste */
  /* o hero mobile estava com 1,6 tela de altura e o preço caía longe demais */
  .hero{ padding-top:clamp(88px,11vh,120px); padding-bottom:clamp(32px,4vh,52px); }
  .hero h1{ margin-bottom:1.1rem; }
  .hero-sub{ margin-bottom:1.5rem; }
  .hero-badges{ margin-top:1.4rem; gap:.4rem; }
  .hero-badges .badge{ font-size:.72rem; padding:.42rem .62rem; }
  .ficha-linha{ margin-bottom:.9rem; }
  .ficha-meta{ margin-bottom:.9rem; }
  .hero-ficha{ max-width:none; align-self:start; }
  .sim,.form-wrap,.trust{ grid-template-columns:1fr; }
  .sim-controls,.form-aside{ border-right:0; border-bottom:1px solid var(--line); }
  .bento .tcard,.bento .tcard.span-3,.bento .tcard.span-4{ grid-column:span 3; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
}
/* A partir daqui o menu horizontal ficaria apertado e "Como funciona"
   quebrava em duas linhas — melhor entregar o menu de hamburguer. */
@media (max-width:940px){
  .nav{ display:none; }
  .header-cta .btn-desktop{ display:none; }
  .burger{ display:grid; }
}
@media (max-width:860px){
  .models{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr 1fr; }
  .step{ position:relative; top:auto; grid-template-columns:auto 1fr; gap:.9rem; padding:1.15rem 1.2rem; }
  .step-n{ width:40px; height:40px; font-size:1rem; border-radius:6px; }
  .step h3{ font-size:1.02rem; margin-bottom:.35rem; }
  .step p{ font-size:.9rem; }
  .step-proof{ margin-top:.7rem; font-size:.72rem; padding:.35rem .65rem; }
  .steps{ gap:.6rem; }

  /* No celular cada seção gastava até 224px só de respiro em cima e embaixo.
     Apertar isso enxuga a página inteira sem tirar uma linha de conteúdo. */
  :root{ --section-y:clamp(46px,7vw,68px); }
}
@media (max-width:640px){
  .bento .tcard,.bento .tcard.span-3,.bento .tcard.span-4,.bento .tcard.span-6{ grid-column:span 6; }
  .form-grid{ grid-template-columns:1fr; }
  .island{ width:calc(100vw - 24px); justify-content:space-between; padding-left:.95rem; gap:.5rem; }
  .island-txt{ min-width:0; flex:1; }
  .island-txt b{ font-size:.79rem; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .island-txt span{ display:none; }
  .island .btn{ padding:.68rem .95rem; font-size:.83rem; min-height:44px; }
  .cta-row .btn{ width:100%; }
  .footer-top{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
  h1{ font-size:clamp(2.1rem,9vw,2.9rem); }
  .marquee-group{ gap:1.8rem; padding-right:1.8rem; }
  .marquee-item::after{ margin-left:1.8rem; }
}
@media (max-width:420px){ .stats{ grid-template-columns:1fr; } }

/* impressão */
@media print{ .header,.island,.marquee,.mobile-menu,.progress{ display:none !important; } body{ background:#fff; color:#000; } }

/* select isolado (simulador) */
.sel-solo{
  width:100%; padding:.82rem 2.4rem .82rem 1rem; border-radius:var(--radius-sm);
  background:rgba(255,255,255,.035); border:1px solid var(--line-strong);
  font-size:.92rem; cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8A33D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; background-size:15px;
  transition:border-color .3s, background-color .3s, box-shadow .3s;
}
.sel-solo option{ background:#212020; color:var(--text); }
.sel-solo:focus{ outline:none; border-color:rgba(184,115,51,.55); box-shadow:0 0 0 3px rgba(184,115,51,.12); }

/* ---------- 16. GALERIA + LIGHTBOX ---------- */
.gal-filtros{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(1.6rem,3vw,2.4rem); }
.gal-f{
  padding:.6rem 1.3rem; border-radius:var(--radius-sm); font-family:var(--font-display); font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03); color:var(--text-2);
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.gal-f:hover{ background:rgba(255,255,255,.07); color:var(--text); }
.gal-f.is-on{
  background:linear-gradient(135deg,var(--copper-light),var(--copper));
  color:#1A1A1A; border-color:transparent; font-weight:750;
  box-shadow:0 8px 22px -8px rgba(184,115,51,.55);
}

.gal{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.6rem,1.1vw,.9rem); grid-auto-flow:dense; }
.gal-item{
  position:relative; margin:0; border-radius:var(--radius); overflow:hidden; cursor:zoom-in;
  border:1px solid var(--line); background:var(--surface); aspect-ratio:4/3;
  transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .35s, box-shadow .45s var(--ease);
}
.gal-item.g-tall{ grid-row:span 2; aspect-ratio:4/6.15; }
.gal-item.g-wide{ grid-column:span 2; aspect-ratio:8.1/3; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease), filter .45s; }
.gal-item:hover{ border-color:rgba(184,115,51,.35); box-shadow:var(--shadow-md); }
.gal-item:hover img{ transform:scale(1.06); }
.gal-item figcaption{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:2.2rem .95rem .85rem; font-size:.8rem; font-weight:600; color:var(--text);
  background:linear-gradient(180deg,transparent,rgba(18,18,18,.9));
  opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gal-item:hover figcaption, .gal-item:focus-within figcaption{ opacity:1; transform:none; }
.gal-item.is-hidden{ display:none; }
/* itens além do limite inicial no celular */
.gal-item.is-alem{ display:none; }

.gal-mais-wrap{ display:none; margin-top:1.2rem; text-align:center; }
.gal-mais{
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px;
  padding:.7rem 1.4rem; border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:transparent; color:var(--text);
  font-family:var(--font-ui); font-size:.76rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  transition:border-color .3s, background .3s;
}
.gal-mais:hover{ border-color:var(--copper); background:rgba(184,115,51,.08); }
.gal-mais svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.gal-mais[aria-expanded="true"] svg{ transform:rotate(180deg); }
@media (max-width:520px){ .gal-mais-wrap{ display:block; } }
.gal-item::after{
  content:""; position:absolute; top:.75rem; right:.75rem; z-index:2; width:30px; height:30px;
  border-radius:50%; background:rgba(18,18,18,.65); backdrop-filter:blur(8px);
  border:1px solid var(--line-strong); opacity:0; transition:opacity .35s var(--ease);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5C56B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:15px;
}
.gal-item:hover::after{ opacity:1; }

/* planta na ficha técnica */
.planta{ margin:1.2rem 0 0; border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--line-strong); background:#F7F5F1; }
.planta img{ width:100%; height:auto; display:block; }
.planta figcaption{ padding:.65rem .9rem; font-size:.74rem; color:var(--muted); background:var(--surface); border-top:1px solid var(--line); }

/* lightbox */
.lbox{
  position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,3.5rem);
  background:rgba(14,14,14,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .35s var(--ease);
}
.lbox[hidden]{ display:none; }
.lbox.is-on{ opacity:1; }
.lbox-fig{ margin:0; max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; gap:.9rem; }
.lbox-fig img{
  max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain;
  border-radius:var(--radius); border:1px solid var(--line-strong); box-shadow:var(--shadow-lg);
  transform:scale(.97); transition:transform .4s var(--ease); background:var(--surface);
}
.lbox.is-on .lbox-fig img{ transform:none; }
.lbox-fig figcaption{ text-align:center; font-size:.9rem; color:var(--text-2); }
.lbox-x{
  position:absolute; top:clamp(.8rem,2.5vw,1.6rem); right:clamp(.8rem,2.5vw,1.6rem); z-index:2;
  width:46px; height:46px; border-radius:50%; font-size:1.7rem; line-height:1; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
  transition:background .3s, transform .3s var(--ease);
}
.lbox-x:hover{ background:rgba(255,255,255,.13); transform:rotate(90deg); }
.lbox-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; font-size:2rem; line-height:1; color:var(--text);
  background:rgba(255,255,255,.06); border:1px solid var(--line-strong);
  transition:background .3s, transform .3s var(--ease);
}
.lbox-prev{ left:clamp(.5rem,2vw,1.6rem); }
.lbox-next{ right:clamp(.5rem,2vw,1.6rem); }
.lbox-nav:hover{ background:rgba(255,255,255,.14); }
.lbox-prev:hover{ transform:translateY(-50%) translateX(-3px); }
.lbox-next:hover{ transform:translateY(-50%) translateX(3px); }
body.lbox-open{ overflow:hidden; }

@media (max-width:900px){
  .gal{ grid-template-columns:repeat(2,1fr); }
  .gal-item.g-wide{ grid-column:span 2; aspect-ratio:8.1/3; }
  .gal-item.g-tall{ grid-row:span 1; aspect-ratio:4/3; }
}
@media (max-width:520px){
  /* Uma coluna transformava a galeria em seis telas de rolagem. Duas
     colunas cortam isso pela metade e ainda deixam a foto legível —
     quem quiser ver grande abre no lightbox. */
  .gal{ grid-template-columns:repeat(2,1fr); gap:.5rem; }
  .gal-item.g-tall{ grid-row:span 2; aspect-ratio:4/6.15; }
  .gal-item.g-wide{ grid-column:span 2; aspect-ratio:8.1/3; }
  .gal-item.g-wide{ grid-column:span 1; aspect-ratio:4/3; }
  .lbox-nav{ width:44px; height:44px; font-size:1.6rem; }
}

/* ---------- 17. VÍDEO ---------- */


.gal-video .gal-play{
  position:absolute; top:.75rem; left:.75rem; z-index:3;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .7rem .4rem .55rem; border-radius:4px;
  font-family:var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.02em; color:#1A1A1A;
  background:linear-gradient(135deg,var(--copper-light),var(--copper));
  box-shadow:0 6px 18px -6px rgba(184,115,51,.6);
  font-variant-numeric:tabular-nums;
}
.gal-video .gal-play svg{ width:13px; height:13px; }
.gal-video::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F5C56B'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size:13px;
}
.gal-video img{ filter:brightness(.92); }
.gal-video:hover img{ filter:brightness(1); }

.lbox-fig video{
  max-width:100%; max-height:78vh; width:auto; height:auto;
  border-radius:var(--radius); border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg); background:#000; display:block; margin-inline:auto;
}

@media (prefers-reduced-motion: reduce){
  /* a foto do hero não anima com "reduzir movimento" ligado */
  .hero-foto img{ animation:none !important; }
}

/* ---------- 18. SISTEMA GRÁFICO DA MARCA ---------- */
/* padrão arquitetônico (repetição do símbolo A-frame) */
.padrao{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../img/marca/padrao-escuro.svg") center/900px auto repeat;
  opacity:.055;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 10%, transparent 75%);
}

/* corte diagonal cobre — o mesmo gesto da proposta comercial e do adesivo do veículo */
.corte{
  position:relative; height:clamp(48px,7vw,84px); overflow:hidden;
  background:var(--bg-2);
}
.corte::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--bg) 0 46%, var(--copper) 46% 47.6%, var(--bg-2) 47.6% 100%);
}
.corte::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 0 62%, rgba(184,115,51,.14) 62% 66%, transparent 66%);
}

/* filete cobre para abrir blocos institucionais */
.filete{ display:block; width:52px; height:3px; background:var(--copper); margin-bottom:1.4rem; }
.section-head.center .filete{ margin-inline:auto; }

/* tríade da marca */
.triade{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:clamp(1rem,3vw,2.6rem);
  font-family:var(--font-display); font-size:.74rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--sand);
}
.triade span{ display:inline-flex; align-items:center; gap:clamp(1rem,3vw,2.6rem); }
.triade span:not(:last-child)::after{ content:""; width:6px; height:6px; background:var(--copper); flex:none; }

/* ============================================================
   16. ENTRANDO NO CHALÉ — cena conduzida pelo scroll
   ------------------------------------------------------------
   A altura do .entrada-trilho é o "quanto de rolagem" a cena dura.
   O .entrada-palco fica grudado (sticky) enquanto isso.
   Só transform e opacity mudam por frame: o compositor resolve
   tudo na GPU, sem layout nem repaint.
   ============================================================ */
.entrada{ position:relative; background:var(--bg-2); }
.entrada-trilho{ height:340vh; }
.entrada-palco{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; display:grid; place-items:center;
  background:#0E0E0E;
}

.entrada-cena{ position:absolute; inset:0; z-index:0; }
.cena{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transform-origin:50% 54%;
  backface-visibility:hidden; will-change:transform,opacity;
}
.cena-dentro{ z-index:1; opacity:0; transform:scale(1.6); }
.cena-fora  { z-index:2; transform:scale(1); }

.cena-moldura{
  position:absolute; left:50%; top:54%; z-index:3;
  width:min(72vw,620px); aspect-ratio:4/3; translate:-50% -50%;
  transform-origin:50% 54%; opacity:0;
  filter:drop-shadow(0 0 22px rgba(184,115,51,.45));
  will-change:transform,opacity; pointer-events:none;
}

/* O filme cobre as fotos assim que carrega. Enquanto não carrega, fica
   invisível e o visitante vê a versão em foto. */
.cena-filme{
  position:absolute; inset:0; z-index:3; width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 50%;
  opacity:0; transition:opacity .6s var(--ease); pointer-events:none;
}
.cena-filme.is-on{ opacity:1; }
/* O filme é em retrato. No monitor deitado, cabe inteiro e encostado à
   direita — o texto fica com a metade esquerda só para ele. */
@media (min-width:861px){
  .cena-filme{ object-fit:contain; object-position:76% 50%; }
}
/* Com o filme no ar as três camadas de foto saem de cena: a filmagem já
   percorre a fachada até o interior sozinha. Elas continuam no HTML como
   reserva, para quando o vídeo não carrega. */
.entrada-cena.tem-filme .cena-fora,
.entrada-cena.tem-filme .cena-dentro,
.entrada-cena.tem-filme .cena-moldura{ opacity:0 !important; }

/* As fotos do chalé são em retrato. Num monitor deitado, `cover` corta dois
   terços da imagem e sobra um pedaço sem leitura. Isso vale para a cena de
   reserva — a que aparece quando o filme não carrega —, onde as fotos passam
   a caber inteiras e encostadas à direita, no mesmo lugar que o filme ocupa. */
@media (min-width:861px){
  .entrada-cena:not(.tem-filme) .cena-fora,
  .entrada-cena:not(.tem-filme) .cena-dentro{
    object-fit:contain; object-position:76% 50%;
  }
}
/* com o filme no ar o véu atrás do texto pode ser bem mais leve */
.entrada-palco:has(.entrada-cena.tem-filme) .entrada-ui::before{
  background:radial-gradient(ellipse 58% 56% at 50% 50%,
    rgba(8,8,8,.72) 0%, rgba(8,8,8,.5) 44%, rgba(8,8,8,.18) 70%, transparent 88%);
}

.cena-escuro{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 66% at 50% 54%, transparent 0%, rgba(10,10,10,.92) 100%),
    linear-gradient(180deg, rgba(10,10,10,.55), transparent 34%, rgba(10,10,10,.78));
  opacity:.8; will-change:opacity;
}

/* ---- texto e CTA por cima da cena ---- */
.entrada-ui{
  position:relative; z-index:5; width:100%;
  max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter);
  display:grid; justify-items:center; text-align:center; gap:1.6rem;
}
/* Com o modelo em 3D o quadro tem dois donos: o chalé fica à direita e
   o texto ocupa a esquerda. Sem isso a legenda cai em cima da porta
   iluminada, que é justamente o que a cena quer mostrar. */
@media (min-width:861px){
  .entrada-palco:has(.entrada-cena.tem-filme) .entrada-ui{
    justify-items:start; text-align:left; max-width:calc(var(--max) + 2rem); gap:1.1rem;
  }
  .entrada-palco:has(.entrada-cena.tem-filme) .entrada-legendas{ min-height:9.5rem; }
  .entrada-palco:has(.entrada-cena.tem-filme) .entrada-l{ margin-inline:0; max-width:23ch; }
  .entrada-palco:has(.entrada-cena.tem-filme) .entrada-l span{ max-width:32ch; }
  .entrada-palco:has(.entrada-cena.tem-filme) .entrada-ui::before{
    inset:-22% 34% -22% -14%;
    background:radial-gradient(ellipse 70% 58% at 34% 50%,
      rgba(8,8,8,.8) 0%, rgba(8,8,8,.56) 46%, rgba(8,8,8,.2) 72%, transparent 90%);
  }
}
/* Sem este véu o texto cai em cima da parte mais clara da foto e some.
   Fica atrás das legendas (z-index:-1 dentro do contexto do .entrada-ui). */
.entrada-ui::before{
  content:""; position:absolute; inset:-22% -12%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 62% 60% at 50% 50%,
    rgba(8,8,8,.9) 0%, rgba(8,8,8,.74) 42%, rgba(8,8,8,.34) 68%, transparent 88%);
}
.entrada-legendas{ position:relative; display:grid; min-height:11.5rem; align-content:center; }
.entrada-l{
  grid-area:1/1; max-width:34ch; margin-inline:auto;
  opacity:0; transform:translateY(14px);
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.entrada-l.is-on{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease) .2s, transform .45s var(--ease) .2s;
}
.entrada-l b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.8rem,5.2vw,3.1rem); line-height:1.06; letter-spacing:-.02em;
  color:var(--offwhite); text-shadow:0 2px 6px rgba(0,0,0,.9), 0 4px 34px rgba(0,0,0,.85);
}
.entrada-l span{
  display:block; margin-top:.9rem; font-size:clamp(.92rem,2.2vw,1.05rem);
  line-height:1.6; color:var(--offwhite); text-shadow:0 1px 3px rgba(0,0,0,.95), 0 2px 22px rgba(0,0,0,.9);
}

.entrada-barra{ width:min(240px,52vw); height:2px; background:var(--line-strong); border-radius:2px; overflow:hidden; }
.entrada-barra i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--copper-deep),var(--copper-light)); }

.entrada-cta{ opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); }
.entrada-cta.is-on{ opacity:1; transform:none; pointer-events:auto; }

.entrada-dica{
  position:absolute; left:50%; bottom:clamp(1.2rem,4vh,2.4rem); translate:-50% 0; z-index:6;
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-ui); font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sand-deep);
  transition:opacity .45s var(--ease); pointer-events:none;
}
.entrada-dica svg{ width:15px; height:15px; animation:dicaDesce 1.9s var(--ease) infinite; }
.entrada-dica.is-off{ opacity:0; }
@keyframes dicaDesce{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(5px); opacity:1 } }

/* celular: menos escala (economiza memória de textura) e cena mais curta */
@media (max-width:640px){
  .entrada-trilho{ height:230vh; }
  .cena-moldura{ width:80vw; }
  .entrada-legendas{ min-height:13rem; }
}

/* quem pediu menos movimento recebe a cena já montada, parada */
@media (prefers-reduced-motion: reduce){
  .entrada-trilho{ height:auto; }
  .entrada-palco{ position:relative; height:auto; min-height:0; padding-block:clamp(3.5rem,9vw,6rem); }
  .cena-dentro{ opacity:1 !important; transform:none !important; }
  .cena-fora,.cena-moldura,.entrada-dica{ display:none; }
  .cena-escuro{ opacity:.82 !important; }
  .entrada-legendas{ min-height:0; gap:2.2rem; }
  .entrada-l{ grid-area:auto; opacity:1 !important; transform:none !important; }
  .entrada-cta{ opacity:1 !important; transform:none !important; pointer-events:auto; }
}


/* ============================================================
   17. ABERTURA — a chegada ao site
   ------------------------------------------------------------
   Não é tela de carregamento: o conteúdo já está no HTML e o
   Google já o lê. Isto é só a ORDEM em que ele aparece, numa
   cascata de pouco mais de um segundo — o filete de cobre risca,
   o título sobe palavra a palavra, a fotografia assenta e o
   apoio entra por último.

   Tudo depende da classe .abertura, que o JS põe no <html> e
   TIRA depois de 2,6 s. Enquanto ela existe, os elementos podem
   começar invisíveis; quando sai, voltam ao estado natural —
   visível. Assim, se a animação não rodar por qualquer motivo,
   a página não fica presa em branco: no pior caso ela aparece
   sem efeito nenhum, que é exatamente o que deve acontecer.
   ============================================================ */
.abertura .hero .eyebrow{ animation:abreSobe .8s var(--ease) both; }
.abertura .hero .eyebrow::before{
  transform-origin:left; animation:riscaCobre .7s var(--ease) both;
}
.abertura .hero-sub    { animation:abreSobe .9s var(--ease) .62s both; }
.abertura .hero .cta-row { animation:abreSobe .9s var(--ease) .74s both; }
.abertura .hero .cta-note{ animation:abreSobe .9s var(--ease) .84s both; }
.abertura .hero-badges { animation:abreSobe .9s var(--ease) .94s both; }

@keyframes abreSobe{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes riscaCobre{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}

/* quem pediu menos movimento recebe a página montada, sem abertura */
@media (prefers-reduced-motion: reduce){
  .abertura .hero .eyebrow, .abertura .hero .eyebrow::before, .abertura .hero-sub,
  .abertura .hero .cta-row, .abertura .hero .cta-note, .abertura .hero-badges{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}