.info-tecnica-box {
  background-color: #f4f8fc;
  border-left: 4px solid #3399cc;
  padding: 1.2rem 1.5rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1.6;
  color: #2a2a2a;
  max-width: 800px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  margin-left: auto;     /* centrado horizontal */
  margin-right: auto;    /* centrado horizontal */
}

.info-tecnica-box p {
  margin-bottom: 1rem;
}

.info-tecnica-img {
  width: 90vw;           /* ocupa casi todo el ancho en pantallas chicas */
  max-width: 800px;      /* tamaño máximo en pantallas grandes */
  height: auto;          /* mantiene la proporción */
  display: block;        /* permite usar margin auto para centrar */
  margin-left: auto;
  margin-right: auto;
}

.resaltado {
  background-color: #fffbe6;
  border-left: 5px solid #f0ad4e;
  padding: 10px 15px;
  margin: 10px 0;
  font-size: 1em;
}



#botones_zona {
    display: flex;
    gap: 15px; /* Espacio entre botones */
    justify-content: center; /* Centrar toda la fila */
}

.btn-sm {
    display: flex; /* Activar flexbox */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    width: 30%; /* Ancho completo del contenedor padre */
    height: 55px; /* Altura fija para todos los botones */
    margin-bottom: 0px; /* Espacio entre botones */
    margin-top: 20px;
    font-size: 14px;
}

/* Botón presionado */
.btn-sm.activo {
    background-color: #D32F2F; /* Fondo más oscuro cuando está presionado */
    border: 2px solid #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
    border-radius: 5px;        /* Bordes redondeados */
    cursor: default;
}

.mapa { display: block; margin-left: auto;
  margin-right: auto;
  width: 95%;
        border-radius: 15px; /* Esquinas redondeadas */
}



 /* Aqui van los estilos especiales para pantallas grandes */
@media (min-width: 600px) {


    .btn-sm {
      width: 20%; /* Ancho completo del contenedor padre */
      font-size: 16px;
}

.mapa { display: block; margin-left: auto;
  margin-right: auto;
  height: 85vh;
  width: auto;}


@media (prefers-color-scheme: dark) {

    
}