/* CUSTOGOV — site institucional. Paleta e tipografia do kit de marca (06/10/2026):
   navy #12304A · petróleo #167C80 · amarelo #F2B544 · Exo 2 (títulos) · Source Sans 3 (texto).
   Contrastes medidos em docs/decisions/0001 (petróleo sobre branco 4,97:1; navy sobre amarelo 7,41:1). */

/* ===== Fontes (auto-hospedadas, OFL em /assets/fonts/) ===== */
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/exo-2-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Exo 2"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/exo-2-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-ext-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("/assets/fonts/source-sans-3-latin-italico.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Tokens ===== */
:root {
  --navy: #12304A;
  --navy-escuro: #0B2037;
  --petroleo: #167C80;
  --petroleo-hover: #126765;
  --petroleo-claro: #E3F1F1;
  --amarelo: #F2B544;
  --branco: #FFFFFF;
  --fundo: #F3F6F9;
  --texto: #1C2B3A;
  --texto-suave: #4A5B6B;
  --texto-sobre-escuro: #FFFFFF;
  --texto-suave-sobre-escuro: #B8D8DA;
  --borda: #C9D4DD;
  --contorno: #7A8C9C;
  --foco: #167C80;
  --foco-sobre-escuro: #7FD0D3;
  --raio: 10px;
  --sombra: 0 6px 24px rgba(18, 48, 74, 0.08);
  --fonte-titulo: "Exo 2", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --largura: 1160px;
  --gutter: 16px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--fonte-texto); font-size: 1.0625rem; line-height: 1.6; color: var(--texto); background: var(--branco); }
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--navy); line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--petroleo); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petroleo-hover); }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
strong { font-weight: 600; }
small { font-size: 0.875rem; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.sobre-escuro :focus-visible, .header :focus-visible { outline-color: var(--foco); }
.secao--navy :focus-visible, .footer :focus-visible, .hero :focus-visible, .cta-faixa :focus-visible { outline-color: var(--foco-sobre-escuro); }

.container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: absolute; left: 8px; top: -60px; background: var(--amarelo); color: var(--navy); padding: 10px 14px; border-radius: 6px; font-weight: 600; z-index: 100; }
.pular-conteudo:focus { top: 8px; }

/* ===== Eyebrow: traço amarelo + rótulo (elemento do kit) ===== */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--petroleo); margin-bottom: 0.75rem; }
.eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--amarelo); border-radius: 2px; }
.secao--navy .eyebrow, .hero .eyebrow, .cta-faixa .eyebrow { color: var(--amarelo); }
.lead { font-size: 1.2rem; color: var(--texto-suave); max-width: 62ch; }
.secao--navy .lead, .hero .lead { color: var(--texto-suave-sobre-escuro); }

/* ===== Linha modular (linha com nó, do kit) ===== */
.linha-modular { position: relative; height: 2px; background: var(--petroleo); margin: 2rem 0; max-width: 240px; }
.linha-modular::after { content: ""; position: absolute; right: -6px; top: -5px; width: 12px; height: 12px; border: 2px solid var(--petroleo); border-radius: 50%; background: var(--branco); }
.secao--navy .linha-modular, .hero .linha-modular { background: var(--amarelo); }
.secao--navy .linha-modular::after, .hero .linha-modular::after { border-color: var(--amarelo); background: var(--navy); }

