/* ============================================================
   Sección: FINAL CTA (dark)  (pieza reutilizable — ver ADR-0006)
   Clases con namespace a mano (BEM): .final-cta__...
   Card oscura con glows + 2 botones + orbes 3D. Contenido fijo.
   ============================================================ */

.final-cta {
  padding-block: var(--section-y);
}

/*
  Card oscura. El fondo son DOS glows radiales sobre el ink (#0F1117):
    · abajo-izquierda -> celeste tenue
    · arriba-derecha  -> rosa
  Se hacen con radial-gradient (no filter:blur): el degradé ya es difuso,
  más barato de pintar y sin bordes duros.
*/
.final-cta__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(0, 184, 230, 0.28) 0%, transparent 42%),
    radial-gradient(120% 120% at 100% 0%, rgba(229, 0, 126, 0.32) 0%, transparent 45%),
    var(--color-ink);
  color: var(--color-white);
}

/* El texto va sobre los glows y por delante de los orbes */
.final-cta__content {
  position: relative;
  z-index: 1;
  max-width: 66%;
}

.final-cta__overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.final-cta__headline {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  /* achicado respecto de fs-h1 para que la línea blanca entre en UNA sola */
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Blanca: un solo renglón. Rosa: bloque aparte que cae en 2. */
.final-cta__white {
  display: block;
  white-space: nowrap;
  color: var(--color-white);
}
.final-cta__pink {
  display: block;
  color: var(--color-accent);
}

.final-cta__lead {
  max-width: 42ch;
  margin-top: var(--space-6);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-body);
  color: var(--color-neutral-400);
}

/* ---------- Botones ---------- */
.final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.final-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  text-decoration: none;
  transition:
    transform var(--transition),
    background var(--transition);
}

.final-cta__btn--primary {
  background: var(--color-white);
  color: var(--color-ink);
}

.final-cta__btn--ghost {
  background: rgba(229, 0, 126, 0.14);
  color: var(--color-accent-200); /* rosa más claro, sin borde */
}

.final-cta__btn--primary:hover,
.final-cta__btn--ghost:hover {
  transform: translateY(-2px);
}

.final-cta__btn--ghost:hover {
  background: rgba(229, 0, 126, 0.2);
}

/* ---------- Orbes 3D ---------- */
/* Al ras de la esquina inferior derecha. La imagen ya viene recortada, así que
   va pegada al borde sin offsets ni rotación. */
.final-cta__eyes {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 47%;
  height: auto;
  pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .final-cta__content {
    max-width: 100%;
  }
  /* en poco ancho la blanca ya no entra en 1 línea: la dejamos cortar */
  .final-cta__white {
    white-space: normal;
  }
  .final-cta__eyes {
    width: 62%;
    opacity: 0.5; /* pasan a fondo para no tapar el texto */
  }
}

@media (max-width: 640px) {
  .final-cta {
    --page-padding-x: var(--space-4);
  }
  .final-cta__headline {
    font-size: 1.6rem;
  }
  .final-cta__lead {
    font-size: var(--fs-small);
  }
  /* botones más chicos: no chocan con los orbes de la esquina */
  .final-cta__btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--fs-caption);
  }
  .final-cta__eyes {
    display: block;
    width: 40%;
    opacity: 1;
  }
}