/* ═══════════════════════════════════════════════════════════════════
   JUMARO AI — UPGRADE PACK · Animaciones + utilidades reutilizables
   Pegar en src/index.css o src/styles/animations.css
═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --jk-navy: #0b1220;
  --jk-navy-2:#080f2e;
  --jk-blue: #1d4ed8;
  --jk-blue-2:#2563eb;
  --jk-blue-soft:#60a5fa;
  --jk-blue-dim:#93c5fd;
  --jk-slate-900:#0f172a;
  --jk-slate-700:#334155;
  --jk-slate-500:#64748b;
  --jk-slate-300:#cbd5e1;
  --jk-slate-100:#f1f5f9;
  --jk-bg:#f8fafc;
  --jk-card-shadow: 0 8px 32px rgba(15,23,42,0.06);
  --jk-card-shadow-hover: 0 24px 60px -12px rgba(29,78,216,0.22);
  --title: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body:  'DM Sans', system-ui, sans-serif;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; font-family: var(--body); color: var(--jk-slate-900); background: var(--jk-bg); }
body{ -webkit-font-smoothing: antialiased; }

/* ── 1) GLOBAL FADE-IN ON SCROLL ─────────────────────────────────── */
.jk-fade{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1),
              transform .8s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.jk-fade.is-in{ opacity:1; transform:none; }
.jk-fade--delay-1{ transition-delay: .08s; }
.jk-fade--delay-2{ transition-delay: .16s; }
.jk-fade--delay-3{ transition-delay: .24s; }
.jk-fade--delay-4{ transition-delay: .32s; }
.jk-fade--delay-5{ transition-delay: .40s; }

/* ── 2) GRADIENT TEXT + SHIMMER (para "inteligencia artificial") ── */
.jk-gradient-text{
  background: linear-gradient(90deg,#60a5fa 0%, #93c5fd 40%, #fff 50%, #93c5fd 60%, #60a5fa 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: jkShimmer 6s linear infinite;
}
@keyframes jkShimmer{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 3) HERO BACKGROUND: dot-grid + radial glow + drifting orbs ── */
.jk-hero{
  position: relative;
  background: var(--jk-navy);
  overflow: hidden;
  isolation: isolate;
}
.jk-hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(99,140,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,140,255,0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: jkDrift 40s linear infinite;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}
@keyframes jkDrift{
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 60px 60px, 60px 60px; }
}
.jk-hero__glow{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse 70% 50% at 50% 60%, rgba(29,78,216,0.22) 0%, transparent 70%);
}
.jk-orb{
  position:absolute; border-radius:50%;
  filter: blur(60px);
  opacity:.55;
  pointer-events:none;
  will-change: transform;
}
.jk-orb--a{ width:420px; height:420px; left:-120px; top:-80px;  background:#1d4ed8; animation: jkOrb1 18s ease-in-out infinite; }
.jk-orb--b{ width:520px; height:520px; right:-160px; top:120px; background:#3b82f6; animation: jkOrb2 22s ease-in-out infinite; opacity:.4; }
.jk-orb--c{ width:340px; height:340px; left:30%; bottom:-160px; background:#60a5fa; animation: jkOrb3 26s ease-in-out infinite; opacity:.35; }

@keyframes jkOrb1{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(80px,40px) scale(1.1); } }
@keyframes jkOrb2{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-100px,60px) scale(0.95); } }
@keyframes jkOrb3{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(60px,-50px) scale(1.08); } }

/* ── 4) MAGNETIC CTA — efecto se aplica vía JS, esto es base/hover ─ */
.jk-cta{
  position:relative; display:inline-flex; align-items:center; gap:.5rem;
  padding: 14px 28px; border-radius: 14px;
  font: 600 15px/1 var(--body);
  border: none; cursor: pointer; text-decoration:none;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  will-change: transform;
  overflow: hidden;
}
.jk-cta--primary{
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color:#fff;
  box-shadow: 0 6px 20px rgba(29,78,216,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.jk-cta--primary:hover{ box-shadow: 0 14px 36px rgba(29,78,216,.5), inset 0 1px 0 rgba(255,255,255,.2); }
.jk-cta--ghost{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.18);
  color:#fff; backdrop-filter: blur(10px);
}
.jk-cta--ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); }

