/* ==========================================================================
   SECCIONES
   Cada parte de la página, en el mismo orden en que aparecen en index.html.
   Mobile primero: los estilos base son para el celu y los @media agregan
   lo de pantallas más grandes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HEADER (fijo arriba)
   -------------------------------------------------------------------------- */
.header {
  position: sticky; /* queda pegado arriba al scrollear, pero sin sacarlo del flujo como fixed */
  top: 0;
  z-index: 10;
  height: var(--alto-header);
  border-bottom: 1px solid var(--color-borde);
  /* Fondo semitransparente + desenfoque: el contenido se ve borroso al pasar por debajo.
     color-mix mezcla el color de fondo con transparente (85% fondo) y sigue al tema solo. */
  background-color: color-mix(in srgb, var(--color-fondo) 85%, transparent);
  backdrop-filter: blur(10px);
  transition: background-color var(--transicion-tema), border-color var(--transicion-tema);
}

.header__interior {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--espacio-md);
}

/* En el celu el menú está escondido y se abre con el botón hamburguesa (js/menu.js le pone
   .header--menu-abierto al header). Abierto, es un panel que baja debajo del header con los
   links uno debajo del otro, grandes para tocarlos fácil con el dedo. */
.nav {
  display: none;
  margin-left: auto; /* en pantallas grandes empuja el menú (y el botón de tema) a la derecha */
  gap: var(--espacio-md);
}

.header--menu-abierto .nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: absolute; /* respecto del header (que es sticky, o sea "posicionado") */
  top: 100%;          /* justo debajo del header */
  left: 0;
  right: 0;
  padding: var(--espacio-xs) var(--espacio-md) var(--espacio-md);
  background-color: var(--color-fondo);
  border-bottom: 1px solid var(--color-borde);
  animation: menu-bajar 200ms ease;
}

.header--menu-abierto .nav a {
  padding-block: 0.85rem;
  font-size: var(--texto-medio);
  color: var(--color-texto);
  border-bottom: 1px solid var(--color-borde);
}

.header--menu-abierto .nav a:last-child {
  border-bottom: none;
}

@keyframes menu-bajar {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.nav a {
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  transition: color var(--transicion);
}

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

/* Sin menú, el botón de tema se va a la derecha solo */
.boton-tema {
  margin-left: auto;
}

@media (min-width: 720px) {
  .nav {
    display: flex;
  }

  .boton-tema {
    margin-left: 0;
  }

  /* En pantallas grandes el menú siempre se ve: el botón hamburguesa no hace falta */
  .boton-menu {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero {
  padding-block: var(--espacio-lg);
  display: grid;
  gap: var(--espacio-lg);
}

/* Foto: en el celu chica y arriba del texto. El marco es el cuadrado de la marca:
   un borde de acento corrido unos px (el ::before), como si la foto estuviera apoyada encima. */
.hero__foto {
  position: relative;
  width: 8.5rem;
  aspect-ratio: 1; /* siempre cuadrada, aunque la imagen original no lo sea */
}

.hero__foto::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  border: 2px solid var(--color-acento);
  border-radius: var(--radio);
  transition: border-color var(--transicion-tema);
}

.hero__foto img {
  position: relative; /* encima del ::before */
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta la imagen para llenar el cuadrado sin deformarla */
  border-radius: var(--radio);
  background-color: var(--color-superficie); /* se ve mientras carga la foto */
}

/* En pantallas grandes: texto a la izquierda y foto a la derecha, más grande */
@media (min-width: 900px) {
  .hero {
    padding-block: var(--espacio-xl) var(--espacio-lg);
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--espacio-xl);
  }

  .hero__foto {
    order: 2; /* en el HTML está primero; order la manda a la segunda columna */
    width: 18rem;
  }
}

.hero__titulo {
  font-size: var(--titulo-hero);
  font-weight: 700;
  max-width: 14ch; /* "ch" = ancho de un carácter: corta el título en ~2 líneas parejas */
  margin-bottom: var(--espacio-md);
}

.hero__texto {
  font-size: var(--texto-medio);
  color: var(--color-texto-suave);
  max-width: 56ch; /* líneas de texto demasiado largas cansan al leer */
  margin-bottom: var(--espacio-lg);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-sm);
  margin-bottom: var(--espacio-lg);
}

.hero__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs) var(--espacio-md);
  font-family: var(--font-mono);
  font-size: var(--texto-chico);
}

.hero__redes a {
  color: var(--color-texto-suave);
  transition: color var(--transicion);
}

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

/* --------------------------------------------------------------------------
   SECCIONES EN GENERAL
   -------------------------------------------------------------------------- */
.seccion {
  padding-block: var(--espacio-xl);
  border-top: 1px solid var(--color-borde);
  transition: border-color var(--transicion-tema);
}

.seccion__titulo {
  font-size: var(--titulo-seccion);
  margin-bottom: var(--espacio-lg);
}

/* --------------------------------------------------------------------------
   PROYECTOS
   -------------------------------------------------------------------------- */
.proyecto {
  padding: var(--espacio-md);
  background-color: var(--color-superficie);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion),
    background-color var(--transicion-tema);
}

/* Si hay más de un proyecto, separo uno de otro */
.proyecto + .proyecto {
  margin-top: var(--espacio-md);
}

/* Al pasar el mouse: se eleva un poco y el borde toma el acento */
.proyecto:hover {
  border-color: var(--color-acento);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -18px var(--color-acento);
}

/* Captura del proyecto, arriba de la tarjeta, con el mismo borde que la tarjeta */
.proyecto__imagen {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  margin-bottom: var(--espacio-md);
}

