/* =========================================================================
   styles.css — Portfolio de maahcodev
   =========================================================================

   ÍNDICE DE ESTE ARCHIVO (en orden):
   ─────────────────────────────────────────────────────────────────────────
    1.  Variables CSS (sistema de diseño — colores, fuentes, espaciado)
    2.  Reset y base (limpieza de estilos del navegador)
    3.  Contenedor (layout centrado con ancho máximo)
    4.  Header y navegación
    5.  Hero section
    6.  Estilos compartidos de secciones
    7.  Sección: Sobre mí
    8.  Sección: Habilidades
    9.  Sección: Proyectos
   10.  Sección: Contacto
   11.  Footer
   12.  Botones (reutilizables en todo el sitio)
   13.  Responsive design (media queries para móvil)
   ═════════════════════════════════════════════════════════════════════════ */


/* =========================================================================
   1. VARIABLES CSS — El sistema de diseño
   =========================================================================
   Una variable CSS es como una constante en programación.
   La defines UNA VEZ y la usas en todo el archivo.

   Ventaja real: si cambias --color-acento aquí,
   cambia automáticamente en todos los 40 lugares donde se usa.
   Sin variables: tendrías que buscar y cambiar los 40 uno por uno.

   :root = la raíz del documento HTML. Variables definidas aquí
   son accesibles desde CUALQUIER regla CSS del archivo.
   ========================================================================= */
:root {

  /* ── COLORES ─────────────────────────────────────────────────────────── */

  /* Fondos — del más oscuro al más claro */
  --color-fondo:          #0a192f;   /* Azul marino oscuro — fondo principal */
  --color-fondo-claro:    #112240;   /* Azul más claro — secciones alternas */
  --color-fondo-tarjeta:  #1d3461;   /* Azul medio — project cards */

  /* Texto — del más claro al más secundario */
  --color-texto:          #ccd6f6;   /* Blanco azulado — texto principal */
  --color-texto-secundario: #8892b0; /* Gris azulado — texto secundario */
  --color-texto-titulo:   #e6f1ff;   /* Casi blanco — títulos y headings */

  /* Acento — el color distintivo de la marca */
  --color-acento:         #64ffda;   /* Verde teal brillante */
  --color-acento-suave:   rgba(100, 255, 218, 0.10); /* Versión transparente */

  /* Bordes */
  --color-borde:          rgba(100, 255, 218, 0.15); /* Borde sutil con tinte acento */


  /* ── TIPOGRAFÍA ──────────────────────────────────────────────────────── */

  --fuente-principal: 'Inter', 'Segoe UI', sans-serif;
  --fuente-mono:      'Fira Code', 'Courier New', monospace;

  /*
    Pilas de fuentes: el navegador prueba cada una en orden.
    Si Inter no cargó → prueba Segoe UI → si no existe → usa sans-serif del sistema.
    Siempre terminar con una fuente genérica (sans-serif, monospace, serif).
  */


  /* ── ESPACIADO — Escala de 8px ──────────────────────────────────────── */

  /*
    Usar una escala fija de espaciado hace que el diseño se vea
    coherente y profesional. Cada valor es múltiplo de 8px.
    8 → 16 → 24 → 48 → 96
  */
  --espacio-xs:  8px;
  --espacio-sm:  16px;
  --espacio-md:  24px;
  --espacio-lg:  48px;
  --espacio-xl:  96px;


  /* ── MISCELÁNEA ──────────────────────────────────────────────────────── */

  --transicion:   all 0.25s ease;  /* Velocidad de animaciones hover */
  --radio-sm:     4px;             /* Esquinas levemente redondeadas */
  --radio-md:     8px;             /* Esquinas medianas */
  --radio-lg:     12px;            /* Esquinas más pronunciadas */
}


/* =========================================================================
   2. RESET Y BASE
   =========================================================================
   Cada navegador tiene sus propios estilos por defecto.
   Chrome, Firefox y Safari no coinciden entre sí.
   El reset elimina esas inconsistencias para que TÚ tengas el control total.
   ========================================================================= */

