/**
 * Ketin 2.0 — Texto · kem2-texto.css · v1.0.6 · 2026-07-25
 * Defaults derivados del patrón .prose del design system estático
 * (párrafos 16.5px, h3 internos, listas, .small, img-float, capitular
 * PTF y charter-quote). SIN !important salvo dos excepciones puntuales
 * (ver changelog): los controles de Design (con important => all de la
 * base) ganan siempre. Identidades = carga inicial.
 *
 * Changelog 1.0.1 (2026-07-25):
 *  - Ritmo vertical (párrafos, encabezados internos, listas): se
 *    prefija con .kem2-texto y se agrega !important puntual en los
 *    margins, para que no pierdan contra CSS de Divi/tema con
 *    selectores más específicos (ninguna de estas propiedades tiene
 *    un control de Design equivalente compitiendo, así que esto no
 *    contradice la regla de "cero important").
 *  - Columnas de texto: de 2 fijas a 1/2/3/4, con colapso responsive
 *    escalonado (4→2 y 3→2 en pantallas medianas, todo→1 en móvil).
 *
 * Changelog 1.0.2 (2026-07-25):
 *  - Corrección real del color de "Texto": el intento anterior (1.0.1,
 *    hecho del lado del PHP con selector con coma) arriesgaba perder el
 *    scoping por instancia. Revertido. La causa raíz era esta: .kem2-
 *    txt-body y sus hijos (p, ul, ol) declaraban el MISMO color dos
 *    veces — una en el contenedor, otra repetida en cada hijo. Esa
 *    repetición innecesaria bloqueaba la herencia del color editado en
 *    Design (que solo pinta el contenedor). Se quita el color de los
 *    hijos: ahora heredan del contenedor como corresponde, y Design
 *    gana en un solo lugar, sin necesidad de selectores compuestos.
 *
 * Changelog 1.0.3 (2026-07-25):
 *  - overflow:hidden en .kem2-texto: sin esto, Max Height (Sizing,
 *    control nativo) limitaba la caja pero el texto igual desbordaba
 *    hacia el elemento siguiente en vez de recortarse.
 *  - column-fill: auto en las columnas de texto — REVERTIDO en 1.0.4,
 *    ver abajo.
 *
 * Changelog 1.0.4 (2026-07-25) — corrige una regresión de 1.0.3:
 *  - column-fill: auto rompía las columnas por completo: con altura
 *    automática (este contenedor no tiene altura fija), "auto" no sabe
 *    cuándo se llenó la columna 1, así que metía todo el texto ahí y
 *    la columna 2 quedaba vacía. Revertido a column-fill: balance
 *    (default del navegador), que sí funciona con altura automática.
 *  - El hueco en blanco al inicio de una columna balanceada (el
 *    problema original que 1.0.3 intentaba resolver) queda sin
 *    solución definitiva por ahora: es una limitación conocida del
 *    layout nativo de columnas CSS con bloques break-inside:avoid, y
 *    no hay un cambio de una línea que lo arregle sin arriesgar romper
 *    la función básica de las columnas otra vez.
 *
 * Changelog 1.0.5 (2026-07-25):
 *  - Faltaba font-family en el título: el módulo ya tenía la variable
 *    --kem2-txt-serif (usada en capitular y cita) pero nunca se aplicó
 *    a .kem2-txt-title, así que el título caía en el sans del tema en
 *    vez del serif del design system. Mismo patrón encontrado en
 *    Newsletter y Activity List.
 *
 * Changelog 1.0.6 (2026-07-25):
 *  - Se agregan reglas default para h1/h2/h5/h6 internos (antes solo
 *    existían h3/h4). Ahora los 6 niveles tienen tamaño/margen propio
 *    y quedan expuestos como secciones de fuente independientes en
 *    Design (ver kem2-texto.php).
 */

