/* ═══════════════════════════════════════════════════════════
   EMPUSITES — Sites premium para escritórios de contabilidade
   Design system • dark premium + dourado
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 1. TOKENS ─────────── */
:root{
  /* superfícies */
  --bg:        #08080A;
  --bg-2:      #0C0C10;
  --surface:   #111116;
  --surface-2: #16161C;
  --line:      rgba(255,255,255,.075);
  --line-2:    rgba(255,255,255,.14);

  /* texto */
  --txt:       #F3F1EB;
  --txt-2:     rgba(243,241,235,.66);
  --txt-3:     rgba(243,241,235,.42);

  /* dourado */
  --gold:      #D9A94C;
  --gold-lt:   #F2DCA8;
  --gold-dp:   #A6762A;
  --gold-grad: linear-gradient(135deg,#F2DCA8 0%,#D9A94C 45%,#A6762A 100%);
  --gold-soft: rgba(217,169,76,.12);

  /* tipografia */
  --f-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --f-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ritmo */
  --wrap:      1240px;
  --pad:       clamp(20px, 5vw, 40px);
  --sec-y:     clamp(80px, 11vw, 160px);
  --r:         16px;
  --r-lg:      24px;

  /* movimento */
  --e:         cubic-bezier(.22,1,.36,1);
  --e-out:     cubic-bezier(.16,1,.3,1);
}

/* ─────────── 2. RESET ─────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--f-sans); font-size:16px; line-height:1.65;
  font-weight:400; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:var(--gold); color:#08080A }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad) }

/* scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:var(--bg) }
::-webkit-scrollbar-thumb{ background:#26262e; border-radius:10px; border:3px solid var(--bg) }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-dp) }

/* ─────────── 3. TIPOGRAFIA BASE ─────────── */
h1,h2,h3,h4{ line-height:1.08; letter-spacing:-.035em; font-weight:600 }
em{ font-family:var(--f-display); font-style:italic; font-weight:400;
    background:var(--gold-grad); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; letter-spacing:-.01em }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin-bottom:22px;
}
.eyebrow .dot{ width:5px; height:5px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 0 4px rgba(217,169,76,.16); animation:pulse 2.6s var(--e) infinite }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(217,169,76,.16) } 50%{ box-shadow:0 0 0 8px rgba(217,169,76,.03) } }

.sec-head{ max-width:860px; margin-bottom:clamp(48px,6vw,76px) }
.sec-head--center{ margin-inline:auto; text-align:center }
.sec-head--center .eyebrow{ justify-content:center }
.sec-title{ font-size:clamp(32px,5.2vw,62px); margin-bottom:22px }
.sec-lead{ font-size:clamp(16px,1.5vw,18.5px); color:var(--txt-2); max-width:620px; line-height:1.7 }
.sec-head--center .sec-lead{ margin-inline:auto }

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

/* ─────────── 4. OVERLAYS ─────────── */
.grain{
  position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.032;
  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");
}
.spotlight{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,20%), rgba(217,169,76,.07), transparent 62%);
  transition:opacity .5s ease;
}
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:2px; z-index:9999; background:transparent }
.scroll-progress i{ display:block; height:100%; width:0%; background:var(--gold-grad);
  box-shadow:0 0 12px rgba(217,169,76,.5) }

/* ─────────── 5. PRELOADER ─────────── */
.preloader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-content:center; gap:26px;
  transition:opacity .7s var(--e), visibility .7s;
}
.preloader.done{ opacity:0; visibility:hidden }
.preloader__inner{ display:flex; align-items:center; gap:14px }
.preloader__mark{
  font-family:var(--f-display); font-size:38px; line-height:1;
  width:52px; height:52px; display:grid; place-content:center; border-radius:13px;
  background:var(--gold-grad); color:#08080A;
}
.preloader__word{ font-family:var(--f-mono); font-size:13px; letter-spacing:.42em; color:var(--txt-2) }
.preloader__bar{ width:210px; height:2px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; margin-inline:auto }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--gold-grad); transition:width .35s ease }

/* ─────────── 6. BOTÕES ─────────── */
.btn{
  --bg-btn:transparent; --fg:var(--txt);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:100px; font-size:14.5px; font-weight:500;
  letter-spacing:-.01em; white-space:nowrap; cursor:pointer; overflow:hidden;
  background:var(--bg-btn); color:var(--fg); border:1px solid transparent;
  transition:transform .45s var(--e), box-shadow .45s var(--e), background .3s ease, border-color .3s ease, color .3s ease;
  will-change:transform;
}
.btn svg{ flex:none; transition:transform .45s var(--e) }
.btn:hover svg{ transform:translateX(4px) }
.btn--sm{ padding:10px 18px; font-size:13.5px }
.btn--lg{ padding:17px 32px; font-size:15.5px }
.btn--block{ width:100%; margin-top:auto }

.btn--gold{ background:var(--gold-grad); color:#0A0A0C; font-weight:600;
  box-shadow:0 4px 20px -6px rgba(217,169,76,.45), inset 0 1px 0 rgba(255,255,255,.35) }
.btn--gold:hover{ box-shadow:0 12px 38px -8px rgba(217,169,76,.6), inset 0 1px 0 rgba(255,255,255,.45) }
.btn--gold::after{
  content:''; position:absolute; inset:0; transform:translateX(-110%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); width:55%;
}
.btn--gold:hover::after{ animation:shine .85s var(--e) }
@keyframes shine{ to{ transform:translateX(320%) skewX(-18deg) } }

