/* ===================================================================
   public_pages.css
   -------------------------------------------------------------------
   Estilos compartidos por TODAS las pantallas públicas del sistema:
     - Landing /about/ (templates/system/landing/fitness.html)
     - Navbar público (templates/components/public_navbar.html)
     - Login           (user_auth/templates/auth/sign-in-v2.html)
     - Signup cliente  (user_auth/templates/auth/sign-up-v2.html)
     - Signup empresa  (user_auth/templates/auth/sign-up-company-v2.html)

   Convención: este archivo se carga UNA VEZ por template público en
   su {% block heading %} o {% block extra_css %} con:
     <link rel="stylesheet" href="{% static 'css/public_pages.css' %}">

   No se carga desde base.html para no inflar las pantallas admin.

   Estructura:
     §1  Paleta compartida (CSS variables + dark-mode)
     §2  Reset suave para body.landing-page
     §3  Navbar público (.public-navbar / .pn-*)
     §4  Auth split layout (.auth-split-* + blobs + gradient submit)
     §5  Auth: stepper y bullets del signup-company
     §6  Landing: utilidades, botones, hero, secciones, footer
     §7  Landing: responsive
   =================================================================== */


/* ====================================================================
   §1 — Paleta compartida (CSS variables)
   ==================================================================== */
:root {
    /* AUTH — usado por sign-in, sign-up, sign-up-company */
    --auth-bg-primary: #f5f7fa;
    --auth-bg-soft: #ffffff;
    --auth-accent: #5e72e4;
    --auth-accent-2: #4250a0;
    --auth-gradient: linear-gradient(135deg, #5e72e4, #4250a0);
    --auth-text-primary: #11213b;
    --auth-text-muted: #6b7280;
    --auth-border: rgba(94, 114, 228, 0.15);
    --auth-shadow-soft: 0 4px 24px rgba(94, 114, 228, 0.08);

    /* NAVBAR público (alias de la paleta auth con prefijo --pn-) */
    --pn-text: #11213b;
    --pn-text-muted: #6b7280;
    --pn-accent: #5e72e4;
    --pn-border: rgba(94, 114, 228, 0.15);
    --pn-gradient: linear-gradient(135deg, #5e72e4, #4250a0);

    /* LANDING — used by body.landing-page */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fc;
    --border: rgba(94, 114, 228, 0.15);
    --border-hover: rgba(94, 114, 228, 0.4);
    --accent: #5e72e4;
    --accent-2: #4250a0;
    --text-primary: #11213b;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --gradient: linear-gradient(135deg, #5e72e4, #4250a0);
    --radius: 12px;
    --radius-lg: 20px;
    --transition: 0.3s ease;
    --shadow-glow: 0 4px 24px rgba(94, 114, 228, 0.10);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
}

body.dark-mode {
    --auth-bg-primary: #0f172a;
    --auth-bg-soft: #1e293b;
    --auth-text-primary: #f8fafc;
    --auth-text-muted: #cbd5e1;
    --auth-border: rgba(255, 255, 255, 0.1);
    --auth-shadow-soft: 0 4px 24px rgba(139, 156, 247, 0.18);

    --pn-text: #f8fafc;
    --pn-text-muted: #cbd5e1;
    --pn-accent: #8b9cf7;
    --pn-border: rgba(255, 255, 255, 0.1);
    --pn-gradient: linear-gradient(135deg, #a3b1fa, #5e72e4);

    /* color-scheme dark le dice al browser que renderice form controls
       nativos (dropdown del <select>, scrollbar, autofill default) en
       paleta oscura. Sin esto, el popup de options sale blanco por más
       CSS que le pongas. */
    color-scheme: dark;
}

body.landing-page.dark-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #334155;
    --bg-card-hover: #475569;
    --border: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(139, 156, 247, 0.6);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --accent: #8b9cf7;
    --accent-2: #5e72e4;
    --gradient: linear-gradient(135deg, #a3b1fa, #5e72e4);
    --shadow-glow: 0 4px 24px rgba(139, 156, 247, 0.20);
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.3);
}


/* ====================================================================
   §1.5 — Logo dual (light/dark) — partial: system/components/brand_logo.html
   --------------------------------------------------------------------
   El partial renderiza AMBAS imágenes y este CSS hace el show/hide
   reactivo al toggle body.dark-mode. Si en el futuro queremos cambiar
   a <picture> con prefers-color-scheme, se toca SOLO este bloque + el
   partial — los consumidores no se enteran.
   ==================================================================== */
.brand-logo {
    max-width: 100%;
    height: auto;
}

/* Por default mostramos light, ocultamos dark.
   !important: ver landing_v3.css §1.5 — protege el contrato del partial
   contra reglas más específicas posteriores (.auth-brand-circle img,
   .pn-logo img, etc.) que puedan definir display y romper el show/hide. */
.brand-logo--dark { display: none !important; }
body.dark-mode .brand-logo--light { display: none !important; }
body.dark-mode .brand-logo--dark  { display: revert !important; }


/* ====================================================================
   §2 — Body reset para auth y landing
   ==================================================================== */

/* Auth: pinta html+body con el bg primario para que NO se vea ningún bloque
   oscuro residual del theme.css por debajo del split layout. */
html.auth-page,
body.auth-page {
    margin: 0;
    padding: 0;
    background: var(--auth-bg-primary) !important;
    min-height: 100vh;
}

body.landing-page {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
}
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6 { color: var(--text-primary); }
body.landing-page a  { text-decoration: none; color: inherit; }
body.landing-page ul { list-style: none; }
body.landing-page * { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }


/* ====================================================================
   §3 — Navbar público (.public-navbar / .pn-*)
   ==================================================================== */
.public-navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 16px 0;
    transition: all .3s ease;
    background: transparent;
}
.public-navbar.scrolled,
.public-navbar.solid {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--pn-border);
    padding: 12px 0;
}
body.dark-mode .public-navbar.scrolled,
body.dark-mode .public-navbar.solid {
    background: rgba(30, 41, 59, 0.95);
}

.pn-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.pn-logo {
    font-size: 1.25rem; font-weight: 800;
    color: var(--pn-text);
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.pn-logo img { height: 32px; width: auto; }
.pn-logo:hover,
.pn-logo:focus,
.pn-logo:active {
    color: var(--pn-text);
    text-decoration: none;
    opacity: 1;
}

.pn-links {
    display: flex; gap: 32px;
    list-style: none; margin: 0; padding: 0;
}
.pn-links a {
    color: var(--pn-text-muted);
    font-size: 0.92rem; font-weight: 500;
    text-decoration: none;
    transition: color .3s ease;
    position: relative;
    padding: 4px 0;
}
.pn-links a:hover { color: var(--pn-text); }
.pn-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 2px;
    background: var(--pn-gradient);
    transition: width .3s ease;
}
.pn-links a:hover::after,
.pn-links a.active::after { width: 100%; }
.pn-links a.active { color: var(--pn-accent); }

.pn-cta { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.pn-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px; border-radius: 50px;
    font-weight: 600; font-size: 0.9rem;
    transition: all .3s ease; text-decoration: none;
    border: none; cursor: pointer; white-space: nowrap;
}
.pn-btn-ghost {
    color: var(--pn-text);
    background: transparent;
}
.pn-btn-ghost:hover {
    color: var(--pn-accent);
    background: rgba(94, 114, 228, 0.08);
}
.pn-btn-accent {
    background: var(--pn-gradient);
    color: #fff;
    box-shadow: 0 4px 16px rgba(94, 114, 228, 0.3);
}
.pn-btn-accent:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(94, 114, 228, 0.4);
}
.pn-theme-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--pn-border);
    background: transparent;
    color: var(--pn-text);
    display: flex; align-items: center; justify-content: center;
    transition: all .3s ease;
    cursor: pointer;
}
.pn-theme-toggle:hover {
    border-color: var(--pn-accent);
    color: var(--pn-accent);
}

.pn-hamburger {
    display: none;
    flex-direction: column; gap: 5px;
    padding: 4px; cursor: pointer;
    background: none; border: none;
}
.pn-hamburger span {
    display: block;
    width: 24px; height: 2px;
    background: var(--pn-text);
    transition: all .3s ease;
    border-radius: 2px;
}
.pn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pn-hamburger.open span:nth-child(2) { opacity: 0; }
.pn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
    .pn-links {
        display: none;
        position: fixed; top: 70px; left: 0; right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column; align-items: center;
        padding: 28px; gap: 24px;
        border-bottom: 1px solid var(--pn-border);
    }
    body.dark-mode .pn-links { background: rgba(30, 41, 59, 0.98); }
    .pn-links.open { display: flex; }
    .pn-hamburger { display: flex; }
    .pn-cta .pn-btn-ghost { display: none; }
}
@media (max-width: 480px) {
    .pn-logo span { display: none; }
}


