@charset "utf-8";
/* CSS Document */
/* MAQUETACION DE LA PAGINA */
/* Azul Oscuro: #1d3e9d */
/* Azul Claro: #1890f1 */
/* Celeste: #80c5ff */
/* Gris ++Oscuro: #1D1D1D */
/* Gris Oscuro: #2D2D2D */
/* Gris ++++Claro: #efeeea */

#wrap {
flex:1; /* Hace que este div tome todo el espacio disponible entre el header y el footer */
display:flex;
flex-direction:column;
min-height:100vh; /* Asegura que #wrap siempre ocupe la altura total del viewport */
}

#main {
flex:1; /* El contenido principal puede crecer o contraerse */
}

@media (min-width: 1024px) {
	.monitor {
	}
}
@media (max-width: 1023px) {	
	.monitor {
	display:none;
	}
}

@media (min-width: 1024px) {
	.mobile {
	display:none;
	}
}
@media (max-width: 1023px) {	
	.mobile {
	}
}

/* Responsive para el Footer */
#footer {
width:100%;
text-align:center;
background:#1d3e9d;
margin-top:auto; /* Esto asegura que el footer esté al final cuando no hay contenido */
clear:both;
}

#variable_footer {
display:inline-block;
width:100%;
margin:30px 0;
}
/* Responsive para el Footer */

/* Header */
@media (min-width: 1024px) {
	#header {
    position:fixed;
    top:0;
    width:100%;
    height:120px; /* Ajusta según el tamaño deseado */
	background:#FFFFFF;
    display:flex;
    align-items:center; /* Centra verticalmente los elementos */
    justify-content:space-between; /* Espacia los elementos: logo en el centro, redes a la derecha */
    padding:0 20px;
	transition:top 0.4s ease; /* Sincroniza duración */
	z-index:1000;
	}
}
@media (max-width: 1023px) {
	#header_responsive {
	position:fixed;
    top:0;
    width:100%;
	background:#FFFFFF;
	text-align:center;
	padding:20px;
	border-bottom:#CCCCCC 1px solid;
	z-index:1000;
	}
}

/* Contenedor del logo */
@media (min-width: 1024px) {
	.logo-container {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    align-items:center; /* Centra el logo verticalmente */
	}

	/* Estilo del logo */
	.logo {
		width:auto;
		max-height:90px; /* Ajusta según el tamaño máximo deseado */
	}

	/* Contenedor de redes sociales */
	.social-container {
		display:flex;
		gap:10px; /* Espaciado entre los iconos */
		align-items:center; /* Centra verticalmente los íconos */
		position:absolute;
		right:20px;
	}
}
@media (max-width: 1023px) {
	.logo {
		max-width:200px;
	}
}
/* Header */

/* Logo para el menú Pegajoso */
#scrollLogo {
    position:absolute;
	top:17px;
    left:30px; /* Disminuir el margen izquierdo */
    height:40px; /* Ajusta el tamaño según sea necesario */
	transition:all 0.4s ease; /* Transición suave para el cambio de logo */
    opacity:0; /* Logo NO visible inicialmente */
    z-index:1100;
}
/* Logo para el menú Pegajoso */

@media (min-width: 1024px) {
	#contenedor {
	margin:0 30px 0 30px;
	}
}
@media (max-width: 1023px) {	
	#contenedor {
	margin:0 20px 0 20px;
	}
}

#contenedor_celeste {
background:#1890f1;
padding:30px 0 50px 0;
}

@media (min-width: 1024px) {
	.contenedor_100 {
	display:flex;
	width:100%;
	height:auto;
	justify-content:space-between; /* Distribuye de manera equitativa */
	align-items:stretch; /* Asegura que todos los divs tengan la misma altura */
	}
}
@media (max-width: 1023px) {	
	.contenedor_100 {
	width:100%;
	height:auto;
	}
}

