/* FAVINCA · v2 · interacción (14-10-2026). Depende de tokens.css, componentes.css y paginas.css. Comportamiento: assets/js/interaccion.js.
   Idea rectora: el comprador opera la prueba. Guía v1.3: el movimiento explica, una animación por pantalla, sin scroll secuestrado,
   70-20-10 (ámbar solo en el llamado principal, la cifra clave y las señales de energía), resaltes en azul. */

/* Los tokens de movimiento v2 (--m-barrido, --m-ensamble, --m-vista) viven en tokens.css con los demás. */
:root {
  --alto-barra: 68px;
  --alto-capitulos: 52px;
}

/* ── Transición entre páginas (la regla @view-transition vive en la cabeza de base.html) ───────────────────── */
::view-transition-old(root) { animation: fv-vt-sale var(--m-vista) var(--ease-entrada) both; }
::view-transition-new(root) { animation: fv-vt-entra calc(var(--m-vista) * 1.4) var(--ease-salida) both; }
::view-transition-group(*) { animation-duration: var(--m-lento); animation-timing-function: var(--ease-salida); }
@keyframes fv-vt-sale { to { opacity: 0; } }
@keyframes fv-vt-entra { from { opacity: 0; transform: translateY(8px); } }

/* ── Revelado de encabezados (guía §12: --m-lento, una vez, 16 px de subida) ──────────────────────────────── */
.fv-revela { opacity: 0; transform: translateY(16px); }
.fv-revela.is-visible { opacity: 1; transform: none; transition: opacity var(--m-lento) var(--ease-salida), transform var(--m-lento) var(--ease-salida); }

/* ── Arrastre en comparadores: se arrastra desde cualquier punto de la foto (el deslizador queda para el teclado) ── */
.fv-js .fv-comparador { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fv-js .fv-comparador input[type=range] { pointer-events: none; }
.fv-comparador img { -webkit-user-drag: none; }
.fv-comparador__linea::after { transition: transform var(--m-rapido) var(--ease-salida), box-shadow var(--m-rapido); }
.fv-comparador.is-arrastrando .fv-comparador__linea::after { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.22), var(--sombra-2); }

/* ══ Barrido del corte (simulador de apagón de la home y de alimentos) ═══════════════════════════════════════ */
/* --corte: borde izquierdo de la zona en apagón. 100 % = todo con luz; 0 % = todo en apagón. El apagón entra por la derecha. */
.fv-sim.is-barrido .fv-sim__escena { cursor: ew-resize; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fv-sim.is-barrido .fv-sim__escena .s-capa-off { opacity: 1; clip-path: inset(0 0 0 var(--corte, 100%)); transition: none; }
.fv-corte { position: absolute; inset: 0; pointer-events: none; }
.fv-corte__linea { position: absolute; top: 0; bottom: 0; left: var(--corte, 100%); width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, #f2f4f8 10%, #f2f4f8 90%, transparent); box-shadow: 0 0 14px rgba(159, 176, 220, 0.75); transition: opacity var(--m-base); }
.fv-corte__tirador { position: absolute; top: 50%; left: clamp(26px, var(--corte, 100%), calc(100% - 26px)); width: 44px; height: 44px; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--azul-900); box-shadow: var(--sombra-2);
  transition: transform var(--m-rapido) var(--ease-salida), box-shadow var(--m-rapido); }
.fv-corte__tirador::before { content: "‹ ›"; font: 600 16px/1 var(--f-texto); }
.fv-sim__escena.is-arrastrando .fv-corte__tirador { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2), var(--sombra-2); }
.fv-corte:has(input:focus-visible) .fv-corte__tirador { outline: 2px solid var(--foco); outline-offset: 3px; }
.fv-corte.is-extremo .fv-corte__linea { opacity: 0; }
/* Rótulos de cada mitad: color + texto (regla de estados: verde = con luz, rojo = sin servicio). */
.fv-corte__rotulo { position: absolute; bottom: var(--e-3); display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: var(--radio-s);
  background: rgba(11, 20, 40, 0.82); border: 1px solid rgba(159, 176, 220, 0.25); font: 500 11px/1 var(--f-dato); letter-spacing: 0.06em; text-transform: uppercase; color: #f2f4f8;
  opacity: 0; transition: opacity var(--m-base); white-space: nowrap; }
