/* ==========================================================================
   EXPLANA — app.css  (base + componentes + seções)
   ========================================================================== */

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--c-void);color:var(--c-ink);
  font-family:var(--f-text);font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

/* ---------- blindagem contra CSS de tema/plugins (Astra, Elementor, add-ons) ----------
   Esses temas injetam cor/tamanho em h1–h4 e fundo branco no body; a folha do
   plugin carrega antes das deles. Reafirmamos tudo dentro do escopo .ewf-v2. */
html:has(body.ewf-v2){background:var(--c-void)}
body.ewf-v2{background:var(--c-void) !important}
/* seções sem modificador ficam transparentes (herdam o fundo escuro do body);
   Astra não pode pintá-las de branco */
body.ewf-v2 .section:not(.section--paper):not(.cta-final){background-color:transparent}
body.ewf-v2 .cta-final{background:var(--c-paper) !important}
body.ewf-v2 h1,body.ewf-v2 h2,body.ewf-v2 h3,body.ewf-v2 h4,
body.ewf-v2 .h1,body.ewf-v2 .h2,body.ewf-v2 .h3,body.ewf-v2 .h4{color:var(--c-ink) !important}
/* seções sobre fundo claro: reafirma tinta escura (vence o !important acima por especificidade) */
body.ewf-v2 .section--paper :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4),
body.ewf-v2 .cta-final :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4){color:var(--c-paper-ink) !important}
body.ewf-v2 .section--paper .eyebrow,body.ewf-v2 .cta-final .eyebrow{color:#7A8590 !important}
body.ewf-v2 .text-brand{color:var(--c-accent) !important}
body.ewf-v2 p{color:inherit}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--c-focus);outline-offset:3px;border-radius:2px}
::selection{background:var(--c-accent);color:#fff}
.is-lenis body{overscroll-behavior:contain}

/* ---------- layout ---------- */
.wrap{width:min(var(--container),100% - (var(--gutter) * 2));margin-inline:auto}
.wrap-wide{width:min(var(--container-wide),100% - (var(--gutter) * 2));margin-inline:auto}
.section{position:relative;padding-block:var(--section-y)}
.section--paper{background:var(--c-paper);color:var(--c-paper-ink)}
.section--surface{background:var(--c-surface)}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;
  font:600 var(--fs-eyebrow)/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-faint)}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.section--paper .eyebrow{color:#7A8590}
.display{font-family:var(--f-display);font-weight:600;line-height:var(--lh-tight);letter-spacing:var(--track-tight)}
.h1{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--track-mega)}
.h2{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:var(--track-tight)}
.h3{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:var(--track-tight)}
.lead{font-size:var(--fs-lead);color:var(--c-ink-soft);max-width:44ch}
.section--paper .lead{color:#42505C}
.muted{color:var(--c-ink-faint)}
em,.accent-serif{font-style:italic}
.text-accent{color:var(--c-accent)}
.text-brand{color:var(--c-accent)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;padding:1rem 1.5rem;border-radius:var(--r-pill);
  font:600 .95rem/1 var(--f-text);letter-spacing:.02em;white-space:nowrap;
  transition:transform var(--d-2) var(--e-out),background var(--d-2),color var(--d-2),box-shadow var(--d-2)}
.btn .arw{transition:transform var(--d-2) var(--e-out)}
.btn:hover .arw{transform:translateX(4px)}
.btn--primary{background:var(--c-accent);color:var(--c-accent-ink);font-weight:700}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(227,161,53,.5)}
.btn--ghost{border:1px solid var(--c-line-strong);color:var(--c-ink)}
.btn--ghost:hover{background:rgba(237,241,245,.06);border-color:var(--c-ink-soft)}
.section--paper .btn--ghost{border-color:var(--c-line-dark);color:var(--c-paper-ink)}
.btn--link{padding:0;border-radius:0;color:var(--c-ink-soft);font-weight:600}
.btn--link:hover{color:var(--c-ink)}
.btn--block{width:100%;justify-content:center}

