/* =========================================================================
   NOVA v3 — "O PORTAL DO CORAÇÃO"
   VENDA (mão índigo) + LOCAÇÃO (mão ciano) se unem formando o coração;
   o coração vira janela e a câmera o atravessa até o voo dourado (vídeo).
   ========================================================================= */

/* NAV CAMALEÃO: sobre fundo ESCURO fica transparente (como na abertura);
   sobre fundo CLARO vira vidro escuro índigo. O JS detecta a seção sob a barra. */
.nav.scrolled{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; padding-block:22px; }
.nav.scrolled .nav__links a{ color:#fff; }
.nav.scrolled .logo__wm b{ color:#fff; }
.nav.scrolled .logo__wm small{ color:rgba(255,255,255,.72); }
.nav.scrolled .nav__burger span{ background:#fff; }
.nav.scrolled .nav__cta{ background:#fff; color:var(--indigo); }
body.nav-on-light .nav,
body.nav-on-light .nav.scrolled{
  background:rgba(10,11,38,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 1px 0 rgba(255,255,255,.08); padding-block:14px; }
body.nav-on-light .nav .nav__links a{ color:#fff; }
body.nav-on-light .nav .logo__wm b{ color:#fff; }
body.nav-on-light .nav .logo__wm small{ color:rgba(255,255,255,.72); }
body.nav-on-light .nav .nav__cta{ background:var(--grad-brand); color:#fff; }

.portal{ position:relative; height:300svh; z-index:3; background:#08081f; }

/* Busca centralizada na faixa (a barra tem max-width 960px) */
.searchband .search{ margin-left:auto; margin-right:auto; }
.search__btn svg{ width:20px; height:20px; flex-shrink:0; }  /* trava o ícone (sem isso ele infla no mobile) */

/* =========================================================================
   ESCOLHA SEU CAMINHO — split dual VENDA | LOCAÇÃO (pesos iguais)
   ========================================================================= */
.dual{ position:relative; display:flex; min-height:82vh; background:#0a0b26; overflow:hidden; }
.dual__panel{ position:relative; flex:1; display:flex; align-items:flex-end; overflow:hidden; transition:flex .75s var(--ease); }
.dual__panel:hover{ flex:1.55; }
.dual__bg{ position:absolute; inset:0; }
.dual__bg img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); filter:saturate(1.02); }
.dual__panel:hover .dual__bg img{ transform:scale(1.07); }
.dual__panel--venda::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,20,80,.94) 0%, rgba(48,48,144,.55) 46%, rgba(30,30,100,.28) 100%); }
.dual__panel--loc::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,53,90,.94) 0%, rgba(0,110,170,.5) 46%, rgba(0,80,130,.28) 100%); }
.dual__content{ position:relative; z-index:2; color:#fff; padding:clamp(28px,4vw,60px); max-width:560px; }
.dual__kicker{ font-size:.74rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.75); margin-bottom:10px; }
.dual__content h2{ font-family:'Cinzel',serif; font-weight:500; font-size:clamp(2.2rem,4.6vw,4rem); line-height:1; letter-spacing:.06em; }
.dual__panel--venda .dual__content h2{ color:#aeb0ff; }
.dual__panel--loc .dual__content h2{ color:var(--cyan-bright); }
.dual__content ul{ margin-top:18px; display:grid; gap:9px; }
.dual__content li{ display:flex; align-items:center; gap:10px; font-size:.96rem; color:rgba(255,255,255,.9); }
.dual__content li::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; flex-shrink:0; }
.dual__cta{ display:inline-flex; align-items:center; gap:.6em; margin-top:24px; padding:.95em 1.7em; border-radius:100px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(8px); font-weight:600; font-size:.92rem; transition:background .4s, transform .4s var(--ease); }
.dual__cta svg{ width:1em; height:1em; transition:transform .4s var(--ease); }
.dual__panel:hover .dual__cta{ background:#fff; color:var(--indigo); transform:translateY(-2px); }
.dual__panel:hover .dual__cta svg{ transform:translateX(4px); }
.dual__badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:92px; height:92px; border-radius:50%; background:rgba(10,11,38,.85);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center; box-shadow:0 20px 50px -18px rgba(0,0,0,.7); pointer-events:none; }
.dual__badge img{ width:48px; height:48px; }
@media (max-width:860px){
  .dual{ flex-direction:column; min-height:0; }
  .dual__panel{ min-height:62vh; }
  .dual__panel:hover{ flex:1; }
  .dual__badge{ width:76px; height:76px; }
  .dual__badge img{ width:40px; height:40px; }
}

/* =========================================================================
   RADAR DA CIDADE — "Araraquara. A cidade inteira."
   ========================================================================= */
.radar{ position:relative; background:var(--indigo-950); color:#fff; overflow:hidden; }
.radar__head{ text-align:center; margin-inline:auto; }
.radar__head h2{ color:#fff; }
.radar__head .lede{ color:rgba(255,255,255,.7); margin-inline:auto; }
.radar__scope{ position:relative; width:min(660px,88vw); aspect-ratio:1/1; margin:clamp(28px,4vw,52px) auto 0; }
.radar__disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 46%, #12143a 0%, #0a0b24 66%, #070818 100%);
  border:1px solid rgba(0,166,232,.28);
  box-shadow:0 40px 100px -34px rgba(0,0,0,.75), inset 0 0 70px rgba(0,166,232,.07); }
.radar__map{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92; }
.radar__grid{ position:absolute; inset:0; }
.radar__grid svg{ width:100%; height:100%; display:block; }
.rring{ fill:none; stroke:rgba(120,150,240,.13); stroke-width:1; }
.rax{ stroke:rgba(120,150,240,.10); stroke-width:1; }
.radar__sweep{ position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, rgba(0,166,232,.32), rgba(0,166,232,.05) 42deg, transparent 96deg, transparent 360deg);
  animation:rsweep 6s linear infinite; }
@keyframes rsweep{ to{ transform:rotate(360deg); } }
.radar__core{ position:absolute; left:50%; top:50%; width:clamp(46px,7.5vw,68px); transform:translate(-50%,-50%); z-index:4; filter:drop-shadow(0 8px 22px rgba(0,0,0,.7)); }
.rspot{ position:absolute; transform:translate(-50%,-50%); z-index:5; }
.rspot i{ display:block; width:13px; height:13px; margin:0 auto; border-radius:50%; background:var(--cyan-bright);
  box-shadow:0 0 10px rgba(52,198,255,.9); animation:rspulse 2.6s ease-out infinite; animation-delay:var(--d,0s); }
.rspot b{ position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); white-space:nowrap;
  font-size:.74rem; font-weight:600; letter-spacing:.02em; color:#fff;
  background:rgba(8,9,30,.74); border:1px solid rgba(120,180,255,.28); border-radius:100px; padding:.3em .8em;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 6px 16px -8px rgba(0,0,0,.7); }
.rspot--up b{ top:auto; bottom:calc(100% + 6px); }
.rspot--left b{ top:50%; bottom:auto; left:auto; right:calc(100% + 9px); transform:translateY(-50%); }
.rspot--right b{ top:50%; bottom:auto; left:calc(100% + 9px); transform:translateY(-50%); }
.rspot--c i{ display:none; }

/* PIN da NOVA (sede real, Vila Harmonia) — bolinha destacada + rótulo bairro/sede */
.novapin{ position:absolute; transform:translate(-50%,-50%); z-index:7; }
.novapin i{ display:block; width:15px; height:15px; border-radius:50%; background:#fff;
  box-shadow:0 0 12px rgba(0,166,232,.95); animation:novaping 2.4s ease-out infinite; }
@keyframes novaping{
  0%{ box-shadow:0 0 0 0 rgba(0,166,232,.55), 0 0 12px rgba(0,166,232,.95); }
  70%{ box-shadow:0 0 0 17px rgba(0,166,232,0), 0 0 12px rgba(0,166,232,.95); }
  100%{ box-shadow:0 0 0 0 rgba(0,166,232,0), 0 0 12px rgba(0,166,232,.95); } }
.novapin b{ position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%); white-space:nowrap; text-align:center;
  font-size:.8rem; font-weight:700; color:#fff; line-height:1.16;
  background:rgba(8,9,30,.82); border:1px solid rgba(0,166,232,.5); border-radius:12px; padding:.42em .9em;
  box-shadow:0 10px 26px -8px rgba(0,166,232,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.novapin b small{ display:block; font-size:.62rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--cyan-bright); margin-bottom:2px; }
@media (prefers-reduced-motion:reduce){ .novapin i{ animation:none; } }
.rspot--c b{ top:calc(50% + clamp(30px,4.4vw,42px)); background:rgba(0,166,232,.9); border-color:transparent; }
@keyframes rspulse{ 0%{ box-shadow:0 0 0 0 rgba(52,198,255,.5), 0 0 10px rgba(52,198,255,.9); } 70%{ box-shadow:0 0 0 18px rgba(52,198,255,0), 0 0 10px rgba(52,198,255,.9); } 100%{ box-shadow:0 0 0 0 rgba(52,198,255,0), 0 0 10px rgba(52,198,255,.9); } }
.radar__foot{ text-align:center; margin-top:22px; font-size:.82rem; color:rgba(255,255,255,.5); letter-spacing:.01em; }
@media (max-width:640px){ .rspot b{ font-size:.6rem; padding:.26em .6em; } .radar__foot{ font-size:.72rem; } }
@media (prefers-reduced-motion:reduce){ .rspot i, .radar__sweep{ animation:none !important; } }

/* =========================================================================
   CITYMAP — mapa real de Araraquara como FUNDO da telona (full-bleed)
   ========================================================================= */
.citymap{ position:relative; min-height:100svh; background:var(--indigo-950); overflow:hidden; color:#fff; }
.citymap__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transform:scale(1.15); transform-origin:center; opacity:.6; }
.citymap__hint{ color:var(--cyan-bright); opacity:.85; }
.citymap__scan{ position:absolute; left:50%; top:46%; width:190%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none;
  background:conic-gradient(from 0deg, rgba(0,166,232,.13), transparent 60deg, transparent 360deg); mix-blend-mode:screen; animation:rsweep 9s linear infinite; }
.citymap__veil{ position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(130% 105% at 50% 46%, transparent 30%, rgba(10,11,34,.42) 66%, var(--indigo-950) 100%),
  linear-gradient(90deg, rgba(10,11,34,.92) 0%, rgba(10,11,34,.5) 26%, transparent 54%),
  linear-gradient(180deg, rgba(10,11,34,.55) 0%, transparent 24%),
  linear-gradient(0deg, var(--indigo-950) 0%, transparent 20%); }
.citymap__head{ position:absolute; top:clamp(72px,11vh,128px); left:clamp(22px,5vw,72px); z-index:6; max-width:min(30rem,46vw); text-align:left; }
.citymap__head h2{ color:#fff; font-size:clamp(2rem,4.4vw,3.5rem); }
.citymap__head .lede{ color:rgba(255,255,255,.76); margin-top:16px; }
.citymap__pins{ position:absolute; inset:0; z-index:4; pointer-events:none; }
.citymap__pins .novapin, .citymap__pins .rspot{ animation:pinIn .8s var(--ease) both; animation-delay:var(--d,0s); }
/* Muitos bairros: rótulos SEMPRE visíveis (menores) + hover destaca */
.citymap__pins .rspot{ pointer-events:auto; }
.citymap__pins .rspot i{ width:11px; height:11px; transition:transform .2s var(--ease); }
.citymap__pins .rspot b{ font-size:.64rem; padding:.24em .58em; }
.citymap__pins .rspot:hover{ z-index:9; }
.citymap__pins .rspot:hover i{ transform:scale(1.45); }
.citymap__pins .rspot:hover b{ background:rgba(0,70,120,.94); border-color:var(--cyan-bright); }
@keyframes pinIn{ from{ opacity:0; } to{ opacity:1; } }
.citymap__foot{ position:absolute; left:clamp(22px,5vw,72px); bottom:clamp(22px,4vh,42px); z-index:5; font-size:.82rem; color:rgba(255,255,255,.55); }
@media (max-width:720px){
  .citymap__head{ max-width:none; left:20px; right:20px; top:clamp(64px,9vh,100px); }
  .citymap__head h2{ font-size:clamp(1.9rem,9vw,2.6rem); }
  .citymap__head .lede{ font-size:.9rem; overflow-wrap:break-word; }
  .citymap__bg{ opacity:.5; transform:scale(1.6); }   /* F=1.6 no JS combina */
  .citymap__foot{ font-size:.72rem; left:20px; right:20px; }
  /* MOBILE: só pontos; o nome aparece ao TOCAR (evita 24 rótulos empilhados) */
  .citymap__pins .rspot b{ opacity:0; }
  .citymap__pins .rspot.is-active{ z-index:12; }
  .citymap__pins .rspot.is-active b{ opacity:1; }
  .citymap__pins .rspot.is-active i{ transform:scale(1.5); }
  .citymap__pins .rspot::after{ content:""; position:absolute; left:50%; top:50%; width:36px; height:36px; transform:translate(-50%,-50%); border-radius:50%; }
}
@media (prefers-reduced-motion:reduce){ .citymap__scan{ animation:none; } .citymap__pins .novapin, .citymap__pins .rspot{ animation:none; } }

/* =========================================================================
   AJUSTES MOBILE gerais (portal, busca, manifesto, encomende)
   ========================================================================= */
@media (max-width:600px){
  /* trava anti-estouro horizontal (não quebra o sticky do portal como overflow:hidden faria) */
  body{ overflow-x:clip; }
  .searchband, .order, .manifesto, .citymap{ overflow-x:clip; }
  /* Busca: FLEX coluna (à prova de estouro; grid deixava os selects esticarem) */
  .searchband__head h2{ font-size:clamp(1.4rem,6.8vw,1.9rem); }
  .search{ display:flex; flex-direction:column; gap:2px; width:100%; max-width:100%; }
  .search__field{ width:100%; }
  .search__btn{ width:100%; padding:15px; margin-top:10px; }
  /* Manifesto: coluna + manchete menor */
  .manifesto__grid{ display:flex; flex-direction:column; }
  .manifesto__text{ min-width:0; }
  .manifesto__text h2{ font-size:clamp(1.6rem,8vw,2.2rem); }
  /* Encomende: FLEX coluna + manchete/padding mobile */
  .order__box{ display:flex; flex-direction:column; gap:22px; padding:clamp(26px,7vw,40px); }
  .order h2{ font-size:clamp(1.6rem,8vw,2.2rem); }
  .order .lede{ overflow-wrap:break-word; }
}

/* Véu de transição entre páginas (coração se fechando) */
.pageveil{ position:fixed; inset:0; width:100%; height:100%; z-index:4000; pointer-events:none; visibility:hidden; }
.pageveil.active{ visibility:visible; pointer-events:auto; }

/* =========================================================================
   CARDS VIVOS — borda-gradiente + tilt 3D + mini-galeria no hover
   ========================================================================= */
.card{ transform-style:preserve-3d; will-change:transform; }
.card::before{ content:""; position:absolute; inset:0; z-index:4; border-radius:var(--radius-lg); padding:1.6px;
  background:linear-gradient(120deg,#2b2c86,#00a6e8);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease); pointer-events:none; }
.card:hover::before{ opacity:1; }
.card__media{ transform:translateZ(24px); }
.card__media .gframe{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .45s var(--ease); }
.card__media .gframe.on{ opacity:1; }
.portal__stage{ position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden;
  background:
    radial-gradient(90% 70% at 50% 115%, rgba(48,48,144,.34), transparent 60%),
    radial-gradient(70% 55% at 82% -10%, rgba(0,166,232,.10), transparent 60%),
    linear-gradient(180deg,#0b0c26 0%, #08081f 100%); }
.portal .grain{ position:absolute; inset:0; z-index:8; pointer-events:none; opacity:.05; mix-blend-mode:overlay; }

/* Poeira de pontos do fundo (só estética, estática) */
.portal__dust{ position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:radial-gradient(rgba(160,170,255,.18) 1px, transparent 1.4px);
  background-size:34px 34px; }

/* Vídeo de fundo (fica atrás da cortina; o furo-coração o revela) */
.portal__window{ position:absolute; inset:0; z-index:1; }
.portal__cover{ position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; }
.portal__window video, .portal__window img.pfallback{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.06) contrast(1.04); }
/* leve gradação por cima do vídeo pra leitura dos textos */
.portal__window::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,15,50,.28) 0%, transparent 30%, transparent 58%, rgba(11,10,40,.55) 100%); }

/* Mãos (cada uma é o SVG só com o próprio caminho, mesmo viewBox = encaixe perfeito) */
.portal__hand{ position:absolute; left:50%; top:46%; width:30vmax; z-index:4;
  transform:translate(-50%,-50%); will-change:transform,opacity;
  filter:drop-shadow(0 18px 60px rgba(0,0,0,.45)); }

/* Rótulos das frentes (pesos IGUAIS) */
.portal__label{ position:absolute; top:min(calc(46% + 31vmax), 82%); z-index:5; color:#fff; text-align:center; will-change:transform,opacity; width:min(40vw,340px); }
.portal__label b{ display:block; font-family:'Cinzel',serif; font-weight:600; font-size:clamp(1.4rem,2.7vw,2.15rem); letter-spacing:.3em; text-indent:.3em; }
.portal__label span{ display:block; margin-top:10px; font-size:clamp(.72rem,1.02vw,.88rem); letter-spacing:.05em; color:rgba(255,255,255,.66); line-height:1.5; }
.portal__label--venda{ left:50%; margin-left:calc(-1 * min(20vw,170px)); }
.portal__label--loc  { left:50%; margin-left:calc(-1 * min(20vw,170px)); }
.portal__label--venda b{ color:#8b8bff; }
.portal__label--loc b{ color:var(--cyan-bright); }

/* Cabeçalho discreto do ato 1 */
.portal__intro{ position:absolute; top:clamp(96px,13vh,150px); left:0; right:0; z-index:5; text-align:center; color:rgba(255,255,255,.82); font-size:.9rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; text-shadow:0 1px 14px rgba(8,9,30,.7); }

/* ---------- ATMOSFERA (auras + órbitas + poeira dourada) ---------- */
.pAura{ transform-box:fill-box; transform-origin:center; animation:pBreathe 7s ease-in-out infinite; }
.pAura--b{ animation-delay:-3.5s; }
@keyframes pBreathe{ 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.08); } }

.pOrbits circle{ fill:none; stroke:rgba(150,160,255,.10); stroke-width:1; stroke-dasharray:2.2 3.4; transform-box:fill-box; transform-origin:center; }
.pOrbits circle:nth-child(1){ animation:pSpin 90s linear infinite; }
.pOrbits circle:nth-child(2){ animation:pSpinR 140s linear infinite; stroke:rgba(150,160,255,.07); }
.pOrbits circle:nth-child(3){ animation:pSpin 200s linear infinite; stroke:rgba(150,160,255,.05); }
@keyframes pSpin{ to{ transform:rotate(360deg); } }
@keyframes pSpinR{ to{ transform:rotate(-360deg); } }

.pMote{ fill:#ffd9a0; opacity:0; animation:pRise 16s linear infinite; }
.pMote:nth-child(2){ animation-duration:20s; animation-delay:-7s; }
.pMote:nth-child(3){ animation-duration:14s; animation-delay:-3s; }
.pMote:nth-child(4){ animation-duration:22s; animation-delay:-12s; }
.pMote:nth-child(5){ animation-duration:17s; animation-delay:-9s; }
.pMote:nth-child(6){ animation-duration:24s; animation-delay:-5s; }
.pMote:nth-child(7){ animation-duration:15s; animation-delay:-11s; }
.pMote:nth-child(8){ animation-duration:19s; animation-delay:-2s; }
.pMote:nth-child(9){ animation-duration:21s; animation-delay:-14s; }
.pMote:nth-child(10){ animation-duration:26s; animation-delay:-8s; }
.pMote:nth-child(11){ animation-duration:23s; animation-delay:-16s; }
.pMote:nth-child(12){ animation-duration:18s; animation-delay:-6s; }
@keyframes pRise{
  0%{ transform:translateY(0); opacity:0; }
  8%{ opacity:.55; }
  80%{ opacity:.35; }
  100%{ transform:translateY(-1300px); opacity:0; }
}

/* Coração de energia (VFX) + coração-fantasma do logo */
.portal__vfx{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); width:min(74vmax,1200px); z-index:3; mix-blend-mode:screen; opacity:.9; pointer-events:none; }
.portal__hands{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }
/* pulso e marcha ficam nos FILHOS; o grupo #pGhost fica livre pro fade do scroll */
.pGhostPath{ fill:none; stroke:rgba(130,210,255,.34); stroke-width:4; stroke-dasharray:2.2 1.6; animation:pGhostDash 7s linear infinite, pGhostPulse 2.8s ease-in-out infinite; }
@keyframes pGhostPulse{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes pGhostDash{ to{ stroke-dashoffset:-38; } }

/* GLINT: segmento de luz percorrendo o contorno das mãos (joalheria) */
.pGlint{ fill:none; stroke:#cfeaff; stroke-width:6; stroke-linecap:round; stroke-dasharray:7 993; animation:pGlintRun 4.6s linear infinite; filter:drop-shadow(0 0 6px rgba(140,220,255,.9)); }
.pGlint--b{ animation-delay:-2.3s; stroke:#eaf6ff; }
@keyframes pGlintRun{ to{ stroke-dashoffset:-1000; } }

/* FEIXES volumétricos (holofotes de première, ultra suaves) */
.pBeams{ position:absolute; inset:-10%; z-index:3; pointer-events:none; overflow:hidden; }
.pBeams i{ position:absolute; top:-30%; height:160%; width:16vmax; border-radius:50%;
  background:linear-gradient(90deg, transparent, rgba(90,100,230,.10), transparent);
  filter:blur(28px); transform:rotate(-24deg); }
.pBeams i:nth-child(1){ left:-10%; animation:pSweep 26s ease-in-out infinite; }
.pBeams i:nth-child(2){ left:30%; width:22vmax; background:linear-gradient(90deg, transparent, rgba(0,166,232,.07), transparent); animation:pSweep 34s ease-in-out infinite reverse; }
.pBeams i:nth-child(3){ left:70%; animation:pSweep 30s ease-in-out -12s infinite; }
@keyframes pSweep{ 0%,100%{ transform:rotate(-24deg) translateX(-14vmax); opacity:.5; } 50%{ transform:rotate(-24deg) translateX(14vmax); opacity:1; } }

/* COMETAS: riscos de luz com cauda cruzando o fundo */
.pComets{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.pComets i{ position:absolute; width:190px; height:2px; border-radius:2px; opacity:0;
  background:linear-gradient(90deg, rgba(255,217,160,0), rgba(255,217,160,.95));
  box-shadow:0 0 12px rgba(255,217,160,.8); }
.pComets i:nth-child(1){ top:16%; left:-12%; transform:rotate(14deg); animation:pComet1 9s linear infinite; }
.pComets i:nth-child(2){ top:64%; left:106%; transform:rotate(196deg); animation:pComet2 12s linear -4s infinite;
  background:linear-gradient(90deg, rgba(90,200,255,0), rgba(90,200,255,.95)); box-shadow:0 0 12px rgba(90,200,255,.8); }
.pComets i:nth-child(3){ top:38%; left:-12%; transform:rotate(8deg); animation:pComet1 14s linear -7s infinite;
  background:linear-gradient(90deg, rgba(150,160,255,0), rgba(150,160,255,.9)); box-shadow:0 0 12px rgba(150,160,255,.7); }
.pComets i:nth-child(4){ top:84%; left:106%; transform:rotate(188deg); animation:pComet2 11s linear -2s infinite; }
@keyframes pComet1{ 0%{ transform:translateX(0) rotate(14deg); opacity:0; } 2%{ opacity:1; } 13%{ transform:translateX(130vw) rotate(14deg); opacity:0; } 100%{ transform:translateX(130vw) rotate(14deg); opacity:0; } }
@keyframes pComet2{ 0%{ transform:translateX(0) rotate(190deg); opacity:0; } 2%{ opacity:1; } 13%{ transform:translateX(-130vw) rotate(190deg); opacity:0; } 100%{ transform:translateX(-130vw) rotate(190deg); opacity:0; } }
html.no-scrub .pBeams, html.no-scrub .pComets{ display:none; }
@media (prefers-reduced-motion:reduce){ .pBeams, .pComets{ display:none !important; } }
html.no-scrub .portal__vfx, html.no-scrub .portal__hands{ display:none; }
@media (prefers-reduced-motion:reduce){ .portal__vfx, .portal__hands{ display:none !important; } }

/* Pulso do encontro */
.portal__pulse{ position:absolute; left:50%; top:46%; z-index:6; width:34vmax; height:34vmax; margin:-17vmax 0 0 -17vmax; border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(52,198,255,.5) 0%, rgba(52,198,255,.18) 34%, transparent 62%); will-change:transform,opacity; }

/* Wordmark dentro da Nova */
.portal__wordmark{ position:absolute; top:clamp(70px,10vh,124px); left:0; right:0; z-index:7; text-align:center; pointer-events:none; opacity:0; will-change:transform,opacity; }
.portal__wordmark b{ display:block; font-family:'Cinzel',serif; font-weight:500; font-size:clamp(3.4rem,15vw,12rem); line-height:.84; letter-spacing:.04em; color:rgba(255,255,255,.97); text-shadow:0 8px 48px rgba(10,11,34,.5); }
.portal__wordmark small{ display:block; font-family:'Cinzel',serif; font-weight:500; font-size:clamp(.85rem,3.6vw,2.6rem); letter-spacing:.16em; text-indent:.16em; color:rgba(255,255,255,.95); margin-top:.06em; text-shadow:0 4px 24px rgba(10,11,34,.55); }

/* Ato final: chamada + CTAs gêmeos (venda = locação) */
.portal__final{ position:absolute; left:0; right:0; bottom:clamp(40px,8vh,86px); z-index:7; text-align:center; opacity:0; will-change:transform,opacity; padding-inline:var(--gutter); }
.portal__final h1{ font-family:var(--font-display); font-weight:400; color:#fff; font-size:clamp(1.5rem,3vw,2.4rem); letter-spacing:-.01em; text-shadow:0 2px 24px rgba(10,11,34,.6); }
.portal__final .twin{ margin-top:22px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.portal__final .twin .btn{ min-width:200px; justify-content:center; }
.portal__final .wa{ display:inline-flex; align-items:center; gap:.55em; margin-top:16px; color:rgba(255,255,255,.9); font-size:1.02rem; transition:color .3s; }
.portal__final .wa:hover{ color:var(--cyan-bright); }
.portal__final .wa svg{ width:21px; height:21px; color:#fff; }

/* Dica de rolagem */
.portal__cue{ position:absolute; left:50%; transform:translateX(-50%); bottom:clamp(16px,3vh,30px); z-index:6; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.8); font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; }
.portal__cue svg{ width:14px; height:14px; animation:pcue 1.9s var(--ease) infinite; }
@keyframes pcue{ 0%,100%{ transform:translateY(-3px); opacity:.5; } 50%{ transform:translateY(3px); opacity:1; } }

/* ---------- FALLBACK (sem GSAP) e reduced-motion: cena final estática ---------- */
html.no-scrub .portal{ height:100svh; }
html.no-scrub .portal__stage{ position:relative; }
html.no-scrub .portal__window{ opacity:1; }
html.no-scrub .portal__cover{ display:none; }
html.no-scrub .portal__hand, html.no-scrub .portal__label, html.no-scrub .portal__intro,
html.no-scrub .portal__pulse, html.no-scrub .portal__cue{ display:none; }
html.no-scrub .portal__wordmark, html.no-scrub .portal__final{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .portal{ height:100svh; }
  .portal__stage{ position:relative; }
  .portal__window{ opacity:1 !important; }
  .portal__cover{ display:none !important; }
  .portal__hand, .portal__label, .portal__intro, .portal__pulse, .portal__cue{ display:none !important; }
  .portal__wordmark, .portal__final{ opacity:1 !important; transform:none !important; }
}

/* =========================================================================
   PERF — pausa as animações contínuas quando a seção está FORA da tela.
   Zero mudança visual: só afeta o que já não está visível. Libera GPU e
   destrava a navegação em computadores mais fracos. (classes ligadas pelo JS)
   ========================================================================= */
html.portal-idle .pAura,
html.portal-idle .pOrbits circle,
html.portal-idle .pMote,
html.portal-idle .pGhostPath,
html.portal-idle .pGlint,
html.portal-idle .pBeams i,
html.portal-idle .pComets i,
html.portal-idle .portal__cue svg{ animation-play-state:paused !important; }

html.city-idle .citymap__scan,
html.city-idle .citymap__pins .rspot i,
html.city-idle .citymap__pins .novapin i{ animation-play-state:paused !important; }

/* Feixes de luz: promove a camada pra rasterizar o blur UMA vez e animar só o
   transform na GPU (mesma aparência, muito mais leve enquanto o hero aparece). */
.pBeams i{ will-change:transform; }

@media (max-width:640px){
  .portal__label{ top:calc(46% + 15vmax + 64px); width:44vw; }
  .portal__final .twin .btn{ min-width:0; flex:1 1 42%; }
  .pBeams{ display:none; } /* economiza GPU no celular */
  .portal__intro{ padding-inline:12px; font-size:.5rem; letter-spacing:.04em; }
  .portal__label{ width:43vw; }
  .portal__label--venda{ left:3.5vw; right:auto; margin-left:0; text-align:center; }
  .portal__label--loc{ right:3.5vw; left:auto; margin-left:0; text-align:center; }
  .portal__label b{ font-size:.98rem; letter-spacing:.1em; }
  .portal__label span{ font-size:.54rem; line-height:1.45; letter-spacing:.02em; overflow-wrap:break-word; }
}