/* =========================================================================
   LaCardio · enGuardia — hoja de estilos
   -------------------------------------------------------------------------
   Compuesta desde la biblioteca del DS de LaCardio.
   Orden: base → átomos → moléculas → organismos → bloques propios (.eg-*).
   Las piezas lc-* son de la biblioteca; las .eg-* son propias de esta página.
   ========================================================================= */


/* ───────────────────────────────────────────────────────────────────────
   BASE · biblioteca/base/base.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   LaCardio · Base — reset, tipografía base y utilidades de entrada
   Requiere tokens/tokens.css cargado antes.
   Dependencias externas (ver README de la biblioteca):
   - Google Fonts: Fira Sans (headings) + Open Sans (body/UI)
   - Bootstrap 5 CDN: solo utilidades responsive (d-none, d-lg-block…)
   ========================================================================= */

/* — Reset —————————————————————————————————————————————————— */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  color: var(--lc-text-primary);
  background: var(--lc-bg-surface);
  -webkit-font-smoothing: antialiased;
  /* En mobile el header es fixed: el body compensa su alto. */
}

@media (min-width: 992px) {
  body {
    padding-top: 0;
  }
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--lc-font-heading);
  margin: 0;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================================
   ENTRADA AL HACER SCROLL — el único sistema del DS.

   Hasta el 2026-09-04 convivían dos que hacían lo mismo: este (.reveal-fade,
   de la familia especialidad) y .lc-animate (vanilla, del home, 48px y otra
   curva). el equipo de diseño se quedó con este, así que el otro se fue: sus consumidores
   —las secciones con id del home— los marca ahora este mismo, desde
   js/lacardio.js. La consecuencia visible es que esas secciones entran con
   12px de recorrido en vez de 48; es el mismo movimiento que el resto del
   sitio, que era el punto.

   El JS agrega .reveal-init al iniciar y .is-visible al entrar al viewport.
   Sin JS o con prefers-reduced-motion el contenido queda visible por defecto.
   ========================================================================= */
.reveal-fade {
  transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.reveal-fade.reveal-init {
  opacity: 0;
  transform: translateY(12px);
}

.reveal-fade.is-visible {
  opacity: 1;
  transform: none;
}


/* ───────────────────────────────────────────────────────────────────────
   ATOMO · biblioteca/componentes/lc-icon/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-icon · Ícono
   -------------------------------------------------------------------------
   Átomo. 2026-08-31.

   Este átomo es, sobre todo, UNA CONVENCIÓN — y la buena noticia del censo
   es que el sistema ya la cumple casi entera por su cuenta:

     · 173 SVG inline contra 21 <img>  → la técnica es SVG inline
     · 174 usan currentColor, 2 no     → el color lo hereda del padre
     · 171 de 173 llevan aria-hidden   → el ícono es decorativo

   El inventario avisaba de «tres técnicas conviviendo» (SVG inline, <img> y
   mask con data-URI). El censo lo corrige: la de mask NO está en la
   biblioteca, vive en el bundle del FAB del home. Aquí solo hay dos, y una
   gana por goleada.

   Tamaños en uso: 24 (60 veces) · 16 (10) · 14 (9) · 20 (8) · 18 (5).
   El 24 es el ícono por defecto del sistema.

   Por eso el CSS es corto: lo único que hace falta es que el SVG no se
   deforme dentro de un flex y que su tamaño sea cambiable sin tocar el
   marcado.

   REGLAS al escribir un ícono nuevo:
     1. SVG inline, no <img>: así hereda el color y no pide otra petición.
     2. stroke/fill = "currentColor", NUNCA un hex.
     3. aria-hidden="true" si es decorativo. Si el ícono ES la única
        etiqueta (un botón solo con ícono), el nombre va en aria-label
        del botón, no en el SVG.

   API:
     <svg class="lc-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">…</svg>
     <svg class="lc-icon lc-icon--sm" …>
   ========================================================================= */

.lc-icon {
  --icon-size: 24px;

  flex-shrink: 0;          /* dentro de un flex, jamás se aplasta */
  width: var(--icon-size);
  height: var(--icon-size);
  display: inline-block;
  vertical-align: middle;
  color: inherit;          /* el currentColor del SVG resuelve aquí */
}

.lc-icon--sm { --icon-size: 16px; }
.lc-icon--lg { --icon-size: 32px; }


/* ───────────────────────────────────────────────────────────────────────
   ATOMO · biblioteca/componentes/lc-btn/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-btn · Botón
   -------------------------------------------------------------------------
   Átomo. Sale de base/base.css el 2026-08-31 (hallazgo #3 del inventario:
   «hay seis definiciones del mismo botón» — el censo real encontró ~15).

   JERARQUÍA fijada por el equipo de diseño el 2026-08-31:
     · --primary   azul primary sólido, label blanco   → la acción principal
     · --outline   borde y label azul, fondo transparente → la secundaria
     · --inverted  fondo blanco, label azul primary     → primaria sobre oscuro
     · --hero      rojo de marca — ÚNICAMENTE en banners hero

   El rojo lleva el nombre del sitio donde puede usarse, no el de su papel,
   a propósito: así la regla no se puede olvidar al escribir la clase.

   API:
     <a class="lc-btn lc-btn--primary">Agenda tu cita</a>
     <button class="lc-btn lc-btn--outline lc-btn--sm">Ver más</button>

   Tamaño y variante son ejes independientes: cualquier --sm/--lg combina con
   cualquier variante de color.

   RESPUESTA TÁCTIL, igual para todas: hover eleva (sombra), :active hunde
   (scale .97). Sobre oscuro la sombra se apaga, porque no se vería.
   ========================================================================= */

.lc-btn {
  /* ── API local ──────────────────────────────────────────────────────────
     La altura manda y el padding vertical es 0: el texto se centra con
     inline-flex. Es más robusto que calcular padding, porque un botón con
     dos líneas o con ícono no se deforma.

     Alturas tomadas del código, no inventadas: 42 es la barra del header,
     48 el hero, 56 areas/donar. Antes había cinco (42·48·54·56·58); las de
     54 y 58 caen a 56, una diferencia de 2px. */
  --btn-height: 48px;
  --btn-pad-x: 28px;
  --btn-radius: var(--lc-radius-base);
  --btn-bg: transparent;
  --btn-color: var(--lc-brand-primary);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lc-space-xs);        /* separación si lleva ícono */

  min-height: var(--btn-height);
  padding-block: 0;
  padding-inline: var(--btn-pad-x);
  box-sizing: border-box;

  font-family: var(--lc-font-body);
  font-size: var(--lc-size-btn-lg);
  font-weight: var(--lc-fw-bold);
  line-height: var(--lc-lh-body);
  letter-spacing: var(--lc-ls-btn);
  text-align: center;
  text-decoration: none;          /* casi siempre es un <a> */
  white-space: nowrap;

  background: var(--btn-bg);
  color: var(--btn-color);
  border: 1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: filter .2s ease, background .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .2s ease, transform .1s ease;
}

/* ── Respuesta táctil ───────────────────────────────────────────────────────
   Entran al canon el 2026-09-04 (hallazgo 31). No son un adorno nuevo: los
   traían 8 de los 11 botones propios (la sombra) y 4 (el press), cada uno por
   su cuenta y ya divergiendo — dos copias del mismo botón «ver todos» y una
   tenía sombra y la otra no. Aquí valen para todas las variantes y tamaños.

   El press es el de Button.jsx de React (scale .97), que ya lo tenía: con esto
   el átomo se comporta igual en los dos stacks, que era una de las diferencias
   HTML↔React pendientes. */
.lc-btn:hover { box-shadow: var(--lc-shadow-btn); }

.lc-btn:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 2px 6px rgba(0, 45, 114, 0.25);
}

/* Sobre oscuro la sombra azul no se ve y el halo ensucia el borde blanco. */
.lc-btn--inverted:hover,
.lc-btn--inverted-outline:hover { box-shadow: none; }

/* Quien no quiere moverse tampoco se mueve aquí. */
@media (prefers-reduced-motion: reduce) {
  .lc-btn { transition: none; }
  .lc-btn:active { transform: none; }
}

.lc-btn:focus-visible {
  outline: 2px solid var(--lc-brand-primary);
  outline-offset: 2px;
}

.lc-btn:disabled,
.lc-btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}


/* =========================================================================
   Tamaños · alto + aire lateral. Nada más cambia entre ellos.
   ========================================================================= */

/* Para barras compactas: es la altura exacta del botón del header. */
.lc-btn--sm { --btn-height: 42px; --btn-pad-x: 16px; }

/* Para llamadas destacadas: areas, donar, el buscador del directorio. */
.lc-btn--lg { --btn-height: 56px; --btn-pad-x: 30px; }


/* =========================================================================
   Variantes · SOBRE FONDO CLARO
   ========================================================================= */

/* La acción principal. */
.lc-btn--primary {
  --btn-bg: var(--lc-brand-primary);
  --btn-color: var(--lc-text-on-brand);
  --btn-border: var(--lc-brand-primary);
}
.lc-btn--primary:hover { --btn-bg: var(--lc-brand-primary-hover); --btn-border: var(--lc-brand-primary-hover); }
.lc-btn--primary:active { --btn-bg: var(--lc-brand-primary-active); --btn-border: var(--lc-brand-primary-active); }

/* La secundaria. Mismo peso visual de forma, menos de color. */
.lc-btn--outline {
  --btn-bg: transparent;
  --btn-color: var(--lc-brand-primary);
  --btn-border: var(--lc-brand-primary);
}
.lc-btn--outline:hover {
  --btn-bg: var(--lc-brand-primary);
  --btn-color: var(--lc-text-on-brand);
}

/* ⚠️ SOLO EN BANNERS HERO. El rojo es el color de máxima atención de la
   marca; fuera del hero compite con todo y deja de significar nada. Para
   cualquier otra acción principal va --primary. */
.lc-btn--hero {
  --btn-bg: var(--lc-brand-secondary);
  --btn-color: var(--lc-text-on-brand);
  --btn-border: var(--lc-brand-secondary);
}
.lc-btn--hero:hover { --btn-bg: var(--lc-brand-secondary-hover); --btn-border: var(--lc-brand-secondary-hover); }


/* =========================================================================
   Variantes · SOBRE FONDO OSCURO (bandas azules, heros con foto)
   ========================================================================= */

/* La primaria invertida: fondo blanco, label azul primary. */
.lc-btn--inverted {
  --btn-bg: var(--lc-bg-surface);
  --btn-color: var(--lc-brand-primary);
  --btn-border: var(--lc-bg-surface);
}
.lc-btn--inverted:hover { filter: brightness(0.94); }

/* La secundaria invertida: el reverso de --outline sobre oscuro. No estaba
   en la lista del equipo de diseño, pero existe en el código (el ghost blanco del hero
   y el botón de WhatsApp de la agenda) y es la pareja natural de --inverted:
   sin ella, una banda oscura no tiene acción secundaria. */
.lc-btn--inverted-outline {
  --btn-bg: transparent;
  --btn-color: var(--lc-text-on-brand);
  --btn-border: var(--lc-text-on-brand);
}
.lc-btn--inverted-outline:hover {
  --btn-bg: var(--lc-text-on-brand);
  --btn-color: var(--lc-brand-primary);
}

.lc-btn--inverted:focus-visible,
.lc-btn--inverted-outline:focus-visible {
  outline-color: var(--lc-text-on-brand);
}


/* =========================================================================
   Las dos excepciones que el equipo de diseño admitió en el canon (2026-09-02)

   El inventario encontró tres botones que no cabían (hallazgo 9). Dos son
   excepciones legítimas y entran aquí con nombre propio; la tercera —la
   píldora de lc-agenda— era un mal uso y se normalizó al radio de todos.
   ========================================================================= */

