:root{
  --ink:#111; --muted:#6b6f76; --pill:#ffffff; --accent:#ff3b3b;
  --shadow:0 12px 40px rgba(0,0,0,.24);
  --line:#eceff2;
}

/* --- MAPA --- */
.map{
  position:relative;
  height:calc(100vh - 64px); /* ocupa pantalla menos header aprox. */
  background:#000;
  overflow:hidden;
}
.map__bg{
  position:absolute; inset:0;
  background:#111 center/cover no-repeat;
}
.map__bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.18));
  pointer-events:none;
}

/* Hotspots */
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  z-index:2;
}
.hotspot__btn{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.85);
  color:#fff; background:rgba(0,0,0,.55);
  padding:.45rem .7rem; border-radius:999px;
  font-weight:800; letter-spacing:.02em;
  backdrop-filter: blur(2px);
  box-shadow: var(--shadow);
  cursor:pointer;
}
.hotspot__btn:hover{ background:rgba(0,0,0,.75); }
.hotspot__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* --- MODAL --- */
.modal{
  border:none; padding:0;
  width:100%; height:100%;
  background:rgba(0,0,0,.65);
  display:none; align-items:center; justify-content:center;
}
.modal[open]{ display:flex; }
.modal__card{
  position:relative; width:min(960px,92vw); max-height:86vh;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow: var(--shadow);
  display:grid; grid-template-rows:auto 1fr auto;
}
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.modal__title{ font-weight:900; margin:0; }
.modal__close{
  border:0; background:#000; color:#fff; font-weight:800;
  padding:.5rem .7rem; border-radius:999px; cursor:pointer;
}

.modal__body{
  display:grid; grid-template-columns:280px 1fr; min-height:320px;
}
.modal__tabs{
  border-right:1px solid var(--line); background:#f8f9fb;
}
.tab{
  display:block; width:100%; text-align:left;
  border:0; background:transparent; padding:12px 14px;
  font-weight:800; color:#333; cursor:pointer;
}
.tab[aria-selected="true"]{ background:#fff; color:#000; }

.modal__panels{ position:relative; overflow:hidden; }
.panel{ display:none; height:100%; overflow:auto; padding:14px; }
.panel[aria-hidden="false"]{ display:block; }

/* Video */
.video-wrap{ position:relative; background:#000; border-radius:12px; overflow:hidden; }
.video-wrap video{ width:100%; height:auto; display:block; }

/* Carrusel */
.carousel{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
}
.carousel__track{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px;
}
.carousel__img{
  height:200px; width:auto; object-fit:cover; border-radius:12px; scroll-snap-align:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.carousel__btn{
  border:1px solid var(--line); background:#fff; font-weight:800; border-radius:12px;
  width:38px; height:38px; cursor:pointer;
}

.modal__foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 16px; border-top:1px solid var(--line);
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem .9rem; border-radius:999px;
  background:#000; color:#fff; border:1px solid #000; text-decoration:none; font-weight:800;
}
.btn:hover{ filter:brightness(1.08); }

/* Responsive */
@media (max-width:900px){
  .modal__body{ grid-template-columns:1fr; }
  .modal__tabs{ display:flex; border-right:none; border-bottom:1px solid var(--line); }
  .tab{ flex:1; text-align:center; }
}