/* ====================================================================
   §4 — Auth split layout (.auth-split-* + blobs + gradient submit)
   ==================================================================== */
.auth-split-wrapper {
    min-height: 100vh;
    display: flex;
    background: var(--auth-bg-primary);
}

/* ──────────────────────────────────────────────────────────────────
   Auth dark mode toggle inline — vive a la derecha del .auth-brand
   dentro del card, dentro de .auth-brand-row (space-between).
   ────────────────────────────────────────────────────────────────── */
.auth-dark-toggle {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--auth-border);
    background: var(--auth-bg-soft);
    color: var(--auth-text-primary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: var(--auth-shadow-soft);
    transition: all .25s ease;
    font-size: .95rem;
    flex-shrink: 0;
}
.auth-dark-toggle:hover {
    border-color: var(--auth-accent);
    color: var(--auth-accent);
    transform: scale(1.05);
}

.auth-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}
.auth-brand-row .auth-brand { margin-bottom: 0; }

.auth-brand {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.auth-brand:hover,
.auth-brand:focus,
.auth-brand:active {
    text-decoration: none;
    color: inherit;
    opacity: 1;
}
.auth-brand-circle {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.auth-brand-circle img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
}
.auth-brand-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--auth-text-primary);
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}
@media (max-width: 480px) {
    .auth-brand-name { font-size: 1.15rem; }
}
.auth-split-card a.auth-back-link {
    margin-left: auto;
    font-size: .82rem;
    color: var(--auth-text-muted);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color .15s ease;
}
.auth-split-card a.auth-back-link:hover {
    color: var(--auth-accent);
    text-decoration: none;
}
.auth-split-card a.auth-back-link i { font-size: .9rem; }

.auth-split-form {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--auth-bg-primary);
    position: relative;
    overflow: hidden;
}
.auth-split-form::before {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: var(--auth-accent);
    filter: blur(100px);
    opacity: .08;
    top: -100px; left: -120px;
    animation: authFloatBlob 10s ease-in-out infinite;
    pointer-events: none;
}
.auth-split-form::after {
    content: '';
    position: absolute;
    width: 320px; height: 320px;
    border-radius: 50%;
    background: var(--auth-accent-2);
    filter: blur(110px);
    opacity: .06;
    bottom: -80px; right: -100px;
    animation: authFloatBlob 12s ease-in-out infinite reverse;
    pointer-events: none;
}
@keyframes authFloatBlob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-20px) scale(1.05); }
}

.auth-split-card {
    width: 100%;
    max-width: 440px;
    position: relative; z-index: 1;
    background: var(--auth-bg-soft);
    padding: 2.25rem 2rem;
    border-radius: 20px;
    border: 1px solid var(--auth-border);
    box-shadow: var(--auth-shadow-soft);
}
.auth-split-card h1 {
    color: var(--auth-text-primary);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.auth-split-card .form-label {
    color: var(--auth-text-primary);
    font-weight: 500;
}
.auth-split-card .form-control,
.auth-split-card .form-select,
.auth-split-card select.form-control,
.auth-split-card select.form-select,
.auth-split-card select {
    border: 1px solid var(--auth-border);
    border-radius: 10px;
    padding: .65rem .85rem;
    transition: border-color .2s, box-shadow .2s;
    background-color: var(--auth-bg-soft);
    color: var(--auth-text-primary);
}
.auth-split-card .form-control:focus,
.auth-split-card .form-select:focus,
.auth-split-card select:focus {
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 4px rgba(94, 114, 228, 0.12);
}
/* Bg del input MÁS oscuro que la card (#0f1a2e vs #1e293b) para que no
   se fundan visualmente. !important vence style.css que pinta
   select.form-select con color #3d3d3d (texto casi invisible en dark). */
body.dark-mode .auth-split-card .form-control,
body.dark-mode .auth-split-card .form-select,
body.dark-mode .auth-split-card select.form-control,
body.dark-mode .auth-split-card select.form-select,
body.dark-mode .auth-split-card select {
    background-color: #0f1a2e !important;
    color: var(--auth-text-primary) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}
body.dark-mode .auth-split-card .form-control::placeholder,
body.dark-mode .auth-split-card .form-select::placeholder {
    color: var(--auth-text-muted);
    opacity: .7;
}
/* Chevron del select en dark mode — style.css hace dark sobre claro */
body.dark-mode .auth-split-card select.form-select,
body.dark-mode .auth-split-card select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right .85rem center !important;
    background-size: 14px 12px !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.25rem !important;
}
body.dark-mode .auth-split-card select.form-select option,
body.dark-mode .auth-split-card select option {
    background-color: #0f1a2e !important;
    color: var(--auth-text-primary) !important;
}
/* Autofill del browser pisa bg con amarillo/blanco — neutralizar en ambos modos */
.auth-split-card .form-control:-webkit-autofill,
.auth-split-card .form-select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-bg-soft) inset !important;
    -webkit-text-fill-color: var(--auth-text-primary) !important;
    caret-color: var(--auth-text-primary);
    transition: background-color 5000s ease-in-out 0s;
}
.auth-split-card a:not(.btn):not(.bs-stepper a):not(.pricing-cta a):not(.btn-social):not(.auth-btn-submit) {
    color: var(--auth-accent);
    font-weight: 600;
    text-decoration: none;
}
.auth-split-card a:not(.btn):not(.bs-stepper a):not(.pricing-cta a):not(.auth-brand):not(.btn-social):not(.auth-btn-submit):hover {
    color: var(--auth-accent-2);
    text-decoration: underline;
}
.auth-split-card .text-muted { color: var(--auth-text-muted) !important; }

/* ── Social buttons ──────────────────────────────────────────────────
   Excluidos de las reglas de link genéricas de arriba.
   Light mode: look original del tema (gris neutro) — sin tocar.
   Dark mode: borde casi invisible, tint leve, icono apagado.
   Hover: fill de plataforma (theme.min.css) + glow ring del sistema.
   ──────────────────────────────────────────────────────────────────── */
.auth-split-card .btn-social {
    width: 38px;
    height: 38px;
    text-decoration: none !important;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.auth-split-card .btn-social:hover {
    text-decoration: none !important;
    transform: translateY(-2px);
    color: #fff;
    /* Anillo + glow siempre con el acento del sistema */
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.30),
                0 4px 16px rgba(94, 114, 228, 0.40);
}

/* Dark mode — borde apenas visible, tint de fondo, icono apagado */
body.dark-mode .auth-split-card .btn-social-outline {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--auth-text-muted);
}
body.dark-mode .auth-split-card .btn-social:hover {
    color: #fff;
    /* Glow más intenso en dark para que resalte sobre el fondo oscuro */
    box-shadow: 0 0 0 3px rgba(94, 114, 228, 0.40),
                0 4px 20px rgba(94, 114, 228, 0.55);
}

/* Variante con stepper (signup-company): card más ancha */
.auth-split-card.auth-split-card-wide {
    max-width: 580px;
    padding: 2rem 1.75rem;
}

/* ──────────────────────────────────────────────────────────────────
   Bootstrap stepper — neutralizar bg blanco hardcoded del theme y
   alinear paleta con el resto del auth.
   Bootstrap por default trae:
     .bs-stepper-header { background-color: #fff }
     .bs-stepper-line  { background-color: #ecebf1 }
     .bs-stepper-circle { background-color: #f5f4f8 }
   → Heredan del card para light/dark mode. Circle activo usa brand.
   ────────────────────────────────────────────────────────────────── */
