/* ── Tema rapyd.net-style — identidad única de TODO el sitio ─────────
 * Nació como el rediseño exclusivo de las 2 páginas de agentes de IA
 * (aiAgentsPath, healthAgentPath), pero por pedido explícito del
 * propietario (le gustó el estilo) ahora se carga en TODAS las páginas
 * (ver templates/layout.js — ya no depende de `theme==='agents'`, `body`
 * siempre lleva `class="theme-agents"`): fondo oscuro, tarjetas grandes
 * muy redondeadas, botones tipo píldora, glow neón y un menú con
 * mega-panel. El segundo color de acento (junto al verde) es un FUCSIA
 * neón combinado con tonos blancos para el texto — es el detalle que más
 * le gustó al propietario del estilo rapyd.net original y que se nota en
 * botones, badges, blobs del hero y en el propio menú superior.
 *
 * Estrategia: public/styles.css define casi todos sus componentes con los
 * custom properties de :root (línea 11: --bg-canvas, --text-primary, etc.),
 * y esos valores YA son oscuros con texto claro (mismo lienzo en todo el
 * sitio, de antes de este tema). Por eso este archivo no necesita
 * reescribir --bg-canvas, --text-primary/secondary/muted ni --brand-cobalt/
 * copper — los hereda tal cual de
 * :root y así el header, el logo (logo-icon-reversed.png, pensado para
 * fondo oscuro) y el resto de componentes (ya existentes en cada página:
 * .service-card, .button-primary/secondary, .badge-available, etc.) quedan
 * consistentes automáticamente en todo el sitio sin duplicar reglas. Lo
 * que sigue abajo son solo los puntos con identidad propia: los tokens
 * --neon-* (verde + fucsia), forma píldora/esquinas muy redondeadas,
 * mega-menú, blobs del hero y componentes exclusivos de las páginas de
 * agentes (panel "terminal", kv-badge, flow-node — inertes en el resto del
 * sitio porque ese markup no existe ahí). Todo selector de este archivo
 * empieza en `body.theme-agents`, que ahora está siempre presente — pero
 * se deja el selector explícito por si alguna vez vuelve a haber más de
 * un tema.
 */

body.theme-agents{
  /* Radios/sombra propios del look "producto SaaS" tipo rapyd — el resto
     de tokens (--bg-*, --text-*, --border-*, --brand-*) se heredan de
     :root en styles.css sin cambios: ya son oscuros. */
  --radius:22px;
  --shadow:0 20px 50px rgba(2,6,12,.55);
  /* Acentos neón reales (rapyd.net-style) — sobre el fondo oscuro heredado
     funcionan directamente como relleno sólido O como color de texto/ícono
     (a diferencia de un fondo claro, aquí sí hay contraste de sobra).
     --neon-ink es el texto oscuro que va ENCIMA de un relleno neón sólido
     (botones, badges) — nunca se usa como color de texto sobre el fondo. */
  --neon-green:#39FF7A;
  --neon-green-deep:#1FCE63;
  --neon-fuchsia:#FF2FA6;
  --neon-fuchsia-deep:#E0129A;
  --neon-ink:#0B0714;
}

/* ── Tipografía: mismo Inter del resto del sitio, un poco más apretada
   y con más peso en titulares — look "producto SaaS" en vez de "manual
   técnico". No se agrega ninguna fuente nueva (evita tocar la CSP). ── */
body.theme-agents h1{letter-spacing:-.055em;font-weight:850}
body.theme-agents h2,body.theme-agents h3{letter-spacing:-.03em}
body.theme-agents .section-title{font-weight:850}

/* ── Header: mismo fondo oscuro translúcido que el resto del sitio (se
   hereda de .site-header en styles.css) — NUNCA blanco: el logo es la
   versión clara (logo-icon-reversed.png) pensada para fondo oscuro y se
   pierde por completo sobre blanco. El CTA del navbar usa el fucsia neón,
   que es el segundo color de acento de todo el tema. ── */
