@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;900&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Oregano&display=swap');
      :root {
         --color-claro: #F0F3F5;
         --color-medio: #71979C;
         --color-oscuro: #7b1515;
     }
     
     * {
         margin: 0px;
         padding: 0px;
         box-sizing: border-box;
     }
     
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         font-family: 'Raleway', 'Oregano', sans-serif;
     }
     
     body {
         font-weight: 400;
         font-size: 16px;
     }
     /* contenido  del container******************************************************************** */
     /* contenedor de main__hero */
     
     .hero__main {
         width: 100%;
         max-width: 1200px;
         margin: auto;
     }
     
     .contenedor {
         width: 90%;
         max-width: 1200px;
     }
     
     .hero__textos {
         width: 100%;
         max-width: 1200px;
         margin: 0 auto;
     }
     /* Configuracion de Barra de redes sociales lado izquierdo */
     
     .content__redes {
         position: fixed;
         left: 0;
         top: 300px;
         z-index: 2000;
     }
     
     .content__redes ul {
         list-style: none;
     }
     
     .content__redes ul li a {
         display: inline-block;
         background: black;
         padding: 10px 15px;
         text-decoration: none;
         color: #fafafa;
     }
     
     .content__redes ul li .fa-facebook-f {
         background: #3b5998;
         padding: 10px 14px;
     }
     
     .content__redes ul li .fa-instagram {
         background: #f76100;
     }
     
     .content__redes ul li .fa-whatsapp {
         background: #4AC959;
     }
     
     .content__redes ul li a:hover {
         padding: 10px 30px;
         background: #7b1515;
     }
     
     .content__redes ul li .fa-map-marker-alt {
         background: red;
         padding: 10px 16px;
     }
     /* ********************************************************************

    /* EMPIEZA CONTENIDO DEL MAIN***************************************************************************************/
     
     .menu__comida {
         background-image: url(img/menuf.jpg);
     }
     
     .container__principal {
         width: 90%;
         max-width: 1200px;
         height: auto margin: 0 auto;
         overflow: hidden;
         background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
         padding: 5px;
         margin: 0 auto;
     }
     
     .background {
         position: relative;
         width: 100%;
         height: 70px;
         margin: 0 auto;
         object-fit: cover;
     }
     
     .tprincipal {
         display: none;
     }
     
     .parratitulo {
         display: none;
     }
     
     .parraprin {
         display: none;
     }
     
     .foto1000 {
         display: none;
     }
     
     .background__text {
         position: absolute;
         font-size: 30px;
         bottom: 10px;
     }
     /* este es icono de tenedores */
     
     .fa-utensils {
         font-size: 45px;
         color: #fafafa;
         margin-top: 14px;
         padding-left: 20px;
     }
     /* icono de chile */
     
     .fa-pepper-hot {
         display: none;
         font-size: 45px;
         color: #fafafa;
         margin-left: 234px;
     }
     /* clase deBOTON DE ENTRAR A MENU */
     
     .background__text {
         width: 100%;
         text-align: center;
     }
     /* boton de cta */
     
     .boton__cta {
         display: inline-block;
         text-decoration: none;
         color: #fafafa;
         padding: 5px 35px;
         font-size: 20px;
         border-radius: 10px;
         background: linear-gradient(to left, #0f2027, #203a43, #2c5364);
         -webkit-border-radius: ;
         -moz-border-radius: ;
         -ms-border-radius: ;
         -o-border-radius: ;
         margin: 0px;
     }
     /* boton en hover  */
     
     .boton__cta:hover {
         background: linear-gradient(to right, #8e0e00, #1f1c18);
         transition: 1s;
         -webkit-transition: 1s;
         -moz-transition: 1s;
         -ms-transition: 1s;
         -o-transition: 1s;
     }
     /* seccion 2 de main empieza ********************************************************************************************/
     /* contenedor principal de la seccion */
     
     .container__antojitos {
         width: 90%;
         max-width: 1200px;
         margin: 0 auto;
         overflow: hidden;
         padding-top: 15px;
     }
     /* Contenedor de la foto */
     
     .antojitos__principal {
         width: 100%;
         max-width: 1200px;
         overflow: hidden;
         object-fit: cover;
         margin: 0;
     }
     
     .fotos__p {
         display: inline-block;
         padding: 0px;
         width: 100%;
         padding: 10px 0;
     }
     /* ******************************************************************************************** */
     /* Empieza la seccion de foooter para celular*************************************************************************************** */
     /* contenedor principal de toda la seccion */
     
     .footer {
         width: 100%;
         max-width: 1600px;
         height: 100%;
         margin: 0 auto;
         background-image: url(img/header.jpg);
         background-repeat: none;
         background-size: cover;
         background-position: center;
         object-fit: cover;
     }
     
     .con__fotter {
         display: flex;
         flex-direction: column;
         width: 90%;
         max-width: 1200px;
         margin: 0 auto;
         overflow: hidden;
         padding-top: 10px;
     }
     /*  Titulo de la seccion*/
     
     .titulo-seccion {
         text-align: center;
         font-size: 20px;
         color: #fafafa;
         padding: 10px
     }
     /* ¨parrafo de la seccion */
     
     .copy {
         text-align: center;
         color: #fafafa;
         padding-bottom: 30px;
         font-size: 15px;
         line-height: 25px;
     }
     /* *****************contenedor de las redes sociales */
     
     .foot__redes {
         width: 90%;
         display: flex;
         flex-direction: row;
         justify-content: space-around;
         margin: 0 auto;
     }
     /* esta es la lista ul */
     
     .foot__redes ul li {
         list-style: none;
         text-decoration: none;
         display: inline-block;
     }
     /* clase del icono de facebbok */
     
     .fa-facebook-f2 {
         color: #fafafa;
         text-decoration: none;
         font-size: 40px;
         padding: 10px;
     }
     
     .fa-facebook-f2:hover {
         background-color: #3b5998;
         border-radius: 50%;
         transition: .5s;
         -webkit-transition: ;
         -moz-transition: ;
         -ms-transition: ;
         -o-transition: ;
     }
     /* clase del icono de instagram */
     
     .fa-instagram2 {
         color: #fafafa;
         text-decoration: none;
         font-size: 40px;
         padding: 10px;
     }
     
     .fa-instagram2:hover {
         background-color: #f76100;
         border-radius: 50%;
         transition: .5s;
         -webkit-transition: ;
         -moz-transition: ;
         -ms-transition: ;
         -o-transition: ;
     }
     /* clase de ico de whattapp */
     
     .fa-whatsapp2 {
         color: #fafafa;
         text-decoration: none;
         font-size: 40px;
         padding: 10px;
     }
     
     .fa-whatsapp2:hover {
         background-color: #4ac959;
         border-radius: 50%;
         transition: .5s;
         -webkit-transition: ;
         -moz-transition: ;
         -ms-transition: ;
         -o-transition: ;
     }
     /* clase de ico de lozalizacion*/
     
     .fa-map-marker-alt2 {
         color: #fafafa;
         text-decoration: none;
         font-size: 40px;
         padding: 10px;
     }
     
     .fa-map-marker-alt2:hover {
         background-color: red;
         border-radius: 50%;
         transition: .5s;
         -webkit-transition: .5s;
         -moz-transition: .5s;
         -ms-transition: .5s;
         -o-transition: .5s;
         -webkit-border-radius: 50%;
         -moz-border-radius: 50%;
         -ms-border-radius: 50%;
         -o-border-radius: 50%;
     }
     /* clase para realizar llamada */
     
     .fa-phone-volume {
         color: #fafafa;
         text-decoration: none;
         font-size: 40px;
         padding: 10px;
     }
     /* clase hover */
     
     .fa-phone-volume:hover {
         background-color: #4ac959;
         border-radius: 40%;
         transition: .5s;
         -webkit-border-radius: 60%;
         -moz-border-radius: 40%;
         -ms-border-radius: 40%;
         -o-border-radius: 40%;
     }
     /* aviso de privasidad */
     
     .avisop {
         display: block;
         color: #fafafa;
         font-size: 10px;
         text-align: end;
     }
     
     .avisopri {
         display: inline-block;
         color: #fafafa;
         font-size: 12px;
         padding: 20px;
     }
     /* otra are diferente************************************************************************************************** */
     
     .boton {
         background-color: var(--color-medio);
         width: 150px;
         text-align: center;
         border-radius: 30px;
         padding: 7px !important;
         font-size: 1.2rem;
         color: var(--color-claro) !important;
         /*margin: 10px auto;
        */
         outline: 0px;
         border: 0px;
         cursor: pointer;
         -webkit-border-radius: 30px;
         -moz-border-radius: 30px;
         -ms-border-radius: 30px;
         -o-border-radius: 30px;
     }
     
     .boton:hover {
         background-color: var(--color-oscuro);
         transition: .5s;
         -webkit-transition: ;
         -moz-transition: ;
         -ms-transition: ;
         -o-transition: ;
     }
     /*CABECERA*/
     
     header.cabecera {
         /* background-color: black; */
         /* background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 07)), url(img/header.jpg); */
         background-image: url(img/header.jpg);
         background-size: cover;
         background-position: center;
         object-fit: cover;
     }
     
     .logo {
         height: 80px;
         background-color: white;
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0px 20px;
     }
     
     .logo>img {
         height: 50px;
     }
     
     .logo>img[src="img/logo2.png"] {
         display: none;
     }
     
     .logo>label {
         color: var(--color-claro);
         background-color: var(--color-oscuro);
         width: 50px;
         height: 50px;
         font-size: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
         border-radius: 10px;
         cursor: pointer;
         -webkit-border-radius: ;
         -moz-border-radius: ;
         -ms-border-radius: ;
         -o-border-radius: ;
     }
     
     nav.menu {
         background-color: var(--color-claro);
         display: none;
     }
     
     nav.menu li {
         list-style: none;
         border-bottom: 1px solid white;
     }
     
     nav.menu li:last-of-type {
         border-bottom: none;
     }
     
     nav.menu a {
         color: var(--color-oscuro);
         text-decoration: none;
         display: block;
         padding: 15px;
         font-size: 1.5rem;
     }
     
     nav.menu a:hover {
         background-color: var(--color-medio);
         color: var(--color-claro);
         transition: .5s;
         -webkit-transition: ;
         -moz-transition: ;
         -ms-transition: ;
         -o-transition: ;
     }
     
     #menu {
         display: none;
     }
     
     #menu:checked+.menu {
         display: block;
     }
     /* ********************************************************************************modo computadora 1000px************ */
     /* empieza contenido principal del hero__main para celular */
     /*Banner*/
     /* Empiezan las @medias para dispositivos */
     
     @media (min-width:780px) {
         .banner {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         .banner h1 {
             font-size: 4rem;
         }
         .titulo {
             padding: 20px;
             flex: 1 0 400px;
         }
         .formulario {
             flex: 0 0 300px;
         }
         input.boton {
             margin-bottom: 5px;
         }
     }
     /*********************************************************************************************************************TAMAÑO 1000 *********************************************************************************************************************/
     
     @media (min-width:1000px) {
         /*CABECERA*/
         .contenedor_logo {
             display: flex;
             justify-content: space-between;
             align-items: center;
             /* anterior mente tenia 50 */
             padding: 1.25rem;
         }
         .logo {
             height: initial;
             padding: initial;
             border-bottom: none;
             background-color: transparent;
         }
         .logo>img {
             height: 60px;
         }
         .logo>img[src="img/logo2.png"] {
             display: initial;
         }
         .logo>img[src="img/logo1.png"] {
             display: none;
         }
         .logo>label {
             display: none;
         }
         nav.menu {
             background-color: initial;
             display: initial;
         }
         nav.menu>ul {
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
         nav.menu li {
             border-bottom: none;
         }
         nav.menu a {
             color: var(--color-claro);
             padding: 15px;
             font-size: 1.25rem;
             border-bottom: 1px solid rgba(255, 255, 255, 0);
         }
         nav.menu a:hover {
             background-color: initial;
             color: var(--color-medio);
             border-bottom: 1px solid #fafafa;
             transition: 1s;
             -webkit-transition: 1s;
             -moz-transition: 1s;
             -ms-transition: 1s;
             -o-transition: 1s;
         }
         .banner {
             background-image: initial;
             background-size: cover;
             background-position: center;
             color: var(--color-claro);
             padding: 40px;
         }
         /* configuracion del banners fotos en movimiento */
         .hero__main {
             width: 90%;
             max-width: 1200px;
         }
         .hero__textos {
             width: 100%;
             max-width: 1200px;
             padding-bottom: 2.5rem;
             margin: 0 auto;
         }
         /* configuracion de main en resolucion de 1000px */
         /* contenedor de principal */
         .container__principal {
             background-image: url(img/fondo-menu.jpg);
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
             object-fit: cover;
         }
         .background {
             height: auto;
             object-fit: cover;
         }
         .tprincipal {
             display: initial;
             display: block;
             padding: 20px;
             text-align: center;
             margin: 0 auto;
             color: #7b1515;
             font-family: Oregano;
             font-size: 50px;
         }
         .parratitulo {
             display: initial;
             display: block;
             font-family: Oregano;
             font-size: 30px;
             color: black;
             text-align: center;
             margin-bottom: 20px;
             margin: 0px 250px;
         }
         .parraprin {
             display: initial;
             display: block;
             font-size: roboto;
             margin: 30px;
             font-size: 25px;
             margin-bottom: 50px;
             line-height: 35px;
             font-weight: 400;
         }
         .foto1000 {
             display: block;
             margin: auto;
             width: 500px;
             height: auto;
             border-radius: 15px;
             -webkit-border-radius: 15px;
             -moz-border-radius: 15px;
             -ms-border-radius: 15px;
             -o-border-radius: 15px;
             box-shadow: 4px -7px 9px -2px rgba(0, 0, 0, 0.75);
         }
         .fa-utensils {
             display: none;
             color: red;
         }
         .fa-pepper-hot {
             display: none;
         }
         /* contenedor del boton menu entrar */
         .background__text {}
         .boton__cta {
             margin-bottom: 10px;
             padding: 15px 40px;
             background: linear-gradient(to right, #fc4a1a, #f7b733);
             box-shadow: 5px -2px 5px 0px rgba(0, 0, 0, 0.75);
             color: black;
         }
         .boton__cta:hover {
             color: #fafafa;
         }
         /* Empieza seccion 2 de main fotos principales */
         .antojitos__principal {
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;
             align-items: center;
             width: 100%;
             overflow: hidden;
             object-fit: cover;
             margin: 0 auto;
         }
         .fotos__p {
             display: block;
             padding: 0px;
             width: 50%;
             padding: 20px;
             object-fit: cover;
             border-radius: 30px;
             -webkit-border-radius: 30px;
             -moz-border-radius: 30px;
             -ms-border-radius: 30px;
             -o-border-radius: 30px;
         }
         /***************************************** footer para computadora 1000px ******************************************************************/
         .titulo-seccion {
             font-size: 25px;
             padding: 10px;
         }
         /* ¨parrafo de la seccion */
         .copy {
             padding-bottom: 5px;
             font-size: 15px;
             line-height: 30px;
         }
         /* clase del icono de facebbok */
         .fa-facebook-f2 {
             font-size: 40px;
             margin: 0px 30px;
         }
         /* clase del icono de instagram */
         .fa-instagram2 {
             font-size: 40px;
             margin: 0px 30px;
         }
         /* clase de ico de whattapp */
         .fa-whatsapp2 {
             font-size: 40px;
             margin: 0px 30px;
         }
         /* clase de ico de lozalizacion*/
         .fa-map-marker-alt2 {
             font-size: 40px;
             margin: 0px 30px;
         }
         /* aviso de privasidad */
         .avisop {
             display: block;
             color: #fafafa;
             font-size: 12px;
             text-align: end;
         }
         .avisopri {
             display: inline-block;
             color: #fafafa;
             font-size: 14px;
             padding: 5px;
             margin-right: 30px;
         }
         /* llave del contenedor 1000px *
}