/* ============================================================
   Confrapag — design system do site
   Tokens: themes/confrapag/assets/css/confrapagupdates.webflow.css
   Regras de publicação: SDD §2 (R1–R6). Nenhum número mora aqui.
   ============================================================ */

:root{
  /* curva e tempos do motion, num lugar só */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --e-out:cubic-bezier(.22,1,.36,1);      /* saída longa: entrada de conteúdo */
  --e-io:cubic-bezier(.65,0,.35,1);       /* ida e volta: flutuação, pulso */
  --e-mola:cubic-bezier(.34,1.4,.64,1);   /* passa do ponto e volta: hover */
  --t-reveal:.78s;

  /* marca */
  --paper:#FAFAFA;
  --navy:#10104F;
  --dark:#000811;
  --green:#15F35B;
  --teal:#15E574; --cyan:#15AAE0; --blue:#1599FF;

  /* superfícies claras */
  --surface:#FFFFFF;
  --tint:#F4F5FA;
  --ink:#000811;
  --body:#2A2A5E;
  --muted:rgba(16,16,79,.70);
  --faint:rgba(16,16,79,.48);
  --line:rgba(16,16,79,.14);
  --line-2:rgba(16,16,79,.08);

  --grad:linear-gradient(158deg,#15F35B,#15E574 15%,#15AAE0 56%,#1599FF);
  --grad-x:linear-gradient(90deg,#15F35B,#15E574 15%,#15AAE0 56%,#1599FF);

  --display:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:24px;

  /* raio e profundidade: a peça deixa de ser uma caixa de traço fino e passa a
     ter volume, que é o que Getnet e Paytime usam para separar plano de fundo
     de plano de produto sem precisar de mais uma linha na tela */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(16,16,79,.04), 0 10px 26px -14px rgba(16,16,79,.20);
  --sh-2:0 2px 6px rgba(16,16,79,.05), 0 22px 48px -18px rgba(16,16,79,.26);
  --sh-3:0 44px 90px -34px rgba(11,16,48,.34), 0 8px 20px -10px rgba(11,16,48,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;max-width:100%}
/* overflow-x:hidden faz da raiz um contêiner de rolagem, e aí o cabeçalho
   sticky para de grudar: ele já não grudava antes deste trabalho. clip corta
   a rolagem lateral do mesmo jeito sem criar contêiner. A linha de cima fica
   como reserva para navegador sem suporte a clip. */
html,body{overflow-x:clip}
body{background:var(--paper);color:var(--body);font:400 16.5px/1.7 var(--display);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv05","ss01"}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

/* ============================================================
   MOTION
   Um vocabulário só, com quatro gestos: entrar (revelação com direção),
   flutuar (produto), acompanhar (parallax de ponteiro e de rolagem) e
   responder (hover). Tudo desligado em prefers-reduced-motion.
   ============================================================ */

/* .js só existe quando o script roda: sem ele o conteúdo nasce visível */
.js [data-reveal]{opacity:0;
  transform:translate3d(var(--rx,0px),var(--ry,18px),0) scale(var(--rs,1));
  filter:blur(var(--rb,0px));
  transition:opacity var(--t-reveal) var(--e-out),transform var(--t-reveal) var(--e-out),filter var(--t-reveal) var(--e-out);
  transition-delay:var(--d,0ms);will-change:opacity,transform}
.js [data-reveal].in{opacity:1;transform:none;filter:none;will-change:auto}

/* direções: o bloco entra do lado a que pertence, e não tudo de baixo */
.js [data-reveal=esq]{--rx:-32px;--ry:0px}
.js [data-reveal=dir]{--rx:32px;--ry:0px}
.js [data-reveal=escala]{--ry:26px;--rs:.965}
.js [data-reveal=foco]{--ry:14px;--rb:9px}
/* título fatiado: o bloco não se move, quem entra são as palavras */
.js [data-reveal=palavras]{opacity:1;transform:none;filter:none}

/* título: cada palavra sobe de dentro de uma máscara. É o gesto que dá
   assinatura à página, então só o h1 e os h2 de seção o recebem. */
.masc{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.14em;margin-bottom:-.14em}
.js .palavra{display:inline-block;transform:translateY(112%);opacity:0;
  transition:transform .95s var(--e-out),opacity .5s linear;transition-delay:var(--d,0ms)}
.js .in .palavra,.js .palavra.in{transform:none;opacity:1}
/* Terminada a entrada, a máscara e a camada de composição saem do caminho.
   Cada palavra com transform em transição vira camada própria no compositor, e
   um título de dez palavras deixa dez camadas vivas para sempre: custa memória
   à toa e atrapalha até a captura de tela da página. */
.js .pronto .masc{overflow:visible}
.js .pronto .palavra{transform:none;transition:none;will-change:auto}

/* flutuação e giro lento: usam as propriedades translate/rotate, separadas de
   transform, que fica reservado ao parallax escrito pelo script */
@keyframes bal{0%,100%{translate:-50% -50%}50%{translate:-50% calc(-50% - 15px)}}
@keyframes bal-b{0%,100%{translate:-50% -50%;rotate:-4deg}50%{translate:-50% calc(-50% - 11px);rotate:-1.5deg}}
@keyframes bal-c{0%,100%{translate:-50% -50%}50%{translate:-50% calc(-50% - 9px)}}
@keyframes gira{to{rotate:360deg}}
/* entrada do palco: scale e opacity são propriedades livres aqui, porque
   translate carrega a flutuação e transform carrega o parallax */
@keyframes entra-maq{from{opacity:0;scale:.9}to{opacity:1;scale:1}}
@keyframes entra-chip{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
@keyframes entra-anel{from{opacity:0;scale:.72}to{opacity:1;scale:1}}
@keyframes pulsa{0%,100%{opacity:.55;scale:.94}50%{opacity:1;scale:1.04}}

/* entrada do hero, sem esperar scroll */
@keyframes sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.js .hero-grid>*{animation:sobe 1s var(--e-out) both}
.js .hero-grid>*:nth-child(2){animation-delay:.14s}

/* o cabeçalho ganha peso quando a página sai do topo, e carrega a barra de
   progresso da leitura: é a única régua honesta de "quanto falta" */
header{transition:box-shadow .3s var(--e-out),background .3s var(--e-out)}
header.stuck{box-shadow:0 1px 24px rgba(16,16,79,.08)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--grad-x);transform:scaleX(var(--prog,0));transform-origin:0 50%;
  opacity:0;transition:opacity .3s var(--e-out)}
header.stuck::after{opacity:1}

@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;filter:none}
  .js .palavra{transform:none;opacity:1}
  header::after{display:none}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut);width:100%}
.hero-grid>*,.split>*,.cards>*,.panels>*,.prods>*,.calc>*,.step>*{min-width:0}
@media(max-width:400px){:root{--gut:18px}}
section{padding:104px 0;border-top:1px solid var(--line-2)}
@media(max-width:760px){section{padding:72px 0}}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:10px;z-index:200;background:var(--surface);padding:12px 18px;border:1px solid var(--navy)}

