/* ============================================
   LECCER — theme.css
   Dark-mode / Futurist overlay for landing (index.html).
   Loaded AFTER styles.css to override selectively.
   Keeps ALL existing class names + IDs intact.
   ============================================ */

/* === Base === */
html {
    scroll-behavior: smooth;
    background: var(--bg-base);
}

body {
    font-family: var(--font-body);
    background: var(--bg-base);
    color: var(--text-primary);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle ambient mesh in the background of the entire page */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--gradient-mesh);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
}

body > * {
    position: relative;
    z-index: 1;
}

::selection {
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
}

/* === Header / Nav === */
.header {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: none !important;
    transition: border-color var(--duration-base) var(--ease-out);
}

.header.is-scrolled {
    border-bottom-color: var(--border-default);
    box-shadow: 0 8px 32px rgba(15, 15, 25, 0.08) !important;
}

.nav-container {
    padding: 14px 30px;
}

.logo-img {
    filter: brightness(1.1) drop-shadow(0 0 12px rgba(0, 240, 255, 0.25));
    transition: filter var(--duration-base) var(--ease-out);
}

.logo-link:hover .logo-img {
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 18px rgba(0, 240, 255, 0.5));
}

.nav-menu a {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-snug);
    position: relative;
    transition: color var(--duration-fast) var(--ease-out);
}

.nav-menu a:not(.nav-login):not(.btn-registro)::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-base) var(--ease-out);
}

.nav-menu a:not(.nav-login):not(.btn-registro):hover {
    color: var(--text-primary);
}

.nav-menu a:not(.nav-login):not(.btn-registro):hover::after {
    transform: scaleX(1);
}

.nav-login {
    color: var(--accent-cyan) !important;
    border: 1px solid var(--border-glow) !important;
    border-radius: var(--radius-sm);
    background: transparent;
    transition: all var(--duration-base) var(--ease-out);
}

.nav-login:hover {
    background: var(--accent-cyan-soft) !important;
    color: var(--accent-cyan) !important;
    box-shadow: var(--glow-cyan);
    border-color: var(--accent-cyan) !important;
}

.btn-registro {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    box-shadow: 0 0 0 1px rgba(123, 63, 242, 0.2), 0 8px 24px -8px rgba(123, 63, 242, 0.6);
    position: relative;
    overflow: hidden;
}

.btn-registro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-gold);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}

.btn-registro:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.4), 0 12px 32px -8px rgba(0, 240, 255, 0.5);
}

.btn-registro span,
.btn-registro {
    position: relative;
    z-index: 1;
}

.hamburger-menu span {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

/* === Hero === */
.hero {
    background: transparent !important;
    margin-top: 80px;
    padding: 120px 20px 140px;
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, var(--bg-base) 85%);
    pointer-events: none;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-logo {
    width: 96px;
    height: 96px;
    margin-bottom: 32px;
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-gold), 0 20px 60px -10px rgba(246, 173, 85, 0.35);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero h2 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    background: linear-gradient(135deg, #0A0A0F 0%, #52525B 60%, #0A0A0F 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--text-primary);
    margin-bottom: 24px;
}

.hero p {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 40px;
    line-height: var(--leading-relaxed);
}

/* === Global button system === */
.btn-primary {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    padding: 16px 36px;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(123, 63, 242, 0.2), 0 12px 32px -12px rgba(123, 63, 242, 0.6);
    transition: all var(--duration-base) var(--ease-out);
}

.btn-primary:hover {
    background: var(--gradient-primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--accent-cyan), 0 16px 40px -8px rgba(0, 240, 255, 0.5);
}

.btn-secondary {
    background: transparent !important;
    color: var(--accent-cyan) !important;
    border: 1px solid var(--border-glow) !important;
    padding: 16px 36px;
    border-radius: var(--radius-sm);
}

.btn-secondary:hover {
    background: var(--accent-cyan-soft) !important;
    color: var(--accent-cyan) !important;
    box-shadow: var(--glow-cyan);
    transform: translateY(-2px);
}

.btn-submit {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px var(--accent-cyan), 0 16px 40px -8px rgba(0, 240, 255, 0.5);
}

.btn-asesoria {
    background: var(--gradient-gold) !important;
    color: var(--text-inverse) !important;
    font-weight: 700;
}

/* === Section chrome === */
section {
    padding: 100px 0;
    position: relative;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin-bottom: 56px;
}

.intro-text {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}

.intro-text strong {
    color: var(--accent-cyan);
    font-weight: 600;
}

/* === Adaptive grid for "qué es LECCER" features (3 cards) === */
.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
}

