/* Renovatia · opción A de portada, «Estepona a pantalla completa» (26-10). Va después de renovatia-v1.css y solo cambia
   la foto: en vez de una foto suya, cuatro fotos grandes de su zona (la playa, el paseo marítimo y la Plaza de las Flores,
   de Wikimedia Commons) que se funden despacio, cada una con un acercamiento muy lento. La banda del lema y el buscador
   sigue como en la v1. Movimiento: solo opacity y transform. */

/* ---------- El pase: a sangre, con la altura que deja la banda (el lema y el buscador se ven sin bajar) ---------- */
.pase { position: relative; height: clamp(440px, calc(100svh - var(--cab) - 186px), 820px); overflow: hidden; background: #1d2b33; }
.pase__fotos { position: absolute; inset: 0; }
.pase__foto { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 2.4s ease-in-out; }
/* la primera se ve desde el primer pintado (es el LCP); solo se oculta cuando ya pasan */
.pase__foto:first-child, .pase__foto.activa, .pase__foto.saliendo { opacity: 1; }
.pase__foto.activa { z-index: 2; }
.pase__foto.saliendo { z-index: 1; }
.pasando .pase__foto:first-child:not(.activa):not(.saliendo) { opacity: 0; }
.pase__foto picture, .pase__foto img { display: block; width: 100%; height: 100%; }
.pase__foto img { object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1.001); transition: transform 9s linear; }
/* el acercamiento empieza cuando ya se ha pintado la primera (clase «vivo», la pone opcion-a.js) */
.js .pase.vivo .pase__foto.activa img, .js .pase.vivo .pase__foto.saliendo img { transform: scale(1.06); }

/* velo muy suave abajo, solo para que se vean los puntos: la foto va sin nada escrito encima */
.pase::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 18, .34) 0, rgba(8, 14, 18, 0) 100%);
}

/* Puntos: uno por foto; el de la foto que se ve se llena de cian mientras dura */
.pase__puntos { position: absolute; z-index: 4; right: var(--gutter); bottom: 14px; display: flex; gap: 8px; }
.pase__punto { display: flex; align-items: center; width: 44px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
.pase__punto i { position: relative; display: block; width: 100%; height: 2px; overflow: hidden; background: rgba(255, 255, 255, .45); }
.pase__punto i::after { content: ''; position: absolute; inset: 0; background: var(--cian); transform: scaleX(0); transform-origin: 0 50%; }
.pase__punto.activo i::after { animation: pase-llena var(--pase-ms, 6500ms) linear forwards; }
.pase.quieto .pase__punto.activo i::after { animation-play-state: paused; }
.pase__punto:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes pase-llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Crédito de las fotos (lo pide su licencia): en el pie, pequeño */
.pie__credito { margin: 14px 0 0; color: #5f6366; font-size: 12px; line-height: 1.45; }

/* ---------- Móvil: la misma proporción que la foto de la v1 (8:9) ---------- */
@media (max-width: 700px) {
  .pase { height: auto; aspect-ratio: 8 / 9; }
  .pase__puntos { right: 12px; bottom: 6px; gap: 4px; }
  .pase__punto { width: 24px; }
}

/* Sin movimiento: la primera foto, quieta; sin puntos ni pase */
@media (prefers-reduced-motion: reduce) {
  .pase__foto, .pase__foto img { transition: none; }
  .js .pase.vivo .pase__foto.activa img, .js .pase.vivo .pase__foto.saliendo img, .pase__foto img { transform: none; }
  .pase__puntos { display: none; }
}