/* ============================================================
   BFT HOME RESPONSIVE FINAL
   2026-09-17

   Unifica:
   - desktop >= 1100
   - tablet / mobile <= 1099
   - drawer móvil desde la derecha
   - hero responsive estable
   ============================================================ */


/* ------------------------------------------------------------
   BASE HEADER
   ------------------------------------------------------------ */

html{
    scroll-padding-top:84px;
}

body.bft-menu-open{
    overflow:hidden !important;
}

#main-header,
#main-header.header-solid{
    position:sticky !important;
    top:0 !important;
    left:auto !important;
    right:auto !important;

    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;

    background:#f7f5f1 !important;

    border-top:0 !important;
    border-bottom:1px solid rgba(0,0,0,.10) !important;

    box-shadow:none !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;

    overflow:visible !important;

    z-index:4000 !important;
}


#main-header .nav-container{
    box-sizing:border-box !important;

    width:100% !important;
    max-width:1480px !important;

    height:74px !important;
    min-height:74px !important;
    max-height:74px !important;

    margin:0 auto !important;

    padding:
        0
        clamp(18px,2.2vw,34px)
        !important;

    display:flex !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:
        clamp(14px,1.6vw,26px)
        !important;
}


#main-header .bft-logo-link,
#main-header .nav-logo.bft-logo-link{
    flex:0 0 auto !important;

    display:flex !important;
    align-items:center !important;

    min-width:0 !important;

    gap:9px !important;

    color:#111 !important;
}


#main-header .bft-logo-link::before,
#main-header .nav-logo.bft-logo-link::before{
    width:44px !important;
    height:44px !important;

    flex:0 0 44px !important;
}


#main-header .bft-logo-main,
#main-header .bft-logo-word,
#main-header .bft-logo-accent,
#main-header .logo-accent{
    color:#111 !important;

    -webkit-text-fill-color:#111 !important;

    font-size:
        clamp(1.22rem,1.65vw,1.62rem)
        !important;

    line-height:.94 !important;

    text-shadow:none !important;
}


#main-header .bft-logo-sub{
    margin-top:3px !important;

    color:#646464 !important;

    -webkit-text-fill-color:#646464 !important;

    font-size:.50rem !important;

    letter-spacing:.065em !important;

    line-height:1 !important;
}


/* ------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------ */

@media (min-width:1100px){

    #main-header .nav-toggle{
        display:none !important;
    }


    #main-header #navLinks.nav-links{
        position:static !important;

        inset:auto !important;

        width:auto !important;
        height:auto !important;
        min-height:0 !important;
        max-width:none !important;

        flex:1 1 auto !important;

        display:flex !important;
        flex-direction:row !important;

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

        gap:
            clamp(12px,1.35vw,23px)
            !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        transform:none !important;

        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;

        overflow:visible !important;

        box-shadow:none !important;
    }


    #main-header #navLinks.nav-links > li{
        width:auto !important;
        margin:0 !important;
        padding:0 !important;

        border:0 !important;
    }


    #main-header #navLinks.nav-links > li > a{
        display:inline-flex !important;

        width:auto !important;

        padding:8px 0 !important;

        color:#515151 !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif
            !important;

        font-size:14px !important;
        font-weight:600 !important;

        line-height:1.2 !important;

        white-space:nowrap !important;

        text-align:left !important;

        text-shadow:none !important;
    }


    #main-header #navLinks.nav-links > li > a:hover{
        color:#111 !important;
    }


    #main-header .nav-right{
        flex:0 0 auto !important;

        display:flex !important;
        align-items:center !important;

        gap:9px !important;

        margin-left:auto !important;
    }


    #main-header .lang-selector{
        display:flex !important;

        gap:3px !important;
    }


    #main-header .lang-btn{
        padding:6px 8px !important;

        color:#555 !important;

        font-size:12px !important;
        font-weight:700 !important;

        line-height:1 !important;

        border-radius:5px !important;
    }


    #main-header .lang-btn.active{
        color:#111 !important;
        background:#e5e2dd !important;
    }


    #main-header .nav-cta{
        min-height:38px !important;

        padding:9px 16px !important;

        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;

        background:#111 !important;
        color:#fff !important;

        border:1px solid #111 !important;
        border-radius:2px !important;

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

        line-height:1.15 !important;

        white-space:nowrap !important;

        box-shadow:none !important;
    }


    #main-header .nav-cta:hover{
        background:#c82638 !important;
        border-color:#c82638 !important;
    }


    #main-header .bft-drawer-tools{
        display:none !important;
    }


    /*
     * HERO DESKTOP
     */

    html body #hero{
        position:relative !important;

        width:100% !important;

        height:auto !important;

        min-height:
            max(
                620px,
                calc(100svh - 60px)
            )
            !important;

        margin-top:0 !important;

        display:grid !important;

        align-items:start !important;

        overflow:hidden !important;

        isolation:isolate !important;

        background:#f7f5f1 !important;
    }


    html body #hero::before,
    html body #hero::after{
        display:none !important;
        content:none !important;
    }


    html body #hero .hero-poster,
    html body #hero .hero-video{
        position:absolute !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:46% !important;

        width:54% !important;
        height:100% !important;

        background-size:cover !important;
        background-position:center center !important;

        object-fit:cover !important;
        object-position:center center !important;

        filter:
            saturate(.98)
            brightness(1.04)
            contrast(.98)
            !important;

        transform:none !important;

        z-index:1 !important;
    }


    html body #hero .hero-overlay{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        background:transparent !important;

        opacity:1 !important;

        z-index:2 !important;
    }


    html body #hero .bft-hero-curve{
        display:block !important;

        position:absolute !important;

        inset:
            0
            auto
            0
            0
            !important;

        width:58% !important;
        height:100% !important;

        color:#f7f5f1 !important;

        opacity:1 !important;

        filter:none !important;

        transform:none !important;

        pointer-events:none !important;

        z-index:3 !important;
    }


    html body #hero .bft-hero-curve path{
        fill:#f7f5f1 !important;

        fill-opacity:1 !important;

        stroke:none !important;
    }


    html body #hero .hero-content{
        position:relative !important;

        z-index:4 !important;

        box-sizing:border-box !important;

        width:
            min(
                calc(100% - 48px),
                1440px
            )
            !important;

        max-width:1440px !important;

        margin:0 auto !important;

        padding:
            26px
            24px
            36px
            !important;

        text-align:left !important;

        color:#111 !important;

        transform:none !important;
    }


    html body #hero .hero-content > *{
        width:auto !important;

        max-width:
            min(
                620px,
                48%
            )
            !important;

        margin-left:0 !important;
    }


    html body #hero .hero-badges{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:28px !important;
        row-gap:0 !important;

        width:min(620px,48%) !important;
        max-width:620px !important;

        margin:0 0 20px !important;
        padding:0 !important;

        justify-content:start !important;
    }


    html body #hero .hero-badges .badge{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        width:100% !important;
        min-width:0 !important;
        min-height:42px !important;

        margin:0 !important;
        padding:10px 0 9px !important;

        color:#111 !important;
        background:transparent !important;

        border:0 !important;
        border-bottom:1px solid rgba(17,17,17,.18) !important;
        border-radius:0 !important;

        box-shadow:none !important;
        backdrop-filter:none !important;

        font-size:15px !important;
        font-weight:600 !important;
        line-height:1.25 !important;
        text-align:left !important;
        white-space:nowrap !important;
    }


    html body #hero .hero-badges .bft-mini-icon{
        width:18px !important;
        height:18px !important;
        flex:0 0 18px !important;
        margin:0 10px 0 0 !important;
        color:#111 !important;
    }


    html body #hero h1{
        color:#090909 !important;

        margin:
            0
            0
            22px
            !important;

        max-width:610px !important;

        font-size:
            clamp(
                42px,
                4.35vw,
                68px
            )
            !important;

        line-height:.94 !important;

        text-align:left !important;

        text-shadow:none !important;
    }


    html body #hero .hero-sub{
        max-width:590px !important;

        margin:
            0
            0
            30px
            !important;

        color:#414141 !important;

        font-size:
            clamp(
                17px,
                1.25vw,
                20px
            )
            !important;

        line-height:1.5 !important;

        text-align:left !important;

        text-shadow:none !important;
    }


    html body #hero .hero-btns{
        display:flex !important;

        flex-wrap:wrap !important;

        justify-content:flex-start !important;

        align-items:center !important;

        gap:12px !important;
    }


    html body #hero .hero-btns .btn{
        min-width:185px !important;
        min-height:48px !important;

        padding:
            12px
            20px
            !important;

        font-size:15px !important;
        font-weight:700 !important;

        line-height:1.2 !important;

        border-radius:4px !important;
    }


    html body #hero .hero-btns .btn-primary{
        background:#111 !important;
        color:#fff !important;
        border-color:#111 !important;
    }


    html body #hero .hero-btns .btn-outline{
        background:transparent !important;
        color:#111 !important;
        border:2px solid #111 !important;
    }


    html body #hero .hero-scroll{
        display:none !important;
    }
}


