@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Righteous&display=swap');


*{
	box-sizing: border-box;
}
body{
	margin:0px;
	color:#454545;
	background-color:#222222;
	font:300 16px/20px "Raleway";
}
:root{
	--negro:rgb(23, 23, 23);
	--rojo:rgb(230, 25, 2);
	--rojoAlpha:rgba(230, 25, 2, 0.3);
}

a{text-decoration:none;color:inherit;}
.underline{text-decoration:underline;}
.oculto{display:none !important; }

.borde{border:3px #df0000 solid !important;}
.bco{color:#ffffff;}
.fondoBco{background:#ffffff !important;}
.fondoNgo{background:#000000 !important;}


.megaTitulo{font:500 clamp(22px, 8vw, 80px)/1em "Righteous","sans-serif";}
.granTitulo{font:500 clamp(20px, 6vw, 60px)/1em "Righteous","sans-serif";}
.superTitulo{font:500 clamp(20px, 6vw, 40px)/1em "Righteous","sans-serif";}
.titulo{font:500 clamp(16px, 6vw, 22px)/1.2em "Righteous","sans-serif";}
.micro{font:300 12px/12px "Raleway","sans-serif";}

.italica{font-style:italic;}
.megabold{font-weight:800 !important;}
.extrabold{font-weight:700 !important;}
.bold{font-weight:500 !important;}
.txtdrecha{text-align:right !important;}
.txtright{text-align:right !important;}
.aladerecha{float:right !important;}
.alaizquierda{float:left !important;}


.rojo{color:#df0000;}

.tabla_principal{width:100%;display:inline-block;text-align:center;margin:0px;}
.contenidos{width:98%;max-width:1200px;text-align:center;display:inline-block;}
.imagen100{width:100%;}
.imagen80{width:80%;}

.txtcenter{text-align:center !important;}
.txtleft{text-align:left !important;}

.pointer{cursor: pointer;}
.righteous{font-family:"Righteous" !important;}


/* BOTONES */
.btn{display:inline-block;cursor:pointer;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	border:none;display:inline-block;text-align:center;
		/* evita seleecionar texto */
		-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;
		-moz-user-select: none;-ms-user-select: none;user-select: none;
/*		-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px; */
	float:none;
	}
.btnEnviar{border:1px var(--negro) solid;background:var(--negro);color:#ffffff;padding:0px 10px;text-align: center;}


.btnNormal{display:inline-block;padding:15px 35px;
	border:1px #ffffff solid;
	background:rgba(49,99,106,0.6);
	font:300 clamp(16px, 3vw, 22px)/1.1em "Righteous","Arial","Sans";
	color: #ffffff;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	-webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px;
}
.btnNormal:hover{
	background: rgba(255,255,255); color: #000000;
}

.btnEnviarForma{display:inline-block;padding:10px 35px;
	border:1px var(--rojo); solid;
	background:var(--rojo);
	font:500 16px/16px "Righteous","Arial","Sans";
	color: #ffffff;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	border-radius:20px;
}
.btnEnviarForma:hover{
	background: rgba(255,255,255); color: var(--rojo);
}

.btnRojo{display:inline-block;padding:13px 25px;
	border:1px var(--rojo); solid;
	background:var(--rojo);
	font:500 16px/16px "Righteous","Arial","Sans";
	color: #ffffff;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	border-radius:10px;
}
.btnRojo:hover{
	background: rgba(255,255,255); color: var(--rojo);
}
.btnRojo{display:inline-block;padding:13px 25px;
	border:1px var(--rojo); solid;
	background:var(--rojo);
	font:500 16px/16px "Righteous","Arial","Sans";
	color: #ffffff;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	border-radius:10px;
}
.btnRojo:hover{
	background: rgba(255,255,255); color: var(--rojo);
}

.btnRojo2{border-radius: 40px;}
.btnRojito{padding:6px 15px;}

.btnNegro{display:inline-block;padding:10px 35px;
	border:1px #000000 solid;
	background:#000000;
	font:300 16px/16px "Righteous","Arial","Sans";
	color: #ffffff;
	margin-top:16px;
	-webkit-transition: all 0.2s ease-in-out;   -moz-transition: all 0.2s  ease-in-out; -o-transition: all 0.2s  ease-in-out; transition: all 0.2s  ease-in-out;
	border-radius:10px;
}
.btnNegro:hover{
	background: rgba(255,255,255); color: #000000;
}

.btnCh{padding:7px 20px;}
.btnAncho{width:300px;}


#header{position: fixed;width:100%; height:80px; z-index: 9000;transition: transform 0.3s ease;}
.logotipoTop{display:inline-block;float:left;width:220px;padding:30px 40px 20px 40px; box-sizing: border-box;
	background: #E61902;
	background: linear-gradient(90deg,rgba(230, 25, 2, 1) 72%, rgba(255, 255, 255, 0) 100%);
	border-bottom-left-radius: 20px;
}
.logotipoTop img{display:inline-block;float:left;width:120px;}
#header .contenidos{width:100%;min-width: 100%;}
.logoMovil{width:100px; margin-top:10px;margin-left:10px;display: none;}



.frosted {background-color: rgba(182, 26, 26, 0.4);
-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);
/* opcionales para estética */
display:inline-block;align-items: center;justify-content: center;color: white;
border-bottom-right-radius: 20px;border-bottom-left-radius:20px;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* menutop */
.menuTop{width:auto;display:inline-block;float:none;
		padding:30px 0px 20px 0px; margin:0px 0px;
}
.btnMenu{
	font:300 16px/16px "Righteous","Arial","Sans";
	display:inline-block;padding:10px 40px; margin-left:55px;
	border-radius:20px;
	color: #ffffff;
}
.menuTop .btnMenuRojo{background: var(--rojo) !important;}
.menuTop .btnMenuRojobtnMenuSel{background: #000000 !important;}
.menuTop .btnMenu:hover{background: var(--rojoAlpha);}
.menuTop .btnMenuSel {
    text-decoration: none;       /* quitamos el underline normal */
    position: relative;
}

.menuTop .btnMenuSel::after {
	width:50%;
    content: "";
    position: absolute;
    left: 25%;
    right: 0;
    bottom: -2px;                /* -> la bajas 2px */
    height: 2px;                 /* grosor de la línea */
    background: red;             /* color rojo */
}


.consubmenu{
	display: inline-block; position: relative;
}
	.submenu{
		width:200px;
		display:none;
		position: absolute;
		top: 0;left:55px;
		background:rgba(225,225,225,0.4);padding:40px 20px 20px 20px;
		border-radius:20px;
	}
	.submenu a{width:100%;display: inline-block; text-align: left;
		font:500 16px/30px "Raleway","Arial","Sans";
	}
	.submenu a:hover{text-decoration: underline;}

.consubmenu:hover .submenu{display:inline-block;}
.consubmenu:hover .btnMenu{background:var(--rojo); !important;}



/* INDEX */
#fondoPortada{height:75vh; background: url(images/fondoPortada.jpg);background-size: cover;background-position: bottom center;}

#portadaSecc01{width:100%; display:inline-block; margin-top:9%;}
#portadaSecc01Txt{
	margin:30px 0px;
	font:500 clamp(18px, 6vw, 36px)/1.4em "Raleway","sans-serif";color: #ffffff;
}

.portadaSecc02{
	position: relative;
    width: 45%;
    margin:5% 2%;
    aspect-ratio: 1 / 1;   /* siempre queda cuadrado */
    display: inline-block;
    border-radius:20px;
}
.subSecc02_a{
    background: url(images/portadaImagen01.jpg);background-size: cover;background-position: center;
}
.subSecc02_b{
    background: url(images/portadaImagen02.jpg);background-size: cover;background-position: center;
}
.btnPortada {width:300px; display: inline-block;align-items: center;gap: 8px;
	padding:10px 40px;
	font:500 22px/22px "Righteous","Arial","Sans";color:#ffffff ; text-align: center;
	position:absolute; bottom:5%; left:calc(50% - 150px);
	background: rgba(255, 255, 255, 0.3); /* blanco 40% */
	backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);
	border-radius:30px;cursor: pointer;
	transition: background 0.3s ease;
}
.btnPortada img {width:40px; transition: transform 0.3s ease; vertical-align: middle;}
.btnPortada:hover img {transform: rotate(45deg);}
.btnPortada:hover{background: rgba(255, 255, 255, 1);color:var(--rojo);}




/* RESEÑAS */
#titResenias{margin-bottom:30px;}
#reseniasCont{
	display:inline-block;
	width:100%;
	height:550px;
  position:relative;
	background: rgba(255, 255, 255, 0.05); /* blanco 40% */
	border-radius:30px;cursor: pointer;
}
.reseniasImg{width:35%;display: inline-block;float: left;margin:5% 5%;
	border-radius:50%; overflow: hidden;}
	.reseniasImg img {object-fit: cover;width: 100%;height:100%;vertical-align: middle;transition: transform 0.4s ease;}
.reseniasDatos{width:55%;display: inline-block;float: left;}
.reseniasTit{width:100%;display: inline-block;float: left;margin: 20% 0px 10px 0px;
	font:700 30px/30px "Raleway","Arial","Sans";color:var(--rojo); text-align: left;
}
.reseniasTxt{width:100%;display: inline-block;float: left;
	font:300 22px/22px "Raleway","Arial","Sans";color:#ffffff; text-align: left;
}

.renglonEstrellas{width:100%;display: inline-block;margin:20px 0px;}
.renglonEstrellas img{width:30px;display: inline-block;float: left;}


.reseniasItemBox {
    position: absolute;
    display:inline-block;
    width:80%;margin:40px 10%;
    top:0px;left: 0;
    padding: 20px;
    background: white;
		background: rgba(255, 255, 255, 0.5); /* blanco 40% */
	backdrop-filter: blur(26px);-webkit-backdrop-filter: blur(26px);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none; /* solo la visible podrá recibir clicks */
}
.reseniasItemBox.active {opacity: 1;pointer-events: auto;}


.reseniasItemBox2{
    position: absolute;
    display:inline-block;
    width:80%;margin:40px 10%;
    top:0;left: 0;
    padding: 20px;
    background: white;
		background: rgba(255, 255, 255, 0.1); /* blanco 40% */
	backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);
    border-radius: 12px;
    transition: opacity 0.5s ease;
    pointer-events: none; /* solo la visible podrá recibir clicks */
}
.reseniasItemBoxFake1 {width:74%;margin:40px 13%;bottom:-10px;left:0 ;}
.reseniasItemBoxFake2 {width:70%;margin:40px 15%;bottom:-30px;left:0 ;}

/* RESEÑAS FIN ----------------------------------*/


#portadaNosotros{margin:50px 0px;color:#ffffff;}
.portadaNosotrosBox1{width:50%;display: inline-block; float: left;
	border-radius:30px; overflow:hidden;
}
.portadaNosotrosBox2{width:44%;display: inline-block; float: left; padding:4% 2% 2% 4%; text-align: left; box-sizing: border-box;
	font:300 14px/20px "Raleway";
}
	.portadaNosotrosBox1 img {object-fit: cover;width: 100%;height:100%;vertical-align: middle;transition: transform 0.4s ease;}

#nuestrasMarcas{
		color: #ffffff; padding:40px 0px;box-sizing: border-box;
		background: rgba(255, 255, 255, 0.05); /* blanco 40% */
		border-radius:30px;
}
.logosMarcas{width:100%;display: inline-block; float: left;}
	.logosMarcasItem{width:35%;display: inline-block; float: none; margin:20px 0px;}
	.logosMarcasItem img {object-fit: cover;width: 100%;height:100%;vertical-align: middle;transition: transform 0.4s ease;}

.catalogoCont{
    width: 100%;
    height: 100vh; /* o lo que necesites */
    display: inline-block;
    background-image: url('images/catalogo-web2.png');
    background-size: contain;  /* ✔ no recorta la imagen */
    background-repeat: no-repeat;
    background-position: center;  /* ✔ centrada */
}
	.catalogoBotones{display: inline-block; margin-top:250px; float: left;  margin-left:30px; color: #ffffff;}


#avisoCont{color:#eeeeee; width:100%; max-width:800px; text-align: left;
	margin:150px 0px; 
}

/* REDES */
.icoFacebook{width:30px;height: 30px;display: inline-block;margin-right: 10px;
	background: url(images/icoFacebook.png);background-size:cover; }
.icoInstagram{width:30px;height: 30px;display: inline-block;margin-right: 10px;
	background: url(images/icoInstagram.png);background-size:cover; }
.icoLinkedin{width:30px;height: 30px;display: inline-block;margin-right: 10px;
	background: url(images/icoLinkedin.png);background-size:cover; }




#icoWhatsApp{width:60px;height: 60px;display: inline-block; position: fixed; bottom:20px;right: 20px;}
#icoWhatsApp img{width:60px;height: 60px;}
#icoWhatsApp2{width:60px;height: 60px;display: inline-block; position: fixed; bottom:80px;right: 10px;}
#icoWhatsApp2 img{width:60px;height: 60px;}

/* PIE */
#pieCont{margin:0px 0px 0px 0px;padding:50px 0px; background:#000000; color:#ffffff; }
.logotipoBot{display:inline-block;float:left;width:100px;}
.logotipoBot img{display:inline-block;float:left;width:100px;}


.pieSecc1{width:40%;display: inline-block; float: left; text-align: left;
	font:300 13px/18px "Raleway";
}
.pieSecc2{width:30%;display: inline-block; float: right; text-align:right; color: #ffffff;padding-top:20px;}



/* CATALOGO */

#fondoCatalogo{height:70vh; background: url(images/fondoCatalogo.jpg);background-size: cover;background-position: center center;
	border-radius: 30px;
}

/* CAROUSEL */

#carruselCont{width:50%;height:70vh;display: inline-block; margin:5% 0px;}

.carrusel-text{width:100%; font: 300 12px/12px "Raleway";  color: #ffffff; padding:10px 5%; box-sizing: border-box;}
.carrusel3d {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 60px auto;
    perspective: 1000px;
}

.carrusel-wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-680px) rotateY(0deg);
    transition: transform 1s;
}

/* Cada tarjeta */

.carrusel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Botones */
#prev3d, #next3d {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.6);
    color: white;
    border: none;
    padding: 12px 18px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 50%;
}

