:root{
    --td-orange:#f28a1a;
    --td-orange-soft:#ff9d2e;
    --td-green:#2f9b57;
    --td-green-soft:#55c47f;
}

/* =========================================================
   HERO · BOOKING PARA HOTELES
   ========================================================= */

.booking-hero{
    position:relative;
    overflow:hidden;

    min-height:780px;

    display:flex;
    align-items:center;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcf8 58%,
            #f2f7f2 100%
        );

    color:#181a17;
}


/* =========================================================
   DECORACIÓN TROPICAL
   ========================================================= */

.booking-hero__decor{
    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;
}


/* SOL */

.booking-hero__sun{
    position:absolute;

    width:440px;
    height:440px;

    right:6%;
    top:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(242,138,26,.20) 0%,
            rgba(242,138,26,.08) 40%,
            transparent 70%
        );

    animation:bookingSunFloat 12s ease-in-out infinite;
}


/* MONTAÑAS */

.booking-hero__mountains{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:260px;

    opacity:.55;
}

.booking-hero__mountains span{
    position:absolute;

    bottom:-120px;

    width:520px;
    height:310px;

    border-radius:50% 50% 0 0;

    transform:rotate(-7deg);

    background:
        linear-gradient(
            145deg,
            rgba(47,155,87,.11),
            rgba(47,155,87,.02)
        );
}

.booking-hero__mountains span:nth-child(1){
    left:-80px;
}

.booking-hero__mountains span:nth-child(2){
    left:28%;
    bottom:-165px;

    width:610px;

    opacity:.8;
}

.booking-hero__mountains span:nth-child(3){
    right:-100px;
    left:auto;

    width:560px;

    background:
        linear-gradient(
            145deg,
            rgba(242,138,26,.07),
            transparent
        );
}


/* OLAS */

.booking-hero__waves{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:80px;

    opacity:.5;
}

.booking-hero__waves span{
    position:absolute;

    left:-10%;
    bottom:-50px;

    width:120%;
    height:100px;

    border-radius:50%;

    border-top:1px solid rgba(47,155,87,.15);
}

.booking-hero__waves span:nth-child(2){
    left:-4%;
    bottom:-65px;

    border-color:rgba(242,138,26,.12);
}


/* HOJAS ABSTRACTAS */

.booking-hero__leaf{
    position:absolute;

    display:block;

    width:110px;
    height:45px;

    border-radius:100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            rgba(47,155,87,.13),
            rgba(47,155,87,.025)
        );
}

.booking-hero__leaf--1{
    left:3%;
    top:15%;

    transform:rotate(-28deg);

    animation:bookingLeafOne 8s ease-in-out infinite;
}

.booking-hero__leaf--2{
    right:5%;
    bottom:13%;

    width:145px;
    height:55px;

    transform:rotate(32deg);

    background:
        linear-gradient(
            135deg,
            rgba(242,138,26,.11),
            transparent
        );

    animation:bookingLeafTwo 9s ease-in-out infinite;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.booking-hero__inner{
    position:relative;
    z-index:3;

    width:min(1240px,calc(100% - 48px));

    margin:0 auto;

    display:grid;
    grid-template-columns:.92fr 1.08fr;

    align-items:center;

    gap:80px;

    padding:110px 0 100px;
}


/* =========================================================
   TEXTO
   ========================================================= */

.booking-hero__content{
    max-width:620px;

    animation:bookingContentIn .9s ease both;
}

.booking-hero__eyebrow{
    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:24px;

    font-size:13px;
    font-weight:750;

    letter-spacing:.14em;
    text-transform:uppercase;

    color:var(--td-green);
}

.booking-hero__eyebrow::before{
    content:"";

    width:30px;
    height:2px;

    background:var(--td-orange);
}

.booking-hero__title{
    margin:0;

    max-width:690px;

    font-size:clamp(52px,5.7vw,82px);

    line-height:.95;

    letter-spacing:-.052em;

    color:#1a1c18;
}

.booking-hero__title span{
    display:block;

    color:var(--td-orange);
}

.booking-hero__lead{
    max-width:610px;

    margin:29px 0 0;

    font-size:21px;
    line-height:1.58;

    color:#454840;
}

.booking-hero__text{
    max-width:590px;

    margin:15px 0 0;

    font-size:16px;
    line-height:1.75;

    color:#74776f;
}


/* =========================================================
   TIPOS DE HOSPEDAJE
   ========================================================= */

.booking-hero__types{
    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-top:28px;
}

.booking-hero__types span{
    padding:8px 11px;

    border:1px solid #e0e5dd;

    border-radius:50px;

    font-size:10px;
    font-weight:650;

    color:#646860;

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

    transition:
        transform .25s ease,
        border-color .25s ease,
        color .25s ease;
}

.booking-hero__types span:nth-child(2n){
    border-color:rgba(47,155,87,.19);
}

.booking-hero__types span:hover{
    transform:translateY(-3px);

    color:#22251f;

    border-color:rgba(242,138,26,.30);
}


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

.booking-hero__actions{
    display:flex;

    flex-wrap:wrap;

    gap:13px;

    margin-top:35px;
}

.booking-hero__button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:15px;

    min-height:56px;

    padding:0 24px;

    border-radius:8px;

    text-decoration:none;

    font-size:14px;
    font-weight:700;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.booking-hero__button--primary{
    color:#fff;

    background:var(--td-orange);

    box-shadow:
        0 16px 35px rgba(242,138,26,.20);
}

.booking-hero__button--primary:hover{
    color:#fff;

    transform:translateY(-4px);

    box-shadow:
        0 22px 45px rgba(242,138,26,.29);
}

.booking-hero__button--primary span{
    transition:transform .25s ease;
}

.booking-hero__button--primary:hover span{
    transform:translateX(5px);
}

.booking-hero__button--demo{
    color:#363a34;

    border:1px solid #dadfd7;

    background:#fff;

    box-shadow:
        0 10px 25px rgba(39,44,35,.05);
}

.booking-hero__button--demo:hover{
    transform:translateY(-4px);

    border-color:rgba(47,155,87,.35);

    color:var(--td-green);
}


/* =========================================================
   VISUAL PRINCIPAL
   ========================================================= */

.booking-hero__visual{
    position:relative;

    min-height:590px;

    display:flex;
    align-items:center;
    justify-content:center;

    perspective:1200px;
}


/* =========================================================
   BUSCADOR / BOOKING
   ========================================================= */

.booking-search{
    position:relative;
    z-index:5;

    width:min(100%,580px);

    overflow:hidden;

    border:1px solid #e1e4dd;

    border-radius:22px;

    background:#fff;

    box-shadow:
        0 45px 90px rgba(40,48,36,.14),
        0 8px 20px rgba(40,48,36,.05);

    transform:
        rotateY(-3deg)
        rotateX(1deg);

    animation:bookingCardFloat 7s ease-in-out infinite;
}


/* =========================================================
   ESCENA COSTA RICA
   ========================================================= */

.booking-search__image{
    position:relative;

    height:175px;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #f3faf5,
            #e9f4ea
        );
}