/* Por qué elegirnos x reinacine.com */
@media (min-width: 1024px) {
	.contenedor_50 {
	width:50%; /* Cada div ocupa el 50% del ancho */
	justify-content:center;
	align-items:center;
	vertical-align:top;
	}
}
@media (max-width: 1023px) {	
	.contenedor_50 {
	}
}
.contenedor_50 img {
width:100%; /* La imagen ocupa el 100% del ancho */
height:100%; /* La imagen también ocupa el 100% de la altura */
object-fit:cover; /* La imagen se ajusta sin deformarse, pero puede recortarse */
}
.contenedor_50_texto {
margin:10px 50px;
}

@media (min-width: 1024px) {
	#margen_h {
	margin:0 50px 0 50px;
	}
}
@media (max-width: 1023px) {	
	#margen_h {
	margin:0 30px 0 30px;
	}
}

#left {
text-align:left;
}

#right {
text-align:right;
}

@media (min-width: 1024px) {
	#centrado {
	width:100%;
	text-align:center;
	}
	#centrado_responsive {
	width:100%;
	text-align:left;
	}
}
@media (max-width: 1023px) {	
	#centrado {
	width:100%;
	text-align:center;
	}
	#centrado_responsive {
	width:100%;
	text-align:center;
	}
}

@media (min-width: 1024px) {
	#productos {
	display:inline-block;
	width:19%;
	text-align:center;
	border:#CCCCCC 1px solid;
	border-radius:15px;
	margin:0 3px 10px 3px;
	vertical-align:top;
	}
		#productos:hover {
		border:#1890f1 1px solid;
		}
}
@media (max-width: 1023px) {	
	#productos {
	display:inline-block;
	width:100%;
	text-align:center;
	border:#CCCCCC 1px solid;
	border-radius:15px;
	margin:0 0 10px 0;
	vertical-align:top;
	}
		#productos:hover {
		border:#1890f1 1px solid;
		}
}

@media (min-width: 1024px) {
	.imagen_productos, .imagen_detalle {
	height:auto;
	}
		.imagen_productos {
		max-width:100%;
		padding:5px 5px 0 5px;
		}
		.imagen_detalle {
		max-width:400px;
		padding:8px 30px 0 0;
		}
		.imagen_logos {
		max-width:220px;
		padding:8px;
		}
		.imagen_wapp{
		display:inline-block; /* Asegura que se alineen horizontalmente */
		width:220px; /* Ajusta el tamaño según sea necesario */
		height:auto; /* Mantiene la proporción del PNG */
		margin:0 5px; /* Espaciado entre las imágenes */
		vertical-align:middle; /* Alineación vertical con el texto si aplica */
		}
}
@media (max-width: 1023px) {	
	.imagen_productos, .imagen_detalle {
	height:auto;
	}
		.imagen_productos {
		max-width:95%;
		padding:5px 0 0 0;
		}
		.imagen_detalle {
		max-width:95%;
		padding:8px 0 0 0;
		}
		.imagen_logos {
		max-width:50%;
		padding:8px 0;
		}
		.imagen_wapp{
		width:80%;
		margin:5px 0;
		clear:both;
		}
}

#informacion {
display:inline-block;
width:90%;
text-align:center;
margin:10px 0 5px 0;
vertical-align:top;
}
	.titulo {
	display:inline-block;
	width:90%;
	font-family:'Roboto', sans-serif;
	font-size:16px;
	color:#1890f1;
	letter-spacing:0.02em;
	text-align:center;
	padding:0 0 5px 0;
	clear:both;
	}

@media (min-width: 1024px) {
	#izquierda, #derecha {
	display:inline-block;
	width:40%;
	vertical-align:top;
	margin:0 0 30px 0;
	}
		#izquierda {
		text-align:right;
		}
		#derecha {
		text-align:left;
		}
}
@media (max-width: 1023px) {	
	#izquierda, #derecha {
	display:inline-block;
	text-align:center;
	margin:0 0 30px 0;
	vertical-align:top;
	}
		#detalle {
		width:100%;
		text-align:center;
		}
		#detalle {
		width:100%;
		text-align:center;
		}
}

#titulo_detalle {
display:inline-block;
color:#FFFFFF;
padding:10px 15px 10px 15px;
border:#1890f1 1px solid;
background:#1890f1;
}

