/* lhm-confianza.css — «Interoperabilidad», «Seguridad comprobada» y «Glosario» de la vitrina pública (23-oct-2026).
 *
 * Los mismos parciales (`Views/parciales/confianza/`) se pintan en DOS sitios:
 *   · la landing de la entrada (`auth/_vitrina.php`), sobre claro: `.lcf`;
 *   · el recorrido inmersivo (`recorrido/inmersivo.php`), sobre el azul de la escena: `.lcf.lcf--oscuro`.
 * Cambian solo los tokens `--lcf-*`; los componentes son uno.
 *
 * 🔴 Ningún color de marca escrito a mano: salen del TEMA DEL CLIENTE (`--lhm-*`, `Tema::variables()`), como en
 *    lhm-vitrina.css. El acento NUNCA como texto sobre claro: para eso está `--lhm-acento-texto` (AA).
 * 🔴 Pesos 400 y 600 solamente (la entrada no descarga otros: trampa 260).
 * 🔴 El texto de los SVG nunca se atenúa con `opacity`: axe mide el contraste del color que resulta.
 * Lo que se mueve, con «reducir movimiento» queda quieto. Prefijos `lcf-` (secciones) y `lgl-` (glosario).
 * Doc: docs/interfaz/VITRINA_CONFIANZA_2026-10-23.md
 */
.lcf {
  --lcf-titulo: var(--lhm-sidebar, #2a3042);
  --lcf-texto: #2b3040;
  --lcf-tenue: #5a6274;
  --lcf-linea: rgba(43, 48, 64, .14);
  --lcf-tarjeta: #fff;
  --lcf-fondo2: var(--lhm-fondo, #f8f8fb);
  --lcf-acento: var(--lhm-acento, #f1b44c);
  --lcf-acento-texto: var(--lhm-acento-texto, #8a6410);
  --lcf-elegido: var(--lhm-primario, #3b5de7);
  --lcf-sobre-elegido: #fff;
  --lcf-ok-borde: #2E7D5B;
  --lcf-ok-texto: #1F5A40;
  --lcf-ok-fondo: #1F5A40;
  --lcf-ease: cubic-bezier(.22, 1, .36, 1);
  color: var(--lcf-texto);
}
.lcf--oscuro {
  --lcf-titulo: #fff;
  --lcf-texto: #F3EFE6;
  --lcf-tenue: #D9D4C8;
  --lcf-linea: rgba(243, 239, 230, .18);
  --lcf-tarjeta: rgba(243, 239, 230, .06);
  --lcf-fondo2: rgba(243, 239, 230, .04);
  --lcf-acento: var(--lhm-acento-oscuro, #C4A25C);
  --lcf-acento-texto: var(--lhm-acento-oscuro, #C4A25C);
  --lcf-elegido: var(--lhm-acento-oscuro, #C4A25C);
  --lcf-sobre-elegido: #1b1406;
  --lcf-ok-borde: #7fbf8e;
  --lcf-ok-texto: #CDEBD5;
  --lcf-ok-fondo: #1F5A40;
}
.lcf strong, .lcf b { font-weight: 600; }

/* ── Secciones en la landing ─────────────────────────────────────────── */
.lcf-sec { padding: clamp(4rem, 9vw, 7rem) 0; background: #fff; border-top: 1px solid var(--lcf-linea); }
.lcf-sec--salud { background: var(--lcf-fondo2); }
.lcf-sec .lvt-h2 { color: var(--lcf-titulo); }
.lcf-lead { max-width: 48rem; margin: 0 0 2rem; color: var(--lcf-tenue); font-size: clamp(1rem, 1.5vw, 1.15rem); }
.lcf-h3 { margin: clamp(2.5rem, 5vw, 4rem) 0 .5rem; color: var(--lcf-titulo); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; }
.lcf-sub { margin: 0 0 1.25rem; color: var(--lcf-tenue); }

/* ── En el inmersivo: cada bloque es un momento (una diapositiva) ─────── */
.lcf-ancho { width: 100%; max-width: 72rem; }
.lcf--oscuro .lcf-eyebrow { color: var(--lcf-acento-texto); }
.lcf-eyebrow { margin: 0 0 .6rem; color: var(--lcf-acento-texto); font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.lcf-h2 { margin: 0 0 1rem; color: var(--lcf-titulo); font-weight: 600; font-size: clamp(1.6rem, 3.6vw, 2.6rem); line-height: 1.12; text-wrap: balance; }
.lcf--oscuro .lcf-h3 { margin-top: 2.25rem; }
.lcf--oscuro .lcf-ancho > .lcf-h3:first-child { margin-top: 0; }

/* ── Interoperabilidad: el diagrama ───────────────────────────────────── */
/* La forma elegida se marca en la sección (`data-io-sel`) y cada nodo y camino declara en qué formas participa
   (`data-io~=`). Sin JS se ve la primera, y las cuatro fichas como lista. */
.lcf-io-diagrama { margin: 0 0 1.5rem; padding: clamp(.75rem, 2vw, 1.5rem); border-radius: 1.1rem; background: var(--lcf-fondo2); border: 1px solid var(--lcf-linea); }
.lcf--oscuro .lcf-io-diagrama { background: rgba(0, 0, 0, .18); }
.lcf-io-svg { display: block; width: 100%; height: auto; font-family: inherit; }
.lcf-io-svg text { text-anchor: middle; fill: var(--lcf-titulo); font-size: 17px; font-weight: 600; }
.lcf-io-svg .lcf-io-subt { fill: var(--lcf-tenue); font-size: 13px; font-weight: 400; }
.lcf-io-svg .lcf-io-col { fill: var(--lcf-acento-texto); font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.lcf-io-n rect { fill: var(--lcf-tarjeta); stroke: var(--lcf-linea); stroke-width: 1.5; transition: fill .4s var(--lcf-ease), stroke .4s; }
.lcf--oscuro .lcf-io-n rect { fill: #1d2433; }
.lcf-io-canal rect { stroke-dasharray: 6 6; }
.lcf-io-sep { stroke: var(--lcf-linea); stroke-width: 1; }
.lcf-io-p { fill: none; stroke: var(--lcf-linea); stroke-width: 3; stroke-linecap: round; transition: stroke .4s; }
.lcf-io-punta { fill: var(--lcf-tenue); }
.lcf-io[data-io-sel="api"] .lcf-io-n[data-io~="api"] rect,
.lcf-io[data-io-sel="avisos"] .lcf-io-n[data-io~="avisos"] rect,
.lcf-io[data-io-sel="vista"] .lcf-io-n[data-io~="vista"] rect,
.lcf-io[data-io-sel="archivos"] .lcf-io-n[data-io~="archivos"] rect { fill: var(--lcf-elegido); stroke: var(--lcf-acento); }
.lcf-io[data-io-sel="api"] .lcf-io-n[data-io~="api"] text,
.lcf-io[data-io-sel="avisos"] .lcf-io-n[data-io~="avisos"] text,
.lcf-io[data-io-sel="vista"] .lcf-io-n[data-io~="vista"] text,
.lcf-io[data-io-sel="archivos"] .lcf-io-n[data-io~="archivos"] text { fill: var(--lcf-sobre-elegido); }
.lcf-io[data-io-sel="api"] .lcf-io-p[data-io~="api"],
.lcf-io[data-io-sel="avisos"] .lcf-io-p[data-io~="avisos"],
.lcf-io[data-io-sel="vista"] .lcf-io-p[data-io~="vista"],
.lcf-io[data-io-sel="archivos"] .lcf-io-p[data-io~="archivos"] { stroke: var(--lcf-acento); stroke-dasharray: 10 8; animation: lcf-fluye 1.1s linear infinite; }
@keyframes lcf-fluye { to { stroke-dashoffset: -36; } }

/* Las pestañas y sus fichas */
.lcf-io-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.lcf-io-tab {
  display: flex; align-items: flex-start; gap: .75rem; padding: .9rem; text-align: left; cursor: pointer; min-width: 0;
  border-radius: .9rem; border: 1px solid var(--lcf-linea); background: var(--lcf-tarjeta); color: var(--lcf-titulo);
  font: inherit; transition: background .3s, border-color .3s, transform .3s var(--lcf-ease);
}
.lcf-io-tab:hover { border-color: var(--lcf-acento); transform: translateY(-2px); }
.lcf-io-tab .bx { display: inline-grid; place-items: center; flex: none; width: 2.35rem; height: 2.35rem; border-radius: .65rem; background: var(--lcf-elegido); color: var(--lcf-sobre-elegido); font-size: 1.2rem; }
.lcf-io-tab strong { display: block; font-size: .95rem; line-height: 1.25; }
.lcf-io-tab small { display: block; margin-top: .15rem; color: var(--lcf-acento-texto); font-size: .75rem; font-weight: 600; }
.lcf-io-tab[aria-selected="true"] { background: var(--lcf-elegido); border-color: var(--lcf-elegido); color: var(--lcf-sobre-elegido); }
.lcf-io-tab[aria-selected="true"] .bx { background: var(--lcf-sobre-elegido); color: var(--lcf-elegido); }
.lcf-io-tab[aria-selected="true"] small { color: var(--lcf-sobre-elegido); }
.lcf-io-panel { padding: clamp(1.1rem, 2.6vw, 1.75rem); margin: 0 0 1rem; border-radius: 1rem; border: 1px solid var(--lcf-linea); border-left: 4px solid var(--lcf-acento); background: var(--lcf-tarjeta); }
.lcf-io-panel[hidden] { display: none !important; }
.lcf-io-panel-t { margin: 0 0 .6rem; color: var(--lcf-titulo); font-weight: 600; font-size: 1.15rem; }
.lcf-io-etq { display: inline-block; white-space: nowrap; margin-left: .4rem; padding: .1rem .6rem; border-radius: 99px; background: var(--lcf-fondo2); border: 1px solid var(--lcf-linea); color: var(--lcf-acento-texto); font-size: .75rem; font-weight: 600; vertical-align: middle; }
.lcf-io-que { margin: 0 0 1rem; }
.lcf-io-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.75rem; margin: 0; }
.lcf-io-dl dt { color: var(--lcf-acento-texto); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.lcf-io-dl dd { margin: .25rem 0 0; color: var(--lcf-tenue); font-size: .9375rem; }

/* Lo que entra y sale además, y los pasos */
.lcf-otras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lcf-otras li { padding: 1.1rem; border-radius: .9rem; border: 1px solid var(--lcf-linea); background: var(--lcf-tarjeta); }
.lcf-otras .bx { font-size: 1.5rem; color: var(--lcf-acento-texto); }
.lcf-otras strong { display: block; margin: .4rem 0 .3rem; color: var(--lcf-titulo); }
.lcf-otras p { margin: 0; color: var(--lcf-tenue); font-size: .9rem; }
.lcf-pasos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.lcf-pasos li { padding: 1.1rem; border-radius: .9rem; background: var(--lcf-tarjeta); border: 1px solid var(--lcf-linea); }
.lcf-pasos strong { display: block; margin: .6rem 0 .3rem; color: var(--lcf-titulo); }
.lcf-pasos p { margin: 0; color: var(--lcf-tenue); font-size: .875rem; }
.lcf-n { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: .6rem; background: var(--lcf-elegido); color: var(--lcf-sobre-elegido); font-weight: 600; font-size: .9rem; }

/* Las siete capas */
.lcf-capas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.lcf-capas details { border-radius: .9rem; border: 1px solid var(--lcf-linea); background: var(--lcf-tarjeta); }
.lcf-capas summary { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; cursor: pointer; list-style: none; color: var(--lcf-titulo); font-weight: 600; }
.lcf-capas summary::-webkit-details-marker { display: none; }
.lcf-capas summary::after { content: '+'; margin-left: auto; color: var(--lcf-acento-texto); font-size: 1.4rem; line-height: 1; transition: transform .3s var(--lcf-ease); }
.lcf-capas details[open] summary::after { transform: rotate(45deg); }
.lcf-capas summary .bx { color: var(--lcf-acento-texto); font-size: 1.2rem; }
.lcf-capas details p { margin: 0; padding: 0 1.1rem 1.1rem 3.85rem; color: var(--lcf-tenue); font-size: .9375rem; }

/* ── Seguridad comprobada ─────────────────────────────────────────────── */
/* El verde solo para lo que cumple su umbral, que es lo único que se publica. */
.lcf-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lcf-salud-resumen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
  margin: 0 0 1.5rem; padding: 1rem 1.4rem; border-radius: .9rem; background: var(--lhm-sidebar, #2a3042); color: rgba(255, 255, 255, .86);
}
.lcf--oscuro .lcf-salud-resumen { background: rgba(0, 0, 0, .25); border: 1px solid var(--lcf-linea); }
.lcf-salud-resumen p { margin: 0; }
.lcf-salud-resumen__n { color: #fff; font-weight: 600; }
.lcf-salud-resumen__n strong { margin-right: .35rem; color: var(--lhm-acento-oscuro, #f1b44c); font-size: 1.75rem; vertical-align: -.15rem; }
.lcf-salud-resumen__f { font-size: .875rem; }
.lcf-salud-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; align-items: stretch; }
.lcf-salud-card { display: flex; flex-direction: column; gap: .75rem; min-width: 0; padding: 1.15rem; border-radius: .9rem; background: var(--lcf-tarjeta); border: 1px solid var(--lcf-linea); }
.lcf-salud-cab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; align-items: center; }
.lcf-salud-ico { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .65rem; background: var(--lcf-elegido); color: var(--lcf-sobre-elegido); font-size: 1.25rem; }
.lcf-salud-fuente { margin: 0; color: var(--lcf-titulo); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.lcf-salud-mide { margin: .1rem 0 0; color: var(--lcf-tenue); font-size: .8125rem; line-height: 1.35; }
.lcf-salud-nota { margin: 0; min-width: 3.6rem; padding: .5rem .7rem; border-radius: .6rem; text-align: center; background: var(--lcf-ok-fondo); color: #fff; font-size: 1.45rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.lcf-salud-nota--larga { font-size: .95rem; padding: .6rem; }
.lcf-salud-explica, .lcf-salud-detalle { margin: 0; font-size: .9375rem; line-height: 1.55; }
.lcf-salud-detalle { color: var(--lcf-tenue); font-size: .875rem; }
.lcf-salud-psi { margin: 0; display: grid; gap: .5rem; }
.lcf-salud-psi > div { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.lcf-salud-psi dt { color: var(--lcf-tenue); font-size: .8125rem; font-weight: 600; }
.lcf-salud-psi dd { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.lcf-salud-psi__v { display: flex; flex-direction: column; align-items: center; padding: .35rem .1rem; border-radius: .6rem; border: 2px solid var(--lcf-ok-borde); color: var(--lcf-ok-texto); }
.lcf-salud-psi__v b { font-size: 1.05rem; line-height: 1.1; }
.lcf-salud-psi__v small { font-size: .625rem; color: var(--lcf-tenue); text-align: center; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
.lcf-salud-cap { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; cursor: zoom-in; border: 1px solid var(--lcf-linea); border-radius: .6rem; background: #fff; }
.lcf-salud-cap img { display: block; width: 100%; height: 10.5rem; object-fit: cover; object-position: top left; }
.lcf-salud-cap__ver { position: absolute; right: .5rem; bottom: .5rem; padding: .3rem .65rem; border-radius: 99px; background: rgba(23, 29, 53, .9); color: #fff; font-size: .75rem; font-weight: 600; }
.lcf-salud-pie { margin: auto 0 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem .75rem; color: var(--lcf-tenue); font-size: .8125rem; }
.lcf-salud-pie a { color: var(--lcf-titulo); font-weight: 600; text-underline-offset: 3px; }
.lcf-salud-nota-pie { margin: 1.4rem 0 0; color: var(--lcf-tenue); font-size: .875rem; }
.lcf-salud-nota-pie a { color: var(--lcf-titulo); font-weight: 600; }

/* ── Glosario: el término dentro de un texto ──────────────────────────── */
/* Subrayado con puntos: se distingue de un enlace normal y avisa «aquí hay una explicación». */
a.lgl-term {
  color: var(--lhm-acento-texto, #8a6410); font-weight: 600; cursor: help;
  text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
a.lgl-term:hover { text-decoration-style: solid; }
.lcf--oscuro a.lgl-term, .lhm-escena a.lgl-term, .lvt-portada a.lgl-term, .lvt-garantias a.lgl-term { color: var(--lhm-acento-oscuro, #f1b44c); }
.lcf-io-tab[aria-selected="true"] a.lgl-term { color: inherit; }

/* El globo (WCAG 1.4.13: se puede recorrer con el ratón, Escape lo cierra, no tapa el foco). */
.lgl-tip {
  position: fixed; z-index: 1090; max-width: min(20rem, calc(100vw - 1rem));
  padding: .75rem .9rem; border-radius: .6rem; background: var(--lhm-sidebar, #2a3042); color: #fff;
  box-shadow: 0 .75rem 2rem rgba(17, 24, 35, .3); font-size: .875rem; line-height: 1.5;
}
.lgl-tip[hidden] { display: none; }
.lgl-tip strong { display: block; margin-bottom: .2rem; color: var(--lhm-acento-oscuro, #f1b44c); font-weight: 600; }
.lgl-tip span, .lgl-tip small { display: block; }
.lgl-tip small { margin-top: .35rem; color: rgba(255, 255, 255, .8); font-size: .75rem; }

/* El diálogo (también el de las capturas), siempre claro. */
.lgl-dlg {
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100dvh - 3rem); padding: 0;
  border: 0; border-radius: 1rem; background: #fff; color: #2b3040;
  box-shadow: 0 1.5rem 4rem rgba(17, 24, 35, .4); font-family: var(--lhm-tipografia, inherit); font-size: 1rem; line-height: 1.65;
}
.lgl-dlg[open] { display: flex; flex-direction: column; }
.lgl-dlg::backdrop { background: rgba(17, 24, 35, .62); }
.lgl-dlg--captura { width: min(62rem, calc(100vw - 2rem)); }
.lgl-dlg__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--lhm-sidebar, #2a3042); }
.lgl-dlg__t { margin: 0; color: #fff; font-size: 1.2rem; font-weight: 600; line-height: 1.25; }
.lgl-dlg__cerrar { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.35rem; cursor: pointer; }
.lgl-dlg__cerrar:hover { background: rgba(255, 255, 255, .26); }
.lgl-dlg :focus-visible { outline: 3px solid var(--lhm-acento, #f1b44c); outline-offset: 3px; }
.lgl-dlg__cuerpo { padding: 1.25rem 1.25rem .25rem; overflow-y: auto; min-height: 0; }
.lgl-dlg__cuerpo p { margin: 0 0 .75rem; }
.lgl-dlg__pie { margin: 0; padding: .75rem 1.25rem 1.1rem; border-top: 1px solid rgba(43, 48, 64, .14); font-size: .875rem; }
.lgl-dlg__pie[hidden] { display: none; }
.lgl-dlg__pie a { color: var(--lhm-primario, #3b5de7); font-weight: 600; text-underline-offset: 3px; }
.lgl-dlg__captura { margin: 0; }
.lgl-dlg__captura img { display: block; width: 100%; height: auto; border: 1px solid rgba(43, 48, 64, .14); border-radius: .5rem; }
.lgl-dlg__captura figcaption { margin-top: .6rem; color: #5a6274; font-size: .875rem; }
.lgl-dlg__captura a { color: var(--lhm-primario, #3b5de7); font-weight: 600; }

/* La sección «Glosario» con sus fichas (sin JS, el destino de cada término). */
.lgl-grupo-t { margin: 1.75rem 0 .9rem; color: var(--lcf-titulo); font-weight: 600; font-size: 1.05rem; }
.lgl-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; align-items: start; }
.lcf--oscuro .lgl-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lgl-item { padding: 1rem 1.15rem; border: 1px solid var(--lcf-linea); border-radius: .8rem; background: var(--lcf-tarjeta); scroll-margin-top: 5rem; }
.lgl-item:target { border-color: var(--lcf-acento); box-shadow: 0 0 0 3px rgba(var(--lhm-acento-rgb, 241, 180, 76), .3); }
.lgl-termino { margin: 0 0 .35rem; color: var(--lcf-titulo); font-size: 1rem; font-weight: 600; line-height: 1.25; }
.lgl-corta { margin: 0 0 .5rem; color: var(--lcf-tenue); font-size: .9rem; }
.lgl-item summary { color: var(--lcf-acento-texto); font-weight: 600; font-size: .85rem; cursor: pointer; }
.lgl-largo { padding-top: .6rem; font-size: .9rem; }
.lgl-largo p { margin: 0 0 .6rem; }

/* Los dibujos de cada término (Glosario::svg()). Dentro del diálogo, siempre sobre claro. */
.lgl-gs { display: block; width: 100%; max-width: 32rem; height: auto; margin: 0 auto .9rem; font-family: inherit;
          --g-osc: var(--lhm-sidebar, #2a3042); --g-acento: var(--lhm-acento, #f1b44c); --g-tenue: #5a6274; --g-linea: #dfe2ea; }
.lgl-gs text { fill: var(--g-osc); font-size: 12px; font-weight: 600; text-anchor: middle; }
.lgl-gs .lgl-gs-sub { fill: var(--g-tenue); font-size: 11px; font-weight: 600; }
.lgl-gs .lgl-gs-claro { fill: #fff; }
.lgl-gs .lgl-gs-mini { font-size: 9px; font-weight: 400; }
.lgl-gs .lgl-gs-mas { font-size: 26px; }
.lgl-gs .lgl-gs-codigo { font-size: 11px; letter-spacing: .5px; }
.lgl-gs-caja { fill: #fff; stroke: var(--g-osc); stroke-width: 2; }
.lgl-gs-caja--osc { fill: var(--g-osc); }
.lgl-gs-tubo { fill: #f6f3ea; stroke: var(--g-osc); stroke-width: 2; stroke-dasharray: 6 4; }
.lgl-gs-dato { fill: var(--g-acento); animation: lgl-viaja 2.6s linear infinite; }
.lgl-gs-dato--2 { animation-delay: -1.3s; }
.lgl-gs-candado { fill: var(--g-osc); }
.lgl-gs-arco { fill: none; stroke: var(--g-osc); stroke-width: 3; }
.lgl-gs-ida, .lgl-gs-vuelta { fill: none; stroke: var(--g-acento); stroke-width: 3; stroke-dasharray: 8 6; animation: lcf-fluye 1.4s linear infinite; }
.lgl-gs-vuelta { stroke: var(--g-osc); animation-direction: reverse; }
.lgl-gs-muro { fill: var(--g-osc); }
.lgl-gs-ok { fill: #2E7D5B; }
.lgl-gs-no { fill: #B4472F; }
.lgl-gs--muro .lgl-gs-ok { animation: lgl-pasa 3s var(--lcf-ease, ease) infinite; }
.lgl-gs--muro .lgl-gs-no { animation: lgl-rebota 3s var(--lcf-ease, ease) infinite; }
.lgl-gs-col { fill: var(--g-linea); }
.lgl-gs-col--si { fill: var(--g-acento); animation: lgl-late 2.4s ease-in-out infinite; }
.lgl-gs-fila { fill: var(--g-linea); }
.lgl-gs--tabla .lgl-gs-fila { animation: lgl-late 2.4s ease-in-out infinite; }
.lgl-gs-fila--1 { animation-delay: .3s !important; } .lgl-gs-fila--2 { animation-delay: .6s !important; } .lgl-gs-fila--3 { animation-delay: .9s !important; }
.lgl-gs-fila--nueva { fill: var(--g-acento); animation: lgl-late 2.4s ease-in-out infinite; }
.lgl-gs-marca { stroke: var(--g-osc); stroke-width: 3; stroke-dasharray: 4 4; }
.lgl-gs-linea { fill: var(--g-linea); animation: lgl-late 2s ease-in-out infinite; }
.lgl-gs-linea--1 { animation-delay: .25s; } .lgl-gs-linea--2 { animation-delay: .5s; } .lgl-gs-linea--3 { animation-delay: .75s; }
.lgl-gs-radar { fill: none; stroke: var(--g-acento); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: lgl-radar 2s ease-out infinite; }
.lgl-gs-tilde { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lgl-gs--sello .lgl-gs-tilde { stroke: var(--g-osc); stroke-dasharray: 20; animation: lgl-traza 3s ease-in-out infinite; }
.lgl-gs-tilde--1 { animation-delay: .4s !important; } .lgl-gs-tilde--2 { animation-delay: .8s !important; }
.lgl-gs--llave .lgl-gs-tilde { stroke-dasharray: 30; animation: lgl-traza 3s ease-in-out infinite; }
.lgl-gs-sello { fill: var(--g-osc); stroke: var(--g-acento); stroke-width: 3; }
.lgl-gs--mascara .lgl-gs-caja--osc, .lgl-gs--huella .lgl-gs-caja--osc { animation: lgl-late 2.6s ease-in-out infinite; }
/* Calendario: los hábiles se encienden uno a uno; fin de semana y festivo, no. */
.lgl-gs-dia { fill: #fff; stroke: var(--g-linea); stroke-width: 1.5; }
.lgl-gs-dia--habil { animation: lgl-enciende 4.2s ease-in-out infinite; }
.lgl-gs-dia--finde { fill: #f1f2f5; stroke-dasharray: 3 3; }
.lgl-gs-dia--festivo { fill: #f6e3df; stroke: #B4472F; }
.lgl-gs-grupo, .lgl-gs-base, .lgl-gs-hoja { animation: lgl-late 3s ease-in-out infinite; }
.lgl-i-1 { animation-delay: .2s !important; } .lgl-i-2 { animation-delay: .4s !important; } .lgl-i-3 { animation-delay: .6s !important; }
.lgl-i-4 { animation-delay: .8s !important; } .lgl-i-5 { animation-delay: 1s !important; } .lgl-i-6 { animation-delay: 1.2s !important; }
.lgl-i-7 { animation-delay: 1.4s !important; } .lgl-i-8 { animation-delay: 1.6s !important; } .lgl-i-9 { animation-delay: 1.8s !important; }
.lgl-i-10 { animation-delay: 2s !important; } .lgl-i-11 { animation-delay: 2.2s !important; } .lgl-i-12 { animation-delay: 2.4s !important; }
.lgl-i-13 { animation-delay: 2.6s !important; }
@keyframes lgl-viaja { from { transform: translateX(0); opacity: 0; } 10%, 90% { opacity: 1; } to { transform: translateX(112px); opacity: 0; } }
@keyframes lgl-pasa { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(250px); } }
@keyframes lgl-rebota { 0% { transform: translateX(0); } 40% { transform: translateX(104px); } 70%, 100% { transform: translateX(0); } }
@keyframes lgl-late { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes lgl-enciende { 0%, 15% { fill: #fff; } 30%, 85% { fill: var(--g-acento); } 100% { fill: #fff; } }
@keyframes lgl-radar { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes lgl-traza { from { stroke-dashoffset: 30; } 40%, 100% { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lcf-io-p, .lgl-gs, .lgl-gs * { animation: none !important; }
  .lgl-gs-tilde { stroke-dashoffset: 0 !important; }
  .lgl-gs-dia--habil { fill: var(--g-acento); }
  .lcf-io-tab, .lcf-io-tab:hover { transition: none; transform: none; }
}

/* ── Anchos ───────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .lcf-io-tabs, .lcf-otras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcf-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcf-capas { grid-template-columns: minmax(0, 1fr); }
  .lgl-lista, .lcf--oscuro .lgl-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lcf-salud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .lcf-io-tabs, .lcf-otras, .lcf-pasos, .lcf-io-dl, .lgl-lista, .lcf--oscuro .lgl-lista, .lcf-salud-grid { grid-template-columns: minmax(0, 1fr); }
  .lcf-salud-psi > div { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  /* El diagrama no se encoge hasta ser ilegible: se desliza DENTRO de su marco (la página no). */
  .lcf-io-diagrama { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .lcf-io-svg { min-width: 45rem; }
  .lcf-io-diagrama::after { content: 'Deslice para ver el recorrido completo →'; display: block; margin-top: .6rem; color: var(--lcf-tenue); font-size: .8125rem; }
  .lcf-capas details p { padding-left: 1.1rem; }
}

/* En el inmersivo, el momento (`.lhm-inm-momento`, centrado por lhm-inmersivo.css) arranca arriba: estos bloques son
   altos y, centrados, empezaban detrás de la cabecera fija. */
.lcf-momento { justify-content: flex-start; }