/* Estilos compartilhados pelas landing pages por segmento (servicos/*) e usados como base visual do site. Tema claro por padrão, tema escuro via (ver theme.js). */ :root{ --ground:#f5f8ff; --card:#ffffff; --surface-2:#eef3fb; --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --line:#e6ebf3; --line-firm:#d5deec; --blue:#2563eb; --blue-ink:#1d4ed8; --blue-soft:#eff4ff; --green:#10b981; --green-ink:#059669; --green-soft:#e7f8f1; --purple:#7c3aed; --shadow-sm:0 1px 2px rgba(15,23,42,.05), 0 8px 24px -14px rgba(15,23,42,.15); --shadow-lg:0 30px 60px -25px rgba(37,99,235,.28), 0 12px 28px -18px rgba(15,23,42,.18); --r:16px; } :root[data-theme="dark"]{ --ground:#0b1220; --card:#131a26; --surface-2:#1a2432; --ink:#f1f5f9; --ink-2:#cbd5e1; --muted:#8b97a8; --line:#26303f; --line-firm:#33415a; --blue:#5b8cf5; --blue-ink:#93b4fb; --blue-soft:#16233b; --green:#34d399; --green-ink:#6ee7b7; --green-soft:#12302a; --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -16px rgba(0,0,0,.6); --shadow-lg:0 30px 60px -25px rgba(0,0,0,.55), 0 12px 28px -18px rgba(0,0,0,.5); } *{ box-sizing:border-box; margin:0; padding:0; font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; } .material-symbols-outlined{ font-family:'Material Symbols Outlined'; font-weight:normal; font-style:normal; line-height:1; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; } body{ background:var(--ground); color:var(--ink-2); line-height:1.65; min-height:100vh; -webkit-font-smoothing:antialiased; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; } h1,h2,h3{ color:var(--ink); letter-spacing:-.02em; } /* ---------- HEADER ---------- */ header.site{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line); background:rgba(255,255,255,.92); backdrop-filter:blur(10px); position:sticky; top:0; z-index:50; flex-wrap:wrap; } :root[data-theme="dark"] header.site{ background:rgba(11,18,32,.9); } .logo{ font-size:1.15rem; font-weight:800; color:var(--ink); display:flex; align-items:center; gap:.5rem; text-decoration:none; } .logo strong{ color:var(--blue); font-weight:800; } .logo .material-symbols-outlined{ color:var(--blue); font-size:26px; } .wrap{ max-width:900px; margin:0 auto; padding:0 1.5rem; } /* ---------- BOTÕES ---------- */ .btn-primary{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.5rem; background:var(--green); border:none; border-radius:12px; color:#fff; font-weight:700; font-size:1rem; text-decoration:none; cursor:pointer; box-shadow:0 12px 26px -12px rgba(16,185,129,.7); transition:transform .12s ease, background .12s ease; } .btn-primary:hover{ background:var(--green-ink); transform:translateY(-1px); } .btn-outline{ display:inline-flex; align-items:center; gap:.4rem; padding:.6rem 1.15rem; border:1px solid var(--line-firm); border-radius:12px; background:var(--card); color:var(--ink); font-weight:600; text-decoration:none; box-shadow:var(--shadow-sm); transition:transform .12s ease; } .btn-outline:hover{ transform:translateY(-1px); } .theme-toggle{ display:inline-grid; place-items:center; width:38px; height:38px; flex-shrink:0; border:1px solid var(--line-firm); border-radius:11px; background:var(--card); color:var(--ink-2); cursor:pointer; box-shadow:var(--shadow-sm); } .theme-toggle .material-symbols-outlined{ font-size:20px; } .theme-toggle:hover{ color:var(--blue); } /* ---------- HERO ---------- */ .hero{ max-width:900px; margin:0 auto; padding:4.5rem 1.5rem 3rem; text-align:center; } .hero .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; color:var(--green-ink); background:var(--green-soft); border:1px solid transparent; border-radius:999px; padding:.45rem .9rem; margin-bottom:1.1rem; } .hero h1{ font-size:2.7rem; font-weight:900; color:var(--ink); line-height:1.12; margin-bottom:1.1rem; } .hero h1 span{ color:var(--green); } .hero p.lead{ font-size:1.1rem; max-width:620px; margin:0 auto 2rem; color:var(--ink-2); } .hero .cta-row{ display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; } .hero small.nocard{ display:block; margin-top:1rem; font-size:.82rem; color:var(--muted); } /* ---------- SEÇÕES ---------- */ section.block{ max-width:960px; margin:0 auto; padding:3.5rem 1.5rem; } section.block > h2{ font-size:1.95rem; font-weight:900; color:var(--ink); margin-bottom:.5rem; text-align:center; } section.block > p.sub{ text-align:center; max-width:600px; margin:0 auto 2.25rem; font-size:1.02rem; color:var(--muted); } .seg-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(260px,100%), 1fr)); gap:1.25rem; } .seg-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.5rem; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; } .seg-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); } .seg-card h3{ color:var(--ink); font-size:1.05rem; margin-bottom:.4rem; display:flex; align-items:center; gap:.5rem; } .seg-card h3 .material-symbols-outlined{ color:var(--green-ink); background:var(--green-soft); border-radius:9px; padding:6px; font-size:20px; } .seg-card p{ font-size:.93rem; color:var(--muted); } /* ---------- PASSOS ---------- */ .steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:1.5rem; counter-reset:step; } .step{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:1.6rem; position:relative; box-shadow:var(--shadow-sm); } .step::before{ counter-increment:step; content:counter(step); position:absolute; top:-16px; left:24px; display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--blue), #4f8cff); color:#fff; font-weight:800; font-size:.9rem; box-shadow:0 10px 20px -8px rgba(37,99,235,.6); } .step h3{ color:var(--ink); font-size:1.05rem; margin:.6rem 0 .3rem; } .step p{ font-size:.92rem; color:var(--muted); } /* ---------- FAQ ---------- */ .faq-item{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.2rem 1.15rem; margin-bottom:.75rem; box-shadow:var(--shadow-sm); } .faq-item summary{ cursor:pointer; font-weight:700; color:var(--ink); font-size:1rem; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.95rem 0; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary .material-symbols-outlined{ color:var(--blue); flex-shrink:0; transition:transform .2s; } .faq-item[open] summary .material-symbols-outlined{ transform:rotate(45deg); } .faq-item p{ padding:0 0 1rem; font-size:.93rem; color:var(--muted); } /* ---------- CTA FINAL ---------- */ .cta-final{ background:linear-gradient(135deg, var(--blue), #3f7bff 60%, var(--green)); border-radius:24px; padding:3rem 1.5rem; text-align:center; color:#fff; max-width:960px; margin:2.5rem auto 3.5rem; box-shadow:var(--shadow-lg); } .cta-final h2{ color:#fff; font-size:1.7rem; font-weight:900; margin-bottom:.5rem; } .cta-final p{ margin-bottom:1.4rem; color:rgba(255,255,255,.92); } .cta-final .btn-primary{ background:#fff; color:var(--blue-ink); box-shadow:0 12px 26px -12px rgba(0,0,0,.35); } .cta-final .btn-primary:hover{ background:#f1f5ff; } /* ---------- FOOTER ---------- */ footer.site{ border-top:1px solid var(--line); padding:2.25rem 1.5rem; text-align:center; font-size:.88rem; color:var(--muted); } footer.site a{ color:var(--ink-2); text-decoration:none; } footer.site a:hover{ color:var(--blue); } footer.site .seg-links{ margin-top:.75rem; display:flex; gap:.5rem 1.15rem; flex-wrap:wrap; justify-content:center; } @media (max-width:640px){ .hero h1{ font-size:2rem; } .hero{ padding-top:3rem; } section.block > h2{ font-size:1.6rem; } }