/* Calculadora da Pena. Identidade do logotipo (azul-marinho #102a43, verde-azulado
   #146b72, dourado #c1a05b, marfim #f6f5f1) sobre o layout de referência: fundo branco,
   logotipo grande e centralizado, botões em pílula, cantos arredondados, sombras suaves,
   fonte Manrope servida localmente. Tema escuro por data-theme="dark". */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;src:url("./fontes/manrope.woff2") format("woff2")}
:root{
  --bg:#ffffff; --bg-2:#ffffff; --bg-3:#f6f5f1; --bg-4:#ecebe6; --ink:#102a43; --ink-2:#3d4f63; --muted:#6b7684;
  --line:#e4e3de; --line-2:#cfceC7; --navy:#102a43; --navy-2:#1b3d5e; --navy-ink:#ffffff;
  --teal:#146b72; --teal-2:#0f565c; --teal-bg:rgba(20,107,114,.10); --teal-ink:#ffffff;
  --gold:#c1a05b; --gold-bg:rgba(193,160,91,.16); --verde:#1f7a4d; --verde-bg:rgba(31,122,77,.10);
  --vermelho:#b3261e; --vermelho-bg:rgba(179,38,30,.08); --ambar:#7a5a12; --ambar-bg:rgba(193,160,91,.16);
  --sombra:0 8px 30px rgba(16,42,67,.08); --sombra-2:0 2px 8px rgba(16,42,67,.10); --sombra-3:0 6px 10px rgba(0,0,0,.05);
  --r:16px; --r2:12px; --sans:"Manrope","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0f1720; --bg-2:#162230; --bg-3:#1b2937; --bg-4:#223244; --ink:#eef2f6; --ink-2:#c5cfda; --muted:#93a1b1;
  --line:#2a3a4c; --line-2:#3f5166; --navy:#8fb8e0; --navy-2:#a9c8ea; --navy-ink:#0b1622;
  --teal:#5fc0c6; --teal-2:#7fd0d5; --teal-bg:rgba(95,192,198,.14); --teal-ink:#06262a;
  --gold:#d9bb75; --gold-bg:rgba(217,187,117,.14); --verde:#5fc48f; --verde-bg:rgba(95,196,143,.12);
  --vermelho:#f28b82; --vermelho-bg:rgba(242,139,130,.12); --ambar:#e6c26e; --ambar-bg:rgba(230,194,110,.12);
  --sombra:0 8px 30px rgba(0,0,0,.35); --sombra-2:0 2px 8px rgba(0,0,0,.4); --sombra-3:0 6px 10px rgba(0,0,0,.3);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
a{color:var(--teal)}
h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-weight:700}
h1{font-size:clamp(1.7rem,3vw,2.3rem)}
h2{font-size:1.25rem;margin-bottom:10px}
h3{font-size:1.05rem}
h4{font-size:.95rem;margin:18px 0 8px}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ico{width:1em;height:1em;flex:none;vertical-align:-.12em}

/* ---------- cabeçalho: só o logotipo, grande e centralizado ---------- */
/* A barra flutuante com menu saiu em 07/09/2026: os links das páginas ficam só no rodapé.
   O único controle que sobrou no alto é o tema, discreto no canto, fora do bloco centralizado. */
.topo{position:relative;max-width:1120px;margin:0 auto;padding:30px 64px 10px;display:flex;flex-direction:column;align-items:center;gap:16px}
/* A marca vertical é o SVG original com o texto convertido em curvas (a fonte "Facebook Letter
   Faces" não está embutida). As duas linhas herdam as cores do tema: em `dark`, o azul-marinho
   de "DA PENA" desapareceria no fundo. */