.btn--ghost{ border-color:var(--line-2); color:var(--txt); backdrop-filter:blur(6px) }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); background:var(--gold-soft) }

.btn--outline{ border-color:var(--line-2); color:var(--txt) }
.btn--outline:hover{ border-color:var(--gold); background:var(--gold-soft); color:var(--gold-lt) }

/* ─────────── 7. HEADER ─────────── */
.header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding-block:18px; transition:padding .4s var(--e), background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
  border-bottom:1px solid transparent;
}
.header.stuck{
  padding-block:11px; background:rgba(8,8,10,.78);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom-color:var(--line);
}
.header__row{ display:flex; align-items:center; justify-content:space-between; gap:24px }

.logo{ display:inline-flex; align-items:center; gap:11px; flex:none }
.logo__mark{ transition:transform .6s var(--e) }
.logo:hover .logo__mark{ transform:rotate(-8deg) scale(1.06) }
.logo__text{ font-size:18.5px; font-weight:600; letter-spacing:-.03em }
.logo__text em{ font-family:var(--f-sans); font-style:normal; font-weight:300;
  -webkit-text-fill-color:var(--txt-2); background:none; color:var(--txt-2) }

.nav{ display:flex; align-items:center; gap:4px }
.nav a{
  position:relative; padding:8px 14px; font-size:14px; color:var(--txt-2);
  border-radius:100px; transition:color .3s ease, background .3s ease;
}
.nav a::after{
  content:''; position:absolute; left:14px; right:14px; bottom:4px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--e);
}
.nav a:hover{ color:var(--txt) }
.nav a:hover::after{ transform:scaleX(1) }
.nav a.active{ color:var(--gold) }

.header__cta{ display:flex; align-items:center; gap:12px; flex:none }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--line-2); border-radius:12px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px }
.burger i{ width:16px; height:1.5px; background:var(--txt); transition:transform .4s var(--e), opacity .3s }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(3.2px) rotate(45deg) }
.burger[aria-expanded="true"] i:nth-child(2){ transform:translateY(-3.2px) rotate(-45deg) }

/* ─────────── 8. HERO ─────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:clamp(120px,15vh,170px); padding-bottom:clamp(70px,9vh,110px); overflow:hidden;
}
.hero__glow{
  position:absolute; top:-25%; left:50%; transform:translateX(-50%);
  width:min(1100px,120vw); height:760px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(217,169,76,.16), rgba(217,169,76,.05) 40%, transparent 70%);
  filter:blur(28px); animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.75; transform:translateX(-50%) scale(1) } 50%{ opacity:1; transform:translateX(-50%) scale(1.07) } }
.hero__grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 35%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 35%, #000 20%, transparent 78%);
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,5vw,72px); align-items:center;
}
.hero__title{ font-size:clamp(38px,6.1vw,80px); line-height:1.02; margin-bottom:28px; max-width:14ch }
.hero__sub{ font-size:clamp(16px,1.6vw,19px); color:var(--txt-2); max-width:52ch; line-height:1.72; margin-bottom:38px }
.hero__sub strong{ color:var(--txt); font-weight:500 }
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:40px }
.hero__trust{ display:flex; flex-wrap:wrap; gap:10px 26px }
.hero__trust li{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--txt-3) }
.hero__trust svg{ color:var(--gold); flex:none }

/* mockup */
.hero__visual{ perspective:1400px }
.tilt{ position:relative; transform-style:preserve-3d; transition:transform .5s var(--e) }
.browser{
  border-radius:var(--r-lg); overflow:hidden; background:var(--surface);
  border:1px solid var(--line-2);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(217,169,76,.09), inset 0 1px 0 rgba(255,255,255,.05);
  animation:levitate 7s ease-in-out infinite;
}
@keyframes levitate{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-13px) } }
.browser__bar{ display:flex; align-items:center; gap:14px; padding:11px 15px;
  background:var(--surface-2); border-bottom:1px solid var(--line) }
.browser__dots{ display:flex; gap:6px }
.browser__dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.13) }
.browser__dots i:first-child{ background:rgba(217,169,76,.5) }
.browser__url{ display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--f-mono); font-size:10.5px; color:var(--txt-3);
  background:rgba(255,255,255,.04); padding:4px 12px; border-radius:100px; flex:1 }
.browser__url .live{ width:5px; height:5px; border-radius:50%; background:#3ED67F; flex:none;
  animation:blink 2.2s ease-in-out infinite }
@keyframes blink{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(62,214,127,.5) }
                  50%{ opacity:.45; box-shadow:0 0 0 4px rgba(62,214,127,0) } }

