/* ===========================================================================
   Arco · efectos.css COMPARTIDO (todos los kits). Capa aditiva: canvas de motivo
   por sub-giro (ver efectos.js) + 2 blobs de color del cliente + scrim suave +
   reveals al scroll + showpiece del mini-chat. Movimiento bajo html.fx;
   override por toggle (html.fx-force). Paleta: --accent / --accent2 del cliente.
   =========================================================================== */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px;
}
#fx-bg { position: fixed; inset: 0; z-index: -3; pointer-events: none; }
#fx-bg canvas { display: block; width: 100%; height: 100%; }
.fx-blob { position: fixed; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(76px); opacity: .42; }
.fx-blob.a { width: 46vw; height: 46vw; left: -10vw; top: -8vw;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%); }
.fx-blob.b { width: 42vw; height: 42vw; right: -12vw; bottom: -10vw;
  background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--accent2) 24%, transparent), transparent 70%); }
#fx-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 26%, transparent), color-mix(in srgb, var(--bg) 48%, transparent)); }

/* matiz de los blobs por familia (refuerza que el fondo se sienta distinto) */
html[data-fx="orbs"] .fx-blob, html[data-fx="dust"] .fx-blob { opacity: .3; filter: blur(92px); }
html[data-fx="sparkle"] .fx-blob, html[data-fx="confetti"] .fx-blob { opacity: .5; filter: blur(64px); }
html[data-fx="embers"] .fx-blob { opacity: .34; filter: blur(82px); }
html[data-fx="grid"] .fx-blob, html[data-fx="mesh"] .fx-blob { opacity: .26; filter: blur(88px); }

html.fx .fx-blob.a { animation: fx-drift-a 28s ease-in-out infinite alternate; }
html.fx .fx-blob.b { animation: fx-drift-b 34s ease-in-out infinite alternate; }
@keyframes fx-drift-a { to { transform: translate(6vw, 4vw) scale(1.08); } }
@keyframes fx-drift-b { to { transform: translate(-5vw, -3vw) scale(1.06); } }

.fx-grad { background: linear-gradient(100deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

html.fx .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.fx .reveal.in { opacity: 1; transform: none; }

.serv, .res, .ic-card, .stat, .equipo-card, .promo, .menu-row, .step, .prog { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.serv:hover, .res:hover, .ic-card:hover, .promo:hover, .step:hover, .prog:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 30px var(--shadow); }

.fx-cursor::after { content: "▍"; opacity: .55; animation: fx-blink 1s steps(1) infinite; }
@keyframes fx-blink { 50% { opacity: 0; } }

#fx-toggle { position: fixed; left: 14px; bottom: 14px; z-index: 70; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 13px; font: 600 12px/1 var(--body);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: .5; transition: opacity .2s ease; }
#fx-toggle:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html.fx:not(.fx-force) .fx-blob { animation: none; }
  html.fx:not(.fx-force) .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html:not(.fx-force) #fx-bg { display: none; }
  html:not(.fx-force) .fx-cursor::after { animation: none; }
}