/* ---------- Variables por identidad ---------- */
.kem2-texto{
  overflow: hidden; /* necesario para que Max Height (Sizing, nativo de Design) recorte el contenido en vez de desbordarlo */
  --kem2-txt-ink: #12131c;         /* ZIHT ink */
  --kem2-txt-gray: #40424f;        /* gray-700 */
  --kem2-txt-soft: #7c7e8c;        /* gray-500 */
  --kem2-txt-accent: #4800fe;      /* brand-600 */
  --kem2-txt-line: #e8e9f0;
  --kem2-txt-serif: 'Source Serif 4', Georgia, serif;
  --kem2-txt-q-bg-d: #0b0c1a;      /* navy-950 */
  --kem2-txt-q-ink: #e9e9f7;
  --kem2-txt-q-cite: #8b8fc0;
}
.kem2-texto.kem-ptf{
  --kem2-txt-gray: #3c4a3e;
  --kem2-txt-accent: #a9781f;      /* PTF gold */
  --kem2-txt-serif: 'Cormorant Garamond', Georgia, serif;
  --kem2-txt-q-bg-d: #14261a;      /* ptf-green-950 */
}

/* ---------- Bloque ---------- */
.kem2-texto.kem2-txt-maxw .kem2-txt-inner{ max-width: var(--kem2-txt-maxw, 720px); }
.kem2-texto.kem2-txt-maxw.kem2-txt-align-center .kem2-txt-inner{ margin-left: auto; margin-right: auto; }

/* ---------- Cabecera ---------- */
.kem2-txt-title{ font-family: var(--kem2-txt-serif); color: var(--kem2-txt-ink); font-size: 26px; margin: 0 0 8px; }
.kem2-txt-subtitle{ color: var(--kem2-txt-soft); font-size: 17px; margin: 0 0 18px; }

/* ---------- Cuerpo ---------- */
.kem2-txt-body{ color: var(--kem2-txt-gray); font-size: 16.5px; line-height: 1.7; }
.kem2-texto .kem2-txt-body p{
  margin: 0 0 var(--kem2-txt-pgap, 16px) !important; /* protege el ritmo vertical de CSS externo de Divi/tema */
  /* color: hereda de .kem2-txt-body a propósito, para que el color editado en Design se propague */
}
.kem2-texto .kem2-txt-body > p:last-child{ margin-bottom: 0 !important; }
.kem2-texto .kem2-txt-body h1{ color: var(--kem2-txt-ink); font-size: 30px; margin: var(--kem2-txt-hgap, 26px) 0 12px !important; }
.kem2-texto .kem2-txt-body h2{ color: var(--kem2-txt-ink); font-size: 24px; margin: var(--kem2-txt-hgap, 26px) 0 11px !important; }
.kem2-texto .kem2-txt-body h3{ color: var(--kem2-txt-ink); font-size: 20px; margin: var(--kem2-txt-hgap, 26px) 0 10px !important; }
.kem2-texto .kem2-txt-body h4{ color: var(--kem2-txt-ink); font-size: 17px; margin: var(--kem2-txt-hgap, 26px) 0 8px !important; }
.kem2-texto .kem2-txt-body h5{ color: var(--kem2-txt-ink); font-size: 15px; margin: var(--kem2-txt-hgap, 26px) 0 7px !important; }
.kem2-texto .kem2-txt-body h6{ color: var(--kem2-txt-ink); font-size: 13px; margin: var(--kem2-txt-hgap, 26px) 0 6px !important; }
.kem2-texto .kem2-txt-body h1:first-child, .kem2-texto .kem2-txt-body h2:first-child,
.kem2-texto .kem2-txt-body h3:first-child, .kem2-texto .kem2-txt-body h4:first-child,
.kem2-texto .kem2-txt-body h5:first-child, .kem2-texto .kem2-txt-body h6:first-child{ margin-top: 0 !important; }

/* Justificado y guiones */
.kem2-txt-justify .kem2-txt-body{ text-align: justify; }
.kem2-txt-hyphens .kem2-txt-body{ hyphens: auto; -webkit-hyphens: auto; }

