/* ========== RESETEO GLOBAL ========== */
* {
    margin: 0; /* Elimina márgenes por defecto de los navegadores */
    padding: 0; /* Elimina espacios internos por defecto de los navegadores */
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
}

/* ========== ESTILOS DEL CUERPO ========== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Tipografía moderna y legible */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); /* Fondo con degradado oscuro */
    min-height: 100vh; /* Ocupa al menos la altura de la pantalla */
    color: #e0e0e0; /* Color de texto gris claro */
}

/* ========== ESTILOS DEL TÍTULO PRINCIPAL ========== */
h1 {
    color: #ffffff; /* Color blanco puro para el título */
    text-align: center; /* Centra el texto */
    padding: 40px 20px 20px; /* Espaciado interno arriba, laterales y debajo */
    font-size: 2.5em; /* Tamaño del texto muy grande */
    font-weight: 700; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para profundidad */
    margin-bottom: 10px; /* Espacio debajo del título */
}

/* ========== ESTILOS DE PÁRRAFOS ========== */
p {
    text-align: center; /* Centra el contenido del párrafo */
    color: #b8b8b8; /* Gris medio para buen contraste */
    font-size: 1.1em; /* Tamaño de texto ligeramente aumentado */
    padding: 0 20px 30px; /* Espaciado interno lateral y inferior */
    max-width: 800px; /* Ancho máximo para mejor legibilidad */
    margin: 0 auto; /* Centra el párrafo en la pantalla */
    line-height: 1.6; /* Aumenta el espaciado entre líneas para legibilidad */
}

/* ========== ESTILOS DE NAVEGACIÓN ========== */
.nav-inicio-volver {
    display: inline-block; /* Permite padding y márgenes como bloque */
    color: #e0e0e0; /* Texto gris claro */
    text-align: center; /* Centra el texto dentro del enlace */
    padding: 15px 25px; /* Espaciado interno alrededor del texto */
    text-decoration: none; /* Elimina el subrayado por defecto */
    font-weight: 600; /* Texto semi-negrita */
    font-size: 1em; /* Tamaño de texto estándar */
    border-radius: 8px; /* Esquinas redondeadas */
    transition: all 0.3s ease; /* Animación suave para cambios */
    position: relative; /* Necesario para posicionar elementos internos */
    overflow: hidden; /* Oculta el contenido que sale de los bordes */
    margin-right: auto; /* Empuja el botón a la izquierda */
}

.nav-inicio-volver::before {
    content: ''; /* Crea un elemento invisible */
    position: absolute; /* Lo posiciona de forma absoluta */
    top: 0; /* Alineado en la parte superior */
    left: -100%; /* Inicialmente fuera de la vista a la izquierda */
    width: 100%; /* Ocupa el ancho completo del enlace */
    height: 100%; /* Ocupa la altura completa del enlace */
    background: rgba(255, 255, 255, 0.15); /* Fondo blanco semi-transparente */
    transition: left 0.3s ease; /* Animación suave del movimiento */
    z-index: -1; /* Se coloca detrás del texto */
}

.nav-inicio-volver:hover {
    background: rgba(255, 255, 255, 0.1); /* Fondo más claro al pasar el mouse */
    color: #ffffff; /* Texto se vuelve completamente blanco */
    transform: translateY(-2px); /* Levanta el elemento 2px hacia arriba */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada al pasar */
}

.nav-inicio-volver:hover::before {
    left: 0; /* Desplaza el fondo desde la izquierda hacia la vista */
}

nav {
    background: rgba(45, 45, 45, 0.95); /* Fondo gris oscuro semi-transparente */
    backdrop-filter: blur(10px); /* Efecto de cristal difuminado detrás */
    padding: 0; /* Sin espaciado interno */
    display: flex; /* Usa flexbox para alineación flexible */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 10px; /* Espacio entre los elementos de navegación */
    flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Sombra para profundidad */
    border-bottom: 2px solid #404040; /* Línea divisoria oscura en la parte inferior */
    margin-bottom: 30px; /* Espacio debajo de la navegación */
}

/* ========== ESTILOS DE ENLACES DE NAVEGACIÓN ========== */
nav a {
    display: inline-block; /* Permite padding y márgenes como bloque */
    color: #e0e0e0; /* Texto gris claro */
    text-align: center; /* Centra el texto dentro del enlace */
    padding: 15px 25px; /* Espaciado interno alrededor del texto */
    text-decoration: none; /* Elimina el subrayado por defecto */
    font-weight: 600; /* Texto semi-negrita */
    font-size: 1em; /* Tamaño de texto estándar */
    border-radius: 8px; /* Esquinas redondeadas */
    transition: all 0.3s ease; /* Animación suave para cambios */
    position: relative; /* Necesario para posicionar elementos internos */
    overflow: hidden; /* Oculta el contenido que sale de los bordes */
}

