/* ======================================================
   1 VARIABLES GLOBALES
====================================================== */
:root {
    /* Colores principales */
    --color-primary: #00c3ff;        /* Define el color cyan principal para branding */
    --color-primary-dark: #008ecf;   /* Versión oscura para estados hover */
    --color-accent: #1e90ff;         /* Azul brillante para destacar elementos */

    /* Fondos */
    --color-bg-main: #0d1117;        /* Color casi negro para el fondo general */
    --color-bg-alt: #161b22;         /* Gris oscuro para alternar fondos de sección */
    --color-surface: #1f2630;        /* Color para superficies de tarjetas o menús */

    /* Textos */
    --color-text: #e6edf3;           /* Blanco azulado para máxima legibilidad */
    --color-text-muted: #9da7b3;     /* Gris para descripciones menos importantes */
    --color-text-soft: #c9d1d9;      /* Gris claro para párrafos generales */
    --color-white: #ffffff;          /* Blanco puro */

    /* Tipografía */
    --font-main: 'Segoe UI', sans-serif; /* Fuente del sistema moderna y limpia */

    /* Espaciado */
    --spacing-section: 100px;        /* Distancia vertical estándar entre bloques */

    /* Sombras */
    --shadow-soft: 0 15px 40px rgba(0,0,0,0.35);  /* Sombra suave para elevación */
    --shadow-hover: 0 20px 50px rgba(0,0,0,0.55); /* Sombra intensa para interacción */

    /* Transiciones */
    --transition: 0.3s ease;         /* Suavizado de 0.3s para cambios de color o tamaño */
}

/* ======================================================
   2 RESET + BASE
====================================================== */
* {
    margin: 0;                       /* Elimina el margen externo por defecto */
    padding: 0;                      /* Elimina el relleno interno por defecto */
    box-sizing: border-box;          /* Incluye padding y border en el ancho total */
}

html {
    scroll-behavior: smooth;         /* Animación suave al navegar por anclas (#) */
}

body {
    font-family: var(--font-main);   /* Aplica la fuente definida en variables */
    background: var(--color-bg-main);/* Aplica el color de fondo principal */
    color: var(--color-text);        /* Aplica el color de texto principal */
    line-height: 1.6;                /* Espaciado entre líneas de texto */
    overflow-x: hidden;              /* Corta cualquier contenido que sobresalga lateralmente */
}

/* ======================================================
   3 CONTENEDOR GLOBAL
====================================================== */
.container {
    width: 100%;                     /* Ocupa todo el ancho en móviles */
    max-width: 1200px;               /* Limita el ancho máximo en pantallas grandes */
    margin: 0 auto;                  /* Centra el bloque horizontalmente */
    padding: 0 20px;                 /* Margen interno para que el texto no toque bordes */
}

/* ======================================================
   4 HEADER & NAV
====================================================== */

.header {
    background: linear-gradient(to right, #0d1117, #111827); /* Degradado oscuro */
    position: fixed;                 /* Se queda fijo en la parte superior */
    width: 100%;                     /* Cubre todo el ancho horizontal */
    top: 0;                          /* Se alinea al inicio de la pantalla */
    z-index: 1000;                   /* Prioridad de capa para estar siempre arriba */
    backdrop-filter: blur(8px);      /* Desenfoca el contenido que pase por detrás */
}

.nav-container {
    display: flex;                   /* Activa el modelo de caja flexible */
    justify-content: space-between;  /* Separa logo y menú a los extremos */
    align-items: center;             /* Centra los elementos verticalmente */
    padding: 20px 0;                 /* Relleno arriba y abajo */
}

.logo {
    padding: 6px 12px;               /* Espacio interno del logo */
    border-radius: 12px;             /* Bordes redondeados */
    background: rgba(255, 255, 255, 0.925); /* Fondo blanco semitransparente */
}

.logo img {
    height: 55px;                    /* Altura fija de la imagen del logo */
    width: auto;                     /* Mantiene la proporción de la imagen */
    display: block;                  /* Elimina espacios extra debajo de la imagen */
}

.nav ul {
    display: flex;                   /* Pone los elementos de la lista en fila */
    list-style: none;                /* Quita los puntos/balas de la lista */
}

.nav ul li {
    margin-left: 30px;               /* Separa cada enlace del menú */
}

.nav ul li a {
    color: var(--color-white);       /* Color de los enlaces */
    text-decoration: none;           /* Quita el subrayado */
    transition: var(--transition);   /* Suaviza el cambio de color al pasar el mouse */
}

.nav ul li a:hover {
    color: var(--color-primary);     /* Cambia a cyan al posicionar el cursor */
}

/* Menu Hamburguesa */
#menu-toggle {
    display: none;                   /* Oculta el checkbox de control */
}

