/* =============================================================
   CrossUp × Escalafy — Capa de animación / micro-interacciones
   No modifica el contenido: sólo enriquece la UI existente.
   Reusa los tokens de styles.css / landing.css / partners.css
   ============================================================= */

/* ---------- Curvas de easing reutilizables ---------- */
:root {
  --ease-out-soft: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out-soft: cubic-bezier(.65, 0, .35, 1);
}

/* Mejor compositing del scroll suave */
html { scroll-behavior: smooth; }
html.has-smooth-scroll { scroll-behavior: auto; } /* el JS toma el control */

/* =============================================================
   1. SCROLL REVEAL  (cards aparecen de forma intuitiva)
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.97);
  transition:
    opacity .85s var(--ease-out-soft),
    transform .85s var(--ease-out-soft);
  transition-delay: var(--reveal-d, 0ms);
}
.reveal.rv-left  { transform: translate3d(-42px, 0, 0); }
.reveal.rv-right { transform: translate3d(42px, 0, 0); }
.reveal.rv-zoom  { transform: scale(.9); }
.reveal.in { opacity: 1; transform: none; }

/* =============================================================
   2. SCROLL PROGRESS BAR (movimiento permanente arriba)
   ============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--escalafy, #E5197F), var(--blue, #2563EB), var(--blue-glow, #60A5FA));
  box-shadow: 0 0 14px rgba(59, 130, 246, .55);
  z-index: 200;
  pointer-events: none;
}

/* =============================================================
   3. NAV — estado al scrollear
   ============================================================= */
.nav { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, padding .35s ease; }
.nav.scrolled {
  background: rgba(6, 10, 24, .9);
  border-bottom-color: rgba(59, 130, 246, .28);
  box-shadow: 0 10px 40px -16px rgba(0, 0, 0, .8);
}
.nav .btn-nav { position: relative; overflow: hidden; }

/* =============================================================
   4. CARDS — bordes que transicionan + sombra + color en hover
   ============================================================= */
.l-card, .plan-l, .testi-l, .ally-card, .l-dash, .l-mockup,
.benefit-box, .l-stats .t, .l-features .f, .tn-badge-l, .benefit-l {
  transition:
    transform .4s var(--ease-out-soft),
    box-shadow .45s ease,
    border-color .45s ease,
    background-color .45s ease;
}

/* Glow interno que aparece en hover (no afecta layout) */
.l-card, .plan-l, .ally-card, .l-dash, .benefit-box {
  position: relative;
}
.l-card::after, .plan-l::after, .ally-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(120% 80% at var(--mx, 50%) var(--my, 0%), rgba(59, 130, 246, .18), transparent 60%);
  opacity: 0; transition: opacity .45s ease; pointer-events: none;
}
.l-card:hover::after, .plan-l:hover::after { opacity: 1; }
.ally-card.escalafy::after { background: radial-gradient(120% 80% at var(--mx, 50%) var(--my, 0%), rgba(229, 25, 127, .20), transparent 60%); }
.ally-card:hover::after { opacity: 1; }

.l-card:hover {
  transform: translateY(-8px);
  border-color: var(--border-blue);
  box-shadow: 0 32px 60px -24px rgba(37, 99, 235, .45), 0 0 0 1px rgba(59, 130, 246, .25);
}
.plan-l:hover {
  transform: translateY(-8px);
  border-color: var(--border-blue);
  box-shadow: 0 36px 70px -26px rgba(37, 99, 235, .42);
}
.plan-l.featured:hover {
  box-shadow: 0 44px 90px -24px rgba(37, 99, 235, .55);
}
.testi-l:hover {
  transform: translateY(-6px);
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 30px 56px -22px rgba(37, 99, 235, .28);
}
.ally-card.crossup:hover {
  transform: translateY(-6px);
  border-color: var(--border-blue);
  box-shadow: 0 34px 64px -24px rgba(37, 99, 235, .40);
}
.ally-card.escalafy:hover {
  transform: translateY(-6px);
  border-color: rgba(229, 25, 127, .45);
  box-shadow: 0 34px 64px -24px rgba(229, 25, 127, .38);
}
.l-dash:hover, .l-mockup:hover {
  transform: translateY(-6px);
  box-shadow: 0 70px 130px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(59, 130, 246, .25);
}
.benefit-box:hover {
  border-color: rgba(59, 130, 246, .4);
  box-shadow: 0 60px 110px -34px rgba(37, 99, 235, .35), 0 0 0 1px rgba(59, 130, 246, .22);
}
.l-stats .t:hover, .benefit-l:hover {
  transform: translateY(-4px);
  border-color: var(--border-blue);
  box-shadow: 0 22px 44px -18px rgba(37, 99, 235, .40);
}
.l-features .f {
  transition: transform .3s var(--ease-out-soft), background-color .3s ease, border-color .3s ease;
}
.l-features .f:hover {
  transform: translateY(-3px);
  background: rgba(37, 99, 235, .12);
  border-color: var(--border-blue);
}
.tn-badge-l:hover { transform: translateY(-3px); border-color: var(--border-blue); }

/* Integration strip + footer links + nav menu activity */
.integ-strip .items .it {
  transition: color .3s ease, transform .3s var(--ease-out-soft);
}
.integ-strip .items .it:hover { color: var(--blue-glow); transform: translateY(-2px); }

/* =============================================================
   5. BOTONES — sheen sweep + loader
   ============================================================= */
.l-btn { position: relative; overflow: hidden; isolation: isolate; }
.l-btn::after {
  content: ''; position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease; z-index: 1; pointer-events: none;
}
.l-btn:hover::after { left: 140%; }
.l-btn.ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .14), transparent); }

