/* =====================================================================
   Página de simulador (aprovada pelo dono a 03-11-2026). Camada partilhada
   pelas páginas de simuladores/simulador_*.html, carregada DEPOIS de style.css
   e simulator-template.css (o <link> é posto pelo prerender-components.js).
   Usa as classes que as páginas já têm (.simulator-*, .form-grid,
   .form-group, .results-grid, .result-card, .highlight-result,
   .comparison-table, .alert, .info-block) e estas, postas pelo gerador:
   .sim-titulo/.sim-chapa (gravura), [data-recibo] no form, .recibo-col,
   .recibo-acoes, .recibo-colofao, .campo-un, .continuar, .faq (estas pelo
   _redesign/aplicar-pagina.js) e .pub-* (pelo insert-ads.js).
   Sem elas a página continua correta (só não ganha o painel lateral).
   Contrato do tempo real: assets/js/pagina-simulador.js.
   ===================================================================== */

:root {
    --sp-indigo: #2F2BB0;                     /* tinta do recibo, igual ao rodapé */
    --sp-creme: #F6F0E2;
    --sp-creme-2: rgba(246, 240, 226, .82);   /* 6:1 sobre o índigo */
    --sp-creme-3: rgba(246, 240, 226, .74);   /* 5,4:1 */
    --sp-filete-r: rgba(246, 240, 226, .2);
    --sp-papel: #FAF9F6;
    --sp-linha: #E7E5DF;
    --sp-linha-2: #EFEDE8;
    --sp-campo: #D6D3CB;
    --sp-tinta: #1D1D1F;
    --sp-texto: #3F3F44;
    --sp-cinza: #6E6E73;
    --sp-acao: #5753E2;
    --sp-acao-2: #4642CF;
    --sp-ease: cubic-bezier(.23, 1, .32, 1);
    --sp-principal: 1012px;                   /* coluna principal, igual em todas as larguras grandes */
    --sp-grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.vh {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- Página e grelha ------------------------------------------ */
.simulator-page {
    background: var(--sp-papel);
    padding: 0 0 96px;
    min-height: 0;
}
.simulator-wrapper {
    max-width: calc(var(--sp-principal) + 64px);
    padding: 0 32px;
}
@media (max-width: 767px) {
    .simulator-wrapper { padding: 0 16px; }
}
/* coluna lateral de publicidade: 160 px até 1439, 300 px daí para cima. A grelha só existe
   quando o insert-ads.js pôs a coluna (enquanto o slot não estiver definido não há coluna nem buraco).
   152 px entre a coluna e a página: nenhum botão, campo ou ligação a menos de 150 px do anúncio.
   A coluna principal encolhe até 940 px entre 1300 e 1631 px (fica com os 1012 px daí para cima). */
@media (min-width: 1300px) {
    .simulator-wrapper:has(> .pub-coluna) {
        --sp-lateral: 160px;
        max-width: calc(var(--sp-principal) + 152px + var(--sp-lateral) + 48px);
        padding: 0 24px;
        display: grid;
        grid-template-columns: minmax(0, var(--sp-principal)) var(--sp-lateral);
        column-gap: 152px;
        justify-content: center;
        align-items: start;
    }
    .simulator-wrapper > * { grid-column: 1; min-width: 0; }
    .simulator-wrapper > .pub-coluna { grid-column: 2; grid-row: 1 / span 8; align-self: stretch; }
}
@media (min-width: 1440px) {
    .simulator-wrapper:has(> .pub-coluna) { --sp-lateral: 300px; }
}

/* ---------- Publicidade: sempre neutra, nunca índigo nem creme -------- */
.pub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 auto;
}
.pub-etiqueta {
    display: block;
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    color: #8A8A8F;
}
.pub-unidade {
    position: relative;
    width: var(--w);
    height: var(--h);
    max-width: none;
    border-radius: 4px;
    background: #EDEDEF;
}
/* o <ins> do AdSense tem o tamanho exato da unidade (blocos responsivos com tamanho por CSS) */
.pub-unidade ins.adsbygoogle { display: block; width: var(--w); height: var(--h); }
/* sem anúncio: a etiqueta e o fundo saem, o lugar fica (nada salta por cima do que se lê) */
.pub:has(ins.adsbygoogle[data-ad-status="unfilled"]) .pub-etiqueta { visibility: hidden; }
.pub:has(ins.adsbygoogle[data-ad-status="unfilled"]) .pub-unidade { background: none; }
/* unidade escondida neste ecrã (o components/ads.js não a pede): não ocupa lugar */
.pub[data-pub-off] { display: none !important; }

/* topo, entre o cabeçalho do site e o H1, em todas as larguras (escrito no HTML: a altura fica
   reservada desde o 1.º byte). 320x50 no telemóvel: medido nas 143 páginas com formulário, o
   320x100 tirava o 1.º campo do 1.º ecrã a mais 46 páginas a 360x780 e a mais 21 a 390x844; o
   320x50 a mais 17 e 12 (sem topo, 34 e 20 já o tinham fora).
   728x90 a partir de 768 px. Entre 768 e 791 px o 728 é mais largo do que a coluna (704 px):
   a caixa sai por igual para as margens. */
/* overflow: a janela de computador estreitada depois de o 728x90 chegar: o anúncio já pintado não
   dá deslize horizontal à página (num telemóvel o pedido já sai com 320x50) */
.pub-topo { margin: 0; padding-top: 16px; overflow: hidden; }
.pub-topo .pub-unidade { --w: 320px; --h: 50px; }
@media (min-width: 768px) {
    .pub-topo { padding-top: 24px; }
    .pub-topo .pub-unidade { --w: 728px; --h: 90px; }
}
/* a 320 px o 320x50 ocupa a largura toda do ecrã (a coluna tem 288 px) */
@media (max-width: 351px) {
    .pub-topo { margin-inline: -16px; }
}
@media (min-width: 768px) and (max-width: 791px) {
    .pub-topo { margin-inline: calc((100% - 728px) / 2); }
}
/* resultado 336x280 (300x250 abaixo de 352 px) */
.pub-resultado .pub-unidade { --w: 336px; --h: 280px; }
@media (max-width: 351px) {
    .pub-resultado .pub-unidade { --w: 300px; --h: 250px; }
    .pub-resultado { margin-inline: -16px; }
}
/* texto e texto-2 (.pub-fluido): os blocos in-article (formato fluido, a largura da coluna de texto; o
   AdSense não aceita tamanho fixo neste tipo de bloco). A altura fica reservada (280 px, a de um
   in-article típico) para o anúncio não empurrar o texto ao chegar e o lugar nunca encolhe abaixo
   disso. Sem anúncio, o components/ads.js só o recolhe (data-pub-vazio) quando está todo abaixo
   do ecrã; acima ou dentro do ecrã fica o lugar vazio (sem etiqueta nem fundo): nada salta. */
.pub-fluido { width: 100%; }
.pub-fluido .pub-unidade { --w: 100%; --h: auto; min-height: 280px; background: none; overflow: hidden; }
.pub-fluido .pub-unidade ins.adsbygoogle { height: auto; }
.pub-fluido[data-pub-vazio] { display: none; }
/* lateral fixa */
.pub-coluna { display: none; }
@media (min-width: 1300px) {
    .pub-coluna { display: block; padding-top: 24px; }
    .pub-coluna .pub { position: sticky; top: 96px; }
    .pub-coluna .pub-unidade { --w: var(--sp-lateral); --h: 600px; }
    /* com a coluna, o «voltar ao topo» passa para a esquerda: à direita ficava por cima dela
       em janelas baixas (plano aprovado a 03-11-2026) */
    body:has(.pub-coluna) .back-to-top { right: auto; left: 2rem; }
}
/* âncora dos anúncios automáticos do Google (fundo do ecrã): enquanto está à vista, o
   components/ads.js põe data-pub-ancora e --pub-ancora (a altura que tapa) no <html>. O fim da
   página ganha esse espaço (o rodapé acaba acima dela) e o que é fixo do site sobe para cima
   dela: nada do site a tapa nem fica tapado.
   Sobem com a propriedade translate (não com bottom): mexer em bottom de um elemento fixo conta
   como deslocamento de layout (CLS); translate não, e soma-se ao transform que já tenham. */
html[data-pub-ancora] body { padding-bottom: var(--pub-ancora, 0px) !important; }
html[data-pub-ancora] .back-to-top,
html[data-pub-ancora] .scc,
html[data-pub-ancora] .toast-container { translate: 0 calc(-1 * var(--pub-ancora, 0px)); }

/* ---------- Cabeçalho ------------------------------------------------ */
.simulator-header {
    text-align: left;
    margin: 0 0 24px;
    padding: 40px 0 0;
}
.sim-titulo {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 16px;
}
.sim-chapa {
    flex: none;
    display: block;
    width: 100px;
    height: 80px;
    border-radius: 14px;
    background: var(--sp-creme);
    box-shadow: inset 0 0 0 1px rgba(47, 43, 176, .1);
    overflow: hidden;
}
.sim-gravura { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.simulator-header h1 {
    margin: 0;
    text-align: left;
    font-size: 40px;
    line-height: 1.1;
    letter-spacing: -.025em;
    font-weight: 600;
    color: var(--sp-tinta);
    text-wrap: balance;
}
.simulator-header .subtitle {
    text-align: left;
    max-width: 820px;   /* em px: em ch mudava de largura quando a Geist chegava */
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.6;
    font-weight: 500;
    color: var(--sp-cinza);
    text-wrap: pretty;
}
/* metadados numa linha; a linha existe desde o 1.º paint (o texto chega depois) */
.simulator-header .last-update,
.simulator-header .visit-count {
    display: inline-block;
    text-align: left;
    vertical-align: top;
    min-height: 20px;
    margin: 0;
    font-style: normal;
    font-size: 13px;
    line-height: 20px;
    color: var(--sp-cinza);
}
.simulator-header .visit-count:not(:empty)::before { content: "\00a0·\00a0"; }
/* As ações do cabeçalho (Gosto, Partilhar simulador, Avisem-me) entram depois do load, cada uma
   no seu lugar fixo dentro de uma faixa reservada no padding do cabeçalho: nunca empurram nada,
   chegue primeiro quem chegar (e quem já subscreveu fica sem «Avisem-me», com o lugar vazio). */
.simulator-header { display: flow-root; position: relative; padding-bottom: 68px; }
/* a faixa dos botões ganha a uma regra antiga da página que ponha o padding de baixo a 0 */
.simulator-header:has(> .gp, > .avu-topo) { padding-bottom: 68px !important; }
.simulator-header .last-update { float: left; clear: left; }
.simulator-header .visit-count { float: left; }
.simulator-header > .subtitle { clear: left; }
.simulator-header::after { display: none !important; }
.simulator-header > .gp,
.simulator-header > .avu-topo {
    position: absolute !important;
    bottom: 0;
    display: flex !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
}
.simulator-header > .gp { left: 0; gap: 8px; }
.simulator-header > .avu-topo { right: 0; }
.simulator-header .gp .gp-btn,
.simulator-header .avu-topo .avu-gatilho {
    height: 44px !important;
    min-height: 44px !important;
}
.simulator-header .gp .gp-btn::after { display: none; }
/* o balão «URL copiado» fica por cima do botão (a barra tem agora a altura do botão, 44 px) */
.simulator-header > .gp .gp-aviso { bottom: calc(100% + 4px); }
/* abaixo de 700 px não cabem lado a lado: duas faixas, uma por baixo da outra */
@media (max-width: 699px) {
    .simulator-header,
    .simulator-header:has(> .gp, > .avu-topo) { padding-bottom: 120px !important; }
    .simulator-header > .gp { bottom: 56px; }
    .simulator-header > .avu-topo { left: 0; right: auto; max-width: 100%; }
}

/* ---------- Cartão da calculadora ------------------------------------ */
.simulator-card-container {
    background: #fff;
    border: 1px solid var(--sp-linha);
    border-radius: 20px;
    padding: 40px;
    margin: 0 0 64px;
    box-shadow: 0 1px 2px rgba(29, 27, 80, .04), 0 12px 32px -22px rgba(29, 27, 80, .18);
}
/* telemóvel: sem cartão. O formulário assenta no papel e ganha 40 px de largura */
@media (max-width: 767px) {
    .simulator-card-container {
        background: none; border: 0; border-radius: 0; box-shadow: none;
        padding: 0; margin-bottom: 56px;
    }
}

.simulator-form .form-grid {
    gap: 24px 20px;
    margin-bottom: 24px;
    align-items: stretch;
}
.simulator-form .form-grid + .form-grid,
.simulator-form .form-grid + .form-group { margin-top: 0; }
/* rótulo em baixo da sua caixa: campos lado a lado ficam à mesma altura */
.simulator-form .form-group { display: flex; flex-direction: column; margin-bottom: 0; }
/* um grupo solto no form (fora de uma .form-grid) guarda a sua distância ao seguinte */
.simulator-form > .form-group { margin-bottom: 24px; }
/* só os rótulos de texto: uma etiqueta-cartão com a caixa lá dentro (.xx-check) mantém o seu desenho */
.simulator-form .form-group > label:not([class]),
.simulator-form .form-group > label[class]:not(:has(input)) {
    margin: auto 0 8px;
    display: block;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    color: var(--sp-tinta);
    text-wrap: pretty;
}
.simulator-form .form-group > label .tooltip-trigger { vertical-align: -1px; margin-left: 4px; }
.simulator-form .tooltip-trigger i { color: #A1A1A6; }

.simulator-form input[type="number"],
.simulator-form input[type="text"],
.simulator-form input[type="date"],
.simulator-form select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    font-size: 16px;
    line-height: 46px;
    border: 1px solid var(--sp-campo);
    border-radius: 10px;
    background-color: #fff;
    color: var(--sp-tinta);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* o Chrome dá 50 px ao campo de data (bordas por fora da linha): fica com a altura dos outros */
.simulator-form input[type="date"] { height: 48px; }
.simulator-form select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 40px;
    text-overflow: ellipsis;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%236E6E73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 20px 20px no-repeat;
}
@media (hover: hover) and (pointer: fine) {
    .simulator-form input:hover:not(:focus):not(:disabled),
    .simulator-form select:hover:not(:focus):not(:disabled) { border-color: #BAB7AE; }
}
.simulator-form input[type="number"]:focus,
.simulator-form input[type="text"]:focus,
.simulator-form input[type="date"]:focus,
.simulator-form select:focus {
    outline: none;
    border-color: var(--sp-acao);
    box-shadow: 0 0 0 3px rgba(87, 83, 226, .2);
}
/* unidade em caixa colada ao campo */
.campo-un { display: flex; width: 100%; border-radius: 10px; }
.simulator-form .campo-un input[type] {
    flex: 1 1 auto;
    min-width: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
}
.simulator-form .campo-un input[type]:focus { box-shadow: none; }
.campo-un-u {
    flex: none;
    min-width: 48px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--sp-cinza);
    background: #F5F4F0;
    border: 1px solid var(--sp-campo);
    border-radius: 0 10px 10px 0;
    transition: border-color .15s ease;
}
.campo-un:focus-within { box-shadow: 0 0 0 3px rgba(87, 83, 226, .2); }
.campo-un:focus-within .campo-un-u { border-color: var(--sp-acao); }
/* campo que o browser recusaria (min, max, obrigatório), marcado pelo tempo real ao lado da nota do recibo */
.simulator-form [data-invalido],
.simulator-form [data-invalido]:focus { border-color: #B42318 !important; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.simulator-form .error-message { margin-top: 6px; font-size: 13px; line-height: 18px; color: #B42318; }
/* o erro por baixo do campo não mexe nos vizinhos: uma linha de erro ocupa o
   intervalo de 24 px até à fila seguinte (4 + 18, ficam 2 px de folga) em vez de esticar a fila (os rótulos assentam em baixo,
   por isso uma fila mais alta descia os campos ao lado). Só nos grupos da grelha (gap de 24 px)
   e quando o erro é o último do grupo
   (nada a seguir que ele tapasse); um erro de 2 linhas estica a fila só pela 2.ª linha. */
.simulator-form .form-grid > .form-group > .error-message:last-child { margin-top: 4px; margin-bottom: -22px; }
.simulator-form .error-message::before { line-height: 18px; }
.simulator-form .info-text { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--sp-cinza); }

/* caixa de seleção: 22 px à vista, 44 px de alvo */
.checkbox-wrapper { display: flex; align-items: center; gap: 4px; min-height: 44px; }
/* a mesma caixa nas etiquetas antigas com a caixa lá dentro (<label class="checkbox-label"><input …> texto</label>) */
.simulator-form label.checkbox-label {
    display: flex !important; align-items: center; gap: 4px !important; min-height: 44px; margin: 0;
    font-size: 15px; line-height: 20px; font-weight: 500; color: var(--sp-tinta); cursor: pointer;
}
.simulator-form label.checkbox-label input[type="checkbox"],
.simulator-form button > input[type="checkbox"],
.checkbox-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin: 0 0 0 -11px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect x='.5' y='.5' width='21' height='21' rx='6' fill='%23fff' stroke='%23BAB7AE'/%3E%3C/svg%3E") center / 22px 22px no-repeat;
}
.simulator-form label.checkbox-label input[type="checkbox"]:checked,
.simulator-form button > input[type="checkbox"]:checked,
.checkbox-wrapper input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Crect width='22' height='22' rx='6' fill='%235753E2'/%3E%3Cpath d='M6.5 11.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.simulator-form label.checkbox-label input[type="checkbox"]:focus-visible,
.checkbox-wrapper input[type="checkbox"]:focus-visible { outline: 2px solid var(--sp-acao); outline-offset: -6px; }
.checkbox-wrapper label { margin: 0 !important; padding: 12px 0; font-size: 15px; line-height: 20px; font-weight: 500; cursor: pointer; }

/* =====================================================================
   Caixas de opção: radio (ou checkbox) com aspeto de cartão (.sp-opcao)
   ou de controlo segmentado (.sp-seg). Regras e marcação mínima em
   docs/escrita-e-design.md, «Caixas de opção».
   Contrato (medido na tinta, do topo das maiúsculas à linha de base):
   - texto centrado na vertical: diferença entre o espaço de cima e o de
     baixo ≤ 1 px, em todos os estados;
   - a opção escolhida só muda cores e sombras (contorno sempre presente
     de 1 px + anel interior por box-shadow inset; peso da letra igual),
     por isso nem o texto nem a altura mexem;
   - margin 0 na label (o «.simulator-form label» dá 8 px por baixo, que
     descentrava o texto nos segmentos);
   - opções da mesma linha com a mesma altura (grelha ou flex em stretch,
     conteúdo centrado com align-items: center).
   As colunas ficam no contentor de cada página (ou .sp-opcoes).
   ===================================================================== */
.sp-opcoes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sp-opcoes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .sp-opcoes, .sp-opcoes-3 { grid-template-columns: minmax(0, 1fr); } }

