/* =========================================================================
   F4st.ai — Visuales animados (capa sobre styles.css)
   Archivo separado a propósito: NO está bajo el cache `immutable` de
   styles.css/script.js, así los visitantes recurrentes lo reciben fresco.
   Hereda los tokens de :root definidos en styles.css.
   Piezas: (1) demo cerebro+chat  (2) flujo CONTPAQi→nube  (3) escudo soberanía
           (4) contadores del hero
   ========================================================================= */

/* ---------- Marco "app" reutilizable ---------- */
.vis-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(620px 320px at 78% -10%, rgba(255,140,0,.08), transparent 60%),
    linear-gradient(180deg, #141414, #0E0E0E);
  box-shadow: 0 30px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
}
.vis-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.015);
}
.vis-dots { display: flex; gap: .4rem; }
.vis-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.vis-dots i:first-child { background: rgba(230,57,70,.55); }
.vis-dots i:nth-child(2) { background: rgba(255,140,0,.55); }
.vis-dots i:nth-child(3) { background: rgba(255,179,71,.5); }
.vis-bar-title {
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--t-mute); margin-left: .2rem;
}
.vis-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber);
}
.vis-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(230,57,70,.5); animation: pulse 2.4s infinite;
}

/* =========================================================================
   1) DEMO — cerebro (grafo) + chat scriptado
   ========================================================================= */
.demo { padding-top: 40px; padding-bottom: 40px; }
.demo .sec-head { margin-bottom: 1.6rem; }
.demo-stage {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: 0;
}
.demo-chat, .demo-brain { min-width: 0; }

/* --- panel chat --- */
.demo-chat {
  padding: 1.4rem 1.4rem 1.5rem;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: .9rem;
}
.dc-stream { display: flex; flex-direction: column; gap: .85rem; min-height: 296px; }
.dc-row { display: flex; gap: .6rem; max-width: 100%; }
.dc-row.user { justify-content: flex-end; }
.dc-ava {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display); font-weight: 800; font-size: .82rem; color: #fff;
  background: var(--grad-principal);
}
.dc-row.user .dc-ava { order: 2; background: rgba(255,255,255,.08); color: var(--t-soft); }
.bubble {
  border-radius: 14px; padding: .7rem .9rem; font-size: .92rem; line-height: 1.5;
  max-width: 82%; position: relative;
}
.bubble.q {
  background: rgba(255,140,0,.10); border: 1px solid rgba(255,140,0,.24);
  color: var(--t-bright); border-bottom-right-radius: 4px;
}
.bubble.a {
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  color: var(--t-bright); border-bottom-left-radius: 4px;
}
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px;
  background: var(--orange); vertical-align: -2px; animation: caretBlink 1s step-end infinite; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* puntitos "pensando" */
.thinking { display: inline-flex; gap: 4px; align-items: center; height: 1em; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--t-mute); animation: thinkBlink 1.2s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .18s; }
.thinking i:nth-child(3) { animation-delay: .36s; }
@keyframes thinkBlink { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* tarjeta resultado (mini-dashboard vivo) */
.res {
  margin-top: .7rem; border: 1px solid var(--line-warm); border-radius: 12px;
  background: rgba(255,140,0,.04); padding: .8rem .9rem;
  opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
}
.res.show { opacity: 1; transform: none; }
.res:empty { display: none; } /* sin contenido no reserva alto en la burbuja */
.res-title {
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t-mute); margin-bottom: .6rem; display: flex; align-items: center; gap: .4rem;
}
.res-title::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--grad-principal); }
.res-big { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 1.7rem; color: var(--orange); display: flex; align-items: baseline; gap: .6rem; }
.res-big em { font-style: normal; font-family: var(--f-mono); font-size: .72rem; color: var(--t-mute); letter-spacing: .04em; }
.res-rows { display: grid; gap: .38rem; margin-top: .2rem; }
.rrow { display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  font-size: .85rem; color: var(--t-soft); }
.rrow b { font-family: var(--f-mono); color: var(--t-bright); font-weight: 700; }
.rrow.accent { padding-top: .42rem; margin-top: .12rem; border-top: 1px solid var(--line); }
.rrow.accent b { color: var(--orange); }
.rrow.muted, .rrow.muted b { color: var(--t-mute); }
.res-bar { position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); margin-top: .7rem; overflow: hidden; }
.res-bar .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px;
  background: var(--grad-principal); transition: width 1s cubic-bezier(.2,.7,.2,1); }