/* viewport do mockup: a "página" rola sozinha dentro dele */
.browser__body{ position:relative; height:clamp(280px,32vw,360px); overflow:hidden;
  background:linear-gradient(170deg,#0E0E13,#0A0A0D) }
.mk-page{ padding:20px; display:flex; flex-direction:column; gap:22px;
  animation:mkScroll 15s cubic-bezier(.65,0,.35,1) infinite }
/* limites calculados: a página tem ~597px e o viewport vai até 360px,
   então o deslocamento máximo seguro é ~237px */
@keyframes mkScroll{
  0%,  17%  { transform:translateY(0) }
  27%, 41%  { transform:translateY(-118px) }
  51%, 65%  { transform:translateY(-228px) }
  77%, 100% { transform:translateY(0) }
}

.mk-nav{ display:flex; align-items:center; gap:12px }
.mk-logo{ width:30px; height:9px; border-radius:3px; background:var(--gold-grad) }
.mk-links{ display:flex; gap:9px; flex:1 }
.mk-links i{ width:26px; height:5px; border-radius:3px; background:rgba(255,255,255,.11) }
.mk-btn{ width:46px; height:16px; border-radius:100px; background:rgba(217,169,76,.28) }

.mk-hero{ display:flex; flex-direction:column; gap:9px }
.mk-eyebrow{ width:82px; height:6px; border-radius:3px; background:rgba(217,169,76,.55); margin-bottom:6px }
.mk-h1{ height:15px; border-radius:5px; background:rgba(255,255,255,.19) }
.mk-h1.short{ width:62% }
.mk-p{ height:6px; border-radius:3px; background:rgba(255,255,255,.09); margin-top:6px }
.mk-p.short{ width:78% }
.mk-cta{ width:120px; height:26px; border-radius:100px; background:var(--gold-grad);
  margin-top:12px; opacity:.9; animation:mkPulse 2.8s var(--e) infinite }
@keyframes mkPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(217,169,76,.45) }
                    70%,100%{ box-shadow:0 0 0 10px rgba(217,169,76,0) } }

.mk-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.mk-cards span{ height:60px; border-radius:10px; background:rgba(255,255,255,.045); border:1px solid var(--line) }

.mk-split{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center }
.mk-block{ height:86px; border-radius:10px; background:linear-gradient(150deg,rgba(217,169,76,.2),rgba(255,255,255,.04)) }
.mk-lines{ display:flex; flex-direction:column; gap:8px }
.mk-lines i{ height:6px; border-radius:3px; background:rgba(255,255,255,.1) }
.mk-lines i.s{ width:70% }
.mk-pill{ width:64px!important; height:16px!important; border-radius:100px!important;
  background:rgba(217,169,76,.3)!important; margin-top:4px }

.mk-band{ display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:20px; border-radius:12px; background:rgba(217,169,76,.07);
  border:1px solid rgba(217,169,76,.16) }
.mk-band i{ height:8px; width:64%; border-radius:4px; background:rgba(255,255,255,.15) }
.mk-band i.s{ width:44%; height:6px; background:rgba(255,255,255,.08) }

.mk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px }
.mk-grid i{ height:44px; border-radius:9px; background:rgba(255,255,255,.04); border:1px solid var(--line) }

/* varredura dourada */
.mk-scan{ position:absolute; left:0; right:0; top:0; height:80px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(217,169,76,.16),transparent);
  animation:mkScan 15s ease-in-out infinite }
@keyframes mkScan{
  0%, 64%  { transform:translateY(-80px); opacity:0 }
  68%      { opacity:1 }
  84%      { transform:translateY(440px); opacity:0 }
  100%     { transform:translateY(440px); opacity:0 }
}

/* cursor fantasma que anda até o botão e clica */
.mk-cursor{ position:absolute; left:86px; top:198px; pointer-events:none; z-index:3;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.65)); animation:mkCursor 15s var(--e) infinite }
.mk-cursor::after{ content:''; position:absolute; left:-13px; top:-13px; width:30px; height:30px;
  border-radius:50%; border:1.5px solid var(--gold-lt); animation:mkClick 15s var(--e) infinite }
@keyframes mkCursor{
  0%       { transform:translate(130px,86px); opacity:0 }
  5%       { opacity:1 }
  12%, 18% { transform:translate(0,0); opacity:1 }
  24%      { transform:translate(80px,120px); opacity:0 }
  100%     { transform:translate(130px,86px); opacity:0 }
}
@keyframes mkClick{
  0%, 13%  { transform:scale(.2); opacity:0 }
  15%      { transform:scale(.2); opacity:.95 }
  22%,100% { transform:scale(2.4); opacity:0 }
}

.float-chip{
  position:absolute; display:flex; flex-direction:column; gap:1px;
  padding:13px 17px; border-radius:14px;
  background:rgba(17,17,22,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2); box-shadow:0 18px 40px -14px rgba(0,0,0,.8);
  transform:translateZ(60px);
}
.float-chip strong{ font-size:20px; font-weight:600; color:var(--gold-lt); letter-spacing:-.03em }
.float-chip small{ font-size:10.5px; color:var(--txt-3); font-family:var(--f-mono); letter-spacing:.04em }
.float-chip .score{ font-size:22px; font-weight:600; color:#5CE0A0; letter-spacing:-.03em }
.float-chip--a{ bottom:-22px; left:-28px; animation:levitate 7s ease-in-out .6s infinite }
.float-chip--b{ top:36px; right:-26px; animation:levitate 7s ease-in-out 1.4s infinite }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3;
  width:24px; height:38px; border:1px solid var(--line-2); border-radius:100px;
  display:grid; justify-items:center; padding-top:7px;
}
.scroll-hint span{ width:3px; height:7px; border-radius:3px; background:var(--gold); animation:sd 1.9s var(--e) infinite }
@keyframes sd{ 0%{ opacity:0; transform:translateY(0) } 35%{ opacity:1 } 100%{ opacity:0; transform:translateY(15px) } }