/*
 * Un poco más de aire en desktop intermedio.
 * Ocultamos Blog antes de que la barra empiece a comprimirse.
 */

@media (min-width:1100px) and (max-width:1240px){

    #main-header .nav-blog-link{
        display:none !important;
    }


    #main-header .nav-container{
        gap:12px !important;
    }


    #main-header #navLinks.nav-links{
        gap:13px !important;
    }
}


/* ------------------------------------------------------------
   TABLET + MOBILE
   <= 1099
   ------------------------------------------------------------ */

@media (max-width:1099px){

    #main-header,
    #main-header.header-solid{
        background:#f7f5f1 !important;

        border-bottom:
            1px solid
            rgba(0,0,0,.10)
            !important;

        box-shadow:none !important;
    }


    #main-header .nav-container{
        height:68px !important;
        min-height:68px !important;
        max-height:68px !important;

        padding:
            0
            14px
            !important;

        gap:10px !important;
    }


    #main-header .bft-logo-link,
    #main-header .nav-logo.bft-logo-link{
        order:1 !important;

        flex:0 1 auto !important;

        min-width:0 !important;

        margin-right:auto !important;

        gap:8px !important;

        overflow:visible !important;
    }


    #main-header .bft-logo-link::before,
    #main-header .nav-logo.bft-logo-link::before{
        width:40px !important;
        height:40px !important;

        flex:0 0 40px !important;
    }


    #main-header .bft-logo{
        min-width:0 !important;

        overflow:visible !important;
    }


    #main-header .bft-logo-main{
        max-width:none !important;

        color:#111 !important;

        font-size:
            clamp(
                1.05rem,
                2.5vw,
                1.35rem
            )
            !important;

        white-space:nowrap !important;

        overflow:visible !important;
    }


    #main-header .bft-logo-sub{
        display:block !important;

        color:#666 !important;

        font-size:.46rem !important;

        white-space:nowrap !important;
    }


    /*
     * En la barra móvil dejamos solamente:
     * logo + Book Now + hamburguesa.
     *
     * Los idiomas se mueven al drawer mediante JS.
     */

    #main-header .nav-right{
        order:2 !important;

        flex:0 0 auto !important;

        width:auto !important;

        margin:0 !important;

        display:flex !important;

        align-items:center !important;
        justify-content:flex-end !important;

        gap:0 !important;
    }


    #main-header .nav-right > .lang-selector{
        display:none !important;
    }


    #main-header .nav-right > .nav-cta{
        display:inline-flex !important;

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

        width:auto !important;
        max-width:none !important;

        min-height:40px !important;

        padding:
            9px
            14px
            !important;

        background:#111 !important;
        color:#fff !important;

        border:
            1px solid
            #111
            !important;

        border-radius:2px !important;

        font-size:13px !important;
        font-weight:700 !important;

        line-height:1 !important;

        white-space:nowrap !important;

        box-shadow:none !important;
    }


    /*
     * HAMBURGUESA
     */

    #main-header #navToggle.nav-toggle{
        order:3 !important;

        position:relative !important;

        z-index:60 !important;

        flex:0 0 42px !important;

        width:42px !important;
        height:42px !important;

        margin:0 !important;

        padding:8px !important;

        display:inline-flex !important;

        flex-direction:column !important;

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

        gap:5px !important;

        background:transparent !important;

        border:0 !important;

        border-radius:6px !important;

        box-shadow:none !important;

        cursor:pointer !important;
    }


    #main-header #navToggle.nav-toggle span{
        display:block !important;

        flex:none !important;

        width:24px !important;
        height:2px !important;
        min-height:2px !important;

        margin:0 !important;

        background:#111 !important;

        border:0 !important;
        border-radius:999px !important;

        opacity:1 !important;

        transform:none;

        transform-origin:center;

        transition:
            transform .28s ease,
            opacity .2s ease
            !important;
    }


    #main-header #navToggle.nav-toggle[aria-expanded="true"]{
        position:relative !important;

        color:#111 !important;

        background:transparent !important;
    }


    #main-header #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg)
            !important;
    }


    #main-header #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(2){
        opacity:0 !important;
    }


    #main-header #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg)
            !important;
    }


    /*
     * BACKDROP
     */

    #main-header .bft-menu-backdrop{
        position:fixed;

        inset:0;

        z-index:40;

        display:block;

        margin:0;

        padding:0;

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

        border:0;

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transition:
            opacity .32s ease,
            visibility .32s ease;
    }


    #main-header .bft-menu-backdrop.open{
        opacity:1;

        visibility:visible;

        pointer-events:auto;
    }


    /*
     * DRAWER DERECHO
     */

    #main-header #navLinks.nav-links{
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;

        z-index:50 !important;

        box-sizing:border-box !important;

        width:
            min(
                88vw,
                420px
            )
            !important;

        max-width:420px !important;

        height:100vh !important;
        height:100dvh !important;

        min-height:100vh !important;
        min-height:100dvh !important;

        margin:0 !important;

        padding:
            82px
            28px
            28px
            !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;
        justify-content:flex-start !important;

        gap:0 !important;

        color:#111 !important;

        background:#f7f5f1 !important;

        border-left:
            1px solid
            rgba(0,0,0,.10)
            !important;

        box-shadow:
            -24px
            0
            70px
            rgba(0,0,0,.20)
            !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        overscroll-behavior:contain !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:none !important;

        transform:
            translate3d(
                100%,
                0,
                0
            )
            !important;

        transition:
            transform
            .38s
            cubic-bezier(.22,.72,.22,1)
            !important;

        backdrop-filter:none !important;

        isolation:isolate;
    }


    #main-header #navLinks.nav-links.open{
        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:
            translate3d(
                0,
                0,
                0
            )
            !important;
    }


    #main-header #navLinks.nav-links::before,
    #main-header #navLinks.nav-links::after{
        display:none !important;

        content:none !important;
    }


    #main-header #navLinks.nav-links > li{
        position:relative !important;

        width:100% !important;
        max-width:none !important;

        margin:0 !important;
        padding:0 !important;

        text-align:left !important;

        border-bottom:
            1px solid
            rgba(0,0,0,.09)
            !important;

        opacity:1 !important;

        transform:none !important;

        animation:none !important;
    }


    #main-header #navLinks.nav-links
    > li
    > a{
        position:relative !important;

        display:flex !important;

        align-items:center !important;

        width:100% !important;
        max-width:none !important;

        min-height:0 !important;

        margin:0 !important;

        padding:
            15px
            3px
            !important;

        color:#161616 !important;

        background:transparent !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif
            !important;

        font-size:
            clamp(
                20px,
                2.6vw,
                25px
            )
            !important;

        font-weight:700 !important;

        line-height:1.15 !important;

        letter-spacing:-.015em !important;

        text-align:left !important;

        text-shadow:none !important;

        transform:none !important;

        transition:
            color .18s ease,
            padding-left .18s ease
            !important;
    }


    #main-header #navLinks.nav-links
    > li
    > a::after{
        display:none !important;

        content:none !important;
    }


    #main-header #navLinks.nav-links
    > li
    > a:hover,
    #main-header #navLinks.nav-links
    > li
    > a:focus{
        color:#c82638 !important;

        background:transparent !important;

        padding-left:9px !important;

        transform:none !important;
    }


    #main-header #navLinks .nav-blog-link{
        display:block !important;
    }


    /*
     * Idiomas + CTA dentro del drawer.
     */

    #main-header #navLinks
    .bft-drawer-tools{
        margin-top:auto !important;

        padding:
            24px
            0
            0
            !important;

        border-bottom:0 !important;
        border-top:
            1px solid
            rgba(0,0,0,.12)
            !important;
    }


    #main-header #navLinks
    .bft-drawer-tools
    .lang-selector{
        display:grid !important;

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

        gap:7px !important;

        width:100% !important;

        margin:
            0
            0
            14px
            !important;
    }


    #main-header #navLinks
    .bft-drawer-tools
    .lang-btn{
        display:flex !important;

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

        min-height:42px !important;

        padding:
            8px
            6px
            !important;

        color:#333 !important;

        background:#fff !important;

        border:
            1px solid
            #d2cec8
            !important;

        border-radius:5px !important;

        font-size:13px !important;
        font-weight:800 !important;

        line-height:1 !important;
    }


    #main-header #navLinks
    .bft-drawer-tools
    .lang-btn.active{
        color:#fff !important;

        background:#111 !important;

        border-color:#111 !important;
    }


    #main-header #navLinks
    .bft-drawer-tools
    .nav-cta{
        display:flex !important;

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

        width:100% !important;

        min-height:50px !important;

        margin:0 !important;

        padding:
            12px
            18px
            !important;

        color:#fff !important;

        background:#111 !important;

        border:
            1px solid
            #111
            !important;

        border-radius:4px !important;

        font-size:15px !important;
        font-weight:800 !important;

        line-height:1.15 !important;
    }


    /*
     * HERO TABLET / MOBILE
     */

    html body #hero{
        position:relative !important;

        box-sizing:border-box !important;

        width:100% !important;

        height:auto !important;

        min-height:
            max(
                650px,
                calc(100svh - 68px)
            )
            !important;

        margin-top:0 !important;

        display:grid !important;

        align-items:center !important;

        overflow:hidden !important;

        isolation:isolate !important;

        background:#111 !important;
    }


    html body #hero::before,
    html body #hero::after{
        display:none !important;

        content:none !important;
    }


    html body #hero .hero-poster,
    html body #hero .hero-video{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        background-size:cover !important;

        background-position:
            center
            center
            !important;

        object-fit:cover !important;
        object-position:center center !important;

        filter:
            saturate(.96)
            contrast(1.02)
            !important;

        transform:none !important;

        z-index:1 !important;
    }


    html body #hero .bft-hero-curve{
        display:none !important;
    }


    html body #hero .hero-overlay{
        position:absolute !important;

        inset:0 !important;

        width:100% !important;
        height:100% !important;

        display:block !important;

        background:
            linear-gradient(
                180deg,
                rgba(5,7,9,.42)
                0%,
                rgba(5,7,9,.54)
                48%,
                rgba(5,7,9,.76)
                100%
            )
            !important;

        opacity:1 !important;

        z-index:2 !important;
    }


    html body #hero .hero-content{
        position:relative !important;

        z-index:3 !important;

        box-sizing:border-box !important;

        width:
            min(
                calc(100% - 40px),
                820px
            )
            !important;

        max-width:820px !important;

        margin:0 auto !important;

        padding:
            44px
            0
            52px
            !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        color:#fff !important;

        text-align:center !important;

        transform:none !important;
    }


    html body #hero .hero-content > *{
        width:100% !important;

        max-width:760px !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    html body #hero .hero-badges{
        width:min(100%,700px) !important;
        max-width:700px !important;

        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:20px !important;
        row-gap:0 !important;

        margin:0 auto 24px !important;
        padding:0 !important;
    }


    html body #hero .hero-badges .badge{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:10px 2px 9px !important;

        color:#fff !important;
        background:transparent !important;

        border:0 !important;
        border-bottom:1px solid rgba(255,255,255,.32) !important;
        border-radius:0 !important;

        box-shadow:none !important;
        backdrop-filter:none !important;

        font-size:14px !important;
        font-weight:650 !important;
        line-height:1.25 !important;
        text-align:left !important;
        white-space:normal !important;
    }


    html body #hero .hero-badges .bft-mini-icon{
        width:17px !important;
        height:17px !important;
        flex:0 0 17px !important;
        margin:0 8px 0 0 !important;
        color:#fff !important;
    }


    html body #hero h1{
        max-width:760px !important;

        margin:
            0
            auto
            20px
            !important;

        color:#fff !important;

        font-size:
            clamp(
                40px,
                7vw,
                64px
            )
            !important;

        line-height:.95 !important;

        text-align:center !important;

        text-shadow:
            0
            3px
            20px
            rgba(0,0,0,.35)
            !important;
    }


    html body #hero .hero-sub{
        max-width:700px !important;

        margin:
            0
            auto
            28px
            !important;

        color:rgba(255,255,255,.96) !important;

        font-size:
            clamp(
                17px,
                2vw,
                20px
            )
            !important;

        line-height:1.5 !important;

        text-align:center !important;

        text-shadow:
            0
            2px
            12px
            rgba(0,0,0,.45)
            !important;
    }


    html body #hero .hero-btns{
        width:auto !important;

        display:flex !important;

        flex-wrap:wrap !important;

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

        gap:12px !important;
    }


    html body #hero .hero-btns .btn{
        min-width:200px !important;
        min-height:50px !important;

        padding:
            12px
            20px
            !important;

        border-radius:4px !important;

        font-size:15.5px !important;
        font-weight:750 !important;

        line-height:1.15 !important;
    }


    html body #hero .hero-btns .btn-primary{
        color:#111 !important;

        background:#fff !important;

        border:
            2px solid
            #fff
            !important;
    }


    html body #hero .hero-btns .btn-outline{
        color:#fff !important;

        background:rgba(0,0,0,.12) !important;

        border:
            2px solid
            rgba(255,255,255,.90)
            !important;
    }


    html body #hero .hero-scroll{
        display:none !important;
    }
}


