@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: 'Poppins', sans-serif;
    display: grid;
    grid-template-areas:
        "header header header"
        "nav section aside"
        "footer footer footer";
    grid-template-rows: 185px 1fr 50px;
    grid-template-columns: 12% 1fr 15%;
    grid-gap: 10px;
    min-height: 100vh;

    background-image: url(https://sfo3.digitaloceanspaces.com/e-fuente/e-fuentedevida.net/rrhh_fdv/elrecurso/white.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}



/* -------------------------header------------- */

header {
    background: #003D7C;
    grid-area: header;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.grupotext {
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
}

.text1,
.titulo,
.text2 {
    margin: 10px 0;
}

.fon2 {
    width: 150px;
}

.logomain2{
    width: 50px;
    display: none;
}


/* ----------------------nav izquierdo--------------- */
nav {
    background: #C9BFBF;
    grid-area: nav;
}


/* ------------------------contenido----------------- */

section {
    /* background: #fcfcfc; */
    grid-area: section;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
}

.form {
    width: 60%;
    min-height: auto;
    padding: 25px;

    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.cust_imp{
  display: flex;
  flex-direction: column;
    margin: 25px 8px;
}

.cust_imp_span{
  width: 100%;
  text-align: center;
  font-size: 16px;
}


.instrucciones{
    width: 50%;
}

.uno{
    margin: 30px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letrota{
    font-weight: 600;
    font-size: 100px;
    color: #003D7C;
    margin-right: 15px;

}

.entero{
    margin-bottom: 15px;
}


.lab{
    font-weight: 500;
}

.in-cust{
    /* width: 80%; */
    font-size: 18px;
}


/* --------------------------parte derecha---------------- */
aside {
    background: #C9C9C9;
    grid-area: aside;
}


/* --------------footer--------------- */

footer {
    background: #002A54;
    grid-area: footer;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colorfot {
    color: #8cc6ff;
    margin-left: 5px;
}

header,
nav,
section,
aside,
footer {
    padding: 5px;
}

/* --- miniatura ---- */

.miniatura{
  margin-top: 20px;
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  transition: ease 0.3s;
}

#minimg{
  margin-top: 20px;
  max-width: 200px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.5);
  transition: ease 0.3s;
}

.prueba{
  display: none;
}



@media screen and (max-width:1250px) {

    body {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav section aside"
            "footer footer footer";
        grid-template-columns: 4% 1fr 6%;
    }

}


@media screen and (max-width:900px) {

    body {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav section aside"
            "footer footer footer";
        grid-template-columns: 8% 1fr 10%;
    }

    section{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .instrucciones{
        width: 100%;
    }

    .form{
        width: 100%;
    }

    .titulo{
        font-size: 30px;
    }

    .text2{
        font-size: 12px;
    }

    .fon2{
        width: 150px;
    }

}


@media screen and (max-width:550px) {

    body {
        display: grid;
        grid-template-areas:
            "header header header"
            "nav section aside"
            "footer footer footer";
        grid-template-columns: 2% 1fr 2%;
    }

    .fon2{
        display: none;
    }

    header{
        display: flex;
        justify-content: center;
    }

    .logomain2{
        display: flex;
    }

    .swi{
        font-size: 15px;
        font-weight: 300;
    }

    .instrucciones{
        font-weight: 300;
    }

    footer{
        font-weight: 300;
        font-size: 12px;
    }
}