/* ============================================================
   AG4 - Sistema de design "Documento de Consultoria"
   Proposta v2. Identidade: preto, branco, papel, regua e acao (#C30000).
   Tema unico, claro.
   Tipografia: Montserrat exclusivamente (SOM 27).
   Cor de acao usada com parcimonia: marcador, nunca superficie.
   Geometria: retangulos, blocos e linhas estruturais (SOM 29).
   ============================================================ */

/* ---------- 0. Tipografia auto-hospedada ----------
   Montserrat variable (wght 100-900), subset latin + latin-ext.
   Um unico arquivo cobre toda a hierarquia da marca:
   Light 300 · Regular 400 · SemiBold 600 · Bold 700 · Black 900.
   Licenca SIL OFL 1.1 em assets/fonts/OFL.txt                        */
@font-face{
  font-family:'Montserrat';
  src:url('fonts/montserrat-var.woff2') format('woff2-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* identidade AG4: preto, branco, papel, regua, acao */
  --black:#000000;
  --white:#FFFFFF;
  --paper:#F3F6F9;
  --rule:#B7B7B7;
  --red:#C30000;

  /* a marca aplicada */
  --brand:#000000;

  /* superficie */
  --bg:#FFFFFF;
  --surface:#F3F6F9;
  --surface-2:#E7ECF2;
  --band:#000000;
  --band-ink:#FFFFFF;
  --band-mute:rgba(255,255,255,.72);

  /* Texto auxiliar e a mesma tinta preta em densidade menor, nunca um
     cinza novo: #B7B7B7 puro da 2.3:1 em branco e reprova em corpo. */
  --ink:rgba(0,0,0,.84);
  --ink-strong:#000000;
  --mute:rgba(0,0,0,.64);
  --faint:rgba(0,0,0,.58);

  /* linhas: fio fino para divisao, regua para grafico */
  --line:rgba(0,0,0,.12);
  --line-strong:rgba(0,0,0,.26);
  --line-band:rgba(255,255,255,.20);

  /* acao */
  --cta-bg:#000000;
  --cta-ink:#FFFFFF;
  --cta-bg-hover:#262626;

  /* forma - trava de raio (SOM 29) */
  --r-card:16px;
  --r-btn:12px;
  --r-chip:8px;

  /* ritmo */
  --maxw:1200px;
  --pad:32px;
  --nav-h:72px;
  --idx-h:46px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
/* [hidden] mora na folha do navegador, e qualquer display declarado aqui
   a vence - folha do autor ganha da folha do agente. Sem este reforco,
   esconder algo que ja tem display simplesmente nao funciona: aconteceu
   com .formcontato (display:flex) e com .btn (display:inline-flex), nos
   dois casos deixando na tela um elemento que o JS mandou sumir.
   Por isso a regra e global e com !important, em vez de remendo por caso. */
[hidden]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + var(--idx-h) + 16px);-webkit-text-size-adjust:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}

::selection{background:var(--brand);color:var(--bg)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* ---------- 3. Escala tipografica (SOM 27) ---------- */
.display{
  font-size:clamp(34px,5.1vw,58px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--ink-strong);
  text-wrap:balance;
}
h2,.h2{
  font-size:clamp(27px,3.7vw,46px);
  font-weight:900;
  letter-spacing:-.028em;
  line-height:1.07;
  color:var(--ink-strong);
  text-wrap:balance;
}
h3,.h3{
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--ink-strong);
}
.lead{
  font-size:clamp(18px,1.5vw,21px);
  font-weight:400;
  line-height:1.62;
  color:var(--mute);
  max-width:62ch;
}
p{max-width:68ch}
.small{font-size:15px;line-height:1.6;color:var(--mute)}
.cap{font-size:13px;font-weight:300;line-height:1.5;color:var(--faint)}
.label{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint);
}
.tm{color:var(--red);font-weight:800;font-size:.72em;vertical-align:.42em;letter-spacing:0}
strong,b{font-weight:700;color:var(--ink-strong)}
.num{font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.02em}

