@charset "utf-8";
/* CSS Document */
/* Azul Institucional: #003691 */
/* Azul Oscuro: #203860 */
/* Celeste: #599cd6 */
/* Celeste Oscuro: #3371a5 */
/* Beige: #e2d3c3 */
/* Amarillo: #fedd6c */
/* Gris Oscuro: #2D2D2D */
/* Gris ++Oscuro: #1D1D1D */
/* Gris ++++Claro: #efeeea */

@media (min-width: 1024px) {
	#wrap {
	height:auto;
	min-height:100%;
	}
}
@media (max-width: 1023px) {	
	#wrap {
	}
}
@media (min-width: 1024px) {
	#main {
	padding:0;
	}
}
@media (max-width: 1023px) {
	#main {
	padding:0;
	}
}

@media (min-width: 1024px) {
	.monitor {
	}
}
@media (max-width: 1023px) {	
	.monitor {
	display:none;
	}
}

@media (min-width: 1024px) {
	.mobile {
	display:none;
	}
}
@media (max-width: 1023px) {	
	.mobile {
	}
}

header {
position:fixed;
height:auto;
width:100%;
-webkit-transition:all 0.4s ease;
transition:all 0.4s ease;
z-index:999;
}

#contenedor_menu {
width:100%;
margin:0 auto;
clear:both;
}

/* Sticky */
#logo, #contenedor_menu {
    transition:margin-top 0.5s ease-out; /* Transición suave para ambos elementos */
    position:relative; /* Asegura que el movimiento sea relativo al contenedor */
}

#logo.shift-up {
    margin-top:-120px; /* Ajustado a la altura exacta del logo */
}

#contenedor_menu.shift-up {
    margin-top:-120px; /* Ajustado para que el menú suba exactamente la misma distancia */
}

#logo {
	height:100px;
	text-align:center;
	background:#e2d3c3;
	padding:10px 0;
	z-index:998;
}

.logo {
	height:100px;
}

.iso {
	height:45px;
}

/* IsoLogo Responsive x reinacine.com */
#pull {
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%; /* Asegura que ocupe todo el ancho */
    position:relative; /* Para que el logo se posicione relativo al contenedor */
}

.iso_responsive {
    opacity:0; /* Oculto inicialmente */
    height:35px;
    transition:opacity 0.5s ease-in-out; /* Transición suave */
    pointer-events:none; /* Evita la interacción cuando está oculto */
    position:absolute;
    right:20px; /* Alineado a la derecha */
    top:50%; /* Centrado verticalmente */
    transform:translateY(-50%);
}
/* IsoLogo Responsive x reinacine.com */

/* Menú x reinacine.com */
@media (min-width: 1024px) {
	.menu {
    width:100%;
	display:flex; /* Usar flexbox para organizar el logo y el menú */
    align-items:center; /* Alinear verticalmente los elementos */
    justify-content:center; /* Centrar los botones del menú */
	padding:10px 0; /* Espacio opcional para ajustar la separación */
    position:relative; /* Necesario para posicionar el logo */
	border-top:#e2d3c3 1px solid;
    background-color:#203860;
    text-transform:uppercase;
    font-size:17px;
	}
}
@media (max-width: 1023px) {	
	.menu {
    width:100%;
    align-items:center; /* Alinear verticalmente los elementos */
    justify-content:center; /* Centrar los botones del menú */
    position:relative; /* Necesario para posicionar el logo */
	border-top:#e2d3c3 1px solid;
    background-color:#203860;
	}
}

.menu ul {
    list-style-type:none;
    display:inline-flex;
    justify-content:space-around;
    margin:0;
}

.menu ul li {
    position:relative;
}

@media (min-width: 1024px) {
	.menu ul li a {
	color:#e2d3c3;
    text-decoration:none;
    padding:15px 20px;
    display:block;
    transition:background-color 0.3s, color 0.3s;
	}
}
@media (max-width: 1023px) {	
	.menu ul li a {
	color:#e2d3c3;
	background-color:#003691;
    text-decoration:none;
    padding:0 0 0 20px;
    display:block;
    transition:background-color 0.3s, color 0.3s;
	}
}

