/* ==========================================================================
   04 · PROPÓSITO
   Fondo negro con cinta (maqueta_02) animada. Grid de 3 columnas:
   número de sección · copy · CTA a bases. Una sola dirección de diseño.
   ========================================================================== */

.purpose {
  position: relative;
  display: grid;
  grid-template-columns: 0.42fr 1.2fr 0.72fr;
  gap: clamp(48px, 7vw, 115px);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border-bottom: 2px solid rgba(0, 174, 217, 0.55);
  /* !important: vence el reset global de background-image (01-base.css). */
  background-color: #000 !important;
  background-image: linear-gradient(
    135deg,
    #000 0%,
    rgba(0, 225, 164, 0.055) 100%
  ) !important;
}

/* Cinta decorativa animada (maqueta_02) */
.purpose::after {
  position: absolute;
  z-index: 0;
  right: -5%;
  bottom: 0;
  left: -5%;
  height: clamp(190px, 27vw, 430px);
  content: "";
  pointer-events: none;
  opacity: 0.2;
  background-image: var(--ta-ribbon) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  animation: ta-ribbon-drift 18s ease-in-out infinite alternate;
}
.purpose > * {
  position: relative;
  z-index: 1;
}

/* Tipografía — escala oficial del PDF */
.purpose h2 {
  margin: 0;
  color: #fff;
  font-size: var(
    --fs-titulo
  ) !important; /* 48px · Título · vence el h2 mobile de 01-base */
  font-weight: 700;
  line-height: 1.06;
}
.purpose .section-kicker {
  color: #fff;
}
.purpose .section-label {
  color: #fff;
} /* "Propósito" en blanco sobre el fondo negro */
.purpose .section-label span {
  color: var(--ta-cyan);
} /* el "01" en cyan */

.purpose-text {
  max-width: 720px;
  margin: 30px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-cuerpo); /* 22.7px · Cuerpo */
  line-height: 1.5;
}

/* CTA a bases (mismo .button-primary del header/footer, abre /bases) */
.purpose-bases-cta {
  align-self: center; /* botón al medio de su columna */
}
.purpose-bases-button {
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .purpose {
    grid-template-columns: 0.35fr 1.2fr;
  }
  .purpose-bases-cta {
    grid-column: 2;
    margin-top: 24px;
  }
}
@media (max-width: 820px) {
  .purpose {
    display: block;
  }
  .purpose .section-label {
    margin-bottom: 40px;
  }
  .purpose-bases-cta {
    margin-top: 40px;
  }
}

/* --- Animación --- */
@keyframes ta-ribbon-drift {
  from {
    transform: translate3d(-1.5%, 6px, 0) scale(1.015);
  }
  to {
    transform: translate3d(1.5%, -4px, 0) scale(1.035);
  }
}