/* ===== PÁGINA CABAÑAS ===== */

.hero-cabanas{
	width: 100%;
	height: 85vh;
	background: url("../img/cabanas-portada.jpg") center/cover no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin-top: 90px;
}

.overlay-cabanas{
	background: rgba(0, 0, 0, 0.45);
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	color: white;
}

.overlay-cabanas h1{
	font-size: 55px;
	margin-bottom: 15px;
}

.overlay-cabanas p{
	font-size: 22px;
	margin-bottom: 25px;
	max-width: 700px;
}

.btn-cabanas-principal{
	display: inline-block;
	padding: 14px 32px;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 40px;
	font-size: 20px;
	font-weight: bold;
	transition: 0.3s ease;
}

.btn-cabanas-principal:hover{
	background: #333;
	transform: scale(1.05);
}

/* ===== SECCIÓN CABAÑAS ===== */

.seccion-cabanas{
	padding: 60px 8%;
	background: #f4f4f4;
}

.seccion-cabanas h2{
	text-align: center;
	font-size: 48px;
	margin-bottom: 40px;
	color: #111;
}

.contenedor-cabanas{
	display: flex;
	flex-direction: column;
	gap: 35px;
}

/* ===== TARJETA ===== */

.card-cabana{
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0,0,0,0.10);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-cabana:hover{
	transform: translateY(-5px);
	box-shadow: 0 12px 26px rgba(0,0,0,0.14);
}

/* ===== SLIDER / IMAGEN ===== */

.slider-cabana{
	position: relative;
	width: 100%;
	height: 200px;
	overflow: hidden;
	background: #000; /* para que si sobra espacio se vea elegante */
}

/* IMPORTANTE:
   contain = muestra la imagen completa sin cortarla */
.slide{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	display: none;
}

/* imagen visible */
.slide.activo{
	display: block;
}

/* por si vuelves a usar una imagen de prueba */
.imagen-prueba{
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	display: block;
}

/* ===== INFORMACIÓN ===== */

.info-cabana{
	padding: 25px 30px 30px;
	text-align: center;
}

.info-cabana h3{
	font-size: 30px;
	margin-bottom: 12px;
	color: #111;
}

.precio{
	font-size: 26px;
	font-weight: bold;
	color: #8B5E3C;
	margin: 10px 0 15px;
}

