/* Terrae Casa: estilos da app (casa.terrae.pt e terrae.pt/casa) */

/* Tipos de letra servidos pela própria app (sem Google Fonts).
   Manrope só existe até ao peso 500: os pesos 600 a 800 usam o 500
   com negrito do navegador até haver os ficheiros próprios. */
@font-face { font-family: 'Arya'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/arya-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Arya'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/arya-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/manrope-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/manrope-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/manrope-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/manrope-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/manrope-latin-800-normal.woff2') format('woff2'); }

:root {
  --tinta: #1D1D1B;
  --areia: #E4DDD3;
  --chao: #F2EDE5;
  --branco: #FFFFFF;
  --siena: #976E53;
  --siena-escura: #7A563F;
  --siena-clara: #C79A7A;
  --salva: #5E6A55;
  --verde: #3F6B45;
  --verde-suave: #E7EAE2;
  --aviso: #A35A1E;
  --aviso-suave: #F1D9B8;
  --ambar: #D9A46E;
  --linha: #DDD5C8;
  --linha-suave: #EFE8DF;
  --texto-2: #4A4944;
  --texto-3: #6B6A63;
  --escuro-2: #2B2925;
  --escuro-3: #3A3733;
  --escuro-texto: #DDD6CB;
  --escuro-texto-2: #A9A49B;
  --escuro-texto-3: #CFC7BB;
  --serif: Arya, Georgia, 'Times New Roman', serif;
  --sans: Manrope, 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --raio: 14px;
  --raio-g: 16px;
  --barra-h: 64px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--chao); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--chao);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body.escuro, html.escuro { background: var(--tinta); }
body.com-folha { overflow: hidden; }

h1, h2, h3, p { margin: 0; }
a { color: var(--siena); }
a:hover { color: var(--siena-escura); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; border-radius: 6px; }
.escuro :focus-visible, .ecra-escuro :focus-visible { outline-color: var(--chao); }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

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

.saltar {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--tinta); color: var(--chao); padding: 10px 14px; border-radius: 10px;
  font-weight: 800; text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--chao); }

/* ---------- Coluna ---------- */
#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--chao);
  position: relative;
}
body.escuro #app { background: var(--tinta); color: var(--chao); }

