/* ================================
   CONTENEDOR PRINCIPAL DEL MAPA
=================================*/
.map-container {
    position: relative;
    width: 80%;
    max-width: 80%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: #020617;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

/* ================================
   IMAGEN + SVG
=================================*/
.map-inner {
    position: relative;
    width: 100%;
    height: auto;
    transform-origin: top left;
    cursor: grab;
    transition: transform 0.1s ease-out;
}

.map-inner:active {
    cursor: grabbing;
}

.map-image {
    display: block;
    width: 100%;
    height: auto;
}

/* SVG overlay */
.map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none; /* el SVG no recibe clicks */
}

.map-pin {
    pointer-events: all; /* pero el pin sí */
}


/* ================================
   MARCADOR ESTILO AIRBNB
=================================*/
.map-pin {
    fill: #ff385c;
    stroke: #ffffff;
    stroke-width: 3px;
    cursor: pointer;
    transition: 0.25s ease;
    filter: drop-shadow(0 0 10px rgba(255,56,92,0.7));
}



/* Anillo de pulso */
.map-pin-pulse {
    fill: rgba(255,56,92,0.35);
    animation: pinPulse 2s infinite ease-out;
}

/* Etiqueta */
.pin-label {
    fill: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    pointer-events: none;
}