/* ====================================
   MEJORAS DE MODO OSCURO Y RESPONSIVE
====================================== */

/* Asegurar que modo oscuro afecte todas las secciones */
body.dark-mode .section h2 {
    color: var(--text-primary);
}

body.dark-mode .service-card p,
body.dark-mode .portfolio-info p,
body.dark-mode .contact-info p {
    color: var(--text-secondary);
}

body.dark-mode .header.scrolled {
    background: rgba(11, 14, 17, 0.98);
}

body.dark-mode .menu {
    background: var(--gradient-dark);
}

body.dark-mode .experience-card,
body.dark-mode .education-item {
    background-color: var(--bg-secondary);
}

body.dark-mode .company-image,
body.dark-mode .education-image {
    background-color: var(--bg-tertiary);
}

body.dark-mode .contact-form,
body.dark-mode .contact-info {
    background-color: var(--bg-secondary);
}

/* ====================================
   RESPONSIVE MEJORADO - MÓVILES
====================================== */

/* Tablets y móviles grandes (≤768px) */
@media (max-width: 768px) {

    /* Theme Toggle visible en móvil */
    .theme-toggle {
        margin: 0.5rem auto;
    }

    /* Experience Grid - 1 columna */
    .experience-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .experience-card {
        padding: 1.5rem;
    }

    .company-image {
        width: 80px;
        height: 80px;
    }

    /* Portfolio - 1 columna */
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Services - 1 columna */
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Botones más grandes para mejor UX móvil */
    .btn {
        min-height: 48px;
        touch-action: manipulation;
    }

    /* Social icons más grandes */
    .social-icons a {
        width: 48px;
        height: 48px;
    }

    /* Secciones con menos padding */
    .section {
        padding: 3rem 1rem;
    }

    .container {
        padding: 0 0.5rem;
    }

    /* Education responsive */
    .education-content {
        text-align: center;
    }
}

/* Móviles pequeños (≤480px) */
@media (max-width: 480px) {

    /* Hero adaptado */
    .hero-content {
        padding: 0 1rem;
    }

    #typing-text {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* Experience más compacto */
    .experience-card {
        padding: 1.25rem;
    }

    .experience-header h4 {
        font-size: 1.05rem;
        line-height: 1.3;
    }

    .company-image {
        width: 70px;
        height: 70px;
    }

    .experience-body li {
        font-size: 0.9rem;
    }

    /* Skills más compactos */
    .service-card {
        padding: 2rem 1rem;
    }

    .service-card i {
        font-size: 2.8rem;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    /* Education compacto */
    .education-image {
        width: 70px;
        height: 70px;
    }

    .education-content strong {
        font-size: 1rem;
    }

    /* Portfolio images */
    .portfolio-item img {
        height: 220px;
    }

    /* Scroll to top más pequeño */
    .scroll-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
        font-size: 1.2rem;
    }

    /* Form inputs más grandes para móvil */
    .contact-form input,
    .contact-form textarea {
        font-size: 16px;
        /* Evita zoom en iOS */
        min-height: 48px;
    }

    .contact-form button {
        min-height: 50px;
    }
}

/* Landscape móviles */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-video {
        min-height: 100vh;
    }

    .profile-pic {
        width: 120px;
        height: 120px;
    }

    #typing-text {
        font-size: 1.8rem;
    }
}

/* ====================================
   MEJORAS DE ACCESIBILIDAD
====================================== */

/* Focus visible para navegación con teclado */
*:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Touch targets mínimo 48x48px */
a,
button,
input,
select,
textarea {
    min-height: 44px;
    min-width: 44px;
}

/* Reducir animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ====================================
   MEJORAS DE RENDIMIENTO
====================================== */

/* GPU acceleration para animaciones */
.profile-pic,
.service-card,
.portfolio-item,
.experience-card,
.btn {
    will-change: transform;
}

/* Lazy loading hint */
img {
    content-visibility: auto;
}
/* ==================================== EDUCACIÓN - MODO OSCURO COMPLETO ====================================== */
body.dark-mode .education-item { background-color: var(--bg-secondary); border-color: rgba(255, 255, 255, 0.1); }
body.dark-mode .education-item:hover { background-color: var(--bg-tertiary); }
body.dark-mode .education-image { background-color: var(--bg-tertiary); border: 1px solid rgba(255, 255, 255, 0.05); }
body.dark-mode .education-content strong { color: var(--text-primary); }
body.dark-mode .institution { color: var(--text-tertiary); }

/* ==================================== CONTACTO - MODO OSCURO COMPLETO ====================================== */
body.dark-mode .contact-info h2 { color: var(--text-primary); }
body.dark-mode .contact-info > p { color: var(--text-secondary); }
body.dark-mode .info-item { color: var(--text-primary); }
body.dark-mode .info-item span { color: var(--text-secondary); }
body.dark-mode .whatsapp-link { color: var(--secondary-color); }
body.dark-mode .form-group label { color: var(--text-primary); }
body.dark-mode .contact-form input, body.dark-mode .contact-form textarea { background-color: var(--bg-tertiary); border-color: rgba(255, 255, 255, 0.15); color: var(--text-primary); }
body.dark-mode .contact-form input::placeholder, body.dark-mode .contact-form textarea::placeholder { color: var(--text-tertiary); opacity: 0.6; }
body.dark-mode .contact-form input:focus, body.dark-mode .contact-form textarea:focus { border-color: var(--primary-color); background-color: var(--bg-secondary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
body.dark-mode .social-links a { background: rgba(255, 255, 255, 0.05); color: var(--text-primary); border: 1px solid rgba(255, 255, 255, 0.1); }
body.dark-mode .social-links a:hover { background: var(--gradient-primary); color: var(--white-color); border-color: transparent; }

/* ==================================== HERO BADGES ==================================== */
.hero-badges { display: flex; justify-content: center; gap: 2rem; margin: 2rem 0 2.5rem; flex-wrap: wrap; }
.badge { background: var(--glass-bg); backdrop-filter: var(--backdrop-blur); border: 1px solid var(--glass-border); border-radius: var(--border-radius); padding: 1.5rem 2rem; text-align: center; min-width: 140px; transition: all var(--transition); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.badge:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); box-shadow: var(--glow-primary); }
.badge i { font-size: 2rem; background: var(--gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.badge span { font-size: 1rem; color: var(--white-color); font-weight: 500; }
.badge strong { font-size: 1.8rem; display: block; background: var(--gradient-primary); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.badge small { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.5px; }
body.dark-mode .badge { background: rgba(255, 255, 255, 0.08); }
body.dark-mode .badge:hover { background: rgba(255, 255, 255, 0.12); }
@media (max-width: 480px) { .hero-badges { gap: 1rem; } .badge { min-width: 100px; padding: 1rem 1.5rem; } .badge i { font-size: 1.5rem; } .badge strong { font-size: 1.4rem; } }