/* Hallmark · shape: panels, after the reference the user gave · genre: editorial · theme: brand (Hooses, Vidro & Atmosfera)
 * paper: oklch(98.6% 0.006 290) · accent: oklch(46% 0.17 283) · display: Exo · body: Exo · hero: one panel, the picture on the right fading into the paper, glass cards floating over it · nav: logo, links in the middle, one action · footer: columns on the paper · signature: the picture of the house or the handoff, with three glass cards over it saying what happens there
 * axes: light/geometric-sans/chromatic-indigo · posture: light · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, follows the user's reference on purpose; the material (the Barreiro house, the clay scenes, the dia 8) keeps it Hooses */
/* waive 38iii: one phrase of each hero head in the accent, as in both references the user gave (the Wix page and the panel layout) */
@import url("./tokens.css");
@import url("./base.css");

/* --- A atmosfera, fixa atrás de tudo ------------------------------------- */
:root { --color-veil: rgba(19, 16, 50, 0.82); --color-veil-0: rgba(19, 16, 50, 0); --color-mask: var(--color-ink); --color-mask-0: rgba(19, 16, 50, 0); }
body { background: var(--color-paper); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); font-variant-numeric: tabular-nums; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--atmosphere); pointer-events: none; }
h1, h2, h3 { color: var(--color-ink); }
h1 { font-weight: var(--display-weight); line-height: 1.04; max-width: 14ch; }
h2 { font-weight: var(--display-weight); line-height: 1.08; max-width: 18ch; }
h3 { font-weight: var(--display-weight); letter-spacing: -0.011em; }
.acento { color: var(--color-accent); }
.container { max-width: var(--container); }
main { display: grid; gap: var(--space-lg); padding-bottom: var(--space-lg); }

/* --- Ícones do sprite da marca: grelha 24, traço 1,6 ---------------------- */
.icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icone--24 { width: 24px; height: 24px; }

/* --- Barra ---------------------------------------------------------------- */
.barra { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 88px; gap: var(--space-lg); }
.barra__marca { justify-self: start; display: inline-flex; padding: var(--space-xs) 0; border-radius: var(--radius-control); }
.barra__marca img { width: 128px; height: auto; }
.barra__ligacoes { display: flex; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.barra__ligacoes a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease; }
.barra__accoes { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); }
.barra__entrar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) ease; }
@media (hover: hover) {
  .barra__ligacoes a:hover, .barra__entrar:hover { background: var(--color-glass); color: var(--color-ink); }
}
@media (max-width: 60rem) { .barra { grid-template-columns: minmax(0, 1fr) auto; } .barra > nav { display: none; } }
@media (max-width: 40rem) { .barra { min-height: 72px; } .barra__marca img { width: 108px; } .barra__entrar { padding: 0 var(--space-sm); } }

/* --- Botões: a pílula de tinta abre para o índigo da marca com o rato ------ */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 46px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-control); font-size: var(--text-sm); font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-micro) ease, color var(--dur-micro) ease, border-color var(--dur-micro) ease, transform var(--dur-press) var(--ease-out); }
.botao:active { transform: scale(0.97); }
.botao--primario { background: var(--color-ink); color: var(--color-on-ink); }
.botao--primario:active { background: var(--color-accent-deep); }
.botao--vidro { background: var(--color-glass-strong); color: var(--color-ink); border-color: var(--color-glass-border); box-shadow: 0 0 0 1px var(--color-glass-rim); }
.botao--claro { background: var(--color-on-ink); color: var(--color-ink); }
.botao--contorno-claro { background: transparent; color: var(--color-on-ink); border-color: var(--color-accent-300); }
.botao--pequeno { min-height: 40px; padding: 0 var(--space-md); }
@media (hover: hover) {
  .botao--primario:hover { background: var(--color-accent); }
  .botao--vidro:hover { background: var(--color-on-ink); }
  .botao--claro:hover { background: var(--color-paper-3); }
  .botao--contorno-claro:hover { border-color: var(--color-on-ink); }
}
.accoes { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

/* --- Painéis: as secções são folhas de vidro sobre a atmosfera ------------- */
.painel { position: relative; background: var(--color-glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--color-glass-border); border-radius: var(--radius-sheet); box-shadow: inset 0 1px 0 var(--color-glass-shine), 0 0 0 1px var(--color-glass-rim); padding: clamp(var(--space-lg), 5vw, var(--space-2xl)); }
.painel--nu { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-inline: 0; }
.cabeca { display: grid; gap: var(--space-md); max-width: 46ch; }
.cabeca p { font-size: var(--text-lead); line-height: 1.5; }
.cabeca--lado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-md) var(--gap-columns); align-items: end; max-width: none; margin-bottom: var(--space-xl); }
.cabeca--lado p { max-width: 46ch; }
@media (max-width: 60rem) { .cabeca--lado { grid-template-columns: minmax(0, 1fr); } }

