/* ==========================================================================
   BASE — reset, tipografia, textura de papel, utilitários de layout
   Depende de tokens.css. Não redefina token aqui.
   ========================================================================== */
/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
/* O `display:none` que o atributo `hidden` traz vem da folha do navegador,
   então qualquer `display` declarado aqui no tema ganha dele. Como
   `.rz-field{display:flex}`, todo campo condicional marcado com `hidden`
   continuava aparecendo: o "Registro no conselho" ficava visível mesmo pra
   quem não escolheu profissão com conselho, e o "Estado ou província"
   (internacional) aparecia junto do "Estado (UF)" brasileiro. Achado
   testando o select de profissão em 2026-08-29. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--rz-header-h) + 14px)}
body{
  margin:0;background:var(--rz-cream);color:var(--rz-ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.62;-webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;
}
body.rz-is-locked{overflow:hidden}
body{overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--rz-terra);outline-offset:3px;border-radius:6px}
h1,h2,h3,h4,.serif{font-family:"Playfair Display",Georgia,serif;font-weight:600;letter-spacing:-.012em;line-height:1.12;margin:0}
p{margin:0}

.rz-wrap{width:min(var(--rz-maxw), 100% - var(--rz-gutter)*2);margin-inline:auto}
.rz-section{padding-block:var(--rz-sec)}
.rz-section--tight{padding-block:calc(var(--rz-sec)*.58)}

.rz-eyebrow{
  display:flex;align-items:center;gap:10px;
  font-size:var(--rz-fs-micro);font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rz-ink-3);margin-bottom:14px;
}
.rz-eyebrow::before{content:"";width:26px;height:1px;background:var(--rz-gold);flex:0 0 auto}
.rz-dark .rz-eyebrow{color:var(--rz-on-dark-2)}

.rz-sechead{display:grid;gap:18px;margin-bottom:clamp(22px,2.6vw,38px)}
/* h1 e h2 desenham igual de propósito: `rz_sechead()` emite `<h1>` quando
   é o cabeçalho da página e `<h2>` quando é o de uma seção dentro dela
   (2026-08-31, quando as listagens ganharam o `<h1>` que nunca tiveram).
   A mudança é de semântica, não de escala — o desenho é o mesmo. */
.rz-sechead h1,.rz-sechead h2{font-size:var(--rz-fs-h2)}
.rz-sechead .rz-lead{margin-top:12px;color:var(--rz-ink-2);font-size:var(--rz-fs-lead);font-weight:300;max-width:var(--rz-measure)}
.rz-dark .rz-sechead .rz-lead{color:var(--rz-on-dark-2)}
@media (min-width:860px){ .rz-sechead{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px} }

.rz-skip{position:absolute;left:-999px;top:0;background:var(--rz-dark);color:var(--rz-cream);padding:10px 16px;z-index:99}
/* Rótulo só pra leitor de tela. O tema não tinha um utilitário desses e
   vinha usando `aria-label` em tudo — mas campo de formulário precisa de
   <label> de verdade pra ser anunciado em toda tecnologia assistiva. */
.rz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}
.rz-skip:focus{left:0}

.rz-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;
  font-size:.92rem;font-weight:500;padding:.78em 1.35em;white-space:nowrap;
  transition:transform .14s var(--rz-ease),background .2s,color .2s,border-color .2s}
.rz-btn:active{transform:scale(.97)}
.rz-btn--dark{background:var(--rz-dark);color:var(--rz-on-dark-solid)}
.rz-btn--dark:hover{background:var(--rz-dark-hover)}
.rz-btn--ghost{border:1px solid var(--rz-terra);color:var(--rz-terra)}
.rz-btn--ghost:hover{background:var(--rz-terra-tint-2)}
.rz-btn--quiet{border:1px solid var(--rz-line-2);color:var(--rz-ink-2)}
.rz-btn--quiet:hover{border-color:var(--rz-ink-3);background:var(--rz-veil-50)}
.rz-btn--lg{font-size:.98rem;padding:.92em 1.6em}

/* As utilitárias NÃO moram aqui: estão no FIM de components.css — a escala
   de espaço (`.rz-mt*`/`.rz-mb*`/`.rz-pilha*`) e também `.rz-measure`.
   Motivo, achado ao aplicar o lote 3: uma utilitária em base.css e um
   componente em components.css têm a mesma especificidade (0,1,0), e a
   folha carregada depois vence. `<p class="rz-searchmeta rz-mt0">` perderia
   pro `margin-top:12px` do `.rz-searchmeta` — silenciosamente, que é o pior
   jeito de errar. `.rz-measure` ficou para trás nessa mudança: hoje nenhum
   componente que ela acompanha define `max-width`, então ninguém viu, mas
   era a mesma armadilha esperando o primeiro que definisse. */

.rz-subhead{font-size:var(--rz-fs-h3);margin-bottom:12px}
/* Fileira simples de botões (ex.: "Ligar"/"WhatsApp" no perfil). Rodada de
   refino visual 2026-08-28: single-rz_perfil.php reaproveitava
   `.rz-step__nav` (componente de navegação do wizard) só pelo `display:flex`,
   herdando de brinde uma borda superior e `justify-content:space-between`
   que forçava um segundo botão pro canto oposto — corrigido com override
   inline parcial que não cobria a borda nem o auto-margin do `--ghost`. */
.rz-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
/* Título de página de conteúdo (h1 no tamanho de h2) e coluna de leitura
   centralizada sem ficha lateral (texto/verbete) — mesmos dois padrões
   repetidos inline em perfil/evento/curso e texto/verbete, encontrados na
   varredura de navegação desta rodada. */
.rz-title-md{font-size:var(--rz-fs-h2)}
.rz-measure-center{max-width:var(--rz-measure);margin-inline:auto}