label.sp-opcao,
.simulator-form label.sp-opcao {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    box-sizing: border-box;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    /* 12 px e 16 px com o contorno de 1 px; 0,25 px a mais em cima e a menos em baixo é a compensação
       ótica da Geist (a linha de base fica mais longe do fundo da letra do que o topo das maiúsculas do
       topo dela): assim o espaço da tinta fica igual em cima e em baixo */
    padding: 11.25px 15px 10.75px;
    border: 1px solid var(--sp-campo);
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px transparent;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--sp-tinta);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
@media (hover: hover) and (pointer: fine) {
    label.sp-opcao:hover:not(:has(input:checked)) { border-color: #BAB7AE; }
}
label.sp-opcao:has(input:checked),
.simulator-form label.sp-opcao:has(input:checked) {
    border-color: var(--sp-acao);
    background: #F7F7FE;
    box-shadow: inset 0 0 0 1px var(--sp-acao);
}
label.sp-opcao:has(input:focus-visible),
.simulator-form label.sp-opcao:has(input:focus-visible) { border-color: var(--sp-acao); box-shadow: inset 0 0 0 1px transparent, 0 0 0 3px rgba(87, 83, 226, .2); }
label.sp-opcao:has(input:checked:focus-visible),
.simulator-form label.sp-opcao:has(input:checked:focus-visible) { box-shadow: inset 0 0 0 1px var(--sp-acao), 0 0 0 3px rgba(87, 83, 226, .2); }

/* o indicador: 20 px, desenhado como a caixa de seleção (o mesmo cinzento e o mesmo índigo) */
label.sp-opcao > input[type="radio"],
label.sp-opcao > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    outline: none;
    box-shadow: none;
    cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23fff' stroke='%23BAB7AE'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
label.sp-opcao > input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%235753E2'/%3E%3Ccircle cx='10' cy='10' r='3.5' fill='%23fff'/%3E%3C/svg%3E");
}
label.sp-opcao > input[type="checkbox"] {
    border-radius: 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='.5' y='.5' width='19' height='19' rx='5.5' fill='%23fff' stroke='%23BAB7AE'/%3E%3C/svg%3E");
}
label.sp-opcao > input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect width='20' height='20' rx='6' fill='%235753E2'/%3E%3Cpath d='M5.8 10.2l2.8 2.8 5.6-6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* texto: um só bloco centrado; título e linha de apoio com 2 px entre si */
.sp-opcao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sp-opcao-titulo { display: block; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--sp-tinta); }
.sp-opcao-sub { display: block; margin: 0; font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: normal; color: var(--sp-cinza); }