.menu-icon {
    display: none;                   /* Oculto en escritorio */
    flex-direction: column;          /* Alinea las líneas una sobre otra */
    cursor: pointer;                 /* Cambia el cursor a mano */
}

.menu-icon span {
    height: 3px;                     /* Grosor de las líneas del menú */
    width: 28px;                     /* Ancho de las líneas */
    background: var(--color-white);  /* Color blanco para las líneas */
    margin: 4px 0;                   /* Separación entre líneas */
}
/* ======================================================
   5 HERO / PERFIL
====================================================== */
.hero {
    padding: 140px 0 100px;          /* Espacio superior para compensar el header */
    overflow: hidden;                /* Oculta decoraciones que salgan del área */
}

.hero-content {
    display: flex;                   /* Alinea texto e imagen en fila */
    align-items: center;             /* Centra verticalmente ambos bloques */
    justify-content: space-between;  /* Deja espacio entre texto e imagen */
    gap: 40px;                       /* Separación mínima obligatoria */
}

.hero-text {
    flex: 1;                         /* Permite que el texto crezca equitativamente */
}

.hero-text h1 {
    font-size: clamp(2rem, 3vw, 3rem); /* Tamaño dinámico según la pantalla */
    font-weight: 600;                /* Grosor de fuente semi-negrita */
    letter-spacing: -0.5px;          /* Junta un poco las letras */
}

.hero-text p {
    color: var(--color-text-muted);  /* Color gris suave para el párrafo */
    margin: 20px 0;                  /* Espacio arriba y abajo */
}

.hero-image {
    flex: 1;                         /* Ocupa el mismo espacio que el texto */
    display: flex;                   /* Flex para centrar la imagen interna */
    justify-content: center;         /* Centrado horizontal */
}

.hero-image img {
    width: clamp(180px, 20vw, 260px);/* Ancho responsive para la foto */
    max-width: 100%;                 /* No permite que exceda su contenedor */
    height: auto;                    /* Mantiene la proporción */
    clip-path: polygon(              /* Crea una forma geométrica personalizada */
        10% 15%, 85% 8%, 95% 40%,
        90% 85%, 60% 95%, 18% 88%, 5% 55%
    );
    box-shadow: var(--shadow-soft);  /* Aplica sombra definida arriba */
    transition: transform 0.4s ease; /* Suaviza el efecto de zoom */
}

.hero-image img:hover {
    transform: scale(1.05);          /* Agranda la imagen un 5% al pasar el mouse */
}

/* ======================================================
   6 BOTONES
====================================================== */
.btn {
    display: inline-block;           /* Permite márgenes y rellenos en enlaces */
    padding: 12px 30px;              /* Tamaño del botón */
    background: var(--color-primary);/* Fondo cyan */
    color: var(--color-white);       /* Texto blanco */
    text-decoration: none;           /* Sin subrayado */
    border-radius: 30px;             /* Botón tipo píldora */
    transition: var(--transition);   /* Suaviza cambio de fondo */
}

