/*========== RESETEO Y BASE ==========*/
/* El selector universal '*' selecciona todos los elementos del HTML */
* {
    margin: 0;
    /* Elimina el margen por defecto de todos los elementos */
    padding: 0;
    /* Elimina el relleno (padding) por defecto */
    box-sizing: border-box;
    /* Asegura que el padding y el borde no aumenten el ancho total del elemento */
}

/* Estilos generales para el cuerpo de la página */
body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    /* Define la fuente de texto */
    background: radial-gradient(circle at top, #2d2d2d 0%, #1a1a1a 100%);
    /* Fondo oscuro con degradado circular */
    color: #e0e0e0;
    /* Color de texto gris claro */
    line-height: 1.6;
    /* Espaciado entre líneas para mejor lectura */
    padding-top: 100px;
    /* Deja espacio arriba para que el menú fijo (navbar) no tape el contenido */
}

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

/* Estilo del "camino" por donde se desliza la barra */
body::-webkit-scrollbar-track {
    background: #2d2d2d;
}

/* Estilo de la pieza que se arrastra */
body::-webkit-scrollbar-thumb {
    background: rgba(245, 243, 243, 0.1);
    /* Color suave semi-transparente */
    border-radius: 10px;
    /* Bordes redondeados */
    border: 4px solid transparent;
    /* Truco para crear espacio alrededor de la barra */
    background-clip: content-box;
    /* Hace que el color solo se vea dentro del borde transparente */
}

/* 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 (Menú superior) ==========*/
.navbar {
    height: 70px;
    /* Altura fija del menú */
    position: fixed;
    /* Hace que el menú se quede pegado arriba al hacer scroll */
    top: 0;
    /* Posición en el borde superior */
    left: 0;
    /* Posición en el borde izquierdo */
    width: 100%;
    /* Ocupa todo el ancho de la pantalla */
    background: rgba(30, 30, 30, 0.8);
    /* Fondo oscuro con transparencia */
    backdrop-filter: blur(15px);
    /* Efecto de cristal esmerilado (desenfoca lo de atrás) */
    display: flex;
    /* Activa Flexbox para alinear elementos internos */
    align-items: center;
    /* Centra los elementos verticalmente */
    justify-content: space-between;
    /* Separa el logo a la izquierda y el menú a la derecha */
    padding: 0 40px;
    /* Espacio interno a los lados */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    /* Sombra debajo del menú */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Línea sutil en el borde inferior */
    z-index: 1000;
    /* Asegura que el menú esté siempre por encima de otros elementos */
    box-sizing: border-box;
    /* Evita que el padding afecte al ancho total del 100% */
}

/* Contenedor de los enlaces del menú */
.nav-menu {
    display: flex;
    /* Alinea los enlaces en fila */
    align-items: center;
    /* Centra verticalmente */
    gap: 20px;
    /* Espacio entre cada enlace */
}

/* Estilo base para los enlaces y botones del menú */
.nav-link,
.menu-desplegable-btn {
    color: #aaa;
    /* Color de texto grisáceo */
    text-decoration: none;
    /* Quita el subrayado de los links */
    font-weight: 600;
    /* Texto en negrita */
    text-transform: uppercase;
    /* Convierte el texto a mayúsculas */
    letter-spacing: 1px;
    /* Separación entre letras */
    padding: 10px 15px;
    /* Espacio interno del botón */
    border-radius: 8px;
    /* Bordes un poco redondeados */
    transition: 0.3s;
    /* Duración de la animación al pasar el mouse */
    cursor: pointer;
    /* Cambia el cursor a una "mano" al apuntar */
    background: transparent;
    /* Fondo transparente */
    border: none;
    /* Sin bordes */
    font-family: inherit;
    /* Usa la misma fuente que el body */
}

/* Efecto al pasar el mouse por los enlaces */
.nav-link:hover,
.menu-desplegable-btn:hover {
    color: #4db8ff;
    /* Cambia el color a azul claro */
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
    /* Añade un brillo azul al texto */
}

/*========== DESPLEGABLES (DROPDOWNS) ==========*/
/* Contenedor relativo para posicionar el contenido dentro */
.menu-desplegable {
    position: relative;
}

