/* ==================================================================
   05 · VISAO DE LONGO PRAZO: os tres horizontes  (widget fp-horizontes)

   Copiado do lab (lab/especialista/secoes/horizontes/horizontes.css), que
   fica congelado como referencia aprovada. Unica diferenca: o divisor do
   corpo do H3 (--h3-div), que horizontes.js aumenta quando um horizonte e
   mais largo que "Longo prazo".

   Papel. Tres colunas, uma por horizonte; o H3 abre a coluna, em 900 como
   os outros titulos e a cerca de 70% do H2. O tempo aparece na ordem de
   entrada: os tres surgem em sequencia (curto, medio, longo), da esquerda
   para a direita, cada um com o titulo e o texto logo atras. Sem linha,
   marcas ou numeros (isso e de Como trabalhamos).

   O contorno que se enchia foi descartado pelo FPiloto (2026-09-18): a
   letra cheia precisava de traco por fora para cobrir o contorno e ficava
   mais gorda que uma 900 normal, quase borrada; e o H3 tinha o tamanho do
   H2.
   ================================================================== */

.horizontes{
  position:relative;
  background:var(--paper);
  color:var(--fg);
  padding-block:clamp(6rem,15vh,11rem);
}

.horizontes__h2{
  max-width:12em;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.94;
  letter-spacing:-.04em;
  color:var(--navy);
  text-wrap:balance;
}
.horizontes__abertura{
  margin-top:clamp(1.25rem,3vh,2rem);
  max-width:48ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--ink-2);
  text-wrap:pretty;
}

.horizontes__lista{
  --vao:clamp(2rem,4vw,5rem);
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--vao);
  margin-top:clamp(4rem,11vh,8rem);
}
/* Cada coluna herda tres linhas da grade: titulos e textos das tres
   comecam na mesma altura, mesmo quando um titulo quebra e o outro nao. */
.horizonte{
  grid-row:span 3;
  display:grid;
  grid-template-rows:subgrid;
  row-gap:0;
}

/* O horizonte. Limitado pela coluna: "Longo prazo", o mais largo do
   documento, mede 5.46em em peso 900. */
.horizonte__h3{
  font-family:var(--font-display);
  font-weight:900;
  font-size:min(clamp(1.75rem,3.5vw,3.85rem), (100cqw - 2 * var(--vao)) / 3 / var(--h3-div,5.7));
  line-height:1;
  letter-spacing:-.035em;
  color:var(--navy);
  white-space:nowrap;
}

.horizonte__titulo{
  margin-top:clamp(1.5rem,3.6vh,2.5rem);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.25rem,1.8vw,1.875rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--navy);
  text-wrap:balance;
}
.horizonte__texto{
  margin-top:clamp(.75rem,1.8vh,1.125rem);
  max-width:38ch;
  font-size:var(--t-body);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

@media (max-width:1099.98px){
  .horizontes{padding-block:clamp(4.5rem,14vw,7rem)}
  .horizontes__h2{font-size:clamp(2.25rem,9.5vw,4rem)}
  .horizontes__lista{grid-template-columns:minmax(0,1fr);row-gap:clamp(2.5rem,10vw,3.5rem);margin-top:clamp(2.5rem,10vw,4rem)}
  .horizonte{grid-row:auto;display:block}
  .horizonte__h3{font-size:clamp(1.625rem,7vw,2.25rem)}
  .horizonte__titulo{margin-top:1rem}
}