/* =========================================
   1. VARIABLES GLOBALES Y CONFIGURACIÓN BASE
   ========================================= */
:root{--primary:#194239;--primary-light:#235347;--dark:#111111;--white:#ffffff;--text-color:#333333;--bg-light:#e8edea;--neon:#00ff88;--accent-gold:#d4af37;--accent-blue:#007bff;--accent-purple:#6f42c1;--gray:#f4f7f6;--border-light:rgba(25,66,57,0.2);--glow-shadow:0 0 15px rgba(0,255,136,0.4);--gold-glow:0 0 15px rgba(212,175,55,0.5);--blue-glow:0 0 15px rgba(0,123,255,0.4);--purple-glow:0 0 15px rgba(111,66,193,0.4)} 
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap'); 
*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif;max-width:100%} 
body{scroll-behavior:smooth;color:var(--text-color);background-color:var(--bg-light);overflow-x:hidden} 
::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:var(--gray)} ::-webkit-scrollbar-thumb{background:var(--primary);border-radius:5px} ::-webkit-scrollbar-thumb:hover{background:var(--neon)} 
.reveal{opacity:0;transform:translateY(40px);transition:.8s ease-out} .reveal.active{opacity:1;transform:translateY(0)} 

/* =========================================
   2. NAVEGACIÓN DUAL (PC Y MÓVIL DECORADO)
   ========================================= */

/* --- ESTILO PARA COMPUTADORAS (Escritorio) --- */
.main-header {
    background: rgba(25, 66, 57, 0.95);
    backdrop-filter: blur(10px);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* Logo adaptable */
.logo-small {
    height: 55px;
    width: auto;
    transition: all 0.3s ease;
}

.menu-toggle, .sidebar-lateral, .overlay-dark {
    display: none; 
}

.navbar {
    width: 100%;
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
}
.navbar ul {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 10px;
    padding: 10px;
}
.navbar li a {
    color: var(--white);
    text-decoration: none;
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 25px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}
.navbar li a:hover, .navbar li a.activo {
    background: rgba(0, 255, 136, 0.15);
    color: var(--neon);
    border-color: var(--neon);
    box-shadow: var(--glow-shadow);
}

/* --- ESTILO PARA MÓVIL (Menú Lateral Decorado) --- */
@media screen and (max-width: 768px) {
    .navbar { display: none !important; } 

    .logo-small {
        height: 42px; /* Se adapta al tamaño del teléfono */
    }

    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        cursor: pointer;
        padding: 5px;
        z-index: 5001;
    }
    .menu-toggle .bar {
        height: 3px;
        width: 25px;
        background-color: var(--neon);
        margin: 3px 0;
        border-radius: 5px;
        transition: 0.4s;
    }

    /* Sidebar Decorado */
    .sidebar-lateral {
        display: flex;
        position: fixed;
        right: -100%; 
        top: 0;
        width: 280px; 
        height: 100vh;
        background: linear-gradient(135deg, rgba(11, 34, 24, 0.98), rgba(0, 0, 0, 0.98));
        backdrop-filter: blur(15px);
        z-index: 5000;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border-left: 2px solid var(--neon);
        flex-direction: column;
        padding-top: 20px;
    }

    .sidebar-lateral.active {
        right: 0;
    }

    /* Capa oscura para cerrar al tocar fuera */
    .overlay-dark {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(4px);
        z-index: 4500;
        display: none; /* Se activa con JS */
    }
    
    .overlay-dark.active {
        display: block;
    }

    .nav-links-sidebar {
        list-style: none;
        padding: 40px 20px;
    }
    .nav-links-sidebar li {
        margin-bottom: 25px;
        opacity: 0;
        transform: translateX(20px);
        transition: 0.4s;
    }
    .sidebar-lateral.active li {
        opacity: 1;
        transform: translateX(0);
    }
    
    .nav-links-sidebar a {
        color: white;
        text-decoration: none;
        font-size: 1.1rem;
        display: block;
        border-bottom: 1px solid rgba(0,255,136,0.1);
        padding-bottom: 10px;
    }
}
@media screen and (max-width: 768px) {
    .timeline-vertical::after { left: 20px !important; transform: none !important; }
    .timeline-item { width: 100% !important; padding: 10px 10px 10px 45px !important; }
    .timeline-item.izquierda, .timeline-item.derecha { left: 0 !important; }
    .timeline-icon { left: 20px !important; transform: translateX(-50%) !important; }
}