/* Loader: spinner centrado (absoluto → sin alterar el layout del botón) */
.l-btn .l-btn-spin, .btn-nav .l-btn-spin {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; z-index: 3;
}
.l-btn.is-loading .l-btn-spin, .btn-nav.is-loading .l-btn-spin {
  opacity: 1; transform: scale(1);
  animation: btn-spin .6s linear infinite;
}
.l-btn.is-loading, .btn-nav.is-loading {
  color: transparent !important;     /* oculta el texto, el spinner queda centrado */
  pointer-events: none;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* btn-mk (mockups) micro feedback */
.btn-mk { transition: transform .2s var(--ease-out-soft), box-shadow .25s ease, filter .25s ease; }
.btn-mk:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -8px rgba(37, 99, 235, .6); filter: brightness(1.08); }
.l-suggest .row .add { transition: transform .25s var(--ease-out-back), box-shadow .25s ease; }
.l-suggest .row:hover .add { transform: scale(1.18) rotate(90deg); box-shadow: 0 8px 18px -4px rgba(37, 99, 235, .7); }

/* =============================================================
   6. KPIs / contadores — sin "salto" de ancho mientras suben
   ============================================================= */
.counting, .counted {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* =============================================================
   7. PLAN destacado — borde con gradiente animado + ribbon
   ============================================================= */
.plan-l.featured {
  /* Relleno OPACO (look original, sutil) + borde con gradiente animado.
     El relleno opaco evita que el gradiente del borde "lave" la card. */
  background:
    linear-gradient(180deg, #16224a, #0c1330) padding-box,
    linear-gradient(130deg, var(--blue-glow), var(--blue), var(--blue-deep), var(--blue-glow)) border-box;
  border: 1.5px solid transparent;
  background-size: 100% 100%, 220% 220%;
  animation: border-flow 7s linear infinite;
}
/* Valores bien resaltados en la card principal */
.plan-l.featured .price .amt { color: #fff; }
.plan-l.featured .price .orig { color: rgba(255, 255, 255, .5); }
.plan-l.featured .price .per { color: rgba(255, 255, 255, .72); }
@keyframes border-flow {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 220% 50%; }
}
/* el ribbon YA es position:absolute (no lo pisamos, sólo recortamos el shimmer) */
.plan-l .ribbon { overflow: hidden; }
.plan-l .bene-tag { position: relative; overflow: hidden; }
.plan-l .ribbon::after, .bene-tag::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45), transparent 80%);
  transform: translateX(-120%);
  animation: shimmer 3.4s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 60% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

/* =============================================================
   8. MOVIMIENTO AMBIENTE (flotación sutil + pulsos)
   ============================================================= */
.benefit-box { animation: floaty 7s var(--ease-in-out-soft) infinite; }
.hero-badge  { animation: floaty 6s var(--ease-in-out-soft) infinite; }
@keyframes floaty {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

/* halo del badge "LIVE" + dot del hero refuerzo */
.l-dash .h .live .pulse, .hero-badge .dot, .bb-head .pip, .l-eyebrow .dot, .eyebrow .dot {
  animation: pip-pulse 2.2s ease-out infinite;
}
@keyframes pip-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.hero-badge .dot { animation-name: pip-pulse-green; }
.bb-head .pip   { animation-name: pip-pulse-pink; }
@keyframes pip-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .5); } 70% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
@keyframes pip-pulse-pink {
  0% { box-shadow: 0 0 0 0 rgba(229, 25, 127, .5); } 70% { box-shadow: 0 0 0 9px rgba(229, 25, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 25, 127, 0); }
}

/* estrellas de opiniones: brillo en cascada al revelarse */
.testi-l.in .stars, .clients .stats.in .stars { animation: star-pop .6s var(--ease-out-back) both; }
@keyframes star-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* =============================================================
   9. CHART del dashboard — trazo que se dibuja al entrar
   ============================================================= */
.l-dash .chart path[stroke] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.l-dash .chart.drawn path[stroke] {
  transition: stroke-dashoffset 2s var(--ease-out-soft);
  stroke-dashoffset: 0;
}
.l-dash .chart path[fill] { opacity: 0; transition: opacity 1.2s ease .8s; }
.l-dash .chart.drawn path[fill] { opacity: 1; }
.l-dash .chart circle { opacity: 0; transition: opacity .5s ease 1.6s, transform .5s var(--ease-out-back) 1.6s; }
.l-dash .chart.drawn circle { opacity: 1; }
.l-dash .chart.drawn circle:last-of-type { animation: ring-ping 2.4s ease-out 2s infinite; transform-origin: 600px 12px; }
@keyframes ring-ping {
  0% { r: 9; opacity: .5; } 100% { r: 22; opacity: 0; }
}

/* =============================================================
   10. Tilt / magnetic — transición rápida cuando el JS lo activa
   ============================================================= */
.tilt-ready { transition: transform .2s ease-out, box-shadow .4s ease, border-color .4s ease; }

/* =============================================================
   11. Accesibilidad — respetar reduce motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .benefit-box, .hero-badge,
  .l-dash .h .live .pulse, .hero-badge .dot, .bb-head .pip, .l-eyebrow .dot, .eyebrow .dot,
  .plan-l.featured, .plan-l .ribbon::after, .bene-tag::after,
  .l-dash .chart.drawn circle:last-of-type {
    animation: none !important;
  }
  .l-btn::after { display: none; }
  html, html.has-smooth-scroll { scroll-behavior: auto; }
}