/* =========================================================================
   mark.css — identidad de producto de MARK (sub-marca de iamgabstark)
   MARK es EL MÉTODO (AI Process Architecture): un pipeline fase-gate. Hereda
   el sistema de marca de styles.css y solo redefine el acento a su color
   propio (índigo/blueprint), añadiendo los componentes que le dan lenguaje de
   metodología: fase-gate, tiers de stack, badges. El rosa sobrevive como tinte
   de familia. Cargar SIEMPRE después de styles.css.
   ========================================================================= */

:root {
  --accent: #7c8cf8;          /* acento PROPIO de MARK: índigo / azul-blueprint */
  --accent-2: #5b6ef0;        /* variante profunda (degradados / hover) */
  --warm: #c8527c;            /* tinte de familia iamgabstark */
  --indigo-soft: rgba(124, 140, 248, 0.10);
  --hair-strong: rgba(255, 255, 255, 0.14);
}

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

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

/* ---- Badges ------------------------------------------------------------- */
.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 color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 999px; padding: 0.35rem 0.85rem;
}

/* ---- Hero de MARK ------------------------------------------------------- */
.mhero {
  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;
}
/* Retícula de blueprint tenue detrás del hero (guiño a los planos). */
.mhero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(124, 140, 248, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 140, 248, 0.05) 1px, transparent 1px),
    radial-gradient(56% 42% at 50% 32%, rgba(124, 140, 248, 0.13), transparent 70%),
    radial-gradient(40% 30% at 84% 90%, rgba(200, 82, 124, 0.06), transparent 70%);
  background-size: 64px 64px, 64px 64px, 100% 100%, 100% 100%;
  -webkit-mask-image: radial-gradient(75% 75% at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(75% 75% at 50% 40%, #000, transparent 78%);
}
.mhero__glyph { width: 62px; height: 62px; margin-bottom: 1.75rem; }
.mhero__eyebrow { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--mauve); margin-bottom: 1.75rem; }
.mhero__tagline { font-family: var(--font-display); font-weight: 400; font-size: clamp(3rem, 8vw, 6.4rem); line-height: 0.96; letter-spacing: -0.015em; text-wrap: balance; }
.mhero__tagline em { font-style: italic; color: var(--accent); }
.mhero__sub { margin-top: 1.75rem; max-width: 42rem; font-size: clamp(1.1rem, 2.2vw, 1.4rem); line-height: 1.5; color: color-mix(in srgb, var(--paper) 80%, transparent); text-wrap: pretty; }
.mhero__sub strong { color: var(--paper); font-weight: 500; }
.mhero__badges { margin-top: 2rem; }
.mhero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; margin-top: 2.5rem; }
.mhero__family { margin-top: 2.5rem; font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.08em; color: var(--mauve); }
.mhero__family a { color: var(--dusty); border-bottom: 1px solid color-mix(in srgb, var(--warm) 40%, transparent); }
.mhero__family a:hover { color: var(--paper); }

/* ---- Pipeline fase-gate (7 fases, cada una con su gate) — el protagonista - */
.gates { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.gate { display: grid; gap: 0.75rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2rem); border-top: 1px solid var(--hairline); }
.gate:first-child { border-top: 0; }
.gate__head { display: flex; align-items: baseline; gap: 1rem; }
.gate__n { font-family: var(--font-mono); font-size: 0.95rem; color: var(--accent); flex: none; }
.gate__name { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 500; color: var(--paper); }
.gate__fn { font-size: 1.05rem; line-height: 1.55; color: color-mix(in srgb, var(--paper) 72%, transparent); }
.gate__q { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.85rem 1.1rem; border-radius: 10px; background: var(--indigo-soft); border-left: 2px solid var(--accent); font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.5; color: color-mix(in srgb, var(--paper) 88%, transparent); }
.gate__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); flex: none; padding-top: 0.15rem; }

/* ---- La prueba: fila compacta de métricas de apoyo (sin choro) ---------- */
.proof-row { margin-top: 2.5rem; text-align: center; font-family: var(--font-mono); font-size: clamp(0.85rem, 1.4vw, 1rem); letter-spacing: 0.06em; color: color-mix(in srgb, var(--paper) 72%, transparent); }

/* ---- Blueprint: descarga ------------------------------------------------ */
.blueprint { text-align: center; }
.blueprint .kicker { text-align: center; }

/* ---- Escritorio --------------------------------------------------------- */
@media (min-width: 741px) {
  .gate { grid-template-columns: 240px 1fr; column-gap: 2.5rem; align-items: start; }
  .gate__head { grid-column: 1; flex-direction: column; gap: 0.4rem; }
  .gate__fn { grid-column: 2; grid-row: 1; }
  .gate__q { grid-column: 2; }
}