/* =========================================================================
   5-blog.css — el blog público
   -------------------------------------------------------------------------
   Lo cargan blog.html (el índice) y entrada.html (una nota). La home no lo
   descarga: no lo usa.

   LA DECISIÓN QUE GOBIERNA TODO ESTE ARCHIVO
   Una nota se lee, no se mira. Todo lo que estorbe a la lectura sobra:
   nada de columnas laterales, nada de anuncios flotantes, nada de ventanas
   que aparecen a los diez segundos. Una columna de texto, ancha para el ojo
   y no para la pantalla, y aire alrededor.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Portada del índice
   ------------------------------------------------------------------------- */
.blog-portada{
  padding-block:var(--e-6) var(--e-4);
  background:linear-gradient(180deg, var(--papel-2), var(--papel));
  border-bottom:1px solid var(--linea);
}
.blog-portada h1{font-size:var(--t-3); margin-bottom:var(--e-2)}
.blog-portada .kicker{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-50); margin-bottom:var(--e-2);
}
.entrada-sumario{font-size:var(--t-1); color:var(--tinta-70); font-weight:400; line-height:1.5}

/* -------------------------------------------------------------------------
   2. Filtros
   -------------------------------------------------------------------------
   position:sticky los deja pegados arriba al bajar por la lista. En un blog
   con cuarenta entradas, tener que subir hasta el principio para cambiar de
   categoría es la clase de fricción que hace que nadie use los filtros.
   ------------------------------------------------------------------------- */
.blog-filtros{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--linea);
  padding-block:var(--e-2);
}
.filtros-fila{display:flex; gap:var(--e-2); flex-wrap:wrap; align-items:center}
.buscador-blog{flex:1 1 15rem; min-width:0}
.buscador-blog input{
  width:100%; font-family:inherit; font-size:.97rem;
  border:2px solid var(--linea); border-radius:100px;
  padding:.65rem 1.1rem; background:var(--papel);
}
.buscador-blog input:focus{outline:none; border-color:var(--cc-azul)}
.conteo{font-size:.82rem; color:var(--tinta-50); margin-top:.6rem}

.pastillas{display:flex; flex-wrap:wrap; gap:.4rem}
.pastilla-filtro{
  font-family:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
  padding:.4rem .85rem; border-radius:100px;
  border:2px solid var(--linea); background:var(--papel); color:var(--tinta-70);
  transition:all var(--micro);
}
.pastilla-filtro:hover{border-color:var(--cc-azul); color:var(--cc-azul)}
.pastilla-filtro[aria-pressed="true"]{
  background:var(--cc-azul); border-color:var(--cc-azul); color:#fff;
}

/* -------------------------------------------------------------------------
   3. La rejilla de entradas
   -------------------------------------------------------------------------
   auto-fill + minmax es una reja que se acomoda sola: mete tantas columnas
   como quepan sin bajar de 300px cada una. Una columna en celular, dos en
   tableta, tres en escritorio — sin escribir una sola media query.
   ------------------------------------------------------------------------- */
.blog-lista{padding-block:var(--e-4) var(--e-7)}
.rejilla-entradas{
  display:grid; gap:var(--e-3);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.tarjeta-entrada{
  display:flex; flex-direction:column;
  background:var(--papel); border:1px solid var(--linea);
  border-radius:calc(var(--radio) * 1.6); overflow:hidden;
  transition:transform var(--transicion) var(--curva), box-shadow var(--transicion);
}
.tarjeta-entrada:hover{transform:translateY(-4px); box-shadow:var(--sombra)}

.tarjeta-entrada .foto{
  aspect-ratio:16/9; background:var(--papel-2);
  display:grid; place-items:center; overflow:hidden;
}
.tarjeta-entrada .foto img{width:100%; height:100%; object-fit:cover}
/* Cuando no hay foto: el isologo en grande y muy tenue. Un hueco gris se lee
   como error; un hueco con la marca se lee como decisión. */
.tarjeta-entrada .foto svg{width:42%; opacity:.16}

.tarjeta-entrada .texto{padding:var(--e-2); display:flex; flex-direction:column; flex:1; gap:.55rem}
.tarjeta-entrada .cat{
  font-size:.7rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cc-rojo-accion);
}
.tarjeta-entrada h2{font-size:1.14rem; line-height:1.25}
.tarjeta-entrada h2 a{color:var(--tinta); text-decoration:none}
.tarjeta-entrada h2 a:hover{color:var(--cc-azul); text-decoration:underline}
.tarjeta-entrada .resumen{font-size:.88rem; color:var(--tinta-70); line-height:1.55; flex:1}
.tarjeta-entrada .pie-tarjeta{
  font-size:.76rem; color:var(--tinta-50);
  padding-top:.5rem; border-top:1px solid var(--linea);
  display:flex; gap:.5rem; flex-wrap:wrap;
}

.cargando, .vacio{
  grid-column:1 / -1; text-align:center; padding:var(--e-6) var(--e-2);
  color:var(--tinta-50); font-size:1rem;
}

/* -------------------------------------------------------------------------
   4. Barra de progreso de lectura
   ------------------------------------------------------------------------- */
.progreso-lectura{
  position:fixed; top:0; left:0; right:0; height:4px; z-index:60;
  background:transparent; pointer-events:none;
}
.progreso-lectura i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--cc-amarillo),var(--cc-rojo));
}