.res.show .res-bar .fill { width: var(--w, 0%); }
.res-bar .target { position: absolute; top: -2px; bottom: -2px; width: 2px; left: var(--t, 100%); background: var(--amber); opacity: .9; }
.res-foot { font-family: var(--f-mono); font-size: .68rem; color: var(--t-mute); margin-top: .5rem; letter-spacing: .03em; }
.res-bars { display: grid; gap: .5rem; margin-top: .6rem; }
.bbar { display: grid; grid-template-columns: 64px 1fr 54px; align-items: center; gap: .55rem;
  font-family: var(--f-mono); font-size: .72rem; color: var(--t-mute); }
.bbar i { display: block; height: 7px; border-radius: 4px; background: var(--grad-principal); width: 0;
  transition: width .9s cubic-bezier(.2,.7,.2,1); }
.res.show .bbar i { width: var(--w, 0%); }
.bbar b { color: var(--t-bright); text-align: right; font-weight: 700; }

.demo-hint { font-family: var(--f-mono); font-size: .68rem; color: var(--t-faint); letter-spacing: .03em; }
.demo-hint b { color: var(--t-mute); font-weight: 400; }

/* --- panel cerebro (grafo) --- */
.demo-brain { position: relative; padding: .8rem; display: flex; flex-direction: column; }
.brain-cap {
  position: absolute; top: 1rem; left: 1.1rem; z-index: 3;
  font-family: var(--f-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mute);
}
.brain-svg { width: 100%; height: auto; display: block; flex: 1; }

/* aristas */
.edge { stroke: rgba(255,255,255,.07); stroke-width: 1; transition: stroke .4s ease; }
.edge.on { stroke: rgba(255,140,0,.5); stroke-width: 1.4; }
.edge.flow { stroke-dasharray: 3 6; animation: edgeFlow 1s linear infinite; }
@keyframes edgeFlow { to { stroke-dashoffset: -18; } }

/* nodos */
.node { cursor: default; }
.node .halo { fill: var(--orange); opacity: 0; transition: opacity .45s ease; transform-box: fill-box; transform-origin: center; }
.node.on .halo { opacity: .22; animation: nodePulse 2.4s ease-in-out infinite; }
@keyframes nodePulse { 0%,100% { opacity: .14; } 50% { opacity: .32; } }
.node .dot {
  fill: #1b1b1b; stroke: rgba(255,255,255,.16); stroke-width: 1.3;
  transition: fill .4s ease, stroke .4s ease;
}
.node.on .dot { fill: #2a1a08; stroke: var(--orange); }
.node.core .dot { fill: #241204; stroke: rgba(255,140,0,.55); stroke-width: 1.6; }
.node.core.on .dot { fill: #3a1c06; stroke: var(--amber); }
.node .glyph { fill: var(--t-faint); transition: fill .4s ease; }
.node.on .glyph { fill: var(--amber); }
.node.core .glyph { fill: var(--orange); }
.node.core .lbl { fill: var(--amber); font-weight: 700; font-size: 10px; }
.hub-ic { fill: none; stroke: var(--orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; }
.node.core.on .hub-ic { stroke: var(--amber); }
.node .lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .04em; fill: var(--t-faint);
  text-anchor: middle; transition: fill .4s ease; pointer-events: none; text-transform: uppercase;
}
.node.on .lbl { fill: var(--t-soft); }
.node:hover .dot { stroke: var(--white); }
.node:hover .lbl { fill: var(--white); }

/* tooltip de nodo */
.brain-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0;
  transform: translate(-50%, -120%); transition: opacity .15s ease;
  background: rgba(8,8,8,.96); border: 1px solid var(--line-warm); border-radius: 8px;
  padding: .4rem .6rem; max-width: 220px;
  font-family: var(--f-mono); font-size: .68rem; line-height: 1.4; color: var(--t-soft);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.brain-tip.show { opacity: 1; }
.brain-tip b { color: var(--orange); font-weight: 700; }

/* =========================================================================
   2) FLOWMAP — CONTPAQi → nube soberana → salidas
   ========================================================================= */
.flowmap { margin: 1.6rem 0 .4rem; }
.flow-svg { width: 100%; height: auto; display: block; }
.flow-node rect, .flow-node .chip { transition: stroke .3s ease, fill .3s ease; }
.flow-label { font-family: var(--f-mono); font-size: 10px; letter-spacing: .03em; fill: var(--t-soft); }
.flow-sub { font-family: var(--f-mono); font-size: 8px; letter-spacing: .04em; fill: var(--t-faint); text-transform: uppercase; }
.flow-title { font-family: var(--f-display); font-weight: 700; font-size: 12px; fill: var(--t-bright); }
.flow-wire { stroke: rgba(255,140,0,.28); stroke-width: 1.4; fill: none; }
.flow-pkt { fill: var(--amber); }
.flow-ic { stroke: var(--orange); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.flow-shield { fill: rgba(255,140,0,.06); stroke: rgba(255,140,0,.45); stroke-width: 1.4; }
.flow-readonly { font-family: var(--f-mono); font-size: 8px; letter-spacing: .08em; fill: var(--t-mute); text-transform: uppercase; }
.flow-cap {
  margin-top: .7rem; font-family: var(--f-mono); font-size: .72rem; color: var(--t-mute);
  text-align: center; letter-spacing: .02em;
}
.flow-cap b { color: var(--orange); font-weight: 400; }

/* =========================================================================
   3) SOBERANÍA — escudo + nube que retiene los datos
   ========================================================================= */
.shieldviz { margin: .4rem auto 1.8rem; max-width: 520px; }
.shield-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sh-cloud { fill: rgba(255,255,255,.02); stroke: var(--line-warm); stroke-width: 1.4; }
.sh-ring { fill: none; stroke: rgba(255,140,0,.4); stroke-width: 1.5; stroke-dasharray: 5 7; animation: shRing 26s linear infinite; }
@keyframes shRing { to { stroke-dashoffset: -360; } }
.sh-shield { fill: rgba(255,140,0,.05); stroke: var(--orange); stroke-width: 1.6; }
.sh-lock { stroke: var(--amber); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.sh-data { fill: var(--orange); }
.sh-label { font-family: var(--f-mono); font-size: 9px; letter-spacing: .05em; fill: var(--t-mute); text-anchor: middle; text-transform: uppercase; }
.sh-block { font-family: var(--f-mono); font-size: 8px; letter-spacing: .06em; fill: var(--red); text-anchor: middle; opacity: 0; }
.sh-ripple { fill: none; stroke: var(--red); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.sh-data { transform-box: fill-box; }

.driftA { animation: shDriftA 7s ease-in-out infinite; }
.driftB { animation: shDriftB 8.5s ease-in-out infinite; }
.driftC { animation: shDriftC 6.2s ease-in-out infinite; }
@keyframes shDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(7px,-8px); } }
@keyframes shDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-8px,6px); } }
@keyframes shDriftC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(5px,7px); } }