@media (min-width: 1024px) {
	.menu ul li a:hover {
	color:#FFFFFF;
    transition:background-color 0.3s, color 0.3s;
	}
}
@media (max-width: 1023px) {	
	.menu ul li a:hover {
	color:#FFFFFF;
	background-color:#2D2D2D;
    transition:background-color 0.3s, color 0.3s;
	}
}

.menu ul li .submenu {
	width:auto; /* Permite que el submenú tome su propio ancho */
    min-width:300px; /* Ancho mínimo para evitar que se comprima demasiado */
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background-color:#203860;
    opacity:0;
    transition:opacity 0.3s ease;
}

.menu ul li .submenu li {
    text-align:left;
}

.menu ul li .submenu li a {
    padding:10px 10px 10px 21px;
    display:block;
    transition:background-color 0.3s ease;
}

.menu ul li .submenu li a:hover {
    background-color:#3371a5;
}

.menu ul li:hover .submenu {
    display:block;
    opacity:1;
}

@media (max-width: 768px) {
    .menu ul {
        flex-direction:column;
    }
}
/* Menú x reinacine.com */

/* Estilo para el logo del menú */
.menu-logo {
    position:absolute; /* Coloca el logo de forma absoluta dentro del contenedor */
    left:20px; /* Ajusta la distancia desde el borde izquierdo */
    top:50%; /* Centra verticalmente el logo */
    transform:translateY(-50%); /* Corrige el centrado vertical */
    transition:all 0.5s ease; /* Transición suave para el cambio de logo */
    opacity:0; /* Logo NO visible inicialmente */
}

/* Cambio de logo cuando se hace scroll o clic */
.menu-logo.changed {
    opacity:1; /* Ajusta esto según tu efecto deseado */
    visibility:visible;
    transform:translateY(0); /* El logo sube hacia arriba con scroll */
    top:10px; /* Ajusta su posición al hacer scroll */
}

/* Estilo para el menú */
.menu-items {
    display:flex; /* Mantener los elementos del menú alineados al centro */
    list-style:none;
    margin:0;
    padding:0;
}

.menu-items li {
    margin-left:20px; /* Espacio entre los botones del menú */
}
/* Sticky */

@media (min-width: 1024px) {
	.smoothScroll:before {
	display:block;
	content:" ";
	margin-top:-100px; /* Corresponden shift-up - 20 */
	height:100px; /* Corresponden shift-up - 20 */
	visibility:hidden;
	}
}
@media (max-width: 1023px) {
	.smoothScroll:before {
	display:block;
	content:" ";
	margin-top:-70px;
	height:70px;
	visibility:hidden;
	}
}

/* Responsive para el Footer */
@media (min-width: 1024px) {
	#footer {
	width:100%;
	text-align:center;
	background:#2D2D2D;
	border-top:#e2d3c3 1px solid;
	clear:both;
	}
}
@media (max-width: 1023px) {
	#footer {
	width:100%;
	text-align:center;
	background:#2D2D2D;
	border-top:#e2d3c3 1px solid;
	clear:both;
	}
}

#variable_footer {
display:inline-block;
width:100%;
margin:30px 0;
}
/* Responsive para el Footer */

@media (min-width: 1024px) {
	#contenedor {
	margin:0 30px 0 30px;
	}
}
@media (max-width: 1023px) {	
	#contenedor {
	margin:0 20px 0 20px;
	}
}

#centrado {
width:100%;
text-align:center;
}
#left {
width:100%;
text-align:left;
}
#right {
width:100%;
text-align:right;
}
#justify {
width:100%;
text-align:justify;
}
@media (min-width: 1024px) {
	#justify_servicios {
	width:100%;
	text-align:justify;
	}
}
@media (max-width: 1023px) {	
	#justify_servicios {
	width:100%;
	text-align:left;
	}
}
.margen_h_botones {
margin:0 0 0 30px;
}

@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 */
	display:flex;
	justify-content:center;
	align-items:center;
	}
}
@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;
}
/* Por qué elegirnos x reinacine.com */

/* Para los bloques de texto que van dentro del Contenedor de 30px */
.contenedor_20_texto {
margin:0 20px;
}
/* Para los bloques de texto que van dentro del Contenedor de 30px */