.proyecto__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espacio-xs) var(--espacio-sm);
  margin-bottom: var(--espacio-sm);
}

.proyecto__titulo {
  font-size: var(--texto-grande);
}

/* "En producción" con un puntito verde adelante (el ::before) */
.proyecto__estado {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

.proyecto__estado::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #3ecf8e;
}

.proyecto__descripcion {
  color: var(--color-texto-suave);
  max-width: 70ch;
  margin-bottom: var(--espacio-md);
}

.proyecto__subtitulo {
  font-size: var(--texto-base);
  margin-bottom: var(--espacio-sm);
}

/* Lista de "Lo que resolví" con un guion de color en vez del punto de siempre */
.proyecto__puntos {
  display: grid;
  gap: var(--espacio-xs);
  margin-bottom: var(--espacio-md);
  max-width: 75ch;
}

.proyecto__puntos li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-texto-suave);
}

.proyecto__puntos li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--color-acento);
}

.proyecto .tags {
  margin-bottom: var(--espacio-md);
}

.proyecto__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs);
  margin-bottom: var(--espacio-sm);
}

.proyecto__nota {
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

@media (min-width: 720px) {
  .proyecto {
    padding: var(--espacio-lg);
  }
}

/* --------------------------------------------------------------------------
   STACK: grupos de tecnologías en columnas (1 en celu, 3 en pantallas grandes)
   -------------------------------------------------------------------------- */
.stack {
  display: grid;
  gap: var(--espacio-lg);
}

.stack__titulo {
  font-size: var(--texto-base);
  color: var(--color-texto-suave);
  font-weight: 500;
  margin-bottom: var(--espacio-sm);
}

@media (min-width: 720px) {
  .stack {
    /* auto-fit + minmax: entran tantas columnas de mínimo 200px como quepan.
       Si descomento "Aprendiendo ahora", se acomoda solo en una cuarta columna o abajo. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* --------------------------------------------------------------------------
   SOBRE MÍ: título a la izquierda y texto a la derecha en pantallas grandes
   -------------------------------------------------------------------------- */
.sobre-mi {
  display: grid;
  gap: var(--espacio-sm);
}

.sobre-mi__texto {
  display: grid;
  gap: var(--espacio-sm);
  font-size: var(--texto-medio);
  color: var(--color-texto-suave);
  max-width: 62ch;
}

@media (min-width: 900px) {
  .sobre-mi {
    grid-template-columns: 1fr 2fr;
    gap: var(--espacio-lg);
  }
}

/* --------------------------------------------------------------------------
   CONTACTO
   -------------------------------------------------------------------------- */
.contacto .seccion__titulo {
  margin-bottom: var(--espacio-sm);
}

.contacto__texto {
  color: var(--color-texto-suave);
  font-size: var(--texto-medio);
  margin-bottom: var(--espacio-md);
}

/* Caja de email: input + dos botones pegados, con un solo borde alrededor de todo.
   En el celu el input ocupa toda la fila y los botones bajan a la de abajo (flex-wrap). */
.email-caja {
  display: flex;
  flex-wrap: wrap;
  max-width: 34rem;
  border: 1px solid var(--color-borde);
  border-radius: var(--radio);
  background-color: var(--color-superficie);
  overflow: hidden; /* que los botones no se salgan de las esquinas redondeadas */
  transition: border-color var(--transicion), background-color var(--transicion-tema);
}

.email-caja:focus-within {
  border-color: var(--color-acento); /* se marca toda la caja cuando algo de adentro tiene el foco */
}

.email-caja__input {
  flex: 1 1 100%;
  min-width: 0; /* sin esto, un input en flex no se achica por debajo de su ancho por defecto */
  padding: 0.9rem 1rem;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--texto-base);
  color: var(--color-texto);
  outline: none; /* el foco ya lo muestra la caja con :focus-within */
}

.email-caja__boton {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-chico);
  font-weight: 600;
  color: var(--color-texto);
  white-space: nowrap;
  transition: background-color var(--transicion), color var(--transicion);
}

.email-caja__boton + .email-caja__boton {
  border-left: 1px solid var(--color-borde);
}

.email-caja__boton:hover {
  background-color: var(--color-acento-suave);
  color: var(--color-acento);
}

.email-caja__boton svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Estado "¡Copiado!" (lo pone js/contacto.js por 2 segundos) */
.email-caja__boton--ok {
  color: #3ecf8e;
}

.email-caja__aviso {
  min-height: 1.5em; /* reservo el lugar para que no salte la página cuando aparece el texto */
  margin-top: var(--espacio-xs);
  margin-bottom: var(--espacio-md);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
}

/* En pantallas más anchas, todo en una sola fila: input y los dos botones al lado */
@media (min-width: 560px) {
  .email-caja__input {
    flex-basis: auto;
  }

  .email-caja__boton {
    flex: 0 0 auto;
    border-top: none;
    border-left: 1px solid var(--color-borde);
  }
}

.contacto__redes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-xs) var(--espacio-md);
  font-family: var(--font-mono);
  font-size: var(--texto-chico);
}

.contacto__redes a {
  color: var(--color-texto-suave);
  transition: color var(--transicion);
}

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

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.footer .contenedor {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--espacio-xs) var(--espacio-md);
}

.footer__link {
  font-family: var(--font-mono);
  transition: color var(--transicion);
}

.footer__link:hover {
  color: var(--color-acento);
}

.footer {
  padding-block: var(--espacio-md);
  border-top: 1px solid var(--color-borde);
  font-size: var(--texto-chico);
  color: var(--color-texto-suave);
  transition: border-color var(--transicion-tema);
}