/* ==========================================================================
   ELIO CONTENT — Biblioteca visual oficial para el sitio de ElioGPT
   Sistema de ilustraciones nativas: SVG, CSS, Canvas 2D cuando aporta valor.
   Sin imágenes rasterizadas pesadas. Sin librerías externas.
   Responsive, accessible, prefers-reduced-motion compliant.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS LOCALES (sobrescribe o complementa elio-ds.css)
   -------------------------------------------------------------------------- */
:root {
  --ec-core: #7c3aed;
  --ec-core-glow: rgba(124, 58, 237, .45);
  --ec-accent: #a855f7;
  --ec-bright: #c084fc;
  --ec-magenta: #e879f9;
  --ec-connect: #818cf8;
  --ec-verify: #34d399;
  --ec-warn: #fbbf24;
  --ec-surface: rgba(255,255,255,.04);
  --ec-surface-2: rgba(255,255,255,.07);
  --ec-border: rgba(255,255,255,.10);
  --ec-border-bright: rgba(124,58,237,.55);
  --ec-text: #e2d9f3;
  --ec-muted: #9d8db8;
  --ec-line-w: 1.5px;
  --ec-radius: 12px;
  --ec-radius-lg: 20px;
  --ec-signal-dur: 2s;
  --ec-cycle-dur: .8s;
  --ec-pulse-dur: 3s;
}

/* --------------------------------------------------------------------------
   CONTRASTE CONCEPTUAL: Un chatbot responde. ELIO trabaja.
   -------------------------------------------------------------------------- */
.contrast-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  margin: 48px 0;
}
.contrast-split__col {
  padding: clamp(28px,4vw,48px) clamp(24px,3vw,40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contrast-split__col--bot {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--ec-border);
}
.contrast-split__col--elio {
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(168,85,247,.10));
  border: 1px solid var(--ec-border-bright);
}
.contrast-split__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ec-muted);
}
.contrast-split__col--elio .contrast-split__label { color: var(--ec-bright); }
.contrast-split__title {
  font-size: clamp(1.1rem,2vw,1.4rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.contrast-split__items {
  list-style: none; margin:0; padding:0;
  display: flex; flex-direction: column; gap: 8px;
}
.contrast-split__items li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .875rem; color: var(--ec-muted); line-height: 1.5;
}
.contrast-split__items li::before {
  content: '—'; color: var(--ec-muted); flex-shrink: 0; margin-top: 1px;
}
.contrast-split__col--elio .contrast-split__items li { color: var(--ec-text); }
.contrast-split__col--elio .contrast-split__items li::before { content: '✓'; color: var(--ec-verify); }

/* --------------------------------------------------------------------------
   HERO OPERATIVO (index.html) — orquestador mejorado
   -------------------------------------------------------------------------- */
.eo-hero {
  position: relative;
  width: 100%; max-width: 540px; aspect-ratio: 1;
  margin: 0 auto;
}
.eo-hero__bg {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(124,58,237,.18) 0%, transparent 70%);
  animation: eo-pulse var(--ec-pulse-dur) ease-in-out infinite alternate;
}
@keyframes eo-pulse {
  from { opacity: .6; transform: scale(.96); }
  to   { opacity: 1;  transform: scale(1.02); }
}
.eo-hero__ring {
  position: absolute; border-radius: 50%;
  border: var(--ec-line-w) solid;
}
.eo-hero__ring--1 {
  inset: 18%; border-color: rgba(124,58,237,.20);
  animation: eo-spin 24s linear infinite;
}
.eo-hero__ring--2 {
  inset: 6%; border-color: rgba(124,58,237,.12);
  animation: eo-spin 40s linear infinite reverse;
}
@keyframes eo-spin { to { transform: rotate(360deg); } }

