/* Colores/medidas que ya combinan con tu modal */
:root{
  --ht-bg: #103444;           /* fondo del modal */
  --ht-line: #dfd1bd;         /* beige de líneas / thumb */
  --ht-head-offset: clamp(18px, 3.2vw, 28px); /* altura aprox. donde van las flechas */
}
html, body { height: 100%; margin: 0; }
#map { height: 100dvh; }           /* iOS estable */

@supports not (height: 100dvh) {
  #map { height: 100vh; }          /* fallback */
}
.custom-icon-wrapper img {
    width: 80px;
    height: 80px;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}
.custom-icon-wrapper:hover img {
    transform: scale(1.1);
    z-index: 1000;
}
.custom-icon-wrapper_number img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}
.custom-icon-wrapper_number:hover img {
    transform: scale(1.1);
    z-index: 1000;
}
.custom-label-marker {
    position: relative;
    display: inline-block;
    text-align: center;
}
.custom-label-marker .label {
    position: absolute;
    left: -60px;
    top: 20px;
    background: #457280;
    color: white;
    font-size: 14px;
    padding: 3px 10px;
    border-radius: 4px 0 0 4px;
    font-weight: bold;
    white-space: nowrap;
}
.custom-label-marker img {
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease;
    transform-origin: bottom center;
}
.custom-label-marker:hover img {
    transform: scale(1.1);
    z-index: 1000;
}
#reset-view-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    background: #123444;
    color: white;
    border: none;
    padding: 7px 6px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background 0.3s;
}
#reset-view-btn:hover {
    background: #405c68;
}
.custom-modal,
.modal-inner,
#modal-body,
.modal-title,
.modal-text {
    font-family: 'Inter', sans-serif;
}
.custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    /* Transición */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.custom-modal.show {
    opacity: 1;
    pointer-events: auto;
}
.modal-inner {
    background-color: #1b4251;
    width: 80vw;
    height: 80vh;
    border-radius: 12px;
    padding: 20px;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    /* Animación entrada */
    transform: scale(0.95);
    opacity: 0;
    transition: all 0.3s ease;
}
#modal-body {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
.custom-modal.show .modal-inner {
    transform: scale(1);
    opacity: 1;
}
.modal-close-wrap{
  position: sticky;
  top: 0;                  /* se “pega” al borde superior del scroll */
  z-index: 30;             /* por encima del contenido */
  display: flex;
  justify-content: flex-end;
  padding: 8px 22px 0 0;   /* separaciones como las que tenías */
  /* opcional: degradado para integrarse visualmente */
  
}
.modal-close {
    position: absolute;
    top: 17px;
    right: 22px;
    width: 45px;
    height: 45px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 10;
}
.modal-close img {
    width: 100%;
    height: auto;
    transition: transform 0.4s ease, box-shadow 0.3s ease;
    filter: grayscale(0); /* <-- escala de grises */
}
.modal-close:hover img {
    transform: scale(1.2);
    filter: grayscale(1); /* <-- vuelve a color */
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
}

/*formulario*/
.topics-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:12px;
  align-items:start;
}
@media (min-width: 992px){
  .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Ocultamos el radio pero sigue siendo accesible */
.topic-input{
  position:absolute !important;
  opacity:0;
  width:0; height:0;
}

/* Tarjeta clicable */
.topic-card{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  user-select:none;
  position:relative;
}
.topic-card img{
  width:42px; height:42px; object-fit:contain; flex:0 0 42px;
  /*border-radius:50%;*/
}
.topic-card span{
  font:600 14px/1.2 Inter,system-ui,sans-serif;
  color:#111827;
}

/* Hover */
.topic-card:hover{
  border-color:#93c5fd;
  background:#f3f8ff;
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(15,23,42,.08);
}

/* Seleccionado */
.topic-input:checked + .topic-card{
  border-color:#0ea5e9;
  background:rgba(255, 255, 255, 0.844);
  box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
}

/* Check visual en la esquina */
.topic-input:checked + .topic-card::after{
  content:"✓";
  position:absolute; top:8px; right:10px;
  font-weight:700; font-size:14px; color:#0ea5e9;
}

.topic-detail{
  display:flex; align-items:flex-start; gap:12px;
  margin-top: 19px;
  width: 50%;
  margin-left: 25%;
  padding:14px 16px;
  border:1.5px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 14px rgba(15,23,42,.06);
  transition:opacity .15s ease, transform .15s ease;
}
.topic-detail[hidden]{ display:none; }

.td-icon-wrap img{
  width:48px; height:48px; object-fit:contain; border-radius:50%;
}
.td-text h6{
  font: 700 16px/1.2 Inter, system-ui, sans-serif;
  color:#111827;
}
.td-text p{
  font: 400 14px/1.5 Inter, system-ui, sans-serif;
  color:#374151;
  margin-bottom:0;
}

.topics-grid .other-topic{
  grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
}

.other-row{
  display:flex; gap:8px; align-items:center;
}

.other-input{
  flex:1 1 auto;
  padding:10px 12px;
  border:1.5px solid #e5e7eb;
  border-radius:10px;
  font: 500 14px/1.2 Inter,system-ui,sans-serif;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.other-input:focus{
  border-color:#0ea5e9;
  box-shadow:0 0 0 3px rgba(14,165,233,.25);
}

.other-clear{
  flex:0 0 auto;
  height:38px; min-width:38px;
  border-radius:10px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
}
.other-clear:hover{ background:#f8fafc; }

.other-hint{ color:#f0ebe5; }

/* Responsivo: 2 columnas */
@media (max-width: 991.98px){
  .topics-grid .other-topic{ grid-column: 2 / 3; }
}
/* 1 columna */
@media (max-width: 640px){
  .topics-grid .other-topic{ grid-column: 1 / -1; }
}

/* el contenedor ya lo tienes */
.pm-examples-wrap[hidden]{ display:none; }

/* grid de 2 columnas para ejemplos */
.pm-examples{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Renglón de “Participación abierta” en todo el ancho */
.pm-open{
  display:flex; align-items:center; gap:10px;
}
.pm-open input{
  flex:1 1 auto; width:100%; min-width:0;  /* que no fije un mínimo grande */
}
.pm-excol, .pm-excol label{ overflow-wrap:anywhere; }
.pm-examples .pm-open{
  grid-column: 1 / -1;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:#fff;
  border:1.5px dashed #e5e7eb;
  border-radius:12px;
}

/* radio estilizado compartiendo look con tus checks */
.pm-examples .pm-open .pm-check{ display:flex; align-items:center; gap:8px; margin:0; }

/* === Contenedor único (tarjetón) para TODOS los ejemplos === */
.pm-examples-card{
    padding:16px;
    border-radius:12px;
    background:#fff;
}

/* grid interno de dos columnas */
.pm-exgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:24px;
  row-gap:12px;
}

/* columnas con filas apiladas */
.pm-excol{ min-width:0; }

/* --- fila de Participación abierta (misma línea que el resto) --- */
.pm-open-line{ display:flex; align-items:center; gap:10px; }
.pm-open-line .pm-check{ margin:0; }

#ejemploAbiertoInput{
  flex:1 1 auto;
  border:0;
  border-bottom:2px solid #e5e7eb;
  padding:6px 6px 4px;
  background:transparent;
  outline:none;
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#ejemploAbiertoInput:focus{
  border-bottom-color:#0ea5e9;
  box-shadow: inset 0 -2px 0 rgba(14,165,233,.35);
}
#ejemploAbiertoInput:disabled{ opacity:.6; }

/* MÓVIL: el input baja y ocupa todo el ancho */
@media (max-width: 640px){
  .pm-open-line{
    flex-wrap: wrap;               /* permite que el input baje */
    align-items: flex-start;
  }

  /* anula el nowrap inline del label en móvil */
  .pm-open-line .pm-check{
    white-space: normal !important;
  }

  /* el input debajo, 100% de ancho */
  #ejemploAbiertoInput{
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    margin-top: 6px;

    /* opcional: alinearlo con el texto tras el radio personalizado */
    /* ajusta 34px según el tamaño real de tu “bullet”/espaciado */
    margin-left: 34px;
  }

  /* evita el zoom de iOS al enfocar */
  input, textarea, select { font-size: 16px; }
}

/* responsivo */
@media (max-width:640px){
  .pm-exgrid{ grid-template-columns:1fr; }
}

/* Zona de arrastre */
.pm-drop{
  background:#0f3a48;               /* combina con tu modal */
  border:2px dashed #f0ebe5;
  border-radius:12px;
  min-height:120px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
  color:#f0ebe5;
}
.pm-drop:focus{ outline: none; box-shadow: 0 0 0 3px rgba(240,235,229,.25); }
.pm-drop.is-over{ background:#124454; border-color:#ffffff; }

.pm-drop-hint{
  text-align:center;
  font-weight:600;
}
.pm-drop-hint small{
  display:block; font-weight:400; opacity:.85; margin-top:4px;
}

/* Lista de archivos */
.pm-file-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px;
}
.pm-file-item{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(240,235,229,.25);
  border-radius:10px;
  padding:8px 10px;
}
.pm-file-ic{ width:22px; text-align:center; font-weight:700; }
.pm-file-name{ flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-file-size{ opacity:.8; font-size:.9rem; margin-left:8px; }
.pm-file-del{
  border:0; background:#c5593a; color:#fff;
  border-radius:8px; padding:4px 8px; cursor:pointer;
}
.pm-file-del:hover{ filter:brightness(1.1); }

/* Mensajes de error (si los usas) */
.pm-file-error{
  color:#ffd1c6; background:#5b1f1a; border:1px solid #c5593a;
  border-radius:8px; padding:6px 8px; margin-top:8px;
}


/*formulario*/

/* Cascarón dentro del modal */


/* Encabezado/logos */
#participaModal .pm-header{
    margin-bottom: 10px;
}
#participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
#participaModal .pm-logo{ 
    width: 40%;
    object-fit:contain; 
}
#participaModal .pm-logo_decoracion_left{ 
    width: 27%; 
    margin-left: 3%;
    object-fit:contain; 
}
#participaModal .pm-logo_decoracion_right{ 
    width: 27%; 
    margin-right: 3%;
    object-fit:contain; 
}

