/* ==========================================================================
   blog-v2.css — indice del blog, entrada y pagina con LA BARRA.
   Carga DESPUES de style.css y depende de sus tokens (--negro, --limon,
   --texto, --pad-x, --gap...). Aqui NO se redefinen: si un color cambia,
   cambia en un solo lugar.

   Nada de lo que hay aqui toca el muro de la portada (.homepage-container /
   .home-col). El indice del blog es otro contenedor (.blog-muro / .blog-col)
   con su propio motor.

   Reglas globales del tema que se REUSAN en vez de duplicarse: .chip,
   .volver, .cuerpo (tipografia de texto largo), .paginacion, .buscador,
   .firma-autor, .cta-pie, .lo-que-sigue.
   ========================================================================== */

/* ==========================================================================
   1. BANDA NEGRA DEL INDICE
   Misma banda que .banda-titulo de las paginas, pero con la cuenta de
   entradas al costado.
   ========================================================================== */
.banda-blog {
  margin-top: clamp(22px,3.5vw,34px);
  background: var(--negro);
  padding: clamp(28px,4vw,38px) var(--pad-x) clamp(26px,3.5vw,34px);
  transform: rotate(-.3deg);
}
.banda-blog-fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.banda-blog h1 {
  margin: 0 0 10px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(56px,9vw,110px); line-height: .82;
  color: var(--crema); text-transform: uppercase; text-wrap: pretty;
}
.banda-blog .bajada { margin: 0; max-width: 640px; font-size: clamp(17px,2vw,22px); line-height: 1.4; color: var(--limon); }
.banda-blog .cuenta {
  font-family: var(--titulo); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--naranja);
  border: 3px solid var(--borde-tenue); padding: 8px 12px; white-space: nowrap;
}

/* ==========================================================================
   2. FILTROS DE CATEGORIA
   Mismo trato que los chips del muro (.filtro), pero filtran en cliente.
   ========================================================================== */
.cats { padding: clamp(26px,3.5vw,38px) var(--pad-x) 0; display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.cats-rotulo {
  font-family: var(--stencil); font-weight: 900; font-size: clamp(15px,1.4vw,17px);
  letter-spacing: .2em; color: var(--negro); margin-right: 6px; text-transform: uppercase;
}
.cats button {
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase;
  padding: 9px 15px; border: 3px solid var(--negro);
  background: transparent; color: var(--negro); cursor: pointer;
}
.cats button.is-on { background: var(--negro); color: var(--naranja); }

/* ==========================================================================
   3. EL MURO DEL BLOG
   grid-auto-rows AUTO a proposito, igual que en el muro de la portada: si el
   JS no corre, esto sigue siendo un grid de columnas correcto. blog-masonry.js
   lo pone en 8px como su primera escritura.
   ========================================================================== */
.blog-seccion { padding: 28px var(--pad-x) 0; }
.blog-muro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap);
  row-gap: 0;
  grid-auto-rows: auto;
  grid-auto-flow: row dense;
  align-items: start;
}
.blog-col { margin-bottom: var(--gap); min-width: 0; }
.blog-col > a { display: block; }

/* Las rotaciones salen de la posicion: cero campos en el admin, y nunca dos
   vecinas con la misma. Como en el muro, ninguna pasa de 1.2deg. */
.blog-muro .blog-col:nth-child(3n+1) .tarjeta { transform: rotate(-.7deg); }
.blog-muro .blog-col:nth-child(3n+2) .tarjeta { transform: rotate(.9deg); }
.blog-muro .blog-col:nth-child(3n+3) .tarjeta { transform: rotate(-.45deg); }

/* ==========================================================================
   4. TARJETAS DEL BLOG — piezas compartidas
   ========================================================================== */
