/* =====================================================
   ROMBO LGP — GIRO AUTOMÁTICO + HOVER
===================================================== */

.lgp-rombo-svg svg{
    width:44px;
    height:44px;
    display:block;
    overflow:visible;
}

/* Rombo azul */
.lgp-rombo-svg #rombo{
    transform-box:fill-box;
    transform-origin:center center;

    animation:lgpDiamond 6s cubic-bezier(.4,0,.2,1) infinite;

    will-change:transform;
}

/* Hover */
.lgp-rombo-svg:hover #rombo{
    animation-play-state:paused;
    transform:rotate(12deg) scale(1.12);
}

/* Animación */
@keyframes lgpDiamond{

    /* Quieto la mayor parte del tiempo */
    0%,
    82%{
        transform:rotate(0deg) scale(1);
    }

    /* Comienza el giro */
    92%{
        transform:rotate(360deg) scale(1.08);
    }

    /* Termina suavemente */
    100%{
        transform:rotate(360deg) scale(1);
    }

}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){

    .lgp-rombo-svg #rombo{
        animation:none;
        transition:none;
    }

    .lgp-rombo-svg:hover #rombo{
        transform:none;
    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px){

    .lgp-rombo-svg svg{
        width:32px;
        height:32px;
    }

}


/* =====================================================
   ICONOS ANIMADOS DEL HOME - LGP
   Árbol / Casa / Cara
===================================================== */


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

.lgp-arbol-svg,
.lgp-casa-svg,
.lgp-cara-svg{
    display:block;

    margin:0;
    padding:0;

    font-size:0;
    line-height:0;
}

.lgp-arbol-svg svg,
.lgp-casa-svg svg,
.lgp-cara-svg svg{
    display:block;

    height:auto;

    margin:0;
    padding:0;

    overflow:visible;
}


/* =====================================================
   01. ÁRBOL
===================================================== */

.lgp-arbol-svg svg{
    width:70px;
}

.lgp-arbol-svg #hojas{
    transform-box:fill-box;
    transform-origin:center bottom;

    animation:lgpVientoNatural 5s ease-in-out infinite;
}


/* Animación del árbol */

@keyframes lgpVientoNatural{

    0%,
    25%,
    100%{
        transform:rotate(0deg);
    }

    30%{
        transform:rotate(-3deg);
    }

    38%{
        transform:rotate(2deg);
    }

    46%{
        transform:rotate(-1deg);
    }

    54%{
        transform:rotate(1deg);
    }

    60%{
        transform:rotate(0deg);
    }

}


/* =====================================================
   02. CASA
===================================================== */

.lgp-casa-svg svg{
    width:70px;
}


/* Techo */

.lgp-casa-svg #techo{
    transform-box:fill-box;
    transform-origin:center bottom;

    animation:lgpTecho 5s cubic-bezier(.22,1,.36,1) infinite;
}


/* Puerta */

.lgp-casa-svg #puerta{
    transform-box:fill-box;
    transform-origin:left center;

    animation:lgpPuerta 5s ease-in-out infinite;
}


/* Ventana */

.lgp-casa-svg #ventana{
    transform-box:fill-box;
    transform-origin:center;

    animation:lgpVentana 5s ease-in-out infinite;
}


/* Animación del techo */

@keyframes lgpTecho{

    0%,
    80%,
    100%{
        transform:
            translateY(0)
            scaleY(1)
            scaleX(1);
    }

    83%{
        transform:
            translateY(2px)
            scaleY(.88)
            scaleX(1.08);
    }

    87%{
        transform:
            translateY(-6px)
            scaleY(1.08)
            scaleX(.95);
    }

    91%{
        transform:
            translateY(1px)
            scaleY(.97)
            scaleX(1.02);
    }

    95%{
        transform:
            translateY(0)
            scaleY(1)
            scaleX(1);
    }

}


/* Animación de la puerta */

@keyframes lgpPuerta{

    0%,
    80%,
    100%{
        transform:scaleX(1);
    }

    86%{
        transform:scaleX(.42);
    }

    92%{
        transform:scaleX(1);
    }

}


/* Animación de la ventana */

@keyframes lgpVentana{

    0%,
    80%,
    100%{
        fill:#F7B033;
        filter:none;
    }

    84%{
        fill:#FFD84A;

        filter:drop-shadow(
            0 0 4px rgba(255,230,120,.6)
        );
    }

    88%{
        fill:#FFF8B0;

        filter:
            drop-shadow(0 0 8px rgba(255,245,180,.9))
            drop-shadow(0 0 16px rgba(255,220,80,.7));
    }

    92%{
        fill:#FFE36A;

        filter:drop-shadow(
            0 0 5px rgba(255,230,120,.5)
        );
    }

}


/* =====================================================
   03. CARA
===================================================== */

.lgp-cara-svg svg{
    width:90px;
}


/* Movimiento de la cara */

.lgp-cara-svg #cara{
    transform-box:fill-box;
    transform-origin:center;

    animation:lgpCara 5s ease-in-out infinite;
}


/* Ojo */

.lgp-cara-svg #ojo{
    transform-box:fill-box;
    transform-origin:center;

    animation:lgpGuino 5s ease-in-out infinite;
}


/* Corazón */

.lgp-cara-svg #corazon{
    transform-box:fill-box;
    transform-origin:center;

    animation:lgpCorazon 5s ease-in-out infinite;
}


/* Inclinación de la cara */

@keyframes lgpCara{

    0%,
    100%{
        transform:rotate(0deg);
    }

    84%{
        transform:rotate(-2deg);
    }

    90%{
        transform:rotate(0deg);
    }

}


/* Guiño */

@keyframes lgpGuino{

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

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

    88%{
        transform:scaleY(1);
    }

}


/* Latido del corazón */

@keyframes lgpCorazon{

    0%,
    78%,
    100%{
        transform:scale(1);
    }

    82%{
        transform:scale(1.18);
    }

    85%{
        transform:scale(.94);
    }

    88%{
        transform:scale(1.12);
    }

    91%{
        transform:scale(1);
    }

}


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

@media (min-width:768px) and (max-width:1024px){

    .lgp-arbol-svg svg,
    .lgp-casa-svg svg{
        width:62px;
    }

    .lgp-cara-svg svg{
        width:78px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:767px){

    .lgp-arbol-svg svg,
    .lgp-casa-svg svg{
        width:35px !important;
        height:auto !important;
    }

    .lgp-cara-svg svg{
        width:44px !important;
        height:auto !important;
    }
    
    .lgp-casa-svg.lgp-casa-interna svg{
        width:60px !important;
        height:auto !important;
    }

}


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

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

    .lgp-arbol-svg #hojas,
    .lgp-casa-svg #techo,
    .lgp-casa-svg #puerta,
    .lgp-casa-svg #ventana,
    .lgp-cara-svg #cara,
    .lgp-cara-svg #ojo,
    .lgp-cara-svg #corazon{
        animation:none !important;
    }

}