/* ==========================================================================
   Alojoeste — Componentes e layout
   Ordem: layout · header · botões · cabeçalhos · hero · métricas · serviços ·
   preços · processo · testemunhos · sobre · equipa · FAQ · CTA · footer ·
   cookies · formulários · blog · páginas internas · animação
   ========================================================================== */

/* ==========================================================================
   1. Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--goteira);
}
.wrap--largo { max-width: var(--wrap-largo); }
.wrap--texto { max-width: var(--wrap-texto); }

.seccao { padding-block: var(--seccao); }
.seccao--g { padding-block: var(--seccao-g); }
.seccao--creme { background: var(--fundo-alt); }
.seccao--escura {
  background: var(--fundo-escuro);
  color: rgba(255, 255, 255, .78);
}
.seccao--escura h2,
.seccao--escura h3,
.seccao--escura h4 { color: var(--branco); }

.grelha { display: grid; gap: var(--e-6); }

/* ==========================================================================
   2. Header e navegação
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.header[data-scrolled] {
  border-bottom-color: var(--borda);
  box-shadow: var(--sombra-sm);
}

.header__interior {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  min-height: var(--altura-header);
}

.logo {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
}
.logo img { width: 168px; height: auto; }

.nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.5rem, 1.6vw, 1.6rem);
}
.nav a {
  padding: var(--e-2) var(--e-1);
  color: var(--texto-forte);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--acento); }

/* seta diagonal que assinala links para fora do site */
/* Selector de língua: PT | EN no fim do menu. A língua actual fica marcada e
   não é clicável; a outra é o link. */
.nav__linguas {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
}
.nav__lingua {
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .04em;
}
.nav__lingua--activa {
  color: var(--acento);
  cursor: default;
}
/* .borda era demasiado claro para se ver (1,35:1) e o separador deixava de
   separar. É decorativo, mas tem de cumprir a função. */
.nav__linguas-sep {
  color: rgba(43, 27, 19, .42);
  font-weight: 400;
}
/* o link da outra língua não leva o sublinhado animado dos itens do menu */
.nav__linguas a::after { display: none; }

@media (min-width: 68.0625rem) {
  .nav__linguas { margin-left: var(--e-2); padding-left: var(--e-4);
                  border-left: 1px solid var(--borda); }
}

/* No menu de telemóvel são alvos de toque: 44×44 é o mínimo para se acertar
   neles com o dedo sem carregar no que está ao lado. */
@media (max-width: 68rem) {
  .nav__linguas { gap: 0; padding: var(--e-2) 0; }
  .nav__lingua {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--t-md);
  }
}

.nav__externo {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 3px;
  vertical-align: -1px;
  color: var(--acento);
  opacity: .75;
}

/* --- Submenu "Alojamentos" ------------------------------------------- */

.nav__grupo { position: relative; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-1);
  color: var(--texto-forte);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  position: relative;
}
.nav__toggle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicao);
}
.nav__grupo:hover .nav__toggle::after,
.nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }

.nav__chevron {
  flex: none;
  width: 14px; height: 14px;
  color: var(--acento);
  transition: transform var(--transicao);
}
.nav__toggle[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); }

.nav__submenu {
  position: absolute;
  top: calc(100% + var(--e-3));
  left: 50%;
  z-index: 10;
  min-width: 13rem;
  margin: 0;
  padding: var(--e-3);
  list-style: none;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
.nav__submenu li { margin: 0; }
.nav__submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transicao), color var(--transicao);
}
.nav__submenu a::after { display: none; }
.nav__submenu a:hover,
.nav__submenu a:focus-visible {
  background: var(--tijolo-10);
  color: var(--acento);
}

/* Abre por rato ou por foco de teclado; o JS trata do clique e do Escape. */
@media (min-width: 68.0625rem) {
  .nav__grupo:hover .nav__submenu,
  .nav__grupo:focus-within .nav__submenu,
  .nav__submenu[data-aberto] {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
  /* ponte invisível entre o botão e o painel, para o rato não perder o hover */
  .nav__grupo::after {
    content: "";
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: var(--e-3);
  }
}

.header__accoes {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
}
.header__tel {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: var(--texto-forte);
  font-size: var(--t-sm);
  font-weight: 600;
  text-decoration: none;
}
.header__tel svg { width: 17px; height: 17px; color: var(--acento); }

/* Sobre fundo escuro — rodapé, CTA, secções com fotografia e agradecimento */
.footer .rede-movel,
.cta .rede-movel,
.seccao--foto .rede-movel { color: rgba(255, 255, 255, .88); }
/* ...menos dentro do cartão do formulário, que é branco apesar de a secção
   à volta ser escura. Sem isto ficava branco sobre branco. */
.seccao--foto .form-bloco__cartao .rede-movel { color: var(--texto-suave); }

/* Entre o ponto em que o menu completo aparece (68rem) e as ~75rem, o logótipo,
   os seis itens do menu — incluindo o selector de língua —, o telefone e o
   botão não cabem na mesma linha. O telefone é o que sai: está no rodapé e
   aparece a partir das 75rem. */
@media (max-width: 75rem) {
  .header__tel { display: none; }
}

.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid var(--borda);
  color: var(--texto-forte);
  transition: background var(--transicao);
}
.menu-btn:hover { background: var(--creme); }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn .icone-fechar { display: none; }
.menu-btn[aria-expanded="true"] .icone-menu   { display: none; }
.menu-btn[aria-expanded="true"] .icone-fechar { display: block; }

