/* HABEMUS VERBA — identidade mínima: tipografia + 2 cores.
   Verde-nota profundo + lima radar. Mobile-first (referência: 375px). */

:root {
  --verde: #102138;
  --verde-escuro: #0A1524;
  --lima: #D8B570;
  --papel: #F8F5ED;
  --tinta: #1B2333;
  --tinta-suave: #6B7280;
  --linha: #E7E0CE;
  --branco: #FFFFFF;
  --vermelho: #B3402A;
  --serif: "Marcellus", "Iowan Old Style", Georgia, serif;
  --sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* A LETRA ERA PEQUENA DEMAIS. A Alex pôs o browser a 110% para
 * conseguir ler e disse que assim ficava melhor — sobretudo as
 * pequeninas. Como toda a tipografia está em `rem`, subir a raiz sobe o
 * produto inteiro na mesma proporção, no telemóvel e no computador.
 * O público é de 45 anos para cima; a letra pequena é uma barreira que
 * não tem de existir. */
html { -webkit-text-size-adjust: 100%; font-size: 110%; }
body {
  font-family: var(--sans);
  background: var(--papel);
  color: var(--tinta);
  min-height: 100dvh;
  line-height: 1.5;
}
.escondido { display: none !important; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--verde); }

#app { max-width: 640px; margin: 0 auto; }

/* ---------- Botões ---------- */
.btn {
  border: none; border-radius: 14px; font-size: 1rem; font-weight: 600;
  padding: 0.8rem 1.3rem; transition: transform 0.06s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primario { background: var(--verde); color: var(--lima); }
.btn-secundario { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.btn-grande { font-size: 1.15rem; padding: 1rem 2rem; width: 100%; }

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #24446E 0%, #1D3A5F 100%); color: var(--lima);
  padding: calc(0.6rem + env(safe-area-inset-top)) 0.8rem 0.6rem;
}
.topbar-logo {
  background: none; border: none; color: var(--lima);
  font-family: var(--serif); font-weight: 700; letter-spacing: 0.08em; font-size: 0.95rem;
}
.topbar-acoes { display: flex; gap: 0.2rem; }
.btn-icone {
  background: none; border: none; color: var(--lima); font-size: 1.25rem;
  padding: 0.3rem 0.55rem; border-radius: 10px; position: relative; min-width: 44px; min-height: 40px;
}
.btn-icone:active { background: rgba(216, 181, 112, 0.15); }
.conta {
  position: absolute; top: 0; right: 0; background: var(--lima); color: var(--verde);
  font-size: 0.8rem; font-weight: 700; border-radius: 999px; padding: 0 0.35em; line-height: 1.4;
}

/* ---------- E1 Landing ---------- */
.ecra-landing {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between;
  background: radial-gradient(circle at 50% 30%, #1D3A5F 0%, var(--verde) 55%, var(--verde-escuro) 100%);
  color: var(--branco); text-align: center;
  padding: 3.5rem 1.5rem 1rem;
}
.landing-miolo { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin: auto 0; }
.logo { user-select: none; -webkit-user-select: none; }
.logo-nome {
  font-family: var(--serif); font-size: 2.34rem; line-height: 1.02;
  letter-spacing: 0.06em; color: var(--branco); margin-top: 0.9rem;
}
.logo-descritor {
  color: var(--lima); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.8rem; margin-top: 0.6rem;
}
.headline { font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; margin-top: 0.5rem; }
.apoio { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }
.ecra-landing .btn-primario { background: var(--lima); color: var(--verde); margin-top: 0.8rem; max-width: 320px; }
.selo-demo { color: var(--lima); font-size: 0.8rem; letter-spacing: 0.05em; }
.landing-rodape { color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; padding: 1rem 0.5rem calc(0.8rem + env(safe-area-inset-bottom)); }

/* ---------- O BOTÃO TEM DE CABER NO PRIMEIRO ECRÃ ----------
 *
 * O ECRÃ DO TELEMÓVEL NÃO É O ECRÃ DO TELEMÓVEL. Um iPhone 13 tem 812 px
 * de altura, mas o Safari fica com a barra do endereço em cima e a barra
 * dos gestos em baixo: sobram ~664 px. Num iPhone SE sobram ~553 px. A
 * medição feita a 812 px dizia que o botão «Encontrar verba» acabava aos
 * 733 px e cabia — e no telemóvel da fundadora não cabia, porque esses
 * 733 px caíam 69 px abaixo do que ela via. Media-se o que sobra, nunca o
 * que o ecrã tem.
 *
 * COMO ISTO FUNCIONA. `--f` é a folga: 0 px no telemóvel mais pequeno que
 * nos interessa (553 px de área visível) e 259 px num alto (812). Cada
 * medida abaixo lê-se «o mínimo, mais a parte da folga que lhe toca». Num
 * ecrã alto dá exatamente o desenho de sempre com o −10% que a fundadora
 * pediu no radar, no nome e no número; num ecrã curto, os espaços e a
 * marca encolhem juntos até o botão caber. Nada salta depois de a página
 * abrir: `svh` é a altura com as barras à mostra, que é como a página
 * nasce.
 *
 * Medido nesta folha, botão inteiro dentro do primeiro ecrã em todos:
 *   553 px → acaba aos 537 (sobram 16)   ·   629 px → 588 (sobram 41)
 *   664 px → 612 (sobram 52)             ·   745 px → 666 (sobram 79)
 *   812 px → 712 (sobram 100), igual ao que já estava.
 *
 * Nota para quem vier a seguir: o `padding-top: 3.5rem` lá em cima nunca
 * chega a aplicar-se — `.ecra { padding: 1rem 1rem 3rem }` vem depois com
 * a mesma força e ganha. Deixou-se assim de propósito: repor os 3.5rem
 * empurrava o botão 44 px para baixo, que é exatamente o que se está a
 * corrigir aqui. */
@media (max-width: 899px) {
  .ecra-landing {
    --f: clamp(0px, calc(100svh - 553px), 259px);
    padding-top: calc(8px + var(--f) * 9.6 / 259);
  }
  .ecra-landing .landing-miolo { gap: calc(8px + var(--f) * 11.36 / 259); }
  .ecra-landing .logo-radar {
    width: calc(60px + var(--f) * 15 / 259);
    height: calc(60px + var(--f) * 15 / 259);
  }
  .ecra-landing .logo-nome {
    font-size: calc(30px + var(--f) * 7.1 / 259);
    margin-top: calc(4px + var(--f) * 11.8 / 259);
  }
  .ecra-landing .logo-descritor { margin-top: calc(4px + var(--f) * 6.6 / 259); }
  .ecra-landing .contador-home {
    margin-top: calc(4px + var(--f) * 8.3 / 259);
    padding-top: calc(2px + var(--f) * 5 / 259);
    padding-bottom: calc(5px + var(--f) * 8.2 / 259);
  }
  .ecra-landing .ct-linhas { font-size: calc(38px + var(--f) * 9.5 / 259); }
  .ecra-landing .ct-linhas small { margin-top: calc(5px + var(--f) * 8.2 / 259); }
  .ecra-landing .ct-paises { margin-top: calc(5px + var(--f) * 9 / 259); }
  .ecra-landing .ct-nota { font-size: calc(12px + var(--f) * 1.73 / 259); }
  .ecra-landing .ct-rodape { margin-top: calc(5px + var(--f) * 7.3 / 259); }
  .ecra-landing .headline {
    font-size: calc(19.5px + var(--f) * 4.26 / 259);
    margin-top: calc(3px + var(--f) * 5.8 / 259);
  }
  .ecra-landing .btn-primario { margin-top: calc(5px + var(--f) * 9 / 259); }
}
/* Do tablet para cima o contador respira como respirava. */
@media (min-width: 480px) and (max-width: 899px) {
  .ecra-landing .contador-home { margin-top: 1.2rem; padding-bottom: 1.7rem; }
}

/* radar animado */
/* −10% NO RADAR E NO NOME, e só neles.
 * (fundadora) «O botão tem que se fazer scroll e sabemos que pouca
 * gente faz scroll. Reduz-se 10% do radar e do habemus-verba. Deixa-se
 * o resto do tamanho que está e o botão já sobe.»
 * Ela tinha experimentado encolher o ecrã todo a 90% e os números do
 * contador ficavam pequenos demais — encolher só a marca sobe o botão
 * sem tocar no que se tem de ler. */
.logo-radar {
  width: 83px; height: 83px; margin: 0 auto; border-radius: 50%; position: relative;
  border: 2px solid rgba(216, 181, 112, 0.8);
  background:
    radial-gradient(circle, transparent 0 26px, rgba(216, 181, 112, 0.5) 26px 28px, transparent 28px 51px),
    radial-gradient(circle, rgba(216, 181, 112, 0.35) 0 2px, transparent 2px);
  overflow: hidden;
}
.logo-radar.grande { width: 117px; height: 117px; }
.radar-varrimento {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(216, 181, 112, 0.55), transparent 70deg);
  animation: varrer 2.6s linear infinite;
}
/* Vários ecos, cada um a acender quando o varrimento passa por cima —
 * o radar a encontrar coisas em sítios diferentes. */
.radar-ponto,
.logo-radar::before,
.logo-radar::after {
  content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lima); z-index: 2;
  animation: pulsar 2.6s ease infinite;
}
.radar-ponto { top: 22%; right: 24%; animation-delay: 0.25s; }
.logo-radar::before { bottom: 26%; right: 29%; animation-delay: 1.05s; }
.logo-radar::after { bottom: 33%; left: 21%; width: 6px; height: 6px; animation-delay: 1.8s; }
@keyframes varrer { to { transform: rotate(360deg); } }
@keyframes pulsar { 0% { opacity: 0.12; transform: scale(0.8); } 8% { opacity: 1; transform: scale(1.25); } 30% { opacity: 0.45; transform: scale(1); } 100% { opacity: 0.12; transform: scale(0.8); } }

/* ---------- Ecrãs interiores ---------- */
.ecra { padding: 1rem 1rem 3rem; }
.titulo-ecra { font-family: var(--serif); font-size: 1.5rem; margin: 0.4rem 0 0.2rem; }
.subtitulo-ecra { color: var(--tinta-suave); font-size: 0.9rem; margin-bottom: 1rem; }
.nota-rodape { color: var(--tinta-suave); font-size: 0.8rem; margin-top: 1.4rem; }

/* ---------- E2 Chat ---------- */
/* A CONVERSA NÃO SE ESTICA ATÉ AO FUNDO DO ECRÃ.
 *
 * (fundadora, pela terceira vez) «já disse várias vezes que eu não quero
 * ter de escrever no fim da linha. A parte da minha escrita tem de ser no
 * centro.»
 *
 * A causa era esta: `min-height: 100dvh` no ecrã e `flex: 1` na lista de
 * mensagens esticavam a conversa até ao fundo da janela, e empurravam os
 * botões de resposta e a caixa de escrever para a beira de baixo — com um
 * buraco branco no meio. A pessoa respondia à pergunta a um ecrã de
 * distância da pergunta.
 *
 * Agora a conversa tem a altura do que tem dentro: a resposta fica logo
 * por baixo do que o Radar acabou de dizer. */
/* ⛔ A CAIXA DE ESCREVER NÃO SE MEXE. SÉTIMA VEZ QUE ISTO É PEDIDO.
 *
 * (fundadora) «já pedi aqui umas sete vezes que não quero escrever
 * embaixo, e continuo a puxar tudo para baixo. É muito desconfortável.»
 *
 * Histórico dos erros, para ninguém repetir nenhum:
 *   1º a caixa no fim do fluxo — era preciso rolar até ao fundo;
 *   2º colada ao fundo da JANELA — «voltaste a pôr o lugar para escrever
 *      lá em baixo, super desconfortável»;
 *   3º (meu, hoje de manhã) a página a crescer com a conversa — a caixa
 *      passou a fugir para baixo a cada mensagem nova.
 *
 * A cura: a conversa tem altura máxima e rola POR DENTRO; a caixa vem
 * logo a seguir, sempre no mesmo sítio do ecrã, à volta do meio. O que
 * se mexe são as mensagens; o sítio onde se escreve, nunca. */
#ecra-chat { display: flex; flex-direction: column; padding-bottom: 0; }
.chat-progresso { font-size: 0.8rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }
.chat-progresso i { display: block; height: 3px; background: var(--verde); border-radius: 2px; width: 10%; transition: width 0.5s ease; }
.chat-mensagens {
  display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 0.8rem;
  max-height: 38svh; overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 900px) { .chat-mensagens { max-height: 44svh; } }
.balao { max-width: 85%; padding: 0.65rem 0.9rem; border-radius: 16px; font-size: 0.97rem; white-space: pre-wrap; }
.balao-ia { background: var(--branco); border: 1px solid var(--linha); border-bottom-left-radius: 4px; align-self: flex-start; }
/* Balão do utilizador: claro como o do radar (a distinção fica pelo
 * alinhamento à direita), com um rebordo dourado subtil e um creme
 * ligeiramente diferente do fundo. Nunca escuro. */