/* controlo segmentado: trilho cinzento, a opção escolhida em branco */
.sp-seg {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 3px;
    border: 1px solid #ECECF2;
    border-radius: 12px;
    background: #F2F2F5;
}
.sp-seg > label,
.simulator-form .sp-seg > label {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 6.25px 12px 5.75px;            /* a mesma compensação ótica de 0,25 px */
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: normal;
    color: #54545A;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.sp-seg > label:has(input:checked),
.simulator-form .sp-seg > label:has(input:checked) {
    background: #fff;
    color: var(--sp-tinta);
    box-shadow: 0 1px 2px rgba(22, 22, 26, .08), 0 0 0 1px rgba(22, 22, 26, .04);
}
.sp-seg > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sp-seg > label:has(input:focus-visible) { outline: 2px solid var(--sp-acao); outline-offset: 1px; }
.sp-seg .sp-opcao-titulo { font-weight: 500; letter-spacing: normal; color: inherit; }
/* ao receber o foco (teclado) a opção não fica escondida por baixo do header fixo (62 px) */
label.sp-opcao > input, .sp-seg > label > input { scroll-margin: 88px 0 24px; }
@media (prefers-reduced-motion: reduce) {
    label.sp-opcao, .sp-seg > label { transition: none; }
}

/* botões */
.simulator-btn {
    min-height: 52px;
    border-radius: 12px;
    background-color: var(--sp-acao);
    font-size: 16px;
    font-weight: 500;
    transition: background-color .15s ease, transform .12s var(--sp-ease);
}
.simulator-btn:hover:not(:disabled) { background-color: var(--sp-acao-2); transform: none; box-shadow: none; }
.simulator-btn:active:not(:disabled) { transform: scale(.98); }
.simulator-btn-secondary,
.simulator-btn-secondary:hover:not(:disabled) { background-color: #fff; color: var(--sp-acao); border: 1px solid #CFCDF6; }
.simulator-btn-secondary:hover:not(:disabled) { background-color: #F6F5FE; }
.simulator-btn-secondary.share-trigger { min-height: 44px; }

/* ---------- Avisos e notas: contorno fino, sem barra lateral --------- */
.alert, .info-block, .simulator-disclaimer {
    margin: 16px 0 0;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.6;
    border: 1px solid var(--sp-linha);
    border-left-width: 1px;
    border-radius: 12px;
    background: #F7F6F2;
    color: #46464B;
    box-shadow: none;
    max-width: none;
}
.alert-warning { background: #FFF8EB; border-color: #F2DDB0; color: #6B4A0E; }
.simulator-form > .alert { margin: 0 0 20px; }
.simulator-disclaimer p { font-size: 14px; line-height: 1.6; color: inherit; }

/* ---------- Resultado ------------------------------------------------ */
.simulator-results { margin-top: 32px; padding-top: 0; border-top: 0; }
@media (max-width: 1023px) {
    /* o recibo vem logo a seguir ao botão; os avisos ficam por baixo */
    .simulator-form[data-recibo] .simulator-results { display: flex; flex-direction: column; align-items: stretch; }
    .simulator-form[data-recibo] .recibo-col { order: -1; }
    .simulator-form[data-recibo] .simulator-results > .simulator-btn-secondary { align-self: stretch; }
}

/* O recibo: só o .results-grid dentro de .recibo-col (um por página) */
.recibo-col .results-grid {
    display: block;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    container-type: inline-size;
    margin: 0;
    padding: 28px 28px 22px;
    background: var(--sp-indigo);
    color: var(--sp-creme);
    border-radius: 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: sp-entrar .24s var(--sp-ease);
}
@keyframes sp-entrar { from { opacity: 0; transform: translateY(8px); } }
.recibo-col .results-grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: var(--sp-grao);
    background-size: 220px 220px;
    opacity: .09;
    mix-blend-mode: overlay;
}
.recibo-col .results-grid > * { position: relative; z-index: 1; }

.recibo-col .result-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 20px;
    align-items: baseline;
    margin: 0;
    padding: 13px 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--sp-filete-r);
    border-radius: 0;
    box-shadow: none;
    transition: none;
    text-align: left;
}
.recibo-col .result-card:hover { border-color: var(--sp-filete-r); box-shadow: none; transform: none; }
.recibo-col .result-card-title {
    grid-column: 1;
    display: block;
    margin: 0;
    font-size: 15px;
    line-height: 21px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sp-creme);
}
.recibo-col .result-card-value {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 17px;
    line-height: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--sp-creme);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.recibo-col .result-card-info {
    grid-column: 1 / -1;
    margin-top: 3px;
    font-size: 13px;
    line-height: 19px;
    color: var(--sp-creme-3);
    text-wrap: pretty;
}
/* o número principal */
.recibo-col .highlight-result {
    display: block;
    grid-column: auto;
    padding: 0 0 18px;
    border-top: 0;
    background: none;
    text-align: left;
}
.recibo-col .highlight-result .result-card-title { font-size: 15px; color: var(--sp-creme-2); }
.recibo-col .highlight-result .result-card-value {
    margin: 8px 0 10px;
    font-size: clamp(40px, 17cqi, 64px);
    line-height: 1;
    letter-spacing: -.035em;
    text-align: left;
    white-space: nowrap;
    overflow-wrap: normal;
}
/* não coube nem com a letra mínima (o pagina-simulador.js mede): parte nos espaços */
.recibo-col .highlight-result .result-card-value[data-quebra] { white-space: normal; overflow-wrap: anywhere; }
.recibo-col .highlight-result .result-card-info { font-size: 14px; line-height: 20px; color: var(--sp-creme-2); }