/* Columnas de texto (1–4), propiedad interna del módulo — no toca la fila/row de Divi */
.kem2-txt-cols-2, .kem2-txt-cols-3, .kem2-txt-cols-4{
  column-gap: var(--kem2-txt-colgap, 48px);
  /* column-fill se deja en su default (balance): con altura automática
     (este contenedor no tiene una altura fija), "auto" no sabe cuándo
     "se llenó" la primera columna y deja vacía la segunda. "balance" es
     el único modo que reparte contenido entre columnas sin una altura
     explícita. El hueco en blanco al inicio de una columna balanceada
     (cuando hay bloques con break-inside:avoid) queda como limitación
     conocida del layout nativo de columnas, sin solución de una línea
     que no arriesgue romper la función básica de las columnas. */
}
.kem2-txt-cols-2{ column-count: 2; }
.kem2-txt-cols-3{ column-count: 3; }
.kem2-txt-cols-4{ column-count: 4; }
.kem2-txt-cols-2 > *, .kem2-txt-cols-3 > *, .kem2-txt-cols-4 > *{ break-inside: avoid; }
@media (max-width: 1100px){
  .kem2-txt-cols-3, .kem2-txt-cols-4{ column-count: 2; }
}
@media (max-width: 900px){
  .kem2-txt-cols-2, .kem2-txt-cols-3, .kem2-txt-cols-4{ column-count: 1; }
}

/* ---------- Listas ---------- */
.kem2-txt-body ul{ list-style-type: var(--kem2-txt-li-marker, disc); }
.kem2-txt-body ul, .kem2-txt-body ol{
  padding-left: var(--kem2-txt-li-indent, 21px);
  margin: 0 0 var(--kem2-txt-pgap, 16px);
  /* color: hereda de .kem2-txt-body a propósito, para que el color editado en Design se propague */
}
.kem2-txt-body li{ margin-bottom: var(--kem2-txt-li-gap, 8px); }
.kem2-txt-body li::marker{ color: var(--kem2-txt-li-color, var(--kem2-txt-accent)); }

/* ---------- Enlaces ---------- */
.kem2-txt-body a{
  color: var(--kem2-txt-a, var(--kem2-txt-accent));
  text-decoration-line: var(--kem2-txt-a-ul, underline);
  text-decoration-style: var(--kem2-txt-a-us, solid);
  text-decoration-thickness: var(--kem2-txt-a-uw, 1px);
  text-underline-offset: var(--kem2-txt-a-uo, 2px);
  transition: color .15s ease;
}
.kem2-txt-body a:hover{ color: var(--kem2-txt-a-hover, var(--kem2-txt-ink)); }

/* ---------- Capitular ---------- */
.kem2-txt-dropcap{
  font-family: var(--kem2-txt-serif);
  font-size: 64px;
  line-height: .78;
  float: left;
  padding: 6px 8px 0 0;
  color: var(--kem2-txt-accent);
  font-weight: 500;
}

