/* Lifting estético del blog (03/10/2026, publicado). Va encima de vds.css y solo cambia la estética.
   Patrón completo: diseno/patron-estetico.md.
   Para volver atrás: sacar la línea que carga este archivo en layouts/_partials/vds-head.html (o borrar este archivo).
   Idea: editorial universitaria + consultora chica. Esquinas parejas y chicas, sin sombras corridas,
   títulos menos pesados, color en planos rectos, listas con líneas finas. */

:root { --radio: 4px; --linea-fina: #d6dbf0; }

/* Títulos: un punto menos de peso, más sobrios */
.texto h1, .lista-cabeza h1, .col-cabecera h1, .portada-intro h1,
.item-titulo, .entrada-titulo, .lomo-nombre, .ult-titulo, .vecino-titulo, .boton-todos span:first-child { font-weight: 500; }

/* Encabezado: dos botones hermanos y simétricos: mismo ancho, alto, letra, tamaño y esquina.
   Guazú lleno (azul); BLOG blanco con borde. Sin sombra corrida. */
.vds-header { border-bottom-color: var(--linea-fina); }
.pastilla-guazu, .vds-marca { box-sizing: border-box; min-width: 112px; min-height: 44px; padding: 0 14px; justify-content: center; gap: 6px;
  border: 1px solid var(--azul); border-radius: var(--radio); box-shadow: none;
  font-family: var(--titulos); font-size: 18px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pastilla-guazu { background: var(--azul); color: #fff; }
.pastilla-guazu .flecha { font-family: var(--titulos); font-size: 18px; color: var(--lavanda); }
.pastilla-guazu:hover { background: var(--noche); border-color: var(--noche); color: #fff; }
.vds-marca { background: #fff; color: var(--noche); font-size: 15.5px; letter-spacing: 0.14em; padding-left: calc(14px + 0.14em); } /* en mayúsculas se ve más grande: un punto menos para que pese igual que «← Guazú» */
.vds-marca:hover { background: var(--lavanda); color: var(--noche); }
.pastilla-guazu:active, .vds-marca:active { transform: none; box-shadow: none; }
@media (min-width: 900px) {
  .pastilla-guazu, .vds-marca { min-width: 132px; min-height: 48px; font-size: 20px; }
  .pastilla-guazu .flecha { font-size: 20px; }
  .vds-marca { font-size: 17px; }
}

/* Etiquetas de sección: con una raya firme abajo, como un índice */
.portada-bloque > .etiqueta { padding-bottom: 10px; border-bottom: 2px solid var(--tinta); }

/* Portada: bloque azul recto y a lo ancho */
.portada-intro { border-radius: 0; }
.newsletter .fila { gap: 0; }
.newsletter .fila input { border-radius: var(--radio) 0 0 var(--radio); }
.newsletter .fila button { border-radius: 0 var(--radio) var(--radio) 0; }
.newsletter > input, .newsletter button { border-radius: var(--radio); }
@media (min-width: 900px) {
  .portada-intro { margin: 0; padding: 72px max(48px, calc((100vw - 1180px) / 2)); }
}

/* Últimas publicaciones: carrusel en celular, tres en fila en compu. Tarjetas blancas, borde fino,
   esquina chica y pareja; el color de la colección queda como una línea fina arriba. */
.ult, .ult:nth-child(2) { border: 1px solid var(--linea-fina); border-top: 3px solid var(--banda); border-radius: var(--radio); gap: 6px; }
.carrusel { margin-top: 14px; }
.ult-volanta { font-size: 11px; letter-spacing: 0.12em; }
.ult-titulo { font-size: 21px; line-height: 1.15; }
.ult-copete { color: var(--copete); font-size: 15px; }
.ult-fecha { font-weight: 400; color: var(--secundario); }
.puntos span { border-radius: 1px; height: 4px; width: 14px; }
.puntos span.on { width: 28px; }
@media (min-width: 900px) {
  .carrusel { margin-top: 18px; }
  .ult-titulo { font-size: 23px; }
}

/* Colecciones: catálogo. Todas del mismo ancho; el color de la etapa queda como franja a la izquierda */
.lomos { gap: 0; margin-top: 0; }
.lomo { position: relative; margin-right: 0 !important; min-height: 0; padding: 16px 0 16px 26px; border-radius: 0 !important;
  border-bottom: 1px solid var(--linea-fina); color: var(--tinta) !important; align-items: flex-start; }
/* El fondo de color del lomo queda tapado salvo los primeros 10px: esa es la franja */
.lomo::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; right: 0; background: var(--fondo); }
.lomo > * { position: relative; }
.lomo.cerrada { box-shadow: none; padding-left: 26px; }
.lomo-volanta { opacity: 1; color: var(--secundario); letter-spacing: 0.12em; }
.lomo-nombre { font-size: 20px; }
.lomo-contexto { opacity: 1; color: var(--copete); font-size: 15px; }
.lomo-datos { opacity: 1; color: var(--secundario); font-weight: 400; padding-top: 2px; }
.lomo:hover .lomo-nombre { color: var(--azul); }
@media (min-width: 900px) { .lomo-nombre { font-size: 22px; } }

/* Colección: cabecera recta y a lo ancho */
.col-cabecera { border-radius: 0; }
@media (min-width: 900px) {
  .col-cabecera { margin: 0; padding: 72px max(48px, calc((100vw - 1180px) / 2)); border-radius: 0; }
}
.col-etiqueta .estado { border-radius: var(--radio); }
.tramo-volanta span { border-radius: var(--radio); }

/* Botones y recuadros: esquina chica y pareja en todo el blog */
.accion-principal, .newsletter-pie, .red, .puerta, .puerta.guazu, .puerta.vds, .boton-todos, .vecino, .vecino.sig,
.como-citar, .ver-mas, .filtro, .pildora, .boton-compartir, .col-compartir, .cinta .formato, .cinta .borrador,
.item-pastilla { border-radius: var(--radio) !important; }
.red, .vecino, .boton-todos, .como-citar { border-width: 1px; }
.pildora, .boton-compartir, .ver-mas, .filtro { border-width: 1px; }

/* Listas de textos e índice de colección: líneas un poco más finas y claras */
.item, .entrada { border-bottom-color: var(--linea-fina); }
@media (min-width: 900px) { .lomos { max-width: none; } }

/* Pie del texto y de la colección: las aclaraciones en una sola línea, menos alto */
.vecinos { gap: 10px; }
.vecino, .vecino.sig { padding: 12px 10px; gap: 4px; min-width: 0; }
.vecino-rotulo { font-size: 11px; letter-spacing: 0; text-transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vecino-titulo { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.volver { gap: 8px; grid-template-columns: minmax(0, 1fr); } /* en celular, uno debajo del otro: así el nombre de la colección entra en una línea */
.pildora { min-height: 44px; padding: 0 12px; font-size: 14px; min-width: 0; }
.pildora, .pildora span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pildora span { display: block; }
.pildora br { display: none; }
@media (min-width: 900px) {
  .vecino, .vecino.sig { padding: 16px 20px; }
  .vecino-rotulo { font-size: 12px; }
  .vecino-titulo { font-size: 19px; }
  .volver { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .volver.una { grid-template-columns: minmax(0, 1fr); }
  .vecino-rotulo { text-transform: uppercase; letter-spacing: 0.06em; }
  .pildora { min-height: 48px; font-size: 15px; }
}

/* ---------- Escala tipográfica compartida con /guazu (03/10/2026) ----------
   Título de página 40/64 · título en listas 20/23 · etiqueta 12 (mayúscula, espaciada) · botón 15/16 */
.lista-cabeza h1, .col-cabecera h1 { font-size: 40px; line-height: 1.02; }
.portada-intro h1 { font-size: 40px; }
.ult-titulo, .lomo-nombre, .entrada-titulo, .item-titulo { font-size: 20px; line-height: 1.15; }
.etiqueta, .portada-bloque > .etiqueta, .newsletter label, .ult-volanta, .lomo-volanta, .col-etiqueta, .cinta, .item-meta, .tramo-volanta, .anio + .item .item-meta {
  font-size: 12px; letter-spacing: .12em; }
.pildora, .boton-compartir, .col-compartir, .ver-mas, .newsletter button, .filtro { font-size: 15px; }
@media (min-width: 900px) {
  .lista-cabeza h1, .col-cabecera h1, .portada-intro h1 { font-size: 64px; }
  .col-cabecera h1.largo { font-size: 48px; }
  .ult-titulo, .lomo-nombre, .entrada-titulo, .item-titulo { font-size: 23px; }
  .etiqueta, .portada-bloque > .etiqueta, .newsletter label, .ult-volanta, .lomo-volanta, .col-etiqueta, .cinta, .item-meta, .tramo-volanta { font-size: 12px; }
  .pildora, .boton-compartir, .col-compartir, .ver-mas, .newsletter button, .filtro { font-size: 16px; }
}

/* Flecha de «← Guazú»: misma letra y tamaño que la de «BLOG →» en /guazu, en blanco para que se vea */
.pastilla-guazu .flecha { font-family: var(--interfaz); font-size: 15px; font-weight: 700; color: #fff; }
@media (min-width: 900px) { .pastilla-guazu .flecha { font-size: 16px; } }