/**
 * ============================================================================
 * JEFTEK — Hoja de Estilos Principal
 * ============================================================================
 * Filosofía de diseño: Jonathan Ive / Apple.
 * Minimalismo radical, tipografía precisa, espacio generoso.
 *
 * ÍNDICE:
 *   1. Variables (Custom Properties)
 *   2. Reset & Base
 *   3. Tipografía
 *   4. Navegación
 *   5. Hero
 *   6. Secciones
 *   7. Tarjetas de Servicio
 *   8. CTA (Call to Action)
 *   9. Formularios
 *  10. Footer
 *  11. WhatsApp Flotante
 *  12. Utilidades
 *  13. Responsive
 * ============================================================================
 */


/* ═══════════════════════════════════════════════════════════════════════════
   1. VARIABLES
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ─── Paleta ─── */
    --jfk-black:        #1d1d1f;
    --jfk-dark:         #2d2d2f;
    --jfk-gray-700:     #424245;
    --jfk-gray-500:     #6e6e73;
    --jfk-gray-300:     #a1a1a6;
    --jfk-gray-100:     #f5f5f7;
    --jfk-white:        #ffffff;
    --jfk-accent:       #0071e3;
    --jfk-accent-hover: #0077ed;
    --jfk-accent-light: #e8f2fe;
    --jfk-green:        #30d158;
    --jfk-red:          #ff3b30;

    /* ─── Tipografía ─── */
    --jfk-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    --jfk-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* ─── Escala tipográfica ─── */
    --jfk-text-xs:   0.75rem;   /* 12px */
    --jfk-text-sm:   0.875rem;  /* 14px */
    --jfk-text-base: 1rem;      /* 16px */
    --jfk-text-lg:   1.125rem;  /* 18px */
    --jfk-text-xl:   1.25rem;   /* 20px */
    --jfk-text-2xl:  1.75rem;   /* 28px */
    --jfk-text-3xl:  2.5rem;    /* 40px */
    --jfk-text-4xl:  3.5rem;    /* 56px */
    --jfk-text-hero: clamp(2.5rem, 5vw, 5rem);

    /* ─── Espaciado ─── */
    --jfk-space-xs:   0.5rem;
    --jfk-space-sm:   1rem;
    --jfk-space-md:   2rem;
    --jfk-space-lg:   4rem;
    --jfk-space-xl:   6rem;
    --jfk-space-2xl:  8rem;
    --jfk-section-py: clamp(4rem, 8vw, 8rem);

    /* ─── Bordes y sombras ─── */
    --jfk-radius:     12px;
    --jfk-radius-lg:  20px;
    --jfk-shadow-sm:  0 1px 3px rgba(0,0,0,0.04);
    --jfk-shadow:     0 4px 24px rgba(0,0,0,0.06);
    --jfk-shadow-lg:  0 12px 48px rgba(0,0,0,0.08);

    /* ─── Transiciones ─── */
    --jfk-ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
    --jfk-duration:   0.3s;
    --jfk-duration-lg: 0.6s;

    /* ─── Navbar ─── */
    --jfk-nav-height: 64px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.jfk-body {
    font-family: var(--jfk-font-body);
    font-size: var(--jfk-text-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--jfk-black);
    background-color: var(--jfk-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.jfk-h1, .jfk-h2, .jfk-h3, .jfk-h4 {
    font-family: var(--jfk-font-display);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--jfk-black);
}

.jfk-h1 { font-size: var(--jfk-text-hero); font-weight: 700; }
.jfk-h2 { font-size: var(--jfk-text-4xl); }
.jfk-h3 { font-size: var(--jfk-text-2xl); }
.jfk-h4 { font-size: var(--jfk-text-xl); font-weight: 500; }

.jfk-subtitle {
    font-size: var(--jfk-text-xl);
    color: var(--jfk-gray-500);
    font-weight: 400;
    line-height: 1.5;
    max-width: 640px;
}

.jfk-overline {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--jfk-accent);
    margin-bottom: var(--jfk-space-xs);
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. NAVEGACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-navbar {
    height: var(--jfk-nav-height);
    background: rgba(255,255,255,0.82);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: background var(--jfk-duration) var(--jfk-ease);
    z-index: 1030;
}

.jfk-navbar.scrolled {
    background: rgba(255,255,255,0.95);
    box-shadow: var(--jfk-shadow-sm);
}

.jfk-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.jfk-logo-text {
    font-family: var(--jfk-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--jfk-black);
}

.jfk-navbar .nav-link {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-sm);
    font-weight: 400;
    color: var(--jfk-gray-700);
    padding: 0.5rem 1rem !important;
    transition: color var(--jfk-duration) var(--jfk-ease);
}

