/* ============================================================
   COLE Landing — Clean Design System (REPARADO v2)
   Scope: Landing page only
   Paleta: azul oscuro #0b2a42 + ámbar #E8A317 sobre fondo claro
   ============================================================ */

/* === FORZAR TEMA CLARO ===
   color-scheme: light evita que el navegador aplique inversión
   automática de colores cuando el usuario tiene el SO en modo oscuro.
   Esto era la causa raíz de los textos invisibles. */
html, body {
    color-scheme: light only;
    background: #FAFBFF !important;
    overflow-x: hidden;
    max-width: 100%;
}
body.lp {
    background: #FAFBFF !important;
    color: #0b2a42 !important;
}

/* === TOKENS === */
:root {
    color-scheme: light;
    --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

    /* Colores de marca */
    --primary: #E8A317;
    --primary-dark: #CC8F0E;
    --primary-light: #F5C542;
    --primary-soft: #FFF8E6;
    --primary-border: #F0E0C0;

    --navy: #0b2a42;
    --navy-soft: #1a3a55;

    --secondary: #06B6D4;
    --accent: #F59E0B;

    /* Fondos y superficies — siempre claros */
    --bg: #FAFBFF;
    --bg-alt: #F1F3FB;
    --bg-card: #FFFFFF;

    /* Tipografía */
    --text: #0b2a42;
    --text-secondary: #475569;
    --text-muted: #64748B;

    --border: rgba(11,42,66,0.12);
    --shadow-sm: 0 1px 3px rgba(11,42,66,0.06);
    --shadow-md: 0 4px 12px rgba(11,42,66,0.08);
    --shadow-lg: 0 12px 36px rgba(11,42,66,0.12);
    --radius: 16px;
    --radius-pill: 980px;
    --ease: cubic-bezier(0.22,1,0.36,1);
}

/* IMPORTANTE: forzamos tema claro. Antes el bloque
   @media (prefers-color-scheme: dark) cambiaba los tokens
   y eso provocaba textos blancos sobre fondos blancos en
   usuarios con dark mode del SO. */

/* === RESET === */
.lp { font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.6; scroll-behavior: smooth; }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box; margin: 0; padding: 0; }
.lp img { max-width: 100%; height: auto; display: block; }
.lp a { color: inherit; text-decoration: none; }
.lp ul { list-style: none; }
body.lp { background: var(--bg); color: var(--text); }

/* === CONTAINER === */
.lp-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .lp-container { padding: 0 40px; } }

/* === HERO === */
.lp-hero {
    background: #ffffff;
    padding: 5rem 2rem;
    min-height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}
.lp-hero__bg { display: none; }
.lp-hero__content { position: relative; z-index: 1; flex: 1; min-width: 300px; }

.lp-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--primary-soft);
    color: var(--primary-dark);
    border: 1px solid var(--primary-border);
    margin-bottom: 1rem;
}
.lp-hero__title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.2;
    margin-bottom: 1rem;
}
.lp-hero__title .gradient-text { color: var(--primary); }
.lp-hero__subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.lp-hero__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lp-hero__stats { display: flex; gap: 48px; justify-content: center; margin-top: 32px; }
.lp-hero__stat { text-align: center; }
.lp-hero__stat-number { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--primary); line-height: 1.1; }
.lp-hero__stat-label { font-size: 0.8125rem; color: var(--text-muted); margin-top: 4px; }

@media (max-width: 640px) {
    .lp-hero__stats { gap: 24px; }
    .lp-hero__stat-number { font-size: 1.8rem; }
}

/* === BUTTONS === */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 28px; border: 2px solid transparent; border-radius: var(--radius-pill);
    font-family: var(--font); font-size: 0.875rem; font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
    white-space: nowrap; line-height: 1.4;
    text-decoration: none;
}
.lp-btn:active { transform: scale(0.97); }

.lp-btn--primary {
    background: var(--primary);
    color: #ffffff;
    border-color: var(--primary);
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
}
.lp-btn--primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: #ffffff;
    transform: scale(1.03);
}

.lp-btn--secondary {
    background: #ffffff;
    color: var(--navy);
    border: 2px solid var(--navy);
    padding: 14px 32px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1rem;
}
.lp-btn--secondary:hover {
    background: var(--navy);
    color: #ffffff;
    border-color: var(--navy);
}

