.elementor-kit-5{--e-global-color-primary:#272757;--e-global-color-secondary:#333572;--e-global-color-text:#000000;--e-global-color-accent:#5C5CA6;--e-global-color-1ab704b:#FFFFFF;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-size:50px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-size:40px;--e-global-typography-secondary-font-weight:800;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Times New Roman";--e-global-typography-accent-font-size:35px;--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */html,
body {
    width: 100% !important;
    overflow-x: hidden !important;
}

/* Esta es la clase que llamará a la Times New Roman de forma limpia */
.font-times-italic {
    font-family: 'Times New Roman', Times, Baskerville, Georgia, serif !important;
    font-style: italic !important;
    
    /* Evita que el H1 o H2 de Elementor le herede negritas pesadas que deforman la cursiva */
    font-weight: normal !important; 
    
    /* Hereda el tamaño (px, rem, vw) que ya configuraste en Elementor para ese título */
    font-size: inherit !important; 
}


/* Clase base - elementos para la transición */
.scroll-change-theme {
    transition: background-color 1.5s ease;
}

.scroll-change-theme .elementor-widget,
.scroll-change-theme .e-con {
    transition: color 1.5s ease, border-color 1.5s ease;
}

/* Estado Activo: Cuando el contenedor llega al 50% del viewport */
.scroll-change-theme.is-active {
    background-color: var(--bg-active) !important;
}

/* Cambia el texto dentro del contenedor activo */
.scroll-change-theme.is-active .elementor-widget,
.scroll-change-theme.is-active h1,
.scroll-change-theme.is-active h2,
.scroll-change-theme.is-active h3,
.scroll-change-theme.is-active h4,
.scroll-change-theme.is-active
    p,
.scroll-change-theme.is-active a {
    color: var(--text-active) !important;
}

/* Cambia los bordes de los contenedores hijos */
.scroll-change-theme.is-active .e-con {
    border-color: var(--border-active) !important;
}



/* ==========================================================================
   TEMA 2: ABOUT US (Iconos Originales + Colores Smooth)
   ========================================================================== */

/* CAMBIO DE FONDO SUAVE: Se difumina gradualmente del 20% al 45% */
@keyframes changeThemeAbout {
    0%, 20% {
        background-color: #ffffff;
    }
    35%, 100% {
        background-color: var(--bg-about-active, #333572);
    }
}

/* CAMBIO DE TEXTO SUAVE: Se difumina gradualmente del 20% al 45% */
@keyframes changeTextAbout {
    0%, 20% {
        color: #000000;
    }
    35%, 100% {
        color: var(--text-about-active, #ffffff);
    }
}

/* Aplicar la animación al contenedor principal */
.theme-about-us {
    animation: changeThemeAbout linear both;
    animation-timeline: scroll(root); /* Detecta el scroll general de la página */
}

/* Aplicar el cambio a los títulos y textos */
.theme-about-us .elementor-heading-title,
.theme-about-us p,
.theme-about-us span,
.theme-about-us b,
.theme-about-us h2 {
    animation: changeTextAbout linear both;
    animation-timeline: scroll(root);
}

/* ==========================================================================
   TU LÓGICA ORIGINAL DE ICONOS (Mantenida al 100% sin cambios)
   ========================================================================== */
@keyframes hideLightIcon { 0%, 32% { opacity: 1; display: block; } 33%, 100% { opacity: 0; display: none; } }
@keyframes showDarkIcon { 0%, 33% { opacity: 0; display: none; } 34%, 100% { opacity: 1; display: block; } }

.theme-about-us .icon-light-bg { animation: hideLightIcon linear both; animation-timeline: scroll(root); }
.theme-about-us .icon-dark-bg { animation: showDarkIcon linear both; animation-timeline: scroll(root); }/* End custom CSS */