/* =====================================================
   TEAM POPUP
===================================================== */

.team-popup{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.team-popup.active{
    display:flex;
}


/*=========================================
ANIMACIÓN
=========================================*/

.team-popup{

    opacity:0;
    visibility:hidden;

    transition:opacity .30s ease;

}

.team-popup.active{

    opacity:1;
    visibility:visible;

}

.team-popup-window{

    transform:translateY(30px) scale(.98);

    opacity:0;

    transition:
        transform .35s ease,
        opacity .35s ease;

}

.team-popup.active .team-popup-window{

    transform:translateY(0) scale(1);

    opacity:1;

}


/* ==========================================
   Overlay
========================================== */

.team-popup-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(5px);
}

/* ==========================================
   Ventana
========================================== */

.team-popup-window{

    position:relative;
    z-index:2;

    width:min(1180px,90vw);
    max-height:90vh;

    background:#fff;

    border-radius:8px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

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

}

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

.team-popup-header{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:50px;

    padding:50px;

    border-bottom:1px solid #ececec;

    flex-shrink:0;

}

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

.team-popup-photo{

    width:280px;
    height:320px;

    overflow:hidden;

    background:#eee;

}

.team-popup-photo img{

    width:100%;
    height:100%;

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

    display:block;

}

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

.team-popup-content{

    display:flex;
    flex-direction:column;
    justify-content:center;

}

/* Cargo */

.team-popup-cargo{

    color:#b29758;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:14px;

    font-weight:600;

    margin-bottom:12px;

}

/* Nombre */

.team-popup-name{

    color:#002855;

    font-size:42px;

    line-height:1.1;

    margin:0 0 22px;

}

/* Extracto */

.team-popup-extracto{

    font-size:22px;

    line-height:1.55;

    color:#333;

    font-weight:500;

    margin-bottom:30px;

}

/* Contacto */

.team-popup-contact{

    display:flex;

    gap:30px;

    margin-top:auto;

}

.team-popup-contact a{

    color:#002855;

    text-decoration:none;

    font-weight:600;
    
    transition:.25s;

}

.team-popup-contact a:hover{

    color:#b29758;

}

/* ==========================================
   BODY
========================================== */

.team-popup-body{

    overflow-y:auto;

    padding:45px 50px;

    flex:1;

}

.team-popup-bio{

    font-size:18px;

    line-height:1.85;

    color:#555;

}

.team-popup-bio p{

    margin:0 0 22px;

}

/* ==========================================
   BOTÓN CERRAR
========================================== */

.team-popup-close{

    position:absolute;

    top:22px;
    right:28px;

    width:42px;
    height:42px;

    border:none;

    background:none;

    cursor:pointer;

    color:#002855;

    font-size:40px;

    line-height:1;

    z-index:30;

}

.team-popup-close:hover{

    color:#b29758;

}

/* ==========================================
   SCROLL
========================================== */

.team-popup-body::-webkit-scrollbar{

    width:8px;

}

.team-popup-body::-webkit-scrollbar-thumb{

    background:#b29758;

    border-radius:20px;

}

.team-popup-body::-webkit-scrollbar-track{

    background:#f5f5f5;

}

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

@media (max-width:991px){

    .team-popup-window{

        width:94vw;
        max-height:94vh;

    }

    .team-popup-header{

        grid-template-columns:220px 1fr;

        gap:35px;

        padding:35px;

    }

    .team-popup-photo{

        width:220px;
        height:280px;

    }

    .team-popup-name{

        font-size:36px;

    }

    .team-popup-extracto{

        font-size:18px;

    }

    .team-popup-body{

        padding:35px;

    }

}

/* ==========================================
   MÓVIL
========================================== */

@media (max-width:767px){

    .team-popup-window{

        width:96vw;
        height:96vh;

    }

    .team-popup-header{

        display:block;

        padding:25px;

    }

    .team-popup-photo{

        width:100%;
        height:340px;

        margin-bottom:25px;

    }

    .team-popup-name{

        font-size:30px;

    }

    .team-popup-extracto{

        font-size:17px;

        margin-bottom:25px;

    }

    .team-popup-contact{

        flex-wrap:wrap;

        gap:18px;

        margin-top:25px;

    }

    .team-popup-body{

        padding:25px;

    }

}