@media (max-width: 68rem) {
  .nav {
    position: fixed;
    inset: var(--altura-header) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: var(--e-4) var(--goteira) var(--e-8);
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    box-shadow: var(--sombra-lg);
    max-height: calc(100dvh - var(--altura-header));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
  }
  .nav[data-aberto] { transform: none; opacity: 1; visibility: visible; }
  .nav > a {
    padding: var(--e-4) 0;
    font-size: var(--t-md);
    border-bottom: 1px solid var(--borda);
  }
  .nav a::after { display: none; }
  .menu-btn { display: inline-flex; }
  .header__tel { display: none; }

  /* Submenu passa a acordeão dentro do menu */
  .nav__grupo { border-bottom: 1px solid var(--borda); }
  .nav__toggle {
    width: 100%;
    justify-content: space-between;
    padding: var(--e-4) 0;
    font-size: var(--t-md);
  }
  .nav__toggle::after { display: none; }
  .nav__submenu {
    position: static;
    min-width: 0;
    padding: 0 0 var(--e-3);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav__submenu[data-aberto] { display: block; }
  .nav__submenu a {
    padding: var(--e-3) var(--e-4);
    margin-left: var(--e-3);
    border-left: 2px solid var(--tijolo-20);
    border-radius: 0;
  }
}

@media (max-width: 30rem) {
  .logo img { width: 132px; }
}

/* ==========================================================================
   3. Botões
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  padding: .85rem 1.5rem;
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), transform var(--transicao),
              box-shadow var(--transicao);
}
.btn:active { transform: translateY(1px); }

.btn--primario {
  background: var(--acento);
  color: var(--branco);
  box-shadow: 0 6px 18px rgba(174, 82, 55, .26);
}
.btn--primario:hover {
  background: var(--acento-hover);
  color: var(--branco);
  box-shadow: 0 8px 24px rgba(174, 82, 55, .34);
}

.btn--contorno {
  border-color: var(--borda);
  color: var(--texto-forte);
  background: var(--branco);
}
.btn--contorno:hover {
  border-color: var(--acento);
  color: var(--acento);
}

.btn--claro {
  background: var(--branco);
  color: var(--cacau);
}
.btn--claro:hover { background: var(--creme); color: var(--cacau); }

.btn--fantasma {
  color: var(--branco);
  border-color: rgba(255, 255, 255, .38);
}
.btn--fantasma:hover {
  color: var(--cacau);
  background: var(--branco);
  border-color: var(--branco);
}

.btn--g { padding: 1.05rem 2rem; font-size: var(--t-base); }

/* pastilha circular com seta, dentro do botão */
.btn__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  margin-right: -.5rem;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .2);
  transition: transform var(--transicao);
}
.btn__seta svg { width: 14px; height: 14px; }
.btn:hover .btn__seta { transform: translateX(3px); }
.btn--contorno .btn__seta,
.btn--claro    .btn__seta { background: var(--tijolo-10); color: var(--acento); }

/* CTA do header: em ecrãs muito estreitos passa a botão-ícone, para o texto
   não encolher até se tornar ilegível. Definido aqui, depois de .btn, para
   ganhar a cascata. */
.header__cta-icone { display: none; flex: 0 0 auto; width: 20px; height: 20px; }

@media (max-width: 30rem) {
  .header__cta {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
  .header__cta-texto { display: none; }
  .header__cta-icone { display: block; }
}

/* link com seta */
.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--acento);
}
.link-seta svg { width: 15px; height: 15px; transition: transform var(--transicao); }
.link-seta:hover svg { transform: translateX(4px); }

/* ==========================================================================
   4. Cabeçalhos de secção
   ========================================================================== */

.sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
  color: var(--acento);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-sobrelinha);
  text-transform: uppercase;
}
.sobrelinha::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
  opacity: .55;
}
.seccao--escura .sobrelinha { color: var(--tijolo-claro); }

.cab-seccao { max-width: 46rem; margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.cab-seccao--centro { margin-inline: auto; text-align: center; }
.cab-seccao--centro .sobrelinha::before { display: none; }
.cab-seccao p {
  margin-top: var(--e-4);
  font-size: var(--t-md);
  color: var(--texto-suave);
}
.seccao--escura .cab-seccao p { color: rgba(255, 255, 255, .7); }

.cab-seccao--linha {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-8);
  max-width: none;
  flex-wrap: wrap;
}

/* ==========================================================================
   5. Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: min(88vh, 800px);
  padding-block: clamp(4rem, 8vw, 6rem) clamp(6rem, 10vw, 8rem);
  color: var(--branco);
  overflow: hidden;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(43, 27, 19, .58) 0%, rgba(43, 27, 19, .3) 38%, rgba(43, 27, 19, .82) 100%),
    linear-gradient(96deg, rgba(43, 27, 19, .72) 0%, rgba(43, 27, 19, .42) 46%, rgba(43, 27, 19, .06) 72%);
}

/* Duas colunas em desktop: texto à esquerda, vídeo à direita.
   Numa só coluna abaixo de 64rem — o vídeo passa para baixo do texto. */
/* A ordem no HTML é a do telemóvel — texto, vídeo, zonas e selos — para quem
   usa leitor de ecrã ouvir o mesmo que vê. Em desktop a grelha põe cada bloco
   no seu lugar: texto em cima à esquerda, zonas e selos por baixo, vídeo à
   direita a ocupar as duas linhas. */
.hero__grelha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  width: 100%;
  max-width: var(--wrap-largo);
}
.hero__conteudo { grid-column: 1; grid-row: 1; }
.hero__media    { grid-column: 2; grid-row: 1 / span 2; }
.hero__extra    { grid-column: 1; grid-row: 2; }

/* 72rem e não 64rem: entre as duas larguras a coluna do vídeo ficava mais
   estreita do que o vídeo empilhado, e ele encolhia à medida que a janela
   crescia. Só passa a duas colunas quando há espaço para as duas. */
