@charset "utf-8";
/* CSS Document */
body {
	margin: 0em auto;
	overflow-x:hidden;
    background-color:#fff;
	width:auto;
    padding: 0;
    margin: 0;

}

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

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

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

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



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

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


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


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


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



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




h1 {
    font-family: "Roboto-Bold";
    font-weight: 900
}

h2 {
    font-family: "Roboto-Light";
    font-weight: 900
}

p {
    font-family: "Roboto-Light"
}

a {
    text-decoration: none;
    color: #fff;
    font-family: "Roboto-Light"
}









#capa3Body{
	position:relative; width:100%; height:300px;   background-color:#000; 
}

	.fila1Capa3Body{
		position:absolute;
		width:100%;
		height:100%; background-size: cover;
		background-color:#000;background-image:url(../imagenes/nosotros.png);
		overflow:hidden
	}
	
	
			.txt1Capa3Body{
				position:absolute; width:100%; text-align:left;left:100px;  font-size:4em; top:0px; color:#FF0; font-family: "magetasLight";
			}
			
			.diseno{
				position:absolute;
				top:-50px;
				right:0px;
				
			}
			
			.txt2Capa3Body{
				position:absolute; width:40%; text-align:left; left:100px;  font-size:1.5em; top:130px; color:#fff; 
			}
	
	
	
	
	
	
	.filaCapa4
	{
		position:relative;
		width:100%;
		height:120px;
		padding-top:100px;
	}
	
	
	.fila3Capa4
	{
		position:relative;
		width:100%;
		height:120px;
		padding-top:10px;
	}
	
		.comodin{
			float:left;
			width:4%;
			height:100%;
		}
	
		.columna
		{
			float:left;
			width:28%;
			height:100%;

		}

			.conteImg{
				position:relative;
				width:100%;
				height:85%;  overflow:hidden;
				
			}
			
				.txtConteImg{
					position:absolute;
					color:#FF0;
					width:100%;
					text-align:center;
					top:50px;
					font-family:magetasLight;
					font-size:2.3em;
					z-index:10000
					
				}
				
				.lente{
					position:absolute;
					z-index:10000;
					width:40px;
					height:auto;
					bottom:60px;
					left:160px;
						
				}
				
				.velo{
				position:absolute; background:rgba(0,0,0,0.5); width:100%; height:100%	
				}
			
				.imgColumnaCapa4
				{
					width:110%;
					height:auto;
					-webkit-transition: all 0.5s ease;   -moz-transition: all 0.5s ease;   -o-transition: all 0.5s ease;   
					transition: all 0.5s ease; 
				}
				
	

	
#capa1Body{
	position:relative; width:100%; height:auto;   background-color:#fff
}