/* ... (El resto de tus estilos de modo oscuro y footer se mantienen) ... */
/* =========================================
   3. SECCIONES GENERALES Y HERO
   ========================================= */
.hero-section{background:linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.85)),url('imagenes/inicio');background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;padding:100px 20px;text-align:center;border-radius:0 0 20px 20px;margin-bottom:40px} 
.hero-container{max-width:900px;margin:0 auto} .texto-destacado{font-size:2.5rem;font-weight:700;color:var(--neon);text-transform:uppercase;letter-spacing:1px;margin-bottom:15px} .subtexto-hero{font-size:1.1rem;color:var(--white);font-weight:300} 
.container{width:95%;max-width:1200px;margin:0 auto;padding:20px 0} .section-padding{padding:40px 0} 
.section-title{text-align:center;color:var(--accent-gold) !important;margin-bottom:40px;font-size:2.2rem;text-transform:uppercase;font-weight:bold;text-shadow:0 2px 5px rgba(0,0,0,0.1)} 
.grid-layout,.grid-ejes,.grid-historia{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px} 
/* =========================================
   5. BOTONES, FORMULARIOS Y CONTACTOS
   ========================================= */
.btn-interactivo, .btn-plataforma { background: var(--primary); color: var(--white); padding: 12px 25px; border: 2px solid var(--primary); border-radius: 30px; font-size: 0.9rem; font-weight: bold; cursor: pointer; transition: 0.3s ease; display: inline-block; text-decoration: none; margin-top: 15px; }
.btn-interactivo:hover { background: var(--neon); color: var(--primary); border-color: var(--neon); box-shadow: var(--glow-shadow); }
.btn-plataforma { background: transparent; border-color: var(--neon); color: var(--neon); }
.btn-plataforma:hover { background: var(--neon); color: var(--primary); }

.form-contacto { display: flex; flex-direction: column; gap: 15px; margin-top: 15px; }
.form-contacto input, .form-contacto select, .form-contacto textarea { width: 100%; padding: 15px; border-radius: 10px; border: 1px solid var(--border-light); font-family: 'Poppins', sans-serif; font-size: 0.95rem; background: #fdfdfd; transition: all 0.3s ease; }
.form-contacto input:focus, .form-contacto select:focus, .form-contacto textarea:focus { border-color: var(--accent-blue); outline: none; box-shadow: var(--blue-glow); }
.btn-enviar { background: var(--primary); color: #ffffff; padding: 15px; border: none; border-radius: 10px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; margin-top: 10px; }
.btn-enviar:hover { background: var(--neon); color: var(--primary); transform: translateY(-3px); box-shadow: var(--glow-shadow); }

/* =========================================
   6. LÍNEA DE TIEMPO VERTICAL
   ========================================= */
.timeline-vertical { position: relative; max-width: 1000px; margin: 0 auto; padding: 20px 0; }
.timeline-item { padding: 10px 40px; position: relative; background: inherit; width: 50%; }
.timeline-item.izquierda { left: 0; } .timeline-item.derecha { left: 50%; }
.glass-timeline { padding: 25px; background: var(--white); border: 1px solid var(--border-light); border-radius: 15px; position: relative; box-shadow: 0 8px 20px rgba(0,0,0,0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.glass-timeline:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 255, 136, 0.2); border-color: var(--neon); }
.anio-timeline { color: var(--neon); font-size: 2.2rem; margin-bottom: 5px; font-family: 'Playfair Display', serif; font-weight: bold; }
.glass-timeline h4 { color: var(--accent-gold); font-size: 1.3rem; margin-bottom: 10px; font-weight: bold; }
.glass-timeline p { color: #444444; font-size: 1rem; line-height: 1.6; }

.timeline-vertical::after { content: ''; position: absolute; width: 4px; background-color: var(--accent-gold); top: 0; left: 50%; transform: translateX(-50%); border-radius: 2px; height: 0; transition: height 2s ease-out; box-shadow: var(--gold-glow); }
.timeline-vertical.active::after { height: 100%; }
.timeline-item::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--neon); border: 4px solid var(--white); top: 20px; border-radius: 50%; z-index: 1; box-shadow: 0 0 10px rgba(0,0,0,0.1); opacity: 0; transform: scale(0); transition: all 0.5s ease 0.3s; }
.timeline-item.izquierda::after { right: -10px; } .timeline-item.derecha::after { left: -10px; }
.timeline-item.active::after { opacity: 1; transform: scale(1); }
.timeline-item:hover::after { transform: scale(1.3); background-color: var(--accent-gold); border-color: var(--white); box-shadow: var(--gold-glow); }

/* =========================================
   7. ESTADÍSTICAS Y SERVICIOS
   ========================================= */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; text-align: center; color: white; }