/*
  El selector * significa "todos los elementos de la página."
  ::before y ::after son pseudo-elementos — elementos decorativos
  que CSS puede crear sin necesidad de HTML.

  box-sizing: border-box es una de las reglas más importantes en CSS moderno:
  SIN ella: si defines width: 200px y padding: 20px → el elemento mide 240px total.
  CON ella: width: 200px es el TOTAL — el padding se incluye dentro, no se suma.
  Es como pensar "quiero que la caja mida 200px" — intuitivo.
*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  /*
    scroll-behavior: smooth hace que al hacer clic en un link interno (#sobre-mi)
    la página se desplace suavemente en lugar de saltar de golpe.
  */
  scroll-behavior: smooth;
}

body {
  margin: 0;           /* Elimina el margen por defecto de todos los navegadores */
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  font-size: 16px;     /* Base: 1rem = 16px */
  line-height: 1.6;    /* 160% del tamaño de fuente = texto cómodo de leer */
}

/* Resetear links — por defecto son azules y subrayados */
a {
  color: inherit;          /* Hereda el color del texto que lo rodea */
  text-decoration: none;   /* Sin subrayado */
}

/* Imágenes nunca se salen de su contenedor */
img {
  max-width: 100%;
  display: block; /* Elimina un espacio fantasma bajo las imágenes (comportamiento inline) */
}

/* Eliminar bullets y márgenes de todas las listas */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Headings — resetear márgenes y definir peso */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  color: var(--color-texto-titulo);
  line-height: 1.2;  /* Headings se ven mejor con line-height más apretado */
}

/* Párrafos — eliminar el margen superior por defecto */
p {
  margin: 0;
}


/* =========================================================================
   3. CONTENEDOR — El wrapper centrado
   =========================================================================
   Sin un contenedor, el texto se estira hasta el borde de la pantalla.
   En un monitor 4K serían 3000px de texto por línea — ilegible.
   El contenedor limita el contenido a un ancho máximo y lo centra.
   ========================================================================= */
.container {
  max-width: 1100px;  /* Máximo 1100px de ancho */
  width: 90%;         /* En pantallas pequeñas: 90% del ancho disponible */
  margin: 0 auto;
  /*
    margin: 0 auto — el truco clásico para centrar elementos de bloque.
    0 = margen arriba y abajo
    auto = el navegador divide el espacio restante izquierda/derecha en partes iguales
    → el elemento queda centrado.
  */
}


/* =========================================================================
   4. HEADER Y NAVEGACIÓN
   ========================================================================= */

header {
  /*
    position: fixed — el header se queda anclado en la parte superior
    aunque el usuario haga scroll hacia abajo.
    Necesita top: 0, left: 0, width: 100% para funcionar correctamente.
  */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  /*
    z-index controla qué elemento queda "encima" cuando se superponen.
    Número más alto = más arriba en la pila visual.
    100 garantiza que el header esté sobre TODO el contenido de la página.
  */
  z-index: 100;

  background-color: rgba(10, 25, 47, 0.92);
  /*
    El fondo es levemente transparente (0.92 = 92% opaco).
    backdrop-filter: blur() aplica desenfoque a lo que hay DETRÁS del header —
    el famoso efecto "vidrio esmerilado" (frosted glass).
  */
  backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--color-borde);
  padding: var(--espacio-sm) 0;
}

/* Contenido interno del nav — logo izquierda, links derecha */
.nav-container {
  max-width: 1100px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  /*
    display: flex convierte a los hijos directos en "flex items" —
    se colocan en una fila automáticamente.
    justify-content: space-between los empuja a extremos opuestos:
    logo al extremo izquierdo, links al extremo derecho.
    align-items: center los alinea verticalmente al centro.
  */
  justify-content: space-between;
  align-items: center;
}

/* Wrapper derecho: nav-links + lang-toggle + hamburger */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
}

/* Botón de idioma */
.lang-toggle {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--color-acento);
  background: none;
  border: 1px solid var(--color-acento);
  border-radius: var(--radio-sm);
  padding: 4px 10px;
  cursor: pointer;
  transition: var(--transicion);
  letter-spacing: 0.5px;
  line-height: 1;
}

.lang-toggle:hover {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

/* El logo/nombre en el nav */
.nav-logo {
  font-family: var(--fuente-mono);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-acento);
  letter-spacing: -0.5px;
  transition: var(--transicion);
}

.nav-logo:hover {
  opacity: 0.8;
}

/* Lista de links del nav */
.nav-links {
  display: flex;             /* Los <li> van en fila */
  gap: var(--espacio-md);    /* 24px de separación entre cada link */
  align-items: center;
}