.booking-search__image-scene{
    position:absolute;
    inset:0;
}

.booking-search__scene-sun{
    position:absolute;

    width:80px;
    height:80px;

    right:55px;
    top:22px;

    border-radius:50%;

    background:
        rgba(242,138,26,.24);
}

.booking-search__scene-mountain{
    position:absolute;

    bottom:-55px;

    width:330px;
    height:170px;

    border-radius:50% 50% 0 0;

    background:#a9ceb3;
}

.booking-search__scene-mountain--1{
    left:-60px;

    transform:rotate(8deg);
}

.booking-search__scene-mountain--2{
    right:-90px;

    bottom:-65px;

    background:#76ad83;

    transform:rotate(-8deg);
}

.booking-search__scene-sea{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    height:38px;

    background:
        linear-gradient(
            180deg,
            rgba(64,151,145,.27),
            rgba(64,151,145,.10)
        );
}

.booking-search__location{
    position:absolute;

    left:18px;
    top:18px;

    display:flex;
    align-items:center;

    gap:7px;

    padding:7px 10px;

    border-radius:50px;

    font-size:9px;
    font-weight:700;

    color:#3c5141;

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

    backdrop-filter:blur(10px);

    box-shadow:
        0 7px 20px rgba(40,48,36,.07);
}

.booking-search__location span{
    color:var(--td-orange);
}


/* =========================================================
   CUERPO
   ========================================================= */

.booking-search__body{
    padding:22px;
}

.booking-search__heading{
    display:flex;

    align-items:flex-start;
    justify-content:space-between;

    gap:15px;
}

.booking-search__heading small,
.booking-search__heading strong{
    display:block;
}

.booking-search__heading small{
    font-size:8px;

    text-transform:uppercase;
    letter-spacing:.09em;

    color:#9a9d96;
}

.booking-search__heading strong{
    margin-top:4px;

    font-size:16px;
}

.booking-search__online{
    display:flex;

    align-items:center;

    gap:6px;

    padding:7px 9px;

    border-radius:50px;

    font-size:8px;

    color:var(--td-green);

    background:rgba(47,155,87,.09);
}

.booking-search__online i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:var(--td-green);

    box-shadow:
        0 0 10px rgba(47,155,87,.55);

    animation:bookingStatus 1.8s ease-in-out infinite;
}


/* =========================================================
   FECHAS
   ========================================================= */

.booking-search__dates{
    display:grid;

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

    align-items:center;

    gap:9px;

    margin-top:19px;

    padding:13px;

    border:1px solid #eceee8;

    border-radius:12px;

    background:#fbfcfa;
}

.booking-search__dates > div{
    padding:0 8px;
}

.booking-search__dates small,
.booking-search__dates strong{
    display:block;
}

.booking-search__dates small{
    font-size:7px;

    text-transform:uppercase;

    color:#a2a59e;
}

.booking-search__dates strong{
    margin-top:4px;

    font-size:10px;
}

.booking-search__dates > span{
    color:var(--td-orange);

    font-size:14px;
}


/* =========================================================
   DISPONIBILIDAD
   ========================================================= */

.booking-search__availability{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:11px;

    padding:12px 13px;

    border-radius:11px;

    background:
        linear-gradient(
            90deg,
            rgba(47,155,87,.08),
            rgba(47,155,87,.025)
        );
}

.booking-search__check{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:8px;

    color:#fff;

    font-size:9px;

    background:var(--td-green);
}

.booking-search__availability small,
.booking-search__availability strong{
    display:block;
}

.booking-search__availability small{
    font-size:7px;

    color:#7b8c7f;
}

