/* ==========================================================================
   bl-map — mapa de España en malla de puntos
   Parte de blomon-base. Requiere GSAP + ScrollTrigger (handles: gsap, gsap-st).
   ========================================================================== */

.bl-map {
  --bl-map-dot: currentColor;        /* hereda el color de texto de la sección */
  --bl-map-dot-opacity: .28;
  --bl-map-accent: #daa54d;
  --bl-map-inset: currentColor;

  --bl-map-card-bg: linear-gradient(180deg,
                      rgba(44, 54, 68, .94) 0%,
                      rgba(28, 35, 45, .94) 100%);   /* #202833 con algo de cuerpo */
  --bl-map-card-borde: rgba(255, 255, 255, .10);
  --bl-map-card-fg: #f2efe8;
  --bl-map-card-blur: 14px;

  --bl-map-max: 1100px;              /* controla ancho Y alto: ver LEEME */
  --bl-map-x: 33.58%;                /* posición del ancla de Sevilla */
  --bl-map-y: 80.57%;

  --bl-map-card-w: clamp(150px, 24vw, 260px);
  --bl-map-card-pad: clamp(9px, 1.3vw, 16px);
  --bl-map-notch: clamp(13px, 2vw, 22px);
  --bl-map-card-dx: 0px;             /* ajuste fino de la tarjeta */
  --bl-map-card-dy: 0px;

  position: relative;
  width: 100%;
  max-width: var(--bl-map-max);
  margin-inline: auto;
}

.bl-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --- puntos ------------------------------------------------------------- */

.bl-map__dots { opacity: 0; }        /* evita el flash antes de animar */
.bl-map.is-ready .bl-map__dots { opacity: 1; }

.bl-map__dots circle {
  fill: var(--bl-map-dot);
  fill-opacity: var(--bl-map-dot-opacity);
  transform-box: fill-box;           /* scale sobre el propio punto */
  transform-origin: center;
}

.bl-map__halo { fill: var(--bl-map-accent); fill-opacity: .4; }
.bl-map__anchor-dot { fill: var(--bl-map-accent); fill-opacity: 1; }

/* --- recuadro de Canarias ----------------------------------------------- */

.bl-map__inset {
  fill: none;
  stroke: var(--bl-map-inset);
  stroke-opacity: .16;
  stroke-width: 1;
}

/* --- pulso sobre Sevilla ------------------------------------------------- */

.bl-map__anchor { opacity: 0; }
.bl-map.is-ready .bl-map__anchor { opacity: 1; }

.bl-map__ring {
  fill: none;
  stroke: var(--bl-map-accent);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: bl-map-pulso 3.4s cubic-bezier(.2, .6, .3, 1) infinite;
}

.bl-map__ring--2 { animation-delay: 1.7s; }

@keyframes bl-map-pulso {
  0%   { transform: scale(.25); opacity: 0; }
  12%  { opacity: .55; }
  70%  { transform: scale(1);   opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}

/* --- tarjeta de ubicación ------------------------------------------------ */

.bl-map__pin {
  position: absolute;
  left: var(--bl-map-x);
  top: var(--bl-map-y);
  width: 0;
  height: 0;
}

.bl-map__card {
  position: absolute;
  left: calc(50% + var(--bl-map-card-dx));
  bottom: calc(var(--bl-map-notch) * .55 - var(--bl-map-card-dy));
  width: var(--bl-map-card-w);
  transform: translateX(-50%);
  padding: var(--bl-map-card-pad) var(--bl-map-card-pad)
           calc(var(--bl-map-card-pad) + var(--bl-map-notch) * .55);
  border-radius: 5px;
  color: var(--bl-map-card-fg);
  background: var(--bl-map-card-bg);
  -webkit-backdrop-filter: blur(var(--bl-map-card-blur)) saturate(130%);
  backdrop-filter: blur(var(--bl-map-card-blur)) saturate(130%);
  opacity: 0;

  /* El volumen va todo en sombras interiores: una box-shadow exterior la
     recortaria la mascara de la muesca y no se veria nada. */
  box-shadow:
    inset 0 0 0 1px var(--bl-map-card-borde),
    inset 0 1px 0 rgba(255, 255, 255, .09),
    inset 0 -22px 34px -26px rgba(0, 0, 0, .9);

  /* muesca semicircular abajo, donde se apoya el punto de Sevilla */
  --bl-map-mask: radial-gradient(
      circle var(--bl-map-notch) at 50% 100%,
      transparent 0 calc(var(--bl-map-notch) - .5px),
      #000 var(--bl-map-notch));
  -webkit-mask-image: var(--bl-map-mask);
  mask-image: var(--bl-map-mask);
}

.bl-map__card-title {
  margin: 0 0 calc(var(--bl-map-card-pad) * .7);
  text-align: left;
  font-size: clamp(.78rem, 1.35vw, 1.05rem);
  line-height: 1.2;
}

.bl-map__card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 2px;
}

.bl-map__card-link {
  display: block;
  margin-top: calc(var(--bl-map-card-pad) * .8);
  text-align: left;
  color: var(--bl-map-accent);
  font-size: clamp(.6rem, .95vw, .8rem);
  letter-spacing: .04em;
  text-decoration: none;
  transition: opacity .25s ease;
}

.bl-map__card-link:hover,
.bl-map__card-link:focus-visible { opacity: .7; }

/* Navegadores sin backdrop-filter: fondo sólido para que se lea igual. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bl-map__card { background: #232b37; }
}

/* --- accesibilidad ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .bl-map__ring { animation: none; opacity: 0; }
  .bl-map__card { opacity: 1; }
}

/* Si el JS no llega a ejecutarse, el mapa se ve igualmente. */
.bl-map.is-fallback .bl-map__dots,
.bl-map.is-fallback .bl-map__anchor,
.bl-map.is-fallback .bl-map__card { opacity: 1; }