/* intentos de fuga: el dato corre al borde y rebota */
.probeA { animation: shProbeA 4.2s ease-in-out infinite; }
.probeB { animation: shProbeB 4.2s ease-in-out 2.1s infinite; }
@keyframes shProbeA {
  0% { transform: translate(0,0); opacity: .9; }
  26% { transform: translate(-114px,-30px); opacity: 1; }
  33% { transform: translate(-104px,-25px); opacity: 1; }
  60% { transform: translate(0,0); opacity: .9; }
  100% { transform: translate(0,0); opacity: .9; }
}
@keyframes shProbeB {
  0% { transform: translate(0,0); opacity: .9; }
  26% { transform: translate(120px,30px); opacity: 1; }
  33% { transform: translate(110px,25px); opacity: 1; }
  60% { transform: translate(0,0); opacity: .9; }
  100% { transform: translate(0,0); opacity: .9; }
}
.rippleA { animation: shRipple 4.2s ease-out infinite; }
.rippleB { animation: shRipple 4.2s ease-out 2.1s infinite; }
@keyframes shRipple {
  0%,22% { transform: scale(.25); opacity: 0; }
  29% { transform: scale(.3); opacity: .85; }
  46% { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(.25); opacity: 0; }
}
.blockA { animation: shBlock 4.2s ease-out infinite; }
.blockB { animation: shBlock 4.2s ease-out 2.1s infinite; }
@keyframes shBlock {
  0%,24% { opacity: 0; }
  31% { opacity: 1; }
  47% { opacity: 0; }
  100% { opacity: 0; }
}

/* =========================================================================
   4) Contadores hero — sin estilo extra (JS anima el texto existente)
   ========================================================================= */
.counting { font-variant-numeric: tabular-nums; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 860px) {
  .demo-stage { grid-template-columns: 1fr; }
  .demo-chat { border-right: none; border-bottom: 1px solid var(--line); }
  .dc-stream { min-height: 0; }
  .demo-brain { min-height: 340px; }
}

/* =========================================================================
   Reduced motion — todo en estado final estático, sin loops
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .vis-live::before,
  .edge.flow,
  .node.on .halo,
  .sh-ring,
  .sh-data, .probeA, .probeB,
  .rippleA, .rippleB,
  .blockA, .blockB,
  .thinking i,
  .caret { animation: none !important; }
  .probeA, .probeB { transform: none !important; }
  .res { opacity: 1 !important; transform: none !important; }
  .res-bar .fill, .bbar i { transition: none !important; }
}