.jfk-navbar .nav-link:hover,
.jfk-navbar .nav-link.active {
    color: var(--jfk-black);
}

.jfk-nav-spacer {
    height: var(--jfk-nav-height);
}

/* ─── Hamburger custom ─── */
.jfk-toggler {
    border: none;
    padding: 0.5rem;
    background: transparent;
}

.jfk-hamburger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

.jfk-hamburger span {
    display: block;
    height: 1.5px;
    background: var(--jfk-black);
    border-radius: 2px;
    transition: all var(--jfk-duration) var(--jfk-ease);
}

/* ─── Botón CTA navbar ─── */
.jfk-btn-primary {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-sm);
    font-weight: 500;
    background: var(--jfk-accent);
    color: var(--jfk-white) !important;
    border: none;
    border-radius: 980px;
    padding: 0.55rem 1.4rem;
    transition: all var(--jfk-duration) var(--jfk-ease);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.jfk-btn-primary:hover {
    background: var(--jfk-accent-hover);
    transform: scale(1.02);
}

.jfk-btn-secondary {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-sm);
    font-weight: 500;
    background: transparent;
    color: var(--jfk-accent) !important;
    border: none;
    padding: 0.55rem 0;
    text-decoration: none;
    transition: color var(--jfk-duration) var(--jfk-ease);
}

.jfk-btn-secondary:hover {
    color: var(--jfk-accent-hover) !important;
}

.jfk-btn-secondary i {
    transition: transform var(--jfk-duration) var(--jfk-ease);
}

.jfk-btn-secondary:hover i {
    transform: translateX(4px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. HERO
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-hero {
    position: relative;
    padding: var(--jfk-space-2xl) 0 var(--jfk-space-xl);
    text-align: center;
    overflow: hidden;
    background: var(--jfk-white);
}

.jfk-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(0,113,227,0.04) 0%, transparent 70%);
    pointer-events: none;
}

.jfk-hero-title {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-hero);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--jfk-black);
    margin-bottom: var(--jfk-space-sm);
}

