/* Capa de movimiento de las páginas de servicios (Meta Ads y Audiovisual).
   Todo lo que anima depende de html.mx-on (lo pone el JS si hay GSAP y no se pidió reducir movimiento). */
html, body { overflow-x: clip !important; }

/* ---------- Hero: título grande y piezas flotando ---------- */
.page-hero { padding-bottom: 96px; }
.page-headline {
  font-family: 'Reddit Sans', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.04em;
  max-width: 12.5ch;
  margin-bottom: 28px;
}
.mx-on .page-headline .mx-w { display: inline-block; opacity: 0; transform: translateY(0.4em); }
.mx-on .page-headline .grad-text .mx-w { color: #fff; }
.mx-polas { position: absolute; right: 0; top: 40px; width: 40%; height: 620px; pointer-events: none; z-index: 1; }
.mx-pola {
  position: absolute;
  width: clamp(130px, 13vw, 190px);
  padding: 8px 8px 30px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  transform: rotate(var(--r));
}
.mx-pola:nth-child(1) { right: 4%; top: 0; --r: 6deg; }
.mx-pola:nth-child(2) { right: 38%; top: 150px; --r: -5deg; }
.mx-pola:nth-child(3) { right: 10%; top: 330px; --r: 3deg; }
.mx-pola-media { position: relative; aspect-ratio: 9 / 13; overflow: hidden; background: #ddd; }
.mx-pola-media img, .mx-pola-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mx-pola-media video { opacity: 0; transition: opacity 0.5s; }
.mx-pola-media video.on { opacity: 1; }
.mx-pola figcaption { position: absolute; left: 10px; bottom: 7px; font-size: 0.78rem; font-weight: 600; color: #3a3a38; }
.page-hero > *:not(.mx-polas) { position: relative; z-index: 2; }

/* ---------- Banda azul con palabras que cruzan ---------- */
.mx-band { position: relative; background: #103da6; color: #f2f2ee; padding: 10vh 0; overflow: hidden; }
.mx-band-row {
  display: flex; gap: 0.4em; width: max-content; white-space: nowrap;
  font-family: 'Reddit Sans', system-ui, sans-serif; font-weight: 900;
  font-size: clamp(3.6rem, 13vw, 13rem); line-height: 0.95; letter-spacing: -0.04em;
  will-change: transform;
}
.mx-band-row span:nth-child(even) { color: #8da9f2; }
.mx-band-row + .mx-band-row { margin-top: 0.06em; }
.mx-sticker {
  position: absolute; left: 50%; top: 50%;
  width: clamp(140px, 19vw, 280px);
  transform: translate(-50%, -50%);
  color: #202020;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.35));
  z-index: 2;
}
.mx-sticker svg { display: block; width: 100%; height: auto; }

/* ---------- Títulos de sección más grandes, se "leen" al bajar ---------- */
section.block { padding: 112px 0; }
.block-headline {
  font-family: 'Reddit Sans', system-ui, sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 17ch;
  margin-bottom: 22px;
}
.block-sub { font-size: 1.05rem; max-width: 58ch; }
.mx-on .block-headline .mx-w { opacity: 0.16; }

/* ---------- Diferenciales: tira horizontal (escritorio) ---------- */
.diferencial-num { font-family: 'Reddit Sans', system-ui, sans-serif; font-weight: 900; font-size: 2.6rem; letter-spacing: -0.03em; color: #8da9f2; margin-bottom: 18px; }
.diferencial-item h3 { font-size: 1.3rem; }
.diferencial-item p { font-size: 0.95rem; }
@media (min-width: 1025px) {
  .mx-on .mx-hscroll { overflow: hidden; }
  .mx-on .mx-hscroll .diferencial-grid { display: flex; width: max-content; gap: 20px; }
  .mx-on .mx-hscroll .diferencial-item { width: 380px; min-height: 300px; padding: 34px 30px; }
}

/* ---------- Pasos: tarjetas que se apilan ---------- */
.steps { display: block; background: none; border: 0; border-radius: 0; overflow: visible; }
.step {
  position: sticky;
  top: calc(110px + var(--i, 0) * 22px);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 40px;
  align-items: start;
  align-content: start;
  min-height: 280px;
  margin-bottom: 28px;
  padding: 40px 44px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: #2a2a2a;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35);
}
.step:nth-child(even) { background: #103da6; border-color: transparent; }
.step:nth-child(even) p { color: #dfe6fb; }
.step-num {
  grid-row: 1 / span 2;
  font-family: 'Reddit Sans', system-ui, sans-serif !important;
  font-weight: 900; font-size: 6.5rem !important; line-height: 0.85; letter-spacing: -0.05em;
  background: none !important; -webkit-text-fill-color: currentColor !important; color: #8da9f2;
  margin: 0 !important;
}
.step:nth-child(even) .step-num { color: #f2f2ee; }
.step h3 { font-family: 'Reddit Sans', system-ui, sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem); letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 4px; }
.step p { font-size: 1.05rem; max-width: 52ch; color: #a3a3a0; }

/* ---------- CTA final ---------- */
.cta-band { background: #103da6 !important; border: 0 !important; text-align: left !important; padding: 72px 56px !important; }
.cta-band h2 { font-family: 'Reddit Sans', system-ui, sans-serif; font-weight: 900; font-size: clamp(2.4rem, 6vw, 5.4rem) !important; line-height: 0.98; letter-spacing: -0.045em; max-width: 14ch; }
.cta-band p { margin: 18px 0 30px !important; color: #dfe6fb !important; font-size: 1.05rem !important; }
.cta-band .btn-primary { background: #fff !important; color: #103da6 !important; }

@media (max-width: 1024px) {
  .mx-polas { position: relative; right: auto; top: auto; width: 100%; height: 300px; margin-top: 8px; }
  .mx-pola:nth-child(1) { right: 6%; top: 10px; }
  .mx-pola:nth-child(2) { right: auto; left: 4%; top: 30px; }
  .mx-pola:nth-child(3) { right: 34%; top: 60px; }
}
@media (max-width: 640px) {
  .page-headline { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .mx-pola { width: 112px; }
  .mx-polas { height: 250px; }
  .mx-band-row { font-size: 19vw; }
  section.block { padding: 80px 0; }
  .step { grid-template-columns: 1fr; padding: 28px 24px; min-height: 0; top: calc(84px + var(--i, 0) * 14px); }
  .step-num { grid-row: auto; font-size: 4.2rem !important; }
  .cta-band { padding: 48px 24px !important; margin-left: 16px !important; margin-right: 16px !important; }
}