#texto_detalle {
display:inline-block;
color:#1890f1;
padding:10px 15px 10px 15px;
border:#1890f1 1px solid;
}

@media (min-width: 1024px) {
	.imgExtendida {
	background-attachment:fixed;
	background-position:top center;
	display:block !important;
	width:100% !important;
	height:450px !important;
	background-repeat:no-repeat;
	background-size:cover;
	}
}
@media (max-width: 1023px) {
	.imgExtendida {
	display:block;
	width:100%;
	}
}

@media (min-width: 1024px) {
	.semaforo_verde, .semaforo_amarillo {
	display:inline-block;
	height:auto;
	text-align:center;
	border-radius:10px;
	padding:15px 20px 15px 20px;
	}
}
@media (max-width: 1023px) {
	.semaforo_verde, .semaforo_amarillo {
	display:inline-block;
	width:90%;
	height:auto;
	text-align:center;
	border-radius:10px;
	padding:15px;
	}
}

.semaforo_verde {
border:#c3e6cb 1px solid;
background:#d4edda;
color:#155724;
}

.semaforo_amarillo {
border:#aa8000 1px solid;
background:#fff2c7;
color:#aa8000;
}

@media (min-width: 1024px) {
	#input {
	width:50%;
	display:inline-block;
	text-align:center;
	clear:both;
	}
}
@media (max-width: 1023px) {
	#input {
	width:80%;
	display:inline-block;
	clear:both;
	}
}

@media (min-width: 1024px) {
	#input_corto {
	width:20%;
	display:inline-block;
	text-align:center;
	clear:both;
	}
}
@media (max-width: 1023px) {
	#input_corto {
	width:40%;
	display:inline-block;
	clear:both;
	}
}

@media (min-width: 1024px) {
	.input {
	display:inline-block;
	width:90%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	text-align:center;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	vertical-align:middle;
	padding:15px 10px 15px 10px;
	}
}
@media (max-width: 1023px) {
	.input {
	display:inline-block;
	width:80%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	text-align:center;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	vertical-align:middle;
	padding:15px 10px 15px 10px;
	}
}

@media (min-width: 1024px) {
	.input_txt {
	min-height:100px;
	max-height:100px;
	min-width:90%;
	max-width:90%;
	padding:15px 10px 15px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	}
}
@media (max-width: 1023px) {
	.input_txt {
	min-height:100px;
	max-height:100px;
	min-width:80%;
	max-width:80%;
	padding:15px 10px 15px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	}
}

@media (min-width: 1024px) {
	.boton {
	display:inline-block;
	height:30px;
	line-height:30px;
	background:#349200;
	text-align:center;
	font-family:'Comfortaa', cursive;
	font-size:18px;
	letter-spacing:0.02em;
	color:#FFFFFF;
	border:none;
	padding:0 20px 0 20px;
	cursor:pointer;
	}
	.boton:hover {
	color:#349200;
	background:#cfffb4;
	}
}
@media (max-width: 1023px) {
	.boton {
	display:inline-block;
	width:90%;
	height:30px;
	line-height:30px;
	background:#349200;
	text-align:center;
	font-family:'Comfortaa', cursive;
	font-size:18px;
	letter-spacing:0.02em;
	color:#FFFFFF;
	border:none;
	cursor:pointer;
	}
	.boton:hover {
	color:#349200;
	background:#cfffb4;
	}
}

#relleno      {clear:both; padding-top:0;}
#relleno_5px  {clear:both; padding-top:5px;}
#relleno_8px  {clear:both; padding-top:8px;}
#relleno_10px {clear:both; padding-top:10px;}
#relleno_15px {clear:both; padding-top:15px;}
#relleno_20px {clear:both; padding-top:20px;}
#relleno_30px {clear:both; padding-top:30px;}
#relleno_50px {clear:both; padding-top:30px;}

@media (min-width: 1024px) {
	#relleno_header {clear:both; padding-top:194px;}
}
@media (max-width: 1023px) {
	#relleno_header {clear:both; padding-top:88px;}
}