/* SVG de líneas de conexión */
.eo-hero__lines {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.eo-hero__lines path {
  fill: none; stroke: var(--ec-connect);
  stroke-width: var(--ec-line-w);
  stroke-dasharray: 6 4;
  opacity: .35;
}

/* Señal animada sobre la línea */
.eo-signal {
  fill: none; stroke: var(--ec-bright);
  stroke-width: 2.5px; stroke-dasharray: 6 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  opacity: .9;
}
.eo-signal--1 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: 0s; }
.eo-signal--2 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: .4s; }
.eo-signal--3 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: .8s; }
.eo-signal--4 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: 1.2s; }
.eo-signal--5 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: 1.6s; }
.eo-signal--6 { animation: eo-sig var(--ec-signal-dur) linear infinite; animation-delay: .2s; }
@keyframes eo-sig {
  from { stroke-dashoffset: 200; }
  to   { stroke-dashoffset: -40; }
}

/* Núcleo central ELIO */
.eo-core {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 88px; height: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(168,85,247,.55), rgba(124,58,237,.9));
  box-shadow: 0 0 0 6px rgba(124,58,237,.22), 0 0 40px var(--ec-core-glow);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.eo-core__symbol {
  font-size: 1rem; font-weight: 800; color: #fff;
  letter-spacing: -.02em; line-height: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.eo-core__pulse {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(168,85,247,.6);
  animation: eo-core-pulse 2.4s ease-out infinite;
}
@keyframes eo-core-pulse {
  0%   { transform: scale(1); opacity: .8; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

/* Nodos del sistema */
.eo-node {
  position: absolute;
  display: flex; align-items: center; gap: 7px;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  padding: 8px 10px;
  max-width: 130px;
  transition: border-color .3s;
  z-index: 2;
}
.eo-node:hover { border-color: var(--ec-border-bright); }
.eo-node__ico {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(124,58,237,.4), rgba(168,85,247,.25));
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: 700; color: var(--ec-bright);
  flex-shrink: 0; letter-spacing: -.01em;
}
.eo-node__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.eo-node__name { font-size: .72rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eo-node__status { font-size: .62rem; color: var(--ec-muted); }
.eo-node__status--ok { color: var(--ec-verify); }
.eo-node__status--wait { color: var(--ec-warn); }

/* Posiciones de los nodos (porcentaje relativo al contenedor) */
.eo-node--tl  { top: 4%;   left: 2%; }
.eo-node--tc  { top: -2%;  left: 50%; transform: translateX(-50%); }
.eo-node--tr  { top: 4%;   right: 2%; }
.eo-node--l   { top: 50%;  left: -4%; transform: translateY(-50%); }
.eo-node--r   { top: 50%;  right: -4%; transform: translateY(-50%); }
.eo-node--bl  { bottom: 4%; left: 2%; }
.eo-node--bc  { bottom: -2%; left: 50%; transform: translateX(-50%); }
.eo-node--br  { bottom: 4%; right: 2%; }

/* Panel de mensajes operativos */
.eo-panel {
  position: absolute; bottom: -16px; right: -12px;
  background: rgba(10,7,18,.9);
  border: 1px solid var(--ec-border-bright);
  border-radius: var(--ec-radius);
  padding: 12px 14px;
  min-width: 180px; z-index: 3;
  backdrop-filter: blur(12px);
}
.eo-panel__title {
  font-size: .64rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ec-bright); margin-bottom: 8px;
}
.eo-panel__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .68rem;
}
.eo-panel__row:last-child { border-bottom: none; }
.eo-panel__label { color: var(--ec-muted); }
.eo-panel__tag { font-size: .62rem; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.eo-panel__tag--ok { background: rgba(52,211,153,.15); color: var(--ec-verify); }
.eo-panel__tag--wait { background: rgba(251,191,36,.12); color: var(--ec-warn); }
.eo-panel__tag--run { background: rgba(124,58,237,.2); color: var(--ec-bright); }

/* --------------------------------------------------------------------------
   AUTONOMÍA OPERATIVA CONTROLADA — Tres capas
   -------------------------------------------------------------------------- */
.aoc-diagram {
  display: grid;
  gap: 2px;
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  margin: 40px 0;
}
.aoc-layer {
  display: flex; align-items: flex-start; gap: 24px;
  padding: clamp(20px,3vw,32px) clamp(20px,3vw,36px);
  border: 1px solid transparent;
  position: relative;
}
.aoc-layer--intel  { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.25); }
.aoc-layer--action { background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.22); }
.aoc-layer--control{ background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.18); }
.aoc-layer__num {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: #fff;
}
.aoc-layer--intel  .aoc-layer__num { background: rgba(124,58,237,.5); }
.aoc-layer--action .aoc-layer__num { background: rgba(99,102,241,.5); }
.aoc-layer--control.aoc-layer__num { background: rgba(52,211,153,.35); }
.aoc-layer--control .aoc-layer__num { background: rgba(52,211,153,.35); }
.aoc-layer__body { flex: 1; }
.aoc-layer__heading { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.aoc-layer--intel   .aoc-layer__heading { color: var(--ec-bright); }
.aoc-layer--action  .aoc-layer__heading { color: var(--ec-connect); }
.aoc-layer--control .aoc-layer__heading { color: var(--ec-verify); }
.aoc-layer__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aoc-chip {
  font-size: .72rem; padding: 4px 10px; border-radius: 99px;
  background: var(--ec-surface-2); border: 1px solid var(--ec-border); color: var(--ec-text);
}
.aoc-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 6px 0; color: var(--ec-muted); font-size: .85rem;
}