.lp-btn--ghost {
    background: transparent;
    color: var(--navy);
    border: none;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.95rem;
}
.lp-btn--ghost:hover { color: var(--primary-dark); background: var(--primary-soft); }

.lp-btn--white {
    background: #ffffff;
    color: var(--primary-dark);
    border-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.lp-btn--white:hover {
    background: var(--primary-soft);
    color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
}

.lp-btn--lg { padding: 16px 40px; font-size: 1rem; }
.lp-btn--sm { padding: 10px 22px; font-size: 0.8125rem; }

/* === BOTONES LEGACY (cole-btn) usados en secciones ilustradas ===
   Estas clases NO existían en el CSS original — por eso los botones
   "Empezar ahora", "Hacer un test de prueba", "Únete gratis" salían
   sin estilos (texto blanco sin fondo = invisible). */
.cole-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 32px; border: 2px solid transparent; border-radius: 8px;
    font-family: var(--font); font-size: 1rem; font-weight: 600;
    cursor: pointer; text-decoration: none;
    transition: transform 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cole-btn-primary {
    background: var(--primary);
    color: #ffffff !important;
    border-color: var(--primary);
}
.cole-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: scale(1.03);
}
.cole-btn-secondary {
    background: #ffffff;
    color: var(--navy) !important;
    border-color: var(--navy);
}
.cole-btn-secondary:hover {
    background: var(--navy);
    color: #ffffff !important;
}

/* === NAV === */
.lp-nav {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0 2rem;
}
.lp-nav.scrolled {
    background: #ffffff;
    /* backdrop-filter removed for PWA compatibility */
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
    box-shadow: var(--shadow-sm);
}
.lp-nav__inner {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    min-height: 70px;
}
@media (min-width: 768px) { .lp-nav__inner { padding: 0 40px; } }

.lp-nav__logo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lp-nav__logo img { height: 32px; width: auto; }

.lp-nav__links { display: none; gap: 28px; align-items: center; }
/* 900px, no 768: con "Funciones/Servicios/Precios/Recursos/Blog/Contacto" (6
   items + boton dropdown) el menu de escritorio no cabia entre 768-1150px y
   el logo quedaba pegado al primer link - confirmado con captura real el
   03-09-2026. Se redujo tambien el contenido (de 6 links sueltos a 2 + un
   solo desplegable) para que quepa con holgura desde este punto. */
@media (min-width: 900px) { .lp-nav__links { display: flex; } }
.lp-nav__links a {
    color: var(--navy);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: color 0.3s;
}
.lp-nav__links a:hover { color: var(--primary-dark); }

/* Desplegable "Recursos gratis" - agrupa las herramientas publicas
   (temario, test CI, quiz, cards, carnets) para que quepan sin partirse
   en varias lineas cuando el nav crece. Se abre con :hover/:focus-within,
   sin JS, para que tambien funcione con teclado (Tab). */
.lp-nav__dropdown { position: relative; }
.lp-nav__dropdown-trigger {
    display: flex; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; padding: 0;
    color: var(--navy); font-weight: 500; font-size: 0.95rem; font-family: var(--font);
    white-space: nowrap;
}
.lp-nav__dropdown-trigger:hover, .lp-nav__dropdown:focus-within .lp-nav__dropdown-trigger { color: var(--primary-dark); }
.lp-nav__dropdown-trigger svg { transition: transform 0.2s; flex-shrink: 0; }
.lp-nav__dropdown:hover .lp-nav__dropdown-trigger svg,
.lp-nav__dropdown:focus-within .lp-nav__dropdown-trigger svg { transform: rotate(180deg); }
.lp-nav__dropdown-menu {
    display: none; position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%); background: #fff; border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.1));
    padding: 8px; min-width: 200px; z-index: 1001;
}
.lp-nav__dropdown-menu::before {
    content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
    width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}
.lp-nav__dropdown:hover .lp-nav__dropdown-menu,
.lp-nav__dropdown:focus-within .lp-nav__dropdown-menu { display: block; }
.lp-nav__dropdown-menu a {
    display: block; padding: 10px 14px; border-radius: 8px; white-space: nowrap;
    font-size: 0.9rem;
}
.lp-nav__dropdown-menu a:hover { background: var(--primary-soft); }

