/*
  Tema Sereno — a camada de IDENTIDADE. F-DV4 (ADR-11), celula base-2.

      base.css              primitivas da plataforma
      celulas/base-2.css      grade, ritmo, responsivo
      mm-sereno.css        isto aqui

  A hierarquia Composta pinta DUAS superficies alternadas e UMA faixa. Mais
  que isso viraria ritmo, que e da 3; menos seria a sequencia plana da 1.

  Nenhuma regra abaixo decide grade, largura, direcao de eixo ou posicao: o
  `ProvaDestrutivaTest` recusa cada uma pelo nome sobre as classes da celula.
*/

:root {
  /* Derivado, e por isso NAO e token: nao e decisao de ninguem.
     O que alguem escolhe e emitido (ver ThemeRaiz); o que se calcula fica aqui. */

  --filete: color-mix(in srgb, var(--tinta) 16%, transparent);
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--p-texto-p-fonte, var(--texto));
  font-weight: var(--p-texto-p-peso, 400);
  line-height: 1.7;
}

h1, h2, h3 { font-family: var(--display); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; }
h3 { font-family: var(--p-texto-h3-fonte, var(--texto)); font-weight: var(--p-texto-h3-peso, 600); letter-spacing: 0; line-height: 1.35; font-size: var(--p-texto-h3-tamanho, calc(1.17rem * var(--escala-texto, 1))); }

.apoio {
  font-size: calc(.72rem * var(--escala-texto, 1));
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--mm-text-eyebrow-color, var(--destaque-texto));
  margin: 0;
}
.conduz { font-size: var(--p-texto-p-tamanho, calc(1.05rem * var(--escala-texto, 1))); color: var(--mm-text-subtitle-color, var(--tinta-fraca)); margin: 0; }
.item p { color: var(--tinta-fraca); margin: 0; font-size: var(--p-texto-p-tamanho, calc(.95rem * var(--escala-texto, 1))); }
.item h3 { margin: 0; }

.topo { background: color-mix(in srgb, var(--p-menu-fundo, var(--papel)) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--filete); }
.marca { font-family: var(--display); font-size: calc(1.15rem * var(--escala-texto, 1)); }
.menu a { font-size: calc(.9rem * var(--escala-texto, 1)); color: var(--p-menu-texto, var(--tinta-fraca)); }
.menu a:hover, .menu a:focus-visible { color: var(--p-menu-texto-selecao, var(--destaque-texto)); }

.acao {
  background: var(--mm-cta-primary-default-background, var(--destaque));
  color: var(--mm-cta-primary-default-text, var(--papel));
  border: 1px solid var(--mm-cta-primary-default-border, var(--destaque));
  border-radius: 2px; padding: 14px 24px;
  font-size: calc(.9rem * var(--escala-texto, 1)); font-weight: 600; letter-spacing: .02em; text-align: center;
}
.acao:hover, .acao:focus-visible {
  background: var(--mm-cta-primary-hover-background, var(--escuro));
  border-color: var(--mm-cta-primary-hover-border, var(--escuro));
  color: var(--mm-cta-primary-hover-text, var(--mm-cta-primary-default-text, var(--papel)));
}
.acao--vazada { background: transparent; color: var(--destaque-texto); border-color: var(--filete); }
.acao--vazada:hover, .acao--vazada:focus-visible { background: transparent; color: var(--tinta); border-color: var(--tinta); }

.passo .marcador { font-family: var(--display); font-size: calc(1.5rem * var(--escala-texto, 1)); color: var(--destaque-texto); line-height: 1; }

.campo label { font-size: calc(.82rem * var(--escala-texto, 1)); font-weight: 600; letter-spacing: .04em; }
.campo input, .campo textarea { background: var(--papel); border: 1px solid var(--filete); border-radius: 2px; padding: 12px 14px; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--destaque); }

.rodape { background: var(--escuro); color: var(--papel); padding-block: clamp(32px, 5vw, 56px); font-size: calc(.88rem * var(--escala-texto, 1)); }
.rodape a { color: var(--papel); }
.rodape a:hover, .rodape a:focus-visible { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--destaque); outline-offset: 3px; }

h1 { font-size: var(--p-texto-h1-tamanho, calc(clamp(2.3rem, 6vw, 4rem) * var(--escala-texto, 1))); }
h2 { font-size: var(--p-texto-h2-tamanho, calc(clamp(1.7rem, 3.6vw, 2.6rem) * var(--escala-texto, 1))); }

/* A alternancia: uma superficie a mais, e so. */
#processo { background: var(--papel-2); }

/* A faixa que corta a rolagem. */
.faixa { background: var(--escuro); color: var(--papel); }
/* SDD-builder-refino-7 F-R7-1 (ADR-1): a composicao nao emite <b>; `.valor`/`.rotulo` alcancam o mesmo pedaco na secao convertida (o `:not(.valor)` impede a regra do rotulo de pegar o valor, que tambem e' um span). */
.faixa .numero b, .faixa .numero .valor { font-weight: bolder; font-family: var(--display); font-size: calc(2.6rem * var(--escala-texto, 1)); line-height: 1; }
.faixa .numero span:not(.valor), .faixa .numero .rotulo { color: color-mix(in srgb, var(--papel) 72%, transparent); font-size: calc(.84rem * var(--escala-texto, 1)); }

.hero__figura img { border-radius: 2px; }