.stat-item { padding: 15px; }
.stat-item:nth-child(1) .stat-icon { color: var(--white); }
.stat-item:nth-child(2) .stat-icon { color: var(--neon); }
.stat-item:nth-child(3) .stat-icon { color: var(--accent-gold); }
.stat-item:nth-child(4) .stat-icon { color: var(--accent-blue); }
.contador { font-size: 3.8rem; color: var(--white); font-weight: bold; margin-bottom: 5px; font-family: 'Playfair Display', serif; text-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.stat-item p { font-size: 1rem; color: #a8bada; text-transform: uppercase; letter-spacing: 1px;}

.grid-servicios { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.servicio-card { display: flex; align-items: center; background: var(--white); padding: 20px; border-radius: 12px; border: 1px solid var(--border-light); box-shadow: 0 8px 20px rgba(0,0,0,0.04); transition: transform 0.3s ease; }
.servicio-card:nth-child(1):hover { transform: translateX(10px); border-left: 4px solid var(--accent-purple); box-shadow: var(--purple-glow); }
.servicio-card:nth-child(2):hover { transform: translateX(10px); border-left: 4px solid var(--accent-gold); box-shadow: var(--gold-glow); }
.servicio-card:nth-child(3):hover { transform: translateX(10px); border-left: 4px solid var(--accent-blue); box-shadow: var(--blue-glow); }
.icon-serv { font-size: 2.5rem; margin-right: 20px; background: rgba(25, 66, 57, 0.05); padding: 15px; border-radius: 50%; color: var(--primary); }
.servicio-card:hover .icon-serv { background: rgba(0, 255, 136, 0.1); color: var(--neon); }

/* =========================================
   8. MAPA COMPACTO (UBICACIÓN)
   ========================================= */
.mapa-compacto-container { display: flex; flex-wrap: wrap; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); background: var(--primary); border: 1px solid var(--border-light); }
.mapa-info { flex: 1; min-width: 300px; padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.mapa-info h3 { color: var(--accent-gold) !important; margin-bottom: 15px; font-size: 1.6rem; text-shadow: var(--gold-glow);}
.mapa-frame { flex: 1.5; min-width: 300px; min-height: 350px; position: relative; }

/* =========================================
   10. MENÚ FLOTANTE LATERAL
   ========================================= */
.menu-flotante-lateral { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 1000; }
.item-flotante { display: flex; align-items: center; flex-direction: row-reverse; position: relative; }
.boton-circulo { width: 45px; height: 45px; background-color: var(--primary); color: var(--white); border-radius: 50px 0 0 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; cursor: pointer; transition: all .4s ease; opacity: .3; transform: translateX(25px); }
.item-flotante:nth-child(1):hover .boton-circulo { background-color: var(--accent-blue); color: white; opacity: 1; transform: translateX(-15px); border-radius: 50%; box-shadow: var(--blue-glow); }
.item-flotante:nth-child(2):hover .boton-circulo { background-color: var(--neon); color: var(--primary); opacity: 1; transform: translateX(-15px); border-radius: 50%; box-shadow: var(--glow-shadow); }
.item-flotante:nth-child(3):hover .boton-circulo { background-color: var(--accent-gold); color: white; opacity: 1; transform: translateX(-15px); border-radius: 50%; box-shadow: var(--gold-glow); }
.item-flotante:nth-child(4):hover .boton-circulo { background-color: var(--accent-purple); color: white; opacity: 1; transform: translateX(-15px); border-radius: 50%; box-shadow: var(--purple-glow); }
.panel-info { background-color: rgba(255,255,255,0.95); color: #333; padding: 12px 18px; border-radius: 8px; border-left: 4px solid var(--primary); box-shadow: 0 5px 15px rgba(0,0,0,0.2); width: max-content; max-width: 250px; position: absolute; right: 70px; opacity: 0; visibility: hidden; transform: translateX(20px) scale(0.9); transition: all .3s ease; border: 1px solid var(--border-light); }
.panel-info h4 { color: var(--primary); margin-top: 0; margin-bottom: 5px; font-size: 16px; font-weight: bold; }
.item-flotante:hover .panel-info { opacity: 1; visibility: visible; transform: translateX(0) scale(1); }

/* =========================================
   11. FOOTER (PIE DE PÁGINA)
   ========================================= */
.footer-main { background: var(--dark); color: #ccc; padding: 60px 20px 20px; margin-top: auto; border-top: 4px solid var(--accent-gold); }
.footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
.footer-col h4 { color: var(--accent-gold) !important; border-bottom: 2px solid var(--neon); display: inline-block; margin-bottom: 20px; padding-bottom: 5px; text-transform: uppercase;}
.footer-col ul { list-style: none; }
.footer-col a { color: #ccc; text-decoration: none; transition: 0.3s; }
.footer-col a:hover { color: var(--neon); }
.footer-bottom { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #333; font-size: 0.85rem; }

/* =========================================
   12. MEDIA QUERIES (RESPONSIVE MÓVIL)
   ========================================= */
@media screen and (max-width: 768px) {
    html, body { overflow-x: hidden !important; width: 100%; position: relative; }
    .header-text h1 { font-size: 1rem; } .header-text p { font-size: .7rem; }
    .hero-section { padding: 60px 15px; background-attachment: scroll; }
    .texto-destacado { font-size: 1.5rem; } .section-title { font-size: 1.6rem; margin-bottom: 25px; }
    
    .menu-toggle { display: flex; }
    .navbar ul { flex-direction: column; background-color: var(--primary); max-height: 0; overflow: hidden; transition: max-height .4s ease-out; padding: 0; gap: 0; }
    .navbar ul.active { max-height: 500px; padding: 10px 0; }
    .navbar li { width: 100%; text-align: center; border-top: 1px solid rgba(0,255,136,0.1); }
    .navbar li a { padding: 15px; display: block; border-radius: 0; }
    .navbar .dropdown-content { position: static; transform: none; box-shadow: none; background: rgba(0,0,0,0.2); min-width: 100%; border-top: none; }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

    .pantalla-bienvenida .panel-cristal { padding: 25px 15px !important; width: 90% !important; max-width: 350px !important; margin: 0 auto; border: 1px solid rgba(255,255,255,0.5) !important; }
    .texto-oro { font-size: 1.6rem !important; } 
    .iconos-tecnicos { font-size: 2.5rem !important; gap: 15px !important; margin: 10px 0 !important; }
    .btn-gradiente-animado { font-size: 1rem !important; padding: 12px 20px !important; width: 100% !important; white-space: normal; }

    .timeline-vertical::after { left: 20px !important; transform: none !important; }
    .timeline-item { width: 100% !important; padding: 10px 10px 10px 45px !important; margin-bottom: 20px; }
    .timeline-item.izquierda, .timeline-item.derecha { left: 0 !important; }
    .timeline-item::after, .timeline-item.izquierda::after, .timeline-item.derecha::after { left: 10px !important; right: auto !important; }
    .timeline-item.izquierda .glass-timeline, .timeline-item.derecha .glass-timeline { transform: translateX(20px); }
    .glass-timeline { padding: 15px !important; } 
    .anio-timeline { font-size: 1.3rem !important; }
    .glass-timeline h4 { font-size: 1.1rem !important; }
    .glass-timeline p { font-size: 0.9rem !important; }

    .maqueta-premium { width: 95%; margin: 0 auto; }
    .maqueta-content { padding: 40px 20px; text-align: center; }
    .maqueta-badge { left: 10px; font-size: 0.8rem; padding: 6px 20px; }
    .maqueta-visual { min-width: 100%; height: 250px; margin-bottom: 20px; }
    .icono-3d { font-size: 5rem; }
    .maqueta-info h3 { font-size: 1.8rem; }
    .maqueta-tech { justify-content: center; }
    .maqueta-links { justify-content: center; gap: 10px; }
    .btn-demo-live, .btn-repo-code { width: 100%; padding: 12px 20px; font-size: 0.9rem; }

    .boton-circulo { width: 40px; height: 40px; font-size: 18px; transform: translateX(10px); }
    .panel-info { max-width: 180px; right: 55px; font-size: .8rem; }
    .panel-info h4 { font-size: 14px; }
}

/* =========================================
   13. MODO OSCURO (INICIO)
   ========================================= */
body.dark-mode { background-color: #0d1117 !important; color: #e6edf3 !important; }
body.dark-mode .main-header { background: rgba(13, 17, 23, 0.7) !important; border-bottom: 1px solid rgba(0, 255, 136, 0.15) !important; box-shadow: none !important; }
body.dark-mode .navbar ul { background: transparent !important; }
body.dark-mode .section-title { color: var(--accent-gold) !important; text-shadow: var(--gold-glow); }
body.dark-mode .hero-section { background: linear-gradient(rgba(0, 0, 0, 0.692), rgba(0, 0, 0, 0.582)), url('imagenes/inicio') !important; background-size: cover !important; background-position: center !important; background-attachment: fixed !important; background-repeat: no-repeat !important; }

body.dark-mode .glass-timeline { background: rgba(30, 35, 40, 0.5) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important; }
body.dark-mode .glass-timeline:hover { background: rgba(40, 45, 50, 0.7) !important; border-color: rgba(0, 255, 136, 0.3) !important; }
body.dark-mode .glass-timeline p { color: #a3b3bc !important; }
body.dark-mode .glass-timeline h4 { color: #ffffff !important; }
body.dark-mode .anio-timeline { color: #00ff88 !important; text-shadow: var(--glow-shadow); }
body.dark-mode .timeline-vertical::after { background-color: var(--accent-gold) !important; box-shadow: 0 0 10px rgba(212, 175, 55, 0.5) !important;}
body.dark-mode .timeline-item::after { background-color: #00ff88 !important; border-color: #001a38 !important; box-shadow: 0 0 15px rgba(0, 255, 136, 0.8) !important;}

body.dark-mode .servicio-card { background: rgba(30, 35, 40, 0.5) !important; border-color: rgba(255,255,255,0.05) !important;}
body.dark-mode .servicio-card h4 { color: white !important;}
body.dark-mode .servicio-card p { color: #a3b3bc !important;}

body.dark-mode section#ubicacion { background-color: #0a0e14 !important; }
body.dark-mode .mapa-compacto-container { border-color: var(--neon); box-shadow: 0 10px 30px rgba(0, 255, 136, 0.15); }

body.dark-mode .maqueta-premium { background: #0a0e14 !important; box-shadow: 0 15px 35px rgba(0,0,0,0.5) !important; }
body.dark-mode .maqueta-premium:hover { box-shadow: 0 30px 60px rgba(0, 255, 136, 0.2) !important; }
body.dark-mode .maqueta-content { background: #0d1117 !important; border: 1px solid rgba(255,255,255,0.03) !important; }
body.dark-mode .maqueta-info h3 { color: var(--white) !important; }
body.dark-mode .desc-placeholder { color: #a3b3bc !important; }
body.dark-mode .maqueta-visual { background: rgba(0,0,0,0.3) !important; border-color: rgba(255,255,255,0.05) !important; box-shadow: inset 0 0 30px rgba(0,0,0,0.5) !important;}
body.dark-mode .energy-pulse { background: var(--neon) !important; }
body.dark-mode .maqueta-tech span { background: #111111 !important; color: var(--neon) !important; border-color: rgba(0,255,136,0.3) !important; }
body.dark-mode .maqueta-tech span:hover { background: var(--neon) !important; color: #111111 !important; box-shadow: var(--glow-shadow) !important; }
body.dark-mode .btn-repo-code { color: var(--neon) !important; border-color: var(--neon) !important; }
body.dark-mode .btn-repo-code:hover { background: var(--neon) !important; color: #111111 !important; box-shadow: var(--glow-shadow) !important; }
/* =========================================
   NUEVOS ESTILOS LÍNEA DE TIEMPO (ICONOS Y PULSOS)
   ========================================= */

/* Contenedor Base */
.timeline-vertical {
    position: relative;
    padding: 40px 0;
}

/* La línea central con degradado tech */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, var(--accent-gold), var(--primary), var(--neon));
    transform: translateX(-50%);
    z-index: 1;
    border-radius: 2px;
}

/* Ajuste de los items para dar espacio al icono */
.timeline-item {
    position: relative;
    width: 50%;
    padding: 20px 60px;
    z-index: 2;
}

/* Los Iconos Flotantes */
.timeline-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    background: var(--dark);
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    top: 30px;
    z-index: 10;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.timeline-item.derecha .timeline-icon {
    left: -25px; /* Centrado en la línea */
}

.timeline-item.izquierda .timeline-icon {
    right: -25px; /* Centrado en la línea */
}

.timeline-item:hover .timeline-icon {
    transform: scale(1.15) rotate(5deg);
}

/* --- ANIMACIONES DE PULSO (CIBERSEGURIDAD) --- */
@keyframes pulso {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pulse-oro { border-color: var(--accent-gold) !important; animation: pulsoOro 2s infinite; }
.pulse-azul { border-color: var(--primary-light) !important; animation: pulsoAzul 2s infinite; }
.pulse-neon { border-color: var(--neon) !important; animation: pulsoNeon 2s infinite; }

/* Keyframes específicos para colores */
@keyframes pulsoOro { 0%, 100% { box-shadow: 0 0 5px var(--accent-gold); } 50% { box-shadow: 0 0 20px var(--accent-gold); } }
@keyframes pulsoAzul { 0%, 100% { box-shadow: 0 0 5px var(--primary-light); } 50% { box-shadow: 0 0 20px var(--primary-light); } }
@keyframes pulsoNeon { 0%, 100% { box-shadow: 0 0 5px var(--neon); } 50% { box-shadow: 0 0 25px var(--neon); } }

/* --- ESTILOS DE CRISTAL (GLASS) MEJORADOS --- */
.glass-timeline {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
}

body.dark-mode .glass-timeline {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.03);
}

/* Efecto levitación al pasar el mouse */
.levitacion-suave:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

body.dark-mode .levitacion-suave:hover {
    background: rgba(255, 255, 255, 0.03);
}
/* =========================================
   📱 REPARACIÓN RESPONSIVA PARA MÓVILES (TECNO SPARK Y OTROS)
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Arreglar la Línea de Tiempo (Todo a una sola columna) */
    .timeline-line {
        left: 20px !important; /* Mueve la línea pegada al borde izquierdo */
    }
    .timeline-item {
        width: 100% !important;
        padding-left: 60px !important; /* Da espacio para los iconos */
        padding-right: 15px !important;
    }
    .timeline-icon {
        left: 20px !important; /* Alinea los iconos con la línea */
        transform: translateX(-50%) !important;
    }
    .timeline-item.izquierda .timeline-content,
    .timeline-item.derecha .timeline-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    /* 2. Arreglar el Mapa y Ubicación (Uno debajo del otro) */
    .mapa-compacto-container {
        display: flex !important;
        flex-direction: column !important; /* Esto apila el texto arriba y el mapa abajo */
        gap: 20px;
    }
    .mapa-frame iframe {
        min-height: 300px; /* Evita que el mapa se haga diminuto */
    }

    /* 3. Arreglar el Footer (Tres filas en lugar de tres columnas) */
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        text-align: center;
        gap: 30px;
    }

    /* 4. Ajustar Menú Flotante para que no tape la lectura */
    .menu-flotante-lateral {
        transform: translateY(-50%) scale(0.8); /* Lo hace un 20% más pequeño en celular */
        right: -10px;
    }
    
    /* 5. Ajustar Títulos Gigantes */
    .texto-destacado {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
}