@media (max-width: 72rem) {
  .hero__grelha {
    grid-template-columns: 1fr;
    gap: var(--e-8) 0;
  }
  .hero__conteudo,
  .hero__media,
  .hero__extra { grid-column: 1; grid-row: auto; }
}

.hero__conteudo { max-width: 40rem; }
.hero .sobrelinha { color: var(--tijolo-claro); }

/* --- Vídeo de apresentação ---
   O botão é uma "capa": mostra a imagem e só carrega o leitor do Wistia
   quando alguém carrega em play. Antes disso não há pedidos a terceiros. */

.hero__media { width: 100%; }

.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: rgba(43, 27, 19, .38);
  box-shadow: var(--sombra-lg);
  cursor: pointer;
  text-align: left;
}
.video__poster {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transicao-lenta);
}
/* Véu no topo, onde fica a etiqueta. Em baixo não — é aí que o próprio
   vídeo tem as legendas gravadas, e dois textos sobrepostos não se leem. */
.video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 27, 19, .62) 0%, rgba(43, 27, 19, .12) 30%, rgba(43, 27, 19, 0) 52%);
  pointer-events: none;
}
.video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px; height: 68px;
  border-radius: var(--r-full);
  background: var(--acento);
  color: var(--branco);
  box-shadow: 0 8px 26px rgba(43, 27, 19, .42);
  transition: transform var(--transicao), background-color var(--transicao);
}
.video__play svg { width: 28px; height: 28px; margin-left: 3px; fill: currentColor; }
.video__etiqueta {
  position: absolute;
  left: var(--e-5); right: var(--e-5); top: var(--e-4);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--branco);
}
.video__duracao {
  margin-left: auto;
  padding: .2em .6em;
  border-radius: var(--r-sm);
  background: rgba(43, 27, 19, .62);
  font-variant-numeric: tabular-nums;
}
.video:hover .video__poster,
.video:focus-visible .video__poster { transform: scale(1.03); }
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.07); background: var(--acento-hover); }
.video:focus-visible { outline: 3px solid var(--branco); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .video__poster, .video__play { transition: none; }
  .video:hover .video__poster, .video:focus-visible .video__poster { transform: none; }
  .video:hover .video__play { transform: translate(-50%, -50%); }
}

/* O leitor entra no lugar do botão depois do clique. Enquanto o script do
   Wistia não define o elemento, o poster segura a moldura — sem salto. */
.hero__media wistia-player {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sombra-lg);
}
.hero__media wistia-player:not(:defined) {
  background: center / cover no-repeat url("/assets/img/video-poster-1120.webp");
}

/* Empilhado, o vídeo não passa das 32rem — a 1000px de largura ficava enorme */
@media (max-width: 72rem) {
  .hero__media { max-width: 32rem; }
}

/* Menor que --t-4xl porque partilha a linha com o vídeo: a headline tem de
   caber em três linhas na coluna da esquerda. */
.hero h1 {
  font-size: clamp(2.5rem, 3.2vw + 1.1rem, 3.75rem);
  color: var(--branco);
  font-weight: 500;
  letter-spacing: -.015em;
}
@media (max-width: 72rem) {
  .hero h1 { font-size: var(--t-3xl); }
}
.hero h1 em {
  font-style: italic;
  color: var(--tijolo-claro);
}

.hero__texto {
  margin-top: var(--e-5);
  max-width: 34rem;
  font-size: var(--t-md);
  color: rgba(255, 255, 255, .86);
}

.hero__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  margin-top: var(--e-8);
}

.hero__zonas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(255, 255, 255, .2);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .74);
}
.hero__zonas strong {
  color: var(--branco);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--t-xs);
}
.hero__zonas ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  list-style: none;
  margin: 0; padding: 0;
}
.hero__zonas li { margin: 0; }

/* ==========================================================================
   6. Barra de métricas (provas sociais)
   ========================================================================== */

.metricas {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--e-16) * -1);
}
.metricas__cartao {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  overflow: hidden;
}
.metrica {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: clamp(1.5rem, 3vw, 2.25rem) var(--e-4);
  text-align: center;
  border-right: 1px solid var(--borda);
}
.metrica:last-child { border-right: 0; }
.metrica__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  background: var(--tijolo-10);
  color: var(--acento);
}
.metrica__icone svg { width: 21px; height: 21px; }
.metrica__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1;
  color: var(--texto-forte);
}
.metrica__nome {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-forte);
}
.metrica__detalhe {
  font-size: var(--t-xs);
  color: var(--texto-suave);
  letter-spacing: .02em;
}
.metrica a { text-decoration: none; color: inherit; }
.metrica a:hover .metrica__nome { color: var(--acento); }

@media (max-width: 56rem) {
  .metricas__cartao { grid-template-columns: repeat(2, 1fr); }
  .metrica:nth-child(2n) { border-right: 0; }
  .metrica:nth-child(-n+2) { border-bottom: 1px solid var(--borda); }
}
@media (max-width: 30rem) {
  .metricas { margin-top: calc(var(--e-10) * -1); }
  .metricas__cartao { grid-template-columns: 1fr; }
  .metrica { border-right: 0; border-bottom: 1px solid var(--borda); }
  .metrica:last-child { border-bottom: 0; }
}

/* ==========================================================================
   7. Serviços
   ========================================================================== */

/* Flex e não grid: são cinco cartões, e numa grelha a última fila ficava
   encostada à esquerda com um vazio à direita. Assim os dois últimos ficam
   centrados, com a mesma largura dos de cima. */
