/* ==========================================================================
   COMMAND — Landing
   Estilos específicos de la landing. Requiere tokens.css + components.css.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Grano de película: tile estático (sin filtros ni animación → cero coste en scroll) */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none;
  background: url("../img/noise.png") repeat;
  background-size: 128px 128px;
  opacity: 0.025;
}

/* ==========================================================================
   Boot
   ========================================================================== */
.boot { display: none; }
.is-booting { overflow: hidden; }
.is-booting .boot, .boot.is-leaving {
  position: fixed; inset: 0; z-index: var(--z-boot);
  display: grid; place-items: center;
  background: var(--cmd-void);
}
.boot.is-leaving {
  transform: translate3d(0, -100%, 0);
  transition: transform 750ms var(--ease-in-out);
  will-change: transform;
}
.boot.is-leaving .boot__inner { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 300ms var(--ease-out), transform 750ms var(--ease-in-out); }
.boot__inner { width: min(360px, 100% - 2 * var(--gutter)); display: grid; gap: var(--space-5); }
.boot__mark { width: 40px; color: var(--cmd-white); }
.boot__bar { fill: var(--cmd-red); transform-box: fill-box; transform-origin: left; animation: boot-bar 1.1s var(--ease-out) both; }
@keyframes boot-bar { from { transform: scaleX(0); } }
.boot__log {
  list-style: none; padding: 0; min-height: calc(6 * 1.7em);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; color: var(--fg-subtle);
}
.boot__log li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: boot-line 220ms var(--ease-out) both; }
.boot__log li:last-child { color: var(--fg); }
.boot__log .ok { color: var(--cmd-ok); }
@keyframes boot-line { from { opacity: 0; transform: translateX(-6px); } }
.boot__progress { height: 2px; background: var(--line); border-radius: 1px; overflow: hidden; }
.boot__progress span { display: block; height: 100%; width: 100%; background: var(--cmd-red-hot); transform: scaleX(0); transform-origin: left; transition: transform 180ms linear; }
.boot__skip {
  position: absolute; bottom: var(--space-6); left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg-subtle);
}

/* ==========================================================================
   Navegación
   ========================================================================== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  transition: transform var(--dur-slow) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgb(14 14 14 / 0.94);
  border-bottom-color: var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { display: flex; align-items: center; gap: var(--space-6); height: 68px; }
.nav__brand { display: flex; align-items: center; gap: var(--space-3); color: var(--cmd-white); }
.nav__mark { width: 26px; height: auto; transition: transform var(--dur-base) var(--ease-snap); }
.nav__brand:hover .nav__mark { transform: rotate(-8deg) scale(1.06); }
.nav__links { display: flex; gap: var(--space-1); margin-left: auto; }
.nav__links a {
  position: relative; padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 2px; height: 2px; border-radius: 1px;
  background: var(--cmd-red); transform: scaleX(0); transform-origin: right; transition: transform var(--dur-base) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--fg); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); transform-origin: left; }
.nav__tools { display: flex; align-items: center; gap: var(--space-4); }
.nav__cmd {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 36px; padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-elev-1);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav__cmd svg { width: 16px; height: 16px; color: var(--accent-fg); }
.nav__cmd:hover { border-color: var(--line-strong); color: var(--fg); }

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__tools { margin-left: auto; }
}
@media (hover: none) {
  .nav__cmd .kbd { display: none; }
  .nav__cmd { padding-right: var(--space-3); }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(68px + var(--space-8)) var(--space-9);
  overflow: hidden;
}
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__vignette {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 70% 40%, rgb(165 21 0 / 0.14), transparent 70%),
    radial-gradient(120% 80% at 50% 0%, transparent 40%, var(--bg) 100%),
    linear-gradient(to bottom, transparent 70%, var(--bg));
}
.hero__vignette::after { /* líneas de barrido CRT, muy sutiles */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px);
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }

.hero__wordmark { width: 100%; height: auto; color: var(--cmd-white); overflow: visible; }
.hero__bar { fill: var(--cmd-red); transform-box: fill-box; transform-origin: left center; }
.hero__sheen { opacity: 0; }
.hero__scan { fill: var(--cmd-red-hot); opacity: 0; }

.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: end; }
.hero__title {
  font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-tight); letter-spacing: -0.03em;
  color: var(--fg);
}
.hero__side { display: grid; gap: var(--space-5); max-width: 520px; justify-self: end; }
.hero__lead { font-size: var(--text-lg); color: var(--fg-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__prompt {
  display: flex; align-items: center; gap: 0.5ch; min-height: 1.6em; min-width: 0; overflow: hidden;
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted);
  padding-top: var(--space-5); border-top: 1px solid var(--line);
}
.hero__prompt-user { color: var(--accent-fg); }
.hero__prompt-sep { color: var(--fg-subtle); margin-right: 0.5ch; }
.hero__prompt-cmd { color: var(--fg); white-space: pre; overflow: hidden; text-overflow: clip; min-width: 0; }
.hero__caret { flex: none; display: inline-block; width: 0.6em; height: 1.1em; background: var(--cmd-red-hot); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: var(--space-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg-subtle);
}
.hero__scroll span { writing-mode: vertical-rl; }
.hero__scroll i { position: relative; width: 1px; height: 48px; background: var(--line-strong); overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--cmd-red-hot);
  animation: scroll-cue 2s var(--ease-in-out) infinite;
}
@keyframes scroll-cue { from { transform: translateY(-16px); } to { transform: translateY(48px); } }

