/* ============================================================
   SOLUX × AUREMAR — Landing "Engenharia de Superfícies"
   Direção: spec-sheet industrial editorial.
   Display: Fraunces (serifada de alto contraste, óptica).
   Texto:   Archivo (grotesca industrial).
   ============================================================ */

/* ---- Fontes auto-hospedadas (variáveis, via Flask static) ---- */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Archivo";
  src: url("/static/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

/* ------------------------- Tokens ------------------------- */
:root {
  /* neutros com viés quente (concreto + ocre), nunca cinza puro */
  --paper:      #f3efe6;
  --paper-2:    #e9e3d6;
  --ink:        #16202c;
  --ink-soft:   #3c4654;
  --line:       #d6cdba;

  /* fundo grafite-marinho (DNA Solux) */
  --navy:       #131b27;
  --navy-2:     #0d141d;
  --navy-line:  #26313f;
  --navy-ink:   #eef1f4;
  --navy-soft:  #9aa6b4;

  /* acento resina fundida — cobre/âmbar, usado com parcimônia */
  --resin:      #c8683a;
  --resin-bright:#e08a4e;
  --resin-deep: #a24f28;

  --steel:      #6f8394;   /* azul-aço frio, secundário */

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --hair: var(--line);
}

/* tema escuro herda do OS, mas o toggle stampa data-theme e vence */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--navy);
    --bg-2: var(--navy-2);
    --fg: var(--navy-ink);
    --fg-soft: var(--navy-soft);
    --hair: var(--navy-line);
  }
}
:root[data-theme="dark"] {
  --bg: var(--navy); --bg-2: var(--navy-2);
  --fg: var(--navy-ink); --fg-soft: var(--navy-soft); --hair: var(--navy-line);
}
:root[data-theme="light"] {
  --bg: var(--paper); --bg-2: var(--paper-2);
  --fg: var(--ink); --fg-soft: var(--ink-soft); --hair: var(--line);
}

/* ------------------------- Reset ------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ------------------------- Tipografia ------------------------- */
h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  font-variation-settings: "opsz" 120;
}
.eyebrow {
  font-family: "Archivo", sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--resin);
}
.sec-title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: .3rem;
}
.phase-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-top: .5rem; }
.cta-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
/* o eyebrow acima do título ganha respiro */
.sec-title + *, .eyebrow + .sec-title { margin-top: .4rem; }

/* ------------------------- Layout ------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
section { padding-block: clamp(4rem, 9vw, 8rem); }
.section-num {
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.15em; color: var(--fg-soft); opacity: 0.6;
}

/* ------------------------- Nav ------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--gutter);
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-line);
}
.nav img { height: 46px; width: auto; }
.nav-r { display: flex; align-items: center; gap: 1.4rem; }
.nav-cta {
  font-family: "Archivo"; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.02em;
  text-decoration: none; color: var(--navy);
  background: var(--resin); padding: 0.6rem 1.15rem; border-radius: 2px;
  transition: background .2s;
}
.nav-cta:hover { background: var(--resin-bright); }
.theme-btn {
  background: transparent; border: 1px solid var(--navy-line); color: var(--navy-soft);
  width: 34px; height: 34px; border-radius: 2px; cursor: pointer; font-size: 1rem;
  display: grid; place-items: center; transition: border-color .2s, color .2s;
}
.theme-btn:hover { border-color: var(--resin); color: var(--resin); }
@media (max-width: 640px){ .nav-cta{ display:none; } }

/* ------------------------- Hero com vídeo pin (scroll-scrub) ------------------------- */
/* driver: seção alta que gera o "trilho" de scroll enquanto o hero fica pinado */
.hero-scroll { position: relative; height: 200vh; background: var(--navy-2); }
@media (max-width: 768px){ .hero-scroll{ height: 140vh; } }

.hero-stage {
  position: absolute; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden;
  background: var(--navy-2); z-index: 1;
}
/* vídeo de fundo, cobrindo a viewport, mudo e sem controles */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; pointer-events: none; background: var(--navy-2);
}
/* overlay para legibilidade do texto sobre o vídeo */
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(9,13,20,.92) 0%, rgba(9,13,20,.75) 45%, rgba(9,13,20,.35) 75%, rgba(9,13,20,.60) 100%),
    linear-gradient(to bottom, rgba(9,13,20,.6) 0%, transparent 25%, transparent 65%, rgba(9,13,20,.85) 100%);
}
.hero {
  position: absolute; inset: 0; z-index: 2;
  color: var(--navy-ink);
  display: flex; align-items: center; justify-content: center;
  padding-top: 65px;
  padding-bottom: 2rem;
}
.hero .wrap { position: relative; z-index: 1; width: 100%; }

