/* ============================================================
   PORTFOLIO ANDREA LÓPEZ - CSS COMPLETO
   VERSIÓN FINAL - VARIABLES GLOBALES POR MODO
   ============================================================ */

/* ============================================================
   1. VARIABLES MODO OSCURO (POR DEFECTO)
   ============================================================ */
:root,
body[data-theme="dark"] {
    --bg-color: #000000;
    --text-color: #FFFFFF;
    --text-muted: #B0B0C0;
    --glass-bg: rgba(245, 240, 240, 0.03);  /* Fondo transparente para el efecto de vidrio */
    --glass-border: rgba(124, 58, 237, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.15);
    --purple: #7C3AED;
    --cyan: #06B6D4;
    --aqua: #00E5FF;
    --pink: #EC4899;
    --gradient-main: linear-gradient(135deg, #ffffff 0%,  #7C3AED 40%, #3B82F6 70%, #2DD4BF 100%);
        /* ✅ Degradado específico para el botón "Ver Proyectos" */
    --gradient-btn: linear-gradient(135deg, #000000 0%, #1E1B4B 20%, #7C3AED 40%, #3B82F6 70%, #2DD4BF 100%);
    --gradient-hover: linear-gradient(135deg, #18181B 0%, #312E81 20%, #A78BFA 40%, #60A5FA 70%, #5EEAD4 100%);
    --gradient-role: linear-gradient(135deg, #ffffff 0%, #4C1D95 30%, #7C3AED 60%, #2DD4BF 100%);
    --shadow: 0 10px 40px rgba(124, 58, 237, 0.2);
    --glow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(124, 58, 237, 0.2);
    --nav-link-color: #FFFFFF;
    --nav-link-hover: #A78BFA;
    --section-bg: rgb(0, 0, 0); /*Color de Secciones de la web  */
    --card-bg: rgba(10, 10, 15, 0.4);
    --card-border: rgba(124, 58, 237, 0.3);
    --footer-bg: rgba(10, 10, 15, 0.5);
    --sidebar-bg: rgba(252, 252, 255, 0.95);


}

/* ============================================================
   2. VARIABLES MODO CLARO
   ============================================================ */
body[data-theme="light"] {
    --bg-color: #F0F2F7;
    --text-color: #000000;
    --text-muted: #000000;
    --glass-bg: rgba(245, 240, 240, 0.45);  /* más transparente */
    --glass-border: rgba(124, 58, 237, 0.3);
    --glass-shadow: 0 8px 32px 0 rgba(124, 58, 237, 0.15);
    --purple: #7C3AED;
    --cyan: #06B6D4;
    --aqua: #00E5FF;
    --pink: #EC4899;
    --gradient-main: linear-gradient(135deg, #000000 0%, #1E1B4B 20%, #7C3AED 40%, #3B82F6 70%, #2DD4BF 100%);
    --gradient-hover: linear-gradient(135deg, #18181B 0%, #312E81 20%, #A78BFA 40%, #60A5FA 70%, #5EEAD4 100%);
    --gradient-role: linear-gradient(135deg, #000000 0%, #4C1D95 30%, #7C3AED 60%, #2DD4BF 100%);
    --shadow: 0 10px 40px rgba(124, 58, 237, 0.2);
    --glow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(124, 58, 237, 0.2);
    --nav-link-color: #000000;
    --nav-link-hover: #7C3AED;
    --section-bg: #F0F2F7;
    --card-bg: #FFFFFF;
    --card-border: rgba(124, 58, 237, 0.3);
    --footer-bg: #FFFFFF;
    --sidebar-bg: #FFFFFF;

}

/* ============================================================
   3. RESET GLOBAL
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    /* ❌ COMENTADO: transition: background-color 0.3s ease, color 0.3s ease; */
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    color: var(--text-color);
}

p, span, a, li, label, blockquote {
    color: var(--text-color);
}

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

a {
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}



/* ============================================================
   TRANSICIÓN DE TEMA — FLUIDA Y OPTIMIZADA
   ============================================================ */

/* 1. Sin transiciones al cargar (evita parpadeo inicial) */
html:not(.theme-ready) *,
html:not(.theme-ready) *::before,
html:not(.theme-ready) *::after {
    transition: none !important;
}

/* 2. Transición base del body (una vez listo) */
html.theme-ready body {
    transition:
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3. Transición SOLO durante el cambio de tema */
html.theme-transitioning body,
html.theme-transitioning .navbar,
html.theme-transitioning .navbar-mobile,
html.theme-transitioning .section,
html.theme-transitioning .section-projects,
html.theme-transitioning .section-education,
html.theme-transitioning .section-contact,
html.theme-transitioning .footer,
html.theme-transitioning .project-card,
html.theme-transitioning .education-card,
html.theme-transitioning .certification-card,
html.theme-transitioning .timeline-content,
html.theme-transitioning .stack-card,
html.theme-transitioning .about-card,
html.theme-transitioning .contact-channel-item,
html.theme-transitioning .contact-feature,
html.theme-transitioning .contact-value-card,
html.theme-transitioning .dropdown-panel,
html.theme-transitioning .section-tape-track,
html.theme-transitioning .github-card,
html.theme-transitioning .research-card,
html.theme-transitioning .tech-info-content,
html.theme-transitioning .cv-switch,
html.theme-transitioning .theme-switch,
html.theme-transitioning .lang-toggle {
    transition:
        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        background-image 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 4. Textos también transicionan suavemente */
html.theme-transitioning h1,
html.theme-transitioning h2,
html.theme-transitioning h3,
html.theme-transitioning h4,
html.theme-transitioning h5,
html.theme-transitioning h6,
html.theme-transitioning p,
html.theme-transitioning span,
html.theme-transitioning a,
html.theme-transitioning li,
html.theme-transitioning label {
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 5. Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    html.theme-transitioning *,
    html.theme-transitioning *::before,
    html.theme-transitioning *::after {
        transition: none !important;
    }
}

/* ============================================================
   4. SCROLLBAR PERSONALIZADO — ANCHA Y FÁCIL DE AGARRAR
   ============================================================ */

/* ✅ Barra más ancha (antes 8px) */
::-webkit-scrollbar {
    width: 16px;                    /* ← AHORA 16px */
    height: 16px;                   /* para scroll horizontal */
}

/* ✅ Pista de fondo visible */
::-webkit-scrollbar-track {
    background: rgba(124, 58, 237, 0.08);
    border-radius: 10px;
    margin: 4px 0;                  /* pequeño margen arriba y abajo */
}

/* ✅ El "pulgar" (la parte que arrastras) más grande y visible */
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #7C3AED, #06B6D4, #00E5FF, #EC4899);
    border-radius: 10px;
    border: 3px solid transparent;  /* ✅ marco interior para que se vea más fino */
    background-clip: padding-box;
    min-height: 60px;               /* ✅ tamaño mínimo del pulgar */
    transition: background 0.2s ease;
}

/* ✅ Al pasar el mouse, se ilumina */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #A78BFA, #22D3EE, #06B6D4, #EC4899);
    background-clip: padding-box;
    border: 2px solid transparent;  /* ✅ más grueso al pasar el mouse */
}

/* ✅ Al arrastrar, se ve más intenso */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(135deg, #A78BFA, #22D3EE, #5EEAD4, #F472B6);
    background-clip: padding-box;
    border: 1px solid transparent;  /* ✅ aún más grueso al arrastrar */
}

/* ✅ Esquinas (donde se juntan scroll horizontal y vertical) */
::-webkit-scrollbar-corner {
    background: transparent;
}

/* ============================================================
   ✅ FIREFOX — scrollbar ancha y visible
   ============================================================ */
html {
    scrollbar-width: auto;                      /* ✅ auto = ancha */
    scrollbar-color: #7C3AED rgba(124, 58, 237, 0.08);
}

/* ============================================================
   5. HEADER / NAVBAR
   ============================================================ */
.navbar {
    position: fixed;
    top: 20px;              /* margen superior */
    left: 20px;             /* margen lateral izquierdo */
    right: 20px;            /* margen lateral derecho */
    width: auto;            /* ya no ocupa todo el ancho */
    z-index: 1000;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 5px;    /* bordes semi-circulares tipo píldora */
    padding: 12px 30px;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}

.navbar.scrolled {
    top: 12px;              /* se acerca un poco al hacer scroll */
    background: var(--glass-bg);
    box-shadow: 0 10px 40px rgba(124, 58, 237, 0.25);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.navbar-brand img {
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.05);
}




/* ============================================================
   BANNER SEGÚN TEMA
   ============================================================ */
.navbar-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-banner img {
    max-height: 40px;
    width: auto;
    border-radius: 6px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: block;
}

/* Modo oscuro → mostrar banner dark */
body[data-theme="dark"] .banner-dark { display: block; }
body[data-theme="dark"] .banner-light { display: none; }

/* Modo claro → mostrar banner light */
body[data-theme="light"] .banner-dark { display: none; }
body[data-theme="light"] .banner-light { display: block; }

.navbar-banner img:hover {
    transform: scale(1.05);
}






/* ============================================================
   NAVBAR MÓVIL — ESTILOS BASE + RESPONSIVE TODAS LAS RESOLUCIONES
   ------------------------------------------------------------
   ✅ Posición vertical (top) ajustada por breakpoint
   ✅ El navbar baja progresivamente en pantallas pequeñas
   ✅ Márgenes laterales adaptados
   ✅ Padding interno escalado
   ✅ Banner, controles y botones reducidos en pantallas pequeñas
   ✅ Breakpoints: 991.98px → 768px → 576px → 480px → 360px
   ============================================================ */

/* ============================================================
   BASE (≤ 991.98px) — Tablet y móvil
   ------------------------------------------------------------
   ✅ El navbar tradicional se oculta y aparece el móvil
   ============================================================ */
@media (max-width: 991.98px) {
    /* Ocultar navbar de escritorio */
    .navbar {
        display: none !important;
    }

    /* Mostrar y posicionar navbar móvil */
    .navbar-mobile {
        position: fixed;
        top: 24px;                /* ✅ más abajo que antes (era 18px) */
        left: 10px;
        right: 10px;
        width: auto;
        z-index: 7500 !important;
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid var(--glass-border);
        border-radius: 5px;
        padding: 10px 15px;
        box-shadow: var(--glass-shadow);
        transition: all 0.3s ease;
        pointer-events: auto !important;
    }

    .navbar-mobile * {
        pointer-events: auto !important;
    }

    /* Header interno */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        max-width: 100%;
    }

    /* Banner */
    .navbar-mobile .navbar-banner img {
        max-height: 28px !important;
        width: auto !important;
    }

    /* Controles */
    .mobile-nav-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    /* Divisor */
    .nav-divider {
        width: 1px;
        height: 30px;
        background: rgba(124, 58, 237, 0.4);
        margin: 0 2px 0 15px;
    }

    /* Botón de tema */
    .mobile-nav-controls .btn-theme-toggle {
        width: 50px;
        height: 40px;
        min-width: 50px;
        border-radius: 10px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.1rem;
    }

    /* Botón de idioma */
    .mobile-nav-controls .btn-lang-toggle {
        width: 50px;
        height: 40px;
        min-width: 50px;
        border-radius: 10px;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.8rem;
    }

    /* Botón de menú (3 puntos) */
    .menu-btn {
        width: 42px;
        height: 42px;
        margin-left: 10px;
    }

    .menu-btn-icon {
        font-size: 1.4rem;
    }

    .menu-btn-close {
        font-size: 1.25rem;
    }

    .menu-btn-circle {
        width: 42px;
        height: 42px;
    }
}

/* ============================================================
   TEMAS — Modo claro / oscuro
   ============================================================ */
body[data-theme="light"] .navbar-mobile {
    background: rgba(245, 240, 240, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body[data-theme="dark"] .navbar-mobile {
    background: rgba(10, 10, 20, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body[data-theme="light"] .nav-divider {
    background: rgba(124, 58, 237, 0.4);
}

/* ============================================================
   NAVBAR MÓVIL + DROPDOWN — RESPONSIVE
   ------------------------------------------------------------
   ✅ Botones MENOS LARGOS en responsive
   ✅ PC (≥ 992px): SIN CAMBIOS
   ✅ Breakpoints: 768px → 576px → 480px → 360px
   ============================================================ */

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   Botones: 32×32 | Gap: 5px
   ============================================================ */
@media (max-width: 768px) {
    .navbar-mobile {
        top: 30px;
        left: 8px;
        right: 8px;
        padding: 10px 12px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 24px !important;
    }

    .mobile-nav-controls {
        gap: 5px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 40x !important;
        height: 32px !important;
        min-width: 40px !important;
        border-radius: 8px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.9rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.68rem !important;
    }

    .nav-divider {
        height: 22px;
        margin: 0 2px 0 8px;
    }

    .menu-btn {
        width: 32px !important;
        height: 32px !important;
        margin-left: 6px;
    }

    .menu-btn-icon {
        font-size: 1.1rem !important;
    }

    .menu-btn-close {
        font-size: 1rem !important;
    }

    .menu-btn-circle {
        width: 32px !important;
        height: 32px !important;
    }

    /* Dropdown */
    .dropdown-panel {
        top: 94px;
        right: 15px;
        width: 270px;
        max-width: 92%;
    }

    .dropdown-panel::after {
        top: -10px;
        right: 22px;
        width: 18px;
        height: 18px;
    }

    .dropdown-overlay {
        top: 94px !important;
        height: calc(100vh - 94px) !important;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ------------------------------------------------------------
   Botones: 30×30 | Gap: 4px
   ============================================================ */
@media (max-width: 576px) {
    .navbar-mobile {
        top: 34px;
        left: 7px;
        right: 7px;
        padding: 9px 11px;
        border-radius: 4px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 22px !important;
    }

    .mobile-nav-controls {
        gap: 4px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 40px !important;
        height: 30px !important;
        min-width: 40px !important;
        border-radius: 7px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.85rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.62rem !important;
    }

    .nav-divider {
        height: 20px;
        margin: 0 2px 0 7px;
    }

    .menu-btn {
        width: 30px !important;
        height: 30px !important;
        margin-left: 5px;
    }

    .menu-btn-icon {
        font-size: 1.05rem !important;
    }

    .menu-btn-close {
        font-size: 0.95rem !important;
    }

    .menu-btn-circle {
        width: 30px !important;
        height: 30px !important;
    }

    /* Dropdown */
    .dropdown-panel {
        top: 100px;
        right: 12px;
        width: 260px;
        max-width: 94%;
    }

    .dropdown-panel::after {
        top: -9px;
        right: 20px;
        width: 18px;
        height: 18px;
    }

    .dropdown-overlay {
        top: 100px !important;
        height: calc(100vh - 100px) !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   Botones: 28×28 | Gap: 3px
   ============================================================ */
@media (max-width: 480px) {
    .navbar-mobile {
        top: 38px;
        left: 6px;
        right: 6px;
        padding: 8px 10px;
        border-radius: 4px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 20px !important;
    }

    .mobile-nav-controls {
        gap: 3px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        border-radius: 6px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.78rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.58rem !important;
    }

    .nav-divider {
        height: 18px;
        margin: 0 2px 0 6px;
    }

    .menu-btn {
        width: 28px !important;
        height: 28px !important;
        margin-left: 4px;
    }

    .menu-btn-icon {
        font-size: 0.95rem !important;
    }

    .menu-btn-close {
        font-size: 0.85rem !important;
    }

    .menu-btn-circle {
        width: 28px !important;
        height: 28px !important;
    }

    /* Dropdown */
    .dropdown-panel {
        top: 106px;
        right: 10px;
        width: 250px;
        max-width: 95%;
        border-radius: 15px;
    }

    .dropdown-panel::after {
        top: -9px;
        right: 18px;
        width: 16px;
        height: 16px;
    }

    .dropdown-overlay {
        top: 106px !important;
        height: calc(100vh - 106px) !important;
    }

    .dropdown-item {
        padding: 12px 15px;
    }

    .dropdown-item i:first-child {
        font-size: 1.1rem;
        width: 25px;
    }

    .dropdown-item span {
        font-size: 0.9rem;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   Botones: 26×26 | Gap: 2px
   ============================================================ */
@media (max-width: 360px) {
    .navbar-mobile {
        top: 42px;
        left: 5px;
        right: 5px;
        padding: 7px 9px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 18px !important;
    }

    .mobile-nav-controls {
        gap: 2px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        border-radius: 5px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.72rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.54rem !important;
    }

    .nav-divider {
        height: 16px;
        margin: 0 2px 0 5px;
    }

    .menu-btn {
        width: 26px !important;
        height: 26px !important;
        margin-left: 3px;
    }

    .menu-btn-icon {
        font-size: 0.88rem !important;
    }

    .menu-btn-close {
        font-size: 0.78rem !important;
    }

    .menu-btn-circle {
        width: 26px !important;
        height: 26px !important;
    }

    /* Dropdown */
    .dropdown-panel {
        top: 112px;
        right: 8px;
        width: 240px;
        max-width: 96%;
        border-radius: 14px;
    }

    .dropdown-panel::after {
        top: -8px;
        right: 16px;
        width: 15px;
        height: 15px;
    }

    .dropdown-overlay {
        top: 112px !important;
        height: calc(100vh - 112px) !important;
    }
}
    .dropdown-panel::after {
        top: -8px;
        right: 20px;
        width: 15px;
        height: 15px;
    }

    .dropdown-overlay {
        top: 122px !important;
        height: calc(100vh - 122px) !important;
    }

    .dropdown-item {
        padding: 10px 13px;
    }

    .dropdown-item i:first-child {
        font-size: 1rem;
        width: 22px;
    }

    .dropdown-item span {
        font-size: 0.85rem;
    }

    .dropdown-item .arrow {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.65rem;
    }
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-name {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.brand-role {
    font-size: 0.6rem;
    color: var(--text-color);
    line-height: 1.2;
}

.nav-link {
    font-weight: 500;
    font-size: 1rem;
    margin: 0 8px;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
    color: var(--nav-link-color);
    border-radius: 8px;
    padding: 5px 12px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    transition: width 0.3s ease;
    border-radius: 3px;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: var(--nav-link-hover);
    background: rgba(124, 58, 237, 0.1);
}

/* ============================================================
   SECCIÓN ACTIVA EN MODO OSCURO - MORADA
   ============================================================ */
body[data-theme="dark"] .nav-link.active {
    color: #A78BFA !important;
    background: rgba(124, 58, 237, 0.2) !important;
}

body[data-theme="dark"] .nav-link.active::after {
    background: linear-gradient(135deg, #7C3AED, #06B6D4) !important;
    height: 3px;
    border-radius: 3px;
}

/* ============================================================
   SECCIÓN ACTIVA EN MODO CLARO - TAMBIÉN MORADA
   ============================================================ */
body[data-theme="light"] .nav-link.active {
    color: #7C3AED !important;
    background: rgba(124, 58, 237, 0.1) !important;
}

body[data-theme="light"] .nav-link.active::after {
    background: linear-gradient(135deg, #7C3AED, #06B6D4) !important;
    height: 3px;
    border-radius: 3px;
}

/* ============================================================
   6. BOTONES TEMA E IDIOMA
   ============================================================ */
.theme-switch,
.lang-toggle {
    display: flex;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 5px rgba(124, 58, 237, 0.2);
    height: 38px;
    width: auto;
    transition: all 0.3s ease;
}

.theme-switch:hover,
.lang-toggle:hover {
    border-color: var(--purple);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
}

.btn-theme,
.btn-lang {
    background: transparent;
    color: var(--text-color);
    border: none;
    padding: 0 15px;
    font-weight: 600;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 45px;
}

.btn-theme.theme-sun {
    border-right: 1px solid rgba(124, 58, 237, 0.4);
}

.btn-theme i {
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-theme:not(.active):hover {
    background: rgba(124, 58, 237, 0.15);
}

.btn-theme:not(.active):hover i {
    color: var(--purple);
    transform: scale(1.15);
}

.btn-theme.active,
.btn-lang.active {
    background: var(--gradient-btn);
    color: #FFFFFF;
}

.btn-theme.active i {
    color: #FFFFFF;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.btn-lang {
    letter-spacing: 1px;
    border-right: 1px solid rgba(124, 58, 237, 0.4);
}

.btn-lang:last-child {
    border-right: none;
}

.btn-lang:not(.active):hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple);
    transform: scale(1.05);
}

/* ============================================================
   HERO — ESPACIO CON EL HEADER EN RESPONSIVE
   ------------------------------------------------------------
   ✅ PC (≥ 1025px): SIN CAMBIOS
   ✅ Solo aplica en tablet/móvil (≤ 1024px)
   ✅ Aumenta el padding-top del hero = más espacio con el navbar
   ✅ Reducido un poquito (menos que antes)
   ============================================================ */

/* ============================================================
   ≤ 1024px — Laptop pequeña / Tablet grande
   ============================================================ */
@media (max-width: 1024px) {
    .hero-section {
        padding-top: 230px !important;        /* ⬇️ MENOS (antes 260px) */
    }
}

/* ============================================================
   ≤ 992px — Tablet
   ============================================================ */
@media (max-width: 992px) {
    .hero-section {
        padding-top: 260px !important;        /* ⬇️ MENOS (antes 290px) */
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ============================================================ */
@media (max-width: 768px) {
    .hero-section {
        padding-top: 290px !important;        /* ⬇️ MENOS (antes 320px) */
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ============================================================ */
@media (max-width: 576px) {
    .hero-section {
        padding-top: 280px !important;        /* ⬇️ MENOS (antes 310px) */
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ============================================================ */
@media (max-width: 480px) {
    .hero-section {
        padding-top: 290px !important;        /* ⬇️ MENOS (antes 320px) */
    }
}

/* ============================================================
   ≤ 390px — iPhone 12 / 13 / 14
   ============================================================ */
@media (max-width: 390px) {
    .hero-section {
        padding-top: 300px !important;        /* ⬇️ MENOS (antes 330px) */
    }
}

/* ============================================================
   ≤ 360px — Galaxy S8/S9/S10
   ============================================================ */
@media (max-width: 360px) {
    .hero-section {
        padding-top: 270px !important;        /* ⬇️ MENOS (antes 300px) */
    }
}

/* ============================================================
   ≤ 320px — iPhone SE 1ª gen
   ============================================================ */
@media (max-width: 320px) {
    .hero-section {
        padding-top: 270px !important;        /* ⬇️ MENOS (antes 300px) */
    }
}
/* ============================================================
   SEPARACIÓN ICONO ↔ TEXTO EN BOTONES DEL HERO
   ============================================================ */
.hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;              /* ← separación icono-texto */
}

.hero-actions .btn i {
    margin: 0;             /* quita márgenes previos */
    flex-shrink: 0;        /* el icono no se comprime */
}

#particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: transparent;
}

.hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 15px;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--text-color);
}

/* ============================================================
   HERO — TIPOGRAFÍA RESPONSIVE TODAS LAS RESOLUCIONES
   ------------------------------------------------------------
   ✅ Título (ANDREA LÓPEZ) SIEMPRE más grande que el rol
   ✅ Rol (SYSTEMS ANALYST...) MÁS PEQUEÑO en responsive
   ✅ !important en el rol para forzar el cambio
   ✅ Breakpoints: 1200px → 1024px → 768px → 576px → 480px → 360px
   ✅ Escala coherente y descendente
   ✅ Máximo ancho de descripción adaptado por breakpoint
   ✅ Botones del Hero y CV compactos en móvil
   ============================================================ */

/* ============================================================
   BASE (PC ≥ 1201px)
   ------------------------------------------------------------
   Título: 4.00rem  |  Rol: 2.00rem   →  2× más grande
   ⚠️ SIN CAMBIOS en PC
   ============================================================ */
.hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 15px;
}

.hero-title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    color: var(--text-color);
}

.hero-role {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 25px;
    background: var(--gradient-role);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    max-width: 500px;
    margin-bottom: 30px;
}

/* ============================================================
   ≤ 1200px — Laptops
   ------------------------------------------------------------
   Título: 3.50rem  |  Rol: 1.45rem   →  2.41× más grande
   ============================================================ */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-role {
        font-size: 1.45rem !important;   /* ⬅️ FORZADO */
    }

    .hero-description {
        font-size: 1.05rem;
        max-width: 480px;
    }
}

/* ============================================================
   ≤ 1024px — Laptops pequeñas / Tablets grandes
   ------------------------------------------------------------
   Título: 3.00rem  |  Rol: 1.15rem   →  2.61× más grande
   ============================================================ */
@media (max-width: 1024px) {
    .hero-subtitle {
        font-size: 0.82rem;
        letter-spacing: 2.5px;
        margin-bottom: 12px;
    }

    .hero-title {
        font-size: 3rem;
        margin-bottom: 12px;
    }

    .hero-role {
        font-size: 1.15rem !important;   /* ⬅️ FORZADO */
        margin-bottom: 20px;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.65;
        max-width: 100%;
        margin-bottom: 25px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 11px 24px;
        font-size: 0.92rem;
        gap: 10px;
        border-radius: 9px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.9rem;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   Título: 2.40rem  |  Rol: 0.85rem   →  2.82× más grande
   ============================================================ */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 0.72rem;
        letter-spacing: 1.8px;
        margin-bottom: 8px;
    }

    .hero-title {
        font-size: 2.4rem;
        line-height: 1.15;
        margin-bottom: 8px;
    }

    .hero-role {
        font-size: 0.85rem !important;   /* ⬅️ FORZADO */
        line-height: 1.10;
        margin-bottom: 14px;
    }

    .hero-description {
        font-size: 0.88rem;
        line-height: 1.55;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 10px 18px;
        font-size: 0.82rem;
        gap: 7px;
        border-radius: 8px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.78rem;
    }

    .cv-switch {
        height: 48px;
        border-radius: 9px;
    }

    .cv-switch-btn {
        padding: 0 10px;
        font-size: 0.72rem;
        gap: 5px;
    }

    .cv-switch-btn i {
        font-size: 0.72rem;
    }

    .cv-switch-btn span {
        font-size: 0.68rem;
    }

    .hero-social {
        margin-top: 22px;
    }

    .hero-social a {
        font-size: 1.3rem;
        margin-right: 16px;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ------------------------------------------------------------
   Título: 2.00rem  |  Rol: 0.72rem   →  2.78× más grande
   ============================================================ */
@media (max-width: 576px) {
    .hero-subtitle {
        font-size: 0.62rem;
        letter-spacing: 1.5px;
        margin-bottom: 6px;
    }

    .hero-title {
        font-size: 2rem;
        line-height: 1.12;
        margin-bottom: 6px;
    }

    .hero-role {
        font-size: 0.72rem !important;   /* ⬅️ FORZADO */
        line-height: 1.10;
        margin-bottom: 12px;
    }

    .hero-description {
        font-size: 0.78rem;
        line-height: 1.5;
        margin-bottom: 16px;
    }

    .hero-actions {
        gap: 8px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 9px 16px;
        font-size: 0.75rem;
        gap: 6px;
        border-radius: 8px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.72rem;
    }

    .cv-switch {
        height: 44px;
        border-radius: 8px;
    }

    .cv-switch-btn {
        padding: 0 9px;
        font-size: 0.68rem;
        gap: 4px;
    }

    .cv-switch-btn i {
        font-size: 0.68rem;
    }

    .cv-switch-btn span {
        font-size: 0.62rem;
    }

    .hero-social {
        margin-top: 18px;
    }

    .hero-social a {
        font-size: 1.15rem;
        margin-right: 14px;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   Título: 1.75rem  |  Rol: 0.65rem   →  2.69× más grande
   ============================================================ */
@media (max-width: 480px) {
    .hero-subtitle {
        font-size: 0.55rem;
        letter-spacing: 1.3px;
        margin-bottom: 5px;
    }

    .hero-title {
        font-size: 1.75rem;
        line-height: 1.1;
        margin-bottom: 5px;
    }

    .hero-role {
        font-size: 1.10rem !important;   /* ⬅️ FORZADO */
        line-height: 0.50;
        margin-bottom: 10px;
    }

    .hero-description {
        font-size: 0.72rem;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .hero-actions {
        gap: 7px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 8px 14px;
        font-size: 0.7rem;
        gap: 5px;
        border-radius: 7px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.66rem;
    }

    .cv-switch {
        height: 40px;
        border-radius: 7px;
    }

    .cv-switch-btn {
        padding: 0 7px;
        font-size: 0.62rem;
        gap: 4px;
    }

    .cv-switch-btn i {
        font-size: 0.62rem;
    }

    .cv-switch-btn span {
        font-size: 0.58rem;
    }

    .hero-social {
        margin-top: 16px;
    }

    .hero-social a {
        font-size: 1.05rem;
        margin-right: 12px;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   Título: 1.50rem  |  Rol: 0.58rem   →  2.59× más grande
   ============================================================ */
@media (max-width: 360px) {
    .hero-subtitle {
        font-size: 0.5rem;
        letter-spacing: 1.1px;
        margin-bottom: 4px;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .hero-role {
        font-size: 0.58rem !important;   /* ⬅️ FORZADO */
        line-height: 1.10;
        margin-bottom: 8px;
    }

    .hero-description {
        font-size: 0.65rem;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .hero-actions {
        gap: 6px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 7px 12px;
        font-size: 0.64rem;
        gap: 4px;
        border-radius: 6px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.6rem;
    }

    .cv-switch {
        height: 36px;
        border-radius: 6px;
    }

    .cv-switch-btn {
        padding: 0 6px;
        font-size: 0.56rem;
        gap: 3px;
    }

    .cv-switch-btn i {
        font-size: 0.56rem;
    }

    .cv-switch-btn span {
        font-size: 0.52rem;
    }

    .hero-social {
        margin-top: 14px;
    }

    .hero-social a {
        font-size: 0.95rem;
        margin-right: 10px;
    }
}
/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   Título: 1.5rem  |  Rol: 0.72rem   →  2.08× más grande
   ============================================================ */
@media (max-width: 360px) {
    .hero-subtitle {
        font-size: 0.5rem;
        letter-spacing: 1.1px;
        margin-bottom: 4px;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .hero-role {
        font-size: 0.72rem;
        line-height: 1.10;
        margin-bottom: 8px;
    }

    .hero-description {
        font-size: 0.65rem;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .hero-actions {
        gap: 6px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 7px 12px;
        font-size: 0.64rem;
        gap: 4px;
        border-radius: 6px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.6rem;
    }

    .cv-switch {
        height: 36px;
        border-radius: 6px;
    }

    .cv-switch-btn {
        padding: 0 6px;
        font-size: 0.56rem;
        gap: 3px;
    }

    .cv-switch-btn i {
        font-size: 0.56rem;
    }

    .cv-switch-btn span {
        font-size: 0.52rem;
    }

    .hero-social {
        margin-top: 14px;
    }

    .hero-social a {
        font-size: 0.95rem;
        margin-right: 10px;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ============================================================ */
@media (max-width: 360px) {
    /* ---------- TEXTOS ---------- */
    .hero-subtitle {
        font-size: 0.5rem;
        letter-spacing: 1.1px;
        margin-bottom: 4px;
    }

    .hero-title {
        font-size: 1.4rem;
        line-height: 1.1;
        margin-bottom: 4px;
    }

    .hero-role {
        font-size: 0.75rem;
        line-height: 1.10;
        margin-bottom: 8px;
    }

    .hero-description {
        font-size: 0.65rem;
        line-height: 1.4;
        margin-bottom: 12px;
    }



/* ============================================================
   ROL MÁS GRANDE EN RESPONSIVE — FORZADO CON !important
   ------------------------------------------------------------
   ✅ Rol MÁS GRANDE en todos los breakpoints
   ✅ Sobrescribe cualquier otro bloque duplicado
   ✅ Solo toca .hero-role
   ✅ Colócalo AL FINAL del CSS para que gane
   ============================================================ */

@media (max-width: 1200px) {
    .hero-role {
        font-size: 1.95rem !important;   /* ⬆️ MÁS GRANDE (antes 1.75rem) */
    }
}

@media (max-width: 1024px) {
    .hero-role {
        font-size: 1.65rem !important;   /* ⬆️ MÁS GRANDE (antes 1.45rem) */
    }
}

@media (max-width: 768px) {
    .hero-role {
        font-size: 1.25rem !important;   /* ⬆️ MÁS GRANDE (antes 1.10rem) */
    }
}

@media (max-width: 576px) {
    .hero-role {
        font-size: 1.10rem !important;   /* ⬆️ MÁS GRANDE (antes 0.90rem) */
    }
}

@media (max-width: 480px) {
    .hero-role {
        font-size: 1.10rem !important;   /* ⬆️ MÁS GRANDE (antes 0.80rem) */
    }
}

@media (max-width: 390px) {
    .hero-role {
        font-size: 1.10rem !important;   /* ⬆️ MÁS GRANDE (antes 0.75rem) */
    }
}

@media (max-width: 360px) {
    .hero-role {
        font-size: 1.10rem !important;   /* ⬆️ MÁS GRANDE (antes 0.70rem) */
    }
}

@media (max-width: 320px) {
    .hero-role {
        font-size: 1.10rem !important;   /* ⬆️ MÁS GRANDE (antes 0.65rem) */
    }
}









    /* ---------- BOTÓN VER PROYECTOS ---------- */
    .hero-actions {
        gap: 6px;
    }

    .hero-actions .btn-primary-gradiente {
        padding: 7px 12px;
        font-size: 0.64rem;
        gap: 4px;
        border-radius: 6px;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.6rem;
    }

    /* ---------- BOTONES CV ---------- */
    .cv-switch {
        height: 36px;
        border-radius: 6px;
    }

    .cv-switch-btn {
        padding: 0 6px;
        font-size: 0.56rem;
        gap: 3px;
    }

    .cv-switch-btn i {
        font-size: 0.56rem;
    }

    .cv-switch-btn span {
        font-size: 0.52rem;
    }

    /* ---------- REDES SOCIALES ---------- */
    .hero-social {
        margin-top: 14px;
    }

    .hero-social a {
        font-size: 0.95rem;
        margin-right: 10px;
    }
}

.gradient-text {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-role {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 25px;
    background: var(--gradient-role);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.hero-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    max-width: 500px;
    margin-bottom: 30px;
}

.btn-primary-gradiente {
    background: var(--gradient-btn);
    color: #FFFFFF !important;
    border: none;
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-primary-gradiente *,
.btn-primary-gradiente i {
    color: #FFFFFF !important;
}

.btn-primary-gradiente:hover {
    background: var(--gradient-hover);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.4);
}

.btn-outline-light {
    border: 1px solid var(--purple);
    background: transparent;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-color);
    padding: 12px 30px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline-light:hover {
    border-color: var(--purple);
    background: rgba(124, 58, 237, 0.1);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
    color: var(--purple);
}

.hero-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.hero-social {
    margin-top: 30px;
}

.hero-social a {
    color: var(--text-color);
    font-size: 1.5rem;
    margin-right: 20px;
    transition: all 0.3s ease;
}

.hero-social a:hover {
    color: var(--purple);
    transform: translateY(-3px);
}

.hero-image-wrapper {
    position: relative;
    display: inline-block;
}

.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.3), rgba(6, 182, 212, 0.2), transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

.hero-image {
    max-width: 450px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.hero-image:hover {
    transform: scale(1.02);
}

.hero-logo-3d {
    position: absolute;
    top: -30px;
    right: -30px;
    z-index: 2;
    animation: float 3s ease-in-out infinite;
}

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

.scroll-indicator {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    color: var(--text-color);
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 1;
}

.scroll-indicator i {
    display: block;
    margin-top: -70px;
     margin-bottom: 0px;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* ============================================================
   8. SECCIONES GENERALES — ESPACIO ARRIBA Y ABAJO
   ============================================================ */
.section,
.section-projects,
.section-contact,
.section-education {
    position: relative;
    padding-top: 140px;           /* ✅ espacio arriba (era 10px) */
    padding-bottom:  70px;        /* ✅ espacio abajo (era 40 sin px) */
    background: var(--section-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--glass-border);
}
/* ============================================================
   9. CAJUELAS / CARDS
   ============================================================ */
.stack-card,
.project-card,
.education-card,
.certification-card,
.contact-item,
.contact-form-wrapper,
.timeline-content,
.about-card,
.languages-section,
.result-item,
.quote-section {
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    box-shadow: var(--glass-shadow);
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    will-change: transform;
}

/* ============================================================
   BORDE DEGRADADO EN CAJUELAS — SOLO MODO OSCURO
   ------------------------------------------------------------
   ✅ Aplica solo a las cajuelas que NO tienen ::before propio
   ✅ Las que sí lo tienen (research-card, contact-channel-item,
      tech-info-content) usan su propio estilo
   ============================================================ */
body[data-theme="dark"] .stack-card::before,
body[data-theme="dark"] .project-card::before,
body[data-theme="dark"] .education-card::before,
body[data-theme="dark"] .certification-card::before,
body[data-theme="dark"] .about-card::before,
body[data-theme="dark"] .languages-section::before,
body[data-theme="dark"] .result-item::before,
body[data-theme="dark"] .quote-section::before,
body[data-theme="dark"] .contact-form-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 33%,
        #2DD4BF 66%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.65;
    transition: opacity 0.4s ease;
    z-index: 0;
}

/* ✅ Hover: borde más visible */
body[data-theme="dark"] .stack-card:hover::before,
body[data-theme="dark"] .project-card:hover::before,
body[data-theme="dark"] .education-card:hover::before,
body[data-theme="dark"] .certification-card:hover::before,
body[data-theme="dark"] .about-card:hover::before,
body[data-theme="dark"] .languages-section:hover::before,
body[data-theme="dark"] .result-item:hover::before,
body[data-theme="dark"] .quote-section:hover::before,
body[data-theme="dark"] .contact-form-wrapper:hover::before {
    opacity: 1;
}

/* ✅ Asegurar que el contenido quede por encima del borde */
body[data-theme="dark"] .stack-card > *,
body[data-theme="dark"] .project-card > *,
body[data-theme="dark"] .education-card > *,
body[data-theme="dark"] .certification-card > *,
body[data-theme="dark"] .about-card > *,
body[data-theme="dark"] .languages-section > *,
body[data-theme="dark"] .result-item > *,
body[data-theme="dark"] .quote-section > *,
body[data-theme="dark"] .contact-form-wrapper > * {
    position: relative;
    z-index: 1;
}



/* ============================================================
   ✅ CELESTIA — Alargar la parte inferior de la cajuela
   ------------------------------------------------------------
   El min-height no funciona por el grid (align-items: start).
   Solución: aumentar el padding-bottom de la info.
   ============================================================ */

html body section#proyectos .projects-grid > .project-item.project-extra:has(.project-card-celestia) > .project-card-celestia .project-info {
    padding-bottom: 19px !important; /* ← ajusta aquí la altura extra */
}

/* Empuja los botones al fondo para que queden alineados */
html body section#proyectos .projects-grid > .project-item.project-extra:has(.project-card-celestia) > .project-card-celestia .project-info .project-actions {
    margin-top: auto;
}

/* ============================================================
   ✅ CELESTIA — Bajar párrafo, métricas y botón un poco
   ============================================================ */

/* 1. Párrafo principal (shortDesc) — baja un poco */
.project-card.project-card-celestia .project-info .project-short-desc {
    margin-top: 12px !important;   /* ← espacio arriba del párrafo */
}

/* 2. Métricas — bajan un poco */
.project-card.project-card-celestia .project-info .project-metrics {
    margin-top: 1px !important;   /* ← espacio arriba de las métricas */
}

/* 3. Botón "Ver en GitHub" — baja un poco */
.project-card.project-card-celestia .project-info .project-actions {
    margin-top: -3px !important;   /* ← espacio arriba del botón */
}



/* ============================================================
   10. TÍTULOS CON DEGRADADO
   ============================================================ */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: center;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.about-title {
    font-size: 1.40rem;
    font-weight: 700;
    margin-bottom: 20px;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   11. TEXTOS SECUNDARIOS
   ============================================================ */
.section-description,
.about-description,
.project-description,
.publication-description,
.timeline-responsibilities li,
.contact-info p,
.certification-card p,
.about-card p,
.university-name,
.gpa-label,
.metric-label,
.result-label,
.char-counter,
.form-footer,
.interactive-note p,
.quote-section blockquote,
.timeline-date,
.form-header p {
    color: var(--text-muted);

}




/* ============================================================
   12. TEXTOS PRINCIPALES
   ============================================================ */
.stack-card h3,
.project-info h3,
.timeline-info h3,
.education-card h3,
.contact-subtitle,
.contact-info h4,
.form-header h3,
.about-card h4,
.certification-card h4,
.contact-social h4,
.certifications-title,
.form-label {
    color: var(--text-color);
}

/* ============================================================
   13. ELEMENTOS MORADOS
   ============================================================ */
.hero-subtitle,
.stack-items span,
.project-tags span,
.btn-project:first-child,
.contact-arrow,
.social-btn i:last-child,
.date,
.input-group-text,
.timeline-responsibilities li::before {
    color: var(--purple);
}

/* ============================================================
   14. ELEMENTOS CYAN
   ============================================================ */
.project-subtitle,
.timeline-role,
.btn-project:last-child,
.btn-see-more,
.publication-info,
.result-item i {
    color: var(--cyan);
}

/* ============================================================
   15. ICONOS CON DEGRADADO
   ============================================================ */
.stack-icon,
.contact-icon,
.form-header i,
.interactive-note i,
.about-card i,
.language-icons i,
.social-btn i:first-child {
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   16. MÉTRICAS CON DEGRADADO
   ============================================================ */
.metric-value,
.result-value {
    font-size: 1.2rem;
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   17. BOTONES CON FONDO DEGRADADO
   ============================================================ */
.btn-theme.active,
.btn-lang.active,
.btn-primary-gradiente,
.btn-submit,

.project-badge {
    color: #FFFFFF;
}

/* ============================================================
   18. SOBRE MÍ
   ============================================================ */
.about-card {
    padding: 20px;
    text-align: center;
    height: 100%;
}

.about-card i {
    font-size: 2rem;
    margin-bottom: 10px;
}

.about-card h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.about-card p {
    font-size: 0.85rem;
}

.languages-section {
    padding: 20px;
}

.language-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.language-icons span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.language-icons span:hover {
    color: var(--purple);
    transform: translateY(-3px);
}

.language-icons i {
    font-size: 1.5rem;
}

/* ============================================================
   CARRUSEL SHIELD 3D
   Ajuste: carrusel + anillos + flechas más arriba
   ============================================================ */

.tech-carousel-wrapper {
    position: relative;
    margin-top: 20px;
    padding: 0 70px;
}

.tech-particles-container {
    position: relative;
    width: 100%;
    height: 700px;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.tech-particles-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
}

/* ============================================================
   BOTONES DE NAVEGACIÓN (FLECHAS) - SUBIDOS AL 35%
   ============================================================ */
.tech-nav-btn {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.2));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.5);
    color: #FFFFFF;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.3),
        inset 0 0 20px rgba(124, 58, 237, 0.1);
}

.tech-nav-btn:hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(6, 182, 212, 0.5));
    border-color: var(--purple);
    transform: translateY(-50%) scale(1.15);
    box-shadow:
        0 0 30px rgba(124, 58, 237, 0.6),
        0 0 60px rgba(124, 58, 237, 0.3),
        inset 0 0 30px rgba(124, 58, 237, 0.2);
}

.tech-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.tech-nav-prev { left: 0; }
.tech-nav-next { right: 0; }

/* ============================================================
   PANEL DE INFORMACIÓN - TIPO TARJETA PREMIUM
   ============================================================ */
.tech-info-panel {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(30px) scale(0.9);
    width: 90%;
    max-width: 850px;
    opacity: 0;
    transition:
        opacity 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 20;
}

.tech-info-panel.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}

.tech-info-content {
    background: linear-gradient(
        135deg,
        rgba(15, 15, 30, 0.95) 0%,
        rgba(25, 20, 45, 0.95) 100%
    );
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--accent-color, rgba(124, 58, 237, 0.5));
    border-radius: 20px;
    padding: 24px 30px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 60px var(--accent-color, rgba(124, 58, 237, 0.25)),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    animation: panelMagicIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes panelMagicIn {
    0%   { opacity: 0; transform: scale(0.9) translateY(30px); }
    60%  { transform: scale(1.02) translateY(-5px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.tech-info-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--accent-color, #7C3AED),
        transparent
    );
    opacity: 0.9;
    animation: shimmerLine 3s ease-in-out infinite;
}

@keyframes shimmerLine {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.tech-info-content::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 80% 20%,
        var(--accent-color, rgba(124, 58, 237, 0.15)) 0%,
        transparent 40%
    );
    opacity: 0.4;
    pointer-events: none;
    animation: panelGlowRotate 20s linear infinite;
}

@keyframes panelGlowRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.tech-info-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.tech-info-icon-wrapper {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.2),
        rgba(6, 182, 212, 0.2)
    );
    border: 1px solid var(--accent-color, rgba(124, 58, 237, 0.5));
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        box-shadow:
            0 0 20px var(--accent-color, rgba(124, 58, 237, 0.3)),
            inset 0 0 20px rgba(124, 58, 237, 0.1);
    }
    50% {
        box-shadow:
            0 0 40px var(--accent-color, rgba(124, 58, 237, 0.6)),
            inset 0 0 30px rgba(124, 58, 237, 0.2);
    }
}

.tech-info-icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px var(--accent-color, rgba(124, 58, 237, 0.6)));
}

/* ============================================================
   ICONO DE SYMFONY - Glow especial
   Modo oscuro: glow negro | Modo claro: glow blanco
   ============================================================ */

/* Modo oscuro: glow NEGRO */
body[data-theme="dark"] .tech-info-icon[data-tech="Symfony"] {
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
}

/* Modo claro: glow BLANCO */
body[data-theme="light"] .tech-info-icon[data-tech="Symfony"] {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9))
            drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}


.tech-info-title-wrapper {
    flex: 1;
    min-width: 0;
}

.tech-info-name {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: #FFFFFF;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #FFFFFF, var(--accent-color, #A78BFA));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ✅ Modo oscuro: glow sutil que hace el título más brillante */
body[data-theme="dark"] .tech-info-name {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.25));
}


.tech-info-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-color, #A78BFA);
    padding: 5px 14px;
    background: rgba(124, 58, 237, 0.18);
    border: 1px solid var(--accent-color, rgba(124, 58, 237, 0.4));
    border-radius: 20px;
    box-shadow: 0 0 15px var(--accent-color, rgba(124, 58, 237, 0.2));
}

/* ✅ Modo oscuro: categoría con texto blanco para máxima legibilidad */
body[data-theme="dark"] .tech-info-category {
    color: #FFFFFF;
    text-shadow: 0 0 6px var(--accent-color, rgba(124, 58, 237, 0.6));
    border-color: var(--accent-color, rgba(124, 58, 237, 0.6));
}


/* ============================================================
   DESCRIPCIÓN DEL PANEL — MODO OSCURO LEGIBLE
   ------------------------------------------------------------
   ✅ Texto casi blanco puro (antes 0.82 opacidad)
   ✅ Mayor peso visual
   ✅ Sombra sutil para mejorar contraste sobre el panel
   ============================================================ */
.tech-info-description {
    font-size: 1rem;
    line-height: 1.75;
    color: #F0F0F5;
    margin: 0 0 16px;
    font-family: 'Inter', sans-serif;
    position: relative;
    z-index: 1;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.15);
    letter-spacing: 0.2px;
}

/* Modo claro: mantener el color oscuro legible */
body[data-theme="light"] .tech-info-description {
    color: rgba(26, 26, 46, 0.9);
    text-shadow: none;
    font-weight: 500;
}

.tech-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   TAGS - TEXTO SIEMPRE VISIBLE EN HOVER
   (Fondo oscuro/claro FIJO para garantizar contraste con cualquier color)
   ============================================================ */
.tech-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent-color, #A78BFA);
    padding: 6px 14px;
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid var(--accent-color, rgba(124, 58, 237, 0.3));
    border-radius: 20px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.tech-tag::before {
    content: '◆';
    font-size: 0.6rem;
}




/* ============================================================
   TAGS EN MODO OSCURO — TODAS LAS TECNOLOGÍAS
   ------------------------------------------------------------
   ✅ Colores ajustados para máxima legibilidad en modo oscuro
   ✅ Solo aplica en modo oscuro
   ✅ Incluye todas las variantes de data-tech
   ============================================================ */

/* ---------- DOMPDF → celeste ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="DOMPDF"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="DomPDF"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="dompdf"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="DomPdf"] .tech-tag {
    color: #67E8F9 !important;
    border-color: rgba(103, 232, 249, 0.5);
    background: rgba(103, 232, 249, 0.12);
    text-shadow: 0 0 8px rgba(103, 232, 249, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="DOMPDF"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="DomPDF"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="dompdf"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="DomPdf"] .tech-info-category {
    color: #67E8F9 !important;
    border-color: rgba(103, 232, 249, 0.5);
    background: rgba(103, 232, 249, 0.12);
}

/* ---------- FPDF → azul lavanda ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="FPDF"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Fpdf"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="fpdf"] .tech-tag {
    color: #8B8BFF !important;
    border-color: rgba(139, 139, 255, 0.5);
    background: rgba(139, 139, 255, 0.12);
    text-shadow: 0 0 8px rgba(139, 139, 255, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="FPDF"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Fpdf"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="fpdf"] .tech-info-category {
    color: #8B8BFF !important;
    border-color: rgba(139, 139, 255, 0.5);
    background: rgba(139, 139, 255, 0.12);
}

/* ---------- Bootstrap → morado claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="Bootstrap"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="bootstrap"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Bootstrap 5"] .tech-tag {
    color: #A78BFA !important;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(167, 139, 250, 0.12);
    text-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="Bootstrap"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="bootstrap"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Bootstrap 5"] .tech-info-category {
    color: #A78BFA !important;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(167, 139, 250, 0.12);
}

/* ---------- Figma → verde ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="Figma"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="figma"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="FIGMA"] .tech-tag {
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.12);
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="Figma"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="figma"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="FIGMA"] .tech-info-category {
    color: #34D399 !important;
    border-color: rgba(52, 211, 153, 0.5);
    background: rgba(52, 211, 153, 0.12);
}

/* ---------- SQL → cyan ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="SQL"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Sql"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="sql"] .tech-tag {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="SQL"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Sql"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="sql"] .tech-info-category {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
}

/* ---------- MySQL → cyan ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="MySQL"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Mysql"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="mysql"] .tech-tag {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="MySQL"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Mysql"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="mysql"] .tech-info-category {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
}

/* ---------- PostgreSQL → azul medio ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="PostgreSQL"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Postgres"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="postgresql"] .tech-tag {
    color: #5B9BD5 !important;
    border-color: rgba(91, 155, 213, 0.5);
    background: rgba(91, 155, 213, 0.12);
    text-shadow: 0 0 8px rgba(91, 155, 213, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="PostgreSQL"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Postgres"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="postgresql"] .tech-info-category {
    color: #5B9BD5 !important;
    border-color: rgba(91, 155, 213, 0.5);
    background: rgba(91, 155, 213, 0.12);
}

/* ---------- TCPDF → rojo claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="TCPDF"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Tcpdf"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="tcpdf"] .tech-tag {
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.12);
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="TCPDF"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Tcpdf"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="tcpdf"] .tech-info-category {
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.12);
}

/* ---------- ClickUp → morado claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="ClickUp"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Clickup"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="clickup"] .tech-tag {
    color: #A78BFA !important;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(167, 139, 250, 0.12);
    text-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="ClickUp"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Clickup"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="clickup"] .tech-info-category {
    color: #A78BFA !important;
    border-color: rgba(167, 139, 250, 0.5);
    background: rgba(167, 139, 250, 0.12);
}

/* ---------- JSON → gris claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="JSON"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Json"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="json"] .tech-tag {
    color: #C7D2DE !important;
    border-color: rgba(199, 210, 222, 0.5);
    background: rgba(199, 210, 222, 0.12);
    text-shadow: 0 0 8px rgba(199, 210, 222, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="JSON"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Json"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="json"] .tech-info-category {
    color: #C7D2DE !important;
    border-color: rgba(199, 210, 222, 0.5);
    background: rgba(199, 210, 222, 0.12);
}

/* ---------- VS Code → cyan ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="VS Code"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="VSCode"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="vs-code"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="vs code"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Visual Studio Code"] .tech-tag {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
    text-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="VS Code"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="VSCode"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="vs-code"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="vs code"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Visual Studio Code"] .tech-info-category {
    color: #22D3EE !important;
    border-color: rgba(34, 211, 238, 0.5);
    background: rgba(34, 211, 238, 0.12);
}

/* ---------- Angular → rojo claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="Angular"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="angular"] .tech-tag {
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.12);
    text-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="Angular"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="angular"] .tech-info-category {
    color: #F87171 !important;
    border-color: rgba(248, 113, 113, 0.5);
    background: rgba(248, 113, 113, 0.12);
}

/* ---------- CSS → azul brillante ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="CSS"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Css"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="css"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="CSS3"] .tech-tag {
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.12);
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="CSS"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Css"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="css"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="CSS3"] .tech-info-category {
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.12);
}

/* ---------- jQuery → azul brillante ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="jQuery"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Jquery"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="jquery"] .tech-tag {
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.12);
    text-shadow: 0 0 8px rgba(96, 165, 250, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="jQuery"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Jquery"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="jquery"] .tech-info-category {
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.5);
    background: rgba(96, 165, 250, 0.12);
}

/* ---------- TypeScript → celeste ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="TypeScript"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Typescript"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="typescript"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="TS"] .tech-tag {
    color: #7DD3FC !important;
    border-color: rgba(125, 211, 252, 0.5);
    background: rgba(125, 211, 252, 0.12);
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="TypeScript"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Typescript"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="typescript"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="TS"] .tech-info-category {
    color: #7DD3FC !important;
    border-color: rgba(125, 211, 252, 0.5);
    background: rgba(125, 211, 252, 0.12);
}

/* ---------- Laravel → rojo muy claro ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="Laravel"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="laravel"] .tech-tag {
    color: #FCA5A5 !important;
    border-color: rgba(252, 165, 165, 0.5);
    background: rgba(252, 165, 165, 0.12);
    text-shadow: 0 0 8px rgba(252, 165, 165, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="Laravel"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="laravel"] .tech-info-category {
    color: #FCA5A5 !important;
    border-color: rgba(252, 165, 165, 0.5);
    background: rgba(252, 165, 165, 0.12);
}

/* ---------- PHP → morado brillante ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="PHP"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="Php"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="php"] .tech-tag {
    color: #A5B4FC !important;
    border-color: rgba(165, 180, 252, 0.5);
    background: rgba(165, 180, 252, 0.12);
    text-shadow: 0 0 8px rgba(165, 180, 252, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="PHP"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="Php"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="php"] .tech-info-category {
    color: #A5B4FC !important;
    border-color: rgba(165, 180, 252, 0.5);
    background: rgba(165, 180, 252, 0.12);
}

/* ---------- Python → celeste ---------- */
body[data-theme="dark"] .tech-info-panel[data-tech="Python"] .tech-tag,
body[data-theme="dark"] .tech-info-panel[data-tech="python"] .tech-tag {
    color: #7DD3FC !important;
    border-color: rgba(125, 211, 252, 0.5);
    background: rgba(125, 211, 252, 0.12);
    text-shadow: 0 0 8px rgba(125, 211, 252, 0.4);
}
body[data-theme="dark"] .tech-info-panel[data-tech="Python"] .tech-info-category,
body[data-theme="dark"] .tech-info-panel[data-tech="python"] .tech-info-category {
    color: #7DD3FC !important;
    border-color: rgba(125, 211, 252, 0.5);
    background: rgba(125, 211, 252, 0.12);
}


/* ============================================================
   MODO CLARO
   ============================================================ */
/* ============================================================
   MODO CLARO — SIN GLOW, SIN ANIMACIONES, TEXTO LEGIBLE
   ------------------------------------------------------------
   ✅ Panel sin animaciones ni glow
   ✅ Títulos planos en color oscuro
   ✅ Categorías legibles
   ✅ Iconos sin drop-shadow
   ✅ Overrides específicos: GitHub, Vercel, JavaScript, UML,
      Canva, Docker, Supabase, MongoDB, PHP, Node.js, Tailwind,
      Symfony → todos con texto oscuro legible
   ============================================================ */

/* ---------- PANEL ---------- */
body[data-theme="light"] .tech-info-content {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 245, 255, 0.98) 100%
    );
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: none;
}

/* Línea superior del panel — sin animación */
body[data-theme="light"] .tech-info-content::before {
    animation: none;
    opacity: 0.6;
}

/* Halo giratorio — oculto */
body[data-theme="light"] .tech-info-content::after {
    display: none;
}

/* ---------- TÍTULO ---------- */
body[data-theme="light"] .tech-info-name {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #1A1A2E;
    filter: none;
    text-shadow: none;
    animation: none;
    box-shadow: none;
}

/* ---------- CATEGORÍA ---------- */
body[data-theme="light"] .tech-info-category {
    color: #1A1A2E;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.15);
    filter: none;
    text-shadow: none;
    box-shadow: none;
    animation: none;
}

/* ---------- DESCRIPCIÓN ---------- */
body[data-theme="light"] .tech-info-description {
    color: rgba(26, 26, 46, 0.85);
}

/* ---------- ICONO ---------- */
body[data-theme="light"] .tech-info-icon-wrapper {
    animation: none;
    box-shadow: none;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.25);
}

body[data-theme="light"] .tech-info-icon {
    filter: none;
}

/* ---------- BOTONES DE NAVEGACIÓN ---------- */
body[data-theme="light"] .tech-nav-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.4);
}

/* ---------- INDICADORES ---------- */
body[data-theme="light"] .tech-indicators {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.2);
}

/* ============================================================
   TAGS — MODO CLARO (texto legible SIEMPRE)
   ============================================================ */
body[data-theme="light"] .tech-tag {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #1A1A2E !important;
    font-weight: 700;
}

/* ---------- OVERRIDES POR TECNOLOGÍA (modo claro) ---------- */

/* JavaScript → amarillo oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="JavaScript"] .tech-tag {
    color: #B8860B !important;
    border-color: rgba(184, 134, 11, 0.4);
    background: rgba(184, 134, 11, 0.08);
}

/* UML → amarillo oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="UML"] .tech-tag {
    color: #B8860B !important;
    border-color: rgba(184, 134, 11, 0.4);
    background: rgba(184, 134, 11, 0.08);
}

/* Canva → cyan oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="Canva"] .tech-tag {
    color: #008B94 !important;
    border-color: rgba(0, 139, 148, 0.4);
    background: rgba(0, 139, 148, 0.08);
}

/* Docker → cyan oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="Docker"] .tech-tag {
    color: #0066A1 !important;
    border-color: rgba(0, 102, 161, 0.4);
    background: rgba(0, 102, 161, 0.08);
}

/* Tailwind → cyan oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="Tailwind"] .tech-tag {
    color: #008B94 !important;
    border-color: rgba(0, 139, 148, 0.4);
    background: rgba(0, 139, 148, 0.08);
}

/* Supabase → verde oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="Supabase"] .tech-tag {
    color: #1A7A4F !important;
    border-color: rgba(26, 122, 79, 0.4);
    background: rgba(26, 122, 79, 0.08);
}

/* MongoDB → verde oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="MongoDB"] .tech-tag {
    color: #2D6E2D !important;
    border-color: rgba(45, 110, 45, 0.4);
    background: rgba(45, 110, 45, 0.08);
}

/* Node.js → verde oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="Node.js"] .tech-tag {
    color: #1F6B1F !important;
    border-color: rgba(31, 107, 31, 0.4);
    background: rgba(31, 107, 31, 0.08);
}

/* PHP → morado oscuro */
body[data-theme="light"] .tech-info-panel[data-tech="PHP"] .tech-tag {
    color: #4A4A8F !important;
    border-color: rgba(74, 74, 143, 0.4);
    background: rgba(74, 74, 143, 0.08);
}

/* ============================================================
   OVERRIDES ESPECÍFICOS — GitHub y Vercel en modo claro
   ------------------------------------------------------------
   ✅ Título, categoría y tags en NEGRO
   ============================================================ */
body[data-theme="light"] .tech-info-panel[data-tech="GitHub"] .tech-info-name,
body[data-theme="light"] .tech-info-panel[data-tech="Vercel"] .tech-info-name {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #000000;
    filter: none;
    text-shadow: none;
    animation: none;
}

body[data-theme="light"] .tech-info-panel[data-tech="GitHub"] .tech-info-category,
body[data-theme="light"] .tech-info-panel[data-tech="Vercel"] .tech-info-category {
    color: #000000;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: none;
    filter: none;
}

body[data-theme="light"] .tech-info-panel[data-tech="GitHub"] .tech-tag,
body[data-theme="light"] .tech-info-panel[data-tech="Vercel"] .tech-tag {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.07);
}

/* Symfony → negro */
body[data-theme="light"] .tech-info-panel[data-tech="Symfony"] .tech-info-name {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #000000;
    filter: none;
    text-shadow: none;
    animation: none;
}

body[data-theme="light"] .tech-info-panel[data-tech="Symfony"] .tech-info-category {
    color: #000000;
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
}

body[data-theme="light"] .tech-info-panel[data-tech="Symfony"] .tech-tag {
    color: #000000 !important;
    border-color: rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, 0.07);
}

/* ---------- HOVER (modo claro) ---------- */
body[data-theme="light"] .tech-tag:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--accent-color, #7C3AED);
    color: var(--accent-color, #7C3AED) !important;
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.25),
        0 0 15px var(--accent-color, rgba(124, 58, 237, 0.2));
    z-index: 2;
}

body[data-theme="light"] .tech-tag:hover::before {
    color: var(--accent-color, #7C3AED);
}
/* ============================================================
   MODO OSCURO
   ============================================================ */
body[data-theme="dark"] .tech-tag {
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid var(--accent-color, rgba(124, 58, 237, 0.35));
    color: var(--accent-color, #A78BFA);
}

/* Hover en modo oscuro: fondo oscuro FIJO + texto con color de la tech */
body[data-theme="dark"] .tech-tag:hover {
    background: rgba(15, 15, 30, 0.95);  /* ← Fondo oscuro fijo */
    border-color: var(--accent-color, #7C3AED);
    color: var(--accent-color, #A78BFA) !important;  /* ← Texto con color de la tech */
    transform: translateY(-2px);
    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.3),
        0 0 15px var(--accent-color, rgba(124, 58, 237, 0.4));
    z-index: 2;
}

body[data-theme="dark"] .tech-tag:hover::before {
    color: var(--accent-color, #A78BFA);
}
/* ============================================================
   INDICADORES (DOTS)
   ============================================================ */
.tech-indicators {
    position: absolute;
    bottom: -93px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 15;
    padding: 8px 16px;
    background: rgba(15, 15, 30, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 30px;
}

.tech-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.tech-indicator-dot:hover {
    background: rgba(124, 58, 237, 0.6);
    transform: scale(1.3);
}

.tech-indicator-dot.active {
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    width: 24px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}

/* ============================================================
   MODO CLARO
   ============================================================ */
body[data-theme="light"] .tech-info-content {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 245, 255, 0.98) 100%
    );
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.15),
        0 0 20px rgba(124, 58, 237, 0.05),      /* Glow mínimo */
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body[data-theme="light"] .tech-info-name {
    background: linear-gradient(135deg, #1A1A2E, var(--accent-color, #7C3AED));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="light"] .tech-info-description {
    color: rgba(26, 26, 46, 0.8);
}

body[data-theme="light"] .tech-info-category {
    background: rgba(124, 58, 237, 0.1);
}

body[data-theme="light"] .tech-nav-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .tech-indicators {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.2);
}

/* ============================================================
   SUBTÍTULO DE SECCIÓN
   ============================================================ */
.section-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 28px;        /* ✅ separación del título */
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    position: relative;
    display: block;          /* ✅ baja a la siguiente línea */
    opacity: 0.9;
}

.section-subtitle::before,
.section-subtitle::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--purple));
}

.section-subtitle::before {
    right: calc(100% + 15px);
}

.section-subtitle::after {
    left: calc(100% + 15px);
    background: linear-gradient(90deg, var(--purple), transparent);
}

/* ============================================================
   SUBTÍTULO — RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .section-subtitle {
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .section-subtitle {
        margin-top: 22px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .section-subtitle {
        margin-top: 20px;
        font-size: 0.85rem;
    }
}

/* ============================================================
   RESPONSIVE CARRUSEL - VERSIÓN CORREGIDA
   ============================================================ */

/* ============================================================
   TABLET (max-width: 992px)
   ============================================================ */
@media (max-width: 992px) {
    .tech-carousel-wrapper {
        padding: 0 40px;
    }
    .tech-particles-container {
        height: 640px;
    }

    /* Flechas separadas y arriba */
    .tech-nav-btn {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        top: 40%;
    }
    .tech-nav-prev { left: -15px; }
    .tech-nav-next { right: -15px; }

    /* Cajuela - adaptar al nuevo tamaño */
    .tech-info-panel {
        bottom: 60px;                 /* ← Antes 140px heredado de PC */
        max-width: 800px;
    }
    .tech-indicators {
        bottom: -15px;                /* ← Antes -55px heredado de PC */
    }

    .tech-info-name { font-size: 1.5rem; }
    .tech-info-icon-wrapper { width: 62px; height: 62px; }
    .tech-info-icon { width: 42px; height: 42px; }
}

/* ============================================================
   MÓVIL (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
    .tech-carousel-wrapper {
        padding: 0 30px;             /* ← Más espacio para flechas */
        margin-top: 10px;
    }
    .tech-particles-container {
        height: 480px;
    }

    /* Flechas separadas y arriba */
    .tech-nav-btn {
        width: 42px;
        height: 42px;
        font-size: 1rem;
        top: 32%;
    }
    .tech-nav-prev { left: -10px; }
    .tech-nav-next { right: -10px; }

    /* Cajuela - adaptar al nuevo tamaño */
    .tech-info-panel {
        bottom: 20px;                 /* ← Antes 140px heredado */
        max-width: 100%;
        width: 95%;
    }
    .tech-indicators {
        bottom: -15px;                /* ← Antes -55px */
    }

    .tech-info-content { padding: 18px 20px; border-radius: 16px; }
    .tech-info-header { gap: 14px; margin-bottom: 12px; }
    .tech-info-icon-wrapper { width: 54px; height: 54px; border-radius: 14px; }
    .tech-info-icon { width: 36px; height: 36px; }
    .tech-info-name { font-size: 1.3rem; }
    .tech-info-category { font-size: 0.7rem; padding: 4px 10px; }
    .tech-info-description { font-size: 0.9rem; line-height: 1.6; margin-bottom: 12px; }
    .tech-tag { font-size: 0.72rem; padding: 5px 11px; }
    .tech-indicator-dot { width: 6px; height: 6px; }
    .tech-indicator-dot.active { width: 20px; }

    .section-subtitle { font-size: 0.95rem; padding: 0 30px; }
    .section-subtitle::before,
    .section-subtitle::after { width: 20px; }
}

/* ============================================================
   MÓVIL PEQUEÑO (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
    .tech-carousel-wrapper {
        padding: 0 30px;             /* ← Más espacio para flechas */
    }
    .tech-particles-container {
        height: 400px;
    }

    /* Flechas separadas y arriba */
    .tech-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
        top: 32%;
    }
    .tech-nav-prev { left: -10px; }
    .tech-nav-next { right: -10px; }

    /* Cajuela - adaptar al nuevo tamaño */
    .tech-info-panel {
        bottom: 30px;                 /* ← Antes 140px heredado */
        width: 100%;
    }
    .tech-indicators {
        bottom: -15px;                /* ← Antes -45px */
    }

    .tech-info-content { padding: 14px 16px; border-radius: 14px; }
    .tech-info-header { gap: 12px; margin-bottom: 10px; }
    .tech-info-icon-wrapper { width: 46px; height: 46px; border-radius: 12px; }
    .tech-info-icon { width: 30px; height: 30px; }
    .tech-info-name { font-size: 1.1rem; }
    .tech-info-category { font-size: 0.62rem; padding: 3px 9px; }
    .tech-info-description {
        font-size: 0.8rem;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .tech-tag { font-size: 0.65rem; padding: 4px 9px; }
    .tech-tag::before { font-size: 0.5rem; }
    .tech-indicator-dot { width: 5px; height: 5px; }
    .tech-indicator-dot.active { width: 16px; }

    .section-subtitle { font-size: 0.85rem; padding: 0 20px; }
    .section-subtitle::before,
    .section-subtitle::after { width: 15px; }
}





/* ============================================================
   20. PROYECTOS
   ============================================================ */

/* ============================================================
   GRID DE PROYECTOS — SOLUCIÓN ULTRA FORZADA
   ------------------------------------------------------------
   ✅ Fuerza a cada tarjeta a ser 100% independiente
   ✅ Usa máxima especificidad para ganar a cualquier regla
   ============================================================ */

html body section#proyectos .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: start !important;
}

