/*
  SDD-davinci-e-linguagem-de-temas F-DV4 (ADR-11) — a ESTRUTURA da celula
  Base 1, a camada do meio entre `base.css` e a folha do tema.

  O QUE ENTRA: grade, ritmo entre secoes, largura de leitura, comportamento
  responsivo. O que faz um Base 1 ser um Base 1 e nao um Base 3.

  O QUE NAO ENTRA: cor, familia, peso, sombra. Nenhum valor de APARENCIA, nem
  como padrao — o teto de composicao da hierarquia Direta e "uma secao, um
  jeito", e isso e ARRANJO, nao aparencia.

  EMENDA — SDD-administracao-da-loja F-AL4 (ADR-6). Esta lista dizia tambem
  "tamanho" e "raio", e deixou de dizer.

  O motivo apareceu medindo: o mesmo <h1> renderizava a 3.6rem num tema desta
  celula e a 3.4rem no outro, e a diferenca nao era escolha de ninguem — era
  residuo de os dois terem sido escritos em momentos diferentes. Dez valores
  estavam assim.

  Se a escala tem de ser igual entre os temas de uma celula — e tem, porque o
  cabecalho acima ja chamava esta folha de RITMO —, entao ela e estrutura, e o
  lugar dela e aqui. Preservar a diferenca seria preservar um acidente e ainda
  cobrar dele o preco de dois tokens de vocabulario.

  A fronteira mudou de lugar, nao de natureza: TAMANHO e ESPACO sao ritmo e
  vivem aqui; COR, FAMILIA e PESO sao personalidade e continuam no tema. A
  prova destrutiva segue valendo, e continua sendo o que impede esta folha de
  virar a folha do tema.

  A PROVA DESTRUTIVA (ADR-11) mede exatamente isto: apagada a folha do tema, a
  pagina fica feia e continua de pe — grade certa, nada transbordando,
  navegavel. Se ela desmontar, foi porque estrutura vazou para o tema, e a
  manutencao voltou a ser trinta vezes.

  TODO VALOR VEM DE VARIAVEL, com recuo. O recuo nao e enfeite: e o que mantem
  esta folha correta sozinha, que e a condicao para a prova destrutiva
  significar alguma coisa.
*/

.wrap {
  width: 100%;
  max-width: var(--largura-max, 1120px);
  margin-inline: auto;
  padding-inline: var(--pad, clamp(20px, 4.5vw, 56px));
}

/* O ritmo. Uma pagina unica se le pelo espaco entre as secoes, e nao por
   moldura — a hierarquia Direta nao tem faixa nem alternancia de superficie. */
.seccao { padding-block: var(--ritmo, clamp(56px, 8vw, 104px)); }
.seccao--curta { padding-block: var(--ritmo-curto, clamp(32px, 5vw, 56px)); }

/* Cabecalho fixo no topo da rolagem: a Base vive de uma pagina so, e perder a
   navegacao ao rolar seria perder a unica navegacao que existe. */
.topo { position: sticky; top: 0; z-index: 10; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--altura-topo, 68px); }
.menu { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 28px); }

/* Hero de uma coluna. A imagem de apoio e da hierarquia 2 em diante; aqui o
   texto ocupa a largura de leitura e nada disputa com ele. */
.hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.hero h1 { max-width: 18ch; text-wrap: balance; }
.hero .conduz { max-width: 54ch; }

.cabeca { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 4vw, 44px); }
.cabeca h2 { max-width: 22ch; text-wrap: balance; }
.cabeca .conduz { max-width: 60ch; }

/* A grade dos itens. Cartoes iguais, sem destaque para nenhum: e a definicao
   da hierarquia 1, e por isso ela mora aqui e nao no tema. */
.grade { display: grid; gap: var(--vao, clamp(16px, 2.5vw, 28px)); list-style: none; margin: 0; padding: 0; }
/* 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--cartoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.item { display: flex; flex-direction: column; gap: 8px; }

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

/* Formulario: uma coluna, rotulo acima do campo. Rotulo ao lado exige largura
   que o celular nao tem, e a Base e lida no celular. */
.formulario { display: flex; flex-direction: column; gap: 16px; max-width: 46rem; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo input, .campo textarea { width: 100%; }
.campo textarea { min-height: 7rem; resize: vertical; }

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

@media (max-width: 620px) {
  .menu { display: none; }
  .topo .wrap { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
   O RITMO DOS TEMAS DESTA CELULA — SDD-administracao-da-loja F-AL4 (ADR-6).

   Estas vinte regras viviam DUPLICADAS nas folhas do Bussola e do Serra, e o
   que se lia como identidade era, na maior parte, o mesmo valor escrito duas
   vezes. Um defeito de ritmo pedia dois consertos; com trinta temas, pediria
   trinta.

   Nenhuma linha abaixo declara cor, fundo, familia ou peso: isso continua na
   folha de cada tema, e e o que faz dois temas desta celula parecerem
   diferentes. O que esta aqui e' o que eles nao tinham motivo para discordar.

   Vem por ultimo no arquivo de proposito: e' a ordem que a folha do tema
   ocupava antes, entao o que vencia antes continua vencendo.
--------------------------------------------------------------------------- */

body { line-height: 1.65; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.02em; }
h1 { font-size: calc(clamp(2rem, 5.5vw, 3.4rem) * var(--escala-texto, 1)); }
h2 { font-size: calc(clamp(1.5rem, 3.2vw, 2.1rem) * var(--escala-texto, 1)); }
h3 { font-size: calc(1.02rem * var(--escala-texto, 1)); }
.apoio { font-size: calc(.74rem * var(--escala-texto, 1)); letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.conduz { font-size: calc(1.06rem * var(--escala-texto, 1)); margin: 0; }
.item p { margin: 0; font-size: calc(.94rem * var(--escala-texto, 1)); }
.item h3 { margin: 0; }
.marca { letter-spacing: -.01em; }
.menu a { font-size: calc(.92rem * var(--escala-texto, 1)); }
.acao { border-radius: 3px; padding: 13px 22px; font-size: calc(.94rem * var(--escala-texto, 1)); text-align: center; }
.numero b { font-size: calc(2.1rem * var(--escala-texto, 1)); letter-spacing: -.03em; line-height: 1; }
.numero span { font-size: calc(.88rem * var(--escala-texto, 1)); }
.passo .marcador { font-size: calc(.8rem * var(--escala-texto, 1)); letter-spacing: .04em; }
.campo label { font-size: calc(.84rem * var(--escala-texto, 1)); }
.campo input, .campo textarea { border-radius: 3px; padding: 11px 13px; }
.rodape { padding-block: clamp(28px, 4vw, 44px); font-size: calc(.88rem * var(--escala-texto, 1)); }
.rodape a:focus-visible, .rodape a:hover { text-decoration: underline; }
:focus-visible { outline-offset: 3px; }