.btn:hover {
    background: var(--color-primary-dark); /* Oscurece el botón al interactuar */
}
/* ======================================================
   7 SECCIONES GENERALES
====================================================== */
.section {
    padding: var(--spacing-section) 0;/* Relleno vertical usando la variable */
    text-align: center;              /* Centra textos por defecto en la sección */
}

.section h2 {
    font-size: clamp(1.8rem, 2vw, 2.4rem); /* Título responsive */
    font-weight: 600;                /* Grosor intermedio */
    letter-spacing: -0.5px;          /* Ajuste de letras */
    margin-bottom: 20px;             /* Espacio bajo el título */
}

.section p {
    max-width: 720px;                /* Limita el ancho del párrafo para lectura cómoda */
    margin: 0 auto;                  /* Centra el párrafo */
    color: var(--color-text-muted);  /* Color tenue */
}

.alt {
    background: var(--color-bg-alt); /* Color de fondo alternativo para contraste */
}

/* ======================================================
   8 ABOUT
====================================================== */
.about-section {
    position: relative;              /* Referencia para elementos internos */
    padding: 120px 10%;              /* Relleno amplio lateral */
    background: url("../assets/img/2.webp") center/cover no-repeat; /* Imagen de fondo */
    display: flex;                   /* Flexbox para alinear contenido */
    align-items: center;             /* Centrado vertical */
    justify-content: center;         /* Centrado horizontal */
    text-align: center;              /* Texto al centro */
}

.about-content {
    position: relative;              /* Asegura posicionamiento sobre el fondo */
    z-index: 2;                      /* Coloca el texto por encima de capas decorativas */
    max-width: 800px;                /* Controla el ancho del texto */
}

.about-content h2 {
    font-size: 2.8rem;               /* Título grande */
    margin-bottom: 20px;             /* Separación inferior */
    color: var(--color-accent);      /* Resalta con azul brillante */
    font-weight: 600;                /* Semi-negrita */
}

.about-content p {
    font-size: 1.1rem;               /* Texto ligeramente más grande */
    line-height: 1.8;                /* Mayor espacio entre líneas para leer mejor */
    color: var(--color-text-soft);   /* Color gris claro */
}

/* ======================================================
   9 SERVICIOS
====================================================== */
#servicios {
    position: relative;              /* Posicionamiento relativo para el pseudo-elemento */
    padding: var(--spacing-section) 0;/* Espacio vertical */
    background: url("img/services-bg.jpg") center/cover no-repeat; /* Fondo de sección */
    color: var(--color-white);       /* Fuerza texto blanco */
}

#servicios::before {
    content: "";                     /* Obligatorio para generar el elemento */
    position: absolute;              /* Se posiciona sobre el fondo */
    inset: 0;                        /* Cubre arriba, abajo, izq y der (0px) */
    background: linear-gradient(     /* Capa oscura para dar contraste al texto */
        rgba(13,17,23,0.85),
        rgba(13,17,23,0.95)
    );
}

#servicios .container {
    position: relative;              /* Sube el contenedor sobre el gradiente anterior */
    z-index: 2;                      /* Nivel de capa superior */
}

.service-card {
    background: rgba(255,255,255,0.03); /* Fondo blanco casi imperceptible */
    backdrop-filter: blur(6px);      /* Vidrio esmerilado */
    border: 1px solid rgba(255,255,255,0.05); /* Borde muy sutil */
    padding: 30px;                   /* Relleno interno de la tarjeta */
    border-radius: 12px;             /* Esquinas redondeadas */
    transition: transform 0.3s ease, border 0.3s ease; /* Transición doble */
}

.service-card:hover {
    transform: translateY(-6px);     /* Sube la tarjeta un poco al pasar el mouse */
    border: 1px solid var(--color-accent); /* Resalta el borde */
}

.service-card h3 {
    margin-bottom: 10px;             /* Separación con el párrafo */
    font-weight: 600;                /* Grosor del título */
    color: var(--color-accent);      /* Color azul acentuado */
}

