@charset "utf-8";
@font-face{
    font-family: LogoMC;
    src: url("fuentes/DGA_JennaSue.ttf")
 }
 @font-face{
    font-family: TextoDGA;
    src: url("fuentes/OpenSans.ttf")
 }

 @font-face{
   font-family: FuenteIconos;
   src:url("fuentes/iconosWeb.otf");
}

 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html{
   font-family: TextoDGA, sans-serif;
   scroll-behavior: smooth;
   font-size: 16px;
 }

 a{
   text-decoration: none;
   color: rgba(0,0,0,1);
   font-size: 1rem;
 }

.cambiarimg{
   width: 20px;
   height: 20px;
   padding: 0 10px 0 10px;
   background-image: url("../imag/inicioi.png");
   background-repeat: no-repeat;
}

.cambiarimg:hover{
   width: 20px;
   height: 20px;
   padding: 0 10px 0 10px;
   background-image: url("../imag/inicioii.png");
   background-color: rgba(0,0,0,.3);
   background-repeat: no-repeat;
}

 li:hover{
   /* padding: 5px; */
   background: rgba(0,0,0,.3);
   /* color:rgba(255,255,255,1); */
   font-weight: bold;
 }

 li:hover > a{
   color:rgba(255,255,255,1);
 }

 ul{
   list-style-type: none;
 }

 .marca{
   font-size: 1.3rem;
   color: rgba(0,0,255,1);
 }

 .cuerpo:hover li{
   background: none;
   font-weight: normal;
   color:rgba(0,0,0,1);
 }

 .platos li:hover{
   background: rgba(0,0,0,.3);
   font-weight: bold;
 }

.activo{
   color:rgba(255,0,0,1);
   font-weight: bold;
}

.activo:hover{
   background: none;
}

.cabecera{
   width: 100%;
   /* background-color: transparent;  */
   background-image: url("../imag/fcabecera.png");
   position:relative;
}

.titulo{
   text-align: center;
   max-width: 90vw;
   font-family: LogoMC, sans-serif;
   font-size:6rem;
   font-weight: bold;
   padding: 0 10px 0 10px;
   /* position:relative; */
}

#botonmenu{
   display:none;
}

.cabecera > label{
   display:none;
   border: 1px solid rgba(0,0,255,.5);
   background: rgba(255, 255, 255, .7);
   width: 100%;
   height: 36px;
   padding: 3px;
}

.cabecera label:hover{
   cursor:pointer;
}