.nav-links a {
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--color-texto);
  padding: var(--espacio-xs) 0;
  transition: var(--transicion);
  position: relative;        /* Necesario para el efecto de subrayado ::after */
}

/*
  Efecto de subrayado animado en los links del nav.
  ::after crea un elemento visual invisible debajo del texto.
  Al hacer hover, lo mostramos animando su width de 0 a 100%.
*/
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;                  /* Empieza invisible (ancho cero) */
  height: 1px;
  background-color: var(--color-acento);
  transition: width 0.25s ease;
}

.nav-links a:hover {
  color: var(--color-acento);
}

.nav-links a:hover::after {
  width: 100%;               /* Al hacer hover: se expande al 100% */
}


/* =========================================================================
   5. HERO SECTION
   ========================================================================= */

.hero {
  min-height: 100vh;
  /*
    100vh = 100% de la altura del viewport (la pantalla visible).
    min-height (no height) permite que crezca si el contenido lo necesita.
    Esto garantiza que el hero siempre ocupe toda la pantalla inicial.
  */
  display: flex;
  flex-direction: column;   /* Hijos apilados verticalmente */
  justify-content: center;  /* Centrado vertical */
  padding: var(--espacio-xl) 0;
  padding-top: 80px;
  /*
    padding-top: 80px compensa la altura del header fijo.
    El header flota sobre la página pero no empuja el contenido —
    sin este ajuste, el título quedaría oculto detrás del nav.
  */
}

.hero-saludo {
  display: block;            /* <span> es inline por defecto — block lo pone en su propia línea */
  font-family: var(--fuente-mono);
  font-size: 1rem;
  color: var(--color-acento);
  margin-bottom: var(--espacio-sm);
}

.hero-nombre {
  font-size: clamp(2.5rem, 8vw, 5rem);
  /*
    clamp(mínimo, preferido, máximo):
    - Mínimo: 2.5rem — nunca más pequeño que esto (celular)
    - Preferido: 8vw — escala con el 8% del ancho de pantalla
    - Máximo: 5rem — nunca más grande que esto (pantalla enorme)
    → Responsive sin media queries. El navegador elige solo.
  */
  color: var(--color-texto-titulo);
  margin-bottom: var(--espacio-xs);
  letter-spacing: -1px;
}

.hero-titulo {
  font-size: clamp(1.4rem, 5vw, 2.8rem);
  color: var(--color-texto-secundario);
  font-weight: 400;
  margin-bottom: var(--espacio-md);
}

.hero-descripcion {
  font-size: 1.1rem;
  color: var(--color-texto-secundario);
  max-width: 520px;
  /*
    max-width controla el largo de las líneas de texto.
    ~65-75 caracteres por línea es lo óptimo para lectura cómoda.
  */
  line-height: 1.7;
  margin-bottom: var(--espacio-lg);
}

.hero-acciones {
  display: flex;
  gap: var(--espacio-sm);
  flex-wrap: wrap;
  /*
    flex-wrap: wrap — si los botones no caben en una fila
    (pantallas muy pequeñas), se pasan a la siguiente línea.
    Previene overflow en móvil.
  */
}


/* =========================================================================
   6. ESTILOS COMPARTIDOS DE SECCIONES
   =========================================================================
   Reglas que se aplican a TODAS las secciones del main.
   Escribir aquí evita repetir el mismo código 4 veces.
   ========================================================================= */

section {
  padding: var(--espacio-xl) 0; /* 96px arriba y abajo en cada sección */
}

/* Título de cada sección — "Sobre mí", "Habilidades", etc. */
.seccion-titulo {
  font-size: 2rem;
  color: var(--color-texto-titulo);
  margin-bottom: var(--espacio-lg);
  position: relative;  /* Contexto para el ::after */
}

/* La línea decorativa debajo de cada título de sección.
   Se crea con CSS puro — no existe en el HTML. */
.seccion-titulo::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background-color: var(--color-acento);
  border-radius: var(--radio-sm);
  margin-top: 10px;
}


/* =========================================================================
   7. SECCIÓN: SOBRE MÍ
   ========================================================================= */