.service-card p {
    font-size: 0.95rem;              /* Letra un poco más pequeña */
    margin-bottom: 20px;             /* Espacio antes de las barras */
    color: var(--color-text-soft);   /* Color gris claro */
}

/* Barras de Progreso */
.skill-bar {
    width: 100%;                     /* Ancho total del contenedor de la barra */
    height: 8px;                     /* Altura de la barra */
    background: rgba(255,255,255,0.1); /* Fondo gris traslúcido del carril */
    border-radius: 10px;             /* Bordes circulares */
    overflow: hidden;                /* Recorta el progreso si se sale */
}

.skill-progress {
    height: 100%;                    /* Llena toda la altura de su padre */
    width: 0;                        /* Inicia vacía */
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); /* Color de carga */
    border-radius: 10px;             /* Bordes circulares */
    animation: loadSkill 2s ease forwards; /* Activa animación de carga */
}

/* Animación de Progreso */
@keyframes loadSkill {
    to {
        width: var(--progress);      /* Se llena hasta el valor de la variable del HTML */
    }
}

/* ======================================================
   10 CONTACTO
====================================================== */
.contact-section {
    padding: var(--spacing-section) 0;/* Relleno vertical */
    background: var(--color-bg-main); /* Fondo oscuro */
    color: var(--color-white);       /* Texto blanco */
}

/* ---------- Encabezado ---------- */
.contact-header {
    text-align: center;              /* Centra el texto */
    max-width: 700px;                /* Limita el ancho horizontal */
    margin: 0 auto 50px auto;        /* Centra y añade margen abajo */
}

.contact-header h2 {
    font-size: 2.5rem;               /* Título de contacto grande */
    margin-bottom: 15px;             /* Separación con el párrafo */
    color: var(--color-accent);      /* Azul brillante */
    font-weight: 600;                /* Grosor intermedio */
}

.contact-header p {
    color: var(--color-text-soft);   /* Color suave para el texto */
    line-height: 1.6;                /* Espaciado de líneas */
    font-size: 1rem;                 /* Tamaño base */
}

/* ======================================================
   FORMULARIO
====================================================== */
.contact-form {
    max-width: 600px;                /* Ancho máximo del formulario */
    margin: 0 auto;                  /* Centra el formulario */
    display: flex;                   /* Usa flexbox para alinear hijos */
    flex-direction: column;          /* Pone los campos en vertical */
    gap: 20px;                       /* Espacio entre cada campo */
}

.form-group {
    display: flex;                   /* Contenedor del campo */
    flex-direction: column;          /* Etiqueta arriba, campo abajo */
}

.form-group label {
    margin-bottom: 6px;              /* Espacio sobre el input */
    font-size: 0.9rem;               /* Letra pequeña */
    color: #8b949e;                  /* Color grisáceo para labels */
}

/* Campos */
.form-group input,
.form-group textarea {
    background: var(--color-bg-alt); /* Fondo oscuro alternativo */
    border: 1px solid #30363d;       /* Borde gris oscuro */
    padding: 12px 14px;              /* Relleno para escribir cómodo */
    border-radius: 8px;              /* Esquinas redondeadas */
    color: var(--color-white);       /* Texto blanco al escribir */
    font-size: 0.95rem;              /* Tamaño de texto */
    transition: border var(--transition), box-shadow var(--transition); /* Suaviza el foco */
    outline: none;                   /* Quita el borde azul por defecto */
}

/* Focus */
.form-group input:focus,
.form-group textarea:focus {
    border: 1px solid var(--color-accent); /* Cambia el borde al hacer clic */
    box-shadow: 0 0 0 2px rgba(30,144,255,0.2); /* Crea un resplandor azul */
}

