/* =====================================================================
   SATIVA L TRACE — SISTEMA DE DISEÑO
   Dirección: Deep Tech Compliance (azul profundo) + acento verde de firma
   Audiencia: operadores licenciados, reguladores, inversores
   ===================================================================== */

/* ---------- 1. TOKENS ---------- */
:root {
  /* Marca — azul profundo (base deep-tech) */
  --brand-900: #071B30;   /* casi negro azulado — fondos hero */
  --brand-800: #0C2A4A;   /* azul profundo — superficies oscuras */
  --brand-700: #123A63;   /* azul medio-oscuro */
  --brand-600: #185FA5;   /* azul institucional */
  --brand-500: #2C7BC9;   /* azul primario — botones, links */
  --brand-400: #5CA0E0;   /* azul claro — acentos sobre oscuro */
  --brand-200: #B5D4F4;   /* azul muy claro — texto sobre oscuro */
  --brand-50:  #E6F1FB;   /* fondo azul lavado */

  /* Acento verde de firma (la industria, sin caer en lo recreativo) */
  --accent-800: #0C5C48;  /* verde más profundo — hover de botones */
  --accent-700: #0F6E56;  /* verde profundo — fondo de botón (4.5:1 con blanco, AA) */
  --accent-600: #1D9E75;  /* verde firma — el detalle distintivo (badges, iconos) */
  --accent-400: #5DCAA5;  /* verde claro sobre oscuro */
  --accent-50:  #E1F5EE;  /* fondo verde lavado */

  /* Neutrales cálidos (papel, texto, bordes) */
  --ink-900: #0E1A24;     /* texto principal */
  --ink-700: #38434D;     /* texto secundario */
  --ink-500: #667179;     /* texto terciario / captions */
  --ink-300: #AEB6BC;     /* bordes fuertes */
  --paper-100: #FFFFFF;   /* superficie tarjetas */
  --paper-50:  #F7F9FB;   /* fondo de página */
  --paper-line: #E4E9ED;  /* bordes hairline */

  /* Semánticos */
  --ok: #1D9E75;
  --warn: #BA7517;
  --danger: #C0392B;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Escala tipográfica */
  --fs-hero: clamp(2rem, 4vw + 1rem, 3.25rem);
  --fs-h1: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h2: clamp(1.4rem, 1.5vw + 0.9rem, 1.9rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Layout */
  --container: 1140px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Sombras (sutiles, sin exagerar) */
  --shadow-sm: 0 1px 2px rgba(14, 26, 36, 0.06);
  --shadow-md: 0 6px 20px rgba(14, 26, 36, 0.08);
  --shadow-lg: 0 18px 48px rgba(7, 27, 48, 0.14);

  /* Transiciones */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.22s;
}

/* ---------- 2. RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--ink-900);
  background: var(--paper-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink-900); }

a { color: var(--brand-600); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--brand-500); }

img { max-width: 100%; display: block; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- 3. LAYOUT ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }

.section { padding-block: var(--space-24); }
.section--tight { padding-block: var(--space-16); }
.section--dark { background: var(--brand-900); color: var(--brand-200); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-600);
}
.section--dark .eyebrow { color: var(--accent-400); }

.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section-head h2 { font-size: var(--fs-h2); margin-block: var(--space-3) var(--space-4); }
.section-head p { color: var(--ink-700); font-size: var(--fs-body); }
.section--dark .section-head p { color: var(--brand-200); }

/* ---------- 4. BOTONES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  padding: 0.72rem 1.4rem; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer;
  transition: all var(--dur) var(--ease); white-space: nowrap;
}
.btn--primary { background: var(--brand-600); color: #fff; }
.btn--primary:hover { background: var(--brand-700); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--accent { background: var(--accent-700); color: #fff; }
.btn--accent:hover { background: var(--accent-800); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; border-color: var(--brand-400); color: var(--brand-600); }
.btn--ghost:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-600); }
.btn--ghost-dark { background: transparent; border-color: rgba(92,160,224,0.4); color: var(--brand-200); }
.btn--ghost-dark:hover { border-color: var(--brand-400); color: #fff; background: rgba(92,160,224,0.08); }

/* ---------- 5. TARJETAS ---------- */
.card {
  background: var(--paper-100); border: 1px solid var(--paper-line);
  border-radius: var(--radius-lg); padding: var(--space-8);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { border-color: var(--accent-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  display: grid; place-items: center; margin-bottom: var(--space-4);
  background: var(--accent-50); color: var(--accent-700);
  font-size: 1.4rem;
}
.card h3, .card h2 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.card p { color: var(--ink-700); font-size: var(--fs-sm); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--contact { grid-template-columns: 1.4fr 1fr; gap: var(--space-16); align-items: start; }
@media (max-width: 780px) { .grid--contact { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- 6. HEADER / NAV ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(7, 27, 48, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(92,160,224,0.15);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav__brand { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; letter-spacing: -0.02em; }
.nav__brand:hover { color: #fff; }
.nav__mark {
  width: 34px; height: 34px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-600));
  display: grid; place-items: center; color: #fff; font-size: 1.1rem;
}
.nav__mark--flat { background: var(--brand-500); }
.nav__links { display: flex; align-items: center; gap: var(--space-8); list-style: none; }
.nav__links a { color: var(--brand-200); font-size: var(--fs-sm); font-weight: 500; }
.nav__links a:hover, .nav__links a.is-active { color: #fff; }
.nav__links a.is-active { position: relative; }
.nav__links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -26px; height: 2px; background: var(--accent-500, var(--accent-600)); }
.nav__cta { display: flex; align-items: center; gap: var(--space-3); }
.nav__toggle { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 var(--space-2);
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--radius);
  color: #fff; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.02em; transition: border-color 0.15s ease, background-color 0.15s ease;
}
.nav__lang:hover { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.08); }

@media (max-width: 860px) {
  .nav__links, .nav__cta .btn--ghost-dark { display: none; }
  .nav__toggle { display: block; }
  .nav__links.is-open {
    display: flex; flex-direction: column; position: absolute; top: 72px; left: 0; right: 0;
    background: var(--brand-900); padding: var(--space-6); gap: var(--space-4);
    border-bottom: 1px solid rgba(92,160,224,0.15);
  }
}

@media (max-width: 420px) {
  .nav__brand { font-size: 1rem; gap: var(--space-2); white-space: nowrap; }
  .nav__cta { gap: var(--space-2); }
  .nav__cta .btn--accent { padding: 0.6rem 0.9rem; font-size: var(--fs-xs); }
}

/* ---------- 7. HERO ---------- */
.hero { background: radial-gradient(120% 120% at 80% 0%, var(--brand-800) 0%, var(--brand-900) 55%); color: var(--brand-200); position: relative; overflow: hidden; }
.hero__grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(92,160,224,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(92,160,224,0.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(80% 80% at 70% 10%, #000 0%, transparent 75%); }
.hero__inner { position: relative; padding-block: var(--space-24); max-width: 720px; }
.hero h1 { font-size: var(--fs-hero); color: #fff; margin-block: var(--space-4) var(--space-6); }
.hero p.lead { font-size: 1.2rem; color: var(--brand-200); margin-bottom: var(--space-8); max-width: 560px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid rgba(92,160,224,0.15); }
.hero__trust-item { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--brand-200); display: flex; align-items: center; gap: var(--space-2); letter-spacing: 0.04em; }
.hero__trust-item i { color: var(--accent-400); }

/* ---------- 8. STAT / MÉTRICAS ---------- */
.stat { text-align: left; }
.stat__num { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 600; color: var(--brand-600); line-height: 1; letter-spacing: -0.03em; }
.section--dark .stat__num { color: var(--accent-400); }
.stat__label { font-size: var(--fs-sm); color: var(--ink-500); margin-top: var(--space-2); }
.section--dark .stat__label { color: var(--brand-200); }

/* ---------- 9. PASOS (proceso) ---------- */
.step { position: relative; padding-left: var(--space-16); padding-block: var(--space-6); border-left: 1px solid var(--paper-line); }
.step:last-child { border-left-color: transparent; }
.step__num { position: absolute; left: calc(-1 * var(--space-6)); top: var(--space-6); width: 46px; height: 46px; border-radius: 50%; background: var(--brand-900); color: #fff; font-family: var(--font-mono); font-weight: 500; display: grid; place-items: center; font-size: var(--fs-sm); }
.step__num--accent { background: var(--accent-600); }
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }
.step p { color: var(--ink-700); font-size: var(--fs-sm); }

/* ---------- 10. FORMULARIO ---------- */
.form-field { margin-bottom: var(--space-4); }
.form-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); margin-bottom: var(--space-2); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: var(--font-body); font-size: var(--fs-body);
  padding: 0.7rem 0.9rem; border: 1px solid var(--paper-line); border-radius: var(--radius);
  background: var(--paper-100); color: var(--ink-900); transition: border-color var(--dur) var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.form-field textarea { min-height: 130px; resize: vertical; }

/* ---------- 11. FOOTER ---------- */
.site-footer { background: var(--brand-900); color: var(--brand-200); padding-block: var(--space-16) var(--space-8); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); }
.footer-col h4, .footer-col__title { color: #fff; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--space-4); letter-spacing: 0.02em; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a { color: var(--brand-200); font-size: var(--fs-sm); }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: var(--fs-sm); color: var(--brand-200); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); padding-top: var(--space-8); border-top: 1px solid rgba(92,160,224,0.15); font-size: var(--fs-xs); color: var(--ink-500); }
.footer-bottom .footer-mono { font-family: var(--font-mono); }

@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 12. UTILIDADES ---------- */
.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-8 { margin-top: var(--space-8); }
.badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-family: var(--font-mono); font-weight: 500; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--accent-50); color: var(--accent-700); letter-spacing: 0.03em; }
.divider { height: 1px; background: var(--paper-line); border: none; margin-block: var(--space-12); }

/* animación de entrada sutil */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

/* =====================================================================
   13. VISUAL DE RED DESCENTRALIZADA v2 (interactiva, geo-inspirada)
   ===================================================================== */
.netviz2 { width: 100%; max-width: 620px; margin-inline: auto; margin-top: -10px; background: transparent; border-radius: var(--radius-lg); padding: var(--space-5); padding-top: 0; }
.netviz2__caption { display: flex; align-items: center; gap: var(--space-2); justify-content: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-400); margin-bottom: var(--space-3); }
.netviz2__caption .live-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--accent-400); animation: dotPulse 2s ease-in-out infinite; }
.netviz2__svg { width: 100%; height: auto; overflow: visible; }

.nv2-link { stroke: rgba(92,160,224,0.25); stroke-width: 1.2; fill: none; transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease); }
.nv2-link--flow { stroke: rgba(29,158,117,0.32); stroke-width: 1.4; }
.nv2-link--mesh { stroke: rgba(92,160,224,0.16); stroke-dasharray: 2 4; }
.nv2-link.is-active { stroke: var(--accent-400); stroke-width: 2; }

