/* ============================================================
   COMPASSO · ACRESCENTOS AO ESTILO ORIGINAL (style.css)
   - barra de cima só com o logótipo (na página inicial entra depois do topo)
   - o logótipo numa placa branca no fim do vídeo de abertura
   - o topo da página inicial: a caminhada até à sala, pelo scroll
   - a linha laranja que acompanha a página
   - o formulário curto no fim da página inicial
   - ajuste discreto de contraste (texto grafite nos botões laranja,
     laranja mais escuro no texto pequeno sobre fundo claro)
   Letras, tamanhos e cores são os do site original.
   ============================================================ */

:root {
  --orange-texto: #AD5400;   /* laranja do texto pequeno sobre claro: 5:1 */
  --text-light: #707070;     /* era #777777: mesma cor, contraste 4,9:1 */
}
html { overflow-x: hidden; overflow-x: clip; }
body { overflow-x: hidden; overflow-x: clip; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- contraste ---------- */
.btn--primary, .btn-submit, .cookie-banner .btn-cookie-accept { color: var(--graphite-dark); }
.btn--primary:hover, .btn-submit:hover, .cookie-banner .btn-cookie-accept:hover { color: var(--graphite-dark); }
.section-label, .lideranca-role, .btn--ghost, .legal-content a, .info-item a { color: var(--orange-texto); }
.btn--ghost { border-bottom-color: var(--orange-texto); }
.section-label::before { background: var(--orange-texto); }
.equipa .section-label, .cta-final .section-label, .equipa .consultor-role { color: var(--orange); }
.equipa .section-label::before, .cta-final .section-label::before { background: var(--orange); }

/* ---------- barra de cima: só o logótipo, ao centro, sempre presente ---------- */
:root { --barra-h: 68px; }
html { scroll-padding-top: var(--barra-h); }   /* as âncoras não ficam escondidas por baixo da barra */
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.62);   /* vidro fosco: deixa ver a página por trás, desfocada */
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 24px rgba(0,0,0,.05);
}
.barra__dentro {
  max-width: 1360px; height: var(--barra-h); margin: 0 auto; padding: 0 40px;
  display: flex; align-items: center; justify-content: center;
}
.barra__logo { display: inline-flex; border-radius: 6px; }
.barra__logo img { height: 44px; width: auto; display: block; }
/* página inicial: escondida durante o vídeo; entra quando o logótipo do topo sai do ecrã */
.barra--depois-do-topo {
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility 0s linear .45s;
}
.barra--depois-do-topo.visivel { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
@media (max-width: 768px) {
  :root { --barra-h: 60px; }
  .barra__dentro { padding: 0 20px; }
  .barra__logo img { height: 38px; }
}

/* ---------- páginas interiores: o topo começa abaixo da barra ---------- */
.page-hero { padding: calc(var(--barra-h) + 96px) 0 96px; }
@media (max-width: 768px) { .page-hero { padding: calc(var(--barra-h) + 64px) 0 64px; } }

/* ============================================================
   O TOPO: a caminhada da rua até à sala, comandada pelo scroll
   ============================================================ */
.aprox { position: relative; height: 400vh; height: 400svh; background: #2E2E2E; }
.aprox__palco {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}
.aprox__tela, .aprox__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.aprox__poster { background: #2E2E2E center / cover no-repeat; transition: opacity .5s ease; }
.aprox__palco.pronto .aprox__poster { opacity: 0; }

/* escurecimento à esquerda, onde vive o texto (como no topo original) */
.aprox__veu {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(28,28,28,.66) 0%, rgba(28,28,28,.5) 30%, rgba(28,28,28,.16) 52%, rgba(28,28,28,0) 68%);
}
.faixa {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  padding: 0 40px 0 max(40px, calc((100% - 1360px) / 2 + 40px));
  opacity: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 4px 22px rgba(0,0,0,.45);
  will-change: opacity;
}
.faixa.morta { pointer-events: none; }
.faixa__caixa { position: relative; max-width: 640px; }
/* sombra suave só atrás das palavras, que acompanha a faixa (madeira e pedra clara por trás) */
.faixa__caixa::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: -22%; right: -32%; top: -50%; bottom: -50%;
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(20,20,20,.92) 0%, rgba(20,20,20,.78) 45%, rgba(20,20,20,.36) 78%, rgba(20,20,20,0) 100%);
  opacity: calc(.75 + .25 * var(--k, 1));
}
.faixa .hero-eyebrow { margin-bottom: 26px; }
.faixa h1, .faixa .titulo-faixa {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 5vw, 3.8rem); font-weight: 600; line-height: 1.2;
  color: var(--white); margin: 0;
}
.faixa .titulo-faixa em { font-style: italic; color: var(--orange); }
.faixa .hero-sub { margin-bottom: 40px; }
.faixa .btn { text-shadow: none; }