/* ------------------------------------------------------------
   PHONE
   ------------------------------------------------------------ */

@media (max-width:620px){

    html{
        scroll-padding-top:70px;
    }


    #main-header .nav-container{
        height:64px !important;
        min-height:64px !important;
        max-height:64px !important;

        padding:
            0
            10px
            !important;

        gap:7px !important;
    }


    #main-header .bft-logo-link,
    #main-header .nav-logo.bft-logo-link{
        gap:6px !important;
    }


    #main-header .bft-logo-link::before,
    #main-header .nav-logo.bft-logo-link::before{
        width:36px !important;
        height:36px !important;

        flex:0 0 36px !important;
    }


    #main-header .bft-logo-main{
        font-size:
            clamp(
                .94rem,
                4.5vw,
                1.12rem
            )
            !important;
    }


    #main-header .bft-logo-sub{
        display:none !important;
    }


    #main-header .nav-right > .nav-cta{
        min-height:38px !important;

        padding:
            8px
            10px
            !important;

        font-size:12px !important;
    }


    #main-header #navToggle.nav-toggle{
        flex-basis:40px !important;

        width:40px !important;
        height:40px !important;

        padding:7px !important;
    }


    #main-header #navLinks.nav-links{
        width:
            min(
                92vw,
                390px
            )
            !important;

        max-width:390px !important;

        padding:
            76px
            22px
            22px
            !important;
    }


    #main-header #navLinks.nav-links
    > li
    > a{
        padding:
            14px
            2px
            !important;

        font-size:
            clamp(
                20px,
                6vw,
                24px
            )
            !important;
    }


    html body #hero{
        min-height:
            max(
                660px,
                calc(100svh - 64px)
            )
            !important;
    }


    html body #hero .hero-poster,
    html body #hero .hero-video{
        background-position:
            56%
            center
            !important;

        object-position:
            56%
            center
            !important;
    }


    html body #hero .hero-content{
        width:
            calc(100% - 28px)
            !important;

        padding:
            34px
            0
            46px
            !important;
    }


    html body #hero .hero-badges{
        column-gap:12px !important;
        row-gap:0 !important;
        margin-bottom:20px !important;
    }


    html body #hero .hero-badges .badge{
        min-height:42px !important;
        padding:8px 0 7px !important;
        font-size:12px !important;
        line-height:1.2 !important;
    }


    html body #hero .hero-badges .bft-mini-icon{
        width:15px !important;
        height:15px !important;
        flex-basis:15px !important;
        margin-right:6px !important;
        transform:none !important;
    }


    html body #hero h1{
        margin-bottom:18px !important;

        font-size:
            clamp(
                38px,
                12vw,
                52px
            )
            !important;

        line-height:.94 !important;
    }


    html body #hero .hero-sub{
        margin-bottom:24px !important;

        font-size:16px !important;

        line-height:1.43 !important;
    }


    html body #hero .hero-btns{
        width:
            min(
                100%,
                340px
            )
            !important;

        display:grid !important;

        grid-template-columns:1fr !important;

        gap:9px !important;
    }


    html body #hero .hero-btns .btn{
        width:100% !important;

        min-width:0 !important;

        min-height:50px !important;

        padding:
            12px
            16px
            !important;

        font-size:15px !important;
    }
}


