/* ==========================================================================
   Kinetlas · sistema de diseño
   Tokens y componentes comunes a la web pública y a la plataforma.
   ========================================================================== */

/* ---------- tokens ---------- */
/* Estilo Apple: superficies claras y neutras, texto casi negro, un único azul de acción.
   Las zonas donde manda el modelo 3D usan el ámbito oscuro (.is-dark), como las páginas de producto. */
:root{
  color-scheme: light;
  --k-bg:#ffffff;
  --k-bg-2:#f5f5f7;
  --k-elev-1:#ffffff;
  --k-elev-2:#ffffff;
  --k-elev-3:#fbfbfd;
  --k-tile:#f5f5f7;
  --k-glass:rgba(255,255,255,.72);
  --k-glass-strong:rgba(255,255,255,.88);
  --k-hair:rgba(0,0,0,.08);
  --k-hair-2:rgba(0,0,0,.16);
  --k-fill:rgba(0,0,0,.04);
  --k-fill-hover:rgba(0,0,0,.07);
  --k-fill-active:rgba(0,0,0,.1);
  --k-ink:#1d1d1f;
  --k-ink-2:#6e6e73;
  --k-ink-3:#86868b;
  --k-ink-4:#aeaeb2;
  --k-accent:#0071e3;
  --k-accent-hi:#0077ed;
  --k-accent-ink:#ffffff;
  --k-accent-soft:rgba(0,113,227,.1);
  --k-link:#0066cc;
  --k-muscle:#b8563f;
  --k-agonist:#e8a317;
  --k-synergist:#e8742c;
  --k-antagonist:#3d7cf0;
  --k-danger:#e30000;
  --k-warn:#b64400;
  --k-success:#1d8f50;
  --k-font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --k-font-display:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --k-font-mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --k-fs-display:clamp(2.75rem, 6.2vw, 5rem);
  --k-fs-h1:clamp(2.2rem, 4.4vw, 3.5rem);
  --k-fs-h2:clamp(1.75rem, 3vw, 2.5rem);
  --k-fs-h3:1.3125rem;
  --k-fs-lead:clamp(1.125rem, 1.5vw, 1.3125rem);
  --k-fs-body:1.0625rem;
  --k-fs-sm:.9375rem;
  --k-fs-xs:.75rem;
  --k-r-xs:6px; --k-r-sm:10px; --k-r-md:14px; --k-r-lg:22px; --k-r-xl:30px; --k-r-pill:980px;
  --k-s-1:4px; --k-s-2:8px; --k-s-3:12px; --k-s-4:16px; --k-s-5:24px; --k-s-6:32px; --k-s-7:48px; --k-s-8:72px; --k-s-9:120px;
  --k-shadow-1:0 1px 2px rgba(0,0,0,.04);
  --k-shadow-2:0 4px 24px rgba(0,0,0,.06);
  --k-shadow-3:0 20px 60px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.05);
  --k-blur:blur(20px) saturate(180%);
  --k-ease:cubic-bezier(.22,1,.36,1);
  --k-ease-io:cubic-bezier(.65,0,.35,1);
  --k-t-fast:180ms; --k-t:280ms; --k-t-slow:480ms;
  --k-focus:0 0 0 4px rgba(0,113,227,.3);
}
.is-dark{
  color-scheme: dark;
  --k-bg:#000000; --k-bg-2:#161617; --k-elev-1:#1d1d1f; --k-elev-2:#2c2c2e; --k-elev-3:#161617; --k-tile:#1d1d1f;
  --k-glass:rgba(29,29,31,.72); --k-glass-strong:rgba(29,29,31,.88);
  --k-hair:rgba(255,255,255,.1); --k-hair-2:rgba(255,255,255,.18);
  --k-fill:rgba(255,255,255,.07); --k-fill-hover:rgba(255,255,255,.11); --k-fill-active:rgba(255,255,255,.16);
  --k-ink:#f5f5f7; --k-ink-2:#a1a1a6; --k-ink-3:#86868b; --k-ink-4:#6e6e73;
  --k-accent:#0071e3; --k-accent-hi:#0077ed; --k-accent-soft:rgba(41,151,255,.16); --k-link:#2997ff;
  --k-agonist:#f0b43a; --k-antagonist:#5b8cf0; --k-warn:#ff9f0a;
  --k-shadow-2:0 12px 32px -18px rgba(0,0,0,.65); --k-shadow-3:0 30px 70px -30px rgba(0,0,0,.8);
  background:var(--k-bg); color:var(--k-ink);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
body{margin:0; background:var(--k-bg); color:var(--k-ink); font:400 var(--k-fs-body)/1.47 var(--k-font); letter-spacing:-.022em}
img,svg,canvas,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:none; box-shadow:var(--k-focus); border-radius:var(--k-r-sm)}
::selection{background:rgba(0,113,227,.22)}

