/* ════════════════════════════════════════════════════════════════════════════
   MOVIMIENTO COMPARTIDO DE LAS MUESTRAS

   Las tres webs de muestra usan esta hoja. No trae ni un color: todo sale de
   las variables que define cada página (--fluor, --acento, --filete…), así que
   el mismo movimiento se viste de rosa flúor en la peluquería y de óxido en la
   barbería sin tocar una línea.

   Tres piezas:
     · el revelado al entrar en pantalla (sutil, y escalonado en las listas)
     · el carrusel de fotos, que se pasa solo
     · la banda deslizante continua

   Reglas que se respetan, y por qué:
     · solo se anima `transform` y `opacity` — lo demás obliga al navegador a
       recalcular la página en cada fotograma y se nota en un móvil viejo;
     · curva de salida rápida (ease-out fuerte): la entrada tiene que sentirse
       inmediata, no perezosa;
     · nada empieza en `scale(0)` ni invisible del todo sin remedio: si el
       JavaScript falla, el contenido se ve igual (ver `.js-listo`);
     · con «reducir movimiento» activado, todo queda quieto. No es un detalle:
       hay gente a la que el movimiento le marea.
   ════════════════════════════════════════════════════════════════════════════ */

:root{
  --anima-curva:cubic-bezier(.23,1,.32,1);
  --anima-dur:620ms;
}

/* ── 1 · REVELADO AL HACER SCROLL ──────────────────────────────────────────
   El contenido solo se esconde si el JavaScript ha arrancado (html.js-listo).
   Sin esa condición, un fallo de red dejaría la página en blanco. */
.js-listo [data-revelar]{
  opacity:0;
  transform:translateY(14px);
}
.js-listo [data-revelar].dentro{
  opacity:1;
  transform:none;
  transition:opacity var(--anima-dur) var(--anima-curva),
             transform var(--anima-dur) var(--anima-curva);
  transition-delay:var(--retraso,0ms);
}
/* Las fotos entran con un punto de escala: un plano que crece un pelo se lee
   como «esto está vivo», y a 1.04 no se nota el truco. */
.js-listo [data-revelar="foto"] img{
  transform:scale(1.045);
  transition:transform 1100ms var(--anima-curva);
}
.js-listo [data-revelar="foto"].dentro img{transform:none}

/* ── 2 · CARRUSEL DE FOTOS (se pasa solo) ──────────────────────────────────
   Fundido cruzado, no desplazamiento: con dos o tres fotos del mismo sitio, el
   deslizamiento lateral parece un error de maquetación; el fundido parece una
   revista pasando de página. */
.carrusel{position:relative;overflow:hidden;background:var(--filete)}
.carrusel .marco{position:relative;width:100%;aspect-ratio:16/9}
.carrusel figure{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--anima-curva)}
.carrusel figure.activa{opacity:1}
.carrusel img{width:100%;height:100%;object-fit:cover;display:block}
.carrusel figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 24px 18px;
  background:linear-gradient(180deg,transparent,rgba(12,8,7,.72));color:#fff;
  font-size:.86rem;letter-spacing:.02em}
.carrusel .puntos{position:absolute;right:18px;bottom:18px;display:flex;gap:8px;z-index:2}
.carrusel .punto{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.8);
  background:transparent;padding:0;cursor:pointer;
  transition:background 200ms var(--anima-curva),transform 200ms var(--anima-curva)}
.carrusel .punto[aria-current="true"]{background:#fff}
.carrusel .punto:active{transform:scale(.9)}
.carrusel .punto:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── 3 · BANDA DESLIZANTE ──────────────────────────────────────────────────
   La tira de palabras que cruza la página sin parar. El contenido se duplica
   por JavaScript para que el bucle no tenga costura. Se para al pasar el ratón
   por encima: si alguien quiere leerla, que pueda. */
.banda-mov{overflow:hidden;border-top:1px solid var(--filete);border-bottom:1px solid var(--filete);
  padding:14px 0;white-space:nowrap;user-select:none}
.banda-mov .tira{display:inline-flex;gap:38px;align-items:center;padding-right:38px}
/* El bucle solo corre si el JavaScript ha duplicado el contenido. Si no, el
   recorrido del -50 % dejaria medio hueco en blanco: mejor quieta. */
.js-listo .banda-mov .tira{animation:banda-correr 34s linear infinite;will-change:transform}
.banda-mov:hover .tira{animation-play-state:paused}
.banda-mov span{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.banda-mov i{font-style:normal;opacity:.75}
@keyframes banda-correr{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ── 4 · QUIETO SI ASÍ LO PIDE EL VISITANTE ────────────────────────────────*/
@media (prefers-reduced-motion:reduce){
  .js-listo [data-revelar]{opacity:1;transform:none}
  .js-listo [data-revelar="foto"] img{transform:none}
  .carrusel figure{transition:none}
  .js-listo .banda-mov .tira,.banda-mov .tira{animation:none}
}