/* ==========================================================================
   GLOBAL CARGO
   NUESTRA RED INTERACTIVA
   LEAFLET + OPENSTREETMAP
   PREFIJO: gcm-
   ========================================================================== */


/* ==========================================================================
   VARIABLES
   ========================================================================== */

.gcm-network {

    --gcm-orange: #f15a24;
    --gcm-orange-dark: #d74614;
    --gcm-orange-light: #ff7541;

    --gcm-navy: #071d38;
    --gcm-navy-2: #0b2949;

    --gcm-white: #ffffff;

    --gcm-bg: #f7f7f7;

    --gcm-text: #111b29;
    --gcm-muted: #737b85;

    --gcm-border: #e3e6e8;

    --gcm-font:
        "Aptos",
        "Segoe UI",
        "Helvetica Neue",
        Arial,
        sans-serif;

}


/* ==========================================================================
   RESET LOCAL
   ========================================================================== */

.gcm-network,
.gcm-network * {

    box-sizing: border-box;

}


.gcm-network {

    position: relative;

    width: 100%;

    padding: 76px 0 86px;

    overflow: hidden;

    font-family: var(--gcm-font);

    background:

        radial-gradient(
            circle at 95% 5%,
            rgba(241,90,36,.07),
            transparent 25%
        ),

        #f7f7f7;

}


.gcm-container {

    width:
        min(
            1280px,
            calc(100% - 48px)
        );

    margin: 0 auto;

}


/* ==========================================================================
   HEADING
   ========================================================================== */

.gcm-heading {

    margin-bottom: 30px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 40px;

}


.gcm-heading__main {

    max-width: 720px;

}


.gcm-eyebrow {

    display: block;

    margin-bottom: 8px;

    color: var(--gcm-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: .14em;

    text-transform: uppercase;

}


.gcm-heading h2 {

    margin: 0;

    color: var(--gcm-navy);

    font-size:
        clamp(
            36px,
            4vw,
            53px
        );

    font-weight: 760;

    line-height: .98;

    letter-spacing: -.045em;

}


.gcm-heading h2 span {

    display: block;

    color: var(--gcm-orange);

}


.gcm-heading__text {

    max-width: 345px;

    margin: 0;

    color: var(--gcm-muted);

    font-size: 13px;

    line-height: 1.6;

}


/* ==========================================================================
   TABS
   ========================================================================== */

.gcm-tabs {

    position: relative;

    z-index: 20;

    width: fit-content;

    max-width: 100%;

    margin-bottom: 20px;

    padding: 6px;

    display: flex;

    gap: 4px;

    overflow-x: auto;

    border:
        1px solid var(--gcm-border);

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 9px 25px
        rgba(7,29,56,.045);

    scrollbar-width: none;

}


.gcm-tabs::-webkit-scrollbar {

    display: none;

}


.gcm-tab {

    position: relative;

    min-height: 48px;

    padding: 0 17px;

    flex: 0 0 auto;

    border: 0;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #66717e;

    background: transparent;

    font-family: var(--gcm-font);

    font-size: 10px;

    font-weight: 720;

    cursor: pointer;

    touch-action: manipulation;

    transition:
        color .25s ease,
        background .25s ease,
        box-shadow .25s ease;

}


.gcm-tab * {

    pointer-events: none;

}


.gcm-tab__icon {

    width: 27px;

    height: 27px;

    display: grid;

    place-items: center;

}


.gcm-tab__icon svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.gcm-tab.is-active {

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            var(--gcm-orange-light),
            var(--gcm-orange-dark)
        );

    box-shadow:
        0 9px 21px
        rgba(241,90,36,.19);

}


/* ==========================================================================
   INTERFAZ
   ========================================================================== */

.gcm-interface {

    position: relative;

    width: 100%;

    min-width: 0;

    display: grid;

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

    overflow: hidden;

    border:
        1px solid var(--gcm-border);

    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 23px 60px
        rgba(7,29,56,.08);

}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.gcm-sidebar {

    position: relative;

    z-index: 5;

    min-width: 0;

    padding: 27px;

    border-right:
        1px solid var(--gcm-border);

    background: #ffffff;

}


