/* =========================================================
   CV DE EJEMPLO - ARCHIVO CSS DOCUMENTADO
   ========================================================= */

/* El selector universal (*) selecciona todos los elementos de la página. */
* {
  /* Hace que padding y border formen parte del ancho y alto total del elemento. */
  box-sizing: border-box;
}


/* Selecciona el elemento body, que contiene todo lo visible de la página. */
body {
  /* Elimina el margen automático que agrega el navegador. */
  margin: 0;

  /* Agrega 40 píxeles de espacio interior alrededor de todo el contenido. */
  padding: 40px;

  /* Define la familia tipográfica principal del sitio. */
  font-family: Arial, Helvetica, sans-serif;

  /* Define el color de texto por defecto. */
  color: #1f2937;

  /* Define el color de fondo general de la página. */
  background-color: #e9edf2;
}


/* Selecciona todos los títulos h1, h2, h3 y los párrafos p. */
h1,
h2,
h3,
p {
  /* Elimina el margen superior que traen estos elementos por defecto. */
  margin-top: 0;
}


/* Selecciona todos los enlaces de la página. */
a {
  /* Hace que los enlaces hereden el color del elemento padre. */
  color: inherit;
}


/* Selecciona el contenedor principal del currículum. */
.cv {
  /* Define un ancho fijo de 1100 píxeles. */
  width: 1100px;

  /* Centra horizontalmente el currículum dentro de la página. */
  margin: 0 auto;

  /* Convierte este elemento en un contenedor CSS Grid. */
  display: grid;

  /* Crea dos columnas: una de 310px y otra que ocupa el espacio restante. */
  grid-template-columns: 310px 1fr;

  /* Define el fondo blanco del currículum. */
  background-color: white;

  /* Dibuja un borde fino alrededor de todo el CV. */
  border: 1px solid #d8dee7;

  /* Redondea las esquinas del contenedor. */
  border-radius: 24px;

  /* Oculta cualquier contenido que sobresalga de las esquinas redondeadas. */
  overflow: hidden;
}


/* Selecciona la columna lateral izquierda. */
.lateral {
  /* Agrega espacio interior arriba/abajo y a izquierda/derecha. */
  padding: 36px 30px;

  /* Define el color general del texto de la barra lateral. */
  color: white;

  /* Define el fondo oscuro de la barra lateral. */
  background-color: #172033;
}


/* Selecciona el contenedor de la fotografía. */
.foto-contenedor {
  /* Agrega espacio debajo de la fotografía. */
  margin-bottom: 34px;
}


/* Selecciona la fotografía de perfil. */
.foto-perfil {
  /* Hace que la imagen ocupe todo el ancho disponible. */
  width: 100%;

  /* Define una altura fija para la fotografía. */
  height: 285px;

  /* Convierte la imagen en un elemento de bloque. */
  display: block;

  /* Recorta la imagen para llenar el espacio sin deformarla. */
  object-fit: cover;

  /* Redondea las esquinas de la imagen. */
  border-radius: 18px;
}


/* Selecciona el texto pequeño debajo de la fotografía. */
.foto-nota {
  /* Agrega un pequeño espacio por encima. */
  margin-top: 8px;

  /* Elimina el margen inferior del párrafo. */
  margin-bottom: 0;

  /* Reduce el tamaño del texto. */
  font-size: 12px;

  /* Define un gris azulado claro. */
  color: #aeb9cc;
}


/* Selecciona cada bloque de información de la columna lateral. */
.bloque-lateral {
  /* Separa cada bloque del anterior. */
  margin-top: 32px;
}


/* Selecciona los h2 que están dentro de .bloque-lateral. */
.bloque-lateral h2 {
  /* Agrega espacio debajo del título. */
  margin-bottom: 14px;

  /* Agrega espacio interno debajo del texto. */
  padding-bottom: 10px;

  /* Define el tamaño del título. */
  font-size: 18px;

  /* Dibuja una línea debajo del título. */
  border-bottom: 1px solid #445069;
}


