.official-investment{position:relative;padding:110px 24px;background:#F1F6F9;overflow:hidden}.official-investment:before{content:"";position:absolute;width:620px;height:620px;border:1px solid rgba(25,167,206,.16);border-radius:50%;right:-260px;top:50%;transform:translateY(-50%);box-shadow:0 0 0 80px rgba(25,167,206,.02),0 0 0 160px rgba(25,167,206,.015)}.official-investment-intro{max-width:700px;margin:0 auto;position:relative;z-index:1;text-align:center}.official-investment .official-section-label{justify-content:center;text-align:center}.official-investment h2{font-family:Manrope,sans-serif;font-size:clamp(34px,4.5vw,60px);line-height:1.03;letter-spacing:-.065em;margin:12px 0 18px}.official-investment-intro p{max-width:540px;margin:0 auto;color:var(--muted);font-size:17px;line-height:1.6}.official-investment-trust{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.trust-chip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.75);border:1px solid var(--line);backdrop-filter:blur(10px);border-radius:999px;padding:9px 18px 9px 10px;font-size:13px;font-weight:600;color:var(--ink);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.trust-chip:hover{border-color:rgba(25,167,206,.5);box-shadow:0 10px 24px rgba(25,167,206,.2);transform:translateY(-2px)}
.trust-ico{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.trust-ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.official-investment-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.12fr;gap:24px;margin-top:40px;align-items:stretch}
.investment-index{position:absolute;right:26px;top:30px;font:800 13px/1 Manrope,sans-serif;color:rgba(20,108,148,.22);letter-spacing:-.02em}
.investment-card-featured .investment-index{top:38px}
.investment-card-featured .investment-index{color:rgba(255,255,255,.28)}
.investment-story{font-size:15px!important;line-height:1.55!important}
.investment-upsells summary{cursor:pointer;list-style:none;color:var(--muted)}
.investment-upsells summary::-webkit-details-marker{display:none}
.investment-upsells summary .official-section-label{margin-bottom:0}
.investment-upsells[open] summary{margin-bottom:12px}
.investment-upsells ul.upsell-list{margin-top:2px}
.investment-price{display:flex;flex-direction:column;gap:4px;margin:12px 0 16px!important}
.investment-price strong{font:800 34px/1 Manrope,sans-serif;letter-spacing:-.03em;color:var(--ink)}
.investment-card-featured .investment-price strong{color:#fff}
.investment-price small{font-size:13px;color:var(--muted)}
.investment-card-featured .investment-price small{color:rgba(255,255,255,.6)}
.investment-includes{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.investment-includes li{position:relative;padding-left:22px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.investment-includes li:before{content:"✓";position:absolute;left:0;top:0;color:var(--ink);font-weight:700}
.investment-card-featured .investment-includes li{color:rgba(255,255,255,.9)}
.investment-card-featured .investment-includes li:before{color:var(--accent)}
.investment-card .official-button{margin-top:8px;width:100%;text-align:center;color:#fff}
.investment-upsells{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.investment-card-featured .investment-upsells{border-top-color:rgba(255,255,255,.14)}
.investment-upsells .official-section-label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;color:var(--muted);margin-bottom:12px}
.investment-card-featured .investment-upsells .official-section-label{color:rgba(255,255,255,.5)}
.upsell-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.upsell-list li{font-size:12.5px;line-height:1.5}
.upsell-list strong{display:block;font-size:13px;margin-bottom:2px;color:var(--ink)}
.investment-card-featured .upsell-list strong{color:#fff}
.upsell-list small{color:var(--muted)}
.investment-card-featured .upsell-list small{color:rgba(255,255,255,.55)}
.upsell-list li.upsell-priority{padding:10px 12px;background:var(--accent-soft);border-radius:10px}
.investment-card-featured .upsell-list li.upsell-priority{background:rgba(25,167,206,.12)}
.upsell-list li.upsell-priority strong{color:var(--ink)}
.investment-card-featured .upsell-list li.upsell-priority strong{color:var(--accent)}
.investment-badge{position:absolute;top:0;right:28px;transform:translateY(-50%);background:var(--accent);color:#fff;font:800 11px Poppins,sans-serif;letter-spacing:.04em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px rgba(25,167,206,.35)}
.investment-risk-note{display:block;margin-top:8px;text-align:center;font-size:11.5px;font-style:italic;color:var(--muted)}
.investment-card-featured .investment-risk-note{color:rgba(255,255,255,.45)}
.investment-upsells{background:rgba(20,108,148,.025);margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px;border-radius:12px}
.investment-card-featured .investment-upsells{background:rgba(255,255,255,.03)}.investment-card{position:relative;background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:18px;padding:28px 26px 24px;min-height:285px;display:flex;flex-direction:column;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s}
.investment-card:before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),rgba(25,167,206,.15));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.investment-card:hover:before,.investment-card-featured:before{transform:scaleX(1)}
.investment-card:hover{transform:translateY(-10px);box-shadow:var(--shadow-accent);border-color:rgba(25,167,206,.45)}.investment-card-featured{background:var(--gs-black);color:#fff;border-color:var(--gs-black)}.investment-card-featured:hover{transform:translateY(-10px)}.investment-tag{color:var(--ink);font:700 10px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase}.investment-card-featured .investment-tag{color:var(--accent)}.investment-card h3{font:800 27px/1.05 Manrope,sans-serif;letter-spacing:-.055em;margin:43px 0 12px}.investment-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}.investment-card-featured p{color:rgba(255,255,255,.68)}.investment-card>p{min-height:63px}.investment-card a{margin-top:25px;color:var(--ink);font-size:12px;font-weight:700}.investment-card-featured a{color:var(--accent)}.official-hero{--scroll-y:0px}.official-hero-grid{transform:translateY(calc(var(--scroll-y) * -.05))}.official-hero-image:before{transform:translate(calc(22px + var(--scroll-y) * -.03),calc(18px + var(--scroll-y) * -.04)) scale(1.04)}.official-marquee{position:relative;z-index:2}.official-positioning,.official-offer,.official-work,.official-process{position:relative}.official-work-grid a:before{content:"view";position:absolute;z-index:3;right:18px;top:18px;background:#fff;color:var(--navy);border-radius:999px;padding:8px 12px;font:700 10px Poppins,sans-serif;text-transform:uppercase;letter-spacing:.08em;opacity:0;transform:translateY(8px);transition:.35s}.official-work-grid a:hover:before{opacity:1;transform:none}.official-footer{position:relative}.motion-cursor{position:fixed;top:0;left:0;z-index:50;width:240px;height:240px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(25,167,206,.16),transparent 68%);mix-blend-mode:multiply;opacity:0;transition:opacity .3s;will-change:transform}.motion-cursor.visible{opacity:1}@media(max-width:800px){.official-investment-grid{grid-template-columns:1fr 1fr}.investment-card-featured{transform:none}.investment-card-featured:hover{transform:translateY(-10px)}}@media(max-width:520px){.official-investment{padding:75px 20px}.official-investment-grid{grid-template-columns:1fr;margin-top:38px}.investment-card,.investment-card-featured{min-height:240px}}@media(prefers-reduced-motion:reduce){.official-hero-grid,.official-hero-image:before{transform:none!important}.investment-card,.investment-card-featured{transition:none}.motion-cursor{display:none}}
/* ===== Positioning section — UX/UI v2 ===== */
.official-positioning{padding:115px 24px 95px;background:radial-gradient(circle at 85% 12%,rgba(25,167,206,.05),transparent 42%),linear-gradient(180deg,#fff 0%,#fafafa 100%)}
.official-positioning .official-section-label{text-align:left;color:var(--accent)}
.highlight-word{font-weight:800;color:var(--ink)}
.official-positioning-grid{max-width:1200px;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
/* Reset mobile precisa viver AQUI (não em guaru-landing.css): esse arquivo
   carrega depois no <head>, então uma regra de mesma especificidade sem
   media query aqui sempre vence a versão em landing.css, mesmo dentro do
   media query de lá — bug real de cascata entre arquivos, achado na
   auditoria responsiva. */
@media(max-width:800px){.official-positioning-grid{grid-template-columns:1fr;gap:28px}}
.official-positioning-grid>div:first-child{max-width:640px}
.official-positioning-grid h2{margin-top:18px;font-weight:500}
/* Paleta dos títulos de seção alinhada ao azul-marinho do H1 do hero
   (--gs-black, #043D57) — antes herdavam var(--navy)/--ink (mais claro) do
   body, ficando num tom visivelmente diferente do hero. Não mexe em
   .official-results h2 / .official-cta-section h2: essas já têm color:#fff
   de propósito, por estarem sobre fundo escuro. */
.official-positioning h2,.official-work-head h2,.official-features h2,.official-investment-intro h2,.official-delivery-grid h2,.official-faq h2{color:var(--gs-black)}
/* .official-process tem fundo escuro (--surface-dark) — entrar na regra acima
   deixava o título quase invisível (navy em cima de navy). Título em branco,
   igual Resultados/CTA final, com a palavra de destaque em ciano (--accent)
   em vez de --ink: o tom secundário claro não tem contraste suficiente
   sobre esse fundo escuro específico. */
.official-process h2{color:#fff}
.official-process h2 .highlight-word{color:var(--accent)}
.official-work>.official-container:first-child{text-align:center}
.official-work .official-section-label{color:var(--accent)}
.official-features .official-section-label{justify-content:center;text-align:left;color:var(--accent)}
.official-work-head{grid-template-columns:1fr;justify-items:center;text-align:center;gap:0}
.official-work-head>h2{max-width:none;white-space:nowrap;margin-top:18px}
.official-work-head p{max-width:430px;margin-top:14px}
.official-work-head p strong{font-weight:700;color:#043D57}
.positioning-copy{position:relative;max-width:490px}.positioning-copy strong{font-weight:700;color:#043D57}
/* Estes parágrafos ficavam com opacity:0 no CSS base esperando a classe .is-in,
   que NENHUM script adicionava — texto de venda invisível em 100% dos loads.
   Agora o estado escondido só existe sob .js-motion (e o guaru-motion-scroll.js
   adiciona .is-in no scroll); sem JS, ou com o CDN do GSAP fora do ar, o texto
   nasce visível. */
.positioning-copy p{transition:opacity .9s cubic-bezier(.2,.8,.2,1),filter .9s cubic-bezier(.2,.8,.2,1)}
.js-motion .positioning-copy p{opacity:0;filter:blur(8px)}
.positioning-copy p:nth-child(1){transition-delay:.25s}.positioning-copy p:nth-child(2){transition-delay:.42s}
.official-positioning.is-in .positioning-copy p{opacity:1;filter:blur(0)}
/* Rebranding dos proof-cards (pedido do Marcos, 02/08/2026): o card escuro
   com numeral-fantasma gigante + glow de ponteiro lia como grade genérica
   de gerador automático ("vibecoded") — e pesava demais de azul-marinho na
   página. Troca pra cards claros (fundo branco, borda e sombra suaves),
   nó circular com o ícone (em vez de caixa quadrada), e o número vira um
   rótulo pequeno ("Passo 0X") no mesmo idioma visual do resto do site
   (official-section-label), não mais tipografia decorativa gigante.
   Sem tilt 3D/glow por ponteiro (removido de guaru-landing.js): o "wow"
   agora é a barra superior de cada card desenhando (scaleX) em sequência
   ao entrar na tela — ver guaru-motion-scroll.js — que ecoa literalmente
   a copy da seção ("a primeira impressão começa a tomar forma").
*/
.proof-track{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px;position:relative}
.proof-step{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 24px 26px;box-shadow:0 4px 16px rgba(4,61,87,.06);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease}
.proof-step:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),rgba(25,167,206,.25));transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.proof-step.is-revealed:before{transform:scaleX(1)}
.proof-step:hover{transform:translateY(-4px);border-color:rgba(25,167,206,.35);box-shadow:0 20px 36px rgba(4,61,87,.12)}
.proof-step-node{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--accent-soft);color:var(--accent);margin-bottom:20px;transition:background .3s ease,color .3s ease,transform .3s ease}
.proof-step-node svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.proof-step:hover .proof-step-node{background:var(--accent);color:#fff;transform:scale(1.08)}
.proof-step-eyebrow{display:block;font:700 11px Poppins,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}
.proof-step strong{display:block;font-family:Manrope,sans-serif;font-size:17.5px;font-weight:800;letter-spacing:-.03em;margin-bottom:8px;color:var(--gs-black)}
.proof-step small{display:block;color:var(--muted);font-size:13.5px;line-height:1.6}
@media(max-width:800px){.proof-track{grid-template-columns:1fr;gap:14px;margin-top:48px}.proof-step{padding:22px 20px}}

/* Estado inicial dos elementos revelados por scroll (guaru-motion-scroll.js).
   Escondido já no CSS (bloqueante, pinta antes de qualquer JS) em vez de só
   via JS depois do GSAP carregar do CDN — evita o "flash" no F5 em que o
   conteúdo aparece cheio e some de repente quando o script termina de chegar.
   Só ativa sob .js-motion (classe adicionada por um script síncrono no <head>)
   para que, sem JS, o conteúdo continue sempre visível (progressive enhancement). */
.js-motion .official-hero-media{clip-path:inset(0% 0% 0% 100%)}
.js-motion .official-work-grid a{opacity:0}
.js-motion .investment-card{opacity:0}
.js-motion .result-card{opacity:0;clip-path:inset(0% 0% 100% 0%)}
.js-motion .proof-track .proof-step{opacity:0}
.js-motion .official-offer-grid .proof-card{opacity:0}
/* Diferenciais/delivery/process/compliance/faq: escondidas aqui pelo mesmo
   motivo das linhas acima (anti-flash). Não é regressão pro problema que a
   Rodada anterior tentou resolver (conteúdo indexável invisível pra sempre)
   — essas seções entram na rede de segurança de 4s do guaru-motion-scroll.js
   (revealTargets) e o ScrollTrigger já revela na hora se, ao carregar, o
   elemento já tiver passado do ponto de entrada (F5 no meio da página). */
.js-motion .official-feature-inner{opacity:0}
.js-motion .official-delivery-grid>div:first-child>.official-section-label,
.js-motion .official-delivery-list>div{opacity:0}
.js-motion .official-process>.official-container>.official-section-label,
.js-motion .official-process-grid article,
.js-motion .official-process-grid .process-ico{opacity:0}
.js-motion .official-compliance-box{opacity:0}
.js-motion .official-faq .official-section-label,
.js-motion .official-faq-list details{opacity:0}
/* Títulos de seção (h2): efeito de digitação no scroll, via SplitText em
   guaru-motion-scroll.js. Escondidos aqui pelo mesmo motivo anti-flash de
   cima — o JS revela caractere por caractere quando a seção entra na tela. */
.js-motion .official-positioning h2,
.js-motion .official-work-head h2,
.js-motion .official-features h2,
.js-motion .official-results h2,
.js-motion .official-investment-intro h2,
.js-motion .official-delivery-grid h2,
.js-motion .official-process h2,
.js-motion .official-faq h2,
.js-motion .official-cta-section h2{opacity:0}
/* Parágrafos de abertura de seção: só blur (sem deslocamento), a pedido do
   cliente — diferente do tratamento y+opacity usado nos cards/itens acima. */
.js-motion .official-work-head p,
.js-motion .official-investment-intro p,
.js-motion .official-delivery-grid>div:first-child>p,
.js-motion .official-cta-section p{opacity:0;filter:blur(8px)}
/* .official-delivery / -process / -compliance / -faq NÃO entram aqui de propósito.
   Elas eram escondidas inteiras (seção como bloco só) e revelavam com um fade
   genérico; agora quem anima são os filhos, um a um, via gsap.from() com guarda
   de "já está na tela" (ver guaru-motion-scroll.js). Sem estado escondido no CSS
   não existe janela de conteúdo invisível — importa especialmente na FAQ, que é
   conteúdo indexável. */

@media(max-width:800px){.official-work-head>h2{white-space:normal}}