/* ------------------------------------------------------------
   VERY SMALL PHONE
   ------------------------------------------------------------ */

@media (max-width:360px){

    #main-header .nav-container{
        padding:
            0
            8px
            !important;

        gap:5px !important;
    }


    #main-header .bft-logo-link::before,
    #main-header .nav-logo.bft-logo-link::before{
        width:34px !important;
        height:34px !important;

        flex-basis:34px !important;
    }


    #main-header .bft-logo-main{
        font-size:.88rem !important;
    }


    #main-header .nav-right > .nav-cta{
        padding:
            7px
            8px
            !important;

        font-size:11px !important;
    }


    #main-header #navToggle.nav-toggle{
        width:38px !important;
        height:38px !important;

        flex-basis:38px !important;
    }


    html body #hero .hero-badges .badge{
        font-size:11px !important;
    }
}


/* ------------------------------------------------------------
   SHORT LANDSCAPE VIEWPORTS

   No comprimimos todo dentro de 385 px de alto:
   dejamos que el hero tenga altura real y la página haga scroll.
   ------------------------------------------------------------ */

@media (max-width:1099px) and (max-height:600px){

    html body #hero{
        min-height:650px !important;
    }
}


/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */

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

    #main-header #navLinks.nav-links,
    #main-header .bft-menu-backdrop,
    #main-header #navToggle.nav-toggle span{
        transition:none !important;
    }
}