/* === Reusable "card" look === */
.que-es-leccer,
.como-funciona,
.proceso-detalle,
.servicios,
.padron,
.negocios,
.faq,
.nosotros,
.valores,
.contacto {
    background: transparent !important;
}

.feature-item,
.proceso-item,
.paso-item,
.servicio-item,
.servicio-card,
.beneficio-card,
.funcionalidad-item,
.valor-item,
.contacto-item,
.cert-block,
.mision,
.vision,
.faq-item,
.categoria {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg);
    padding: 32px;
    transition: border-color var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
    position: relative;
    overflow: hidden;
}

.feature-item::before,
.servicio-card::before,
.beneficio-card::before,
.cert-block::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    z-index: 0;
    mix-blend-mode: overlay;
}

.feature-item:hover,
.proceso-item:hover,
.paso-item:hover,
.servicio-item:hover,
.servicio-card:hover,
.beneficio-card:hover,
.funcionalidad-item:hover,
.valor-item:hover,
.faq-item:hover {
    border-color: var(--border-glow) !important;
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-glow), 0 0 40px -10px var(--accent-cyan);
}

.feature-item > *,
.servicio-card > *,
.beneficio-card > *,
.cert-block > * {
    position: relative;
    z-index: 1;
}

/* === Typography inside cards === */
.feature-item h3,
.servicio-item h3,
.servicio-card h3,
.beneficio-card h3,
.valor-item h4,
.cert-block h3,
.mision h3,
.vision h3,
.contacto-item h3,
.funcionalidad-item h4,
.servicios-adicionales h3,
.negocios-funcionalidades h3,
.padron-cta p strong,
.categoria h4 {
    font-family: var(--font-display);
    color: var(--text-primary) !important;
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
}

.feature-item p,
.servicio-item p,
.servicio-card p,
.beneficio-card p,
.valor-item p,
.cert-block p,
.mision p,
.vision p,
.contacto-item p,
.funcionalidad-item p,
.faq-respuesta,
.categoria p {
    color: var(--text-secondary) !important;
    line-height: var(--leading-relaxed);
}

/* === Proceso / Pasos === */
.proceso-grid {
    gap: 24px;
}

.proceso-item {
    text-align: center;
}

.proceso-icon {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 700;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border: 1px solid var(--border-glow);
    color: transparent;
    background-image: var(--gradient-primary);
    background-clip: text;
    -webkit-background-clip: text;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 24px -4px var(--accent-violet-soft);
}

.proceso-item p {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

.proceso-item strong {
    color: var(--accent-gold);
}

.paso-numero {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 600;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--accent-cyan-soft);
    color: var(--accent-cyan);
    border: 1px solid var(--border-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.paso-item {
    display: flex;
    gap: 20px;
    align-items: center;
}

.paso-item p {
    color: var(--text-secondary);
    margin: 0;
}

.paso-item a {
    color: var(--accent-cyan);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.95em;
}

.paso-item a:hover {
    text-shadow: 0 0 12px var(--accent-cyan);
}

/* === Servicios numbered === */
.servicio-number {
    font-family: var(--font-display);
    background: transparent !important;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-sm) !important;
    color: transparent !important;
    background-image: var(--gradient-primary) !important;
    background-clip: text !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    width: 56px;
    height: 56px;
    font-size: var(--text-2xl);
    font-weight: 700;
}

.beneficio-numero {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-cyan);
    letter-spacing: var(--tracking-wider);
    margin-bottom: 12px;
    display: inline-block;
    padding: 4px 10px;
    background: var(--accent-cyan-soft);
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-glow);
}

