/*=============================================
VARIABLES CSS (heredadas de style.css)
=============================================*/

/*=============================================
BANNER-INTERIOR
=============================================*/

.bannerInterior figure{
	position:relative;
	height:300px;
	overflow: hidden;
}

.bannerInterior figure::before{
	position:absolute;
	content:"";
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
	transition: var(--transition-smooth);
}

.bannerInterior figure:hover::before {
	background: linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
}

/*=============================================
INFO-HABITACION
=============================================*/

.infoHabitacion{
	position: relative;
	margin-top:-20px;
}

.infoHabitacion .colIzqHabitaciones{
	position:relative;
	margin-top:-170px;
}

.infoHabitacion .colIzqHabitaciones ul li a{
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	font-size:18px;
}

.infoHabitacion .colIzqHabitaciones ul li a.active{
	color:#FFE060 !important;
}

.infoHabitacion .colIzqHabitaciones .nav-link{
	border-right:1px solid white;
}


.infoHabitacion .colIzqHabitaciones .fa-angle-right:before{
    content: "\f105";
    background: rgba(255,255,255,.8);
    padding: 20px 10px;
 }

.infoHabitacion .colIzqHabitaciones .fa-angle-left:before {
    content: "\f104";
    background: rgba(255,255,255,.8);
    padding: 20px 10px;
}

.colIzqHabitaciones button{
	border-radius: var(--border-radius);
	background: linear-gradient(135deg, var(--bg-dark) 0%, #333 100%);
	color:white;
	border: none;
	transition: var(--transition-fast);
	box-shadow: var(--shadow-md);
	font-weight: 500;
}

.colIzqHabitaciones button:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
	background: linear-gradient(135deg, #333 0%, var(--bg-dark) 100%);
}

.colIzqHabitaciones p{
	line-height:30px;
	color:#666;
}

.colorTitulos{
	color: var(--secondary-color);
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(132,112,89,0.2);
}

.colDerHabitaciones{
	transition: var(--transition-smooth);
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.colDerHabitaciones:hover {
	box-shadow: var(--shadow-md);
}


/*=============================================
TESTIMONIOS
=============================================*/

.testimonios{
	position:relative;
	/* La imagen de fondo se configura desde el CMS y se aplica inline desde PHP */
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.testimonios::before{
	position:absolute;
	content:"";
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(134,118,100,.9);
}

.testimonios h1{
	position: relative;
}

.testimonios button{
	position:relative;
	background-color: rgba(0,0,0,0);
	border:2px solid white;
	color:white;
	border-radius: var(--border-radius);
	transition: var(--transition-fast);
	font-weight: 500;
	padding: 10px 25px;
}

.testimonios button:hover {
	background-color: white;
	color: var(--secondary-color);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/*=============================================
TABLET VERTICAL (MD revisamos en 768px hacia abajo)
=============================================*/

@media (max-width:768px){


	.infoHabitacion .colIzqHabitaciones .nav-link{
		border-right:0;
		border:1px solid #999;
	}

	.infoHabitacion .colIzqHabitaciones .cabeceraHabitacion{
		background: black;
	}

	.infoHabitacion .colIzqHabitaciones ul li{
		background:#333;
	}

	.infoHabitacion .colIzqHabitaciones ul li a.active{
		background-color: black !important;
	}

	.infoHabitacion .colIzqHabitaciones ul li a.active i{
		display:none;
	}

	.infoHabitacion .categoria{
		color:#af9475 !important;
	}

	.descripcionHabitacion h1{
		font-size:30px;
	}



}