/* =========================================================
   PORTFOLIO DE EJEMPLO
   ARCHIVO CSS SÚPER DOCUMENTADO

   En este ejemplo se utilizan solamente temas vistos hasta:
   - Selectores
   - Colores
   - Tipografía
   - Margin
   - Padding
   - Border
   - Box Model
   - Flexbox
   - Grid

   No se utiliza JavaScript.
   ========================================================= */


/* ---------------------------------------------------------
   CONFIGURACIÓN GENERAL
   --------------------------------------------------------- */


/* El selector universal (*) selecciona todos los elementos. */
* {

  /* Hace que padding y border formen parte del ancho total. */
  box-sizing: border-box;

}


/* Selecciona el elemento html. */
html {

  /* Permite un desplazamiento suave al usar enlaces internos. */
  scroll-behavior: smooth;

}


/* Selecciona todo el cuerpo visible de la página. */
body {

  /* Elimina el margen automático del navegador. */
  margin: 0;

  /* Define una familia tipográfica simple y disponible. */
  font-family: Arial, Helvetica, sans-serif;

  /* Define el color general del texto. */
  color: #172033;

  /* Define el color de fondo general. */
  background-color: #f5f7fb;

}


/* Agrupa títulos y párrafos para eliminar márgenes superiores. */
h1,
h2,
h3,
p {

  /* Elimina el margen superior automático. */
  margin-top: 0;

}


/* Selecciona todos los enlaces. */
a {

  /* Elimina el subrayado por defecto. */
  text-decoration: none;

  /* Hace que hereden el color de su contexto. */
  color: inherit;

}


/* Selecciona todas las imágenes. */
img {

  /* Hace que la imagen no supere el ancho disponible. */
  max-width: 100%;

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

}


/* ---------------------------------------------------------
   BARRA SUPERIOR
   --------------------------------------------------------- */


/* Selecciona el encabezado principal. */
.barra-superior {

  /* Define un ancho máximo para evitar que el contenido se estire demasiado. */
  max-width: 1200px;

  /* Centra horizontalmente el contenedor. */
  margin: 0 auto;

  /* Agrega espacio interior vertical y horizontal. */
  padding: 26px 32px;

  /* Convierte el encabezado en un contenedor Flexbox. */
  display: flex;

  /* Coloca la marca a un lado y la navegación al otro. */
  justify-content: space-between;

  /* Centra verticalmente los elementos. */
  align-items: center;

  /* Agrega separación entre los elementos. */
  gap: 30px;

}


/* Selecciona la marca del sitio. */
.marca {

  /* Define un tamaño mayor. */
  font-size: 24px;

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

  /* Define un color oscuro. */
  color: #172033;

}


/* Selecciona el span dentro de la marca. */
.marca span {

  /* Cambia solo el color de ".dev". */
  color: #6c63ff;

}


/* Selecciona la navegación. */
.navegacion {

  /* Convierte los enlaces en elementos flexibles. */
  display: flex;

  /* Agrega separación uniforme entre enlaces. */
  gap: 24px;

}


/* Selecciona los enlaces dentro de navegación. */
.navegacion a {

  /* Define un tamaño moderado. */
  font-size: 15px;

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

}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */


/* Selecciona la sección hero. */
.hero {

  /* Define un ancho máximo. */
  max-width: 1200px;

  /* Centra la sección. */
  margin: 0 auto;

  /* Agrega espacio interior. */
  padding: 70px 32px 90px;

  /* Convierte el hero en CSS Grid. */
  display: grid;

  /* Crea dos columnas de distinto tamaño. */
  grid-template-columns: 1.15fr 0.85fr;

  /* Agrega separación entre columnas. */
  gap: 70px;

  /* Centra verticalmente ambas columnas. */
  align-items: center;

}


/* Selecciona el texto pequeño introductorio. */
.eyebrow {

  /* Agrega espacio inferior. */
  margin-bottom: 14px;

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

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

  /* Aumenta el espacio entre letras. */
  letter-spacing: 1.6px;

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

  /* Define un violeta como color de acento. */
  color: #6c63ff;

}


/* Selecciona el título principal del hero. */
.hero h1 {

  /* Agrega espacio debajo del título. */
  margin-bottom: 22px;

  /* Define un tamaño grande. */
  font-size: 58px;

  /* Reduce el espacio vertical entre líneas. */
  line-height: 1.05;

  /* Define un color oscuro. */
  color: #172033;

}


/* Selecciona el span dentro del h1. */
.hero h1 span {

  /* Hace que el span ocupe una línea completa. */
  display: block;

  /* Cambia el color de esa parte del título. */
  color: #6c63ff;

}