.menu{
   border: 1px solid rgba(0,0,255,.5);
   background: rgba(255, 255, 255, .7);
   padding: 0 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

.menuprincipal{
   width: 75%;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
}



.p-submenu{
   position:relative;
}

.p-submenu > input{
   display:none;
}

.submenu{
   position:absolute;
   padding: 5px;
   background: rgba(255,255,255,1);
   border-left: 1px solid rgba(0,0,255,.5);
   box-shadow: 0px 5px 10px rgba(0,0,0,1);
   display: none;
   opacity:0;
   transition: all 1s;
   z-index: 5;
}

.p-submenu:hover > label{
   color:rgba(255, 255, 255, 1);
}

.p-submenu:hover .submenu{
   display:block;
   opacity:1;
}

.submenu > li{
   padding: 5px;
   font-weight: normal;
}

.interior{
   border-top: 1px solid rgba(0,0,255,.2);
}

.cuerpo{
   position:relative;
   width: 100%;
   background-color: rgba(255, 255, 255, 1); 
   display:flex;
   flex-direction: row;
   
}

.subtitulo{
   max-width: 90%;
   font-family: LogoMC, sans-serif;
   font-size:4rem;
   padding: 10px;
}

.tituloplato, .titulorecursos{
   max-width: 90%;
   font-family: LogoMC, sans-serif;
   font-size:4rem;
   padding: 5px;
}

.elabora{
   display:none;
}

footer{
   background-image: url("../imag/fpie.png");
}

.pie{
   width: 100%;
   padding: 0 10px;
   font-family: LogoMC, sans-serif;
   font-size: 1.5rem;
   
   background-color:rgba(255,255,255,.7);
   color:rgba(0,0,0,.7);
   border-top: solid 1px rgba(0,0,255,1);
   display: flex;
   flex-direction:row-reverse;
   justify-content: space-between;
   align-items: center;
}





/*********************************************************************/
/*--------------------- Pantallas Tabletas-------------------------- */
/*********************************************************************/

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape){ 

   li:hover{
      /* padding: 5px; */
      background: rgba(0,0,0,.3);
      /* color:rgba(255,255,255,1); */
      font-weight: bold;
    }
   
    li:hover > a{
      color:rgba(255,255,255,1);
    }
   
   .titulo{
      font-family: LogoMC, sans-serif;
      font-size:4rem;
      text-align: center;
   }

   #botonmenu{
      display:none;
   }
      
   .cabecera > label{
      display:block;
   }

   .menu{
      width: 45%;
      padding: 2px 0;
      position:absolute;
      flex-direction: column;
      align-items:left;
      background: rgba(255,255,255,.9);
      margin-left: -70%;
      transition: all 1s;
      z-index:10;
   }

   .menu li{
      /* border-top: 1px solid rgba(0,0,255,.5); */
      padding: 10px 5px 10px 5px;
   }

   .menu img{
      padding: 10px 5px 10px 5px;
   }

   .menu .cambiarimg{
         margin: 10px 5px 10px 5px;
   }

   .menuprincipal{
      /* width: 70%; */
      display: flex;
      flex-direction: column;
      /* justify-content: space-around; */
   }

   #botonmenu:checked ~ .menu{
      margin-left: 0;
   }

   
   .p-submenu > input{
      display:none;
   }
   
   .submenu{
      position:relative;
      padding: 5px 0 5px 30px;
      background: transparent;
      border-left:none;
      box-shadow:none;
      width: 0;
      height: 0;
      opacity: 0;
      transition: all .5s;
      z-index: 5;
   }

   .p-submenu:hover > .submenu{
      opacity:0;
   }

   #utilidades:checked ~ .submenu{
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 1); 
      opacity:1;
   }

   .interior{
      border-top: 1px solid rgba(0,0,255,.2);
   }


}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait){ 

   li:hover{
      /* padding: 5px; */
      background: rgba(0,0,0,.3);
      /* color:rgba(255,255,255,1); */
      font-weight: bold;
    }
   
    li:hover > a{
      color:rgba(255,255,255,1);
    }
   
   .titulo{
      font-family: LogoMC, sans-serif;
      font-size:4rem;
      text-align: center;
   }

   #botonmenu{
      display:none;
   }
      
   .cabecera > label{
      display:block;
   }

   .menu{
      width: 45%;
      padding: 2px 0;
      position:absolute;
      flex-direction: column;
      align-items:left;
      background: rgba(255,255,255,.9);
      margin-left: -70%;
      transition: all 1s;
      z-index:10;
   }

   .menu li{
      /* border-top: 1px solid rgba(0,0,255,.5); */
      padding: 10px 5px 10px 5px;
   }

   .menu img{
      padding: 10px 5px 10px 5px;
   }

   .menu .cambiarimg{
      margin: 10px 5px 10px 5px;
   }

   .menuprincipal{
      /* width: 70%; */
      display: flex;
      flex-direction: column;
      /* justify-content: space-around; */
   }

   #botonmenu:checked ~ .menu{
      margin-left: 0;
   }

   
   .p-submenu > input{
      display:none;
   }
   
   .submenu{
      position:relative;
      padding: 5px 0 5px 30px;
      background: transparent;
      border-left:none;
      box-shadow:none;
      width: 0;
      height: 0;
      opacity: 0;
      transition: all .5s;
      z-index: 5;
   }

   .p-submenu:hover > .submenu{
      opacity:0;
   }

   #utilidades:checked ~ .submenu{
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      opacity:1;
   }

   .interior{
      border-top: 1px solid rgba(0,0,255,.2);
   }

   .cuerpo{
      width: 100%;
      background-color: rgba(255, 255, 255, 1); 
      display:flex;
      flex-direction: column;
   }

   .subtitulo{
      font-size:3rem;
   }

   .elabora{
      display:block;
      text-align: center;
      padding: 3px;
      background: rgba(255,0,0,.5);
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      width: 95%;
      margin: 0 auto;
      font-size:32px;
      font-weight: bold;
   }

   .tituloplato{
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      font-size: 3rem;
      padding: 5px;
   }

}

