/* red #d90000

fonts

font-family: 'Spline Sans', sans-serif;
font-family: 'Raleway';
font-family: "UnifrakturMaguntia", cursive;

font-family: "Alfa Slab One", serif;
  font-weight: 400;
  font-style: normal;


 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;

 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
 
font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;
 
font-family: "Freehand", cursive;
  font-weight: 400;
  font-style: normal;

*/
html{
	overflow-x: hidden;
	margin: 0;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
	overflow-x: hidden;
    overflow: hidden; /* Oculta el scroll del body */
    }
 

/* 0.0 welcome ********************************************/

.loader{
	width: 100%;
	height: 100%;
	position: fixed; 
	background-color:transparent;
	top: 0;
	z-index: -99;
	animation: loader 3s linear;
	opacity: 0;
	margin: 0;
}
.loaderInside{
	width: 100%;
	height: 100%;
	position: relative;
	background-color:transparent;
	top: 0;
	display: inline-flex;  
}
.loaderItem1{
	width: 50%;
	height: 100%;
	background-image: linear-gradient(#eee,#fff);
	position: relative;
	display: block;
	animation: loaderItem1 3s linear;
   left: -50%;
}
.loaderItem2{
	width: 50%;
	height: 100%;
	background-image: linear-gradient(#eee,#fff);
	position: fixed;
	left: 100%;
	animation: loaderItem2 3s linear;
}
.loader img {
	width: 10%;
	height: 20vh;
	position: fixed;
	z-index: 99;
	left: 45%;
	top: 25%;opacity: 0;
	animation: loaderInside 3s ease;
}
@keyframes loaderItem1 {
	0%{left: 0; }
	70%{left: 0%; ;}
	80%{left: -50%;  }
	90%{left: -50%;}
	100%{left: -50%; }
}
@keyframes loaderItem2 {
	0%{left: 50%; }
	70%{left: 50%; }
	80%{left: 100%; }
	90%{left: 100%;}
	100%{left: 100%; }
}
@keyframes loaderInside {
	0%{opacity: 1;}
	70%{opacity: 1;}
	80%{opacity: 0; }
	100%{opacity: 0;}
}
@keyframes loader {
	0%{z-index: 99;opacity: 1;}
	90%{z-index:99;opacity: 1;}
	95%{z-index:99;opacity: 0;}
	100%{z-index: -99;}
}

@keyframes op {
	0%{opacity: 0;} 
	100%{opacity: 1;} 
}

	
	

/* 0.0 HEADER ********************************************/
header { 
	margin: 0;
    justify-content: space-between;
    align-items: center; 
    padding: 0;
    position: fixed;
    top: 0; 
    transition: transform 0.5s ease; /* Transición para la animación */
    z-index: 1; /* Asegura que el header esté por encima */
	width: 100vw; 
    height: auto; /* Alto del trapezoide */ 
	background-color: #fff;
	overflow-y: hidden;overflow-x: hidden;
}
.header-hidden {
    transform: translateY(-50%) rotateX(90deg); /* Oculta y rota el header */	
  
	  
}
.line{
	width: 100%;
	height: 5px;
	background-color: #d90000;
	margin-bottom: 5px;
}
.line0{
	width: 100%;
	height: 13px;
	background-color: #d90000;
}
.logo{
	width: 10%;
	height: 100%; 
}
.logo img{
    width: 99px;
	height: 99px; 
}
.navWeb{
	display: flex;
	width: 80%;
	margin: 0 10vw;
	height: auto; 
}
.nav-links {
    list-style-type: none;
    display: flex;
	padding-left: 133px;
	margin: auto;
	width: 80%;
}
.nav-links li {
    margin: 0 15px;
}
.nav-links a {
    text-decoration: none;
    color: #d90000;
    font-weight: bold;
	font-size: 21px;
}
.order-button { 
    color: #fff;
    border: none;
	font-size: 21px;
    padding: 10px 5px;
	width: 20vw;
	height: auto;
	margin:auto;
	border-radius: 13px;
    cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: 1.3s ease; 
	font-family: "Rubik";
	font-weight: 200; 
	position: relative; 
 	background: linear-gradient(90rad,orange,red,#d90000,#d90000,orange,#d90000,darkred);
    background-size: 400% 400%; 
    animation: btnContact 8s ease infinite;
}
.order-button:hover {
    background-color: #ffccbc; /* Color al pasar el cursor */
}
.SEO{
	width: 100%;  
	opacity: 0;
	height: 0;
	margin: 0;
	padding: 0;
} 
@keyframes btnContact { 
	 
    0%{background-position:0% 0%; opacity: 90%; }  
	25%{background-position:25% 25%; opacity: 85%;} 
	50%{background-position:75% 75%; opacity: 80%;}
	55%{background-position:100% 100%; opacity: 80%;}
	75%{background-position:80% 80%;  opacity: 80%;}
	80%{background-position:70% 70%; opacity: 85%;} 
    100%{background-position:0% 0%;  opacity: 90%; }
	
	
}
#sideNav{ 
		display: none; 
	}	
#mobileMenu{  
	display:none;
 
}	  



/*** AutoScroll  ****************************************************/

.scroll-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
	margin: 0; 
            scrollbar-width: none; /* Firefox */
}
.scroll-container::-webkit-scrollbar {
            display: none; /* Chrome, Safari */
        }