.btnInfo{position: relative; display: block; margin-left: auto; margin-right: auto; border-radius: 20px; border: solid; border-width: 2px; border-color: #fff; 
	width: 130px; height: 30px; 
	background-color: #27a3b6; cursor: pointer; color: #fff; z-index: 100;}
	.btnInfo:hover{ background-color: #fff; color: #000;}

	.imgLabelCapa1Body{position:absolute; left:-70px; top:-5px; width:290px; height:auto;}

	
	.subCapa1Body{
		position:relative;
		
		width:100%;
		height:350px;
	
	}
			.txt1CapaBody{
				position:relative; width:100%; text-align:center; font-size:4em; color:#000; padding-top:50px;
			}
			
			.txt2CapaBody{
				position:relative; width:100%; text-align:center; font-size:1.8em; color:#F00; top:-40px;
			}
			
			
			.txt3CapaBody{
				position:relative; width:50%; text-align:center; font-size:1.5em; color:#000; top:-20px;
			}



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

			/*********************INICIAO SCROLLAO********************/
				#global {
					height: auto;
					width:80%;
					display: block;
					margin-left: auto;
					margin-right: auto;
					overflow-y: scroll;
					overflow-x: hidden;
					top:30px;
					position:relative; margin-left:auto; margin-right:auto
				}
				
				#global::-webkit-scrollbar-track
				{
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
					border-radius: 10px;
					background-color: #F5F5F5;
				}
				
				#global::-webkit-scrollbar
				{
					width: 12px;
					background-color: #F5F5F5;
				}
				
				#global::-webkit-scrollbar-thumb
				{
					border-radius: 10px;
					-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
					background-color: #27a3b6;
				}
				/************************FIN SCROLL****************************/
				
				
			/****************************INICIO MASCARA MODAL******************/		
			/* The Modal (background) */
				.modalmask {
				position: fixed;
				font-family: Arial, sans-serif;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.9);
				z-index: 99999;
				opacity:0;
				-moz-opacity: 0;
                 filter: alpha(opacity=0);
				-webkit-transition: opacity 400ms ease-in;
				-moz-transition: opacity 400ms ease-in;
				transition: opacity 400ms ease-in;
				pointer-events: none;
				}

				.modalmask:target {
					opacity:1;
					-moz-opacity: 0.1;
                    filter: alpha(opacity=1);
					pointer-events: auto;
				}
				
				
				
				.rotate {
				margin: 6% auto;
				}
				
				
				.modalmask:target .rotate{		
				transform: rotate(360deg) scale(1,1);
       			 -webkit-transform: rotate(360deg) scale(1,1);
				  -moz-transform: rotate(360deg) scale(1,1);
				}
				

				
				
				.close {
				background:#F00;
				color: #FFFFFF;
				line-height: 25px;
				position: absolute;
				right: -10px;
				text-align: center;
				top: -20px;
				left:1150px;
				width: 24px;
				text-decoration: none;
				font-weight: bold;
				border-radius:3px;
				z-index:10;
				border:1px solid #FFF;
				}

				.close:hover { 
					background: #000; 
					color:#F00;
				}
			/*Ejemplo de aplicaicon de estilo a un elemento lllamado four hr.style-four*/
			#imgFoto{position:relative; width:auto; height:75%;  top:5px;}
							
			/*************FIN MASCARA MODAL*******/


			/*************CONTENEDOR DE FOTOS MINIATURA*******/
			.filaFotos{
			position:relative; width:100%; height:300px; z-index:1;  overflow: visible; content: "";
			display: block; margin-left: auto; margin-right: auto; 
			clear: both;
			}


			.fila-fotos::after {
					content: "";
					display: block;
					clear: both;
					}
			
				.col1{
				overflow:hidden; float:left; width:1%; height:50px;  background-color: #000;
				}
				.col2{
				overflow:hidden; float:left; width:1%; height:50px;background-color: #000;
				}
					.fotoMini{
					
						float: left;
						width: 45%;
						height: 800px;
						background-size: contain;              /* Cambiado de cover a contain */
						background-position: center center;    /* Centra la imagen */
						background-repeat: no-repeat;          /* Evita repeticiones */
						margin: 10px;
						z-index: 200000;
					}
					
					
					.imgSillas{
						position: relative; width: 100%; display: block; margin-left: auto; margin-right: auto;

					}
		
					.txtFotoMini{
					 text-align:center; color:#fff; z-index:5; font-size:1.3em;  
					}




/* ESTILOS GENERALES DE LA GALERÍA */
.contenedor-galeria {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en desktop */
    gap: 25px; /* Espacio generoso entre imágenes */
    padding: 25px;
    max-width: 1400px; /* Ancho máximo ampliado */
    margin: 0 auto;
    box-sizing: border-box;
}

