/* ============================================================
   H&C · Sistema de diseño (capa sobre styles.css)
   - Sistema cromático oklch (gradiente firma fijo)
   - Separadores línea-paleta
   - Barra de progreso de scroll
   - Textura grain sutil
   Cada página setea su color protagonista vía --cyan/--accent/--glow
   en un :root inline (mecanismo ya usado por las páginas de producto).
   ============================================================ */
:root{
  --hc:         oklch(0.80 0.13 220);   /* marca madre · cyan */
  --c-documed:  oklch(0.81 0.14 178);   /* salud · teal */
  --c-plataforma: oklch(0.72 0.15 256); /* infra · azul cobalto */
  --c-temporal: oklch(0.75 0.13 278);   /* durable · índigo */
  --c-graphity: oklch(0.72 0.17 300);   /* IA · violeta */
  --c-arca:     oklch(0.79 0.155 67);   /* fiscal · ámbar terminal */
  --c-manifiesto: oklch(0.72 0.135 50); /* tesis · cobre */
  --c-metodologia: oklch(0.72 0.17 350);/* método · rosa-magenta futurista */
  --palette: linear-gradient(90deg, var(--hc), var(--c-documed), var(--c-plataforma), var(--c-temporal), var(--c-graphity), var(--c-metodologia), var(--c-manifiesto), var(--c-arca));
}

/* ===== Separadores línea-paleta =====
   #1 línea continua · #6 ultra-sutil (workhorse) · #2 glow · #5 animado · #7 centrado · #4 nodos */
.hcsep{ width:100%; border:0; margin:0; flex:none; }
.hcsep-line  { height:1px;   background:var(--palette); }
.hcsep-sub   { height:1px;   background:var(--palette); opacity:.30; }
.hcsep-glow  { height:2px;   background:var(--palette); box-shadow:0 0 16px -1px color-mix(in oklab, var(--accent) 55%, transparent); }
.hcsep-anim  { height:1.5px; background:var(--palette); background-size:200% 100%; }
.hcsep-center{ height:1px; width:min(620px,70%); margin-inline:auto; background:var(--palette);
  -webkit-mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);
          mask:linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent); }
.hcsep-nodes { position:relative; height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent); }
.hcsep-nodes i{ position:absolute; top:50%; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%); box-shadow:0 0 8px 1px currentColor; }
.hcsep-nodes i:nth-child(1){left:30%;background:var(--hc);color:var(--hc)}
.hcsep-nodes i:nth-child(2){left:42%;background:var(--c-documed);color:var(--c-documed)}
.hcsep-nodes i:nth-child(3){left:54%;background:var(--c-plataforma);color:var(--c-plataforma)}
.hcsep-nodes i:nth-child(4){left:62%;background:var(--c-temporal);color:var(--c-temporal)}
.hcsep-nodes i:nth-child(5){left:70%;background:var(--c-graphity);color:var(--c-graphity)}
.hcsep-nodes i:nth-child(6){left:78%;background:var(--c-arca);color:var(--c-arca)}
@media (prefers-reduced-motion: no-preference){
  .hcsep-anim{ animation: hcflow 16s linear infinite; }
}
@keyframes hcflow{ to{ background-position:200% 50%; } }

/* ===== Barra de progreso de scroll (separador #3 segmentos en movimiento) ===== */
#hc-progress{ position:fixed; top:0; left:0; height:2px; width:0%; z-index:60;
  background:var(--palette); background-size:100vw 100%; background-attachment:fixed;
  box-shadow:0 0 12px -2px color-mix(in oklab, var(--accent) 60%, transparent);
  transition:width .08s linear; pointer-events:none; }

/* ===== Textura grain sutil (acabado premium) ===== */
body::after{
  content:""; position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.038; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Nav unificado con dropdowns (Productos / Marco) ===== */
.nav-links{ align-items:center; }
.nav-drop{ position:relative; }
.nav-drop > .nav-droptoggle{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); background:none; border:0; cursor:pointer; padding:0;
  display:inline-flex; align-items:center; gap:6px; transition:color .2s ease;
}
.nav-drop:hover > .nav-droptoggle, .nav-drop.active > .nav-droptoggle{ color:var(--text); }
.nav-drop.active > .nav-droptoggle{ color:var(--accent); }
.nav-drop .caret{ font-size:8px; transition:transform .25s ease; }
.nav-drop:hover .caret{ transform:rotate(180deg); }
.nav-dropmenu{
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(8px);
  min-width:210px; padding:8px; display:flex; flex-direction:column; gap:2px;
  background:rgba(7,11,20,.97); backdrop-filter:blur(16px) saturate(120%);
  border:1px solid var(--line); border-radius:9px; box-shadow:0 20px 54px -16px rgba(0,0,0,.75);
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease; z-index:60;
}
.nav-dropmenu::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-drop:hover .nav-dropmenu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(4px); }
.nav-dropmenu a{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; text-transform:none;
  color:var(--text-dim); text-decoration:none; padding:9px 12px; border-radius:5px;
  transition:background .2s ease, color .2s ease;
}
.nav-dropmenu a::after{ display:none !important; }
.nav-dropmenu a:hover{ background:rgba(255,255,255,.05); color:var(--text); }
.nav-dropmenu a.active{ color:var(--accent); }