.booking-search__availability strong{
    margin-top:3px;

    font-size:10px;

    color:#334538;
}

.booking-search__rooms{
    margin-left:auto;

    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:9px;
    font-weight:800;

    color:var(--td-green);

    background:#fff;
}


/* =========================================================
   HABITACIÓN
   ========================================================= */

.booking-search__room{
    display:grid;

    grid-template-columns:67px 1fr auto;

    gap:12px;

    align-items:center;

    margin-top:12px;

    padding:13px;

    border:1px solid #eceee8;

    border-radius:12px;
}

.booking-search__room-photo{
    position:relative;

    width:67px;
    height:62px;

    overflow:hidden;

    border-radius:9px;

    background:
        linear-gradient(
            140deg,
            #c6ddca,
            #edf4eb
        );
}

.booking-search__room-photo::before{
    content:"";

    position:absolute;

    width:75px;
    height:45px;

    left:-20px;
    bottom:-20px;

    border-radius:50%;

    background:#6faa7b;
}

.booking-search__room-photo span{
    position:absolute;

    width:24px;
    height:24px;

    right:8px;
    top:8px;

    border-radius:50%;

    background:rgba(242,138,26,.35);
}

.booking-search__room-info small,
.booking-search__room-info strong{
    display:block;
}

.booking-search__room-info small{
    font-size:7px;

    color:#a0a39c;
}

.booking-search__room-info strong{
    margin-top:4px;

    font-size:11px;
}

.booking-search__room-info > div{
    display:flex;

    gap:7px;

    margin-top:7px;
}

.booking-search__room-info > div span{
    font-size:7px;

    color:#888c84;
}

.booking-search__price{
    text-align:right;
}

.booking-search__price small,
.booking-search__price strong,
.booking-search__price span{
    display:block;
}

.booking-search__price small{
    font-size:7px;

    color:#9a9d96;
}

.booking-search__price strong{
    margin-top:2px;

    font-size:16px;

    color:var(--td-orange);
}

.booking-search__price span{
    margin-top:2px;

    font-size:6px;

    color:#999c95;
}


/* =========================================================
   BOTÓN DE RESERVA
   ========================================================= */

.booking-search__button{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    margin-top:12px;

    min-height:42px;

    border-radius:9px;

    font-size:10px;
    font-weight:750;

    color:#fff;

    background:var(--td-orange);
}

.booking-search__button span{
    transition:transform .25s ease;
}


/* =========================================================
   TARJETAS FLOTANTES
   ========================================================= */

.booking-float{
    position:absolute;
    z-index:8;

    display:flex;

    align-items:center;

    gap:11px;

    padding:12px 14px;

    border:1px solid #e1e4dd;

    border-radius:12px;

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

    backdrop-filter:blur(14px);

    box-shadow:
        0 18px 40px rgba(40,48,36,.11);
}

.booking-float__icon{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    flex:0 0 auto;

    border-radius:9px;

    font-size:9px;
    font-weight:800;

    color:#fff;

    background:var(--td-green);
}

.booking-float__icon--orange{
    background:var(--td-orange);
}

.booking-float small,
.booking-float strong{
    display:block;
}

.booking-float small{
    font-size:7px;

    text-transform:uppercase;

    letter-spacing:.07em;

    color:#9a9d96;
}

.booking-float strong{
    margin-top:3px;

    font-size:10px;

    color:#292c27;
}

.booking-float--availability{
    top:90px;
    right:-12px;

    animation:bookingFloatOne 5.8s ease-in-out infinite;
}

.booking-float--season{
    left:-28px;
    top:235px;

    animation:bookingFloatTwo 6.4s ease-in-out infinite;
}

.booking-float--reservation{
    right:0;
    bottom:55px;

    animation:bookingFloatThree 5.5s ease-in-out infinite;
}

.booking-float--reservation > i{
    width:7px;
    height:7px;

    margin-left:4px;

    border-radius:50%;

    background:var(--td-green);

    box-shadow:
        0 0 10px rgba(47,155,87,.55);

    animation:bookingStatus 1.8s ease-in-out infinite;
}


/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes bookingContentIn{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:none;
    }

}

@keyframes bookingCardFloat{

    0%,100%{
        transform:
            rotateY(-3deg)
            rotateX(1deg)
            translateY(0);
    }

    50%{
        transform:
            rotateY(-3deg)
            rotateX(1deg)
            translateY(-10px);
    }

}

@keyframes bookingFloatOne{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

@keyframes bookingFloatTwo{

    0%,100%{
        transform:translateY(0) rotate(-1deg);
    }

    50%{
        transform:translateY(8px) rotate(1deg);
    }

}

@keyframes bookingFloatThree{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}

@keyframes bookingStatus{

    0%,100%{
        opacity:.55;
        transform:scale(.9);
    }

    50%{
        opacity:1;
        transform:scale(1.15);
    }

}

@keyframes bookingSunFloat{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(-25px,25px) scale(1.06);
    }

}

@keyframes bookingLeafOne{

    0%,100%{
        transform:rotate(-28deg) translateY(0);
    }

    50%{
        transform:rotate(-23deg) translateY(-12px);
    }

}

@keyframes bookingLeafTwo{

    0%,100%{
        transform:rotate(32deg) translateY(0);
    }

    50%{
        transform:rotate(27deg) translateY(11px);
    }

}


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