#participaModal .pm-title{ 
  font-weight:800; font-size:20px; letter-spacing:.2px; 
  margin:.3rem 0 .6rem; color:#efe7d6;
}

/* Etiquetas de columnas arriba de tu grid */
#participaModal .pm-columns-labels{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  color:#f1ede8; opacity:1; font-size:.95rem; margin-bottom:.35rem;
  font-style: italic;
}
@media (max-width:1100px){ #participaModal .pm-columns-labels{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){  #participaModal .pm-columns-labels{ grid-template-columns:1fr; } }

/* --- NO tocamos .topics-grid ni .topic-card --- */

/* Detalle seleccionado para que combine */
#participaModal .topic-detail{
  background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
  width:auto; margin:12px 0 6px; border-radius:12px;
}
#participaModal .topic-detail .td-text h6{ color:#efe7d6; }
#participaModal .topic-detail .td-text p{ color:#dbe5e5; }

/* divisor con “diamante” */
#participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
#participaModal .pm-divider::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:2px solid #bfa990; opacity:.85;
}
#participaModal .pm-diamond{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
  width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
}

/* Subtítulo */
#participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

/* Ejemplos (dos columnas) */
#participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
@media (max-width:900px){ #participaModal .pm-examples{ grid-template-columns:1fr; } }
/*#participaModal .pm-excol{
  background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
}*/
#participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
#participaModal .pm-check input{ display:none; }
#participaModal .pm-check span{
  width:14px; height:14px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
}
#participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

/* Form inferior */
#participaModal .pm-formgrid{
  display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
}
@media (max-width:900px){ #participaModal .pm-formgrid{ grid-template-columns:1fr; } }
#participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
#participaModal .form-control,
#participaModal .form-select{
  background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
}

/* Comentario + drop evidencia */
#participaModal .pm-comment-evidence{
  display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
}
@media (max-width:900px){ #participaModal .pm-comment-evidence{ grid-template-columns:1fr; } }
#participaModal .pm-drop{
  display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
}
#participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
#participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

/* Acciones */
#participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
#participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
#participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
#participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
#participaModal .pm-btn:hover{ filter:brightness(.97); }

/* --- panel de detalle dentro del grid --- */
.topics-grid .topic-detail.in-grid{
  /* ocupa 3 celdas en desktop (col 2 a 4) */
  grid-column: 2 / 5;

  /* fila (icono a la izquierda, texto a la derecha) */
  display: flex;                 /* <— en vez de block */
  align-items: flex-start;
  gap: 16px;

  padding: 14px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.06);
}

/* contenedor del icono a la izquierda */
.topics-grid .topic-detail.in-grid .td-icon-wrap{
  flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
  display: flex;
  align-items: center;
  justify-content: center;
}

.topics-grid .topic-detail.in-grid .td-icon-wrap img{
  width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
  object-fit: contain;
  border-radius: 50%;
}

/* el texto ocupa el espacio restante */
.topics-grid .topic-detail.in-grid .td-text{
  flex: 1 1 auto;
}

/* responsivo: cuando el grid sea de 2 columnas */
@media (max-width: 991.98px){
  .topics-grid .topic-detail.in-grid{
    grid-column: 2 / 3;          /* a la derecha de “Otro” */
  }
}

/* en 1 columna, que vaya abajo ocupando ancho completo */
@media (max-width: 640px){
  .topics-grid .topic-detail.in-grid{
    grid-column: 1 / -1;
  }
}



