@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/site-assets/poppins-300-normal-78bc3aa7.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/site-assets/poppins-300-italic-f0ae296f.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/site-assets/poppins-400-normal-7d93459d.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/site-assets/poppins-500-normal-cd36de20.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/site-assets/poppins-600-normal-f4e80d9d.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/site-assets/poppins-700-normal-9338e65f.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/site-assets/poppins-800-normal-60bf0aba.woff2') format('woff2'); }
/* Site público do joão online. Desenho aprovado na ficha 00.1 (`docs/superpowers/specs/paginas-publicas/pp-00-fundacao/mockup-00.1.html`).
   Tokens com os mesmos valores do painel (`web/src/index.css`, tema claro); desvios "Site" do §10 do design system.
   Sempre claro, sem tema escuro (decisão 11 da análise). As @font-face da Poppins são postas na frente deste arquivo pelo build. */
:root {
  --navy: #001d43;
  --navy-2: #00306b;
  --azul: #1d4f91;
  --gelo: #c5d6ee;
  --nevoa: #9bb8de;
  --papel: #ffffff;
  --fundo: #f0f2f5;
  --linha: #e2e8f0;
  --tinta: #0f172a;
  --tinta-2: #334155;
  --tinta-3: #64748b;
  --ambar: #92400e;
  --ambar-fundo: #fffbeb;
  --verde: #047857;
  --verde-fundo: #ecfdf5;
  --display: 'Poppins', ui-sans-serif, system-ui, sans-serif;
  --curva: cubic-bezier(0.4, 0, 0.2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--display); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.035em; }