.sobre-mi {
  background-color: var(--color-fondo-claro);
  /*
    El fondo levemente diferente crea separación visual entre secciones
    sin necesitar bordes ni separadores explícitos.
    El ojo humano percibe el cambio automáticamente.
  */
}

.sobre-mi-texto {
  font-size: 1.05rem;
  color: var(--color-texto);
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: var(--espacio-md);
}

.sobre-mi-texto:last-child {
  margin-bottom: 0;
  /*
    :last-child aplica solo al último <p> del grupo.
    El último párrafo no necesita margen inferior —
    eso crearía espacio extra indeseado antes del borde de la sección.
  */
}

/* <strong> dentro de los párrafos de About */
.sobre-mi-texto strong {
  color: var(--color-acento);
  font-weight: 600;
}


/* =========================================================================
   8. SECCIÓN: HABILIDADES
   ========================================================================= */

.habilidades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /*
    repeat(auto-fit, minmax(200px, 1fr)):
    → auto-fit: crea tantas columnas como quepan en el contenedor
    → minmax(200px, 1fr): cada columna mide mínimo 200px, máximo 1 fracción igual
    
    Resultado visual:
    - Pantalla grande (1100px) → 4-5 columnas
    - Tablet (768px)           → 3 columnas  
    - Celular (375px)          → 1-2 columnas
    
    Todo automático. Sin una sola media query.
  */
  gap: var(--espacio-md);
}

.habilidad-item {
  background-color: var(--color-fondo-claro);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
  padding: var(--espacio-md);
  text-align: center;
  transition: var(--transicion);
  cursor: default;
}

.habilidad-item:hover {
  border-color: var(--color-acento);
  transform: translateY(-5px);
  /*
    translateY(-5px) mueve el elemento 5px hacia ARRIBA.
    Crea el efecto "lift" (flotación) al hacer hover.
    Se usa transform (no margin) porque transform no afecta
    el espacio que ocupa el elemento — los demás no se mueven.
  */
  background-color: var(--color-acento-suave);
}

.habilidad-icono {
  display: block;
  font-size: 1.8rem;
  margin-bottom: var(--espacio-sm);
  color: var(--color-acento);
  font-family: var(--fuente-mono);
}

.habilidad-nombre {
  font-size: 1rem;
  color: var(--color-acento);
  font-family: var(--fuente-mono);
  margin-bottom: var(--espacio-xs);
}

.habilidad-descripcion {
  font-size: 0.875rem;
  color: var(--color-texto-secundario);
  line-height: 1.5;
}


/* =========================================================================
   9. SECCIÓN: PROYECTOS
   ========================================================================= */

.proyectos {
  background-color: var(--color-fondo-claro);
}

.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--espacio-md);
}

/* <article> como tarjeta de proyecto */
.proyecto-card {
  background-color: var(--color-fondo-tarjeta);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  /*
    overflow: hidden recorta el contenido hijo a los bordes redondeados.
    Sin esto, el área de preview superior "se saldría" de las esquinas.
  */
  display: flex;
  flex-direction: column;
  transition: var(--transicion);
}

.proyecto-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-acento);
  box-shadow: 0 20px 40px rgba(100, 255, 218, 0.07);
}

/* Área de preview visual — reemplaza a la imagen por ahora */
.proyecto-preview {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Tres variantes de color para diferenciar cada proyecto */
.proyecto-preview--web {
  background: linear-gradient(135deg, #0d3b6e, #1a6eb5);
}

.proyecto-preview--landing {
  background: linear-gradient(135deg, #1a3a2e, #2d7a5f);
}

.proyecto-preview--python {
  background: linear-gradient(135deg, #3a2800, #8a6200);
}

.proyecto-preview-label {
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Bloque de texto de la tarjeta */
.proyecto-info {
  padding: var(--espacio-md);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
  flex: 1;
  /*
    flex: 1 hace que .proyecto-info tome todo el espacio vertical disponible
    dentro de la tarjeta. Esto garantiza que los botones al fondo queden
    alineados aunque las descripciones tengan diferente longitud.
  */
}

.proyecto-titulo {
  font-size: 1.2rem;
  color: var(--color-texto-titulo);
}

.proyecto-descripcion {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  line-height: 1.6;
  flex: 1;
  /* flex: 1 en la descripción empuja los tags y links hacia abajo */
}

/* Lista de tecnologías usadas */
.proyecto-tecnologias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs);
}

/* Cada tag/etiqueta de tecnología */
.tag {
  display: inline-block;
  background-color: var(--color-acento-suave);
  color: var(--color-acento);
  font-family: var(--fuente-mono);
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: var(--radio-sm);
  border: 1px solid rgba(100, 255, 218, 0.2);
}

/* Botones de links del proyecto */
.proyecto-links {
  display: flex;
  gap: var(--espacio-xs);
  margin-top: auto;
  /*
    margin-top: auto en un contexto flex empuja este elemento
    hasta el fondo del contenedor — independientemente de cuánto
    contenido haya arriba.
  */
}


/* =========================================================================
   10. SECCIÓN: CONTACTO
   ========================================================================= */

.contacto-descripcion {
  font-size: 1.1rem;
  color: var(--color-texto-secundario);
  max-width: 680px;
  margin: 0 0 var(--espacio-lg);
  line-height: 1.7;
}

.contacto-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--espacio-lg);
  align-items: start;
}

.contacto-subtitulo {
  font-family: var(--fuente-mono);
  font-size: 0.9rem;
  color: var(--color-acento);
  margin-bottom: var(--espacio-md);
}

.contacto-links {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-sm);
}