/* ---------- header ---------- */
.head{position:fixed;inset:0 0 auto;z-index:var(--z-head);height:76px;
  display:flex;align-items:center;
  transition:height var(--d-3) var(--e-out),background var(--d-3),border-color var(--d-3),backdrop-filter var(--d-3)}
.head__row{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.head.is-stuck{height:60px;background:color-mix(in srgb,var(--c-void) 78%,transparent);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--c-line)}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:-.02em}
.brand b{color:var(--c-accent)}
.nav{display:flex;gap:2rem;font-size:.92rem;font-weight:500}
.nav a{position:relative;padding:.4rem 0;color:var(--c-ink-soft)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--c-accent);transition:width var(--d-2) var(--e-out)}
.nav a:hover{color:var(--c-ink)}
.nav a:hover::after{width:100%}
.head .btn--primary{padding:.7rem 1.15rem}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.burger span{width:22px;height:1.6px;background:var(--c-ink);transition:transform var(--d-2),opacity var(--d-2)}
.mnav{position:fixed;inset:0;z-index:calc(var(--z-head) - 1);background:var(--c-void);
  display:flex;flex-direction:column;justify-content:center;gap:1rem;padding:var(--gutter);
  transform:translateY(-100%);transition:transform var(--d-3) var(--e-inout);visibility:hidden}
.mnav.is-open{transform:none;visibility:visible}
.mnav a{font-family:var(--f-display);font-size:clamp(1.8rem,10vw,2.6rem);font-weight:600;letter-spacing:-.02em}
.mnav .btn{margin-top:1rem;align-self:flex-start}
body.mnav-open{overflow:hidden}

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding-top:clamp(104px,14vh,150px);padding-bottom:var(--sp-7);overflow:hidden;isolation:isolate}
.hero h1{max-width:14ch}
.stage{margin-right:clamp(0px,2vw,20px)}
.hero__bg{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 80% at 80% -10%,rgba(227,161,53,.10),transparent 60%),
    radial-gradient(80% 60% at 10% 110%,rgba(237,241,245,.06),transparent 60%),
    var(--c-void)}
.hero__grid-lines{position:absolute;inset:0;z-index:-2;opacity:.5;
  background-image:linear-gradient(var(--c-line) 1px,transparent 1px),linear-gradient(90deg,var(--c-line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(120% 90% at 60% 40%,#000 30%,transparent 78%)}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero__copy{max-width:38rem}
.hero h1{font-size:var(--fs-h1)}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line > span{display:block;will-change:transform}
.hero__support{margin-top:var(--sp-5);max-width:34rem}
.hero__cta{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center}
.hero__scroll{margin-top:var(--sp-7);display:inline-flex;align-items:center;gap:.6rem;color:var(--c-ink-faint);font-size:.85rem;font-weight:500}
.hero__scroll .dot{width:22px;height:34px;border:1px solid var(--c-line-strong);border-radius:var(--r-pill);position:relative}
.hero__scroll .dot::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;border-radius:2px;background:var(--c-accent);transform:translateX(-50%);animation:scrolldot 1.8s var(--e-inout) infinite}
@keyframes scrolldot{0%,100%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}}

/* hero composition (coded, no stock imagery) */
.stage{position:relative;height:min(64vh,620px);perspective:1400px;transform-style:preserve-3d}
.layer{position:absolute;will-change:transform}
.card-ui{background:linear-gradient(180deg,var(--c-surface-2),#0f141c);
  border:1px solid var(--c-line-strong);border-radius:var(--r-m);box-shadow:var(--shadow-float)}
.browser{left:6%;top:8%;width:80%;height:74%}
.browser__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--c-line)}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:var(--c-line-strong)}
.browser__bar .url{margin-left:12px;flex:1;height:18px;border-radius:5px;background:rgba(237,241,245,.06);position:relative}
.browser__bar .url::before{content:"explanacomunicacao.com.br";position:absolute;left:10px;top:2px;font-size:11px;color:var(--c-ink-faint)}
.browser__view{position:relative;height:calc(100% - 43px);padding:20px;overflow:hidden}
.browser__view h4{font-family:var(--f-display);font-size:1.4rem;line-height:1.05;letter-spacing:-.02em;max-width:16ch}
.browser__view .kpi{position:absolute;right:20px;top:20px;display:flex;gap:10px}
.browser__view .kpi span{padding:6px 10px;border:1px solid var(--c-line);border-radius:var(--r-s);font-size:11px;color:var(--c-ink-soft)}
.browser__chart{position:absolute;left:20px;right:20px;bottom:20px;height:44%;
  border:1px solid var(--c-line);border-radius:var(--r-s);
  background:linear-gradient(180deg,transparent,rgba(237,241,245,.05));overflow:hidden}