/* --------------------------------------------------------------------------
   ACCESS HUB — Diagrama radial central
   -------------------------------------------------------------------------- */
.ah-wrap {
  position: relative;
  width: 100%; max-width: 620px; margin: 0 auto;
  aspect-ratio: 1 / .92;
}
.ah-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;
}
/* Círculo central del hub */
.ah-core {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, rgba(124,58,237,.7), rgba(80,20,160,.9));
  box-shadow: 0 0 0 8px rgba(124,58,237,.18), 0 0 48px rgba(124,58,237,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; z-index: 2; text-align: center;
}
.ah-core__label { font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ah-core__name { font-size: .9rem; font-weight: 800; color: #fff; line-height: 1; }
.ah-core__sub { font-size: .55rem; color: var(--ec-bright); }

/* Tarjeta de sistema externo */
.ah-node {
  position: absolute;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 3px;
  text-align: center; align-items: center;
  min-width: 74px; z-index: 2;
  transform: translate(-50%, -50%);
  transition: border-color .3s, box-shadow .3s;
}
.ah-node:hover { border-color: var(--ec-border-bright); box-shadow: 0 0 14px rgba(124,58,237,.18); }
.ah-node__ico { font-size: .68rem; font-weight: 700; color: var(--ec-bright); }
.ah-node__name { font-size: .65rem; font-weight: 600; color: #fff; white-space: nowrap; }
.ah-node__badge {
  font-size: .55rem; padding: 2px 6px; border-radius: 99px; font-weight: 600;
}
.ah-node__badge--ok   { background: rgba(52,211,153,.15);  color: var(--ec-verify); }
.ah-node__badge--wait { background: rgba(251,191,36,.12);  color: var(--ec-warn); }
.ah-node__badge--off  { background: rgba(255,255,255,.06); color: var(--ec-muted); }
.ah-node__badge--ro   { background: rgba(99,102,241,.15);  color: var(--ec-connect); }

/* Líneas SVG del Access Hub */
.ah-line { stroke: var(--ec-connect); stroke-width: 1px; stroke-dasharray: 5 4; opacity: .3; fill: none; }
.ah-line--ok   { stroke: var(--ec-verify); opacity: .5; }
.ah-line--wait { stroke: var(--ec-warn);   opacity: .4; }
.ah-line--off  { stroke: var(--ec-muted);  opacity: .2; }

/* Flujo de explicación bajo el hub */
.ah-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  justify-content: center;
  margin: 28px auto 0;
  max-width: 600px;
}
.ah-flow__step {
  font-size: .78rem; color: var(--ec-text); padding: 8px 12px;
  background: var(--ec-surface); border: 1px solid var(--ec-border);
  border-radius: 8px; white-space: nowrap; text-align: center;
}
.ah-flow__arrow { color: var(--ec-muted); font-size: .85rem; padding: 0 4px; }

/* --------------------------------------------------------------------------
   CICLO OPERATIVO — 8 etapas en circuito
   -------------------------------------------------------------------------- */
.opcycle {
  position: relative;
  width: 100%; max-width: 560px; margin: 0 auto;
  aspect-ratio: 1;
}
.opcycle__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.opcycle__track { fill: none; stroke: rgba(124,58,237,.15); stroke-width: 1.5px; }
.opcycle__segment {
  fill: none; stroke: var(--ec-accent);
  stroke-width: 3px; stroke-linecap: round;
  opacity: 0;
  transition: opacity .5s;
}
.opcycle__segment.is-done  { opacity: .35; stroke: var(--ec-muted); }
.opcycle__segment.is-active { opacity: 1; }

/* Nodo en el arco */
.opcycle__node {
  position: absolute; transform: translate(-50%, -50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ec-surface);
  border: 2px solid var(--ec-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .58rem; font-weight: 700; color: var(--ec-muted);
  text-align: center; line-height: 1.2; cursor: default;
  transition: border-color .4s, background .4s, color .4s, box-shadow .4s;
  z-index: 2;
}
.opcycle__node.is-active {
  border-color: var(--ec-accent);
  background: rgba(124,58,237,.25);
  color: #fff;
  box-shadow: 0 0 16px rgba(124,58,237,.4);
}
.opcycle__node.is-done {
  border-color: rgba(52,211,153,.4);
  background: rgba(52,211,153,.08);
  color: var(--ec-verify);
}

/* Etiqueta de la etapa activa */
.opcycle__label {
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  font-size: .82rem; font-weight: 600; color: var(--ec-bright);
  white-space: nowrap;
  text-align: center;
}

/* --------------------------------------------------------------------------
   PROCESO PROGRESIVO — 7 etapas lineales
   -------------------------------------------------------------------------- */
.prog-steps {
  display: grid; gap: 2px;
  counter-reset: prog;
}
.prog-step {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 22px;
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: 12px;
  position: relative;
  transition: border-color .3s;
}
.prog-step:hover { border-color: var(--ec-border-bright); }
.prog-step__num {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(124,58,237,.2); border: 1px solid rgba(124,58,237,.35);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 800; color: var(--ec-bright); counter-increment: prog;
}
.prog-step__body { flex: 1; }
.prog-step__title { font-size: .9rem; font-weight: 700; color: #fff; margin-bottom: 4px; }
.prog-step__desc { font-size: .82rem; color: var(--ec-muted); line-height: 1.55; }
.prog-step--accent { border-color: rgba(52,211,153,.2); background: rgba(52,211,153,.05); }
.prog-step--accent .prog-step__num { background: rgba(52,211,153,.15); border-color: rgba(52,211,153,.4); color: var(--ec-verify); }

/* Conector vertical entre pasos */
.prog-connector {
  display: flex; align-items: center; justify-content: center;
  height: 18px; color: var(--ec-muted); font-size: .75rem;
}

/* --------------------------------------------------------------------------
   HABILIDADES REUTILIZABLES
   -------------------------------------------------------------------------- */
.skills-visual {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center;
  margin: 32px 0;
}
.skills-source, .skills-result {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 20px;
}
.skills-source__label, .skills-result__label {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ec-muted); margin-bottom: 12px;
}
.skills-result__label { color: var(--ec-verify); }
.skill-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 8px;
  background: var(--ec-surface-2);
  margin-bottom: 6px;
  font-size: .78rem; color: var(--ec-text);
}
.skill-item__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.skill-item__dot--pending { background: var(--ec-warn); }
.skill-item__dot--review  { background: var(--ec-accent); }
.skill-item__dot--ready   { background: var(--ec-verify); }
.skills-arrow {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--ec-muted);
}
.skills-arrow__line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, transparent, var(--ec-connect), transparent);
}
.skills-arrow__head { font-size: .85rem; color: var(--ec-connect); }