/* ações do recibo, logo a seguir ao número: longe do anúncio (mais de 150 px) */
.recibo-acoes { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 20px; }
.recibo-acoes .simulator-btn,
.recibo-acoes .share-trigger {
    width: auto !important;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 16px;
    gap: 8px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 12px;
    color: var(--sp-creme);
    background: transparent;
    border: 1px solid rgba(246, 240, 226, .36);
    transition: background-color .15s ease, border-color .15s ease, transform .12s var(--sp-ease);
}
.recibo-acoes .simulator-btn svg { flex: none; width: 17px; height: 17px; }
/* com 3 ações (PDF, Partilhar, Copiar) os botões apertam para ficarem na mesma fila */
.recibo-acoes:has(> :nth-child(3)) { gap: 6px; }
.recibo-acoes:has(> :nth-child(3)) .simulator-btn,
.recibo-acoes:has(> :nth-child(3)) .share-trigger { padding: 0 11px; gap: 6px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
    .recibo-acoes .simulator-btn:hover:not(:disabled) { background: rgba(246, 240, 226, .1); border-color: rgba(246, 240, 226, .6); }
}
.recibo-acoes .simulator-btn:focus-visible { outline: 2px solid var(--sp-creme); outline-offset: 2px; }

/* colofão: de onde vêm os valores */
.recibo-colofao {
    margin: 6px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--sp-filete-r);
    font-size: 12.5px;
    line-height: 19px;
    color: var(--sp-creme-3);
    text-wrap: pretty;
}
.recibo-colofao a { color: var(--sp-creme); font-weight: 500; border-radius: 3px; white-space: normal; overflow-wrap: break-word; }
/* «n.º 74-A/2017» e «Decreto-Lei» não partem no hífen (o gerador põe o .nq; o &nbsp; liga «n.º» ao número) */
.recibo-colofao .nq { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .recibo-colofao a:hover { opacity: .8; } }
.recibo-colofao a:focus-visible { outline: 2px solid var(--sp-creme); outline-offset: 2px; }