html body section#proyectos .projects-grid > .project-item {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    align-self: start !important;
    height: auto !important;
}

html body section#proyectos .projects-grid > .project-item > .project-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--card-border) !important;
    border-radius: 15px !important;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

html body section#proyectos .projects-grid > .project-item > .project-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--glow) !important;
    border-color: var(--cyan) !important;
}

html body section#proyectos .projects-grid > .project-item > .project-card > .project-info {
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
}

html body section#proyectos .projects-grid > .project-item > .project-card > .project-info > .project-more-content {
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease,
                margin 0.4s ease !important;
    margin: 0 !important;
}

html body section#proyectos .projects-grid > .project-item > .project-card > .project-info > .project-more-content.expanded {
    max-height: 800px !important;
    opacity: 1 !important;
    margin: 10px 0 !important;
}

/* Proyectos extra */
html body section#proyectos .project-item.project-extra {
    display: none !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.4s ease, transform 0.4s ease !important;
}

html body section#proyectos .project-item.project-extra.visible {
    display: block !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Responsive */
@media (max-width: 767.98px) {
    html body section#proyectos .projects-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Tarjeta de proyecto */
.project-card {
    overflow: hidden;
    background: var(--card-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 15px;
    box-shadow: var(--glass-shadow);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--glow);
    border-color: var(--cyan);
}

/* Preview */
.project-preview {
    position: relative;
    height: 220px;
    overflow: hidden;
    flex-shrink: 0;
}

.project-image,
.project-gif {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-image {
    transition: opacity 0.3s ease;
}

.project-gif {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-card:hover .project-gif {
    opacity: 1;
}

.project-logo {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 8px 12px;
    border-radius: 10px;
    z-index: 2;
}

.project-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(124, 58, 237, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    z-index: 2;
    color: #FFFFFF;
}

/* Info de la tarjeta */
.project-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}


.project-info h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.project-subtitle {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--cyan);
}

.project-description {
    font-size: 0.9rem;
    margin-bottom: 10px;
    color: var(--text-muted);
    line-height: 1.6;
}
/* ============================================================
   CONTENIDO ADICIONAL DESPLEGABLE — OPTIMIZADO
   ------------------------------------------------------------
   ✅ Animación SOLO de max-height y opacity (no margin)
   ✅ Duración más corta (0.35s)
   ✅ Sin transitions costosos
   ✅ will-change solo durante la animación
   ============================================================ */
.project-more-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease;
    margin: 0;
    will-change: max-height, opacity;
}

.project-more-content.expanded {
    max-height: 1500px;  /* ✅ Suficiente para cualquier contenido real */
    opacity: 1;
    margin: 10px 0 0 0;
    /* ✅ Quitar will-change después de la transición */
    will-change: auto;
}
.project-more-content .project-description {
    margin-bottom: 10px;
}

/* Botón "Ver más" dentro de la tarjeta */
.project-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--purple);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 15px;
    align-self: flex-start;
}

.project-toggle-btn:hover {
    color: var(--cyan);
    gap: 12px;
}

.project-toggle-btn i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.project-toggle-btn.active i {
    transform: rotate(180deg);
}

/* ============================================================
   TAGS DE PROYECTOS — OPTIMIZADOS
   ------------------------------------------------------------
   ✅ transition solo en propiedades específicas (no `all`)
   ✅ Duración corta (0.2s)
   ✅ Sin gradiente en hover (color sólido → mucho más rápido)
   ✅ Sin overshoot en la curva
   ✅ will-change solo en hover
   ============================================================ */