/* ---------------- tipografia ---------------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.label{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.kicker{display:flex;align-items:center;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:18px}
.kicker::before{content:"";width:22px;height:3px;background:var(--grad-x);flex:none}
h1{font:800 clamp(32px,5.6vw,68px)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);overflow-wrap:break-word}
h2{font:700 clamp(26px,3.4vw,40px)/1.14 var(--display);letter-spacing:-.03em;margin-bottom:16px;color:var(--ink)}
h3{font:600 18px/1.35 var(--display);letter-spacing:-.018em;color:var(--ink)}
.lede{font-size:clamp(16.5px,1.4vw,18.5px);line-height:1.65;color:var(--muted);max-width:56ch}
.note{font-size:15px;line-height:1.7;color:var(--muted)}
.fig{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
b,strong{font-weight:600;color:var(--ink)}
h1 em{font-style:normal;padding-bottom:.04em;background-image:var(--grad-x);background-repeat:no-repeat;background-size:100% .1em;background-position:0 92%;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* selo de fonte e competência — NF-2 */
.selo{display:block;margin-top:22px;overflow-wrap:break-word;padding-top:12px;border-top:1px solid var(--line-2);font:400 11.5px/1.5 var(--mono);letter-spacing:.04em;color:var(--faint)}

/* ---------------- botões ---------------- */
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:15px 28px;border-radius:var(--r-pill);font:600 14.5px/1 var(--display);letter-spacing:-.01em;border:1px solid transparent;cursor:pointer;
  transition:transform .4s var(--e-mola),box-shadow .4s var(--e-out),filter .3s var(--e-out),border-color .3s var(--e-out)}
.btn-fill{background:var(--grad-x);color:var(--dark);box-shadow:0 6px 18px -8px rgba(21,153,255,.55)}
.btn-fill:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 14px 30px -12px rgba(21,153,255,.62)}
/* a luz atravessa o botão uma vez, no hover: sinaliza que ele é a ação principal
   sem precisar de mais um rótulo na tela */
.btn-fill::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.6) 48%,transparent 68%);
  transform:translateX(-130%);transition:transform .8s var(--e-out)}
.btn-fill:hover::after{transform:translateX(130%)}
.btn-line{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn-line:hover{border-color:transparent;transform:translateY(-2px);box-shadow:var(--sh-1)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-sm{padding:11px 20px;font-size:13px}
/* a seta do rótulo anda quando o cursor chega */
.btn .seta{transition:transform .4s var(--e-mola)}
.btn:hover .seta{transform:translateX(4px)}
@media(max-width:480px){
  .hero-ctas,.close-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn,.close-ctas .btn{justify-content:center;width:100%}
}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:60;background:rgba(250,250,250,.88);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.bar{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.bar .brand img{height:26px}
nav{display:flex;gap:26px}
nav a{font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);transition:color .15s}
nav a:hover,nav a[aria-current=page]{color:var(--navy)}
nav a{position:relative;padding-bottom:4px}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad-x);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e-out)}
nav a:hover::after,nav a[aria-current=page]::after{transform:scaleX(1)}
.burger{display:none;background:none;border:1px solid var(--line);width:40px;height:38px;align-items:center;justify-content:center;gap:4px;flex-direction:column;border-radius:2px}
.burger i{display:block;width:16px;height:1.5px;background:var(--navy)}
@media(max-width:1000px){
  nav{position:fixed;inset:68px 0 auto;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gut) 22px;display:none}
  nav.open{display:flex}
  nav a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:13px}
  nav a[aria-current=page]{border-bottom:1px solid var(--line-2);color:var(--navy)}
  .burger{display:flex}
  .bar .btn{display:none}
}