/* Contenido oculto que aparece al desplegar */
.menu-desplegable-contenido {
    display: none;
    /* Oculto por defecto */
    position: absolute;
    /* Se posiciona fuera del flujo normal de la página */
    top: 100%;
    /* Aparece justo debajo del botón */
    left: 50%;
    /* Centrado respecto al botón */
    transform: translateX(-50%);
    /* Ajuste para centrarlo exactamente */
    background: rgba(25, 25, 25, 0.95);
    /* Fondo casi negro y opaco */
    backdrop-filter: blur(10px);
    /* Desenfoque de fondo */
    min-width: 180px;
    /* Ancho mínimo del cuadro desplegable */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 1);
    /* Sombra intensa */
    border-radius: 10px;
    /* Bordes redondeados */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde sutil */
    overflow: hidden;
    /* Corta los bordes para que los hijos no sobresalgan */
    z-index: 1100;
    /* Por encima del navbar principal */
}

/* Enlaces dentro del menú desplegable */
.menu-desplegable-contenido a {
    color: #ccc;
    /* Color gris claro */
    padding: 12px 20px;
    /* Espaciado interno */
    text-decoration: none;
    /* Sin subrayado */
    display: block;
    /* Hace que el enlace ocupe toda la línea */
    font-size: 0.9rem;
    /* Tamaño de fuente un poco más pequeño */
    transition: 0.3s;
    /* Animación suave */
}

/* Efecto hover dentro del desplegable */
.menu-desplegable-contenido a:hover {
    background: rgba(77, 184, 255, 0.2);
    /* Fondo azul muy transparente */
    color: #4db8ff;
    /* Texto azul */
    padding-left: 25px;
    /* Pequeño desplazamiento a la derecha */
}

/* Mostrar desplegable al pasar el mouse (Solo si la pantalla es mayor a 768px) */
@media (min-width: 769px) {
    .menu-desplegable:hover .menu-desplegable-contenido {
        display: block;
        /* Hace que el menú sea visible */
        animation: fadeIn 0.3s ease;
        /* Aplica la animación de aparición */
    }
}

/* Definición de la animación de aparición suave */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }

    /* Empieza invisible y más abajo */
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    /* Termina visible y en su sitio */
}

/*========== BOTÓN HAMBURGUESA (Para móviles) ==========*/
.menu-toggle {
    display: none;
    /* Oculto en pantallas grandes */
    flex-direction: column;
    /* Alinea las 3 barritas verticalmente */
    justify-content: space-between;
    /* Separa las barritas equitativamente */
    width: 30px;
    /* Ancho del icono */
    height: 21px;
    /* Alto del icono */
    background: transparent;
    /* Sin fondo */
    border: none;
    /* Sin bordes */
    cursor: pointer;
    /* Cursor de mano */
    z-index: 1200;
    /* Muy arriba para que no se tape */
}

/* Estilo de cada barrita individual del botón hamburguesa */
.bar {
    width: 100%;
    /* Cada barra ocupa todo el ancho del botón */
    height: 3px;
    /* Grosor de la barra */
    background-color: #4db8ff;
    /* Color azul */
    border-radius: 10px;
    /* Bordes redondeados */
    transition: 0.3s;
    /* Animación para el cambio a 'X' */
}

/*========== RESPONSIVE ==========*/
@media (max-width: 768px) {
    .navbar {
        padding: 0 20px;
        /* Menos espacio lateral en móviles */
    }

    .menu-toggle {
        display: flex;
        /* Muestra el botón hamburguesa */
    }

    /* Ajuste del menú principal para que sea una columna vertical */
    .nav-menu {
        display: none;
        /* Oculto por defecto en móvil */
        flex-direction: column;
        /* Elementos uno debajo del otro */
        position: absolute;
        /* Posición fija respecto al menú */
        top: 70px;
        /* Justo debajo del navbar */
        left: 0;
        width: 100%;
        /* Ocupa todo el ancho */
        background: rgba(20, 20, 20, 0.95);
        /* Fondo oscuro casi opaco */
        backdrop-filter: blur(20px);
        /* Mucho desenfoque */
        padding: 20px 0;
        /* Espacio arriba y abajo */
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        max-height: calc(100vh - 70px);
        /* No supera el alto de la pantalla */
        overflow-y: auto;
        /* Permite scroll si hay muchos elementos */
    }

    /* Clase que se añade con JavaScript para abrir el menú */
    .nav-menu.active {
        display: flex;
        /* Se muestra al estar activo */
    }

    .menu-desplegable {
        width: 100%;
        /* Ocupa todo el ancho del menú móvil */
        text-align: center;
        /* Centra el texto */
    }

    /* Los desplegables en móvil ya no "flotan", se integran en la lista */
    .menu-desplegable-contenido {
        position: static;
        /* Vuelve a la posición normal (uno debajo de otro) */
        transform: none;
        /* Quita el ajuste de centrado anterior */
        background: rgba(255, 255, 255, 0.03);
        /* Fondo muy ligero */
        box-shadow: none;
        /* Sin sombras */
        border: none;
        /* Sin bordes */
        border-radius: 0;
        /* Sin redondeo */
        left: 0;
        width: 100%;
        display: block;
        /* Siempre visible dentro del menú desplegado */
    }

    /* Animaciones para transformar las barritas en una "X" cuando el menú está abierto */
    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        /* Mueve la barra 1 y la rota */
    }

    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
        /* Desaparece la barra del medio */
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
        /* Mueve la barra 3 y la rota */
    }
}

