/* Builders Alpha Tech — deck enhance
   Interactividad NO invasiva sobre los slides: anti-flash, micro-hover/focus y progreso.
   Se engancha SOLO al slide activo vía [data-deck-active] (mecanismo oficial de deck-stage)
   y respeta el design system (hairlines, radio 4px, azul de marca, sin sombras dramáticas).
   Todo gateado en prefers-reduced-motion → en print/reduced-motion el contenido queda estático y visible. */

/* ---------- 0. ANTI-FLASH de montaje ----------
   deck.html compila el JSX en el navegador, así que React monta unos frames tarde y el slide
   aparecía ENTERO por un instante antes de que deck-fragments.js lo apagara. Acá el contenido
   arranca oculto y sólo se destapa cuando el script marcó el slide como preparado
   ([data-frags-ready], que pone deck-fragments.js incluso si el slide no tiene fragmentos).
   Se oculta el CONTENIDO, no el root: el fondo y la grilla del slide se ven desde el frame 0. */
deck-stage section div[id^="s"] > div:not([data-frags-ready]) > * {
  opacity: 0 !important;
}
/* Sin JS / impresión / reduced-motion: nada puede quedar oculto. */
@media print {
  deck-stage section div[id^="s"] > div > * { opacity: 1 !important; }
}

/* ---------- 1. MICRO-INTERACCIONES hover / focus ---------- */
/* Las cards del deck llevan border-radius inline → las targeteamos por el atributo style.
   Base: transición suave. Hover/focus: leve lift + hairline que pasa a azul de marca. */
section[data-deck-active] [style*="border-radius"] {
  transition: transform .16s cubic-bezier(.2,.7,.2,1),
              border-color .16s ease,
              background-color .16s ease;
  will-change: transform;
}
section[data-deck-active] [style*="border-radius"]:hover,
section[data-deck-active] [style*="border-radius"]:focus-visible {
  transform: translateY(-2px);
  border-color: var(--blue-500) !important;
  outline: none;
}
/* El ícono dentro de una card acompaña el hover (leve escala, stroke de marca). */
section[data-deck-active] [style*="border-radius"]:hover svg {
  transform: scale(1.05);
  transition: transform .16s cubic-bezier(.2,.7,.2,1);
}
/* Cifras (StatFigure): al pasar el mouse, realce ámbar sutil sobre fondo oscuro. */
section[data-deck-active] [style*="border-radius"]:hover [style*="font-display"],
section[data-deck-active] [style*="border-radius"]:hover [style*="var(--font-display)"] {
  transition: color .16s ease;
}
/* Foco por teclado accesible (navegación con Tab dentro del slide). */
section[data-deck-active] a:focus-visible,
section[data-deck-active] button:focus-visible {
  outline: 2px solid var(--blue-400);
  outline-offset: 2px;
}

/* ---------- 2. PROGRESO ----------
   Hairline al pie de la pantalla: integra slide + fragmentos en una sola lectura.
   Discreto a propósito — el número de slide ya vive en el footer de cada slide. */
.deck-progress {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255,255,255,.10);
  z-index: 9999;
  pointer-events: none;
}
.deck-progress__fill {
  height: 100%;
  width: 0;
  background: var(--blue-500);
  transition: width .28s cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .deck-progress__fill { transition: none; }
}
@media print {
  .deck-progress { display: none; }
}