/* Transiciones sutiles: fade-in de página, scroll-reveal y skeleton loading de imágenes */

/* Fade-in de página al cargar.
   IMPORTANTE: solo opacity, sin transform. Un transform en <main> (o cualquier
   ancestro) crea un "containing block" nuevo para sus hijos position:fixed,
   lo que rompe modales fixed como el cotizador flotante (se posicionan respecto
   a <main> en vez del viewport). No agregar transform/filter/will-change aquí. */
.page-enter {
    animation: page-fade-in .5s ease both;
}
@keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Scroll reveal: elementos aparecen suavemente al entrar en pantalla */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s ease, transform .55s ease;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}

/* Skeleton shimmer para imágenes mientras cargan */
.tarjetaProyecto_bg,
.fondo-banner-productos-wrap,
.img-skeleton-wrap {
    background: #eef1f4;
}
.tarjetaProyecto_bg::before,
.fondo-banner-productos-wrap::before,
.img-skeleton-wrap::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #eef1f4 25%, #e2e6ea 37%, #eef1f4 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    z-index: 1;
}
.tarjetaProyecto_bg img,
.fondo-banner-productos-wrap img,
.img-skeleton-wrap img {
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity .4s ease;
}
.tarjetaProyecto_bg.img-loaded::before,
.fondo-banner-productos-wrap.img-loaded::before,
.img-skeleton-wrap.img-loaded::before {
    opacity: 0;
    transition: opacity .3s ease;
}
.tarjetaProyecto_bg.img-loaded img,
.fondo-banner-productos-wrap.img-loaded img,
.img-skeleton-wrap.img-loaded img {
    opacity: 1;
}
@keyframes skeleton-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* Barra de avance del proyecto: efecto de llenado al entrar en pantalla */
.stepper-wrapper .stepper-item.completed::after {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .9s cubic-bezier(.4,0,.2,1);
}
.stepper-wrapper.is-filled .stepper-item.completed::after {
    transform: scaleX(1);
}
.stepper-wrapper .stepper-item .step-counter {
    transform: scale(.6);
    transition: transform .4s ease;
}
.stepper-wrapper.is-filled .stepper-item .step-counter {
    transform: scale(1);
}
.stepper-wrapper.is-filled .stepper-item:nth-child(1) .step-counter { transition-delay: 0s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(1).completed::after { transition-delay: .1s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(2) .step-counter { transition-delay: .3s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(2).completed::after { transition-delay: .4s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(3) .step-counter { transition-delay: .6s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(3).completed::after { transition-delay: .7s; }
.stepper-wrapper.is-filled .stepper-item:nth-child(4) .step-counter { transition-delay: .9s; }

/* Botón Email de la ficha de ejecutivo: el texto debe seguir siendo blanco en hover
   (el fondo también es azul, así que sin esto el texto quedaba ilegible) */
.btn-azul-ejec,
.btn-azul-ejec:hover,
.btn-azul-ejec:focus {
    color: #fff !important;
}

/* Fade-in simple (sin shimmer) para imágenes dentro de layouts con overlays complejos,
   donde no conviene agregar position:relative/overflow al contenedor */
.img-fade-in {
    opacity: 0;
    transition: opacity .5s ease;
}
.img-fade-in.img-loaded {
    opacity: 1;
}

/* Respeta preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
    .page-enter,
    .reveal-on-scroll {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .tarjetaProyecto_bg::before,
    .fondo-banner-productos-wrap::before {
        animation: none !important;
        display: none !important;
    }
    .tarjetaProyecto_bg img,
    .fondo-banner-productos-wrap img,
    .img-skeleton-wrap img {
        opacity: 1 !important;
    }
    .img-skeleton-wrap::before {
        animation: none !important;
        display: none !important;
    }
    .img-fade-in {
        opacity: 1 !important;
        transition: none !important;
    }
    .stepper-wrapper .stepper-item.completed::after,
    .stepper-wrapper .stepper-item .step-counter {
        transition: none !important;
        transform: none !important;
    }
}