.gcm-sidebar__header {

    margin-bottom: 21px;

}


.gcm-sidebar__header > span {

    display: block;

    margin-bottom: 6px;

    color: var(--gcm-orange);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

}


.gcm-sidebar__header h3 {

    margin: 0;

    color: var(--gcm-navy);

    font-size: 27px;

    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -.035em;

}


.gcm-sidebar__header p {

    margin: 8px 0 0;

    color: var(--gcm-muted);

    font-size: 11px;

    line-height: 1.5;

}


/* ==========================================================================
   OPTIONS
   ========================================================================== */

.gcm-options {

    position: relative;

    display: grid;

    gap: 6px;

}


.gcm-option {

    position: relative;

    width: 100%;

    min-height: 62px;

    padding: 8px 10px;

    border:
        1px solid transparent;

    border-radius: 12px;

    display: grid;

    grid-template-columns:
        47px
        minmax(0,1fr)
        34px;

    align-items: center;

    gap: 11px;

    color: var(--gcm-text);

    background: transparent;

    text-align: left;

    font-family: var(--gcm-font);

    cursor: pointer;

    touch-action: manipulation;

    transition:
        border-color .23s ease,
        background .23s ease,
        transform .23s ease;

}


@media (hover: hover) and (pointer: fine) {

    .gcm-option:hover {

        transform:
            translateX(2px);

        background: #f7f8f8;

    }

}


.gcm-option.is-active {

    border-color:
        rgba(241,90,36,.23);

    background:

        linear-gradient(
            90deg,
            rgba(241,90,36,.105),
            rgba(241,90,36,.025)
        );

}


/* ==========================================================================
   OPTION VISUAL
   ========================================================================== */

.gcm-option__visual {

    width: 47px;

    height: 38px;

    overflow: hidden;

    display: grid;

    place-items: center;

    border:
        1px solid rgba(0,0,0,.06);

    border-radius: 8px;

    background: #f4f5f5;

}


.gcm-option__visual img {

    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

}


/* UBICACIÓN */

.gcm-option__visual--location {

    height: 47px;

    border-radius: 11px;

    color: var(--gcm-orange);

    border-color:
        rgba(241,90,36,.11);

    background:
        rgba(241,90,36,.075);

}


