.yovag-ads {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  width: 90%; /* Ancho relativo al contenedor en pantallas pequeñas */
  max-width: 100%; /* Ancho máximo para pantallas más grandes */
  position: relative;
  font-family: sans-serif;
  margin: 20px auto; /* Centra el bloque horizontalmente */
}

.ads-label {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #f0f0f0;
  color: #333;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.8em;
  z-index: 1;
}

.ads-content {
  margin-top: 25px;
}

.ads-content h3 {
  margin-top: 0;
  color: #3366cc;
  font-size: 1.1em;
}

.ads-content p {
  color: #555;
  font-size: 0.9em;
  line-height: 1.4;
  text-align: justify;
  margin-bottom: 5px;
}

.ads-url {
  color: #006621;
  font-size: 0.8em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.join-button {
  background-color: #ff9800; /* Naranja llamativo */
  color: white;
  padding: 12px 20px; /* Aumentar el padding */
  text-decoration: none;
  border-radius: 8px; /* Bordes redondeados */
  display: inline-block;
  margin-top: 15px; /* Espacio superior */
  font-size: 1.1em; /* Texto más grande */
  font-weight: bold; /* Texto en negrita */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /* Sombra de texto */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra de caja */
  transition: background-color 0.3s ease; /* Transición suave */
  text-align: center; /* Centra el texto en pantallas más pequeñas */
}

.join-button:hover {
  background-color: #f57c00; /* Naranja más oscuro al pasar el ratón */
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3); /* Sombra más pronunciada al pasar el ratón */
}


/* Media query para pantallas más pequeñas (ej. teléfonos en vertical) */
@media (max-width: 600px) {
  .yovag-ads {
    width: 95%; /* Ocupa un mayor porcentaje del ancho en pantallas pequeñas */
    max-width: none; /* Elimina el ancho máximo para que se ajuste */
    margin-left: auto;
    margin-right: auto; /* Asegura el centrado */
  }

  .ads-content h3 {
    font-size: 1em; /* Reduce ligeramente el tamaño del título */
  }

  .ads-content p {
    font-size: 0.85em; /* Reduce ligeramente el tamaño de la descripción */
  }

  .join-button {
    font-size: 0.9em; /* Reduce ligeramente el tamaño del botón */
    padding: 8px 12px; /* Reduce ligeramente el padding del botón */
  }
}

/* Media query para pantallas medianas (ej. tabletas en vertical u horizontal) */
@media (min-width: 601px) and (max-width: 900px) {
  .yovag-ads {
    width: 80%; /* Ocupa un porcentaje medio del ancho en tabletas */
    max-width: 100%; /* Aumenta ligeramente el ancho máximo */
  }
}