.ecra {
  padding: calc(18px + env(safe-area-inset-top)) 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ecra.com-barra { padding-bottom: calc(var(--barra-h) + 32px + env(safe-area-inset-bottom)); }
.ecra-escuro { background: var(--tinta); color: var(--chao); }
.ecra-escuro a { color: var(--siena-clara); }
.ecra-escuro a:hover { color: #E0B898; }

.topo { display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.marca { font-family: var(--serif); font-size: 20px; letter-spacing: 6px; font-weight: 700; line-height: 1; }
.avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tinta); color: var(--chao);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; text-decoration: none; border: 0;
}
.avatar:hover { color: var(--chao); background: #000; }

.voltar {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  min-height: 44px; font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--siena); margin: -6px 0 -8px -4px; padding: 0 4px;
}
.voltar svg { width: 18px; height: 18px; }

/* ---------- Tipografia ---------- */
.olho {
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  font-weight: 800; color: var(--siena); line-height: 1.4;
}
.ecra-escuro .olho, .cartao-escuro .olho { color: var(--siena-clara); }
.titulo-sec {
  font-size: 12.5px; font-weight: 800; color: var(--salva);
  letter-spacing: 1.2px; text-transform: uppercase;
}
.ecra-escuro .titulo-sec { color: var(--escuro-texto-2); }
.h-serif { font-family: var(--serif); font-weight: 700; line-height: 1.05; }
.h-xl { font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1.02; }
.h-l { font-family: var(--serif); font-weight: 700; font-size: 36px; line-height: 1.05; }
.h-m { font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.15; }
.num-xl { font-family: var(--serif); font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -0.5px; }
.num-l { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.1; }
.sub { font-size: 14px; color: var(--salva); }
.texto-2 { color: var(--texto-2); }
.texto-3 { color: var(--texto-3); }
.peq { font-size: 12.5px; line-height: 1.5; }
.mini { font-size: 11.5px; line-height: 1.45; color: var(--texto-3); }
.ecra-escuro .mini, .ecra-escuro .peq { color: var(--escuro-texto-2); }
.positivo { color: var(--verde); font-weight: 700; }
.negativo { color: var(--aviso); font-weight: 700; }
.bloco { display: flex; flex-direction: column; gap: 4px; }
.bloco-8 { display: flex; flex-direction: column; gap: 8px; }
.bloco-10 { display: flex; flex-direction: column; gap: 10px; }
.bloco-14 { display: flex; flex-direction: column; gap: 14px; }
.linha-entre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.paragrafo { font-size: 13.5px; line-height: 1.5; }

/* ---------- Cartões ---------- */
.cartao {
  background: var(--branco); border-radius: var(--raio-g); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.cartao-areia { background: var(--areia); border-radius: var(--raio-g); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.cartao-escuro {
  background: var(--tinta); color: var(--chao); border-radius: var(--raio);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; text-decoration: none;
}
a.cartao-escuro:hover { color: var(--chao); background: #000; }
.cartao-escuro-2 { background: var(--escuro-2); border-radius: var(--raio-g); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.grelha-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mosaico {
  background: var(--branco); border-radius: var(--raio); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mosaico .rotulo { font-size: 12px; color: var(--salva); }
.mosaico .valor { font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
a.mosaico-link {
  border-radius: var(--raio); padding: 14px; text-decoration: none;
  display: flex; flex-direction: column; gap: 2px; min-height: 44px;
  background: var(--branco); color: var(--tinta);
}
a.mosaico-link .olho { font-size: 11px; letter-spacing: 1.4px; }
a.mosaico-link .frase { font-size: 14px; font-weight: 700; }
a.mosaico-link.escuro { background: var(--tinta); color: var(--chao); }
a.mosaico-link.escuro .olho { color: var(--siena-clara); }
a.mosaico-link:hover { filter: brightness(0.97); }

/* Lista de casas */
.casa-item {
  background: var(--branco); border-radius: var(--raio); padding: 14px;
  display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tinta);
  min-height: 72px;
}
.casa-item:hover { color: var(--tinta); background: #FCFBF9; }
.casa-icone {
  width: 52px; height: 52px; border-radius: 10px; background: var(--areia);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.casa-meio { flex-grow: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.casa-nome { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; }
.casa-uso { font-size: 12.5px; color: var(--salva); }
.casa-dir { text-align: right; flex-shrink: 0; }
.casa-valor { font-weight: 800; font-size: 15px; white-space: nowrap; }
.casa-var { font-size: 12px; font-weight: 700; }

.linha-link {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  min-height: 44px; text-decoration: none; color: var(--tinta); font-size: 14px; padding: 0 2px;
}
.linha-link:hover { color: var(--tinta); }
.linha-link .ver { color: var(--siena); font-weight: 700; flex-shrink: 0; }

.prazo {
  display: flex; gap: 12px; align-items: center; background: var(--branco);
  border-radius: 12px; padding: 10px 14px; text-decoration: none; color: var(--tinta); min-height: 52px;
}
.prazo:hover { color: var(--tinta); }
.prazo-data { font-weight: 800; font-size: 13px; color: var(--siena); min-width: 78px; flex-shrink: 0; }
.prazo-texto { font-size: 13.5px; line-height: 1.4; }

/* Planos */
.plano { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--linha-suave); }
.plano:first-of-type { border-top: 0; padding-top: 0; }
.plano-texto { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.plano-nota { font-size: 12.5px; color: var(--salva); overflow-wrap: anywhere; }

/* ---------- Gráficos ---------- */
.grafico { width: 100%; height: auto; display: block; overflow: visible; }
.grafico-cartao { background: var(--branco); border-radius: var(--raio-g); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 6px; }

.barra-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.barra-5 span { height: 10px; border-radius: 3px; background: var(--escuro-3); }
.barra-5 span.ativo { background: var(--siena-clara); }
.barra-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.barra-6 span { height: 8px; border-radius: 3px; background: var(--linha); }
.barra-6 .ok { background: var(--verde); }
.barra-6 .quase { background: var(--ambar); }
.barra-6 .falta { background: var(--aviso); }

.factos { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; gap: 12px 14px; align-items: baseline; }
.factos .num-l { white-space: nowrap; }
.factos .facto-texto { font-size: 13.5px; line-height: 1.4; color: var(--escuro-texto); }

/* ---------- Botões ---------- */
.botao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; padding: 14px 16px;
  border: 0; border-radius: 12px; text-align: center; text-decoration: none;
  font-family: var(--sans); font-size: 15.5px; font-weight: 800; line-height: 1.25;
  background: var(--siena); color: var(--branco);
  transition: background-color .15s ease, opacity .15s ease;
}
.botao:hover { background: var(--siena-escura); color: var(--branco); }
.botao[disabled] { opacity: .6; cursor: progress; }
.botao.tinta { background: var(--tinta); color: var(--chao); }
.botao.tinta:hover { background: #000; color: var(--chao); }
.botao.claro { background: var(--siena-clara); color: var(--tinta); }
.botao.claro:hover { background: #D6AA8A; color: var(--tinta); }
.botao.contorno { background: transparent; color: var(--tinta); border: 1.5px solid var(--linha); }
.botao.contorno:hover { background: var(--branco); color: var(--tinta); }
.ecra-escuro .botao.contorno { color: var(--chao); border-color: var(--escuro-3); }
.ecra-escuro .botao.contorno:hover { background: var(--escuro-2); }
.botao.perigo { background: var(--aviso); color: var(--branco); }
.botao.perigo:hover { background: #8A4A16; }
.botao.peq { width: auto; min-height: 44px; padding: 10px 14px; font-size: 13px; border-radius: 10px; }
.botao-texto {
  background: none; border: 0; padding: 0 4px; min-height: 44px;
  font-weight: 700; font-size: 14px; color: var(--siena); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.botao-texto:hover { color: var(--siena-escura); text-decoration: underline; }
.ecra-escuro .botao-texto { color: var(--siena-clara); }
.botao-texto.perigo { color: var(--aviso); }
.botoes { display: flex; flex-direction: column; gap: 10px; }
.botoes-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.botoes-linha > * { flex: 1 1 140px; }

/* Interruptor */
.interruptor-linha {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  background: var(--branco); border-radius: 12px; padding: 10px 14px; min-height: 56px;
}
.interruptor-linha .txt { display: flex; flex-direction: column; gap: 2px; font-size: 14px; min-width: 0; }
.interruptor-linha .txt small { font-size: 12.5px; color: var(--salva); line-height: 1.4; }
.ecra-escuro .interruptor-linha, .cartao-escuro .interruptor-linha { background: var(--escuro-2); }
.ecra-escuro .interruptor-linha .txt small, .cartao-escuro .interruptor-linha .txt small { color: var(--escuro-texto-2); }
.interruptor {
  position: relative; flex-shrink: 0; width: 52px; height: 32px; border-radius: 999px;
  border: 0; background: #C9C1B5; padding: 0; margin: 6px 0;
  transition: background-color .15s ease;
}
.interruptor::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--branco); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.interruptor[aria-checked="true"] { background: var(--verde); }
.interruptor[aria-checked="true"]::after { transform: translateX(20px); }
.interruptor[disabled] { opacity: .6; }

/* ---------- Formulários ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo > label, .campo > .rotulo, fieldset > legend { font-size: 13px; font-weight: 800; color: var(--tinta); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
fieldset > legend { padding: 0; margin-bottom: 8px; }
.entrada, select.entrada, textarea.entrada {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.3;
  -webkit-appearance: none; appearance: none;
}
select.entrada {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23976E53' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
textarea.entrada { min-height: 96px; resize: vertical; }
.entrada:focus-visible { outline: 3px solid var(--siena); outline-offset: 1px; border-color: var(--siena); }
.entrada[aria-invalid="true"] { border-color: var(--aviso); }
.ajuda { font-size: 12.5px; color: var(--salva); line-height: 1.45; }
.info-cp { font-size: 13px; color: var(--verde); font-weight: 700; min-height: 18px; }
.info-cp.falhou { color: var(--aviso); }
.erro-form {
  background: #FBEBDD; color: #7A3E0F; border-radius: 10px; padding: 10px 12px;
  font-size: 13.5px; font-weight: 700; line-height: 1.4;
}
.erro-form:empty { display: none; }
.ok-form { background: var(--verde-suave); color: var(--verde); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; font-weight: 700; }
.grelha-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.escondido { display: none !important; }

/* Fichas (rádio em forma de pastilha) */
.fichas { display: flex; gap: 8px; flex-wrap: wrap; }
.ficha { position: relative; }
.ficha input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ficha span {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 48px; padding: 10px 14px;
  border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
  font-size: 14px; font-weight: 700; cursor: pointer; user-select: none;
}
.ficha input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--chao); }
.ficha input:focus-visible + span { outline: 3px solid var(--siena); outline-offset: 2px; }

/* Caixas de consentimento */
.consent { display: flex; gap: 12px; align-items: flex-start; }
.consent input {
  flex-shrink: 0; width: 24px; height: 24px; margin: 10px 0 0; accent-color: var(--siena);
}
.consent label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; padding: 8px 0; min-height: 44px; cursor: pointer; }
.consent label small { font-size: 12.5px; font-weight: 400; color: var(--salva); line-height: 1.4; }

/* ---------- Pastilhas de estado ---------- */
.pastilha {
  display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px;
  padding: 3px 9px; white-space: nowrap; line-height: 1.4;
}
.pastilha.falta { color: var(--branco); background: var(--aviso); }
.pastilha.quase { color: var(--tinta); background: var(--aviso-suave); }
.pastilha.ok { color: var(--verde); padding-left: 0; padding-right: 0; }
.pastilha.na { color: var(--texto-3); padding-left: 0; padding-right: 0; }
.pastilha.duvida { color: var(--tinta); background: var(--areia); }

.doc {
  background: var(--branco); border-radius: var(--raio); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  border: 0; text-align: left; min-height: 52px; color: var(--tinta);
}
.doc:hover { background: #FCFBF9; }
.doc-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.doc-nome { font-size: 14.5px; font-weight: 800; }
.doc-explica { font-size: 12.5px; color: var(--salva); line-height: 1.45; }

/* Avisos (Carta) */
.aviso-item {
  background: var(--branco); border-radius: var(--raio); padding: 13px 14px;
  display: flex; gap: 12px; text-decoration: none; color: var(--tinta);
}
.aviso-item:hover { color: var(--tinta); background: #FCFBF9; }
.aviso-icone { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aviso-texto { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.4; min-width: 0; }

/* Seletor de casa */
.seletor { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.seletor::-webkit-scrollbar { display: none; }
.seletor a {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
  font-size: 13.5px; font-weight: 700; text-decoration: none;
}
.seletor a[aria-current="true"] { background: var(--tinta); color: var(--chao); border-color: var(--tinta); }

/* Consultor */
.consultor { display: flex; gap: 12px; align-items: center; background: var(--branco); border-radius: var(--raio); padding: 12px 14px; }
.consultor-ini {
  width: 40px; height: 40px; border-radius: 50%; background: var(--salva); color: var(--branco);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.consultor-txt { flex-grow: 1; font-size: 13px; line-height: 1.35; min-width: 0; }

/* Fotografias e ficheiros */
.miniaturas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.miniatura {
  display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 10px;
  overflow: hidden; background: var(--areia);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura.vazia { animation: aparecer 1s ease infinite alternate; }
.envios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.envios:empty { display: none; }
.envio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; font-size: 13px; background: var(--chao); border-radius: 10px; padding: 8px 12px; }
.envio-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.envio progress { grid-column: 1 / -1; width: 100%; height: 6px; accent-color: var(--siena); }
.envio-estado { font-size: 12.5px; text-align: right; }
.folha .envio { background: var(--branco); }
.ficheiros { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ficheiro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; background: var(--branco); border-radius: 12px; padding: 8px 12px; }
.ficheiro-txt { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.ficheiro-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.ficheiro-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; }
.visor-img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: var(--areia); }
@media (prefers-reduced-motion: reduce) { .miniatura.vazia { animation: none; } }

/* Melhorar a estimativa */
.progresso { height: 6px; border-radius: 6px; background: var(--areia); overflow: hidden; }
.progresso span { display: block; height: 100%; background: var(--verde); border-radius: 6px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao {
  min-height: 52px; min-width: 52px; padding: 12px 18px; border-radius: 999px;
  border: 1px solid var(--linha); background: var(--branco); color: var(--tinta);
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.2;
}
.opcao:hover { border-color: var(--siena); }
.opcao[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--chao); }
.opcao[disabled] { opacity: .55; cursor: progress; }
.detalhes { background: var(--branco); border-radius: var(--raio); padding: 0 14px; }
.detalhes > summary { min-height: 52px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; cursor: pointer; list-style: none; }
.detalhes > summary::-webkit-details-marker { display: none; }
.detalhes > summary::after { content: '+'; margin-left: auto; font-size: 20px; color: var(--siena); }
.detalhes[open] > summary::after { content: '\2212'; }
.detalhes[open] { padding-bottom: 14px; }
.detalhes .ficha span { background: var(--chao); }

/* Confirmação dentro da página */
.confirmar { background: #FBEBDD; border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Entrada ---------- */
.entrada-ecra { min-height: 100vh; min-height: 100dvh; padding: calc(28px + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom)); gap: 22px; }
.entrada-heroi { display: flex; flex-direction: column; gap: 14px; padding: 18px 0 4px; }
.entrada-heroi p { font-size: 15.5px; line-height: 1.55; color: var(--escuro-texto-3); }
.entrada-cartao {
  background: var(--chao); color: var(--tinta); border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.entrada-cartao a { color: var(--siena); }
.entrada-cartao .botao-texto { color: var(--siena); }
.entrada-cartao :focus-visible { outline-color: var(--siena); }
.entrada-nota { font-size: 12.5px; color: var(--salva); text-align: center; }
.aviso-escuro { background: var(--escuro-2); color: var(--chao); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }

/* ---------- Barra de separadores ---------- */
.barra {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--branco); border-top: 1px solid var(--linha);
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom));
}
.barra a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px; font-size: 10.5px; font-weight: 600; text-align: center; line-height: 1.15; color: var(--texto-3); text-decoration: none;
  border-radius: 10px;
}
.barra a svg { width: 22px; height: 22px; }
.barra a[aria-current="page"] { color: var(--tinta); font-weight: 800; }
.barra a:hover { color: var(--tinta); }

/* ---------- Folha (diálogo) ---------- */
.folha-fundo {
  position: fixed; inset: 0; z-index: 50; background: rgba(29, 29, 27, .55);
  display: flex; align-items: flex-end; justify-content: center;
  animation: aparecer .18s ease;
}
.folha {
  width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--chao); color: var(--tinta);
  border-radius: 20px 20px 0 0; padding: 8px 20px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
  animation: subir .22s ease;
}
.folha-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; position: sticky; top: -8px; background: var(--chao); padding-top: 8px; z-index: 1; }
.folha-topo h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; }
.folha-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--areia); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--tinta); }
.folha-x svg { width: 20px; height: 20px; }

@media (min-width: 560px) {
  .folha-fundo { align-items: center; padding: 24px; }
  .folha { border-radius: 20px; }
}

/* ---------- Estados ---------- */
.carregar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 60vh; text-align: center; padding: 24px; }
.pulso { width: 120px; height: 4px; border-radius: 4px; background: var(--areia); overflow: hidden; position: relative; }
.pulso::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--siena); border-radius: 4px; animation: deslizar 1.4s ease-in-out infinite; }
.ecra-escuro .pulso { background: var(--escuro-3); }
.ecra-escuro .pulso::after { background: var(--siena-clara); }

