:root{
    --verde:#2f3f2f;
    --verde2:#415441;
    --crema:#f7f1e7;
    --blanco:#ffffff;
    --violeta:#7b4f8f;
    --violeta-hover:#663d78;
    --texto:#69775f;
    --dorado:#c8a96a;
    --sombra:0 25px 70px rgba(0,0,0,.08);
    --radio:30px;
}

.cl-alojamiento{
    background:var(--crema);
    padding:110px 0;
    color:var(--verde);
}

.cl-container{
    width:min(1320px,calc(100% - 48px));
    margin:auto;
}

/*---------------------------------
 ENCABEZADO
---------------------------------*/

.cl-heading{
    max-width:900px;
    margin:0 auto 60px;
    text-align:center;
}

.cl-heading span{
    display:block;
    color:var(--violeta);
    letter-spacing:5px;
    font-size:13px;
    font-weight:700;
    margin-bottom:18px;
}

.cl-heading h2{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(46px,6vw,82px);
    line-height:1;
    color:var(--verde);
    margin-bottom:25px;
}

.cl-heading p{
    max-width:720px;
    margin:auto;
    color:var(--texto);
    font-size:18px;
    line-height:1.8;
}

/*---------------------------------
 GALERÍA
---------------------------------*/

.cl-gallery{

display:grid;

grid-template-columns:2fr 1fr 1fr;

grid-template-rows:260px 260px;

gap:15px;

margin-top:70px;

border-radius:var(--radio);

overflow:hidden;

box-shadow:var(--sombra);

}

.cl-main-photo{

grid-row:span 2;

}

.cl-main-photo,
.cl-side-photo{

position:relative;

overflow:hidden;

}

.cl-gallery img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

cursor:pointer;

display:block;

}

.cl-gallery img:hover{

transform:scale(1.05);

}

.cl-photo-more::after{

content:"";

position:absolute;

inset:0;

background:rgba(0,0,0,.35);

}

.cl-open-gallery{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

z-index:5;

padding:15px 30px;

border:none;

border-radius:999px;

background:white;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.cl-open-gallery:hover{

transform:translate(-50%,-50%) scale(1.05);

}

/*---------------------------------
 EXPERIENCIA
---------------------------------*/

.cl-room-type{

display:inline-block;

margin-top:90px;

margin-bottom:18px;

letter-spacing:4px;

font-size:13px;

font-weight:700;

color:var(--violeta);

}

.cl-alojamiento h3{

font-family:'Cormorant Garamond',serif;

font-size:58px;

color:var(--verde);

margin-bottom:22px;

}

.cl-alojamiento>p,
.cl-container>p{

max-width:760px;

font-size:18px;

line-height:1.9;

color:var(--texto);

margin-bottom:45px;

}

/*---------------------------------
 TARJETAS EXPERIENCIA
---------------------------------*/

.cl-experience-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:22px;

margin-bottom:90px;

}

.cl-exp-item{

display:flex;

gap:18px;

padding:28px;

background:white;

border-radius:22px;

box-shadow:0 15px 40px rgba(0,0,0,.05);

transition:.35s;

}