.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.project-tags span {
    display: inline-block;
    background: rgba(124, 58, 237, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--purple);
    font-weight: 500;
    /* ✅ transition SOLO de las propiedades que cambian */
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    /* ✅ Evitar que el navegador recalcule layout en hover */
    will-change: auto;
}

.project-tags span:hover {
    /* ✅ Color sólido en vez de gradiente (mucho más rápido) */
    background: #7C3AED;
    color: #FFFFFF;
    /* ✅ Transform ligero para dar feedback sin repaint */
    transform: translateY(-2px);
}

/* Modo oscuro: mismo comportamiento, ligeramente más brillante */
body[data-theme="dark"] .project-tags span:hover {
    background: #A78BFA;
    color: #1A1A2E;
}

/* ============================================================
   MÉTRICAS CON LÍNEA DIVISORA CENTRAL
   ============================================================ */
.project-metrics {
    display: flex;
    gap: 0;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--card-bg);
    border-radius: 10px;
    margin-top: auto;
    position: relative;
}

.metric {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Línea divisora vertical entre las métricas */
.project-metrics .metric:first-child {
    border-right: 1px solid rgba(124, 58, 237, 0.25);
    padding-right: 15px;
}

.project-metrics .metric:last-child {
    padding-left: 15px;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Modo claro - línea divisora */
body[data-theme="light"] .project-metrics .metric:first-child {
    border-right: 1px solid rgba(124, 58, 237, 0.2);
}

/* ============================================================
   BOTONES "Ver en GitHub" / "VER DEMO" CON HOVER
   ============================================================ */
.project-actions {
    display: flex;
    gap: 10px;
}

.btn-project {
    flex: 1;
    text-align: center;
    padding: 10px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
    z-index: 1;
}

.btn-project::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

/* Botón "Ver en GitHub" (primero) */
.btn-project:first-child {
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple);
}

.btn-project:first-child::before {
    background: linear-gradient(135deg, #7C3AED, #5B21B6, #4C1D95);
}

/* Botón "Ver Demo" (último) */
.btn-project:last-child {
    background: rgba(6, 182, 212, 0.1);
    color: var(--cyan);
}

.btn-project:last-child::before {
    background: linear-gradient(135deg, #06B6D4, #0891B2, #0E7490);
}

/* Hover general */
.btn-project:hover::before {
    left: 0;
}

.btn-project:hover {
    color: #FFFFFF;
    transform: translateY(-3px) scale(1.03);
    border-color: transparent;
}

/* Hover específico "Ver en GitHub" */
.btn-project:first-child:hover {
    box-shadow:
        0 8px 20px rgba(124, 58, 237, 0.4),
        0 0 15px rgba(124, 58, 237, 0.3);
}

/* Hover específico "Ver Demo" */
.btn-project:last-child:hover {
    box-shadow:
        0 8px 20px rgba(6, 182, 212, 0.4),
        0 0 15px rgba(6, 182, 212, 0.3);
}

/* Íconos dentro del botón */
.btn-project i {
    transition: transform 0.3s ease;
    margin-right: 6px;
}

.btn-project:hover i {
    transform: scale(1.15) rotate(-5deg);
}

/* Botón único "Ver en GitHub" (SIGPAZ y Celestia) */
.btn-project.btn-project-full {
    flex: 1;
    width: 100%;
    background: rgba(124, 58, 237, 0.1);
    color: var(--purple);
}

.btn-project.btn-project-full::before {
    background: linear-gradient(135deg, #7C3AED, #5B21B6, #4C1D95);
}

.btn-project.btn-project-full:hover {
    color: #FFFFFF;
    box-shadow:
        0 8px 20px rgba(124, 58, 237, 0.5),
        0 0 20px rgba(124, 58, 237, 0.4);
}

/* Modo claro - hover de botones */
body[data-theme="light"] .btn-project:hover {
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3);
}

body[data-theme="light"] .btn-project:first-child {
    background: rgba(124, 58, 237, 0.08);
}

body[data-theme="light"] .btn-project:last-child {
    background: rgba(6, 182, 212, 0.08);
}

/* ============================================================
   BOTÓN "VER MÁS PROYECTOS" (debajo del grid)
   ============================================================ */
.projects-toggle-wrapper {
    margin-top: 40px;
     margin-bottom: 40px;
}

.btn-projects-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    background: var(--gradient-btn);
    color: #FFFFFF !important;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    white-space: nowrap;
}

.btn-projects-toggle *,
.btn-projects-toggle i,
.btn-projects-toggle span {
    color: #FFFFFF !important;
}

.btn-projects-toggle:hover {
    background: var(--gradient-hover);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}

.btn-projects-toggle i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.btn-projects-toggle.active i {
    transform: rotate(180deg);
}

/* ============================================================
   RESPONSIVE - PROYECTOS
   En TODOS los tamaños se ven 2 columnas
   ============================================================ */

/* Móvil pequeño (hasta 479.98px) - 2 columnas */
@media (max-width: 479.98px) {
    .project-preview {
        height: 140px;
    }
    .project-info {
        padding: 14px;
    }
    .project-info h3 {
        font-size: 1.05rem;
    }
    .project-subtitle {
        font-size: 0.78rem;
    }
    .project-description {
        font-size: 0.78rem;
    }
    .project-tags span {
        font-size: 0.68rem;
        padding: 3px 8px;
    }

    /* Métricas apiladas en móvil pequeño */
    .project-metrics {
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .project-metrics .metric:first-child {
        border-right: none;
        border-bottom: 1px solid rgba(124, 58, 237, 0.25);
        padding-right: 0;
        padding-bottom: 10px;
    }

    .project-metrics .metric:last-child {
        padding-left: 0;
        padding-top: 10px;
    }

    body[data-theme="light"] .project-metrics .metric:first-child {
        border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    }

    .metric-value {
        font-size: 1rem;
    }
    .metric-label {
        font-size: 0.65rem;
    }
    .btn-project {
        padding: 8px 6px;
        font-size: 0.75rem;
    }
    .project-toggle-btn {
        font-size: 0.75rem;
    }
    .btn-projects-toggle {
        padding: 12px 24px;
        font-size: 0.9rem;
    }
}

/* Móvil grande y tablet pequeña (480px - 767.98px) - 2 columnas */
@media (min-width: 480px) and (max-width: 767.98px) {
    .project-preview {
        height: 160px;
    }
    .project-info {
        padding: 16px;
    }
    .project-info h3 {
        font-size: 1.1rem;
    }
    .project-subtitle {
        font-size: 0.82rem;
    }
    .project-description {
        font-size: 0.82rem;
    }
    .project-tags span {
        font-size: 0.72rem;
        padding: 3px 9px;
    }
    .project-metrics {
        gap: 0;
        padding: 12px;
    }
    .project-metrics .metric:first-child {
        padding-right: 12px;
    }
    .project-metrics .metric:last-child {
        padding-left: 12px;
    }
    .metric-value {
        font-size: 1.05rem;
    }
    .metric-label {
        font-size: 0.68rem;
    }
    .btn-project {
        padding: 9px;
        font-size: 0.82rem;
    }
}

/* Tablet (768px - 991.98px) - 2 columnas */
@media (min-width: 768px) and (max-width: 991.98px) {
    .project-preview {
        height: 200px;
    }
    .project-info {
        padding: 20px;
    }
    .project-info h3 {
        font-size: 1.25rem;
    }
}

/* Laptop y PC (992px en adelante) - 2 columnas */
@media (min-width: 992px) {
    .project-preview {
        height: 240px;
    }
    .project-info {
        padding: 24px;
    }
    .project-info h3 {
        font-size: 1.35rem;
    }
    .project-description {
        font-size: 0.92rem;
    }
}

/* PC grande (≥ 1400px) - 2 columnas */
@media (min-width: 1400px) {
    .project-preview {
        height: 260px;
    }
}


/* ============================================================
   BOTÓN "VER MÁS PROYECTOS" — MORADO SÓLIDO EN MODO CLARO
   ============================================================ */
body[data-theme="light"] .btn-projects-toggle {
    background: var(--purple);
    color: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
}

body[data-theme="light"] .btn-projects-toggle *,
body[data-theme="light"] .btn-projects-toggle i,
body[data-theme="light"] .btn-projects-toggle span {
    color: #FFFFFF !important;
}

/* ✅ Hover en modo claro: degradado (como el "Ver Certificados") */
body[data-theme="light"] .btn-projects-toggle:hover {
    background: var(--gradient-btn);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}


/* ============================================================
   21. EXPERIENCIA — TARJETAS PREMIUM
   ------------------------------------------------------------
   ✅ Tarjetas con borde degradado (estilo proyectos)
   ✅ Número grande de proyecto (01, 02, 03)
   ✅ Logo con marco circular degradado
   ✅ Badges de resultados con hover degradado
   ✅ Layout alternado en PC (izq/der)
   ✅ Responsive: timeline vertical en móvil
   ✅ Modo claro y oscuro adaptados
   ============================================================ */

/* ============================================================
   CONTENEDOR GENERAL DEL TIMELINE
   ============================================================ */
.timeline {
    position: relative;
    padding: 30px 0 10px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

/* Línea vertical central (PC) */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        #7C3AED 10%,
        #06B6D4 50%,
        #2DD4BF 90%,
        transparent 100%
    );
    opacity: 0.5;
    z-index: 0;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

/* ============================================================
   ITEM DEL TIMELINE
   ============================================================ */
.timeline-item {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    z-index: 1;
}

/* Ítems pares: contenido a la derecha */
.timeline-item:nth-child(even) .timeline-content {
    grid-column: 2 / 3;
    grid-row: 1;
}

/* Ítems impares: contenido a la izquierda */
.timeline-item:nth-child(odd) .timeline-content {
    grid-column: 1 / 2;
    grid-row: 1;
}

/* ============================================================
   PUNTO CENTRAL (DOT)
   ============================================================ */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    box-shadow:
        0 0 0 6px rgba(124, 58, 237, 0.15),
        0 0 25px rgba(124, 58, 237, 0.6),
        0 0 50px rgba(6, 182, 212, 0.3);
    z-index: 3;
    animation: timelineDotPulse 2.5s ease-in-out infinite;
}

.timeline-dot::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes timelineDotPulse {
    0%, 100% {
        box-shadow:
            0 0 0 6px rgba(124, 58, 237, 0.15),
            0 0 25px rgba(124, 58, 237, 0.6),
            0 0 50px rgba(6, 182, 212, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 10px rgba(124, 58, 237, 0.08),
            0 0 35px rgba(124, 58, 237, 0.9),
            0 0 70px rgba(6, 182, 212, 0.5);
    }
}

/* ============================================================
   TARJETA DE EXPERIENCIA (CONTENT)
   ============================================================ */
.timeline-content {
    position: relative;
    padding: 28px 28px 24px;
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
    opacity: 0;
    transform: translateY(40px);
}

.timeline-content.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ✅ Borde degradado (igual que proyectos) */
.timeline-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 33%,
        #2DD4BF 66%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.timeline-content:hover::before {
    opacity: 1;
}

/* ✅ Brillo radial en la esquina superior derecha */
.timeline-content::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle at 80% 15%,
        rgba(124, 58, 237, 0.12) 0%,
        transparent 45%
    );
    pointer-events: none;
    z-index: 0;
    opacity: 0.8;
    transition: opacity 0.4s ease;
}

.timeline-content:hover::after {
    opacity: 1;
}

/* Todo el contenido por encima del borde/brillo */
.timeline-content > * {
    position: relative;
    z-index: 1;
}

/* ✅ Hover: elevación + glow */
.timeline-content:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.35),
        0 0 40px rgba(6, 182, 212, 0.2),
        var(--glass-shadow);
    border-color: transparent;
}

body[data-theme="light"] .timeline-content:hover {
    box-shadow:
        0 20px 60px rgba(124, 58, 237, 0.2),
        0 0 30px rgba(6, 182, 212, 0.15),
        var(--glass-shadow);
}

/* ============================================================
   HEADER DE LA TARJETA — LOGO + INFO
   ============================================================ */
.timeline-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
    position: relative;
    z-index: 1;
}

body[data-theme="light"] .timeline-header {
    border-bottom-color: rgba(124, 58, 237, 0.12);
}

/* ✅ Logo con marco circular degradado */
.timeline-logo {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.15),
        rgba(6, 182, 212, 0.15)
    );
    border: 1px solid rgba(124, 58, 237, 0.4);
    transition: all 0.4s ease;
    overflow: hidden;
}

/* Borde interior degradado del logo */
.timeline-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, #7C3AED, #06B6D4, #2DD4BF);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

.timeline-content:hover .timeline-logo::before {
    opacity: 1;
}

.timeline-logo img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.3));
    transition: transform 0.4s ease;
}

.timeline-content:hover .timeline-logo img {
    transform: scale(1.08);
}

/* ============================================================
   INFO DEL HEADER
   ============================================================ */
.timeline-info {
    flex: 1;
    min-width: 0;
}

.timeline-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.2px;
}

body[data-theme="light"] .timeline-info h3 {
    background: linear-gradient(135deg, #1A1A2E 0%, #4C1D95 50%, #7C3AED 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Rol con icono */
.timeline-role {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 8px;
    padding: 4px 12px;
    background: rgba(6, 182, 212, 0.1);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 20px;
    width: fit-content;
    transition: all 0.3s ease;
}

.timeline-role i {
    font-size: 0.82rem;
}

.timeline-content:hover .timeline-role {
    background: rgba(6, 182, 212, 0.18);
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.25);
}

/* Fecha */
.timeline-date {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.timeline-date i {
    color: var(--purple);
    font-size: 0.8rem;
}

/* ============================================================
   LISTA DE RESPONSABILIDADES
   ============================================================ */
.timeline-responsibilities {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    position: relative;
    z-index: 1;
}

.timeline-responsibilities li {
    position: relative;
    padding: 8px 0 8px 28px;
    margin-bottom: 4px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
    transition: all 0.3s ease;
}

/* ✅ Check icon con degradado */
.timeline-responsibilities li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 9px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: #FFFFFF;
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
    transition: all 0.3s ease;
}

.timeline-responsibilities li:hover {
    color: var(--text-color);
    transform: translateX(4px);
}

.timeline-responsibilities li:hover::before {
    box-shadow: 0 0 14px rgba(124, 58, 237, 0.7);
    transform: scale(1.1);
}

/* ============================================================
   RESULTADOS — Badges tipo proyecto
   ============================================================ */
.timeline-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    padding-top: 18px;
    border-top: 1px dashed rgba(124, 58, 237, 0.25);
    position: relative;
    z-index: 1;
}

body[data-theme="light"] .timeline-results {
    border-top-color: rgba(124, 58, 237, 0.18);
}

.result-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.18);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    cursor: default;
}

/* ============================================================
   HOVER DE LAS SUB-CAJUELAS — MODO OSCURO
   ------------------------------------------------------------
   ✅ Fondo morado degradado (vivo)
   ✅ Texto BLANCO para máxima legibilidad
   ✅ Iconos blancos
   ✅ Glow morado-cyan
   ✅ Borde degradado visible
   ============================================================ */
body[data-theme="dark"] .result-item:hover {
    transform: translateY(-4px) scale(1.03);

    /* ✅ Fondo morado degradado vivo */
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #5B21B6 50%,
        #4C1D95 100%
    );

    /* ✅ Borde transparente (lo cubre el ::before degradado) */
    border-color: transparent;

    /* ✅ Glow morado + cyan */
    box-shadow:
        0 10px 25px rgba(124, 58, 237, 0.5),
        0 0 25px rgba(124, 58, 237, 0.6),
        0 0 45px rgba(6, 182, 212, 0.3);
}

/* ✅ Borde degradado visible en hover (modo oscuro) */
body[data-theme="dark"] .result-item:hover::before {
    opacity: 1;
    background: linear-gradient(
        135deg,
        #A78BFA 0%,
        #06B6D4 50%,
        #2DD4BF 100%
    );
}

/* ✅ Icono en BLANCO puro (modo oscuro) */
body[data-theme="dark"] .result-item:hover i {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    transform: scale(1.15);
}

/* ✅ Valor en BLANCO puro (modo oscuro) */
body[data-theme="dark"] .result-item:hover .result-value {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ✅ Label en blanco suave (modo oscuro) */
body[data-theme="dark"] .result-item:hover .result-label {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}


/* ============================================================
   HOVER DE LAS SUB-CAJUELAS — MODO OSCURO
   ------------------------------------------------------------
   ✅ Fondo morado degradado (vivo)
   ✅ Texto BLANCO para máxima legibilidad
   ✅ Iconos blancos
   ✅ Glow morado-cyan
   ✅ Borde degradado visible
   ============================================================ */
body[data-theme="dark"] .result-item:hover {
    transform: translateY(-4px) scale(1.03);

    /* ✅ Fondo morado degradado vivo */
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #5B21B6 50%,
        #4C1D95 100%
    );

    /* ✅ Borde transparente (lo cubre el ::before degradado) */
    border-color: transparent;

    /* ✅ Glow morado + cyan */
    box-shadow:
        0 10px 25px rgba(124, 58, 237, 0.5),
        0 0 25px rgba(124, 58, 237, 0.6),
        0 0 45px rgba(6, 182, 212, 0.3);
}

/* ✅ Borde degradado visible en hover (modo oscuro) */
body[data-theme="dark"] .result-item:hover::before {
    opacity: 1;
    background: linear-gradient(
        135deg,
        #A78BFA 0%,
        #06B6D4 50%,
        #2DD4BF 100%
    );
}

/* ✅ Icono en BLANCO puro (modo oscuro) */
body[data-theme="dark"] .result-item:hover i {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #FFFFFF !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
    transform: scale(1.15);
}

/* ✅ Valor en BLANCO puro (modo oscuro) */
body[data-theme="dark"] .result-item:hover .result-value {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #FFFFFF !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ✅ Label en blanco suave (modo oscuro) */
body[data-theme="dark"] .result-item:hover .result-label {
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}



/* Borde degradado en hover */
.result-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #7C3AED, #06B6D4, #2DD4BF);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.result-item:hover::before {
    opacity: 1;
}

.result-item:hover {
    transform: translateY(-4px) scale(1.03);
    background: rgba(124, 58, 237, 0.12);
    box-shadow:
        0 10px 25px rgba(124, 58, 237, 0.3),
        0 0 20px rgba(6, 182, 212, 0.15);
}

/* Icono */
.result-item i {
    font-size: 1.2rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition: transform 0.4s ease;
}

.result-item:hover i {
    transform: scale(1.15);
}

/* Valor */
.result-value {
    display: block;
    font-size: 1.15rem;
    font-weight: 800;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    letter-spacing: 0.3px;
    line-height: 1.1;
}

body[data-theme="light"] .result-value {
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #06B6D4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Label */
.result-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.3px;
    line-height: 1.2;
    text-transform: uppercase;
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 992px)
   ============================================================ */
@media (max-width: 992px) {
    .timeline {
        gap: 40px;
        padding: 20px 0 10px;
    }

    /* Timeline vertical a la izquierda */
    .timeline::before {
        left: 20px;
        transform: none;
    }

    .timeline-item {
        grid-template-columns: 1fr;
        gap: 0;
        padding-left: 60px;
    }

    /* Todos los items: contenido a la derecha del dot */
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .timeline-dot {
        left: 20px;
        top: 40px;
        transform: translate(-50%, 0);
    }

    .timeline-content {
        padding: 24px 22px 20px;
        border-radius: 18px;
    }

    .timeline-info h3 {
        font-size: 1.1rem;
    }

    .timeline-logo {
        width: 62px;
        height: 62px;
        border-radius: 15px;
    }

    .timeline-logo img {
        width: 44px;
        height: 44px;
    }

    .timeline-header {
        gap: 14px;
        margin-bottom: 18px;
        padding-bottom: 16px;
    }

    .timeline-responsibilities li {
        font-size: 0.84rem;
        padding: 6px 0 6px 26px;
    }

    .timeline-results {
        grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
        gap: 8px;
        padding-top: 16px;
    }

    .result-item {
        padding: 12px 8px;
        border-radius: 12px;
    }

    .result-item i {
        font-size: 1.05rem;
    }

    .result-value {
        font-size: 1rem;
    }

    .result-label {
        font-size: 0.62rem;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
    .timeline {
        gap: 32px;
    }

    .timeline::before {
        left: 16px;
        width: 2px;
    }

    .timeline-item {
        padding-left: 48px;
    }

    .timeline-dot {
        left: 16px;
        top: 32px;
        width: 18px;
        height: 18px;
    }

    .timeline-dot::after {
        inset: 5px;
    }

    .timeline-content {
        padding: 20px 18px 16px;
        border-radius: 16px;
    }

    .timeline-content:hover {
        transform: translateY(-4px);
    }

    .timeline-header {
        flex-direction: row;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 16px;
        padding-bottom: 14px;
    }

    .timeline-logo {
        width: 54px;
        height: 54px;
        border-radius: 13px;
    }

    .timeline-logo img {
        width: 38px;
        height: 38px;
    }

    .timeline-info h3 {
        font-size: 1rem;
        margin-bottom: 6px;
    }

    .timeline-role {
        font-size: 0.78rem;
        padding: 3px 10px;
        margin-bottom: 6px;
    }

    .timeline-date {
        font-size: 0.72rem;
    }

    .timeline-responsibilities {
        margin-bottom: 18px;
    }

    .timeline-responsibilities li {
        font-size: 0.8rem;
        padding: 5px 0 5px 24px;
        line-height: 1.55;
    }

    .timeline-responsibilities li::before {
        width: 16px;
        height: 16px;
        font-size: 0.55rem;
        top: 7px;
    }

    .timeline-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding-top: 14px;
    }

    .result-item {
        padding: 11px 8px;
        border-radius: 11px;
        gap: 3px;
    }

    .result-item i {
        font-size: 1rem;
    }

    .result-value {
        font-size: 0.95rem;
    }

    .result-label {
        font-size: 0.6rem;
    }
}

/* ============================================================
   RESPONSIVE — MÓVIL PEQUEÑO (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
    .timeline {
        gap: 26px;
        padding: 15px 0 5px;
    }

    .timeline::before {
        left: 12px;
        width: 1.5px;
    }

    .timeline-item {
        padding-left: 40px;
    }

    .timeline-dot {
        left: 12px;
        top: 28px;
        width: 15px;
        height: 15px;
        box-shadow:
            0 0 0 4px rgba(124, 58, 237, 0.15),
            0 0 18px rgba(124, 58, 237, 0.6);
    }

    .timeline-dot::after {
        inset: 4px;
    }

    .timeline-content {
        padding: 16px 14px 14px;
        border-radius: 14px;
    }

    .timeline-header {
        gap: 10px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .timeline-logo {
        width: 46px;
        height: 46px;
        border-radius: 11px;
    }

    .timeline-logo img {
        width: 32px;
        height: 32px;
    }

    .timeline-info h3 {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .timeline-role {
        font-size: 0.7rem;
        padding: 3px 9px;
        gap: 5px;
    }

    .timeline-role i {
        font-size: 0.7rem;
    }

    .timeline-date {
        font-size: 0.66rem;
        gap: 5px;
    }

    .timeline-responsibilities {
        margin-bottom: 14px;
    }

    .timeline-responsibilities li {
        font-size: 0.74rem;
        padding: 4px 0 4px 22px;
        line-height: 1.5;
        margin-bottom: 2px;
    }

    .timeline-responsibilities li::before {
        width: 14px;
        height: 14px;
        font-size: 0.48rem;
        top: 6px;
    }

    .timeline-results {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding-top: 12px;
    }

    .result-item {
        padding: 9px 6px;
        border-radius: 10px;
        gap: 2px;
    }

    .result-item i {
        font-size: 0.9rem;
    }

    .result-value {
        font-size: 0.85rem;
    }

    .result-label {
        font-size: 0.55rem;
        letter-spacing: 0.2px;
    }
}

/* ============================================================
   ACCESIBILIDAD — Reducir movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .timeline-dot {
        animation: none;
    }
    .timeline-content {
        transition: opacity 0.3s ease;
        transform: none !important;
    }
    .timeline-content.visible {
        transform: none !important;
    }
}
/* ============================================================
   22. FORMACIÓN ACADÉMICA + CERTIFICACIONES (TOGGLE)
   ============================================================ */

/* --- Tarjetas de formación --- */
.education-card {
    padding: 30px;
    text-align: center;
    height: 100%;
}

.university-logo {
    margin-bottom: 20px;
}

.university-logo img {
    border-radius: 10px;
    background: #FFFFFF;
    padding: 10px;
    transition: transform 0.3s ease;
}

.university-logo img:hover {
    transform: scale(1.1);
}

.education-card h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

 .university-name {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.date {
    display: inline-block;
    background: rgba(124, 58, 237, 0.1);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    margin-top: 10px;
}

.gpa {
    margin-top: 15px;

}






.gpa-badge {
    /*background-color: var(--purple);*/
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;

}

.gpa-badge:hover {
    transform: scale(1.05);
}

.gpa-label {
    display: block;
    font-size: 0.8rem;
    margin-top: 5px;
    color: var(--text-muted);
}

.publication-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.1));
}

.publication-info {
    font-size: 0.9rem;
}

.publication-description {
    font-size: 0.85rem;
    margin-top: 10px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ============================================================
   REGISTRO DE INVESTIGADORA Y PROFESIONAL
   ============================================================ */
.research-card {
    position: relative;
    background: var(--card-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 35px 40px;
    overflow: hidden;
    margin-top: -10px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: var(--glass-shadow);
}

.research-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-main);
    opacity: 0.9;
}

.research-card:hover {
    border-color: var(--cyan);
    box-shadow:
        0 0 30px rgba(0, 229, 255, 0.25),
        0 0 60px rgba(124, 58, 237, 0.2),
        var(--glass-shadow);
    transform: translateY(-5px);
}

.research-card-content {
    display: flex;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.research-icon-wrapper {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.2),
        rgba(6, 182, 212, 0.2)
    );
    border: 1px solid rgba(124, 58, 237, 0.4);
    animation: researchPulse 3s ease-in-out infinite;
}

@keyframes researchPulse {
    0%, 100% {
        box-shadow:
            0 0 20px rgba(124, 58, 237, 0.3),
            inset 0 0 20px rgba(124, 58, 237, 0.1);
    }
    50% {
        box-shadow:
            0 0 40px rgba(124, 58, 237, 0.5),
            inset 0 0 30px rgba(124, 58, 237, 0.2);
    }
}

.research-icon-wrapper i {
    font-size: 2.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.research-text {
    flex: 1;
    min-width: 0;
}

.research-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-color);
    line-height: 1.3;
}

.research-subtitle {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--purple);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.research-subtitle i {
    font-size: 1rem;
}

.research-description {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin: 0 0 18px;
}

.research-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

}

.research-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 600;
background: var(--purple);
    padding: 6px 14px;

    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 20px;
    transition: all 0.3s ease;
}

.research-badge i {
    font-size: 0.8rem;
    color: var(--cyan);
}


.research-badge span {

color: white;
}



body[data-theme="dark"] .research-badge {
background: var(--gradient-btn);


}

body[data-theme="dark"] .research-badge:hover  {
background: var(--purple);

}




.research-badge:hover {
    background: var(--gradient-main);
    color: #FFFFFF;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.research-badge:hover i {
    color: #FFFFFF;
}

.research-seal {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.15),
        rgba(6, 182, 212, 0.15)
    );
    border: 2px solid rgba(124, 58, 237, 0.4);
    position: relative;
    animation: sealRotate 20s linear infinite;
}

@keyframes sealRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.research-seal::before {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(124, 58, 237, 0.3);
}

.research-seal i {
    font-size: 2.5rem;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: sealCounterRotate 20s linear infinite;
}

@keyframes sealCounterRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}


/* ============================================================
   LOGO UPTMA — CIRCULAR, CENTRADO Y RESPONSIVE
   ============================================================ */

.university-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.university-logo img {
    /* Tamaño base: se ve grande pero sin desbordar */
    width: 120px;
    height: 120px;
    object-fit: contain;       /* respeta la proporción circular */
    border-radius: 50%;        /* opcional: refuerza el círculo */
    padding: 0;                /* sin padding extra: la imagen ya trae su marco */
    background: transparent;   /* sin fondo extra */
    transition: transform 0.3s ease;
    display: block;
}

.university-logo img:hover {
    transform: scale(1.08);
}

/* ---------- Responsive ---------- */

/* Tablet */
@media (max-width: 992px) {
    .university-logo img {
        width: 110px;
        height: 110px;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .university-logo img {
        width: 100px;
        height: 100px;
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .university-logo img {
        width: 85px;
        height: 85px;
    }
}



/* ============================================================
   LOGO RECITUTM — MISMO TAMAÑO QUE UPTMA
   ============================================================ */

.publication-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.publication-logo img {
    width: 120px;              /* ← mismo ancho que UPTMA */
    height: 120px;             /* ← mismo alto que UPTMA */
    object-fit: contain;       /* respeta la forma del logo */
    display: block;
    transition: transform 0.3s ease;
    /* ❌ SIN scaleX — para que sea cuadrado como UPTMA */
}

.publication-logo img:hover {
    transform: scale(1.08);    /* ← mismo hover que UPTMA */
}

/* ---------- Responsive (igual que UPTMA) ---------- */

@media (max-width: 992px) {
    .publication-logo img {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 768px) {
    .publication-logo img {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .publication-logo img {
        width: 85px;
        height: 85px;
    }
}


/* ============================================================
   TOGGLE FORMACIÓN ↔ CERTIFICACIONES
   ============================================================ */

.vista-activa,
.vista-oculta {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.vista-oculta {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.vista-oculta.mostrar {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.vista-activa.ocultar {
    display: none;
}

/* ============================================================
   BOTÓN "VER CERTIFICADOS"
   ============================================================ */
.toggle-btn-wrapper {
    margin-top: 80px;
}

/* ✅ Base del botón */
.btn-toggle-view {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 32px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow 0.35s ease,
                background 0.35s ease;

    /* ✅ Desplazamiento base */
    transform: translateY(-50px);

    /* ✅ Degradado por defecto (modo oscuro) */
    background: var(--gradient-btn);
    color: #FFFFFF;
}

/* ✅ Asegurar que iconos y texto sean blancos */
.btn-toggle-view *,
.btn-toggle-view i,
.btn-toggle-view span {
    color: #FFFFFF !important;
}

/* ============================================================
   MODO OSCURO — DEGRADADO
   ============================================================ */
body[data-theme="dark"] .btn-toggle-view {
    background: var(--gradient-btn);
    color: #FFFFFF;
}

body[data-theme="dark"] .btn-toggle-view:hover {
    background: var(--gradient-hover);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}

/* ============================================================
   MODO CLARO — MORADO SÓLIDO
   ============================================================ */
body[data-theme="light"] .btn-toggle-view {
    background: var(--purple);
    color: #FFFFFF;
}

body[data-theme="light"] .btn-toggle-view:hover {
    background: var(--gradient-btn);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}

/* ============================================================
   HOVER GENERAL — mantiene el desplazamiento
   ============================================================ */
.btn-toggle-view:hover {
    transform: translateY(-53px) scale(1.03);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}

/* ✅ Animación de las flechas al hacer hover */
.btn-toggle-view i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-toggle-view:hover i:last-child {
    transform: translateX(5px);
}

.btn-toggle-view:hover i:first-child {
    transform: translateX(-5px);
}

/* ✅ Ocultar el botón cuando el JS lo marca */
#toggleBtnWrapper[hidden] {
    display: none !important;
}

.btn-toggle-view *,
.btn-toggle-view i,
.btn-toggle-view span {
    color: #FFFFFF !important;
}
.btn-toggle-view:hover {

    /* ✅ MANTIENE el -30px y añade -3px más → total -33px */
    transform: translateY(-53px) scale(1.03);
    box-shadow: 0 8px 30px rgba(124, 58, 237, 0.5);
}






.btn-toggle-view i {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-toggle-view:hover i:last-child {
    transform: translateX(5px);
}

.btn-toggle-view:hover i:first-child {
    transform: translateX(-5px);
}

/* ✅ El botón se oculta cuando el JS lo marca */
#toggleBtnWrapper[hidden] {
    display: none !important;
}

/* ============================================================
   CARRUSEL DE CERTIFICACIONES
   ============================================================ */
.certifications-carousel-wrapper {
    position: relative;
    padding: 20px 0 90px 0;
}

/* Contenedor con overflow hidden (oculta grupos vecinos) */
.certifications-track-container {
    overflow: hidden;
    width: 100%;
    border-radius: 16px;
}

.certifications-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base: SIN grid-template-columns. Cada breakpoint las define. */
.certifications-group {
    flex: 0 0 100%;
    display: grid;
    gap: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
}

/* Centrar el último certificado si el grupo tiene un número impar */
.certifications-group .certification-card:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   TARJETA DE CERTIFICACIÓN - ESTILO IMAGEN
   ============================================================ */
.certification-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.certification-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(124, 58, 237, 0.2);
    transform: translateY(-6px) scale(1.02);
}

.cert-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.certification-card:hover .cert-image {
    transform: scale(1.08);
}

.cert-year {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cert-info {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cert-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
    min-height: 2.8em;
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cert-info p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.cert-info p i {
    color: var(--purple);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ============================================================
   CARRUSEL DE CERTIFICACIONES
   ============================================================ */
.certifications-carousel-wrapper {
    position: relative;
    padding: 20px 0 90px 0;
}

.certifications-track-container {
    overflow: hidden;
    width: 100%;
    border-radius: 16px;
}

.certifications-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.certifications-group {
    flex: 0 0 100%;
    display: grid;
    gap: 20px;
    padding: 0 10px;
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
}

/* Centrar el último certificado si el grupo tiene un número impar */
.certifications-group .certification-card:last-child:nth-child(odd):not(:first-child) {
    grid-column: 1 / -1;
    max-width: calc(50% - 10px);
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   TARJETA DE CERTIFICACIÓN
   ============================================================ */
.certification-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
}

.certification-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(124, 58, 237, 0.2);
    transform: translateY(-6px) scale(1.02);
}

/* ============================================================
   WRAPPER DE LA IMAGEN DEL CERTIFICADO
   ============================================================ */
.cert-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cert-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.4s ease;
}

.certification-card:hover .cert-image {
    transform: scale(1.08);
}

/* ============================================================
   ✅ LOGO DE LA ENTIDAD EMISORA (izquierda, mediano)
   ------------------------------------------------------------
   ✅ Posicionado arriba a la izquierda
   ✅ Tamaño mediano (52px)
   ✅ Fondo blanco para que se vea sobre cualquier imagen
   ✅ Hover: crece ligeramente
   ============================================================ */
/* ============================================================
   LOGO DE LA ENTIDAD EMISORA — SOLO BRILLO, SIN RECUADRO
   ============================================================ */
.cert-brand-logo {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 52px;
    height: 52px;
    object-fit: contain;

    /* ✅ SIN recuadro */
    background: transparent;        /* ← quita el fondo blanco */
    padding: 0;                     /* ← quita el relleno interno */
    border: none;                   /* ← quita cualquier borde */
    border-radius: 0;               /* ← quita las esquinas redondeadas */
    box-shadow: none;               /* ← quita la sombra de caja (el recuadro) */

    /* ✅ SOLO brillo alrededor del logo */
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.8))
            drop-shadow(0 0 14px rgba(6, 182, 212, 0.5));

    z-index: 3;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.certification-card:hover .cert-brand-logo {
    transform: scale(1.08);
    /* ✅ Brillo más intenso al hacer hover */
    filter: drop-shadow(0 0 10px rgba(124, 58, 237, 1))
            drop-shadow(0 0 22px rgba(6, 182, 212, 0.7));
}

/* Modo oscuro — brillo más notorio */
body[data-theme="dark"] .cert-brand-logo {
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.9))
            drop-shadow(0 0 18px rgba(6, 182, 212, 0.6));
}

body[data-theme="dark"] .certification-card:hover .cert-brand-logo {
    filter: drop-shadow(0 0 12px rgba(124, 58, 237, 1))
            drop-shadow(0 0 26px rgba(6, 182, 212, 0.8));
}

/* Modo claro — brillo más sutil */
body[data-theme="light"] .cert-brand-logo {
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(0 0 5px rgba(124, 58, 237, 0.6))
            drop-shadow(0 0 12px rgba(6, 182, 212, 0.4));
}

body[data-theme="light"] .certification-card:hover .cert-brand-logo {
    filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.9))
            drop-shadow(0 0 18px rgba(6, 182, 212, 0.6));
}

/* ============================================================
   ✅ AÑO (derecha)
   ============================================================ */
.cert-year {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    z-index: 3;
}

/* ============================================================
   INFO DE LA TARJETA
   ============================================================ */
.cert-info {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.cert-info h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
    margin: 0;
    min-height: 2.8em;
    display: flex;
    align-items: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.cert-info p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
}

.cert-info p i {
    color: var(--purple);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ============================================================
   EMISOR (texto con medalla)
   ============================================================ */
.cert-issuer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
    margin-top: auto;
    line-height: 1.3;
}

.cert-issuer-medal {
    color: var(--purple);
    font-size: 0.85rem;
    flex-shrink: 0;
}

/* ============================================================
   FLECHAS DE NAVEGACIÓN
   ============================================================ */
.cert-arrows-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 0;
}