.section { 
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.section {
  object-fit: cover;
  object-position: center; 
} 
@keyframes hover {
0% {
      opacity: 0;
    }   
100% {
      opacity: 1;
    }
}
.text{
	animation: hover 0.3s ease;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.text h1{
	text-align: center; 
	height: 100%; 
	padding: 15%;
	font-size: 55px;
	font-family: 'Bebas Neue', cursive;
	 
}


/* 0.0 index ********************************************/
.index{
	width: 100%;
	height: 100vh;
	background-image: url("bg0.jpg");
	background-size: 100vw 100vh;
	position: relative;
}
.mask{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60);
	animation: op 2s forwards;
	display: none;
 
}
.space{
	width: 100%;
	height: 25vh;
}
.maskInside{
	width: 90%;
	height: auto;
	display: inline-flex;
	margin: 0 5%;
}
.maskItem{
	width: 50%;
	height: auto;
}
.maskItemImg{
	width: 50%;
	height: auto;
	text-align: center;
}
.title{
	color: darkred;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.description{
	color: darkred;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.slogan{
	color: darkred;
	font-size: 39px;   
	margin:  0;  
	
	font-family: "Freehand", cursive;
  font-weight: 400;
  font-style: normal;
}
.price{
	color: #fff;
	font-size: 33px;   
	margin: 21px 0;  
	background: linear-gradient(5rad,red,brown);
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	 border-radius: 21px;
width: 50%;
	padding: 33px 5px;
	text-align: center;
	
	 text-shadow: 
                1px 1px 0 #666,
                2px 2px 0 #666,
                3px 3px 0 #666,
                4px 4px 0 #666,
                5px 5px 0 #666; /* Sombras para el efecto 3D */
            transform: perspective(200px) rotateX(5deg); /* Añade profundidad */
}
.img {
	width: 333px;
	height: 333px;
	margin: auto;
}
.title1{
	color: #fff;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.description1{
	color: #fff;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.slogan1{
	color: #fff;
	font-size: 39px;   
	margin:  0;  
	
	font-family: "Freehand", cursive;
  font-weight: 400;
  font-style: normal;
}
.price1{
	color: darkred;
	font-size: 33px;   
	margin: 21px 0;  
	background: linear-gradient(5rad,#fff,#ccc);
 
	 
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	
	 border-radius: 21px;
width: 50%;
	padding: 33px 5px;
	text-align: center;
	
	 text-shadow: 
                0.5px 0.5px 0 #FF5D5D ,
                1.2px 1.2px 0 #FF5D5D ,
                2.3px 2.3px 0 #FF5D5D ,
                2.9px 2.9px 0 #FF5D5D ,
                3.5px 3.5px 0 #FF5D5D ; /* Sombras para el efecto 3D */
            transform: perspective(200px) rotateX(5deg); /* Añade profundidad */
}

/* 0.0 double ********************************************/
.double{
	width: 100%;
	height: 100vh;
	background-image: url("bg1.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask1{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60);
	animation: op 2s forwards;
	display: none;
}

/* 0.0 chicken ********************************************/
.chicken{
	width: 100%;
	height: 100vh;
	background-image: url("bg2.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask2{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60);
	animation: op 2s forwards;
	display: none;
}
 
/* 0.0 fries ********************************************/
.fries{
	width: 100%;
	height: 100vh;
	background-image: url("bg3.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask3{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60);
	animation: op 2s forwards;
	display: none;
}

/* 0.0 burrito ********************************************/
.burrito{
	width: 100%;
	height: 100vh;
	background-image: url("bg4.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask4{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60);
	animation: op 2s forwards;
	display: none;
}


/* 0.0 chocomilk ********************************************/
.chocomilk{
	width: 100%;
	height: 100vh;
	background-image: url("bg5.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask5{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60);
	animation: op 2s forwards;
	display: none;
}

/* 0.0 burger ********************************************/
.burger{
	overflow-x: hidden;
	width: 100%;
	height: 100vh;
	background-image: url(clasic.jpg);   
	background-size: 166vw 166vh; 
	/* background-size: cover;*/
	overflow-y: hidden;
    background-attachment: fixed; /* Para que la imagen no se mueva al hacer scroll */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}
.burgerInside{
	width: 80%;
	margin: 0 10%;
	height: 75vh;
	display: inline-flex;
}
.burgerItem{
	width: 50%;
	height: 100%; 
	padding: 0%;
	text-align: center;
}
.burgerTitle{ 
	text-decoration: none; 	
	text-justify: left;
	text-align: left; 
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
	margin: 2% 0% 0 0;
	font-size: 3em;
  background: -webkit-linear-gradient(0rad,red, brown);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	transform: scaleX(0.8);
} 
.burgerImg{
    width: 366px; /* Ajusta como necesites */
	height: 366px;  
	margin: auto;
} 
.stars{
    width: 125px; /* Ajusta como necesites */
	height: 25px;  
	margin: auto;
} 
.burgerText{
  background: -webkit-linear-gradient(0rad,#666, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
	text-decoration: none; 
	font-size: 21px;    
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;  
    background-color: rgba(0, 0, 0, 0.0); /* Fondo semi-transparente */
       position: relative;
	margin: 5px auto;
	text-justify: left;
	text-align: left; 
}
.test {
    display: flex;                /* Usar flexbox */
    justify-content: right;      /* Centrar horizontalmente */
    align-items: right;          /* Centrar verticalmente */
    height: auto;                 /* Usar el 100% de altura del contenedor */ 
}
.testimonials{
  background: -webkit-linear-gradient(0rad,blue, dodgerblue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
	text-decoration: none; 
	font-size: 17px;    
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;  
    background-color: rgba(0, 0, 0, 0.0); /* Fondo semi-transparente */
	margin: 5px auto; 
	text-justify: right;
	text-align: right;  
}

/* 0.0 ********************************************/
.bottom{
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: #fff;
	border-top: 1px solid #d90000;
	width: 100%;
	height: 100vh;
} 
.bottomInside{
	width: 90vw;
	height: 70vh;
	margin: 0vh 5vw;
	color: #fff;
    border: none;
	font-size: 21px;  
 	background: linear-gradient(90rad,orange,red,#d90000,#d90000,red,#d90000,darkred);
    background-size: 400% 400%; 
    animation: btnContact 21s ease infinite;
	border-radius: 55px;
	
}
.bottomcontainer{
	width: 100%;
	height: auto; 
	display: grid;
}
.text{
	width: 90%;
	height: 20vh;
	margin: 3% 5% 1% 5%;
}
.dedication{
	font-size: 33px; 
color: #fff;
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin: 0;
  
}
.autor{
	font-size: 21px;
margin: 0;
 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  color: #fff;
}
.bottomItems{
	display: flex;
	width: 100%;
	height: auto;
}
.bottomItem{
	width: 24%;
	margin: 0.5% ;
	height: auto;  
	border-radius: 17px;
	display: grid;
	 
}
.bottomItem p{ 
		font-size: 33px; 
color: #fff;
 margin: 3%;
}
.bottomItem a{ 
	text-decoration: none;
		font-size: 21px; 
color: #fff;
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin: 3%;
}
.bottomPalms{
	width: 100%;
	height: 10vh;  
}
.bottomPalms img{
	width: 100%;
	height: 10vh; 
}
.flex{
	display: flex;
	height: 33px;
}
.flex img{
	width: 33px;
	height: 33px;
}
.flex a{ 
	text-decoration: none;
		font-size: 21px; 
color: #fff;
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin:auto 3px;
}
.logo0{
	width: 233px;
	height: 233px;
	margin: 0;
}

/* 0.0 ********************************************/
.buttons{overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 15vh; 
	position: fixed;
	bottom: -7.5vh;
	right: 0;
 	background: linear-gradient(45rad,orange,red,#d90000,red,#d90000,darkred);
    background-size: 400% 400%; 
    animation: btnContact 3s ease infinite;
	transition: 1s ease;
	
}
.band{
	width: 100%;
	height: 7.5vh; 
	position: relative;
	margin: 0;
	background-color: white;
	border-top: 1px solid red; 
}
.band p{
	width: 133%;
	font-size: 33px;
	margin: 0;
	padding: 0;
	color: #333; 
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
  	font-variation-settings:
    "wdth" 100,
    "YTLC" 500;  
    animation: deslizar 33s linear infinite;
}
@keyframes deslizar {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}
.buttonsFlex{
	display: inline-flex;
	width: 50%;
}
.call{
	display:flex;
	width: 35%;
	height: 7.5vh;   
	margin: auto 7.5%;
	text-decoration: none;
} 
.call img{
	width: 7vh;
	height: 7vh;
	margin: auto;
}
.call p{
	text-decoration: none;
	width: 133%;
	font-size: 21px;
	margin: 13px auto auto auto;
	padding: 0;
	color: #fff; 
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
  	font-variation-settings:
    "wdth" 100,
    "YTLC" 500;   
}


 /** PowerBy   *********************************/
.powerby{overflow-x: hidden;
	width: 100%;
	height: auto;
}
.powerbyInside{
	display: grid;
	width: 80%;
	margin: 0 10%;
}
.powerbyTop{
	width: 100%;
	height: 10vh;
	display: inline-flex;
}
.powerbyTop img{
	width: 133px;
	height: 21px;
	margin: 8px 3px auto 3px;
}
.powerby a,p{
	color: #666;
	text-decoration: none;
	font-size: 21px;   
	margin: auto 3px;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}
.powerbyBottom{
	width: 100%;
	height: 20vh;
}
/* Mobile V 0.0.1  */
@media (max-width: 767px){
	
.loader img {
	width: 133px;
	height: 133px;
	position: fixed;
	z-index: 99;
	left: 35%;
	top: 25%;opacity: 0;
	animation: loaderInside 3s ease;
}	
	
	/* 0.0 HEADER ********************************************/
header { 
    justify-content: space-between;
    align-items: center; 
    padding: 0;
    position: fixed;
    top: 0; 
    transition: transform 0.5s ease; /* Transición para la animación */
    z-index: 10; /* Asegura que el header esté por encima */
	width: 100vw;  
	background-color: #fff;
	height: 0vh;
}
.header-hidden {
    transform: translateY(-50%) rotateX(90deg); /* Oculta y rota el header */	
  
	  
}
.line{
	width: 100%;
	height: 5px;
	background-color: #d90000;
	margin-bottom: 5px;
	margin-top: 21px;
}
.line0{
	width: 100%;
	height: 13px;
	background-color: #d90000;
}
.logo{
	width: 10%;
	height: 100%; 
	margin: 1vh 1vw auto auto;
	position: fixed;
}
.logo img{
	top: 1vh;
    width: 55px;
	height: 55px; 
}
#mobileMenu{  
	display: flex;
	margin: auto 1% auto auto;
	padding: 0;
	text-decoration: none;
	position: fixed; 
	right: 2vw;
	top: 1vh;
	width: auto;
	height: auto;
}	
#menu{
	border-radius: 5px;
	width: 55px;
	height: 55px;
	padding: 0;
	margin: 0;
	}	
.navWeb{
	display: flex;
	width: 80%;
	margin: 0 10vw;
	height: auto; 
}
.nav-links {
    list-style-type: none;
    display: none;
	padding-left: 133px;
	margin: auto;
	width: 0%;
}
.nav-links li {
    margin: 0 15px;
}
.nav-links a {
    text-decoration: none;
    color: #d90000;
    font-weight: bold;
	font-size: 21px;
}
.order-button {
    background-image: linear-gradient(#d90000,#d90000,orange);
    color: #fff;
    border: none;
	font-size: 21px;
    padding: 10px 5px;
	width: 35vw;
	height: auto;
	margin:8px auto auto auto;
	border-radius: 13px;
    cursor: pointer;
	text-align: center;
	text-decoration: none; 
}
.order-button:hover {
    background-color: #ffccbc; /* Color al pasar el cursor */
}
.SEO{ 
	
} 
	
/*SIDENAV for mobile*/	
#sideNav{
		width: 100%;
		height: 100%; 
		display: block;
		position: fixed; 
		top: 0;
	    transition:  0.3s ease;
		background-color: #fff;
	   margin-left: 100vw;
	z-index: 99;
	}	
#sideNavContent{
		width: 100%;
		height: 100%;   
		background-color: transparent; 
	}
.sideNavInside{
		width: 100%;
		height: 100%;
		margin: 0; 
		overflow: hidden; 
		background-color: transparent;
	}
.sideNavTop{
		width: 100%;
		height: auto;
		background-image: linear-gradient(rgba(255,255,255,1),rgba(255,255,255,1));
		backdrop-filter: blur(2px);
		overflow-y: hidden;
	}
.sideNavTopBar{
		width: auto;
		height: auto; 
		margin: 8px;
		float: right;
		overflow-y: hidden;
		display: inline-flex;
	}
.sideNavTopBarBall{
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(0rad,#ccc,#eee);
		border-radius: 50%;
		margin: 5px;
	}
.sideNavTopBarCloseBall{
		margin: 8px 5px 5px 5px;
		width: 33px;
		height: 33px;
		float: right;
		background-image: linear-gradient(45rad,#c90000,#d90000);
		border-radius: 5px;
		text-decoration: none;
	display: flex;
	}
.sideNavTopBarCloseBall p{ 
		margin: 1px auto auto auto;
	 	color: white;
		display: block;
	    font-size: 1.5em;
		font-weight: 600;	
	}	
.sideNavBody{ 
	width: 200%;
		height: auto;
		background-color: transparent;
		display:inline-grid;
		border-top: 1px solid #ddd;
		overflow-y: hidden; 
	}
.sideNavimg{
		width: 30vh;
		height:30vh;
	margin: 8px auto 0 auto;
	} 	
.sideNaveItems{
		width: 100%;
		height:100vh;
		background-color: #eee; 
		position: relative;
		overflow: hidden;
	text-justify: right;
	text-align: right; 
	display: grid;
	}
.sideNavItem{  
		height: 60px;
	width: 50%;
		display: flex;
		text-decoration: none; 
		overflow-y: hidden; 
	margin:  13px 21px;
	padding: 0px;
	}
.sideNavItem img{
		overflow-y: hidden;
		width: 55px;
		height: 55px;
		padding: 5px 5px;
	}
.sideNavItem p{
		margin: auto;
		overflow-y: hidden;
		color: #666; 
		font-weight: 700;
		font-size: 21px; 
	} 
.sideNavActualItem{
		width: 99%; 
		height: 50px;
		display: inline-flex;
		margin: 3px 0px;
		padding: 5px;
		background-color: white;
		text-decoration: none; 
		overflow-y: hidden;
		border-radius: 8px;
	}
.sideNavActualItem img{
		overflow-y: hidden;
		width: 133px;
		height: 133px;
		padding: 5px 5px;
	}
.sideNavActualItem p{	
		margin-top: 8px;
		overflow-y: hidden;
		color: #333;
		padding: -1px 5px 0px 5px;
		font-weight: 700;
		font-size: 21px;
		font-family: 'Rubik', sans-serif;
	} 
.sideNavActualItem p:hover{
		color: green;
		transition: ease 1s; 
	}
.sideNavItem p:hover{
		color: #999; 
		transition: ease 1s;
	} 
	
	
/* 0.0 index ********************************************/
.index{
	width: 100%;
	height: 100vh;
	background-image: url("mbg0.jpg");
	background-size: 100vw 100vh;
	position: relative;
}
.mask{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60);
	animation: op 2s forwards;
	display: none;
 
}
.space{
	width: 100%;
	height: 8vh;
}
.maskInside{
	width: 98%;
	height: auto;
	display: inline-grid;
	margin: 0 1%;
}
.maskItem{
	width: 100%;
	height: auto;
	text-align: center;
}
.maskItemImg{
	width: 100%;
	height: auto;
	text-align: center;
}
.title{
	color: darkred;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.description{
	color: darkred;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.slogan{
	color: darkred;
	font-size: 21px;   
	margin:  0;  
	
	font-family: "Freehand", cursive;
  font-weight: 400;
  font-style: normal;
}
.price{
	color: #fff;
	font-size: 21px;   
	margin:  0 auto;  
	background: linear-gradient(5rad,red,brown);
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	 border-radius: 21px;
width: 50%;
	padding: 3px 5px;
	text-align: center;
	 
}
.img {
	width: 266px;
	height: 266px;
	margin: auto;
}
.title1{
	color: #fff;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.description1{
	color: #fff;
	font-size: 39px;   
	margin:  0 auto;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
	
}
.slogan1{
	color: #fff;
	font-size: 21px;   
	margin:  0;  
	
	font-family: "Freehand", cursive;
  font-weight: 400;
  font-style: normal;
}
.price1{ 
	font-size: 21px;   
	margin:  0 auto;  
	background: linear-gradient(5rad,#fff,#ccc);
 
	 
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
	
	 border-radius: 21px;
width: 50%;
	padding: 3px 5px;
	text-align: center; 
}

/* 0.0 double ********************************************/
.double{
	width: 100%;
	height: 100vh;
	background-image: url("mbg1.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask1{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60); 
	display: none;
}

/* 0.0 chicken ********************************************/
.chicken{
	width: 100%;
	height: 100vh;
	background-image: url("mbg2.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask2{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60); 
	display: none;
}
 
/* 0.0 fries ********************************************/
.fries{
	width: 100%;
	height: 100vh;
	background-image: url("mbg3.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask3{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60); 
	display: none;
}

/* 0.0 burrito ********************************************/
.burrito{
	width: 100%;
	height: 100vh;
	background-image: url("mbg4.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask4{
	width: 100%;
	height: 100vh;
	background-color: rgba(255,255,255,0.60); 
	display: none;
}
	
 
/* 0.0 chocomilk ********************************************/
.chocomilk{
	width: 100%;
	height: 100vh;
	background-image: url("mbg5.jpg");
	background-size: 100vw 100vh;
	position: relative
}
.mask5{
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.60); 
	display: none;
}

	
/* 0.0 best ********************************************/
.best{ 
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
	height: 100vh; 
	background-color: #fff;
} 
.bestCircle{
	
	
	animation: bg 1s forwards; /* Transición suave para el fondo */
	width: 70vw;
	height: 70vh;
	margin-left: 15vw;
	border-top-left-radius: 1000px;
	border-top-right-radius: 1000px; 
	bottom: -30vh;
	 margin-top: 0vh;
}
.bestCircle:hover{
	
	background-image: linear-gradient(0rad,rgba(222,222,222,0.0),rgba(222,222,222,0.5),rgba(222,222,222,1));
	width: 40vw;
	height: 90vh;
	margin-left: 30vw;
	border-top-left-radius: 333px;
	border-top-right-radius: 333px; 
	margin-top: 0vh;
	position: relative;
	transition: 0.6s ease; 
	z-index: 0;
	bottom: 0;
}
.best a{
  background: -webkit-linear-gradient(0rad,#eee, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    position: fixed;  
    mix-blend-mode: difference;
	top: 25vh;
	text-decoration: none; 
	font-size: 24px;    
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal; 
	z-index: 1; 
	width: 90%;
	margin-left: 5%;  
            background-color: rgba(0, 0, 0, 0.0); /* Fondo semi-transparente */
            padding: 10px; 
	text-align: center;
	display: none;
}
.best a:hover  ~ .bestCircle{ 
 
	background-image: linear-gradient(0rad,rgba(222,222,222,0.0),rgba(222,222,222,0.5),rgba(222,222,222,1));
	width: 40vw;
	height: 90vh;
	margin-left: 30vw;
	border-top-left-radius: 333px;
	border-top-right-radius: 333px; 
	margin-top: 0vh;
	position: relative;
	transition: 0.6s ease; 
	z-index: 0;
	bottom: 0;
}
	
/* 0.0 burger ********************************************/
.burger{
	overflow-x: hidden;
	width: 100%;
	height: 100vh;
	background-image: url(clasic.jpg);   
	background-size: 166vw 166vh; 
	/* background-size: cover;*/
	overflow-y: hidden;
    background-attachment: fixed; /* Para que la imagen no se mueva al hacer scroll */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}
.burgerInside{
	width: 96%;
	margin: 0 2%;
	height: auto;
	display: inline-grid;
}
.burgerItem{
	width: 100%;
	height: auto; 
	padding: 0%;
	text-align: center;
}
.burgerTitle{ 
	text-decoration: none; 	
	text-justify: left;
	text-align: left; 
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
	margin: 2% 0% 0 0;
	font-size: 2em;
  background: -webkit-linear-gradient(0rad,red, brown);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	transform: scaleX(0.8);
} 
.burgerImg{
    width: 266px; /* Ajusta como necesites */
	height: 266px;  
	margin: auto;
} 
.stars{
    width: 250px; /* Ajusta como necesites */
	height: 50px;  
	margin: auto;
} 
.burgerText{
  background: -webkit-linear-gradient(0rad,#666, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
	text-decoration: none; 
	font-size: 21px;    
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;  
    background-color: rgba(0, 0, 0, 0.0); /* Fondo semi-transparente */
       position: relative;
	margin: 5px auto;
	text-justify: left;
	text-align: left; 
}
.test {
    display: flex;                /* Usar flexbox */
    justify-content: right;      /* Centrar horizontalmente */
    align-items: right;          /* Centrar verticalmente */
    height: auto;                 /* Usar el 100% de altura del contenedor */ 
}
.testimonials{
  background: -webkit-linear-gradient(0rad,blue, dodgerblue);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
	text-decoration: none; 
	font-size: 17px;    
	font-family: "Special Gothic Expanded One", sans-serif;
  font-weight: 400;
  font-style: normal;  
    background-color: rgba(0, 0, 0, 0.0); /* Fondo semi-transparente */
	margin: 5px auto; 
	text-justify: right;
	text-align: right;  
}
	
/* 0.0 ********************************************/
.bottom{
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: #fff;
	border-top: 1px solid #d90000;
	width: 100%;
	height: auto;
} 
.bottomInside{
	width: 90vw;
	height: auto;
	margin: 5vh 5vw;
	color: #fff;
    border: none;
	font-size: 21px;  
 	background: linear-gradient(90rad,orange,red,#d90000,#d90000,red,#d90000,darkred);
    background-size: 400% 400%; 
    animation: btnContact 21s ease infinite;
	border-radius: 55px;
}
.bottomcontainer{
	width: 100%;
	height: auto; 
	display: grid;
}
.text{
	width: 90%;
	height: 20vh;
	margin: 3% 5% 1% 5%;
}
.dedication{
	font-size: 21px; 

 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin: 5% 0 0 0;
  
}
.autor{
	font-size: 13px;
margin: 0;
 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
  
}
.bottomItems{
	display: grid;
	width: 100%;
	height: auto;
}
.bottomItem{
	width: 99%;
	margin: 0.5% ;
	height: auto;  
	border-radius: 17px;
	display: grid;
	 
}
.bottomItem p{ 
		font-size: 21px; 
color: #fff;
 margin: 3%;
}
.bottomItem a{ 
	text-decoration: none;
		font-size: 17px; 
color: #fff;
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin: 3%;
}
.bottomPalms{
	width: 100%;
	height: 10vh;  
}
.bottomPalms img{
	width: 100%;
	height: 33px; 
}
.flex{
	display: flex;
	height: 33px;
}
.flex img{
	width: 33px;
	height: 33px;
}
.flex a{ 
	text-decoration: none;
		font-size: 21px; 
color: #fff;
 font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
 
 margin:auto 3px;
}
.logo0{
	width: 133px;
	height: 133px;
	margin: 0;
}
	
	/* 0.0 ********************************************/
.buttons{
	width: 100%;
	height: 15vh; 
	position: fixed;
	bottom: -7.5vh;;
	right: 0;
 	background: linear-gradient(45rad,orange,red,#d90000,red,#d90000,darkred);
    background-size: 400% 400%; 
    animation: btnContact 3s ease infinite;
}
.band{
	width: 100%;
	height: 7.5vh; 
	position: relative;
	margin: 0;
	background-color: white;
	border-top: 1px solid red; 
}
.band p{
	width: 200%;
	font-size: 27px;
	margin: 0;
	padding: 0;
	color: #333; 
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
  	font-variation-settings:
    "wdth" 100,
    "YTLC" 500;  
    animation: deslizar 33s linear infinite;
} 
.buttonsFlex{
	display: inline-flex;
	width: 100%;
}
.call{
	display:flex;
	width: 35%;
	height: 7.5vh;   
	margin: auto 7.5%;
	text-decoration: none;
} 
.call img{
	width: 7vh;
	height: 7vh;
	margin: auto;
}
.call p{
	text-decoration: none;
	width: 133%;
	font-size: 21px;
	margin: 13px auto auto auto;
	padding: 0;
	color: #fff; 
	font-family: "Nunito Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 700;
  	font-style: normal;
  	font-variation-settings:
    "wdth" 100,
    "YTLC" 500;   
}


 /** PowerBy   *********************************/
.powerby{
	width: 100%;
	height: auto;
}
.powerbyInside{
	display: grid;
	width: 80%;
	margin: 0 10%;
}
.powerbyTop{
	width: 100%;
	height: 10vh;
	display: inline-flex;
}
.powerbyTop img{
	width: 133px;
	height: 21px;
	margin: 8px 3px auto 3px;
}
.powerby a,p{
	color: #666;
	text-decoration: none;
	font-size: 14px;   
	margin: auto 3px;
	 font-family: "New Rocker", system-ui;
  font-weight: 400;
  font-style: normal;
}
.powerbyBottom{
	width: 100%;
	height: 20vh;
}
 

/* Mobile V 0.0.1  */

}