/* Selecciona las listas ul dentro de la columna lateral. */
.bloque-lateral ul {
  /* Elimina el margen exterior de la lista. */
  margin: 0;

  /* Da espacio a la izquierda para que entren las viñetas. */
  padding-left: 20px;

  /* Define el color del texto de la lista. */
  color: #dbe2ee;
}


/* Selecciona cada elemento li dentro de la columna lateral. */
.bloque-lateral li {
  /* Agrega espacio debajo de cada elemento de lista. */
  margin-bottom: 10px;

  /* Aumenta el espacio vertical entre líneas de texto. */
  line-height: 1.4;
}


/* Selecciona específicamente la lista de contacto. */
.lista-contacto {
  /* Permite cortar palabras muy largas si no entran en el ancho disponible. */
  word-break: break-word;
}


/* Selecciona el contenedor de habilidades. */
.habilidades {
  /* Convierte el contenedor en Flexbox. */
  display: flex;

  /* Permite que los elementos bajen a otra línea si no hay espacio. */
  flex-wrap: wrap;

  /* Agrega 9px de separación entre los elementos. */
  gap: 9px;
}


/* Selecciona los span de habilidades y los span de tecnologías. */
.habilidades span,
.tecnologias span {
  /* Agrega espacio interno vertical y horizontal. */
  padding: 8px 11px;

  /* Define un tamaño de texto pequeño. */
  font-size: 13px;

  /* Redondea mucho las esquinas para crear efecto de etiqueta o "pill". */
  border-radius: 999px;
}


/* Selecciona solo los span dentro de habilidades. */
.habilidades span {
  /* Define un color de texto claro. */
  color: #e7ecff;

  /* Define un fondo azul oscuro. */
  background-color: #2a3650;

  /* Dibuja un borde alrededor de cada habilidad. */
  border: 1px solid #43516f;
}


/* Selecciona la columna principal derecha. */
.contenido {
  /* Agrega espacio interior alrededor del contenido. */
  padding: 46px 48px;
}


/* Selecciona el encabezado principal del currículum. */
.encabezado {
  /* Convierte el encabezado en un contenedor Flexbox. */
  display: flex;

  /* Separa los dos bloques hacia extremos opuestos. */
  justify-content: space-between;

  /* Alinea los elementos al comienzo del eje transversal. */
  align-items: flex-start;

  /* Agrega espacio entre los elementos flexibles. */
  gap: 30px;

  /* Agrega espacio interno inferior. */
  padding-bottom: 30px;

  /* Dibuja una línea debajo del encabezado. */
  border-bottom: 1px solid #dde3eb;
}


/* Selecciona los elementos con clase etiqueta. */
.etiqueta {
  /* Agrega espacio debajo de la etiqueta. */
  margin-bottom: 8px;

  /* Define un tamaño de texto pequeño. */
  font-size: 13px;

  /* Aplica negrita. */
  font-weight: bold;

  /* Aumenta la separación entre letras. */
  letter-spacing: 1.5px;

  /* Convierte visualmente el texto a mayúsculas. */
  text-transform: uppercase;

  /* Define el color azul de la etiqueta. */
  color: #536fd7;
}


/* Selecciona el h1 ubicado dentro del encabezado. */
.encabezado h1 {
  /* Agrega espacio debajo del nombre. */
  margin-bottom: 8px;

  /* Define un tamaño grande para el nombre. */
  font-size: 48px;

  /* Ajusta la altura de línea. */
  line-height: 1;

  /* Define un azul muy oscuro. */
  color: #172033;
}


/* Selecciona el párrafo que contiene la profesión. */
.profesion {
  /* Elimina el margen inferior. */
  margin-bottom: 0;

  /* Define el tamaño del texto. */
  font-size: 18px;

  /* Aumenta el espacio entre líneas. */
  line-height: 1.45;

  /* Define un color gris azulado. */
  color: #64748b;
}


/* Selecciona el bloque destacado ubicado a la derecha del encabezado. */
.disponibilidad {
  /* Define un ancho mínimo. */
  min-width: 185px;

  /* Agrega espacio interno. */
  padding: 16px;

  /* Dibuja un borde. */
  border: 1px solid #d8e0f3;

  /* Redondea las esquinas. */
  border-radius: 14px;

  /* Define un fondo azul muy claro. */
  background-color: #f5f7ff;
}


/* Selecciona strong y span dentro de disponibilidad. */
.disponibilidad strong,
.disponibilidad span {
  /* Hace que cada uno ocupe su propia línea. */
  display: block;
}


/* Selecciona el texto principal del bloque disponibilidad. */
.disponibilidad strong {
  /* Agrega espacio inferior. */
  margin-bottom: 5px;

  /* Define el color azul oscuro. */
  color: #263b83;
}


/* Selecciona el texto secundario del bloque disponibilidad. */
.disponibilidad span {
  /* Define un tamaño menor de texto. */
  font-size: 13px;

  /* Define un color gris azulado. */
  color: #65718a;
}


/* Selecciona cada sección principal del contenido. */
.seccion {
  /* Separa cada sección de la anterior. */
  margin-top: 36px;
}


/* Selecciona solo los h2 hijos directos de .seccion. */
.seccion > h2 {
  /* Agrega espacio debajo del título. */
  margin-bottom: 20px;

  /* Define el tamaño del título. */
  font-size: 22px;

  /* Define el color del título. */
  color: #172033;
}


/* Selecciona el texto del perfil profesional. */
.perfil {
  /* Elimina el margen inferior. */
  margin-bottom: 0;

  /* Define el tamaño de la fuente. */
  font-size: 16px;

  /* Aumenta el interlineado. */
  line-height: 1.7;

  /* Define un color gris. */
  color: #566274;
}


/* Selecciona el contenedor que agrupa todas las experiencias. */
.experiencias {
  /* Convierte el contenedor en Grid. */
  display: grid;

  /* Agrega 24px de separación entre experiencias. */
  gap: 24px;
}


/* Selecciona cada experiencia individual. */
.experiencia {
  /* Convierte cada experiencia en una grilla. */
  display: grid;

  /* Crea una columna de 130px y otra flexible. */
  grid-template-columns: 130px 1fr;

  /* Separa ambas columnas. */
  gap: 24px;

  /* Agrega espacio interno inferior. */
  padding-bottom: 24px;

  /* Dibuja una línea inferior. */
  border-bottom: 1px solid #e2e7ee;
}


/* Selecciona strong y span dentro del bloque de fecha. */
.fecha strong,
.fecha span {
  /* Hace que cada elemento ocupe una línea completa. */
  display: block;
}


/* Selecciona el texto fuerte dentro de fecha. */
.fecha strong {
  /* Agrega espacio debajo. */
  margin-bottom: 5px;

  /* Define un color azul. */
  color: #4059b5;
}


/* Selecciona el span dentro de fecha. */
.fecha span {
  /* Define un tamaño pequeño. */
  font-size: 13px;

  /* Define un color gris claro. */
  color: #8590a3;
}


/* Selecciona los h3 dentro de detalle. */
.detalle h3 {
  /* Reduce el espacio debajo del título. */
  margin-bottom: 4px;

  /* Define el tamaño del título. */
  font-size: 19px;

  /* Define un color oscuro. */
  color: #1f2937;
}


/* Selecciona el nombre de la empresa. */
.empresa {
  /* Agrega espacio debajo. */
  margin-bottom: 12px;

  /* Muestra el texto en negrita. */
  font-weight: bold;

  /* Define un color gris azulado. */
  color: #65718a;
}


/* Selecciona párrafos y elementos de lista dentro de detalle. */
.detalle p,
.detalle li {
  /* Define el tamaño del texto. */
  font-size: 15px;

  /* Mejora la lectura aumentando el espacio vertical. */
  line-height: 1.55;

  /* Define un color gris. */
  color: #5d6878;
}


