/* ===========================
   style.css
   =========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#e8e8e8;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding:40px;
}

.credencial{

    width:1080px;
    min-height:1450px;

    position:relative;

    overflow:hidden;

    border-radius:22px;

    background:#dceef8;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

}

/***************************
FONDO
****************************/

.background{

    position:absolute;
    inset:0;

}

.circle{

    position:absolute;
    border-radius:50%;

    background:rgba(255,255,255,.18);

}

.c1{

    width:250px;
    height:250px;

    top:40px;
    left:60px;

}

.c2{

    width:180px;
    height:180px;

    left:330px;
    top:180px;

}

.c3{

    width:620px;
    height:620px;

    right:-180px;
    top:-80px;

    background:rgba(170,212,255,.45);

}

.c4{

    width:170px;
    height:170px;

    bottom:250px;
    left:-50px;

}

.c5{

    width:150px;
    height:150px;

    right:30px;
    bottom:100px;

}

.c6{

    width:100px;
    height:100px;

    right:150px;
    bottom:15px;

}

/***************************
HEADER
****************************/

header{

    position:relative;

    height:435px;

    background:linear-gradient(
        90deg,
        #ffffff 0%,
        #ffffff 28%,
        #eaf6ff 70%,
        #d8eeff 100%
    );

    border-top:8px solid #2f7099;
    border-right:8px solid #2f7099;

    border-top-right-radius:130px;

    padding:28px 40px;

}

.logo-ipn{

    position:absolute;

    left:25px;
    top:20px;

    width:82px;

}

.titulo{

    margin-left:100px;
    margin-top:8px;

    color:#333;

}

.titulo h1{

    font-size:31px;
    font-weight:500;

}

.titulo h2{

    margin-top:6px;

    font-size:24px;
    font-weight:400;

}

.titulo h3{

    margin-top:5px;

    font-size:24px;
    font-weight:400;

}

.logo-dae{

    position:absolute;

    width:315px;

    right:35px;
    top:18px;

}

.datos-superiores{

    margin-top:95px;

    margin-left:20px;

}

.dato{

    display:flex;

    align-items:center;

    margin-bottom:32px;

    font-size:36px;

}

.dato span{

    width:300px;

    color:#2f86c5;

}

.dato strong{

    font-weight:500;

    color:#111;

}

.
}

/***************************
MAIN
****************************/

main{

    position:relative;

    padding:45px;

}

.fila{

    display:flex;

    align-items:flex-start;

    margin-bottom:48px;

}

.etiqueta{

    width:320px;

    color:#2d86c6;

    font-size:34px;

    font-weight:500;

}

.valor{

    flex:1;

    color:#111;

    font-size:34px;

    line-height:48px;

}

/***************************
RESPONSIVE
****************************/

@media(max-width:1100px){

body{

padding:0;

}

.credencial{

width:100%;

border-radius:0;

}

header{

transform:scale(.92);
transform-origin:top left;
width:1080px;

}

main{

transform:scale(.92);
transform-origin:top left;
width:1080px;

}

}