/* B06 LAB visual (2026-09-29). Capa acotada a body.visual-lab; no altera imágenes, datos ni JS.
   Rollback: retirar el <link> a este archivo en lab/index.html, lab/oltc/index.html y lab/sfra/index.html. */

/* 1. Foco visible coherente en todo el LAB cargado con esta hoja. */
body.visual-lab :is(a, button, summary):focus-visible { outline: 3px solid #e3b964 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #071a24 !important; }

/* 2. Evidencia del hero visible también en móvil (antes: absoluta, z-index -2, opacidad .8 bajo el degradado). */
body.visual-lab:is(.caso--oltc, .caso--sfra) .campaign-hero > img { position: relative !important; inset: auto !important; z-index: 1 !important; opacity: 1 !important; }
/* SFRA: la curva es la evidencia; se muestra completa (sin recorte por cover). */
body.visual-lab.caso--sfra .campaign-hero > img { object-fit: contain !important; height: auto !important; max-height: 70vh; background: #fff; }
@media (max-width: 900px) {
  body.visual-lab.caso--oltc .campaign-hero > img { height: auto !important; aspect-ratio: 1086 / 1448; max-height: 72svh; object-fit: cover !important; }
  body.visual-lab.caso--sfra .campaign-hero > img { max-height: none; }
  body.visual-lab:is(.caso--oltc, .caso--sfra) .campaign-hero { gap: 32px !important; }
}

/* 3. Etiquetas de paso OLTC legibles (antes rgb(18,50,59) sobre fondo casi negro). */
body.visual-lab.caso--oltc .editorial-step .step { color: #e3b964 !important; }

/* 4. Rótulos generados por CSS compartido que contradecían la numeración del caso. */
body.visual-lab.caso--oltc .story-band::before { content: none !important; }
body.visual-lab.caso--sfra .story-split:nth-of-type(3)::before { margin-bottom: .75rem !important; }

/* 5. Profundidad bajo demanda: recorrido del caso (enlaces a secciones existentes). */
body.visual-lab .campaign-hero:has(+ .b06-route) { margin-bottom: 0 !important; }
body.visual-lab .b06-route { background: #071a24; border-top: 1px solid #ffffff1f; border-bottom: 1px solid #ffffff1f; }
body.visual-lab .b06-route ol { display: flex; flex-wrap: wrap; gap: .5rem 1rem; max-width: 1120px; margin: 0 auto; padding: 1rem 1.5rem; list-style: none; counter-reset: none; }
body.visual-lab .b06-route li { margin: 0; padding: 0; }
body.visual-lab .b06-route li::before { content: none; }
body.visual-lab .b06-route a { display: inline-flex; gap: .5rem; align-items: center; min-height: 44px; padding: .35rem .2rem; color: #d9e8e8; text-decoration: none; font-size: .95rem; }
body.visual-lab .b06-route a span { color: #e3b964; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
body.visual-lab .b06-route a:hover { color: #fff; text-decoration: underline; text-underline-offset: .22em; }
@media (max-width: 600px) { body.visual-lab .b06-route ol { padding: .75rem 1rem; gap: 0 .9rem; } }
body.visual-lab :is(#paso-contrastar, #paso-estatica, #paso-dinamica, #paso-inspeccion, #evidencia, #modelo, #paso-decidir, #decision) { scroll-margin-top: 84px; }

/* 6. Movimiento reducido: sin desplazamiento suave en los saltos del recorrido. */
@media (prefers-reduced-motion: reduce) { html:has(body.visual-lab) { scroll-behavior: auto !important; } }

/* PREB12 B06-PERF-01: las imágenes lazy bajo el pliegue competían con el hero (LCP). content-visibility retrasa su
   render/descarga hasta que se acercan al viewport; imágenes, orden y contenido intactos. */
body.visual-lab .oltc-editorial > :is(.editorial-flow, .story-gallery, .decision-band) { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
/* F6: con un #fragmento activo se renderiza todo y el salto es instantáneo, para que aterrice exacto
   (el desplazamiento suave de lab.css medía antes de que el contenido omitido tuviera su altura real). */
body.visual-lab:has(:target) .oltc-editorial > :is(.editorial-flow, .story-gallery, .decision-band) { content-visibility: visible; }
html:has(body.visual-lab .oltc-editorial :target) { scroll-behavior: auto !important; }