.servicos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-5);
}
.servicos > * { flex: 0 1 calc((100% - var(--e-5) * 2) / 3); }
@media (max-width: 62rem) {
  .servicos > * { flex-basis: calc((100% - var(--e-5)) / 2); }
}
@media (max-width: 40rem) {
  .servicos > * { flex-basis: 100%; }
}
.servico {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.servico:hover {
  transform: translateY(-4px);
  border-color: var(--tijolo-20);
  box-shadow: var(--sombra-md);
}
.servico__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--e-2);
  border-radius: var(--r-full);
  background: var(--tijolo-10);
  color: var(--acento);
  transition: background var(--transicao), color var(--transicao);
}
.servico__icone svg { width: 25px; height: 25px; }
.servico:hover .servico__icone { background: var(--acento); color: var(--branco); }
.servico h3 { font-size: var(--t-lg); }
.servico p { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.65; }

/* ==========================================================================
   8. Preços / pacotes
   ========================================================================== */

.precos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: var(--e-6);
  align-items: start;
}
.preco {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-sm);
}
.preco--destaque {
  background: var(--cacau);
  border-color: var(--cacau);
  color: rgba(255, 255, 255, .8);
  box-shadow: var(--sombra-lg);
}
.preco--destaque h3,
.preco--destaque .preco__valor { color: var(--branco); }
.preco--destaque .preco__lista li { color: rgba(255, 255, 255, .8); }
.preco--destaque .preco__lista svg { color: var(--tijolo-claro); }
.preco--destaque .preco__nota { color: rgba(255, 255, 255, .55); border-top-color: var(--linha-escura); }

.preco__etiqueta {
  align-self: flex-start;
  margin-bottom: var(--e-4);
  padding: .3rem .75rem;
  border-radius: var(--r-full);
  background: var(--tijolo-10);
  /* tom mais escuro: texto pequeno sobre fundo tinto precisa de mais contraste */
  color: var(--tijolo-escuro);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.preco--destaque .preco__etiqueta { background: var(--acento); color: var(--branco); }

.preco h3 { font-size: var(--t-xl); }
.preco__valor {
  margin-top: var(--e-3);
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--texto-forte);
  text-wrap: balance;
}
.preco__valor span {
  display: block;
  margin-top: var(--e-2);
  font-family: var(--fonte-corpo);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--texto-suave);
}
.preco--destaque .preco__valor span { color: rgba(255, 255, 255, .6); }

.preco__intro {
  margin-top: var(--e-4);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.65;
}
.preco--destaque .preco__intro { color: rgba(255, 255, 255, .72); }

.preco__lista {
  flex: 1 1 auto;
  list-style: none;
  margin: var(--e-6) 0 0;
  padding: 0;
}
.preco__lista li {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.preco__lista li:first-child { margin-top: 0; }
.preco__lista svg {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: .28em;
  color: var(--acento);
}
.preco__nota {
  margin-top: var(--e-6);
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
  font-size: var(--t-xs);
  line-height: 1.55;
  color: var(--texto-suave);
}
.preco .btn { margin-top: var(--e-6); justify-content: center; }

/* ==========================================================================
   9. Como funciona (processo)
   ========================================================================== */

.processo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--e-8) var(--e-6);
  counter-reset: passo;
}
.passo { position: relative; padding-top: calc(48px + var(--e-6)); }
.passo__num {
  position: absolute;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background: var(--acento);
  color: var(--branco);
  font-family: var(--fonte-titulo);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(174, 82, 55, .3);
}
/* linha tracejada a ligar os passos */
.passo::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 60px;
  right: calc(var(--e-6) * -1 + 12px);
  border-top: 1.5px dashed var(--tijolo-20);
}
.passo:last-child::after { display: none; }
.passo h3 { margin-bottom: var(--e-3); font-size: var(--t-lg); }
.passo p { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.65; }

@media (max-width: 48rem) {
  .passo::after { display: none; }
}

/* ==========================================================================
   10. Testemunhos
   ========================================================================== */

.estrelas { display: inline-flex; gap: 2px; color: var(--acento); }
.estrelas svg { width: 15px; height: 15px; }

/* --- Selos das plataformas de avaliação --- */

.selos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-5);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.selo {
  display: flex;
  align-items: center;
  gap: var(--e-5);
  padding: var(--e-5) var(--e-6);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transicao), box-shadow var(--transicao),
              border-color var(--transicao);
}
.selo:hover {
  transform: translateY(-3px);
  border-color: var(--tijolo-20);
  box-shadow: var(--sombra-md);
  color: inherit;
}

/* Bloco da marca: símbolo + nome da plataforma */
.selo__logo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex: 0 0 auto;
  padding-right: var(--e-5);
  border-right: 1px solid var(--borda);
}
.selo__marca { width: 30px; height: 30px; flex: 0 0 auto; }
.selo__logo img { max-height: 30px; width: auto; }
.selo__fonte {
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--texto-forte);
  white-space: nowrap;
}

.selo__corpo { display: flex; flex-direction: column; gap: 4px; }
.selo__estrelas svg { width: 15px; height: 15px; }
.selo__nota { font-size: var(--t-xs); color: var(--texto-suave); }
.selo__nota strong {
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  color: var(--texto-forte);
  margin-right: 2px;
}
.selo__seta {
  flex: 0 0 auto;
  width: 15px; height: 15px;
  margin-left: var(--e-2);
  color: var(--acento);
  transition: transform var(--transicao);
}
.selo:hover .selo__seta { transform: translate(2px, -2px); }

@media (max-width: 34rem) {
  .selos { flex-direction: column; }
  .selo { width: 100%; }
}

/* Em ecrãs estreitos o selo empilha: a marca em cima, a nota por baixo —
   senão o nome da plataforma (que não quebra) empurra a caixa para fora. */
