/**
 * Ficheiro: styles.css
 * Descrição: Estilos globais do site Olhaqresulta.
 * Autor:    Emanuel Borges
 * Data:     23/10/2026
 * Versão:   1.24.0
 */

/* ---------- Variáveis ---------- */
:root {
  --cor-primaria: #1f274b;
  --cor-primaria-clara: #2e3a6b;
  --cor-destaque: #c8a961;
  --cor-destaque-clara: #dcc184;
  --cor-texto: #1f2433;
  --cor-texto-suave: #5a6178;
  --cor-fundo: #ffffff;
  --cor-fundo-claro: #f4f5f9;
  --cor-borda: #dde0ea;
  --cor-erro: #b3261e;
  --cor-sucesso: #1e7a46;

  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --raio: 12px;
  --sombra: 0 8px 30px rgba(31, 39, 75, 0.08);
  --largura-max: 1180px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --altura-cabecalho: 88px;
  --altura-cabecalho-rolado: 68px;
  --topo-fixo: var(--altura-cabecalho-rolado);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topo-fixo);
}

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
  background: var(--cor-fundo);
}

body.sem-scroll {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--cor-primaria-clara);
}

h1, h2, h3 {
  line-height: 1.2;
  color: var(--cor-primaria);
  margin: 0 0 0.5em;
}

:focus-visible {
  outline: 3px solid var(--cor-destaque);
  outline-offset: 3px;
}

.contentor {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* Texto só para leitores de ecrã */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Mantém um grupo de palavras na mesma linha */
.sem-quebra {
  white-space: nowrap;
}

.saltar-conteudo {
  position: absolute;
  left: 1rem;
  top: -100px;
  padding: 0.5rem 1rem;
  background: var(--cor-primaria);
  color: #fff;
  z-index: 100;
}

.saltar-conteudo:focus {
  top: 1rem;
}

/* ---------- Botões ---------- */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.8rem 1.6rem;
  border: 2px solid var(--cor-destaque);
  border-radius: 999px;
  background: var(--cor-destaque);
  color: var(--cor-primaria);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--curva), box-shadow 0.25s var(--curva), background 0.25s;
}

.botao:hover {
  transform: translateY(-2px);
  background: var(--cor-destaque-clara);
  box-shadow: 0 10px 24px rgba(200, 169, 97, 0.35);
}

.botao--secundario {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.botao--secundario:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

/* Reflexo de luz que atravessa o botão */
.botao--brilho {
  overflow: hidden;
  isolation: isolate;
}

.botao--brilho::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -75%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: brilho 6s ease-in-out infinite;
  pointer-events: none;
}

.botao--brilho:hover::after {
  animation-duration: 1.2s;
}

@keyframes brilho {
  0%, 75% { left: -75%; }
  100% { left: 130%; }
}

/* ---------- Barra de progresso ---------- */
.barra-progresso {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--cor-destaque), var(--cor-destaque-clara));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: #fff;
  transition: color 0.35s, box-shadow 0.35s;
}

/* O fundo fica num pseudo-elemento para que o backdrop-filter não afete o menu móvel (position: fixed) */
.cabecalho::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(31, 39, 75, 0.08);
  opacity: 0;
  transition: opacity 0.35s;
}

.cabecalho--rolado,
.cabecalho--solido {
  color: var(--cor-primaria);
  box-shadow: 0 10px 30px rgba(31, 39, 75, 0.08);
}

.cabecalho--rolado::before,
.cabecalho--solido::before {
  opacity: 1;
}

.cabecalho__interior {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--altura-cabecalho);
  transition: height 0.35s var(--curva);
}

.cabecalho--rolado .cabecalho__interior {
  height: var(--altura-cabecalho-rolado);
}

/* Logótipo: duas versões sobrepostas (branca e azul) que se trocam com transição */
.logotipo {
  position: relative;
  z-index: 2;
  display: block;
  height: 50px;
  aspect-ratio: 480 / 252;
  flex-shrink: 0;
  transition: height 0.35s var(--curva), transform 0.35s var(--curva);
}

.logotipo:hover {
  transform: scale(1.04);
}

.logotipo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.35s;
}

.logotipo__img--escuro,
.cabecalho--rolado .logotipo__img--claro,
.cabecalho--solido .logotipo__img--claro {
  opacity: 0;
}

.cabecalho--rolado .logotipo__img--escuro,
.cabecalho--solido .logotipo__img--escuro {
  opacity: 1;
}

.cabecalho--rolado .logotipo {
  height: 40px;
}

/* ---------- Menu (computador) ---------- */
.menu {
  position: relative;
  margin-left: auto;
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__item {
  position: relative;
}

.menu__ligacao {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* Sublinhado dourado que cresce a partir do centro */
.menu__ligacao::after {
  content: "";
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-destaque);
  transform: scaleX(0);
  transition: transform 0.35s var(--curva);
}

.menu__ligacao--ativa::after {
  transform: scaleX(1);
}

.menu__seta {
  width: 12px;
  height: 12px;
  transition: transform 0.35s var(--curva);
}

.menu__gatilho[aria-expanded="true"] .menu__seta {
  transform: rotate(180deg);
}

/* Cápsula que desliza por trás da ligação sob o rato */
.menu__indicador {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--curva), width 0.45s var(--curva), height 0.45s var(--curva), opacity 0.25s, background 0.35s;
}

.cabecalho--rolado .menu__indicador,
.cabecalho--solido .menu__indicador {
  background: rgba(31, 39, 75, 0.07);
}

/* Submenu de serviços: uma coluna por área, com o logótipo da marca e os temas */
.submenu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: min(860px, 94vw);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.25rem;
  padding: 0.75rem;
  border-radius: 22px;
  background: #fff;
  color: var(--cor-texto);
  box-shadow: 0 30px 70px rgba(31, 39, 75, 0.2), 0 0 0 1px rgba(31, 39, 75, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px) scale(0.97);
  transform-origin: top center;
  transition: opacity 0.25s, transform 0.35s var(--curva), visibility 0s 0.35s;
}

/* Seta do submenu */
.submenu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: #fff;
  transform: translateX(-50%) rotate(45deg);
}

/* Ponte invisível para o rato não perder o submenu ao descer */
.submenu::after {
  content: "";
  position: absolute;
  inset: -20px 0 auto;
  height: 20px;
}

.menu__item--aberto .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s;
}

.submenu__coluna {
  position: relative;
  padding: 0.5rem;
  border-radius: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s, transform 0.4s var(--curva), background 0.25s;
}

/* Separador vertical entre áreas */
.submenu__coluna + .submenu__coluna::before {
  content: "";
  position: absolute;
  left: -0.15rem;
  top: 1rem;
  bottom: 1rem;
  width: 1px;
  background: var(--cor-borda);
}

.menu__item--aberto .submenu__coluna {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 70ms + 80ms), calc(var(--i) * 70ms + 80ms), 0s;
}

.submenu__area {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: background 0.25s;
}

.submenu__area:hover,
.submenu__area:focus-visible {
  background: var(--cor-fundo-claro);
}

.submenu__logo {
  display: block;
  height: 76px;
  margin-bottom: 0.6rem;
  padding: 0.6rem;
  border-radius: 10px;
  background: var(--cor-fundo-claro);
  overflow: hidden;
  transition: transform 0.4s var(--curva);
}

.submenu__area:hover .submenu__logo {
  transform: scale(1.03);
}

.submenu__logo--escuro {
  background: linear-gradient(160deg, #36426b, var(--cor-primaria));
}

.submenu__logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.submenu__titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--cor-primaria);
}

.submenu__titulo span {
  color: var(--cor-destaque);
  transition: transform 0.3s var(--curva);
}

.submenu__area:hover .submenu__titulo span {
  transform: translateX(4px);
}

.submenu__descricao {
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
  line-height: 1.4;
}

/* Lista de temas de cada área */
.submenu__temas {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0 0;
  border-top: 1px dashed var(--cor-borda);
}

.submenu__temas a {
  position: relative;
  display: block;
  padding: 0.3rem 0.5rem 0.3rem 1.1rem;
  border-radius: 8px;
  color: var(--cor-texto);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s, transform 0.3s var(--curva), background 0.2s;
}

.submenu__temas a::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-borda);
  transform: translateY(-50%);
  transition: background 0.2s, transform 0.3s var(--curva);
}

.submenu__temas a:hover,
.submenu__temas a:focus-visible {
  color: var(--cor-primaria);
  background: var(--cor-fundo-claro);
  transform: translateX(3px);
}

.submenu__temas a:hover::before,
.submenu__temas a:focus-visible::before {
  background: var(--cor-destaque);
  transform: translateY(-50%) scale(1.4);
}

.menu__rodape {
  display: none;
}

.cabecalho__cta {
  padding: 0.6rem 1.3rem;
}

/* ---------- Botão do menu móvel (hambúrguer) ---------- */
.menu-botao {
  position: relative;
  z-index: 2;
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  cursor: pointer;
  transition: background 0.35s;
}

.cabecalho--rolado .menu-botao,
.cabecalho--solido .menu-botao {
  background: rgba(31, 39, 75, 0.07);
}

.menu-botao span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.4s var(--curva), top 0.4s var(--curva), opacity 0.2s;
}

.menu-botao span:nth-child(1) { top: 15px; }
.menu-botao span:nth-child(2) { top: 21px; }
.menu-botao span:nth-child(3) { top: 27px; }

.menu-botao[aria-expanded="true"] span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-botao[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-botao[aria-expanded="true"] span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* ---------- Destaque ---------- */
.destaque {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(200, 169, 97, 0.18), transparent 55%),
    linear-gradient(160deg, var(--cor-primaria) 0%, #2a3563 100%);
  color: #fff;
  padding-block: calc(var(--altura-cabecalho) + clamp(3rem, 8vw, 6rem)) clamp(4rem, 9vw, 7rem);
}

.destaque__decoracao span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(200, 169, 97, 0.25);
  animation: flutuar 14s ease-in-out infinite;
}

.destaque__decoracao span:nth-child(1) {
  width: 520px;
  height: 520px;
  right: -140px;
  top: -120px;
}

.destaque__decoracao span:nth-child(2) {
  width: 300px;
  height: 300px;
  right: 120px;
  bottom: -160px;
  border-color: rgba(255, 255, 255, 0.1);
  animation-delay: -7s;
}

@keyframes flutuar {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-20px, 18px); }
}

.destaque__interior {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

.destaque__texto-bloco > * {
  animation: surgir 0.9s var(--curva) both;
}

.destaque__texto-bloco > :nth-child(2) { animation-delay: 0.1s; }
.destaque__texto-bloco > :nth-child(3) { animation-delay: 0.2s; }
.destaque__texto-bloco > :nth-child(4) { animation-delay: 0.3s; }

/* Fotografia da loja com moldura dourada desfasada */
/* Fotografia da loja: é uma ligação para o Google Maps */
.destaque__foto {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 28px;
  color: inherit;
  text-decoration: none;
  animation: surgir 1s 0.25s var(--curva) both;
}

.destaque__foto::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid rgba(200, 169, 97, 0.5);
  border-radius: 28px;
}

.destaque__moldura {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.4s var(--curva), transform 0.4s var(--curva);
}

.destaque__foto:hover .destaque__moldura {
  transform: translateY(-4px);
  box-shadow: 0 50px 90px rgba(0, 0, 0, 0.45);
}

/* Aproximação lenta e contínua da fotografia */
.destaque__moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: aproximar 18s ease-in-out infinite alternate;
}

.destaque__moldura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 39, 75, 0.35), transparent 45%);
  pointer-events: none;
}

@keyframes aproximar {
  from { transform: scale(1.02); }
  to { transform: scale(1.12); }
}

/* Selo com a morada, a flutuar sobre a fotografia */
.destaque__selo {
  position: absolute;
  left: -1.5rem;
  bottom: 1.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  line-height: 1.35;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  animation: flutuar-selo 6s ease-in-out infinite;
}

.destaque__selo svg {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 10px;
  background: var(--cor-destaque);
  color: var(--cor-primaria);
}

.destaque__selo strong {
  display: block;
  font-size: 0.95rem;
  color: var(--cor-primaria);
}

.destaque__selo-seta {
  margin-left: 0.25rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--cor-destaque);
  transition: transform 0.3s var(--curva);
}

.destaque__foto:hover .destaque__selo-seta {
  transform: translate(3px, -3px);
}

@keyframes flutuar-selo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes surgir {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

.destaque__etiqueta {
  display: inline-block;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(200, 169, 97, 0.45);
  border-radius: 999px;
  color: var(--cor-destaque-clara);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.destaque h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  max-width: 18ch;
}

.destaque h1 span {
  color: var(--cor-destaque);
}

.destaque__texto {
  font-size: 1.15rem;
  max-width: 55ch;
  opacity: 0.88;
}

.destaque__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

/* ---------- Secções ---------- */
.seccao {
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}

.seccao--clara {
  background: var(--cor-fundo-claro);
}

.seccao__titulo {
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

.seccao__subtitulo {
  color: var(--cor-texto-suave);
  margin: 0 0 2.5rem;
}

/* ---------- Cartões de serviços ---------- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.cartao {
  padding: 1.5rem 1.5rem 2rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  box-shadow: var(--sombra);
  transition: transform 0.35s var(--curva), box-shadow 0.35s var(--curva);
}

.cartao:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31, 39, 75, 0.12);
}

.cartao__marca {
  display: block;
  height: 120px;
  margin-bottom: 1.25rem;
  padding: 0.9rem;
  border-radius: 10px;
  background: var(--cor-fundo-claro);
}

.cartao__marca--escura {
  background: linear-gradient(160deg, #36426b, var(--cor-primaria));
}

.cartao__marca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cartao p {
  color: var(--cor-texto-suave);
  margin: 0;
}

/* Cartão inteiro clicável */
.cartao--ligacao {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.cartao--ligacao p {
  flex: 1;
}

.cartao__mais {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--cor-primaria-clara);
}

.cartao__mais span {
  transition: transform 0.3s var(--curva);
}

.cartao--ligacao:hover .cartao__mais span {
  transform: translateX(5px);
}

/* ---------- Vantagens ---------- */
.vantagens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
}

.vantagens li {
  border-left: 4px solid var(--cor-destaque);
  padding-left: 1.25rem;
}

.vantagens p {
  color: var(--cor-texto-suave);
  margin: 0;
}

/* ---------- Contactos e formulário ---------- */
.contactos {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
}

.contactos__lista {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.contactos__lista li {
  margin-bottom: 1rem;
}

/* Logótipo da empresa no formulário de contacto de cada área */
.contactos__logo {
  display: block;
  width: auto;
  height: 64px;
  max-width: 200px;
  margin-bottom: 1.25rem;
  object-fit: contain;
  object-position: left center;
}

.contactos__registo {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.85rem;
  color: var(--cor-texto-suave);
}

.seccao--clara .formulario {
  background: #fff;
}

/* Área e marca de cada número de telefone */
.contactos__area {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9c7d36;
}

/* Indicação do custo da chamada, obrigatória junto aos números (Decreto-Lei n.º 59/2021) */
.contactos__nota {
  color: var(--cor-texto-suave);
  font-size: 0.8rem;
}

.formulario {
  padding: 2rem;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}

.campo label {
  font-weight: 500;
}

.campo input,
.campo select,
.campo textarea {
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--cor-destaque);
  box-shadow: 0 0 0 3px rgba(200, 169, 97, 0.25);
  outline: none;
}

.campo [aria-invalid="true"] {
  border-color: var(--cor-erro);
}

.campo--caixa {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}

.campo--caixa input {
  margin-top: 0.3rem;
}

.campo--caixa label {
  font-weight: 400;
  font-size: 0.9rem;
}

.formulario__mensagem {
  margin: 1rem 0 0;
  font-weight: 500;
}

.formulario__mensagem--erro {
  color: var(--cor-erro);
}

.formulario__mensagem--sucesso {
  color: var(--cor-sucesso);
}

/* ---------- Rodapé ---------- */
.rodape {
  background: var(--cor-primaria);
  color: rgba(255, 255, 255, 0.85);
  padding-block: 3rem 1.5rem;
  font-size: 0.9rem;
}

.rodape a {
  color: #fff;
}

.rodape__interior {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 2.5rem;
}

.rodape__titulo {
  margin: 0 0 0.9rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rodape__ligacoes a,
.rodape__contactos a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.2s;
}

.rodape__ligacoes a:hover,
.rodape__contactos a:hover {
  color: var(--cor-destaque);
}

.rodape__contactos {
  margin: 0;
  line-height: 1.9;
}

.rodape__area {
  display: inline-block;
  min-width: 6.5rem;
  color: rgba(255, 255, 255, 0.6);
}

.rodape__logo {
  display: block;
  height: 56px;
  width: auto;
  margin-bottom: 1rem;
}

.rodape__slogan {
  margin: 0 0 1rem;
  color: var(--cor-destaque);
  font-weight: 600;
  font-style: italic;
}

.rodape__legal {
  margin: 0;
  opacity: 0.8;
}

.rodape__ligacoes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.rodape__copia {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  opacity: 0.7;
}

/* ---------- Áreas da página inicial (uma secção por área) ---------- */
/* Linha discreta "Em parceria com" + logótipo, em cinzento até passar o rato */
.area-parceiro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cor-borda);
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

.area-parceiro__logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.4s, opacity 0.4s;
}

.area-parceiro__logo--seguros {
  height: 24px;
}

.temas:hover .area-parceiro__logo {
  filter: none;
  opacity: 1;
}

/* Secção com o texto à direita e o acordeão à esquerda */
.temas.temas--invertido {
  grid-template-columns: 1.7fr 1fr;
}

.temas--invertido .temas__intro {
  order: 2;
}

.area-numero {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c7d36;
}

.temas__intro .botao {
  margin-top: 0.5rem;
}

/* ---------- Topo das páginas interiores ---------- */
.pagina-topo {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% 10%, rgba(200, 169, 97, 0.18), transparent 55%),
    linear-gradient(160deg, var(--cor-primaria) 0%, #2a3563 100%);
  color: #fff;
  padding-block: calc(var(--altura-cabecalho) + 2rem) clamp(3rem, 7vw, 5rem);
}

.pagina-topo__grelha {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: center;
}

.pagina-topo__grelha > * {
  animation: surgir 0.9s var(--curva) both;
}

.pagina-topo h1 {
  color: #fff;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
}

.pagina-topo__texto {
  max-width: 55ch;
  font-size: 1.1rem;
  opacity: 0.88;
}

/* Cartão com o logótipo da marca, a flutuar */
.pagina-topo__marca {
  justify-self: end;
  width: min(100%, 340px);
  aspect-ratio: 4 / 3;
  padding: 1.75rem;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
  animation: surgir 0.9s 0.15s var(--curva) both, flutuar-marca 7s 1.1s ease-in-out infinite;
}

.pagina-topo__marca--escura {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.pagina-topo__marca img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fotografia no topo de uma página interior (ex.: equipa em "Sobre nós") */
.pagina-topo__foto {
  position: relative;
  justify-self: end;
  width: min(100%, 420px);
  margin: 0;
  animation: surgir 1s 0.15s var(--curva) both;
}

.pagina-topo__foto::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid rgba(200, 169, 97, 0.5);
  border-radius: 28px;
}

.pagina-topo__moldura {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}

.pagina-topo__moldura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: aproximar 18s ease-in-out infinite alternate;
}

/* Topo com pessoas recortadas, assentes no fundo da secção (ex.: Imobiliária) */
.pagina-topo--pessoas {
  padding-bottom: 0;
}

.pagina-topo--pessoas .pagina-topo__grelha {
  align-items: end;
}

.pagina-topo--pessoas .pagina-topo__grelha > div:first-child {
  align-self: center;
  padding-bottom: clamp(3rem, 7vw, 5rem);
}

.pagina-topo__pessoas {
  position: relative;
  justify-self: end;
  width: min(100%, 480px);
  margin: 0;
  padding-top: 1.5rem;
  animation: surgir 1s 0.15s var(--curva) both;
}

/* Arco em forma de porta por trás das pessoas */
.pagina-topo__pessoas::before {
  content: "";
  position: absolute;
  top: 0;
  right: 7%;
  bottom: 0;
  left: 7%;
  border: 2px solid rgba(200, 169, 97, 0.5);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(200, 169, 97, 0.3), rgba(200, 169, 97, 0.05) 85%);
}

.pagina-topo__pessoas img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.3));
}

/* Fotografia horizontal da empresa no topo (Crédito, Imobiliária e Seguros) */
.pagina-topo__grelha--imagem {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}

.pagina-topo__imagem {
  position: relative;
  justify-self: end;
  width: min(100% - 18px, 560px);
  margin: 0 18px 18px 0;
  animation: surgir 1s 0.15s var(--curva) both;
}

.pagina-topo__imagem::before {
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 2px solid rgba(200, 169, 97, 0.5);
  border-radius: 24px;
}

.pagina-topo__imagem img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}

/* Sobre a fotografia horizontal, o cartão fica no canto para não tapar as pessoas */
.pagina-topo__imagem .pagina-topo__guia {
  left: -1.5rem;
  bottom: -1.5rem;
}

/* Cartão do guia, a flutuar sobre a fotografia */
.pagina-topo__guia {
  position: absolute;
  left: -6%;
  bottom: 22%;
  z-index: 2;
  padding: 0.85rem 1.1rem;
  border-radius: 16px;
  background: #fff;
  color: var(--cor-primaria);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  line-height: 1.35;
  animation: flutuar-selo 6s ease-in-out infinite;
}

.pagina-topo__guia strong {
  display: block;
  font-size: 0.95rem;
}

.pagina-topo__guia span {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9c7d36;
}

@keyframes flutuar-marca {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Migalhas (caminho da página) */
.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.7);
}

.migalhas li + li::before {
  content: "/";
  margin-right: 0.4rem;
  opacity: 0.5;
}

.migalhas a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.migalhas a:hover {
  text-decoration: underline;
}

.migalhas [aria-current] {
  color: var(--cor-destaque-clara);
}

/* ---------- Temas com acordeão ---------- */
.temas {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.temas__intro {
  position: sticky;
  top: calc(var(--topo-fixo) + 2rem);
}

.temas__intro p {
  color: var(--cor-texto-suave);
}

.acordeao {
  display: grid;
  gap: 0.75rem;
}

.acordeao__item {
  border: 1px solid var(--cor-borda);
  border-radius: 16px;
  background: var(--cor-fundo);
  scroll-margin-top: calc(var(--topo-fixo) + 1rem);
  transition: border-color 0.35s, box-shadow 0.35s var(--curva);
}

.acordeao__item:hover {
  border-color: #c4c9d9;
}

.acordeao__item[open]:not(.acordeao__item--a-fechar) {
  border-color: rgba(200, 169, 97, 0.6);
  box-shadow: 0 16px 40px rgba(31, 39, 75, 0.1);
}

.acordeao__cabecalho {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  list-style: none;
  cursor: pointer;
}

.acordeao__cabecalho::-webkit-details-marker {
  display: none;
}

.acordeao__icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(200, 169, 97, 0.15);
  color: #9c7d36;
  transition: background 0.3s, color 0.3s, transform 0.45s var(--curva);
}

.acordeao__icone svg {
  width: 22px;
  height: 22px;
}

.acordeao__item[open]:not(.acordeao__item--a-fechar) .acordeao__icone {
  background: var(--cor-primaria);
  color: var(--cor-destaque);
  transform: rotate(-6deg) scale(1.05);
}

.acordeao__titulo {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--cor-primaria);
  line-height: 1.3;
}

.acordeao__titulo small {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

/* Sinal de mais que roda e passa a menos */
.acordeao__sinal {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--cor-fundo-claro);
  transition: background 0.3s, transform 0.45s var(--curva);
}

.acordeao__sinal::before,
.acordeao__sinal::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: var(--cor-primaria);
  transform: translate(-50%, -50%);
  transition: transform 0.45s var(--curva);
}

.acordeao__sinal::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acordeao__item[open]:not(.acordeao__item--a-fechar) .acordeao__sinal {
  background: var(--cor-destaque);
  transform: rotate(180deg);
}

.acordeao__item[open]:not(.acordeao__item--a-fechar) .acordeao__sinal::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.acordeao__conteudo {
  overflow: hidden;
}

.acordeao__corpo {
  padding: 0 1.25rem 1.5rem calc(2.25rem + 44px);
  color: var(--cor-texto-suave);
}

.acordeao__corpo p {
  margin: 0 0 1rem;
}

.acordeao__corpo ul {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.acordeao__corpo li {
  position: relative;
  padding-left: 1.75rem;
}

/* Visto dourado nas listas */
.acordeao__corpo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(200, 169, 97, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%239c7d36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.acordeao__acao {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--cor-primaria-clara);
  text-decoration: none;
}

.acordeao__acao span {
  transition: transform 0.3s var(--curva);
}

.acordeao__acao:hover span {
  transform: translateX(4px);
}

/* ---------- Simulador de crédito ---------- */
.simulador {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-radius: 24px;
  overflow: hidden;
  background: var(--cor-fundo);
  box-shadow: 0 24px 60px rgba(31, 39, 75, 0.12);
}

.simulador__campos {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.simulador__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.simulador__linha label {
  font-weight: 600;
  color: var(--cor-primaria);
}

.simulador__valor {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--cor-texto-suave);
}

.simulador__valor input {
  width: 8.5rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  text-align: right;
  color: var(--cor-primaria);
  font-variant-numeric: tabular-nums;
}

/* Sem as setas de incremento dos campos numéricos */
.simulador__valor input::-webkit-outer-spin-button,
.simulador__valor input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.simulador__valor input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.simulador__valor input:focus {
  border-color: var(--cor-destaque);
  box-shadow: 0 0 0 3px rgba(200, 169, 97, 0.25);
  outline: none;
}

/* Barra deslizante com o preenchimento dourado até ao valor atual (--pct) */
.simulador__faixa {
  width: 100%;
  height: 6px;
  margin: 0.9rem 0 0;
  border-radius: 999px;
  background: linear-gradient(to right, var(--cor-destaque) var(--pct, 50%), var(--cor-borda) var(--pct, 50%));
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.simulador__faixa::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--cor-destaque);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 39, 75, 0.25);
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.2s;
}

.simulador__faixa::-moz-range-thumb {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  border: 3px solid var(--cor-destaque);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(31, 39, 75, 0.25);
  transition: transform 0.2s;
}

.simulador__faixa:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

.simulador__faixa:active::-moz-range-thumb {
  transform: scale(1.2);
}

.simulador__limites {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--cor-texto-suave);
}

.simulador__resultado {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.25), transparent 50%),
    var(--cor-primaria);
  color: #fff;
}

.simulador__rotulo {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.75;
}

.simulador__prestacao {
  margin: 0.25rem 0 0;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  color: var(--cor-destaque);
  font-variant-numeric: tabular-nums;
}

.simulador__prestacao small {
  font-size: 0.4em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.simulador__ltv-barra {
  position: relative;
  height: 8px;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.simulador__ltv-barra span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cor-destaque-clara), var(--cor-destaque));
  transition: width 0.5s var(--curva), background 0.3s;
}

/* Marca dos 90% */
.simulador__ltv-barra i {
  position: absolute;
  left: 90%;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: rgba(255, 255, 255, 0.6);
}

.simulador__ltv--excede .simulador__ltv-barra span {
  background: #e07a5f;
}

.simulador__detalhes {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.simulador__detalhes div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.simulador__detalhes dt {
  opacity: 0.75;
}

.simulador__detalhes dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.simulador__aviso {
  margin: 0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: rgba(224, 122, 95, 0.18);
  color: #ffd2c4;
  font-size: 0.85rem;
}

.simulador__resultado .botao {
  margin-top: auto;
}

.simulador__nota {
  margin: 1.25rem 0 0;
  font-size: 0.8rem;
  color: var(--cor-texto-suave);
}

/* Tipo de crédito escolhido, por cima dos campos */
.simulador__tipo {
  margin: 0 0 -0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c7d36;
}

/* Valores da simulação: desfocados até o utilizador clicar no botão de calcular.
   A altura mínima garante espaço para a mensagem do cadeado. */
.simulador__resultado {
  position: relative;
  min-height: 19rem;
}

.simulador__valores {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: filter 0.6s var(--curva), opacity 0.6s;
}

.simulador__resultado--bloqueado .simulador__valores {
  filter: blur(8px);
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.simulador__bloqueio {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  background: rgba(31, 39, 75, 0.35);
  transition: opacity 0.4s, visibility 0.4s;
}

.simulador__resultado:not(.simulador__resultado--bloqueado) .simulador__bloqueio {
  opacity: 0;
  visibility: hidden;
}

.simulador__bloqueio p {
  max-width: 26ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.simulador__resultado .simulador__bloqueio .botao {
  margin-top: 0;
}

.simulador__cadeado {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--cor-destaque);
  border-radius: 50%;
  color: var(--cor-destaque);
}

.simulador__cadeado svg {
  width: 24px;
  height: 24px;
}

.simulador__contacto[hidden] {
  display: none;
}

/* ---------- Tipos de produto (lista ao lado do simulador de crédito ou seguros) ---------- */
.tipos-produto__grelha {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Ao lado da lista o simulador é mais estreito: campos e prestação mais compactos */
.tipos-produto__grelha .simulador__valor input {
  width: 7rem;
}

.tipos-produto__grelha .simulador__prestacao {
  font-size: clamp(2.2rem, 4vw, 2.9rem);
  white-space: nowrap;
}

.tipos-produto__lateral {
  position: sticky;
  top: calc(var(--topo-fixo) + 2rem);
}

.tipos-produto__lateral > p:not(.historia__etiqueta) {
  color: var(--cor-texto-suave);
}

.tipos-produto {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.tipo-produto {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: #fff;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--curva);
}

.tipo-produto:hover {
  transform: translateX(4px);
}

.tipo-produto:focus-visible {
  outline: 2px solid var(--cor-destaque);
  outline-offset: 2px;
}

.tipo-produto__icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-fundo-claro);
  color: var(--cor-texto-suave);
  transition: background 0.3s, color 0.3s;
}

.tipo-produto__icone svg {
  width: 20px;
  height: 20px;
}

.tipo-produto strong {
  display: block;
  color: var(--cor-primaria);
  line-height: 1.25;
}

.tipo-produto small {
  color: var(--cor-texto-suave);
}

.tipo-produto--ativo {
  border-color: var(--cor-destaque);
  box-shadow: 0 12px 28px rgba(31, 39, 75, 0.1);
}

.tipo-produto--ativo .tipo-produto__icone {
  background: var(--cor-destaque);
  color: var(--cor-primaria);
}

/* ---------- Faixa de chamada para contacto ---------- */
.chamada {
  padding-block: clamp(3rem, 7vw, 4.5rem);
  background: linear-gradient(120deg, var(--cor-destaque) 0%, var(--cor-destaque-clara) 100%);
  color: var(--cor-primaria);
}

.chamada__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}

.chamada h2 {
  margin: 0 0 0.25rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.chamada p {
  margin: 0;
  opacity: 0.85;
}

.chamada__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.chamada .botao {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #fff;
}

.chamada .botao:hover {
  background: var(--cor-primaria-clara);
  box-shadow: 0 10px 24px rgba(31, 39, 75, 0.3);
}

.chamada__telefone {
  display: flex;
  flex-direction: column;
  color: var(--cor-primaria);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.chamada__telefone small {
  font-size: 0.75rem;
  font-weight: 500;
  opacity: 0.75;
}

/* ---------- Sobre nós ---------- */
.sobre-intro {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.sobre-intro__texto p {
  color: var(--cor-texto-suave);
  font-size: 1.05rem;
}

.sobre-intro__citacao {
  position: relative;
  margin: 0;
  padding: 2.5rem 2rem 3rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.25), transparent 55%),
    var(--cor-primaria);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
}

/* Aspas de abertura (em cima, à esquerda) e de fecho (em baixo, à direita) */
.sobre-intro__citacao::before,
.sobre-intro__citacao::after {
  position: absolute;
  font-size: 5rem;
  line-height: 1;
  color: var(--cor-destaque);
}

.sobre-intro__citacao::before {
  content: "\201C";
  top: -0.2rem;
  left: 1.5rem;
}

.sobre-intro__citacao::after {
  content: "\201D";
  right: 1.5rem;
  bottom: -2.6rem;
}

.sobre-intro__citacao p {
  margin: 0;
}

/* Faixa só com o slogan */
.sobre-slogan .sobre-intro__citacao {
  max-width: 760px;
  margin-inline: auto;
  padding: 3rem 2.5rem 3.5rem;
  text-align: center;
  font-size: clamp(1.4rem, 3vw, 2rem);
}

/* ---------- Linha do tempo ("A nossa história") ---------- */
.historia {
  /* Corta o deslocamento lateral das animações de entrada sem afetar a barra fixa */
  overflow-x: clip;
  background:
    radial-gradient(circle at 0% 0%, rgba(200, 169, 97, 0.12), transparent 40%),
    radial-gradient(circle at 100% 55%, rgba(31, 39, 75, 0.06), transparent 45%),
    var(--cor-fundo-claro);
}

.historia__cabecalho {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.historia__cabecalho > p:last-child {
  margin: 0;
  font-size: 1.1rem;
  color: var(--cor-texto-suave);
}

.historia__etiqueta {
  display: inline-block;
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9c7d36;
}

/* Barra de progressão: cartão flutuante fixo por baixo do cabeçalho */
.cronologia {
  position: sticky;
  top: calc(var(--topo-fixo) + 12px);
  z-index: 5;
  max-width: 860px;
  margin: 2.5rem auto 4.5rem;
}

.cronologia__interior {
  position: relative;
  padding: 1rem 1.25rem 0.85rem;
  border: 1px solid rgba(31, 39, 75, 0.06);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 40px rgba(31, 39, 75, 0.12);
}

.cronologia__pontos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--passos, 5), 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Linha entre o centro do primeiro e do último ponto */
.cronologia__barra {
  position: absolute;
  top: calc(1rem + 20px);
  left: calc(1.25rem + (100% - 2.5rem) / (2 * var(--passos, 5)));
  right: calc(1.25rem + (100% - 2.5rem) / (2 * var(--passos, 5)));
  height: 4px;
  border-radius: 999px;
  background: var(--cor-borda);
  transform: translateY(-50%);
}

.cronologia__preenchimento {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cor-primaria), var(--cor-destaque));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.15s linear;
}

.cronologia__ponto {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  color: inherit;
  text-align: center;
  text-decoration: none;
}

.cronologia__numero {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.4rem;
  border: 3px solid var(--cor-borda);
  border-radius: 50%;
  background: #fff;
  color: var(--cor-texto-suave);
  font-size: 0.95rem;
  font-weight: 800;
  transition: background 0.4s, border-color 0.4s, color 0.4s, transform 0.4s var(--curva);
}

.cronologia__ponto:hover .cronologia__numero {
  border-color: var(--cor-destaque);
}

.cronologia__ponto--alcancado .cronologia__numero {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #fff;
}

.cronologia__ponto--atual .cronologia__numero {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: var(--cor-primaria);
  transform: scale(1.15);
  animation: pulsar 2s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 169, 97, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(200, 169, 97, 0); }
}

.cronologia__titulo {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cor-primaria);
}

.cronologia__ano {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--cor-texto-suave);
}

/* Blocos de cada passo */
.passos-historia {
  display: grid;
  gap: clamp(4.5rem, 9vw, 7.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.passo-historia {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
  scroll-margin-top: calc(var(--topo-fixo) + 140px);
}

/* Fotografia alternadamente à esquerda e à direita */
.passo-historia:nth-child(even) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.passo-historia:nth-child(even) .passo-historia__media {
  order: 2;
}

.passo-historia__media {
  position: relative;
  justify-self: center;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin: 0;
}

/* Moldura dourada desfasada, espelhada nos passos pares */
.passo-historia__media::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border: 2px solid rgba(200, 169, 97, 0.55);
  border-radius: 30px;
}

.passo-historia:nth-child(even) .passo-historia__media::before {
  inset: 20px 20px -20px -20px;
}

.passo-historia__foto {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px rgba(31, 39, 75, 0.18);
}

.passo-historia__foto img,
.passo-historia__foto-extra img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}

.passo-historia:hover .passo-historia__foto img {
  transform: scale(1.04);
}

/* Selo redondo com o ano, a flutuar sobre a fotografia */
.passo-historia__selo {
  position: absolute;
  top: -22px;
  left: -22px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border: 5px solid #fff;
  border-radius: 50%;
  background: var(--cor-primaria);
  color: var(--cor-destaque);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 30px rgba(31, 39, 75, 0.25);
  animation: flutuar-selo 6s ease-in-out infinite;
}

.passo-historia:nth-child(even) .passo-historia__selo {
  left: auto;
  right: -22px;
}

/* Segunda fotografia mais pequena, sobreposta no canto (último passo) */
.passo-historia__foto-extra {
  position: absolute;
  right: -8%;
  bottom: -10%;
  z-index: 2;
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 6px solid #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(31, 39, 75, 0.25);
}

.passo-historia__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.35rem 0.95rem 0.35rem 0.35rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(31, 39, 75, 0.08);
  color: var(--cor-primaria);
  font-size: 0.85rem;
  font-weight: 700;
}

.passo-historia__etiqueta span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cor-destaque);
  color: var(--cor-primaria);
  font-size: 0.75rem;
}

.passo-historia h3 {
  margin-bottom: 0.9rem;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.passo-historia__texto > p:not(.passo-historia__etiqueta) {
  margin: 0 0 0.9rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cor-texto-suave);
}

.passo-historia__destaque {
  margin: 0 0 1.25rem;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 3px solid var(--cor-destaque);
  color: var(--cor-primaria);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
}

.passo-historia__destaque p {
  margin: 0;
}

/* Cores das marcas dentro do texto */
.marca--portinsurance { color: var(--cor-primaria); }
.marca--mycredit { color: #9c7d36; }
.marca--tuacasa { color: #1a7fa6; }

/* Entrada animada dos blocos (só quando o JavaScript está ativo) */
.historia--animada .passo-historia__media,
.historia--animada .passo-historia__texto {
  opacity: 0;
  transition: opacity 0.8s, transform 0.9s var(--curva);
}

.historia--animada .passo-historia__media {
  transform: translateX(-40px) scale(0.96);
}

.historia--animada .passo-historia:nth-child(even) .passo-historia__media {
  transform: translateX(40px) scale(0.96);
}

.historia--animada .passo-historia__texto {
  transform: translateY(30px);
  transition-delay: 0.12s;
}

/* Seletor com a mesma força que o dos passos pares, para os repor sempre no sítio */
.historia--animada .passo-historia.passo-historia--visivel .passo-historia__media,
.historia--animada .passo-historia.passo-historia--visivel .passo-historia__texto {
  opacity: 1;
  transform: none;
}

/* ---------- Da primeira loja ao novo espaço (etapas da mudança) ---------- */
.mudanca__grelha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.etapa__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  margin: 0 0 1.1rem;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(31, 39, 75, 0.14);
  transition: transform 0.45s var(--curva), box-shadow 0.45s var(--curva);
}

.etapa__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}

/* Escurecimento suave em baixo da fotografia */
.etapa__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31, 39, 75, 0.35), transparent 40%);
  pointer-events: none;
}

.etapa:hover .etapa__foto {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px rgba(31, 39, 75, 0.2);
}

.etapa:hover .etapa__foto img {
  transform: scale(1.06);
}

.etapa__numero {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--cor-destaque);
  color: var(--cor-primaria);
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

.etapa__titulo {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
}

.etapa p {
  margin: 0;
  color: var(--cor-texto-suave);
}

.mudanca__dica {
  display: none;
}

/* Cartão final com a fachada do novo espaço */
.mudanca__destino {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  margin-top: clamp(3rem, 7vw, 4.5rem);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.25), transparent 50%),
    var(--cor-primaria);
  color: #fff;
  box-shadow: 0 30px 60px rgba(31, 39, 75, 0.2);
}

.mudanca__destino-foto {
  display: block;
  min-height: 320px;
  overflow: hidden;
}

.mudanca__destino-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}

.mudanca__destino-foto:hover img {
  transform: scale(1.05);
}