/* ========== EFECTO DE FONDO PARA HOVER EN ENLACES ========== */
nav a::before {
    content: ''; /* Crea un elemento invisible */
    position: absolute; /* Lo posiciona de forma absoluta */
    top: 0; /* Alineado en la parte superior */
    left: -100%; /* Inicialmente fuera de la vista a la izquierda */
    width: 100%; /* Ocupa el ancho completo del enlace */
    height: 100%; /* Ocupa la altura completa del enlace */
    background: rgba(255, 255, 255, 0.15); /* Fondo blanco semi-transparente */
    transition: left 0.3s ease; /* Animación suave del movimiento */
    z-index: -1; /* Se coloca detrás del texto */
}

/* ========== EFECTO AL PASAR EL MOUSE SOBRE ENLACES ========== */
nav a:hover {
    background: rgba(255, 255, 255, 0.1); /* Fondo más claro al pasar el mouse */
    color: #ffffff; /* Texto se vuelve completamente blanco */
    transform: translateY(-2px); /* Levanta el elemento 2px hacia arriba */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); /* Sombra más pronunciada al pasar */
}

/* ========== ANIMACIÓN DE FONDO AL HOVER ========== */
nav a:hover::before {
    left: 0; /* Desplaza el fondo desde la izquierda hacia la vista */
}

/* ========== ESTILOS DE TÍTULOS H2 ========== */
h2 {
    color: #ffffff; /* Color blanco puro */
    font-size: 2em; /* Tamaño grande */
    font-weight: 700; /* Texto en negrita */
    margin: 30px 0 20px 0; /* Espaciado arriba y debajo */
    padding: 0 20px; /* Espaciado interno lateral */
    border-left: 5px solid #505050; /* Línea decorativa a la izquierda */
    padding-left: 15px; /* Espaciado extra después de la línea */
}

/* ========== ESTILOS DE TÍTULOS H3 ========== */
h3 {
    color: #d0d0d0; /* Gris claro */
    font-size: 1.4em; /* Tamaño mediano */
    font-weight: 600; /* Texto semi-negrita */
    margin: 25px 0 15px 0; /* Espaciado arriba y debajo */
    padding: 0 20px; /* Espaciado interno lateral */
}

/* ========== ESTILOS DE ARTÍCULOS ========== */
article {
    background: rgba(45, 45, 45, 0.6); /* Fondo gris oscuro semi-transparente */
    margin: 20px auto; /* Espaciado superior e inferior */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Esquinas redondeadas */
    max-width: 900px; /* Ancho máximo para legibilidad */
    border-left: 4px solid #505050; /* Línea decorativa a la izquierda */
}

/* ========== ESTILOS DE LISTAS NO ORDENADAS ========== */
ul {
    color: #b8b8b8; /* Gris medio */
    margin: 15px auto; /* Espaciado */
    padding-left: 40px; /* Indentación para los puntos */
    max-width: 900px; /* Ancho máximo */
}

/* ========== ESTILOS DE LISTAS ORDENADAS ========== */
ol {
    color: #b8b8b8; /* Gris medio */
    margin: 15px auto; /* Espaciado */
    padding-left: 40px; /* Indentación para los números */
    max-width: 900px; /* Ancho máximo */
}

/* ========== ESTILOS DE ELEMENTOS DE LISTA ========== */
li {
    margin: 10px 0; /* Espaciado entre elementos */
    line-height: 1.6; /* Espaciado entre líneas */
}

/* ========== ESTILOS DE TABLAS ========== */
table {
    width: 100%; /* Ocupa el ancho completo */
    max-width: 900px; /* Ancho máximo */
    margin: 20px auto; /* Centrada con espaciado */
    border-collapse: collapse; /* Elimina espacios entre bordes */
    background: rgba(45, 45, 45, 0.8); /* Fondo gris oscuro */
    border-radius: 8px; /* Esquinas redondeadas */
    overflow: hidden; /* Oculta contenido que sale de los bordes */
}

/* ========== ESTILOS DE ENCABEZADOS DE TABLA ========== */
thead {
    background: rgba(60, 60, 60, 0.95); /* Fondo más oscuro para encabezados */
}

/* ========== ESTILOS DE CELDAS DE TABLA ========== */
table th,
table td {
    color: #e0e0e0; /* Texto gris claro */
    padding: 12px; /* Espaciado interno */
    text-align: left; /* Alineación a la izquierda */
    border-bottom: 1px solid #404040; /* Línea divisoria subtil */
}

/* ========== ESTILOS DE CELDAS DE ENCABEZADO ========== */
table th {
    font-weight: 600; /* Texto semi-negrita */
    color: #ffffff; /* Texto blanco */
}

/* ========== ESTILOS DE CUERPO DE TABLA ========== */
tbody tr:hover {
    background: rgba(70, 70, 70, 0.6); /* Fondo más claro al pasar */
    transition: background 0.3s ease; /* Animación suave */
}

/* ========== ESTILOS DE SEPARADORES ========== */
hr.separador {
    border: none; /* Elimina borde por defecto */
    height: 2px; /* Altura de la línea */
    background: linear-gradient(90deg, transparent, #505050, transparent); /* Gradiente de gris */
    margin: 40px 0; /* Espaciado arriba y abajo */
    max-width: 900px; /* Ancho máximo */
    margin-left: auto; /* Centra */
    margin-right: auto; /* Centra */
}

/* ========== ESTILOS DE CHECKBOXES ========== */
input[type="checkbox"] {
    margin-right: 10px; /* Espaciado a la derecha del checkbox */
    margin-bottom: 10px; /* Espaciado inferior */
    cursor: pointer; /* Cambia cursor al pasar */
    accent-color: #505050; /* Color del checkbox */
}

/* ========== ESTILOS DE MAIN ========== */
main {
    max-width: 1000px; /* Ancho máximo para legibilidad */
    margin: 0 auto; /* Centra el contenido */
    padding: 20px; /* Espaciado interno */
}

/* ========== ESTILOS DE ENLACES TÉCNICOS (TÉRMINOS) ========== */
.tech-link {
    color: #4db8ff; /* Azul claro para destacar */
    text-decoration: none; /* Sin subrayado por defecto */
    font-weight: 600; /* Semi-negrita */
    background: rgba(77, 184, 255, 0.1); /* Fondo azul semi-transparente */
    padding: 2px 6px; /* Espaciado interno pequeño */
    border-radius: 4px; /* Esquinas ligeramente redondeadas */
    transition: all 0.3s ease; /* Animación suave */
    cursor: pointer; /* Cambia cursor al pasar */
    border-bottom: 2px solid #4db8ff; /* Línea punteada inferior */
}

/* ========== EFECTO AL PASAR SOBRE ENLACES TÉCNICOS ========== */
.tech-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); /* Resplandor azul */
    border-bottom: 2px solid #ffffff; /* Línea blanca */
    text-decoration: none; /* Mantiene sin subrayado */
    transform: translateY(-1px); /* Levanta ligeramente */
}

/* ========== ESTILOS DE BOTONES DE IMAGEN ========== */
.boton-imagen {
    display: inline-block; /* Permite padding y márgenes como bloque */
    background: linear-gradient(135deg, #4db8ff, #2a9fd6); /* Gradiente azul */
    color: #ffffff; /* Texto blanco */
    padding: 12px 20px; /* Espaciado interno */
    margin-top: 15px; /* Espaciado superior */
    text-decoration: none; /* Sin subrayado */
    border-radius: 8px; /* Esquinas redondeadas */
    font-weight: 600; /* Texto semi-negrita */
    transition: all 0.3s ease; /* Animación suave */
    cursor: pointer; /* Cambia cursor */
    box-shadow: 0 4px 12px rgba(77, 184, 255, 0.3); /* Sombra azul */
    border: 2px solid #4db8ff; /* Borde azul */
}

/* ========== EFECTO AL PASAR SOBRE BOTONES DE IMAGEN ========== */
.boton-imagen:hover {
    background: linear-gradient(135deg, #2a9fd6, #1f75a8); /* Gradiente más oscuro */
    color: #ffffff; /* Mantiene blanco */
    transform: translateY(-3px); /* Levanta más */
    box-shadow: 0 8px 20px rgba(77, 184, 255, 0.5); /* Sombra más grande */
    border-color: #ffffff; /* Borde blanco */
}

/* ========== ESTILOS DE GALERÍA DE IMÁGENES ========== */
.galeria-contenedor {
    background: rgba(45, 45, 45, 0.8); /* Fondo gris oscuro */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Esquinas redondeadas */
    display: flex; /* Flexbox para layout */
    flex-direction: column; /* Dirección vertical */
    align-items: center; /* Centra horizontalmente */
    text-align: center; /* Centra el texto */
}

/* ========== ESTILOS DE IMAGEN EN GALERÍA ========== */
.galeria-imagen {
    width: 100%; /* Ancho completo */
    max-width: 600px; /* Ancho máximo */
}

.galeria-imagen img {
    width: 100%; /* Ancho completo de la imagen */
    height: auto; /* Altura automática */
    border-radius: 8px; /* Esquinas redondeadas */
    border: 2px solid #4db8ff; /* Borde azul */
    box-shadow: 0 4px 15px rgba(77, 184, 255, 0.2); /* Sombra azul */
    transition: all 0.3s ease; /* Animación suave */
}

/* ========== EFECTO AL PASAR SOBRE IMAGEN ========== */
.galeria-imagen img:hover {
    transform: scale(1.05); /* Agranda ligeramente */
    box-shadow: 0 6px 25px rgba(77, 184, 255, 0.4); /* Sombra más intensa */
}