#prev3d { left: -280px; }
#next3d { right: -280px; }


/* elimina cualquier transform en .carrusel-item.active anterior */
.carrusel-item {
    position: absolute;
    width: 520px;
    height: 300px;
    left: 20px;
    top: 20px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    transition: transform 600ms, z-index 600ms; /* animación suave al escalar */
    transform-origin: center center;
}

/* estilos visuales para el activo */
.carrusel-item.active .inner {
    /* la escala se aplicará desde JS concatenando al transform base,
       pero dejamos esta clase por si quieres añadir borde/glow */
    box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

/* usa un contenedor interno para evitar problemas si quisieras
   animar sólo la imagen sin tocar la posición 3D (opcional) */
.carrusel-item .inner {
    width: 100%;
    height: 100%;
    display: block;
}


/* CAROUSEL FIN ================================================= */







/* 	NOSOTROS */
#fondoNosotros{ height:100dvh ; max-height:800px; background: url(images/fondoNosotros.jpg);background-size:cover;background-position: center bottom;
	background-repeat: no-repeat;
	position: relative;}
.nosotrosTopDatos{width:44%; display: inline-block; color: #ffffff; text-align: left;
	position: absolute; top:100px;left:5%;
	font:300 16px/20px "Raleway";
}
.nosotrosQuehacemos{width:40%; display: inline-block; color: #ffffff; text-align: left;
	position: absolute; top:300px;right:5%; padding:20px 20px;
	font:300 16px/20px "Raleway";
	background:rgba(255,255,255,0.2) ;
	-webkit-border-top-right-radius: 30px;-webkit-border-bottom-left-radius: 30px;-moz-border-radius-topright: 30px;
	-moz-border-radius-bottomleft: 30px;border-top-right-radius: 30px;border-bottom-left-radius: 30px;
}
.nosotrosQuehacemos .titulo{margin-bottom:10px; }
#nuestrosValoresMovil{display: none;}