/* dados por acabar a meio de uma alteração: o último resultado fica legível, com uma nota */
.recibo-col[data-estado="desatualizado"] .results-grid::before {
    content: "Resultado anterior. Complete ou corrija os dados assinalados para o atualizar.";
    position: relative;
    z-index: 1;
    display: block;
    margin: -6px 0 18px;
    padding: 10px 12px 10px 36px;
    border-radius: 10px;
    background: rgba(246, 240, 226, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='%23F6F0E2' stroke-width='1.5'/%3E%3Cpath d='M10 6v5' stroke='%23F6F0E2' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='13.8' r='1' fill='%23F6F0E2'/%3E%3C/svg%3E") 12px 11px / 16px 16px no-repeat;
    font-size: 13px;
    line-height: 19px;
    font-weight: 500;
    color: var(--sp-creme);
}

/* 112 px acima e 118 px abaixo: o anúncio fica a mais de 150 px da ligação da fonte no fim do
   recibo e do que vier a seguir (botões, «Ver o detalhe») */
.recibo-col .pub-resultado { margin: 112px auto 118px; }

/* tabela de detalhe: filetes, margem interior, sem zebra nem grelha */
.simulator-results .table-responsive {
    margin: 28px 0 0 !important;
    padding: 6px 20px;
    border: 1px solid var(--sp-linha);
    border-radius: 14px;
    background: #fff;
}
.simulator-results .comparison-table { font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: none; }
.simulator-results .comparison-table thead { background: none; }
.simulator-results .comparison-table th {
    padding: 12px 16px 10px 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-cinza);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--sp-linha);
    text-align: left;
}
.simulator-results .comparison-table td {
    padding: 12px 16px 12px 0;
    color: var(--sp-texto);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--sp-linha-2);
    vertical-align: top;
    text-align: left;
}
.simulator-results .comparison-table th:last-child,
.simulator-results .comparison-table td:last-child { padding-right: 0; text-align: right; white-space: nowrap; }
.simulator-results .comparison-table tbody tr,
.simulator-results .comparison-table tbody tr:hover { background: none !important; }
.simulator-results .comparison-table tbody tr:last-child td { border-bottom: 0; color: var(--sp-tinta); }
@media (max-width: 767px) {
    .simulator-results .table-responsive { padding: 4px 16px; }
    .simulator-results .comparison-table { font-size: 14px; }
    .simulator-results .comparison-table td:last-child { white-space: normal; }
}

