:root{

    --re-green:#2f3f2f;
    --re-green-dark:#1d281d;
    --re-green-light:#586b58;

    --re-cream:#f7f2e9;
    --re-cream-dark:#ece2d1;

    --re-gold:#b99a5f;
    --re-gold-soft:#d5bf91;

    --re-violet:#7b4f8f;
    --re-violet-dark:#5d3a6c;

    --re-text:#3f3b35;
    --re-muted:#6e685d;

    --radius:28px;

    --shadow:0 22px 60px rgba(0,0,0,.12);

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Montserrat',sans-serif;

    background:var(--re-cream);

    color:var(--re-text);

    overflow-x:hidden;

}

img{

    display:block;

    width:100%;

}

a{

    text-decoration:none;

}

.re-container{

    width:min(1180px,92%);

    margin:auto;

}

section{

    position:relative;

}

/*==============================

HERO

===============================*/

.re-hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:

    linear-gradient(

    rgba(20,30,20,.62),

    rgba(20,30,20,.58)

    ),

    url("https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&w=2200&q=80");

    background-size:cover;

    background-position:center;

    color:#fff;

    overflow:hidden;

}

.re-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at 20% 30%,rgba(185,154,95,.22),transparent 30%),

    linear-gradient(90deg,

    rgba(30,40,30,.92),

    rgba(30,40,30,.45),

    rgba(30,40,30,.12));

}

.re-hero .re-container{

    position:relative;

    z-index:2;

}

.re-hero span{

    display:inline-block;

    letter-spacing:5px;

    text-transform:uppercase;

    color:var(--re-gold-soft);

    font-size:.8rem;

    font-weight:700;

    margin-bottom:20px;

}

.re-hero h1{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(4rem,8vw,8rem);

    line-height:.9;

    margin-bottom:28px;

}

.re-hero p{

    max-width:650px;

    font-size:1.1rem;

    line-height:2;

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

    margin-bottom:40px;

}

/*==============================

BOTONES

===============================*/

.re-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.re-btn-primary,

.re-btn-secondary{

    min-height:56px;

    padding:0 34px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    transition:.35s;

}

.re-btn-primary{

    background:var(--re-gold);

    color:#fff;

    box-shadow:0 18px 35px rgba(185,154,95,.35);

}

.re-btn-primary:hover{

    background:var(--re-violet);

    transform:translateY(-4px);

    color:#fff;

}

.re-btn-secondary{

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

    color:#fff;

    backdrop-filter:blur(12px);

}

.re-btn-secondary:hover{

    background:#fff;

    color:var(--re-green);

}

/*==============================

INTRO

===============================*/

.re-intro{

    padding:120px 0;

    background:var(--re-cream);

    text-align:center;

}

.re-intro span,

.re-title span{

    color:var(--re-violet);

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:4px;

    font-size:.8rem;

}

.re-intro h2,

.re-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,6vw,5.2rem);

    color:var(--re-green-dark);

    margin:25px auto;

    max-width:850px;

    line-height:1;

}

.re-intro p,

.re-title p{

    max-width:760px;

    margin:auto;

    color:var(--re-muted);

    line-height:2;

    font-size:1.05rem;

}

/*==============================

QUOTE

===============================*/

.re-quote{

    background:var(--re-green-dark);

    color:#fff;

    padding:120px 0;

    text-align:center;

    overflow:hidden;

}

.re-quote::before{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(185,154,95,.08);

    right:-80px;

    top:-100px;

}

.re-quote h2{

    position:relative;

    z-index:2;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,7vw,6rem);

    line-height:.95;

}

/*==============================

CARDS

===============================*/

.re-experiences{

    padding:120px 0;

    background:#fff;

}

.re-title{

    text-align:center;

    margin-bottom:70px;

}

.re-grid{

    display:grid;

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

    gap:28px;

}

.re-card{

    background:var(--re-cream);

    border-radius:30px;

    padding:40px;

    position:relative;

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}

.re-card::before{

    content:"";

    position:absolute;

    width:160px;

    height:160px;

    border-radius:50%;

    background:rgba(123,79,143,.06);

    right:-70px;

    top:-70px;

}

.re-card:hover{

    transform:translateY(-10px);

}

.re-card i{

    font-size:2.4rem;

    color:var(--re-violet);

    margin-bottom:25px;

}

.re-card h3{

    font-family:'Cormorant Garamond',serif;

    color:var(--re-green-dark);

    font-size:2rem;

    margin-bottom:16px;

}

.re-card p{

    color:var(--re-muted);

    line-height:1.85;

}

/*==============================

PROGRAMA

===============================*/

.re-program{

    padding:130px 0;

    background:

    linear-gradient(

    rgba(31,43,32,.95),

    rgba(31,43,32,.95)

    ),

    url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=2200&q=80");

    background-size:cover;

    color:#fff;

}

.re-program .re-title h2{

    color:#fff;

}

.re-program .re-title p{

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

}

.re-days{

    display:grid;

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

    gap:28px;

}

.re-day{

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

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

    backdrop-filter:blur(12px);

    border-radius:30px;

    padding:38px;

    transition:.35s;

}