p { margin: 0; }
.fx { max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.pular { position: absolute; left: -9999px; top: 0; background: var(--papel); color: var(--navy); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.pular:focus { left: 12px; top: 12px; }
.seta { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--curva); flex: none; }

/* faixa da pré-visualização (só no build de prévia) */
.previa { background: var(--ambar-fundo); color: var(--ambar); font-size: 12.5px; border-bottom: 1px solid #fde68a; }
.previa .fx { padding-block: 8px; }

/* cabeçalho */
.topo { background: var(--navy); color: #fff; }
.topo .fx { display: flex; align-items: center; gap: 28px; padding-block: 22px; flex-wrap: wrap; }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: -0.045em; text-decoration: none; line-height: 1; }
.wordmark i { font-style: normal; font-weight: 300; color: var(--nevoa); }
.topo nav { display: flex; gap: 6px 26px; flex-wrap: wrap; font-size: 14px; flex: 1; }
.topo nav a { text-decoration: none; color: rgba(255,255,255,.72); transition: color .2s var(--curva); }
.topo nav a:hover, .topo nav a[aria-current="page"] { color: #fff; }
.entrar { text-decoration: none; font-size: 14px; font-weight: 600; border: 1px solid rgba(255,255,255,.28); border-radius: 8px; padding: 8px 16px; transition: all .2s var(--curva); margin-left: auto; }
.entrar:hover { border-color: #fff; }
.topo.claro { background: var(--papel); color: var(--tinta); border-bottom: 1px solid var(--linha); }
.topo.claro .wordmark i { color: var(--azul); }
.topo.claro nav a { color: var(--tinta-3); }
.topo.claro nav a:hover, .topo.claro nav a[aria-current="page"] { color: var(--navy); }
.topo.claro .entrar { border-color: var(--linha); color: var(--navy); }
.topo.claro .entrar:hover { border-color: var(--navy); }

/* botões */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 8px; padding: 13px 22px; transition: all .2s var(--curva); cursor: pointer; }
.btn.claro { background: #fff; color: var(--navy); }
.btn.claro:hover { background: var(--gelo); }
.btn.escuro { background: var(--navy); color: #fff; }
.btn.escuro:hover { background: var(--navy-2); }
.btn:hover .seta { transform: translateX(3px); }

/* abertura escura (usada pela página de prova e pela 404) */
.abre { background: var(--navy); color: #fff; }
.abre .fx { padding-block: 68px 96px; }
.abre h1 { font-size: clamp(40px, 6.2vw, 82px); line-height: 0.98; font-weight: 800; max-width: 13em; }
.abre h1 em { font-style: italic; font-weight: 300; color: var(--nevoa); letter-spacing: -0.03em; }
.abre .lead { margin-top: 28px; max-width: 40em; color: rgba(255,255,255,.78); font-size: 17px; font-weight: 300; }
.abre .acoes { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* rodapé */
.rod { background: var(--navy); color: rgba(255,255,255,.62); font-size: 14px; }
.rod .fx { padding-block: 64px 28px; }
.rod .alto { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.rod .wordmark { color: #fff; font-size: 28px; }
.rod address { font-style: normal; margin-top: 18px; line-height: 1.75; }
.rod .col b { display: block; color: #fff; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.rod .col a { display: block; text-decoration: none; padding: 3px 0; color: rgba(255,255,255,.8); }
.rod .col a:hover { color: #fff; }
.rod .col a.outro { color: rgba(255,255,255,.55); }
.rod .baixo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; }

/* Documento (políticas, ficha 02.1): texto em largura de leitura de 68ch (desvio "Site" do §10), índice ao lado no computador. */
.doc-topo { border-bottom: 1px solid var(--linha); }
.doc-topo .fx { padding-block: 56px 36px; }
.doc-topo h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; font-weight: 800; color: var(--navy); max-width: 18em; }
.doc-meta { margin-top: 14px; color: var(--tinta-3); font-size: 14px; }
.doc-aviso { margin-top: 18px; max-width: 68ch; background: var(--ambar-fundo); color: var(--ambar); border: 1px solid #fde68a; border-radius: 12px; padding: 12px 16px; font-size: 14px; }
.doc { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 68ch); gap: 56px; padding-block: 48px 72px; align-items: start; }
.doc-indice { position: sticky; top: 24px; font-size: 13.5px; }
.doc-indice b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 10px; }
.doc-indice ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linha); }
.doc-indice a { display: block; padding: 4px 0 4px 14px; color: var(--tinta-3); text-decoration: none; }
.doc-indice a:hover { color: var(--navy); }
.doc-texto { grid-column: 2; color: var(--tinta-2); }
.doc-texto h2 { color: var(--navy); font-size: 24px; font-weight: 700; margin: 44px 0 14px; scroll-margin-top: 24px; }
.doc-texto h2:first-child { margin-top: 0; }
.doc-texto h3 { color: var(--tinta); font-size: 17px; font-weight: 600; margin: 28px 0 10px; letter-spacing: -0.02em; }
.doc-texto p, .doc-texto ul, .doc-texto ol { margin: 0 0 14px; }
.doc-texto ul, .doc-texto ol { padding-left: 22px; }
.doc-texto li { margin-bottom: 6px; }
.doc-texto strong { color: var(--tinta); font-weight: 600; }
.doc-texto a { color: var(--azul); }
.doc-texto code { font-size: 0.9em; background: var(--fundo); border-radius: 4px; padding: 1px 5px; }
.doc-texto .tabela { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--linha); border-radius: 12px; }
.doc-texto table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc-texto th { text-align: left; background: var(--fundo); color: var(--tinta); font-weight: 600; }
.doc-texto th, .doc-texto td { padding: 10px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.doc-texto tr:last-child td { border-bottom: 0; }
.doc-versoes { background: var(--fundo); }
.doc-versoes .fx { padding-block: 32px; font-size: 14px; }
.doc-versoes b { display: block; color: var(--navy); font-weight: 600; margin-bottom: 8px; }
.doc-versoes ul { margin: 0; padding-left: 18px; color: var(--tinta-3); }
.doc-versoes a { color: var(--azul); }
.doc-versoes [aria-current] { color: var(--tinta); font-weight: 600; }

/* Página inicial (ficha 01.1), pelo mockup aprovado na 00.1. A CSP recusa `style=""`: posições e larguras em classes. */
.duas { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; }
.tit-secao { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.04; }
.tit-secao em { font-style: italic; font-weight: 300; color: var(--tinta-3); letter-spacing: -0.02em; }
.escuro .tit-secao em { color: var(--nevoa); }
.abre.inicio .fx { padding-block: 68px 8px; }
.portas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid rgba(255,255,255,.2); }
.porta { display: block; text-decoration: none; padding: 30px 32px 34px 0; position: relative; }
.porta + .porta { padding-left: 32px; border-left: 1px solid rgba(255,255,255,.2); }
.porta small { display: block; font-size: 13px; color: var(--nevoa); margin-bottom: 8px; }
.porta h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; line-height: 1.08; transition: color .2s var(--curva); }
.porta ul { list-style: none; padding: 0; margin: 16px 0 18px; display: grid; gap: 4px; color: rgba(255,255,255,.8); font-size: 15px; font-weight: 300; }
.porta li::before { content: ""; display: inline-block; width: 14px; height: 1px; background: var(--nevoa); vertical-align: middle; margin-right: 10px; }
.porta .ir { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.porta:hover .seta { transform: translateX(4px); }
.porta:hover h2 { color: var(--gelo); }

.mes { padding-block: 96px 64px; }
.mes .intro, .bloco .intro { color: var(--tinta-2); font-size: 16.5px; font-weight: 300; max-width: 34em; }
.bloco .intro { margin-top: 18px; max-width: 30em; }
.mes .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 13px; color: var(--tinta-3); margin: 40px 0 16px; }
.mes .cab b { color: var(--tinta); font-size: 15px; font-weight: 600; }
.dias { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); border-top: 1px solid var(--linha); }
.dia { height: 22px; border-left: 1px solid var(--linha); font-size: 10.5px; color: var(--tinta-3); font-variant-numeric: tabular-nums; padding: 4px 0 0 4px; line-height: 1; }
.dia.fds { color: #cbd5e1; }
.dia.marco { border-left: 2px solid var(--navy); color: var(--navy); font-weight: 600; }
.eventos { position: relative; height: 168px; margin: 4px 0 0; padding: 0; list-style: none; }
.evento { position: absolute; top: 0; width: 15%; min-width: 128px; padding-left: 10px; border-left: 2px solid var(--navy); font-size: 13px; line-height: 1.35; color: var(--tinta-2); }
.evento b { display: block; font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.evento.baixo { top: 80px; }
.evento.direita { border-left: 0; border-right: 2px solid var(--navy); padding-left: 0; padding-right: 10px; text-align: right; }
/* Cada evento sobre o traço do dia: (dia - 1) / 30; o do fim do mês se apoia pela direita. */
.evento.d2 { left: 3.333%; } .evento.d5 { left: 13.333%; } .evento.d10 { left: 30%; } .evento.d13 { left: 40%; }
.evento.d20 { left: 63.333%; } .evento.d25 { left: 80%; } .evento.d30 { right: 3.333%; }

.bloco { padding-block: 88px; border-top: 1px solid var(--linha); }
.bloco.cinza { background: var(--fundo); border-top: 0; }
.bloco.escuro { background: var(--navy); color: #fff; border-top: 0; }
.bloco.escuro .intro { color: rgba(255,255,255,.75); }
.itens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 44px; align-content: start; }
.item { border-top: 2px solid var(--navy); padding-top: 14px; }
.bloco.escuro .item { border-top-color: rgba(255,255,255,.5); }
.item b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 6px; }
.item p { color: var(--tinta-2); font-size: 15px; }
.bloco.escuro .item p { color: rgba(255,255,255,.72); font-weight: 300; }

.servicos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linha); margin-top: 44px; }
.servico { padding: 18px 20px 20px 0; border-bottom: 1px solid var(--linha); }
.servico:not(:nth-child(3n+1)) { padding-left: 20px; border-left: 1px solid var(--linha); }
.servico b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--navy); }
.servico span { font-size: 13.5px; color: var(--tinta-2); }
.condicao { margin-top: 26px; font-size: 14px; color: var(--tinta-2); padding: 16px 18px; border-left: 3px solid var(--azul); background: var(--fundo); border-radius: 0 10px 10px 0; }

