/* ═══════════════════════════════════════════════════════════════
   BLOG — la lista de artículos y la página de cada uno.

   Medidas tomadas de la referencia (captura de 2528 px de ancho):
     · fondo gris muy claro, tarjetas BLANCAS. El contraste entre las
       dos es todo el sistema: no hay bordes ni sombras marcadas.
     · esquinas grandes, ~24 px en la tarjeta y ~16 en la foto
     · la foto va con margen dentro de la tarjeta, no a sangre: se ve
       el blanco alrededor por los cuatro lados
     · titular de la página enorme, alineado a la izquierda
     · etiquetas en píldora con contorno fino
     · fecha y minutos de lectura en gris, separados por un punto
   ═══════════════════════════════════════════════════════════════ */

.bl {
  position: relative;
  background: var(--bg);
  padding: calc(var(--nav-alto) + clamp(30px, 6vh, 80px)) var(--hd-pad)
           clamp(50px, 8vh, 110px);
}

.bl-dentro {
  max-width: var(--ancho-max);
  margin: 0 auto;
}


/* ── El encabezado ─────────────────────────────────────────────── */

/* Enorme de verdad. En la referencia ocupa casi la mitad del ancho de
   la ventana él solo, así que el tamaño se ata al ancho —vw— y no a una
   escala de texto: es una pieza gráfica, no un titular corriente.
   El interlineado baja de 1 porque a este cuerpo el espacio entre
   líneas de una fuente normal abre un hueco enorme. */
.bl-titular {
  font-size: clamp(56px, 11vw, 190px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .88;
  color: var(--tinta-alta);
  margin-bottom: clamp(36px, 6vh, 90px);
}

/* Dos columnas desiguales: la de la izquierda es una nota al margen y
   la de la derecha el texto de verdad. La izquierda ocupa un tercio y
   se queda ahí; el resto se lo lleva la derecha. */
.bl-entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(24px, 5vw, 90px);
  margin-bottom: clamp(46px, 8vh, 100px);
}

.bl-entrada-izda {
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--muted);
}

.bl-entrada-dcha {
  font-size: clamp(19px, 1.75vw, 30px);
  line-height: 1.42;
  letter-spacing: -.015em;
  color: var(--tinta-alta);
}


/* ── La rejilla ────────────────────────────────────────────────── */
.bl-rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
}

/* Mientras se traen las tarjetas de la otra página. No se vacía la
   rejilla: se atenúa y se le quita el ratón, así el alto de la página
   no se desploma para volver a crecer un instante después. Ese salto es
   lo que hace que una lista repaginada se sienta rota aunque funcione.

   Y no se pone un girador: la petición son unos kilobytes de HTML y
   suele acabar antes de que un girador termine de aparecer. */
.bl-rejilla.esta-cambiando {
  opacity: .4;
  pointer-events: none;
  transition: opacity .2s ease;
}


/* La tarjeta entera es el enlace. Se levanta un poco al acercarse: es
   el único aviso de que se puede pulsar, porque aquí no hay botón. */
.bl-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border-radius: clamp(16px, 1.5vw, 26px);
  padding: clamp(9px, .8vw, 13px);
  text-decoration: none;
  color: inherit;
  /* opacity va nombrada aquí a propósito. .reveal declara su propia
     transición en base.css, pero esta regla llega después en la cascada
     con la misma especificidad y la sustituye entera: si no se nombra,
     la tarjeta aparece de golpe en lugar de fundirse al entrar. */
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .45s ease;
}
.bl-tarjeta:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(26, 23, 20, .09);
}

/* La foto lleva su propio radio, menor que el de la tarjeta. Un radio
   interior igual al exterior se ve más redondo de la cuenta; el truco
   de siempre es restarle el relleno. */
.bl-foto {
  border-radius: clamp(11px, 1.1vw, 19px);
  overflow: hidden;
  background: #e8e9ec;
  aspect-ratio: 4 / 3;
}

.bl-foto picture { display: contents; }

.bl-foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.bl-tarjeta:hover .bl-foto img { transform: scale(1.045); }

.bl-cuerpo {
  padding: clamp(14px, 1.3vw, 22px) clamp(10px, 1vw, 16px)
           clamp(16px, 1.5vw, 24px);
}


/* ── Las etiquetas ─────────────────────────────────────────────── */
.bl-etiquetas {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 clamp(12px, 1.2vw, 18px); padding: 0;
}

.bl-etiqueta {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: clamp(11.5px, .85vw, 13.5px);
  line-height: 1.3;
  color: var(--tinta-alta);
  white-space: nowrap;
}


