/* L21 — CSS não-crítico (below-the-fold + mockups + footer + legais). Carregado via rel=preload as=style onload. Tokens/reset/nav/hero vivem inline no do index.html. */ /* ─── Reveal (scroll) ──────────────────────────────────────────────── */ [data-reveal]{opacity:0;transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1;transform:none;transition:none} } /* ─── Ritmo de seção ───────────────────────────────────────────────── */ section{padding:clamp(64px,9vw,128px) 0} section h2{font-size:clamp(28px,4.4vw,52px);margin:14px 0 0;max-width:18ch} .sec-sub{color:var(--ink20);font-size:clamp(15px,1.4vw,18px); margin:20px 0 0;max-width:56ch;line-height:1.65} .eyebrow::before{content:"";display:inline-block;width:22px;height:1px; background:var(--lime-dim);vertical-align:middle;margin-right:10px;opacity:.8} /* ─── Hero art — mockup "cockpit" em CSS puro ──────────────────────── */ .hero-art{perspective:1400px} .scr{ background:linear-gradient(180deg,var(--ink85),var(--ink90)); border:1px solid var(--ink60);border-radius:16px;overflow:hidden; box-shadow:0 40px 80px -32px rgba(0,0,0,.7),0 0 0 1px rgba(184,240,58,.04); transform:rotateY(-9deg) rotateX(3deg);transform-style:preserve-3d} @media (prefers-reduced-motion:reduce){.scr{transform:none}} .scr-bar{display:flex;align-items:center;gap:7px;padding:13px 16px; border-bottom:1px solid var(--ink70);background:var(--ink90)} .scr-bar i{width:9px;height:9px;border-radius:50%;background:var(--ink60);display:block} .scr-bar i:nth-child(2){background:var(--ink50)} .scr-bar i:nth-child(3){background:var(--lime-dim)} .scr-bar b{margin-left:8px;font-family:var(--mono);font-size:10px;font-weight:600; letter-spacing:.14em;color:var(--ink40);text-transform:uppercase} .scr-body{padding:20px;display:grid;gap:14px} .scr-row{display:flex;justify-content:space-between;align-items:baseline} .scr-row b{font-family:var(--serif);font-size:21px;color:var(--ink05)} .scr-row span{font-family:var(--mono);font-size:10px;letter-spacing:.12em; color:var(--lime);text-transform:uppercase} .bars{display:flex;align-items:flex-end;gap:7px;height:84px} .bars i{flex:1;display:block;border-radius:3px 3px 0 0; background:linear-gradient(180deg,var(--ink70),var(--ink80))} .bars i:nth-child(2){height:54%}.bars i:nth-child(1){height:34%} .bars i:nth-child(3){height:72%}.bars i:nth-child(4){height:46%} .bars i:nth-child(5){height:88%;background:linear-gradient(180deg,var(--lime),var(--lime-dim))} .bars i:nth-child(6){height:62%}.bars i:nth-child(7){height:40%} .chips{display:flex;flex-wrap:wrap;gap:7px} .chips em{font-family:var(--mono);font-size:10px;font-style:normal;letter-spacing:.06em; color:var(--ink20);border:1px solid var(--ink60);border-radius:999px;padding:5px 11px} .chips em.on{color:var(--ink95);background:var(--lime);border-color:var(--lime);font-weight:700} .scr-flow{display:flex;align-items:center;gap:6px; border-top:1px solid var(--ink70);padding-top:14px;margin-top:2px} .scr-flow s{flex:1;height:5px;border-radius:3px;background:var(--ink70); text-decoration:none;display:block} .scr-flow s.done{background:var(--lime-dim)} .scr-flow s.now{background:var(--lime);box-shadow:0 0 12px rgba(184,240,58,.5)} /* ─── Pipeline — seção-assinatura ──────────────────────────────────── */ .pipeline{border-top:1px solid var(--ink70); background:linear-gradient(180deg,transparent,rgba(184,240,58,.022),transparent)} .rail{list-style:none;display:grid; grid-template-columns:repeat(6,1fr);gap:0;margin-top:clamp(36px,6vw,64px); counter-reset:none;position:relative} .rail::before{content:"";position:absolute;left:0;right:0;top:34px;height:1px; background:linear-gradient(90deg,transparent,var(--ink60) 12%,var(--ink60) 88%,transparent)} .node{position:relative;padding:0 18px;text-align:left} .node b{display:flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:50%; background:var(--ink90);border:1px solid var(--ink60); font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink40); position:relative;z-index:1;margin-bottom:18px; transition:border-color .4s,color .4s,box-shadow .4s,background .4s} .node span{display:block;font-family:var(--sans);font-weight:700;font-size:15px; color:var(--ink10);margin-bottom:5px;letter-spacing:-.01em} .node em{display:block;font-style:normal;font-size:13px;color:var(--ink40);line-height:1.5} .node.lit b{color:var(--ink95);background:var(--lime);border-color:var(--lime); box-shadow:0 0 0 5px rgba(184,240,58,.12),0 0 22px rgba(184,240,58,.35)} .node.lit span{color:var(--ink05)} @media (prefers-reduced-motion:reduce){ .node b{transition:none}.node.lit b{box-shadow:0 0 0 5px rgba(184,240,58,.12)} } @media(max-width:820px){ .rail{grid-template-columns:1fr 1fr;gap:32px 16px} .rail::before{display:none} } @media(max-width:480px){.rail{grid-template-columns:1fr}} /* ─── Features grid ────────────────────────────────────────────────── */ .features{border-top:1px solid var(--ink70)} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-top:clamp(32px,5vw,56px)} .card{background:var(--ink85);border:1px solid var(--ink60);border-radius:14px; padding:26px 24px;transition:border-color .2s,transform .2s,background .2s} .card:hover{border-color:var(--ink50);transform:translateY(-3px);background:var(--ink80)} .card h3{font-size:20px;color:var(--ink05);margin-bottom:9px} .card p{font-size:14px;color:var(--ink40);line-height:1.6} .card.wide{grid-column:span 3;display:flex;flex-direction:column; justify-content:center;background: linear-gradient(120deg,var(--ink85),var(--ink90));border-color:var(--ink70)} .card.wide h3{font-size:23px}.card.wide p{max-width:62ch} @media(max-width:900px){.grid{grid-template-columns:1fr 1fr}.card.wide{grid-column:span 2}} @media(max-width:600px){.grid{grid-template-columns:1fr}.card.wide{grid-column:span 1}} /* ─── Comparativo ──────────────────────────────────────────────────── */ .compare{border-top:1px solid var(--ink70)} .tbl-scroll{margin-top:clamp(28px,4vw,48px);overflow-x:auto; border:1px solid var(--ink60);border-radius:14px} .tbl{width:100%;border-collapse:collapse;min-width:620px} .tbl th,.tbl td{padding:15px 18px;text-align:center;font-size:14px; border-bottom:1px solid var(--ink70)} .tbl thead th{font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;color:var(--ink40); background:var(--ink90)} .tbl thead th.us,.tbl td.us{color:var(--lime);font-weight:700} .tbl thead th.us{background:rgba(184,240,58,.06)} .tbl tbody td:first-child,.tbl thead th:first-child{text-align:left; color:var(--ink20);font-family:var(--sans)} .tbl td.us{background:rgba(184,240,58,.045);font-size:16px} .tbl tbody tr:last-child td{border-bottom:0;font-weight:700;color:var(--ink10)} .tbl tbody tr:last-child td.us{color:var(--lime)} /* ─── Personas ─────────────────────────────────────────────────────── */ .who{border-top:1px solid var(--ink70)} .persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; margin-top:clamp(32px,5vw,56px)} .persona{border:1px solid var(--ink60);border-radius:14px;padding:28px 24px; background:linear-gradient(180deg,var(--ink85),transparent)} .persona .ptag{font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:var(--lime-dim);margin-bottom:16px} .persona h3{font-size:20px;color:var(--ink05);margin-bottom:10px;line-height:1.2} .persona p:last-child{font-size:14px;color:var(--ink40);line-height:1.6} @media(max-width:820px){.persona-grid{grid-template-columns:1fr}} /* ─── Pricing ──────────────────────────────────────────────────────── */ .pricing{border-top:1px solid var(--ink70)} .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px; margin-top:clamp(32px,5vw,56px);align-items:start} .plan{border:1px solid var(--ink60);border-radius:16px;padding:30px 26px; background:var(--ink85);position:relative} .plan.featured{border-color:var(--lime-dim);background: linear-gradient(180deg,rgba(184,240,58,.06),var(--ink85)); box-shadow:0 24px 60px -34px rgba(184,240,58,.25)} .plan .badge{position:absolute;top:-11px;left:26px;font-family:var(--mono); font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase; color:var(--ink95);background:var(--lime);padding:5px 11px;border-radius:999px} .plan .pn{font-family:var(--mono);font-size:12px;font-weight:600; letter-spacing:.18em;color:var(--ink40)} .plan .pp{font-family:var(--serif);font-size:42px;color:var(--ink05); margin:10px 0 4px;line-height:1} .plan .pp small{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink40)} .plan .pc{font-size:13px;color:var(--lime-dim);font-weight:700;margin-bottom:20px} .plan ul{list-style:none;display:grid;gap:11px;margin-bottom:24px} .plan li{font-size:14px;color:var(--ink20);padding-left:24px;position:relative;line-height:1.45} .plan li::before{content:"";position:absolute;left:0;top:6px;width:13px;height:8px; border-left:2px solid var(--lime);border-bottom:2px solid var(--lime); transform:rotate(-45deg)} .btn.full{width:100%;justify-content:center} .packs{margin-top:22px;text-align:center;font-size:13px;color:var(--ink40); font-family:var(--mono);letter-spacing:.02em} @media(max-width:820px){.plans{grid-template-columns:1fr} .plan.featured{order:-1}} /* ─── Proof / stats ────────────────────────────────────────────────── */ .proof{border-top:1px solid var(--ink70);border-bottom:1px solid var(--ink70); background:var(--ink90);padding:clamp(40px,6vw,72px) 0} .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .stats div{display:flex;flex-direction:column;gap:7px} .stats b{font-family:var(--serif);font-size:clamp(30px,4vw,46px);color:var(--lime)} .stats span{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--ink40)} @media(max-width:680px){.stats{grid-template-columns:1fr 1fr;gap:32px 16px}} /* ─── FAQ ──────────────────────────────────────────────────────────── */ .faq{border-top:1px solid var(--ink70)} .qa{margin-top:clamp(28px,4vw,48px);max-width:760px} .qa details{border-bottom:1px solid var(--ink70)} .qa summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;position:relative; font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink10)} .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";position:absolute;right:6px;top:50%; transform:translateY(-50%);font-family:var(--mono);font-size:20px;color:var(--lime); transition:transform .2s} .qa details[open] summary::after{content:"–"} .qa summary:hover{color:var(--ink05)} .qa p{padding:0 0 24px;font-size:14.5px;color:var(--ink40);line-height:1.65;max-width:64ch} /* ─── CTA final ────────────────────────────────────────────────────── */ .cta-final{border-top:1px solid var(--ink70);text-align:center; background:radial-gradient(120% 90% at 50% 120%,rgba(184,240,58,.08),transparent 60%)} .cta-final h2{margin:0 auto;max-width:18ch} .cta-final p{color:var(--ink20);font-size:clamp(15px,1.5vw,18px);margin:18px auto 32px;max-width:46ch} .btn.lg{padding:17px 34px;font-size:15px} /* ─── Footer ───────────────────────────────────────────────────────── */ .foot{border-top:1px solid var(--ink70);background:var(--ink100); padding:clamp(48px,6vw,72px) 0 28px} .foot-in{display:grid;grid-template-columns:1.4fr 2fr;gap:48px} .foot-brand img{margin-bottom:14px} .foot-brand p{font-family:var(--serif);font-size:17px;color:var(--ink20);max-width:24ch} .foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .foot-cols .fh{font-family:var(--mono);font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--ink40);margin-bottom:16px} .foot-cols a{display:block;font-size:14px;color:var(--ink40); padding:6px 0;transition:color .15s} .foot-cols a:hover{color:var(--lime)} .foot-base{display:flex;justify-content:space-between;align-items:center; margin-top:48px;padding-top:24px;border-top:1px solid var(--ink80); font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink40)} @media(max-width:780px){.foot-in{grid-template-columns:1fr;gap:36px} .foot-cols{grid-template-columns:1fr 1fr} .foot-base{flex-direction:column;gap:10px;text-align:center}} /* ─── Páginas legais (stub) ────────────────────────────────────────── */ .legal{max-width:760px;margin:0 auto;padding:clamp(56px,9vw,110px) var(--gut)} .legal a.back{font-family:var(--mono);font-size:11px;letter-spacing:.1em; text-transform:uppercase;color:var(--lime-dim)} .legal h1{font-size:clamp(30px,5vw,48px);margin:20px 0 8px} .legal .upd{font-family:var(--mono);font-size:11px;color:var(--ink50); letter-spacing:.08em;margin-bottom:36px} .legal h2{font-size:21px;color:var(--ink10);margin:36px 0 12px} .legal p,.legal li{font-size:14.5px;color:var(--ink40);line-height:1.75} .legal ul{padding-left:22px;margin:12px 0} .legal .note{border:1px solid var(--ink60);border-left:3px solid var(--ember); border-radius:8px;padding:16px 18px;margin:28px 0;font-size:13px;color:var(--ink40)} /* legais bilíngues — alterna por html[data-lang] */ .lang-en{display:none} html[data-lang=en] .lang-pt{display:none} html[data-lang=en] .lang-en{display:block} .legal nav.lback{display:flex;align-items:center;justify-content:space-between; max-width:760px;margin:0 auto;padding:18px var(--gut)} .legal nav.lback img{height:24px;width:auto}