/* LeadMapsPro — public.css
   Landing, navbar pública, hero, secciones, pricing, CTA, footer, login.
   Mobile-first, iPhone 390px. Requiere leadmapspro-base.css. */

html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 22px; width: 100%; }

/* ── Header / nav ───────────────────────────────────── */
.top {
    background:
        radial-gradient(840px 380px at 80% -10%, rgba(99,102,241,.34), transparent 60%),
        radial-gradient(640px 320px at 8% 120%, rgba(168,85,247,.22), transparent 60%),
        var(--dark);
    color: #fff; position: relative;
}
.nav { position: relative; z-index: 50; max-width: 1180px; margin: 0 auto; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; }
.logo {
    width: 42px; height: 42px; border-radius: 13px; flex: none;
    background: linear-gradient(140deg, #6366f1, #a855f7);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff;
    box-shadow: 0 10px 26px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-title { font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: -.01em; color: #fff; }
.brand-sub { color: #9aa6bf; font-size: 11px; margin-top: 3px; }
.links { display: flex; align-items: center; gap: 6px; }
.links a { padding: 9px 13px; font-size: 14px; color: #cbd5e1; font-weight: 600; border-radius: 10px; transition: color .14s, background .14s; }
.links a:hover { color: #fff; background: rgba(255,255,255,.07); }

.nav-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; cursor: pointer; color: #fff; }
.nav-burger svg { width: 22px; height: 22px; }

/* ── Buttons ────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 12px 20px; border-radius: 13px; font-size: 15px; font-weight: 800;
    cursor: pointer; border: 0; transition: transform .14s, box-shadow .14s, filter .14s; line-height: 1.1; font-family: inherit;
}
.btn-primary, .btn-blue { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; box-shadow: 0 12px 30px rgba(79,70,229,.34); }
.btn-primary:hover, .btn-blue:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 18px 42px rgba(79,70,229,.46); }
.btn-green { background: linear-gradient(135deg, #059669, #10b981); color: #fff; box-shadow: 0 12px 30px rgba(5,150,105,.3); }
.btn-green:hover { transform: translateY(-2px); filter: brightness(1.04); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.18); }
.btn-light { background: #eef2f8; color: var(--ink); }
.btn-light:hover { background: #e4e9f2; }

/* ── Hero ───────────────────────────────────────────── */
.hero { max-width: 1180px; margin: 0 auto; padding: 56px 22px 76px; position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #dbeafe; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.hero h1 { font-size: clamp(32px, 6vw, 60px); line-height: 1.04; letter-spacing: -.035em; margin: 16px 0 18px; color: #fff; }
.hero p { color: #c2cee0; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55; margin: 0 0 26px; max-width: 560px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Dashboard preview (card real, texto oscuro sobre blanco) ── */
.dashboard-preview { width: 100%; }
.preview-inner {
    background: #fff; border: 1px solid rgba(255,255,255,.6); border-radius: 22px; padding: 20px;
    box-shadow: 0 30px 70px rgba(0,0,0,.35); color: var(--ink);
}
.preview-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.preview-top strong { font-size: 18px; font-weight: 850; color: var(--ink); letter-spacing: -.01em; }
.preview-top .preview-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.preview-top .pill { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.mini-card { display: flex; align-items: center; gap: 9px; background: var(--panel-soft); border: 1px solid var(--line); border-radius: 13px; padding: 11px 12px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.mini-card .mc-ic { width: 30px; height: 30px; flex: none; border-radius: 9px; background: linear-gradient(140deg,#eef0ff,#f5edff); border: 1px solid #e6e3fb; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.lead-row { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.lead-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.lead-line span { color: var(--muted); }
.lead-line strong { color: var(--primary); font-weight: 800; font-size: 12.5px; }

/* ── Sections ───────────────────────────────────────── */
.wrap { max-width: 1180px; margin: 0 auto; padding: 64px 22px; }
.wrap.alt { max-width: none; background: linear-gradient(180deg, var(--panel-soft), #fff); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wrap.alt > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); margin-bottom: 12px; }
.section-title { font-size: clamp(27px, 4vw, 40px); font-weight: 900; letter-spacing: -.03em; margin: 0 0 12px; color: var(--ink); line-height: 1.1; }
.section-sub { color: var(--muted); font-size: 17px; line-height: 1.6; margin: 0; }

/* Hero trust strip */
.hero-trust { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; color: #aeb9cd; font-size: 13px; font-weight: 600; }
.hero-trust .d { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }

/* ── Cards / grid ───────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
    position: relative; overflow: hidden;
    background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px;
    box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.04);
    transition: transform .16s, box-shadow .16s, border-color .16s; color: var(--ink);
}
.card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0; transition: opacity .16s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 24px 54px rgba(15,23,42,.14); border-color: #dfe4ef; }
.card:hover::after { opacity: 1; }
.card .icon { width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(140deg, #eef0ff, #f5edff); border: 1px solid #e6e3fb; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 16px; }
.card h3 { margin: 0 0 8px; font-size: 18px; font-weight: 850; color: var(--ink); }
.card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step .step-num { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg,#4f46e5,#7c3aed); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(79,70,229,.3); }

/* ── CTA band ───────────────────────────────────────── */
.cta {
    background: radial-gradient(620px 280px at 88% -20%, rgba(168,85,247,.4), transparent 60%), linear-gradient(135deg, #0b1024, #312e81);
    color: #fff; border-radius: 28px; padding: 40px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cta h2 { margin: 0 0 8px; font-size: clamp(24px, 4vw, 34px); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.cta p { color: #c2cee0; margin: 0; line-height: 1.6; font-size: 16px; }

/* ── Footer ─────────────────────────────────────────── */
footer { background: var(--panel-soft); border-top: 1px solid var(--line); margin-top: 40px; }
.foot { max-width: 1180px; margin: 0 auto; padding: 28px 22px; display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; line-height: 1.7; }
.footer-credit { color: var(--faint); font-size: 13px; }
footer a { color: var(--muted); margin-left: 16px; font-weight: 600; }
footer a:hover { color: var(--ink); }

/* ════════════ RESPONSIVE — iPhone ════════════ */
@media (max-width: 900px) {
    .nav-burger { display: inline-flex; }
    .links {
        display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
        flex-direction: column; align-items: stretch; gap: 2px;
        background: #0d1526; border-top: 1px solid rgba(255,255,255,.1);
        padding: 10px 16px 16px; box-shadow: 0 24px 50px rgba(0,0,0,.4);
    }
    .links.open { display: flex; }
    .links a { padding: 13px 14px; font-size: 15px; border-radius: 10px; }
    .links a.btn-white { margin-top: 6px; text-align: center; justify-content: center; }
    .hero { grid-template-columns: 1fr; gap: 28px; padding: 40px 22px 54px; }
    .dashboard-preview { order: 2; }
    .wrap { padding: 44px 22px; }
}
@media (max-width: 560px) {
    .container, .nav { padding-left: 16px; padding-right: 16px; }
    .hero { padding: 32px 16px 44px; }
    .hero-actions .btn { flex: 1 1 auto; }
    .wrap { padding: 36px 16px; }
    .mini-grid { grid-template-columns: 1fr 1fr; }
    .card { padding: 22px; border-radius: 18px; }
    .cta { padding: 30px 22px; border-radius: 22px; }
    .cta .btn { width: 100%; }
    .foot { flex-direction: column; gap: 12px; }
    footer a { margin-left: 0; margin-right: 16px; }
}

/* ════════════ LOGIN / AUTH ════════════ */
.auth-body {
    margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    padding: 20px; color: var(--ink); -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(820px 420px at 82% -8%, rgba(99,102,241,.45), transparent 60%),
        radial-gradient(680px 420px at 12% 110%, rgba(168,85,247,.32), transparent 58%),
        linear-gradient(160deg, #0a0f1f 0%, #0b1226 55%, #0a0f1c 100%);
}
.login-wrap { width: 100%; max-width: 410px; }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo { width: 56px; height: 56px; border-radius: 17px; background: linear-gradient(140deg, #6366f1, #a855f7); display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; box-shadow: 0 14px 34px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.3); margin-bottom: 14px; }
.login-name { font-size: 23px; font-weight: 900; color: #fff; letter-spacing: -.025em; }
.login-tagline { font-size: 13px; color: #93a4bd; margin-top: 4px; }
.login-box { background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.6); border-radius: 24px; padding: 30px 26px; box-shadow: 0 32px 80px rgba(0,0,0,.45); }
.login-box h2 { margin: 0 0 6px; font-size: 21px; font-weight: 850; color: var(--ink); letter-spacing: -.02em; }
.login-box .subtitle { margin: 0 0 24px; color: var(--muted); font-size: 13.5px; }
.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; font-size: 11.5px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 7px; }
.auth-field input { width: 100%; padding: 13px 14px; border: 1.5px solid #e2e6ef; border-radius: 13px; font-size: 15px; background: #f8fafc; transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; }
.auth-field input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: var(--ring); }
.login-btn { width: 100%; margin-top: 6px; padding: 14px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; box-shadow: 0 12px 28px rgba(79,70,229,.36); transition: transform .12s, filter .15s, box-shadow .15s; font-family: inherit; }
.login-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px rgba(79,70,229,.46); }
.error-box { background: #ffe4e6; border: 1px solid #fecdd3; color: #be123c; padding: 11px 14px; border-radius: 12px; margin-bottom: 18px; font-size: 13px; font-weight: 600; }
.forgot-link { display: block; text-align: center; margin-top: 18px; color: var(--primary); font-size: 13px; font-weight: 700; }
.forgot-link:hover { text-decoration: underline; }
.trust { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.trust span { display: inline-flex; align-items: center; gap: 6px; color: #93a4bd; font-size: 12px; font-weight: 600; }
.trust .d { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
@media (max-width: 420px) { .login-box { padding: 24px 20px; border-radius: 20px; } }

/* ── Auth card (register / recuperar / nueva contraseña) ── */
.auth-card { width: 100%; max-width: 460px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.6); border-radius: 24px; padding: 30px 26px; box-shadow: 0 32px 80px rgba(0,0,0,.45); }
.auth-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.auth-logo { width: 48px; height: 48px; flex: none; border-radius: 14px; background: linear-gradient(140deg,#6366f1,#a855f7); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; box-shadow: 0 10px 26px rgba(99,102,241,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.auth-card h1 { margin: 0; font-size: 23px; font-weight: 850; letter-spacing: -.02em; color: var(--ink); line-height: 1.12; }
.auth-card .lead { color: var(--muted); line-height: 1.5; font-size: 14px; margin: 4px 0 0; }
.auth-card label { display: block; margin-top: 15px; font-size: 11.5px; font-weight: 800; color: #475569; text-transform: uppercase; letter-spacing: .05em; }
.auth-card input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #e2e6ef; border-radius: 13px; font-size: 16px; margin-top: 7px; background: #f8fafc; transition: border-color .15s, box-shadow .15s, background .15s; font-family: inherit; }
.auth-card input:focus { outline: none; border-color: var(--primary); background: #fff; box-shadow: var(--ring); }
.auth-submit { width: 100%; min-height: 50px; display: flex; justify-content: center; align-items: center; margin-top: 18px; border: 0; border-radius: 14px; font-weight: 800; font-size: 16px; cursor: pointer; color: #fff; background: linear-gradient(135deg,#4f46e5,#7c3aed); box-shadow: 0 12px 28px rgba(79,70,229,.36); transition: transform .12s, filter .15s; font-family: inherit; }
.auth-submit:hover { transform: translateY(-1px); filter: brightness(1.05); }
.auth-ghost { width: 100%; min-height: 48px; display: flex; justify-content: center; align-items: center; margin-top: 10px; border-radius: 14px; font-weight: 700; font-size: 15px; text-decoration: none; background: #eef2f8; color: var(--ink); }
.auth-ghost:hover { background: #e4e9f2; }
.auth-errors { background: #ffe4e6; color: #be123c; border: 1px solid #fecdd3; padding: 12px 14px; border-radius: 12px; margin: 14px 0; font-size: 13.5px; }
.auth-errors ul { margin: 8px 0 0 18px; padding: 0; }
.auth-status { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; padding: 12px 14px; border-radius: 12px; margin: 14px 0; font-size: 13.5px; }
@media (max-width: 420px) { .auth-card { padding: 24px 20px; border-radius: 20px; } }

/* LeadMapsPro Public V8 — pro SaaS marketing redesign */
.public-v8 { background: #f7f9fc; color: #0f172a; }
.public-top-v8 {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(720px 360px at 15% 10%, rgba(37,99,235,.42), transparent 64%),
        radial-gradient(780px 380px at 82% 0%, rgba(14,165,233,.28), transparent 62%),
        radial-gradient(680px 440px at 72% 86%, rgba(34,197,94,.18), transparent 66%),
        linear-gradient(145deg, #070b16 0%, #111827 46%, #172554 100%);
}
.public-top-v8::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, #000, transparent 80%); pointer-events:none; }
.public-top-v8::after { content:""; position:absolute; width: 420px; height: 420px; right: -150px; top: 120px; background: rgba(34,197,94,.12); filter: blur(60px); border-radius: 999px; pointer-events:none; }
.public-nav-v8 { position:relative; z-index:10; max-width:1180px; margin:0 auto; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.public-brand-v8 { display:flex; align-items:center; gap:12px; color:#fff; }
.public-logo-v8 { width:44px; height:44px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-weight:950; letter-spacing:-.03em; color:#fff; background:linear-gradient(135deg,#2563eb,#0ea5e9 55%,#22c55e); box-shadow:0 18px 40px rgba(37,99,235,.38), inset 0 1px 0 rgba(255,255,255,.28); }
.public-brand-title-v8 { font-size:18px; font-weight:950; letter-spacing:-.02em; line-height:1; }
.public-brand-sub-v8 { margin-top:3px; color:#9fb0ca; font-size:11.5px; font-weight:700; }
.public-links-v8 { display:flex; align-items:center; gap:6px; }
.public-links-v8 a { color:#cbd5e1; padding:10px 13px; border-radius:12px; font-weight:800; font-size:14px; }
.public-links-v8 a:hover { color:#fff; background:rgba(255,255,255,.08); }
.public-nav-cta-v8 { background:#fff!important; color:#0f172a!important; box-shadow:0 16px 34px rgba(0,0,0,.20); }
.public-burger-v8 { display:none; width:46px; height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; align-items:center; justify-content:center; }
.public-burger-v8 svg { width:22px; height:22px; }
.public-hero-v8 { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:64px 22px 92px; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; }
.public-hero-v8.is-simple, .public-hero-v8.is-pricing { min-height:360px; padding-bottom:76px; }
.public-hero-v8.is-simple { grid-template-columns:minmax(0,760px); }
.public-hero-copy-v8 h1 { margin:18px 0 18px; color:#fff; font-weight:980; letter-spacing:-.055em; line-height:.98; font-size:clamp(38px,6.2vw,72px); }
.public-hero-v8.is-simple .public-hero-copy-v8 h1, .public-hero-v8.is-pricing .public-hero-copy-v8 h1 { font-size:clamp(36px,5vw,62px); }
.public-hero-copy-v8 p { max-width:650px; margin:0 0 28px; color:#c5d0e2; font-size:clamp(17px,2vw,21px); line-height:1.62; }
.public-badge-v8 { display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.08); color:#dbeafe; font-size:12px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.public-badge-v8::before { content:""; width:8px; height:8px; border-radius:999px; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.16); }
.public-actions-v8 { display:flex; gap:12px; flex-wrap:wrap; }
.public-btn-v8 { min-height:50px; padding:14px 21px; border-radius:15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:900; font-size:15px; transition:transform .16s, box-shadow .16s, background .16s, filter .16s; }
.public-btn-v8:hover { transform:translateY(-2px); }
.public-btn-v8.is-primary { color:#fff; background:linear-gradient(135deg,#2563eb,#0ea5e9); box-shadow:0 18px 42px rgba(37,99,235,.36); }
.public-btn-v8.is-soft { color:#e2e8f0; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); }
.public-btn-v8.is-white { color:#0f172a; background:#fff; box-shadow:0 18px 40px rgba(0,0,0,.18); }
.public-proof-v8 { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.public-proof-v8 span { color:#d9e2f2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); padding:8px 11px; border-radius:999px; font-size:13px; font-weight:800; }
.public-product-v8 { position:relative; min-height:460px; }
.public-product-glow-v8 { position:absolute; inset:40px 0 auto 22px; height:360px; background:linear-gradient(135deg,rgba(37,99,235,.38),rgba(34,197,94,.22)); filter:blur(38px); border-radius:38px; transform:rotate(-7deg); }
.public-app-card-v8 { position:relative; margin-left:auto; max-width:460px; border-radius:30px; padding:22px; color:#0f172a; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.90)); border:1px solid rgba(255,255,255,.7); box-shadow:0 34px 90px rgba(0,0,0,.38); backdrop-filter:blur(18px); animation: publicFloatV8 7s ease-in-out infinite; }
@keyframes publicFloatV8 { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
.public-app-top-v8 { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:16px; border-bottom:1px solid #e5eaf2; }
.public-app-top-v8 strong { font-size:18px; font-weight:950; }
.public-app-top-v8 span { background:#ffedd5; color:#c2410c; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:900; }
.public-app-grid-v8 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.public-app-grid-v8 div { background:#f8fafc; border:1px solid #e5eaf2; border-radius:18px; padding:14px 12px; }
.public-app-grid-v8 strong { display:block; font-size:24px; font-weight:950; letter-spacing:-.04em; }
.public-app-grid-v8 span { color:#64748b; font-size:12px; font-weight:800; }
.public-flow-v8 { display:grid; gap:10px; }
.public-flow-v8 div { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid #e5eaf2; border-radius:16px; padding:12px; color:#64748b; font-weight:800; }
.public-flow-v8 b { width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:#eef2f7; color:#64748b; }
.public-flow-v8 .is-done b { color:#047857; background:#d1fae5; }
.public-flow-v8 .is-active { color:#0f172a; border-color:#bfdbfe; background:#eff6ff; }
.public-flow-v8 .is-active b { background:#2563eb; color:#fff; }
.public-lead-card-v8 { margin-top:14px; display:flex; justify-content:space-between; gap:12px; align-items:center; border-radius:20px; padding:16px; background:linear-gradient(135deg,#0f172a,#1e293b); color:#fff; }
.public-lead-card-v8 strong { display:block; font-weight:950; }
.public-lead-card-v8 span { color:#cbd5e1; font-size:12.5px; }
.public-lead-card-v8 em { font-style:normal; color:#bbf7d0; background:rgba(34,197,94,.14); border:1px solid rgba(34,197,94,.24); padding:7px 10px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap; }
.public-section-v8 { max-width:1180px; margin:0 auto; padding:76px 22px; }
.public-section-v8.is-tinted { max-width:none; background:linear-gradient(180deg,#f8fafc,#eef6ff); border-block:1px solid #e5eaf2; }
.public-section-v8.is-tinted > * { max-width:1180px; margin-inline:auto; }
.public-section-head-v8 { max-width:760px; margin:0 auto 38px; text-align:center; }
.public-section-head-v8 span, .public-eyebrow-v8 { display:inline-block; color:#2563eb; font-size:12px; font-weight:950; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; }
.public-section-head-v8 h2, .public-split-v8 h2, .public-cta-v8 h2 { margin:0 0 12px; font-size:clamp(30px,4.5vw,50px); line-height:1.04; letter-spacing:-.045em; font-weight:980; color:#0f172a; }
.public-section-head-v8 p, .public-split-v8 p { color:#64748b; line-height:1.7; font-size:17px; }
.public-steps-v8 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.public-steps-v8 article, .public-feature-grid-v8 article, .public-content-card-v8, .public-price-card-v8 { background:#fff; border:1px solid #e5eaf2; border-radius:24px; padding:26px; box-shadow:0 18px 46px rgba(15,23,42,.06); }
.public-steps-v8 b { display:inline-flex; width:42px; height:42px; border-radius:14px; align-items:center; justify-content:center; color:#fff; background:linear-gradient(135deg,#2563eb,#0ea5e9); box-shadow:0 14px 28px rgba(37,99,235,.25); }
.public-steps-v8 h3, .public-feature-grid-v8 h3 { margin:18px 0 8px; font-size:18px; font-weight:950; letter-spacing:-.02em; }
.public-steps-v8 p, .public-feature-grid-v8 p, .public-content-card-v8 { color:#64748b; line-height:1.68; }
.public-split-v8 { display:grid; grid-template-columns:1fr .8fr; gap:34px; align-items:center; }
.public-checks-v8 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.public-checks-v8 span { background:#fff; border:1px solid #dbe7f5; color:#0f172a; border-radius:16px; padding:12px 14px; font-weight:850; }
.public-checks-v8 span::before { content:"✓"; color:#16a34a; margin-right:8px; font-weight:950; }
.public-metric-stack-v8 { display:grid; gap:14px; }
.public-metric-stack-v8 div { background:#0f172a; color:#fff; padding:22px; border-radius:24px; box-shadow:0 22px 54px rgba(15,23,42,.22); }
.public-metric-stack-v8 strong { display:block; font-size:22px; margin-bottom:6px; }
.public-metric-stack-v8 span { color:#cbd5e1; }
.public-feature-grid-v8 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.public-feature-grid-v8 article { transition:transform .16s, box-shadow .16s; }
.public-feature-grid-v8 article:hover { transform:translateY(-4px); box-shadow:0 28px 60px rgba(15,23,42,.12); }
.public-cta-v8 { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; border-radius:34px; padding:42px; color:#fff; background:radial-gradient(600px 260px at 82% 0%,rgba(14,165,233,.35),transparent 65%),linear-gradient(135deg,#0f172a,#172554); box-shadow:0 30px 80px rgba(15,23,42,.2); }
.public-cta-v8 span { color:#93c5fd; font-weight:950; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
.public-cta-v8 h2 { color:#fff; max-width:760px; }
.public-cta-v8 p { color:#cbd5e1; max-width:760px; line-height:1.65; }
.public-price-summary-v8 { align-self:center; justify-self:end; max-width:360px; border-radius:30px; padding:28px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(12px); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.public-price-summary-v8 strong { display:block; color:#fff; font-size:64px; letter-spacing:-.06em; line-height:1; }
.public-price-summary-v8 span { color:#dbeafe; font-weight:950; }
.public-price-summary-v8 p { margin-top:14px; color:#cbd5e1; }
.public-pricing-grid-v8 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; align-items:stretch; }
.public-price-card-v8 { position:relative; display:flex; flex-direction:column; gap:20px; }
.public-price-card-v8.is-popular { border-color:#93c5fd; box-shadow:0 28px 70px rgba(37,99,235,.16); transform:translateY(-8px); }
/* V29 fix: is-soft está pensado para fondos oscuros (hero/CTA). Dentro de la tarjeta
   blanca daba texto gris claro sobre blanco (botón "Elegir anual" casi invisible).
   Lo volvemos un secundario azul legible solo en este contexto. */
.public-price-card-v8 .public-btn-v8.is-soft { color:#2563eb; background:#fff; border:1px solid #bfdbfe; box-shadow:none; }
.public-popular-v8 { position:absolute; top:16px; right:16px; background:#dbeafe; color:#1d4ed8; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:950; }
.public-price-head-v8 h2 { margin:0 0 8px; font-size:24px; font-weight:980; letter-spacing:-.035em; }
.public-price-head-v8 p { margin:0; color:#64748b; line-height:1.55; }
.public-price-amount-v8 strong { font-size:46px; letter-spacing:-.06em; }
.public-price-amount-v8 span { color:#64748b; font-weight:850; }
.public-price-features-v8 { display:grid; gap:10px; margin-top:auto; }
.public-price-features-v8 span { display:flex; gap:8px; color:#334155; font-weight:750; }
.public-price-features-v8 span::before { content:"✓"; color:#16a34a; font-weight:950; }
.public-content-card-v8 { max-width:880px; margin:0 auto; font-size:17px; }
.public-items-v8 { margin-top:18px; }
.public-footer-v8 { background:#07111f; color:#94a3b8; margin-top:0; }
.public-foot-v8 { max-width:1180px; margin:0 auto; padding:34px 22px; display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.public-foot-brand-v8 { color:#fff; font-size:18px; font-weight:950; margin-bottom:6px; }
.public-foot-v8 p { margin:0 0 4px; }
.public-foot-links-v8 { display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; }
.public-foot-links-v8 a { color:#cbd5e1; font-weight:800; }
@media (prefers-reduced-motion: reduce) { .public-app-card-v8 { animation:none; } .public-btn-v8, .public-feature-grid-v8 article { transition:none; } }
@media (max-width: 900px) {
    .public-burger-v8 { display:flex; }
    .public-links-v8 { display:none; position:absolute; z-index:40; top:100%; left:16px; right:16px; padding:10px; flex-direction:column; align-items:stretch; border:1px solid rgba(255,255,255,.14); border-radius:20px; background:#0f172a; box-shadow:0 24px 60px rgba(0,0,0,.42); }
    .public-links-v8.open { display:flex; }
    .public-links-v8 a { padding:14px; }
    .public-nav-cta-v8 { text-align:center; }
    .public-hero-v8, .public-hero-v8.is-pricing { grid-template-columns:1fr; padding:42px 22px 66px; }
    .public-product-v8 { min-height:auto; }
    .public-app-card-v8 { max-width:none; }
    .public-price-summary-v8 { justify-self:stretch; max-width:none; }
    .public-steps-v8, .public-feature-grid-v8, .public-split-v8 { grid-template-columns:1fr; }
    .public-checks-v8 { grid-template-columns:1fr; }
}
@media (max-width: 560px) {
    .public-nav-v8 { padding:15px 16px; }
    .public-brand-sub-v8 { display:none; }
    .public-hero-v8, .public-hero-v8.is-simple, .public-hero-v8.is-pricing { padding:34px 16px 52px; }
    .public-hero-copy-v8 h1 { letter-spacing:-.045em; }
    .public-actions-v8 .public-btn-v8 { width:100%; }
    .public-section-v8 { padding:52px 16px; }
    .public-app-grid-v8 { grid-template-columns:1fr; }
    .public-lead-card-v8 { align-items:flex-start; flex-direction:column; }
    .public-cta-v8 { padding:30px 22px; border-radius:26px; }
    .public-price-card-v8.is-popular { transform:none; }
}