.balao-eu {
  background: #FFFDF6; color: var(--tinta);
  border: 1px solid rgba(216, 181, 112, 0.45);
  border-bottom-right-radius: 4px; align-self: flex-end;
}
.balao-escrever { color: var(--tinta-suave); font-style: italic; animation: aparecer 0.3s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
.balao { animation: aparecer 0.25s ease; }
.chat-sugestoes { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0; }
/* vazia não ocupa nada: sem isto, a margem afastava a caixa de escrever
   da conversa mesmo quando não há decisão nenhuma a tomar */
.chat-sugestoes:empty { display: none; }
/* AS RESPOSTAS NÃO GRITAM.
 * (fundadora) «a resposta não tem de estar escrita, a não ser que seja um
 * cinzento muito fininho.» A pergunta já diz as duas hipóteses; o botão
 * repetia-as a verde e a negrito e ficava a competir com a conversa.
 * Fio fino, letra cinzenta, sem negrito — continua a ser um botão, deixa
 * de ser um cartaz. */
.chip {
  background: var(--branco); border: 1px solid var(--linha); color: var(--tinta-suave);
  border-radius: 14px; padding: 0.7rem 1rem; font-size: 0.95rem; text-align: left; font-weight: 500;
}
.chip:active { background: var(--verde); color: var(--lima); }
/* A CAIXA DE ESCREVER VIVE NO TOPO, LOGO A SEGUIR AO CONVITE.
 *
 * Duas versões erradas antes desta. Primeiro estava no fim do fluxo, a
 * seguir aos cartões de exemplo: quem chegava tinha de rolar até ao
 * fundo para escrever, e ela aparecia meia cortada pela dobra. Depois
 * colei-a ao fundo da janela — e a Alex: "voltaste a pôr o lugar para
 * escrever lá em baixo, super desconfortável".
 *
 * A ordem certa é a que ela pediu, e é a ordem de quem escreve:
 * convite → linha para escrever → "ou inspira-te num destes" → exemplos.
 * Primeiro o sítio onde se escreve; os exemplos são a alternativa, não
 * o caminho principal. */
.chat-entrada {
  display: flex; gap: 0.5rem; align-items: flex-end;
  margin-bottom: 1.4rem;
}
.chat-convite { margin-bottom: 0.4rem; }
/* Auto-crescente (o JS ajusta a altura ao conteúdo): 1 linha ao início,
 * cresce até ~8 linhas (200px — espelhado em ALTURA_MAX_TEXTO no app.js)
 * e depois faz scroll interno. */
.chat-entrada textarea {
  flex: 1; resize: none; border: 1.5px solid var(--linha); border-radius: 14px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1rem; background: var(--branco);
  max-height: 200px; overflow-y: auto; line-height: 1.4;
  /* O BROWSER MEDE MELHOR DO QUE NÓS.
   * A caixa crescia por JS, a ler `scrollHeight` — e essa leitura vinha
   * corrompida por estar num flex: caixa VAZIA dizia 470px, uma linha
   * dizia 246, três linhas 582. Números sem sentido, e a caixa abria
   * gigante com o texto fora do sítio. `field-sizing: content` faz o
   * mesmo trabalho no motor do browser, sem medição nenhuma.
   * O `min-height` é o cinto de segurança: haja o que houver, nunca
   * fica mais baixa do que uma linha inteira com o seu respiro. */
  field-sizing: content;
  min-height: calc(1.4em + 1.4rem + 3px);
}
.chat-entrada textarea:focus { outline: none; border-color: var(--verde); }
.chat-entrada .btn { padding: 0.7rem 1rem; }

/* ---------- E3 Habemus ---------- */
.ecra-habemus { min-height: calc(100dvh - 60px); display: flex; align-items: center; justify-content: center; text-align: center; }
.habemus-procura { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; color: var(--tinta-suave); }
.habemus-procura .logo-radar { border-color: var(--verde); }
.habemus-procura .radar-varrimento { background: conic-gradient(from 0deg, rgba(16, 33, 56, 0.4), transparent 70deg); }
.habemus-procura .radar-ponto,
.habemus-procura .logo-radar::before,
.habemus-procura .logo-radar::after { background: var(--verde); }
.habemus-resultado { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; max-width: 420px; }
.habemus-emoji { font-size: 3rem; }
.habemus-titulo { font-family: var(--serif); font-size: 2.4rem; color: var(--verde); }
.habemus-frase { font-size: 1.05rem; }
.habemus-total { font-family: var(--serif); font-size: 1.5rem; color: var(--verde); }
.habemus-total strong { font-size: 1.9rem; }
.habemus-ressalva { color: var(--tinta-suave); font-size: 0.82rem; }
/* O que trava a candidatura não pode ter o peso de uma nota de rodapé:
 * é a frase que impede a pessoa de pagar 47 € por uma porta fechada. */
.habemus-travado {
  color: var(--tinta); font-size: 0.92rem; line-height: 1.5;
  border-left: 3px solid var(--lima); text-align: left;
  background: rgba(216, 181, 112, 0.10); border-radius: 0 6px 6px 0;
  padding: 0.7rem 0 0.7rem 0.9rem; margin: 0.9rem auto 0; max-width: 40ch;
}
.habemus-resultado .btn { margin-top: 0.6rem; }

/* ---------- E4 Cartões ---------- */
.cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 0.9rem 1rem; margin-bottom: 0.8rem;
}
.cartao-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.compat { display: flex; flex-direction: column; align-items: flex-start; }
.compat-pct { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--verde); line-height: 1; }
.compat-rotulo { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-suave); }
.badge { font-size: 0.8rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.badge-aberto { background: rgba(16, 33, 56, 0.1); color: var(--verde); }
.badge-proximo { background: rgba(179, 132, 42, 0.15); color: #8A6410; }
.cartao-nome { font-weight: 700; font-size: 1.02rem; margin: 0.45rem 0 0.1rem; }
.cartao-entidade { color: var(--tinta-suave); font-size: 0.85rem; }
.cartao-factos { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0.5rem 0; font-size: 0.88rem; }
.cartao-porque { font-size: 0.88rem; color: var(--tinta); border-left: 3px solid var(--lima); padding-left: 0.6rem; margin: 0.5rem 0; }
.cartao-acoes { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.6rem; }
.cartao-acoes .btn { flex: 1; padding: 0.55rem 0.8rem; font-size: 0.92rem; }
.btn-coracao {
  background: none; border: 1.5px solid var(--linha); border-radius: 12px;
  font-size: 1.15rem; padding: 0.4rem 0.7rem; color: var(--tinta-suave); min-width: 48px;
}
.btn-coracao.ativo { color: var(--vermelho); border-color: var(--vermelho); }

/* ---------- E5 Detalhe ---------- */
.detalhe-cabecalho { margin-bottom: 1rem; }
.detalhe-nome { font-family: var(--serif); font-size: 1.4rem; line-height: 1.25; }
.detalhe-entidade { color: var(--tinta-suave); margin: 0.2rem 0 0.6rem; }
/* AS CAIXAS DOS FACTOS MEDEM-SE PELO QUE TÊM DENTRO. (Alex, 06-09-2026:
   «não dá para ser flexível e dar mais espaço ao quadro que tem mais
   texto?»)

   Primeira tentativa: dar o dobro ao «Valor máximo», por ser o que
   costuma escrever mais. Costuma — não é sempre. Na Linha Impulsar
   Portugal quem escrevia mais era a COMPARTICIPAÇÃO, e ficou uma
   coluna estreita e altíssima ao lado de um «Prazo» com duas palavras
   e meio ecrã de vazio.

   Uma largura fixa decidida por mim adivinha o texto. O flex não
   adivinha: com flex-basis auto, cada caixa PARTE do tamanho do seu
   próprio conteúdo e só depois reparte o espaço que sobra. Quem tem
   mais texto fica maior sozinho, seja qual for o campo.

   E align-items:start acaba com a caixa vazia altíssima: cada uma tem
   a altura do que lá está dentro. */
.detalhe-factos {
  display: flex; flex-wrap: wrap; align-items: start; gap: 0.5rem;
}
.facto { flex: 1 1 auto; min-width: 8.5rem; max-width: 100%; }
.facto { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 0.5rem 0.7rem; }
.facto b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); font-weight: 600; }
.facto span { font-size: 0.86rem; }
.bloco { margin: 1.1rem 0; }
.bloco h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.bloco ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.93rem; }
.bloco-ia { border-left: 4px solid var(--lima); padding-left: 0.8rem; position: relative; }
.tag-ia {
  display: inline-block; background: var(--lima); color: var(--verde); font-size: 0.8rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 4px; padding: 0.1rem 0.4rem; margin-left: 0.4rem; vertical-align: middle;
}
.bloco-resumo { background: var(--branco); border: 1px solid var(--linha); border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.93rem; }
.bloco-fonte {
  background: var(--verde); color: var(--branco); border-radius: 14px; padding: 0.9rem 1rem;
}
.bloco-fonte h3 { color: var(--lima); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; }
.bloco-fonte p { font-size: 0.9rem; margin: 0.3rem 0; }
.bloco-fonte a {
  display: inline-block; background: var(--lima); color: var(--verde); font-weight: 700;
  border-radius: 10px; padding: 0.5rem 0.9rem; text-decoration: none; margin: 0.4rem 0; font-size: 0.92rem;
}
.fonte-verificado { color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; }
.nota-oficial-ia { color: var(--tinta-suave); font-size: 0.8rem; font-style: italic; margin: 1rem 0; }
.detalhe-acoes { display: flex; gap: 0.6rem; margin: 1rem 0 2rem; }
.detalhe-acoes .btn { flex: 1; }
.pedido-cofre { background: var(--branco); border: 1.5px dashed var(--verde); border-radius: 14px; padding: 0.8rem 1rem; margin: 1rem 0; }
.pedido-cofre p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.pedido-cofre .linha-input { display: flex; gap: 0.5rem; }
.pedido-cofre input { flex: 1; border: 1.5px solid var(--linha); border-radius: 10px; padding: 0.5rem 0.7rem; font-size: 0.95rem; }
.pedido-cofre small { color: var(--tinta-suave); }

/* ---------- E7 Cofre ---------- */
.cofre-campo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
}
.cofre-campo b { font-size: 0.85rem; font-weight: 600; }
.cofre-valor { text-align: right; font-size: 0.9rem; }
.cofre-vazio { color: var(--tinta-suave); }
.cofre-data { display: block; font-size: 0.8rem; color: var(--tinta-suave); }

/* ---------- Modal + toast ---------- */
.modal {
  position: fixed; inset: 0; background: rgba(10, 21, 36, 0.55); z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal-caixa {
  background: var(--papel); border-radius: 20px 20px 0 0; padding: 1.3rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 0.7rem;
}
.modal-caixa h3 { font-size: 1.05rem; }
.modal-texto { font-size: 0.9rem; color: var(--tinta-suave); }
.modal-caixa input {
  border: 1.5px solid var(--linha); border-radius: 12px; padding: 0.75rem 0.9rem; font-size: 1rem;
}
.modal-caixa input:focus { outline: none; border-color: var(--verde); }
.modal-botoes { display: flex; gap: 0.6rem; }
.modal-botoes .btn { flex: 1; }
.alerta-erro { color: var(--vermelho); font-size: 0.85rem; }
.toast {
  position: fixed; bottom: calc(1.2rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--verde); color: var(--lima); padding: 0.7rem 1.2rem; border-radius: 999px;
  font-size: 0.9rem; z-index: 60; max-width: 90%; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---------- Desktop: ver o bloco "A app como site" no fim do ficheiro ---------- */

/* ---------- Cofre com cara de cofre ---------- */
.btn-icone.btn-cofre { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; }
.icone-rotulo { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.habemus-cofre { margin-top: 1rem; font-size: 0.85rem; color: var(--tinta-suave); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.cofre-strip { display: flex; align-items: center; gap: 0.9rem; background: var(--verde); color: var(--branco); border: 1px solid rgba(216, 181, 112, 0.55); border-radius: 14px; padding: 0.95rem 1.05rem; margin: 1.3rem 0 0.4rem; cursor: pointer; }
.cofre-strip svg { flex: none; color: var(--lima); }
.cofre-strip-texto b { display: block; color: var(--lima); font-family: var(--serif); letter-spacing: 0.05em; font-size: 1.02rem; }
.cofre-strip-texto .desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); line-height: 1.35; }
.cofre-strip-abrir { margin-left: auto; color: var(--lima); font-weight: 600; white-space: nowrap; font-size: 0.9rem; }
.cofre-porta { width: 68px; height: 68px; margin: 0.5rem 0 0.7rem; border-radius: 18px; background: var(--verde); display: flex; align-items: center; justify-content: center; color: var(--lima); border: 1px solid rgba(216, 181, 112, 0.5); box-shadow: 0 4px 14px rgba(10, 21, 36, 0.25); }
.cofre-campo-titular { border-color: rgba(216, 181, 112, 0.9); background: rgba(216, 181, 112, 0.12); }

/* ---------- O radar (cabeçalho do chat) ---------- */
.chat-cabecalho { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--linha); }
.radar-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--verde); color: var(--lima);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.15rem; border: 1.5px solid var(--lima); flex: none;
}
.chat-cabecalho-texto b { display: block; font-family: var(--serif); font-size: 1rem; letter-spacing: 0.04em; line-height: 1.2; }
.chat-cabecalho-texto span { font-size: 0.8rem; color: var(--tinta-suave); }

/* ---------- Onboarding: campo livre em destaque + exemplos ---------- */
.chat-exemplos { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.exemplos-destaque { font-family: var(--serif); font-size: 1.05rem; color: var(--verde); }
.exemplos-ou { font-size: 0.8rem; color: var(--tinta-suave); }
.cartao-exemplo {
  display: flex; gap: 0.6rem; align-items: flex-start; text-align: left;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.65rem 0.85rem; font-size: 0.88rem; font-family: inherit; color: var(--tinta);
}
.cartao-exemplo:active { border-color: var(--verde); }
.cartao-exemplo b { display: block; font-size: 0.9rem; }
.cartao-exemplo span { color: var(--tinta-suave); }

/* ---------- Porta do Dossier de Verba ---------- */
.dossier {
  background: var(--verde); color: var(--branco); border: 1px solid rgba(216, 181, 112, 0.55);
  border-radius: 16px; padding: 1.1rem 1.1rem 1.2rem; margin: 1.4rem 0 0.6rem;
}
.dossier-titulo { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--lima); }
.dossier-sub { font-size: 0.9rem; margin: 0.5rem 0 0.4rem; color: rgba(255, 255, 255, 0.85); }
.dossier-lista { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.88rem; }
.dossier-lista b { color: var(--lima); font-weight: 600; }
.dossier-contagem {
  font-size: 0.9rem; margin: 0.8rem 0 0.2rem; padding: 0.6rem 0.8rem;
  background: rgba(216, 181, 112, 0.14); border-left: 3px solid var(--lima); border-radius: 0 10px 10px 0;
}
.dossier-contagem b { color: var(--lima); }
.btn-dossier { background: var(--lima); color: var(--verde); width: 100%; margin-top: 0.8rem; font-size: 1.05rem; padding: 0.9rem 1rem; }

/* ---------- Abrir o teu Cofre (modal) ---------- */
.tratamento-chips { display: flex; gap: 0.5rem; }
.chip-tratamento { flex: 1; text-align: center; padding: 0.55rem 0.6rem; font-size: 0.88rem; }
.chip-tratamento.ativo { background: var(--verde); color: var(--lima); }

/* ---------- Topbar com ➕ ---------- */
.btn-icone.btn-novo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; font-size: 1.05rem; }
@media (max-width: 400px) {
  .topbar-logo { font-size: 0.8rem; }
  .btn-icone { min-width: 40px; padding: 0.3rem 0.4rem; }
}

/* ==================================================================
   A app como site (ecrã largo). Abaixo de 700px nada muda:
   o mobile é a experiência principal e fica intocado.
   700–899px = transição; ≥900px = site a sério.
   ================================================================== */

/* ---------- ≥700px: sai a moldura de telemóvel, entra a página ---------- */
@media (min-width: 700px) {
  /* o #app deixa de ser um "ecrã de telemóvel": cada ecrã gere a sua largura */
  #app { max-width: none; }

  /* topbar de site: barra a toda a largura, conteúdo alinhado a um container central */
  .topbar {
    padding-left: max(1rem, calc((100% - 1080px) / 2));
    padding-right: max(1rem, calc((100% - 1080px) / 2));
  }
  .topbar-logo { font-size: 1.05rem; }

  /* ecrãs interiores: coluna de leitura centrada */
  .ecra { max-width: 640px; margin: 0 auto; }

  /* landing a toda a largura (o gradiente é o fundo da página) */
  .ecra-landing { max-width: none; margin: 0; }

  /* modais centrados, com cantos completos */
  .modal { align-items: center; }
  .modal-caixa { max-width: 480px; border-radius: 20px; }

  /* compositor do chat um pouco acima do fundo (transição) */
  #ecra-chat { padding-bottom: 0; }
}

/* ---------- ≥900px: layout de site ---------- */
@media (min-width: 900px) {

  /* --- E1 Landing: página inteira, identidade à escala do ecrã --- */
  .ecra-landing { padding: 4rem 2rem 1.2rem; }
  .landing-miolo { gap: 1.4rem; max-width: 760px; margin: auto; }
  .ecra-landing .logo-radar {
    width: 168px; height: 168px;
    background:
      radial-gradient(circle, transparent 0 33px, rgba(216, 181, 112, 0.5) 33px 35px, transparent 35px 59px, rgba(216, 181, 112, 0.5) 59px 61px, transparent 61px 100px),
      radial-gradient(circle, rgba(216, 181, 112, 0.35) 0 2px, transparent 2px);
  }
  .logo-nome { font-size: clamp(3.2rem, 6vw, 4.6rem); margin-top: 1.2rem; }
  .logo-descritor { font-size: 0.85rem; letter-spacing: 0.34em; margin-top: 0.8rem; }
  .headline { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-top: 0.6rem; }
  .apoio { font-size: 1.05rem; }
  .ecra-landing .btn-primario { max-width: 360px; font-size: 1.2rem; }
  .landing-rodape { font-size: 0.8rem; }

  /* --- ecrãs interiores: respiração de site --- */
  .ecra { padding: 2rem 1.5rem 4rem; }
  .titulo-ecra { font-size: 1.9rem; }
  .subtitulo-ecra { font-size: 0.95rem; }

  /* --- E2 Chat / onboarding: coluna central confortável.
   * O compositor sobe: escreve-se sensivelmente a um terço do fundo
   * do ecrã; as mensagens continuam a fluir por cima. --- */
  #ecra-chat { max-width: 680px; padding-bottom: 0; }
  .balao { max-width: 78%; }

  /* --- E4 Lista: grelha de 2 colunas; Dossier e Cofre em largura total --- */
  #ecra-lista { max-width: 1080px; }
  #lista-cartoes,
  #lista-guardadas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: stretch;
  }
  #lista-guardadas .guardadas-titulo,
  #lista-guardadas .guardadas-nota { grid-column: 1 / -1; }
  #lista-cartoes .cartao,
  #lista-guardadas .cartao {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
  }
  #lista-cartoes .cartao .cartao-acoes,
  #lista-guardadas .cartao .cartao-acoes { margin-top: auto; padding-top: 0.6rem; }
  #lista-cartoes .cartao .cartao-acoes .btn { flex: 1; }
  #lista-dossier { margin-top: 0.5rem; }
  #ecra-lista .dossier { padding: 1.4rem 1.6rem 1.5rem; }
  #ecra-lista .btn-dossier { max-width: 420px; }

  /* --- E6 Projetos / E8 Dossier em coluna confortável --- */
  #ecra-projetos { max-width: 760px; }
  #ecra-dossier { max-width: 820px; }

  /* --- E5 Detalhe: coluna única confortável (lê melhor que 2 colunas
         para texto de análise); métricas em 4 células lado a lado --- */
  #ecra-detalhe { max-width: 760px; }
  .detalhe-nome { font-size: 1.8rem; }
  /* Em ecrã largo cabem todas numa linha — o flex trata da repartição
     sozinho, por isso aqui só se dá mais folga ao mínimo de cada uma. */
  .facto { min-width: 10rem; }

  /* --- E7 Cofre / E3 Habemus: coluna central --- */
  #ecra-cofre { max-width: 680px; }
  .habemus-resultado { max-width: 520px; }
  .habemus-titulo { font-size: 3rem; }
}

/* ==================================================================
   Comboio 2 — fechadura, documentos, radar na barra, conversa
   ================================================================== */

/* Leitura das respostas do radar: o topo da mensagem nova fica visível
   abaixo da topbar sticky quando o scroll ancora no início. */
.balao { scroll-margin-top: 72px; }

/* ---------- botão do radar na topbar (retomar a conversa) ---------- */
.btn-icone.btn-radar { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 0.25rem; }
.radar-mini {
  width: 20px; height: 20px; border-radius: 50%; position: relative; overflow: hidden;
  border: 1.5px solid currentColor; display: block;
  background: radial-gradient(circle, transparent 0 4.5px, rgba(216, 181, 112, 0.55) 4.5px 6px, transparent 6px);
}
.radar-mini-varrimento {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(216, 181, 112, 0.8), transparent 80deg);
  animation: varrer 2.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .radar-mini-varrimento, .radar-varrimento, .radar-ponto,
  .logo-radar::before, .logo-radar::after { animation: none; }
}

/* ---------- modal da fechadura ---------- */
.fechadura-input-codigo {
  text-align: center; font-size: 1.5rem; letter-spacing: 0.45em;
  font-variant-numeric: tabular-nums;
}
.fechadura-nota-teste {
  background: rgba(216, 181, 112, 0.18); border-left: 3px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.45rem 0.7rem; color: var(--tinta);
}

/* ---------- documentos no Cofre ---------- */
.cofre-documentos { margin-top: 1.6rem; }
.docs-titulo { font-family: var(--serif); font-size: 1.2rem; margin-bottom: 0.2rem; }
.docs-form {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem;
}
.docs-ficheiro {
  display: block; border: 1.5px dashed var(--verde); border-radius: 12px;
  padding: 0.75rem 0.9rem; cursor: pointer; font-size: 0.92rem; color: var(--verde);
  text-align: center;
}
.docs-ficheiro input { display: none; }
.docs-form select {
  border: 1.5px solid var(--linha); border-radius: 12px; padding: 0.7rem 0.8rem;
  font-family: inherit; font-size: 0.97rem; background: var(--branco); color: var(--tinta);
}
.docs-form select:focus { outline: none; border-color: var(--verde); }
#docs-lista { margin-top: 0.8rem; }
.doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 12px;
  padding: 0.65rem 0.9rem; margin-bottom: 0.5rem;
}
.doc-item-texto b { display: block; font-size: 0.92rem; word-break: break-word; }
.doc-item-texto span { font-size: 0.8rem; color: var(--tinta-suave); }
.doc-apagar {
  background: none; border: 1.5px solid var(--linha); border-radius: 10px;
  color: var(--tinta-suave); font-size: 0.82rem; padding: 0.35rem 0.7rem; white-space: nowrap;
}
.doc-apagar.confirmar { border-color: var(--vermelho); color: var(--vermelho); font-weight: 600; }
.docs-link {
  background: none; border: none; color: var(--verde); text-decoration: underline;
  font-size: inherit; padding: 0; cursor: pointer;
}

/* ---------- Cofre editável ---------- */
.cofre-hint { margin: 0 0 0.7rem; }
.cofre-campo-editavel { cursor: pointer; }
.cofre-campo-editavel:not(.a-editar):hover { border-color: var(--verde); }
.cofre-preencher { color: var(--verde); text-decoration: underline dotted; text-underline-offset: 3px; font-size: 0.82rem; }
.cofre-editor { display: flex; gap: 0.4rem; align-items: center; }
.cofre-edit-input {
  border: 1.5px solid var(--verde); border-radius: 10px; padding: 0.45rem 0.6rem;
  font-family: inherit; font-size: 0.92rem; width: 11rem; max-width: 45vw; background: var(--branco);
}
.cofre-edit-input:focus { outline: none; }
select.cofre-edit-input { width: auto; }
.cofre-edit-guardar { padding: 0.45rem 0.8rem; font-size: 0.85rem; }

/* ---------- despedida do radar (fim da primeira jornada) ---------- */
.despedida-radar {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha); border-left: 4px solid var(--lima);
  border-radius: 16px; border-bottom-left-radius: 4px;
  padding: 0.85rem 1rem; margin: 1.1rem 0 0.3rem; cursor: pointer;
}
.despedida-radar p { font-size: 0.93rem; line-height: 1.5; }

/* ---------- ecrã vazio honesto: os mais próximos abaixo dos 40% ---------- */
.habemus-proximos { width: 100%; margin-top: 1.4rem; text-align: left; }
.proximos-titulo { font-size: 0.9rem; color: var(--tinta-suave); margin-bottom: 0.6rem; text-align: center; }
.proximo-cartao {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.7rem 0.9rem; margin-bottom: 0.5rem; cursor: pointer;
}
.proximo-cartao:hover { border-color: var(--verde); }
.proximo-pct { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta-suave); flex: none; line-height: 1.2; }
.proximo-texto b { display: block; font-size: 0.92rem; }
.proximo-texto span { font-size: 0.8rem; color: var(--tinta-suave); }