#whatsapp {
width:70px;
height:70px;
position:fixed;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
right:35px;
bottom:32px;
background:#4dc247;
border:#FFFFFF 3px solid;
border-radius:100%;
z-index:1000;
cursor:pointer;
}

/* Formulario de Contacto */
@media (min-width: 1024px) {
	#input {
	width:90%;
	display:inline-block;
	text-align:center;
	clear:both;
	}
}
@media (max-width: 1023px) {
	#input {
	width:95%;
	display:inline-block;
	clear:both;
	}
}

@media (min-width: 1024px) {
	.input {
	display:inline-block;
	width:90%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	text-align:center;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	vertical-align:middle;
	padding:15px 10px 15px 10px;
	}
}
@media (max-width: 1023px) {
	.input {
	display:inline-block;
	width:95%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	text-align:center;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	vertical-align:middle;
	padding:15px 10px 15px 10px;
	}
}

@media (min-width: 1024px) {
	.input_txt {
	min-height:100px;
	max-height:100px;
	min-width:90%;
	max-width:90%;
	padding:15px 10px 15px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	}
}
@media (max-width: 1023px) {
	.input_txt {
	min-height:100px;
	max-height:100px;
	min-width:95%;
	max-width:95%;
	padding:15px 10px 15px 10px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#666666;
	border-top:#FFFFFF 1px solid;
	border-left:#FFFFFF 1px solid;
	border-right:#FFFFFF 1px solid;
	border-bottom:#CCCCCC 1px solid;
	}
}

@media (min-width: 1024px) {
	.boton_enviar {
	display:inline-block;
	height:45px;
	line-height:45px;
	font-size:20px;
	background:#1890f1;
	text-align:center;
	font-family:'Montserrat', sans-serif;
	color:#FFFFFF;
	border:none;
	padding:0 35px;
	cursor:pointer;
	}
		.boton_enviar:hover {
		background:#1d3e9d;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
}
@media (max-width: 1023px) {
	.boton_enviar {
	display:inline-block;
	width:90%;
	height:45px;
	line-height:45px;
	font-size:20px;
	background:#1890f1;
	text-align:center;
	font-family:'Montserrat', sans-serif;
	color:#FFFFFF;
	border:none;
	padding:0 35px;
	cursor:pointer;
	}
		.boton_enviar:hover {
		background:#1d3e9d;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
}
/* Formulario de Contacto */

/* Textos */
.texto_roboto_blanco, .texto_roboto_negro, .texto_roboto_gris, .texto_roboto_azul_claro, .texto_roboto_azul_oscuro, .texto_roboto_celeste {
font-family:'Roboto', sans-serif;
font-size:16px;
letter-spacing:0.02em;
}
	.texto_roboto_blanco {
	color:#FFFFFF;
	}
	.texto_roboto_negro {
	color:#1D1D1D;
	font-weight:bold;
	}
	.texto_roboto_gris {
	color:#666666;
	}
	.texto_roboto_azul_claro {
	color:#1890f1;
	}
	.texto_roboto_azul_oscuro {
	color:#1d3e9d;
	}
	.texto_roboto_celeste {
	color:#80c5ff;
	}

.texto_comfortaa_azul, .texto_comfortaa_blanco, .texto_comfortaa_azul_detalle {
font-family:'Comfortaa', cursive;
}
	.texto_comfortaa_azul {
	font-size:25px;
	color:#1890f1;
	}
	.texto_comfortaa_blanco {
	font-size:25px;
	color:#FFFFFF;
	}
	.texto_comfortaa_azul_detalle {
	font-size:20px;
	color:#1890f1;
	}

.texto_montserrat {
font-family:'Montserrat', sans-serif;
text-transform:uppercase;
font-size:22px;
font-weight:bold;
color:#1890f1;
}

.texto_marca {
font-family:'Montserrat', sans-serif;
text-transform:uppercase;
font-size:18px;
color:#1d3e9d;
}

.texto_menu {
font-family:'Montserrat', sans-serif;
text-transform:uppercase;
font-size:18px;
color:#FFFFFF;
}

.texto_whatsapp {
font-size:45px;
color:#FFFFFF;
padding:3px 0 0 0;
}

@media (min-width: 1024px) {
	.redes, .redes_activa {
	font-size:35px;
	color:#666666;
	}
		.redes_activa {
		color:#1890f1;
		}
		.redes:hover, .redes_activa:hover {
		color:#1890f1;
		}
	.margen_redes {
	margin:0 0 0 10px;
	}
}
@media (max-width: 1023px) {
	.redes, .redes_activa {
	font-size:30px;
	color:#FFFFFF;
	}
	.margen_redes {
	margin:0 10px 0 0;
	}
}

/* Menú Exclusivos Monitores NO Responsive */
#menu_monitor {
margin:auto;
padding:10px;
}

/* Arreglos para el Webslidemenu */
.wsmainfull {
    position:fixed;
    top:120px; /* Posiciónelo justo debajo del header */
    width:100%;
    z-index:999; /* Menor que el header */
}
.wsmenu>.wsmenu-list>li>a {
	font-family:'Roboto', sans-serif;
	font-size:16px;
	color:#FFFFFF;
	letter-spacing:0.02em;
}

/* Centrar el menú */
.wsmenu {
    display:flex;
    justify-content:center; /* Centra el menú horizontalmente */
    align-items:center; /* Alinea verticalmente */
    position:relative;
}
/* Menú */
.wsmenu-list {
    display:flex;
    justify-content:center; /* Centra los elementos del menú */
    list-style:none;
    padding:0;
    margin:0;
}
.wsmenu-list > li {
    margin:0 15px; /* Espaciado entre los elementos del menú */
}
.wsmainfull {
    position:fixed;
    top:120px; /* Alineado con el header */
    width:100%;
    z-index:999;
    transition:top 0.4s ease; /* Transición suave para el menú */
}
/* Asegura que el espacio para el logo esté respetado */

/* Deslizable */
#hamburguesa {
	position:fixed;
	left:20px;
	font-size:30px;
	color:#1890f1;
	z-index:999;
	cursor:pointer;
	}
		#hamburguesa:hover {
		color:#CCCCCC;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
