/* QivoN - tipografia das 7 institucionais
   GERADO por catalogo-sync/gen_institucionais.py - NAO editar a mao.

   Linkada so nas 7 paginas de texto, DEPOIS do css/tema.css (que define
   as variaveis usadas aqui) e depois do <style> inline de cada pagina.
   ------------------------------------------------------------------- */

/* ------------------------------------------------------------
   1. A COLUNA DE LEITURA.

   Medido antes: 87 caracteres por linha nas 6 politicas e 117 na
   sobre, contra a faixa de 60-75. `ch` e a largura do "0" na fonte
   do elemento, entao a coluna acompanha o corpo do texto -- um
   valor em px viraria mentira no dia que o corpo mudar.

   `margin-inline:auto` porque as politicas sao uma coluna so: sem
   ele a caixa capada encostaria na esquerda de um container largo.
   ------------------------------------------------------------ */
.sobre-content {
  max-width: 68ch;
  margin-inline: auto;
}

/* A sobre tem barra lateral (`.sobre-logo-col`); as 6 politicas nao.
   Capar a coluna sem mexer na grade deixaria 300 px de vazio entre o
   texto e a barra -- entao a grade encolhe junto. `:has()` porque e a
   unica forma de distinguir as duas sem classe no <body>, e vem dentro
   de @supports para a ausencia dele nao desmontar a pagina: sem :has,
   o texto fica capado e a barra na direita, que e feio e nao quebrado.
   Acima de 900 px apenas: abaixo disso o bloco inline ja empilha. */
@media (min-width: 901px) {
  @supports selector(:has(*)) {
    .sobre-hero-w:has(.sobre-logo-col) {
      max-width: 1180px;
      grid-template-columns: auto minmax(240px, 300px);
      justify-content: center;
      gap: 3.5rem;
    }
  }
}

/* ------------------------------------------------------------
   2. O CORPO DO TEXTO.

   14,08 px em peso 300 e cinza e fino demais para pagina que se le
   de cima a baixo -- e politica de privacidade e justamente isso.
   16 px com entrelinha 1,75 e a medida editorial.

   O peso fica em 300: subir para 400 engrossaria a pagina inteira,
   e o problema medido era tamanho, nao peso.
   ------------------------------------------------------------ */
.sobre-p {
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 1.15rem;
}

/* O primeiro paragrafo da pagina como entrada. So o primeiro: `lead`
   em todo paragrafo nao e lead, e corpo grande. */
.sobre-sec:first-child .sobre-p:first-of-type {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #4A4A48;
}

.sobre-sec {
  margin-bottom: 3.4rem;
}

/* ------------------------------------------------------------
   3. O TITULO DE SECAO.

   A familia serifada vem do css/tema.css, que tem `.sobre-h2` na
   regra -- aqui so o tamanho e o espaco. Declarar a familia nos dois
   arquivos criaria duas fontes para manter, e a segunda envelhece.
   ------------------------------------------------------------ */
.sobre-h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.2;
  letter-spacing: normal;
  margin-bottom: 1.1rem;
}

/* ------------------------------------------------------------
   4. AS LISTAS.
   ------------------------------------------------------------ */
.sobre-list li {
  font-size: .95rem;
  line-height: 1.7;
  padding: .72rem 0;
}

/* Linha mais fina e mais longa: traco de 1 px le como marca
   editorial, de 2 px le como barra de interface. */
.sobre-divider {
  width: 48px;
  height: 1px;
  margin-bottom: 1.25rem;
}

/* ------------------------------------------------------------
   5. OS CARDS DE DESTAQUE.

   A borda do card citava `rgba(31,183,180,.15)` -- o teal MORTO,
   sobrevivente da troca de 16/10/2026. Passa a derivar da variavel,
   entao a proxima troca de acento a leva consigo.
   ------------------------------------------------------------ */