/* --------------------------------------------------------------------------
   PLAN MULTI-PASO
   -------------------------------------------------------------------------- */
.mplan {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
}
.mplan__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: rgba(124,58,237,.08);
  border-bottom: 1px solid var(--ec-border);
}
.mplan__head-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(124,58,237,.3);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: var(--ec-bright);
}
.mplan__request { font-size: .82rem; color: var(--ec-text); }
.mplan__request b { color: #fff; }
.mplan__steps { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.mplan__step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid transparent;
  font-size: .78rem; transition: background .3s;
}
.mplan__step--done    { background: rgba(52,211,153,.07); border-color: rgba(52,211,153,.15); }
.mplan__step--active  { background: rgba(124,58,237,.12); border-color: rgba(124,58,237,.3); }
.mplan__step--wait    { background: rgba(251,191,36,.07); border-color: rgba(251,191,36,.2); }
.mplan__step--pending { background: var(--ec-surface-2); border-color: var(--ec-border); }
.mplan__step-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .62rem; font-weight: 700;
}
.mplan__step--done   .mplan__step-num { background: rgba(52,211,153,.2); color: var(--ec-verify); }
.mplan__step--active .mplan__step-num { background: rgba(124,58,237,.3); color: var(--ec-bright); }
.mplan__step--wait   .mplan__step-num { background: rgba(251,191,36,.15); color: var(--ec-warn); }
.mplan__step--pending .mplan__step-num { background: var(--ec-surface); color: var(--ec-muted); }
.mplan__step-label { flex: 1; color: var(--ec-text); }
.mplan__step--done   .mplan__step-label { color: var(--ec-verify); }
.mplan__step--active .mplan__step-label { color: #fff; font-weight: 600; }
.mplan__step--pending .mplan__step-label { color: var(--ec-muted); }
.mplan__step-tag {
  font-size: .6rem; padding: 2px 8px; border-radius: 99px; font-weight: 600;
}
.mplan__step--done   .mplan__step-tag { background: rgba(52,211,153,.15); color: var(--ec-verify); }
.mplan__step--active .mplan__step-tag { background: rgba(124,58,237,.2); color: var(--ec-bright); }
.mplan__step--wait   .mplan__step-tag { background: rgba(251,191,36,.12); color: var(--ec-warn); }
.mplan__step--pending .mplan__step-tag { background: var(--ec-surface); color: var(--ec-muted); }

/* --------------------------------------------------------------------------
   CONTROL HUMANO — Panel de aprobación
   -------------------------------------------------------------------------- */
.approval-panel {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  max-width: 520px; margin: 0 auto;
}
.approval-panel__context {
  padding: 16px 18px;
  background: rgba(124,58,237,.08);
  border-bottom: 1px solid var(--ec-border);
}
.approval-panel__from { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ec-bright); margin-bottom: 6px; }
.approval-panel__action { font-size: .88rem; color: var(--ec-text); line-height: 1.4; }
.approval-panel__impact {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ec-border);
  background: rgba(251,191,36,.05);
}
.approval-panel__impact-label { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ec-warn); margin-bottom: 4px; }
.approval-panel__impact-text { font-size: .8rem; color: var(--ec-text); }
.approval-panel__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 14px 18px;
}
.approval-panel__btn {
  flex: 1; padding: 9px 12px; border-radius: 8px;
  font-size: .78rem; font-weight: 700; text-align: center; cursor: pointer;
  border: none; outline: none; transition: opacity .2s;
}
.approval-panel__btn--ok      { background: rgba(52,211,153,.18); color: var(--ec-verify); }
.approval-panel__btn--review  { background: rgba(251,191,36,.12); color: var(--ec-warn); }
.approval-panel__btn--reject  { background: rgba(255,255,255,.06); color: var(--ec-muted); }
.approval-panel__btn--scope   { background: rgba(99,102,241,.15); color: var(--ec-connect); }
.approval-panel__btn:hover { opacity: .8; }
.approval-panel__result {
  padding: 12px 18px;
  border-top: 1px solid var(--ec-border);
  display: flex; align-items: center; gap: 10px;
  background: rgba(52,211,153,.05);
}
.approval-panel__result-ico { color: var(--ec-verify); font-size: 1rem; }
.approval-panel__result-text { font-size: .8rem; color: var(--ec-text); }