#switchBaseMap {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
    padding: 2px;
    transition: transform 0.2s;
}
#switchBaseMap:hover {
    transform: scale(1.1);
}
#switchBaseMap img {
    width: 65px;
    height: 65px;
    border-radius: 8px;
}

/* Botón flotante de ayuda */
.help-fab{
  position: fixed;
  right: 20px;
  bottom: 20px;               /* súbelo/bájalo según tu barra inferior */
  width: 64px; height: 64px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
  box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
  z-index: 9998;             /* por encima de la barra de localidades */
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
.help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

/* pulso suave para invitar clic */
.help-fab::before{
  content:"";
  position:absolute; inset:-8px;
  border:2px solid #f0ebe5; border-radius:999px;
  opacity:.75; animation:fabPulse 2.2s ease-out infinite;
}
@keyframes fabPulse{
  0%{ transform:scale(1); opacity:.6 }
  70%{ transform:scale(1.45); opacity:0 }
  100%{ opacity:0 }
}

/* ocúltalo cuando el modal esté abierto */
.help-fab.is-hidden{ opacity:0; pointer-events:none; }

.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.btn-streetview {
    background: linear-gradient(135deg, #00bcd4, #3f51b5);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    padding: 14px 26px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}
.btn-streetview:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #3f51b5, #00bcd4);
}

/*Localidades*/

/* Barra inferior tipo "Explorar" */
.loc-bar{
  position:absolute; left:12px; right:12px; bottom:12px;
  margin-left: 7.5%;
  width: 85%;
  display:flex; align-items:center; gap:8px;
  padding:10px; border-radius:12px;
  background: rgb(18, 51, 67, .92);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  z-index: 1000;          /* sobre el mapa/controles */
  color:#fff;
}

/* Contenedor scroll horizontal */
.loc-scroll{
  display:flex; gap:8px; align-items:center;
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  scroll-behavior:smooth;
  width:100%;
}
.loc-scroll::-webkit-scrollbar{ height:6px; }
.loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

/* Botones tipo “chip” */
/*.loc-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#70838d; color:#123343; border:0;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  font: 600 13px/1 Inter,system-ui,sans-serif;
}
.loc-chip:hover{ filter:brightness(.95); }
.loc-chip:active{ transform:translateY(1px); }*/

.loc-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#70838d; color:#123343; border:0;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  font:600 13px/1 Inter,system-ui,sans-serif;
}
.loc-chip:hover{ filter:brightness(.95); }
.loc-chip:active{ transform:translateY(1px); }

.chip-img{
  width:38px; height:38px; border-radius:999px;
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
}
.chip-img img{
  width:32px; height:32px; object-fit:contain; border-radius:50%;
}
.chip-label{ white-space:nowrap; }

/* Flechas de navegación */
.loc-nav{
  min-width:34px; height:34px; border:0;
  border-radius:8px; cursor:pointer;
  background:#70838d; color:#123343; font-size:18px; line-height:34px;
}
.loc-nav:hover{ filter:brightness(1.1); }

/* Popup estilo “burbuja” */
.bb-popup .leaflet-popup-content-wrapper{
  background:#f6f7f7;            /* gris cálido */
  border:1px solid #e1e4e6;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  padding:0;                      /* quitamos padding del wrapper */
}
.bb-popup .leaflet-popup-content{
  margin:12px 14px;               /* controlamos padding interno aquí */
}
.bb-popup .leaflet-popup-tip{
  background:#f6f7f7;
  border:1px solid #e1e4e6;
  box-shadow:none;
}

.bb-pop{ text-align:center; font-family:Inter,system-ui; }
.bb-title{
  font-size:14px; line-height:1.35; color:#1f2937;
  margin-bottom:8px;
}
.bb-title b{ font-weight:800; }    /* “¡Perfecto!” más fuerte */
.bb-sub{
  font-size:13px; color:#6b7280; font-style:italic;
  margin-bottom:10px;
}
.bb-btn{
  display:inline-block;
  padding:6px 12px;
  background:#b85a33;             /* tono cobrizo del ejemplo */
  color:#fff; border:0; border-radius:6px;
  cursor:pointer;
}
.bb-btn:hover{ filter:brightness(.95); }
.bb-btn:active{ transform:translateY(1px); }

/* --- Efecto pulse por escala --- */
.bb-btn.breathe{
  animation: bbBreathe 1.6s ease-in-out infinite;
}
@keyframes bbBreathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%    { transform: translateY(0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce){
  .bb-btn.breathe{ animation: none; }
}

/* --- Efecto pulse en anillo --- */
.bb-btn.pulse{
  position: relative;
  overflow: visible;
}
.bb-btn.pulse::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:100%; height:100%;
  transform:translate(-50%,-50%) scale(1);
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(184,90,51,.55); /* color del botón */
  animation: bbPulseRing 1.8s ease-out infinite;
  pointer-events: none; /* no bloquea el clic */
}
@keyframes bbPulseRing{
  0%   { box-shadow: 0 0 0 0   rgba(184,90,51,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(184,90,51,0); }
  100% { box-shadow: 0 0 0 0   rgba(184,90,51,0); }
}

/* Respeta preferencias del usuario */
@media (prefers-reduced-motion: reduce){
  .bb-btn.pulse::after{ animation: none; }
}

/*Banner inicio*/

/* ===== Overlay del modal ===== */
.custom-modal_bienvenida{
  position: fixed; inset: 0;
  display: none;                /* usa .show para abrir */
  align-items: center; justify-content: center;
  background: rgba(17,24,39,.55);       /* oscurece mapa */
  backdrop-filter: blur(2px);
  z-index: 9999;
}
.custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

@keyframes wm-fade{
  from{ opacity:.0; transform: scale(.98); }
  to  { opacity:1;  transform: scale(1); }
}

/* ===== Caja interna ===== */
.modal-inner_bienvenida{
  position: relative;
  /*width: min(980px, calc(100% - 32px));*/
  width: 60%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  background: #103444; /* teal */
  color: #f8fafc;
  padding: 28px 28px 40px;   /* padding bottom alto por montañas */
  isolation: isolate;         /* asegura superposición correcta */
}

/* ===== Contenido ===== */
.welcome-modal{ text-align: center; position: relative; z-index: 2; }

.welcome-title{
  font: 800 55px/1.1 Inter, system-ui, sans-serif;
  letter-spacing: .5px;
  margin: 8px 0 14px;
  text-transform: uppercase;
  color: #fde9d3 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.15);
  margin-bottom: 30px;
}

.welcome-text{
  font: 400 26px/1.3 Inter, system-ui, sans-serif;
  color: #e6edf2;
  width: 75%;
  margin: 0 auto 14px;
  margin-bottom: 30px;
}

.welcome-subtitle{
  font: 800 30px/1.25 Inter, system-ui, sans-serif;
  letter-spacing: .4px; text-transform: uppercase;
  color: #fde9d3 !important;
  margin: 6px 0 18px;
  margin-bottom: 40px;
}

#modal-body_welcome {
    width: 100%;
    margin-top: 60px;
}

/* CTA cobriza */
.welcome-cta{
  display: inline-block;
  width: 45%;
  padding: 12px 18px;
  border: 0; border-radius: 10px;
  background: #b85a33; color: #fff;
  font: 600 36px/1 Inter, system-ui, sans-serif;
  letter-spacing: .4px; text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(184,90,51,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  font-style: italic;
}
.welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
.welcome-cta:active{ transform: translateY(0); }

@keyframes wlcBreathe{
  0%,100%{ transform: translateY(0) scale(1); }
  50%    { transform: translateY(0) scale(1.03); }
}
.welcome-cta.breathe{
  animation: wlcBreathe 1.9s ease-in-out infinite;
}

/* Línea + rombo (imagen) */
.welcome-divider{
  display: block;
  width: 45%;
  /*max-width: 920px;*/
  margin: 18px auto 0;
  pointer-events: none;
  user-select: none;
  margin-top: 30px;
}

/* Montañas decorativas al fondo */
.welcome-mountains{
  position: absolute;
  inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
  width: 100%; height: auto;
  z-index: 1;
  pointer-events: none; user-select: none;
  opacity: .95;
}

/* Responsive */
@media (max-width: 640px){
  .modal-inner{ padding: 22px 16px 130px; border-radius: 14px; }
  .welcome-cta{ font-size: 13px; }
}

.map-tool-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1001;
    background: #123444;
    color: white;
    border: none;
    padding: 7px 6px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background 0.3s;
}
#toggle-usos-btn{ top: 53px; }       
.map-tool-btn:hover{ filter: brightness(.95); }
.map-tool-btn.active{
  background: #405c68;   /* color distinto cuando está en modo línea */
}

.map-toggle-btn{
  position: absolute;
  top: 10px;
    right: 10px;
    z-index: 1001;
    background: #123444;
    color: white;
    border: none;
    padding: 7px 6px;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: background 0.3s;
}
#toggle-draw-btn{ top: 94px; }       
.map-toggle-btn:hover{ filter: brightness(.95); }
.map-toggle-btn.active{
  background: #405c68;   /* color distinto cuando está en modo línea */
}

/* botón limpiar debajo */
.map-clear-btn{
  top: 136px;
  background: #b45534;            /* rojo suave */
}
.map-clear-btn:hover{ filter: brightness(.90); background: #b45534; }

/* Botón sobre el último vértice */
.finish-vertex-icon{ background: transparent; }
.finish-vertex-btn{
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #10b981;           /* verde */
  color:#fff; font:700 16px/1 Inter, system-ui, sans-serif;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
  cursor:pointer; user-select:none;
}
.finish-vertex-btn:hover{ filter: brightness(.96); }
.finish-vertex-btn:active{ transform: translateY(1px); }


/*Barra lateral*/
/* Firefox */
.custom-modal .modal-inner{
  /* grosor y colores del scroll */
  scrollbar-width: thin;                         /* auto | thin | none */
  scrollbar-color: #f0ebe5 #1b4251;              /* thumb  track */
}

/* Chromium/Edge/Safari (motor webkit) */
.custom-modal .modal-inner::-webkit-scrollbar{
  width: 12px;                                   /* ancho vertical */
  height: 12px;                                  /* alto horizontal */
}

.custom-modal .modal-inner::-webkit-scrollbar-track{
  background: #1b4251;                           /* se funde con el modal */
  border-radius: 10px;
}

.custom-modal .modal-inner::-webkit-scrollbar-thumb{
  background-color: #f0ebe5;                     /* thumb claro */
  border-radius: 10px;
  border: 3px solid #1b4251;                     /* “gap” visual para integrarlo */
}

.custom-modal .modal-inner::-webkit-scrollbar-thumb:hover{
  background-color: #e7dfd3;                     /* sutil hover */
}

.custom-modal .modal-inner::-webkit-scrollbar-corner{
  background: #1b4251;                           /* esquina en scrolls dobles */
}

/* (Opcional) Botones del scrollbar en WebKit — no todos los SO los muestran */
.custom-modal .modal-inner::-webkit-scrollbar-button{
  background: #1b4251;
  border: 1px solid #f0ebe5;
  border-radius: 8px;
}

/* Un poquito más delgado en pantallas chicas */
@media (max-width: 640px){
  .custom-modal .modal-inner::-webkit-scrollbar{
        width: 10px;
        height: 10px;
      }
}
    /*Fin barra lateral*/

/* Habilita drag-look */
#locScroll {
  cursor: grab;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth; /* para flechas; el JS lo desactiva durante drag */
}
#locScroll.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto; /* movimientos instantáneos mientras arrastras */
}