@media(max-width:1050px){

    .booking-hero__inner{
        gap:40px;
    }

}

@media(max-width:900px){

    .booking-hero{
        min-height:auto;
    }

    .booking-hero__inner{
        grid-template-columns:1fr;

        padding:100px 0 85px;
    }

    .booking-hero__visual{
        width:min(100%,680px);

        margin:0 auto;
    }

}

@media(max-width:620px){

    .booking-hero__inner{
        width:min(100% - 30px,1240px);

        padding:82px 0 65px;
    }

    .booking-hero__title{
        font-size:clamp(44px,13vw,60px);
    }

    .booking-hero__lead{
        font-size:18px;
    }

    .booking-hero__actions{
        flex-direction:column;
    }

    .booking-hero__button{
        width:100%;
    }

    .booking-hero__visual{
        min-height:520px;

        transform:scale(.90);

        transform-origin:center;
    }

    .booking-float--season{
        left:0;
    }

    .booking-float--availability{
        right:0;
    }

}

@media(prefers-reduced-motion:reduce){

    .booking-hero *,
    .booking-hero *::before,
    .booking-hero *::after{
        animation:none !important;
        transition:none !important;
    }

}
/* =========================================================
   02 · RECORRIDO DEL HUÉSPED
   ========================================================= */

.bk-journey{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:#fff;
    color:#191b17;
}

.bk-journey::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:-260px;
    top:-230px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(47,155,87,.10),
        transparent 68%
    );
}

.bk-journey__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:auto;
}

.bk-journey__head{
    max-width:820px;
}

.bk-journey__head h2{
    margin:0;
    font-size:clamp(43px,5vw,69px);
    line-height:.99;
    letter-spacing:-.045em;
}

.bk-journey__head h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-journey__head p{
    max-width:720px;
    margin:27px 0 0;
    font-size:18px;
    line-height:1.7;
    color:#666961;
}


/* FLUJO */

.bk-journey__flow{
    display:grid;
    grid-template-columns:1fr 55px 1fr 55px 1fr 55px 1fr;
    align-items:center;
    margin-top:70px;
}

.bk-journey__step{
    position:relative;
    min-height:295px;
    padding:27px 23px;
    border:1px solid #e4e7df;
    border-radius:18px;
    background:#fff;
    box-shadow:0 18px 45px rgba(42,50,38,.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.bk-journey__step:hover{
    transform:translateY(-8px);
    border-color:rgba(242,138,26,.28);
    box-shadow:0 25px 55px rgba(42,50,38,.10);
}

.bk-journey__step--final{
    border-color:rgba(47,155,87,.22);
    background:
        linear-gradient(
            145deg,
            #fff,
            rgba(47,155,87,.035)
        );
}

.bk-journey__number{
    position:absolute;
    right:20px;
    top:18px;
    font-size:10px;
    font-weight:800;
    color:#b6b9b2;
}

.bk-journey__icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:15px;
    background:rgba(242,138,26,.10);
}

.bk-journey__icon--green{
    background:rgba(47,155,87,.10);
}

.bk-journey__step small{
    display:block;
    margin-top:25px;
    font-size:8px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:var(--td-green);
}

.bk-journey__step h3{
    margin:7px 0 0;
    font-size:20px;
}

.bk-journey__step p{
    margin:11px 0 0;
    font-size:12px;
    line-height:1.65;
    color:#7b7e76;
}


/* ICONOS CSS */

.bk-calendar{
    width:31px;
    height:30px;
    display:grid;
    place-items:center;
    border:2px solid var(--td-orange);
    border-radius:5px;
}

.bk-calendar i{
    font-style:normal;
    font-size:10px;
    font-weight:800;
    color:var(--td-orange);
}

.bk-search-icon{
    position:relative;
    width:23px;
    height:23px;
    border:2px solid var(--td-green);
    border-radius:50%;
}

.bk-search-icon::after{
    content:"";
    position:absolute;
    width:9px;
    height:2px;
    right:-7px;
    bottom:-3px;
    transform:rotate(45deg);
    background:var(--td-green);
}

.bk-bed-icon{
    position:relative;
    width:31px;
    height:19px;
    border-bottom:3px solid var(--td-orange);
    border-left:3px solid var(--td-orange);
}

.bk-bed-icon::before{
    content:"";
    position:absolute;
    left:3px;
    bottom:3px;
    width:9px;
    height:8px;
    border-radius:4px 4px 0 0;
    background:var(--td-orange);
}

.bk-bed-icon::after{
    content:"";
    position:absolute;
    right:0;
    bottom:3px;
    width:17px;
    height:10px;
    border-radius:4px 4px 0 0;
    background:rgba(242,138,26,.38);
}

.bk-check-icon{
    font-size:22px;
    font-weight:800;
    color:var(--td-green);
}


/* CONEXIÓN */

.bk-journey__line{
    position:relative;
    height:1px;
    overflow:hidden;
    background:#e2e6df;
}

.bk-journey__line i{
    position:absolute;
    width:35px;
    height:1px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--td-orange),
        var(--td-green),
        transparent
    );
    animation:bkJourneyData 2.5s linear infinite;
}


/* MENSAJE */

.bk-journey__message{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:45px;
    padding:23px 27px;
    border-left:3px solid var(--td-orange);
    background:#f8faf6;
}

.bk-journey__message span{
    flex:0 0 auto;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.10em;
    color:var(--td-green);
}