/* ---------- 4. Grade ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:32px}
section{padding:104px 0;position:relative}
section + section{border-top:1px solid var(--line)}
.band{background:var(--band);color:var(--band-ink);border-top:0}
.band h2,.band .display,.band h3{color:var(--band-ink)}
.band .lead,.band p,.band .small{color:var(--band-mute)}
.band .lead.emph{color:#fff;font-weight:600;max-width:52ch}
.band .label{color:var(--band-mute)}
.tint{background:var(--surface)}

/* ---------- 5. Navegacao principal ---------- */
.topbar{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:24px}
/* cabecalho: mark compacto 'ag4'. O descritor do lockup completo
   nao sobrevive a esta altura, entao ele fica para o rodape. */
.brand img{height:32px;width:auto}
.navright{display:flex;align-items:center;gap:20px;flex:none}

.navlinks{display:flex;align-items:center;gap:28px}
/* :not(.btn) e obrigatorio. Sem ele, ".navlinks a" (0,1,1) vence ".btn" e
   ".btn-sm" (0,1,0) e zera o padding lateral do CTA do cabecalho.          */
.navlinks a:not(.btn){
  position:relative;
  font-size:14.5px;font-weight:600;color:var(--mute);
  padding:4px 0 6px;transition:color .2s var(--ease);
  white-space:nowrap;flex:none;
}
/* barra que cresce da esquerda para a direita */
.navlinks a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
}
.navlinks a:not(.btn):hover{color:var(--ink-strong)}
.navlinks a:not(.btn)[aria-current="page"]{color:var(--ink-strong)}
.navlinks a:not(.btn)[aria-current="page"]::after{animation:barGrow .55s var(--ease) both}
.nav .btn{flex:none}

@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;gap:5px;flex-direction:column}
.burger span{display:block;width:24px;height:2px;background:var(--ink-strong);transition:.25s var(--ease)}

/* ---------- 6. Indice do documento (dispositivo-assinatura) ----------
   Substitui o "eyebrow acima de cada secao". Os rotulos de secao viram
   navegacao real com scroll-spy, em vez de etiqueta decorativa.        */
.docindex{
  position:sticky;top:var(--nav-h);z-index:55;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.docindex .wrap{
  display:flex;align-items:center;gap:0;height:var(--idx-h);
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scroll-behavior:smooth;
}
.docindex .wrap::-webkit-scrollbar{display:none}
.docindex.can-scroll .wrap{cursor:grab}
.docindex .wrap.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none;-webkit-user-select:none}
/* sinaliza que ha mais itens a direita */
.docindex::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:40px;
  background:linear-gradient(90deg,transparent,var(--bg));
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
}
.docindex.can-scroll::after{opacity:1}
.docindex a{
  position:relative;
  flex:none;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--faint);
  padding:0 18px;height:100%;
  display:inline-flex;align-items:center;
  white-space:nowrap;transition:color .2s var(--ease);
}
/* mesma barra do menu principal, seguindo a navegacao */
.docindex a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--red);border-radius:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease);
}
.docindex a:first-child{padding-left:0}
.docindex a:hover{color:var(--ink-strong)}
.docindex a.is-current{color:var(--ink-strong)}
.docindex a.is-current::after{transform:scaleX(1)}

/* ---------- 7. Botoes (trava de raio + contraste) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:inherit;font-size:15.5px;font-weight:700;
  padding:15px 34px;border-radius:var(--r-btn);
  border:2px solid transparent;cursor:pointer;
  white-space:nowrap;
  transition:background .22s var(--ease),transform .22s var(--ease),border-color .22s var(--ease);
}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink)}
.btn-primary:hover{background:var(--cta-bg-hover)}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:none;color:var(--ink-strong);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--brand);color:var(--brand)}
.btn-onband{background:#fff;color:#000}
.btn-onband:hover{background:#E7ECF2}
.btn-onband:active{transform:translateY(1px)}
.btn-ghostband{background:none;color:#fff;border-color:var(--line-band)}
.btn-ghostband:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* padding lateral generoso: ~2x o tamanho da fonte, folga optica em Montserrat */
.btn-sm{padding:13px 28px;font-size:14px}
.link{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15.5px;font-weight:700;color:var(--ink-strong);
}
.link .arw{color:var(--red);transition:transform .22s var(--ease);display:inline-block}
.link:hover .arw{transform:translateX(5px)}
.band .link{color:#fff}

/* ---------- 8. Hero ---------- */
.hero{padding:88px 0 96px;border-top:0}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero .display{margin:18px 0 22px}
.hero .lead{margin-bottom:34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:13px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.hero-eyebrow::before{content:"";width:34px;height:3px;background:var(--red);border-radius:2px;flex:none}
.hero-inner{padding:76px 0 64px;border-top:0}
.hero-inner .display{margin:16px 0 20px}

/* ---------- 9. Diagrama: fluxo estrutural ---------- */
.flow{border:1px solid var(--line);border-radius:var(--r-card);padding:36px 34px;background:var(--surface)}
.flow-steps{display:flex;flex-direction:column;gap:0}
.flow-step{display:flex;align-items:center;gap:16px;padding:14px 0}
.flow-step .dotline{display:flex;flex-direction:column;align-items:center;align-self:stretch;flex:none}
.flow-step .dot{width:9px;height:9px;border-radius:50%;background:var(--line-strong);flex:none;margin-top:8px}
.flow-step:last-child .dot{background:var(--red)}
.flow-step .stem{width:1px;flex:1;background:var(--line-strong);margin:6px 0 -14px}
.flow-step:last-child .stem{display:none}
.flow-step .t{font-size:16px;font-weight:600;color:var(--mute)}
.flow-step:last-child .t{font-weight:800;color:var(--ink-strong);font-size:18px}
.flow-note{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.flow-note .q{font-size:17px;font-weight:800;color:var(--ink-strong);line-height:1.35;letter-spacing:-.015em}
.flow-note .a{font-size:14px;color:var(--faint);margin-top:8px;line-height:1.55}

/* ---------- 10. Piramide da Decisao ---------- */
.pyr{display:flex;flex-direction:column;gap:8px}
.lvl{
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  border-radius:var(--r-chip);
  background:var(--bg);
  padding:16px 20px;
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  transition:border-color .25s var(--ease);
}
.lvl .n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);flex:none;min-width:58px}
.lvl .t{font-size:17px;font-weight:800;color:var(--ink-strong);letter-spacing:-.015em}
.lvl .d{font-size:13.5px;color:var(--faint);flex-basis:100%;line-height:1.5}
.lvl.w5{width:60%}
.lvl.w4{width:70%}
.lvl.w3{width:80%}
.lvl.w2{width:90%}
.lvl.w1{width:100%}
.lvl.top{border-left-color:var(--brand);background:var(--surface-2)}
.lvl.law{border-left-color:var(--red);position:relative}
.lvl.law .flag{
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--red);flex:none;
}
@media (max-width:900px){.lvl.w5,.lvl.w4,.lvl.w3,.lvl.w2,.lvl.w1{width:100%}}