.fv-corte__rotulo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.fv-corte__rotulo--on { left: var(--e-3); --c: var(--encendido); }
.fv-corte__rotulo--off { right: var(--e-3); --c: var(--apagado); }
.fv-corte.is-on-visible .fv-corte__rotulo--on, .fv-corte.is-off-visible .fv-corte__rotulo--off { opacity: 1; }
.fv-corte input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fv-sim__pista { margin: 0; font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
@media (max-width: 600px) { .fv-corte__rotulo { font-size: 10px; padding: 4px 6px; } }

/* ══ Ensamble: un solo responsable (home) ═══════════════════════════════════════════════════════════════════ */
.fv-ensamble__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0 var(--e-6); }
.fv-ensamble__cab .fv-encabezado { margin-bottom: var(--e-6); }
.fv-ensamble__repetir { margin-bottom: var(--e-6); }
.fv-ensamble__iso { display: grid; place-items: center; }
.fv-ensamble__logo { width: clamp(84px, 8vw, 116px); }
.fv-ensamble__logo svg { overflow: visible; }
.fv-ensamble .fv-lineas__nota img { display: none; }
.fv-ensamble__trazos { display: none; }
@media (max-width: 899px) { .fv-ensamble__iso { margin-bottom: var(--e-6); } }
@media (min-width: 900px) {
  .fv-ensamble__trazos { display: block; position: relative; height: 52px; --lado: calc((100% - 2 * var(--canal)) / 6); }
  .fv-ensamble__trazos i { position: absolute; display: block; }
  .fv-ensamble__trazos .s-tronco { left: 50%; top: 4px; width: 2px; height: 20px; margin-left: -1px; background: var(--azul-600); transform-origin: top; }
  .fv-ensamble__trazos .s-bus { left: var(--lado); right: var(--lado); top: 24px; height: 2px; background: var(--azul-600); transform-origin: center; }
  .fv-ensamble__trazos .s-baja { top: 24px; width: 2px; height: 28px; margin-left: -1px; background: var(--c); transform-origin: top;
    left: calc(var(--lado) + var(--x) * (100% - 2 * var(--lado)) / 2); }
  .fv-ensamble__trazos .s-baja::after { content: ""; position: absolute; left: -3px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
}
/* Con JS: los trazos esperan a que las piezas encajen y luego se dibujan (tronco → reparto → bajadas). Sin JS se ven quietos. */
.fv-ensamble.is-preparado .s-tronco { transform: scaleY(0); }
.fv-ensamble.is-preparado .s-bus { transform: scaleX(0); }
.fv-ensamble.is-preparado .s-baja { transform: scaleY(0); }
.fv-ensamble.is-preparado .s-baja::after { opacity: 0; }
.fv-ensamble.is-armado .s-tronco { transform: none; transition: transform 200ms var(--ease-salida); }
.fv-ensamble.is-armado .s-bus { transform: none; transition: transform 320ms var(--ease-salida) 160ms; }
.fv-ensamble.is-armado .s-baja { transform: none; transition: transform 240ms var(--ease-salida) calc(440ms + var(--x) * 70ms); }
.fv-ensamble.is-armado .s-baja::after { opacity: 1; transition: opacity var(--m-base) calc(620ms + var(--x) * 70ms); }
.fv-ensamble.is-armado .fv-lineas article { animation: fv-ensamble-luz 1100ms var(--ease-salida) both; animation-delay: calc(600ms + var(--n, 0) * 70ms); }
.fv-ensamble .fv-lineas article:nth-child(2) { --n: 1; } .fv-ensamble .fv-lineas article:nth-child(3) { --n: 2; }
@keyframes fv-ensamble-luz { 0% { box-shadow: 0 -10px 24px -14px var(--c); } 100% { box-shadow: 0 0 0 transparent; } }

/* ══ Arme su expediente: formulario, hoja y página ══════════════════════════════════════════════════════════ */
.fv-expmod { border-top: var(--linea); }
.fv-expmod__grid { display: grid; gap: var(--e-7); align-items: start; }
.fv-expmod__grid > * { min-width: 0; }
@media (min-width: 1100px) { .fv-expmod__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--e-8); } }
.fv-exp-form { display: grid; gap: var(--e-6); }
.fv-exp-form__paso { border: 0; margin: 0; padding: 0; min-width: 0; }
.fv-exp-form legend { display: flex; align-items: center; gap: var(--e-3); padding: 0; margin-bottom: var(--e-4); font: 600 var(--t-base)/1.2 var(--f-texto); color: var(--texto); }
.fv-exp-form__n { padding: 4px 6px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-s); font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.08em; color: var(--texto-3); }
.fv-exp-form__opciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fv-exp-chip { position: relative; display: inline-flex; }
.fv-exp-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.fv-exp-chip span { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: 0 var(--e-4); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-m);
  background: var(--superficie); color: var(--texto); font: 600 var(--t-sm)/1.2 var(--f-texto); white-space: nowrap;
  transition: border-color var(--m-rapido), background var(--m-rapido), box-shadow var(--m-rapido), color var(--m-rapido); }