/* --donate · el CTA de donación de la Fundación. Outline rojo, y el rojo solo
   vivía en banners hero: es la excepción de marca, no una divergencia. Era
   .lc-btn-dona, suelto en el header de la Fundación. Sus medidas ya eran las
   de --sm (42px de alto, 16px de padding), así que se compone: lc-btn--sm. */
.lc-btn--donate {
  --btn-bg: var(--lc-bg-surface);
  --btn-color: var(--lc-brand-secondary);
  --btn-border: var(--lc-brand-secondary);
}
.lc-btn--donate:hover { --btn-bg: var(--lc-red-50); }
.lc-btn--donate:focus-visible { outline-color: var(--lc-brand-secondary); }

/* --joined · el botón pegado a un input, que pierde el radio del lado que
   toca. No es una piel distinta: es composición, y por eso no toca ni el
   color ni el tamaño. Era el radius: 0 6px 6px 0 escrito a mano en el
   buscador del directorio. */
.lc-btn--joined {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}


/* ───────────────────────────────────────────────────────────────────────
   ATOMO · biblioteca/componentes/lc-iconbtn/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-iconbtn · Botón de ícono
   -------------------------------------------------------------------------
   Átomo. 2026-08-31. El octavo — no estaba en la lista original del
   inventario; salió al barrer el código buscando lo que la lista no cubría.

   Un control cuadrado cuya única etiqueta es un ícono: las flechas de un
   carrusel, el cerrar de un panel. NO es un lc-btn pequeño: un botón tiene
   texto y su ancho lo decide el texto; este es un área táctil fija.

   Unifica tres:
     · .lc-edu-months__arrow  44px, círculo outline, hover TIÑE
     · .lc-carousel__arrow           42px, círculo outline, hover INVIERTE
     · .lc-mobile-bottom-nav__close  48px, sin caja, sobre oscuro

   Dos decisiones:

   1. HOVER = invierte (fondo navy, ícono blanco). Había dos respuestas;
      gana la que ya da .lc-btn--outline, para que outline signifique lo
      mismo en todo el sistema.
   2. TAMAÑO base 44px, no 42. No es por redondear: 44×44 es el mínimo de
      área táctil que pide WCAG 2.5.5 (y la guía de iOS). 42 se queda corto
      por 2px, así que el que sube es el que estaba mal.

   El borde va en --lc-border-default (neutro) y no en navy como el botón de
   texto: esto es cromo de navegación, no una llamada a la acción, y un
   círculo de 44px con borde navy pesa demasiado en la página.

   ACCESIBILIDAD — no es opcional: al no haber texto, el nombre del control
   va SIEMPRE en aria-label, y el SVG de dentro en aria-hidden="true".

   API:
     <button class="lc-iconbtn" aria-label="Mes anterior">
       <svg class="lc-icon" aria-hidden="true">…</svg>
     </button>
   ========================================================================= */

.lc-iconbtn {
  --iconbtn-size: 44px;
  --iconbtn-bg: var(--lc-bg-surface);
  --iconbtn-color: var(--lc-brand-primary);
  --iconbtn-border: var(--lc-border-default);

  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--iconbtn-size);
  height: var(--iconbtn-size);
  padding: 0;
  box-sizing: border-box;

  color: var(--iconbtn-color);
  background: var(--iconbtn-bg);
  border: 1px solid var(--iconbtn-border);
  border-radius: var(--lc-radius-full);
  cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}

.lc-iconbtn:hover {
  --iconbtn-bg: var(--lc-brand-primary);
  --iconbtn-color: var(--lc-text-on-brand);
  --iconbtn-border: var(--lc-brand-primary);
}

.lc-iconbtn:focus-visible {
  outline: 2px solid var(--lc-brand-primary);
  outline-offset: 2px;
}

.lc-iconbtn:disabled,
.lc-iconbtn[aria-disabled="true"] {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}


/* — Tamaños ——————————————————————————————————————————————————————— */
/* 44px es el suelo accesible, así que no hay --sm por debajo. */
.lc-iconbtn--lg { --iconbtn-size: 48px; }


/* — Sin caja · el cerrar de un panel, sobre foto o banda oscura ————— */
.lc-iconbtn--ghost {
  --iconbtn-bg: transparent;
  --iconbtn-border: transparent;
  --iconbtn-color: currentColor;
}
.lc-iconbtn--ghost:hover {
  --iconbtn-bg: rgba(255, 255, 255, 0.14);
  --iconbtn-border: transparent;
  --iconbtn-color: currentColor;
}
.lc-iconbtn--ghost:focus-visible { outline-color: currentColor; }


/* ───────────────────────────────────────────────────────────────────────
   ATOMO · biblioteca/componentes/lc-link/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-link · Enlace con flecha
   -------------------------------------------------------------------------
   Átomo. Extraído el 2026-08-31. «Ver todos los artículos ›», «¿Cómo
   llegar? ›», «Leer más ›».

   Es el segundo patrón más repetido del sistema después del encabezado de
   sección: SIETE definiciones, y esta vez casi idénticas entre sí. Seis de
   las siete ya coincidían en 18px / peso 700 / azul primary / gap 6px. La
   única que se sale es la de las tarjetas de sede, que va sobre foto oscura
   y por eso es blanca — de ahí --on-dark.

   No es un botón, aunque el censo de botones lo arrastrara: no tiene caja,
   ni relleno, ni borde. Es texto que lleva una flecha.

   La flecha va como SVG inline con stroke="currentColor", que es lo que ya
   hacían los siete. Así hereda el color del enlace sin duplicar nada.

   API:
     <a href="#" class="lc-link">
       Ver todos los artículos
       <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
         <path d="M9 18l6-6-6-6" stroke="currentColor" stroke-width="2"
               stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
     </a>
   ========================================================================= */

.lc-link {
  --link-color: var(--lc-brand-primary);

  display: inline-flex;
  align-items: center;
  /* Era 6px en los siete. 6 no está en la escala; se sube a xs (8px). Dos
     píxeles que nadie va a ver y un número mágico menos. */
  gap: var(--lc-space-xs);

  font-family: var(--lc-font-body);
  font-size: var(--lc-size-btn-lg);
  font-weight: var(--lc-fw-bold);
  line-height: var(--lc-lh-body);
  letter-spacing: var(--lc-ls-btn);
  color: var(--link-color);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;

  transition: gap .16s ease, opacity .16s ease;
}

/* La flecha avanza al pasar el cursor. Es el único gesto del átomo y sale
   del propio gap, así que no hace falta mover el SVG a mano. */
.lc-link:hover { gap: var(--lc-space-sm); }

.lc-link:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* El SVG no debe encogerse dentro del flex ni heredar tamaños raros. */
.lc-link svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Sobre foto o banda oscura — las tarjetas de sede. */
.lc-link--on-dark { --link-color: var(--lc-text-on-brand); }


/* --sm · el enlace dentro de una tarjeta compacta, donde 18px compite con el
   título. Sale de .lc-hero-home__quick-cta (14/18). */
.lc-link--sm {
  font-size: var(--lc-size-body-sm);
  line-height: var(--lc-lh-body-sm);
  gap: var(--lc-space-xxs);
}

.lc-link--sm:hover { gap: var(--lc-space-xs); }

.lc-link--sm svg { width: 20px; height: 20px; }


/* ───────────────────────────────────────────────────────────────────────
   ATOMO · biblioteca/componentes/lc-chip/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-chip · Chip / etiqueta
   -------------------------------------------------------------------------
   Átomo. Extraído el 2026-08-31. Una etiqueta pequeña que clasifica algo:
   un atributo de una sede («Urgencias 24/7»), una especialidad, una
   modalidad.

   Antes eran DOS formas distintas para el mismo trabajo:
     · .lc-place-card__tags ≡ .lc-cardiokids__tag  — idénticos byte a byte, radio
       3px, azul suave con borde
     · .lc-edu-chip --esp/--mod              — píldora, tinte al 8%

   El equipo de diseño unificó en la píldora el 2026-08-31: una sola forma, tres colores.

   NO es un chip: .lc-edu-month, que parece uno pero es un tab seleccionable
   con estado is-active. Eso es molécula.

   API:
     <span class="lc-chip">Urgencias 24/7</span>
     <span class="lc-chip lc-chip--esp">Cardiología</span>
   ========================================================================= */

.lc-chip {
  /* ── API local ── */
  --chip-bg: var(--lc-bg-topbar);
  --chip-color: var(--lc-brand-primary);
  --chip-border: var(--lc-blue-jordy);   /* era #AACCFF a pelo: la primitiva
                                            ya existía, solo no se usaba */

  display: inline-flex;
  align-items: center;
  gap: var(--lc-space-xxs);
  min-height: 24px;
  padding: 4px 11px;
  box-sizing: border-box;

  font-family: var(--lc-font-body);
  font-size: var(--lc-size-caption);
  font-weight: var(--lc-fw-semibold);
  line-height: 1.4;
  white-space: nowrap;

  color: var(--chip-color);
  background: var(--chip-bg);
  border: 1px solid var(--chip-border);
  border-radius: var(--lc-radius-full);
}


/* =========================================================================
   Variantes de color · la forma nunca cambia
   ========================================================================= */

/* Especialidad — tinte del azul de marca. */
.lc-chip--esp {
  --chip-bg: rgba(0, 45, 114, 0.08);     /* --lc-brand-primary al 8% */
  --chip-color: var(--lc-brand-primary);
  --chip-border: transparent;
}

/* Modalidad — tinte del rojo de marca. Aquí el rojo NO es una acción, es
   una categoría: por eso puede vivir fuera de un banner hero. */
.lc-chip--mod {
  --chip-bg: rgba(228, 0, 70, 0.08);     /* --lc-brand-secondary al 8% */
  --chip-color: var(--lc-brand-secondary);
  --chip-border: transparent;
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-sec-head/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   sec-head · Encabezado de sección
   -------------------------------------------------------------------------
   Molécula. La trinidad eyebrow + título + lead con la que abre casi todos
   los organismos del sistema. Extraída el 2026-08-31 (hallazgo #2 del
   inventario atómico): existía repetida en ~16 componentes, cada uno con su
   propio nombre de clase y con valores que habían ido divergiendo.

   Canon fijado por el equipo de diseño el 2026-08-31:
     · eyebrow → gris  --lc-text-secondary  (era 6 colores distintos)
     · título  → tinta --lc-text-primary    (era azul royal en especialidades
                                             y tinta en todo lo demás)

   API — un solo bloque, tres elementos, cuatro modificadores:

     <div class="sec-head">
       <p  class="sec-head__eyebrow">Nuestro servicio</p>
       <h2 class="sec-head__title">Atención integral</h2>
       <p  class="sec-head__lead">Contamos con un equipo…</p>
     </div>

   Los tres elementos son opcionales e independientes: un head con solo
   título es válido y no necesita modificador.
   ========================================================================= */

.lc-sec-head {
  /* ── API local ──────────────────────────────────────────────────────────
     Se sobrescriben desde el organismo que lo hospeda cuando haga falta,
     sin tocar este archivo ni añadir una clase nueva.

     El gap era 12px literal hasta el 2026-08-31: la escala saltaba de 8 a 16
     y no tenía 12, justo el valor más repetido de la biblioteca. Ya existe
     como --lc-space-sm. Hallazgo #6 cerrado. */
  --sec-head-gap: var(--lc-space-sm);
  --sec-head-measure: var(--lc-span-8);
  --sec-head-eyebrow-color: var(--lc-text-secondary);
  --sec-head-title-color: var(--lc-text-primary);
  /* Tinta, no gris: es lo que hace el codigo (9 usos contra 3). El eyebrow
     es lo unico que cede; el lead acompana al titulo. */
  --sec-head-lead-color: var(--lc-text-primary);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sec-head-gap);
  text-align: left;
}


