/*=========================================================
=
=             AREAS PREMIUM 2.0
=
=========================================================*/

.areas-section{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
    background:#000;
}

/*=========================================================
=              BACKGROUND
=========================================================*/

.areas-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

#areaTitle{
    white-space: pre-line;
}

.areas-bg img{

    width:100%;
    height:100%;

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

    transform:scale(1);

    transition:
        opacity .8s ease,
        transform 1.4s ease;

    will-change:transform;
}

.areas-bg img.change{

    transform:scale(1.05);

}

.areas-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.28),
            rgba(0,0,0,.12) 35%,
            rgba(0,0,0,.08) 70%,
            rgba(0,0,0,.18)
        );

}

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

.areas-content{

    position:relative;

    z-index:10;

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;

    padding:55px 70px;

    box-sizing:border-box;

}

/*=========================================================
=              SWITCH
=========================================================*/

.areas-top{

    display:flex;
    justify-content:center;

}

.areas-switch{

    position:relative;

}

.switch-track{

    position:relative;

    display:flex;

    padding:6px;

    border-radius:60px;

    background:rgba(18,18,18,.18);

    backdrop-filter:blur(18px);

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

}

.switch-track{
    margin-top:80px;
}

.switch-btn{

    position:relative;
    z-index:5;

    width:190px;
    height:56px;

    border:none;

    background:none;

    color:#2d2926 !important;

    cursor:pointer;

    font-size:15px;

    font-weight:600;

    letter-spacing:1px;

    transition:.35s;

}

.switch-btn.active{

    color:#fff;

}

.switch-thumb{

    position:absolute;

    top:6px;
    left:6px;

    width:190px;
    height:56px;

    overflow:hidden;

    border-radius:40px;

    background: linear-gradient(135deg, #b3c76a, #7b9918, #627F0B) !important;
	
    box-shadow: 0 18px 40px rgba(0, 0, 0, .20), inset 0 1px 0 rgba(255, 255, 255, .20);

    transition:
        transform .45s cubic-bezier(.22,1,.36,1),
        width .35s ease;

}

.switch-thumb::before{

    content:"";

    position:absolute;

    top:-40%;
    left:-60%;

    width:40%;
    height:180%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:rotate(22deg);

    animation:switchShine 3s linear infinite;

}

@keyframes switchShine{

    0%{

        left:-60%;

    }

    100%{

        left:130%;

    }

}


/*=========================================================
=             INFORMACIÓN
=========================================================*/

.areas-info{

    margin-top:110px;

    width:520px;

    color:#fff;

}

.areas-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:40px;

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

    backdrop-filter:blur(10px);

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

    color:#E9D9AE;

    letter-spacing:3px;

    font-size:11px;

}

.areas-info h2{

    margin-top:22px;

    font-size:78px;

    font-family:'Cormorant Garamond',serif;

    font-weight:500;

    line-height:.95;
	
	color:#fff;

}

.areas-info p{

    margin-top:22px;

    width:480px;

    font-size:18px;

    line-height:33px;

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

}

.areas-spacer{

    flex:1;

}

/*=========================================================
=
=          FLOATING GALLERY BAR
=
=========================================================*/

.areas-gallery-bar{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-bottom:38px;

    z-index:30;

}

/*=========================================================
=             FLECHAS
=========================================================*/

.gallery-arrow{

    width:52px;
    height:52px;

    border-radius:50%;

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

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

    backdrop-filter:blur(18px);

    color:#FFF;

    cursor:pointer;

    transition:.35s;

}

.gallery-arrow:hover{

    transform:translateY(-4px);

    background:

        linear-gradient(
            135deg,
            #b4cb3a,
            #7f9900
        );

    border-color:transparent;

    box-shadow:

        0 0 15px rgba(172,214,25,.40),

        0 0 45px rgba(172,214,25,.20);

}

/*=========================================================
=            THUMBNAILS
=========================================================*/

.areas-thumbs{

    display:flex;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.areas-thumbs::-webkit-scrollbar{

    display:none;

}

/*=========================================================
=              CARD
=========================================================*/

/*=========================================================
=              CARD
=========================================================*/

.thumb{

    flex:0 0 145px;

    padding:8px;

    border-radius:22px;

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

    backdrop-filter:blur(14px);

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

    cursor:pointer;

    opacity:.75;

    transition:all .35s ease;

}

.thumb:hover{

    opacity:1;

    transform:translateY(-8px);

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

}

.thumb.active{

    position:relative;

    overflow:hidden;

    opacity:1;

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

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

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

}

.thumb.active::before{

    content:"";

    position:absolute;

    top:-40%;
    left:-60%;

    width:35%;
    height:180%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.55),
        transparent
    );

    transform:rotate(22deg);

    animation:thumbShine 2.8s linear infinite;

    pointer-events:none;

    z-index:5;

}