/* Coreografía de entrada del hero (se activa con html.is-ready) */
.js .hero [data-hero-step] { opacity: 0; transform: translateY(18px); }
.js .hero__mask { transform: scaleX(0); }
.js .hero__bar  { transform: scaleX(0); }
.is-ready .hero [data-hero-step] {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(700ms + var(--step, 0) * 120ms);
}
.hero [data-hero-step="1"] { --step: 1; }
.hero [data-hero-step="2"] { --step: 2; }
.hero [data-hero-step="3"] { --step: 3; }
.hero__mask { transform-box: fill-box; transform-origin: left center; }
.is-ready .hero__mask { transform: none; transition: transform 1.25s var(--ease-out) 100ms; }
.is-ready .hero__scan { animation: scan-head 1.25s var(--ease-out) 100ms both; }
.is-ready .hero__bar  { transform: none; transition: transform 1.1s var(--ease-out) 650ms; }
.is-ready .hero__sheen { animation: sheen 7s var(--ease-in-out) 2.4s infinite; }
@keyframes scan-head {
  0% { transform: translateX(0); opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(1498px); opacity: 0; }
}
@keyframes sheen {
  0% { transform: translateX(0); opacity: 1; }
  30%, 100% { transform: translateX(1900px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero [data-hero-step], .js .hero__mask, .js .hero__bar { opacity: 1; transform: none; transition: none; }
  .is-ready .hero__scan, .is-ready .hero__sheen, .hero__caret, .hero__scroll i::after { animation: none; }
}

@media (max-width: 860px) {
  .hero__prompt { font-size: var(--text-xs); }
  .hero { min-height: auto; padding-block: calc(68px + var(--space-8)) var(--space-8); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .hero__side { justify-self: start; }
  .hero__scroll { display: none; }
  }

/* ==========================================================================
   Señal: separador animado entre el hero y el contenido
   ========================================================================== */
.signal { padding-block: var(--space-5); contain: layout paint; }
/* Capa propia: el pulso solo re-rasteriza este SVG, no la página */
.signal svg { width: 100%; height: 80px; overflow: visible; will-change: transform; transform: translateZ(0); }
.signal path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.signal__base { stroke: url(#signal-fade); stroke-width: 1.2; }
.signal__pulse, .signal__glow { stroke-dasharray: 110 1000; stroke-dashoffset: 110; opacity: 0; }
.signal__pulse { stroke: var(--cmd-red-hot); stroke-width: 2; }
.signal__glow  { stroke: var(--cmd-red); stroke-width: 7; }   /* halo barato: trazo ancho y translúcido en vez de drop-shadow */
/* 1) la línea se traza al entrar en pantalla  2) un pulso rojo la recorre en bucle */
.js .signal__base { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2.4s var(--ease-out); }
.js .signal.is-in .signal__base { stroke-dashoffset: 0; }
.signal.is-in .signal__pulse { opacity: 1; animation: signal-run 4.8s var(--ease-in-out) 1.2s infinite both; }
.signal.is-in .signal__glow  { opacity: .28; animation: signal-run 4.8s var(--ease-in-out) 1.2s infinite both; }
.signal.is-paused path, .is-palette-open .signal path { animation-play-state: paused; }
@keyframes signal-run { from { stroke-dashoffset: 110; } to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) {
  .js .signal__base { stroke-dashoffset: 0; transition: none; }
  .signal.is-in .signal__pulse, .signal.is-in .signal__glow { animation: none; opacity: 0; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */
.section { position: relative; padding-block: var(--space-10); }
.section__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); max-width: 820px; }
.section__head--row { max-width: none; grid-template-columns: 1fr minmax(0, 420px); align-items: end; gap: var(--space-7); }
.section__index {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono); text-transform: uppercase;
  color: var(--accent-fg);
}
.section__title { font-size: var(--text-3xl); line-height: 1.04; margin-top: var(--space-4); }
.section__head > .section__title { margin-top: 0; }
.section__desc { font-size: var(--text-lg); color: var(--fg-muted); max-width: 60ch; }
@media (max-width: 860px) {
  .section { padding-block: var(--space-9); }
  .section__head--row { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ---- Iconos lineales compartidos ----------------------------------------- */
.does__icon, .device__icon { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.does__icon .ic-muted, .device__icon .ic-muted { stroke: var(--fg-subtle); }
.does__icon .ic-accent, .device__icon .ic-accent { stroke: var(--cmd-red-hot); }
.does__icon .ic-accent-fill, .device__icon .ic-accent-fill { fill: var(--cmd-red-hot); stroke: none; }

/* ---- Qué hacemos ----------------------------------------------------------- */
.does { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.does__item { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); min-height: 340px; }
.does__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-fg); }
.does__icon { width: 56px; height: 56px; margin-block: var(--space-6) auto; transition: transform var(--dur-slow) var(--ease-out); }
.does__item:hover .does__icon { transform: translateY(-4px); }
.does__item h3 { font-size: var(--text-xl); margin-top: var(--space-5); }
.does__item p { color: var(--fg-muted); font-size: var(--text-sm); }
.does__list {
  list-style: none; padding: var(--space-4) 0 0; margin-top: var(--space-2); border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle);
}
.does__list li::before { content: "+ "; color: var(--cmd-red-hot); }
.does__item--accent { background: linear-gradient(160deg, rgb(165 21 0 / 0.16), var(--bg-elev-1) 55%); border-color: rgb(165 21 0 / 0.45); }
.does__cta {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px dashed rgb(165 21 0 / 0.45);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-fg);
}
.does__cta:hover .btn__icon--arrow { transform: translateX(3px); }
@media (max-width: 1024px) { .does { grid-template-columns: 1fr; } .does__item { min-height: 0; } .does__icon { margin-block: var(--space-4); } }

/* ---- Dispositivos ---------------------------------------------------------- */
.devices { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.device { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; }
.device__stage-art {
  position: relative; display: grid; place-items: center; height: 220px; border-bottom: 1px solid var(--line);
  /* Trama de puntos como imagen en mosaico: un radial-gradient por celda eran cientos de gradientes por frame en Firefox */
  background: radial-gradient(circle at 50% 60%, rgb(165 21 0 / 0.12), transparent 60%),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='9' cy='9' r='1.1' fill='%232A2A2A'/%3E%3C/svg%3E") 0 0 / 18px 18px;
}
.device__icon { width: 104px; height: 104px; stroke-width: 1; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); }
.device:hover .device__icon { transform: translateY(-6px) rotate(-2deg); filter: drop-shadow(0 14px 22px rgb(245 72 44 / 0.25)); }
.device__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
.device__kind { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg-muted); }
.device__name { font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; display: flex; align-items: center; gap: 0.12em; }
.device__name.is-unnamed { color: var(--fg-subtle); font-weight: 500; }
.device__caret { display: inline-block; width: 0.45em; height: 0.08em; align-self: flex-end; margin-bottom: 0.12em; background: var(--cmd-red-hot); animation: caret 1.05s steps(1) infinite; }
.device__body .eco__desc { flex: 1; }
.device__stages { list-style: none; padding: var(--space-4) 0 0; margin-top: var(--space-2); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-top: 1px dashed var(--line); }
.device__stages li { display: grid; gap: var(--space-2); }
.device__stages li::before { content: ""; height: 3px; border-radius: 1px; background: var(--line-strong); }
.device__stages li.is-done::before { background: var(--cmd-red); }
.device__stages li.is-current::before { background: var(--cmd-red-hot); }
.device__stages span { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device__stages li.is-current span { color: var(--fg); }
@media (max-width: 1024px) { .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .devices { grid-template-columns: 1fr; } .device__stage-art { height: 180px; } }
@media (prefers-reduced-motion: reduce) { .device__caret { animation: none; } }

/* ---- Herramientas ---------------------------------------------------------- */
.tools { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-4); }
.tool { display: flex; flex-direction: column; height: 100%; overflow: hidden; color: inherit; }
a.tool:hover { transform: translateY(-3px); border-color: var(--line-strong); }
a.tool:hover .eco__go { background: var(--cmd-red); border-color: var(--cmd-red); color: var(--cmd-white); }
a.tool:hover .eco__go svg { transform: rotate(-45deg); }
.tool__body { display: grid; gap: var(--space-3); padding: var(--space-5); flex: 1; grid-template-rows: auto auto 1fr auto auto; }
.tool__name { font-size: var(--text-3xl); line-height: 1; letter-spacing: -0.03em; margin-top: var(--space-3); }
.tool__preview {
  position: relative; height: 200px; padding: var(--space-5) var(--space-5) 0; overflow: hidden;
  border-bottom: 1px solid var(--line); background: var(--cmd-void);
}
/* Desvanecido inferior con un degradado encima (una máscara obligaría a re-rasterizar la ilustración entera) */
.tool__preview::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(to bottom, transparent, var(--cmd-void)); pointer-events: none; }
/* Kanban */
.tool__preview--kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.kb__col { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-elev-1); border: 1px solid var(--line); }
.kb__head { height: 6px; width: 45%; border-radius: 1px; background: var(--line-strong); margin-bottom: var(--space-1); }
.kb__card { display: grid; gap: 5px; padding: 8px; border-radius: var(--radius-xs); background: var(--bg-elev-2); border: 1px solid var(--line); transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out); }
.kb__card i { display: block; height: 4px; border-radius: 1px; background: var(--line-strong); }
.kb__card i:first-child { width: 80%; background: var(--fg-subtle); }
.kb__card i:nth-child(2) { width: 60%; }
.kb__card i:nth-child(3) { width: 40%; }
.kb__card--move { border-color: rgb(165 21 0 / 0.6); }
.kb__card--move i:first-child { background: var(--cmd-red-hot); }
a.tool:hover .kb__card--move { transform: translate(calc(100% + var(--space-3) + 16px), 4px) rotate(2deg); border-color: var(--cmd-red-hot); }
/* Markdown */
.tool__preview--markdown { display: grid; align-content: start; gap: 10px; font-family: var(--font-mono); font-size: var(--text-xs); }
.md__line { display: flex; align-items: center; gap: 6px; height: 12px; }
.md__line b { font-weight: 400; color: var(--cmd-red-hot); }
.md__line::after { content: ""; height: 5px; border-radius: 1px; background: var(--line-strong); width: 60%; transform-origin: left; transition: transform var(--dur-slow) var(--ease-out); }
.md__h::after { height: 8px; width: 42%; background: var(--fg-muted); }
.md__p::after { width: 88%; }
.md__p--short::after { width: 64%; }
.md__li::after { width: 50%; }
.md__li + .md__li::after { width: 36%; }
.md__code { padding-left: 10px; border-left: 2px solid var(--cmd-red); }
.md__code b { display: none; }
.md__code::after { width: 46%; background: var(--line); }
.md__caret { width: 7px; height: 14px; background: var(--cmd-red-hot); animation: caret 1.05s steps(1) infinite; }
a.tool:hover .md__line::after { transform: scaleX(1.12); }
@media (prefers-reduced-motion: reduce) { .md__caret { animation: none; } }

