/* ============================================================
   Real Flow AI · capa "Flujo" de PRODUCCIÓN (2026-05-30)
   ADDITIVA sobre _brand/*.css + _page-styles.css (se enlaza DESPUÉS).
   No recolorea el sitio (ya es navy con la paleta de marca): agrega la firma
   Flujo — fondo de flujo, gradiente firma, terminal viva, hover de cards,
   reveals al scroll, contadores. Los elementos #rfa-* los inyecta flujo.js.
   ============================================================ */
:root{
  --rfa-grad:linear-gradient(100deg,#5b7cff 0%,#7B61FF 45%,#4DB8C7 100%);
  --rfa-grad-orange:linear-gradient(120deg,#F0A500 0%,#E85D04 60%,#E85D04 100%);
}

/* fondo de flujo + glows + scrim (detrás del contenido) */
#rfa-flow{position:fixed;inset:0;z-index:0;opacity:.5;pointer-events:none}
.rfa-glow{position:fixed;z-index:0;border-radius:50%;filter:blur(130px);opacity:.13;pointer-events:none}
.rfa-glow.p{width:520px;height:520px;background:var(--purple);top:6%;left:30%}
.rfa-glow.c{width:460px;height:460px;background:var(--cyan-bright);top:55%;right:-160px}
body.rfa-fx .rfa-glow.p{animation:rfaDrift1 20s ease-in-out infinite}
body.rfa-fx .rfa-glow.c{animation:rfaDrift2 24s ease-in-out infinite}
@keyframes rfaDrift1{50%{transform:translate(80px,70px)}}
@keyframes rfaDrift2{50%{transform:translate(-70px,50px)}}
/* scrim UNIFORME (antes degradaba a más oscuro abajo → parecía fondo sólido) */
#rfa-scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(10,22,40,.42)}

/* sube el contenido real por encima del flujo */
main,.site-footer{position:relative;z-index:2}
/* secciones SIEMPRE transparentes → el fondo de flujo se ve parejo (override de bandas
   inline `background: var(--bg-subtle/panel)` en producto/catálogo · las cards mantienen su panel) */
.section,.section--tight{background:transparent!important}
/* header FIJO (sticky · se mantiene al hacer scroll) · sin backdrop-filter (rompe el clip-text
   del gradiente del logo) · fondo navy casi sólido. NO ponerle position:relative (mataba el sticky). */
.site-header{position:sticky;top:0;z-index:100;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,22,40,.92)}

/* gradiente firma · helper que flujo.js aplica a la palabra "Flow" y al "se implementa" */
.rfa-grad{background:var(--rfa-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block}
/* homologación 2026-06-05 (decisión founder): los <em> de títulos SIN clase (antes ámbar
   --color-accent, se veía opaco) → gradiente firma. Los em.fg-orange (naranja CTA) NO se tocan. */
h1 em:not([class]),h2 em:not([class]),h3 em:not([class]),h4 em:not([class]){
  background:var(--rfa-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;display:inline-block}
/* el mark "R" → gradiente naranja · caja IDÉNTICA en header y footer (homologado) */
.brand-mark{display:inline-flex!important;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  font-family:var(--font-mono);font-weight:700;font-size:var(--fs-base);
  background:var(--rfa-grad-orange)!important;color:#fff!important}

/* terminal viva: borde con gradiente firma + cursor */
.terminal{position:relative}
.terminal::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--rfa-grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;pointer-events:none}
.rfa-cursor{display:inline-block;width:7px;height:13px;background:var(--cyan-bright);vertical-align:-2px;margin-left:2px}
body.rfa-fx .rfa-cursor{animation:rfaBlink 1s steps(1) infinite}
@keyframes rfaBlink{50%{opacity:0}}

/* KPIs con gradiente firma */
.kpi__value{background:var(--rfa-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* cards (catálogo .hub-card, canales de contacto .channel-card): hover = borde que brilla + lift + línea de flujo */
.hub-card,.channel-card{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.hub-card:hover,.channel-card:hover{transform:translateY(-4px);border-color:var(--cyan-bright)!important;
  box-shadow:0 0 0 1px var(--cyan-bright),0 0 22px rgba(77,184,199,.40),0 16px 46px rgba(123,97,255,.28)}
/* cards "extra" (P06-P14) → mismo panel que las demás, para que floten igual */
.hub-card--extra{background:var(--bg-panel)!important;border-color:var(--border)!important}
.rfa-stream{position:absolute;top:0;left:-40%;width:40%;height:2px;background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);opacity:0;pointer-events:none;z-index:1}
body.rfa-fx .hub-card:hover .rfa-stream,body.rfa-fx .channel-card:hover .rfa-stream{opacity:1;animation:rfaFlow 1.1s linear infinite}
@keyframes rfaFlow{to{left:100%}}

/* reveal al scroll (solo con efectos activos) */
body.rfa-fx .rfa-reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
body.rfa-fx .rfa-reveal.rfa-in{opacity:1;transform:none}

/* ============================================================
   NAV MÓVIL · hamburguesa (≤900px) · flujo.js inyecta el botón .rfa-burger
   En base, components.css esconde .nav-links en ≤900px SIN reemplazo y deja los
   .nav-cta inline → desbordan (CTA cortado + scroll horizontal que "mueve" el
   header sticky). Aquí: barra compacta (marca + hamburguesa) y un desplegable con
   los enlaces + CTAs. Sticky ya viene de arriba (.site-header position:sticky).
   ============================================================ */
.rfa-burger{display:none}
@media (max-width:900px){
  /* la barra crece hacia abajo cuando se abre (no recorta el desplegable) */
  .site-header .nav{flex-wrap:wrap;height:auto;min-height:64px;row-gap:6px;align-items:center}
  .site-header .brand{order:0}
  .rfa-burger{order:1;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;background:transparent;border:1px solid var(--border);border-radius:8px;
    color:var(--text);cursor:pointer;flex-shrink:0;padding:0}
  .rfa-burger span,.rfa-burger span::before,.rfa-burger span::after{display:block;width:18px;height:2px;
    background:currentColor;border-radius:2px;transition:transform .2s,top .2s,background .2s}
  .rfa-burger span{position:relative}
  .rfa-burger span::before,.rfa-burger span::after{content:"";position:absolute;left:0}
  .rfa-burger span::before{top:-6px}
  .rfa-burger span::after{top:6px}
  /* enlaces + CTAs → fila completa, ocultos hasta abrir */
  .site-header .nav-links,.site-header .nav-cta{flex-basis:100%;order:5;display:none}
  .site-header .nav-links{flex-direction:column;gap:0}
  .site-header.rfa-nav-open .nav-links{display:flex!important}
  .site-header.rfa-nav-open .nav-cta{display:flex;flex-direction:column;gap:10px;padding:4px 0 10px}
  .site-header .nav-links a{display:block;padding:12px 2px;font-size:var(--fs-base);
    border-bottom:1px solid var(--border)}
  .site-header .nav-cta .btn{width:100%;justify-content:center;text-align:center}
  /* hamburguesa → X al abrir */
  .site-header.rfa-nav-open .rfa-burger span{background:transparent}
  .site-header.rfa-nav-open .rfa-burger span::before{top:0;transform:rotate(45deg)}
  .site-header.rfa-nav-open .rfa-burger span::after{top:0;transform:rotate(-45deg)}
}

/* control de efectos (preview) */
#rfa-fxbtn{position:fixed;top:11px;right:14px;z-index:300;font:12.5px system-ui,sans-serif;color:#EAF1FA;
  background:rgba(123,97,255,.18);border:1px solid rgba(123,97,255,.45);padding:7px 12px;border-radius:8px;cursor:pointer}
#rfa-note{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);z-index:300;font:12px system-ui,sans-serif;
  color:#AFC1DA;background:rgba(8,16,30,.92);border:1px solid #1F2D3D;padding:6px 13px;border-radius:8px;max-width:92vw;text-align:center}