/* ===== Botões ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 8px; font-family: var(--fonte-titulo); font-weight: 600; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; transition: background-color .15s, color .15s, border-color .15s; }
.btn--primario { background: var(--petroleo); color: var(--branco); border-color: var(--petroleo); }
.btn--primario:hover { background: var(--petroleo-hover); border-color: var(--petroleo-hover); color: var(--branco); }
.btn--amarelo { background: var(--amarelo); color: var(--navy); border-color: var(--amarelo); }
.btn--amarelo:hover { background: #E9A62B; border-color: #E9A62B; color: var(--navy); }
.btn--contorno { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--contorno:hover { background: var(--navy); color: var(--branco); }
.btn--contorno-claro { background: transparent; color: var(--branco); border-color: var(--branco); }
.btn--contorno-claro:hover { background: var(--branco); color: var(--navy); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ===== Cabeçalho ===== */
.header { position: sticky; top: 0; z-index: 50; background: var(--branco); border-bottom: 1px solid var(--borda); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.header__logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); }
.header__logo img { width: 44px; height: 40px; }
.header__logo .wordmark { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.02em; line-height: 1; }
.wordmark__gov { color: var(--petroleo); }
.hamburger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--borda); background: var(--branco); border-radius: 8px; color: var(--navy); cursor: pointer; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a:not(.btn), .dropdown__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 6px; color: var(--navy); font-family: var(--fonte-titulo); font-weight: 600; font-size: 0.95rem; text-decoration: none; background: none; border: 0; cursor: pointer; }
.nav > a:not(.btn):hover, .dropdown__btn:hover, .nav > a[aria-current="page"] { background: var(--petroleo-claro); color: var(--navy); }
.nav .btn { margin-left: 8px; padding: 10px 18px; font-size: 0.95rem; }
.dropdown { position: relative; }
.dropdown__menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 8px; z-index: 60; }
.dropdown[data-aberto] .dropdown__menu { display: block; }
.dropdown__menu a { display: block; padding: 10px 12px; border-radius: 6px; color: var(--navy); text-decoration: none; font-weight: 500; }
.dropdown__menu a:hover, .dropdown__menu a[aria-current="page"] { background: var(--petroleo-claro); }
.dropdown__menu a small { display: block; color: var(--texto-suave); font-weight: 400; }
@media (min-width: 1024px) { .hamburger { display: none; } }
@media (max-width: 1023.98px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; background: var(--branco); border-bottom: 1px solid var(--borda); padding: 12px var(--gutter) 20px; box-shadow: var(--sombra); gap: 2px; }
  .nav[data-aberto] { display: flex; }
  .nav > a:not(.btn), .dropdown__btn { width: 100%; padding: 12px; font-size: 1.05rem; }
  .nav .btn { width: 100%; }
  .dropdown__menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 8px 12px; min-width: 0; }
  .dropdown__btn svg { display: none; }
  .nav .btn { margin: 10px 0 0; }
  body[data-menu-aberto] { overflow: hidden; }
}