/* =========================================================================
   Elementos
   ========================================================================= */

.lc-sec-head__eyebrow {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-eyebrow);
  font-weight: var(--lc-fw-regular);
  line-height: 1;
  letter-spacing: var(--lc-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sec-head-eyebrow-color);
}

.lc-sec-head__title {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h2);
  font-weight: var(--lc-fw-medium);
  line-height: var(--lc-lh-h2);
  letter-spacing: var(--lc-ls-heading);
  color: var(--sec-head-title-color);
}

.lc-sec-head__lead {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  font-weight: var(--lc-fw-regular);
  line-height: var(--lc-lh-body);
  letter-spacing: var(--lc-ls-body);
  color: var(--sec-head-lead-color);
}


/* =========================================================================
   Modificadores
   ========================================================================= */

/* --center · Centrado en todos los tamaños.
   Es lo que hacen hoy lc-selector-panel y los cinco encabezados de educación. Mental-
   mente es el más simple: lo que ves en desktop es lo que pasa en mobile. */
.lc-sec-head--center {
  align-items: center;
  text-align: center;
}

/* --center-lg · Centrado SOLO en desktop; en mobile vuelve a la izquierda.
   Es lo que hacen hoy symptoms, diff, portfolio y team, y su propio CSS lo
   documentaba: «Textos de sección alineados a la izquierda en mobile
   (desktop centrado)».

   ⚠️ DECISIÓN ABIERTA — que existan las dos no es una virtud del sistema, es
   la foto de dos familias que decidieron distinto (5 componentes cada una).
   Están las dos con nombre para no mover píxeles de lo ya entregado, pero
   esto se resuelve eligiendo una. Anotado como hallazgo #7. */
.lc-sec-head--center-lg {
  align-items: center;
  text-align: center;
}

/* --measure · Limita el ancho de línea. Solo tiene sentido con --center:
   un encabezado centrado sobre 12 columnas se vuelve ilegible.
   Sustituye al max-width: 760px de lc-edu-sec-head, que no caía en ninguna
   columna de la retícula. --lc-span-8 son 788px y sí. */
.lc-sec-head--measure {
  max-width: var(--sec-head-measure);
}

.lc-sec-head--center.lc-sec-head--measure,
.lc-sec-head--center-lg.lc-sec-head--measure {
  margin-inline: auto;
}

/* --sm · Título al siguiente peldaño de la escala. Es el tamaño correcto
   cuando el head no corona la sección sino que comparte fila con una imagen
   (care) o con la lista de etapas (journey): ahí el H2 completo se come la
   columna. */
.lc-sec-head--sm .lc-sec-head__title {
  font-size: var(--lc-size-h4);
  line-height: var(--lc-lh-h4);
}

/* --on-dark · Sobre las bandas azules. El eyebrow necesita subir de tono
   para no desaparecer; el token ya existe y estaba descrito exactamente
   para esto: «subtítulos/eyebrows sobre azul». */
.lc-sec-head--on-dark {
  --sec-head-eyebrow-color: var(--lc-blue-100);
  --sec-head-title-color: var(--lc-text-on-brand);
  --sec-head-lead-color: var(--lc-blue-50);
}


/* =========================================================================
   Mobile · corte en 991.98px (el `lg` de Bootstrap, el mismo de tokens.css)
   -------------------------------------------------------------------------
   El tamaño del título NO se toca aquí: --lc-size-h2 y --lc-lh-h2 ya
   cambian solos a 32/40 dentro de tokens.css. Es la única escala mobile
   confirmada en diseño. Los componentes viejos forzaban 28/34, un valor que
   no está en ningún sitio del DS — migrar a esta pieza lo corrige.
   ========================================================================= */
@media (max-width: 991.98px) {
  .lc-sec-head--center-lg {
    align-items: flex-start;
    text-align: left;
  }

  .lc-sec-head--center-lg.lc-sec-head--measure {
    margin-inline: 0;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-media/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-media · Imagen con halo
   -------------------------------------------------------------------------
   Molécula. 2026-08-31. Una imagen con una copia desenfocada detrás que hace
   de resplandor. Salió al extraer lc-dlist, cuando se vio que lc-differentiator usaba
   clases de lc-care sin declararlo.

   CUATRO definiciones para lo mismo, más una prestada:
     .lc-split--even (care)              halo 96% · top 8%   · blur 16.95 · radio xl
     .lc-split--airy (faq)               halo 91.3% · top 12% · blur 16.95 · radio lg
     .lc-grid-flanked__media-*         halo 85% · top 60px · blur 16.95 · radio xl
     .lc-stages__media-*          halo 100% + scale(1.03) · blur 16 · radio xl
     .lc-split--anchored (diff)          tomaba prestadas las de care, sin declararlo

   Y la animación de entrada (fade + scale 0.92, 1000ms) estaba copiada
   IDÉNTICA tres veces: care, diff y faq.

   Lo que ya era unánime: opacidad 0.7, object-fit cover, pointer-events
   none, y el halo en z-0 con la imagen en z-1.

   ⚠️ SE UNIFICA LA GEOMETRÍA. Los tres «centrados» lo eran de verdad: el
   left:4.4% de faq es exactamente (100 − 91.3) / 2, o sea la cuenta de
   centrar. Lo único que cambiaba era el tamaño y la caída del halo —96/8,
   91.3/12, 85/60px—, tres afinados de un resplandor decorativo al 70% de
   opacidad. Se queda el de care, que es el más usado y el que lc-differentiator ya
   tomaba prestado. faq, beneficios y journey se mueven un poco.

   Si algún sitio necesita otro afinado, NO hace falta otra clase: las tres
   medidas son variables locales.

   API:
     <div class="lc-media">
       <img class="lc-media__halo" src="…" alt="" aria-hidden="true">
       <img class="lc-media__img"  src="…" alt="Descripción real">
     </div>

   El halo va con alt="" y aria-hidden: es la misma imagen otra vez, y
   anunciarla dos veces al lector de pantalla sería ruido.
   ========================================================================= */

.lc-media {
  /* ── API local · el afinado del halo ── */
  --media-radius: var(--lc-radius-xl);
  --media-halo-size: 96%;
  --media-halo-top: 8%;
  /* 17px, no 16.95: ese decimal es un resto de un export. A 0.7 de
     opacidad la diferencia no existe. */
  --media-halo-blur: 17px;
  --media-halo-opacity: 0.7;

  position: relative;
  /* La entrada al viewport estaba copiada igual en care, diff y faq. */
  transition: opacity 1000ms ease-out, transform 1000ms ease-out;
}

.lc-media__img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--media-radius);
}

.lc-media__halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: var(--media-halo-top);
  width: var(--media-halo-size);
  height: var(--media-halo-size);
  transform: translateX(-50%);

  border-radius: var(--media-radius);
  object-fit: cover;
  filter: blur(var(--media-halo-blur));
  opacity: var(--media-halo-opacity);
  pointer-events: none;
}


/* — Entrada al viewport —————————————————————————————————————————— */
/* El JS añade .reveal-init al arrancar y .is-visible al entrar. Sin JS no
   lleva ninguna de las dos y la imagen se ve, que es lo correcto. */

.lc-media.reveal-init {
  opacity: 0;
  transform: scale(0.92);
}

.lc-media.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .lc-media {
    transition: none;
    opacity: 1;
    transform: none;
  }
}


/* =========================================================================
   --glow · el halo envuelve la imagen en vez de caer bajo ella
   -------------------------------------------------------------------------
   Es lo que hace journey: el halo es LIGERAMENTE MAYOR que la imagen y la
   rodea por los cuatro lados, en vez de asomar por abajo. No es un afinado
   del otro, es otro efecto — por eso tiene modificador y no variables.
   ========================================================================= */

.lc-media--glow .lc-media__halo {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.03);
}


/* — Sin halo · algunos contextos lo apagan (journey en móvil) ————— */
.lc-media--sin-halo .lc-media__halo { display: none; }


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-breadcrumb/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* Breadcrumb absoluto en el cuadrante izq del hero, sin opacidades */
.lc-breadcrumb {
  /* Alineado al contenedor centrado: conserva el inset de 59px respecto al
     contenido del panel (120 - 59 = 61px en diseño 1440). */
  /* El color es variable: el mismo breadcrumb flota sobre heros oscuros y
     claros, y solo cambia eso. */
  --bc-color: var(--lc-text-on-brand);

  position: absolute;
  top: 12px;
  left: calc(var(--lc-page-pad-x) - 59px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.06px;
  color: var(--bc-color);
}

.lc-breadcrumb__link {
  color: var(--bc-color);
}

.lc-breadcrumb__link:hover {
  text-decoration: underline;
}

.lc-breadcrumb__current {
  color: var(--bc-color);
  font-weight: 700;
}

/* Sobre hero claro: el mismo breadcrumb en azul de marca. */
.lc-breadcrumb--on-light { --bc-color: var(--lc-brand-primary); }

.lc-breadcrumb__sep,
.lc-breadcrumb__ellipsis {
  display: none;
}

@media (max-width: 991px) {
/* Breadcrumb flotante en el borde superior del hero, justo bajo el header
     (4px). Va sobre la imagen, así que el contraste lo garantiza el scrim
     oscuro de .lc-hero__media::before. */
.lc-breadcrumb {
    position: absolute;
    top: 4px;
    left: 24px;
    right: 24px;
    padding: 0;
    z-index: 3;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-stat-card/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-stat-card · Tarjeta de dato
   -------------------------------------------------------------------------
   Molécula. Extraída el 2026-09-02 de lc-hero, donde el inventario la tenía
   como «Tarjeta de diferencial · por extraer».

   Una cifra grande y una línea que la explica, sobre fondo translúcido. Vive
   sobre bandas oscuras: por eso su texto es blue-50 y su fondo el azul de
   tarjeta, no una superficie clara.

   ⚠️ NO confundir con lc-label-card, que es la otra mitad de lo que estaba
   aquí: aquella solo lleva texto centrado, sin cifra. El propio lc-hero ya
   avisaba de que eran dos anatomías distintas metidas bajo un nombre.

   El ANCHO lo pone el anfitrión: en la fila del hero son 273px, y en la fila
   de cuatro se reparten solas.

   API:
     <div class="lc-stat-card">
       <p class="lc-stat-card__num">+146 mil</p>
       <p class="lc-stat-card__text">pacientes atendidos al año</p>
     </div>

   `--sm` en el número es para cuando el «dato» es una palabra y no una
   cifra («Alta complejidad»): baja la tipografía para que entre en una línea
   sin romper la retícula.
   ========================================================================= */

.lc-stat-card {
  background: var(--color-blue-card-bg);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.lc-stat-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: 41px;
  letter-spacing: -0.32px;
  color: var(--color-blue-50);
}

/* Cuando el «dato» es una palabra en vez de una cifra. */
.lc-stat-card__num--sm {
  font-size: 22px;
  line-height: 28px;
}

.lc-stat-card__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--color-blue-50);
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-card/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-card · Tarjeta
   -------------------------------------------------------------------------
   Molécula. 2026-08-31. La primera de su nivel.

   UNA tarjeta: ícono (opcional) + título + texto (+ enlace opcional).
   Reúne cuatro que tenían exactamente esas ranuras:

     .lc-port-card      (portfolio)          4 instancias
     .lc-edu-tipo    (lc-grid-cards)      5   ← idéntica a port-card
     .lc-benef-card  (lc-grid-flanked)    6   ← ícono al lado, fondo tintado
     .lc-info-card      (symptoms)           4   ← sin ícono, piel translúcida

   port-card y lc-edu-tipo eran la MISMA tarjeta con dos nombres: mismo gap,
   padding, fondo, radio, hover, ícono y tipografía. Por eso el canon sale
   de ellas.

   Lo que NO entra aquí, aunque se le parezca — y el criterio es la
   ANATOMÍA, no el aspecto:
     · .lc-doc            12 ranuras (foto, nombre partido, rol, cta)
     · .lc-edu-card    22 ranuras (media, chips, fecha, lugar, stat…)
     · .lc-stage  es un acordeón con estado, no una tarjeta
     · .lc-place-card es una foto con overlay, sin caja propia
     · .lc-hero-diff-card baldosa dentro del hero
   Cada una es su propia molécula.

   API:
     <article class="lc-card">
       <span class="lc-card__icon"><svg …></span>
       <h3 class="lc-card__title">Título</h3>
       <p class="lc-card__text">Texto</p>
     </article>

   En --row el título y el texto van envueltos en .lc-card__body, porque el
   ícono es hermano de los dos y no de cada uno.
   ========================================================================= */

.lc-card {
  --card-bg: var(--lc-bg-surface);
  --card-radius: var(--lc-radius-lg);
  --card-pad: var(--lc-space-lg);     /* 24 */
  --card-gap: var(--lc-space-sm);     /* 12 */
  --card-shadow: none;
  --card-icon: 48px;

  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-pad);
  box-sizing: border-box;

  background: var(--card-bg);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  text-decoration: none;              /* a veces es un <a> */

  transition: transform .2s ease, box-shadow .2s ease;
}


/* =========================================================================
   Ranuras
   ========================================================================= */

.lc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--card-icon);
  height: var(--card-icon);
  color: var(--lc-brand-primary);
}