/* ---------- Imágenes flotadas ---------- */
.kem2-txt-float{ display: block; }
.kem2-txt-float-1{ width: var(--kem2-txt-img1-w, 38%); }
.kem2-txt-float-2{ width: var(--kem2-txt-img2-w, 38%); }
.kem2-txt-float-right{ float: right; margin: 4px 0 18px 28px; }
.kem2-txt-float-left{ float: left; margin: 4px 28px 18px 0; }
.kem2-txt-img{ width: 100%; height: auto; display: block; }
.kem2-txt-img-empty{
  display: block; width: 100%; padding-top: 66%;
  background: repeating-linear-gradient(45deg, #eceef4, #eceef4 10px, #f6f7fb 10px, #f6f7fb 20px);
  border: 1px dashed #dbdde6;
}
@media (max-width: 640px){
  .kem2-texto:not(.kem2-txt-imgs-float-mobile) .kem2-txt-float{
    float: none; width: 100%; margin: 12px 0 16px;
  }
}

/* ---------- Comentario destacado ---------- */
.kem2-txt-comment{
  background: var(--kem2-txt-cm-bg, #f6f7fb);
  border-left: 3px solid var(--kem2-txt-cm-bc, var(--kem2-txt-accent));
  padding: 18px 22px;
  margin: 0 0 var(--kem2-txt-pgap, 16px);
  font-size: 15px;
  color: var(--kem2-txt-gray);
  clear: both;
}

/* ---------- Cita (charter-quote como default) ---------- */
.kem2-txt-quote{
  margin: 0 0 var(--kem2-txt-pgap, 16px);
  padding: 40px 46px;
  background: var(--kem2-txt-q-bg, var(--kem2-txt-q-bg-d));
  border-left: 3px solid var(--kem2-txt-q-bc, var(--kem2-txt-accent));
  clear: both;
}
.kem2-txt-quote p{
  font-family: var(--kem2-txt-serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--kem2-txt-q-ink);
  margin: 0 0 12px;
  line-height: 1.5;
}
.kem2-txt-quote cite{
  font-size: 12px;
  color: var(--kem2-txt-q-cite);
  font-style: normal;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---------- Nota pequeña ---------- */
.kem2-txt-note{
  font-size: 12.5px;
  color: var(--kem2-txt-soft);
  margin: 14px 0 0;
  clear: both;
}

/* ---------- Firmas ---------- */
.kem2-txt-sigs{ display: flex; gap: 40px; margin-top: 26px; clear: both; }
.kem2-txt-sigs-right{ justify-content: flex-end; text-align: right; }
.kem2-txt-sigs-center{ justify-content: center; text-align: center; }
.kem2-txt-sigs-left{ justify-content: flex-start; }
.kem2-txt-sig{ display: flex; flex-direction: column; }
.kem2-txt-sigs-right .kem2-txt-sig{ align-items: flex-end; }
.kem2-txt-sigs-center .kem2-txt-sig{ align-items: center; }
.kem2-txt-sig-img{ max-width: 160px; height: auto; margin-bottom: 6px; }
.kem2-txt-sig-name{ color: var(--kem2-txt-ink); font-weight: 600; font-size: 15px; }
.kem2-txt-sig-role{ color: var(--kem2-txt-soft); font-size: 12.5px; letter-spacing: .03em; }

/* ---------- Botones ---------- */
.kem2-txt-buttons{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; clear: both; }
.kem2-txt-buttons-center{ justify-content: center; }
.kem2-txt-buttons-right{ justify-content: flex-end; }
.kem2-txt-btn{
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #ffffff;
  transition: opacity .15s ease;
}
.kem2-txt-btn:hover{ opacity: .85; }
.kem2-txt-btn-1{ background: var(--kem2-txt-b1-bg, var(--kem2-txt-accent)); border: var(--kem2-txt-b1-bw,1px) var(--kem2-txt-b1-bs,solid) var(--kem2-txt-b1-bc,transparent); border-radius: var(--kem2-txt-b1-br,4px); padding: var(--kem2-txt-b1-pv,8px) var(--kem2-txt-b1-ph,18px); }
.kem2-txt-btn-2{ background: var(--kem2-txt-b2-bg, var(--kem2-txt-accent)); border: var(--kem2-txt-b2-bw,1px) var(--kem2-txt-b2-bs,solid) var(--kem2-txt-b2-bc,transparent); border-radius: var(--kem2-txt-b2-br,4px); padding: var(--kem2-txt-b2-pv,8px) var(--kem2-txt-b2-ph,18px); }
.kem2-txt-btn-3{ background: var(--kem2-txt-b3-bg, var(--kem2-txt-accent)); border: var(--kem2-txt-b3-bw,1px) var(--kem2-txt-b3-bs,solid) var(--kem2-txt-b3-bc,transparent); border-radius: var(--kem2-txt-b3-br,4px); padding: var(--kem2-txt-b3-pv,8px) var(--kem2-txt-b3-ph,18px); }

/* ---------- Footer lead ---------- */
.kem2-txt-lead{
  display: block;
  margin-top: 28px;
  padding: 18px 22px;
  border: 1px solid var(--kem2-txt-line);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
  clear: both;
}
.kem2-txt-lead:hover{ border-color: var(--kem2-txt-accent); background: #fbfbfe; }
.kem2-txt-lead-label{
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--kem2-txt-accent);
  margin-bottom: 4px;
}
.kem2-txt-lead-title{ display: block; color: var(--kem2-txt-ink); font-size: 16px; font-weight: 600; }
.kem2-txt-lead-arrow{ color: var(--kem2-txt-accent); }