/*
  APARIENCIA DEL SITIO
  ====================
  Escrito "mobile-first": las reglas base son para celular, y al final hay
  una media query que agrega lo que cambia en pantallas anchas. Es más fácil
  así que al revés, porque en celular casi todo va en una sola columna.
*/

/* ---------- 1. VARIABLES ----------
   Los colores se definen UNA vez. Para cambiar el azul de todo el sitio se
   cambia una línea. El azul es el mismo de la hoja de vida (#1B3A57), para
   que portafolio y HV se reconozcan como la misma marca. */
:root {
  --acento: #1B3A57;
  --acento-suave: #e8eef4;
  --fondo: #fafaf8;
  --superficie: #ffffff;
  --texto: #1a1a1a;
  --texto-suave: #555555;
  --borde: #e2e2dd;
  --radio: 10px;
  --ancho-max: 1040px;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Modo oscuro: solo se REDEFINEN las variables. Todas las reglas de abajo
   las usan, así que el sitio completo cambia sin repetir nada. Se activa
   solo si el sistema operativo del visitante está en modo oscuro. */
@media (prefers-color-scheme: dark) {
  :root {
    --acento: #8fb3d6;
    --acento-suave: #1d2a36;
    --fondo: #121417;
    --superficie: #1a1d21;
    --texto: #e8e8e6;
    --texto-suave: #a3a3a0;
    --borde: #2c3036;
    --sombra: none;
  }
}

/* ---------- 2. BASE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box; /* el padding cuenta dentro del ancho: evita desbordes */
}

html {
  scroll-behavior: smooth; /* los enlaces #seccion se desplazan suave */
  /* Quita el destello gris/azul que pinta el celular al tocar un enlace o
     botón: es la señal más visible de "esto es una página web". A cambio,
     cada control tiene su propio :active (ver .boton y .boton-idioma). */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; /* sin agrandar letra al girar el celular */
}

/* Botones y enlaces responden al tocar sin esperar un posible doble toque
   (el retardo de ~300 ms que algunos navegadores aún aplican). */
a,
button {
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fondo);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--acento);
}

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h2 {
  font-size: 1.6rem;
  color: var(--acento);
}