/* ===== Tutorial modal ===== */
.howto-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.howto-modal.show{ opacity: 1; pointer-events: auto; }

.howto-inner{
  position: relative;
  width: 60%;
  max-height: 86vh;
  overflow: auto;
  background: #103444; /* tono acorde a tu #1b4251 */
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  padding: clamp(16px, 3vw, 28px);
  scrollbar-color: var(--ht-line) var(--ht-bg);
  scrollbar-width: thin;
  /* suavidad iOS */
  -webkit-overflow-scrolling: touch;
}
/* WebKit */
.howto-inner::-webkit-scrollbar{
  width: 12px;
}
.howto-inner::-webkit-scrollbar-track{
  background: var(--ht-bg);
  border-radius: 10px;
}
.howto-inner::-webkit-scrollbar-thumb{
  background: var(--ht-line);
  border-radius: 10px;
  border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
}
.howto-inner::-webkit-scrollbar-thumb:hover{
  background: #e8dcc8;             /* un poco más claro al hover */
}

/* Botón cerrar fijo arriba a la derecha del contenido */
.howto-close{
  position: sticky;
  top: 8px; float: right;
  width: 44px; height: 44px;
  background: transparent; border: 0; cursor: pointer;
  margin-left: auto; z-index: 2;
}
.howto-close img{ width: 100%; height: auto; }

/* Encabezado */
.howto-head{
  position: relative;
  text-align: center;
  color: #F0EBE5;
  margin: 6px 0 18px;
}
.howto-head h2{
  font: 800 40px/1.15 "Inter", system-ui, sans-serif;
  letter-spacing: .5px;
  color: #fde9d3;
}
/* Líneas junto a cada flecha del header */
.howto-head::before,
.howto-head::after{
  content:"";
  position:absolute;
  height:3px;
  background: var(--ht-line);
  opacity:.9;
  border-radius: 3px;
  /* La línea se dibuja a la misma altura visual que las flechas */
  top: var(--ht-head-offset);
}

.howto-deco{
  position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
  user-select: none; pointer-events: none;
}
.howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
.howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

/* Tarjetas de pasos */
.howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

