/* El blog no cargaba ninguna fuente propia y caía en la del sistema.
   Ahora que los titulares van en la serif de la marca hay que servirla, o en
   cada ordenador saldría una letra distinta. Local, como en la portada. */
@font-face{
  font-family:"DM Serif Display"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fuentes/dmserif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Mismo sistema que la portada: una sola familia, azul, y solo modo claro.
   Si cambias la paleta, cambiala en los dos sitios. */
:root{
  --tinta:#1c1a17; --suave:#5d574e; --tenue:#6e675c; --linea:#e8e2d9;
  --fondo:#fffdfb; --papel:#f7f4ef;
  --azul-sv:#eef2fa; --azul-bd:#bcceec; --azul:#2160c9; --azul-fr:#1a4da1;
  --cta-txt:#ffffff;
  --sombra:0 1px 2px rgba(18,22,32,.04), 0 8px 24px rgba(18,22,32,.06);
}
html{color-scheme:light}

/* Misma escala que la portada. Si se toca una, hay que tocar la otra. */
:root{
  --tipo-titulo:"DM Serif Display",Georgia,"Times New Roman",serif;
  --tipo-texto:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --t-xs:.78rem; --t-sm:.89rem; --t-base:.97rem;
  --t-md:1.07rem; --t-lectura:1.08rem; --t-lg:1.22rem; --t-xl:1.42rem;
  --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px;
  --w-titular:22ch; --w-sumario:58ch; --w-texto:70ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--fondo); color:var(--tinta);
  font:400 17px/1.75 var(--tipo-texto);
  text-rendering:optimizeLegibility; overflow-wrap:break-word}
.env{max-width:1000px; margin:0 auto; padding:0 24px}
/* Igual que en la portada: el bloque estrecho se consigue con padding, no con
   max-width, para que el texto empiece en la misma vertical que el logo de la
   barra. Si se centra, el artículo arranca 130 px a la derecha del logo y la
   página entera parece dos maquetas pegadas. */
.estrecho{max-width:1000px}
@media (min-width:920px){ .env.estrecho{padding-right:256px} }
a{color:var(--azul)}
h1,h2,h3{font-family:var(--tipo-titulo); letter-spacing:-.012em; line-height:1.25; font-weight:400}

.barra{position:sticky; top:0; z-index:20;
  background:color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--linea)}
.barra .env{display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px}
.marca{display:flex; align-items:center; gap:9px;
  font-family:var(--tipo-titulo); font-weight:700; font-size:var(--t-lg);
  text-decoration:none; color:var(--tinta); white-space:nowrap; letter-spacing:-.01em}
.marca img{display:block; height:42px; width:auto}
.marca span{display:block}
.marca small{display:block; font-family:var(--tipo-texto); font-weight:400;
  font-size:var(--t-sm); color:var(--tenue); margin-top:1px}
.nav{display:flex; align-items:center; gap:22px}
.nav a{font-size:var(--t-base); text-decoration:none; color:var(--suave); font-weight:500}
.nav a:hover{color:var(--tinta)}
/* `.nav a` gana en especificidad a `.boton`: sin esto el texto del botón sale
   gris sobre naranja e ilegible. */
.nav a.boton{color:var(--cta-txt); font-weight:650; white-space:nowrap}
.nav a.boton:hover{color:var(--cta-txt)}
.solo-movil{display:none}
@media (max-width:700px){
  .nav a:not(.boton){display:none}
  .solo-movil{display:inline}
  .solo-ancho{display:none}
}

.boton{display:inline-block; background:var(--azul); color:var(--cta-txt); text-decoration:none;
  padding:14px 26px; border-radius:var(--r-sm); font-weight:650; font-size:var(--t-base); border:0;
  cursor:pointer; font-family:inherit; line-height:1.3;
  box-shadow:0 1px 2px rgba(30,58,138,.18), 0 8px 20px rgba(30,58,138,.26);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.boton:hover{filter:brightness(1.14); transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(30,58,138,.22), 0 12px 26px rgba(30,58,138,.32)}
.barra .boton{padding:9px 18px; font-size:var(--t-sm)}

/* --- indice --- */
.cabecera-blog{padding:64px 0 36px}
.cabecera-blog .rotulo{font-size:var(--t-sm); letter-spacing:0; font-weight:650;
  color:var(--azul); margin:0 0 12px; font-family:var(--tipo-texto)}
.cabecera-blog h1{font-size:clamp(1.9rem,4.4vw,2.7rem); margin:0 0 16px; font-weight:400; max-width:var(--w-titular)}
.cabecera-blog p{font-size:var(--t-md); color:var(--suave); max-width:var(--w-sumario); margin:0}

.lista{padding:0 0 70px; list-style:none; margin:0}
.lista li{border-top:1px solid var(--linea); padding:28px 0}
.lista li:last-child{border-bottom:1px solid var(--linea)}
.lista .meta{font-size:var(--t-sm); color:var(--tenue); margin:0 0 7px;
  display:flex; gap:8px 16px; flex-wrap:wrap}
.lista h2{font-size:var(--t-lg); margin:0 0 9px; font-weight:400}
.lista h2 a{color:var(--tinta); text-decoration:none}
.lista h2 a:hover{color:var(--azul)}
.lista p.sumario{margin:0; color:var(--suave); max-width:var(--w-texto); font-size:var(--t-base)}
.vacio{padding:40px 0 80px; color:var(--suave)}

/* --- articulo --- */
article{padding:56px 0 20px}
article .meta{font-size:var(--t-sm); color:var(--tenue); margin:0 0 16px;
  display:flex; gap:8px 16px; flex-wrap:wrap}
article h1{font-size:clamp(1.9rem,4.4vw,2.6rem); margin:0 0 20px; font-weight:400}
article .entradilla{font-size:var(--t-md); color:var(--suave); margin:0 0 38px;
  padding-bottom:28px; border-bottom:1px solid var(--linea)}
article h2{font-size:var(--t-xl); margin:42px 0 14px; font-weight:400}
article h3{font-size:var(--t-md); margin:32px 0 10px; font-weight:400}
/* El cuerpo del artículo en serif: es prosa larga y se lee mejor, y además es
   lo que hace que parezca escrito por alguien y no generado. */
article p, article li{font-family:var(--tipo-titulo); font-size:var(--t-lectura); line-height:1.72}
article p{margin:0 0 18px}
article ul,article ol{margin:0 0 18px; padding-left:24px}
article li{margin-bottom:9px}
article blockquote{margin:26px 0; padding:18px 24px; border-left:3px solid var(--azul);
  background:var(--azul-sv); border-radius:0 12px 12px 0}
article blockquote p{margin:0}
article code{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-xs);
  padding:1px 6px; font-size:.9em}
article pre{background:var(--papel); border:1px solid var(--linea); border-radius:var(--r-md);
  padding:18px 20px; overflow-x:auto}
article pre code{background:none; border:0; padding:0}
article hr{border:0; border-top:1px solid var(--linea); margin:36px 0}
.volver{display:inline-block; margin:30px 0 0; font-size:var(--t-base); text-decoration:none}

.cierre{background:var(--papel); border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea); padding:56px 0; margin-top:60px}
.cierre h2{font-size:var(--t-xl); margin:0 0 14px; font-weight:400}
.cierre p{color:var(--suave); margin:0 0 24px; max-width:var(--w-sumario)}

footer{padding:36px 0 52px; font-size:var(--t-sm); color:var(--tenue)}
footer .env{display:flex; flex-wrap:wrap; gap:14px 28px; justify-content:space-between}
footer a{color:var(--suave); text-decoration:none}
footer a:hover{color:var(--tinta)}