.auth-split-card .bs-stepper-header {
    background-color: transparent;
    padding: 12px 0;
    border-radius: 0;
}
.auth-split-card .bs-stepper-line,
.auth-split-card .bs-stepper .line {
    background-color: var(--auth-border);
}
/* Step activo — sobrio en light (solid color), con glow extra en dark */
.auth-split-card .active .bs-stepper-circle {
    background-color: var(--auth-accent);
    color: #fff;
    font-weight: 700;
    transition: background-color .25s ease;
}
.auth-split-card .active .bs-stepper-label {
    color: var(--auth-text-primary);
    font-weight: 600;
}
body.dark-mode .auth-split-card .active .bs-stepper-circle {
    background: linear-gradient(135deg, #8b9cf7, #6E5BFF);
    box-shadow: 0 0 0 4px rgba(176, 152, 255, 0.2),
                0 4px 12px rgba(110, 91, 255, 0.4);
    transform: scale(1.05);
}
body.dark-mode .auth-split-card .active .bs-stepper-label {
    color: #B098FF;
}

/* Dark mode: circle inactivo dark + color de label muted */
body.dark-mode .auth-split-card .bs-stepper-circle {
    background-color: #23314a;
    color: var(--auth-text-muted);
}
body.dark-mode .auth-split-card .bs-stepper .step-trigger {
    color: var(--auth-text-muted);
}
body.dark-mode .auth-split-card .bs-stepper .step-trigger:hover,
body.dark-mode .auth-split-card .bs-stepper .step-trigger:focus {
    color: var(--auth-text-primary);
}

/* ──────────────────────────────────────────────────────────────────
   Headers de pasos: "Selecciona tu modelo de negocio" / "¡Casi terminamos!"
   plans-title viene de section_home.css sin color explícito (heredaba
   gris invisible sobre dark). Forzamos paleta auth.
   ────────────────────────────────────────────────────────────────── */
.auth-split-card .plans-title { color: var(--auth-text-primary); }
.auth-split-card .plans-subtitle { color: var(--auth-text-muted) !important; }

/* ──────────────────────────────────────────────────────────────────
   Cards de modelo de negocio (step 2): descripción recortada a 2 líneas.
   Blinda la altura de la card sin importar cuán larga sea la descripción
   del BusinessModel — el texto completo vive en el tooltip (title).
   La altura pareja la da `h-100` en la card + `g-3` en el grid.
   ────────────────────────────────────────────────────────────────── */
.model-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ──────────────────────────────────────────────────────────────────
   Bootstrap .card hardcoded a bg #fff — heredarlo a paleta auth en
   dark mode. Aplica a cards de business model (step 2) y resumen (step 3).
   ────────────────────────────────────────────────────────────────── */
body.dark-mode .auth-split-card .card {
    background-color: #0f1a2e;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--auth-text-primary);
}
/* Force todos los textos del card a paleta dark — incluyendo h1-h6 que
   no llevan clase text-dark explícita (caso del título "Fitness" en el
   business-model card). */
body.dark-mode .auth-split-card .card,
body.dark-mode .auth-split-card .card h1,
body.dark-mode .auth-split-card .card h2,
body.dark-mode .auth-split-card .card h3,
body.dark-mode .auth-split-card .card h4,
body.dark-mode .auth-split-card .card h5,
body.dark-mode .auth-split-card .card h6,
body.dark-mode .auth-split-card .card p,
body.dark-mode .auth-split-card .card b,
body.dark-mode .auth-split-card .card strong {
    color: var(--auth-text-primary);
}
body.dark-mode .auth-split-card .card .text-dark { color: var(--auth-text-primary) !important; }
body.dark-mode .auth-split-card .card .text-muted { color: var(--auth-text-muted) !important; }
/* bg-light de la card-icon → semitransparente blanco en dark */
body.dark-mode .auth-split-card .card .icon-shape.bg-light {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
body.dark-mode .auth-split-card .card .icon-shape.bg-light.text-muted i {
    color: var(--auth-text-muted) !important;
}
/* Card de business model en estado active (con border-top indigo) */
body.dark-mode .auth-split-card .card-hover-with-icon.active {
    background-color: rgba(94, 114, 228, 0.08);
    border-color: var(--auth-accent) !important;
}
/* Border util classes que usan en las cards (border-muted, border-light-success) */
body.dark-mode .auth-split-card .card.border-muted,
body.dark-mode .auth-split-card .border-muted {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.auth-btn-submit {
    background: var(--auth-gradient);
    color: #fff;
    border: none;
    padding: .75rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    transition: all .25s ease;
    box-shadow: 0 4px 16px rgba(94, 114, 228, 0.3);
}
.auth-btn-submit:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(94, 114, 228, 0.4);
}
.auth-btn-submit:disabled {
    opacity: .65;
    transform: none;
    cursor: not-allowed;
}

.auth-split-visual {
    display: none;
    flex: 0 0 0;
    background: linear-gradient(135deg, #1a2a48 0%, #2d4373 50%, #3b5998 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}
.auth-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(255,255,255,.06), transparent 50%);
    pointer-events: none;
}
.auth-split-visual-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 480px;
}
.auth-split-visual-content.auth-split-visual-content--left {
    text-align: left;
    max-width: 520px;
}
.auth-split-visual-logo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: #fff;
    padding: .5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.auth-split-visual h2 {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: #fff;
}
.auth-split-visual p {
    font-size: 1.05rem;
    opacity: .85;
    line-height: 1.55;
    color: #fff;
}
.auth-split-visual .lead {
    font-size: 1.05rem;
    opacity: .9;
    margin-bottom: 2rem;
    color: #fff;
}

/* Proporciones según variante (default 45/55, wide invierte) */
@media (min-width: 992px) {
    .auth-split-form    { flex: 0 0 45%; }
    .auth-split-visual  { display: flex; flex: 0 0 55%; }

    .auth-split-wrapper.auth-split-wrapper--wide .auth-split-form   { flex: 0 0 55%; }
    .auth-split-wrapper.auth-split-wrapper--wide .auth-split-visual { flex: 0 0 45%; }
}


/* ====================================================================
   §5 — Auth: stepper y bullets (signup-company)
   ==================================================================== */

/* Botones del stepper con gradient cuando NO están disabled */
.auth-split-card .nextStepButton1:not(.disabled),
.auth-split-card .nextStepButton2:not(.disabled),
.auth-split-card button[type="submit"] {
    background: var(--auth-gradient) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(94, 114, 228, 0.25);
    transition: all .25s ease;
}
.auth-split-card .nextStepButton1:not(.disabled):hover,
.auth-split-card .nextStepButton2:not(.disabled):hover,
.auth-split-card button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(94, 114, 228, 0.4);
}

/* Botón "Atrás" neutro */
.auth-split-card .btn-dim-gray {
    background: transparent;
    border: 1px solid var(--auth-border) !important;
    color: var(--auth-text-muted) !important;
}
.auth-split-card .btn-dim-gray:hover {
    background: rgba(94, 114, 228, .08);
    color: var(--auth-text-primary) !important;
}

/* Bullets propuesta de valor en panel derecho */
.auth-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}
.auth-bullets li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.auth-bullets li i {
    background: rgba(255,255,255,.15);
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #7be8a5;
}
.auth-bullets li strong {
    display: block;
    font-weight: 600;
    margin-bottom: .15rem;
}
.auth-bullets li span {
    font-size: .92rem;
    opacity: .8;
}

.auth-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.1rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    font-size: .92rem;
    color: #fff;
}
.auth-trust-badge i { color: #ffd56b; }

/* Trial banner — minimal en light (bg gris muy suave, border sutil),
   con tint violet más marcado en dark donde necesita destacarse. */
.auth-trial-banner {
    background: #f8f9fb;
    border: 1px solid var(--auth-border);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.auth-trial-banner i {
    font-size: 1.5rem;
    color: var(--auth-accent);
}
.auth-trial-banner strong {
    display: block;
    color: var(--auth-text-primary);
    font-weight: 600;
    line-height: 1.2;
}
.auth-trial-banner small {
    color: var(--auth-text-muted);
    font-size: .82rem;
}
body.dark-mode .auth-trial-banner {
    background: linear-gradient(135deg, rgba(110, 91, 255, 0.14) 0%, rgba(94, 114, 228, 0.10) 100%);
    border-color: rgba(176, 152, 255, 0.3);
}
body.dark-mode .auth-trial-banner i { color: #B098FF; }


/* ====================================================================
   §6 — Landing: utilidades, botones, hero, secciones, footer
   ==================================================================== */
.container-lg { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.gradient-text {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.section { padding: 100px 0; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-tag { font-size: 0.85rem; color: var(--accent); display: block; margin-bottom: 12px; letter-spacing: 0.05em; font-weight: 600; }
.section-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; }
.section-subtitle { color: var(--text-secondary); margin-top: 12px; font-size: 1.05rem; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Buttons landing */
.btn-omni {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px; border-radius: 50px; font-weight: 600; font-size: 0.95rem;
    transition: all var(--transition); overflow: hidden; cursor: pointer; border: none;
}
.btn-accent {
    background: var(--gradient); color: #ffffff;
    box-shadow: 0 4px 20px rgba(94, 114, 228, 0.35);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(94, 114, 228, 0.5); color: #ffffff; }
.btn-outline-omni { border: 2px solid var(--border-hover); color: var(--text-primary); background: transparent; }
.btn-outline-omni:hover { border-color: var(--accent); background: rgba(94,114,228,0.08); transform: translateY(-2px); color: var(--accent); }

/* Override body.landing-page a { color: inherit } que hijackeaba el texto
   blanco de los botones gradient. Specificity 0,2,1 igual al rule de a. */
body.landing-page .btn-accent,
body.landing-page .btn-accent:hover,
body.landing-page .btn-accent:focus,
body.landing-page .btn-accent:visited,
body.landing-page .pn-btn-accent,
body.landing-page .pn-btn-accent:hover,
body.landing-page .pn-btn-accent:focus,
body.landing-page .pn-btn-accent:visited {
    color: #ffffff;
}
body.landing-page a.btn-outline-omni { color: var(--text-primary); }
body.landing-page a.btn-outline-omni:hover { color: var(--accent); }

/* Navbar legacy del landing (.navbar-omni) — mantenida por compatibilidad
   con elementos del landing que no migraron a .public-navbar */
.navbar-omni {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 16px 0; transition: all var(--transition);
}
.navbar-omni.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 12px 0; }
body.landing-page.dark-mode .navbar-omni.scrolled { background: rgba(30, 41, 59, 0.95); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { font-size: 1.3rem; font-weight: 800; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.nav-logo .logo-icon { color: var(--accent); }
.nav-logo img { height: 32px; width: auto; }
.nav-links { display: flex; gap: 36px; }
.nav-links a { color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; transition: color var(--transition); position: relative; }
.nav-links a:hover { color: var(--text-primary); }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--gradient); transition: width var(--transition); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--accent); }
.nav-cta { display: flex; gap: 12px; align-items: center; }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; background: none; border: none; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-primary); transition: all var(--transition); border-radius: 2px; }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 100px 24px 60px; }
.hero-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12; animation: landingFloat 8s ease-in-out infinite; }
.blob-1 { width: 500px; height: 500px; background: var(--accent); top: -100px; left: -100px; opacity: 0.08; }
.blob-2 { width: 400px; height: 400px; background: var(--accent-2); top: 200px; right: -100px; animation-delay: 3s; opacity: 0.06; }
.blob-3 { width: 350px; height: 350px; background: #8b9cf7; bottom: -50px; left: 30%; animation-delay: 6s; opacity: 0.07; }
@keyframes landingFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } }
.hero-wrapper { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 60px; position: relative; z-index: 1; width: 100%; }
.hero-content { flex: 1; }
.hero-greeting { font-size: 1rem; color: var(--accent); margin-bottom: 8px; font-weight: 600; }
.hero-name { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 16px; }
.hero-desc { color: var(--text-secondary); font-size: 1.05rem; max-width: 480px; margin-bottom: 32px; line-height: 1.7; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px; }
.hero-badges { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0.7; }
.hero-badge-item { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--text-secondary); }
.hero-badge-item i { color: var(--accent); }
.hero-visual { flex: 1; max-width: 480px; }
.feature-card-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--transition); }
.feature-card-hero:hover { transform: translateY(-6px); }
.card-header-omni { background: var(--bg-primary); padding: 12px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.red { background: #ff5f56; } .dot.yellow { background: #ffbd2e; } .dot.green { background: #27c93f; }
.card-title-omni { font-size: 0.8rem; color: var(--text-muted); margin-left: 8px; }
.card-body-omni { padding: 24px; }
.card-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.card-row:last-child { border-bottom: none; }
.card-row-icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(94,114,228,0.1); color: var(--accent); border-radius: 8px; font-size: 0.9rem; }
.card-row-text h6 { font-size: 0.85rem; margin: 0; color: var(--text-primary); }
.card-row-text small { font-size: 0.75rem; color: var(--text-muted); }

/* About Section */
.about-section { background: var(--bg-secondary); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.about-text p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.8; }
.about-text strong { color: var(--text-primary); }
.about-stats { display: flex; gap: 40px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat-number { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.stat-label { font-size: 0.8rem; color: var(--text-muted); }
.about-image { display: flex; justify-content: center; }
.avatar-wrapper { position: relative; width: 280px; height: 280px; }
.avatar-ring { position: absolute; inset: -8px; border-radius: 50%; background: var(--gradient); animation: landingSpin 8s linear infinite; }
@keyframes landingSpin { to { transform: rotate(360deg); } }
.avatar-inner { position: absolute; inset: 0; background: var(--bg-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 6px solid var(--bg-secondary); }
.avatar-inner i { font-size: 6rem; color: var(--accent); }

/* Features */
.features-section { background: var(--bg-primary); }
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 48px; }
.feature-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); transition: all var(--transition); }
.feature-item:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow); transform: translateY(-4px); }
.feature-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(94,114,228,0.1); color: var(--accent); border-radius: 12px; font-size: 1.3rem; margin-bottom: 16px; }
.feature-item h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.feature-item p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }
.tech-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tech-badge { padding: 6px 16px; background: rgba(94,114,228,0.08); border: 1px solid rgba(94,114,228,0.2); border-radius: 50px; font-size: 0.82rem; color: var(--accent); font-weight: 500; transition: all var(--transition); }
.tech-badge:hover { background: rgba(94,114,228,0.18); border-color: var(--accent); transform: translateY(-2px); }

/* Disciplines */
.disciplines-section { background: var(--bg-secondary); }
.disciplines-layout { display: grid; grid-template-columns: 1fr 380px; gap: 60px; align-items: start; }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--accent), transparent); }
.timeline-item { position: relative; margin-bottom: 40px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot-omni { position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--accent); transition: background var(--transition); }
.timeline-dot-omni.active { background: var(--accent); box-shadow: 0 0 12px rgba(94,114,228,0.4); }
.timeline-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow-card); transition: all var(--transition); }
.timeline-content:hover { border-color: var(--border-hover); transform: translateX(4px); }
.timeline-role { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.timeline-company { font-size: 0.85rem; color: var(--accent); margin-bottom: 10px; font-weight: 500; }
.timeline-desc { font-size: 0.87rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.timeline-tag { font-size: 0.75rem; padding: 3px 10px; border-radius: 50px; background: rgba(94,114,228,0.06); border: 1px solid var(--border); color: var(--text-secondary); font-weight: 500; }

/* Side cards (Stats/Modules) */
.side-cards { position: sticky; top: 100px; }
.side-card { display: flex; align-items: flex-start; gap: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; transition: all var(--transition); }
.side-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.side-card-icon { font-size: 2rem; flex-shrink: 0; line-height: 1; padding-top: 2px; }
.side-card-info { display: flex; flex-direction: column; gap: 4px; }
.side-card-title { font-size: 0.9rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.side-card-subtitle { font-size: 0.83rem; color: var(--accent); font-weight: 500; }
.side-card-detail { font-size: 0.78rem; color: var(--text-muted); }

/* Pricing */
.pricing-section { background: var(--bg-primary); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-card); transition: all var(--transition); position: relative; display: flex; flex-direction: column; gap: 16px; }
.pricing-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-glow); transform: translateY(-6px); }
.pricing-card.featured { border-color: rgba(94,114,228,0.4); background: linear-gradient(135deg, rgba(94,114,228,0.04), rgba(66,80,160,0.04)); box-shadow: var(--shadow-glow); }
.pricing-badge { position: absolute; top: 16px; right: 16px; font-size: 0.7rem; font-weight: 600; padding: 4px 10px; background: var(--gradient); border-radius: 50px; color: var(--bg-primary); text-transform: uppercase; letter-spacing: 0.05em; }
.pricing-name { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.pricing-price { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); }
.pricing-price small { font-size: 0.9rem; color: var(--text-secondary); font-weight: 400; }
.pricing-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.pricing-features li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--text-secondary); }
.pricing-features li i { color: var(--accent); font-size: 0.85rem; }
.pricing-features li.disabled { color: var(--text-muted); }
.pricing-features li.disabled i { color: var(--text-muted); }
.pricing-cta { margin-top: 8px; }
.pricing-cta .btn-omni { width: 100%; justify-content: center; }