.cert-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    min-width: 50px;
    padding: 0 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.2));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.5);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.4s ease,
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.3),
        inset 0 0 20px rgba(124, 58, 237, 0.1);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.cert-arrow-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cert-arrow-btn span {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.cert-arrow-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(6, 182, 212, 0.5));
    border-color: var(--purple);
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 0 30px rgba(124, 58, 237, 0.6),
        0 0 60px rgba(124, 58, 237, 0.3);
}

.cert-arrow-btn:hover:not(:disabled) i {
    transform: scale(1.15);
}

.cert-arrow-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.cert-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.cert-arrow-btn.cert-prev-only {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

.cert-arrow-btn.cert-prev-only span {
    display: none;
}

#btnNextCert {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================
   INDICADORES (DOTS)
   ============================================================ */
.certifications-dots {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(15, 15, 30, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 30px;
    z-index: 5;
}

.certifications-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.certifications-dot:hover {
    background: rgba(124, 58, 237, 0.6);
    transform: scale(1.3);
}

.certifications-dot.active {
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    width: 24px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}

/* ============================================================
   MODO CLARO - CERTIFICACIONES
   ============================================================ */
body[data-theme="light"] .certifications-dots {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .certifications-dot {
    background: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .certifications-dot:hover {
    background: rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .cert-arrow-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow:
        0 0 15px rgba(124, 58, 237, 0.15),
        inset 0 0 15px rgba(124, 58, 237, 0.05);
}

body[data-theme="light"] .cert-arrow-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(6, 182, 212, 0.35));
    color: #FFFFFF;
}

body[data-theme="light"] .cert-image-wrapper {
    background: linear-gradient(135deg, #f0f2f7, #e8eaf0);
}

body[data-theme="light"] .cert-year {
    background: rgba(255, 255, 255, 0.85);
    color: #1A1A2E;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

/* ============================================================
   RESPONSIVE - CERTIFICACIONES
   ============================================================ */

/* ---------- Móvil pequeño (≤479.98px) ---------- */
@media (max-width: 479.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 8px;
    }
    .cert-image-wrapper {
        height: 110px;
    }
    /* ✅ Logo más pequeño */
    .cert-brand-logo {
        width: 30px;
        height: 30px;
        padding: 3px;
        border-radius: 6px;
        top: 6px;
        left: 6px;
    }
    .cert-info {
        padding: 10px 10px;
    }
    .cert-info h4 {
        font-size: 0.72rem;
        min-height: auto;
        line-height: 1.25;
    }
    .cert-info p {
        font-size: 0.65rem;
        gap: 4px;
    }
    .cert-info p i {
        font-size: 0.68rem;
    }
    .cert-year {
        font-size: 0.6rem;
        padding: 3px 8px;
        top: 6px;
        right: 6px;
    }
    .cert-arrows-wrapper {
        gap: 10px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .cert-arrow-btn {
        height: 42px;
        padding: 0 18px;
        font-size: 0.85rem;
    }
    .cert-arrow-btn span {
        font-size: 0.78rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 70px;
    }
    .certifications-dot {
        width: 7px;
        height: 7px;
    }
    .certifications-dot.active {
        width: 22px;
    }
    .certifications-group .certification-card:last-child:nth-child(odd):not(:first-child) {
        max-width: 100%;
    }
}

/* ---------- Móvil mediano (480px - 767.98px) ---------- */
@media (min-width: 480px) and (max-width: 767.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 12px;
    }
    .cert-image-wrapper {
        height: 140px;
    }
    /* ✅ Logo mediano-pequeño */
    .cert-brand-logo {
        width: 38px;
        height: 38px;
        padding: 4px;
        border-radius: 8px;
    }
    .cert-info {
        padding: 14px 14px;
    }
    .cert-info h4 {
        font-size: 0.82rem;
        min-height: 2.4em;
        line-height: 1.3;
    }
    .cert-info p {
        font-size: 0.72rem;
    }
    .cert-year {
        font-size: 0.68rem;
        padding: 4px 10px;
    }
    .cert-arrows-wrapper {
        gap: 10px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .cert-arrow-btn {
        height: 42px;
        padding: 0 16px;
        font-size: 0.85rem;
    }
    .cert-arrow-btn span {
        font-size: 0.75rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 75px;
    }
}

/* ---------- Tablet (768px - 991.98px) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
    }
    .cert-image-wrapper {
        height: 170px;
    }
    /* ✅ Logo mediano */
    .cert-brand-logo {
        width: 46px;
        height: 46px;
        padding: 5px;
        border-radius: 9px;
    }
    .cert-info {
        padding: 16px 18px;
    }
    .cert-info h4 {
        font-size: 0.92rem;
        min-height: 2.6em;
    }
    .cert-arrows-wrapper {
        gap: 12px;
        margin-top: 30px;
    }
    .cert-arrow-btn {
        height: 46px;
        padding: 0 20px;
        font-size: 0.95rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 85px;
    }
}

/* ---------- Laptop y PC (≥992px) ---------- */
@media (min-width: 992px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 0 20px;
    }
    .cert-image-wrapper {
        height: 200px;
    }
    /* ✅ Logo mediano-grande */
    .cert-brand-logo {
        width: 52px;
        height: 52px;
        padding: 6px;
        border-radius: 10px;
    }
    .cert-info {
        padding: 20px 24px;
    }
    .cert-info h4 {
        font-size: 1rem;
        min-height: 2.8em;
        line-height: 1.4;
    }
    .cert-info p {
        font-size: 0.85rem;
    }
    .cert-info p i {
        font-size: 0.88rem;
    }
    .cert-year {
        font-size: 0.78rem;
        padding: 6px 14px;
    }
    .cert-arrow-btn {
        height: 50px;
        padding: 0 22px;
        font-size: 1rem;
    }
    .cert-arrow-btn span {
        font-size: 0.9rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 50px;
        min-width: 50px;
        height: 50px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 90px;
    }
    .certifications-dot {
        width: 8px;
        height: 8px;
    }
    .certifications-dot.active {
        width: 24px;
    }
}

/* ---------- PC grande (≥1400px) ---------- */
@media (min-width: 1400px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0 30px;
    }
    .cert-image-wrapper {
        height: 220px;
    }
}

/* ============================================================
   FLECHAS DE NAVEGACIÓN
   ============================================================ */
.cert-arrows-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 40px;
    margin-bottom: 0;
}

.cert-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    min-width: 50px;
    padding: 0 22px;
    border-radius: 50px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.2));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.5);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        border-color 0.4s ease,
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease,
        width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.35s ease;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.3),
        inset 0 0 20px rgba(124, 58, 237, 0.1);
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
}

.cert-arrow-btn i {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.cert-arrow-btn span {
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: opacity 0.3s ease, max-width 0.35s ease;
    opacity: 1;
    max-width: 200px;
    overflow: hidden;
    display: inline-block;
}

.cert-arrow-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.5), rgba(6, 182, 212, 0.5));
    border-color: var(--purple);
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 0 30px rgba(124, 58, 237, 0.6),
        0 0 60px rgba(124, 58, 237, 0.3);
}

.cert-arrow-btn:hover:not(:disabled) i {
    transform: scale(1.15);
}

.cert-arrow-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.cert-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.cert-arrow-btn.cert-prev-only {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

.cert-arrow-btn.cert-prev-only span {
    opacity: 0;
    max-width: 0;
    margin: 0;
}

#btnNextCert {
    width: 50px;
    min-width: 50px;
    height: 50px;
    padding: 0;
    border-radius: 50%;
}

/* ============================================================
   INDICADORES (DOTS)
   ============================================================ */
.certifications-dots {
    position: absolute;
    bottom: 5px;

    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(15, 15, 30, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 30px;
    z-index: 5;
}

.certifications-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.certifications-dot:hover {
    background: rgba(124, 58, 237, 0.6);
    transform: scale(1.3);
}

.certifications-dot.active {
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    width: 24px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}

/* ============================================================
   MODO CLARO - CERTIFICACIONES
   ============================================================ */
body[data-theme="light"] .certifications-dots {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .certifications-dot {
    background: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .certifications-dot:hover {
    background: rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .cert-arrow-btn {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    color: var(--purple);
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow:
        0 0 15px rgba(124, 58, 237, 0.15),
        inset 0 0 15px rgba(124, 58, 237, 0.05);
}

body[data-theme="light"] .cert-arrow-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(6, 182, 212, 0.35));
    color: #FFFFFF;
}

body[data-theme="light"] .cert-image-wrapper {
    background: linear-gradient(135deg, #f0f2f7, #e8eaf0);
}

body[data-theme="light"] .cert-year {
    background: rgba(255, 255, 255, 0.85);
    color: #1A1A2E;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .research-card {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 245, 255, 0.98) 100%
    );
    box-shadow:
        0 10px 30px rgba(124, 58, 237, 0.08),
        var(--glass-shadow);
}

body[data-theme="light"] .research-card:hover {
    box-shadow:
        0 10px 30px rgba(124, 58, 237, 0.15),
        0 0 40px rgba(124, 58, 237, 0.1),
        var(--glass-shadow);
}

body[data-theme="light"] .research-icon-wrapper {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.1),
        rgba(6, 182, 212, 0.1)
    );
    border-color: rgba(124, 58, 237, 0.3);
    animation: none;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
}

body[data-theme="light"] .research-seal {
    background: linear-gradient(
        135deg,
        rgba(124, 58, 237, 0.08),
        rgba(6, 182, 212, 0.08)
    );
    border-color: rgba(124, 58, 237, 0.3);
}

/* ============================================================
   RESPONSIVE - FORMACIÓN + CERTIFICACIONES
   Mobile-first: 2 columnas en TODOS los tamaños
   ============================================================ */

/* ============================================================
   MÓVIL PEQUEÑO (hasta 479.98px) - 2 columnas
   ============================================================ */
@media (max-width: 479.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 8px;
    }
    .cert-image-wrapper {
        height: 110px;
    }
    .cert-info {
        padding: 10px 10px;
    }
    .cert-info h4 {
        font-size: 0.72rem;
        min-height: auto;
        line-height: 1.25;
    }
    .cert-info p {
        font-size: 0.65rem;
        gap: 4px;
    }
    .cert-info p i {
        font-size: 0.68rem;
    }
    .cert-year {
        font-size: 0.6rem;
        padding: 3px 8px;
        top: 8px;
        right: 8px;
    }
    .cert-arrows-wrapper {
        gap: 10px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .cert-arrow-btn {
        height: 42px;
        padding: 0 18px;
        font-size: 0.85rem;
    }
    .cert-arrow-btn span {
        font-size: 0.78rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 70px;
    }
    .certifications-dot {
        width: 7px;
        height: 7px;
    }
    .certifications-dot.active {
        width: 22px;
    }

    /* Centrado del último certificado en móvil pequeño */
    .certifications-group .certification-card:last-child:nth-child(odd):not(:first-child) {
        max-width: 100%;
    }

    /* Registro de investigadora */
    .research-card {
        padding: 25px 20px;
    }
    .research-card-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .research-icon-wrapper {
        width: 80px;
        height: 80px;
    }
    .research-icon-wrapper i {
        font-size: 2.2rem;
    }
    .research-subtitle {
        justify-content: center;
    }
    .research-badges {
        justify-content: center;
    }
    .research-title {
        font-size: 1.15rem;
    }
    .research-description {
        font-size: 0.85rem;
    }
    .research-badge {
        font-size: 0.72rem;
        padding: 5px 12px;
    }
    .research-seal {
        display: none;
    }
}

/* ============================================================
   MÓVIL MEDIANO Y GRANDE (480px - 767.98px) - 2 columnas
   ============================================================ */
@media (min-width: 480px) and (max-width: 767.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 12px;
    }
    .cert-image-wrapper {
        height: 140px;
    }
    .cert-info {
        padding: 14px 14px;
    }
    .cert-info h4 {
        font-size: 0.82rem;
        min-height: 2.4em;
        line-height: 1.3;
    }
    .cert-info p {
        font-size: 0.72rem;
    }
    .cert-year {
        font-size: 0.68rem;
        padding: 4px 10px;
    }
    .cert-arrows-wrapper {
        gap: 10px;
        margin-top: 25px;
        flex-wrap: wrap;
    }
    .cert-arrow-btn {
        height: 42px;
        padding: 0 16px;
        font-size: 0.85rem;
    }
    .cert-arrow-btn span {
        font-size: 0.75rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 75px;
    }

    /* Registro de investigadora */
    .research-card {
        padding: 30px 25px;
    }
    .research-card-content {
        gap: 20px;
    }
    .research-icon-wrapper {
        width: 70px;
        height: 70px;
        border-radius: 18px;
    }
    .research-icon-wrapper i {
        font-size: 2rem;
    }
    .research-seal {
        width: 80px;
        height: 80px;
    }
    .research-seal i {
        font-size: 2rem;
    }
    .research-title {
        font-size: 1.3rem;
    }
}

/* ============================================================
   TABLET (768px - 991.98px) - 2 columnas
   ============================================================ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 20px;
    }
    .cert-image-wrapper {
        height: 170px;
    }
    .cert-info {
        padding: 16px 18px;
    }
    .cert-info h4 {
        font-size: 0.92rem;
        min-height: 2.6em;
    }
    .cert-arrows-wrapper {
        gap: 12px;
        margin-top: 30px;
    }
    .cert-arrow-btn {
        height: 46px;
        padding: 0 20px;
        font-size: 0.95rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 46px;
        min-width: 46px;
        height: 46px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 85px;
    }
}

/* ============================================================
   LAPTOP Y PC (992px en adelante) - 2 columnas
   ============================================================ */
@media (min-width: 992px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 0 20px;
    }
    .cert-image-wrapper {
        height: 200px;
    }
    .cert-info {
        padding: 20px 24px;
    }
    .cert-info h4 {
        font-size: 1rem;
        min-height: 2.8em;
        line-height: 1.4;
    }
    .cert-info p {
        font-size: 0.85rem;
    }
    .cert-info p i {
        font-size: 0.88rem;
    }
    .cert-year {
        font-size: 0.78rem;
        padding: 6px 14px;
    }
    .cert-arrow-btn {
        height: 50px;
        padding: 0 22px;
        font-size: 1rem;
    }
    .cert-arrow-btn span {
        font-size: 0.9rem;
    }
    .cert-arrow-btn.cert-prev-only,
    #btnNextCert {
        width: 50px;
        min-width: 50px;
        height: 50px;
        padding: 0;
    }
    .certifications-carousel-wrapper {
        padding-bottom: 90px;
    }
    .certifications-dot {
        width: 8px;
        height: 8px;
    }
    .certifications-dot.active {
        width: 24px;
    }
}

/* ============================================================
   PC GRANDE (≥ 1400px) - 2 columnas
   ============================================================ */
@media (min-width: 1400px) {
    .certifications-group {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        padding: 0 30px;
    }
    .cert-image-wrapper {
        height: 220px;
    }
}
/* ============================================================
   23. CONTACTO - ESTILO LET'S CONNECT
   ============================================================ */
.section-contact {
    position: relative;
    padding: 100px 0;
    background: var(--section-bg);
    border-top: 1px solid var(--glass-border);
    overflow: hidden;
}

/* --- Columna izquierda --- */
.contact-eyebrow {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--purple);
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.contact-eyebrow::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    border-radius: 2px;
}

.contact-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--text-color);
}

.contact-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 500px;
    margin-bottom: 30px;
}

/* --- Tarjeta de valor --- */
.contact-value-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.contact-value-card:hover {
    border-color: var(--purple);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.2);
}

.contact-value-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(6, 182, 212, 0.2));
    border: 1px solid rgba(124, 58, 237, 0.4);
}

.contact-value-icon i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.contact-value-text h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-color);
}

.contact-value-text p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-muted);
    margin: 0;
}

/* --- Fila de características --- */
.contact-features-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.contact-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 18px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.contact-feature:hover {
    border-color: var(--purple);
    background: rgba(124, 58, 237, 0.08);
    transform: translateY(-3px);
}

.contact-feature i {
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    flex-shrink: 0;
}

.contact-feature h5 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-color);
}

.contact-feature p {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

/* --- Columna derecha: Canales --- */
.contact-channels-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-color);
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.contact-channels-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, var(--purple), transparent);
}

.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    margin-bottom: 12px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

.contact-channel-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(6, 182, 212, 0.1));
    transition: width 0.4s ease;
    z-index: 0;
}

.contact-channel-item:hover::before {
    width: 100%;
}

.contact-channel-item:hover {
    border-color: var(--purple);
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3), 0 0 40px rgba(124, 58, 237, 0.2);
    transform: translateX(5px);
}

.contact-channel-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(6, 182, 212, 0.15));
    border: 1px solid rgba(124, 58, 237, 0.3);
    z-index: 1;
    transition: all 0.3s ease;
}

.contact-channel-icon i {
    font-size: 1.4rem;
    color: var(--purple);
}

.contact-channel-item:hover .contact-channel-icon {
    background: var(--gradient-main);
}

.contact-channel-item:hover .contact-channel-icon i {
    color: white;
}

.contact-channel-info {
    flex: 1;
    z-index: 1;
}

.contact-channel-info h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--text-color);
}

.contact-channel-info p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* --- Disponibilidad especial --- */
.contact-channel-availability {
    align-items: center;
}

.contact-channel-availability .contact-channel-info {
    flex: 1;
}

.availability-badge-pill {
    background: rgba(37, 211, 102, 0.15);
    border: 1px solid rgba(37, 211, 102, 0.4);
    color: #25D366;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    z-index: 1;
    animation: availabilityPill 2s infinite;
}

@keyframes availabilityPill {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .contact-title {
        font-size: 2.8rem;
    }

    .contact-features-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .section-contact {
        padding: 60px 0;
    }

    .contact-title {
        font-size: 2.2rem;
    }

    .contact-description {
        font-size: 0.95rem;
    }

    .contact-value-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-channels-title {
        margin-top: 40px;
        font-size: 1rem;
    }

    .contact-channel-item {
        padding: 15px;
    }
}

@media (max-width: 480px) {
    .contact-title {
        font-size: 1.8rem;
    }

    .contact-feature {
        padding: 12px;
    }

    .contact-feature i {
        font-size: 1.2rem;
    }

    .contact-feature h5 {
        font-size: 0.85rem;
    }

    .contact-feature p {
        font-size: 0.75rem;
    }

    .contact-channel-icon {
        width: 40px;
        height: 40px;
    }

    .contact-channel-icon i {
        font-size: 1.1rem;
    }

    .availability-badge-pill {
        font-size: 0.65rem;
        padding: 4px 8px;
    }
}

/* ============================================================
   24. FOOTER - PEGADO AL FONDO, ANCHO COMPLETO
   ============================================================ */

/* ============================================================
   24. FOOTER - PEGADO AL FONDO, ANCHO COMPLETO
   ============================================================ */

/* ============================================================
   24. FOOTER - PEGADO AL FONDO, ANCHO COMPLETO
   ============================================================ */
.footer
{
    position: relative;
    bottom: 0;              /* ✅ Pegado al borde inferior */
    left: 0;                /* ✅ Sin margen izquierdo */
    right: 0;               /* ✅ Sin margen derecho */
    top: auto;              /* ✅ No pegado arriba */
    width: 100%;            /* ✅ Ancho completo */
    max-width: 100%;
    margin: 0;              /* ✅ Sin márgenes (ni auto, ni negativos) */
    padding: 12px 30px;     /* Solo padding interno */
    box-sizing: border-box;

    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--glass-border);
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
    z-index: 10;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

.footer-text {
    font-size: 0.85rem;
    margin: 0;
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    line-height: 1.5;

}


/* ============================================================
   ✅ BAJAR TODO EL CONTENIDO INTERNO DEL FOOTER
   ============================================================ */
.footer-content {
    transform: translateY(1px) !important;
}




.footer-author {
    color: var(--purple);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent;
}

.footer-author:hover {
    color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.footer-github-icon {
    font-size: 1.05rem;
    color: var(--text-color);
    transition: all 0.3s ease;
    margin: 0 4px;
}

.footer-github-icon:hover {
    color: var(--purple);
    transform: scale(1.15) translateY(-2px);
}




/* ============================================================
   RESPONSIVE FOOTER - ANCHO COMPLETO SIEMPRE
   ------------------------------------------------------------
   ✅ Sin márgenes laterales en ningún breakpoint
   ✅ Conserva margin-top: auto para empujar al fondo del body
   ✅ Width 100% forzado para que llegue a los bordes
   ============================================================ */

/* Tablet (≤ 991.98px) */
@media (max-width: 991.98px) {
    .footer,
    footer.footer,
    #mainFooter {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: auto !important;       /* ✅ conserva el empuje al fondo */
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px 20px;
    }

    .footer-content {
        padding: 0 15px;
    }

    .footer-text {
        font-size: 0.8rem;
    }

    .footer-github-icon {
        font-size: 1rem;
    }
}

/* Móvil (≤ 480px) */
@media (max-width: 480px) {
    .footer,
    footer.footer,
    #mainFooter {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: auto !important;       /* ✅ conserva el empuje al fondo */
        margin-bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 10px 15px;
    }

    .footer-content {
        padding: 0 10px;
    }

    .footer-text {
        font-size: 0.72rem;
        gap: 4px;
        line-height: 1.6;
    }

    .footer-github-icon {
        font-size: 0.9rem;
        margin: 0 2px;
    }
}




/* ============================================================
   MODO CLARO - Footer
   ============================================================ */
body[data-theme="light"] .footer {
    background: rgba(245, 240, 240, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   INTERRUPTORES: POSICIÓN NORMAL EN PC
   ============================================================ */
.navbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ============================================================
   NAVEGACIÓN: CENTRADA EN PC
   ============================================================ */
.navbar-nav {
    display: flex;
    justify-content: center;
    flex: 1;
}

/* ============================================================
   MENÚ DESPLEGABLE MÓVIL (NUEVO DISEÑO)
   ============================================================ */

/* Ocultar el navbar tradicional en móviles */
@media (max-width: 991.98px) {
    .navbar {
        display: none !important;
    }
}

/* ============================================================
   NAVBAR MÓVIL (SUPERIOR) - CORREGIDO
   ============================================================ */
.navbar-mobile {
    position: fixed;
    top: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    z-index: 3000;
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 5px;
    padding: 8px 15px;
    box-shadow: var(--glass-shadow);
    transition: all 0.3s ease;
}




.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0px;
    max-width: 100%;
}

.navbar-mobile .navbar-banner img {
    max-height: 35px;
    width: auto;
}

/* Controles a la derecha */
.mobile-nav-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* INTERRUPTORES - MANTENER ESTILOS DE PC (RECTANGULARES) */
.mobile-nav-controls .theme-switch,
.mobile-nav-controls .lang-toggle {
    height: 34px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow: 0 0 5px rgba(124, 58, 237, 0.2);
    background: transparent;
}

.mobile-nav-controls .theme-switch {
    display: flex;
    align-items: center;
    width: 64px;
}

.mobile-nav-controls .theme-switch .btn-theme {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 0.9rem;
    cursor: pointer;
}

.mobile-nav-controls .theme-switch .btn-theme.theme-sun {
    border-right: 1px solid rgba(124, 58, 237, 0.4);
}

.mobile-nav-controls .theme-switch .btn-theme.active {
    background: var(--gradient-btn);
    color: #FFFFFF;
}

.mobile-nav-controls .theme-switch .btn-theme.active i {
    color: #FFFFFF;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.mobile-nav-controls .lang-toggle {
    display: flex;
    align-items: center;
    width: 70px;
}

.mobile-nav-controls .lang-toggle .btn-lang {
    width: 35px;
    height: 32px;
    min-width: 35px;
    padding: 0 5px;
    font-size: 0.75rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
}

.mobile-nav-controls .lang-toggle .btn-lang.active {
    background: var(--gradient-btn);
    color: #FFFFFF;
}

.mobile-nav-controls .lang-toggle .btn-lang:first-child {
    border-right: 1px solid rgba(124, 58, 237, 0.4);
}

/* LÍNEA DIVISORIA ENTRE INTERRUPTORES Y CASA */
.nav-divider {
    width: 1px;
    height: 30px;
    background: rgba(124, 58, 237, 0.4);
    margin: 0 2px 0 15px;   /* top right bottom left */
}



/* BOTÓN DE TRES PUNTOS (SIN RELLENO) */
.menu-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    width: 30px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 10px;
}

.menu-btn i {
    font-size: 1.4rem;
    color: var(--text-color);
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu-btn:hover {
    color: var(--purple);
}

.menu-btn:hover i {
    color: var(--purple);
}

.menu-btn.active i {
    color: var(--purple);
    transform: rotate(90deg);
}

/* MODO CLARO - AJUSTES */
body[data-theme="light"] .navbar-mobile {
    background: rgba(245, 240, 240, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
body[data-theme="light"] .menu-btn i {
    color: #000000;
}

body[data-theme="light"] .home-icon {
    color: #000000;
}

body[data-theme="light"] .home-icon:hover {
    color: #7C3AED;
}

body[data-theme="light"] .nav-divider {
    background: rgba(124, 58, 237, 0.4);
}

/* MODO OSCURO - AJUSTES */
body[data-theme="dark"] .navbar-mobile {
    background: rgba(10, 10, 20, 0.45);   /* más transparente */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body[data-theme="dark"] .menu-btn i {
    color: #FFFFFF;
}

body[data-theme="dark"] .home-icon {
    color: #FFFFFF;
}

body[data-theme="dark"] .home-icon:hover {
    color: #A78BFA;
}

/* ============================================================
   MENÚ DESPLEGABLE (CORREGIDO)
   ============================================================ */
.dropdown-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 5000; /* AUMENTADO de 2000 a 5000 para estar POR ENCIMA del navbar */
    display: none;
}

.dropdown-menu-mobile.open {
    display: block;
}

.dropdown-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
}

/* Panel del menú desplegable */
.dropdown-panel {
    position: absolute;
    top: 75px;
    right: 20px;
    width: 280px;
    max-width: 90%;
    background: rgba(15, 15, 30, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(124, 58, 237, 0.2);
    padding: 10px 0;
    z-index: 2;
    animation: dropdownIn 0.3s ease;
    overflow: visible;                 /* ← CLAVE: permite que el piquito se vea */
}

body[data-theme="light"] .dropdown-panel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(124, 58, 237, 0.2);
}

/* ============================================================
   FIX — Solo difumina el contenido, NO el navbar
   ============================================================ */

/* 1. El menú completo por ENCIMA del navbar, SIN bloquear clics */
.dropdown-menu-mobile {
    z-index: 7000 !important;
    pointer-events: none;                  /* ← no bloquea clics del navbar */
}

.dropdown-menu-mobile.open {
    pointer-events: none;                  /* ← TAMBIÉN none cuando está abierto */
}

/* 2. El navbar POR ENCIMA del overlay (nítido y clickeable) */
.navbar-mobile {
    z-index: 7500 !important;
    pointer-events: auto !important;       /* ← siempre clickeable */
}

.navbar-mobile * {
    pointer-events: auto !important;       /* ← hijos del navbar también */
}

/* 3. El overlay solo cubre DEBAJO del navbar */
.dropdown-overlay {
    position: absolute;
    top: 75px !important;                  /* ← debe coincidir con height */
    left: 0;
    width: 100%;
    height: calc(100vh - 62px) !important; /* ← mismo valor que top */
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
    pointer-events: auto;                  /* ← captura clics solo debajo del navbar */
}

/* 4. El panel y el piquito */
.dropdown-panel {
    overflow: visible !important;
    z-index: 7002 !important;
    pointer-events: auto;                  /* ← captura clics del panel */
}

.dropdown-panel::after {
    content: '';
    position: absolute;
    top: -12px;
    right: 30px;
    width: 20px;
    height: 20px;
    background: rgba(15, 15, 30, 0.95);
    border-top: 1px solid rgba(124, 58, 237, 0.4);
    border-left: 1px solid rgba(124, 58, 237, 0.4);
    transform: rotate(45deg);
    transform-origin: center;
    z-index: 9999 !important;
    pointer-events: none;
    display: block;
    visibility: visible;
    opacity: 1;
}

body[data-theme="light"] .dropdown-panel::after {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(124, 58, 237, 0.4);
    border-left: 1px solid rgba(124, 58, 237, 0.4);
}

/* 5. Animación del dropdown */
@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 6. Ocultar el notch viejo (ya no se usa) */
/*.dropdown-notch {
    display: none !important;
}


/* ============================================================
   PIQUITO (triángulo) QUE APUNTA HACIA LA X DEL MENÚ MÓVIL
   ------------------------------------------------------------
   ✅ Apunta hacia arriba (donde está el botón de la X)
   ✅ Posicionado a la derecha, alineado con el botón
   ✅ Visible en modo claro y oscuro
   ============================================================ */
.dropdown-panel::after {
    content: '';
    position: absolute;
    top: -10px;                    /* ← sobresale por encima del panel */
    right: 28px;                   /* ← alineado con el botón de los 3 puntos */
    width: 20px;
    height: 20px;

    /* ✅ Color de fondo igual al panel (modo oscuro por defecto) */
    background: rgba(15, 15, 30, 0.95);

    /* ✅ Solo los bordes superior e izquierdo para simular el piquito */
    border-top: 1px solid rgba(124, 58, 237, 0.4);
    border-left: 1px solid rgba(124, 58, 237, 0.4);

    /* ✅ Rotación 45° para formar el triángulo */
    transform: rotate(45deg);
    transform-origin: center;

    /* ✅ Por encima de todo */
    z-index: 10000 !important;
    pointer-events: none;

    /* ✅ Asegurar que se vea */
    display: block;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}

/* ✅ Modo claro: piquito blanco */
body[data-theme="light"] .dropdown-panel::after {
    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(124, 58, 237, 0.4);
    border-left: 1px solid rgba(124, 58, 237, 0.4);
}

.dropdown-menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 7000 !important;
    pointer-events: none;
    /* ✅ CRÍTICO: NO debe tener overflow: hidden */
    overflow: visible !important;
}


/* 7. Elementos del menú */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    pointer-events: auto;                  /* ← captura clics */
}

.dropdown-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

.dropdown-item:active {
    background: rgba(124, 58, 237, 0.2);
}

.dropdown-item.active {
    background: rgba(124, 58, 237, 0.15);
}

.dropdown-item.active .arrow {
    color: var(--purple);
    transform: translateX(5px);
}

/* ============================================================
   ✅ ICONOS DEL MENÚ DESPLEGABLE MÓVIL
   ------------------------------------------------------------
   ☀️ Modo claro  → morado sólido #7C3AED
   🌙 Modo oscuro → degradado morado → cyan
   ============================================================ */

/* ============================================
   🌙 MODO OSCURO — ICONOS CON DEGRADADO
   ============================================ */
body[data-theme="dark"] .dropdown-item i:first-child {
    background: linear-gradient(135deg, var(--purple), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

body[data-theme="dark"] .dropdown-item:hover i:first-child {
    background: linear-gradient(135deg, #A78BFA, #22D3EE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

body[data-theme="dark"] .dropdown-item.active i:first-child {
    background: linear-gradient(135deg, #A78BFA, #22D3EE);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}


/* ============================================
   ☀️ MODO CLARO — ICONOS MORADO SÓLIDO
   ============================================ */
body[data-theme="light"] .dropdown-item i:first-child {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    color: #7C3AED;
}

body[data-theme="light"] .dropdown-item:hover i:first-child {
    color: #6D28D9;
}

body[data-theme="light"] .dropdown-item.active i:first-child {
    color: #7C3AED;
}


/* ============================================
   ESTRUCTURA BASE DEL ITEM
   ============================================ */
.dropdown-item span {
    flex: 1;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
}

.dropdown-item .arrow {
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.dropdown-item:hover .arrow {
    transform: translateX(5px);
    color: var(--purple);
}


/* ============================================
   SEPARADORES ENTRE OPCIONES
   ============================================ */
.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), transparent);
    margin: 0 15px;
}


/* ============================================
   ☀️ MODO CLARO — MENÚ DESPLEGABLE
   ============================================ */
body[data-theme="light"] .dropdown-overlay {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body[data-theme="light"] .dropdown-panel {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(124, 58, 237, 0.4);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .dropdown-notch {
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid rgba(124, 58, 237, 0.4);
    border-top: 1px solid rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .dropdown-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

body[data-theme="light"] .dropdown-item:active {
    background: rgba(124, 58, 237, 0.2);
}

body[data-theme="light"] .dropdown-item.active {
    background: rgba(124, 58, 237, 0.15);
}

body[data-theme="light"] .dropdown-item span {
    color: #000000;
}

body[data-theme="light"] .dropdown-item .arrow {
    color: rgba(0, 0, 0, 0.5);
}

body[data-theme="light"] .dropdown-item:hover .arrow {
    color: #7C3AED;
}

body[data-theme="light"] .dropdown-divider {
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), transparent);
}

/* ============================================================
   BOTÓN DE TRES PUNTOS CON CÍRCULO NEÓN (CORREGIDO)
   ============================================================ */
.menu-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001; /* Cambiar de 3001 a 1001 */
}

/* Icono de tres puntos */
.menu-btn-icon {
    font-size: 1.5rem;
    color: var(--text-color);
    transition: all 0.3s ease;
    z-index: 2;
}

/* Icono de X (visible cuando está abierto) */
.menu-btn-close {
    font-size: 1.3rem;
    color: var(--purple);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
    z-index: 2;
    position: absolute;
    pointer-events: auto;
}

/* Círculo que rodea el botón (solo visible cuando está abierto) */
.menu-btn-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 45px;
    height: 45px;
    border: 2px solid var(--purple);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.6), 0 0 30px rgba(124, 58, 237, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: auto;
}

/* Cuando el botón está activo (menú abierto) */
.menu-btn.active .menu-btn-icon {
    opacity: 0;
    transform: scale(0);
}

.menu-btn.active .menu-btn-circle {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.menu-btn.active .menu-btn-close {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* Hover en estado normal (solo tres puntos) */
.menu-btn:not(.active):hover .menu-btn-icon {
    color: var(--purple);
}

/* MODO CLARO - AJUSTES */
body[data-theme="light"] .menu-btn-circle {
    border-color: var(--purple);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.6), 0 0 30px rgba(124, 58, 237, 0.3);
}

body[data-theme="light"] .menu-btn-close {
    color: var(--purple);
}

body[data-theme="light"] .menu-btn:not(.active):hover .menu-btn-icon {
    color: var(--purple);
}

/* ============================================================
   NAVBAR MÓVIL - POR ENCIMA DEL OVERLAY
   ============================================================ */
.navbar-mobile {
    z-index: 3000;
}


/* ============================================================
   NAVBAR MÓVIL — MÁS ARRIBA + SIN LÍNEA MORADA
   ------------------------------------------------------------
   ✅ Navbar un poquitico más arriba
   ✅ Sin línea morada horizontal
   ✅ Navbar arrimado a la derecha
   ✅ Dropdown + piquito alineados
   ✅ Breakpoints: 991.98px → 768px → 576px → 480px → 360px
   ============================================================ */

/* ============================================================
   ELIMINAR LÍNEA MORADA HORIZONTAL
   ============================================================ */
body,
main,
.main-wrapper,
.hero-section,
.section,
.section-projects,
.section-education,
.section-contact {
    border-top: none !important;
}

body::before,
body::after,
main::before,
main::after {
    border: none !important;
    display: none !important;
}

/* ============================================================
   BASE (≤ 991.98px) — Tablet y móvil
   ------------------------------------------------------------
   ✅ MÁS ARRIBA: top 4px
   ✅ MÁS A LA DERECHA: left 20px | right 5px
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar {
        display: none !important;
    }

    .navbar-mobile {
        position: fixed;
        top: 4px;                     /* ⬅️ MÁS ARRIBA (antes 6px) */
        left: 20px;
        right: 5px;
        width: auto;
        z-index: 7500 !important;
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid var(--glass-border);
        border-radius: 5px;
        padding: 10px 15px;
        box-shadow: var(--glass-shadow);
        transition: all 0.3s ease;
        pointer-events: auto !important;
    }

    .navbar-mobile * {
        pointer-events: auto !important;
    }

    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        max-width: 100%;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 28px !important;
        width: auto !important;
    }

    .mobile-nav-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    .nav-divider {
        width: 1px;
        height: 30px;
        background: rgba(124, 58, 237, 0.4);
        margin: 0 2px 0 15px;
    }

    .mobile-nav-controls .btn-theme-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.1rem;
    }

    .mobile-nav-controls .btn-lang-toggle {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.8rem;
    }

    .menu-btn {
        width: 42px;
        height: 42px;
        margin-left: 10px;
    }

    .menu-btn-icon {
        font-size: 1.4rem;
    }

    .menu-btn-close {
        font-size: 1.25rem;
    }

    .menu-btn-circle {
        width: 42px;
        height: 42px;
    }

    .dropdown-panel {
        top: 76px;
        right: 15px;
        width: 280px;
        max-width: 90%;
    }

    .dropdown-panel::after {
        top: -10px;
        right: 22px;
        width: 20px;
        height: 20px;
    }

    .dropdown-overlay {
        top: 76px !important;
        height: calc(100vh - 76px) !important;
    }
}

/* ============================================================
   TEMAS
   ============================================================ */
body[data-theme="light"] .navbar-mobile {
    background: rgba(245, 240, 240, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body[data-theme="dark"] .navbar-mobile {
    background: rgba(10, 10, 20, 0.45);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body[data-theme="light"] .nav-divider {
    background: rgba(124, 58, 237, 0.4);
}

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   ✅ MÁS ARRIBA: top 2px
   ============================================================ */
@media (max-width: 768px) {
    .navbar-mobile {
        top: 2px;                     /* ⬅️ MÁS ARRIBA (antes 4px) */
        left: 16px;
        right: 4px;
        padding: 10px 12px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 24px !important;
    }

    .mobile-nav-controls {
        gap: 6px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 9px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1rem;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.75rem;
    }

    .nav-divider {
        height: 26px;
        margin: 0 2px 0 12px;
    }

    .menu-btn {
        width: 38px;
        height: 38px;
        margin-left: 8px;
    }

    .menu-btn-icon {
        font-size: 1.25rem;
    }

    .menu-btn-close {
        font-size: 1.15rem;
    }

    .menu-btn-circle {
        width: 38px;
        height: 38px;
    }

    .dropdown-panel {
        top: 72px;
        right: 12px;
        width: 270px;
        max-width: 92%;
    }

    .dropdown-panel::after {
        top: -10px;
        right: 18px;
        width: 18px;
        height: 18px;
    }

    .dropdown-overlay {
        top: 72px !important;
        height: calc(100vh - 72px) !important;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ------------------------------------------------------------
   ✅ MÁS ARRIBA: top 1px
   ============================================================ */
@media (max-width: 576px) {
    .navbar-mobile {
        top: 1px;                     /* ⬅️ MÁS ARRIBA (antes 3px) */
        left: 14px;
        right: 3px;
        padding: 9px 11px;
        border-radius: 4px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 22px !important;
    }

    .mobile-nav-controls {
        gap: 5px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 34px;
        height: 34px;
        min-width: 34px;
        border-radius: 8px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.95rem;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.72rem;
    }

    .nav-divider {
        height: 24px;
        margin: 0 2px 0 10px;
    }

    .menu-btn {
        width: 36px;
        height: 36px;
        margin-left: 6px;
    }

    .menu-btn-icon {
        font-size: 1.15rem;
    }

    .menu-btn-close {
        font-size: 1.05rem;
    }

    .menu-btn-circle {
        width: 36px;
        height: 36px;
    }

    .dropdown-panel {
        top: 68px;
        right: 10px;
        width: 260px;
        max-width: 94%;
    }

    .dropdown-panel::after {
        top: -9px;
        right: 16px;
        width: 18px;
        height: 18px;
    }

    .dropdown-overlay {
        top: 68px !important;
        height: calc(100vh - 68px) !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   ✅ MÁS ARRIBA: top 0px
   ============================================================ */
@media (max-width: 480px) {
    .navbar-mobile {
        top: 0px;                     /* ⬅️ MÁS ARRIBA (antes 2px) */
        left: 12px;
        right: 3px;
        padding: 8px 10px;
        border-radius: 4px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 20px !important;
    }

    .mobile-nav-controls {
        gap: 4px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 8px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.9rem;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.68rem;
    }

    .nav-divider {
        height: 22px;
        margin: 0 2px 0 8px;
    }

    .menu-btn {
        width: 34px;
        height: 34px;
        margin-left: 5px;
    }

    .menu-btn-icon {
        font-size: 1.05rem;
    }

    .menu-btn-close {
        font-size: 0.95rem;
    }

    .menu-btn-circle {
        width: 34px;
        height: 34px;
    }

    .dropdown-panel {
        top: 66px;
        right: 8px;
        width: 250px;
        max-width: 95%;
        border-radius: 15px;
    }

    .dropdown-panel::after {
        top: -9px;
        right: 14px;
        width: 16px;
        height: 16px;
    }

    .dropdown-overlay {
        top: 66px !important;
        height: calc(100vh - 66px) !important;
    }

    .dropdown-item {
        padding: 12px 15px;
    }

    .dropdown-item i:first-child {
        font-size: 1.1rem;
        width: 25px;
    }

    .dropdown-item span {
        font-size: 0.9rem;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   ✅ MÁS ARRIBA: top -2px
   ============================================================ */
@media (max-width: 360px) {
    .navbar-mobile {
        top: -2px;                    /* ⬅️ MÁS ARRIBA (antes 1px) */
        left: 10px;
        right: 2px;
        padding: 7px 9px;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 18px !important;
    }

    .mobile-nav-controls {
        gap: 3px;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 7px;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 0.85rem;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.62rem;
    }

    .nav-divider {
        height: 20px;
        margin: 0 2px 0 6px;
    }

    .menu-btn {
        width: 32px;
        height: 32px;
        margin-left: 4px;
    }

    .menu-btn-icon {
        font-size: 1rem;
    }

    .menu-btn-close {
        font-size: 0.9rem;
    }

    .menu-btn-circle {
        width: 32px;
        height: 32px;
    }

    .dropdown-panel {
        top: 62px;
        right: 6px;
        width: 240px;
        max-width: 96%;
        border-radius: 14px;
    }

    .dropdown-panel::after {
        top: -8px;
        right: 12px;
        width: 15px;
        height: 15px;
    }

    .dropdown-overlay {
        top: 62px !important;
        height: calc(100vh - 62px) !important;
    }

    .dropdown-item {
        padding: 10px 13px;
    }

    .dropdown-item i:first-child {
        font-size: 1rem;
        width: 22px;
    }

    .dropdown-item span {
        font-size: 0.85rem;
    }

    .dropdown-item .arrow {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 0.65rem;
    }
}

/* ============================================================
   PARTÍCULAS EN BORDES DE CADA SECCIÓN
   ------------------------------------------------------------
   ✅ El contenedor tiene dimensiones explícitas
   ✅ El canvas interno SÍ puede interactuar
   ✅ Partículas visibles
   ============================================================ */
.particles-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: auto;              /* ← ANTES: none → AHORA: auto */
    overflow: hidden;
    background: transparent;
}

/* ✅ El canvas DENTRO de .particles-edge */
.particles-edge canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: auto;              /* ← captura eventos */
    opacity: 1;                        /* ← asegurar visibilidad */
}

/* ✅ El contenido de la sección va POR ENCIMA de las partículas */
.section > .container,
.section-projects > .container,
.section-education > .container,
.section-contact > .container {
    position: relative;
    z-index: 2;
}

/* ✅ Las secciones deben tener position: relative */
.section,
.section-projects,
.section-education,
.section-contact {
    position: relative;
    overflow: hidden;
}


@media (max-width: 768px) {
    .hero-actions {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;              /* espacio entre los dos botones */
        width: 100%;
    }

    /* Ver Proyectos: ocupa lo justo para su icono + texto */
    .hero-actions .btn-primary-gradiente {
        flex: 0 0 auto;
        padding: 12px 16px;     /* espacio interno para el icono */
        white-space: nowrap;
    }

    /* CV: ocupa el resto pero con un pequeño margen interno */
    .hero-actions .btn-outline-light {
        flex: 1 1 auto;
        max-width: 55%;         /* ← evita que se estire demasiado */
        padding: 12px 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
}


/* ============================================================
   HERO HEXÁGONO 3D — FOTO + FLIP
   ------------------------------------------------------------
   ✅ Forma 3D con bordes degradados (frontal y trasera)
   ✅ Flip 3D en TODOS los tamaños (clic → rota 180°)
   ✅ Cara trasera 100% transparente con bordes degradados
   ✅ Info DENTRO del hexágono al voltear
   ✅ Modo claro / oscuro
   ✅ Responsive con texto simplificado
   ============================================================ */

/* ============================================================
   1. WRAPPER
   ============================================================ */
/* ============================================================
   1. WRAPPER — NO captura clics, solo organiza el layout
   ============================================================ */
.hero-hexagon-wrapper {
    position: relative;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
    transform-style: preserve-3d;
    /* ✅ NO captura clics: los deja pasar al flipper */
    pointer-events: none;
}

/* ============================================================
   2. GLOW DE FONDO
   ============================================================ */
.hero-hexagon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle,
        rgba(124, 58, 237, 0.4) 0%,
        rgba(6, 182, 212, 0.3) 40%,
        transparent 70%);
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    animation: heroGlowPulse 3s ease-in-out infinite;
    pointer-events: none;
}

body[data-theme="light"] .hero-hexagon-glow {
    background: radial-gradient(circle,
        rgba(124, 58, 237, 0.3) 0%,
        rgba(6, 182, 212, 0.2) 40%,
        transparent 70%);
}

@keyframes heroGlowPulse {
    0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}

/* ============================================================
   3. FLIPPER — SIEMPRE captura clics (en ambos estados)
   ============================================================ */
.hero-hexagon-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    cursor: pointer;
    z-index: 1;
    will-change: transform;
    transform: rotateY(0deg) rotateX(0deg) translateZ(0) scale(1);
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    /* ✅ SIEMPRE captura clics */
    pointer-events: auto;
}

.hero-hexagon-flipper.flipped {
    transform: rotateY(180deg) rotateX(4deg) translateZ(40px) scale(1.05);
}

/* ============================================================
   4. CARAS — NO capturan clics (el flipper los maneja)
   ============================================================ */
.hex-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ✅ Las caras NUNCA capturan clics */
    pointer-events: none;
}

.hex-face-front {
    transform: rotateY(0deg);
}

/* ============================================================
   5. CONTENEDOR DEL CANVAS 3D — NO captura clics
   ============================================================ */
.hero-hexagon-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    cursor: grab;
    transition: opacity 0.4s ease;
    opacity: 1;
    /* ✅ NO captura clics: el flipper los maneja */
    pointer-events: none;
}

.hero-hexagon-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
    pointer-events: none;
}

.hero-hexagon-flipper.flipped .hero-hexagon-container {
    opacity: 0;
}

/* ============================================================
   6. CARA TRASERA — HEXÁGONO TRANSPARENTE CON BORDE DEGRADADO
   ============================================================ */
.hex-face-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    /* ✅ NO captura clics */
    pointer-events: none;
}

.hex-back-inner {
    position: relative;
    width: 88%;
    height: 88%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.hex-back-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%237C3AED'/><stop offset='33%25' stop-color='%2306B6D4'/><stop offset='66%25' stop-color='%232DD4BF'/><stop offset='100%25' stop-color='%23EC4899'/></linearGradient></defs><polygon points='50,2 93,26 93,74 50,98 7,74 7,26' fill='none' stroke='url(%23g)' stroke-width='4' stroke-linejoin='round'/></svg>");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

.hex-back-inner::after {
    display: none;
}
/* ============================================================
   BARRAS DE INFO — MODERNAS (Glassmorphism Premium)
   ------------------------------------------------------------
   ✅ Fondo muy transparente + blur fuerte
   ✅ Borde con degradado animado
   ✅ Glow suave
   ✅ Iconos con drop-shadow
   ✅ Hover con elevación y brillo
   ✅ Escalones (efecto escalera)
   ============================================================ */

/* ---------- Estructura base ---------- */
.hex-back-inner .hex-info-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    width: 100%;
    box-sizing: border-box;

    /* ✅ Fondo glass muy sutil */
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);

    /* ✅ Transición suave */
    transition:
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.4s ease,
        background 0.4s ease;

    /* ✅ Borde con degradado (usando ::before) */
    border: 1px solid transparent;
    background-clip: padding-box;
}

/* ✅ Borde con degradado (capa encima del fondo) */
.hex-back-inner .hex-info-item::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 50%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
}

/* ✅ Modo OSCURO: fondo muy sutil */
body[data-theme="dark"] .hex-back-inner .hex-info-item {
    background: rgba(15, 15, 30, 0.25);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 2px 12px rgba(0, 0, 0, 0.2);
}

/* ✅ Modo CLARO: fondo muy sutil */
body[data-theme="light"] .hex-back-inner .hex-info-item {
    background: rgba(255, 255, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 2px 12px rgba(124, 58, 237, 0.08);
}

/* ---------- HOVER ---------- */
.hex-back-inner .hex-info-item:hover {
    transform: translateX(6px) translateY(-2px);
    box-shadow:
        0 8px 24px rgba(124, 58, 237, 0.35),
        0 0 40px rgba(124, 58, 237, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ✅ Borde más visible al hacer hover */
.hex-back-inner .hex-info-item:hover::before {
    opacity: 1;
}

/* ✅ Modo oscuro hover */
body[data-theme="dark"] .hex-back-inner .hex-info-item:hover {
    background: rgba(124, 58, 237, 0.15);
}

/* ✅ Modo claro hover */
body[data-theme="light"] .hex-back-inner .hex-info-item:hover {
    background: rgba(124, 58, 237, 0.1);
}

/* ============================================================
   ICONOS con glow
   ============================================================ */
.hex-back-inner .hex-info-item > i {
    font-size: 1rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;

    /* ✅ Degradado en el icono */
    background: linear-gradient(135deg, #7C3AED, #06B6D4, #2DD4BF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;

    /* ✅ Glow sutil */
    filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.5));
}

/* ============================================================
   TEXTOS
   ============================================================ */
.hex-back-inner .hex-info-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.hex-back-inner .hex-info-text strong {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.85;
}

.hex-back-inner .hex-info-text span {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: normal;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

/* ============================================================
   DOT VERDE
   ============================================================ */
.hex-back-inner .hex-status-dot {
    width: 8px;
    height: 8px;
    margin-left: 6px;
    margin-right: 6px;
    /* ✅ Glow extra */
    box-shadow:
        0 0 0 0 rgba(34, 197, 94, 0.7),
        0 0 10px rgba(34, 197, 94, 0.6);
}

/* ============================================================
   ESCALONES — Cada barra un poco más a la derecha
   ============================================================ */
.hex-back-inner .hex-info-item:nth-child(1) { margin-left: 0; }
.hex-back-inner .hex-info-item:nth-child(2) { margin-left: 14px; }
.hex-back-inner .hex-info-item:nth-child(3) { margin-left: 28px; }

/* ---------- Ajustar escalones en responsive ---------- */
@media (max-width: 992px) {
    .hex-back-inner .hex-info-item:nth-child(1) { margin-left: 0; }
    .hex-back-inner .hex-info-item:nth-child(2) { margin-left: 10px; }
    .hex-back-inner .hex-info-item:nth-child(3) { margin-left: 20px; }
}

@media (max-width: 768px) {
    .hex-back-inner .hex-info-item:nth-child(1) { margin-left: 0; }
    .hex-back-inner .hex-info-item:nth-child(2) { margin-left: 8px; }
    .hex-back-inner .hex-info-item:nth-child(3) { margin-left: 16px; }
}

@media (max-width: 480px) {
    .hex-back-inner .hex-info-item:nth-child(1) { margin-left: 0; }
    .hex-back-inner .hex-info-item:nth-child(2) { margin-left: 6px; }
    .hex-back-inner .hex-info-item:nth-child(3) { margin-left: 12px; }
}


/* ============================================================
   9. DOT VERDE
   ============================================================ */
.hex-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: statusPulse 2s ease-out infinite;
    flex-shrink: 0;
    margin-left: 10px;
    margin-right: 10px;
}

@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ============================================================
   10. PÍLDORAS — OCULTAS (ya no se usan)
   ============================================================ */
.hex-pills {
    display: none !important;
}

/* ❌ BORRAR TODO ESTE BLOQUE */
@media (min-width: 993px) {
    .scroll-indicator {
        bottom:  60px  !important;
    }
    }


@media (max-width: 992px) {
    .hero-hexagon-wrapper {
        transform: translateY(-50px) !important;
    }
    .scroll-indicator {
        bottom: 12px !important;
    }
}

@media (max-width: 768px) {
    .hero-hexagon-wrapper {
        transform: translateY(-63px) !important;
    }
    .scroll-indicator {
        bottom: 20px !important;
    }
}

@media (max-width: 480px) {
    .hero-hexagon-wrapper {
        transform: translateY(-70px) !important;
    }
    .scroll-indicator {
        bottom: 15px !important;
        font-size: 0.65rem !important;
    }
}

/* ============================================================
   TÍTULOS DE SECCIÓN — Underline Breathe + Glow pulsante
   ------------------------------------------------------------
   ✅ Subrayado degradado que se expande y contrae
   ✅ Glow pulsante en el título
   ✅ Responsive adaptado
   ✅ Respeta prefers-reduced-motion
   ============================================================ */

/* ---------- Título base ---------- */
.section-title {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
    /* ✅ Glow pulsante */
    animation: titleGlow 4s ease-in-out infinite;
}

/* ---------- Underline Breathe ---------- */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 120px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #7C3AED 25%,
        #06B6D4 50%,
        #2DD4BF 75%,
        transparent 100%
    );
    border-radius: 3px;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.8),
        0 0 40px rgba(6, 182, 212, 0.4);
    animation: underlineBreathe 3s ease-in-out infinite;
}

/* ---------- Animación: underline que respira ---------- */
@keyframes underlineBreathe {
    0%, 100% {
        width: 120px;
        opacity: 0.7;
        box-shadow:
            0 0 15px rgba(124, 58, 237, 0.6),
            0 0 30px rgba(6, 182, 212, 0.3);
    }
    50% {
        width: 200px;
        opacity: 1;
        box-shadow:
            0 0 25px rgba(124, 58, 237, 0.9),
            0 0 50px rgba(6, 182, 212, 0.5);
    }
}

/* ---------- Animación: glow pulsante del título ---------- */
@keyframes titleGlow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(124, 58, 237, 0.2));
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(124, 58, 237, 0.5))
                drop-shadow(0 0 35px rgba(6, 182, 212, 0.25));
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ---------- Tablet (≤ 992px) ---------- */
@media (max-width: 992px) {
    .section-title {
        padding-bottom: 18px;
    }
    .section-title::after {
        width: 100px;
        height: 3px;
    }
}

/* ---------- Móvil (≤ 768px) ---------- */
@media (max-width: 768px) {
    .section-title {
        padding-bottom: 16px;
        font-size: 2rem;
    }
    .section-title::after {
        width: 80px;
        height: 3px;
    }

    @keyframes underlineBreathe {
        0%, 100% { width: 80px; opacity: 0.7; }
        50%      { width: 140px; opacity: 1; }
    }
}

/* ---------- Móvil pequeño (≤ 480px) ---------- */
@media (max-width: 480px) {
    .section-title {
        padding-bottom: 14px;
        font-size: 1.7rem;
    }
    .section-title::after {
        width: 60px;
        height: 2px;
    }

    @keyframes underlineBreathe {
        0%, 100% { width: 60px; opacity: 0.7; }
        50%      { width: 110px; opacity: 1; }
    }
}

/* ============================================================
   ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .section-title,
    .section-title::after {
        animation: none;
    }
}




/* ============================================================
   CV SWITCH — Interruptor Visualizar / Descargar
   ============================================================ */
.cv-switch {
    display: inline-flex;
    align-items: stretch;
    height: 62px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(124, 58, 237, 0.5);
    background: rgba(124, 58, 237, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.15);
    transition: all 0.3s ease;
    position: relative;
}

.cv-switch:hover {
    border-color: var(--purple);
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.35);
}

/* ---------- Botones internos ---------- */
.cv-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    color: var(--text-color);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    text-decoration: none;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    background: transparent;
    border: none;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cv-switch-btn i {
    font-size: 0.95rem;
    flex-shrink: 0;
    color: inherit;
    transition: transform 0.2s ease;
}

.cv-switch-btn span {
    color: inherit;
}

/* ✅ Separador entre los dos botones */
.cv-switch-btn:first-child {
    border-right: 1px solid rgba(124, 58, 237, 0.35);
}

