@charset "utf-8";
/* CSS Document */

body {
	margin: 0em auto;
	overflow-x:hidden;
    background-color:#fff;
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "carson";
    src: url(../fonts/carson.otf) format("opentype")
}

@font-face {
    font-family: "alsscrp";
    src: url(../fonts/alsscrp.ttf) format("truetype")
}


@font-face {
    font-family: "magetasRegu";
    src: url(../fonts/magetasRegu.otf) format("opentype")
}

@font-face {
    font-family: "Roboto-Light";
    src: url(../fonts/Roboto-Light.ttf) format("truetype")
}


@font-face {
    font-family: "raleway";
    src: url(../fonts/raleway.ttf) format("truetype")
}



@font-face {
    font-family: "merriBold";
    src: url(../fonts/merriBold.otf) format("opentype")
}

@font-face {
    font-family: "merri";
    src: url(../fonts/merri.otf) format("opentype")
}


@font-face {
    font-family: "Dulcelin";
    src: url(../fonts/Dulcelin.otf) format("opentype")
}


@font-face {
    font-family: "hand";
    src: url(../fonts/hand.otf) format("opentype")
}



a{
font-family: "carson";	
}


h1{
font-family: "magetasRegu";	
}



h2{
font-family: "carson";	
}


h3{
 font-family: "Roboto-Light";
}





#capa00Body{
	position: relative;
	width: 100%;
	height: auto;
    
	
}


.fila1Capa00Body{
	position: relative;
	width: 100%;
	height: 30px;background-color: #FFF;

}

.fila2Capa00Body{
	position: relative;
	width: 100%;
	height: auto;
	background-color: #FFF;
	display: inline-table;
}
	.col1Capa00Body{
		float: left;
		width: 40%;
		height: 600px;
		background-color: #FFF;
	}


	.col2Capa00Body{
		float: left;
		width: 60%;
		height: auto;
	}

	.youLink{
		position: relative;
		width: 70%;
		height: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
        padding-top: 100px;
	}

	.txt1Capa00{
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: 50px;
		width: 80%;
		font-size: 4em;
        color: #000;

	}

	.txt2Capa00{
		position: relative;
		
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 80%;
		font-family: "Roboto-Light";
		font-size: 1.6em;
		color: #272727;

	}



#capa1Body{
	width:100%;
	height:750px;
	background-color:#83a1b5;
	background-size:cover;
}


	.colCapa1Body{
		float:left;
		width:50%;
		height:100%;
		background-color:transparent;
		background-size:cover
	}
	
	

		.txt1Capa1Body{ position:relative;   font-family: Dulcelin; color:#fff; font-size:4em;
		 width:90%; text-align:right; padding-top:50px;
		}
		.txt2Capa1Body{ position:relative;   font-family: "raleway"; color:#fff; font-size:1.6em;
		 width:90%; text-align:right;
		}
		
		.txt3Capa1Body{ position:relative;   font-family: "Roboto-Light"; color:#fff; font-size:1.5em;
		 width:77%; text-align:right; padding-left:100px
		}
	
	

#capa2Body{
	width:100%;
	height:820px;
	background-size:cover;
}


	.colCapa2Body{
		float:left;
		width:50%;
		height:100%;
		background-color:transparent;
		background-size:cover
	}
	
		.txt1Capa2Body{ position:relative;   font-family: Dulcelin; color:#fff; font-size:4em;
		 width:90%; text-align:left; padding-top:50px;padding-left:50px
		}
		.txt2Capa2Body{ position:relative;   font-family: "raleway"; color:#FFC; font-size:1.6em;
		 width:90%; text-align:left;padding-left:50px
		}
		
		.txt3Capa2Body{ position:relative;   font-family: "Roboto-Light"; color:#fff; font-size:1.5em;
		 width:77%; text-align:left; padding-left:50px
		}

	