/* ─────────── 9. MARQUEE ─────────── */
.marquee{
  border-block:1px solid var(--line); padding-block:17px; overflow:hidden;
  background:linear-gradient(90deg,var(--bg),var(--bg-2),var(--bg));
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{ display:flex; align-items:center; gap:34px; width:max-content; animation:scroll-x 42s linear infinite }
.marquee span{ font-size:14px; color:var(--txt-3); white-space:nowrap; letter-spacing:-.01em }
.marquee i{ color:var(--gold); font-size:9px; font-style:normal }
@keyframes scroll-x{ to{ transform:translateX(-50%) } }

/* ─────────── 10. DIAGNÓSTICO ─────────── */
.section--diag{ background:linear-gradient(180deg,var(--bg),var(--bg-2) 55%,var(--bg)) }

.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.pain{ position:relative; padding:clamp(26px,3vw,38px); background:var(--bg);
  transition:background .45s var(--e) }
.pain::before{
  content:''; position:absolute; inset:0; opacity:0;
  background:radial-gradient(420px circle at 50% 0%, rgba(217,169,76,.09), transparent 70%);
  transition:opacity .5s ease;
}
.pain:hover{ background:var(--surface) }
.pain:hover::before{ opacity:1 }
.pain__num{ position:relative; font-family:var(--f-mono); font-size:11.5px; color:var(--gold);
  letter-spacing:.1em; display:block; margin-bottom:20px }
.pain h3{ position:relative; font-size:19px; margin-bottom:12px; letter-spacing:-.03em }
.pain p{ position:relative; font-size:14.5px; color:var(--txt-2); line-height:1.68 }
.pain p em{ -webkit-text-fill-color:var(--gold-lt); background:none; color:var(--gold-lt); font-family:var(--f-sans); font-style:italic }

.verdict{ margin-top:clamp(48px,6vw,72px); text-align:center; max-width:820px; margin-inline:auto }
.verdict__line{ width:1px; height:52px; margin:0 auto 30px;
  background:linear-gradient(180deg,transparent,var(--gold)) }
.verdict p{ font-size:clamp(19px,2.4vw,27px); line-height:1.5; letter-spacing:-.025em; color:var(--txt-2) }
.verdict p strong{ color:var(--txt); font-weight:500 }
.verdict__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(24px,3vw,40px); margin-top:clamp(44px,5vw,64px); padding-top:clamp(36px,4vw,48px);
  border-top:1px solid var(--line) }
/* número e sufixo alinhados pela linha de base — a versão anterior empurrava o
   sufixo com margem fixa de 64px, que só acertava em números de dois dígitos */
.verdict__stats div{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:3px }
.verdict__stats b{ font-size:clamp(40px,5vw,58px); font-weight:600; letter-spacing:-.05em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; line-height:1 }
.verdict__stats span{ font-size:20px; color:var(--gold); font-weight:500; line-height:1 }
.verdict__stats small{ width:100%; text-align:center; font-size:13px; color:var(--txt-3);
  margin-top:12px; line-height:1.55 }
.verdict__stats sup{ font-size:9px; color:var(--gold-dp) }

/* ─────────── 11. PILARES ─────────── */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:clamp(18px,2vw,26px) }
.pillar{
  position:relative; padding:clamp(28px,3vw,36px); border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--surface),rgba(17,17,22,.35));
  border:1px solid var(--line); overflow:hidden;
  transition:transform .55s var(--e), border-color .45s ease, box-shadow .55s var(--e);
}
.pillar::after{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0); transition:transform .6s var(--e);
}
.pillar:hover{ transform:translateY(-6px); border-color:var(--line-2);
  box-shadow:0 26px 55px -26px rgba(0,0,0,.9) }
.pillar:hover::after{ transform:scaleX(1) }
.pillar__icon{ width:48px; height:48px; border-radius:14px; display:grid; place-content:center;
  background:var(--gold-soft); border:1px solid rgba(217,169,76,.2); color:var(--gold); margin-bottom:24px;
  transition:transform .55s var(--e) }
.pillar__icon svg{ width:23px; height:23px }
.pillar:hover .pillar__icon{ transform:scale(1.08) rotate(-5deg) }
.pillar h3{ font-size:19.5px; margin-bottom:13px }
.pillar p{ font-size:14.5px; color:var(--txt-2); line-height:1.7 }
.pillar p em{ -webkit-text-fill-color:var(--gold-lt); background:none; color:var(--gold-lt); font-family:var(--f-sans); font-style:italic }

/* ─────────── 12. PORTFÓLIO ─────────── */
.section--work{ background:var(--bg-2) }
/* 2 colunas no desktop: cards maiores, 4 projetos em grade 2x2 equilibrada */
.work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:clamp(20px,2.4vw,32px) }
.work{
  position:relative; display:block; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform .6s var(--e), border-color .4s ease, box-shadow .6s var(--e);
}
.work:hover{ transform:translateY(-8px); border-color:rgba(217,169,76,.35);
  box-shadow:0 34px 70px -30px rgba(0,0,0,.95) }
.work__thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; display:grid; place-items:center;
  background:var(--surface-2) }
.work__thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center;
  transition:transform .8s var(--e) }