/* Contenedor centrado. padding-inline deja siempre margen lateral en celular. */
.contenedor {
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ---------- 3. BARRA SUPERIOR ----------
   position: sticky la deja pegada arriba al hacer scroll. */
.barra {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.barra__interior {
  display: flex;             /* Flexbox: elementos en fila */
  align-items: center;
  gap: 1rem;
  min-height: 3.5rem;
}

.barra__marca {
  font-weight: 700;
  text-decoration: none;
  color: var(--texto);
  margin-right: auto;        /* empuja todo lo demás a la derecha */
}

/* En celular los enlaces se esconden para no saturar la barra;
   se muestran en la media query de pantallas anchas. */
.barra__enlaces {
  display: none;
}

.boton-idioma {
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  cursor: pointer;
  user-select: none;           /* mantener presionado no selecciona "EN" */
  -webkit-user-select: none;
  transition: transform 120ms ease-out, border-color 120ms;
}

/* Respuesta al PRESIONAR, no al soltar: es lo que hace que se sienta
   inmediato. Funciona igual con dedo y con mouse. */
.boton-idioma:active {
  transform: scale(0.95);
}

/* ---------- 4. PORTADA ---------- */
.portada {
  display: flex;
  flex-direction: column;    /* en celular: foto arriba, texto abajo */
  align-items: flex-start;
  gap: 1.5rem;
  padding-block: 3rem 2rem;
}

.portada__foto {
  width: 160px;
  height: 160px;
  object-fit: cover;         /* recorta sin deformar la foto */
  object-position: top;
  border-radius: 50%;
  border: 3px solid var(--acento-suave);
}

.portada__saludo {
  margin: 0;
  color: var(--texto-suave);
}

.portada__nombre {
  font-size: clamp(2rem, 6vw, 3rem); /* crece con la pantalla, entre 2 y 3rem */
  margin-bottom: 0.25rem;
}

.portada__titular {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--acento);
  margin: 0 0 1rem;
}

.portada__resumen {
  color: var(--texto-suave);
  max-width: 60ch;           /* líneas de ~60 caracteres: más fáciles de leer */
}

.portada__botones {
  display: flex;
  flex-wrap: wrap;           /* si no caben, bajan a otra línea */
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.boton {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 150ms ease-out, transform 120ms ease-out;
}

.boton:active {
  transform: scale(0.97);
}

.boton--primario {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--superficie);
}

/* ---------- 5. SECCIONES ---------- */
.seccion {
  padding-block: 2.5rem;
  border-top: 1px solid var(--borde);
  /* Compensa la barra fija: al saltar a #seccion el título no queda tapado */
  scroll-margin-top: 4rem;
}

.seccion p {
  max-width: 70ch;
}

.seccion__intro {
  color: var(--texto-suave);
  margin-top: -0.25rem;
}

.subtitulo {
  margin-top: 2rem;
}

/* ---------- 6. PROYECTOS ----------
   CSS Grid con auto-fill: el navegador decide cuántas columnas caben, con un
   mínimo de 290px por tarjeta. Una en celular, dos o tres en escritorio, sin
   escribir una media query para cada tamaño. */
.rejilla-proyectos {
  display: grid;
  /* min(290px, 100%): en pantallas de menos de 290px útiles (celulares de 320px)
     la tarjeta ocupa el 100% en vez de forzar 290px y desbordar la página. */
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.tarjeta h3 {
  font-size: 1.1rem;
}

.tarjeta p {
  font-size: 0.97rem;
  color: var(--texto-suave);
}

.tarjeta__pie {
  margin: auto 0 0;          /* margin-top: auto empuja el pie al fondo */
  padding-top: 1rem;
  font-weight: 600;
  font-size: 0.93rem;
}

.tarjeta__pie a {
  text-decoration: none;
}

.tarjeta__pie--sin-enlace {
  color: var(--texto-suave);
  font-weight: 400;
  font-style: italic;
}

/* Etiquetas de tecnologías (se usan en proyectos y en habilidades) */
.etiquetas {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.etiquetas li {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--acento-suave);
  color: var(--acento);
}

/* ---------- 7. HABILIDADES ---------- */
.rejilla-habilidades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.grupo-habilidades h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

/* ---------- 8. TRAYECTORIA ---------- */
.linea-tiempo {
  display: grid;
  gap: 1.5rem;
  margin-top: 1rem;
}

.hito {
  padding-left: 1.1rem;
  border-left: 3px solid var(--acento-suave);
}

.hito h3 {
  font-size: 1.05rem;
  margin-bottom: 0.1rem;
}

.hito__fecha,
.hito__lugar {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texto-suave);
}

.hito__lugar {
  font-style: italic;
  margin-bottom: 0.4rem;
}

.certificaciones {
  padding-left: 1.2rem;
  color: var(--texto-suave);
}

/* ---------- 9. CONTACTO Y PIE ---------- */
.contacto {
  text-align: left;
}

.pie {
  padding-block: 2rem;
  border-top: 1px solid var(--borde);
  color: var(--texto-suave);
  font-size: 0.9rem;
}

/* ---------- 10. HOVER: SOLO CON MOUSE ----------
   En una pantalla táctil no existe el "pasar por encima", así que el
   navegador lo simula: el primer toque activa :hover y lo deja pegado hasta
   que tocas otra cosa. Un botón que se levanta al pasar el mouse quedaría
   levantado después de tocarlo. Por eso TODOS los :hover viven aquí, detrás
   de una consulta por capacidad (no por tamaño de pantalla: un iPad con
   trackpad sí tiene hover, y un portátil táctil puede no tenerlo). */
@media (hover: hover) and (pointer: fine) {
  .boton:hover {
    border-color: var(--acento);
  }

  .boton-idioma:hover {
    border-color: var(--acento);
    color: var(--acento);
  }

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

/* ---------- 11. PANTALLAS ANCHAS ----------
   Todo lo de arriba sirve en celular. Aquí solo se agrega lo que cambia
   cuando la pantalla mide 760px o más. */
@media (min-width: 760px) {
  .barra__enlaces {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .barra__enlaces a {
    text-decoration: none;
    color: var(--texto-suave);
    font-size: 0.95rem;
  }

  .portada {
    flex-direction: row;     /* foto a la izquierda, texto a la derecha */
    align-items: center;
    gap: 3rem;
    padding-block: 5rem 4rem;
  }

  .portada__foto {
    width: 220px;
    height: 220px;
    flex-shrink: 0;          /* la foto no se encoge si el texto es largo */
  }

  .linea-tiempo {
    grid-template-columns: 1fr 1fr;
  }
}

/* Accesibilidad: si el visitante pidió menos movimiento en su sistema, se
   respetan esas preferencias. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .boton { transition: none; }
}