.contacto-link {
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--color-acento);
  border: 1px solid var(--color-acento);
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--radio-sm);
  transition: var(--transicion);
  text-align: center;
}

.contacto-link:hover {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}


/* =========================================================================
   11. FOOTER
   ========================================================================= */

footer {
  text-align: center;
  padding: var(--espacio-md) 0;
  border-top: 1px solid var(--color-borde);
}

.footer-texto {
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--color-texto-secundario);
  margin-bottom: var(--espacio-xs);
}

.footer-subtexto {
  font-size: 0.75rem;
  color: var(--color-texto-secundario);
  opacity: 0.6;
  font-style: italic;
}


/* =========================================================================
   12. BOTONES — Reutilizables en todo el sitio
   ========================================================================= */

.btn {
  display: inline-block;
  /*
    inline-block = se comporta como texto inline (no rompe la línea)
    PERO acepta padding, width y height como un bloque.
    Es el comportamiento correcto para botones que son <a> links.
  */
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  padding: var(--espacio-sm) var(--espacio-md);
  border-radius: var(--radio-sm);
  cursor: pointer;
  transition: var(--transicion);
  border: 1px solid transparent;
  text-align: center;
}

/* Botón principal — borde de acento, fill al hover */
.btn-primario {
  color: var(--color-acento);
  border-color: var(--color-acento);
  background-color: transparent;
}

