/***********************************************

 Autores: Alonso Heber - Alonso Lucia

***********************************************/
/* Estilos Generales */
* {
	margin: 0;
	padding: 0;
	/* box-sizing: border-box; */
}
a{
    text-decoration: none;
}

:root{
    --fondo-oscuro:#240473;
    --fondo-llamativo: blueviolet;
    --fondo-claro:#fb852d;
    --fondo-naranja-claro:#ffc9a0;
    --texto-blanco:#fff8f3;
    --texto-violeta-oscuro: #12013c;
    --texto-llamativo: red;
    --header-height: calc(80px + 2vw);
}

body{
    font-family: 'Montserrat','sans-serif';
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    background-color: var(--fondo-oscuro);
}

/* ESTILOS DE CABECERA PRINCIPAL*/

/*-------------------------------------------------------------------------------------*/
/* Navegacion - MENU  */

nav{
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    border: var(--fondo-naranja-claro) solid 2px;
    min-height: var(--header-height);

}

.logo{
    flex: 1 1 25%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 1%;
}

.logo>img{
    flex: 1 1 49%;
    max-width: 25%;
    height: auto;
}


.logo>h1{
    flex: 1 1 30%;
    color:var(--fondo-claro);
    display: flex;
    align-items: center;
    margin-left: 5%;
    font-size: 180%;
}

.menu{
    flex: 1 1 60%;
    border: var(--fondo-naranja-claro) solid 1px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}


.menu-text{
    color: var(--fondo-naranja-claro);
    text-decoration: none;
    padding: 4% 6%;
    border-radius: 5px;

}
.menu-text:hover{
    color: var(--fondo-oscuro);
    background-color: var(--fondo-naranja-claro);
    transition: 0.8s;
    border-radius: 5px;
    
}

.nav-button-cerrar{
    font-family:'Montserrat','sans-serif' ;
    background-color: var(--fondo-naranja-claro);
    border-radius: 5px;
    color: var(--fondo-oscuro);
    text-decoration: none;
    padding: 1% 2%;
}
.nav-button-cerrar:hover{
    background-color: var(--fondo-claro);
    border-radius: 5px;
    transition: 0.8s;
    box-shadow: 5px 5px 2px 1px var(--texto-violeta-oscuro);
    cursor: pointer;
}

/*-------------------------------------------------------------------------------------*/
/* CABECERA - HEADER */

header{
    flex: 1 1 100%;
    margin: 2%;
}

header>h1{
    font-size: calc(26px + 2vw);
    display: flex;
    justify-content: center;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(to left, LightYellow,yellow,Gold, orange,DarkOrange,OrangeRed, red, Crimson,DarkRed);    
    background-size:300% ;
    -webkit-background-clip: text;
    animation: titulo-colores 3s linear infinite;
    filter: drop-shadow(5px 5px 2px var(--texto-blanco));

}

@keyframes titulo-colores {
    0%{
        background-position: 0 50%;

    }
    50%{
        background-position: 100% 50%;

    }
    100%{
        background-position: 0 50%;

    }
}
header>h2{
    font-size: 150%;
    color: var(--texto-blanco);
    display: flex;
    justify-content: center;
}


/*-------------------------------------------------------------------------------------*/
/* MAIN FORMULARIO DE CONTACTO */

main{
    flex: 1 1 100%;
    margin: 2%;
    
}
.main-titulos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main-titulos>h1{
    font-size: 200%;
    color: var(--fondo-claro);
}
.main-titulos>h2{
    font-size: 120%;
    color: var(--texto-blanco);
}

main>.formulario>form{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 70%;
    margin-bottom: 7%;
}

.formulario{
    margin-top: 5%;
    display: flex;
    justify-content: space-evenly;
    
}

.formulario>form>.grupo-input{
    /* flex: 1 1 30%; */
    flex-direction: column;
    display: flex;
    align-items: center;
}

.formulario>form>.caja-comentario{
    /* flex: 1 1 50%; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 0 6% 4%;
    width: 50%;
}
.caja-comentario>label{
    color: var(--texto-blanco);
    font-size: 90%;
    margin: 1%;
}
.caja-comentario>textarea{
    color: var(--texto-blanco);
    background: transparent;
    width: 95%;
    height: 70%;
    border: var(--fondo-naranja-claro) solid 1px;    
    text-decoration: none;
    resize: none;
}


.grupo-input>input{
    color: var(--texto-blanco);
    margin-bottom: 10%;
    background: transparent;
    font-size: 120%;
    border: var(--fondo-naranja-claro) solid 1px;
    text-decoration: none;
    padding: 3%;
    
}
.btn-enviar[type=submit]{
    font-size: 120%;
    font-weight: 400;
    flex: 1 1 100%;
    margin: 4%;
    height: 13%;
    background-color: var(--fondo-claro);
    border: var(--fondo-naranja-claro) solid 2px;
    cursor: pointer;
}

.btn-enviar[type=submit]:hover{
    transition: 1s;
    color: var(--fondo-oscuro);
    background-color: var(--fondo-claro);
    box-shadow: 10px 10px 5px 3px var(--texto-violeta-oscuro);

}


/* MENSAJE DE ENVIADO --------------------------------------------------------------------*/

.contenedor-mensajes{
    display: flex;
    flex: 1 1 100%;
    justify-content: center;
}

.formulario>form>.contenedor-mensajes>.error-message {
    display: none;
    color: var(--texto-blanco);
    background: var(--fondo-llamativo);
    text-align: center;
    padding: 15px;
    font-weight: 600;
}
  
.formulario>form>.contenedor-mensajes>.sent-message {
    display: none;
    color: var(--texto-blanco);
    background: var(--fondo-llamativo);
    text-align: center;
    padding: 15px;
    font-weight: 600;
    border-radius: 50px;
}
  
.formulario>form>.contenedor-mensajes> .loading {
    display: none;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 15px;
    border-radius: 50px;
}
  
.formulario>form>.contenedor-mensajes>.loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid  var(--fondo-llamativo);
    border-top-color: var(--fondo-naranja-claro);
    animation: animate-loading-notify 1s linear infinite;
}
@keyframes animate-loading-notify {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
}

/*FOOTER -----------------------------------------------------*/
footer{
    flex: 1 1 100%;
    background-color: var(--fondo-claro);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    border-top: var(--fondo-oscuro) solid 10px;
    
}
.footer-texto{
    z-index: 3;
    flex: 1 1 70%;
}
footer>.footer-texto>h1,h2{  
    margin-top: 2%;
    color: var(--texto-violeta-oscuro);
    text-shadow: 0 0 2px var(--fondo-claro);
    font-size: 110%;
    text-align: center;
    
    
}
.footer-redes{
    flex: 1 1 25%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.footer-redes>a>i{
    font-size: 200%;
    
}


/* ------------------------------------------------------------------------------------------------------- */
/* MEDIA QUERYS */

@media (max-width: 780px) {

    .logo{
        flex: 1 1 80%;
    }
    .menu{
        flex: 1 1 90%;
    }
    .grupo-input{
        flex: 1 1 60%;
    }

    .caja-comentario{
        flex: 1 1 50%;
    }
    .busqueda{
        margin: 2%;
    }
        
    .footer-redes{
        margin: 3%;
        flex: 1 1 80%;
    }
}