/* ============================================================
   BLOQUE DE CAPTACIÓN DE LA BIBLIOTECA — 19-ago-2026

   🔴 POR QUÉ EXISTE COMO COMPONENTE

   El bloque vivía embebido en `biblioteca.html` y Cesar pidió que
   estuviera IDÉNTICO en las 15 entradas. Copiarlo quince veces
   habría garantizado que dejara de ser idéntico a la primera
   edición: se cambia el texto en la biblioteca, se olvidan los
   artículos, y nadie lo nota porque cada página se ve bien sola.
   Es el defecto uniforme al revés — aquí el fallo aparecería en
   catorce piezas y la que se mire estará bien.

   🔴 CLASES `om-lm-` PROPIAS, NO LAS DE LA BIBLIOTECA

   El bloque original usaba `.eyebrow`, que **existe en
   `biblioteca.html` y no en los artículos** —ahí la marca de
   sección se llama `.kicker`—. Insertado tal cual, el rótulo
   «LOS DOS DOCUMENTOS BASE» habría salido sin versalitas, sin
   color y sin las rayas laterales en las 15 entradas.

   🔴 COLORES EN LITERAL, NO `var(--acc)`

   Cicatriz del 19-ago: `--gr` vale `#8ea09a` en las internas y
   `#3a4c44` en `styles.css`, y con `var(--gr, respaldo)` el
   respaldo NUNCA entra porque la variable existe en ambas. Un
   componente que se inserta en páginas ajenas declara todo lo
   que no quiere heredar.

   ⚠️ Y declara también lo que las hojas ajenas le imponen: los
   artículos traen `.art p{font-size:17px}` y `.art li{...}`, que
   alcanzarían al bloque si quedara dentro del <article>. Va
   FUERA, después de `</article>`, que además es donde Cesar lo
   pidió: cuerpo → CTA de diagnóstico → captación → seguir
   leyendo → pie.
   ============================================================ */

.om-lm {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px 8px;
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
  text-align: left;          /* las landings de recursos centran por etiqueta */
}

.om-lm-in {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 44px;
  align-items: center;
  background: #0c1210;
  border: 1px solid #1c2420;
  border-radius: 20px;
  padding: 38px 40px;
}

/* ---------- Columna de texto ---------- */
.om-lm-eyebrow {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif;
  font-size: 12px; font-weight: 600;
  letter-spacing: 4px; text-transform: uppercase;
  color: #c8845a;
  display: inline-flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.om-lm-eyebrow::before, .om-lm-eyebrow::after {
  content: ''; width: 26px; height: 1px; background: #c8845a; opacity: .5;
}

.om-lm-txt h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 34px; font-weight: 600; line-height: 1.12;
  color: #f0ece4; margin: 0 0 14px;
}
.om-lm-txt h2 em { color: #c8845a; font-style: italic; }

.om-lm-lede { font-size: 14px; color: #8ea09a; line-height: 1.7; margin: 0 0 18px; }

.om-lm-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.om-lm-list li {
  font-size: 13.5px; color: #8ea09a; line-height: 1.6;
  padding-left: 18px; position: relative; margin: 0;
}
.om-lm-list li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: #c8845a;
}
.om-lm-list b { color: #f0ece4; font-weight: 600; }

/* ---------- Caja del formulario ---------- */
.om-lm-box { background: #06090a; border: 1px solid #1c2420; border-radius: 16px; padding: 26px; }
.om-lm-frm { display: flex; flex-direction: column; gap: 10px; margin: 0; }

.om-lm-box input[type=email] {
  width: 100%; padding: 13px 15px;
  border: 1px solid #1c2420; border-radius: 9px;
  background: #0c1210; color: #f0ece4;
  font-family: 'Inter', system-ui, sans-serif; font-size: 14px;
}
.om-lm-box input[type=email]::placeholder { color: #5f716b; }
.om-lm-box input[type=email]:focus { outline: 2px solid #c8845a; outline-offset: 1px; border-color: #c8845a; }

.om-lm-box button {
  padding: 13px 20px; border: 0; border-radius: 9px; cursor: pointer;
  background: #c8845a; color: #1a0e08;
  font-family: 'Inter', system-ui, sans-serif; font-size: 13px; font-weight: 600;
  transition: opacity .2s;
}
.om-lm-box button:hover { opacity: .9; }
.om-lm-box button[disabled] { opacity: .6; cursor: default; }

.om-lm-box .frm-msg { font-size: 13px; line-height: 1.5; margin: 2px 0 0; color: #8ea09a; }
.om-lm-box .frm-msg[data-estado=ok]    { color: #7fa99a; }
.om-lm-box .frm-msg[data-estado=error] { color: #d98b6a; }

.om-lm-nota { font-size: 11.5px; color: #5f716b; margin: 12px 0 0; line-height: 1.5; }

/* La trampa se oculta sin sacarla del flujo: a -9999px seguiría ocupando ese
   punto y puede provocar scroll horizontal en móvil. */
.om-lm-trampa {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Entrega en pantalla ---------- */
.om-lm-dl {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid #1c2420;
}
.om-lm-dl a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 15px; border: 1px solid #1c2420; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: #f0ece4; text-decoration: none;
  transition: border-color .2s, background .2s;
}
.om-lm-dl a:hover { border-color: #c8845a; background: rgba(200, 132, 90, .06); }
.om-lm-dl span { font-size: 10px; font-weight: 600; letter-spacing: 1.5px; color: #c8845a; }
.om-lm-dl:focus { outline: none; }

/* ---------- Móvil ----------
   ⚠️ El selector repite el peso de la regla base. Una media query no añade
   especificidad: si arriba se hubiera declarado `.om-lm-box .om-lm-nota`,
   un `.om-lm-nota` suelto aquí perdería y este bloque no haría nada. Es
   INC-22, que costó unos botones de 18px con el CSS móvil ya escrito. */
@media (max-width: 860px) {
  .om-lm { padding: 0 20px 8px; }
  .om-lm-in { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .om-lm-txt h2 { font-size: 28px; }
  .om-lm-eyebrow { font-size: 11px; letter-spacing: 3px; }
}

@media (max-width: 380px) {
  .om-lm { padding: 0 14px 8px; }
  .om-lm-in { padding: 24px 18px; }
  .om-lm-txt h2 { font-size: 25px; }
  /* Las rayas del rótulo se van: en 320px empujaban el rótulo a tres líneas. */
  .om-lm-eyebrow::before, .om-lm-eyebrow::after { display: none; }
}