.hero-scrollcue {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.4); border-radius: 12px; z-index: 3;
}
.hero-scrollcue span {
  position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; border-radius: 2px;
  background: var(--resin-bright); transform: translateX(-50%);
  animation: cueDrop 1.6s ease-in-out infinite;
}
@keyframes cueDrop { 0%,100%{ opacity:.3; transform: translate(-50%,0);} 50%{ opacity:1; transform: translate(-50%,12px);} }

.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; }
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; gap: 1rem; } }

.hero h1 { font-size: clamp(1.9rem, 4.2vw, 3.8rem); font-weight: 600; color: #fff; line-height: 1.05; }
.hero h1 em { font-style: italic; color: var(--resin-bright); font-weight: 500; }
.hero .lead { color: #c3ccd6; margin-top: 0.9rem; max-width: 44ch; font-size: clamp(.88rem, 1.1vw, 1.05rem); line-height: 1.5; }

.hero-tag {
  font-family: "Archivo", sans-serif; font-size: clamp(.68rem, 1vw, .78rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy-soft); margin-bottom: 0.8rem;
  line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem;
}
.hero-tag .tag-sub { white-space: normal; }
.hero-tag .tag-sep { color: var(--resin-bright); }

.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; align-items: center; }
.btn {
  font-family: "Archivo"; font-weight: 600; font-size: .92rem; letter-spacing: .01em;
  text-decoration: none; padding: .85rem 1.5rem; border-radius: 2px;
  display: inline-flex; align-items: center; gap: .6rem; transition: transform .15s, background .2s;
}
.btn-primary { background: var(--resin); color: #fff; }
.btn-primary:hover { background: var(--resin-bright); transform: translateY(-1px); }
.btn-ghost { color: #dfe5ec; border: 1px solid var(--navy-line); }
.btn-ghost:hover { border-color: var(--resin); color: #fff; }

/* card de métricas do hero */
.spec-card {
  border: 1px solid var(--navy-line); border-radius: 3px;
  background: color-mix(in srgb, #0a1119 75%, transparent);
  overflow: hidden; backdrop-filter: blur(8px);
}
.spec-card-head {
  padding: .65rem 1rem; border-bottom: 1px solid var(--navy-line);
  font-family: "Archivo"; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy-soft); display: flex; justify-content: space-between;
}
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; }
.spec-cell { padding: .75rem 1rem; border-right: 1px solid var(--navy-line); border-bottom: 1px solid var(--navy-line); }
.spec-cell:nth-child(2n){ border-right: none; }
.spec-cell:nth-last-child(-n+2){ border-bottom: none; }
.spec-val { font-family: "Fraunces", serif; font-size: clamp(1.4rem, 2.5vw, 2.1rem); color: #fff; font-weight: 600; line-height: 1; }
.spec-val .un { font-size: .45em; color: var(--resin-bright); margin-left: .1rem; vertical-align: .2em; }
.spec-rot { font-family: "Archivo"; font-size: .72rem; color: var(--navy-soft); margin-top: .2rem; }

/* ajustador mobile para hero não estourar 100vh */
@media (max-width: 640px) {
  .hero { padding-top: 60px; padding-bottom: 3rem; }
  .hero-tag { font-size: .66rem; letter-spacing: .08em; margin-bottom: .4rem; }
  .hero h1 { font-size: clamp(1.55rem, 5.8vw, 2.1rem); }
  .hero .lead { margin-top: .45rem; font-size: .83rem; line-height: 1.4; max-width: 100%; }
  .hero-actions { margin-top: .75rem; }
  .btn { padding: .65rem 1.05rem; font-size: .8rem; }
  .spec-card-head { padding: .45rem .75rem; font-size: .6rem; }
  .spec-cell { padding: .45rem .7rem; }
  .spec-val { font-size: 1.25rem; }
  .spec-rot { font-size: .64rem; }
  .hero-scrollcue { bottom: .6rem; height: 32px; width: 20px; }
}

/* ------------------------- Intro / posicionamento ------------------------- */
.intro { background: var(--bg-2); }
.intro-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 820px){ .intro-grid{ grid-template-columns: 1fr; } }
.intro h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
.intro p + p { margin-top: 1.1rem; }
.pull {
  font-family: "Fraunces"; font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.35; color: var(--fg);
  border-left: 2px solid var(--resin); padding-left: 1.4rem; margin: 0;
}

/* ------------------------- Antes / Depois ------------------------- */
.ba-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.4rem; }
.compare {
  position: relative; width: 100%; aspect-ratio: 3 / 2; overflow: hidden;
  border: 1px solid var(--hair); border-radius: 3px; user-select: none; touch-action: none;
  background: #222;
}
.compare img, .compare .after-sim {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.compare .after { position:absolute; inset:0; z-index:2; clip-path: inset(0 100% 0 0); }  /* JS controla */
.compare .after img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare .ba-base { z-index:1; }
/* simulação "depois" — piso resina espelhado (placeholder ilustrativo) */
.after-sim {
  background:
    linear-gradient(105deg, rgba(255,255,255,.12) 0%, transparent 22%, rgba(255,255,255,.05) 55%, transparent 80%),
    radial-gradient(120% 80% at 30% 0%, #4a5866 0%, #2c3742 55%, #1c242d 100%);
}
.after-sim::after {
  content: "reflexo do galpão"; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  font-family:"Archivo"; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: rgba(255,255,255,.4);
}
.ba-label {
  position: absolute; top: 1rem; font-family: "Archivo"; font-weight: 600; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; padding: .35rem .7rem; border-radius: 2px;
  background: rgba(10,14,20,.72); color: #fff; z-index: 3; backdrop-filter: blur(3px);
}
.ba-label.l { left: 1rem; } .ba-label.r { right: 1rem; color: var(--resin-bright); }
.compare .handle {
  position: absolute; top: 0; bottom: 0; left: 42%; width: 2px; background: var(--resin);
  transform: translateX(-50%); z-index: 4; cursor: ew-resize;
}
.handle .grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: var(--resin); color: #fff;
  display: grid; place-items: center; box-shadow: 0 4px 18px rgba(0,0,0,.4); font-size: 1rem;
}
.ba-note { font-family:"Archivo"; font-size: .82rem; color: var(--fg-soft); margin-top: 1rem; }
.ba-note b { color: var(--resin); }

/* ------------------------- Escolha inteligente ------------------------- */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.6rem; }
@media (max-width: 720px){ .choice-grid{ grid-template-columns: 1fr; } }
.choice {
  border: 1px solid var(--hair); border-radius: 3px; padding: 2rem 1.8rem; background: var(--bg-2);
}
.choice.bad { opacity: .92; }
.choice.good { border-color: var(--resin); position: relative; }
.choice.good::before {
  content: "SOLUX"; position: absolute; top: -1px; right: 1.4rem; transform: translateY(-50%);
  background: var(--resin); color: #fff; font-family:"Archivo"; font-weight:700; font-size:.66rem;
  letter-spacing:.18em; padding:.3rem .7rem; border-radius: 2px;
}
.choice h3 { font-family:"Archivo"; font-weight: 700; font-size: 1.15rem; letter-spacing:-.01em; margin-bottom: 1rem; display:flex; align-items:center; gap:.6rem; }
.choice .mark { font-family:"Fraunces"; font-size: 1.4rem; }
.choice.bad .mark { color: var(--steel); }
.choice.good .mark { color: var(--resin); }
.choice ul { list-style: none; margin: 0; padding: 0; }
.choice li { padding: .55rem 0; border-top: 1px solid var(--hair); font-size: .95rem; color: var(--fg-soft); }
.choice li:first-child { border-top: none; }

/* ------------------------- Prova técnica ------------------------- */
.proof { background: var(--navy); color: var(--navy-ink); border-block: 1px solid var(--navy-line); }
.proof .eyebrow { color: var(--resin-bright); }
.proof h2 { color: #fff; font-size: clamp(1.9rem,3.5vw,2.8rem); }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; margin-top: 3rem; border: 1px solid var(--navy-line); border-radius: 3px; overflow: hidden; }
@media (max-width: 860px){ .proof-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .proof-grid{ grid-template-columns: 1fr; } }
.proof-cell { padding: 2rem 1.6rem; border-right: 1px solid var(--navy-line); }
.proof-cell:last-child { border-right: none; }
@media (max-width: 860px){
  .proof-cell:nth-child(2n){ border-right: none; }
  .proof-cell:nth-child(-n+2){ border-bottom: 1px solid var(--navy-line); }
}
.proof-n { font-family:"Fraunces"; font-weight: 600; font-size: 2.6rem; color: var(--resin-bright); line-height:1; font-variation-settings:"opsz" 144; }
.proof-n .un { font-size: 1.1rem; color: var(--navy-soft); margin-left:.15rem; }
.proof-l { font-family:"Archivo"; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; margin:.9rem 0 .5rem; }
.proof-d { font-size:.86rem; color: var(--navy-soft); line-height:1.5; }

/* ------------------------- Escopo (fases) ------------------------- */
.phase { display: grid; grid-template-columns: 0.28fr 0.72fr; gap: clamp(1.5rem,4vw,3.5rem); padding-block: 2.6rem; border-top: 1px solid var(--hair); }
.phase:first-of-type { border-top: none; }
@media (max-width: 760px){ .phase{ grid-template-columns: 1fr; gap: 1.2rem; } }
.phase-tag { font-family:"Archivo"; font-weight:700; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color: var(--resin); }
.phase h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: .5rem; }
.phase ul { list-style:none; margin:0; padding:0; }
.phase li { position: relative; padding: .7rem 0 .7rem 1.7rem; border-top: 1px solid var(--hair); font-size:.98rem; }
.phase li:first-child { border-top: none; }
.phase li::before { content:""; position:absolute; left:0; top:1.15rem; width:.55rem; height:.55rem; background: var(--resin); border-radius:1px; transform: rotate(45deg); }

/* ------------------------- Galpão não para ------------------------- */
.nonstop { background: var(--bg-2); }
.nonstop-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width: 820px){ .nonstop-grid{ grid-template-columns: 1fr; } }
.nonstop h2 { font-size: clamp(1.9rem,3.5vw,2.8rem); }
.half-viz { display:flex; border:1px solid var(--hair); border-radius:3px; overflow:hidden; aspect-ratio: 16/10; }
.half-viz .a, .half-viz .b { flex:1; display:grid; place-items:center; text-align:center; padding:1rem; position:relative; }
.half-viz .a { background: linear-gradient(160deg,#2c3742,#1c242d); color:#cdd6df; }
.half-viz .b { background: repeating-linear-gradient(45deg,#3a444f 0 10px,#333d47 10px 20px); color:#8b97a3; }
.half-viz .lbl { font-family:"Archivo"; font-weight:600; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; }
.half-viz .a .big, .half-viz .b .big { font-family:"Fraunces"; font-size:1.6rem; display:block; margin-bottom:.3rem; }
.half-viz .a .big { color: var(--resin-bright); }

/* ------------------------- Investimento ------------------------- */
.invest { background: var(--navy); color: var(--navy-ink); text-align:center; border-top:1px solid var(--navy-line); }
.invest .eyebrow { color: var(--resin-bright); justify-content:center; }
.invest .eyebrow::before { display:none; }
.invest h2 { color:#fff; font-size: clamp(1.6rem,3vw,2.4rem); font-weight:500; }
.price {
  font-family:"Fraunces"; font-weight: 600; font-size: clamp(3.5rem, 11vw, 7.5rem); color:#fff;
  line-height:1; margin: 1.5rem 0 .5rem; font-variation-settings:"opsz" 144; letter-spacing:-.02em;
}
.price .rs { font-size: .38em; color: var(--resin-bright); vertical-align: .55em; margin-right:.15rem; font-weight:500; }
.invest-sub { color: var(--navy-soft); font-family:"Archivo"; font-size:.95rem; letter-spacing:.02em; }
.invest-incl { display:flex; flex-wrap:wrap; justify-content:center; gap: .7rem; margin: 2.4rem 0 2.8rem; }
.chip {
  font-family:"Archivo"; font-size:.8rem; color: var(--navy-ink); border:1px solid var(--navy-line);
  padding:.5rem .95rem; border-radius: 100px;
}
.chip::before { content:"◆ "; color: var(--resin); font-size:.7em; }

/* ------------------------- Passos / CTA final ------------------------- */
.steps { display:grid; grid-template-columns: repeat(4,1fr); gap:1.2rem; margin-top: 3rem; }
@media (max-width:720px){ .steps{ grid-template-columns:1fr 1fr; } }
.step { border-top: 2px solid var(--resin); padding-top: 1rem; }
.step-n { font-family:"Fraunces"; font-weight:600; font-size:1.4rem; color: var(--resin); }
.step-t { font-family:"Archivo"; font-weight:600; font-size:.95rem; margin-top:.3rem; }
.step-d { font-size:.85rem; color: var(--fg-soft); margin-top:.3rem; }

.cta-final { text-align:center; }
.cta-final h2 { font-size: clamp(2rem,4vw,3.2rem); }
.cta-final .lead { max-width: 42ch; margin: 1.4rem auto 2.2rem; }
.contact-line { font-family:"Archivo"; font-weight:600; margin-top:1.6rem; color: var(--fg-soft); }
.contact-line b { color: var(--fg); }

/* ------------------------- Footer ------------------------- */
footer { background: var(--navy-2); color: var(--navy-soft); border-top:1px solid var(--navy-line); padding-block: 2.6rem; }
footer .wrap { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; }
footer img { height: 40px; opacity:.9; }
footer .f-meta { font-family:"Archivo"; font-size:.82rem; letter-spacing:.02em; text-align:right; }

/* ------------------------- Títulos de seção (maiores) ------------------------- */
.sec-title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: .3rem;
}
.phase-title { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-top: .5rem; }
.cta-title { font-size: clamp(2.6rem, 5.5vw, 4.4rem); }
/* o eyebrow acima do título ganha respiro */
.sec-title + *, .eyebrow + .sec-title { margin-top: .4rem; }

/* ------------------------- Sistema de animação ------------------------- */
.anim { opacity: 0; will-change: transform, opacity; transition:
  opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.anim[data-anim="fade"] { transform: translateY(10px); }
.anim[data-anim="rise"] { transform: translateY(34px); }
.anim[data-anim="pop"]  { transform: scale(.9); }
.anim.in { opacity: 1; transform: none; }

/* hero: títulos por linha com máscara (clip reveal) */
.hero-h1 { font-family:"Fraunces",serif; font-size: clamp(2.6rem,6vw,5rem); font-weight:600; color:#fff;
  line-height:1.02; letter-spacing:-.01em; }
.hero-h1 .line { display:block; overflow:hidden; }
.hero-h1 .line { --ty:110%; }
.hero-h1 .line { position:relative; }
.hero-h1 .line > em, .hero-h1 .line { }
.hero-h1 .line { transform: translateY(var(--ty)); opacity:0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s ease; }
.hero-h1 .line.in { transform: translateY(0); opacity:1; }
.hero-h1 em { font-style: italic; color: var(--resin-bright); font-weight:500; }

@media (prefers-reduced-motion: reduce){
  .anim, .hero-h1 .line { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* legado */
.reveal { opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }

/* ------------------------- Indicador flutuante de progresso ------------------------- */
.progress-rail {
  position: fixed; left: 1.4rem; top: 50%; transform: translateY(-50%) translateX(-14px);
  z-index: 60; width: 208px; padding: 1.1rem 1.2rem 1.25rem;
  background: color-mix(in srgb, var(--navy) 82%, transparent);
  border: 1px solid var(--navy-line); border-radius: 12px;
  backdrop-filter: blur(12px); box-shadow: 0 10px 40px rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.progress-rail.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%) translateX(0); }
.rail-head { display:flex; align-items:baseline; gap:.25rem; }
.rail-step { font-family:"Fraunces"; font-weight:600; font-size:1.9rem; color: var(--resin-bright); line-height:1; font-variation-settings:"opsz" 144; }
.rail-total { font-family:"Archivo"; font-size:.82rem; color: var(--navy-soft); }
.rail-now {
  font-family:"Archivo"; font-weight:700; font-size:1rem; color:#fff; margin:.2rem 0 .9rem;
  letter-spacing:-.01em; min-height:1.15em;
}
.rail-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.12rem; }
.rail-list a {
  display:flex; align-items:center; gap:.6rem; text-decoration:none;
  font-family:"Archivo"; font-weight:500; font-size:.95rem; color: var(--navy-soft);
  padding:.32rem 0; transition: color .25s;
}
.rail-dot { width:7px; height:7px; border-radius:50%; background: var(--navy-line); flex:none; transition: background .25s, transform .25s; }
.rail-list a:hover { color:#dfe5ec; }
/* tópicos já visitados (passados) ficam laranja; some ao voltar */
.rail-list a.done { color: var(--resin-bright); }
.rail-list a.done .rail-dot { background: var(--resin); }
.rail-list a.active { color:#fff; font-weight:700; }
.rail-list a.active .rail-dot { background: var(--resin); transform: scale(1.6); box-shadow:0 0 0 3px color-mix(in srgb,var(--resin) 30%, transparent); }
.rail-bar { position:absolute; left:0; top:1rem; bottom:1rem; width:3px; border-radius:3px; background: var(--navy-line); overflow:hidden; }
.rail-bar span { position:absolute; top:0; left:0; width:100%; height:0; background: linear-gradient(var(--resin-bright),var(--resin)); transition: height .5s cubic-bezier(.2,.7,.2,1); }
/* esconde em telas menores (não atrapalha o conteúdo) */
@media (max-width: 1180px){ .progress-rail{ display:none; } }

/* ------------------------- Galeria de simulações ------------------------- */
.gallery-sec { background: var(--bg-2); }
.gallery { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.8rem; }
@media (max-width: 900px){ .gallery{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .gallery{ grid-template-columns: 1fr; } }
.shot { position:relative; border:1px solid var(--hair); border-radius:6px; overflow:hidden; background:#111; }
.shot img { width:100%; aspect-ratio: 3/4; object-fit: cover; display:block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.shot:hover img { transform: scale(1.045); }
.shot figcaption {
  position:absolute; left:0; right:0; bottom:0; padding: 2.4rem .9rem .8rem;
  font-family:"Archivo"; font-size:.82rem; line-height:1.4; color:#fff;
  background: linear-gradient(transparent, rgba(8,12,18,.9));
}
.shot-tag {
  display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: var(--navy); background: var(--resin-bright); padding:.16rem .45rem; border-radius:2px; margin-right:.5rem; vertical-align:1px;
}
/* a 1ª foto ocupa 2 colunas em destaque */
.gallery .shot:first-child { grid-column: span 2; }
.gallery .shot:first-child img { aspect-ratio: 16/10; }
@media (max-width: 560px){ .gallery .shot:first-child{ grid-column: span 1; } .gallery .shot:first-child img{ aspect-ratio:3/4; } }

/* ------------------------- Reveal palavra-a-palavra (títulos) ------------------------- */
.sec-title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(1.5deg);
  transition: opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--wi) * 55ms);
}
.sec-title.in .word { opacity: 1; transform: none; }
.sec-title .word.em { color: var(--resin-bright); font-style: italic; }
@media (prefers-reduced-motion: reduce){
  .sec-title .word { opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ------------------------- Comparadores empilhados ------------------------- */
.compare-stack { display: grid; gap: 1.6rem; }
@media (min-width: 860px){ .compare-stack{ grid-template-columns: 1fr 1fr; gap: 1.4rem; } }
.compare-item { margin: 0; }
.compare-cap {
  font-family:"Archivo"; font-size:.86rem; color: var(--fg-soft); margin-top:.8rem; line-height:1.4;
}
/* ---- Comparador híbrido (máscara deslizante + botões) ---- */
.ba-toggle { margin: 0; }
.ba-base { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* botões Antes/Comparar/Depois */
.ba-switch {
  position:absolute; top: .9rem; left: 50%; transform: translateX(-50%); z-index:6;
  display:inline-flex; gap:2px; padding:3px; border-radius:100px;
  background: rgba(10,14,20,.72); backdrop-filter: blur(6px); border:1px solid rgba(255,255,255,.14);
}
.ba-btn {
  font-family:"Archivo"; font-weight:700; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:#cdd6df; background:transparent; border:0; cursor:pointer;
  padding:.4rem .95rem; border-radius:100px; transition: background .25s, color .25s;
}
.ba-btn.is-on { background: var(--resin); color:#fff; }
/* handle e alça só aparecem no modo comparar */
.ba-toggle .handle { opacity: 0; transition: opacity .3s ease; pointer-events:none; }
.ba-toggle .compare.dragging-on .handle { opacity: 1; pointer-events:auto; }
.ba-toggle .ba-label { opacity: 0; transition: opacity .3s ease; }
.ba-toggle .compare.dragging-on .ba-label { opacity: 1; }
@media (prefers-reduced-motion: reduce){ .ba-toggle .handle, .ba-toggle .ba-label{ transition:none; } }

/* ------------------------- Escopo com vídeo LATERALIZADO (pinned + scrub) ------------------------- */
/* seção MUITO alta = scrub lento; wrapper pinado fica preso enquanto rola */
.escopo-sec { position: relative; padding-block: 0; height: 520vh; background: var(--navy); }
.escopo-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.escopo-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; width: 100%;
}
@media (max-width: 900px){ .escopo-grid{ grid-template-columns: 1fr; gap: 2rem; } }
.escopo-content .ba-head { margin-bottom: 1.8rem; display:block; }
.escopo-phases { display: grid; gap: 1rem; }
.escopo-sec .eyebrow { color: var(--resin-bright); }
.escopo-sec .sec-title { color:#fff; }
.escopo-sec .phase { border-top-color: rgba(255,255,255,.14); padding-block: 1.1rem; grid-template-columns: 0.34fr 0.66fr; }
.escopo-sec .phase li { border-top-color: rgba(255,255,255,.1); color:#e7ecf1; font-size:.94rem; }
.escopo-sec .phase-title { color:#fff; font-size: clamp(1.3rem,2vw,1.7rem); }
/* moldura do vídeo, lateralizada à direita, NÍTIDA (100% opacidade) */
.escopo-media { position: relative; }
.escopo-frame {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 3 / 4; max-height: 82vh; margin-inline: auto; width: 100%;
  border: 1px solid var(--navy-line); background:#0d141d;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.escopo-canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
/* vinhetas SÓ nas bordas (não cobrem o miolo — vídeo nítido) */
.escopo-vignette {
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to right, rgba(13,20,29,.85) 0%, transparent 14%, transparent 86%, rgba(13,20,29,.85) 100%),
    linear-gradient(to bottom, rgba(13,20,29,.7) 0%, transparent 12%, transparent 88%, rgba(13,20,29,.7) 100%);
}
.escopo-tag { position:absolute; left:.9rem; top:.9rem; z-index:2; }
@media (prefers-reduced-motion: reduce){
  .escopo-sec{ height:auto; } .escopo-pin{ position:relative; height:auto; padding-block: 4rem; }
}
@media (max-width: 900px){
  .escopo-sec{ height: 300vh; }
  .escopo-frame{ aspect-ratio: 4/3; max-height: 46vh; }
}

/* ------------------------- Quem somos ------------------------- */
.quem-sec { position: relative; overflow: hidden; }
/* equipe como elemento de fundo à direita, chegando até atrás do texto */
.quem-bg {
  position: absolute; right: clamp(-2rem, -1vw, 2rem); bottom: 0; z-index: 0;
  height: 92%; width: auto; max-width: 58%; object-fit: contain; object-position: bottom right;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.45));
  pointer-events: none;
}
/* vinheta degradê suave sobre a imagem, do lado do texto, para não atrapalhar a leitura */
.quem-sec::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg,
    var(--bg-2) 0%, var(--bg-2) 34%,
    color-mix(in srgb, var(--bg-2) 82%, transparent) 50%,
    color-mix(in srgb, var(--bg-2) 30%, transparent) 66%,
    transparent 82%);
}
.quem-inner { position: relative; z-index: 2; }
.quem-texto { max-width: 60ch; margin-top: 2.2rem; }
.quem-lead { font-size: clamp(1.05rem,1.2vw+.9rem,1.25rem); color: var(--fg-soft); line-height:1.6; max-width: 52ch; }
.quem-mote {
  font-family:"Fraunces"; font-style: italic; font-weight:400;
  font-size: clamp(1.3rem,2.2vw,1.75rem); line-height:1.35; color: var(--fg);
  border-left: 2px solid var(--resin); padding-left: 1.4rem; margin-top: 1.6rem; max-width: 44ch;
}
@media (max-width: 820px){
  /* no mobile a equipe vira faixa inferior, texto acima com scrim vertical */
  .quem-bg { position: relative; right:auto; height:auto; width: 82%; max-width: 360px; margin: 2rem auto -1px; display:block; }
  .quem-sec::after { display:none; }
  .quem-texto { max-width: 100%; }
}

/* planta baixa sketchup */
.planta-wrap { margin-top: clamp(2rem,5vw,3.5rem); }
.planta { margin:0; border:1px solid var(--hair); border-radius:8px; overflow:hidden; background: var(--bg); }
.planta img { width:100%; max-height: 70vh; object-fit: contain; display:block; padding: 1rem; }
.planta figcaption {
  font-family:"Archivo"; font-size:.86rem; color: var(--fg-soft); padding: .9rem 1.2rem 1.1rem;
  border-top:1px solid var(--hair); display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.planta .shot-tag { background: var(--steel); }

/* ------------------------- Benefícios ------------------------- */
.benef-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 3rem; border:1px solid var(--navy-line); border-radius:6px; overflow:hidden; }
@media (max-width: 720px){ .benef-grid{ grid-template-columns:1fr; } }
.benef-cell { padding: 2rem 1.8rem; border-right:1px solid var(--navy-line); border-bottom:1px solid var(--navy-line); }
.benef-cell:nth-child(2n){ border-right:none; }
.benef-cell:nth-last-child(-n+2){ border-bottom:none; }
@media (max-width:720px){ .benef-cell{ border-right:none; } .benef-cell:nth-last-child(2){ border-bottom:1px solid var(--navy-line);} }
.benef-idx { font-family:"Fraunces"; font-weight:600; font-size:1.6rem; color: var(--resin-bright); line-height:1; font-variation-settings:"opsz" 144; }
.benef-t { font-family:"Archivo"; font-weight:700; font-size:1.12rem; color:#fff; margin:.8rem 0 .5rem; letter-spacing:-.01em; }
.benef-d { font-size:.92rem; color: var(--navy-soft); line-height:1.55; }

/* prova social */
.social { margin-top: 2.6rem; text-align:center; }
.social-line { font-family:"Fraunces"; font-style:italic; font-size: clamp(1.15rem,2vw,1.5rem); color:#fff; max-width: 52ch; margin: 0 auto 1.4rem; line-height:1.4; }
.social-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; }
.social-chip { font-family:"Archivo"; font-size:.82rem; color: var(--navy-ink); border:1px solid var(--navy-line); padding:.5rem .95rem; border-radius:100px; }
.social-chip::before { content:"◆ "; color: var(--resin); font-size:.7em; }

/* ------------------------- Brinde ------------------------- */
.brinde {
  display:flex; gap:1.2rem; align-items:flex-start; text-align:left;
  max-width: 640px; margin: 2.6rem auto 0; padding: 1.5rem 1.7rem;
  border:1px solid var(--navy-line); border-radius:8px; background: color-mix(in srgb, var(--resin) 8%, transparent);
}
.brinde-ic { font-size:1.4rem; color: var(--resin-bright); line-height:1.2; }
.brinde-t { font-family:"Archivo"; font-weight:700; font-size:1.05rem; color:#fff; margin-bottom:.4rem; }
.brinde-d { font-size:.9rem; color: var(--navy-soft); line-height:1.55; }

/* ------------------------- Galeria em linhas (1 por linha) ------------------------- */
.gallery-rows { display:flex; flex-direction:column; gap: 1.4rem; margin-top: 2.8rem; }
.shot-row { position:relative; margin:0; border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:#111; }
.shot-row img { width:100%; max-height: 78vh; object-fit: cover; display:block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.shot-row:hover img { transform: scale(1.03); }
.shot-row figcaption {
  position:absolute; left:0; right:0; bottom:0; padding: 3rem 1.4rem 1.2rem;
  font-family:"Archivo"; font-size:1rem; line-height:1.4; color:#fff;
  background: linear-gradient(transparent, rgba(8,12,18,.92));
}

/* ------------------------- Refinos MOBILE UX ------------------------- */
@media (max-width: 640px){
  section { padding-block: clamp(3rem, 11vw, 4.5rem); }
  .sec-title { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  .cta-title { font-size: clamp(2.1rem, 9vw, 3rem); }
  /* impede overflow lateral de palavras/quotes longas */
  .wrap { padding-inline: 1.15rem; }
  .pull { font-size: clamp(1.1rem, 5vw, 1.4rem); padding-left: 1rem; line-height:1.3; }
  p, .lead, .pull, .choice li, .proof-d, .phase li, li { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  .sec-title, .hero-h1 { overflow-wrap: anywhere; }
  /* hero: evita overflow lateral do tag/lead */
  .hero-tag { font-size:.7rem; letter-spacing:.1em; }
  .hero .lead, .lead { max-width: 100%; }
  /* ba-head empilha e o número vai pra cima */
  .ba-head { flex-direction: column; align-items:flex-start; gap:.4rem; }
  .section-num { order:-1; }
  /* alvos de toque maiores */
  .btn { padding: .95rem 1.4rem; }
  .nav-cta { display:inline-block; padding:.55rem .9rem; font-size:.8rem; }
  .grip { width:52px; height:52px; }   /* handle maior no dedo */
  .compare-hint { font-size:.72rem; bottom:.7rem; }
  /* chips e steps respiram */
  .invest-incl { gap:.5rem; }
  .price { font-size: clamp(3rem, 20vw, 5rem); }
  /* galeria: 1ª foto não força 2 colunas */
  .gallery { gap:.8rem; }
  /* nonstop viz não fica espremido */
  .half-viz { aspect-ratio: 3/2; }
}
/* tablets: rail escondido já (via <=1180), garante conteúdo central */
@media (max-width: 1180px){ .wrap { padding-inline: clamp(1.1rem, 5vw, 3rem); } }

/* ------------------------- Veredito da escolha (X vermelho / ✓ verde) ------------------------- */
.choice-verdict { display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 1.2rem; }
@media (max-width: 720px){ .choice-verdict{ grid-template-columns:1fr; } }
.verdict {
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:"Archivo"; font-weight:700; font-size:.9rem; letter-spacing:.02em;
  padding:.8rem 1rem; border-radius:6px;
}
.verdict .v-ic { font-size:1.15rem; width:1.7rem; height:1.7rem; display:grid; place-items:center; border-radius:50%; }
.verdict.bad { color:#e0554a; background: color-mix(in srgb,#e0554a 12%, transparent); border:1px solid color-mix(in srgb,#e0554a 40%, transparent); }
.verdict.bad .v-ic { background:#e0554a; color:#fff; }
.verdict.good { color: var(--resin); background: color-mix(in srgb,var(--resin) 12%, transparent); border:1px solid color-mix(in srgb,var(--resin) 45%, transparent); }
.verdict.good .v-ic { background: var(--resin); color:#fff; }

/* ------------------------- Investimento: prazo & pagamento ------------------------- */
.invest-terms {
  display:flex; flex-wrap:wrap; justify-content:center; gap: 1rem 2.5rem; margin: 1.4rem auto 0; max-width: 640px;
}
.term { display:flex; flex-direction:column; gap:.15rem; }
.term-k { font-family:"Archivo"; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--resin-bright); }
.term-v { font-family:"Archivo"; font-size:.95rem; color: var(--navy-ink); }

/* ------------------------- Instagram CTA ------------------------- */
.ig-cta {
  display:inline-flex; align-items:center; gap:.9rem; margin-top:1.8rem;
  text-decoration:none; padding:.8rem 1.4rem; border-radius:100px;
  border:1px solid var(--hair); background: var(--bg-2);
  transition: border-color .25s, transform .15s, background .25s;
}
.ig-cta:hover { border-color: var(--resin); transform: translateY(-1px); }
.ig-ic {
  width:44px; height:44px; flex:none; border-radius:12px; display:grid; place-items:center; color:#fff;
  background: linear-gradient(45deg,#f9a03f 0%, #d6336c 45%, #8a3ab9 100%);
}
.ig-txt { display:flex; flex-direction:column; text-align:left; line-height:1.25; }
.ig-txt b { font-family:"Archivo"; font-weight:700; font-size:.95rem; color: var(--fg); }
.ig-handle { font-family:"Archivo"; font-size:.82rem; color: var(--resin); }
@media (max-width:520px){ .ig-cta{ padding:.7rem 1rem; } .ig-txt b{ font-size:.86rem; } }

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