/* SOS Valentim v2: nova identidade (Inter auto-hospedada, verde #C8FF2E, logo das asas chapado) + profundidade 3D guiada pela rolagem. Carregado depois de style.css e refinement.css. */
@font-face{font-family:"Inter";src:url("./assets/fonts/inter-400.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("./assets/fonts/inter-600.woff") format("woff");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("./assets/fonts/inter-700.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("./assets/fonts/inter-display-800.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}

:root{--bg:#050706;--bg-2:#0a0d0a;--lime:#C8FF2E;--lime-soft:#86F06A;--glow:rgba(200,255,46,.35);--sans:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;--display:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body{font-family:var(--sans);background:var(--bg)}
h1,h2,h3,.hero-word,.launch-copy h2,.tracking-metrics strong{font-family:var(--display)}
h1,h2{letter-spacing:-.045em}
h1 em,h2 em{font-style:normal}
h1 em,h2 em{background:linear-gradient(92deg,var(--lime),var(--lime-soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.launch h2 em,.services h2 em{background:none;-webkit-background-clip:border-box;background-clip:border-box}
.launch{background:var(--lime)}
.brand img,.footer-brand img,.launch-card-brand img{border-radius:10px}
.button-lime{box-shadow:0 12px 40px var(--glow)}
.button-lime:hover{box-shadow:0 16px 50px rgba(200,255,46,.5)}

/* SOS central do app no verde da marca, não em vermelho */
.app-screen .sos-core{background:radial-gradient(circle at 35% 30%,#e6ff8c,var(--lime) 48%,#7fb312 100%);color:#0a0d08;box-shadow:0 0 0 8px rgba(200,255,46,.12),0 0 0 18px rgba(200,255,46,.05),0 18px 50px rgba(200,255,46,.35)}
.app-screen .sos-core small{color:#24300f}
.app-screen .sos-ring{border-color:rgba(200,255,46,.45)}

/* 3D guiado pela rolagem: o JS só escreve --p (0 a 1) e --mx/--my (ponteiro) */
.hero-grid{perspective:1800px}
.hero-product{transform-style:preserve-3d;rotate:y calc(var(--mx,0)*7deg - var(--p,0)*22deg);translate:0 calc(var(--p,0)*90px);transition:rotate .6s cubic-bezier(.2,.8,.2,1),translate .4s ease-out}
.hero-product .phone-main{translate:0 0 calc(40px - var(--p,0)*40px)}
.story-stage-inner{perspective:1600px}
.story-phone{rotate:y calc(16deg - var(--p,0)*32deg);transition:rotate .25s linear}
.tracking-product{perspective:1600px}
.tracking-phone{rotate:y calc(-20deg + var(--p,1)*20deg);translate:0 calc((1 - var(--p,1))*60px)}

/* faixa de serviços que corre com a rolagem */
.v2-marquee{overflow:hidden;border-block:1px solid var(--line);background:var(--bg);padding:20px 0}
.v2-mq{white-space:nowrap;font-family:var(--display);font-weight:800;font-size:clamp(38px,6.5vw,92px);letter-spacing:-.04em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(200,255,46,.55);translate:calc(var(--p,0)*-36%) 0}

/* logo das asas em camadas que se monta */
.brand-content .logo3d{position:relative;width:min(300px,62vw);aspect-ratio:1;margin:0 auto 34px;transform-style:preserve-3d;transform:perspective(1200px) rotateY(calc((1 - var(--p,1))*-36deg)) rotateX(calc((1 - var(--p,1))*16deg))}
.logo3d .lyr{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.logo3d .lyr-wings{fill:var(--lime);transform:translateZ(calc((1 - var(--p,1))*-160px)) scale(calc(1 + (1 - var(--p,1))*.22));filter:drop-shadow(0 0 26px rgba(200,255,46,.35))}
.logo3d .lyr-road .road{fill:#F2F3EE}.logo3d .lyr-road .dash{stroke:#050706;stroke-width:9;stroke-dasharray:20 15}
.logo3d .lyr-road{transform:translateY(calc((1 - var(--p,1))*50px))}
.logo3d .lyr-pin{fill:var(--lime);transform:translateZ(calc((1 - var(--p,1))*200px)) translateY(calc((1 - var(--p,1))*-130px))}
.logo3d .lyr-pin circle{fill:#050706}

/* seja prestador */
.provider{position:relative;padding:140px 0;background:radial-gradient(ellipse at 80% 50%,#18240f 0,transparent 55%),var(--bg);border-top:1px solid var(--line);overflow:hidden}
.provider-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.provider-copy h2{font-size:clamp(46px,6vw,84px);line-height:.98;margin:0}
.provider-copy>p{color:var(--muted);font-size:17px;line-height:1.6;max-width:52ch;margin:24px 0 0}
.provider-checks{list-style:none;padding:0;margin:28px 0 34px;display:grid;gap:12px}
.provider-checks li{display:flex;align-items:center;gap:12px;font-size:16px}
.provider-checks li:before{content:"✓";flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--lime);color:#0a0d08;font-weight:800;font-size:13px}
.provider-stage{perspective:1400px;display:grid;place-items:center;min-height:440px}
.ride-card{width:min(400px,100%);padding:28px;border-radius:30px;background:linear-gradient(170deg,#141b14,#0a0e0a);border:1px solid rgba(255,255,255,.14);box-shadow:0 60px 120px rgba(0,0,0,.6),0 0 60px rgba(200,255,46,.08);transform-style:preserve-3d;transform:rotateY(calc(-20deg + var(--p,1)*14deg)) rotateX(calc(10deg - var(--p,1)*6deg))}
.ride-head{display:flex;justify-content:space-between;align-items:center;margin:0}
.ride-tag{font-size:10px;font-weight:800;letter-spacing:.1em;padding:6px 11px;border-radius:999px;background:var(--lime);color:#0a0d08}
.ride-demo{font-size:11px;color:var(--muted-2)}
.ride-title{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;margin:18px 0 0;transform:translateZ(30px)}
.ride-points{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.ride-points li{display:flex;justify-content:space-between;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:14px}
.ride-points b{color:var(--lime)}.ride-points span{color:var(--muted)}
.ride-timer{height:6px;border-radius:6px;background:var(--line);margin-top:20px;overflow:hidden}
.ride-timer i{display:block;height:100%;background:var(--lime);animation:v2timer 6s linear infinite}
@keyframes v2timer{from{width:100%}to{width:0}}
.ride-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:18px;transform:translateZ(40px)}
.ride-actions span{display:grid;place-items:center;height:50px;border-radius:999px;font-weight:800;font-size:15px}
.ride-actions .no{border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.ride-actions .yes{background:var(--lime);color:#0a0d08;box-shadow:0 10px 30px rgba(200,255,46,.3)}

/* dúvidas */
.faq{padding:130px 0;background:var(--bg);border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.faq h2{font-size:clamp(42px,5vw,72px);line-height:1;margin:0}
.faq-list{display:grid;gap:10px;min-width:0}
.faq details{border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03);padding:0 22px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;font-weight:700;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.2);position:relative}
.faq summary i:before,.faq summary i:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--lime);transition:transform .3s}
.faq summary i:after{transform:rotate(90deg)}
.faq details[open] summary i:after{transform:rotate(0)}
.faq details p{color:var(--muted);font-size:16px;line-height:1.6;padding-bottom:20px;margin:0;max-width:62ch}
.faq summary:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-radius:8px}

.footer-inner{font-size:12px}
.footer-sos{display:block;color:#c9d0c6;font-weight:600;margin-top:6px}

@media (max-width:980px){
  .provider-grid,.faq-grid{grid-template-columns:1fr;gap:40px}
  .provider{padding:100px 0}.faq{padding:100px 0}
  .provider-stage{min-height:380px}
}
@media (max-width:780px){
  .hero-product{rotate:none;translate:none}
  .story-phone{rotate:y calc(10deg - var(--p,0)*20deg)}
  .faq summary{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-product,.story-phone,.tracking-phone,.v2-mq{rotate:none!important;translate:none!important}
  .brand-content .logo3d,.logo3d .lyr,.ride-card{transform:none!important}
}

/* topo no celular e tablet: os celulares escalados não cobrem mais a linha "01 Pedir · 02 Localizar · 03 Acompanhar" */
@media (max-width:1120px){.hero-foot{margin-top:50px}}
@media (max-width:780px){.hero-foot{margin-top:165px}}
@media (max-width:560px){.hero-foot{margin-top:215px}}