/*========== LOGO E IMAGEN DE INICIO ==========*/
.img-home {
    height: 45px;
    /* Altura de la imagen */
    width: auto;
    /* El ancho se ajusta solo para no deformar */
    transition: transform 0.3s ease;
    /* Animación de suavizado */
    cursor: pointer;
}

/* Efecto al pasar el mouse por el logo: se hace un poco más grande */
.img-home:hover {
    transform: scale(1.1);
}

/*========== CONTENIDO PRINCIPAL ==========*/
/* Estilo para el título principal H1 */
h1 {
    text-align: center;
    /* Texto centrado */
    font-size: 3rem;
    /* Tamaño grande */
    /* Crea un texto con degradado */
    background: linear-gradient(to right, #fff, #4db8ff);
    -webkit-background-clip: text;
    /* Corta el fondo con la forma de las letras */
    background-clip: none;
    -webkit-text-fill-color: transparent;
    /* Hace el texto transparente para ver el fondo */
    margin-bottom: 10px;
    /* Espacio debajo del título */
}

/* Layout de cuadrícula (Grid) para las secciones de componentes y periféricos */
#componentes,
#perifericos {
    display: grid;
    /* Activa el sistema de rejilla (Grid) */
    /* Crea columnas automáticamente que midan mínimo 350px y se ajusten al espacio */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    /* Espacio entre las tarjetas */
    max-width: 1200px;
    /* Ancho máximo de la sección */
    margin: 0 auto;
    /* Centra la sección en la pantalla */
    padding: 20px;
    /* Espacio interno */
}

/* Títulos de sección H2 (Componentes, Periféricos) */
h2 {
    grid-column: 1 / -1;
    /* Hace que el título ocupe todo el ancho del grid */
    color: #fff;
    /* Blanco */
    font-size: 2.2rem;
    /* Tamaño grande */
    border-left: 4px solid #4db8ff;
    /* Línea azul a la izquierda */
    padding-left: 15px;
    /* Espacio entre la línea y el texto */
    margin-top: 40px;
    /* Espacio arriba */
    margin-bottom: 10px;
    /* Espacio abajo */
}

/* Párrafo de introducción principal */
.p-principal {
    text-align: center;
    /* Texto centrado */
    padding: 10px 10px 10px;
    /* Espaciado interno */
}

/* Tarjetas Base (Artículos de componentes) */
article {
    background: rgba(255, 255, 255, 0.03);
    /* Fondo casi invisible */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Borde muy sutil */
    padding: 30px;
    /* Relleno interno */
    border-radius: 20px;
    /* Esquinas muy redondeadas */
    transition: all 0.3s ease;
    /* Animación para cualquier cambio */
    display: flex;
    /* Flex para organizar contenido interno */
    flex-direction: column;
    /* Elementos en vertical */
}

/* Efecto al pasar el mouse por la tarjeta */
article:hover {
    background: rgba(255, 255, 255, 0.05);
    /* Se vuelve un poco más clara */
    border-color: rgba(77, 184, 255, 0.3);
    /* El borde se vuelve azulado */
}

/* Ajustes para las sub-secciones de Periféricos (Entrada, Salida, etc.) */
#entrada,
#salida,
#almacenamiento-externo {
    grid-column: 1 / -1;
    /* Ocupan todo el ancho del grid principal */
    background: rgba(0, 0, 0, 0.2);
    /* Fondo un poco más oscuro */
    border: 1px dashed rgba(77, 184, 255, 0.2);
    /* Borde punteado azul */
    display: grid;
    /* Re-activa grid para las tarjetas dentro de esta sección */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Columnas internas */
    gap: 20px;
    /* Espacio entre periféricos */
    padding: 25px;
    /* Relleno */
}

/* Títulos H3 dentro de las secciones de periféricos */
#entrada>h3,
#salida>h3,
#almacenamiento-externo>h3 {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho de su contenedor */
    font-size: 1.8rem;
    color: #fff;
    border-bottom: 1px solid rgba(77, 184, 255, 0.3);
    /* Línea azul debajo */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Descripción de la categoría de periféricos */