.how-step{
  position: relative;
  display: grid;
  grid-template-columns: 84px 1fr 120px;
  align-items: center;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: clamp(12px, 2.5vw, 18px);
  color: #F0EBE5;
}
.how-step .step-num img{
  width: clamp(52px, 7vw, 72px);
  height: auto;
  display: block;
}
.how-step .step-content h3{
  font: 800 25px/1.2 "Inter", sans-serif;
  margin: 0 0 6px;
  color: #fde9d3;
}
.how-step .step-content p{
  margin: 0; opacity: .92;
  font: 500 18px/1.45 "Inter", sans-serif;
  color: #ffffff;
}
.how-step .step-graphic img{
  width: clamp(70px, 10vw, 110px);
  height: auto; display: block; margin-left: auto;
  opacity: .9;
}

/* Responsive: en móviles la imagen baja para que no estorbe */
@media (max-width: 600px){
  .how-step{
    grid-template-columns: 72px 1fr;
  }
  .how-step .step-graphic{
    grid-column: 1 / -1;
    display: flex; justify-content: center; margin-top: 10px;
  }
  .how-step .step-graphic img{ margin-left: 0; width: clamp(80px, 45vw, 150px); }
}


@media (min-width: 1250px) and (max-width: 1350px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 80%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 40px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: clamp(52px, 7vw, 72px);
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 25px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 18px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: clamp(70px, 10vw, 110px);
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 80%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 55px/1.1 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 8px 0 14px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 26px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 30px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 60px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 30px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 8px 22px 0 0;   /* separaciones como las que tenías */
      /* opcional: degradado para integrarse visualmente */
    
    }
    .modal-close {
        position: absolute;
        top: 17px;
        right: 7px;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 190px;
      right:20px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:38px; height:38px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 1100px) and (max-width: 1249px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 80%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 40px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: clamp(52px, 7vw, 72px);
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 25px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 18px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: clamp(70px, 10vw, 110px);
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 40%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 27%; 
        margin-left: 3%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 27%; 
        margin-right: 3%;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:13px; margin-bottom:.35rem;
      font-style: italic;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 2 / 5;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 80%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 48px/1.1 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 8px 0 14px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 24px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 28px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 60px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 28px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 190px;
      right:20px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:38px; height:38px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 1000px) and (max-width: 1099px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 40px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 62px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 23px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 17px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: 90px;
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 40%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 27%; 
        margin-left: 3%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 27%; 
        margin-right: 3%;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 2 / 5;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 48px/1.1 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 8px 0 14px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 24px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 28px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 60px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 28px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 190px;
      right:20px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:38px; height:38px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 900px) and (max-width: 999px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 35px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 62px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 23px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 17px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: 90px;
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 40%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 27%; 
        margin-left: 3%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 27%; 
        margin-right: 3%;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 45px/1.1 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 8px 0 14px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 23px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 27px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 60px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 26px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 190px;
      right:20px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 800px) and (max-width: 899px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 35px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 60px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 22px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 15px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: 85px;
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 40%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 27%; 
        margin-left: 3%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 27%; 
        margin-right: 3%;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 40px/1.1 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 8px 0 14px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 20px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 25px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 60px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 23px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 180px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 700px) and (max-width: 799px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 30px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    grid-template-columns: 84px 1fr 120px;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 58px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 20px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 14px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    width: 80px;
    height: auto; display: block; margin-left: auto;
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 40%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 27%; 
        margin-left: 3%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 27%; 
        margin-right: 3%;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:2fr 1.2fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 37px/1.05 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 1px 0 1px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 19px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 75%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 24px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 30px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 45%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 20px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 45%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 180px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 600px) and (max-width: 699px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .how-step .step-graphic{
    grid-column: 1 / -1;
    display: flex; justify-content: center; margin-top: 10px;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 30px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    /*grid-template-columns: 84px 1fr 120px;*/
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 58px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 25px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 18px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    /*width: 80px;
    margin-left: auto;*/
    margin-left: 0; 
    width: 130px;
    height: auto; 
    display: block; 
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 80%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 10%; 
        margin-left: 0px;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 10%; 
        margin-right: 0px;
        object-fit:contain; 
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:1.8fr 1.4fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    @media (max-width:900px){ #participaModal .pm-formgrid{ grid-template-columns:1fr; } }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    @media (max-width:900px){ #participaModal .pm-comment-evidence{ grid-template-columns:1fr; } }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 45px/1.05 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 1px 0 1px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 19px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 85%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 20px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 30px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 55%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 20px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 55%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 180px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 500px) and (max-width: 599px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .how-step .step-graphic{
    grid-column: 1 / -1;
    display: flex; justify-content: center; margin-top: 10px;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 28px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    /*grid-template-columns: 84px 1fr 120px;*/
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 58px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 25px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 18px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    /*width: 80px;
    margin-left: auto;*/
    margin-left: 0; 
    width: 130px;
    height: auto; 
    display: block; 
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 80%;
        margin-left: 10%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 10%; 
        margin-left: 0px;
        object-fit:contain; 
        display: none;
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 10%; 
        margin-right: 0px;
        object-fit:contain; 
        display: none;
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:1.8fr 1.4fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    @media (max-width:900px){ #participaModal .pm-formgrid{ grid-template-columns:1fr; } }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    @media (max-width:900px){ #participaModal .pm-comment-evidence{ grid-template-columns:1fr; } }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 45px/1.05 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 1px 0 1px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 19px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 85%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 20px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 30px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 65%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 20px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 65%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 180px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:65px; height:65px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 54px; height: 54px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 400px) and (max-width: 499px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .how-step .step-graphic{
    grid-column: 1 / -1;
    display: flex; justify-content: center; margin-top: 10px;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 28px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    /*grid-template-columns: 84px 1fr 120px;*/
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 53px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 23px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 17px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    /*width: 80px;
    margin-left: auto;*/
    margin-left: 0; 
    width: 110px;
    height: auto; 
    display: block; 
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 80%;
        margin-left: 10%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 10%; 
        margin-left: 0px;
        object-fit:contain; 
        display: none;
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 10%; 
        margin-right: 0px;
        object-fit:contain; 
        display: none;
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:1.8fr 1.4fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    @media (max-width:900px){ #participaModal .pm-formgrid{ grid-template-columns:1fr; } }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    @media (max-width:900px){ #participaModal .pm-comment-evidence{ grid-template-columns:1fr; } }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 37px/1.05 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 1px 0 1px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 18px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 95%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 18px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 30px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 75%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 18px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 75%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 170px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:55px; height:55px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 44px; height: 44px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:8px 6px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

@media (min-width: 0px) and (max-width: 399px){
  /* ===== Tutorial modal ===== */
  .howto-modal{
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .how-step .step-graphic{
    grid-column: 1 / -1;
    display: flex; justify-content: center; margin-top: 10px;
  }
  .howto-modal.show{ opacity: 1; pointer-events: auto; }

  .howto-inner{
    position: relative;
    width: 90%;
    max-height: 86vh;
    overflow: auto;
    background: #103444; /* tono acorde a tu #1b4251 */
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    padding: clamp(16px, 3vw, 28px);
    scrollbar-color: var(--ht-line) var(--ht-bg);
    scrollbar-width: thin;
    /* suavidad iOS */
    -webkit-overflow-scrolling: touch;
  }
  /* WebKit */
  .howto-inner::-webkit-scrollbar{
    width: 12px;
  }
  .howto-inner::-webkit-scrollbar-track{
    background: var(--ht-bg);
    border-radius: 10px;
  }
  .howto-inner::-webkit-scrollbar-thumb{
    background: var(--ht-line);
    border-radius: 10px;
    border: 2px solid var(--ht-bg);   /* pequeño borde para que “flote” en el track */
  }
  .howto-inner::-webkit-scrollbar-thumb:hover{
    background: #e8dcc8;             /* un poco más claro al hover */
  }

  /* Botón cerrar fijo arriba a la derecha del contenido */
  .howto-close{
    position: sticky;
    top: 8px; float: right;
    width: 44px; height: 44px;
    background: transparent; border: 0; cursor: pointer;
    margin-left: auto; z-index: 2;
  }
  .howto-close img{ width: 100%; height: auto; }

  /* Encabezado */
  .howto-head{
    position: relative;
    text-align: center;
    color: #F0EBE5;
    margin: 6px 0 18px;
  }
  .howto-head h2{
    font: 800 28px/1.15 "Inter", system-ui, sans-serif;
    letter-spacing: .5px;
    color: #fde9d3;
  }
  /* Líneas junto a cada flecha del header */
  .howto-head::before,
  .howto-head::after{
    content:"";
    position:absolute;
    height:3px;
    background: var(--ht-line);
    opacity:.9;
    border-radius: 3px;
    /* La línea se dibuja a la misma altura visual que las flechas */
    top: var(--ht-head-offset);
  }

  .howto-deco{
    position: absolute; top: 0; height: clamp(22px, 3vw, 28px);
    user-select: none; pointer-events: none;
  }
  .howto-deco.left{ left: clamp(8px, 2vw, 22px); transform: translateY(6px); }
  .howto-deco.right{ right: clamp(8px, 2vw, 22px); transform: translateY(6px); }

  /* Tarjetas de pasos */
  .howto-steps{ display: grid; gap: 14px; width: 90%; margin-left: 5%; }

  .how-step{
    position: relative;
    display: grid;
    /*grid-template-columns: 84px 1fr 120px;*/
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    padding: clamp(12px, 2.5vw, 18px);
    color: #F0EBE5;
  }
  .how-step .step-num img{
    width: 53px;
    height: auto;
    display: block;
  }
  .how-step .step-content h3{
    font: 800 23px/1.2 "Inter", sans-serif;
    margin: 0 0 6px;
    color: #fde9d3;
  }
  .how-step .step-content p{
    margin: 0; opacity: .92;
    font: 500 17px/1.45 "Inter", sans-serif;
    color: #ffffff;
  }
  .how-step .step-graphic img{
    /*width: 80px;
    margin-left: auto;*/
    margin-left: 0; 
    width: 110px;
    height: auto; 
    display: block; 
    opacity: .9;
  }
    .topics-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap:12px;
      align-items:start;
    }
    @media (min-width: 992px){
      .topics-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
    }
    
    /* Ocultamos el radio pero sigue siendo accesible */
    .topic-input{
      position:absolute !important;
      opacity:0;
      width:0; height:0;
    }
    
    /* Tarjeta clicable */
    .topic-card{
      display:flex; align-items:center; gap:12px;
      padding:12px 14px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      cursor:pointer;
      transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
      user-select:none;
      position:relative;
    }
    .topic-card img{
      width:37px; height:37px; object-fit:contain; flex:0 0 37px;
      /*border-radius:50%;*/
    }
    .topic-card span{
      font:600 13px/1.2 Inter,system-ui,sans-serif;
      color:#111827;
    }
    
    /* Hover */
    .topic-card:hover{
      border-color:#93c5fd;
      background:#f3f8ff;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(15,23,42,.08);
    }
    
    /* Seleccionado */
    .topic-input:checked + .topic-card{
      border-color:#0ea5e9;
      background:rgba(255, 255, 255, 0.844);
      box-shadow:0 0 0 3px rgba(14,165,233,.25) inset;
    }
    
    /* Check visual en la esquina */
    .topic-input:checked + .topic-card::after{
      content:"✓";
      position:absolute; top:8px; right:10px;
      font-weight:700; font-size:14px; color:#0ea5e9;
    }
    
    .topic-detail{
      display:flex; align-items:flex-start; gap:12px;
      margin-top: 19px;
      width: 50%;
      margin-left: 25%;
      padding:14px 16px;
      border:1.5px solid #e5e7eb;
      border-radius:12px;
      background:#fff;
      box-shadow:0 4px 14px rgba(15,23,42,.06);
      transition:opacity .15s ease, transform .15s ease;
    }
    .topic-detail[hidden]{ display:none; }
    
    .td-icon-wrap img{
      width:48px; height:48px; object-fit:contain; border-radius:50%;
    }
    .td-text h6{
      font: 700 16px/1.2 Inter, system-ui, sans-serif;
      color:#111827;
    }
    .td-text p{
      font: 400 14px/1.5 Inter, system-ui, sans-serif;
      color:#374151;
      margin-bottom:0;
    }
    
    .topics-grid .other-topic{
      grid-column: 2 / 5;  /* ocupa 3 celdas (col 2,3,4) en desktop de 4 columnas */
    }
    
    .other-row{
      display:flex; gap:8px; align-items:center;
    }
    
    .other-input{
      flex:1 1 auto;
      padding:10px 12px;
      border:1.5px solid #e5e7eb;
      border-radius:10px;
      font: 500 14px/1.2 Inter,system-ui,sans-serif;
      outline:none;
      transition:border-color .15s ease, box-shadow .15s ease;
    }
    .other-input:focus{
      border-color:#0ea5e9;
      box-shadow:0 0 0 3px rgba(14,165,233,.25);
    }
    
    .other-clear{
      flex:0 0 auto;
      height:38px; min-width:38px;
      border-radius:10px;
      border:1px solid #e5e7eb;
      background:#fff;
      cursor:pointer;
    }
    .other-clear:hover{ background:#f8fafc; }
    
    .other-hint{ color:#f0ebe5; }

    #participaModal .pm-header{
    margin-bottom: 10px;
    }
    #participaModal .pm-logos{ display:flex; gap:16px; align-items:center; margin-bottom:6px; }
    #participaModal .pm-logo{ 
        width: 80%;
        margin-left: 10%;
        object-fit:contain; 
    }
    #participaModal .pm-logo_decoracion_left{ 
        width: 10%; 
        margin-left: 0px;
        object-fit:contain; 
        display: none;
    }
    #participaModal .pm-logo_decoracion_right{ 
        width: 10%; 
        margin-right: 0px;
        object-fit:contain; 
        display: none;
    }

    #participaModal .pm-title{ 
      font-weight:800; font-size:20px; letter-spacing:.2px; 
      margin:.3rem 0 .6rem; color:#efe7d6;
    }

    /* Etiquetas de columnas arriba de tu grid */
    #participaModal .pm-columns-labels{
      display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
      color:#f1ede8; opacity:1; font-size:11px; margin-bottom:.35rem;
      font-style: italic;
      display: none;
    }

    /* --- NO tocamos .topics-grid ni .topic-card --- */

    /* Detalle seleccionado para que combine */
    #participaModal .topic-detail{
      background:#2f5967; border:1px solid #ffffff; color:#e8efe9;
      width:auto; margin:12px 0 6px; border-radius:12px;
    }
    #participaModal .topic-detail .td-text h6{ color:#efe7d6; }
    #participaModal .topic-detail .td-text p{ color:#dbe5e5; }

    /* divisor con “diamante” */
    #participaModal .pm-divider{ position:relative; height:22px; margin:.6rem 0 .6rem; }
    #participaModal .pm-divider::before{
      content:""; position:absolute; left:0; right:0; top:50%;
      border-top:2px solid #bfa990; opacity:.85;
    }
    #participaModal .pm-diamond{
      position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(45deg);
      width:18px; height:18px; background:#c6663e; border:6px solid #eadfd1; border-radius:6px;
    }

    /* Subtítulo */
    #participaModal .pm-subtitle{ margin:.25rem 0 .35rem; font-weight:800; color:#efe7d6; }

    /* Ejemplos (dos columnas) */
    #participaModal .pm-examples{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; }
    /*#participaModal .pm-excol{
      background:#ffffff; border:1px solid #1b5f6b; border-radius:12px; padding:10px 12px;
    }*/
    #participaModal .pm-check{ display:flex; gap:10px; margin:6px 0; color:#656565; }
    #participaModal .pm-check input{ display:none; }
    #participaModal .pm-check span{
      width:12px; height:12px; border-radius:4px; border:2px solid #e9dfd0; margin-top:2px;
    }
    #participaModal .pm-check input:checked + span{ background:#64c2d1; border-color:#64c2d1; }

    /* Form inferior */
    #participaModal .pm-formgrid{
      display:grid; grid-template-columns:1.8fr 1.4fr .8fr; gap:14px; margin:.7rem 0 .25rem;
    }
    @media (max-width:900px){ #participaModal .pm-formgrid{ grid-template-columns:1fr; } }
    #participaModal .pm-label{ display:block; margin-bottom:6px; color:#e7e0d6; font-weight:700; }
    #participaModal .form-control,
    #participaModal .form-select{
      background:#ffffff !important; border:1px solid #1c5562 !important; color:#656565 !important;
    }

    /* Comentario + drop evidencia */
    #participaModal .pm-comment-evidence{
      display:grid; grid-template-columns:2fr 1fr; gap:14px; margin:.25rem 0 .7rem;
    }
    @media (max-width:900px){ #participaModal .pm-comment-evidence{ grid-template-columns:1fr; } }
    #participaModal .pm-drop{
      display:block; background:#0c2f39; border:2px dashed #2c6b78; border-radius:12px; cursor:pointer;
    }
    #participaModal .pm-drop-inner{ padding:18px 12px; text-align:center; color:#cfd7d7; }
    #participaModal .pm-drop-inner img{ height:28px; margin-bottom:6px; opacity:.9; }

    /* Acciones */
    #participaModal .pm-actions{ display:flex; gap:10px; justify-content:flex-end; }
    #participaModal .pm-btn{ border:0; border-radius:10px; padding:10px 16px; font-weight:800; letter-spacing:.3px; cursor:pointer; }
    #participaModal .pm-btn-primary{ background:#c6663e; color:#fff; }
    #participaModal .pm-btn-light{ background:#dcd7cf; color:#2b2b2b; }
    #participaModal .pm-btn:hover{ filter:brightness(.97); }

    /* --- panel de detalle dentro del grid --- */
    .topics-grid .topic-detail.in-grid{
      /* ocupa 3 celdas en desktop (col 2 a 4) */
      grid-column: 1 / 3;

      /* fila (icono a la izquierda, texto a la derecha) */
      display: flex;                 /* <— en vez de block */
      align-items: flex-start;
      gap: 16px;

      padding: 14px 16px;
      border: 1.5px solid #e5e7eb;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 14px rgba(15,23,42,.06);
    }

    /* contenedor del icono a la izquierda */
    .topics-grid .topic-detail.in-grid .td-icon-wrap{
      flex: 0 0 56px;                /* ancho fijo para mantenerlo a la izquierda */
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .topics-grid .topic-detail.in-grid .td-icon-wrap img{
      width: 56px; height: 56px;     /* un poco más grande que antes, ajusta si quieres */
      object-fit: contain;
      border-radius: 50%;
    }

    /* el texto ocupa el espacio restante */
    .topics-grid .topic-detail.in-grid .td-text{
      flex: 1 1 auto;
    }
    .custom-modal_bienvenida{
      position: fixed; inset: 0;
      display: none;                /* usa .show para abrir */
      align-items: center; justify-content: center;
      background: rgba(17,24,39,.55);       /* oscurece mapa */
      backdrop-filter: blur(2px);
      z-index: 9999;
    }
    .custom-modal_bienvenida.show{ display:flex; animation: wm-fade .18s ease-out; }

    /* ===== Caja interna ===== */
    .modal-inner_bienvenida{
      position: relative;
      /*width: min(980px, calc(100% - 32px));*/
      width: 90%;
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.35);
      background: #103444; /* teal */
      color: #f8fafc;
      padding: 28px 28px 40px;   /* padding bottom alto por montañas */
      isolation: isolate;         /* asegura superposición correcta */
    }

    /* ===== Contenido ===== */
    .welcome-modal{ text-align: center; position: relative; z-index: 2; }

    .welcome-title{
      font: 800 30px/1.05 Inter, system-ui, sans-serif;
      letter-spacing: .5px;
      margin: 1px 0 1px;
      text-transform: uppercase;
      color: #fde9d3 !important;
      text-shadow: 0 2px 0 rgba(0,0,0,.15);
      margin-bottom: 30px;
    }

    .welcome-text{
      font: 400 15px/1.3 Inter, system-ui, sans-serif;
      color: #e6edf2;
      width: 95%;
      margin: 0 auto 14px;
      margin-bottom: 30px;
    }

    .welcome-subtitle{
      font: 800 15px/1.25 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      color: #fde9d3 !important;
      margin: 6px 0 18px;
      margin-bottom: 40px;
    }

    #modal-body_welcome {
        width: 100%;
        margin-top: 30px;
    }

    /* CTA cobriza */
    .welcome-cta{
      display: inline-block;
      width: 75%;
      padding: 12px 18px;
      border: 0; border-radius: 10px;
      background: #b85a33; color: #fff;
      font: 600 13px/1 Inter, system-ui, sans-serif;
      letter-spacing: .4px; text-transform: uppercase;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(184,90,51,.35);
      transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
      font-style: italic;
    }
    .welcome-cta:hover { filter: brightness(.95); transform: translateY(-1px); }
    .welcome-cta:active{ transform: translateY(0); }

    @keyframes wlcBreathe{
      0%,100%{ transform: translateY(0) scale(1); }
      50%    { transform: translateY(0) scale(1.03); }
    }
    .welcome-cta.breathe{
      animation: wlcBreathe 1.9s ease-in-out infinite;
    }

    /* Línea + rombo (imagen) */
    .welcome-divider{
      display: block;
      width: 75%;
      /*max-width: 920px;*/
      margin: 18px auto 0;
      pointer-events: none;
      user-select: none;
      margin-top: 30px;
    }

    /* Montañas decorativas al fondo */
    .welcome-mountains{
      position: absolute;
      inset: auto 0 0 0;            /* left:0; right:0; bottom:0; */
      width: 100%; height: auto;
      z-index: 1;
      pointer-events: none; user-select: none;
      opacity: .95;
    }
    .custom-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;

        /* Transición */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
    }
    .custom-modal.show {
        opacity: 1;
        pointer-events: auto;
    }
    .modal-inner {
        background-color: #1b4251;
        width: 90%;
        height: 90%;
        border-radius: 12px;
        padding: 20px;
        overflow-y: auto;
        position: relative;
        box-shadow: 0 4px 20px rgba(0,0,0,0.5);
        /* Animación entrada */
        transform: scale(0.95);
        opacity: 0;
        transition: all 0.3s ease;
    }
    #modal-body {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .custom-modal.show .modal-inner {
        transform: scale(1);
        opacity: 1;
    }
    .modal-close-wrap{
      position: sticky;
      top: 0;                  /* se “pega” al borde superior del scroll */
      z-index: 30;             /* por encima del contenido */
      display: flex;
      justify-content: flex-end;
      padding: 1px 2px 0 0;   /* separaciones como las que tenías */
    
    }
    .modal-close {
        position: absolute;
        top: 17px !important;
        right: 3px !important;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 10;
    }
    .modal-close img {
        width: 100%;
        height: auto;
        transition: transform 0.4s ease, box-shadow 0.3s ease;
        filter: grayscale(0); /* <-- escala de grises */
    }
    .modal-close:hover img {
        transform: scale(1.2);
        filter: grayscale(1); /* <-- vuelve a color */
        /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);*/
    }
    #switchBaseMap{
      position:absolute;
      bottom: 170px;
      right:10px;     /* ⬅️ ahora a la derecha */
      left:auto;      /* ⬅️ anula el left previo */
      z-index:1000;
      background:#fff;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,.3);
      cursor:pointer;
      padding:2px;
      transition:transform .2s;
    }
    #switchBaseMap:hover{ transform:scale(1.1); }
    #switchBaseMap img{
      width:55px; height:55px; border-radius:8px;
    }

    /* Botón flotante de ayuda */
    .help-fab{
      position: fixed;
      right: 20px;
      bottom: 110px;               /* súbelo/bájalo según tu barra inferior */
      width: 44px; height: 44px;
      border-radius: 999px;
      display: flex; align-items: center; justify-content: center;
      background: #b45533;        /* no se verá si tu PNG es circular; deja por accesibilidad */
      box-shadow: 0 8px 24px rgba(0,0,0,.25), inset 0 0 0 3px #f0ebe5;
      z-index: 9998;             /* por encima de la barra de localidades */
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
    }
    .help-fab:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(0,0,0,.3), inset 0 0 0 3px #fff; }
    .help-fab img{ width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 0 rgba(0,0,0,.15)); }

    /* pulso suave para invitar clic */
    .help-fab::before{
      content:"";
      position:absolute; inset:-8px;
      border:2px solid #f0ebe5; border-radius:999px;
      opacity:.75; animation:fabPulse 2.2s ease-out infinite;
    }
    /* ocúltalo cuando el modal esté abierto */
    .help-fab.is-hidden{ opacity:0; pointer-events:none; }

    .loc-bar{
        position:absolute; left:12px; right:12px; bottom:12px;
        margin-left: 2.5%;
        width: 95%;
        display:flex; align-items:center; gap:8px;
        padding:10px; border-radius:12px;
        background: rgb(18, 51, 67, .92);
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 1000;          /* sobre el mapa/controles */
        color:#fff;
    }
    .loc-scroll{
      display:flex; gap:8px; align-items:center;
      overflow-x:auto; overflow-y:hidden; white-space:nowrap;
      -webkit-overflow-scrolling: touch;
      scroll-behavior:smooth;
      width:100%;
    }
    .loc-scroll::-webkit-scrollbar{ height:6px; }
    .loc-scroll::-webkit-scrollbar-thumb{ background:#4b5563; border-radius:6px; }

    /* Botones tipo “chip” */
    /*.loc-chip{
      display:inline-flex; align-items:center; gap:6px;
      background:#70838d; color:#123343; border:0;
      padding:10px 12px; border-radius:10px; cursor:pointer;
      font: 600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }*/

    .loc-chip{
      display:inline-flex; align-items:center; gap:8px;
      background:#70838d; color:#123343; border:0;
      padding:8px 6px; border-radius:12px; cursor:pointer;
      font:600 13px/1 Inter,system-ui,sans-serif;
    }
    .loc-chip:hover{ filter:brightness(.95); }
    .loc-chip:active{ transform:translateY(1px); }

    .chip-img{
      width:30px; height:30px; border-radius:999px;
      background:#fff; display:inline-flex; align-items:center; justify-content:center;
      box-shadow:0 1px 3px rgba(0,0,0,.2) inset;
    }
    .chip-img img{
      width:32px; height:32px; object-fit:contain; border-radius:50%;
    }
    .chip-label{ white-space:nowrap; }

    /* Flechas de navegación */
    .loc-nav{
      min-width:34px; height:34px; border:0;
      border-radius:8px; cursor:pointer;
      background:#70838d; color:#123343; font-size:18px; line-height:34px;
    }
    .loc-nav:hover{ filter:brightness(1.1); }
}

/* Hint superior centrado */
.map-hint {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%) translateY(-6px);
  background: #0b2f3a;          /* mismo tono que tu modal */
  color: #f0ebe5;
  padding: 8px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font: 600 13px/1.35 Inter, system-ui, sans-serif;
  z-index: 1000;
  pointer-events: none;          /* no bloquea clics del mapa */
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.map-hint.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}