/* ==========================================================================
   El Turpial Digital — CONTENIDO
   El cuerpo de las notas y de las páginas, y las piezas que publica el agente
   dentro del HTML del post (claves, fuentes, contraste, resumen diario y la
   página «Tasa BCV hoy»). Se carga sólo en vistas singulares.

   Estas clases las escribe el agente (publicador/), no el tema: renombrarlas
   acá deja sin estilo las notas ya publicadas. Si cambian allá, cambian acá.
   ========================================================================== */

/* --- Cuerpo --------------------------------------------------------------
   Serif de lectura a 20 px y bandera derecha. Sin justificar: en pantalla no
   hay guionado fino y el justificado abre «ríos» de blanco. Ver la nota
   larga sobre esto en el historial del tema (3.x). */
.nota__cuerpo {
  font-family: var(--serif);
  font-size: 1.3125rem; line-height: 1.6;
  color: var(--texto);
}
.nota__cuerpo > * { margin-block: 0 1.1em; }
.nota__cuerpo p { text-align: start; }
.nota__cuerpo a { color: var(--azul); text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.nota__cuerpo a:hover { color: var(--marino); }
.nota__cuerpo strong { font-weight: 700; }

/* Entradilla: el primer párrafo es la promesa de la nota, pero sólo se
   agranda cuando NO hay bajada; con las dos quedan dos bloques grandes
   seguidos y el titular pierde el golpe. */
.nota:not(.nota--con-bajada) .nota__cuerpo > p:first-child {
  font-size: 1.375rem; line-height: 1.5; color: var(--texto-2);
}

/* Entradilla marcada a mano en las páginas institucionales (mu-plugin). */
.nota__cuerpo .tpx-entradilla { font-size: 1.375rem; line-height: 1.5; color: var(--texto-2); }

/* Ladillos con un filete corto encima: separan sin cortar la columna. */
.nota__cuerpo h2 {
  font-family: var(--serif); font-size: 1.75rem; font-weight: 700;
  line-height: 1.18; letter-spacing: -.018em;
  margin-block: 2em .6em; max-inline-size: 32ch; text-wrap: balance;
}
.nota__cuerpo h2::before {
  content: ""; display: block; inline-size: 40px; block-size: 3px;
  background: var(--oro); margin-block-end: 14px;
}
.nota__cuerpo h3 { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; margin-block: 1.6em .5em; }
.nota__cuerpo ul, .nota__cuerpo ol { padding-inline-start: 1.2em; }
.nota__cuerpo li { margin-block: .35em; }
.nota__cuerpo li::marker { color: var(--azul); }

/* Frase destacada de la propia nota: grande, entre filetes, sin comillas. */
.nota__cuerpo .tp-destacado {
  border-block: 1px solid var(--linea-2); border-inline-start: 0;
  padding-block: 1.25rem; margin-block: 2.25rem;
}
.nota__cuerpo .tp-destacado p {
  margin: 0; font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--tinta);
}

/* Cita externa: filete rojo arriba y atribución en versalitas. */
.nota__cuerpo blockquote {
  margin: 2.25rem 0; padding: 1rem 0 0; border-top: 3px solid var(--oro); max-inline-size: 56ch;
}
.nota__cuerpo blockquote p { font-size: 1.5rem; line-height: 1.35; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .5rem; }
.nota__cuerpo blockquote cite {
  font: 700 .8125rem/1.3 var(--sans); font-style: normal;
  text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3);
}

/* --- Imágenes dentro del cuerpo -------------------------------------------
   Clases que aplica el editor desde el bloque de imagen («clase CSS
   adicional»): tp-ancha a sangría, tp-lado al margen, tp-chica centrada. */
.nota__cuerpo figure { margin-inline: 0; }
.nota__cuerpo img { block-size: auto; }
.nota__cuerpo figcaption, .nota__cuerpo .wp-element-caption {
  font: 400 .875rem/1.45 var(--sans); color: var(--texto-3);
  border-block-end: 1px solid var(--linea); padding-block: 8px;
}
.nota__cuerpo .tp-ancha { margin-inline: -2rem; max-inline-size: calc(100% + 4rem); margin-block: 2rem; }
.nota__cuerpo .tp-ancha img { inline-size: 100%; }
.nota__cuerpo .tp-lado { float: inline-end; inline-size: min(44%, 320px); margin: .5rem 0 1rem 1.5rem; }
.nota__cuerpo .tp-lado--izq { float: inline-start; margin-inline: 0 1.5rem; }
.nota__cuerpo .tp-chica { max-inline-size: 380px; margin-inline: auto; }
.nota__cuerpo::after { content: ""; display: block; clear: both; }
@media (max-width: 760px) {
  .nota__cuerpo .tp-ancha { margin-inline: 0; max-inline-size: 100%; }
}
@media (max-width: 640px) {
  .nota__cuerpo .tp-lado, .nota__cuerpo .tp-lado--izq { float: none; inline-size: 100%; margin-inline: 0; }
}