.nv2-pkt { fill: var(--accent-400); opacity: 0.9; }

.nv2-node { cursor: pointer; }
.nv2-node__halo { fill: none; stroke: var(--brand-400); stroke-width: 1.2; opacity: 0.35; animation: regPulse 3.2s var(--ease) infinite; }
.nv2-node--central .nv2-node__halo { stroke: var(--accent-400); }
.nv2-node--op .nv2-node__halo { animation: none; opacity: 0; }
.nv2-node__core { fill: rgba(12,42,74,0.85); stroke: none; transition: stroke var(--dur) var(--ease), fill var(--dur) var(--ease); }
.nv2-node--op .nv2-node__core { fill: var(--accent-600); }
.nv2-node--central .nv2-node__core { fill: var(--brand-600); }
.nv2-node__label { fill: #fff; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.nv2-node__sub { fill: var(--brand-200); font-family: var(--font-mono); font-size: 7px; text-anchor: middle; pointer-events: none; text-transform: uppercase; letter-spacing: 0.04em; }
.nv2-node.is-selected .nv2-node__core { stroke: #fff; stroke-width: 2.5; }
.nv2-node:focus-visible .nv2-node__core { outline: none; stroke: #fff; }

.netviz2__legend { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-4); flex-wrap: wrap; }
.netviz2__legend span { font-family: var(--font-mono); font-size: 10px; color: var(--brand-200); display: flex; align-items: center; gap: 5px; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-dot--op { background: var(--accent-600); }
.lg-dot--reg { background: var(--brand-400); }
.lg-dot--central { background: var(--accent-400); }

/* panel de detalle del nodo seleccionado */
.netviz2__panel { margin-top: var(--space-4); padding-top: var(--space-4); }
.netviz2__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.netviz2__panel-title { font-family: var(--font-display); font-size: 1rem; color: #fff; font-weight: 600; }
.netviz2__panel-badge { font-family: var(--font-mono); font-size: 9.5px; padding: 2px 9px; border-radius: var(--radius-pill); background: rgba(29,158,117,0.15); color: var(--accent-400); white-space: nowrap; }
.netviz2__panel-desc { font-size: var(--fs-xs); color: var(--brand-200); line-height: 1.6; }

/* ticker de eventos de ejemplo */
.netviz2__ticker { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-400); background: transparent; border-radius: var(--radius); padding: var(--space-2) var(--space-3); display: flex; align-items: baseline; gap: var(--space-2); overflow: hidden; }
.netviz2__ticker-label { color: var(--brand-400); flex-shrink: 0; }
.netviz2__ticker-text { color: var(--brand-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.netviz2__ticker-text strong { color: var(--accent-400); font-weight: 500; }

@keyframes regPulse { 0% { r: 24; opacity: 0.5; } 70% { r: 34; opacity: 0; } 100% { r: 34; opacity: 0; } }
@keyframes pktMove { 0% { offset-distance: 0%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nv2-node__halo { animation: none; opacity: 0; }
}

/* =====================================================================
   14. HERO SPLIT (texto + visual de red)
   ===================================================================== */
.hero--split .hero__inner { max-width: var(--container); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-16); align-items: start; }
.hero--split .hero__copy { max-width: 560px; }
@media (max-width: 900px) {
  .hero--split .hero__inner { grid-template-columns: 1fr; }
  .hero--split .netviz2 { max-width: 460px; margin-top: var(--space-8); }
}

/* =====================================================================
   15. BLOQUE TÉCNICO / ARQUITECTURA
   ===================================================================== */
.arch-feature { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.arch-feature--reverse { direction: rtl; }
.arch-feature--reverse > * { direction: ltr; }
@media (max-width: 860px) { .arch-feature { grid-template-columns: 1fr; gap: var(--space-8); } }

.feature-list { list-style: none; margin-top: var(--space-6); }
.feature-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--paper-line); font-size: var(--fs-sm); color: var(--ink-700); }
.section--dark .feature-list li { border-top-color: rgba(92,160,224,0.15); color: var(--brand-200); }
.feature-list li i { color: var(--accent-600); font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.section--dark .feature-list li i { color: var(--accent-400); }

/* panel de código/datos decorativo */
.code-panel { background: var(--brand-900); border: 1px solid rgba(92,160,224,0.2); border-radius: var(--radius-lg); padding: var(--space-6); font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1.9; color: var(--brand-200); overflow: hidden; }
.code-panel .cp-line { white-space: nowrap; }
.code-panel .cp-line.reveal { transition-duration: 0.45s; }
.code-panel .cp-key { color: var(--accent-400); }
.code-panel .cp-val { color: #fff; }
.code-panel .cp-hash { color: var(--brand-400); }
.code-panel .cp-comment { color: var(--ink-500); }
.cp-cursor { display: inline-block; color: var(--accent-400); animation: cpCursor 1s steps(1, end) infinite; }
@keyframes cpCursor { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* eyebrow con línea */
.eyebrow--line::before { content: ''; width: 28px; height: 1px; background: var(--accent-600); display: inline-block; }
.section--dark .eyebrow--line::before { background: var(--accent-400); }

/* cadena de bloques horizontal (mini) */
.blockchain-strip { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: var(--space-8); }
.block-node {
  flex: 1; min-width: 150px; background: var(--brand-800); border: 1px solid rgba(92,160,224,0.2); border-radius: var(--radius);
  padding: var(--space-3) var(--space-4); position: relative;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.block-node:hover { transform: translateY(-3px); border-color: var(--accent-400); box-shadow: 0 10px 26px rgba(0,0,0,0.35); }
.block-node + .block-node { margin-left: 24px; }
.block-node + .block-node::before { content: '→'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: var(--brand-400); font-size: 1rem; }
.block-node.is-chained + .block-node::before { animation: arrowFlow 1.8s ease-in-out infinite; }
.block-node__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.block-node__icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(29,158,117,0.15); color: var(--accent-400); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.block-node:hover .block-node__icon { background: var(--accent-600); color: #fff; }
.block-node__hash { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--brand-400); }
.block-node__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-400); flex-shrink: 0; animation: dotPulse 2s ease-in-out infinite; }
.block-node__evt { font-size: var(--fs-xs); color: #fff; font-weight: 500; margin-top: 2px; }
.block-node__actor { font-family: var(--font-mono); font-size: 9px; color: var(--brand-200); margin-top: 2px; }

@keyframes arrowFlow { 0%, 100% { opacity: 0.55; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(3px); } }

/* =====================================================================
   16. ANIMACIONES DE ENTRADA (blockchain strip encadenado)
   ===================================================================== */
.block-node { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.block-node.is-chained { opacity: 1; transform: none; }
.block-node + .block-node::before { opacity: 0; transition: opacity 0.4s var(--ease) 0.2s; }
.block-node.is-chained + .block-node::before,
.block-node + .block-node.is-chained::before { opacity: 1; }

/* contador — evita salto de layout mientras anima */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* card hover: brillo de acento en el ícono */
.card:hover .card__icon { background: var(--accent-600); color: #fff; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }

/* mini-red decorativa para secciones internas */
.inline-net { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--brand-400); }
.inline-net .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500, var(--accent-600)); animation: dotPulse 2s ease-in-out infinite; }
.inline-net .dot:nth-child(3) { animation-delay: 0.4s; }
.inline-net .dot:nth-child(5) { animation-delay: 0.8s; }
@keyframes dotPulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }

/* tira de proceso con conector vertical animado al revelar */
.proc-track { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .block-node { opacity: 1; transform: none; }
  .block-node + .block-node::before { opacity: 1; animation: none; }
  .block-node__dot { animation: none; }
  .inline-net .dot { animation: none; }
}

/* =====================================================================
   17. BARRA DE ESTADO DE RED (ticker superior)
   ===================================================================== */
:root { --statusbar-h: 34px; }
.status-bar {
  position: sticky; top: 0; z-index: 110;
  height: var(--statusbar-h);
  background: #050c16; border-bottom: 1px solid rgba(92,160,224,0.15);
  font-family: var(--font-mono); font-size: 11px; color: var(--brand-200);
}
.status-bar__inner {
  max-width: var(--container); margin-inline: auto; height: 100%;
  padding-inline: var(--space-6); display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-4); overflow: hidden;
}
.status-bar__live { display: flex; align-items: center; gap: 8px; min-width: 0; flex-shrink: 1; }
.status-bar__live-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.status-bar__live strong { color: var(--accent-400); font-weight: 600; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-400); position: relative; flex-shrink: 0; }
.status-dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--accent-400); animation: statusPing 2.2s ease-out infinite; }
.status-bar__metrics { display: flex; align-items: center; gap: var(--space-4); white-space: nowrap; flex-shrink: 0; }
.status-bar__metrics strong { color: #fff; font-weight: 500; }
.status-bar__badge { font-size: 9px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(29,158,117,0.15); color: var(--accent-400); border: 1px solid rgba(29,158,117,0.3); }
@keyframes statusPing { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(2.2); } }

@media (max-width: 780px) { .status-bar__metrics span:not(:last-child) { display: none; } }
@media (max-width: 480px) { .status-bar__inner { padding-inline: var(--space-4); } }

/* el header queda pegado justo debajo de la barra de estado */
.site-header { top: var(--statusbar-h); }

@media (prefers-reduced-motion: reduce) { .status-dot::before { animation: none; } }

/* =====================================================================
   18. DASHBOARD IoT (zonas climáticas + genética)
   ===================================================================== */
.iot-panel { background: var(--brand-900); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--brand-200); }
.iot-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.iot-panel__head h3, .iot-panel__head h2 { color: #fff; font-size: var(--fs-h3); margin: 0; }

.iot-tabs { display: inline-flex; gap: var(--space-2); background: rgba(0,0,0,0.2); padding: 4px; border-radius: var(--radius); border: 1px solid rgba(92,160,224,0.15); }
.iot-tab { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; color: var(--brand-200); background: transparent; border: none; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; transition: all var(--dur) var(--ease); }
.iot-tab.is-active { background: var(--accent-600); color: #fff; }
.iot-tab:not(.is-active):hover { color: #fff; }

.iot-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.iot-zone { text-align: left; background: var(--brand-800); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius); padding: var(--space-4); cursor: pointer; transition: all var(--dur) var(--ease); color: var(--brand-200); }
.iot-zone:hover { border-color: rgba(92,160,224,0.4); }
.iot-zone.is-active { border-color: var(--accent-400); background: rgba(29,158,117,0.12); box-shadow: 0 0 0 1px var(--accent-400) inset; }
.iot-zone__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.iot-zone__icon { font-size: 1.2rem; color: var(--accent-400); }
.iot-zone__live { font-size: 8.5px; font-family: var(--font-mono); color: var(--accent-400); background: rgba(29,158,117,0.15); border: 1px solid rgba(29,158,117,0.3); padding: 1px 7px; border-radius: var(--radius-pill); }
.iot-zone__name { color: #fff; font-weight: 600; font-size: var(--fs-sm); margin-bottom: 2px; }
.iot-zone__loc { font-size: var(--fs-xs); color: var(--brand-200); opacity: 0.8; margin-bottom: var(--space-3); }
.iot-zone__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid rgba(92,160,224,0.15); font-family: var(--font-mono); font-size: 10.5px; }
.iot-zone__stats b { display: block; color: #fff; font-size: var(--fs-sm); font-weight: 600; }
.iot-zone__stats span { color: var(--brand-400); font-size: 9px; text-transform: uppercase; }

.iot-detail { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius-lg); padding: var(--space-6); }
.iot-detail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: 1px solid rgba(92,160,224,0.15); }
.iot-detail__head h4, .iot-detail__head h3 { color: #fff; font-size: 1.15rem; margin: 0 0 2px; }
.iot-detail__head p { font-size: var(--fs-xs); color: var(--brand-200); margin: 0; opacity: 0.85; }

.iot-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.iot-gauge { background: rgba(0,0,0,0.2); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-4); }
.iot-gauge__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); color: var(--brand-200); margin-bottom: var(--space-2); }
.iot-gauge__val { font-family: var(--font-display); font-size: 1.6rem; color: #fff; font-weight: 600; }
.iot-gauge__val small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--brand-200); font-weight: 400; }
.iot-gauge__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.08); margin-top: var(--space-3); overflow: hidden; }
.iot-gauge__bar span { display: block; height: 100%; background: var(--accent-600); border-radius: inherit; transition: width 0.6s var(--ease); }

