/* ══════════════════════════════════════════════════════════════
   OCarlosAndré — Landing Page de Criação de Sites
   Design tokens derivados da identidade visual da marca
   ══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root{
  /* Marca — gradiente extraído dos SVGs oficiais do logo */
  --brand-crimson:#A80C3F;
  --brand-red:    #D4441B;
  --brand-orange: #DD5114;
  --brand-flame:  #FF3F00;
  --brand-amber:  #F7B11E;
  --brand-gold:   #FABC04;
  --brand-bronze: #46290F;

  --grad-brand: linear-gradient(100deg, var(--brand-crimson) 0%, var(--brand-red) 34%, var(--brand-orange) 58%, var(--brand-amber) 100%);
  --grad-cta:   linear-gradient(100deg, #E0341A 0%, #FF5A00 48%, #F7B11E 130%);

  /* Neutros escuros */
  --dark-0:#08080A;
  --dark-1:#0C0C0F;
  --dark-2:#111114;
  --dark-3:#17171B;
  --dark-4:#1F1F25;

  /* Neutros claros */
  --light-0:#FFFFFF;
  --light-1:#FAF8F6;
  --light-2:#F2EEEA;
  --light-3:#E6E0D9;

  /* Texto */
  --tx-on-dark:      #F5F3F1;
  --tx-on-dark-mute: #A9A6A2;
  /* #78746F ficava em 4.24:1 sobre o fundo escuro — abaixo do mínimo AA */
  --tx-on-dark-dim:  #8A8681;
  --tx-on-light:     #14120F;
  --tx-on-light-mute:#57524C;

  /* Semânticos — trocados por seção via .section--light */
  --bg:      var(--dark-0);
  --surface: var(--dark-2);
  --surface-2: var(--dark-3);
  --text:    var(--tx-on-dark);
  --text-mute: var(--tx-on-dark-mute);
  --text-dim:  var(--tx-on-dark-dim);
  --border:  rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.16);
  --accent:  var(--brand-flame);
  --ring:    var(--brand-amber);

  /* Tipografia */
  --f-display:'Space Grotesk', system-ui, -apple-system, sans-serif;
  --f-body:   'Readex Pro', system-ui, -apple-system, sans-serif;
  --f-impact: 'Bebas Neue', var(--f-display), sans-serif;
  --f-mono:   'Space Mono', ui-monospace, 'SF Mono', monospace;

  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem;
  --fs-4xl:clamp(2.1rem, 5.2vw, 3.4rem);
  --fs-5xl:clamp(2.05rem, 4.6vw, 3.5rem);

  /* Espaçamento — escala 4/8 */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px;

  --r-sm:8px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 8px 28px -12px rgba(0,0,0,.6);
  --shadow-lg:0 28px 70px -24px rgba(0,0,0,.75);
  --shadow-glow:0 10px 40px -12px rgba(255,90,0,.5);

  --container:1200px;
  --nav-h:72px;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:160ms; --t-base:240ms; --t-slow:420ms;

  --z-base:0; --z-raise:10; --z-sticky:40; --z-nav:100; --z-float:200;
}

/* ── 2. RESET / BASE ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 24px)}

body{
  font-family:var(--f-body);
  font-size:var(--fs-base);
  line-height:1.7;
  font-weight:300;
  color:var(--text);
  background:var(--dark-0);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip em vez de hidden: hidden cria um contêiner de rolagem e quebra
     o position:sticky do hero. clip corta igual e não quebra. */
  overflow-x:clip;
}

img,svg,canvas{display:block; max-width:100%; height:auto}
button,input,select,textarea{font:inherit; color:inherit}
a{color:inherit}

h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.1; letter-spacing:-.025em}

:focus-visible{outline:2px solid var(--ring); outline-offset:3px; border-radius:4px}
::selection{background:var(--brand-flame); color:#fff}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--brand-flame); color:#fff; padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0; font-weight:500;
}
.skip-link:focus{left:0}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--space-5)}

/* ── 3. TEMAS DE SEÇÃO ─────────────────────────────────────── */
.section--dark{
  --bg:var(--dark-0); --surface:var(--dark-2); --surface-2:var(--dark-3);
  --text:var(--tx-on-dark); --text-mute:var(--tx-on-dark-mute); --text-dim:var(--tx-on-dark-dim);
  --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16);
  background:var(--bg); color:var(--text);
}
.section--light{
  --bg:var(--light-1); --surface:var(--light-0); --surface-2:var(--light-2);
  --text:var(--tx-on-light); --text-mute:var(--tx-on-light-mute); --text-dim:#6F6960;
  --border:rgba(20,18,15,.10); --border-strong:rgba(20,18,15,.18);
  background:var(--bg); color:var(--text);
}

.section{position:relative; padding-block:clamp(72px,10vw,var(--space-10))}
/* seções de mesmo tema em sequência não precisam de padding duplo */
.section--light + .section--light,
.section--dark  + .section--dark{padding-top:clamp(32px,4vw,56px)}

/* ── EMPILHAMENTO: a próxima página sobe cobrindo a anterior ──
   O hero fica preso no topo enquanto a seção seguinte rola por cima.
   É só CSS: acompanha o dedo, não trava o scroll e não custa quadro. */
.hero{position:sticky; top:0; z-index:0}
.cobre{
  position:relative; z-index:2;
  border-radius:0;                       /* canto reto lê mais sério */
  box-shadow:0 -30px 70px -20px rgba(0,0,0,.85), 0 -1px 0 rgba(255,255,255,.06);
}
/* todo o resto da página viaja por cima do hero */
main > *:not(.hero){position:relative; z-index:2}
main + .footer{position:relative; z-index:2}
/* a última seção antes do rodapé não precisa de sombra por baixo */
.cta.cobre{box-shadow:0 -30px 70px -20px rgba(0,0,0,.85)}

