/* =========================================
   SEDES DE ENTRENAMIENTO
========================================= */

.sedes{

    padding:120px 40px;

    background:#f8fafc;

    display:flex;

    flex-direction:column;

    gap:50px;

    position:relative;
}

/* ========================
   ENCABEZADO
======================== */

.sedes__header{

    text-align:center;

    max-width:900px;

    margin:0 auto;
}

.sedes__header .elementor-heading-title:first-child{

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;
}

.sedes__header .elementor-heading-title:last-child{

    color:var(--secondary);

    font-size:clamp(2.5rem,5vw,4rem);

    line-height:.95;
}

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

.sedes__card{

    max-width:1200px;

    width:100%;

    margin:0 auto;

    background:#fff;

    border-radius:30px;

    overflow:hidden;

    display:flex;

    min-height:500px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.08);

    transition:.35s ease;
}

.sedes__card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 30px 60px rgba(0,0,0,.12);
}

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

.sedes__info{

    width:45%;

    padding:60px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:25px;

    position:relative;
}

.sedes__info::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:6px;

    height:100%;

    background:linear-gradient(
        to bottom,
        var(--primary),
        #f7b500
    );
}

.sedes__info h3{

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;
}

.sedes__info h2{

    color:var(--secondary);

    font-size:clamp(2rem,4vw,3rem);

    line-height:1;

    margin:0;
}

.sedes__info p{

    font-size:1.1rem;

    line-height:1.8;

    color:#4a5568;
}

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

.sedes__mapa{
    width:55%;
    position:relative;
    overflow:hidden;
    min-height:400px; 
    height:100%;
}

.sedes__mapa iframe{
    width:100%;
    height:100% !important;
    min-height:400px;
    display:block;
    border:0;
}

.sedes__card:hover .sedes__mapa iframe{

    transform:scale(1.03);
}

/* ========================
   EFECTO DECORATIVO
======================== */

.sedes__card::after{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:rgba(245,166,35,.08);

    border-radius:50%;

    top:-80px;

    right:-80px;

    pointer-events:none;
}

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

@media (max-width:992px){

    .sedes__card{

        flex-direction:column;
    }

    .sedes__info,
    .sedes__mapa{

        width:100%;
    }

    .sedes__mapa{

        min-height:500px;
    }
}

@media (max-width:768px){

    .sedes{

        padding:80px 20px;
    }

    .sedes__info{

        padding:40px 30px;
    }

    .sedes__info h2{

        font-size:2rem;
    }

    .sedes__mapa{

        min-height:500px;
    }
}