.linha-tempo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 48px 0 0; padding: 0; list-style: none; }
.marco-ano { padding: 0 18px 0 0; }
.marco-ano .ano { font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.marco-ano .barra { height: 6px; margin: 16px 0 14px; background: rgba(255,255,255,.18); border-radius: 999px; position: relative; overflow: hidden; }
.marco-ano .barra i { position: absolute; inset: 0 auto 0 0; background: var(--gelo); border-radius: 999px; }
.barra .b8 { width: 8%; } .barra .b40 { width: 40%; } .barra .b55 { width: 55%; } .barra .b85 { width: 85%; } .barra .b100 { width: 100%; }
.marco-ano p { font-size: 14px; color: rgba(255,255,255,.78); font-weight: 300; line-height: 1.5; }
.marco-ano.agora .ano::after { content: "agora"; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--navy); background: var(--gelo); border-radius: 999px; padding: 2px 8px; margin-left: 10px; vertical-align: middle; }
.legenda-reforma { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 22px; }
.reforma-itens { margin-top: 56px; }

.busca { margin: 0; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); box-shadow: 0 30px 60px -32px rgba(0,29,67,.28); overflow: hidden; }
.busca .campo { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linha); font-size: 16px; }
.busca .lupa { width: 18px; height: 18px; stroke: var(--tinta-3); fill: none; stroke-width: 2; flex: none; }
.busca .cursor { display: inline-block; width: 1px; height: 18px; background: var(--azul); vertical-align: middle; margin-left: 1px; }
.busca .filtros { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 22px; border-bottom: 1px solid var(--linha); background: var(--fundo); }
.busca .filtros span { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--papel); border: 1px solid var(--linha); color: var(--tinta-2); }
.busca .filtros span.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.acervo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.acervo div { padding: 16px 22px; border-bottom: 1px solid var(--linha); }
.acervo div:nth-child(odd) { border-right: 1px solid var(--linha); }
.acervo b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }
.acervo span { font-size: 13px; color: var(--tinta-2); }
.busca .pe { padding: 12px 22px; font-size: 12px; color: var(--tinta-3); }