/*********************************************************************/
/*--------------------- Pantallas Móbiles-------------------------- */
/*********************************************************************/

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

   li:hover{
      /* padding: 5px; */
      background: rgba(0,0,0,.3);
      /* color:rgba(255,255,255,1); */
      font-weight: bold;
    }
   
    li:hover > a{
      color:rgba(255,255,255,1);
    }
   .titulo{
      font-family: LogoMC, sans-serif;
      font-size:48px;
      text-align: center;
   }

   #botonmenu{
      display:none;
   }
      
   .cabecera > label{
      display:block;
   }

   .menu{
      width: 45%;
      padding: 2px 0;
      position:absolute;
      flex-direction: column;
      align-items:left;
      background: rgba(255,255,255,.9);
      margin-left: -70%;
      transition: all 1s;
      z-index:10;
   }

   .menu li{
      /* border-top: 1px solid rgba(0,0,255,.5); */
      padding: 10px 5px 10px 5px;
   }

   .menu img{
      padding: 10px 5px 10px 5px;
   }

   .menu .cambiarimg{
      margin: 10px 5px 10px 5px;
   }

   .menuprincipal{
      /* width: 70%; */
      display: flex;
      flex-direction: column;
      /* justify-content: space-around; */
   }

   #botonmenu:checked ~ .menu{
      margin-left: 0;
   }
   
   /* .menuprincipal{
      width: 80%;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
   } */

   .p-submenu > input{
      display:none;
   }
   
   .submenu{
      position:relative;
      padding: 5px 0 5px 30px;
      background: transparent;
      border-left:none;
      box-shadow:none;
      width: 0;
      height: 0;
      opacity: 0;
      transition: all .5s;
      z-index: 5;
   }

   .p-submenu:hover > .submenu{
      opacity:0;
   }

   #utilidades:checked ~ .submenu{
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 1); 
      opacity:1;
   }

   .interior{
      border-top: 1px solid rgba(0,0,255,.2);
   }

   .cuerpo{
      width: 100%;
      background-color: rgba(255, 255, 255, 1); 
      display:flex;
      flex-direction: column;
   }

   .subtitulo{
      font-size:3rem;
   }

   .elabora{
      display:block;
      text-align: center;
      padding: 3px;
      background: rgba(255,0,0,.5);
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      width: 95%;
      margin: 0 auto;
      font-size:32px;
      font-weight: bold;
   }

   .tituloplato{
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      font-size: 3rem;
      padding: 5px;
   }

}

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

   li:hover{
      /* padding: 5px; */
      background: rgba(0,0,0,.3);
      /* color:rgba(255,255,255,1); */
      font-weight: bold;
    }
   
    li:hover > a{
      color:rgba(255,255,255,1);
    }
   .titulo{
      font-family: LogoMC, sans-serif;
      font-size:40px;
      text-align: center;
   }

   #botonmenu{
      display:none;
   }
      
   .cabecera label{
      display:block;
   }

   .menu{
      width: 70%;
      padding: 2px 0;
      position:absolute;
      flex-direction: column;
      align-items:left;
      background: rgba(255,255,255,.9);
      margin-left: -70%;
      transition: all 1s;
      z-index:10;
   }

   .menu li{
      /* border-top: 1px solid rgba(0,0,255,.5); */
      padding: 10px 5px 10px 5px;
   }

   .menu img{
      padding: 10px 5px 10px 5px;
   }

   .menu .cambiarimg{
      margin: 10px 5px 10px 5px;
   }

   .menuprincipal{
      /* width: 70%; */
      display: flex;
      flex-direction: column;
      /* justify-content: space-around; */
   }

   #botonmenu:checked ~ .menu{
      margin-left: 0;
   }

 
   .p-submenu > input{
      display:none;
   }
   
   .submenu{
      position:relative;
      padding: 5px 0 5px 30px;
      background: transparent;
      border-left:none;
      box-shadow:none;
      width: 0;
      height: 0;
      opacity: 0;
      transition: all .5s;
      z-index: 5;
   }

   .p-submenu:hover > .submenu{
      opacity:0;
   }

   #utilidades:checked ~ .submenu{
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 1); 
      opacity:1;
   }  

   .interior{
      border-top: 1px solid rgba(0,0,255,.7);
   }

   .cuerpo{
      width: 100%;
      background-color: rgba(255, 255, 255, 1); 
      display:flex;
      flex-direction: column;
   }

   .subtitulo{
      font-size:3rem;
   }

   .elabora{
      display:block;
      width: 95%;
      margin: 0 auto;
      text-align: center;
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      font-size:32px;
      font-weight: bold;
   }

   .tituloplato{
      max-width: 95%;
      font-family: LogoMC, sans-serif;
      font-size: 3rem;
      padding: 5px;
   }
}