/* -------------------------------------------------------------------------- FONTES — Inter e Sora, hospedadas aqui mesmo -------------------------------------------------------------------------- O arquivo original carregava as duas do Google Fonts. Aqui elas moram no próprio site, por três motivos concretos: 1. A CSP é fechada (font-src 'self'): recurso de terceiro não carrega. 2. Privacidade — o Google receberia o IP e o User-Agent de cada visitante antes mesmo de a página aparecer, sem consentimento nenhum (LGPD). 3. Velocidade — sem preconnect, sem DNS de terceiro, sem handshake extra. São 164 KB servidos do mesmo domínio, com cache de um ano. Ambas são SIL Open Font License 1.1 (licenças em assets/fontes/). font-display: swap — o texto aparece na hora, na fonte do sistema, e troca quando a fonte chega. Ninguém fica olhando para uma tela em branco no 3G. -------------------------------------------------------------------------- */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fontes/inter-400.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fontes/inter-500.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fontes/inter-600.woff2') format('woff2');} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fontes/inter-700.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fontes/sora-500.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fontes/sora-600.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fontes/sora-700.woff2') format('woff2');} @font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fontes/sora-800.woff2') format('woff2');} /* ========================================================================== S.O.S Car Service — folha de estilo -------------------------------------------------------------------------- Este arquivo é o CSS do layout aprovado pelo cliente, portado sem alteração de aparência. As únicas adições estão no fim: as classes que substituíram os atributos style="" do HTML original, que a CSP (style-src 'self') não executa. Mesmo pixel, sem 'unsafe-inline'. ========================================================================== */ :root{ --ink:#05080f; --ink2:#080e1a; --panel:#0d1626; --panel2:#111d31; --line:rgba(120,155,215,.14); --line-2:rgba(120,155,215,.28); --blue:#2f6bf0; --blue2:#4b8bff; --cyan:#38bdf8; --glow:rgba(59,130,246,.45); --txt:#e9f1fc; --muted:#93a6c2; --white:#fff; --wa:#25d366; --wa2:#1fb457; --danger:#ff6b6b; --grad:linear-gradient(135deg,#2f6bf0 0%,#38bdf8 100%); --grad-soft:linear-gradient(135deg,rgba(47,107,240,.16),rgba(56,189,248,.10)); --shadow:0 30px 70px -30px rgba(0,0,0,.75); --hex:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); --r:18px; --maxw:1200px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--ink);color:var(--txt); line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.font-d{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.08;letter-spacing:-.02em;font-weight:800} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} section{position:relative} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600; font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)} .eyebrow::before{content:"";width:26px;height:2px;background:var(--grad);border-radius:2px} .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent} .muted{color:var(--muted)} .sec-pad{padding:clamp(70px,9vw,120px) 0} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:10px;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600; font-size:1rem;padding:15px 26px;border-radius:60px;cursor:pointer;border:none; transition:.25s cubic-bezier(.2,.7,.3,1);white-space:nowrap;position:relative} .btn svg{width:20px;height:20px} .btn-wa{background:linear-gradient(135deg,#25d366,#1fb457);color:#04120a; box-shadow:0 14px 30px -10px rgba(37,211,102,.6)} .btn-wa:hover{transform:translateY(-3px);box-shadow:0 20px 40px -10px rgba(37,211,102,.75)} .btn-primary{background:var(--grad);color:#00122e;box-shadow:0 14px 34px -10px var(--glow)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 22px 46px -12px var(--glow)} .btn-ghost{background:rgba(255,255,255,.04);color:var(--txt);border:1px solid var(--line-2)} .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--blue2);transform:translateY(-3px)} .btn-lg{padding:18px 34px;font-size:1.08rem} /* ---------- Decorative ---------- */ .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0} .hex-deco{position:absolute;pointer-events:none;opacity:.5;z-index:0} .grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- Top bar ---------- */ .topbar{background:rgba(47,107,240,.10);border-bottom:1px solid var(--line);font-size:.82rem; color:#c7d6ee;position:relative;z-index:20} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px} .topbar .pulse-dot{width:8px;height:8px;border-radius:50%;background:#25d366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pdot 2s infinite} .topbar a{color:#fff;font-weight:600} @keyframes pdot{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} .tb-left{display:flex;align-items:center;gap:9px} .tb-right{display:flex;align-items:center;gap:18px} /* ---------- Header ---------- */ header{position:sticky;top:0;z-index:50;transition:.3s} header.scrolled{background:rgba(5,8,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0} .brand{display:flex;align-items:center;gap:12px} .brand img{height:52px;width:auto;filter:drop-shadow(0 6px 16px rgba(47,107,240,.35))} .brand .bt{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:800;font-size:1.05rem;letter-spacing:.02em;line-height:1} .brand .bs{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)} .navlinks{display:flex;align-items:center;gap:30px} .navlinks a{font-size:.94rem;font-weight:500;color:#cbd8ec;transition:.2s;position:relative} .navlinks a:hover{color:#fff} .navlinks a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--grad);transition:.25s;border-radius:2px} .navlinks a:hover::after{width:100%} .nav-cta{display:flex;align-items:center;gap:14px} .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:12px;padding:9px;cursor:pointer} .burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0;transition:.3s} /* ---------- Hero ---------- */ .hero{position:relative;overflow:hidden;isolation:isolate} .hero-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 110% at 82% 0,#153058 0,#0b1830 42%,#05080f 100%)} .hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center right} .hero-bg::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,var(--ink) 30%,rgba(5,8,15,.86) 52%,rgba(5,8,15,.55) 100%), linear-gradient(0deg,var(--ink),transparent 40%)} .hero .wrap{padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(70px,9vw,120px);position:relative;z-index:2} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center} .badge-1st{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:60px; background:var(--grad-soft);border:1px solid var(--line-2);font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:.82rem;margin-bottom:26px} .badge-1st b{background:var(--grad);color:#00122e;padding:4px 10px;border-radius:40px;font-size:.72rem;letter-spacing:.04em} .hero h1{font-size:clamp(2.5rem,6vw,4.5rem);margin-bottom:22px} .hero h1 .grad-text{display:inline-block} .hero p.lead{font-size:clamp(1.05rem,1.7vw,1.25rem);color:#c3d2e8;max-width:560px;margin-bottom:32px} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px} .trust-row{display:flex;flex-wrap:wrap;gap:10px 22px} .trust-row div{display:flex;align-items:center;gap:8px;font-size:.9rem;color:#cdd9ec;font-weight:500} .trust-row svg{width:18px;height:18px;color:var(--cyan);flex:none} .hero-card{background:linear-gradient(160deg,rgba(17,29,49,.9),rgba(9,14,26,.9)); border:1px solid var(--line-2);border-radius:24px;padding:26px;box-shadow:var(--shadow);backdrop-filter:blur(6px);position:relative;overflow:hidden} .hero-card::before{content:"";position:absolute;top:-40%;right:-30%;width:220px;height:220px;background:var(--grad);filter:blur(70px);opacity:.35} .hero-card h3{font-size:1.15rem;margin-bottom:4px;position:relative} .hero-card .sub{font-size:.86rem;color:var(--muted);margin-bottom:18px;position:relative} .mini-steps{display:flex;flex-direction:column;gap:14px;position:relative} .mini-step{display:flex;gap:14px;align-items:flex-start} .mini-step .n{flex:none;width:34px;height:34px;display:grid;place-items:center;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700; font-size:.9rem;color:#dcecff;background:var(--grad-soft);border:1px solid var(--line-2);clip-path:var(--hex)} .mini-step .t{font-size:.92rem;font-weight:600} .mini-step .d{font-size:.82rem;color:var(--muted)} .hero-card .btn{width:100%;justify-content:center;margin-top:20px;position:relative} /* pulse line */ .pulse-line{width:100%;height:34px;margin:6px 0 0} .pulse-line path{stroke:url(#pg);stroke-width:2.5;fill:none;stroke-linecap:round; stroke-dasharray:600;stroke-dashoffset:600;animation:draw 3.2s ease forwards infinite} @keyframes draw{0%{stroke-dashoffset:600}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-600}} /* ---------- Marquee ---------- */ .marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(13,22,38,.5),transparent);padding:20px 0;overflow:hidden;position:relative;z-index:2} .marquee .lbl{text-align:center;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .mq-track{display:flex;gap:52px;width:max-content;animation:mq 32s linear infinite} .mq-track span{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:1.15rem;color:#4d6488;white-space:nowrap;letter-spacing:.04em} .marquee:hover .mq-track{animation-play-state:paused} @keyframes mq{to{transform:translateX(-50%)}} /* ---------- Section head ---------- */ .sec-head{max-width:680px;margin-bottom:52px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head h2{font-size:clamp(2rem,4vw,3rem);margin:16px 0 14px} .sec-head p{color:var(--muted);font-size:1.05rem} /* ---------- Compare ---------- */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:22px} .cmp{border-radius:22px;padding:32px;border:1px solid var(--line);position:relative;overflow:hidden} .cmp.old{background:linear-gradient(160deg,rgba(30,16,20,.6),rgba(18,12,16,.5));border-color:rgba(255,107,107,.18)} .cmp.new{background:linear-gradient(160deg,rgba(13,26,50,.75),rgba(9,16,30,.7));border-color:var(--line-2)} .cmp.new::before{content:"";position:absolute;top:-30%;right:-20%;width:220px;height:220px;background:var(--grad);filter:blur(80px);opacity:.28} .cmp .tag{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:.95rem;margin-bottom:20px;position:relative} .cmp.old .tag{color:#ff9b9b} .cmp.new .tag{color:var(--cyan)} .cmp ul{list-style:none;display:flex;flex-direction:column;gap:15px;position:relative} .cmp li{display:flex;gap:13px;align-items:flex-start;font-size:1rem;color:#dbe6f5} .cmp li svg{width:22px;height:22px;flex:none;margin-top:1px} .cmp.old li svg{color:var(--danger)} .cmp.new li svg{color:#25d366} .cmp.old li{color:#c4b3b6} .vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5; width:58px;height:58px;display:none} /* ---------- Steps ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s} .step{background:linear-gradient(165deg,rgba(15,25,43,.7),rgba(9,14,26,.6));border:1px solid var(--line); border-radius:20px;padding:30px 24px;position:relative;transition:.3s;overflow:hidden} .step:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)} .step .num{width:56px;height:56px;display:grid;place-items:center;clip-path:var(--hex); background:var(--grad);color:#00122e;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:800;font-size:1.35rem;margin-bottom:20px; box-shadow:0 10px 26px -8px var(--glow)} .step h3{font-size:1.18rem;margin-bottom:8px} .step p{font-size:.94rem;color:var(--muted)} .step .bignum{position:absolute;right:14px;top:2px;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:800;font-size:4.5rem; color:rgba(255,255,255,.03);line-height:1} /* ---------- Services ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .svc{background:linear-gradient(165deg,rgba(15,25,43,.65),rgba(9,14,26,.55));border:1px solid var(--line); border-radius:20px;padding:32px 28px;transition:.3s;position:relative;overflow:hidden} .svc::after{content:"";position:absolute;inset:0;border-radius:20px;padding:1px;background:var(--grad); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s} .svc:hover{transform:translateY(-6px)} .svc:hover::after{opacity:1} .svc:hover{box-shadow:var(--shadow)} .svc .ic{width:60px;height:60px;display:grid;place-items:center;clip-path:var(--hex); background:var(--grad-soft);border:1px solid var(--line-2);margin-bottom:20px} .svc .ic svg{width:28px;height:28px;color:var(--cyan)} .svc h3{font-size:1.22rem;margin-bottom:10px} .svc p{font-size:.95rem;color:var(--muted);margin-bottom:16px} .svc .tags{display:flex;flex-wrap:wrap;gap:8px} .svc .tags span{font-size:.76rem;padding:5px 11px;border-radius:40px;background:rgba(255,255,255,.04); border:1px solid var(--line);color:#b9c8de} /* ---------- Differentials band ---------- */ .diff-band{background:linear-gradient(160deg,rgba(13,22,38,.7),rgba(9,14,26,.6));border:1px solid var(--line); border-radius:28px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr} .diff-img{position:relative;min-height:420px;background:linear-gradient(155deg,#16294a,#0a1322)} .diff-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .diff-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(9,14,26,.6)),linear-gradient(0deg,rgba(9,14,26,.5),transparent 50%)} .diff-content{padding:clamp(30px,4vw,52px)} .diff-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:30px} .diff-item .ic{width:48px;height:48px;display:grid;place-items:center;clip-path:var(--hex);background:var(--grad); margin-bottom:14px;box-shadow:0 8px 22px -8px var(--glow)} .diff-item .ic svg{width:24px;height:24px;color:#00122e} .diff-item h4{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1.05rem;margin-bottom:5px} .diff-item p{font-size:.88rem;color:var(--muted)} /* ---------- Stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center} .stat{padding:30px 18px;border:1px solid var(--line);border-radius:20px; background:linear-gradient(165deg,rgba(15,25,43,.55),rgba(9,14,26,.45))} .stat .v{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:800;font-size:clamp(2.2rem,4vw,3.1rem);line-height:1} .stat .l{font-size:.9rem;color:var(--muted);margin-top:8px} /* ---------- Coverage ---------- */ .cov{display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center} .cov-map{border:1px solid var(--line-2);border-radius:22px;overflow:hidden;position:relative;box-shadow:var(--shadow);min-height:360px;background:linear-gradient(155deg,#16294a,#0a1322)} .cov-map iframe{width:100%;height:100%;min-height:360px;border:0;filter:grayscale(.3) contrast(1.05) brightness(.85)} .cov-map::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px rgba(5,8,15,.9); background:linear-gradient(0deg,rgba(5,8,15,.35),transparent 55%)} .cov-tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 28px} .cov-tags span{font-size:.9rem;padding:9px 16px;border-radius:40px;background:rgba(255,255,255,.04); border:1px solid var(--line);color:#cdd9ec} .cov-tags span.hl{background:var(--grad-soft);border-color:var(--line-2);color:#fff;font-weight:600} /* ---------- Testimonials ---------- */ .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .tst{background:linear-gradient(165deg,rgba(15,25,43,.6),rgba(9,14,26,.5));border:1px solid var(--line); border-radius:20px;padding:30px;position:relative} .tst .stars{display:flex;gap:3px;margin-bottom:16px} .tst .stars svg{width:18px;height:18px;color:#ffc53d} .tst p{font-size:1rem;color:#dbe6f5;margin-bottom:22px} .tst .who{display:flex;align-items:center;gap:12px} .tst .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; font-weight:700;color:#00122e;background:var(--grad)} .tst .who b{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:.98rem;display:block;line-height:1.2} .tst .who small{color:var(--muted);font-size:.82rem} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto} .qa{border:1px solid var(--line);border-radius:16px;margin-bottom:14px;overflow:hidden;background:rgba(15,25,43,.4);transition:.3s} .qa.open{border-color:var(--line-2);background:rgba(15,25,43,.7)} .qa button{width:100%;text-align:left;background:none;border:none;color:var(--txt);cursor:pointer; padding:22px 24px;font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:600;font-size:1.06rem;display:flex;justify-content:space-between;align-items:center;gap:16px} .qa .ic{flex:none;width:26px;height:26px;display:grid;place-items:center;transition:.3s;color:var(--cyan)} .qa.open .ic{transform:rotate(45deg)} .qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease} .qa .ans p{padding:0 24px 22px;color:var(--muted);font-size:.98rem} /* ---------- CTA final ---------- */ .cta{position:relative;overflow:hidden;isolation:isolate;text-align:center} .cta-bg{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 110% at 50% 0,#153058,#0b1830 50%,#05080f)} .cta-bg img{width:100%;height:100%;object-fit:cover} .cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--ink),rgba(5,8,15,.8)),radial-gradient(circle at 50% 40%,rgba(47,107,240,.35),transparent 60%)} .cta h2{font-size:clamp(2.1rem,4.5vw,3.4rem);margin-bottom:18px} .cta p{font-size:1.15rem;color:#cdd9ec;max-width:600px;margin:0 auto 34px} .cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);background:var(--ink2);padding:64px 0 28px;position:relative;z-index:2} .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:44px} .foot-brand img{height:78px;margin-bottom:18px} .foot-brand p{color:var(--muted);font-size:.94rem;max-width:290px} footer h5{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#8ea3c2;margin-bottom:18px} footer ul{list-style:none;display:flex;flex-direction:column;gap:12px} footer ul a,footer ul li{color:#c3d1e6;font-size:.94rem;transition:.2s;display:flex;align-items:center;gap:9px} footer ul a:hover{color:#fff} footer ul svg{width:17px;height:17px;color:var(--cyan);flex:none} .foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between; align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.84rem} .foot-social{display:flex;gap:10px} .foot-social a{width:40px;height:40px;border-radius:12px;border:1px solid var(--line-2);display:grid;place-items:center;transition:.25s} .foot-social a:hover{background:var(--grad-soft);border-color:var(--blue2);transform:translateY(-3px)} .foot-social svg{width:19px;height:19px;color:#cdd9ec} /* ---------- Reveal ---------- */ .reveal{transition:.7s cubic-bezier(.2,.7,.3,1)} .js .reveal{opacity:0;transform:translateY(28px)} .js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ---------- WhatsApp widget ---------- */ .wa-fab{position:fixed;right:22px;bottom:22px;z-index:90;width:64px;height:64px;border-radius:50%; background:linear-gradient(135deg,#25d366,#1fb457);display:grid;place-items:center;cursor:pointer;border:none; box-shadow:0 16px 36px -8px rgba(37,211,102,.6);animation:fab 2.6s infinite} .wa-fab svg{width:34px;height:34px;color:#fff} .wa-fab .ping{position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;animation:ping 2.6s infinite} @keyframes ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.7);opacity:0}} @keyframes fab{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .wa-badge{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;background:var(--danger); color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--ink)} .wa-panel{position:fixed;right:22px;bottom:98px;z-index:91;width:min(360px,calc(100vw - 44px)); border-radius:20px;overflow:hidden;background:#0b1420;border:1px solid var(--line-2);box-shadow:0 30px 70px -20px rgba(0,0,0,.8); transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,.7,.3,1);transform-origin:bottom right} .wa-panel.open{transform:none;opacity:1;pointer-events:auto} .wa-head{background:linear-gradient(135deg,#0f3d2a,#128a4f);padding:16px 18px;display:flex;align-items:center;gap:12px;position:relative} .wa-head img{width:44px;height:44px;border-radius:50%;background:#05261a;padding:3px;object-fit:contain;border:1px solid rgba(255,255,255,.25)} .wa-head b{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:1rem;display:block;color:#fff;line-height:1.2} .wa-head small{font-size:.78rem;color:#c7f5da;display:flex;align-items:center;gap:6px} .wa-head small::before{content:"";width:8px;height:8px;border-radius:50%;background:#7dffb0;box-shadow:0 0 8px #7dffb0} .wa-close{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.15);border:none;color:#fff; width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1} .wa-body{padding:20px 16px;background:#0b1420 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='20' cy='20' r='1.5'/%3E%3C/g%3E%3C/svg%3E")} .wa-bubble{background:#152232;border:1px solid var(--line);border-radius:4px 16px 16px 16px;padding:13px 15px; font-size:.92rem;color:#e4eefb;max-width:88%;margin-bottom:8px;box-shadow:0 6px 16px -8px rgba(0,0,0,.5)} .wa-bubble .nm{font-family:'Sora',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-weight:700;font-size:.78rem;color:#4bd88a;margin-bottom:3px} .wa-time{font-size:.68rem;color:#7d8ea6;margin-bottom:16px;padding-left:4px} .wa-quick{display:flex;flex-direction:column;gap:9px;margin-bottom:14px} .wa-quick button{text-align:left;background:#101b29;border:1px solid var(--line-2);color:#dbe8f8; padding:11px 14px;border-radius:12px;cursor:pointer;font-size:.9rem;font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;transition:.2s;display:flex;align-items:center;gap:9px} .wa-quick button:hover{background:var(--grad-soft);border-color:#25d366;transform:translateX(3px)} .wa-quick button svg{width:16px;height:16px;color:#25d366;flex:none} .wa-start{width:100%;justify-content:center} /* ---------- Responsive ---------- */ @media(max-width:1000px){ .hero-grid{grid-template-columns:1fr;gap:36px} .hero-card{max-width:480px} .svc-grid,.tst-grid{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr)} .diff-band{grid-template-columns:1fr} .diff-img{min-height:280px} .cov{grid-template-columns:1fr;gap:28px} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media(max-width:760px){ .navlinks,.nav-cta .btn-ghost{display:none} .navlinks.mobile{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; background:rgba(5,8,15,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:8px 24px 20px} .navlinks.mobile a{padding:14px 0;border-bottom:1px solid var(--line);width:100%} .burger{display:block} .compare{grid-template-columns:1fr} .tb-right span.hide-sm{display:none} } @media(max-width:540px){ .svc-grid,.tst-grid,.steps,.stats,.diff-list{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .wrap{padding:0 18px} .hero h1{font-size:2.35rem} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none;transition:none} } /* ========================================================================== PORTE — classes que substituíram os style="" inline Mesmos valores do original, byte a byte; só saíram do HTML para cá. ========================================================================== */ .u-branco { color: #fff; } .u-prata { color: #dbe6f5; } .u-veu { background: linear-gradient(180deg, rgba(13,22,38,.4), transparent); } .u-centro-40 { text-align: center; margin-top: 40px; } .u-sem-topo { padding-top: 0; } .u-flex-centro { justify-content: center; display: flex; } .u-titulo-a { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin: 14px 0 10px; } .u-titulo-b { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 14px 0 6px; } .orbe--a { width: 420px; height: 420px; background: var(--blue); top: -120px; left: -100px; } .orbe--b { width: 320px; height: 320px; background: var(--cyan); bottom: -80px; right: 20%; } /* Foto de apoio que ainda não foi adicionada não deixa buraco na página: o bloco tem o próprio gradiente por baixo e a imagem some se faltar. */ img[data-some-se-falhar] { background: transparent; } /* ========================================================================== PÁGINAS INTERNAS (política de privacidade, 404) Reaproveitam os tokens e o cabeçalho do site; só a coluna de leitura é própria, porque texto corrido pede medida menor que layout de seção. ========================================================================== */ .pag-texto{max-width:760px;margin:0 auto;padding:clamp(48px,7vw,90px) 0} .pag-texto h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:10px} .pag-texto .atualizado{color:var(--muted);font-size:.92rem;margin-bottom:40px} .pag-texto h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:40px 0 14px} .pag-texto h3{font-size:1.05rem;margin:26px 0 10px} .pag-texto p,.pag-texto li{color:var(--txt);line-height:1.75} .pag-texto p{margin-bottom:16px} .pag-texto ul,.pag-texto ol{margin:0 0 18px 22px} .pag-texto li{margin-bottom:8px} .pag-texto a{color:var(--cyan)} .pag-texto strong{color:var(--white)} .caixa-destaque{ border:1px solid var(--line-2); background:var(--grad-soft); border-radius:var(--r); padding:22px 24px; margin:26px 0; } .caixa-destaque p:last-child{margin-bottom:0} .pag-centro{text-align:center;min-height:60vh;display:grid;align-content:center} .pag-centro .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px} .erro-numero{ font-family:'Sora',ui-sans-serif,system-ui,sans-serif; font-size:clamp(5rem,16vw,10rem); font-weight:800;line-height:1; background:var(--grad); -webkit-background-clip:text;background-clip:text; color:transparent; } /* Mapa: link, não