/* SERVICIOS */
#serviciosLayout{width:100%;height:75vh;display: inline-block;position: relative; 
	margin-top:80px; 
	background: #000000;
}
#layout001{width:80%;height:60vh;position:absolute;top:0;right:0;
	background: url(rotativos/espacios/imagen04.jpeg); background-size: cover;background-position: center center;
}
#puraCalidadTxt{display: inline-block; position: relative;
	font:700 80px/80px "Raleway";color: #ffffff;text-align: left; z-index: 5001;
	top:-10vh;left:-28%;
}
#puraCalidadImg{display: inline-block; position: relative;top:35vh;left:-42%;}
#puraCalidadImg img{width:200px;z-index:5000;}


#layoutSecc02{margin:40px 0px;}
#layoutSecc02 .megaTitulo{ margin:10px 0px 30px 0px; }
#serviciosLayoutTextos{width:100%;max-width:900px;display: inline-block; float: none; margin:30px 0px;
	font:300 18px/22px "Raleway";color: #ffffff;text-align: center;
}
#layoutImagenes{width:100%;display: inline-block; text-align: center;}
#layoutImagenes .imagen {width:30%;display: inline-block; vertical-align: top; margin:10px 1.5%;}
#layoutImagenes img {object-fit: cover;width: 100%;height:100%;vertical-align: middle;transition: transform 0.4s ease;}