.lc-card__icon svg { width: 100%; height: 100%; }

.lc-card__title {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h6);
  font-weight: var(--lc-fw-medium);
  line-height: var(--lc-lh-h6);
  letter-spacing: var(--lc-ls-heading);
  /* Navy, no tinta. Las cuatro coincidían, y no contradice la decisión del
     H2: aquel es el título de una SECCIÓN; este es el de una pieza dentro
     de una retícula, donde el navy la despega del texto de alrededor. */
  color: var(--lc-brand-primary);
}

.lc-card__text {
  flex: 1 1 auto;   /* empuja el enlace al fondo si las tarjetas se igualan */
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-btn);   /* 16px */
  /* En proporción y no en px: no hay token de interlínea para el cuerpo de
     16 (--lc-lh-body es el de 18), y 1.375 es exactamente los 22px que
     usaban las tres. */
  line-height: 1.375;
  letter-spacing: var(--lc-ls-body);
  color: var(--lc-text-secondary);
}

/* Solo hace falta en --row. */
.lc-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-xxs);
  min-width: 0;
}


/* =========================================================================
   Interacción · solo la tarjeta que lleva a algún sitio se levanta
   ========================================================================= */

a.lc-card:hover,
.lc-card--interactive:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 45, 114, 0.10);
}

a.lc-card:focus-visible {
  outline: 2px solid var(--lc-brand-primary);
  outline-offset: 3px;
}


/* =========================================================================
   Disposición
   ========================================================================= */

/* --row · el ícono al lado, no encima. El ícono baja a 30px: junto al texto
   uno de 48 pesa demasiado. */
.lc-card--row {
  --card-icon: 30px;
  --card-pad: 20px var(--lc-space-md);

  flex-direction: row;
  align-items: flex-start;
}


/* =========================================================================
   Pieles
   ========================================================================= */

/* --tinted · relleno azul muy claro. Para tarjetas sobre fondo blanco, que
   sin fondo propio no se leerían como piezas. */
.lc-card--tinted {
  --card-bg: var(--lc-blue-50);       /* era #E5EBF6 a pelo: la primitiva ya existía */
  --card-radius: var(--lc-radius-xl);
  --card-shadow:
    0 5px 6px rgba(135, 145, 162, 0.10),
    0 25px 22.1px rgba(135, 145, 162, 0.04),
    0 23px 17.8px rgba(135, 145, 162, 0.11);
}

/* --soft · blanco translúcido. Para tarjetas SOBRE una banda de color, donde
   un blanco sólido cortaría el fondo en seco. */
.lc-card--soft {
  --card-bg: rgba(255, 255, 255, 0.35);
  --card-shadow: var(--shadow-info);
}


/* =========================================================================
   --tile · la tarjeta que ELIGE, no la que presenta
   -------------------------------------------------------------------------
   Sale de .lc-hero-home__quick-item, las cuatro cajitas bajo el hero del home.
   Mismas cuatro ranuras que cualquier tarjeta, pero con dos rasgos propios:

     · el ícono va AL LADO DEL TÍTULO (no encima como en la pila, ni al lado
       de todo el cuerpo como en --row): por eso necesita .lc-card__header
     · tiene estado seleccionado, --active

   Ese estado es la razón de que se dudara si era otra molécula. La anatomía
   dijo que no: las ranuras son las mismas y una tarjeta puede ser
   seleccionable. Si aparecen más piezas con estado (los meses de educación
   ya lo tienen) puede que la familia «seleccionable» sea real y haya que
   revisarlo.
   ========================================================================= */

.lc-card--tile {
  /* ⚠️ #ECECEC no tiene token. El más cercano, --lc-border-default (#C5C4C1),
     es bastante más oscuro y cambiaría el elemento más visible del home. Se
     deja el valor y se anota: falta un gris de borde muy claro en la paleta. */
  --card-border: #ECECEC;
  --card-radius: 6px;
  --card-pad: 18px;
  --card-icon: 42px;
  --card-min-h: 184px;

  justify-content: space-between;
  min-height: var(--card-min-h);
  border: 1px solid var(--card-border);
}

.lc-card--tile:hover,
.lc-card--active {
  --card-border: var(--lc-brand-primary);
  box-shadow: 0 12px 12px rgba(211, 211, 211, 0.35);
}

/* Ícono y título en la misma fila; el texto va debajo de los dos. */
.lc-card--tile .lc-card__header {
  display: flex;
  align-items: center;
  gap: var(--lc-space-sm);
}

.lc-card--tile .lc-card__body { gap: var(--lc-space-xs); }

/* La pila no se levanta: aquí manda el borde. */
a.lc-card--tile:hover { transform: none; }

@media (max-width: 991.98px) {
  .lc-card--tile {
    --card-pad: var(--lc-space-sm);
    --card-min-h: 0;
    box-shadow: 0 12px 6px rgba(211, 211, 211, 0.35);
  }
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-quote/styles.css
   ─────────────────────────────────────────────────────────────────────── */

.lc-quote-section {
  background: linear-gradient(to bottom, var(--color-blue-50) 0%, var(--color-white) 92.66%);
  padding: 40px var(--lc-page-pad-x);
}

.lc-quote {
  max-width: 1200px;
  margin: 0 auto;
}

.lc-quote__text {
  font-family: var(--font-display);
  font-size: 54px;
  font-weight: var(--fw-regular);
  line-height: 66px;
  color: var(--brand-primary);
  text-align: center;
}

@media (max-width: 991px) {

/* QUOTE mobile: alineada a la izquierda y más pequeña. */
.lc-quote__text {
    font-size: 32px;
    line-height: 40px;
    text-align: left;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   MOLECULA · biblioteca/componentes/lc-faq-item/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-faq-item · Ítem de preguntas frecuentes
   -------------------------------------------------------------------------
   Molécula. Extraída el 2026-09-02, al fusionar las cinco cajas split.
   Estaba dentro de lc-split-accordion (antes lc-faq) y el inventario ya la
   tenía identificada como «por extraer»: es una pregunta clicable con su
   respuesta plegable, y no tiene nada que ver con la caja de dos columnas
   que la contiene.

   Pregunta y respuesta van en un <button> y un <div>: el botón es lo que se
   puede pulsar, y por eso lleva reset de fondo y borde.

   ⚠️ El JS (lacardio.js) exige la clase `js-faq` en el CONTENEDOR de la
   lista, no aquí. Alterna `.is-open` en cada ítem.

   API:
     <div class="lc-faq-item">
       <button class="lc-faq-item__q">Pregunta<svg class="lc-faq-item__icon">…</svg></button>
       <div class="lc-faq-item__a"><p>Respuesta</p></div>
     </div>

   El plegado usa max-height con un tope de 360px: si una respuesta crece más
   que eso, se corta. Es la misma técnica del menú mobile del header, donde
   además hay un bug abierto — si aquí aparece, el diagnóstico es el mismo.
   ========================================================================= */

.lc-faq-item {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-default);
}

.lc-faq-item:last-child {
  border-bottom: none;
}

.lc-faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--color-blue-500);
}

.lc-faq-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-blue-500);
  transition: transform .25s ease;
}

.lc-faq-item.is-open .lc-faq-item__icon {
  transform: rotate(180deg);
}

.lc-faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}

/* Respuesta: indentada 24px, gap 8px respecto a la pregunta. */
.lc-faq-item__a p {
  padding: 8px 24px 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--text-secondary);
}

.lc-faq-item.is-open .lc-faq-item__a {
  max-height: 360px;
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-header/styles.css
   ─────────────────────────────────────────────────────────────────────── */

.lc-header--desktop {
  position: sticky;
  top: 0;
  z-index: 100;
}

.lc-topbar {
  background: var(--lc-bg-topbar);
  padding: 0 60px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.lc-topbar__links {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.lc-topbar__link {
  font-family: var(--lc-font-body);
  font-size: 12px;
  color: var(--lc-brand-primary);
  text-decoration: none;
  padding: 9px 0;
  letter-spacing: 0.06px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
}

.lc-topbar__link:hover {
  color: var(--lc-brand-primary);
  border-bottom-color: var(--lc-brand-primary);
}

.lc-topbar__link--active {
  font-weight: 600;
  border-bottom-color: var(--lc-brand-primary);
}

.lc-topbar__actions {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 9px 0;
}

.lc-topbar__action {
  font-family: var(--lc-font-body);
  font-size: 12px;
  color: var(--lc-text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: color 0.15s;
}

.lc-topbar__action:hover {
  color: var(--lc-brand-primary);
}

/* Márgenes y separaciones fluidos (arreglado 2026-10-15). Eran fijos —61px de
   margen y 36px entre piezas— y el contenido mide 1003px: la barra pedía
   1377px y el header de escritorio se muestra desde 992px, así que entre 992 y
   1439 el logo de la Fundación se salía de la pantalla (1317px a 1280).
   A 1440 los valores son los de antes; bajo eso se aprietan hasta 12/24px. */
.lc-navbar {
  --navbar-gap: clamp(12px, calc((100vw - 1100px) / 9), 36px);
  background: var(--lc-bg-surface);
  box-shadow: var(--lc-shadow-header);
  padding: 0 clamp(24px, calc((100vw - 1100px) / 5.5), 61px);
  display: flex;
  align-items: flex-end;
  gap: var(--navbar-gap);
  height: var(--lc-navbar-h);
}

.lc-navbar__logo {
  padding-bottom: 18px;
  flex-shrink: 0;
}

.lc-navbar__logo img {
  height: 42px;
  width: auto;
  display: block;
}

.lc-navbar__nav {
  display: flex;
  gap: var(--navbar-gap);
  align-items: flex-end;
  flex: 1;
}

.lc-navbar__item {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 24px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--lc-text-primary);
  transition: border-color 0.15s, color 0.15s;
}

.lc-navbar__item:hover {
  color: var(--lc-brand-primary);
  border-bottom-color: rgba(0, 45, 114, 0.2);
}

.lc-navbar__item--active {
  color: var(--lc-brand-primary);
  border-bottom-color: var(--lc-brand-primary);
}

.lc-navbar__item-text {
  font-family: var(--lc-font-body);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.21px;
  white-space: nowrap;
  color: inherit;
}

.lc-navbar__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}

.lc-navbar__cta {
  padding-bottom: 18px;
  flex-shrink: 0;
}

/* El «Agendar cita» de la barra es el ÁTOMO lc-btn --outline --sm. Traía 38
   líneas propias, y su nombre —.lc-btn-agendar— decía el contenido en vez de
   la caja: era la última superviviente del censo de botones del hallazgo 3.
   Sus medidas ya eran las de --sm (42px de alto, 16px de aire), pero el radio
   era --lc-radius-md, que vale 8px cuando el canon es 6.

   Su sombra en hover y su press subieron al canon el 2026-09-04: aquí ya no
   queda ninguna regla suya. */

.lc-navbar__fundacion {
  padding-bottom: 18px;
  flex-shrink: 0;
}

.lc-navbar__fundacion img {
  height: 42px;
  width: auto;
  display: block;
}

/* Escritorio estrecho (992–1199): aun con los espacios al mínimo no cabe.
   Se quitan las flechas de los desplegables (140px) y los logos bajan a 36px. */
@media (max-width: 1199.98px) {
  .lc-navbar__chevron { display: none; }
  .lc-navbar__logo img,
  .lc-navbar__fundacion img { height: 36px; }
}

.lc-header--mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--lc-bg-surface);
  box-shadow: var(--lc-shadow-header);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 201;
}

