/* * Grupo Toledo — Animaciones de entrada de widgets * * Requiere JS: initWidgetAnimations() observa cada widget raíz con * IntersectionObserver y añade .rw-in-view cuando entra en pantalla. * * Los estados ocultos se envuelven en prefers-reduced-motion: no-preference * para respetar la preferencia del sistema operativo. Si el usuario pide * menos movimiento, los widgets son siempre visibles. */ @media (prefers-reduced-motion: no-preference) { /* ========================================================= Variables de animación ========================================================= */ :root { --rw-anim-dur: 0.7s; --rw-anim-dur-img: 0.9s; --rw-anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --rw-anim-y: 28px; } /* ========================================================= Estado inicial oculto — fade-up base ========================================================= */ .rw-prefooter__heading, .rw-prefooter__body, .rw-prefooter__btn, .rw-banner-cta__left, .rw-banner-cta__cta, .rw-sectors-grid__card, .rw-split-promo__eyebrow, .rw-split-promo__heading, .rw-split-promo__body, .rw-split-promo__cta, .rw-featured-projects__header, .rw-featured-projects__card, .rw-featured-projects__cta, .rw-split-content__eyebrow, .rw-split-content__heading, .rw-split-content__body, .rw-split-content__cta, .rw-stats-counter__item, .rw-contact-widget__header, .rw-contact-widget__form, .rw-cif__left, .rw-cif__right, .rw-icon-grid__item, .rw-split-hero-alt__eyebrow, .rw-split-hero-alt__heading, .rw-split-hero-alt__body, .rw-split-hero-alt__cta, .rw-catalog-footer__col, /* Categoría hoja: hijos directos de cada fila */ .pcat-leaf__row > * { opacity: 0; transform: translateY(var(--rw-anim-y)); transition: opacity var(--rw-anim-dur) var(--rw-anim-ease), transform var(--rw-anim-dur) var(--rw-anim-ease); } /* ── Imágenes / bloques media: fade-up con ligero scale ── */ .rw-split-promo__media, .rw-split-content__image, .rw-split-hero-alt__images, .rw-catalog-footer__image { opacity: 0; transform: translateY(calc(var(--rw-anim-y) * 0.5)) scale(0.97); transition: opacity var(--rw-anim-dur-img) var(--rw-anim-ease), transform var(--rw-anim-dur-img) var(--rw-anim-ease); } /* ========================================================= Prefooter ========================================================= */ .rw-prefooter.rw-in-view .rw-prefooter__heading { transition-delay: 0s; } .rw-prefooter.rw-in-view .rw-prefooter__body { transition-delay: 0.12s; } .rw-prefooter.rw-in-view .rw-prefooter__btn { transition-delay: 0.24s; } /* ========================================================= BannerCta ========================================================= */ .rw-banner-cta.rw-in-view .rw-banner-cta__left { transition-delay: 0s; } .rw-banner-cta.rw-in-view .rw-banner-cta__cta { transition-delay: 0.18s; } /* ========================================================= SectorsGrid — tarjeta destacada + grid de mitades ========================================================= */ .rw-sectors-grid.rw-in-view .rw-sectors-grid__card--featured { transition-delay: 0s; } .rw-sectors-grid.rw-in-view .rw-sectors-grid__row .rw-sectors-grid__card:nth-child(1) { transition-delay: 0.14s; } .rw-sectors-grid.rw-in-view .rw-sectors-grid__row .rw-sectors-grid__card:nth-child(2) { transition-delay: 0.26s; } /* ========================================================= SplitPromo ========================================================= */ .rw-split-promo.rw-in-view .rw-split-promo__media { transition-delay: 0s; } .rw-split-promo.rw-in-view .rw-split-promo__eyebrow { transition-delay: 0.14s; } .rw-split-promo.rw-in-view .rw-split-promo__heading { transition-delay: 0.20s; } .rw-split-promo.rw-in-view .rw-split-promo__body { transition-delay: 0.28s; } .rw-split-promo.rw-in-view .rw-split-promo__cta { transition-delay: 0.38s; } /* ========================================================= FeaturedProjects ========================================================= */ .rw-featured-projects.rw-in-view .rw-featured-projects__header { transition-delay: 0s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(1) { transition-delay: 0.14s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(2) { transition-delay: 0.24s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(3) { transition-delay: 0.34s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(4) { transition-delay: 0.44s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(5) { transition-delay: 0.54s; } .rw-featured-projects.rw-in-view .rw-featured-projects__card:nth-child(6) { transition-delay: 0.60s; } .rw-featured-projects.rw-in-view .rw-featured-projects__cta { transition-delay: 0.44s; } /* ========================================================= SplitContent ========================================================= */ .rw-split-content.rw-in-view .rw-split-content__image { transition-delay: 0s; } .rw-split-content.rw-in-view .rw-split-content__eyebrow { transition-delay: 0.12s; } .rw-split-content.rw-in-view .rw-split-content__heading { transition-delay: 0.18s; } .rw-split-content.rw-in-view .rw-split-content__body { transition-delay: 0.26s; } .rw-split-content.rw-in-view .rw-split-content__cta { transition-delay: 0.36s; } /* ========================================================= StatsCounter — se coordina con el contador numérico existente ========================================================= */ .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(1) { transition-delay: 0s; } .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(2) { transition-delay: 0.10s; } .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(3) { transition-delay: 0.20s; } .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(4) { transition-delay: 0.30s; } .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(5) { transition-delay: 0.40s; } .rw-stats-counter.rw-in-view .rw-stats-counter__item:nth-child(6) { transition-delay: 0.50s; } /* ========================================================= ContactFormWidget ========================================================= */ .rw-contact-widget.rw-in-view .rw-contact-widget__header { transition-delay: 0s; } .rw-contact-widget.rw-in-view .rw-contact-widget__form { transition-delay: 0.18s; } /* ========================================================= ContactInfoFormWidget ========================================================= */ .rw-cif.rw-in-view .rw-cif__left { transition-delay: 0s; } .rw-cif.rw-in-view .rw-cif__right { transition-delay: 0.16s; } .rw-cif.rw-in-view .rw-contact-widget__form { transition-delay: 0.16s; } /* ========================================================= IconGrid — stagger de hasta 10 ítems ========================================================= */ .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(1) { transition-delay: 0s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(2) { transition-delay: 0.08s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(3) { transition-delay: 0.16s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(4) { transition-delay: 0.24s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(5) { transition-delay: 0.32s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(6) { transition-delay: 0.40s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(7) { transition-delay: 0.48s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(8) { transition-delay: 0.56s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(9) { transition-delay: 0.64s; } .rw-icon-grid.rw-in-view .rw-icon-grid__item:nth-child(10) { transition-delay: 0.72s; } /* ========================================================= SplitHeroAlternative ========================================================= */ .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__images { transition-delay: 0s; } .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__eyebrow { transition-delay: 0.14s; } .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__heading { transition-delay: 0.20s; } .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__body { transition-delay: 0.28s; } .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__cta { transition-delay: 0.38s; } /* ========================================================= CatalogFooter ========================================================= */ .rw-catalog-footer.rw-in-view .rw-catalog-footer__image { transition-delay: 0s; } .rw-catalog-footer.rw-in-view .rw-catalog-footer__col--heading { transition-delay: 0.14s; } .rw-catalog-footer.rw-in-view .rw-catalog-footer__col--body { transition-delay: 0.28s; } /* ========================================================= Categoría hoja — stagger por columna dentro de cada fila ========================================================= */ .pcat-leaf__row.rw-in-view > *:nth-child(1) { transition-delay: 0s; } .pcat-leaf__row.rw-in-view > *:nth-child(2) { transition-delay: 0.10s; } .pcat-leaf__row.rw-in-view > *:nth-child(3) { transition-delay: 0.20s; } /* ========================================================= Estado visible — todos los elementos animados Una sola regla reset aplicada cuando el padre tiene .rw-in-view ========================================================= */ .rw-prefooter.rw-in-view .rw-prefooter__heading, .rw-prefooter.rw-in-view .rw-prefooter__body, .rw-prefooter.rw-in-view .rw-prefooter__btn, .rw-banner-cta.rw-in-view .rw-banner-cta__left, .rw-banner-cta.rw-in-view .rw-banner-cta__cta, .rw-sectors-grid.rw-in-view .rw-sectors-grid__card, .rw-split-promo.rw-in-view .rw-split-promo__media, .rw-split-promo.rw-in-view .rw-split-promo__eyebrow, .rw-split-promo.rw-in-view .rw-split-promo__heading, .rw-split-promo.rw-in-view .rw-split-promo__body, .rw-split-promo.rw-in-view .rw-split-promo__cta, .rw-featured-projects.rw-in-view .rw-featured-projects__header, .rw-featured-projects.rw-in-view .rw-featured-projects__card, .rw-featured-projects.rw-in-view .rw-featured-projects__cta, .rw-split-content.rw-in-view .rw-split-content__image, .rw-split-content.rw-in-view .rw-split-content__eyebrow, .rw-split-content.rw-in-view .rw-split-content__heading, .rw-split-content.rw-in-view .rw-split-content__body, .rw-split-content.rw-in-view .rw-split-content__cta, .rw-stats-counter.rw-in-view .rw-stats-counter__item, .rw-contact-widget.rw-in-view .rw-contact-widget__header, .rw-contact-widget.rw-in-view .rw-contact-widget__form, .rw-cif.rw-in-view .rw-cif__left, .rw-cif.rw-in-view .rw-cif__right, .rw-cif.rw-in-view .rw-contact-widget__form, .rw-icon-grid.rw-in-view .rw-icon-grid__item, .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__images, .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__eyebrow, .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__heading, .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__body, .rw-split-hero-alt.rw-in-view .rw-split-hero-alt__cta, .rw-catalog-footer.rw-in-view .rw-catalog-footer__image, .rw-catalog-footer.rw-in-view .rw-catalog-footer__col, .pcat-leaf__row.rw-in-view > * { opacity: 1; transform: none; } } /* end prefers-reduced-motion: no-preference */ /* ========================================================= Editor de Elementor — desactivar animaciones de entrada El body del iframe del editor tiene .elementor-editor-active. Forzamos visibilidad para que todos los widgets sean editables sin depender del IntersectionObserver. ========================================================= */ .elementor-editor-active .rw-prefooter__heading, .elementor-editor-active .rw-prefooter__body, .elementor-editor-active .rw-prefooter__btn, .elementor-editor-active .rw-banner-cta__left, .elementor-editor-active .rw-banner-cta__cta, .elementor-editor-active .rw-sectors-grid__card, .elementor-editor-active .rw-split-promo__media, .elementor-editor-active .rw-split-promo__eyebrow, .elementor-editor-active .rw-split-promo__heading, .elementor-editor-active .rw-split-promo__body, .elementor-editor-active .rw-split-promo__cta, .elementor-editor-active .rw-featured-projects__header, .elementor-editor-active .rw-featured-projects__card, .elementor-editor-active .rw-featured-projects__cta, .elementor-editor-active .rw-split-content__image, .elementor-editor-active .rw-split-content__eyebrow, .elementor-editor-active .rw-split-content__heading, .elementor-editor-active .rw-split-content__body, .elementor-editor-active .rw-split-content__cta, .elementor-editor-active .rw-stats-counter__item, .elementor-editor-active .rw-contact-widget__header, .elementor-editor-active .rw-contact-widget__form, .elementor-editor-active .rw-cif__left, .elementor-editor-active .rw-cif__right, .elementor-editor-active .rw-icon-grid__item, .elementor-editor-active .rw-split-hero-alt__images, .elementor-editor-active .rw-split-hero-alt__eyebrow, .elementor-editor-active .rw-split-hero-alt__heading, .elementor-editor-active .rw-split-hero-alt__body, .elementor-editor-active .rw-split-hero-alt__cta, .elementor-editor-active .rw-catalog-footer__image, .elementor-editor-active .rw-catalog-footer__col { opacity: 1; transform: none; transition: none; }