/* ============================================================
   Buen Jale — Ajustes exclusivos de la página "Nosotros"
   Todas las clases aquí (.team-one, .title-box, .agency-focus-row,
   .agency-focus-visual, .about-intro-orbit) solo existen en about.html,
   así que estos cambios no afectan a ninguna otra página del sitio.
   ============================================================ */

/* ---------- 1. Relleno del espacio vacío junto al texto de introducción ---------- */
.about-intro-orbit {
  display: none;
}
@media (min-width: 992px) {
  .team-one .title-box {
    min-height: 140px;
  }
  .about-intro-orbit {
    display: flex;
    position: absolute;
    top: 4px;
    right: 30px;
    width: 92px;
    height: 92px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(135deg, rgba(10, 171, 174, 0.22), rgba(255, 255, 255, 0.03));
    box-shadow: 0 0 40px rgba(10, 171, 174, 0.12);
    animation: bjAboutOrbitFloat 5s ease-in-out infinite;
  }
  .about-intro-orbit i {
    font-size: 32px;
    color: #5EE3E0;
  }
}
@keyframes bjAboutOrbitFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .about-intro-orbit { animation: none; }
}

/* ---------- 2. Tarjetas "Cómo trabajamos": simetría, sin traslape texto/ícono ---------- */
.agency-focus-row {
  align-items: stretch;
}
.agency-focus-row .team-block_one {
  display: flex;
}
.agency-focus-row .team-block_one-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  padding: 34px 22px !important;
}
.agency-focus-row .team-block_one-inner::before {
  top: 0 !important;
}
.agency-focus-row .team-block_one-socials {
  width: auto;
  justify-content: center;
  margin-top: 0 !important;
}
.agency-focus-row .team-block_one-heading {
  max-width: 100% !important;
  width: 100%;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  line-height: 1.3 !important;
  margin-top: 22px !important;
  word-spacing: normal !important;
}
.agency-focus-row .team-block_one-designation {
  max-width: 100% !important;
  width: 100%;
  margin-top: 10px !important;
}

/* El ícono deja de ser absoluto en TODOS los tamaños en esta fila,
   así nunca se monta encima del texto (antes solo pasaba esto en móvil) */
.agency-focus-row .agency-focus-visual {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 26px !important;
  width: 92px !important;
  height: 92px !important;
}
.agency-focus-row .agency-focus-visual i {
  font-size: 36px !important;
}