.lp-nav__actions { display: none; gap: 12px; align-items: center; }
@media (min-width: 900px) { .lp-nav__actions { display: flex; } }

.lp-nav__hamburger {
    display: flex; background: none; border: none; cursor: pointer; padding: 8px;
    color: var(--navy); border-radius: 10px;
    /* Sin esto, el panel .lp-nav__mobile (position:fixed, z-index:999, hijo
       hermano dentro del mismo <nav>) tapaba el propio boton una vez
       abierto: al no tener el boton su propio z-index, pierde el apilamiento
       frente a cualquier hermano posicionado con z-index explicito, pase lo
       que pase con el z-index del <nav> padre. Sin poder tocar el boton,
       la unica forma de cerrar el menu era tocar un enlace y navegar -
       confirmado en produccion el 02-09-2026 con elementFromPoint(). */
    position: relative; z-index: 1001;
}
@media (min-width: 900px) { .lp-nav__hamburger { display: none; } }
/* El panel movil ya trae su propio boton de cerrar (mismo tamaño de logo,
   mas comodo de alcanzar con el pulgar en pantallas grandes) - ocultar este
   para no tener dos "X" visibles a la vez. */
.lp-nav__hamburger.is-open { visibility: hidden; }

/* Panel movil: antes era una lista plana de 10 links (993px de contenido en
   un viewport de 844px, iPhone 14 - los botones de login/registro quedaban
   fuera de la vista sin hacer scroll) sin jerarquia ni separacion entre
   "paginas de la landing" y "herramientas gratuitas". Rediseñado con: header
   propio (logo + boton cerrar, ya no un padding-top fijo adivinando donde
   queda la barra superior), los botones de accion arriba del todo -lo
   primero que se ve-, y los enlaces agrupados en dos bloques con etiqueta,
   cada uno con icono para escanear rapido. Scroll propio (100dvh, no 100vh)
   por si el contenido no cupiera en una pantalla muy baja. */
.lp-nav__mobile {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: #ffffff;
    flex-direction: column; overflow-y: auto;
    height: 100vh; height: 100dvh;
    padding: 0 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.lp-nav__mobile.open { display: flex; }

.lp-nav__mobile-head {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 70px; padding-top: env(safe-area-inset-top, 0px);
    margin-bottom: 8px;
}
.lp-nav__mobile-head .lp-nav__logo { font-size: 1.25rem; }
.lp-nav__mobile-close {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -10px;
    background: var(--bg-alt, #f5f6f9); border: none; border-radius: 12px;
    color: var(--navy); cursor: pointer; flex-shrink: 0;
}

.lp-nav__mobile-actions {
    display: flex; flex-direction: column; gap: 10px; margin: 8px 0 20px;
}
.lp-nav__mobile-actions .lp-btn { width: 100%; justify-content: center; padding: 14px; font-size: 1rem; }
.lp-nav__mobile-cta { width: 100%; justify-content: center; margin: 8px 0 20px; padding: 14px; font-size: 1rem; }

.lp-nav__mobile-group + .lp-nav__mobile-group { margin-top: 8px; }
.lp-nav__mobile-label {
    display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-muted); padding: 16px 4px 8px;
}
.lp-nav__mobile a {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.02rem; font-weight: 600; color: var(--navy);
    padding: 13px 4px; border-bottom: 1px solid var(--border);
    min-height: 44px;
}
.lp-nav__mobile a svg { flex-shrink: 0; color: var(--text-muted); }
.lp-nav__mobile-group:last-child a:last-child { border-bottom: none; }
.lp-nav__mobile a:hover { color: var(--primary-dark); }

/* === TRUST BAR === */
.lp-trust { padding: 24px 0; text-align: center; }
.lp-trust__label { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 24px; }
.lp-trust__logos { display: flex; align-items: center; justify-content: center; gap: 48px; flex-wrap: wrap; opacity: 0.75; }
.lp-trust__logos span { font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); }

