/* ==========================================================================
   base.css — reset, tipografia e layout de página
   Consome exclusivamente as custom properties de tokens.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--e-8); }

body {
  margin: 0;
  background: var(--n50);
  color: var(--c-grafite);
  font-family: var(--ff-corpo);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-medio); }

h1 {
  font-family: var(--ff-titulo);
  font-variation-settings: var(--fvs-display);
  font-size: var(--fs-h1-int);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-titulo);
  text-wrap: pretty;
}

h2 {
  font-family: var(--ff-titulo);
  font-variation-settings: var(--fvs-texto);
  font-size: var(--fs-h2-sec);
  line-height: var(--lh-h2);
  text-wrap: pretty;
}

h2 { margin-bottom: var(--e-3b); }

h3 { font-family: var(--ff-titulo); font-size: var(--fs-pergunta); line-height: var(--lh-h3); font-weight: var(--fw-forte); }
h4 { font-family: var(--ff-corpo); font-size: var(--fs-ui); line-height: var(--lh-h4); font-weight: var(--fw-forte); }

p { margin: 0 0 var(--e-3b); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--e-3b); padding-left: var(--e-3b); line-height: var(--lh-lista); }
li { margin-bottom: var(--e-1); }

a { color: var(--c-ambar); text-underline-offset: var(--filete); }
a:hover { color: var(--c-grafite); }
a[href^="mailto:"] { overflow-wrap: anywhere; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--foco-largura) solid var(--foco-cor);
  outline-offset: var(--foco-offset);
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

code { font-family: var(--ff-mono); font-size: var(--fs-caption); background: var(--n100); padding: var(--e-1) var(--e-2); }

/* ---------- Layout ---------- */

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: var(--e-4); padding-right: var(--e-4); }
.container--texto > * { max-width: var(--container-txt); }

.secao { padding-top: var(--secao-y); padding-bottom: var(--secao-y); }
.secao--papel { background: var(--n50); }
.secao--fundo { background: var(--n100); }
.secao--escura { background: var(--c-grafite); color: var(--n50); }
.secao--escura :is(.lead, .corpo) { color: var(--n300); }
.secao--escura .eyebrow { color: var(--c-ambar-claro); }   /* 7,61:1 sobre grafite */
.secao--escura a:not(.btn) { color: var(--c-ambar-claro); }
.secao--escura a:not(.btn):hover { color: var(--n0); }
/* card claro dentro de seção escura volta ao link padrão (âmbar sobre branco, 5,91:1) */
.secao--escura .card:not(.card--escuro):not(.card--alerta) a:not(.btn) { color: var(--c-ambar); }
.secao--escura .card:not(.card--escuro):not(.card--alerta) a:not(.btn):hover { color: var(--c-grafite); }

/* contextos escuros: anel de foco âmbar-claro (7,61:1 sobre grafite) */
:is(.cabecalho, .secao--escura, .card--escuro, .card--alerta, .rodape) { --foco-cor: var(--c-ambar-claro); }

.medida     { max-width: var(--medida-texto); }
.medida-lead { max-width: var(--medida-lead); }
.medida-curta { max-width: var(--medida-curta); }

.grid { display: grid; gap: var(--e-4); }
.grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(var(--coluna-min-sm), 1fr)); }
.grid--duas  { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); align-items: start; }
.grid--duas > picture { max-width: var(--medida-curta); }
/* hero abaixo de 1024px: foto primeiro, em recorte horizontal, para caber na primeira tela */
@media (max-width: 1023px) {
  .grid--hero { gap: var(--e-4); }
  .grid--hero > picture { order: -1; max-width: none; }
  .grid--hero .foto { aspect-ratio: 16 / 10; object-position: 50% 0; }
  /* retrato do Sobre tem o rosto mais baixo no quadro */
  .grid--hero .foto--sobre { aspect-ratio: 16 / 10; object-position: 50% 4%; }
}
/* tablet: retrato com largura contida e mais corpo no quadro */
@media (min-width: 600px) and (max-width: 1023px) {
  .grid--hero > picture { max-width: var(--medida-curta); }
  .grid--hero .foto:not(.foto--sobre) { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  /* primeira tela: foto, título e CTA visíveis sem rolar */
  .secao:has(> .grid--hero) { padding-top: var(--e-4); }
  .grid--hero .titulo-hero { margin-bottom: var(--e-3); }
  .grid--hero .lead { font-size: var(--fs-body); line-height: var(--lh-body); }
  .grid--hero .eyebrow { margin-bottom: var(--e-2); }
  /* selo do hero em uma linha no celular */
  .grid--hero .eyebrow { letter-spacing: var(--ls-chip); }
  .grid--hero .eyebrow::before { display: none; }
}

/* cards com texto corrido: uma coluna até 1279px; duas a partir de 1280px,
   o último card ímpar vira faixa de largura total (mínimo de 45 caracteres por linha) */
.grid--cards { grid-template-columns: minmax(0, 1fr); }

.grid + p { margin-top: var(--e-5); }
.secao > .container + .container { margin-top: var(--e-5); }
/* em blocos de texto, título que abre um novo assunto ganha respiro acima */
.container--texto > * + h2:not(.titulo-secao) { margin-top: var(--e-6); }
/* ...menos logo depois da sobrancelha, que pertence ao próprio título */
.container--texto > .eyebrow + h2 { margin-top: 0; }

.pilha { display: flex; flex-direction: column; gap: var(--e-3b); }
.linha { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

/* ---------- Tipografia utilitária ---------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--e-2b);
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medio);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  color: var(--c-ambar);
  margin-bottom: var(--e-3);
}
.eyebrow::before { content: ""; flex: 0 0 var(--e-5); height: var(--borda); background: currentColor; }
.eyebrow--claro { color: var(--c-ambar-claro); }

/* palavra de destaque nos títulos, em itálico dourado */
.destaque { font-style: italic; color: var(--c-ambar); }
:is(.secao--escura, .card--escuro, .card--alerta) .destaque { color: var(--c-ambar-claro); }

.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--n700); }
.corpo { color: var(--n700); }
.corpo:not(.medida-lead):not(.medida-curta) { max-width: var(--medida-texto); }
.apoio { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--n600); }
.data { font-size: var(--fs-body); color: var(--n600); }

.titulo-secao { margin-bottom: var(--e-5); }
.titulo-hero { font-size: var(--fs-h1-int); margin-bottom: var(--e-4); }
.titulo-display { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }

/* @media não aceita var(): 599px, 1024px e 1280px são breakpoints de tokens.css */
@media (max-width: 599px) {
  .titulo-display { font-size: var(--fs-display-mob); }
  /* H1 abaixo de 40px sai do corte display */
  .titulo-hero { font-size: var(--fs-h1-mob); font-variation-settings: var(--fvs-texto); }
  h2 { font-size: var(--fs-h3); }
  /* no mobile, botões em sequência ocupam a largura toda: alvo de toque maior e alinhamento limpo */
  .linha > .btn, .form .btn, .dividida__intro > .btn { flex: 1 1 100%; width: 100%; }
}

@media (min-width: 600px) {
  .secao { padding-top: var(--secao-y-md); padding-bottom: var(--secao-y-md); }
}

@media (min-width: 1024px) {
  .secao { padding-top: var(--secao-y-lg); padding-bottom: var(--secao-y-lg); }
  .container { padding-left: var(--e-7); padding-right: var(--e-7); }
  .grid--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--hero { grid-template-columns: var(--hero-colunas); }
  .grid--hero-inverso { grid-template-columns: var(--hero-colunas-inverso); }
  .grid--centro { align-items: center; }
}

@media (min-width: 1280px) {
  .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}