/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 10px;
}

/* Header y Footer */
header,
footer {
  background-color: #6d5d5d;
  padding: 20px;
  text-align: center;
  margin-bottom: 10px;
}

/* Grid principal */
.contenedor-principal {
  display: grid;
  grid-template-columns: 1fr 3fr; /* nav - contenido principal */
  gap: 10px;
}

/* NAV */
nav {
  background-color: #9aff8d;
  padding: 20px;
}

/* BLOQUE UNO: article + aside1 y aside2 */
.bloque-uno {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2 columnas: article - asides */
  grid-template-rows: auto auto;
  gap: 10px;
  background-color: #ddd;
  padding: 10px;
  grid-column: 2 / 3; /* 👈 se alinea a la derecha del nav */
}

.bloque-uno article {
  background-color: #ffd06c;
  padding: 10px;
  grid-row: 1 / 3; /* Ocupa las dos filas */
}

.bloque-uno aside:nth-of-type(1) {
  background-color: hsl(345, 100%, 81%);
  padding: 10px;
  grid-column: 2;
  grid-row: 1;
}

.bloque-uno aside:nth-of-type(2) {
  background-color: #fd6060;
  padding: 10px;
  grid-column: 2;
  grid-row: 2;
}

/* BLOQUE DOS: aside 3 */
.bloque-dos {
  background-color: #ddd;
  padding: 10px;
  margin-top: 10px;
  grid-column: 2 / 3; /* 👈 También a la derecha */
  display: flex;
  justify-content: flex-end;
}

.bloque-dos aside {
  background-color: #8a82ff;
  padding: 10px;
  width: 150px;
}
