/* ==========================================================================
   v3 — scroll suave, fotografia, interlúdios, carta, mapa, superfícies,
   cena fixa (preço) e percurso horizontal (método). Carregado depois de deck.css.
   ========================================================================== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-depth] { translate: 0 var(--py, 0px); }

/* ---------- Fotografia: marcador até haver imagem ---------- */
.photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-card); background: linear-gradient(150deg, #1c3f9c 0%, #0b2466 55%, #071a4a 100%); }
.photo::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px); }
.photo::after {
  content: attr(data-photo); position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  padding-left: 26px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: rgba(255,255,255,.78);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.8' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.5-2.5h7L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 50% / 18px;
}
.photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.photo:has(> img)::after, .photo:has(> img)::before { display: none; }
.light .photo, .light-alt .photo, .fate-col .photo { background: linear-gradient(150deg, var(--sky-200), var(--blue-300)); }
.light .photo::before, .light-alt .photo::before, .fate-col .photo::before { background: repeating-linear-gradient(135deg, rgba(0,58,168,.05) 0 2px, transparent 2px 16px); }
.light .photo::after, .light-alt .photo::after, .fate-col .photo::after {
  color: var(--blue-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23003aa8' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l1.5-2.5h7L17 8h3v11H4z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* hero: foto a toda a largura, sombra à esquerda para o texto, desvanecida em baixo */
.hero-photo { position: absolute; inset: 0; z-index: -1; border-radius: 0;
  background: radial-gradient(60% 80% at 78% 38%, rgba(42,78,239,.35), transparent 70%), #04154a;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 100%); mask-image: linear-gradient(#000 62%, transparent 100%); }
.hero-photo::before, .hero-photo:has(> img)::before { display: block; z-index: 2;
  background: linear-gradient(90deg, rgba(0,10,34,.95) 0%, rgba(0,10,34,.72) 42%, rgba(0,10,34,.2) 100%); }
.hero-photo::after { left: auto; right: var(--gutter); top: calc(var(--topbar-h) + 22px); bottom: auto; max-width: 300px; z-index: 3; color: rgba(255,255,255,.6); }

/* ---------- Superfícies sólidas (o vidro fica reservado a poucos momentos) ---------- */
.surface { position: relative; border-radius: var(--r-card); background: #fff; border: 1px solid var(--sky-200); box-shadow: 0 26px 50px -34px rgba(0,40,140,.38); }
.deep .surface { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); box-shadow: none; }
.case .photo { border-radius: 0; }

/* ---------- Interlúdios: números gigantes que enchem com o scroll ---------- */
.interlude { min-height: 88vh; display: flex; align-items: center; text-align: center; }
.il-pre, .il-post { margin: 0 auto; max-width: 40ch; font-size: clamp(1.15rem, 2.2vw, 1.75rem); font-weight: 500; color: var(--on-dark-2); }
.light .il-pre, .light .il-post { color: var(--ink-2); }
.il-post .tag-ex { vertical-align: middle; margin-left: 8px; }
.il-num {
  position: relative; display: inline-block; margin: .12em 0 .18em; white-space: nowrap;
  font-size: clamp(4rem, 17vw, 15rem); font-weight: 800; line-height: .95; letter-spacing: -.045em;
  transform: scale(calc(.86 + var(--p, 1) * .14));
}
.il-num .stroke { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.28); }
.il-num .fill { position: absolute; inset: 0; color: #fff; clip-path: inset(-10% calc((1 - var(--p, 1)) * 100%) -10% 0); }
.light .il-num .stroke { -webkit-text-stroke-color: rgba(0,58,168,.25); }
.light .il-num .fill { color: var(--blue-700); }
.il-num.neg .fill { color: var(--red-400); }
.light .il-num.neg .fill { color: var(--red-600); }

/* ---------- Preço em cena fixa ---------- */
.price-now { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.price-now span { font-weight: 700; color: var(--on-dark-2); }
.price-now b { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; transition: color .3s; }
.reach-box.low .price-now b { color: var(--red-400); }
.pin-hint { display: none; margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; color: var(--on-dark-3); }
.pin-note { padding-top: 24px; }
/* overflow: hidden nas cenas impediria o position: sticky */
.pin-price.pin-on, #metodo.h-on { overflow: visible; }
.pin-price.pin-on { padding: 0; height: 290vh; }
.pin-price.pin-on .pin-stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--topbar-h) + 24px) var(--gutter) 56px; }
.pin-price.pin-on .slider-only { display: none; }
.pin-price.pin-on .pin-hint { display: block; transition: opacity .4s; }
.pin-price.pin-on.done .pin-hint { opacity: 0; }
.pin-price.pin-on .pin-note { position: absolute; left: 0; right: 0; bottom: 24px; }

/* ---------- Camadas do mercado em cena fixa (compradores) ---------- */
.pin-layers.pin-on { padding: 0; height: 300vh; overflow: visible; }
.pin-layers.pin-on .pin-stage { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: calc(var(--topbar-h) + 24px) var(--gutter) 32px; }
.pin-layers .pin-stage > .wrap { width: 100%; }
.pin-layers.pin-on .layers .ring { opacity: 0; transform: scale(.72); transition: transform 1s var(--ease-out), opacity .6s var(--ease-out); }
.pin-layers.pin-on .layers .ring.on { opacity: 1; transform: none; }
.lay-caps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 8px; max-width: 460px; }
.lay-caps li { padding: 12px 16px; border-radius: 14px; border: 1px solid transparent; font-size: 15px; color: var(--on-dark-3); transition: background .4s, color .4s, border-color .4s; }
.lay-caps li b { display: block; font-size: 16.5px; color: var(--on-dark-2); }
.lay-caps li.on { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--on-dark-2); }
.lay-caps li.on b { color: #fff; }
.lay-caps li.now { border-color: rgba(143,179,255,.5); }

/* ---------- Dois destinos: a casa do lado errado perde cor ---------- */
.fate-photo { aspect-ratio: 16 / 7; border-radius: 10px; margin: 0 0 12px; }
.fate-photo::after { font-size: 11.5px; bottom: 10px; }
.fate-col.bad .fate-photo { filter: grayscale(var(--fp, 0)) brightness(calc(1 - var(--fp, 0) * .3)); }

/* ---------- Carta do consultor ---------- */
.carta { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.portrait { aspect-ratio: 4 / 5; border-radius: 28px; }
.letter { display: grid; gap: 18px; justify-items: start; }
.letter .h2 { margin-bottom: 0; }
.letter-body { display: grid; gap: 4px; }
.letter-body p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.signature { font-family: "Mrs Saint Delafield", cursive; font-size: clamp(3.4rem, 6vw, 5.2rem); color: var(--blue-700); line-height: 1.1; padding-right: 20px; }
.signature span { display: inline-block; }
.motion .signature span { clip-path: inset(-30% 100% -40% -5%); transition: clip-path 2.4s cubic-bezier(.6, 0, .2, 1) .2s; }
.motion .signature.in span { clip-path: inset(-30% -10% -40% -5%); }

/* ---------- Método: percurso horizontal ---------- */
.h-progress { display: none; }
#metodo.h-on { padding: 0; }
#metodo.h-on .h-stage { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: calc(var(--topbar-h) + 16px) 0 32px; overflow: hidden; }
#metodo.h-on .h-stage > .wrap { padding: 0 var(--gutter); max-width: calc(var(--maxw) + 2 * var(--gutter)); }
#metodo.h-on .head { margin-bottom: 0; }
#metodo.h-on .h-progress { display: block; position: relative; height: 3px; margin-top: 28px; border-radius: 3px; background: var(--sky-200); overflow: hidden; }
.h-progress i { position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--hp, 0)); background: linear-gradient(90deg, var(--red-600), var(--blue-600) 30%); }
#metodo.h-on .h-viewport { padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
#metodo.h-on .timeline { display: flex; gap: 28px; padding-left: 0; width: max-content; transform: translate3d(var(--hx, 0px), 0, 0); will-change: transform; }
#metodo.h-on .timeline-track, #metodo.h-on .phase::before { display: none; }
#metodo.h-on .phase { width: min(60vw, 700px); flex: none; opacity: .4; transition: opacity .6s var(--ease-out); }
#metodo.h-on .phase.lit { opacity: 1; }

