/* ==========================================================================
   base.css — {{BRAND}} landing · reset, grade hairline, componentes globais, motion
   Ordem: reset → grade (SPEC §3.3) → componentes (§4) → .sr-only → keyframes + .reveal (§5) → reduced-motion (§5.4)
   ========================================================================== */

/* ---------- 1. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--font-body);background:var(--c-body)}
body{margin:0;background:var(--c-hairline);display:flex;flex-direction:column;gap:1px;min-height:100vh;font-family:var(--font-display);color:var(--c-ink-800)}
/* mobile: 100vh mede a viewport COM a barra de URL retraída e sobra altura morta quando ela
   está visível; dvh acompanha a viewport real. Fallback acima para navegadores sem dvh. */
@supports (height:100dvh){body{min-height:100dvh}}
body.menu-open{overflow:hidden}
/* overflow-wrap: em 360 uma palavra longa (URL, nome de produto composto) num H1 de 44px
   estoura a célula; sem ele o texto sai por baixo do gradiente do hero. Não muda nada
   enquanto a palavra couber — é só a válvula de escape. */
h1,h2,h3,h4,h5,h6,p{margin:0;font-size:inherit;font-weight:inherit;overflow-wrap:break-word}
a{color:inherit;text-decoration:inherit}
button{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
ul,ol{list-style:none;margin:0;padding:0}
input,textarea,select{font:inherit}
/* anel de dois tons: o halo branco garante contraste também sobre a banda escura #1C1238 */
:focus-visible{outline:2px solid var(--c-ink-900);outline-offset:2px;box-shadow:0 0 0 4px hsla(0,0%,100%,.9)}

/* Tipografia base (as seções sobrescrevem com `font:` explícito) */
h1{font:600 var(--fs-h1)/var(--lh-h1) var(--font-display);letter-spacing:var(--ls-h1);color:var(--c-ink-900)}
h2{font:600 var(--fs-h2)/var(--lh-h2) var(--font-display);letter-spacing:var(--ls-h2);color:var(--c-ink-900)}
/* h3 SEM letter-spacing: --ls-h3-section (−1,28 a −1,92px) é tracking de TÍTULO DE SEÇÃO 40px+
   e vive em .t-section. Herdado por um h3 pequeno (.taxas__rtitle, 16–18px) ele engole os
   espaços entre palavras. Nenhum h3 do site pede esse valor: .prod__h3/.t-card-h3 usam
   --ls-card, .faq__h usa normal, .taxas__rtitle usa normal. */
h3{font:600 var(--fs-h3-section)/var(--lh-h2) var(--font-display);color:var(--c-ink-900)}
p{font-family:var(--font-body);font-weight:500}

/* ---------- 2. Grade hairline (SPEC §3.3) ---------- */
.grid,.stack{display:flex;flex-direction:column;gap:1px}
.row{display:flex;gap:1px}
.col{flex:auto;width:100%;min-width:0}
.cell{flex:auto;width:100%;min-width:0;background:var(--c-surface);border-radius:var(--r-cell);overflow:hidden}
.container{display:flex;gap:1px;width:100%}
.container::before,.container::after{content:"";display:block;flex:auto;min-width:var(--rail-fluid);background:var(--c-surface);overflow:hidden}
.container::before{border-radius:0 var(--r-cell) var(--r-cell) 0}   /* trilho esquerdo: cantos do lado da célula */
.container::after {border-radius:var(--r-cell) 0 0 var(--r-cell)}   /* trilho direito */
.container--fixed::before,.container--fixed::after{min-width:var(--rail-fixed)}
@media (max-width:768px){.container--fixed::before,.container--fixed::after,.container--bleed-sm::before,.container--bleed-sm::after{display:none}}
.container--stripes::before,.container--stripes::after{background:var(--pattern-stripes) var(--c-surface)}
.container--hdr::before{border-radius:0 0 var(--r-cell) 0}
.container--hdr::after {border-radius:0 0 0 var(--r-cell)}
.container--hdr>.cell{border-radius:0 0 var(--r-cell) var(--r-cell)}
.container--join-b::before{border-bottom-right-radius:0;margin-bottom:-1px}
.container--join-b::after {border-bottom-left-radius:0;margin-bottom:-1px}
.container--join-t::before{border-top-right-radius:0}
.container--join-t::after {border-top-left-radius:0}
.container--max>.cell{max-width:var(--content-max-xxl);margin-inline:auto}  /* só faz efeito ≥1698 */
.inset{display:none}
@media (min-width:1440px){.inset{display:block;flex:0 0 auto;min-width:var(--inset);background:var(--c-surface);border-radius:var(--r-cell)}.inset--lg{min-width:var(--inset-lg)}}
.stripes{background:var(--pattern-stripes) var(--c-surface)}
.strip{height:var(--strip-h);position:relative}
.dash-v{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--pattern-dashed-v);pointer-events:none}
.dash-h{position:absolute;left:0;right:0;top:0;height:1px;background:var(--pattern-dashed-h);pointer-events:none}
.cross{position:absolute;width:17px;height:17px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(circle at 0 0,transparent 8px,var(--c-hairline) 8px),radial-gradient(circle at 100% 0,transparent 8px,var(--c-hairline) 8px),radial-gradient(circle at 0 100%,transparent 8px,var(--c-hairline) 8px),radial-gradient(circle at 100% 100%,transparent 8px,var(--c-hairline) 8px);
  background-size:50% 50%;background-repeat:no-repeat;background-position:0 0,100% 0,0 100%,100% 100%}

