/* ==========================================================================
   ESTILOS MODERNIZADOS – Demonium v2.0
   Diseño actualizado alineado con el nuevo logo tech minimalista
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES CSS PERSONALIZADAS
   Paleta moderna con azules profundos y cyan para reflejar la identidad tech
   -------------------------------------------------------------------------- */
:root {
    /* Paleta de colores seria y oscura */
    --c-bg:       #000000;  /* Negro puro */
    --c-surface:  #1a1a1a;  /* Gris muy oscuro */
    --c-secondary: #0a0a0a; /* Negro casi puro */
    --c-muted:    #b0b0b0;  /* Gris medio para texto */
    --c-border:   #3a3a3a;  /* Bordes oscuros */
    --c-header:   #ffffff;  /* Blanco puro para títulos */
    --c-subtitle: #d0d0d0;  /* Gris claro para subtítulos */
    --c-contact:  #b0b0b0;  /* Gris para contacto */
    --c-aqua-subtle: #5eb3c9; /* Azul agua sutil para títulos */
    --c-title:    #CDFF00;  /* Amarillo limón para H1 */
    --c-card-border-hover: #505050; /* Borde en hover de tarjetas */
    --c-card-bg-hover: #252525; /* Fondo en hover de tarjetas */
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4); /* Sombra en hover de tarjetas */

    /* Configuración de tipografía */
    --f-base:     'Inter', Arial, sans-serif;  /* Fuente profesional */
    --fs-base:    1rem;      /* Tamaño de fuente base (16px) */
    --lh-base:    1.6;       /* Altura de línea para legibilidad */
    --fw-medium:  500;       /* Peso de fuente medio */
    --fw-bold:    700;       /* Peso de fuente negrita */

    /* Sistema de espaciado consistente */
    --gap-md:     1rem;      /* Espaciado medio (16px) */
    --gap-lg:     2rem;      /* Espaciado grande (32px) */

    /* Propiedades de interfaz y efectos visuales */
    --radius:     16px;      /* Radio de bordes redondeados */
    --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.25);   /* Sombra sutil */
    --shadow-md:  0 8px 20px rgba(0, 0, 0, 0.5);   /* Sombra pronunciada */
    --transition: .3s cubic-bezier(0.25, 0.8, 0.25, 1);  /* Curva de animación suave */
}

/* --------------------------------------------------------------------------
   2. RESET Y ESTILOS BASE
   Normaliza el comportamiento de todos los elementos y establece
   configuración básica del documento
   -------------------------------------------------------------------------- */

/* Aplica box-sizing border-box a todos los elementos para incluir 
   padding y border en el ancho/alto total */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Configuración del elemento raíz HTML */
html {
    font-size: 16px;           /* Define 1rem = 16px */
    scroll-behavior: smooth;   /* Animación suave al hacer scroll a anclas */

    /* CRUCIAL: Añade padding superior al hacer scroll para compensar
       el header flotante fijo, evitando que los títulos queden ocultos */
    scroll-padding-top: 200px;
}

/* Estilos del body principal */
body {
    display: flex;              /* Usa flexbox para layout vertical */
    flex-direction: column;     /* Apila elementos verticalmente */
    min-height: 100vh;          /* Asegura que ocupe mínimo toda la ventana */
    font-family: var(--f-base); /* Aplica fuente base definida */
    font-size: var(--fs-base);  /* Aplica tamaño de fuente base */
    line-height: var(--lh-base); /* Aplica altura de línea para legibilidad */
    color: var(--c-muted);      /* Color de texto por defecto */
    background: var(--c-bg);    /* Fondo negro puro */
}

/* --------------------------------------------------------------------------
   3. CONTENEDOR PRINCIPAL
   Define el área de contenido principal con márgenes y padding apropiados
   -------------------------------------------------------------------------- */
.container {
    flex: 1;                    /* Crece para ocupar espacio disponible */
    width: 100%;                /* Ancho completo del viewport */
    max-width: 960px;           /* Límite máximo de ancho para legibilidad */
    margin: auto;               /* Centra horizontalmente */
    padding: var(--gap-md);     /* Padding interno estándar */

    /* Padding superior: espacio reservado para el header flotante fijo */
    padding-top: 250px;
}

/* --------------------------------------------------------------------------
   4. HEADER FLOTANTE
   Cabecera fija en la parte superior con efecto de vidrio (glassmorphism)
   y sombra para crear sensación de elevación
   -------------------------------------------------------------------------- */
header {
    position: fixed;            /* Se mantiene fijo al hacer scroll */
    top: 1rem;                  /* Separación del borde superior */
    left: 50%;                  /* Posiciona desde el centro */
    transform: translateX(-50%); /* Centra perfectamente usando transform */
    z-index: 1000;              /* Asegura que esté por encima de todo */

    width: 95%;                 /* Ancho relativo al viewport */
    max-width: 960px;           /* Límite máximo igual al container */

    padding: 1rem var(--gap-md); /* Padding interno reducido */
    background: rgba(44, 62, 80, 0.90); /* Fondo serio oscuro */
    backdrop-filter: blur(12px); /* Efecto de desenfoque del fondo (glassmorphism) */
    border: 1px solid var(--c-border); /* Borde oscuro sutil */
    border-radius: var(--radius); /* Bordes redondeados */
    box-shadow: var(--shadow-md); /* Sombra pronunciada para profundidad */

    text-align: center;          /* Centra el texto */
    color: var(--c-subtitle);    /* Color de texto */

    /* Transición suave para cambios dinámicos */
    transition: all var(--transition);
}

