/* ==========================================================================
   Seções de página
   Eixo e densidade nunca se repetem em seções vizinhas.
   ========================================================================== */

/* --- hero --------------------------------------------------------------- */

/* Hero mais alto que uma seção comum: a primeira dobra precisa de ar.
   ALTURA, não largura: o conteúdo segue no mesmo container de 70% do resto
   do site. */
.hero {
  position: relative;
  background: var(--grad-profundidade);
  border-bottom: 1px solid var(--borda);
  overflow: hidden;
  padding-block: var(--dobra-y);
}

.hero__grade {
  display: grid;
  gap: var(--e-6);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .hero__grade { grid-template-columns: 58fr 42fr; gap: var(--e-8); }
}

/* Espaço agrupa: eyebrow perto do título, título perto do subtítulo,
   e um salto maior antes dos botões. */
.hero__texto { display: grid; align-content: start; }

.hero__texto .eyebrow { margin-bottom: var(--e-2); color: var(--azul-300); }
/* O hero dividido com mockup dá 520px para o título. Nessa medida o display
   cheio de 52px cabe uns 16 caracteres por linha, e qualquer título de duas
   partes estoura para três linhas. Aqui ele desce um degrau; nos heros de
   container inteiro (.secao--tese) o display continua no tamanho cheio. */
.hero__display {
  color: var(--txt);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.hero__sub { margin-top: var(--e-3); color: var(--azul-300); max-inline-size: 44ch; }
.hero__acoes { margin-top: var(--e-4); }

.hero__prova {
  margin-top: var(--e-6);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(195, 206, 233, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
}

.hero__prova .norma {
  border-color: rgba(195, 206, 233, 0.28);
  color: var(--azul-300);
}

.hero__visual { display: grid; place-items: center; }

/* --- faixa de prova ------------------------------------------------------ */

.provas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--borda);
  border-block: 1px solid var(--borda);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 900px) {
  .provas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Faixa de quatro. Em duas colunas a célula fica com 720px e o número
     boiando na ponta esquerda; em quatro a banda volta a ter ritmo. */
  .provas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.provas__item {
  /* Branco sobre papel: com o gap de 1px em --borda, a faixa vira uma banda
     nítida logo abaixo do hero, em vez de sumir no fundo. */
  background: var(--fundo-2);
  padding: var(--e-4) var(--e-3);
  display: grid;
  gap: 10px;
  align-content: center;
}

.provas__item:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .provas__item:last-child:nth-child(odd) { grid-column: auto; }
}

/* Número de impacto reduzido aqui, porque são seis lado a lado. */
.provas__valor {
  font-size: var(--t-impacto-menor);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}

/* O zero é o número que carrega a tese inteira. Único em lime na faixa. */
.provas__item--zero .provas__valor { color: var(--acento); }

.provas__rotulo {
  font-size: 0.8125rem;
  color: var(--txt-2);
  line-height: 1.4;
}

/* --- pilares em bento ---------------------------------------------------- */

.pilares {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .pilares {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto;
  }
  .pilares__card:nth-child(1) { grid-column: span 2; }
  .pilares__card:nth-child(2) { grid-row: span 2; }
  .pilares__card:nth-child(3) { grid-column: span 2; }
}

/* O bento de .pilares codifica hierarquia: o primeiro card domina, o
   segundo vira coluna alta, o terceiro fecha. Isso serve aos três pilares
   da home, onde o peso do conteúdo é mesmo diferente.

   Onde os três cards são PARES entre si (os três inimigos, os três perfis
   de parceiro), a assimetria vira ruído: o leitor procura a hierarquia que
   o layout promete e não acha. Nesses casos entra .pilares--pares, que
   devolve a grade de três colunas iguais. */
@media (min-width: 900px) {
  .pilares--pares { grid-template-rows: none; }
  .pilares--pares > .pilares__card:nth-child(1),
  .pilares--pares > .pilares__card:nth-child(2),
  .pilares--pares > .pilares__card:nth-child(3) {
    grid-column: auto;
    grid-row: auto;
  }
}

.pilares__card {
  display: grid;
  gap: var(--e-3);
  align-content: start;
}

.pilares__topo {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}

/* Índice em mono: é numeração, registro, não retórica. */
.pilares__n {
  font-family: var(--fonte-mono);
  font-weight: 400;
  font-size: var(--t-mono);
  letter-spacing: normal;
  color: var(--txt-2);
}

.pilares__destaque {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--borda);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.pilares__destaque b {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pilares__destaque span { font-size: 0.8125rem; color: var(--txt-2); }

/* --- split de solução ---------------------------------------------------- */

.split {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .split--inverso .split__texto { order: 2; }
}

.split + .split { margin-top: var(--e-12); }

.split__texto { display: grid; gap: var(--e-2); align-content: start; }
.split__texto .selo { justify-self: start; margin-bottom: var(--e-1); }

/* Lista de módulos: etiquetas, não bullets. */
.modulos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.modulos li {
  padding: 9px 14px;
  border: 1px solid var(--borda-media);
  background: var(--fundo-2);
  font-size: 0.8125rem;
  color: var(--txt-2);
  line-height: 1.2;
}

/* --- CTA final ----------------------------------------------------------- */

.cta { background: var(--grad-profundidade); border-top: 1px solid var(--borda); }

.cta__grade {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 900px) {
  .cta__grade { grid-template-columns: 1.25fr 1fr; gap: var(--e-8); }
}

/* O título do CTA vive numa coluna estreita: no tamanho cheio do H2 ele ia
   para três linhas. Um degrau abaixo resolve, e ainda devolve peso para o
   botão, que é o que precisa ganhar a atenção neste bloco. */
.cta__titulo { font-size: var(--t-h2-menor); }

.cta__texto { color: var(--azul-300); max-inline-size: 48ch; }

/* --- página de contato --------------------------------------------------- */

.contato {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  /* Metade e metade. Pedido do cliente. */
  .contato { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
}

.contato__lado { display: grid; gap: var(--e-3); align-content: start; }

.contato__bloco {
  border-left: 3px solid var(--borda-forte);
  padding-left: var(--e-3);
  display: grid;
  gap: 6px;
}

.contato__bloco b { font-weight: 600; }
.contato__bloco span { font-size: 0.9375rem; color: var(--txt-2); line-height: 1.6; }

/* --- texto legal --------------------------------------------------------- */

.legal { max-inline-size: var(--prosa); display: grid; gap: var(--e-3); }
.legal h2 { font-size: var(--t-h3); margin-top: var(--e-3); }
.legal p, .legal li { color: var(--txt-2); }
.legal ul { padding-left: 20px; display: grid; gap: 8px; }

/* --- página de erro ------------------------------------------------------ */

/* Página de erro: o hero é a página inteira, então ganha altura de dobra. */
.erro { min-height: 62vh; display: grid; align-content: center; }