.fv-exp-chip .ico { width: 20px; height: 20px; color: var(--texto-3); transition: color var(--m-rapido); }
@media (hover: hover) { .fv-exp-chip:hover span { border-color: var(--texto-3); } }
.fv-exp-chip input:checked + span { border-color: var(--azul-600); background: var(--azul-50); color: var(--azul-700); box-shadow: inset 0 0 0 1px var(--azul-600); }
.fv-exp-chip input:checked + span .ico { color: var(--azul-600); }
.fv-exp-chip input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }
/* Líneas (varias): casilla con ✓ y la señal de su línea; el estado no depende solo del color. */
.fv-exp-chip--linea span::before { content: ""; display: grid; place-items: center; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--borde-fuerte); border-radius: 3px;
  font: 700 12px/1 var(--f-texto); color: #fff; transition: background var(--m-rapido), border-color var(--m-rapido); }
.fv-exp-chip--linea input:checked + span { border-color: var(--c); background: color-mix(in srgb, var(--c) 9%, var(--superficie)); color: var(--texto); box-shadow: inset 0 0 0 1px var(--c); }
.fv-exp-chip--linea input:checked + span::before { content: "✓"; background: var(--azul-600); border-color: var(--azul-600); }
.fv-exp-chip--linea input:checked + span .ico { color: var(--c); }
@media (max-width: 767px) { .fv-exp-chip span { padding: 0 var(--e-3); } }

.fv-exp-hoja { position: relative; padding: var(--e-6) clamp(20px, 3vw, var(--e-6)) var(--e-5); background: var(--superficie); border: var(--linea); border-radius: var(--radio-l); box-shadow: var(--sombra-1); }
.fv-exp-hoja::before { content: ""; position: absolute; left: clamp(20px, 3vw, var(--e-6)); top: -1px; width: 88px; height: 3px; background: var(--azul-600); border-radius: 0 0 2px 2px; }  /* pestaña de carpeta */
.fv-exp-hoja__folio { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); margin: 0 0 var(--e-2); max-width: none;
  font: 650 var(--t-xl)/1.15 var(--f-titulo); font-stretch: var(--ancho-titulo); letter-spacing: var(--track-titulo); }
.fv-exp-hoja__tag { font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: var(--texto-3); }
.fv-exp-hoja__lineas { margin: 0 0 var(--e-5); font: 400 var(--t-xs)/1.5 var(--f-dato); letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-2); }
.fv-exp-hoja__cuentas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 var(--e-5); border: var(--linea); border-radius: var(--radio-s); }
.fv-exp-hoja__cuentas > div { padding: var(--e-3) var(--e-3) var(--e-4); border-right: var(--linea); min-width: 0; }
.fv-exp-hoja__cuentas > div:last-child { border-right: 0; }
.fv-exp-hoja__cuentas dt { margin-bottom: 8px; font: 500 10.5px/1.2 var(--f-dato); letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-3); }
.fv-exp-hoja__cuentas dd { margin: 0; font: 700 var(--t-2xl)/1 var(--f-titulo); font-stretch: var(--ancho-titulo); color: var(--azul-600); font-variant-numeric: tabular-nums; }
.fv-exp-hoja__cuentas dd.is-cambio { animation: fv-cuenta var(--m-lento) var(--ease-salida); }
@keyframes fv-cuenta { from { opacity: 0.15; transform: translateY(6px); } }
@media (max-width: 479px) {
  .fv-exp-hoja__cuentas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fv-exp-hoja__cuentas > div:nth-child(2) { border-right: 0; }
  .fv-exp-hoja__cuentas > div:nth-child(-n+2) { border-bottom: var(--linea); }
}
.fv-exp-hoja__casos { list-style: none; margin: 0 0 var(--e-5); padding: 0; display: grid; gap: var(--e-2); }
.fv-exp-hoja__casos a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--e-3); align-items: center; padding: var(--e-2); border: var(--linea); border-radius: var(--radio-m);
  color: inherit; text-decoration: none; transition: border-color var(--m-rapido), background var(--m-rapido); }