/* CTA */
.cta-section { background: var(--bg-secondary); text-align: center; }
.cta-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 60px 40px; max-width: 800px; margin: 0 auto; position: relative; overflow: hidden; box-shadow: var(--shadow-card); }
.cta-box::before { content: ''; position: absolute; inset: 0; background: var(--gradient); opacity: 0.05; }
.cta-box h2 { font-size: 2rem; font-weight: 800; margin-bottom: 16px; position: relative; }
.cta-box p { color: var(--text-secondary); max-width: 500px; margin: 0 auto 32px; position: relative; }

/* Footer landing */
.footer-omni { background: var(--bg-secondary); border-top: 1px solid var(--border); padding: 60px 0 24px; }
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 48px;
    margin-bottom: 40px;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-brand { gap: 18px; }
.footer-logo {
    font-size: 1.2rem; font-weight: 800;
    color: var(--text-primary);
    display: flex; align-items: center; gap: 10px;
    text-decoration: none;
}
.footer-logo img { height: 32px; width: auto; }
.footer-tagline {
    color: var(--text-muted);
    font-size: 0.92rem; line-height: 1.6;
    margin: 0;
    max-width: 320px;
}
.footer-col-title {
    font-size: 0.85rem; font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px 0;
}
.footer-links, .footer-contact {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.footer-links a {
    color: var(--text-muted);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color var(--transition);
}
.footer-links a:hover { color: var(--accent); }
.footer-contact li {
    display: flex; align-items: flex-start; gap: 10px;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}
.footer-contact li i {
    color: var(--accent);
    font-size: 0.95rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.footer-contact a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}
.footer-contact a:hover { color: var(--accent); }
.footer-socials {
    display: flex; gap: 10px;
    margin-top: 4px;
}
.footer-socials a {
    width: 36px; height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted);
    transition: all var(--transition);
    font-size: 0.95rem;
    text-decoration: none;
}
.footer-socials a:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 24px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 12px;
}
.footer-copy {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}
.footer-copy strong { color: var(--text-primary); font-weight: 600; }
.footer-back-top { font-size: 0.85rem; margin: 0; }
.footer-back-top a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
    display: inline-flex; align-items: center; gap: 4px;
}
.footer-back-top a:hover { color: var(--accent); }


/* ====================================================================
   §7 — Landing: responsive
   ==================================================================== */
@media (max-width: 1024px) {
    .hero-wrapper { flex-direction: column; text-align: center; padding-top: 80px; }
    .hero-desc { margin: 0 auto 32px; }
    .hero-cta { justify-content: center; }
    .hero-badges { justify-content: center; }
    .hero-visual { width: 100%; max-width: 400px; }
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-image { order: -1; }
    .features-grid { grid-template-columns: 1fr; }
    .disciplines-layout { grid-template-columns: 1fr; }
    .side-cards { position: static; }
    .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
    .nav-links { display: none; position: fixed; top: 70px; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); flex-direction: column; align-items: center; padding: 24px; gap: 24px; border-bottom: 1px solid var(--border); }
    body.landing-page.dark-mode .nav-links { background: rgba(30, 41, 59, 0.98); }
    .nav-links.open { display: flex; }
    .hamburger { display: flex; }
    .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .section { padding: 70px 0; }
    .pricing-grid { grid-template-columns: 1fr; }
    .about-stats { gap: 24px; }
    .footer-content { flex-direction: column; text-align: center; }
}

@media (max-width: 575px) {
    .footer-grid { grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .hero-name { font-size: 2.5rem; }
    .hero-cta { flex-direction: column; align-items: center; }
}


/* ====================================================================
   §8 — Auth visual concepts (panel derecho)
   --------------------------------------------------------------------
   Tres conceptos visuales independientes para el panel derecho del
   split layout de auth. Se activan agregando una modifier class al
   .auth-split-visual:
     - .auth-visual--constelacion
     - .auth-visual--dashboard
     - .auth-visual--ecuador
   Cada concepto trae su propio background y desplaza el padding default
   (el contenido se posiciona en absoluto sobre la columna entera).

   El HTML de cada uno vive en templates/components/auth_visuals/*.html
   y respeta el `prefers-reduced-motion: reduce` (las animaciones se
   apagan en el media query final de esta sección).
   ==================================================================== */

.auth-split-visual.auth-visual--constelacion,
.auth-split-visual.auth-visual--dashboard,
.auth-split-visual.auth-visual--ecuador,
.auth-split-visual.auth-visual--recovery {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
}
/* el ::before de la default lo apagamos — cada concepto pinta su fondo */
.auth-split-visual.auth-visual--constelacion::before,
.auth-split-visual.auth-visual--dashboard::before,
.auth-split-visual.auth-visual--ecuador::before,
.auth-split-visual.auth-visual--recovery::before { content: none; }


/* ====================================================================
   §8.1 — Concept: Constelación de Producto
   ==================================================================== */
@keyframes auth-c1-float-a   { 0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-10px)} }
@keyframes auth-c1-float-b   { 0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-14px)} }
@keyframes auth-c1-float-c   { 0%,100%{transform:translate(0,0)} 50%{transform:translate(0,-7px)} }
@keyframes auth-c1-mesh      { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-20px) scale(1.08)} }

.auth-visual--constelacion {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 100% at 10% 20%, #eef1ff 0%, #dfe5ff 40%, #c8d2ff 100%);
}
body.dark-mode .auth-visual--constelacion {
    background: radial-gradient(120% 100% at 10% 20%, #2a3358 0%, #1a2440 40%, #0d1525 100%);
}
.auth-visual--constelacion .c1-blob-top {
    position: absolute; top: -120px; right: -100px; width: 480px; height: 480px;
    background: radial-gradient(circle, rgba(94,114,228,.5), transparent 70%);
    filter: blur(40px);
    animation: auth-c1-mesh 18s ease-in-out infinite;
    pointer-events: none;
}
.auth-visual--constelacion .c1-blob-bottom {
    position: absolute; bottom: -140px; left: -100px; width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(232,40,78,.18), transparent 70%);
    filter: blur(50px);
    animation: auth-c1-mesh 22s ease-in-out infinite reverse;
    pointer-events: none;
}
body.dark-mode .auth-visual--constelacion .c1-blob-bottom {
    background: radial-gradient(circle, rgba(66,80,160,.55), transparent 70%);
}
.auth-visual--constelacion .c1-lines {
    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
}