#layoutSecc03{margin:0px 0px;}
#renderGym{display: inline-block;width:60%; float: left;}
#renderGym img {object-fit: cover;width: 100%;height:100%;vertical-align: middle;transition: transform 0.4s ease;}
#serviciosLayoutTextos2{width:30%;display: inline-block; float:left; margin:120px 0px 0px 0px;
	font:300 16px/22px "Raleway";color: #ffffff;text-align: center;
}


#soporteTecnico{margin:90px 0px;}
.soporteItem{width:22%;display: inline-block; vertical-align: top; margin:20px 1%; box-sizing: border-box;}
.soporteItemImg {
    width:100%;
    height:400px;
    display:inline-block;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    cursor: pointer;
}
.soporteItemImg img {
    object-fit:cover;
    width:100%;
    height:100%;
    vertical-align:middle;
    position:absolute;
    top:0;
    left:0;
    transition: opacity .3s ease, transform .4s ease;
}
.soporteItemDescrip {
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;
    box-sizing:border-box;
    position:absolute;
    top:0;
    left:0;
    font:300 16px/22px "Raleway";
    color:#ffffff;
    text-align:center;
    background:rgba(0,0,0,0.4);
    opacity:0;
    transition: opacity .3s ease;
	 	flex-direction: column;   /* Apila texto y botón verticalmente */
	    gap: 20px;                /* Espacio entre texto y botón */
	    padding: 30px;   
}