#capa3Body{
	position:relative;
	width:100%;
	height:auto; background-color:#333333
}


		.filaCapa3Body{ position:relative; width:100%; height:auto;overflow-x:scroll; overflow-y:hidden; top:-15px}
    
		.tabla{
			position:relative;
			height:100%
		}
	
	
    	.celdaFilaCapa3Body{  width:450px; height:600px; background-size:cover; background-color:#000}
    				.velo{ position:absolute; display:inline; width:33.3%; height:100%;
					/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#771f17+9,771f17+9,844947+82&1+8,0.08+81 */
background: -moz-linear-gradient(left, rgba(119,31,23,1) 8%, rgba(119,31,23,0.99) 9%, rgba(132,72,70,0.08) 81%, rgba(132,73,71,0.08) 82%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(119,31,23,1) 8%,rgba(119,31,23,0.99) 9%,rgba(132,72,70,0.08) 81%,rgba(132,73,71,0.08) 82%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(119,31,23,1) 8%,rgba(119,31,23,0.99) 9%,rgba(132,72,70,0.08) 81%,rgba(132,73,71,0.08) 82%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#771f17', endColorstr='#14844947',GradientType=1 ); /* IE6-9 */
				}
							.txt1Capa3Body{ position:relative;   font-family: "merriBold"; color:#fff; font-size:2em;
					 width:90%; text-align:left; padding-top:50px;padding-left:20px
					}
					.txt2Capa3Body{ position:relative;   font-family: "raleway"; color:#fff; font-size:1.6em;
					 width:90%; text-align:left;padding-left:20px
					}
					
					.txt3Capa3Body{ position:relative;   font-family: "Roboto-Light"; color:#fff; font-size:1.5em;
					 width:77%; text-align:left; padding-left:20px
					}
					
					.txt4Capa3Body{ position:relative;   font-family: "Roboto-Light"; color:#fff; font-size:1.5em;
					 width:77%; text-align:left; padding-left:20px; cursor:pointer
					}
					
						.txt4Capa3Body:hover{ color:#2b2b2b}
						
						
						
						.btnVer{
							top:0px;
							position:relative;
							display:block;
							margin-left:15px; font-family:raleway; border:none; cursor:pointer; outline:none;
							margin-right:auto; width:70px; height:30px; background-color:transparent; color:#FFF; font-size:1.4em
						}

   
   			.filaCapa3Body::-webkit-scrollbar-track{background-color:#cbcbcb;border-radius: 0px; }
			.filaCapa3Body::-webkit-scrollbar{width: 5px; height:25px; background-color: transparent;}
			.filaCapa3Body::-webkit-scrollbar-thumb{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);background-color:#b3114c;  
			height:100px; border-radius: 0px; background-image:url(../imagenes/doubleArrow2.png); background-repeat:no-repeat;
			background-position:center;
			-moz-background-size: contain; -webkit-background-size: contain; -o-background-size: contain;	
			}
					
			.filaCapa3Body::-webkit-scrollbar-thumb:hover{background: #420101;  background-image:url(../imagenes/doubleArrow2.png); 
			background-repeat:no-repeat; background-position:center;-moz-background-size: contain; 
			-webkit-background-size: contain; -o-background-size: contain; }
			
			/************************FIN SCROLL****************************/
   
    

#capaAdBody{
	width:100%;
	height:600px;
	background-color:#fff;
	background-size:cover;
	/*background-image:url(../imagenes/car.png)*/
}


	.fila1CapaAdBody{ position:relative; width:100%; height:100px;}
	
		.txt1CapaAdBody{ position:relative; display:inline-block; font-family: Dulcelin; color:#212121; font-size:4em;
					 width:100%; text-align:center; top:-100px}
					 
	.fila2CapaAdBody{ position:relative; width:100%; height:auto; background-color:#333}
	
			.col1CapaAd{float:left; width:49.5%; height:250px; border:solid;border-width:0px 3px 0px 0px;
			border-color:#2e2e2e; }
			
			
				.txt2CapaAdBody{ position:relative; display:block; margin-left:auto; margin-right:50px; font-family: "raleway"; 
				color:#212121; font-size:1.4em; width:80%; right:0px; text-align:right; top:20px; z-index:2000}
			
			
			.col2CapaAd{float:left; width:50%; height:250px; }
			
					.opcionesCapaAd{
						position:relative;
						list-style:none;
						font-family: "raleway";font-size:1.4em;
						list-style-image:url(../imagenes/list.png); top:20px 
						
					}
			
			
			

#capa4Body{
	width:100%;
	height:600px;
	background-color:#000;
	background-size:cover;
	background-image:url(../imagenes/imgCapa3Body.png);
	background-attachment:fixed
}

		.txt1Capa4Body{ position:relative; display:inline-block;  font-family: "merri";  color:#fff; font-size:3em;
		 width:100%; text-align:center; padding-top:50px;
		}
		.txt2Capa4Body{ position:relative; display:inline-block;   font-family: "Roboto-Light"; color:#fff; font-size:1.6em;
		 width:100%; text-align:center; 
		}
		
		.linea3{position:relative; width:300px; height:3px; background-color:#fff; border:none}

		
		.txt3Capa4Body{ position:relative;display:block;    font-family: "Roboto-Light"; color:#fff; font-size:1.3em;
		 width:80%; text-align:center; margin-left:auto; margin-right:auto
		}

		.btnVer1{background-color:#992c22; width:200px; height:55px; border:none; font-size:1.4em; position:relative;
		 display:block; margin-left:auto; margin-right:auto; color:#FFF; outline:none;
		 -webkit-transition: .35s ease-in-out;
	  transition: .35s ease-in-out;}
			
			.btnVer1:hover{background-color:#2b2b2b; color:#FF0}




#capa5Body{
	position:relative;
	width:100%;
	height:450px;
	background-color:#fff;
	background-size:cover;
}


	#veloMap1{
	position:absolute; top:75px; width:300px; height:185px; background:rgba(0,0,0,0.8); border-radius: 0px 150px 0px 0px; z-index:2000	
	}
	
	#veloMap2{
	position:absolute; top:260px; width:300px; height:40px; background:rgba(184,19,27,0.8);border-radius: 0px 0px 10px 0px;  z-index:2000	
	}
	
			.txt1CapaMap{
				position:absolute; top:-125px; font-family:jet; font-size:6.5em; color:#fff; left:110px;	
			}
			
			.txt2CapaMap{
				position:absolute; top:-16px; font-family:carson; font-size:1.37em; color:#fff; left:110px;
			}


			
	#map_canvas{
	position:relative
	top:0px; 
	left:0px; 
	width:100%; 
	height:100%;
	}	


/*Celular portrait*/
@media screen and (max-width: 360px) {
#S1{display:inline}




.col1Capa00Body{position: relative; width: 100%; height: auto;
}


.col2Capa00Body{position: relative; width: 100%; height: auto;
}


.youLink{
	position: relative;
	width: 100%;
	height: 90%;
}

.txt1Capa00{
	width: 80%;
	font-size: 2em;
	color: #000; text-align: center;

}

.txt2Capa00{
	width: 80%;
	font-size: 1.2em;
	text-align: center;

}


.dot{ padding-right:10px}
.imgSlide{ width:auto; height:100%; }
.txt1Slider1{ width:30%; font-size:2.7em}
	.prev, .next { display:none}
	.dots{ display:inline;}
	
	
	
	
	
#capa1Body{height:auto;}
	.colCapa1Body{ position:relative; width:100%; background-color:#b8131b}
		.txt1Capa1Body{font-size:3em; width:100%; text-align:center;}
		.txt2Capa1Body{width:90%; text-align:center; font-size:1.6em; display:block; margin-left:auto; margin-right:auto}
		.txt3Capa1Body{width:90%; text-align:center; display:block; margin-left:auto; margin-right:auto; padding-left:inherit}
	.bike{ display:none}


#capa2Body{ display:none}

    	.celdaFilaCapa3Body{  width:350px; height:450px; background-size:cover; background-color:#000}



#capaAdBody{ display:none}


	
#capa4Body{height:auto;}
	.fila1Capa4Body{height:auto;}
	.filaXCapa2{position:relative; height:100px;}

	#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}

	.txt1Capa4Body{font-size:2em;}


#footer{height:350px;}

}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
#S2{display:inline}





.col1Capa00Body{position: relative; width: 100%; height: auto;
}


.col2Capa00Body{position: relative; width: 100%; height: auto;
}


.youLink{
	position: relative;
	width: 100%;
	height: 90%;
}

.txt1Capa00{
	width: 80%;
	font-size: 2em;
	color: #000; text-align: center;

}

.txt2Capa00{
	width: 80%;
	font-size: 1.2em;
	text-align: center;

}


.dot{ padding-right:10px}
.imgSlide{ width:auto; height:100%; }
.txt1Slider1{ width:30%; font-size:3.5em}
	.prev, .next { display:none}
	.dots{ display:inline;}
	
#capa1Body{height:auto;}
	.colCapa1Body{ position:relative; width:100%; background-color:#b8131b}
		.txt1Capa1Body{font-size:3em; width:100%; text-align:center;}
		.txt2Capa1Body{width:90%; text-align:center; font-size:1.6em; display:block; margin-left:auto; margin-right:auto}
		.txt3Capa1Body{width:90%; text-align:center; display:block; margin-left:auto; margin-right:auto; padding-left:inherit}
	.bike{ display:none}


#capa2Body{height:auto;}
	.colCapa2Body{ position:relative; width:100%; height:auto}
	


#capaAdBody{ display:none}


	
#capa4Body{height:auto;}
	.fila1Capa4Body{height:auto;}
	.filaXCapa2{position:relative; height:100px;}

	#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}
	.txt1Capa4Body{font-size:2em; width:90%}

#footer{height:300px;}

}

/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 960px) {
#S3{display:inline}




.col1Capa00Body{position: relative; width: 100%; height: auto;
}


.col2Capa00Body{position: relative; width: 100%; height: auto;
}


.youLink{
	position: relative;
	width: 100%;
	height: 90%;
}

.txt1Capa00{
	width: 80%;
	font-size: 2em;
	color: #000; text-align: center;

}

.txt2Capa00{
	width: 80%;
	font-size: 1.2em;
	text-align: center;

}

.dot{ padding-right:10px}
	.imgSlide{width:auto; height:100%;}


.txt1Slider1{ width:30%; font-size:3.5em}
	.prev, .next { display:none}
	.dots{ display:inline;}
	
#capa1Body{height:auto;}
	.colCapa1Body{ position:relative; width:100%; background-color:#b8131b}
		.txt1Capa1Body{font-size:3em; width:100%; text-align:center;}
		.txt2Capa1Body{width:90%; text-align:center; font-size:1.6em; display:block; margin-left:auto; margin-right:auto}
		.txt3Capa1Body{width:90%; text-align:center; display:block; margin-left:auto; margin-right:auto; padding-left:inherit}
	.bike{ display:none}


#capa2Body{height:auto;}
	.colCapa2Body{ position:relative; width:100%; height:auto}

#capa3Body{height:auto;display:none}
		.filaCapa3Body{ height:auto;}
    	.celdaFilaCapa3Body{ position:relative; width:100%; height:300px}
		.velo{width:100%;}
		
		
#capaAdBody{ display:none}


	
#capa4Body{height:auto;}
	.fila1Capa4Body{height:auto;}
	.filaXCapa2{position:relative; height:100px;}

	#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}


#footer{height:300px;}
}

/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
@media screen and (min-width: 961px) and (max-width: 1210px) {
#S4{display:inline}
.txt1Slider1{ width:30%; font-size:3.5em}
	.prev, .next { display:none}
	.dots{ display:inline;}
	
#capa1Body{height:auto;}
	.colCapa1Body{ position:relative; width:100%; background-color:#b8131b}
		.txt1Capa1Body{font-size:3em; width:100%; text-align:center;}
		.txt2Capa1Body{width:90%; text-align:center; font-size:1.6em; display:block; margin-left:auto; margin-right:auto}
		.txt3Capa1Body{width:90%; text-align:center; display:block; margin-left:auto; margin-right:auto; padding-left:inherit}
	.bike{ display:none}

#capa2Body{height:auto;}
	.colCapa2Body{ position:relative; width:100%; height:auto}

#capa3Body{height:auto;display:none}
		.filaCapa3Body{ height:auto;}
    	.celdaFilaCapa3Body{ position:relative; width:100%; height:300px}
		.velo{width:100%;}

#capaAdBody{ display:none}


	
#capa4Body{height:auto;}
	.fila1Capa4Body{height:auto;}
	.filaXCapa2{position:relative; height:100px;}

	#logoMap{ width:100px; height:auto; left:10px; top:80px; position:absolute;}
	#veloMap1{width:130px;}
	#veloMap2{width:130px;}
			.txt2CapaMap{left:10px;	}


#footer{height:300px;}


}


/*pantallas grandes*/
@media screen and (min-width: 1211px) {
#S5{display:inline}
.container{position:relative; display:block; width:84.5em; height:700px; margin-left:auto; margin-right:auto;}
}




/* Estilos para el scroll horizontal */
.grid-productos {
    display: flex;
    overflow-x: auto;        /* Scroll horizontal */
    overflow-y: hidden;      /* Sin scroll vertical */
    gap: 20px;
    padding: 20px;
    scroll-snap-type: x mandatory;  /* Opcional: para que los productos "encajen" al hacer scroll */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    white-space: nowrap;      /* Evita que los elementos bajen a otra línea */
}

.producto-card {
    flex: 0 0 250px;          /* Ancho fijo de 250px, no se estira */
    scroll-snap-align: start;  /* Cada producto se alinea al inicio al hacer scroll */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    background: white;
    box-sizing: border-box;
    display: inline-block;     /* Para compatibilidad */
}

.producto-card img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 5px;
}

/* Opcional: Ocultar la barra de scroll en navegadores WebKit (Chrome, Safari) */
.grid-productos::-webkit-scrollbar {
    height: 8px;               /* Altura de la barra */
}

.grid-productos::-webkit-scrollbar-thumb {
    background: #888;          /* Color del "pulgarcito" */
    border-radius: 4px;
}

.grid-productos::-webkit-scrollbar-track {
    background: #f1f1f1;       /* Color del fondo de la barra */
}