/* ---------- tipografía ---------- */
.k-display{font:600 var(--k-fs-display)/1.05 var(--k-font-display); letter-spacing:-.025em; margin:0; text-wrap:balance}
.k-h1{font:600 var(--k-fs-h1)/1.07 var(--k-font-display); letter-spacing:-.02em; margin:0; text-wrap:balance}
.k-h2{font:600 var(--k-fs-h2)/1.1 var(--k-font-display); letter-spacing:-.015em; margin:0; text-wrap:balance}
.k-h3{font:600 var(--k-fs-h3)/1.2 var(--k-font-display); letter-spacing:-.012em; margin:0}
.k-lead{font-size:var(--k-fs-lead); line-height:1.42; color:var(--k-ink-2); margin:0; letter-spacing:-.016em}
.k-eyebrow{font:600 1.0625rem/1.2 var(--k-font); letter-spacing:-.01em; color:var(--k-warn)}
.k-muted{color:var(--k-ink-2)} .k-faint{color:var(--k-ink-3)}
.k-num{font-variant-numeric:tabular-nums}

/* ---------- botones ---------- */
.k-btn{--h:40px; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:var(--h); padding:0 16px; border-radius:var(--k-r-pill);
  border:1px solid transparent; background:var(--k-fill); color:var(--k-ink); font-weight:400; font-size:1.0625rem; letter-spacing:-.022em; cursor:pointer; white-space:nowrap;
  transition:transform var(--k-t-fast) var(--k-ease), background-color var(--k-t-fast) ease-out, border-color var(--k-t-fast) ease-out, color var(--k-t-fast) ease-out, box-shadow var(--k-t) ease-out;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent}
.k-btn:hover{background:var(--k-fill-hover)}
.k-btn:active{transform:scale(.97); transition-duration:90ms}
.k-btn svg{width:17px; height:17px; flex:none}
.k-btn--primary{background:var(--k-accent); color:#fff}
.k-btn--primary:hover{background:var(--k-accent-hi)}
.k-btn--accent{background:var(--k-accent); color:var(--k-accent-ink)}
.k-btn--accent:hover{background:var(--k-accent-hi)}
.k-btn--ghost{background:transparent; border-color:var(--k-accent); color:var(--k-accent)}
.is-dark .k-btn--ghost{border-color:var(--k-link); color:var(--k-link)}
.k-btn--ghost:hover{background:var(--k-accent); color:#fff; border-color:var(--k-accent)}
.k-btn--quiet{background:transparent; padding:0 6px; color:var(--k-ink-2); font-size:.8125rem}
.k-btn--quiet:hover{background:transparent; color:var(--k-ink)}
.k-btn--sm{--h:30px; padding:0 13px; font-size:.8125rem; letter-spacing:-.01em}
.k-btn--lg{--h:46px; padding:0 22px; font-size:1.0625rem}
.k-btn--block{width:100%}
.k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; transform:none}
.k-btn.is-loading{color:transparent; position:relative; pointer-events:none}
.k-btn.is-loading::after{content:""; position:absolute; width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-color:var(--k-ink) transparent var(--k-ink) transparent; animation:k-spin .8s linear infinite}
.k-btn--primary.is-loading::after{border-color:#fff transparent #fff transparent}
.k-link{color:var(--k-link); display:inline-flex; align-items:center; gap:4px; font-weight:400}
.k-link:hover{text-decoration:underline}
.k-link svg{width:15px; height:15px; transition:transform var(--k-t) var(--k-ease)}
.k-link:hover svg{transform:translateX(3px)}
@keyframes k-spin{to{transform:rotate(360deg)}}

/* ---------- campos ---------- */
.k-field{display:flex; flex-direction:column; gap:7px}
.k-label{font-size:var(--k-fs-sm); font-weight:500; color:var(--k-ink)}
.k-input{height:50px; width:100%; padding:0 16px; border-radius:var(--k-r-md); background:var(--k-elev-1); border:1px solid #d2d2d7; color:var(--k-ink); font-size:1.0625rem;
  transition:border-color var(--k-t-fast) ease-out, background-color var(--k-t-fast) ease-out, box-shadow var(--k-t) ease-out}
textarea.k-input{height:auto; min-height:120px; padding:12px 14px; resize:vertical; line-height:1.5}
select.k-input{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23aab6b2' stroke-width='1.8' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:36px}
.k-input::placeholder{color:var(--k-ink-4)}
.k-input:hover{border-color:var(--k-hair-2)}
.k-input:focus{outline:none; border-color:var(--k-accent); box-shadow:var(--k-focus)}
.k-field.is-error .k-input{border-color:var(--k-danger); background:#fff5f5}
.k-field .k-hint{font-size:var(--k-fs-xs); color:var(--k-ink-3)}
.k-field.is-error .k-hint{color:var(--k-danger)}
.k-check{display:flex; gap:10px; align-items:flex-start; font-size:var(--k-fs-sm); color:var(--k-ink-2); cursor:pointer}
.k-check input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--k-accent); flex:none}

/* ---------- superficies ---------- */
.k-card{background:var(--k-elev-1); border:1px solid var(--k-hair); border-radius:var(--k-r-lg); box-shadow:var(--k-shadow-1)}
.k-glass{background:var(--k-glass); backdrop-filter:var(--k-blur); -webkit-backdrop-filter:var(--k-blur); border:1px solid var(--k-hair); box-shadow:var(--k-shadow-2)}
.k-chip{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--k-r-pill); background:var(--k-fill); border:1px solid var(--k-hair); font-size:var(--k-fs-xs); font-weight:600; color:var(--k-ink-2); white-space:nowrap}
.k-chip i{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block}
.k-badge{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:var(--k-r-pill); font-size:.75rem; font-weight:600; letter-spacing:0; background:var(--k-accent-soft); color:var(--k-accent)}
.k-badge--soon{background:transparent; border:1px solid currentColor; color:var(--k-warn)}
.k-divider{height:1px; background:var(--k-hair); border:0; margin:0}
.k-kbd{font:600 .72rem/1 var(--k-font-mono); padding:3px 6px; border-radius:5px; border:1px solid var(--k-hair-2); color:var(--k-ink-3)}

/* ---------- tooltip ---------- */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translate(-50%,4px); opacity:0; pointer-events:none; white-space:nowrap;
  font-size:.76rem; font-weight:500; padding:6px 9px; border-radius:8px; background:var(--k-ink); color:var(--k-bg); box-shadow:var(--k-shadow-2);
  transition:opacity var(--k-t-fast) ease-out, transform var(--k-t-fast) var(--k-ease); transition-delay:0s}