.iot-actuators { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.iot-actuator { text-align: left; font-family: var(--font-mono); background: rgba(0,0,0,0.2); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius); padding: var(--space-3); cursor: pointer; color: var(--brand-400); transition: all var(--dur) var(--ease); }
.iot-actuator__label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-2); color: var(--brand-400); }
.iot-actuator__state { display: block; font-weight: 700; font-size: var(--fs-sm); color: var(--brand-200); }
.iot-actuator.is-on { border-color: var(--accent-400); background: rgba(29,158,117,0.15); }
.iot-actuator.is-on .iot-actuator__state { color: var(--accent-400); }

/* genética / quimiovares */
.gen-card { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-4); }
.gen-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid rgba(92,160,224,0.15); }
.gen-card__head h4, .gen-card__head h3 { color: #fff; font-size: 1.1rem; margin: 4px 0 0; }
.gen-card__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gen-card__tag { font-family: var(--font-mono); font-size: 9.5px; padding: 2px 8px; border-radius: var(--radius); background: rgba(29,158,117,0.15); color: var(--accent-400); border: 1px solid rgba(29,158,117,0.3); }
.gen-card__parents { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.gen-card__parent { background: rgba(0,0,0,0.2); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-3); font-size: var(--fs-xs); }
.gen-card__parent span { display: block; color: var(--brand-400); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; margin-bottom: 4px; }
.gen-card__parent strong { color: #fff; font-weight: 600; }
.terp-bar { margin-bottom: var(--space-2); }
.terp-bar__label { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--brand-200); margin-bottom: 3px; }
.terp-bar__label strong { color: var(--accent-400); }
.terp-bar__track { height: 5px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.terp-bar__track span { display: block; height: 100%; background: var(--accent-400); border-radius: inherit; }

@media (max-width: 640px) { .iot-panel__head { flex-direction: column; align-items: flex-start; } }

/* =====================================================================
   19. PIPELINE SHOWCASE (4 etapas interactivas)
   ===================================================================== */
.pipeline { background: var(--paper-100); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); }
.pipeline__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.pipeline__head h3 { font-size: var(--fs-h3); margin: 0; }
.pipeline__lote { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--accent-700); background: var(--accent-50); padding: 4px 10px; border-radius: var(--radius-pill); }