@keyframes thumbShine{

    0%{
        left:-60%;
    }

    100%{
        left:140%;
    }

}

/*=========================================================
=              FOTO
=========================================================*/


.thumb-image{

    width:100%;
    height:92px;

    border-radius:15px;

    overflow:hidden;

}

.thumb.active .thumb-image::after{

    content:"ACTUAL";

    position:absolute;

    top:10px;

    left:10px;

    padding:5px 10px;

    border-radius:20px;

    background:#627F0B;

    color:#fff;

    font-size:10px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}

.thumb-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;

}

.thumb:hover img{

    transform:scale(1.08);

}

/*=========================================================
=           ACTIVA
=========================================================*/

.thumb.active .thumb-image{

    border-color:#b4cb3a;

    box-shadow:

        0 0 12px rgba(180,203,58,.50),

        0 0 28px rgba(180,203,58,.25);

}

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

.thumb-info{

    display:none;

}

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

@media (max-width:1200px){

    .areas-content{
        padding:45px;
    }

    .areas-info{
        width:460px;
        margin-top:90px;
    }

    .areas-info h2{
        font-size:64px;
    }

    .areas-info p{
        width:420px;
        font-size:17px;
        line-height:30px;
    }

}


/*=========================================================
=
=            TABLET
=
=========================================================*/

@media (max-width:992px){

    .areas-content{
        padding:35px 30px;
    }

    .areas-info{
        width:100%;
        max-width:520px;
        margin-top:20px;
    }

    .areas-info h2{
        font-size:54px;
    }

    .areas-info p{
        width:100%;
        font-size:16px;
        line-height:28px;
    }

    .switch-btn{
        width:165px;
        height:50px;
        font-size:14px;
    }

    .switch-thumb{
        width:165px;
        height:50px;
    }

    .thumb{
        flex:0 0 120px;
    }

    .thumb-image{
        width:120px;
        height:78px;
    }

    .gallery-arrow{
        width:44px;
        height:44px;
    }

}

@media (max-width:768px){

    .areas-section{
        height:auto;
        min-height:100svh;
        padding:20px 15px;
        background:#fff;
        display:flex;
        flex-direction:column;
    }

    /* Switch */
    .areas-top{
        order:1;
        margin-bottom:20px;
    }

    /* Imagen principal */
    .areas-bg{
        order:2;
        position:relative;
        width:100%;
        height:300px;
        border-radius:18px;
        overflow:hidden;
    }

    .areas-content{
        order:3;
        padding:20px 0 0;
        background:none;
    }

    .areas-info{
        text-align:center;
        margin-bottom:20px;
    }

    .areas-info h2{
        font-size:42px;
        color:#111;
        margin:10px 0 5px;
    }

    .areas-tag{
        font-size:13px;
        letter-spacing:.25em;
    }

    /* ---------- CAROUSEL ---------- */

    .areas-gallery-bar{
        width:100%;
        margin-top:10px;
    }

    .areas-thumbs{

        display:flex;
        gap:12px;

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

        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;

        padding-bottom:8px;

    }

    .areas-thumbs::-webkit-scrollbar{
        display:none;
    }

    .thumb{

        flex:0 0 95px;
        width:95px;
        height:95px;

        scroll-snap-align:center;

        border-radius:12px;

        transition:.3s;

        opacity:.65;

    }

    .thumb.active{

        opacity:1;
        border:3px solid #b4cb3a;
        transform:scale(1.04);

    }

    .thumb-image,
    .thumb-image img{

        width:100%;
        height:100%;
        border-radius:12px;
        object-fit:cover;

    }

    /* Ocultamos flechas */
    .gallery-arrow{
        display:none;
    }
	
	.areas-spacer{
		display:none;
	}


}

/*=========================================================
=            LAPTOPS 1366x768 / 1440x900
=========================================================*/

@media (min-width:1201px) and (max-width:1440px){

    .areas-section{

        padding:15px 0;
        min-height:auto;
        overflow:hidden;

    }

    .areas-content{

        position:relative;

        max-width:1366px;

        left:50%;

        transform: translate(-50%, 40px) scale(.75);
        transform-origin:top center;

        width:100%;

    }
	
	.areas-switch{
		top:-180px !important;
	}
	
	.areas-content, .areas-bottom-wrapper{
		top:140px !important;
	}

}