/* ---------- Hover de cada botón ---------- */
.cv-switch-btn:hover {
    background: linear-gradient(135deg, #7C3AED, #5B21B6, #4C1D95);
    color: #FFFFFF;
    transform: scale(1.02);
}

.cv-switch-btn:hover i {
    transform: scale(1.15);
    color: #FFFFFF;
}

.cv-switch-btn:hover span {
    color: #FFFFFF;
}

/* ✅ Hover específico "Descargar" (color cyan) */
/* ✅ "Descargar" SIEMPRE con el degradado cyan (color del hover) */
.cv-switch-btn.cv-switch-download {
    background: linear-gradient(135deg, #06B6D4, #0891B2, #0E7490);
    color: #FFFFFF;
}

.cv-switch-btn.cv-switch-download i,
.cv-switch-btn.cv-switch-download span {
    color: #FFFFFF;
}

/* ✅ Hover: intensifica el brillo y eleva el botón */
.cv-switch-btn.cv-switch-download {
    background: linear-gradient(135deg, #06B6D4, #0891B2, #0E7490);
    color: #FFFFFF;
}

.cv-switch-btn.cv-switch-download i,
.cv-switch-btn.cv-switch-download span {
    color: #FFFFFF;
}

.cv-switch-btn.cv-switch-download:hover {
    background: linear-gradient(135deg, #22D3EE, #06B6D4, #0891B2);
    color: #FFFFFF;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
}

.cv-switch-btn.cv-switch-download:hover i,
.cv-switch-btn.cv-switch-download:hover span {
    color: #FFFFFF;
}

/* ---------- Modo CLARO ---------- */
body[data-theme="light"] .cv-switch {
    background: rgba(124, 58, 237, 0.03);
    border-color: rgba(124, 58, 237, 0.4);
}

body[data-theme="light"] .cv-switch-btn {
    color: #1A1A2E;
}

body[data-theme="light"] .cv-switch-btn:hover {
    color: #FFFFFF;
}

/* ---------- Modo OSCURO ---------- */
body[data-theme="dark"] .cv-switch {
    background: rgba(255, 255, 255, 0.03);
}

body[data-theme="dark"] .cv-switch-btn {
    color: #FFFFFF;
}

/* ============================================================
   CV SWITCH — RESPONSIVE TODAS LAS RESOLUCIONES
   ------------------------------------------------------------
   ✅ Botones "Visualizar CV" y "Descargar"
   ✅ Tamaño, padding y fuente escalados por breakpoint
   ✅ Breakpoints: 1024px → 768px → 480px
   ✅ Altura fija por breakpoint (evita saltos de layout)
   ✅ Iconos y textos siempre visibles y legibles
   ============================================================ */

/* ============================================================
   ≤ 1024px — Laptops pequeñas / Tablets grandes
   ============================================================ */
@media (max-width: 1024px) {
    .cv-switch {
        height: 56px;
        width: 100%;
        border-radius: 10px;
    }

    .cv-switch-btn {
        padding: 0 16px;
        font-size: 0.85rem;
        flex: 1;
        gap: 7px;
        min-width: 0;
        text-align: center;
        letter-spacing: 0.2px;
    }

    .cv-switch-btn i {
        font-size: 0.85rem;
        flex-shrink: 0;
    }

    .cv-switch-btn span {
        font-size: 0.8rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ============================================================ */
@media (max-width: 768px) {
    .cv-switch {
        height: 52px;
        width: 100%;
        border-radius: 10px;
    }

    .cv-switch-btn {
        padding: 0 12px;
        font-size: 0.78rem;
        flex: 1;
        gap: 6px;
        min-width: 0;
        letter-spacing: 0.15px;
    }

    .cv-switch-btn i {
        font-size: 0.78rem;
    }

    .cv-switch-btn span {
        font-size: 0.72rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ============================================================ */
@media (max-width: 480px) {
    .cv-switch {
        height: 50px;
        border-radius: 9px;
    }

    .cv-switch-btn {
        padding: 0 8px;
        font-size: 0.72rem;
        gap: 5px;
        letter-spacing: 0.1px;
    }

    .cv-switch-btn i {
        font-size: 0.72rem;
    }

    .cv-switch-btn span {
        font-size: 0.68rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   CINTAS DIVISORIAS — Estilo "crime scene tape" ESPACIAL
   ------------------------------------------------------------
   ✅ Trapecios negros en los bordes (efecto cinta de peligro)
   ✅ Fondo morado espacial
   ✅ Texto sin guiones, con separador · entre título y subtítulo
   ✅ Subtítulos en Inter Extra Bold (gruesos y legibles)
   ✅ Separador ✦ entre logros
   ============================================================ */

/* ============================================================
   CONTENEDOR DE LA CINTA
   ============================================================ */
.section-tape {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    transform: none;
    transform-origin: center;

}

/* ============================================================
   CUERPO DE LA CINTA — FONDO MORADO + TRAPECIOS EN BORDES
   ============================================================ */
.section-tape-inner {
    position: relative;
    width: 120%;
    height: 46px;
    display: flex;
    align-items: center;
    overflow: hidden;

    /* ✅ Fondo morado espacial */
    background-color: #4C1D95;

    /* ✅ Nebulosa cósmica sutil */
    background-image:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(167, 139, 250, 0.3) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 80% 50%,
            rgba(236, 72, 153, 0.2) 0%,
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #7C3AED 0%,
            #4C1D95 50%,
            #7C3AED 100%
        );

    /* ✅ Bordes finos */
    border-top: 1px solid rgba(167, 139, 250, 0.5);
    border-bottom: 1px solid rgba(46, 16, 101, 0.8);

    /* ✅ Sombra suave + glow sutil */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(124, 58, 237, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ============================================================
   ✅ TRAPECIOS NEGROS EN LOS BORDES (efecto cinta de peligro)
   ------------------------------------------------------------
   Los trapecios se forman con SVG inline usando <polygon>
   ============================================================ */

/* Fila superior de trapecios */
.section-tape-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><polygon points='4,0 12,0 8,10 0,10' fill='%23000000'/><polygon points='24,0 32,0 28,10 20,10' fill='%23000000'/></svg>");
    background-size: 40px 10px;
    background-repeat: repeat-x;
    z-index: 2;
    pointer-events: none;
}

/* Fila inferior de trapecios (invertidos verticalmente) */
.section-tape-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><polygon points='0,0 8,0 12,10 4,10' fill='%23000000'/><polygon points='20,0 28,0 32,10 24,10' fill='%23000000'/></svg>");
    background-size: 40px 10px;
    background-repeat: repeat-x;
    z-index: 2;
    pointer-events: none;
}

/* ============================================================
   BRILLO SUAVE EN EL CENTRO (efecto cinta plástica)
   ============================================================ */
.section-tape-text::before {
    content: '';
    position: absolute;
    inset: 0;
    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.03) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: -1;
}
/* ============================================================
   CINTA DIVISORIA — INFINITA (entra por izquierda, sale por derecha)
   ------------------------------------------------------------
   ✅ Animación: translateX(0%) → translateX(-50%)
   ✅ El contenido está duplicado 2 veces por el JS
   ✅ Al llegar a -50%, el bloque 2 ocupa el lugar del bloque 1
   ✅ Bucle perfecto SIN saltos, SIN huecos
   ✅ El texto y el fondo se mueven juntos (mismo track animado)
   ============================================================ */


/* ============================================================
   FIX EMERGENCIA — CINTA SIN MARGEN, ANCHO COMPLETO
   ============================================================ */
.section-tape {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 100vw !important;
    margin: 0 !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    padding: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
}


/* ============================================================
   1. CONTENEDOR DE LA CINTA
   ============================================================ */
.section-tape {
    position: relative;
    width: 100%;
    height: 70px;
    margin: 0px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 5;
    pointer-events: none;
    transform: none;
    transform-origin: center;
}

/* ============================================================
   2. BORDE DEGRADADO FINO — SOLO MODO OSCURO
   ============================================================ */
body[data-theme="dark"] .section-tape::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 46px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 4;

    padding: 1px;
    background-image: linear-gradient(
        90deg,
        #7C3AED 0%,
        #06B6D4 50%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    opacity: 0.7;
    filter: blur(0.3px);
}

/* ============================================================
   3. TRACK ANIMADO — contiene TODO
   ✅ Animación: 0% → -50% (bucle perfecto)
   ✅ El contenido está duplicado 2 veces por el JS
   ============================================================ */
.section-tape-track {
    position: relative;
    display: flex;
    align-items: center;
    height: 46px;
    flex-shrink: 0;
   will-change: transform;
    backface-visibility: hidden;

    /* Fondo morado espacial */
    background-color: #4C1D95;
    background-image:
        radial-gradient(
            ellipse at 20% 50%,
            rgba(167, 139, 250, 0.3) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 80% 50%,
            rgba(236, 72, 153, 0.2) 0%,
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #7C3AED 0%,
            #4C1D95 50%,
            #7C3AED 100%
        );

    border-top: 1px solid rgba(167, 139, 250, 0.5);
    border-bottom: 1px solid rgba(46, 16, 101, 0.8);

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(124, 58, 237, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* ✅ ANIMACIÓN INFINITA: 0% → -50% */
    animation: tapeScroll 120s linear infinite;
}

/* ============================================================
   4. KEYFRAMES — 0% → -50% (BUCLE PERFECTO)
   ------------------------------------------------------------
   ✅ Al llegar a -50%, el bloque 2 ocupa el lugar del bloque 1
   ✅ Como los bloques son idénticos, no se nota el salto
   ✅ Movimiento: la cinta entra por izquierda y sale por derecha
   ============================================================ */
/*@keyframes tapeScroll {
    from { transform: translateX(0%); }
    to   { transform: translateX(-50%); }
}

/* ============================================================
   5. CAPA DE TRAPECIOS NEGROS — CONTINUA en todo el track
   ============================================================ */
.section-tape-traps {
    position: absolute;
     width: 100%;              /* ← asegura que cubra todo el track */
    height: 100%;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.section-tape-traps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><polygon points='4,0 12,0 8,10 0,10' fill='%23000000'/><polygon points='24,0 32,0 28,10 20,10' fill='%23000000'/></svg>");
    background-size: 40px 10px;
    background-repeat: repeat-x;
}

.section-tape-traps::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><polygon points='0,0 8,0 12,10 4,10' fill='%23000000'/><polygon points='20,0 28,0 32,10 24,10' fill='%23000000'/></svg>");
    background-size: 40px 10px;
    background-repeat: repeat-x;
}

/* ============================================================
   6. BRILLO SUPERIOR — Simula luz sobre cinta plástica
   ============================================================ */
.section-tape-track::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 45%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0.03) 60%,
        rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* ============================================================
   7. CONTENIDO — Bloques de texto (el JS los duplica 2 veces)
   ============================================================ */
.section-tape-content {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    height: 100%;
    min-width: max-content;
}

.section-tape-item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 100%;
}

.section-tape-text {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    padding: 0 20px;
}

/* ============================================================
   8. TEXTO — Estilos originales
   ============================================================ */
.tape-achievement {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0 18px;
    line-height: 1;
    white-space: nowrap;
}

.tape-achievement strong {
    font-family: 'Space Grotesk', 'Poppins', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #FFFFFF;
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.6),
        0 1px 3px rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.tape-achievement strong::after {
    content: '·';
    margin-left: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    font-size: 1.4em;
    line-height: 0;
    vertical-align: middle;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.tape-achievement em {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1px;
    font-style: normal;
    text-transform: none;
    color: #FFFFFF;
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.5),
        0 0 8px rgba(167, 139, 250, 0.4),
        0 1px 3px rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.tape-separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #FFFFFF;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 20px rgba(167, 139, 250, 0.6);
    padding: 0 14px;
    flex-shrink: 0;
    animation: separatorPulse 4s ease-in-out infinite;
}

@keyframes separatorPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.15); }
}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .section-tape { height: 60px; }
    .section-tape-track { height: 38px; }
    .section-tape-traps::before,
    .section-tape-traps::after { height: 8px; background-size: 32px 8px; }
    body[data-theme="dark"] .section-tape::before { height: 38px; }
    .tape-achievement { padding: 0 14px; }
    .tape-achievement strong { font-size: 0.8rem; letter-spacing: 1px; }
    .tape-achievement em { font-size: 0.72rem; }
    .tape-separator { font-size: 0.8rem; padding: 0 10px; }
}

@media (max-width: 768px) {
    .section-tape { height: 50px; transform: rotate(-0.3deg); }
    .section-tape-track { height: 32px; }
    .section-tape-traps::before,
    .section-tape-traps::after { height: 6px; background-size: 26px 6px; }
    body[data-theme="dark"] .section-tape::before { height: 32px; }
    .tape-achievement { padding: 0 10px; }
    .tape-achievement strong { font-size: 0.7rem; letter-spacing: 0.8px; }
    .tape-achievement em { font-size: 0.62rem; }
    .tape-separator { font-size: 0.7rem; padding: 0 8px; }
}

@media (max-width: 480px) {
    .section-tape { height: 42px; transform: rotate(-0.2deg); }
    .section-tape-track { height: 26px; }
    .section-tape-traps::before,
    .section-tape-traps::after { height: 5px; background-size: 20px 5px; }
    body[data-theme="dark"] .section-tape::before { height: 26px; }
    .tape-achievement { padding: 0 8px; }
    .tape-achievement strong { font-size: 0.6rem; letter-spacing: 0.5px; }
    .tape-achievement strong::after { margin-left: 5px; }
    .tape-achievement em { font-size: 0.55rem; }
    .tape-separator { font-size: 0.55rem; padding: 0 6px; }
}

/* ============================================================
   10. ACCESIBILIDAD
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .section-tape-track { animation: none; }
    .tape-separator { animation: none; }
}

/* ============================================================
   ✅ GITHUB CONTRIBUTIONS — Tabla estilo GitHub
   ------------------------------------------------------------
   ✅ PC/Laptop (≥ 992px): Texto 32% | Tabla 68% al lado
   ✅ Tablet/Móvil (≤ 991px): Texto arriba | Tabla abajo
   ✅ Cuadritos en tonalidades MORADAS + CYAN
   ✅ Integrado con la paleta de la web
   ✅ Ancho controlado: la card NO se estira, el gráfico hace scroll
   ============================================================ */

/* ============================================================
   LAYOUT — Sobre mí con tabla al lado (PC) / debajo (responsive)
   ============================================================ */

/* ---------- PC/Laptop (≥ 992px) ---------- */
@media (min-width: 992px) {
    .about-row {
        display: grid !important;
        grid-template-columns: minmax(0, 46%) minmax(0, 1fr) !important;
        gap: 25px !important;
        align-items: start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }




    .about-text-col {
        grid-column: 1 / 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items:stretch !important;

    }

    .about-graph-col {
        grid-column: 2 / 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
}

      /* ✅ Que los párrafos ocupen TODO el ancho de su columna */
    .about-text-col p,
    .about-text-col .about-description,
    .about-text-col .about-title {
        max-width: 100% !important;
        width: 100% !important;
    }

/* ---------- Tablet/Móvil (≤ 991.98px) ---------- */
@media (max-width: 991.98px) {
    .about-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .about-text-col,
    .about-graph-col {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ============================================================
   CONTENEDOR PRINCIPAL DE LA TABLA
   ============================================================ */
.github-section {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

/* ============================================================
   CUADRO PRINCIPAL DE LA TABLA
   ============================================================ */
.github-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 14px 10px 14px;
    transition: all 0.3s ease;
    min-width: 0;
    max-width: 83%;
    margin-left: auto;
    width: 100%;
    position: relative;
    overflow: hidden;                /* ✅ la card NO crece más allá */
    box-sizing: border-box;
}

/* Borde degradado */
.github-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 33%,
        #2DD4BF 66%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.github-card:hover::before { opacity: 1; }

body[data-theme="dark"] .github-card {
    box-shadow:
        0 0 25px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] .github-card:hover {
    box-shadow:
        0 0 40px rgba(124, 58, 237, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body[data-theme="light"] .github-card {
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body[data-theme="light"] .github-card:hover {
    box-shadow:
        0 0 30px rgba(124, 58, 237, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------- TOP (título) ---------- */
.github-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

body[data-theme="dark"] .github-top { border-bottom-color: #30363D; }
body[data-theme="light"] .github-top { border-bottom-color: #D0D7DE; }

.github-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.github-count {
    font-weight: 700;
    background: var(--gradient-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.github-total {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--text-muted);
}

.github-settings {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}

.github-settings:hover { color: var(--purple); }

/* ============================================================
   CONTENIDO — Días + (Meses + Gráfico)
   ============================================================ */
.github-content {
    display: flex;
    gap: 2px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    overflow: hidden;      /* ← RECORTA todo el contenido */
}

/* ---------- Columna de días ---------- */
.github-days {
    display: flex;
    flex-direction: column;
    width: 22px;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    color: var(--text-muted);
    padding-top: 18px;
}

.github-days span {
    display: block;
    height: 10.5px;
    line-height: 10.5px;
    text-align: right;
    padding-right: 4px;
}

/* ---------- Columna derecha: meses + gráfico ---------- */
.github-right {
    flex: 1;
    min-width: 0;              /* ✅ CLAVE: permite encogerse */
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ---------- Fila de meses ---------- */
.github-months {
    position: relative;
    height: 14px;
    margin-bottom: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--text-muted);
    overflow: visible;
    white-space: nowrap;
    width: 100%;
}

.github-month-label {
    position: absolute;
    white-space: nowrap;
    top: 0;
}

/* ---------- Wrapper del gráfico (CON SCROLL) ---------- */
.github-graph-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    position: relative;
    min-height: 130px;
    width: 100%;
    min-width: 0;
    max-width: 100%;

    /* ✅ Ocultar el scroll nativo (usaremos uno personalizado) */
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
}

.github-graph-wrapper::-webkit-scrollbar {
    display: none;                    /* Chrome/Safari/Edge */
}

.github-graph-wrapper::-webkit-scrollbar { height: 8px; }
.github-graph-wrapper::-webkit-scrollbar-track { background: transparent; }
.github-graph-wrapper::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
}
.github-graph-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

/* ============================================================
   GRÁFICO DE CUADRITOS
   ============================================================ */
.github-graph {
    display: grid;
    grid-template-columns: repeat(53, 9px);
    grid-template-rows: repeat(7, 9px);
    gap: 1.5px;
    width: max-content;        /* ✅ ancho según contenido, NO estira al padre */
}

.github-cell {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.github-cell:hover {
    transform: scale(1.5);
    outline: 2px solid rgba(167, 139, 250, 0.9);
    outline-offset: 2px;
    z-index: 10;
}

/* ---------- MODO OSCURO ---------- */
body[data-theme="dark"] .github-cell[data-level="0"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="dark"] .github-cell[data-level="1"] {
    background: rgba(124, 58, 237, 0.35);
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.3);
}
body[data-theme="dark"] .github-cell[data-level="2"] {
    background: rgba(124, 58, 237, 0.6);
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.5);
}
body[data-theme="dark"] .github-cell[data-level="3"] {
    background: #7C3AED;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.7);
}
body[data-theme="dark"] .github-cell[data-level="4"] {
    background: linear-gradient(135deg, #A78BFA, #06B6D4);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.9),
                0 0 20px rgba(6, 182, 212, 0.4);
    outline: 1px solid rgba(167, 139, 250, 0.5);
    outline-offset: 0;
}

/* ---------- MODO CLARO ---------- */
body[data-theme="light"] .github-cell[data-level="0"] {
    background: #F3F4F6;
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="light"] .github-cell[data-level="1"] {
    background: #DDD6FE;
    box-shadow: 0 0 3px rgba(124, 58, 237, 0.15);
}
body[data-theme="light"] .github-cell[data-level="2"] {
    background: #A78BFA;
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.25);
}
body[data-theme="light"] .github-cell[data-level="3"] {
    background: #7C3AED;
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.4);
}
body[data-theme="light"] .github-cell[data-level="4"] {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.5),
                0 0 15px rgba(6, 182, 212, 0.3);
    outline: 1px solid rgba(124, 58, 237, 0.4);
    outline-offset: 0;
}

/* ============================================================
   PESTAÑAS DE AÑOS — ENCIMA del footer
   ============================================================ */
.github-years-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 14px;
    margin-bottom: 6px;
    padding-top: 14px;
    padding-bottom: 8px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    position: relative;
    z-index: 1;
}

body[data-theme="dark"] .github-years-tabs { border-top-color: #30363D; }
body[data-theme="light"] .github-years-tabs { border-top-color: #D0D7DE; }

.github-year-btn {
    background: transparent;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

body[data-theme="dark"] .github-year-btn { color: #FFFFFF; }
body[data-theme="light"] .github-year-btn { color: #000000; }

.github-year-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple);
}

.github-year-btn.active {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    color: #FFFFFF !important;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}

/* ============================================================
   FOOTER — Info + Leyenda
   ============================================================ */
.github-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.github-legend-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.github-info {
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
    margin-left: 2px;
    text-align: right;
}

.github-info:hover { color: var(--purple); }

.github-legend { font-size: 0.75rem; }

.github-legend-cells {
    display: flex;
    gap: 2px;
}

.github-legend-cells span {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: block;
}

/* Modo OSCURO - leyenda */
body[data-theme="dark"] .github-legend-cells span[data-level="0"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="dark"] .github-legend-cells span[data-level="1"] {
    background: rgba(124, 58, 237, 0.35);
}
body[data-theme="dark"] .github-legend-cells span[data-level="2"] {
    background: rgba(124, 58, 237, 0.6);
}
body[data-theme="dark"] .github-legend-cells span[data-level="3"] {
    background: #7C3AED;
}
body[data-theme="dark"] .github-legend-cells span[data-level="4"] {
    background: linear-gradient(135deg, #A78BFA, #06B6D4);
}

/* Modo CLARO - leyenda */
body[data-theme="light"] .github-legend-cells span[data-level="0"] {
    background: #F3F4F6;
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="light"] .github-legend-cells span[data-level="1"] { background: #DDD6FE; }
body[data-theme="light"] .github-legend-cells span[data-level="2"] { background: #A78BFA; }
body[data-theme="light"] .github-legend-cells span[data-level="3"] { background: #7C3AED; }
body[data-theme="light"] .github-legend-cells span[data-level="4"] {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
}

/* ============================================================
   LEYENDAS DE COLORES — Intensidad de trabajo
   ============================================================ */
.github-legend-detail {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(124, 58, 237, 0.15);
    position: relative;
    z-index: 1;
}

body[data-theme="dark"] .github-legend-detail { border-top-color: #30363D; }
body[data-theme="light"] .github-legend-detail { border-top-color: #D0D7DE; }

.github-legend-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin: 0 0 14px 0;
}

body[data-theme="dark"] .github-legend-title { color: #8B949E; }
body[data-theme="light"] .github-legend-title { color: #57606A; }

.legend-detail-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.legend-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
    transition: transform 0.2s ease;
}

.legend-detail-item:hover { transform: translateX(4px); }

.legend-detail-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
    transition: transform 0.2s ease;
}

.legend-detail-item:hover .legend-detail-color { transform: scale(1.15); }

.legend-detail-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Inter', sans-serif;
}

.legend-detail-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 0.3px;
}

body[data-theme="dark"] .legend-detail-text strong { color: #C9D1D9; }
body[data-theme="light"] .legend-detail-text strong { color: #24292F; }

.legend-detail-text span {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

body[data-theme="dark"] .legend-detail-text span { color: #8B949E; }
body[data-theme="light"] .legend-detail-text span { color: #57606A; }

/* ---------- COLORES POR NIVEL — Modo OSCURO ---------- */
body[data-theme="dark"] .legend-detail-color[data-level="0"] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="dark"] .legend-detail-color[data-level="1"] {
    background: rgba(124, 58, 237, 0.35);
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.3);
}
body[data-theme="dark"] .legend-detail-color[data-level="2"] {
    background: rgba(124, 58, 237, 0.6);
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.5);
}
body[data-theme="dark"] .legend-detail-color[data-level="3"] {
    background: #7C3AED;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.7);
}
body[data-theme="dark"] .legend-detail-color[data-level="4"] {
    background: linear-gradient(135deg, #A78BFA, #06B6D4);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.9),
                0 0 20px rgba(6, 182, 212, 0.4);
    outline: 1px solid rgba(167, 139, 250, 0.5);
}

/* ---------- COLORES POR NIVEL — Modo CLARO ---------- */
body[data-theme="light"] .legend-detail-color[data-level="0"] {
    background: #F3F4F6;
    border: 1px solid rgba(124, 58, 237, 0.08);
}
body[data-theme="light"] .legend-detail-color[data-level="1"] {
    background: #DDD6FE;
    box-shadow: 0 0 4px rgba(124, 58, 237, 0.15);
}
body[data-theme="light"] .legend-detail-color[data-level="2"] {
    background: #A78BFA;
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.25);
}
body[data-theme="light"] .legend-detail-color[data-level="3"] {
    background: #7C3AED;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}
body[data-theme="light"] .legend-detail-color[data-level="4"] {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5),
                0 0 15px rgba(6, 182, 212, 0.3);
    outline: 1px solid rgba(124, 58, 237, 0.4);
}

/* ============================================================
   RESPONSIVE — Leyendas de colores
   ============================================================ */
@media (max-width: 768px) {
    .github-legend-detail {
        margin-top: 16px;
        padding-top: 16px;
    }

    .legend-detail-list { gap: 8px; }

    .legend-detail-color {
        width: 18px;
        height: 18px;
    }

    .legend-detail-text strong { font-size: 0.78rem; }
    .legend-detail-text span { font-size: 0.68rem; }
}

@media (max-width: 480px) {
    .legend-detail-color {
        width: 16px;
        height: 16px;
    }

    .legend-detail-text strong { font-size: 0.72rem; }
    .legend-detail-text span { font-size: 0.62rem; }
}

/* ============================================================
   RESPONSIVE — Ajustes adicionales de la tabla
   ============================================================ */

/* ---------- Laptop pequeña (992px - 1200px) ---------- */
/* ✅ SIN CAMBIOS — Mantiene el 83% del bloque PC */
@media (min-width: 992px) and (max-width: 1200px) {
    /* ✅ Mantener 2 columnas, NO apilar */
    .github-years-tabs {
        gap: 4px;
    }

    .github-year-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 8px);
        grid-template-rows: repeat(7, 8px);
        gap: 1.2px;
    }

    .github-cell {
        width: 8px;
        height: 8px;
    }

    .github-days span {
        height: 9.5px;
        line-height: 9.5px;
    }
}


/* ============================================================
   GITHUB — RESPONSIVE TABLA DE CONTRIBUCIONES
   ------------------------------------------------------------
   ✅ PC/Laptop (≥ 1025px): Card al 83%, tabla completa visible
   ✅ Laptop pequeña (≤ 1200px): Card al 88%, celdas 8px
   ✅ Tablet grande (≤ 1024px): Card al 100%, celdas 8px, scroll
   ✅ Tablet (≤ 991.98px): Card 100%, celdas 10px
   ✅ Móvil (≤ 768px): Celdas 9px, textos más pequeños
   ✅ Móvil pequeño (≤ 480px): Celdas 8px, sin días
   ✅ Móvil muy pequeño (≤ 360px): Celdas 7px, leyenda 1 col
   ============================================================ */

/* ============================================================
   ≤ 1200px — Laptop pequeña
   ============================================================ */
@media (max-width: 1200px) {
    .github-card {
        max-width: 88%;
    }

    .github-years-tabs {
        gap: 4px;
    }

    .github-year-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 8px);
        grid-template-rows: repeat(7, 8px);
        gap: 1.2px;
    }

    .github-cell {
        width: 8px;
        height: 8px;
    }

    .github-days span {
        height: 9.5px;
        line-height: 9.5px;
    }
}

/* ============================================================
   ≤ 1024px — Tablet grande / Laptop pequeña
   ------------------------------------------------------------
   ✅ La card ocupa el 100% del ancho
   ✅ El gráfico hace scroll horizontal (no se desborda)
   ✅ Celdas reducidas a 8px
   ============================================================ */
@media (max-width: 1024px) {
    .github-card {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding: 14px 14px 10px 14px;
        overflow: hidden !important;
    }

    .github-title {
        font-size: 1rem;
    }

    .github-graph-wrapper {
        overflow-x: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .github-graph {
        grid-template-columns: repeat(53, 8px) !important;
        grid-template-rows: repeat(7, 8px) !important;
        gap: 1px !important;
    }

    .github-cell {
        width: 8px !important;
        height: 8px !important;
    }

    .github-days span {
        height: 9px !important;
        line-height: 9px !important;
    }

    .github-years-tabs {
        flex-wrap: wrap;
        gap: 4px;
        margin-top: -42px;
    }

    .github-year-btn {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .github-content {
        overflow: hidden !important;
    }

    .github-right {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .github-scrollbar {
        top: -44px;
    }
}

/* ============================================================
   ≤ 991.98px — Tablet
   ------------------------------------------------------------
   ✅ Card ocupa el 100% del ancho
   ✅ Celdas 10px (más grandes para tocar con el dedo)
   ============================================================ */
@media (max-width: 991.98px) {
    .github-card {
        padding: 16px 18px;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    .github-title {
        font-size: 0.95rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 10px);
        grid-template-rows: repeat(7, 10px);
        gap: 1.5px;
    }

    .github-cell {
        width: 10px;
        height: 10px;
    }

    .github-days span {
        height: 11.5px;
        line-height: 11.5px;
    }

    .github-scrollbar {
        top: -48px;
    }

    .github-years-tabs {
        margin-top: -46px;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   ✅ Card más compacta
   ✅ Celdas 9px
   ✅ Textos reducidos
   ============================================================ */
@media (max-width: 768px) {
    .github-card {
        padding: 14px 16px;
        border-radius: 14px;
    }

    .github-title {
        font-size: 0.9rem;
        line-height: 1.3;
    }

    .github-total {
        font-size: 0.85rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 9px);
        grid-template-rows: repeat(7, 9px);
        gap: 1px;
    }

    .github-cell {
        width: 9px;
        height: 9px;
    }

    .github-days {
        font-size: 0.55rem;
    }

    .github-days span {
        height: 10px;
        line-height: 10px;
    }

    .github-year-btn {
        padding: 5px 10px;
        font-size: 0.72rem;
    }

    .github-legend { font-size: 0.7rem; }
    .github-info { font-size: 0.7rem; }

    .legend-detail-list {
        gap: 8px;
    }

    .legend-detail-color {
        width: 18px;
        height: 18px;
    }

    .legend-detail-text strong { font-size: 0.78rem; }
    .legend-detail-text span { font-size: 0.68rem; }

    .github-scrollbar {
        top: -40px;
    }

    .github-years-tabs {
        margin-top: -38px;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   ✅ Card con padding mínimo
   ✅ Celdas 8px
   ✅ Sin columna de días (oculta)
   ✅ Textos mínimos pero legibles
   ============================================================ */
@media (max-width: 480px) {
    .github-card {
        padding: 12px 14px;
        border-radius: 14px;
    }

    .github-title {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .github-total {
        font-size: 0.78rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 8px) !important;
        grid-template-rows: repeat(7, 8px) !important;
        gap: 1px;
    }

    .github-cell {
        width: 8px !important;
        height: 8px !important;
        border-radius: 1.5px;
    }

    .github-days {
        display: none;
    }

    .github-content {
        gap: 0;
    }

    .github-year-btn {
        padding: 4px 8px;
        font-size: 0.68rem;
    }

    .github-legend { font-size: 0.65rem; }
    .github-info { font-size: 0.65rem; }

    .github-legend-cells span {
        width: 8px;
        height: 8px;
    }

    .legend-detail-list {
        gap: 6px;
    }

    .legend-detail-color {
        width: 16px;
        height: 16px;
    }

    .legend-detail-text strong { font-size: 0.72rem; }
    .legend-detail-text span { font-size: 0.62rem; }

    .github-scrollbar {
        top: -35px;
    }

    .github-years-tabs {
        margin-top: -33px;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   ✅ Celdas 7px
   ✅ Leyenda en 1 columna
   ✅ Textos mínimos
   ============================================================ */
@media (max-width: 360px) {
    .github-card {
        padding: 10px 12px;
        border-radius: 12px;
    }

    .github-title {
        font-size: 0.75rem;
    }

    .github-total {
        font-size: 0.72rem;
    }

    .github-graph {
        grid-template-columns: repeat(53, 7px) !important;
        grid-template-rows: repeat(7, 7px) !important;
        gap: 0.8px;
    }

    .github-cell {
        width: 7px !important;
        height: 7px !important;
        border-radius: 1px;
    }

    .github-year-btn {
        padding: 3px 6px;
        font-size: 0.62rem;
    }

    .github-legend { font-size: 0.6rem; }
    .github-info { font-size: 0.6rem; }

    .legend-detail-list {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .legend-detail-color {
        width: 14px;
        height: 14px;
    }

    .legend-detail-text strong { font-size: 0.68rem; }
    .legend-detail-text span { font-size: 0.58rem; }

    .github-scrollbar {
        top: -30px;
        height: 8px;
    }

    .github-years-tabs {
        margin-top: -28px;
    }
}
/* ============================================================
   TOOLTIP PERSONALIZADO — Gráfico GitHub
   ============================================================ */
.github-tooltip {
    position: fixed;
    background: linear-gradient(135deg, rgba(15, 15, 30, 0.98), rgba(25, 20, 45, 0.98));
    color: #FFFFFF;
    padding: 10px 14px;
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    border: 1px solid rgba(124, 58, 237, 0.5);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(124, 58, 237, 0.3);
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.github-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.github-tooltip .tooltip-date {
    display: block;
    font-size: 0.7rem;
    color: #A78BFA;
    margin-bottom: 4px;
    font-weight: 600;
    text-transform: capitalize;
}

.github-tooltip .tooltip-label {
    display: block;
    font-weight: 700;
    color: #FFFFFF;
}

.github-tooltip .tooltip-desc {
    display: block;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* Modo claro */
body[data-theme="light"] .github-tooltip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 255, 0.98));
    color: #1A1A2E;
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow:
        0 8px 24px rgba(124, 58, 237, 0.2),
        0 0 20px rgba(124, 58, 237, 0.15);
}

body[data-theme="light"] .github-tooltip .tooltip-date {
    color: #7C3AED;
}

body[data-theme="light"] .github-tooltip .tooltip-label {
    color: #1A1A2E;
}

body[data-theme="light"] .github-tooltip .tooltip-desc {
    color: rgba(26, 26, 46, 0.7);
}


/* ============================================================
   SCROLL HORIZONTAL PERSONALIZADO — Gráfico GitHub
   ------------------------------------------------------------
   ✅ Va debajo de los cuadritos y encima de las pestañas de años
   ✅ Se sincroniza con el scroll interno del gráfico
   ============================================================ */
.github-scrollbar {
    position: relative;
     top: -50px;
    width: 100%;
    height: 10px;
    margin-top: 8px;
    margin-bottom: 4px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
}

.github-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 40px;
    background: linear-gradient(90deg, #7C3AED, #06B6D4);
    border-radius: 5px;
    cursor: grab;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
}

.github-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #A78BFA, #22D3EE);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
}

.github-scrollbar-thumb:active {
    cursor: grabbing;
    background: linear-gradient(90deg, #A78BFA, #22D3EE);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.8);
}

/* Modo claro */
body[data-theme="light"] .github-scrollbar {
    background: rgba(124, 58, 237, 0.08);
}

body[data-theme="light"] .github-scrollbar-thumb {
    background: linear-gradient(90deg, #7C3AED, #06B6D4);
    box-shadow: 0 0 6px rgba(124, 58, 237, 0.3);
}

body[data-theme="light"] .github-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #A78BFA, #22D3EE);
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}


/* ============================================================
   PARTÍCULAS DENTRO DE LA CAJUELA ReCITVEN (parte derecha)
   ============================================================ */
.research-card {
    position: relative;   /* ya lo tiene, pero asegúralo */
    overflow: hidden;     /* para que las partículas no se salgan */
}

.research-particles {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;           /* solo ocupa la mitad derecha */
    height: 100%;
    z-index: 0;
    pointer-events: none; /* para que no bloquee clics en la cajuela */
    opacity: 0.85;
    /* Degradado para que se difumine hacia la izquierda */
    -webkit-mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 0) 100%
    );
            mask-image: linear-gradient(
        to left,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.7) 60%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* ✅ El contenido de la cajuela va POR ENCIMA de las partículas */
.research-card .research-card-content {
    position: relative;
    z-index: 2;
}

/* ✅ Modo oscuro: partículas más visibles */
body[data-theme="dark"] .research-particles {
    opacity: 1;
}

/* ✅ Modo claro: partículas más sutiles */
body[data-theme="light"] .research-particles {
    opacity: 0.6;
}

/* ✅ Responsive: en móvil las partículas ocupan menos */
@media (max-width: 768px) {
    .research-particles {
        width: 55%;
        opacity: 0.5;
    }
}

@media (max-width: 480px) {
    .research-particles {
        width: 60%;
        opacity: 0.4;
    }
}


/* ============================================================
   ✅ PESTAÑAS DE AÑOS — ENCIMA del footer
   ============================================================ */
.github-years-tabs {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: -48px;
    margin-bottom: 6px;
    padding-top: 14px;             /* ← AUMENTADO: separa los botones de la línea */
    padding-bottom: 8px;
    border-top: 1px solid rgba(124, 58, 237, 0.1);
}

body[data-theme="dark"] .github-years-tabs {
    border-top-color: #30363D;

}

body[data-theme="light"] .github-years-tabs {
    border-top-color: #D0D7DE;

}

.github-year-btn {
    background: transparent;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
}

/* Modo oscuro: todos los años en blanco */
body[data-theme="dark"] .github-year-btn {
    color: #FFFFFF;
}

/* Modo claro: años inactivos en negro */
body[data-theme="light"] .github-year-btn {
    color: #000000;
}

.github-year-btn:hover {
    background: rgba(124, 58, 237, 0.15);
    color: var(--purple);
}

/* Año activo: blanco en ambos modos */
.github-year-btn.active {
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    color: #FFFFFF !important;
    font-weight: 700;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.4);
}


/* ============================================================
   ✅ CAMBIO DE TEMA INSTANTÁNEO
   ------------------------------------------------------------
   Bloquea TODAS las transiciones y animaciones mientras se
   cambia de tema. Se añade .theme-switching al <html> solo
   durante ~2 frames (32ms) y luego se quita.
   Resultado: cambio instantáneo, y todo lo demás (hover, AOS,
   transiciones) sigue funcionando cuando NO se cambia de tema.
   ============================================================ */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
}

/* ✅ También bloquea la transición del body cuando cambia el tema */
html.theme-switching body {
    transition: none !important;
}



/* ============================================================
   ✅ HOVER EN LAS CAJUELAS DEL HEXÁGONO
   ------------------------------------------------------------
   El .hex-face-back tiene pointer-events: none para no bloquear
   el clic del flip. Pero eso también desactiva los hover de las
   cajuelas internas. Aquí reactivamos el pointer-events SOLO
   en las cajuelas, y hacemos que el clic en ellas NO dispare el
   flip (usando stopPropagation en JS, ver abajo).
   ============================================================ */

/* 1. Reactivar pointer-events en las cajuelas de info */
/*.hex-back-inner .hex-info-item {
    pointer-events: auto;
    cursor: default;
}

/* 2. Reactivar pointer-events en el contenedor de info */
/*.hex-back-inner .hex-info {
    pointer-events: auto;
}

/* 3. El .hex-back-inner sigue sin capturar clics
      para que el clic fuera de las cajuelas SÍ voltee el hexágono */
/*.hex-back-inner {
    pointer-events: none;
}


/* ============================================================
   UNIÓN DIFUMINADA — PREVIEW → INFO (SIN LÍNEA DURA)
   ------------------------------------------------------------
   ✅ Elimina la línea divisoria
   ✅ Crea un fundido suave entre la imagen y la cajuela
   ✅ Se adapta al tema claro/oscuro
   ✅ Solución en 3 capas:
      1. Eliminar cualquier borde entre preview e info
      2. Difuminar la parte inferior del preview con blur
      3. Degradado al color exacto del fondo de la cajuela
   ============================================================ */

/* ---------- 1. ELIMINAR CUALQUIER BORDE ENTRE PREVIEW E INFO ---------- */
.project-preview,
.cert-image-wrapper {
    position: relative;
    margin-bottom: -1px;          /* Tapa el borde inferior del card */
    border-bottom: none !important;
    box-shadow: none !important;
    z-index: 2;                   /* Queda por encima del borde del card */
}

.project-info,
.cert-info {
    border-top: none !important;
    box-shadow: none !important;
}

/* Elimina el borde del card en la zona de unión */
.project-card,
.certification-card {
    overflow: hidden;
}

.project-card::before,
.certification-card::before {
    /* El ::before del card es el borde degradado.
       Le decimos que no se vea en la unión preview/info. */
    z-index: 0 !important;
}

/* ---------- 2. DIFUMINADO GRADUAL EN LA PARTE INFERIOR DEL PREVIEW ---------- */
.project-preview::after,
.cert-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;                 /* Altura del fundido */
    pointer-events: none;
    z-index: 3;                   /* Por encima de la imagen y del borde del card */

    /* ✅ Difuminado real y notorio */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* ✅ El blur aparece gradualmente de arriba a abajo */
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.7) 60%,
        black 100%
    );
            mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 30%,
        rgba(0, 0, 0, 0.7) 60%,
        black 100%
    );
}

/* ---------- 3. MODO OSCURO: degradado + difuminado ---------- */
body[data-theme="dark"] .project-preview::after,
body[data-theme="dark"] .cert-image-wrapper::after {
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 15, 0) 0%,
        rgba(10, 10, 15, 0.3) 40%,
        rgba(10, 10, 15, 0.7) 80%,
        rgba(10, 10, 15, 0.95) 100%
    );
}

/* ---------- 4. MODO CLARO: degradado + difuminado ---------- */
body[data-theme="light"] .project-preview::after,
body[data-theme="light"] .cert-image-wrapper::after {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(255, 255, 255, 0.7) 80%,
        rgba(255, 255, 255, 0.95) 100%
    );
}

/* ---------- 5. RESPONSIVE: fundido más pequeño en móvil ---------- */
@media (max-width: 768px) {
    .project-preview::after,
    .cert-image-wrapper::after {
        height: 45px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}

@media (max-width: 480px) {
    .project-preview::after,
    .cert-image-wrapper::after {
        height: 35px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* ---------- 6. ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
    .project-preview::after,
    .cert-image-wrapper::after {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}



/* ============================================================
   SECTION EYEBROW — Estilo LET'S CONNECT (centrado, debajo)
   ------------------------------------------------------------
   ✅ Debajo del título principal (display: block)
   ✅ Centrado horizontalmente
   ✅ Uppercase, letter-spacing amplio, morado
   ✅ Línea degradada centrada debajo del texto
   ============================================================ */

/* 1. Quitar la línea animada del título principal */
.section-title::after {
    display: none;
}

.section-title {
    padding-bottom: 0;
    animation: none;
    display: block;             /* ← asegura que el título ocupe su línea */
    margin-bottom: 0;
}

/* 2. Eyebrow debajo del título, centrado */
.section-eyebrow {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--white);
    margin: 16px auto 0;
    position: relative;
    display: block;             /* ← CLAVE: block para que baje */
    padding-bottom: 10px;
    text-align: center;
    line-height: 1.6;
    width: 100%;                /* ← ocupa toda la línea */
    max-width: 100%;
}

/* 3. Línea degradada centrada debajo del texto */
.section-eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--purple), var(--cyan));
    border-radius: 2px;
}

#stack .section-description {
     transform: translateY(60px);   /* ← baja SOLO el texto, sin empujar nada */
}

/* Modo claro: morado más oscuro para contraste */
body[data-theme="light"] .section-eyebrow {
    color: #000000;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .section-eyebrow {
        font-size: 0.72rem;
        letter-spacing: 2.5px;
        padding-bottom: 12px;
        margin-top: 14px;
    }
    .section-eyebrow::after {
        width: 50px;
        height: 2.5px;
    }
}

@media (max-width: 480px) {
    .section-eyebrow {
        font-size: 0.65rem;
        letter-spacing: 2px;
        padding-bottom: 10px;
        margin-top: 12px;
    }
    .section-eyebrow::after {
        width: 40px;
        height: 2px;
    }
}
/* ============================================================
   SEPARACIÓN DEL SECTION-HEADER DEL CONTENIDO
   ------------------------------------------------------------
   ✅ El bloque "título + eyebrow + descripción" se separa
      del contenido que viene debajo (grid, timeline, carrusel)
   ✅ Responsive: menos margen en móvil
   ============================================================ */

.section-header {
    margin-bottom: 60px;    /* ← separación con el contenido */
}


/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .section-header {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .section-header {
        margin-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .section-header {
        margin-bottom: 32px;
    }
}



/* ============================================================
   LÍNEA DEL EYEBROW — Animación "Underline Breathe"
   ------------------------------------------------------------
   ✅ La línea se expande y contrae (60px → 100px)
   ✅ Glow pulsante morado-cyan
   ✅ Se ve como la que tenía cada título antes
   ============================================================ */

.section-eyebrow::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 3px;
    width: 60px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #7C3AED 25%,
        #06B6D4 50%,
        #2DD4BF 75%,
        transparent 100%
    );
    border-radius: 3px;
    box-shadow:
        0 0 20px rgba(124, 58, 237, 0.8),
        0 0 40px rgba(6, 182, 212, 0.4);
    animation: underlineBreathe 3s ease-in-out infinite;
}

/* ---------- Animación: la línea respira ---------- */
@keyframes underlineBreathe {
    0%, 100% {
        width: 60px;
        opacity: 0.7;
        box-shadow:
            0 0 15px rgba(124, 58, 237, 0.6),
            0 0 30px rgba(6, 182, 212, 0.3);
    }
    50% {
        width: 100px;
        opacity: 1;
        box-shadow:
            0 0 25px rgba(124, 58, 237, 0.9),
            0 0 50px rgba(6, 182, 212, 0.5);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .section-eyebrow::after {
        width: 50px;
        height: 3px;
    }
    @keyframes underlineBreathe {
        0%, 100% { width: 50px; opacity: 0.7; }
        50%      { width: 80px; opacity: 1; }
    }
}

@media (max-width: 480px) {
    .section-eyebrow::after {
        width: 40px;
        height: 2px;
    }
    @keyframes underlineBreathe {
        0%, 100% { width: 40px; opacity: 0.7; }
        50%      { width: 65px; opacity: 1; }
    }
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
    .section-eyebrow::after {
        animation: none;
    }
}
/* ============================================================
   MODAL VISOR PDF — CENTRADO EN EL HERO
   ------------------------------------------------------------
   ✅ Anclado al hero (position: absolute)
   ✅ Aparece desde ARRIBA (align-items: flex-start)
   ✅ Solo difumina el fondo (backdrop-filter sin background)
   ✅ SIN botón de descargar
   ✅ SIN botón "Volver al portafolio"
   ✅ Barra de progreso animada mientras carga el PDF
   ✅ Botón X con animación optimizada (overshoot + glow)
   ============================================================ */

/* ---------- Contenedor del modal (anclado al hero) ---------- */
.hero-pdf-modal {
    position: fixed;                  /* ← fixed en vez de absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;                        /* ← SIN padding fijo (lo calcula JS) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}


.hero-pdf-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---------- Overlay (SOLO difuminado, sin cajón gris) ---------- */
.hero-pdf-overlay {
    position: absolute;
    inset: 0;
    background: transparent;              /* ← sin capa gris */
    backdrop-filter: blur(14px);          /* ← solo difuminado */
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    z-index: 0;
}

/* Ligero oscurecimiento (opcional, muy sutil) */
body[data-theme="dark"] .hero-pdf-overlay {
    background: rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .hero-pdf-overlay {
    background: rgba(255, 255, 255, 0.1);
}

/* ✅ El panel se posiciona dinámicamente con JS */
.hero-pdf-panel {
    position: absolute;                /* ← absolute dentro del modal */
    width: 100%;
    max-width: 1000px;
    /* top y left se calculan desde JS */
    height: 86vh;
    max-height: 900px;
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(124, 58, 237, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-40px) scale(0.95);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.4s ease;
    z-index: 1;
}


/* ✅ Borde degradado (como el resto de la web) */
.hero-pdf-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 33%,
        #2DD4BF 66%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.hero-pdf-modal.open .hero-pdf-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.hero-pdf-modal.open .hero-pdf-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

body[data-theme="dark"] .hero-pdf-panel {
    background: linear-gradient(135deg, rgba(15, 15, 30, 0.98) 0%, rgba(25, 20, 45, 0.98) 100%);
}

body[data-theme="light"] .hero-pdf-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 245, 255, 0.99) 100%);
}

/* ============================================================
   HEADER DEL MODAL
   ============================================================ */
.hero-pdf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

body[data-theme="dark"] .hero-pdf-header {
    border-bottom-color: rgba(124, 58, 237, 0.3);
}

.hero-pdf-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.hero-pdf-title i {
    color: #EF4444;
    font-size: 1.1rem;
}

/* ============================================================
   BOTÓN CERRAR (X) — Animación optimizada
   ------------------------------------------------------------
   ✅ Rotación fluida 0° → 90° con curva suave (overshoot)
   ✅ Glow progresivo en hover
   ✅ Escala sutil (no agresiva)
   ✅ will-change para acelerar la animación
   ✅ Respeta prefers-reduced-motion
   ============================================================ */
.hero-pdf-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
    font-size: 1.05rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* ✅ Acelerar la animación con GPU */
    will-change: transform, background, box-shadow;
    /* ✅ Curva más suave y elegante */
    transition:
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);  /* ← overshoot suave */
}

/* ✅ El icono X rota por separado (más fluido) */
.hero-pdf-close i {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

/* ---------- HOVER ---------- */
.hero-pdf-close:hover {
    background: #EF4444;
    border-color: transparent;
    color: #FFFFFF;
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.6),
        0 0 40px rgba(239, 68, 68, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

.hero-pdf-close:hover i {
    transform: rotate(90deg) scale(1.1);
}

/* ---------- CLICK (activo) ---------- */
.hero-pdf-close:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.hero-pdf-close:active i {
    transform: rotate(90deg) scale(0.9);
    transition-duration: 0.1s;
}

/* ---------- FOCUS (accesibilidad) ---------- */
.hero-pdf-close:focus-visible {
    outline: 2px solid #EF4444;
    outline-offset: 3px;
}

/* ---------- Modo claro ---------- */
body[data-theme="light"] .hero-pdf-close {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

body[data-theme="light"] .hero-pdf-close:hover {
    background: #EF4444;
    border-color: #EF4444;
    color: #FFFFFF;
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.5),
        0 0 40px rgba(239, 68, 68, 0.25),
        inset 0 0 15px rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

body[data-theme="light"] .hero-pdf-close:hover i {
    color: #FFFFFF;
    transform: rotate(90deg) scale(1.1);
}

/* ============================================================
   CUERPO DEL MODAL (iframe con el PDF)
   ============================================================ */
.hero-pdf-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;                     /* ← el scroll lo maneja el iframe */
}

body[data-theme="light"] .hero-pdf-body {
    background: rgba(0, 0, 0, 0.04);
}

.hero-pdf-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
    /* ✅ Permitir scroll dentro del PDF */
    overflow: auto;
}


/* ============================================================
   MODAL VISOR PDF — CENTRADO EN EL HERO
   ------------------------------------------------------------
   ✅ Anclado al hero (position: fixed)
   ✅ Aparece desde ARRIBA (align-items: flex-start)
   ✅ Solo difumina el fondo (backdrop-filter sin background)
   ✅ SIN botón de descargar
   ✅ Barra de progreso animada mientras carga el PDF
   ✅ Botón X con animación optimizada (overshoot + glow)
   ✅ Fallback para móvil (no puede mostrar PDFs en iframe)
   ============================================================ */

/* ---------- Contenedor del modal ---------- */
.hero-pdf-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hero-pdf-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---------- Overlay (SOLO difuminado) ---------- */
.hero-pdf-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    z-index: 0;
}

body[data-theme="dark"] .hero-pdf-overlay {
    background: rgba(0, 0, 0, 0.15);
}

body[data-theme="light"] .hero-pdf-overlay {
    background: rgba(255, 255, 255, 0.1);
}

/* ---------- Panel del modal ---------- */
.hero-pdf-panel {
    position: absolute;
    width: 100%;
    max-width: 1000px;
    height: 86vh;
    max-height: 900px;
    background: var(--card-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(124, 58, 237, 0.35);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-40px) scale(0.95);
    opacity: 0;
    transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.4s ease;
    z-index: 1;
}

/* Borde degradado */
.hero-pdf-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        135deg,
        #7C3AED 0%,
        #06B6D4 33%,
        #2DD4BF 66%,
        #EC4899 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.hero-pdf-modal.open .hero-pdf-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

body[data-theme="dark"] .hero-pdf-panel {
    background: linear-gradient(135deg, rgba(15, 15, 30, 0.98) 0%, rgba(25, 20, 45, 0.98) 100%);
}

body[data-theme="light"] .hero-pdf-panel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 245, 255, 0.99) 100%);
}

/* ============================================================
   HEADER DEL MODAL
   ============================================================ */
.hero-pdf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.2);
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

body[data-theme="dark"] .hero-pdf-header {
    border-bottom-color: rgba(124, 58, 237, 0.3);
}

.hero-pdf-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.hero-pdf-title i {
    color: #EF4444;
    font-size: 1.1rem;
}

/* ============================================================
   BOTÓN CERRAR (X) — Animación optimizada
   ============================================================ */
.hero-pdf-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
    font-size: 1.05rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    will-change: transform, background, box-shadow;
    transition:
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-pdf-close i {
    display: inline-block;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.hero-pdf-close:hover {
    background: #EF4444;
    border-color: transparent;
    color: #FFFFFF;
    box-shadow:
        0 0 20px rgba(239, 68, 68, 0.6),
        0 0 40px rgba(239, 68, 68, 0.3),
        inset 0 0 15px rgba(255, 255, 255, 0.15);
    transform: scale(1.08);
}

.hero-pdf-close:hover i {
    transform: rotate(90deg) scale(1.1);
}

.hero-pdf-close:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

.hero-pdf-close:active i {
    transform: rotate(90deg) scale(0.9);
    transition-duration: 0.1s;
}

.hero-pdf-close:focus-visible {
    outline: 2px solid #EF4444;
    outline-offset: 3px;
}

body[data-theme="light"] .hero-pdf-close {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ============================================================
   CUERPO DEL MODAL (iframe con el PDF)
   ============================================================ */
.hero-pdf-body {
    position: relative;
    flex: 1;
    min-height: 0;
    background: rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

body[data-theme="light"] .hero-pdf-body {
    background: rgba(0, 0, 0, 0.04);
}

.hero-pdf-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: transparent;
    overflow: auto;
}

/* ============================================================
   FALLBACK PARA MÓVIL — Cuando el navegador no puede mostrar PDFs
   ============================================================ */
.hero-pdf-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px 24px;
    text-align: center;
    height: 100%;
    color: var(--text-color);
}

.hero-pdf-fallback > i {
    font-size: 4rem;
    color: #EF4444;
    margin-bottom: 8px;
}

.hero-pdf-fallback p {
    font-size: 0.95rem;
    color: var(--text-muted);
    max-width: 320px;
    margin: 0;
    line-height: 1.5;
}

.hero-pdf-fallback-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    background: var(--purple);
    color: #FFFFFF !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.hero-pdf-fallback-btn:hover {
    background: #6D28D9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
}

.hero-pdf-fallback-btn i {
    font-size: 0.9rem;
    color: #FFFFFF;
}

/* ============================================================
   BARRA DE PROGRESO DEL PDF
   ============================================================ */
.hero-pdf-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(124, 58, 237, 0.15);
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-pdf-progress.visible {
    opacity: 1;
}

.hero-pdf-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        #7C3AED 0%,
        #06B6D4 50%,
        #2DD4BF 100%
    );
    background-size: 200% 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
    animation: progressShimmer 2s linear infinite;
    box-shadow:
        0 0 10px rgba(124, 58, 237, 0.8),
        0 0 20px rgba(6, 182, 212, 0.5);
}

@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   BLOQUEAR SCROLL DEL BODY
   ============================================================ */
body.hero-pdf-open {
    overflow: hidden;
}

/* ============================================================
   RESPONSIVE — MODAL PDF
   ============================================================ */
@media (max-width: 992px) {
    .hero-pdf-modal {
        padding: 80px 20px 20px;
    }

    .hero-pdf-panel {
        max-width: 85% !important;      /* ✅ MÁS ANGOSTO */
        height: 82vh;
        border-radius: 16px;
    }
}

@media (max-width: 768px) {
    .hero-pdf-modal {
        padding: 30px 10px 10px;
    }

    .hero-pdf-panel {
        max-width: 92% !important;      /* ✅ MÁS ANGOSTO */
        height: 85vh;
        border-radius: 14px;
    }

    .hero-pdf-header {
        padding: 12px 16px;
    }

    .hero-pdf-title {
        font-size: 0.85rem;
    }

    .hero-pdf-close {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    .hero-pdf-progress {
        height: 4px;
    }
}

@media (max-width: 576px) {
    .hero-pdf-panel {
        max-width: 94% !important;      /* ✅ MÁS ANGOSTO */
        height: 86vh;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .hero-pdf-modal {
        padding: 40px 0 0;
    }

    .hero-pdf-panel {
        max-width: 96% !important;      /* ✅ MÁS ANGOSTO */
        height: 88vh;
        max-height: 88vh;
        border-radius: 10px;
        border: 1px solid var(--card-border);
    }

    .hero-pdf-header {
        padding: 10px 14px;
    }

    .hero-pdf-title {
        font-size: 0.78rem;
    }

    .hero-pdf-close {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        border-radius: 10px;
    }

    /* Fallback en móvil */
    .hero-pdf-fallback {
        padding: 24px 16px;
        gap: 12px;
    }

    .hero-pdf-fallback > i {
        font-size: 3rem;
    }

    .hero-pdf-fallback p {
        font-size: 0.85rem;
    }

    .hero-pdf-fallback-btn {
        padding: 10px 20px;
        font-size: 0.82rem;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 360px) {
    .hero-pdf-panel {
        max-width: 98% !important;
        height: 90vh;
        max-height: 90vh;
        border-radius: 8px;
    }
}

/* ============================================================
   ACCESIBILIDAD — Reducir movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-pdf-close,
    .hero-pdf-close i {
        transition-duration: 0.15s !important;
    }
    .hero-pdf-close:hover i {
        transform: none;
    }
    .hero-pdf-progress-bar {
        animation: none;
    }
}


/* ============================================================
   BARRA DE PROGRESO DEL PDF
   ------------------------------------------------------------
   ✅ Aparece mientras el PDF carga
   ✅ Degradado morado-cyan animado (shimmer)
   ✅ Se desvanece al terminar
   ============================================================ */
.hero-pdf-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(124, 58, 237, 0.15);
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-pdf-progress.visible {
    opacity: 1;
}

.hero-pdf-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        #7C3AED 0%,
        #06B6D4 50%,
        #2DD4BF 100%
    );
    background-size: 200% 100%;
    border-radius: 0 3px 3px 0;
    transition: width 0.3s ease;
    animation: progressShimmer 2s linear infinite;
    box-shadow:
        0 0 10px rgba(124, 58, 237, 0.8),
        0 0 20px rgba(6, 182, 212, 0.5);
}

@keyframes progressShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
   BLOQUEAR SCROLL DEL BODY
   ============================================================ */
body.hero-pdf-open {
    overflow: hidden;
}

/* ============================================================
   RESPONSIVE — MODAL PDF
   ============================================================ */
@media (max-width: 992px) {
    .hero-pdf-modal {
        padding: 80px 20px 20px;
    }

    .hero-pdf-panel {
        max-width: 80%;
        height: 82vh;
    }
}

@media (max-width: 768px) {
    .hero-pdf-modal {
        padding: 30px 10px 10px;
    }

    .hero-pdf-panel {
        max-width: 80%;
        height: 88vh;
        border-radius: 14px;
    }

    .hero-pdf-header {
        padding: 12px 16px;
    }

    .hero-pdf-title {
        font-size: 0.85rem;
    }

    .hero-pdf-close {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
        border-radius: 10px;
    }

    /* ✅ Barra de progreso más gruesa en móvil */
    .hero-pdf-progress {
        height: 4px;
    }
}

@media (max-width: 480px) {
    .hero-pdf-modal {
        padding: 40px 0 0;
    }

    .hero-pdf-panel {
        max-width: 80%;
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);
        border-radius: 0;
        border: none;
    }

    .hero-pdf-header {
        padding: 10px 14px;
    }

    .hero-pdf-title {
        font-size: 0.78rem;
    }

    .hero-pdf-close {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
        border-radius: 10px;
    }
}

/* ============================================================
   ACCESIBILIDAD — Reducir movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .hero-pdf-close,
    .hero-pdf-close i {
        transition-duration: 0.15s !important;
    }
    .hero-pdf-close:hover i {
        transform: none;
    }
    .hero-pdf-progress-bar {
        animation: none;
    }
}



/* ============================================================
   PARTÍCULAS DETRÁS DEL CONTENIDO (.card-particles)
   ------------------------------------------------------------
   ✅ El canvas va DETRÁS del contenido (z-index: 0)
   ✅ El contenido va ENCIMA (z-index: 1)
   ✅ NO afecta layout, colores, padding ni texto
   ✅ NO usa overflow: hidden (evita que la cajuela desaparezca)
   ✅ NO usa isolation (evita romper el stacking context)
   ✅ Compatible con project-card, education-card, github-card, etc.
   ============================================================ */

/* ---------- 1. La cajuela con partículas ---------- */
.card-particles {
    position: relative;              /* ← necesario para posicionar el canvas */
    /* ❌ NO usamos overflow: hidden (rompía la cajuela) */
    /* ❌ NO usamos isolation: isolate (rompía el stacking) */
    /* ✅ El resto del estilo (background, border, padding) NO se toca */
}

/* ---------- 2. El canvas de partículas va DETRÁS ---------- */
.card-particles > canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;                      /* ← DETRÁS del contenido */
    pointer-events: none;            /* ← no bloquea clics */
    margin: 0;
    padding: 0;
    border: none;
    opacity: 1;                    /* ← sutiles pero visibles */
    /* ✅ SIN !important para no romper otros estilos */
}

/* ---------- 3. El contenido va ENCIMA ---------- */
.card-particles > *:not(canvas) {
    position: relative;              /* ← necesario para z-index */
    z-index: 1;                      /* ← ENCIMA del canvas */
}

/* ============================================================
   EXCEPCIONES: elementos con position: absolute propio
   ------------------------------------------------------------
   Badges, gifs, logos, etc. que ya usan position: absolute
   necesitan un z-index más alto para verse sobre las partículas.
   ============================================================ */

/* Proyectos — badge, gif y logo */
.card-particles .project-badge,
.card-particles .project-gif,
.card-particles .project-logo {
    z-index: 2;
}

/* Certificaciones — logo de la entidad y año */
.card-particles .cert-brand-logo,
.card-particles .cert-year {
    z-index: 2;
}

/* Proyectos — overlay de unión preview/info (blur) */
.card-particles .project-preview::after {
    z-index: 2;
}

/* ============================================================
   ReCITVEN — ya tiene su propio contenedor (.research-particles)
   ------------------------------------------------------------
   No necesita .card-particles, pero aseguramos el z-index.
   ============================================================ */
.research-card .research-particles {
    z-index: 0;
}

.research-card .research-card-content {
    position: relative;
    z-index: 1;
}

/* ============================================================
   MODO CLARO — Opacidad de partículas más sutil
   ============================================================ */
body[data-theme="light"] .card-particles > canvas {
    opacity: 0.55;
}

/* ============================================================
   RESPONSIVE — Menos opacidad en móvil (rendimiento)
   ============================================================ */
@media (max-width: 768px) {
    .card-particles > canvas {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .card-particles > canvas {
        opacity: 1;
    }
}

/* ============================================================
   ACCESIBILIDAD — Reducir movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .card-particles > canvas {
        display: none;
    }
}





/* ============================================================
   ✅ BOTÓN COPIAR EN CANALES DE CONTACTO
   ============================================================ */

/* --- Ajustar el canal para que quepa el botón --- */
.contact-channel-item {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    cursor: pointer;
}

.contact-channel-item .contact-channel-info {
    flex: 1;
    min-width: 0;
}

.contact-channel-item .contact-channel-info p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Botón de copiar: círculo morado + icono blanco --- */
.contact-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    margin-left: auto;
    margin-right: 4px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    color: #FFFFFF;
    cursor: pointer;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.35),
        0 0 0 1px rgba(167, 139, 250, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition:
        background 0.3s ease,
        transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        box-shadow 0.3s ease;
}

.contact-copy-btn i {
    color: #FFFFFF;
    font-size: 1.05rem;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.2s ease;
}