/* -------------------------------------------------------------------------
   5. La nota
   -------------------------------------------------------------------------
   POR QUÉ EL TEXTO NO OCUPA TODO EL ANCHO
   Porque leer no es ver. Pasando de unos 75 caracteres por renglón, el ojo
   pierde el salto de línea y hay que releer. Los 62ch de --lectura son la
   medida que usan los libros desde hace cinco siglos, traducida a pantalla.
   Un texto a todo lo ancho de un monitor de 27 pulgadas es ilegible aunque
   se vea "aprovechado".
   ------------------------------------------------------------------------- */
.nota{padding-block:var(--e-5) var(--e-6)}

.nota-cabeza{margin-bottom:var(--e-4)}
.nota-cabeza .cat{
  display:inline-block; font-size:.72rem; font-weight:900;
  letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--cc-rojo-accion);
  padding:.28rem .65rem; border-radius:100px; margin-bottom:var(--e-2);
}
.nota-cabeza h1{font-size:var(--t-3); margin-bottom:var(--e-2)}
.nota-meta{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem;
  font-size:.86rem; color:var(--tinta-50);
  padding-bottom:var(--e-2); border-bottom:1px solid var(--linea);
}
.nota-meta b{color:var(--tinta-70); font-weight:700}

.nota-portada{margin-block:var(--e-3) var(--e-4)}
.nota-portada img{width:100%; border-radius:calc(var(--radio) * 1.6)}
.nota-portada figcaption{
  font-size:.78rem; color:var(--tinta-50); margin-top:.5rem; font-style:italic;
}

/* La entradilla, más grande que el cuerpo. Es la señal tipográfica de "esto
   es lo importante, si solo lees una cosa que sea esta". */
.nota-entradilla{
  font-size:var(--t-1); line-height:1.55; font-weight:600;
  color:var(--tinta-70); margin-bottom:var(--e-4);
}

.nota-cuerpo h2{font-size:var(--t-2); margin:var(--e-5) 0 var(--e-2)}
.nota-cuerpo p{margin-bottom:var(--e-2); line-height:1.75}

.nota-cuerpo blockquote{
  margin:var(--e-4) 0; padding:var(--e-2) 0 var(--e-2) var(--e-3);
  border-left:5px solid var(--cc-amarillo);
  font-size:var(--t-1); font-weight:700; line-height:1.45;
  color:var(--cc-azul-profundo);
}

.nota-cierre{
  margin-top:var(--e-5); padding-top:var(--e-3);
  border-top:2px solid var(--linea);
}

.nota-firma{
  margin-top:var(--e-4); padding:var(--e-3);
  background:var(--papel-2); border-radius:calc(var(--radio) * 1.6);
  font-size:.9rem;
}
.nota-firma b{display:block; font-size:1rem; margin-bottom:.15rem}
.nota-firma span{color:var(--tinta-50)}

.nota-etiquetas{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:var(--e-3)}
.nota-etiquetas a{
  font-size:.8rem; font-weight:700; text-decoration:none;
  padding:.3rem .7rem; border-radius:100px;
  background:var(--papel-2); border:1px solid var(--linea); color:var(--tinta-70);
}
.nota-etiquetas a:hover{border-color:var(--cc-azul); color:var(--cc-azul)}

/* Compartir. WhatsApp primero, y no por casualidad: para una organización de
   barrio en Monterrey es de lejos el canal donde algo se difunde de verdad. */
.compartir{
  margin-top:var(--e-4); padding-top:var(--e-3); border-top:1px solid var(--linea);
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
}
.compartir span{font-size:.85rem; font-weight:800; color:var(--tinta-70)}

/* -------------------------------------------------------------------------
   6. Esqueleto de carga
   -------------------------------------------------------------------------
   Barras grises que laten mientras llega el contenido. Ocupan el espacio que
   ocupará la nota, así que al llegar no se mueve nada de sitio.
   ------------------------------------------------------------------------- */
.esqueleto{
  max-width:var(--lectura); margin-inline:auto;
  padding-inline:clamp(1.15rem,4vw,2.5rem);
}
.esqueleto .linea, .esqueleto .bloque{
  background:linear-gradient(90deg, var(--papel-2) 25%, #e6edf2 50%, var(--papel-2) 75%);
  background-size:200% 100%;
  animation:latido 1.4s infinite;
  border-radius:var(--radio); margin-bottom:.9rem;
}
.esqueleto .linea{height:1.1rem}
.esqueleto .l-titulo{height:2.6rem; margin-bottom:.5rem}
.esqueleto .l-corta{width:40%}
.esqueleto .l-media{width:70%}
.esqueleto .bloque{height:14rem; margin-block:1.6rem}

@keyframes latido{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}

/* -------------------------------------------------------------------------
   7. Fallo y notas relacionadas
   ------------------------------------------------------------------------- */
.fallo{padding-block:var(--e-5)}
.fallo .kicker{
  font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cc-rojo-accion); margin-bottom:var(--e-2);
}
.fallo h1{font-size:var(--t-2); margin-bottom:var(--e-2)}
.fallo p{color:var(--tinta-70)}

.mas-notas{
  padding-block:var(--e-5) var(--e-7);
  background:var(--papel-2); border-top:1px solid var(--linea);
}

/* -------------------------------------------------------------------------
   8. Menos movimiento para quien lo pide
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .esqueleto .linea, .esqueleto .bloque{animation:none}
  .tarjeta-entrada:hover{transform:none}
}