/* Tablas: cifras tabulares y filetes finos, legibles en el móvil. */
.nota__cuerpo table { inline-size: 100%; border-collapse: collapse; font: 400 1rem/1.4 var(--sans); }
.nota__cuerpo th, .nota__cuerpo td { padding: 10px 8px; border-bottom: 1px solid var(--linea); text-align: start; font-variant-numeric: tabular-nums; }
.nota__cuerpo th { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); border-bottom-color: var(--linea-2); }

/* --- Piezas del agente ---------------------------------------------------
   Módulos de interfaz dentro de la prosa: vuelven a la sans. */
.tp-claves, .tp-fuentes, .tp-contraste, .tp-dg, .tp-viz, .tp-rejilla, .tp-tarjeta, .tp-scroll, .tp-fuente, .tp-aviso {
  font-family: var(--sans);
}

/* «Claves»: el resumen en viñetas, sobre papel y con filete negro. */
.nota__cuerpo .tp-claves {
  background: var(--papel); border-top: 4px solid var(--marino); border-radius: 0 0 var(--radio) var(--radio);
  padding: 1.25rem 1.5rem; margin-block: 1.75rem;
}
.nota__cuerpo :is(.tp-claves, .tp-fuentes, .tp-contraste) :is(h2, h3) {
  margin: 0 0 .6rem; max-inline-size: none;
  font: 800 .75rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--marino);
}
.tp-claves h2::before, .tp-fuentes h2::before, .tp-contraste h2::before { content: none; }
.tp-claves ul { margin: 0; padding-inline-start: 1.1em; }
.tp-claves li { font-size: 1rem; line-height: 1.5; margin-block: .4em; }

/* «Qué dicen distinto las fuentes»: lo único que no sale de ninguna fuente
   por separado, sino de compararlas. Por eso se distingue del relato. */
.nota__cuerpo .tp-contraste {
  margin-block: 1.75rem; padding: 1.25rem 1.5rem;
  border-inline-start: 4px solid var(--azul); border-radius: 0 var(--radio) var(--radio) 0; background: var(--papel);
}
.nota__cuerpo .tp-contraste h2 { color: var(--azul); }
.tp-contraste p { margin: 0; font-size: .9375rem; line-height: 1.55; }

/* Pie de fuentes: la prueba de que la nota es síntesis y no copia. Se trata
   como pieza editorial, no como letra chica de descargo. */
.nota__cuerpo .tp-fuentes {
  border-top: 1px solid var(--linea-2); padding-top: 1.25rem; margin-block: 2.5rem 0; font-size: .9375rem; line-height: 1.5;
}
.nota__cuerpo .tp-fuentes :is(h2, h3) { color: var(--azul); }
.tp-fuentes ul { margin: 0; padding-inline-start: 1.1em; }
.tp-fuentes li { margin-block: .45em; }
.tp-fuentes a { overflow-wrap: anywhere; }
.tp-metodo { color: var(--texto-3); font-size: .875rem; margin-block-start: .75rem; }