@media (hover: hover) { .fv-exp-hoja__casos a:hover { border-color: var(--borde-fuerte); background: var(--fondo); } }
.fv-exp-hoja__casos img, .fv-exp-hoja__casos .s-sin-foto { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radio-s); background: var(--gris-100); }
.fv-exp-hoja__casos .s-sin-foto { display: grid; place-items: center; background: var(--azul-950); color: var(--c, var(--azul-300)); }
.fv-exp-hoja__casos .s-sin-foto .ico { width: 22px; height: 22px; }
.fv-exp-hoja__casos b { display: block; font: 600 var(--t-sm)/1.25 var(--f-texto); }
.fv-exp-hoja__casos small { display: block; margin-top: 2px; font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); }
.fv-exp-hoja__casos .is-vacio { padding: var(--e-3) var(--e-4); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-m); font-size: var(--t-sm); color: var(--texto-2); }
.fv-exp-hoja__mas { font: 400 var(--t-xs)/1.4 var(--f-dato); color: var(--texto-3); padding-left: var(--e-2); }
.fv-exp-hoja__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fv-exp-hoja__acciones .fv-btn .ico { width: 18px; height: 18px; }
@media (max-width: 767px) { .fv-exp-hoja__acciones .fv-btn { flex: 1 1 100%; } }
.fv-exp-aviso { margin: var(--e-3) 0 0; font: 500 var(--t-xs)/1.4 var(--f-dato); color: var(--ok); }
/* Página /expediente/ */
.fv-exp__mando { padding-bottom: var(--e-8); }
.fv-exp__casos { margin-top: var(--e-7); }
.fv-exp__hitos { margin-top: var(--e-8); }
.fv-exp [data-sector] > .fv-encabezado:first-child { margin-top: 0; }
.fv-exp .fv-vacio { margin-top: var(--e-5); }
.fv-exp__logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4) clamp(32px, 4vw, 64px); }
.fv-exp__logos li { display: flex; align-items: center; height: 76px; }
.fv-exp__logos img { max-width: none; height: auto; zoom: 1.35; filter: grayscale(1) contrast(1.15); opacity: 0.85; transition: filter var(--m-base), opacity var(--m-base); }
@media (hover: hover) { .fv-exp__logos li:hover img { filter: none; opacity: 1; } }
.fv-exp__logos + .fv-marquesina__pie { text-align: left; }

/* ══ Índice de capítulos (sectores, casos, infraestructura) ═════════════════════════════════════════════════ */
.fv-capitulos { position: sticky; top: var(--alto-barra); z-index: 40; border-bottom: var(--linea); background: rgba(246, 245, 242, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform var(--m-lento) var(--ease-salida), box-shadow var(--m-base); }
.fv-capitulos.is-fijo { box-shadow: 0 8px 20px -14px rgba(15, 26, 51, 0.45); }
.fv-capitulos__fila { display: flex; align-items: center; gap: var(--e-4); min-height: var(--alto-capitulos); }
.fv-capitulos ol { display: flex; gap: 2px; flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.fv-capitulos ol::-webkit-scrollbar { display: none; }
.fv-capitulos a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-3); white-space: nowrap; border-radius: var(--radio-m);
  font: 500 var(--t-sm)/1 var(--f-texto); color: var(--texto-2); text-decoration: none; transition: color var(--m-rapido), background var(--m-rapido); }
.fv-capitulos a::after { content: ""; position: absolute; left: var(--e-3); right: var(--e-3); bottom: 3px; height: 2px; border-radius: 1px; background: var(--azul-600);
  transform: scaleX(0); transition: transform var(--m-base) var(--ease-salida); }