.pipeline__stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.pipeline__stage { text-align: left; background: var(--paper-50); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); cursor: pointer; transition: all var(--dur) var(--ease); }
.pipeline__stage:hover { border-color: var(--accent-400); }
.pipeline__stage.is-active { background: var(--accent-50); border-color: var(--accent-600); }
.pipeline__stage-num { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-500); text-transform: uppercase; }
.pipeline__stage.is-active .pipeline__stage-num { color: var(--accent-700); }
.pipeline__stage-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); margin-top: 4px; color: var(--ink-900); }
.pipeline__stage-sub { display: block; font-size: 11.5px; color: var(--ink-500); margin-top: 2px; }

.pipeline__body { display: none; }
.pipeline__body.is-active { display: block; }
.pipeline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
.pipeline__field { background: var(--paper-50); border: 1px solid var(--paper-line); border-radius: var(--radius); padding: var(--space-4); }
.pipeline__field span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); margin-bottom: 4px; }
.pipeline__field strong { display: block; color: var(--ink-900); font-size: var(--fs-sm); font-weight: 600; }
.pipeline__field small { display: block; color: var(--accent-700); font-family: var(--font-mono); font-size: 10.5px; margin-top: 4px; }
.pipeline__signoff { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--accent-50); border: 1px solid rgba(29,158,117,0.25); border-radius: var(--radius); padding: var(--space-4); }
.pipeline__signoff strong { color: var(--accent-700); }
.pipeline__signoff span { font-size: var(--fs-sm); color: var(--ink-700); }
.pipeline__signoff small { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-500); }

