@charset "utf-8";
/* Medios fluidos sencillos
   Nota: Los medios fluidos exigen la eliminación de los atributos de altura y anchura de los medios del código HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/

/*@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

html,body{
	margin:0px;
	height:100%;
	font-family:Armata, Verdana, Geneva, sans-serif;
	font-size:14px;
}

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}

/*
	Propiedades de cuadrícula fluida de Dreamweaver
	----------------------------------
	dw-num-cols-mobile:		5;
	dw-num-cols-tablet:		8;
	dw-num-cols-desktop:	10;
	dw-gutter-percentage:	25;
	
	Inspiración obtenida de "Responsive Web Design" de Ethan Marcotte 
	http://www.alistapart.com/articles/responsive-web-design
	
	y Golden Grid System de Joni Korpi
	http://goldengridsystem.com/
*/

/* DISEÑO MOVIL: 480 px e inferior. */

A:link, A:visited {
	color:#F60;
	text-decoration:none;
	}
A:hover {
	text-decoration:underline;
	}
H1, H2, H3 { letter-spacing: 1px !important; font-family: 'Open Sans', sans-serif !important;}
.menuMovil{display: inherit;}
.menuEscritorio {display: none;}
.mayusculas {text-transform:uppercase;}
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}
.cabecera{
	margin-left: auto;
	margin-right: auto;
	min-height:60%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	background: #000 url(imagenes/bg-cabecera.jpg) center top no-repeat;
	background-size:300%;
}
#logoCabecera {
	display: block;
	clear: both;
	float: left;
	margin-left:auto;
	margin-right:auto;
	margin-top:30px;
	width: 100%;
	display: block;
	text-align:center;
}
#logo{
	width:200px;
	}
#titulo{
	display:block;
	clear: both;
	background-color: rgba(0,0,0,0.5);
	font-style: 0.5em;
	width:100%;
	padding:5px 2%;
	margin-top:380px;
}
#titulo H1{
	color:#FFF;
	font-size:1.3em;
	text-transform:uppercase;
	text-align:center;
	font-weight:bolder;
	padding-top:0;
	padding-bottom:0;
	}

.navBarBottom, .navBarTop {
	/* mismas propiedades del gridContainer de estilo-reserva */
	margin-left: auto;
	margin-right: auto;
	width: 100%; 
	padding-left: 2%;
	padding-right: 2%;	
	background:#FFF;
	overflow: hidden;
}

/* BARRA DE NAVEGACIÓN SUPERIOR.naBarTop*/
.navBarTop{
	background:#333;
	border-top:10px solid #000;
	}
	
	.navBarTopEnlace{
		color:#FFF;
		font-family: 'Open Sans Condensed', sans-serif;
		font-size:1.2em;
		text-transform:uppercase;
		text-decoration:none;
		display:block;
		padding:10px 10px;
		border-bottom:1px solid #000;
	}
	A:Link.navBarTopEnlace {
		color:#FFF;
	}
	A:Hover.navBarTopEnlace {
		color:#FFF;
		background:#F00;
		border-bottom:1px solid #F00;
		text-decoration:none;
	}
	A:Visited.navBarTopEnlace {
		color:#FFF;
	}
	
#presentacion {
	color:#FFF;
	text-align:center;
	display: block;
	margin-top:0;
	background:#000;
	padding-top: 15px;
	}
#presentacion P {
	font-size:1em;
	padding:10px;
	text-transform:uppercase;
	line-height:1.4em;
	}
	
.fondoBlanco{
	background:#FFF;
	display:block;
}
.subtitulo {
	color:#999;
	text-align:center;
}
.subtitulo H2 {
	text-transform:uppercase;
	font-size:1.5em;
	padding:10px;
	}
.subtitulo H2 span {
    background: #fff;
    display: inline-block;
    padding: 0 20px;
    position: relative;
    width: auto;
    z-index: 1;
    text-align: center !important;
	}
.subtitulo HR {
	color:#999;
	border: solid 1px #777;	
	z-index:0;
	margin-top:-35px;
	height: 3px;
}
#bloqueServicios {
	color:#777;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
	}
#bloqueServicios UL{
	list-style:none;
	display:inline-block;
	padding:0;
	margin-right:0;
	margin-left:0;
	}
	#bloqueServicios LI {
		display:inline-block;
		text-align:center;
		color:#888;
		margin:10px;
		width:30%;
		font-size:0.9em;
		text-transform:uppercase;
		}
		#bloqueServicios P {
			padding:10px;
			font-size:0.85em;
		}
#bloqueHabitaciones {
	text-align:center;
	}
.separador{
	display:block;
	clear:both;
	width:100%;
	height:2.5em;
	}
.habitacion {
	width:100%;
	margin-left:0;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	margin-top:50px;
	text-align:center;
	color:#888;
	font-size:1em;
	border-bottom:3px dotted #999999;
	}