.re-day:hover{

    transform:translateY(-8px);

}

.re-day strong{

    display:inline-block;

    color:var(--re-gold-soft);

    text-transform:uppercase;

    letter-spacing:3px;

    margin-bottom:18px;

}

.re-day h3{

    font-family:'Cormorant Garamond',serif;

    font-size:2rem;

    margin-bottom:22px;

}

.re-day ul{

    padding-left:18px;

}

.re-day li{

    margin-bottom:12px;

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

    line-height:1.7;

}
/*==============================

INCLUDES

===============================*/

.re-includes{

    padding:120px 0;

    background:var(--re-cream);

}

.re-includes-grid{

    display:grid;

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

    gap:18px;

}

.re-includes-grid div{

    background:#fff;

    border-radius:22px;

    padding:24px 22px;

    font-weight:600;

    color:var(--re-green-dark);

    box-shadow:0 14px 38px rgba(0,0,0,.06);

    border:1px solid rgba(185,154,95,.18);

    transition:.3s ease;

}

.re-includes-grid div:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 55px rgba(0,0,0,.10);

}

.re-includes-grid i{

    color:var(--re-violet);

    margin-right:8px;

}

/*==============================

QUOTE LIGHT

===============================*/

.re-quote-light{

    background:var(--re-violet);

}

.re-quote-light::before{

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

}

.re-quote-light h2{

    color:#fff;

}

/*==============================

GALLERY

===============================*/

.re-gallery{

    padding:120px 0;

    background:#fff;

}

.re-gallery h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(2.7rem,5vw,5.2rem);

    line-height:1;

    color:var(--re-green-dark);

    text-align:center;

    max-width:850px;

    margin:0 auto 60px;

}

.re-gallery-grid{

    display:grid;

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

    gap:24px;

}

.re-gallery-grid img{

    height:340px;

    object-fit:cover;

    border-radius:30px;

    box-shadow:0 22px 60px rgba(0,0,0,.13);

    transition:.45s ease;

    filter:saturate(.92) contrast(1.03);

}

.re-gallery-grid img:hover{

    transform:scale(1.035);

    filter:saturate(1.05) contrast(1.05);

}

/*==============================

CTA

===============================*/

.re-cta{

    padding:150px 0;

    background:

    linear-gradient(

        rgba(31,43,32,.86),

        rgba(31,43,32,.92)

    ),

    url("https://images.unsplash.com/photo-1499209974431-9dddcece7f88?auto=format&fit=crop&w=2200&q=80");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    color:#fff;

    text-align:center;

}

.re-cta .re-container{

    max-width:920px;

}

.re-cta span{

    display:inline-block;

    color:var(--re-gold-soft);

    text-transform:uppercase;

    font-weight:700;

    letter-spacing:4px;

    font-size:.8rem;

    margin-bottom:22px;

}

.re-cta h2{

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,6vw,6rem);

    line-height:.96;

    margin-bottom:28px;

}

.re-cta p{

    max-width:760px;

    margin:0 auto 40px;

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

    line-height:2;

    font-size:1.06rem;

}

.re-cta .re-buttons{

    justify-content:center;

}

/*==============================

ANIMACIONES SUAVES

===============================*/

.re-card,
.re-day,
.re-includes-grid div,
.re-gallery-grid img{

    will-change:transform;

}

.re-card i,
.re-day strong,
.re-includes-grid i{

    transition:.3s ease;

}

.re-card:hover i{

    transform:scale(1.12) rotate(-4deg);

    color:var(--re-gold);

}

.re-day:hover strong{

    color:#fff;

}

.re-btn-primary:active,
.re-btn-secondary:active{

    transform:scale(.97);

}

/*==============================

DETALLES PREMIUM

===============================*/

.re-experiences::before,
.re-includes::before,
.re-gallery::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(185,154,95,.10);

    pointer-events:none;

}

.re-experiences::before{

    left:-90px;

    top:80px;

}

.re-includes::before{

    right:-90px;

    top:100px;

}

.re-gallery::before{

    left:-80px;

    bottom:80px;

}

.re-card,
.re-day,
.re-includes-grid div{

    z-index:2;

}
/*==================================

TABLET

===================================*/

@media (max-width:1100px){

    .re-grid{

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

    }

    .re-days{

        grid-template-columns:1fr;

    }

    .re-includes-grid{

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

    }

    .re-gallery-grid{

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

    }

}



/*==================================

MÓVIL

===================================*/

