/* Banner horizontal de un aliado: templates/_franja_aliado.html */

.franja-aliado {
  max-width: 728px;
  margin: 1.5rem auto;
  text-align: center;
}

.franja-aliado-etiqueta {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #6c757d;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.franja-aliado-link {
  display: block;
}

.franja-aliado-img {
  display: block;
  width: 100%;
  height: auto;
  /* Reserva el alto antes de que cargue; después manda la proporción real. */
  aspect-ratio: auto 728 / 90;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

@media (max-width: 767.98px) {
  .franja-aliado {
    max-width: 480px;
    margin: 1rem auto;
  }

  .franja-aliado-img {
    aspect-ratio: auto 320 / 100;
  }
}

/* Video: una sola pieza de 1280x400 para mobile y desktop (va después de la regla
   de mobile para pisarla). */
.franja-aliado-video {
  aspect-ratio: 16 / 5;
  object-fit: cover;
}