/* ======================================================
   BOTÓN
====================================================== */
.btn-contact {
    background: linear-gradient(     /* Degradado para el botón de enviar */
        90deg,
        var(--color-accent),
        var(--color-primary)
    );
    border: none;                    /* Quita bordes de botón HTML */
    padding: 14px;                   /* Relleno */
    border-radius: 8px;              /* Esquinas redondeadas */
    color: var(--color-white);       /* Texto blanco */
    font-weight: 600;                /* Texto en negrita */
    cursor: pointer;                 /* Cursor tipo mano */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Suaviza interacciones */
}

.btn-contact:hover {
    transform: translateY(-2px);     /* Sube un poco al poner el mouse */
    box-shadow: 0 8px 20px rgba(30,144,255,0.25); /* Sombra brillante */
}

.btn-contact:active {
    transform: translateY(0);        /* Vuelve a su lugar al hacer clic */
    box-shadow: none;                /* Quita sombra al presionar */
}

/* ======================================================
   11 FOOTER
====================================================== */
.footer {
    background: var(--color-bg-alt); /* Fondo oscuro alternativo */
    color: var(--color-text-muted);  /* Texto apagado */
    text-align: center;              /* Centra el copyright */
    padding: 25px 0;                 /* Relleno vertical */
}

.footer a.footer-btn {
    color: var(--color-white);       /* Texto blanco */
    text-decoration: none;           /* Sin subrayado */
    font-weight: bold;               /* Texto grueso */
    background-color: var(--color-primary); /* Fondo cyan */
    padding: 4px 8px;                /* Relleno pequeño */
    border-radius: 8px;              /* Bordes redondeados */
    display: inline-block;           /* Permite márgenes y paddings */
    margin: 0 5px;                   /* Espacio a los lados */
}

.footer a.footer-btn:hover {
    background-color: var(--color-primary-dark); /* Color oscuro al pasar mouse */
}

/* ======================================================
   12 ANIMACIÓN TYPING
====================================================== */
.typing {
    overflow: hidden;                /* Esconde el texto mientras crece */
    border-right: 2px solid var(--color-white); /* Simula el cursor de texto */
    white-space: nowrap;             /* Evita que el texto baje a otra línea */
    display: inline-block;           /* Necesario para manejar el ancho correctamente */
    animation: typing 3s steps(40, end) forwards, blink 0.75s step-end infinite; /* Aplica dos animaciones */
}

.typing.delay {
    animation-delay: 1s;             /* Espera 1 segundo antes de empezar */
}

@keyframes typing {
    from { width: 0; }               /* Empieza sin ancho */
    to { width: 100%; }              /* Termina con el ancho completo */
}

@keyframes blink {
    50% { border-color: transparent; } /* Hace parpadear el borde derecho (cursor) */
}

/* ======================================================
   13 RESPONSIVE
====================================================== */
@media (max-width: 768px) {          /* Se activa en pantallas menores a 768px */

    .menu-icon {
        display: flex;               /* Muestra el icono de tres líneas */
    }

    .nav {
        position: absolute;          /* Posición fuera del flujo normal */
        top: 70px;                   /* Debajo del header */
        left: -100%;                 /* Oculto fuera de la pantalla a la izquierda */
        width: 100%;                 /* Ocupa todo el ancho */
        background: var(--color-bg-alt); /* Color oscuro */
        transition: var(--transition); /* Desplazamiento suave */
    }

    .nav ul {
        flex-direction: column;      /* Lista en vertical */
        padding: 20px 0;             /* Relleno arriba y abajo */
    }

    .nav ul li {
        margin: 15px 0;              /* Espaciado vertical entre enlaces */
    }

    #menu-toggle:checked ~ .nav {
        left: 0;                     /* Muestra el menú al activar el checkbox */
    }

    .hero-content {
        flex-direction: column-reverse; /* Foto arriba, texto abajo en móviles */
        text-align: center;          /* Centra los textos */
    }

    .hero-image img {
        width: clamp(160px, 50vw, 240px); /* Ajusta el tamaño de la foto en móvil */
    }
}