/* ---------- O instrumento: recibo fixo ao lado (a partir de 1024 px) -- */
@media (min-width: 1024px) {
    .simulator-form[data-recibo] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(344px, 38%, 392px);
        grid-template-rows: repeat(40, auto) 1fr;
        column-gap: 44px;
        align-items: start;
    }
    .simulator-form[data-recibo] > *,
    .simulator-form[data-recibo] .simulator-results > * { grid-column: 1; min-width: 0; }
    .simulator-form[data-recibo] .simulator-results { display: contents; }
    .simulator-form[data-recibo] .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .simulator-form[data-recibo] .simulator-results > .alert:first-child,
    .simulator-form[data-recibo] .simulator-results > .recibo-col + * { margin-top: 28px; }
    .simulator-form[data-recibo] .recibo-col {
        grid-column: 2;
        grid-row: 1 / -1;
        align-self: stretch;
        position: relative;
    }
    /* o recibo acompanha a página e para por cima do anúncio, sem o tapar */
    .simulator-form[data-recibo] .recibo-col .results-grid { position: sticky; top: 96px; margin-bottom: 446px; }
    .simulator-form[data-recibo] .recibo-col:not(:has(.pub-resultado)) .results-grid { margin-bottom: 0; }
    .simulator-form[data-recibo] .recibo-col .pub-resultado { position: absolute; left: 0; right: 0; bottom: 16px; margin: 0; }
    /* antes do 1.º cálculo: um recibo em branco guarda o lugar */
    .simulator-form[data-recibo]::after {
        content: "O resultado aparece aqui.";
        grid-column: 2;
        grid-row: 1 / span 3;
        align-self: start;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
        height: 236px;
        padding: 24px 28px;
        border-radius: 18px;
        border: 1px dashed #D3CDBE;
        background:
            linear-gradient(#EAE4D6, #EAE4D6) 28px 52px / 46% 14px no-repeat,
            linear-gradient(#EFEADF, #EFEADF) 28px 84px / 70% 40px no-repeat,
            var(--sp-creme);
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: #7A7466;
        white-space: pre-line;
    }
    .simulator-form[data-recibo][data-ao-vivo-pronto]::after {
        content: "O resultado aparece aqui.\A Depois do primeiro cálculo, muda a cada alteração.";
    }
    .simulator-form[data-recibo]:has(.recibo-col)::after { display: none; }
}
@media (min-width: 1024px) and (max-height: 699px) {
    .simulator-form[data-recibo] .recibo-col .results-grid { position: relative; top: 0; }
}

/* ---------- Continue as contas --------------------------------------- */
.continuar { max-width: 700px; margin: 0 0 24px; }
.continuar h2 {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sp-tinta);
}
.continuar ul { list-style: none; margin: 0; padding: 0; }
.continuar li { margin: 0; border-bottom: 1px solid var(--sp-linha); }
.continuar a {
    display: grid;
    grid-template-columns: 75px minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
    column-gap: 20px;
    align-items: center;
    min-height: 44px;
    padding: 16px 0;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
}
.continuar-chapa {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: 75px;
    height: 60px;
    border-radius: 10px;
    background: var(--sp-creme);
    box-shadow: inset 0 0 0 1px rgba(47, 43, 176, .1);
    overflow: hidden;
}
.continuar-gravura { display: block; width: 100%; height: 100%; }
.continuar-nome {
    grid-column: 2;
    align-self: end;
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--sp-tinta);
    transition: color .15s ease;
}
.continuar-texto {
    grid-column: 2;
    align-self: start;
    margin-top: 2px;
    font-size: 15px;
    line-height: 22px;
    color: var(--sp-cinza);
}
.continuar-seta {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 20px;
    height: 20px;
    color: var(--sp-acao);
    transition: transform .2s var(--sp-ease);
}
/* sem gravura: só o texto, na mesma coluna das outras linhas */
.continuar a.sem-gravura .continuar-nome,
.continuar a.sem-gravura .continuar-texto { grid-column: 2; }
@media (hover: hover) and (pointer: fine) {
    .continuar a:hover .continuar-nome { color: var(--sp-acao); }
    .continuar a:hover .continuar-seta { transform: translateX(4px); }
}
.continuar a:focus-visible { outline: 2px solid var(--sp-acao); outline-offset: 4px; }
@media (max-width: 767px) {
    .continuar a { grid-template-columns: 60px minmax(0, 1fr) 20px; column-gap: 16px; }
    .continuar-chapa { width: 60px; height: 48px; border-radius: 9px; }
    .continuar-nome { font-size: 17px; }
}