[data-tip]:hover::after{opacity:1; transform:translate(-50%,0); transition-delay:.45s}

/* ---------- modal / menú ---------- */
.k-scrim{position:fixed; inset:0; background:rgba(4,6,7,.6); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); z-index:90; animation:k-fade var(--k-t) ease-out}
.k-modal{position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-50%); width:min(520px, calc(100% - 32px)); max-height:calc(100% - 48px); overflow:auto;
  background:var(--k-elev-2); border:1px solid var(--k-hair); border-radius:var(--k-r-xl); box-shadow:var(--k-shadow-3); padding:var(--k-s-6); animation:k-pop var(--k-t-slow) var(--k-ease)}
.k-menu{position:absolute; min-width:220px; padding:6px; border-radius:var(--k-r-md); background:var(--k-glass-strong); backdrop-filter:var(--k-blur); -webkit-backdrop-filter:var(--k-blur);
  border:1px solid var(--k-hair); box-shadow:var(--k-shadow-3); animation:k-pop var(--k-t) var(--k-ease); transform-origin:top right; z-index:60}
.k-menu a,.k-menu button{display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border-radius:8px; background:transparent; border:0; text-align:left; cursor:pointer; font-size:.92rem; color:var(--k-ink)}
.k-menu a:hover,.k-menu button:hover{background:var(--k-fill-hover)}
@keyframes k-fade{from{opacity:0}}
@keyframes k-pop{from{opacity:0; transform:translate(-50%,-48%) scale(.97)}}
.k-menu{animation-name:k-pop-menu} @keyframes k-pop-menu{from{opacity:0; transform:scale(.96) translateY(-4px)}}

/* ---------- estados ---------- */
.k-skeleton{background:linear-gradient(90deg, rgba(0,0,0,.04), rgba(0,0,0,.08), rgba(0,0,0,.04)); background-size:200% 100%; animation:k-shimmer 1.4s linear infinite; border-radius:var(--k-r-sm)}
@keyframes k-shimmer{to{background-position:-200% 0}}
.k-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:var(--k-s-7) var(--k-s-5); color:var(--k-ink-2)}
.k-empty svg{width:40px; height:40px; color:var(--k-ink-4)}
.k-empty b{color:var(--k-ink); font-size:1.05rem}
.k-alert{display:flex; gap:10px; padding:12px 14px; border-radius:var(--k-r-md); font-size:var(--k-fs-sm); background:#fff5f5; border:1px solid rgba(227,0,0,.25); color:var(--k-danger)}
.k-alert--ok{background:var(--k-accent-soft); border-color:rgba(0,113,227,.3); color:var(--k-accent)}

/* ---------- aparición progresiva ---------- */
.k-reveal{transform:translateY(14px); transition:transform .8s var(--k-ease)}
.k-reveal.is-in{transform:none}

/* ---------- accesibilidad ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; scroll-behavior:auto !important}
  .k-reveal{transform:none}
  .k-btn:active{transform:none}
}
@media (prefers-reduced-transparency: reduce){
  .k-glass,.k-menu{background:var(--k-elev-2); backdrop-filter:none; -webkit-backdrop-filter:none}
}
@media (prefers-contrast: more){
  :root{--k-hair:rgba(0,0,0,.22); --k-hair-2:rgba(0,0,0,.36); --k-ink-2:#424245; --k-ink-3:#57575c}
  .is-dark{--k-hair:rgba(255,255,255,.26); --k-hair-2:rgba(255,255,255,.4); --k-ink-2:#d2d2d7; --k-ink-3:#b0b0b5}
}