.contact-copy-btn:hover {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    transform: scale(1.1);
    box-shadow:
        0 6px 18px rgba(124, 58, 237, 0.55),
        0 0 25px rgba(124, 58, 237, 0.45),
        0 0 0 1px rgba(167, 139, 250, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.contact-copy-btn:hover i { transform: scale(1.1); }
.contact-copy-btn:active { transform: scale(0.95); transition-duration: 0.1s; }
.contact-copy-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

/* --- Estado "copiado" --- */
.contact-copy-btn.copied {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow:
        0 4px 12px rgba(34, 197, 94, 0.5),
        0 0 25px rgba(34, 197, 94, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: copyPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact-copy-btn.copied i { color: #FFFFFF; }

@keyframes copyPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* --- Modo claro --- */
body[data-theme="light"] .contact-copy-btn {
    background: linear-gradient(135deg, #7C3AED 0%, #5B21B6 100%);
    box-shadow:
        0 4px 12px rgba(124, 58, 237, 0.25),
        0 0 0 1px rgba(124, 58, 237, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body[data-theme="light"] .contact-copy-btn:hover {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);
    box-shadow:
        0 6px 18px rgba(124, 58, 237, 0.45),
        0 0 25px rgba(124, 58, 237, 0.35),
        0 0 0 1px rgba(124, 58, 237, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* --- Toast --- */
.copy-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #7C3AED, #06B6D4);
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow:
        0 8px 24px rgba(124, 58, 237, 0.4),
        0 0 20px rgba(124, 58, 237, 0.3);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-toast i { font-size: 1rem; color: #FFFFFF; }

/* --- Responsive --- */
@media (max-width: 480px) {
    .contact-copy-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin-right: 6px;
    }
    .contact-copy-btn i { font-size: 0.95rem; }
    .copy-toast { bottom: 70px; padding: 10px 18px; font-size: 0.82rem; }
}



/* ============================================================
   ANTI-SELECCIÓN DE TEXTO Y PROTECCIÓN
   ------------------------------------------------------------
   ✅ Bloquea selección de texto en todo el sitio
   ✅ Permite selección en inputs y textareas
   ✅ Bloquea drag & drop de imágenes
   ✅ Bloquea callout en iOS (menú al mantener presionado)
   ============================================================ */

body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Permitir selección SOLO en campos de formulario */
input,
textarea,
[contenteditable="true"] {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* Bloquear drag de imágenes */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: auto;
}

/* Bloquear drag de enlaces */
a {
    -webkit-user-drag: none;
    user-drag: none;
}

/* Imágenes específicas del portafolio */
.hero-image,
.project-image,
.project-gif,
.cert-image,
.university-logo img,
.publication-logo img,
.cert-brand-logo,
.profile-photo {
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    user-drag: none;
    pointer-events: auto;
}


/* ============================================================
   MARGEN LATERAL UNIFICADO — TODO EL CONTENIDO
   ------------------------------------------------------------
   ✅ Se aplica SOLO al <main>, no al footer
   ✅ Secciones internas NO tienen margen propio (usan padding)
   ✅ Responsive con un solo breakpoint por tamaño
   ============================================================ */

.main-wrapper {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}

/* ✅ Las secciones internas ocupan el 100% del main (sin margen extra) */
.main-wrapper > .section,
.main-wrapper > .section-projects,
.main-wrapper > .section-education,
.main-wrapper > .section-contact,
.main-wrapper > .hero-section {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

/* ============================================================
   RESPONSIVE — Un solo punto de control de márgenes
   ============================================================ */

/* Tablet grande / laptop pequeña */
@media (max-width: 1200px) {
    .main-wrapper {
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .main-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* Móvil */
@media (max-width: 768px) {
    .main-wrapper {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Móvil pequeño */
@media (max-width: 480px) {
    .main-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   AJUSTES DE ESPACIO INTERNO POR PROYECTO (USANDO ID)
   ============================================================ */

/* SIGENOR — Equilibrado */
#card-sigenor .project-actions {
    padding-top: 40px;
}

/* SIEP — Un poco más de espacio (contenido extenso) */
#card-siep .project-actions {
    padding-top: 65px;
}

/* SIGPAZ — Equilibrado */
#card-sigpaz .project-actions {
    padding-top: 33px;
}

/* PROJECT CELESTIA — Menos espacio (contenido corto) */
#card-celestia .project-actions {
    padding-top: 69px;
}





/* ============================================================
   JUSTIFICAR TEXTO DE LA SECCIÓN "SOBRE MÍ"
   ============================================================ */

/* Párrafo principal */
.about-description {
    text-align: justify;
    text-justify: inter-word; /* Mejor distribución en navegadores compatibles */
    hyphens: auto;            /* Opcional: divide palabras largas si es necesario */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    word-spacing: normal;
}

/* Título y subtítulo se mantienen alineados a la izquierda (o como los tengas) */
.about-title,
.about-text-col h3 {
    text-align: left;
}



/* ============================================================
   BAJAR TAGS Y MÉTRICAS EN SIEP Y PROJECT CELESTIA
   - El espacio sobrante se acumula arriba de los tags.
   - Tags, métricas y botones quedan agrupados al fondo.
   ============================================================ */

@media (min-width: 992px) {

    /* ✅ SIEP — Bajar tags hacia el fondo */
    #card-siep .project-tags {
        margin-top: auto;      /* Absorbe el espacio sobrante */
        padding-top: 20px;     /* Ajusta este valor si necesitas más/menos aire */
    }

    /* ✅ SIEP — Métricas justo debajo de los tags */
    #card-siep .project-metrics {
        margin-top: 10px;
        margin-bottom: 5px;
    }

    /* ✅ SIEP — Botones al fondo */
    #card-siep .project-actions {
        margin-top: 0;
        padding-top: 48px;
    }


    /* ✅ PROJECT CELESTIA — Bajar tags hacia el fondo */
    #card-celestia .project-tags {
        margin-top: auto;      /* Absorbe el espacio sobrante */
        padding-top: 20px;     /* Ajusta este valor si necesitas más/menos aire */
    }

    /* ✅ PROJECT CELESTIA — Métricas justo debajo de los tags */
    #card-celestia .project-metrics {
        margin-top: 43px;
        margin-bottom: 5px;
    }

    /* ✅ PROJECT CELESTIA — Botones al fondo */
    #card-celestia .project-actions {
        margin-top: 0;
        padding-top: 20px;
    }
}





/* ============================================================
   CLASE COMPARTIDA PARA TODO EL TEXTO PRINCIPAL
   - Todos los párrafos principales del sitio usan el mismo
     tamaño que "Sobre mí".
   - Se adapta a responsive automáticamente.
   ============================================================ */

.text-main {
    font-size: 1rem;           /* Escritorio: 16px */
    line-height: 1.7;
    color: inherit;
}

/* ✅ En responsive (< 992px) reduce el tamaño */
@media (max-width: 991.98px) {
    .text-main {
        font-size: 0.95rem;    /* Móvil/tablet: 15.2px */
        line-height: 1.6;
    }
}

/* ✅ Texto justificado SOLO para párrafos largos */
.text-main.text-justify {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}







/* ============================================================
   ✅ BOTONES DE TEMA E IDIOMA — PC + MÓVIL
   ------------------------------------------------------------
   - MODO OSCURO: fondo con degradado morado-cyan (activo)
   - MODO CLARO:  fondo morado sólido (#7C3AED) en el ACTIVO
                  y transparente en el INACTIVO
   - Al hacer hover: borde degradado de 4 colores
     (mismo que las cajuelas de experiencia)
   - Solo aplica en móvil/tablet (≤ 991.98px)
   ============================================================ */

@media (max-width: 991.98px) {

    /* ---------- Contenedor de controles ---------- */
    .mobile-nav-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: auto;
    }

    /* ============================================
       BOTÓN DE TEMA — Cuadrado
       ============================================ */
    .mobile-nav-controls .btn-theme-toggle {
        position: relative;
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
        border: none;

        /* ✅ Degradado morado-cyan de fondo (modo oscuro por defecto) */
        background: linear-gradient(135deg, #7C3AED, #06B6D4);

        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        padding: 0;

        /* ✅ Sombra/glow del degradado */
        box-shadow:
            0 4px 12px rgba(124, 58, 237, 0.4),
            0 0 15px rgba(124, 58, 237, 0.3);

        transition:
            box-shadow 0.3s ease,
            transform 0.2s ease,
            filter 0.3s ease,
            background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* ✅ MODO CLARO: fondo morado sólido (sin degradado) */
    body[data-theme="light"] .mobile-nav-controls .btn-theme-toggle {
        background: #7C3AED;
    }

    /* ✅ BORDE DEGRADADO DE 4 COLORES (mismo que las cajuelas de experiencia) */
    .mobile-nav-controls .btn-theme-toggle::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(
            135deg,
            #7C3AED 0%,
            #06B6D4 33%,
            #2DD4BF 66%,
            #EC4899 100%
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 2;
    }

    .mobile-nav-controls .btn-theme-toggle:hover::before,
    .mobile-nav-controls .btn-theme-toggle:active::before {
        opacity: 1;
    }

    .mobile-nav-controls .btn-theme-toggle:hover {
        filter: brightness(1.15);
        box-shadow:
            0 4px 18px rgba(124, 58, 237, 0.6),
            0 0 25px rgba(6, 182, 212, 0.5),
            0 0 40px rgba(236, 72, 153, 0.3);
    }

    /* ✅ MODO CLARO: hover con morado más oscuro */
    body[data-theme="light"] .mobile-nav-controls .btn-theme-toggle:hover {
        background: #6D28D9;
        filter: none;
    }

    .mobile-nav-controls .btn-theme-toggle:active {
        transform: scale(0.92);
    }

    .mobile-nav-controls .btn-theme-toggle:focus-visible {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }

    /* Los dos iconos superpuestos dentro del botón */
    .mobile-nav-controls .btn-theme-toggle i {
        position: absolute;
        font-size: 1.1rem;

        /* ✅ Icono blanco puro */
        color: #FFFFFF !important;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);

        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
        z-index: 1;
    }

    /* Modo OSCURO: mostrar luna */
    body[data-theme="dark"] .mobile-nav-controls .btn-theme-toggle .icon-moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
    body[data-theme="dark"] .mobile-nav-controls .btn-theme-toggle .icon-sun {
        opacity: 0;
        transform: rotate(-90deg) scale(0.4);
    }

    /* Modo CLARO: mostrar sol */
    body[data-theme="light"] .mobile-nav-controls .btn-theme-toggle .icon-moon {
        opacity: 0;
        transform: rotate(90deg) scale(0.4);
    }
    body[data-theme="light"] .mobile-nav-controls .btn-theme-toggle .icon-sun {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }


    /* ============================================
       BOTÓN DE IDIOMA — Cuadrado
       ============================================ */
    .mobile-nav-controls .btn-lang-toggle {
        position: relative;
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 10px;
        border: none;

        /* ✅ Degradado morado-cyan de fondo (modo oscuro por defecto) */
        background: linear-gradient(135deg, #7C3AED, #06B6D4);

        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        padding: 0;

        /* ✅ Sombra/glow del degradado */
        box-shadow:
            0 4px 12px rgba(124, 58, 237, 0.4),
            0 0 15px rgba(124, 58, 237, 0.3);

        transition:
            box-shadow 0.3s ease,
            transform 0.2s ease,
            filter 0.3s ease,
            background 0.3s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* ✅ MODO CLARO: fondo morado sólido (sin degradado) */
    body[data-theme="light"] .mobile-nav-controls .btn-lang-toggle {
        background: #7C3AED;
    }

    /* ✅ BORDE DEGRADADO DE 4 COLORES (mismo que las cajuelas de experiencia) */
    .mobile-nav-controls .btn-lang-toggle::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: linear-gradient(
            135deg,
            #7C3AED 0%,
            #06B6D4 33%,
            #2DD4BF 66%,
            #EC4899 100%
        );
        -webkit-mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.35s ease;
        z-index: 2;
    }

    .mobile-nav-controls .btn-lang-toggle:hover::before,
    .mobile-nav-controls .btn-lang-toggle:active::before {
        opacity: 1;
    }

    .mobile-nav-controls .btn-lang-toggle:hover {
        filter: brightness(1.15);
        box-shadow:
            0 4px 18px rgba(124, 58, 237, 0.6),
            0 0 25px rgba(6, 182, 212, 0.5),
            0 0 40px rgba(236, 72, 153, 0.3);
    }

    /* ✅ MODO CLARO: hover con morado más oscuro */
    body[data-theme="light"] .mobile-nav-controls .btn-lang-toggle:hover {
        background: #6D28D9;
        filter: none;
    }

    .mobile-nav-controls .btn-lang-toggle:active {
        transform: scale(0.92);
    }

    .mobile-nav-controls .btn-lang-toggle:focus-visible {
        outline: 2px solid #FFFFFF;
        outline-offset: 2px;
    }

    /* Los dos textos superpuestos dentro del botón */
    .mobile-nav-controls .btn-lang-toggle span {
        position: absolute;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.5px;

        /* ✅ Texto blanco puro */
        color: #FFFFFF !important;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);

        transition: opacity 0.35s ease, transform 0.35s ease;
        pointer-events: none;
        z-index: 1;
    }

    /* Estado ES (por defecto) */
    body:not(.lang-en) .mobile-nav-controls .btn-lang-toggle .lang-es {
        opacity: 1;
        transform: translateY(0);
    }
    body:not(.lang-en) .mobile-nav-controls .btn-lang-toggle .lang-en {
        opacity: 0;
        transform: translateY(15px);
    }

    /* Estado EN */
    body.lang-en .mobile-nav-controls .btn-lang-toggle .lang-es {
        opacity: 0;
        transform: translateY(-15px);
    }
    body.lang-en .mobile-nav-controls .btn-lang-toggle .lang-en {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   ✅ PC (ESCRITORIO) — Interruptores en MODO CLARO
   ------------------------------------------------------------
   - Botón ACTIVO: fondo morado sólido (#7C3AED)
   - Botón INACTIVO: fondo transparente
   - Iconos/textos en blanco cuando activo, morado cuando inactivo
   - Hover: morado más oscuro en el activo
   ============================================================ */

@media (min-width: 992px) {

    /* ============================================
       BOTÓN DE TEMA — Modo claro
       ============================================ */
    body[data-theme="light"] .btn-theme.active {
        background: #7C3AED !important;
        color: #FFFFFF !important;
        box-shadow: 0 0 12px rgba(124, 58, 237, 0.4) !important;
    }

    body[data-theme="light"] .btn-theme.active i {
        color: #FFFFFF !important;
        text-shadow: 0 0 6px rgba(255, 255, 255, 0.5) !important;
        opacity: 1 !important;
    }

    body[data-theme="light"] .btn-theme.active:hover {
        background: #6D28D9 !important;
        box-shadow: 0 0 18px rgba(124, 58, 237, 0.6) !important;
    }

    /* ✅ Botón INACTIVO — transparente */
    body[data-theme="light"] .btn-theme:not(.active) {
        background: transparent !important;
        color: #7C3AED !important;
        box-shadow: none !important;
    }

    body[data-theme="light"] .btn-theme:not(.active) i {
        color: #7C3AED !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    body[data-theme="light"] .btn-theme:not(.active):hover {
        background: rgba(124, 58, 237, 0.1) !important;
    }


    /* ============================================
       BOTÓN DE IDIOMA — Modo claro
       ============================================ */
    body[data-theme="light"] .btn-lang.active {
        background: #7C3AED !important;
        color: #FFFFFF !important;
        box-shadow: 0 0 12px rgba(124, 58, 237, 0.4) !important;
    }

    body[data-theme="light"] .btn-lang.active:hover {
        background: #6D28D9 !important;
        box-shadow: 0 0 18px rgba(124, 58, 237, 0.6) !important;
    }

    /* ✅ Botón INACTIVO — transparente */
    body[data-theme="light"] .btn-lang:not(.active) {
        background: transparent !important;
        color: #7C3AED !important;
        box-shadow: none !important;
    }

    body[data-theme="light"] .btn-lang:not(.active):hover {
        background: rgba(124, 58, 237, 0.1) !important;
    }

}



/* ============================================================
   ✅ MENÚ DESPLEGABLE MÓVIL — ESTILO PREMIUM COMPLETO
   ------------------------------------------------------------
   ☀️ Modo claro  → iconos y chevrons MORADOS
   🌙 Modo oscuro → iconos y chevrons con DEGRADADO
   ✅ Indicador activo con brillo animado
   ✅ Chevrons rediseñados (círculos)
   ✅ Animaciones GPU-friendly
   ============================================================ */

@media (max-width: 991.98px) {

    /* ============================================================
       1. ICONO PRINCIPAL — BASE
       ============================================================ */
    .dropdown-item i:first-child {
        font-size: 1.3rem;
        width: 30px;
        text-align: center;
        flex-shrink: 0;
        transition:
            transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            filter 0.35s ease;
        will-change: transform;
    }

    /* 🌙 MODO OSCURO — DEGRADADO */
    body[data-theme="dark"] .dropdown-item i:first-child {
        background: linear-gradient(135deg, var(--purple), var(--cyan));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    body[data-theme="dark"] .dropdown-item:hover i:first-child {
        background: linear-gradient(135deg, #A78BFA, #22D3EE);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    body[data-theme="dark"] .dropdown-item.active i:first-child {
        background: linear-gradient(135deg, #A78BFA, #22D3EE);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
    }

    /* ☀️ MODO CLARO — MORADO SÓLIDO */
    body[data-theme="light"] .dropdown-item i:first-child {
        background: none;
        -webkit-background-clip: initial;
        -webkit-text-fill-color: initial;
        background-clip: initial;
        color: #7C3AED;
    }

    body[data-theme="light"] .dropdown-item:hover i:first-child {
        color: #6D28D9;
    }

    body[data-theme="light"] .dropdown-item.active i:first-child {
        color: #7C3AED;
    }

    /* ============================================================
       2. ITEM DEL MENÚ — BASE MEJORADA
       ============================================================ */
    .dropdown-item {
        position: relative;
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px 20px;
        text-decoration: none;
        overflow: hidden;
        isolation: isolate;
        will-change: background-color, transform;
        transition:
            background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
            transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* ✅ Barra lateral izquierda (indicador activo) */
    .dropdown-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(0);
        width: 4px;
        height: 60%;
        background: linear-gradient(180deg, #7C3AED, #06B6D4, #2DD4BF);
        border-radius: 0 4px 4px 0;
        box-shadow:
            0 0 12px rgba(124, 58, 237, 0.8),
            0 0 24px rgba(6, 182, 212, 0.5);
        transition:
            transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            box-shadow 0.4s ease;
        z-index: 2;
        pointer-events: none;
    }

    /* ✅ Brillo que barre en hover */
    .dropdown-item::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(124, 58, 237, 0.12) 40%,
            rgba(6, 182, 212, 0.12) 60%,
            transparent 100%
        );
        transform: translateX(-100%);
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 0;
        pointer-events: none;
    }

    .dropdown-item:hover::after {
        transform: translateX(100%);
    }

   /* ============================================================
   ✅ NAVBAR MÓVIL — SECCIÓN ACTIVA SEGÚN TEMA
   ------------------------------------------------------------
   🌙 Modo oscuro → degradado + brillo animado
   ☀️ Modo claro  → morado sólido (sin degradado)
   ============================================================ */

@media (max-width: 991.98px) {

    /* ============================================================
       🌙 MODO OSCURO — DEGRADADO + BRILLO ANIMADO
       ============================================================ */

    /* Barra lateral izquierda con degradado */
    body[data-theme="dark"] .dropdown-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(1);
        width: 4px;
        height: 60%;
        background: linear-gradient(180deg, #7C3AED, #06B6D4, #2DD4BF);
        border-radius: 0 4px 4px 0;
        box-shadow:
            0 0 12px rgba(124, 58, 237, 0.8),
            0 0 24px rgba(6, 182, 212, 0.5);
        animation: activePulseDark 2.5s ease-in-out infinite;
        z-index: 2;
        pointer-events: none;
    }

    @keyframes activePulseDark {
        0%, 100% {
            box-shadow:
                0 0 12px rgba(124, 58, 237, 0.8),
                0 0 24px rgba(6, 182, 212, 0.5);
            filter: brightness(1);
        }
        50% {
            box-shadow:
                0 0 20px rgba(124, 58, 237, 1),
                0 0 40px rgba(6, 182, 212, 0.8),
                0 0 60px rgba(45, 212, 191, 0.4);
            filter: brightness(1.25);
        }
    }

    /* Fondo del item activo con degradado */
    body[data-theme="dark"] .dropdown-item.active {
        background: linear-gradient(
            90deg,
            rgba(124, 58, 237, 0.15) 0%,
            rgba(124, 58, 237, 0.06) 50%,
            transparent 100%
        );
    }

    /* Icono activo con glow */
    body[data-theme="dark"] .dropdown-item.active > i:first-child {
        animation: activeIconGlowDark 3s ease-in-out infinite;
    }

    @keyframes activeIconGlowDark {
        0%, 100% {
            filter: drop-shadow(0 0 6px rgba(124, 58, 237, 0.5));
        }
        50% {
            filter: drop-shadow(0 0 12px rgba(124, 58, 237, 0.9))
                    drop-shadow(0 0 20px rgba(6, 182, 212, 0.5));
        }
    }

    /* Chevron activo con degradado */
    body[data-theme="dark"] .dropdown-item.active .arrow {
        background: linear-gradient(135deg, #A78BFA, #22D3EE);
        border-color: transparent;
        color: #1A1A2E !important;
        box-shadow:
            0 0 15px rgba(124, 58, 237, 0.6),
            0 0 30px rgba(6, 182, 212, 0.3);
    }


    /* ============================================================
       ☀️ MODO CLARO — MORADO SÓLIDO (SIN DEGRADADO)
       ============================================================ */

    /* Barra lateral izquierda morada sólida */
    body[data-theme="light"] .dropdown-item.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleY(1);
        width: 4px;
        height: 60%;
        background: #7C3AED;
        border-radius: 0 4px 4px 0;
        box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
        animation: none;                     /* sin pulso en modo claro */
        z-index: 2;
        pointer-events: none;
    }

    /* Fondo del item activo morado suave */
    body[data-theme="light"] .dropdown-item.active {
        background: rgba(124, 58, 237, 0.12);
    }

    /* Icono activo morado sólido, sin glow animado */
    body[data-theme="light"] .dropdown-item.active > i:first-child {
        color: #7C3AED !important;
        animation: none;
        filter: none;
    }

    /* Chevron activo morado sólido */
    body[data-theme="light"] .dropdown-item.active .arrow {
        background: #7C3AED;
        border-color: #7C3AED;
        color: #FFFFFF !important;
        box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
    }

}

    /* ============================================================
       4. ✅ CHEVRON REDISEÑADO (círculo premium)
       ============================================================ */
    .dropdown-item .arrow {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        min-width: 28px;
        border-radius: 50%;
        font-size: 0.7rem;
        transform: translateX(0);
        transition:
            background 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            color 0.35s ease,
            transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
            box-shadow 0.35s ease,
            border-color 0.35s ease;
        will-change: transform, background;
        flex-shrink: 0;
    }

    /* 🌙 MODO OSCURO — Chevron con degradado en hover */
    body[data-theme="dark"] .dropdown-item .arrow {
        background: rgba(124, 58, 237, 0.15);
        border: 1px solid rgba(124, 58, 237, 0.3);
        color: #A78BFA !important;
    }

    body[data-theme="dark"] .dropdown-item:hover .arrow {
        background: linear-gradient(135deg, #A78BFA, #22D3EE);
        border-color: transparent;
        color: #1A1A2E !important;
        transform: translateX(4px) scale(1.1);
        box-shadow:
            0 0 15px rgba(124, 58, 237, 0.6),
            0 0 30px rgba(6, 182, 212, 0.3);
    }

    body[data-theme="dark"] .dropdown-item.active .arrow {
        background: linear-gradient(135deg, #A78BFA, #22D3EE);
        border-color: transparent;
        color: #1A1A2E !important;
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
    }

    /* ☀️ MODO CLARO — Chevron MORADO (incluido hover) */
    body[data-theme="light"] .dropdown-item .arrow {
        background: rgba(124, 58, 237, 0.08);
        border: 1px solid rgba(124, 58, 237, 0.25);
        color: #7C3AED !important;
    }

    /* ✅ HOVER EN MODO CLARO: círculo MORADO con letra blanca */
    body[data-theme="light"] .dropdown-item:hover .arrow {
        background: #7C3AED;
        border-color: #7C3AED;
        color: #FFFFFF !important;
        transform: translateX(4px) scale(1.1);
        box-shadow:
            0 0 15px rgba(124, 58, 237, 0.6),
            0 0 30px rgba(124, 58, 237, 0.35);
    }

    /* ✅ Activo en modo claro: círculo MORADO permanente */
    body[data-theme="light"] .dropdown-item.active .arrow {
        background: #7C3AED;
        border-color: #7C3AED;
        color: #FFFFFF !important;
        box-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
    }

    /* ============================================================
       5. HOVER GENERAL — Elevación sutil
       ============================================================ */
    .dropdown-item:hover {
        background: rgba(124, 58, 237, 0.08);
        transform: translateX(2px);
    }

    .dropdown-item:active {
        background: rgba(124, 58, 237, 0.15);
        transform: translateX(0) scale(0.99);
        transition-duration: 0.1s;
    }

    .dropdown-item:hover i:first-child {
        transform: scale(1.15) rotate(-5deg);
    }

    /* ============================================================
       6. TEXTOS Y ESTRUCTURA
       ============================================================ */
    .dropdown-item span {
        flex: 1;
        font-size: 1rem;
        font-weight: 500;
        color: var(--text-color);
        transition: color 0.35s ease;
    }

    body[data-theme="light"] .dropdown-item span {
        color: #000000;
    }

    /* ============================================================
       7. SEPARADORES
       ============================================================ */
    .dropdown-divider {
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), transparent);
        margin: 0 15px;
    }

    body[data-theme="light"] .dropdown-divider {
        background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), transparent);
    }

    /* ============================================================
       8. OVERLAY / PANEL — MODO CLARO
       ============================================================ */
    body[data-theme="light"] .dropdown-overlay {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    body[data-theme="light"] .dropdown-panel {
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(124, 58, 237, 0.4);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 20px rgba(124, 58, 237, 0.2);
    }

    body[data-theme="light"] .dropdown-notch {
        background: rgba(255, 255, 255, 0.98);
        border-left: 1px solid rgba(124, 58, 237, 0.4);
        border-top: 1px solid rgba(124, 58, 237, 0.4);
    }

    /* ============================================================
       9. HOVER / ACTIVE DE FONDO DEL ITEM
       ============================================================ */
    body[data-theme="light"] .dropdown-item:hover {
        background: rgba(124, 58, 237, 0.1);
    }

    body[data-theme="light"] .dropdown-item:active {
        background: rgba(124, 58, 237, 0.2);
    }

    body[data-theme="light"] .dropdown-item.active {
        background: linear-gradient(
            90deg,
            rgba(124, 58, 237, 0.18) 0%,
            rgba(124, 58, 237, 0.06) 50%,
            transparent 100%
        );
    }

}

/* ============================================================
   ✅ ACCESIBILIDAD — Reducir movimiento
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .dropdown-item,
    .dropdown-item::before,
    .dropdown-item::after,
    .dropdown-item .arrow,
    .dropdown-item i:first-child {
        animation: none !important;
        transition-duration: 0.15s !important;
    }
    .dropdown-item:hover,
    .dropdown-item:active {
        transform: none !important;
    }
}








/* ============================================================
   TAMAÑO UNIFICADO DE TEXTOS EN RESPONSIVE
   — TODO EL SITIO iguala a .project-description
   ------------------------------------------------------------
   ✅ Hero, Stack, Sobre mí, Proyectos, Experiencia,
      Formación, Certificaciones, Contacto, GitHub, Footer
   ✅ Breakpoints: 992px → 768px → 480px → 360px
   ✅ Incluye la cajuela de GitHub (título, leyenda, etc.)
   ============================================================ */

/* ============================================================
   ≤ 992px — Tablet
   ------------------------------------------------------------
   Todos los textos → 0.85rem
   ============================================================ */
@media (max-width: 992px) {

    /* ---------- HERO ---------- */
    .hero-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- STACK ---------- */
    .section-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- SOBRE MÍ ---------- */
    .about-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- PROYECTOS ---------- */
    .project-description {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- EXPERIENCIA ---------- */
    .timeline-responsibilities li {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- FORMACIÓN ---------- */
    .university-name,
    .publication-description,
    .gpa-label {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- CERTIFICACIONES ---------- */
    .cert-info p,
    .cert-issuer {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- CONTACTO ---------- */
    .contact-description,
    .contact-value-text p,
    .contact-feature p,
    .contact-channel-info p {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- GITHUB (cajuela) ---------- */
    .github-title,
    .github-total,
    .github-info,
    .github-legend,
    .legend-detail-text span {
        font-size: 0.85rem;
        line-height: 1.6;
    }

    /* ---------- FOOTER ---------- */
    .footer-text {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   Todos los textos → 0.82rem
   ============================================================ */
@media (max-width: 768px) {

    /* ---------- HERO ---------- */
    .hero-description {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- STACK ---------- */
    .section-description {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- SOBRE MÍ ---------- */
    .about-description {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- PROYECTOS ---------- */
    .project-description {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- EXPERIENCIA ---------- */
    .timeline-responsibilities li {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- FORMACIÓN ---------- */
    .university-name,
    .publication-description,
    .gpa-label {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- CERTIFICACIONES ---------- */
    .cert-info p,
    .cert-issuer {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- CONTACTO ---------- */
    .contact-description,
    .contact-value-text p,
    .contact-feature p,
    .contact-channel-info p {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- GITHUB (cajuela) ---------- */
    .github-title,
    .github-total,
    .github-info,
    .github-legend,
    .legend-detail-text span {
        font-size: 0.82rem;
        line-height: 1.55;
    }

    /* ---------- FOOTER ---------- */
    .footer-text {
        font-size: 0.82rem;
        line-height: 1.55;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   Todos los textos → 0.78rem
   ============================================================ */
@media (max-width: 480px) {

    /* ---------- HERO ---------- */
    .hero-description {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- STACK ---------- */
    .section-description {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- SOBRE MÍ ---------- */
    .about-description {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- PROYECTOS ---------- */
    .project-description {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- EXPERIENCIA ---------- */
    .timeline-responsibilities li {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- FORMACIÓN ---------- */
    .university-name,
    .publication-description,
    .gpa-label {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- CERTIFICACIONES ---------- */
    .cert-info p,
    .cert-issuer {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- CONTACTO ---------- */
    .contact-description,
    .contact-value-text p,
    .contact-feature p,
    .contact-channel-info p {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- GITHUB (cajuela) ---------- */
    .github-title,
    .github-total,
    .github-info,
    .github-legend,
    .legend-detail-text span {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    /* ---------- FOOTER ---------- */
    .footer-text {
        font-size: 0.78rem;
        line-height: 1.5;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   Todos los textos → 0.72rem
   ============================================================ */
@media (max-width: 360px) {

    /* ---------- HERO ---------- */
    .hero-description {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- STACK ---------- */
    .section-description {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- SOBRE MÍ ---------- */
    .about-description {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- PROYECTOS ---------- */
    .project-description {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- EXPERIENCIA ---------- */
    .timeline-responsibilities li {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- FORMACIÓN ---------- */
    .university-name,
    .publication-description,
    .gpa-label {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- CERTIFICACIONES ---------- */
    .cert-info p,
    .cert-issuer {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- CONTACTO ---------- */
    .contact-description,
    .contact-value-text p,
    .contact-feature p,
    .contact-channel-info p {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- GITHUB (cajuela) ---------- */
    .github-title,
    .github-total,
    .github-info,
    .github-legend,
    .legend-detail-text span {
        font-size: 0.72rem;
        line-height: 1.45;
    }

    /* ---------- FOOTER ---------- */
    .footer-text {
        font-size: 0.72rem;
        line-height: 1.45;
    }
}








/* ============================================================
   HEXÁGONO — SUBIDO UN POQUITO EN RESPONSIVE
   ------------------------------------------------------------
   ✅ Hexágono a punto medio-alto
   ✅ PC (≥ 1025px): SIN CAMBIOS
   ✅ Usa html body + !important para ganar a TODO
   ✅ ANCHO AUMENTADO en todos los breakpoints
   ============================================================ */

/* ============================================================
   ≤ 1024px — Laptops pequeñas / Tablets grandes
   ============================================================ */
@media (max-width: 1024px) {
    html body .hero-hexagon-wrapper {
        max-width: 520px !important;               /* ⬆️ MÁS ANCHO (antes 400) */
        transform: translateY(-30px) !important;   /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 992px — Tablet
   ============================================================ */
@media (max-width: 992px) {
    html body .hero-hexagon-wrapper {
        max-width: 540px !important;               /* ⬆️ MÁS ANCHO (antes 420) */
        transform: translateY(-35px) !important;   /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ============================================================ */
@media (max-width: 768px) {
    html body .hero-hexagon-wrapper {
        max-width: 460px !important;               /* ⬆️ MÁS ANCHO (antes 340) */
        transform: translateY(-30px) !important;   /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ============================================================ */
@media (max-width: 576px) {
    html body .hero-hexagon-wrapper {
        max-width: 420px !important;               /* ⬆️ MÁS ANCHO (antes 300) */
        transform: translateY(-20px) !important;   /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ============================================================ */
@media (max-width: 480px) {
    html body .hero-hexagon-wrapper {
        max-width: 380px !important;               /* ⬆️ MÁS ANCHO (antes 270) */
        transform: translateY(-10px) !important;   /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 390px — iPhone 12 / 13 / 14
   ============================================================ */
@media (max-width: 390px) {
    html body .hero-hexagon-wrapper {
        max-width: 350px !important;               /* ⬆️ MÁS ANCHO (antes 250) */
        transform: translateY(-5px) !important;    /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 360px — Galaxy S8/S9/S10
   ============================================================ */
@media (max-width: 360px) {
    html body .hero-hexagon-wrapper {
        max-width: 330px !important;               /* ⬆️ MÁS ANCHO (antes 230) */
        transform: translateY(0px) !important;     /* ⬆️ SUBIDO UN POQUITO */
    }
}

/* ============================================================
   ≤ 320px — iPhone SE 1ª gen
   ============================================================ */
@media (max-width: 320px) {
    html body .hero-hexagon-wrapper {
        max-width: 300px !important;               /* ⬆️ MÁS ANCHO (antes 210) */
        transform: translateY(10px) !important;    /* ⬆️ SUBIDO UN POQUITO */
    }
}
/* ============================================================
   NAVBAR MÓVIL — BAJAR EN RESPONSIVE
   ------------------------------------------------------------
   ✅ Solo baja el navbar en móvil/tablet (≤ 991.98px)
   ✅ PC (≥ 992px): SIN CAMBIOS
   ✅ Breakpoints: 991.98px → 768px → 576px → 480px → 360px
   ============================================================ */

/* ============================================================
   ≤ 991.98px — Tablet / Móvil base
   ------------------------------------------------------------
   top: 4px → 12px
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar-mobile {
        top: 12px !important;
    }

    /* Dropdown ajustado al nuevo top */
    .dropdown-panel {
        top: 84px !important;
    }

    .dropdown-overlay {
        top: 84px !important;
        height: calc(100vh - 84px) !important;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ------------------------------------------------------------
   top: 2px → 14px
   ============================================================ */
@media (max-width: 768px) {
    .navbar-mobile {
        top: 14px !important;
    }

    .dropdown-panel {
        top: 84px !important;
    }

    .dropdown-overlay {
        top: 84px !important;
        height: calc(100vh - 84px) !important;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ------------------------------------------------------------
   top: 1px → 16px
   ============================================================ */
@media (max-width: 576px) {
    .navbar-mobile {
        top: 16px !important;
    }

    .dropdown-panel {
        top: 84px !important;
    }

    .dropdown-overlay {
        top: 84px !important;
        height: calc(100vh - 84px) !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ------------------------------------------------------------
   top: 0px → 18px
   ============================================================ */
@media (max-width: 480px) {
    .navbar-mobile {
        top: 18px !important;
    }

    .dropdown-panel {
        top: 82px !important;
    }

    .dropdown-overlay {
        top: 82px !important;
        height: calc(100vh - 82px) !important;

    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ------------------------------------------------------------
   top: -2px → 20px
   ============================================================ */
@media (max-width: 360px) {
    .navbar-mobile {
        top: 20px !important;
    }

    .dropdown-panel {
        top: 82px !important;
    }

    .dropdown-overlay {
        top: 82px !important;
        height: calc(100vh - 82px) !important;
    }
}





/* ============================================================
   BOTONES "VER PROYECTOS" Y "VER CERTIFICADOS"
   — MÁS PEQUEÑOS EN RESPONSIVE
   ------------------------------------------------------------
   ✅ Solo aplica en tablet/móvil (≤ 991.98px)
   ✅ PC (≥ 992px): SIN CAMBIOS
   ✅ Breakpoints: 768px → 576px → 480px → 360px
   ============================================================ */

/* ============================================================
   ≤ 768px — Móvil
   ============================================================ */
@media (max-width: 768px) {

    /* ✅ Botón "Ver Proyectos" */
    .hero-actions .btn-primary-gradiente {
        padding: 9px 16px !important;
        font-size: 0.78rem !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.72rem !important;
    }

    /* ✅ Botón "Ver Certificados" */
    .btn-toggle-view {
        padding: 10px 22px !important;
        font-size: 0.85rem !important;
        gap: 8px !important;
        border-radius: 10px !important;
    }

    .btn-toggle-view i {
        font-size: 0.85rem !important;
    }

    /* ✅ Botón "Ver más proyectos" */
    .btn-projects-toggle {
        padding: 10px 22px !important;
        font-size: 0.85rem !important;
        gap: 8px !important;
        border-radius: 8px !important;
    }

    .btn-projects-toggle i {
        font-size: 0.78rem !important;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ============================================================ */
@media (max-width: 576px) {

    /* ✅ Botón "Ver Proyectos" */
    .hero-actions .btn-primary-gradiente {
        padding: 8px 14px !important;
        font-size: 0.72rem !important;
        gap: 5px !important;
        border-radius: 7px !important;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.66rem !important;
    }

    /* ✅ Botón "Ver Certificados" */
    .btn-toggle-view {
        padding: 9px 18px !important;
        font-size: 0.78rem !important;
        gap: 7px !important;
        border-radius: 9px !important;
    }

    .btn-toggle-view i {
        font-size: 0.78rem !important;
    }

    /* ✅ Botón "Ver más proyectos" */
    .btn-projects-toggle {
        padding: 9px 18px !important;
        font-size: 0.78rem !important;
        gap: 7px !important;
        border-radius: 7px !important;
    }

    .btn-projects-toggle i {
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ============================================================ */
@media (max-width: 480px) {

    /* ✅ Botón "Ver Proyectos" */
    .hero-actions .btn-primary-gradiente {
        padding: 7px 12px !important;
        font-size: 0.68rem !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.62rem !important;
    }

    /* ✅ Botón "Ver Certificados" */
    .btn-toggle-view {
        padding: 8px 15px !important;
        font-size: 0.72rem !important;
        gap: 6px !important;
        border-radius: 8px !important;
    }

    .btn-toggle-view i {
        font-size: 0.72rem !important;
    }

    /* ✅ Botón "Ver más proyectos" */
    .btn-projects-toggle {
        padding: 8px 15px !important;
        font-size: 0.72rem !important;
        gap: 6px !important;
        border-radius: 6px !important;
    }

    .btn-projects-toggle i {
        font-size: 0.66rem !important;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ============================================================ */
@media (max-width: 360px) {

    /* ✅ Botón "Ver Proyectos" */
    .hero-actions .btn-primary-gradiente {
        padding: 6px 10px !important;
        font-size: 0.62rem !important;
        gap: 4px !important;
        border-radius: 6px !important;
    }

    .hero-actions .btn-primary-gradiente i {
        font-size: 0.58rem !important;
    }

    /* ✅ Botón "Ver Certificados" */
    .btn-toggle-view {
        padding: 7px 13px !important;
        font-size: 0.66rem !important;
        gap: 5px !important;
        border-radius: 7px !important;
    }

    .btn-toggle-view i {
        font-size: 0.66rem !important;
    }

    /* ✅ Botón "Ver más proyectos" */
    .btn-projects-toggle {
        padding: 7px 13px !important;
        font-size: 0.66rem !important;
        gap: 5px !important;
        border-radius: 6px !important;
    }

    .btn-projects-toggle i {
        font-size: 0.6rem !important;
    }
}




/* ============================================================
   HERO SECTION — AUMENTAR ESPACIO ENTRE HEADER Y HERO EN PC
   ------------------------------------------------------------
   ✅ Solo aplica en PC (≥ 1025px)
   ✅ Responsive: SIN CAMBIOS
   ✅ El contenido del hero baja un poco
   ============================================================ */

/* ============================================================
   PC (≥ 1025px) — Monitor grande / Laptop 15"
   ------------------------------------------------------------
   padding-top: 80px → 140px
   ============================================================ */
@media (min-width: 1025px) {
    .hero-section {
        padding-top: 250px !important;    /* ⬅️ MÁS ESPACIO (antes 80px) */
    }
}

/* ============================================================
   CINTA DIVISORIA — AUMENTAR ESPACIO CON EL HERO EN PC
   ------------------------------------------------------------
   ✅ Solo aplica en PC (≥ 1025px)
   ✅ Responsive: SIN CAMBIOS
   ✅ La cinta baja un poco (más separada del hero)
   ============================================================ */

/* ============================================================
   PC (≥ 1025px) — Monitor grande / Laptop 15"
   ------------------------------------------------------------
   margin-top: 0px → 80px
   ============================================================ */
@media (min-width: 1025px) {
    .section-tape {
        margin-top: 100px !important;    /* ⬅️ MÁS ESPACIO (antes 0px) */
    }
}



/* ============================================================
   10. PÍLDORAS — OCULTAS (ya no se usan)
   ============================================================ */
.hex-pills {
    display: none !important;
}

/* ============================================================
   SCROLL INDICATOR — FORZADO CON MÁXIMA ESPECIFICIDAD
   ------------------------------------------------------------
   ✅ Va al FINAL del CSS
   ✅ html body + !important para ganar a TODO
   ✅ PC y Laptop pequeña: SIN CAMBIOS
   ✅ Tablet y teléfonos: SUBIDOS OTRO POQUITO
   ✅ Hexágono: SIN TOCAR
   ============================================================ */

/* ---------- Base (PC) ---------- */
html body .scroll-indicator {
    position: absolute !important;
    bottom: 20px !important;              /* PC sin cambios */
    left: 50% !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    color: var(--text-color) !important;
    font-size: 0.8rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    z-index: 999 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}

html body .scroll-indicator i {
    display: block !important;
    margin-top: -70px !important;
    margin-bottom: 0 !important;
    animation: bounce 1s infinite !important;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(10px); }
}

/* ============================================================
   ≤ 1024px — Laptop pequeña — SIN CAMBIOS
   ============================================================ */
@media (max-width: 1024px) {
    html body .scroll-indicator {
        bottom: -160px !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================================
   ≤ 992px — Tablet — SUBIDO OTRO POQUITO
   ============================================================ */
@media (max-width: 992px) {
    html body .scroll-indicator {
        bottom: -280px !important;         /* ⬆️ SUBIDO (antes -340px) */
        font-size: 0.72rem !important;
    }
}

/* ============================================================
   ≤ 768px — Móvil — SUBIDO OTRO POQUITO
   ============================================================ */
@media (max-width: 768px) {
    html body .scroll-indicator {
        bottom: -180px !important;         /* ⬆️ SUBIDO (antes -230px) */
        font-size: 0.68rem !important;
        letter-spacing: 1.5px !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño — SUBIDO OTRO POQUITO
   ============================================================ */
@media (max-width: 480px) {
    html body .scroll-indicator {
        bottom: -200px !important;         /* ⬆️ SUBIDO (antes -260px) */
        font-size: 0.6rem !important;
        letter-spacing: 1.2px !important;
    }
}

/* ============================================================
   NAVBAR MÓVIL — MÁS ALTO VERTICALMENTE EN RESPONSIVE
   ------------------------------------------------------------
   ✅ Solo aplica en tablet/móvil (≤ 991.98px)
   ✅ PC (≥ 992px): SIN CAMBIOS
   ✅ Aumenta el padding vertical del navbar
   ✅ Aumenta la altura del banner y los botones
   ============================================================ */

/* ============================================================
   ≤ 991.98px — Tablet / Móvil base
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar-mobile {
        padding: 16px 15px !important;        /* ⬆️ más alto (antes 10px) */
    }

    .navbar-mobile .navbar-banner img {
        max-height: 36px !important;          /* banner más grande */
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 48px !important;
        height: 48px !important;              /* botones más altos */
        min-width: 48px !important;
        border-radius: 12px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.3rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.95rem !important;
    }

    .menu-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .menu-btn-icon {
        font-size: 1.6rem !important;
    }

    .menu-btn-circle {
        width: 48px !important;
        height: 48px !important;
    }

    .nav-divider {
        height: 38px !important;
    }

    /* Dropdown ajustado al nuevo navbar más alto */
    .dropdown-panel {
        top: 96px !important;
    }

    .dropdown-overlay {
        top: 96px !important;
        height: calc(100vh - 96px) !important;
    }
}

/* ============================================================
   ≤ 768px — Móvil
   ============================================================ */
@media (max-width: 768px) {
    .navbar-mobile {
        padding: 14px 12px !important;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 32px !important;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 11px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.2rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.88rem !important;
    }

    .menu-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .menu-btn-icon {
        font-size: 1.5rem !important;
    }

    .menu-btn-circle {
        width: 44px !important;
        height: 44px !important;
    }

    .nav-divider {
        height: 34px !important;
    }

    .dropdown-panel {
        top: 92px !important;
    }

    .dropdown-overlay {
        top: 92px !important;
        height: calc(100vh - 92px) !important;
    }
}

/* ============================================================
   ≤ 576px — Móvil mediano
   ============================================================ */
@media (max-width: 576px) {
    .navbar-mobile {
        padding: 12px 11px !important;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 30px !important;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 10px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.15rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.85rem !important;
    }

    .menu-btn {
        width: 42px !important;
        height: 42px !important;
    }

    .menu-btn-icon {
        font-size: 1.4rem !important;
    }

    .menu-btn-circle {
        width: 42px !important;
        height: 42px !important;
    }

    .nav-divider {
        height: 32px !important;
    }

    .dropdown-panel {
        top: 88px !important;
    }

    .dropdown-overlay {
        top: 88px !important;
        height: calc(100vh - 88px) !important;
    }
}

/* ============================================================
   ≤ 480px — Móvil pequeño
   ============================================================ */
@media (max-width: 480px) {
    .navbar-mobile {
        padding: 11px 10px !important;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 28px !important;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 10px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1.1rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.8rem !important;
    }

    .menu-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .menu-btn-icon {
        font-size: 1.3rem !important;
    }

    .menu-btn-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .nav-divider {
        height: 30px !important;
    }

    .dropdown-panel {
        top: 84px !important;
    }

    .dropdown-overlay {
        top: 84px !important;
        height: calc(100vh - 84px) !important;
    }
}

/* ============================================================
   ≤ 360px — Móvil muy pequeño
   ============================================================ */
@media (max-width: 360px) {
    .navbar-mobile {
        padding: 10px 9px !important;
    }

    .navbar-mobile .navbar-banner img {
        max-height: 24px !important;
    }

    .mobile-nav-controls .btn-theme-toggle,
    .mobile-nav-controls .btn-lang-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 9px !important;
    }

    .mobile-nav-controls .btn-theme-toggle i {
        font-size: 1rem !important;
    }

    .mobile-nav-controls .btn-lang-toggle span {
        font-size: 0.72rem !important;
    }

    .menu-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .menu-btn-icon {
        font-size: 1.2rem !important;
    }

    .menu-btn-circle {
        width: 36px !important;
        height: 36px !important;
    }

    .nav-divider {
        height: 26px !important;
    }

    .dropdown-panel {
        top: 78px !important;
    }

    .dropdown-overlay {
        top: 78px !important;
        height: calc(100vh - 78px) !important;
    }
}




/* ============================================================
   ✅ BOTÓN CERRAR (X) EN EL PANEL DE DESCRIPCIÓN DEL STACK
   ------------------------------------------------------------
   ✅ VERSIÓN FORZADA con !important
   ✅ Posicionado en la esquina superior derecha
   ✅ Estilo circular con degradado y glow
   ✅ Hover: crece y rota el icono
   ✅ Visible en modo claro y oscuro
   ✅ Gana a cualquier otro estilo del proyecto
   ============================================================ */

.tech-info-content {
    position: relative !important;   /* ✅ asegura que la X se posicione dentro */
}

.tech-info-close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FFFFFF !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    outline: none !important;
    text-decoration: none !important;
    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
}

.tech-info-close i {
    pointer-events: none !important;
    display: inline-block !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ---------- HOVER ---------- */
.tech-info-close:hover {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
    transform: scale(1.1) !important;
    box-shadow:
        0 0 15px rgba(239, 68, 68, 0.6),
        0 0 30px rgba(239, 68, 68, 0.3) !important;
}

.tech-info-close:hover i {
    transform: rotate(90deg) !important;
}

/* ---------- CLICK ---------- */
.tech-info-close:active {
    transform: scale(0.95) !important;
    transition-duration: 0.1s !important;
}

/* ---------- FOCUS ---------- */
.tech-info-close:focus,
.tech-info-close:focus-visible {
    outline: 2px solid #EF4444 !important;
    outline-offset: 3px !important;
}

/* ---------- MODO CLARO ---------- */
body[data-theme="light"] .tech-info-close {
    background: rgba(0, 0, 0, 0.06) !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    color: #1A1A2E !important;
}

body[data-theme="light"] .tech-info-close:hover {
    background: #EF4444 !important;
    border-color: #EF4444 !important;
    color: #FFFFFF !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .tech-info-close {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        font-size: 0.85rem !important;
        top: 10px !important;
        right: 10px !important;
    }
}

@media (max-width: 480px) {
    .tech-info-close {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        font-size: 0.8rem !important;
        top: 8px !important;
        right: 8px !important;
    }
}

/* ---------- ACCESIBILIDAD ---------- */
@media (prefers-reduced-motion: reduce) {
    .tech-info-close,
    .tech-info-close i {
        transition-duration: 0.15s !important;
    }
    .tech-info-close:hover {
        transform: none !important;
    }
    .tech-info-close:hover i {
        transform: none !important;
    }
}







/* ============================================================
   AISLAR ESTILOS DE LA LIBRERÍA 3D
   ============================================================ */
#tech-particles,
#tech-particles * {
    font-family: inherit !important;
    box-sizing: border-box;
}

#tech-particles {
    position: relative !important;
    z-index: 1 !important;
}

#tech-particles canvas {
    border-radius: 20px;
    max-width: 100%;
}

.navbar,
.navbar-mobile {
    z-index: 6000 !important;
}






/* ============================================================
   PERSONAJE MINECRAFT - JARDÍN 3D CON PAISAJE
   ✅ Fondo 3D con día/noche generado en el canvas
   ✅ Borde difuminado
   ✅ Burbuja que persigue al personaje
   ============================================================ */

#contacto .minecraft-garden-wrapper {
    position: relative;
    width: 100%;

    margin-top: 14px;
    padding: 0;
    overflow: visible;
    isolation: isolate;
    contain: layout style;
}

#contacto .minecraft-garden-wrapper *,
#contacto .minecraft-garden-wrapper *::before,
#contacto .minecraft-garden-wrapper *::after {
    box-sizing: border-box;
}

/* ============================================================
   BORDE DIFUMINADO EXTERIOR (GLOW)
   ============================================================ */
#contacto .minecraft-garden-glow {
    position: absolute;
    inset: -12px;
    border-radius: 24px;
    background:
        radial-gradient(ellipse at center,
            rgba(124, 58, 237, 0.35) 0%,
            rgba(6, 182, 212, 0.25) 40%,
            transparent 75%);
    filter: blur(20px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    animation: mcGlowPulse 4s ease-in-out infinite;
}

body[data-theme="dark"] #contacto .minecraft-garden-glow {
    background:
        radial-gradient(ellipse at center,
            rgba(124, 58, 237, 0.5) 0%,
            rgba(6, 182, 212, 0.35) 40%,
            transparent 75%);
    opacity: 1;
}

@keyframes mcGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.02); }
}

/* ============================================================
   JARDÍN — Contenedor principal
   ============================================================ */
#contacto .minecraft-garden {
    position: relative;
    width: 100%;
    height: 375px;
    margin: 0 auto;
    border-radius: 16px;
    background: transparent;               /* ← El canvas dibuja el fondo 3D */
    overflow: hidden;
    box-shadow:
        0 0 0 2px rgba(124, 58, 237, 0.3),
        0 0 25px rgba(124, 58, 237, 0.4);
    transition: box-shadow 0.5s ease;
    z-index: 1;
}

body[data-theme="dark"] #contacto .minecraft-garden {
    box-shadow:
        0 0 0 2px rgba(124, 58, 237, 0.5),
        0 0 35px rgba(124, 58, 237, 0.5);
}

/* ============================================================
   CANVAS 3D — Ocupa TODO el jardín
   ============================================================ */
#contacto .minecraft-garden .minecraft-avatar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    cursor: pointer;
    z-index: 1;
}

#contacto .minecraft-garden .minecraft-avatar canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    background: transparent;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

/* ============================================================
   PASTO (por encima del canvas)
   ============================================================ */
#contacto .minecraft-garden .grass-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 5;
    pointer-events: none;
    gap: 1px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
}

#contacto .minecraft-garden .grass-block {
    flex: 1;
    height: 100%;
    background-color: #573d26;
    position: relative;
    border-left: 2px solid #422d1b;
    border-right: 2px solid #362415;
    background-image:
        radial-gradient(#735235 20%, transparent 20%),
        radial-gradient(#3d2a19 20%, transparent 20%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    image-rendering: pixelated;
}

#contacto .minecraft-garden .grass-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background-color: #5c8e32;
    box-shadow:
        inset 0 3px 0 #7cbd3f,
        inset 0 -3px 0 #476f27,
        0 2px 0 #32501a;
    transition: background-color 0.5s ease;
}

body[data-theme="dark"] #contacto .minecraft-garden .grass-block::before {
    background-color: #3d5c1f;
    box-shadow:
        inset 0 3px 0 #4d7529,
        inset 0 -3px 0 #2d4614,
        0 2px 0 #1f310d;
}

#contacto .minecraft-garden .grass-block::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 15%;
    width: 25%;
    height: 5px;
    background-color: #476f27;
    box-shadow: 12px 0 0 #476f27, 22px 3px 0 #32501a, -6px 2px 0 #32501a;
}

/* ============================================================
   BURBUJA DE DIÁLOGO QUE PERSIGUE AL PERSONAJE
   ============================================================ */
#contacto .minecraft-garden .mc-dialogue {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px) scale(0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    transition:
        opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 85%;
    width: auto;
}

#contacto .minecraft-garden .mc-dialogue.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

#contacto .minecraft-garden .mc-dialogue-content {
    position: relative;
    display: inline-block;
    padding: 10px 16px;
    background: #ffffff;
    border: 3px solid #1a1a1a;
    border-radius: 4px;
    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.9),
        inset -3px -3px 0 rgba(0, 0, 0, 0.08);
    font-family: 'Courier New', 'Space Grotesk', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
    image-rendering: pixelated;
    letter-spacing: 0.5px;
    min-width: 110px;
    max-width: 280px;
    word-wrap: break-word;
    animation: mcDialogueAppear 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#contacto .minecraft-garden .mc-dialogue-content::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #1a1a1a;
}

#contacto .minecraft-garden .mc-dialogue-content::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 9px solid #ffffff;
    z-index: 1;
}

/* Modo oscuro */
body[data-theme="dark"] #contacto .minecraft-garden .mc-dialogue-content {
    background: #1e293b;
    border-color: #000000;
    color: #e2e8f0;
    box-shadow:
        4px 4px 0 rgba(0, 0, 0, 0.9),
        inset -3px -3px 0 rgba(255, 255, 255, 0.05);
}

body[data-theme="dark"] #contacto .minecraft-garden .mc-dialogue-content::after {
    border-top-color: #000000;
}

body[data-theme="dark"] #contacto .minecraft-garden .mc-dialogue-content::before {
    border-top-color: #1e293b;
}

@keyframes mcDialogueAppear {
    0%   { transform: scale(0.7); }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================================
   HINT
   ============================================================ */
#contacto .minecraft-garden .avatar-hint {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    color: #1e293b;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 5px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.9;
    animation: mcHintFloat 3s ease-in-out infinite;
    z-index: 10;
    font-weight: 600;
    transition: all 0.5s ease;
}

body[data-theme="dark"] #contacto .minecraft-garden .avatar-hint {
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.85);
    border-color: rgba(148, 163, 184, 0.3);
}

@keyframes mcHintFloat {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(-5px); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    #contacto .minecraft-garden { height: 300px; }
}

@media (max-width: 768px) {
    #contacto .minecraft-garden { height: 280px; }
    #contacto .minecraft-garden .avatar-hint { font-size: 0.72rem; bottom: 42px; }
    #contacto .minecraft-garden .mc-dialogue-content { font-size: 0.78rem; padding: 8px 14px; }
}

@media (max-width: 480px) {
    #contacto .minecraft-garden { height: 250px; }
    #contacto .minecraft-garden .grass-strip { height: 34px; }
    #contacto .minecraft-garden .avatar-hint { font-size: 0.68rem; bottom: 38px; padding: 4px 10px; }
    #contacto .minecraft-garden .mc-dialogue-content { font-size: 0.7rem; padding: 6px 10px; min-width: 90px; max-width: 200px; }
}