/* ── BASE · versão 4 ────────────────────────────────────────────
   O chão de toda página. O bloco v4 vem do tokens-v4.css, aprovado
   em 22/09/2026. Abaixo dele, a ponte com a v3, que sai no lote de
   componentes.
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);
  font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-body);
  -webkit-font-smoothing:antialiased;font-variant-emoji:text}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--fw-title);text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);max-width:var(--measure-h1)}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);max-width:var(--measure-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)}
p{max-width:var(--measure-p)}
strong,b{font-weight:var(--fw-strong)}
img{max-width:100%;display:block}
a{color:inherit}
button{color:inherit}
input,textarea,select{font-size:16px}   /* iOS: sem zoom na tela */
::selection{background:var(--selection);color:var(--ink)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
code,kbd,pre{font-family:var(--font-code)}
.num{font-variant-numeric:tabular-nums}
.ap-name{text-transform:none}

/* ══ O ponto ══ */
.d{display:inline-block;flex:none;border-radius:50%;background:var(--dot)}
.d.agent{background:var(--dot-agent)}
.d.growth{background:var(--dot-growth)}

/* ══ Rótulo: caixa baixa, com o ponto ══ */
.lab{display:flex;align-items:center;gap:9px;font-size:var(--fs-label);
  font-weight:var(--fw-label);letter-spacing:var(--ls-label);color:var(--text-secondary)}
.lab::before{content:"";width:var(--dot-label);height:var(--dot-label);border-radius:50%;
  background:var(--dot);flex:none}

/* ══ Régua com ponto pousado ══ */
.rule{position:relative;height:1px;background:var(--line-hairline)}
.rule::before{content:"";position:absolute;top:-2px;left:var(--rule-dot,0);
  width:var(--dot-label);height:var(--dot-label);border-radius:50%;background:var(--dot)}

/* ══ Link: nasce um ponto quando o cursor chega ══ */
.lk{position:relative;display:inline-block;text-decoration:none;font-weight:600;color:var(--ink);
  transition:padding-left .28s var(--ease),color .2s}
.lk::before{content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;border-radius:50%;
  background:var(--dot);opacity:0;transform:scale(.4);transition:opacity .28s,transform .28s var(--ease)}
.lk:hover,.lk:focus-visible{padding-left:14px;color:var(--link)}
.lk:hover::before,.lk:focus-visible::before{opacity:1;transform:scale(1)}
/* Lote 33 · quando o cartão inteiro é o link, o ponto nasce no rótulo ao chegar o cursor. */
a:hover .lk,a:focus-visible .lk{padding-left:14px;color:var(--link)}
a:hover .lk::before,a:focus-visible .lk::before{opacity:1;transform:scale(1)}

/* ══ Movimento ══ */
.br{animation:breathe var(--breathe-1) var(--ease) infinite}
.br2{animation:breathe var(--breathe-2) var(--ease) infinite 1.6s}
.br3{animation:breathe var(--breathe-3) var(--ease) infinite 3s}
/* O comportamento só anda na seção que está na tela (classe posta por script). */
[data-behavior]:not(.is-visible) *{animation-play-state:paused}
/* A pausa do rodapé grava data-motion="off" no html. */
[data-motion="off"] *,[data-motion="off"] *::before,[data-motion="off"] *::after{animation-play-state:paused !important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* ══ O logotipo em HTML ══
   A marca 01: agentic, três pontos, people. Caixa baixa, Schibsted
   500, letra a -0,022em. Os pontos vêm dos tokens --logo-dot-* (lote
   30), pousados na base e subidos 0,04em. Parado. Os pontos sobem 4px
   e voltam só com o cursor em cima. Nunca abaixo de --logo-min. */
.ap-logo{display:inline-flex;align-items:baseline;font-family:var(--font-display);font-weight:var(--fw-wordmark);
  letter-spacing:-0.022em;line-height:1;text-transform:none;white-space:nowrap;color:var(--logo-ink,var(--ink))}
.ap-logo--nav{font-size:max(19px,var(--logo-min))}
.ap-logo--rodape{font-size:max(21px,var(--logo-min))}
.ap-logo--noite{--logo-ink:#FFFFFF;--logo-dot:var(--night-dot)}
.ap-logo--mono{--logo-dot:var(--logo-ink,var(--ink))}
.ap-logo__pts{display:inline-flex;align-items:baseline;gap:var(--logo-dot-gap);margin:0 var(--logo-dot-margin);position:relative;top:calc(var(--logo-dot-lift) * -1)}
.ap-logo__pts i{display:block;border-radius:50%;background:var(--logo-dot,var(--lapis))}
.ap-logo__pts i:nth-child(1){width:var(--logo-dot-1);height:var(--logo-dot-1)}
.ap-logo__pts i:nth-child(2){width:var(--logo-dot-2);height:var(--logo-dot-2)}
.ap-logo__pts i:nth-child(3){width:var(--logo-dot-3);height:var(--logo-dot-3)}
@keyframes ap-logo-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
a:hover .ap-logo__pts i,.ap-logo:hover .ap-logo__pts i{animation:ap-logo-hop 1.1s var(--ease) both}
a:hover .ap-logo__pts i:nth-child(2),.ap-logo:hover .ap-logo__pts i:nth-child(2){animation-delay:.15s}
a:hover .ap-logo__pts i:nth-child(3),.ap-logo:hover .ap-logo__pts i:nth-child(3){animation-delay:.3s}

/* ══ A barra · decisão do Daniel, 22/09 ══
   Clara, papel sólido, fio de 1px embaixo. No computador, fixa no topo.
   No celular, só a linha do logotipo e do botão fica fixa, e os links
   vêm numa segunda linha que rola com a página e desliza para o lado. */
.ap-nav{position:sticky;top:0;z-index:60;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:0 clamp(16px,2.4vw,32px);min-height:var(--nav-h);padding:0 clamp(20px,4vw,66px);background:var(--paper);border-bottom:1px solid var(--line)}
.ap-nav__top{display:contents}
.ap-nav__logo{grid-column:1;grid-row:1;display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.ap-nav__logo:hover{color:var(--ink)}
.ap-nav__cta{grid-column:3;grid-row:1;display:flex;align-items:center}
.ap-nav__links{grid-column:2;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:0 clamp(6px,1.2vw,18px);min-width:0}
.ap-nav__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-size:14px;font-weight:500;
  color:var(--gray);text-decoration:none;white-space:nowrap;transition:color .2s}
.ap-nav__links a:hover{color:var(--lapis)}
.ap-nav__links a[aria-current]::after{content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--lapis)}
.ap-nav__links .langsw{display:inline-flex}
@media (max-width:1060px){
  .ap-nav{position:relative;display:block;padding:var(--nav-h) 0 0;min-height:0}
  .ap-nav__top{display:flex;position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);align-items:center;justify-content:space-between;
    gap:16px;padding:0 20px;background:var(--paper);border-bottom:1px solid var(--line)}
  .ap-nav__links{justify-content:flex-start;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    padding:0 16px;scrollbar-width:none}
  .ap-nav__links::-webkit-scrollbar{display:none}
}

/* ══ O botão · a porta é um ponto ══
   A palavra em Instrument Sans 600, em ink, e um círculo lápis de 38px
   com uma semente branca de 6px. No hover o círculo cresce 1,12 vez, a
   semente 1,7 vez e o lápis escurece. Área de toque de 44px no mínimo. */
.ap-btn{display:inline-flex;align-items:center;gap:14px;min-height:44px;padding:0;margin:0;background:none;border:0;border-radius:0;
  font-family:var(--font-sans);font-size:16px;line-height:1.25;font-weight:600;letter-spacing:0;text-transform:none;text-align:left;
  color:var(--text-primary);text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.ap-btn:hover{color:var(--text-primary)}
.ap-btn__door{position:relative;flex:none;width:var(--btn-door);height:var(--btn-door);border-radius:50%;background:var(--btn-fill);
  transition:transform .28s var(--ease),background-color .2s}
.ap-btn__door i{position:absolute;left:50%;top:50%;width:var(--btn-seed-size);height:var(--btn-seed-size);margin:calc(var(--btn-seed-size) / -2) 0 0 calc(var(--btn-seed-size) / -2);
  border-radius:50%;background:var(--btn-seed);transition:transform .28s var(--ease)}
.ap-btn:hover .ap-btn__door,.ap-btn:focus-visible .ap-btn__door{transform:scale(1.12);background:var(--btn-fill-hover)}
.ap-btn:hover .ap-btn__door i,.ap-btn:focus-visible .ap-btn__door i{transform:scale(1.7)}
.ap-btn--quieto .ap-btn__door{width:var(--btn-door-quiet);height:var(--btn-door-quiet);background:transparent;border:1.5px solid var(--btn-fill)}
.ap-btn--quieto .ap-btn__door i{background:var(--btn-fill)}
.ap-btn--quieto:hover .ap-btn__door,.ap-btn--quieto:focus-visible .ap-btn__door{background:transparent;border-color:var(--btn-fill-hover)}
.ap-btn--quieto:hover .ap-btn__door i{background:var(--btn-fill-hover)}
.ap-btn--nav{font-size:14px;gap:10px}
.ap-btn--nav .ap-btn__door{width:var(--btn-door-nav);height:var(--btn-door-nav)}
.ap-btn--block{display:flex;width:100%;justify-content:space-between}
.ap-btn[aria-disabled="true"],.ap-btn:disabled{opacity:.4;cursor:not-allowed}
[data-tone="ink"] .ap-btn{color:#FFFFFF}

/* ══ Link ══ Dentro do parágrafo, lápis sublinhado. */
p a:not([class]){color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
p a:not([class]):hover{color:var(--link-hover)}
.lk{min-height:44px;display:inline-flex;align-items:center}
.lk::before{top:50%;margin-top:-2.5px}
[data-tone="ink"] .lk{color:#FFFFFF}
[data-tone="ink"] .lk:hover{color:var(--night-dot)}
.lab.lab--semponto::before{display:none}
.rule--veu,[data-tone="band"] .rule{background:var(--line-veil)}

/* ══ Perguntas · um ponto que cresce ao abrir, sem seta e sem sinal ══ */
details>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--dot);position:relative;top:-.2em;
  transition:width .28s var(--ease),height .28s var(--ease)}
details[open]>summary::before{width:9px;height:9px}
.ap-q{display:inline-block;flex:none;width:5px;height:5px;border-radius:50%;background:var(--dot);transition:width .28s var(--ease),height .28s var(--ease)}
[aria-expanded="true"] .ap-q{width:9px;height:9px}

/* ══ Formulário · campo de linha ══ */
.ap-field__label{display:block;margin-bottom:4px;font-size:var(--fs-label);line-height:1.3;font-weight:var(--fw-label);color:var(--text-secondary)}
.ap-field{display:block;width:100%;min-height:44px;padding:10px 0 9px;margin:0;border:0;border-bottom:1px solid var(--text-secondary);border-radius:0;
  background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-size:16px;line-height:1.4;outline:0;box-shadow:none}
.ap-field:focus{border-bottom:2px solid var(--focus-ring);padding-bottom:8px}
textarea.ap-field{min-height:96px;resize:vertical}
select.ap-field{cursor:pointer}
[data-tone="ink"] select.ap-field option{color:var(--ink)}

/* ══ Foto · a grade do Bob ══ */
.ap-foto{filter:saturate(.9) contrast(1.03) sepia(.04);border-radius:0}

/* ══ O rodapé ══ Claro, em papel, com a régua em cima. */
.ap-footer{background:var(--paper);color:var(--ink)}
.ap-motion{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0;margin:0;background:none;border:0;cursor:pointer;
  font:inherit;font-size:var(--fs-label);font-weight:var(--fw-label);color:var(--text-secondary)}
.ap-motion::before{content:"";width:var(--dot-label);height:var(--dot-label);border-radius:50%;background:var(--dot);flex:none}
.ap-motion:hover{color:var(--lapis)}

/* ══ Base herdada ══════════════════════════════════════════════ */
h4{font-family:var(--font-display);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-title)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
small{font-size:var(--fs-small)}
hr{height:0;border:0;border-top:1px solid var(--line-hairline)}
a{text-decoration:none}
a:hover{color:var(--link-hover)}
[data-tone="ink"] a:hover{color:var(--night-dot)}
a,button,[role="button"],input,select,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* O marcador de frase, do lote 26. Chapa sólida. line-height 0.8
   protege a linha vizinha. */
.ap-marca{
  display:inline-block;
  background:var(--link);
  color:var(--btn-seed);
  line-height:0.8;
  padding:0.06em 0.1em 0.1em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.ap-name{letter-spacing:-0.012em}

/* ══ LOTE 31 ═══════════════════════════════════════════════════ */

/* A porta da barra é quieta: contorno lápis de 28px, semente lápis.
   O botão cheio de cada tela é o da página. */
.ap-btn--nav .ap-btn__door{background:transparent;border:1.5px solid var(--btn-fill)}
.ap-btn--nav .ap-btn__door i{background:var(--btn-fill)}
.ap-btn--nav:hover .ap-btn__door,.ap-btn--nav:focus-visible .ap-btn__door{background:transparent;border-color:var(--btn-fill-hover)}
.ap-btn--nav:hover .ap-btn__door i,.ap-btn--nav:focus-visible .ap-btn__door i{background:var(--btn-fill-hover)}

/* Só para leitor de tela */
.ap-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* O momento grande. Um por tela, no máximo. */
.moment{display:block;font-family:var(--font-display);font-weight:var(--fw-moment);font-size:var(--fs-moment);
  line-height:var(--lh-moment);letter-spacing:var(--ls-moment);font-variant-numeric:tabular-nums}

/* O ponto final lápis do h1. O ponto de texto fica para o leitor de tela. */
.ap-fim{display:inline-block;width:.13em;height:.13em;margin-left:.035em;border-radius:50%;background:var(--dot);
  vertical-align:baseline;animation:breathe-e var(--breathe-2) var(--ease) infinite}

/* ══ Os pontos como dado ══ Número de pontos é o número real. */
ap-pontos{display:inline-flex;align-items:flex-end;gap:5px;vertical-align:middle;line-height:0}
ap-pontos i{display:block;flex:none;border-radius:50%;background:var(--dot)}
ap-pontos[tipo="nps"]{display:inline-grid;grid-template-columns:repeat(10,5px);gap:8px}
ap-pontos[tipo="nps"] i{width:5px;height:5px}
ap-pontos[tipo="turma"] i{width:6px;height:6px}
ap-pontos[tipo="turmas"]{gap:7px}
.ap-decor{opacity:.5}

/* ══ Os seis comportamentos ══
   Cada um só anda quando é o comportamento da tela (.is-visible). */
ap-comp{position:relative;display:block;flex:none}
ap-comp i{position:absolute;left:50%;top:50%;display:block;border-radius:50%;background:var(--dot)}
[data-behavior]:not(.is-visible) i{animation-play-state:paused}

ap-comp[tipo="tres"]{width:100px;height:100px}
ap-comp[tipo="tres"] i{left:0;top:0;background:var(--lapis)}

ap-comp[tipo="mente"]{width:132px;height:132px}
ap-comp[tipo="mente"] .c{width:16px;height:16px;margin:-8px 0 0 -8px;transform:scale(1.6);animation:ap-mente-c 4.2s var(--ease) 1 both}
ap-comp[tipo="mente"] .s{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;opacity:0;animation:ap-mente-s 4.2s var(--ease) 1 both}
ap-comp[tipo="mente"][repetir] .c,ap-comp[tipo="mente"][repetir] .s{animation-iteration-count:infinite}

ap-comp[tipo="divisao"]{width:120px;height:64px}
ap-comp[tipo="divisao"] i{width:16px;height:16px;margin:-8px 0 0 -8px}
ap-comp[tipo="divisao"] .a{animation:ap-div-a 5s var(--ease) infinite}
ap-comp[tipo="divisao"] .b{background:var(--dot-growth);animation:ap-div-b 5s var(--ease) infinite}

ap-comp[tipo="orbita"]{width:88px;height:88px}
ap-comp[tipo="orbita"] .c{width:22px;height:22px;margin:-11px 0 0 -11px}
ap-comp[tipo="orbita"] .s{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--dot-agent);animation:ap-orb var(--orb,8s) linear infinite}
[data-tone="ink"] ap-comp[tipo="orbita"] .c{animation:breathe var(--breathe-1) var(--ease) infinite}

ap-comp[tipo="travessia"]{width:100%;max-width:440px;height:40px}
ap-comp[tipo="travessia"]::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line-hairline)}
ap-comp[tipo="travessia"] .p{left:0;width:8px;height:8px;margin:-4px 0 0 -4px;animation:ap-trav 11s var(--ease) infinite}

ap-comp[tipo="enxame"]{width:220px;height:130px}
ap-comp[tipo="enxame"] .e{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;transform:translate(var(--x1),var(--y1));animation:ap-enx 7s var(--ease) infinite alternate}
ap-comp[tipo="enxame"] .e.agent{background:var(--dot-agent)}
ap-comp[tipo="enxame"] .e.growth{background:var(--dot-growth)}

/* A travessia na página: o fio da rolagem. Só a partir de 1240px. */
.ap-fio{display:none}
@media (min-width:1240px){
  .ap-fio{display:block;position:fixed;left:22px;top:calc(var(--nav-h) + 28px);bottom:28px;width:1px;background:var(--line);z-index:50;pointer-events:none}
  .ap-fio i{position:absolute;left:0;top:var(--p,0%);width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:var(--lapis);transform:translate(-50%,-50%)}
}
@media print{.ap-fio{display:none}.ap-fim,ap-pontos i,ap-comp i{animation:none !important}}