.gcm-option__visual--location svg {

    width: 21px;

    height: 21px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ==========================================================================
   OPTION COPY
   ========================================================================== */

.gcm-option__copy {

    min-width: 0;

}


.gcm-option__copy small {

    display: block;

    margin-bottom: 3px;

    color: #9098a2;

    font-size: 7px;

    font-weight: 750;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.gcm-option__copy strong {

    display: block;

    overflow: hidden;

    color: var(--gcm-navy);

    font-size: 12px;

    font-weight: 740;

    white-space: nowrap;

    text-overflow: ellipsis;

}


/* ==========================================================================
   OPTION ARROW
   ========================================================================== */

.gcm-option__arrow {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 9px;

    color: #929aa3;

    background: #f2f4f5;

}


.gcm-option.is-active
.gcm-option__arrow {

    color: #ffffff;

    background:
        var(--gcm-orange);

}


.gcm-option__arrow svg {

    width: 15px;

    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* ==========================================================================
   SELECTED
   ========================================================================== */

.gcm-selected {

    margin-top: 21px;

    padding-top: 21px;

    border-top:
        1px solid var(--gcm-border);

}


.gcm-selected__top {

    display: flex;

    align-items: center;

    gap: 12px;

}


.gcm-selected__visual {

    width: 58px;

    height: 45px;

    flex: 0 0 58px;

    overflow: hidden;

    display: grid;

    place-items: center;

    border-radius: 9px;

    border:
        1px solid rgba(0,0,0,.055);

    background:
        rgba(241,90,36,.08);

}


.gcm-selected__visual img {

    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover;

}


.gcm-selected__visual svg {

    width: 23px;

    height: 23px;

    fill: none;

    stroke: var(--gcm-orange);

    stroke-width: 1.65;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.gcm-selected__heading {

    min-width: 0;

}


.gcm-selected__heading > span {

    display: block;

    margin-bottom: 4px;

    color: var(--gcm-orange);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;

}


.gcm-selected__heading h4 {

    margin: 0;

    color: var(--gcm-navy);

    font-size: 19px;

    line-height: 1.1;

}


.gcm-selected__description {

    margin: 11px 0 0;

    color: var(--gcm-muted);

    font-size: 10px;

    line-height: 1.5;

}


/* ==========================================================================
   OFFICE INFO
   ========================================================================== */

.gcm-selected__office-info {

    margin-top: 14px;

    display: grid;

    gap: 7px;

}


.gcm-selected__office-info[hidden] {

    display: none !important;

}


.gcm-selected__office-info > div {

    padding: 10px 12px;

    border:
        1px solid var(--gcm-border);

    border-radius: 9px;

    background: #f8f9f9;

}


.gcm-selected__office-info small {

    display: block;

    margin-bottom: 3px;

    color: #969da5;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;

}


.gcm-selected__office-info strong {

    display: block;

    color: var(--gcm-navy);

    font-size: 10px;

    line-height: 1.45;

}


/* ==========================================================================
   ACTIONS
   ========================================================================== */

.gcm-selected__actions {

    margin-top: 15px;

    display: grid;

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

    gap: 7px;

}


.gcm-button {

    min-height: 44px;

    padding: 0 13px;

    border-radius: 9px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: 9px;

    font-weight: 750;

    line-height: 1;

    text-decoration: none;

}


.gcm-button--primary {

    justify-content: space-between;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            var(--gcm-orange-light),
            var(--gcm-orange-dark)
        );

    box-shadow:
        0 9px 19px
        rgba(241,90,36,.15);

}


.gcm-button--primary svg {

    width: 14px;

    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

}


.gcm-button--secondary {

    color: var(--gcm-navy);

    border:
        1px solid var(--gcm-border);

    background: #ffffff;

}


/* ==========================================================================
   MAP AREA
   ========================================================================== */

.gcm-map-area {

    position: relative;

    z-index: 1;

    min-width: 0;

    padding: 17px;

    display: flex;

    flex-direction: column;

    background:

        linear-gradient(
            145deg,
            #081e38,
            #041525
        );

}


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

.gcm-map-head {

    min-height: 62px;

    padding: 4px 6px 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

}


.gcm-map-head > div:first-child span {

    display: block;

    margin-bottom: 4px;

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

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

}


.gcm-map-head strong {

    display: block;

    color: #ffffff;

    font-size: 17px;

}


/* ==========================================================================
   LEYENDA
   ========================================================================== */

.gcm-map-legend {

    display: flex;

    align-items: center;

    gap: 14px;

}


.gcm-map-legend > span {

    display: flex;

    align-items: center;

    gap: 6px;

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

    font-size: 8px;

}


.gcm-legend-dot {

    width: 9px;

    height: 9px;

    display: block;

    border-radius: 50%;

}


.gcm-legend-dot--office {

    background:
        var(--gcm-orange);

}


.gcm-legend-dot--zone {

    border:
        2px solid var(--gcm-orange-light);

    background: transparent;

}


/* ==========================================================================
   MAP SHELL
   ========================================================================== */

.gcm-map-shell {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #d9dee3;

}


/* ==========================================================================
   MAP
   ========================================================================== */

#gcmMap {

    position: relative;

    z-index: 1;

    width: 100% !important;

    height: 540px !important;

    min-height: 540px;

    overflow: hidden;

    background: #d9dee3;

}


#gcmMap.leaflet-container {

    width: 100% !important;

    height: 540px !important;

    font-family: var(--gcm-font);

}


/* ==========================================================================
   IMPORTANTE
   NO MODIFICAR TRANSFORM / POSITION / WIDTH / HEIGHT DE TILES
   ========================================================================== */

#gcmMap .leaflet-tile-pane img.leaflet-tile {

    max-width: none !important;

    max-height: none !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

}