/* F-R3-6 (4.1) - os estados do item de menu.

   O FUNDO por item nao existia: o topo pintava um fundo so, e o item nao tinha
   nenhum. Nasce transparente, entao nada muda ate alguem escolher uma cor.

   O ATIVO tambem nao existia, e nao era esquecimento: estes menus sao ancoras
   para secoes da MESMA pagina. Quem marca `aria-current` agora e o
   comportamento `item-ativo` de comportamentos.js - por caminho quando o link
   aponta para outra pagina, e por secao a vista quando e ancora. */
.menu a { background: var(--p-menu-fundo-selecao, transparent); transition: background .2s ease, color .2s ease; }
.menu a:hover, .menu a:focus-visible { background: var(--p-menu-fundo-selecao, transparent); }
.menu a[aria-current] { background: var(--p-menu-fundo-ativo, transparent); color: var(--p-menu-texto-ativo, var(--tinta-fraca)); }

/* F-R3-6 (4.2) - os seis niveis, ligados aos papeis de texto.

   A RESERVA de cada um e' o que a folha desenhava: sem escolha no painel, a
   variavel nao e' emitida e vale a expressao de sempre - inclusive o `clamp()`
   dos titulos, que e' o que faz o H1 encolher no celular.

   h4, h5 e h6 nao eram desenhados por tema nenhum. Eles nao sao inercia: o
   builder cria no de composicao com `tag: h4`, e sem regra o campo existiria
   sem nada para pintar. */
h1 { font-family: var(--p-texto-h1-fonte, var(--display)); font-weight: var(--p-texto-h1-peso, 500); }
h2 { font-family: var(--p-texto-h2-fonte, var(--display)); font-weight: var(--p-texto-h2-peso, 500); }
h3 { font-family: var(--p-texto-h3-fonte, var(--texto)); font-weight: var(--p-texto-h3-peso, 600); }
h4 { font-family: var(--p-texto-h4-fonte, var(--texto)); font-weight: var(--p-texto-h4-peso, 600); font-size: var(--p-texto-h4-tamanho, calc(1.15rem * var(--escala-texto, 1))); }
h5 { font-family: var(--p-texto-h5-fonte, var(--texto)); font-weight: var(--p-texto-h5-peso, 600); font-size: var(--p-texto-h5-tamanho, calc(1rem * var(--escala-texto, 1))); }
h6 { font-family: var(--p-texto-h6-fonte, var(--texto)); font-weight: var(--p-texto-h6-peso, 600); font-size: var(--p-texto-h6-tamanho, calc(.88rem * var(--escala-texto, 1))); }
/* SDD-builder-refino-10 F-R10-14 — o nivel PARaGRAFO.
   Toda leitura de papel leva RESERVA: entre publicar e o site:push-theme a
   variavel nao existe, e uma leitura sem reserva deixaria o texto sem fonte
   e sem tamanho nessa janela. A reserva e' o que a folha ja' fazia. */
p { font-family: var(--p-texto-p-fonte, var(--texto)); font-weight: var(--p-texto-p-peso, 400); font-size: var(--p-texto-p-tamanho, calc(1rem * var(--escala-texto, 1))); }

/* F-R3-6 (4.3) - os dois botoes, nos tres estados.

   Vem DEPOIS das regras do tema de proposito: mesma especificidade, e quem
   vence e' a ultima. Sem isso, `.contato .btn-solid` da ygg-home continuaria
   mandando na cor escolhida no painel - o defeito de campo que obedece em
   metade da pagina.

   A reserva de cada um e' `inherit`/`currentColor` quando existe, e a
   expressao de hoje quando nao: sem escolha no painel a variavel nao e'
   emitida e o botao fica exatamente como estava. */
.acao { background: var(--p-botao-principal-fundo, var(--destaque)); color: var(--p-botao-principal-texto, var(--papel)); border-color: var(--p-botao-principal-borda, var(--destaque)); border-width: var(--p-botao-principal-espessura, 1px); border-style: solid; }
.acao:hover, .acao:focus-visible { background: var(--p-botao-principal-selecao-fundo, var(--escuro)); color: var(--p-botao-principal-selecao-texto, var(--papel)); border-color: var(--p-botao-principal-selecao-borda, var(--escuro)); border-width: var(--p-botao-principal-selecao-espessura, 1px); }
.acao:active, .acao[aria-current] { background: var(--p-botao-principal-ativo-fundo, var(--escuro)); color: var(--p-botao-principal-ativo-texto, var(--papel)); border-color: var(--p-botao-principal-ativo-borda, var(--escuro)); border-width: var(--p-botao-principal-ativo-espessura, 1px); }

.acao--vazada { background: var(--p-botao-secundario-fundo, transparent); color: var(--p-botao-secundario-texto, var(--destaque-texto)); border-color: var(--p-botao-secundario-borda, var(--filete)); border-width: var(--p-botao-secundario-espessura, 1px); border-style: solid; }
.acao--vazada:hover, .acao--vazada:focus-visible { background: var(--p-botao-secundario-selecao-fundo, transparent); color: var(--p-botao-secundario-selecao-texto, var(--tinta)); border-color: var(--p-botao-secundario-selecao-borda, var(--tinta)); border-width: var(--p-botao-secundario-selecao-espessura, 1px); }
.acao--vazada:active, .acao--vazada[aria-current] { background: var(--p-botao-secundario-ativo-fundo, transparent); color: var(--p-botao-secundario-ativo-texto, var(--tinta)); border-color: var(--p-botao-secundario-ativo-borda, var(--tinta)); border-width: var(--p-botao-secundario-ativo-espessura, 1px); }