/* BOCETO — Blog v2 (15/10): títulos que dicen de qué va cada artículo, resumen y tamaños como «Cómo funciona». */

.antetitulo { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--z-rojo-oscuro); margin-bottom: 14px; }

/* ---------- Portada ---------- */
.blog { max-width: var(--ancho); margin: 0 auto; padding: 120px 24px 140px; }
.blog__cabeza { max-width: 720px; margin-bottom: 44px; }
.blog__cabeza h1 { font-size: clamp(40px, 4.4vw, 60px); margin-bottom: 14px; }
.blog__entradilla { font-size: 18px; line-height: 1.55; color: var(--z-gris-oscuro); }

.articulos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.tarjeta:first-child { grid-column: 1 / -1; }
.tarjeta__enlace { display: grid; height: 100%; border-radius: 24px; background: var(--z-papel); overflow: hidden; transition: background-color 250ms, transform 300ms var(--z-ease-mueve); }
.tarjeta:first-child .tarjeta__enlace { grid-template-columns: 1fr 1.6fr; }
a.tarjeta__enlace:hover { background: #EFEDEA; transform: translateY(-3px); }
a.tarjeta__enlace:focus-visible { outline: 2px solid var(--z-foco); outline-offset: 4px; }
.tarjeta__visual { background: var(--z-tinta); color: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.mini-ad { display: flex; align-items: center; gap: 18px; }
.mini-ad span { display: grid; gap: 4px; font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.7); max-width: 12ch; }
.mini-ad b { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.04em; font-size: 64px; line-height: 1; color: #fff; }
.mini-ad .con b { color: var(--z-rojo-claro); }
.mini-ad i { font-style: normal; font-size: 26px; color: rgba(255,255,255,.4); }
.tarjeta__visual p { font-size: 13px; color: rgba(255,255,255,.6); }
.tarjeta__texto { padding: 32px; display: flex; flex-direction: column; gap: 12px; }
.tarjeta__tema { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--z-tinte-acento); color: var(--z-acento-texto-pie); }
.tarjeta__titulo { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(22px, 2vw, 30px); line-height: 1.12; }
.tarjeta__resumen { font-size: 16px; line-height: 1.55; color: var(--z-gris-oscuro); }
.tarjeta__meta { font-size: 13px; color: var(--z-gris-medio); }
.tarjeta__leer { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--z-tinta); }
.tarjeta__leer i { font-style: normal; color: var(--z-rojo); display: inline-block; transition: transform 250ms var(--z-ease-mueve); }
a.tarjeta__enlace:hover .tarjeta__leer i { transform: translateX(5px); }
.tarjeta--pronto .tarjeta__enlace { background: transparent; border: 1.5px dashed var(--z-linea); }
.tarjeta--pronto .tarjeta__tema { background: var(--z-papel); color: var(--z-gris-medio); }
.tarjeta--pronto .tarjeta__titulo { color: var(--z-gris-medio); }

/* ---------- Artículo ---------- */
.leido { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; }
.leido i { display: block; height: 100%; background: var(--z-rojo); transform: scaleX(var(--leido, 0)); transform-origin: left; }
.articulo { max-width: var(--ancho); margin: 0 auto; padding: 120px 24px 140px; }
.articulo__cabeza { max-width: 820px; margin-bottom: 56px; }
.volver { display: inline-block; font-size: 14px; color: var(--z-gris-medio); margin-bottom: 24px; }
.volver:hover { color: var(--z-tinta); }
.articulo__cabeza h1 { font-size: clamp(34px, 3.8vw, 52px); line-height: 1.04; margin-bottom: 18px; }
.articulo__entradilla { font-size: 19px; line-height: 1.55; color: var(--z-gris-oscuro); max-width: 56ch; }
.articulo__meta { margin-top: 18px; font-size: 14px; color: var(--z-gris-medio); }
.articulo__cuerpo { display: grid; grid-template-columns: 260px minmax(0, 680px); gap: 72px; }
.fuentes { position: sticky; top: 110px; align-self: start; padding-top: 4px; }
.fuentes__titulo { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--z-gris-medio); margin-bottom: 14px; }
.fuentes ol { list-style: none; padding: 0; display: grid; gap: 10px; }
.fuentes a { display: grid; grid-template-columns: 26px 1fr; gap: 10px; padding: 13px; border-radius: 14px; font-size: 13px; line-height: 1.45; color: var(--z-gris-oscuro);
  background: var(--z-papel); transition: background-color 250ms, color 250ms, transform 250ms var(--z-ease-mueve); }
