/*
  SDD-davinci-e-linguagem-de-temas F-DV4 (ADR-11) — a ESTRUTURA da celula
  Base 3 (familia Base, hierarquia Editorial).

  AINDA A MESMA HISTORIA. Oito blocos, mesma ordem, mesmo texto da Base 1 e da
  Base 2. Vale repetir porque e aqui que a tentacao aparece: um degrau
  "editorial" pede conteudo, e conteudo e familia. O que a Base 3 pode fazer e
  desenhar melhor o que ja existe.

  O QUE MUDA, pelas tres linhas do §3.4:

    ritmo          picos e vales. A abertura ocupa a tela, ha um RESPIRO no
                   meio da rolagem e um fechamento — em vez da alternancia
                   regular da Base 2.
    secao          a mesma secao admite mais de uma forma na mesma pagina: a
                   grade vira mosaico e o primeiro item pesa o dobro dos
                   outros.
    primeira dobra e uma IMAGEM antes de ser um texto.

  A MASCARA E O QUE AUTORIZA TUDO ISSO. Texto sobre foto so e legivel com uma
  camada entre os dois, e o grupo de fundo (imagem + enquadramento + mascara)
  entra na hierarquia 2 — ver a nota de config/hierarquias.php. E por isso que
  a Base 1 nao pode ter esta abertura, e nao por gosto: sem mascara ela seria
  uma aposta de contraste.

  DEGRADACAO (ADR-6): sem imagem, `hero--capa` nao e emitida e a abertura volta
  a ser tipografica, ocupando a mesma altura. Um Base 3 sem acervo fica pior
  que um Base 1 — a tabela do §3.4 avisa —, mas nao fica QUEBRADO.
*/

.wrap {
  width: 100%;
  max-width: var(--largura-max, 1240px);
  margin-inline: auto;
  padding-inline: var(--pad, clamp(22px, 5vw, 64px));
}

.seccao { padding-block: var(--ritmo, clamp(72px, 10vw, 152px)); }
.seccao--curta { padding-block: var(--ritmo-curto, clamp(44px, 6vw, 88px)); }

/* O VALE. Uma secao que existe para nao dizer nada por um instante: e o que
   faz os picos serem picos. Sem ela a pagina vira uma sequencia de destaques,
   que cansa igual a uma sequencia plana. */
.respiro { padding-block: var(--ritmo-respiro, clamp(96px, 14vw, 200px)); }
.respiro .wrap { display: flex; flex-direction: column; align-items: center; }
.respiro p { max-width: 26ch; text-align: center; }

.faixa { padding-block: var(--ritmo-faixa, clamp(56px, 8vw, 104px)); }

.topo { position: sticky; top: 0; z-index: 10; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--altura-topo, 84px); }
.menu { display: flex; align-items: center; gap: clamp(16px, 3vw, 34px); }

/* A ABERTURA. Ocupa a tela e empilha imagem, mascara e texto na mesma celula
   de grade — sem posicionamento absoluto, que quebraria em texto longo. */
.hero--capa { display: grid; min-height: var(--altura-capa, 86svh); }
.hero--capa > * { grid-area: 1 / 1; }
.hero__fundo { width: 100%; height: 100%; object-fit: cover; }
.hero__mascara { width: 100%; height: 100%; }
.hero--capa .wrap { align-self: end; padding-block: clamp(48px, 8vw, 112px); }
.hero__texto { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 34ch; }
.hero h1 { text-wrap: balance; }
.hero .conduz { max-width: 46ch; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 14px; }

.cabeca { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 64px); max-width: 60ch; }
.cabeca h2 { max-width: 18ch; text-wrap: balance; }

.grade { display: grid; gap: var(--vao, clamp(20px, 3vw, 36px)); list-style: none; margin: 0; padding: 0; }

/* O MOSAICO. O primeiro item ocupa duas colunas: e a "mais de uma forma na
   mesma pagina" do §3.4, e e o que a Base 2 nao pode fazer. */
/* A grade NAO SUPOE QUANTIDADE.
   Estrutura e por bloco; hierarquia e so design. Um `repeat(3, 1fr)` embutiria
   "sao tres servicos" na celula — e o cliente com quatro ganharia um orfao na
   segunda linha, e o com dois, um buraco. `auto-fit` deixa a contagem onde ela
   nasce: no conteudo. */
.grade--mosaico { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* O item em destaque so pesa o dobro quando HA de sobra: com menos de tres
   itens ele ocuparia a linha inteira e o mosaico viraria uma pilha. */
.grade--mosaico > :first-child:nth-last-child(n+3) { grid-column: span 2; }

.item { display: flex; flex-direction: column; gap: 12px; }

.passo { display: grid; grid-template-columns: auto 1fr; gap: 8px 22px; align-items: baseline; }
.passo .marcador { grid-row: span 2; }

.numero { display: flex; flex-direction: column; gap: 6px; }

.formulario { display: flex; flex-direction: column; gap: 20px; max-width: 42rem; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo input, .campo textarea { width: 100%; }
.campo textarea { min-height: 9rem; resize: vertical; }

.rodape .wrap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; }
.rodape .elos { display: flex; flex-wrap: wrap; gap: 20px; }

@media (max-width: 620px) {
  .grade--mosaico > :first-child { grid-column: auto; }
  .menu { display: none; }
  .topo .wrap { justify-content: flex-start; }
  .hero--capa { min-height: var(--altura-capa-mobile, 78svh); }
}