/* ── El texto de la tarjeta ────────────────────────────────────── */
.bl-titulo {
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.28;
  color: var(--tinta-alta);
  margin-bottom: 8px;
}

.bl-meta {
  display: flex; align-items: center; gap: 9px;
  font-size: clamp(12.5px, .95vw, 14.5px);
  color: var(--muted);
  margin-bottom: clamp(11px, 1.1vw, 16px);
}
.bl-punto { color: var(--dim); }

.bl-extracto {
  font-size: clamp(13.5px, 1vw, 15.5px);
  line-height: 1.6;
  color: var(--tinta);
}


/* ── La paginación ─────────────────────────────────────────────── */
.bl-paginas {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: clamp(40px, 7vh, 84px);
}

/* Redondas y del mismo alto, con o sin número dentro. "Next" es más
   ancha porque lleva palabra: por eso el ancho es mínimo y no fijo. */
.bl-pag {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: rgba(26, 23, 20, .055);
  color: var(--tinta-alta);
  text-decoration: none;
  font-size: 15px; font-weight: 500;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.bl-pag:hover { background: rgba(26, 23, 20, .1); }

/* La actual va hueca y con el contorno de acento: se distingue de las
   demás por la forma, no solo por el color. */
.bl-pag.es-actual {
  background: transparent;
  border-color: var(--acento);
  color: var(--acento);
}


/* ── La suscripción ────────────────────────────────────────────── */
.bl-boletin {
  background: var(--card);
  border-radius: clamp(18px, 1.8vw, 30px);
  padding: clamp(28px, 4vw, 58px) clamp(24px, 3.5vw, 56px);
  margin-top: clamp(40px, 7vh, 84px);
}

.bl-boletin-titulo {
  font-size: clamp(26px, 3.4vw, 54px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--tinta-alta);
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

.bl-boletin-nota {
  font-size: clamp(14px, 1.05vw, 17px);
  line-height: 1.65;
  color: var(--tinta);
  margin-bottom: clamp(20px, 2.4vw, 34px);
}

/* El botón vive DENTRO del campo, como en la referencia. El campo lleva
   relleno a la derecha para dejarle sitio; sin eso el texto que se
   escribe se metería por debajo del botón. */
.bl-boletin-forma {
  position: relative;
  max-width: 470px;
}

.bl-boletin-campo {
  width: 100%;
  height: 58px;
  padding: 0 132px 0 24px;
  border: 1px solid transparent;
  border-radius: 99px;
  background: var(--bg);
  color: var(--tinta-alta);
  font: inherit;
  font-size: 15px;
  transition: border-color .3s ease;
}
.bl-boletin-campo::placeholder { color: var(--muted); }
.bl-boletin-campo:focus { outline: none; border-color: var(--acento); }

.bl-boletin-btn {
  position: absolute;
  top: 6px; right: 6px; bottom: 6px;
  padding: 0 26px;
  border: 0; border-radius: 99px;
  background: var(--acento);
  color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: filter .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.bl-boletin-btn:hover { filter: brightness(1.08); transform: scale(1.03); }

.bl-boletin-aviso {
  min-height: 22px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--acento);
}

/* Para el lector de pantalla, no para la vista. No se usa display:none
   porque eso lo saca también del lector, y entonces el campo se queda
   sin etiqueta. */
.bl-visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}


/* ── Tamaños ───────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .bl-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* Dos columnas de entradilla en un teléfono dejan renglones de cuatro
     palabras. Se apilan, y la nota al margen pasa a ir debajo. */
  .bl-entrada { grid-template-columns: 1fr; }
  .bl-rejilla { grid-template-columns: 1fr; }

  .bl-boletin-campo { padding-right: 24px; height: 54px; }
  /* El botón sale de dentro del campo: a este ancho, campo y botón
     compartiendo caja dejan sitio para tres letras. */
  .bl-boletin-btn {
    position: static;
    width: 100%; height: 50px;
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bl-tarjeta, .bl-foto img, .bl-boletin-btn { transition: none; }
  .bl-tarjeta:hover { transform: none; }
  .bl-tarjeta:hover .bl-foto img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   EL ARTÍCULO — /blog/<slug>

   Una sola columna estrecha. La medida manda sobre todo lo demás: un
   párrafo a 1440 px de ancho no se lee, se recorre con la vista y se
   pierde el renglón al volver. Entre 62 y 72 caracteres es donde el ojo
   encuentra solo el principio de la línea siguiente.
   ═══════════════════════════════════════════════════════════════ */

.ar {
  position: relative;
  background: var(--bg);
  padding: calc(var(--nav-alto) + clamp(28px, 5vh, 70px)) var(--hd-pad)
           clamp(50px, 8vh, 110px);
}

.ar-dentro {
  max-width: 820px;
  margin: 0 auto;
}


/* ── La cabecera ───────────────────────────────────────────────── */
.ar-etiquetas {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0 0 clamp(16px, 2vh, 26px); padding: 0;
}

.ar-titulo {
  font-size: clamp(31px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.06;
  color: var(--tinta-alta);
  margin-bottom: clamp(12px, 1.6vh, 20px);
}

.ar-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--muted);
  margin-bottom: clamp(26px, 4vh, 48px);
}


/* ── La portada ────────────────────────────────────────────────── */
.ar-portada {
  border-radius: clamp(14px, 1.4vw, 24px);
  overflow: hidden;
  background: #e8e9ec;
  aspect-ratio: 16 / 9;
  margin-bottom: clamp(30px, 5vh, 60px);
}
.ar-portada picture { display: contents; }
.ar-portada img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}