/* sweep brillante — sólo en hover, oculto por defecto */
.jk-cta--primary::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%);
  border-radius: inherit; pointer-events:none;
  opacity: 0;
  z-index: 0;
}
.jk-cta--primary:hover::after{
  animation: jkSweep .9s ease forwards;
}
@keyframes jkSweep{
  0%   { transform: translateX(-120%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(120%);  opacity: 0; }
}

/* ── 5) CARD: tilt 3D suave + glow border on hover ─────────────── */
.jk-card{
  background:#fff; border:1.5px solid #e2e8f0; border-radius:20px;
  padding:28px; box-shadow: var(--jk-card-shadow);
  transition: transform .3s cubic-bezier(.2,.7,.2,1),
              box-shadow .3s, border-color .3s;
  position:relative; overflow:hidden;
}
.jk-card::before{
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1.5px;
  background: linear-gradient(135deg, transparent, rgba(29,78,216,0) 60%, rgba(29,78,216,.6));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0; transition: opacity .3s;
  pointer-events:none;
}
.jk-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--jk-card-shadow-hover);
  border-color: transparent;
}
.jk-card:hover::before{ opacity:1; }

/* ── 6) MARQUEE (logos / trust bar) ─────────────────────────────── */
.jk-marquee{ overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.jk-marquee__track{ display:flex; gap:48px; width:max-content; animation: jkMarquee 28s linear infinite; }
@keyframes jkMarquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ── 7) TYPING DOTS (chat preview) ──────────────────────────────── */
.jk-typing{ display:inline-flex; gap:4px; align-items:center; padding:6px 0; }
.jk-typing span{ width:6px; height:6px; border-radius:50%; background:#94a3b8; animation: jkBlink 1.2s infinite; }
.jk-typing span:nth-child(2){ animation-delay:.2s; }
.jk-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes jkBlink{ 0%,80%,100%{ opacity:.3; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-2px); } }

/* ── 8) PULSE DOT (status / badge live) ─────────────────────────── */
.jk-pulse{ position:relative; width:8px; height:8px; border-radius:50%; background:#22c55e; }
.jk-pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; background:rgba(34,197,94,.45); animation: jkPulse 1.6s ease-out infinite; }
@keyframes jkPulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.4); opacity:0; } }

/* ── 9) SCROLL PROGRESS BAR (top) ──────────────────────────────── */
.jk-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, #60a5fa, #1d4ed8);
  z-index: 999; transition: width .15s ease-out;
  box-shadow: 0 0 12px rgba(29,78,216,.6);
}

/* ── 10) ACCORDION (FAQ) — height transition robusta ───────────── */
.jk-accordion__item{ background:#fff; border:1.5px solid #e2e8f0; border-radius:16px; overflow:hidden; transition: border-color .25s, box-shadow .25s; }
.jk-accordion__item.is-open{ border-color:#bfdbfe; box-shadow: 0 6px 24px rgba(29,78,216,.08); }
.jk-accordion__btn{
  width:100%; padding:18px 22px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font: 700 15px var(--title); color: var(--jk-slate-900); text-align:left;
}
.jk-accordion__icon{
  width:32px; height:32px; border-radius:50%;
  background:#f1f5f9; color:#64748b;
  display:grid; place-items:center; font-size:18px; line-height:1;
  transition: background .25s, color .25s, transform .25s;
}
.jk-accordion__item.is-open .jk-accordion__icon{
  background:#1d4ed8; color:#fff; transform: rotate(45deg);
}
.jk-accordion__panel{
  max-height:0; overflow:hidden;
  transition: max-height .35s ease;
}
.jk-accordion__item.is-open .jk-accordion__panel{ max-height: 480px; }
.jk-accordion__body{ padding: 0 22px 20px; color:#475569; font-size:14px; line-height:1.75; }

/* ── 11) HOVER LIFT for any link/btn ───────────────────────────── */
.jk-lift{ transition: transform .2s, box-shadow .2s; }
.jk-lift:hover{ transform: translateY(-2px); }

/* ── 12) FOCUS RING accesible ──────────────────────────────────── */
.jk-cta:focus-visible, .jk-accordion__btn:focus-visible{
  outline: 2px solid #60a5fa; outline-offset: 3px;
}

/* ── 13) RESPONSIVE helpers ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 14) NAV — desktop links vs mobile hamburger menu ──────────── */
.jk-nav__burger{ display:none; }
.jk-nav__mobile{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(320px, 86vw);
  background:rgba(11,18,32,0.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  padding:10px; display:flex; flex-direction:column; gap:4;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.jk-nav__mobile-link{
  background:transparent; border:none; cursor:pointer; text-align:left;
  font:600 15px var(--body); padding:12px 14px; border-radius:10px;
}
.jk-nav__mobile-link:hover{ background:rgba(255,255,255,.06); }

@media (max-width: 720px){
  .jk-nav__links, .jk-nav__cta{ display:none !important; }
  .jk-nav__burger{ display:inline-flex !important; align-items:center; }
}