/* =========================================================================
   Template Ads — home v5 minimalista (16/10/2026)
   Camada por cima de v2, v2.1, v2.2, v3 e v3.1. Só o necessário para:
   topo enxuto (1 botão), "Como ajudamos" em 3 itens, faixa de prova, "Por que existimos",
   dúvidas em <details>, botão final — e as páginas novas como-funciona.html e casos.html.
   Nenhuma cor nova: tudo vem dos tokens de styles-v2.css.
   ========================================================================= */

/* ---------- Ritmo geral: mais ar entre poucas coisas ---------- */
:root { --section-y: clamp(44px, 6vw, 88px); }
@media (max-width: 699px) { :root { --section-y: 40px; } }
footer { padding-bottom: 48px; }                         /* sem barra fixa na home: não precisa dos 128 px */
@media (max-width: 768px) { footer { padding-bottom: 40px; padding-top: 36px; } }

/* ---------- 1. Topo ---------- */
.hero { padding-top: clamp(28px, 4.5vw, 64px) !important; padding-bottom: clamp(36px, 5vw, 72px); }
.hero .lead { font-size: 18px; margin-top: 18px; max-width: 40ch; }
.hero-actions { margin-top: 26px; }
.hero-mini { max-width: 38ch; line-height: 1.45; }
.hero h1.h1-ia { max-width: 22ch; }
@media (max-width: 699px) {
  .hero { padding-top: 22px !important; padding-bottom: 28px; }
  .hero h1.h1-ia { font-size: 31px; }
  .hero .lead { font-size: 17px; margin-top: 14px; }
  .hero-actions { margin-top: 20px; }
}

/* Mapa causal no topo: só em tela larga e só com o nome do resultado ("versão leve").
   Abaixo de 1000 px ele sai da home e fica em como-funciona.html (lá, completo). */
.hero .causal-wrap.causal-leve { display: none; }
/* v5b: entre 700 e 999 px o topo ficava com a metade direita vazia. Agora o mapa leve aparece desde 700 px:
   de 860 px em diante fica ao lado do texto (duas colunas); de 700 a 859 px desce para baixo do botão, centralizado. */
@media (min-width: 700px) {
  .hero .causal-wrap.causal-leve { display: block; }
}
@media (min-width: 700px) and (max-width: 859px) {
  .hero .causal-wrap.causal-leve { margin-top: 28px; max-width: 520px; }
}
@media (min-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr 1fr !important; }
}
/* A órbita girando alargava a página em até ~70 px (rolagem lateral em 1000–1280 px; já existia na home v4):
   o "clip" corta só o que passa da lateral, sem criar barra de rolagem. */
.hero, .mapa-pagina { overflow-x: clip; }
.causal-leve .node-causes { display: none; }
.causal-leve .node { padding: 11px 14px; }
.causal-leve .causal-hint { margin-top: 20px; }
.causal-leve .causal-head b { font-size: 20px; }

/* Menu da home sem botão: o único botão principal é o do corpo da página (topo, meio e fim). */
header.site .wrap { justify-content: space-between; }