.mudanca__destino-texto {
  align-self: center;
  padding: clamp(1.75rem, 4vw, 3rem);
}

.mudanca__destino-texto h3 {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.mudanca__destino-texto > p:not(.historia__etiqueta) {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.85;
}

.mudanca__destino-texto .historia__etiqueta {
  color: var(--cor-destaque);
}

/* Elementos que aparecem ao entrar no ecrã (só com JavaScript ativo) */
.revelar-ativo [data-revelar] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s, transform 0.8s var(--curva);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.revelar-ativo [data-revelar].revelado {
  opacity: 1;
  transform: none;
}

/* ---------- Quem o vai receber (equipa) ---------- */
.equipa__grelha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
  text-align: center;
}

/* Retrato dentro de um círculo, com anel branco que fica dourado ao passar o rato */
.pessoa__retrato {
  position: relative;
  width: min(100%, 220px);
  aspect-ratio: 1;
  margin: 0 auto 1.25rem;
  border: 5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 30% 25%, #fff 0%, #e8ebf3 55%, #d6dbe8 100%);
  box-shadow: 0 22px 44px rgba(31, 39, 75, 0.16);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.5s var(--curva);
}

.pessoa__retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform-origin: center bottom;
  transition: transform 0.6s var(--curva);
}

.pessoa:hover .pessoa__retrato {
  border-color: var(--cor-destaque);
  box-shadow: 0 26px 50px rgba(31, 39, 75, 0.22);
  transform: translateY(-4px);
}

.pessoa:hover .pessoa__retrato img {
  transform: scale(1.06);
}

.pessoa__nome {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
}

/* Área de cada pessoa, numa etiqueta com a cor da marca */
.pessoa__area {
  display: inline-block;
  margin: 0;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(31, 39, 75, 0.08);
  color: var(--cor-texto-suave);
  font-size: 0.85rem;
  font-weight: 600;
}

.pessoa__area--credito { color: #9c7d36; }
.pessoa__area--imobiliaria { color: #1a7fa6; }
.pessoa__area--seguros { color: var(--cor-primaria); }

/* ---------- Guia da primeira casa (passo a passo) ---------- */
.guia__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Painel lateral fixo com as fases e o passo atual */
.guia__lateral {
  position: sticky;
  top: calc(var(--topo-fixo) + 2rem);
}

.guia__lateral > p:not(.historia__etiqueta):not(.guia__contador) {
  color: var(--cor-texto-suave);
}

.guia__fases {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.guia__fase {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--cor-borda);
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--curva);
}

.guia__fase:hover {
  transform: translateX(4px);
}

.guia__fase-icone {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cor-fundo-claro);
  color: var(--cor-texto-suave);
  font-weight: 800;
  transition: background 0.3s, color 0.3s;
}

.guia__fase strong {
  display: block;
  color: var(--cor-primaria);
  line-height: 1.25;
}

.guia__fase small {
  color: var(--cor-texto-suave);
}

.guia__fase--feita .guia__fase-icone {
  background: var(--cor-primaria);
  color: #fff;
}

.guia__fase--ativa {
  border-color: var(--cor-destaque);
  box-shadow: 0 12px 28px rgba(31, 39, 75, 0.1);
}

.guia__fase--ativa .guia__fase-icone {
  background: var(--cor-destaque);
  color: var(--cor-primaria);
}

.guia__contador {
  margin: 1.25rem 0 0;
  font-weight: 600;
  color: #9c7d36;
}

/* Lista de passos com a linha vertical que se enche com o scroll */
.guia__passos {
  position: relative;
}

.guia__linha {
  position: absolute;
  left: 22.5px;
  width: 3px;
  border-radius: 999px;
  background: var(--cor-borda);
}

.guia__linha span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--cor-primaria), var(--cor-destaque));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.15s linear;
}

.guia__fase-bloco + .guia__fase-bloco {
  margin-top: 3rem;
}

.guia__fase-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem 64px;
  font-size: 1.45rem;
}

.guia__fase-titulo span {
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background: rgba(200, 169, 97, 0.15);
  color: #9c7d36;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guia__lista {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.guia-passo {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  scroll-margin-top: calc(var(--topo-fixo) + 1.5rem);
}

.guia-passo__numero {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid var(--cor-borda);
  border-radius: 50%;
  background: #fff;
  color: var(--cor-texto-suave);
  font-weight: 800;
  transition: background 0.4s, border-color 0.4s, color 0.4s, transform 0.4s var(--curva);
}

.guia-passo--feito .guia-passo__numero {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria);
  color: #fff;
}

.guia-passo--atual .guia-passo__numero {
  border-color: var(--cor-destaque);
  background: var(--cor-destaque);
  color: var(--cor-primaria);
  transform: scale(1.1);
  animation: pulsar 2s ease-in-out infinite;
}

.guia-passo__cartao {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sombra);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--curva);
}

.guia-passo--atual .guia-passo__cartao {
  border-color: rgba(200, 169, 97, 0.7);
  box-shadow: 0 18px 40px rgba(31, 39, 75, 0.12);
  transform: translateX(4px);
}

.guia-passo__cartao h4 {
  margin: 0 0 0.4rem;
  font-size: 1.15rem;
  color: var(--cor-primaria);
}

.guia-passo__cartao > p {
  margin: 0 0 0.75rem;
  color: var(--cor-texto-suave);
}

.guia-passo__cartao > :last-child {
  margin-bottom: 0;
}

.guia-passo__lista {
  display: grid;
  gap: 0.4rem;
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  color: var(--cor-texto-suave);
}

.guia-passo__lista li {
  position: relative;
  padding-left: 1.75rem;
}

.guia-passo__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(200, 169, 97, 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%239c7d36' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.guia-passo__dica {
  margin: 0 0 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--cor-destaque);
  border-radius: 0 12px 12px 0;
  background: rgba(200, 169, 97, 0.1);
  color: var(--cor-primaria);
  font-size: 0.93rem;
}

.guia-passo__dica strong {
  color: #9c7d36;
}

/* ---------- Erros mais comuns ---------- */
.erros__grelha {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
}

.erro {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--cor-borda);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--sombra);
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva);
}

.erro:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(31, 39, 75, 0.12);
}

.erro__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.erro__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(224, 122, 95, 0.14);
  color: #c4553a;
}

.erro__icone svg,
.erro__visto svg {
  width: 20px;
  height: 20px;
}

.erro__numero {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(31, 39, 75, 0.12);
}

.erro h3 {
  margin: 0 0 1rem;
  font-size: 1.1rem;
}

.erro__evitar {
  display: flex;
  gap: 0.6rem;
  margin: auto 0 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--cor-borda);
  font-size: 0.92rem;
  color: var(--cor-texto-suave);
}

.erro__visto {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(200, 169, 97, 0.18);
  color: #9c7d36;
}

.erro__visto svg {
  width: 14px;
  height: 14px;
}

.erro__evitar strong {
  color: var(--cor-primaria);
}

/* ---------- Equipa da imobiliária (consultores) ---------- */
.consultores__grelha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  list-style: none;
  margin: 3.5rem 0 0;
  padding: 0;
}

.consultor {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--cor-borda);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--sombra);
  transition: transform 0.4s var(--curva), box-shadow 0.4s var(--curva);
}

.consultor:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(31, 39, 75, 0.14);
}

/* Fotografia recortada à frente de um arco em forma de porta */
.consultor__foto {
  position: relative;
  height: 250px;
  padding-top: 1.5rem;
  background: linear-gradient(180deg, var(--cor-fundo-claro), #fff);
}

.consultor__foto::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 86%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(200, 169, 97, 0.35), rgba(200, 169, 97, 0.08));
  transform: translateX(-50%);
  transition: width 0.5s var(--curva);
}

.consultor:hover .consultor__foto::before {
  width: 70%;
}

.consultor__foto img {
  position: relative;
  display: block;
  width: auto;
  height: 100%;
  max-width: 92%;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: center bottom;
  transition: transform 0.5s var(--curva);
}

.consultor:hover .consultor__foto img {
  transform: scale(1.04);
}

.consultor__corpo {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.5rem;
  border-top: 3px solid var(--cor-destaque);
  text-align: center;
}

.consultor__nome {
  margin: 0 0 0.15rem;
  font-size: 1.3rem;
}