.lc-mobile-logo-clinic img {
  height: 42px;
  width: auto;
  display: block;
}

.lc-mobile-logo-fundacion img {
  height: 31px;
  width: auto;
  display: block;
}

.lc-mobile-menu {
  position: fixed;
  top: var(--lc-mobile-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.lc-mobile-menu--open {
  max-height: calc(100vh - var(--lc-mobile-header-h));
  overflow-y: auto;
}

.lc-mobile-menu__content {
  flex: 1;
  overflow-y: auto;
  background: var(--lc-bg-surface);
}

.lc-mobile-menu__nav {
  padding: 0 24px;
}

.lc-mobile-menu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid var(--lc-border-soft);
  text-decoration: none;
  color: var(--lc-text-primary);
  font-family: var(--lc-font-body);
  font-size: 16px;
  font-weight: 400;
  transition: color 0.15s;
}

.lc-mobile-menu__item:first-child {
  border-top: 1px solid var(--lc-border-soft);
}

.lc-mobile-menu__item:hover {
  color: var(--lc-brand-primary);
}

.lc-mobile-menu__item--active {
  color: var(--lc-brand-primary);
  font-weight: 600;
}

.lc-mobile-menu__item svg {
  flex-shrink: 0;
  color: var(--lc-border-default);
  transition: color 0.15s;
}

.lc-mobile-menu__item:hover svg,
.lc-mobile-menu__item--active svg {
  color: var(--lc-brand-primary);
}

.lc-mobile-menu__secondary {
  background: var(--lc-bg-subtle);
  padding: 0 24px;
  margin-top: 4px;
}

.lc-mobile-menu__secondary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--lc-border-soft-alt);
  text-decoration: none;
  color: var(--lc-text-secondary);
  font-family: var(--lc-font-body);
  font-size: 13px;
  transition: color 0.15s;
}

.lc-mobile-menu__secondary-item:last-child {
  border-bottom: none;
}

.lc-mobile-menu__secondary-item:hover {
  color: var(--lc-brand-primary);
}

.lc-mobile-menu__actions {
  background: var(--lc-brand-primary);
  display: flex;
  flex-shrink: 0;
}

.lc-mobile-menu__action-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px;
  text-decoration: none;
  color: #fff;
  font-family: var(--lc-font-body);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  background: none;
  border-top: none;
  border-bottom: none;
  border-left: none;
  cursor: pointer;
  transition: background 0.15s;
}

.lc-mobile-menu__action-btn:last-child {
  border-right: none;
}

.lc-mobile-menu__action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}

.lc-mobile-menu__action-btn img {
  width: 24px;
  height: 24px;
  display: block;
}

.lc-mobile-menu__gap {
  flex-shrink: 0;
  height: calc(76px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.85);
}

body.lc-menu-open {
  overflow: hidden;
}

.lc-mobile-bottom-nav {
  position: fixed;
  bottom: max(16px, env(safe-area-inset-bottom, 16px));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  height: 60px;
  background: var(--lc-brand-primary);
  border-radius: var(--lc-radius-md);
  box-shadow: var(--lc-shadow-bottom-nav);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 202;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.lc-mobile-bottom-nav__icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 32px;
}

.lc-mobile-bottom-nav__btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

.lc-mobile-bottom-nav__btn:hover {
  opacity: 0.75;
}

.lc-mobile-bottom-nav__btn img {
  width: 24px;
  height: 24px;
  display: block;
}

/* Solo el gancho responsive: aparece en mobile. El aspecto lo pone
   .lc-iconbtn--ghost --lg. */
.lc-mobile-bottom-nav__close { display: none; }

.lc-mobile-bottom-nav__close:hover {
  opacity: 0.75;
}

.lc-mobile-bottom-nav__close svg {
  width: 28px;
  height: 28px;
}

.lc-mobile-bottom-nav--collapsed {
  max-width: 72px;
  width: 72px;
}

.lc-mobile-bottom-nav--collapsed .lc-mobile-bottom-nav__icons {
  display: none;
}

.lc-mobile-bottom-nav--collapsed .lc-mobile-bottom-nav__close {
  display: flex;
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-hero/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   hero · Hero de página
   -------------------------------------------------------------------------
   Organismo. El 2026-08-31 absorbió a lc-edu-hero, que era ESTE MISMO hero
   con piel clara: mismas ranuras (bg · content · panel · media · title-block
   · eyebrow · title · lead · diff) y los mismos valores de tipografía, solo
   que escritos con la otra generación de tokens (--fs-h1 y --lc-size-h1
   valen ambos 46px; las interlíneas coinciden).

   Tres ejes independientes:
     · piel      por defecto oscura · --light  clara
     · imagen    por defecto a sangre con velo · --split  al 62% con máscara
     · nada más: la estructura es la misma en los dos.

   La tarjeta del diferenciador NO se unificó, porque nunca fue una sola
   pieza: una es de DATO (cifra + línea) y la otra una píldora con solo texto
   centrado. El 2026-09-02 salieron como dos moléculas, que es lo que este
   comentario venía pidiendo: lc-stat-card y lc-label-card. Aquí se queda
   solo lo que es del anfitrión — cuánto miden y cómo se reparten en la fila.

   ⚠️ Dos valores del título cambian respecto al hero oscuro anterior:
   peso 400 → 500 y letter-spacing 0 → -0.01em. No es un capricho: son los
   que ya usaba el hero claro y los únicos que salen del sistema de tokens
   (-0.01em da exactamente los -0.46px que el otro escribía a mano como
   -0.5px). El 400 y el 0 eran de la generación vieja.
   ========================================================================= */

.lc-hero {
  /* ── API local · lo único que cambia entre pieles ── */
  --hero-bg: var(--lc-brand-primary);
  --hero-title-color: var(--lc-text-on-brand);
  --hero-eyebrow-color: var(--lc-blue-100);
  --hero-lead-color: var(--lc-text-on-brand);
  --hero-diff-eyebrow-color: var(--lc-blue-100);

  position: relative;
  background: var(--hero-bg);
  color: var(--hero-title-color);
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* Wrappers de la imagen. En desktop son transparentes (display:contents) para
   que la <img> se posicione absolute respecto a .lc-hero como hasta ahora.
   En mobile, .lc-hero__media genera caja y aloja el degradé inferior (::after). */
.lc-hero__media,
.lc-hero__pic {
  display: contents;
}

/* Imagen de fondo a sangre completa (sin fade en el archivo). */
.lc-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Degradé que funde la imagen con el panel azul, totalmente desde el lado
   izq y transparente en el centro/der. Reutilizable para cualquier foto.
   z-index 1 para que pinte ENCIMA de la imagen (.lc-hero__bg está en z 0). */
.lc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
      var(--brand-primary) 0%,
      var(--brand-primary) 35%,
      rgba(0, 45, 114, 0.85) 45%,
      rgba(0, 45, 114, 0.4) 60%,
      rgba(0, 45, 114, 0) 80%);
  pointer-events: none;
}

/* Panel izquierdo
   gap-24 entre Content / Buttons / Differentiator
   padding: pl-120 pr-36 py-96
   z-index 2 para quedar ENCIMA del gradiente (.lc-hero::before está en z 1). */
.lc-hero__panel {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 58.4%;
  /* En diseño 1440: pad-izq 120 + contenido 685 + pad-der 36 = 841px.
     Con --page-pad-x el borde izq del contenido se alinea al contenedor
     centrado de 1200px en pantallas anchas, manteniendo el ancho de contenido. */
  max-width: calc(var(--lc-page-pad-x) + 721px);
  padding: 96px 36px 96px var(--lc-page-pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Gap reducido (84→40) para dar más aire al párrafo largo del hero. */
  gap: 40px;
}

/* Intro: contenido + botones agrupados, separados 24px entre sí (gap original).
   El gap de 64px del panel queda entre este bloque y el diferenciador. */
.lc-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* Content Container
   gap-12 entre title-block y lead, pr-101 propio (no afecta a botones/diff) */
.lc-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-right: 101px;
}

/* Title Container · gap-8 entre eyebrow y h1 */
.lc-hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lc-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-regular);
  line-height: 14px;
  letter-spacing: var(--lc-ls-eyebrow);
  text-transform: uppercase;
  color: var(--hero-eyebrow-color);
}

.lc-hero__title {
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h1);
  font-weight: var(--lc-fw-medium);
  line-height: var(--lc-lh-h1);
  letter-spacing: var(--lc-ls-heading);
  color: var(--hero-title-color);
}

.lc-hero__lead {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--fw-regular);
  line-height: var(--lc-lh-body);
  letter-spacing: var(--lc-ls-body);
  color: var(--hero-lead-color);
}

.lc-hero__lead strong {
  font-weight: 700;
  letter-spacing: -0.36px;
}

/* Button Container · gap-16; ancho natural según botones; va entre contenido y diff */
.lc-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

/* Differentiator Container · gap-20 entre subtítulo y row de cards.
   Sin border-left ni padding-left: ahora es el subtítulo + 2 cards traslúcidas. */
.lc-hero__diff {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

/* Paragraph Bold: Open Sans Bold 18/24, tracking -0.36, sin uppercase. */
.lc-hero__diff-eyebrow {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: var(--lc-ls-btn);
  color: var(--hero-diff-eyebrow-color);
  white-space: nowrap;
}

.lc-hero__diff-row {
  display: flex;
  gap: 36px;
  align-items: stretch;
}







/* Variante de 4 cards (trust-bar del insumo del cliente): grid 2×2 alineado a la
   izquierda (con el resto del contenido del hero). grid-auto-rows: 1fr iguala el
   alto de las dos filas, así las 4 cards quedan del mismo tamaño. */
.lc-hero__diff-row--quad {
  display: grid;
  grid-template-columns: repeat(2, 273px);
  grid-auto-rows: 1fr;
  gap: 16px;
  justify-content: start;
}

/* Contenido centrado (vertical y horizontal) dentro de cada caja. */
.lc-hero__diff-row--quad .lc-stat-card {
  width: auto;
  flex: initial;
  align-items: center;
  justify-content: center;
  text-align: center;
}



@media (min-width: 992px) {
.lc-hero {
    min-height: min(calc(100vh - 126px), 800px);
  }
}

@media (max-width: 1199px) {
.lc-hero__panel {
    padding: 64px 60px;
  }
}

@media (max-width: 991px) {
/* En mobile el hero apila imagen (arriba) + panel (abajo). Sin 100vh. */
.lc-hero {
    flex-direction: column;
    align-items: stretch;
  }

.lc-hero::before {
    display: none;
  }

/* el degradé no aplica con layout apilado */
/* En mobile la imagen se apila arriba; .lc-hero__media genera caja para el fade. */
.lc-hero__media {
    display: block;
    position: relative;
    z-index: 0;
  }

.lc-hero__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 112px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 45, 114, 0) 0%, var(--brand-primary) 100%);
  }