@media (max-width: 780px) { .pipeline__stages { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   20. COMPARATIVA DE RIESGO (manual vs. Sativa L Trace)
   ===================================================================== */
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); }
.compare-card { border-radius: var(--radius-lg); padding: var(--space-8); border: 1px solid; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.compare-card__icon { width: 48px; height: 48px; border-radius: var(--radius); display: grid; place-items: center; margin-bottom: var(--space-4); font-size: 1.4rem; }
.compare-card h3 { font-size: var(--fs-h3); margin-top: var(--space-1); }
.compare-card__sub { font-size: var(--fs-xs); margin-top: 2px; }
.compare-card ul { list-style: none; margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.compare-card li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); }
.compare-card li .mark { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; margin-top: 2px; }

.compare-card--bad { background: rgba(192,57,43,0.04); border-color: rgba(192,57,43,0.25); }
.compare-card--bad .compare-card__icon { background: rgba(192,57,43,0.12); color: var(--danger); }
.compare-card--bad .compare-card__sub { color: var(--danger); }
.compare-card--bad li .mark { background: rgba(192,57,43,0.12); color: var(--danger); }
.compare-card--bad li { color: var(--ink-700); }

.compare-card--good { background: var(--accent-50); border-color: rgba(29,158,117,0.35); box-shadow: var(--shadow-md); }
.compare-card--good:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.compare-card--good .compare-card__icon { background: var(--accent-600); color: #fff; }
.compare-card--good .compare-card__sub { color: var(--accent-700); }
.compare-card--good li .mark { background: var(--accent-600); color: #fff; }
.compare-card--good li { color: var(--ink-900); }

/* =====================================================================
   21. CTA BANNER (tarjeta oscura con gradiente, estilo producto)
   ===================================================================== */
.cta-banner {
  border-radius: var(--radius-lg); border: 1px solid rgba(29,158,117,0.35);
  background:
    radial-gradient(120% 140% at 12% -10%, rgba(29,158,117,0.22), transparent 55%),
    radial-gradient(120% 140% at 100% 115%, rgba(44,123,201,0.22), transparent 55%),
    var(--brand-900);
  padding: var(--space-16) var(--space-8); text-align: center; position: relative; overflow: hidden;
}
.cta-banner h2 { color: #fff; }
.cta-banner p { color: var(--brand-200); }

/* =====================================================================
   22. SIMULADOR DE PASAPORTE QR
   ===================================================================== */
.qr-sim { background: var(--brand-900); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--brand-200); }
.qr-sim__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-6); border-bottom: 1px solid rgba(92,160,224,0.15); }
.qr-sim__grid { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 780px) { .qr-sim__grid { grid-template-columns: 1fr; } }