.auth-visual--constelacion .c1-card {
    position: absolute;
    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 40px rgba(17,33,59,.12), inset 0 0 0 1px rgba(255,255,255,.6);
    color: #11213b;
    font-size: 12px;
}
body.dark-mode .auth-visual--constelacion .c1-card {
    background: rgba(22,34,54,.78);
    color: #f0f3fa;
    box-shadow: 0 20px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* Cards pushed inward — top no menor a 130 (debajo del nav de 72 + breathing
   room), bottom-cards en ≥220 para no chocar con el headline al fondo. */
.auth-visual--constelacion .c1-card-factura    { top: 130px; left: 70px;  width: 230px; animation: auth-c1-float-a 7s ease-in-out infinite; }
.auth-visual--constelacion .c1-card-clientes   { top: 130px; right: 80px; width: 210px; animation: auth-c1-float-b 8s ease-in-out infinite .8s; }
.auth-visual--constelacion .c1-card-payphone   { top: 360px; right: 60px; width: 240px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; animation: auth-c1-float-c 9s ease-in-out infinite .3s; }
.auth-visual--constelacion .c1-card-inventario { bottom: 230px; left: 60px; width: 220px; animation: auth-c1-float-b 7.5s ease-in-out infinite .5s; }
.auth-visual--constelacion .c1-card-reserva    { bottom: 250px; right: 90px; width: 200px; padding: 14px; animation: auth-c1-float-a 8.5s ease-in-out infinite 1s; }

.auth-visual--constelacion .c1-label {
    font-size: 10px; font-weight: 600;
    color: #6b7a90; text-transform: uppercase; letter-spacing: .8px;
    margin-bottom: 8px;
}
body.dark-mode .auth-visual--constelacion .c1-label { color: #8a99b4; }
.auth-visual--constelacion .c1-amount {
    font-size: 22px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px;
}
.auth-visual--constelacion .c1-amount-big {
    font-size: 26px; font-weight: 800; letter-spacing: -.5px;
}
.auth-visual--constelacion .c1-meta {
    font-size: 11px; color: #6b7a90;
}
body.dark-mode .auth-visual--constelacion .c1-meta { color: #8a99b4; }

.auth-visual--constelacion .c1-status {
    font-size: 9px; padding: 3px 7px; border-radius: 999px;
    background: rgba(34,178,118,.15); color: #1f8a5b; font-weight: 700;
}
.auth-visual--constelacion .c1-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
}
.auth-visual--constelacion .c1-divider {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed rgba(17,33,59,.08);
}
body.dark-mode .auth-visual--constelacion .c1-divider { border-top-color: rgba(255,255,255,.08); }

.auth-visual--constelacion .c1-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    color: #fff; font-size: 11px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.9);
}
.auth-visual--constelacion .c1-avatar-sm {
    width: 22px; height: 22px; border-radius: 50%;
    background: #5e72e4; color: #fff; font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.auth-visual--constelacion .c1-avatar-stack { display: flex; margin-top: 12px; }
.auth-visual--constelacion .c1-avatar-stack > * + * { margin-left: -8px; }
.auth-visual--constelacion .c1-avatar-more {
    width: 26px; height: 26px; border-radius: 50%;
    background: #eef1f8; color: #3a4256;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid rgba(255,255,255,.9);
}
body.dark-mode .auth-visual--constelacion .c1-avatar-more {
    background: #23314a; color: #c5cee0;
}
.auth-visual--constelacion .c1-delta-up {
    font-size: 11px; color: #1f8a5b; font-weight: 600; margin-top: 2px;
}

.auth-visual--constelacion .c1-payphone-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #22b276, #1f8a5b);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; flex-shrink: 0;
}
.auth-visual--constelacion .c1-payphone-title {
    font-size: 12px; font-weight: 700;
}
.auth-visual--constelacion .c1-payphone-sub {
    font-size: 10px; color: #6b7a90;
}
body.dark-mode .auth-visual--constelacion .c1-payphone-sub { color: #8a99b4; }

.auth-visual--constelacion .c1-stock-row { margin-top: 8px; }
.auth-visual--constelacion .c1-stock-row:first-of-type { margin-top: 0; }
.auth-visual--constelacion .c1-stock-head {
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: #3a4256; margin-bottom: 4px;
}
body.dark-mode .auth-visual--constelacion .c1-stock-head { color: #c5cee0; }
.auth-visual--constelacion .c1-stock-head b { font-weight: 700; }
.auth-visual--constelacion .c1-stock-bar {
    height: 4px; border-radius: 2px;
    background: rgba(17,33,59,.08);
    overflow: hidden;
}
body.dark-mode .auth-visual--constelacion .c1-stock-bar { background: rgba(255,255,255,.08); }
.auth-visual--constelacion .c1-stock-bar > span { display: block; height: 100%; border-radius: 2px; }

.auth-visual--constelacion .c1-date-badge {
    width: 42px; height: 42px; border-radius: 10px;
    background: linear-gradient(135deg, #5e72e4, #4250a0);
    color: #fff; display: flex; flex-direction: column;
    align-items: center; justify-content: center; flex-shrink: 0;
}
.auth-visual--constelacion .c1-date-mon {
    font-size: 8px; font-weight: 700; opacity: .85; letter-spacing: 1px;
}
.auth-visual--constelacion .c1-date-day {
    font-size: 14px; font-weight: 800; line-height: 1;
}
.auth-visual--constelacion .c1-reserva-body { display: flex; gap: 10px; align-items: center; }
.auth-visual--constelacion .c1-reserva-title { font-size: 12px; font-weight: 700; }
.auth-visual--constelacion .c1-reserva-sub { font-size: 10px; color: #6b7a90; }
body.dark-mode .auth-visual--constelacion .c1-reserva-sub { color: #8a99b4; }

.auth-visual--constelacion .c1-headline {
    position: absolute; bottom: 36px; left: 36px; right: 36px;
    z-index: 2;
}
/* Pill del brand con gradient de marca → funciona con logo blanco O oscuro
   gracias al contraste fuerte del indigo. El texto siempre blanco. */
.auth-visual--constelacion .c1-brand {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
    padding: 6px 14px 6px 6px;
    background: linear-gradient(135deg, #6E5BFF, #4250a0);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(110, 91, 255, .35);
}
.auth-visual--constelacion .c1-brand img {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    object-fit: contain;
    flex-shrink: 0;
}
.auth-visual--constelacion .c1-brand span {
    font-size: 12px; font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    text-transform: uppercase;
}
.auth-visual--constelacion .c1-headline h2 {
    font-size: 32px; font-weight: 800;
    color: #11213b;
    letter-spacing: -.8px; line-height: 1.1;
    margin: 0;
}
body.dark-mode .auth-visual--constelacion .c1-headline h2 { color: #f0f3fa; }
.auth-visual--constelacion .c1-headline p {
    margin: 8px 0 0 0;
    font-size: 14px;
    color: #3a4256;
    max-width: 380px; line-height: 1.5;
}
body.dark-mode .auth-visual--constelacion .c1-headline p { color: #8a99b4; }


/* ====================================================================
   §8.2 — Concept: Dashboard Vivo
   ==================================================================== */
@keyframes auth-c2-toast  { 0%{transform:translateY(40px);opacity:0} 8%,90%{transform:translateY(0);opacity:1} 100%{transform:translateY(-20px);opacity:0} }
@keyframes auth-c2-bar    { 0%{transform:scaleY(.4)} 50%{transform:scaleY(1)} 100%{transform:scaleY(.4)} }
@keyframes auth-c2-tick   { 0%,100%{opacity:1} 50%{opacity:.65} }
@keyframes auth-c2-row-in { 0%{opacity:0;transform:translateX(-8px)} 100%{opacity:1;transform:translateX(0)} }

.auth-visual--dashboard {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #5e72e4 0%, #4250a0 100%);
}
body.dark-mode .auth-visual--dashboard {
    background: linear-gradient(135deg, #1a2440 0%, #0d1525 100%);
}
.auth-visual--dashboard .c2-halo {
    position: absolute; top: 20%; left: 50%;
    width: 600px; height: 600px;
    transform: translate(-50%, -20%);
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.auth-visual--dashboard .c2-mockup-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -58%) perspective(1400px) rotateY(-12deg) rotateX(6deg) rotateZ(-2deg);
    transform-style: preserve-3d;
}
.auth-visual--dashboard .c2-mockup {
    width: 620px; height: 420px;
    background: #f5f7fa;
    border-radius: 14px;
    display: flex;
    box-shadow: 0 40px 80px rgba(17,33,59,.35), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
}
body.dark-mode .auth-visual--dashboard .c2-mockup { background: #0f1a30; }

.auth-visual--dashboard .c2-sidebar {
    width: 48px;
    /* Matches el sidebar real: bg-navy = #11213b */
    background: #11213b;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    padding: 14px 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
body.dark-mode .auth-visual--dashboard .c2-sidebar { background: #0c1322; }

/* Brand logo del sistema (reemplaza al diamond rojo del mock original).
   Bg transparente — el sidebar es navy oscuro, así que el logo blanco
   (caso por defecto del user) se ve bien. Si el logo es oscuro, igual
   queda legible porque hay buen contraste con el navy. */
.auth-visual--dashboard .c2-brand-logo {
    width: 30px; height: 30px;
    border-radius: 6px;
    object-fit: contain;
    background: transparent;
    padding: 0;
    margin-bottom: 8px;
}

.auth-visual--dashboard .c2-side-item {
    width: 30px; height: 30px; border-radius: 8px;
    color: rgba(255,255,255,.45);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    position: relative;
}
/* Active state idéntico al sidebar real (sidebar.css):
   bg violeta translúcida + indicador vertical + icono violeta claro */
.auth-visual--dashboard .c2-side-item.active {
    background: rgba(110, 91, 255, 0.14);
    color: #B098FF;
}
.auth-visual--dashboard .c2-side-item.active::before {
    content: '';
    position: absolute;
    left: 1px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 16px;
    background: #6E5BFF;
    border-radius: 2px;
}

.auth-visual--dashboard .c2-main {
    flex: 1; display: flex; flex-direction: column;
    padding: 14px; gap: 10px;
}
.auth-visual--dashboard .c2-header {
    display: flex; align-items: center; justify-content: space-between;
}
.auth-visual--dashboard .c2-greeting {
    font-size: 13px; font-weight: 800; color: #11213b;
}
body.dark-mode .auth-visual--dashboard .c2-greeting { color: #f0f3fa; }
.auth-visual--dashboard .c2-greeting-sub {
    font-size: 9px; color: #6b7a90;
}
body.dark-mode .auth-visual--dashboard .c2-greeting-sub { color: #8a99b4; }
.auth-visual--dashboard .c2-header-btns { display: flex; gap: 6px; }
.auth-visual--dashboard .c2-header-btn {
    width: 24px; height: 24px; border-radius: 6px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(17,33,59,.06);
}
body.dark-mode .auth-visual--dashboard .c2-header-btn { background: #1a2640; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }

.auth-visual--dashboard .c2-kpis { display: flex; gap: 8px; }
.auth-visual--dashboard .c2-kpi {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 0 rgba(17,33,59,.04), inset 0 0 0 1px rgba(17,33,59,.05);
}
body.dark-mode .auth-visual--dashboard .c2-kpi {
    background: #1a2640;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.auth-visual--dashboard .c2-kpi-label {
    font-size: 8px; font-weight: 600;
    color: #6b7a90; text-transform: uppercase; letter-spacing: .8px;
}
body.dark-mode .auth-visual--dashboard .c2-kpi-label { color: #8a99b4; }
.auth-visual--dashboard .c2-kpi-value {
    font-size: 16px; font-weight: 800;
    color: #11213b; letter-spacing: -.4px; margin-top: 2px;
}
body.dark-mode .auth-visual--dashboard .c2-kpi-value { color: #f0f3fa; }
.auth-visual--dashboard .c2-kpi-value.ticking {
    animation: auth-c2-tick 2.5s ease-in-out infinite;
}
.auth-visual--dashboard .c2-kpi-delta {
    font-size: 9px; color: #1f8a5b; font-weight: 700; margin-top: 2px;
}

.auth-visual--dashboard .c2-row {
    display: flex; gap: 8px; flex: 1; min-height: 0;
}
.auth-visual--dashboard .c2-chart, .auth-visual--dashboard .c2-feed-wrap {
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    box-shadow: inset 0 0 0 1px rgba(17,33,59,.05);
    display: flex; flex-direction: column;
}
body.dark-mode .auth-visual--dashboard .c2-chart,
body.dark-mode .auth-visual--dashboard .c2-feed-wrap {
    background: #1a2640;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.auth-visual--dashboard .c2-chart { flex: 1; }
.auth-visual--dashboard .c2-feed-wrap { width: 200px; }
.auth-visual--dashboard .c2-chart-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
}
.auth-visual--dashboard .c2-chart-title { font-size: 10px; font-weight: 700; color: #11213b; }
body.dark-mode .auth-visual--dashboard .c2-chart-title { color: #f0f3fa; }
.auth-visual--dashboard .c2-chart-delta { font-size: 9px; color: #1f8a5b; font-weight: 700; }
.auth-visual--dashboard .c2-bars {
    flex: 1; display: flex; align-items: flex-end; gap: 4px;
}
.auth-visual--dashboard .c2-bar {
    flex: 1;
    background: rgba(94,114,228,.45);
    border-radius: 3px;
    transform-origin: bottom;
}
body.dark-mode .auth-visual--dashboard .c2-bar { background: rgba(94,114,228,.35); }
.auth-visual--dashboard .c2-bar--current {
    background: linear-gradient(180deg, #5e72e4, #4250a0);
    animation: auth-c2-bar 3s ease-in-out infinite;
}

.auth-visual--dashboard .c2-feed-title { font-size: 10px; font-weight: 700; color: #11213b; margin-bottom: 8px; }
body.dark-mode .auth-visual--dashboard .c2-feed-title { color: #f0f3fa; }
.auth-visual--dashboard .c2-feed-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(17,33,59,.06);
}
body.dark-mode .auth-visual--dashboard .c2-feed-row { border-bottom-color: rgba(255,255,255,.06); }
.auth-visual--dashboard .c2-feed-row:last-child { border-bottom: none; }
.auth-visual--dashboard .c2-feed-row--new { animation: auth-c2-row-in .6s ease-out; }
.auth-visual--dashboard .c2-feed-icon {
    width: 18px; height: 18px; border-radius: 50%;
    color: #fff; font-size: 9px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
}
.auth-visual--dashboard .c2-feed-text {
    font-size: 9.5px; color: #3a4256;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.dark-mode .auth-visual--dashboard .c2-feed-text { color: #c5cee0; }
.auth-visual--dashboard .c2-feed-time { font-size: 8px; color: #6b7a90; }
body.dark-mode .auth-visual--dashboard .c2-feed-time { color: #8a99b4; }

.auth-visual--dashboard .c2-toast {
    position: absolute; top: 24%; right: 28px;
    background: rgba(255,255,255,.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 20px 40px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.1);
    animation: auth-c2-toast 6s ease-in-out infinite;
    z-index: 2;
}
body.dark-mode .auth-visual--dashboard .c2-toast { background: rgba(22,34,54,.92); }
.auth-visual--dashboard .c2-toast-icon {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, #22b276, #1f8a5b);
    color: #fff; font-size: 16px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.auth-visual--dashboard .c2-toast-title { font-size: 11px; font-weight: 700; color: #11213b; }
body.dark-mode .auth-visual--dashboard .c2-toast-title { color: #f0f3fa; }
.auth-visual--dashboard .c2-toast-sub { font-size: 10px; color: #6b7a90; }
body.dark-mode .auth-visual--dashboard .c2-toast-sub { color: #8a99b4; }

.auth-visual--dashboard .c2-headline {
    position: absolute; bottom: 40px; left: 36px; right: 36px;
    color: #fff;
    z-index: 2;
}
.auth-visual--dashboard .c2-headline h2 {
    margin: 0;
    font-size: 28px; font-weight: 800;
    letter-spacing: -.6px; line-height: 1.15;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.auth-visual--dashboard .c2-headline p {
    margin: 8px 0 0 0;
    font-size: 13px;
    color: rgba(255,255,255,.85);
    max-width: 420px; line-height: 1.5;
}


/* ====================================================================
   §8.3 — Concept: Ecuador Conectado
   ==================================================================== */
@keyframes auth-c3-pulse  { 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(2.6);opacity:0} }
@keyframes auth-c3-dot    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes auth-c3-ticker { 0%,18%{transform:translateY(0)} 22%,38%{transform:translateY(-28px)} 42%,58%{transform:translateY(-56px)} 62%,78%{transform:translateY(-84px)} 82%,100%{transform:translateY(-112px)} }
@keyframes auth-c3-num    { 0%,100%{opacity:1} 50%{opacity:.85} }

.auth-visual--ecuador {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 0%, #f5f7ff 0%, #e7ecff 70%);
}
body.dark-mode .auth-visual--ecuador {
    background: radial-gradient(120% 100% at 50% 0%, #1a2440 0%, #0d1525 70%);
}
.auth-visual--ecuador .c3-glow {
    position: absolute; top: 15%; left: 50%;
    width: 500px; height: 500px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(94,114,228,.15), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}
.auth-visual--ecuador .c3-map {
    position: absolute; top: 4%; left: 50%;
    transform: translateX(-50%);
    width: 78%; max-width: 520px;
    aspect-ratio: 320/340;
}
.auth-visual--ecuador .c3-map svg { width: 100%; height: 100%; overflow: visible; }

.auth-visual--ecuador .c3-card {
    position: absolute; bottom: 36px; left: 36px; right: 36px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 40px rgba(17,33,59,.1), inset 0 0 0 1px rgba(255,255,255,.7);
    z-index: 2;
}
body.dark-mode .auth-visual--ecuador .c3-card {
    background: rgba(22,34,54,.7);
    box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
}
.auth-visual--ecuador .c3-card h2 {
    margin: 0;
    font-size: 24px; font-weight: 800;
    color: #11213b;
    letter-spacing: -.5px; line-height: 1.15;
}
body.dark-mode .auth-visual--ecuador .c3-card h2 { color: #f0f3fa; }
.auth-visual--ecuador .c3-stats { margin-top: 12px; display: flex; align-items: center; gap: 14px; }
.auth-visual--ecuador .c3-live {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(232,40,78,.12);
    color: #e8284e;
    font-size: 11px; font-weight: 700;
    flex-shrink: 0;
}

.auth-visual--ecuador .c3-ticker {
    display: flex; align-items: baseline; gap: 10px;
    height: 28px; overflow: hidden;
    flex: 1;
}
.auth-visual--ecuador .c3-ticker-track {
    display: flex; flex-direction: column;
    animation: auth-c3-ticker 14s ease-in-out infinite;
}
.auth-visual--ecuador .c3-ticker-item {
    height: 28px; display: flex; align-items: baseline; gap: 10px;
}
.auth-visual--ecuador .c3-num {
    font-size: 22px; font-weight: 800;
    color: #11213b;
    letter-spacing: -.5px;
    animation: auth-c3-num 2s ease-in-out infinite;
}
body.dark-mode .auth-visual--ecuador .c3-num { color: #f0f3fa; }
.auth-visual--ecuador .c3-num-sub {
    font-size: 12px; color: #6b7a90;
}
body.dark-mode .auth-visual--ecuador .c3-num-sub { color: #8a99b4; }

/* SVG dots y silueta — clases que matchean los attrs del svg inline */
.auth-visual--ecuador .c3-pulse {
    transform-origin: center;
    transform-box: fill-box;
    animation: auth-c3-pulse 2.2s ease-out infinite;
}
.auth-visual--ecuador .c3-pulse--slow { animation-duration: 2.8s; }
.auth-visual--ecuador .c3-dot-core {
    transform-origin: center;
    transform-box: fill-box;
    animation: auth-c3-dot 2.4s ease-in-out infinite;
}

/* Dark mode: override de attrs hardcoded del SVG */
body.dark-mode .auth-visual--ecuador .c3-grid line { stroke: rgba(255,255,255,.04); }
body.dark-mode .auth-visual--ecuador .c3-equator    { stroke: rgba(232,40,78,.45); }
body.dark-mode .auth-visual--ecuador .c3-equator-label { fill: rgba(232,40,78,.7); }
body.dark-mode .auth-visual--ecuador .c3-silhouette {
    fill: rgba(94,114,228,.10);
    stroke: rgba(154,169,255,.55);
}
body.dark-mode .auth-visual--ecuador .c3-galapagos circle {
    fill: rgba(94,114,228,.10);
    stroke: rgba(154,169,255,.55);
}
body.dark-mode .auth-visual--ecuador .c3-hub-label { fill: #f0f3fa; }


/* ====================================================================
   §8.5 — Concepts: Recovery (Recuperar Acceso) + Verify (Confirmar correo)
   Comparten el kit visual (glow, card, steps, partículas, anillos); solo
   cambia el SVG central (escudo+candado vs sobre+check).
   ==================================================================== */
@keyframes auth-c4-unlock {
    0%,60% { d: path("M 122 145 L 122 125 C 122 107, 132 98, 140 98 C 148 98, 158 107, 158 125 L 158 145"); }
    80%,100% { d: path("M 122 145 L 122 125 C 122 107, 132 98, 140 98 C 148 98, 158 107, 158 115 L 158 105"); }
}
@keyframes auth-c4-check {
    0%,65% { stroke-dashoffset: 40; opacity: 0; }
    70% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes auth-c4-particle {
    0%,100% { transform: translateY(0) scale(1); opacity: .5; }
    50% { transform: translateY(-6px) scale(1.3); opacity: .8; }
}
@keyframes auth-c4-ring {
    0% { transform: scale(1); opacity: .4; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes auth-c4-shield-glow {
    0%,100% { filter: drop-shadow(0 0 8px rgba(94,114,228,.2)); }
    50% { filter: drop-shadow(0 0 20px rgba(94,114,228,.4)); }
}

/* Kit compartido recovery + verify: fondo, glow, contenedor del SVG,
   partículas, anillos, card glassmorphic y pasos. Solo el SVG central difiere
   (escudo+candado en recovery, sobre+check en verify) y los animadores propios
   de cada uno van más abajo. */
.auth-visual--recovery,
.auth-visual--verify {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 100% at 50% 0%, #f0f4ff 0%, #e2e8ff 70%);
}
body.dark-mode .auth-visual--recovery,
body.dark-mode .auth-visual--verify {
    background: radial-gradient(120% 100% at 50% 0%, #1a2440 0%, #0d1525 70%);
}
.auth-visual--recovery .c4-glow,
.auth-visual--verify .c4-glow {
    position: absolute; top: 10%; left: 50%;
    width: 450px; height: 450px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(94,114,228,.12), transparent 70%);
    filter: blur(50px);
    pointer-events: none;
}
.auth-visual--recovery .c4-shield-wrap,
.auth-visual--verify .c4-shield-wrap {
    position: absolute; top: 15%; left: 50%;
    transform: translateX(-50%);
    width: 52%; max-width: 290px;
    aspect-ratio: 1/1;
}
.auth-visual--recovery .c4-shield-wrap svg,
.auth-visual--verify .c4-shield-wrap svg { width: 100%; height: 100%; overflow: visible; }

.auth-visual--recovery .c4-shield {
    animation: auth-c4-shield-glow 3s ease-in-out infinite;
}
.auth-visual--recovery .c4-lock-arc {
    animation: auth-c4-unlock 4s ease-in-out infinite;
}
.auth-visual--recovery .c4-check,
.auth-visual--verify .c4-check {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: auth-c4-check 4s ease-in-out infinite;
}
.auth-visual--recovery .c4-particle,
.auth-visual--verify .c4-particle {
    transform-origin: center;
    transform-box: fill-box;
    animation: auth-c4-particle 2.6s ease-in-out infinite;
}
.auth-visual--recovery .c4-ring,
.auth-visual--verify .c4-ring {
    transform-origin: center;
    transform-box: fill-box;
    animation: auth-c4-ring 3s ease-out infinite;
}

/* Verify: el sobre late con el mismo glow del escudo */
.auth-visual--verify .c4-envelope {
    animation: auth-c4-shield-glow 3s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}

.auth-visual--recovery .c4-card,
.auth-visual--verify .c4-card {
    position: absolute; bottom: 36px; left: 36px; right: 36px;
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 20px 40px rgba(17,33,59,.1), inset 0 0 0 1px rgba(255,255,255,.7);
    z-index: 2;
}
body.dark-mode .auth-visual--recovery .c4-card,
body.dark-mode .auth-visual--verify .c4-card {
    background: rgba(22,34,54,.7);
    box-shadow: 0 20px 40px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.06);
}
.auth-visual--recovery .c4-card h2,
.auth-visual--verify .c4-card h2 {
    margin: 0;
    font-size: 22px; font-weight: 800;
    color: #11213b;
    letter-spacing: -.5px; line-height: 1.2;
}
body.dark-mode .auth-visual--recovery .c4-card h2,
body.dark-mode .auth-visual--verify .c4-card h2 { color: #f0f3fa; }
.auth-visual--recovery .c4-sub,
.auth-visual--verify .c4-sub {
    margin: 8px 0 0;
    font-size: 13px; color: #6b7a90; line-height: 1.4;
}
body.dark-mode .auth-visual--recovery .c4-sub,
body.dark-mode .auth-visual--verify .c4-sub { color: #8a99b4; }
.auth-visual--recovery .c4-steps,
.auth-visual--verify .c4-steps {
    display: flex; gap: 16px; margin-top: 16px;
}
.auth-visual--recovery .c4-step,
.auth-visual--verify .c4-step {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: #11213b;
}
body.dark-mode .auth-visual--recovery .c4-step,
body.dark-mode .auth-visual--verify .c4-step { color: #f0f3fa; }
.auth-visual--recovery .c4-step-num,
.auth-visual--verify .c4-step-num {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(94,114,228,.12);
    color: #5e72e4;
    font-size: 11px; font-weight: 800;
    flex-shrink: 0;
}

/* Dark mode SVG overrides */
body.dark-mode .auth-visual--recovery .c4-shield {
    fill: rgba(94,114,228,.10);
    stroke: rgba(154,169,255,.55);
}
body.dark-mode .auth-visual--recovery .c4-lock-body { fill: #7b8ef5; }
body.dark-mode .auth-visual--recovery .c4-lock-arc { stroke: #7b8ef5; }
body.dark-mode .auth-visual--verify .c4-env-body {
    fill: rgba(94,114,228,.14);
    stroke: rgba(154,169,255,.55);
}
body.dark-mode .auth-visual--verify .c4-env-flap { stroke: rgba(154,169,255,.7); }
body.dark-mode .auth-visual--verify .c4-badge { fill: #22b276; }


/* ====================================================================
   §8.6 — Reduced motion: apaga todas las animaciones de auth visuals
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
    .auth-split-visual [class*="c1-"],
    .auth-split-visual [class*="c2-"],
    .auth-split-visual [class*="c3-"],
    .auth-split-visual [class*="c4-"] {
        animation: none !important;
    }
}