/*=========BASE=========*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*=========GENERAL=========*/

body {
  font-family: "Roboto", "Open Sans", sans-serif; /* color tipografía */
  background-color: whitesmoke; /* color fondo */
  color: black; /* color tipografía */
  line-height: 1.5;
}

.columna {
  overflow: hidden; /*para evitar desbordamiento*/
}

/*=========DISPOSICIÓN CONTENEDOR SUPERIOR=========*/

#contenedor-superior {
  display: grid; /* disposicion en cuadricula */
  grid-template-columns: 1fr 2fr; /* disposicion de anchura de la cuadricula */
  grid-template-rows: 2fr minmax(1fr, 2fr); /* disposicion de altura minmax para acotar la seccion sobreMi*/
}

.columna.izquierda.superior {
  grid-row-start: 1; /* posicion de la foto en la cuadricula grid */
  grid-row-end: 3;
}

img.foto-perfil {
  width: 100%;
  height: auto;
  display: block; /* ocupa todo el ancho disponible */
}

#cabecera {
  grid-row-start: 1; /* Disposicion en la cuadricula (inicio) */
  grid-row-end: 2; /* Disposicion en la cuadricula (final) */
  padding: 0rem 3rem; /* Espacio alrededor del texto */
  align-content: center; /* centra verticalmente el contenido */
}

/*=========DISPOSICIÓN CONTENEDOR INFERIOR=========*/

#contenedor-inferior {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: stretch; /* estira el contenido para llenar el contenedor */
}

.columna.izquierda.inferior {
  padding: 3rem;
  display: flex;
  flex-direction: column; /*Direccion de flex */
  justify-content: space-between; /*Distribuye los elementos hijos en el eje vertical */
}

.contacto-item {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.columna.derecha.inferior {
  padding-top: 3rem;
  padding-left: 3rem;
}

.bloque {
  padding-bottom: 2rem;
}

.estudios {
  padding-bottom: 1rem;
}

.sublista {
  margin-left: 1rem;
}

.puesto-intervalo {
  display: flex;
  flex-direction: row-reverse; /*Coloca primero intervalo y despues puesto */
  gap: 5%; /*Separacion entre los elementos que forman flex*/
  align-items: flex-start; /*alinea los elementos hijos perpendicular al eje de flex (parte superior en este caso*/
}

.puesto {
  text-align: left;
  flex: 1;
  padding: 0rem 3rem 3rem 0rem;
  position: relative; /*para posicionar posteriormente el timeline */
  padding-left: 50px;
}

.intervalo {
  width: 15%;
  padding-top: 0.5rem;
  margin-right: auto; /*para alineaarlo con la derecha*/
}

.logros {
  margin-left: 2rem;
  color: grey;
  width: 70%;
  text-align: justify;
}

.link-pequeño {
  color: #33ccff;
  text-decoration: none;
}

.link-pequeño:hover {
  color: #1e4d6b;
  text-decoration: underline;
}

/*====== Los puntos del Timeline====== */

.puesto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: khaki;
  border-radius: 50%;
}

/* ======La línea vertical ======*/

.puesto::after {
  content: "";
  position: absolute;
  left: 9px; /* centramos respecto al círculo (20px / 2 - 1px) */
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: khaki;
  z-index: 1;
}

/*=========TIPOGRAFÍA CABECERA=========*/

#nombre-completo {
  display: flex; /* Coloca los elementos en fila */
  flex-direction: column; /* ordena en dirección vertical */
  gap: 0.1rem; /* Espacio entre los elementos hijos que componen flex */
}

#nombre {
  font-size: 4rem;
  line-height: 1;
  color: #1e4d6b;
}

#apellidos {
  font-size: 3rem;
  color: #1e4d6b;
}

#trabajo {
  font-size: 1.5rem;
  font-weight: lighter;
  color: #1e4d6b;
}

#perfilProfesional {
  background-color: #f0e68c;
  font-size: clamp(1rem, 1vw, 2rem);
  padding: 2rem 3rem 2rem 3rem;
  text-align: justify;
  display: grid;
  grid-row-start: 2;
  grid-row-end: 3;
  align-content: center;
}

#sobreMi p {
  font-style: italic;
}

/*=========TIPOGRAFÍA IZQUIERDA=========*/

.titulo-izquierda {
  color: khaki;
  font-weight: bold;
  font-style: normal;
  margin-bottom: 1rem;
}

.link {
  color: #33ccff;
  text-decoration: none;
  font-size: 25px;
}

.link:hover {
  color: #1e4d6b;
  text-decoration: underline;
}

.izquierda {
  background-color: #0f4252;
  color: aliceblue;
}

.estudios-titulo {
  font-size: 1.5rem;
}

/*=========TIPOGRAFÍA DERECHA=========*/

.puesto-titulo {
  color: #1e4d6b;
  font-size: 1.5rem;
}

.titulo-derecha {
  color: #1f2a30;
  font-weight: bold;
  font-style: normal;
}