.fv-capitulos a[aria-current] { color: var(--texto); }
.fv-capitulos a[aria-current]::after { transform: scaleX(1); }
@media (hover: hover) { .fv-capitulos a:hover { color: var(--texto); background: rgba(15, 26, 51, 0.04); } }
.fv-capitulos__cta { flex: none; }
.fv-capitulos__avance { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--azul-600); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.fv-seccion[id], [id].fv-seccion, .fv-hero ~ section[id] { scroll-margin-top: calc(var(--alto-barra) + var(--alto-capitulos) + 8px); }
@media (max-width: 767px) {
  :root { --alto-capitulos: 46px; }
  .fv-capitulos__cta { display: none; }
  .fv-capitulos .fv-contenedor { padding-inline: 0; }
  .fv-capitulos ol { padding-inline: calc(var(--margen) - var(--e-3)); scroll-padding-inline: var(--margen); }
  .fv-capitulos a { min-height: 44px; font-size: var(--t-xs); }
  /* En el teléfono el riel se esconde al bajar y vuelve al subir: deja la pantalla a la lectura. */
  .fv-capitulos.is-oculto { transform: translateY(calc(-100% - var(--alto-barra))); }
}
@media (min-width: 768px) and (max-width: 1099px) { .fv-capitulos__cta { padding: 0 var(--e-3); } }

/* ══ Visor de pares ═════════════════════════════════════════════════════════════════════════════════════════ */
.fv-visor { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); }  /* minmax(0): el riel de miniaturas no estira la columna en móvil */
.fv-visor__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); }
.fv-visor__modo { border-color: var(--borde-fuerte); }
.fv-visor__modo button { min-height: 40px; color: var(--texto-2); }
.fv-visor__modo button[aria-pressed="true"] { background: var(--azul-600); color: #fff; }
.fv-visor__nav { display: flex; align-items: center; gap: var(--e-2); }
.fv-visor__flecha { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--borde-fuerte); border-radius: 50%; background: var(--superficie); color: var(--texto); cursor: pointer;
  transition: border-color var(--m-rapido), background var(--m-rapido), transform var(--m-rapido) var(--ease-salida); }
.fv-visor__flecha .ico { width: 20px; height: 20px; transform: rotate(90deg); }
.fv-visor__flecha--sig .ico { transform: rotate(-90deg); }
@media (hover: hover) { .fv-visor__flecha:hover { border-color: var(--texto); } }
.fv-visor__flecha:active { transform: scale(0.94); }
.fv-visor__flecha:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-visor__cuenta { margin: 0; min-width: 76px; text-align: center; font: 500 var(--t-sm)/1 var(--f-dato); color: var(--texto-3); font-variant-numeric: tabular-nums; }
.fv-visor__cuenta b { font-weight: 600; color: var(--texto); }
.fv-visor__par { display: none; margin: 0; }
.fv-visor__par.is-activo { display: block; animation: fv-visor-entra var(--m-lento) var(--ease-salida); }
@keyframes fv-visor-entra { from { opacity: 0; } }
/* El marco abraza la foto: alto tope --alto y ancho = alto × proporción, sin pasar del contenedor (el par vertical no deja
   una franja vacía y el 70-20-10 no se carga de oscuro). La proporción viene de la foto (--ar en el figure). */
.fv-visor__par { --alto: clamp(300px, 64vh, 640px); width: min(100%, calc(var(--alto) * (var(--ar, 4 / 3))) + 2 * var(--e-2) + 2px); margin-inline: auto; }
.fv-comparador--visor { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3) !important; background: var(--gris-100); }
.fv-visor__par figcaption { max-width: 100%; }
/* Lado a lado: las dos fotos completas (los pares no comparten encuadre), sin recorte. */
.fv-visor[data-modo="lado"] .fv-visor__par { width: 100%; }
.fv-visor[data-modo="lado"] .fv-comparador--visor { width: 100%; height: var(--alto); aspect-ratio: auto !important; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: transparent; cursor: default; }
.fv-visor[data-modo="lado"] .fv-comparador--visor img { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; object-fit: contain; clip-path: none; background: var(--gris-100); border-radius: var(--radio-s); }
.fv-visor[data-modo="lado"] .fv-comparador__linea, .fv-visor[data-modo="lado"] .fv-comparador--visor input { display: none; }
.fv-visor[data-modo="lado"] .fv-comparador--visor .fv-etiqueta--ok { right: auto; left: calc(50% + 3px + var(--e-3)); }
@media (max-width: 767px) {
  .fv-visor__par { --alto: clamp(260px, 58vh, 480px); }
  .fv-visor[data-modo="lado"] .fv-comparador--visor { height: auto; grid-template-columns: 1fr; }
  .fv-visor[data-modo="lado"] .fv-comparador--visor img { height: auto; max-height: 52vh; }
  .fv-visor[data-modo="lado"] .fv-comparador--visor .fv-etiqueta--ok { left: var(--e-3); top: calc(50% + 3px + var(--e-3)); }
  .fv-visor__barra { justify-content: center; }
}
.fv-visor__riel { display: flex; gap: var(--e-2); margin: 0; padding: 3px 3px var(--e-3); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; overscroll-behavior-x: contain; }
.fv-visor__riel li { flex: none; scroll-snap-align: start; }
.fv-visor__riel button { position: relative; display: block; width: 100px; padding: 3px; border: 1px solid var(--borde); border-radius: var(--radio-m); background: var(--superficie); cursor: pointer;
  transition: border-color var(--m-rapido), box-shadow var(--m-rapido); }
.fv-visor__riel img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio-s); opacity: 0.62; filter: saturate(0.5); transition: opacity var(--m-base), filter var(--m-base); }
.fv-visor__riel span { position: absolute; left: 7px; bottom: 7px; padding: 3px 5px; border-radius: 2px; background: rgba(11, 20, 40, 0.82); font: 500 10.5px/1 var(--f-dato); color: #fff; }
.fv-visor__riel [aria-pressed="true"] { border-color: var(--azul-600); box-shadow: inset 0 0 0 1px var(--azul-600); }
.fv-visor__riel [aria-pressed="true"] img { opacity: 1; filter: none; }
@media (hover: hover) { .fv-visor__riel button:hover img { opacity: 1; filter: none; } }
.fv-visor__riel button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ══ Escala de tensión (Infraestructura eléctrica) ══════════════════════════════════════════════════════════ */
.fv-escala { display: grid; gap: var(--e-6); }
@media (min-width: 1100px) { .fv-escala { grid-template-columns: 300px minmax(0, 1fr); gap: var(--e-7); align-items: start; } .fv-kv { position: sticky; top: calc(var(--alto-barra) + var(--alto-capitulos) + 24px); } }
.fv-kv { padding: var(--e-5); border: 1px solid var(--azul-800); border-radius: var(--radio-l); background: var(--azul-950); color: #f2f4f8; }
.fv-kv__titulo { margin: 0 0 var(--e-4); font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: var(--track-rotulo); text-transform: uppercase; color: #95a0bd; }
.fv-kv__escala { display: grid; gap: var(--e-2); margin: 0 0 var(--e-2); padding: 0; list-style: none; }
.fv-kv button { width: 100%; cursor: pointer; color: inherit; text-align: left; border-radius: var(--radio-m); transition: border-color var(--m-base), background var(--m-base); }
.fv-kv__escala button { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "barra barra" "kv n"; gap: 8px var(--e-3); align-items: baseline; padding: var(--e-3); border: 1px solid rgba(159, 176, 220, 0.18); background: transparent; }
.fv-kv__barra { grid-area: barra; position: relative; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(159, 176, 220, 0.12); }
.fv-kv__barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: max(5%, calc(var(--h) * 100%)); border-radius: 3px; background: #4b587d; transition: background var(--m-base), box-shadow var(--m-base); }
.fv-kv b { grid-area: kv; font: 700 var(--t-xl)/1 var(--f-titulo); font-stretch: var(--ancho-titulo); font-variant-numeric: tabular-nums; }
.fv-kv b small { font: 500 var(--t-sm)/1 var(--f-texto); color: #c3cbe0; }
.fv-kv__n { grid-area: n; font: 400 var(--t-xs)/1 var(--f-dato); color: #95a0bd; }
@media (hover: hover) { .fv-kv__escala button:hover { border-color: rgba(159, 176, 220, 0.45); } }
.fv-kv__escala button[aria-pressed="true"] { border-color: var(--energia); background: rgba(232, 163, 61, 0.08); }
.fv-kv__escala button[aria-pressed="true"] .fv-kv__barra::before { background: var(--energia); box-shadow: 0 0 10px rgba(232, 163, 61, 0.6); }
.fv-kv__todos { min-height: 44px; padding: 0 var(--e-3); border: 1px dashed rgba(159, 176, 220, 0.35); background: transparent; font: 500 var(--t-xs)/1 var(--f-dato); letter-spacing: 0.06em; text-transform: uppercase; }
.fv-kv__todos[aria-pressed="true"] { border-style: solid; border-color: var(--azul-300); color: #fff; }
.fv-kv button:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-kv__nota { margin: var(--e-4) 0 0; font: 400 var(--t-xs)/1.5 var(--f-dato); color: #95a0bd; }
.fv-escala .fv-casos { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.fv-escala .fv-caso { transition: opacity var(--m-base), filter var(--m-base), border-color var(--m-base), box-shadow var(--m-base); }
.fv-escala .fv-caso.is-apagado { opacity: 0.36; filter: grayscale(0.85); }
.fv-escala .fv-caso.is-encendido { border-color: var(--energia); box-shadow: 0 0 0 1px var(--energia), var(--sombra-1); }
@media (max-width: 1099px) { .fv-kv__escala { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ══ Galería: hoja recortada + caja de luz navegable ═══════════════════════════════════════════════════════ */
.fv-galeria.is-recortada > li:nth-child(n+16) { display: none; }
.fv-galeria__mas { margin-top: var(--e-5); }
.fv-caja-luz[open] { animation: fv-caja-abre var(--m-lento) var(--ease-salida); }
.fv-caja-luz[open]::backdrop { animation: fv-fundido var(--m-lento) var(--ease-salida); }
@keyframes fv-caja-abre { from { opacity: 0; transform: translateY(12px) scale(0.985); } }
@keyframes fv-fundido { from { opacity: 0; } }
.fv-caja-luz figure { position: relative; touch-action: pan-y; }
.fv-caja-luz img.is-cambio { animation: fv-fundido var(--m-base) var(--ease-salida); }
.fv-caja-luz__nav { position: absolute; top: calc(37vh - 24px); display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(11, 20, 40, 0.78); color: #fff; cursor: pointer; transition: background var(--m-rapido); }
.fv-caja-luz__nav .ico { width: 22px; height: 22px; transform: rotate(90deg); }
.fv-caja-luz__nav--sig { right: var(--e-3); }
.fv-caja-luz__nav--sig .ico { transform: rotate(-90deg); }
.fv-caja-luz__nav--ant { left: var(--e-3); }
@media (hover: hover) { .fv-caja-luz__nav:hover { background: var(--azul-600); } }
.fv-caja-luz__nav:focus-visible, .fv-caja-luz__cerrar:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-caja-luz__cuenta { flex: none; color: #f2f4f8; font-variant-numeric: tabular-nums; }

/* ══ Hero de la home: pausa del video (WCAG 2.2.2) ═════════════════════════════════════════════════════════ */
.fv-hv__control { display: flex; align-items: center; gap: var(--e-3); }
.fv-hv__pausa { display: grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 1px solid rgba(159, 176, 220, 0.4); border-radius: 50%; background: rgba(11, 20, 40, 0.45); color: #e4e9f5; cursor: pointer; transition: border-color var(--m-rapido), background var(--m-rapido); }
@media (hover: hover) { .fv-hv__pausa:hover { border-color: #e4e9f5; background: rgba(11, 20, 40, 0.7); } }
.fv-hv__pausa:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.fv-hv__pausa i { display: block; width: 10px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.fv-hv__pausa[aria-pressed="true"] i { width: 0; height: 0; margin-left: 3px; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }

/* ══ Movimiento reducido e impresión ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fv-revela { opacity: 1; transform: none; }
  .fv-visor__par.is-activo, .fv-caja-luz[open], .fv-caja-luz[open]::backdrop, .fv-caja-luz img.is-cambio, .fv-exp-hoja__cuentas dd.is-cambio, .fv-ensamble.is-armado .fv-lineas article { animation: none; }
  .fv-capitulos.is-oculto { transform: none; }
}
@media print {
  .fv-corte, .fv-capitulos, .fv-visor__barra, .fv-visor__riel, .fv-ensamble__repetir, .fv-exp-form, .fv-exp-hoja__acciones, .fv-galeria__mas, .fv-hv__pausa { display: none !important; }
  .fv-galeria.is-recortada > li { display: block !important; }
  .fv-revela { opacity: 1 !important; transform: none !important; }
  .fv-kv { background: #fff; color: #0f1a33; border-color: #dedad6; position: static; }
}

.fv-capitulos__cta .ico { width: 18px; height: 18px; }