/* ── Marca (wordmark en lugar de logotipo SVG) ── */
.mx-wordmark { display: inline-flex; align-items: center; gap: 12px; color: #F8F5FA; }
.mx-wordmark svg { flex: 0 0 auto; display: block; }
.mx-wordmark__text {
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 0.08em;
  line-height: 1;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Iconos financieros (reemplazan los íconos de marketing) ── */
.mx-ico { font-size: 34px; color: var(--accent-color); line-height: 1; }
.chooseus-icon .mx-ico { font-size: 44px; }
.digital-process-step .mx-ico { font-size: 38px; }

/* ── Hero con foto financiera ── */
.mx-hero-photo {
  background: url(../images/mx/hero-bg.jpg) center / cover no-repeat;
  z-index: 0;
}
.mx-hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 4, 10, 0.92) 0%, rgba(30, 10, 50, 0.78) 45%, rgba(110, 20, 140, 0.45) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 40%);
}
.banner-video-container .hero-container { z-index: 2; }
.mx-hero-card {
  position: relative;
  max-width: 360px;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.mx-hero-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.mx-hero-card figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  font-size: 13px;
  color: #fff;
  background: rgba(10, 6, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.mx-hero-card__tag { font-weight: 700; letter-spacing: 0.04em; }
.mx-hero-card__tag i { color: var(--accent-color); margin-right: 6px; }
.banner-video-content { width: auto; }
.banner-video-content .mx-hero-card { max-width: 340px; }

.mx-hero-chips { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; align-self: center; }
.mx-hero-chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mx-hero-chips i { color: var(--accent-color); font-size: 12px; }

/* ── Cinta de temas ── */
.mx-topic-chip {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
  color: #F8F5FA;
  border: 1px solid rgba(200, 42, 239, 0.55);
  border-radius: 100px;
  background: rgba(200, 42, 239, 0.1);
}

/* ── Banda de mensaje ── */
.mx-guide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  font-size: 20px;
  color: #fff;
  background: var(--accent-color);
  border-radius: 50%;
  transition: transform 0.3s ease;
}
.mx-guide-link:hover { transform: translateY(4px); color: #fff; }

/* ── Tarjeta de contacto (sin formulario) ── */
.mx-contact-card { display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.mx-contact-card h3, .mx-contact-card p { margin: 0; }
.mx-contact-card__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 16px 26px;
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  color: #fff;
  background: linear-gradient(135deg, #8C2EFF, #EE4DDC);
  border-radius: 100px;
  overflow-wrap: anywhere;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mx-contact-card__mail:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(200, 42, 239, 0.35); color: #fff; }
.mx-contact-card__note { font-size: 14px; opacity: 0.75; }
.afterdark-footer address a { color: inherit; overflow-wrap: anywhere; }

@media (max-width: 991px) {
  .banner-video-content .mx-hero-card { max-width: 300px; margin: 0 auto; }
}

/* ── Titular del hero: texto sólido y legible sobre la foto ── */
.title-heading-banner {
  background-image: none !important;
  -webkit-text-fill-color: #fff !important;
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
  text-wrap: balance;
}
.banner-content p,
.banner-video-container .banner-content p { color: #F1ECF5; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); }