/* ===== dflow reactivo: el workflow "se ejecuta" (pulso que recorre los nodos) ===== */
@media (prefers-reduced-motion: no-preference){
  .dflow-track .dnode{ position:relative; }
  .dflow-track .dnode::before{
    content:""; position:absolute; inset:0; border:1px solid var(--accent); opacity:0;
    box-shadow:0 0 18px -3px var(--glow); pointer-events:none; animation: hc-dnode 5.6s ease-in-out infinite;
  }
  .dflow-track .dnode:nth-child(1)::before{ animation-delay:0s; }
  .dflow-track .dnode:nth-child(2)::before{ animation-delay:1s; }
  .dflow-track .dnode:nth-child(3)::before{ animation-delay:2s; }
  .dflow-track .dnode:nth-child(4)::before{ animation-delay:3s; }
  @keyframes hc-dnode{ 0%,13%,100%{opacity:0} 4%,9%{opacity:.95} }
  .dflow-track .dnode .dico{ animation: hc-dico 5.6s ease-in-out infinite; }
  .dflow-track .dnode:nth-child(1) .dico{ animation-delay:0s }
  .dflow-track .dnode:nth-child(2) .dico{ animation-delay:1s }
  .dflow-track .dnode:nth-child(3) .dico{ animation-delay:2s }
  .dflow-track .dnode:nth-child(4) .dico{ animation-delay:3s }
  @keyframes hc-dico{ 0%,13%,100%{transform:scale(1)} 5%,8%{transform:scale(1.14)} }
  .dflow-bar{ background-size:200% 100% !important; animation: hc-dbar 3s linear infinite; }
  @keyframes hc-dbar{ to{ background-position:-200% 0 } }
  .dnode.retry .badge{ animation: hc-badge 5.6s ease-in-out infinite; animation-delay:2s; }
  @keyframes hc-badge{ 0%,28%,100%{transform:translateX(-50%) scale(1)} 34%{transform:translateX(-50%) scale(1.14)} }
}

/* ===== firma de marca: hairline superior bajo el nav (separador #1 fijo) ===== */
.nav.scrolled::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--palette); opacity:.5; }

/* ===== Recuadros flotantes — reemplaza el patrón-tabla en TODOS los grids de cards
   (.layers, .implies, .fmodes, .pillars, .featlist; el contenedor ya perdió su
   background/border-de-tabla). Cada item pasa a card con borde, radio y sombra. ===== */
.layer, .implies > div, .fmodes > div, .pillar, .featitem {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  box-shadow: 0 14px 38px -20px rgba(0,0,0,.55);
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.layer:hover, .implies > div:hover, .fmodes > div:hover, .pillar:hover, .featitem:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  box-shadow: 0 22px 48px -22px rgba(0,0,0,.68);
}
/* tablas de datos (comparativa / specs): suavizar el marco rígido sin perder estructura */
.cmp, .specs { border-radius: 12px; overflow: hidden; }

/* ===== Optimización móvil / touch — evitar repaints costosos (perf) =====
   El grain (mix-blend-mode fullscreen) y los backdrop-filter cuestan caro en
   GPU móvil: se desactivan en pantallas chicas / táctiles. Imperceptible ahí. */
@media (max-width: 860px), (pointer: coarse) {
  body::after { display: none !important; }                         /* grain blend OFF */
  .nav.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(5,7,13,0.94); }
  .nav-dropmenu { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7,11,20,0.98); }
  .hcsep-anim { animation: none; }                                  /* gradiente animado OFF */
  #hc-progress { box-shadow: none; }
  .dflow-track .dnode::before, .dflow-track .dnode .dico,
  .dflow-bar, .dnode.retry .badge { animation: none !important; }   /* dflow estático en móvil */
  /* blur del reveal OFF en móvil (el filter:blur por elemento arrastra) — queda solo fade + slide */
  [data-reveal], [data-reveal].in { filter: none !important; }
  [data-reveal] { transition-property: opacity, transform !important; }
}