/* ---------- 11. Linha do tempo ---------- */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.tl{padding:26px 26px 26px 0;border-top:2px solid var(--rule);position:relative}
.tl + .tl{padding-left:26px}
.tl:last-child{border-top-color:var(--red)}
.tl::before{content:"";position:absolute;top:-2px;left:0;width:2px;height:14px;background:var(--rule)}
.tl + .tl::before{left:26px}
.tl:last-child::before{background:var(--red)}
.tl .y{font-size:clamp(30px,3.4vw,42px);font-weight:900;color:var(--ink-strong);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.tl .d{font-size:14.5px;color:var(--mute);margin-top:12px;line-height:1.5;max-width:26ch}
.band .tl{border-top-color:var(--line-band)}
.band .tl .y{color:#fff}
.band .tl .d{color:var(--band-mute)}
.band .tl::before{background:var(--line-band)}
.band .tl:last-child{border-top-color:var(--red)}
.band .tl:last-child::before{background:var(--red)}
@media (max-width:820px){
  .timeline{grid-template-columns:1fr}
  .tl,.tl + .tl{padding:22px 0}
  .tl + .tl::before{left:0}
}

/* ---------- 12. Regua de oferta (escada) ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.rung{
  border:1px solid var(--line);
  border-top:3px solid var(--line-strong);
  border-radius:var(--r-card);
  padding:26px 24px 24px;
  background:var(--bg);
  display:flex;flex-direction:column;gap:16px;
  transition:border-color .25s var(--ease),transform .25s var(--ease);
}
.rung:hover{border-color:var(--line-strong)}
.rung.entry{border-top-color:var(--red)}
.rung h3{min-height:2.6em}
.rung .row{font-size:14px;line-height:1.55;color:var(--mute)}
.rung .row b{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.rung .free{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--red);letter-spacing:.04em}
.rung .mark{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--red);letter-spacing:.04em}
@media (max-width:1000px){.ladder{grid-template-columns:repeat(2,1fr)}.rung h3{min-height:0}}
@media (max-width:600px){.ladder{grid-template-columns:1fr}}

/* ---------- 13. Instrumentos (lista numerada) ----------
   O Radar e irmao do item 01 no DOM, porque e a saida daquele instrumento.
   No desktop a grade o reposiciona para a coluna da direita, alinhado ao 01.
   No celular ele cai logo apos o 01: sem "ao lado", a proximidade vertical
   e o unico recurso de agrupamento que sobra.                              */
.instblock{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px}
.instblock .inst{grid-column:1 / span 7}
.instblock .radar-slot{grid-column:8 / span 5;grid-row:1 / span 4;align-self:start}
.inst{display:grid;grid-template-columns:76px 1fr;gap:28px;padding:30px 0;border-top:1px solid var(--line)}
.inst .idx{font-size:15px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums;padding-top:3px}
.inst h3{margin-bottom:9px}
.inst h3 span{font-weight:500;color:var(--faint);font-size:15px;letter-spacing:0}
.inst p{font-size:15.5px;color:var(--mute);line-height:1.62}
.inst-close{
  margin-top:34px;padding:26px 28px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
  font-size:16.5px;font-weight:600;color:var(--ink-strong);line-height:1.55;max-width:none;
}
@media (max-width:900px){
  .instblock{grid-template-columns:1fr;gap:0}
  .instblock .inst,.instblock .radar-slot{grid-column:1 / -1;grid-row:auto}
  .instblock .radar-slot{margin:22px 0 10px}
}
@media (max-width:640px){.inst{grid-template-columns:1fr;gap:10px}}

/* ---------- 13b. Radar AG4 (SVG animado) ----------
   Substitui o PNG. Herda os tokens, entao responde ao tema.
   Os pontos partem do centro e montam o pentagono ao entrar em tela.  */
.radar{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--bg);
  padding:26px 22px 20px;
}
.radar-kicker{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}
.radar-kicker::before{content:"";width:26px;height:3px;background:var(--red);border-radius:2px;flex:none}
.radar h3{margin:12px 0 4px;font-size:20px}
.radar-head .cap{margin-bottom:6px}
.radar svg{width:100%;height:auto;overflow:visible}
.radar-foot{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--line);
}