/* ---------- Barra do topo: ícones uniformes (linha, dourado, com legenda) ---------- */
.topbar-acoes { gap: 0.1rem; align-items: stretch; }
.btn-icone {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 50px; padding: 0.15rem 0.25rem; line-height: 1;
}
.btn-icone svg { display: block; flex: none; }
.btn-icone .icone-rotulo {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.9; white-space: nowrap;
}
.btn-voltar { min-width: 40px; justify-content: center; }
.radar-mini { width: 22px; height: 22px; }
.btn-projetos .conta { top: -2px; right: 2px; }
@media (max-width: 380px) {
  .btn-icone { min-width: 44px; }
  .btn-icone .icone-rotulo { font-size: 0.8rem; letter-spacing: 0.1em; }
  .topbar-logo { font-size: 0.8rem; }
}

/* ---------- Aviso de versão nova ---------- */
.aviso-versao {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--verde); color: var(--branco);
  border: 1px solid rgba(216, 181, 112, 0.5); border-radius: 999px;
  padding: 0.55rem 0.7rem 0.55rem 1.05rem; font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(10, 21, 36, 0.35); max-width: 92vw;
}
.aviso-versao button {
  background: var(--lima); color: var(--verde); border: none;
  border-radius: 999px; padding: 0.4rem 0.9rem; font-weight: 600; font-size: 0.85rem;
}

/* ================= E6 — Os teus projetos ================= */
.entidade-cabecalho {
  display: flex; flex-direction: column; gap: 0.1rem;
  margin: 1.3rem 0 0.6rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linha);
}
.entidade-cabecalho b { font-family: var(--serif); font-size: 1.05rem; }
.entidade-cabecalho span { font-size: 0.8rem; color: var(--tinta-suave); }
.projeto-cartao {
  display: flex; gap: 0.8rem; align-items: flex-start; justify-content: space-between;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.85rem 1rem; margin-bottom: 0.6rem; cursor: pointer;
}
.projeto-cartao:hover { border-color: var(--verde); }
.projeto-cartao.ativo { border-left: 4px solid var(--lima); }
.projeto-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.projeto-texto b { font-size: 0.98rem; line-height: 1.35; }
.projeto-entidade { font-size: 0.8rem; color: var(--tinta-suave); }
.projeto-estado { font-size: 0.82rem; color: var(--verde); font-weight: 500; }
.projeto-data { font-size: 0.8rem; color: var(--tinta-suave); white-space: nowrap; flex: none; }
#btn-projeto-novo { margin-top: 1.2rem; }

/* chips de entidade (Cofre e modal de novo projeto) */
.entidade-chips, .entidade-opcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
/* abrir outro Cofre: a porta fica por baixo dos chips, discreta mas
 * sempre visível — inclusive quando só há um Cofre, que é exatamente
 * quando a pessoa precisa de saber que pode haver mais */
.cofre-acoes-ent { margin-bottom: 0.9rem; }
.btn-pequeno { padding: 0.42rem 0.85rem; font-size: 0.82rem; }
.chip-entidade { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.chip-nova { border-style: dashed; }
#cofre-seletor { margin-bottom: 0.6rem; }

/* guardadas dentro do projeto */
.guardadas-titulo { font-family: var(--serif); font-size: 1.15rem; margin: 1.6rem 0 0.3rem; }
.guardadas-nota { margin-bottom: 0.7rem; }

/* ================= E8 — Dossier de Verba ================= */
#ecra-dossier { padding-bottom: 2rem; }
.dossier-cabecalho {
  background: var(--verde); color: var(--branco);
  border-radius: 18px; padding: 1.3rem 1.2rem; margin-bottom: 1.4rem;
}
.dossier-marca {
  font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lima); margin-bottom: 0.4rem;
}
.dossier-h1 { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; color: var(--lima); }
.dossier-projeto { font-size: 1rem; margin-top: 0.3rem; }
.dossier-meta { font-size: 0.8rem; color: rgba(255, 255, 255, 0.8); margin-top: 0.5rem; }
.dossier-meta b { color: var(--lima); }
.dossier-selo {
  display: inline-block; margin-top: 0.8rem;
  background: rgba(216, 181, 112, 0.18); border: 1px dashed var(--lima); color: var(--lima);
  border-radius: 999px; padding: 0.3rem 0.75rem; font-size: 0.8rem; letter-spacing: 0.04em;
}
.dossier-selo-porta {
  margin-top: 0.5rem; text-align: center;
  font-size: 0.8rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.75);
}