.bk-journey__message strong{
    font-size:18px;
    line-height:1.45;
}

@keyframes bkJourneyData{
    from{left:-40px}
    to{left:100%}
}

@media(max-width:950px){

    .bk-journey__flow{
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .bk-journey__line{
        display:none;
    }
}

@media(max-width:600px){

    .bk-journey{
        padding:90px 0;
    }

    .bk-journey__inner{
        width:min(100% - 30px,1180px);
    }

    .bk-journey__flow{
        grid-template-columns:1fr;
    }

    .bk-journey__message{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }
}
/* =========================================================
   03 · DISPONIBILIDAD
   ========================================================= */

.bk-availability{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:#f3f7f1;
    color:#191b17;
}

.bk-availability::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    right:-210px;
    bottom:-230px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(242,138,26,.11),
        transparent 68%
    );
    animation:bkAvailGlow 12s ease-in-out infinite;
}

.bk-availability__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:auto;

    display:grid;
    grid-template-columns:.92fr 1.08fr;
    align-items:center;
    gap:90px;
}

.bk-availability__content h2{
    margin:0;
    font-size:clamp(43px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.bk-availability__content h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-availability__lead{
    margin:27px 0 0;
    font-size:19px;
    line-height:1.7;
    color:#555a51;
}

.bk-availability__text{
    margin:14px 0 0;
    font-size:15px;
    line-height:1.75;
    color:#777c73;
}

.bk-availability__points{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:32px;
}

.bk-availability__points span{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    font-weight:650;
    color:#555a52;
}

.bk-availability__points i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--td-green);
}


/* CALENDARIO */

.bk-availability__visual{
    position:relative;
    min-height:550px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.bk-calendar-panel{
    position:relative;
    z-index:4;
    width:440px;
    padding:25px;
    border:1px solid #dfe5dc;
    border-radius:19px;
    background:#fff;
    box-shadow:0 30px 70px rgba(40,52,37,.11);
    animation:bkCalendarFloat 7s ease-in-out infinite;
}

.bk-calendar-panel__head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:19px;
    border-bottom:1px solid #ecefe9;
}

.bk-calendar-panel__head small,
.bk-calendar-panel__head strong{
    display:block;
}

.bk-calendar-panel__head small{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.09em;
    color:#a1a69e;
}

.bk-calendar-panel__head strong{
    margin-top:3px;
    font-size:15px;
}

.bk-calendar-panel__head > span{
    color:var(--td-orange);
    font-weight:800;
}

.bk-calendar-panel__week,
.bk-calendar-panel__days{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    text-align:center;
}

.bk-calendar-panel__week{
    margin-top:18px;
}

.bk-calendar-panel__week span{
    font-size:7px;
    font-weight:800;
    color:#aaaFA7;
}

.bk-calendar-panel__days{
    gap:6px 3px;
    margin-top:9px;
}

.bk-calendar-panel__days span{
    height:37px;
    display:grid;
    place-items:center;
    border-radius:8px;
    font-size:9px;
    font-weight:650;
    color:#555a52;
}

.bk-calendar-panel__days .muted{
    color:#c7cac5;
}

.bk-calendar-panel__days .range{
    color:var(--td-green);
    background:rgba(47,155,87,.08);
}

.bk-calendar-panel__days .selected{
    color:#fff;
    background:var(--td-orange);
    box-shadow:0 8px 18px rgba(242,138,26,.18);
}

.bk-calendar-panel__days .selected--end{
    background:var(--td-green);
    box-shadow:0 8px 18px rgba(47,155,87,.18);
}

.bk-calendar-panel__result{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:20px;
    padding:13px;
    border-radius:11px;
    background:#f1f8f2;
}

.bk-calendar-panel__result > span{
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    border-radius:8px;
    color:#fff;
    background:var(--td-green);
}

.bk-calendar-panel__result small,
.bk-calendar-panel__result strong{
    display:block;
}

.bk-calendar-panel__result small{
    font-size:7px;
    color:#809084;
}

.bk-calendar-panel__result strong{
    margin-top:3px;
    font-size:10px;
}

.bk-calendar-panel__result b{
    margin-left:auto;
    font-size:9px;
    color:var(--td-orange);
}


/* FLOTANTES */

.bk-avail-float{
    position:absolute;
    z-index:7;
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border:1px solid #dfe4dc;
    border-radius:12px;
    background:#fff;
    box-shadow:0 18px 38px rgba(40,52,37,.10);
}

.bk-avail-float > span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:9px;
    font-size:10px;
    font-weight:800;
    color:#fff;
    background:var(--td-orange);
}

.bk-avail-float small,
.bk-avail-float strong{
    display:block;
}

.bk-avail-float small{
    font-size:7px;
    color:#a0a59d;
}

.bk-avail-float strong{
    margin-top:3px;
    font-size:9px;
}

.bk-avail-float--rooms{
    right:0;
    top:95px;
    animation:bkAvailOne 5.8s ease-in-out infinite;
}

.bk-avail-float--guest{
    left:0;
    bottom:75px;
    animation:bkAvailTwo 6.2s ease-in-out infinite;
}

.bk-avail-float--guest > span{
    background:var(--td-green);
}

@keyframes bkCalendarFloat{
    0%,100%{transform:translateY(0) rotate(1deg)}
    50%{transform:translateY(-9px) rotate(0)}
}