/* pecas do grafico */
.radar-ring{fill:none;stroke:var(--line);stroke-width:1}
.radar-ring.outer{stroke:var(--rule)}
.radar-spoke{stroke:var(--line);stroke-width:1}
.radar-shape{
  fill:var(--brand);fill-opacity:.10;
  stroke:var(--brand);stroke-width:2;stroke-linejoin:round;
}
.radar-dot{fill:var(--brand);stroke:var(--bg);stroke-width:2.5}
.radar-dot.alert{fill:var(--red)}
.radar-axis{
  fill:var(--mute);font-family:inherit;font-size:14px;font-weight:600;
}
.radar-alert-t{
  fill:var(--red);font-family:inherit;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-anchor:middle;
}
/* estados da animacao: so ficam ocultos depois que o JS arma o radar */
.radar.armed .radar-grid,
.radar.armed .radar-labels,
.radar.armed .radar-shape,
.radar.armed .radar-alert-g{opacity:0}
.radar.armed .radar-grid{transition:opacity .6s var(--ease)}
.radar.armed .radar-shape{transition:opacity .8s var(--ease) .15s}
.radar.armed .radar-labels{transition:opacity .6s var(--ease) .25s}
.radar.armed .radar-alert-g{transition:opacity .5s var(--ease) 1s}
.radar.armed.in-view .radar-grid,
.radar.armed.in-view .radar-labels,
.radar.armed.in-view .radar-shape,
.radar.armed.in-view .radar-alert-g{opacity:1}

@media (max-width:1000px){
  .radar{max-width:520px}
}

/* ---------- 14. Perguntas do provedor ---------- */
.qlist{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.q{
  padding:24px 28px 24px 0;border-top:1px solid var(--line);
  font-size:17px;font-weight:600;color:var(--ink-strong);line-height:1.45;letter-spacing:-.012em;
}
.qlist .q:nth-child(even){padding-left:28px}
.band .q{border-top-color:var(--line-band);color:#fff}
@media (max-width:760px){
  .qlist{grid-template-columns:1fr}
  .qlist .q:nth-child(even){padding-left:0}
}

/* ---------- 15. Fit / nao-fit ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.fit ul{list-style:none;display:flex;flex-direction:column;gap:16px;margin-top:20px}
.fit li{font-size:16px;line-height:1.55;color:var(--mute);padding-left:20px;border-left:2px solid var(--line-strong)}
.fit .yes li{border-left-color:var(--brand)}
.fit .no li{border-left-color:var(--line-strong)}
@media (max-width:760px){.fit{grid-template-columns:1fr;gap:36px}}

/* ---------- 16. Ecossistema ---------- */
.eco{display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin-top:12px}
.eco-side{display:flex;flex-direction:column;gap:12px}
.eco-node{
  border:1px solid var(--line);border-radius:var(--r-chip);
  padding:16px 20px;background:var(--bg);
  font-size:15.5px;font-weight:700;color:var(--ink-strong);text-align:center;
}
.eco-node.core{border-color:var(--brand);border-width:2px;background:var(--surface)}
.eco-node .sub{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:5px}
.eco-join{width:56px;height:1px;background:var(--line-strong);position:relative}
.eco-join::before,.eco-join::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--line-strong);top:-2px}
.eco-join::before{left:0}
.eco-join::after{right:0}
.band .eco-node{background:transparent;border-color:var(--line-band);color:#fff}
.band .eco-node.core{border-color:#fff;background:rgba(255,255,255,.06)}
.band .eco-node .sub{color:var(--band-mute)}
.band .eco-join,.band .eco-join::before,.band .eco-join::after{background:var(--line-band)}
@media (max-width:760px){
  .eco{grid-template-columns:1fr;gap:14px}
  .eco-join{width:1px;height:32px;margin:0 auto}
  .eco-join::before,.eco-join::after{width:5px;height:5px;left:-2px;right:auto}
  .eco-join::before{top:0}
  .eco-join::after{top:auto;bottom:0}
}

/* ---------- 17. Time ---------- */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:12px}
.member .ph{
  aspect-ratio:4/5;border-radius:var(--r-card);
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:16px;
  overflow:hidden;position:relative;
}
.member .ph .cap{color:var(--mute)}
/* A foto ocupa a moldura inteira: o padding acima existe so para o
   estado de espaco reservado, quando ainda nao ha retrato. */
.member .ph img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;object-position:50% 30%;
}
.member h3{margin-top:16px}
.member .role{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-top:6px}
.member .bio{font-size:14.5px;line-height:1.62;color:var(--mute);margin-top:12px;max-width:none}
@media (max-width:760px){.team{grid-template-columns:1fr;gap:32px}}