.btn-primario:hover {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

/* Botón secundario — borde gris, se vuelve acento al hover */
.btn-secundario {
  color: var(--color-texto);
  border-color: var(--color-texto-secundario);
  background-color: transparent;
}

.btn-secundario:hover {
  color: var(--color-acento);
  border-color: var(--color-acento);
}

/* Botón pequeño — para las tarjetas de proyecto */
.btn-pequeno {
  font-size: 0.75rem;
  padding: 6px 14px;
  color: var(--color-acento);
  border-color: var(--color-acento);
  background-color: transparent;
}

.btn-pequeno:hover {
  background-color: var(--color-acento);
  color: var(--color-fondo);
}

/* Variante outline para el botón de GitHub */
.btn-outline {
  color: var(--color-texto-secundario);
  border-color: var(--color-texto-secundario);
}

.btn-outline:hover {
  color: var(--color-acento);
  border-color: var(--color-acento);
}


/* =========================================================================
   13. RESPONSIVE DESIGN — Media Queries
   =========================================================================
   Las media queries le dicen al navegador:
   "Aplica estas reglas SOLO cuando la pantalla sea más pequeña que X."

   @media (max-width: 768px) significa:
   "Cuando el ancho del viewport sea 768px o menos, usa estas reglas."

   768px es el punto de quiebre (breakpoint) estándar para tablets/móvil.
   Lo que está FUERA de @media aplica a todos los tamaños.
   Lo que está DENTRO de @media solo aplica cuando se cumple la condición.

   Filosofia: Diseñamos primero para desktop (arriba),
   luego hacemos ajustes para pantallas pequeñas (aquí).
   ========================================================================= */

@media (max-width: 768px) {

  /* ── NAVEGACIÓN EN MÓVIL ───────────────────────────────────────────── */

  .nav-toggle {
    display: flex;
  }

  .nav-right {
    gap: var(--espacio-sm);
  }

  .nav-links {
    position: fixed;
    top: 57px;
    left: 0;
    width: 100%;
    z-index: 98;
    flex-direction: column;
    background-color: rgba(10, 25, 47, 0.98);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-borde);
    padding: var(--espacio-sm) 0;
    gap: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-links li {
    width: 100%;
    text-align: center;
  }

  .nav-links a {
    display: block;
    padding: var(--espacio-sm) var(--espacio-md);
    font-size: 0.95rem;
  }


  /* ── HERO EN MÓVIL ─────────────────────────────────────────────────── */

  .hero {
    padding-top: 100px;      /* Más espacio top en móvil (nav puede ser más alta) */
    text-align: center;      /* Centrar texto en pantallas pequeñas */
  }

  .hero-acciones {
    justify-content: center; /* Centrar los botones */
  }

  .hero-descripcion {
    max-width: 100%;         /* Usar todo el ancho disponible */
  }


  /* ── TÍTULOS DE SECCIÓN EN MÓVIL ───────────────────────────────────── */

  .seccion-titulo {
    font-size: 1.6rem;       /* Reducir un poco el tamaño */
  }


  /* ── ABOUT EN MÓVIL ─────────────────────────────────────────────────── */

  .sobre-mi-texto {
    max-width: 100%;
  }


  /* ── SKILLS EN MÓVIL ───────────────────────────────────────────────── */

  .habilidades-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    /* Columnas más pequeñas para que quepan más en pantallas estrechas */
  }


  /* ── PROJECTS EN MÓVIL ─────────────────────────────────────────────── */

  .proyectos-grid {
    grid-template-columns: 1fr;
    /* En móvil: una sola columna — las tarjetas se apilan verticalmente */
  }


  /* ── CONTACT EN MÓVIL ──────────────────────────────────────────────── */

  .contacto-grid {
    grid-template-columns: 1fr;
  }

}


/* ─────────────────────────────────────────────────────────────────────── */
/* Breakpoint adicional para pantallas muy pequeñas (375px — iPhone SE)   */
/* ─────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  .nav-links a {
    font-size: 0.9rem;
    padding: var(--espacio-sm) var(--espacio-md);
  }

  .hero-acciones {
    flex-direction: column;  /* Botones del hero uno sobre el otro */
    align-items: center;
  }

  .btn-primario,
  .btn-secundario {
    width: 100%;
    max-width: 280px;
    text-align: center;
  }

}


/* =========================================================================
   FASE 2 — JavaScript enhancements
   ========================================================================= */


/* ── HAMBURGER BUTTON ──────────────────────────────────────────────────── */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 101;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-acento);
  transition: var(--transicion);
  transform-origin: center;
}

/* Animación a "X" cuando el menú está abierto */
.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ── HEADER SCROLLED STATE ─────────────────────────────────────────────── */

.header--scrolled {
  padding: 6px 0;
  background-color: rgba(10, 25, 47, 0.98);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}


/* ── SCROLL SPY — ACTIVE NAV LINK ─────────────────────────────────────── */

.nav-links a.active {
  color: var(--color-acento);
}

.nav-links a.active::after {
  width: 100%;
}


/* ── FADE-IN ON SCROLL ─────────────────────────────────────────────────── */

.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Efecto escalonado (stagger) en los grids */
.habilidad-item:nth-child(2) { transition-delay: 0.06s; }
.habilidad-item:nth-child(3) { transition-delay: 0.12s; }
.habilidad-item:nth-child(4) { transition-delay: 0.18s; }
.habilidad-item:nth-child(5) { transition-delay: 0.24s; }
.habilidad-item:nth-child(6) { transition-delay: 0.30s; }
.habilidad-item:nth-child(7) { transition-delay: 0.36s; }
.habilidad-item:nth-child(8) { transition-delay: 0.42s; }

.proyecto-card:nth-child(2) { transition-delay: 0.10s; }
.proyecto-card:nth-child(3) { transition-delay: 0.20s; }