.jfk-hero-title .jfk-gradient-text {
    background: linear-gradient(135deg, var(--jfk-accent) 0%, #40a9ff 50%, var(--jfk-green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.jfk-hero-subtitle {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    color: var(--jfk-gray-500);
    max-width: 580px;
    margin: 0 auto var(--jfk-space-md);
    line-height: 1.55;
}

.jfk-hero-actions {
    display: flex;
    gap: var(--jfk-space-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.jfk-hero-actions .jfk-btn-primary {
    padding: 0.75rem 2rem;
    font-size: var(--jfk-text-base);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. SECCIONES
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-section {
    padding: var(--jfk-section-py) 0;
}

.jfk-section-gray {
    background: var(--jfk-gray-100);
}

.jfk-section-header {
    text-align: center;
    margin-bottom: var(--jfk-space-lg);
}

.jfk-section-header .jfk-h2 {
    margin-bottom: var(--jfk-space-xs);
}

.jfk-section-header .jfk-subtitle {
    margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. TARJETAS DE SERVICIO
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-card {
    background: var(--jfk-white);
    border-radius: var(--jfk-radius-lg);
    padding: var(--jfk-space-md);
    border: 1px solid rgba(0,0,0,0.04);
    transition: all var(--jfk-duration-lg) var(--jfk-ease);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.jfk-card:hover {
    box-shadow: var(--jfk-shadow-lg);
    transform: translateY(-4px);
}

.jfk-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--jfk-accent-light);
    color: var(--jfk-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--jfk-space-sm);
    flex-shrink: 0;
}

.jfk-card h3 {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-xl);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.jfk-card p {
    color: var(--jfk-gray-500);
    font-size: var(--jfk-text-sm);
    line-height: 1.6;
    flex-grow: 1;
}

/* ─── Variante oscura ─── */
.jfk-card-dark {
    background: var(--jfk-black);
    border-color: transparent;
}

.jfk-card-dark h3 { color: var(--jfk-white); }
.jfk-card-dark p { color: var(--jfk-gray-300); }

/* ─── Badges de marca ─── */
.jfk-brand-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: var(--jfk-space-sm);
}

.jfk-badge {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-xs);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: 980px;
    background: var(--jfk-gray-100);
    color: var(--jfk-gray-700);
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. CTA
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-cta {
    background: var(--jfk-black);
    color: var(--jfk-white);
    padding: var(--jfk-section-py) 0;
    text-align: center;
}

.jfk-cta .jfk-h2 {
    color: var(--jfk-white);
}

.jfk-cta .jfk-subtitle {
    color: var(--jfk-gray-300);
    margin: 0 auto var(--jfk-space-md);
}

.jfk-cta .jfk-btn-primary {
    padding: 0.85rem 2.5rem;
    font-size: var(--jfk-text-lg);
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. FORMULARIOS
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-form-group {
    margin-bottom: 1.25rem;
}

.jfk-form-group label {
    display: block;
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-sm);
    font-weight: 500;
    color: var(--jfk-gray-700);
    margin-bottom: 0.4rem;
}

.jfk-input,
.jfk-select,
.jfk-textarea {
    width: 100%;
    font-family: var(--jfk-font-body);
    font-size: var(--jfk-text-base);
    padding: 0.75rem 1rem;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: var(--jfk-radius);
    background: var(--jfk-white);
    color: var(--jfk-black);
    transition: border-color var(--jfk-duration) var(--jfk-ease),
                box-shadow var(--jfk-duration) var(--jfk-ease);
    outline: none;
}

.jfk-input:focus,
.jfk-select:focus,
.jfk-textarea:focus {
    border-color: var(--jfk-accent);
    box-shadow: 0 0 0 3px rgba(0,113,227,0.12);
}

.jfk-textarea {
    min-height: 120px;
    resize: vertical;
}

.jfk-form-note {
    font-size: var(--jfk-text-xs);
    color: var(--jfk-gray-300);
    margin-top: 1rem;
}

.jfk-form-success {
    background: rgba(48,209,88,0.1);
    color: #1a7a32;
    padding: 1rem 1.25rem;
    border-radius: var(--jfk-radius);
    font-weight: 500;
}

.jfk-form-error {
    background: rgba(255,59,48,0.08);
    color: var(--jfk-red);
    padding: 1rem 1.25rem;
    border-radius: var(--jfk-radius);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-footer {
    background: var(--jfk-gray-100);
    padding: var(--jfk-space-xl) 0 var(--jfk-space-md);
    border-top: 1px solid rgba(0,0,0,0.04);
}

.jfk-footer-brand .jfk-logo-text {
    font-size: 1.25rem;
}

.jfk-footer-tagline {
    font-size: var(--jfk-text-sm);
    color: var(--jfk-gray-500);
    margin: 0.5rem 0;
}

.jfk-footer-legal {
    font-size: var(--jfk-text-xs);
    color: var(--jfk-gray-300);
    line-height: 1.6;
}

.jfk-footer-heading {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jfk-gray-500);
    margin-bottom: 1rem;
}

.jfk-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jfk-footer-links li {
    margin-bottom: 0.5rem;
}

.jfk-footer-links a {
    font-size: var(--jfk-text-sm);
    color: var(--jfk-gray-700);
    text-decoration: none;
    transition: color var(--jfk-duration) var(--jfk-ease);
}

.jfk-footer-links a:hover {
    color: var(--jfk-accent);
}

.jfk-footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jfk-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: var(--jfk-text-sm);
}

.jfk-footer-contact i {
    color: var(--jfk-gray-300);
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.jfk-footer-contact a {
    color: var(--jfk-gray-700);
    text-decoration: none;
    transition: color var(--jfk-duration) var(--jfk-ease);
}

.jfk-footer-contact a:hover {
    color: var(--jfk-accent);
}

.jfk-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--jfk-space-lg);
    padding-top: var(--jfk-space-sm);
    border-top: 1px solid rgba(0,0,0,0.06);
    font-size: var(--jfk-text-xs);
    color: var(--jfk-gray-300);
}

.jfk-footer-bottom a {
    color: var(--jfk-gray-500);
    text-decoration: none;
}

.jfk-footer-bottom a:hover {
    color: var(--jfk-accent);
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. WHATSAPP FLOTANTE
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366;
    color: var(--jfk-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 16px rgba(37,211,102,0.35);
    transition: all var(--jfk-duration) var(--jfk-ease);
    z-index: 1020;
    text-decoration: none;
}

.jfk-whatsapp-float:hover {
    transform: scale(1.08);
    color: var(--jfk-white);
    box-shadow: 0 6px 24px rgba(37,211,102,0.45);
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. UTILIDADES
   ═══════════════════════════════════════════════════════════════════════════ */
.jfk-divider {
    width: 40px;
    height: 2px;
    background: var(--jfk-accent);
    border: none;
    margin: var(--jfk-space-sm) auto;
}

.jfk-text-center { text-align: center; }

.jfk-mx-auto { margin-left: auto; margin-right: auto; }

.jfk-max-w-narrow { max-width: 640px; }

.jfk-max-w-medium { max-width: 860px; }

/* ─── Página interior hero ─── */
.jfk-page-hero {
    padding: var(--jfk-space-xl) 0 var(--jfk-space-lg);
    text-align: center;
    background: var(--jfk-gray-100);
}

/* ─── Mapa responsive ─── */
.jfk-map-wrapper {
    border-radius: var(--jfk-radius-lg);
    overflow: hidden;
    box-shadow: var(--jfk-shadow);
    aspect-ratio: 16/9;
}

.jfk-map-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

/* ─── Stats grid (Nosotros) ─── */
.jfk-stat {
    text-align: center;
    padding: var(--jfk-space-md) var(--jfk-space-sm);
}

.jfk-stat-number {
    font-family: var(--jfk-font-display);
    font-size: var(--jfk-text-4xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--jfk-accent);
}

.jfk-stat-label {
    font-size: var(--jfk-text-sm);
    color: var(--jfk-gray-500);
    margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .jfk-navbar .navbar-collapse {
        background: var(--jfk-white);
        padding: 1rem 0;
        margin-top: 0.5rem;
        border-radius: var(--jfk-radius);
        box-shadow: var(--jfk-shadow);
    }

    .jfk-navbar .nav-link {
        padding: 0.75rem 1.25rem !important;
    }

    .jfk-navbar .jfk-btn-primary {
        margin: 0.5rem 1.25rem;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    :root {
        --jfk-text-4xl: 2.5rem;
    }

    .jfk-hero {
        padding: var(--jfk-space-xl) 0 var(--jfk-space-lg);
    }

    .jfk-footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. MODO OSCURO (prefers-color-scheme: dark)
   Se activa automáticamente según la preferencia del sistema operativo.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    :root {
        /* ─── Paleta invertida ─── */
        --jfk-black:        #f5f5f7;
        --jfk-dark:         #e0e0e2;
        --jfk-gray-700:     #c7c7cc;
        --jfk-gray-500:     #98989d;
        --jfk-gray-300:     #636366;
        --jfk-gray-100:     #1c1c1e;
        --jfk-white:        #000000;
        --jfk-accent:       #2997ff;
        --jfk-accent-hover: #40a6ff;
        --jfk-accent-light: rgba(41,151,255,0.12);

        /* ─── Sombras más sutiles en oscuro ─── */
        --jfk-shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
        --jfk-shadow:     0 4px 24px rgba(0,0,0,0.4);
        --jfk-shadow-lg:  0 12px 48px rgba(0,0,0,0.5);
    }

    /* ─── Body ─── */
    .jfk-body {
        background-color: #000000;
        color: var(--jfk-black);
    }

    /* ─── Navbar ─── */
    .jfk-navbar {
        background: rgba(28, 28, 30, 0.85);
        border-bottom-color: rgba(255,255,255,0.08);
    }

    .jfk-navbar.scrolled {
        background: rgba(28, 28, 30, 0.97);
    }

    /* Menú desplegable móvil */
    .jfk-navbar .navbar-collapse {
        background: #1c1c1e !important;
    }

    /* ─── Hero ─── */
    .jfk-hero {
        background: #000000;
    }

    /* ─── Secciones alternas ─── */
    .jfk-section-gray {
        background: #111111;
    }

    .jfk-page-hero {
        background: #111111;
    }

    /* ─── Tarjetas ─── */
    .jfk-card {
        background: #1c1c1e;
        border-color: rgba(255,255,255,0.06);
    }

    .jfk-card-dark {
        background: #2c2c2e;
    }

    /* Badges */
    .jfk-badge {
        background: #2c2c2e;
        color: var(--jfk-dark);
    }

    /* ─── Formularios ─── */
    .jfk-input,
    .jfk-select,
    .jfk-textarea {
        background: #1c1c1e;
        border-color: rgba(255,255,255,0.1);
        color: #f5f5f7;
    }

    .jfk-input::placeholder,
    .jfk-textarea::placeholder {
        color: #636366;
    }

    .jfk-input:focus,
    .jfk-select:focus,
    .jfk-textarea:focus {
        border-color: var(--jfk-accent);
        box-shadow: 0 0 0 3px rgba(41,151,255,0.18);
    }

    .jfk-form-group label {
        color: #c7c7cc;
    }

    .jfk-form-note {
        color: #636366;
    }

    .jfk-form-success {
        background: rgba(48,209,88,0.12);
        color: #30d158;
    }

    .jfk-form-error {
        background: rgba(255,69,58,0.12);
        color: #ff453a;
    }

    /* ─── Footer ─── */
    .jfk-footer {
        background: #111111;
        border-top-color: rgba(255,255,255,0.06);
    }

    .jfk-footer-bottom {
        border-top-color: rgba(255,255,255,0.06);
    }

    /* ─── Mapa ─── */
    .jfk-map-wrapper iframe {
        filter: invert(90%) hue-rotate(180deg);
    }

    /* ─── Placeholder de imagen (servicios/nosotros) ─── */
    [style*="background:var(--jfk-gray-100)"],
    [style*="background: var(--jfk-gray-100)"] {
        background: #1c1c1e !important;
    }

    /* ─── Botón secundario: ajuste de color en secciones claras ─── */
    .jfk-cta .jfk-btn-secondary {
        color: #f5f5f7 !important;
    }

    /* ─── Stat numbers en modo oscuro ─── */
    .jfk-stat-number {
        color: var(--jfk-accent);
    }

    /* ─── Scrollbar sutil ─── */
    ::-webkit-scrollbar { width: 8px; background: #111; }
    ::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #48484a; }
}

/* Respeta preferencia explícita del usuario (toggle manual futuro) */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
}