/* Estilo para la sección superior con imagen de fondo */
.hero-section {
  background-image: url("/img/contacto/sucursales/sucursal_curridabat.webp");
  /* Reemplaza con la URL real de tu imagen */
  background-size: cover;
  background-position: 80% 55%;
  height: 600px;
  /* Ajusta la altura si es necesario */
  position: relative;
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 30px;
}

/* Capa oscura semitransparente sobre la imagen */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  /* Negro con 40% de opacidad */
  z-index: 1;
}

.hero-content {
  z-index: 2;
  /* Asegura que el contenido esté sobre el overlay */
}

/* Estilo para el mapa (solo un placeholder de imagen) */
.map-placeholder {
  width: 100%;
  height: 350px;
  /* Altura del mapa */
  background-color: #f0f0f0;
  /* Color de fondo si la imagen no carga */
  background-image: url("placeholder-mapa.png");
  /* Reemplaza con una imagen de mapa o un iframe */
  background-size: cover;
  background-position: center;
  border: 1px solid #ccc;
}

/* Estilo para los iconos (color y tamaño) */
.icon-text-container i {
  font-size: 1.5rem;
  margin-right: 10px;
  color: #555;
  /* Color sutil para los íconos */
}

/* Fuente general y otros ajustes sutiles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  color: #333;
}