/* ============================================================ Sempre Seguros — landing de candidatura à franquia site.css (usa tokens.css). Marca pública: SEMPRE SEGUROS. ============================================================ */ /* ---------- Reveal base (motion gated por .js-motion no ) ---------- */ .js-motion .reveal{opacity:0;transform:translateY(26px)} .js-motion .reveal.in{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)} .js-motion .reveal.d1{transition-delay:.08s}.js-motion .reveal.d2{transition-delay:.16s} .js-motion .reveal.d3{transition-delay:.24s}.js-motion .reveal.d4{transition-delay:.32s} /* ---------- Ícones SVG (sem emoji) ---------- */ .ico{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .icon-sprite{position:absolute;width:0;height:0;overflow:hidden} /* ---------- NAV pílula flutuante ---------- */ .nav{position:fixed;left:50%;top:calc(18px + env(safe-area-inset-top));translate:-50% 0;z-index:60; width:min(1120px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between; gap:16px;padding:10px 10px 10px 20px;border-radius:999px; background:rgba(12,12,15,.62);border:1px solid var(--line);backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 12px 40px -18px rgba(0,0,0,.8);transition:transform .5s var(--ease),opacity .4s var(--ease)} .nav.hide{transform:translate(-50%,-140%)} .nav .logo{height:34px;width:auto;display:block} .nav .nlinks{display:flex;gap:26px;font-size:var(--step--1);color:var(--text-soft);font-weight:500} .nav .nlinks a:hover{color:var(--text)} .ncta{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:.95rem; color:#231000;padding:.55em 1.15em;border-radius:999px; background:linear-gradient(135deg,var(--orange-vibrant),var(--orange-grad));white-space:nowrap; box-shadow:0 10px 26px -12px rgba(245,130,31,.7)} .nav .burger{display:none} @media(max-width:820px){ .nav{padding:10px 12px} .nav .nlinks{display:none} .nav .logo{height:26px} .nav .ncta{font-size:.82rem;padding:.5em .95em} } /* ---------- HERO shared ---------- */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden; padding:86px 0 64px} .hero .wrap{position:relative;z-index:4;width:100%;margin-top:auto;margin-bottom:auto} /* logo grande centralizada no topo do hero */ .herologo{position:relative;z-index:6;display:flex;justify-content:center;margin:2px 0 6px} .herologo .brandlock{font-size:clamp(1.5rem,2.3vw,2.4rem);filter:drop-shadow(0 8px 34px rgba(245,130,31,.4))} /* scroll-cue */ .scrollcue{position:absolute;left:50%;bottom:22px;translate:-50%;z-index:6;text-align:center; font-family:var(--font-body);font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.62rem;color:var(--text-mute)} .scrollcue b{display:block;margin-top:7px;font-size:1rem;color:var(--orange-vibrant);animation:cuebob 1.8s var(--ease) infinite} @keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* filme: elementos aparecem conforme o scroll — SÓ no desktop (mobile mostra tudo) */ @media(min-width:821px){.js-motion .hero[data-film] .film{opacity:0}} /* hero mobile: compacto, fluido do topo, logo com folga da nav */ @media(max-width:820px){ .hero[data-film]{min-height:auto;padding-top:98px;padding-bottom:38px;justify-content:flex-start} .hero[data-film] .wrap{margin-top:0;margin-bottom:0} .herologo{margin-top:22px;margin-bottom:16px} .hero .scene3d{height:min(40vh,300px)} .hero .device-wrap{height:min(52vh,400px)} .scrollcue{display:none} } .hero .pill{margin-bottom:26px} .hero h1{font-family:var(--font-display);text-transform:uppercase;color:var(--text); font-size:clamp(1.9rem,1.35rem+2.1vw,3.1rem);line-height:.97;max-width:17ch} .hero h1 em{font-style:normal;color:var(--orange-vibrant)} .hero .sub{margin-top:22px;font-size:var(--step-1);color:var(--text-soft);line-height:1.5;max-width:46ch} .hero .sub b{color:var(--text);font-weight:600} .hero .cta-row{margin-top:30px;display:flex;align-items:center;gap:22px;flex-wrap:wrap} .hero .micro{max-width:26ch} /* cenas 3D no HERO são menores (senão empurram o CTA pra baixo da dobra) */ .hero .scene3d{height:min(54vh,440px)} .hero .device-wrap{height:min(62vh,520px)} /* fundo com anéis (referência à capa do manual) — variante editorial */ .rings{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1} .rings svg{position:absolute;opacity:.5} .glowline{position:absolute;top:0;width:1px;height:100%;background:linear-gradient(180deg,transparent,rgba(245,130,31,.5),transparent)} /* stat bar */ .statbar{margin-top:26px;display:flex;gap:34px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:16px} .statbar .s b{font-family:var(--font-display);font-size:var(--step-2);color:var(--text);display:block;line-height:1} .statbar .s b em{font-style:normal;color:var(--orange-vibrant)} .statbar .s span{font-size:var(--step--1);color:var(--text-mute);text-transform:uppercase;letter-spacing:.04em} /* ---------- 3D: HEXÁGONO da marca (extrusão) ---------- */ .scene3d{position:relative;height:min(72vh,600px);perspective:1150px;display:grid;place-items:center} .scene3d .halo{position:absolute;width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(245,130,31,.30),transparent 62%);filter:blur(26px)} .scene3d .floor{position:absolute;bottom:9%;width:300px;height:64px; background:radial-gradient(ellipse,rgba(0,0,0,.6),transparent 70%);filter:blur(9px)} .rig{position:relative;width:280px;height:320px;transform-style:preserve-3d; transform:rotateX(10deg) rotateY(-34deg)} .prism{position:absolute;inset:0;transform-style:preserve-3d} .slab{position:absolute;left:50%;top:50%;width:262px;height:300px;translate:-50% -50%; clip-path:polygon(50% 0,100% 26%,100% 74%,50% 100%,0 74%,0 26%); background:linear-gradient(150deg,var(--orange-grad),var(--orange-solid) 55%,#742c0f); transform:translateZ(calc(var(--i) * -5px));filter:brightness(calc(1 - var(--i) * .035))} .slab.front{background:linear-gradient(150deg,#ffd6a0,var(--orange-vibrant) 45%,var(--orange-solid)); box-shadow:0 0 95px -6px rgba(245,130,31,.6)} .keyhole{position:absolute;left:50%;top:47%;translate:-50% -50%;width:74px;height:104px;display:flex;flex-direction:column;align-items:center} .keyhole .kc{width:56px;height:56px;border-radius:50%;background:#170a02} .keyhole .ks{width:24px;height:54px;background:#170a02;margin-top:-8px;clip-path:polygon(50% 0,100% 100%,0 100%)} .chip{position:absolute;font-family:var(--font-body);font-weight:600;font-size:.82rem;color:var(--text); background:rgba(16,16,20,.86);border:1px solid var(--line-strong);border-radius:12px;padding:10px 14px; backdrop-filter:blur(10px);box-shadow:var(--shadow);white-space:nowrap} .chip b{color:var(--orange-vibrant)} .chip.c1{right:-6%;top:6%;transform:translateZ(150px)} .chip.c2{left:-12%;bottom:12%;transform:translateZ(120px)} /* ---------- 3D: CELULAR (prova viva) ---------- */ .device-wrap{position:relative;display:grid;place-items:center;height:min(84vh,680px);perspective:1400px} .device-wrap .glowc{position:absolute;width:70%;height:70%;background:radial-gradient(circle,rgba(245,130,31,.28),transparent 65%);filter:blur(30px)} .phone{position:relative;width:300px;height:610px;border-radius:44px;background:#0a0a0c;border:10px solid #1c1c22; box-shadow:0 60px 130px -30px #000,inset 0 0 0 1px rgba(255,255,255,.05);transform-style:preserve-3d; transform:rotateY(-14deg) rotateX(4deg);will-change:transform} /* notificações de venda entrando ao vivo */ @keyframes noteIn{from{opacity:0;transform:translateY(-18px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)}} .js-motion .note--new{animation:noteIn .6s var(--ease)} .phone .notch{position:absolute;left:50%;top:14px;translate:-50%;width:104px;height:26px;background:#000;border-radius:14px;z-index:5;transform:translateZ(2px)} .screen{position:absolute;inset:8px;border-radius:36px;overflow:hidden;background:linear-gradient(180deg,#17110b,#0b0b0d);padding:44px 15px 18px;transform-style:preserve-3d} .scr-h{display:flex;justify-content:space-between;align-items:center;padding:0 4px 14px} .scr-h .logo{height:20px} .scr-h .d{font-size:.72rem;color:var(--text-mute)} .earn{background:linear-gradient(135deg,var(--orange-solid),var(--orange-grad));color:#1a0c02;border-radius:18px;padding:14px 16px;margin:2px 0 13px;box-shadow:var(--glow);transform:translateZ(40px)} .earn span{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85} .earn b{display:block;font-family:var(--font-display);font-size:1.9rem;line-height:1.05;margin-top:2px} .notes{transform:translateZ(24px)} .note{display:flex;gap:11px;align-items:center;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)); border:1px solid var(--line);border-radius:14px;padding:10px 11px;margin-bottom:9px} .note .ic{width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;color:var(--orange-vibrant); background:linear-gradient(150deg,rgba(245,130,31,.22),rgba(245,130,31,.06));border:1px solid rgba(245,130,31,.28)} .note .ic .ico{width:19px;height:19px} .note .tx{display:flex;flex-direction:column;line-height:1.22;min-width:0} .note .tx b{color:var(--text);font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .note .tx small{color:var(--text-mute);font-size:.7rem} .note .val{margin-left:auto;font-weight:700;color:var(--orange-grad);font-size:.82rem;white-space:nowrap} .toast{position:absolute;right:-30px;top:44px;background:rgba(18,18,22,.92);border:1px solid var(--line-strong); border-radius:14px;padding:11px 14px;font-size:.78rem;box-shadow:var(--shadow);backdrop-filter:blur(10px);z-index:6;transform:translateZ(90px)} .toast b{color:var(--orange-vibrant)} .earn b{transition:none} /* ---------- SECTION base ---------- */ section{position:relative} .band{padding:clamp(54px,6.2vw,90px) 0} /* ---------- Lockup de marca (símbolo transparente + wordmark Anton) ---------- */ .brandlock{display:inline-flex;align-items:center;gap:.44em;font-family:var(--font-display);text-transform:uppercase;line-height:1} .brandlock .sym{height:1.18em;width:auto;flex:0 0 auto;display:block} .brandlock .wm{display:flex;flex-direction:column;line-height:.84} .brandlock .wm b{color:var(--orange-vibrant);font-weight:400;letter-spacing:.005em} .brandlock .wm i{font-style:normal;color:var(--text);letter-spacing:.30em;font-size:.6em;opacity:.92} /* acento de régua laranja sob eyebrows / detalhes */ .eyebrow{display:inline-flex;align-items:center;gap:.7em} .eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--orange-vibrant),transparent)} /* divisor laranja entre dobras */ .band + .band{position:relative} .orange-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,rgba(245,130,31,.5),transparent)} .eyebrow{font-family:var(--font-body);font-weight:600;text-transform:uppercase;letter-spacing:.22em; font-size:var(--step--1);color:var(--orange-vibrant);margin-bottom:18px} .h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,1.3rem+1.4vw,2.4rem);line-height:1.02;max-width:22ch} .h2 em{font-style:normal;color:var(--orange-vibrant)} .lead{margin-top:20px;font-size:var(--step-1);color:var(--text-soft);max-width:56ch;line-height:1.55} .lead b{color:var(--text);font-weight:600} /* transições por gradiente entre dobras (nunca corte seco) */ .fade-top{background:linear-gradient(180deg,var(--ink-950),var(--ink-900))} .fade-warm{background:linear-gradient(180deg,var(--ink-900),#140d08 60%,var(--ink-950))} /* dores — dobras coladas, uma ideia por tela */ .pains .pain{min-height:66svh;display:flex;flex-direction:column;justify-content:center; border-top:1px solid var(--line)} .pains .pain:first-child{border-top:0} .pain .big{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.7rem,1.3rem+1.9vw,2.9rem);line-height:1;max-width:18ch} .pain .big em{font-style:normal;color:var(--orange-vibrant)} .pain .small{margin-top:18px;font-size:var(--step-1);color:var(--text-mute);max-width:48ch} .pain .idx{font-family:var(--font-display);color:var(--orange-solid);opacity:.5;font-size:var(--step-1)} /* reframe / "não é culpa sua" */ .reframe{background:linear-gradient(135deg,#1a0f05,var(--ink-950));border:1px solid var(--line);border-radius:var(--radius-lg); padding:clamp(30px,5vw,60px)} .reframe .q{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.5rem,1.2rem+1.3vw,2.2rem);line-height:1.04;max-width:24ch} .reframe .q em{font-style:normal;color:var(--orange-vibrant)} /* ---------- cards genéricos ---------- */ .grid{display:grid;gap:18px} .g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}} .card{background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius);padding:26px;transition:border-color .4s,transform .4s var(--ease)} .card:hover{border-color:var(--line-strong);transform:translateY(-3px)} .card .ci{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;color:var(--orange-vibrant); background:linear-gradient(150deg,rgba(245,130,31,.18),rgba(245,130,31,.04));border:1px solid rgba(245,130,31,.22)} .card .ci .ico{width:24px;height:24px} .card h3{font-family:var(--font-body);font-weight:700;font-size:var(--step-1);margin-bottom:8px} .card p{color:var(--text-mute);font-size:var(--step-0)} /* ---------- Números / oferta ---------- */ .numbers{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center} @media(max-width:900px){.numbers{grid-template-columns:1fr;gap:30px}} .numbers2{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center} .numleft{min-width:0} .numviz{min-width:0} @media(max-width:900px){.numbers2{grid-template-columns:1fr;gap:24px}.numviz{order:-1}.numviz .scene3d{height:min(44vh,340px)}} .invoice{background:var(--ink-850);border:1px solid var(--line-strong);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow)} .invoice .row{display:flex;justify-content:space-between;gap:16px;padding:15px 24px;border-bottom:1px solid var(--line);font-size:var(--step-0)} .invoice .row span{color:var(--text-soft)}.invoice .row b{color:var(--text);white-space:nowrap} .invoice .row.total{background:linear-gradient(135deg,rgba(245,130,31,.16),transparent);border-bottom:0} .invoice .row.total b,.invoice .row.total span{font-family:var(--font-display);font-size:var(--step-1);color:var(--text)} .invoice .row.total b{color:var(--orange-vibrant)} .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .kpi{background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius);padding:22px} .kpi b{font-family:var(--font-display);font-size:var(--step-3);color:var(--orange-vibrant);display:block;line-height:1} .kpi span{font-size:var(--step--1);color:var(--text-mute);text-transform:uppercase;letter-spacing:.03em} .disclaimer{margin-top:22px;font-size:var(--step--1);color:var(--text-mute);border-left:2px solid var(--orange-solid);padding-left:14px;max-width:70ch;line-height:1.5} /* ---------- Laranja reinando: brilhos e acentos ---------- */ .kpi{border-color:rgba(245,130,31,.22);background:linear-gradient(160deg,var(--ink-850),rgba(245,130,31,.05))} .kpi b{filter:drop-shadow(0 0 26px rgba(245,130,31,.35))} .invoice{box-shadow:var(--shadow),0 0 70px -34px rgba(245,130,31,.5)} .invoice .row.total{background:linear-gradient(135deg,rgba(245,130,31,.22),transparent)} .reframe{border-left:3px solid var(--orange-vibrant);box-shadow:inset 0 0 60px -30px rgba(245,130,31,.5)} .card:hover{border-color:rgba(245,130,31,.4)} .card:hover .ci{background:linear-gradient(150deg,rgba(245,130,31,.32),rgba(245,130,31,.1));border-color:rgba(245,130,31,.5)} .step::before{box-shadow:0 12px 28px -10px rgba(245,130,31,.7)} .statbar .s b em{filter:drop-shadow(0 0 20px rgba(245,130,31,.4))} /* brilho laranja de fundo em seções-chave */ .band.glow::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1; background:radial-gradient(60% 50% at 50% 0%,rgba(245,130,31,.10),transparent 70%)} .band{position:relative} /* fatura: linhas entram escalonadas ao rolar */ .js-motion .invoice .row{opacity:0;transform:translateX(-16px)} .js-motion .invoice.in .row{animation:rowIn .55s var(--ease) forwards} .js-motion .invoice.in .row:nth-child(1){animation-delay:.04s} .js-motion .invoice.in .row:nth-child(2){animation-delay:.11s} .js-motion .invoice.in .row:nth-child(3){animation-delay:.18s} .js-motion .invoice.in .row:nth-child(4){animation-delay:.25s} .js-motion .invoice.in .row:nth-child(5){animation-delay:.32s} .js-motion .invoice.in .row:nth-child(6){animation-delay:.42s} @keyframes rowIn{to{opacity:1;transform:none}} /* barras de recorrência (base) */ .recur{display:flex;gap:14px;align-items:stretch;height:210px;margin-top:10px} .recur .yr{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px} .recur .bar{width:100%;border-radius:10px 10px 0 0;background:linear-gradient(180deg,var(--orange-vibrant),var(--orange-solid));min-height:8px} .recur .yr small{color:var(--text-mute);font-size:.72rem} .recur .yr b{font-size:.8rem;color:var(--text-soft)} /* barras de recorrência crescem ao rolar */ .js-motion .recur .bar{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease)} .js-motion .recur.in .bar{transform:scaleY(1)} .js-motion .recur.in .yr:nth-child(2) .bar{transition-delay:.08s} .js-motion .recur.in .yr:nth-child(3) .bar{transition-delay:.16s} .js-motion .recur.in .yr:nth-child(4) .bar{transition-delay:.24s} .js-motion .recur.in .yr:nth-child(5) .bar{transition-delay:.32s} /* ---------- Prova / Manancial ---------- */ .proof{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center} @media(max-width:900px){.proof{grid-template-columns:1fr}} .proof .badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:var(--step--1);color:var(--text-soft);margin-bottom:20px} .badge img{height:18px;width:auto} .badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;font-size:var(--step--1);color:var(--text-soft)} /* ---------- Seleção "não é pra todo mundo" ---------- */ .select-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:700px){.select-grid{grid-template-columns:1fr}} .checklist{list-style:none;padding:0;margin:0} .checklist li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--step-0);color:var(--text-soft)} .checklist li .m{font-weight:800;flex:0 0 auto} .checklist.yes li .m{color:#5fd08a}.checklist.no li .m{color:#e0592a} /* ---------- Passo a passo ---------- */ .steps{counter-reset:st;display:grid;gap:14px} .step{display:flex;gap:18px;align-items:flex-start;background:var(--ink-850);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px} .step::before{counter-increment:st;content:counter(st);font-family:var(--font-display);font-size:1.4rem;color:#231000; width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px; background:linear-gradient(135deg,var(--orange-vibrant),var(--orange-grad))} .step h3{font-family:var(--font-body);font-weight:700;font-size:var(--step-1);margin-bottom:4px} .step p{color:var(--text-mute);font-size:var(--step-0)} /* ---------- FORM candidatura ---------- */ .apply{position:relative} .applybox{background:linear-gradient(180deg,var(--ink-850),var(--ink-900));border:1px solid var(--line-strong); border-radius:var(--radius-lg);padding:clamp(26px,4vw,48px);box-shadow:var(--shadow);max-width:720px;margin-inline:auto} .applybox .htag{font-family:var(--font-display);text-transform:uppercase;font-size:var(--step-2);line-height:1;text-align:center} .applybox .htag em{font-style:normal;color:var(--orange-vibrant)} .applybox .hsub{text-align:center;color:var(--text-mute);margin:12px auto 26px;max-width:48ch} .field{margin-bottom:15px} .field label{display:block;font-size:var(--step--1);font-weight:600;color:var(--text-soft);margin-bottom:7px;letter-spacing:.02em} .field input,.field select{width:100%;background:var(--ink-950);border:1px solid var(--line-strong);border-radius:12px; padding:14px 15px;color:var(--text);font-family:var(--font-body);font-size:var(--step-0);transition:border-color .3s} .field input:focus,.field select:focus{outline:none;border-color:var(--orange-vibrant)} .field input::placeholder{color:#5c5c62} .field.two{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:560px){.field.two{grid-template-columns:1fr}} .hp{position:absolute;left:-5000px;top:-5000px;width:1px;height:1px;overflow:hidden} .apply .cta{width:100%;justify-content:center;margin-top:10px} .apply .formmicro{text-align:center;font-size:var(--step--1);color:var(--text-mute);margin-top:14px} .err{color:#ff8a6b;font-size:var(--step--1);margin-top:6px;display:none} .field.invalid .err{display:block} .field.invalid input,.field.invalid select{border-color:#ff8a6b} /* obrigado */ .thanks{display:none;text-align:center;padding:20px 0} .thanks.show{display:block;animation:pop .6s var(--ease)} @keyframes pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}} .thanks .mark{width:74px;height:74px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;font-size:2rem; background:linear-gradient(135deg,var(--orange-vibrant),var(--orange-grad));color:#231000} .thanks h3{font-family:var(--font-display);text-transform:uppercase;font-size:var(--step-2)} .thanks p{color:var(--text-soft);max-width:44ch;margin:14px auto 0} .form-live.hide{display:none} /* ---------- Footer (site completo: marca em destaque + colunas) ---------- */ .footer{border-top:1px solid var(--line);padding:60px 0 34px;color:var(--text-mute);font-size:var(--step--1); background:linear-gradient(180deg,var(--ink-950),#0a0a0c)} .footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;align-items:start;margin-bottom:34px} @media(max-width:820px){.footer .fgrid{grid-template-columns:1fr;gap:30px}} .footer .fbrand .brandlock{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem); filter:drop-shadow(0 8px 30px rgba(245,130,31,.35))} .footer .fbrand p{margin-top:16px;max-width:38ch;line-height:1.6;color:var(--text-mute)} .footer .fbrand .ncta{display:inline-block;margin-top:20px} .footer h4{color:var(--text);font-family:var(--font-body);font-weight:700;font-size:.9rem; text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px} .footer .fcol a{display:flex;align-items:center;gap:9px;color:var(--text-mute);margin-bottom:11px;transition:color .3s} .footer .fcol a:hover{color:var(--orange-vibrant)} .footer .fcol a .ico{width:17px;height:17px;flex:0 0 auto;color:var(--orange-vibrant)} .footer .legal{max-width:78ch;margin-top:22px;line-height:1.6;color:#6b6b70;border-top:1px solid var(--line);padding-top:20px} /* ---------- CTA fixo mobile ---------- */ .mcta{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:55; display:none;transform:translateY(160%);transition:transform .5s var(--ease)} .mcta.show{transform:none} .mcta a{display:flex;justify-content:center;width:100%} @media(max-width:820px){.mcta{display:block}} /* ---------- hero grids ---------- */ .hero.editorial .wrap{max-width:var(--maxw)} .hero.split .grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:30px;align-items:center} @media(max-width:920px){ .hero.split .grid2{grid-template-columns:1fr} .device-wrap{height:min(64vh,520px)} .scene3d{height:min(52vh,420px)} } /* guardas mobile: glows/chips/3D decorativos não podem gerar scroll horizontal */ @media(max-width:600px){ .scene3d,.device-wrap,.hero .visual,.hero .hvisual,.miniproof .device-wrap,.mark-scene .scene3d{max-width:100%;overflow-x:clip} .scene3d .halo{width:300px;height:300px} .device-wrap .glowc{width:82%;height:60%} .chip{display:none} .toast{right:0;top:16px;font-size:.72rem;padding:9px 11px} .rings svg{max-width:120vw} .hero{padding-top:104px} .hero h1{font-size:clamp(2.1rem,1.4rem+4vw,3rem)!important} .statbar{gap:22px} .statbar .s b{font-size:var(--step-2)} }