/*========== RESETEO Y BASE ==========*/
/* Reseteo universal de estilos */
* {
    margin: 0;
    /* Elimina márgenes externos */
    padding: 0;
    /* Elimina rellenos internos */
    box-sizing: border-box;
    /* Incluye borde y padding en el cálculo del tamaño */
}

/* Configuración básica del cuerpo de la página */
body {
    font-family: 'Segoe UI', Roboto, sans-serif;
    /* Fuente del 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 */
    padding-top: 100px;
    /* Espacio superior para compensar el menú fijo */
}

/*========== 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 (Diseño de la barra superior) ==========*/
nav {
    height: 70px;
    /* Altura del menú */
    position: fixed;
    /* Pegado arriba al hacer scroll */
    top: 0;
    left: 0;
    width: 100%;
    /* Ocupa todo el ancho */
    /* Estética Glassmorphism (Efecto cristal) */
    background: rgba(30, 30, 30, 0.8);
    backdrop-filter: blur(15px);
    /* Desenfoca el fondo de la barra */
    display: flex;
    /* Alinea logo y enlaces */
    align-items: center;
    /* Centrado vertical */
    justify-content: space-between;
    /* Espacia los elementos a los extremos */
    padding: 0 40px;
    /* Espacio lateral interno */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    /* Sombra suave */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    /* Línea inferior fina */
    z-index: 1000;
    /* Siempre por encima del contenido */
}

/* Estilo para los enlaces de navegación y botones del menú */
nav a,
.menu-desplegable-btn {
    color: #aaa;
    /* Color gris suave */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 600;
    /* Negrita media */
    text-transform: uppercase;
    /* Texto en mayúsculas */
    letter-spacing: 1px;
    /* Espaciado entre letras */
    padding: 10px 20px;
    /* Espacio interno */
    border-radius: 8px;
    /* Esquinas redondeadas */
    transition: 0.3s;
    /* Animación suave de cambio */
    display: flex;
    /* Flex para alinear iconos si los hubiera */
    align-items: center;
}

/* Efecto Hover con Brillo Azul al pasar el mouse */
nav a:hover,
.menu-desplegable-btn:hover {
    color: #4db8ff;
    /* Cambia a azul claro */
    text-shadow: 0 0 10px rgba(77, 184, 255, 0.5);
    /* Añade resplandor al texto */
}

/* Cuadro de contenido para menús desplegables */
.menu-desplegable-contenido {
    position: absolute;
    /* Flota sobre la página */
    top: 100%;
    /* Justo debajo del nav */
    right: 20px;
    /* Ajuste de posición lateral */
    background: rgba(30, 30, 30, 0.95);
    /* Fondo casi opaco */
    backdrop-filter: blur(10px);
    min-width: 250px;
    /* Ancho del cuadro desplegable */
    border-radius: 12px;
    /* Bordes redondeados */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    /* Sombra intensa */
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    /* Invisible por defecto */
    visibility: hidden;
    /* No interactuable por defecto */
    transform: translateY(15px);
    /* Posición inicial para animación de subida */
    transition: 0.3s ease;
    /* Transición suave */
    overflow: hidden;
    /* Corta contenido que sobresalga */
}

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

/* Enlaces dentro del menú desplegable */
.menu-desplegable-contenido a {
    text-transform: none;
    /* Sin mayúsculas automáticas */
    letter-spacing: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    /* Separador suave */
}

/* Estilo del icono de inicio (Home) */
.img-home {
    display: inline-block;
    /* Se comporta como botón */
    width: 40px;
    /* Dimensiones del contenedor */
    height: 40px;
    cursor: pointer;
    /* Mano al apuntar */
    transition: transform 0.3s ease;
    /* Animación de zoom */
}

.img-home img {
    width: 100%;
    /* La imagen ocupa todo el ancho */
    height: 100%;
    object-fit: contain;
    /* No deforma la imagen */
}

/* El logo crece al pasar el ratón */
.img-home:hover {
    background-color: none;
    background: none;
    transform: scale(1.2);
}

/*========== CABECERA Y TÍTULOS ==========*/
header {
    text-align: center;
    /* Texto centrado */
    max-width: 900px;
    /* Ancho máximo de la cabecera */
    margin: 0 auto 40px;
    /* Centrado y margen inferior */
    padding: 0 20px;
    /* Espacio lateral */
}