.fuentes b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; font-family: 'Switzer'; font-size: 12px; color: var(--z-tinta); }
.fuentes li.activa a { background: var(--z-tinta); color: #fff; transform: translateX(6px); }
.fuentes li.activa b { background: var(--z-rojo); color: #fff; }
.texto h2 { font-family: 'Switzer'; font-weight: 800; letter-spacing: -0.03em; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; margin: 44px 0 14px; }
.texto > h2:first-child { margin-top: 0; }
.texto p { font-size: 18px; line-height: 1.7; color: var(--z-gris-oscuro); margin-bottom: 16px; }
.texto .ad { margin: 24px 0 32px; }
.texto .ad p { margin: 0; font-size: 13px; line-height: 1.5; }
.cita { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 999px; vertical-align: 3px;
  font: 700 11px 'Switzer', sans-serif; background: var(--z-tinte-acento); color: var(--z-acento-texto-pie); transition: background-color 200ms, color 200ms; }
.cita:hover { background: var(--z-rojo); color: #fff; }
.no-sabemos { margin: 44px 0; padding: 32px; border-radius: 24px; background: var(--z-tinta); color: #fff; }
.no-sabemos h2 { margin-top: 0 !important; color: #fff; }
.no-sabemos ul { list-style: none; padding: 0; display: grid; gap: 14px; }
.no-sabemos li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.8); }
.no-sabemos li::before { content: "?"; position: absolute; left: 0; top: 1px; font: 800 16px 'Switzer', sans-serif; color: var(--z-rojo-claro); }
.no-sabemos b { color: #fff; }
.no-sabemos .cita { background: rgba(255,255,255,.12); color: #fff; }
.siguiente { margin-top: 52px; padding-top: 32px; border-top: 1px solid var(--z-linea); display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.siguiente__tarjeta { flex: 1 1 260px; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 22px; border-radius: 18px; background: var(--z-papel); transition: background-color 250ms; }
.siguiente__tarjeta span { font-size: 13px; color: var(--z-gris-medio); }
.siguiente__tarjeta strong { grid-column: 1; font-family: 'Switzer'; font-size: 18px; letter-spacing: -0.02em; }
.siguiente__tarjeta i { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-style: normal; font-size: 22px; color: var(--z-rojo); transition: transform 250ms var(--z-ease-mueve); }
.siguiente__tarjeta:hover { background: var(--z-tinte-acento); }
.siguiente__tarjeta:hover i { transform: translateX(6px); }

@media (prefers-reduced-motion: reduce) { .tarjeta__enlace, .fuentes a { transition: none; } }

@media (max-width: 900px) {
  .blog, .articulo { padding: 100px 16px 96px; }
  .articulos { grid-template-columns: 1fr; gap: 14px; }
  .tarjeta:first-child .tarjeta__enlace { grid-template-columns: 1fr; }
  .tarjeta__visual, .tarjeta__texto { padding: 24px; }
  .mini-ad b { font-size: 48px; }
  .articulo__cabeza h1 { font-size: 32px; }
  .articulo__cuerpo { grid-template-columns: 1fr; gap: 0; }
  .fuentes { position: static; order: 2; margin-top: 40px; }
  .texto p { font-size: 17px; }
  .no-sabemos { padding: 24px 20px; }
}