/* ---------- Texto explicativo ---------------------------------------- */
.simulator-content {
    max-width: 700px;
    margin: 0;
    padding: 0;
}
.simulator-content h2 {
    font-size: 28px;
    line-height: 1.18;
    letter-spacing: -.02em;
    margin: 56px 0 16px;
    text-wrap: balance;
}
.simulator-content h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.01em; margin: 32px 0 8px; }
.simulator-content p,
.simulator-content ul,
.simulator-content ol { font-size: 17px; line-height: 1.7; color: #4A4A50; }
.simulator-content a { font-weight: 500; color: var(--sp-acao); }
/* ligações no texto do resultado (fora do recibo): o mesmo desenho das do texto */
.simulator-results a:not([class]):not(.recibo-col a) { font-weight: 500; color: var(--sp-acao); }
.simulator-content table { font-variant-numeric: tabular-nums; border-collapse: collapse; width: 100%; }
.simulator-content table th,
.simulator-content table td {
    padding: 10px 16px 10px 0;
    border: 0;
    border-bottom: 1px solid var(--sp-linha-2);
    background: none;
    text-align: left;
    font-size: 15px;
}
.simulator-content table th { font-size: 13px; font-weight: 500; color: var(--sp-cinza); border-bottom-color: var(--sp-linha); }
.simulator-content .pub-fluido { margin: 48px auto; }

/* FAQ em <details> nativo */
.faq { border-top: 1px solid var(--sp-linha); }
.faq-item { border-bottom: 1px solid var(--sp-linha); }
.faq-item summary {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 44px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    border-radius: 6px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { flex: 1 1 auto; margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--sp-tinta); }
.faq-chevron { flex: none; width: 20px; height: 20px; color: var(--sp-cinza); transition: transform .2s var(--sp-ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-item summary:focus-visible { outline: 2px solid var(--sp-acao); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover h3 { color: var(--sp-acao); } }
.faq-resposta { padding: 0 36px 20px 0; }
.faq-resposta p { margin: 0; font-size: 16px; line-height: 1.65; }

/* fontes oficiais (a última lista do texto): linhas com filete */
.simulator-content > ul:last-child {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    border-top: 1px solid var(--sp-linha);
}
.simulator-content > ul:last-child li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--sp-linha); font-size: 15px; line-height: 22px; }
.simulator-content > ul:last-child a { color: var(--sp-tinta); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .simulator-content > ul:last-child a:hover { color: var(--sp-acao); } }

/* ---------- Telemóvel ------------------------------------------------ */
@media (max-width: 767px) {
    .simulator-header { padding-top: 24px; margin-bottom: 20px; }
    .sim-titulo { gap: 14px; margin-bottom: 12px; }
    .sim-chapa { width: 70px; height: 56px; border-radius: 11px; }
    .simulator-header h1 { font-size: 26px; line-height: 1.15; }
    .simulator-header .subtitle { font-size: 15.5px; line-height: 1.55; margin-bottom: 10px; }
    .simulator-form .form-grid { gap: 20px; margin-bottom: 20px; }
    .recibo-col .results-grid { padding: 24px 20px 18px; border-radius: 16px; }
    .simulator-content h2 { font-size: 24px; margin-top: 48px; }
    .simulator-content p,
    .simulator-content ul,
    .simulator-content ol { font-size: 16px; }
}

/* ---------- Acessibilidade e impressão ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .recibo-col .results-grid { animation: none; }
    .simulator-btn, .continuar-seta, .continuar-nome, .faq-chevron { transition: none !important; }
}
@media print {
    .pub, .pub-coluna, .recibo-acoes, .continuar { display: none !important; }
    .simulator-page { background: #fff; }
    .recibo-col .results-grid { background: #fff; color: #000; border: 1px solid #000; }
    .recibo-col .results-grid::after { display: none; }
    .recibo-col .result-card-title, .recibo-col .result-card-value, .recibo-col .result-card-info,
    .recibo-colofao, .recibo-colofao a { color: #000 !important; }
}

/* ---------- Antes de o Vue montar: o formulário já ocupa o seu lugar (CLS 0) ----------
   O template cru tem a mesma geometria do formulário montado: só se escondem os blocos
   que nascem fechados (resultados, erros, v-else). O texto {{ }} fica invisível. */
#app[v-cloak] { display: block !important; visibility: hidden; }
[v-cloak] [v-if*="resultado"],
[v-cloak] [v-if*="erro"],
[v-cloak] [v-else],
[v-cloak] .alert,
[v-cloak] .error-message,
[v-cloak] .info-text { display: none !important; }
/* O que está por baixo do cartão só se mostra quando o Vue monta, já no sítio certo: quando o template
   cru e o formulário montado não têm a mesma altura (campos que dependem de escolhas), nada de visível
   se mexe. Se o Vue não carregar, aparece na mesma ao fim de 3 s. */
.simulator-card-container:has(#app[v-cloak]) ~ * {
    visibility: hidden;
    animation: sp-revelar 0s linear 3s forwards;
}
@keyframes sp-revelar { to { visibility: visible; } }

/* ---------- Coerência entre páginas (auditoria final) ---------------- */
/* caixa de escolha cuja opção mais comprida não cabe em meia linha: linha inteira (pagina-simulador.js) */
.simulator-form .form-grid > [data-campo-largo] { grid-column: 1 / -1; }

/* «voltar ao topo» nunca por cima do recibo (em todas as larguras) */
html[data-recibo-a-vista] .back-to-top { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* linhas do recibo: o mesmo tamanho em todas as páginas (há estilos em linha herdados) */
.recibo-col .result-card:not(.highlight-result) .result-card-value { font-size: 17px !important; line-height: 21px !important; }
.recibo-col .result-card:not(.highlight-result) .result-card-title { font-size: 15px !important; line-height: 21px !important; }
/* resultado em texto que não cabe à medida dos números: parte em linhas, sempre à mesma medida */
.recibo-col .highlight-result .result-card-value[data-texto] {
    font-size: clamp(32px, 11cqi, 44px) !important;
    line-height: 1.08;
    letter-spacing: -.03em;
    white-space: normal;
    overflow-wrap: normal;
    text-wrap: balance;
}

/* ações do recibo: o mesmo botão em todas as páginas; com 3 ações e pouca largura, só o texto */
.recibo-acoes .simulator-btn,
.recibo-acoes .share-trigger { font-size: 15px; flex: 0 0 auto; }
.recibo-acoes:has(> :nth-child(3)) .simulator-btn,
.recibo-acoes:has(> :nth-child(3)) .share-trigger { padding: 0 12px; gap: 7px; font-size: 15px; }
.recibo-acoes .simulator-btn i { font-size: 15px; }
@container (max-width: 312px) {
    .recibo-acoes:has(> :nth-child(3)) { gap: 6px; }
    .recibo-acoes:has(> :nth-child(3)) .simulator-btn svg,
    .recibo-acoes:has(> :nth-child(3)) .simulator-btn i,
    .recibo-acoes:has(> :nth-child(3)) .share-trigger svg,
    .recibo-acoes:has(> :nth-child(3)) .share-trigger i { display: none; }
    .recibo-acoes:has(> :nth-child(3)) .simulator-btn,
    .recibo-acoes:has(> :nth-child(3)) .share-trigger { padding: 0 12px; }
}

/* «Opções avançadas» em <details> dentro do formulário: o mesmo marcador em todas as páginas */
.simulator-form details:not(.faq-item) > summary {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    list-style: none;
    cursor: pointer;
    font-size: 15px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: var(--sp-tinta) !important;
}
.simulator-form details:not(.faq-item) > summary::-webkit-details-marker { display: none; }
.simulator-form details:not(.faq-item) > summary::marker { content: ""; }
.simulator-form details:not(.faq-item) > summary > svg[class$="chevron"] { display: none; }
.simulator-form details:not(.faq-item) > summary::before {
    content: "" !important;
    flex: none;
    width: 14px !important;
    height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%239E9EA4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
    transition: transform .2s ease;
}
.simulator-form details:not(.faq-item)[open] > summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .simulator-form details:not(.faq-item) > summary::before { transition: none; } }

/* ligações no subtítulo do cabeçalho: a cor de ligação do site */
.simulator-header .subtitle a { color: var(--sp-acao); text-decoration: underline; text-underline-offset: 2px; }

/* tabelas que deslizam: o bordo do lado onde há mais colunas esbate-se (pagina-simulador.js) */
.simulator-results [data-desliza="direita"] { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.simulator-results [data-desliza="esquerda"] { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.simulator-results [data-desliza="ambos"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
/* no telemóvel as tabelas do resultado apertam antes de deslizar: menos margem entre colunas,
   cabeçalhos em várias linhas e valores sem partir (o «€» nunca cai sozinho) */
@media (max-width: 480px) {
    .simulator-results .table-responsive { padding: 4px 12px; }
    .simulator-results table th,
    .simulator-results table td { padding-left: 5px !important; padding-right: 5px !important; font-size: 13px !important; }
    .simulator-results table th:first-child,
    .simulator-results table td:first-child { padding-left: 0 !important; }
    .simulator-results table th:last-child,
    .simulator-results table td:last-child { padding-right: 0 !important; }
    .simulator-results table th { white-space: normal !important; overflow-wrap: break-word; hyphens: auto; }
    .simulator-results table caption { padding-left: 0; padding-right: 0; }
}
/* ligações no texto de ajuda dos campos: a cor de ligação do site */
.simulator-form .form-group a:not([class]),
.simulator-form .form-grid a:not([class]) { color: var(--sp-acao); }
/* título muito comprido no telemóvel: a gravura por cima (pagina-simulador.js) */
@media (max-width: 480px) { .sim-titulo[data-longo] { flex-direction: column; align-items: flex-start; gap: 12px; } }
/* linha do recibo com um valor comprido: o rótulo guarda quase metade da largura e o valor parte
   em linhas (nunca um rótulo esmagado em «Por / ano») */
.recibo-col .result-card:not(.highlight-result) { grid-template-columns: minmax(45%, 1fr) auto; }
.recibo-col .result-card:not(.highlight-result) .result-card-value { white-space: normal; overflow-wrap: normal; text-wrap: balance; }
/* caixa de escolha com a opção escolhida em várias linhas (pagina-simulador.js) */
.simulator-form select[data-sel-longo] { color: transparent; line-height: 20px; }
.simulator-form select[data-sel-longo] option { color: var(--sp-tinta); }
.sel-texto {
    position: absolute;
    z-index: 1;
    box-sizing: border-box;
    padding-top: 13px;
    padding-bottom: 13px;
    border: 1px solid transparent;
    font-size: 16px;
    line-height: 20px;
    color: var(--sp-tinta);
    pointer-events: none;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
}
.sel-texto.sel-desligada { opacity: .55; }
@media (forced-colors: active) {
    .simulator-form select[data-sel-longo] { color: CanvasText; height: auto !important; }
    .sel-texto { display: none !important; }
}