/* ==========================================================================
   ABITA — Quem somos
   Regras e o porquê em specs/design.md. Números em tokens.css.

   Página curta e escaneável: seis blocos, nenhum parágrafo longo. O leitor
   abre esta página para responder uma pergunta só, quem são essas pessoas,
   e tudo que não responde isso ficou de fora.

   Ritmo de bandas: escuro, claro, morno, claro, morno, escuro. O escuro
   abre e fecha; nunca dois escuros seguidos, que é o defeito registrado em
   02/09 no memoria.md.

   Um --fs-mega na página inteira, na abertura. Em lugar nenhum mais.
   ========================================================================== */


/* --------------------------------------------------------------------------
   RITMO DA PÁGINA
   Ritmo curto, e só aqui. A página é de leitura rápida, com blocos de
   duas a três linhas: o respiro de seção da home separa argumentos longos
   e aqui separava frases, o que abria buraco entre uma âncora e a
   seguinte. `--secao-curta` é o token que já existe para isso.
   -------------------------------------------------------------------------- */

.escola,
.pratica,
.conformidade,
.unidades { padding-block: var(--secao-curta); }


/* ==========================================================================
   1 · ABERTURA
   Cena inteira ao fundo, texto assentado no terço esquerdo. Sem as
   variáveis de banda escura o título herda --texto, que é quase preto, e
   some sobre a fotografia: a seção é clara na aparência e escura na regra.

   O título é --fs-d1 e não --fs-mega. O corpo de pico é da home; aqui ele
   passava de 100px e engolia a cena atrás dele.
   ========================================================================== */




/* No celular o texto ocupa a largura toda e a ponta direita dele cai na
   parte clara do véu lateral, em cima da mesa iluminada. `--veu-largo`
   existe para esse caso: mantém a direção e nunca clareia abaixo de 0.62.
   Mesmo defeito do herói da home, registrado em 01/09. */





/* ==========================================================================
   2 · A ESCOLA GERMÂNICA
   Coluna de texto à esquerda, matéria sangrando até a borda da tela. A
   imagem acompanha a altura da coluna inteira em vez de ficar presa a uma
   proporção: presa, ela sobrava embaixo do cabeçalho e abria o vazio que
   esta página não pode ter.
   ========================================================================== */

.escola { row-gap: clamp(var(--e-4), 2.5vw, var(--e-5)); }

.escola__cabeca h2 { margin-top: var(--e-3); max-width: 14ch; }

.principios { list-style: none; }

/* Âncora, não parágrafo: nome no corpo de bloco e uma linha só embaixo.
   O fio de cima é o que dá a cadência da lista sem nenhuma moldura. */
.principio {
  padding-block: var(--e-3);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.principio:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

.principio__nome {
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--texto-cor, var(--texto));
}

.principio p { margin-top: var(--e-2); max-width: 52ch; }

.escola__fecho { max-width: 46ch; }

.escola__fig { border-radius: var(--raio-card); aspect-ratio: 1024 / 1536; }

/* Duas colunas só de 1280px para cima. A imagem **não sangra**: ela termina
   em `centro-end`, dentro da coluna de leitura, e não na borda da tela.
   Decisão do cliente, a mesma da página Serviços.

   Contida, a conta muda: a largura da imagem sai da altura da coluna de
   texto pela proporção do arquivo, que é retrato, e o que sobra de coluna
   é o que o texto pode ocupar. Abaixo do corte a imagem desce para baixo
   do texto, na proporção do arquivo. */