.work:hover .work__thumb img{ transform:scale(1.04) }
.work__thumb--1{ background:linear-gradient(140deg,#1B1712,#0C0C10 60%) }
.work__thumb--2{ background:linear-gradient(140deg,#12181B,#0C0C10 60%) }
.work__thumb--3{ background:linear-gradient(140deg,#191219,#0C0C10 60%) }
.work__thumb--4{ background:linear-gradient(140deg,#121A15,#0C0C10 60%) }

.mini{ width:70%; aspect-ratio:4/3; border-radius:10px; background:rgba(255,255,255,.035);
  border:1px solid var(--line-2); padding:12px; display:flex; flex-direction:column; gap:8px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.9) }
.mini i{ display:block; border-radius:3px; background:rgba(255,255,255,.1) }
.mini__bar{ height:6px; width:34%; background:var(--gold-grad)!important; opacity:.8 }
.mini__h{ height:11px; width:80%; background:rgba(255,255,255,.17)!important; margin-top:4px }
.mini__t{ height:5px; width:92% }
.mini__t.s{ width:64% }
.mini__btn{ height:16px; width:44%; border-radius:100px!important; background:rgba(217,169,76,.35)!important; margin-top:auto }

.work__meta{ padding:22px 24px 26px; border-top:1px solid var(--line) }
.work__meta h3{ font-size:18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px }
.badge{ font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:var(--gold-soft); border:1px solid rgba(217,169,76,.22);
  padding:3px 9px; border-radius:100px; font-weight:500 }
.work__tags{ font-size:13px; color:var(--txt-3) }
.work__arrow{ position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%;
  display:grid; place-content:center; background:rgba(8,8,10,.7); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); color:var(--txt-2);
  opacity:0; transform:translateY(-6px) scale(.9); transition:all .5s var(--e) }
.work:hover .work__arrow{ opacity:1; transform:none; color:var(--gold); border-color:rgba(217,169,76,.4) }
.work[data-soon]{ cursor:default }

/* ─── esteiras do portfólio: duas faixas em direções opostas ─── */
.reel{ display:flex; flex-direction:column; gap:clamp(13px,1.6vw,20px);
  width:100vw; margin-left:calc(50% - 50vw) }
.reel__row{ overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  /* no fallback sem animação a faixa vira rolagem: barra some, gesto continua */
  scrollbar-width:none; -ms-overflow-style:none }
.reel__row::-webkit-scrollbar{ display:none }
.reel__track{ display:flex; gap:clamp(13px,1.6vw,20px); width:max-content;
  padding-left:clamp(13px,1.6vw,20px);
  animation:reelL 52s linear infinite; will-change:transform }
.reel__track--rev{ animation-name:reelR }
@keyframes reelL{ from{ transform:translateX(0) }        to{ transform:translateX(-50%) } }
@keyframes reelR{ from{ transform:translateX(-50%) }     to{ transform:translateX(0) } }
/* pausa ao aproximar o mouse, para dar tempo de clicar */
.reel:hover .reel__track,
.reel:focus-within .reel__track{ animation-play-state:paused }

/* o card é só a miniatura: ~56% da tela no celular, como na referência.
   A legenda entra sobreposta, para não aumentar a altura do card. */
.shot{ position:relative; flex:none; width:clamp(214px,25vw,380px); aspect-ratio:16/9;
  border-radius:var(--r); overflow:hidden; background:var(--surface);
  border:1px solid var(--line);
  transition:transform .5s var(--e), border-color .4s ease, box-shadow .5s var(--e) }
.shot img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center }
.shot__cap{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:30px 13px 11px;
  background:linear-gradient(180deg,transparent,rgba(8,8,10,.55) 42%,rgba(8,8,10,.9)) }
.shot__cap b{ font-size:12.5px; font-weight:600; letter-spacing:-.02em; color:var(--txt);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.shot__cap i{ font-style:normal; flex:none; font-family:var(--f-mono); font-size:9px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--gold);
  background:rgba(8,8,10,.5); border:1px solid rgba(217,169,76,.3);
  padding:3px 8px; border-radius:100px }
.shot:hover{ transform:translateY(-5px); border-color:rgba(217,169,76,.45);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.9) }

@media (max-width:620px){
  .reel__track{ animation-duration:34s }
  .shot__cap{ padding:24px 11px 9px }
  .shot__cap b{ font-size:11.5px }
  /* num card de 214px a etiqueta espremia o nome até virar "Solar Co..." */
  .shot__cap i{ display:none }
}

.work-note{ margin-top:38px; text-align:center; font-size:14.5px; color:var(--txt-3) }
.work-note a{ color:var(--gold); border-bottom:1px solid rgba(217,169,76,.3); padding-bottom:1px;
  transition:border-color .3s ease }
.work-note a:hover{ border-color:var(--gold) }

/* ─────────── 13. FEATURES ─────────── */
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.feat{ padding:26px 24px; background:var(--bg); transition:background .4s ease }
.feat:hover{ background:var(--surface) }
.feat b{ display:flex; align-items:center; gap:9px; font-size:15.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.025em }
.feat b::before{ content:''; width:6px; height:6px; border-radius:2px; background:var(--gold-grad); flex:none }
.feat span{ display:block; font-size:13.5px; color:var(--txt-2); line-height:1.62 }

/* ─────────── 14. PROCESSO ─────────── */
.section--proc{ background:linear-gradient(180deg,var(--bg),#0A0A0E) }
.steps{ position:relative; display:flex; flex-direction:column; gap:clamp(26px,3.4vw,44px); padding-left:clamp(52px,7vw,96px) }
.steps__rail{ position:absolute; left:clamp(21px,3vw,39px); top:8px; bottom:8px; width:1px; background:var(--line) }
.steps__rail i{ display:block; width:100%; height:0%; background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp));
  box-shadow:0 0 14px rgba(217,169,76,.5); transition:height .15s linear }
.step{ position:relative }
.step__n{
  position:absolute; left:calc(-1 * clamp(52px,7vw,96px)); top:-2px;
  width:clamp(42px,6vw,78px); text-align:left;
  font-family:var(--f-mono); font-size:clamp(13px,1.6vw,17px); color:var(--gold); letter-spacing:.04em;
}
.step::before{
  content:''; position:absolute; left:calc(-1 * clamp(52px,7vw,96px) + clamp(18px,3vw,36px));
  top:9px; width:7px; height:7px; border-radius:50%; background:var(--bg); border:1.5px solid var(--gold-dp);
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.step.on::before{ background:var(--gold); border-color:var(--gold); box-shadow:0 0 0 5px rgba(217,169,76,.16) }
.step h3{ font-size:clamp(20px,2.3vw,26px); margin-bottom:10px; letter-spacing:-.033em }
.step h3 small{ font-family:var(--f-mono); font-size:12px; color:var(--txt-3); font-weight:400; letter-spacing:0 }
.step p{ font-size:15px; color:var(--txt-2); line-height:1.72; max-width:58ch }

/* ─────────── 15. GARANTIAS ─────────── */
.section--guar{ padding-block:clamp(56px,7vw,96px) }
.guar-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(18px,2vw,26px) }
.guar{ padding:clamp(26px,3vw,34px); border-radius:var(--r-lg); border:1px dashed var(--line-2);
  background:rgba(255,255,255,.014); transition:border-color .4s ease, background .4s ease }
.guar:hover{ border-color:rgba(217,169,76,.32); background:var(--gold-soft) }
.guar__icon{ width:40px; height:40px; color:var(--gold); margin-bottom:18px }
.guar__icon svg{ width:100%; height:100% }
.guar h3{ font-size:18px; margin-bottom:10px }
.guar p{ font-size:14px; color:var(--txt-2); line-height:1.68 }

/* ─────────── 16. DEPOIMENTOS ─────────── */
.test-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(18px,2vw,26px) }
.test{ padding:clamp(28px,3vw,36px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line) }
.test blockquote{ font-size:16px; line-height:1.72; color:var(--txt-2); margin-bottom:22px }
.test blockquote::before{ content:'“'; font-family:var(--f-display); font-size:52px; color:var(--gold);
  display:block; line-height:.6; margin-bottom:10px }
.test figcaption b{ display:block; font-size:14.5px; font-weight:600 }
.test figcaption span{ font-size:13px; color:var(--txt-3) }

/* ─────────── 17. PLANOS ─────────── */
.section--price{ background:var(--bg-2) }
/* selo de condição de lançamento */
.launch{ display:inline-flex; align-items:center; gap:11px; margin-top:26px;
  padding:9px 20px 9px 16px; border-radius:100px;
  background:var(--gold-soft); border:1px solid rgba(217,169,76,.26);
  font-size:13.5px; color:var(--txt-2) }
.launch .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); flex:none;
  box-shadow:0 0 0 4px rgba(217,169,76,.16); animation:pulse 2.6s var(--e) infinite }
.launch b{ color:var(--gold-lt); font-weight:600 }

.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(18px,2vw,24px); align-items:stretch }
.plan{
  position:relative; display:flex; flex-direction:column; padding:clamp(28px,3vw,38px);
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  transition:transform .5s var(--e), border-color .4s ease;
}
.plan:hover{ transform:translateY(-5px); border-color:var(--line-2) }
.plan--featured{
  background:linear-gradient(170deg,rgba(217,169,76,.075),var(--surface) 42%);
  border-color:rgba(217,169,76,.3);
  box-shadow:0 30px 70px -34px rgba(217,169,76,.28);
}
.plan--featured:hover{ border-color:rgba(217,169,76,.5) }
.plan__flag{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  background:var(--gold-grad); color:#0A0A0C; padding:5px 14px; border-radius:100px; font-weight:600; white-space:nowrap;
}
.plan header h3{ font-size:22px; margin-bottom:9px }
.plan header p{ font-size:13.5px; color:var(--txt-3); line-height:1.6; min-height:44px }
.plan__price{ margin:26px 0 24px; padding-bottom:24px; border-bottom:1px solid var(--line) }
.plan__price small{ display:block; font-family:var(--f-mono); font-size:11px; color:var(--txt-3);
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px }
.plan__price b{ display:block; font-size:clamp(32px,3.6vw,40px); font-weight:600; letter-spacing:-.045em; line-height:1 }
.plan--featured .plan__price b{ background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.plan__price span{ display:block; font-size:12.5px; color:var(--txt-3); margin-top:8px }
.plan__list{ display:flex; flex-direction:column; gap:11px; margin-bottom:32px }
.plan__list li{ position:relative; padding-left:24px; font-size:14px; color:var(--txt-2); line-height:1.55 }
.plan__list li::before{
  content:''; position:absolute; left:0; top:7px; width:13px; height:8px;
  border-left:1.6px solid var(--gold); border-bottom:1.6px solid var(--gold);
  transform:rotate(-45deg) scale(.85); transform-origin:center;
}
.plan__list li b{ color:var(--txt); font-weight:600 }
.plan__list li:has(b)::before{ display:none }
.plan__list li:has(b){ padding-left:0; margin-top:6px }

/* ─────────── 18. FAQ ─────────── */
.faq-wrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,5vw,80px); align-items:start }
.faq-wrap .sec-head{ margin-bottom:0; position:sticky; top:120px }
.faq{ display:flex; flex-direction:column; border-top:1px solid var(--line) }
.qa{ border-bottom:1px solid var(--line) }
.qa summary{
  list-style:none; cursor:pointer; padding:24px 44px 24px 0; position:relative;
  font-size:16.5px; font-weight:500; letter-spacing:-.022em; color:var(--txt);
  transition:color .3s ease;
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary:hover{ color:var(--gold-lt) }
.qa summary::after,.qa summary::before{
  content:''; position:absolute; right:6px; top:50%; background:var(--gold);
  transition:transform .45s var(--e), opacity .35s ease;
}
.qa summary::after{ width:13px; height:1.5px; margin-top:-.75px }
.qa summary::before{ width:1.5px; height:13px; margin-top:-6.5px; margin-right:5.75px }
.qa[open] summary{ color:var(--gold) }
.qa[open] summary::before{ transform:rotate(90deg); opacity:0 }
.qa[open] summary::after{ transform:rotate(180deg) }
.qa__body{ padding:0 44px 26px 0; animation:qaIn .5s var(--e) }
.qa__body p{ font-size:14.8px; color:var(--txt-2); line-height:1.75 }
@keyframes qaIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* ─────────── 19. CTA FINAL ─────────── */
.cta{ position:relative; padding-block:clamp(90px,12vw,160px); text-align:center; overflow:hidden;
  border-top:1px solid var(--line) }
.cta__glow{
  position:absolute; bottom:-45%; left:50%; transform:translateX(-50%);
  width:min(1000px,130vw); height:700px; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(217,169,76,.17), transparent 65%); filter:blur(30px);
  animation:breathe 8s ease-in-out infinite;
}
.cta__inner{ position:relative; z-index:2 }
.cta .eyebrow{ justify-content:center }
.cta__title{ font-size:clamp(32px,5.4vw,66px); line-height:1.06; margin-bottom:24px }
.cta__sub{ font-size:clamp(16px,1.6vw,18.5px); color:var(--txt-2); line-height:1.72; max-width:58ch; margin:0 auto 40px }
.cta__actions{ display:flex; justify-content:center; margin-bottom:20px }
.cta__note{ font-family:var(--f-mono); font-size:11.5px; color:var(--txt-3); letter-spacing:.05em }