/* --------------------------------------------------------------------------
   VERIFICACIÓN Y EXPLICABILIDAD
   -------------------------------------------------------------------------- */
.verify-panel {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius-lg);
  overflow: hidden;
  max-width: 520px; margin: 0 auto;
}
.verify-panel__row {
  padding: 13px 18px;
  border-bottom: 1px solid var(--ec-border);
  display: flex; gap: 16px; align-items: flex-start;
}
.verify-panel__row:last-child { border-bottom: none; }
.verify-panel__key {
  font-size: .63rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ec-muted);
  min-width: 90px; flex-shrink: 0; padding-top: 2px;
}
.verify-panel__value { font-size: .82rem; color: var(--ec-text); line-height: 1.45; }
.verify-panel__tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 600;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(52,211,153,.15); color: var(--ec-verify);
  margin-top: 3px;
}

/* --------------------------------------------------------------------------
   OJOS, OÍDOS, VOZ Y MANOS
   -------------------------------------------------------------------------- */
.senses-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin: 32px 0;
}
.sense-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 20px;
  position: relative; overflow: hidden;
}
.sense-card__header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.sense-card__ico {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sense-card--eyes   .sense-card__ico { background: rgba(99,102,241,.2); }
.sense-card--ears   .sense-card__ico { background: rgba(168,85,247,.2); }
.sense-card--voice  .sense-card__ico { background: rgba(232,121,249,.2); }
.sense-card--hands  .sense-card__ico { background: rgba(52,211,153,.15); }
.sense-card__name { font-size: .88rem; font-weight: 700; color: #fff; }
.sense-card__items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
}
.sense-card__items li {
  font-size: .76rem; color: var(--ec-muted); padding-left: 12px; position: relative; line-height: 1.45;
}
.sense-card__items li::before {
  content: '·'; position: absolute; left: 0; color: var(--ec-connect);
}
.sense-card__note {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ec-border);
  font-size: .7rem; color: var(--ec-warn); line-height: 1.45;
}
/* Mini visual de señal en la tarjeta */
.sense-signal {
  position: absolute; right: 12px; top: 12px;
  display: flex; gap: 3px; align-items: flex-end;
}
.sense-signal span {
  width: 3px; border-radius: 2px;
  background: var(--ec-connect); opacity: .4;
  animation: sense-bar var(--ec-pulse-dur) ease-in-out infinite;
}
.sense-signal span:nth-child(1) { height: 8px; animation-delay: 0s; }
.sense-signal span:nth-child(2) { height: 14px; animation-delay: .3s; }
.sense-signal span:nth-child(3) { height: 10px; animation-delay: .6s; }
.sense-signal span:nth-child(4) { height: 18px; animation-delay: .9s; }
@keyframes sense-bar {
  0%,100% { opacity: .25; }
  50% { opacity: .85; }
}
.sense-card--eyes   .sense-signal span { background: var(--ec-connect); }
.sense-card--ears   .sense-signal span { background: var(--ec-accent); }
.sense-card--voice  .sense-signal span { background: var(--ec-magenta); }
.sense-card--hands  .sense-signal span { background: var(--ec-verify); }