@keyframes bkAvailOne{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-8px)}
}

@keyframes bkAvailTwo{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(8px)}
}

@keyframes bkAvailGlow{
    0%,100%{transform:translate(0,0)}
    50%{transform:translate(-30px,-20px)}
}

@media(max-width:900px){

    .bk-availability__inner{
        grid-template-columns:1fr;
        gap:55px;
    }
}

@media(max-width:600px){

    .bk-availability{
        padding:90px 0;
    }

    .bk-availability__inner{
        width:min(100% - 30px,1180px);
    }

    .bk-availability__points{
        grid-template-columns:1fr;
    }

    .bk-availability__visual{
        transform:scale(.88);
        transform-origin:center;
    }
}
/* =========================================================
   04 · HABITACIONES
   ========================================================= */

.bk-rooms{
    position:relative;
    padding:130px 0;
    background:#fff;
    color:#191b17;
}

.bk-rooms__inner{
    width:min(1180px,calc(100% - 48px));
    margin:auto;
}

.bk-rooms__head{
    max-width:850px;
}

.bk-rooms__head h2{
    margin:0;
    font-size:clamp(43px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.bk-rooms__head h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-rooms__head p{
    max-width:680px;
    margin:26px 0 0;
    font-size:18px;
    line-height:1.7;
    color:#676b63;
}

.bk-rooms__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:17px;
    margin-top:60px;
}

.bk-room-card{
    overflow:hidden;
    border:1px solid #e2e6df;
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 38px rgba(39,49,36,.06);
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bk-room-card:hover{
    transform:translateY(-9px);
    box-shadow:0 25px 55px rgba(39,49,36,.11);
}

.bk-room-card--featured{
    transform:translateY(-14px);
    border-color:rgba(242,138,26,.24);
}

.bk-room-card--featured:hover{
    transform:translateY(-22px);
}

.bk-room-card__image{
    position:relative;
    height:220px;
    overflow:hidden;
}

.bk-room-card__image::before,
.bk-room-card__image::after{
    content:"";
    position:absolute;
    border-radius:50%;
}

.bk-room-card__image::before{
    width:280px;
    height:150px;
    left:-60px;
    bottom:-70px;
    background:rgba(47,155,87,.35);
}

.bk-room-card__image::after{
    width:210px;
    height:140px;
    right:-50px;
    bottom:-75px;
    background:rgba(47,155,87,.55);
}

.bk-room-card__image--one{
    background:linear-gradient(145deg,#e8f3e9,#c9dfcd);
}

.bk-room-card__image--two{
    background:linear-gradient(145deg,#fff0dd,#dcebdc);
}

.bk-room-card__image--three{
    background:linear-gradient(145deg,#e5f2ed,#c5ded1);
}

.bk-room-card__image > span{
    position:absolute;
    z-index:3;
    left:15px;
    top:15px;
    padding:7px 9px;
    border-radius:50px;
    font-size:7px;
    font-weight:800;
    color:var(--td-green);
    background:rgba(255,255,255,.88);
}

.bk-room-card--featured .bk-room-card__image > span{
    color:#fff;
    background:var(--td-orange);
}

.bk-room-card__body{
    padding:22px;
}

.bk-room-card__body > small{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--td-green);
}

.bk-room-card h3{
    margin:6px 0 0;
    font-size:20px;
}

.bk-room-card__features{
    display:flex;
    gap:8px;
    margin-top:14px;
}

.bk-room-card__features span{
    padding:6px 8px;
    border-radius:50px;
    font-size:7px;
    color:#747970;
    background:#f3f5f1;
}

.bk-room-card__bottom{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-top:25px;
    padding-top:17px;
    border-top:1px solid #ecefe9;
}

.bk-room-card__bottom small,
.bk-room-card__bottom strong{
    display:block;
}

.bk-room-card__bottom small{
    font-size:7px;
    color:#999e96;
}

.bk-room-card__bottom strong{
    margin-top:2px;
    font-size:20px;
    color:var(--td-orange);
}

.bk-room-card__bottom > span{
    font-size:8px;
    font-weight:700;
    color:var(--td-green);
}


/* TEMPORADAS */

.bk-rooms__season{
    display:grid;
    grid-template-columns:1fr .8fr;
    gap:60px;
    align-items:center;
    margin-top:55px;
    padding:28px 32px;
    border-radius:16px;
    background:#f3f7f1;
}

.bk-rooms__season span{
    display:block;
    margin-bottom:6px;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:var(--td-orange);
}

.bk-rooms__season strong{
    font-size:20px;
}

.bk-rooms__season p{
    margin:0;
    font-size:13px;
    line-height:1.65;
    color:#6e736a;
}

@media(max-width:850px){

    .bk-rooms__grid{
        grid-template-columns:1fr;
    }

    .bk-room-card--featured{
        transform:none;
    }

    .bk-rooms__season{
        grid-template-columns:1fr;
        gap:15px;
    }
}

@media(max-width:600px){

    .bk-rooms{
        padding:90px 0;
    }

    .bk-rooms__inner{
        width:min(100% - 30px,1180px);
    }
}
/* =========================================================
   05 · ADMINISTRACIÓN
   ========================================================= */

.bk-admin{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #18231b,
            #111712
        );
}

.bk-admin::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    left:-220px;
    bottom:-260px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(47,155,87,.18),
        transparent 68%
    );
}

.bk-admin::after{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    right:-200px;
    top:-220px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(242,138,26,.14),
        transparent 68%
    );
}

