/* ═══════════════════════════════════════════════════════════════════════
   IAposs · PREMIUM ELEVATION LAYER
   Capa aditiva sobre styles.css. Conserva 100% la identidad (oscuro,
   gradientes azul/violeta, tipografía, espaciados, glass). Solo eleva
   detalles: profundidad, microinteracciones, luz e "IA viva".
   ═══════════════════════════════════════════════════════════════════════ */

:root { --ease-prem: cubic-bezier(0.22, 1, 0.36, 1); }

/* ───────── Microinteracciones: cards ───────── */
.kpi, .pain-card, .price-card, .tst-card, .night-card, .mod-card,
.gd-cap, .vs-item, .tr-row, .cat-chip {
  transition: transform .4s var(--ease-prem), box-shadow .4s var(--ease-prem),
              border-color .4s var(--ease-prem), background .4s var(--ease-prem);
  will-change: transform;
}
.kpi:hover, .pain-card:hover, .tst-card:hover, .night-card:hover {
  transform: translateY(-5px);
  border-color: oklch(0.62 0.16 265 / 0.5);
  box-shadow: 0 26px 54px -26px oklch(0.5 0.22 282 / 0.6), inset 0 1px 0 oklch(1 0 0 / 0.2);
}
.price-card:hover { transform: translateY(-6px); box-shadow: 0 34px 80px -30px oklch(0.5 0.22 282 / 0.65); }
.tr-row:hover { transform: translateX(4px); }
.gd-cap { border-radius: 12px; padding: 4px 8px; margin: -4px -8px; }
.gd-cap:hover { transform: translateX(4px); background: oklch(1 0 0 / 0.03); }
.gd-cap-dot { transition: transform .35s var(--ease-prem), box-shadow .35s var(--ease-prem); }
.gd-cap:hover .gd-cap-dot { transform: scale(1.3); box-shadow: 0 0 16px oklch(0.66 0.22 280 / 0.95); }

/* brillo sutil cruzando kpi / módulos al hover */
.kpi, .mod-card { position: relative; overflow: hidden; }
.kpi::after, .mod-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, oklch(1 0 0 / 0.08) 50%, transparent 68%);
  background-size: 250% 100%; background-position: 160% 0; opacity: 0;
  transition: background-position .9s var(--ease-prem), opacity .4s;
}
.kpi:hover::after, .mod-card:hover::after { background-position: -60% 0; opacity: 1; }

/* ───────── Botones: respiración + elevación ───────── */
.btn { transition: transform .25s var(--ease-prem), box-shadow .35s var(--ease-prem); }
.btn-primary.btn-gradient { animation: btn-breathe 3.8s ease-in-out infinite; }
.btn-primary:hover { transform: translateY(-2px); }
@keyframes btn-breathe {
  0%, 100% { box-shadow: 0 10px 32px -8px oklch(0.65 0.2 280 / 0.55); }
  50%      { box-shadow: 0 16px 44px -6px oklch(0.65 0.2 280 / 0.85), 0 0 0 1px oklch(0.72 0.16 270 / 0.22); }
}

/* ───────── Dashboard & device: profundidad, aura, reflejo ───────── */
.dash-section, .hero-side { perspective: 1700px; }
.dash-frame {
  position: relative;
  transition: transform .45s var(--ease-prem), box-shadow .5s var(--ease-prem);
  transform-style: preserve-3d;
}
.dash-frame::before {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(65% 90% at 50% 0%, oklch(0.6 0.2 272 / 0.28), transparent 70%);
  filter: blur(34px); animation: aura-breathe 6.5s ease-in-out infinite;
}
@keyframes aura-breathe { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
/* reflejo de luz que cruza el dashboard lentamente */
.dash-frame > .dash-chrome::after {
  content: ""; position: absolute; top: 0; left: -65%; width: 50%; height: 1400%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / 0.05), transparent);
  transform: skewX(-18deg); pointer-events: none; animation: sheen 11s ease-in-out infinite;
}
.dash-chrome { position: relative; overflow: hidden; }
@keyframes sheen { 0%, 74%, 100% { left: -65%; } 88% { left: 150%; } }

.hero-device { animation: float-soft 7.5s ease-in-out infinite; }
@keyframes float-soft {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}

/* ═══════════════ GERENTE DIGITAL — inteligencia viva ═══════════════ */
.ai-core { transition: transform .55s var(--ease-prem); }

.core-sphere { animation: core-breathe 5.6s ease-in-out infinite, core-float 8s ease-in-out infinite; }
@keyframes core-breathe {
  0%, 100% { transform: scale(1);
    box-shadow: 0 0 66px -6px oklch(0.6 0.22 275 / 0.55), 0 0 130px 8px oklch(0.55 0.22 288 / 0.28),
                inset -14px -20px 52px oklch(0.16 0.08 288 / 0.85); }
  50%      { transform: scale(1.05);
    box-shadow: 0 0 100px 2px oklch(0.66 0.24 275 / 0.85), 0 0 190px 26px oklch(0.6 0.24 288 / 0.45),
                inset -14px -20px 52px oklch(0.16 0.08 288 / 0.85); }
}
@keyframes core-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -16px; } }

