:root {
  --dark: #07150d;
  --panel: rgba(7, 21, 13, 0.86);
  --green: #8fb742;
  --green2: #c7e16b;
  --white: #ffffff;
  --muted: rgba(255,255,255,.72);
  --line: rgba(255,255,255,.16);
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
  scroll-behavior:smooth;
}

body{
  background:var(--dark);
  color:var(--white);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ───────────────────────────── */
/* CONTENEDOR GENERAL */
/* ───────────────────────────── */

.tour-shell{
  width:100%;
  height:100vh;
  display:grid;
  grid-template-columns:340px 1fr;

  background:
    linear-gradient(
      90deg,
      rgba(7,21,13,.98),
      rgba(7,21,13,.55) 38%,
      rgba(7,21,13,.18)
    ),
    url("galeria/aereo.jpeg") center/cover no-repeat;

  overflow:hidden;
}

/* ───────────────────────────── */
/* PANEL IZQUIERDO */
/* ───────────────────────────── */

.tour-panel{
  padding:34px 24px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--line);

  overflow:hidden;

  display:flex;
  flex-direction:column;
}

.eyebrow{
  margin-bottom:10px;
  color:var(--green2);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:800;
  font-size:12px;
}

h1{
  font-size:38px;
  line-height:.95;
  text-transform:uppercase;
}

h2{
  margin:8px 0 20px;
  color:var(--green2);
  font-size:24px;
  text-transform:uppercase;
}

.intro,
.hint{
  color:var(--muted);
  line-height:1.45;
}

.hint{
  font-size:13px;
  margin-top:14px;
}

/* ───────────────────────────── */
/* LISTA */
/* ───────────────────────────── */

.tour-list{
  margin:24px 0;
  display:grid;
  gap:10px;

  overflow:hidden;
}

.tour-item{
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:10px;
  align-items:center;

  padding:10px;

  border:1px solid var(--line);
  border-radius:14px;

  background:rgba(255,255,255,.05);

  color:var(--white);
  text-align:left;

  cursor:pointer;

  transition:
    transform .2s ease,
    background .2s ease;
}

.tour-item:hover{
  transform:translateX(4px);
  background:rgba(143,183,66,.16);
}

.tour-item strong{
  display:block;
  font-size:14px;
}

.tour-item small{
  color:var(--muted);
}

.number{
  width:30px;
  height:30px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:var(--green);

  color:white;
  font-weight:900;

  border:2px solid rgba(255,255,255,.9);
}

/* ───────────────────────────── */
/* BOTÓN */
/* ───────────────────────────── */

.primary-btn{
  width:100%;

  padding:14px 16px;

  border:0;
  border-radius:999px;

  background:
    linear-gradient(
      135deg,
      var(--green),
      #5d7f2a
    );

  color:white;
  font-weight:900;

  cursor:pointer;

  box-shadow:0 14px 30px rgba(0,0,0,.25);

  margin-top:auto;
}

/* ───────────────────────────── */
/* MAPA */
/* ───────────────────────────── */

.map-area{
  padding:24px;

  display:grid;
  place-items:center;

  overflow:hidden;
}

.map-card{
  position:relative;

  width:min(100%,1080px);

  border-radius:22px;

  overflow:hidden;

  box-shadow:0 30px 80px rgba(0,0,0,.45);

  border:1px solid rgba(255,255,255,.22);

  background:#15210f;
}

.masterplan{
  display:block;
  width:100%;
  height:auto;
}

.hotspots{
  position:absolute;
  inset:0;
}

/* ───────────────────────────── */
/* HOTSPOTS */
/* ───────────────────────────── */

.hotspot{
  position:absolute;

  transform:translate(-50%, -50%);

  width:42px;
  height:42px;

  border-radius:50%;

  border:3px solid white;

  background:rgba(143,183,66,.96);

  color:white;

  font-weight:950;
  font-size:18px;

  cursor:pointer;

  box-shadow:0 8px 20px rgba(0,0,0,.35);

  animation:pulse 2s infinite;
}

.hotspot:hover{
  scale:1.12;
}

@keyframes pulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(199,225,107,.45);
  }

  50%{
    box-shadow:0 0 0 12px rgba(199,225,107,0);
  }
}

/* ───────────────────────────── */
/* MODAL */
/* ───────────────────────────── */

.modal{
  position:fixed;
  inset:0;

  display:none;

  z-index:100;
}

.modal.is-open{
  display:block;
}

.modal-backdrop{
  position:absolute;
  inset:0;

  background:rgba(0,0,0,.72);
}

.modal-content{
  position:relative;

  width:min(920px, calc(100vw - 30px));
  max-height:calc(100vh - 30px);

  margin:15px auto;

  padding:18px;

  border-radius:24px;

  background:#0d1f10;

  border:1px solid rgba(255,255,255,.18);

  box-shadow:0 30px 90px rgba(0,0,0,.65);

  overflow-y:auto;
}

.close-btn{
  position:absolute;
  top:12px;
  right:16px;

  width:40px;
  height:40px;

  border-radius:50%;

  border:1px solid var(--line);

  background:rgba(255,255,255,.1);

  color:white;

  font-size:28px;

  cursor:pointer;
}

.modal-header{
  display:flex;
  align-items:center;
  gap:12px;

  padding-right:50px;
}

#modalNumber{
  width:44px;
  height:44px;

  border-radius:50%;

  background:var(--green);

  display:grid;
  place-items:center;

  font-weight:950;

  border:2px solid white;
}

#modalTitle{
  margin:0;
  font-size:28px;
}

#modalSubtitle{
  margin:4px 0 0;
  color:var(--green2);
}

.media-frame{
  margin-top:18px;

  border-radius:18px;

  overflow:hidden;

  background:#000;

  aspect-ratio:16/9;
}

.media-frame video,
.media-frame img{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;
}

.modal-description{
  margin-top:16px;
  color:var(--muted);
  line-height:1.5;
}

.media-tabs{
  margin-top:16px;

  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.media-tabs button,
.modal-actions button{
  border:1px solid var(--line);

  background:rgba(255,255,255,.08);

  color:white;

  border-radius:999px;

  padding:10px 14px;

  cursor:pointer;
}

.media-tabs button.active{
  background:var(--green);
}

.modal-actions{
  margin-top:18px;

  display:flex;
  justify-content:space-between;
  gap:12px;
}

/* ───────────────────────────── */
/* RESPONSIVE */
/* ───────────────────────────── */

@media (max-width:900px){

  html,
  body{
    overflow:auto;
  }

  .tour-shell{
    grid-template-columns:1fr;
    height:auto;
  }

  .tour-panel{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  h1{
    font-size:31px;
  }

  .map-area{
    padding:12px;
  }

  .hotspot{
    width:34px;
    height:34px;
    font-size:15px;
  }
}