.fale { padding-block: 104px; }
.fale .fx { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.fale h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1; }
.fale h2 em { font-style: italic; font-weight: 300; color: var(--azul); }
.fale p { color: var(--tinta-2); margin-bottom: 22px; }
.fale .email { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; display: block; margin: 0 0 22px; user-select: all; color: var(--navy); }

/* Páginas das soluções (ficha 01.2), pela tela do emissor do mockup 00.1. */
.abre-claro { padding-block: 60px 24px; }
.abre-claro .trilha { font-size: 13px; color: var(--tinta-3); margin-bottom: 18px; }
.abre-claro .trilha a { text-decoration: none; }
.abre-claro .trilha a:hover { color: var(--navy); }
.abre-claro .grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
.abre-claro .grade.so { grid-template-columns: minmax(0, 1fr); max-width: 52em; }
.abre-claro h1 { font-size: clamp(38px, 5vw, 66px); font-weight: 800; line-height: 1; }
.abre-claro h1 em { font-style: italic; font-weight: 300; color: var(--azul); }
.abre-claro .lead { color: var(--tinta-2); font-size: 17px; font-weight: 300; margin: 24px 0 28px; max-width: 30em; }
.nota-pe { font-size: 13px; color: var(--tinta-3); margin-top: 16px; }
.nota { margin: 0; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); box-shadow: 0 34px 70px -34px rgba(0,29,67,.32), 0 1px 2px rgba(15,23,42,.05); overflow: hidden; font-size: 13px; }
.nota .cabn { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--linha); }
.nota .cabn b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.nota .cabn small { color: var(--tinta-3); font-size: 11.5px; }
.nota .sit { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--verde-fundo); color: var(--verde); white-space: nowrap; }
.nota .chave { padding: 10px 22px; background: var(--fundo); border-bottom: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-3); word-break: break-all; font-variant-numeric: tabular-nums; }
.nota .campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nota .campos div { padding: 12px 22px; border-bottom: 1px solid var(--linha); }
.nota .campos div:nth-child(odd) { border-right: 1px solid var(--linha); }
.nota .campos .largo { grid-column: 1 / -1; border-right: 0 !important; }
.nota .rot { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); margin-bottom: 2px; }
.nota .v { font-weight: 500; color: var(--tinta); }
.nota .totais { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nota .totais div { padding: 12px 22px; border-right: 1px solid var(--linha); }
.nota .totais div:last-child { border-right: 0; }
.nota .totais .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nota .totais .ibs .v { color: var(--azul); }
.nota .pe { padding: 10px 22px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-3); }

