/* Animación logo y títulos home */
#cab-home h1 .animation-container:first-child>div,
#inner-cab h1 .animation-container:first-child>div
{
    transform: translateY(120%);
    animation: showUp 1s ease-in-out;
    animation-delay: 2.2s;
    animation-fill-mode: forwards;
}

#cab-home h1 .animation-container:last-child>div,
#inner-cab h1 .animation-container:last-child>div
{
    transform: translateY(120%);
    animation: showUp 1s ease-in-out;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
}

#inner-cab h1 .animation-container:first-child>div{
    animation-delay: 0.5s;
}

#inner-cab h1 .animation-container:last-child>div {
    animation-delay: 0.8s;
}

#cab-home .subtit .animation-container>div {
    transform: translateY(120%);
    animation: showUp 1s ease-in-out;
    animation-delay: 2.8s;
    animation-fill-mode: forwards;
}
  
#cab-home .cab-container .cab-content {
    top: 32%;
    animation: cabTop 1s ease-in-out;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
}

#cab-home svg.logo-animado {
    width: 450px;
    height: 450px;
    animation: sizeDown 1s ease-in-out;
    animation-delay: 1.8s;
    animation-fill-mode: forwards;
}

#cab-home svg.logo-animado .path-b {
    opacity: 0;
    animation: showOpacity 0.4s ease-in-out;
    animation-fill-mode: forwards;
}

#cab-home svg.logo-animado .path-y {
    opacity: 0;
    animation: showOpacity 0.4s ease-in-out;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}

#cab-home svg.logo-animado .path-l {
    opacity: 0;
    animation: showOpacity 0.4s ease-in-out;
    animation-delay: 0.8s;
    animation-fill-mode: forwards;
}

#cab-home svg.logo-animado .path-sup {
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000;
    animation: linePath 0.5s ease-in-out forwards;
    animation-delay: 1.3s;
}

#cab-home svg.logo-animado .path-inf {
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000;
    animation: linePath 0.5s ease-in-out forwards;
    animation-delay: 1.6s;
}

/* Titulares */
h2 .animation-container,
h3 .animation-container,
.animation-container    {
    overflow: hidden;
}

h2 .animation-container:first-child>div,
h2 .animation-container:last-child>div,
h3 .animation-container:first-child>div,
h3 .animation-container:last-child>div
.animation-container .elementor-heading-title
{
    transform: translateY(120%);
}


h2 .animation-container.animate:first-child>div,
h3 .animation-container.animate:first-child>div,
.animation-container.animate .elementor-heading-title
{
    transform: translateY(120%);
    animation: showUp 1s ease-in-out;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}

h2 .animation-container.animate:last-child>div,
h3 .animation-container.animate:last-child>div
{
    transform: translateY(120%);
    animation: showUp 1s ease-in-out;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}

/* animaciones de los "p" */

.animation-container:first-child .elementor-widget-container,
.animation-container:last-child .elementor-widget-container {
    transform: translateY(150%);
}

.animation-container.animate:first-child .elementor-widget-container {
    transform: translateY(150%);
    animation: showP 1s ease-in-out;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}

.animation-container.animate:last-child .elementor-widget-container {
    transform: translateY(150%);
    animation: showP 1s ease-in-out;
    animation-delay: 0.4s;
    animation-fill-mode: forwards;
}

/*vídeos reproduciendo*/
#videos-home .video.animate img,
/* #videos-home .video.animate .video-txt, se comenta para que se vea el texto*/
#videos-home .video.animate::after {
  animation: hide 1s ease;
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

/* separadores */
.elementor-widget-divider>.elementor-widget-container {
    width: fit-content;
    overflow: hidden;
}

.elementor-widget-divider.center>.elementor-widget-container {
    margin: auto;
}

.elementor-divider-separator {
    transform: translateX(-100%);
}

.elementor-divider-separator.animate {
    transform: translateX(-100%);
    animation: sepShow 1.2s ease;
    transition: var(--all-transition);
    animation-fill-mode: forwards;
}

/*keyframes animaciones*/
@keyframes showUp {
    0% {
        transform: translateY(120%);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes showP {
    0% {
        transform: translateY(150%);
    }

    100% {
        transform: translateY(0) rotate(0);
    }
}

@keyframes showOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes sizeDown {
    0% {
        width: 450px;
        height: 450px;
    }

    100% {
        width: 180px;
        height: 180px;
    }
}

@keyframes cabTop {
    0% {
        top: 32%;
    }

    100% {
        top: 25%;
    }
}

@keyframes linePath {
    0% {
        stroke-dasharray: 1000;
        stroke-dashoffset: -1000;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes sepShow {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}


/* RESPONSIVE ANIMACIONES - Cambios tamaños */
@media screen and (min-width: 2000px) {
    .contenedor-dentadura {
        margin-bottom: -50px;
    }
}

@media screen and (max-width: 767px) {
    #cab-home svg.logo-animado {
        width: 220px;
        height: 220px;
        animation: sizeMv 1s ease-in-out;
        animation-delay: 1.8s;
        animation-fill-mode: forwards;
    }

    @keyframes sizeMv {
        0% {
            width: 220px;
            height: 220px;
        }
    
        100% {
            width: 120px;
            height: 120px;
        }
    }

    #cab-home .cab-container .cab-content {
        top: 27%;
        animation: topMv 1s ease-in-out;
        animation-delay: 1.8s;
        animation-fill-mode: forwards;
    }

    @keyframes topMv {
        0% {
            top: 27%;
        }
    
        100% {
            top: 20%;
        }
    }
}