/* Módulo banda_final: banda final «Está en mi ADN» (PDF s8-cta, 1440×296). */

.m-banda-final {
  /* Tracking −25 del diseño. */
  --m-banda-final-tracking: var(--tracking-title);
  /* Persona: 497px a 1440; se reduce en escritorios estrechos para no pisar título ni botón. */
  --m-banda-final-person-w: clamp(17.875rem, 60vw - 22.9375rem, 31.0625rem);
  position: relative;
  z-index: 1; /* la persona sobresale por encima de la sección anterior */
  color: var(--color-on-dark);
  /* Degradado del PDF (sombreado Sh0): morado liso hasta x=159 y curva de potencia ~3 (el hint
     del 81.8%) hasta amarillo en x=1443. Sin foto queda como fondo de reserva. */
  background: linear-gradient(var(--m-banda-final-angle, 90deg), var(--color-primary) 11%, 81.8%, var(--color-accent) 100.2%);
}

/* La foto va en «luz suave» sobre el degradado, como en el PDF. Se recorta dentro de la banda; la persona no. */
.m-banda-final__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: soft-light;
}

.m-banda-final__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 19.75rem; /* 296px del PDF + 20px pedidos por el cliente (2026-09-14) */
}

.m-banda-final__content,
.m-banda-final__btn { position: relative; z-index: 1; }

.m-banda-final__title {
  font-size: var(--text-mega);
  letter-spacing: var(--m-banda-final-tracking);
  color: var(--color-on-dark);
}

.m-banda-final__text {
  max-width: min(34rem, 45vw); /* mismos saltos de línea que el PDF a 1440 */
  margin-top: var(--space-1);
  /* Area 15.7px del PDF equivale a Albert Sans 17px (anchos de línea y paso de 26.5px). Pedido token ~17px. */
  font-size: calc(var(--text-base) * .944);
  font-family: var(--font-ui);
  font-weight: var(--weight-ui);
}

.m-banda-final__person {
  position: absolute;
  bottom: 0;
  right: calc(var(--btn-w) - var(--m-banda-final-person-w) * .1);
  width: var(--m-banda-final-person-w);
  pointer-events: none;
}

/* Tras «Calidad hoy» (Oferta Académica) la cabeza pisaba la foto de esa sección: se deja un hueco
   igual a lo que asoma. 1.143 = alto/ancho del PNG (1,255) sin su 8,9 % de aire de arriba;
   19.75rem = alto de la banda. Por debajo de 48rem la persona va en el flujo y no asoma. */
@media (min-width: 48rem) {
  .m-metodologia + .m-banda-final {
    margin-top: max(0px, var(--m-banda-final-person-w) * 1.143 - 19.75rem + var(--space-3));
  }
}

.m-banda-final__btn {
  flex: none;
  margin-bottom: var(--space-1); /* centrado óptico: el botón queda 4px por encima del centro, como en el PDF */
}

/* Anillo doble (técnica WCAG C40): blanco pegado al botón + morado fuerte (10.7:1 entre sí);
   uno de los dos contrasta siempre, sobre el morado y sobre el amarillo del degradado. */
.m-banda-final__btn:focus-visible {
  outline-color: var(--color-primary-strong);
  box-shadow: 0 0 0 2px var(--color-on-dark);
}

/* Tablet: texto y botón apilados a la izquierda, persona abajo a la derecha. */
@media (max-width: 67.99rem) {
  .m-banda-final { --m-banda-final-person-w: 45vw; }

  /* La foto se amplía mucho: se encuadra sobre la cara de la chica en vez de su brazo. */
  .m-banda-final__bg { object-position: 15% 50%; }

  .m-banda-final__inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-block: var(--section-y);
  }

  .m-banda-final__text { font-size: var(--text-base); } /* fuera del escritorio manda la legibilidad, no el PDF */
  .m-banda-final__person { right: 0; }
  .m-banda-final__btn { margin-bottom: 0; }
}

/* Móvil: la persona pasa al flujo, bajo el botón, apoyada en el borde inferior. */
@media (max-width: 47.99rem) {
  .m-banda-final { --m-banda-final-angle: 180deg; } /* amarillo abajo: el texto blanco queda siempre sobre morado */
  .m-banda-final__bg { object-position: 0 50%; } /* solo el pelo de la chica: fondo tranquilo tras el texto */
  .m-banda-final__inner { padding-bottom: 0; }
  .m-banda-final__text { max-width: none; }
  .m-banda-final__btn { width: 100%; }

  .m-banda-final__person {
    position: static;
    width: min(85%, 20rem);
    margin-inline-start: auto;
  }
}