.tarjeta { display: block; }
.blog-muro .chip { font-size: 11px; letter-spacing: .16em; padding: 4px 9px; }
.tarjeta-meta {
  display: block;
  font-family: var(--titulo); font-weight: 700; font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.tarjeta-titulo { display: block; text-wrap: pretty; }
.tarjeta-extracto { display: block; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.tarjeta-mas {
  display: inline-block;
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase; padding-bottom: 2px;
}
.tarjeta img { display: block; width: 100%; height: auto; }

/* --- A · destacada negra --- */
.tarjeta--pin { background: var(--negro); padding: 24px 22px 22px; }
.tarjeta--pin .chip { background: var(--rosa); color: var(--negro); margin-bottom: 12px; }
.tarjeta--pin .tarjeta-titulo {
  font-family: var(--stencil); font-weight: 900; font-size: 46px; line-height: .9;
  color: var(--limon); text-transform: uppercase; margin-bottom: 12px;
}
.tarjeta--pin .tarjeta-extracto { color: var(--tenue); margin-bottom: 14px; }
.tarjeta--pin .tarjeta-pie { display: flex; align-items: center; gap: 12px; }
.tarjeta--pin .tarjeta-meta { color: #8a7c6e; }
.tarjeta--pin .tarjeta-linea { flex: 1; height: 3px; background: var(--borde-tenue); }
.tarjeta--pin .tarjeta-mas { color: var(--limon); }

/* --- B · spray rosa. El borde rasgado es clip-path, no una imagen. --- */
.tarjeta--spray {
  position: relative; background: var(--rosa); padding: 26px 24px 28px;
  clip-path: polygon(0 2%,8% 0,21% 1.6%,34% 0,48% 2%,61% .4%,75% 2.2%,88% .6%,100% 1.6%,
                     100% 97.4%,91% 100%,78% 98%,65% 99.6%,52% 97.6%,38% 100%,25% 98%,12% 99.6%,0 97.8%);
}
.tarjeta--spray::before {
  content: ''; position: absolute; inset: 0; opacity: .1;
  background-image: radial-gradient(var(--negro) 1px, transparent 1.2px);
  background-size: 6px 6px;
}
.tarjeta--spray > * { position: relative; }
.tarjeta--spray .chip { background: var(--negro); color: var(--limon); margin-bottom: 11px; }
.tarjeta--spray .tarjeta-titulo {
  font-family: var(--stencil); font-weight: 900; font-size: 38px; line-height: .94;
  color: var(--negro); text-transform: uppercase; margin-bottom: 12px;
}
.tarjeta--spray .tarjeta-extracto { color: var(--negro); font-weight: 500; }

/* --- C · papel de fanzine --- */
.tarjeta--papel { background: var(--crema); padding: 20px 20px 22px; }
.tarjeta--papel .tarjeta-meta { color: var(--negro); border-bottom: 3px solid var(--negro); padding-bottom: 8px; margin-bottom: 10px; }
.tarjeta--papel .tarjeta-titulo {
  font-family: var(--titulo); font-weight: 700; font-size: 27px; line-height: 1.05;
  color: var(--negro); text-transform: uppercase; margin-bottom: 10px;
}
.tarjeta--papel .tarjeta-extracto { color: var(--texto); margin-bottom: 13px; }
.tarjeta--papel .tarjeta-mas { color: var(--negro); border-bottom: 3px solid var(--rosa); }

/* --- D · lima --- */
.tarjeta--lima { background: var(--limon); padding: 22px 20px 20px; }
.tarjeta--lima .chip { background: var(--negro); color: var(--limon); margin-bottom: 12px; }
.tarjeta--lima .tarjeta-titulo {
  font-family: var(--stencil); font-weight: 900; font-size: 40px; line-height: .92;
  color: var(--negro); text-transform: uppercase; margin-bottom: 11px;
}
.tarjeta--lima .tarjeta-extracto { color: var(--texto); margin-bottom: 13px; }
.tarjeta--lima .tarjeta-mas { color: var(--negro); border-bottom: 3px solid var(--negro); }

/* --- E · amarilla --- */
.tarjeta--amarillo { background: var(--amarillo); padding: 22px 20px 20px; }
.tarjeta--amarillo .tarjeta-meta { color: var(--negro); margin-bottom: 11px; }
.tarjeta--amarillo .tarjeta-titulo {
  font-family: var(--titulo); font-weight: 700; font-size: 29px; line-height: 1.03;
  color: var(--negro); text-transform: uppercase; margin-bottom: 11px;
}
.tarjeta--amarillo .tarjeta-extracto { color: var(--texto); margin-bottom: 13px; }
.tarjeta--amarillo .tarjeta-mas { color: var(--negro); border-bottom: 3px solid var(--negro); }

/* --- F · foto a sangre sobre el naranja --- */
.tarjeta--foto img {
  aspect-ratio: 1/1; object-fit: cover; object-position: top center;
  clip-path: polygon(0 2%,8% 0,21% 2%,35% .3%,49% 2.2%,63% 0,77% 1.9%,90% .4%,100% 2%,
                     100% 98%,91% 100%,78% 98%,64% 99.7%,50% 97.7%,36% 100%,22% 98%,9% 99.6%,0 97.8%);
}
.tarjeta--foto .tarjeta-meta { color: var(--texto); margin-top: 11px; }
.tarjeta--foto .tarjeta-titulo {
  font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1.05;
  color: var(--negro); text-transform: uppercase; margin-top: 6px;
}
.tarjeta--foto .tarjeta-extracto { color: var(--texto); margin-top: 8px; }

/* --- G · regla negra, puro texto. Es el que recoge a las entradas sin
       imagen destacada: nunca deja un hueco. --- */
.tarjeta--regla { border-top: 5px solid var(--negro); padding-top: 12px; }
.tarjeta--regla .tarjeta-meta { color: var(--texto); margin-bottom: 8px; }
.tarjeta--regla .tarjeta-titulo {
  font-family: var(--titulo); font-weight: 700; font-size: 26px; line-height: 1.05;
  color: var(--negro); text-transform: uppercase; margin-bottom: 9px;
}
.tarjeta--regla .tarjeta-extracto { color: var(--texto); margin-bottom: 12px; }
.tarjeta--regla .tarjeta-mas { color: var(--negro); border-bottom: 3px solid var(--negro); }

/* --- H · negra con titulo rosa --- */
.tarjeta--negro-rosa { background: var(--negro); padding: 22px 20px 20px; }
.tarjeta--negro-rosa .tarjeta-meta { color: var(--naranja); margin-bottom: 11px; }
.tarjeta--negro-rosa .tarjeta-titulo {
  font-family: var(--stencil); font-weight: 900; font-size: 38px; line-height: .92;
  color: var(--rosa); text-transform: uppercase; margin-bottom: 11px;
}
.tarjeta--negro-rosa .tarjeta-extracto { color: var(--tenue); margin-bottom: 13px; }
.tarjeta--negro-rosa .tarjeta-mas { color: var(--rosa); border-bottom: 3px solid var(--rosa); }

/* ==========================================================================
   5. ENTRADA Y PAGINA CON BARRA
   El orden de los tracks importa: minmax(0,1fr) primero. Al reves el texto se
   queda con su medida ANTES de que la barra reciba nada, y entre 760 y 1220px
   de ventana la barra se muere en 54px.
   ========================================================================== */
.entrada-envoltura { padding: clamp(28px,4vw,44px) var(--pad-x) 0; }
.entrada-cabeza { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.volver--suave { color: var(--texto); border-bottom-color: var(--texto); }

.con-barra {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(270px,340px);
  gap: clamp(28px,4vw,54px);
  align-items: start;
}
.con-barra > * { min-width: 0; }
/* Todo lo de la columna de lectura mide lo mismo: el texto, el PASALO, la
   firma y el CTA. Si el texto se topa en 640 y el PASALO se va a 716, las dos
   cajas quedan cachetonas una contra otra.
   720px son ~70 caracteres por renglon: adentro del rango comodo de 45-75, y
   es la misma medida que el tema ya usaba para las paginas. Mas ancho no. */
.con-barra .entrada,
.con-barra .cuerpo,
.con-barra .pasalo,
.con-barra .firma-autor,
.con-barra .cta-pie,
.sin-barra .cuerpo { max-width: 720px; }
.sin-barra { max-width: 760px; }

.entrada-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.entrada-meta .chip { background: var(--negro); color: var(--limon); }
.entrada-meta .tarjeta-meta { font-size: 12px; color: var(--negro); }
.entrada-titulo {
  margin: 0 0 20px;
  font-family: var(--stencil); font-weight: 900;
  font-size: clamp(48px,7.5vw,82px); line-height: .86;
  color: var(--negro); text-transform: uppercase; text-wrap: pretty;
}
@media (max-width: 900px) {
  .con-barra { grid-template-columns: 1fr; gap: 34px; }
}

/* La columna angosta de una página: la imagen destacada arriba, la barra
   abajo. Son dos piezas y un solo track del grid. */
.barra-columna { display: flex; flex-direction: column; gap: 26px; }

/* ==========================================================================
   6. LA BARRA
   Reordenar es escribir "order": la barra es flex-column a proposito. Mover
   nodos del DOM reiniciaria el iframe del video y rompe el lazy-load.
   ========================================================================== */
.barra { display: flex; flex-direction: column; gap: 18px; }
.barra-cabeza { display: flex; align-items: center; gap: 10px; }
.barra-rotulo { font-family: var(--stencil); font-weight: 900; font-size: 16px; letter-spacing: .2em; color: var(--negro); text-transform: uppercase; }
.barra-linea { flex: 1; height: 3px; background: var(--negro); }
.barra-acomodar {
  font-family: var(--titulo); font-weight: 700; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--negro); background: transparent; border: 3px solid var(--negro);
  padding: 5px 9px; cursor: pointer;
}
.barra-acomodar.is-on { background: var(--rosa); }

.widget-caja { display: flex; flex-direction: column; }
.widget-mover { display: none; align-items: center; gap: 6px; margin-bottom: 7px; }
.is-acomodando .widget-mover { display: flex; }
.widget-mover span {
  flex: 1;
  font-family: var(--titulo); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--texto);
}
.widget-mover button { background: var(--negro); color: var(--limon); border: 0; font-size: 13px; line-height: 1; padding: 6px 9px; cursor: pointer; }
.widget-mover button[disabled] { opacity: .28; cursor: default; }

.wg { padding: 20px 18px 18px; }
.wg h3 { text-transform: uppercase; }

.wg-whats { background: var(--limon); transform: rotate(-.6deg); }
.wg-whats .chip { background: var(--negro); color: var(--limon); margin-bottom: 10px; }
.wg-whats h3 { margin: 0 0 8px; font-family: var(--stencil); font-weight: 900; font-size: 38px; line-height: .88; color: var(--negro); }
.wg-whats p { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #1a1509; }
.wg-whats .boton {
  display: block; text-align: center; background: var(--negro); color: var(--limon);
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; padding: 13px 14px;
}
.wg-whats .boton:hover { background: var(--rosa); color: var(--negro); }

.wg-taller { background: var(--negro); transform: rotate(.5deg); }
.wg-taller .chip { background: var(--limon); color: var(--negro); margin-bottom: 10px; }
.wg-taller h3 { margin: 0 0 8px; font-family: var(--stencil); font-weight: 900; font-size: 34px; line-height: .9; color: var(--crema); }
.wg-taller p { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--tenue); }
.wg-taller .enlace-sub { color: var(--limon); border-bottom-color: var(--limon); font-size: 13px; }

.wg-cita {
  position: relative; background: var(--rosa); padding: 24px 20px 26px; transform: rotate(1deg);
  clip-path: polygon(0 2%,8% 0,21% 1.6%,34% 0,48% 2%,61% .4%,75% 2.2%,88% .6%,100% 1.6%,
                     100% 97.4%,91% 100%,78% 98%,65% 99.6%,52% 97.6%,38% 100%,25% 98%,12% 99.6%,0 97.8%);
}
.wg-cita::before {
  content: ''; position: absolute; inset: 0; opacity: .1;
  background-image: radial-gradient(var(--negro) 1px, transparent 1.2px);
  background-size: 6px 6px;
}
.wg-cita p {
  position: relative; margin: 0 0 12px;
  font-family: var(--stencil); font-weight: 900; font-size: 28px; line-height: 1;
  color: var(--negro); text-transform: uppercase; text-wrap: pretty;
}
.wg-cita .chip { position: relative; background: var(--negro); color: var(--limon); }

.wg-libro { display: block; padding: 0; transform: rotate(-.5deg); }
.wg-libro .chip { background: var(--negro); color: var(--amarillo); }
.wg-libro .marco-libro { display: block; background: var(--negro); padding: 7px 7px 9px; }
.wg-libro .titulo { display: block; margin-top: 7px; font-family: var(--titulo); font-weight: 700; font-size: 18px; color: var(--crema); text-transform: uppercase; }
.wg-libro .mas { display: block; margin-top: 6px; font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .11em; text-transform: uppercase; color: var(--amarillo); }

.wg-pdf { display: block; padding: 0; }
.wg-pdf img {
  aspect-ratio: 1/1; object-fit: cover; object-position: top center;
  clip-path: polygon(0 2%,8% 0,21% 2%,35% .3%,49% 2.2%,63% 0,77% 1.9%,90% .4%,100% 2%,
                     100% 98%,91% 100%,78% 98%,64% 99.7%,50% 97.7%,36% 100%,22% 98%,9% 99.6%,0 97.8%);
}
.wg-pdf .titulo { display: block; margin-top: 9px; font-family: var(--titulo); font-weight: 700; font-size: 18px; line-height: 1.1; color: var(--negro); text-transform: uppercase; }
.wg-pdf .chip { margin-top: 7px; background: var(--negro); color: var(--limon); }

.wg-leido { background: var(--crema); transform: rotate(-.4deg); padding: 18px 18px 20px; }
.wg-leido .wg-rotulo {
  display: block; margin-bottom: 13px;
  font-family: var(--stencil); font-weight: 900; font-size: 24px;
  letter-spacing: .08em; color: var(--negro); text-transform: uppercase;
}
.wg-leido ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.wg-leido li { display: flex; gap: 11px; }
.wg-leido b { font-family: var(--stencil); font-weight: 900; font-size: 26px; line-height: .9; color: var(--rosa); }
.wg-leido a { font-family: var(--titulo); font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--negro); text-transform: uppercase; }

.wg-video { background: var(--negro); padding: 9px 9px 12px; transform: rotate(.6deg); }
.wg-video .marco-video { position: relative; width: 100%; aspect-ratio: 9/16; overflow: hidden; background: #231c17; }
.wg-video .marco-video img,
.wg-video .marco-video iframe,
.wg-video .marco-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wg-video .wg-rotulo { display: block; margin-top: 9px; font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: .13em; color: var(--limon); text-transform: uppercase; }

/* ==========================================================================
   7. PASALO — compartir propio, sin plugin ni logos de marca
   ========================================================================== */
.pasalo { margin-top: 36px; background: var(--negro); padding: 22px 20px 20px; transform: rotate(-.4deg); }
.pasalo-cabeza { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pasalo-rotulo {
  font-family: var(--stencil); font-weight: 900; font-size: clamp(26px,3vw,34px);
  line-height: 1; letter-spacing: .06em; color: var(--limon); text-transform: uppercase;
}
.pasalo-linea { flex: 1; height: 3px; background: var(--borde-tenue); }
.pasalo-nota { font-family: var(--titulo); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8a7c6e; }
.pasalo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.pasalo-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; color: var(--crema); border: 3px solid var(--borde-tenue);
  font-family: var(--titulo); font-weight: 700; font-size: 14px;
  letter-spacing: .11em; text-transform: uppercase; padding: 11px 12px; cursor: pointer;
}
.pasalo-btn:hover { border-color: var(--limon); color: var(--limon); }
.pasalo-btn--wa { background: var(--limon); color: var(--negro); border-color: var(--limon); padding: 14px 12px; }
.pasalo-btn--wa:hover { background: var(--crema); border-color: var(--crema); color: var(--negro); }
.pasalo-btn--copy { background: var(--rosa); color: var(--negro); border-color: var(--rosa); padding: 14px 12px; }
.pasalo-btn--copy:hover { background: var(--crema); border-color: var(--crema); color: var(--negro); }
.pasalo-btn--copy.is-listo { background: var(--limon); border-color: var(--limon); }

@media (max-width: 620px) { .pasalo-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .pasalo-grid { grid-template-columns: 1fr; } }