/* css/mapa.css  (versión corregida)
   Centrado fiable del iframe Google Maps incluso cuando el wrapper supera el ancho del contenedor.
*/

/* Reset ligero */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; background: #ffffff; color: #222; }

/* Contenedor principal coherente con el proyecto */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 12px;
  overflow: visible; /* permitir que el mapa más ancho se muestre */
}

/* Página */
.page { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: 24px; }

/* Título */
.titulo {
  font-size: 20px;
  font-weight: 800;
  color: #1b1b1b;
  margin-bottom: 8px;
}

/* Coordenadas */
.coordenadas {
  font-size: 14px;
  color: #444;
  margin-bottom: 12px;
}

/* Wrapper responsivo para el iframe:
   - ancho aumentado 50% (150% del ancho del contenedor)
   - centrado fiable con left:50% + transform
   - mantiene la proporción vertical con padding-top
*/
.map-wrapper {
  width: 150%;               /* 50% más ancho */
  max-width: none;           /* permitir que supere el max-width del contenedor */
  /* centrar de forma robusta incluso si el elemento es más ancho que el contenedor */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  overflow: hidden;
  background: #ddd;
  padding-top: 126.5625%;    /* proporción vertical previamente establecida */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* iframe ajustado al wrapper */
.map-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Nota / enlace */
.nota {
  margin-top: 10px;
  font-size: 14px;
}
.nota a {
  color: #0b5aa7;
  text-decoration: none;
  font-weight: 700;
}
.nota a:hover,
.nota a:focus { text-decoration: underline; outline: none; }

/* Responsive: en pantallas medianas y pequeñas volvemos a 100% para evitar scroll horizontal.
   IMPORTANTE: quitamos left/transform para que el bloque utilice flujo normal del documento.
*/
@media (max-width: 980px) {
  .map-wrapper {
    width: 100%;
    padding-top: 126.5625%;
    left: 0;
    transform: none;
    margin: 0; /* mantener alineación natural en móviles */
  }
}

@media (max-width: 420px) {
  .container { padding: 12px; }
  .titulo { font-size: 18px; }
  .coordenadas { font-size: 13px; }
  .map-wrapper {
    width: 100%;
    padding-top: 126.5625%;
    left: 0;
    transform: none;
    margin: 0;
  }
}