/* ---------- 2. Como ajudamos ---------- */
#como-ajudamos { padding-top: clamp(24px, 3vw, 40px); }
#como-ajudamos h2, #por-que-existimos h2, #faq h2 { font-size: clamp(26px, 2.8vw, 34px); max-width: none; }
.ajuda { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 40px; margin-top: 22px; }
.ajuda li { border-top: 2px solid var(--ink-900); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ajuda li::before { content: ""; position: absolute; top: -2px; left: 0; width: 44px; height: 6px; background: var(--brand); }
.ajuda h3 { font-size: 21px; }
.ajuda p { color: var(--text-muted); font-size: 16px; line-height: 1.45; max-width: 34ch; }
.ajuda .link-arrow { margin-top: 4px; font-size: 15px; align-self: flex-start; min-height: 32px; }
.cta-meio { margin-top: 30px; }
@media (max-width: 860px) {
  .ajuda { grid-template-columns: 1fr; gap: 18px; }
  .ajuda h3 { font-size: 19px; }
  .cta-meio .btn { width: 100%; }
  .cta-meio .btn .btn-label { flex: 1; justify-content: center; }
}

/* ---------- 3. Faixa de prova ---------- */
.prova { background: var(--bg-inverse); color: var(--text-inverse); padding: clamp(26px, 3vw, 40px) 0; }
.prova .wrap { display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.prova .proof-num {
  background: var(--brand); color: var(--paper-100); flex: none;
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; padding: 12px 18px 14px;
}
.prova .proof-num small {
  display: block; font-family: var(--font-body); font-size: 11px; font-weight: 600; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;
}
.prova-texto { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.prova-texto p { font-size: 17px; line-height: 1.4; color: var(--text-inverse-muted); }
.prova-texto p strong { color: var(--paper-100); font-weight: 600; }
.prova-fonte { display: block; margin-top: 2px; font-size: 13px; }
.prova .link-arrow { color: var(--accent-on-dark); align-self: flex-start; min-height: 32px; }
@media (max-width: 560px) {
  .prova .proof-num { font-size: 34px; }
}

/* ---------- 4. Por que existimos ---------- */
#por-que-existimos { padding-bottom: clamp(36px, 5vw, 64px); }
#por-que-existimos .section-sub { margin-top: 14px; font-size: 18px; max-width: 56ch; color: var(--text); }
.fundador { margin-top: 24px; padding: 18px 22px; gap: 20px; max-width: 520px; }
.fundador-nome { font-size: 22px; }
.fundador-papel { margin: 2px 0 6px; }
.fundador-texto .fundador-direto { margin-top: 0; }
@media (max-width: 560px) {
  .fundador { grid-template-columns: auto 1fr; gap: 16px; padding: 16px; }
}
/* tela larga: texto à esquerda, foto e nome à direita (sem metade da página vazia) */
@media (min-width: 900px) {
  #por-que-existimos .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; column-gap: clamp(32px, 6vw, 88px); align-items: center; }
  #por-que-existimos h2 { grid-column: 1; grid-row: 1; }
  #por-que-existimos .section-sub { grid-column: 1; grid-row: 2; }
  #por-que-existimos .fundador { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-self: start; width: 100%; }
}

/* ---------- 5. Dúvidas ---------- */
#faq { background: var(--bg-alt); }
#faq .wrap { display: block; }
.faq-lista { margin-top: 18px; max-width: 820px; }
.faq-item summary { padding: 18px 0; font-size: 17px; }
.faq-item p { max-width: 70ch; }

/* ---------- 6. Botão final ---------- */
#comece.comece-home { background: var(--action); color: var(--paper-100); }
#comece.comece-home h2 { color: var(--paper-100); font-size: clamp(26px, 3vw, 38px); max-width: 24ch; }
.cta-final { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }
#comece.comece-home .btn { --btn-bg: var(--ink-900); }
#comece.comece-home .btn:hover { background: #1E1E1C; }
#comece.comece-home .btn .btn-icon { background: var(--brand); }
.selos { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; font-weight: 500; }
.selos li::before { content: "·"; margin-right: 8px; font-weight: 700; }
@media (max-width: 700px) {
  .cta-final { flex-direction: column; align-items: stretch; gap: 16px; }
  #comece.comece-home .btn { width: 100%; }
  #comece.comece-home .btn .btn-label { flex: 1; justify-content: center; }
  .selos { flex-direction: column; gap: 2px; }
}

/* =========================================================================
   Páginas novas: como-funciona.html e casos.html
   ========================================================================= */
.pagina-topo { padding-bottom: clamp(20px, 3vw, 36px); }
.pagina-topo h1 { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 52px); line-height: 1.12; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }
.pagina-topo .lead { font-size: 19px; color: var(--text-muted); margin-top: 16px; max-width: 52ch; }
.pagina-topo .hero-actions { margin-top: 22px; }
.sub-secao { scroll-margin-top: 96px; }
@media (max-width: 768px) { .sub-secao { scroll-margin-top: 16px; } }

/* como-funciona: o mapa completo (com os serviços de cada resultado) ocupa a largura toda */
.mapa-pagina .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.mapa-pagina .causal-wrap { max-width: 620px; justify-self: end; width: 100%; }
@media (max-width: 999px) { .mapa-pagina .wrap { grid-template-columns: 1fr; } .mapa-pagina .causal-wrap { justify-self: stretch; max-width: 580px; } }
.mapa-pagina h2 { max-width: 18ch; }
.mapa-pagina .section-sub { margin-top: 14px; }

/* como-funciona: as 3 frentes (diagnóstico, pacote, Fábrica) usam o bloco .services já existente */
#frentes .services { margin-top: 28px; }
#como-funciona-30 { background: var(--bg-alt); }
.faixa { margin-top: 32px; }

/* casos */
#cases { padding-top: clamp(36px, 5vw, 64px); }
#cases h1 { font-family: var(--font-display); font-size: clamp(30px, 3.8vw, 46px); line-height: 1.1; letter-spacing: -0.015em; max-width: 24ch; text-wrap: balance; }
.case[id] { scroll-margin-top: 96px; }
/* na página de casos o título de cada cartão é h2 (ordem de títulos correta: h1 → h2); mesmo visual do antigo h3 */
.case h2.case-titulo { color: var(--paper-100); margin: 18px 0 12px; font-size: 22px; max-width: none; letter-spacing: 0; line-height: 1.25; }
.cta-casos .link-arrow { color: var(--accent-on-dark); }
.cta-casos { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }