/*========== RESETEO Y BASE  ==========*/
/* Selector universal para limpiar márgenes y rellenos */
* {
    margin: 0;
    /* Quita espacios externos */
    padding: 0;
    /* Quita espacios internos */
    box-sizing: border-box;
    /* El tamaño incluye bordes y rellenos */
}

/* Configuración de la página */
body {
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /* Fuentes del sistema */
    background: radial-gradient(circle at top, #2d2d2d 0%, #1a1a1a 100%);
    /* Fondo oscuro degradado */
    color: #e0e0e0;
    /* Color de texto claro */
    line-height: 1.6;
    /* Espaciado de línea para lectura */
    padding-top: 100px;
    /* Espacio para que el menú fijo no tape el título */
}

/*========== 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 {
    height: 70px;
    /* Altura de la barra */
    position: fixed;
    /* Siempre visible al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    /* Todo el ancho */
    background: rgba(30, 30, 30, 0.8);
    /* Fondo semi-transparente */
    backdrop-filter: blur(15px);
    /* Efecto de desenfoque traslúcido */
    display: flex;
    /* Alinea logo y enlaces */
    align-items: center;
    /* Centrado vertical */
    justify-content: space-between;
    /* Espacia extremos */
    padding: 0 40px;
    /* Espacio lateral */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    /* Sombra inferior */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Línea divisoria */
    z-index: 1000;
    /* Siempre por encima */
}

/* Contenedor de enlaces del menú */
.nav-links {
    display: flex;
    /* Enlaces en fila horizontal */
    align-items: center;
}

/* Reset de Checkbox y estilo Hamburguesa (para móviles) */
#menu-check {
    display: none;
}

/* Oculta el checkbox real */

.hamburger {
    display: none;
    /* Oculto en escritorio */
    cursor: pointer;
    /* Mano al apuntar */
    flex-direction: column;
    /* Rayas en vertical */
    gap: 5px;
    /* Separación entre rayas */
    z-index: 1001;
}

.hamburger span {
    width: 30px;
    /* Ancho de la raya */
    height: 3px;
    /* Grosor de la raya */
    background: #4db8ff;
    /* Color azul */
    border-radius: 5px;
    transition: 0.3s;
    /* Animación para convertir a 'X' */
    box-shadow: 0 0 8px rgba(77, 184, 255, 0.4);
    /* Resplandor neón */
}

/* Enlaces y Botones del Menú */
nav a,
.menu-desplegable-btn {
    color: #aaa;
    /* Gris suave */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 600;
    /* Negrita */
    text-transform: uppercase;
    /* Mayúsculas */
    letter-spacing: 1px;
    /* Espacio entre letras */
    padding: 10px 20px;
    /* Relleno */
    border-radius: 8px;
    /* Esquinas redondeadas */
    transition: 0.3s;
    /* Animación suave */
    display: flex;
    /* Alineación interna */
    align-items: center;
}

/* Hover: El enlace brilla y cambia a azul */
nav a:hover,
.menu-desplegable-btn:hover {
    color: #4db8ff;
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
}

/* Menú Desplegable (Escritorio) */
.menu-desplegable {
    position: relative;
    /* Base para el posicionamiento del contenido */
    display: inline-block;
}

/* Contenido del menú oculto que baja al pasar el mouse */
.menu-desplegable-contenido {
    position: absolute;
    /* Flota sobre la página */
    top: 100%;
    /* Justo debajo del nav */
    right: 0;
    /* Alineado a la derecha */
    background: rgba(30, 30, 30, 0.95);
    /* Fondo casi negro */
    backdrop-filter: blur(10px);
    min-width: 250px;
    /* Ancho del cuadro */
    border-radius: 12px;
    /* Esquinas redondeadas */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    /* Sombra profunda */
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    /* Invisible por defecto */
    visibility: hidden;
    /* No interactuable */
    transform: translateY(15px);
    /* Posición para animación de subida */
    transition: 0.3s ease;
    overflow: hidden;
}

/* Muestra el submenú al pasar el mouse */
.menu-desplegable:hover .menu-desplegable-contenido {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

/* Enlaces individuales dentro del submenú */
.menu-desplegable-contenido a {
    text-transform: none;
    /* Texto normal (no mayúsculas) */
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Línea divisoria */
    padding: 12px 20px;
}

/* Imagen del logo Home */
.img-home {
    display: inline-block;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Animación de zoom */
}

/* Zoom del logo al pasar el mouse */
.img-home:hover {
    transform: scale(1.2);
}

/*========== RESPONSIVE (Móviles y Tablets) ==========*/
@media (max-width: 850px) {
    nav {
        padding: 0 20px;
    }

    /* Menos espacio lateral */

    .hamburger {
        display: flex;
    }

    /* Muestra el botón de 3 rayas */

    /* El menú de enlaces se convierte en un panel vertical oculto */
    .nav-links {
        position: absolute;
        /* Flota debajo del nav */
        top: 70px;
        left: 0;
        width: 100%;
        /* Todo el ancho de pantalla */
        background: rgba(26, 26, 26, 0.98);
        /* Fondo casi opaco */
        backdrop-filter: blur(20px);
        flex-direction: column;
        /* Un enlace sobre otro */
        padding: 0;
        height: 0;
        /* Altura 0 para ocultarlo */
        overflow: hidden;
        /* No deja ver el contenido */
        transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        /* Animación de despliegue */
        border-bottom: 1px solid rgba(77, 184, 255, 0.2);
    }

    /* Cuando el checkbox está marcado (clic en hamburguesa) */
    #menu-check:checked~.nav-links {
        height: auto;
        /* Ajusta la altura al contenido */
        padding: 20px 0;
        /* Da espacio interno */
    }

    .menu-desplegable {
        width: 100%;
    }

    .menu-desplegable-btn {
        justify-content: center;
        /* Centra el texto del botón en móvil */
        width: 100%;
        padding: 15px;
    }

    /* Submenú en versión móvil (se despliega bajo el botón) */
    .menu-desplegable-contenido {
        position: relative;
        /* Ya no flota, ocupa espacio */
        top: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: rgba(255, 255, 255, 0.03);
        /* Fondo sutil */
        display: none;
        /* Oculto hasta hover */
        width: 100%;
        border: none;
        border-radius: 0;
    }

    /* Muestra submenú al pasar el dedo/mouse en móvil */
    .menu-desplegable:hover .menu-desplegable-contenido {
        display: block;
    }

    /* Animación de las rayas de la hamburguesa para formar una 'X' */
    #menu-check:checked+.hamburger span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 6px);
    }

    #menu-check:checked+.hamburger span:nth-child(2) {
        opacity: 0;
    }

    #menu-check:checked+.hamburger span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
}

/*========== TÍTULOS Y SECCIONES DE CONTENIDO ==========*/
/* Título principal de la sub-página */
h1 {
    text-align: center;
    /* Centrado */
    font-size: 2.5em;
    /* Tamaño grande */
    color: #fff;
    margin-bottom: 10px;
}

/* Párrafos directos del body (introducción) */
body>p {
    text-align: center;
    margin-bottom: 40px;
    color: #aaa;
    /* Color gris suave */
}

/* Estilo para el bloque de descripción */
.descripcion {
    text-align: center;
    padding: 4%;
    /* Espaciado porcentual */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

/* Contenedores de secciones específicas (Periféricos, componentes, etc.) */
section#menu-perifericos,
section#menu-componentes,
section#menu-sobremesa,
section#menu-portatiles,
section#menu-soldadura,
section#menu-consejos-montar,
section#menu-consejos-desmontar,
section#menu-consejos-mantener,
section#menu-tornillos,
section#menu-error,
section#menu-software,
section#menu-sistema-operativo,
section#menu-bibliografía,
section#menu-mantenimiento,
section#menu-portatil,
section#menu-respaldo,
section#menu-iso {
    max-width: 1000px;
    /* Ancho máximo de contenido */
    margin: 0 auto;
    /* Centrado horizontal */
    padding: 20px;
}

/* Tarjetas de artículos individuales */
article {
    background: rgba(255, 255, 255, 0.03);
    /* Fondo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Borde fino */
    padding: 40px;
    /* Espacio interno generoso */
    border-radius: 20px;
    /* Esquinas muy redondeadas */
    margin-bottom: 50px;
    /* Espacio entre tarjetas */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    /* Sombra suave */
    transition: transform 0.3s ease;
    /* Suavidad al mover */
}

/* Efecto Hover: La tarjeta sube ligeramente y el borde brilla */
article:hover {
    transform: translateY(-5px);
    border-color: rgba(77, 184, 255, 0.3);
}

/* Títulos H2 dentro de los artículos */
article h2 {
    color: #4db8ff;
    /* Color azul distintivo */
    font-size: 2em;
    margin-bottom: 20px;
    border-bottom: 2px solid #4db8ff;
    /* Línea inferior azul */
    display: inline-block;
    /* Para que la línea solo ocupe el texto */
    padding-bottom: 5px;
}