/* Transições de tema entre seções (igual ao vídeo de referência) */
.fade-to-light{height:clamp(80px,12vw,160px); background:linear-gradient(180deg,var(--dark-0) 0%,#2A1A0F 42%,#8A5320 74%,var(--light-1) 100%)}
.fade-to-dark {height:clamp(80px,12vw,160px); background:linear-gradient(180deg,var(--light-1) 0%,#C97B2A 30%,#3A1F0C 68%,var(--dark-0) 100%)}

/* ── 4. TIPOGRAFIA UTILITÁRIA ──────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--f-mono); font-size:var(--fs-xs);
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-mute); margin-bottom:var(--space-4);
}
.eyebrow__dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--brand-flame);
  box-shadow:0 0 0 4px rgba(255,63,0,.16), 0 0 14px 2px rgba(255,90,0,.7);
}

.grad{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

.sec-head{max-width:62ch; margin-bottom:var(--space-8)}
.sec-head--center{margin-inline:auto; text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-title{font-size:var(--fs-4xl); margin-bottom:var(--space-4)}
.sec-lead{font-size:var(--fs-lg); color:var(--text-mute); max-width:56ch}
.sec-head--center .sec-lead{margin-inline:auto}
.sec-lead a{color:var(--brand-amber); text-decoration:underline; text-underline-offset:3px}

/* Marcadores de conteúdo a substituir */
.ph{
  font-family:var(--f-mono); font-size:.85em; font-weight:700;
  color:#FFC94D; background:rgba(255,180,30,.13);
  border:1px dashed rgba(255,180,30,.5);
  padding:1px 7px; border-radius:5px; white-space:nowrap;
}
.section--light .ph{color:#8A5A00; background:rgba(255,180,30,.2); border-color:rgba(180,120,0,.5)}
.ph-block{
  font-family:var(--f-mono); font-size:var(--fs-sm); line-height:1.65;
  color:#FFC94D; background:rgba(255,180,30,.08);
  border:1px dashed rgba(255,180,30,.35);
  padding:var(--space-4); border-radius:var(--r-sm);
}
.ph-avatar{background:rgba(255,180,30,.15) !important; border:1px dashed rgba(255,180,30,.5) !important; color:#FFC94D !important}
.ph-link{opacity:.45}

/* ── 5. BOTÕES ─────────────────────────────────────────────── */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:var(--border-strong);
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-2);
  min-height:44px; padding:11px 20px;
  font-family:var(--f-display); font-size:var(--fs-sm); font-weight:600;
  letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--r-pill);
  cursor:pointer;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             background-color var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             opacity var(--t-base) var(--ease-out);
  touch-action:manipulation;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn svg{flex:none}

.btn--primary{
  --btn-bg:var(--grad-cta); --btn-fg:#fff; --btn-bd:transparent;
  box-shadow:var(--shadow-glow);
}
.btn--primary:hover{box-shadow:0 14px 48px -10px rgba(255,90,0,.72)}
.btn--primary svg{transition:transform var(--t-base) var(--ease-out)}
.btn--primary:hover svg{transform:translateX(3px)}

.btn--outline{--btn-bg:transparent; --btn-bd:var(--border-strong)}
.btn--outline:hover{--btn-bd:var(--brand-amber); background:rgba(247,177,30,.08)}

.btn--ghost{--btn-bd:transparent; color:var(--text-mute); padding-inline:14px}
.btn--ghost:hover{color:var(--text); background:rgba(255,255,255,.06)}

.btn--lg{min-height:54px; padding:15px 30px; font-size:var(--fs-base)}
.btn--block{width:100%}

/* estado de carregamento */
.btn__spin{
  display:none; width:17px; height:17px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.is-loading{pointer-events:none; opacity:.75}
.btn.is-loading .btn__spin{display:block}

/* ── 5b. ABERTURA ──────────────────────────────────────────── */
.abertura{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  background:#141416;              /* cinza da referência, não preto */
}
.abertura[hidden]{display:none}
.abertura__marca{
  position:relative;
  display:flex; align-items:center;
}
.abertura__icone{
  width:96px; height:96px; opacity:0;
  border-radius:22px;
}

/* fora do fluxo: assim o anel/ícone ficam centrados na fase 1 e o
   conjunto só se desloca quando o nome entra */
.abertura__nome{
  position:absolute; left:100%; top:50%; translate:0 -50%;
  margin-left:22px;
  display:flex;
  font-family:var(--f-impact); font-size:clamp(34px,6.2vw,60px);
  letter-spacing:.02em; line-height:1;
  color:#fff; white-space:nowrap;
}
.abertura__nome span{display:inline-block; opacity:0}

/* impede rolagem enquanto a abertura está na tela */
html.abrindo, html.abrindo body{overflow:hidden}

@media (max-width:520px){
  .abertura__icone{width:68px; height:68px}
  .abertura__anel{width:54px; height:54px; margin:-27px 0 0 7px; border-width:2px}
}

/* ── 6. NAVBAR ─────────────────────────────────────────────── */
.nav-wrap{
  position:fixed; inset:12px 0 auto; z-index:var(--z-nav);
  padding-inline:var(--space-5); pointer-events:none;
}
/* No topo do hero o header não tem barra: só a marca e os links soltos.
   A pílula só aparece quando a página branca começa a subir. */
.nav{
  pointer-events:auto;
  display:flex; align-items:center; gap:var(--space-5);
  max-width:var(--container); margin-inline:auto;
  height:var(--nav-h); padding:0 10px 0 18px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  transition:height var(--t-base) var(--ease-out),
             background-color var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out),
             backdrop-filter var(--t-base) var(--ease-out);
}
.nav-wrap.is-scrolled .nav{
  height:56px;
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.9);
}
.nav-wrap.is-scrolled .nav__brand img{height:20px}
.nav__brand{display:flex; align-items:center; flex:none; min-height:44px; padding-block:10px}
.nav__brand img{width:auto; height:24px}

.nav__links{
  display:flex; align-items:center; gap:2px;
  list-style:none; padding:0; margin-inline:auto;
}
.nav__links a{
  display:block; padding:9px 14px;
  font-size:var(--fs-sm); font-weight:400; color:var(--tx-on-dark-mute);
  text-decoration:none; border-radius:var(--r-pill);
  transition:color var(--t-fast), background-color var(--t-fast);
}
.nav__links a:hover{color:#fff; background:rgba(255,255,255,.07)}

.nav__actions{display:flex; align-items:center; gap:var(--space-2); flex:none}
.nav__wa{gap:6px}

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 11px;
  background:none; border:0; cursor:pointer;
}
.nav__toggle span{
  display:block; height:2px; width:100%; background:#fff; border-radius:2px;
  transition:transform var(--t-base) var(--ease-out), opacity var(--t-fast);
}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.nav__mobile{
  pointer-events:auto;
  display:flex; flex-direction:column; gap:var(--space-1);
  max-width:var(--container); margin:var(--space-2) auto 0; padding:var(--space-4);
  background:rgba(10,10,13,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
}
.nav__mobile[hidden]{display:none}
.nav__mobile a:not(.btn){
  padding:13px var(--space-3); font-size:var(--fs-base);
  color:var(--tx-on-dark-mute); text-decoration:none; border-radius:var(--r-sm);
  min-height:44px; display:flex; align-items:center;
}
.nav__mobile a:not(.btn):hover{color:#fff; background:rgba(255,255,255,.06)}
.nav__mobile .btn{margin-top:var(--space-3)}

/* ── 7. HERO ───────────────────────────────────────────────── */
.hero{
  /* sticky: fica preso no topo enquanto a seção seguinte sobe cobrindo */
  position:sticky; top:0; z-index:0;
  isolation:isolate; overflow:hidden;
  padding-block:calc(var(--nav-h) + clamp(64px,11vw,120px)) clamp(40px,6vw,72px);
  min-height:min(100svh,900px);
  display:flex; flex-direction:column; justify-content:center;
}
.hero__inner{position:relative; z-index:3; text-align:center}

/* fundo vivo (gradiente WebGL): fica embaixo de tudo, a grade e o feixe passam por cima */
.hero__velaris{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease-out);
}
.hero__velaris.is-on{opacity:1}
/* com o gradiente vivo, o feixe e o brilho do mouse saem: eram a luz do fundo
   antigo e, por cima das manchas, deixavam tudo sujo */
.hero--velaris .hero__beam,
.hero--velaris .hero__spot{display:none}
/* vinheta só no miolo do texto: as bordas ficam livres para as manchas */
.hero--velaris::after{
  background:radial-gradient(ellipse 46% 36% at 50% 45%,
    rgba(0,0,0,.55) 0%, rgba(0,0,0,.24) 55%, transparent 82%);
}

/* grade de fundo */
.hero__grid{
  position:absolute; inset:-10% -5% 0; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 12%, transparent 76%);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 34%, #000 12%, transparent 76%);
}
/* feixe de luz diagonal — assinatura visual do vídeo */
/* O cone precisa ser longo o bastante para varrer o hero inteiro: antes ele
   terminava no meio e parecia cortado. A origem fica fora da tela, no canto
   superior direito, e o ângulo é aberto o suficiente para chegar embaixo. */
.hero__beam{
  position:absolute; top:-60%; right:-22%; z-index:1;
  width:105vw; height:190%;
  background:
    conic-gradient(from 196deg at 82% 2%,
      transparent 0deg,
      rgba(255,110,15,.16) 3deg,
      rgba(255,165,45,.30) 8deg,
      rgba(255,140,25,.22) 13deg,
      rgba(255,80,0,.10) 19deg,
      transparent 26deg);
  filter:blur(30px);
  transform-origin:82% 2%;
  will-change:transform,opacity;
}
/* brilho radial que segue o mouse */
.hero__spot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,70%) var(--my,18%), rgba(255,110,10,.13), transparent 62%);
  transition:background-position var(--t-slow) linear;
}
/* vinheta: segura o miolo escuro para o texto do hero manter contraste */
.hero::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 60% 46% at 50% 40%,
    rgba(8,8,10,.80) 0%, rgba(8,8,10,.42) 46%, transparent 72%);
}

.hero__title{
  font-size:var(--fs-5xl); font-weight:700; letter-spacing:-.038em;
  max-width:19ch; margin:0 auto var(--space-5); text-wrap:balance;
}

/* wrappers criados pelo SplitText — evita corte de acentos e descidas */
.split-line{padding-bottom:.06em}
[data-split] > div{will-change:transform}
.hero__title em{
  font-style:normal;
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{
  font-size:var(--fs-lg); color:var(--tx-on-dark-mute);
  max-width:62ch; margin:0 auto var(--space-6); text-wrap:pretty;
}
.hero__cta{display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-bottom:var(--space-4)}
.hero__note{font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--tx-on-dark-dim); letter-spacing:.02em}

/* ── 8. NETMAP (rede de nós do hero) ───────────────────────── */
.netmap{
  position:relative; z-index:2;
  width:100%; max-width:1000px; margin:clamp(24px,5vw,56px) auto 0;
  aspect-ratio:1000/420;
}
.netmap__lines{position:absolute; inset:0; width:100%; height:100%}
.netmap__pulse path{stroke-dasharray:130 1200; stroke-dashoffset:1330}

.netmap__core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; gap:6px;
  width:clamp(86px,11vw,116px); aspect-ratio:1;
  background:linear-gradient(160deg, var(--dark-3), var(--dark-1));
  border:1px solid rgba(255,120,30,.4); border-radius:var(--r-lg);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 20px 60px -18px rgba(255,80,0,.55);
}
.netmap__core img{width:46%; height:auto}
.netmap__coreglow{
  position:absolute; inset:-46%; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,95,0,.42), transparent 66%);
  filter:blur(18px);
}
.netmap__corelabel{
  font-family:var(--f-mono); font-size:9px; letter-spacing:.16em;
  color:var(--brand-amber); text-transform:uppercase;
}

.netmap__node{
  position:absolute; display:grid; place-items:center;
  width:clamp(48px,6vw,62px); aspect-ratio:1;
  background:rgba(20,20,24,.85);
  border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:var(--shadow-md);
}
.netmap__node img{width:56%; height:auto}
.netmap__node--a{left:5%;  top:11%}
.netmap__node--b{left:0%;  top:43%}
.netmap__node--c{left:5%;  top:71%}
.netmap__node--d{right:5%; top:11%}
.netmap__node--e{right:0%; top:43%}
.netmap__node--f{right:5%; top:71%}

/* ── 9. MARQUEE ────────────────────────────────────────────── */
.marquee{
  padding-block:var(--space-6);
  border-block:1px solid rgba(255,255,255,.07);
  overflow:hidden;
  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; width:max-content}
.marquee__row{display:flex; align-items:center; gap:clamp(32px,5vw,64px); padding-right:clamp(32px,5vw,64px)}
.marquee__item{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-display); font-size:var(--fs-sm); font-weight:500;
  color:var(--tx-on-dark-dim); white-space:nowrap;
  transition:color var(--t-base);
}
.marquee__item img{width:24px; height:24px; opacity:.8; transition:opacity var(--t-base)}
.marquee:hover .marquee__item{color:var(--tx-on-dark-mute)}
.marquee:hover .marquee__item img{opacity:1}

/* ── 10. CARDS / GRIDS ─────────────────────────────────────── */
.cards{display:grid; gap:var(--space-4)}
.cards--4{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}

.card{
  position:relative; overflow:hidden;
  padding:var(--space-6) var(--space-5) var(--space-5);
  background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  transition:border-color var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out),
             background-color var(--t-base) var(--ease-out);
}
.card:hover{transform:translateY(-4px); border-color:rgba(255,120,30,.35)}
.card::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px;
  background:var(--grad-brand); opacity:0;
  transition:opacity var(--t-base);
}
.card:hover::after{opacity:1}
.card h3{font-size:var(--fs-xl); margin-bottom:var(--space-3)}
.card p{font-size:var(--fs-sm); color:var(--text-mute)}
.card__num{
  display:block; font-family:var(--f-impact); font-size:2.6rem; line-height:1;
  letter-spacing:.02em; margin-bottom:var(--space-3);
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Pilares */
.pillars{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-5)}
.pillar{
  padding:var(--space-6); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 1px 3px rgba(20,18,15,.04);
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pillar:hover{transform:translateY(-5px); box-shadow:0 22px 50px -26px rgba(160,60,0,.4)}
.pillar__icon{
  display:flex; align-items:center;
  margin-bottom:var(--space-4);
}
.pillar__icon img{width:46px; height:46px}
.pillar h3{font-size:var(--fs-lg); margin-bottom:var(--space-2)}
.pillar p{font-size:var(--fs-sm); color:var(--text-mute)}

/* Bento */
.bento{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-4)}
.bento__item{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-6); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-lg);
  transition:transform var(--t-base) var(--ease-out), border-color var(--t-base);
}
.bento__item:hover{transform:translateY(-4px); border-color:rgba(200,90,10,.35)}
.bento__item--wide{grid-column:span 2}
.bento__item img{width:44px; height:44px}
.bento__item h3{font-size:var(--fs-lg)}
.bento__item p{font-size:var(--fs-sm); color:var(--text-mute)}

/* ── 11. PROCESSO ──────────────────────────────────────────── */
.steps{position:relative; list-style:none; padding:0 0 0 44px; margin:0; display:grid; gap:var(--space-6); max-width:820px; margin-inline:auto}
.steps__rail{
  position:absolute; left:13px; top:8px; bottom:8px; width:2px;
  background:var(--border-strong); border-radius:2px; overflow:hidden;
}
.steps__progress{
  display:block; width:100%; height:100%;
  background:var(--grad-brand);
  transform-origin:top; transform:scaleY(0);
}
.step{position:relative; padding-bottom:var(--space-2)}
.step__dot{
  position:absolute; left:-44px; top:6px;
  width:28px; height:28px; border-radius:50%;
  background:var(--bg); border:2px solid var(--border-strong);
  display:grid; place-items:center;
  transition:border-color var(--t-slow), box-shadow var(--t-slow), background-color var(--t-slow);
}
.step__dot::after{
  content:''; width:9px; height:9px; border-radius:50%;
  background:var(--border-strong); transition:background var(--t-slow), transform var(--t-slow);
}
.step.is-active .step__dot{border-color:var(--brand-flame); box-shadow:0 0 0 5px rgba(255,63,0,.14)}
.step.is-active .step__dot::after{background:var(--grad-cta); transform:scale(1.25)}
.step__idx{
  display:block; font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px;
}
.step h3{font-size:var(--fs-2xl); margin-bottom:var(--space-2)}
.step p{color:var(--text-mute); max-width:60ch}
.step__time{
  display:inline-block; margin-top:var(--space-3);
  padding:4px 12px; border-radius:var(--r-pill);
  font-family:var(--f-mono); font-size:var(--fs-xs);
  background:rgba(200,90,10,.1); color:#A5511A; border:1px solid rgba(200,90,10,.22);
}

/* ── 12. ALCANCE / GLOBO / STATS ───────────────────────────── */
.alcance{overflow:hidden; isolation:isolate}
.alcance__inner{position:relative; z-index:2}
/* o globo tem bloco próprio: precisa de folga lateral para os balões */
.globe-wrap{
  position:relative; z-index:1; pointer-events:none;
  width:min(520px,72vw); aspect-ratio:1;
  margin:clamp(24px,4vw,44px) auto 0;
}
.globe{width:100%; height:100%; opacity:.92}

/* ── balões de mercado presos ao globo ── */
.globe__baloes{position:absolute; inset:0; pointer-events:none}
.balao{
  position:absolute; left:var(--bx,50%); top:var(--by,50%);
  translate:-50% -50%;
  display:flex; flex-direction:column; gap:1px;
  padding:7px 12px; white-space:nowrap;
  background:rgba(14,13,16,.92);
  border:1px solid rgba(255,140,40,.42); border-radius:9px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 26px -10px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0; scale:.86;
  transition:opacity 340ms var(--ease-out), scale 340ms var(--ease-out);
}
.balao.is-on{opacity:1; scale:1}
/* a linha e o ponto sobre o país são desenhados no canvas (main.js):
   a geometria fica sempre correta, de qualquer lado do globo. */

.balao__pais{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--brand-amber);
}
.balao__valor{
  font-family:var(--f-display); font-size:13px; font-weight:600;
  color:#F5F3F1; font-variant-numeric:tabular-nums;
}

/* legenda de origem dos números */
.globe__fonte{
  position:relative; z-index:2;
  display:block; margin-top:var(--space-4); text-align:center;
  font-family:var(--f-mono); font-size:var(--fs-xs); color:var(--tx-on-dark-dim);
}
.globe__glow{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, transparent 52%, rgba(255,110,0,.5) 63%, rgba(168,12,63,.25) 74%, transparent 84%);
  filter:blur(22px);
}

.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--space-4); margin-top:var(--space-6);
}
.stat{
  padding:var(--space-5); text-align:center;
  background:rgba(14,14,17,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border); border-radius:var(--r-lg);
}
.stat__num{
  display:block; font-family:var(--f-impact); font-size:clamp(2.6rem,6vw,3.9rem);
  line-height:1; letter-spacing:.01em; margin-bottom:var(--space-2);
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat__label{display:block; font-size:var(--fs-sm); color:var(--text-mute); line-height:1.5}
.stat__label .ph{display:inline-block; margin-top:6px}

/* ── 13. DEPOIMENTOS ───────────────────────────────────────── */
.depoimentos{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--space-4)}
.depo{
  display:flex; flex-direction:column; gap:var(--space-4);
  padding:var(--space-6); margin:0;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:border-color var(--t-base), transform var(--t-base) var(--ease-out);
}
.depo:hover{transform:translateY(-4px); border-color:rgba(255,120,30,.3)}
.depo__stars{display:flex; gap:3px; color:var(--brand-amber)}
.depo blockquote{margin:0; flex:1}
.depo blockquote p{font-size:var(--fs-base); color:var(--text)}
.depo figcaption{display:flex; align-items:center; gap:var(--space-3); padding-top:var(--space-4); border-top:1px solid var(--border)}
.depo figcaption span:last-child{display:flex; flex-direction:column; min-width:0}
.depo figcaption b{font-family:var(--f-display); font-size:var(--fs-sm); font-weight:600}
.depo figcaption small{font-size:var(--fs-xs); color:var(--text-dim)}
.depo__avatar{
  display:grid; place-items:center; flex:none;
  width:44px; height:44px; border-radius:50%;
  background:var(--surface-2); font-family:var(--f-display); font-weight:600;
}

/* ── 14. SOBRE ─────────────────────────────────────────────── */
.sobre__grid{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(32px,6vw,80px); align-items:center}
.sobre__media{position:relative; isolation:isolate}
.sobre__media img{
  width:100%; border-radius:var(--r-xl);
  border:1px solid var(--border-strong);
  filter:saturate(1.05) contrast(1.03);
}
.sobre__glow{
  position:absolute; inset:-12% -8% -6%; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 50% 60%, rgba(255,85,0,.35), transparent 66%);
  filter:blur(46px);
}
.sobre__badge{
  position:absolute; right:-10px; bottom:22px;
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:10px 16px; border-radius:var(--r-pill);
  background:rgba(12,12,15,.9); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);
  font-family:var(--f-display); font-size:var(--fs-xs); font-weight:600;
}
.sobre__badge img{width:24px; height:24px}
.sobre__text p{color:var(--text-mute); margin-bottom:var(--space-4); max-width:58ch}
.sobre__text strong{color:var(--text); font-weight:500}
.sobre__list{list-style:none; padding:0; margin-top:var(--space-6); display:grid; gap:var(--space-3)}
.sobre__list li{display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-sm); color:var(--text-mute)}
.sobre__list svg{flex:none; margin-top:4px; color:var(--brand-amber)}

/* ── 15. FAQ ───────────────────────────────────────────────── */
.faq__grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(32px,6vw,72px); align-items:start}
.faq .sec-head{margin-bottom:0; position:sticky; top:calc(var(--nav-h) + 40px)}
.faq__list{display:grid; gap:var(--space-2)}
.faq__item{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); overflow:hidden;
  transition:border-color var(--t-base), background-color var(--t-base);
}
.faq__item[open]{border-color:rgba(255,120,30,.32); background:var(--surface-2)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); min-height:56px;
  font-family:var(--f-display); font-size:var(--fs-base); font-weight:500;
  cursor:pointer; list-style:none;
  transition:color var(--t-fast);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--brand-amber)}
.faq__chev{
  position:relative; flex:none; width:20px; height:20px;
  transition:transform var(--t-base) var(--ease-out);
}
.faq__chev::before,.faq__chev::after{
  content:''; position:absolute; top:50%; left:50%; translate:-50% -50%;
  background:currentColor; border-radius:2px;
}
.faq__chev::before{width:12px; height:2px}
.faq__chev::after{width:2px; height:12px; transition:opacity var(--t-base), transform var(--t-base)}
.faq__item[open] .faq__chev{transform:rotate(180deg)}
.faq__item[open] .faq__chev::after{opacity:0; transform:scaleY(0)}
.faq__body{padding:0 var(--space-5) var(--space-5)}
.faq__body p{font-size:var(--fs-sm); color:var(--text-mute); max-width:62ch}

/* ── 16. CTA FINAL ─────────────────────────────────────────── */
.cta{position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(72px,10vw,120px) clamp(90px,14vw,180px)}
/* "nascer do sol" — assinatura visual do vídeo de referência.
   Fica baixo o suficiente para o texto acima permanecer sobre fundo escuro. */