.dossier-bloco {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 1.1rem 1.1rem 1.2rem; margin-bottom: 1.1rem;
}
.dossier-bloco h3 { font-family: var(--serif); font-size: 1.25rem; margin-bottom: 0.6rem; }
.dossier-bloco h4 {
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-suave); margin: 1.1rem 0 0.45rem;
}
.dossier-bloco p { font-size: 0.92rem; margin-bottom: 0.5rem; }
.dossier-regra {
  background: var(--papel); border-left: 4px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.65rem 0.85rem; font-size: 0.92rem;
}
.dossier-destaque { font-size: 1rem; }
.dossier-destaque b { color: var(--verde); }
.dossier-nota { font-size: 0.82rem; color: var(--tinta-suave); }
.dossier-aviso {
  background: #FFF8EC; border: 1px solid #E8D6AE; border-radius: 12px;
  padding: 0.65rem 0.85rem; font-size: 0.84rem; margin-top: 0.9rem;
}
.dossier-aviso-forte { border-color: var(--lima); background: #FDF3E0; }

.dossier-acoes { margin-top: 1.4rem; }
#dossier-ligar-radar { width: 100%; margin-top: 0.6rem; }

/* ================= Impressão — o Dossier vira entregável =================
   Sai tudo o que é interface: barra, botões, modais, avisos. Fica o
   documento: cabeçalho com o projeto e a data, texto legível, e blocos
   que não se partem a meio entre páginas. */
@media print {
  @page { margin: 16mm 14mm; }

  html, body { background: #FFF !important; color: #111 !important; }
  body { font-size: 11pt; line-height: 1.45; }
  #app { max-width: none; }

  /* fora: tudo o que não é o documento */
  .topbar, .modal, .toast, .aviso-versao, .cofre-strip, .despedida-radar,
  .btn, button, #chat-entrada, #chat-sugestoes, .selo-demo { display: none !important; }

  /* só o Dossier vai ao papel */
  .ecra { display: none !important; }
  #ecra-dossier { display: block !important; padding: 0; max-width: none; }

  /* o cabeçalho perde o fundo escuro (poupa tinta e lê-se melhor) */
  .dossier-cabecalho {
    background: none !important; color: #111 !important;
    border: none; border-bottom: 2pt solid #111; border-radius: 0;
    padding: 0 0 8pt; margin-bottom: 14pt;
  }
  .dossier-marca, .dossier-h1, .dossier-meta b { color: #111 !important; }
  .dossier-h1 { font-size: 20pt; }
  .dossier-meta { color: #444 !important; }
  .dossier-selo {
    background: none !important; color: #111 !important;
    border: 1pt dashed #111; margin-top: 6pt;
  }

  .dossier-bloco {
    border: none; border-top: 1pt solid #CCC; border-radius: 0;
    padding: 10pt 0 0; margin: 0 0 12pt;
    break-inside: auto; page-break-inside: auto;
  }
  .dossier-bloco h3 { font-size: 14pt; break-after: avoid; page-break-after: avoid; }
  .dossier-bloco h4 { color: #444; break-after: avoid; page-break-after: avoid; }

  /* nada de itens partidos a meio */
  .crit-lista li, .docs-dossier li, .plano-lista li, .plano-ordem li,
  .plano-colisao, .dossier-ficha, .plano-total, .dossier-regra, .dossier-aviso {
    break-inside: avoid; page-break-inside: avoid;
  }
  .dossier-ficha { border-top: 1pt solid #EEE; }

  .plano-total {
    background: none !important; color: #111 !important;
    border: 1.5pt solid #111; border-radius: 0;
  }
  .plano-total-rotulo, .plano-total-valor { color: #111 !important; }
  .plano-total-nota { color: #333 !important; }
  .plano-valor { color: #111 !important; }

  .dossier-regra, .dossier-aviso { background: #F4F4F4 !important; border-color: #999 !important; }
  .crit-porque, .crit-prova, .dossier-nota, .dossier-fonte-linha { color: #444 !important; }
  .crit-falha .crit-texto { color: #111 !important; font-weight: 600; }

  /* os links levam o endereço, que no papel não se pode clicar */
  a { color: #111 !important; text-decoration: underline; }
  .dossier-fonte-linha a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}

/* ---------- convite para a fechadura (uma vez, sem insistir) ---------- */
.convite-sync { cursor: default; align-items: flex-start; }
.convite-sync-texto { display: flex; flex-direction: column; gap: 0.7rem; }
.convite-sync-botoes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.convite-sync-botoes .btn { font-size: 0.88rem; padding: 0.6rem 0.9rem; }

/* ================= Dossier em AZULEJOS =================
   Lê-se de relance, aprofunda-se ao toque. Pouco texto corrido: o que
   manda é o dado. O NÚMERO de cada apoio é a sua identidade e aparece
   em todos os azulejos — nunca muda de sítio para sítio. */

/* painel de 4 métricas */
.painel-metricas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem; margin-bottom: 1.1rem;
}
.metrica {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.8rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0;
}
.metrica b {
  font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; color: var(--verde);
  overflow-wrap: anywhere;
}
.metrica span {
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave);
}
.metrica-larga { grid-column: 1 / -1; background: var(--verde); border-color: var(--verde); }
.metrica-larga b { color: var(--lima); font-size: 1.9rem; }
.metrica-larga span { color: rgba(255, 255, 255, 0.75); }

/* O número que abre. Um quadro clicável tem de PARECER clicável antes
 * de o ser: por isso ganha o "ver quais ›" por baixo e levanta-se ao
 * toque. Os outros dois quadros ficam quietos — não prometem porta. */
.metrica-abre {
  font: inherit; text-align: left; cursor: pointer; width: 100%;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.metrica-abre:hover, .metrica-abre:focus-visible {
  border-color: var(--verde); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07); transform: translateY(-1px);
}
.metrica-abrir {
  margin-top: 0.25rem; font-size: 0.68rem !important; letter-spacing: 0.08em !important;
  color: var(--verde) !important; font-weight: 600;
}
/* onde a pessoa aterra acende-se um instante: sem isto, o salto deixa-a
 * a olhar para uma página que parece igual */
.bloco-aceso {
  animation: acender 1.8s ease-out;
  scroll-margin-top: 0.8rem;
}
@keyframes acender {
  0%, 55% { box-shadow: 0 0 0 3px var(--lima); border-radius: 14px; }
  100% { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0); border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .bloco-aceso { animation: none; }
  .metrica-abre { transition: none; }
}
.nota-total { margin: -0.6rem 0 1.1rem; }

/* grelha de azulejos */
.grelha-azulejos { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin-bottom: 0.4rem; }
.azulejo {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.85rem 0.95rem; cursor: pointer; min-width: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.azulejo:hover, .azulejo:focus-visible { border-color: var(--verde); outline: none; }
.azulejo-topo { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.selo-num {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--verde); color: var(--lima);
  font-family: var(--serif); font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.azulejo-pct { font-family: var(--serif); font-size: 1.25rem; color: var(--verde); line-height: 1; }
.etiqueta-parte {
  margin-left: auto; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 999px;
  padding: 0.2rem 0.55rem; color: var(--tinta-suave); white-space: nowrap;
}
.etiqueta-vaga { font-style: italic; }
.azulejo-nome { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.azulejo-entidade { font-size: 0.8rem; color: var(--tinta-suave); }
.azulejo-dados { display: flex; gap: 1.1rem; margin-top: 0.25rem; flex-wrap: wrap; }
.azulejo-dados span { display: flex; flex-direction: column; min-width: 0; }
.azulejo-dados b { font-size: 0.92rem; color: var(--verde); overflow-wrap: anywhere; }
.azulejo-dados i {
  font-style: normal; font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-suave);
}
.azulejo-rodape { margin-top: 0.25rem; }
.micro-eleg { font-size: 0.8rem; color: #2E7D52; font-weight: 600; }
.azulejo-soma { border-left: 4px solid var(--lima); }
.azulejo-colide { border-left: 4px solid var(--vermelho); }
.azulejo-vago { border-left: 4px dashed var(--linha); }
.azulejo-impedido { border-left: 4px solid var(--vermelho); }

/* azulejo de elegibilidade (abre ao toque) */
.azulejo-eleg { cursor: default; }
.eleg-contagem { display: flex; gap: 0.9rem; margin-top: 0.35rem; font-size: 0.88rem; }
.eleg-contagem b { font-family: var(--serif); font-size: 1.15rem; }
.eleg-contagem .crit-cumpre { color: #2E7D52; }
.eleg-contagem .crit-verificar { color: var(--tinta-suave); }
.eleg-contagem .crit-falha { color: var(--vermelho); }
.azulejo-abrir {
  margin-top: 0.5rem; align-self: flex-start;
  background: none; border: 1.5px solid var(--linha); border-radius: 10px;
  padding: 0.4rem 0.75rem; font-size: 0.82rem; color: var(--verde); font-family: inherit;
}
.azulejo-abrir:hover { border-color: var(--verde); }
.crit-detalhe { margin-top: 0.7rem; border-top: 1px solid var(--linha); padding-top: 0.7rem; }

/* ordem dos pedidos */
.plano-ordem { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0; }
.plano-ordem li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ordem-texto { display: flex; flex-direction: column; min-width: 0; }
.ordem-texto b { font-size: 0.9rem; line-height: 1.35; }
.ordem-texto i { font-style: normal; font-size: 0.8rem; color: var(--tinta-suave); }
.plano-colisao-parte { font-size: 0.86rem; color: var(--vermelho); }

/* checklist de documentos */
.checklist-docs { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; }
.checklist-docs li { display: flex; gap: 0.55rem; align-items: flex-start; }
.checklist-gratis .crit-icone { color: var(--tinta-suave); }
.bloco-docs-gratis { border-left: 4px solid var(--linha); padding-left: 0.8rem; }
.docs-gratis-sub { font-size: 0.88rem; color: var(--tinta-suave); margin-bottom: 0.6rem; }

@media (min-width: 700px) {
  .painel-metricas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrica-larga { grid-column: auto; }
  .grelha-azulejos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .grelha-azulejos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* impressão: os azulejos viram lista, e os NÚMEROS mantêm-se */
@media print {
  .painel-metricas { grid-template-columns: repeat(4, 1fr) !important; gap: 6pt; }
  .metrica { border: 1pt solid #999 !important; background: none !important; padding: 6pt 8pt; }
  .metrica b { color: #111 !important; font-size: 13pt; }
  .metrica span { color: #444 !important; }
  .metrica-abrir { display: none !important; }
  .metrica-larga { grid-column: auto !important; }
  .grelha-azulejos { display: block !important; }
  .azulejo {
    border: none !important; border-bottom: 1pt solid #DDD !important; border-radius: 0;
    padding: 6pt 0; break-inside: avoid; page-break-inside: avoid;
  }
  .azulejo-abrir, .crit-detalhe { display: none !important; }
  .selo-num {
    background: none !important; color: #111 !important;
    border: 1pt solid #111; width: 14pt; height: 14pt; font-size: 9pt;
  }
  .azulejo-pct, .azulejo-dados b { color: #111 !important; }
  .etiqueta-parte { background: none !important; border: 1pt solid #999 !important; color: #333 !important; }
  .micro-eleg { color: #111 !important; }
  .plano-ordem li, .checklist-docs li { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- a oferta de envio por email (o Radar oferece, não pede) ---------- */
.convite-titulo { font-family: var(--serif); font-size: 1.05rem; line-height: 1.3; }
.convite-email {
  width: 100%; border: 1.5px solid var(--linha); border-radius: 12px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1rem; background: var(--branco);
}
.convite-email:focus { outline: none; border-color: var(--verde); }
#habemus-envio { width: 100%; margin: 1.2rem 0 0.4rem; text-align: left; }
#habemus-envio .despedida-radar { cursor: default; }
#lista-envio:not(:empty) { margin-bottom: 1.1rem; }
@media print { .convite-sync, #lista-envio, #habemus-envio { display: none !important; } }

/* ---------- critérios: a lista ✓ / ⚠️ / ✖ (base, usada nos azulejos,
     na checklist de documentos e no detalhe) ---------- */
.crit-lista { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; margin: 0; }
.crit-lista li { display: flex; gap: 0.55rem; align-items: flex-start; }
.crit-icone { flex: none; width: 1.15rem; font-size: 0.9rem; line-height: 1.5; }
.crit-texto { font-size: 0.88rem; line-height: 1.45; display: block; min-width: 0; }
.crit-porque { display: block; font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.1rem; }
.crit-prova {
  display: block; font-size: 0.8rem; color: var(--tinta-suave);
  font-style: italic; margin-top: 0.15rem;
}
.crit-lista .crit-cumpre .crit-icone { color: #2E7D52; }
.crit-lista .crit-falha .crit-icone { color: var(--vermelho); }
.crit-lista .crit-falha .crit-texto { color: var(--vermelho); }
.checklist-docs .crit-cumpre .crit-icone { color: #2E7D52; }
.dossier-fonte-linha { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.6rem; }

/* os azulejos não se esticam à altura do vizinho mais alto */
.grelha-azulejos { align-items: start; }

@media print {
  .crit-porque, .crit-prova, .dossier-fonte-linha { color: #444 !important; }
  .crit-lista .crit-falha .crit-texto { color: #111 !important; font-weight: 600; }
}

/* o número acompanha o apoio no cartão da lista e no detalhe */
.compat { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.compat .selo-num { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }
.detalhe-nome .selo-num {
  width: 2rem; height: 2rem; font-size: 1.1rem;
  margin-right: 0.55rem; vertical-align: 0.15em;
}
@media print { .detalhe-nome .selo-num, .compat .selo-num { background: none !important; color: #111 !important; border: 1pt solid #111; } }

/* a saída do bloco de guardar: link pequeno e discreto, nunca um botão
   do mesmo peso do "Guardar os apoios" (regra da fundadora) */
.convite-saida {
  align-self: flex-start; background: none; border: none; padding: 0.2rem 0;
  font-family: inherit; font-size: 0.8rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.convite-saida:hover { color: var(--tinta); }

/* ================= Gestão, zona sensível e legal ================= */
.btn-perigo { background: var(--vermelho); color: var(--branco); }

/* ações discretas nos cartões (não competem com abrir o projeto) */
.projeto-acoes, .entidade-acoes { display: flex; gap: 0.7rem; margin-top: 0.35rem; }
.acao-linha {
  background: none; border: none; padding: 0; font-family: inherit;
  font-size: 0.8rem; color: var(--tinta-suave);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acao-linha:hover { color: var(--vermelho); }
.entidade-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.entidade-acoes { margin-top: 0; }

/* edição inline (renomear projeto, corrigir email) */
.linha-editar { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.editar-input {
  border: 1.5px solid var(--verde); border-radius: 10px; padding: 0.45rem 0.6rem;
  font-family: inherit; font-size: 0.95rem; background: var(--branco); min-width: 0; flex: 1;
}
.editar-input:focus { outline: none; }
.editar-guardar { padding: 0.45rem 0.8rem; font-size: 0.85rem; white-space: nowrap; }

/* estado vazio dos projetos */
.vazio-projetos {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  text-align: center; padding: 2.2rem 1rem; color: var(--tinta-suave);
}
.vazio-projetos p { font-size: 0.95rem; max-width: 34ch; line-height: 1.5; }
.vazio-projetos .radar-avatar { color: var(--lima); }

/* perfil do projeto (colapsável) */
.perfil-bloco {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 0.9rem 1rem; margin-top: 1.2rem;
}
.perfil-bloco summary { font-weight: 600; cursor: pointer; font-size: 0.95rem; }
.perfil-bloco #btn-refazer { width: 100%; margin-top: 0.8rem; }

/* zona sensível do Cofre */
.zona-sensivel { margin-top: 2.4rem; border-top: 1px solid var(--linha); padding-top: 1.2rem; }
.zona-linha {
  display: flex; gap: 0.9rem; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--linha); border-radius: 14px;
  background: var(--branco); padding: 0.85rem 1rem; margin-bottom: 0.6rem; flex-wrap: wrap;
}
.zona-texto { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; flex: 1; }
.zona-texto b { font-size: 0.92rem; overflow-wrap: anywhere; }
.zona-texto span { font-size: 0.8rem; color: var(--tinta-suave); line-height: 1.45; }
.zona-linha .btn { padding: 0.55rem 0.95rem; font-size: 0.88rem; white-space: nowrap; }
.zona-perigo { border-color: rgba(179, 64, 42, 0.4); }
.zona-legal { margin-top: 1rem; font-size: 0.82rem; color: var(--tinta-suave); }

/* o que se perde, dentro da confirmação */
.confirmar-perdas {
  list-style: none; padding: 0.7rem 0.9rem; margin: 0.2rem 0 0.8rem;
  background: var(--papel); border-left: 3px solid var(--vermelho); border-radius: 0 10px 10px 0;
  display: flex; flex-direction: column; gap: 0.35rem;
  font-size: 0.85rem; line-height: 1.45;
}
.confirmar-perdas li::before { content: '— '; color: var(--tinta-suave); }
#confirmar-palavra {
  width: 100%; border: 1.5px solid var(--vermelho); border-radius: 12px;
  padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1.05rem;
  letter-spacing: 0.12em; text-transform: uppercase; background: var(--branco);
}

/* links legais */
.link-legal {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
  color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.landing-legal { display: block; margin-top: 0.5rem; opacity: 0.85; }

/* páginas legais */
#ecra-legal { max-width: 720px; }
#ecra-legal h3 { font-family: var(--serif); font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
#ecra-legal p { font-size: 0.93rem; line-height: 1.6; margin-bottom: 0.6rem; }
#ecra-legal ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.93rem; line-height: 1.55; margin-bottom: 0.6rem; }
.legal-aviso {
  background: #FFF8EC; border: 1px solid #E8D6AE; border-radius: 12px;
  padding: 0.7rem 0.9rem; font-size: 0.86rem !important; margin: 0.8rem 0 1.2rem;
}
.legal-por-definir {
  background: rgba(179, 64, 42, 0.1); color: var(--vermelho);
  border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.85em;
}

/* ================= O ecrã do projeto: cinco caminhos ================= */
.projeto-sub { margin-bottom: 0.2rem; }
.projeto-resumo {
  font-size: 0.9rem; color: var(--verde); font-weight: 500; margin-bottom: 1.2rem;
}
.convite-nome {
  background: none; border: none; padding: 0; font-family: inherit; font-size: inherit;
  color: var(--verde); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.via {
  display: flex; align-items: center; justify-content: space-between; gap: 0.9rem;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 14px;
  padding: 0.95rem 1.05rem; margin-bottom: 0.6rem; cursor: pointer;
}
.via:hover, .via:focus-visible { border-color: var(--verde); outline: none; }
.via-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.via-texto b { font-size: 1rem; }
.via-texto span { font-size: 0.8rem; color: var(--tinta-suave); line-height: 1.45; }
.via-seta { color: var(--lima); font-size: 1.1rem; flex: none; }
.via-adormecida { opacity: 0.72; }
.via-adormecida .via-seta { color: var(--linha); }
.projeto-rodape { display: flex; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }

/* afordância de clicável no cartão da lista de projetos */
.projeto-lado { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; flex: none; }
.projeto-abrir { font-size: 0.8rem; color: var(--verde); font-weight: 600; white-space: nowrap; }
.projeto-cartao:hover .projeto-abrir { text-decoration: underline; text-underline-offset: 3px; }
.entidade-sem-nome {
  color: var(--verde); font-weight: 500; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px;
}

/* ================= Notas ================= */
#ecra-notas { display: flex; flex-direction: column; }
#notas-texto {
  width: 100%; min-height: 46vh; resize: vertical;
  border: 1.5px solid var(--linha); border-radius: 14px;
  padding: 0.9rem 1rem; font-family: inherit; font-size: 1rem; line-height: 1.6;
  background: var(--branco); color: var(--tinta);
}
#notas-texto:focus { outline: none; border-color: var(--verde); }
.notas-estado {
  font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.5rem; min-height: 1.1rem;
}
.notas-impressas {
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 0.93rem; line-height: 1.6;
  background: var(--papel); border-left: 3px solid var(--lima);
  border-radius: 0 10px 10px 0; padding: 0.8rem 1rem;
}

@media (min-width: 700px) {
  #ecra-projeto { max-width: 680px; }
  #ecra-notas { max-width: 760px; }
}

@media print {
  /* as notas vão ao papel tal como foram escritas */
  .notas-impressas {
    background: none !important; border-left: 2pt solid #111 !important;
    border-radius: 0; padding: 4pt 0 4pt 8pt;
    break-inside: auto; page-break-inside: auto;
  }
}

/* ================= O mecanismo: como o dinheiro chega =================
   O incentivo fiscal brasileiro aprova o projeto mas não transfere
   dinheiro — quem não souber perde meses. Por isso tem etiqueta própria,
   e a de aviso destaca-se das outras. */
.etiqueta-mecanismo {
  display: inline-block; margin-top: 0.35rem;
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 999px;
  padding: 0.2rem 0.6rem; color: var(--tinta-suave);
}
.etiqueta-mecanismo.etiqueta-aviso {
  background: #FDF3E0; border-color: var(--lima); color: #8A5A12; font-weight: 600;
}
.detalhe-entidade .etiqueta-mecanismo { margin-top: 0; vertical-align: middle; }
.azulejo .etiqueta-mecanismo { align-self: flex-start; }
@media print {
  .etiqueta-mecanismo {
    background: none !important; border: 1pt solid #999 !important; color: #111 !important;
  }
  .etiqueta-mecanismo.etiqueta-aviso { border-color: #111 !important; font-weight: 700; }
}

/* ================= Painel da criadora (só com chave-mestra) ================= */
.painel-criadora {
  position: fixed; right: 0.7rem; bottom: 0.7rem; z-index: 60;
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--verde); color: var(--lima);
  border: 1px solid rgba(216, 181, 112, 0.45); border-radius: 12px;
  padding: 0.5rem 0.6rem; font-size: 0.8rem;
  box-shadow: 0 6px 18px rgba(10, 21, 36, 0.3); opacity: 0.92;
}
.painel-criadora:hover { opacity: 1; }
.painel-topo { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.painel-criadora label { display: flex; flex-direction: column; gap: 0.15rem; }
.painel-criadora select {
  font-family: inherit; font-size: 0.8rem; padding: 0.2rem 0.3rem;
  border-radius: 8px; border: 1px solid rgba(216, 181, 112, 0.4);
  background: var(--verde-escuro); color: var(--lima);
}
@media print { .painel-criadora { display: none !important; } }

/* coprodução: a linha que só existe para quem tem sócio noutro país */
.etiqueta-coprod { border-color: var(--lima); color: var(--verde); font-weight: 600; }
.bloco-coproducao { border-left: 4px solid var(--lima); padding-left: 0.8rem; }

/* ---------- cumulação: os estados que mudam a decisão ---------- */
.etiqueta-exclusivo { background: #FDE8E3; border-color: var(--vermelho); color: var(--vermelho); font-weight: 700; }
.etiqueta-escolhe { border-color: var(--lima); color: #8A5A12; font-weight: 600; }
/* o que «EXCLUSIVO» quer dizer, dito por baixo da etiqueta */
.etiqueta-nota { margin: 0.3rem 0 0; font-size: 0.78rem; line-height: 1.4; color: var(--tinta-suave); }
.cumulacao-lista { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; padding: 0; }
.cumulacao-lista li { display: flex; gap: 0.55rem; align-items: flex-start; }
.cum-texto { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.88rem; }
.cum-estado { font-size: 0.8rem; color: var(--tinta-suave); }
.cum-fonte { font-size: 0.8rem; color: var(--tinta-suave); font-style: italic; margin-top: 0.15rem; }
.cum-exclusivo .cum-estado { color: var(--vermelho); font-weight: 600; }
.cum-escolhe_um .cum-estado { color: #8A5A12; font-weight: 600; }
.cum-acumula .cum-estado { color: #2E7D52; font-weight: 600; }
.dossier-hipoteses ul { margin: 0.4rem 0 0.5rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dossier-hipoteses li { font-size: 0.88rem; line-height: 1.45; }
@media print {
  .etiqueta-exclusivo, .etiqueta-escolhe { background: none !important; border: 1pt solid #111 !important; color: #111 !important; }
  .cumulacao-lista li, .dossier-hipoteses { break-inside: avoid; page-break-inside: avoid; }
}

/* ===== AS QUATRO FAMÍLIAS DO DINHEIRO =====
   Grupos, não filtros: cada família tem uma lógica diferente e a pessoa
   aprende-a ao ler de cima para baixo. O cabeçalho tem de separar sem
   gritar — é uma placa de secção, não um banner. */
.familia-cabecalho {
  margin: 1.6rem 0 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--linha, #E7E0CE);
}
.familia-cabecalho:first-child { margin-top: 0.2rem; }
.familia-cabecalho h3 {
  margin: 0;
  font-family: 'Marcellus', Georgia, serif;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
  color: var(--tinta, #102138);
}
.familia-cabecalho p {
  margin: 0.2rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--suave, #6B7280);
}
/* o prémio é a porta mais baixa: merece ser a que se vê primeiro */
.familia-premio h3::after,
.familia-patrocinio h3::after,
.familia-credito h3::after { content: ''; }
.familia-por_classificar h3 { color: var(--suave, #6B7280); }

/* "não tenho X, mas tenho Y" — nunca um "não há nada" seco */
.familias-em-falta {
  margin: 1.4rem 0 0.2rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--dourado, #D8B570);
  background: rgba(216, 181, 112, 0.08);
  border-radius: 0 6px 6px 0;
}
.familias-em-falta p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.familias-em-falta .nota-rodape { margin-top: 0.45rem; font-size: 0.84rem; }

/* ===== A LINHA DE CONTINUIDADE =====
   O Radar nunca termina a entregar; termina a convidar. Uma linha, no
   fim de um bloco — discreta, nunca um apelo aos gritos. */
.continuidade {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--suave, #6B7280);
  font-style: italic;
}
@media print { .continuidade { font-style: normal; } }


/* ---------- E12 Patrocinadores: a quem é que eu peço? ----------
 * A ordem visual é a ordem da dopamina: o número grande primeiro, o
 * obstáculo em texto normal a seguir, e só depois a lista. Por isso o
 * bloco do topo é escuro e ocupa o ecrã — e o que falta vem lá dentro,
 * a seguir ao número, e não antes. */
.patroc-topo {
  background: var(--verde); color: var(--branco); border-radius: 18px;
  padding: 1.1rem 1.1rem 1rem; margin-bottom: 1rem;
  border: 1px solid rgba(216, 181, 112, 0.45);
}
.patroc-valor {
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.25; color: var(--lima);
}
.patroc-portas { font-size: 1rem; margin-top: 0.5rem; }
.patroc-portas b { color: var(--lima); }
.patroc-falta { font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); margin-top: 0.7rem; }
.patroc-papel { font-size: 0.92rem; color: rgba(255, 255, 255, 0.82); margin-top: 0.35rem; }
.patroc-ganho { font-size: 0.95rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid rgba(216, 181, 112, 0.3); }

.patroc-moldura {
  font-size: 0.8rem; color: var(--tinta-suave); background: var(--branco);
  border: 1px dashed var(--linha); border-radius: 12px; padding: 0.6rem 0.8rem; margin-bottom: 0.9rem;
}
.patroc-filtros { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.patroc-filtros .chip { padding: 0.35rem 0.7rem; font-size: 0.82rem; border-radius: 999px; }
.patroc-filtros .chip.ativo { background: var(--verde); color: var(--lima); }
.patroc-geo { font-size: 0.82rem; color: var(--tinta-suave); margin-bottom: 0.9rem; }
.patroc-geo button {
  background: none; border: none; color: var(--verde); font: inherit; padding: 0;
  text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.patroc-grupo-titulo { font-family: var(--serif); font-size: 1.1rem; margin: 1.3rem 0 0.2rem; }
.patroc-grupo-intro { font-size: 0.88rem; color: var(--tinta-suave); margin-bottom: 0.7rem; }

.patroc-cartao {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 16px;
  padding: 0.9rem 1rem; margin-bottom: 0.7rem;
}
.patroc-cartao.fechada { opacity: 0.78; }
.patroc-nome { font-weight: 700; font-size: 1.02rem; }
.patroc-setor { color: var(--tinta-suave); font-size: 0.8rem; }
.patroc-declara { font-size: 0.9rem; margin: 0.5rem 0; border-left: 3px solid var(--lima); padding-left: 0.6rem; }
.patroc-declara b { font-weight: 600; }
.patroc-janela { font-size: 0.9rem; font-weight: 600; margin: 0.4rem 0 0.1rem; }
.patroc-cartao.aberta .patroc-janela { color: var(--verde); }
.patroc-cartao.fechada .patroc-janela { color: var(--tinta-suave); }
.patroc-estado { font-size: 0.8rem; color: var(--tinta-suave); }
.patroc-exige { font-size: 0.85rem; margin-top: 0.45rem; }
.patroc-armadilha {
  background: rgba(179, 64, 42, 0.08); border-left: 3px solid var(--vermelho);
  border-radius: 0 10px 10px 0; padding: 0.5rem 0.7rem; margin-top: 0.5rem; font-size: 0.85rem;
}
.patroc-armadilha b { display: block; color: var(--vermelho); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.patroc-onde { font-size: 0.82rem; color: var(--tinta-suave); margin-top: 0.45rem; }
.patroc-porta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.7rem; }
.patroc-porta a.btn-porta {
  background: var(--verde); color: var(--lima); font-weight: 700; text-decoration: none;
  border-radius: 10px; padding: 0.5rem 0.9rem; font-size: 0.9rem;
}
.patroc-caixa { font-size: 0.82rem; color: var(--tinta-suave); word-break: break-all; }
.patroc-caixa b { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.patroc-como-btn {
  background: none; border: none; color: var(--verde); font: inherit; font-size: 0.82rem;
  padding: 0.3rem 0; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer;
}
.patroc-como { font-size: 0.85rem; color: var(--tinta); background: var(--papel); border-radius: 10px; padding: 0.6rem 0.8rem; margin-top: 0.4rem; line-height: 1.45; }
.patroc-lido { font-size: 0.8rem; color: var(--tinta-suave); margin-top: 0.5rem; }
.patroc-premios { font-size: 0.9rem; background: var(--branco); border: 1px solid var(--linha); border-radius: 14px; padding: 0.8rem 1rem; margin-top: 1.2rem; }

/* ---------- HABEMUS VERBO: a candidatura assistida ----------
   Mesma casa do Dossier — é o degrau a seguir, não outro produto. O que
   o distingue é o que a pessoa faz aqui: no Dossier lê, aqui escreve.
   Daí a única diferença visual que conta: os textos são campos de
   edição a sério, com o cursor à vista. */

.verbo-porta { border-color: var(--lima); }

.verbo-dois {
  background: var(--papel); border-radius: 12px;
  padding: 0.7rem 0.9rem; margin: 0.7rem 0;
}
.verbo-dois b { font-size: 0.95rem; }
.verbo-dois p { font-size: 0.88rem; margin: 0.35rem 0; }
.verbo-dois ul { margin: 0.3rem 0 0 1.1rem; font-size: 0.9rem; }

/* A fronteira — o que isto NÃO é — antes do botão, nunca depois. */
.verbo-fronteira {
  border-left: 3px solid var(--tinta-suave);
  padding: 0.55rem 0 0.55rem 0.8rem; margin: 0.9rem 0;
}
.verbo-fronteira b { font-size: 0.92rem; }
.verbo-fronteira p { font-size: 0.88rem; color: var(--tinta-suave); margin-top: 0.25rem; }

.verbo-preco { font-size: 0.92rem; margin: 0.8rem 0; }

.verbo-sabemos { list-style: none; font-size: 0.9rem; }
.verbo-sabemos li {
  display: flex; gap: 0.6rem; padding: 0.35rem 0;
  border-bottom: 1px solid var(--linha);
}
.verbo-sabemos li b { flex: 0 0 42%; color: var(--tinta-suave); font-weight: 500; }
.verbo-sabemos li span { flex: 1; }

.verbo-peca {
  background: var(--branco); border: 1px solid var(--linha);
  border-radius: 14px; padding: 0.9rem 1rem; margin: 0.9rem 0;
}
.verbo-peca h4 { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 0.5rem; }

/* O critério do aviso citado ao lado da peça: é isto que separa uma
   candidatura escrita de uma candidatura escrita PARA aquele aviso. */
.verbo-criterio {
  background: var(--papel); border-radius: 10px;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.6rem;
}
.verbo-criterio ul { margin: 0.3rem 0 0 1rem; }
.verbo-criterio-sem { color: var(--tinta-suave); font-style: italic; }

.verbo-buracos {
  border: 1.5px dashed var(--vermelho); border-radius: 10px;
  padding: 0.5rem 0.7rem; font-size: 0.85rem; margin-bottom: 0.6rem;
}
.verbo-buracos ul { margin: 0.25rem 0 0 1rem; }

.verbo-nota { font-size: 0.85rem; color: var(--tinta-suave); margin-bottom: 0.5rem; }

/* O texto é DELA: abre em edição, não em aprovação. */
.verbo-texto {
  width: 100%; min-height: 220px; resize: vertical;
  border: 1.5px solid var(--linha); border-radius: 12px;
  padding: 0.7rem 0.8rem; font-family: var(--sans);
  font-size: 0.95rem; line-height: 1.55; background: var(--papel);
}
.verbo-texto:focus { outline: none; border-color: var(--verde); background: var(--branco); }

.verbo-empresa {
  border: 1px solid var(--linha); border-radius: 12px;
  padding: 0.7rem 0.9rem; margin: 0.6rem 0;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.verbo-empresa b { font-size: 1rem; }
.verbo-empresa span { font-size: 0.87rem; color: var(--tinta-suave); }

/* A saída da pergunta ("não sei isso agora") existe sempre, mas
   discreta: nunca um botão do mesmo peso do que guarda a resposta. */
.link-discreto {
  background: none; border: none; padding: 0.4rem 0 0;
  color: var(--tinta-suave); font-size: 0.85rem;
  text-decoration: underline; font-family: inherit;
}

@media print {
  .verbo-texto { border: none; background: transparent; min-height: 0; height: auto; }
  .verbo-empresa button, .link-discreto, #verbo-imprimir, #verbo-escrever { display: none; }
}

/* O MICROFONE. Só aparece quando o navegador o suporta — um botão que
 * não faz nada é pior do que botão nenhum. A ouvir, pulsa: a pessoa tem
 * de saber, sem sombra de dúvida, quando está a ser ouvida. */
.btn-microfone {
  background: var(--branco); color: var(--tinta); border: 1.5px solid var(--linha);
  padding: 0.7rem 0.85rem; font-size: 1.1rem; line-height: 1; border-radius: 14px;
}
.btn-microfone:hover { border-color: var(--verde); }
.btn-microfone.a-ouvir {
  background: var(--verde); border-color: var(--verde); color: var(--branco);
  animation: micPulsa 1.4s ease-in-out infinite;
}
@keyframes micPulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 33, 56, 0.35); }
  50% { box-shadow: 0 0 0 8px rgba(16, 33, 56, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn-microfone.a-ouvir { animation: none; } }

/* CONTINUAR ONDE IA. Discreto ao lado do botão principal: quem chega de
 * novo não tropeça nele, quem estava a meio encontra-o de imediato. */
.btn-retomar {
  display: block; margin: 0.9rem auto 0; background: transparent;
  color: var(--lima); border: 1px solid var(--lima);
  padding: 0.55rem 1.1rem; border-radius: 12px; font-size: 0.92rem;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-retomar:hover { background: rgba(216, 181, 112, 0.14); }

/* ⚠️ O ponto cego. Não é um erro nem um aviso legal: é uma dívida com
 * morada. Fica tratado como as outras notas do produto — visível sem
 * gritar, porque quem o lê já está desanimado com a lista curta. */
.ponto-cego {
  background: var(--branco); border: 1px dashed var(--linha);
  border-left: 3px solid var(--lima); border-radius: 12px;
  padding: 0.9rem 1.1rem; margin: 0.9rem 0;
}
.ponto-cego b { display: block; margin-bottom: 0.4rem; }
.ponto-cego p { margin: 0 0 0.5rem; }
.ponto-cego p:last-child { margin-bottom: 0; }

/* ---------- 💰 O contador da home ----------
 * Elegância aqui é subtração: a home vive de ar, serifa e um fio
 * dourado, e o contador tem de viver do mesmo. Nada de caixas, nada de
 * sombras — só um fio a separar os números da promessa. */
.contador-home {
  width: 100%; margin: 0.7rem 0 0.2rem;
  border-bottom: 1px solid rgba(216, 181, 112, 0.35);
  padding: 0.4rem 0 0.75rem;
}
@media (min-width: 480px) { .contador-home { margin-top: 1.2rem; padding-bottom: 1.7rem; } }
.ct-linhas {
  font-family: var(--serif); font-size: clamp(3rem, 13vw, 4.2rem);
  line-height: 0.95; color: var(--lima); font-variant-numeric: tabular-nums;
}
.ct-linhas small {
  display: block; font-family: var(--sans); font-size: 0.7rem; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); margin-top: 0.75rem;
}
/* OS DOIS PAÍSES LADO A LADO, TAMBÉM NO TELEMÓVEL.
 * Empilhados custavam 183 px e empurravam o botão «Encontrar verba»
 * para 9 px abaixo do fundo do ecrã num telemóvel de 375×812. Lado a
 * lado cabem, leem-se na mesma, e o botão sobe para dentro da dobra —
 * que é o pedido repetido da fundadora: nem toda a gente faz scroll. */
.ct-paises {
  display: flex; flex-direction: row; justify-content: center;
  gap: 0; align-items: stretch; margin-top: 0.8rem;
}
.ct-pais { flex: 1 1 0; max-width: 260px; padding: 0 0.9rem; }
.ct-pais + .ct-pais { border-left: 1px solid rgba(255, 255, 255, 0.13); }
@media (min-width: 480px) {
  .ct-paises { margin-top: 2rem; }
  .ct-pais { padding: 0 1.4rem; }
}
/* O NOME DO PAÍS COM MAIS PRESENÇA, DO MESMO TAMANHO.
 * Pedido da fundadora: destacar sem aumentar. Sobe o contraste (0.45 → 0.82)
 * e o peso da letra (400 → 500); o corpo fica nos 0.62rem que já tinha. A
 * bandeira leva tamanho próprio — é ela que se vê primeiro — e espaçamento
 * normal, senão as 0.28em da caixa alta afastavam-na do nome. */
.ct-pais b {
  display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.82); margin-bottom: 0.55rem;
}
.ct-bandeira { font-size: 1.55em; line-height: 1; letter-spacing: normal; vertical-align: -0.16em; }
.ct-valor {
  display: block; font-family: var(--serif); font-size: clamp(1.2rem, 5vw, 1.5rem);
  line-height: 1.2; color: var(--branco); overflow-wrap: anywhere;
}
.ct-nota { display: block; font-size: 0.78rem; color: rgba(255, 255, 255, 0.48); margin-top: 0.45rem; }
.ct-rodape {
  font-size: 0.76rem; color: rgba(255, 255, 255, 0.42);
  margin: 0.7rem auto 0; max-width: 44ch; line-height: 1.55;
}
@media (min-width: 480px) { .ct-rodape { margin-top: 2rem; } }

/* A promessa que faltava onde faz falta.
 * «Grátis» só aparecia dentro do bloco de preços, muito DEPOIS de a
 * pessoa já ter escrito o projeto. Quem vem de um anúncio que promete
 * busca gratuita não a encontrava em lado nenhum. Fica por baixo do
 * botão, discreta: não é uma promoção, é a remoção de um receio. */
/* «Procurar é grátis. Só se paga depois de veres o que há.» NUMA LINHA SÓ.
 * Partida em duas, a segunda linha era «que há.» — e num telemóvel curto
 * essa segunda linha caía fora do ecrã, deixando a promessa a meio: «só se
 * paga depois de veres o». O `max-width: 34ch` obrigava a quebra mesmo
 * quando havia espaço de sobra; 40ch é a medida da frase inteira. No
 * telemóvel estreito, onde nem 40ch cabem, a letra encolhe o mínimo para a
 * frase acabar na mesma linha (375px → 13,6px; 430px e daí para cima →
 * tamanho normal). */
.landing-gratis {
  color: rgba(255, 255, 255, 0.6); font-size: 0.84rem;
  margin: 0.55rem 0 0; max-width: 40ch;
}
@media (max-width: 899px) {
  .ecra-landing .landing-gratis { font-size: min(0.84rem, calc(4.22vw - 2.2px)); }
}

/* o que o botão de refazer custa, dito debaixo dele */
.refazer-custo { margin-top: 0.5rem; }

/* ---------- E O BOTÃO TAMBÉM TEM DE CABER NO COMPUTADOR ----------
 *
 * O mesmo defeito, maior. Num portátil de 1440×900 o botão «Encontrar
 * verba» acabava aos 1025 px — 125 px abaixo do fundo da janela; numa
 * janela de 1280×720, 287 px abaixo. Quem abre a home no computador via
 * o radar, o nome e o número, e não via a porta de entrada.
 *
 * `--g` é a folga do computador: 0 numa janela curta (620 px) e 440 px
 * numa alta (1060+). Em ecrã grande fica o desenho de sempre — radar de
 * 168 px, nome a 81 px. Em janela curta, tudo encolhe junto.
 *
 * O desenho do radar passa a ser dado em percentagem (`closest-side`) em
 * vez de píxeis fixos: os anéis acompanham o tamanho do círculo em vez de
 * ficarem no sítio onde estavam quando ele media 168 px.
 *
 * Medido nesta folha, botão inteiro dentro da janela em todos:
 *   1000×620 → acaba aos 570 (sobram 50)   ·   1280×720 → 668 (52)
 *   1512×830 → 776 (54)                    ·   1440×900 → 845 (55)
 *   1920×1080 → 1001 (79) */
@media (min-width: 900px) {
  .ecra-landing {
    /* A janela do portátil é o caso difícil: 800px de altura com barra de
     * favoritos. A folga conta-se a partir dos 700 — abaixo disso encolhe
     * a sério, aos 1060 fica o desenho de sempre. E o fundo da secção
     * tinha 4rem de ar morto por baixo do rodapé, que ninguém via e
     * empurrava a página para fora da janela. */
    --g: clamp(0px, calc(100svh - 700px), 360px);
    padding-top: calc(12.0px + var(--g) * 11.8 / 360);
    padding-bottom: calc(10.0px + var(--g) * 30.5 / 360);
  }
  .ecra-landing .landing-rodape { padding-top: calc(6.0px + var(--g) * 6.1 / 360); }
  .ecra-landing .landing-miolo { gap: calc(8.0px + var(--g) * 8.4 / 360); }
  .ecra-landing .logo-radar {
    width: calc(84.0px + var(--g) * 42.7 / 360);
    height: calc(84.0px + var(--g) * 42.7 / 360);
    background:
      radial-gradient(circle closest-side, transparent 0 39.3%, rgba(216, 181, 112, 0.5) 39.3% 41.7%, transparent 41.7% 70.2%, rgba(216, 181, 112, 0.5) 70.2% 72.6%, transparent 72.6%),
      radial-gradient(circle closest-side, rgba(216, 181, 112, 0.35) 0 2.4%, transparent 2.4%);
  }
  .ecra-landing .logo-nome {
    font-size: calc(40.0px + var(--g) * 20.8 / 360);
    margin-top: calc(6.0px + var(--g) * 7.6 / 360);
  }
  .ecra-landing .logo-descritor { margin-top: calc(5.0px + var(--g) * 4.6 / 360); }
  .ecra-landing .contador-home {
    margin-top: calc(6.0px + var(--g) * 7.6 / 360);
    padding-bottom: calc(8.0px + var(--g) * 11.2 / 360);
  }
  .ecra-landing .ct-linhas { font-size: calc(40.0px + var(--g) * 17.3 / 360); }
  .ecra-landing .ct-linhas small { margin-top: calc(5.0px + var(--g) * 4.1 / 360); }
  .ecra-landing .ct-paises { margin-top: calc(8.0px + var(--g) * 13.7 / 360); }
  .ecra-landing .ct-rodape { margin-top: calc(5.0px + var(--g) * 3.5 / 360); }
  .ecra-landing .headline {
    font-size: calc(22.0px + var(--g) * 7.6 / 360);
    margin-top: calc(4.0px + var(--g) * 3.4 / 360);
  }
  .ecra-landing .btn-primario { margin-top: calc(6.0px + var(--g) * 4.1 / 360); }
}

/* a data de validade das certidões — só aparece nos tipos que caducam */
.docs-validade { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--tinta-suave); }
.docs-validade input { flex: 1; }
.doc-caducado { color: var(--vermelho); font-weight: 600; }

/* devolve-se ou não se devolve — a etiqueta que decide sem custar nada */
.etiqueta-devolve { border-color: var(--lima); color: #8A5A12; font-weight: 600; }
.etiqueta-nao-devolve { border-color: #2F6B4F; color: #2F6B4F; font-weight: 600; }

/* a caixa que separa o que vem do aviso do que é sobre a pessoa */
.caixa-analise { background: var(--papel); border: 1px solid var(--linha); border-radius: 12px; padding: 0.85rem 0.9rem; margin: 0.9rem 0; }
.caixa-gancho { font-size: 1rem; font-weight: 600; margin: 0 0 0.3rem; line-height: 1.35; }
.caixa-texto { font-size: 0.86rem; color: var(--tinta-suave); margin: 0 0 0.75rem; line-height: 1.45; }
.caixa-analise .btn-primario { width: 100%; }
.caixa-preco { font-size: 0.8rem; color: var(--tinta-suave); margin: 0.6rem 0 0; }
.caixa-preco b { color: #2F6B4F; }
.etiqueta-misto { border-color: #8A5A12; color: #8A5A12; font-weight: 600; }

/* SEM A PERCENTAGEM, O NOME É A ÂNCORA.
 * Tirar os 78% do cartão deixou um buraco em cima: um número pequeno, o
 * estado, e o nome com o tamanho de dantes — «agora ficou muito
 * pequeno» (fundadora). O que a pessoa consegue julgar sozinha é o nome
 * do apoio; é ele que cresce para ocupar o lugar que a percentagem
 * deixou. */
.cartao-nome-ancora { font-size: 1.18rem; line-height: 1.25; margin-top: 0.15rem; }

/* o apoio em linguagem simples, no cartão: é do aviso, é grátis, e é o
 * que enche o lugar que a análise deixou. Três linhas no máximo — quem
 * quiser o resto abre o apoio. */
.cartao-simples {
  font-size: 0.88rem; line-height: 1.45; color: var(--tinta-suave); margin: 0.5rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao-quem {
  font-size: 0.85rem; line-height: 1.4; color: var(--tinta-suave); margin: 0.35rem 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cartao-quem b { color: var(--tinta); font-weight: 600; }

/* os números da análise — pedidos pela fundadora para poder dizer «tira
 * o 3». Discretos: quem manda no bloco é o título. */
.bloco-n {
  font-style: normal; color: var(--lima); font-weight: 700;
  margin-right: 0.45rem; font-size: 0.95em;
}

/* ================= OS CRÉDITOS =================
 *
 * Um ecrã de preços lê-se em diagonal, e por isso os números têm de
 * cair todos na mesma coluna: `tabular-nums` obriga os algarismos a
 * ocupar a mesma largura, e sem isso o «1.400» e o «100» desalinham e
 * a escada deixa de se ver como escada.
 *
 * O que a pessoa compara não é o preço do bloco — é o preço POR
 * CRÉDITO. É esse que fica na linha de baixo, mais pequeno, mas
 * presente em todos: é o argumento da curva a descer. */

.cofre-creditos {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; flex-wrap: wrap;
  padding: 0.6rem 0.75rem; margin-bottom: 0.9rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 12px;
}
.cofre-creditos-saldo { font-weight: 600; font-variant-numeric: tabular-nums; }
.cofre-creditos .btn { padding: 0.5rem 0.9rem; font-size: 0.86rem; white-space: nowrap; }

.cr-saldo {
  background: var(--verde); color: var(--papel);
  border-radius: 14px; padding: 1rem 1.05rem; margin: 0.9rem 0 1.3rem;
}
.cr-saldo-numero {
  font-family: var(--serif); font-size: 1.45rem; line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.cr-saldo-oferta { margin-top: 0.35rem; font-size: 0.92rem; color: var(--lima); }
.cr-saldo .btn { width: 100%; }

.cr-acima {
  font-family: var(--serif); font-size: 1.12rem;
  margin: 1.5rem 0 0.55rem; padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--linha);
}

.cr-custos, .cr-escada, .cr-movs { list-style: none; }

.cr-custo {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--linha);
}
.cr-custo-valor { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-custo-nota { grid-column: 1 / -1; font-size: 0.86rem; color: var(--tinta-suave); }

.cr-bloco {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.8rem;
  padding: 0.65rem 0; border-bottom: 1px solid var(--linha);
}
.cr-bloco-creditos { font-weight: 600; font-variant-numeric: tabular-nums; }
.cr-bloco-preco {
  font-family: var(--serif); font-size: 1.1rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cr-bloco-cada { grid-column: 1 / -1; font-size: 0.85rem; color: var(--tinta-suave); }

.cr-assinatura { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cr-assinatura-extra { font-size: 0.92rem; color: var(--tinta-suave); margin-top: 0.3rem; }

/* O aviso de que ainda não se vende. Não é letra pequena: é a coisa
 * mais honesta deste ecrã, e fica à vista. */
.cr-em-breve {
  margin-top: 0.9rem; padding: 0.7rem 0.8rem;
  background: var(--papel); border: 1px dashed var(--linha); border-radius: 10px;
  font-size: 0.9rem;
}
.cr-nao-expiram { margin-top: 0.6rem; font-size: 0.88rem; color: var(--tinta-suave); }

.cr-mov {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.8rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--linha);
}
.cr-mov-que { grid-column: 1; grid-row: 1; font-size: 0.95rem; }
.cr-mov-quando { grid-column: 1; grid-row: 2; font-size: 0.82rem; color: var(--tinta-suave); }
/* O número fica SEMPRE na coluna da direita e ocupa as duas linhas. Sem
 * o `grid-column: 2` explícito o browser coloca-o no primeiro buraco
 * livre — que é a coluna da esquerda — e o extrato lê-se ao contrário. */
.cr-mov-cr {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cr-sem-extrato { font-size: 0.92rem; color: var(--tinta-suave); }

/* A leitura de quem vai escrever fica numa linha própria: metida ao lado
 * do preço por crédito, embrulhava em três linhas e ninguém a lia. */
.cr-bloco-alt { grid-column: 1 / -1; font-size: 0.85rem; color: var(--tinta-suave); }

/* O plano deixou de se vender à parte: a linha diz de onde vem. */
.dossier-assinatura {
  margin-top: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* A PRATELEIRA — o que já foi comprado neste projeto.
 * Três colunas no computador, duas linhas no telemóvel: o nome do apoio
 * é o que se procura, por isso é ele que fica com o espaço todo. */
.comprado-lista { list-style: none; }
.comprado-linha {
  display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 0.8rem;
  align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--linha);
}
.comprado-nome { grid-column: 1; font-weight: 500; }
.comprado-meta {
  grid-column: 1; font-size: 0.85rem; color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.comprado-abrir {
  grid-column: 2; grid-row: 1 / span 2;
  padding: 0.45rem 0.9rem; font-size: 0.85rem; white-space: nowrap;
}

/* O QUE FECHA JÁ. A marca é de tempo, não de perigo: âmbar, não
 * vermelho — um prazo apertado é uma coisa a tratar, não um erro. */
.azulejo-urgente { border-left: 4px solid var(--lima); }

/* A pergunta que vale dinheiro: a frase do aviso fica colada à
 * pergunta, para se ver que não é burocracia. */
.afinar-porque {
  margin: 0.4rem 0 0.7rem; padding-left: 0.7rem;
  border-left: 3px solid var(--lima);
  font-size: 0.9rem; color: var(--tinta-suave); font-style: italic;
}
.afinar-sim { color: var(--verde); font-weight: 600; }

/* A DOBRA DO AVISO. Nada foi cortado — mudou de sítio na atenção.
 * O resumo parece um botão porque é um: quem quiser o aviso inteiro
 * abre-o, e quem quiser decidir decide sem passar por ele. */
.aviso-dobra {
  margin: 1.1rem 0; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--papel);
}
.aviso-dobra > summary {
  cursor: pointer; padding: 0.85rem 1rem; font-weight: 500;
  list-style: none; border-radius: 12px;
}
.aviso-dobra > summary::-webkit-details-marker { display: none; }
.aviso-dobra > summary::before { content: '▸ '; color: var(--lima); font-weight: 700; }
.aviso-dobra[open] > summary::before { content: '▾ '; }
.aviso-dobra[open] > summary { border-bottom: 1px solid var(--linha); border-radius: 12px 12px 0 0; }
.aviso-dobra > .bloco { margin: 0; border: 0; border-radius: 0; }
.aviso-dobra > .bloco + .bloco { border-top: 1px solid var(--linha); }

/* A dobra das ofertas: dentro de um bloco que já tem moldura, a dobra
 * não leva outra — seria caixa dentro de caixa. */
.dobra-oferta { border: 0; background: transparent; margin: 0.6rem 0; }
.dobra-oferta > summary { padding: 0.5rem 0; }
.dobra-oferta[open] > summary { border-bottom: 0; }

/* O remate da análise: fecha com o passo seguinte, não com o que falta. */
.bloco-remate {
  background: var(--verde); color: var(--papel);
  border: 0; border-radius: 12px; padding: 1rem 1.05rem; margin-top: 1rem;
}
.bloco-remate h3 { font-family: var(--serif); font-size: 1.1rem; margin-bottom: 0.4rem; }
.bloco-remate p { font-size: 0.95rem; line-height: 1.55; }

/* O TÍTULO DA ANÁLISE. Diz UMA vez, em cima, onde começa a leitura paga
 * — em vez de nove carimbos pequenos repetidos bloco a bloco. */
.analise-titulo {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--lima);
  margin: 1.6rem 0 0.7rem; padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--lima);
}
.btn-remate {
  width: 100%; margin-top: 0.9rem;
  background: var(--papel); color: var(--verde); border: 0; font-weight: 600;
}

/* A fronteira: o que a assinatura NÃO dá. Fica à vista, e não em letra
 * pequena — é o que impede a pessoa de se sentir enganada depois. */
.dossier-fronteira {
  margin-top: 0.7rem; padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--lima); font-size: 0.9rem;
}

/* AS TRÊS COISAS — desenho da Alex. Três saídas em lista, cada uma com
 * um nome, uma frase e um botão. Antes eram dois blocos escuros a
 * competir um com o outro no fim da página. */
.oferta-titulo {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 400;
  margin: 1.8rem 0 0.2rem; padding-top: 1.2rem;
  border-top: 2px solid var(--linha);
}
/* Os três nomes são as três saídas da página — a Alex apanhou-os a ler
 * como etiquetas de secção em vez de escolhas: «tem que ficar mais
 * destacados». Sobem de tamanho e de peso, e cada um passa a ter uma
 * linha por cima que o separa do anterior. O primeiro não leva linha:
 * o título das três coisas já traz a dele, e duas seguidas fazem uma
 * cicatriz. */
.oferta-nome {
  font-family: var(--sans); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  margin: 2.2rem 0 0.7rem; padding-top: 1.3rem;
  border-top: 1px solid var(--linha);
  color: var(--verde);
}
.oferta-titulo + .oferta-nome {
  margin-top: 1.1rem; padding-top: 0; border-top: 0;
}
/* O texto da subscrição é da Alex e vem em três linhas — a segunda é a
   que diz o prazo verdadeiro («quando parares, ele para») e vive
   sozinha de propósito. `pre-line` respeita as quebras dela sem obrigar
   o código a partir a frase. */
.oferta-texto { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.8rem; white-space: pre-line; }
.btn-oferta { width: 100%; }
.oferta-nota { margin-top: 0.5rem; font-size: 0.85rem; color: var(--tinta-suave); }

/* ---------- A CAIXA (maquete do checkout) ----------
 *
 * ⚠️ TUDO AQUI VIVE DENTRO DE #ecra-caixa, e tem de continuar assim.
 * `.caixa-preco` já existia noutro sítio — é a linha «Esta análise
 * ainda é grátis» dentro da caixa da análise, na ficha. A regra nova
 * apanhou-a por cima com um white-space:nowrap e a frase saiu pela
 * borda do cartão fora. Um nome de classe é um espaço partilhado. */
#ecra-caixa .caixa-resumo {
  margin-top: 1rem; padding: 1rem;
  background: var(--papel); border: 1px solid var(--linha); border-radius: 12px;
}
#ecra-caixa .caixa-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
#ecra-caixa .caixa-item { font-weight: 600; }
#ecra-caixa .caixa-preco {
  font-family: var(--serif); font-size: 1.15rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#ecra-caixa .caixa-rende { margin-top: 0.35rem; font-size: 0.88rem; color: var(--tinta-suave); }
#ecra-caixa .caixa-total {
  margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--linha);
  font-weight: 600;
}
#ecra-caixa .caixa-iva { margin-top: 0.2rem; font-size: 0.85rem; color: var(--tinta-suave); }
#ecra-caixa .caixa-email { font-variant-numeric: tabular-nums; }
#ecra-caixa .caixa-email-falta { color: var(--tinta-suave); font-size: 0.9rem; }
#ecra-caixa .caixa-metodos { list-style: none; padding: 0; margin: 0.4rem 0 0; }
#ecra-caixa .caixa-metodos li { padding: 0.55rem 0; border-bottom: 1px solid var(--linha); }
#ecra-caixa .caixa-metodos label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; }
#ecra-caixa .caixa-pagar { width: 100%; margin-top: 0.3rem; }
#ecra-caixa .caixa-maquete { margin-top: 1.2rem; font-size: 0.85rem; color: var(--tinta-suave); }
#ecra-caixa .caixa-entram { margin-top: 0.6rem; font-size: 0.85rem; color: var(--tinta-suave); }

/* Cada degrau da escada tem o seu «Carregar». A linha inteira já foi
   clicável, sem nada que o dissesse — e uma zona clicável que não se vê
   não é um botão, é um segredo. */
.cr-escada li { list-style: none; }
.cr-bloco-btn {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 0.5rem; padding: 0.35rem 1.1rem; font-size: 0.9rem;
}
.cr-btn-sub { margin-top: 0.8rem; }
.caixa-ponte { margin: 0.2rem 0 0.2rem; font-size: 0.98rem; line-height: 1.5; }
/* A distinção entre as duas análises, escrita pela Alex à mão. Vive
   colada ao nome porque é o nome que ela estava a ler quando parou. */
.cr-custo-qual { font-weight: 400; color: var(--tinta-suave); font-size: 0.85rem; }
.cr-resumo { margin-top: 0.6rem; font-variant-numeric: tabular-nums; }
.oferta-dossier { margin-top: 1.4rem; }
.dossier-tem-sub { margin-top: 1.2rem; font-weight: 600; }