.browser__chart svg{position:absolute;inset:0;width:100%;height:100%}
.chip{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--c-surface-2);border:1px solid var(--c-line-strong);font-size:12px;box-shadow:var(--shadow-card);white-space:nowrap}
.chip .d{width:7px;height:7px;border-radius:50%;background:var(--c-ok)}
.chip--crm{right:-2%;top:14%}
.chip--auto{left:-4%;top:52%}
.chip--data{right:2%;bottom:8%}
.orb{width:220px;height:220px;border-radius:50%;filter:blur(30px);
  background:radial-gradient(circle at 40% 40%,rgba(227,161,53,.32),transparent 70%);left:-8%;top:-6%;z-index:-1}
.mini-metric{left:2%;bottom:-2%;padding:14px 16px;min-width:150px}
.mini-metric .n{font-family:var(--f-display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em}
.mini-metric .l{font-size:11px;color:var(--c-ink-faint);text-transform:uppercase;letter-spacing:.1em}
.hero-autofloat .layer{animation:floaty 9s ease-in-out infinite}
.hero-autofloat .chip--crm{animation-delay:-2s}
.hero-autofloat .chip--auto{animation-delay:-4s}
.hero-autofloat .chip--data{animation-delay:-6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ==========================================================================
   02 MANIFESTO (scroll-driven, pinned)
   ========================================================================== */
.manifesto{background:var(--c-void)}
/* DEFAULT = legível e empilhado (fallback é o padrão). O JS opta pela versão pin. */
.manifesto__pin{padding-block:var(--section-y);display:flex;align-items:center;justify-content:center}
.manifesto__stack{position:relative;width:min(var(--container),92vw);display:flex;flex-direction:column;gap:1rem}
.manifesto__line{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h2);line-height:1.04;letter-spacing:var(--track-mega)}
.manifesto__line--final{color:var(--c-accent)}
.manifesto__prog{display:none}
/* versão animada: JS adiciona .is-animated quando vai rodar o pin */
.manifesto.is-animated .manifesto__pin{min-height:100svh;padding-block:0;text-align:center}
.manifesto.is-animated .manifesto__stack{display:block}
.manifesto.is-animated .manifesto__line{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-mega);line-height:.98;opacity:0}
.manifesto.is-animated .manifesto__line:first-child{opacity:1}
.manifesto.is-animated .manifesto__prog{display:block;position:absolute;left:0;right:0;bottom:8vh;height:2px;background:var(--c-line);overflow:hidden}
.manifesto.is-animated .manifesto__prog i{position:absolute;inset:0;background:var(--c-accent);transform:scaleX(0);transform-origin:left}

/* ==========================================================================
   03 PROBLEMA + pipeline
   ========================================================================== */
