/* ============================
   Landing Firmas — Bootstrap 5 Integration Layer
   Font: Inter · Design: Orange + Navy
   ─────────────────────────────────────────────
   Carga después de bootstrap.min.css.
   Sobreescribe las variables CSS de Bootstrap con
   los tokens del diseño actual para que los
   componentes Bootstrap nuevos hereden la paleta.
   Todas las clases custom (.nav, .hero, etc.) se
   mantienen intactas — el look es idéntico.
   ============================ */

/* ─────────────────────────────────────────────
   1. Bootstrap 5 Variable Overrides
   Mapeamos --bs-* a los valores del diseño.
   Los componentes Bootstrap nuevos los heredan.
   ───────────────────────────────────────────── */
:root {
    /* ── Tipografía ── */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.9375rem;   /* 15px */
    --bs-body-line-height: 1.6;
    --bs-body-color: #111827;
    --bs-body-bg: #ffffff;
    --bs-emphasis-color: #111827;

    /* ── Paleta principal ── */
    --bs-primary:           #ee9c2d;
    --bs-primary-rgb:       238, 156, 45;
    --bs-secondary:         #3b6cfa;
    --bs-secondary-rgb:     59, 108, 250;
    --bs-success:           #35a82c;
    --bs-success-rgb:       53, 168, 44;
    --bs-danger:            #dc2626;
    --bs-danger-rgb:        220, 38, 38;
    --bs-warning:           #d97706;
    --bs-warning-rgb:       217, 119, 6;
    --bs-info:              #3b6cfa;
    --bs-info-rgb:          59, 108, 250;
    --bs-light:             #f4f6fa;
    --bs-light-rgb:         244, 246, 250;
    --bs-dark:              #0d1b2e;
    --bs-dark-rgb:          13, 27, 46;

    /* ── Botón primary == naranja ── */
    --bs-btn-bg:            #ee9c2d;
    --bs-btn-border-color:  #ee9c2d;
    --bs-btn-hover-bg:      #c97e1a;
    --bs-btn-hover-border-color: #c97e1a;
    --bs-btn-active-bg:     #c97e1a;
    --bs-btn-color:         #fff;

    /* ── Links ── */
    --bs-link-color:        #3b6cfa;
    --bs-link-color-rgb:    59, 108, 250;
    --bs-link-hover-color:  #2a5ce0;
    --bs-link-decoration:   none;

    /* ── Bordes y radios ── */
    --bs-border-color:      #e5e7eb;
    --bs-border-radius:     10px;
    --bs-border-radius-sm:  8px;
    --bs-border-radius-lg:  16px;
    --bs-border-radius-xl:  20px;
    --bs-border-radius-xxl: 24px;
    --bs-border-radius-pill: 50rem;

    /* ── Superficies ── */
    --bs-secondary-bg:      #f4f6fa;
    --bs-tertiary-bg:       #f4f6fa;
    --bs-secondary-color:   rgba(75, 85, 99, 0.75);
    --bs-tertiary-color:    rgba(156, 163, 175, 0.5);

    /* ── Sombras ── */
    --bs-box-shadow:        0 4px 20px rgba(0, 0, 0, 0.08);
    --bs-box-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.06);
    --bs-box-shadow-lg:     0 20px 60px rgba(0, 0, 0, 0.15);

    /* ─────────────────────────────────────────
       Tokens propios del diseño (sin cambios)
       ───────────────────────────────────────── */
    --orange:       #ee9c2d;
    --orange-dark:  #c97e1a;
    --orange-glow:  rgba(238, 156, 45, 0.18);
    --green:        #35a82c;
    --green-light:  #e8f7e7;
    --green-mid:    #b6e5b3;
    --blue:         #3b6cfa;
    --blue-light:   #e8effe;
    --navy:         #0d1b2e;
    --navy2:        #0f2340;
    --navy3:        #162a47;
    --light-bg:     #f4f6fa;
    --surface:      #ffffff;
    --ink:          #111827;
    --ink2:         #4b5563;
    --ink3:         #9ca3af;
    --border:       #e5e7eb;
    --error:        #dc2626;
    --warn:         #d97706;
    --warn-bg:      #fffbeb;
    --r:    10px;
    --rlg:  16px;
    --rxl:  20px;
}

