.elementor-kit-5{--e-global-color-primary:#002F6C;--e-global-color-secondary:#6D6E71;--e-global-color-text:#000000;--e-global-color-accent:#5999FF;--e-global-color-1b86b6c:#C0C0C0;--e-global-color-8d63191:#FFFFFF;--e-global-color-3809088:#000000;--e-global-typography-primary-font-family:"Jost";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:#FFFFFF;}.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){margin-block-end: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 *//* === ANIMACIONES PERSONALIZADAS PARA AGATH B&CO. === */

/* 1. EFECTO DE BOTÓN MEJORADO */
/* Apuntamos a los botones principales de Elementor */
.elementor-button {
    /* Hacemos la transición más suave y un poco más lenta */
    transition: all 0.4s ease-in-out !important;
}

.elementor-button:hover {
    /* El botón se encogerá ligeramente al pasar el cursor, un efecto sutil */
    transform: scale(0.98);
    /* La sombra de la caja será más pronunciada, dando un efecto de "presionado" */
    box-shadow: 0 5px 15px rgba(0, 47, 108, 0.2);
}


/* 2. EFECTO ELEVADO PARA TARJETAS DE BENEFICIOS Y SOLUCIONES */
/* Usamos una clase personalizada que deberás añadir a tus contenedores */
.tarjeta-animada {
    transition: all 0.4s ease-in-out;
}

.tarjeta-animada:hover {
    /* La tarjeta se moverá 8px hacia arriba al pasar el cursor */
    transform: translateY(-8px);
    /* La sombra se hará más difusa y notoria, creando el efecto de "flotar" */
    box-shadow: 0 10px 25px rgba(109, 110, 113, 0.15);
}


/* 3. ANIMACIÓN SUTIL DE SUBRAYADO PARA ENCABEZADOS */
/* Apuntamos a los encabezados H2 (típicos de secciones) */
.elementor-widget-heading .elementor-heading-title {
    position: relative;
    display: inline-block; /* Importante para que el pseudo-elemento se ajuste al texto */
}

/* Creamos la línea de subrayado oculta por defecto */
.elementor-widget-heading .elementor-heading-title::after {
    content: '';
    position: absolute;
    bottom: -5px; /* Posición de la línea justo debajo del texto */
    left: 0;
    width: 0; /* Inicia sin ancho */
    height: 3px; /* Grosor de la línea */
    background-color: #002F6C; /* Color Azul Corporativo */
    transition: width 0.5s ease-in-out; /* La animación se enfoca en el ancho */
}

/* Al pasar el cursor sobre el contenedor del título, la línea crece */
.elementor-widget-heading:hover .elementor-heading-title::after {
    width: 100%; /* El ancho se expande al 100% del texto */
}/* End custom CSS */