/*========== RESETEO Y BASE ==========*/
/* El selector universal '*' selecciona todos los elementos para resetear estilos */
* {
    margin: 0;
    /* Elimina márgenes exteriores por defecto */
    padding: 0;
    /* Elimina rellenos interiores por defecto */
    box-sizing: border-box;
    /* Incluye padding y bordes dentro del ancho/alto total */
}

/* Estilo base para el cuerpo de la página */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Fuentes de texto */
    background: radial-gradient(circle at top, #2d2d2d 0%, #1a1a1a 100%);
    /* Fondo degradado circular oscuro */
    color: #e0e0e0;
    /* Color de texto gris claro */
    line-height: 1.6;
    /* Espaciado entre líneas para legibilidad */
    padding-top: 80px;
    /* Espacio superior para que el nav fijo no cubra el contenido */
    overflow-x: hidden;
    /* Evita el scroll horizontal si algo sobresale */
}

/*========== SCROLLBAR PERSONALIZADA (Barra de desplazamiento) ==========*/
body::-webkit-scrollbar {
    width: 15px;
    /* Ancho de la barra */
}

body::-webkit-scrollbar-track {
    background: #2d2d2d;
    /* Color del carril de la barra */
}

body::-webkit-scrollbar-thumb {
    background: rgba(245, 243, 243, 0.1);
    /* Color de la pieza deslizante */
    border-radius: 10px;
    /* Bordes redondeados */
    border: 4px solid transparent;
    /* Margen transparente */
    background-clip: content-box;
    /* El color solo se aplica al contenido, no al borde */
}

/* Cambio de color y cursor cuando pasas el mouse por encima de la barra */
body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
    cursor: grab;
}

/* Cambio de color y cursor cuando haces click en la barra */
body::-webkit-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.2);
    cursor: grabbing;
}

/*========== NAVEGACIÓN (Barra superior) ==========*/
nav {
    position: fixed;
    /* Mantiene la barra fija arriba al hacer scroll */
    top: 0;
    /* Pegada al borde superior */
    width: 100%;
    /* Ocupa todo el ancho */
    height: 70px;
    /* Altura de la barra */
    background: rgba(30, 30, 30, 0.8);
    /* Fondo oscuro semi-transparente */
    backdrop-filter: blur(15px);
    /* Desenfoque de fondo para efecto cristal */
    display: flex;
    /* Usa Flexbox para alinear elementos */
    justify-content: space-between;
    /* Separa logo a la izquierda y menú a la derecha */
    align-items: center;
    /* Centra los elementos verticalmente */
    padding: 0 5%;
    /* Espaciado lateral del 5% */
    z-index: 1000;
    /* Asegura que esté por encima de todo */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Línea inferior sutil */
}

/* Estilo del "Logo" o nombre del proyecto a la izquierda */
.nav-logo a {
    color: #fff;
    /* Texto blanco */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 800;
    /* Texto muy grueso */
    font-size: 1.2rem;
    /* Tamaño de fuente */
    letter-spacing: 2px;
    /* Espacio entre letras */
}

/* Contenedor de los enlaces de navegación */
.nav-menu {
    display: flex;
    /* Enlaces en fila */
    gap: 30px;
    /* Espacio de 30px entre enlaces */
}

/* Estilo de los enlaces individuales */
.nav-link {
    color: #aaa;
    /* Color gris */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 600;
    /* Negrita media */
    text-transform: uppercase;
    /* Texto en mayúsculas */
    letter-spacing: 1px;
    /* Espacio entre letras */
    transition: 0.3s;
    /* Animación suave de 0.3 segundos */
}

/* Efecto al pasar el mouse o cuando el link está activo */
.nav-link:hover,
.nav-link.active {
    color: #4db8ff;
    /* Cambia a azul claro */
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
    /* Brillo azul */
}

/* BOTÓN HAMBURGUESA: Oculto por defecto en PC */
.menu-toggle {
    display: none;
    /* No se ve en pantallas grandes */
    flex-direction: column;
    /* Alinea las 3 líneas en columna */
    justify-content: space-between;
    /* Las separa equitativamente */
    width: 30px;
    /* Ancho del icono */
    height: 21px;
    /* Alto del icono */
    background: transparent;
    /* Sin fondo */
    border: none;
    /* Sin borde */
    cursor: pointer;
    /* Cursor de mano */
}