.calculo {
  position: fixed; inset: 0; z-index: 60; background: var(--tinta); color: var(--chao);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 32px; text-align: center;
}
.calculo .pulso { background: var(--escuro-3); }
.calculo .pulso::after { background: var(--siena-clara); }
.calculo p { font-family: var(--serif); font-size: 28px; line-height: 1.15; font-weight: 700; max-width: 320px; }
.calculo small { font-size: 13.5px; color: var(--escuro-texto-2); max-width: 300px; }

.vazio { background: var(--branco); border-radius: var(--raio-g); padding: 18px; display: flex; flex-direction: column; gap: 10px; }

#aviso {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(var(--barra-h) + 20px + env(safe-area-inset-bottom));
  width: calc(100% - 32px); max-width: 448px; pointer-events: none;
}
#aviso .toast {
  background: var(--tinta); color: var(--chao); border-radius: 12px; padding: 12px 16px;
  font-size: 14px; font-weight: 700; line-height: 1.4; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  animation: subir .2s ease; pointer-events: auto;
}
#aviso .toast.erro { background: #7A3E0F; }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes deslizar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pulso::after { animation: none; width: 100%; opacity: .5; }
}

@media (max-width: 359px) {
  .ecra { padding-left: 16px; padding-right: 16px; }
  .num-xl { font-size: 40px; }
  .h-xl { font-size: 38px; }
  .h-l { font-size: 30px; }
  .grelha-campos { grid-template-columns: 1fr; }
}

noscript p { max-width: 420px; margin: 40px auto; padding: 0 20px; font-family: var(--sans); color: var(--tinta); line-height: 1.5; }

/* Rodapé da entrada: ajuda e informação legal antes de criar conta */
.entrada-rodape { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; padding: 14px 0 4px; }
.entrada-rodape a { color: var(--chao); font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }
.entrada-heroi .botao.contorno { align-self: flex-start; margin-top: 4px; }

/* Painel: o que precisa de si e o que mudou desde a última visita */
.lista-acoes, .lista-novidades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-acoes a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 14px; background: var(--branco); border-radius: 12px; color: var(--tinta); font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1.35; }
.lista-acoes a::after { content: '›'; color: var(--siena); font-size: 20px; font-weight: 400; }
.lista-acoes a:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }
.lista-novidades li { padding: 10px 14px; background: var(--verde-suave); border-radius: 12px; font-size: 14px; line-height: 1.4; color: var(--tinta); }
.mosaico .mini { display: block; font-size: 11.5px; line-height: 1.35; color: var(--texto-3); margin-top: 2px; }

/* Mural de Novidades */
.novidade { background: var(--branco); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.novidade.por-ver { box-shadow: inset 0 0 0 2px var(--siena-clara); }
.novidade-img { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.novidade-corpo { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.novidade-corpo .olho { color: var(--siena); }
.barra a { position: relative; }
.barra-marca { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--siena); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }

/* Investimento */
.inv-casa .mosaico { background: var(--chao); }
.inv-tabela { display: flex; flex-direction: column; }
.inv-sub { font-size: 12.5px; font-weight: 800; color: var(--salva); padding: 4px 0; }
.inv-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--linha-suave); font-size: 14px; }
.inv-linha span { display: flex; flex-direction: column; min-width: 0; }
.inv-linha small { font-size: 11.5px; color: var(--texto-3); line-height: 1.35; }
.inv-linha b { flex-shrink: 0; text-align: right; }

/* Diagnósticos */
.diag-lista { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.diag-item { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: var(--branco); border-radius: var(--raio); padding: 14px 16px; text-decoration: none; color: var(--tinta); min-height: 44px; }
.diag-item:hover { background: #fff; box-shadow: 0 0 0 1.5px var(--linha); color: var(--tinta); }
.diag-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.diag-txt b { font-size: 15px; font-weight: 800; }
.diag-txt small { font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }
.diag-txt small.diag-ult { color: var(--salva); font-weight: 700; }
.diag-tempo { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: var(--siena); white-space: nowrap; }
.veredicto { border-radius: var(--raio); padding: 14px 16px; font-size: 14.5px; line-height: 1.5; font-weight: 600; border-left: 4px solid var(--salva); background: var(--branco); }
.veredicto.bom { border-left-color: var(--verde); background: var(--verde-suave); }
.veredicto.atencao { border-left-color: var(--aviso); background: #F6E6D8; }
.mosaico.diag-dest .valor { font-family: var(--serif); font-size: 22px; line-height: 1.15; }
.mosaico.diag-dest.largo { grid-column: 1 / -1; }
.inv-linha b.forte { font-size: 15.5px; }
.tabela-rolar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-diag { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela-diag th, .tabela-diag td { padding: 9px 8px; text-align: right; border-top: 1px solid var(--linha-suave); white-space: nowrap; }
.tabela-diag thead th { font-size: 11px; font-weight: 800; color: var(--salva); border-top: 0; }
.tabela-diag th[scope="row"], .tabela-diag thead th:first-child { text-align: left; font-weight: 700; }
.tabela-diag tr.destaque th, .tabela-diag tr.destaque td { color: var(--siena); font-weight: 800; }
.diag-sec h2 { margin-bottom: 4px; }
.diag-pontos { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
.diag-prox { color: var(--chao); }
.ficha-link { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--linha); color: var(--tinta); text-decoration: none; font-size: 13px; font-weight: 700; }
.ficha-link.ativa { background: var(--tinta); border-color: var(--tinta); color: var(--chao); }
.campo-local { display: flex; flex-direction: column; gap: 12px; }
.cartao .inv-tabela > .inv-linha:first-child { border-top: 0; }

/* Fotografias: a casa, a equipa, a entrada */
.casa-capa { position: relative; margin: 0 -20px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--areia); }
.casa-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.casa-capa.vazia { margin: 0; aspect-ratio: auto; border-radius: var(--raio-g); border: 1.5px dashed var(--areia-esc, #CDBFAE); background: var(--branco); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px 18px; color: var(--tinta); font-family: inherit; cursor: pointer; text-align: center; }
.casa-capa.vazia b { font-size: 15px; }
.casa-capa.vazia small { font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }
.casa-capa.vazia .botoes-linha { margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.casa-icone.com-foto { overflow: hidden; background: var(--areia); }
.casa-icone.com-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.caras { display: inline-flex; flex-shrink: 0; }
.caras img { border-radius: 50%; object-fit: cover; border: 2px solid var(--branco); background: var(--areia); }
.caras img + img { margin-left: -12px; }
.prox-quem { display: flex; align-items: center; gap: 10px; }
.prox-quem small { font-size: 12px; color: var(--escuro-texto-2, #CFC6B8); line-height: 1.35; }
.prox-quem.claro small { color: var(--texto-3); font-weight: 700; }
.diag-prox .caras img { border-color: var(--escuro-2, #2B2A27); }
.entrada-foto { margin: 0 -24px -6px; aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.entrada-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entrada-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 27, 0) 45%, var(--tinta) 100%); }
.vazio-foto { width: calc(100% + 36px); margin: -18px -18px 4px; border-radius: var(--raio-g) var(--raio-g) 0 0; aspect-ratio: 12 / 7; object-fit: cover; display: block; }

/* Gráficos dos diagnósticos */
.grafico-cartao-diag { margin: 0; gap: 8px; }
.grafico-cartao-diag figcaption { margin: 0; }
.grafico-diag { max-width: 100%; }
.grafico-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--texto-3); justify-content: center; margin: 0; }
.grafico-legenda.forte { color: var(--tinta); font-weight: 800; font-size: 14px; margin-top: -6px; }
.grafico-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.indices { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.indices li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.indice-rot { font-size: 13.5px; font-weight: 600; }
.indice-val { font-size: 14px; font-weight: 800; }
.indice-barra { grid-column: 1 / -1; height: 8px; border-radius: 4px; background: var(--areia); overflow: hidden; }
.indice-barra i { display: block; height: 100%; border-radius: 4px; background: var(--siena); }
.proporcao { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--areia); }
.proporcao i { display: block; height: 100%; }
.proporcao-leg { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.proporcao-leg li { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.proporcao-leg li i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.proporcao-leg small { color: var(--texto-3); font-weight: 700; min-width: 34px; text-align: right; }

/* Casa partilhada */
.selo-partilha { align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--salva); background: var(--verde-suave); border-radius: 999px; padding: 4px 10px; }
.lista-partilhas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-partilhas li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha-suave); }
.lista-partilhas li span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.lista-partilhas small { color: var(--texto-3); font-size: 12px; }

/* Manutenção */
.lista-tarefas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tarefa { background: var(--branco); border-radius: var(--raio); padding: 12px 14px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-left: 4px solid var(--salva); }
.tarefa.atrasada { border-left-color: var(--aviso); }
.tarefa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarefa-txt b { font-size: 14.5px; }
.tarefa-txt small { font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }
.tarefa-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
button.ficha-link { background: transparent; font-family: inherit; cursor: pointer; }
button.ficha-link:hover { border-color: var(--siena); }

/* Alertas de compra: imóveis da carteira */
.carteira { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.carteira a { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--tinta); background: var(--chao); border-radius: 12px; padding: 8px; }
.carteira img { width: 72px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--areia); }
.carteira span { display: flex; flex-direction: column; min-width: 0; }
.carteira b { font-size: 14px; }
.carteira small { font-size: 12.5px; color: var(--texto-3); }

/* Joaquim */
.cartao-joaquim { display: flex; gap: 12px; align-items: center; background: var(--branco); border-radius: var(--raio-g); padding: 14px 16px; text-decoration: none; color: var(--tinta); min-height: 44px; }
.cartao-joaquim:hover { box-shadow: 0 0 0 1.5px var(--linha); color: var(--tinta); }
.cartao-joaquim span:last-child { display: flex; flex-direction: column; gap: 2px; }
.cartao-joaquim b { font-size: 15px; }
.cartao-joaquim small { font-size: 12.5px; color: var(--texto-3); line-height: 1.4; }
.jq-ini { width: 40px; height: 40px; border-radius: 50%; background: var(--siena); color: #fff; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 20px; flex-shrink: 0; }
.ia-aviso { margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: var(--salva); background: var(--verde-suave); border-radius: 10px; padding: 8px 12px; font-weight: 600; }
.sugestoes-chat { display: flex; flex-wrap: wrap; gap: 8px; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 88%; border-radius: 16px; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; }
.msg p { margin: 0; }
.msg.eu { align-self: flex-end; background: var(--tinta); color: var(--chao); border-bottom-right-radius: 4px; }
.msg.ele { align-self: flex-start; background: var(--branco); color: var(--tinta); border-bottom-left-radius: 4px; }
.msg-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.a-escrever { display: flex; gap: 5px; padding: 14px 16px; }
.a-escrever span { width: 7px; height: 7px; border-radius: 50%; background: var(--texto-3); animation: pisca 1.2s infinite ease-in-out; }
.a-escrever span:nth-child(2) { animation-delay: .2s; } .a-escrever span:nth-child(3) { animation-delay: .4s; }
@keyframes pisca { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .a-escrever span { animation: none; opacity: .6; } }
.chat-form { position: sticky; bottom: calc(var(--barra-h, 64px) + 8px + env(safe-area-inset-bottom)); display: flex; gap: 8px; align-items: flex-end; background: var(--chao); padding: 8px 0; }
.chat-form textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; }

/* Informação legal */
.links-legais { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; }
.links-legais a { color: var(--texto-2); }

/* Dar opinião (fase de testes) */
.opiniao-fab { position: fixed; z-index: 19; right: max(14px, calc(50% - 240px + 14px)); bottom: calc(var(--barra-h) + 14px + env(safe-area-inset-bottom)); display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 0; background: var(--siena); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; box-shadow: 0 6px 18px rgba(29, 29, 27, .22); cursor: pointer; }
.opiniao-fab:hover { background: #7E5A43; }
.opiniao-fab:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.joaquim-ecra ~ .opiniao-fab, body.com-folha .opiniao-fab { display: none; }
.rotulo-campo { font-size: 14px; font-weight: 700; }
@media print { .opiniao-fab { display: none; } }

/* Fotografias: topo do Início, faixas dos diagnósticos e miniaturas */
.inicio-heroi { position: relative; margin: 0 -20px; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; background: var(--tinta); color: var(--chao); }
.inicio-heroi > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.inicio-heroi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 29, 27, .05) 0%, rgba(29, 29, 27, .35) 45%, rgba(29, 29, 27, .88) 100%); }
.inicio-heroi-txt { position: relative; z-index: 1; padding: 90px 20px 22px; display: flex; flex-direction: column; gap: 2px; width: 100%; }
.inicio-heroi-txt .sub { color: var(--chao); opacity: .92; }
.inicio-heroi-txt .olho { color: #E9C9AE; }
.inicio-heroi-txt .num-xl, .inicio-heroi-txt .h-m { color: #fff; }
.inicio-heroi-txt .positivo { color: #B9D7A8; }
.inicio-heroi-txt .negativo { color: #F2B8A0; }
.faixa-foto { margin: 0 -20px; aspect-ratio: 15 / 8; overflow: hidden; background: var(--areia); }
.faixa-foto.baixa { aspect-ratio: 3 / 1; }
.faixa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diag-mini { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--areia); }
.diag-item { justify-content: flex-start; }
.diag-item .diag-txt { flex: 1; }

/* Saúde da casa e renegociação */
.saude-topo { display: flex; align-items: center; gap: 14px; }
.saude-topo svg { flex-shrink: 0; }
.mais-pontos { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--verde); background: var(--verde-suave); border-radius: 999px; padding: 3px 9px; }
.cartao.renegociar { border: 1.5px solid var(--verde-suave); }

/* Modo venda */
.etapas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; counter-reset: e; }
.etapas li { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; color: var(--texto-3); text-align: center; line-height: 1.2; }
.etapas li span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--areia); color: var(--texto-2); font-size: 12px; font-weight: 800; }
.etapas li.feita span { background: var(--verde); color: #fff; }
.etapas li.atual span { background: var(--siena); color: #fff; box-shadow: 0 0 0 4px rgba(151, 110, 83, .2); }
.etapas li.atual { color: var(--tinta); }
.preco-venda { display: flex; gap: 6px; align-items: center; }
.preco-venda .entrada { width: 120px; min-height: 40px; padding: 6px 10px; text-align: right; }
.lista-venda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-venda li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--linha-suave); font-size: 14px; line-height: 1.45; }
.lista-venda li input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--verde); }
.lista-venda li.feito label, .lista-venda li.feito > span:last-child { color: var(--texto-3); text-decoration: line-through; }
.lista-venda a { color: var(--tinta); font-weight: 700; }
.marca-auto { width: 20px; text-align: center; flex-shrink: 0; color: var(--verde); font-weight: 800; }

/* Segunda Opinião: fotografias do anúncio */
.fotos-diag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fotos-diag:empty { display: none; }
.fotos-diag li { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--areia); }
.fotos-diag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos-diag button { position: absolute; top: 4px; right: 4px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(29, 29, 27, .72); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }

/* A Bússola */
.bz-prog { height: 6px; border-radius: 999px; background: var(--areia); overflow: hidden; margin-top: 12px; }
.bz-prog i { display: block; height: 100%; background: var(--siena); border-radius: 999px; transition: width .4s ease; }
button.ficha-link[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--chao); }
.carteira-diag { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.carteira-diag li { display: flex; flex-direction: column; gap: 4px; }
.selo-compat { flex-shrink: 0; font-size: 12px; font-weight: 800; color: var(--chao); background: var(--salva); border-radius: 999px; padding: 3px 9px; }
@media (prefers-reduced-motion: reduce) { .bz-prog i { transition: none; } }

/* Língua: troca no topo da entrada */
.entrada-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lingua-troca {
  background: none; border: 1px solid rgba(242, 237, 229, .35); color: var(--chao); border-radius: 999px;
  font: 600 13px/1 var(--sans, inherit); padding: 9px 14px; min-height: 36px; cursor: pointer;
}
.lingua-troca:hover { border-color: var(--siena-clara); color: var(--siena-clara); }
.lingua-troca:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }

/* Guardar a app no ecrã principal */
.cartao-guardar { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; position: relative; }
.cartao-guardar img { width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.cartao-guardar .cg-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; padding-right: 18px; }
.cartao-guardar .cg-txt b { font-size: 14px; }
.cartao-guardar .cg-txt span { font-size: 12.5px; color: var(--texto-3); }
.cartao-guardar .cg-fechar { position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; border: 0; background: none; font-size: 20px; color: var(--texto-3); cursor: pointer; }
/* Pedir os dados aos poucos: cartão do telemóvel (avaliação) e pergunta do nome */
.cartao-avc { position: relative; border: 1px solid var(--areia); }
.cartao-avc h2 { padding-right: 34px; }
.cartao-avc:focus { outline: none; }
.cartao-avc:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }
.cartao-avc .avc-fechar { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: none; font-size: 22px; color: var(--texto-3); cursor: pointer; border-radius: 10px; }
.cartao-avc .avc-fechar:focus-visible { outline: 3px solid var(--siena); outline-offset: -3px; }
.cartao-avc .form, .cartao-nome .form { gap: 12px; }
.nome-botoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* A pergunta do plano junto ao valor: três botões com o mesmo peso, a frase do plano por baixo */
.pergunta-plano { border: 1px solid var(--areia); }
.pergunta-plano:focus { outline: none; }
.pergunta-plano:focus-visible { outline: 3px solid var(--siena); outline-offset: 2px; }
.pq-botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pq-botoes .botao.peq { width: 100%; padding: 10px 8px; }
.msg-feito { margin-top: 2px; font-size: 13px; font-weight: 700; color: var(--salva); }
.guardar-app { align-items: flex-start; }
.guardar-icone { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 6px 16px rgba(29, 29, 27, .18); }
.passos-instalar { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.45; }
.passos-instalar .ic-partilhar { display: inline-block; vertical-align: -4px; color: var(--siena); }