/* ---------- 18. Estatistica ---------- */
.stat{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center}
.stat .fig{font-size:clamp(52px,7vw,88px);font-weight:900;color:var(--ink-strong);letter-spacing:-.045em;line-height:.9;font-variant-numeric:tabular-nums}
.band .stat .fig{color:#fff}
.stat .txt{font-size:clamp(17px,1.5vw,20px);font-weight:600;color:var(--mute);line-height:1.45;max-width:34ch}
.band .stat .txt{color:var(--band-mute)}
@media (max-width:640px){.stat{grid-template-columns:1fr;gap:16px}}

/* ---------- 19. FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;
  padding:24px 44px 24px 0;position:relative;
  font-size:17px;font-weight:700;color:var(--ink-strong);line-height:1.4;letter-spacing:-.012em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:31px;
  width:12px;height:2px;background:var(--red);
}
.faq summary::before{
  content:"";position:absolute;right:11px;top:26px;
  width:2px;height:12px;background:var(--red);
  transition:transform .25s var(--ease);
}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq .ans{padding:0 60px 26px 0;font-size:16px;color:var(--mute);line-height:1.65}

/* ---------- 20. Canais de contato ---------- */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.channel{
  border:1px solid var(--line);border-radius:var(--r-card);
  padding:30px 28px;display:flex;flex-direction:column;gap:12px;
  background:var(--bg);transition:border-color .25s var(--ease);
}
.channel:hover{border-color:var(--brand)}
.channel h3{font-size:20px}
.channel p{font-size:15px;color:var(--mute);flex:1}
@media (max-width:860px){.channels{grid-template-columns:1fr}}

/* ---------- 20b. Formulario de contato ----------
   Campos com a mesma geometria dos outros retangulos do sistema
   (raio de chip, fio fino). O vermelho so aparece como marcador de
   erro e no foco, nunca como superficie.                           */
.formcontato,.formguia{display:flex;flex-direction:column;gap:22px}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{display:flex;flex-direction:column;gap:8px}
/* ".fld > span" pegaria tambem o texto de erro e venceria ".form-erro"
   por especificidade (0,1,1 contra 0,1,0). Por isso o rotulo e escopado
   dentro do label, onde o erro nao entra.                              */
.fld label > span{font-size:13px;font-weight:600;color:var(--mute);letter-spacing:.005em}
.fld input,.fld textarea{
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--ink-strong);
  background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-chip);
  padding:14px 16px;width:100%;
  transition:border-color .2s var(--ease);
}
.fld input::placeholder,.fld textarea::placeholder{color:var(--faint);opacity:1}
.fld input:hover,.fld textarea:hover{border-color:var(--ink-strong)}
.fld input:focus,.fld textarea:focus{border-color:var(--ink-strong)}
.fld textarea{min-height:148px;resize:vertical}
/* erro: fio vermelho no campo, texto vermelho abaixo */
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:var(--red)}
.form-erro,.form-erro-geral{font-size:13px;line-height:1.45;color:var(--red);font-weight:600}
.form-erro:empty,.form-erro-geral:empty{display:none}
.form-erro-geral{margin-top:-6px}
/* campo-isca: fora da tela, fora do foco, fora do leitor de tela */
.form-isca{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* o botao nao estica na coluna: a largura compacta e a do resto do sistema */
.formcontato .btn,.formguia .btn{margin-top:6px;align-self:flex-start}
/* no contato, desabilitado so acontece durante o envio; no guia e
   tambem o estado de espera, enquanto falta campo ou aceite. */
.formcontato .btn[disabled]{opacity:.55;cursor:progress}
.formguia .btn[disabled]{opacity:.55;cursor:not-allowed}
.form-nota{font-size:13px;line-height:1.55;color:var(--faint);max-width:46ch}
/* confirmacao: substitui o formulario no lugar dele */
.formok{
  border:1px solid var(--line-strong);border-left:3px solid var(--red);
  border-radius:var(--r-card);padding:34px 32px;background:var(--bg);
}
.formok .marca{width:9px;height:9px;border-radius:50%;background:var(--red)}
.formok p{margin-top:20px;font-size:18px;font-weight:600;line-height:1.5;color:var(--ink-strong);max-width:42ch}
.formok .cap{margin-top:12px}
@media (max-width:520px){
  .formcontato .btn,.formguia .btn{width:100%;justify-content:center}
}

/* ---------- 21. Material ---------- */
.material{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
@media (max-width:860px){.material{grid-template-columns:1fr;gap:32px}}

/* ---------- 22. Rodape ---------- */
footer{background:var(--surface);border-top:1px solid var(--line);padding:64px 0 40px}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:48px}
/* h3, nao h4: depois do h2 da ultima secao, um h4 pularia um nivel
   e quebraria o sumario que o leitor de tela usa para navegar. */
.fcol h3{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.fcol a{font-size:15px;color:var(--mute)}
.fcol a:hover{color:var(--ink-strong)}
/* rodape: a mesma marca compacta do cabecalho, um pouco maior. */
.fbrand img{height:38px;margin-bottom:22px}
.fbrand p{font-size:14.5px;color:var(--mute);max-width:38ch;line-height:1.6}
.fbottom{
  margin-top:52px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:var(--faint);
}
@media (max-width:860px){.fgrid{grid-template-columns:1fr;gap:36px}}

/* ---------- 23. Utilitarios de composicao ---------- */
.col-6{grid-column:span 6}
.col-5{grid-column:span 5}
.col-7{grid-column:span 7}
.col-8{grid-column:span 8}
.col-12{grid-column:span 12}
.start-7{grid-column:7 / span 6}
.start-8{grid-column:8 / span 5}
.stack{display:flex;flex-direction:column;gap:22px}
.stack-sm{display:flex;flex-direction:column;gap:12px}
.mt-l{margin-top:56px}
.mt-m{margin-top:36px}
.mt-s{margin-top:22px}
.rule{height:1px;background:var(--line);border:0}
@media (max-width:900px){
  .col-6,.col-5,.col-7,.col-8,.start-7,.start-8{grid-column:1 / -1}
  .grid{gap:28px}
}

/* ---------- 24. Movimento (MOTION_INTENSITY 3) ----------
   Reveal discreto na entrada, sem parallax, sem hijack.
   "Movimentos lentos, suaves e precisos" (SOM 32).            */
.rev{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rev.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;transition:none}
  .radar.armed .radar-grid,
  .radar.armed .radar-labels,
  .radar.armed .radar-shape,
  .radar.armed .radar-alert-g{opacity:1;transition:none}
  .navlinks a:not(.btn)[aria-current="page"]::after{animation:none;transform:scaleX(1)}
  .docindex a::after{transition:none}
  .docindex .wrap{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 25. Responsivo ---------- */
@media (max-width:960px){
  :root{--pad:24px}
  section{padding:76px 0}
  .hero{padding:64px 0 72px}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-inner{padding:56px 0 48px}
  .navlinks{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--line);padding:8px 24px 20px;
  }
  .navlinks.open{display:flex}
  .navlinks a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line)}
  .navlinks a:not(.btn)[aria-current="page"]{border-bottom-color:var(--line)}
  .navlinks .btn{margin-top:14px;justify-content:center}
  .burger{display:flex}
}
@media (max-width:520px){
  body{font-size:16px}
  .btn{width:100%;justify-content:center}
  .cta-row{flex-direction:column;align-items:stretch}
  .link{justify-content:center}
}

