/* ════════════════════════════════════════════════════════════
   /pilares — Proteção, Acúmulo, Aquisição e Sucessão
   Só o que a página tem de próprio. Cores, escalas e espaços
   vêm dos tokens (tokens.css + site.css); o kit fica no site.css.
   ════════════════════════════════════════════════════════════ */

/* ── Abertura ─────────────────────────────────────────── */
.pilares-hero .wrap { position: relative; z-index: 1; }
.pilares-abertura { max-width: 780px; }
.pilares-abertura h1 { margin-top: var(--s4); }
.pilares-abertura .lead { margin-top: var(--s5); }

/* Quatro âncoras: cartões curtos ligados por um fio (todos conectados) */
.pilares-ancoras { margin-top: clamp(32px, 5vw, 52px); }
.pilares-ancoras ol {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3);
}
.pilares-ancoras li { position: relative; z-index: 1; min-width: 0; }
.pilares-ancoras a {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3);
  height: 100%; padding: var(--s4) 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4);
  box-shadow: var(--sh-card); color: var(--tx-1);
  transition: box-shadow var(--tm) var(--ease), border-color var(--tm) var(--ease);
}
.pilares-ancoras a:hover { box-shadow: var(--sh-card-hover); border-color: var(--border-mid); }
.pilares-ancora-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pilares-ancora-num {
  font-size: var(--fs-3xs); font-weight: 700; line-height: 1.3; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tx-3);
}
.pilares-ancora-nome {
  font-family: var(--f-display); font-weight: 800; font-size: var(--fs-md); line-height: 1.2;
  letter-spacing: -.01em; color: var(--tx-1);
}
@media (min-width: 600px) {
  .pilares-ancoras a { flex-direction: row; align-items: center; padding: var(--s4) var(--s5) var(--s4) var(--s4); }
  .pilares-ancora-nome { font-size: var(--fs-lg); }
}
@media (min-width: 960px) {
  .pilares-ancoras ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
  /* o fio passa por trás dos cartões e aparece nos vãos */
  .pilares-ancoras ol::before {
    content: ''; position: absolute; left: var(--s5); right: var(--s5); top: 50%; z-index: 0;
    height: 2px; margin-top: -1px; background: var(--mint); border-radius: 2px;
  }
}

/* ── Seções dos pilares ───────────────────────────────────
   Celular: cabeça, foto, corpo, cartão de apoio, nota e ação, um embaixo do outro.
   De 900 px para cima: coluna de texto (cabeça + corpo) e coluna lateral (foto +
   cartão de apoio), que troca de lado a cada pilar; nota e ação ocupam a largura toda.
   O rodapé (nota e ação) fica FORA da .pilar-grade: a coluna lateral fixa (sticky)
   só desliza dentro da grade e para antes dele, sem nunca cobrir a nota nem o botão. */
.pilar-secao { border-top: 1px solid var(--border); }
.pilar-secao--inv { background: var(--bg-suave); }

.pilar-grade { display: flex; flex-direction: column; gap: var(--s5); }
.pilar-texto, .pilar-lado { display: contents; }
.pilar-cabeca { order: 1; }
.pilar-foto { order: 2; }
.pilar-corpo { order: 3; }
.pilar-extra { order: 4; }
.pilar-grade > *, .pilar-texto > *, .pilar-lado > * { min-width: 0; }
.pilar-rodape { margin-top: var(--s5); }

@media (min-width: 900px) {
  .pilar-grade {
    display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 72px);
  }
  .pilar-texto, .pilar-lado { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
  .pilar-texto { grid-column: 1; grid-row: 1; }
  .pilar-lado { grid-column: 2; grid-row: 1; align-self: start; gap: var(--s5); }
  .pilar-rodape { margin-top: var(--s7); }
  .pilar-secao--inv .pilar-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pilar-secao--inv .pilar-texto { grid-column: 2; }
  .pilar-secao--inv .pilar-lado { grid-column: 1; }
}
/* a coluna lateral acompanha a leitura, abaixo do cabeçalho fixo (só onde ela cabe na tela);
   o limite de baixo é o fim da .pilar-grade, que termina antes do rodapé */
@media (min-width: 900px) and (min-height: 700px) {
  .pilar-lado { position: sticky; top: 100px; }
}

/* cabeça */
.pilar-cabeca h2 { margin-top: var(--s3); font-size: clamp(28px, 3.8vw, 42px); text-wrap: balance; }
.pilar-cabeca .lead { margin-top: var(--s4); }
.pilar-cabeca .lead strong { font-weight: 600; color: var(--tx-1); }
.pilar-destaque {
  margin-top: var(--s5); max-width: 40em;
  font-size: clamp(17px, 1.9vw, 20px); font-weight: 600; line-height: 1.45; color: var(--tx-1);
}