/* --- O herói: o texto à esquerda, a imagem a desvanecer para o papel ------- */
.heroi { position: relative; overflow: clip; min-height: min(640px, calc(100svh - 112px)); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); padding: 0; }
.heroi__texto { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--space-lg); padding: clamp(var(--space-lg), 5vw, var(--space-2xl)); padding-right: 0; }
.heroi__texto .lead { color: var(--color-ink-2); max-width: 38ch; }
.heroi__imagem { position: absolute; inset: 0 0 0 30%; margin: 0; z-index: 1; -webkit-mask-image: linear-gradient(to right, var(--color-mask-0) 0%, var(--color-mask) 32%); mask-image: linear-gradient(to right, var(--color-mask-0) 0%, var(--color-mask) 32%); }
.heroi__imagem[data-slot] { background: transparent; }
.heroi__imagem > img { object-position: var(--foco, 50% 40%); }
.flutuantes { position: absolute; z-index: 3; right: clamp(var(--space-md), 3vw, var(--space-xl)); bottom: clamp(var(--space-md), 3vw, var(--space-xl)); display: grid; gap: var(--space-md); justify-items: end; margin: 0; padding: 0; list-style: none; }
.flutuantes li:nth-child(2) { margin-right: var(--space-xl); }
.flutuante { display: flex; align-items: flex-start; gap: var(--space-sm); width: 268px; padding: var(--space-sm); background: var(--color-glass-solid); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--color-glass-border); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 var(--color-glass-shine), var(--shadow-card); }
.flutuante__mini { position: relative; width: 52px; height: 52px; flex: none; border-radius: var(--radius-tile); overflow: hidden; display: grid; place-items: center; background: var(--color-accent-soft); color: var(--color-accent); }
.flutuante__mini img { width: 100%; height: 100%; object-fit: cover; }
.flutuante strong { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); line-height: 1.3; }
.flutuante span { display: block; margin-top: var(--space-3xs); font-size: 0.875rem; line-height: 1.4; color: var(--color-muted); }
.fichas { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-xs) 0 0; padding: 0; list-style: none; max-width: 560px; }
.ficha { flex: 1 1 112px; padding: var(--space-md); background: var(--color-glass-strong); border: 1px solid var(--color-glass-border); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-glass-rim); }
.ficha strong { display: block; white-space: nowrap; font-size: 1.375rem; font-weight: 500; letter-spacing: -0.011em; color: var(--color-ink); line-height: 1.15; }
.ficha span { display: block; margin-top: var(--space-2xs); font-size: 0.875rem; line-height: 1.35; color: var(--color-muted); }
@media (max-width: 60rem) {
  .heroi { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .heroi__texto { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
  .heroi__imagem { position: relative; inset: auto; aspect-ratio: 4 / 3; margin: 0 var(--space-sm); border-radius: var(--radius-card); -webkit-mask-image: none; mask-image: none; }
  .flutuantes { position: static; justify-items: stretch; padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .flutuantes li:nth-child(2) { margin-right: 0; }
  .flutuante { width: auto; }
  .flutuante span { font-size: var(--text-xs); }
}

/* --- Cartões altos: a imagem inteira, o texto por cima ao fundo ------------ */
.altos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.alto { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: var(--space-lg); border-radius: var(--radius-card); overflow: hidden; color: var(--color-on-ink); isolation: isolate; }
.alto > figure { position: absolute; inset: 0; margin: 0; z-index: -2; }
.alto > figure img { object-position: var(--foco, 50% 40%); }
.alto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--color-veil) 0%, var(--color-veil-0) 58%); }
.alto__icone { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-md); border-radius: var(--radius-tile); background: var(--color-glass-strong); color: var(--color-ink); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.alto h3 { color: var(--color-on-ink); font-size: var(--text-title); }
.alto p { margin-top: var(--space-xs); font-size: var(--text-sm); line-height: 1.5; color: var(--color-on-ink); opacity: 0.86; max-width: 30ch; }
@media (max-width: 60rem) { .altos { grid-template-columns: minmax(0, 1fr); } .alto { min-height: 360px; } }

/* Um cartão que é item de uma lista eleva-se ao passar o rato. */
.eleva { transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
@media (hover: hover) { .eleva:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }

/* --- Cartões de fotografia, com a etiqueta sobre a imagem ------------------ */
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.foto-cartao { display: grid; gap: var(--space-sm); }
.foto-cartao figure { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.foto-cartao figure > img { object-position: var(--foco, 50% 50%); }
.etiqueta { position: absolute; z-index: 2; left: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-sm); border-radius: var(--radius-control); background: var(--color-glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); font-size: var(--text-xs); font-weight: 500; color: var(--color-ink); }
.foto-cartao h3 { font-size: var(--text-title); }
.foto-cartao p { font-size: var(--text-sm); color: var(--color-muted); max-width: 32ch; }
.fotos--mosaico { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: repeat(2, minmax(0, 220px)); }
.fotos--mosaico > li:first-child { grid-row: span 2; }
.fotos--mosaico figure { aspect-ratio: auto; height: 100%; }
@media (max-width: 60rem) { .fotos { grid-template-columns: minmax(0, 1fr); } .foto-cartao figure { aspect-ratio: 4 / 3; } .fotos--mosaico { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 240px 150px; } .fotos--mosaico > li:first-child { grid-row: auto; grid-column: span 2; } .fotos--mosaico figure { aspect-ratio: auto; } }

/* --- Duas colunas: o texto e o que se mostra ------------------------------ */
.duas { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
.duas--inversa { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.duas--inversa > :first-child { order: 2; }
.duas p + p { margin-top: var(--space-md); }
.duas .cabeca + .accoes, .duas .cabeca + .pontos, .duas .pontos + .accoes { margin-top: var(--space-xl); }
@media (max-width: 60rem) { .duas, .duas--inversa { grid-template-columns: minmax(0, 1fr); } .duas--inversa > :first-child { order: 0; } }

/* Pontos curtos com ícone, alinhados pela primeira linha. */
.pontos { display: grid; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.pontos li { display: flex; align-items: flex-start; gap: var(--space-sm); color: var(--color-ink-2); }
.pontos .icone { margin-top: var(--space-2xs); color: var(--color-accent); }
.pontos--duas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
@media (max-width: 40rem) { .pontos--duas { grid-template-columns: minmax(0, 1fr); } }

/* Uma ilustração ou fotografia sozinha, alta. */
.quadro { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-card); max-height: 620px; width: 100%; }
.quadro > img { object-position: var(--foco, 50% 40%); }
.quadro--largo { aspect-ratio: 16 / 10; }

/* --- Um mês na casa: cinco momentos pela ordem do mês ---------------------- */
.mes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-sm); margin: 0; padding: 0; list-style: none; counter-reset: momento; }
.momento { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg) var(--space-md); background: var(--color-glass-strong); border: 1px solid var(--color-glass-border); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-glass-rim); }
.momento__quando { font-size: var(--text-sm); font-weight: 600; color: var(--color-wood-text); }
.momento h3 { font-size: 1.125rem; line-height: 1.25; }
.momento p { font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); }
.momento .icone { color: var(--color-accent); margin-bottom: var(--space-xs); }
@media (max-width: 68rem) { .mes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .mes { grid-template-columns: minmax(0, 1fr); } .momento p { font-size: var(--text-xs); } }

