:root{
  --modal-backdrop: rgba(0,0,0,.78);
  --modal-radius: 14px;
  --modal-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* Evitar scroll al abrir modal */
body.channel.dark[data-modal-open="true"] { overflow: hidden; }

/* Contenedor del mapa */
.mapa-wrap{
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  overflow: hidden;
  position: relative; /* para posicionar el tooltip */
}
.mapa-obj{
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

/* Tooltip accesible */
.mapa-tooltip{
  position: absolute;
  transform: translate(10px, -8px); /* pequeño offset al cursor/punto */
  background: #111;
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
  padding: .35rem .5rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s ease;
  z-index: 5;
}
.mapa-tooltip.is-visible{ opacity: 1; }

/* Modal / Lightbox */
.modal{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background: transparent;
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
  z-index: 9999;
}
.modal.is-open{
  background: var(--modal-backdrop);
  opacity:1; pointer-events:auto;
}
.modal__dialog{
  position:relative;
  width:min(92vw, 1100px);
  aspect-ratio: 16 / 9;
  background:#000;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow:hidden;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.modal.is-open .modal__dialog{ transform: translateY(0); }
.modal__content{ position:absolute; inset:0; }
.modal__content iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.modal__close{
  position:absolute; top:8px; right:8px;
  width:44px; height:44px; border:0; border-radius: 999px;
  background: rgba(255,255,255,.14);
  color:#fff; font-size: 24px; line-height: 44px;
  cursor:pointer; backdrop-filter: blur(4px);
}
.modal__close:hover{ background: rgba(255,255,255,.22); }
.modal__close:focus{ outline: 3px solid #fff; outline-offset: 2px; }
.modal__backdrop{ position:absolute; inset:0; }

/* Skip link (AA) */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left: 8px; top:8px; width:auto; height:auto; padding:.5rem .75rem;
  background:#fff; color:#000; border-radius:6px; z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Motion preferencia */
@media (prefers-reduced-motion: reduce){
  .modal, .modal__dialog, .mapa-tooltip{ transition: none; }
}

/* Ajuste de título en móviles */
@media (max-width: 767px){
  .site-title { font-size: 20px; }
}