/* Servicios en Index x reinacine.com */
.contenedor_servicios {
width:100%;
display:grid;
grid-template-columns:33.33% 33.33% 33.33%;
gap:0px; /* Elimina los espacios entre tarjetas */
text-align:center;
}

.div1, .div2, .div3, .div4, .div5, .div6, .div7 {
padding:30px;
height:350px; /* Ajusta según necesites */
color:white;
display:flex;
flex-direction:column;
justify-content:space-between;
}

/* Colores personalizados para cada div */
@media (min-width: 1024px) {
	.div1 {background-color: #2D2D2D;}
	.div2 {background-color: #203860;}
	.div3 {background-color: #e2d3c3;}
	.div4 {background-color: #e2d3c3;}
	.div5 {background-color: #3371a5;}
	.div6 {background-color: #2D2D2D;}
}
@media (max-width: 1023px) {	
	.div1 {background-color: #2D2D2D;}
	.div2 {background-color: #203860;}
	.div3 {background-color: #e2d3c3;}
	.div7 {background-color: #3371a5;}
	.div5 {background-color: #2D2D2D;}
	.div6 {background-color: #203860;}
}

/* Adaptación para pantallas medianas */
@media (max-width: 768px) {
    .contenedor_servicios {
        grid-template-columns: 50% 50%;
    }
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 480px) {
    .contenedor_servicios {
        grid-template-columns: 100%;
    }
}
/* Servicios en Index x reinacine.com */

/* Fotos Inclusión */
.container {
display:flex;
justify-content:center;
gap:10px;
max-width:100vw;
margin:0 auto;
padding:20px;
flex-wrap:wrap;
}
@media (max-width: 1024px) {
.container {
	grid-template-columns:80%; /* Dos columnas verticales y una columna horizontal en el medio */
	display:inline-block;
	}
}

/* Estilos para las imágenes */
.container img {
height:450px; /* Altura fija de 450px */
object-fit:cover;
border-radius:15px;
}
@media (max-width: 1023px) {
	.container img {
	width:100%; /* Cada imagen ocupa el 100% del ancho en pantallas pequeñas */
	height:auto; /* Ajusta la altura automáticamente en pantallas pequeñas */
	margin:5px;
	}
}

@media (min-width: 1024px) {
	.container img:first-child, 
	.container img:last-child {
	width:25%; /* Imágenes de los costados ocupan el 30% cada una */
	}
	.container img:nth-child(2) {
	width:35%; /* Imagen del medio ocupa el 40% */
	}
}
@media (max-width: 1023px) {
	.container img:first-child, 
	.container img:last-child {
	width:100%;
	}
	.container img:nth-child(2) {
	width:100%;
	}
}
/* Fotos Inclusión */

.marco_celeste {
width:70%;
display:inline-block;
color:#599cd6;
border:1px solid #599cd6;
padding:20px;
border-radius:10px;
text-align:center;
}

.marco_beige {
width:100%;
display:inline-block;
text-align:center;
background:#e2d3c3;
}

.contenedor_beige {
width:75%;
display:inline-block;
padding:30px 0;
}

@media (min-width: 1024px) {
	#submenu {
	width:100%;
    display:inline-block;
	background:#203860;
	padding:50px 0;
	border-top:#e2d3c3 1px solid;
	clear:both;
	}
}
@media (max-width: 1023px) {	
	#submenu {
	width:100%;
    display:inline-block;
	background:#203860;
	padding:50px 0 0 0;
	border-top:#e2d3c3 1px solid;
	clear:both;	
	}
}

@media (min-width: 1024px) {
	#variable_submenu_1, #variable_submenu_2 {
    display:inline-block;
	vertical-align:top;
	}
		#variable_submenu_1 {
		width:40%;
		}
		#variable_submenu_2 {
		width:30%;
		}
	#margen {
	margin:0 0 0 20px;
	}
	#margen_right {
	margin:0 20px 0 0;
	}
	#margen_footer {
	}
	#margen_mapa {
	margin:0 20px;
	}
}
@media (max-width: 1023px) {	
	#variable_submenu {
	width:100%;
    display:inline-block;
	vertical-align:top;
	}
	#margen {
	margin:0 0 20px 20px;
	}
	#margen_right {
	margin:20px 20px 20px 0;
	}
	#margen_footer {
	margin:0 20px 0 20px;
	}
	#margen_mapa {
	margin:0 20px;
	}
}