/* Título principal con degradado */
h1 {
    font-size: 3rem;
    /* Tamaño grande */
    background: linear-gradient(to right, #fff, #4db8ff);
    /* Degradado blanco a azul */
    -webkit-background-clip: text;
    /* Corta el fondo con la forma del texto */
    background-clip: none;
    -webkit-text-fill-color: transparent;
    /* Hace transparente el texto para mostrar degradado */
    margin-bottom: 15px;
    /* Espacio abajo */
}

/* Frase de introducción bajo el título */
.introduccion {
    font-style: italic;
    /* Texto en cursiva */
    color: #888;
    /* Color gris oscuro */
    font-size: 1.1rem;
    /* Un poco más grande que el texto normal */
}

/*========== CONTENEDOR PRINCIPAL (MAIN) ==========*/
main {
    max-width: 1000px;
    /* Límite de ancho para el contenido */
    margin: 0 auto;
    /* Centrado horizontal */
    padding: 0 20px;
    /* Espacio lateral */
}

/* Secciones de contenido principal */
section {
    background: rgba(255, 255, 255, 0.03);
    /* Fondo casi transparente */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Borde sutil */
    padding: 30px;
    /* Espacio interno */
    border-radius: 20px;
    /* Esquinas redondeadas */
    margin-bottom: 40px;
    /* Separación entre secciones */
    transition: 0.3s;
    /* Animación de hover */
}

/* El borde brilla al pasar el ratón por la sección */
section:hover {
    border-color: rgba(77, 184, 255, 0.3);
}

/* Títulos de sección H2 */
h2 {
    color: #fff;
    /* Blanco puro */
    font-size: 1.8rem;
    /* Tamaño de fuente */
    border-left: 4px solid #4db8ff;
    /* Línea decorativa azul a la izquierda */
    padding-left: 15px;
    /* Espacio entre línea y texto */
    margin-bottom: 20px;
    /* Espacio abajo */
}

/*========== ARTÍCULOS Y PASOS INTERNOS ==========*/
/* Cajas de pasos o detalles dentro de una sección */
article {
    background: rgba(0, 0, 0, 0.2);
    /* Fondo oscuro */
    padding: 20px;
    /* Espacio interno */
    border-radius: 12px;
    /* Esquinas redondeadas */
    margin-top: 20px;
    /* Separación superior */
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Borde casi invisible */
}

/* Subtítulos H3 dentro de artículos */
h3 {
    color: #4db8ff;
    /* Color azul para resaltar */
    margin-bottom: 15px;
    /* Espacio abajo */
}

/*========== LISTAS TÉCNICAS (Viñetas y números) ==========*/
ul,
ol {
    padding-left: 20px;
    /* Espacio a la izquierda para los puntos/números */
    color: #bbb;
    /* Texto gris suave */
}

li {
    margin-bottom: 12px;
    /* Separación entre elementos de la lista */
}

/* Estilo para las listas ordenadas (pasos numerados) */
ol li {
    font-weight: 500;
    /* Texto un poco más grueso */
}

/* Estilo del número en las listas numeradas */
ol li::marker {
    color: #4db8ff;
    /* Números en azul */
    font-weight: bold;
    /* Números en negrita */
}

/* Resaltado de texto importante dentro de listas */
li strong {
    color: #fff;
    /* Blanco para destacar */
    border-bottom: 1px solid rgba(77, 184, 255, 0.2);
    /* Línea azul suave debajo */
}

/*========== ASIDE (Bloque de ayuda o advertencia) ==========*/
aside {
    max-width: 1000px;
    /* Ancho igual al main */
    margin: 40px auto;
    /* Centrado con margen superior/inferior */
    padding: 30px;
    /* Relleno interno */
    background: rgba(77, 184, 255, 0.05);
    /* Fondo azulado muy claro */
    border: 2px dashed rgba(77, 184, 255, 0.3);
    /* Borde discontinuo azul */
    border-radius: 20px;
    /* Esquinas redondeadas */
    text-align: center;
    /* Todo el contenido centrado */
}

aside h3 {
    color: #fff;
    /* Título blanco */
    margin-bottom: 10px;
}

/* Botón de enlace dentro del bloque aside */
aside a {
    display: inline-block;
    /* Permite padding y márgenes */
    margin-top: 20px;
    /* Separación superior */
    padding: 12px 30px;
    /* Tamaño del botón */
    background: #4db8ff;
    /* Fondo azul sólido */
    color: #1a1a1a;
    /* Texto oscuro */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 700;
    /* Texto en negrita */
    border-radius: 50px;
    /* Botón ovalado */
    transition: 0.3s;
    /* Animación suave */
}

/* Efecto hover del botón aside */
aside a:hover {
    transform: scale(1.05);
    /* Crece ligeramente */
    box-shadow: 0 0 20px rgba(77, 184, 255, 0.4);
    /* Resplandor azul */
}

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

/*========== ESTILOS PARA LOS ENLACES QUE ABREN MODALES ==========*/
.modal-link {
    color: #4db8ff;
    /* Azul claro */
    text-decoration: none;
    /* Sin subrayado */
    font-weight: 600;
    /* Negrita media */
    background: rgba(77, 184, 255, 0.1);
    /* Fondo azulado suave */
    padding: 2px 6px;
    /* Pequeño relleno */
    border-radius: 4px;
    /* Esquinas ligeramente redondeadas */
    transition: all 0.3s ease;
    /* Animación de hover */
    cursor: pointer;
    /* Mano al apuntar */
    border-bottom: 2px solid #4db8ff;
    /* Línea inferior azul */
}

/* Efecto hover para el enlace modal */
.modal-link:hover {
    color: #ffffff;
    /* Texto blanco */
    background: rgba(77, 184, 255, 0.25);
    /* Fondo más opaco */
    box-shadow: 0 0 10px rgba(77, 184, 255, 0.3);
    /* Brillo azul */
    border-bottom: 2px solid #ffffff;
    /* La línea cambia a blanco */
    text-decoration: none;
}


/*========== ESTILOS PARA LAS VENTANAS MODALES ==========*/

/* Fondo oscuro que cubre toda la pantalla al abrir el modal */
.modal-overlay {
    position: fixed;
    /* Siempre visible sobre la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    /* Todo el ancho */
    height: 100%;
    /* Todo el alto */
    background: rgba(0, 0, 0, 0.85);
    /* Fondo negro semi-transparente */
    backdrop-filter: blur(10px);
    /* Desenfoca la página de atrás */
    display: flex;
    /* Usa flexbox para centrar la caja */
    justify-content: center;
    /* Centrado horizontal */
    align-items: center;
    /* Centrado vertical */
    z-index: 2000;
    /* Por encima de todo lo demás */

    /* Estado inicial: Invisible y no interactuable */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    /* Transición suave de aparición */
}

/* Se activa cuando el ID del modal es referenciado en la URL (al hacer clic) */
.modal-overlay:target {
    opacity: 1;
    /* Se vuelve visible */
    visibility: visible;
    /* Se vuelve interactuable */
}

/* Caja de mensaje del modal */
.modal-box {
    background: #2d2d2d;
    /* Fondo gris oscuro */
    padding: 35px;
    /* Espacio interno */
    border-radius: 20px;
    /* Esquinas redondeadas */
    max-width: 500px;
    /* Ancho máximo */
    width: 90%;
    /* Ancho adaptable para móviles */
    position: relative;
    /* Para posicionar la 'X' de cierre */
    border: 1px solid rgba(77, 184, 255, 0.4);
    /* Borde azul brillante */
    box-shadow: 0 0 30px rgba(77, 184, 255, 0.2);
    /* Resplandor azul suave */
    transform: scale(0.8);
    /* Tamaño inicial para la animación de 'zoom' */
    transition: transform 0.3s ease;
    /* Animación de escalado */
}

/* Al abrirse, la caja sube a su tamaño normal */
.modal-overlay:target .modal-box {
    transform: scale(1);
}

/* Título dentro del cuadro modal */
.modal-box h3 {
    margin-top: 0;
    color: #4db8ff;
    /* Azul */
    font-size: 1.6em;
}

/* Texto dentro del cuadro modal */
.modal-box p {
    color: #e0e0e0;
    /* Blanco grisáceo */
    font-size: 1.1em;
    margin-top: 15px;
}

/* Botón para cerrar el modal (la X superior derecha) */
.modal-close {
    position: absolute;
    /* Esquina fija */
    top: 15px;
    right: 25px;
    font-size: 32px;
    /* Grande para pulsar fácil */
    color: #ffffff;
    /* Blanca */
    text-decoration: none;
    /* Sin subrayado */
    line-height: 1;
    transition: 0.3s;
    /* Animación de color */
}

/* La X se vuelve azul al pasar el ratón */
.modal-close:hover {
    color: #4db8ff;
}

/* Estilo para las imágenes que están dentro de un modal */
.img-modal {
    padding: 20px;
    /* Espacio interno */
    display: inline-block;
    /* Permite escalado */
    width: 100%;
    /* Ocupa el ancho del modal */
    height: 100%;
    cursor: pointer;
    /* Mano al apuntar */
    transition: transform 0.3s ease;
    /* Animación de zoom */
}

/* Zoom gigante al pasar el mouse por la imagen del modal (doble de tamaño) */
.img-modal:hover {
    background-color: none;
    /* Sin fondo */
    background: none;
    transform: scale(2.0);
    /* Aumenta al doble */
}