/* ========================================
PLANOS PAGE
======================================== */

#planos-page{

    width:100%;

    background:#f5f7f6;

    overflow:hidden;
}

/* ========================================
HERO PLANOS
======================================== */

.hero-planos{

    position:relative;

    width:100%;

    min-height:75vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:
    140px
    0
    100px;

    background:
    url('../img/portada-plano.jpg')
    center/cover
    no-repeat;
}

/* ========================================
OVERLAY
======================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.15) 100%
    );

    z-index:1;
}

/* ========================================
HERO CONTENT
======================================== */

.hero-planos-content{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1300px;

    padding:0 7%;

    text-align:left;
}

/* ========================================
TITLE
======================================== */

.hero-planos-title{

    color:#fff;

    font-size:72px;

    line-height:.95;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:-2px;

    max-width:950px;

    margin-bottom:25px;
}

/* ========================================
TEXT
======================================== */

.hero-planos-text{

    color:#fff;

    font-size:20px;

    line-height:1.8;

    max-width:520px;

    opacity:.92;
}
/* ========================================
LEYENDA
======================================== */

.mapa-leyenda{

    display:flex;

    flex-direction:column;

    gap:14px;

    margin-bottom:40px;
}

/* ITEM */

.leyenda-item{

    display:flex;

    align-items:center;

    gap:12px;
}

/* COLOR */

.leyenda-item .color{

    width:18px;

    height:18px;

    border-radius:4px;
}

/* TEXT */

.leyenda-item p{

    margin:0;

    font-size:15px;

    font-weight:700;

    color:#333;
}

/* COLORES */

.color.aporte{

    background:#2eb24d;
}

.color.separado{

    background:#f0a320;
}

.color.vendido{

    background:#ff1a1a;
}

.color.disponible{

    background:#d9d9d9;
}


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

.mapa-section{

    width:100%;

    display:grid;

    grid-template-columns:
    380px
    1fr;

    gap:60px;

    padding:
    110px
    7%;

    align-items:start;
}

/* ========================================
LEFT
======================================== */

.mapa-left{

    position:sticky;

    top:120px;
}

/* TAG */

.mapa-left span{

    display:inline-block;

    color:#187a43;

    font-size:14px;

    font-weight:800;

    letter-spacing:4px;

    margin-bottom:20px;
}

/* TITLE */

.mapa-left h2{

    font-size:58px;

    line-height:1;

    color:#111;

    font-weight:900;

    margin-bottom:25px;
}

/* TEXT */

.mapa-left p{

    font-size:19px;

    line-height:1.8;

    color:#666;

    margin-bottom:40px;
}

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

.mapa-botones{

    display:flex;

    flex-direction:column;

    gap:18px;
}

/* BUTTON */

.mapa-botones button{

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    background:#fff;

    color:#111;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.3s ease;

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

/* HOVER */

.mapa-botones button:hover{

    background:#187a43;

    color:#fff;

    transform:translateY(-3px);
}

/* ACTIVE */

.mapa-botones button.active{

    background:#187a43;

    color:#fff;
}

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

.mapa-container{

    width:100%;

    background:#fff;

    border-radius:28px;

    padding:25px;

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

    overflow:hidden;
}

/* ========================================
MAPA
======================================== */

#mapa-dinamico{

    width:100%;

    min-height:850px;

    border-radius:20px;

    overflow:hidden;

    background:#f9f9f9;
}

/* SVG */

#mapa-dinamico svg{

    width:100% !important;

    height:100% !important;

    object-fit:contain;
}

/* ========================================
TOOLTIP
======================================== */

.tooltip{

    position:fixed;

    background:#111;

    color:#fff;

    padding:
    14px
    18px;

    border-radius:14px;

    font-size:14px;

    font-weight:600;

    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.2s ease;

    pointer-events:none;

    z-index:9999;

    box-shadow:
    0 10px 30px rgba(0,0,0,.25);
}

/* ACTIVE */

.tooltip.active{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}

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

@media(max-width:1100px){

.hero-planos{

    min-height:65vh;
}

.hero-planos-title{

    font-size:54px;

    max-width:700px;
}

.hero-planos-text{

    font-size:18px;
}

.mapa-section{

    grid-template-columns:1fr;

    gap:50px;
}

.mapa-left{

    position:relative;

    top:auto;
}

.mapa-left h2{

    font-size:44px;
}

.mapa-left p{

    max-width:700px;
}

.mapa-container{

    padding:18px;
}

#mapa-dinamico{

    aspect-ratio:16/11;
}

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

@media(max-width:768px){

.hero-planos{

    min-height:auto;

    padding:
    130px
    0
    80px;
}

.hero-planos-content{

    padding:0 24px;
}

.hero-planos-title{

    font-size:38px;

    line-height:1.05;

    letter-spacing:-1px;

    margin-bottom:18px;
}

.hero-planos-text{

    font-size:16px;

    line-height:1.7;

    max-width:320px;
}

.mapa-section{

    padding:
    70px
    20px;
}

.mapa-left h2{

    font-size:38px;
}

.mapa-left p{

    font-size:17px;
}

.mapa-botones button{

    height:56px;

    border-radius:14px;

    font-size:15px;
}

.mapa-container{

    padding:15px;

    border-radius:20px;
}

#mapa-dinamico{

    min-height:420px;
}

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

@media(max-width:1400px){

.hero-planos-title{

    font-size:62px;
}

.mapa-section{

    grid-template-columns:
    340px
    1fr;

    gap:40px;
}

.mapa-left h2{

    font-size:50px;
}

#mapa-dinamico{

    aspect-ratio:15/10;
}

}