/* ---------------- hero ---------------- */
.hero{border-top:none;padding:80px 0 96px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}
.hero .lede{margin:26px 0 34px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
/* mídia do hero: moldura arredondada, véu de marca no pé e leve parallax.
   A foto deixa de ser um retângulo solto e passa a ser peça de composição. */
/* proporção fixa: as fotos do banco vêm em formatos diferentes e uma delas
   sozinha empurrava o hero para fora da tela. O corte é da moldura, não do
   arquivo, então trocar a foto não mexe no layout. */
.hero-media{position:relative;border:1px solid var(--line-2);background:var(--surface);
  overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-2);aspect-ratio:4/3}
.hero-media img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.04) translate3d(0,calc(var(--py,0)*.5px),0);
  transition:transform .8s var(--e-out)}
.hero-media:hover img{transform:scale(1.075) translate3d(0,calc(var(--py,0)*.5px),0)}
.hero-media::after{content:"";position:absolute;inset:auto 0 0;height:38%;pointer-events:none;
  background:linear-gradient(to top,rgba(16,16,79,.30),transparent)}
/* selo sobre a foto: um dado, não uma legenda decorativa */
.media-selo{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:10px;
  padding:10px 15px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);box-shadow:var(--sh-1);
  font:600 12.5px/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.media-selo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(21,243,91,.22)}
@media(max-width:520px){.media-selo{left:12px;bottom:12px;font-size:11.5px;padding:9px 13px}}

/* painel de estado — substitui mock de dashboard, sem número sem fonte */
.stack{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;display:flex;flex-direction:column;min-width:0}
.stack-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.stack-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 22px;border-bottom:1px solid var(--line-2);transition:background .3s var(--e-out),padding-left .3s var(--e-out)}
.stack-row:hover{background:var(--tint);padding-left:28px}
.stack-name{display:flex;flex-direction:column;gap:4px;min-width:0;font:600 15.5px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.stack-name em{font:400 12.5px/1.45 var(--display);font-style:normal;color:var(--muted)}
.stack-foot{padding:16px 22px;font:400 12px/1.6 var(--mono);color:var(--faint)}
@media(max-width:520px){
  .stack-row{flex-direction:column;align-items:flex-start;gap:9px}
  .stack-head,.stack-row,.stack-foot{padding-left:18px;padding-right:18px}
}

/* ---------------- grades de conteúdo ---------------- */
/* Blocos separados, não grade conectada: a última linha fica com menos cards,
   sem esticar (larguras desiguais) e sem célula morta (buraco cinza). */
.cards{display:flex;flex-wrap:wrap;gap:20px;list-style:none;margin-top:52px}
.card{flex:0 1 calc((100% - 40px) / 3);   /* três por linha, sem crescer */
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1);
  padding:clamp(24px,3.2vw,32px) clamp(20px,3vw,28px);
  display:flex;flex-direction:column;gap:12px}
/* fio de marca que se desenha no hover, em vez de mais uma borda permanente */
.card::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--grad-x);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--e-out)}
.card:hover::before{transform:scaleX(1)}
@media(max-width:1000px){.card{flex-basis:calc((100% - 20px) / 2)}}
@media(max-width:640px){.card{flex-basis:100%}}
.card .doc,.card .card-cta{margin-top:auto;align-self:flex-start}
.card,.pnl,.prod{transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),background .35s var(--e-out),border-color .35s var(--e-out)}
.card:hover,.prod:hover,.pnl:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(16,16,79,.12)}
.card .label{margin-bottom:2px}
.card h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card p{font-size:15px;line-height:1.7;color:var(--muted)}
.card p+p{margin-top:8px}
.card-num{font:600 13px/1 var(--mono);color:var(--faint)}

/* ritmo: seções alternam a base, como fazem Getnet, Nubank e Inter */
section.alt{background:var(--tint)}
section.alt .card,section.alt .pnl,section.alt .prod,section.alt .stack{background:var(--surface)}
section.alt .card{border-color:rgba(16,16,79,.10)}

/* trilho horizontal: no celular a série de cards vira rolagem com encaixe,
   em vez de uma coluna longa que empurra o resto da página para baixo */
@media(max-width:900px){
  .cards.rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    border-left:none;border-top:1px solid var(--line);
    margin-right:calc(var(--gut) * -1);padding-right:var(--gut);
    scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  .cards.rail{flex-wrap:nowrap;gap:14px}
  .cards.rail>.card{flex:0 0 min(78vw,320px);scroll-snap-align:start}
  .cards.rail>.card:last-child{border-right:1px solid var(--line)}
  .rail-dica{display:block}
}
.rail-dica{display:none;margin-top:14px;font:400 11.5px/1.5 var(--mono);color:var(--faint)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:36px}}

/* painéis de número */
.panels{display:flex;flex-wrap:wrap;gap:18px;margin-top:56px}
.pnl{flex:1 1 260px}
@media(max-width:900px){.pnl{flex:1 1 100%}}
.pnl{position:relative;overflow:hidden;background:var(--surface);padding:28px 26px;
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
/* o número é o assunto do painel: ganha um facho de cor atrás, no canto */
.pnl::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(21,170,224,.16),transparent);
  opacity:0;transition:opacity .5s var(--e-out)}
.pnl:hover::after{opacity:1}
.pnl .label{margin-bottom:14px;display:block}
.pnl .big{font:600 clamp(25px,3.4vw,38px)/1.1 var(--mono);letter-spacing:-.03em;margin-bottom:12px;color:var(--ink);overflow-wrap:break-word}
.pnl .big u{display:block;margin-top:7px;text-decoration:none;font-size:.42em;font-weight:400;color:var(--muted);letter-spacing:0}
.pnl p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.pnl p+p{margin-top:9px}