/* aura exterior que respira */
.core-aura {
  position: absolute; width: 360px; height: 360px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, oklch(0.6 0.22 282 / 0.38) 0%, oklch(0.55 0.2 260 / 0.12) 42%, transparent 64%);
  filter: blur(22px); animation: aura-pulse 5.6s ease-in-out infinite;
}
@keyframes aura-pulse { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.1); } }

/* anillo de energía cónico girando (parece "pensar") */
.core-conic {
  position: absolute; width: 336px; height: 336px; border-radius: 50%; pointer-events: none; opacity: .85;
  background: conic-gradient(from 0deg,
    transparent 0%, oklch(0.72 0.18 248 / 0.55) 11%, transparent 25%,
    transparent 58%, oklch(0.66 0.2 292 / 0.5) 71%, transparent 85%);
  -webkit-mask: radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
          mask: radial-gradient(closest-side, transparent 78%, #000 79%, #000 100%);
  animation: core-spin 13s linear infinite;
}

/* partículas en órbita */
.core-orbit { position: absolute; width: 304px; height: 304px; animation: core-spin 19s linear infinite; }
.core-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #c2d8ff; box-shadow: 0 0 10px oklch(0.85 0.12 250 / 0.95); }
.core-dot-1 { top: 3%;  left: 50%; }
.core-dot-2 { top: 50%; left: 96%; width: 4px; height: 4px; animation: dot-twinkle 3s ease-in-out infinite; }
.core-dot-3 { top: 93%; left: 30%; width: 5px; height: 5px; animation: dot-twinkle 4.2s ease-in-out infinite .5s; }
@keyframes dot-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* la chispa interior pulsa con luz */
.core-spark { animation: lm-twinkle 3.4s ease-in-out infinite, spark-glow 5.6s ease-in-out infinite; }
@keyframes spark-glow {
  0%, 100% { filter: drop-shadow(0 0 10px oklch(1 0 0 / 0.7)); }
  50%      { filter: drop-shadow(0 0 24px oklch(0.92 0.1 250 / 1)); }
}

/* ───────── Social proof: categorías de negocio ───────── */
.proof-cats { padding: 50px 0 24px; }
.cats-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 880px; margin: 8px auto 0; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 999px;
  background: oklch(0.18 0.025 270 / 0.5); border: 1px solid var(--line-soft);
  font-size: 14.5px; font-weight: 500; color: var(--fg-dim);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cat-chip:hover { transform: translateY(-4px); color: #fff;
  border-color: oklch(0.6 0.16 260 / 0.55); background: oklch(0.2 0.03 270 / 0.7);
  box-shadow: 0 16px 34px -18px oklch(0.5 0.2 280 / 0.6); }
.cat-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad);
  box-shadow: 0 0 9px oklch(0.65 0.2 270 / 0.8); }

/* ───────── Video block (reservado para demo 30s) ───────── */
.video-sec { padding-top: 8px; }
.video-block {
  position: relative; max-width: 1000px; margin: 8px auto 0; aspect-ratio: 16 / 9;
  border-radius: 26px; overflow: hidden; display: grid; place-items: center;
  border: 1px solid oklch(1 0 0 / 0.12);
  background: linear-gradient(135deg, oklch(0.16 0.025 270 / 0.85), oklch(0.10 0.02 270 / 0.78));
  box-shadow: 0 60px 140px -50px oklch(0.04 0.02 270 / 0.95), inset 0 1px 0 oklch(1 0 0 / 0.12);
}
.video-block::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 38%, oklch(0.5 0.2 276 / 0.2), transparent 72%);
}
.video-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(oklch(1 0 0 / 0.04) 1px, transparent 1px),
                    linear-gradient(90deg, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: radial-gradient(70% 70% at 50% 50%, #000, transparent);
          mask: radial-gradient(70% 70% at 50% 50%, #000, transparent);
}
.video-play {
  position: relative; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grad); cursor: pointer; z-index: 1;
  box-shadow: 0 0 64px -6px oklch(0.65 0.22 280 / 0.85);
  animation: btn-breathe 3.8s ease-in-out infinite; transition: transform .3s var(--ease-prem);
}
.video-play:hover { transform: scale(1.09); }
.video-cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  font-size: 12.5px; letter-spacing: .04em; color: var(--fg-dim); z-index: 1; }

/* respeta a quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  .core-sphere, .core-aura, .core-conic, .core-orbit, .core-spark,
  .btn-primary.btn-gradient, .hero-device, .dash-frame::before,
  .dash-frame > .dash-chrome::after, .video-play { animation: none !important; }
}

/* ───────── Nav en móvil: compacto y con aire (sin botones pegados) ───────── */
@media (max-width: 640px) {
  .nav { padding: 14px 0; gap: 12px; }
  .ia-logo-nav { height: 26px; }
  .nav-cta { gap: 12px; }
  .nav-cta .link-muted { font-size: 13px; white-space: nowrap; }
  .nav .btn-primary { padding: 9px 15px; font-size: 13px; white-space: nowrap; }
  .nav .btn-primary svg { display: none; }   /* la flecha estorba en pantalla chica */
}
/* en pantallas muy chicas, dejar solo logo + "Empezar gratis" */
@media (max-width: 380px) {
  .nav-cta .link-muted { display: none; }
}