/* =====================================================
   LEVEL 2 — Ascend Life Partners
   Typewriter · Counter · Card Glow · Entrance
   ===================================================== */

/* ─── Typewriter reveal (clip-path) ─── */
.tw-headline {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.tw-headline.tw-active {
  animation: twReveal 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes twReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Cursor parpadeante */
.tw-cursor {
  display: inline-block;
  color: #5EE08A;
  font-weight: 300;
  font-size: 0.9em;
  line-height: 1;
  margin-left: 4px;
  vertical-align: middle;
  animation: twBlink 0.85s step-end infinite;
  transition: opacity 0.4s ease;
}
@keyframes twBlink {
  from, to { opacity: 1; }
  50%       { opacity: 0; }
}

/* Cursor en páginas claras / hero oscuro */
.s-hero .tw-cursor { color: #4ade80; }

/* ─── Contadores animados ─── */
[data-counter] {
  display: block;
  font-variant-numeric: tabular-nums;
}

/* ─── Product card glow (index.html) ─── */
.product-card {
  transition:
    transform      0.38s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow     0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-color   0.38s ease,
    background     0.38s ease !important;
}
.product-card:hover {
  transform:    translateY(-10px) !important;
  border-color: rgba(214, 170, 69, 0.6) !important;
  background:   rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 0 0 1px rgba(214, 170, 69, 0.2),
    0 0 40px rgba(214, 170, 69, 0.12),
    0 24px 56px rgba(0, 0, 0, 0.5) !important;
}

/* Icono del producto — pop en hover */
.product-card:hover .product-icon {
  display: inline-block;
  animation: iconPop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iconPop {
  0%   { transform: scale(1)    rotate(0deg); }
  40%  { transform: scale(1.3)  rotate(-8deg); }
  70%  { transform: scale(0.92) rotate(4deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* ─── Pasos (index) — hover lift + glow ─── */
.step {
  transition:
    transform    0.3s ease,
    background   0.3s ease,
    border-color 0.3s ease !important;
}
.step:hover {
  transform:    translateY(-6px) !important;
  background:   rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(214, 170, 69, 0.4) !important;
}
.step:hover .step-num {
  text-shadow: 0 0 24px rgba(245, 216, 122, 0.7);
}

/* ─── Pasos (sales) — glow en círculo ─── */
.s-step-circle {
  transition: box-shadow 0.35s ease, transform 0.35s ease !important;
}
.s-step:hover .s-step-circle {
  box-shadow: 0 0 28px rgba(214, 170, 69, 0.5) !important;
  transform:  scale(1.1) !important;
}

/* ─── Testimonios — shimmer border ─── */
.w-testimonial {
  position: relative;
  overflow: hidden;
}
.w-testimonial::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(
    135deg,
    transparent 20%,
    rgba(214, 170, 69, 0.12) 50%,
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.w-testimonial:hover::after { opacity: 1; }

/* ─── Mini cards (recruit) — glow dorado ─── */
.mini {
  transition:
    transform    0.3s ease,
    border-color 0.3s ease,
    box-shadow   0.3s ease !important;
}
.mini:hover {
  transform:    translateY(-4px) !important;
  border-color: rgba(214, 170, 69, 0.35) !important;
  box-shadow:   0 8px 28px rgba(0, 0, 0, 0.3) !important;
}

/* ─── Stagger grid children ─── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.stagger-visible > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.stagger-visible > *:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger.stagger-visible > *:nth-child(2)  { transition-delay: 0.15s; }
.reveal-stagger.stagger-visible > *:nth-child(3)  { transition-delay: 0.25s; }
.reveal-stagger.stagger-visible > *:nth-child(4)  { transition-delay: 0.35s; }
.reveal-stagger.stagger-visible > *:nth-child(5)  { transition-delay: 0.45s; }
.reveal-stagger.stagger-visible > *:nth-child(6)  { transition-delay: 0.55s; }

/* ─── Recruit hero — entrada lateral ─── */
.hero-enter-left {
  opacity: 0;
  transform: translateX(-52px);
  transition:
    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-enter-left.enter-visible { opacity: 1; transform: translateX(0); }

.hero-enter-right {
  opacity: 0;
  transform: translateX(52px);
  transition:
    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.hero-enter-right.enter-visible { opacity: 1; transform: translateX(0); }

/* ─── FAQ item hover (recruit) ─── */
.faq details {
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.faq details:hover {
  border-color: rgba(214, 170, 69, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}