/* ==========================================================================
   LEAFLET CONTROLS
   ========================================================================== */

#gcmMap .leaflet-control-zoom {

    overflow: hidden;

    border: 0 !important;

    border-radius: 10px;

    box-shadow:
        0 8px 24px
        rgba(7,29,56,.17);

}


#gcmMap .leaflet-control-zoom a {

    width: 36px;

    height: 36px;

    line-height: 36px;

    color: var(--gcm-navy);

    border-bottom:
        1px solid #eceeef;

    background: #ffffff;

}


#gcmMap .leaflet-control-zoom a:hover {

    color: #ffffff;

    background:
        var(--gcm-orange);

}


#gcmMap .leaflet-control-attribution {

    padding: 3px 6px;

    color: #6c747d;

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

    font-size: 8px;

}


/* ==========================================================================
   CUSTOM MARKER - OFFICE
   ========================================================================== */

.gcm-marker-container {

    background: transparent !important;

    border: 0 !important;

}


.gcm-leaflet-marker {

    position: relative;

    width: 44px;

    height: 44px;

}


.gcm-leaflet-marker__pin {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    border:
        3px solid #ffffff;

    border-radius:
        50% 50% 50% 9px;

    color: #ffffff;

    background:

        linear-gradient(
            135deg,
            var(--gcm-orange-light),
            var(--gcm-orange-dark)
        );

    box-shadow:
        0 8px 19px
        rgba(0,0,0,.24);

    transform:
        rotate(-45deg);

}


.gcm-leaflet-marker__pin span {

    display: grid;

    place-items: center;

    color: #ffffff;

    font-size: 10px;

    font-weight: 800;

    transform:
        rotate(45deg);

}


/* ==========================================================================
   CUSTOM MARKER - ZONE
   ========================================================================== */

.gcm-leaflet-marker--zone {

    position: relative;

    width: 32px;

    height: 32px;

    border:
        3px solid var(--gcm-orange);

    border-radius: 50%;

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

    box-shadow:
        0 6px 16px
        rgba(0,0,0,.20);

}


.gcm-leaflet-marker--zone::after {

    content: "";

    position: absolute;

    inset: 6px;

    border-radius: 50%;

    background:
        var(--gcm-orange);

}


/* ==========================================================================
   CUSTOM MARKER - FLAG
   ========================================================================== */

.gcm-leaflet-flag {

    width: 48px;

    height: 38px;

    padding: 3px;

    overflow: hidden;

    border:
        2px solid #ffffff;

    border-radius: 8px;

    background: #ffffff;

    box-shadow:
        0 8px 20px
        rgba(0,0,0,.21);

}


.gcm-leaflet-flag img {

    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    border-radius: 5px;

    object-fit: cover;

}


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

#gcmMap
.leaflet-popup-content-wrapper {

    overflow: hidden;

    padding: 0;

    border-radius: 14px;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.22);

}


#gcmMap
.leaflet-popup-content {

    width: 255px !important;

    margin: 0;

}


.gcm-map-popup {

    padding: 17px;

    font-family: var(--gcm-font);

}


.gcm-map-popup__eyebrow {

    display: block;

    margin-bottom: 5px;

    color: var(--gcm-orange);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;

}


.gcm-map-popup h4 {

    margin: 0;

    color: var(--gcm-navy);

    font-size: 17px;

    line-height: 1.1;

}


.gcm-map-popup p {

    margin: 9px 0 0;

    color: #737a83;

    font-size: 10px;

    line-height: 1.5;

}


.gcm-map-popup__phone {

    display: block;

    margin-top: 9px;

    color: var(--gcm-navy) !important;

    font-size: 10px;

    font-weight: 750;

    text-decoration: none !important;

}


.gcm-map-popup__button {

    min-height: 40px;

    margin-top: 13px;

    padding: 0 12px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    color: #ffffff !important;

    background:
        var(--gcm-orange);

    font-size: 8px;

    font-weight: 750;

    text-decoration: none !important;

    text-transform: uppercase;

}


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

