/* ==========================================================================
   Watch Water México - Componente Interactivo Mapa Latinoamérica
   ========================================================================== */

.mapa-seccion {
    position: relative;
    width: 100%;
    padding: 2rem 0 4rem 0;
}

.mapa-header-block {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 2.5rem auto;
}

.mapa-header-block h1 {
    font-size: 2.6rem;
    line-height: 1.2;
    color: var(--color-negro, #171C25);
    margin-bottom: 0.75rem;
}

.mapa-header-block h1 strong {
    color: var(--color-azul, #0EA2DE);
}

.mapa-header-block p {
    font-size: 1.05rem;
    color: var(--color-gris-oscuro, #3A455E);
    line-height: 1.6;
}

/* Contenedor Principal en Grid */
.mapa-grid-layout {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 2.5rem;
    align-items: start;
    background: var(--color-blanco, #FFFFFF);
    border: 1px solid var(--color-gris-claro-3, #E2E2E2);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 12px 35px rgba(23, 28, 37, 0.05);
    position: relative;
}

/* Contenedor Visual del Mapa SVG */
.mapa-visual-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#distribuidores-latinoamerica .col-1.sticky-top,
.mapa-visual-container.sticky-top {
    position: static;
}

@media (min-width: 821px) {
    #distribuidores-latinoamerica .col-1.sticky-top,
    .mapa-visual-container.sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: calc(var(--salvaguarda-tablet, 80px) + 15px);
        align-self: start;
        z-index: 20;
    }
}

@media (min-width: 1040px) {
    #distribuidores-latinoamerica .col-1.sticky-top,
    .mapa-visual-container.sticky-top {
        top: calc(var(--salvaguarda-desktop, 100px) + 15px);
    }
}


.mapa-visual-wrapper {
    position: relative;
    background: linear-gradient(180deg, #F8FCFE 0%, #F3F8FB 100%);
    border: 1px solid #E1EDF5;
    border-radius: 16px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    height: 540px;
    max-height: calc(100vh - 160px);
    width: 100%;
    cursor: default;
    touch-action: none;
}

.mapa-visual-wrapper.is-zoomed {
    cursor: grab;
}

.mapa-visual-wrapper.is-panning {
    cursor: grabbing !important;
    user-select: none;
}

.mapa-svg {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    transition: viewBox 0.1s ease-out;
}

.mapa-visual-wrapper.is-panning .mapa-svg {
    transition: none; /* Arrastre instantáneo y fluido sin retardo de transición */
}

/* Botones de Control de Zoom / Enfoque */
.mapa-controles-zoom {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}

.mapa-zoom-btn {
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border: 1px solid #D0DFE8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-negro, #171C25);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
}

.mapa-zoom-btn:hover {
    background: #E8F6FD;
    border-color: var(--color-azul, #0EA2DE);
    color: var(--color-azul, #0EA2DE);
    transform: translateY(-1px);
}

.mapa-quick-views {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.mapa-view-pill {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border: 1px solid #D0DFE8;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gris-oscuro, #3A455E);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 5px;
}

.mapa-view-pill:hover,
.mapa-view-pill.is-active {
    background: #0EA2DE;
    border-color: #0EA2DE;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 162, 222, 0.35);
}

/* Estilos de los Países en SVG */
.mapa-pais {
    transition: fill 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                stroke 0.3s ease,
                filter 0.3s ease;
}

/* Países base / contexto */
.mapa-pais-base {
    fill: #E1E8EE;
    stroke: #FFFFFF;
    stroke-width: 0.8px;
    stroke-linejoin: round;
    cursor: default;
}

.mapa-pais-base:hover {
    fill: #D3DEE6;
}

/* Países activos con presencia */
.mapa-pais-activo {
    fill: #CDECF9;
    stroke: #0EA2DE;
    stroke-width: 1.2px;
    stroke-linejoin: round;
    cursor: pointer;
}

.mapa-pais-activo:hover,
.mapa-pais-activo.is-active,
.mapa-pais-activo.is-highlighted {
    fill: #0EA2DE;
    stroke: #FFFFFF;
    stroke-width: 1.8px;
    filter: drop-shadow(0 0 12px rgba(14, 162, 222, 0.6));
}

/* Sede México */
.mapa-pais-hq {
    fill: #BCE5F7;
    stroke: #0EA2DE;
    stroke-width: 1.4px;
}

.mapa-pais-hq:hover,
.mapa-pais-hq.is-active,
.mapa-pais-hq.is-highlighted {
    fill: #0B8BC0;
    stroke: #FFFFFF;
    stroke-width: 2px;
    filter: drop-shadow(0 0 16px rgba(14, 162, 222, 0.75));
}

/* ==========================================================================
   Marcadores (Pines Grandes y Estables sin saltos de transformación)
   ========================================================================== */

.mapa-marker {
    cursor: pointer;
    outline: none;
    pointer-events: auto;
}

.marker-hitarea {
    cursor: pointer;
    pointer-events: all;
}

.marker-pulse-ring {
    fill: none;
    stroke: #0EA2DE;
    stroke-width: 1.8px;
    pointer-events: none;
    animation: markerPulseSvg 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.ring-2 {
    animation-delay: 1.25s;
}

.marker-glow-halo {
    fill: rgba(14, 162, 222, 0.3);
    pointer-events: none;
    transition: fill 0.3s ease, r 0.3s ease, opacity 0.3s ease;
}

.marker-core-bg {
    fill: #FFFFFF;
    stroke: #0EA2DE;
    stroke-width: 2.8px;
    pointer-events: none;
    transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease, r 0.3s ease;
}

.marker-core-dot {
    fill: #0EA2DE;
    pointer-events: none;
    transition: fill 0.3s ease, r 0.3s ease;
}

.marker-hq .marker-core-dot {
    fill: #284E67;
}

.marker-hq .marker-pulse-ring {
    stroke: #284E67;
}

/* Estados Hover / Highlighted sobre los elementos internos */
.mapa-marker:hover .marker-glow-halo,
.mapa-marker.is-active .marker-glow-halo,
.mapa-marker.is-highlighted .marker-glow-halo {
    fill: rgba(14, 162, 222, 0.65);
    r: 22px;
}

.mapa-marker:hover .marker-core-bg,
.mapa-marker.is-active .marker-core-bg,
.mapa-marker.is-highlighted .marker-core-bg {
    stroke: #284E67;
    stroke-width: 3.5px;
    r: 12px;
}

.mapa-marker:hover .marker-core-dot,
.mapa-marker.is-active .marker-core-dot,
.mapa-marker.is-highlighted .marker-core-dot {
    fill: #00C2C2;
    r: 6px;
}

.marker-hq:hover .marker-core-bg,
.marker-hq.is-active .marker-core-bg,
.marker-hq.is-highlighted .marker-core-bg {
    stroke: #0EA2DE;
    stroke-width: 4px;
    r: 14px;
}

.marker-hq:hover .marker-core-dot,
.marker-hq.is-active .marker-core-dot,
.marker-hq.is-highlighted .marker-core-dot {
    fill: #284E67;
    r: 7px;
}

/* Animación de ondas SVG por opacidad y radio */
@keyframes markerPulseSvg {
    0% {
        r: 8px;
        opacity: 0.9;
        stroke-width: 2.2px;
    }
    60% {
        opacity: 0.45;
    }
    100% {
        r: 32px;
        opacity: 0;
        stroke-width: 0.4px;
    }
}

/* ==========================================================================
   Marcadores Reducidos para Vista de Zoom / Centroamérica
   ========================================================================== */
.mapa-visual-wrapper.is-zoomed .mapa-marker .marker-hitarea {
    r: 9px;
}

.mapa-visual-wrapper.is-zoomed .mapa-marker .marker-pulse-ring {
    stroke-width: 0.7px;
    animation: markerPulseSvgZoomed 2.5s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}

.mapa-visual-wrapper.is-zoomed .mapa-marker .marker-glow-halo {
    r: 5px;
}

.mapa-visual-wrapper.is-zoomed .mapa-marker .marker-core-bg {
    r: 3.5px;
    stroke-width: 1px;
}

.mapa-visual-wrapper.is-zoomed .mapa-marker .marker-core-dot {
    r: 1.8px;
}

.mapa-visual-wrapper.is-zoomed .marker-hq .marker-hq-crown {
    r: 4.8px;
    stroke-width: 0.8px;
}

/* Estados Hover / Highlighted en Zoom */
.mapa-visual-wrapper.is-zoomed .mapa-marker:hover .marker-glow-halo,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-active .marker-glow-halo,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-highlighted .marker-glow-halo {
    r: 7px;
}

.mapa-visual-wrapper.is-zoomed .mapa-marker:hover .marker-core-bg,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-active .marker-core-bg,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-highlighted .marker-core-bg {
    r: 4.5px;
    stroke-width: 1.3px;
}

.mapa-visual-wrapper.is-zoomed .mapa-marker:hover .marker-core-dot,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-active .marker-core-dot,
.mapa-visual-wrapper.is-zoomed .mapa-marker.is-highlighted .marker-core-dot {
    r: 2.2px;
}

.mapa-visual-wrapper.is-zoomed .marker-hq:hover .marker-core-bg,
.mapa-visual-wrapper.is-zoomed .marker-hq.is-active .marker-core-bg,
.mapa-visual-wrapper.is-zoomed .marker-hq.is-highlighted .marker-core-bg {
    r: 5px;
    stroke-width: 1.5px;
}

.mapa-visual-wrapper.is-zoomed .marker-hq:hover .marker-core-dot,
.mapa-visual-wrapper.is-zoomed .marker-hq.is-active .marker-core-dot,
.mapa-visual-wrapper.is-zoomed .marker-hq.is-highlighted .marker-core-dot {
    r: 2.6px;
}

@keyframes markerPulseSvgZoomed {
    0% {
        r: 3px;
        opacity: 0.85;
        stroke-width: 0.8px;
    }
    60% {
        opacity: 0.35;
    }
    100% {
        r: 11px;
        opacity: 0;
        stroke-width: 0.2px;
    }
}

/* Tooltip Flotante */
.mapa-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    background: rgba(23, 28, 37, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #FFFFFF;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(14, 162, 222, 0.4);
    transform: translate(-50%, -130%);
    transition: opacity 0.2s ease;
    opacity: 0;
    white-space: nowrap;
}

.mapa-tooltip.is-visible {
    opacity: 1;
}

.mapa-tooltip-flag {
    margin-right: 6px;
    font-size: 1.1rem;
    vertical-align: middle;
}

.mapa-tooltip-name {
    font-weight: 600;
    color: #FFFFFF;
}

.mapa-tooltip-type {
    display: block;
    font-size: 0.75rem;
    color: #0EA2DE;
    margin-top: 2px;
}

/* Panel Lateral de Información */
.mapa-info-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mapa-card-detalle {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.8rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.mapa-card-detalle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-azul, #0EA2DE);
    border-radius: 16px 0 0 16px;
}

.mapa-badge-tipo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(14, 162, 222, 0.12);
    color: var(--color-azul, #0EA2DE);
    margin-bottom: 0.75rem;
}

.mapa-badge-tipo.badge-hq {
    background: rgba(40, 78, 103, 0.12);
    color: var(--color-azul-magnetico, #284E67);
}

.mapa-pais-titulo-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.mapa-pais-flag {
    font-size: 2rem;
    line-height: 1;
}

.mapa-pais-nombre {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-negro, #171C25);
    margin: 0;
}

.mapa-pais-desc {
    font-size: 0.95rem;
    color: var(--color-gris-oscuro, #3A455E);
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.mapa-beneficios-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mapa-beneficios-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--color-gris-oscuro, #3A455E);
}

.mapa-beneficios-list li svg {
    width: 16px;
    height: 16px;
    fill: var(--color-azul, #0EA2DE);
    flex-shrink: 0;
}

.mapa-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0.85rem 1.25rem;
    background: var(--color-azul, #0EA2DE);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(14, 162, 222, 0.3);
}

.mapa-cta-btn:hover {
    background: #0B8BC0;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(14, 162, 222, 0.4);
    color: #FFFFFF;
}

/* Selector Rápido de Países (Chips / Grid) */
.mapa-paises-selector {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.25rem;
}

.mapa-selector-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gris, #959595);
    margin-bottom: 0.75rem;
}

.mapa-chips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.mapa-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-negro, #171C25);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.mapa-chip:hover,
.mapa-chip.is-active {
    background: #E8F6FD;
    border-color: var(--color-azul, #0EA2DE);
    color: var(--color-azul, #0EA2DE);
    transform: translateY(-1px);
}

.mapa-chip-flag {
    font-size: 1rem;
    line-height: 1;
}

/* Leyenda del Mapa */
.mapa-leyenda {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.8rem;
    color: var(--color-gris-oscuro, #3A455E);
}

.mapa-leyenda-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.leyenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.dot-hq {
    background: #284E67;
    box-shadow: 0 0 0 2px rgba(40, 78, 103, 0.2);
}

.dot-distribuidor {
    background: #0EA2DE;
    box-shadow: 0 0 0 2px rgba(14, 162, 222, 0.2);
}

/* Responsive */
@media (max-width: 991px) {
    .mapa-grid-layout {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }

    .mapa-visual-wrapper {
        min-height: 480px;
        padding: 1rem;
    }

    .mapa-chips-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .mapa-header-block h1 {
        font-size: 2rem;
    }

    .mapa-grid-layout {
        padding: 1rem;
        border-radius: 14px;
    }

    .mapa-visual-wrapper {
        min-height: 380px;
        padding: 0.5rem;
    }

    .mapa-chips-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mapa-card-detalle {
        padding: 1.25rem;
    }

    .mapa-quick-views {
        flex-wrap: wrap;
        bottom: 0.75rem;
        left: 0.75rem;
    }
}