.timeline-item:nth-child(2) { transition-delay: 0.08s; }
.timeline-item:nth-child(3) { transition-delay: 0.16s; }
.timeline-item:nth-child(4) { transition-delay: 0.24s; }
.timeline-item:nth-child(5) { transition-delay: 0.32s; }
.timeline-item:nth-child(6) { transition-delay: 0.40s; }
.timeline-item:nth-child(7) { transition-delay: 0.48s; }
.timeline-item:nth-child(8) { transition-delay: 0.56s; }


/* ── TYPING CURSOR ─────────────────────────────────────────────────────── */

.hero-titulo::after {
  content: '|';
  color: var(--color-acento);
  margin-left: 3px;
  animation: blink 0.8s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}


/* ── CONTACT FORM ──────────────────────────────────────────────────────── */

.contacto-form {
  display: flex;
  flex-direction: column;
  gap: var(--espacio-md);
}

.form-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-grupo label {
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  color: var(--color-acento);
  letter-spacing: 0.5px;
}

.form-grupo input,
.form-grupo textarea {
  background-color: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  font-family: var(--fuente-principal);
  font-size: 0.95rem;
  padding: var(--espacio-sm);
  transition: border-color 0.25s ease;
  resize: vertical;
}

.form-grupo input:focus,
.form-grupo textarea:focus {
  outline: none;
  border-color: var(--color-acento);
}

.form-grupo input::placeholder,
.form-grupo textarea::placeholder {
  color: var(--color-texto-secundario);
  opacity: 0.6;
}

.btn-full {
  width: 100%;
}

/* Mensaje de éxito tras enviar el formulario */
.form-exito {
  font-family: var(--fuente-mono);
  font-size: 1rem;
  color: var(--color-acento);
  text-align: center;
  padding: var(--espacio-lg);
  border: 1px solid var(--color-acento);
  border-radius: var(--radio-md);
  background-color: var(--color-acento-suave);
}


/* ── BACK TO TOP BUTTON ────────────────────────────────────────────────── */

.btn-top {
  position: fixed;
  bottom: var(--espacio-lg);
  right: var(--espacio-md);
  width: 44px;
  height: 44px;
  background-color: var(--color-acento);
  color: var(--color-fondo);
  border: none;
  border-radius: 50%;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.25s ease;
}

.btn-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-top:hover {
  background-color: var(--color-texto-titulo);
}


/* ── FOCUS VISIBLE — Accesibilidad de teclado ──────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-acento);
  outline-offset: 3px;
  border-radius: var(--radio-sm);
}


/* =========================================================================
   FASE 4 — Avatar + Timeline
   ========================================================================= */


/* ── HERO — layout de dos columnas ────────────────────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--espacio-xl);
  align-items: center;
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-avatar {
  width: 280px;
  height: 280px;
  animation: float 5s ease-in-out infinite;
}

.hero-avatar svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 24px rgba(100, 255, 218, 0.12));
}

@keyframes float {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(-12px); }
}

/* Responsive: avatar oculto en móvil, hero vuelve a una columna */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    display: none;
  }
}


/* ── TIMELINE ──────────────────────────────────────────────────────────── */

.trayectoria {
  /* fondo alternado — igual que sobre-mi y proyectos */
}

.timeline {
  max-width: 680px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: var(--espacio-md);
  position: relative;
  padding-bottom: var(--espacio-lg);
}

.timeline-item:last-child {
  padding-bottom: 0;
}

/* Línea vertical que conecta los puntos */
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    to bottom,
    rgba(100, 255, 218, 0.3),
    rgba(100, 255, 218, 0.05)
  );
}

.timeline-marker {
  width: 12px;
  height: 12px;
  background-color: var(--color-acento);
  border-radius: 50%;
  border: 2px solid var(--color-fondo);
  box-shadow: 0 0 0 4px rgba(100, 255, 218, 0.12);
  margin-top: 5px;
  justify-self: center;
  flex-shrink: 0;
}

.timeline-fecha {
  display: inline-block;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--color-acento);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.timeline-titulo {
  font-size: 1.05rem;
  color: var(--color-texto-titulo);
  margin-bottom: 6px;
}

.timeline-descripcion {
  font-size: 0.9rem;
  color: var(--color-texto-secundario);
  line-height: 1.65;
}


/* ── SVG ICONS en habilidades ──────────────────────────────────────────── */

.habilidad-svg {
  display: block;
  width: 2rem;
  height: 2rem;
  margin: 0 auto;
}