.habitacion H3 {
	color:#900;
	text-transform:uppercase;
	}
.habitacion P {
	padding-left:10px;
	padding-right:10px;
	line-height:1.5em;
	margin-top: 10px;
	}
.terminosCondiciones {
	width: auto;
	display:inline-block;
	clear:both;
	line-height:2.5em;
}

#bloqueLocation {
	text-align:justify;
	overflow:hidden;
	}
#bloqueLocation H3{
	color:#555;
	text-transform:uppercase;
	text-align:center;
	font-size:1.2em;
	font-weight:normal;
	line-height:1.3em;
	max-width:90%;
	margin: 1em auto;
}
#bloqueLocation P {
	color:#666;
	max-width:94%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#bloqueContact-us {
	text-align:justify;
	overflow:hidden;
	}
#bloqueContact-us H3{
	color:#555;
	text-transform:uppercase;
	text-align:center;
	font-size:1.2em;
	font-weight:normal;
	line-height:1.3em;
	max-width:90%;
	margin: 1em auto;
}
#bloqueContact-us P {
	color:#666;
	max-width:94%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#bloqueTours {
	text-align:justify;
	overflow:hidden;
	}
#bloqueTours H3{
	color:#555;
	text-transform:uppercase;
	text-align:center;
	font-size:1.2em;
	font-weight:normal;
	line-height:1.3em;
	max-width:90%;
	margin: 1em auto;
}
#bloqueTours P {
	color:#666;
	max-width:94%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#mapaUbicacion{
	width:70%;
	height:350px;
	margin:3em auto;
}

#piePagina {
	color:#999;
	text-align:center;
	background:#000;
	display:block;
	width:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}
#informacionPiePagina {
	width:90%;
	margin: 3em auto;
	line-height:1.5em;
}
#piePaginaFecha {
	display:block;
	clear:both;
	float:none;
	}
#piePaginaFirma {
	color:#CCC;
	font-size:1.1em;
	}


/* DISEÑO TABLETA: de 481 px a 768 px. Hereda estilos de: Diseño móvil. */

@media only screen and (min-width: 481px) {
.navBarTop{
	width: 100%;
	margin-left: 0; margin-right: 0;
	padding-left: 0; padding-right: 0;
	overflow: hidden;
}
.gridContainer {
	width: 97.5%;
	padding-left: 1.25%;
	padding-right: 1.25%;
}
.cabecera {
	background: #000000 url(imagenes/bg-cabecera.jpg) center top no-repeat;
	min-height:600px;
	background-size:none;	
}
#logoCabecera {
	margin-top:50px;
}
#logo{
	width:250px;
	}
#presentacion{
	overflow: hidden;
}
#titulo{
	margin-top:80%;
	padding-top:2px;
	padding-bottom:2px;
	}
#titulo H1{
	font-size:2em;
	}
.subtitulo H2 {
	text-transform:uppercase;
	font-size:1.7em;
	padding:10px;
	}
.subtitulo HR {
	margin-top:-35px;
}

#bloqueServicios {
}
#bloqueServicios LI {
		width:25%;
		font-size:1em;
		}

#bloqueHabitaciones{
}

.habitacion {
	display:block;
	float:left;
	width:96%;
	margin-left:0;
	margin-right:2%;
	padding-left:2%;
	padding-right:0;
	margin-top:50px;
	text-align:center;
	color:#888;
	font-size:1em;
	border:none;
	height: 400px;
	}	
.habitacion H3 {
	color:#900;
	text-transform:uppercase;
	}
.habitacion P {
	padding-left:10px;
	padding-right:10px;
	line-height:1.5em;
	margin-top: 10px;
	}


}

/* DISEÑO ESCRITORIO: de 769 px hasta un máximo de 1232 px.  Hereda estilos de: Diseño móvil y Diseño tableta. */

@media only screen and (min-width: 769px) {
.gridContainer {
	width: 98%;
	max-width: 1232px;
	padding-left: 1%;
	padding-right: 1%;
	margin: auto;
	}
.menuMovil{display: none;}
.menuEscritorio{display: inherit;
	background: rgba(0,0,0,0.5);
	border-top: none;
	padding-top: 10px;
}

.menuEscritorio A {
  transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
  	-o-transition: all 0.7s ease;
  color: #FFF;
  text-decoration: none;
}
.menuEscritorio A:hover {
  color: #F00;
  background: none;
  text-decoration: underline !important;
}

.cabecera {
	min-height:90%;
	background-size:cover;
	}
#logo{
	width:320px;
	}
#titulo{
	min-width:inherit;
	max-width:970px;
	margin-top:36%;
	padding-top: 10px; padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	}
#titulo H1{
	font-size:3em;
	padding-top:0;
	padding-bottom:0;
	margin-top:10px;
	margin-bottom:0;
	}