.problem__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.problem__q{font-size:var(--fs-h2)}
.problem__body p{color:var(--c-ink-soft);max-width:46ch}
.problem__body p + p{margin-top:1rem}
.myths{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.myth{background:var(--c-surface);padding:1.6rem 1.5rem}
.myth s{color:var(--c-ink-faint);text-decoration-thickness:1px}
.myth b{display:block;margin-top:.3rem;font-weight:600;color:var(--c-ink)}
.problem__close{margin-top:var(--sp-7);font-family:var(--f-display);font-size:var(--fs-h3);max-width:24ch;letter-spacing:-.02em}
.pipeline{margin-top:var(--sp-8);position:relative}
.pipeline__track{display:flex;align-items:stretch;gap:0;border:1px solid var(--c-line);border-radius:var(--r-m);overflow:hidden}
.pipe-node{flex:1;min-width:0;padding:1.4rem 1rem;text-align:center;position:relative;border-right:1px solid var(--c-line)}
.pipe-node:last-child{border-right:0}
.pipe-node .n{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-faint)}
.pipe-node .t{margin-top:.5rem;font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.01em}
.pipe-node::after{content:"→";position:absolute;right:-9px;top:50%;transform:translateY(-50%);color:var(--c-ink-faint);z-index:1;font-size:14px}
.pipe-node:last-child::after{display:none}
.pipe-node.is-lit{background:linear-gradient(180deg,rgba(227,161,53,.12),transparent)}
.pipe-node.is-lit .t{color:var(--c-accent)}

/* ==========================================================================
   04 POSICIONAMENTO
   ========================================================================== */
.pos__grid{margin-top:var(--sp-8);border-top:1px solid var(--c-line-dark)}
.section--paper .pos__grid{border-color:var(--c-line-dark)}
.pos-row{display:grid;grid-template-columns:.5fr 1.2fr 2fr;gap:2rem;align-items:baseline;
  padding:1.9rem 0;border-bottom:1px solid var(--c-line-dark)}
.pos-row .k{font-size:12px;font-weight:600;letter-spacing:.12em;color:#7A8590}
.pos-row .name{font-family:var(--f-display);font-weight:600;font-size:var(--fs-h3);letter-spacing:-.02em}
.pos-row .desc{color:#42505C;max-width:40ch}
.pos-row.is-active .name{color:var(--c-brand-deep)}

/* ==========================================================================
   05 MÉTODO (sticky storytelling)
   ========================================================================== */
.method{background:var(--c-void)}
.method__layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,6vw,6rem);align-items:stretch}
.method__aside{align-self:stretch}
.method__sticky{position:sticky;top:clamp(96px,18vh,180px)}
.method__count{font-family:var(--f-display);font-weight:600;font-size:clamp(4rem,12vw,9rem);line-height:1;color:var(--c-accent);letter-spacing:-.04em}
.method__now{margin-top:.5rem;font-family:var(--f-display);font-size:var(--fs-h2);letter-spacing:-.02em}
.method__bar{margin-top:2rem;height:3px;background:var(--c-line);position:relative}
.method__bar i{position:absolute;inset:0;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform var(--d-3) var(--e-out)}
.method__steps{display:flex;flex-direction:column;gap:1px;background:var(--c-line);border-block:1px solid var(--c-line)}
.mstep{background:var(--c-void);padding:2.2rem 0;display:grid;grid-template-columns:56px 1fr;gap:1.5rem;transition:opacity var(--d-3)}
.method.is-guided .mstep{opacity:.4}
.method.is-guided .mstep.is-active{opacity:1}
.mstep .num{font-family:var(--f-display);font-weight:600;color:var(--c-ink-faint)}
.mstep.is-active .num{color:var(--c-accent)}
.mstep h3{font-size:var(--fs-h3)}
.mstep p{margin-top:.5rem;color:var(--c-ink-soft);max-width:44ch}

/* ==========================================================================
   06 SOLUÇÕES
   ========================================================================== */
.solutions__list{margin-top:var(--sp-8);border-top:1px solid var(--c-line)}
.sol{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;
  padding:clamp(1.8rem,4vw,3rem) 0;border-bottom:1px solid var(--c-line);transition:padding var(--d-3) var(--e-out)}