/* passos numerados */
.steps{counter-reset:s;margin-top:52px;border-top:1px solid var(--line)}
.step{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line-2)}
.step::before{content:counter(s,decimal-leading-zero);font:600 13px/1.6 var(--mono);color:var(--faint)}
.step p{font-size:15px;line-height:1.7;color:var(--muted);margin-top:8px}
@media(max-width:620px){.step{grid-template-columns:1fr;gap:6px}}

/* citação / dado desconfortável */
.callout{margin-top:40px;padding:clamp(22px,3vw,30px) clamp(20px,3vw,32px);background:var(--tint);color:var(--ink);border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;font:600 clamp(17px,2.2vw,23px)/1.45 var(--display);letter-spacing:-.02em}
.callout b,.callout span{color:var(--ink)}

/* em apuração / ressalva — azul da marca = ainda não publicado */
.hold{border-left:3px solid var(--blue);background:rgba(21,153,255,.07);padding:16px 18px;border-radius:0 var(--r-sm) var(--r-sm) 0}
.hold .h{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);margin-bottom:9px}
.hold p{font-size:14.5px;line-height:1.65;color:var(--muted)}
.hold p+p{margin-top:8px}
.hold .ref{display:block;margin-top:8px;font:400 11.5px/1.5 var(--mono);color:var(--faint)}

/* etiquetas de estado (R3/R6) */
.tag{display:inline-flex;align-items:center;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.tag-beta{border-color:var(--blue);color:var(--navy)}
.tag-live{border-color:var(--green);color:var(--navy)}
.tag-soon{border-color:var(--line);color:var(--faint)}
.beta{font:500 10px/1 var(--mono);letter-spacing:.14em;color:var(--navy);border:1px solid var(--blue);padding:4px 7px;align-self:center}

/* carrossel contínuo das operações */
.marquee{--mq-dur:46s;position:relative;margin-top:44px;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--sh-1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:mq var(--mq-dur) linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
.mq-copy{display:flex}
.mq-item{flex:0 0 auto;display:flex;align-items:center;justify-content:center;padding:24px 38px;min-height:92px}
.mq-item img{max-height:36px;width:auto;opacity:.72;transition:opacity .2s}
.mq-item:hover img{opacity:1}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:520px){.mq-item{padding:18px 26px;min-height:76px}.mq-item img{max-height:30px}}
/* sem animação: vira uma faixa rolável à mão */
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}

