/* Estilos para el modal */
#popup {
  background-color: transparent; /* Fondo completamente transparente */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  -webkit-animation: autopopup 2s;
  -moz-animation: autopopup 2s;
  animation: autopopup 2s;
  z-index: 9999;
}

/* Estilos para el contenido del modal */
.popup-contenedor {
  position: relative;
  margin: 10% auto;
  padding: 20px;
  background-color: #fafafa;
  color: #333;
  border-radius: 3px;
  width: 90%; /* Ancho del modal ajustado para pantallas pequeñas */
  max-width: 500px; /* Ancho máximo del modal */
}

/* Estilos para el enlace "Cerrar" dentro del modal */
a.popup-cerrar {
  position: absolute;
  top: 3px;
  right: 3px;
  background-color: #333;
  padding: 7px 10px;
  font-size: 20px;
  text-decoration: none;
  line-height: 1;
  color: #fff;
}

/* Estilos para las columnas */
.content-text {
  display: flex;
  flex-wrap: wrap; /* Ajustamos el contenido en varias líneas si es necesario */
}

.columna-imagen {
  flex-basis: 30%; /* Ancho de la primera columna (imagen) */
  margin-left: auto; /* Desplazar la imagen hacia la derecha */
}

.columna-mensaje {
  flex-basis: 70%; /* Ancho de la segunda columna (mensaje) */
}

/* Estilos para el texto en línea con la imagen */
.content-text img {
  vertical-align: middle; /* Alineamos la imagen verticalmente */
  margin-right: 10px; /* Espacio entre la imagen y el texto */
}

/* Estilos para hacer el modal responsive */
@media (max-width: 600px) {
  .popup-contenedor {
    width: 90%; /* Ancho del modal ajustado para pantallas pequeñas */
  }
}