/* foto */
.pilar-foto img { box-shadow: var(--sh-card); }

/* corpo */
.pilar-corpo { display: flex; flex-direction: column; gap: var(--s5); }
.pilar-corpo > p:not(.pilar-regra) { max-width: 62ch; font-size: var(--fs-md); line-height: var(--lh-solto); color: var(--tx-2); }
.pilar-corpo h3 {
  font-family: var(--f-body); font-size: var(--fs-lg); font-weight: 700; line-height: 1.35;
  letter-spacing: 0; color: var(--tx-1); text-wrap: balance;
}
.pilar-corpo h3 + .pilar-frentes { margin-top: calc(-1 * var(--s2)); }

/* frase-regra de cada pilar ("Primeiro… Depois…") */
.pilar-regra {
  padding-left: var(--s4); border-left: 4px solid var(--mint); border-radius: 2px;
  font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.3; letter-spacing: -.01em; color: var(--verde-dk); text-wrap: balance;
}

/* cartão de apoio da coluna lateral */
.pilar-cartao {
  display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--sh-card);
}
.pilar-cartao > p:not(.pilar-regra) { font-size: var(--fs-md); line-height: var(--lh-solto); color: var(--tx-2); }
.pilar-cartao--ico { flex-direction: row; align-items: flex-start; }
.pilar-cartao--ico > p { padding-top: 10px; }

/* rodapé do pilar: complemento legal do tema e a ação */
.pilar-rodape { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); }
.pilar-rodape .nota-legal { margin-top: 0; }
.pilar-acao { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
@media (min-width: 900px) {
  .pilar-rodape { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--border); }
  .pilar-acao { flex: 0 0 auto; }
}

/* Proteção: as cinco frentes */
.pilar-frentes {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r4); box-shadow: var(--sh-card);
}
.pilar-frentes > div { display: grid; gap: var(--s1); padding: 14px var(--s5); }
.pilar-frentes > div + div { border-top: 1px solid var(--border); }
.pilar-frentes dt { font-weight: 700; line-height: 1.4; color: var(--verde-dk); }
.pilar-frentes dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--tx-2); }
@media (min-width: 600px) {
  .pilar-frentes > div { grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--s4); align-items: baseline; }
}

/* Acúmulo: os três números do plano, só como rótulos */
.pilar-rotulos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.pilar-rotulos li {
  position: relative; display: flex; align-items: center; gap: var(--s3); min-width: 0;
  padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r3); box-shadow: var(--sh-card);
  font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--tx-1);
}
/* seta entre um rótulo e o seguinte: para baixo no celular, para o lado de 600 px para cima */
.pilar-rotulos li:not(:last-child)::after {
  content: ''; position: absolute; left: 50%; bottom: -17px;
  width: 9px; height: 9px; border-right: 2px solid var(--verde); border-bottom: 2px solid var(--verde);
  transform: translateX(-50%) rotate(45deg);
}
@media (min-width: 600px) {
  .pilar-rotulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pilar-rotulos li { flex-direction: column; align-items: flex-start; padding: var(--s4); }
  .pilar-rotulos li:not(:last-child)::after {
    left: auto; right: -18px; bottom: auto; top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }
}

/* Acúmulo: fatos de lei */
.pilar-fatos {
  list-style: none; margin: 0; padding: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r4); box-shadow: var(--sh-card);
}
.pilar-fatos li { padding: var(--s4) var(--s5); font-size: 15px; line-height: 1.6; color: var(--tx-2); }
.pilar-fatos li + li { border-top: 1px solid var(--border); }

/* Aquisição: a pergunta do pilar */
.pilar-pergunta {
  padding: var(--s5); border-radius: var(--r4); background: var(--mint-lt);
  font-family: var(--f-display); font-weight: 800; font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.3; letter-spacing: -.01em; color: var(--verde-profundo); text-wrap: balance;
}

/* Sucessão: itens com ícone */
.pilar-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5); }
.pilar-itens li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); align-items: start; }
.pilar-itens p { max-width: 58ch; padding-top: 10px; font-size: var(--fs-md); line-height: var(--lh-solto); color: var(--tx-2); }
.pilar-itens strong, .pilar-cartao strong { font-weight: 700; color: var(--tx-1); }

/* ── Chamada final ────────────────────────────────────── */
.pilares-final { border-top: 1px solid var(--border); }
.pilares-final .h-lg { max-width: 26ch; margin: 0 auto; text-wrap: balance; }
.pilares-final .lead { margin: var(--s4) auto 0; }
.pilares-final-acoes {
  margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s4) var(--s5);
}
.pilares-final-entrar { margin-top: var(--s5); }