.cta__sun{
  position:absolute; left:50%; bottom:-74%; translate:-50% 0; z-index:0;
  width:min(1400px,165vw); aspect-ratio:1; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,
      #FFF3E2 0%, #FFC96B 13%, #FF7A15 27%,
      #E0341A 40%, rgba(168,12,63,.5) 52%,
      rgba(80,10,20,.16) 65%, transparent 76%);
  filter:blur(28px);
  opacity:.92;
  will-change:transform;
}
/* scrim: garante contraste do texto sobre o brilho */
.cta::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    var(--dark-0) 0%, rgba(8,8,10,.92) 26%, rgba(8,8,10,.62) 46%, transparent 68%);
}
.cta__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:clamp(32px,6vw,72px); align-items:start;
}
.cta__title{font-size:var(--fs-4xl); margin-bottom:var(--space-4); max-width:16ch; text-wrap:balance}
.cta__lead{font-size:var(--fs-lg); color:#E9E5E1; max-width:50ch; margin-bottom:var(--space-6)}
.cta__bullets{list-style:none; padding:0; display:grid; gap:var(--space-3)}
.cta__bullets li{display:flex; align-items:flex-start; gap:var(--space-3); font-size:var(--fs-sm); color:#E9E5E1}
.cta__bullets svg{flex:none; margin-top:4px; color:var(--brand-amber)}

/* ── 17. FORMULÁRIO ────────────────────────────────────────── */
.formcard{
  padding:clamp(24px,4vw,36px);
  background:rgba(13,13,16,.9);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-xl);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
}
.form{display:grid; gap:var(--space-4)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.field{display:grid; gap:6px}
.field label{font-family:var(--f-display); font-size:var(--fs-sm); font-weight:500}
.req{color:var(--brand-flame)}

.field input:not([type=checkbox]),
.field select,
.field textarea{
  width:100%; min-height:48px; padding:12px 15px;
  font-size:16px; /* evita zoom automático no iOS */
  font-family:var(--f-body); font-weight:300;
  color:var(--tx-on-dark);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.13); border-radius:var(--r-sm);
  transition:border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{min-height:88px; resize:vertical; line-height:1.6}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9A6A2' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:42px;
}
.field select option{background:var(--dark-2); color:var(--tx-on-dark)}
.field ::placeholder{color:var(--tx-on-dark-dim); opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-flame);
  background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px rgba(255,63,0,.18);
}
.field .hint{font-size:var(--fs-xs); color:var(--tx-on-dark-dim)}
.field .err{font-size:var(--fs-xs); color:#FF7A5C; display:none; align-items:center; gap:5px}
.field.has-error .err{display:flex}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:#FF7A5C; box-shadow:0 0 0 3px rgba(255,122,92,.14);
}
.field.has-error .check__box{border-color:#FF7A5C}

/* checkbox LGPD */
.field--check{margin-top:var(--space-1)}
.check{display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; font-weight:300 !important; font-family:var(--f-body) !important; font-size:var(--fs-xs) !important; color:var(--tx-on-dark-mute); line-height:1.6}
.check input{position:absolute; opacity:0; width:1px; height:1px}
.check__box{
  flex:none; display:grid; place-items:center;
  width:22px; height:22px; margin-top:1px;
  border:1px solid rgba(255,255,255,.25); border-radius:6px;
  color:transparent; background:rgba(255,255,255,.045);
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.check input:checked + .check__box{background:var(--grad-cta); border-color:transparent; color:#fff}
.check input:focus-visible + .check__box{outline:2px solid var(--ring); outline-offset:2px}
.check a{color:var(--brand-amber); text-decoration:underline; text-underline-offset:2px}

.form__foot{font-size:var(--fs-xs); color:var(--tx-on-dark-dim); text-align:center; line-height:1.6}
.form__ok{
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-4); border-radius:var(--r-sm);
  background:rgba(52,168,82,.12); border:1px solid rgba(52,168,82,.35); color:#8FE6A8;
}
.form__ok[hidden]{display:none}
.form__ok svg{flex:none; margin-top:2px}
.form__ok p{font-size:var(--fs-sm)}
.form__ok a{color:#fff; text-decoration:underline}

/* ── 18. FOOTER ────────────────────────────────────────────── */
.footer{padding-top:clamp(56px,8vw,80px); border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:var(--space-7); padding-bottom:var(--space-8);
}
.footer__brand img{width:auto; height:52px; margin-bottom:var(--space-4)}
.footer__brand p{font-size:var(--fs-sm); color:var(--tx-on-dark-mute); max-width:36ch}
.footer h3{
  font-family:var(--f-mono); font-size:var(--fs-xs); font-weight:400;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--tx-on-dark-dim); margin-bottom:var(--space-4);
}
.footer__nav,.footer__contact{display:flex; flex-direction:column; gap:var(--space-1)}
.footer__nav a,.footer__contact a:not(.ph-link){
  display:flex; align-items:center; gap:6px;
  min-height:44px; font-size:var(--fs-sm);
  color:var(--tx-on-dark-mute); text-decoration:none;
  transition:color var(--t-fast);
}
.footer__nav a:hover,.footer__contact a:hover{color:#fff}
.footer__social{display:flex; gap:var(--space-2); margin-top:var(--space-4)}
.footer__social a{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--border); border-radius:var(--r-sm);
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.footer__social a:hover{border-color:rgba(255,120,30,.4); background:rgba(255,120,30,.08)}
.footer__social img{width:22px; height:22px}
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between;
  padding-block:var(--space-5); border-top:1px solid rgba(255,255,255,.07);
}
.footer__bottom small{font-size:var(--fs-xs); color:var(--tx-on-dark-dim)}
.footer__bottom a{color:var(--tx-on-dark-mute); text-decoration:none}
.footer__bottom a:hover{color:#fff; text-decoration:underline}
.footer__legal{padding-bottom:var(--space-5); margin-top:calc(var(--space-2) * -1)}
.footer__legal small{font-size:var(--fs-xs); color:var(--tx-on-dark-dim); letter-spacing:.01em}
@media (max-width:900px){ .footer__legal{padding-bottom:96px} }

/* ── 19. WHATSAPP FLUTUANTE ────────────────────────────────── */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:var(--z-float);
  display:grid; place-items:center; width:56px; height:56px;
  color:#fff; background:#25D366; border-radius:50%;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.55);
  transform:scale(0); opacity:0;
  transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.wa-float.is-visible{transform:scale(1); opacity:1}
.wa-float:hover{box-shadow:0 16px 40px -8px rgba(37,211,102,.75); transform:scale(1.07)}
.wa-float:active{transform:scale(.96)}

/* ── 20. ANIMAÇÃO — estado inicial ───────────────────────────
   Só esconde sob .anim-pending, classe que o JS coloca no <html> e remove
   assim que as animações assumem (ou depois de 2,5s, se algo falhar).
   Sem JS / sem GSAP / com movimento reduzido, o conteúdo aparece normalmente.
   Os títulos [data-split] são controlados pelo GSAP via estilo inline. */
.anim-pending [data-reveal],
.anim-pending [data-stagger] > *{opacity:0}

/* ── 21. RESPONSIVO ────────────────────────────────────────── */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__toggle{display:flex}
  .nav__actions .nav__wa{display:none}
  .sobre__grid{grid-template-columns:1fr; gap:var(--space-7)}
  .sobre__media{max-width:440px; margin-inline:auto}
  .faq__grid{grid-template-columns:1fr}
  .faq .sec-head{position:static; margin-bottom:var(--space-6)}
  .cta__inner{grid-template-columns:1fr}
  .cta__head{max-width:640px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:768px){
  :root{--nav-h:60px}
  .nav{padding-inline:14px 4px; gap:var(--space-2)}
  .nav__brand img{height:19px}
  /* o CTA do header encolhe para o botão de menu caber na barra */
  .nav__actions{margin-left:auto}
  .nav__actions .btn--primary{font-size:var(--fs-xs); padding:9px 13px; min-height:38px}
  .nav__toggle{width:40px; padding-inline:9px}
  .eyebrow{font-size:11px; letter-spacing:.1em}

  .hero{min-height:auto; padding-top:calc(var(--nav-h) + 72px)}
  .hero__cta{flex-direction:column; align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__beam{width:130vw; right:-40%; filter:blur(44px)}

  /* rede de nós vira grade simples no mobile */
  .netmap{
    aspect-ratio:auto; max-width:300px;
    display:grid; grid-template-columns:repeat(3,1fr);
    justify-items:center; align-items:center;
    gap:var(--space-4); margin-top:var(--space-7);
  }
  .netmap__lines{display:none}
  .netmap__core{
    position:static; transform:none;
    grid-column:1/-1; width:92px; margin-bottom:var(--space-2);
  }
  .netmap__node{position:static; inset:auto; width:56px}

  .bento__item--wide{grid-column:span 1}
  .steps{padding-left:38px}
  .steps__rail{left:11px}
  .step__dot{left:-38px; width:24px; height:24px}
  .step h3{font-size:var(--fs-xl)}
  /* no celular não há folga lateral para os balões */
  .globe-wrap{width:min(300px,74vw)}
  .balao{padding:5px 9px}
  .balao__valor{font-size:12px}
  /* o "nascer do sol" precisa subir mais no mobile para continuar visível */
  .cta__sun{bottom:-42%; width:190vw}
  .cta::before{background:linear-gradient(180deg,var(--dark-0) 0%,rgba(8,8,10,.92) 30%,rgba(8,8,10,.6) 52%,transparent 74%)}
  .sobre__badge{right:auto; left:50%; translate:-50% 0; bottom:-18px; white-space:nowrap}
  .footer__grid{grid-template-columns:1fr; gap:var(--space-6)}
  .footer__bottom{flex-direction:column; gap:var(--space-2)}
  .wa-float{right:14px; bottom:14px}
}

@media (max-width:420px){
  .cards--4,.pillars,.bento,.depoimentos,.stats{grid-template-columns:1fr}
  .formcard{padding:20px 18px}
}

/* Paisagem em telas baixas */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding-block:calc(var(--nav-h) + 40px) 40px}
  .netmap{display:none}
}

/* ── 22. MOVIMENTO REDUZIDO ────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-stagger] > *,[data-split],.split-line{opacity:1 !important; transform:none !important}
  .netmap__pulse path{stroke-dashoffset:0; stroke-dasharray:none; opacity:.35}
  .btn:hover,.card:hover,.pillar:hover,.bento__item:hover,.depo:hover{transform:none}
  .wa-float{transform:scale(1); opacity:1}
}

/* ── 23. IMPRESSÃO ─────────────────────────────────────────── */
@media print{
  .nav-wrap,.wa-float,.hero__beam,.hero__grid,.hero__spot,.cta__sun,.globe-wrap,.marquee{display:none !important}
  body{background:#fff; color:#000}
  .section--dark{background:#fff !important; color:#000 !important}
}

/* ══════════════════════════════════════════════════════════════
   24. AJUSTES DA REVISÃO
   ══════════════════════════════════════════════════════════════ */

/* ── Texto justificado ──
   Com hyphens automático e lang="pt-BR" o navegador hifeniza e evita
   os "rios" de espaço que costumam estragar texto justificado. */
.hero__sub,
.sec-lead,
.card p,
.pillar p,
.bento__item p,
.step p,
.depo blockquote p,
.sobre__text p,
.faq__body p,
.cta__lead,
.abas__texto p,
.footer__brand p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto;
}
/* Em coluna estreita o justificado abre buracos entre as palavras.
   Abaixo de 620px todo texto corrido volta a alinhar à esquerda. */
@media (max-width:620px){
  .hero__sub,.sec-lead,.card p,.pillar p,.bento__item p,.step p,
  .depo blockquote p,.sobre__text p,.faq__body p,.cta__lead,
  .abas__texto p,.footer__brand p{
    text-align:left; hyphens:none; -webkit-hyphens:none;
  }
}
/* texto centralizado não pode ser justificado */
.sec-head--center .sec-lead{text-align:center}

/* ── CTA do hero: bola preta que se abre nos dois botões ── */
.hero__cta{position:relative}
.hero__cta-bola{
  position:absolute; left:50%; top:50%;
  width:62px; height:62px; margin:-31px 0 0 -31px;
  border-radius:50%; background:#0E0E11;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 34px -10px rgba(0,0,0,.9);
  opacity:0; pointer-events:none; z-index:3;
}

/* ── Abas: o que é / como funciona ── */
.explica{padding-top:clamp(56px,7vw,88px)}
.abas{max-width:1000px; margin-inline:auto}
.abas__botoes{
  position:relative; display:flex; gap:4px; justify-content:center;
  width:max-content; margin:0 auto clamp(28px,4vw,44px);
  padding:5px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--border);
}
.abas__pilula{
  position:absolute; top:5px; bottom:5px; left:5px;
  border-radius:var(--r-pill); background:#14120F;
  transition:transform 380ms var(--ease-out), width 380ms var(--ease-out);
  z-index:0;
}
.abas__btn{
  position:relative; z-index:1;
  min-height:44px; padding:10px 22px;
  font-family:var(--f-display); font-size:var(--fs-sm); font-weight:600;
  color:var(--text-mute); background:none; border:0; cursor:pointer;
  border-radius:var(--r-pill);
  transition:color 280ms var(--ease-out);
  white-space:nowrap;
}
.abas__btn.is-on{color:#fff}
.abas__btn:not(.is-on):hover{color:var(--text)}

.abas__painel[hidden]{display:none}
.abas__titulo{
  font-size:clamp(1.7rem,3.4vw,2.6rem); text-align:center;
  max-width:22ch; margin:0 auto clamp(28px,4vw,44px); text-wrap:balance;
}
.abas__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.abas__texto p{font-size:var(--fs-base); color:var(--text-mute); margin-bottom:var(--space-4)}
.abas__texto p:last-child{margin-bottom:0}
.abas__texto strong{color:var(--text); font-weight:600}

.abas__visual{
  position:relative; display:grid; place-items:center;
  aspect-ratio:4/3; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(150deg,#1B1206,#0C0A08);
}
.abas__brilho{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:conic-gradient(from 200deg at 78% 0%,
    transparent 0deg, rgba(255,130,20,.34) 8deg,
    rgba(255,180,50,.42) 15deg, transparent 24deg);
  filter:blur(22px);
}
.abas__cartao{
  position:relative; z-index:1; width:min(78%,260px);
  padding:var(--space-5); border-radius:var(--r-lg);
  background:rgba(16,15,18,.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow-lg);
}
.abas__cartao-topo{
  display:block; font-family:var(--f-mono); font-size:9.5px;
  letter-spacing:.14em; color:var(--brand-amber); margin-bottom:6px;
}
.abas__cartao-valor{
  display:block; font-family:var(--f-impact); font-size:2.4rem;
  line-height:1; color:#F5F3F1; font-variant-numeric:tabular-nums;
}
.abas__cartao-baixo{
  display:block; font-size:var(--fs-xs); color:#A9A6A2; margin-top:4px;
}
.abas__barra{
  height:5px; margin-top:var(--space-4); border-radius:3px;
  background:rgba(255,255,255,.1); overflow:hidden;
}
.abas__barra i{display:block; height:100%; width:var(--p,50%); background:var(--grad-cta); border-radius:3px}
.abas__lista{list-style:none; padding:0; margin:var(--space-2) 0 0; display:grid; gap:10px}
.abas__lista li{
  display:flex; align-items:center; gap:10px;
  font-size:var(--fs-sm); color:#E9E5E1;
}
.abas__lista i{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--brand-flame); box-shadow:0 0 0 3px rgba(255,63,0,.16);
}

@media (max-width:860px){
  .abas__grid{grid-template-columns:1fr; gap:var(--space-6)}
  .abas__visual{order:-1; aspect-ratio:16/10}
}
@media (max-width:520px){
  .abas__btn{padding:10px 16px; font-size:var(--fs-xs)}
}

/* movimento reduzido: nada de bola nem pílula deslizando */
@media (prefers-reduced-motion:reduce){
  .hero__cta-bola{display:none}
  .abas__pilula{transition:none}
  .hero{position:relative}
}

/* Se o SplitText ainda assim envolver o <em>, o gradiente segue nos filhos */
.hero__title em,
.hero__title em > div,
.cta__title em,
.cta__title em > div{
  background:var(--grad-brand);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}

/* ══════════════════════════════════════════════════════════════
   25. HEADER EM DUAS CAMADAS + HERO MINIMALISTA
   ══════════════════════════════════════════════════════════════ */

/* ── Header da primeira página ──
   Mora dentro do hero, então é coberto junto com ela. Sem fundo, com mais
   respiro: é a versão "de apresentação" da marca. */
.hero__nav{
  position:absolute; inset:0 0 auto; z-index:5;
  padding-top:clamp(20px,2.6vw,34px);
}
.hero__nav-inner{
  display:flex; align-items:center; gap:var(--space-6);
}
.hero__brand{display:flex; align-items:center; flex:none; min-height:44px; padding-block:10px}
.hero__brand img{width:auto; height:27px}
.hero__links{display:flex; align-items:center; gap:6px; margin-inline:auto}
.hero__links a{
  padding:10px 15px; font-size:var(--fs-sm); font-weight:400;
  color:var(--tx-on-dark-mute); text-decoration:none; border-radius:var(--r-pill);
  transition:color var(--t-fast), background-color var(--t-fast);
}
.hero__links a:hover{color:#fff; background:rgba(255,255,255,.07)}

/* ── Header flutuante ──
   Só entra em cena depois que a segunda página cobre a primeira.
   Menor, centralizado e com fundo: a versão "de trabalho". */
/* Estado escondido já na primeira pintura e SEM transição: assim o header
   flutuante não pisca ao carregar. A transição entra depois, com .pronto. */
.nav-wrap{opacity:0; transform:translateY(-14px); pointer-events:none}
.nav-wrap.pronto{
  transition:opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.nav-wrap.is-scrolled{opacity:1; transform:none; pointer-events:auto}
.nav-wrap.is-scrolled .nav{pointer-events:auto}
.nav-wrap .nav{
  width:max-content; max-width:100%;
  height:54px; padding:0 8px 0 16px; gap:var(--space-4);
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-color:rgba(255,255,255,.13);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.9);
}
.nav-wrap .nav__brand img{height:19px}
.nav-wrap .nav__links a{padding:8px 12px; font-size:var(--fs-xs)}
.nav-wrap .nav__actions .btn{font-size:var(--fs-xs); padding:9px 15px; min-height:38px}
.nav-wrap .nav__links{margin-inline:0}

/* ── Hero mais enxuto ── */
.hero{min-height:100svh; padding-block:calc(var(--nav-h) + clamp(48px,8vw,96px)) clamp(40px,6vw,72px)}
.hero__title{max-width:16ch; letter-spacing:-.03em}
.hero__sub{font-size:var(--fs-base); max-width:52ch; margin-bottom:var(--space-6)}
.hero::after{background:radial-gradient(ellipse 58% 44% at 50% 44%,
  rgba(8,8,10,.78) 0%, rgba(8,8,10,.4) 46%, transparent 72%)}

/* ── Faixa de ferramentas (parada, sem rolagem lateral) ── */
.ferramentas{
  margin-top:clamp(40px,6vw,72px);
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--border);
  text-align:center;
}
.ferramentas__rotulo{
  display:block; margin-bottom:var(--space-5);
  font-family:var(--f-mono); font-size:var(--fs-xs);
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
}
.ferramentas__lista{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(16px,2.6vw,36px);
}
.ferramentas__lista li{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-display); font-size:var(--fs-sm); font-weight:500;
  color:var(--text-mute);
}
.ferramentas__lista img{width:26px; height:26px}

@media (max-width:1024px){
  .hero__links{display:none}
  .hero__nav-inner .btn--primary{margin-left:auto}
}
@media (max-width:768px){
  .hero__nav{padding-top:14px}
  .hero__brand img{height:20px}
  .hero__nav-inner .btn--primary{font-size:var(--fs-xs); padding:9px 14px; min-height:38px}
  .ferramentas__lista{gap:14px}
  .ferramentas__lista li{font-size:var(--fs-xs)}
  .ferramentas__lista img{width:22px; height:22px}
}

/* ── Bola que se abre nas duas abas ── */
.abas__botoes{position:relative}
.abas__bola{
  position:absolute; left:50%; top:50%;
  width:54px; height:54px; margin-top:-27px; margin-left:-27px;
  border-radius:999px;           /* pílula desde o início: ao alargar, as
                                    pontas continuam redondas */
  background:#14120F;
  opacity:0; pointer-events:none; z-index:3;
}
@media (prefers-reduced-motion:reduce){ .abas__bola{display:none} }

/* ── Legibilidade sobre o fundo vivo ──
   Quando a faixa clara do gradiente passa atrás do título, o vinho do degradê
   da marca some no laranja. No hero com fundo vivo o degradê começa num
   vermelho mais claro e todo texto ganha uma sombra larga e suave. */
.hero--velaris .hero__title em,
.hero--velaris .hero__title em > div{
  background:linear-gradient(100deg, #FF4D2E 0%, #FF7A1A 50%, #FFC23D 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero--velaris .hero__title em{filter:drop-shadow(0 2px 10px rgba(0,0,0,.35))}
.hero--velaris .hero__title,
.hero--velaris .hero__sub,
.hero--velaris .hero__note,
.hero--velaris .hero__links a,
.hero--velaris .eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.55)}
.hero--velaris .hero__sub{color:#D9D5D0}
.hero--velaris .hero__note{color:#C4BFB9}
.hero--velaris .hero__cta .btn--primary{box-shadow:0 14px 34px -10px rgba(0,0,0,.55), var(--shadow-glow)}
@media (max-width:620px){
  /* em pé a vinheta é larga e baixa, para não desenhar um oval em volta do texto */
  .hero--velaris::after{
    background:radial-gradient(ellipse 95% 34% at 50% 44%,
      rgba(0,0,0,.5) 0%, rgba(0,0,0,.22) 60%, transparent 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
   26. VITRINE: onde o anúncio aparece (Instagram, Facebook, Google)
   ══════════════════════════════════════════════════════════════
   Os celulares são desenhados em "em": a fonte do celular manda no tamanho
   de tudo lá dentro, então encolher o aparelho no mobile é só mudar a fonte
   (4cqi = 4% da largura da coluna, via container query). */
.vitrine{
  position:relative;
  display:grid; grid-template-columns:repeat(2, minmax(0,236px)) minmax(0,1fr);
  gap:clamp(18px,2.4vw,30px); align-items:start; justify-content:center;
  width:min(1160px, calc(100vw - 32px));
  margin:0 0 clamp(36px,5vw,56px) calc(50% - min(580px, 50vw - 16px));
  padding:clamp(34px,4vw,48px) clamp(16px,3vw,44px) clamp(22px,3vw,34px);
  border-radius:var(--r-xl);
  background:
    radial-gradient(55% 70% at 12% 0%, rgba(255,140,40,.16), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(66,133,244,.09), transparent 70%),
    #F3EFEA;
  border:1px solid rgba(20,18,15,.07);
}
.vitrine__sprite{position:absolute; width:0; height:0; overflow:hidden}
.vitrine svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.vitrine svg .cheio{fill:currentColor; stroke:none}
.vitrine__item{
  position:relative; margin:0; min-width:0;
  display:flex; flex-direction:column; align-items:center;
  container-type:inline-size;
}
.vitrine__item figcaption{
  margin-top:18px; max-width:30ch; text-align:center;
  font-size:var(--fs-sm); line-height:1.5; color:var(--text-mute);
}
.vitrine__item figcaption b{
  display:block; margin-bottom:3px;
  font-family:var(--f-display); font-weight:600; color:var(--text);
}
.vitrine__selo{
  position:absolute; top:-13px; left:50%; z-index:6; translate:-50% 0;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px 7px 11px; border-radius:999px;
  background:#14120F; color:#fff; white-space:nowrap;
  font:600 12px/1 var(--f-display); letter-spacing:.01em;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
}
.vitrine__selo i{
  width:7px; height:7px; border-radius:50%; background:var(--brand-flame);
  box-shadow:0 0 0 3px rgba(255,63,0,.25);
  animation:selo-pulso 1.6s ease-in-out infinite;
}
@keyframes selo-pulso{50%{box-shadow:0 0 0 6px rgba(255,63,0,0)}}
.vitrine__anel{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  border:2px solid var(--brand-flame); border-radius:inherit;
  box-shadow:0 0 0 4px rgba(255,90,10,.14);
}
.vitrine.is-parada *,
.vitrine.is-parada *::before,
.vitrine.is-parada *::after{animation-play-state:paused !important}

/* ── Celular ── */
.fone{
  width:100%; max-width:236px; aspect-ratio:236/486;
  font-size:9.44px; font-size:min(9.44px, 4cqi);
  padding:.55em; border-radius:3.7em;
  background:linear-gradient(150deg,#34343A 0%,#0B0B0D 38%,#1C1C20 100%);
  box-shadow:
    inset 0 0 0 .14em #45454B,
    0 34px 60px -26px rgba(20,18,15,.5),
    0 12px 26px -14px rgba(20,18,15,.35);
}
.fone__tela{
  position:relative; height:100%; overflow:hidden; isolation:isolate;
  border-radius:3.15em; background:#000;
  -webkit-mask-image:-webkit-radial-gradient(white, black);
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.fone__ilha{
  position:absolute; top:.85em; left:50%; z-index:9;
  width:7.4em; height:2.15em; margin-left:-3.7em;
  border-radius:2em; background:#000;
}
.fone__status{
  position:absolute; top:0; left:0; right:0; z-index:8; height:3.9em;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2.4em 0 2.8em; color:#fff;
  font-size:1em; font-weight:600;
}
.fone__status > span:first-child{font-size:1.3em}
.fone__icones{display:flex; align-items:center; gap:.45em}
.fone__sinal{
  width:1.6em; height:1em;
  background:
    linear-gradient(currentColor,currentColor) 0 100%/.28em 35% no-repeat,
    linear-gradient(currentColor,currentColor) 33% 100%/.28em 55% no-repeat,
    linear-gradient(currentColor,currentColor) 66% 100%/.28em 78% no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/.28em 100% no-repeat;
}
.fone__bateria{
  position:relative; width:2.3em; height:1.1em; border-radius:.3em;
  border:.12em solid currentColor; opacity:.95;
}
.fone__bateria::after{content:''; position:absolute; inset:.12em 30% .12em .12em; border-radius:.12em; background:currentColor}

/* ── Instagram Reels ── */
.ig{color:#fff}
.ig__topo{
  position:absolute; top:4.2em; left:1.6em; right:1.6em; z-index:5;
  display:flex; align-items:center; justify-content:space-between;
}
.ig__topo b{font-size:2em; font-weight:700; letter-spacing:-.02em}
.ig__topo svg{width:2.3em; height:2.3em}
.ig__pilha{position:absolute; inset:0; transform:translateY(-200%)}
.reel{position:absolute; left:0; right:0; height:100%; overflow:hidden}
.reel:nth-child(2){top:100%}
.reel:nth-child(3){top:200%}
.reel:nth-child(4){top:300%}
.reel::after{
  content:''; position:absolute; inset:auto 0 0; height:48%; z-index:1;
  background:linear-gradient(transparent, rgba(0,0,0,.62));
}
.reel::before{
  content:''; position:absolute; inset:0 0 auto; height:22%; z-index:1;
  background:linear-gradient(rgba(0,0,0,.35), transparent);
}
.reel__cena{position:absolute; inset:0; animation:cena-kb 9s ease-in-out infinite alternate}
@keyframes cena-kb{to{transform:scale(1.08) translateY(-1.5%)}}
.reel__acoes{
  position:absolute; right:.9em; bottom:6.6em; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:1.35em;
}
.reel__acoes span{display:flex; flex-direction:column; align-items:center; gap:.3em; font-size:.95em; font-weight:600}
.reel__acoes svg{width:2.5em; height:2.5em; stroke-width:1.8}
.reel__info{position:absolute; left:1.3em; right:5.4em; bottom:2.4em; z-index:2}
.reel--anuncio .reel__info{bottom:6.4em}
.reel__perfil{display:flex; align-items:center; gap:.7em; margin-bottom:.7em}
.reel__perfil b{font-size:1.15em; font-weight:600}
.reel__perfil em{
  font-style:normal; font-size:.95em; font-weight:600;
  padding:.3em .8em; border-radius:.6em; border:.1em solid rgba(255,255,255,.7);
}
.reel__avatar{
  flex:none; width:2.8em; height:2.8em; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff4 0 20%, transparent 21%), var(--c,#888);
  box-shadow:0 0 0 .14em #fff;
}
.reel__avatar--marca,.post__avatar--marca{
  display:grid; place-items:center; font-style:normal;
  background:linear-gradient(145deg,#39C3DF,#0A7C95); color:#fff;
  font-weight:700; font-size:1em; letter-spacing:-.02em;
}
.reel__nome{display:flex; flex-direction:column; line-height:1.15}
.reel__patro{font-size:.95em; opacity:.9}
.reel__info p{
  margin:0 0 .45em; font-size:1.1em; line-height:1.3;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reel__info small{display:flex; align-items:center; gap:.4em; font-size:.95em; opacity:.9}
.reel__info small svg{width:1.1em; height:1.1em}
.reel__progresso{position:absolute; left:0; right:0; bottom:0; z-index:3; height:.26em; background:rgba(255,255,255,.25)}
.reel__progresso i{display:block; height:100%; background:#fff; transform-origin:left; transform:scaleX(0)}
.reel__cta{
  position:absolute; left:1.2em; right:1.2em; bottom:1.7em; z-index:3;
  display:flex; align-items:center; gap:.6em;
  height:3.4em; padding:0 1em; border-radius:.8em;
  background:#1FAF5A; color:#fff; font-size:1.1em; font-weight:600;
}
.reel__cta svg{width:1.4em; height:1.4em}
.reel__cta-seta{margin-left:auto}
.ig__toque{
  position:absolute; left:50%; top:66%; z-index:7;
  width:3.4em; height:3.4em; margin:-1.7em 0 0 -1.7em; border-radius:50%;
  background:rgba(255,255,255,.34); border:.12em solid rgba(255,255,255,.75);
  opacity:0; pointer-events:none;
}

/* cenas dos vídeos: ilustração em CSS, sem arquivo de vídeo */
.cena--praia{
  background:linear-gradient(180deg,#2A1B4D 0%,#7B3563 24%,#E0626A 42%,#FF9A5A 53%,#FFC98A 60%,#FFD9A0 61%);
}
.cena--praia::before{
  content:''; position:absolute; left:50%; top:49%;
  width:9em; height:9em; margin-left:-4.5em; border-radius:50%;
  background:radial-gradient(circle,#FFF1CF 0 42%, rgba(255,210,140,.55) 58%, transparent 71%);
}
.cena--praia::after{
  content:''; position:absolute; left:0; right:0; top:61%; bottom:0;
  background:
    radial-gradient(28% 70% at 50% 0%, rgba(255,180,110,.55), transparent 70%),
    repeating-linear-gradient(180deg, rgba(255,200,140,.16) 0 .16em, transparent .16em 1.05em),
    linear-gradient(#2E4B70,#101E36);
}
.cena--cidade{background:linear-gradient(180deg,#070B24 0%,#18204F 42%,#4E3674 68%,#B8527A 100%)}
.cena--cidade::before{
  content:''; position:absolute; right:22%; top:16%;
  width:3.4em; height:3.4em; border-radius:50%;
  background:#F4EBD8; box-shadow:0 0 3em .6em rgba(244,235,216,.35);
}
.cena--cidade::after{
  content:''; position:absolute; left:-4%; right:-4%; bottom:0; height:56%;
  background:
    radial-gradient(circle, rgba(255,207,120,.9) 0 .13em, transparent .19em) 0 0/1.25em 1.55em,
    #0A0D20;
  clip-path:polygon(0 36%,9% 36%,9% 18%,19% 18%,19% 44%,27% 44%,27% 6%,37% 6%,37% 30%,45% 30%,45% 52%,53% 52%,53% 12%,63% 12%,63% 34%,71% 34%,71% 22%,81% 22%,81% 42%,89% 42%,89% 28%,100% 28%,100% 100%,0 100%);
}

/* criativo do anúncio fictício */
.criativo{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:7em 2em 10em;
  background:
    radial-gradient(70% 42% at 72% 26%, rgba(255,255,255,.75), transparent 70%),
    linear-gradient(165deg,#EAFAFD 0%,#B5E9F4 46%,#3FB6D3 100%);
  color:#053F4D;
}
.criativo__tag{
  display:inline-flex; align-items:center; gap:.4em;
  margin-bottom:1.1em; padding:.55em .95em; border-radius:2em;
  background:#fff; color:#0A7C95; font-size:1em; font-weight:700;
  box-shadow:0 .4em 1.2em -.4em rgba(5,63,77,.35);
}
.criativo__tag svg{width:1.2em; height:1.2em; fill:currentColor; stroke:none}
.criativo strong{font-size:2.85em; line-height:1.02; font-weight:800; letter-spacing:-.035em}
.criativo small{margin-top:.9em; font-size:1.1em; font-weight:600; opacity:.78}

/* ── Facebook Feed ── */
.fb{background:#F0F2F5; color:#050505}
.fb .fone__status{color:#050505; background:#fff}
.fb__topo{
  position:absolute; top:3.9em; left:0; right:0; z-index:5; height:4.2em;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.1em 0 1.3em; background:#fff;
}
.fb__topo b{color:#0866FF; font-size:2.3em; font-weight:800; letter-spacing:-.055em}
.fb__icones{display:flex; gap:.6em}
.fb__icones i{display:grid; place-items:center; width:2.9em; height:2.9em; border-radius:50%; background:#E4E6EB}
.fb__icones svg{width:1.45em; height:1.45em; stroke-width:2.2}
.fb__abas{
  position:absolute; top:8.1em; left:0; right:0; z-index:5; height:3.6em;
  display:flex; align-items:stretch; justify-content:space-around;
  background:#fff; border-bottom:.1em solid #E4E6EB; color:#65676B;
}
.fb__abas i{display:grid; place-items:center; flex:1; border-bottom:.25em solid transparent}
.fb__abas i.is-on{color:#0866FF; border-bottom-color:#0866FF}
.fb__abas svg{width:1.8em; height:1.8em}
.fb__rolagem{position:absolute; top:11.7em; left:0; right:0; bottom:0; overflow:hidden}
.fb__feed{--rolar:0; position:relative; transform:translateY(calc(var(--rolar) * -1em)); will-change:transform}
.fb__stories{display:flex; gap:.6em; padding:1em; margin-bottom:.8em; background:#fff}
.fb__stories span{
  position:relative; flex:1; height:12.5em; border-radius:1em;
  background:linear-gradient(170deg,var(--a),var(--b));
}
.fb__stories span::before{
  content:''; position:absolute; top:.7em; left:.7em;
  width:2.4em; height:2.4em; border-radius:50%;
  background:#fff8; box-shadow:0 0 0 .22em #0866FF;
}
.post{position:relative; margin-bottom:.8em; padding-top:1.1em; background:#fff}
.post__topo{display:flex; align-items:center; gap:.8em; padding:0 1.2em}
.post__avatar{flex:none; width:3.4em; height:3.4em; border-radius:50%; background:var(--c,#999)}
.post__avatar.post__avatar--marca{background:linear-gradient(145deg,#39C3DF,#0A7C95)}
.post__topo > span{display:flex; flex-direction:column; min-width:0}
.post__topo b{font-size:1.2em; font-weight:600}
.post__topo small{display:flex; align-items:center; gap:.3em; font-size:1em; color:#65676B}
.post__topo small svg{width:1em; height:1em}
.post__mais{margin-left:auto; color:#65676B}
.post__mais svg{width:2em; height:2em}
.post__texto{margin:.75em 0 .8em; padding:0 1em; font-size:1.2em; line-height:1.35}
.post__midia{position:relative; height:19em; overflow:hidden}
.midia--cachoeira{
  background:
    linear-gradient(90deg, transparent 38%, rgba(255,255,255,.85) 44%, rgba(220,245,255,.95) 50%, rgba(255,255,255,.8) 56%, transparent 62%) 0 0/100% 72% no-repeat,
    radial-gradient(60% 30% at 50% 78%, rgba(255,255,255,.7), transparent 70%),
    linear-gradient(180deg,#8FD0C2 0%,#3E8E6B 38%,#1F5B45 72%,#2E6F8E 100%);
}
.midia--tarde{background:linear-gradient(160deg,#FFD6A5,#FF9F80 45%,#8E5CC9)}
.reel .criativo{justify-content:flex-start; padding:10.6em 5.2em 10em 1.8em}
.reel .criativo strong{font-size:2.6em}
.post .criativo{position:relative; inset:auto; height:16.5em; padding:1.6em 1.7em}
.post .criativo strong{font-size:2.5em}
.post__reacoes{display:flex; align-items:center; gap:.45em; padding:.85em 1.2em; font-size:1em; color:#65676B}
.post__icones{display:flex}
.post__icones i{display:grid; place-items:center; width:1.6em; height:1.6em; border-radius:50%; color:#fff; box-shadow:0 0 0 .14em #fff}
.post__icones i + i{margin-left:-.3em}
.post__icones svg{width:.95em; height:.95em; fill:currentColor; stroke-width:1}
.r-curtir{background:#1877F2}
.r-amei{background:#F33E58}
.post__coment{margin-left:auto}
.post__botoes{
  display:flex; justify-content:space-around;
  margin:0 1.2em; padding:.95em 0; border-top:.1em solid #E4E6EB;
  font-size:1.05em; font-weight:600; color:#65676B;
}
.post__cta{
  display:flex; align-items:center; justify-content:space-between; gap:.8em;
  padding:1em 1.2em; background:#F0F2F5;
}
.post__cta > span{display:flex; flex-direction:column; min-width:0}
.post__cta small{font-size:.9em; color:#65676B; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.post__cta b{font-size:1.1em; font-weight:600; white-space:nowrap}
.post__botao{
  flex:none; display:inline-flex; align-items:center; gap:.4em;
  padding:.75em 1em; border-radius:.6em;
  background:#E4E6EB; color:#050505; font-style:normal; font-size:1em; font-weight:600;
}
.post__botao svg{width:1.25em; height:1.25em; color:#1FAF5A}
.post--anuncio .vitrine__anel{border-radius:0}

/* ── Navegador com o Google ── */
.navegador{
  width:100%; height:486px; overflow:hidden;
  display:flex; flex-direction:column;
  border-radius:16px; background:#fff; color:#202124;
  border:1px solid rgba(20,18,15,.08);
  box-shadow:0 34px 60px -28px rgba(20,18,15,.45), 0 12px 26px -16px rgba(20,18,15,.3);
  font-family:Arial, 'Helvetica Neue', Helvetica, sans-serif;
}
.navegador__barra{
  flex:none; height:42px; display:flex; align-items:center; gap:14px;
  padding:0 14px; background:#F1F3F4; border-bottom:1px solid #E3E5E8;
}
.navegador__bolinhas{display:flex; gap:6px}
.navegador__bolinhas i{width:11px; height:11px; border-radius:50%; background:#FF5F57}
.navegador__bolinhas i:nth-child(2){background:#FEBC2E}
.navegador__bolinhas i:nth-child(3){background:#28C840}
.navegador__url{
  flex:1; min-width:0; height:27px; display:flex; align-items:center; gap:7px;
  padding:0 12px; border-radius:14px; background:#fff;
  font-size:12.5px; color:#5F6368;
}
.navegador__url svg{flex:none; width:12px; height:12px}
.navegador__url span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g{position:relative; flex:1; overflow:hidden}
.g__carga{
  position:absolute; top:0; left:0; right:0; z-index:4; height:3px;
  background:#1A73E8; transform-origin:left; transform:scaleX(0);
}
.g__logo{font:500 46px/1 'Space Grotesk', Arial, sans-serif; letter-spacing:-.03em}
.g__logo span:nth-child(1),.g__logo span:nth-child(4){color:#4285F4}
.g__logo span:nth-child(2),.g__logo span:nth-child(6){color:#EA4335}
.g__logo span:nth-child(3){color:#FBBC05}
.g__logo span:nth-child(5){color:#34A853}
.g__logo--p{flex:none; font-size:22px}
.g__home{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px;
  padding:24px; background:#fff;
  opacity:0; visibility:hidden;
}
.g__busca{
  display:flex; align-items:center; gap:10px;
  width:min(100%,430px); height:46px; padding:0 18px;
  border:1px solid #DFE1E5; border-radius:23px;
  box-shadow:0 1px 6px rgba(32,33,36,.2);
  font-size:15px; color:#202124;
}
.g__busca svg{flex:none; width:17px; height:17px; color:#9AA0A6}
.g__texto{white-space:pre}
.g__cursor{width:1.5px; height:19px; margin-left:-8px; background:#202124; animation:g-cursor 1s steps(1) infinite}
@keyframes g-cursor{50%{opacity:0}}
.g__mic{margin-left:auto; color:#4285F4 !important}
.g__botoes{display:flex; gap:10px}
.g__botoes span{padding:10px 15px; border-radius:4px; background:#F8F9FA; font-size:13px; color:#3C4043}
.g__res{position:absolute; inset:0; display:flex; flex-direction:column}
.g__res-topo{display:flex; align-items:center; gap:16px; padding:16px 20px 12px}
.g__busca--p{flex:1; min-width:0; width:auto; height:38px; justify-content:space-between; padding:0 14px 0 18px; font-size:13.5px}
.g__busca--p span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g__filtros{
  display:flex; gap:18px; padding:0 20px 0 58px;
  border-bottom:1px solid #EBEBEB; font-size:12.5px; color:#5F6368;
  white-space:nowrap; overflow:hidden;
}
.g__filtros span{padding:9px 0 8px; border-bottom:3px solid transparent}
.g__filtros .is-on{color:#1A73E8; border-bottom-color:#1A73E8}
.g__lista{display:flex; flex-direction:column; gap:22px; padding:18px 20px 0 58px}
.g__anuncio{position:relative; margin:-12px -14px; padding:12px 14px; border-radius:12px}
.g__patro{display:block; margin-bottom:9px; font-size:12.5px; font-weight:700}
.g__fonte{display:flex; align-items:center; gap:10px; margin-bottom:7px}
.g__fav{
  flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%;
  background:#E7F6FA; border:1px solid #D2E3FC; color:#0A7C95;
  font-style:normal; font-size:10px; font-weight:700;
}
.g__fonte > span{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.g__fonte > span > span{font-size:13.5px}
.g__fonte small{font-size:11.5px; color:#4D5156; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.g__anuncio h4{margin:0 0 5px; font:400 19px/1.3 Arial, sans-serif; color:#1A0DAB; letter-spacing:0}
.g__anuncio p{margin:0; font-size:13.5px; line-height:1.58; color:#4D5156; text-align:left}
.g__sitelinks{display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:9px}
.g__sitelinks span{font-size:13.5px; color:#1A0DAB}
.g__organico{display:grid; gap:8px}
.g__organico i{height:9px; border-radius:5px; background:#ECEDEF}
.g__organico i:nth-child(1){width:34%}
.g__organico i:nth-child(2){width:68%; height:14px; background:#E4E7F4}
.g__organico i:nth-child(3){width:96%}
.g__organico i:nth-child(4){width:80%}

/* ── Texto da aba abaixo da vitrine ── */
.abas__texto--colunas{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px)}
.abas__texto--colunas p{margin-bottom:0}

@media (max-width:980px){
  .vitrine{grid-template-columns:repeat(2, minmax(0,236px))}
  .vitrine__item--google{grid-column:1/-1; width:100%; max-width:560px; justify-self:center; margin-top:14px}
  .abas__texto--colunas{grid-template-columns:1fr}
}
@media (max-width:620px){
  .vitrine{grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px 12px; padding-inline:12px}
  .vitrine__selo{font-size:10px; padding:6px 10px 6px 8px; top:-11px}
  .vitrine__item figcaption{font-size:var(--fs-xs); margin-top:14px}
  .navegador{height:420px}
  .g__logo{font-size:38px}
  .g__home{gap:18px; padding:18px}
  .g__botoes{display:none}
  .g__res-topo{padding:14px 14px 10px; gap:12px}
  .g__filtros{padding-left:14px}
  .g__lista{padding:16px 14px 0}
  .g__anuncio h4{font-size:17px}
}

/* ══════════════════════════════════════════════════════════════
   27. TEXTO NÃO SELECIONÁVEL
   ══════════════════════════════════════════════════════════════
   Campos do formulário continuam editáveis. Não é proteção de verdade
   (o código-fonte segue público), só tira o copiar e colar do caminho. */
body{-webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
input, textarea, select, [contenteditable]{-webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
img{-webkit-user-drag:none}

/* ══════════════════════════════════════════════════════════════
   28. DENSIDADE: cada rolada mostra uma seção inteira
   ══════════════════════════════════════════════════════════════
   Os tamanhos passaram a considerar também a ALTURA da tela (vh/svh):
   num notebook de 13" o título, o texto e os cards de uma seção cabem
   juntos, em vez de o título ocupar a tela e o conteúdo ficar abaixo. */
.section{padding-block:clamp(48px,9vh,96px)}
.section--light + .section--light,
.section--dark  + .section--dark{padding-top:clamp(20px,3.5vh,40px)}
.sec-head{margin-bottom:clamp(22px,4vh,40px)}
.sec-title{font-size:clamp(1.55rem, 1.05rem + 1.7vw, 2.45rem); line-height:1.12; margin-bottom:var(--space-3)}
.sec-lead{font-size:var(--fs-base); line-height:1.6}
.eyebrow{margin-bottom:var(--space-3)}

/* menu com links a partir de 900px (antes sumia abaixo de 1024) */
@media (min-width:901px) and (max-width:1024px){
  .nav__links{display:flex}
  .nav__toggle{display:none}
  .nav__links a{padding:8px 10px}
  .hero__links{display:flex}
  .hero__links a{padding:9px 10px}
}

/* ── segunda página ── */
.explica{padding-top:clamp(36px,6vh,72px)}
.abas__botoes{margin-bottom:clamp(16px,3vh,30px)}
.abas__titulo{font-size:clamp(1.4rem, 1rem + 1.5vw, 2.1rem); max-width:30ch; margin-bottom:clamp(16px,3vh,30px)}
.vitrine{
  --fone-h:clamp(290px, calc(100svh - 250px), 470px);
  grid-template-columns:repeat(2, minmax(0, calc(var(--fone-h) * .4856))) minmax(0,1fr);
  padding:clamp(26px,4vh,40px) clamp(16px,3vw,36px) clamp(16px,2.5vh,26px);
  margin-bottom:clamp(24px,4vh,40px);
}
.fone{
  max-width:none;
  width:min(100%, calc(var(--fone-h) * .4856));
  font-size:calc(min(100cqi, var(--fone-h) * .4856) / 25);
}
.navegador{height:var(--fone-h)}
.vitrine__item figcaption{margin-top:12px; font-size:13.5px}
.abas__texto p{font-size:15.5px}
.ferramentas{margin-top:clamp(24px,4vh,44px); padding-top:clamp(20px,3vh,32px)}
.ferramentas__rotulo{margin-bottom:var(--space-4)}
.ferramentas__extra{
  list-style:none; padding:0; margin:var(--space-4) 0 0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.ferramentas__extra li{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:var(--r-pill);
  background:#fff; border:1px solid rgba(20,18,15,.1);
  font-family:var(--f-display); font-size:13px; font-weight:500; color:var(--text);
}
.ferramentas__extra li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--brand-flame)}
.ferramentas__extra li:last-child{background:none; border-style:dashed; color:var(--text-mute)}
.ferramentas__nota{margin:var(--space-3) auto 0; max-width:60ch; font-size:13.5px; color:var(--text-mute); text-align:center}

/* ── problema / solução / entregáveis: 4 colunas e cards mais enxutos ── */
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{padding:clamp(18px,2.4vh,24px) clamp(16px,1.6vw,22px)}
.card h3{font-size:var(--fs-lg); margin-bottom:var(--space-2)}
.card p{font-size:14.5px; line-height:1.55}
.pillars{grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4)}
.pillar{padding:clamp(18px,2.4vh,24px) clamp(16px,1.6vw,22px)}
.pillar__icon img{width:36px; height:36px}
.pillar h3{font-size:var(--fs-base)}
.pillar p{font-size:14.5px; line-height:1.55}
.bento{grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:dense; gap:var(--space-3)}
.bento__item{padding:clamp(16px,2.2vh,22px) clamp(16px,1.6vw,22px); gap:var(--space-2)}
.bento__item img{width:32px; height:32px}
.bento__item h3{font-size:var(--fs-base)}
.bento__item p{font-size:14.5px; line-height:1.55}

/* ── processo: etapas lado a lado, a linha corre da esquerda para a direita ── */
.steps{--gap:clamp(16px,2.4vw,32px)}
.steps__progress{transform:scaleY(var(--p,0))}
.step p{font-size:14.5px; line-height:1.6}
.step__time{margin-top:var(--space-2)}
@media (min-width:901px){
  .steps{
    grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap);
    max-width:none; padding:46px 0 0;
  }
  .steps__rail{
    left:14px; right:calc((100% - 3 * var(--gap)) / 4 - 14px);
    top:13px; bottom:auto; width:auto; height:2px;
  }
  .steps__progress{transform-origin:left; transform:scaleX(var(--p,0))}
  .step{padding-bottom:0}
  .step__dot{left:0; top:-46px}
  .step h3{font-size:var(--fs-lg)}
}

/* ── mapa do Brasil ── */
.alcance__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,64px); align-items:center;
}
.alcance .sec-head{margin-bottom:clamp(18px,3vh,28px)}
.alcance .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:0}
.alcance .stat{padding:14px 16px; text-align:left}
.alcance .stat__num{font-size:clamp(1.9rem,3.2vw,2.7rem); margin-bottom:4px}
.alcance .stat__label{font-size:13px}
.mapa-wrap{margin:0; display:flex; flex-direction:column; align-items:center}
.mapa{position:relative; width:min(100%, calc(100svh - 150px), 540px); aspect-ratio:1}
.mapa::before{
  content:''; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,100,20,.16), transparent 68%);
}
/* margem interna: o litoral do Nordeste encosta na borda do quadro de dados */
.mapa canvas{position:absolute; inset:5%; width:90%; height:90%}
.mapa__pings{position:absolute; inset:5%}
.mapa__nota{margin-top:8px; font-family:var(--f-mono); font-size:11px; color:var(--tx-on-dark-dim); text-align:center}
.ping{position:absolute; width:0; height:0; z-index:2}
.ping__ponto{
  position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--brand-flame); box-shadow:0 0 12px 2px rgba(255,90,10,.6);
  opacity:0; scale:.3; transition:opacity 300ms var(--ease-out), scale 300ms var(--ease-out);
}
.ping__ponto::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(255,110,20,.75);
  animation:ping-onda 1.5s ease-out infinite;
}
@keyframes ping-onda{from{scale:.4; opacity:1} to{scale:1.6; opacity:0}}
.ping__cartao{
  position:absolute; bottom:12px; left:0; translate:-50% 0;
  display:flex; flex-direction:column; gap:2px;
  padding:7px 11px; border-radius:10px; white-space:nowrap;
  background:rgba(14,13,16,.93);
  border:1px solid rgba(255,140,40,.42);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.9);
  opacity:0; transform:translateY(6px);
  transition:opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.ping--dir .ping__cartao{translate:-88% 0}
.ping--esq .ping__cartao{translate:-12% 0}
.ping--baixo .ping__cartao{bottom:auto; top:12px; transform:translateY(-6px)}
.ping.is-on .ping__ponto{opacity:1; scale:1}
.ping.is-on .ping__cartao{opacity:1; transform:none}
.ping__cartao b{font-family:var(--f-display); font-size:12.5px; font-weight:600; color:#F5F3F1}
.ping__cartao small{
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-amber);
}
.ping__cartao small i{width:6px; height:6px; border-radius:50%; background:#3DDC84; box-shadow:0 0 0 3px rgba(61,220,132,.2)}

/* ── sobre: foto limitada pela altura da tela ── */
.sobre__media{width:min(100%, calc(100svh - 190px)); margin-inline:auto}
.sobre__text p{font-size:15.5px}

/* ── FAQ ── */
.faq__body p{font-size:15px}

/* ── CTA final: formulário em duas colunas ── */
.cta{padding-block:clamp(56px,9vh,96px) clamp(64px,11vh,130px)}
.cta__title{font-size:clamp(1.7rem, 1.1rem + 2vw, 2.7rem)}
.cta__lead{font-size:var(--fs-base); margin-bottom:var(--space-5)}
.formcard{padding:clamp(20px,3vh,30px)}
/* formulário em coluna única, como era antes */
.form{gap:14px}

@media (min-width:901px) and (max-width:1024px){
  .sobre__grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(28px,4vw,48px)}
  .sobre__media{max-width:none}
  .faq__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1fr)}
  .cta__inner{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
}
/* problema: título e texto lado a lado, os cards sobem para a mesma tela */
@media (min-width:901px){
  .problema .sec-head{
    max-width:none; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(28px,4vw,56px); align-items:end;
  }
  .problema .sec-head .eyebrow{grid-column:1/-1}
  .problema .sec-head .sec-title{margin-bottom:0}
  .problema .sec-head .sec-lead{max-width:none}
  /* entregáveis em duas fileiras de quatro: só o primeiro card é largo */
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento__item--wide:not(:first-child){grid-column:span 1}
}
.sobre__list{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px}
@media (max-width:900px){
  .cards--4,.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .alcance__grid{grid-template-columns:1fr}
  .mapa{width:min(100%, 440px)}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .vitrine{grid-template-columns:repeat(2,minmax(0,1fr))}
  .navegador{height:min(var(--fone-h), 420px)}
  .cards--4,.pillars,.bento{grid-template-columns:1fr}
  .bento__item--wide{grid-column:auto}
  .form{grid-template-columns:1fr}
  .sobre__media{width:min(100%, 440px)}
  .ping__cartao b{font-size:11.5px}
}
@media (max-width:620px){ .sobre__list{grid-template-columns:1fr} }

/* ── Processo: a luz continua percorrendo a linha depois de preencher ── */
.steps__progress{position:relative}
.steps__progress::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.9) 45%, transparent 90%);
  animation:trilho-brilho 2.6s linear infinite;
}
@keyframes trilho-brilho{from{transform:translateY(-100%)} to{transform:translateY(100%)}}
@media (min-width:901px){
  .steps__progress::after{
    background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.9) 45%, transparent 90%);
    animation-name:trilho-brilho-h;
  }
}
@keyframes trilho-brilho-h{from{transform:translateX(-100%)} to{transform:translateX(100%)}}

/* ── O que muda no seu negócio ── */
.objetivos__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4)}
.objetivo{
  display:grid; align-content:start; gap:10px;
  padding:clamp(18px,2.4vh,24px) clamp(16px,1.6vw,22px);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:transform var(--t-base) var(--ease-out), border-color var(--t-base);
}
.objetivo:hover{transform:translateY(-4px); border-color:rgba(255,120,30,.35)}
.objetivo img{width:34px; height:34px}
.objetivo h3{font-size:var(--fs-base); line-height:1.25}
.objetivo p{font-size:14.5px; line-height:1.55; color:var(--text-mute); text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.objetivos__nota{
  max-width:62ch; margin:clamp(20px,3vh,32px) auto 0; text-align:center;
  font-size:15px; color:var(--text-mute);
}
@media (max-width:900px){ .objetivos__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){
  .objetivos__grid{grid-template-columns:1fr}
  .objetivo p{text-align:left; hyphens:manual}
}