.elementor-kit-18{--e-global-color-primary:#4A707A;--e-global-color-secondary:#E4D2B2;--e-global-color-text:#3B4447;--e-global-color-accent:#4A707A;--e-global-color-889fa36:#F8F9FA;--e-global-color-e93a0a1:#F1F1F1;--e-global-color-e0b37d0:#1F1F1F;--e-global-color-3932992:#8B4513;--e-global-color-8b9b51a:#7EB2BF;--e-global-color-017a0e2:#FFFFFF00;--e-global-typography-primary-font-family:"Raleway";--e-global-typography-primary-font-size:48px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.2em;--e-global-typography-primary-letter-spacing:-1px;--e-global-typography-secondary-font-family:"Raleway";--e-global-typography-secondary-font-size:24px;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-secondary-letter-spacing:-0.5px;--e-global-typography-text-font-family:"Raleway";--e-global-typography-text-font-size:18px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0.3px;--e-global-typography-accent-font-family:"Raleway";--e-global-typography-accent-font-size:14px;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:1px;background-color:#EEEEEE;color:var( --e-global-color-text );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-kit-18 button,.elementor-kit-18 input[type="button"],.elementor-kit-18 input[type="submit"],.elementor-kit-18 .elementor-button{background-color:var( --e-global-color-primary );font-family:"Raleway", Sans-serif;font-size:14px;font-weight:600;text-transform:uppercase;line-height:1em;letter-spacing:1px;color:var( --e-global-color-889fa36 );border-radius:50px 50px 50px 50px;padding:16px 40px 16px 40px;}.elementor-kit-18 e-page-transition{background-color:#FFBC7D;}.elementor-kit-18 a{color:var( --e-global-color-primary );}.elementor-kit-18 h1{font-family:"Raleway", Sans-serif;font-size:72px;font-weight:700;line-height:1.2em;letter-spacing:-1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1250px;}.e-con{--container-max-width:1250px;}.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);}@media(max-width:1245px){.elementor-kit-18{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}}@media(max-width:1024px){.elementor-kit-18{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-18{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );letter-spacing:var( --e-global-typography-primary-letter-spacing );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. Configuración del Botón (Solo dentro de la clase .animado) */
.animado .elementor-button {
    /* --- Estructura --- */
    position: relative; 
    overflow: hidden;
    z-index: 1;
    
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px; 
    
    /* --- Tipografía --- */
    font-family: sans-serif; 
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 0.875rem 2rem;
    
    /* --- Bordes --- */
    border: none !important;
    border-radius: 50px; 
    
    /* --- COLOR BASE (#4a707a) --- */
    background: #4a707a !important;
    color: #ffffff !important;
    
    /* --- Sombra acorde al color --- */
    box-shadow: rgba(74, 112, 122, 0.4) 0px 4px 20px;
    
    transition: all 0.3s ease !important;
}

/* 2. El Círculo Invisible (Pseudo-elemento) */
.animado .elementor-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1; 
    
    /* Tamaño gigante para cubrir todo al expandirse */
    width: 300%; 
    padding-bottom: 300%; 
    border-radius: 50%;
    
    /* --- COLOR DEL HOVER (Más claro: #6d909a) --- */
    background-color: #6d909a; 
    
    /* Estado inicial: oculto en el centro */
    transform: translate(-50%, -50%) scale(0); 
    transition: transform 0.5s ease; 
}

/* 3. Asegurar que el texto esté siempre encima */
.animado .elementor-button span, 
.animado .elementor-button i, 
.animado .elementor-button svg {
    position: relative;
    z-index: 2;
}

/* 4. Activación del Hover */
.animado .elementor-button:hover,
.animado .elementor-button:focus {
    transform: translateY(-2px); 
    color: #ffffff !important;
    box-shadow: rgba(74, 112, 122, 0.6) 0px 6px 30px;
}

/* Expansión del círculo al hacer hover */
.animado .elementor-button:hover::before,
.animado .elementor-button:focus::before {
    transform: translate(-50%, -50%) scale(1);
}

/* 1. Configuración Inicial del Botón (Transparente con borde) */
.animado-light .elementor-button {
    /* --- Estructura --- */
    position: relative;
    overflow: hidden;
    z-index: 1;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* --- Tipografía --- */
    font-family: sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none !important;
    padding: 0.875rem 2rem;

    /* --- ESTILOS CLAVE (Sin fondo, con borde) --- */
    background: transparent !important; /* Fondo transparente */
    color: #ffffff !important;          /* Texto blanco */
    border: 2px solid #ffffff !important; /* Borde blanco */
    border-radius: 50px;
    
    box-shadow: none !important; /* Sin sombra inicialmente */
    transition: all 0.3s ease !important;
}

/* 2. El Círculo Invisible (El relleno BLANCO) */
.animado-light .elementor-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;

    width: 300%;
    padding-bottom: 300%;
    border-radius: 50%;

    /* --- COLOR DEL RELLENO AL HOVER (Blanco) --- */
    background-color: #ffffff; 

    /* Estado inicial: oculto en el centro */
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.5s ease;
}

/* 3. Asegurar que el texto esté encima */
.animado-light .elementor-button span,
.animado-light .elementor-button i,
.animado-light .elementor-button svg {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease; /* Transición suave para el color del texto */
}

/* 4. Activación del Hover */
.animado-light .elementor-button:hover,
.animado-light .elementor-button:focus {
    /* El texto debe oscurecerse para verse sobre el fondo blanco */
    color: #4a707a !important; 
    
    /* Opcional: quitar el borde o cambiarlo de color al hacer hover */
    border-color: #ffffff !important; 
    
    transform: translateY(-2px);
    /* Sombra opcional al hacer hover para darle profundidad */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

/* Expansión del círculo blanco */
.animado-light .elementor-button:hover::before,
.animado-light .elementor-button:focus::before {
    transform: translate(-50%, -50%) scale(1);
}






/* 4. Efecto Hover (Opcional: se eleva un poco) */
.c-borde-verde:hover {
    transform: translateY(-5px);
    /* La sombra se hace más intensa al pasar el mouse */
    box-shadow: 0 15px 40px -10px rgba(74, 112, 122, 0.6);
}/* End custom CSS */