/* ---------- Entrada nova (portas, régua, valor antes do email) ---------- */
.entrada-foto { aspect-ratio: auto; height: clamp(120px, 20vh, 170px); }
.entrada-portas { gap: 16px; }
.entrada-portas .entrada-foto { height: clamp(110px, 16vh, 150px); }
/* Abaixo de 360 px o .ecra tem 16 px de margem: a foto acompanha, sem deslocamento horizontal */
@media (max-width: 359px) { .entrada-foto { margin-left: -16px; margin-right: -16px; } }
.entrada-portas .h-xl { font-size: 34px; line-height: 1.05; }
.entrada-portas .entrada-heroi { padding-top: 6px; gap: 10px; }
.entrada-topo-dir { display: flex; align-items: center; gap: 6px; }
.ja-tenho {
  background: none; border: 0; color: var(--chao); cursor: pointer; padding: 0 8px; min-height: 44px;
  font: 700 13.5px/1 var(--sans); text-decoration: underline; text-underline-offset: 3px;
}
.ja-tenho:hover { color: var(--siena-clara); }
.ja-tenho:focus-visible { outline: 3px solid var(--siena-clara); outline-offset: 2px; border-radius: 6px; }
.lingua-troca { min-height: 44px; }
.portas { display: flex; flex-direction: column; gap: 10px; }
.porta {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  width: 100%; min-height: 72px; padding: 14px 18px; border-radius: 16px; border: 1px solid transparent;
  text-align: left; cursor: pointer; font-family: var(--sans);
}
.porta b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.porta span { font-size: 14px; line-height: 1.35; }
.porta-principal { background: var(--siena); color: var(--branco); }
.porta-principal:hover { background: var(--siena-escura); }
.porta-secundaria { background: var(--escuro-2); color: var(--chao); border-color: var(--escuro-3); }
.porta-secundaria:hover { border-color: var(--siena-clara); }
.porta:focus-visible { outline: 3px solid var(--siena-clara); outline-offset: 2px; }
.entrada-heroi-curto { padding-top: 2px; }
.entrada-link { align-self: center; }
.entrada-ecra .entrada { scroll-margin-bottom: 120px; }
.entrada-cartao a { color: var(--siena-escura); text-decoration: underline; text-underline-offset: 2px; }
.entrada-cartao .botao-texto { color: var(--siena-escura); }
.entrada-cartao .info-cp.falhou { color: #8A4A16; }
.info-cp:not(:empty) + .ajuda-cp { display: none; }

/* Régua da área */
.regua { gap: 8px; }
.rotulo-regua { font-size: 13px; font-weight: 800; color: var(--tinta); }
.regua-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.regua-btn {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--linha); background: var(--branco);
  color: var(--tinta); font: 700 22px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.regua-btn:hover { border-color: var(--siena); }
.regua-valor { font-family: var(--serif); font-weight: 700; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.regua-barra { width: 100%; min-height: 44px; margin: 0; accent-color: var(--siena); cursor: pointer; }
.regua-exata { align-self: flex-start; }

/* O valor estimado */
.valor-cartao { background: var(--areia); color: var(--tinta); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.valor-eti { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--salva); line-height: 1.45; }
.valor-num { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 32px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.valor-num:focus { outline: none; }
.valor-num:focus-visible { outline: 3px solid var(--siena); outline-offset: 3px; border-radius: 6px; }
.valor-fonte, .valor-aviso { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--texto-2); }
.valor-atrib, .valor-marca { margin: 0; font-size: 12px; line-height: 1.45; color: var(--texto-3); }
.valor-status { margin: 0; text-align: center; font-size: 14px; color: var(--escuro-texto-3); }
.valor-msg:focus { outline: none; }
.valor-esqueleto .esq { display: block; border-radius: 8px; background: rgba(29, 29, 27, .09); height: 12px; animation: esq-pulso 1.4s ease-in-out infinite; }
.valor-esqueleto .esq-eti { width: 62%; }
.valor-esqueleto .esq-num { height: 36px; width: 84%; margin: 4px 0; }
.valor-esqueleto .esq-linha { width: 100%; }
.valor-esqueleto .esq-linha.curta { width: 70%; }
@keyframes esq-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .valor-esqueleto .esq { animation: none; } }

/* Registo só com o email */
.registo-tit { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.1; }
.registo-txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--texto-2); }
/* O que ganha ao guardar a casa (antes do email) */
.registo-ganhos { margin: -4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.registo-ganhos li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.45; color: var(--tinta); }
.registo-ganhos li::before {
  content: ''; position: absolute; left: 3px; top: .42em; width: 10px; height: 5px;
  border-left: 2px solid var(--siena); border-bottom: 2px solid var(--siena); transform: rotate(-45deg);
}
/* Falta a tipologia: as fichas ficam marcadas e o aviso aparece logo a seguir a elas */
fieldset.com-erro .ficha span { border-color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); }
/* «Não sabe o código postal completo?» */
.cp-onde-botao { align-self: flex-start; margin-top: -8px; }
.cp-onde { margin: -6px 0 0; }
.sugestao-email { font-size: 13.5px; line-height: 1.4; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sugestao-email:empty { display: none; }
.termos-frase { margin: 0; font-size: 13px; line-height: 1.5; color: var(--texto-2); }
.corrigir-email { display: inline; min-height: 0; line-height: inherit; vertical-align: baseline; padding: 0 2px; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.entrada-ecra button.voltar { background: none; border: 0; cursor: pointer; font-family: var(--sans); color: var(--siena-clara); }
.valor-num .nw { white-space: nowrap; }

/* ---------- Valor primeiro (12 Out 2026): documentos, Bússola e diagnósticos antes do email ---------- */
/* Os documentos de uma casa (variante documentos): o nome, uma linha, o prazo onde existe; a explicação abre com um toque */
.docs-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.doc-item { background: var(--escuro-2); border: 1px solid var(--escuro-3); border-radius: 14px; }
.doc-item > summary {
  list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: 3px;
  min-height: 52px; padding: 11px 44px 11px 14px; position: relative;
}
.doc-item > summary::-webkit-details-marker { display: none; }
.doc-item > summary::after { content: '+'; position: absolute; right: 14px; top: 11px; font-size: 20px; line-height: 1.2; color: var(--siena-clara); }
.doc-item[open] > summary::after { content: '\2212'; }
.doc-item > summary:focus-visible { outline: 3px solid var(--siena-clara); outline-offset: 2px; border-radius: 14px; }
.doc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.doc-cab b { font-size: 15px; font-weight: 800; color: var(--chao); line-height: 1.3; }
.doc-prazo { font-size: 11.5px; font-weight: 800; line-height: 1; color: var(--tinta); background: var(--siena-clara); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.doc-item small { font-size: 13px; line-height: 1.4; color: var(--escuro-texto-3); }
.doc-item > p { margin: 0; padding: 0 14px 12px; font-size: 13.5px; line-height: 1.5; color: var(--escuro-texto); }
/* Aberto: a explicação substitui a linha curta (que diz o mesmo em menos palavras) */
.doc-item[open] > summary small { display: none; }
.doc-item[open] > summary { min-height: 0; padding-bottom: 6px; }
.docs-nota { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--escuro-texto-2); }
.docs-ponte { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
.docs-ponte .h-m { margin: 0; color: var(--chao); }
.docs-ponte p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--escuro-texto-3); }

/* A Bússola na entrada (fundo escuro): as mesmas peças do interior da app, com as cores trocadas */
.entrada-ecra .bz-prog { background: var(--escuro-3); }
.entrada-ecra .bz-prog i { background: var(--siena-clara); }
.entrada-ecra .chat .msg.ele { background: var(--chao); color: var(--tinta); }
.entrada-ecra .chat .msg.eu { background: var(--siena); color: var(--branco); }
.entrada-ecra button.ficha-link { color: var(--chao); border-color: rgba(242, 237, 229, .35); }
.entrada-ecra button.ficha-link:hover { border-color: var(--siena-clara); }
.entrada-ecra button.ficha-link[aria-pressed="true"] { background: var(--chao); border-color: var(--chao); color: var(--tinta); }
.entrada-ecra button.ficha-link:focus-visible { outline: 3px solid var(--siena-clara); outline-offset: 2px; }
.entrada-ecra .chat-form { bottom: env(safe-area-inset-bottom); background: var(--tinta); padding: 10px 0; z-index: 2; }
/* No ecrã escuro, .peq dá cor de texto secundário: os botões pequenos (Enviar) ficam com o branco do botão */
.entrada-ecra .botao.peq { color: var(--branco); }
.entrada-ecra .botao.peq.contorno { color: var(--chao); border-color: var(--escuro-3); }
.bz-resumo { display: flex; flex-direction: column; gap: 8px; background: var(--branco); border-radius: 12px; padding: 12px 14px; }
.bz-resumo .titulo-sec { margin: 0; color: var(--salva); }
.bz-resumo dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bz-resumo dl > div { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: 10px; font-size: 13.5px; line-height: 1.4; }
.bz-resumo dt { color: var(--texto-3); font-weight: 700; }
.bz-resumo dd { margin: 0; color: var(--tinta); font-weight: 700; overflow-wrap: anywhere; }

/* B4: o diagnóstico que se faz já e a lista do que os outros respondem */
.diag-livre { gap: 8px; }
.diag-livre .h-m { margin: 0; }
.diag-livre .botao { margin-top: 4px; }
.diag-entrada { display: flex; flex-direction: column; gap: 8px; }
.diag-entrada ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.diag-entrada li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; background: var(--escuro-2); border: 1px solid var(--escuro-3); border-radius: 14px; padding: 11px 14px; }
.diag-entrada li b { font-size: 14.5px; color: var(--chao); line-height: 1.3; }
.diag-entrada li small { grid-column: 1; font-size: 13px; line-height: 1.4; color: var(--escuro-texto-3); }
.diag-entrada li .diag-tempo { grid-column: 2; grid-row: 1; color: var(--siena-clara); }
/* Dentro dos cartões claros da entrada, os textos secundários voltam às cores do tema claro */
.entrada-cartao .titulo-sec { color: var(--salva); }
.entrada-cartao .olho { color: var(--siena-escura); }
.entrada-cartao .mini, .entrada-cartao .peq { color: var(--texto-3); }
.diag-livre-res { gap: 12px; }
.diag-livre-res .h-m { margin: 0; }
.diag-livre-res .h-m:focus { outline: none; }

/* Revisão (12 Out 2026) */
/* Documentos: a ligação do primeiro ecrã para as perguntas; ao chegar, o título da ponte fica por baixo do topo */
.entrada-heroi .docs-saltar { align-self: flex-start; color: var(--siena-clara); text-decoration: underline; text-underline-offset: 3px; padding: 0; margin-top: -4px; }
.docs-ponte { scroll-margin-top: 12px; }
.docs-ponte .h-m:focus { outline: none; }
/* Bússola na entrada: a barra da resposta é fixa no fundo; o que se leva à vista não fica por baixo dela */
.entrada-ecra .chat .msg { scroll-margin-top: 14px; scroll-margin-bottom: 96px; }
.entrada-ecra .registo-tit { scroll-margin-top: 14px; }
.entrada-ecra .registo-tit:focus { outline: none; }
/* B4: o resultado sem email cabe a 375 px (a tabela ano a ano inteira, sem deslizar) */
.entrada-cartao.diag-livre-res { padding: 16px 8px; }
.diag-livre-res > .h-m { padding: 0 8px; }
.diag-livre-res .cartao { padding-left: 10px; padding-right: 10px; }
.diag-livre-res .tabela-diag th, .diag-livre-res .tabela-diag td { padding: 8px 4px; }
.entrada-ecra #bz-erro { scroll-margin-top: 96px; }
.entrada-ecra form[data-form="entrada-conta"] { scroll-margin-top: 14px; }

