/* =====================================================
   ZONES SECTION
   MADRID CENTRO - CRYSTAL GLASS
===================================================== */


/* =========================
   SECTION
========================= */


.zones-section{

    position:relative;

    padding:

    100px 20px;

    overflow:hidden;

    background:

    radial-gradient(
        circle at top,
        #16294b,
        #060b16 70%
    );

    isolation:isolate;

}




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


.zones-bg{

    position:absolute;

    inset:0;

    z-index:-3;


    background-image:

    linear-gradient(
        rgba(5,10,20,.85),
        rgba(5,10,20,.95)
    ),

    url("madrid-map-bg.jpg");


    background-size:cover;

    background-position:center;


    opacity:.8;

}





.zones-bg::after{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at center,
        rgba(70,170,255,.20),
        transparent 45%
    );

}





.zones-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    z-index:-2;

    opacity:.35;

}




.zones-orb-1{

    width:320px;

    height:320px;

    background:#268cff;

    top:10%;

    left:-120px;

    animation:

    zoneFloat 12s infinite alternate;

}



.zones-orb-2{

    width:260px;

    height:260px;

    background:#70dfff;

    bottom:5%;

    right:-100px;

    animation:

    zoneFloat 15s infinite alternate-reverse;

}




/* =========================
   CONTAINER
========================= */


.zones-container{

    width:100%;

    max-width:1200px;

    margin:auto;

}





/* =========================
   HEADER
========================= */


.zones-header{

    text-align:center;

    max-width:800px;

    margin:

    0 auto 50px;

}



.zones-header .hero-badge{

    margin-bottom:20px;

}



.zones-header h2{

    font-size:

    clamp(
        2rem,
        7vw,
        3.8rem
    );

    line-height:1.1;

    letter-spacing:-1px;

    margin-bottom:20px;

    font-weight:800;

}



.zones-header h2 span{

    display:block;


    background:

    linear-gradient(

        90deg,

        #fff,

        #68c8ff,

        #fff

    );


    background-size:200%;


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


    animation:

    shimmer 6s infinite linear;

}




.zones-header p{

    color:

    rgba(255,255,255,.75);

    line-height:1.8;

}





/* =========================
   GRID
========================= */


.zones-grid{

    display:grid;

    grid-template-columns:

    1fr;

    gap:18px;

}





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


.zone-card{

    position:relative;

    display:flex;

    align-items:center;

    gap:18px;


    padding:22px;


    border-radius:26px;


    background:

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


    border:

    1px solid

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


    backdrop-filter:

    blur(25px);


    box-shadow:

    0 20px 60px

    rgba(0,0,0,.25);


    overflow:hidden;


    transition:

    .45s cubic-bezier(.2,.8,.2,1);


}





.zone-card::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    linear-gradient(

    120deg,

    transparent,

    rgba(255,255,255,.18),

    transparent

    );


    transform:

    translateX(-120%);


    transition:.8s;

}





.zone-card:hover::before{

    transform:

    translateX(120%);

}




.zone-card:hover{


    transform:

    translateY(-8px)

    scale(1.02);


    border-color:

    rgba(100,200,255,.45);


    box-shadow:


    0 35px 80px

    rgba(0,130,255,.25);

}




/* =========================
   ICON
========================= */


.zone-icon{


    width:58px;

    height:58px;


    flex-shrink:0;


    display:grid;

    place-items:center;


    border-radius:20px;


    font-size:28px;


    background:

    linear-gradient(

        145deg,

        rgba(255,255,255,.22),

        rgba(255,255,255,.05)

    );


    border:

    1px solid

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


    box-shadow:


    inset 0 0 20px

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

}




.zone-card h3{

    margin:0 0 6px;


    font-size:

    1.05rem;


}



.zone-card p{

    margin:0;


    color:

    rgba(255,255,255,.68);


    font-size:.85rem;


    line-height:1.5;

}




/* =========================
   STATUS
========================= */


.zone-status{


    position:absolute;


    top:15px;

    right:15px;


    padding:

    5px 10px;


    border-radius:30px;


    font-size:.65rem;


    color:#61ffad;


    background:

    rgba(0,255,140,.10);


    border:

    1px solid

    rgba(0,255,140,.20);

}





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


.zones-cta{


    margin-top:50px;


    padding:28px;


    display:flex;

    flex-direction:column;

    gap:25px;


    border-radius:30px;


    background:

    rgba(255,255,255,.09);


    border:

    1px solid

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


    backdrop-filter:

    blur(30px);


    box-shadow:


    0 30px 80px

    rgba(0,0,0,.25);


}



.zones-cta h3{

    font-size:1.5rem;

    margin-bottom:10px;

}



.zones-cta p{

    color:

    rgba(255,255,255,.75);

}





.zones-cta .btn{

    width:100%;

}




/* =========================
   REVEAL
========================= */


.reveal{


    opacity:0;


    transform:

    translateY(50px);


    transition:

    1s cubic-bezier(.2,.8,.2,1);


}



.reveal.active{


    opacity:1;


    transform:none;


}



/* =========================
   ANIMATIONS
========================= */


@keyframes zoneFloat{


    from{

        transform:

        translateY(0);

    }


    to{

        transform:

        translateY(-60px);

    }


}



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


@media(min-width:700px){


.zones-section{


    padding:

    130px 40px;


}



.zones-grid{


    grid-template-columns:

    repeat(2,1fr);


}



.zones-cta{


    flex-direction:row;


    justify-content:space-between;


    align-items:center;


}



.zones-cta .btn{


    width:auto;


}



}



/* =========================
   DESKTOP
========================= */


@media(min-width:1100px){


.zones-grid{


    grid-template-columns:

    repeat(3,1fr);


}



.zone-card{


    min-height:170px;


    flex-direction:column;


    align-items:flex-start;


}



.zone-status{


    top:20px;


    right:20px;


}



}


.zone-card.touch-active{

transform:
scale(.97);

background:

rgba(255,255,255,.14);

}