/* Este es el archivo "styles.css" de la pagina web, cada parte esta comentada por lo que eres libre de investigarlas independientemente */

/* Raiz de la pagina para facil acceso */
:root {
  --dark: #6b6f74; /* Color del fondo de la parte superior */
  --ink: #f2f2f2; /* Color del texto de la parte superior */
  --bg: #ffffff; /* Color de fondo de la pagina en general */
  --card-border: #dfe3e7; /* Color del borde de los articulos del blog*/
  --text: #4b4f55; /* Color del texto de la pagina en general */
  --muted: #006aff; /* PENDIENTE COMENTAR */
}

/* Pagina completa */
* {
  box-sizing: border-box; /* PENDIENTE COMENTAR */
  text-decoration: none; /* Elimina la decoracion de enlace (link) */
}

/* Cuerpo de la pagina */
body {
  margin: 0; /* Define la distancia entre la pagina y el borde */
  font-family: Arial; /* Fuentes */
  color: var(--text); /* Color del texto, dentro de ":root" */
  background: var(--bg); /* Color del fondo, dentro de ":root" */
}

/* Barra superior de la pagina */
.topbar {
  background: var(--dark); /* Obtiene el color de fondo basado en la parte superior principal de la pagina */
  height: 78px; /* Define la altura de la barra */
  display: flex; /* Define la forma de la pagina ante diversas situaciones */
  align-items: flex-start; /* Alinea el contenido dentro de la barra superior con la forma que esta adopte */
}

/* Contenido de la barra superior */
.topbar-inner {
  width: min(980px, calc(100% - 40px)); /* Se define la anchura */
  margin: 0 auto; /* Margen de espacio */
  padding-top: 15px; /* Acolchado de la parte superior */
  display: flex; /* Define la forma de la pagina ante diversas situaciones */
  gap: 20px; /* Distancia de la izquierda del texto */
  align-items: center; /* Alinea el contenido dentro de la barra superior con la forma que esta adopte */
}

/* Puntos de la barra superior */
.dots span {
  width: 10px; /* Anchura de los puntos */
  height:10px; /* Altura de los puntos */
  display: inline-block; /* Define la forma de la pagina ante diversas situaciones */
  border-radius: 100%; /* Curvatura de los puntos */
  background: #c9cdd2; /* Color de los puntos (base, de modifica dentro de ".dots span:nth-child") */
  margin-right: 6px; /* Distancia de la derecha */
}

/* Colores de los puntos de la barra superior */
.dots span:nth-child(1){ background:#bfc3c8; }
.dots span:nth-child(2){ background:#cfd3d8; }
.dots span:nth-child(3){ background:#aeb4bb; }

/* Opciones de la barra superior */
.nav {
  display: flex; /* Define la forma de la pagina ante diversas situaciones */
  gap: 18px; /* Distancia de los botones entre si */
  font-size: 12px; /* Define el tamaño de la fuente */
  letter-spacing: .2px; /* Define el espaciado entre las letras */
  color: rgba(255,255,255,.65); /* Color de el texto de las opciones */
}

/* PENDIENTE COMENTAR */
.nav a {
  color: inherit; /* PENDIENTE COMENTAR */
}

/* PENDIENTE COMENTAR */
.nav a:hover{ color:rgba(255,255,255,.9); }

/* Parte superior principal */
.hero {
  background: var(--dark); /* Color de el fondo de la parte superior principal */
  padding: 36px 0 26px 0; /* Define el acholchado de la parte superior principal */
  text-align: center; /* Centra el contenido */
  color: var(--ink); /* Color del texto */
}

/* Parte superior principal para variantes de la pagina */
.hero2 {
  background: var(--dark); /* Color de el fondo de la parte superior principal */
  padding: 3px 0 23px 0; /* Define el acholchado de la parte superior principal */
  text-align: center; /* Centra el contenido */
  color: var(--ink); /* Color del texto */
}

/* Titulo de la parte superior principal */
.hero h1 {
  margin: 0; /* Margen de espacio */
  font-weight: 300; /* Define la anchura del texto */
  font-size: 34px; /* Define el tamaño del texto */
  color: var(--ink); /* Color del texto */
}

/* Subtitulo de la parte superior principal */
.hero p {
  margin: 10px; /* Margen de espacio */
  font-weight: 5; /* Define la anchura del texto */
  font-size: 15px; /* Define el tamaño del texto */
  color: var(--ink); /* Color del texto */
}

/* Espacio contenedor de el blog */
.content {
  width: min(980px, calc(100% - 80px)); /* Define la anchura */
  margin: 0 auto; /* Margen de espacio */
  padding: 30px 0 60px; /* Define el acolchado */
  background: #fff; /* Define el color de fondo */
}

/* Forma de los blogs ("tarjetas") */
.card {
  border: 1px solid var(--card-border); /* Define el borde */
  padding: 26px 28px; /* Define el acolchado */
  background: #fff; /* Define el color de fondo */
  margin: 0 auto 22px; /* Define el margen de espacio */
  max-width: 620px; /* Se define la anchura maxima */
}

/* Titulo de los blogs ("tarjetas") */
.card h2 {
  margin: 0 0 10px; /* Margen de espacio */
  font-size: 16px; /* Define el tamaño del texto */
  font-weight: 600; /* Define la anchura del texto */
  color: #555b62; /* Define el color */
}

/* Contenido de los blogs ("tarjetas") */
.card p {
  margin: 0; /* Margen de espacio */
  font-size: 13px; /* Define el tamaño del texto */
  line-height: 1.5; /* PENDIENTE COMENTAR */
  color: #5a5f66; /* Define el color */
}

/* Para textos externos */
.text {
  margin: 0; /* Margen de espacio */
  font-size: 15px; /* Define el tamaño del texto */
  line-height: 1.5; /* PENDIENTE COMENTAR */
  text-align: center; /* Centra el contenido */
  color: #4e5258; /* Define el color */
  padding: 10px 30px 10px 30px; /* Se define el acolchado */
}

/* Para textos externos claros */
.text:link, .text:visited {
  color: #fff; /* Define el color */
  text-decoration: none; /* Elimina la decoracion de enlace (link) */
  padding-left: 10px; /* Se define el acolchado a la izquierda */
  padding-right: 10px; /* Se define el acolchado a la derecha */
}

/* Footer, ewh */
footer {
  padding: 20px 0px 80px 0px; /* Se define el acholchado */
  background-color: var(--dark); /* Color de fondo */
  color: var(--ink); /* Color de texto introducido */
  text-align: center; /* Centra el contenido */
}