.sobre-dif-card {
  border-color: var(--border);
  border-left-color: var(--teal);
  padding: 1.15rem 1.25rem;
}
.sobre-dif-title {
  font-size: .75rem;
  letter-spacing: .09em;
  margin-bottom: .5rem;
}
.sobre-dif-text {
  font-size: .85rem;
  line-height: 1.65;
}
.sobre-diferenciais {
  gap: 1.1rem;
  margin-top: 1.4rem;
}

/* ------------------------------------------------------------
   6. OS DOIS CARDS DE GARANTIA, QUE ERAM ILEGIVEIS.

   Eram cor inline: `--green` #27ae60 dava 2,52:1 e `--orange`
   #e67e22 dava 2,50:1 sobre o `--teal-l` #EAF2F0, contra o piso de
   4,5 -- em 11 px e maiusculas, o pior caso. As cores abaixo foram
   escolhidas CONTRA esse fundo: 5,73:1 e 5,98:1.

   O verde e o ambar ficam porque a cor aqui CARREGA SENTIDO (coberto
   x nao coberto); trocar os dois por cinza resolveria o contraste e
   apagaria a informacao.
   ------------------------------------------------------------ */
.sobre-dif-ok { border-left-color: #1A6B40; }
.sobre-dif-ok .sobre-dif-title { color: #1A6B40; }
.sobre-dif-no { border-left-color: #8A4B00; }
.sobre-dif-no .sobre-dif-title { color: #8A4B00; }

/* ------------------------------------------------------------
   7. A BARRA LATERAL DA SOBRE.

   O padding vem dentro de `min-width:901px` de proposito. Esta folha
   e lida DEPOIS do <style> inline, entao uma regra solta aqui
   venceria o `padding:1.5rem` que o inline da a ela abaixo de 600 px
   -- e a barra ganharia margem no celular, onde ela ja ocupa a
   largura toda. Ordem de cascata ganha empate de especificidade: a
   regra "sem media query" nao e neutra, e a mais forte.
   ------------------------------------------------------------ */
@media (min-width: 901px) {
  .sobre-logo-col { padding: 1.75rem; }
}
.sobre-logo-tagline {
  font-size: .6875rem;
  letter-spacing: .1em;
  line-height: 1.9;
}

/* ------------------------------------------------------------
   8. O CAMINHO (breadcrumb) DENTRO DO HEROI ESCURO.

   Medido pelo medir_legibilidade.js: `--g600` #666 sobre o #141414
   do heroi da 3,21:1 em 44 elementos -- e o caminho e a primeira
   coisa da pagina. A regra `.breadcrumb` e IDENTICA no catalogo, onde
   passa, porque lá ela recebe branco por outro seletor: e o caso
   classico de corrigir por SELETOR e nunca por valor de cor. Trocar o
   `--g600` consertaria 44 e quebraria os 512 lugares onde ele passa.

   Por isso a correcao esta aqui, escopada no `.page-hero` das 7, e
   nao no tema: a `checkout.html` tem o mesmo defeito e e outra etapa.

   O hover vai para branco, nao para o `--teal`: o acento novo
   #0F6E66 da 3,02:1 sobre o #141414 e praticamente desaparece. Um
   token de acento para fundo ESCURO e decisao do tema, nao desta
   folha -- inventa-lo aqui criaria a segunda definicao de acento.
   ------------------------------------------------------------ */
.page-hero .breadcrumb,
.page-hero .breadcrumb a,
.page-hero .breadcrumb .breadcrumb-sep {
  color: rgba(255, 255, 255, .62);
}
.page-hero .breadcrumb a:hover {
  color: #fff;
}

/* ------------------------------------------------------------
   9. MOBILE.

   A 390 px a medida ja estava em 44 ch, que e boa -- o que falta e
   ar. Nada de capar coluna aqui: a tela ja e a capa.

   E nada de repetir `grid-template-columns:1fr` nos cards: o <style>
   inline ja empilha a 900 px, e declarar 600 aqui faria o arquivo
   anunciar 600 como o ponto de quebra sem ser.
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .sobre-sec { margin-bottom: 2.6rem; }
  .sobre-h2 { font-size: 1.45rem; }
  .sobre-sec:first-child .sobre-p:first-of-type { font-size: 1.04rem; }
}