/* Selecciona la descripción del hero. */
.hero-descripcion {

  /* Limita el ancho del texto. */
  max-width: 620px;

  /* Agrega espacio inferior. */
  margin-bottom: 28px;

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

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

  /* Define un gris azulado. */
  color: #667085;

}


/* Selecciona el grupo de botones del hero. */
.hero-acciones {

  /* Convierte el grupo en Flexbox. */
  display: flex;

  /* Permite que los elementos bajen de línea si fuera necesario. */
  flex-wrap: wrap;

  /* Agrega espacio entre botones. */
  gap: 14px;

  /* Agrega espacio debajo del grupo. */
  margin-bottom: 38px;

}


/* Selecciona cualquier elemento con clase boton. */
.boton {

  /* Hace que el enlace pueda recibir padding correctamente. */
  display: inline-block;

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

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

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

}


/* Selecciona el botón principal. */
.boton-principal {

  /* Define texto blanco. */
  color: white;

  /* Define fondo violeta. */
  background-color: #6c63ff;

  /* Agrega un borde del mismo color. */
  border: 1px solid #6c63ff;

}


/* Selecciona el botón secundario. */
.boton-secundario {

  /* Define texto oscuro. */
  color: #172033;

  /* Define fondo blanco. */
  background-color: white;

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

}


/* Selecciona el contenedor de datos del hero. */
.hero-datos {

  /* Convierte el bloque en Flexbox. */
  display: flex;

  /* Agrega separación entre datos. */
  gap: 32px;

}


/* Selecciona cada bloque individual de datos. */
.hero-datos div {

  /* Agrega un borde izquierdo. */
  border-left: 2px solid #dfe3ea;

  /* Agrega espacio interior izquierdo. */
  padding-left: 14px;

}


/* Selecciona el número principal de cada dato. */
.hero-datos strong {

  /* Hace que ocupe una línea completa. */
  display: block;

  /* Define un tamaño mayor. */
  font-size: 24px;

  /* Define el color oscuro. */
  color: #172033;

}


/* Selecciona la descripción de cada dato. */
.hero-datos span {

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

  /* Define un gris. */
  color: #7a8496;

}


/* Selecciona el bloque de imagen del hero. */
.hero-imagen {

  /* Permite posicionar elementos hijos respecto de este contenedor. */
  position: relative;

}


/* Selecciona la imagen dentro del hero. */
.hero-imagen img {

  /* Hace que ocupe todo el ancho del contenedor. */
  width: 100%;

  /* Define una altura fija. */
  height: 520px;

  /* Recorta la imagen sin deformarla. */
  object-fit: cover;

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

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

}


/* Selecciona la tarjeta pequeña sobre la imagen. */
.tarjeta-flotante {

  /* La posiciona de forma absoluta. */
  position: absolute;

  /* La separa del borde izquierdo. */
  left: -30px;

  /* La separa del borde inferior. */
  bottom: 34px;

  /* Agrega espacio interior. */
  padding: 16px 18px;

  /* Define fondo blanco. */
  background-color: white;

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

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

}


/* Selecciona el texto de la tarjeta flotante. */
.tarjeta-flotante span {

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

  /* Define un color verde. */
  color: #25795c;

}


/* ---------------------------------------------------------
   ESTILO GENERAL DE SECCIONES
   --------------------------------------------------------- */


/* Selecciona todas las secciones con clase seccion. */
.seccion {

  /* Define ancho máximo. */
  max-width: 1200px;

  /* Centra horizontalmente. */
  margin: 0 auto;

  /* Agrega espacio interior. */
  padding: 90px 32px;

}


/* Selecciona los títulos h2 de las secciones. */
.titulo-seccion h2 {

  /* Limita el ancho del título. */
  max-width: 760px;

  /* Agrega espacio inferior. */
  margin-bottom: 16px;

  /* Define un tamaño importante. */
  font-size: 42px;

  /* Reduce el interlineado. */
  line-height: 1.15;

  /* Define color oscuro. */
  color: #172033;

}


/* Selecciona los párrafos dentro del título de sección. */
.titulo-seccion > p:last-child {

  /* Define un ancho máximo. */
  max-width: 660px;

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

  /* Define un color gris. */
  color: #6d7687;

}


/* Clase auxiliar para centrar contenido. */
.centrado {

  /* Centra el texto. */
  text-align: center;

}


/* Selecciona el h2 de un título centrado. */
.centrado h2 {

  /* Centra horizontalmente el bloque h2. */
  margin-left: auto;

  /* Centra horizontalmente el bloque h2. */
  margin-right: auto;

}


/* Selecciona el último párrafo de un título centrado. */
.centrado > p:last-child {

  /* Centra horizontalmente el párrafo. */
  margin-left: auto;

  /* Centra horizontalmente el párrafo. */
  margin-right: auto;

}


/* ---------------------------------------------------------
   SOBRE MÍ
   --------------------------------------------------------- */


/* Selecciona la sección sobre mí. */
.sobre-mi {

  /* Dibuja una línea superior. */
  border-top: 1px solid #e2e6ed;

}


/* Selecciona la grilla de la sección sobre mí. */
.sobre-grid {

  /* Agrega espacio superior. */
  margin-top: 44px;

  /* Convierte el contenedor en Grid. */
  display: grid;

  /* Crea dos columnas. */
  grid-template-columns: 0.9fr 1.1fr;

  /* Agrega separación entre columnas. */
  gap: 70px;

}


/* Selecciona párrafos del texto sobre mí. */
.sobre-texto p {

  /* Define un tamaño cómodo. */
  font-size: 17px;

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

  /* Define un color gris. */
  color: #667085;

}


/* Selecciona el contenedor de destacados. */
.sobre-destacados {

  /* Convierte el bloque en Grid. */
  display: grid;

  /* Agrega separación vertical. */
  gap: 14px;

}


/* Selecciona cada mini tarjeta. */
.mini-tarjeta {

  /* Convierte cada tarjeta en Flexbox. */
  display: flex;

  /* Alinea los elementos verticalmente al inicio. */
  align-items: flex-start;

  /* Agrega separación entre número y texto. */
  gap: 18px;

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

  /* Define fondo blanco. */
  background-color: white;

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

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

}


/* Selecciona el número de cada mini tarjeta. */
.mini-tarjeta > strong {

  /* Define un tamaño grande. */
  font-size: 24px;

  /* Define el color violeta. */
  color: #6c63ff;

}


/* Selecciona el h3 dentro de cada mini tarjeta. */
.mini-tarjeta h3 {

  /* Agrega espacio debajo. */
  margin-bottom: 6px;

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

}


/* Selecciona el párrafo de cada mini tarjeta. */
.mini-tarjeta p {

  /* Elimina margen inferior. */
  margin-bottom: 0;

  /* Define color gris. */
  color: #70798b;

  /* Define interlineado. */
  line-height: 1.5;

}


/* ---------------------------------------------------------
   SERVICIOS
   --------------------------------------------------------- */


/* Selecciona la sección servicios. */
.servicios {

  /* Define un fondo ligeramente distinto. */
  background-color: #eef1f7;

  /* Permite que el fondo ocupe visualmente todo el ancho del bloque. */
  max-width: none;

}


/* Selecciona el título dentro de servicios. */
.servicios .titulo-seccion {

  /* Limita su ancho. */
  max-width: 1200px;

  /* Lo centra horizontalmente. */
  margin: 0 auto;

}


/* Selecciona la grilla de servicios. */
.servicios-grid {

  /* Define un ancho máximo. */
  max-width: 1200px;

  /* Centra la grilla. */
  margin: 44px auto 0;

  /* Convierte el contenedor en Grid. */
  display: grid;

  /* Crea tres columnas iguales. */
  grid-template-columns: repeat(3, 1fr);

  /* Agrega separación entre tarjetas. */
  gap: 20px;

}


/* Selecciona cada tarjeta de servicio. */
.servicio-card {

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

  /* Define fondo blanco. */
  background-color: white;

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

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

}


/* Selecciona el número del servicio. */
.numero {

  /* Hace que el número se comporte como bloque. */
  display: block;

  /* Agrega espacio inferior. */
  margin-bottom: 36px;

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

  /* Define color violeta. */
  color: #6c63ff;

}


/* Selecciona el título de cada servicio. */
.servicio-card h3 {

  /* Agrega espacio inferior. */
  margin-bottom: 12px;

  /* Define tamaño. */
  font-size: 21px;

}


/* Selecciona el párrafo de cada servicio. */
.servicio-card p {

  /* Elimina margen inferior. */
  margin-bottom: 0;

  /* Define interlineado. */
  line-height: 1.65;

  /* Define color gris. */
  color: #6c7585;

}


/* ---------------------------------------------------------
   PROYECTOS
   --------------------------------------------------------- */


/* Selecciona el contenedor de proyectos. */
.proyectos-grid {

  /* Agrega espacio superior. */
  margin-top: 44px;

  /* Convierte el contenedor en CSS Grid. */
  display: grid;

  /* Crea dos columnas iguales. */
  grid-template-columns: 1fr 1fr;

  /* Agrega separación. */
  gap: 22px;

}


/* Selecciona cada tarjeta de proyecto. */
.proyecto-card {

  /* Define fondo blanco. */
  background-color: white;

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

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

  /* Oculta partes que sobresalgan. */
  overflow: hidden;

}


/* Selecciona el proyecto principal. */
.proyecto-grande {

  /* Hace que ocupe las dos columnas del Grid. */
  grid-column: span 2;

}


/* Selecciona imágenes dentro de proyectos. */
.proyecto-card img {

  /* Ocupa todo el ancho disponible. */
  width: 100%;

  /* Define una altura fija. */
  height: 280px;

  /* Recorta sin deformar. */
  object-fit: cover;

}


/* Selecciona la imagen del proyecto grande. */
.proyecto-grande img {

  /* Le da una altura mayor. */
  height: 420px;

}


/* Selecciona el contenido interno de cada proyecto. */
.proyecto-info {

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

}


/* Selecciona la categoría del proyecto. */
.categoria {

  /* Hace que pueda tener margen inferior. */
  display: block;

  /* Agrega espacio inferior. */
  margin-bottom: 9px;

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

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

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

  /* Aumenta espacio entre letras. */
  letter-spacing: 1px;

  /* Define color violeta. */
  color: #6c63ff;

}


/* Selecciona el título del proyecto. */
.proyecto-info h3 {

  /* Agrega espacio inferior. */
  margin-bottom: 10px;

  /* Define tamaño. */
  font-size: 23px;

}


/* Selecciona el párrafo del proyecto. */
.proyecto-info p {

  /* Define interlineado. */
  line-height: 1.6;

  /* Define color gris. */
  color: #697385;

}


/* Selecciona el grupo de tecnologías. */
.tags {

  /* Convierte el grupo en Flexbox. */
  display: flex;

  /* Permite bajar de línea. */
  flex-wrap: wrap;

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

  /* Agrega espacio superior. */
  margin-top: 18px;

}


/* Selecciona cada etiqueta. */
.tags span {

  /* Agrega espacio interior. */
  padding: 7px 10px;

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

  /* Define fondo gris claro. */
  background-color: #f0f2f7;

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

  /* Define color del texto. */
  color: #556071;

}


/* ---------------------------------------------------------
   CONTACTO
   --------------------------------------------------------- */


/* Selecciona la sección contacto. */
.contacto {

  /* Convierte la sección en Flexbox. */
  display: flex;

  /* Coloca un bloque a cada lado. */
  justify-content: space-between;

  /* Alinea al inicio verticalmente. */
  align-items: flex-start;

  /* Agrega separación. */
  gap: 70px;

  /* Dibuja línea superior. */
  border-top: 1px solid #e0e5ec;

}


/* Selecciona la parte textual del contacto. */
.contacto-texto {

  /* Permite que ocupe una parte del espacio disponible. */
  flex: 1;

}


/* Selecciona el h2 de contacto. */
.contacto-texto h2 {

  /* Define tamaño grande. */
  font-size: 40px;

  /* Define interlineado compacto. */
  line-height: 1.15;

}


/* Selecciona el párrafo descriptivo de contacto. */
.contacto-texto > p:last-child {

  /* Define interlineado cómodo. */
  line-height: 1.7;

  /* Define color gris. */
  color: #6d7687;

}


/* Selecciona el bloque de datos de contacto. */
.contacto-datos {

  /* Define un ancho mínimo. */
  min-width: 390px;

  /* Convierte el bloque en Grid. */
  display: grid;

  /* Agrega separación vertical. */
  gap: 14px;

}


/* Selecciona cada dato individual. */
.contacto-datos div {

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

  /* Define fondo blanco. */
  background-color: white;

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

  /* Redondea esquinas. */
  border-radius: 12px;

}


/* Selecciona la etiqueta de cada dato. */
.contacto-datos span {

  /* Hace que ocupe una línea. */
  display: block;

  /* Agrega espacio inferior. */
  margin-bottom: 5px;

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

  /* Define color gris. */
  color: #7a8496;

}


/* Selecciona el valor de cada dato. */
.contacto-datos strong {

  /* Define tamaño. */
  font-size: 15px;

  /* Define color oscuro. */
  color: #273144;

}


/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */


/* Selecciona el pie de página. */
.footer {

  /* Define un ancho máximo. */
  max-width: 1200px;

  /* Centra horizontalmente. */
  margin: 0 auto;

  /* Agrega espacio interior. */
  padding: 28px 32px 40px;

  /* Convierte el footer en Flexbox. */
  display: flex;

  /* Separa ambos textos hacia los extremos. */
  justify-content: space-between;

  /* Agrega separación. */
  gap: 20px;

  /* Dibuja una línea superior. */
  border-top: 1px solid #e0e5ec;

}


/* Selecciona los párrafos del footer. */
.footer p {

  /* Elimina margen inferior. */
  margin-bottom: 0;

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

  /* Define color gris. */
  color: #7b8493;

}