/* ─────────────────────────────────────────────
   2. Neutralizar Reboot de Bootstrap
   Previene que el reset global de BS pise
   estilos que el layout custom ya controla.
   ───────────────────────────────────────────── */

/* Bootstrap Reboot añade margin-bottom:1rem a <p>.
   Nuestra regla * {margin:0} tiene menor especificidad
   que p {}, así que anulamos explícitamente aquí. */
p { margin-top: 0; margin-bottom: 0; }

/* Bootstrap Reboot añade margin-bottom a h1-h6.
   Los h1/h2 del hero y secciones ya tienen sus
   propios márgenes via clases custom. */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 0; }

/* Bootstrap Reboot resetea ul/li (elimina list-style).
   Las listas dentro de .plan-features ya están
   controladas, pero lo dejamos explícito. */
ul { margin-bottom: 0; padding-left: 0; list-style: none; }

/* Bootstrap linkifica con --bs-link-color.
   Los nav-link y footer-link tienen colores propios. */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Bootstrap Reboot agrega outline a botones (:focus-visible).
   Mantenemos accesibilidad pero con nuestro color. */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* Bootstrap pone box-sizing:border-box (igual que nosotros,
   pero lo dejamos explícito para certeza). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body {
    font-family: var(--bs-body-font-family);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-color: var(--bs-body-bg);
}

/* ─────────────────────────────────────────────
   3. Clases custom del diseño (sin cambios)
   A partir de aquí es el landing.css original
   con comentarios de sección intactos.
   ───────────────────────────────────────────── */

