/**
 * Aislamiento de la sección verbatim (.lcl-raw).
 *
 * Una sección `raw` pinta el markup exacto de un mockup dentro de `.lcl-container`. El markup hereda
 * color, fuente y suavizado desde el contexto de su wrapper (como en el mockup original), pero el
 * tema impone dos cosas que rompen el 1:1:
 *
 *   1. Reglas de ELEMENTO (.lcl-container h1 { color: ... }) que le GANAN a la herencia → el texto
 *      sin color inline (ej. el h1) toma el color del tema en vez del heredado del mockup.
 *   2. `-webkit-font-smoothing: antialiased` en el reset base → adelgaza el texto respecto del
 *      default del navegador que usaba el mockup.
 *
 * Acá restauramos el contexto del mockup SOLO dentro de .lcl-raw. Los estilos inline del propio
 * markup siguen mandando (inline gana a cualquier regla), así que esto no pisa el diseño: solo evita
 * que el tema se filtre donde el mockup dependía de la herencia / del default.
 */

.lcl-container .lcl-raw {
  /* Base del wrapper del mockup: Manrope + suavizado por defecto (no el antialiased del tema). */
  font-family: "Manrope", system-ui, sans-serif;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Devolver el color a la herencia. La clase .lcl-raw se duplica (.lcl-raw.lcl-raw) para subir la
   especificidad a 0,3,1 y vencer SIEMPRE —sin depender del orden de carga— la regla de elemento del
   tema que colorea h1..h4 bare (.lcl-container.theme-<x> h1 = 0,2,1). Los elementos con color inline
   (el mockup los tiene en subtítulos, botones, tarjeta) no se tocan: inline gana a todo. */
.lcl-container .lcl-raw.lcl-raw h1,
.lcl-container .lcl-raw.lcl-raw h2,
.lcl-container .lcl-raw.lcl-raw h3,
.lcl-container .lcl-raw.lcl-raw h4,
.lcl-container .lcl-raw.lcl-raw h5,
.lcl-container .lcl-raw.lcl-raw h6,
.lcl-container .lcl-raw.lcl-raw p,
.lcl-container .lcl-raw.lcl-raw a,
.lcl-container .lcl-raw.lcl-raw span,
.lcl-container .lcl-raw.lcl-raw strong,
.lcl-container .lcl-raw.lcl-raw li,
.lcl-container .lcl-raw.lcl-raw div {
  color: inherit;
}