/* ---------- Mapa de vendas ---------- */
.map-split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.map-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 32px; max-width: 420px; }
.map-stats b { display: block; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1; color: var(--blue-600); letter-spacing: -.02em; }
.map-stats span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink-3); font-weight: 600; }
.map-card { padding: 14px; }
.map { position: relative; aspect-ratio: 800 / 460; border-radius: 14px; background: linear-gradient(180deg, #fff, var(--sky-50)); }
.map svg { width: 100%; height: 100%; border-radius: 14px; }
.m-river { fill: var(--sky-200); }
.m-minor path { fill: none; stroke: #e2ebfb; stroke-width: 3; stroke-linecap: round; }
.m-major path { fill: none; stroke: #cbdbf7; stroke-width: 9; stroke-linecap: round; }
.m-label { font: 800 13px var(--font); letter-spacing: .32em; fill: var(--ink-3); opacity: .55; }
.m-label.river { fill: var(--blue-600); opacity: .7; }
.motion .m-major path { stroke-dasharray: 1400; stroke-dashoffset: 1400; transition: stroke-dashoffset 2.6s var(--ease-out); }
.motion .map-card.in .m-major path { stroke-dashoffset: 0; }
.pin { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; padding: 0; border: 0; border-radius: 50%; background: var(--red-600); cursor: pointer; box-shadow: 0 0 0 4px #fff, 0 6px 14px rgba(0,30,90,.35); }
.pin::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(220,28,46,.45); animation: pin-pulse 2.6s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.motion .pin { transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.motion .map-card.in .pin { transform: none; transition-delay: calc(1s + var(--i, 0) * 120ms); }
.pin-card { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 3; transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap; padding: 10px 14px; border-radius: 12px; background: #fff; color: var(--ink-3); text-align: left; font-size: 13px; font-weight: 600; box-shadow: 0 16px 32px -14px rgba(0,30,90,.5); transition: opacity .25s, transform .35s var(--ease-out); }
.pin-card b { display: block; color: var(--ink); font-size: 15px; font-weight: 800; }
.pin:hover .pin-card, .pin:focus-visible .pin-card, .pin.open .pin-card { opacity: 1; transform: translate(-50%, 0); }
.map-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 14px 6px 4px; }

/* índice lateral: fora do hover mostra só o ponto ativo, para não tapar os títulos */
.rail:not(:hover) .rail-list a.active { color: transparent; }

/* ---------- Fecho em azul RE/MAX ---------- */
.blue .lead { color: var(--sky-100); }
.blue .legal { color: var(--sky-200); }
.blue .contact a span { color: var(--sky-200); }
.blue .contact a svg { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pin::after { animation: none; }
}
@media (max-width: 960px) {
  .carta, .map-split { grid-template-columns: 1fr; }
  .portrait { max-width: 360px; width: 100%; }
}
@media (max-width: 720px) {
  .pin-card { font-size: 12px; }
  .hero-photo::after { display: none; }
}
@media print {
  html.flow .scene.blue { background: var(--blue-700) !important; }
  .pin-price.pin-on, #metodo.h-on { height: auto !important; }
}

/* ---------- Testemunho (página web) ---------- */
.testi-fig { margin: 0 auto; max-width: 920px; display: grid; gap: clamp(24px, 3vw, 36px); }
.testi-pull { margin: 0; text-transform: uppercase; letter-spacing: -.015em; line-height: 1.02; font-size: clamp(2rem, 4.6vw, 3.75rem); text-wrap: balance; }
.testi-pull .thin { font-weight: 200; display: inline-block; }
.testi-pull .bold { font-weight: 800; display: inline-block; }
.testi-body { margin: 0; padding-left: clamp(18px, 3vw, 32px); border-left: 1px solid rgba(255,255,255,.18); display: grid; gap: 14px; }
.testi-body p { margin: 0; max-width: 64ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.65; font-weight: 400; color: var(--on-dark-2); }
.testi-who { display: flex; align-items: center; gap: 16px; }
.testi-initials { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--blue-500), var(--blue-700)); border: 2px solid rgba(255,255,255,.35); color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .04em; }
.testi-who b { display: block; font-size: 18px; font-weight: 800; color: #fff; }
.testi-who span span, .testi-who > span:last-child { font-size: 15px; color: var(--on-dark-3); }

/* mapa esquemático (Loures e Odivelas) */
.m-riverline { fill: none; stroke: var(--sky-200); stroke-width: 16; stroke-linecap: round; }
.m-label.small { font-size: 11px; letter-spacing: .2em; }
.case-img { aspect-ratio: 4 / 3; }
.case-img > img { object-fit: cover; }

/* ---------- Retrato do Ricardo (recorte com fundo transparente) ---------- */
.agent-photo img { object-position: 50% 6%; scale: 1.7; transform-origin: 50% 12%; }
.portrait { background: radial-gradient(85% 60% at 50% 32%, var(--blue-500), var(--blue-700) 62%, var(--navy-900)); }
.portrait > img { inset: auto 0 0 0; height: 94%; object-fit: cover; object-position: 50% 0; }
.scene .photo.portrait { background: radial-gradient(85% 60% at 50% 32%, var(--blue-500), var(--blue-700) 62%, var(--navy-900)); }

/* foto do hero */
.hero-photo > img { object-position: 60% 40%; }

/* Cartão do consultor: segundo foco do hero, nome e métricas legíveis à primeira */
.agent-card {
  padding: clamp(24px, 2.4vw, 34px); gap: 22px;
  background: linear-gradient(155deg, rgba(16, 50, 207, .86), rgba(0, 24, 92, .9));
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 32px 70px -18px rgba(0, 6, 28, .75), 0 10px 24px -8px rgba(0, 6, 28, .45), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.agent-top { gap: 20px; }
.agent-photo { width: 112px; height: 112px; border: 3px solid #fff; }
.agent-name { font-size: clamp(30px, 2.7vw, 38px); line-height: 1.05; letter-spacing: -.01em; }
.agent-role { font-size: 15px; line-height: 1.35; color: var(--sky-100, #D7E7FF); margin-top: 6px; }
.agent-role + .agent-role { margin-top: 2px; font-weight: 700; color: #fff; }
.agent-stats { grid-template-columns: 1fr; gap: 0; border-radius: 0; overflow: visible; background: none; border-top: 1px solid rgba(255, 255, 255, .24); }
.agent-stats div { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: center; gap: 14px; padding: 13px 0; background: none; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .24); }
.agent-stats b { font-size: clamp(42px, 3.7vw, 52px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.agent-stats span { margin-top: 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: #D7E7FF; }
.agent-logo { height: 44px; margin-top: 0; opacity: 1; }
@media (max-width: 560px) {
  .agent-photo { width: 92px; height: 92px; }
  .agent-stats div { grid-template-columns: 104px minmax(0, 1fr); }
  .agent-stats b { font-size: 40px; }
  .agent-stats span { font-size: 15px; }
}