/* === Servicio beneficios list === */
.servicio-beneficios li {
    color: var(--text-secondary);
}

.servicio-beneficios li::before {
    background: var(--gradient-primary);
    box-shadow: 0 0 8px var(--accent-cyan);
}

/* === Proceso lista counter === */
.proceso-lista li {
    border-bottom-color: var(--border-subtle);
    color: var(--text-secondary);
}

.proceso-lista li::before {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 0 16px -4px var(--accent-violet);
}

/* === Padrón === */
.padron-tabla-container {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    overflow: hidden;
}

.padron-tabla {
    background: transparent;
}

.padron-tabla thead {
    background: linear-gradient(135deg, rgba(123, 63, 242, 0.15), rgba(0, 240, 255, 0.1)) !important;
}

.padron-tabla thead th {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    border-bottom: 1px solid var(--border-glow);
}

.padron-tabla tbody tr {
    border-bottom-color: var(--border-subtle);
}

.padron-tabla tbody tr:hover {
    background: var(--bg-glass);
}

.padron-tabla tbody td {
    color: var(--text-secondary);
}

.tabla-empresa-nombre {
    color: var(--text-primary) !important;
    font-weight: 600;
}

.padron-tabla code {
    background: var(--bg-elevated);
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    border: 1px solid var(--border-subtle);
}

.empresa-status {
    font-family: var(--font-mono);
    letter-spacing: var(--tracking-wider);
    border-radius: var(--radius-xs);
}

.empresa-status.vigente {
    background: rgba(16, 217, 129, 0.12) !important;
    color: var(--success) !important;
    border: 1px solid rgba(16, 217, 129, 0.3);
}

.empresa-status.expirada {
    background: rgba(239, 69, 101, 0.12) !important;
    color: var(--danger) !important;
    border: 1px solid rgba(239, 69, 101, 0.3);
}

.tabla-verificar-link {
    color: var(--accent-cyan) !important;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.tabla-verificar-link:hover {
    text-shadow: 0 0 12px var(--accent-cyan);
    text-decoration: none !important;
}

.padron-loading .loading-spinner {
    border-color: var(--border-subtle);
    border-top-color: var(--accent-cyan);
}

.padron-loading p,
.padron-vacio p {
    color: var(--text-secondary);
}

.padron-vacio,
.padron-cta,
.padron-proximamente {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
}

.padron-vacio h3,
.padron-proximamente h3 {
    color: var(--text-primary);
}

.padron-icon {
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 12px var(--accent-cyan));
}

/* === Mision/Vision border accent === */
.mision, .vision {
    border-left: none !important;
    position: relative;
}

.mision::after, .vision::after {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    background: var(--gradient-primary);
    box-shadow: 0 0 12px var(--accent-violet);
}

/* === FAQ === */
.faq-pregunta {
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-weight: 600;
}

.faq-cta {
    color: var(--text-secondary);
    text-align: center;
    margin-top: 40px;
}

/* === Contacto === */
.contacto-simple {
    align-items: stretch;
    gap: 20px !important;
}

.contacto-item {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: 28px 18px !important;
    gap: 12px;
    min-width: 0;
}

.contacto-item h3 {
    font-family: var(--font-mono) !important;
    font-size: var(--text-xs) !important;
    letter-spacing: var(--tracking-wider);
    color: var(--accent-cyan) !important;
    text-transform: uppercase;
    margin: 0 0 4px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 8px;
}

.contacto-item h3::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    flex-shrink: 0;
}

.contacto-item p {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--leading-relaxed);
    margin: 0 !important;
}

.contacto-item a {
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem; /* 12px */
    letter-spacing: -0.01em;
    text-decoration: none !important;
    transition: color var(--duration-fast) var(--ease-out),
                text-shadow var(--duration-fast) var(--ease-out);
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
}

.contacto-item a:hover {
    color: var(--accent-cyan) !important;
    text-shadow: 0 0 12px var(--accent-cyan);
}

/* === Negocios CTA — standout gradient panel === */
.negocios-cta {
    background: linear-gradient(135deg, rgba(123, 63, 242, 0.08) 0%, rgba(0, 184, 212, 0.06) 100%), #FFFFFF !important;
    border: 1px solid var(--border-glow);
    border-radius: var(--radius-xl) !important;
    padding: 72px 48px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 184, 212, 0.12),
                0 30px 60px -20px rgba(123, 63, 242, 0.22),
                0 10px 30px -10px rgba(15, 15, 25, 0.08);
    color: var(--text-primary) !important;
    margin-top: 40px;
}

.negocios-cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: radial-gradient(ellipse at top, rgba(123, 63, 242, 0.18), transparent 60%),
                radial-gradient(ellipse at bottom right, rgba(0, 184, 212, 0.14), transparent 55%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.9;
}

.negocios-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(15, 15, 25, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 15, 25, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.negocios-cta > * {
    position: relative;
    z-index: 1;
}

.negocios-cta h3 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 700 !important;
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text-primary) !important;
    margin-bottom: 16px !important;
    background: linear-gradient(135deg, #0A0A0F 0%, #52525B 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.negocios-cta p {
    font-size: var(--text-lg) !important;
    color: var(--text-secondary) !important;
    opacity: 1 !important;
    max-width: 600px;
    margin: 0 auto 32px !important;
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .negocios-cta {
        padding: 48px 24px !important;
    }
}

/* === Footer === */
.footer {
    background: var(--bg-elevated) !important;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    margin-top: 0;
}

.footer-info p,
.footer-legal p {
    color: var(--text-muted);
}

/* === Forms (for pages that embed the landing styles) === */
.form-group label {
    color: var(--text-secondary);
    font-family: var(--font-body);
    letter-spacing: var(--tracking-snug);
}

.form-group input,
.form-group textarea {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    transition: all var(--duration-base) var(--ease-out);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-cyan);
    background: var(--bg-surface);
    box-shadow: 0 0 0 3px var(--accent-cyan-soft), 0 0 20px -5px var(--accent-cyan);
}

.form-group input.valid,
.form-group textarea.valid {
    border-color: var(--success);
    background: rgba(16, 217, 129, 0.05);
}

.form-group input.invalid,
.form-group textarea.invalid {
    border-color: var(--danger);
    background: rgba(239, 69, 101, 0.05);
}

.country-code-select {
    background-color: var(--bg-elevated) !important;
    color: var(--text-primary);
    border-color: var(--border-default);
}

/* === Mobile menu === */
.menu-overlay {
    background: rgba(15, 15, 25, 0.4);
}

@media (max-width: 768px) {
    .nav-menu {
        background: var(--bg-surface) !important;
        border-left: 1px solid var(--border-subtle);
    }

    .nav-menu a {
        color: var(--text-secondary) !important;
    }

    .nav-menu a:hover {
        color: var(--text-primary) !important;
    }

    .mobile-menu-header {
        background: var(--bg-surface) !important;
        border-bottom-color: var(--border-subtle) !important;
    }

    .mobile-menu-close {
        color: var(--text-secondary);
    }

    .mobile-menu-close:hover {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
}

/* ============================================
   === Auth pages: fit on viewport ===
   login, crear-cuenta, recuperar-password
   ============================================ */

.login-section,
.crear-cuenta-section,
.recuperar-section,
.admin-login-section {
    margin-top: 0 !important;
    padding: 24px 20px !important;
    min-height: 100vh !important;
    padding-top: calc(80px + 24px) !important; /* header + breathing room */
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.login-container,
.crear-cuenta-container,
.recuperar-container,
.admin-login-container {
    padding: 36px 36px !important;
    max-width: 440px !important;
    width: 100%;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg);
}

.login-header,
.crear-cuenta-header,
.recuperar-header,
.admin-login-header {
    margin-bottom: 24px !important;
}

.login-header img,
.crear-cuenta-header img,
.recuperar-header img,
.admin-login-header img {
    height: 48px !important;
    margin-bottom: 14px !important;
}

.login-header h2,
.crear-cuenta-header h2,
.recuperar-header h2,
.admin-login-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl) !important;
    margin-bottom: 6px !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}

.login-header p,
.crear-cuenta-header p,
.recuperar-header p,
.admin-login-header p {
    font-size: var(--text-sm) !important;
    color: var(--text-secondary);
}

.login-form .form-group,
.crear-cuenta-form .form-group,
.recuperar-form .form-group,
.auth-form .form-group {
    margin-bottom: 16px !important;
}

.login-form input,
.login-form textarea,
.crear-cuenta-form input,
.recuperar-form input,
.auth-form input {
    padding: 12px 14px !important;
}

.btn-login,
.btn-crear-cuenta,
.btn-recuperar,
.btn-admin-login {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    padding: 13px 24px !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(123, 63, 242, 0.5);
    transition: all var(--duration-base) var(--ease-out);
}

.btn-login:hover,
.btn-crear-cuenta:hover,
.btn-recuperar:hover,
.btn-admin-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(0, 184, 212, 0.5);
}

.login-links {
    margin-top: 14px !important;
    text-align: center;
}

.login-links a,
.login-footer a {
    color: var(--accent-cyan) !important;
    text-decoration: none;
    font-size: var(--text-sm);
    transition: text-shadow var(--duration-fast) var(--ease-out);
}

.login-links a:hover,
.login-footer a:hover {
    text-shadow: 0 0 10px var(--accent-cyan);
}

.login-divider {
    margin: 16px 0 !important;
    position: relative;
    text-align: center;
}

.login-divider span {
    background: var(--bg-surface);
    padding: 0 12px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    position: relative;
    z-index: 1;
}

.login-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border-subtle);
    z-index: 0;
}

.login-footer,
.crear-cuenta-footer,
.recuperar-footer {
    margin-top: 18px !important;
    padding-top: 14px !important;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
}

.login-footer p,
.crear-cuenta-footer p,
.recuperar-footer p {
    font-size: var(--text-sm) !important;
    color: var(--text-secondary);
    margin-bottom: 4px !important;
}

.crear-cuenta-footer a,
.recuperar-footer a {
    color: var(--accent-cyan) !important;
    text-decoration: none;
    font-size: var(--text-sm);
    transition: text-shadow var(--duration-fast) var(--ease-out);
}

.crear-cuenta-footer a:hover,
.recuperar-footer a:hover {
    text-shadow: 0 0 10px var(--accent-cyan);
}

.btn-crear {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    padding: 13px 24px !important;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 600;
    width: 100%;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(123, 63, 242, 0.5);
    transition: all var(--duration-base) var(--ease-out);
}

.btn-crear:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -8px rgba(0, 184, 212, 0.5);
}

/* Password visibility toggle */
.toggle-password {
    background: transparent !important;
    color: var(--accent-cyan) !important;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: 600;
}

/* ============================================
   === Auth-aware nav ===
   While auth state is being resolved, hide BOTH guest and
   authenticated items to avoid FOUC. JS removes the body
   class when the check finishes, letting the chosen set show.
   ============================================ */

body.auth-unknown [data-auth] {
    display: none !important;
}

.nav-user {
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 0 8px;
    letter-spacing: -0.01em;
    border-right: 1px solid var(--border-subtle);
    margin-right: 4px;
}

.nav-user-email {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

.nav-logout {
    background: transparent !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    color: var(--danger) !important;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}

.nav-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
    border-color: var(--danger) !important;
    color: var(--danger) !important;
}

/* === Scroll reveal starting state (GSAP will animate) === */
[data-reveal] {
    opacity: 0;
    transform: translateY(32px);
}

[data-reveal-fade] {
    opacity: 0;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal],
    [data-reveal-fade] {
        opacity: 1;
        transform: none;
    }
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-elevated);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-violet);
}