@media (min-width: 1024px) {
	#hamburguesa {
	display:none;
	}
}
@media (max-width: 1023px) {
	#hamburguesa {
	top:22px;
	}
}

.cierre {
display:block;
font-size:30px;
color:#FFFFFF;
margin:20px 0 0 30px;
cursor:pointer;
}
	.cierre:hover {
	color:#1d3e9d;
	-webkit-transition:all 0.4s ease;
	transition:all 0.4s ease;
	}

#deslizable {
position:fixed;
left:0;
top:0;
height:100vh;
overflow-x:hidden; /* Necesario para el estado inicial */
z-index:1000;
}
#deslizable > div {
height:100vh;
float:left;
z-index:1000;
}
#deslizable_contenido, #deslizable_contenido_2 {
width:350px;
-webkit-border-radius:0 30px 0 0;
-moz-border-radius:0 30px 0 0;
border-radius:0 30px 0 0;
background-color:#80c5ff;
}
	#deslizable_contenido {
	margin-left:-350px; /* Se le resta el width */
	}
	#deslizable_contenido_2 {
	margin-left:0; /* Se le resta el width */
	}
#contenedor_deslizable {
height:95vh;
overflow-x:hidden;
overflow-y:auto;
}
/* Deslizable */

/* Slide - Swiper */
.swiper {
    width: 100%;
    position: relative;
    height: calc(100vh - 194px); /* Altura completa por defecto */
}

@media screen and (max-width: 1024px) {
    .swiper {
        height: 60vh; /* 60% de la altura de la pantalla para pantallas menores a 1024px */
    }
}
.swiper-slide {
/*
text-align:center;
font-size:18px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
*/
}
.swiper-slide img {
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.swiper-button-next,
.swiper-button-prev {
color:#000000;
font-size:20px;
}
.swiper-pagination-progressbar {
background:#dddddd;
}
.swiper-pagination-progressbar-fill {
background:#000000;
}
/* Slide - Swiper */