.marca-topo{display:block;line-height:0;text-decoration:none}
.marca-vertical{width:clamp(170px,24vw,240px);height:auto;display:block}
.marca-vertical .marca-txt-1{fill:var(--teal)}
.marca-vertical .marca-txt-2{fill:var(--ink)}
/* a marca horizontal continua no rodapé */
.marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;line-height:1}
.marca svg{width:68px;height:68px;flex:none}
.marca__nome{display:flex;flex-direction:column;font-weight:800;letter-spacing:.08em;font-size:1.02rem;text-transform:uppercase;line-height:1.15}
.marca__nome b{color:var(--teal);font-weight:800}
.marca__nome span{color:var(--ink)}
.tema-btn{position:absolute;top:34px;right:20px;color:var(--muted);padding:9px;border-radius:10px;background:none;border:0;cursor:pointer;display:inline-flex;line-height:0}
.tema-btn:hover{background:var(--bg-3);color:var(--ink)}
.tema-btn .ico{width:20px;height:20px}
main{max-width:1120px;margin:0 auto;padding:28px 20px 60px}

/* ---------- rodapé ---------- */
.rodape{margin-top:40px;padding:36px 20px 28px;border-top:1px solid var(--line);background:var(--bg-3)}
.rodape__inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:stretch}
/* a coluna da marca acompanha a altura da lista "Páginas": o texto desce até a última linha dela */
.rodape__marca{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.rodape .marca svg{width:60px;height:60px}
.rodape .marca__nome{font-size:.8rem}
.rodape p{color:var(--muted);font-size:.82rem;max-width:460px;margin-top:0}
.rodape h3{font-size:.95rem;margin-bottom:10px}
.rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rodape a{color:var(--ink-2);text-decoration:none;font-size:.95rem}
.rodape a:hover{color:var(--teal);text-decoration:underline}
.rodape__base{max-width:1120px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:center}
/* assinatura da CORTEX: o wordmark herda currentColor, então serve nos dois temas */
.cortex{display:inline-block;color:var(--muted);font-size:.8rem;text-decoration:none;white-space:nowrap}
.rodape .cortex:hover{color:var(--ink-2);text-decoration:none}
.cortex-marca{height:19px;width:auto;fill:currentColor;display:inline-block;vertical-align:baseline;margin-left:10px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border-radius:12px;border:0;background:var(--bg-2);color:var(--ink);font-weight:600;font-size:1rem;cursor:pointer;text-decoration:none;box-shadow:var(--sombra-3),0 0 0 1px var(--line);transition:transform .15s,box-shadow .2s,background .2s;line-height:1.2}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(0,0,0,.08),0 0 0 1px var(--line-2)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--primario{background:linear-gradient(131deg,#2a4f73 0%,var(--navy) 59%);color:#fff;box-shadow:var(--sombra-2)}
.btn--primario:hover{background:linear-gradient(131deg,#2f5880 0%,#163756 59%);box-shadow:0 6px 16px rgba(16,42,67,.25)}
:root[data-theme="dark"] .btn--primario{background:var(--navy);color:var(--navy-ink)}
.btn--teal{background:var(--teal);color:var(--teal-ink);box-shadow:var(--sombra-2)}
.btn--teal:hover{background:var(--teal-2)}
.btn--ghost{background:transparent;box-shadow:none;color:var(--ink-2)}
.btn--ghost:hover{background:var(--bg-3);box-shadow:none;transform:none;color:var(--ink)}
.btn--grande{padding:15px 24px;font-size:1.05rem;border-radius:14px}
.btn .seta-ico{width:18px;height:18px;flex:none}
.mini{padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);font-size:.85rem;font-weight:600;cursor:pointer;color:var(--ink-2);line-height:1.2}
.mini:hover{border-color:var(--teal);color:var(--ink)}
.mini:disabled{opacity:.4;cursor:not-allowed}
.mini--perigo:hover{border-color:var(--vermelho);color:var(--vermelho)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

/* ---------- cartões e perguntas frequentes (tutorial e sobre) ---------- */
.grade-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.card{background:var(--bg-2);border-radius:var(--r);padding:24px;box-shadow:0 0 0 1px var(--line)}
.card--suave{background:var(--bg-3);box-shadow:none}
.card--aviso{background:var(--gold-bg);box-shadow:0 0 0 1px var(--gold)}
.card--aviso p{color:var(--ink-2);font-size:.95rem}
.card h3{margin-bottom:6px}
.card p{color:var(--ink-2);font-size:.95rem}
.faq{display:flex;flex-direction:column;gap:10px;width:100%}
.faq details{background:var(--bg-2);border-radius:12px;box-shadow:0 0 0 1px var(--line);padding:0 20px}
.faq summary{list-style:none;cursor:pointer;font-weight:600;font-size:1.05rem;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--muted);font-weight:400;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;color:var(--ink-2);font-size:.98rem}

/* ---------- calculadora: uma página, seções empilhadas ---------- */
/* Um painel só, com filetes entre as seções, em vez de uma pilha de cartões:
   a tela precisa parecer uma calculadora, não um formulário jurídico. */
.calc{max-width:780px;margin:0 auto;background:var(--bg-2);border-radius:var(--r);box-shadow:0 0 0 1px var(--line),var(--sombra);padding:30px 34px}
.secao{padding:32px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:18px}
.secao:first-child{border-top:0;padding-top:4px}
.secao > h2{font-size:1.15rem;margin:0;max-width:44ch}
.calc h1{font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.3;max-width:32ch;letter-spacing:-.02em}
.exemplo{color:var(--muted);font-size:.84rem;line-height:1.5}
.erro-campo{color:var(--vermelho);font-size:.85rem;font-weight:600}
.campo--erro .tempo{border-color:var(--vermelho)}
.vetoriais{display:flex;flex-direction:column;gap:8px}
.contagem{color:var(--muted);font-size:.86rem}
/* a ressalva do comportamento da vítima avisa, mas não desfaz a escolha do usuário */
.ressalva{background:var(--ambar-bg);box-shadow:0 0 0 1px var(--gold);border-radius:10px;padding:10px 12px;color:var(--ink);font-size:.85rem;line-height:1.5}
.peso{margin-top:2px}

/* critério: três opções, e as frações antigas só dentro de "Outro critério" */
.opcoes{display:flex;flex-direction:column;gap:10px}
.opcao{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:12px;box-shadow:0 0 0 1px var(--line);cursor:pointer;font-size:1rem;line-height:1.4}
.opcao:hover{box-shadow:0 0 0 1px var(--line-2)}
.opcao.is-on{box-shadow:0 0 0 1.5px var(--teal);background:var(--teal-bg)}
.opcao input{position:absolute;opacity:0;width:1px;height:1px}
.opcao__marca{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg-2);position:relative}
.opcao input:checked ~ .opcao__marca{border-color:var(--teal)}
.opcao input:checked ~ .opcao__marca::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--teal)}
.opcao input:focus-visible ~ .opcao__marca{outline:3px solid var(--gold);outline-offset:2px}
.outro{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:12px;background:var(--bg-3)}

/* resultado de cada fase */
.res{border-radius:12px;box-shadow:0 0 0 1px var(--line);border-left:6px solid var(--gold);background:var(--bg-2);padding:18px 22px;display:flex;flex-direction:column;gap:3px}
.res--1{border-left-color:var(--teal)}
.res--2{border-left-color:var(--navy)}
.res--3{border-left-color:var(--gold);background:var(--gold-bg)}
.res__rot{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.res strong{font-size:clamp(1.6rem,3.4vw,2.1rem);letter-spacing:-.03em;line-height:1.15;overflow-wrap:anywhere}
.res__sub{color:var(--muted);font-size:.86rem;line-height:1.5}
.memoria summary{font-size:.86rem}
.espera{color:var(--muted);font-size:.92rem}
.ajustes summary{font-size:.88rem;font-weight:600}
.ajustes[open]{display:flex;flex-direction:column;gap:12px}
.ajustes[open] > summary{margin-bottom:2px}
.aviso-rascunho{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--teal-bg);box-shadow:0 0 0 1px var(--teal);border-radius:12px;padding:10px 14px;font-size:.9rem;color:var(--ink);margin-bottom:6px}
.pe{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line)}
.autosave{color:var(--muted);font-size:.82rem}
.nota-fonte{color:var(--muted);font-size:.82rem;line-height:1.5;text-align:center;max-width:680px;margin:0;text-wrap:balance}
.nota-fonte a{color:var(--teal)}
.sobre{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);font-weight:700}

