/* =============================================================================
   RM 2026-10-22 - Fondo fotografico del Inicio (solo index.html)
   3 fotos en crossfade con zoom lento + capa oscura. Sin JavaScript.
   ============================================================================= */
.hero.hero--slides {
    isolation: isolate;
    /* Texto siempre claro sobre la foto, en tema claro u oscuro */
    --hero-text: #ffffff;
    --hero-subtitle: rgba(255, 255, 255, 0.86);
    --hero-text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.hero-slides {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: #050505;
    pointer-events: none;
}

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.02);
    animation: rmHeroFade 24s linear infinite, rmHeroZoom 24s linear infinite;
    will-change: opacity, transform;
}

.hero-slide--1 { background-image: url('../assets/images/hero/hero-central-lg.webp?v=20261030-fachada2'); animation-delay: -1.5s, -1.5s; }
.hero-slide--2 { background-image: url('../assets/images/hero/hero-fachada-lg.webp?v=20261030-fachada2'); background-position: center 40%; animation-delay: 6.5s, 6.5s; }
.hero-slide--3 { background-image: url('../assets/images/hero/hero-moviles-lg.webp?v=20261030-fachada2'); animation-delay: 14.5s, 14.5s; }

@media (max-width: 900px) {
    .hero-slide--1 { background-image: url('../assets/images/hero/hero-central-sm.webp?v=20261030-fachada2'); }
    .hero-slide--2 { background-image: url('../assets/images/hero/hero-fachada-sm.webp?v=20261030-fachada2'); }
    .hero-slide--3 { background-image: url('../assets/images/hero/hero-moviles-sm.webp?v=20261030-fachada2'); }
}

/* Capa de oscurecimiento: el texto se lee siempre */
.hero-slides::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.80) 100%),
        radial-gradient(ellipse at center, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Cada foto: aparece (1.5s), queda visible, se va (1.5s). Ciclo 24s, 8s por foto. */
@keyframes rmHeroFade {
    0%      { opacity: 0; }
    6.25%   { opacity: 1; }
    33.33%  { opacity: 1; }
    39.58%  { opacity: 0; }
    100%    { opacity: 0; }
}

@keyframes rmHeroZoom {
    0%      { transform: scale(1.02); }
    39.58%  { transform: scale(1.10); }
    100%    { transform: scale(1.10); }
}

/* Accesibilidad: con "reducir movimiento" (comun en Windows con animaciones
   desactivadas) las fotos siguen alternando con fundido, pero SIN zoom. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation-name: rmHeroFade; animation-duration: 24s; transform: none; }
}