/* Capa única de animación de la tienda — todo ajustable desde las variables
   de abajo (--dur-*, --ease-*). Se carga DESPUÉS de kstore.css así que sus
   reglas (misma especificidad, orden de archivo posterior) pueden afinar
   transiciones ya existentes sin tocar ese archivo.

   Reduced motion: kstore.css ya trae una regla global
   ".kstore-scope, .kstore-scope * { transition:none!important; animation:none!important; }"
   bajo @media (prefers-reduced-motion: reduce) — eso apaga automáticamente
   TODO lo de acá abajo que sea transition/animation CSS. Los efectos que
   viven en JS (contadores, fly-to-cart, ripple) se auto-desactivan en
   motion.js consultando la misma media query. */

.kstore-scope {
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* Reserva el ancho de la scrollbar siempre (evita que el contenido salte
   1 columna de ancho al pasar de "sin scroll" a "con scroll") y desactiva
   el scroll-anchoring del navegador (evita micro-saltos verticales cuando
   el navegador reancla el scroll a un elemento que cambió de tamaño). */
html { scrollbar-gutter: stable; }
html, body { overflow-anchor: none; }

/* ---------- transición de tema (claro/oscuro) sin parpadeo ---------- */
.kstore-scope,
.kstore-scope .card, .kstore-scope .panel, .kstore-scope header.top, .kstore-scope footer.foot,
.kstore-scope .area, .kstore-scope .step, .kstore-scope .chip, .kstore-scope .stat,
.kstore-scope .filters, .kstore-scope .intent button, .kstore-scope .intent > a,
.kstore-scope .icon-btn, .kstore-scope .btn-staff, .kstore-scope .lang-btn, .kstore-scope .lang-menu,
.kstore-scope .route, .kstore-scope .mail, .kstore-scope .step-item .dot {
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

/* ---------- header: sombra + blur al hacer scroll ----------
   Antes la altura de .top-in también transicionaba (72px -> 60px), lo que
   forzaba layout (reflow) en cada tick del scroll y, combinado con el
   aurora de abajo, producía el "rebote" medido (~10fps, 0% frames <16.7ms)
   reportado en vivo. Ya no se anima altura — solo sombra/fondo
   (compositor-only), con una altura de header fija (--header-h). */
header.top {
  transition: box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
header.top.scrolled { box-shadow: 0 8px 24px rgba(10,22,49,.16); backdrop-filter: blur(10px) saturate(1.15); }

/* subrayado animado en los enlaces del nav (el de aria-current ya es fijo) */
nav.main a, nav.main button { overflow: hidden; }
nav.main a::before, nav.main button::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
nav.main a:hover::before, nav.main button:hover::before { transform: scaleX(1); }
nav.main a[aria-current="page"]::before, nav.main button[aria-current="page"]::before { display: none; }

/* ---------- barra de progreso de navegación ---------- */
.nav-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary));
  z-index: 100; opacity: 0; transition: opacity var(--dur-fast) linear;
  pointer-events: none;
}
.nav-progress.on { opacity: 1; width: 78%; transition: width 1.1s var(--ease-out), opacity var(--dur-fast) linear; }

/* ---------- transición entre páginas ---------- */
.page-fade { animation: page-fade-in var(--dur-base) var(--ease-out); }
@keyframes page-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- hero: aurora de fondo (solo transform/opacity) ---------- */
.hero-in, .d-hero-in { position: relative; z-index: 1; }
.hero::after, .d-hero::after {
  content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(38% 42% at 18% 22%, rgba(37,99,255,.35), transparent 70%),
    radial-gradient(34% 38% at 82% 14%, rgba(0,194,255,.32), transparent 70%),
    radial-gradient(40% 46% at 68% 88%, rgba(124,92,255,.26), transparent 70%),
    radial-gradient(30% 34% at 12% 82%, rgba(20,217,165,.22), transparent 70%);
  filter: blur(14px);
  /* Medido con Playwright (rAF sampling, 1888x908, detalle de programa,
     tema oscuro): con esta animación en loop infinito el frame rate caía a
     ~10fps sostenidos (96%+ de frames >16.7ms) — el "rebote" reportado.
     Quitando SOLO el loop (sin tocar backdrop-filter del header) el frame
     rate volvía a 60fps estable. Un solo pase de entrada (sin infinite)
     conserva el efecto visual y, una vez termina, el compositor queda
     inactivo (60fps confirmado de nuevo tras el pase). */
  animation: aurora-drift 2.8s var(--ease-out) 1 both;
  will-change: transform;
}
@keyframes aurora-drift {
  0%   { transform: translate(-1.5%,1%) scale(.97); }
  100% { transform: translate(0,0) scale(1); }
}

