/* ============================================================
   JP WEB — CUSTOMER SITE (jpweb.com.br)
   CAMADA DE TEMA DO CLIENTE (global — todo o site)
   Paletas em :root / html[data-theme], destaques e base dos blocos.
   (substitui a antiga seção "TEMAS" que vivia no geral.css)
   ============================================================ */

/* ============ BASE DOS BLOCOS ============ */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body.menu-open { overflow: hidden; }
.section { box-sizing: border-box; position: relative; padding: 110px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-family:'Manrope',sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow::before { content:''; width: 28px; height: 2px; background: currentColor; }
.section-title { max-width: 760px; margin-top: 17px; font-family:'Manrope',sans-serif; font-size: clamp(36px,4.5vw,64px); line-height: 1.05; letter-spacing: -.045em; }
.section-lead { max-width: 680px; margin-top: 22px; color: var(--muted); font-size: 18px; font-family:'DM Sans',sans-serif; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ============ TEMAS (sol/lua) — variáveis em :root ============ */
:root,
html[data-theme="dark"] {
    --body:#07111f; --surface:#0d1a2b; --surface-2:#111f31; --surface-3:#14263a;
    --text:#f4f8ff; --muted:#9dacc0; --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.18);
    --accent:#3c8cff; --accent-2:#55e4c2; --accent-text:#041326; --shadow:0 28px 80px rgba(0,0,0,.34);
    --hero-glow:rgba(37,113,255,.26); --header:rgba(7,17,31,.80); --field:#0a1727;
    --display:'Manrope',sans-serif; --radius:24px; --button-radius:12px;
}
html[data-theme="light"] {
    --body:#f4f7fb; --surface:#ffffff; --surface-2:#eaf0f8; --surface-3:#dfe8f4;
    --text:#10233e; --muted:#5e6f85; --line:rgba(15,46,83,.12); --line-strong:rgba(15,46,83,.22);
    --accent:#0757c7; --accent-2:#00a781; --accent-text:#ffffff; --shadow:0 24px 70px rgba(28,61,103,.13);
    --hero-glow:rgba(12,96,210,.15); --header:rgba(244,247,251,.88); --field:#f7f9fc;
    --display:'Manrope',sans-serif; --radius:12px; --button-radius:5px;
}

/* ============ Destaques de texto: *palavra* e -palavra- ============ */
.grifo   { color: var(--accent); }
.grifo2  { color: var(--accent-2); }

/* ============ RESPONSIVO base ============ */
@media (max-width: 760px) {
    .section { padding: 78px 0; }
    html { scroll-padding-top: 68px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal { opacity: 1; transform: none; }
}