/* ESTILO PARA LA BARRA DE NAVEGACIÓN */
.navBarTop, .navBarBottom {
	text-align:center;
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:normal;
}
.navBarTop P {margin-top:0; margin-bottom:0;}
.navBarTopEnlace{
	color:#FFF;
	text-decoration:none;
	font-size: 16px;
	letter-spacing: 1px;
	word-spacing: 1px;
	font-weight: bold;
	display:inline-block;
	padding:10px 30px;
	border-bottom:0;
	background: none;
	}
.navBarEnlace{
	color:#FFF;
	text-decoration:none;
	display:inline-block;
	padding:10px;
	border-bottom:0;
	background: none;
	}
.navBarBottom, .navBarTop {
	width:100%;
	margin:auto;
	padding-left:0;
	padding-right:0;
	font-size: 12px;
	}
A:Hover.navBarTopEnlace {
	text-decoration:none;
	border:none;
	}
.contenedor {
	/* para centrar los contenidos */
	max-width:970px;
	padding-left:10px;
	padding-right:10px;
	margin:auto;
	}
#presentacion {
	margin-top:0;
	padding-top:20px;
	background:#000;
	}
#presentacion P {
	font-size:1.5em;
	max-width:950px;
	padding:10px 10px 0 10px;
	margin-bottom:0;
	text-transform:uppercase;
	line-height:1.4em;
	}
.fondoBlanco{
	background:#FFF;
	display:block;
	width:96%;
	padding-left:2%;
	padding-right:2%;
	margin-left: auto;
	margin-right: auto;
}
.subtitulo {
	text-align:center;
}
.subtitulo H2 {
	text-transform:uppercase;
	font-size:3em;
	padding:10px;
	}
.subtitulo H2 span {
    background: #fff;
    display: inline-block;
    padding: 0 20px;
    position: relative;
    width: auto;
    z-index: 1;
    text-align: center !important;
	}
.subtitulo HR {
	margin-top:-45px;
	height: 4px;
	background-color:#999;
	border:none;
	}
#bloqueServicios {
	color:666;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px;
	}
#bloqueServicios UL{
	list-style:none;
	display:inline-block;
	padding:0;
	}
	#bloqueServicios LI {
		display:inline-block;
		text-align:center;
		color:#888;
		margin:10px;
		width:20%;
		font-size:1em;
		}
#bloqueHabitaciones {
	display: block;
	clear: both;
	text-align:center;
	overflow:hidden;
	}
.separador{
	display:block;
	clear:both;
	width:100%;
	height:2em;
	}
.habitacion {
	/*
	Original -> width:22.2%;
	Segunda modificación -> width: 30.5%; /* se aumento el ancho por que se elimino un elemento de esta sección */
	width: 47%;
	margin-left:1.45%;
	margin-right:1.2%;
	padding-left:0;
	padding-right:0;
	margin-top:50px;
	text-align:center;
	color:#888;
	display:block;
	font-size:0.9em;
	float:left;
	border:none;
	}
.habitacion H3 {
	color:#900;
	font-size: 1.3em;
	text-transform:uppercase;
	}
.habitacion P {
	margin-top: 15px;
	line-height:1.6em;
	}
.terminosCondiciones {line-height:5em;}

#bloqueLocation {
	text-align:center;
	overflow:hidden;
	}
#bloqueLocation H3{
	color:#555;
	text-transform:uppercase;
	font-size:2em;
	font-weight:normal;
	line-height:1.5em;
	max-width:50%;
	margin: 1em auto;
}
#bloqueLocation P {
	max-width:80%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#bloqueContact-us {
	text-align:center;
	overflow:hidden;
	}
#bloqueContact-us H3{
	color:#555;
	text-transform:uppercase;
	font-size:2em;
	font-weight:normal;
	line-height:1.5em;
	max-width:50%;
	margin: 1em auto;
}
#bloqueContact-us P {
	max-width:80%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#bloqueTours {
	text-align:center;
	overflow:hidden;
	}
#bloqueTours H3{
	color:#555;
	text-transform:uppercase;
	font-size:2em;
	font-weight:normal;
	line-height:1.5em;
	max-width:50%;
	margin: 1em auto;
}
#bloqueTours P {
	max-width:80%;
	line-height:1.8em;
	margin:1.6em auto;
	}

#mapaUbicacion{
	width:80%;
	height:500px;
	margin:3em auto;
}

#piePagina {
	color:#999;
	text-align:left;
	background:#000;
	display:block;
	width:100%;
	margin:0;
	padding:3em 0;
	overflow:hidden;
}
#informacionPiePagina {
	width:90%;
	max-width:970px;
	margin: 3em auto;
	line-height:1.5em;
}
#piePaginaFecha {
	display:block;
	clear:both;
	float:right;
	}
#piePaginaFirma {
	color:#CCC;
	font-size:1.2em;
	}
	
}