#iconos {
display:inline-block;
width:15px;
}

.edificio {
display:inline-block;
width:auto;
height:300px;
border-radius:15px;
border:#e2d3c3 2px solid;
}

@media (min-width: 1024px) {
	.imgExtendida {
	background-attachment:fixed;
	background-position:top center;
	display:block !important;
	width:100% !important;
	height:550px !important;
	background-repeat:no-repeat;
	background-size:cover;
	opacity:0.65;
	}
}
@media (max-width: 1023px) {
	.imgExtendida {
	display:block;
	width:100%;
	opacity:0.65;
	}
}

#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:50px;}
@media (min-width: 1024px) {
	#relleno_slide_index {clear:both; padding-top:20%; background:#e2d3c3;}
}
@media (max-width: 1023px) {
	#relleno_slide_index {clear:both; padding-top:180px; background:#e2d3c3;}
}

@media (min-width: 1024px) {
	#relleno_slide {clear:both; padding-top:180px; background:#e2d3c3;}
}
@media (max-width: 1023px) {
	#relleno_slide {clear:both; padding-top:180px; background:#e2d3c3;}
}

#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-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:80%;
	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_enviar {
	display:inline-block;
	height:45px;
	line-height:45px;
	font-size:20px;
	background:#599cd6;
	text-align:center;
	font-family:'Montserrat', sans-serif;
	color:#FFFFFF;
	border:none;
	padding:0 35px;
	cursor:pointer;
	}
		.boton_enviar:hover {
		background:#003691;
		-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:#599cd6;
	text-align:center;
	font-family:'Montserrat', sans-serif;
	color:#FFFFFF;
	border:none;
	padding:0 35px;
	cursor:pointer;
	}
		.boton_enviar:hover {
		background:#003691;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
}

@media (min-width: 1024px) {
	.semaforo_verde, .semaforo_amarillo {
	display:inline-block;
	width:75%;
	height:auto;
	text-align:center;
	border-radius:10px;
	padding:15px 10px 15px 10px;
	margin:10px auto; /* Centra horizontalmente */
	}
}
@media (max-width: 1023px) {
	.semaforo_verde, .semaforo_amarillo {
	display:inline-block;
	width:90%;
	height:auto;
	text-align:center;
	border-radius:10px;
	padding:15px;
	margin:10px auto; /* Centra horizontalmente */
	}
}

.semaforo_verde {
border:#c3e6cb 1px solid;
background:#d4edda;
color:#155724;
}

.semaforo_amarillo {
border:#aa8000 1px solid;
background:#fff2c7;
color:#aa8000;
}
/* Formulario de Contacto */

/* Texto WAPP */
.texto_whatsapp {
font-size:45px;
color:#FFFFFF;
padding:3px 0 0 0;
}
/* Texto WAPP */

/* Botones Servicios */
.boton_blanco, .boton_negro {
	width:70%;
	display:inline-block; /* Hace que el div se comporte como un botón */
	font-family:'Montserrat', sans-serif;
	font-size:17px;
	text-transform:uppercase;
	padding:15px 0; /* Ajusta el espacio dentro del botón */
	border-radius:10px; /* Ángulos redondeados */
	text-align:center; /* Centra el texto */
	transition:all 0.3s ease; /* Suaviza la transición de color al hacer rollover */
	cursor:pointer; /* Cambia el cursor a mano para indicar clic */
}
	.boton_blanco {
		color:#FFFFFF; /* Texto blanco al hacer rollover */
		border:#FFFFFF 1px solid; /* Mantiene el borde azul */
	}
	.boton_negro {
		color:#1D1D1D; /* Texto blanco al hacer rollover */
		border:#1D1D1D 1px solid; /* Mantiene el borde azul */
	}
		.boton_blanco:hover {
			background-color:#FFFFFF; /* Fondo azul al hacer rollover */
			color:#1D1D1D; /* Texto blanco al hacer rollover */
			border:#FFFFFF 1px solid; /* Mantiene el borde azul */
		}
		.boton_negro:hover {
			background-color:#1D1D1D; /* Fondo azul al hacer rollover */
			color:#FFFFFF; /* Texto blanco al hacer rollover */
			border:#1D1D1D 1px solid; /* Mantiene el borde azul */
		}
