/* ══════════════════════════════════════════════════════
   Fotos que rotan en «Por qué comprar acá» (assets/js/promesa-fotos.js, 18-oct-2026).
   Todo vive dentro del recuadro que la tarjeta ya tiene (.promesa__tarj-foto): las fotos van en capas superpuestas (un <picture>
   por foto), así que nada cambia de tamaño ni de lugar. Solo se animan transform y opacity.
   ══════════════════════════════════════════════════════ */
.promesa__tarj-foto.pf-caja{ position:relative; overflow:hidden }
.pf{ position:absolute; inset:0; overflow:hidden; background:var(--negro-2, #1B1B1B); contain:strict }

.pf__cap{
  position:absolute; inset:0; display:block; width:100%; height:100%; overflow:hidden;
  opacity:0; transform:scale(1); transform-origin:50% 50%; will-change:opacity, transform;
  transition:opacity 1.2s cubic-bezier(.4,0,.2,1);
}
.pf__cap img{ display:block; width:100%; height:100%; object-fit:cover; max-width:none }
/* Una foto aparece (con el mismo fundido) apenas termina de cargar; antes se ve el fondo oscuro de la tarjeta. */
.pf__cap--on.pf__cap--lista{ opacity:1 }
/* Mientras sale, se queda opaca debajo de la que entra (así no hay un hueco a mitad del fundido) y se retira sola. */
.pf__cap--sale{ opacity:1; z-index:1 }
.pf__cap--on{ z-index:2 }
.pf__cap--on, .pf__cap--sale{ animation:pf-zoom calc(var(--pf-t, 5s) + 1.4s) linear forwards }
.pf__cap--rota{ display:none }
@keyframes pf-zoom{ from{ transform:scale(1) } to{ transform:scale(1.06) } }

/* Indicador: líneas finas abajo (como el progreso del hero). La de la foto activa se va llenando. */
.pf__lineas{
  position:absolute; left:8px; right:8px; bottom:7px; z-index:3; display:flex; gap:3px; pointer-events:none;
}
.pf__lin{ position:relative; flex:1 1 0; height:2px; border-radius:2px; overflow:hidden; background:rgba(255,255,255,.38); box-shadow:0 0 0 .5px rgba(0,0,0,.18) }
.pf__lin::after{ content:''; position:absolute; inset:0; background:#fff; transform:scaleX(0); transform-origin:0 50% }
.pf__lin--on::after{ animation:pf-prog var(--pf-t, 5s) linear forwards; animation-delay:var(--pf-ret, 0s) }
@keyframes pf-prog{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* El carrusel NUNCA se detiene con el mouse ni con el foco (pedido de Daniel). Solo descansa cuando nadie lo ve: sección fuera de
   pantalla o pestaña oculta (el script marca data-pf-fuera) y retoma al instante donde iba. Pausar la animación pausa también el reloj
   que cambia de foto. Si Daniel enciende «Pausar al pasar el mouse» en el panel, el script marca data-pf-pausar y además se detiene
   la tarjeta con el mouse encima o el foco dentro (en pantallas táctiles no hay «encima»). */
@media (hover:hover){
  .promesa[data-pf-pausar] .promesa__tarj:hover .pf__cap, .promesa[data-pf-pausar] .promesa__tarj:hover .pf__lin::after{ animation-play-state:paused }
}
.promesa[data-pf-pausar] .promesa__tarj:focus-within .pf__cap, .promesa[data-pf-pausar] .promesa__tarj:focus-within .pf__lin::after,
.promesa[data-pf-fuera] .pf__cap, .promesa[data-pf-fuera] .pf__lin::after{ animation-play-state:paused }

/* «Reducir movimiento»: sigue rotando, pero solo con el fundido suave: sin zoom ni movimiento. La línea del indicador queda llena
   (no avanza) y hace de reloj con un keyframe que no se mueve (pf-prog-rm). */
@keyframes pf-prog-rm{ from{ transform:scaleX(1) } to{ transform:scaleX(1) } }
@media (prefers-reduced-motion:reduce){
  .pf__cap{ animation:none !important }
  .pf__cap--on{ transform:none }
  .pf__lin--on::after{ animation-name:pf-prog-rm }
}