body.theme-agents .main-nav .nav-cta{background:var(--neon-fuchsia);color:var(--neon-ink);border-color:var(--neon-fuchsia);border-radius:999px;padding:9px 18px;box-shadow:0 0 18px rgba(255,47,166,.45)}
body.theme-agents .main-nav .nav-cta:hover{background:var(--neon-fuchsia-deep);border-color:var(--neon-fuchsia-deep)}

/* ── Mega-menú "Agentes de IA" (templates/partials/header.js) ──────── */
body.theme-agents .agents-mega-nav{position:relative}
body.theme-agents .agents-mega-trigger{display:inline-flex;align-items:center;gap:6px;background:none;border:none;font:inherit;font-weight:650;font-size:.92rem;color:var(--text-secondary);cursor:pointer;padding:0}
body.theme-agents .agents-mega-trigger:hover,
body.theme-agents .agents-mega-trigger[aria-expanded="true"]{color:var(--neon-fuchsia)}
body.theme-agents .agents-mega-chevron{transition:transform .18s ease}
body.theme-agents .agents-mega-trigger[aria-expanded="true"] .agents-mega-chevron{transform:rotate(180deg)}
/* Panel: sigue controlado por el atributo [hidden] (display:none real,
   fuera del árbol de accesibilidad cuando está cerrado) pero la apertura
   y el cierre ya no son un salto instantáneo — agents-nav.js quita/pone
   [hidden] Y alterna la clase .is-open un frame después, así el navegador
   sí anima opacity/transform. En mobile (position:static, ver media query
   abajo) el mismo fade sirve para el desplegado dentro del hamburguesa. */
body.theme-agents .agents-mega-panel{position:absolute;top:calc(100% + 20px);left:50%;transform:translateX(-50%) translateY(-8px);min-width:480px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.55);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:6px;z-index:80;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
body.theme-agents .agents-mega-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
body.theme-agents .agents-mega-panel[hidden]{display:none}
body.theme-agents .agents-mega-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:12px;text-decoration:none;color:var(--text-primary);transition:background .15s ease}
body.theme-agents .agents-mega-item:hover{background:var(--bg-section)}
body.theme-agents .agents-mega-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,47,166,.16);color:var(--neon-fuchsia);flex:none}
body.theme-agents .agents-mega-copy strong{display:block;font-size:.92rem;margin-bottom:4px;color:var(--text-primary)}
body.theme-agents .agents-mega-copy small{display:block;color:var(--text-secondary);font-size:.8rem;line-height:1.4}

/* ── Botones: forma píldora + acentos neón. .button-primary usa el fucsia
   (segundo color de marca del tema); .button-agent sigue en verde (estado
   "disponible"/agente). .button-secondary y .button-outline-dark ya no se
   sobre-escriben: heredan el estilo oscuro de styles.css tal cual. ── */
body.theme-agents .button{border-radius:999px;font-weight:800}
body.theme-agents .button-primary{background:var(--neon-fuchsia);color:var(--neon-ink);box-shadow:0 0 26px rgba(255,47,166,.5),0 12px 28px rgba(0,0,0,.35)}
body.theme-agents .button-primary:hover{background:var(--neon-fuchsia-deep)}
body.theme-agents .button-agent,
body.theme-agents .service-card a.button-agent{background:var(--neon-green);color:var(--neon-ink);box-shadow:0 0 26px rgba(57,255,122,.5),0 12px 28px rgba(0,0,0,.35)}
body.theme-agents .button-agent:hover{background:var(--neon-green-deep)}
body.theme-agents .button-agent-outline,
body.theme-agents .service-card a.button-agent-outline{background:transparent;color:var(--brand-copper-hover);border-color:var(--brand-copper)}
body.theme-agents .button-agent-outline:hover{background:rgba(233,145,82,.12)}

/* ── Hero: blobs de color difuminados detrás del contenido (firma visual
   de las landings tipo rapyd.net) — sobre fondo oscuro se mezclan con
   mix-blend-mode:screen para que se vean como un glow de neón real (no
   como una mancha pastel, que es lo que pasaba sobre blanco). Decorativos,
   aria-hidden vía pointer-events:none/z-index, nunca interfieren con el
   foco/tab order. ── */