/* Botones Servicios */

/* Textos */
.texto_roboto_blanco, .texto_roboto_negro, .texto_roboto_beige, .texto_link {
font-family:'Montserrat', sans-serif;
font-size:17px;
}
	.texto_roboto_blanco, .texto_link {
	color:#FFFFFF;
	}
	.texto_roboto_negro {
	color:#1D1D1D;
	}
	.texto_roboto_beige {
	color:#e2d3c3;
	}
.texto_titulos, .texto_titulos_blanco, .texto_titulos_negro, .texto_titulos_servicios {
font-family:'Montserrat', sans-serif;
text-transform:uppercase;
}
	.texto_titulos {
	font-size:25px;
	color:#203860;
	}
	.texto_titulos_blanco {
	font-size:20px;
	color:#FFFFFF;
	}
	.texto_titulos_negro {
	font-size:20px;
	color:#1D1D1D;
	}
	@media (min-width: 1024px) {
		.texto_titulos_servicios {
		font-size:25px;
		color:#FFFFFF;
		padding:10px 35px;
		background:#599cd6;
		border-radius:10px;
		}
	}
	@media (max-width: 1023px) {
		.texto_titulos_servicios {
		font-size:15px;
		color:#FFFFFF;
		padding:10px 20px;
		background:#599cd6;
		border-radius:10px;
		}
	}
.texto_secciones {
font-family:'Montserrat', sans-serif;
text-transform:uppercase;
font-size:25px;
font-weight:bold;
color:#003691;
}

@media (min-width: 1024px) {
	.texto_awesome, .texto_awesome_blanco {
	margin:0 0 0 8px;
	}
	.texto_awesome {
	font-size:30px;
	color:#599cd6;
	}
	.texto_awesome_blanco {
	font-size:25px;
	color:#FFFFFF;
	}
}
@media (max-width: 1023px) {
	.texto_awesome, .texto_awesome_blanco {
	margin:0 5px 0 0;
	}
	.texto_awesome {
	font-size:25px;
	color:#599cd6;
	}
	.texto_awesome_blanco {
	font-size:22px;
	color:#FFFFFF;
	}
}

.texto_leyenda {
font-family:'Comfortaa', cursive;
font-size:25px;
color:#203860;
letter-spacing:0.02em;
}

@media (min-width: 1024px) {
	.texto_awesome, .texto_awesome_blanco {
	margin:0 0 0 8px;
	}
	.texto_awesome {
	font-size:30px;
	color:#203860;
	}
	.texto_awesome_blanco {
	font-size:25px;
	color:#FFFFFF;
	}
		.texto_awesome:hover {
		color:#CCCCCC;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
}
@media (max-width: 1023px) {
	.texto_awesome, .texto_awesome_blanco {
	margin:0 5px 0 0;
	}
	.texto_awesome {
	font-size:25px;
	color:#203860;
	}
	.texto_awesome_blanco {
	font-size:22px;
	color:#FFFFFF;
	}
		.texto_awesome:hover {
		color:#CCCCCC;
		-webkit-transition:all 0.4s ease;
		transition:all 0.4s ease;
		}
}
/* Textos */

/* Slide INDEX */
@media (min-width: 1024px) {
	.fluid_container_index {
	height:80%;
	position:absolute;
	left:0;
	right:0;
	top:20%;
	bottom:0;
	z-index:0;
	}
	#camera_wrap_lamensaviola {
	height:100%;
	margin-bottom:0!important;
	left:0;
	right:0;
	top:0;
	bottom:0;
	}
}
@media (max-width: 1023px) {
	.fluid_container_index {
	height:430px;
	left:0;
	right:0;
	z-index:0;
	}
	#camera_wrap_lamensaviola {
	height:430px;
	left:0;
	right:0;
	}
}
@media only screen and (max-width: 400px) {
	.fluid_container_index {
	height:280px;
	left:0;
	right:0;
	z-index:0;
	}
	#camera_wrap_lamensaviola {
	height:280px;
	left:0;
	right:0;
	}
}
/* Slide INDEX */