/* ==========================================================================
   secoes.css — padrões compartilhados entre Sobre, Áreas, Equipe e CTA final:
   padding vertical de seção, cabeçalho de seção (olho + filete + título) e
   marcador de lista. design.md §5, §8.
   ========================================================================== */

/* As classes de contexto (.secao--clara/escura/terracota) definem só a cor
   de texto e uma variável `--bg-secao` — NUNCA aplicam `background` direto.
   Motivo: o header e o hero carregam `.secao--escura` só para herdar o
   contexto de cor, e não podem ganhar fundo preto (o header é transparente
   no topo). O fundo de verdade vem da classe `.secao`, que só as seções de
   página inteira têm; wrappers aninhados como o card de Áreas pintam o
   próprio fundo no CSS da seção. */
.secao {
  position: relative;
  padding-block: var(--sp-secao);
  background: var(--bg-secao, transparent);
}

/* --- Régua de grade + índice numerado: os dois dispositivos que ancoram a
   hero na versão de grid corrigida (10/09/2026) se repetem aqui em toda
   seção de página inteira. É o que costura o site como um sistema visual
   contínuo em vez de cada seção parecer uma composição isolada — a queixa
   do cliente era exatamente essa, de seções "cortar e colar" sem relação
   umas com as outras. Puramente decorativos (aria-hidden no HTML); somem
   no mobile, onde não sobra largura pra eles sem competir com o conteúdo.
   A régua fica 20px para dentro do início da coluna de texto, não colada
   nela (14/09/2026, mesmo ajuste aplicado à régua da hero). */
.secao__linha-grade {
  display: none;
}

.secao__indice {
  display: none;
}

@media (min-width: 1024px) {
  .secao__linha-grade {
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: calc(max(var(--gutter), calc((100% - var(--container-max)) / 2)) - 20px);
    width: 1px;
    background: var(--linha-secao);
    pointer-events: none;
  }

  /* Quatro linhas em vez de uma (14/09/2026, pedido do cliente para
     aproximar das referências 1 e 2): borda esquerda, 1/3, 2/3 e borda
     direita da coluna de conteúdo. Quatro gradientes de 1px num só
     elemento — sem quatro spans decorativos por seção no HTML. */
  .secao__linha-grade--quatro {
    right: calc(max(var(--gutter), calc((100% - var(--container-max)) / 2)) - 20px);
    width: auto;
    background-color: transparent;
    background-image: linear-gradient(var(--linha-grade-fundo), var(--linha-grade-fundo)),
      linear-gradient(var(--linha-grade-fundo), var(--linha-grade-fundo)),
      linear-gradient(var(--linha-grade-fundo), var(--linha-grade-fundo)),
      linear-gradient(var(--linha-grade-fundo), var(--linha-grade-fundo));
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left top, 33.333% top, 66.666% top, right top;
  }

  .secao__indice {
    display: block;
    position: absolute;
    z-index: 0;
    top: var(--sp-8);
    right: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    font-family: var(--fonte-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 7vw, 6.5rem);
    line-height: 1;
    color: var(--cor-indice);
    pointer-events: none;
  }
}

/* Todo conteúdo real de seção fica acima da régua/índice de fundo. */
.secao > .container {
  position: relative;
  z-index: 1;
}

/* Com Sobre, Áreas e Equipe todas no mesmo preto (14/09/2026), a emenda
   entre elas deixou de existir visualmente. O fio de 1px devolve a marcação
   de onde uma seção termina e a outra começa — é a divisória de seção que
   design.md §6 já previa, e o mesmo recurso que as referências 1 e 2 usam
   para segurar a leitura numa página inteira em base escura. */
.secao--escura + .secao--escura {
  border-top: 1px solid var(--linha-escura);
}

.secao--clara {
  --bg-secao: var(--creme);
  color: var(--cor-secao-texto);
}

.secao--escura {
  --bg-secao: var(--preto);
  color: var(--cor-secao-texto);
}

.secao--terracota {
  --bg-secao: var(--terracota);
  color: var(--cor-secao-texto);
}

.secao {
  color: var(--cor-secao-texto);
}

/* Evita duas seções claras iguais lado a lado (design.md §8) */
.secao--clara-alt {
  --bg-secao: var(--creme-fundo);
}

/* --- Cabeçalho de seção: olho + filete + título + apoio opcional --- */
.cabecalho-secao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cabecalho-secao__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
}

.cabecalho-secao__titulo {
  margin-top: var(--sp-3);
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.cabecalho-secao__apoio {
  margin-top: 28px;
  font-family: var(--fonte-sans);
  font-weight: 300;
  font-size: var(--fs-lead);
  line-height: 1.6;
  /* No claro o apoio vai na cor cheia do texto; no escuro, com 78% — como
     na v2 do Figma. `--cor-secao-texto-apoio` só existe no contexto escuro. */
  color: var(--cor-secao-texto-apoio, var(--cor-secao-texto));
  max-width: 874px;
}

/* Cabeçalho até o conteúdo da seção (v2 do Figma: 88–96px no desktop). */
.sobre__cabecalho,
.areas__cabecalho,
.socios__cabecalho {
  margin-bottom: var(--sp-7);
}

@media (min-width: 1024px) {
  .sobre__cabecalho,
  .areas__cabecalho,
  .socios__cabecalho {
    margin-bottom: var(--sp-9);
  }
}

/* --- Número em itálico das caixas do Sobre e dos blocos de Áreas ---
   Playfair Italic 400 (exceção ao peso único da display, design.md §3).
   Decorativo: no HTML vai com aria-hidden, porque as caixas não são uma
   sequência que o leitor de tela precise anunciar. */
.numero-italico {
  display: block;
  font-family: var(--fonte-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--cor-olho);
}

/* --- Lista com marcador redondo de 5px na cor de destaque ---
   Volta a ser classe compartilhada em 13/10/2026: serve às listas de Áreas
   e às credenciais dos sócios, os dois únicos lugares com marcador na página
   (design.md §2). O marcador é exceção ao raio 0 de design.md §6. */
.lista-marcada li {
  position: relative;
  padding-left: 19px;
}

.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(0.85em - 2.5px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-olho);
}

.lista-marcada li + li {
  margin-top: var(--sp-3);
}