/* --- O relatório do mês, construído: a amostra que a captura vai substituir */
.relatorio { padding: var(--space-lg); background: var(--color-glass-strong); border-radius: var(--radius-card); box-shadow: inset 0 1px 0 var(--color-glass-shine), var(--shadow-lift); }
.relatorio__topo { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.relatorio__topo strong { display: block; font-size: 1.125rem; font-weight: 600; color: var(--color-ink); }
.relatorio__topo span { font-size: 0.875rem; color: var(--color-muted); }
.relatorio__exemplo { flex: none; display: inline-flex; align-items: center; min-height: 26px; padding: 0 var(--space-sm); border-radius: var(--radius-control); background: var(--color-accent-soft); color: var(--color-accent-ink); font-size: var(--text-xs); font-weight: 500; }
.barras { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: var(--space-sm); height: 132px; margin: var(--space-lg) 0 var(--space-xs); padding-bottom: 1px; border-bottom: 1px solid var(--color-rule-strong); background: linear-gradient(var(--color-rule) 1px, transparent 1px) 0 0 / 100% 25%; }
.barra-mes { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.barra-mes::before { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; width: min(56%, 34px); height: var(--previsto); border-radius: 4px 4px 0 0; background: repeating-linear-gradient(-62.5deg, var(--color-accent-300) 0 1.5px, transparent 1.5px 6px); opacity: 0.7; }
.barra-mes span { position: relative; width: min(40%, 22px); height: var(--cobrado); border-radius: 4px 4px 0 0; background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-on-ink); }
.barra-mes--corrente span { background: var(--color-ink); }
.eixo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-sm); margin: 0 0 var(--space-md); padding: 0; list-style: none; font-size: 0.6875rem; color: var(--color-muted); text-align: center; }
.conta { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.conta th { text-align: left; font-weight: 400; color: var(--color-ink-2); padding: var(--space-xs) 0; }
.conta td { text-align: right; padding: var(--space-xs) 0; color: var(--color-ink); white-space: nowrap; }
.conta tr + tr > * { border-top: 1px solid var(--color-rule); }
.conta .resultado > * { border-top: 1px solid var(--color-rule-strong); font-weight: 600; color: var(--color-ink); padding-top: var(--space-sm); }
.conta .resultado td { color: var(--color-accent-ink); }

/* --- O percurso até Lisboa -------------------------------------------------- */
.percurso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.paragem { display: grid; justify-items: start; gap: var(--space-xs); max-width: 16ch; }
.paragem__ponto { width: 18px; height: 18px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 5px var(--color-accent-soft); }
.paragem--fim .paragem__ponto { background: var(--color-ink); }
.paragem strong { font-size: var(--text-title); font-weight: 500; color: var(--color-ink); line-height: 1.2; }
.troco { position: relative; display: grid; justify-items: center; gap: var(--space-xs); padding-top: var(--space-xl); color: var(--color-ink-2); }
.troco::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: repeating-linear-gradient(to right, var(--color-accent-300) 0 8px, transparent 8px 14px); }
.troco--barco::before { background: var(--color-accent); }
.troco strong { font-size: var(--text-2xl); font-weight: 500; color: var(--color-ink); line-height: 1; }
.troco span { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 52rem) {
  .percurso { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-sm); }
  .troco { justify-items: start; padding: var(--space-xs) 0 var(--space-xs) var(--space-xl); }
  .troco::before { top: 0; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(to bottom, var(--color-accent-300) 0 8px, transparent 8px 14px); }
  .troco--barco::before { background: var(--color-accent); }
  .paragem { max-width: none; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-md); }
}