/* ============================================================
   BFT MOBILE NAV + LANGUAGE V2
   2026-09-17
   ============================================================ */

.mobile-lang-menu{
    display:none;
}


/*
 * ------------------------------------------------------------
 * MOBILE / TABLET
 * ------------------------------------------------------------
 */

@media (max-width:1099px){

    html.bft-menu-open,
    body.bft-menu-open{
        overflow:hidden !important;

        overscroll-behavior:none !important;
    }


    /*
     * Barra:
     *
     * [ LOGO ] [ BOOK NOW ] [ EN ▼ ] [ ☰ ]
     */

    html body #main-header .nav-container{
        height:66px !important;
        min-height:66px !important;
        max-height:66px !important;

        padding:
            0
            12px
            !important;

        gap:8px !important;

        flex-wrap:nowrap !important;
    }


    html body #main-header .bft-logo-link,
    html body #main-header .nav-logo.bft-logo-link{
        order:1 !important;

        flex:
            1
            1
            auto
            !important;

        width:auto !important;

        min-width:0 !important;
        max-width:none !important;

        margin:0 auto 0 0 !important;

        overflow:hidden !important;

        gap:7px !important;
    }


    html body #main-header .bft-logo-link::before,
    html body #main-header .nav-logo.bft-logo-link::before{
        width:36px !important;
        height:36px !important;

        flex:
            0
            0
            36px
            !important;
    }


    html body #main-header .bft-logo{
        min-width:0 !important;

        max-width:
            calc(100% - 43px)
            !important;

        overflow:hidden !important;
    }


    html body #main-header .bft-logo-main{
        display:block !important;

        max-width:100% !important;

        color:#111 !important;

        -webkit-text-fill-color:#111 !important;

        font-size:
            clamp(
                .94rem,
                2.25vw,
                1.18rem
            )
            !important;

        line-height:.94 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:clip !important;
    }


    html body #main-header .bft-logo-sub{
        display:block !important;

        max-width:100% !important;

        color:#666 !important;

        -webkit-text-fill-color:#666 !important;

        font-size:.40rem !important;

        line-height:1 !important;

        white-space:nowrap !important;

        overflow:hidden !important;
    }


    /*
     * Nav right.
     */

    html body #main-header .nav-right{
        order:2 !important;

        flex:
            0
            0
            auto
            !important;

        width:auto !important;

        margin:0 !important;

        display:flex !important;

        flex-wrap:nowrap !important;

        align-items:center !important;
        justify-content:flex-end !important;

        gap:7px !important;
    }


    /*
     * Desktop idiomas ocultos.
     */

    html body #main-header
    .nav-right
    > .lang-selector{
        display:none !important;
    }


    /*
     * BOOK NOW
     */

    html body #main-header
    .nav-right
    > .nav-cta{
        display:inline-flex !important;

        flex:
            0
            0
            auto
            !important;

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

        width:auto !important;

        min-height:38px !important;

        margin:0 !important;

        padding:
            8px
            12px
            !important;

        color:#fff !important;

        background:#111 !important;

        border:
            1px
            solid
            #111
            !important;

        border-radius:3px !important;

        box-shadow:none !important;

        font-size:12px !important;

        font-weight:800 !important;

        line-height:1 !important;

        white-space:nowrap !important;
    }


    /*
     * --------------------------------------------------------
     * LANGUAGE BUTTON
     * --------------------------------------------------------
     */

    html body #main-header
    .mobile-lang-menu{
        position:relative !important;

        display:block !important;

        flex:
            0
            0
            auto
            !important;
    }


    html body #main-header
    .mobile-lang-toggle{
        appearance:none;

        box-sizing:border-box;

        width:46px;

        height:38px;

        margin:0;

        padding:
            0
            7px;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:5px;

        color:#111;

        background:#fff;

        border:
            1px
            solid
            #bbb7b1;

        border-radius:3px;

        box-shadow:none;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif;

        font-size:12px;

        font-weight:800;

        line-height:1;

        cursor:pointer;
    }


    html body #main-header
    .mobile-lang-chevron{
        width:6px;

        height:6px;

        display:block;

        border-right:
            1.5px
            solid
            #111;

        border-bottom:
            1.5px
            solid
            #111;

        transform:
            translateY(-2px)
            rotate(45deg);

        transition:
            transform
            .20s
            ease;
    }


    html body #main-header
    .mobile-lang-menu.open
    .mobile-lang-chevron{
        transform:
            translateY(2px)
            rotate(225deg);
    }


    html body #main-header
    .mobile-lang-dropdown{
        position:absolute;

        z-index:7000;

        top:
            calc(
                100%
                +
                9px
            );

        right:0;

        box-sizing:border-box;

        width:154px;

        padding:7px;

        display:grid;

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

        gap:6px;

        background:#fff;

        border:
            1px
            solid
            #d6d2cc;

        border-radius:7px;

        box-shadow:
            0
            16px
            42px
            rgba(0,0,0,.16);

        opacity:0;

        visibility:hidden;

        pointer-events:none;

        transform:
            translateY(-5px);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease;
    }


    html body #main-header
    .mobile-lang-menu.open
    .mobile-lang-dropdown{
        opacity:1;

        visibility:visible;

        pointer-events:auto;

        transform:
            translateY(0);
    }


    html body #main-header
    .mobile-lang-dropdown a{
        min-height:40px;

        padding:
            8px
            6px;

        display:flex;

        align-items:center;

        justify-content:center;

        color:#222 !important;

        background:#f7f5f1;

        border:
            1px
            solid
            #e3dfd9;

        border-radius:4px;

        font-size:12px;

        font-weight:800;

        line-height:1;

        text-decoration:none;
    }


    html body #main-header
    .mobile-lang-dropdown a.active{
        color:#fff !important;

        background:#111 !important;

        border-color:#111 !important;
    }


    /*
     * --------------------------------------------------------
     * HAMBURGER
     * --------------------------------------------------------
     */

    html body #main-header
    #navToggle.nav-toggle{
        order:3 !important;

        position:relative !important;

        z-index:6500 !important;

        flex:
            0
            0
            40px
            !important;

        width:40px !important;
        height:40px !important;

        margin:0 !important;

        padding:8px !important;

        display:flex !important;

        flex-direction:column !important;

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

        gap:5px !important;

        color:#111 !important;

        background:transparent !important;

        border:0 !important;

        border-radius:3px !important;

        box-shadow:none !important;
    }


    html body #main-header
    #navToggle.nav-toggle span{
        width:23px !important;

        height:2px !important;
        min-height:2px !important;

        flex:none !important;

        margin:0 !important;

        background:#111 !important;

        border:0 !important;

        border-radius:999px !important;

        opacity:1 !important;

        transform:none;

        transform-origin:center;

        transition:
            transform .25s ease,
            opacity .18s ease
            !important;
    }


    html body #main-header
    #navToggle.nav-toggle[aria-expanded="true"]{
        position:fixed !important;

        top:13px !important;

        right:14px !important;

        z-index:9000 !important;

        color:#111 !important;

        background:#fff !important;

        border:
            1px
            solid
            #d6d2cc
            !important;

        border-radius:5px !important;
    }


    html body #main-header
    #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(1){
        transform:
            translateY(7px)
            rotate(45deg)
            !important;
    }


    html body #main-header
    #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(2){
        opacity:0 !important;
    }


    html body #main-header
    #navToggle.nav-toggle[aria-expanded="true"]
    span:nth-child(3){
        transform:
            translateY(-7px)
            rotate(-45deg)
            !important;
    }


    /*
     * --------------------------------------------------------
     * BACKDROP
     * --------------------------------------------------------
     */

    html body #main-header
    .bft-menu-backdrop{
        position:fixed !important;

        inset:0 !important;

        z-index:6000 !important;

        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;

        margin:0 !important;

        padding:0 !important;

        display:block !important;

        background:
            rgba(0,0,0,.42)
            !important;

        border:0 !important;

        opacity:0 !important;

        visibility:hidden !important;

        pointer-events:none !important;

        transition:
            opacity .30s ease,
            visibility .30s ease
            !important;
    }


    html body #main-header
    .bft-menu-backdrop.open{
        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;
    }


    /*
     * --------------------------------------------------------
     * DRAWER
     * --------------------------------------------------------
     */

    html body #main-header
    #navLinks.nav-links{
        position:fixed !important;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:auto !important;

        z-index:6200 !important;

        box-sizing:border-box !important;

        width:
            min(
                88vw,
                410px
            )
            !important;

        max-width:410px !important;

        height:100vh !important;
        height:100dvh !important;

        min-height:100vh !important;
        min-height:100dvh !important;

        margin:0 !important;

        padding:
            82px
            26px
            30px
            !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:stretch !important;

        justify-content:flex-start !important;

        gap:0 !important;

        color:#111 !important;

        background:#f7f5f1 !important;

        border:0 !important;

        border-left:
            1px
            solid
            #ddd8d1
            !important;

        box-shadow:
            -24px
            0
            70px
            rgba(0,0,0,.20)
            !important;

        overflow-x:hidden !important;

        overflow-y:auto !important;

        overscroll-behavior:contain !important;

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:none !important;

        transform:
            translate3d(
                102%,
                0,
                0
            )
            !important;

        transition:
            transform
            .36s
            cubic-bezier(
                .22,
                .72,
                .22,
                1
            )
            !important;

        backdrop-filter:none !important;
    }


    html body #main-header
    #navLinks.nav-links.open{
        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:
            translate3d(
                0,
                0,
                0
            )
            !important;
    }


    html body #main-header
    #navLinks.nav-links::before,
    html body #main-header
    #navLinks.nav-links::after{
        content:none !important;

        display:none !important;
    }


    html body #main-header
    #navLinks.nav-links
    > li{
        position:relative !important;

        width:100% !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 !important;

        text-align:left !important;

        border:0 !important;

        border-bottom:
            1px
            solid
            rgba(0,0,0,.10)
            !important;

        opacity:1 !important;

        transform:none !important;

        animation:none !important;
    }


    html body #main-header
    #navLinks.nav-links
    > li
    > a{
        position:relative !important;

        width:100% !important;

        max-width:none !important;

        min-height:0 !important;

        margin:0 !important;

        padding:
            16px
            2px
            !important;

        display:flex !important;

        align-items:center !important;

        color:#151515 !important;

        background:transparent !important;

        font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Arial,
            sans-serif
            !important;

        font-size:
            clamp(
                20px,
                2.5vw,
                25px
            )
            !important;

        font-weight:750 !important;

        line-height:1.12 !important;

        letter-spacing:-.018em !important;

        text-align:left !important;

        text-shadow:none !important;

        transform:none !important;

        animation:none !important;
    }


    html body #main-header
    #navLinks.nav-links
    > li
    > a::after{
        display:none !important;

        content:none !important;
    }


    html body #main-header
    #navLinks.nav-links
    > li
    > a:hover,
    html body #main-header
    #navLinks.nav-links
    > li
    > a:focus-visible{
        color:#c82638 !important;

        background:transparent !important;

        transform:none !important;
    }


    /*
     * El viejo clon de idiomas / CTA no debe aparecer.
     */

    html body #main-header
    #navLinks
    .bft-drawer-tools{
        display:none !important;
    }
}