/* ── El texto ──────────────────────────────────────────────────── */

/* La entradilla va más grande que el cuerpo y en tinta fuerte: es el
   párrafo que decide si se sigue leyendo, así que se lee primero. */
.ar-guia {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--tinta-alta);
  padding-bottom: clamp(18px, 3vh, 30px);
  margin-bottom: clamp(18px, 3vh, 30px);
  border-bottom: 1px solid var(--border);
}

.ar-p {
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.75;
  color: var(--tinta);
  margin-bottom: clamp(16px, 2.4vh, 24px);
}

/* Más aire ARRIBA que abajo, y bastante más. Un subtítulo pertenece al
   texto que le sigue, no al que deja atrás; repartir el espacio por
   igual lo deja flotando entre los dos y se pierde a quién encabeza. */
.ar-sub {
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
  color: var(--tinta-alta);
  margin: clamp(30px, 5vh, 52px) 0 clamp(11px, 1.6vh, 16px);
}

/* Sin comillas dibujadas ni cursiva: una barra de acento a la izquierda
   y cuerpo grande bastan para que se lea como un aparte. */
.ar-cita {
  border-left: 3px solid var(--acento);
  padding-left: clamp(16px, 2vw, 26px);
  margin: clamp(26px, 4vh, 44px) 0;
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--tinta-alta);
}

.ar-lista {
  list-style: none;
  margin: 0 0 clamp(16px, 2.4vh, 24px);
  padding: 0;
}

.ar-lista li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(15.5px, 1.2vw, 17.5px);
  line-height: 1.7;
  color: var(--tinta);
  margin-bottom: 10px;
}

/* La viñeta se dibuja a mano para poder darle el color de acento y
   colocarla a la altura de la primera línea. El punto que pone la lista
   por su cuenta no admite ni una cosa ni la otra. */
.ar-lista li::before {
  content: "";
  position: absolute;
  left: 2px; top: .72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
}


/* ── El siguiente ──────────────────────────────────────────────── */
.ar-siguiente {
  display: flex; align-items: center; gap: 14px;
  margin-top: clamp(36px, 6vh, 70px);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
  background: var(--card);
  border-radius: clamp(14px, 1.4vw, 22px);
  text-decoration: none;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.ar-siguiente:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(26, 23, 20, .09);
}

.ar-siguiente-rotulo {
  flex-shrink: 0;
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}

.ar-siguiente-titulo {
  flex: 1;
  font-size: clamp(15px, 1.3vw, 19px); font-weight: 700;
  letter-spacing: -.018em; line-height: 1.3;
  color: var(--tinta-alta);
}

.ar-siguiente-flecha {
  flex-shrink: 0;
  width: 20px; height: 20px;
  fill: none; stroke: var(--tinta-alta); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.ar-siguiente:hover .ar-siguiente-flecha { transform: translateX(5px); }

.ar-volver {
  display: inline-block;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: 14px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  transition: color .3s ease;
}
.ar-volver:hover { color: var(--acento); }


@media (max-width: 620px) {
  /* En columna: a este ancho, rótulo y titular en la misma fila dejan
     al titular tres palabras por renglón. */
  .ar-siguiente { flex-wrap: wrap; gap: 8px; }
  .ar-siguiente-rotulo { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-siguiente, .ar-siguiente-flecha { transition: none; }
  .ar-siguiente:hover { transform: none; }
  .ar-siguiente:hover .ar-siguiente-flecha { transform: none; }
}