/* Hero aprovada; estilos isolados da página final. */
#inicio { --brand-1:#45C6C8; --brand-2:#2E9BD6; --brand:linear-gradient(120deg,var(--brand-1),var(--brand-2)); --accent:#22D3EE; --line-2:rgba(140,200,235,.24); --gut:clamp(20px,5vw,72px); --font-d:'Sora',system-ui,sans-serif; --font-m:'JetBrains Mono',monospace; --bg:#070B14; --muted:#93A4BC; --text:#EAF1F8; font-family:Inter,system-ui,sans-serif; }
.hero-scroll { height:180vh; position:relative; }
.character-hero { position:sticky; top:0; height:100svh; min-height:680px; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at 65% 54%,#12313e80,transparent 52%),var(--bg); }
.hero-grid { position:absolute; inset:0; opacity:.19; background-image:linear-gradient(#53839e24 1px,transparent 1px),linear-gradient(90deg,#53839e24 1px,transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse at 65% 50%,#000,transparent 68%); }
.jph-copy { position:absolute; top:24%; left:var(--gut); z-index:5; width:43%; max-width:590px; }
.hero-kicker { display:flex; align-items:center; gap:10px; font:10px var(--font-m); letter-spacing:.14em; text-transform:uppercase; color:var(--brand-1); margin-bottom:24px; }
.hero-kicker::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--brand-1); box-shadow:0 0 14px #45c6c877; }
.hero-title { font-size:clamp(38px,4.4vw,72px); line-height:1.1; letter-spacing:-.055em; font-weight:600; max-width:580px; text-wrap:balance; }
.jph-description { margin:25px 0 27px; font-size:14px; line-height:1.8; color:var(--muted); max-width:340px; }
.hero-cta { display:inline-flex; align-items:center; gap:11px; }
.hero-cta__text { border:1px solid #67d4d657; border-radius:50px; padding:15px 26px; background:var(--brand); color:#06131e; font-size:13px; font-weight:600; transition:filter .25s; }
.hero-cta__arrow { display:grid; place-items:center; width:49px; height:49px; border:1px solid var(--line-2); border-radius:50%; color:var(--brand-1); font-size:22px; transition:transform .25s,background .25s; }
.hero-cta:hover .hero-cta__arrow { transform:rotate(45deg); background:#45c6c815; }
.hero-cta:hover .hero-cta__text { filter:brightness(1.1); }
.hero-wordmark { position:absolute; bottom:30px; left:3%; width:94%; z-index:1; font:600 clamp(100px,20vw,360px)/.85 var(--font-d); letter-spacing:-.085em; white-space:nowrap; color:#234454; opacity:.6; user-select:none; }
.actor { position:absolute; width:min(49vw,70svh,740px); right:6%; bottom:-5%; z-index:2; transform-origin:50% 65%; }
.actor img { width:100%; height:auto; display:block; mask-image:linear-gradient(#000 86%,transparent 100%); clip-path:polygon(44% 1.3%,46% 1.6%,46% 8.5%,52% 7.1%,64% 9%,66% 10%,66% 4.6%,69% 4%,70% 6%,72% 7%,73% 14%,72% 15%,75% 22%,76% 25%,75% 35%,73% 39%,69% 43%,72% 44%,74% 49%,79% 51%,82% 57%,83% 63%,85% 71%,89% 73%,93% 85%,92% 88%,94% 96%,92% 100%,25% 100%,28% 94%,33% 87%,32% 85%,35% 79%,32% 80%,30% 82%,19% 85%,12% 84%,7% 80%,6% 76%,9% 72%,9% 68%,12% 65%,14% 59%,14% 57%,16% 52%,18% 49%,22% 46%,25% 45%,25% 40%,28% 37%,34% 36%,32% 35%,29% 31%,30% 22%,32% 18%,36% 14%,40% 12%,38% 10%,38% 6%,40% 4%); }
.chest-mark { position:absolute; left:60.5%; top:60.5%; width:10.3%; transform:translate(-50%,-50%) rotate(-4deg); }
.chest-mark svg g { stroke:#083046; }
.chest-mark svg { width:100%; height:auto; }
#energy { position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.hero-caption { position:absolute; top:27%; right:var(--gut); z-index:4; font:9px/1.8 var(--font-m); letter-spacing:.1em; color:var(--muted); text-align:right; }
.hero-caption strong { display:block; color:var(--brand-1); font-weight:400; }
.hero-footer { position:absolute; left:var(--gut); right:var(--gut); bottom:25px; z-index:5; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:9px var(--font-m); letter-spacing:.09em; text-transform:uppercase; }
.scroll-link { display:flex; gap:15px; align-items:center; }
.scroll-link span { display:inline-grid; place-content:center; border:1px solid var(--line-2); width:28px; height:37px; border-radius:20px; color:var(--brand-1); font-size:15px; }
.motion-toggle { color:var(--muted); background:#070b1470; border:1px solid var(--line); border-radius:20px; padding:9px 12px; cursor:pointer; font:9px var(--font-m); }
.motion-toggle:hover { color:var(--text); }
.hero-phase { color:var(--brand-1); }
@media(min-width:1600px) { .actor { right:10%; } }
@media(max-width:1000px) { .hero-title { font-size:clamp(35px,4.4vw,46px); } .jph-copy { width:47%; } .actor { width:min(59vw,70svh); right:-4%; bottom:0; } .hero-caption { top:19%; } }
@media(max-width:700px) {
 .character-hero { min-height:800px; } .hero-scroll { height:1500px; }
 .jph-copy { top:116px; left:24px; width:calc(100% - 48px); max-width:430px; }
 .hero-kicker { margin-bottom:17px; font-size:8px; } .hero-title { font-size:clamp(32px,8.4vw,48px); max-width:390px; }
 .jph-description { font-size:12px; margin:17px 0 18px; max-width:300px; line-height:1.7; }
 .hero-cta__text { padding:12px 21px; font-size:12px; } .hero-cta__arrow { width:42px; height:42px; }
 .actor { width:440px; max-width:110vw; right:-9%; bottom:-8%; }
 .hero-wordmark { font-size:21vw; bottom:110px; left:2%; }
 .hero-caption { top:auto; bottom:270px; right:auto; left:24px; text-align:left; font-size:8px; max-width:85px; }
 .hero-footer { left:24px; right:24px; bottom:18px; font-size:8px; } .hero-phase { display:none; }
 .motion-toggle { font-size:8px; } 
  
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .hero-scroll { height:auto; } .character-hero { position:relative; } .actor { will-change:auto; } .marquee__track { animation:none; } }

/* Mantém os scripts, navegação e efeitos das outras seções da V2. */
#inicio.hero-scroll { height:180svh; }
#inicio .character-hero { top:var(--header-height); height:calc(100svh - var(--header-height)); min-height:600px; }
#inicio .hero-title { color:#eaf1f8; }
#inicio .chest-mark svg { display:block; }
#inicio .hero-kicker { color:var(--brand-1); }
#inicio .hero-footer { bottom:48px; }
@media(max-width:700px) { #inicio.hero-scroll { height:1500px; } #inicio .character-hero { min-height:760px; } #inicio .jph-copy { top:55px; } }
@media(max-width:700px) and (max-height:800px) { #inicio.hero-scroll { height:auto; } #inicio .character-hero { position:relative; top:0; min-height:800px; } }
@media(prefers-reduced-motion:reduce) { #inicio.hero-scroll { height:auto; } #inicio .character-hero { position:relative;top:0; } }