/* ---------- 26. Pagina do guia (material com cadastro) ----------
   Reaproveita .formcontato inteiro: campos, erros, campo-isca e estado
   de confirmacao sao os mesmos do formulario de contato. O que entra
   aqui e so o que a pagina do guia tem a mais - a capa, o sumario e o
   aceite de contato.                                                   */
.guiahero{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.guiahero .display{margin:18px 0 22px}

/* A capa flutua sobre o fundo claro: a sombra e o unico recurso de
   profundidade do sistema, e so aqui, porque e a foto de um objeto. */
.guiacapa{border-radius:var(--r-card);overflow:hidden;background:var(--black);box-shadow:0 22px 60px rgba(0,0,0,.22)}
.guiacapa img{display:block;width:100%;height:auto}

/* Ficha tecnica sob a capa: pequena, factual, sem adjetivo. */
.guiameta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.guiameta span{
  font-size:12.5px;font-weight:700;letter-spacing:.04em;
  color:var(--mute);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-chip);padding:7px 13px;
}

/* Sumario: a mesma lista numerada dos instrumentos, mais apertada,
   porque aqui sao dez itens de uma linha e nao cinco de um paragrafo. */
.sumario{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.sumario .cap-item{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:17px 0;border-top:1px solid var(--line)}
.sumario .cap-item .idx{font-size:14px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums;padding-top:2px}
.sumario .cap-item h3{font-size:17px;font-weight:600;letter-spacing:-.005em}
/* abertura e fecho nao sao capitulos numerados: travessao no lugar do numero */
.sumario .cap-item.extra .idx{color:var(--faint)}
.sumario .cap-item.extra h3{color:var(--mute);font-weight:500}
@media (max-width:760px){.sumario{grid-template-columns:1fr}}

/* Aceite de contato. Obrigatorio: sem ele o botao nao libera.
   align-items:flex-start porque o texto quebra em duas linhas e a
   caixa deve ficar na altura da primeira, nao centralizada no bloco. */
.aceite{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:flex-start;cursor:pointer}
.aceite input{
  width:19px;height:19px;margin:2px 0 0;flex:none;
  accent-color:var(--red);cursor:pointer;
}
.aceite span{font-size:14px;line-height:1.55;color:var(--mute);max-width:52ch}
.aceite a{color:var(--ink-strong);text-decoration:underline;text-underline-offset:2px}

/* Dica do que falta. Existe porque o botao fica desabilitado ate o
   formulario estar completo: sem esta linha, o visitante ve um botao
   morto e nao descobre o motivo. */
.form-dica{font-size:13px;line-height:1.5;color:var(--faint);font-weight:600}
.form-dica:empty{display:none}

/* Confirmacao do guia: herda .formok e acrescenta as duas acoes. */
.guiaok .acoes{display:flex;flex-wrap:wrap;gap:13px;margin-top:26px}
.guiaok .relogio{font-size:13px;color:var(--faint);margin-top:16px;max-width:46ch}
.guiaok .proximo{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.guiaok .proximo p{margin-top:0;font-size:16.5px;font-weight:600;color:var(--ink-strong);max-width:44ch}
.guiaok .proximo .cap{margin-top:10px;max-width:46ch}

@media (max-width:960px){
  .guiahero{grid-template-columns:1fr;gap:40px}
  /* a capa vem primeiro no celular: e ela que explica o que e a pagina */
  .guiahero .guiacapa-col{order:-1}
}
@media (max-width:520px){
  .guiaok .acoes{flex-direction:column;align-items:stretch}
}