/* ============================================================
   Flowiax · capa de diseño común v34 (29/09/2026)
   Se carga en TODAS las páginas después de su propio <style>.
   Colores y tipografía: los de la marca, tal cual.
   - Botones en píldora con destello de luz
   - Tarjetas con luz que recorre el borde
   - Robot de Sara renovado (misma conexión real con n8n)
   - Menú móvil en todas las páginas
   ============================================================ */
:root{
  --fx-bg:#080c10; --fx-bg2:#0d1117; --fx-bg3:#121820; --fx-card:#0f151c;
  --fx-accent:#03EBF7; --fx-accent2:#0A8FA0; --fx-text:#e8e8f0; --fx-muted:#7878a0;
  --fx-border:rgba(3,235,247,.12); --fx-radius:16px;
  --fx-ease:cubic-bezier(.16,1,.3,1);
}
@property --fxb{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fxBeam{to{--fxb:360deg}}
@keyframes fxSweep{0%,60%{background-position:160% 0,0 0}100%{background-position:-60% 0,0 0}}

/* ---------- Botones principales: píldora cian ---------- */
.btn-primary,.btn-cta,.btn-nav,.pkg-btn-featured,.magnet-btn,.btn-wa,.fx-btn{
  border-radius:999px!important;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat,var(--fx-accent)!important;
  background-size:250% 100%,100% 100%!important;
  color:var(--fx-bg)!important;
  border:0!important;
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:600!important;
  letter-spacing:-.005em;
  box-shadow:0 12px 24px -14px rgba(0,0,0,.9)!important;
  animation:fxSweep 5s var(--fx-ease) infinite;
  transition:transform .35s var(--fx-ease),box-shadow .35s var(--fx-ease)!important;
  text-decoration:none;
}
.btn-primary:hover,.btn-cta:hover,.btn-nav:hover,.pkg-btn-featured:hover,.magnet-btn:hover,.btn-wa:hover,.fx-btn:hover{transform:translateY(-2px)!important;box-shadow:0 18px 28px -16px rgba(0,0,0,.95)!important}
.btn-primary:active,.btn-cta:active,.fx-btn:active{transform:scale(.98)!important}
.btn-primary::before,.btn-primary::after,.btn-cta::before,.btn-cta::after,.btn-nav::before,.btn-nav::after{display:none!important}

/* Botón principal grande con la flecha en círculo (portada) */
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:60px;padding:0 8px 0 28px!important;font-size:17px}
.fx-btn .fx-arr{width:44px;height:44px;border-radius:50%;background:var(--fx-bg);color:var(--fx-accent);display:grid;place-items:center;flex-shrink:0;transition:transform .45s var(--fx-ease)}
.fx-btn:hover .fx-arr{transform:rotate(-45deg)}

/* ---------- Botones secundarios: píldora con luz en el borde ---------- */
.btn-secondary,.pkg-btn-default,.fx-ghost{
  border-radius:999px!important;
  border:1.5px solid transparent!important;
  background:linear-gradient(var(--fx-bg2),var(--fx-bg2)) padding-box,conic-gradient(from var(--fxb),rgba(3,235,247,.2) 0 66%,var(--fx-accent) 82%,rgba(3,235,247,.2) 96%) border-box!important;
  color:var(--fx-text)!important;
  font-family:'Inter',system-ui,sans-serif!important;
  font-weight:600!important;
  animation:fxBeam 4.5s linear infinite;
  transition:color .3s,transform .35s var(--fx-ease)!important;
  text-decoration:none;
}
.btn-secondary:hover,.pkg-btn-default:hover,.fx-ghost:hover{color:var(--fx-accent)!important;transform:translateY(-2px)}
.fx-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;max-width:100%;height:60px;padding:0 22px;font-size:15px}
.fx-ghost strong{font-variant-numeric:tabular-nums}

/* ---------- Tarjetas con luz en el borde ---------- */
.problem-card,.pkg-card,.sector-card,.faq-item,.sis-tile,.bz-card,.lz-card,.svc-card,.prob-card,.bh-card,.form-card,.cta-box,.fx-lit{
  border:1px solid transparent!important;
  border-radius:var(--fx-radius)!important;
  background:linear-gradient(var(--fx-card),var(--fx-card)) padding-box,conic-gradient(from var(--fxb),rgba(3,235,247,.12) 0 70%,rgba(3,235,247,.85) 83%,rgba(3,235,247,.12) 96%) border-box!important;
}
.fx-on{animation:fxBeam 8s linear infinite}
.pkg-card.featured{background:linear-gradient(var(--fx-bg3),var(--fx-bg3)) padding-box,conic-gradient(from var(--fxb),rgba(3,235,247,.3) 0 60%,var(--fx-accent) 80%,rgba(3,235,247,.3) 96%) border-box!important}
.fx-tilt{transition:transform .6s var(--fx-ease)}