/* entrada escalonada genérica — aplicar class="stagger" al contenedor */
.stagger > * { animation: fade-up-in var(--dur-slow) var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 70ms; }
.stagger > *:nth-child(3) { animation-delay: 140ms; }
.stagger > *:nth-child(4) { animation-delay: 210ms; }
.stagger > *:nth-child(5) { animation-delay: 280ms; }
.stagger > *:nth-child(n+6) { animation-delay: 350ms; }
@keyframes fade-up-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* contadores del hero */
/* 4 columnas de ancho fijo en escritorio (nunca salta la 4ta a una segunda
   línea por falta de espacio con etiquetas largas en inglés); 2x2 en
   móvil. Alto reservado explícito en el número (line-height fijo) para
   que la animación de conteo no cambie la caja y no dispare CLS. */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 22px; row-gap: 18px; margin-top: 22px; max-width: 560px; }
.hero-stats .stat-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-stats .stat-item b { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hero-stats .stat-item span { font-size: .74rem; color: var(--fg-3); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- scroll reveal (secciones/tarjetas) ---------- */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

/* ---------- tarjetas de curso: hover elevación + shine + zoom ---------- */
.card { will-change: transform; }
.card:hover { box-shadow: 0 18px 34px -10px var(--card-tint, rgba(37,99,255,.35)); }
.cover svg { transition: transform .6s var(--ease-out); transform-origin: center; }
.card:hover .cover svg, .d-cover:hover .cover svg { transform: scale(1.03); }
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.35) 50%, transparent 58%);
  transform: translateX(-130%); transition: transform .85s var(--ease-out);
}
.card:hover .cover::after { transform: translateX(130%); }

/* chips / pills / tags: micro-animación al hover */
.chip, .tag, .pill, .opt { transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast), border-color var(--dur-fast); }
.chip:hover, .opt:hover { transform: translateY(-2px); }

/* botón con gradiente animado */
.btn-soft { background-size: 200% 100%; background-position: 0% 0; transition: background-position .5s var(--ease-out), filter var(--dur-fast); }
.btn-soft:hover { background-position: 100% 0; }

/* ripple de click en botones */
.btn, .icon-btn, .crow .btn-add { position: relative; overflow: hidden; }
.tal-ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.55);
  transform: scale(0); opacity: .9; pointer-events: none;
  animation: tal-ripple-anim .6s var(--ease-out) forwards;
}
@keyframes tal-ripple-anim { to { transform: scale(1); opacity: 0; } }

/* inputs: borde animado */
.field input[type=text], .field input[type=email] {
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

/* ---------- carrito: badge pop + pulso del ícono ---------- */
.badge.pop { animation: badge-pop .45s var(--ease-spring); }
@keyframes badge-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
.icon-btn.pulse { animation: icon-pulse .55s var(--ease-out); }
@keyframes icon-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,255,.45); } 100% { box-shadow: 0 0 0 12px rgba(37,99,255,0); } }

/* drawer/scrim/toast: mismas duraciones centralizadas acá */
.scrim { transition: opacity var(--dur-base) var(--ease-out); }
aside.drawer { transition: transform var(--dur-base) var(--ease-out); }
.toast { transition: all var(--dur-base) var(--ease-out); }

/* ---------- skeleton loaders (shimmer) ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 8px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.card-skeleton { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.card-skeleton .sk-cover { aspect-ratio: 16/8.8; border-radius: 0; }
.card-skeleton .sk-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.card-skeleton .sk-line { height: 14px; }
.card-skeleton .sk-line.w80 { width: 80%; }
.card-skeleton .sk-line.w60 { width: 60%; }
.card-skeleton .sk-line.w40 { width: 40%; }

/* ---------- checkout: stepper ---------- */
.stepper { display: flex; align-items: center; gap: 0; margin: 18px 0 8px; max-width: 560px; }
.step-item { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 110px; text-align: center; }
.step-item .dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); border: 2px solid var(--line); color: var(--fg-3); font-weight: 700; font-size: .85rem;
}
.step-item .dot svg { width: 16px; height: 16px; }
.step-item b { font-size: .74rem; color: var(--fg-3); font-weight: 600; }
.step-item.active .dot { border-color: var(--accent); color: var(--accent); animation: kstore-pulse 1.4s infinite; }
.step-item.active b, .step-item.done b { color: var(--fg); }
.step-item.done .dot { background: var(--ok); border-color: var(--ok); color: #06240f; }
.step-line { flex: 1; height: 2px; background: var(--line); position: relative; margin-bottom: 22px; overflow: hidden; }
.step-line span { position: absolute; inset: 0; width: 0; background: var(--ok); transition: width var(--dur-slow) var(--ease-out); display: block; }

/* shake sutil al fallar validación */
.panel.shake { animation: shake-x .4s var(--ease-out); }
@keyframes shake-x {
  10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); }
}

/* check de éxito dibujado en SVG */
.success-check { color: var(--ok); }
.sc-circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: sc-draw-circle .5s var(--ease-out) forwards; }
.sc-check { stroke-dasharray: 40; stroke-dashoffset: 40; animation: sc-draw-check .35s var(--ease-out) .45s forwards; }
@keyframes sc-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes sc-draw-check { to { stroke-dashoffset: 0; } }

/* ---------- logo del header ---------- */
.brand-logo { animation: logo-in var(--dur-slow) var(--ease-out); transition: transform var(--dur-fast) var(--ease-out); }
.brand:hover .brand-logo { transform: scale(1.03); }
@keyframes logo-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }