/* Tipografía Inter desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Variables */
html {
  /* Colores para el fondo */
  --bg-color-200:hsl(214, 25%, 11%);
  --bg-color-400:hsl(212, 19%, 16%);
  --bg-color-400-75:hsl(212, 19%, 16%, 75%);
  --bg-color-500:hsl(212, 19%, 25%);
  /* Color del texto */
  --text-color:hsl(215, 25%, 85%);
  /* Colores de acento */
  --accent-color-200:hsl(22, 44%, 12%);
  --accent-color-400:hsl(22, 100%, 65%);
  --accent-color-500:hsl(22, 100%, 85%);
  /* Familia tipográfica */
  --font-family: "Inter", sans-serif;
}

/* rem, root em, 1rem = 16px
  Regla de 8 puntos.
  Regla de 4 puntos.
*/

/* Estilos generales */
* {
  box-sizing: border-box;
  font-family: var(--font-family);
}

body {
  background-color: var(--bg-color-200);
  color: var(--text-color);
  margin: 0;
  line-height: 1.65; /* Cuerpo + 60% */
}

img {
  width: 100%;
}

/* Estilos para el header */
header {
  padding: 1rem 0 1.5rem;
  text-align: center;
}

header h1 {
  margin: 0;
}

/* Lista con links en el header */
header ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
}

/* Links generales */
/* En reposo :link / Visitado :visited*/
a:link,
a:visited {
  color: var(--text-color);
  text-decoration: none;
}

/* Hover :hover / Active :active */
a:hover,
a:active {
  color: var(--accent-color-400);
}

/* On focus */


/* Links principales */
a.principal:link,
a.principal:visited {
  color: var(--accent-color-400);
  text-decoration: none;
}

/* Hover :hover / Active :active */
a.principal:hover,
a.principal:active {
  color: var(--accent-color-500);
}


/* Estilos para el main y las secciones */
main {
  width: min(62rem, 100%);
  margin: 0 auto;
}

section {
  padding: 1rem;
}

section h1 {
  text-align: center; /* Alineación del texto */
  font-size: 2.5rem; /* Tamaño del cuerpo de la tipografía */
  font-style: normal; /* Inclinación del eje de la tipografía */
  font-weight: 300; /* Grosor de la línea */
}

#bienvenida {
  background-image: url('../img/bienvenida.jpg');
  background-size: cover;
  min-height: 32rem;
  padding: 0;

  display: flex;

  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  
  gap: 0;
}

#bienvenida h1 {
  background-color: var(--bg-color-400-75);
  padding: 1rem;
  margin: 0;
}

/* Estilos para el footer */
footer {
  padding: 1rem;
}


/* Ejemplo de modelo de caja en clase 2 y clase 3 */
/* Usamos el selector de clase */
.modelo-de-caja {
  /* Color del fondo */
  background-color: var(--bg-color-500);
  /* Margen interno */
  padding: 16px;
  /* Borde */
  border: 5px solid var(--accent-color-400) ; /* grosor de línea / estilo del borde / color del borde */

  /* Diferentes formas de aplicar margen externo y el centrado del contenedor usando margin */
  margin-top: 16px;
  margin-right: auto;
  margin-bottom: 16px;
  margin-left: auto;
  /* top right bottom left */
  margin: 16px auto 16px auto;
  /* top y bottom / right y left */
  margin: 16px auto;
  /* top / right y left / bottom */
  margin: 16px auto 32px;

  /* Tamaño del elemento */
  width: min(350px, 75%);
  min-height: 250px;

  /* Bordes redondeados */
  border-radius: 16px;
}

.item-1 {
  box-sizing: content-box; /* Padding y Border suman al tamaño final del elemento */
}

.item-2 {
  box-sizing: border-box; /* Ni padding, ni border suman para el tamaño final del elemento. */
}

/* Clase 4: Flexbox */
/* Fila */
.contenedor-flex-row {
  background-color: var(--bg-color-500);
  margin-bottom: 2rem;
  padding: 1rem;
  min-height: 32rem;
  display: flex; /* Convierte el contenedor a un contenedor flexible */
  flex-direction: row; /* Controla la dirección del eje principal */
  gap: 0; /* solamente agrega un espacio de distancia entre los elementos */
  justify-content: space-between; /* Controla el eje principal */
  align-items: center; /* Controla el eje secundario */
}

.item {
  border: 0.2rem solid var(--accent-color-400);
  padding: 2rem;
}

/* Columna */
.contenedor-flex-column {
  background-color: var(--bg-color-500);
  padding: 1rem;
  min-height: 42rem;
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

/* Clase 5 */

/* Resolución del ejercicio de Novedades */
/* Quitamos el margin de todos los elementos que componen el contenedor-novedades */
.contenedor-novedades * {
  margin: 0;
}

/* Crear el display flex para el catálogo */
.contenedor-novedades {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
}

/* Display flex para los elementos dentro de los artículos */
.contenedor-novedades article {
  width: 12rem;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.5rem;
}

/* Estilos para el título del libro */
.contenedor-novedades article h2 {
  font-size: 1rem;
}
/* Estilos para el autor del libro */
.contenedor-novedades article h3 {
  font-weight: 400;
}

/* Contenedor de los botones */
.contenedor-btn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Links para los artículos */
/* :link / :visited */
a.btn-outline:link,
a.btn-outline:visited {
  border: 0.15rem solid var(--bg-color-500);
  padding: 0.4rem 0;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

a.btn-fill:link,
a.btn-fill:visited {
  border: 0.15rem solid var(--bg-color-500);
  background-color: var(--bg-color-400);
  padding: 0.4rem 0;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}

/* :hover / :active */
a.btn-outline:hover,
a.btn-outline:active {
  border: 0.15rem solid var(--accent-color-400);
  background-color: var(--bg-color-400);
}

a.btn-fill:hover,
a.btn-fill:active {
  border: 0.15rem solid var(--accent-color-400);
  background-color: var(--accent-color-400);
  color: var(--bg-color-200);
}

/* Clase 6, Formularios */
#formulario form {
  border: 0.2rem solid var(--accent-color-400);
  padding: 2rem;
  border-radius: 1rem;

  width: min(25rem, 100%);
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0.5rem;
}

#formulario h2 {
  margin: 0;
}

#formulario form span {
  margin-bottom: 0.5rem;
  text-align: right;
  color: var(--accent-color-400);
}

#formulario form input,
#formulario form button {
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  border: 0.2rem solid var(--bg-color-500);
}

#formulario form button {
  background-color: var(--bg-color-500);
  color: var(--text-color);
  font-weight: 600;
}

#formulario form button:hover {
  background-color: var(--accent-color-400);
  color: var(--bg-color-200);
  border-color: var(--accent-color-400);
  cursor: pointer;
}

#formulario form input:focus,
#formulario form button:focus {
  outline: 0.2rem solid var(--accent-color-400);
}