:root {
  --rojo-vino: #6b1d2f;
  --negro: #0b0b0b;
  --palo-rosa: #c8a2a8;
  --blanco: #f5f5f5;
}

/* RESET BÁSICO */
body {
  margin: 0;
  font-family: 'Libre Baskerville', serif;

  background-color: var(--negro);
  background-image: 
    radial-gradient(circle at top left, rgba(200,162,168,0.15), transparent),
    radial-gradient(circle at bottom right, rgba(107,29,47,0.2), transparent);
  
  color: var(--blanco);
}
/* HEADER */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  background-color: var(--rojo-vino);
  padding: 15px 25px;
}
.header h1 {
  margin: 0;
  text-align: center;
  font-size: 36px;
  letter-spacing: 1.5px;
  color: var(--blanco);

  font-family: 'Playfair Display', serif;
}
.header-left,
.header-right {
  display: flex;
  gap: 12px;
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
}

.header a {
  color: var(--blanco);
  text-decoration: none;
  font-weight: bold;
  border: 1px solid var(--blanco);
  padding: 6px 10px;
}

/* LAYOUT GENERAL */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 10px;
  padding: 10px;
}

/* NAVEGACIÓN */
.nav {
  grid-column: 1 / 4;
  background-color: var(--palo-rosa);
  color: var(--negro);
  padding: 15px;
}

.nav h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin-bottom: 10px;
}

.nav li {
  font-family: 'Libre Baskerville', serif;
  margin-bottom: 6px;
}

/* COLUMNAS */
.left-column,
.right-column {
  border: 2px solid black;
  padding: 10px;
}

/* CONTENIDO CENTRAL */
.main-content {
  border: 2px solid black;
  padding: 10px;
}

/* BLOQUE SUPERIOR */
.top-block {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

/* CAJAS */
.box {
  background-color: rgba(200, 162, 168, 0.15);
  border: 1px solid var(--rojo-vino);
  padding: 20px;
  text-align: center;
  color: var(--blanco);
}