.consultor__cargo {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a7fa6;
}

.consultor__texto {
  margin: 0 0 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* Telefone em botão, fixo no fundo do cartão */
.consultor__telefone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  background: var(--cor-fundo-claro);
  color: var(--cor-primaria);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.consultor__telefone svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #9c7d36;
  transition: color 0.3s;
}

.consultor__telefone span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: left;
}

.consultor__telefone small {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.75;
}

.consultor__telefone:hover {
  background: var(--cor-primaria);
  color: #fff;
}

.consultor__telefone:hover svg {
  color: var(--cor-destaque);
}

/* Equipa de quatro pessoas só com nome e função (ex.: Crédito) */
.consultores__grelha--quatro {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.consultor--simples .consultor__cargo {
  margin-bottom: 0;
}

/* ---------- Recrutamento ("Junte-se à equipa") ---------- */
.recrutar {
  /* Espaço em cima para a fotografia sair da faixa */
  padding-top: 5rem;
  background: var(--cor-fundo-claro);
}

.recrutar__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  min-height: 400px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.3), transparent 45%),
    linear-gradient(120deg, #2a3563, var(--cor-primaria-clara));
  color: #fff;
}

/* Lado da fotografia, mais escuro, com um arco dourado por trás */
.recrutar__foto {
  position: relative;
  background: var(--cor-primaria);
}

.recrutar__foto::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: min(70%, 320px);
  height: 82%;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(200, 169, 97, 0.55), rgba(200, 169, 97, 0.1));
  transform: translateX(-50%);
}

/* A fotografia é mais alta do que a faixa e sai por cima dela */
.recrutar__foto img {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: block;
  width: auto;
  height: calc(100% + 4.5rem);
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35));
  transform: translateX(-50%);
  transform-origin: center bottom;
  transition: transform 0.6s var(--curva);
}

.recrutar:hover .recrutar__foto img {
  transform: translateX(-50%) scale(1.03);
}

.recrutar__texto {
  align-self: center;
  max-width: 560px;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
}

.recrutar__etiqueta {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cor-destaque);
}

.recrutar h2 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.recrutar__texto > p:not(.recrutar__etiqueta) {
  margin: 0 0 2rem;
  font-size: 1.1rem;
  line-height: 1.65;
  opacity: 0.88;
}

/* ---------- Barra "Nesta página" (navegação interna de uma página) ---------- */
html.com-subnav {
  --topo-fixo: calc(var(--altura-cabecalho-rolado) + 58px);
}

.subnav {
  position: sticky;
  top: var(--altura-cabecalho-rolado);
  z-index: 40;
  border-bottom: 1px solid var(--cor-borda);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(31, 39, 75, 0.06);
}

.subnav__interior {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 58px;
}

.subnav__titulo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-right: 1rem;
  border-right: 1px solid var(--cor-borda);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9c7d36;
}

.subnav__lista {
  display: flex;
  gap: 0.25rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.subnav__lista::-webkit-scrollbar {
  display: none;
}

.subnav__lista a {
  display: block;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.25s, color 0.25s;
}

.subnav__lista a:hover {
  background: var(--cor-fundo-claro);
  color: var(--cor-primaria);
}

.subnav__lista a.subnav__ligacao--ativa {
  background: var(--cor-primaria);
  color: #fff;
}

/* Ligações de destaque no submenu (ex.: guia e equipa da imobiliária) */
.submenu__temas a.submenu__tema--destaque {
  color: var(--cor-primaria);
  font-weight: 700;
}

.submenu__temas a.submenu__tema--destaque::before {
  background: var(--cor-destaque);
}

.submenu__temas li.submenu__separador {
  height: 1px;
  margin: 0.35rem 0.5rem;
  background: var(--cor-borda);
}

/* Passos numerados */
.passos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: passo;
}

.passos li {
  position: relative;
  padding-top: 3.25rem;
  counter-increment: passo;
}

.passos li::before {
  content: counter(passo, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--cor-destaque);
}

.passos p {
  margin: 0;
  color: var(--cor-texto-suave);
}

/* ---------- Páginas legais (Política de Privacidade) ---------- */
.pagina-topo--simples h1 {
  margin-bottom: 0.5rem;
}

.legal {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-block: clamp(3rem, 7vw, 5rem);
}

/* Índice lateral que acompanha o scroll */
.legal__indice {
  position: sticky;
  top: calc(var(--topo-fixo) + 1.5rem);
  padding: 1.25rem;
  border: 1px solid var(--cor-borda);
  border-radius: 18px;
  background: var(--cor-fundo-claro);
}

.legal__indice-titulo {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9c7d36;
}

.legal__indice ol {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--cor-texto-suave);
  font-size: 0.9rem;
}

.legal__indice a {
  display: block;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  color: var(--cor-texto);
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}

.legal__indice a:hover {
  background: #fff;
  color: var(--cor-primaria);
}

.legal__texto {
  max-width: 780px;
  color: var(--cor-texto-suave);
  line-height: 1.75;
}

.legal__texto section {
  margin-top: 2.75rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--cor-borda);
  scroll-margin-top: calc(var(--topo-fixo) + 1rem);
}

.legal__texto h2 {
  display: flex;
  gap: 0.6rem;
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
}

.legal__texto h2 span {
  color: var(--cor-destaque);
}

.legal__texto h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.1rem;
}

.legal__texto ul {
  padding-left: 1.25rem;
}

.legal__texto li {
  margin-bottom: 0.5rem;
}

.legal__texto li::marker {
  color: var(--cor-destaque);
}

.legal__intro {
  font-size: 1.15rem;
  color: var(--cor-texto);
}

/* Definições em cartões */
.legal__definicoes {
  display: grid;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
}

.legal__definicoes div {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--cor-destaque);
  border-radius: 0 12px 12px 0;
  background: var(--cor-fundo-claro);
}

.legal__definicoes dt {
  font-weight: 700;
  color: var(--cor-primaria);
}

.legal__definicoes dd {
  margin: 0.25rem 0 0;
}

/* Cartão com os dados do responsável pelo tratamento */
.legal__cartao {
  display: grid;
  gap: 0.35rem;
  margin-top: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.25), transparent 50%),
    var(--cor-primaria);
  color: rgba(255, 255, 255, 0.85);
  font-style: normal;
}

.legal__cartao a {
  color: #fff;
}

.legal__cartao-nome {
  font-size: 1.2rem;
  color: #fff;
}

.legal__cartao-empresa {
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--cor-destaque);
}

.legal__vigor {
  margin-top: 3rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(200, 169, 97, 0.12);
  color: var(--cor-primaria);
  font-weight: 600;
}

/* ---------- Páginas de texto (legais, 404) ---------- */
.pagina-texto {
  max-width: 760px;
  padding-block: calc(var(--altura-cabecalho) + 2rem) 4rem;
}

.pagina-erro {
  text-align: center;
  padding-block: calc(var(--altura-cabecalho) + 4rem) 6rem;
}

.pagina-erro__codigo {
  font-size: clamp(4rem, 15vw, 7rem);
  font-weight: 800;
  color: var(--cor-destaque);
  margin: 0;
  line-height: 1;
}

/* ---------- Menu móvel ---------- */
@media (max-width: 900px) {
  .menu-botao {
    display: block;
  }

  .cabecalho__cta,
  .menu__indicador {
    display: none;
  }

  /* Painel em ecrã inteiro que se revela num círculo a partir do botão */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: calc(var(--altura-cabecalho) + 1rem) 1.5rem 2rem;
    overflow-y: auto;
    background:
      radial-gradient(circle at 100% 0%, rgba(200, 169, 97, 0.2), transparent 45%),
      var(--cor-primaria);
    color: #fff;
    visibility: hidden;
    clip-path: circle(0 at calc(100% - 42px) 44px);
    transition: clip-path 0.65s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s 0.65s;
  }

  .menu--aberto {
    visibility: visible;
    clip-path: circle(150% at calc(100% - 42px) 44px);
    transition: clip-path 0.65s cubic-bezier(0.7, 0, 0.2, 1), visibility 0s;
  }

  /* Com o menu aberto o cabeçalho fica sempre na versão clara sobre azul */
  .cabecalho--menu-aberto {
    color: #fff;
  }

  .cabecalho--menu-aberto::before {
    opacity: 0;
  }

  .cabecalho--menu-aberto .logotipo__img--claro {
    opacity: 1;
  }

  .cabecalho--menu-aberto .logotipo__img--escuro {
    opacity: 0;
  }

  .cabecalho--menu-aberto .menu-botao {
    background: rgba(255, 255, 255, 0.12);
  }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  /* Entrada escalonada dos itens */
  .menu__item,
  .menu__rodape {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.3s, transform 0.5s var(--curva);
  }

  .menu--aberto .menu__item,
  .menu--aberto .menu__rodape {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i) * 70ms + 250ms);
  }

  .menu__ligacao {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.6rem;
    font-weight: 600;
  }

  .menu__ligacao::after {
    left: 0;
    right: auto;
    bottom: -1px;
    width: 48px;
    transform-origin: left;
  }

  .menu__seta {
    width: 18px;
    height: 18px;
  }

  /* Submenu em acordeão: no telemóvel mostra só as áreas, sem a lista de temas */
  .submenu {
    position: static;
    width: auto;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    color: #fff;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: max-height 0.5s var(--curva), padding 0.5s var(--curva);
  }

  .submenu::before,
  .submenu::after {
    display: none;
  }

  .menu__item--aberto .submenu {
    max-height: 520px;
    padding: 0.75rem 0;
    visibility: inherit;
    transform: none;
  }

  /* Submenu fechado não pode receber foco */
  .menu__item:not(.menu__item--aberto) .submenu {
    visibility: hidden;
    transition: max-height 0.5s var(--curva), padding 0.5s var(--curva), visibility 0s 0.5s;
  }

  .submenu__coluna {
    padding: 0;
  }

  .submenu__coluna + .submenu__coluna::before {
    display: none;
  }

  .submenu__area {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
  }

  .submenu__area:hover,
  .submenu__area:focus-visible {
    background: rgba(255, 255, 255, 0.12);
  }

  .submenu__logo {
    grid-row: span 2;
    height: 64px;
    padding: 0.45rem;
    margin: 0;
    background: #fff;
  }

  .submenu__logo--escuro {
    background: rgba(0, 0, 0, 0.2);
  }

  .submenu__titulo {
    color: #fff;
  }

  .submenu__descricao {
    color: rgba(255, 255, 255, 0.7);
  }

  .submenu__temas {
    display: none;
  }

  .menu__rodape {
    display: block;
    margin-top: auto;
    padding-top: 2rem;
  }

  .menu__rodape .botao {
    width: 100%;
  }

  .menu__rodape p {
    margin: 1.25rem 0 0;
    text-align: center;
    line-height: 1.9;
  }

  .menu__rodape p a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
  }

  .contactos {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .destaque__interior,
  .pagina-topo__grelha,
  .temas,
  .temas.temas--invertido,
  .simulador,
  .sobre-intro {
    grid-template-columns: 1fr;
  }

  .pagina-topo__marca {
    justify-self: start;
    width: min(100%, 260px);
  }

  .passo-historia,
  .passo-historia:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .passo-historia:nth-child(even) .passo-historia__media {
    order: 0;
  }

  .passo-historia__media {
    width: min(100% - 24px, 420px);
  }

  .mudanca__grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mudanca__destino {
    grid-template-columns: 1fr;
  }

  .equipa__grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1.25rem;
  }

  .guia__grelha {
    grid-template-columns: 1fr;
  }

  .tipos-produto__grelha {
    grid-template-columns: minmax(0, 1fr);
  }

  .tipos-produto__lateral {
    position: static;
  }

  /* Tipos de crédito numa faixa que desliza na horizontal */
  .tipos-produto {
    display: flex;
    margin-inline: -1.25rem;
    padding: 0.25rem 1.25rem 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .tipos-produto::-webkit-scrollbar {
    display: none;
  }

  .tipo-produto {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
  }

  .tipo-produto:hover {
    transform: none;
  }

  .tipo-produto small {
    display: none;
  }

  .guia__lateral {
    position: static;
  }

  /* Fases lado a lado, em formato compacto */
  .guia__fases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guia__fase {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    text-align: center;
  }

  .guia__fase small {
    display: none;
  }

  .guia__contador {
    display: none;
  }

  .erros__grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .consultores__grelha {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recrutar__interior {
    grid-template-columns: 1fr;
  }

  .recrutar__interior {
    min-height: 0;
  }

  .recrutar__foto {
    height: 320px;
  }

  .recrutar__texto {
    max-width: none;
    text-align: center;
  }

  .mudanca__destino-foto {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .legal {
    grid-template-columns: 1fr;
  }

  .legal__indice {
    position: static;
  }

  .pagina-topo__pessoas {
    justify-self: center;
    width: min(100%, 400px);
  }

  .pagina-topo--pessoas .pagina-topo__grelha > div:first-child {
    padding-bottom: 0;
  }

  .pagina-topo__guia {
    left: 0;
  }

  .pagina-topo__imagem {
    justify-self: start;
  }

  .pagina-topo__imagem .pagina-topo__guia {
    left: 0.75rem;
  }

  .pagina-topo__foto {
    justify-self: start;
    width: min(100% - 18px, 420px);
  }

  .temas__intro {
    position: static;
  }

  .temas--invertido .temas__intro {
    order: 0;
  }

  .rodape__interior {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .destaque__selo {
    left: 0.75rem;
    right: 0.75rem;
    bottom: -1.5rem;
  }

  .destaque__foto::before {
    inset: 12px -8px -12px 12px;
  }

  .rodape__interior {
    grid-template-columns: 1fr;
  }

  .acordeao__cabecalho {
    padding: 0.9rem 1rem;
  }

  .acordeao__corpo {
    padding: 0 1rem 1.25rem;
  }

  .subnav__titulo {
    display: none;
  }

  .subnav__interior {
    padding-inline: 0.75rem;
  }

  .simulador__valor input {
    width: 6.5rem;
  }

  /* Barra de progressão compacta: número e área */
  .cronologia__interior {
    padding: 0.75rem 0.5rem 0.65rem;
  }

  .cronologia__barra {
    top: calc(0.75rem + 17px);
    left: calc(0.5rem + (100% - 1rem) / (2 * var(--passos, 5)));
    right: calc(0.5rem + (100% - 1rem) / (2 * var(--passos, 5)));
  }

  .cronologia__numero {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
  }

  .cronologia__titulo {
    font-size: 0.68rem;
  }

  .cronologia__ano {
    display: none;
  }

  .passo-historia__selo {
    top: -14px;
    left: -10px;
    width: 68px;
    height: 68px;
    border-width: 4px;
    font-size: 0.95rem;
  }

  .passo-historia:nth-child(even) .passo-historia__selo {
    right: -10px;
  }

  .passo-historia__foto-extra {
    right: -4%;
  }

  .erros__grelha {
    grid-template-columns: 1fr;
  }

  .guia__fase strong {
    font-size: 0.8rem;
  }

  .guia__fase-titulo {
    margin-left: 0;
  }

  .guia-passo {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.75rem;
  }

  .guia-passo__numero {
    width: 40px;
    height: 40px;
  }

  .guia__linha {
    left: 18.5px;
  }

  .guia-passo__cartao {
    padding: 1rem 1.1rem;
  }

  /* Etapas e equipa em carrossel deslizável */
  .mudanca__grelha,
  .consultores__grelha {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    gap: 1rem;
    margin-inline: -1.25rem;
    padding: 0 1.25rem 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1.25rem;
    scrollbar-width: none;
  }

  .mudanca__grelha::-webkit-scrollbar,
  .consultores__grelha::-webkit-scrollbar {
    display: none;
  }

  .etapa,
  .consultor {
    scroll-snap-align: start;
  }

  .consultores__grelha {
    grid-auto-columns: 85%;
    margin-top: 2.5rem;
    padding-bottom: 1.5rem;
  }

  .mudanca__dica {
    display: block;
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: #9c7d36;
    text-align: right;
  }

  .pagina-topo__marca {
    width: min(100%, 200px);
    padding: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --altura-cabecalho: 76px;
  }

  .logotipo {
    height: 42px;
  }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}