/* Imágenes dentro de los artículos */
article img {
    display: block;
    /* Permite centrar con margin */
    width: 100%;
    /* Adaptable al ancho */
    max-width: 600px;
    /* Tamaño límite */
    height: auto;
    /* Mantiene proporción */
    margin: 20px auto;
    /* Centrado horizontal */
    border-radius: 15px;
    /* Esquinas curvas */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    /* Sombra proyectada */
}

/* Subtítulos H3 */
h3 {
    margin-top: 30px;
    color: #fff;
    /* Blanco puro */
    font-size: 1.5em;
    margin-bottom: 15px;
}

/* Estilo específico para las imágenes de tornillos (más pequeñas) */
.img-tornillo {
    display: block;
    width: 100%;
    max-width: 300px;
    /* Mucho más pequeñas para no saturar */
    height: auto;
    margin: 15px 0;
    border-radius: 8px;
    /* Bordes suaves */
    border: 1px solid #ddd;
    /* Borde claro decorativo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Sombra ligera */
    transition: transform 0.3s ease;
    /* Efecto de zoom */
}

/* El tornillo crece un poco al pasar el mouse */
.img-tornillo:hover {
    transform: scale(1.05);
    border-color: #4db8ff;
    /* Borde azul al hover */
}

/*========== TABLAS DE DATOS ==========*/
table {
    border: solid #4db8ff 1px;
    /* Marco azul */
    width: 100%;
    /* Todo el ancho disponible */
    border-collapse: collapse;
    /* Une los bordes de celdas */
    margin-top: 20px;
    color: #e0e0e0;
    /* Texto claro */
    table-layout: fixed;
    /* Columnas de ancho fijo */
}

/* Cabecera de la tabla */
thead {
    background: rgba(77, 184, 255, 0.2);
    /* Fondo azulado translúcido */
    border: solid #4db8ff 1px;
}

/* Cuerpo de la tabla */
tbody {
    text-align: center;
    /* Todo el texto centrado */
    border: solid #4db8ff 1px;
}

/* Celdas, filas y encabezados */
tr,
td,
th {
    border: solid #4db8ff 1px;
    /* Todos los bordes azules */
}

/*========== SECCIÓN SISTEMAS OPERATIVOS (LOGOS ESPECIALES) ==========*/

/* Contenedor flex para alinear logo y título del SO */
.header-so {
    display: flex;
    align-items: center;
    /* Centrado vertical */
    gap: 25px;
    /* Separación entre logo y texto */
    margin-bottom: 20px;
    border-bottom: 2px solid #4db8ff;
    /* Línea divisoria */
    padding-bottom: 10px;
}

/* Estilo para los logos de los Sistemas Operativos */
.logo-so {
    width: 70px;
    /* Tamaño del logo */
    height: 70px;
    object-fit: contain;
    /* No deforma el logo */
    filter: drop-shadow(0 0 8px rgba(77, 184, 255, 0.4));
    /* Brillo azul neón */
    transition: transform 0.3s ease;
    /* Reseteo de estilos de imagen general */
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* El logo del SO gira y brilla al pasar el ratón por la tarjeta */
.article-so:hover .logo-so {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 12px rgba(77, 184, 255, 0.6));
}

/* Ajuste del título H2 dentro del header del SO */
.article-so h2 {
    border-bottom: none;
    /* Quitamos la línea porque ya la tiene el contenedor header-so */
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Información detallada de los SO */
.info-so p {
    color: #e0e0e0;
    font-size: 1.05em;
    line-height: 1.8;
    /* Más espaciado entre líneas */
}

/* Texto resaltado en SO */
.info-so strong {
    color: #4db8ff;
}

/*========== RESPONSIVE PARA LOGOS DE SO ==========*/
@media (max-width: 600px) {
    .header-so {
        flex-direction: column;
        /* Logo arriba, título abajo */
        text-align: center;
        gap: 15px;
    }

    .logo-so {
        width: 60px;
        height: 60px;
    }
}

/*========== LISTAS Y TEXTO GENERAL ==========*/
ul {
    list-style-position: inside;
    /* Los puntos de la lista entran en el flujo de texto */
    margin-left: 10px;
}

li {
    margin-bottom: 15px;
    /* Separación entre items */
}

/* Texto destacado en listas */
li strong {
    color: #4db8ff;
    font-size: 1.1em;
}

/* Párrafos dentro de artículos */
article p {
    margin: 10px 0;
}

/*========== PIE DE PÁGINA (FOOTER) ==========*/
footer {
    text-align: center;
    /* Centrado */
    padding: 60px 20px;
    /* Mucho espacio */
    color: #555;
    /* Gris discreto */
    font-size: 0.9rem;
    /* Letra pequeña */
}