.bk-admin__inner{
    position:relative;
    z-index:2;
    width:min(1180px,calc(100% - 48px));
    margin:auto;

    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:90px;
}

.bk-admin__visual{
    min-height:500px;
    display:flex;
    align-items:center;
}

.bk-admin__panel{
    width:100%;
    padding:25px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:19px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(10px);
    box-shadow:0 30px 70px rgba(0,0,0,.25);
    animation:bkAdminFloat 7s ease-in-out infinite;
}

.bk-admin__top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:19px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.bk-admin__top small,
.bk-admin__top strong{
    display:block;
}

.bk-admin__top small{
    font-size:8px;
    color:rgba(255,255,255,.35);
}

.bk-admin__top strong{
    margin-top:3px;
    font-size:15px;
}

.bk-admin__top > span{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:50px;
    font-size:8px;
    color:#82d29e;
    background:rgba(47,155,87,.10);
}

.bk-admin__top i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--td-green);
}

.bk-admin__stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-top:17px;
}

.bk-admin__stats > div{
    padding:15px;
    border-radius:11px;
    background:rgba(255,255,255,.045);
}

.bk-admin__stats small,
.bk-admin__stats strong,
.bk-admin__stats span{
    display:block;
}

.bk-admin__stats small{
    font-size:7px;
    color:rgba(255,255,255,.30);
}

.bk-admin__stats strong{
    margin-top:5px;
    font-size:23px;
    color:var(--td-orange);
}

.bk-admin__stats span{
    margin-top:3px;
    font-size:7px;
    color:rgba(255,255,255,.40);
}

.bk-admin__reservation{
    display:grid;
    grid-template-columns:46px 1fr auto;
    align-items:center;
    gap:12px;
    margin-top:10px;
    padding:13px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
}

.bk-admin__date{
    width:42px;
    height:45px;
    display:grid;
    place-items:center;
    align-content:center;
    border-radius:8px;
    background:var(--td-orange);
}

.bk-admin__date--green{
    background:var(--td-green);
}

.bk-admin__date small,
.bk-admin__date strong{
    display:block;
    text-align:center;
}

.bk-admin__date small{
    font-size:6px;
}

.bk-admin__date strong{
    font-size:13px;
}

.bk-admin__reservation > div strong,
.bk-admin__reservation > div small{
    display:block;
}

.bk-admin__reservation > div strong{
    font-size:9px;
}

.bk-admin__reservation > div small{
    margin-top:4px;
    font-size:7px;
    color:rgba(255,255,255,.35);
}

.bk-admin__confirmed,
.bk-admin__pending{
    padding:6px 8px;
    border-radius:50px;
    font-size:7px;
}

.bk-admin__confirmed{
    color:#7ed09b;
    background:rgba(47,155,87,.10);
}

.bk-admin__pending{
    color:#f3ad60;
    background:rgba(242,138,26,.10);
}


/* TEXTO */

.bk-admin__content h2{
    margin:0;
    font-size:clamp(43px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.bk-admin__content h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-admin__content > p{
    margin:27px 0 0;
    font-size:18px;
    line-height:1.72;
    color:rgba(255,255,255,.58);
}

.bk-admin__features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:34px;
}

.bk-admin__features > div{
    padding:16px;
    border:1px solid rgba(255,255,255,.07);
    border-radius:12px;
    background:rgba(255,255,255,.025);
    transition:transform .3s ease;
}

.bk-admin__features > div:hover{
    transform:translateY(-5px);
}

.bk-admin__features span{
    font-size:8px;
    font-weight:800;
    color:var(--td-orange);
}

.bk-admin__features strong{
    display:block;
    margin-top:8px;
    font-size:12px;
}

.bk-admin__features p{
    margin:6px 0 0;
    font-size:9px;
    line-height:1.55;
    color:rgba(255,255,255,.38);
}

@keyframes bkAdminFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-9px)}
}

@media(max-width:900px){

    .bk-admin__inner{
        grid-template-columns:1fr;
        gap:55px;
    }
}