/* entradas: só transform e opacity, comandadas pelo scroll (--k de 0 a 1) */
.faixa .sobe { opacity: clamp(0, var(--k, 0) * 1.6, 1); transform: translate3d(0, calc((1 - clamp(0, var(--k, 0) * 1.6, 1)) * 26px), 0); }
.faixa .sobe-2 { --k2: clamp(0, (var(--k, 0) - .25) * 2, 1); opacity: var(--k2); transform: translate3d(0, calc((1 - var(--k2)) * 22px), 0); }
.faixa .sobe-3 { --k3: clamp(0, (var(--k, 0) - .5) * 2.2, 1); opacity: var(--k3); transform: translate3d(0, calc((1 - var(--k3)) * 18px), 0); }

.aprox__pista {
  position: absolute; bottom: 42px; left: max(40px, calc((100% - 1360px) / 2 + 40px));
  display: flex; align-items: center; gap: 14px;
  font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.7); transition: opacity .4s ease;
}
.aprox__pista span { position: relative; width: 46px; height: 1px; background: rgba(255,255,255,.3); overflow: hidden; }
.aprox__pista span::after { content: ''; position: absolute; inset: 0; background: var(--orange); animation: scrollDesliza 2.2s ease-in-out infinite; }
.aprox__pista.fora { opacity: 0; }
.aprox__carga { position: absolute; right: 28px; bottom: 28px; width: 30px; height: 30px; color: var(--orange); transition: opacity .4s ease; }
.aprox__carga.feito { opacity: 0; }
@keyframes scrollDesliza { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* telemóvel e ecrãs em pé: texto em baixo, escurecimento de baixo para cima (como no original) */
@media (max-aspect-ratio: 1/1) {
  .aprox__veu { background: linear-gradient(to top, rgba(28,28,28,.86) 0%, rgba(28,28,28,.66) 32%, rgba(28,28,28,.18) 52%, rgba(28,28,28,0) 64%); }
  .faixa { top: auto; bottom: 0; transform: none; padding: 0 20px max(40px, 7svh); }
  .faixa h1, .faixa .titulo-faixa { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .faixa .hero-sub { font-size: .96rem; margin-bottom: 26px; }
  .faixa .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .faixa .hero-actions .btn { justify-content: center; }
  .aprox__pista { display: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .faixa h1, .faixa .titulo-faixa { font-size: clamp(1.6rem, 7vh, 2.4rem); }
  .faixa .hero-eyebrow { margin-bottom: 12px; }
  .faixa .hero-sub { font-size: .9rem; margin-bottom: 16px; line-height: 1.5; }
  .aprox__pista, .aprox__carga { display: none; }
}

/* ============================================================
   PRÓXIMO PASSO: o texto original e o formulário curto
   ============================================================ */
.cta-final .cta-form {
  max-width: 520px; margin: 0 auto; text-align: left;
  background: var(--white); border-radius: var(--radius-lg);
  padding: 36px 36px 30px; box-shadow: var(--shadow-lg);
}
.cta-final .cta-form h3 { font-size: 1.4rem; margin-bottom: 24px; }
.cta-final .cta-form p { color: var(--text-light); margin: 0; max-width: none; font-size: .85rem; }
.cta-final .cta-equipa { margin-top: 28px; }
.form-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-nota { margin-top: 14px !important; font-size: .8rem !important; color: var(--text-light) !important; }
.form-nota a { color: var(--orange-texto); text-decoration: underline; }
.form-estado { display: none; margin-top: 14px !important; padding: 12px 14px; border-radius: var(--radius); background: var(--orange-light); color: #7A3A00 !important; font-size: .88rem !important; line-height: 1.6; }
.form-estado.visivel { display: block; }
.form-sucesso { display: none; text-align: center; padding: 28px 8px; }
.form-sucesso.visivel { display: block; }
.form-sucesso h3 { margin-bottom: 12px; }
@media (max-width: 768px) {
  .cta-final .cta-form { padding: 28px 22px 24px; }
}
@media (pointer: coarse) {
  .footer-col ul a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 40px; }
  .footer-col ul { gap: 2px; }
}

/* Serviços: a página força 3 colunas no próprio código; em ecrãs pequenos passa a 2 e a 1 */
@media (max-width: 1024px) { .page-content .como-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) { .page-content .como-grid { grid-template-columns: 1fr !important; } }

/* entradas mais rápidas e mais cedo (o observador dispara antes de o bloco entrar) */
.animate { transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.animate-delay-1 { transition-delay: .05s; }
.animate-delay-2 { transition-delay: .1s; }
.animate-delay-3 { transition-delay: .15s; }
.animate-delay-4 { transition-delay: .2s; }


/* ============================================================
   O TOPO: voo de drone que começa sozinho ao abrir o site
   Durante o voo toca o vídeo; quando o drone pára na sala, uma
   fotografia nítida do mesmo plano assume o lugar do vídeo.
   ============================================================ */
.voo { position: relative; height: 100vh; height: 100svh; min-height: 520px; background: #2E2E2E; overflow: hidden; }
.voo__palco { position: absolute; inset: 0; }
.voo__video, .voo__imagem, .voo__imagem img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.voo__video { opacity: 0; transition: opacity .6s ease; }
.voo.a-tocar .voo__video { opacity: 1; }
.voo__imagem--fim { opacity: 0; transition: opacity 1.2s ease; }
.voo.terminou .voo__imagem--fim { opacity: 1; }
.voo__imagem--inicio { z-index: 0; }
.voo__video { z-index: 1; } .voo__imagem--fim { z-index: 2; }
.voo__veu { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to right, rgba(28,28,28,.6) 0%, rgba(28,28,28,.44) 30%, rgba(28,28,28,.12) 52%, rgba(28,28,28,0) 68%); }
.voo .faixa { z-index: 4; opacity: 0; transform: translateY(-50%); transition: opacity .9s ease; will-change: opacity; }
.voo .faixa.ativa { opacity: 1; }
.voo .faixa .faixa__caixa::before { opacity: 1; }
.voo .faixa > .faixa__caixa > * { transform: translateY(18px); opacity: 0; transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); }
.voo .faixa.ativa > .faixa__caixa > * { transform: none; opacity: 1; }
.voo .faixa.ativa > .faixa__caixa > :nth-child(2) { transition-delay: .15s; }
.voo .faixa.ativa .hero-actions { transition-delay: .3s; }
.voo__pista { position: absolute; z-index: 4; bottom: 42px; left: max(40px, calc((100% - 1360px) / 2 + 40px)); display: flex; align-items: center; gap: 14px; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75); opacity: 0; transition: opacity .6s ease; }
.voo__pista span { position: relative; width: 46px; height: 1px; background: rgba(255,255,255,.3); overflow: hidden; }
.voo__pista span::after { content: ''; position: absolute; inset: 0; background: var(--orange); animation: scrollDesliza 2.2s ease-in-out infinite; }
.voo.terminou .voo__pista { opacity: 1; }
@media (max-aspect-ratio: 1/1) {
  .voo__veu { background: linear-gradient(to top, rgba(28,28,28,.86) 0%, rgba(28,28,28,.66) 32%, rgba(28,28,28,.18) 52%, rgba(28,28,28,0) 64%); }
  .voo .faixa { top: auto; bottom: 0; transform: none; padding: 0 20px max(40px, 7svh); }
  .voo .faixa h1, .voo .faixa .titulo-faixa { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .voo .faixa .hero-sub { font-size: .96rem; margin-bottom: 26px; }
  .voo .faixa .hero-actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .voo .faixa .hero-actions .btn { justify-content: center; }
  .voo__pista { display: none; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .voo .faixa h1, .voo .faixa .titulo-faixa { font-size: clamp(1.6rem, 7vh, 2.4rem); }
  .voo .faixa .hero-eyebrow { margin-bottom: 12px; }
  .voo .faixa .hero-sub { font-size: .9rem; margin-bottom: 16px; line-height: 1.5; }
  .voo__pista { display: none; }
}

/* etiqueta pequena do topo: laranja um pouco mais claro para ler bem sobre a imagem */
.voo .hero-eyebrow span { color: #FFA547; }

/* o logótipo no fim do vídeo, por cima do texto: cores originais numa placa branca */
.voo__marca {
  display: inline-flex; margin-bottom: 30px; padding: 14px 22px;
  background: rgba(255,255,255,.97); border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.voo__marca img { height: 84px; width: auto; display: block; }
@media (max-aspect-ratio: 1/1) {
  .voo__marca { margin-bottom: 22px; padding: 11px 17px; }
  .voo__marca img { height: 62px; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .voo__marca { margin-bottom: 14px; padding: 8px 13px; }
  .voo__marca img { height: 44px; }
}

/* fundos alternados, para cada secção ficar bem separada da vizinha:
   posicionamento (branco) · como ajudamos (cinza) · equipa (branco) · processo (cinza)
   · testemunhos (branco) · zonas (cinza) · próximo passo (escuro) */
.processo { background: var(--gray-light); }
.testemunhos { background: var(--white); }
.testemunhos .testemunho { background: var(--gray-light); box-shadow: none; }
.zonas { background: var(--gray-light); }

/* botão para os imóveis da Compasso (na MaisConsultores), por baixo dos passos */
.processo-imoveis { margin-top: 64px; text-align: center; }
@media (max-width: 768px) { .processo-imoveis { margin-top: 48px; } }

/* texto final do hero, depois do vídeo: serifa de alto contraste, com filete laranja */
.final-eyebrow {
  font-size: .78rem; font-weight: 400; letter-spacing: .32em; text-transform: uppercase;
  color: rgba(255,255,255,.92); margin: 0 0 18px; line-height: 1.4;
}
.faixa .final-titulo {
  font-family: 'DM Serif Display', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 4.8rem); font-weight: 400; line-height: 1.02; letter-spacing: -.01em;
  color: var(--white); margin: 0;
}
.faixa .final-titulo em { font-style: normal; color: var(--orange); }
.faixa .final-titulo::after {
  content: ''; display: block; width: 64px; height: 2px; background: var(--orange); margin: 28px 0 24px;
}
@media (max-aspect-ratio: 1/1) {
  .voo .faixa .final-titulo { font-size: clamp(2.6rem, 13vw, 3.6rem); }
  .final-eyebrow { font-size: .7rem; letter-spacing: .28em; }
}
@media (max-height: 520px) and (min-aspect-ratio: 1/1) {
  .voo .faixa .final-titulo { font-size: clamp(1.8rem, 9vh, 2.6rem); }
  .faixa .final-titulo::after { margin: 12px 0 10px; }
  .final-eyebrow { margin-bottom: 8px; }
}