/* Hoja del blog. Mismos tokens que la portada: quien salta de una a otra
   tiene que notar que es el mismo sitio. Aquí manda la lectura, así que la
   columna es estrecha y el texto grande. */

:root {
  --papel: #FFFFFF;
  --papel-2: #F3F4F6;
  --tinta: #14161A;
  --tinta-suave: #52565E;
  --tinta-tenue: #868B93;
  --rojo: #AA151B;
  --rojo-hondo: #8A1116;
  --amarillo: #F1BF00;
  --amarillo-hondo: #96760A;
  --linea: #E2E4E8;
  --linea-fuerte: #C6CAD1;

  --serif: Georgia, 'Noto Serif', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --medida: 38rem;
  --ancho: 70rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #101215;
    --papel-2: #1A1D22;
    --tinta: #EDEFF3;
    --tinta-suave: #AFB4BD;
    --tinta-tenue: #7D828B;
    --rojo: #F0555C;
    --rojo-hondo: #FF7A80;
    --amarillo: #FFD11A;
    --amarillo-hondo: #FFD11A;
    --linea: #262A31;
    --linea-fuerte: #3A3F48;
  }
}

:root[data-theme="dark"] {
  --papel: #101215;
  --papel-2: #1A1D22;
  --tinta: #EDEFF3;
  --tinta-suave: #AFB4BD;
  --tinta-tenue: #7D828B;
  --rojo: #F0555C;
  --rojo-hondo: #FF7A80;
  --amarillo: #FFD11A;
  --amarillo-hondo: #FFD11A;
  --linea: #262A31;
  --linea-fuerte: #3A3F48;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.franja {
  height: 6px;
  background: linear-gradient(to bottom,
    var(--rojo) 0 25%, var(--amarillo) 25% 75%, var(--rojo) 75% 100%);
}

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1.5rem; }
.columna { max-width: var(--medida); margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--rojo); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; }

/* ------------------------------------------------------------- cabecera */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; }
.marca { display: flex; align-items: center; gap: .6rem; font-family: var(--serif); font-size: 1.15rem;
         color: inherit; text-decoration: none; }
.marca b { color: var(--rojo); font-weight: 400; }
.sello {
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--rojo); color: #fff; border-radius: 6px;
  font-family: var(--serif); font-size: 1.05rem; line-height: 1;
}
.otro-idioma { font-size: .82rem; color: var(--tinta-suave); }

/* -------------------------------------------------------------- artículo */
article { padding: 3rem 0 4rem; }
.etiqueta {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--rojo);
}
h1 {
  font-family: var(--serif); font-weight: 400; margin: .8rem 0 0;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.015em;
  text-wrap: balance;
}
.bajada { margin: 1.2rem 0 0; font-size: 1.15rem; color: var(--tinta-suave); }
.fecha { margin-top: 1.6rem; font-family: var(--mono); font-size: .76rem; color: var(--tinta-tenue); }

article h2 {
  font-family: var(--serif); font-weight: 400; margin: 2.8rem 0 0;
  font-size: 1.6rem; line-height: 1.25;
}
article h3 { font-family: var(--serif); font-weight: 400; margin: 2rem 0 0; font-size: 1.22rem; }
article p { margin: 1.1rem 0 0; }
article ul { margin: 1.1rem 0 0; padding-left: 1.2rem; }
article li { margin-top: .5rem; }
article em { font-style: italic; }

/* La respuesta rápida arriba: mucha gente llega, la lee y se va. Que la
   encuentre sin buscarla. */
.respuesta {
  margin: 2rem 0 0; padding: 1.3rem 1.5rem;
  background: var(--papel-2); border-left: 4px solid var(--amarillo);
}
.respuesta p:first-child { margin-top: 0; }

/* Tablas de conjugación: se leen de un vistazo o no sirven. */
.tabla { margin: 1.6rem 0 0; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .96rem; }
caption {
  text-align: left; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-tenue); padding-bottom: .6rem;
}
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--linea); }
thead th { color: var(--rojo); font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
tbody th { font-weight: 400; color: var(--tinta-suave); }
td b { font-weight: 700; color: var(--tinta); }

.ejemplo { font-family: var(--serif); font-size: 1.1rem; }
.ejemplo span { color: var(--tinta-tenue); font-family: var(--sans); font-size: .92rem; }

/* --------------------------------------------------------------- cierre */
.nota-curso {
  margin: 3.5rem 0 0; padding: 1.6rem 1.7rem;
  border: 1px solid var(--linea); border-radius: 4px; background: var(--papel);
}
.nota-curso h2 { margin: 0; font-size: 1.3rem; }
.nota-curso p { color: var(--tinta-suave); font-size: .98rem; }
.boton {
  display: inline-block; margin-top: 1.3rem; padding: .8rem 1.4rem;
  background: var(--rojo); color: #fff; text-decoration: none;
  border-radius: 3px; font-weight: 700; font-size: .95rem;
}
.boton:hover { background: var(--rojo-hondo); }

/* --------------------------------------------------- índice del blog */
.entradas { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.6rem; }
.entradas li { border-top: 1px solid var(--linea); padding-top: 1.6rem; }
.entradas h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin: 0; }
.entradas h2 a { text-decoration: none; color: var(--tinta); }
.entradas h2 a:hover { color: var(--rojo); }
.entradas p { margin: .5rem 0 0; color: var(--tinta-suave); font-size: 1rem; }

footer {
  padding: 3rem 0 3.5rem; border-top: 1px solid var(--linea);
  font-size: .88rem; color: var(--tinta-tenue);
}
footer .fila { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }