/* A versão web, passo 4 (2026-10-17): o aspeto do protótipo (as cores, a letra e as peças de movimento/raiox-movimento.html),
   no desenho escolhido no mock (movimento/web-inicio.html): o Início da proposta A e «As minhas casas» no estilo da C.
   Só para o computador; abaixo de 1000 px de largura as colunas juntam-se, para não partir. */

/* Céu, fase 2 (2026-10-19; design_handoff_ceu/README.md, «Letras»): a Geist no texto (400, 500 e 600; a fonte é variável) e a
   Instrument Serif nos números grandes e nos títulos dos ecrãs, as duas com a licença OFL em letras/ */
@font-face { font-family: "Geist"; src: url("letras/Geist.woff") format("woff"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("letras/InstrumentSerif-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("letras/InstrumentSerif-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* as cores do protótipo (raiox-movimento.html, :root). Desde o protótipo V223 (2026-10-19), as do «Céu», fase 1
     (design_handoff_ceu/README.md): o claro em papel quente e tinta azul-noite, o escuro na «Noite» */
  --page: #EFEDE6; --bg: #F7F6F2; --card: #FFFFFF; --card-alt: #FBFAF7; --tint: #EFEDE6;
  --line: #E4E1D8; --ink: #16294B; --ink2: #34405F; --muted: #566079; --faint: #858B9C;
  --accent: #16294B; --accent-strong: #16294B; --on-accent: #FFFFFF; --accent-tint: #E9EFF4; --sec-ativo: #E6E3DA;
  --bom-bg: #D5F5DA; --bom-ink: #154F27; --warn-bg: #F8ECD2; --warn-ink: #6B4710; --bad-bg: #F6DDD5; --bad-ink: #7A2A12;
  --sem-bom: #23824A; --sem-aviso: #B8740A; --sem-mau: #C8412A;
  --exemplo: #6E7588;
  /* as três partes do custo da casa: o crédito (--accent), a casa e os impostos */
  --casa: #8DB4DE; --imp: #CFDDEC; --est: #858B9C; --rampa2: #8DB4DE; --rampa3: #CFDDEC;
  --scrim: rgba(22, 41, 75, 0.5);
  --sombra: rgba(22, 41, 75, 0.18); --sombra-custo: 0 4px 16px rgba(22, 41, 75, 0.06);
  /* Céu, fase 3: as cores da paisagem (README, «Paisagem»; de OKLCH para hex), só de desenho, nunca com texto. A
     paisagem 2 (design_handoff_ceu/paisagem-v2.md; protótipo V248): os mesmos hex da app e do protótipo; o céu em três
     paragens, o sol com halo e disco, as nuvens com volume, as colinas ao longe, as relvas com a linha de luz, e a casa,
     as copas e o tronco com um lado à sombra e outro ao sol. --so-dia e --so-noite mostram o que é só de um deles. As
     relvas mudam de tom nos primeiros 48 a 80 px (no protótipo, 22% e 25% da altura delas, que lá são mais baixas) */
  --so-dia: block; --so-noite: none;
  --ceu-topo: #80BCE9; --ceu-meio: #ACDCF5; --ceu-horizonte: #F4EBD1; --ceu-abertura: linear-gradient(180deg, #80BCE9 0%, #ACDCF5 42%, #F4EBD1 60%);
  --halo: rgb(255 248 195 / 0.55); --halo-k: 2.1875; --astro: radial-gradient(circle at 42% 40%, #FFFEE7, #FFECA0 70%, #FFDF83); --cratera: #E0D7C2;
  --nuvem: linear-gradient(180deg, #FFFFFF 52%, #D2E8F6); --passaro: rgb(56 79 104 / 0.7); --estrela: #F3F1EC;
  --colina1: #B0DBDA; --colina2: #A7D6CF; --arvore-longe: #89BEAF;
  --relva: #B3DBAA; --relva-tras: linear-gradient(180deg, #CDE8B9, #B3DBAA 48px); --relva-tras-luz: #E3F2CE;
  --relva-frente: linear-gradient(180deg, #90CD8C, #77BB7F 50px); --relva-frente-luz: #A7D797;
  --relva-perto: linear-gradient(180deg, #73BC79, #59AA6D 80px); --relva-perto-luz: #90C986; --tufo: #57A364;
  --caminho: #E9D8BE; --luz-no-chao: rgb(252 209 118 / 0.22); --sombra-casa: rgb(40 80 40 / 0.28); --sombra-arvore: rgb(20 60 30 / 0.3);
  --chamine: linear-gradient(90deg, #A55443 45%, #C66D54 45%); --telhado: linear-gradient(90deg, #AF5744 50%, #D57355 50%);
  --parede-sombra: #EFE9DF; --parede-luz: #FDFCF8; --beiral: rgb(110 60 30 / 0.16);
  --vidro-janela: linear-gradient(135deg, #C9EBF9 0 42%, #92C6E5 42%); --caixilho: #EEEAE0; --barras: #FDFCF8; --peitoril: #D8D0C3; --janela-brilho: transparent;
  --porta: linear-gradient(90deg, #091F3B 50%, #153153 50%); --puxador: #E2BF76; --degrau: #D1C9BC;
  --arbusto: radial-gradient(circle at 64% 32%, #6DB365, #36884D); --copa: radial-gradient(circle at 64% 32%, #6DB365, #3D8E53 55%, #1A7244);
  --copa-longe: radial-gradient(circle at 64% 32%, #77B870, #4A925C 60%, #337D52); --tronco: linear-gradient(90deg, #5F3F31 50%, #7F5944 50%);
  /* Céu, fase 4: as caixas dos ícones dos quatro atalhos da casa (eram formas; no protótipo V234, no claro, o terracota e
     o verde mais claros, e o traço dos ícones), as barras de «Antes de dizer que sim» e o ícone da renda */
  --atalho-credito: #8EC5EC; --atalho-umavez: #E3907A; --atalho-quando: #9DD0A0; --losango: #FDD990; --icone-renda: #C8664E;
  --atalho-traco: #16294B;
  --passo1: #549957; --passo2: #58AA6E; --passo3: #72B875; --passo-por-fazer: #E6E4DD;
  /* protótipo V235: os ícones de «Viver nesta casa» (os oklch do Claude Design, em hex); o painel do passo 2 e os pontos
     do caminho até às chaves */
  --viver-cuidar: #266F30; --viver-idade: #A64831; --viver-energia: #9A6418; --viver-caminho: #296898;
  --caminho-painel: #F1F4F7; --caminho-ponto: #C9C6BC;
  --tracejado: color-mix(in srgb, var(--accent) 45%, transparent);
  /* o código fica escuro sobre branco nos dois temas, para a câmara o ler */
  --qr-fundo: #FFFFFF;
  /* «O que a trava» num cartão cheio da tinta (V55) e o aviso do que mudou (o toast do protótipo) */
  --opiniao-bg: #16294B; --opiniao-ink: #FFFFFF; --opiniao-texto2: #C9D3E6; --opiniao-acao: #B9D3F2;
  --toast-bg: #16294B; --toast-ink: #FFFFFF; --toast-acao: #B9D3F2;
  /* a regra dos números (Letra.numero na app): a partir de 26 px, a serifa (400; −0,01 em a partir de 50, sem algarismos de
     largura fixa, que ela não tem); abaixo, a Geist 600 com os algarismos de largura fixa, para não tremerem */
  --letra: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serifa: "Instrument Serif", ui-serif, Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0A0E14; --bg: #0F141C; --card: #1A202B; --card-alt: #202734; --tint: #242B37;
    --line: #2E3644; --ink: #F3F1EC; --ink2: #CDD2DC; --muted: #9AA3B3; --faint: #7F889A;
    --accent: #F3F1EC; --accent-strong: #FFFFFF; --on-accent: #0F141C; --accent-tint: #263042; --sec-ativo: #2E3644;
    --bom-bg: #14361D; --bom-ink: #93E4A4; --warn-bg: #33291A; --warn-ink: #EBCB8E; --bad-bg: #3B221B; --bad-ink: #F2B8A5;
    --sem-bom: #4DBB78; --sem-aviso: #E0A33B; --sem-mau: #F0735C;
    --exemplo: #89909E;
    --casa: #5E7FA6; --imp: #3A4A63; --est: #7F889A; --rampa2: #5E7FA6; --rampa3: #3A4A63;
    --scrim: rgba(0, 0, 0, 0.64);
    --sombra: rgba(0, 0, 0, 0.5); --sombra-custo: 0 4px 16px rgba(0, 0, 0, 0.3);
    --opiniao-bg: #F3F1EC; --opiniao-ink: #0F141C; --opiniao-texto2: #4A5160; --opiniao-acao: #16294B;
    --toast-bg: #F3F1EC; --toast-ink: #0F141C; --toast-acao: #16294B;
    /* Céu, fase 5: a paisagem à noite (README, «Noite»): a lua no lugar do sol, as estrelas, as nuvens quase
       transparentes, as relvas e as árvores escuras, a parede baça e a janela acesa, com brilho. A paisagem 2: a lua com
       crateras, sem pássaros, e a luz da janela no chão */
    --so-dia: none; --so-noite: block;
    --ceu-topo: #0C142D; --ceu-meio: #162C49; --ceu-horizonte: #23435E; --ceu-abertura: linear-gradient(180deg, #0C142D 0%, #162C49 45%, #23435E 62%);
    --halo: rgb(245 239 216 / 0.28); --halo-k: 2.5; --astro: radial-gradient(circle at 42% 40%, #FFFCF1, #EEE4CB 75%, #E2D7BA);
    --nuvem: linear-gradient(180deg, #D3DAE8 50%, #A3AEC6);
    --colina1: #193043; --colina2: #0E2D3B; --arvore-longe: #072630;
    --relva: #264531; --relva-tras: linear-gradient(180deg, #36523C, #264531 48px); --relva-tras-luz: #4C654C;
    --relva-frente: linear-gradient(180deg, #21402C, #123322 50px); --relva-frente-luz: #344F39;
    --relva-perto: linear-gradient(180deg, #163524, #0A281A 80px); --relva-perto-luz: #284530; --tufo: #0B2819;
    --caminho: #594E3D; --sombra-casa: rgb(0 0 0 / 0.32); --sombra-arvore: rgb(0 0 0 / 0.32);
    --chamine: linear-gradient(90deg, #56291F 45%, #723C2D 45%); --telhado: linear-gradient(90deg, #5C2E24 50%, #7B4434 50%);
    --parede-sombra: #877F73; --parede-luz: #A8A094; --beiral: rgb(0 0 0 / 0.2);
    --vidro-janela: #FCD176; --caixilho: #938B7F; --barras: #A59D91; --peitoril: #81796D; --janela-brilho: rgb(252 209 118 / 0.5);
    --porta: linear-gradient(90deg, #091628 50%, #12253C 50%); --degrau: #7B7368;
    --arbusto: radial-gradient(circle at 64% 32%, #2F5136, #163523); --copa: radial-gradient(circle at 64% 32%, #34563B, #1C3A27 55%, #0E2B1B);
    --copa-longe: radial-gradient(circle at 64% 32%, #34563B, #1B3A28 60%, #112D1E); --tronco: linear-gradient(90deg, #392218 50%, #4C3428 50%);
    --atalho-credito: #75ACD2; --atalho-umavez: #C36953; --atalho-quando: #579766; --losango: #ECC980; --icone-renda: #C36953;
    --atalho-traco: #0F141C;
    --passo1: #397949; --passo2: #3F895E; --passo3: #579766; --passo-por-fazer: #2E3644;
    --viver-cuidar: #8DC991; --viver-idade: #E69783; --viver-energia: #ECC980; --viver-caminho: #88BFE6;
    --caminho-painel: #222936; --caminho-ponto: #4A5366;
  }
}

* { box-sizing: border-box; }
/* em coluna, para o rodapé ficar no fundo da janela numa página curta (o resto fora do <main> é fixo) */
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 15px/1.45 var(--letra); }
main { flex: 1 0 auto; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
/* o forte é o 600 da Geist (.meio e .forte na app) */
h1, h2, h3, h4, b, strong { font-weight: 600; }
h1, h2, h3 { text-wrap: balance; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.cont { width: min(1120px, 100% - 96px); margin-inline: auto; }

/* ---------- o ícone da app (o botão da barra): fica o original, decidido a 2026-10-18, fora do «Céu» ---------- */
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic-cheio { fill: #1F43B8; }
.ic-fundo { fill: #FBFCFF; }
.ic-claro { fill: #6A88DE; }

/* ---------- a paisagem (Céu, fase 3; web/paisagem.js): camadas de trás para a frente, só formas e cores lisas ---------- */
/* A paisagem 2 (design_handoff_ceu/paisagem-v2.md; protótipo V248): a luz vem do sol (ou da lua), à direita; os lados
   virados para ela são mais claros e as sombras caem para a esquerda e para baixo. De trás para a frente: o céu em três
   paragens, as estrelas (à noite), o sol com halo e disco (a lua, com crateras), as nuvens com volume e os pássaros (de
   dia), as colinas ao longe, a relva de trás, a casa (com o caminho de terra, a sombra e o arbusto), a relva da frente
   com os tufos e as árvores (com a sombra no chão) */
@keyframes ceu-deriva { from { transform: translateX(-30px); } to { transform: translateX(30px); } }
@keyframes ceu-balanca { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }
.paisagem { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, var(--ceu-topo) 0%, var(--ceu-meio) 60%, var(--ceu-horizonte) 100%); pointer-events: none; }
.paisagem--abertura { background: var(--ceu-abertura); }
.paisagem > div { position: absolute; }
.paisagem__estrelas, .paisagem__nuvens, .paisagem__longe { inset: 0; }
.paisagem__estrelas { display: var(--so-noite); }
.estrela { position: absolute; border-radius: 50%; background: var(--estrela); opacity: var(--o); }
/* o sol (à noite, a lua, mais pequena e com o mesmo centro): o halo (140 para o sol de 64 e para a lua de 56) e o disco
   com a luz a 42% 40%; as duas crateras da lua, de 9 e 6 a (30, 14) e (16, 32) num disco de 56 */
.paisagem__astro { --d: var(--tam); width: var(--tam); height: var(--tam); }
.astro__halo, .astro__disco { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.astro__halo { width: calc(var(--d) * var(--halo-k)); height: calc(var(--d) * var(--halo-k)); background: radial-gradient(closest-side, var(--halo), transparent); }
.astro__disco { width: var(--d); height: var(--d); background: var(--astro); }
.astro__cratera { position: absolute; display: var(--so-noite); border-radius: 50%; background: var(--cratera); }
.astro__cratera:nth-child(1) { left: 53.57%; top: 25%; width: 16.07%; height: 16.07%; }
.astro__cratera:nth-child(2) { left: 28.57%; top: 57.14%; width: 10.71%; height: 10.71%; }
/* a nuvem: uma pílula de 120 × 26 e dois círculos (44 × 38 a 20 e 54 × 46 a 50), à escala --s, cada um com o volume
   (o gradiente de cima para baixo); deriva 30 para cada lado */
.nuvem { position: absolute; width: calc(120px * var(--s)); height: calc(46px * var(--s)); opacity: var(--o); animation: ceu-deriva 16s ease-in-out infinite alternate; }
.nuvem > div { position: absolute; background: var(--nuvem); }
.nuvem__base { left: 0; bottom: 0; width: calc(120px * var(--s)); height: calc(26px * var(--s)); border-radius: 99px; }
.nuvem__bola { left: calc(20px * var(--s)); bottom: calc(8px * var(--s)); width: calc(44px * var(--s)); height: calc(38px * var(--s)); border-radius: 50%; }
.nuvem__bola--grande { left: calc(50px * var(--s)); bottom: calc(6px * var(--s)); width: calc(54px * var(--s)); height: calc(46px * var(--s)); }
/* os pássaros (só de dia, parados, fora do caminho das nuvens): dois pares de arcos, o cimo de um semicírculo com traço
   de 1,5; o par pequeno 22 à direita e 14 abaixo, a 0,55 */
.passaros { position: absolute; display: var(--so-dia); width: 32px; height: 18px; }
.passaro { position: absolute; top: 0; left: 0; width: 7px; height: 4px; border-top: 1.5px solid var(--passaro); border-radius: 50% 50% 0 0; }
.passaro:nth-child(2) { left: 7px; }
.passaro:nth-child(n+3) { top: 14px; width: 5px; height: 3px; opacity: 0.786; }
.passaro:nth-child(3) { left: 22px; }
.passaro:nth-child(4) { left: 27px; }
/* V249 (ele: «será que os consegues animar, muito ligeiramente, quase impercetível»): cada par plana devagar, sempre à
   mesma velocidade, numa elipse de 4 para cada lado e 1,5 para cima e para baixo; o grande em 12 s e o pequeno em 9 s,
   desencontrados */
.passaro { animation: ceu-plana 12s linear infinite; }
.passaro:nth-child(n+3) { animation-duration: 9s; animation-delay: -3s; }
@keyframes ceu-plana { 0% { transform: translate(-4px, 0); } 25% { transform: translate(0, -1.5px); } 50% { transform: translate(4px, 0); } 75% { transform: translate(0, 1.5px); } 100% { transform: translate(-4px, 0); } }
/* as colinas ao longe: duas elipses e três árvores pequenas, só a copa */
.paisagem__longe > div { position: absolute; border-radius: 50%; }
.colina { height: var(--alto-colina); }
.colina--1 { left: -45%; width: 95%; background: var(--colina1); }
.colina--2 { left: 28%; width: 110%; background: var(--colina2); }
.arvore-longe { background: var(--arvore-longe); }
/* as relvas: elipses mais largas do que a janela, com o topo à vista, mais claro, e a linha de luz no cimo */
.relva { border-radius: 50%; }
.relva--tras { background: var(--relva-tras); box-shadow: inset 0 2px 0 var(--relva-tras-luz); }
.relva--frente { background: var(--relva-frente); box-shadow: inset 0 3px 0 var(--relva-frente-luz); }
.relva--perto { background: var(--relva-perto); box-shadow: inset 0 3px 0 var(--relva-perto-luz); }
.tufo { background: var(--tufo); clip-path: polygon(0 100%, 20% 0, 40% 70%, 55% 10%, 75% 70%, 100% 20%, 100% 100%); }
/* a árvore: a copa redonda com a luz do lado do sol, o tronco em duas metades (de 40 de copa, 5 × 15) e, parada por
   baixo, um pouco à esquerda, a sombra no chão (56 × 10); a copa e o tronco balançam 2° para cada lado, a partir da
   base. A mais pequena (--longe) é mais clara */
.arvore { width: var(--t); }
.arvore__sombra { position: absolute; left: calc(var(--t) * -0.325); top: calc(var(--t) * 1.25); width: calc(var(--t) * 1.4); height: calc(var(--t) * 0.25); background: radial-gradient(closest-side, var(--sombra-arvore), transparent); }
.arvore__corpo { display: flex; flex-direction: column; align-items: center; transform-origin: bottom center; animation: ceu-balanca 4s ease-in-out infinite alternate; }
.arvore__copa { width: var(--t); height: var(--t); border-radius: 50%; background: var(--copa); }
.arvore--longe .arvore__copa { background: var(--copa-longe); }
.arvore__tronco { width: calc(var(--t) / 8); height: calc(var(--t) * 0.375); background: var(--tronco); }
.paisagem--parada * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .paisagem *, .mini * { animation: none !important; } }
/* a casa desenhada (CasaDesenhada), à escala da casa grande da Abertura (112 de largura); as peças (.cd) em pontos, do
   web/paisagem.js. A janela: as barras em cruz (de 7 a 9 em 16), na cor da parede, por cima do vidro; o caixilho e, à
   noite, o brilho */
.casinha { position: absolute; width: var(--l); }
.cd { position: absolute; }
.cd-caminho { background: var(--caminho); }
.cd-luz { display: var(--so-noite); background: radial-gradient(closest-side, var(--luz-no-chao), transparent); }
.cd-sombra { background: radial-gradient(closest-side, var(--sombra-casa), transparent); }
.cd-chamine { background: var(--chamine); }
.cd-telhado { background: var(--telhado); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cd-parede { background: linear-gradient(180deg, var(--beiral) 0 var(--b), transparent var(--b)), linear-gradient(90deg, var(--parede-sombra), var(--parede-luz) 65%); }
.cd-janela { background: linear-gradient(90deg, transparent 43.75%, var(--barras) 43.75% 56.25%, transparent 56.25%), linear-gradient(180deg, transparent 43.75%, var(--barras) 43.75% 56.25%, transparent 56.25%), var(--vidro-janela);
  box-shadow: 0 0 0 var(--aro) var(--caixilho), var(--brilho) var(--janela-brilho); }
.cd-peitoril { background: var(--peitoril); }
.cd-porta { background: var(--porta); }
.cd-puxador { border-radius: 50%; background: var(--puxador); }
.cd-degrau { background: var(--degrau); }
.cd-arbusto { border-radius: 50%; background: var(--arbusto); }
/* a miniatura (parada): o céu, um sol de 12 a 16, uma relva e a casa de 26, assente na relva em baixo; com o acabamento
   da paisagem 2, nas mesmas posições (a janela só à noite, acesa). V249: com a chaminé, a porta e o degrau, à escala da
   casa do protótipo (o telhado de 32: a chaminé de 4 × 7 a 22 da esquerda dele, a porta de 6 × 10 a 4 da direita da
   parede e o degrau de 9 × 1,1 por baixo dela) */
.mini { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--ceu-topo) 0%, var(--ceu-meio) 60%, var(--ceu-horizonte) 100%); }
.mini--quadrada { flex: none; width: 64px; height: 64px; border-radius: 14px; }
.mini--faixa { height: 64px; }
.mini--resposta { height: 72px; }
.mini__astro { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--astro); }
.mini--faixa .mini__astro { left: 14px; top: 12px; width: 16px; height: 16px; }
.mini--resposta .mini__astro { left: 22px; top: 14px; width: 20px; height: 20px; box-shadow: 0 0 22px 7px var(--halo); }
.mini__relva { position: absolute; left: -30%; width: 160%; height: 50px; top: calc(100% - 18px); border-radius: 50%; background: var(--relva-frente); box-shadow: inset 0 3px 0 var(--relva-frente-luz); }
.mini--faixa .mini__relva { left: -20%; width: 140%; height: 60px; }
.mini--resposta .mini__relva { left: -20%; width: 140%; height: 90px; top: calc(100% - 20px); }
.mini .casinha { left: 22px; bottom: 12px; }
.mini--faixa .casinha { left: auto; right: 22px; }
.mini--resposta .casinha { left: auto; right: 12%; bottom: 10px; }
.casinha__telhado { position: relative; width: var(--l); height: calc(var(--l) * 52 / 112); background: var(--telhado); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.casinha__corpo { position: relative; width: calc(var(--l) * 90 / 112); height: calc(var(--l) * 62 / 112); margin: 0 auto;
  background: linear-gradient(180deg, var(--beiral) 0 calc(var(--l) * 6 / 112), transparent calc(var(--l) * 6 / 112)), linear-gradient(90deg, var(--parede-sombra), var(--parede-luz) 65%); }
.casinha__chamine { position: absolute; left: calc(var(--l) * 22 / 32); top: calc(var(--l) / 32); width: calc(var(--l) * 4 / 32); height: calc(var(--l) * 7 / 32); background: var(--chamine); }
.casinha__porta { position: absolute; right: calc(var(--l) * 4 / 32); bottom: 0; width: calc(var(--l) * 6 / 32); height: calc(var(--l) * 10 / 32); border-radius: calc(var(--l) * 3 / 32) calc(var(--l) * 3 / 32) 0 0; background: var(--porta); }
.casinha__degrau { position: absolute; right: calc(var(--l) * 2.5 / 32); bottom: calc(var(--l) * -1.1 / 32); width: calc(var(--l) * 9 / 32); height: calc(var(--l) * 1.1 / 32); background: var(--degrau); }
.casinha__janela { position: absolute; display: var(--so-noite); left: calc(var(--l) * 14 / 112); top: calc(var(--l) * 14 / 112); width: calc(var(--l) * 20 / 112); height: calc(var(--l) * 20 / 112); background: var(--vidro-janela); box-shadow: 0 0 8px 2px var(--janela-brilho); }

/* ---------- o cimo de todas as páginas: a paisagem, a marca e os separadores; o conteúdo sobe 28 por cima dela ---------- */
/* (Céu, fase 3: a marca e os separadores por cima da paisagem, e não num cartão) */
.topo { position: relative; height: 190px; }
body[data-pagina="inicio"] .topo { height: 300px; }
body[data-pagina="casa"] .topo { height: 340px; }
.topo__barra { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(1120px, 100% - 96px); margin-inline: auto; padding-top: 22px; }
.marca__textos { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; }
.marca__nome { font: 400 34px/1.05 var(--serifa); color: var(--ink); }
.marca__lema { font-size: 14px; line-height: 20px; color: var(--ink2); }
/* (2026-10-19, como no Início da app e no protótipo V230: «Fazer as Contas / de comprar casa», o «as» com a letra do lema) */
.marca__as { font: 400 14px/1 var(--letra); color: var(--ink2); }
/* os separadores numa barra flutuante, como a de baixo do telemóvel: o cartão a 88% com desfoque, e o separador
   ativo numa pílula */
.marca__dir { display: flex; align-items: center; gap: 4px; min-height: 56px; padding: 6px; border-radius: 28px; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 24px rgb(22 41 75 / 0.10); }
.nav { display: flex; gap: 2px; }
.nav a { display: flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 22px; color: var(--muted); font-weight: 500; font-size: 15px; text-decoration: none; }
.nav a:hover { background: var(--tint); color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-tint); color: var(--ink); font-weight: 600; }
.chip-iphone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 14px; border: 0; border-radius: 22px; background: var(--tint); color: var(--ink); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.chip-iphone:hover { background: var(--sec-ativo); }
.chip-iphone svg { color: var(--ink); }
.chip-iphone .ponto { width: 8px; height: 8px; border-radius: 4px; background: var(--faint); }
.chip-iphone .ponto.ponto--trocar { background: var(--sem-bom); }
.chip-iphone[data-ligado] svg { display: none; }
main { position: relative; z-index: 1; margin-top: -28px; border-radius: 28px 28px 0 0; background: var(--bg); }

/* ---------- peças ---------- */
.cartao { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--card); border-radius: 22px; }
.cartao h2 { font: 600 19px/1.3 var(--letra); }
.cartao > .btn-texto, .cartao > .btn { align-self: flex-start; text-align: left; }
.texto2 { color: var(--ink2); }
.pequeno { font-size: 13px; color: var(--muted); }
.nota { font-size: 14px; color: var(--muted); }
.nota-forte { font-weight: 600; }
.avisos { color: var(--warn-ink); }
.avisos:empty { display: none; }
.rotulo { font: 600 12px/16px var(--letra); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 26px; font-weight: 600; font-size: 16px; cursor: pointer; }
.btn--pri { min-height: 56px; padding: 0 30px; border-radius: 28px; background: var(--accent); color: var(--on-accent); }
.btn--pri:hover { background: color-mix(in srgb, var(--accent) 86%, var(--card)); }
.btn--sec { background: var(--tint); color: var(--ink); }
.btn--sec:hover { background: var(--sec-ativo); }
.btn-texto { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.btn-texto:hover { text-decoration-thickness: 2px; }
.btn-pequeno { padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-pequeno:hover { background: var(--tint); }
.etiqueta { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: var(--tint); color: var(--ink2); font-size: 12px; font-weight: 600; }
.etiqueta--nova { background: var(--accent); color: var(--on-accent); }
.pastilha { display: inline-flex; align-self: flex-start; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.pastilha--bom { background: var(--bom-bg); color: var(--bom-ink); }
.pastilha--aviso { background: var(--warn-bg); color: var(--warn-ink); }
.pastilha--mau { background: var(--bad-bg); color: var(--bad-ink); }
.fechar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 18px; background: var(--tint); color: var(--ink2); cursor: pointer; }
.fechar:hover { background: var(--sec-ativo); }
/* os atalhos da barra de marcadores, na linha de baixo: cada um inteiro, o do Mac e o do Windows lado a lado */
.teclas { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.teclas__par { white-space: nowrap; }
.tecla { display: inline-block; padding: 1px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card-alt); font: 600 13px var(--letra); }

/* as portas (V191; Céu, fase 4): cartões brancos de raio 22, o ícone num quadrado de 48, o título a 600 e a etiqueta na
   segunda tinta; a seta num círculo de 32 da tinta. O preço deixa de ser azul */
.porta { display: grid; grid-template-columns: minmax(0, 1fr) 32px; gap: 14px; align-items: center; width: 100%; padding: 12px 14px 12px 20px; border: 0; border-radius: 22px; background: var(--card); color: inherit; text-align: left; cursor: pointer; }
.porta:hover { background: var(--card-alt); }
.porta__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.porta__tit { font: 600 17px/22px var(--letra); }
.porta__etq { font-size: 14px; line-height: 20px; color: var(--ink2); }
.portas2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.porta--icone { grid-template-columns: 48px minmax(0, 1fr) 32px; padding-left: 12px; }
.porta__icone { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg); }
.porta__etq strong { font: 600 14px/20px var(--letra); color: var(--ink); }
.porta__seta { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--ink); }
/* protótipo V241 (ele: «os icons da aplicação anterior mas manter as cores utilizadas pelos novos icons (como
   background)»): os traços de antes do Céu (a nota, a chave e, para a casa vista num site, uma janela do browser com uma
   casa), claros, no quadrado com a cor da forma do Céu; à noite, a tinta é clara e o traço fica escuro. Depois, ele: o
   salário com o verde de «Quando sai o dinheiro» e a casa vista num site com o azul de «O crédito», com o traço escuro
   dos atalhos da casa */
.porta__icone--salario { background: var(--atalho-quando); color: var(--atalho-traco); }
.porta__icone--site { background: var(--atalho-credito); color: var(--atalho-traco); }
.porta__icone--renda { background: var(--icone-renda); color: var(--card); }

/* as fotos: a fotografia do anúncio, a ilustração do exemplo ou, sem nenhuma, a miniatura da paisagem */
.foto { position: relative; overflow: hidden; background: var(--tint); }
.foto--sala { background: url("exemplo-sala.svg") center / cover no-repeat; }
/* a fotografia do anúncio, copiada pelo botão da barra (2026-10-17) */
.foto__img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Início (a proposta A) ---------- */
.inicio { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; padding-block: 46px 56px; }
.inicio__esq { display: flex; flex-direction: column; gap: 18px; }
.inicio__pergunta { font: 600 36px/1.15 var(--letra); letter-spacing: -0.025em; }
.inicio__pergunta--2 { margin-top: 18px; font-size: 26px; letter-spacing: -0.015em; }
.inicio__bloco { display: flex; flex-direction: column; gap: 16px; }
.exemplo { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; align-items: center; }
.recentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recente { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: var(--card); color: inherit; text-decoration: none; }
.recente:hover { background: var(--card-alt); }
.recente__corpo { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px 12px; }
.recente__custo { font: 600 17px/22px var(--letra); font-variant-numeric: tabular-nums; }
.recente__custo small { font: 400 13px var(--letra); color: var(--muted); }
.recente__tit { font-size: 13px; line-height: 18px; color: var(--muted); }
/* nas listas, a fotografia (ou a ilustração do exemplo) nas medidas da miniatura do Céu (2026-10-19) */
.exemplo .foto { width: 64px; height: 64px; border-radius: 14px; }
.recente > .foto, .coluna > .foto { flex: none; height: 64px; }
.inicio__bloco > .rotulo { padding-inline: 4px; }

/* ---------- a Abertura (Céu, fase 4): a paisagem na janela toda; à esquerda, a marca, o título na serifa, o subtítulo e a
   folha com as etiquetas, «Começar» e «Ver um exemplo»; a casa e as árvores à direita ---------- */
.abertura { position: fixed; inset: 0; z-index: 70; overflow: auto; background: var(--ceu-topo); color: var(--ink); }
body.com-abertura { overflow: hidden; }
.abertura > .paisagem { position: fixed; }
.abertura__dentro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: min(1120px, 100% - 96px); min-height: 100%; margin: 0 auto; padding: 36px 0 48px; }
.abertura__marca { display: flex; align-items: center; gap: 8px; font: 600 16px/1 var(--letra); letter-spacing: -0.01em; }
.abertura__triangulo { width: 18px; height: 9px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.abertura__titulo { max-width: 600px; margin-top: 8vh; font: 400 76px/1 var(--serifa); letter-spacing: -0.01em; text-wrap: balance; }
.abertura__titulo i { font-style: italic; }
.abertura__sub { max-width: 380px; margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.abertura__folha { display: flex; flex-direction: column; gap: 12px; width: min(460px, 100%); margin-top: 32px; padding: 22px 24px 20px; border-radius: 32px; background: color-mix(in srgb, var(--card) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 40px rgb(22 41 75 / 0.12); }
.abertura__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.abertura__etiquetas li { padding: 6px 11px; border-radius: 20px; background: var(--accent-tint); font-size: 13px; line-height: 18px; }
.abertura__folha .btn--pri { width: 100%; }
.abertura__exemplo { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink2); font-size: 15px; cursor: pointer; }
.abertura__exemplo:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- As minhas casas (as colunas da B, no estilo da C) ---------- */
.casas { padding-block: 34px 56px; }
.casas-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.casas-cab h1, .dados-cab h1 { font: 400 44px/1.05 var(--serifa); }
.casas-cab p, .dados-cab p { margin-top: 6px; color: var(--ink2); }
.seg { flex: none; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--tint); }
.seg button { min-height: 34px; padding: 6px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--sombra); }
.colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.coluna { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--card); border-radius: 22px; }
.coluna--chegou { box-shadow: 0 0 0 2px var(--accent); }
.coluna__corpo { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px; }
.coluna__corpo > .etiqueta { position: absolute; top: 12px; left: 12px; }
.coluna__tit { font: 600 18px/1.3 var(--letra); }
.coluna__mes { display: flex; align-items: baseline; gap: 6px; }
.coluna__mes .num { font: 400 32px/1.1 var(--serifa); font-variant-numeric: normal; }
.coluna__motivo { color: var(--muted); }
.linhas { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0; font-size: 14px; }
.linhas dt, .linhas dd { padding: 8px 0; border-top: 1px solid var(--line); }
.linhas dt { color: var(--ink2); }
.linhas dd { margin: 0; padding-left: 12px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.coluna__pe { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.coluna--nova { justify-content: flex-start; gap: 16px; padding: 22px; background: transparent; border: 2px dashed var(--tracejado); }
.coluna--nova h2 { font: 600 19px/1.3 var(--letra); }
.coluna--vazia { align-self: start; gap: 12px; }
.coluna--vazia .btn { align-self: flex-start; }
.coluna--fila { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 22px; }
.coluna--fila .texto2 { flex: 1; text-align: right; }
.casas-cenario { margin-top: 16px; }
.casas .nota + .nota { margin-top: 4px; }

/* a casa que acabou de chegar do portal */
.chegada { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; padding: 18px 18px 18px 22px; border-radius: 22px; background: var(--card); box-shadow: var(--sombra-custo); }
.chegada__topo { display: grid; grid-template-columns: minmax(0, 1fr) auto 36px; gap: 20px; align-items: center; }
.chegada__textos { display: flex; flex-direction: column; gap: 2px; }
.chegada__nota { font-size: 13px; font-weight: 600; color: var(--sem-bom); }
.chegada h2 { font: 600 22px/1.25 var(--letra); }
.chegada .contas { text-align: right; }
.cartoes { margin: 0; padding-left: 20px; color: var(--ink2); }
.cartoes:empty { display: none; }
.dados-lidos summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 14px; }
.dados-lidos table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.dados-lidos th, .dados-lidos td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dados-lidos thead th { color: var(--muted); font-size: 13px; }
.dados-lidos td.fonte { color: var(--muted); font-size: 13px; }
.a-confirmar, .dados-lidos .nota { display: block; font-size: 13px; color: var(--warn-ink); }
#chegada-faltam:empty, #chegada-verificacao:empty { display: none; }
.ferramentas { display: flex; align-items: center; gap: 8px; margin-top: 4px; }

/* as contas de uma casa (o custo por mês, no aviso da casa que chegou) */
.por-mes { display: flex; align-items: baseline; gap: 6px; }
.por-mes-valor { font: 400 32px/1.1 var(--serifa); }
.por-mes-rotulo { color: var(--ink2); }
.sem-contas { color: var(--muted); }
.sub { display: block; font-weight: 400; font-size: 13px; color: var(--muted); }

/* «Remover» (as ações que apagam: à esquerda e discreto, a confirmação no sítio, e «Desfazer») */
.btn-texto--discreto { color: var(--muted); font-weight: 600; }
.coluna__acoes { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.confirmar-remover { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding: 8px 8px 8px 12px; border-radius: 14px; background: var(--bad-bg); color: var(--bad-ink); font-weight: 600; }
.confirmar-remover > span { flex: 1; }
.btn-mau { min-height: 36px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--bad-ink); color: var(--bad-bg); font-weight: 600; cursor: pointer; }
.btn-calmo { min-height: 36px; padding: 0 8px; border: 0; background: none; color: var(--ink); font-weight: 600; cursor: pointer; }
/* «Dados da casa», na página da casa */
.dados-casa { display: flex; flex-direction: column; gap: 8px; }
.linha-dado { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.lista > .linha-dado:first-child, .lista > .editor-dado:first-child { border-top: 0; }
.linha-dado:hover { background: var(--card-alt); }
.linha-dado__nome { font-size: 14px; color: var(--muted); }
.linha-dado__valor { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.linha-dado__valor strong { font-weight: 600; }
.linha-dado__valor .pastilha { margin-top: 2px; }
.linha-dado__acao { color: var(--accent); font-weight: 600; font-size: 14px; }
.editor-dado { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-top: 1px solid var(--line); background: var(--card-alt); }
.editor-dado h4 { font: 600 16px/1.3 var(--letra); }
.editor-dado .campo__caixa { background: var(--card); }
.editor-dado__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.editor-dado .erro { margin-top: -4px; }

/* ---------- a página de cada casa (2026-10-17, a B do mock movimento/web-casa.html) ---------- */
.casa { padding-block: 30px 56px; }
.casa-chegou { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 14px; padding: 8px 16px; border-radius: 14px; background: var(--bom-bg); color: var(--bom-ink); font-size: 14px; font-weight: 600; }
.casa-chegou .btn-texto { min-height: 32px; font-size: 14px; color: inherit; text-decoration: underline; }
.casa__grelha { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.casa__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.casa__col > .grupo { margin-top: 10px; }
.casa__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; margin-bottom: -10px; }
.casa__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 14px; color: var(--ink2); }
.casa__meta .num { font-weight: 600; color: var(--ink); }
.casa__meta span:empty { display: none; }
.casa__cab > .pequeno { flex-basis: 100%; order: 3; margin-top: 2px; }
/* o cimo da casa (Céu, fase 4): «‹» num círculo e o nome curto numa pílula, os dois em branco a 60%; por baixo, o custo
   por mês na serifa grande */
.topo__casa { display: none; position: relative; z-index: 2; width: min(1120px, 100% - 96px); margin: 12px auto 0; }
body[data-pagina="casa"] .topo__casa:not([hidden]) { display: block; }
.topo__casa-linha { display: flex; align-items: center; gap: 10px; }
.topo__voltar { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--card) 60%, transparent); color: var(--ink); }
.topo__voltar:hover { background: color-mix(in srgb, var(--card) 85%, transparent); }
.topo__nome { display: flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: color-mix(in srgb, var(--card) 60%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 500 14px var(--letra); color: var(--ink); }
.topo__sobre { margin-top: 18px; font-size: 14px; line-height: 20px; color: var(--ink2); }
.topo__total { margin-top: 4px; font: 400 64px/1 var(--serifa); letter-spacing: -0.01em; color: var(--ink); }
.topo__sobre--por { margin-top: 8px; }
/* a fotografia no cimo da coluna da direita da página da casa (2026-10-19; estava em «Dados da casa») */
.casa-foto .foto { height: 220px; border-radius: 22px; }
.casa-dois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cartao-num { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 18px; border: 0; border-radius: 22px; background: var(--card); color: inherit; text-align: left; font: inherit; }
button.cartao-num { cursor: pointer; }
button.cartao-num:hover { background: var(--card-alt); }
.cartao-num__rot { font-size: 13px; color: var(--muted); }
.cartao-num__valor { font: 400 32px/1.1 var(--serifa); }
.cartao-num__etq { font: 500 13px/18px var(--letra); }
.cartao-num__etq--bom { color: var(--sem-bom); }
.cartao-num__etq--aviso { color: var(--warn-ink); }
.cartao-num__etq--mau { color: var(--sem-mau); }
/* com o rendimento dito, a taxa abre «O crédito» e «Mudar o rendimento» abre a pergunta: dois botões no mesmo cartão */
.cartao-num--taxa { gap: 0; padding: 0; }
.cartao-num__abrir { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 16px 18px 6px; border: 0; border-radius: 22px 22px 0 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cartao-num--taxa:has(.cartao-num__abrir:hover) { background: var(--card-alt); }
.cartao-num--taxa > .btn-texto { min-height: 44px; margin: 0 18px 6px; }
.custo--partes { gap: 14px; }
.custo__topo { display: flex; align-items: center; gap: 12px; }
.custo__topo .barra3 { flex: 1; }
.custo__topo .info { position: static; flex: none; }
/* protótipo V235: dois toques no mesmo cartão (o cimo abre «Antes de dizer que sim»; «A seguir» desce até ao caminho) */
.antes-cartao { display: flex; flex-direction: column; border-radius: 22px; background: var(--card); overflow: hidden; }
.antes-cartao__abrir { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 0; color: inherit; text-decoration: none; }
.antes-cartao__abrir:hover, .antes-cartao__seguir:hover { background: var(--card-alt); }
.antes-cartao__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.antes-cartao__tit { font: 600 16px/22px var(--letra); }
.antes-cartao__n { font-size: 13px; color: var(--muted); }
.antes-barras { display: flex; align-items: flex-end; gap: 6px; height: 54px; padding-bottom: 6px; border-bottom: 3px solid var(--relva); }
.antes-barras i { flex: 1; height: 10px; border-radius: 6px 6px 0 0; background: var(--passo-por-fazer); }
.antes-barras i.feito--1 { background: var(--passo1); }
.antes-barras i.feito--2 { background: var(--passo2); }
.antes-barras i.feito--3 { background: var(--passo3); }
.antes-cartao__seguir { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 12px 18px 16px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.antes-cartao__seguir b { display: block; font: 600 15px/20px var(--letra); }
.antes-cartao__seguir small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.antes-cartao__seta { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
/* o «A seguir» leva ao caminho até às chaves, na coluna da direita (a seta aponta para lá; numa coluna só, para baixo) */
#c-caminho .grupo__cab { scroll-margin-top: 24px; }
/* protótipo V234 (design_handoff_ceu/casa-v234.md): os atalhos em 2 × 2, cada um com o ícone de 20 numa caixa de 36 da
   cor do atalho e «›», e por baixo o nome, o número e o detalhe */
.atalhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.atalho { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border-radius: 20px; background: var(--card); color: inherit; text-decoration: none; }
.atalho:hover { background: var(--card-alt); }
.atalho__cima { display: flex; justify-content: space-between; align-items: flex-start; }
.atalho__icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 12px; color: var(--atalho-traco); }
.atalho__icone--credito { background: var(--atalho-credito); }
.atalho__icone--umavez { background: var(--atalho-umavez); }
.atalho__icone--quando { background: var(--atalho-quando); }
.atalho__icone--confianca { background: var(--losango); }
.atalho__seta { flex: none; color: var(--faint); }
.atalho__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.atalho__nome { font: 500 13px/18px var(--letra); color: var(--ink2); }
.atalho__num { font: 600 20px/26px var(--letra); font-variant-numeric: tabular-nums; color: var(--ink); }
.atalho__det { font: 400 12px/16px var(--letra); color: var(--muted); }
/* protótipo V235 (design_handoff_ceu/casa-v234.md, 4): «Viver nesta casa» em 2 × 2, como os atalhos mas mais calmos */
.viver { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.viver__bloco { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 0; border-radius: 20px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.viver__bloco:hover { background: var(--card-alt); }
.viver__cima { display: flex; align-items: center; gap: 8px; }
.viver__cima svg { flex: none; }
.viver__bloco--cuidar svg { color: var(--viver-cuidar); }
.viver__bloco--idade svg { color: var(--viver-idade); }
.viver__bloco--energia svg { color: var(--viver-energia); }
.viver__bloco--caminho svg { color: var(--viver-caminho); }
.viver__nome { flex: 1; min-width: 0; font: 500 13px/18px var(--letra); color: var(--ink2); }
.viver__bloco .viver__seta { align-self: flex-start; color: var(--faint); }
.viver__baixo { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.viver__valor { font: 600 20px/26px var(--letra); font-variant-numeric: tabular-nums; color: var(--ink); }
.viver__valor--duvida { font: 400 15px/26px var(--letra); color: var(--muted); }
.viver__sub { font: 400 12px/16px var(--letra); color: var(--muted); }
/* protótipo V235 (5): o caminho até às chaves numa linha do tempo, num cartão. Um traço de 2 liga os círculos (do passo 1
   ao 2, na cor do acento); o passo 2 num painel; os passos 3 a 6 com o número (V242), o nome, o tempo curto e «›» */
.caminho { padding: 18px 16px 10px; border-radius: 22px; background: var(--card); }
.caminho__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 12px; }
.caminho__total { font: 400 26px/1 var(--serifa); color: var(--ink); }
.caminho__de { font-size: 12px; line-height: 16px; color: var(--muted); text-align: right; }
.caminho__passos { position: relative; }
.caminho__passos::before, .caminho__passos::after { content: ""; position: absolute; left: 13px; top: 14px; width: 2px; }
.caminho__passos::before { bottom: 22px; background: var(--line); }
.caminho__passos::after { height: 44px; background: var(--accent); }
.passo-linha { position: relative; z-index: 1; }
.passo-linha--feito { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.passo-linha--feito .passo-linha__tit { font: 500 15px/20px var(--letra); color: var(--muted); }
.passo-linha--agora { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 0 12px; margin: 4px 0; }
.passo-linha--agora .circ { margin-top: 12px; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 4px var(--accent-tint); }
.passo-linha__painel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 12px 14px; border-radius: 16px; background: var(--caminho-painel); }
.passo-linha__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; }
.passo-linha__painel .passo-linha__tit { font: 600 16px/22px var(--letra); }
.passo-linha__tempo { font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }
.passo-linha__texto { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink2); }
button.passo-linha--falta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 0; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
/* ao passar o rato, o nome sublinhado (um fundo tapava o traço da linha do tempo) */
button.passo-linha--falta:hover .passo-linha__tit { text-decoration: underline; text-underline-offset: 3px; }
button.passo-linha--falta > svg { flex: none; color: var(--faint); }
.passo-linha--falta .passo-linha__tit { flex: 1; min-width: 0; font: 500 15px/20px var(--letra); }
.passo-linha--falta .passo-linha__tempo { font-size: 13px; line-height: 18px; }
/* V242: o número num círculo mais calmo do que o do passo 2 (com um ponto, a Sílvia achou que eram partes do passo 2); o
   fundo do cartão tapa o traço da linha do tempo; o leitor de ecrã lê só o nome */
.passo-linha__ponto { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card);
  box-shadow: inset 0 0 0 2px var(--caminho-ponto); color: var(--muted); font: 600 14px/1 var(--letra); }
/* o que só um leitor de ecrã ouve (os tempos por extenso) */
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.casa__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.casa__pe > div { flex: 1; }
.casa-nota { padding-inline: 4px; font-size: 13px; color: var(--muted); }
/* o cartão do custo: o total a 64, as três partes em blocos e os números que abrem a explicação */
.custo { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 22px; background: var(--card); box-shadow: var(--sombra-custo); }
.custo__sobre { font-size: 15px; color: var(--ink2); }
.custo__linha { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.custo__num { font: 400 64px/1 var(--serifa); letter-spacing: -0.01em; color: var(--accent); }
.custo__por { font-size: 17px; color: var(--muted); }
.custo .pastilha { margin-top: 8px; }
.barra3 { display: flex; gap: 4px; height: 26px; }
.barra3 span, .barra2 span { min-width: 4px; border-radius: 8px; }
.b-credito, .leg-credito { background: var(--accent); }
.b-casa, .leg-casa { background: var(--casa); }
.b-imp, .leg-imp { background: var(--imp); }
.b-falta { background: repeating-linear-gradient(135deg, var(--bad-ink) 0 3px, transparent 3px 8px); box-shadow: inset 0 0 0 1.5px var(--bad-ink); }
.legenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.legenda__nome { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); }
.legenda__nome i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.legenda__valor { font: 600 22px/1.25 var(--letra); font-variant-numeric: tabular-nums; }
.custo .tres .num { font-size: 20px; }
.custo__isencao { padding: 10px 12px; border-radius: 12px; background: var(--accent-tint); color: var(--accent-strong); font-size: 14px; }
.custo__limpeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 12px; border-radius: 12px; background: var(--tint); font-size: 13px; }
.custo__limpeza .btn-texto { padding: 0 12px; font-size: 13px; color: var(--ink); text-decoration: underline; }
.custo__pe { display: flex; justify-content: flex-end; margin-block: -8px -10px; }
/* as linhas de «O dinheiro» e de «Viver nesta casa» (as que ainda não abrem nada ficam sem a seta) */
.linha-casa { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; gap: 12px; align-items: center; width: 100%; min-height: 60px; padding: 12px 14px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
div.linha-casa { grid-template-columns: 36px minmax(0, 1fr) auto; }
button.linha-casa { cursor: pointer; }
button.linha-casa:hover { background: var(--card-alt); }
button.linha-casa > svg { color: var(--faint); }
.linha-casa__icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); }
.linha-casa__tit { display: block; font-size: 16px; font-weight: 600; }
.linha-casa__sub { display: block; font-size: 13px; color: var(--muted); }
.linha-casa__valor { font: 600 17px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-casa__valor--texto { font-weight: 400; font-size: 16px; }
.linha-casa__valor--duvida { font-weight: 400; font-size: 15px; color: var(--muted); }
.pontos { display: inline-flex; gap: 3px; margin-right: 8px; vertical-align: 1px; }
.pontos i { width: 8px; height: 8px; border: 1.5px solid var(--line); border-radius: 4px; }
.pontos i.cheio { border-color: var(--accent); background: var(--accent); }
/* o caminho até às chaves: o passo feito, o de agora (aberto, com a ação) e os que abrem a explicação */
.passo-casa { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%; padding: 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
button.passo-casa { grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; padding: 14px 14px 14px 16px; cursor: pointer; }
button.passo-casa:hover { background: var(--card-alt); }
button.passo-casa > svg { color: var(--faint); }
.passo-casa__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.passo-casa__tit { font-size: 16px; font-weight: 600; }
.passo-casa__texto { font-size: 14px; color: var(--ink2); }
.passo-casa__forte { font-size: 14px; font-weight: 600; }
.passo-casa .convite { align-items: stretch; width: 100%; margin-top: 6px; }
.circ { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; background: var(--tint); color: var(--ink2); font: 600 14px/1 var(--letra); }
.circ--feito { background: var(--accent); color: var(--on-accent); }
.circ--agora { background: var(--accent-tint); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.tempo { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-strong); font-size: 13px; font-weight: 600; }
/* as explicações (o ⓘ, os números do cartão e os passos 3 a 6), numa janela */
.folha { display: flex; flex-direction: column; gap: 16px; }
.folha-parte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.folha-parte h3 { font: 600 17px/1.3 var(--letra); }
.folha > .btn { align-self: flex-start; text-decoration: none; }
.folha__grande { font-size: 17px; }
.folha__texto { font-size: 14px; color: var(--ink2); }
.folha__fontes { font-size: 13px; color: var(--muted); }
/* «O custo mensal, linha a linha» (LinhaALinha): cada linha com o quadrado da cor, o nome e a etiqueta, o que é, o valor
   e a seta, que abre o cálculo por baixo; a limpeza («não incluída») e o total, por baixo de uma linha grossa */
.linha-custo { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 14px 14px 14px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; }
button.linha-custo { cursor: pointer; }
button.linha-custo:hover:not(:disabled) { background: var(--card-alt); }
button.linha-custo:disabled { cursor: default; opacity: 1; }
.linha-custo__texto { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.linha-custo__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.linha-custo__cab b { font-weight: 600; }
.linha-custo__cor { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.linha-custo__sub { font-size: 13px; color: var(--muted); }
.linha-custo__sub--boa { color: var(--accent-strong); font-weight: 600; }
.linha-custo__valor { font: 600 18px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha-custo__seta { flex: none; color: var(--faint); transform: rotate(90deg); transition: transform .2s ease-out; }
.linha-custo[aria-expanded="true"] .linha-custo__seta { transform: rotate(-90deg); }
.linha-custo__como { padding: 0 16px 14px 44px; font-size: 14px; color: var(--ink2); }
.linha-custo--limpeza .linha-custo__texto > b { font-size: 16px; font-weight: 600; }
.linha-custo--fora .linha-custo__texto > b { color: var(--ink2); }
.linha-custo__fora { font-size: 14px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.linha-custo__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px; border-top: 2px solid var(--ink); font-size: 16px; }
.linha-custo__total > .linha-custo__valor { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { .linha-custo__seta { transition: none; } }
/* os termos que se tocam (TextoComTermos): na cor do texto, com o sublinhado a pontos azul; a folha de um termo, com o
   que é por baixo do nome e os números de agora numa caixa azul-clara (FolhaDoTermo) */
button.termo { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline dotted var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
button.termo:hover { color: var(--accent); }
.folha__sub { margin-top: -8px; font-size: 15px; color: var(--muted); }
.folha__aqui { width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--accent-tint); color: var(--accent-strong); font-size: 15px; font-weight: 600; }
.entrada-caixa { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px; border-radius: 14px; background: var(--tint); }
.entrada-caixa > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.entrada-caixa p { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink2); }
.entrada-caixa p b { font: 600 16px/1.3 var(--letra); color: var(--ink); white-space: nowrap; }
.dialogo:has(#d-folha:not([hidden])) { width: min(600px, 100%); }
/* «O crédito» e «Linha a linha», por baixo da casa */
.casa-sub { padding-block: 26px 56px; }
.casa-sub--estreita { width: min(720px, 100% - 96px); }
.sub-cab { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; }
.sub-cab h1 { font: 400 42px/1.05 var(--serifa); }
.faixa-credito { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; padding: 18px 22px; border-radius: 22px; background: var(--accent-tint); }
.faixa-credito b { display: block; font: 400 30px/1.15 var(--serifa); color: var(--accent-strong); }
.faixa-credito span { font-size: 13px; color: var(--ink2); }
.sub-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sub-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.bloco { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; background: var(--card); }
.bloco h2 { font: 600 19px/1.3 var(--letra); }
.bloco:has(> .info) h2 { padding-right: 40px; }
.bloco > .btn, .bloco > .btn-texto, .bloco > .etiqueta, .bloco > .pastilha { align-self: flex-start; }
.bloco > .pastilha { margin-top: -4px; }
.etiqueta--botao { border: 0; cursor: pointer; font-family: inherit; }
.etiqueta--botao.etiqueta--est { border: 1.5px dashed var(--faint); }
.etiqueta--botao:hover { background: var(--sec-ativo); }
.mudadas { display: flex; flex-direction: column; align-items: flex-start; }
.bloco__fim { align-self: stretch; padding-top: 12px; border-top: 1px solid var(--line); }
/* «O meu crédito, explicado» (ExplicarOCredito.swift): um cartão por passo; o 5 é um cartão do custo */
#ex-conteudo, #ca-conteudo { display: flex; flex-direction: column; gap: 20px; }
.sub-cab > .texto2 { margin-top: 4px; }
.passo-ex { display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 22px; background: var(--card); scroll-margin-top: 16px; }
.passo-ex--custo { box-shadow: var(--sombra-custo); }
.passo-ex h2 { font: 600 20px/1.3 var(--letra); letter-spacing: -0.01em; }
.passo-ex > .texto2, .passo-ex .folha__pontos { font-size: 15px; }
.passo-ex__cab { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.passo-ex__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--letra); }
.passo-ex__destaque { font-size: 17px; color: var(--ink); }
.passo-ex__forte { font-size: 15px; font-weight: 600; color: var(--ink); }
.passo-ex__conclusao { padding: 12px 14px; border-radius: 16px; background: var(--accent-tint); color: var(--accent-strong); font-size: 16px; font-weight: 600; }
.passo-ex__soma { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 14px 12px; border-radius: 14px; background: var(--tint); }
.passo-ex__parcela { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; color: var(--muted); }
.passo-ex__parcela b { font: 400 28px/1.15 var(--serifa); color: var(--ink); }
.passo-ex__parcela--tan b { color: var(--accent); }
.passo-ex__op { font: 600 22px/1 var(--letra); color: var(--muted); }
.passo-ex__legenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.passo-ex__tres { display: flex; gap: 8px; }
.passo-ex__tres > div { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 16px; background: var(--tint); font-size: 12px; color: var(--muted); text-align: center; }
.passo-ex__tres b { font: 600 20px/1.2 var(--letra); color: var(--ink); font-variant-numeric: tabular-nums; }
.passo-ex__tres .passo-ex__hoje { background: var(--accent-tint); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-strong); }
.passo-ex__tres .passo-ex__hoje b { color: var(--accent); }
.passo-ex--como h2 { font-size: 17px; }
.pares { display: flex; flex-direction: column; }
.par { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-top: 1px solid var(--line); font-size: 15px; }
.pares .par:first-child { border-top: 0; }
.par span { color: var(--ink2); }
.par b { text-align: right; }
.caixa-mudar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card-alt); }
.caixa-mudar > span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.caixa-mudar b { font: 600 21px/1.2 var(--letra); font-variant-numeric: tabular-nums; color: var(--ink); }
.barra2 { display: flex; gap: 4px; height: 20px; }
/* a barra de «A entrada» (AEntrada.barra): as partes em fração da escala, a marca do mínimo e o valor por baixo */
.barra-entrada { position: relative; padding-top: 6px; }
.barra-entrada__faixa { display: flex; height: 28px; overflow: hidden; border-radius: 8px; background: var(--tint); }
.barra-entrada__faixa span { flex: none; }
.barra-entrada__faixa .b-imp { box-shadow: inset 2px 0 0 var(--card); }
.barra-entrada__faixa .b-falta { border-radius: 0; }
.barra-entrada__marca { position: absolute; top: 0; width: 2px; height: 34px; margin-left: -1px; background: var(--ink); }
.barra-entrada__rotulos { position: relative; height: 18px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.barra-entrada__min { position: absolute; top: 0; transform: translateX(-50%); color: var(--ink); white-space: nowrap; }
.barra-entrada__min--esq { transform: none; margin-left: -1px; }
.b-texto, .leg-texto { background: var(--ink); }
.caixa-taxa { display: flex; align-items: center; gap: 12px; }
.caixa-taxa button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 22px; background: var(--card-alt); color: var(--accent); font: 600 22px/1 var(--letra); cursor: pointer; }
.caixa-taxa button:hover { background: var(--tint); }
.caixa-taxa button:disabled { color: var(--faint); cursor: default; }
.caixa-taxa b { min-width: 96px; font: 400 32px/1 var(--serifa); text-align: center; }
.regua { position: relative; height: 12px; margin-top: 6px; border-radius: 6px; background: var(--tint); }
.regua span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.regua .r-verde { background: var(--sem-bom); }
.regua .r-amarelo { background: var(--warn-ink); }
.regua .r-vermelho { background: var(--bad-ink); }
.regua .r-tracejado { background: repeating-linear-gradient(90deg, var(--bad-ink) 0 6px, transparent 6px 10px); opacity: 0.55; }
.regua .r-limite { top: -5px; bottom: -5px; left: 75%; width: 2px; border-radius: 1px; background: var(--ink); }
.regua-legenda { position: relative; display: flex; justify-content: space-between; margin-top: 4px; font-size: 12px; color: var(--muted); }
.regua-legenda span:nth-child(2) { position: absolute; left: 75%; transform: translateX(-50%); white-space: nowrap; color: var(--ink2); font-weight: 600; }
.aviso-bloco { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bad-bg); color: var(--bad-ink); font-size: 14px; }
.aviso-bloco b { font-size: 15px; }
.depois { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--tint); }
.depois > span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.depois > span b { font-size: 15px; font-weight: 600; color: var(--ink); }
.depois > b { font: 600 21px/1.2 var(--letra); font-variant-numeric: tabular-nums; text-align: right; }
.depois > b small { display: block; font: 400 13px var(--letra); color: var(--muted); }
/* «Uma vez, para comprar»: as parcelas (a etiqueta «certo» ou «estimado», tracejada) e os interruptores */
.parcela { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--line); }
.parcela__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.parcela__nome { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.parcela__tit { font-size: 16px; font-weight: 600; }
.parcela__valor { font: 600 18px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.parcela__sub { font-size: 13px; color: var(--muted); }
.etiqueta--certo, .etiqueta--est { height: 20px; padding: 0 8px; border-radius: 10px; font-weight: 600; }
.etiqueta--certo { background: var(--accent-tint); color: var(--accent-strong); }
.etiqueta--est { padding: 0 6.5px; border: 1.5px dashed var(--faint); background: none; color: var(--ink2); }
.opcao { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; border-top: 1px solid var(--line); }
.opcao .caixa { font-size: 16px; font-weight: 600; }
.opcao__texto { font-size: 14px; color: var(--ink2); }
.opcao .btn-texto { min-height: 32px; }
/* «Antes de dizer que sim»: o «?» e o «!» num círculo com contorno; «Já está visto» */
.circ--falta { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-tint); }
.antes__pressa { padding-inline: 4px; font-size: 14px; color: var(--ink2); }
#ad-conteudo .grupo__cab { min-height: 32px; }   /* as duas colunas começam à mesma altura (uma tem o ⓘ) */
/* «Quando sai o dinheiro»: pela ordem do tempo (até às chaves, os meses, os anos), em duas colunas ou numa só */
.quando-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "chaves meses" "anos meses"; gap: 24px; align-items: start; }
.quando-chaves { grid-area: chaves; }
.quando-meses { grid-area: meses; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.quando-anos { grid-area: anos; position: relative; }
.quando-anos h2 { padding-right: 44px; }
.custo__num--medio { font-size: 44px; }
.sinal { display: flex; flex-direction: column; gap: 8px; }
.sinal__nome { font-size: 16px; font-weight: 600; }
.segmentado { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--tint); }
.segmento { min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--ink2); font: 600 15px/1 var(--letra); cursor: pointer; }
.segmento:hover { background: var(--card-alt); }
.segmento[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--sombra); }
.momentos { display: flex; flex-direction: column; }
.momento { display: flex; flex-direction: column; gap: 2px; padding-block: 12px; border-top: 1px solid var(--line); }
.momentos .momento:first-child { border-top: 0; }
.momento__quando { font-size: 13px; font-weight: 600; color: var(--muted); }
.momento__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 600; }
.momento__linha b { font: 600 18px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grafico__barras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 136px; border-bottom: 1px solid var(--ink); }
.grafico__mes { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; height: 100%; }
.barra-base { border-radius: 6px 6px 0 0; background: var(--accent); }
.barra-base--reta { border-radius: 0; }
.barra-imi { border-radius: 6px 6px 0 0; background: var(--imp); }
.barra-seguro { border-radius: 6px 6px 0 0; background: repeating-linear-gradient(135deg, var(--rampa2) 0 3px, transparent 3px 6px); }
.grafico__letras { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-top: 6px; text-align: center; font-size: 12px; color: var(--ink2); }
.grafico__letras .forte { color: var(--ink); font-weight: 600; }
.grafico__legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink2); }
.grafico__legenda span { display: inline-flex; align-items: center; gap: 6px; }
.grafico__legenda i { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.leg-seguro { background: repeating-linear-gradient(135deg, var(--rampa2) 0 3px, transparent 3px 6px); }
.mes { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.mes__quando { font-weight: 600; }
.mes__valor { font: 600 18px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mes--depois { color: var(--muted); }
.ano { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; }
.ano > div { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.ano b { font: 600 17px/1.3 var(--letra); }
.ano__ponto { width: 12px; height: 12px; margin-top: 6px; border-radius: 6px; }
.ano__ponto--cheio { background: var(--accent); }
.ano__ponto--anel { box-shadow: inset 0 0 0 2px var(--accent); }
.ano__ponto--fim { background: var(--ink); }
.folha__pontos { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; font-size: 15px; color: var(--ink2); }
/* «Confiança nos números»: o cartão, a lista do que entra no mês e os papéis a pedir */
.confianca-grelha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "cartao lista" "pedir lista"; gap: 24px; align-items: start; }
.confianca-cartao { grid-area: cartao; }
.confianca-lista { grid-area: lista; }
.veredicto { display: flex; align-items: center; gap: 12px; padding-right: 40px; }
.pontos--grandes { gap: 5px; }
.pontos--grandes i { width: 14px; height: 14px; border-width: 2px; border-color: var(--est); border-radius: 7px; }
.veredicto__nome { font: 400 32px/1.1 var(--serifa); color: var(--accent); }
.b-est, .leg-est { background: repeating-linear-gradient(135deg, var(--est) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1.5px var(--est); }
.legenda__sub { display: block; font-size: 13px; color: var(--muted); }
.etiqueta--calc { height: auto; min-height: 20px; padding: 0 8px; border-radius: 10px; font-weight: 600; }
.conf-grupo { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 16px; border-top: 1px solid var(--line); }
.conf-grupo > .etiqueta { align-self: flex-start; }
.conf-linha__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 15px; }
.conf-linha__cab b { font: 600 18px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.conf-linha__sub { display: block; font-size: 13px; color: var(--muted); }
.pedir-vendedor { grid-area: pedir; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 22px; background: var(--accent-tint); color: var(--accent-strong); font-size: 15px; }
.pedir-vendedor h2 { padding-right: 40px; font: 600 17px/1.3 var(--letra); }
.pedir-vendedor .info { background: var(--card); }
/* «Viver nesta casa»: a faixa do custo, as escolhas, a escala das classes, as perguntas e as barras das folhas */
.faixa-do-custo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding: 12px 18px; border-radius: 18px; background: var(--accent-tint); color: var(--accent-strong); font-size: 14px; }
.faixa-do-custo__valor { display: flex; align-items: center; gap: 10px; }
.faixa-do-custo__valor b { font: 600 22px/1.2 var(--letra); font-variant-numeric: tabular-nums; }
.custo__com-info { padding-right: 40px; }
.custo__area { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.custo > .btn, .custo .editor-dado { align-self: flex-start; }
.custo .editor-dado { align-self: stretch; }
.escolhas__pergunta { font-size: 16px; font-weight: 600; }
.escolhas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.escolha, .modo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); text-align: left; color: var(--ink); }
.escolha { cursor: pointer; }
.escolha:hover { background: var(--card-alt); }
.escolha[aria-pressed="true"] { border: 2px solid var(--accent); padding: 13px; background: var(--accent-tint); color: var(--accent-strong); }
.escolha__nome { padding-right: 26px; font-size: 15px; font-weight: 600; }
.escolha__num { font: 600 20px/1.2 var(--letra); font-variant-numeric: tabular-nums; }
.escolha__sub { font-size: 13px; color: var(--muted); }
.escolha[aria-pressed="true"] .escolha__sub { color: var(--accent-strong); }
.escolha__visto { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 11px; background: var(--accent); color: var(--on-accent); }
/* o caminho para o trabalho: os três modos lado a lado (no ecrã estreito, um por baixo do outro), «Indicar onde
   trabalho» e, em «Os meus dados», o local; a janela «Onde trabalho ou estudo?» (FolhaDoTrabalho) */
.escolhas--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) { .escolhas--3 { grid-template-columns: minmax(0, 1fr); } }
.custo > .btn { align-self: flex-start; }
.indicar-trabalho { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.indicar-trabalho .btn { align-self: stretch; }
.trabalho-dado { align-items: flex-start; }
.trabalho-dado .btn-texto { min-height: 32px; }
.trabalho-modo { display: flex; flex-direction: column; gap: 8px; }
#d-trabalho .btn--pri:disabled { opacity: .45; cursor: default; }
#d-trabalho #t-ver { align-self: stretch; }
.trabalho-nota { margin-top: -6px; text-align: center; }
.trabalho-apagar { align-self: center; }
#t-sugestoes .sugestao { padding: 10px 16px; font-size: 15px; }
.bloco--info { position: relative; }
.bloco--info h2 { padding-right: 44px; }
.pergunta-tinta { padding: 12px 14px; border-radius: 16px; background: var(--tint); font-size: 15px; }
.escala { display: flex; flex-direction: column; gap: 6px; }
.escala__classes { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.escala__classes span { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 10px; background: var(--tint); color: var(--muted); font: 600 13px/1 var(--letra); }
.escala__classes .escala__esta { background: var(--accent); color: var(--on-accent); font-size: 15px; transform: scale(1.1); box-shadow: 0 4px 12px var(--sombra); }
.escala--sem .escala__classes span { background: none; box-shadow: inset 0 0 0 1.5px var(--est); }
.escala__pe { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.energia__origem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.barras { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.barras__linha { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 8px; align-items: center; font-size: 13px; }
.barras__nome { color: var(--ink2); }
.barras__fundo { display: block; height: 12px; }
.barras__barra { display: block; height: 100%; border-radius: 0 6px 6px 0; }
.barras__barra--acento { background: var(--accent); }
.barras__barra--rampa2 { background: var(--rampa2); }
.barras__barra--rampa3 { background: var(--rampa3); }
.barras__num { text-align: right; font-weight: 600; }
.folha__tabela { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.folha__linha { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.folha__linha > span { display: flex; flex-direction: column; font-size: 15px; }
.folha__valor { font: 600 17px/1.2 var(--letra); font-variant-numeric: tabular-nums; white-space: nowrap; }
.folha__subtitulo { font: 600 18px/1.3 var(--letra); scroll-margin-top: 16px; }
/* «Ao todo» (FolhaAoTodo): o total grande, a barra em quatro e cada parte */
.folha__numero { display: flex; flex-direction: column; gap: 2px; }
.folha__numero b { font: 400 48px/1.05 var(--serifa); color: var(--accent); }
.folha__itens { width: 100%; border: 1px solid var(--line); border-radius: 18px; }
.folha__item { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-top: 1px solid var(--line); }
.folha__item:first-child { border-top: 0; }
.folha__item-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.folha__item-nome { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.folha__item-nome i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.folha__media { font: 600 21px/1.2 var(--letra); color: var(--ink); }
.entrada-caixa > .btn { align-self: flex-start; margin-top: 4px; }
.btn--pequeno { min-height: 44px; margin-top: 4px; padding: 0 18px; font-size: 15px; }

/* ---------- Os meus dados ---------- */
.dados { padding-block: 34px 56px; }
.dados-cab { margin-bottom: 18px; }
.dados__grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__rot { font-size: 14px; font-weight: 600; color: var(--ink2); }
.campo__caixa { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-alt); }
.campo__caixa:focus-within { border-color: var(--accent); }
.campo__caixa input, .campo__caixa select { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font-size: 16px; outline: none; }
.campo__caixa input::placeholder { color: var(--exemplo); }
.campo__caixa .un { flex: none; color: var(--muted); font-size: 14px; }
.caixa { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; cursor: pointer; }
.caixa input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
.caixa:has(input:disabled) { color: var(--faint); cursor: default; }

/* ---------- as perguntas (passo 5): uma por página, como no iPhone ---------- */
.pergunta { padding-block: 30px 56px; }
.pergunta__caixa { display: flex; flex-direction: column; gap: 14px; width: min(640px, 100%); }
.pergunta__caixa > p:first-child { margin-bottom: -6px; }
.barra-passos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.barra-passos:empty { display: none; }
.barra-passos span { height: 8px; border-radius: 4px; background: var(--tint); }
.barra-passos span.feito { background: var(--accent); }
.pergunta h1 { font: 600 32px/1.15 var(--letra); letter-spacing: -0.025em; }
.pergunta__campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 6px; }
.campo__caixa--grande { height: 56px; border: 2px solid var(--line); border-radius: 16px; background: var(--card); }
.campo__caixa--grande:focus-within { border-color: var(--accent); }
.campo__caixa--grande input { font-size: 18px; }
.caixa--cartao { padding: 16px; border-radius: 16px; background: var(--card); }
.caixa--cartao strong { display: block; font-weight: 600; }
.sugestoes { display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--card); }
.sugestao { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font-size: 17px; cursor: pointer; }
.sugestoes > .sugestao:first-child { border-top: 0; }
.sugestao:hover { background: var(--card-alt); }
.sugestao b { font-weight: 600; }
.sugestao[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent-strong); font-weight: 600; }
.erro { color: var(--bad-ink); font-weight: 600; font-size: 14px; }
.pergunta__botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }

/* ---------- as respostas (passo 5): a do banco e a da renda ---------- */
.resposta { padding-block: 30px 56px; }
.resposta__tit { margin-bottom: 18px; font: 400 42px/1.05 var(--serifa); }
.resposta__grelha { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.resposta__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.resposta__col > .btn { align-self: flex-start; }
/* o cartão do preço: a paisagem pequena com a casa (Céu, fase 3), o preço e os três números (V193 e V196) */
.preco { overflow: hidden; border-radius: 24px; background: var(--card); box-shadow: var(--sombra-custo); }
.preco__corpo { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 12px; }
.toque { margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.toque:hover { background: var(--tint); }
.preco__toque { display: flex; flex-direction: column; align-self: flex-start; padding-right: 48px; }
.preco__rot { font-size: 15px; color: var(--ink2); }
.preco__valor { font: 400 60px/1 var(--serifa); letter-spacing: -0.01em; color: var(--accent); }
.preco__nao { font: 600 24px/1.2 var(--letra); }
.info { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 18px; background: var(--tint); color: var(--accent); cursor: pointer; }
.info:hover { background: var(--sec-ativo); }
.tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.tres .toque { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.tres .num { font: 600 22px/1.2 var(--letra); white-space: nowrap; }
.tres__rot { font-size: 13px; color: var(--ink2); }
.tres .pastilha { margin-top: 4px; }
.preco__zona { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.preco__zona-tit { font-weight: 600; font-size: 16px; }
.trava { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 22px; background: var(--opiniao-bg); color: var(--opiniao-ink); }
.trava h2 { font: 600 18px/1.3 var(--letra); }
.trava p { color: var(--opiniao-texto2); }
.trava .btn-texto { color: var(--opiniao-acao); }
.grupo { display: flex; flex-direction: column; gap: 8px; }
.grupo__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grupo__cab .info { position: static; width: 32px; height: 32px; }
.grupo > .btn { align-self: flex-start; }
.lista { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--card); }
.lista__linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; }
.lista > :first-child { border-top: 0; }
.lista__linha:hover { background: var(--card-alt); }
.lista__linha span:first-child { font-weight: 600; }
.lista__linha .num { font: 600 18px/1.2 var(--letra); }
.lista__mais { padding: 0 16px 6px; margin-top: -6px; }
.ate35 { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 22px; background: var(--accent-tint); color: var(--accent-strong); }
.ate35 h2 { font: 600 18px/1.3 var(--letra); }
.ate35 h3 { font: 600 17px/1.3 var(--letra); }
.ate35__parte { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ate35__parte + .ate35__parte { padding-top: 12px; border-top: 1px solid var(--sec-ativo); }
.ate35 .btn--sec { background: var(--card); }
.quem summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 15px; }
.quem p { margin-top: 6px; color: var(--ink2); }
.a-seguir { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; border-radius: 22px; background: var(--card); }
.a-seguir h2 { font: 600 18px/1.3 var(--letra); }
.a-seguir .btn { margin-top: 8px; }
.cartao-botao { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 14px 14px 16px; border: 0; border-radius: 22px; background: var(--card); text-align: left; cursor: pointer; }
.cartao-botao:hover { background: var(--card-alt); }
.cartao-botao > span { display: flex; flex: 1; flex-direction: column; gap: 2px; }
.cartao-botao strong { font-size: 17px; font-weight: 600; }
.cartao-botao > svg { flex: none; color: var(--faint); }
/* o convite ao especialista, nas respostas: a frase e a pergunta */
.convite { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.convite p { font-size: 14px; color: var(--ink2); }
/* o pedido ao especialista (a proposta C da app) */
.especialista { padding-block: 26px 56px; }
.especialista > p:first-child { margin-bottom: 4px; }
.especialista__grelha { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.quem__cab { display: flex; align-items: center; gap: 12px; }
.quem__cab > span:last-child { display: flex; flex-direction: column; }
.quem__cab strong { font-size: 17px; }
.quem__icone { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: var(--accent-tint); color: var(--accent); }
.quem__estado { display: flex; align-items: center; gap: 8px; color: var(--ink2); font-size: 14px; }
.ponto-estado { width: 8px; height: 8px; border-radius: 4px; background: var(--faint); }
.ponto-estado.agora { background: var(--sem-bom); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sem-bom) 22%, transparent); }
.selos { display: flex; flex-wrap: wrap; gap: 8px; }
.selo { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 4px 10px 4px 8px; border-radius: 14px; background: var(--tint); color: var(--ink2); font-size: 13px; font-weight: 600; }
.selo::before { content: "✓"; color: var(--sem-bom); font-weight: 600; }
.selo--cadeado::before { content: none; }
.selo--cadeado svg { color: var(--accent); }
.balao-caixa { display: flex; flex-direction: column; gap: 12px; padding: 14px 12px 12px; border-radius: 22px; background: var(--tint); }
.balao-caixa h2 { display: flex; align-items: center; gap: 10px; padding: 0 4px; font: 600 15px/1.3 var(--letra); }
.balao-caixa__icone { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 18px; background: var(--accent); color: var(--on-accent); }
.balao-caixa > .pequeno { padding: 0 4px; }
.balao { margin-left: 12px; padding: 10px 12px 4px; border-radius: 18px 18px 4px 18px; background: var(--card); box-shadow: 0 1px 3px var(--sombra); }
.balao__ola { padding-bottom: 6px; font-size: 15px; }
.linha-balao { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; font-size: 15px; cursor: pointer; }
.linha-balao > span:first-child { flex: 1; }
.linha-balao b { font-weight: 600; }
.linha-balao .x { flex: none; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 12px; background: var(--tint); color: var(--muted); font-size: 12px; font-weight: 600; }
.linha-balao[aria-pressed="false"] > span:first-child { color: var(--faint); text-decoration: line-through; }
.linha-balao[aria-pressed="false"] .x { background: var(--accent-tint); color: var(--accent); }
.especialista__enviar { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.especialista__enviar .btn { text-decoration: none; }
.abre { border-top: 1px solid var(--line); }
.lista > .abre:first-child { border-top: 0; }
.abre summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 0 16px; cursor: pointer; font-weight: 600; list-style: none; }
.abre summary::-webkit-details-marker { display: none; }
.abre summary::after { content: "+"; color: var(--accent); font-weight: 600; font-size: 18px; }
.abre[open] summary::after { content: "−"; }
.abre__corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 0 16px 14px; color: var(--ink2); }
.abre__corpo a { color: var(--accent); font-weight: 600; text-decoration: none; }
.porta-especialista { flex-direction: row; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }

/* «Como se chega a esta resposta», numa janela: os passos numerados */
.conta-passos { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.conta-passo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; scroll-margin-top: 16px; }
.conta-passo__n { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 14px; background: var(--accent); color: var(--on-accent); font: 600 14px/1 var(--letra); }
.conta-passo > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.conta-passo__nome { font-size: 13px; font-weight: 600; color: var(--muted); }
.conta-passo__tit { font: 600 20px/1.25 var(--letra); letter-spacing: -0.01em; }
.conta-passo p { color: var(--ink2); }
.conta-passo--aqui .conta-passo__tit { color: var(--accent); }
.conta-fontes { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.conta-fontes h3 { font: 600 16px/1.3 var(--letra); }
.dialogo:has(#d-como:not([hidden])) { width: min(680px, 100%); }
/* o aviso do que mudou, em baixo, com «Desfazer» */
/* o aviso de quem abre a página num telemóvel (2026-10-20): só num ecrã estreito, no fundo, por cima de tudo */
.so-computador { display: none; }
@media (max-width: 760px) {
  .so-computador { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 80; margin: 0; padding: 12px 16px;
    border-radius: 16px; background: var(--accent); color: var(--on-accent); font: 500 14px/20px var(--letra); box-shadow: 0 4px 16px var(--sombra); }
  body { padding-bottom: 104px; }
}
.aviso-rapido { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; align-items: center; gap: 16px; max-width: calc(100% - 32px); padding: 12px 14px 12px 18px; border-radius: 16px; background: var(--toast-bg); color: var(--toast-ink); box-shadow: 0 12px 32px var(--sombra); transform: translateX(-50%); }
.aviso-rapido .btn-texto { color: var(--toast-acao); min-height: 32px; }

/* ---------- as janelas ---------- */
.veu { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px 16px; background: var(--scrim); overflow: auto; }
.dialogo { position: relative; width: min(560px, 100%); padding: 26px; border-radius: 24px; background: var(--card); box-shadow: 0 24px 60px var(--sombra); }
.dialogo__fechar { position: absolute; top: 18px; right: 18px; z-index: 2; }
.dialogo__parte { display: flex; flex-direction: column; gap: 16px; }
.dialogo h2 { font: 600 22px/26px var(--letra); padding-right: 44px; }
.dialogo__acoes { display: flex; justify-content: flex-end; gap: 10px; }
.passos { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; counter-increment: passo; }
.passos li::before { content: counter(passo); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 15px; background: var(--accent-tint); color: var(--accent); font: 600 15px/1 var(--letra); }
.passos li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; min-width: 0; }
.favorito { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 12px; border: 2px dashed var(--tracejado); border-radius: 16px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 16px; cursor: grab; box-shadow: var(--sombra-custo); text-decoration: none; }
.favorito:hover { border-color: var(--accent); }
.favorito .pega { color: var(--faint); }
/* o ícone da app no botão da barra */
.favorito__icone { position: relative; flex: none; display: inline-block; width: 26px; height: 26px; border-radius: 7px; overflow: hidden; }
.favorito__icone svg { display: block; width: 100%; height: 100%; }
.qr-caixa { align-self: center; width: 232px; padding: 8px; border-radius: 14px; background: var(--qr-fundo); border: 1px solid var(--line); }
.qr-caixa canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.qr-espera { text-align: center; }
#iphone-sem, #iphone-codigo, #iphone-com { display: flex; flex-direction: column; gap: 14px; }
.confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- abaixo de 1000 px (a web é para o computador; aqui só não parte) ---------- */
/* ---------- o rodapé (2026-10-18, o mock movimento/web-rodape.html): de fora a fora, num fundo um pouco diferente do da
   página; o texto na largura do resto, o © à direita (por baixo, numa janela estreita) ---------- */
.rodape { margin-top: 56px; background: var(--card-alt); border-top: 1px solid var(--line); }
.rodape__dentro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px;
  padding-block: 24px 32px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.rodape__textos { display: grid; gap: 4px; flex: 1 1 28rem; min-width: 0; }
.rodape__onde { color: var(--ink2); font-weight: 600; }
.rodape__marca { color: var(--faint); }
/* a privacidade e o suporte do site, por cima do © (2026-10-21) */
.rodape__fim { display: grid; justify-items: end; gap: 6px; flex: none; }
.rodape__nav { display: flex; gap: 18px; }
.rodape__nav a { color: var(--ink2); font-weight: 600; }

@media (max-width: 1000px) {
  .cont, .topo__barra { width: calc(100% - 32px); }
  .rodape__fim { justify-items: start; }
  .topo__barra { flex-wrap: wrap; align-items: flex-start; }
  .inicio { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .colunas, .dados__grelha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casas-cab { flex-wrap: wrap; }
  .resposta__grelha, .especialista__grelha, .casa__grelha, .sub-grelha { grid-template-columns: minmax(0, 1fr); }
  .antes-cartao__seta svg { transform: rotate(90deg); }
  .quando-grelha { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "chaves" "meses" "anos"; }
  .confianca-grelha { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "cartao" "lista" "pedir"; }
  .casa-sub--estreita { width: calc(100% - 32px); }
}
@media (max-width: 700px) {
  .topo, body[data-pagina] .topo { height: auto; min-height: 220px; padding-bottom: 44px; }
  .marca__dir { flex-wrap: wrap; border-radius: 22px; }
  .colunas, .dados__grelha, .portas2 { grid-template-columns: minmax(0, 1fr); }
  .abertura__titulo { font-size: 52px; }
  .topo__total { font-size: 52px; }
  .preco__valor { font-size: 44px; }
  .tres, .legenda, .faixa-credito { grid-template-columns: minmax(0, 1fr); }
  .chegada__topo { grid-template-columns: minmax(0, 1fr) 36px; }
  .chegada .contas { grid-column: 1; text-align: left; }
  .coluna--fila { flex-direction: column; align-items: flex-start; }
  .coluna--fila .texto2 { text-align: left; }
  .porta-especialista { flex-direction: column; align-items: flex-start; }
}

/* ---------- a noite (Céu, fase 5): as regras que mudam de papel; ficam no fim para valerem sobre as de cima ---------- */
@media (prefers-color-scheme: dark) {
  /* à noite, a lua com a medida dela (as estrelas, as crateras e as janelas acesas vêm de --so-noite) e as nuvens quase
     transparentes; os separadores com a sombra preta; a folha da Abertura no fundo da noite; o «‹» e o nome em branco a 12% */
  .paisagem__astro { --d: var(--tam-lua); }
  .nuvem { opacity: calc(var(--o) * 0.13); }
  .marca__dir { box-shadow: 0 6px 24px rgb(0 0 0 / 0.35); }
  .abertura__folha { background: rgb(15 20 28 / 0.86); box-shadow: 0 10px 40px rgb(0 0 0 / 0.4); }
  .topo__voltar, .topo__nome { background: rgb(255 255 255 / 0.12); }
  .topo__voltar:hover { background: rgb(255 255 255 / 0.2); }
}