/*Estilos del sitio*/

html {
        scroll-behavior: smooth;
       /*Comenta la línea (o dale el valor 'auto' a scroll behavior )
       para probar la diferencia con y sin scroll suavizado*/
    }

body {background-color: #fff !important;}

     #contenidos {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
      padding: 20px;
      text-align: justify;
    }

    .col-12 { grid-column: span 12; }
    .col-6  { grid-column: span 6; }
    .col-4  { grid-column: span 4; }
    .col-3  { grid-column: span 3; }

    .box {
      padding: 20px;
      border-radius: 6px;
      text-align: center;
    }

    .box img {
      max-width: 100%;
      height: auto;
      border-radius: 4px;
    }

    #pie {
      background: rgb(6,93,148);
      color: white;
      text-align: center;
      padding: 1em;
    }


/*Contenidos*/

.titulo {background-image:url("../images/pleca.png");
width: 100%;
font-size: 1.5em;
height:fit-content;
background-repeat: no-repeat;
background-size: cover;
padding: 10px 0px;
margin: 20px 0;
font-weight: bold;
vertical-align: middle;
text-align: left;
text-transform: uppercase;
color: #065D94;}

/*Botones*/

a.boton {width:100% !important;
height:3em !important;
background: rgb(6,93,148) !important;
background: linear-gradient(90deg, rgba(6,93,148,1) 0%, rgba(0,116,173,1) 78%) !important;
color:#ffffff !important;
text-align:center !important;
display:block !important;
text-decoration: none !important;
padding-top:.5em !important;}

a:hover.boton {background-color:#ffffff !important;
color:#333366 !important;}

.ley img {background: rgba(6,93,148,1);
color:#ffffff;
text-align:center;
display:block;
margin-bottom: 1em;
border-radius: 300px;
transition: 300ms ease-out}

.ley img:hover {border-radius: 40px;
background-color:#000000;
color:#333366;
opacity:0.5;
transition: 300ms ease-in}

.comite img {background: rgba(251,140,0,1);
color:#ffffff;
text-align:center;
display:block;
margin-bottom: 1em;
border-radius: 300px;
transition: 300ms ease-out}

.comite img:hover {border-radius: 40px;
background-color:#000000;
color:#333366;
opacity:0.5;
transition: 300ms ease-in}

.normatividad img {background: rgba( 253, 216, 53,1);
color:#ffffff;
text-align:center;
display:block;
margin-bottom: 1em;
border-radius: 300px;
transition: 300ms ease-out}

.normatividad img:hover {border-radius: 40px;
background-color:#000000;
color:#333366;
opacity:0.5;
transition: 300ms ease-in}

.plataforma img {background: rgba(106,27,154,1);
color:#ffffff;
text-align:center;
display:block;
margin-bottom: 1em;
border-radius: 300px;
transition: 300ms ease-out}

.plataforma img:hover {border-radius: 40px;
background-color:#000000;
color:#333366;
opacity:0.5;
transition: 300ms ease-in}

.directorio h2,h3 {font-size: 1.2em}

.directorio h3 {font-weight: normal;}

#menu {
  background: rgb(6,93,148);
  color: white;
}

/* BOTON MOVIL */
.menu-toggle{
  display:none;
  padding:15px;
  font-size:20px;
  cursor:pointer;
}

/* MENU */
#menu ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  flex-wrap:wrap;
}

/* ITEMS */
#menu li{
  position:relative;
}

/* LINKS */
#menu a{
  display:block;
  color:white;
  text-decoration:none;
  padding:12px 16px;
}

#menu a:hover{
  background:#fff;
  color:#333366;
}

/* SUBMENU */
#menu li ul{
  display:none;
  position:absolute;
  background:rgb(6,93,148);
  top:100%;
  left:0;
  min-width:180px;
  flex-direction:column;
}

/* MOSTRAR SUBMENU EN DESKTOP */
#menu li:hover ul{
  display:block;
}

/* RESPONSIVE */
@media (max-width:768px){

.menu-toggle{
  display:block;
}

#menu ul{
  display:none;
  flex-direction:column;
}

#menu ul.show{
  display:flex;
}

#menu li{
  width:100%;
}

#menu li ul{
  position:relative;
}

}