#entrada>p,
#salida>p,
#almacenamiento-externo>p {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho */
    font-style: italic;
    /* Letra cursiva */
    margin-bottom: 20px;
    /* Espacio abajo */
}

/* Artículos internos (cada periférico individual) */
#entrada article,
#salida article,
#almacenamiento-externo article {
    background: rgba(255, 255, 255, 0.04);
    /* Fondo ligeramente distinto */
    min-height: 200px;
    /* Altura mínima para que todos se vean similares */
}

/* Tipografía de las tarjetas */
article h3 {
    color: #4db8ff;
    /* Título del componente en azul */
    font-size: 1.5rem;
    margin-bottom: 15px;
}

article p {
    font-size: 0.95rem;
    /* Tamaño de texto estándar */
    color: #bbb;
    /* Gris suave */
    margin-bottom: 20px;
}

/* Listas dentro de las tarjetas */
article ul {
    list-style: none;
    /* Quita los puntos por defecto de la lista */
    margin-bottom: 25px;
    /* Espacio abajo */
    flex-grow: 1;
    /* Hace que la lista empuje el botón al fondo si hay poco texto */
}

/* Elementos de la lista */
article li {
    position: relative;
    /* Necesario para posicionar la flecha personalizada */
    padding-left: 20px;
    /* Espacio para la flecha */
    margin-bottom: 8px;
    /* Espacio entre cada punto */
    font-size: 0.9rem;
}

/* Crear una flecha azul antes de cada elemento de lista */
article li::before {
    content: "→";
    /* El símbolo que queremos mostrar */
    position: absolute;
    /* Lo pone a la izquierda del texto */
    left: 0;
    color: #4db8ff;
    /* Color azul */
}

/*========== BOTONES DE "MÁS INFORMACIÓN" ==========*/
.boton-info {
    align-self: flex-start;
    /* El botón solo ocupa su propio ancho, no todo el article */
    padding: 10px 25px;
    /* Espaciado interno */
    background: transparent;
    /* Sin fondo */
    border: 1px solid #4db8ff;
    /* Borde azul */
    color: #4db8ff;
    /* Texto azul */
    border-radius: 30px;
    /* Botón ovalado */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 600;
    /* Texto en negrita */
    font-size: 0.85rem;
    text-transform: uppercase;
    /* Mayúsculas */
    transition: 0.3s;
    /* Animación suave */
}

/* Efecto al pasar el mouse por el botón */
.boton-info:hover {
    background: #4db8ff;
    /* El fondo se vuelve azul */
    color: #1a1a1a;
    /* El texto se vuelve oscuro */
    box-shadow: 0 5px 15px rgba(77, 184, 255, 0.4);
    /* Sombra con brillo azul */
}

/*========== SEPARADORES Y FOOTER ==========*/
/* Línea horizontal decorativa */
.separador {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho */
    border: none;
    /* Quita el estilo por defecto de <hr> */
    height: 1px;
    /* Grosor de 1 píxel */
    /* Degradado que desaparece en los extremos */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 40px 0;
    /* Espacio arriba y abajo */
}

/* Estilo del pie de página */
footer {
    grid-column: 1 / -1;
    /* Ocupa todo el ancho */
    text-align: center;
    /* Texto centrado */
    padding: 60px 20px;
    /* Mucho espacio interno */
    color: #555;
    /* Color gris oscuro */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    /* Línea sutil arriba */
}


/*========== AJUSTES FINALES PARA PANTALLAS PEQUEÑAS (Móvil) ==========*/
@media (max-width: 768px) {
    body {
        padding-top: 80px;
        /* Menos espacio arriba que en escritorio */
    }

    nav {
        padding: 0 15px;
        /* Menos relleno lateral */
    }

    h1 {
        font-size: 2rem;
        /* Título más pequeño para que quepa bien */
    }

    #componentes,
    #perifericos {
        /* Pasamos de columnas de 350px a solo 1 columna (1fr) */
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 15px;
    }

    #entrada,
    #salida,
    #almacenamiento-externo {
        grid-template-columns: 1fr;
        /* Una sola columna en periféricos */
        padding: 15px;
    }

    .menu-desplegable-contenido {
        right: -10px;
        /* Ajuste lateral para que no se corte */
        min-width: 200px;
    }

    /* Enlaces del menú en móvil */
    nav a,
    .menu-desplegable-btn {
        padding: 10px 10px;
        font-size: 0.8rem;
        /* Texto un poco más pequeño */
    }
}