/* ══════════════════ NAV ══════════════════ */
.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    background: rgba(13,27,46,0.92); backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    height: 64px; display: flex; align-items: center;
    padding: 0 40px; justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 36px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link { font-size: 14px; color: rgba(255,255,255,0.7); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.nav-link:hover { color: #fff; }
.nav-cta {
    background: var(--orange); color: #fff; border: none;
    padding: 9px 20px; border-radius: 8px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s;
    box-shadow: 0 2px 12px rgba(238,156,45,0.4);
}
.nav-cta:hover { background: var(--orange-dark); transform: translateY(-1px); }
@media(max-width:640px) { .nav-links { display: none; } .nav-cta { display: none; } .nav { padding: 0 20px; } .hero-btns { justify-content: center; } .feat-card { text-align: center; } .feat-card .feat-icon-wrap { margin: 0 auto; } .plan-pro-bg .plan-option-head { margin-top: 14px; } }

/* ══════════════════ HERO ══════════════════ */
.hero {
    background: var(--navy);
    background-image:
        radial-gradient(ellipse 70% 50% at 60% 50%, rgba(59,108,250,0.12) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    padding: 140px 40px 80px;
    display: grid; grid-template-columns: 1fr 420px; gap: 60px; align-items: center;
    max-width: 1200px; margin: 0 auto;
    min-height: 100vh;
}
@media(max-width:900px) { .hero { grid-template-columns: 1fr; padding: 80px 20px 60px; gap: 40px; } }

.hero-badge {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(59,108,250,0.15); border: 1px solid rgba(59,108,250,0.3);
    color: #7da4fc; font-size: 12px; font-weight: 600;
    padding: 5px 14px; border-radius: 20px; margin-bottom: 24px;
}
.hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

.hero h1 {
    font-size: clamp(38px, 5vw, 60px); font-weight: 900; color: #fff;
    line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 18px;
}
.hero h1 span { color: var(--orange); display: block; }
.hero-sub { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 460px; line-height: 1.7; margin-bottom: 32px; }
.hero-sub strong { color: #fff; }

.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.btn-hero {
    background: var(--orange); color: #fff; border: none;
    padding: 15px 28px; border-radius: 10px; font-size: 15px; font-weight: 700;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s;
    box-shadow: 0 4px 20px rgba(238,156,45,0.45); display: flex; align-items: center; gap: 8px;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(238,156,45,0.55); }
.btn-hero-ghost {
    background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 15px 24px; border-radius: 10px; font-size: 15px; font-weight: 500;
    cursor: pointer; font-family: 'Inter', sans-serif; transition: all 0.15s;
    display: flex; align-items: center; gap: 8px;
}
.btn-hero-ghost:hover { background: rgba(255,255,255,0.1); }
.btn-play-icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }

.hero-social { display: flex; align-items: center; gap: 14px; }
.avatars { display: flex; }
.av { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--navy); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; margin-left: -8px; }
.av:first-child { margin-left: 0; }
.av1{background:#3b6cfa;} .av2{background:var(--green);} .av3{background:#8b5cf6;} .av4{background:#ec4899;} .av5{background:#f59e0b;font-size:9px;}
.hero-social-text { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }
.hero-social-text strong { color: #fff; }
.hero-stars { color: var(--orange); font-size: 11px; display: block; margin-bottom: 1px; }

/* Price card */
.hero-price-card {
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.15);
}
.hpc-top {
    background: linear-gradient(135deg, var(--navy2), var(--navy3));
    padding: 24px 28px; text-align: center; position: relative; overflow: hidden;
}
.hpc-top::before {
    content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%;
    background: rgba(59,108,250,0.15); top: -40px; right: -20px;
}
.hpc-shield { width: 48px; height: 48px; background: rgba(59,108,250,0.2); border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; position: relative; }
.hpc-label { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.hpc-sub { font-size: 12px; color: rgba(255,255,255,0.5); }
.hpc-price { font-size: 52px; font-weight: 900; color: #fff; line-height: 1; margin: 14px 0 4px; }
.hpc-price sup { font-size: 24px; vertical-align: super; font-weight: 700; }
.hpc-period { font-size: 12px; color: rgba(255,255,255,0.4); }
.hpc-body { padding: 20px 28px 24px; }
.hpc-feat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink2); padding: 8px 0; border-bottom: 1px solid var(--border); }
.hpc-feat:last-of-type { border: none; margin-bottom: 4px; }
.hpc-check { width: 20px; height: 20px; border-radius: 50%; background: var(--green-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.btn-hpc {
    width: 100%; height: 52px; background: var(--orange); color: #fff; border: none;
    border-radius: 10px; font-size: 16px; font-weight: 800; cursor: pointer;
    font-family: 'Inter', sans-serif; transition: all 0.15s; margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(238,156,45,0.4);
}
.btn-hpc:hover { background: var(--orange-dark); transform: translateY(-1px); }
.hpc-secure { text-align: center; font-size: 11px; color: var(--ink3); display: flex; align-items: center; justify-content: center; gap: 5px; }

/* ══════════════════ STATS ══════════════════ */
.stats-section {
    background: var(--light-bg);
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    padding: 40px 40px;
}
.stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; text-align: center; }
@media(max-width:560px) { .stats-inner { grid-template-columns: repeat(2,1fr); } }
.stat-num { font-size: 32px; font-weight: 900; color: var(--ink); letter-spacing: -0.03em; }
.stat-num .accent { color: var(--blue); }
.stat-label { font-size: 12px; color: var(--ink3); margin-top: 2px; font-weight: 500; }

/* ══════════════════ WHY ══════════════════ */
.why-section { background: #fff; padding: 80px 40px; }
.why-inner { max-width: 1000px; margin: 0 auto; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.eyebrow::before { content:''; width: 28px; height: 2px; background: var(--blue); }
.section-h2 { font-size: clamp(26px,3.5vw,40px); font-weight: 900; color: var(--ink); letter-spacing: -0.03em; margin-bottom: 10px; }
.section-sub { font-size: 15px; color: var(--ink2); max-width: 520px; line-height: 1.7; margin-bottom: 48px; }
.feats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media(max-width:700px) { .feats-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:420px) { .feats-grid { grid-template-columns: 1fr; } }
.feat-card { border: 1px solid var(--border); border-radius: var(--rlg); padding: 24px; transition: box-shadow 0.2s, transform 0.2s; }
.feat-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.feat-icon-wrap { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feat-icon-wrap svg { color: var(--blue); }
.feat-name { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.feat-desc { font-size: 13px; color: var(--ink2); line-height: 1.6; }

/* ══════════════════ TIMELINE ══════════════════ */
.timeline-section {
    background: var(--navy);
    background-image: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(59,108,250,0.08) 0%, transparent 60%);
    padding: 80px 40px;
}
.timeline-inner { max-width: 760px; margin: 0 auto; }
.tl-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.tl-eyebrow::before { content:''; width: 28px; height: 2px; background: rgba(255,255,255,0.3); }
.tl-h2 { font-size: clamp(28px,3.5vw,44px); font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 56px; text-align: center; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.08); transform: translateX(-50%); }
.tl-item { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 0; align-items: center; margin-bottom: 48px; position: relative; }
.tl-item:last-child { margin-bottom: 0; }
.tl-left { text-align: right; padding-right: 28px; }
.tl-right { text-align: left; padding-left: 28px; }
.tl-center { display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.tl-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; box-shadow: 0 0 0 6px rgba(59,108,250,0.15); }
.tl-dot.star { background: var(--orange); box-shadow: 0 0 0 6px rgba(238,156,45,0.15); font-size: 16px; }
.tl-year { font-size: 12px; font-weight: 700; color: var(--blue); letter-spacing: 0.05em; margin-bottom: 4px; }
.tl-year.current { color: var(--orange); }
.tl-title { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 3px; }
.tl-desc { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; }
@media(max-width:560px) {
    .timeline-section { padding: 60px 20px; }
    .tl-item { grid-template-columns: 44px 1fr; align-items: start; margin-bottom: 32px; }
    .tl-empty { display: none; }
    .tl-center { grid-column: 1; grid-row: 1; justify-content: center; align-self: start; padding-top: 4px; }
    .tl-left { display: block; grid-column: 2; grid-row: 1; text-align: left; padding-right: 0; padding-left: 16px; }
    .tl-right { grid-column: 2; grid-row: 1; padding-left: 16px; }
    .tl-line { left: 21px; transform: none; }
    .tl-dot { width: 36px; height: 36px; font-size: 13px; }
    .tl-desc { overflow-wrap: break-word; }
}

/* ══════════════════ TESTIMONIALS ══════════════════ */
.testi-section { background: var(--light-bg); padding: 80px 40px; }
.testi-inner { max-width: 1000px; margin: 0 auto; }
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 40px; }
@media(max-width:700px) { .testi-grid { grid-template-columns: 1fr; } }
.testi-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rlg); padding: 24px; }
.testi-stars { color: var(--orange); font-size: 14px; margin-bottom: 12px; letter-spacing: 2px; }
.testi-text { font-size: 14px; color: var(--ink2); line-height: 1.7; margin-bottom: 16px; font-style: italic; }
.testi-author { display: flex; align-items: center; gap: 10px; }
.testi-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.testi-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.testi-role { font-size: 11px; color: var(--ink3); }

/* ══════════════════ STEPS ══════════════════ */
.steps-section { background: #fff; padding: 80px 40px; }
.steps-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.steps-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin-top: 52px; position: relative; align-items: start; }
.steps-row::before {
    content: ''; position: absolute; top: 22px; left: calc(16.66% + 10px); right: calc(16.66% + 10px);
    height: 2px; background: repeating-linear-gradient(90deg, var(--border) 0, var(--border) 6px, transparent 6px, transparent 12px);
}
.step-item { text-align: center; position: relative; padding: 0 16px; }
.step-circle { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--blue); color: var(--blue); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; background: #fff; position: relative; z-index: 1; }
.step-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.step-desc { font-size: 13px; color: var(--ink2); line-height: 1.6; }

/* ══════════════════ REQUISITOS ══════════════════ */
.req-section { background: var(--light-bg); padding: 80px 40px; }
.req-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; text-align: left; }
@media(max-width:560px) { .req-grid { grid-template-columns: 1fr; } }
.req-card { background: #fff; border: 1px solid var(--border); border-radius: var(--rlg); padding: 28px; }
.req-card-title { font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.req-card-sub { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: 18px; }
.req-item { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink2); padding: 9px 0; border-bottom: 1px solid var(--border); }
.req-item:last-child { border: none; padding-bottom: 0; }
.req-num { width: 20px; height: 20px; border-radius: 50%; background: var(--blue-light); color: var(--blue); font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

/* ══════════════════ CTA BOTTOM ══════════════════ */
.cta-section {
    background: var(--navy);
    background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(238,156,45,0.1) 0%, transparent 60%);
    padding: 100px 40px; text-align: center;
}
.cta-h2 { font-size: clamp(30px,4vw,50px); font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
.cta-h2 span { color: var(--orange); display: block; }
.cta-price { font-size: 22px; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.cta-price strong { font-size: 48px; font-weight: 900; color: #fff; }
.cta-price-unit { font-size: 16px; color: rgba(255,255,255,0.4); }
.cta-desc { font-size: 15px; color: rgba(255,255,255,0.5); margin-bottom: 36px; max-width: 400px; margin-left: auto; margin-right: auto; }
.cta-trust { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.cta-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.45); }

/* ══════════════════ FOOTER ══════════════════ */
footer {
    background: #080f1c; padding: 24px 40px;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-logo { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.4); }
.footer-links { display: flex; gap: 20px; }
.footer-link { font-size: 12px; color: rgba(255,255,255,0.3); text-decoration: none; cursor: pointer; transition: color 0.15s; }
.footer-link:hover { color: rgba(255,255,255,0.6); }
.footer-copy { font-size: 11px; color: rgba(255,255,255,0.2); }

/* ══════════════════ MODAL ══════════════════ */
.modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 500;
    background: rgba(8,15,28,0.75); backdrop-filter: blur(8px);
    overflow-y: auto; padding: 24px 16px; align-items: flex-start; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: #fff; border-radius: 24px; width: 100%; max-width: 500px;
    box-shadow: 0 32px 80px rgba(0,0,0,0.4); position: relative; overflow: hidden;
    animation: modalIn 0.3s cubic-bezier(0.34,1.4,0.64,1) forwards;
    margin: auto;
}
@keyframes modalIn { from{opacity:0;transform:translateY(30px) scale(0.96);} to{opacity:1;transform:none;} }
.modal-close {
    position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
    background: rgba(255,255,255,0.1); border: none; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    color: rgba(255,255,255,0.7); z-index: 2; transition: background 0.15s; font-family: 'Inter',sans-serif;
}
.modal-close:hover { background: rgba(255,255,255,0.2); }
.modal-header { display: block; background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%); padding: 24px 24px 20px; }
.modal-title { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 2px; }
.modal-sub { font-size: 12px; color: rgba(255,255,255,0.4); }
.modal-body { padding: 22px 24px 26px; max-height: 80vh; overflow-y: auto; }

/* Modal form */
.modal-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media(max-width:440px) { .modal-form-row { grid-template-columns: 1fr; } }
.modal-label { font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 10px; letter-spacing: 0.02em; }
.mfield { margin-bottom: 14px; }
.mlabel { font-size: 12px; font-weight: 700; color: var(--ink2); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; }
.mlabel .req { color: var(--orange); }
.minput {
    width: 100%; height: 44px; background: var(--light-bg); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 0 14px; font-family: 'Inter',sans-serif; font-size: 14px; color: var(--ink);
    outline: none; transition: all 0.15s; -webkit-appearance: none;
    /* Neutraliza el estilo de Bootstrap para inputs */
    box-shadow: none;
}
.minput:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(238,156,45,0.12); }
.minput.error { border-color: var(--error); box-shadow: 0 0 0 3px rgba(220,38,38,0.09); }
.form-hint { font-size: 11px; color: var(--ink3); margin-top: 4px; }
.mfield-err { font-size: 11px; color: var(--error); margin-top: 3px; display: none; }
.mfield-err.show { display: block; }

/* Persona tabs */
.persona-tabs { display: flex; gap: 8px; margin-top: 2px; }
.persona-tab {
    flex: 1; padding: 9px 8px; border: 1.5px solid var(--border); border-radius: 10px;
    text-align: center; font-size: 13px; font-weight: 700; cursor: pointer;
    background: var(--light-bg); color: var(--ink2); transition: all 0.15s;
}
.persona-tab.active { border-color: var(--orange); background: #fff8ee; color: var(--orange-dark); }

/* Requisitos dinámicos */
.req-dynamic { border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.req-dynamic.natural { background: #f0f9f0; border: 1px solid #b6e5b3; }
.req-dynamic.juridica { background: #eff6ff; border: 1px solid #bfdbfe; }
.req-dynamic-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.req-dynamic.natural .req-dynamic-title { color: #166534; }
.req-dynamic.juridica .req-dynamic-title { color: #1d4ed8; }
.req-dynamic-list { font-size: 12px; line-height: 2.0; }
.req-dynamic.natural .req-dynamic-list { color: #1f5237; }
.req-dynamic.juridica .req-dynamic-list { color: #1e3a8a; }

/* Vigencia */
.vig-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; padding-top: 12px; }
.vig-card {
    border: 2px solid var(--border); border-radius: var(--r); padding: 22px 8px 12px;
    text-align: center; cursor: pointer; transition: all 0.15s;
    background: var(--light-bg); position: relative;
}
.vig-card:hover { border-color: var(--orange); }
.vig-card.selected { border-color: var(--blue); background: #eef2ff; }
.vig-badge-pill {
    position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 20px;
    white-space: nowrap; letter-spacing: 0.04em;
}
.vig-badge-pill.pop { background: var(--orange); color: #fff; }
.vig-badge-pill.save { background: var(--green); color: #fff; }
.vig-years { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.vig-price { font-size: 24px; font-weight: 900; color: var(--ink); margin: 2px 0; }
.vig-card.selected .vig-price { color: var(--blue); }
.vig-ppa { font-size: 10px; color: var(--ink3); }

/* Plan selector */
.plan-ribbon {
    background: var(--orange); color: #fff; border-radius: 8px 8px 0 0;
    padding: 10px 16px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
    text-align: center; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
.plan-wrap {
    border: 2px solid var(--orange); border-top: none; border-radius: 0 0 10px 10px;
    background: #fffcf7; margin-bottom: 18px; overflow: hidden;
}
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; }
.plan-option {
    padding: 14px; cursor: pointer; transition: background 0.15s;
    border-right: 1px solid #f0e8d5;
}
.plan-option:last-child { border-right: none; }
.plan-pro-bg { background: #f9f6ff; position: relative; }
.plan-best-badge { position: absolute; top: 8px; right: 8px; background: var(--blue); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 20px; }
.plan-option.active { background: #fff3e0; }
.plan-option.active.plan-pro-bg { background: #ede7ff; }
.plan-option-head { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.plan-radio {
    width: 16px; height: 16px; min-width: 16px; border-radius: 50%;
    border: 2px solid var(--border); margin-top: 3px; display: flex;
    align-items: center; justify-content: center; background: #fff; flex-shrink: 0; transition: all 0.15s;
}
.plan-radio.filled { border-color: var(--blue); background: var(--blue); }
.plan-radio.filled-orange { border-color: var(--orange); background: var(--orange); }
.plan-radio.filled-pro { border-color: var(--blue); background: var(--blue); }
.radio-dot { width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.plan-option-name { font-size: 13px; font-weight: 800; color: var(--ink); }
.plan-option-price { font-size: 13px; font-weight: 700; color: var(--orange-dark); margin-top: 2px; }
.plan-option-price span { font-size: 10px; font-weight: 400; color: var(--ink3); }
.plan-features { list-style: none; padding: 0; margin: 0; font-size: 11px; color: var(--ink2); }
.plan-features li { padding: 3px 0; display: flex; gap: 5px; }
.plan-features li.muted { color: var(--ink3); }
.plan-none {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer; font-size: 12px; color: var(--ink3);
    font-weight: 600; border-top: 1px solid #f0e8d5; background: transparent; transition: all 0.15s;
}
.plan-none.active { background: #eef2ff; color: var(--blue); }

/* Order */
.order-box { background: var(--light-bg); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; border: 1px solid var(--border); }
.order-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink2); padding: 4px 0; }
.order-row.total { font-size: 16px; font-weight: 800; color: var(--ink); border-top: 1px solid var(--border); margin-top: 7px; padding-top: 11px; }
.order-row.total span:last-child { color: var(--orange); font-weight: 900; }
.order-row.promo span:last-child { color: var(--green); font-weight: 700; }

/* Pay tabs */
.pay-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.pay-tab {
    flex: 1; padding: 10px 8px; border: 1.5px solid var(--border); border-radius: var(--r);
    text-align: center; font-size: 12px; font-weight: 700; cursor: pointer;
    color: var(--ink2); background: var(--light-bg); transition: all 0.15s;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.pay-tab.active { border-color: var(--blue); background: #eef2ff; color: var(--blue); }
.pay-panel { display: none; }
.pay-panel.active { display: block; }

/* Card logos */
.card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.card-logos { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
.card-logo { height: 28px; background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; display: flex; align-items: center; justify-content: center; }

/* Bank card */
.bank-card { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; }
.bank-card-header { background: var(--blue); padding: 10px 14px; display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: #fff; }
.bank-icon { width: 28px; height: 28px; border-radius: 6px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; }
.bank-card-body { padding: 0 14px; }
.bank-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--ink3); }
.bank-row.last { border-bottom: none; }
.bank-val { font-weight: 600; color: var(--ink); }
.bank-val.total { color: var(--orange); font-weight: 900; font-size: 15px; }

/* Upload */
.upload-zone {
    border: 1.5px dashed var(--border); border-radius: var(--r); padding: 24px 16px;
    text-align: center; cursor: pointer; background: #fafbff; transition: all 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.upload-zone:hover { border-color: var(--blue); background: var(--blue-light); }
.upload-zone.uploaded { border-style: solid; border-color: var(--green); background: var(--green-light); }
.upload-success { display: none; background: var(--green-light); border: 1px solid var(--green-mid); border-radius: 8px; padding: 10px 13px; font-size: 12px; color: #166534; margin-top: 8px; }
.upload-success.show { display: block; }

/* Notice clave */
.notice-clave {
    background: var(--warn-bg); border: 1px solid #fde68a; border-radius: 8px;
    padding: 10px 13px; margin-bottom: 12px; display: flex; gap: 9px; align-items: flex-start;
    font-size: 11px; color: #92400e; line-height: 1.6;
}
.notice-clave strong { color: #78350f; }

/* Pay button */
.btn-pay {
    width: 100%; height: 52px; background: var(--orange); color: #fff; border: none;
    border-radius: var(--r); font-size: 16px; font-weight: 800; cursor: pointer;
    font-family: 'Inter',sans-serif; margin-bottom: 8px; transition: all 0.15s;
    box-shadow: 0 4px 16px rgba(238,156,45,0.35);
}
.btn-pay:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(238,156,45,0.45); }
.btn-pay:disabled { background: var(--border); color: var(--ink3); box-shadow: none; cursor: not-allowed; transform: none; }
.pay-secure { text-align: center; font-size: 11px; color: var(--ink3); margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* Success screen */
.success-screen { display: none; padding: 0; }
.success-screen.active { display: block; }

/* ══════════════════ PROMO OVERLAY ══════════════════ */
.promo-overlay {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(8,15,28,0.85); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
}
.promo-overlay.open { display: flex; }
.promo-card { background: #fff; border-radius: 24px; max-width: 400px; width: 100%; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,0.5); }
.promo-header {
    background: linear-gradient(135deg,#b03020,#d63a28 45%,#e06010 100%);
    padding: 28px 24px 18px; text-align: center;
}
.promo-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 6px; }
.promo-title { font-size: 22px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.promo-title span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.85); display: block; }
.promo-price-box {
    background: rgba(0,0,0,0.22); border-radius: 12px; padding: 12px 16px;
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px;
}
.promo-old { font-size: 15px; color: rgba(255,255,255,0.45); text-decoration: line-through; font-weight: 600; }
.promo-arrow { font-size: 18px; color: rgba(255,255,255,0.5); }
.promo-new { font-size: 32px; font-weight: 900; color: #ffd166; letter-spacing: -0.02em; }
.promo-sub { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 7px; }
.promo-body { padding: 20px 24px 24px; }
.promo-timer-wrap { text-align: center; margin-bottom: 16px; }
.promo-timer-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e74c3c; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.promo-timer-dot { width: 7px; height: 7px; border-radius: 50%; background: #e74c3c; display: inline-block; }
.promo-timer { display: flex; align-items: center; justify-content: center; gap: 8px; }
.promo-timer-block { background: #111827; border-radius: 10px; padding: 10px 18px; text-align: center; }
.promo-timer-num { font-size: 32px; font-weight: 900; color: #fff; line-height: 1; min-width: 36px; }
.promo-timer-unit { font-size: 9px; color: #6b7280; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 3px; }
.promo-timer-sep { font-size: 30px; font-weight: 900; color: #374151; margin-bottom: 14px; }
.promo-warning { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; font-size: 12px; color: #7f1d1d; line-height: 1.6; text-align: center; margin-bottom: 16px; }
.promo-warning strong { color: #c0392b; }
.promo-claim-btn {
    width: 100%; height: 52px; background: linear-gradient(135deg,var(--orange),var(--orange-dark));
    color: #fff; border: none; border-radius: 12px; font-size: 15px; font-weight: 800;
    cursor: pointer; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(238,156,45,0.4); font-family: 'Inter',sans-serif;
}
.promo-dismiss-btn { width: 100%; height: 36px; background: transparent; border: none; color: var(--ink3); font-size: 13px; cursor: pointer; font-family: 'Inter',sans-serif; }
.promo-expired { display: none; text-align: center; padding: 8px 0; }
.promo-expired.active { display: block; }

/* Promo applied badge */
.promo-badge { background: #dcfce7; border: 1px solid #86efac; border-radius: 8px; padding: 8px 12px; font-size: 12px; color: #166534; font-weight: 600; text-align: center; margin-bottom: 12px; display: none; align-items: center; justify-content: center; gap: 6px; }
.promo-badge.show { display: flex; }

/* ══════════════════ ANIMATIONS ══════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:768px) {
    .footer-links { justify-content: center; flex-wrap: wrap; }
    footer { flex-direction: column; text-align: center; }
    .steps-row { grid-template-columns: 1fr; gap: 30px; }
    .steps-row::before { display: none; }
}