@media(max-width:768px){

    .re-hero{

        min-height:90vh;

        text-align:left;

        padding:140px 0 90px;

        background-position:center;

    }

    .re-overlay{

        background:

        linear-gradient(

            rgba(20,30,20,.76),

            rgba(20,30,20,.76)

        );

    }

    .re-hero h1{

        font-size:3.4rem;

        line-height:.95;

    }

    .re-hero p{

        font-size:1rem;

        line-height:1.8;

    }

    .re-buttons{

        flex-direction:column;

        width:100%;

    }

    .re-btn-primary,

    .re-btn-secondary{

        width:100%;

    }

    .re-intro,

    .re-experiences,

    .re-program,

    .re-includes,

    .re-gallery,

    .re-cta{

        padding:80px 0;

    }

    .re-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .re-card{

        padding:32px 26px;

        min-height:auto;

    }

    .re-card h3{

        font-size:1.8rem;

    }

    .re-days{

        gap:24px;

    }

    .re-day{

        padding:32px 26px;

    }

    .re-day h3{

        font-size:1.8rem;

    }

    .re-day ul{

        padding-left:20px;

    }

    .re-day li{

        font-size:.95rem;

    }

    .re-includes-grid{

        grid-template-columns:1fr;

    }

    .re-gallery-grid{

        grid-template-columns:1fr;

    }

    .re-gallery-grid img{

        height:260px;

    }

    .re-cta{

        background-attachment:scroll;

    }

}



/*==================================

TELÉFONOS PEQUEÑOS

===================================*/

@media(max-width:480px){

    .re-container{

        width:90%;

    }

    .re-hero span{

        font-size:.72rem;

        letter-spacing:3px;

    }

    .re-hero h1{

        font-size:3rem;

    }

    .re-intro h2,

    .re-title h2{

        font-size:2.6rem;

    }

    .re-quote h2{

        font-size:2.8rem;

    }

    .re-card,

    .re-day{

        border-radius:22px;

    }

    .re-gallery-grid img{

        height:220px;

        border-radius:22px;

    }

}



/*==================================

SCROLL BAR

===================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--re-cream);

}

::-webkit-scrollbar-thumb{

    background:var(--re-gold);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--re-violet);

}



/*==================================

SELECCIÓN

===================================*/

::selection{

    background:var(--re-violet);

    color:#fff;

}



/*==================================

FOCUS

===================================*/

button:focus,

a:focus{

    outline:none;

}



/*==================================

ANIMACIÓN DE ENTRADA

===================================*/

.re-card,

.re-day,

.re-gallery-grid img,

.re-includes-grid div{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==================================

EFECTOS HOVER PREMIUM

===================================*/

.re-card,

.re-day,

.re-gallery-grid img,

.re-includes-grid div{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    filter .35s ease;

}

.re-card:hover,

.re-day:hover,

.re-includes-grid div:hover{

    box-shadow:

    0 30px 70px rgba(0,0,0,.16);

}

.re-gallery-grid img:hover{

    box-shadow:

    0 35px 80px rgba(0,0,0,.20);

}



/*==================================

UTILIDADES

===================================*/

.text-gold{

    color:var(--re-gold);

}

.text-violet{

    color:var(--re-violet);

}

.bg-cream{

    background:var(--re-cream);

}

.bg-green{

    background:var(--re-green-dark);

}
/*====================================================

INCLUYE

=====================================================*/

.re-includes{

    padding:120px 0;

    background:#f7f2e9;

}

.re-includes-grid{

    margin-top:60px;

    display:grid;

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

    gap:22px;

}

.re-includes-grid div{

    background:#fff;

    padding:28px;

    border-radius:24px;

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#2f3f2f;

    box-shadow:0 15px 45px rgba(0,0,0,.08);

    transition:.35s;

}

.re-includes-grid div:hover{

    transform:translateY(-8px);

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

}

.re-includes-grid i{

    color:#b99a5f;

    font-size:22px;

}

/*====================================================

FRASE

=====================================================*/

.re-quote-light{

    padding:140px 0;

    background:#1f2b20;

    text-align:center;

}

.re-quote-light h2{

    color:#fff;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,7vw,6rem);

    line-height:1;

    max-width:900px;

    margin:auto;

}

/*====================================================

GALERIA

=====================================================*/

.re-gallery{

    padding:120px 0;

    background:#f7f2e9;

}

.re-gallery h2{

    text-align:center;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(2.8rem,6vw,5rem);

    color:#2f3f2f;

    margin-bottom:70px;

}

.re-gallery-grid{

    display:grid;

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

    gap:28px;

}

.re-gallery-grid img{

    width:100%;

    height:340px;

    object-fit:cover;

    border-radius:28px;

    transition:.45s;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

.re-gallery-grid img:hover{

    transform:scale(1.04);

}

/*====================================================

CTA

=====================================================*/

.re-cta{

    padding:150px 0;

    background:

    linear-gradient(

    rgba(31,43,32,.88),

    rgba(31,43,32,.88)

    ),

    url("https://images.unsplash.com/photo-1499209974431-9dddcece7f88?auto=format&fit=crop&w=2200&q=80");

    background-size:cover;

    background-position:center;

    color:#fff;

    text-align:center;

}

.re-cta span{

    color:#d6c08b;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.8rem;

    font-weight:700;

}

.re-cta h2{

    margin:25px auto;

    max-width:900px;

    font-family:'Cormorant Garamond',serif;

    font-size:clamp(3rem,6vw,6rem);

    line-height:1;

}

.re-cta p{

    max-width:760px;

    margin:0 auto 45px;

    line-height:2;

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

    font-size:1.05rem;

}

.re-cta .re-buttons{

    justify-content:center;

}