/* --------------------------------------------------------------------------
   NODO LOCAL
   -------------------------------------------------------------------------- */
.local-node {
  display: flex; align-items: center; gap: 0;
  justify-content: center; flex-wrap: wrap;
  margin: 32px auto; max-width: 640px;
}
.local-node__box {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 16px 20px;
  text-align: center; min-width: 110px;
}
.local-node__box--elio { border-color: var(--ec-border-bright); background: rgba(124,58,237,.1); }
.local-node__box--node { border-color: rgba(52,211,153,.25); background: rgba(52,211,153,.05); }
.local-node__icon { font-size: .8rem; font-weight: 800; color: var(--ec-bright); margin-bottom: 4px; }
.local-node__box--node .local-node__icon { color: var(--ec-verify); }
.local-node__name { font-size: .8rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.local-node__sub { font-size: .65rem; color: var(--ec-muted); }
.local-node__conn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0 8px;
}
.local-node__conn-line {
  width: 40px; height: 1.5px;
  background: linear-gradient(to right, var(--ec-connect), var(--ec-verify));
  opacity: .5;
}
.local-node__conn-label { font-size: .58rem; color: var(--ec-muted); white-space: nowrap; }
.local-node__resources {
  display: flex; flex-direction: column; gap: 6px;
}
.local-node__resource {
  background: var(--ec-surface-2); border: 1px solid var(--ec-border);
  border-radius: 7px; padding: 7px 10px;
  font-size: .7rem; color: var(--ec-text); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   MINI-FLUJOS DE INDUSTRIA
   -------------------------------------------------------------------------- */
.industries-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px;
  margin: 32px 0;
}
.industry-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 20px;
  transition: border-color .3s;
}
.industry-card:hover { border-color: var(--ec-border-bright); }
.industry-card__header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.industry-card__ico {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  background: rgba(124,58,237,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: var(--ec-bright);
}
.industry-card__name { font-size: .9rem; font-weight: 700; color: #fff; }
.industry-card__problem { font-size: .76rem; color: var(--ec-muted); margin-bottom: 12px; line-height: 1.45; }
.industry-flow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-bottom: 10px;
}
.industry-flow__step {
  font-size: .65rem; font-weight: 600; color: var(--ec-text);
  background: var(--ec-surface-2); border: 1px solid var(--ec-border);
  border-radius: 6px; padding: 4px 8px; white-space: nowrap;
}
.industry-flow__arrow { color: var(--ec-muted); font-size: .75rem; }
.industry-card__condition {
  font-size: .68rem; color: var(--ec-warn); line-height: 1.4;
  border-top: 1px solid var(--ec-border); padding-top: 10px; margin-top: 4px;
}

/* --------------------------------------------------------------------------
   PRINCIPIOS — Grid de tarjetas de principio
   -------------------------------------------------------------------------- */
.principles-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px;
  margin: 32px 0;
}
.principle-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius); padding: 18px;
}
.principle-card__name { font-size: .8rem; font-weight: 700; color: var(--ec-bright); margin-bottom: 6px; }
.principle-card__desc { font-size: .78rem; color: var(--ec-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   CALLOUT DE CATEGORÍA
   -------------------------------------------------------------------------- */
.category-callout {
  background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(168,85,247,.08));
  border: 1px solid var(--ec-border-bright);
  border-radius: var(--ec-radius-lg);
  padding: clamp(24px,4vw,40px);
  text-align: center; margin: 40px 0;
}
.category-callout__eyebrow {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ec-bright); margin-bottom: 10px;
}
.category-callout__title {
  font-size: clamp(1.2rem,3vw,2rem); font-weight: 800; color: #fff;
  margin-bottom: 12px; line-height: 1.2;
}
.category-callout__body {
  font-size: clamp(.82rem,1.2vw,.95rem); color: var(--ec-text);
  max-width: 600px; margin: 0 auto; line-height: 1.65;
}