.qr-sim__code { background: var(--brand-800); border: 1px solid rgba(29,158,117,0.3); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.qr-sim__box { width: 168px; height: 168px; margin-inline: auto; background: #fff; border-radius: var(--radius); padding: 10px; position: relative; }
.qr-sim__box svg { width: 100%; height: 100%; }
.qr-sim__badge { position: absolute; inset: 0; display: grid; place-items: center; }
.qr-sim__badge span { background: var(--accent-600); color: #fff; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 1rem; box-shadow: var(--shadow-md); }
.qr-sim__lote { font-family: var(--font-mono); color: var(--accent-400); font-size: var(--fs-sm); margin-top: var(--space-4); }
.qr-sim__hint { font-size: var(--fs-xs); color: var(--brand-200); opacity: 0.8; margin-top: 4px; }
.qr-sim__hash { margin-top: var(--space-4); text-align: left; background: rgba(0,0,0,0.2); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-3); font-family: var(--font-mono); font-size: 10.5px; word-break: break-all; }
.qr-sim__hash span:first-child { display: block; color: var(--brand-400); margin-bottom: 2px; }

.qr-sim__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.qr-sim__field { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-4); }
.qr-sim__field span { display: block; font-size: var(--fs-xs); color: var(--brand-200); margin-bottom: 2px; }
.qr-sim__field strong { color: #fff; font-size: var(--fs-sm); }

.qr-sim__profile { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); }
.qr-sim__profile-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
.qr-sim__profile-head span.tag { font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-400); background: rgba(29,158,117,0.15); border: 1px solid rgba(29,158,117,0.3); padding: 2px 8px; border-radius: var(--radius-pill); }
.qr-sim__cannab { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.qr-sim__cannab div { background: rgba(0,0,0,0.2); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-3); text-align: center; }
.qr-sim__cannab div span { display: block; font-size: var(--fs-xs); color: var(--brand-200); }
.qr-sim__cannab div strong { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent-400); }