/* ---- Ecosistema ------------------------------------------------------------ */
/* Dos degradados de 2 paradas + color sólido: mismo aspecto, pero el tramo central es un relleno plano (barato sin GPU) */
.section--eco {
  background:
    linear-gradient(var(--bg), var(--cmd-carbon)) top / 100% 30% no-repeat,
    linear-gradient(var(--cmd-carbon), var(--bg)) bottom / 100% 30% no-repeat,
    var(--cmd-carbon);
}
.eco { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); }
.eco__card {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-3);
  height: 100%; padding: var(--space-5) var(--space-5) var(--space-4);
  color: inherit;
}
a.eco__card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.eco__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.eco__code { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; color: var(--fg-subtle); }
.eco__status { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-muted); }
.eco__name { font-size: var(--text-2xl); font-weight: 600; margin-top: var(--space-3); }
.eco__desc { color: var(--fg-muted); font-size: var(--text-sm); }
.eco__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.eco__foot {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-subtle);
}
.eco__domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eco__go {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--fg-muted);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.eco__go svg { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-snap); }
a.eco__card:hover .eco__go { background: var(--cmd-red); border-color: var(--cmd-red); color: var(--cmd-white); }
a.eco__card:hover .eco__go svg { transform: rotate(-45deg); }
.eco__card[aria-disabled="true"] {
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.018) 0 8px, transparent 8px 16px);
}
.eco__card[aria-disabled="true"] .eco__name { color: var(--fg-muted); }

/* ---- Manifiesto ------------------------------------------------------------ */
.manifesto {
  margin-block: var(--space-6) var(--space-9);
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: 1.12; letter-spacing: -0.025em;
  max-width: 1100px;
}
.manifesto em { font-style: normal; color: var(--accent-fg); }
/* Color y no opacity: opacity animada crea una capa GPU por palabra */
.js .manifesto .mw { color: color-mix(in srgb, currentColor 14%, var(--bg)); transition: color 300ms linear; }
.js .manifesto .mw.is-lit { color: inherit; }
@media (prefers-reduced-motion: reduce) { .js .manifesto .mw { color: inherit; } }

.principles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.principles li { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 1px solid var(--line); position: relative; }
.principles li::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 1px; background: var(--cmd-red-hot);
  transition: width var(--dur-slow) var(--ease-out);
}
.principles li:hover::before { width: 100%; }
.principles__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-fg); }
.principles h3 { font-size: var(--text-xl); }
.principles p { color: var(--fg-muted); font-size: var(--text-sm); }
@media (max-width: 1024px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .principles { grid-template-columns: 1fr; } }

/* ---- CTA ------------------------------------------------------------------- */
.section--cta { overflow: hidden; isolation: isolate; border-top: 1px solid var(--line); }
.section--cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* El desvanecido es una capa de color de fondo encima, no una máscara: la máscara re-rasterizaba toda la sección */
  background:
    radial-gradient(70% 90% at 50% 100%, transparent, var(--bg)),
    radial-gradient(50% 60% at 50% 100%, rgb(165 21 0 / 0.28), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%232A2A2A' fill='none'/%3E%3C/svg%3E") 0 0 / 64px 64px;
  opacity: .8;
}
.cta { display: grid; justify-items: center; text-align: center; gap: var(--space-6); }
.cta__title { font-size: var(--text-4xl); line-height: 1; letter-spacing: -0.035em; max-width: 16ch; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { padding-top: var(--space-9); border-top: 1px solid var(--line); background: var(--cmd-void); overflow: hidden; }
.footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.footer__col { display: grid; gap: var(--space-4); align-content: start; }
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.footer__list a { color: var(--fg-muted); transition: color var(--dur-fast) var(--ease-out); }
.footer__list a:hover { color: var(--fg); }
.footer__list .is-soon { color: var(--fg-subtle); }
.footer__list .is-soon small { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; margin-left: var(--space-2); text-transform: uppercase; }
.footer__contact p { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--fg-muted); }
.footer__top { justify-self: start; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-subtle); transition: color var(--dur-fast); }
.footer__top:hover { color: var(--accent-fg); }