/* === SECTIONS === */
.lp-section { padding: 64px 0; position: relative; }
.lp-section--alt { background: var(--bg-alt); }
.lp-section__header { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.lp-section__badge {
    display: inline-block; padding: 6px 16px;
    background: var(--primary-soft); border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 700; color: var(--primary-dark);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px;
    border: 1px solid var(--primary-border);
}
.lp-section__title {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
    line-height: 1.12; letter-spacing: -0.03em; margin-bottom: 16px;
    color: var(--navy);
}
.lp-section__subtitle { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; }

/* === FEATURE CARDS === */
.lp-features-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .lp-features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-features-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-feature {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 36px;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lp-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-feature__icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; color: #fff;
    background: var(--primary);
}
.lp-feature__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.lp-feature__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; }

/* === SERVICE CARDS === */
.lp-services-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .lp-services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-services-grid { grid-template-columns: repeat(4, 1fr); } }

.lp-service {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px; text-align: center;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
    display: flex; flex-direction: column;
}
.lp-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-service__icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary-soft); color: var(--primary-dark);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.lp-service__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.lp-service__text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

/* === STEPS === */
.lp-steps-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .lp-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-steps-grid { grid-template-columns: repeat(4, 1fr); } }

.lp-step { text-align: center; }
.lp-step__number {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary);
    color: #fff; font-size: 1.25rem; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.lp-step__title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.lp-step__text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; }

/* === PRICING CARDS === */
.lp-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 768px) { .lp-pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-pricing {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 36px; position: relative;
    transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.lp-pricing:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lp-pricing--featured {
    border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-lg);
    transform: scale(1.03);
}
.lp-pricing--featured:hover { transform: scale(1.03) translateY(-4px); }
.lp-pricing__popular {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--primary);
    color: #fff; padding: 4px 20px; border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.lp-pricing__name { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--navy); }
.lp-pricing__price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 8px; color: var(--navy); }
.lp-pricing__price span { font-size: 1rem; font-weight: 500; color: var(--text-muted); }
.lp-pricing__desc { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 24px; }
.lp-pricing__features { margin-bottom: 32px; }
.lp-pricing__features li {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; font-size: 0.875rem; color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
}
.lp-pricing__features li svg { color: var(--primary); flex-shrink: 0; }
.lp-pricing .lp-btn { width: 100%; }

/* === TESTIMONIALS === */
.lp-testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .lp-testimonials-grid { grid-template-columns: repeat(3, 1fr); } }

.lp-testimonial {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 32px;
}
.lp-testimonial__stars { display: flex; gap: 2px; margin-bottom: 16px; }
.lp-testimonial__text { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 20px; }
.lp-testimonial__author { display: flex; flex-direction: column; }
.lp-testimonial__name { font-weight: 600; font-size: 0.875rem; color: var(--navy); }
.lp-testimonial__role { font-size: 0.8125rem; color: var(--text-muted); }

/* === FAQ === */
.lp-faq { max-width: 800px; margin: 0 auto; }
.lp-faq__item { border-bottom: 1px solid var(--border); }
.lp-faq__question {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    width: 100%; padding: 20px 0; background: none; border: none; cursor: pointer;
    font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--navy); text-align: left;
}
.lp-faq__question svg { flex-shrink: 0; transition: transform 0.3s var(--ease); color: var(--primary-dark); }
.lp-faq__item.open .lp-faq__question svg { transform: rotate(180deg); }
.lp-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); }
.lp-faq__answer p { padding: 0 0 20px; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; }

