/*.image_area img{
        max-width: 100%;
        max-height: auto;
        display: block; /* remove extra space below image */
/*}*/

#openHubspotFormButton {
  position: fixed; /* Lo fija a la ventana del navegador */
  bottom: 20px;    /* Espacio desde la parte inferior */
  right: 20px;     /* Espacio desde la derecha */
  z-index: 1000;   /* Asegura que esté por encima de otros elementos */
  background-color: #ff7f50; /* Un color llamativo como naranja coral (puedes cambiarlo) */
  color: white;         /* Color del texto */
  padding: 25px 35px;   /* Espaciado interior para hacerlo más grande */
  border: none;          /* Elimina el borde predeterminado del botón */
  border-radius: 5px;   /* Bordes redondeados */
  cursor: pointer;       /* Cambia el cursor al pasar por encima para indicar que es clickable */
  font-size: 35px;      /* Tamaño de la fuente */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Sombra suave para que destaque */
}

#openHubspotFormButton:hover {
  background-color: #f46a3d; /* Un tono más oscuro al pasar el ratón (opcional) */
}

/* Estilos para el modal */
.modal {
  display: none; /* Inicialmente oculto */
  position: fixed; /* Se queda en la ventana */
  z-index: 1001; /* Debe estar por encima del botón flotante */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Habilita el scroll si el contenido es muy largo */
  background-color: rgba(0, 0, 0, 0.4); /* Fondo oscuro semitransparente */
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* Centra el modal verticalmente */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Ancho del modal */
  border-radius: 5px;
  position: relative; /* Para posicionar el botón de cerrar */
}

.close-button {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

#hubspot-form-area {
  /* Puedes agregar estilos específicos para el área del formulario si lo deseas */
}

/* Media queries para responsividad */
@media (max-width: 600px) {
  #openHubspotFormButton {
    padding: 15px 25px; /* Reducir padding en móviles */
    font-size: 20px;    /* Reducir tamaño de fuente */
    bottom: 10px;       /* Menos espacio en la parte inferior */
    right: 10px;        /* Menos espacio en la derecha */
  }

  .modal-content {
    width: 90%;         /* Aumentar ancho del modal en móviles */
    margin: 10% auto;   /* Ajustar margen */
    padding: 10px;      /* Reducir padding */
  }

  .close-button {
    font-size: 24px;    /* Reducir tamaño del botón de cerrar */
  }
}

@media (max-width: 400px) {
  #openHubspotFormButton {
    padding: 10px 20px; /* Aún más pequeño para pantallas muy pequeñas */
    font-size: 16px;
  }
}