/* Las 3 rayitas individuales del botón hamburguesa */
.bar {
    width: 100%;
    /* Ocupan todo el ancho del botón */
    height: 3px;
    /* Grosor de la línea */
    background-color: #4db8ff;
    /* Color azul */
    border-radius: 10px;
    /* Bordes redondeados */
    transition: all 0.3s ease;
    /* Animación suave para transformaciones */
}

/* Estilo común para links de nav y botones de desplegable */
nav a,
.menu-desplegable-btn {
    color: #aaa;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 20px;
    /* Espacio interno */
    border-radius: 8px;
    /* Bordes redondeados */
    transition: 0.3s;
    display: flex;
    /* Flex para alinear texto e iconos si los hubiera */
    align-items: center;
}

/* Contenedor del menú desplegable */
.menu-desplegable {
    position: relative;
    /* Necesario para posicionar el contenido dentro */
    display: inline-block;
}

/* Hover para botones de navegación */
nav a:hover,
.menu-desplegable-btn:hover {
    color: #4db8ff;
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
}

/* Cuadro oculto que contiene los links del desplegable */
.menu-desplegable-contenido {
    position: absolute;
    /* Flota respecto al botón */
    top: 100%;
    /* Aparece justo debajo */
    right: 20px;
    /* Ajuste lateral */
    background: rgba(30, 30, 30, 0.95);
    /* Fondo oscuro casi opaco */
    backdrop-filter: blur(10px);
    /* Desenfoque */
    min-width: 250px;
    /* Ancho mínimo */
    border-radius: 12px;
    /* Bordes redondeados */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    /* Sombra profunda */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde sutil */
    opacity: 0;
    /* Invisible por defecto */
    visibility: hidden;
    /* No interactuable por defecto */
    transform: translateY(15px);
    /* Desplazado hacia abajo para la animación */
    transition: 0.3s ease;
    /* Animación suave */
    overflow: hidden;
    /* Corta el contenido sobrante */
}

/* Muestra el contenido al pasar el mouse por el contenedor */
.menu-desplegable:hover .menu-desplegable-contenido {
    opacity: 1;
    /* Se vuelve visible */
    visibility: visible;
    /* Se vuelve interactuable */
    transform: translateY(5px);
    /* Sube un poco a su posición final */
}

/* Estilos de los links dentro del desplegable */
.menu-desplegable-contenido a {
    text-transform: none;
    /* Sin mayúsculas automáticas */
    letter-spacing: 0;
    /* Sin espacio extra entre letras */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Línea divisoria */
}

/*========== RESPONSIVE (Ajustes para MÓVIL) ==========*/
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
        /* Aparece el botón hamburguesa en móviles */
    }

    /* El menú normal se convierte en una lista vertical oculta */
    .nav-menu {
        display: none;
        /* Oculto por defecto */
        flex-direction: column;
        /* Elementos uno debajo de otro */
        position: absolute;
        /* Posicionado fuera del flujo */
        top: 70px;
        /* Debajo del navbar */
        left: 0;
        width: 100%;
        /* Todo el ancho */
        background: rgba(30, 30, 30, 0.95);
        /* Fondo oscuro */
        backdrop-filter: blur(15px);
        padding: 40px 0;
        /* Espacio arriba y abajo */
        text-align: center;
        /* Centra los textos */
        gap: 25px;
        /* Espacio entre opciones */
        border-bottom: 1px solid rgba(77, 184, 255, 0.2);
    }

    /* Se activa con JavaScript al pulsar el botón */
    .nav-menu.active {
        display: flex;
        /* Se muestra el menú */
        animation: fadeIn 0.4s ease;
        /* Animación de entrada */
    }

    /* Transformación de las barras en una 'X' */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        /* Barra superior gira */
    }

    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
        /* Barra central desaparece */
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        /* Barra inferior gira al revés */
    }
}