.sol .k{font-family:var(--f-display);font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--c-ink-faint);align-self:start;padding-top:.6rem}
.sol h3{font-size:var(--fs-h2);font-size:clamp(1.7rem,1rem + 3vw,3rem)}
.sol p{margin-top:.6rem;color:var(--c-ink-soft);max-width:48ch}
.sol .go{opacity:0;transform:translateX(-8px);transition:opacity var(--d-2),transform var(--d-2) var(--e-out)}
.sol:hover{padding-left:1.5rem}
.sol:hover h3{color:var(--c-accent)}
.sol:hover .go{opacity:1;transform:none}

/* ==========================================================================
   07 VITRINE (horizontal gallery)
   ========================================================================== */
.showcase{background:var(--c-void);overflow:hidden}
.showcase__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.showcase__hint{color:var(--c-ink-faint);font-size:.85rem}
.hgal{margin-top:var(--sp-7)}
.hgal__track{display:flex;gap:clamp(1.5rem,3vw,2.5rem);padding-inline:var(--gutter);will-change:transform}
.concept{flex:0 0 min(78vw,560px);position:relative}
.concept__badge{position:absolute;left:14px;top:14px;z-index:2;padding:5px 10px;border-radius:var(--r-pill);
  background:rgba(8,10,12,.7);border:1px solid var(--c-line-strong);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.concept__frame{aspect-ratio:4/3;border:1px solid var(--c-line-strong);border-radius:var(--r-m);overflow:hidden;
  background:linear-gradient(180deg,var(--c-surface-2),#0e131b);box-shadow:var(--shadow-card)}
.concept__bar{display:flex;gap:5px;padding:10px 12px;border-bottom:1px solid var(--c-line)}
.concept__bar i{width:8px;height:8px;border-radius:50%;background:var(--c-line-strong)}
.concept__mock{position:relative;height:calc(100% - 39px);padding:18px;overflow:hidden}
.concept__mock .t{font-family:var(--f-display);font-weight:600;font-size:1.1rem;letter-spacing:-.02em}
.concept__mock .rows{margin-top:14px;display:grid;gap:8px}
.concept__mock .rows i{height:12px;border-radius:4px;background:rgba(237,241,245,.07)}
.concept__mock .rows i:nth-child(2){width:80%}
.concept__mock .rows i:nth-child(3){width:60%}
.concept__mock .pill{position:absolute;right:16px;bottom:16px;padding:7px 12px;border-radius:var(--r-pill);background:var(--c-accent);color:var(--c-accent-ink);font-size:12px;font-weight:700}
.concept__meta{margin-top:1rem}
.concept__meta h3{font-family:var(--f-display);font-weight:600;font-size:1.15rem}
.concept__meta ul{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem}
.concept__meta li{font-size:11px;color:var(--c-ink-faint);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:3px 9px}

/* ==========================================================================
   08 PROJETOS REAIS
   ========================================================================== */
.projects__item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  padding-block:clamp(3rem,7vw,6rem);border-bottom:1px solid var(--c-line)}
.projects__item:nth-child(even){direction:rtl}
.projects__item:nth-child(even) > *{direction:ltr}
.projects__media{position:relative;aspect-ratio:16/11;border:1px solid var(--c-line-strong);border-radius:var(--r-m);overflow:hidden;background:var(--c-surface-2)}
.projects__media img{width:100%;height:100%;object-fit:cover;object-position:top}
.projects__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(8,10,12,.5))}
.projects__label{position:absolute;left:14px;bottom:12px;z-index:1;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.4rem;color:rgba(255,255,255,.92)}
.projects__info .k{font-family:var(--f-display);font-size:2.4rem;font-weight:600;font-style:italic;color:var(--c-accent)}
.projects__info h3{margin-top:.4rem;font-size:var(--fs-h3)}
.projects__seg{margin-top:.5rem;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--c-ink-faint)}
.projects__dl{margin-top:1.4rem;display:grid;gap:1rem;border-top:1px solid var(--c-line);padding-top:1.4rem}
.projects__dl div{display:grid;grid-template-columns:110px 1fr;gap:1rem}
.projects__dl dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink-faint)}
.projects__dl dd{margin:0;color:var(--c-ink-soft)}
.projects__link{margin-top:1.4rem;display:inline-flex;gap:.6rem;font-weight:600}
.projects__link .arw{color:var(--c-accent)}

/* ==========================================================================
   09 META-PROVA
   ========================================================================== */
.meta{background:var(--c-void);text-align:center}
.meta h2{font-size:var(--fs-h1);max-width:16ch;margin-inline:auto}
.meta__list{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.meta__list span{font-family:var(--f-display);font-size:.9rem;color:var(--c-ink-faint);border:1px solid var(--c-line);border-radius:var(--r-pill);padding:.5rem 1rem}
.meta__stats{margin-top:var(--sp-7);display:flex;justify-content:center;gap:clamp(1.5rem,5vw,4rem);flex-wrap:wrap}
.meta__stat .n{font-family:var(--f-display);font-weight:600;font-size:clamp(2rem,5vw,3.4rem);color:var(--c-accent)}
.meta__stat .l{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--c-ink-faint)}
.meta p.lead{margin:var(--sp-6) auto 0;max-width:40ch}

/* ==========================================================================
   10 IA
   ========================================================================== */
.ia__grid{margin-top:var(--sp-8);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.flow{background:var(--c-surface);padding:1.8rem 1.6rem;display:flex;align-items:center;gap:1.2rem}
.flow .from,.flow .to{flex:1;font-weight:500}
.flow .to{color:var(--c-accent)}
.flow .arw{color:var(--c-ink-faint)}
.flow .tick{width:22px;height:22px;border-radius:50%;border:1px solid var(--c-line-strong);display:grid;place-items:center;color:var(--c-ok);font-size:12px;flex:0 0 auto}
.ia__note{margin-top:var(--sp-7);max-width:44ch;color:var(--c-ink-soft)}

/* ==========================================================================
   11 TECNOLOGIA
   ========================================================================== */
.tech{background:var(--c-void);padding-block:clamp(3rem,6vw,5rem)}
.marquee{margin-top:var(--sp-6);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__row{display:flex;gap:3.5rem;width:max-content;animation:marq 26s linear infinite}
.marquee__row span{font-family:var(--f-display);font-weight:600;font-size:clamp(1.4rem,3vw,2.4rem);color:var(--c-ink-faint);letter-spacing:-.01em;white-space:nowrap}
.marquee__row span::before{content:"·";margin-right:3.5rem;color:var(--c-line-strong)}
@keyframes marq{to{transform:translateX(-50%)}}
.tech small{display:block;margin-top:var(--sp-5);color:var(--c-ink-faint);font-size:.85rem}

/* ==========================================================================
   12 CTA FINAL + FORM
   ========================================================================== */
.cta-final{background:var(--c-paper);color:var(--c-paper-ink)}
.cta-final__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.cta-final h2{font-size:var(--fs-h1)}
.cta-final .lead{color:#42505C}
.qual{background:#fff;border:1px solid var(--c-line-dark);border-radius:var(--r-l);padding:clamp(1.5rem,3vw,2.4rem);box-shadow:0 30px 70px -30px rgba(14,17,22,.18)}
.qual__steps{display:flex;gap:.5rem;margin-bottom:1.5rem}
.qual__steps i{flex:1;height:3px;border-radius:2px;background:var(--c-line-dark)}
.qual__steps i.on{background:var(--c-accent)}
.qual__panel{display:none}
.qual__panel.on{display:block;animation:fadein var(--d-3) var(--e-out)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qual__q{font-family:var(--f-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em}
.qual__opts{margin-top:1rem;display:grid;gap:.5rem}
.qual__opt{display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;border:1px solid var(--c-line-dark);border-radius:var(--r-s);
  font-weight:500;transition:border-color var(--d-1),background var(--d-1)}
.qual__opt:hover,.qual__opt.sel{border-color:var(--c-accent);background:rgba(227,161,53,.06)}
.qual__opt .r{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--c-line-strong)}
.qual__opt.sel .r{border-color:var(--c-accent);box-shadow:inset 0 0 0 4px var(--c-accent)}
.qual__field{margin-top:.9rem}
.qual__field label{display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#7A8590;margin-bottom:.4rem}
.qual__field input,.qual__field textarea{width:100%;padding:.85rem 1rem;border:1px solid var(--c-line-dark);border-radius:var(--r-s);background:#fff;color:var(--c-paper-ink);font:inherit}
.qual__field input:focus,.qual__field textarea:focus{border-color:var(--c-accent);outline:none}
.qual__nav{margin-top:1.4rem;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.qual__back{color:#7A8590;font-weight:600}
.qual__wa{margin-top:1rem;text-align:center}
.qual__wa a{color:var(--c-accent);font-weight:600;font-size:.9rem}
.qual__done{text-align:center;padding:1rem 0}
.qual__done .ok{width:48px;height:48px;border-radius:50%;background:var(--c-ok);color:#04241a;display:grid;place-items:center;font-size:22px;margin:0 auto 1rem}

/* ---------- footer ---------- */
.foot{background:var(--c-void);border-top:1px solid var(--c-line);padding-block:var(--sp-8) var(--sp-6)}
.foot__row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot .brand{font-size:1.4rem}
.foot p{margin-top:.8rem;color:var(--c-ink-faint);max-width:32ch;font-size:.92rem}
.foot h5{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink-faint);margin-bottom:.9rem}
.foot ul{display:grid;gap:.5rem}
.foot a{color:var(--c-ink-soft);font-size:.92rem}
.foot a:hover{color:var(--c-ink)}
.foot__legal{margin-top:var(--sp-7);padding-top:var(--sp-5);border-top:1px solid var(--c-line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--c-ink-faint);font-size:.82rem}

/* ==========================================================================
   PÁGINA SITES + PRICING + LP (compartilhado)
   ========================================================================== */
.pghero{padding-top:160px;padding-bottom:var(--section-y);position:relative;overflow:hidden}
.pghero__bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(90% 70% at 80% -10%,rgba(227,161,53,.12),transparent 60%),var(--c-void)}
.pghero h1{font-size:var(--fs-h1);max-width:18ch}
.pghero .lead{margin-top:var(--sp-5);max-width:42ch}
.pghero .btn{margin-top:var(--sp-6)}
.block{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.block--single{display:block;max-width:60ch}
.feature-grid{margin-top:var(--sp-7);display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--c-line);border:1px solid var(--c-line)}
.feature-grid > div{background:var(--c-surface);padding:1.5rem}
.feature-grid h4{font-family:var(--f-display);font-weight:600;font-size:1.05rem}
.feature-grid p{margin-top:.4rem;color:var(--c-ink-soft);font-size:.95rem}

.pricing{background:var(--c-void)}
.pricing__grid{margin-top:var(--sp-8);display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;align-items:start}
.plan{border:1px solid var(--c-line);border-radius:var(--r-l);padding:2rem 1.7rem;background:var(--c-surface);display:flex;flex-direction:column;gap:1rem}
.plan--reco{border-color:var(--c-accent);box-shadow:0 30px 80px -40px rgba(227,161,53,.4);position:relative}
.plan--reco::before{content:"RECOMENDADO";position:absolute;top:-11px;left:1.7rem;background:var(--c-accent);color:var(--c-accent-ink);
  font-size:10px;font-weight:800;letter-spacing:.14em;padding:4px 10px;border-radius:var(--r-pill)}
.plan__name{font-family:var(--f-display);font-weight:600;font-size:1.1rem;letter-spacing:.06em}
.plan__price{font-family:var(--f-display);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em}
.plan__price small{display:block;font-family:var(--f-text);font-size:.85rem;font-weight:400;color:var(--c-ink-faint);letter-spacing:0}
.plan__role{color:var(--c-ink-faint);font-size:.9rem}
.plan__feats{display:grid;gap:.55rem;font-size:.92rem;color:var(--c-ink-soft)}
.plan__feats li{display:flex;gap:.6rem}
.plan__feats li::before{content:"—";color:var(--c-accent)}
.plan .btn{margin-top:auto}
.pricing small{display:block;margin-top:var(--sp-6);color:var(--c-ink-faint);font-size:.82rem}

.faq{background:var(--c-void)}
.faq__list{margin-top:var(--sp-7);border-top:1px solid var(--c-line)}
.faq details{border-bottom:1px solid var(--c-line)}
.faq summary{list-style:none;cursor:pointer;padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--f-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--c-accent);font-weight:400;transition:transform var(--d-2)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 1.4rem;color:var(--c-ink-soft);max-width:60ch}

/* ==========================================================================
   MOTION helpers / reveal
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(26px)}
.is-ready [data-reveal].is-in,.no-motion [data-reveal]{opacity:1;transform:none;transition:opacity var(--d-4) var(--e-out),transform var(--d-4) var(--e-out)}
[data-reveal-stagger] > *{opacity:0;transform:translateY(22px)}
.is-ready [data-reveal-stagger].is-in > *,.no-motion [data-reveal-stagger] > *{opacity:1;transform:none;
  transition:opacity var(--d-3) var(--e-out),transform var(--d-3) var(--e-out)}
.is-ready [data-reveal-stagger].is-in > *{transition-delay:calc(var(--i,0) * 70ms)}
.no-motion [data-reveal],.no-motion [data-reveal-stagger] > *{transition:none}

/* custom cursor (desktop fine pointer only, toggled by JS) */
.cursor{position:fixed;left:0;top:0;z-index:var(--z-cursor);width:34px;height:34px;border:1px solid var(--c-accent);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .3s,width .25s var(--e-out),height .25s var(--e-out),background .25s}
.has-cursor .cursor{opacity:1}
.has-cursor.cursor-hot .cursor{width:54px;height:54px;background:rgba(237,241,245,.10)}
.has-cursor *{cursor:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
  .hero__inner{grid-template-columns:1fr;gap:3rem}
  .stage{height:min(56vh,480px);max-width:560px}
  .method__layout{grid-template-columns:1fr;gap:2.5rem}
  .method__sticky{position:relative;top:0}
  .cta-final__grid,.problem__head,.block{grid-template-columns:1fr}
  .pricing__grid{grid-template-columns:1fr;max-width:480px}
  .projects__item,.projects__item:nth-child(even){grid-template-columns:1fr;direction:ltr}
  .pos-row{grid-template-columns:auto 1fr;gap:.4rem 1.4rem}
  .pos-row .desc{grid-column:1/-1}
}
@media (max-width:820px){
  .nav,.head .btn--primary{display:none}
  .burger{display:flex}
  .myths,.ia__grid,.feature-grid{grid-template-columns:1fr}
  .sol{grid-template-columns:auto 1fr;gap:1rem}
  .sol .go{display:none}
  .meta__stats{gap:2rem}
  .foot__row{grid-template-columns:1fr;gap:1.5rem}
  .pipeline__track{flex-direction:column}
  .pipe-node{border-right:0;border-bottom:1px solid var(--c-line)}
  .pipe-node::after{content:"↓";right:auto;left:50%;top:auto;bottom:-9px;transform:translateX(-50%)}
}
@media (max-width:520px){
  :root{--gutter:1.1rem}
  .hero{padding-top:104px}
  .btn{padding:.9rem 1.25rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{justify-content:center}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero__scroll .dot::after,.marquee__row{animation:none}
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important}
}