body.theme-agents .hero{position:relative;overflow:hidden}
body.theme-agents .hero:before,
body.theme-agents .hero:after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;z-index:0;pointer-events:none;mix-blend-mode:screen}
body.theme-agents .hero:before{width:440px;height:440px;background:var(--neon-fuchsia);top:-180px;right:-140px}
body.theme-agents .hero:after{width:380px;height:380px;background:var(--neon-green);bottom:-200px;left:-120px}
body.theme-agents .hero .container{position:relative;z-index:1}
body.theme-agents .hero-badges .badge{backdrop-filter:blur(4px)}

/* ── Badges: rellenos sólidos y vívidos ("sticker") — más acorde al look
   rapyd.net y donde más se nota el neón. ── */
body.theme-agents .badge-available{background:var(--neon-green);color:var(--neon-ink)}
body.theme-agents .badge-engine{background:var(--neon-fuchsia);color:var(--neon-ink)}

/* ── Tarjeta destacada del agente y stat-banner: glow neón ── */
body.theme-agents .section-copper .service-card.featured{border-color:var(--neon-green-deep);box-shadow:0 16px 38px rgba(57,255,122,.28)}
body.theme-agents .section-copper .flow-icon{background:var(--neon-green);color:var(--neon-ink)}
body.theme-agents .stat-banner{background:rgba(57,255,122,.14);border-color:rgba(31,206,99,.4)}
body.theme-agents .stat-banner-label,
body.theme-agents .stat-banner-value{color:var(--brand-copper-hover)}
body.theme-agents .kv-badge{background:rgba(255,47,166,.16);color:var(--neon-fuchsia)}

/* ── Tarjetas: esquinas más redondeadas y sombra más profunda (look
   "rapyd" sobre fondo oscuro, en vez de la sombra suave pensada para
   blanco) ── */
body.theme-agents .service-card{border-radius:20px}
body.theme-agents .service-card:hover{box-shadow:0 22px 50px rgba(0,0,0,.45)}
body.theme-agents .buy-banner-card{border-radius:28px}
body.theme-agents .buy-banner-action{border-radius:18px}
body.theme-agents .ai-agents-roadmap{border-radius:28px}
body.theme-agents .flow-node{box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* ── Panel "terminal": ahora que el lienzo general ya es oscuro, se deja
   incluso más profundo que el resto de la página (negro casi puro) para
   que siga leyéndose como "consola de producto" y no se funda con el
   fondo — terminal-title/terminal-line/terminal-progress heredan estos
   tokens re-escopeados sin tocar esas reglas una por una. El acento vivo
   de la consola es el mismo fucsia del resto del tema (antes era un cian
   suelto que no combinaba con el segundo color de marca). ── */
body.theme-agents .terminal-panel{
  --bg-canvas:#05070C;
  --border-subtle:#1A1230;
  --brand-cobalt-hover:var(--neon-fuchsia);
  --state-success:#39FF7A;
  background:var(--bg-canvas);
  border-color:var(--border-subtle);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}

/* ── Mobile: el mega-panel deja de flotar y se vuelve una lista dentro
   del propio menú hamburguesa (mismo contenedor .main-nav.open); el fade
   de apertura/cierre (.is-open) sigue funcionando igual, solo cambia la
   posición. ── */
@media(max-width:680px){
  body.theme-agents .agents-mega-panel{position:static;transform:translateY(-4px);min-width:auto;grid-template-columns:1fr;box-shadow:none;border:none;padding:4px 0 8px;margin-top:4px}
  body.theme-agents .agents-mega-panel.is-open{transform:translateY(0)}
  body.theme-agents .agents-mega-trigger{width:100%;justify-content:space-between;padding:7px 0}
  body.theme-agents .hero:before,body.theme-agents .hero:after{opacity:.28}
}