.qr-sim__signoffs { display: flex; flex-wrap: wrap; gap: var(--space-4); background: var(--brand-800); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-4); }
.qr-sim__signoff { display: flex; gap: var(--space-3); align-items: flex-start; flex: 1 1 220px; }
.qr-sim__signoff i { color: var(--accent-400); font-size: 1.2rem; margin-top: 2px; }
.qr-sim__signoff strong { display: block; color: #fff; font-size: var(--fs-xs); }
.qr-sim__signoff span { font-size: 10.5px; color: var(--brand-200); }

/* =====================================================================
   23. CICLO DE CONSENSO (4 pasos técnicos)
   ===================================================================== */
.consensus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 860px) { .consensus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .consensus-grid { grid-template-columns: 1fr; } }
.consensus-step { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.2); border-radius: var(--radius); padding: var(--space-5); }
.consensus-step__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(92,160,224,0.15); color: var(--brand-400); border: 1px solid rgba(92,160,224,0.3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; margin-bottom: var(--space-3); }
.consensus-step__num--accent { background: var(--accent-600); color: #fff; border-color: transparent; }
.consensus-step h4, .consensus-step h3 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.consensus-step p { color: var(--brand-200); font-size: var(--fs-xs); line-height: 1.6; }

/* =====================================================================
   24. MINI-FACT (dato corto en tarjeta clara)
   ===================================================================== */
.mini-fact { border-radius: var(--radius); padding: var(--space-4); border: 1px solid var(--paper-line); background: var(--paper-50); }
.mini-fact span { display: block; font-size: var(--fs-xs); color: var(--ink-500); margin-bottom: 4px; }
.mini-fact strong { color: var(--ink-900); font-size: var(--fs-sm); }

/* =====================================================================
   25. GENERADOR DE ROADMAP (asistente interactivo)
   ===================================================================== */
.roadmap-gen { background: var(--brand-900); border: 1px solid rgba(92,160,224,0.18); border-radius: var(--radius-lg); padding: var(--space-6); }
.roadmap-gen__head { margin-bottom: var(--space-6); }
.roadmap-gen__form { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--space-4); align-items: end; margin-bottom: var(--space-2); }
@media (max-width: 700px) { .roadmap-gen__form { grid-template-columns: 1fr; } }

.roadmap-gen__output { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid rgba(92,160,224,0.15); }
.roadmap-gen__summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.roadmap-gen__summary div { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.roadmap-gen__summary span { display: block; font-size: var(--fs-xs); color: var(--brand-200); margin-bottom: 2px; }
.roadmap-gen__summary strong { color: var(--accent-400); font-size: var(--fs-sm); }

.roadmap-gen__nodes { margin-bottom: var(--space-6); }
.roadmap-gen__nodes-label { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--brand-200); margin-bottom: var(--space-3); }
.roadmap-gen__nodes-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.roadmap-gen__nodes-list span { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-400); background: rgba(29,158,117,0.12); border: 1px solid rgba(29,158,117,0.3); padding: 4px 10px; border-radius: var(--radius-pill); }