/* --------------------------------------------------------------------------
   CARACTERÍSTICAS — bloques grandes + panel central
   -------------------------------------------------------------------------- */
.feat-hub {
  display: grid; gap: 24px;
  grid-template-columns: 1fr 1fr;
  margin: 32px 0;
}
.feat-hub__main {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(124,58,237,.14), rgba(80,20,160,.08));
  border: 1px solid var(--ec-border-bright);
  border-radius: var(--ec-radius-lg);
  padding: clamp(24px,3vw,40px);
}
.feat-hub__title { font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.feat-hub__desc { font-size: .85rem; color: var(--ec-text); margin-bottom: 20px; line-height: 1.6; }
.feat-hub__mini { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-hub__chip {
  font-size: .72rem; padding: 5px 12px; border-radius: 99px;
  background: rgba(124,58,237,.18); border: 1px solid rgba(124,58,237,.3); color: var(--ec-bright);
}
.feat-card {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius); padding: 22px;
  transition: border-color .3s, box-shadow .3s;
}
.feat-card:hover { border-color: var(--ec-border-bright); box-shadow: 0 4px 24px rgba(124,58,237,.12); }
.feat-card__ico { margin-bottom: 12px; }
.feat-card__ico svg { width: 28px; height: 28px; stroke: var(--ec-bright); }
.feat-card__name { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.feat-card__desc { font-size: .8rem; color: var(--ec-muted); line-height: 1.55; margin-bottom: 10px; }
.feat-card__condition { font-size: .7rem; color: var(--ec-warn); line-height: 1.4; }

/* --------------------------------------------------------------------------
   CONFIGURADOR / "CREA TU PLAN" — visual resumen en vivo
   -------------------------------------------------------------------------- */
.plan-preview {
  background: var(--ec-surface);
  border: 1px solid var(--ec-border);
  border-radius: var(--ec-radius);
  padding: 18px;
}
.plan-preview__title {
  font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ec-bright); margin-bottom: 14px;
}
.plan-preview__row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--ec-border);
  font-size: .78rem;
}
.plan-preview__row:last-child { border-bottom: none; }
.plan-preview__key { color: var(--ec-muted); min-width: 90px; flex-shrink: 0; }
.plan-preview__val { color: var(--ec-text); flex: 1; }
.plan-preview__val--placeholder { color: var(--ec-border); }