/*
 * ------------------------------------------------------------
 * PHONE
 * ------------------------------------------------------------
 */

@media (max-width:620px){

    html body #main-header .nav-container{
        height:62px !important;
        min-height:62px !important;
        max-height:62px !important;

        padding:
            0
            8px
            !important;

        gap:5px !important;
    }


    html body #main-header
    .bft-logo-link::before,
    html body #main-header
    .nav-logo.bft-logo-link::before{
        width:32px !important;
        height:32px !important;

        flex-basis:32px !important;
    }


    html body #main-header
    .bft-logo-link,
    html body #main-header
    .nav-logo.bft-logo-link{
        gap:5px !important;
    }


    html body #main-header
    .bft-logo-main{
        font-size:
            clamp(
                .80rem,
                4vw,
                .98rem
            )
            !important;
    }


    html body #main-header
    .bft-logo-sub{
        display:none !important;
    }


    html body #main-header
    .nav-right{
        gap:4px !important;
    }


    html body #main-header
    .nav-right
    > .nav-cta{
        min-height:36px !important;

        padding:
            7px
            8px
            !important;

        font-size:11px !important;
    }


    html body #main-header
    .mobile-lang-toggle{
        width:42px !important;

        height:36px !important;

        padding:
            0
            5px
            !important;

        font-size:11px !important;
    }


    html body #main-header
    #navToggle.nav-toggle{
        width:36px !important;
        height:36px !important;

        flex-basis:36px !important;

        padding:6px !important;
    }


    html body #main-header
    #navToggle.nav-toggle span{
        width:21px !important;
    }


    html body #main-header
    #navLinks.nav-links{
        width:
            min(
                92vw,
                380px
            )
            !important;

        max-width:380px !important;

        padding:
            74px
            22px
            24px
            !important;
    }


    html body #main-header
    #navLinks.nav-links
    > li
    > a{
        padding:
            15px
            2px
            !important;

        font-size:
            clamp(
                19px,
                6vw,
                23px
            )
            !important;
    }
}