/* Formulário de contato (ficha 03.1). */
.form { display: grid; gap: 16px; border: 1px solid var(--linha); border-radius: 20px; padding: 26px; background: var(--papel); }
.form .tipos { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.form legend { font-size: 13px; font-weight: 600; color: var(--tinta); margin-bottom: 8px; padding: 0; }
.form .tipos label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--tinta-2); cursor: pointer; }
.form .campo { display: grid; gap: 6px; }
.form .campo span { font-size: 13px; font-weight: 600; color: var(--tinta); }
.form input:not([type="radio"]), .form textarea { font: inherit; font-size: 15px; color: var(--tinta); background: var(--papel); border: 1px solid #cbd5e1; border-radius: 8px; padding: 10px 12px; width: 100%; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: var(--azul); }
.form textarea { resize: vertical; min-height: 140px; }
.form .par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form .aviso { font-size: 13px; color: var(--tinta-3); }
.form .aviso a { color: var(--azul); }
.form button { border: 0; justify-self: start; font-family: inherit; }
.mel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 960px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .doc-indice { position: static; }
  .doc-texto { grid-column: auto; }
  .duas, .fale .fx, .abre-claro .grade { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .servicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servico:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .servico:nth-child(even) { padding-left: 20px; border-left: 1px solid var(--linha); }
  .linha-tempo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 0; }
  .rod .alto { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rod .alto > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .portas { grid-template-columns: minmax(0, 1fr); }
  .porta { padding-right: 0; }
  .porta + .porta { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.2); }
  .dias { display: none; }
  .eventos { height: auto; display: grid; gap: 16px; border-left: 1px solid var(--linha); padding-left: 18px; }
  .evento, .evento.baixo, .evento.direita, .evento[class*=" d"] { position: static; width: auto; min-width: 0; border: 0; padding: 0; text-align: left; }
  .evento b { display: inline; font-size: 17px; margin-right: 8px; }
  .itens, .acervo { grid-template-columns: minmax(0, 1fr); }
  .acervo div:nth-child(odd) { border-right: 0; }
  .servicos { grid-template-columns: minmax(0, 1fr); }
  .servico:nth-child(even) { padding-left: 0; border-left: 0; }
  .bloco, .mes, .fale { padding-block: 64px; }
  .form .par { grid-template-columns: minmax(0, 1fr); }
  .nota .totais { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nota .totais div:nth-child(2) { border-right: 0; }
  .nota .totais div:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
}
@media (max-width: 480px) {
  .rod .alto, .linha-tempo, .nota .campos { grid-template-columns: minmax(0, 1fr); }
  .nota .campos div:nth-child(odd) { border-right: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .abre h1, .abre .lead, .portas { animation: sobe .6s var(--curva) both; }
  .abre .lead { animation-delay: .08s; } .portas { animation-delay: .16s; }
  @keyframes sobe { from { transform: translateY(14px); } to { transform: none; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }