#components-reconnect-modal {
    display: none !important;
}

/* ==========================================================================
   BLINDAJE DE CSS VIEW TRANSITIONS
   Garantiza que la transición entre páginas jamás se congele ni se interrumpa.
   ========================================================================== */
::view-transition,
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) {
    animation-play-state: running !important;
}

html:active-view-transition,
html:active-view-transition *,
html.is-navigating,
html.is-navigating * {
    animation-play-state: running !important;
}

/* ==========================================================================
   OPTIMIZACIÓN DE RENDIMIENTO: PAUSA DE ANIMACIONES
   ========================================================================== */

/* 1. Pestaña en segundo plano (inactiva o minimizada) - Selectores específicos */
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .hero-home,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .dys-img-bg-1,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .slider-wrapper .itemLeft,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .slider-wrapper .itemRight,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .card::before,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .card-project::before,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .step-cycle-arrows,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .img-cycle,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .rtls-cycle-center,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .img-mask::before,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) .img-mask::after,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) [data-observe-anim],
html.tab-hidden:not(:active-view-transition):not(.is-navigating) [data-observe-anim]::before,
html.tab-hidden:not(:active-view-transition):not(.is-navigating) [data-observe-anim]::after {
    animation-play-state: paused !important;
}

/* 2. Elementos fuera del área visible del navegador (viewport) */
html:not(:active-view-transition):not(.is-navigating) .hero-home.is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) .dys-img-bg-1.is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) .slider-wrapper.is-out-of-viewport .itemLeft,
html:not(:active-view-transition):not(.is-navigating) .slider-wrapper.is-out-of-viewport .itemRight,
html:not(:active-view-transition):not(.is-navigating) .card.is-out-of-viewport::before,
html:not(:active-view-transition):not(.is-navigating) .card-project.is-out-of-viewport::before,
html:not(:active-view-transition):not(.is-navigating) .step-cycle-arrows.is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) .img-cycle.is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) .rtls-cycle-center.is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) .img-mask.is-out-of-viewport::before,
html:not(:active-view-transition):not(.is-navigating) .img-mask.is-out-of-viewport::after,
html:not(:active-view-transition):not(.is-navigating) [data-observe-anim].is-out-of-viewport,
html:not(:active-view-transition):not(.is-navigating) [data-observe-anim].is-out-of-viewport::before,
html:not(:active-view-transition):not(.is-navigating) [data-observe-anim].is-out-of-viewport::after {
    animation-play-state: paused !important;
}

/* ==========================================================================
   TRANSICIÓN CONDICIONAL DE IMAGEN HERO (SOLO CACHÉ FRÍA / RED LENTA)
   ========================================================================== */
.hero-loading {
    background-color: var(--mdn-color1, #10108E) !important;
}

.hero-fade-in {
    animation: hero-smooth-reveal 0.35s ease-out forwards;
}

@keyframes hero-smooth-reveal {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   SCROLL SNAP: ALINEACIÓN AL CENTRO (MAYOR ALCANCE EN PROXIMITY)
   ========================================================================== */
@media (min-width: 801px) {
    .home-news-wrapper {
        scroll-snap-align: center;
    }
}