/*
 * ------------------------------------------------------------
 * EXTRA SMALL
 * ------------------------------------------------------------
 */

@media (max-width:390px){

    html body #main-header
    .bft-logo-link::before,
    html body #main-header
    .nav-logo.bft-logo-link::before{
        width:29px !important;
        height:29px !important;

        flex-basis:29px !important;
    }


    html body #main-header
    .bft-logo-main{
        font-size:.76rem !important;
    }


    html body #main-header
    .nav-right
    > .nav-cta{
        padding:
            7px
            6px
            !important;

        font-size:10.5px !important;
    }


    html body #main-header
    .mobile-lang-toggle{
        width:40px !important;
    }


    html body #main-header
    #navToggle.nav-toggle{
        width:34px !important;
        height:34px !important;

        flex-basis:34px !important;
    }
}


/* ============================================================
   BFT MOBILE LANGUAGE FLAGS
   2026-09-17
   ============================================================ */

@media (max-width:1099px){

    html body #main-header
    .mobile-lang-dropdown a{

        display:flex !important;

        flex-direction:row !important;

        align-items:center !important;

        justify-content:center !important;

        gap:8px !important;
    }


    html body #main-header
    .mobile-lang-dropdown
    .lang-flag-circle{

        --flag-size:20px !important;

        display:inline-block !important;

        width:var(--flag-size) !important;

        height:var(--flag-size) !important;

        min-width:var(--flag-size) !important;

        flex:
            0
            0
            var(--flag-size)
            !important;

        margin:0 !important;

        border-radius:50% !important;

        overflow:hidden !important;

        vertical-align:middle !important;

        background-size:cover !important;

        background-position:center !important;

        background-repeat:no-repeat !important;
    }


    html body #main-header
    .mobile-lang-dropdown a.active
    .lang-flag-circle{

        box-shadow:
            0
            0
            0
            1px
            rgba(255,255,255,.75)
            !important;
    }
}


@media (max-width:420px){

    html body #main-header
    .mobile-lang-dropdown
    .lang-flag-circle{

        --flag-size:18px !important;
    }
}


/* ============================================================
   BFT MOBILE DRAWER SCROLLED-PAGE FIX
   2026-09-17
   ============================================================ */

@media (max-width:1099px){

    /*
     * backdrop-filter puede crear un containing block para
     * descendientes fixed. Mientras el menú está abierto lo
     * desactivamos para que drawer/backdrop usen el viewport.
     */
    html.bft-menu-open #main-header,
    html.bft-menu-open #main-header.header-solid{
        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }


    html.bft-menu-open,
    html.bft-menu-open body{
        overflow:hidden !important;
        overscroll-behavior:none !important;
    }
}


/* BFT_FLOATING_BOOKING_CSS_START */

/* ============================================================
   FLOATING BOOKING BUTTON
   Solo móvil.
   JS controla cuándo aparece.
   ============================================================ */

.bft-floating-booking{
    display:none;
}


@media (max-width:768px){

    html body .bft-floating-booking{
        position:fixed !important;

        left:50% !important;
        bottom:
            calc(
                14px
                +
                env(safe-area-inset-bottom, 0px)
            )
            !important;

        z-index:3800 !important;

        box-sizing:border-box !important;

        width:
            min(
                calc(100vw - 32px),
                420px
            )
            !important;

        min-height:52px !important;

        margin:0 !important;
        padding:0 20px !important;

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

        gap:9px !important;

        background:
            rgba(4,4,4,.96)
            !important;

        color:#fff !important;

        border:
            1px solid
            rgba(255,255,255,.14)
            !important;

        border-radius:999px !important;

        box-shadow:
            0 10px 32px
            rgba(0,0,0,.28)
            !important;

        backdrop-filter:
            blur(12px)
            saturate(125%)
            !important;

        -webkit-backdrop-filter:
            blur(12px)
            saturate(125%)
            !important;

        font-size:15px !important;
        font-weight:800 !important;

        line-height:1 !important;

        text-align:center !important;
        text-decoration:none !important;

        text-transform:uppercase !important;

        opacity:0 !important;
        visibility:hidden !important;

        pointer-events:none !important;

        transform:
            translate3d(
                -50%,
                18px,
                0
            )
            !important;

        transition:
            opacity .28s ease,
            transform .32s cubic-bezier(.2,.72,.25,1),
            visibility .28s ease
            !important;
    }


    html body
    .bft-floating-booking.is-visible{

        opacity:1 !important;

        visibility:visible !important;

        pointer-events:auto !important;

        transform:
            translate3d(
                -50%,
                0,
                0
            )
            !important;
    }


    .bft-floating-booking__icon{
        display:flex !important;

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

        width:22px !important;
        height:22px !important;

        flex:0 0 22px !important;

        font-size:18px !important;
        font-weight:700 !important;

        line-height:1 !important;

        color:#fff !important;
    }


    .bft-floating-booking__text{
        color:#fff !important;

        font:inherit !important;

        white-space:nowrap !important;
    }


    /* Nunca encima del drawer */
    html.bft-menu-open
    .bft-floating-booking,

    body.bft-menu-open
    .bft-floating-booking,

    body.bft-mobile-menu-open
    .bft-floating-booking{

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

}


@media (max-width:390px){

    html body .bft-floating-booking{
        width:
            calc(100vw - 24px)
            !important;

        min-height:50px !important;

        padding:
            0
            14px
            !important;

        font-size:13px !important;
    }

}

/* BFT_FLOATING_BOOKING_CSS_END */