/* Contenedor de marca (logo + título) */
.brand {
    display: flex;              /* Usa flexbox para alinear elementos */
    flex-direction: column;     /* Apila verticalmente */
    align-items: center;        /* Alinea verticalmente al centro */
    justify-content: center;    /* Centra horizontalmente */
    gap: 0.5rem;                /* Espacio reducido entre logo y texto */
}

/* Contenedor del círculo blanco para el logo */
.logo-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;               /* Círculo de 110px */
    height: 110px;              /* Círculo de 110px */
    background: var(--c-header); /* Fondo blanco */
    border-radius: 50%;          /* Hace que sea un círculo perfecto */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra sutil */
    animation: float 3s ease-in-out infinite; /* Animación de flotación */
}

/* Estilos del logo del sitio */
.site-logo {
    width: 80px;                /* Logo dentro del círculo */
    height: 80px;               /* Logo dentro del círculo */
    object-fit: contain;        /* Mantiene proporción sin recortar */
}

/* Título principal H1 dentro del brand */
.brand h1 {
    font-size: 2rem;            /* Tamaño aumentado */
    font-weight: var(--fw-bold); /* Peso negrita */
    color: var(--c-title);      /* Amarillo limón */
    margin: 0;                  /* Sin margen adicional */
}

/* Subtítulo/descripción del header */
header p {
    margin-top: 0.5rem;         /* Separación del título */
    font-size: 0.95rem;         /* Tamaño medio */
    font-weight: var(--fw-medium); /* Peso medio */
    opacity: 0.85;              /* Ligeramente transparente */
    letter-spacing: 0.02em;     /* Espaciado entre letras para elegancia */
    color: var(--c-muted);      /* Color gris */
}

/* --------------------------------------------------------------------------
   5. SECCIONES Y TARJETAS DE CONTENIDO
   Estructura para organizar el contenido en bloques visuales
   -------------------------------------------------------------------------- */

/* Contenedor de sección general */
.section {
    margin-block: var(--gap-lg); /* Margen vertical entre secciones */
    padding: var(--gap-md);      /* Padding interno */
    background: var(--c-surface); /* Fondo de superficie oscuro */
    border-radius: var(--radius); /* Bordes redondeados */
    box-shadow: var(--shadow-sm); /* Sombra sutil */
}

/* Títulos H2 de cada sección */
.section h2 {
    margin-bottom: 1rem;         /* Espacio debajo del título */
    padding-bottom: 0.5rem;      /* Espacio antes del borde */
    border-bottom: 1px solid var(--c-border); /* Línea divisoria oscura */
    font-size: 1.5rem;           /* Tamaño destacado */
    color: var(--c-aqua-subtle); /* Azul agua sutil */
}

/* Grid para tarjetas de servicios y proyectos */
.skills, .projects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

/* Tarjetas individuales dentro de secciones */
.card {
    padding: var(--gap-md);      /* Padding interno */
    background: var(--c-secondary); /* Fondo negro con muy ligera elevación */
    border: 1px solid var(--c-border); /* Borde oscuro sutil */
    border-radius: var(--radius); /* Bordes redondeados */
    box-shadow: var(--shadow-sm); /* Sombra sutil */
    /* Animaciones al interactuar */
    transition: all var(--transition);
}

/* Efecto hover en tarjetas */
.card:hover {
    border-color: var(--c-card-border-hover); /* Borde más visible en hover */
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
    background: var(--c-card-bg-hover); /* Ligeramente más claro en hover */
}

/* Títulos H3 dentro de las tarjetas */
.card h3 {
    margin-bottom: 0.5rem;       /* Espacio debajo del título */
    font-size: 1rem;             /* Tamaño estándar */
    color: var(--c-aqua-subtle); /* Azul agua sutil */
}

/* Sección específica de contacto */
#contacto {
    text-align: center;          /* Centra todo el contenido */
    color: var(--c-contact);     /* Color de texto específico */
}

/* Título de la sección contacto */
#contacto h3 {
    margin-bottom: 1rem;         /* Espacio debajo */
    font-size: 1.2rem;           /* Tamaño ligeramente mayor */
    color: var(--c-aqua-subtle); /* Azul agua sutil */
}

/* Contenedor de iconos de contacto */
.contact-icons {
    display: flex;               /* Flexbox para alinear iconos */
    justify-content: center;     /* Centra horizontalmente */
    gap: 2rem;                   /* Espacio generoso entre iconos */
    margin-top: 1rem;            /* Separación superior */
}

/* Enlaces de iconos de contacto */
.contact-icons a {
    /* Transiciones suaves para hover */
    transition: transform var(--transition), opacity var(--transition);
    opacity: 0.85;               /* Ligeramente transparente por defecto */
}