/* ---------- campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label,.rotulo{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.campo label em{font-weight:400;color:var(--muted);font-style:normal}
.ajuda{color:var(--muted);font-size:.86rem;line-height:1.5}
input[type="text"],input[type="number"],input[type="date"],select,textarea{width:100%;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:11px 13px;color:var(--ink);font:inherit;font-size:1rem;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--teal);outline-offset:0;border-color:var(--teal)}
textarea{resize:vertical;line-height:1.5}
select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.tempo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.tempo--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tempo > label{display:flex;flex-direction:column;background:var(--bg-2);min-width:0}
.tempo > label span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 12px 0;font-weight:700}
.tempo > label input{border:0;border-radius:0;padding:2px 12px 9px;font-weight:700;font-size:1.1rem}
.tempo > label input:focus{outline:none;background:var(--teal-bg)}
.tempo:focus-within{border-color:var(--teal)}
.linha-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.linha-fr{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}

.fracoes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fr{padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-2);font-size:.95rem;font-weight:700;cursor:pointer;color:var(--ink-2);min-width:56px}
.fr:hover{border-color:var(--teal);color:var(--ink)}
.fr.is-on{background:var(--navy);border-color:var(--navy);color:var(--navy-ink)}
.fr-custom{display:inline-flex;align-items:center;gap:4px;border:1px dashed var(--line-2);border-radius:999px;padding:4px 6px 4px 12px}
.fr-custom.is-on{border-style:solid;border-color:var(--navy)}
.fr-custom > span:first-child{font-size:.85rem;color:var(--muted);font-weight:600;margin-right:4px}
.fr-custom input{width:56px;padding:6px 8px;border-radius:8px;font-size:.9rem;text-align:center}
.fr-custom .barra{color:var(--muted)}

.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;overflow:hidden;background:var(--bg-2)}
.seg button{border:0;background:none;padding:8px 15px;font-size:.92rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.seg button + button{border-left:1px solid var(--line)}
.seg button.is-on{background:var(--navy);color:var(--navy-ink)}
.pergunta{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap}
.pergunta p{font-weight:700;font-size:1.05rem}

.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;box-shadow:0 0 0 1px var(--line);border-radius:12px;padding:12px 14px;background:var(--bg-2)}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check__box{flex:none;width:22px;height:22px;border:1.5px solid var(--line-2);border-radius:6px;margin-top:1px;position:relative;background:var(--bg-2)}
.check input:checked ~ .check__box{background:var(--teal);border-color:var(--teal)}
.check input:checked ~ .check__box::after{content:"";position:absolute;left:7px;top:2px;width:5px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check input:focus-visible ~ .check__box{outline:3px solid var(--gold);outline-offset:2px}
.check:has(input:checked){box-shadow:0 0 0 1.5px var(--teal)}
.check__txt{display:flex;flex-direction:column;gap:2px}
.check__txt b{font-size:.95rem}
.check__txt small{color:var(--muted);font-size:.83rem;line-height:1.45}

/* circunstâncias judiciais e itens */
/* O nome e os três botões dividem a primeira linha; a dica vai embaixo, em toda a largura.
   Antes o bloco da esquerda tinha 520px fixos, não cabia ao lado dos botões e cada cartão
   gastava três linhas: eram 148px por circunstância, 1.403px na seção inteira. */