@media (max-width: 26rem) {
  .selo {
    flex-wrap: wrap;
    gap: var(--e-3);
    padding: var(--e-4) var(--e-5);
  }
  .selo__logo {
    width: 100%;
    padding-right: 0;
    padding-bottom: var(--e-3);
    border-right: 0;
    border-bottom: 1px solid var(--borda);
  }
  .selo__seta { margin-left: auto; }
}

/* --- Cartões de avaliação --- */

.reviews-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--e-5);
  align-items: start;
}
.review {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  height: 100%;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.review:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.review__texto {
  /* Não pode crescer: um -webkit-box esticado pelo flex deixa passar linhas
     para lá do corte das três. Quem empurra o autor para baixo é o
     margin-top:auto em .review__autor. */
  flex: 0 1 auto;
  font-family: var(--fonte-corpo);
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.7;
  color: var(--texto);
  /* duas linhas por omissão; o resto abre no botão "Ler tudo" */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.review__texto[data-aberto] {
  display: block;
  overflow: visible;
}
.review__texto::before { content: "“"; }
.review__texto::after  { content: "”"; }

.review__mais {
  align-self: flex-start;
  margin-top: calc(var(--e-4) * -1 + var(--e-1));
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento);
  font-family: var(--fonte-corpo);
  font-size: var(--t-xs);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.review__mais:hover { color: var(--acento-hover); }

.review__papel {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}
.review__autor {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-4);
  border-top: 1px solid var(--borda);
}
.review__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  background: var(--tijolo-10);
  color: var(--acento);
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  font-weight: 600;
}
.review__autor strong {
  display: block;
  font-size: var(--t-sm);
  color: var(--texto-forte);
}
.review__fonte {
  display: block;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* --- Carrossel de avaliações --- */

.carrossel { position: relative; }

.carrossel__pista {
  display: flex;
  /* Cada cartão com a sua altura: com stretch, abrir uma avaliação esticava
     as outras e deixava-lhes um vazio enorme entre o texto e o nome. */
  align-items: flex-start;
  gap: var(--e-5);
  margin: 0;
  padding: 0 0 var(--e-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
}
.carrossel__pista::-webkit-scrollbar { display: none; }
.carrossel__pista:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 6px;
  border-radius: var(--r-md);
}

.carrossel__item {
  flex: 0 0 auto;
  width: calc((100% - var(--e-5) * 2) / 3);
  margin: 0;
  scroll-snap-align: start;
}
@media (max-width: 64rem) {
  .carrossel__item { width: calc((100% - var(--e-5)) / 2); }
}
@media (max-width: 44rem) {
  .carrossel__item { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .carrossel__pista { scroll-behavior: auto; }
}

/* --- Controlos --- */

.carrossel__controlos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-5);
  margin-top: var(--e-8);
}
.carrossel__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border: 1px solid var(--borda);
  border-radius: var(--r-full);
  background: var(--branco);
  color: var(--texto-forte);
  transition: background var(--transicao), color var(--transicao),
              border-color var(--transicao), opacity var(--transicao);
}
.carrossel__btn:hover:not(:disabled) {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--branco);
}
.carrossel__btn:disabled { opacity: .35; cursor: default; }
.carrossel__btn svg { width: 20px; height: 20px; }
[data-carrossel-ant] svg { transform: rotate(90deg); }
[data-carrossel-seg] svg { transform: rotate(-90deg); }

.carrossel__pontos { display: flex; align-items: center; gap: var(--e-2); }
.carrossel__ponto {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--tijolo-20);
  transition: width var(--transicao), background var(--transicao);
}
.carrossel__ponto[aria-selected="true"] {
  width: 26px;
  background: var(--acento);
}
.carrossel__ponto:focus-visible { outline-offset: 4px; }

/* ==========================================================================
   11. Sobre nós
   ========================================================================== */

.sobre {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (max-width: 60rem) { .sobre { grid-template-columns: 1fr; } }

/* Mosaico de 4 imagens: a coluna direita desce um pouco para criar ritmo. */
.sobre__imagens {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-4);
  align-items: start;
}
.sobre__img {
  width: 100%;
  border-radius: var(--r-lg);
  object-fit: cover;
  aspect-ratio: 4/3;
}
.sobre__img--alta { aspect-ratio: 4/5; }
.sobre__imagens > .sobre__img:nth-child(2) { margin-top: var(--e-10); }
.sobre__imagens > .sobre__img:nth-child(4) { margin-top: calc(var(--e-10) * -1 + var(--e-4)); }

@media (max-width: 30rem) {
  .sobre__imagens > .sobre__img:nth-child(2),
  .sobre__imagens > .sobre__img:nth-child(4) { margin-top: 0; }
  .sobre__img, .sobre__img--alta { aspect-ratio: 1; }
}
.sobre__selo {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: clamp(6.5rem, 13vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--acento);
  color: var(--branco);
  text-align: center;
  box-shadow: 0 10px 30px rgba(43, 27, 19, .28);
}
.sobre__selo strong {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--branco);
}
.sobre__selo span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.3;
  padding-inline: var(--e-2);
}

.valores { list-style: none; margin: var(--e-8) 0 0; padding: 0; }
.valores li {
  display: flex;
  gap: var(--e-4);
  margin-top: var(--e-6);
}
.valores li:first-child { margin-top: 0; }
.valores__icone {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--tijolo-10);
  color: var(--acento);
}
.valores__icone svg { width: 20px; height: 20px; }
.valores :is(h2, h3) { font-size: var(--t-md); font-family: var(--fonte-corpo); font-weight: 600; }
.valores p { margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.6; }

/* ==========================================================================
   12. Equipa
   ========================================================================== */