/* ─────────── 20. FOOTER ─────────── */
.footer{ border-top:1px solid var(--line); padding-block:clamp(52px,6vw,76px) 32px; background:var(--bg-2) }
.footer__top{ display:grid; grid-template-columns:1.15fr 1.6fr; gap:clamp(36px,5vw,64px); padding-bottom:44px; border-bottom:1px solid var(--line) }
.footer__brand p{ font-size:14px; color:var(--txt-3); line-height:1.7; max-width:38ch; margin-top:18px }
.footer__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.footer__nav h4{ font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px; font-weight:500 }
.footer__nav a{ display:block; font-size:14px; color:var(--txt-2); padding-block:6px;
  transition:color .3s ease, transform .35s var(--e) }
.footer__nav a:hover{ color:var(--gold-lt); transform:translateX(3px) }
.footer__bottom{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px }
.footer__bottom p{ font-size:12.5px; color:var(--txt-3) }
.footer__src{ max-width:60ch; font-size:11px!important; opacity:.75 }

/* ─────────── 21. WHATSAPP FLUTUANTE ─────────── */
.wpp-float{
  position:fixed; right:22px; bottom:22px; z-index:920;
  display:inline-flex; align-items:center; gap:0; padding:15px;
  border-radius:100px; background:#1FAF54; color:#fff;
  box-shadow:0 12px 34px -8px rgba(31,175,84,.55);
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.9);
  transition:all .55s var(--e), gap .45s var(--e), padding .45s var(--e);
}
.wpp-float.show{ opacity:1; visibility:visible; transform:none }
.wpp-float__label{ max-width:0; overflow:hidden; white-space:nowrap; font-size:14.5px; font-weight:500;
  transition:max-width .5s var(--e) }
