:root{

--verde:#2f3f2f;
--verde2:#415441;
--crema:#f7f1e7;
--blanco:#ffffff;
--violeta:#7b4f8f;
--violeta-hover:#663d78;
--dorado:#c8a96a;
--texto:#69775f;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Montserrat',sans-serif;
background:var(--crema);
color:var(--verde);
overflow-x:hidden;

}

.va-container{

width:min(1320px,calc(100% - 40px));
margin:auto;

}

/*==========================
HERO
==========================*/

.va-hero{

height:100vh;
min-height:760px;

background:url('/img/cabana-principal4.jpeg') center center/cover;

position:relative;

display:flex;
align-items:center;

color:white;

}

.va-overlay{

position:absolute;
inset:0;

background:linear-gradient(rgba(15,20,15,.45),rgba(15,20,15,.72));

}

.va-container{

position:relative;
z-index:2;

}

.va-hero span{

display:inline-block;

letter-spacing:5px;

font-size:13px;

font-weight:700;

margin-bottom:22px;

color:#ecd7b2;

}

.va-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:clamp(60px,8vw,105px);

line-height:.95;

margin-bottom:28px;

max-width:900px;

}

.va-hero p{

max-width:720px;

font-size:21px;

line-height:1.9;

color:rgba(255,255,255,.88);

margin-bottom:45px;

}

/*==========================
BOTONES
==========================*/

.va-buttons{

display:flex;
gap:18px;
flex-wrap:wrap;

}

.va-btn-primary,
.va-btn-secondary{

padding:18px 36px;

border-radius:999px;

font-weight:700;

text-decoration:none;

transition:.35s;

display:inline-flex;

align-items:center;

justify-content:center;

}

.va-btn-primary{

background:var(--violeta);

color:white;

box-shadow:0 18px 45px rgba(123,79,143,.30);

}

.va-btn-primary:hover{

background:var(--violeta-hover);

color:white;

transform:translateY(-4px);

}

.va-btn-secondary{

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

border:1px solid rgba(255,255,255,.30);

color:white;

backdrop-filter:blur(10px);

}

.va-btn-secondary:hover{

background:white;

color:var(--verde);

}

/*==========================
INTRO
==========================*/

.va-intro{

padding:120px 0;
text-align:center;

}

.va-intro span{

display:block;

letter-spacing:4px;

font-size:13px;

font-weight:700;

color:var(--violeta);

margin-bottom:18px;

}

.va-intro h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

margin-bottom:25px;

}

.va-intro p{

max-width:860px;

margin:auto;

font-size:19px;

line-height:1.9;

color:var(--texto);

}

/*==========================
FRASES
==========================*/

.va-quote{

padding:110px 0;

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

color:white;

text-align:center;

}

.va-quote-light{

background:white;

color:var(--verde);

}

.va-quote h2{

font-family:'Cormorant Garamond',serif;

font-size:72px;

line-height:1.1;

}

/*==========================
CARDS
==========================*/

.va-experiences{

padding:120px 0;

}

.va-grid{

display:grid;

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

gap:28px;

}

.va-card{

background:white;

padding:42px;

border-radius:30px;

box-shadow:0 20px 55px rgba(0,0,0,.06);

transition:.35s;

}

.va-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 70px rgba(0,0,0,.10);

}

.va-card i{

font-size:42px;

color:var(--violeta);

margin-bottom:22px;

}

.va-card h3{

font-family:'Cormorant Garamond',serif;

font-size:38px;

margin-bottom:18px;

}

.va-card p{

line-height:1.9;

color:var(--texto);

}

/*==========================
PROGRAMA
==========================*/

.va-program{

padding:120px 0;

background:white;

}

.va-program-title{

text-align:center;

margin-bottom:70px;

}

.va-program-title span{

display:block;

letter-spacing:4px;

font-size:13px;

font-weight:700;

color:var(--violeta);

margin-bottom:18px;

}

.va-program-title h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

margin-bottom:22px;

}

.va-program-title p{

max-width:760px;

margin:auto;

line-height:1.9;

color:var(--texto);

}

.va-days{

display:grid;

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

gap:24px;

}

.va-day{

background:var(--crema);

padding:38px;

border-radius:28px;

transition:.35s;

}

.va-day:hover{

transform:translateY(-6px);

}

.va-day strong{

display:inline-block;

background:var(--violeta);

color:white;

padding:8px 18px;

border-radius:999px;

margin-bottom:20px;

}

.va-day h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:18px;

}

.va-day ul{

padding-left:18px;

line-height:2;

color:var(--texto);

}

/*==========================
INCLUYE
==========================*/

.va-includes{

padding:120px 0;

}

.va-includes h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

text-align:center;

margin-bottom:60px;

}

.va-includes-grid{

display:grid;

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

gap:20px;

}

.va-includes-grid div{

background:white;

padding:24px;

border-radius:20px;

text-align:center;

font-weight:600;

transition:.35s;

}

.va-includes-grid div:hover{

background:var(--verde);

color:white;

}

/*==========================
GALERÍA
==========================*/

.va-gallery{

padding:120px 0;

background:white;

}

.va-gallery h2{

font-family:'Cormorant Garamond',serif;

font-size:58px;

text-align:center;

margin-bottom:60px;

}

.va-gallery-grid{

display:grid;

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

gap:18px;

}

.va-gallery-grid img{

width:100%;

height:320px;

object-fit:cover;

border-radius:22px;

transition:.45s;

cursor:pointer;

}

.va-gallery-grid img:hover{

transform:scale(1.05);

}

/*==========================
CTA
==========================*/

.va-cta{

padding:120px 0;

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

color:white;

text-align:center;

}

.va-cta span{

display:block;

letter-spacing:4px;

font-size:13px;

margin-bottom:18px;

opacity:.8;

}

.va-cta h2{

font-family:'Cormorant Garamond',serif;

font-size:68px;

margin-bottom:22px;

}

.va-cta p{

max-width:760px;

margin:auto auto 40px;

font-size:20px;

line-height:1.8;

opacity:.9;

}

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

@media(max-width:992px){

.va-grid{

grid-template-columns:1fr 1fr;

}

.va-days{

grid-template-columns:1fr;

}

.va-includes-grid{

grid-template-columns:1fr 1fr;

}

.va-gallery-grid{

grid-template-columns:1fr 1fr;

}

.va-intro h2,
.va-program-title h2,
.va-gallery h2,
.va-includes h2{

font-size:46px;

}

.va-quote h2{

font-size:52px;

}

.va-cta h2{

font-size:48px;

}

}

@media(max-width:768px){

.va-hero{

min-height:650px;

padding:120px 0 80px;

}

.va-hero h1{

font-size:56px;

}

.va-hero p{

font-size:17px;

}

.va-buttons{

flex-direction:column;

}

.va-btn-primary,
.va-btn-secondary{

width:100%;

}

.va-grid,
.va-gallery-grid,
.va-includes-grid{

grid-template-columns:1fr;

}

.va-gallery-grid img{

height:250px;

}

.va-intro,
.va-experiences,
.va-program,
.va-gallery,
.va-includes,
.va-cta{

padding:80px 0;

}

.va-quote{

padding:70px 0;

}

.va-quote h2{

font-size:38px;

}

.va-cta h2{

font-size:40px;

}

}