:root{
    /*paleta de colores*/
    --primario:#D31F29;
    --primarioTraslucido:  rgba(211, 31, 41, .8);
    --transparente: rgba(211, 31, 41, 0);
    --primarioDark: #9B0712;
    --secundario:#00DA55;
    --blanco:#FFF;
    --negro:#1F1E1E;
    --gris:#757575;
    --grisClaro:#F7F7F7;
    --grisClaro2:#E1E1E1;
    --naranja: #f08200;
    --verde:  #57A519;
    --verdeSustentable: #6BB749;
    --verdeSustentableTraslucido : rgba(107, 183, 73, .4);
    --morado: #945ca5;
    --moradoLerma: #6D2E7B;
    --azul: #0971ce;
    --moradoDivs : #190e40; /*se usa en oferta educativa o academica*/

    --fuentePrincipal: 'Roboto', sans-serif;
    --fuenteSecundaria: 'Lato', sans-serif;
}

@font-face {
  font-family: 'FREE3OF9';
  src: url('../Fuentes/FREE3OF9.TTF');
  font-weight: normal;
  font-style: normal;
}

html {
    font-size: 62.5%; /** 1REM = 10pX **/
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body{
    /*10pt equivale a 13px*/
    font-family: var(--fuentePrincipal);
    font-size: 1.4rem;
    line-height: 1.5;
}
@media(min-width: 768px){
    body{
        font-size: 1.6rem;
    }
}

/*Inicio Utilidades*/
a{
    color: var(--primario);
    text-decoration: none;
}

a:focus, a:hover{
    color: var(--primario);
    text-decoration: none;
}

img{
    max-width: 100%;
    display: block; /*elimina el espacio inferior entre ella y el elemento que tenga debajo*/
}

label{
    font-weight: bold;
}

small{
    font-size: 1.2rem;
}

h1{
    font-size: 4.8rem; /*36pt*/
}
h2{
    font-size: 3.2rem; /*24pt*/
}
h3{
    font-size: 2.4rem; /*18pt*/
}
h4{
    font-size: 2rem; /*16.5pt*/
}

/*formularios*/

.form-select, .form-control{
    font-size: unset;
}

/*Subtitulos formulario agenda*/
.numero-subtitulo-agenda{
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold;
    border: .2rem solid var(--primario);
    padding: 1.5rem;
}

.subtitulo-agenda{
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold;
}

.hr-agenda{
    border: .1rem solid var(--primario); 
}

.acuerdo-agenda{
    border: .2rem solid var(--primario);
    border-radius: 1rem;
    padding: .5rem;
}

.invalid-feedback{
    display: block;
}


.liga-header{
    color: var(--negro);
}

.liga-morada{
    color: var(--negro);
    transition: color .3s ease-out;
}

.liga-morada:hover{
    color: var(--morado);
}

.liga-sustentabilidad{
    color: var(--negro);
    transition: color .3s ease-out;
}
.liga-sustentabilidad:hover{
    color: var(--verdeSustentable);
}

.titulo-rojo{
    color: var(--primario);
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
@media(min-width: 1024px){
    .titulo-rojo{
        font-size: 3.2rem;
       # margin-bottom: 0;
    }
}

.titulo-morado{
    color: var(--morado);
    font-weight: bold;
}

.titulo-verde{
    color: var(--verdeSustentable);
    font-weight: bold;
}

.titulo-morado-light{
    font-weight: unset;
}

.subtitulo-rojo{
    color: var(--primario);
    text-align: center;
    font-size: 2.4rem;
}

.texto-rojo{
    color: var(--primario);
}
.texto-verde{
    color: var(--verdeSustentable);
}

.crece-1{
    transition: transform;
    transition-duration: .3s;
}
.crece-1:hover{
    transform: scale(1.1);
}

.crece-2{
    transition: transform;
    transition-duration: .3s;
}
.crece-2:hover{
    transform: scale(1.2);
}

/*Scroll top*/
.scrollTop{
    border-radius: 50% !important;
    border: .1rem solid var(--primario);
    width: 3rem !important;
    height: 3rem !important;
    background-color: var(--blanco) !important;
    opacity: .6;
    padding-top: .5rem !important;
    font-size: 1.8rem !important;
    color: var(--primario) !important;   
    transition: background-color .3s ease-out; 
}

.scrollTop:hover{
    background-color: var(--primario) !important;
    color: var(--blanco) !important;
}

/*Preguntale a la IA*/
@keyframes myAnimation {
    0%  {transform: translateY(0px);}
    5%  {transform: translateY(-10px);}
    10% {transform: translateX(0px)}
    15% {transform: rotate(-8deg);}
    20% {transform: rotate(8deg) ;}
    25% {transform: rotate(-8deg) ;}
    30% {transform: rotate(8deg) ;}
    35% {transform: rotate(0deg);}
    100%{transform: translateY(0px);}
}

.icono-ia {
    display: none;
}

.icono-ia-movil {
    display: block;
    width: 10%;
    animation-name: myAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;    
}

@media(min-width: 768px){
    .icono-ia{
        display: block;
        width: 6%;
        position: fixed;
        bottom: 5rem;
        right: 5rem;
        z-index: 9999999;
        text-align: center;
        animation-name: myAnimation;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in;    
    }
    
    .icono-ia-movil{
    	display:none;
    }
}

@media(min-width: 1024px){
    .icono-ia{
        width: 4.5%;
    }
}

.btn-rojo, .btn-rojo:visited{
    display: block;
    background-color: var(--primario);
    color: var(--blanco);
    padding: 1rem;
    transition: background-color, .3s ease-out;
    text-align: center;
    border-radius: .8rem;
    border: .2rem solid var(--primario);
}

.btn-rojo-lg{
    width: 100%;
}

.btn-rojo:hover{
    color: var(--negro);
    background-color: var(--blanco);
}

.btn-outline-secondary{
    font-size: unset;
}
/*
.btn-outline-danger{
    color: var(--negro);
    border-radius: .8rem;
    border: .2rem solid var(--primario);
    font-size: 1.6rem;
    transition: background-color .3s ease-out;
    padding: .6rem 1.6rem;
}

.btn-outline-danger-lg{
    width: 100%;
}

@media(min-width: 768px){
    .btn-outline-danger{
        /*align-self: baseline;*/
  /*  }
}*/

.btn-outline-danger:hover{
    background-color: var(--primario);
    border-color: var(--primario);
    color: var(--blanco);
}

.btn-outline-danger:not(:disabled):not(.disabled).active, .show > .btn-outline-danger.dropdown-toggle {

    background-color: var(--primario);
    border: .2rem solid var(--primario);
}

/*paginas internas*/
.page-header{
    color: var(--primario);
    font-size: 2.6rem;
    border-bottom: .1rem solid var(--primario);
}
@media(min-width: 768px){
    .page-header{
        font-size: 3.2rem;
    }
}

.contenido-int{
    padding: 2rem 0;
    width: 95%;
    margin: 0 auto;
}

@media(min-width: 1024px){
    .contenido-int{
        padding: 2rem;
        width: 100%;
        max-width: 128rem;
    }
}

/*nav pills (antes eran tabs)*/
.nav-pills{
    justify-content: center;
    gap: .5rem;
}

/*pills rojos*/
.nav-pills .nav-link{
    color: var(--blanco);
    background-color: var(--primario);
    padding: 1rem 1.2rem;
    border-radius: 1rem;
}
.nav-pills .nav-link.active{
    color: var(--negro);
    background-color: var(--blanco);
    box-shadow: -2.83px 2.83px 8px -1px black;
}
.nav-pills .nav-link:hover{
    color: var(--negro);
    background-color: var(--blanco);
    box-shadow: -2.83px 2.83px 8px -1px black;
}

/*pills morados*/
.nav-pills .nav-link-morado{
    background-color: var(--morado);
}
.nav-pills .nav-link-morado.active{
    color: var(--morado);
}
.nav-pills .nav-link-morado:hover{
    color: var(--morado);
}

/*pills verdes - sustentabilidad*/
.nav-pills .nav-link-verde{
    background-color: var(--verdeSustentable);
}
.nav-pills .nav-link-verde.active{
    color: var(--verdeSustentable);
}
.nav-pills .nav-link-verde:hover{
    color: var(--verdeSustentable);
}

/*contennedor despues de los pills*/
.tab-content{
    margin-top: 2rem;
    border: .1rem solid var(--grisClaro2);
    border-radius: 2rem;
    padding: 2rem 2rem;
    /*margin-bottom: 2rem;*/
}

.tab-content-noborder{
    border: unset;
}

/*Paginador (gridView)*/
.pagination{
    justify-content: center;
}

.page-link{
    color: var(--primario);
    font-size: 1.6rem;
}

.page-link:hover{
    font-weight: bold;
    color: var(--primario);
}

.page-item.active .page-link {
    background-color: var(--primario);
    border-color: var(--primario);
}

/*tabla header*/
.fondoMorado{
    background-color: var(--morado)!important;
    color: var(--blanco);
    border-radius: .8rem;
}
.fondoMorado:focus{
    color: var(--blanco);
}

.fondoRojo{
    background-color: var(--primario);
    border-radius: .8rem!important;
}
.fondoRojo th, .fondoRojo td{
    color: var(--blanco)!important;
    font-weight: bold;

}



/*Fin utilidades*/

/*main > .container, main > .container-fluid
{
    padding: 7rem 1.5rem 2rem;
}
*/
main > .container {
    padding-top: 0rem;
    background-color: white;
}

.container{
    /*max-width: 128rem;*/
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

/*inicio header*/
.barraRoja{
    background-color: var(--primario);
    padding: 1rem 2rem;
    display: none;
}

.barraRoja-morada{
    background-color: var(--morado);
}
.barraRoja-verde{
    background-color: var(--verdeSustentable);
}

@media (min-width: 768px){
    .barraRoja{
        display: flex;
        justify-content: center;
    }
}

.redes{
    padding: .5rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.redes-movil{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-evenly;
    padding: 4rem 1rem 1rem 1rem;
}
@media(min-width: 768px){
    .redes-movil{
        display: none;
    }
}
.redes__icon{
    width: 2.5rem;
}

.barraRoja__tools{
    width: 100%;
    max-width: 128rem;
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}
@media(min-width: 1500px){
    .barraRoja__tools{
        width: 70%;
    }
}

.tool__link-boton{
    width: 100%;
    display: flex;
    justify-content: start;
}

.tool__link-btn{
    text-align: center;
    font-size: 1.1rem;
    padding: .4rem;
    color: var(--negro);
    background-color: var(--blanco);
    border-radius: .8rem;
    border: .1rem solid var(--blanco);
    transition: color .3s ease-out;
}
@media(min-width: 1024px){
    .tool__link-btn{
        font-size: 1.4rem;
        padding: .8rem;
    }
}

.tool__link-btn:hover{
    color: var(--blanco);
    background-color: var(--primario);
}

.tool__link-accesos{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.tool__link{
    color: var(--blanco);
    transition: transform;
    transition-duration: .3s;
    text-align: center;
    font-size: 1.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;

}
@media(min-width: 1024px){
    .tool__link{
        font-size: 1.6rem;
    }
}

.tool__link:hover, .tool__link:focus{
    color: var(--blanco);
    transform: scale(.9);
}

.tool__link-img{
    display: inline-block;
    width: 10%;
}

.tool__link-redes{
    
    display: flex;
    gap: 1rem;
}
.tool__link-redes a img{
    margin: 0 auto;
    width: 70%;
    transition: transform;
    transition-duration: .3s;
}

.tool__link-redes a img:hover{
    transform: scale(.9);
}

.tool__link-movil{
    color: var(--blanco);
    font-size: 1.2rem;
}

.tool__link-movil:hover, .tool__link-movil:focus{
    color: var(--blanco);
}

.img-usa{
    display: none;
    width: 15%;
}
@media(min-width: 768px){
    .img-usa{
        width: 5%;
    }
}

.img-mex{
    width: 20%;
    border:.1rem solid var(--blanco);
}

/*fin header*/

/*menu*/
.bg-dark-2{
    width: 100%;
    height: auto;
    background-color: var(--blanco) !important;
}

@media(min-width: 768px){
    .bg-dark-2{
        background-color: var(--blanco) !important;
        color: var(--negro);
        height: 6rem;
    }
}

.fixed-top-box-shadow{
    box-shadow: 0 .5rem .5rem 0 rgba(0, 0, 0, 0.75);
}

.menu{    
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1rem 1rem -8px rgba(0, 0, 0, 0.75);
}
@media (min-width: 768px){
    .menu{
        padding: 1rem;
        display: grid;
        grid-template-columns: 1fr 2fr;
        justify-content: space-between;
        align-items: center;    
    }
}

.menu__logo{
    margin: 0 auto;
    width: 50%;
}
@media(min-width: 768px){
    .menu__logo{
        width: 50%;       
    }
}

/*movil*/
.navbar-collapse{
    flex-basis: 100%;
    background-color: var(--primario);
    padding: 1rem;
    font-size: 1.2rem;
}
@media(min-width: 768px){
    .navbar-collapse{
        font-size: 1.4rem;
        background-color: unset;
        padding: unset;
    }
}

@media(min-width: 1024px){
    .navbar-collapse{
        font-size: 1.6rem;
    }
}

.menu__extra-movil{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

@media(min-width: 768px){
    .menu__extra-movil{
        display: none;
    }
}

.menu__extra-movil-links{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.menu__extra-movil-icons{
    display: flex;
    gap: .5rem;
    align-items: center;
    justify-content: center;
}

.nav-link{
    color: var(--blanco);
    font-weight: bold;
}
.nav-link:hover, .nav-link:focus{
    color: var(--blanco);
}
@media(min-width: 768px){
    .nav-link{
        color: var(--negro);
        font-weight: unset;
    }
    .nav-link:hover, .nav-link:focus{
        color: unset;
    }   
}

@media(min-width: 1024px){
    .navbar-expand-md .navbar-nav {
        gap: 3rem;
    }    
}

/*navbar movil*/
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-item{
    font-size: 1.2rem;
    color:  var(--blanco);
    background-color: var(--primarioTraslucido);
    padding: .8rem 1.2rem;
}
@media(min-width: 768px){
    .dropdown-item{
        font-size: 1.4rem;
    }
}

@media(min-width: 1024px){
    .dropdown-item{
        font-size: 1.6rem;
    }
}

.nav-item > .dropdown-menu{
    background-color: transparent;
    padding: unset;
    min-width: 18rem;
}

.dropdown-toggle::after{
    all: unset;
}

.dropdown-link a{
    color: var(--blanco);
}

.dropdown-item.active, .dropdown-item:hover{
    background-color: var(--blanco);
    color: var(--primario);
}

.dropdown-item:active {
  color: var(--primario);
  text-decoration: none;
  background-color: var(--blanco);
  border-color: var(--blanco);
}

/*fin menu*/

/*footer*/
.footer {
    background-color: var(--gris);
    color: var(--blanco);
    height: auto;
    padding: 1rem 0;
}

.footer__subtitulo{
    font-weight: bold;

}

.footer__subtitulo::after{
    content: '';
    display: block;
    width: 70%;
    height: .2rem;
    margin-top: .2rem;
    background-image: linear-gradient(to right, var(--primario), var(--primario) 100%);
    margin: 0 auto;
}

@media(min-width: 768px){
    .footer__subtitulo::after{
        margin: unset;
        height: .3rem;
    }   
}

.footer__columnas{
    padding: 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    text-align: center;
}
@media(min-width: 768px){
    .footer__columnas{
        text-align: unset;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: 0 auto;
    }
}
@media(min-width: 1024px){
    .footer__columnas{
        padding: 2rem 10rem 0 10rem;
        width: 80%;
        justify-content: space-around;
    }    
}

@media(min-width: 1440px){
    .footer__columnas{
        padding: 2rem 20rem 0 20rem;
    }    
}
[class^="footer__links"]{
    display: flex;
    flex-direction: column;
    line-height: 2;
}


.footer__links-unidades{
    display: flex;
    align-items: center;
    flex-direction: column;
    
}

@media(min-width: 768px){
    .footer__links-unidades{
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-evenly;
    }
}

.footer__links-unidades-lista{
    line-height: 2.7;
    width: 80%;
}

[class^="footer__links"] a{
    color: var(--blanco);
    font-size: 1.4rem;
}

.footer__links a:hover{
    color: var(--primario);
}

.uni__rec:hover{
    color: var(--negro);
}

.uni__azc:hover{
    color: var(--primario);
}

.uni__cua:hover{
    color: var(--naranja);
}

.uni__izt:hover{
    color: var(--verde);
}

.uni__ler:hover{
    color: var(--moradoLerma);
}

.uni__xoc:hover{
    color: var(--azul);
}

@media(min-width:  1024px){
    .footer__ubicacion{
        display: unset;
        margin: 0 auto;
    }    
}

.footer__ubicacion p{
    margin-bottom: 0;
    line-height: 1.2;
    padding-top: 1.2rem;
    font-size: 1.4rem;
}

.footer__ubicacion p a{
    color: var(--blanco);
}

.footer__ubicacion p a:hover{
    color: var(--primario);
}

.footer__imgs{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-around;
}


.footer__logos{
    width: 70%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;    
    gap: 2rem;
}


@media(min-width: 1024px){
    .footer__logos{
        width: 35%;
        gap: 1rem;
    }
}

.footer__logos-item{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.footer__logo-buzon img{
    width: 60%;
    margin: 0 auto;
}

.footer__logo-radio img{
    width: 110%;
    margin: 0 auto;
}

.footer__redes{
    padding: 2rem 0;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
}
@media(min-width: 768px){
    .footer__redes{
        flex-direction: column;
        gap: 1.5rem;
        align-items: flex-start;    
    }
}

.redes__icon{
    width: 2.5rem;
}

.footer__copy{  
    text-align: center;
    font-size: .8rem;
    padding-top: 1rem;
}

@media(min-width: 768px){
    .footer__copy{
        font-size: 1.2rem;
    }
}

.footer > .container {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

/*fin footer*/

/*yii default con boosttrap*/
.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: .3rem;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid .5rem transparent;
    margin: .4rem .4rem .2rem .4rem;
    background: transparent;
}

a.asc:after {
    border-bottom: solid .7rem #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid .7rem #212529;
    border-bottom-width: 0;
}

.grid-view th,
.grid-view td:last-child {
    white-space: nowrap;
}

.grid-view .filters input,
.grid-view .filters select {
    min-width: 5rem;
}

.hint-block {
    display: block;
    margin-top: .5rem;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: .3rem solid #eed3d7;
    padding: 1rem 2rem;
    margin: 0 0 1.5rem 0;
}

/* align the logout "link" (button in form) of the navbar */
.navbar form > button.logout {
    padding-top: .7rem;
    color: rgba(255, 255, 255, 0.5);
}

@media(max-width:767px) {
    .navbar form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 1rem 0;
    }
}

.navbar form > button.logout:focus,
.navbar form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.navbar form > button.logout:focus {
    outline: none;
}

/* style breadcrumb widget as in previous bootstrap versions */
.breadcrumb {
    background-color: var(--bs-gray-200);
    border-radius: .25rem;
    padding: .75rem 1rem;
}

.breadcrumb-item > a{

    text-decoration: none;
}
/*Fin deault yii2 con bootstrap*/


/*Pagina inicio*/

/*slider principal*/
.slider{
    width: 100%;
    height: auto;
}

.carousel-inner{
    height: auto;
}
@media(min-width: 1024px){
    .carousel-inner{
        height: 50rem;
    }
}

.barra-iconos{
    background-color: var(--grisClaro);
    padding: 2rem 5rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
}
@media (min-width: 1024px){
    .barra-iconos{
        display: flex;
        justify-content: space-around;
    }
}

.icon-container-corto{
    width: 13rem;
    margin: 0 auto;
}

.barra-iconos .icon-container-largo:nth-child(4){
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.barra-iconos .icon-container-corto:nth-child(3){
    grid-row: 2 / 3;
    grid-column: 2 / 3;
}

@media (min-width: 1024px){
    .icon-container-corto{
        width: 15rem;
    }
}
.icon-container-largo{
    width: 15rem;
    margin: 0 auto;
}
@media (min-width: 1024px){
    .icon-container-largo{
        width: 25rem;
    }
}

/*Noticias*/
.swiper-button-prev, .swiper-button-next{
    color: var(--grisClaro2);
}
.contenedor-noticias{
    
    background-image: url('../imgs/site/fondoNoticias.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 33rem;
    overflow: hidden;
}
@media(min-width: 768px){
    .contenedor-noticias{
        padding: 2rem;
        height: 35rem;
    }
}
@media(min-width: 1024px){
    .contenedor-noticias{
        padding: 2rem 20rem;
        height: auto;
    }
}

.noticias-titulo{
    margin-bottom: 1rem;
    color: var(--blanco);
    font-size: 2rem;
    padding-top: 1.2rem;
    font-weight: bold;
}
@media(min-width: 768px){
    .noticias-titulo{
        padding-top: .5rem;
        font-size: 2rem;
    }
}
@media(min-width:1024px){
    .noticias-titulo{
        padding-top: 0;
        font-size: 3.2rem;
    }
}

/*Eventos*/
.contenedor-eventos{
     margin-top: 2rem;
    background-color: var(--grisClaro);
    padding-bottom: 2rem;
}
@media(min-width: 1024px){
    .contenedor-eventos{
         margin-top: 10rem;
        padding: 5rem 20rem;
    }
}

.sombra{
    box-shadow: 1rem 1rem .5rem 0 rgba(0,0,0,0.75);
}


/*Conoce UAMA*/
.contenedor-conoce{
    padding-top: 1.2rem;
}
@media(min-width: 1024px){
    .contenedor-conoce{
       padding: 2rem 20rem;
        height: 37rem;
    }
}


.conoce-texto{
    width: 95%;
    margin: 0 auto;
}
@media(min-width: 1024px){
    .conoce-texto{
        width: 75%;
    }
}

.conoce-btns{
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    padding-bottom: 2rem;
}
@media(min-width: 1024px){
    .conoce-btns{
        padding-top: 2rem;
        width: 60%;
        flex-direction: row;
        gap: 5rem;
        padding-bottom: 0;
    }
}

/*divisiones inicio*/
.divisiones__inicio{
    padding-top: 2rem;
}

/*Consejo academico y uam sostenible*/
.banner-inicio{
    background-image: linear-gradient(var(--primarioTraslucido) 0%, var(--primarioTraslucido) 100%), url('../imgs/site/ca.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media(min-width: 1024px){
    .banner-inicio{
        height: 35rem;    
    }
}

.banner-inicio-sustentable{
    background-image: linear-gradient(var(--verdeSustentableTraslucido) 0%, var(--verdeSustentableTraslucido) 100%), url('../imgs/sustentabilidad/banner-inicio.jpg');
}

.banner-inicio-img{
    width: 50%;
}
@media(min-width: 768px){
    .banner-inicio-img{
        width: 30%;
    }
}
@media(min-width: 1024px){
    .banner-inicio-img{
        width: 20%;       
    }
}

/*Banner del micrositio con banner*/
.banner__contenedor{
    width: 90%;
    display: flex;
    gap: 2rem;
    position: relative;
}
@media(min-width: 1024px){
    .banner__contenedor{
        width: 60%;
    }
}

.banner{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/site/ca.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-paroestudiantil{
    background-image: linear-gradient(90deg, var(--morado) 0%, var(--transparente) 100%), url('../imgs/perspectiva/diversidad.jpg');
}

.banner-guiapantera{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/guiapantera/guiapantera.jpg');
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.banner-diversidad{
    background-image: linear-gradient(90deg, var(--morado) 0%, var(--transparente) 100%), url('../imgs/perspectiva/diversidad.jpg');
}
.banner-sustentabilidad{
    background-image: linear-gradient(90deg, var(--verdeSustentable) 0%, var(--transparente) 100%), url('../imgs/sustentabilidad/uamsostenible.jpg');
}
.banner-alumnado{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/alumnado/banner.jpg');
    background-position: center 65%;
}
.banner-academicos{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/personalAcademico/banner.jpg');
}
.banner-licenciaturas{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/ofertaAcademica/bannerLic.jpg');
}
.banner-posgrados{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/ofertaAcademica/bannerPos.jpg');
}
.banner-aspirantes{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/aspirantes/banner1.jpg');
    background-position: center 30%;
}
.banner-rectoria{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/rectoria/banner-rectoria.jpg');
}
.banner-secretaria{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/secretaria/banner-secretaria.jpg');
}
.banner-comunicacion{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/coords/comunicacion/banner-comunicacionsocial.jpg');
}
.banner-cau{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/coords/cau/banner-cau.jpg');
}
.banner-publicaciones{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/publicaciones/publicaciones.jpg');
}
.banner-servicio-social{
    background-image: linear-gradient(90deg, var(--primario) 0%, var(--transparente) 100%), url('../imgs/aspirantes/banner1.jpg');
}

@media(min-width: 1024px){
    .banner{
        height: 40rem;    
    }
}

.banner__flecha{
    color: var(--blanco);
    display: flex;
    flex-direction: column;
    text-align: right;
    justify-content: center;
}
.banner__flecha-texto{
    transform: rotate(270deg);
    font-size: 1.8rem;
}
@media(min-width: 1024px){
    .banner__flecha-texto{
        font-size: 2.5rem;
    }
}

.banner__titulo{
    color: var(--blanco);
    font-size: 2rem;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0rem .4rem .5rem;
}
@media(min-width: 1024px){
    .banner__titulo{
        width: 70%;
        font-size: 4rem;
    }
}

.banner__logo img{
    width: 40%;
    margin: 0 auto;
}
@media(min-width: 1024px){
    .banner__logo img{
        width: 100%;
    }
}

.banner__legend{
    color: var(--blanco);
    font-size: 1.2rem;
    text-shadow: rgba(0, 0, 0, 0.4) 0rem .4rem .5rem;
}
@media(min-width: 768px){
    .banner__legend{
        font-size: 1.5rem;
    }
}
@media(min-width: 1024px){
    .banner__legend{
        font-size: 2rem;
    }
}

.banner__legend p{
    width: 80%;
}
@media(min-width: 1024px){
    .banner__legend p{
        width: 80%;
    }
}

/*Micrositio SIN BANNER*/
.micrositio{
    margin-top: 2rem;
}

.micrositio__titulo{
    background-color: var(--primario);
    width: 100%;
    padding: 2.5rem;
    font-size: 3rem;
    color: var(--blanco);
    text-align: center;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
    position: relative;
}

.micrositio__titulo a{
    color: var(--blanco);
    font-size: 1.8rem;
    font-weight: 900;
    position: absolute;
    left: 3%;
    top: 35%;
    transition: transform;
    transition-duration: .3s;
}

.micrositio__titulo a span span{
    display: none;
}

@media(min-width: 768px){
    .micrositio__titulo a{
        left: 5%;
        top: 35%;
    }
}
@media(min-width: 1024px){
    .micrositio__titulo a{
        left: 18%;
        top: 35%;
    }
    .micrositio__titulo a span span{
        display: inline-block;
    }
}

.micrositio__titulo a:hover{
    transform: scale(1.1);
}

.micrositio__titulo-morado{
    background-color: var(--morado);
}

.micrositio__adorno{
    width: 50%;
    height: 2rem;
    margin: 0 auto;
    box-shadow: 0 1rem 1rem -8px rgba(0, 0, 0, 0.75);
}

/*UAM SEGURA*/
.uamsegura{
    padding: 2rem 0;
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media(min-width: 768px){
    .uamsegura{
        width: 100%;
        max-width: 128rem;
        display: grid;
        grid-template-columns: 1fr 2fr;
        align-items: flex-start;
        justify-content: start;
        gap: 5rem;
    }
}

.uamsegura__banner{
    background-image: linear-gradient(90deg, var(--transparente) 0%, var(--primarioTraslucido) 100%), url('../imgs/perspectiva/diversidad.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 50rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
}

.uamsegura__banner a{
    font-size: 3rem;
    color: var(--blanco);
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0px 4px 5px;
    transition: transform .3s ease-in-out;
}
@media(min-width: 768px){
    .uamsegura__banner a{
        font-size: 4rem;
    }    
}

.uamsegura__banner a:hover{
    transform: skew(-10deg);
}

/*Diversidad....*/
.diversidad__iconos{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}
@media(min-width: 768px){
    .diversidad__iconos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .diversidad__icono:nth-child(2){
        grid-column: 2 / 3;
        grid-column: 1 / 2;
    }

    .diversidad__icono:nth-child(1){
        
    }
}   
@media(min-width: 1024px){
    .diversidad__iconos{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .diversidad__icono:nth-child(2){
        grid-column: 2 / 3;
        grid-column: 1 / 2;
    }

    .diversidad__icono:nth-child(1){
        grid-column: 2 / 3;
    }
}

.diversidad__icono{
    width: 100%;
    
}

.diversidad__img{
    width: 50%;
    margin: 0 auto;
    
}

.diversidad__link a{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    justify-content: end;    
}

.link-morado{
    color: var(--morado);
    transition: color .3s ease-out;
}
.link-morado:hover{
    color: var(--moradoLerma);
}

.diversidad__sub{
    color: var(--morado);
    font-weight: bold;
}

.diversidad__normatividad{
    width: 50%;
    margin: 0 auto;
}

.diversidad__hashtag{
    color: var(--morado);
    font-weight: bold;
    text-align: center;
    font-size: 2rem;
}

/*Galeria*/
.galeria{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    #align-items: center;
}
@media(min-width: 768px){
    .galeria{
        grid-template-columns: repeat(4, 1fr);
    }
}
@media(min-width: 1024px){
    .galeria{
        grid-template-columns: repeat(5, 1fr);
    }
}

.galeria__items{
    display: block;
    width: 100%;
}

.galeria__caption{
    color: var(--morado);
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
}

/*ugedis*/
.ugedis__link a{
    color: var(--morado);
    transition: color .3s ease-out;
}

.ugedis__link a:hover{
    color: var(--moradoLerma);
}

.ugedis__informes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    
}
@media(min-width: 768px){
    .ugedis__informes{
        display: flex;
        flex-direction: row;
        gap: 3rem;
        align-items: center;
        justify-content: center;
    }
}

.ugedis__informe{
    text-align: center;
}

.ugedis__informe-logo{
    font-size: 5rem;
    display: block;
}

.ugedis__informe a{
    color: var(--negro);
    transition: color .3s ease-out;
}

.ugedis__informe a:hover{
    color: var(--morado);
}

/*alumnado*/
.alumnado__contenedor{
    display: flex;
    flex-direction: column;
    
}
@media(min-width: 768px){
    .alumnado__contenedor{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }
}
@media(min-width: 1024px){
    .alumnado__contenedor{
        gap: unset;
        column-gap: 6rem;
    }
}

.alumnado__item{
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    padding-bottom: 2rem;
    border-bottom: .1rem solid var(--gris);
}
@media(min-width: 768px){
    .alumnado__item{
        flex-direction: row;
        border-bottom: unset;
    }
}

.alumnado__item-acceso{
    width: 95%;
    display: flex;
    flex-direction: column;
}
@media(min-width: 768px){
    .alumnado__item-acceso{
        width: 50%;
    }
}

.alumnado__item-acceso h3{
    font-weight: bold;
    color: var(--primario);
}

.alumnado__item-img{
    width: 95%;
}
@media(min-width: 768px){
    .alumnado__item-img{
        width: 50%;
    }
}

/*divisiones academicas*/
.divisiones__titulo{
    margin-top: 3rem;
    text-align: center;
}

.divisiones__titulo h3{
    font-weight: bold;
}

.divisiones__contenedor{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    
}
@media(min-width: 768px){
    .divisiones__contenedor{
        gap: 4rem;
        flex-direction: row;
        justify-content: space-around;    
    }
}
@media(min-width: 1024px){
    .divisiones__contenedor{
        gap: 6rem;
    }
}

.divisiones__logo a img{
    width: 100%;
    margin: 0 auto;
}

/*personal-academico*/
.academicos__texto{
    width: 95%;
    margin: 0 auto;
    text-align: center;
}
@media(min-width:768px){
    .academicos__texto{
        width: 90%;
    }
}
@media(min-width:1024px){
    .academicos__texto{
        width: 70%;
    }
}

.academicos__btns{
    margin-top: 3rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.academicos__btns a:nth-child(3){
    grid-row: 1 / 2;
    grid-column: 2 / 3;
}

.academicos__btns a:nth-child(2){
    
    grid-column: 1 / 3;
}

@media(min-width: 768px){
    .academicos__btns{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        background: linear-gradient(90deg, var(--primarioTraslucido) 0%, var(--transparente) 25%, var(--transparente) 75%, var(--primarioTraslucido) 100%);
        padding: 5rem 0;
    }

}
@media(min-width: 1024px){
    .academicos__btns{
        flex-direction: row;
        gap: 5rem;
    }
}

@media(min-width: 768px){
    .academicos__btns a:nth-child(1), .academicos__btns a:nth-child(3) {
            width: 30rem;
    }    
}


/*licenciaturas y posgrados*/
.licenciaturas__contenedor{
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.licenciaturas__div{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}
@media(min-width: 768px){
    .licenciaturas__div{
        flex-direction: row;
    }   
}

.licenciaturas__div-nombre{
    width: 100%;
}
@media(min-width: 768px){
    .licenciaturas__div-nombre{
        width: 20%;
    }
}

.licenciaturas__div-nombre h4{
    text-align: center;
    color: var(--moradoDivs);
    font-weight: bold;
}

.licenciaturas__div-nombre img{
    width: 60%;
    margin: 0 auto;
}

.licenciaturas__div-carreras{
    width: 100%;
    padding: 2rem 5rem;
}
@media(min-width: 768px){
    .licenciaturas__div-carreras{
        width: 80%;
        border-left: .3rem solid var(--primario);
    }
}

.licenciaturas__div-carreras-links{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
}
@media(min-width: 768px){
    .licenciaturas__div-carreras-links{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/*aspirantes*/
.aspirantes__titulo{
    margin-top: 2rem;
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: var(--primario);
}
@media(min-width: 1024px){
    .aspirantes__titulo{
        font-size: 4.8rem;
    }
}

.aspirantes__subtitulo{
    color: var(--primario);
    font-weight: bold;
}

.aspirantes__texto{
    padding: 1rem 0;
    text-align: justify;
}
@media(min-width: 1024px){
    .aspirantes__texto{
        padding: 3rem 0;
    }
}

.aspirantes__seccion{
    padding: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media(min-width: 1024px){
    .aspirantes__seccion{
        padding: 2rem 0;
        flex-direction: row;
        gap: 6rem;
    }
}
.aspirantes__seccion-reverse{
    flex-direction: column;

}
@media(min-width: 1024px){
    .aspirantes__seccion-reverse{
        flex-direction: row-reverse;
    }
}
.aspirantes__seccion-info{
    
}
@media(min-width: 1024px){
    .aspirantes__seccion-info{
        flex-basis: 30%;
        display: flex;
        flex-direction: column;
        gap: 3rem;
        justify-content: center;           
    }
}

.aspirantes__seccion-img{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 80%;
    width: 100%;
    height: 20rem;
}
@media(min-width: 1024px){
    .aspirantes__seccion-img{
        height: 35rem;
    }
}
.aspirantes__slider{
    padding: 2rem 0;
}

.aspirantes__video{
    width: 90%;
    margin: 0 auto;

}
@media(min-width: 1024px){
    .aspirantes__video{
        width: 70%;
        margin-top: -2rem;
    }
}

.img-lic{
    background-image: url('../imgs/aspirantes/lic.jpg');
}
.img-pos{
    background-image: url('../imgs/aspirantes/pos.jpg');
}
.img-cafeteria{
    background-image: url('../imgs/aspirantes/cafeteria.jpg');
}
.img-costos{
    background-image: url('../imgs/aspirantes/costos.jpg');
}
.img-admision{
    background-image: url('../imgs/aspirantes/admision.jpg');
    background-position: 20% 70%;
}

.aspirantes__banner{
    background-image: linear-gradient(90deg, var(--transparente) 0%, var(--primario) 100%), url('../imgs/aspirantes/banner2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 20rem;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
}
@media(min-width: 768px){
    .aspirantes__banner{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: 35rem;
    }
}
@media(min-width: 1024px){
    .aspirantes__banner{
        height: 35rem;
    }
}

.aspirantes__banner-titulo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.aspirantes__banner-titulo span{
    width: 100%;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 0rem .4rem .5rem;
    text-align: center;
}
@media(min-width: 768px){
    .aspirantes__banner-titulo span{
        text-align: left;
        font-size: 3rem;
    }
}

/*semblanzas de rectoria, secreataria y cau*/
.semblanza__contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media(min-width: 1024px){
    .semblanza__contenedor{
        flex-direction: row;
        gap: 5rem;
        padding-bottom: 3rem;
    }
}
.semblanza__foto{
    flex-basis: 30%;
}

.semblanza__info{
    flex-basis: 70%;
    text-align: center;
    padding: 0 2rem;
}
@media(min-width: 768px){
    .semblanza__info{
        text-align: left;
        padding: unset;
    }
}

.semblanza__info a{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
@media(min-width: 768px){
    .semblanza__info a{
        margin-top: 1rem;
        justify-content: start;
    }
}

.semblanza__email{
    font-size: 2.5rem;
    color: var(--blanco);
    background-color: var(--primario);
    padding: 1.5rem;
    border-radius: 50%;
}
@media(min-width: 768px){
    .semblanza__email{
        font-size: 3.5rem;
    }
}

/*rectoria*/
.rectoria__informes-contenedor{
    width: 50%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: center;
    justify-content: center;
}

.rectoria__informes-contenedor a{
    text-align: center;
}

.rectoria__oficinas{
    display: flex;
    flex-direction: column;
    gap: 5rem;
}
@media(min-width:768px){
    .rectoria__oficinas{
        flex-direction: row;
    }
}

.rectoria__oficinas-col{
    flex-basis: 50%;
    display: flex;
    gap: 2rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/*secretaria*/
.secretaria__informes-contenedor{
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
@media(min-width: 1024px){
    .secretaria__informes-contenedor{
        width: 40%;
    }
}

.secretaria__informes-contenedor a{
    text-align: center;
}

/*comunicacion*/
.comunicacion__solicitudes{
    display: flex;
    gap: 5rem;
    justify-content: center;
}
.comunicacion__solicitudes a{
    text-align: center;
}

/*CAU*/
.cau__coords-contenedor{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
@media(min-width: 768px){
    .cau__coords-contenedor{
        width: 45%;
        margin: 0 auto;
    }
}

/*publicaciones*/
.publicaciones__contenedor{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 6rem;
}

.publicaciones__division h3{
    font-weight: bold;
    margin-bottom: 2rem;
}

.publicaciones__division-btns{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/*servicio social*/
.servicio-social__contenedor{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media(min-width: 1024px){
    .servicio-social__contenedor{
        gap: 3rem;
    }
}

.servicio-social__div{
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media(min-width: 768px){
    .servicio-social__div{
        flex-direction: row;
    }
}
@media(min-width: 768px){
    .servicio-social__div-info{
        flex-basis: 60%;
    }
}

/*Acerca de*/
.acercade__contenedor-links{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    text-align: center;
}

@media(min-width: 768px){
    .acercade__contenedor-links{
        flex-direction: row;
        gap: 3rem;
    }
}

.acercade__historia-banners{
    background-image: url('../imgs/institucion/campus3.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 35rem;   
}
.acercade__historia-banners-2{
    background-image: url('../imgs/institucion/prof_investigador.jpg');
    background-position: 50% 10%;
}
.acercade__historia-banners-3{
    background-image: url('../imgs/institucion/salas.jpg');
}

/*transparencia uama*/
.transparencia__contenedor{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    justify-content: center;
}
@media(min-width: 768px){
    .transparencia__contenedor{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media(min-width: 1024px){
    .transparencia__contenedor{
        grid-template-columns: repeat(4, 1fr);
    }
}
.transparencia__contenedor a{
    text-align: center;
}

/*mapa del sitio*/
.list-group-item-danger.list-group-item-action.active{
    background-color: var(--primario);
    border-color: var(--primario);
    font-weight: bold;
}

.mapa-sitio__contenedor{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
@media(min-width: 768px){
    .mapa-sitio__contenedor{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

}
@media(min-width: 1024px){
    .mapa-sitio__contenedor{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem;
    }

}
#codigob{
        font-family: "FREE3OF9";
    }

.mapa-sitio__item{
    
    
}