.wpp-float:hover{ gap:10px; padding-inline:19px 22px; box-shadow:0 16px 44px -8px rgba(31,175,84,.75) }
.wpp-float:hover .wpp-float__label{ max-width:120px }
.wpp-float::after{
  content:''; position:absolute; inset:0; border-radius:100px; border:1.5px solid #1FAF54;
  animation:ring 2.6s var(--e) infinite;
}
@keyframes ring{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(1.45); opacity:0 } }

/* ─────────── 22. ANIMAÇÕES DE ENTRADA ─────────── */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--e-out), transform .9s var(--e-out) }
.reveal.in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.08s }
.reveal[data-d="2"]{ transition-delay:.16s }
.reveal[data-d="3"]{ transition-delay:.24s }
.reveal[data-d="4"]{ transition-delay:.32s }
.reveal[data-d="5"]{ transition-delay:.4s }
.reveal[data-d="6"]{ transition-delay:.48s }

.split .w{ display:inline-block; overflow:hidden; vertical-align:top }
.split .w > i{ display:inline-block; font-style:inherit; transform:translateY(105%);
  transition:transform .95s var(--e-out) }
.split.in .w > i{ transform:none }

/* ─────────── 22b. PÁGINAS LEGAIS ─────────── */
.legal{ padding-block:clamp(110px,14vh,150px) clamp(60px,8vw,100px) }
.legal__wrap{ max-width:820px }
.legal h1{ font-size:clamp(34px,5vw,54px); margin-bottom:14px }
.legal__meta{ font-family:var(--f-mono); font-size:12px; color:var(--txt-3);
  letter-spacing:.06em; margin-bottom:44px }