/* ---------- Ecrãs maiores (12 Out 2026): tablet a partir de 640 px, computador a partir de 1024 px ----------
   Até 639 px fica tudo como estava: as regras novas vivem dentro das media queries abaixo.
   painel-a, painel-b (Início e casa) e painel-casas (Investimento) só agrupam blocos que já estavam seguidos:
   fora das duas colunas do computador não contam para o desenho (display: contents) e a ordem é sempre a mesma.
   A marca e o Perfil dentro da barra só aparecem no computador, com a barra no topo. Aí o casa.js (arrumarBarra)
   põe a barra antes do <main> e o botão Opinião dentro dela, para o Tab seguir a ordem que se vê. */
.painel-a, .painel-b, .painel-casas { display: contents; }
.barra .barra-terrae, .barra .barra-perfil { display: none; }
/* Abaixo de 360 px o .ecra tem 16 px de margem: as fotografias do topo e o texto por cima acompanham
   (havia 4 px de deslocamento horizontal) */
@media (max-width: 359px) {
  .inicio-heroi, .casa-capa, .faixa-foto { margin-left: -16px; margin-right: -16px; }
  .inicio-heroi-txt { padding-left: 16px; padding-right: 16px; }
}
/* Folha aberta num computador com barra de deslocamento (Windows): o casa.js (abrirFolha) mede a barra que a folha
   esconde e a página e a navegação (padding da .barra, abaixo) ficam no mesmo sítio. Sem barra de deslocamento
   (telemóvel, Mac) fica a 0. */
body.com-folha { padding-right: var(--folha-sb, 0px); }