.equipa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--e-6);
}
.membro {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.membro:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.membro__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/5;
  background: var(--creme-fundo);
  color: var(--tijolo-20);
}
.membro__foto span {
  font-family: var(--fonte-titulo);
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--tijolo);
  opacity: .34;
}
.membro__corpo { padding: var(--e-5) var(--e-4) var(--e-6); }
.membro h3 { font-size: var(--t-lg); }
.membro p {
  margin-top: var(--e-1);
  font-size: var(--t-sm);
  color: var(--texto-suave);
}

/* ==========================================================================
   13. FAQ
   ========================================================================== */

.faq { max-width: 52rem; margin-inline: auto; }
.faq__item {
  margin-top: var(--e-3);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.faq__item[open] {
  border-color: var(--tijolo-20);
  box-shadow: var(--sombra-md);
}
.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  cursor: pointer;
  list-style: none;
  font-family: var(--fonte-titulo);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--texto-forte);
  transition: background var(--transicao);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { background: var(--creme); }
.faq__num {
  flex: 0 0 auto;
  font-family: var(--fonte-titulo);
  font-size: var(--t-md);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.faq__seta {
  flex: 0 0 auto;
  margin-left: auto;
  width: 20px; height: 20px;
  color: var(--acento);
  transition: transform var(--transicao);
}
.faq__item[open] .faq__seta { transform: rotate(180deg); }
.faq__resposta {
  padding: 0 var(--e-6) var(--e-6) calc(var(--e-6) + 2rem);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.7;
}
.faq__resposta a { font-weight: 600; }

@media (max-width: 36rem) {
  .faq__item summary { padding: var(--e-4); font-size: var(--t-md); gap: var(--e-3); }
  .faq__resposta { padding: 0 var(--e-4) var(--e-5); }
}

/* ==========================================================================
   14. CTA final
   ========================================================================== */

.cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  color: var(--branco);
  text-align: center;
  overflow: hidden;
}
.cta__fundo { position: absolute; inset: 0; z-index: -2; }
.cta__fundo img { width: 100%; height: 100%; object-fit: cover; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(43, 27, 19, .82), rgba(43, 27, 19, .9));
}
.cta h2 { color: var(--branco); max-width: 22ch; margin-inline: auto; }
.cta p {
  max-width: 44ch;
  margin: var(--e-5) auto 0;
  color: rgba(255, 255, 255, .82);
  font-size: var(--t-md);
}
.cta__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  justify-content: center;
  margin-top: var(--e-8);
}
.cta__aviso { margin-top: var(--e-3); color: var(--branco); }
.cta .sobrelinha { color: var(--tijolo-claro); }
.cta .sobrelinha::before { display: none; }

/* ==========================================================================
   15. Footer
   ========================================================================== */

.footer {
  position: relative;
  background: var(--fundo-escuro);
  color: rgba(255, 255, 255, .7);
  overflow: hidden;
}
.footer__marca-agua {
  position: absolute;
  left: 50%;
  bottom: -.28em;
  transform: translateX(-50%);
  font-family: var(--fonte-titulo);
  font-size: clamp(6rem, 21vw, 17rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .035);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.footer__interior {
  position: relative;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3.5rem, 6vw, 5rem) var(--e-12);
}
@media (max-width: 62rem) { .footer__interior { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .footer__interior { grid-template-columns: 1fr; } }

.footer__logo img { width: 190px; height: auto; }
.footer__sobre {
  margin-top: var(--e-5);
  font-size: var(--t-sm);
  line-height: 1.7;
  max-width: 32ch;
}
.footer h3 {
  margin-bottom: var(--e-5);
  font-size: var(--t-md);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  color: var(--branco);
  letter-spacing: .02em;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-top: var(--e-3); }
.footer li:first-child { margin-top: 0; }
.footer a {
  color: rgba(255, 255, 255, .7);
  font-size: var(--t-sm);
  text-decoration: none;
  transition: color var(--transicao);
}
.footer a:hover { color: var(--branco); }

.footer__contacto {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
}
.footer__contacto svg {
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin-top: .3em;
  color: var(--tijolo-claro);
}
.footer__contacto div { font-size: var(--t-sm); line-height: 1.55; }
.footer__contacto strong {
  display: block;
  color: var(--branco);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.footer__social {
  display: flex;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--linha-escura);
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, .78);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.footer__social a:hover {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--branco);
}
.footer__social svg { width: 17px; height: 17px; }

/* --- Selos de distinção (hero e rodapé) ---
   O selo Scoring já vem com fundo próprio e transparência; o do Airbnb vem
   sobre branco, por isso é o único que precisa de placa. */
/* Os dois selos ficam com a mesma altura total, mas só o do Airbnb leva placa
   branca: vem com fundo branco cravado na imagem e precisa dela para não ficar
   um rectângulo solto sobre o escuro. O do Scoring já é um círculo recortado. */
.selos-marca {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  margin: var(--e-10) 0 0;
  padding: 0;
  list-style: none;
}
.selos-marca li {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.375rem;             /* 70px — a altura da placa do Airbnb */
}
.selos-marca img { display: block; width: auto; height: 70px; }

.selos-marca__placa {
  min-width: 7.75rem;
  padding: var(--e-3) var(--e-4);
  background: var(--branco);
  border-radius: var(--r-md);
}
.selos-marca__placa img { height: 46px; }

/* .footer ul (0,1,1) ganha a .selos-marca--rodape (0,1,0) e zerava a margem;
   daí o selector com o .footer à frente. O mesmo para os <li>. */
.footer .selos-marca--rodape { margin-top: var(--e-8); }
.footer .selos-marca li { margin-top: 0; }

@media (max-width: 26rem) {
  .selos-marca li { min-height: 3.5rem; }
  .selos-marca img { height: 56px; }
  .selos-marca__placa { min-width: 6.75rem; padding: var(--e-2) var(--e-3); }
  .selos-marca__placa img { height: 38px; }
}

.footer__parceiros {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-4) clamp(1.5rem, 4vw, 3rem);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linha-escura);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .55);
}
.footer__parceiros span:first-child {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--ls-sobrelinha);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.footer__parceiros strong {
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  letter-spacing: .02em;
}

.footer__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-6);
  border-top: 1px solid var(--linha-escura);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, .5);
}
.footer__base nav { display: flex; flex-wrap: wrap; gap: var(--e-5); }
.footer__base a { font-size: var(--t-xs); }

/* ==========================================================================
   16. Banner de cookies
   ========================================================================== */

.cookies {
  position: fixed;
  left: auto;
  right: var(--e-5);
  bottom: var(--e-5);
  z-index: 150;
  width: min(26rem, calc(100vw - var(--e-8)));
  padding: var(--e-6);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-lg);
  transform: translateY(140%);
  transition: transform var(--transicao-lenta);
}
.cookies[data-visivel] { transform: none; }
.cookies h2 {
  font-size: var(--t-lg);
  margin-bottom: var(--e-2);
}
.cookies p { font-size: var(--t-sm); color: var(--texto-suave); line-height: 1.6; }
.cookies__accoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
.cookies__accoes .btn { flex: 1 1 9rem; justify-content: center; }

@media (max-width: 34rem) {
  .cookies {
    left: var(--e-3);
    right: var(--e-3);
    bottom: var(--e-3);
    width: auto;
    padding: var(--e-5);
  }
}

/* ==========================================================================
   17. Formulários
   ========================================================================== */

.form { display: grid; gap: var(--e-5); }
.form__linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-5);
}
@media (max-width: 40rem) { .form__linha { grid-template-columns: 1fr; } }

.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--texto-forte);
}
.campo label .obrigatorio { color: var(--acento); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  color: var(--texto-forte);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo textarea { min-height: 8rem; resize: vertical; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C35E40' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-right: 2.75rem;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: var(--sombra-foco);
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-suave); opacity: .7; }

.campo[data-erro] input,
.campo[data-erro] select,
.campo[data-erro] textarea { border-color: #B3261E; }
.campo__erro {
  display: none;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: #B3261E;
  font-weight: 500;
}
.campo[data-erro] .campo__erro { display: flex; }

.consentimento {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--texto-suave);
}
.consentimento input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: .15em;
  accent-color: var(--acento);
  cursor: pointer;
}
.consentimento a { font-weight: 600; }

/* honeypot anti-spam — fora do ecrã e fora da ordem de tabulação */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form__estado {
  display: none;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: 1.6;
}
.form__estado[data-tipo="ok"] {
  display: flex;
  background: #EDF6EE;
  border: 1px solid #BEDCC2;
  color: #1E4620;
}
.form__estado[data-tipo="erro"] {
  display: flex;
  background: #FCEDEC;
  border: 1px solid #F0C4C1;
  color: #7A1F19;
}
.form__estado svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: .2em; }

.btn[aria-busy="true"] { opacity: .65; pointer-events: none; }

/* ==========================================================================
   18. Blog
   ========================================================================== */

.artigos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--e-8) var(--e-6);
}
.artigo-cartao {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--transicao), box-shadow var(--transicao);
}
.artigo-cartao:hover { transform: translateY(-4px); box-shadow: var(--sombra-md); }
.artigo-cartao__img {
  aspect-ratio: 3/2;
  width: 100%;
  object-fit: cover;
}
.artigo-cartao__corpo {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--e-6);
}
.artigo-cartao__meta {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  font-weight: 600;
}
.artigo-cartao__meta svg { width: 14px; height: 14px; color: var(--acento); }
.artigo-cartao :is(h2, h3) { margin-top: var(--e-3); font-size: var(--t-lg); }
.artigo-cartao :is(h2, h3) a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size var(--transicao), color var(--transicao);
}
.artigo-cartao:hover h3 a { color: var(--acento); background-size: 100% 1.5px; }
.artigo-cartao p {
  flex: 1 1 auto;
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.65;
}
.artigo-cartao .link-seta { margin-top: var(--e-5); align-self: flex-start; }

/* --- Artigo --- */

.artigo { padding-block: var(--seccao); }
.artigo__cabecalho {
  max-width: var(--wrap-texto);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.artigo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-5);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texto-suave);
}
.artigo__meta span { display: inline-flex; align-items: center; gap: var(--e-2); }
.artigo__meta svg { width: 14px; height: 14px; color: var(--acento); }

.artigo__capa {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--r-xl);
}

.prosa { max-width: var(--wrap-texto); margin-inline: auto; }
.prosa > * + * { margin-top: var(--e-5); }
.prosa h2 {
  margin-top: var(--e-12);
  font-size: var(--t-xl);
}
.prosa h3 {
  margin-top: var(--e-10);
  font-size: var(--t-lg);
}
.prosa p { font-size: var(--t-md); line-height: 1.75; }
.prosa ul, .prosa ol { font-size: var(--t-md); line-height: 1.75; }
.prosa li + li { margin-top: var(--e-3); }
.prosa strong { color: var(--texto-forte); }
.prosa a { font-weight: 600; }
.prosa figure { margin: var(--e-10) 0; }
.prosa figure img { border-radius: var(--r-lg); width: 100%; }
.prosa figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  text-align: center;
}

.artigo__rodape {
  max-width: var(--wrap-texto);
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
  padding-top: var(--e-8);
  border-top: 1px solid var(--borda);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
}

/* ==========================================================================
   19. Cabeçalho de páginas internas
   ========================================================================== */

.pagina-topo {
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
  background: var(--fundo-alt);
  border-bottom: 1px solid var(--borda);
  text-align: center;
}
.pagina-topo h1 { max-width: 22ch; margin-inline: auto; }
.pagina-topo p {
  max-width: 52ch;
  margin: var(--e-5) auto 0;
  font-size: var(--t-md);
  color: var(--texto-suave);
}