/* perguntas */
.qa{margin-top:52px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line-2)}
summary{cursor:pointer;list-style:none;display:flex;gap:20px;align-items:baseline;padding:24px 0;font:600 18px/1.4 var(--display);letter-spacing:-.02em;color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary .n{font:400 12px/1.6 var(--mono);color:var(--faint);flex:none}
summary::after{content:"+";margin-left:auto;font:300 22px/1 var(--display);color:var(--faint);transition:transform .35s var(--ease),color .3s var(--ease)}
summary:hover::after{color:var(--navy)}
details[open] summary::after{transform:rotate(180deg)}
.ans{animation:sobe .5s var(--ease) both}
details[open] summary::after{content:"–"}
.ans{padding:0 0 26px 44px;max-width:72ch}
.ans p{font-size:15.5px;line-height:1.75;color:var(--muted)}
.ans p+p{margin-top:12px}
@media(max-width:600px){.ans{padding-left:0}summary{font-size:16px;gap:12px}}

/* fecho */
.close{text-align:center;background:var(--tint)}
.close h2{max-width:24ch;margin:0 auto 18px}
.close .lede{margin:0 auto 32px;text-align:center}
.close-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------------- rodapé ---------------- */
footer{background:var(--tint);color:var(--muted);border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
@media(max-width:520px){.fbot{flex-direction:column;gap:8px}}
footer .label{color:var(--faint)}
footer h4{margin-bottom:16px}
footer .note{color:var(--muted)}
footer a{display:block;padding:6px 0;transition:color .15s}
footer a:hover{color:var(--navy)}
.social{display:flex;gap:14px;margin-top:18px}
.social a{padding:0;font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.social a:hover{color:var(--navy)}
.fbot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 11.5px/1.6 var(--mono);color:var(--faint)}

/* ---------------- formulários ---------------- */
.form{display:grid;gap:18px;max-width:560px;margin-top:40px;width:100%}
.form label{display:block;font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{
  width:100%;padding:15px 17px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-sm);
  font:400 16px/1.5 var(--display);color:var(--ink);
  transition:border-color .3s var(--e-out),box-shadow .3s var(--e-out)}
.form textarea{min-height:132px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(21,153,255,.14)}
.check{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.check input{margin-top:5px;accent-color:var(--navy)}
.form-note{font:400 12.5px/1.6 var(--mono);color:var(--faint)}

/* ============================================================
   Página do licenciado — F1 a F5 do SDD
   ============================================================ */

/* retrato da rede */
.portrait{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);color:var(--body);padding:28px;min-width:0}
.portrait .label{color:var(--faint)}
.portrait-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px}
.stackbar{overflow:hidden;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--tint)}
.stackbar-track{display:flex;height:64px;transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease)}
.stackbar.on .stackbar-track{transform:scaleX(1)}
.seg{flex:0 0 var(--w);background:var(--tone)}
.seg+.seg{border-left:1px solid var(--surface)}
@media(max-width:520px){.stackbar-track{height:52px}.portrait{padding:20px}}
.portrait-note{margin-top:16px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.legend{margin-top:20px;display:grid;gap:2px}
.leg{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:11px;
  padding:9px 0;border-bottom:1px solid var(--line-2);font:400 12.5px/1.4 var(--mono);color:var(--muted)}
.leg:last-child{border-bottom:none}
.leg u{text-decoration:none;min-width:52px;text-align:right;color:var(--ink);font-weight:500}
.leg i{width:10px;height:10px;border-radius:2px;background:var(--tone)}
.leg b{color:var(--ink)}

/* histograma */
.hist{display:grid;grid-template-columns:repeat(var(--cols,8),1fr);gap:8px;height:280px;margin-top:8px;border-bottom:1px solid var(--line)}
.col{position:relative;height:100%;text-align:center}
.col .bar{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:var(--grad);border-radius:1px;transform-origin:bottom;transform:scaleY(0);transition:transform .95s var(--ease)}
.hist.on .col .bar{transform:scaleY(1)}
.col .v{position:absolute;left:0;right:0;bottom:calc(var(--h) + 10px);font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.col.edge .v{color:var(--ink);font-weight:600}
.axis{display:grid;grid-template-columns:repeat(var(--cols,8),1fr);gap:8px;margin-top:12px}
.axis span{font:400 10.5px/1.35 var(--mono);color:var(--faint);text-align:center;word-break:break-word}
/* eixo de duas linhas: nome do nivel em cima, faixa de renda embaixo */
.axis span b{display:block;font-weight:600;color:var(--muted);margin-bottom:3px}
.axis span i{font-style:normal}
.axis-legenda{margin-top:14px;font:400 12px/1.7 var(--mono);color:var(--faint)}
.axis-legenda b{color:var(--muted);font-weight:600}
@media(max-width:760px){.hist{height:200px;gap:4px}.axis{gap:4px}.axis span{font-size:9px}}
@media(max-width:520px){
  .hist{height:170px;gap:3px}
  .col .v{font-size:9.5px;bottom:calc(var(--h) + 6px)}
  .axis{gap:3px}
  .axis span{font-size:8px;writing-mode:vertical-rl;transform:rotate(180deg);margin:0 auto;white-space:nowrap}
  /* a faixa de renda nao cabe no eixo vertical: fica so o nome do nivel,
     e as faixas seguem legiveis na legenda logo abaixo do grafico */
  .axis span i{display:none}
  .axis span b{display:inline;margin:0}
}

/* calculadora */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;margin-top:52px}
.calc-entrada{display:grid;gap:20px}
@media(max-width:980px){.calc{grid-template-columns:1fr;gap:32px}}
.ctrl{border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);background:var(--surface);padding:clamp(22px,3vw,30px)}
.field+.field{margin-top:34px}
.field-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.field-top .fig{font-size:24px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--line);outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--navy);cursor:pointer}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--navy);cursor:pointer}
.scale{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font:400 11px/1.4 var(--mono);color:var(--faint)}
.scale b{color:var(--muted);font-weight:400}
.readout{border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden;background:var(--surface)}
.ro{padding:24px clamp(18px,3vw,26px);border-bottom:1px solid var(--line-2)}
.ro .label{display:block;margin-bottom:10px}
.ro .big{font:600 clamp(24px,3.6vw,40px)/1.1 var(--mono);letter-spacing:-.03em;color:var(--ink);overflow-wrap:break-word}
.memo{padding:20px clamp(18px,3vw,26px);overflow-wrap:break-word;background:var(--tint);border-top:1px solid var(--line-2);font:400 13px/1.75 var(--mono);color:var(--muted)}
.memo b{color:var(--ink);font-weight:500}
.ctx{padding:22px 24px;border-left:3px solid var(--green);border-radius:0 var(--r) var(--r) 0;background:var(--tint);font-size:15.5px;line-height:1.7;color:var(--muted)}