.footer__wordmark { width: 100%; height: auto; margin-top: var(--space-9); overflow: visible; }
.footer__wordmark use {
  fill: transparent; stroke: var(--line-strong); stroke-width: 1.5; vector-effect: non-scaling-stroke;
  transition: fill 1.2s var(--ease-out), stroke 1.2s var(--ease-out);
}
.footer__wordmark rect { fill: var(--cmd-red); transform-box: fill-box; transform-origin: left; }
.js .footer__wordmark rect { transform: scaleX(0.04); transition: transform 1.6s var(--ease-out); }
.footer__wordmark.is-in rect { transform: none; }
.footer__wordmark:hover use { fill: var(--bg-elev-2); stroke: var(--fg-subtle); }

.footer__base {
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-6);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle);
}
.footer__made { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 860px) { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Paleta de comandos
   ========================================================================== */
.palette {
  width: min(640px, 100% - 2rem); max-height: min(560px, 100dvh - 4rem);
  margin: 12vh auto auto; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--bg-elev-1); color: var(--fg);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.03) inset;
  overflow: hidden;
}
.palette[open] { display: flex; flex-direction: column; animation: palette-in 260ms var(--ease-out); }
.palette::backdrop { background: rgb(0 0 0 / 0.72); animation: fade-in 200ms var(--ease-out); }
.palette.is-closing { animation: palette-out 160ms var(--ease-in-out) forwards; }
.palette.is-closing::backdrop { animation: fade-out 160ms var(--ease-in-out) forwards; }
@keyframes palette-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes palette-out { to { opacity: 0; transform: translateY(-6px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

/* Secciones fuera de pantalla: se congelan sus animaciones en bucle (main.js añade .is-offscreen) */
.is-offscreen *, .is-offscreen *::before, .is-offscreen *::after { animation-play-state: paused !important; }

/* Con la paleta abierta, se congela todo lo que se mueve detrás */
.is-palette-open .device__caret,
.is-palette-open .md__caret,
.is-palette-open .led--pulse::after,
.is-palette-open .hero__sheen,
.is-palette-open .hero__caret,
.is-palette-open .hero__scroll i::after { animation-play-state: paused; }

.palette__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.palette__prompt { font-family: var(--font-mono); font-size: var(--text-lg); color: var(--cmd-red-hot); }
.palette__input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: var(--text-lg); color: var(--fg); caret-color: var(--cmd-red-hot); }
.palette__input::placeholder { color: var(--fg-subtle); }
.palette__list { list-style: none; padding: var(--space-2); margin: 0; overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.palette__group {
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-mono); text-transform: uppercase; color: var(--fg-subtle);
}
.palette__item {
  position: relative; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer;
}
.palette__item::before {
  content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 2px; border-radius: 1px;
  background: var(--cmd-red-hot); transform: scaleY(0); transition: transform var(--dur-fast) var(--ease-out);
}
.palette__item[aria-selected="true"] { background: var(--bg-elev-2); }
.palette__item[aria-selected="true"]::before { transform: scaleY(1); }
.palette__item[aria-disabled="true"] { cursor: default; }
.palette__item[aria-disabled="true"] .palette__name { color: var(--fg-muted); }
.palette__icon {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--bg-elev-1);
  font-family: var(--font-mono); font-size: 0.625rem; color: var(--fg-muted);
}
.palette__item[aria-selected="true"] .palette__icon { border-color: var(--cmd-red); color: var(--cmd-red-hot); }
.palette__text { display: grid; min-width: 0; }
.palette__name { font-size: var(--text-sm); font-weight: 500; }
.palette__sub { font-size: var(--text-xs); color: var(--fg-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette__meta { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); }
.palette__item mark { background: none; color: var(--cmd-red-hot); }
.palette__empty { padding: var(--space-7) var(--space-4); text-align: center; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-subtle); }
.palette__foot {
  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--fg-subtle);
}
.palette__foot span { display: inline-flex; align-items: center; gap: 4px; }
.palette__brand { margin-left: auto; letter-spacing: 0.1em; }
@media (max-width: 560px) { .palette { margin-top: var(--space-4); } .palette__foot span:not(.palette__brand) { display: none; } }

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed; left: 50%; bottom: var(--space-6); z-index: var(--z-modal);
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-elev-2);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; color: var(--fg);
  box-shadow: var(--shadow-2);
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cmd-ok); box-shadow: 0 0 8px var(--cmd-ok); }