/* ===== Hero ===== */
.hero { position: relative; background: var(--navy); color: var(--texto-sobre-escuro); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy-escuro) 0%, var(--navy) 55%, var(--petroleo) 140%); }
.hero::after { content: ""; position: absolute; right: -8%; top: -30%; width: 46%; height: 160%; background: var(--petroleo); opacity: .18; transform: skewX(-14deg); }
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; gap: 40px; padding-block: 56px 64px; align-items: center; }
.hero h1 { color: var(--branco); margin-bottom: 0.4em; }
.hero h1 .destaque { color: var(--amarelo); }
.hero__acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.hero__figura { position: relative; }
.hero__figura img { border-radius: var(--raio); box-shadow: 0 20px 50px rgba(0,0,0,.35); clip-path: polygon(0 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
.hero__legenda { font-size: 0.8125rem; color: var(--texto-suave-sobre-escuro); margin-top: 8px; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; padding-block: 80px 88px; } }

/* ===== Seções ===== */
.secao { padding: 64px 0; }
@media (min-width: 900px) { .secao { padding: 88px 0; } }
.secao--alt { background: var(--fundo); }
.secao--navy { background: var(--navy); color: var(--texto-sobre-escuro); }
.secao--navy h2, .secao--navy h3, .secao--navy h4 { color: var(--branco); }
.secao--navy p { color: var(--texto-suave-sobre-escuro); }
.secao--navy a { color: var(--foco-sobre-escuro); }
.secao__cabeca { max-width: 760px; margin-bottom: 2.5rem; }
.secao__cabeca p { color: var(--texto-suave); font-size: 1.125rem; }
.secao--navy .secao__cabeca p { color: var(--texto-suave-sobre-escuro); }
.centro { text-align: center; }
.centro .eyebrow { justify-content: center; }
.centro .secao__cabeca { margin-left: auto; margin-right: auto; }
.centro .linha-modular { margin-left: auto; margin-right: auto; }

/* ===== Grades (sempre auto-fit: colunas fixas espremem o conteúdo) ===== */
.grade { display: grid; gap: 20px; }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.duas-colunas { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .duas-colunas { grid-template-columns: 1fr 1fr; } .duas-colunas--invertida > :first-child { order: 2; } }

/* ===== Cartões ===== */
.card { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 0.25em; }
.card p { color: var(--texto-suave); }
.card__icone { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 10px; background: var(--petroleo-claro); color: var(--petroleo); margin-bottom: 6px; }
.card--destaque { border-top: 4px solid var(--amarelo); }
.secao--navy .card { background: var(--navy-escuro); border-color: rgba(255,255,255,.12); }
.secao--navy .card p { color: var(--texto-suave-sobre-escuro); }
.secao--navy .card__icone { background: rgba(255,255,255,.08); color: var(--foco-sobre-escuro); }
.saiba-mais { font-family: var(--fonte-titulo); font-weight: 600; text-decoration: none; }
.saiba-mais::after { content: " →"; }

/* ===== Números ===== */
.numeros { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.numero { padding: 24px; border-left: 4px solid var(--amarelo); background: var(--branco); border-radius: 0 var(--raio) var(--raio) 0; box-shadow: var(--sombra); }
.numero__valor { font-family: var(--fonte-titulo); font-weight: 700; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); color: var(--navy); line-height: 1.05; }
.numero__legenda { color: var(--texto-suave); margin: 6px 0 0; }
.secao--navy .numero { background: var(--navy-escuro); }
.secao--navy .numero__valor { color: var(--amarelo); }
.fonte { font-size: 0.8125rem; color: var(--texto-suave); margin-top: 1.25rem; }
.secao--navy .fonte { color: var(--texto-suave-sobre-escuro); }

/* ===== Lista com marca ===== */
.lista-check { list-style: none; padding: 0; margin: 0 0 1.25em; }
.lista-check li { position: relative; padding-left: 32px; margin-bottom: 10px; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--petroleo-claro); }
.lista-check li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 5px; height: 9px; border: solid var(--petroleo); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.secao--navy .lista-check li::before { background: rgba(255,255,255,.1); }
.secao--navy .lista-check li::after { border-color: var(--amarelo); }