@media (min-width: 1280px) {
  /* Texto em coluna própria, imagem na mesma faixa esticando por todas as
     linhas. Sem linha nomeada no meio da coluna central, é assim que a
     travessia acontece sem posicionamento absoluto. */
  .escola__cabeca  { grid-row: 1; }
  .principios      { grid-row: 2; }
  .escola__fecho   { grid-row: 3; }

  /* A medida do texto volta a 34rem. Contida, a imagem é estreita, porque
     a largura dela sai da altura desta coluna e o arquivo é retrato: em
     28rem sobrava um vão de 350px entre os dois. Com 34 o texto ganha
     medida de leitura melhor e o vão encolhe. */
  .escola__cabeca,
  .principios,
  .escola__fecho {
    grid-column: centro-start / centro-end;
    width: min(100%, 34rem);
  }

  .escola__fig {
    grid-column: centro-start / centro-end;
    /* `span 3` e não `1 / -1`: as linhas aqui são implícitas, e nelas o
       `-1` resolve para a última linha explícita, que é a primeira. Com
       `-1` a figura ocupava só a linha do cabeçalho. */
    grid-row: 1 / span 3;
    /* A altura vem da coluna de texto e a largura sai da proporção do
       arquivo, não o contrário. É o que mostra a cena inteira: esticada até
       a borda ela ficava em 1.17 e o `cover` cortava teto e chão.
       `justify-self: end` é obrigatório, senão o esticamento horizontal
       padrão da grade define a largura e a proporção não tem o que fazer. */
    aspect-ratio: 1024 / 1536;
    width: auto;
    /* Trava contra a invasão: a conta se realimenta, porque texto mais
       estreito faz a coluna mais alta, que faz a imagem mais larga. */
    max-width: calc(100% - 34rem - var(--e-6));
    align-self: stretch;
    justify-self: end;
    border-radius: var(--raio-card);
  }

  /* A imagem sai do fluxo dentro da moldura. Em fluxo, a altura dela
     contribui para a linha da grade: a moldura ficava mais alta que a
     coluna de texto e a seção inteira esticava junto, abrindo vão entre uma
     âncora e a seguinte. Fora do fluxo, quem dá a altura é o texto, e a
     moldura só preenche. Mesma correção da Prova, em 02/09. */
  .escola__fig picture { position: absolute; inset: 0; }
}


/* ==========================================================================
   3 · COMO ISSO APARECE NO TRABALHO
   Quatro itens curtos em grade. Cada um é uma resposta, não um argumento
   desenvolvido: o desenvolvimento está nas páginas de serviço.
   ========================================================================== */

.pratica__cabeca h2 { margin-top: var(--e-3); }

.pratica__grade {
  display: grid;
  gap: var(--e-4);
  margin-top: clamp(var(--e-4), 2.5vw, var(--e-5));
  list-style: none;
}

.pratica__item {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.pratica__item h3 { color: var(--texto-cor, var(--texto)); }
.pratica__item p { margin-top: var(--e-2); }

@media (min-width: 620px) {
  .pratica__grade { grid-template-columns: repeat(2, 1fr); gap: var(--e-4) var(--e-6); }
}

/* Três colunas, e não quatro: "Conformidade" saiu da grade em 03/09/2026 e
   virou seção própria. */
@media (min-width: 1000px) {
  .pratica__grade { grid-template-columns: repeat(3, 1fr); gap: var(--e-6); }
}


/* ==========================================================================
   4 · ONDE ESTAMOS
   Mapa real e embutido, um por unidade. Lado a lado no desktop, empilhados
   no celular.
   ========================================================================== */

.unidades__cabeca h2 { margin-top: var(--e-3); }

.unidades__lista {
  display: grid;
  gap: clamp(var(--e-4), 2.5vw, var(--e-6));
  margin-top: clamp(var(--e-4), 2.5vw, var(--e-5));
  list-style: none;
}

@media (min-width: 760px) {
  .unidades__lista { grid-template-columns: repeat(2, 1fr); }
}

/* O iframe do mapa não tem proporção própria: sem a moldura com
   `aspect-ratio` ele assume a altura padrão de 150px e o mapa fica
   inutilizável. */
/* Faixa e não quadro: em 4:3 o mapa media 536 por 402 e lia como foto de
   ambiente, do lado de blocos que são referência de endereço. Em 2:1 ele
   perde um terço da altura e mantém a largura, que é o que o cartão do
   próprio mapa precisa para caber. */
.unidade__mapa {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--raio-card);
  background: var(--papel-3);
}

.unidade__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  /* O mapa é a única cor da interface fora da fotografia. Rebaixar a
     saturação encaixa ele na página sem tirar a leitura das ruas. */
  filter: saturate(0.55) contrast(1.02);
}

/* No celular a faixa cai para 320 por 160 e o cartão do próprio mapa come
   quase metade dela. Em 3:2 sobra mapa embaixo do cartão. */
