.operator-hero {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 55%, var(--magenta) 140%);
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  padding: 56px 40px;
  margin: 30px 0 40px;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.operator-hero h1 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: rgba(255,255,255,.7);
  /* El logo ya dice de qué operador se trata — el nombre en texto queda
     como refuerzo discreto, no como protagonista (eso es el logo). */
}
.operator-hero p {
  max-width: 640px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: 1.05rem;
  line-height: 1.5;
}
.operator-logo {
  max-height: 130px;
  max-width: min(420px, 80%);
  object-fit: contain;
  /* Logo transparente (PNG) directo sobre el degradado — sin caja blanca —
     con drop-shadow para que se lea igual de bien si el PNG trae zonas
     claras u oscuras. */
  filter: drop-shadow(0 4px 18px rgba(0,0,0,.35));
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .operator-hero { padding: 40px 22px; }
  .operator-logo { max-height: 90px; }
  .operator-hero h1 { font-size: 1.2rem; }
  .operator-hero p { font-size: .95rem; }
}