.vetorial{box-shadow:0 0 0 1px var(--line);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.vetorial.is-desf{box-shadow:0 0 0 1.5px var(--vermelho);background:var(--vermelho-bg)}
.vetorial.is-fav{box-shadow:0 0 0 1.5px var(--verde);background:var(--verde-bg)}
.vetorial__cab{display:flex;justify-content:space-between;gap:10px 14px;align-items:center;flex-wrap:wrap}
.vetorial__cab b{font-size:.98rem}
.vetorial__dica{display:block;color:var(--muted);font-size:.8rem;line-height:1.4}
.item{box-shadow:0 0 0 1px var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg-2)}
.item__cab{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.item__cab .mini{margin-left:auto}
.item__ordem{margin-left:auto;display:flex;gap:6px}
.item__ordem .mini{margin-left:0}
.tag{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid}
.tag--agravante,.tag--aumento{color:var(--vermelho);border-color:var(--vermelho);background:var(--vermelho-bg)}
.tag--atenuante,.tag--diminuicao{color:var(--verde);border-color:var(--verde);background:var(--verde-bg)}
.ordem{width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--navy-ink);display:grid;place-items:center;font-size:.8rem;font-weight:700}
.item--arrasta{cursor:grab}
.item--arrasta.is-drag{opacity:.5}
.item--arrasta.is-sobre{box-shadow:0 0 0 2px var(--gold),0 0 0 5px var(--gold-bg)}
.lista-arrasta{display:flex;flex-direction:column;gap:10px}