@media (min-width: 640px) {
  /* Coluna mais larga, margens maiores; as fotografias que encostam às bordas acompanham a margem */
  #app { max-width: 720px; }
  .ecra { padding-left: 32px; padding-right: 32px; }
  .inicio-heroi, .casa-capa, .faixa-foto { margin-left: -32px; margin-right: -32px; }
  /* As alturas também seguem a altura do ecrã: um telemóvel deitado (640 a 932 px de largura, 360 a 430 de altura)
     fica com as do telemóvel, o tablet ao alto fica com as de tablet */
  .inicio-heroi { min-height: clamp(300px, 45vh, 360px); }
  .inicio-heroi > img { object-position: 50% 35%; }
  .inicio-heroi-txt { padding: 120px 32px 28px; }
  .faixa-foto { aspect-ratio: 21 / 9; }
  .faixa-foto.baixa { aspect-ratio: 4 / 1; }
  .casa-capa { aspect-ratio: 16 / 7; }

  /* Entrada: conteúdo até cerca de 620 px, a fotografia com mais altura, as duas portas lado a lado */
  .entrada-ecra { padding-left: 48px; padding-right: 48px; gap: 24px; }
  .entrada-foto { margin-left: -48px; margin-right: -48px; height: clamp(120px, 28vh, 300px); }
  .entrada-portas .entrada-foto { height: clamp(110px, 32vh, 340px); }
  .entrada-foto img { object-position: 50% 42%; }
  .entrada-portas .h-xl { font-size: 42px; }
  .entrada-ecra .h-l { font-size: 40px; }
  .portas { flex-direction: row; }
  .porta { flex: 1 1 0; min-width: 0; }

  /* Barra de baixo: o fundo a toda a largura, os separadores na coluna */
  .barra { left: 0; transform: none; max-width: none; padding-left: max(6px, calc(50% - 354px - var(--folha-sb, 0px) / 2)); padding-right: calc(max(6px, calc(50% - 354px - var(--folha-sb, 0px) / 2)) + var(--folha-sb, 0px)); }
  .opiniao-fab { right: max(14px, calc(50% - 360px + 14px)); }

  /* Folhas mais largas */
  .folha { max-width: 600px; padding-left: 28px; padding-right: 28px; }

  /* Listas em grelha de 2 */
  .lista-acoes, .diag-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lista-acoes > li { display: flex; }
  .lista-acoes > li > a { flex: 1 1 auto; }
  .ecra-inicio section[aria-labelledby="t-casas"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecra-inicio section[aria-labelledby="t-casas"] > .linha-entre { grid-column: 1 / -1; }
  .ecra-ordem > ul.bloco-8 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecra-ordem > ul.bloco-8 > li { display: flex; }
  .ecra-carta > section[aria-labelledby="t-av"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .ecra-carta > section[aria-labelledby="t-av"] > h2, .ecra-carta > section[aria-labelledby="t-av"] > .vazio { grid-column: 1 / -1; }
  /* Mural das Novidades em colunas de revista: cada cartão segue logo abaixo do anterior, sem buracos */
  .ecra-carta > .bloco-10 { display: block; column-count: 2; column-gap: 14px; }
  .ecra-carta > .bloco-10 > .novidade { break-inside: avoid; }
  .ecra-carta > .bloco-10 > .novidade + .novidade { margin-top: 14px; }
  .ecra-carta > .bloco-10:has(> .novidade:only-child) { column-count: 1; }

  /* Gráficos dos diagnósticos: não crescem com a coluna */
  .grafico-diag { max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* Tablet ao alto: a entrada ocupa a altura do ecrã. Nas portas a fotografia cresce e os links legais vão para o fundo;
   Entrar e o email enviado ficam a meio da altura, como no computador. */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 900px) {
  .entrada-portas .entrada-foto { height: clamp(220px, 40vh, 460px); }
  .entrada-portas > .entrada-rodape, .entrada-conta > .entrada-rodape { margin-top: auto; }
  .entrada-enviado > .entrada-heroi, .entrada-conta > .voltar { margin-top: auto; }
  .entrada-enviado > .botoes { margin-bottom: auto; }
}

@media (min-width: 1024px) {
  /* Duas larguras de conteúdo: 1160 px para os painéis, 760 px para ler e preencher */
  #app { max-width: none; }
  .ecra { max-width: 824px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; }
  .ecra.ecra-largo { max-width: 1224px; }
  /* Investimento: tudo na largura de leitura (os números, as casas e as notas alinhados) */
  .ecra.ecra-investimento { max-width: 824px; }
  .ecra.com-barra { padding-top: calc(var(--barra-h) + 36px); padding-bottom: 72px; }
  .ecra.com-barra > .topo { display: none; }
  .ecra-largo > .bloco, .ecra-largo > .linha-link, .ecra-largo > .mini, .ecra-largo:not(.ecra-carta) > .vazio { max-width: 760px; }
  /* Texto pequeno com linhas de leitura confortável (cerca de 70 caracteres); os cartões mantêm a largura */
  .ecra:not(.entrada-ecra) .mini, .ecra:not(.entrada-ecra) .ajuda { max-width: 72ch; }
  .ecra:not(.entrada-ecra) .paragrafo { max-width: 68ch; }
  /* Momento: o botão segue o texto (no telemóvel fica no fundo do ecrã) */
  .ecra.ecra-escuro:not(.entrada-ecra) > .botoes { margin-top: 8px !important; }
  html:has(.barra) { scroll-padding-top: calc(var(--barra-h) + 16px); }

  /* Navegação no topo: marca, os cinco destinos com o nome ao lado do ícone, Opinião e Perfil */
  .barra {
    top: 0; bottom: auto; height: var(--barra-h);
    display: flex; align-items: center; gap: 4px;
    padding: 0 calc(max(32px, calc(50% - 580px - var(--folha-sb, 0px) / 2)) + var(--folha-sb, 0px)) 0 max(32px, calc(50% - 580px - var(--folha-sb, 0px) / 2));
    border-top: 0; border-bottom: 1px solid var(--linha);
  }
  .barra a { flex-direction: row; gap: 8px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600; border-radius: 999px; }
  .barra a svg { width: 20px; height: 20px; }
  .barra a:hover, .barra a[aria-current="page"] { background: var(--chao); color: var(--tinta); }
  .barra .barra-terrae { display: block; margin-right: auto; font-family: var(--serif); font-size: 20px; letter-spacing: 6px; font-weight: 700; line-height: 1; color: var(--tinta); }
  .barra .barra-perfil { display: block; margin-left: auto; }
  .barra .barra-perfil .avatar { width: 40px; height: 40px; min-height: 0; padding: 0; justify-content: center; color: var(--chao); background: var(--tinta); font-size: 13px; font-weight: 700; border-radius: 50%; }
  .barra .barra-perfil .avatar:hover { background: #000; color: var(--chao); }
  /* Novidades por ver: o número a seguir à palavra, sem tapar o ícone */
  .barra a > span:not(.barra-marca) { order: 1; }
  .barra-marca { position: static; order: 2; margin-left: -2px; }
  /* Opinião dentro da barra, antes do Perfil (o casa.js põe-no lá); fica também com uma folha aberta, por baixo do fundo */
  .barra .opiniao-fab, body.com-folha .barra .opiniao-fab {
    position: static; display: inline-flex; margin-left: auto; flex-shrink: 0;
    min-height: 40px; padding: 0 14px; border-radius: 999px;
    background: transparent; color: var(--siena); box-shadow: inset 0 0 0 1.5px var(--linha);
  }
  .barra .opiniao-fab:hover { background: var(--chao); color: var(--siena-escura); }
  .barra .opiniao-fab + .barra-perfil { margin-left: 10px; }

  /* Sem barra em baixo: aviso ao centro, a caixa do Joaquim colada ao fundo */
  #aviso { bottom: 24px; }
  .opiniao-fab { right: 24px; bottom: 24px; }
  .joaquim-ecra .chat-form { bottom: 16px; }
  .msg { max-width: 76%; }

  /* Folhas: janela centrada */
  .folha { max-width: 640px; max-height: 85vh; padding: 12px 32px 32px; }

  /* Fotografias dentro da coluna, com cantos */
  .inicio-heroi, .casa-capa, .faixa-foto { margin-left: 0; margin-right: 0; border-radius: 20px; }
  .inicio-heroi-txt { padding: 120px 40px 36px; }
  .inicio-heroi .num-xl { font-size: 64px; }
  .faixa-foto { aspect-ratio: auto; height: clamp(180px, 20vw, 280px); }
  .faixa-foto.baixa { height: clamp(140px, 13vw, 190px); }
  .casa-capa { aspect-ratio: 4 / 3; border-radius: 16px; }

  /* Início e casa em duas colunas (Início 7 para 5, casa 5 para 7) */
  .ecra-inicio, .ecra-casa { display: grid; align-items: start; column-gap: 32px; row-gap: 24px; }
  .ecra-inicio { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ecra-casa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ecra-inicio > :not(.painel-a):not(.painel-b), .ecra-casa > :not(.painel-a):not(.painel-b) { grid-column: 1 / -1; }
  .ecra-casa > .voltar { justify-self: start; }
  .painel-a, .painel-b { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
  /* Início: a fotografia do património no topo da coluna da esquerda, num formato que mostra a casa (16:10) */
  .ecra-inicio .inicio-heroi { aspect-ratio: 16 / 10; min-height: 340px; }
  .ecra-inicio .lista-acoes { display: flex; flex-direction: column; }
  .ecra-inicio section[aria-labelledby="t-casas"] { display: flex; flex-direction: column; }
  /* Início sem casas: a fotografia da equipa ao lado do texto, para o botão ficar à vista */
  .painel-a > .vazio:has(> .vazio-foto) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 22px; row-gap: 10px; align-content: center; }
  .painel-a > .vazio > .vazio-foto { grid-column: 1; grid-row: 1 / span 3; align-self: stretch; width: calc(100% + 18px); height: calc(100% + 36px); min-height: 220px; margin: -18px 0 -18px -18px; aspect-ratio: auto; border-radius: var(--raio-g) 0 0 var(--raio-g); }

  /* Diagnósticos e Novidades em grelha */
  .ecra-diagnosticos .diag-lista { gap: 12px; }
  .ecra-carta > .bloco-10 { column-gap: 18px; }
  .ecra-carta > .bloco-10 > .novidade + .novidade { margin-top: 18px; }
  /* Carta Terrae: a faixa escura passa a coluna à esquerda, o texto e o interruptor à direita */
  .ecra-carta > .cartao-escuro { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
  .ecra-carta > .cartao-escuro > div:first-child { height: auto !important; padding: 24px !important; }
  .ecra-carta > .cartao-escuro > div:last-child { padding: 24px 28px 24px 8px !important; justify-content: center; }

  /* Botões fora dos cartões e nos cartões das colunas de leitura: largura do texto, lado a lado */
  .ecra:not(.entrada-ecra) .botoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .ecra:not(.entrada-ecra) .botoes > .botao { width: auto; min-width: 220px; }
  .ecra:not(.entrada-ecra) > .botao, .painel-a > .botao, .painel-b > .botao, .ecra:not(.entrada-ecra) .form > .botao,
  .ecra:not(.entrada-ecra):not(.ecra-largo) .cartao > .botao:not(.peq), .ecra:not(.entrada-ecra) .vazio > .botao { width: auto; min-width: 260px; align-self: flex-start; justify-self: start; }

  /* ----- Entrada: fotografia à esquerda (46%), o texto e as portas à direita ----- */
  .entrada-ecra {
    max-width: none; margin: 0 0 0 46%;
    padding: 36px max(48px, calc((54% - 540px) / 2)) 40px;
    gap: 24px;
  }
  .entrada-ecra::before {
    content: ''; position: fixed; top: 0; bottom: 0; left: 0; width: 46%;
    background:
      linear-gradient(90deg, rgba(29, 29, 27, 0) 45%, rgba(29, 29, 27, .45) 100%),
      linear-gradient(180deg, rgba(29, 29, 27, .3) 0%, rgba(29, 29, 27, 0) 20%, rgba(29, 29, 27, 0) 52%, rgba(29, 29, 27, .8) 100%),
      var(--escuro-2) url('img/entrada-casa-alta.webp') 50% 35% / cover no-repeat;
  }
  .entrada-ecra .entrada-foto { display: none; }
  .portas { flex-direction: column; }
  .entrada-portas .h-xl { font-size: 52px; line-height: 1.02; }
  .entrada-ecra .h-l { font-size: 44px; }
  .entrada-heroi p { font-size: 16.5px; }
  .entrada-ecra .entrada-heroi p.peq { font-size: 13.5px; }
  /* Portas, Entrar e o email enviado: o conteúdo ao meio da altura */
  .entrada-portas > .entrada-heroi, .entrada-enviado > .entrada-heroi, .entrada-conta > .voltar { margin-top: auto; }
  .entrada-portas > .entrada-rodape, .entrada-conta > .entrada-rodape { margin-top: auto; }
  .entrada-enviado > .botoes { margin-bottom: auto; }
  #app:has(> .entrada-ecra) ~ #aviso { left: 73%; }
}

/* O valor por cima da fotografia, com o registo ao lado. Só quando o cartão inteiro cabe por baixo das caras do casal:
   com 1280 px de largura chega 700 px de altura; mais estreito (o cartão fica mais alto) só a partir de 860 px.
   Nos outros ecrãs fica na coluna da direita, por cima do registo. */
@media (min-width: 1280px) and (min-height: 700px), (min-width: 1024px) and (min-height: 860px) {
  .entrada-valor .valor-cartao:not(.valor-esqueleto) {
    position: fixed; z-index: 1; bottom: 40px;
    width: min(460px, calc(46% - 80px)); left: calc((46% - min(460px, calc(46% - 80px))) / 2);
    max-height: calc(100vh - 80px); overflow-y: auto;
    padding: 24px; border-radius: 20px; box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  }
  .entrada-valor .valor-num { font-size: 38px; }
}

/* Casa: a fotografia e o valor acompanham o deslocamento; se não couberem na altura, deslizam dentro do painel
   (os blocos mantêm a altura: a fotografia fica sempre 4:3 e nenhum cartão é cortado) */
@media (min-width: 1024px) and (min-height: 700px) {
  .ecra-casa > .painel-a {
    position: sticky; top: calc(var(--barra-h) + 24px);
    max-height: calc(100vh - var(--barra-h) - 48px); overflow-y: auto; scrollbar-width: thin;
    padding: 4px; margin: -4px;
  }
  .ecra-casa > .painel-a > * { flex-shrink: 0; }
}

@media (min-width: 1280px) {
  .ecra-diagnosticos .diag-lista, .ecra-diagnosticos .lista-acoes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ecra-carta > .bloco-10 { column-count: 3; }
  .ecra-carta > .bloco-10:has(> .novidade:nth-child(2):last-child) { column-count: 2; }
  .ecra-carta > .bloco-10:has(> .novidade:only-child) { column-count: 1; }
}