/* Selecciona las listas dentro del detalle. */
.detalle ul {
  /* Elimina el margen inferior de la lista. */
  margin-bottom: 0;
}


/* Selecciona el contenedor de formación académica. */
.formacion-grid {
  /* Convierte el contenedor en CSS Grid. */
  display: grid;

  /* Crea dos columnas del mismo tamaño. */
  grid-template-columns: 1fr 1fr;

  /* Agrega separación entre las columnas. */
  gap: 18px;
}


/* Selecciona cada tarjeta de formación. */
.tarjeta {
  /* Agrega espacio interior. */
  padding: 20px;

  /* Dibuja un borde fino. */
  border: 1px solid #dfe5ed;

  /* Redondea las esquinas. */
  border-radius: 16px;

  /* Define un fondo muy claro. */
  background-color: #fafbfc;
}


/* Selecciona el párrafo de año o categoría dentro de tarjeta. */
.tarjeta .anio {
  /* Agrega espacio debajo. */
  margin-bottom: 8px;

  /* Define un tamaño pequeño. */
  font-size: 12px;

  /* Aplica negrita. */
  font-weight: bold;

  /* Convierte el texto visualmente a mayúsculas. */
  text-transform: uppercase;

  /* Define el color azul. */
  color: #536fd7;
}


/* Selecciona h3 dentro de tarjeta. */
.tarjeta h3 {
  /* Agrega espacio inferior. */
  margin-bottom: 10px;

  /* Define el tamaño del título. */
  font-size: 17px;
}


/* Selecciona el último párrafo dentro de cada tarjeta. */
.tarjeta p:last-child {
  /* Elimina el margen inferior. */
  margin-bottom: 0;

  /* Define el tamaño de la fuente. */
  font-size: 14px;

  /* Aumenta el interlineado. */
  line-height: 1.55;

  /* Define un color gris azulado. */
  color: #65718a;
}


/* Selecciona el proyecto destacado. */
.proyecto {
  /* Convierte el contenedor en Flexbox. */
  display: flex;

  /* Separa la imagen y el contenido. */
  gap: 24px;

  /* Agrega espacio interior. */
  padding: 20px;

  /* Dibuja un borde. */
  border: 1px solid #dfe5ed;

  /* Redondea las esquinas. */
  border-radius: 18px;

  /* Define un fondo claro. */
  background-color: #fafbfc;
}


/* Selecciona la imagen que está dentro del proyecto. */
.proyecto img {
  /* Define el ancho de la imagen. */
  width: 235px;

  /* Define la altura de la imagen. */
  height: 170px;

  /* Hace que la imagen llene el espacio sin deformarse. */
  object-fit: cover;

  /* Redondea las esquinas de la imagen. */
  border-radius: 14px;
}


/* Selecciona el contenido textual del proyecto. */
.proyecto-contenido {
  /* Hace que ocupe todo el espacio libre disponible dentro del Flexbox. */
  flex: 1;
}


/* Selecciona el h3 dentro del contenido del proyecto. */
.proyecto-contenido h3 {
  /* Agrega espacio debajo del título. */
  margin-bottom: 8px;

  /* Define el tamaño del título. */
  font-size: 20px;
}


/* Selecciona los párrafos hijos directos de proyecto-contenido. */
.proyecto-contenido > p {
  /* Aumenta el espacio entre líneas. */
  line-height: 1.55;

  /* Define un color gris azulado. */
  color: #65718a;
}


/* Selecciona el contenedor de tecnologías. */
.tecnologias {
  /* Convierte el contenedor en Flexbox. */
  display: flex;

  /* Permite que las etiquetas bajen de línea si no entran. */
  flex-wrap: wrap;

  /* Agrega espacio entre etiquetas. */
  gap: 8px;
}


/* Selecciona cada etiqueta de tecnología. */
.tecnologias span {
  /* Define el color del texto. */
  color: #354a9f;

  /* Define un fondo azul muy claro. */
  background-color: #edf1ff;

  /* Dibuja un borde fino alrededor de cada etiqueta. */
  border: 1px solid #d6defa;
}