.gcm-map-loading {

    position: absolute;

    z-index: 1000;

    top: 18px;

    left: 50%;

    padding: 10px 14px;

    display: flex;

    align-items: center;

    gap: 9px;

    border:
        1px solid rgba(7,29,56,.06);

    border-radius: 10px;

    color: var(--gcm-navy);

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

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

    transform:
        translateX(-50%);

}


.gcm-map-loading[hidden] {

    display: none !important;

}


.gcm-map-loading > span {

    width: 16px;

    height: 16px;

    border:
        2px solid rgba(241,90,36,.17);

    border-top-color:
        var(--gcm-orange);

    border-radius: 50%;

    animation:
        gcmSpin .65s linear infinite;

}


.gcm-map-loading strong {

    font-size: 8px;

}


@keyframes gcmSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/* ==========================================================================
   MAP FOOTER
   ========================================================================== */

.gcm-map-footer {

    min-height: 68px;

    padding: 12px 5px 0;

    display: grid;

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

    align-items: center;

    gap: 11px;

}


.gcm-map-footer__icon {

    width: 40px;

    height: 40px;

    display: grid;

    place-items: center;

    border-radius: 10px;

    color: #ffffff;

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

}


.gcm-map-footer__icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.gcm-map-footer__copy span {

    display: block;

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

    font-size: 8px;

}


.gcm-map-footer__copy strong {

    display: block;

    margin-top: 3px;

    color: #ffffff;

    font-size: 10px;

}


.gcm-map-footer__button {

    min-height: 38px;

    padding: 0 14px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    background:
        var(--gcm-orange);

    font-size: 8px;

    font-weight: 750;

    text-decoration: none;

    text-transform: uppercase;

}


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

@media (max-width: 1000px) {

    .gcm-interface {

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

    }


    .gcm-sidebar {

        padding: 21px;

    }

}


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

@media (max-width: 760px) {

    .gcm-network {

        padding:
            60px 0 120px;

    }


    .gcm-container {

        width:
            calc(100% - 28px);

    }


    .gcm-heading {

        align-items: flex-start;

        flex-direction: column;

        gap: 13px;

    }


    .gcm-heading h2 {

        font-size: 35px;

    }


    .gcm-tabs {

        width: 100%;

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }


    .gcm-interface {

        display: block;

        border-radius: 18px;

    }


    .gcm-sidebar {

        border-right: 0;

        border-bottom:
            1px solid var(--gcm-border);

    }


    .gcm-options {

        display: flex;

        overflow-x: auto;

        gap: 7px;

        padding-bottom: 5px;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;

    }


    .gcm-options::-webkit-scrollbar {

        display: none;

    }


    .gcm-option {

        min-width: 182px;

        flex:
            0 0 182px;

    }


    .gcm-map-area {

        padding: 12px;

    }


    #gcmMap,
    #gcmMap.leaflet-container {

        height: 420px !important;

        min-height: 420px;

    }

}


/* ==========================================================================
   SMALL MOBILE
   ========================================================================== */

@media (max-width: 480px) {

    .gcm-heading h2 {

        font-size: 31px;

    }


    .gcm-heading__text {

        font-size: 12px;

    }


    .gcm-tab {

        min-height: 46px;

        padding: 0 12px;

    }


    .gcm-sidebar {

        padding: 18px 15px;

    }


    .gcm-sidebar__header h3 {

        font-size: 24px;

    }


    .gcm-selected__actions {

        grid-template-columns: 1fr;

    }


    .gcm-map-head {

        align-items: flex-start;

        flex-direction: column;

        gap: 8px;

    }


    #gcmMap,
    #gcmMap.leaflet-container {

        height: 360px !important;

        min-height: 360px;

    }


    .gcm-map-footer {

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

    }


    .gcm-map-footer__button {

        grid-column:
            1 / -1;

        width: 100%;

        min-height: 42px;

    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .gcm-option,
    .gcm-tab {

        transition: none;

    }


    .gcm-map-loading > span {

        animation: none;

    }

}