/* --- Resumen diario («Titulares de Venezuela») ---------------------------- */
.tp-dg > p:first-child { font-size: 1.25rem; line-height: 1.5; color: var(--texto-2); }
.nota__cuerpo .tp-dg h2 {
  margin-block: 2rem .9rem; font: 700 .8125rem/1.2 var(--sans);
  text-transform: uppercase; letter-spacing: .1em; max-inline-size: none;
  border-bottom: 3px solid var(--marino); padding-bottom: .5rem; color: var(--marino);
}
.tp-dg h2::before { content: none; }
.tp-item { margin-block-end: 1.1rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--oro); }
.tp-item a.tp-tit {
  display: block; font: 700 1.125rem/1.3 var(--serif); text-decoration: none; color: var(--texto);
}
.tp-item a.tp-tit:hover { color: var(--azul); text-decoration: underline; }
.tp-item p { margin: .25rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--texto-2); }
.tp-medio { display: inline-block; margin-top: .25rem; font: 700 .6875rem/1.3 var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.tp-nota { font-size: .875rem; color: var(--texto-3); border-top: 1px solid var(--linea-2); padding-top: .75rem; margin-top: 2rem; }

/* --- Página «Tasa BCV hoy» ------------------------------------------------
   Estos estilos vivían dentro del post; al pasar el agente a rol `author`
   WordPress filtraba la etiqueta <style> y dejaba el CSS como texto. */
.tp-num { font-variant-numeric: tabular-nums; }
.tp-sube { color: var(--rojo); }
.tp-baja { color: var(--verde); }
.tp-igual { color: var(--texto-3); }
.tp-tarjeta {
  background: var(--marino); color: #fff; text-align: center; border-top: 4px solid var(--oro);
  border-radius: var(--radio); padding: 1.5rem; margin: 0 0 1.5rem;
}
.tp-tarjeta .tp-et { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--oro); margin-bottom: .4rem; }
.tp-cifra { font: 800 3rem/1.05 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tp-cifra span { font: 400 1.125rem/1 var(--sans); color: var(--sobre-marino); }
.tp-tarjeta .tp-sube { color: #ff8b98; }
.tp-tarjeta .tp-baja { color: #6ee7a8; }
.tp-tarjeta .tp-delta { font-size: .9375rem; margin-top: .5rem; font-variant-numeric: tabular-nums; }
.tp-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 1.5rem 0; border-top: 1px solid var(--linea); border-inline-start: 1px solid var(--linea); border-radius: var(--radio-s); overflow: hidden; }
.tp-celda { background: var(--fondo); padding: .9rem 1rem; border-inline-end: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.tp-celda .tp-n { font: 800 1.375rem/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.tp-celda .tp-t { font-size: .8125rem; color: var(--texto-3); }
.tp-scroll { overflow-x: auto; }
.tp-scroll table { inline-size: 100%; border-collapse: collapse; font-size: .9375rem; }
.tp-scroll th, .tp-scroll td { text-align: end; padding: 9px 10px; border-bottom: 1px solid var(--linea); }
.tp-scroll th:first-child, .tp-scroll td:first-child { text-align: start; }
.tp-scroll th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); }
.tp-fuente { font-size: .875rem; color: var(--texto-3); border-inline-start: 3px solid var(--linea-2); padding: 4px 0 4px 14px; margin: 1.6rem 0; }
.tp-aviso { background: #fdeef0; border-radius: 0 var(--radio-s) var(--radio-s) 0; border-inline-start: 3px solid var(--rojo); padding: 12px 14px; font-size: .9375rem; margin: 1.25rem 0; }

/* Comparación de los tres mercados: la CIFRA manda y la barra acompaña.
   Entre 800 y 980 Bs la diferencia proporcional es chica: lo que el lector
   viene a ver es el número. Negro (oficial) a rojo (el más caro). */
.tp-viz { margin: 0 0 .75rem; padding: 1.5rem; background: var(--papel); border-radius: var(--radio); }
.tp-viz__pie {
  font-size: .75rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--linea);
}
.tp-viz__fila { margin-bottom: 1.25rem; }
.tp-viz__fila:last-child { margin-bottom: 0; }
.tp-viz__linea { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.tp-viz__et { font-size: .9375rem; font-weight: 600; }
.tp-viz__valor { font: 800 1.75rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.tp-viz__pista { inline-size: 100%; margin-top: 6px; }
.tp-viz__barra { block-size: 8px; border-radius: 8px; background: #c9b9a6; min-inline-size: 3px; }
.tp-viz__fila--2 .tp-viz__barra { background: var(--oro); }
.tp-viz__fila--3 .tp-viz__barra { background: var(--rojo); }
.tp-viz__fila--3 .tp-viz__valor { color: var(--rojo); }
.tp-viz__delta { display: block; font-size: .75rem; color: var(--texto-3); margin-top: 5px; }
.tp-viz__tabla { margin: 0 0 1.5rem; font-size: .875rem; }
.tp-viz__tabla summary { cursor: pointer; color: var(--texto-3); font-size: .8125rem; padding: 6px 0; }
@media (prefers-reduced-motion: no-preference) {
  .tp-viz__barra { transform-origin: 0 50%; }
  @supports (animation-timeline: view()) {
    .tp-viz__barra { animation: tp-crece linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    @keyframes tp-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

@media (max-width: 560px) {
  .nota__cuerpo { font-size: 1.125rem; line-height: 1.68; }
  .nota:not(.nota--con-bajada) .nota__cuerpo > p:first-child { font-size: 1.25rem; }
  .nota__cuerpo h2 { font-size: 1.5rem; }
  .nota__cuerpo .tp-claves, .nota__cuerpo .tp-contraste { padding: 1rem 1.1rem; }
  .tp-cifra { font-size: 2.5rem; }
}