/* Scrim superior: protege el contraste del breadcrumb blanco que flota sobre
     la imagen, sin importar qué muestre la foto en esa zona. */
.lc-hero__media::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 96px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 27, 69, 0.65) 0%, rgba(0, 27, 69, 0) 100%);
  }

.lc-hero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    display: block;
    object-position: center;
  }

.lc-hero__panel {
    width: 100%;
    max-width: none;
    padding: 0 24px 40px;
    gap: 24px;
  }

.lc-hero__content {
    padding-right: 0;
  }

.lc-hero__title {
    font-size: 34px;
    line-height: 41px;
  }

.lc-hero__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

.lc-hero__actions .lc-btn {
    width: 100%;
  }

.lc-hero__diff-row {
    flex-direction: column;
    gap: 12px;
  }

/* En mobile las 4 cards van en grid 2×2 a todo el ancho. */
.lc-hero__diff-row--quad {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    justify-content: stretch;
  }

.lc-hero__diff-row .lc-stat-card { width: 100%; flex: 0 0 auto; }
}


/* =========================================================================
   --light · piel clara
   -------------------------------------------------------------------------
   Era lc-edu-hero (186 líneas). El fondo pasa de azul sólido a un degradado
   vertical hacia el azul más claro, y los tres textos a tinta.
   ========================================================================= */

.lc-hero--light {
  --hero-bg: linear-gradient(180deg,
      var(--lc-bg-surface) 0%,
      #EAEFF8 65%,
      var(--lc-blue-50) 100%);
  --hero-title-color: var(--lc-text-primary);
  --hero-eyebrow-color: var(--lc-text-primary);
  --hero-lead-color: var(--lc-text-primary);
  --hero-diff-eyebrow-color: var(--lc-brand-primary);

  min-height: 660px;
}

/* El velo degradado del hero oscuro no tiene sentido sobre fondo claro. */
.lc-hero--light::before { content: none; }


/* =========================================================================
   --split · la imagen ocupa el 62% derecho, no el ancho completo
   -------------------------------------------------------------------------
   En vez de taparla con un velo, se la funde con una máscara: el borde
   izquierdo de la foto se desvanece hacia el panel. Es lo que hacía el hero
   claro, y es independiente de la piel — se pueden combinar.
   ========================================================================= */

.lc-hero--split .lc-hero__bg {
  inset: auto;
  top: 0;
  right: 0;
  width: 62%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 42%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000 42%);
}

.lc-hero--split .lc-hero__panel {
  width: 58%;
  max-width: 760px;
  padding-left: 120px;
}

.lc-hero--split .lc-hero__content { padding-right: 40px; }

/* El breadcrumb se alinea al contenedor centrado de 1200px, que es lo correcto
   cuando el panel también nace de ahí. Pero --split ancla el panel a 120px
   fijos, así que aquí el breadcrumb tiene que seguirlo: mismo inset de 59px
   respecto al contenido del panel (120 − 59 = 61). */
.lc-hero--split .lc-breadcrumb { left: calc(120px - 59px); }




.lc-hero--light .lc-hero__diff-row {
  flex-wrap: wrap;
  gap: 20px 24px;
  max-width: 606px;
}


/* =========================================================================
   Mobile de las pieles nuevas · corte en 991.98px
   ========================================================================= */

@media (max-width: 1199.98px) {
  .lc-hero--light { min-height: 560px; }
  .lc-hero--split .lc-hero__panel { width: 64%; padding: 72px 28px 72px 40px; }
  .lc-hero--split .lc-hero__bg { width: 56%; }
}

@media (max-width: 991.98px) {
  /* Se apila: primero la imagen como banner, después el panel. */
  .lc-hero--light {
    flex-direction: column;
    min-height: 0;
    align-items: stretch;
  }

  .lc-hero--split .lc-hero__media { display: block; order: 1; }

  .lc-hero--split .lc-hero__bg {
    position: relative;
    width: 100%;
    height: 240px;
    object-position: center 28%;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  }

  .lc-hero--split .lc-hero__panel {
    order: 2;
    width: 100%;
    max-width: none;
    padding: var(--lc-space-xs) var(--lc-space-lg) 40px;
    gap: 28px;
  }

  .lc-hero--split .lc-hero__content { padding-right: 0; }

  /* Apilado: el breadcrumb deja de flotar y va arriba del todo. */
  .lc-hero--split .lc-breadcrumb {
    position: static;
    left: auto;
    padding: var(--lc-space-md) var(--lc-space-lg) 0;
  }

  .lc-hero__diff-row .lc-label-card { flex: 1 1 44%; }
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-split/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-split · Banda de dos columnas
   -------------------------------------------------------------------------
   Organismo. Consolidado el 2026-09-02. Es UNA caja: una banda de página,
   con encabezado opcional, y debajo una fila de dos columnas.

   Venían CINCO componentes que eran esta misma caja con otro contenido:

     .lc-split-card       (diagnóstico)   1fr | 412px   gap 36   stretch
     .lc-split-prose      (servicio)      1fr | 1fr     gap 64   —
     .lc-split-accordion  (FAQ)           481fr | 582fr gap 137  start
     .lc-split-list       (diferencial)   377px | 412px gap 36   end
     .lc-split-cardrow    (sedes)         376px | 1fr   gap 36   center

   Mirando la tabla se ve: lo único que cambiaba entre los cinco era la
   PROPORCIÓN, el GAP y la ALINEACIÓN VERTICAL. Tres variables. Todo lo demás
   era el contenido que cada uno metía dentro — y ese contenido no es de la
   caja: el ítem de FAQ y la tarjeta de lugar salieron a moléculas propias
   (lc-faq-item, lc-place-card), que es donde tenían que estar desde el
   principio.

   API local:
     --split-cols        proporción de las dos columnas   (1fr 1fr)
     --split-gap         separación horizontal            (36px)
     --split-gap-md      separación al apilar             (24px)
     --split-align       alineación vertical              (stretch)
     --split-bg          fondo de la banda                (transparente)
     --split-pad-x       margen lateral                   (el de página)
     --split-pad-top     aire arriba                      (64px)
     --split-pad-bottom  aire abajo                       (64px)
     --split-head-gap    hueco entre encabezado y fila    (40px)
     --split-max         tope de ancho de la fila         (sin tope)

   Variantes (cada una es la fila de arriba, escrita en variables):
     --card      la fila lleva piel de tarjeta (era lc-split-card)
     --even      dos mitades iguales           (era lc-split-prose)
     --airy      columnas anchas, mucho aire   (era lc-split-accordion)
     --anchored  contenido anclado al fondo    (era lc-split-list)
     --aside     columna fija + resto          (era lc-split-cardrow)

   Al apilar en móvil siempre baja a una columna: eso no es negociable por
   variante, y por eso no es una variable.
   ========================================================================= */

.lc-split {
  --split-cols: 1fr 1fr;
  --split-gap: 36px;
  --split-gap-md: 24px;
  --split-align: stretch;
  --split-bg: transparent;
  --split-pad-x: var(--lc-page-pad-x);
  --split-pad-top: 64px;
  --split-pad-bottom: 64px;
  --split-head-gap: 40px;
  --split-max: none;

  background: var(--split-bg);
  padding: var(--split-pad-top) var(--split-pad-x) var(--split-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--split-head-gap);
}

.lc-split__row {
  display: grid;
  grid-template-columns: var(--split-cols);
  gap: var(--split-gap);
  align-items: var(--split-align);
  max-width: var(--split-max);
  margin-inline: auto;
  width: 100%;
}

/* Una columna cualquiera. El contenido manda su propio ritmo interno. */
.lc-split__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* La columna que lleva imagen. El halo lo pone lc-media; aquí solo se dice
   que no se estire al alto de la columna de texto, que suele ser más alta. */
.lc-split__media {
  align-self: center;
}


/* — --card · la fila con piel de tarjeta ————————————————————
   Era lc-split-card. La banda no tiene fondo: el fondo lo lleva la fila. */
.lc-split--card {
  --split-cols: 1fr 412px;
  --split-max: 994px;
  --split-pad-top: 0;
}

.lc-split--card .lc-split__row {
  padding: 40px;
  border: 1px solid var(--color-white);
  border-radius: var(--radius-xl);
  background: linear-gradient(to bottom, var(--color-blue-50) 0%, rgba(229, 235, 246, 0.32) 100%);
  box-shadow: var(--shadow-info);
}

/* Sus dos columnas anclan el contenido abajo, así los bottoms coinciden
   (items-end). */
.lc-split--card .lc-split__col { justify-content: flex-end; gap: 16px; }


/* — --even · dos mitades iguales ————————————————————————————
   Era lc-split-prose. */
.lc-split--even {
  --split-cols: 1fr 1fr;
  --split-gap: 64px;
  --split-bg: var(--surface);
}

.lc-split--even .lc-split__col { justify-content: center; }


/* — --airy · columnas anchas con mucho aire ————————————————
   Era lc-split-accordion. El 481/582 sale del diseño; el gap de 137 es el que
   separa el acordeón de su panel. */
.lc-split--airy {
  --split-cols: 481fr 582fr;
  --split-gap: 137px;
  --split-align: start;
  --split-bg: var(--background-page);
  --split-pad-top: 0;
  --split-head-gap: 32px;
}


/* — --anchored · contenido anclado al fondo ————————————————
   Era lc-split-list. La lista se apoya en la base de la fila; la imagen se
   queda centrada por su cuenta (.lc-split__media). */
.lc-split--anchored {
  --split-cols: 377px 412px;
  --split-align: end;
  --split-bg: var(--color-blue-50);
}

/* Centra la pareja: sus dos columnas son fijas y sobra sitio a los lados. */
.lc-split--anchored .lc-split__row { justify-content: center; }


/* — --aside · columna fija + resto —————————————————————————
   Era lc-split-cardrow. */
.lc-split--aside {
  --split-cols: 376px 1fr;
  --split-align: center;
  --split-bg: linear-gradient(to bottom, var(--lc-bg-band), #ffffff);
  --split-max: 1440px;
  --split-pad-top: 84px;
  --split-pad-bottom: 84px;
}

.lc-split--aside .lc-split__col { gap: 18px; }

/* Sus tarjetas van en un carril propio, no como columnas de la fila: son N,
   no una. En tablet la columna de texto se estrecha y las tarjetas reparten
   lo que queda. */
.lc-split--aside .lc-split__cards { gap: 36px; }
.lc-split--aside .lc-split__cards > * { flex: 0 0 376px; }

@media (max-width: 1199.98px) {
  .lc-split--aside {
    --split-cols: 260px 1fr;
    --split-pad-top: 64px;
    --split-pad-bottom: 64px;
  }
  .lc-split--aside .lc-split__cards > * { flex: 1; }
}


/* — Modificadores sueltos, combinables con cualquier variante ————— */

/* Invierte el orden: la imagen pasa a la izquierda. Solo en desktop; al
   apilar, el texto va siempre primero. */
@media (min-width: 992px) {
  .lc-split--reverse .lc-split__media { order: -1; }
}

/* La imagen se recorta a 420px en vez de crecer a su alto natural. Solo en
   desktop. ⚠️ Esta regla estuvo ROTA desde la extracción hasta el 2026-09-01:
   el archivo decía «@media (min-width:992px){ .lc-care--intro }», un selector
   sin bloque, y el parser se comía entera la regla siguiente. */
@media (min-width: 992px) {
  .lc-split--cropped .lc-media__img {
    height: 420px;
    object-fit: cover;
  }
}

/* Pega la banda a la de arriba: sin aire superior. */
.lc-split--flush-top { --split-pad-top: 0; }


/* — Piezas de contenido que siguen siendo de la caja ——————————
   Lo que NO salió a molécula porque no se repite fuera de aquí. */

/* Ícono grande sobre el título, en la variante tarjeta. */
.lc-split__icon {
  width: 60px;
  height: 60px;
  display: block;
}

/* Párrafo que presenta una lista. */
.lc-split__listintro {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--lc-text-primary);
}

/* Bloque de texto corrido con su propio ritmo entre párrafos. */
.lc-split__prose {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Bloque de cierre de una columna: un remate con título, texto y acción.
   Hoy lo usa la variante --airy («¿No encuentras tu respuesta?»). */
.lc-split__contact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
}

.lc-split__contact-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--text-primary);
}