@media (max-width: 759px) {
  .unidade__mapa { aspect-ratio: 3 / 2; }
}

.unidade__cidade { margin-top: var(--e-4); color: var(--texto-cor, var(--texto)); }

.unidade__end {
  margin-top: var(--e-2);
  font-style: normal;
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-corpo);
  max-width: 34ch;
}


/* ==========================================================================
   4 · CONFORMIDADE
   Cabeçalho de um lado, argumento do outro, e as três normas embaixo como
   tabela de leitura: código na coluna estreita, o que ele exige na larga.

   **Tipografia pura, nenhum elemento gráfico.** O `briefing-site.md` §4
   proíbe selo, medalha, escudo ou qualquer coisa com aparência de
   certificado: a ABITA trabalha conforme as normas, não foi auditada por
   elas, e a diferença entre as duas coisas é jurídica.
   ========================================================================== */

.conformidade { row-gap: clamp(var(--e-4), 2.5vw, var(--e-6)); }

.conformidade__cabeca h2 { margin-top: var(--e-3); max-width: 22ch; }

.conformidade__texto > * + * { margin-top: var(--e-3); }
.conformidade__texto p { max-width: 58ch; }

@media (min-width: 900px) {
  /* O cabeçalho segura a coluna estreita e o argumento corre ao lado.
     Empilhados, o título de três linhas e os dois parágrafos somavam meia
     tela só de abertura. */
  /* Nada de `column-gap` numa `.tela`: a grade tem cinco trilhas nomeadas
     e o vão entra entre todas elas, empurrando `centro-start` para a
     direita e estourando a página em 14px. O respiro entre as duas colunas
     vem da largura de cada uma e do `margin-left: auto`. */
  .conformidade__cabeca { grid-column: centro-start / centro-end; grid-row: 1; width: min(100%, 26rem); }
  .conformidade__texto  { grid-column: centro-start / centro-end; grid-row: 1; margin-left: auto; width: min(100%, 34rem); }
}

/* Tabela sem tabela: cada norma é uma linha com fio em cima. O `<dl>` é o
   elemento certo aqui, código e definição, e não uma lista qualquer. */
.normas { margin: 0; }