@media(max-width:600px){

    .bk-admin{
        padding:90px 0;
    }

    .bk-admin__inner{
        width:min(100% - 30px,1180px);
    }

    .bk-admin__features{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   06 · TIPOS DE HOSPEDAJE
   ========================================================= */

.bk-flexible{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:#f7f8f4;
    color:#191b17;
}

.bk-flexible__inner{
    width:min(1180px,calc(100% - 48px));
    margin:auto;
}

.bk-flexible__head{
    max-width:850px;
}

.bk-flexible__head h2{
    margin:0;
    font-size:clamp(43px,5vw,68px);
    line-height:1;
    letter-spacing:-.045em;
}

.bk-flexible__head h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-flexible__head p{
    max-width:740px;
    margin:26px 0 0;
    font-size:18px;
    line-height:1.72;
    color:#656a61;
}

.bk-flexible__types{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:11px;
    margin-top:60px;
}

.bk-flexible__types article{
    position:relative;
    min-height:230px;
    padding:22px 18px;
    overflow:hidden;
    border:1px solid #e0e5dd;
    border-radius:16px;
    background:#fff;
    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.bk-flexible__types article:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(40,50,36,.09);
}

.bk-flexible__types article > span{
    font-size:8px;
    font-weight:800;
    color:var(--td-orange);
}

.bk-flexible__types strong{
    position:absolute;
    z-index:3;
    left:18px;
    right:18px;
    bottom:20px;
    font-size:14px;
}

.bk-flexible__shape{
    position:absolute;
    width:130px;
    height:100px;
    left:50%;
    top:60px;
    transform:translateX(-50%);
    border-radius:50% 50% 15% 15%;
    background:rgba(47,155,87,.10);
}

.bk-flexible__shape::after{
    content:"";
    position:absolute;
    width:45px;
    height:55px;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    border-radius:7px 7px 0 0;
    background:rgba(242,138,26,.18);
}

.bk-flexible__types article:nth-child(2n) .bk-flexible__shape{
    background:rgba(242,138,26,.09);
}

.bk-flexible__types article:nth-child(2n) .bk-flexible__shape::after{
    background:rgba(47,155,87,.20);
}

.bk-flexible__statement{
    display:flex;
    align-items:center;
    gap:20px;
    max-width:830px;
    margin-top:48px;
}

.bk-flexible__statement > span{
    width:45px;
    height:3px;
    flex:0 0 auto;
    background:linear-gradient(
        90deg,
        var(--td-orange),
        var(--td-green)
    );
}

.bk-flexible__statement p{
    margin:0;
    font-size:17px;
    line-height:1.6;
    color:#60655c;
}

.bk-flexible__statement strong{
    color:#20231e;
}

@media(max-width:900px){

    .bk-flexible__types{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){

    .bk-flexible{
        padding:90px 0;
    }

    .bk-flexible__inner{
        width:min(100% - 30px,1180px);
    }

    .bk-flexible__types{
        grid-template-columns:1fr;
    }
}
/* =========================================================
   07 · CIERRE BOOKING
   ========================================================= */

.bk-final{
    position:relative;
    overflow:hidden;
    min-height:680px;
    display:flex;
    align-items:center;
    padding:120px 0;
    background:#fff;
    color:#191b17;
}

.bk-final__inner{
    position:relative;
    z-index:4;
    width:min(1180px,calc(100% - 48px));
    margin:auto;
}

.bk-final__inner > *{
    max-width:780px;
}

.bk-final h2{
    margin:0;
    font-size:clamp(52px,6vw,84px);
    line-height:.94;
    letter-spacing:-.055em;
}

.bk-final h2 span{
    display:block;
    color:var(--td-orange);
}

.bk-final__inner > p{
    max-width:680px;
    margin:29px 0 0;
    font-size:18px;
    line-height:1.75;
    color:#656a61;
}

.bk-final__actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:36px;
}

.bk-final__button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-height:57px;
    padding:0 25px;
    border-radius:8px;
    text-decoration:none !important;
    font-size:13px;
    font-weight:750;
    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.bk-final__button--primary{
    color:#fff !important;
    background:var(--td-orange);
    box-shadow:0 17px 38px rgba(242,138,26,.19);
}

.bk-final__button--primary:hover{
    color:#fff !important;
    transform:translateY(-4px);
    box-shadow:0 23px 48px rgba(242,138,26,.27);
}

.bk-final__button--demo{
    color:var(--td-green) !important;
    border:1px solid rgba(47,155,87,.23);
    background:#fff;
}

.bk-final__button--demo:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(40,50,36,.08);
}

.bk-final__proof{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:32px;
}

.bk-final__proof-dot{
    width:9px;
    height:9px;
    flex:0 0 auto;
    border-radius:50%;
    background:var(--td-green);
    box-shadow:0 0 0 6px rgba(47,155,87,.08);
    animation:bkFinalPulse 2s ease-in-out infinite;
}

.bk-final__proof small,
.bk-final__proof strong{
    display:block;
}

.bk-final__proof small{
    font-size:8px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#999e96;
}

.bk-final__proof strong{
    margin-top:4px;
    font-size:11px;
}


/* PAISAJE */

.bk-final__landscape{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:48%;
    pointer-events:none;
}

.bk-final__sun{
    position:absolute;
    width:230px;
    height:230px;
    right:12%;
    top:80px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(242,138,26,.18),
        rgba(242,138,26,.05) 55%,
        transparent 70%
    );
    animation:bkFinalSun 10s ease-in-out infinite;
}

.bk-final__mountain{
    position:absolute;
    bottom:-150px;
    border-radius:50% 50% 0 0;
}

.bk-final__mountain--1{
    width:600px;
    height:390px;
    right:-150px;
    background:rgba(47,155,87,.10);
    transform:rotate(-7deg);
}

.bk-final__mountain--2{
    width:520px;
    height:310px;
    right:180px;
    bottom:-170px;
    background:rgba(47,155,87,.065);
    transform:rotate(7deg);
}

@keyframes bkFinalPulse{
    0%,100%{transform:scale(.9);opacity:.6}
    50%{transform:scale(1.15);opacity:1}
}

@keyframes bkFinalSun{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(15px)}
}

@media(max-width:850px){

    .bk-final__landscape{
        opacity:.45;
        width:100%;
    }
}

@media(max-width:600px){

    .bk-final{
        min-height:auto;
        padding:90px 0;
    }

    .bk-final__inner{
        width:min(100% - 30px,1180px);
    }

    .bk-final__actions{
        flex-direction:column;
    }

    .bk-final__button{
        width:100%;
    }
}