/* avisos e memória de cálculo */
.avisos{margin:0;padding:12px 14px 12px 32px;border-radius:12px;background:var(--ambar-bg);box-shadow:0 0 0 1px var(--gold);color:var(--ink);font-size:.9rem;display:flex;flex-direction:column;gap:6px}
.avisos.erros{background:var(--vermelho-bg);box-shadow:0 0 0 1px var(--vermelho);color:var(--vermelho)}
details summary{cursor:pointer;font-weight:600;font-size:.95rem;color:var(--teal)}
.tabela-rolagem{overflow-x:auto;margin-top:8px}
table.passos{width:100%;border-collapse:collapse;font-size:.86rem}
table.passos th,table.passos td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.passos th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.passos small{color:var(--muted);font-size:.78rem}
table.passos small.limite{color:var(--ambar)}
table.passos tr.is-limite td{background:var(--ambar-bg)}

/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(16px);background:var(--navy);color:var(--navy-ink);padding:12px 20px;border-radius:999px;font-size:.95rem;font-weight:600;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:200;max-width:90vw;text-align:center;box-shadow:var(--sombra)}
:root[data-theme="dark"] #toast{background:var(--teal);color:var(--teal-ink)}
#toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* páginas de texto */
.texto{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:18px;padding-top:16px}
.texto h1{margin-bottom:4px;font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.03em}
.texto h2{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:1.35rem}
.texto p,.texto li{color:var(--ink-2);font-size:1rem}
.texto ul,.texto ol{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px}
.texto table{width:100%;border-collapse:collapse;font-size:.92rem}
.texto th,.texto td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.texto .card--aviso{margin-top:10px}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .rodape__inner{grid-template-columns:1fr}
}
@media (max-width:700px){
  body{font-size:16px}
  .grade-2{grid-template-columns:1fr}
  .aviso-rascunho{flex-direction:column;align-items:flex-start}
  .card{padding:18px}
  .calc{padding:20px 18px}
  .secao{padding:24px 0}
  .pergunta{align-items:flex-start}
  .res strong{font-size:1.7rem}
  .topo{padding:20px 54px 6px}
  .tema-btn{top:16px;right:10px}
  .rodape .marca{gap:10px}
  .rodape .marca svg{width:48px;height:48px}
  .rodape .marca__nome{font-size:.72rem}
  main{padding:18px 14px 60px}
  .pe{flex-direction:column;align-items:stretch;gap:12px}
  .rodape__inner{grid-template-columns:1fr}
}
/* No celular os três botões não cabem ao lado do nome: ocupam a linha inteira, divididos
   em partes iguais, o que também dá um alvo de toque maior. */
@media (max-width:560px){
  .vetorial__cab{align-items:stretch}
  .vetorial .seg{width:100%}
  .vetorial .seg button{flex:1;padding:9px 4px;font-size:.88rem}
  .vetorial__dica{font-size:.78rem}
}
@media (max-width:430px){
  .topo{padding:16px 46px 4px}
  .marca-vertical{width:158px}
}

/* ---------- impressão ---------- */
@media print{
  @page{margin:18mm 16mm}
  body{background:#fff;color:#000;font-size:11pt}
  .topo,.rodape,#toast,.pe,.nota-fonte,.aviso-rascunho,details:not([open]) summary + *{display:none!important}
  main{padding:0;max-width:none}
  .calc{box-shadow:none;border:0;padding:0;max-width:none}
  .secao{break-inside:avoid-page;page-break-inside:avoid}
  .res{border:1px solid #999;border-left:4px solid #c1a05b;box-shadow:none;background:#fff}
  table{page-break-inside:auto}
  tr{page-break-inside:avoid}
  a{color:#000;text-decoration:none}
}