/* Trilhos explícitos (alternativa aos pseudo-elementos do .container, mesma geometria) */
.rail{flex:auto;min-width:var(--rail-fluid);background:var(--c-surface);overflow:hidden;border-radius:var(--r-cell)}
.rail--fluid{min-width:var(--rail-fluid)}
.rail--fixed{min-width:var(--rail-fixed)}
.rail--l,.rail:first-child{border-radius:0 var(--r-cell) var(--r-cell) 0}
.rail--r,.rail:last-child{border-radius:var(--r-cell) 0 0 var(--r-cell)}
.rail--stripes{background:var(--pattern-stripes) var(--c-surface)}
@media (max-width:768px){.rail--fixed{display:none}}

/* ---------- 3. Componentes globais ---------- */

/* 3.1 Botões (SPEC §4.1) — 48px; compacto 40px com ícone 16 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:fit-content;padding:var(--btn-pad);border:0;border-radius:var(--r-pill);
  font:600 16px/1.5 var(--font-display);color:var(--c-ink-800);background:var(--c-surface);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-default),color var(--dur-base) var(--ease-default),border-color var(--dur-base) var(--ease-default),transform 120ms ease-out}
.btn:active{transform:scale(var(--active-scale))}
.btn--primary{background:var(--c-lime)}
.btn--secondary{background:var(--c-surface)}
.btn--primary:hover,.btn--secondary:hover{background:var(--c-ink-800);color:var(--c-lime)}
.btn--dark{background:var(--c-ink-800);color:#fff;padding:var(--btn-pad-wide);transition-duration:var(--dur-fast)}
.btn--dark:hover{background:var(--c-ink-800-hover)}
.btn--outline{background:transparent;color:#fff;border:1px solid var(--c-on-dark-50);padding:var(--btn-pad-wide);font-size:14px;transition-duration:var(--dur-fast)}  /* .50 = 3,81:1 sobre a banda escura */
.btn--outline:hover{background:var(--c-on-dark-hover);border-color:hsla(0,0%,100%,.5)}
.btn--outline:focus-visible{outline-color:var(--c-lime)}
.btn--ghost-light{background:var(--c-surface);border:1px solid var(--c-hairline);padding:11px 15px;transition-duration:var(--dur-fast)}  /* borda 1px → mantém 48px */
.btn--ghost-light:hover{background:var(--c-surface-soft)}
.btn--compact{line-height:var(--lh-tight-ui)}      /* 40px de altura com ícone 16 */
.btn--block{width:100%}
.btn__arrow{width:20px;height:20px;flex-shrink:0}
.btn__arrow--sm{width:16px;height:16px}

/* 3.2 Pills (SPEC §4.2) — 34px; tracejada ≈32px full-width */
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;padding:var(--pill-pad);border-radius:var(--r-pill);border:1px solid var(--c-hairline);background:var(--c-surface);
  font:600 14px/10px var(--font-display);color:var(--c-ink-800);text-decoration:none;white-space:nowrap;
  transition:border-color var(--dur-base) var(--ease-default),color var(--dur-base) var(--ease-default),background-color var(--dur-base) var(--ease-default),transform var(--dur-base) var(--ease-default)}
.pill svg{width:16px;height:16px;flex-shrink:0}
/* WCAG 2.5.8: a pill mede 34px de altura no design de referência. Amplia só a ÁREA DE TOQUE
   para 44px (pseudo fora de fluxo, transparente — não muda pixel nenhum do render). */
.pill::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
@media (hover:hover){.pill:hover{border-color:var(--c-link-green);color:var(--c-link-green);transform:scale(var(--hover-scale))}}
.pill--dashed{width:100%;border-style:dashed;background:var(--c-surface-soft);font:600 12px/1.2 var(--font-mono)}
.pill--dashed:hover{transform:none}

/* 3.3 Eyebrow (SPEC §4.4) */
.eyebrow{display:inline-flex;align-items:center;padding:var(--pill-pad);border:1px solid var(--c-hairline);border-radius:var(--r-pill);background:var(--c-surface);font:700 14px/1.5 var(--font-display);color:var(--c-ink-900)}

/* 3.4 Ícone em disco (SPEC §4.5) — CORRIGE a decisão D2, que dizia "disco escuro, glifo branco".
   Amostragem de pixel em hero-left-zoom.png e desktop-1440-fold.png: disco CLARO #FFE8DD com
   glifo escuro #1C1238. --disc-bg é exposto para o SVG pintar recortes (ex.: o furo do cadeado). */
.icon-circle{--disc-bg:var(--c-icon-disc);display:grid;place-items:center;width:var(--icon-disc);height:var(--icon-disc);border-radius:50%;background:var(--disc-bg);color:var(--c-ink-900);flex-shrink:0}
.icon-circle svg{width:24px;height:24px}
.icon-circle--dark{--disc-bg:var(--c-icon-disc-dark);color:#fff}

/* 3.5 Vidro (SPEC §4.6) */
.glass{background:var(--c-glass-bg);border:var(--border-glass);border-radius:var(--r-lg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur))}
.glass--inner{background:var(--c-glass-inner-bg);border:var(--border-glass-inner);border-radius:var(--r-md);backdrop-filter:none;-webkit-backdrop-filter:none}

/* 3.6 Shimmer (SPEC §4.7) — H1 linha 2, H2 "Quanto sai?"
   2 camadas: o brilho que varre (animado) + a rampa horizontal verde-claro→verde da referência
   (fidelidade F02: x155 #E4D8FF → verde cheio ~100px depois; --shimmer-ramp ajusta por seção). */
.shimmer{display:inline-block;color:var(--c-green);
  background-image:var(--grad-shimmer),linear-gradient(90deg,var(--c-green-soft) 0,var(--c-green) var(--shimmer-ramp));
  background-size:200% auto,100% 100%;background-repeat:no-repeat;background-position:150% 0,0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shimmer var(--dur-shimmer) var(--ease-in-out) infinite}
/* fora da viewport a varredura é repaint puro (background-clip:text não compõe) — main.js
   marca .is-off. Regra global: vale para o H1 do hero E para o .qc__title de 04. */
.shimmer.is-off{animation-play-state:paused}

