/* =========================================================================
   stark.css — identidad de producto de STARK (sub-marca de iamgabstark)
   Hereda el sistema de marca de styles.css (fondo oscuro, tipografías,
   componentes) y SOLO redefine el acento a su color propio (morado-fucsia),
   añadiendo los componentes que le dan alma de dev-tool: terminal, pipeline,
   badges, trío conceptual. El rosa de la marca sobrevive como tinte de familia.
   Cargar SIEMPRE después de styles.css.
   ========================================================================= */

:root {
  --accent: #b0416a;          /* acento PROPIO de STARK: rosa vino (rama iamgabstark) */
  --accent-2: #8f3355;        /* variante profunda (degradados / hover) */
  --warm: #c8527c;            /* tinte de familia iamgabstark (uso muy puntual) */
  --code-bg: #0c0d13;         /* superficie de bloques de terminal/código */
  --code-border: rgba(176, 65, 106, 0.24);
  --accent-soft: rgba(176, 65, 106, 0.12);
}

/* El var(--accent) recoloreado ya propaga a botones, .statement em, .kicker
   activo, .show:hover, .foot__sig, selección y foco. Aquí van los ajustes y
   los componentes nuevos. */
.foot__sig { color: var(--accent); }

/* ---- Marca STARK (wordmark propio) -------------------------------------- */
.smark { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-weight: 500; color: var(--paper); text-decoration: none; }
.smark__glyph { width: 22px; height: 22px; display: block; flex: none; }
.smark__name { font-size: 0.98rem; letter-spacing: 0.02em; }
.smark__name b { color: var(--accent); font-weight: 500; }

/* ---- Badges (MIT · SDD · Claude Code) ----------------------------------- */
.badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.badge {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 82%, transparent);
  border: 1px solid var(--code-border); border-radius: 999px; padding: 0.35rem 0.85rem;
}
.badge--warm { border-color: color-mix(in srgb, var(--warm) 45%, transparent); color: var(--dusty); }

/* ---- Hero de STARK ------------------------------------------------------ */
.shero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: calc(var(--nav-h) + 4rem) var(--pad) 5rem;
}
.shero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 42% at 50% 30%, rgba(176, 65, 106, 0.18), transparent 70%),
    radial-gradient(40% 30% at 82% 88%, rgba(200, 82, 124, 0.07), transparent 70%);
}
.shero__glyph { width: 64px; height: 64px; margin-bottom: 1.75rem; }
.shero__tagline { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.8rem, 7.5vw, 6rem); line-height: 0.98; letter-spacing: -0.015em; text-wrap: balance; }
.shero__tagline em { font-style: italic; color: var(--accent); }
.shero__sub { margin-top: 1.75rem; max-width: 40rem; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.5; color: color-mix(in srgb, var(--paper) 80%, transparent); text-wrap: balance; }
.shero__sub code { font-family: var(--font-mono); color: var(--accent); font-size: 0.92em; }
.shero__badges { margin-top: 2rem; }
.shero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.shero__family { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--mauve); }
.shero__family a { color: var(--dusty); border-bottom: 1px solid color-mix(in srgb, var(--warm) 40%, transparent); }
.shero__family a:hover { color: var(--paper); }

/* ---- Bloque de terminal / comandos -------------------------------------- */
.term {
  background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 14px;
  overflow: hidden; text-align: left; max-width: 640px; margin-inline: auto;
}
.term__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--code-border); }
.term__dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--paper) 18%, transparent); }
.term__title { margin-left: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--mauve); }
.term__body { padding: 1.15rem 1.25rem; font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.9; overflow-x: auto; }
.term__body .p { color: var(--accent); }              /* prompt $ */
.term__body .c { color: var(--paper); }               /* comando */
.term__body .o { color: var(--mauve); }               /* salida / comentario */
.term__body .k { color: var(--dusty); }               /* resaltado cálido puntual */

/* ---- Trío conceptual: SDD · MARK · stark -------------------------------- */
.trio { display: grid; gap: 1px; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--hairline); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.trio__item { background: var(--ink); padding: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); }
.trio__k { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.trio__t { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--paper); margin: 0.5rem 0 0.75rem; }
.trio__d { font-size: 1.02rem; line-height: 1.6; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.trio__d b { color: var(--paper); font-weight: 500; }
/* La celda de MARK es un enlace a su propia página (cross-link del ecosistema). */
.trio__item--link { text-decoration: none; transition: background-color 0.3s ease; }
.trio__item--link:hover { background: var(--accent-soft); }
.trio__go { display: block; margin-top: 0.85rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); }

/* ---- Pipeline de 6 fases ------------------------------------------------- */
.pipe { display: grid; gap: 1rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.phase { position: relative; border: 1px solid var(--hairline); border-radius: 12px; padding: 1.4rem 1.25rem; background: color-mix(in srgb, var(--paper) 3%, transparent); transition: border-color 0.3s ease; }
.phase:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.phase__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent); }
.phase__cmd { font-family: var(--font-mono); font-size: 0.95rem; color: var(--paper); margin-top: 0.5rem; }
.phase__label { font-size: 0.92rem; line-height: 1.4; color: color-mix(in srgb, var(--paper) 65%, transparent); margin-top: 0.4rem; }
.phase__gate { display: inline-block; margin-top: 0.7rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--dusty); }
.pipe__cross { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; font-family: var(--font-mono); font-size: 0.85rem; color: var(--mauve); }
.pipe__cross code { color: var(--accent); }

/* ---- Casos de uso (4) --------------------------------------------------- */
.cases { display: grid; gap: 1.25rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.case { border: 1px solid var(--hairline); border-radius: 16px; padding: 1.9rem; transition: border-color 0.3s ease, background-color 0.3s ease; }
.case:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.case__k { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.case__t { font-size: 1.35rem; font-weight: 500; color: var(--paper); margin: 0.6rem 0 0.6rem; }
.case__d { font-size: 1rem; line-height: 1.55; color: color-mix(in srgb, var(--paper) 70%, transparent); }

/* ---- Principios (4 no negociables) -------------------------------------- */
.principles { display: grid; gap: 1px; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); background: var(--hairline); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.principle { background: var(--ink); padding: clamp(1.75rem, 1.25rem + 2vw, 2.25rem); display: flex; gap: 1.1rem; }
.principle__n { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: color-mix(in srgb, var(--accent) 80%, transparent); flex: none; }
.principle__t { font-size: 1.15rem; font-weight: 500; color: var(--paper); }
.principle__d { margin-top: 0.4rem; font-size: 1rem; line-height: 1.55; color: color-mix(in srgb, var(--paper) 68%, transparent); }

/* ---- Instalar ----------------------------------------------------------- */
.install { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.install__note { font-family: var(--font-mono); font-size: 0.85rem; color: var(--mauve); margin-bottom: 0.5rem; }

/* ---- Escritorio --------------------------------------------------------- */
@media (min-width: 741px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
  .pipe { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: repeat(2, 1fr); }
  .principles { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .pipe { grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
  .phase { padding: 1.2rem 0.9rem; }
}