/* ESTILOS DE CADA CELDA/IMAGEN */
.item-galeria {
    height: 450px; /* Altura aumentada (ajustable) */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

/* ESTILOS PARA LAS IMÁGENES (COMPLETAS SIN RECORTES) */
.item-galeria img {
    max-width: 95%; /* Ocupa casi todo el ancho de la celda */
    max-height: 95%; /* Ocupa casi todo el alto */
    object-fit: contain; /* Muestra la imagen completa */
    transition: transform 0.4s ease;
}

/* EFECTOS HOVER PARA INTERACTIVIDAD */
.item-galeria:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.item-galeria:hover img {
    transform: scale(1.03);
}

/* RESPONSIVE: 1 COLUMNA EN MÓVILES */
@media (max-width: 768px) {
    .contenedor-galeria {
        grid-template-columns: 1fr; /* 1 columna */
        gap: 20px;
        padding: 15px;
    }
    
    .item-galeria {
        height: 380px; /* Altura ligeramente menor en móviles */
    }
    
    .item-galeria img {
        max-width: 90%;
        max-height: 90%;
    }
}

/* AJUSTES PARA PANTALLAS MUY GRANDES (OPCIONAL) */
@media (min-width: 1600px) {
    .contenedor-galeria {
        max-width: 1600px;
    }
    
    .item-galeria {
        height: 500px;
    }
}




			.fila1Proyectos{position: relative; display: inline-table; width: 80%; margin-left: 10%; margin-right: 10%; height: 200px; }
					.col1Proyectos{float: left; width: 45%; height: 600px; background-color: #50504f; background-size: cover; background-repeat: no-repeat;}
					.col2Proyectos{float: left; width: 10%; height: 200px; background-color: #fff;}
					.txtProyectos{position: relative; text-align: center; color: #fff; font-size: 3em; padding-top: 200px;}
					.linkProyectos{cursor: pointer;}


					.col1Proyectos:hover{ background-color: #27a3b6;}


#capa2Body{
	position:relative; width:100%; height:670px;   background-color:#333333
}

		.grupo1Capa5{  float:left; width:60%; height:100%;}
		.txt1Grupo1Capa5{position:relative; font-size:8em; top:-50px; padding-left:90px;  color:#fd3a3a;  font-family: "jet"; }
		.txt2Grupo1Capa5{position:relative; font-size:3em; top:-135px; padding-left:90px; color:#a9a9a8; 
		font-family: "magetasLight"; }
		.txt3Grupo1Capa5{position:relative; font-size:1.3em; top:-150px; padding-left:90px; color:#fff; width:650px; }

		.volante{
			 width:539px; height:auto;  
			}


#capa4Body{
	position:relative; width:100%; height:500px;   background-color:#000;
	background-image:url(../imagenes/img3Index.png);-moz-background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;aling-items: center;justify-content: center;display: flex;
}


		.grupo1Capa6{
		position:absolute;
		width:70%;
		height:100%;
	}

	

		.txt1Capa6{
			position:relative;
			padding-top:120px;
			text-align:center;
			color:#FF0;
			font-size:3.2em;
			font-family:magetasBold
		}

		

		.txt2Capa6{
			position:relative;
			text-align:center;
			color:#FFF;
			font-size:1.5em
		}



#capa5Body{
	position:relative; width:100%; height:1000px;   background-color:#000; background-image:url(../imagenes/fondoCapa5Body.png);
	-moz-background-size: 100%;
    -webkit-background-size: 100%;
    -o-background-size: 100%;
}




		.fila1Capa5Body{
		position:relative;
		width:100%;
		height:30%;
		background-color:#ffe400;
		overflow:hidden
		}
	
	
			.txt1Capa5Body{
				position:absolute; width:100%; text-align:right; right:100px;  font-size:4em; top:0px; color:#000; 
				font-family: "carson";
			}
			
			.servicio{
				position:absolute;
				top:-50px;
				left:0px;
				
			}
			
			.txt2Capa5Body{
				position:absolute; width:40%; text-align:right; right:100px;  font-size:1.5em; top:130px; color:#50504f; 
			}





	.fila2Capa5Body{
		position:relative;
		width:100%;
		height:60%;
		overflow:hidden
		}

				
					.filaCapa5
					{
						position:relative;
						width:100%;
						height:75%;
						padding-top:100px;
					}
					
					
					.fila3Capa5
					{
						position:relative;
						width:100%;
						height:220px;
						background-color:#FFF
					}
					
						.comodinCapa5{
							float:left;
							width:4%;
							height:100%;
						}
					
						.columnaCapa5
						{
							float:left;
							width:28%;
							height:100%;
							background-color:#FFF
				
						}
				
							.conteImgCapa5{
								position:relative;
								width:100%;
								height:100%;  
							}
							
								.txtConteImgCapa5{
									position:absolute;
									color:#282828;
									width:100%;
									text-align:center;
									top:120px;
									font-family:magetasBold;
									font-size:2.3em;
									z-index:10000
									
								}
								
								.txt2ConteImgCapa5{
									position:absolute;
									color:#282828;
									width:75%;
									text-align:center;
									top:220px;
									font-size:1.3em;
									left:45px;
									z-index:10000
								}
							
								
							
								.imgColumnaCapa5
								{
									width:70px;
									height:auto;
									padding-top:50px;
									-webkit-transition: all 0.5s ease;   -moz-transition: all 0.5s ease;   -o-transition: all 0.5s ease;   
									transition: all 0.5s ease; 
								}
				
				
				
				
/*Celular portrait*/
@media screen and (max-width: 360px) {

	.fila1Proyectos{width: 100%; margin-left: 0%; margin-right: 0%; height: auto; }
					.col1Proyectos{position: relative; top: 150px; width: 100%; height: 400px;}
					.txtProyectos{position: relative; text-align: center; color: #fff; font-size: 3em; padding-top: 200px;}
					.linkProyectos{cursor: pointer;}

	
#capa1Body{position:relative; width:100%; height:2300px;   background-color:#fff}
.espacio2{  position:relative; width:100%; height:300px;}
	
	.grupo2CapaB{ position:relative; width:100%; height:450px;}
	.txt1CapaBody{font-size:3.5em}

.imgLabelCapa1Body{ display:none}

	.comodin{position:relative; width:00%; height:300px;}
	.columna{position:relative; width:100%; height:300px;}

#capa3Body{height:400px}
	.fila1Capa3Body{height:400px}
		.txt1Capa3Body{width:100%; text-align:center; left:auto;  right:auto;}
		.txt2Capa3Body{ top:300px; width:100%; text-align:center; left:auto;  right:auto;}
		.diseno{display:none}
		
		.volante{display:none}



.subCapa2Body{ height:auto; top:100px; width:100%;}
			#global { width:95%; height:1800px; left:10px;}
				.col1{ position:relative; width:100%; height:100px}
				.col2{position:relative; width:100%; height:100px}
					.fotoMini{ width:90%}
				.close {left:150px;}	
				#imgFoto{width:100%; height:auto;  top:5px;}

	
	
}

/*Celular landscape*/
@media screen and (min-width: 361px) and (max-width: 640px) {
	


	.fila1Proyectos{width: 100%; margin-left: 0%; margin-right: 0%; height: auto; }
					.col1Proyectos{position: relative; top: 150px; width: 100%; height: 400px;}
					.txtProyectos{position: relative; text-align: center; color: #fff; font-size: 3em; padding-top: 200px;}
					.linkProyectos{cursor: pointer;}


#capa1Body{position:relative; width:100%; height:2300px;   background-color:#fff}
.espacio2{  position:relative; width:100%; height:300px;}
	
	.grupo2CapaB{ position:relative; width:100%; height:450px;}
	.txt1CapaBody{font-size:3.5em}

.imgLabelCapa1Body{ display:none}

	.comodin{position:relative; width:00%; height:300px;}
	.columna{position:relative; width:100%; height:300px;}

#capa3Body{height:400px}
	.fila1Capa3Body{height:400px}
		.txt1Capa3Body{width:100%; text-align:center; left:auto;  right:auto;}
		.txt2Capa3Body{ top:300px; width:100%; text-align:center; left:auto;  right:auto;}
		.diseno{display:none}
		
		.volante{display:none}



.subCapa2Body{ height:auto; top:100px; width:100%;}
			#global { width:95%; height:1800px; left:10px;}
				.col1{ position:relative; width:100%; height:100px}
				.col2{position:relative; width:100%; height:100px}
					.fotoMini{ width:90%}
				.close {left:150px;}	
				#imgFoto{width:100%; height:auto;  top:5px;}

}


/*tablet 7.1 portrait*/
@media screen and (min-width: 641px) and (max-width: 960px) {
	.txtProyectos{position: relative; text-align: center; color: #fff; font-size: 2em; padding-top: 200px;}
				



#capa1Body{position:relative; width:100%; height:2300px;   background-color:#fff}
.espacio2{  position:relative; width:100%; height:300px;}
	
	.grupo2CapaB{ position:relative; width:100%; height:450px;}
	.txt1CapaBody{font-size:3.5em}

.imgLabelCapa1Body{ display:none}

	.comodin{position:relative; width:00%; height:300px;}
	.columna{position:relative; width:100%; height:300px;}

#capa3Body{height:400px}
	.fila1Capa3Body{height:400px}
		.txt1Capa3Body{width:100%; text-align:center; left:auto;  right:auto;}
		.txt2Capa3Body{ top:300px; width:100%; text-align:center; left:auto;  right:auto;}
		.diseno{display:none}
		
		.volante{display:none}



.subCapa2Body{ height:auto; top:100px; width:100%;}
			#global { width:95%; height:1800px; left:10px;}
				.col1{ position:relative; width:100%; height:100px}
				.col2{position:relative; width:100%; height:100px}
					.fotoMini{ width:90%}
				.close {left:150px;}	
				#imgFoto{width:100%; height:auto;  top:5px;}


}



/*tablet 7.1 landscape se puede utilizer las medidas iniciales*/
@media screen and (min-width: 961px) and (max-width: 1210px) {
.imgLabelCapa1Body{ display:none}
.subCapa2Body{ height:auto; top:150px}
	.comodin{position:relative; width:00%; height:300px;}
	.columna{position:relative; width:100%; height:300px;}

#capa3Body{height:400px}
	.fila1Capa3Body{height:400px}
		.txt1Capa3Body{width:100%; text-align:center; left:auto;  right:auto;}
		.txt2Capa3Body{ top:300px; width:100%; text-align:center; left:auto;  right:auto;}
		.diseno{display:none}
		
		.volante{display:none}


			#global { width:95%; height:700px; left:10px;}



}