.lc-split__contact-text {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--text-primary);
  margin-bottom: 16px;
}

/* El botón se ajusta a su texto en vez de estirarse. */
.lc-split__contact-btn { align-self: flex-start; }

/* El panel que agrupa los ítems plegables. */
.lc-split__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Carril de tarjetas dentro de una columna de la fila. */
.lc-split__cards {
  display: flex;
  gap: 24px;
  min-width: 0;
}


@media (max-width: 1199.98px) {
  .lc-split--airy { --split-gap: 60px; }
}

@media (max-width: 991.98px) {
  .lc-split {
    --split-pad-top: 40px;
    --split-pad-bottom: 40px;
    --split-head-gap: 24px;
  }

  /* Siempre una columna. Se apagan también los topes y proporciones que
     algunas variantes fijan en desktop. */
  .lc-split__row {
    grid-template-columns: 1fr;
    gap: var(--split-gap-md);
  }

  .lc-split--card .lc-split__row { padding: 24px; }

  .lc-split--aside {
    --split-pad-top: 32px;
    --split-pad-bottom: 32px;
    --split-gap-md: 24px;
  }

  .lc-split--aside .lc-split__cards > * { flex: none; }

  .lc-split__cards {
    flex-direction: column;
  }

  .lc-split__media { align-self: stretch; }
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-grid-cards/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* =========================================================================
   lc-grid-cards · Encabezado + rejilla de tarjetas
   -------------------------------------------------------------------------
   Organismo. Consolidado el 2026-09-02. Es UNA caja: una banda de página con
   su encabezado (lc-sec-head) y una rejilla de lc-card debajo.

   Venían tres componentes que eran esta misma caja con otro contenido:

     .lc-symptoms   (cardiología)       4 columnas · fondo plano
     .lc-portfolio  (trasplantes)       4 columnas · degradado
     .lc-grid-cards  (educación)         6 columnas · degradado · 3+2 centrado

   symptoms y portfolio se diferenciaban en el gap y el fondo; portfolio y el
   de educación tenían el MISMO degradado —uno escrito con el token
   --color-blue-50 y el otro con el hex #E5EBF6, que es el mismo color—, y solo
   cambiaban las columnas. El nombre de cada uno hablaba de su contenido, y por
   eso nadie vio que eran la misma pieza.

   API local · todo lo que cambiaba entre los tres es una variable:
     --cards-cols        columnas en desktop            (4)
     --cards-cols-md     columnas ≤991px                (2)
     --cards-cols-sm     columnas ≤575px                (1)
     --cards-gap         separación entre tarjetas      (24px)
     --cards-gap-md      separación ≤991px              (18px)
     --cards-bg          fondo de la banda              (degradado azul→blanco)
     --cards-pad-x       ritmo de margen lateral        (el de página)
     --cards-pad-top     aire arriba                    (64px)
     --cards-pad-bottom  aire abajo                     (64px)
     --cards-max         ancho máximo de la rejilla     (sin tope)

   Variantes:
     --flat   fondo plano y filas juntas   (era lc-symptoms)
     --wide   6 columnas y margen ancho    (era el de educación)
   ========================================================================= */

.lc-grid-cards {
  --cards-cols: 4;
  --cards-cols-md: 2;
  --cards-cols-sm: 1;
  --cards-gap: 24px;
  --cards-gap-md: 18px;
  --cards-bg: linear-gradient(to bottom, var(--lc-blue-50) 0%, var(--lc-white) 92.66%);
  --cards-pad-x: var(--lc-page-pad-x);
  --cards-pad-top: 64px;
  --cards-pad-bottom: 64px;
  --cards-max: none;

  background: var(--cards-bg);
  padding: var(--cards-pad-top) var(--cards-pad-x) var(--cards-pad-bottom);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.lc-grid-cards__grid {
  display: grid;
  grid-template-columns: repeat(var(--cards-cols), 1fr);
  gap: var(--cards-gap);
  max-width: var(--cards-max);
  margin-inline: auto;
  width: 100%;
}

/* Párrafo suelto bajo el encabezado. */
.lc-grid-cards__intro {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  line-height: var(--lc-lh-body);
  letter-spacing: 0.27px;
  color: var(--lc-text-primary);
}

/* Nota al pie de la rejilla, centrada y más estrecha que la banda. */
.lc-grid-cards__note {
  width: 83.333%;
  margin: 0 auto;
  text-align: center;
  font-family: var(--lc-font-body);
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--lc-text-secondary);
}


/* — Variante: fondo plano y filas juntas ————————————————————— */
.lc-grid-cards--flat {
  --cards-bg: var(--lc-blue-50);
  --cards-gap: 12px 36px;
  --cards-cols-md: 1;     /* sus tarjetas son de texto: en móvil van a una */
  --cards-gap-md: 12px;
  --cards-pad-top: 48px;
}


/* — Variante: seis columnas, margen ancho ———————————————————— */
.lc-grid-cards--wide {
  --cards-cols: 6;
  --cards-max: 1160px;
  --cards-pad-x: var(--lc-page-pad-x-wide);
  --cards-pad-top: 72px;
  --cards-pad-bottom: 72px;
}

/* En la rejilla de 6, cada tarjeta ocupa 2 columnas: caben 3 arriba y las 2
   de abajo se centran solas desplazándose una columna. */
.lc-grid-cards--wide .lc-grid-cards__cell { grid-column: span 2; }
.lc-grid-cards--wide .lc-grid-cards__cell:nth-child(4) { grid-column: 2 / span 2; }
.lc-grid-cards--wide .lc-grid-cards__cell:nth-child(5) { grid-column: 4 / span 2; }


/* — Entrada escalonada ——————————————————————————————————————
   Se engancha a .lc-info-card, así que solo alcanza a las tarjetas que la
   llevan; las demás rejillas no se enteran. */
.lc-info-card {
  transition: opacity 1000ms ease-out, transform 1000ms ease-out, box-shadow 1000ms ease-out;
}

/* Lo pone el JS solo si va a animar: sin JS o con reduce-motion las tarjetas
   se quedan visibles. */
.lc-info-card.reveal-init {
  opacity: 0;
  transform: scale(0.92);
  box-shadow: none;
}

.lc-info-card.is-visible {
  opacity: 1;
  transform: none;
  box-shadow: var(--shadow-info);
}

.lc-grid-cards__grid .lc-info-card:nth-child(2) { transition-delay: 500ms; }
.lc-grid-cards__grid .lc-info-card:nth-child(3) { transition-delay: 1000ms; }
.lc-grid-cards__grid .lc-info-card:nth-child(4) { transition-delay: 1500ms; }


@media (max-width: 991.98px) {
  .lc-grid-cards {
    --cards-pad-top: 48px;
    --cards-pad-bottom: 48px;
    gap: 32px;
  }

  .lc-grid-cards__grid {
    grid-template-columns: repeat(var(--cards-cols-md), 1fr);
    gap: var(--cards-gap-md);
  }

  /* En móvil la rejilla de 6 deja de repartir spans. */
  .lc-grid-cards--wide .lc-grid-cards__cell,
  .lc-grid-cards--wide .lc-grid-cards__cell:nth-child(4),
  .lc-grid-cards--wide .lc-grid-cards__cell:nth-child(5) { grid-column: auto; }

  .lc-grid-cards--flat { --cards-gap-md: 12px; }

  .lc-grid-cards__note { width: 100%; }
}

@media (max-width: 575.98px) {
  .lc-grid-cards__grid { grid-template-columns: repeat(var(--cards-cols-sm), 1fr); }
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-med-notice/styles.css
   ─────────────────────────────────────────────────────────────────────── */

.lc-med-notice {
  background: var(--background-page);
  border-top: 1px solid var(--border-default);
  padding: 24px var(--lc-page-pad-x);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lc-med-notice__line {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.2px;
  color: var(--text-muted);
}

.lc-med-notice__line strong {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

/* Padding lateral responsive. En las landings esta regla es compartida por
   varias secciones (.lc-split-prose, .lc-split-accordion, .lc-cta-band…); aquí va recortada al componente —
   cada sección de la biblioteca llevará su propia copia al extraerse. */
@media (max-width: 1199px) {
  .lc-med-notice {
    padding-left: 60px;
    padding-right: 60px;
  }
}

@media (max-width: 991px) {
  .lc-med-notice {
    padding-left: 24px;
    padding-right: 24px;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   ORGANISMO · biblioteca/componentes/lc-footer/styles.css
   ─────────────────────────────────────────────────────────────────────── */

/* ── Parte 1: Contacto ─────────────────────────────────── */
.lc-footer__top {
  background: linear-gradient(to bottom, var(--lc-bg-band), #ffffff);
  padding: 84px 0;
}

.lc-footer__top-inner {
  display: flex;
  gap: 36px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.lc-footer__contact-col {
  flex: 0 0 376px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 29px;
}

.lc-footer__contact-icon {
  flex-shrink: 0;
  height: 42px;
  width: auto;
}

.lc-footer__contact-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lc-footer__contact-title {
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h5);
  font-weight: 500;
  line-height: var(--lc-lh-h5);
  letter-spacing: -0.24px;
  color: var(--lc-text-primary);
  margin: 0;
}

.lc-footer__contact-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  font-weight: 400;
  line-height: var(--lc-lh-body);
  letter-spacing: 0.27px;
  color: var(--lc-text-secondary);
}

.lc-footer__contact-items p {
  margin: 0;
}

.lc-footer__contact-items strong {
  font-weight: 700;
  letter-spacing: -0.36px;
  color: var(--lc-text-secondary);
}

.lc-footer__contact-link {
  color: var(--lc-text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lc-footer__contact-link:hover {
  color: var(--lc-brand-primary);
}

/* ── Parte 2: Nav links (azul) ─────────────────────────── */
.lc-footer__dark {
  background: var(--lc-brand-primary);
  padding: 54px 0;
}

.lc-footer__dark-inner {
  display: flex;
  gap: 36px;
  justify-content: center;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.lc-footer__nav-col {
  flex: 0 0 273px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.lc-footer__nav-heading {
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-eyebrow);
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 3.64px;
  text-transform: uppercase;
  color: #AACCFF;
  margin: 0;
}

.lc-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lc-footer__nav-list a {
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body-sm);
  font-weight: 400;
  line-height: var(--lc-lh-body-sm);
  letter-spacing: 0.21px;
  color: var(--lc-text-on-brand);
  text-decoration: none;
}

.lc-footer__nav-list a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Col Síguenos */
.lc-footer__social-col {
  flex: 0 0 273px;
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.lc-footer__social-col > div {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.lc-footer__social-icons {
  display: flex;
  gap: 23px;
  align-items: center;
}

.lc-footer__social-link {
  display: block;
  width: 36px;
  height: 36px;
  transition: opacity 0.15s;
}

.lc-footer__social-link:hover {
  opacity: 0.75;
}

.lc-footer__social-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lc-footer__vigilado {
  width: 234px;
  height: 46px;
  object-fit: contain;
  object-position: left;
}

/* ── Parte 3: Copyright ────────────────────────────────── */
.lc-footer__copyright {
  background: #C9C9C9;
  padding: 24px 10px 44px;
  text-align: center;
}

.lc-footer__copyright p {
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-caption);
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0.06px;
  color: var(--lc-text-primary);
  margin: 0;
}

@media (max-width: 1199.98px) {
.lc-footer__contact-col {
    flex: 1;
  }

.lc-footer__nav-col,
  .lc-footer__social-col {
    flex: 1;
  }
}

@media (max-width: 767.98px) {
.lc-footer__top {
    padding: 42px 0;
  }

.lc-footer__top-inner {
    flex-direction: column;
    gap: 42px;
  }

.lc-footer__contact-col {
    flex: none;
    width: 100%;
  }

/* En mobile el texto del contacto baja a body-sm */
.lc-footer__contact-items {
    font-size: var(--lc-size-body-sm);
    line-height: var(--lc-lh-body-sm);
    gap: 14px;
  }

.lc-footer__dark-inner {
    flex-direction: column;
    gap: 36px;
  }

.lc-footer__nav-col,
  .lc-footer__social-col {
    flex: none;
    width: 100%;
  }

.lc-footer__social-col {
    gap: 36px;
  }
}


/* ───────────────────────────────────────────────────────────────────────
   PROPIO · bloques .eg-* de esta página
   ─────────────────────────────────────────────────────────────────────── */


/* — Hero ————————————————————————————————————————————————————————————————— */
:root {

  --eg-col: calc((100vw - 2 * var(--lc-page-pad-x) - (var(--lc-grid-cols) - 1) * var(--lc-grid-gutter)) / var(--lc-grid-cols));
  --eg-span-3: calc(3 * var(--eg-col) + 2 * var(--lc-grid-gutter));
  --eg-span-5: calc(5 * var(--eg-col) + 4 * var(--lc-grid-gutter));
  --eg-span-7: calc(7 * var(--eg-col) + 6 * var(--lc-grid-gutter));
  --eg-span-8: calc(8 * var(--eg-col) + 7 * var(--lc-grid-gutter));
}


.eg-hero .lc-hero__title {
  font-weight: var(--lc-fw-regular);
  letter-spacing: 0;
}

.eg-hero { --hero-bg: var(--lc-blue-jordy-light); }
.eg-hero .lc-hero__content { gap: 12px; }

@media (min-width: 992px) {
  .eg-hero .lc-hero__diff-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--eg-span-3)));
    gap: var(--lc-grid-gutter);
  }
  .eg-hero .lc-hero__diff-row .lc-stat-card { width: auto; min-width: 0; }


  .eg-hero .lc-hero__panel {
    width: calc(var(--lc-page-pad-x) + var(--eg-span-7));
    max-width: none;
    padding-right: 0;
  }
  .eg-hero .lc-hero__content { padding-right: 0; }
  .eg-hero .lc-hero__media {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--lc-page-pad-x);
    width: var(--eg-span-5);
    padding-block: 56px;
  }
  .eg-hero .lc-hero__bg {
    position: static;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}

.eg-hero .lc-stat-card { background: color-mix(in srgb, var(--lc-blue-jordy) 50%, transparent); }
.eg-hero .lc-stat-card__num,
.eg-hero .lc-stat-card__text { color: var(--lc-brand-primary); }
.eg-hero__note {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body-sm);
  line-height: var(--lc-lh-body-sm);
  color: var(--lc-text-secondary);
}


/* — Respaldo ———————————————————————————————————————————————————————————— */
.eg-respaldo {
  text-align: center;

  background: linear-gradient(to bottom, var(--lc-blue-jordy-light) 0%, var(--lc-white) 92.66%);
}
.eg-respaldo__sub {
  margin: 16px auto 0;
  max-width: var(--lc-span-8);
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body);
  line-height: var(--lc-lh-body);
  color: var(--lc-text-secondary);
}


/* — Beneficios · 4 cajas de 3 columnas, gap = gutter ———————————————————— */
.eg-benef { --cards-bg: var(--lc-white); }
.eg-benef .lc-card { box-shadow: var(--lc-shadow-card); }
@media (min-width: 992px) {
  .eg-benef .lc-grid-cards__grid {
    width: calc(100vw - 2 * var(--lc-page-pad-x));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--lc-grid-gutter);
  }
}


/* — Ruta hacia LaCardio · paso a paso ————————————————————————————————— */
.eg-pasos {
  padding: var(--lc-space-3xl) var(--lc-page-pad-x) var(--lc-space-4xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;
  background: var(--lc-bg-page);
}
.eg-pasos__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lc-grid-gutter);
  width: 100%;
}
@media (min-width: 992px) {
  .eg-pasos__list {
    width: calc(100vw - 2 * var(--lc-page-pad-x));
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.eg-paso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--lc-space-xxs);
  min-height: 138px;
  padding: var(--lc-space-md) var(--lc-space-lg);
  border-radius: var(--lc-radius-base);
  background: var(--lc-bg-page);
  box-shadow: -6px -8px 16.5px 0 rgba(255, 255, 255, 0.68),
              15px 26px 25.1px -12px rgba(146, 146, 146, 0.24);
}
.eg-paso__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 3px var(--lc-space-sm);
  border-radius: 3px;
  background: var(--lc-blue-50);
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-caption);
  line-height: 18px;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--lc-brand-primary);
}
.eg-paso__title {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h5);
  font-weight: var(--lc-fw-medium);
  line-height: var(--lc-lh-h5);
  letter-spacing: var(--lc-ls-heading);
  color: var(--lc-brand-primary);
}
.eg-paso__text {
  margin: 2px 0 0;
  font: var(--lc-text-body-md);
  letter-spacing: var(--lc-ls-body);
  color: var(--lc-text-primary);
}


.eg-alerta {
  width: 100%;
  padding: var(--lc-space-lg);
  border: 1px solid var(--lc-feedback-warning-border);
  border-radius: var(--lc-radius-lg);
  background: var(--lc-feedback-warning-bg);
  color: var(--lc-feedback-warning-text);
}
@media (min-width: 992px) {
  .eg-alerta { width: var(--eg-span-8); }
}
.eg-alerta__title {
  display: flex;
  align-items: center;
  gap: var(--lc-space-sm);
  margin: 0 0 var(--lc-space-xs);
  font-family: var(--lc-font-heading);
  font-size: var(--lc-size-h6);
  font-weight: var(--lc-fw-medium);
  line-height: var(--lc-lh-h6);
}
.eg-alerta__icon { flex: none; width: 24px; height: 24px; color: var(--lc-feedback-warning-icon); }
.eg-alerta__text {
  margin: 0;
  font: var(--lc-text-body-md);
  letter-spacing: var(--lc-ls-body);
}


/* — Cómo funciona · pasos + celular ————————————————————————————————————— */
.eg-funciona {
  --split-bg: linear-gradient(to bottom, var(--lc-white) 0%, var(--lc-bg-page) 100%);
  --split-align: center;
  --split-cols: var(--lc-span-6) 1fr;
}
.eg-funciona .lc-split__col { display: flex; flex-direction: column; gap: 32px; }

.eg-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.eg-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  background: var(--lc-bg-surface);
  border-radius: var(--lc-radius-lg);
  box-shadow: var(--lc-shadow-card);
}
.eg-steps__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--lc-radius-full);
  background: var(--lc-brand-primary);
  color: var(--lc-text-on-brand);
  font-family: var(--lc-font-heading);
  font-weight: var(--lc-fw-medium);
  font-size: 18px;
}
.eg-steps__title {
  margin: 0 0 4px;
  font-family: var(--lc-font-heading);
  font-weight: var(--lc-fw-medium);
  font-size: var(--lc-size-h6);
  line-height: var(--lc-lh-h6);
  color: var(--lc-brand-primary);
}
.eg-steps__text {
  margin: 0;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body-md);
  line-height: var(--lc-lh-body-md);
  color: var(--lc-text-secondary);
}

.eg-funciona__visual { align-items: center; }
.eg-mockup { display: block; width: 100%; max-width: 320px; height: auto; }


/* — Planes ——————————————————————————————————————————————————————————————— */
.eg-planes {
  padding: 64px var(--lc-page-pad-x);
  background: var(--lc-white);
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.eg-planes__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--lc-span-4));
  justify-content: center;
  gap: var(--lc-grid-gutter);
}
.eg-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  background: var(--lc-bg-surface);
  border: 1px solid var(--lc-border-soft-alt);
  border-radius: var(--lc-radius-xl);
  box-shadow: var(--lc-shadow-card);
}
.eg-plan--featured { border: 2px solid var(--lc-brand-primary); }
.eg-plan__tag { position: absolute; top: 32px; right: 32px; }
.eg-plan__name {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-weight: var(--lc-fw-medium);
  font-size: var(--lc-size-h5);
  line-height: var(--lc-lh-h5);
  color: var(--lc-text-primary);
}
.eg-plan__price {
  margin: 0;
  font-family: var(--lc-font-heading);
  font-weight: var(--lc-fw-medium);
  font-size: var(--lc-size-h2);
  line-height: var(--lc-lh-h2);
  letter-spacing: var(--lc-ls-heading);
  color: var(--lc-brand-primary);
}
.eg-plan__per {
  font-family: var(--lc-font-body);
  font-weight: var(--lc-fw-regular);
  font-size: var(--lc-size-body);
  letter-spacing: 0;
  color: var(--lc-text-secondary);
}
.eg-plan__text {
  margin: 0;
  flex: 1;
  font-family: var(--lc-font-body);
  font-size: var(--lc-size-body-md);
  line-height: var(--lc-lh-body-md);
  color: var(--lc-text-secondary);
}
.eg-plan .eg-plan__btn { width: 100%; margin-top: 12px; }


/* — Preguntas ———————————————————————————————————————————————————————————— */
.eg-faq { --split-pad-top: 80px; }
.eg-faq__cta { margin-top: 32px; }


/* — Aviso ———————————————————————————————————————————————————————————————— */
.eg-aviso a { color: inherit; text-decoration: underline; }


/* — Mobile ——————————————————————————————————————————————————————————————— */
@media (max-width: 991.98px) {
  .eg-funciona { --split-cols: 1fr; }
  .eg-funciona__visual { padding: 16px 0; }
  .eg-planes__grid { grid-template-columns: minmax(0, 1fr); }
  .eg-planes { padding: 48px var(--lc-page-pad-x); }
  .eg-pasos { padding-block: var(--lc-space-2xl); gap: var(--lc-space-xl); }
  .eg-hero .lc-hero__title { font-size: 37px; line-height: 45px; }

  .eg-respaldo { text-align: left; }
  .eg-respaldo__sub { margin-inline: 0; }

  .eg-hero .lc-hero__media::before,
  .eg-hero .lc-hero__media::after { content: none; }

  .eg-hero .lc-hero__media { padding: 48px var(--lc-page-pad-x) var(--lc-space-lg); }

  .eg-hero .lc-hero__bg { width: auto; max-width: 100%; max-height: 360px; margin-inline: auto; }
}