.elementor-9439 .elementor-element.elementor-element-37c4d3b{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-9439 .elementor-element.elementor-element-37c4d3b.e-con{--order:6;}.elementor-9439 .elementor-element.elementor-element-34b1bf4 > .elementor-widget-container{margin:0px 0px -7px 0px;padding:0px 0px 0px 0px;}@media(min-width:768px){.elementor-9439 .elementor-element.elementor-element-37c4d3b{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-34b1bf4 *//* ---------- VARIABLES ---------- */
:root{
  --brand: #005091;
  --brand-light: rgba(70,149,252,.1);
  --text-dark: #ffffff;
  --bg-panel: #000000;
  --bg-index: #000000;
  --radius: 0px;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
}

/* ---------- RESET Y UTILIDADES ---------- */
.hidden{display:none !important;}

/* ---------- LAYOUT ---------- */
.map-index-wrapper{
  display:flex;
  gap:2rem;
  background:var(--bg-index);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* 1/3 – 2/3 fijo */
.map-index{
  width:405px;
  flex-shrink:0;
  background:var(--bg-index);
  border-radius:var(--radius);
  padding:1.5rem 1rem;
}
#map{
  flex:2 1 67%;
  height:650px;
  border-radius:0 var(--radius) var(--radius) 0;
  overflow:hidden;
}

/* ---------- ACORDEÓN ---------- */
.map-index ul{list-style:none;margin:0;padding:0;}
.map-index li{margin-bottom:.1rem;display:flex;flex-direction:column;gap:.25rem;}
button.home {
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  border: none;
  outline: none;              /* quita el borde rojo del User-Agent */
}
button.home:focus {
  outline: 2px solid var(--brand-light); /* opcional: accesible y discreto */
}
button.accordion,
.panel button{
  font-size: 0.9rem;
  text-align:left;
  width:100%;
  background:none;
  border:none;
  font-weight:600;
  padding:.2rem .4rem;
  border-radius:6px;
  cursor:pointer;
  transition:background .2s;
  color:var(--text-dark);
}
button.accordion{
  display:flex;
  align-items:center;
  gap:.5rem;
}
button.accordion::after{
  content:'▾';
  margin-left:auto;
  transition:transform .2s;
}
button.accordion.active::after{transform:rotate(180deg);}
.panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding-left:1.2rem;
}

/* hover unificado */
button.accordion:hover,
.panel button:hover,
button.home:hover{
  background:var(--brand);
  color:#fff;
}

/* ---------- MARCADORES ---------- */
.section-marker{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.section-marker.museo{background:#ff9059;}
.section-marker.mirador{background:#ffd200;}
.section-marker.patrimonio{background:#b29b7f;}
.section-marker.monumentos{background:#b27fb2;}
.section-marker.naturaleza{background:#75c56c;}
.section-marker.costas{background:#4796fc;}
.section-marker.senderos{background:#054200;}
.section-marker.salud{background:#ff5959;}
.section-marker.oficinas{background:#89ceff;}
.section-marker.edificios{background:#013982;}

/* botón home */
button.home{background:var(--brand);color:#fff;font-weight:600;}

/* ---------- MAPA ---------- */
.marker{
  width:15px;height:15px;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  cursor:pointer;
  transition:transform .2s,background-color .2s;
}
.marker.active{transform:scale(1.3);background:#fff !important;}

/* botones flotantes */
.map-buttons{
  position:absolute;
  bottom:1.2rem;right:1.2rem;
  z-index:10;
  display:flex;gap:.5rem;
}
.map-buttons button{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:.4rem .8rem;
  border-radius:.75rem;
  font:600 14px/1 system-ui,sans-serif;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.map-buttons button:hover{background:rgba(70,149,252,.9);}

/* ---------- PANEL LATERAL ---------- */
.side-panel{
  position:absolute;
  top:0;left:0;
  width:350px;height:100%;
  background:var(--bg-panel);
  box-shadow:-4px 0 12px rgba(0,0,0,.15);
  padding:1.5rem;
  z-index:30;
  display:flex;
  flex-direction:column;gap:1rem;
  transform:translateX(-100%);
  transition:transform .3s ease;
}
.side-panel:not(.hidden){transform:translateX(0);}

#close-panel{
  align-self:flex-end;
  background:none;border:none;
  font-size:1.5rem;cursor:pointer;line-height:1;
  color:var(--text-dark);
}

#panel-img{width:100%;height:160px;object-fit:cover;border-radius:8px;}
#panel-title{margin:0;font-size:1.2rem;font-weight:600;color:var(--text-dark);}
#panel-desc{flex:1;margin:0;font-size:.95rem;opacity:.85;color:var(--text-dark);}
#panel-link{
  background:var(--brand);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:6px;
  text-align:center;
  text-decoration:none;
  font-weight:600;
}
#panel-link:hover{opacity:.9;}

.back-button{
  color:var(--text-dark);
  font-size:.8rem;
  background:none;border:none;
  padding:8px 12px;
  display:flex;align-items:center;gap:6px;
  cursor:pointer;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  .map-index-wrapper{flex-direction:column;}
  .map-index,
  .side-panel{width:100%;transform:translateY(-100%);}
  .side-panel:not(.hidden){transform:translateY(0);}
  #map{border-radius:0 0 var(--radius) var(--radius);height:500px;}
  /* móvil: ocupar todo el ancho y bajar desde arriba */

}/* End custom CSS */