/* Container basics + tiled paper background */
.cabecera_mapa.cabecera2 {
    background-image: image-set(
        url('/enterprise/wp-content/uploads/2025/12/paper-background-seamless.webp') type('image/webp'),
        url('/enterprise/wp-content/uploads/2025/12/paper-background-seamless.png') type('image/png')
    );
    background-repeat: repeat;
    background-size: auto;
    background-position: top left;
}

/* Left banner with upcoming dates (keep or tweak as needed) */
.mapa-dates-banner {
    position: absolute;
    left: 4%;
    top: 24%;
    background: rgba(255, 255, 255, 0.9);
    padding: 12px 18px;
    border-radius: 6px;
    max-width: 280px;
    z-index: 5;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.mapa-dates-banner h3 {
    margin: 0 0 8px;
    font-size: 16px;
    line-height: 1.3;
    color: #333;
}

.mapa-dates-text {
    font-size: 14px;
    line-height: 1.4;
    color: #555;
}

/* If you reverted to .fechas instead of .mapa-dates-banner */
.cabecera_mapa .fechas {
    position: absolute;
    left: 4%;
    top: 40%;
}

/* Map container and image */
.cabecera_mapa .mapa {
    position: relative;     /* not absolute on small screens */
    max-width: 997px;
    margin-left: auto;      /* aligns to the right */
    margin-right: 0;
}

.cabecera_mapa .mapa-img {
    display: block;
    width: 100%;           /* responsive width */
    height: auto;
}

/* Hotspots – responsive via percentages, NO red background */
.cabecera_mapa .map-hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
    background: transparent;
    border-radius: 0;      /* visual circle handled in ::before */
    z-index: 10;
}

/* Coordinates converted from 997x865 to percentages */

/* Barcelona: x=780, y=305, w=125, h=134 */
.cabecera_mapa .mapabarcelona {
    left: 78.23%;
    top: 35.26%;
    width: 12.54%;
    height: 15.49%;
}

/* Madrid: x=293, y=405, w=161, h=155 */
.cabecera_mapa .mapamadrid {
    left: 29.39%;
    top: 46.82%;
    width: 16.15%;
    height: 17.92%;
}

/* Montpellier: x=794, y=107, w=139, h=132 */
.cabecera_mapa .mapamontpellier {
    left: 79.64%;
    top: 12.37%;
    width: 13.94%;
    height: 15.26%;
}

/* Valencia: x=572, y=447, w=171, h=163 */
.cabecera_mapa .mapavalencia {
    left: 57.38%;
    top: 51.68%;
    width: 17.16%;
    height: 18.85%;
}

/* Sevilla: x=202, y=633, w=152, h=145 */
.cabecera_mapa .mapasevilla {
    left: 20.26%;
    top: 73.18%;
    width: 15.25%;
    height: 16.76%;
}

/* Lisboa: x=0, y=560, w=139, h=132 */
.cabecera_mapa .mapalisboa {
    left: 0%;
    top: 64.74%;
    width: 13.94%;
    height: 15.26%;
}

/* Hover styling for badges – inner circle only */
.cabecera_mapa .map-hotspot::before {
    content: "";
    position: absolute;
    inset: 15%;                  /* higher % = smaller circle */
    border-radius: 50%;
    background: transparent;
    transition: background 0.15s ease-out, box-shadow 0.15s ease-out;
    pointer-events: none;        /* clicks go through to the link */
}

.cabecera_mapa .map-hotspot:hover::before {
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
}


@media (max-width: 1480px) {
	.cabecera_mapa .mapa {
        width: 70%;
    }
}


@media (max-width: 1200px) {
    .cabecera_mapa.cabecera2 {
        min-height: auto;
		padding-bottom: 2rem; /* breathing room above next section */
    }

    .cabecera_mapa .mapa {
        position: relative;
        margin: 0 auto;
		width: 100%;
    }

    .cabecera_mapa .textosmovimiento {
        position: relative;
		padding-top:0px;
    }
	
	 .cabecera_mapa.cabecera2 .textosmovimiento {
		 padding-top:0px;
	 }

    .cabecera_mapa .fechas {
        position: static;      /* let it flow under the map */
		margin-top: 0;
    }
}


/* Small-screen tweaks if needed */
@media (max-width: 768px) {
    .mapa-dates-banner {
        top: 10%;
        left: 5%;
        max-width: 60%;
        font-size: 13px;
    }
}