.cl-exp-item:hover{

transform:translateY(-6px);

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.cl-exp-item i{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:var(--violeta);

color:white;

font-size:22px;

flex-shrink:0;

}

.cl-exp-item strong{

display:block;

font-size:18px;

margin-bottom:6px;

color:var(--verde);

}

.cl-exp-item span{

display:block;

font-size:15px;

line-height:1.6;

color:var(--texto);

}

/*---------------------------------
 INFO
---------------------------------*/

.cl-info-grid{

display:grid;

grid-template-columns:1.2fr .8fr;

gap:55px;

align-items:start;

}

.cl-mini-title{

display:block;

letter-spacing:4px;

font-size:13px;

font-weight:700;

color:var(--violeta);

margin-bottom:18px;

}

.cl-description h3{

font-size:52px;

margin-bottom:20px;

}

.cl-description p{

font-size:18px;

line-height:1.9;

color:var(--texto);

margin-bottom:40px;

}

.cl-highlights{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.cl-highlights div{

background:white;

padding:22px;

border-radius:18px;

box-shadow:0 12px 35px rgba(0,0,0,.05);

}

.cl-highlights strong{

display:block;

margin-bottom:6px;

font-size:16px;

color:var(--verde);

}

.cl-highlights span{

font-size:15px;

color:var(--texto);

}

/*---------------------------------
 CARD RESERVA
---------------------------------*/

.cl-book-card{

background:linear-gradient(135deg,var(--verde),var(--verde2));

padding:45px;

border-radius:32px;

color:white;

position:sticky;

top:120px;

box-shadow:0 30px 80px rgba(47,63,47,.28);

}

.cl-book-label{

display:block;

font-size:12px;

letter-spacing:4px;

opacity:.75;

margin-bottom:15px;

}

.cl-book-card h4{

font-family:'Cormorant Garamond',serif;

font-size:48px;

line-height:1.05;

margin-bottom:20px;

}

.cl-book-card p{

line-height:1.8;

opacity:.9;

margin-bottom:30px;

}

.cl-book-card ul{

list-style:none;

padding:0;

margin:0 0 35px;

}

.cl-book-card li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:16px;

}

.cl-book-card li i{

color:var(--dorado);

}

.cl-buttons{

display:flex;

flex-direction:column;

gap:14px;

}

.cl-btn-primary,
.cl-btn-secondary{

display:block;

padding:16px;

border-radius:999px;

text-align:center;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.cl-btn-primary{

background:var(--violeta);

color:white;

}

.cl-btn-primary:hover{

background:var(--violeta-hover);

transform:translateY(-3px);

color:white;

}

.cl-btn-secondary{

background:white;

color:var(--verde);

}

.cl-btn-secondary:hover{

background:#f4f4f4;

color:var(--verde);

}

/*---------------------------------
 LIGHTBOX
---------------------------------*/

.cl-lightbox{

position:fixed;

inset:0;

display:none;

align-items:center;

justify-content:center;

background:rgba(0,0,0,.92);

z-index:99999;

}

.cl-lightbox.active{

display:flex;

}

.cl-lightbox img{

max-width:92%;

max-height:88vh;

border-radius:20px;

}

.cl-close{

position:absolute;

top:30px;

right:40px;

background:none;

border:none;

color:white;

font-size:55px;

cursor:pointer;

}

.cl-left,
.cl-right{

position:absolute;

top:50%;

transform:translateY(-50%);

width:65px;

height:65px;

border-radius:50%;

border:none;

background:rgba(255,255,255,.15);

backdrop-filter:blur(10px);

color:white;

font-size:30px;

cursor:pointer;

transition:.3s;

}

.cl-left:hover,
.cl-right:hover{

background:white;

color:#222;

}

.cl-left{left:30px;}
.cl-right{right:30px;}

/*---------------------------------
 RESPONSIVE
---------------------------------*/

@media(max-width:992px){

.cl-gallery{

grid-template-columns:1fr 1fr;

grid-template-rows:360px 180px 180px;

}

.cl-main-photo{

grid-column:span 2;

grid-row:auto;

}

.cl-experience-grid,
.cl-highlights,
.cl-info-grid{

grid-template-columns:1fr;

}

.cl-book-card{

position:relative;

top:auto;

margin-top:40px;

}

.cl-alojamiento h3{

font-size:46px;

}

}

@media(max-width:576px){

.cl-alojamiento{

padding:80px 0;

}

.cl-container{

width:min(100% - 24px,1320px);

}

.cl-gallery{

grid-template-columns:1fr;

grid-template-rows:320px repeat(4,170px);

}

.cl-main-photo{

grid-column:auto;

}

.cl-heading h2{

font-size:48px;

}

.cl-alojamiento h3{

font-size:38px;

}

.cl-book-card h4{

font-size:36px;

}

}