/* =========================================================
   SEDES / COMO LLEGAR
========================================================= */


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

.sedes-hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(90px);

    pointer-events: none;
}

.sedes-hero-glow-one {
    width: 520px;
    height: 520px;

    top: -300px;
    right: -90px;

    background: rgba(80, 183, 255, .16);
}

.sedes-hero-glow-two {
    width: 430px;
    height: 430px;

    left: -160px;
    bottom: -270px;

    background: rgba(234, 179, 8, .12);
}


/* =========================================================
   SELECTOR
========================================================= */

.sedes-selector-panel {
    padding: .8rem;

    border: 1px solid rgba(234, 179, 8, .55);
    border-radius: 24px;

    background: #EAB308;

    box-shadow:
        0 20px 50px rgba(15, 55, 85, .14);
}

.sedes-selector {
    display: flex;

    gap: .65rem;

    overflow-x: auto;

    scrollbar-width: none;
}

.sedes-selector::-webkit-scrollbar {
    display: none;
}

.sede-selector-button {
    min-width: max-content;

    padding: .9rem 1.2rem;

    border-radius: 16px;

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

    color: #0c4375;

    font-size: .85rem;
    font-weight: 800;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

.sede-selector-button:hover {
    transform: translateY(-2px);

    background: #ffffff;
}

.sede-selector-button.is-active {
    background: #0c4375;

    color: #ffffff;

    box-shadow:
        0 8px 20px rgba(12, 67, 117, .22);
}


/* =========================================================
   LOADER
========================================================= */

.sedes-loader-wrap {
    min-height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/*
|--------------------------------------------------------------------------
| IMPORTANTE
|--------------------------------------------------------------------------
| Cuando JavaScript agrega la clase hidden,
| este bloque fuerza correctamente el display none.
|--------------------------------------------------------------------------
*/

.sedes-loader-wrap.hidden {
    display: none !important;
}


.sedes-loader {
    width: 46px;
    height: 46px;

    border: 4px solid #d6e5ef;
    border-top-color: #0c4375;

    border-radius: 50%;

    animation:
        sedesSpin .7s linear infinite;
}

@keyframes sedesSpin {

    to {
        transform: rotate(360deg);
    }

}


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

.sede-info-card {
    min-height: 100%;

    padding: 2rem;

    display: flex;
    flex-direction: column;

    gap: 1.4rem;

    border: 1px solid #dce8ef;
    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 24px 60px rgba(15, 55, 85, .09);
}

.sede-principal-badge {
    width: max-content;

    padding: .42rem .72rem;

    border-radius: 999px;

    background: #EAB308;

    color: #082f51;

    font-size: .72rem;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .06em;
}

.sede-city {
    margin-top: .8rem;

    color: #195fa8;

    font-size: .8rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.sede-title {
    margin-top: .45rem;

    color: #102f49;

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

    line-height: 1.05;

    font-weight: 900;

    letter-spacing: -.035em;
}

.sede-description {
    margin-top: .9rem;

    color: #687f91;

    line-height: 1.75;
}


/* =========================================================
   DATOS
========================================================= */

.sede-info-block {
    display: grid;

    grid-template-columns: 46px 1fr;

    gap: .9rem;

    align-items: center;

    padding: 1rem;

    border: 1px solid #e3edf3;
    border-radius: 18px;

    background: #f8fbfd;
}

.sede-info-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #eaf4fb;

    color: #195fa8;
}

.sede-label {
    color: #7890a1;

    font-size: .7rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.sede-value {
    margin-top: .2rem;

    color: #183d5b;

    font-size: .9rem;
    font-weight: 700;
}


/* =========================================================
   SERVICIOS
========================================================= */

.sede-services {
    padding: 1.2rem;

    border: 1px solid #e3edf3;
    border-radius: 20px;

    background: #ffffff;
}

.sede-services-title {
    margin-top: .2rem;

    color: #153b59;

    font-size: 1rem;
    font-weight: 900;
}

.sede-services-icon {
    width: 44px;
    height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #fff5bf;

    color: #8a6800;
}

.sede-services-list {
    margin-top: 1rem;

    display: grid;

    gap: .7rem;
}

.sede-service-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: .8rem;

    align-items: center;

    padding: .85rem 0;

    border-bottom: 1px solid #edf2f6;
}

.sede-service-row:last-child {
    border-bottom: 0;
}

.sede-service-name {
    color: #163d5d;

    font-size: .88rem;
    font-weight: 800;
}

.sede-service-day {
    margin-top: .2rem;

    color: #7b91a1;

    font-size: .78rem;
}

.sede-service-time {
    padding: .45rem .75rem;

    border-radius: 999px;

    background: #EAB308;

    color: #0b3558;

    font-size: .75rem;
    font-weight: 900;
}

.sede-no-services {
    margin-top: 1rem;

    color: #8296a5;

    font-size: .85rem;
}


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

.sede-actions {
    margin-top: auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: .8rem;
}

.sede-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: .6rem;

    padding: .8rem 1rem;

    border-radius: 16px;

    font-size: .84rem;
    font-weight: 900;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.sede-btn:hover {
    transform: translateY(-2px);
}

.sede-btn-google {
    background: #0c4375;

    color: #ffffff;

    box-shadow:
        0 10px 24px rgba(12, 67, 117, .18);
}

.sede-btn-google:hover {
    background: #08375f;
}

.sede-btn-waze {
    background: #EAB308;

    color: #0b3558;

    box-shadow:
        0 10px 24px rgba(234, 179, 8, .20);
}

.sede-btn-waze:hover {
    background: #d9a607;
}


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

.sede-map-card {
    min-height: 650px;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 30px;

    background: #071f36;

    box-shadow:
        0 30px 70px rgba(7, 31, 54, .22);
}

.sede-map-top {
    padding: 1.2rem 1.35rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    background: #071f36;
}

.sede-map-kicker {
    color: #EAB308;

    font-size: .7rem;
    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .1em;
}

.sede-map-title {
    margin-top: .2rem;

    color: #ffffff;

    font-size: .95rem;
    font-weight: 800;
}

.sede-map-status {
    display: flex;
    align-items: center;

    gap: .45rem;

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

    font-size: .72rem;
}

.sede-map-status span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #EAB308;

    box-shadow:
        0 0 0 5px rgba(234, 179, 8, .12);
}

.sede-map-frame {
    flex: 1;

    min-height: 560px;

    background: #dce6eb;
}

.sede-map-frame iframe {
    width: 100%;
    height: 100%;

    min-height: 560px;

    display: block;

    border: 0;
}


/* =========================================================
   MAPA VACÍO
========================================================= */

.sede-map-empty {
    flex: 1;

    min-height: 550px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 2rem;

    text-align: center;

    color: #ffffff;
}

.sede-map-empty.hidden {
    display: none !important;
}

.sede-map-empty-icon {
    width: 72px;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 1rem;

    border-radius: 22px;

    background: rgba(234, 179, 8, .14);

    color: #EAB308;
}

.sede-map-empty h3 {
    font-size: 1.1rem;
    font-weight: 900;
}

.sede-map-empty p {
    margin-top: .45rem;

    max-width: 320px;

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

    font-size: .86rem;
}


/* =========================================================
   SIN SEDES
========================================================= */

.sede-empty {
    padding: 4rem 2rem;

    text-align: center;

    border: 1px dashed #cfdde6;
    border-radius: 28px;

    background: #ffffff;
}

.sede-empty.hidden {
    display: none !important;
}

.sede-empty h3 {
    color: #153b59;

    font-size: 1.2rem;
    font-weight: 900;
}

.sede-empty p {
    margin-top: .5rem;

    color: #7e93a2;
}


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

@media (max-width: 1023px) {

    .sede-map-card {
        min-height: 540px;
    }

    .sede-map-frame,
    .sede-map-frame iframe {
        min-height: 470px;
    }

}


@media (max-width: 767px) {

    .sedes-selector-panel {
        padding: .65rem;

        border-radius: 20px;
    }

    .sede-selector-button {
        padding: .8rem 1rem;
    }

    .sede-info-card {
        padding: 1.3rem;

        border-radius: 24px;
    }

    .sede-actions {
        grid-template-columns: 1fr;
    }

    .sede-map-card {
        min-height: 460px;

        border-radius: 24px;
    }

    .sede-map-top {
        align-items: flex-start;

        flex-direction: column;
    }

    .sede-map-frame,
    .sede-map-frame iframe {
        min-height: 390px;
    }

    .sede-map-empty {
        min-height: 390px;
    }

}