.descripcion{
	font-size: 18px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 22px;
	text-align: justify;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

/* ===== BOTÓN ===== */

.btn-reservar{
	display: inline-block;
	padding: 12px 30px;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 30px;
	font-size: 18px;
	font-weight: bold;
	transition: 0.3s ease;
}

.btn-reservar:hover{
	background: #333;
	transform: scale(1.05);
}

/* ===== DETALLE CABAÑAS ===== */

.detalle-cabanas{
	padding: 70px 8%;
	background: #fff;
}

.detalle-cabanas h2{
	text-align: center;
	font-size: 42px;
	margin-bottom: 20px;
	color: #111;
}

.detalle-cabanas > p{
	text-align: center;
	font-size: 20px;
	max-width: 900px;
	margin: 0 auto 40px auto;
	color: #444;
	line-height: 1.8;
}

.detalle-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.detalle-box{
	background: #f7f7f7;
	padding: 30px;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.detalle-box h3{
	font-size: 26px;
	margin-bottom: 15px;
	color: #111;
}

.detalle-box ul{
	padding-left: 20px;
}

.detalle-box ul li{
	font-size: 18px;
	margin-bottom: 10px;
	color: #444;
}

.detalle-box p{
	font-size: 18px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 20px;
}

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

@media (max-width: 768px){
	.overlay-cabanas h1{
		font-size: 38px;
	}

	.overlay-cabanas p{
		font-size: 18px;
	}

	.seccion-cabanas h2,
	.detalle-cabanas h2{
		font-size: 34px;
	}

	.slider-cabana{
		height: 260px;
	}

	.info-cabana{
		padding: 20px;
	}

	.info-cabana h3{
		font-size: 24px;
	}

	.precio{
		font-size: 22px;
	}

	.descripcion{
		font-size: 17px;
		text-align: left;
	}
}
/* ===== BOTÓN ===== */

.btn-reservar{
	display: inline-block;
	padding: 12px 30px;
	background: #000;
	color: #fff;
	text-decoration: none;
	border-radius: 30px;
	font-size: 18px;
	font-weight: bold;
	transition: 0.3s ease;
}

.btn-reservar:hover{
	background: #333;
	transform: scale(1.05);
}

/* ===== DETALLE CABAÑAS ===== */

.detalle-cabañas{
	padding: 70px 8%;
	background: #fff;
}

.detalle-cabañas h2{
	text-align: center;
	font-size: 42px;
	margin-bottom: 20px;
	color: #111;
}

.detalle-cabañas > p{
	text-align: center;
	font-size: 20px;
	max-width: 900px;
	margin: 0 auto 40px auto;
	color: #444;
	line-height: 1.8;
}

.detalle-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.detalle-box{
	background: #f7f7f7;
	padding: 30px;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.detalle-box h3{
	font-size: 26px;
	margin-bottom: 15px;
	color: #111;
}

.detalle-box ul{
	padding-left: 20px;
}

.detalle-box ul li{
	font-size: 18px;
	margin-bottom: 10px;
	color: #444;
}

.detalle-box p{
	font-size: 18px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 20px;
}

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

@media (max-width: 768px){
	.overlay-cabañas h1{
		font-size: 38px;
	}

	.overlay-cabañas p{
		font-size: 18px;
	}

	.seccion-cabañas h2,
	.detalle-cabañas h2{
		font-size: 34px;
	}

	.slider-cabaña{
		height: 260px;
	}

	.info-cabana{
		padding: 20px;
	}

	.info-cabana h3{
		font-size: 24px;
	}

	.precio{
		font-size: 22px;
	}

	.descripcion{
		font-size: 17px;
		text-align: left;
	}
}

.btn-reservar{
    display: inline-block;
    padding: 12px 30px;
    background: #000;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
}
.btn-vermas:hover{
	background: #333;
	transform: scale(1.05);
}

.detalle-cabanas{
	padding: 70px 8%;
	background: #fff;
}

.detalle-cabanas h2{
	text-align: center;
	font-size: 42px;
	margin-bottom: 20px;
	color: #111;
}

.detalle-cabanas > p{
	text-align: center;
	font-size: 20px;
	max-width: 900px;
	margin: 0 auto 40px auto;
	color: #444;
	line-height: 1.8;
}

.detalle-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 25px;
}

.detalle-box{
	background: #f7f7f7;
	padding: 30px;
	border-radius: 18px;
	box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.detalle-box h3{
	font-size: 26px;
	margin-bottom: 15px;
	color: #111;
}

.detalle-box ul{
	padding-left: 20px;
}

.detalle-box ul li{
	font-size: 18px;
	margin-bottom: 10px;
	color: #444;
}

.detalle-box p{
	font-size: 18px;
	line-height: 1.7;
	color: #444;
	margin-bottom: 20px;
}
.imagen-prueba{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.slider-cabana{
	position: relative;
	width: 100%;
	height: 420px;
	overflow: hidden;
	background: #ddd;
}

.slide{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none;
}

.slide.activo{
	display: block;
}
/* Responsive */
@media (max-width: 768px){
	.overlay-cabanas h1{
		font-size: 38px;
	}

	.overlay-cabanas p{
		font-size: 18px;
	}

	.seccion-cabanas h2,
	.detalle-cabanas h2{
		font-size: 34px;
	}

    }
	/* SECCIÓN DOBLE */
.contenedor-doble{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.imagen-doble img{
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
}

.texto-doble h3{
    font-size: 34px;
    color: #222;
    margin-bottom: 20px;
}

.texto-doble p{
    font-size: 17px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 18px;
    text-align: justify;
}

.btn-principal{
    display: inline-block;
    padding: 14px 28px;
    background: #222;
    color: #fff;
    text-decoration: none;
    border-radius: 30px;
    transition: 0.3s ease;
    font-weight: 600;
}

.btn-principal:hover{
    background: #b48b5e;
}

/* FOOTER */
.footer{
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.6)), url("../img/bosque.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    padding: 60px 10%;
}

.footer-container{
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
}

.footer-col{
    flex: 1;
    min-width: 250px;
}

.footer h3{
    font-size: 16px;
    margin-top: 20px;
}

.footer p{
    color: #ddd;
    line-height: 1.6;
    font-size: 15px;
}

.footer ul{
    list-style: none;
    padding: 0;
}

.footer ul li{
    margin: 8px 0;
    color: #ddd;
    cursor: pointer;
}

.footer ul li:hover{
    color: #ffffff;
}

form input{
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    border: none;
    background: #e5e5e5;
}

form button{
    width: 100%;
    padding: 14px;
    background: #000000;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

form button:hover{
    background: #6f8820;
}

.links{
    margin-top: 20px;
    font-size: 14px;
    color: #ccc;
}