.norma {
  padding-block: var(--e-4);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.norma:last-child { border-bottom: var(--fio) solid var(--linha-cor, var(--linha)); }

.norma__cod {
  font-size: var(--fs-d3);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  font-weight: var(--peso-medio);
  color: var(--texto-cor, var(--texto));
}

.norma__txt { margin: var(--e-2) 0 0; max-width: 60ch; }

@media (min-width: 760px) {
  .norma {
    display: grid;
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
    align-items: baseline;
    column-gap: clamp(var(--e-4), 3vw, var(--e-6));
  }
  .norma__txt { margin-top: 0; }
}

/* O fecho é a promessa, não a nota de rodapé: corpo de lead e o mesmo fio
   das linhas acima, para ele fechar a tabela em vez de flutuar depois
   dela. */
.conformidade__fecho {
  margin-top: clamp(var(--e-3), 2vw, var(--e-4));
  max-width: 54ch;
  color: var(--texto-cor, var(--texto));
}


/* ==========================================================================
   5 · A CITAÇÃO ASSINADA
   Dobra própria, banda escura, Λ de marca d'água atrás. É o único lugar da
   página em que alguém fala em primeira pessoa, e por isso fica sozinho.

   **Centralizada, e só aqui.** O `design.md` §5 manda alinhar tudo à
   esquerda; este bloco é a exceção, por decisão do cliente. Para
   centralizar sem prejudicar a leitura a medida é curta, cerca de 46
   caracteres por linha: linha curta é o que faz o eixo central funcionar.

   A medida vai em `rem`, nunca em `ch`. O `ch` resolve contra a fonte do
   próprio elemento, e o bloco herda o corpo de texto: 46ch aqui valiam
   518px, o que em corpo de 28px dá trinta caracteres por linha e estica a
   seção para 913px.
   ========================================================================== */

.assinatura {
  position: relative;
  overflow: hidden;
  padding-block: clamp(var(--e-6), 4.5vw, var(--e-8));
}

/* Dimensionado pela altura e não pela largura: pelo lado maior ele estoura
   a seção e aparece cortado no topo. Mesmo defeito já corrigido na
   declaração da home. Sobre banda escura o Λ é claro, não escuro. */
.assinatura__lambda {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: 86%;
  aspect-ratio: 760 / 655;
  background: var(--papel);
  opacity: 0.045;
  -webkit-mask: var(--lambda) no-repeat center / contain;
          mask: var(--lambda) no-repeat center / contain;
  pointer-events: none;
}

.assinatura__bloco {
  position: relative;
  margin-inline: auto;
  max-width: min(100%, 54rem);
  text-align: center;
}

/* Justificada, com aspas, por pedido do cliente e seguindo a ABNT. É o
   único texto justificado do site: o `design.md` §5 proíbe justificar, e
   esta é a exceção registrada.

   **Sem hifenização, por decisão do cliente:** palavra cortada no fim da
   linha é pior que vão largo, e a palavra desce inteira. O preço disso é
   pago na medida, que subiu de 48 para 54rem: quanto mais caracteres cabem
   na linha, menos a falta do hífen aparece. */
.assinatura__frase {
  text-align: justify;
  text-align-last: center;
  hyphens: manual;
}

/* No celular a linha tem vinte e seis caracteres, e aí justificar abre vãos
   do tamanho de uma palavra entre uma palavra e outra. Justificado é norma
   de página impressa, com medida larga; numa coluna de 320px ele briga com
   a leitura, que é o que a norma quer proteger. Lá a citação volta a
   centralizar. */
@media (max-width: 619px) {
  .assinatura__frase { text-align: center; }
}

.assinatura__frase {
  margin: 0;
  font-size: var(--fs-d2-sub);
  line-height: 1.38;
  letter-spacing: var(--ls-lead);
  font-weight: var(--peso-normal);
  color: var(--texto-cor, var(--texto-inv));
  text-wrap: pretty;
}

/* Respiro curto entre os parágrafos: eles são um argumento só, em três
   tempos, e não três blocos independentes. */
.assinatura__frase p + p { margin-top: var(--e-3); }

/* A assinatura é o argumento, não a legenda: fio curto por cima, centrado
   com o bloco, e o nome em negrito. */
/* Fio curto e centrado: correndo os 672px do bloco ele lia como divisor de
   seção, não como traço de assinatura. */
.assinatura__autor {
  display: grid;
  gap: var(--e-1);
  margin-inline: auto;
  margin-top: var(--e-5);
  padding-top: var(--e-4);
  width: min(100%, 14rem);
  border-top: var(--fio) solid var(--linha-cor, var(--linha-inv));
}

.assinatura__nome {
  font-size: var(--fs-corpo);
  font-weight: var(--peso-forte);
  letter-spacing: var(--ls-lead);
  color: var(--texto-cor, var(--texto-inv));
}

.assinatura__cargo {
  font-size: var(--fs-sm);
  color: var(--meta-cor, var(--texto-meta-inv));
}


/* ==========================================================================
   7 · CTA FINAL
   Cena inteira ao fundo, texto no terço esquerdo, como a abertura. Sem as
   variáveis de banda escura o título herda --texto, que é quase preto, e
   some sobre a foto: a seção é clara na aparência e escura na regra. Foi
   esse o defeito do CTA final da home, em 31/08.
   ========================================================================== */




/* Mesma troca da abertura: no celular o texto ocupa a largura toda e a
   ponta direita cai na parte clara do véu lateral. */


.fecho h2 { max-width: 16ch; color: var(--texto-sobre-foto); }
/* Branco a 0.90, e não o de meta a 0.82. Esta cena é vista de cima, com
   mesas claras, e é mais brilhante que a da abertura: medido em 360px no
   pior pixel da faixa do subtítulo, 0.82 dava 4.47:1 e reprovava no AA por
   pouco. Em 0.90 mede 5.00:1. Subir o alfa do texto custa menos que
   escurecer mais o véu, que achataria a fotografia. */
.fecho .lead { margin-top: var(--e-4); max-width: 46ch; color: var(--texto-sobre-foto); }
.fecho .cta { margin-top: clamp(var(--e-5), 3vw, var(--e-6)); }