/* === CTA === */
.lp-cta {
    background: var(--navy);
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.lp-cta__bg {
    position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
}
.lp-cta__content { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; color: #fff; }
.lp-cta__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.12; margin-bottom: 16px; color: #ffffff; }
.lp-cta__subtitle { font-size: 1.1rem; opacity: 0.9; line-height: 1.7; margin-bottom: 32px; color: rgba(255,255,255,0.9); }

/* === FOOTER === */
.lp-footer {
    background: var(--navy);
    color: #fff;
    padding: 3rem 2rem 1.5rem;
    position: relative;
    overflow: hidden;
}
.lp-footer a { color: rgba(255,255,255,0.75); transition: color 0.3s var(--ease); }
.lp-footer a:hover { color: #fff; }
.lp-footer__inner { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 48px; position: relative; z-index: 1; }
@media (min-width: 768px) { .lp-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; } }

.lp-footer__logo {
    font-size: 1.25rem; font-weight: 800; color: #fff;
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.lp-footer__tagline { font-size: 0.875rem; margin-bottom: 8px; color: rgba(255,255,255,0.7); }
.lp-footer__col-title { color: #fff; font-size: 0.875rem; font-weight: 700; margin-bottom: 16px; }
.lp-footer__col li { margin-bottom: 10px; }
.lp-footer__col a { font-size: 0.875rem; }
.lp-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.12); padding: 24px 0;
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: 16px; font-size: 0.8125rem;
    color: rgba(255,255,255,0.65);
    position: relative; z-index: 1;
}
.lp-footer__legal { display: flex; gap: 24px; }

/* === COOKIE BANNER === */
.lp-cookie {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999;
    background: rgba(11,42,66,0.95); backdrop-filter: blur(20px);
    color: rgba(255,255,255,0.9); padding: 16px 24px;
    display: flex; align-items: center; justify-content: center;
    gap: 20px; flex-wrap: wrap; font-size: 0.8125rem;
    transform: translateY(100%); transition: transform 0.5s var(--ease);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.lp-cookie.visible { transform: translateY(0); }
.lp-cookie a { color: var(--primary-light); text-decoration: underline; text-underline-offset: 2px; }
/* Botones del banner cookies sobre fondo oscuro */
.lp-cookie .lp-btn--ghost { color: #ffffff; }
.lp-cookie .lp-btn--ghost:hover { color: var(--primary-light); background: rgba(255,255,255,0.08); }
.lp-cookie .lp-btn--primary { color: #ffffff; }

/* === BANNER SUPERIOR === */
.lp-banner {
    padding: 10px 24px; text-align: center; font-size: 0.8125rem; font-weight: 500;
    background: var(--primary); color: #fff;
}
.lp-banner a { color: inherit; text-decoration: underline; margin-left: 8px; font-weight: 700; }

/* === AUTH PAGES === */
.lp-auth {
    font-family: var(--font); min-height: 100vh;
    background: var(--navy);
    display: flex; align-items: center; justify-content: center;
    padding: 24px; color: #ffffff; position: relative; overflow: hidden;
}
.lp-auth::before, .lp-auth::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
}
.lp-auth::before {
    width: 420px; height: 420px; background: var(--primary); top: -100px; right: -100px;
}
.lp-auth::after {
    width: 360px; height: 360px; background: #8B5CF6; bottom: -80px; left: -80px;
}

/* === PRINT === */
@media print {
    .lp-nav, .lp-cookie, .lp-cta__bg { display: none; }
    .lp-section,
    .lp-feature, .lp-service, .lp-pricing, .lp-testimonial { border: 1px solid #ddd; break-inside: avoid; }
}

/* === Animación flotante para ilustraciones === */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* Texto con gradiente — usado en .lp-hero__title .gradient-text */
.gradient-text {
    color: var(--primary);
}

/* === Hero responsive === */
@media (max-width: 768px) {
    .lp-hero { flex-direction: column; text-align: center; padding: 2rem 1rem; }
    .lp-hero__title { font-size: 2.2rem; }
    .lp-hero__image { order: -1; max-width: 300px; margin: 0 auto; }
}

/* === Títulos de sección — antes en amarillo con bajo contraste ===
   Ahora navy oscuro sobre fondo claro = legibles. */
.lp-section h2,
.lp-section h3 {
    color: var(--navy);
}
.lp-cta h2 {
    color: #ffffff;
}

.lp-feature__title,
.lp-service__title,
.lp-step__title,
.lp-pricing__name,
.lp-testimonial__name {
    color: var(--navy);
}

/* ============================================================
   BLOQUE DE BLINDAJE FINAL — colores literales con !important
   Soluciona los textos invisibles cuando el usuario tiene el
   sistema operativo en modo oscuro o cuando hay reglas heredadas
   de otros CSS que sobreescriben las variables.
   ============================================================ */

/* --- HTML / BODY: fondo claro forzado (evita bandas negras del nav) --- */
html { background: #FAFBFF !important; }
body, body.lp { background: #FAFBFF !important; color: #0b2a42 !important; }

/* --- NAV: fondo blanco a TODA anchura, textos navy oscuros --- */
.lp-nav { background: #ffffff !important; color: #0b2a42 !important; width: 100% !important; }
.lp-nav__logo { color: #0b2a42 !important; }
.lp-nav__links a { color: #0b2a42 !important; }
.lp-nav__links a:hover { color: #CC8F0E !important; }
.lp-nav__actions .lp-btn--ghost { color: #0b2a42 !important; }
.lp-nav__actions .lp-btn--ghost:hover { color: #CC8F0E !important; background: #FFF8E6 !important; }
.lp-nav__actions .lp-btn--primary { color: #ffffff !important; background: #E8A317 !important; }
.lp-nav__hamburger { color: #0b2a42 !important; }
.lp-nav__mobile { background: #ffffff !important; }
.lp-nav__mobile a { color: #0b2a42 !important; }

/* --- CARDS (features, services, pricing, testimonials, steps): fondo BLANCO --- */
.lp-feature,
.lp-service,
.lp-pricing,
.lp-testimonial {
    background: #ffffff !important;
    color: #0b2a42 !important;
}
.lp-feature__title,
.lp-service__title,
.lp-step__title,
.lp-pricing__name,
.lp-testimonial__name { color: #0b2a42 !important; }

.lp-feature__text,
.lp-service__text,
.lp-step__text,
.lp-pricing__desc,
.lp-pricing__features li,
.lp-testimonial__text { color: #475569 !important; }

/* --- BOTONES SECUNDARIOS: fondo blanco con texto navy bien visible --- */
.lp-btn--secondary,
a.lp-btn--secondary {
    background: #ffffff !important;
    color: #0b2a42 !important;
    border: 2px solid #0b2a42 !important;
}
.lp-btn--secondary:hover,
a.lp-btn--secondary:hover {
    background: #0b2a42 !important;
    color: #ffffff !important;
    border-color: #0b2a42 !important;
}

/* --- BOTONES PRIMARY: ámbar con texto blanco --- */
.lp-btn--primary,
a.lp-btn--primary {
    background: #E8A317 !important;
    color: #ffffff !important;
    border: 2px solid #E8A317 !important;
}
.lp-btn--primary:hover,
a.lp-btn--primary:hover {
    background: #CC8F0E !important;
    color: #ffffff !important;
    border-color: #CC8F0E !important;
}

/* --- BOTONES BLANCOS (en CTA oscuro) --- */
.lp-btn--white,
a.lp-btn--white {
    background: #ffffff !important;
    color: #CC8F0E !important;
}
.lp-btn--white:hover,
a.lp-btn--white:hover {
    background: #FFF8E6 !important;
    color: #CC8F0E !important;
}

/* --- FAQ: preguntas y respuestas legibles --- */
.lp-faq__question { color: #0b2a42 !important; background: transparent !important; }
.lp-faq__question span { color: #0b2a42 !important; }
.lp-faq__question svg { color: #CC8F0E !important; }
.lp-faq__answer p { color: #475569 !important; }

/* --- SECCIONES Y FONDOS GENERALES --- */
.lp-section { background: transparent; }
.lp-section--alt { background: #F1F3FB !important; }
.lp-section__title { color: #0b2a42 !important; }
.lp-section__subtitle { color: #475569 !important; }
.lp-section__badge { color: #CC8F0E !important; background: #FFF8E6 !important; }

/* --- HERO --- */
.lp-hero { background: #ffffff !important; }
.lp-hero__title { color: #0b2a42 !important; }
.lp-hero__subtitle { color: #475569 !important; }
.lp-hero__badge { color: #CC8F0E !important; background: #FFF8E6 !important; }

/* --- CTA: navy oscuro con texto blanco. NO amarillo. --- */
.lp-cta {
    background: #0b2a42 !important;
    color: #ffffff !important;
}
.lp-cta__bg {
    background: linear-gradient(135deg, #0b2a42 0%, #1a3a55 100%) !important;
}
.lp-cta__title { color: #ffffff !important; }
.lp-cta__subtitle { color: rgba(255,255,255,0.9) !important; }

/* --- FOOTER --- */
.lp-footer { background: #0b2a42 !important; color: #ffffff !important; }
.lp-footer__logo { color: #ffffff !important; }
.lp-footer__col-title { color: #ffffff !important; }
.lp-footer a { color: rgba(255,255,255,0.75) !important; }
.lp-footer a:hover { color: #ffffff !important; }
.lp-footer__tagline { color: rgba(255,255,255,0.7) !important; }
.lp-footer__bottom { color: rgba(255,255,255,0.65) !important; }