/* Hover: mostrar texto y bajar opacity de imagen */
.soporteItemImg:hover img {
    opacity:0.7;
}

.soporteItemImg:hover .soporteItemDescrip {
    opacity:1;
}
.soporteItemTit{width:100%;height:90px; display: inline-block; padding:10px 10px;box-sizing: border-box;
	font:500 24px/30px "Righteous";color: #ffffff;text-align: center;
}






/* CONTACTO */
#fondoContacto{height:100vh; background: url(images/fondoContacto.jpg);background-size: cover;background-position: center;}
.formulario{width:45%;height:100%;display: inline-block; float: left; box-sizing: border-box;
	font:300 14px/20px "Raleway";
	text-align: left;
	padding: 12% 50px 0px 50px;
	background: #000000;
	color:#acacac ;
}
.formularioCont{width: 100%; display: inline-block; margin-top: 30px;}
.formularioCont .renglon50,
.formularioCont .renglon{margin-bottom:15px;}

/* MAPAS */	


.mapa{width:100%;height:300px;overflow:hidden;position: relative;padding-bottom:15%;vertical-align:top;}
.mapa_gde{height:calc(100vh - 240px);}
#map_canvas{position: absolute;top:0;left:0;width: 100% !important;height: 100% !important;}

#flecha-up{position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;}



