/* ============================================================
enhance.css — capa de experiencia compartida (index + arcg)
Transición de página · cursor halo · scrollspy · tilt 3D · FAQ.
Acento/fondo se leen de data-accent / data-bg en (JS).
Todo es ADITIVO y respeta prefers-reduced-motion (vía enhance.js).
============================================================ */
/* Compensa el nav fijo al saltar a una ancla (#how, #pricing…). */
html { scroll-padding-top: 84px; }
/* ---------- 1. Transición de página (fade de salida) ---------- */
.x-pt {
position: fixed; inset: 0; z-index: 99990;
opacity: 0; pointer-events: none;
transition: opacity .28s cubic-bezier(.4, 0, .2, 1);
/* background se fija inline desde JS (data-bg) */
}
.x-pt.is-active { opacity: 1; pointer-events: all; }
/* ---------- 2. Cursor FLECHA DE CRISTAL (facetas cromo + borde de neón, ref. imagen) ----------
El halo/anillo viejo queda desactivado: la "luz acompañante" vive en cada página (#cur). */
.x-cur, .x-cur-dot { display: none !important; }
@media (hover: hover) and (pointer: fine) {
html, body {
cursor: url("data:image/svg+xml;utf8,") 17 2, auto;
}
a, button, summary, label, select, [role='button'], [data-tilt] {
cursor: url("data:image/svg+xml;utf8,") 17 2, pointer;
}
input[type='text'], input[type='email'], input[type='password'], input[type='search'], input[type='tel'], textarea { cursor: text; }
}
body.x-cursor-on { /* marca presencia, por si se quiere ajustar algo */ }
/* ---------- 2b. LA LUNA compartida (#cur) — el mismo objeto que sigue al mouse en TODAS
las landings; cada página la tiñe con su paleta vía --x-accent. Dos pieles:
· .x-moon-light → fondo claro: disco grafito con mix-blend multiply (como index)
· .x-moon-dark → fondo oscuro: disco que GLOW (screen) para no desaparecer
index conserva su luna "deluxe" propia (su #cur va en el HTML y lo maneja index.js);
enhance solo inyecta+anima esta cuando la página NO trae su propio #cur. ---------- */
#cur.x-moon{position:fixed;left:0;top:0;width:min(82vh,780px);height:min(82vh,780px);
border-radius:50%;pointer-events:none;z-index:1;will-change:transform;
transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease}
/* superficie: respira suave */
#cur.x-moon::before{content:'';position:absolute;inset:0;border-radius:50%;
animation:x-moon-breath 7s ease-in-out infinite}
/* aro orbital teñido por el acento de la página */
#cur.x-moon::after{content:'';position:absolute;inset:-1px;border-radius:50%;padding:2px;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
animation:x-moon-orbit 26s linear infinite}
/* — piel CLARA (multiply): grafito, tal como en index — */
.x-moon-light #cur.x-moon{mix-blend-mode:multiply}
.x-moon-light #cur.x-moon::before{
background:radial-gradient(circle at 38% 32%,rgba(20,20,20,.07),rgba(20,20,20,.03) 34%,rgba(20,20,20,.012) 56%,transparent 72%),
radial-gradient(circle,rgba(20,20,20,.035),transparent 66%);
box-shadow:0 0 90px 20px rgba(20,20,20,.05),0 0 240px 70px rgba(20,20,20,.03),inset 0 0 90px rgba(20,20,20,.05)}
.x-moon-light #cur.x-moon::after{
background:conic-gradient(from 0deg,rgba(20,20,20,.05),
color-mix(in srgb,var(--x-accent,#161616) 65%,transparent) 12%,rgba(20,20,20,.08) 28%,
rgba(20,20,20,.04) 56%,color-mix(in srgb,var(--x-accent,#161616) 30%,transparent) 78%,rgba(20,20,20,.05));
filter:drop-shadow(0 0 7px color-mix(in srgb,var(--x-accent,#161616) 25%,transparent))}
/* — piel OSCURA (glow): brilla con el acento para leerse sobre fondo negro — */
.x-moon-dark #cur.x-moon{mix-blend-mode:screen}
.x-moon-dark #cur.x-moon::before{
background:radial-gradient(circle at 42% 38%,color-mix(in srgb,var(--x-accent,#F97316) 26%,transparent),
color-mix(in srgb,var(--x-accent,#F97316) 10%,transparent) 38%,transparent 66%);
box-shadow:0 0 120px 24px color-mix(in srgb,var(--x-accent,#F97316) 14%,transparent),
0 0 260px 80px color-mix(in srgb,var(--x-accent,#F97316) 7%,transparent)}
.x-moon-dark #cur.x-moon::after{
background:conic-gradient(from 0deg,transparent,
color-mix(in srgb,var(--x-accent,#F97316) 70%,transparent) 12%,transparent 30%,transparent 56%,
color-mix(in srgb,var(--x-accent,#F97316) 38%,transparent) 78%,transparent);
filter:drop-shadow(0 0 9px color-mix(in srgb,var(--x-accent,#F97316) 40%,transparent))}
@keyframes x-moon-orbit{to{transform:rotate(360deg)}}
@keyframes x-moon-breath{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){#cur.x-moon::before,#cur.x-moon::after{animation:none}}
/* táctil / móvil: sin luna (solo experiencia de puntero fino) */
@media(hover:none),(max-width:820px){#cur.x-moon{display:none!important}}
/* ---------- 3. Scrollspy: link activo del nav (píldora rellena) ---------- */
.nav-links a.x-active {
color: var(--x-accent, #161616) !important;
background: color-mix(in srgb, var(--x-accent, #E8E6E2) 24%, transparent) !important;
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--x-accent, #E8E6E2) 34%, transparent) !important;
}
/* Fallback sin color-mix: tinte por acento vía color */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.nav-links a.x-active { background: rgba(255,255,255,.10) !important; color: var(--x-accent, #E8E6E2) !important; }
}
/* ---------- 4. Tilt 3D ---------- */
[data-tilt] {
transform-style: preserve-3d;
transition: transform .3s cubic-bezier(.2, .8, .2, 1);
will-change: transform;
}
/* ---------- 5. FAQ: numeración + barra + apertura animada ---------- */
.x-faq-on .faq { position: relative; }
.x-faq-on .faq::before {
content: attr(data-n);
position: absolute; top: 18px; right: 44px;
font: 600 10px/1 'Space Mono', monospace;
letter-spacing: 1px; color: var(--x-accent, #E8E6E2);
opacity: .55; pointer-events: none;
}
.x-faq-on .faq[open] {
box-shadow: inset 2px 0 0 var(--x-accent, #E8E6E2);
}
.x-faq-on .faq[open] .faq-a {
animation: xFaqIn .4s cubic-bezier(.16, 1, .3, 1);
}
@keyframes xFaqIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- 6. Borde cónico giratorio (tarjeta de precio destacada) ---------- */
@property --x-ang { syntax: ''; initial-value: 0deg; inherits: false; }
.x-price-glow { position: relative; isolation: isolate; }
.x-price-glow::before {
content: ''; position: absolute; inset: -1.5px; border-radius: inherit; z-index: -1;
padding: 1.5px;
background: conic-gradient(from var(--x-ang),
transparent 50%, var(--x-accent, #E8E6E2) 78%, var(--x-accent, #E8E6E2) 88%, transparent 96%);
/* máscara a SOLO el aro: sin ella el sector cónico mancha el interior de la tarjeta */
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: x-ang-spin 5.5s linear infinite;
}
@keyframes x-ang-spin { to { --x-ang: 360deg; } }
/* Variante multicolor (misma rampa del hero-ribbon) para la tarjeta de
precio de la landing principal: en vez de un solo --x-accent, el aro
recorre las 6 verticales de la plataforma. */
.x-price-glow.grad::before{
background: conic-gradient(from var(--x-ang),
transparent 50%, #EA580C 60%, #DB2777 70%, #7C5CE0 80%, #2563EB 88%, transparent 96%);
}
/* Navegadores sin @property (Safari viejo): sin glow rotatorio, conserva el borde estático. */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
.x-price-glow::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.x-pt, [data-tilt], .x-cur, .x-cur-dot { transition: none !important; }
.x-faq-on .faq[open] .faq-a { animation: none; }
.x-price-glow::before { animation: none; }
}