/* Página Typography: 10 combinações de fontes aplicadas aos títulos e ao cartão do site, para
   escolher a tipografia. As fontes ficam em fonts/tipografia (licença OFL) e só são baixadas
   quando esta página é aberta (o navegador só busca uma @font-face quando um texto a usa). */

/* Newsreader é a fonte do site (css/app.css); Instrument Serif foi a anterior (opção 1). */
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-display: swap; src: url("../fonts/tipografia/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 400 900; font-display: swap; src: url("../fonts/tipografia/playfair-display-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-weight: 200 900; font-display: swap; src: url("../fonts/tipografia/source-sans-3-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-weight: 100 900; font-display: swap; src: url("../fonts/tipografia/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Serif Display"; font-weight: 400; font-display: swap; src: url("../fonts/tipografia/dm-serif-display-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 100 1000; font-display: swap; src: url("../fonts/tipografia/dm-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 300 700; font-display: swap; src: url("../fonts/tipografia/space-grotesk-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 400; font-display: swap; src: url("../fonts/tipografia/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-weight: 600; font-display: swap; src: url("../fonts/tipografia/ibm-plex-serif-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 100 700; font-display: swap; src: url("../fonts/tipografia/ibm-plex-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-weight: 400 700; font-display: swap; src: url("../fonts/tipografia/lora-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 100 900; font-display: swap; src: url("../fonts/tipografia/work-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 200 700; font-display: swap; src: url("../fonts/tipografia/oswald-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 100 900; font-display: swap; src: url("../fonts/tipografia/roboto-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-display: swap; src: url("../fonts/tipografia/source-serif-4-latin-wght-normal.woff2") format("woff2"); }

.tipo-intro { max-width: 760px; width: 100%; margin-inline: auto; text-align: center; display: grid; gap: 6px; padding: 22px 24px; }
.tipo-intro p { color: var(--texto-2); }
.tipo-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 18px; }
.tipo-opcao { padding: 18px 20px 20px; display: grid; gap: 14px; align-content: start; }
.tipo-cabecalho { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--borda); }
.tipo-cabecalho h2 { font-size: 1.15rem; font-family: var(--fonte); font-weight: 650; }
.tipo-cabecalho p { color: var(--texto-3); font-size: .86rem; }
.tipo-atual { color: var(--acento-texto); font-weight: 700; }

/* A amostra: tudo dentro dela usa as fontes da opção (--t-titulo, --t-texto, --t-peso, --t-caixa). */
.tipo-amostra {
  font-family: var(--t-texto); font-variant-numeric: tabular-nums; display: grid; gap: 16px;
  --t-peso: 600; --t-caixa: none; --t-esp: 0;
}
.tipo-amostra .t-titulo { font-family: var(--t-titulo); font-weight: var(--t-peso); text-transform: var(--t-caixa); letter-spacing: var(--t-esp); font-synthesis: none; margin: 0; }
.tipo-heroi { text-align: center; display: grid; gap: 6px; padding: 18px 12px; border-radius: var(--raio-p); background: linear-gradient(180deg, var(--heroi-a), var(--heroi-b)); }
.tipo-heroi .t-chapeu { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acento-texto); }
.tipo-heroi .t-titulo { font-size: clamp(2rem, 4.6vw, 2.8rem); line-height: 1.05; }
.tipo-heroi .t-lema { color: var(--texto-2); font-size: .95rem; max-width: 420px; margin-inline: auto; }

.tipo-cartao { border: 1px solid var(--borda-forte); border-top: 4px solid var(--acento-texto); border-radius: var(--raio); padding: 16px 18px; display: grid; gap: 14px; }
.tipo-cand { display: flex; gap: 14px; align-items: center; }
.tipo-num { font-weight: 700; font-size: 1.3rem; background: var(--vidro-forte); border-radius: var(--raio-p); padding: 8px 12px; }
.tipo-cand .t-titulo { font-size: 1.75rem; line-height: 1.05; }
.tipo-cand small { display: block; color: var(--texto-2); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.tipo-metricas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tipo-metricas div { border-top: 2px solid var(--texto); padding-top: 6px; display: grid; }
.tipo-metricas strong { font-size: 1.35rem; font-weight: 700; }
.tipo-metricas span { font-size: .74rem; color: var(--texto-2); }

.tipo-secao { display: grid; gap: 8px; }
.tipo-secao .t-titulo { font-size: 1.3rem; }
.tipo-secao table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tipo-secao th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); border-bottom: 2px solid var(--texto); padding: 4px 6px; }
.tipo-secao td { padding: 6px; border-bottom: 1px solid var(--borda); }
.tipo-secao .num { text-align: right; }

@media (max-width: 640px) {
  .tipo-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tipo-cand .t-titulo { font-size: 1.45rem; }
}