/* VIENTO.DATA.SUR — hoja de estilos (ver diseno/diseno-viento-data-sur.md) */
:root {
  --fondo: #f5f7fb;
  --tinta: #1f2345;
  --secundario: #5c6680;
  --copete: #32407a;
  --azul: #3f51b5;
  --noche: #2b3675;
  --violeta: #44378e;
  --purpura: #4a1970;
  --celeste: #8091f5;
  --lila: #9688e4;
  --lavanda: #eef0ff;
  --linea: #adb8eb;
  --linea-suave: #dfe3f7;
  --verde: #1f9b5a;
  --ambar: #b7791f;
  --gris: #7a829b;
  --titulos: 'Fraunces', Georgia, serif;
  --lectura: 'Newsreader', Georgia, serif;
  --interfaz: 'Karla', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: var(--interfaz); -webkit-text-size-adjust: 100%; }
a { color: var(--azul); }
a:hover { color: var(--noche); }

/* Encabezado */
.vds-top { position: sticky; top: 0; z-index: 10; background: var(--fondo); }
.vds-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding: 12px 12px; border-bottom: 1px solid var(--linea); }
.vds-header .todos { display: none; font-size: 15px; font-weight: 700; color: var(--secundario); text-decoration: none; }
/* BLOG: botón hermano de la pastilla de Guazú, con los colores del bloque derecho de la raíz */
.vds-marca { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px 0 14px; border-radius: 5px 12px 4px 10px; background: var(--lavanda); border: 1.5px solid var(--linea); box-shadow: 2px 3px 0 var(--linea); font-family: var(--titulos); font-size: 17px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: var(--noche); text-decoration: none; }
.vds-marca:hover { color: var(--noche); background: #fff; }
.vds-marca:active { transform: translate(2px, 3px); box-shadow: none; }
.vds-header .der { grid-column: 3; display: flex; justify-content: flex-end; }
.vds-header .izq { grid-column: 1; display: flex; justify-content: flex-start; }
.pastilla-guazu { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 2px 12px; border-radius: 12px 5px 10px 4px; background: var(--azul); color: #fff; font-family: var(--titulos); font-size: 20px; font-weight: 600; white-space: nowrap; text-decoration: none; box-shadow: 2px 3px 0 var(--noche); }
.pastilla-guazu .flecha { font-family: var(--interfaz); font-size: 16px; color: var(--lavanda); }
.pastilla-guazu:hover { color: #fff; background: var(--noche); }
.pastilla-guazu:active { transform: translate(2px, 3px); box-shadow: none; }
.progreso { height: 3px; background: var(--lavanda); }
.progreso > div { width: 0; height: 3px; background: var(--azul); }

/* Página de un texto */
.texto { padding: 32px 24px 0; display: flex; flex-direction: column; }
.cinta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.cinta a { text-decoration: none; }
.cinta .genero { color: var(--azul); }
.cinta .coleccion { color: var(--violeta); }
.cinta .punto { color: var(--gris); }
.cinta .formato { padding: 3px 9px; border-radius: 999px; border: 1.5px solid var(--violeta); color: var(--violeta); letter-spacing: 0.04em; }
.cinta .borrador { padding: 3px 9px; border-radius: 999px; border: 1.5px dashed var(--ambar); color: var(--ambar); letter-spacing: 0.04em; }
.texto h1 { margin: 14px 0 0; font-family: var(--titulos); font-size: 38px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; color: var(--tinta); overflow-wrap: break-word; }
.texto h1.largo { font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; }
.copete { margin: 14px 0 0; font-family: var(--lectura); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--copete); }
.firma { margin: 18px 0 0; font-size: 15px; font-weight: 700; color: var(--tinta); }
.firma + .datos, .firma + .ficha { margin-top: 12px; }
.datos { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.datos .fecha { display: flex; flex-direction: column; gap: 2px; }
.datos .fecha strong { font-size: 15px; }
.datos .fecha span { font-size: 13px; color: var(--secundario); }
.ficha { margin: 22px 0 0; padding: 14px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; grid-template-columns: max-content minmax(0, 1fr); row-gap: 10px; column-gap: 12px; font-size: 15px; line-height: 1.4; }
.ficha dt { color: var(--secundario); }
.ficha dd { margin: 0; }
.ficha dd.fuerte { font-weight: 700; }
.ficha + .datos { margin-top: 0; border-top: 0; }
.boton-compartir { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--azul); background: transparent; color: var(--azul); font: 700 14px var(--interfaz); cursor: pointer; flex-shrink: 0; }
.accion-principal { margin-top: 28px; display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 20px; border-radius: 14px 6px 12px 4px; background: var(--noche); color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; text-align: center; }
.accion-principal:hover { color: #fff; background: var(--tinta); }

/* El cuerpo del texto */
.cuerpo { margin-top: 32px; font-family: var(--lectura); font-size: 19px; line-height: 1.62; color: var(--tinta); overflow-wrap: break-word; }
.cuerpo p { margin: 0 0 20px; }
.cuerpo blockquote { margin: 0 0 32px; padding: 0; color: var(--copete); font-size: 17px; line-height: 1.55; }
.cuerpo blockquote p { margin-bottom: 12px; }
.cuerpo h1, .cuerpo h2, .cuerpo h3 { font-family: var(--titulos); font-weight: 600; line-height: 1.2; margin: 36px 0 16px; }
.cuerpo h1 { font-size: 26px; }
.cuerpo h2 { font-size: 24px; }
.cuerpo h3 { font-size: 21px; }
.cuerpo pre { font-family: var(--lectura); font-size: inherit; line-height: inherit; white-space: pre-wrap; margin: 0 0 20px; }
.cuerpo img, .cuerpo iframe, .cuerpo video { max-width: 100%; height: auto; }
.cuerpo iframe { aspect-ratio: 16 / 9; width: 100%; }
.cuerpo figure { margin: 0 0 24px; }
.cuerpo figure img { display: block; }
.cuerpo figcaption { margin-top: 8px; font-family: var(--interfaz); font-size: 14px; line-height: 1.4; color: var(--secundario); }
.cuerpo [style*="justify"] { text-align: left !important; }
.cuerpo sup { line-height: 0; }

.ornamento { margin: 20px 0 36px; text-align: center; font-family: var(--titulos); font-size: 22px; color: var(--lila); letter-spacing: 0.5em; }

/* Al terminar el texto: Me gusta y newsletter */
/* "Comentar" y "Me gusta": cada uno centrado en su columna, alineados con "Texto anterior / Próximo texto" y los botones de colecciones */
.cierre { margin: 0 0 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; justify-items: center; align-items: center; }
.escribime { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 6px; font: 700 16px var(--interfaz); color: var(--violeta); text-decoration: none; }
.escribime svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.escribime:hover { color: var(--noche); text-decoration: underline; text-underline-offset: 4px; }
/* "Me gusta": sin recuadro, igual que "Comentar". La mano está en gris hasta que se toca; ahí toma color. */
.megusta { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 6px; border: 0; background: none; font: 700 16px var(--interfaz); color: var(--violeta); cursor: pointer; }
.megusta:hover { color: var(--noche); text-decoration: underline; text-underline-offset: 4px; }
.megusta .mano { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: 0.7; transition: transform 0.15s; }
.megusta[aria-pressed="true"] { color: var(--noche); }
.megusta[aria-pressed="true"] .mano { filter: none; opacity: 1; transform: scale(1.2) rotate(-8deg); }
.newsletter-pie { padding: 16px; border-radius: 6px 16px 8px 14px; background: var(--azul); }
.newsletter-pie input { border: 0; }
.newsletter-listo { margin: 0; min-height: 48px; display: flex; align-items: center; font-size: 16px; font-weight: 700; color: #fff; }
/* Compartir (al pie del texto) */
.compartir { display: flex; flex-direction: column; gap: 12px; }
.etiqueta { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--secundario); }
.redes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.red { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 18px; border-radius: 12px; background: #fff; border: 1.5px solid var(--linea); color: var(--tinta); font: 700 15px var(--interfaz); text-decoration: none; cursor: pointer; }
.red.wa { background: var(--verde); border-color: var(--verde); color: #fff; }
.red.wa:hover { color: #fff; }
.copiar { display: flex; align-items: center; justify-content: center; min-height: 44px; background: none; border: 0; color: var(--azul); font: 700 14px var(--interfaz); text-decoration: underline; cursor: pointer; }

/* Las dos puertas */
.puertas { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.puerta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px; min-height: 64px; text-decoration: none; }
.puerta.guazu { border-radius: 14px 6px 12px 4px; background: var(--azul); }
.puerta.guazu .nombre { font-family: var(--titulos); font-size: 22px; font-weight: 600; color: #fff; }
.puerta.guazu .flecha { font-size: 18px; color: var(--lavanda); }
.puerta.guazu { justify-content: flex-start; gap: 14px; }
.puerta.vds { padding: 0 16px; gap: 6px; border-radius: 6px 14px 4px 12px; background: var(--lavanda); }
.puerta.vds span:first-child { font-family: var(--titulos); font-size: 19px; font-weight: 700; letter-spacing: 0.12em; white-space: nowrap; color: var(--noche); }
.puerta.vds span:last-child { font-size: 16px; color: var(--violeta); }

.vds-pie { margin-top: 40px; padding: 20px 24px 32px; font-size: 14px; color: var(--gris); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vds-pie a { color: var(--gris); text-decoration: none; }
.vds-pie .pie-links a { font-weight: 700; padding: 8px 2px; }
.pie-redes { display: flex; gap: 12px; }
.pie-redes a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--linea); color: var(--secundario); }
.pie-redes a:hover { border-color: var(--azul); color: var(--azul); }

/* Hoja de compartir (sube desde abajo) */
.hoja-fondo { position: fixed; inset: 0; z-index: 50; background: rgba(31, 35, 69, 0.55); display: none; }
.hoja-fondo.abierta { display: block; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: #fff; border-radius: 22px 22px 0 0; padding: 12px 20px 28px; display: none; flex-direction: column; gap: 6px; max-width: 520px; margin: 0 auto; }
.hoja.abierta { display: flex; }
.hoja .asa { align-self: center; width: 40px; height: 4px; border-radius: 4px; background: var(--linea); }
.hoja .cabeza { padding: 14px 0 10px; display: flex; flex-direction: column; gap: 2px; }
.hoja .cabeza strong { font-family: var(--titulos); font-size: 20px; font-weight: 600; }
.opcion { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--lavanda); background: none; color: var(--tinta); text-decoration: none; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.opcion:last-child { border-bottom: 0; color: var(--azul); }
.opcion .icono { width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.ico-red { flex-shrink: 0; }
.opcion .nombre { font-size: 16px; font-weight: 700; }
.opcion .nota { display: block; font-size: 13px; color: var(--secundario); font-weight: 400; }

.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--tinta); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; display: none; }
.aviso.visible { display: block; }

/* Computadora */
@media (min-width: 900px) {
  .vds-header { padding: 18px 48px; }
  .vds-header .todos { display: inline; }
  .vds-marca { min-height: 48px; padding: 0 16px 0 20px; font-size: 20px; letter-spacing: 0.14em; }
  .pastilla-guazu { min-height: 48px; padding: 0 20px 2px 16px; font-size: 24px; }
  .texto { width: 680px; margin: 0 auto; padding: 72px 0 0; }
  .cinta { font-size: 14px; gap: 10px; }
  .texto h1 { margin-top: 18px; font-size: 60px; line-height: 1.02; letter-spacing: -0.025em; }
  .texto h1.largo { font-size: 44px; line-height: 1.08; }
  .copete { margin-top: 18px; font-size: 24px; }
  .datos { margin-top: 28px; padding: 14px 0; }
  .datos .fecha { flex-direction: row; gap: 0; font-size: 15px; }
  .datos .fecha span { font-size: 15px; }
  .datos .fecha span::before { content: "·"; margin: 0 6px; }
  .cuerpo { margin-top: 40px; font-size: 21px; line-height: 1.65; }
  .cuerpo p { margin-bottom: 22px; }
  .cuerpo blockquote { font-size: 19px; }
  .ornamento { margin: 24px 0 40px; font-size: 24px; }
  .redes { display: flex; flex-wrap: wrap; }
  .compartir { flex-direction: column; }
  .puertas { margin-top: 48px; padding-top: 28px; gap: 16px; }
  .puerta { min-height: 80px; padding: 0 24px; }
  .puerta.guazu { border-radius: 16px 6px 14px 4px; }
  .puerta.guazu .nombre { font-size: 28px; }
  .puerta.guazu .flecha { font-size: 22px; }
  .puerta.vds { padding: 0 24px; border-radius: 6px 16px 4px 14px; }
  .puerta.vds span:first-child { font-size: 24px; letter-spacing: 0.14em; }
  .puerta span:last-child { font-size: 22px; }
  .vds-pie { margin: 48px 48px 0; padding: 24px 0 40px; border-top: 1px solid var(--linea); flex-direction: row; justify-content: space-between; font-size: 15px; }
  .hoja { bottom: 50%; transform: translateY(50%); border-radius: 22px; }
}

/* Todos los textos */
.lista-cabeza { padding: 28px 24px 8px; }
.lista-cabeza h1 { margin: 0; font-family: var(--titulos); font-size: 34px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.filtros { display: flex; gap: 8px; padding: 16px 24px; overflow-x: auto; border-bottom: 1px solid var(--linea-suave); scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--tinta); border: 1.5px solid var(--linea); font: 700 14px var(--interfaz); text-decoration: none; flex-shrink: 0; cursor: pointer; }
.filtro.activo { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.lista { padding: 0 24px; display: flex; flex-direction: column; }
.anio { padding: 26px 0 4px; font-family: var(--titulos); font-size: 30px; font-weight: 300; color: var(--lila); }
.item { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linea-suave); text-decoration: none; color: var(--tinta); }
.item:hover { color: var(--tinta); }
.item:hover .item-titulo { color: var(--azul); }
.item-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.item-meta .izq { color: var(--violeta); }
.item-meta .der { color: var(--gris); flex-shrink: 0; }
.item-titulo { font-family: var(--titulos); font-size: 21px; line-height: 1.15; font-weight: 600; }
.item-copete { font-family: var(--lectura); font-style: italic; font-size: 16px; line-height: 1.4; color: var(--secundario); }
.item-autoria { font-size: 13px; color: var(--secundario); }
.item-pastilla { align-self: flex-start; margin-top: 2px; padding: 3px 10px; border-radius: 999px; border: 1.5px solid var(--azul); font-size: 12px; font-weight: 700; color: var(--azul); }
.item-pastilla.borrador { border-style: dashed; border-color: var(--ambar); color: var(--ambar); }
.ver-mas { display: flex; align-items: center; justify-content: center; min-height: 52px; margin-top: 20px; border-radius: 12px; border: 1.5px solid var(--azul); background: none; font: 700 16px var(--interfaz); color: var(--azul); cursor: pointer; width: 100%; }
.oculto { display: none !important; }

@media (min-width: 900px) {
  .lista-cabeza, .lista { width: 680px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .lista-cabeza { padding-top: 56px; }
  .lista-cabeza h1 { font-size: 52px; }
  .filtros { justify-content: center; padding: 20px 0; }
  .anio { font-size: 40px; padding-top: 36px; }
  .item { padding: 22px 0; }
  .item-meta { font-size: 13px; }
  .item-titulo { font-size: 26px; }
  .item-copete { font-size: 18px; }
}

/* Colección */
.col-cabecera { background: var(--noche); padding: 32px 24px 28px; display: flex; flex-direction: column; gap: 12px; border-radius: 0 0 6px 28px; color: #fff; }
.col-cabecera .col-lado { display: flex; flex-direction: column; gap: 12px; }
.col-etiqueta { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #cfd5ff; }
.col-etiqueta .punto { color: var(--celeste); }
.col-etiqueta .estado { padding: 2px 9px; border-radius: 999px; background: var(--celeste); color: var(--tinta); letter-spacing: 0.03em; }
.col-cabecera h1 { margin: 0; font-family: var(--titulos); font-size: 44px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: #fff; overflow-wrap: break-word; }
.col-cabecera h1.largo { font-size: 34px; line-height: 1.05; }
.col-contexto { margin: 0; font-family: var(--lectura); font-size: 18px; line-height: 1.45; color: var(--lavanda); white-space: pre-line; }
.col-pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 6px; }
.col-datos { font-size: 14px; font-weight: 700; color: #cfd5ff; }
.col-compartir { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid #cfd5ff; background: transparent; color: #fff; font: 700 14px var(--interfaz); cursor: pointer; flex-shrink: 0; }
.col-compartir .largo { display: none; }
.indice { padding: 20px 24px 0; display: flex; flex-direction: column; }
.entrada { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--linea-suave); text-decoration: none; color: var(--tinta); }
.entrada:hover { color: var(--tinta); }
.entrada:hover .entrada-titulo { color: var(--azul); }
.entrada-num { font-family: var(--titulos); font-size: 20px; font-weight: 300; color: var(--lila); line-height: 1.2; }
.entrada-cuerpo { display: flex; flex-direction: column; gap: 4px; }
.entrada-titulo { font-family: var(--titulos); font-size: 18px; line-height: 1.2; font-weight: 600; }
.entrada-copete { font-family: var(--lectura); font-style: italic; font-size: 15px; line-height: 1.4; color: var(--secundario); }
.entrada-fecha { font-size: 12px; font-weight: 700; color: var(--gris); }
.entrada-fecha .sep { margin: 0 6px; color: var(--linea); }
/* Tramos dentro de una colección (volanta con el nombre del tramo) */
.tramo-volanta { margin-top: 26px; display: flex; padding-bottom: 6px; border-bottom: 2px solid var(--violeta); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violeta); }
.indice > .etiqueta + .tramo-volanta { margin-top: 14px; }
.tramo-volanta span { padding: 3px 10px 3px 9px; border-radius: 8px 3px 7px 2px; background: var(--lavanda); }
.entrada .item-pastilla { margin-top: 4px; }
.col-seguir { padding: 0 24px; }
.col-seguir .puertas { border-top: 0; margin-top: 32px; padding-top: 0; }

/* Lista de colecciones */
.colecciones-lista { padding: 8px 24px 0; display: flex; flex-direction: column; }

@media (min-width: 900px) {
  .col-cabecera { margin: 0 48px; padding: 64px 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: end; border-radius: 0 0 8px 40px; }
  .col-cabecera .col-lado { gap: 14px; }
  .col-cabecera .col-lado + .col-lado { gap: 18px; align-items: flex-start; }
  .col-cabecera h1 { font-size: 72px; }
  .col-cabecera h1.largo { font-size: 52px; }
  .col-contexto { font-size: 22px; }
  .col-datos { font-size: 15px; }
  .col-compartir { padding: 0 18px; }
  .col-compartir .corto { display: none; }
  .col-compartir .largo { display: inline; }
  .indice, .col-seguir, .colecciones-lista { width: 760px; margin: 0 auto; padding-left: 0; padding-right: 0; }
  .indice { padding-top: 48px; }
  .entrada { grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; padding: 20px 0; }
  .entrada-num { font-size: 26px; }
  .entrada-titulo { font-size: 24px; }
  .entrada-copete { font-size: 17px; }
  .tramo-volanta { margin-top: 40px; font-size: 14px; }
  .col-seguir .puertas { margin-top: 48px; }
}


/* Portada de VIENTO.DATA.SUR */
.portada-intro { background: var(--azul); color: #fff; padding: 40px 24px 28px; display: flex; flex-direction: column; gap: 16px; border-radius: 0 0 28px 6px; }
.portada-intro .lado { display: flex; flex-direction: column; gap: 16px; }
.portada-intro h1 { margin: 0; font-family: var(--titulos); font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.portada-texto { margin: 0; font-family: var(--lectura); font-size: 18px; line-height: 1.5; color: var(--lavanda); white-space: pre-line; }
.portada-texto.hueco { font-family: var(--interfaz); font-size: 15px; font-weight: 700; color: #cfd5ff; }
.newsletter { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.newsletter label { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #cfd5ff; }
.newsletter .fila { display: flex; gap: 8px; }
.newsletter > input { min-height: 48px; padding: 0 14px; border: none; border-radius: 12px; font: 16px var(--interfaz); color: var(--tinta); background: #fff; }
.newsletter input { flex-grow: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: none; border-radius: 12px; font: 16px var(--interfaz); color: var(--tinta); background: #fff; }
.newsletter button { min-height: 48px; padding: 0 16px; border: none; border-radius: 12px; background: var(--tinta); color: #fff; font: 700 15px var(--interfaz); cursor: pointer; }
.portada-bloque { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 4px; }
.lomos { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.lomo { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 60px; padding: 10px 16px; border-radius: 10px 4px 8px 3px; text-decoration: none; }
.lomo.par { border-radius: 4px 10px 3px 8px; }
.lomo.cerrada { box-shadow: inset 8px 0 0 #fff; padding-left: 24px; }
.lomo-nombre { font-family: var(--titulos); font-size: 18px; line-height: 1.15; font-weight: 600; }
.lomo-datos { font-size: 12px; font-weight: 700; opacity: 0.85; flex-shrink: 0; text-align: right; }
.ver-todas { display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--azul); }
.boton-todos { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 0 18px; border-radius: 12px 4px 10px 6px; border: 1.5px solid var(--azul); background: #fff; text-decoration: none; }
.boton-todos span:first-child { font-family: var(--titulos); font-size: 20px; font-weight: 600; color: var(--tinta); }
.boton-todos span:last-child { font-size: 13px; font-weight: 700; color: var(--azul); }
@media (min-width: 900px) {
  .portada-intro { margin: 0 48px; padding: 64px 72px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: end; border-radius: 0 0 40px 8px; }
  .portada-intro h1 { font-size: 64px; }
  .portada-texto { font-size: 21px; }
  .portada-intro .lado { gap: 22px; }
  .newsletter input, .newsletter button { min-height: 52px; }
  .portada-bloque { padding: 56px 48px 0; max-width: 1280px; margin: 0 auto; width: 100%; }
  .lomos { max-width: 760px; }
}
/* Últimas publicaciones: carrusel en celular (se desliza; la siguiente se asoma), tres en fila en compu.
   La franja de arriba lleva el color de la colección del texto (--banda, el mismo de su lomo). */
.carrusel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -24px 0; padding: 4px 24px 6px; scroll-padding: 0 24px; scrollbar-width: none; }
.carrusel::-webkit-scrollbar { display: none; }
.ult { flex: 0 0 84%; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-height: 190px; padding: 18px 18px 16px; background: #fff; border: 1.5px solid var(--linea); border-top: 6px solid var(--banda); border-radius: 6px 14px 4px 12px; text-decoration: none; color: var(--tinta); }
.ult:nth-child(2) { border-radius: 14px 5px 12px 4px; }
.ult:hover .ult-titulo { color: var(--azul); }
.ult-volanta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--violeta); }
.ult-titulo { font-family: var(--titulos); font-size: 20px; line-height: 1.2; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ult-copete { font-family: var(--lectura); font-style: italic; font-size: 15px; line-height: 1.35; color: var(--secundario); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ult-fecha { margin-top: auto; font-size: 12px; font-weight: 700; color: var(--gris); }
.puntos { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.puntos span { width: 8px; height: 8px; border-radius: 4px; background: var(--linea); transition: width 0.2s; }
.puntos span.on { background: var(--azul); width: 20px; }
@media (min-width: 900px) {
  .carrusel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 12px 0 0; padding: 0; }
  .ult { min-height: 220px; padding: 22px; }
  .ult-titulo { font-size: 22px; }
  .puntos { display: none; }
}
.lomo-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lomo-volanta { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.lomo-contexto { font-family: var(--lectura); font-style: italic; font-size: 14px; line-height: 1.35; opacity: 0.9; }

/* Texto anterior / Próximo texto */
/* Pie del texto: volver a la colección / otras colecciones */
.volver { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.volver.una { grid-template-columns: minmax(0, 1fr); }
.pildora { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--azul); color: var(--azul); font-weight: 700; font-size: 15px; line-height: 1.15; text-align: center; text-decoration: none; }
.pildora:hover { background: var(--azul); color: #fff; }
@media (min-width: 900px) { .volver { margin-top: 48px; padding-top: 28px; gap: 16px; } .pildora { font-size: 16px; } .pildora br { display: none; } }
.vecinos { scroll-margin-top: 120px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 32px; }
.vecino { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px 4px 10px 6px; border: 1.5px solid var(--linea); background: #fff; color: var(--tinta); text-decoration: none; }
.vecino.sig { grid-column: 2; text-align: right; border-radius: 4px 12px 6px 10px; }
.vecino:hover { border-color: var(--azul); color: var(--tinta); }
.vecino-rotulo { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--azul); }
.vecino-titulo { font-family: var(--titulos); font-size: 16px; line-height: 1.2; font-weight: 600; }
@media (min-width: 900px) { .vecino { padding: 20px 22px; } .vecino-titulo { font-size: 20px; } }

/* PDF (impresión): solo el texto, limpio, con la cita al principio */
.solo-impresion { display: none; }
@media print {
  @page { margin: 22mm 20mm; }
  html, body { background: #fff !important; }
  .vds-top, .progreso, .cierre, .boton-compartir, .compartir, .hoja, .hoja-fondo, .aviso, .vecinos, .puertas, .volver, .vds-pie, .ornamento, .accion-principal { display: none !important; }
  .texto { width: auto !important; padding: 0 !important; margin: 0 !important; }
  .texto h1 { font-size: 26pt !important; }
  .copete { font-size: 13pt !important; }
  .datos, .ficha { border-color: #999 !important; }
  .solo-impresion { display: block; }
  .cita-impresion { margin: 18pt 0 0; padding: 10pt 12pt; border: 1px solid #999; border-radius: 4px; font-size: 9.5pt; line-height: 1.45; color: #000; }
  .cita-impresion p { margin: 4pt 0 0; overflow-wrap: anywhere; }
  .cuerpo { margin-top: 18pt !important; font-size: 11.5pt !important; line-height: 1.5 !important; color: #000 !important; }
  .cuerpo iframe { display: none !important; }
  .cuerpo a { color: #000 !important; }
}

/* Cómo citar (académicos: referencia de la publicación original) */
.como-citar { margin-top: 22px; padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: 10px 4px 8px 3px; background: #fff; }
.como-citar p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--tinta); overflow-wrap: anywhere; }
@media (min-width: 900px) { .como-citar p { font-size: 15px; } }
@media print { .como-citar { border-color: #999; } }

/* Cita de apertura de la colección */
.col-cita { margin: 28px 24px 4px; padding: 0 0 0 18px; border-left: 3px solid var(--lila); }
.col-cita blockquote { margin: 0; font-family: var(--lectura); font-style: italic; font-size: 20px; line-height: 1.45; color: var(--copete); white-space: pre-line; }
.col-cita figcaption { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--violeta); }
.col-cita figcaption em, .col-cita figcaption i { font-style: normal; }
.col-cita figcaption a { color: var(--violeta); text-decoration-color: var(--linea); }
@media (min-width: 900px) {
  .col-cita { width: 700px; margin: 56px auto 0; padding-left: 24px; }
  .col-cita blockquote { font-size: 24px; }
  .col-cita figcaption { font-size: 12.5px; }
}

/* Colección anterior / Próxima colección */
.col-vecinas { margin: 32px 24px 0; }
.vecino.otra-col { background: var(--noche); border-color: var(--noche); color: #fff; }
.vecino.otra-col .vecino-rotulo { color: #cfd5ff; }
.vecino.otra-col:hover { background: var(--azul); border-color: var(--azul); color: #fff; }
@media (min-width: 900px) {
  .col-vecinas { width: 760px; margin: 48px auto 0; }
}