/* ==========================================================================
   1. Estilos Base Globales
   ========================================================================== */
body { 
    background-color: #030712; 
    color: #f8fafc; 
    font-family: system-ui, -apple-system, sans-serif; 
    margin: 0; 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

/* ==========================================================================
   2. Barra de Navegación (PC y Escritorio por defecto)
   ========================================================================== */
nav { 
    /* EFECTO STICKY PREMIUM: Bloquea el menú arriba al bajar con la rueda */
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegura que el menú flote por encima de todas las tarjetas */

    /* COLOR CON OPACIDAD: Cambiamos el color sólido por uno translúcido (75% opaco, 25% transparente) */
    background-color: rgba(15, 23, 42, 0.75); 
    
    /* EFECTO CRISTAL: Desenfoca mágicamente los textos y tarjetas que pasen por detrás */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Compatibilidad añadida para navegadores Safari/Apple */

    border-bottom: 1px solid #1e293b; 
    padding: 1rem 2rem; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    width: 100%;
    box-sizing: border-box;
    transition: background-color 0.3s ease; /* Transición suave por si cambias opacidades */
}

.nav-container { 
    max-width: 1100px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.logo { 
    font-size: 1.25rem; 
    font-weight: 800; 
    letter-spacing: 0.05em; 
    color: #22d3ee; 
    text-decoration: none; 
}

.logo-tag { 
    font-size: 0.75rem; 
    background-color: #1e293b; 
    border: 1px solid #334155; 
    color: #94a3b8; 
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-left: 8px; 
    font-weight: 400; 
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links a { 
    color: #94a3b8; 
    text-decoration: none; 
    margin-left: 1.5rem; 
    font-size: 0.875rem; 
    font-weight: 500; 
    transition: color 0.2s, border-color 0.2s; 
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}

.nav-links a:hover, .nav-links a.active { 
    color: #ffffff; 
}

.nav-links a.active { 
    border-bottom: 2px solid #06b6d4; 
    color: #06b6d4; 
}

/* ==========================================================================
   3. Contenido Principal (Hero)
   ========================================================================== */
main { 
    max-width: 1000px; 
    margin: auto; 
    padding: 3rem 1rem; 
    width: 100%; 
    box-sizing: border-box; 
}

.hero-section { 
    text-align: center; 
    max-width: 700px; 
    margin: 0 auto 4rem auto; 
}

.badge { 
    font-size: 0.75rem; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    background-color: rgba(34, 211, 238, 0.1); 
    color: #22d3ee; 
    border: 1px solid rgba(34, 211, 238, 0.2); 
    padding: 4px 12px; 
    border-radius: 9999px; 
    display: inline-block; 
}

h1 { 
    font-size: 2.5rem; 
    font-weight: 900; 
    margin-top: 1.5rem; 
    margin-bottom: 1rem; 
    line-height: 1.2; 
    letter-spacing: -0.025em; 
}

.gradient-text { 
    background: linear-gradient(to right, #a855f7, #06b6d4, #10b981); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}

.subtitle { 
    color: #94a3b8; 
    font-size: 1.125rem; 
    line-height: 1.75; 
    margin: 0; 
}

/* ==========================================================================
   4. Rejilla de Servicios (Cards)
   ========================================================================== */
.grid-services { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 1.5rem; 
}

.card { 
    background-color: #0f172a; 
    border: 1px solid #1e293b; 
    padding: 1.5rem; 
    border-radius: 0.75rem; 
    transition: all 0.3s; 
}

.card:hover { 
    border-color: rgba(6, 182, 212, 0.4); 
    transform: translateY(-2px); 
    box-shadow: 0 10px 20px -10px rgba(0,0,0,0.7); 
}

.card-icon { 
    background-color: rgba(6, 182, 212, 0.1); 
    border: 1px solid rgba(6, 182, 212, 0.2); 
    color: #06b6d4; 
    width: 44px; 
    height: 44px; 
    border-radius: 0.5rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.25rem; 
    margin-bottom: 1rem; 
}

.card.cyber .card-icon { 
    color: #10b981; 
    background-color: rgba(16, 185, 129, 0.1); 
    border-color: rgba(16, 185, 129, 0.2); 
}

.card.blockchain .card-icon { 
    color: #a855f7; 
    background-color: rgba(168, 85, 247, 0.1); 
    border-color: rgba(168, 85, 247, 0.2); 
}

h3 { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #ffffff; 
    margin-top: 0; 
    margin-bottom: 0.5rem; 
}

.card p { 
    color: #94a3b8; 
    font-size: 0.875rem; 
    line-height: 1.5; 
    margin: 0; 
}

/* ==========================================================================
   5. Pie de Página
   ========================================================================== */
footer { 
    background-color: #020617; 
    padding: 1.5rem 0; 
    text-align: center; 
    font-size: 0.75rem; 
    color: #475569; 
    border-top: 1px solid #0f172a; 
    width: 100%; 
}

/* ==========================================================================
   6. Reglas Adaptativas para Teléfonos Móviles (Auto-Enfoque CSS)
   ========================================================================== */
@media (max-width: 768px) {
    nav {
        padding: 0.75rem 1rem;
    }
    
    .nav-container {
        flex-direction: row;
        flex-wrap: nowrap; /* Impide que el menú salte a una segunda fila */
        gap: 15px;
    }
    
    /* Convierte el menú del móvil en una fila deslizable con el dedo */
    .nav-links {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2px;
        flex-grow: 1;
        justify-content: flex-start; /* Mantiene el orden correcto: de izquierda a derecha siempre */
        
        /* ACTIVADORES DE ENFOQUE: Le dicen al móvil que este contenedor permite anclajes */
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
    }
    
    /* Ocultamos las barras de scroll feas en móviles para mantener la finura visual */
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-links {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .nav-links a {
        margin-left: 0.6rem; 
        margin-right: 0.6rem;
        font-size: 0.85rem;  
    }
    
    /* TRUCO SEGURO: Obliga al navegador del móvil a deslizarse automáticamente 
       hasta dejar el botón que tenga el id="activo" centrado en la pantalla */
    .nav-links a#activo {
        scroll-snap-align: center;
        scroll-margin-left: 20px;
        scroll-margin-right: 20px;
    }
    
    /* Ajustes generales del contenido en móvil */
    h1 {
        font-size: 2rem;
    }
    .hero-section {
        margin-bottom: 2.5rem;
    }
}