/* escada do Plano Fast */
.ladder{margin-top:44px;max-width:820px}
.rung{display:grid;grid-template-columns:240px 1fr 72px;align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.rung .track{display:block;height:8px;border-radius:var(--r-pill);overflow:hidden;background:var(--line-2)}
.rung .fill{display:block;height:100%;background:var(--grad-x);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
.ladder.on .fill{transform:scaleX(1)}
.rung .pct{text-align:right;font:600 14px/1 var(--mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.rung.top .pct{color:var(--ink)}
@media(max-width:700px){.rung{grid-template-columns:130px 1fr 60px;gap:12px;font-size:13.5px}}

/* produtos */
.prods{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:52px}
@media(max-width:860px){.prods{grid-template-columns:1fr}}
.prod{background:var(--surface);padding:clamp(26px,3.4vw,36px) clamp(22px,3vw,32px);
  border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  display:flex;flex-direction:column}
.prod h3{font-size:clamp(20px,2.4vw,24px);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prod>.note{margin-bottom:22px}
.prod ul{list-style:none;margin-bottom:22px;border-top:1px solid var(--line-2)}
.prod .hold{margin-top:auto}
.prod .doc{margin-top:auto}
.prod li{padding:11px 0;border-bottom:1px solid var(--line-2);font-size:14.5px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.doc{display:inline-flex;align-items:center;gap:8px;margin-top:22px;align-self:flex-start;font:500 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--navy);border-bottom:2px solid var(--green);padding-bottom:6px}
.doc{transition:border-color .3s var(--ease)}
.doc:hover{border-bottom-color:var(--blue)}

/* ---------- WhatsApp ----------
   Só existe no HTML quando data/site.json tem o número: sem ele o build não
   escreve o elemento, em vez de deixar um botão que não leva a lugar nenhum. */
.wa{position:fixed;right:20px;bottom:20px;z-index:60;display:grid;place-items:center;
    width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
    box-shadow:0 8px 24px rgba(0,8,17,.22);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,8,17,.28)}
@media(max-width:640px){.wa{right:14px;bottom:14px;width:52px;height:52px}}
@media(prefers-reduced-motion:reduce){.wa{transition:none}.wa:hover{transform:none}}

/* O aceite é a única linha do formulário com peso legal: herdava o estilo de
   rótulo de campo (mono, caixa alta, entreletra larga) e virava um bloco difícil
   de ler. Como frase, é lida. Vale para os dois formulários. */
.form label.check{font:400 14.5px/1.55 var(--display);letter-spacing:normal;
                  text-transform:none;color:var(--muted);margin-bottom:0}

/* ============================================================
   PALCO DE PRODUTO
   O que faltava no site: a maquininha. Referência declarada: Paytime (terminal
   em primeiro plano, etiquetas flutuando em volta, anéis concêntricos ao fundo)
   e Getnet (superfície clara, produto com sombra longa, sem fundo escuro).
   O terminal é um SVG: troca por foto real é trocar o src, o palco não muda.
   ============================================================ */
.palco{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1;
  --px:0;--py:0}
.palco>*{position:absolute;left:var(--x,50%);top:var(--y,50%);
  transform:translate3d(calc(var(--px) * var(--dep,1) * 1px),calc(var(--py) * var(--dep,1) * 1px),0);
  transition:transform .6s cubic-bezier(.2,.9,.3,1)}

/* fundo: anéis concêntricos e um halo de marca que respira */
.palco .anel{translate:-50% -50%;border-radius:50%;border:1px solid var(--line-2);pointer-events:none}
.palco .anel{animation:entra-anel 1.2s var(--e-out) both}
.anel-1{--dep:.15;width:92%;aspect-ratio:1}
.anel-2{--dep:.3;width:68%;aspect-ratio:1;border-color:rgba(16,16,79,.10);animation-delay:.08s}
.anel-3{--dep:.45;width:46%;aspect-ratio:1;border-style:dashed;border-color:rgba(16,16,79,.14);
  animation:gira 52s linear infinite,entra-anel 1.2s var(--e-out) .16s both}
.halo{--dep:.1;translate:-50% -50%;width:86%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(21,229,116,.20),rgba(21,170,224,.12) 48%,transparent 72%);
  animation:pulsa 10s var(--e-io) infinite}

/* os aparelhos */
.maq{height:auto;pointer-events:none}
.maq-frente{--x:50%;--y:50%;--dep:.7;width:48%;z-index:3;
  filter:drop-shadow(0 44px 60px rgba(11,16,48,.30)) drop-shadow(0 8px 16px rgba(11,16,48,.16));
  animation:bal 7.5s var(--e-io) infinite,entra-maq 1.1s var(--e-out) .1s both}
.maq-lado{--x:22%;--y:34%;--dep:1.15;width:34%;z-index:2;
  filter:drop-shadow(0 30px 46px rgba(11,16,48,.24));
  animation:bal-b 9.5s var(--e-io) -2.5s infinite,entra-maq 1.1s var(--e-out) .26s both}
.maq-cartao{--x:76%;--y:74%;--dep:1.5;width:46%;z-index:4;
  filter:drop-shadow(0 26px 44px rgba(11,16,48,.26));
  animation:bal-c 8.5s var(--e-io) -4s infinite,entra-maq 1.1s var(--e-out) .38s both}

/* etiquetas: cada uma carrega um fato do produto, não um adjetivo */
.chip{--dep:2.1;z-index:5;translate:-50% -50%;display:flex;align-items:center;gap:11px;
  padding:11px 17px 11px 12px;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-2);
  max-width:min(214px,58%);
  animation:bal-c 7s var(--e-io) infinite,entra-chip .85s var(--e-mola) both}
.chip b{display:block;font:600 13.5px/1.2 var(--display);letter-spacing:-.015em;color:var(--ink)}
.chip u{display:block;margin-top:3px;text-decoration:none;font:500 10px/1 var(--mono);
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.chip i,.camada i,.regra i{flex:none;width:30px;height:30px;border-radius:10px;background:var(--grad);
  display:grid;place-items:center}
.chip i::before,.camada i::before,.regra i::before{content:"";width:15px;height:15px;background:#fff;
  -webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.ico-pix{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6 21.4 12 12 21.4 2.6 12z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-cartao{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.2' y='4.6' width='19.6' height='14.8' rx='3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Cpath d='M2.2 9.6h19.6' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E")}
.ico-raio{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.4 2 4 13.6h6.1L9.8 22l9.6-11.9h-6.3z' fill='%23000'/%3E%3C/svg%3E")}
.ico-escudo{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4 20 5.4v6c0 5-3.4 8.6-8 10.2-4.6-1.6-8-5.2-8-10.2v-6z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M8.6 11.9l2.5 2.6 4.4-4.7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-check{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.6l4.8 4.9L19.6 6.8' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-marca{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.9 5.9 6.5.95-4.7 4.6 1.1 6.5L12 17.3l-5.8 3.05 1.1-6.5-4.7-4.6 6.5-.95z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-livro{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 4.6h6a3 3 0 0 1 3 3v11.8a2.4 2.4 0 0 0-2.4-2.4H3.4z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M20.6 4.6h-6a3 3 0 0 0-3 3v11.8a2.4 2.4 0 0 1 2.4-2.4h6.6z' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-loja{--ico:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.4 9.4 5 3.6h14l1.6 5.8a3.3 3.3 0 0 1-6.4 1 3.3 3.3 0 0 1-6.4 0 3.3 3.3 0 0 1-4.4-1z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Cpath d='M5 12.6v7.8h14v-7.8' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* posição das etiquetas: --x é o centro, e a metade da largura precisa caber
   dentro do palco, senão a peça sai da tela e o overflow-x do body a corta */
.chip-a{--x:14%;--y:20%;animation-delay:-1.2s,.55s}
.chip-b{--x:80%;--y:40%;--dep:2.5;animation-delay:-3.4s,.7s}
.chip-c{--x:26%;--y:82%;--dep:1.9;animation-delay:-5.6s,.85s}

@media(max-width:980px){
  .palco{max-width:440px}
  .chip{max-width:min(180px,60%)}
  .chip{padding:9px 14px 9px 10px;gap:9px}
  .chip b{font-size:12px}.chip u{font-size:9px}
  .chip i{width:26px;height:26px;border-radius:8px}
  .chip i::before{width:13px;height:13px}
}
@media(max-width:760px){
  /* no celular o palco tem 330px: três etiquetas em cima do aparelho viram
     ruído, e a terceira ainda encostava na borda da tela */
  .palco{max-width:min(330px,88vw)}
  .chip{max-width:148px;padding:8px 12px 8px 9px;gap:8px;border-radius:var(--r-sm)}
  .chip b{font-size:11.5px}
  .chip u{font-size:8.5px;letter-spacing:.1em}
  .chip i{width:24px;height:24px;border-radius:7px}
  .chip i::before{width:12px;height:12px}
  .chip-a{--x:22%;--y:14%}
  .chip-b{--x:74%;--y:36%}
  .chip-c{display:none}
  .maq-lado{--x:19%;--y:32%;width:36%}
}
@media(prefers-reduced-motion:reduce){
  .palco>*{transition:none}
  .anel,.anel-3,.halo,.maq,.chip{animation:none;opacity:1;scale:1}
  .anel,.halo,.chip{translate:-50% -50%}
  .maq-frente,.maq-lado,.maq-cartao{translate:-50% -50%}
}

/* ============================================================
   RITMO E TEXTURA
   O que dava cara de gerado: toda seção com a mesma altura, todo bloco com o
   mesmo traço de 1px, fundo chapado do topo ao rodapé. Aqui a base ganha
   variação de luz e as seções param de ter todas o mesmo peso.
   ============================================================ */
body{background:
  radial-gradient(1100px 620px at 82% -8%,rgba(21,170,224,.09),transparent 62%),
  radial-gradient(900px 520px at -10% 6%,rgba(21,243,91,.07),transparent 58%),
  var(--paper);
  background-attachment:fixed}
section.alt{background:linear-gradient(180deg,var(--tint),rgba(244,245,250,.35))}
section.alt,section.close{border-top-color:transparent}

/* grão fino por cima de tudo: tira o aspecto de superfície digital perfeita,
   que é o que mais entrega layout gerado */
body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}
header,.wa{z-index:60}

/* o traço do kicker cresce quando o bloco entra */
.kicker::before{transition:width .8s var(--e-out) .1s}
.js [data-reveal] .kicker::before,.js .kicker[data-reveal]::before{width:0}
.js [data-reveal].in .kicker::before,.js .kicker[data-reveal].in::before{width:22px}

/* seta dos links de documento anda no hover */
.doc .seta{display:inline-block;transition:transform .4s var(--e-mola)}
.doc:hover .seta{transform:translateX(5px)}

/* perguntas: a resposta abre em altura animada, não em salto */
details{border-bottom:1px solid var(--line-2);transition:background .35s var(--e-out)}
details[open]{background:linear-gradient(90deg,rgba(21,229,116,.05),transparent 42%)}
summary{transition:padding-left .4s var(--e-out)}
summary:hover{padding-left:8px}
.ans{animation:abre .55s var(--e-out) both}
@keyframes abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* o rodapé e a barra de logos ganham a mesma família de sombra do resto */
.mq-item img{transition:opacity .35s var(--e-out),transform .45s var(--e-mola);filter:grayscale(1)}
.mq-item:hover img{opacity:1;transform:scale(1.08);filter:grayscale(0)}

/* a navegação de celular não usa o sublinhado deslizante: lá o item é uma linha
   inteira da lista, e o traço embaixo vira ruído */
@media(max-width:1000px){nav a::after{display:none}}

/* ============================================================
   PEÇAS DE SEÇÃO
   Entraram no lugar das cinco fotos de banco geradas por IA. Rosto sintético
   é o que mais entrega página gerada, e nenhuma das cinco dizia algo que o
   texto ao lado já não dissesse. Cada peça abaixo carrega informação da
   própria seção, escrita no HTML: dá para ler, buscar e traduzir.
   ============================================================ */
.peca{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:clamp(24px,3vw,34px);
  transform:translate3d(0,calc(var(--py,0) * .35px),0);transition:transform .6s var(--e-out)}
.peca>.label{display:block;margin-bottom:16px}
.peca .camada+.label,.peca .regra+.label,.peca .etapa+.label{display:block;margin-top:26px}
.peca .pe{margin-top:22px;padding-top:16px;border-top:1px solid var(--line-2);
  font:400 12.5px/1.6 var(--mono);color:var(--faint)}

/* camadas: o que o parceiro põe e o que a casa põe, na mesma pilha */
.camada{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--tint);
  transition:transform .45s var(--e-out),box-shadow .45s var(--e-out),background .3s var(--e-out)}
.camada+.camada{margin-top:9px}
.camada:hover{transform:translateX(6px);box-shadow:var(--sh-1);background:var(--surface)}
.camada b{display:block;font:600 14.5px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink)}
.camada em{display:block;margin-top:3px;font:400 12.5px/1.45 var(--display);font-style:normal;color:var(--muted)}
/* a camada do parceiro não é uma a mais: é a que ele traz */
.camada.sua{background:var(--surface);border-color:rgba(16,16,79,.22);box-shadow:var(--sh-1)}

/* regras: afirmação e o porquê dela, uma por linha */
.regra{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line-2)}
.regra:last-of-type{border-bottom:none;padding-bottom:0}
.regra i{margin-top:1px}
.regra b{display:block;font:600 14.5px/1.35 var(--display);letter-spacing:-.015em;color:var(--ink)}
.regra em{display:block;margin-top:4px;font:400 13px/1.55 var(--display);font-style:normal;color:var(--muted)}

/* trilha: etapas ligadas por um fio que se desenha quando a peça entra */
.etapa{position:relative;display:grid;grid-template-columns:32px 1fr;gap:16px;padding-bottom:24px}
.etapa:last-of-type{padding-bottom:0}
.etapa::before{content:"";position:absolute;left:15.5px;top:34px;bottom:0;width:1px;background:var(--line)}
.etapa:last-of-type::before{display:none}
.etapa .no{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);
  font:600 11.5px/1 var(--mono);color:var(--faint)}
.etapa.on .no{background:var(--grad);border-color:transparent;color:#fff}
.etapa b{display:block;padding-top:7px;font:600 15px/1.3 var(--display);letter-spacing:-.02em;color:var(--ink)}
.etapa em{display:block;margin-top:5px;font:400 13px/1.6 var(--display);font-style:normal;color:var(--muted)}
.js [data-reveal] .etapa::before{transform:scaleY(0);transform-origin:50% 0;
  transition:transform .85s var(--e-out) .25s}
.js [data-reveal].in .etapa::before{transform:scaleY(1)}
@media(prefers-reduced-motion:reduce){.js [data-reveal] .etapa::before{transform:none}}

/* capas: os e-books como pilha de material, não como foto de gente lendo */
.capas{position:relative;display:grid;place-items:center;min-height:min(340px,78vw);
  transform:translate3d(0,calc(var(--py,0) * .35px),0);transition:transform .6s var(--e-out)}
.capa{grid-area:1/1;width:min(196px,42%);aspect-ratio:3/4;border-radius:var(--r);
  padding:20px 18px;display:flex;flex-direction:column;justify-content:space-between;
  color:#fff;box-shadow:var(--sh-3);
  background:linear-gradient(155deg,#1B1B58,#10104F 55%,#080826);
  transition:rotate .7s var(--e-mola),translate .7s var(--e-mola)}
/* o b global é escuro (b,strong{color:var(--ink)}): na capa ele precisa
   voltar a ser claro, senão o título some no fundo azul */
.capa span{font:500 9.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.6}
.capa b{font:700 17px/1.25 var(--display);letter-spacing:-.02em;color:#fff}
.capa u{display:block;margin-top:8px;text-decoration:none;font:400 11.5px/1.45 var(--display);color:#fff;opacity:.62}
.capa{position:relative}
.capa::after{content:"";position:absolute;left:18px;top:46px;width:34px;height:3px;border-radius:2px;
  background:var(--grad-x)}
/* leque: a capa do meio fica inteira à frente e as outras duas aparecem pela
   borda. translate em % é relativo à própria capa, então o afastamento
   acompanha a largura dela e o leque não desmonta quando a coluna encolhe. */
.capa-1{z-index:1;rotate:-13deg;translate:-82% 7%}
.capa-2{z-index:3;rotate:-2deg;translate:0 -4%}
.capa-3{z-index:2;rotate:13deg;translate:82% 9%;background:linear-gradient(155deg,#15AAE0,#1599FF 60%,#10104F)}
.capas:hover .capa-1{rotate:-17deg;translate:-84% 4%}
.capas:hover .capa-3{rotate:17deg;translate:84% 6%}
@media(max-width:520px){
  .capa{width:min(148px,44%)}
  .capa b{font-size:14.5px}
  .capa-1{translate:-62% 7%}
  .capa-3{translate:62% 9%}
}

/* hero de coluna única: o blog não tem artigo publicado, e uma foto de banco
   no lugar do vazio era exatamente o que a seção seguinte se recusa a fazer */
.hero-grid.solo{grid-template-columns:1fr}
.hero-grid.solo .lede{max-width:62ch;font-size:clamp(17px,1.7vw,21px)}
.hero-grid.solo h1{max-width:16ch}