:root{
     --cGuinda: #A50034;
     --cCafe:#CEB888;
     --cGris:#BBBCBC;
}
@font-face {
    font-family: 'Sublima-Light';
    src: url('../fonts/sublima/Sublima-Light.otf');
}

@font-face {
    font-family: 'Sublima-Bold';
    src: url('../fonts/sublima/Sublima-ExtraBold.otf');
}
*,
*::before,
*::after{
    margin:0;
    padding: 0;
    box-sizing: inherit;
}
body{
/*    margin-top: 4rem;*/
    box-sizing: border-box;
    font-family: 'Sublima-Light';
/*    min-height: 100vh;*/
}
#body-descargas{
     margin-top: 4rem;
}
.contenedor-principal{
  position: relative;
/*  bottom: 10px;*/
  margin-bottom: 5rem;
}
/*ESTO ES PRUEBA DESCOMENTAR SI NO SALE*/
/*esto se comenta dependel tipo de header !!!!!!!!!!!!!!!!!!!!!    */
/*.margen-mision {
    position: relative;
    top:4.5rem;
    width: 100%;
}
*/
#titulo_mision {
    position: relative;
    /*aqui se hacen ajustes depende tipo de header !!!!!!!!!!!!!!!!!!!!!    */
    left: 190px;
    top: -100px;
    width: 33%;
/*    z-index: 990;*/
}
.titulo1{
    color: var(--cGris);
}
.titulo2, 
.titulo3{
    color: var(--cGuinda);
}
.titulo1, 
.titulo2{
    font-size: 27px;
    margin: 0;
    padding: 0;
    font-family: 'Sublima-Light';
}
.titulo3{
/*    text-indent: 1.5em;*/
    position: relative;
    left: -25px;

    font-size: 24px;
    font-family: 'Sublima-Light';
}
.vineta{
    width: auto;
}
p{
    color: var(--cGris);
    font-size: 18px;
    text-align: justify;
    font-family: 'Sublima-Light';
}
.linea {
   height: 1px;
   border-color: var(--cCafe);
   /*margin-left: 10%;
   margin-right: 10%;*/
}
.img-box{
    display: flex;
}
.imagen_osfe{
    width: auto;
    align-content: center;
    margin:auto;
/*    display:block;*/
}
.grid-auditoria{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5rem;
    margin-left: 13rem;
    margin-right:13rem;
/*   margin-top: 80px;*/
}
.grid-mision{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 5rem;
    margin-left: 13rem;
    margin-right: 13rem;
    margin-bottom: 5px;
/*    margin-top: 2rem;*/
}
.tarjeta,
.contenedor{
    display:block;
    padding: auto;
    margin: auto;
    height:auto;
    position:relative;
}
.vineta{
/*    width: auto;*/
        height: 20px;
}

@media (max-width:1280px){
    .grid-mision {
        display: flex;
        flex-direction: column; 
        margin-right: 60px;
        margin-left: 60px;
    }
    .grid-auditoria {
        display: flex;
        flex-direction: column; 
        margin-bottom: 20px;
        margin-right: 60px;
        margin-left: 60px;
    }
    .tarjeta,
    .contenedor{
        display:block;
/*        padding: auto;*/
        height:auto;
        position:relative;
    }
    .margen-mision{
        position: relative;
        /*esto se comenta dependel tipo de header !!!!!!!!!!!!!!!!!!!!!    */
        top:3rem;
        /**/
    }
    #titulo_mision {
        position: relative;
        left: 90px;
        top: -120px;
        width: 50%;
    }
    .contenedor-principal{
       position: relative;
       top: -50PX;
    }
    #encabezado_imagen{
/*      display: none;*/       
        width:2500px;
        max-width:100%;
        height: 120px;
    }

}
/*@media (max-width:800px){
  #titulo_directorio {
    position: relative;
    left: 40px;
    top: -80px;
    width: 45%;

  }
  #encabezado_imagen{
    width:2500px;
    max-width:100%;
    height: 110px;
  }
  .contenedor{
    top:-4rem;
  }
}*/
#encabezado_imagen{
    width: 100%;
/*  width:auto;*/
   max-width:100%;
}

@media (max-width:440px){
    #titulo_mision {
        position: relative;
        left: 20px;
        top: -100px;
        width: 100%;
    }
    .contenedor-principal{
       position: relative;
/*       bottom: 10px;*/
/*      z-index: 999;*/
/*      margin-top: -8rem;*/
    }
    .titulo1, 
    .titulo2{
        font-size: 20px;
        margin: 0;
        padding: 0;
    }
    .titulo3{
    /*    text-indent: 1.5em;*/
        font-size: 20px;
    }
    .grid-mision {
        display: flex;
        flex-direction: column; 
        margin-right: 60px;
        margin-left: 60px;
    }
    .grid-auditoria {
        display: flex;
        flex-direction: column; 
        margin-bottom: 20px;
        margin-right: 60px;
        margin-left: 60px;
    }
    svg{
        width: auto;
    }
    p{
        font-size: 15px;
    }
    #encabezado_imagen{
/*      display: none;*/
        width:1500px;
/*        max-width:100%;*/
        height: 110px;
    }
}