.renglon{width:100%;display:inline-block;float:left;}
.renglon50{width:48%;display:inline-block;float:left;}
.renglon50:nth-child(odd){float:right;}
.renglon_odd:nth-child(odd){background-color:#ffffff;}/* alternacolores entre filas*/
.renglon_odd:nth-child(even){background-color:#f2f2f2;}

.separador{width:100%;height:40px;display:inline-block;float:left;}
/* celdas responsivas */
[class*="celda-"]{display:inline-block;float:left;}
	.celda-0{width:4.111111%;}
	.celda-1{width:8.333333%;}		.celda-1x{width:12.50000%;}		
	.celda-2{width:16.666666%;}		.celda-2x{width:20.83333%;}		
	.celda-3{width:25%;}			.celda-3x{width:29.16666%;}		
	.celda-4{width:33.333333%;}		.celda-4x{width:37.50000%;}
	.celda-5{width:41.666666%;}		.celda-5x{width:45.83333%;}		
	.celda-6{width:50%;}			.celda-6x{width:54.16666%;}			
	.celda-7{width:58.333333%;}		.celda-7x{width:62.50000%;}	
	.celda-8{width:66.666666%;}		.celda-8x{width:70.83333%;}
	.celda-9{width:75%;}			.celda-9x{width:79.16666%;}
	.celda-10{width:83.333333%;}	.celda-10x{width:87.50000%;}	
	.celda-11{width:91.666666%;}	.celda-11x{width:95.833333%;}
	.celda-12{width:100%;}
[class*="colum-"]{float:left;}
	.colum-0{width:4.111111%;}
	.colum-1{width:8.333333%;}		.colum-1x{width:12.50000%;}		
	.colum-2{width:16.666666%;}		.colum-2x{width:20.83333%;}		
	.colum-3{width:25%;}			.colum-3x{width:29.16666%;}		
	.colum-4{width:33.333333%;}		.colum-4x{width:37.50000%;}
	.colum-5{width:41.666666%;}		.colum-5x{width:45.83333%;}		
	.colum-6{width:50%;}			.colum-6x{width:54.16666%;}			
	.colum-7{width:58.333333%;}		.colum-7x{width:62.50000%;}	
	.colum-8{width:66.666666%;}		.colum-8x{width:70.83333%;}
	.colum-9{width:75%;}			.colum-9x{width:79.16666%;}
	.colum-10{width:83.333333%;}	.colum-10x{width:87.50000%;}	
	.colum-11{width:91.666666%;}	.colum-11x{width:95.833333%;}
	.colum-12{width:100%;}
	

.iconito{width:20px;height:20px;margin:5px 5px 0 0;  display:inline-block;vertical-align:middle;float: left;vertical-align: middle;}
.spiner{width:16px;height:16px;vertical-align:middle;}

/* formulario */


.form_label{width:100%;display:inline-block;float:left;padding:10px 8px 4px 0px ;text-align: left;
	color:#232323;
	}
.form_input{width:100%;display:inline-block;float:left;padding:0px 8px;
	border:1px #454545 solid;
	background: #000000;
	border-radius:30px;
	}
.redondo{
	-webkit-border-radius:10px !important;-moz-border-radius:10px !important;border-radius:10px !important;
}
.g-recaptcha{background:#ffffff;height:80px;}


.form_input input,
.form_input textarea{display:inline-block;font:400 12px/24px "Raleway","Arial","Sans";border:none;letter-spacing:1px;
	color:#cfcfcf;
	outline: none;background:transparent;padding:5px;}
.form_input .input_fecha{width:44%;}
.form_input .input_ico{width:calc(100% - 30px);}
.form_input .input_40{width:40%;}
.form_input .input_50{width:50%;}
.form_input .input_100{width:100%;}
.form_area{width:100%;height:90px;resize: none;}
.form_area_gde{width:100%;height:200px;}

.select-style{width:100%;display:inline-block;float:left;overflow: hidden;
		background: transparent url("images/arrowdown.png") no-repeat right center;}
	.select-style select{width:100%;padding:5px;border:none;box-shadow:none;background-color:transparent;
			-webkit-appearance: none;-moz-appearance: none;appearance: none;
			font:400 12px/24px "Raleway","Arial","Sans";color:#232323;}
	.select-style select:focus{outline: none;}
.select-style-bco{background: #ffffff url("images/arrowdown.png") no-repeat right center;}

.nobackgroud{background:transparent !important;}


/*  CHECKBOX Y RADIOBUTTON*/
input.chbox_norm[type="checkbox"] {display:none;}
input.chbox_norm[type="checkbox"] + label span {display:inline-block;vertical-align:middle;margin:-1px 4px 0 0;cursor:pointer;	
	width:30px;height:30px;background:url(images/check_box.png) left top no-repeat;}
input.chbox_norm[type="checkbox"]:checked + label span {
	background:url(images/check_box.png) 0px -30px no-repeat;}

input.radio_norm[type="radio"] {display:none;}
input.radio_norm[type="radio"] + label span {display:inline-block;vertical-align:middle;margin:-1px 4px 0 0;cursor:pointer;	
	width:30px;height:30px;background:url(images/radio_box.png) left top no-repeat;margin-bottom:10px;vertical-align:top;
	float:left;}
input.radio_norm[type="radio"]:checked + label span {
	background:url(images/radio_box.png) 0px -30px no-repeat;}
.radio_norm + label{font:300 12px/28px "Raleway","Arial","Sans";}





#unmomento{width:100%;float:left;font:500 16px/22px "Raleway";}
.marcorojo{background:#ffd0d0 !important;}
.enviandomensaje{display:none;font:500 26px/30px "Raleway";margin-top:20px;color:#000000;}

.jconfirm-content{text-align: center;}
.jconfirm-buttons {width:100%; float: none !important;text-align: center;}
.jconfirm-buttons .btn_enviar{display: inline-block;float: none;margin:5px 10px !important;padding: 5px 20px !important;
	background:var(--negro);
	-webkit-border-radius:25px !important;-moz-border-radius:25px !important;border-radius:25px !important;
	font:700 22px/36px "Raleway";}
.jconfirm-buttons .btn_cancel{display: inline-block;float: none;margin:5px 10px !important;padding: 5px 20px !important; 
	background:var(--gris);color: #ffffff;
	-webkit-border-radius:25px !important;-moz-border-radius:25px !important;border-radius:25px !important;
	font:700 22px/36px "Raleway";}


::-webkit-input-placeholder {}
::-moz-placeholder {}
:-ms-input-placeholder {}
:-moz-placeholder {}


/*
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.9);border-radius: 5px;}
::-webkit-scrollbar-thumb {border-radius: 5px;-webkit-box-shadow: inset 0 0 6px rgba(200,200,200,0.9);}
*/
textarea,
input[type="text"]{
   -moz-box-sizing:    border-box;
   -webkit-
    box-sizing:        border-box;
}

.mostrar{display:none;}

#btnMenuresponsive{display:none;position:fixed;}









.ui-autocomplete{max-height:200px;overflow-y: auto;overflow-x: hidden;}
* html .ui-autocomplete{height:200px;}

.ui-menu-item-wrapper punt{font-weight:bold;}
.ui-state-active punt{font-weight:bold;}
.ui-state-active {font-weight:normal !important;}



.iconoCircOculto{display:none;}

#btnServiciosTopMov{display:none;}
































@media screen and (max-width:980px){ /* cell potrait */

#header{position:fixed;z-index:1000; overflow:initial; margin: 0;padding:0; }
.frosted {background-color: rgba(182, 26, 26, 0.4);
-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px);
display:inline-block;align-items: center;justify-content: center;color: white;
border-bottom-right-radius:0px;border-bottom-left-radius:0px;
box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

.chageSlide {
    display:inline-block;
    margin-left:6px;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #fff; /* color de la flecha */
    transition: transform .25s ease;
}

/* cuando esté abierta */
.chageSlide.abierto {
    transform: rotate(180deg);
}

#btnMenuresponsive{display:inline-block;top:20px;right:10px; width:36px;z-index: 9999;}
#menuresponsive{
	display:none;position:fixed; width:100%;height:100vh;z-index:9999;
	background:#222222;top:0;left:0;margin:0;}

.logotipoTop{width:220px; margin:0px;padding:20px 20px 20px 20px;
	border-bottom-left-radius:0px;
}
.telefonoTop{float:left;margin-top:20px; margin-left:8%;}
.logoMovil{width:120px; margin:0px 0px 30px 0px;display:inline-block; float: left;}


/* menutop */
.menuTop{
		padding-top: 70px; padding-left:40px;
}
.menuTop .btnMenu{
	width: 100%;
	font:500 20px/1em "Raleway","Arial","Sans";
	text-align: left;
	display:inline-block;padding:10px 0px; margin:0px;
}
.btnMenuCh{
	font:500 14px/1em "Raleway","Arial","Sans" !important;
}
.menuTop .btnMenu:hover,
.menuTop .btnMenuSel{background:transparent;color:#ffffff;}
.menuTop .btnMenuRojo{background: none !important;}
.consubmenu{text-align: left; float: left;}

	.submenu{
		width:100%;
		position: initial;
		background:none;padding:0px;margin:0px;
		border-radius:0px;
	}

.menuTop .btnMenuSel::after {
    background:none;             /* color rojo */
}

#btnServiciosTop{display:none !important;}
#btnServiciosTopMov{display:inline-block;}

.servBoton{width:100%;display: inline-block; float: left;text-align:center;
	font:300 0.7em/1.5em "Fraunces","Arial","Sans";
	margin-bottom:0px;
}
	.submenu2{width:100%; display:none; position:initial;text-align:center;background:transparent; margin-top:20px;
		box-sizing:border-box;

	}
	#arrowDown{float: right;margin-top:10px;transition: transform 0.3s ease;}
  .arrowDownGiro{transform: rotate(180deg);}



.tabla_principal{width:100%;overflow: hidden;}
.contenidos{width:100%;}


#avisoCont{width:86%; text-align: justify;
	margin:100px 0px; 
}



#portadaSecc01{margin-top:0%;padding:40px 0px;}
#portadaSecc01 img{width:80%;float: none;}

#fondoPortada{height:auto;background-size:cover; background-position: center center; background-attachment:initial;
margin-top:70px;}
#textoPortada{float:none; width:90%;
		margin:0; margin-top:90%; 
		font:300 0.9em/1.2em "Raleway","Arial","Sans"; color: #ffffff;}
#textoPortadaTit{float:none; margin-bottom: 20px;font:600 2em/1em "Fraunces","Arial","Sans";}
.serviciosPortada01,
.serviciosPortada02{width:90%;max-width:initial;min-height: initial;  padding: 0px; text-align:justify; float:none;}


.btnPortada {width:96%; display: inline-block;align-items: center;gap: 8px; 
	padding:5px 10px;
	font:500 14px/14px "Righteous","Arial","Sans";color:#ffffff ; text-align: center;
	position:absolute; bottom:20px; left:5px;
}
.btnPortada img {width:16px; transition: transform 0.3s ease; vertical-align: middle;}


.reseniasTit{margin:10px 0px 10px 0px;
	font:700 20px/20px "Raleway","Arial","Sans";
}
.reseniasTxt{width:100%;height:65px;overflow: hidden; display: inline-block;float: left;
	font:300 16px/16px "Raleway","Arial","Sans";
}
#reseniasCont{
	height:300px;
}
.renglonEstrellas img{width:22px;display: inline-block;float: left;}

.reseniasItemBox {
    width:90%;margin:30px 5%;
}

.portadaNosotrosBox1{width:100%;}
.portadaNosotrosBox2{width:100%;padding:4% 2% 2% 4%;
	font:300 14px/20px "Raleway";
}
.portadaNosotrosBox2 .granTitulo{text-align: center !important; margin: 10px 0px;}
#btnContacto01{text-align: center;}



.catalogoCont{
    height: 340px; /* o lo que necesites */
}
	.catalogoBotones{width:160px; margin-top:100px;margin-left:0px;}
	.catalogoBotones .granTitulo{font:500 20px/20px "Righteous","Arial","Sans";}
	.catalogoBotones .btnNegro{	font-size:12px; padding:6px 15px; margin-top:5px;}



/* 	NOSOTROS */
#fondoNosotros{ height: initial; max-height: initial; background: url(images/fondoNosotrosMovil.jpg);background-size:cover;background-position: center top;
	background-repeat: no-repeat;
	position: initial;}
.nosotrosTopDatos{width:90%;
	position: initial; margin-top: 120px; margin-bottom: 30px;
	font:300 16px/20px "Raleway";
}
#nuestrosValoresMovil{display: inline-block;}
.nosotrosTopDatos .megaTitulo{margin-bottom: 20px;}
.nosotrosTopDatos .glosa{text-align: center;}
.letMejores{font-size:52px; vertical-align: top;}
.nosotrosQuehacemos{width:90%; display: inline-block; color: #ffffff; text-align: left;
	position: initial;padding:20px 20px;
	margin-bottom:40px;
	font:300 16px/20px "Raleway";
	background:rgba(255,255,255,0.2) ;
	-webkit-border-top-right-radius: 30px;-webkit-border-bottom-left-radius: 30px;-moz-border-radius-topright: 30px;
	-moz-border-radius-bottomleft: 30px;border-top-right-radius: 30px;border-bottom-left-radius: 30px;
}

.iconosValores{width:20%;margin:10px 10px;}


#fondoCatalogo{height:40vh; margin-top:50px; background: url(images/fondoCatalogo.jpg);background-size: cover;background-position: center center;
	border-radius: 30px;
}

#carruselCont{width:100%;height:initial;display: inline-block; margin:2% 0px;}








/* SERVICIOS */
#serviciosLayout{width:100%;height:400px;display: inline-block;position: relative; 
	margin-top:80px;}
#layout001{width:100%;height:80vh;position:absolute;top:0;right:0;
	background: url(images/fondoLatoutMovil.jpg); background-size: cover;background-position: center center;
}

#puraCalidadTxt{width:80%; display: inline-block; position:absolute;
	font:700 60px/60px "Raleway";color: #ffffff; z-index: 101;
	top:40px;left:10%;
}
#puraCalidadTxt .btnRojo{font-size:14px;padding:8px 15px;}
#puraCalidadImg{display:none; position: relative;top:260px;left:0%;}
#layoutSecc02 .megaTitulo{font-size: 40px;}

#layoutImagenes{width:80%; height: 50vh; margin:0px 10%; position: relative;}
#layoutImagenes .imagen {width:100%; position: absolute; top:0;left:0; border-radius: 20px; overflow: hidden;}
#serviciosLayoutTextos{width:90%; margin:10px 0px;
	font:300 18px/22px "Raleway";color: #ffffff;text-align: center;
}

