/*------------------------------Header Front-page--------------------------------*/

section#header-front{
    background-image: radial-gradient(var(--azul) 10%, black 80%);
}

section#header-front canvas{
    height: 40vh!important;
}
/*-------Text and buttons Header Front-page----------*/
section#header-front div.container-text-header{
    position: absolute;
    top: 20vh;
}
/*-------Title Header Front-page----------*/
section#header-front div.container-text-header h1.title-header{
    color: var(--blanco);
    font-size: 3rem;
    font-family: "Orbitron", sans-serif;
}
@media (min-width:768px) {
    section#header-front div.container-text-header h1.title-header{
        font-size: 4rem;
    }
}
/*-------Buttons Header Front-page----------*/
section#header-front div.container-text-header a.btn-header-1,
section#header-front div.container-text-header a.btn-header-2{
    font-family: "Orbitron", sans-serif;
    width: 100%;
    font-size: 1.5rem;
    letter-spacing: 1px;
}

section#header-front div.container-text-header a.btn-header-1{
    background-color: var(--blanco);
    color: var(--azul);
    
}

section#header-front div.container-text-header a.btn-header-2{
    background-color: var(--celeste);
    color: var(--blanco);
    animation: vibrato 1s linear infinite;
    animation-delay: 2s;
    font-weight: 800;
    text-shadow: 1px 1px gray;
    box-shadow: 1px 1px 5px var(--celeste);
    & span{
        position: absolute;
        display: block;
    }
    & span:nth-child(1){
        height: 1px;
        width:100%;
        top:0px;
        left:-100%;
        background: linear-gradient(to right, transparent, cyan);
        border-top-right-radius: 1px;
        border-bottom-right-radius: 1px;
        animation: span1 2s linear infinite;
        animation-delay: 1s;
    }
    & span:nth-child(2){
        height: 70px;
        width: 1px;
        top:-70px;
        right:0px;
        background: linear-gradient(to bottom, transparent, cyan);
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
        animation: span2 2s linear infinite;
        animation-delay: 2s;
    }

    & span:nth-child(3){
        height:1px;
        width:100%;
        right:-100%;
        bottom: 0px;
        background: linear-gradient(to left, transparent, cyan);
        border-top-left-radius: 1px;
        border-bottom-left-radius: 1px;
        animation: span3 2s linear infinite;
        animation-delay: 3s;
    }

    & span:nth-child(4){
        height:70px;
        width:1px;
        bottom:-70px;
        left:0px;
        background: linear-gradient(to top, transparent, cyan);
        border-top-right-radius: 1px;
        border-top-left-radius: 1px;
        animation: span4 2s linear infinite;
        animation-delay: 4s;
    }
}
@keyframes span1{
    0%{
        left:-100%
    }
    100%{
        left:100%;
    }
}

@keyframes span2{
    0%{
        top:-70px;
    }
    100%{
        top:70px;
    }
}

@keyframes span3{
    0%{
        right:-100%;
    }
    100%{
        right: 100%;
    }
}

@keyframes span4{
    0%{
        bottom: -70px;
    }
    100%{
        bottom:70px;
    }
}
@keyframes vibrato{
    0%{
        transform: rotate(0deg);
        box-shadow: 1px 1px 10px var(--celeste);
    }
    50%{
        transform: rotate(0deg);
        box-shadow: 1px 1px 0px var(--celeste);
    }
    80%{
        transform: rotate(.3deg);
    }
    85%{
        transform: rotate(-.3deg);
    }
    90%{
        transform: rotate(.3deg);
    }
    95%{
        transform: rotate(-.3deg);
    }
    100%{
        transform: rotate(.3deg);
        box-shadow: 1px 1px 10px var(--celeste);

    }
}


section#header-front div.container-text-header a:hover{
    background-image: linear-gradient(-320deg, #fd8400 0%, #f2295b 100%);
    color: var(--blanco);
    animation-play-state: paused;
}