/* ---------- Menú móvil ---------- */
@media (min-width:901px){#mobileMenu,.fx-mmenu{display:none!important}}
.fx-hamb{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--fx-border);background:transparent;color:var(--fx-text);align-items:center;justify-content:center;cursor:pointer;margin-left:8px;flex-shrink:0}
@media (max-width:900px){.fx-hamb{display:inline-flex}}
.fx-mmenu{position:fixed;inset:0;z-index:100000;background:rgba(8,12,16,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;opacity:0;pointer-events:none;transition:opacity .35s var(--fx-ease)}
.fx-mmenu.open{opacity:1;pointer-events:auto}
.fx-mmenu a{color:var(--fx-text);font-family:'Playfair Display',Georgia,serif;font-size:28px;text-decoration:none}
.fx-mmenu a.fx-mcta{font-family:'Inter',system-ui,sans-serif;font-size:17px;font-weight:600;color:var(--fx-bg);background:var(--fx-accent);border-radius:999px;padding:14px 26px;margin-top:8px}
.fx-mmenu .fx-mclose{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1px solid var(--fx-border);background:transparent;color:var(--fx-text);font-size:20px;cursor:pointer}

/* ---------- Barra fija móvil: solo cuando el botón del hero ya no se ve ---------- */
.mobile-cta-bar{transition:transform .45s var(--fx-ease),opacity .45s}
body:not(.fx-past-hero) .mobile-cta-bar{transform:translateY(120%);opacity:0;pointer-events:none}
.mobile-cta-bar a{border-radius:999px!important}
@media (max-width:900px){body.fx-past-hero #sara-widget{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}}

/* ---------- Robot de Sara (misma conexión, aspecto nuevo) ---------- */
html body #sara-widget{--panel:#0f151c;--panel-2:#121820;--ink:#080c10;--text-light:#e8e8f0;--muted:#7878a0;--brand:#03EBF7;--brand-bright:#03EBF7}
html body #sara-widget .sara-particles{display:none}
html body #sara-bubble{width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#16222d,#070b0f 70%)!important;border:0;box-shadow:0 12px 26px -10px rgba(0,0,0,.9)!important;position:relative}
html body #sara-bubble .sara-ring{inset:-2px;border-radius:50%;border:0!important;background:conic-gradient(from var(--fxb),var(--fx-accent) 0 26%,rgba(3,235,247,.1) 26% 100%)!important;-webkit-mask:radial-gradient(circle,transparent 31px,#000 32px);mask:radial-gradient(circle,transparent 31px,#000 32px);animation:fxBeam 3.2s linear infinite!important;box-shadow:none!important;opacity:1!important}
html body #sara-bubble .fx-bot{width:48px;height:48px;animation:fxFloat 3.6s ease-in-out infinite}
html body #sara-bubble::after{content:"";position:absolute;right:4px;bottom:4px;width:14px;height:14px;border-radius:50%;background:#25d366;border:2.5px solid var(--fx-bg)}
@keyframes fxFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-2.5px) rotate(3deg)}}
.fx-bot .fx-eye{transform-box:fill-box;transform-origin:center;animation:fxBlink 4.8s infinite}
@keyframes fxBlink{0%,46%,50%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
.fx-bot .fx-eyes{transition:transform .25s var(--fx-ease)}
.fx-bot .fx-ant{animation:fxAnt 2.4s ease-in-out infinite}
@keyframes fxAnt{0%,100%{opacity:1}50%{opacity:.35}}
html body #sara-callout{background:var(--fx-card)!important;border:1px solid var(--fx-border)!important;border-radius:16px 16px 4px 16px!important;color:var(--fx-text)!important;box-shadow:0 14px 28px -16px rgba(0,0,0,.95)!important;animation:none!important;font-family:'Inter',system-ui,sans-serif}
html body #sara-callout::before,html body #sara-callout::after{display:none!important}
html body #sara-callout .co-dot{background:#25d366!important;box-shadow:none!important}
html body #sara-panel{border-radius:var(--fx-radius)!important;border:1px solid var(--fx-border)!important;background:var(--fx-card)!important;box-shadow:0 30px 44px -26px rgba(0,0,0,.95)!important}
html body #sara-header{background:var(--fx-card)!important;border-bottom:1px solid var(--fx-border)!important}
html body #sara-header::after{display:none!important}
html body .sara-avatar{background:radial-gradient(circle at 35% 30%,#16222d,#070b0f 70%)!important;box-shadow:none!important;border:1px solid var(--fx-border)}
html body .sara-msg.user{background:var(--fx-accent)!important;color:var(--fx-bg)!important}
html body .sara-msg.bot{background:var(--fx-bg3)!important}
html body #sara-input{border-radius:999px!important;background:var(--fx-bg3)!important;border-color:var(--fx-border)!important}
html body #sara-send{border-radius:50%!important;width:46px;height:46px;background:var(--fx-accent)!important;color:var(--fx-bg)!important;box-shadow:none!important}
html body #sara-close{border-radius:50%!important;width:40px;height:40px;border:1px solid var(--fx-border)!important}

@media (prefers-reduced-motion:reduce){
  .btn-primary,.btn-cta,.btn-nav,.pkg-btn-featured,.magnet-btn,.btn-wa,.fx-btn,.btn-secondary,.pkg-btn-default,.fx-ghost,.fx-on,html body #sara-bubble .sara-ring,html body #sara-bubble .fx-bot{animation:none!important}
}

/* Con el aviso de cookies abierto, Sara espera: no se tapan los botones */
body:has(#cookie-banner.show) #sara-callout{display:none!important}
@media (max-width:900px){body:has(#cookie-banner.show) #sara-widget{opacity:0;pointer-events:none}}
/* En móvil el botón verde de WhatsApp sobra: ya están la barra fija y Sara */
@media (max-width:900px){.wa-float{display:none!important}}
/* Páginas de sector: el encabezado de "Soluciones" centrado, como el resto de la web */
#services>div:first-child{flex-direction:column;align-items:center!important;text-align:center}
/* Las animaciones de entrada desde la derecha no deben crear scroll lateral en móvil */
html,body{overflow-x:clip}