.roadmap-gen__phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: var(--space-4); }
.roadmap-gen__phase { background: var(--brand-800); border: 1px solid rgba(92,160,224,0.15); border-radius: var(--radius); padding: var(--space-4); }
.roadmap-gen__phase-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.roadmap-gen__phase-week { font-family: var(--font-mono); font-size: 9.5px; color: var(--accent-400); background: rgba(29,158,117,0.15); border: 1px solid rgba(29,158,117,0.3); padding: 2px 8px; border-radius: var(--radius-pill); }
.roadmap-gen__phase h4 { color: #fff; font-size: var(--fs-sm); margin-bottom: var(--space-2); }
.roadmap-gen__phase p { color: var(--brand-200); font-size: var(--fs-xs); margin-bottom: var(--space-3); }
.roadmap-gen__phase ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.roadmap-gen__phase li { display: flex; gap: 6px; align-items: flex-start; font-size: 11px; color: var(--brand-200); }
.roadmap-gen__phase li i { color: var(--accent-400); font-size: 12px; margin-top: 2px; }

/* Celular (2026-10-15): con `1fr` la columna única del hero no bajaba del ancho
   mínimo del diagrama de red y el texto se cortaba a la derecha (412 px:
   .hero__copy medía 460 px). minmax(0, 1fr) deja que la columna se achique. */
@media (max-width: 900px) { .hero--split .hero__inner { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   26. AJUSTES RESPONSIVOS (2026-10-15)
   Celulares de 320-412 px, horizontal, y letra del sistema agrandada
   (text-size-adjust ~130 % en navegadores internos de Android).
   ===================================================================== */
body { overflow-wrap: break-word; }

/* Grillas: el mínimo de columna nunca supera el ancho disponible (a 320 px
   el contenedor deja ~272 px y minmax(300px, …) desbordaba). */
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.compare-grid { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.iot-zones, .gen-card__parents, .pipeline__grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.iot-gauges, .qr-sim__fields { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.roadmap-gen__phases { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.roadmap-gen__summary { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.grid > *, .compare-grid > *, .pipeline__stages > *, .qr-sim__grid > * { min-width: 0; }

/* Objetivos táctiles: botones de al menos 44 px de alto. */
.btn { min-height: 44px; justify-content: center; }
.nav__brand { min-height: 44px; }

/* Fila de nodos del hero de Producto: puede bajar de línea. */
.inline-net { flex-wrap: wrap; row-gap: var(--space-1); }

/* Encabezado móvil: logo + EN/ES + menú siempre caben. El botón de demo del
   encabezado se oculta en celulares; el menú desplegable trae su propio
   "Solicitar demo" (.nav__links-cta) además de "Contacto". */
.nav__links-cta { display: none; }
@media (max-width: 860px) {
  .nav__toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin-right: -10px; }
  .nav__lang { min-width: 44px; height: 44px; }
  .nav__links.is-open { max-height: calc(100vh - 72px - var(--statusbar-h, 0px)); overflow-y: auto; gap: 0; padding-block: var(--space-2) var(--space-4); }
  .nav__links.is-open a { display: flex; align-items: center; min-height: 44px; }
  .nav__links.is-open a.is-active::after { display: none; }
  .nav__links.is-open .nav__links-cta { display: block; margin-top: var(--space-3); }
  .nav__links.is-open .nav__links-cta a { color: #fff; justify-content: center; }
}
@media (max-width: 560px) {
  .nav__cta .nav__demo { display: none; }
  .nav { gap: var(--space-2); }
  .nav__brand { min-width: 0; }
}
@media (max-width: 480px) {
  .container { padding-inline: var(--space-4); }
}

/* Paneles de código: en pantallas angostas las líneas bajan en vez de
   quedar cortadas por el overflow del panel. */
@media (max-width: 640px) {
  .code-panel { padding: var(--space-4); }
  .code-panel .cp-line { white-space: normal; overflow-wrap: anywhere; }
}

/* Pie: enlaces de lista con área táctil de 44 px en táctiles. */
@media (max-width: 860px) {
  .footer-col li { margin-bottom: 0; }
  .footer-col ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Diagrama de red (hero): el SVG se dibuja a 0,4-0,7x y las etiquetas
   (10,5 y 7 unidades) quedaban en 3-7 px. Se agrandan en todo ancho (el
   nombre centrado en el nodo y el subtítulo debajo del círculo); en
   celular se ocultan los subtítulos (la leyenda de abajo ya explica cada
   tipo de nodo). .nv2-node__hit es el área táctil transparente de cada nodo. */
.nv2-node__hit { fill: transparent; }
.nv2-node__label { font-size: 13px; transform: translateY(6px); }
.nv2-node__sub { font-size: 13px; transform: translateY(24px); }
@media (max-width: 1100px) {
  .nv2-node__label { font-size: 15px; }
  .nv2-node__sub { font-size: 15px; transform: translateY(25px); }
}
@media (max-width: 640px) {
  .nv2-node__label { font-size: 26px; transform: translateY(9px); }
  .nv2-node__sub { display: none; }
}

/* Letras chicas (8,5-9,5 px) de etiquetas y chips: mínimo legible. */
.status-bar__badge, .netviz2__panel-badge, .block-node__hash, .block-node__actor,
.qr-sim__profile-head span.tag, .iot-zone__live, .iot-zone__stats span,
.iot-actuator__label, .gen-card__tag, .gen-card__parent span,
.pipeline__stage-num, .roadmap-gen__phase-week { font-size: 10.5px; }
@media (max-width: 640px) { .netviz2__legend span { font-size: 11px; } }
@media (max-width: 1024px) { .iot-tab { min-height: 44px; } }

@media (max-width: 860px) {
  .arch-feature { grid-template-columns: minmax(0, 1fr); }
  .footer-col ul a { min-width: 44px; }
  .card a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; }
}
/* Pasos numerados: el círculo cuelga 24 px a la izquierda de la línea; en
   celular el contenedor tiene 16 px de margen y quedaba cortado. */
@media (max-width: 640px) {
  .step { margin-left: 23px; padding-left: var(--space-12); }
}