/* Secção que abre a página, logo a seguir ao header */
.seccao--topo { padding-top: clamp(2.5rem, 5vw, 4rem); }
.seccao--topo h1 { font-size: var(--t-2xl); }

/* --- Secção com fotografia de fundo ---
   Mesma linguagem do hero: fotografia, escurecimento por cima, texto branco.
   Aqui o texto ocupa toda a altura da imagem, e não só a faixa central do
   hero. Em vez de escurecer até a fotografia desaparecer, ela vem desfocada
   (o desfoque está gravado no ficheiro, não em CSS) — assim continua a ver-se
   e o texto lê-se por cima. */
.seccao--foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--branco);
}
.seccao__fundo {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.seccao__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.seccao--foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(43, 27, 19, .72) 0%, rgba(43, 27, 19, .58) 46%, rgba(43, 27, 19, .75) 100%);
}
.seccao--foto h1,
.seccao--foto h2,
.seccao--foto h3 { color: var(--branco); }
/* base.css dá ao strong a cor escura do texto — aqui o fundo é escuro */
.seccao--foto strong,
.seccao--foto b { color: var(--branco); }
.seccao--foto .sobrelinha { color: var(--tijolo-palido); }
.seccao--foto .sobrelinha::before { background: var(--tijolo-palido); }
/* Texto quase opaco: o branco translúcido é frágil por cima de uma fotografia,
   porque o contraste passa a depender do que estiver atrás naquele ponto. */
.seccao__entrada {
  margin-top: var(--e-5);
  font-size: var(--t-md);
  color: rgba(255, 255, 255, .93);
}
.seccao--foto .valores p { color: rgba(255, 255, 255, .90); }
.seccao--foto .valores p a { color: var(--branco); text-decoration-color: rgba(255, 255, 255, .5); }
.seccao--foto .valores p a:hover { text-decoration-color: var(--branco); }
.seccao--foto .valores__icone {
  background: rgba(255, 255, 255, .14);
  color: var(--branco);
}
/* o cartão do formulário mantém-se claro e legível por cima da fotografia */
.seccao--foto .form-bloco__cartao { box-shadow: 0 24px 60px rgba(43, 27, 19, .38); }

.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  margin-bottom: var(--e-5);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--texto-suave);
  list-style: none;
  padding: 0;
}
.migalhas li { margin: 0; display: inline-flex; align-items: center; gap: var(--e-2); }
.migalhas li + li::before { content: "/"; color: var(--tijolo-20); }
.migalhas a { text-decoration: none; }

/* --- Blocos de contacto --- */

.contactos-grelha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--e-5);
}
.contacto-cartao {
  padding: var(--e-6);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-lg);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.contacto-cartao:hover { border-color: var(--tijolo-20); box-shadow: var(--sombra-md); }
.contacto-cartao__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  margin-bottom: var(--e-4);
  border-radius: var(--r-md);
  background: var(--tijolo-10);
  color: var(--acento);
}
.contacto-cartao__icone svg { width: 22px; height: 22px; }
.contacto-cartao h3 { font-size: var(--t-md); font-family: var(--fonte-corpo); font-weight: 600; }
.contacto-cartao ul { list-style: none; margin: var(--e-3) 0 0; padding: 0; }
.contacto-cartao li { margin-top: var(--e-2); font-size: var(--t-sm); }
.contacto-cartao a { text-decoration: none; font-weight: 500; color: var(--texto); }
.contacto-cartao a:hover { color: var(--acento); }
.contacto-cartao__nota {
  margin-top: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.form-bloco {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 58rem) { .form-bloco { grid-template-columns: 1fr; } }
.form-bloco__cartao {
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-md);
}

/* ==========================================================================
   20. Página de agradecimento
   ========================================================================== */

.obrigado {
  max-width: 44rem;
  margin-inline: auto;
  text-align: center;
}
/* flex e não inline-flex: senão a sobrelinha sobe para a mesma linha do visto */
.obrigado__visto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto var(--e-6);
  border-radius: var(--r-full);
  background: var(--acento);
  color: var(--branco);
  box-shadow: 0 10px 30px rgba(43, 27, 19, .42);
}
.obrigado__visto svg { width: 34px; height: 34px; }
/* a sobrelinha é inline-flex; para centrar precisa de uma linha só dela */
.obrigado .sobrelinha { display: flex; justify-content: center; }
.obrigado__texto { margin-inline: auto; max-width: 36rem; }

/* os três passos ficam alinhados à esquerda: é uma lista para ler, não um título */
.obrigado__passos { text-align: left; max-width: 34rem; margin-inline: auto; }

.obrigado__accoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-8);
}
.obrigado__accoes .btn svg { width: 19px; height: 19px; }
.obrigado__aviso { margin-top: var(--e-3); color: var(--branco); }
.obrigado__nota {
  margin-top: var(--e-8);
  font-size: var(--t-sm);
  color: rgba(255, 255, 255, .88);
}
.obrigado__nota a { color: var(--branco); }

/* ==========================================================================
   21. Animação de entrada
   ========================================================================== */

.revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--transicao-lenta), transform var(--transicao-lenta);
}
.revelar[data-visivel] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .revelar { opacity: 1; transform: none; }
}

/* Sem JS: o conteúdo tem de aparecer na mesma */
.sem-js .revelar { opacity: 1; transform: none; }

/* Aviso de tradução no topo da política de privacidade inglesa: a versão
   portuguesa é a que tem valor legal, e isso tem de ser dito. */
.aviso-traducao {
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-8);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--tijolo-10);
  font-size: var(--t-sm);
}