/* =========================
   CONFIGURACIÓN BASE
   ========================= */

/* Tamaño base del documento.
   Se usa como referencia para unidades rem en todo el sitio.
   1rem = 16px */
html {
    font-size: 16px;
}

/* Estilos generales del documento */
body {
    min-height: 100vh;
    /* El documento ocupa al menos toda la altura de la ventana */

    margin: 0;
    /* Elimina los márgenes por defecto del navegador */

    background: linear-gradient(to bottom, #2d2658 0%, black 100%);
    /* Fondo con degradado vertical de violeta oscuro a negro */

    background-attachment: fixed;
    /* El fondo permanece fijo al hacer scroll */
}


/* =========================
   ENCABEZADOS
   ========================= */

/* Estilo común para todos los niveles de encabezado */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: white;

    font-family: 'Outfit', sans-serif;
    /* Tipografía utilizada para títulos */

    font-weight: 900;
    /* Peso tipográfico muy grueso */
}

/* Tamaños relativos basados en el tamaño raíz (html) */

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.17em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 0.83em;
}

h6 {
    font-size: 0.67em;
}


/* =========================
   CUERPO DE TEXTO
   ========================= */

/* Estilo principal para párrafos de texto */
p {
    font-family: 'Figtree', sans-serif;
    /* Tipografía de lectura */

    color: white;

    hyphens: auto;
    /* Permite cortes automáticos de palabra */

    text-align: justify;
    /* Texto alineado a ambos lados */

    text-wrap: pretty;
    /* Mejora el equilibrio de líneas (navegadores modernos) */

    font-size: 1em;
}

/* Elementos en línea que heredan el color del contenedor */
span,
a {
    font-family: 'Figtree', sans-serif;
    color: inherit;
}

/* Ajuste de tamaño para subíndice y superíndice */
sub,
sup {
    font-size: 0.75em;
}

/* Texto de tamaño reducido */
small {
    font-size: smaller;
}

/* Texto en negrita */
strong,
b {
    font-weight: bold;
}

/* Texto en cursiva */
em,
i {
    font-style: italic;
}


/* =========================
   ENLACES
   ========================= */

/* Color aplicado a enlaces ya visitados */
a:visited {
    color: #8b8b8b;
}


/* =========================
   MENÚ DE ICONOS
   ========================= */

/* Contenedor general del menú de iconos */
.icons-menu {
    display: flex;
    /* Activa Flexbox */

    flex-direction: row;
    /* Los iconos se organizan en fila */

    width: fit-content;
    /* El ancho se ajusta al contenido */

    margin: auto;
    /* Centra el menú horizontalmente */
}

/* Ajuste de espaciado específico para el segundo icono */
.icons-menu .icons:nth-child(2) {
    padding: 0 1.5em 0 3em;
}

/* Ajuste de espaciado específico para el tercer icono */
.icons-menu .icons:nth-child(3) {
    padding: 0 3em 0 1.5em;
}

/* Imágenes utilizadas como iconos */
.icons img {
    display: flex;
    /* Permite controlar mejor el comportamiento dentro de Flexbox */

    margin-bottom: 1em;
    /* Separación entre el icono y su texto */

    height: 48px;
    width: 48px;
}

/* Enlace que contiene icono + texto */
.icons a {
    display: flex;

    flex-direction: column;
    /* Icono arriba y texto debajo */

    align-items: center;
    text-align: center;

    font-size: 0.6875em;
    font-weight: 900;

    color: white;
    background-color: transparent;

    text-decoration: none;
    /* Elimina el subrayado del enlace */
}

/* Color para enlaces visitados dentro del menú de iconos */
.icons a:visited {
    color: #8b8b8b !important;
}

.icons a:visited span {
    color: #8b8b8b !important;
}


/* =========================
   SOMBRAS
   ========================= */

/* Sombra aplicada a títulos principales y textos del menú */
h1,
.icons a span {
    text-shadow: 0px 2px 0px #000;
}

/* Sombra proyectada para SVG e imágenes */
.logo,
.icons a img {
    filter: drop-shadow(0px 2px 0px #000);
}


/* =========================
   TOOLTIP (MENSAJE EMERGENTE)
   ========================= */

/* Contenedor de cada icono */
.icons {
    position: static;
    display: inline-flex;

    flex-direction: column;
    align-items: center;
}

/* El enlace actúa como referencia para posicionar el tooltip */
.icons a {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
}

/* Pseudo-elemento que genera el tooltip */
.icons a::after {
    content: attr(data-tooltip);
    /* El texto proviene del atributo HTML data-tooltip */

    position: absolute;

    left: 50%;
    top: 100%;

    transform: translateX(-50%);
    /* Centra horizontalmente el tooltip */

    margin-top: 10px;

    background-color: #2d2a44;
    color: #B9B9B9;

    padding: 3px 5px;

    font-family: 'Figtree', sans-serif;
    font-size: 0.6875em;
    font-weight: 400;

    white-space: nowrap;
    /* Evita que el texto del tooltip se divida en varias líneas */

    border: 1px solid black;
    border-radius: 3px;

    opacity: 0;
    visibility: hidden;
    /* El tooltip permanece oculto por defecto */

    pointer-events: none;
    /* No interfiere con el cursor */

    z-index: 10;

    transition: opacity 0.3s ease-in-out,
        visibility 0.3s,
        transform 0.3s;

    transition-delay: 0s;

    display: block;
    width: auto;
    min-width: 10px;
}

/* El tooltip aparece al pasar el cursor sobre el icono */
.icons a:hover::after {
    opacity: 1;
    visibility: visible;

    transform: translateX(-50%);

    transition-delay: 300ms;
    /* Pequeño retraso antes de mostrarse */
}


/* =========================
   ICONOS DESACTIVADOS
   ========================= */

/* Reduce la opacidad para indicar que la sección no está disponible */
.icons-disabled a img,
.icons-disabled a span {
    opacity: 0.5;
    transition: opacity 0.3s;
}

/* Tooltip oculto inicialmente */
.icons-disabled a::after {
    opacity: 0;
}

/* Tooltip visible al pasar el cursor */
.icons-disabled a:hover::after {
    opacity: 1;
}


/* =========================
   FOOTER
   ========================= */

/* Barra inferior fija en la parte inferior de la pantalla */
footer {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100%;

    min-height: 1.8em;
    /* Altura mínima del footer (permite crecer si el contenido lo requiere) */

    z-index: 100;

    padding: 0px 7px;

    display: flex;
    /* Flexbox facilita el centrado vertical */

    align-items: center;
    /* Centra verticalmente el contenido */

    justify-content: center;
    /* Centra horizontalmente el contenido */
}

/* Imagen pequeña del footer (icono de la plataforma) */
.footer-img {
    height: 1em;
}

/* Texto de copyright y bloque de licencia */
.footer-text,
.creative-commons {
    font-size: 0.6875em;
    color: #757575;

    font-family: 'Figtree', sans-serif;

    margin-left: 5px;
    /* Separación respecto al elemento anterior */
}