#renderGym{display: inline-block;width:100%; float: left;}
#serviciosLayoutTextos2{width:90%; margin:10px 5%;
	font:300 18px/22px "Raleway";color: #ffffff;text-align: center;
}



#soporteTecnico{margin:80px 0px;}
.soporteItem{width:90%; margin:20px 5%;}



.fondoContactoMovil{width:100%; height:50vh; display: inline-block;
	background: url(images/fondoContacto.jpg);background-size: cover;background-position: center center;}

#fondoContacto{height:initial; background:none;}
.formulario{width:100%;height:initial;
	font:300 14px/20px "Raleway";
	text-align: left;
	padding:30px 30px;
	background: #000000;
	color:#acacac ;
}




.pieSecc1,
.pieSecc2,
.pieSecc3{width:100%;padding:20px 5%; margin:0px; min-height: initial; float: left; text-align: left;
			font:300 0.9em/1.2em "Raleway","Arial","Sans";}





[class*="celda-"]{width:100%;}
	
.div{border:1px #df0000 solid;}
.span{border:1px #df0000 solid;}
.ocultar{display:none;}
.mostrar{display:inline-block !important;}

}/* media */








/* ========================= */
/*        RESPONSIVE         */
/* ========================= */

/* Tablets horizontales y pantallas medianas */
@media(max-width: 1024px) {

    .carrusel3d {
        width: 500px;
        height: 330px;
        perspective: 900px;
    }

    .carrusel-wrap {
        transform: translateZ(-550px);
    }

    .carrusel-item {
        width: 420px;
        height: 260px;
        left: 40px;
        top: 40px;
    }

    #prev3d { left: -200px; }
    #next3d { right: -200px; }
}

/* Tablets verticales */
@media(max-width: 768px) {

    .carrusel3d {
        width: 350px;
        height: 260px;
        perspective: 700px;
    }

    .carrusel-wrap {
        transform: translateZ(-420px);
    }

    .carrusel-item {
        width: 300px;
        height: 200px;
        left: 25px;
        top: 25px;
    }

    #prev3d { left: -140px; }
    #next3d { right: -140px; }
}

/* Móviles */
@media(max-width: 480px) {

    .carrusel3d {
        width: 260px;
        height: 200px;
        perspective: 600px;
    }

    .carrusel-wrap {
        transform: translateZ(-350px);
    }

    .carrusel-item {
        width: 220px;
        height: 150px;
        left: 20px;
        top: 20px;
    }

    #prev3d { left: -90px; }
    #next3d { right: -90px; }
}
:root {
    --carrusel-z: 680px;
    --item-scale: 1.6;
}

/* Tablets */
@media(max-width: 1024px) {
    :root {
        --carrusel-z: 550px;
    }
}

/* Tablets verticales */
@media(max-width: 768px) {
    :root {
        --carrusel-z: 420px;
    }
}

/* Móviles */
@media(max-width: 480px) {
    :root {
        --carrusel-z: 350px;
        --item-scale: 1.35; /* opcional para no hacer tan grande la activa en móvil */
    }
}