/* ==========================================================================
   COMMAND — Base + componentes compartidos v1.0
   Requiere tokens.css. Reutilizable por cualquier web de Command.
   ========================================================================== */

/* ---- Reset mínimo -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
[data-theme="paper"] { color-scheme: light; }
body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-display); text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--cmd-red); color: var(--cmd-white); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

html { scrollbar-color: var(--line-strong) var(--bg); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-boot);
  padding: var(--space-2) var(--space-4);
  background: var(--cmd-red); color: var(--cmd-white);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  transform: translateY(-200%); transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus { transform: none; }

/* ---- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---- Etiqueta mono (eyebrow) --------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--accent { color: var(--accent-fg); }
.eyebrow::before {
  content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--cmd-red);
}
.eyebrow--plain::before { content: none; }

/* ---- LED de estado -------------------------------------------------------- */
.led {
  --led: var(--cmd-idle);
  position: relative; display: inline-block; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 18%, transparent), 0 0 10px color-mix(in srgb, var(--led) 60%, transparent);
}
.led--live  { --led: var(--cmd-ok); }
.led--beta  { --led: var(--cmd-warn); }
.led--soon  { --led: var(--cmd-idle); box-shadow: 0 0 0 2px color-mix(in srgb, var(--led) 25%, transparent); }
.led--red   { --led: var(--cmd-red-hot); }
.led--pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--led);
  animation: led-pulse 2.4s var(--ease-out) infinite;
}
@keyframes led-pulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }

/* ---- Botones --------------------------------------------------------------- */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--line-strong);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3);
  min-height: 48px; padding: 0 var(--space-5);
  border: 1px solid var(--btn-line); border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-mono); text-transform: uppercase; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn::before { /* barrido de relleno */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--bg-elev-2));
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:hover { border-color: var(--fg-subtle); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn__icon { width: 16px; height: 16px; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn__icon--arrow { transform: translateX(3px); }

.btn--primary {
  --btn-bg: var(--cmd-red); --btn-fg: var(--cmd-white); --btn-line: var(--cmd-red);
  --btn-fill: var(--cmd-red-hot);
}
.btn--primary:hover { border-color: var(--cmd-red-hot); box-shadow: 0 10px 30px -10px var(--cmd-red-glow); }
.btn--sm { min-height: 36px; padding: 0 var(--space-3); gap: var(--space-2); }

/* ---- Tecla ---------------------------------------------------------------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: var(--bg-elev-1); color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1;
}

/* ---- Tag ------------------------------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 var(--space-2);
  border: 1px solid var(--line); border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fg-muted);
}

/* ---- Tarjeta con foco que sigue al puntero -------------------------------- */
.card {
  --mx: 50%; --my: 50%;
  position: relative; isolation: isolate;
  /* El brillo superior de --shadow-1 va como línea de fondo: la sombra inset obliga a Firefox sin GPU
     a recalcular una máscara redondeada por tarjeta en cada frame del scroll */
  background: linear-gradient(rgb(255 255 255 / 0.04), rgb(255 255 255 / 0.04)) top / 100% 1px no-repeat, var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.card::before { /* halo interior */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgb(245 72 44 / 0.10), transparent 60%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.card::after { /* borde iluminado */
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgb(245 72 44 / 0.85), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.card:hover::before, .card:hover::after, .card:focus-within::before, .card:focus-within::after { opacity: 1; }

/* ---- Revelado al hacer scroll (añadir .is-in con JS) ---------------------- */
.js [data-reveal] {
  /* 2D a propósito: translate3d promociona cada elemento a capa GPU permanente hasta revelarse */
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Texto dividido en palabras con máscara */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word > span { display: inline-block; transform: translateY(105%); transition: transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--w, 0) * 40ms); }
.is-in .split-word > span, .split-word.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  .split-word > span { transform: none; }
  .led--pulse::after { animation: none; }
}