/* Efecto hover en enlaces de iconos */
.contact-icons a:hover {
    transform: scale(1.15);      /* Agranda ligeramente */
    opacity: 1;                  /* Opacidad completa */
}

/* Contenedor especial para Signal */
.signal-contact {
    display: flex;               /* Flexbox para centrar */
    justify-content: center;     /* Centra horizontalmente */
    margin-top: 2.5rem;          /* Espacio superior moderado */
}

/* Imagen de QR de Signal */
.signal-contact img {
    width: 200px;                /* QR de Signal ampliado */
    height: 200px;               /* QR de Signal ampliado */
    border-radius: 10px;         /* Bordes redondeados */
    opacity: 0.85;               /* Ligeramente transparente por defecto */
    transition: transform var(--transition), opacity var(--transition); /* Animación suave */
    cursor: pointer;             /* Muestra que es interactiva */
}

/* Efecto hover en imagen de Signal */
.signal-contact img:hover {
    transform: scale(1.15);      /* Agranda ligeramente */
    opacity: 1;                  /* Opacidad completa */
}

/* Estilos para los iconos de contacto (Mail, GitLab, Mastodon) */
.contact-icon-item {
    position: relative;          /* Para posicionar el span de forma absoluta */
    text-decoration: none;       /* Sin subrayado */
}

/* Etiquetas de texto en los iconos de contacto */
.contact-icon-item span {
    position: absolute;          /* Posicionamiento absoluto */
    top: 100%;                   /* Justo debajo del icono */
    left: 50%;                   /* Centra horizontalmente */
    transform: translateX(-50%); /* Centra el texto */
    margin-top: 0.3rem;          /* Pequeño espacio entre icono y texto */
    font-size: 0.75rem;          /* Tamaño pequeño */
    font-weight: var(--fw-medium); /* Peso medio */
    white-space: nowrap;         /* Evita que se divida en múltiples líneas */
    color: var(--c-subtitle);    /* Color del texto */
    opacity: 0;                  /* Oculto por defecto */
    transition: opacity var(--transition); /* Transición suave */
}

/* Mostrar el texto en hover */
.contact-icon-item:hover span {
    opacity: 1;                  /* Mostrar el texto en hover */
}

/* --------------------------------------------------------------------------
   6. FOOTER
   Pie de página con el mismo estilo que el header
   -------------------------------------------------------------------------- */
footer {
    position: relative;          /* Forma parte del flujo normal del documento */
    width: 95%;                  /* Ancho relativo al viewport */
    max-width: 960px;            /* Límite máximo igual al container */
    margin: 2rem auto;           /* Centra horizontalmente */

    padding: 1rem var(--gap-md); /* Padding compacto igual al header */
    background: rgba(44, 62, 80, 0.90); /* Fondo serio oscuro como el header */
    backdrop-filter: blur(12px); /* Efecto glassmorphism como el header */
    border: 1px solid var(--c-border); /* Borde oscuro sutil */
    border-radius: var(--radius); /* Bordes redondeados */
    box-shadow: var(--shadow-md); /* Sombra pronunciada */

    color: var(--c-subtitle);    /* Color de texto */
    text-align: center;          /* Centra el texto */
    font-size: 0.9rem;           /* Tamaño ligeramente menor */
}

/* --------------------------------------------------------------------------
   7. ANIMACIONES
   Efectos visuales para mejorar la experiencia del usuario
   -------------------------------------------------------------------------- */

/* Animación de flotación sutil para el logo */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* --------------------------------------------------------------------------
   8. DISEÑO RESPONSIVO
   Ajustes específicos para dispositivos móviles y pantallas pequeñas
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Aumenta scroll padding para mejor separación visual */
    html {
        scroll-padding-top: 150px;
    }

    /* Reduce ancho de header y footer en móviles */
    header, footer {
        width: 92%;              /* Ancho menor para mejor visualización */
        padding: 1rem var(--gap-md); /* Padding compacto */
    }

    /* Reduce tamaño del logo en móviles */
    .logo-circle {
        width: 90px;             /* Logo más pequeño */
        height: 90px;
    }

    /* Ajusta el logo dentro del círculo */
    .site-logo {
        width: 65px;             /* Logo proporcional */
        height: 65px;
    }

    /* Reduce tamaño del título principal */
    .brand h1 {
        font-size: 1.3rem;       /* Título más pequeño en móvil */
    }

    /* Aumenta gap entre logo y título para separación */
    .brand {
        gap: 0.8rem;             /* Más espaciado vertical */
    }

    /* Muestra el subtítulo con tamaño reducido para mantener contexto */
    header p {
        display: block;
        font-size: 0.75rem;      /* Texto muy pequeño */
        margin-top: 0.3rem;
    }

    /* Aumenta el padding superior del container para mejor separación */
    .container {
        padding-top: 180px;      /* Espacio reducido para móvil */
        padding-bottom: var(--gap-md);
    }

    /* Agrega más espaciado entre secciones en móviles */
    .section {
        margin-block: 1.5rem;    /* Mayor separación entre secciones */
        padding: 1.2rem;
    }
}