@media (min-width:768px) {

    section#header-front div.container-text-header a.btn-header-1,
    section#header-front div.container-text-header a.btn-header-2{
        width: auto;
        font-size: 2rem;
    }
    
}

/*------------------------------Content Front-page--------------------------------*/
p{
    color: var(--blanco);
}

p > strong{
    color: cyan;
}

p.text-enfasis{
    padding: 20px;
    color: var(--blanco);
    border: 1px solid lightslategray;
    border-radius: 15px;
    box-shadow: 5px 5px 30px rgba(11, 172, 204, 0.5);
}

/*-------SECTION-SERVICES (Content Front-page)----------*/
section#servicios h2{
    font-family: var(--font-main);
}
section#servicios h2 > strong{
    color: cyan;
}

section#servicios{
    & div.wp-block-columns{
        & div.wp-block-column{
            
            border-radius: 15px;
            background-color: #171717;
            padding: 10px;

        }
        & div.wp-block-column:hover{
            background-color: transparent;
            background-image: linear-gradient(-320deg, #fd8400 0%, #f2295b 100%);
            transition: background-image 1s;
        }
        & div.service-1{
            opacity: 0;
            animation: service-display 1s ease-in-out forwards;
        }
        & div.service-2{
            opacity: 0;
            animation: service-display 1s ease-in-out forwards;
            animation-delay: .4s;
        }
        & div.service-3{
            opacity: 0;
            animation: service-display 1s ease-in-out forwards;
            animation-delay: .8s;
        }
    }
}

@keyframes service-display {
    0% {
        opacity: 0;
        transform: translate3d(-80%, 0, 0);
    }
    
    100% {
        opacity: 1;
        transform: none;
    }
}



/*-------SECTION-EXITOS (Content Front-page)----------*/

section#exitos > div > div.wp-block-columns{
    gap: 1em;
    border: 3px dashed #212529;
    border-radius: 10px;
    padding: 20px 10px;
}

section#exitos > div > div.wp-block-columns > div.first-column h2{
    font-family: var(--font-main);
    color: var(--celeste);
}

/*-------SECTION-CONTACTO (Content Front-page)----------*/
section#contacto h2{
    margin-bottom: 50px;
    font-family: var(--font-main);
}
section#contacto div.wp-block-columns{
    gap: 1rem;
}

section#contacto div.wpforms-container{
    padding: 20px;
    background-color: var(--celeste);
    background-image: var(--grad-claro);
}
section#contacto div.wpforms-container div.wpforms-field{
    padding-bottom: 0;
}

section#contacto div.wp-block-column > div.wpcf7{
    padding: 20px;
    background-color: var(--celeste);
    background-image: var(--grad-claro);
    max-width: 700px;
} 
section#contacto div.wp-block-column > div.wpcf7 p{
    margin-bottom: 0;
    color: var(--azul);
}

section#contacto div.wp-block-column > div.wpcf7 p input{
    border-radius: 5px;
    border: 1px solid gray;
    padding: 5px;
    width: 100%;
}
section#contacto div.wp-block-column > div.wpcf7 p input.wpcf7-submit{
    max-width: 150px;
    background-image: var(--grad-claro);
    border: none;
    transition: all .25s;
}

section#contacto div.wp-block-column > div.wpcf7 p input.wpcf7-submit:hover{
    background-color: var(--azul);
    color: var(--blanco);
}

section#contacto div.wp-block-column > div.wpcf7 p input#logo-file{
    border: none;
}
section#contacto div.wp-block-column > div.wpcf7 textarea{
    padding: 15px;
    width: 100%;
}
section#contacto div.wp-block-column > div.wpcf7 p input#submit{
    background-color: var(--azul);
    background-image: var(--grad-claro);
    color: var(--blanco);
    border: none;
    padding: 5px 20px;
    transition: all .5s;
}