/* ===== Ciclo / etapas numeradas ===== */
.etapas { list-style: none; counter-reset: etapa; padding: 0; margin: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.etapas li { counter-increment: etapa; position: relative; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px 20px 20px 20px; min-width: 0; }
.etapas li::before { content: counter(etapa, decimal-leading-zero); display: inline-block; font-family: var(--fonte-titulo); font-weight: 700; color: var(--petroleo); font-size: 0.9rem; letter-spacing: .06em; margin-bottom: 8px; }
.etapas h3 { font-size: 1.1rem; margin-bottom: 4px; }
.etapas p { margin: 0; color: var(--texto-suave); font-size: 0.975rem; }

/* ===== Linha do tempo (marcos) ===== */
.marcos { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.marcos li { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--borda); }
.marcos__ano { font-family: var(--fonte-titulo); font-weight: 700; color: var(--navy); }
.marcos__ano.tcu { color: var(--petroleo); }
.marcos strong { display: block; }
.marcos p { margin: 0; color: var(--texto-suave); }

/* ===== Tabelas ===== */
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela th, .tabela td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borda); vertical-align: top; font-size: 0.975rem; }
.tabela th { background: var(--fundo); font-family: var(--fonte-titulo); font-weight: 600; color: var(--navy); white-space: nowrap; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela td:first-child { font-weight: 600; color: var(--navy); }

/* ===== Selos ===== */
.selos { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; }
.selos li { background: var(--petroleo-claro); color: var(--navy); border-radius: 999px; padding: 5px 12px; font-size: 0.9rem; font-weight: 600; }
.secao--navy .selos li { background: rgba(255,255,255,.1); color: var(--branco); }

/* ===== Figuras ===== */
.figura { margin: 0; }
.figura img { border-radius: var(--raio); box-shadow: var(--sombra); width: 100%; }
.figura a { display: block; }
.figura figcaption { font-size: 0.8125rem; color: var(--texto-suave); margin-top: 8px; }
.secao--navy .figura figcaption { color: var(--texto-suave-sobre-escuro); }

/* ===== Faixa de chamada ===== */
.cta-faixa { position: relative; background: var(--petroleo); color: var(--branco); overflow: hidden; }
.cta-faixa::after { content: ""; position: absolute; right: -10%; top: 0; width: 38%; height: 100%; background: var(--navy); transform: skewX(-14deg); }
.cta-faixa__inner { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 48px; }
.cta-faixa h2 { color: var(--branco); margin-bottom: .25em; }
.cta-faixa p { color: #E6F4F4; margin: 0; max-width: 60ch; }

/* ===== Cabeçalho de página interna ===== */
.pagina-cabeca { background: var(--navy); color: var(--branco); padding: 56px 0; position: relative; overflow: hidden; }
.pagina-cabeca::after { content: ""; position: absolute; right: -12%; top: -40%; width: 40%; height: 180%; background: var(--petroleo); opacity: .22; transform: skewX(-14deg); }
.pagina-cabeca > .container { position: relative; z-index: 1; }
.pagina-cabeca h1 { color: var(--branco); max-width: 20ch; }
.pagina-cabeca .lead { color: var(--texto-suave-sobre-escuro); }
.trilha { font-size: 0.875rem; color: var(--texto-suave-sobre-escuro); margin-bottom: 1rem; }
.trilha a { color: var(--branco); }
.trilha span::before { content: "›"; margin: 0 8px; }

/* ===== Prosa (páginas internas) ===== */
.prosa { max-width: 72ch; }
.prosa h2 { margin-top: 2.5rem; }
.prosa h3 { margin-top: 1.75rem; }

/* ===== Formulário ===== */
.form { display: grid; gap: 16px; }
.form label { display: block; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
.form input, .form select, .form textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--contorno); border-radius: 8px; background: var(--branco); color: var(--texto); }
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { border-color: var(--petroleo); }
.form__linha { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.form__nota { font-size: 0.9rem; color: var(--texto-suave); }
.form__aviso { background: var(--petroleo-claro); color: var(--navy); border-radius: 8px; padding: 12px 14px; }

/* ===== Rodapé ===== */
.footer { background: var(--navy-escuro); color: var(--texto-suave-sobre-escuro); padding: 56px 0 28px; }
.footer a { color: var(--branco); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--foco-sobre-escuro); }
.footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin-bottom: 36px; }
.footer__logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; color: var(--branco); font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.3rem; }
.footer__logo img { width: 44px; height: 40px; }
.footer__logo .wordmark__gov { color: var(--foco-sobre-escuro); }
.footer h2 { color: var(--branco); font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 8px; }
.footer__base { border-top: 1px solid rgba(255,255,255,.12); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 0.9rem; }
.footer__tagline { display: inline-flex; align-items: center; gap: 8px; color: var(--amarelo); font-family: var(--fonte-titulo); font-weight: 600; font-size: .9rem; }
.footer__tagline::before, .footer__tagline::after { content: ""; width: 18px; height: 2px; background: var(--amarelo); }

/* ===== Revelação ao rolar (progressiva: sem JS nada fica oculto) ===== */
html.js .revelar.oculto { opacity: 0; transform: translateY(14px); }
html.js .revelar { transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { html.js .revelar, html.js .revelar.oculto { opacity: 1; transform: none; transition: none; } }

/* ===== Utilidades ===== */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.espaco { height: 24px; }
.nota { font-size: 0.9375rem; color: var(--texto-suave); }
.sobre-escuro { color: var(--texto-sobre-escuro); }

/* ===== Teclas ===== */
kbd { font-family: var(--fonte-titulo); font-size: 0.85em; font-weight: 600; color: var(--navy); background: var(--fundo); border: 1px solid var(--contorno); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }

/* ===== Perguntas e respostas ===== */
.faq { max-width: 76ch; }
.faq details { border: 1px solid var(--borda); border-radius: var(--raio); padding: 0 20px; margin-bottom: 12px; background: var(--branco); }
.faq summary { cursor: pointer; font-family: var(--fonte-titulo); font-weight: 600; color: var(--navy); padding: 16px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--petroleo); font-size: 1.3em; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--texto-suave); }
.faq details p:last-child { padding-bottom: 16px; }