/* ===========================================================================
   Kit ESTÉTICA · capa de efectos (aditiva). Motivo del GIRO: "el trazo que pule"
   — hairlines finas a la deriva (peine/navaja) + un trazo nítido que se dibuja
   y se desvanece (el corte / el acabado), en el color de marca del cliente.
   (Distinto del motivo de Arco, que son puntos/arcos.) Showpiece: el mini-chat
   de booking que se teclea solo.
   Movimiento bajo html.fx (lo activa efectos.js si hay JS y no reduce-motion).
   Override explícito vía toggle (html.fx-force). Paleta: la del cliente (--accent).
   =========================================================================== */
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(72px); opacity: .5; }
.fx-blob.a { width: 46vw; height: 46vw; left: -10vw; top: -8vw;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent) 34%, 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(--accent) 20%, 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) 24%, transparent), color-mix(in srgb, var(--bg) 46%, transparent)); }

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), color-mix(in srgb, var(--accent) 45%, #ffffff));
  -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 { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.serv:hover, .res:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 14px 30px rgba(0,0,0,.22); }

.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; }
}