/* --------------------------------------------------------------------------
   DEMO — Flujo de preparación
   -------------------------------------------------------------------------- */
.demo-timeline {
  position: relative;
  padding-left: 24px;
  margin: 24px 0;
}
.demo-timeline::before {
  content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px;
  width: 1.5px; background: linear-gradient(to bottom, var(--ec-core), transparent);
}
.demo-tl-item {
  position: relative; margin-bottom: 18px; padding-left: 20px;
}
.demo-tl-item::before {
  content: ''; position: absolute; left: -22px; top: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ec-core); border: 2px solid var(--ec-surface);
}
.demo-tl-item__title { font-size: .85rem; font-weight: 600; color: #fff; margin-bottom: 3px; }
.demo-tl-item__desc { font-size: .78rem; color: var(--ec-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   CONTACTO — Visual de comunicación discreta
   -------------------------------------------------------------------------- */
.contact-flow {
  display: flex; flex-direction: column; gap: 10px; margin: 20px 0;
}
.contact-flow__step {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 9px;
  background: var(--ec-surface); border: 1px solid var(--ec-border);
  font-size: .8rem; color: var(--ec-text);
}
.contact-flow__ico {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: rgba(124,58,237,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; color: var(--ec-bright); font-weight: 700;
}
.contact-flow__connector {
  margin-left: 15px; height: 12px; width: 1px;
  background: var(--ec-border);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .contrast-split { grid-template-columns: 1fr; }
  .senses-grid { grid-template-columns: 1fr; }
  .feat-hub { grid-template-columns: 1fr; }
  .feat-hub__main { grid-column: 1; }
  .skills-visual { grid-template-columns: 1fr; }
  .skills-visual .skills-arrow { display: none; }
  .eo-hero { max-width: 340px; }
  .eo-node { display: none; }
  .eo-node--tl, .eo-node--tr, .eo-node--l, .eo-node--r { display: flex; }
  .eo-panel { display: none; }
  .ah-wrap { max-width: 360px; }
  .local-node { flex-direction: column; align-items: center; }
  .local-node__conn { flex-direction: row; }
  .local-node__conn-line { width: 1.5px; height: 20px; background: linear-gradient(to bottom, var(--ec-connect), var(--ec-verify)); }
  .aoc-diagram .aoc-layer { flex-direction: column; }
  .opcycle { max-width: 320px; }
  .industries-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .eo-hero__bg,
  .eo-hero__ring, .eo-hero__ring--1, .eo-hero__ring--2,
  .eo-core__pulse,
  .eo-signal, .eo-signal--1, .eo-signal--2, .eo-signal--3,
  .eo-signal--4, .eo-signal--5, .eo-signal--6,
  .sense-signal span,
  .opcycle__segment { animation: none !important; }

  .eo-core { box-shadow: 0 0 0 6px rgba(124,58,237,.2); }
  .opcycle__segment { opacity: .4 !important; }
  .opcycle__segment.is-active { opacity: 1 !important; }
}