/* 3.7 Link verde com sublinhado animado (SPEC §4.8) — --c-link-green: 4,5:1 sobre branco */
.link-u{display:inline-block;transition:transform var(--dur-slow) var(--ease-default)}
.link-u a{position:relative;color:var(--c-link-green);font:600 16px/11px var(--font-display);letter-spacing:var(--ls-link);text-decoration:none}
/* WCAG 2.5.8: o link mede 165×23 ("Ler a documentação →") e 139×23 ("Fale com a gente →") no
   design de referência. Pseudo transparente fora de fluxo amplia só a ÁREA DE TOQUE para 44px
   — nenhum pixel do render muda. Conferido em 390/1024: nenhum outro alvo interativo a menos
   de 26px acima ou abaixo, então a área não rouba clique de vizinho. */
.link-u a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.link-u__bar{display:block;height:2px;margin-top:4px;background:var(--c-link-green);transform:scaleX(0);transform-origin:center;transition:transform var(--dur-slow) var(--ease-default)}
@media (hover:hover){.link-u:hover{transform:scale(var(--hover-scale))}.link-u:hover .link-u__bar{transform:scaleX(1)}}

/* 3.8 Pontilhado decorativo (SPEC §4.9) — sempre dentro de célula position:relative; overflow:hidden */
/* opacity:1 de propósito — --pattern-dots já traz a alfa medida na referência (~11%).
   Todas as instâncias de seção já sobrescreviam para 1; o .6 antigo era letra morta. */
.dots{position:absolute;width:1180px;height:819px;pointer-events:none;z-index:0;background-image:var(--pattern-dots);background-size:var(--pattern-dots-size);background-position:var(--pattern-dots-pos);
  -webkit-mask-image:var(--pattern-dots-mask);mask-image:var(--pattern-dots-mask)}
/* as seções que trocam --pattern-dots por uma camada só herdam apenas o 1º valor (`0 0`) */
.dots--iso{width:437px;height:450px;right:0;top:0;opacity:1;background-size:12px 12px,24px 24px;background-position:0 0,-6px -6px;transform:skewY(-30deg);transform-origin:top right;
  -webkit-mask-image:linear-gradient(225deg,#000 10%,transparent 75%);mask-image:linear-gradient(225deg,#000 10%,transparent 75%)}

/* 3.9 Tipografia utilitária (SPEC §4.17) */
.t-section{font:600 var(--fs-h3-section)/1.2 var(--font-display);letter-spacing:var(--ls-h3-section);color:var(--c-ink-900)}
.t-lead{font:500 18px/1.8 var(--font-body);letter-spacing:var(--ls-body-lead);color:var(--c-ink-600)}
.t-card-h3{font:600 20px/14px var(--font-display);letter-spacing:var(--ls-card);color:var(--c-ink-800)}
.t-card-p{font:500 14px/1.8 var(--font-body);letter-spacing:var(--ls-body-sm);color:var(--c-ink-600)}

/* ---------- 4. Acessibilidade ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* WCAG 2.4.1 — PENDENTE em template.html: o link tem de ser o 1º filho de <body>
   (`<a class="skip-link" href="#main">Pular para o conteúdo</a>` + `<main … tabindex="-1">`).
   Enquanto isso main.js o injeta em runtime; sem JS o usuário de teclado fica sem ele. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999}
/* padding-block 14 (era 10): 14 + 16 + 14 = 44px de alvo (WCAG 2.5.5) no estado focado —
   o único em que o link aparece. */
.skip-link:focus{left:8px;top:8px;padding:14px 16px;border-radius:var(--r-pill);background:var(--c-lime);color:var(--c-ink-900);
  font:600 16px/1 var(--font-display);outline:2px solid var(--c-ink-900);outline-offset:2px}
#main:focus{outline:none}

/* ---------- 5. Keyframes (SPEC §5.1) + .reveal (§5.3) ---------- */
@keyframes shimmer{from{background-position:150% 0,0 0}to{background-position:-50% 0,0 0}}
@keyframes pill-pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes marquee-left{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-right{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes draw-underline{to{stroke-dashoffset:0}}
/* --len vem do main.js (path[data-draw]); o fallback repete o stroke-dasharray declarado hoje */
@keyframes draw-main{0%{stroke-dashoffset:var(--len,380)}30%,100%{stroke-dashoffset:0}}
@keyframes draw-arrow{0%,30%{stroke-dashoffset:var(--len,70)}40%,100%{stroke-dashoffset:0}}
@keyframes reveal-fallback{to{opacity:1;transform:none}}

/* SEM will-change estático: eram 19 camadas de composição promovidas desde o load (inclusive
   .taxas__calc 720×512 e .depo__head 1352px) para uma transição que roda UMA vez. main.js
   arma .is-armed 200px antes de o bloco entrar; o transitionend devolve para auto. */
.reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--dur-reveal) var(--ease-out-strong),transform var(--dur-reveal) var(--ease-out-strong);transition-delay:calc(var(--i,0)*var(--stagger))}
.reveal.is-armed{will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none;will-change:auto}
/* hero: acima da dobra, entra por CSS (não espera o main.js) — senão o <h1>, que é o LCP, só pinta depois do JS */
.reveal--hero{transform:translate3d(0,100px,0);animation:reveal-fallback var(--dur-reveal-hero) var(--ease-aos) both}
/* sem JS (main.js não marcou <html class="js">): tudo aparece sozinho após 1.2s */
html:not(.js) .reveal:not(.reveal--hero){animation:reveal-fallback var(--dur-reveal) var(--ease-out-strong) 1.2s forwards}
/* …e o que depende de `is-visible` (line-drawing, marquee) precisa do estado final direto */
html:not(.js) .scribble path,html:not(.js) .arrow-doodle path{animation:none;stroke-dashoffset:0}
html:not(.js) .marquee__track{animation:none}

/* ---------- 6. Alto contraste (forced-colors) ---------- */
/* background-clip:text + text-fill transparent somem no modo de alto contraste do Windows,
   apagando a 2ª linha do <h1> e o <h2> da seção 04. */
@media (forced-colors: active){
  .shimmer{background-image:none;-webkit-text-fill-color:currentColor;color:CanvasText}
}

/* ---------- 7. Reduced motion (SPEC §5.4) ----------
   base.css é a 2ª folha e TODAS as css/sections/*.css vêm depois com a mesma especificidade,
   então este bloco só vale com !important (ou duplicando seletor a seletor em cada seção). */
@media (prefers-reduced-motion: reduce){
  /* animação infinita em texto (WCAG 2.2.2/2.3.3): desliga de vez, não só desacelera */
  .shimmer{animation:none!important;background-image:none!important;-webkit-text-fill-color:currentColor;color:var(--c-green)}
  .reveal{transform:none;transition:opacity 200ms ease}
  .reveal--hero{animation:none!important;opacity:1;transform:none}
  html:not(.js) .reveal{animation-duration:200ms;animation-delay:0s}
  .marquee__track,.marquee__track--left,.marquee__track--right{animation:none!important;transform:none!important}
  .marquee__row,.depo__marquee .marquee__row{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .depo__card{scroll-snap-align:start}
  .integ__pill{animation:none!important;opacity:1}
  .scribble path,.arrow-doodle path{animation:none!important;stroke-dashoffset:0}
  /* o traço do .link-u varria 165px em 500ms e era a única transição de transform que
     sobrava aqui: agora o sublinhado aparece inteiro, sem varredura. */
  .link-u__bar{transition:none!important}
  .link-u:hover .link-u__bar{transform:scaleX(1)}
  .btn:active,.chat-fab:active,.pill:hover,.link-u:hover,.hdr__nav-item:hover,
  .suite__icon,.suite__art:hover .suite__icon,.suite__card:hover .suite__icon,
  .ft__social a,.ft__social a:hover{transform:none!important}
  .faq__plus,.hdr__chev{transition:none!important}
  .calc__net,.taxas__net{transition:none!important;filter:none!important}
  .hdr__panel,.hdr__menu-panel{transform:none;transition:opacity 120ms ease}
  .hdr__burger span{transition:none}
}