/* =====================================================================
   FAMILY KIT — base compartida de la familia de marcas HENET
   v1.0 · 2026-06-13 · ver marca/PLAN-MARCA-001-familia.md

   El "esqueleto" común: neutros + tipo (Segoe UI + Consolas) + escala +
   componentes + motion. Lo ÚNICO que cambia por marca es el ACENTO, vía el
   contrato de variables --brand-*. Probado primero en henet.mx (en prod).

   USO en cada sitio:
     1) importar este archivo (o copiarlo a public/)
     2) definir el bloque :root.theme de la marca (ver README)
     3) escribir solo las secciones propias (hero, etc.) usando estos tokens
   ===================================================================== */

:root {
  /* ---- Neutros compartidos (NO cambian entre marcas propias) ---- */
  --bg: #ffffff;
  --surface: #eef2f6;
  --surface-2: #e4eaf1;
  --ink: #1e2733;
  --muted: #5b6876;
  --line: #d7dee6;
  --machine: #161d27;          /* banda oscura por defecto; una marca puede sobreescribir */
  --machine-2: #1e2733;
  --machine-3: #28323f;
  --on-machine: #eef2f6;
  --on-machine-muted: #9aa7b4;

  /* ---- Contrato de marca (CADA SITIO define estos) ----
     Por defecto = HENET, para que el kit funcione solo. */
  --brand: #2b3a5e;            /* color profundo, apto como texto: títulos, botón primario */
  --brand-deep: #233150;       /* hover del primario */
  --brand-accent: #1ca0be;     /* señal viva: puntos, realces, palabra destacada, mono en oscuro */
  --brand-accent-ink: #15788e; /* acento legible como texto pequeño sobre claro (mono-tag) */
  --brand-gradient: linear-gradient(100deg, #2b3a5e 0%, #2d6ca0 55%, #1ca0be 100%);
  --heading: var(--brand);     /* una marca puede ponerlo en var(--ink) si su acento no va como título */

  /* Severidad (compartida — artefactos técnicos) */
  --sev-crit: #c0392b; --sev-high: #e67e22; --sev-med: #e1b12c; --sev-low: #2e9e6b;

  /* Tipografía (hilo común: sans de sistema + capa mono) */
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-mono: "Consolas", "SFMono-Regular", ui-monospace, "Cascadia Mono", "Courier New", monospace;

  /* Escala 4pt */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --radius: 12px; --radius-sm: 8px; --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(30,39,51,.06), 0 1px 3px rgba(30,39,51,.05);
  --shadow-md: 0 8px 24px rgba(30,39,51,.08), 0 2px 6px rgba(30,39,51,.05);
  --shadow-lg: 0 24px 60px rgba(22,29,39,.16);

  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-out-quint: cubic-bezier(.22,1,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);

  --z-nav: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000;
  --maxw: 1200px; --pad: clamp(20px, 5vw, 40px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--brand-accent-ink); text-decoration: none; }
a:hover { color: var(--brand); }
::selection { background: var(--brand-accent); color: #fff; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-display); color: var(--heading); line-height: 1.08; letter-spacing: -.018em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.6rem); }
h2 { font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem); letter-spacing: -.02em; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); line-height: 1.18; letter-spacing: -.01em; }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); color: var(--ink); line-height: 1.5; }

/* etiqueta mono — el ADN visible de la familia */
.mono-tag { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .02em; color: var(--brand-accent-ink); display: inline-block; }
.band--machine .mono-tag { color: var(--brand-accent); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.band--mist { background: var(--surface); }
.band--machine { background: var(--machine); color: var(--on-machine); }
.measure { max-width: 62ch; }
.section-head { max-width: 60ch; margin-bottom: var(--s7); }
.section-head p { color: var(--muted); margin-top: var(--s3); font-size: 1.12rem; }
.skip-link { position: absolute; left: var(--s4); top: -60px; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: var(--z-modal); transition: top .2s var(--ease-out-quart); }
.skip-link:focus { top: var(--s4); color: #fff; }

/* ---------- Botones ---------- */
.btn { --btn-bg: var(--brand); --btn-fg: #fff; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1; padding: 14px 22px; border-radius: 10px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease-out-quart), background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.btn:hover { background: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brand); border-color: var(--line); }
.btn--ghost:hover { background: var(--surface); color: var(--brand); border-color: var(--muted); transform: translateY(-1px); }
.band--machine .btn--ghost { --btn-fg: var(--on-machine); border-color: rgba(238,242,246,.28); }
.band--machine .btn--ghost:hover { background: rgba(238,242,246,.08); color: #fff; border-color: rgba(238,242,246,.5); }
.btn--lg { padding: 16px 26px; font-size: 1.06rem; }
.btn--block { width: 100%; justify-content: center; }
/* CTA primario blanco sobre banda oscura (mayor contraste en heros oscuros) */
.band--machine .btn--invert, .hero__cta > .btn--invert { background: #fff; color: var(--brand); border-color: #fff; }
.band--machine .btn--invert:hover { background: #e6ecf2; color: var(--brand-deep); border-color: #e6ecf2; }

.text-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--brand-accent-ink); }
.text-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out-quart); }
.text-link:hover svg { transform: translateX(3px); }

/* ---------- Componentes conectores de la familia ---------- */
/* Tira de ecosistema (en footer oscuro) */
.ecosystem { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--machine-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3) var(--s6); }
.ecosystem__label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-machine-muted); }
.ecosystem__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); padding: 0; }
.ecosystem__list a { display: inline-flex; align-items: center; gap: 8px; color: var(--on-machine); font-size: .94rem; font-weight: 600; }
.ecosystem__list a:hover { color: #fff; }
.ecosystem__list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand-accent)); flex: none; }
.ecosystem__role { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--on-machine-muted); }

/* Cross-link contextual (venta cruzada; --c = punto del hue del destino) */
.cross-link { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s4); font-size: .92rem; color: var(--muted); line-height: 1.4; }
.cross-link::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--brand-accent)); flex: none; }
.cross-link b { color: var(--brand-accent-ink); font-weight: 600; }
.cross-link:hover b { color: var(--brand); }
.cross-link svg { width: 15px; height: 15px; transition: transform .2s var(--ease-out-quart); }
.cross-link:hover svg { transform: translateX(3px); }

/* Firma de familia (sutil): "por HENET" / "empresa hermana de HENET" */
.brand-sig { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--on-machine-muted); }
.brand-sig b { color: var(--on-machine); font-weight: 600; letter-spacing: .04em; }

/* ---------- Motion (revelado por scroll, VISIBLE por defecto) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { opacity: 0; transform: translateY(16px); animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
html.reveal-all .reveal { opacity: 1 !important; transform: none !important; animation: none !important; }
@keyframes reveal-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; animation: none !important; } }