/* ――――――――― Contenido principal ――――――――― */
/* Descripción: Estilos para el contenido principal de la página */ 

.Main{
    /* background-color: #ffffff; */
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    width: 92%;
    margin: auto;

    padding: 12rem 0rem;
}


/* ――――――――― Presentación ――――――――― */
/* Descripción: Estilos para la breve presentación */ 

.Main-presentation{
    width: 40%;
}

.Main-h3{
    font-size: var(--h3-size);
    line-height: 1.8rem;
}

.Main-p{
    font-size: var(--p-size);
    margin-top: 2rem;
}
/* ――――――――― Presentación ――――――――― */






/* ――――――――― Formulario ――――――――― */
/* Descripción: Estilos para el formulario */ 

.Main-form{
    width: 60%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    gap: 2.5rem;
}

.Form-top{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
    /* grid-auto-rows:20vh;  */
    gap: 2.5rem;
}

.Form-field{
    width: 100%;
}

.Form-input{
    height: 5vh;
    border-bottom: 1px solid var(--color-secondary);
    color: #141c3a;
    padding: .625rem;
    transition: 0.3s;
}

.Form-input:focus{
    border-color: var(--color-primary);
    outline: none; 
}

.Form-input:focus::placeholder{
    font-weight: 500;
}

.Form-error{
    border-color: red;
}

.Form-textarea{
    border-bottom: 1px solid var(--color-secondary);
}

.Form-textarea:focus{
    border-color: var(--color-primary);
    outline: none; 
}

.Form-textarea:focus::placeholder{
    font-weight: 500;
} 
    
.Form-button{
    white-space: nowrap;
    background-color: var(--color-primary);
    padding: 1rem 3rem;
    border-radius: 10rem;
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
                
    color: var(--color-white); 
    font-weight: 600;
    width: fit-content;
}

.Form-button:hover{
    background-color: var(--color-secondary);
    color: var(--color-primary);
    transition: all 1s ease;
}

.Form-button:active{
    white-space: nowrap;
    background-color: aqua ;
    padding: 1rem 2rem;
    border-radius: 10rem;
    box-shadow: 6px 6px 12px lightgrey,
                -6px -6px 50px white;
                
    color: var(--color-white);
}


.Form-error{
    border-color: red;
}

/* ――――――――― Formulario ――――――――― */







/* ――――――――― Pop up / Lightbox ――――――――― */
/* Descripción: Estilos para el pop up que aparece cuando hacemos click al rellenar el formulario */ 

.Lightbox{
    position: fixed;
    top:0;
    left:0;

    width: 100%;
    height: 100%;
    backdrop-filter: blur(4rem);
    -webkit-backdrop-filter: blur(4rem);
    background-color: rgba(255,255,255,.2);

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    gap:2rem;

    opacity: 0;
    pointer-events: none;
}

.Lightbox.isActive{
    opacity: 1;
    pointer-events: auto;
    transition: all .5s ease; 
}

.Lightbox-close{
    width: 4rem;
    background-color: var(--color-white);

    padding: .4rem; 
    border-radius: 1rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: all .5s ease;

    z-index: 1;
}

.Lightbox-close:hover{
    background-color: var(--color-secondary);
    box-shadow: 0 0 1rem 0 rgba(255, 255, 255, .2);
}

.Lightbox-close:hover .Lightbox-svg{
    fill: var(--color-white);
}

.Lightbox-close:active{
    transform: scale(5);
    opacity: 0;
}

.Lightbox-wrapper{
    width: 60%;
    max-width: 75rem;
    /* height: 80vh; */
    padding: 3.125rem;
    background-color: var(--color-white);
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .2);
    border: 1px solid var(--color-white);

    z-index:1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
  
.Lightbox-h2 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-primary);
}
  
.Lightbox-p {
    font-size: var(--p-size);
    text-align: center;
    margin-bottom: 40px;
}
  
.Lightbox-svg {
    fill: var(--color-secondary);
    width: 2rem;
    height: 2rem;
}


.Lightbox-bg{
    position: absolute;
    top:0;
    left:0;

    width: 100%;
    height: 100%;
}
/* ――――――――― Pop up / Lightbox ――――――――― */

/* ――――――――― Pop up / Error ――――――――― */

.Error{
    position: fixed;
    top:0;
    left:0;

    width: 100%;
    height: 100%;
    backdrop-filter: blur(4rem);
    -webkit-backdrop-filter: blur(4rem);
    background-color: rgba(255,255,255,.2);

    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;

    gap:2rem;

    opacity: 0;
    pointer-events: none;
}

.Error.isActive{
    opacity: 1;
    pointer-events: auto;
    transition: all .5s ease; 
}

.Error-close{
    width: 4rem;
    background-color: var(--color-white);

    padding: .4rem; 
    border-radius: 1rem;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2);
    cursor: pointer;
    transition: all .5s ease;

    z-index: 1;
}

.Error-close:hover{
    background-color: var(--color-secondary);
    box-shadow: 0 0 1rem 0 rgba(255, 255, 255, .2);
}

.Error-close:hover .Error-svg{
    fill: var(--color-white);
}

.Error-close:active{
    transform: scale(5);
    opacity: 0;
}

.Error-wrapper{
    width: 60%;
    max-width: 75rem;
    /* height: 80vh; */
    padding: 3.125rem;
    background-color: var(--color-white);
    border-radius: 1rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, .2);
    border: 1px solid var(--color-white);

    z-index:1;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
  
.Error-h2 {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40px;
}
  
.Error-p {
    font-size: var(--p-size);
    text-align: center;
    margin-bottom: 40px;
}
  
.Error-svg {
    fill: #84E6BC;
    width: 2rem;
    height: 2rem;
}


.Error-bg{
    position: absolute;
    top:0;
    left:0;

    width: 100%;
    height: 100%;
}

/* ――――――――― Pop up / Error ――――――――― */


/* ――――――――― Media Querys - 600px――――――――― */
/* Descripción: Estilos para mobile */

@media  (max-width:600px) {

    .Meet-p{
        width: 100%; 
    }

    .Banner-wrapper{
        top: 20%;
    }

    video{
        border-radius: 0rem 0rem 9rem 0rem;
    }

    .Main{
        background-color: #ffffff; 
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;

        width: 100%;
       
        padding: 12rem 0rem 6rem 0rem;
    }

    .Main-presentation{
        width: 80%;
    }

    .Main-form{
        width: 80%;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 2.5rem;
        padding: 0;
    }

    .Form-wrapper{
        width: auto;
    }
}

/* ――――――――― Media Querys - 600px――――――――― */




/* ――――――――― Media Querys - 1200px――――――――― */
/* Descripción: Estilos para tablet */

@media  (max-width:1200px) {

    .Meet-p{
        width: 100%; 
    }
   
    .Main{
        background-color: #ffffff; 
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;

        width: 100%;
       
        padding: 12rem 0rem 6rem 0rem;
    }

    .Main-presentation{
        width: 80%;
    }

    .Main-form{
        width: 80%;
        display: flex;
        flex-flow: column nowrap;
        gap: 2.5rem;
        padding: 0 2rem;
    }


    .Banner-wrapper{
        top: 20%;
    }

    video{
        border-radius: 0rem 0rem 9rem 0rem;
    }

}

/* ――――――――― Media Querys - 1200px――――――――― */