.legal__alert{ padding:18px 22px; border-radius:var(--r); margin-bottom:44px;
  background:var(--gold-soft); border:1px solid rgba(217,169,76,.24);
  font-size:14px; color:var(--txt-2); line-height:1.65 }
.legal__alert strong{ color:var(--gold-lt) }
.legal h2{ font-size:21px; margin:44px 0 14px; letter-spacing:-.03em }
.legal p{ font-size:15.5px; color:var(--txt-2); line-height:1.78; margin-bottom:14px }
.legal p strong{ color:var(--txt); font-weight:500 }
.legal ul{ display:flex; flex-direction:column; gap:10px; margin:0 0 18px }
.legal li{ position:relative; padding-left:22px; font-size:15px; color:var(--txt-2); line-height:1.7 }
.legal li::before{ content:''; position:absolute; left:2px; top:11px; width:5px; height:5px;
  border-radius:50%; background:var(--gold) }
.legal a{ color:var(--gold); border-bottom:1px solid rgba(217,169,76,.3) }
.legal a:hover{ border-color:var(--gold) }
.legal__cta{ margin-top:56px; padding-top:36px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px }
.legal__cta p{ margin:0; font-size:16px; color:var(--txt) }
.legal__cta a{ border-bottom:0 }

/* ─────────── 23. RESPONSIVO ─────────── */
@media (max-width:1080px){
  .hero__inner{ grid-template-columns:1fr; gap:56px }
  .hero__title{ max-width:18ch }
  .hero__visual{ max-width:560px }
  .float-chip--a{ left:-12px } .float-chip--b{ right:-10px }
  .faq-wrap{ grid-template-columns:1fr; gap:36px }
  .faq-wrap .sec-head{ position:static }
}
@media (max-width:920px){
  .nav{
    position:fixed; inset:0 0 auto; top:0; padding:96px 24px 32px;
    flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(8,8,10,.97); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    transform:translateY(-102%); transition:transform .55s var(--e); z-index:-1;
  }
  .nav.open{ transform:none }
  .nav a{ padding:15px 4px; font-size:17px; border-bottom:1px solid var(--line); border-radius:0 }
  .nav a::after{ display:none }
  .burger{ display:flex }
  .header__cta .btn{ display:none }
  .footer__top{ grid-template-columns:1fr; gap:40px }
}
@media (max-width:680px){
  .hero{ min-height:auto }

  /* nowrap dava ao CTA uma largura minima de ~385px, e como item de grid ele
     esticava a coluna inteira para alem da tela. No celular o texto quebra. */
  .btn{ white-space:normal; text-align:center; line-height:1.3 }
  .hero__inner > *{ min-width:0 }
  .hero__visual{ max-width:100% }

  .hero__actions{ flex-direction:column }
  .hero__actions .btn{ width:100% }
  .hero__trust{ gap:9px }
  .plan__price b{ font-size:30px }
  .launch{ font-size:12.5px; padding:8px 16px 8px 14px }
  .footer__nav{ grid-template-columns:1fr 1fr; gap:24px }
  .float-chip--a{ bottom:-16px; left:-8px; padding:10px 13px }
  .float-chip--b{ top:20px; right:-6px; padding:10px 13px }
  .float-chip strong,.float-chip .score{ font-size:17px }
  .steps{ padding-left:44px }
  .steps__rail{ left:15px }
  .step__n{ left:-44px; width:36px; font-size:12px }
  .step::before{ left:-30px }
  .qa summary{ font-size:15.5px }
}

/* ─────────── 24. ACESSIBILIDADE ─────────── */
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important }
  .reveal{ opacity:1; transform:none }
  .split .w > i{ transform:none }
  .spotlight{ display:none }

  /* Exceção: as esteiras do portfólio continuam rodando. A regra universal
     acima as congelava justamente nos celulares em economia de bateria.
     Movimento lento, contínuo e sem piscar — não é o tipo que causa desconforto. */
  .reel__track{ animation-duration:52s!important; animation-iteration-count:infinite!important;
    animation-timing-function:linear!important }
  .marquee__track{ animation-duration:42s!important; animation-iteration-count:infinite!important;
    animation-timing-function:linear!important }
}
@media (prefers-reduced-motion:reduce) and (max-width:620px){
  .reel__track{ animation-duration:34s!important }
}