/*========== SECCIÓN HERO (Bienvenida) ==========*/
.hero {
    text-align: center;
    /* Texto centrado */
    padding: 60px 20px;
    /* Relleno superior/inferior y lateral */
    animation: fadeIn 1.2s ease-out;
    /* Animación de aparición al cargar */
}

/* Título principal H1 */
h1 {
    font-size: clamp(2.5em, 8vw, 4em);
    /* Tamaño fluido: mínimo 2.5em, ideal 8vw, máximo 4em */
    color: #fff;
    margin-bottom: 10px;
    /* Espacio abajo */
    text-transform: uppercase;
    /* Mayúsculas */
    /* Texto con degradado blanco a azul */
    background: linear-gradient(to right, #fff, #4db8ff);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Frase secundaria debajo del H1 */
.tagline {
    font-style: italic;
    /* Letra cursiva */
    color: #888;
    /* Gris oscuro */
    margin-top: -10px;
    /* Sube un poco para acercarse al H1 */
}

/*========== CONTENEDORES DE TARJETAS ==========*/
.contenedor-principal {
    max-width: 900px;
    /* Ancho máximo centrado */
    margin: 0 auto;
    /* Centrado horizontal */
    padding: 0 20px;
    /* Espacio lateral */
}

/* Párrafo de presentación */
.presentacion p {
    font-size: 1.25em;
    /* Letra un poco más grande */
    text-align: center;
    /* Centrado */
    margin-bottom: 40px;
    /* Espacio abajo */
}

/* Títulos H2 */
h2 {
    color: #fff;
    text-align: center;
    margin-bottom: 25px;
    font-size: 2em;
}

/* Tarjetas de información */
.tarjeta-info {
    background: rgba(255, 255, 255, 0.03);
    /* Fondo casi invisible */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde sutil */
    padding: 40px;
    /* Relleno interno generoso */
    border-radius: 20px;
    /* Esquinas redondeadas */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    /* Sombra suave */
    transition: transform 0.3s ease;
    /* Animación para el movimiento */
}

/* Efecto hover en las tarjetas */
.tarjeta-info:hover {
    transform: translateY(-5px);
    /* La tarjeta "sube" un poco */
    border-color: rgba(77, 184, 255, 0.4);
    /* El borde brilla en azul */
}

/*========== BOTÓN DE ACCIÓN (CTA - Call To Action) ==========*/
.cta {
    text-align: center;
    /* Botón centrado */
    margin-top: 50px;
    /* Espacio arriba */
    padding-bottom: 60px;
    /* Espacio abajo de la página */
}

/* Estilo del botón principal */
.boton-principal {
    display: inline-block;
    /* Se comporta como bloque pero mide lo que su contenido */
    background: #4db8ff;
    /* Fondo azul */
    color: #1a1a1a;
    /* Texto oscuro */
    padding: 15px 40px;
    /* Relleno interno */
    border-radius: 50px;
    /* Botón totalmente redondeado */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 700;
    /* Texto muy grueso */
    text-transform: uppercase;
    /* Mayúsculas */
    box-shadow: 0 10px 20px rgba(77, 184, 255, 0.2);
    /* Sombra azulada */
    transition: 0.3s;
    /* Animación suave */
}

/* Hover del botón principal */
.boton-principal:hover {
    transform: scale(1.05);
    /* Crece un poquito */
    background: #fff;
    /* Cambia a fondo blanco */
    box-shadow: 0 15px 30px rgba(77, 184, 255, 0.4);
    /* Brilla más */
}

/*========== PIE DE PÁGINA ==========*/
footer {
    text-align: center;
    /* Centrado */
    padding: 60px 20px;
    /* Espaciado interno */
    color: #555;
    /* Gris oscuro discreto */
    font-size: 0.9rem;
    /* Texto pequeño */
}

/*========== ANIMACIONES GENERALES ==========*/
@keyframes fadeIn {
    from {
        opacity: 0;
        /* Empieza invisible */
        transform: translateY(20px);
        /* Empieza un poco más abajo */
    }

    to {
        opacity: 1;
        /* Termina visible */
        transform: translateY(0);
        /* Termina en su sitio */
    }
}