/* --- Passos -------------------------------------------------------------- */
.passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.passo { counter-increment: passo; display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-lg); background: var(--color-glass-strong); border: 1px solid var(--color-glass-border); border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--color-glass-rim); }
.passo::before { content: counter(passo); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--space-sm); border-radius: 50%; background: var(--color-accent-soft); color: var(--color-accent-ink); font-weight: 600; font-size: var(--text-sm); }
.passo h3 { font-size: 1.125rem; }
.passo p { font-size: 0.875rem; color: var(--color-muted); }
@media (max-width: 60rem) { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .passos { grid-template-columns: minmax(0, 1fr); } .passo p { font-size: var(--text-xs); } }

/* --- As contas da casa à venda: o preço em grande -------------------------- */
.oferta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-xl) var(--gap-columns); align-items: end; }
.oferta__preco { font-size: var(--text-figure); font-weight: 500; letter-spacing: -0.04em; line-height: 0.9; color: var(--color-ink); white-space: nowrap; }
.oferta__preco small { font-size: 0.42em; letter-spacing: -0.02em; color: var(--color-wood-text); }
.oferta__legenda { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-muted); }
.conta-grande { display: grid; gap: var(--space-sm); margin: 0; }
.conta-grande > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.conta-grande dt { color: var(--color-ink-2); }
.conta-grande dd { margin: 0; font-size: var(--text-xl); font-weight: 500; color: var(--color-ink); white-space: nowrap; }
.conta-grande .resultado dd { color: var(--color-accent-ink); }
@media (max-width: 60rem) { .oferta { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .oferta__preco { white-space: normal; } }

/* --- O cartão de destaque: o fecho, em índigo ------------------------------ */
.destaque { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: center; padding: clamp(var(--space-lg), 5vw, var(--space-2xl)); border-radius: var(--radius-sheet); background: var(--color-ink); color: var(--color-on-ink); overflow: clip; }
.destaque h2 { color: var(--color-on-ink); }
.destaque p { color: var(--color-on-ink); opacity: 0.82; font-size: var(--text-lead); max-width: 40ch; margin-top: var(--space-md); }
.destaque__contactos { display: grid; gap: var(--space-md); justify-items: start; }
.destaque__contactos a:not(.botao) { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-on-ink); text-decoration: none; font-size: var(--text-md); border-radius: var(--radius-control); }
.destaque__contactos a:not(.botao) .icone { color: var(--color-accent-300); }
@media (hover: hover) { .destaque__contactos a:not(.botao):hover { text-decoration: underline; } }
.destaque :focus-visible { outline-color: var(--color-on-ink); }
@media (max-width: 60rem) { .destaque { grid-template-columns: minmax(0, 1fr); } }

/* --- Um facto que ainda não chegou ---------------------------------------- */
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* --- Rodapé --------------------------------------------------------------- */
.rodape { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); padding-block: var(--space-2xl) var(--space-xl); }
.rodape__marca img { width: 112px; height: auto; }
.rodape__marca p { margin-top: var(--space-md); max-width: 30ch; font-size: var(--text-sm); color: var(--color-muted); }
.rodape h2 { font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; color: var(--color-ink); max-width: none; }
.rodape ul { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.rodape a { font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-control); }
@media (hover: hover) { .rodape a:hover { color: var(--color-accent); text-decoration: underline; } }
.rodape__fim { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 60rem) { .rodape { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape__marca { grid-column: 1 / -1; } }

/* Saltar a barra. */
.saltar { position: absolute; left: var(--space-md); top: -100px; z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-control); background: var(--color-ink); color: var(--color-on-ink); }
.saltar:focus-visible { top: var(--space-md); }