/* =====================================================
   TRES CARITAS ANIMADAS - LGP
   Familia / Footer desktop / Footer mobile
===================================================== */


/* =====================================================
   COMPONENTE BASE
===================================================== */

.lgp-caritas-svg{
    display:inline-block !important;
    flex-grow:0 !important;
    flex-shrink:0 !important;
}

.lgp-caritas-svg > .elementor-widget-container{
    width:100% !important;
    max-width:100% !important;
}

.lgp-caritas-svg svg{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    overflow:visible !important;
}


/* =====================================================
   TAMAÑOS DESKTOP
===================================================== */

/* Sección Familias */
.lgp-caritas-svg.lgp-caritas-familia{
    width:210px !important;
    min-width:210px !important;
    max-width:210px !important;
    flex-basis:210px !important;
}

/* Footer */
.lgp-caritas-svg.lgp-caritas-footer{
    width:290px !important;
    min-width:290px !important;
    max-width:290px !important;
    flex-basis:290px !important;
}


/* =====================================================
   PREPARACIÓN DE LAS PARTES DEL SVG
===================================================== */

.lgp-caritas-svg #personaje_verde,
.lgp-caritas-svg #personaje_naranja,
.lgp-caritas-svg #personaje_azul,
.lgp-caritas-svg #ojos_verde,
.lgp-caritas-svg #ojos_naranja,
.lgp-caritas-svg #ojos_azul,
.lgp-caritas-svg #pupilas_verde,
.lgp-caritas-svg #boca_verde{
    transform-box:fill-box;
    transform-origin:center;
}

/* =====================================================
   CARITAS – SECCIÓN FAMILIAS
   Corrige espacio inferior interno del SVG
===================================================== */

.lgp-caritas-svg.lgp-caritas-familia svg{
    transform:translateY(5px);
}

/* =====================================================
   PERSONAJE NARANJA - GUIÑO
===================================================== */

.lgp-caritas-svg #ojos_naranja{
    animation:lgpGuinoNaranja 6s ease-in-out infinite;
}

@keyframes lgpGuinoNaranja{
    0%,18%,100%{
        transform:scaleY(1);
    }

    20%{
        transform:scaleY(.08);
    }

    23%{
        transform:scaleY(1);
    }
}


/* =====================================================
   PERSONAJE AZUL - ESTIRAMIENTO
===================================================== */

.lgp-caritas-svg #personaje_azul{
    transform-origin:center bottom;
    animation:lgpEstirarAzul 6s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes lgpEstirarAzul{
    0%,58%,100%{
        transform:scaleY(1) translateY(0);
    }

    64%{
        transform:scaleY(1.12) translateY(-5px);
    }

    69%{
        transform:scaleY(.97) translateY(1px);
    }

    74%{
        transform:scaleY(1.03);
    }

    78%{
        transform:scaleY(1);
    }
}


/* =====================================================
   PERSONAJE VERDE - PUPILAS
===================================================== */

.lgp-caritas-svg #pupilas_verde{
    transform-origin:center;
    animation:lgpPupilasVerde 6s ease-in-out infinite;
}

@keyframes lgpPupilasVerde{
    0%,78%,100%{
        transform:translateX(0) scaleY(1);
    }

    82%{
        transform:translateX(-3px) scaleY(1);
    }

    85%{
        transform:translateX(-3px) scaleY(.05);
    }

    89%{
        transform:translateX(-3px) scaleY(1);
    }

    94%{
        transform:translateX(0) scaleY(1);
    }
}


/* =====================================================
   PERSONAJE VERDE - GUIÑO
===================================================== */

.lgp-caritas-svg #ojos_verde{
    transform-origin:center;
    animation:lgpGuinoVerde 6s ease-in-out infinite;
}

@keyframes lgpGuinoVerde{
    0%,82%,100%{
        transform:scaleY(1);
    }

    85%{
        transform:scaleY(.05);
    }

    89%{
        transform:scaleY(1);
    }
}


/* =====================================================
   PERSONAJE VERDE - BOCA
===================================================== */

.lgp-caritas-svg #boca_verde{
    transform-origin:center;
    animation:lgpBocaVerde 6s ease-in-out infinite;
}

@keyframes lgpBocaVerde{
    0%,80%,100%{
        transform:scaleX(1) scaleY(1);
    }

    84%{
        transform:scaleX(.35) scaleY(1.25);
    }

    90%{
        transform:scaleX(1) scaleY(1);
    }
}

/* =====================================================
   DESKTOP PEQUEÑO
   1025px A 1200px
===================================================== */

@media (min-width:1025px) and (max-width:1200px){

    /* Sección Familias */
    .lgp-caritas-svg.lgp-caritas-familia{
        width:175px !important;
        min-width:175px !important;
        max-width:175px !important;
        flex-basis:175px !important;
    }

    /* Footer */
    .lgp-caritas-svg.lgp-caritas-footer{
        width:230px !important;
        min-width:230px !important;
        max-width:230px !important;
        flex-basis:230px !important;
    }

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:1024px){

    .lgp-caritas-svg.lgp-caritas-familia{
        width:185px !important;
        min-width:185px !important;
        max-width:185px !important;
        flex-basis:185px !important;
    }

    .lgp-caritas-svg.lgp-caritas-footer{
        width:250px !important;
        min-width:250px !important;
        max-width:250px !important;
        flex-basis:250px !important;
    }
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width:767px){

    /* Sección Familias */
    .lgp-caritas-svg.lgp-caritas-familia{
        width:130px !important;
        min-width:130px !important;
        max-width:130px !important;
        flex-basis:130px !important;
    }

    /* Footer */
    .lgp-caritas-svg.lgp-caritas-footer{
        width:120px !important;
        min-width:120px !important;
        max-width:120px !important;
        flex-basis:120px !important;
			
        overflow:visible !important;
    }

    .lgp-caritas-svg.lgp-caritas-footer > .elementor-widget-container{
        width:120px !important;
        max-width:120px !important;
        overflow:visible !important;
    }

    .lgp-caritas-svg.lgp-caritas-footer svg{
    width:120px !important;
    min-width:120px !important;
    max-width:120px !important;

    margin-left:-8px !important;

    position:static !important;
    overflow:visible !important;
}

/* =====================================================
   ACCESIBILIDAD
===================================================== */

@media (prefers-reduced-motion:reduce){

    .lgp-caritas-svg #ojos_naranja,
    .lgp-caritas-svg #personaje_azul,
    .lgp-caritas-svg #pupilas_verde,
    .lgp-caritas-svg #ojos_verde,
    .lgp-caritas-svg #boca_verde{
        animation:none !important;
    }
}