.dl-globe {
    position: relative;
    width: 100%;
    min-height: 760px;
    overflow: hidden;
    isolation: isolate;
    container-type: inline-size;
    background: #080808;
    color: #fff;
}

.dl-globe__pin {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
    background: inherit;
}

.dl-globe.has-scroll-zoom {
    min-height: 100svh;
}

.dl-globe.has-scroll-zoom .dl-globe__pin {
    height: 100svh;
    min-height: 100svh;
}

.dl-globe__stage,
.dl-globe__fallback,
.dl-globe__copy,
.dl-globe__countries,
.dl-globe__curtain {
    position: absolute;
    inset: 0;
}

.dl-globe__stage {
    z-index: 1;
    overflow: hidden;
    touch-action: pan-y;
}

.dl-globe__stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    outline: 0;
    touch-action: pan-y;
}

.dl-globe.is-draggable .dl-globe__stage {
    cursor: grab;
}

.dl-globe.is-draggable .dl-globe__stage:active {
    cursor: grabbing;
}

.dl-globe__fallback {
    z-index: 0;
    display: none;
    place-items: center;
    pointer-events: none;
}

.dl-globe__fallback::before {
    content: '';
    width: min(72cqw, 680px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background:
        radial-gradient(circle at 34% 32%, rgba(229, 255, 46, .16), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 62%, transparent 63%);
    box-shadow: inset 0 0 70px rgba(255, 255, 255, .05);
}

.dl-globe.is-fallback .dl-globe__stage {
    display: none;
}

.dl-globe.is-fallback .dl-globe__fallback {
    display: grid;
}

.dl-globe__copy {
    z-index: 4;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 48px;
    pointer-events: none;
    will-change: transform, opacity;
}

.dl-globe__copy-inner {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: inherit;
    text-align: center;
}

.dl-globe__eyebrow {
    margin: 0 0 18px;
    color: #72e6ad;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dl-globe__title {
    margin: 0 auto;
    width: min(96%, 17.5ch);
    color: #fff;
    font-family: inherit;
    font-size: clamp(52px, 7.1cqw, 134px);
    font-weight: 700;
    line-height: .84;
    letter-spacing: -.045em;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    white-space: normal;
    will-change: opacity, transform;
}

.dl-globe.has-title-blend .dl-globe__title {
    mix-blend-mode: difference;
}

.dl-globe__subtitle {
    width: min(640px, 100%);
    margin: 26px auto 0;
    color: rgba(255, 255, 255, .70);
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1.35;
    text-wrap: balance;
}

.dl-globe__countries {
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    will-change: transform, opacity;
}

.dl-globe__country-tag {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0 solid transparent;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dl-globe__country-tag::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #72e6ad;
    box-shadow: 0 0 14px rgba(229, 255, 46, .26);
}

.dl-globe__country-tag:nth-child(1) { top: 18%; left: 7%; }
.dl-globe__country-tag:nth-child(2) { top: 26%; right: 8%; }
.dl-globe__country-tag:nth-child(3) { top: 48%; left: 4.5%; }
.dl-globe__country-tag:nth-child(4) { top: 54%; right: 5%; }
.dl-globe__country-tag:nth-child(5) { bottom: 18%; left: 11%; }
.dl-globe__country-tag:nth-child(6) { bottom: 14%; right: 13%; }
.dl-globe__country-tag:nth-child(7) { top: 12%; left: 31%; }
.dl-globe__country-tag:nth-child(8) { bottom: 9%; left: 35%; }
.dl-globe__country-tag:nth-child(9) { top: 34%; right: 27%; }
.dl-globe__country-tag:nth-child(10) { bottom: 28%; right: 31%; }
.dl-globe__country-tag:nth-child(n+11) { display: none; }

.dl-globe__curtain {
    z-index: 10;
    background: #000;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

.elementor-editor-active .dl-globe {
    min-width: 0;
}

.elementor-editor-active .dl-globe.has-scroll-zoom,
.elementor-editor-active .dl-globe.has-scroll-zoom .dl-globe__pin {
    height: auto;
    min-height: 760px;
}

@container (max-width: 780px) {
    .dl-globe__copy {
        padding-inline: 28px;
    }

    .dl-globe__title {
        width: min(100%, 15.8ch);
        font-size: clamp(40px, 10.8cqw, 82px);
        line-height: .87;
    }

    .dl-globe__country-tag {
        font-size: 9px;
        letter-spacing: .12em;
    }

    .dl-globe__country-tag:nth-child(7),
    .dl-globe__country-tag:nth-child(8),
    .dl-globe__country-tag:nth-child(9),
    .dl-globe__country-tag:nth-child(10) {
        display: none;
    }
}

@media (max-width: 1024px) {
    .dl-globe {
        min-height: 650px;
    }

    .dl-globe__copy {
        padding: 32px;
    }

    .dl-globe__title {
        width: min(100%, 16ch);
        font-size: clamp(42px, 9.7cqw, 92px);
    }

    .dl-globe__country-tag:nth-child(7),
    .dl-globe__country-tag:nth-child(8),
    .dl-globe__country-tag:nth-child(9),
    .dl-globe__country-tag:nth-child(10) {
        display: none;
    }
}


/*
 * Mobile: hierarquia editorial independente do desktop.
 * O título fica acima da esfera; todos os países cadastrados ocupam uma
 * faixa real abaixo dela. O canvas continua com toque vertical liberado.
 */
@media (max-width: 767px) {
    /*
     * O Elementor pode incluir margens horizontais na coluna. Largura 100vw
     * sozinha (versão 0.22.10) criava um bloco deslocado para a direita.
     * Centralizamos o bloco no viewport antes que o ScrollTrigger meça o pin.
     *
     * overflow:hidden e container-type:inline-size no ancestral do pin podem
     * limitar a área fixa no WebKit. O recorte fica somente no próprio palco.
     * Nenhuma destas regras se aplica à timeline desktop.
     */
    .dl-globe[data-dl-globe] {
        width: 100vw;
        min-width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        overflow: visible;
        isolation: auto;
        container-type: normal;
        min-height: 620px;
    }

    .dl-globe[data-dl-globe] .dl-globe__pin {
        width: 100vw !important;
        min-width: 100vw;
        max-width: 100vw !important;
        overflow: hidden;
        isolation: isolate;
    }

    /*
     * WebKit/Safari: ao completar o fade, o renderer WebGL não deve
     * deixar fragmentos de geometria fora do pin na borda da viewport.
     * Somente a camada de renderização é ocultada (não o contêiner),
     * permitindo retornar pelo scroll sem recriar o globo.
     */
    .dl-globe[data-dl-globe].is-mobile-globe-covered .dl-globe__stage,
    .dl-globe[data-dl-globe].is-mobile-globe-covered .dl-globe__stage canvas,
    .dl-globe[data-dl-globe].is-mobile-globe-covered .dl-globe__fallback {
        visibility: hidden !important;
    }

    /*
     * Enquanto o pin estiver fixo, a cortina segue integralmente sua área.
     * O fade é executado pelo JS exclusivamente sobre opacity.
     */
    .dl-globe[data-dl-globe] .dl-globe__curtain {
        inset: 0;
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0;
    }

    .dl-globe[data-dl-globe].has-scroll-zoom,
    .dl-globe[data-dl-globe].has-scroll-zoom .dl-globe__pin {
        min-height: 100svh;
        height: 100svh;
    }

    /*
     * O canvas precisa ocupar TODO o palco de 100svh.
     * Limitar top/bottom do WebGL cortava a esfera durante o zoom e fazia a
     * ampliação acontecer fora da área visível. A câmera posiciona o globo
     * abaixo do título; a camada de textos continua acima do canvas.
     */
    .dl-globe[data-dl-globe] .dl-globe__stage,
    .dl-globe[data-dl-globe] .dl-globe__fallback {
        inset: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .dl-globe[data-dl-globe] .dl-globe__stage,
    .dl-globe[data-dl-globe] .dl-globe__stage canvas {
        touch-action: pan-y;
    }

    /* Título editorial no topo, alinhado com o centro do globo. */
    .dl-globe[data-dl-globe] .dl-globe__copy {
        inset: 0 0 auto;
        height: auto;
        padding: clamp(24px, 3.2svh, 40px) 18px 0 !important;
        justify-content: flex-start !important;
        align-items: center;
    }

    .dl-globe[data-dl-globe] .dl-globe__copy-inner {
        width: 100%;
        max-width: 540px !important;
        align-items: center;
        text-align: center !important;
    }

    .dl-globe[data-dl-globe] .dl-globe__eyebrow {
        margin: 0 0 12px;
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: .17em;
    }

    .dl-globe[data-dl-globe] .dl-globe__title {
        width: min(100%, 10.5ch) !important;
        max-width: 100%;
        margin-inline: auto;
        font-size: clamp(33px, 10.7vw, 47px) !important;
        line-height: .93;
        letter-spacing: -.05em;
        text-wrap: balance;
    }

    .dl-globe[data-dl-globe] .dl-globe__subtitle {
        width: min(100%, 30ch);
        margin: 14px auto 0;
        font-size: clamp(13px, 3.45vw, 15px) !important;
        line-height: 1.35;
    }

    /*
     * As etiquetas deixam de ser coordenadas soltas sobre o mapa.
     * O grid editorial flexível não descarta o quarto país nem os demais.
     * Em listas extensas, a faixa rola independentemente sem cortar texto.
     */
    .dl-globe[data-dl-globe] .dl-globe__countries {
        inset: auto 0 clamp(20px, 3svh, 30px);
        z-index: 4;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        justify-content: center;
        gap: 4px 16px;
        width: 100%;
        height: auto;
        max-height: min(23svh, 182px);
        margin: 0;
        padding: 8px 18px calc(8px + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        pointer-events: auto;
    }

    .dl-globe[data-dl-globe] .dl-globe__countries::-webkit-scrollbar {
        display: none;
    }

    .dl-globe[data-dl-globe] .dl-globe__country-tag:nth-child(n) {
        position: relative;
        inset: auto;
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        min-height: 26px;
        gap: 7px;
        padding: 6px 1px;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.16);
        border-radius: 0;
        background: transparent;
        font-size: 9px;
        line-height: 1.15;
        letter-spacing: .1em;
        white-space: nowrap;
    }

    .dl-globe[data-dl-globe] .dl-globe__country-tag::before {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 8px rgba(114,230,173,.2);
    }

    /* Fallback legível também em dispositivos sem WebGL. */
    .dl-globe[data-dl-globe] .dl-globe__fallback::before {
        width: min(76vw, 370px);
        transform: translateY(clamp(50px, 10svh, 95px));
        border-color: rgba(255,255,255,.28);
        background: radial-gradient(circle at 37% 32%, rgba(114,230,173,.13), rgba(255,255,255,.065) 40%, rgba(255,255,255,.015) 70%);
    }
}

/* Evita sobreposição em aparelhos baixos, sem compactar o desktop. */
@media (max-width: 767px) and (max-height: 680px) {
    /* Não recortar novamente o WebGL nas telas baixas. */
    .dl-globe[data-dl-globe] .dl-globe__copy {
        padding-top: 18px !important;
    }

    .dl-globe[data-dl-globe] .dl-globe__title {
        font-size: clamp(30px, 9.4vw, 38px) !important;
    }

    .dl-globe[data-dl-globe] .dl-globe__subtitle {
        margin-top: 8px;
        font-size: 12px !important;
    }

    .dl-globe[data-dl-globe] .dl-globe__countries {
        bottom: 12px;
        max-height: 21svh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-globe__copy,
    .dl-globe__countries,
    .dl-globe__curtain {
        transition: none;
    }
}