/* ============================================================
   VECTORYAL — ENTERPRISE THEME + CINEMATIC COMMAND-CENTER HERO
   Scoped to body.vy-enterprise. v3
   ============================================================ */

/* ── 1. TOKENS ────────────────────────────────────────────── */
body.vy-enterprise {
  --e-bg:    #ffffff;
  --e-bg2:   #f7f7fb;
  --e-dark:  #04040b;
  --e-dark2: #07070f;
  --e-ink:   #09101f;
  --e-ink2:  #475166;
  --e-ink3:  #8b94a8;
  --e-blue:  #2563eb;
  --e-cyan:  #38bdf8;
  --e-violet:#1e40af;
  --e-grad:  linear-gradient(135deg, #38bdf8 0%, #2563eb 50%, #1e40af 100%);
  --e-line:  rgba(9,16,31,.08);
  --e-line-dark: rgba(255,255,255,.055);
  --e-sh-sm: 0 1px 2px rgba(9,16,31,.05);
  --e-sh:    0 2px 4px rgba(9,16,31,.04), 0 12px 36px rgba(9,16,31,.07);
  --e-sh-lg: 0 20px 64px rgba(9,16,31,.13);
  /* override base indigo/violet tokens → blue only (no purple on the home) */
  --vy-indigo: #1d4ed8;
  --vy-accent: #60a5fa;
  --vy-gradient: linear-gradient(135deg, #38bdf8 0%, #2563eb 55%, #1e40af 100%);
  --vy-gradient-hover: linear-gradient(135deg, #2563eb 0%, #1d4ed8 60%, #1e3a8a 100%);
  background: var(--e-bg);
  color: var(--e-ink);
}
/* Calculator CTA · clean professional icon (replaces the ✨ emoji) */
body.vy-enterprise .cta-box-ico {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(56,189,248,.14); border: 1px solid rgba(56,189,248,.3);
}
body.vy-enterprise .cta-box-ico svg { width: 24px; height: 24px; color: #7dd3fc; }
body.vy-enterprise .gradient-text {
  background: var(--e-grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ── 2. LOADER ────────────────────────────────────────────── */
body.vy-enterprise .vy-loader          { background: var(--e-dark); }
body.vy-enterprise .vy-loader-bar-track{ background: rgba(255,255,255,.08); }

/* ── 3. HEADER ────────────────────────────────────────────── */
body.vy-enterprise .header           { background: transparent; }
body.vy-enterprise .header.scrolled  {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 1px 0 rgba(9,16,31,.07), 0 4px 20px rgba(9,16,31,.05);
}
body.vy-enterprise .logo-wordmark                  { color:var(--e-ink); -webkit-text-fill-color:var(--e-ink) !important; }
body.vy-enterprise .header.scrolled .logo-wordmark { color:var(--e-ink); -webkit-text-fill-color:var(--e-ink) !important; }
body.vy-enterprise .nav a                          { color:var(--e-ink); }
body.vy-enterprise .nav a:hover,
body.vy-enterprise .nav a.active                   { color:var(--e-blue); }
body.vy-enterprise .header.scrolled .nav a         { color:var(--e-ink); }
body.vy-enterprise .header.scrolled .nav a:hover,
body.vy-enterprise .header.scrolled .nav a.active  { color:var(--e-blue); }
body.vy-enterprise .menu-toggle span               { background:var(--e-ink); }
body.vy-enterprise .header.scrolled .menu-toggle span { background:var(--e-ink); }
/* "Reservar llamada" — solid corporate blue (no gradient), white text */
body.vy-enterprise .btn-primary {
  background: var(--e-blue); color: #fff !important; box-shadow: 0 4px 14px rgba(37,99,235,.26);
}
body.vy-enterprise .btn-primary:hover { background: #1d4ed8; color:#fff !important; box-shadow: 0 8px 22px rgba(37,99,235,.36); }

/* Language switcher (EN · ES · FR · DE) */
body.vy-enterprise .vy-lang { display: inline-flex; align-items: center; gap: .15rem; margin-left: 1.2rem; }
body.vy-enterprise .vy-lang button {
  background: none; border: none; cursor: pointer; padding: .25rem .42rem;
  font: inherit; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  color: var(--e-ink3); border-radius: 6px; transition: color .2s, background .2s;
}
body.vy-enterprise .vy-lang button:hover { color: var(--e-ink); }
body.vy-enterprise .vy-lang button.on { color: var(--e-blue); }
body.vy-enterprise .header.scrolled .vy-lang button { color: var(--e-ink3); }
body.vy-enterprise .header.scrolled .vy-lang button.on { color: var(--e-blue); }

/* ── 4. BUTTONS ───────────────────────────────────────────── */
body.vy-enterprise .btn-hero        { background: var(--e-grad); box-shadow: 0 8px 22px rgba(37,99,235,.3); }
body.vy-enterprise .btn-hero:hover  { box-shadow: 0 14px 32px rgba(37,99,235,.42); }
body.vy-enterprise .btn-submit      { background: var(--e-grad); box-shadow: 0 8px 22px rgba(37,99,235,.28); }
body.vy-enterprise .btn-submit:hover{ box-shadow: 0 14px 30px rgba(37,99,235,.4); }

/* ── Chat launcher → speech-bubble icon + adaptive light/dark contrast ── */
body.vy-enterprise #vectoryal-chat .vy-chat-button {
  background: #0b0b12 !important;
  box-shadow: 0 10px 30px rgba(9,16,31,.28) !important;
  transition: background .35s ease, box-shadow .35s ease !important;
}
body.vy-enterprise #vectoryal-chat .vy-chat-button-icon {
  filter: none !important; background: none !important; color: #fff;
  display: flex !important; align-items: center; justify-content: center;
}
body.vy-enterprise #vectoryal-chat .vy-chat-button-icon svg { width: 27px; height: 27px; display: block; color: inherit; }
/* over dark sections → invert: white button, dark icon */
body.vy-enterprise #vectoryal-chat.vy-cb-on-dark .vy-chat-button {
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.45) !important;
}
body.vy-enterprise #vectoryal-chat.vy-cb-on-dark .vy-chat-button-icon { color: #0b0b12; }

/* Preset question bubbles above the launcher */
.vy-cb-presets {
  position: fixed; right: 24px; bottom: 100px; z-index: 2147482000;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
.vy-cb-preset {
  background: #fff; color: var(--e-ink, #09101f);
  border: 1px solid rgba(9,16,31,.1); box-shadow: 0 6px 20px rgba(9,16,31,.12);
  border-radius: 999px; padding: .52rem .95rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  max-width: 78vw; white-space: nowrap;
}
.vy-cb-preset:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(9,16,31,.18); border-color: rgba(37,99,235,.32); }
@media (max-width: 560px) { .vy-cb-presets { bottom: 92px; right: 16px; } .vy-cb-preset { font-size: .78rem; } }

/* ════════════════════════════════════════════════════════════
   4b. HERO v3 — white neural-net background that, on scroll, expands
       and transitions into the cockpit photo (camera zoom).
   ════════════════════════════════════════════════════════════ */
.vy-cine2 { position: relative; height: 300vh; background: var(--e-bg); }
/* phrases that emerge from the tunnel and grow */
.vy-tunnel-words { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vy-tw {
  position: absolute; top: 50%; left: 50%; width: min(90%, 900px);
  transform: translate(-50%,-50%) scale(.6); transform-origin: 50% 50%;
  text-align: center; font-weight: 800; letter-spacing: -0.035em; line-height: 1.04;
  font-size: clamp(2rem, 5.2vw, 4.2rem); color: var(--e-ink);
  text-shadow: 0 2px 34px rgba(255,255,255,.9), 0 1px 6px rgba(255,255,255,.95);
  opacity: 0; will-change: opacity, transform, filter;
}
.vy-tw span {
  background: var(--e-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vy-cine2-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--e-bg);
}
#vyNeural { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; transform-origin: 50% 50%; will-change: transform, opacity; }
.vy-cine2-photo {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  background-image: url('../images/hero-cockpit.jpeg');
  background-size: cover; background-position: center 46%; background-repeat: no-repeat;
  transform-origin: 50% 52%; will-change: transform, opacity;
}
.vy-cine2-hero {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 100px 1.5rem 0; will-change: opacity, transform;
}
.vy-cine2-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 66% 54% at 50% 46%, rgba(255,255,255,.86), rgba(255,255,255,.45) 55%, rgba(255,255,255,0) 76%);
}
.vy-cine2-hero h1 {
  font-size: clamp(2.7rem, 7vw, 5.6rem); font-weight: 800; letter-spacing: -0.045em;
  color: var(--e-ink); line-height: 1.02; margin: 0 0 1.5rem;
}
.vy-cine2-sub {
  font-size: clamp(1.04rem, 1.7vw, 1.3rem); color: var(--e-ink); font-weight: 500;
  line-height: 1.6; max-width: 690px; margin: 0 auto 2rem;
}
.vy-cine2-btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.vy-cine2 .btn-ghost {
  border-color: rgba(9,16,31,.16); color: var(--e-ink); background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.vy-cine2 .btn-ghost:hover { border-color: rgba(37,99,235,.45); color: var(--e-blue); background: #fff; }
/* scroll cue sits UNDER the buttons (static, not pinned to viewport bottom) */
.vy-cine2-hero .vy-scroll-cue { position: static; transform: none; left: auto; bottom: auto; margin: 0 auto; }
@media (max-width: 600px) {
  .vy-cine2 { height: 240vh; }
  .vy-tw { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .vy-cine2-hero { padding: 92px 1.25rem 0; }
}

/* ════════════════════════════════════════════════════════════
   5. CINEMATIC HERO  (scroll-zooms into the command-center screens)
   .vy-cine = tall scroll track · .vy-cine-stage = sticky 100vh
   ════════════════════════════════════════════════════════════ */
/* CRITICAL: html/body use overflow-x:hidden globally, which creates a scroll
   container and breaks position:sticky (the pin). overflow:clip clips the same
   way WITHOUT creating a scroll container, so the sticky pin works again.
   Scoped to the enterprise homepage via :has() so other pages are untouched. */
html:has(body.vy-enterprise) { overflow-x: clip; }
body.vy-enterprise { overflow-x: clip; }

.vy-cine { position: relative; height: 300vh; background: var(--e-bg2); }
.vy-cine-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: linear-gradient(180deg, #eef2fb 0%, #e3e9f5 100%);
  perspective: 1500px;
}

/* Starfield canvas (subtle, behind everything) */
#vyGalaxyCanvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* Zoomable container — the whole scene/photo scales toward the monitors */
.vy-zoom {
  position: absolute; inset: 0; z-index: 1;
  transform-origin: 50% 52%;
  will-change: transform, filter;
}

/* Real cockpit photo (drops in over the CSS fallback when the file exists) */
.vy-cockpit-photo {
  position: absolute; inset: 0; z-index: 5;
  background-image: url('../images/hero-cockpit.jpeg');
  background-size: cover; background-position: center 46%;
  background-repeat: no-repeat;
}

/* "Enter the monitor": screen 1 grows from the centre monitor to full frame */
.vy-enter {
  position: absolute; inset: 0; z-index: 6;
  opacity: 0; pointer-events: none;
  transform: scale(.36); transform-origin: center 47%;
  will-change: transform, opacity;
}
.vy-enter img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; border-radius: 8px;
  box-shadow: 0 30px 90px rgba(9,16,31,.45);
}

/* Earth + cosmic bloom */
.vy-space { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vy-earth {
  position: absolute; left: -16%; top: 50%;
  width: 68vw; height: 68vw; max-width: 900px; max-height: 900px;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 32%, rgba(150,210,255,.65) 0%, rgba(50,105,200,.48) 18%, rgba(18,48,110,.55) 38%, rgba(6,14,40,.28) 55%, transparent 64%);
  box-shadow: 0 0 140px 40px rgba(56,120,230,.3), inset -50px -35px 130px rgba(0,0,0,.52);
  filter: blur(.4px);
}
.vy-space-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 8% 50%, rgba(40,90,200,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 2%, rgba(91,120,253,.2), transparent 55%),
    radial-gradient(ellipse 40% 35% at 92% 65%, rgba(37,99,235,.13), transparent 55%);
}

/* Neon ceiling + floor lines matching cockpit image */
.vy-room-neon { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vy-room-neon::before {
  content: ""; position: absolute; top: 0; left: 3%; right: 3%; height: 2.5px;
  background: linear-gradient(90deg, transparent 3%, rgba(0,215,255,.9) 18%, rgba(37,99,235,1) 50%, rgba(0,215,255,.9) 82%, transparent 97%);
  box-shadow: 0 0 16px 4px rgba(0,215,255,.72), 0 0 60px 14px rgba(37,99,235,.42), 0 3px 50px rgba(0,215,255,.3);
}
.vy-room-neon::after {
  content: ""; position: absolute; bottom: 0; left: 5%; right: 5%; height: 1.5px;
  background: linear-gradient(90deg, transparent 5%, rgba(0,215,255,.62) 22%, rgba(37,99,235,.78) 50%, rgba(0,215,255,.62) 78%, transparent 95%);
  box-shadow: 0 0 12px 3px rgba(0,215,255,.52), 0 0 40px 8px rgba(37,99,235,.34);
}

/* The zoomable scene (desk + monitors). transform-origin aims at the screens. */
.vy-scene {
  position: absolute; inset: 0; z-index: 2;
  transform-origin: 50% 60%;
  will-change: transform;
}

/* Desk + monitors arrangement */
.vy-deskwrap {
  position: absolute; left: 50%; top: 57%;
  transform: translate(-50%,-50%);
  width: min(880px, 78vw);
}
.vy-monitors {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 14px; transform-style: preserve-3d;
}
.vy-mon {
  position: relative;
  border-radius: 9px; overflow: hidden;
  background: #0a0c1c;
  border: 1px solid rgba(120,160,255,.35);
  box-shadow: 0 0 22px rgba(56,140,255,.3), inset 0 0 30px rgba(10,15,40,.6);
}
.vy-mon--l { width: 28%; height: 150px; transform: perspective(700px) rotateY(22deg); transform-origin: right center; }
.vy-mon--c { width: 38%; height: 178px; z-index: 3; }
.vy-mon--r { width: 28%; height: 150px; transform: perspective(700px) rotateY(-22deg); transform-origin: left center; }
.vy-mon-glass {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(120,180,255,.12), transparent 40%);
  pointer-events: none;
}
/* tiny decorative dashboard inside desk monitors */
.vy-mon-mini { position: absolute; inset: 8px; display: flex; flex-direction: column; gap: 5px; }
.vy-mon-mini .r { height: 7px; border-radius: 3px; background: rgba(120,160,255,.18); }
.vy-mon-mini .r.b { background: rgba(37,99,235,.55); }
.vy-mon-mini .r.c { background: rgba(56,189,248,.5); }
.vy-mon-mini .row { display: flex; gap: 5px; flex: 1; align-items: flex-end; }
.vy-mon-mini .bar { flex: 1; background: rgba(37,99,235,.4); border-radius: 2px; }

/* desk slab — white curved console with cyan neon edge (matches photo) */
.vy-desk {
  position: relative; z-index: 1; margin-top: -4px;
  height: 64px;
  background: linear-gradient(180deg, #eef2f8 0%, #cfd6e2 45%, #9aa3b4 100%);
  border-radius: 46% 46% 30% 30% / 60% 60% 40% 40%;
  box-shadow: 0 32px 70px rgba(0,0,0,.6), 0 0 40px rgba(0,200,255,.12), inset 0 2px 2px rgba(255,255,255,.7);
}
.vy-desk::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 6px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent 2%, rgba(0,225,255,1) 18%, rgba(70,150,255,1) 50%, rgba(0,225,255,1) 82%, transparent 98%);
  box-shadow: 0 0 14px 3px rgba(0,215,255,.85), 0 0 50px 10px rgba(70,150,255,.5);
  filter: blur(.2px);
}
.vy-desk-floor {
  position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%);
  width: 62%; height: 55px;
  border: 1.5px solid rgba(0,215,255,.45);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(0,215,255,.3), 0 0 60px rgba(37,99,235,.2);
  opacity: .55;
}

/* Chair silhouette (carbon-fiber back) */
.vy-chair {
  position: absolute; bottom: -56px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 76px; z-index: 0;
}
.vy-chair::before {
  content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 58%;
  background: linear-gradient(175deg, #0d1025 0%, #060810 100%);
  border-radius: 8px 8px 3px 3px;
  border: 1px solid rgba(0,195,255,.2);
  box-shadow: 0 0 14px rgba(0,195,255,.1), inset 0 1px 0 rgba(0,195,255,.1);
}
.vy-chair::after {
  content: ""; position: absolute; bottom: 0; left: 26%; right: 26%; height: 42%;
  background: linear-gradient(180deg, #0b0d1e 0%, #060810 100%);
  border-radius: 5px 5px 2px 2px;
  border: 1px solid rgba(0,195,255,.14);
}

/* Cockpit room framing: dark side panels + floor gradient */
.vy-cockpit { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.vy-cockpit::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 10vw; min-width: 80px;
  background: linear-gradient(90deg, rgba(4,6,16,.94) 0%, rgba(4,6,16,.0) 100%);
  border-right: 1px solid rgba(0,195,255,.1);
}
.vy-cockpit::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10vw; min-width: 80px;
  background: linear-gradient(270deg, rgba(4,6,16,.94) 0%, rgba(4,6,16,.0) 100%);
  border-left: 1px solid rgba(0,195,255,.06);
}

/* Wide-shot hero copy overlay — full-stage flex so it centers BELOW the
   fixed header and can never collide with the nav, whatever the headline height */
.vy-cine-hero {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(96px, 14vh, 150px) 1.5rem 8vh;
  will-change: opacity, transform;
}
.vy-cine-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(244,247,253,.82) 0%, rgba(244,247,253,.38) 30%, rgba(244,247,253,0) 50%, rgba(244,247,253,.55) 100%),
    radial-gradient(ellipse 72% 52% at 50% 36%, rgba(248,250,255,.7), transparent 72%);
}
.vy-cine-hero > * { position: relative; }
/* Clean technical label — no background box */
.vy-cine-hero .badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: none; border: none; box-shadow: none; padding: 0;
  color: var(--e-ink2); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.5rem;
}
.vy-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.2); animation: vy-live 1.8s ease-in-out infinite;
}
@keyframes vy-live { 0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.22);} 50%{box-shadow:0 0 0 8px rgba(34,197,94,0);} }
.vy-cine-hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 5.4rem); font-weight: 800; letter-spacing: -0.045em;
  color: var(--e-ink); line-height: 1.03; margin: 0 0 1.4rem;
  text-shadow: 0 2px 30px rgba(255,255,255,.7);
}
.vy-cine-hero .sub {
  font-size: clamp(1.02rem, 1.6vw, 1.24rem); color: var(--e-ink); font-weight: 500;
  line-height: 1.65; max-width: 660px; margin: 0 auto 2.4rem;
  text-shadow: 0 1px 16px rgba(255,255,255,.85);
}
.vy-cine-hero .btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.vy-cine-hero .btn-ghost {
  border-color: rgba(9,16,31,.16); color: var(--e-ink);
  background: rgba(255,255,255,.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.vy-cine-hero .btn-ghost:hover { border-color: rgba(37,99,235,.45); color: var(--e-blue); background: #fff; }

/* Scroll cue */
.vy-scroll-cue {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: .5rem; color: rgba(9,16,31,.32);
}
.vy-scroll-cue span { font-size: .55rem; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; }
.vy-scroll-cue-mouse { width: 20px; height: 32px; border: 1.5px solid currentColor; border-radius: 10px; position: relative; }
.vy-scroll-cue-mouse i { position: absolute; top: 5px; left: 50%; width: 2px; height: 6px; margin-left:-1px; background: currentColor; border-radius: 2px; animation: vy-scue 1.8s ease-in-out infinite; }
@keyframes vy-scue { 0%{opacity:0;transform:translateY(0);} 30%{opacity:1;} 100%{opacity:0;transform:translateY(10px);} }

/* Fullscreen dashboard scenes (revealed as we fly into the screens) */
.vy-screens {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(5,7,18,.4), rgba(3,4,11,.92));
  will-change: opacity;
}
.vy-screen-scene {
  position: absolute;
  width: min(1080px, 92vw);
  opacity: 0; transform: scale(.96);
  transition: none;
  will-change: opacity, transform;
}
.vy-screens-caption {
  position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
  z-index: 8; text-align: center; pointer-events: none;
}
.vy-screens-caption .k {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em;
  color: rgba(56,189,248,.85); margin-bottom: .4rem;
}
.vy-screens-caption .t {
  font-size: clamp(1.1rem, 2.4vw, 1.7rem); font-weight: 800; letter-spacing: -0.03em; color: #fff;
}
/* progress dots */
.vy-cine-dots { display: inline-flex; gap: 7px; margin-top: .9rem; justify-content: center; }
.vy-cine-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.22); transition: all .3s; }
.vy-cine-dots i.on { background: #fff; width: 22px; border-radius: 4px; }

/* ── 6. DEVICE + DASHBOARD COMPONENTS (reused in the 3 scenes) ─ */
.vy-device {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 50px 120px rgba(0,0,0,.7), 0 0 90px rgba(37,99,235,.22);
  background: #0b0c18;
}
.vy-device-bar {
  display: flex; align-items: center; gap: .65rem; padding: .62rem 1rem;
  background: rgba(255,255,255,.022); border-bottom: 1px solid rgba(255,255,255,.045);
}
.vy-device-dots { display: flex; gap: 5px; }
.vy-device-dots i { width: 10px; height: 10px; border-radius: 50%; }
.vy-device-dots i:nth-child(1){background:#ff5f57;} .vy-device-dots i:nth-child(2){background:#febc2e;} .vy-device-dots i:nth-child(3){background:#28c840;}
.vy-device-url {
  flex: 1; max-width: 320px; margin: 0 auto; background: rgba(255,255,255,.04); border-radius: 5px;
  padding: .22rem .72rem; font-size: .67rem; color: rgba(255,255,255,.3); text-align: center;
}
.vy-dash { display: grid; grid-template-columns: 188px 1fr; min-height: 440px; }
.vy-dash-sidebar { background: #070810; border-right: 1px solid rgba(255,255,255,.038); display: flex; flex-direction: column; padding-bottom: .8rem; overflow: hidden; }
.vy-dash-brand { display: flex; align-items: center; gap: .45rem; padding: 1rem 1rem .85rem; border-bottom: 1px solid rgba(255,255,255,.04); margin-bottom: .4rem; }
.vy-dash-brand-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--e-grad); display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 900; color: #fff; flex-shrink: 0; }
.vy-dash-brand-tx { display: flex; flex-direction: column; gap: 1px; }
.vy-dash-brand-nm { font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.86); line-height: 1.1; }
.vy-dash-brand-sub { font-size: .58rem; color: rgba(56,189,248,.75); }
.vy-dash-sec { padding: .65rem 1rem .2rem; font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.18); }
.vy-dash-link { display: flex; align-items: center; gap: .48rem; padding: .38rem 1rem; font-size: .71rem; color: rgba(255,255,255,.35); border-left: 2px solid transparent; }
.vy-dash-link svg { width: 13px; height: 13px; flex-shrink: 0; }
.vy-dash-link.on { color: rgba(255,255,255,.9); background: rgba(37,99,235,.13); border-left-color: #2563eb; }
.vy-dash-main { background: #0d0d1a; padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .85rem; overflow: hidden; }
.vy-dash-toprow { display: flex; align-items: baseline; justify-content: space-between; }
.vy-dash-ttl { font-size: .86rem; font-weight: 700; color: rgba(255,255,255,.9); }
.vy-dash-ttl span { font-weight: 400; color: rgba(255,255,255,.32); font-size: .72rem; margin-left: .25rem; }
.vy-dash-range { font-size: .62rem; color: rgba(255,255,255,.26); }
.vy-dash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; }
.vy-dash-kpi { background: rgba(255,255,255,.024); border: 1px solid rgba(255,255,255,.052); border-radius: 8px; padding: .6rem .7rem; }
.vy-kpi-lbl { font-size: .55rem; color: rgba(255,255,255,.3); text-transform: uppercase; letter-spacing: .09em; margin-bottom: .22rem; }
.vy-kpi-val { font-size: 1.5rem; font-weight: 800; color: rgba(255,255,255,.92); line-height: 1; }
.vy-kpi-d { font-size: .58rem; margin-top: .18rem; color: #22c55e; }
.vy-kpi-d.dn { color: #f87171; }
.vy-dash-mid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; flex: 1; min-height: 0; }
.vy-dash-card { background: rgba(255,255,255,.024); border: 1px solid rgba(255,255,255,.052); border-radius: 8px; padding: .75rem; overflow: hidden; }
.vy-dash-card.wide { grid-column: 1 / -1; }
.vy-dash-card-hd { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.35); margin-bottom: .6rem; }
.vy-donut-row { display: flex; align-items: center; gap: .85rem; }
.vy-donut { width: 56px; height: 56px; border-radius: 50%; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: conic-gradient(rgba(37,99,235,.9) 0deg 198deg, rgba(56,189,248,.75) 198deg 280deg, rgba(37,99,235,.5) 280deg 360deg); }
.vy-donut-hole { position: absolute; inset: 10px; background: #0d0d1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.8); }
.vy-leg { display: flex; flex-direction: column; gap: .26rem; flex:1; }
.vy-leg-it { display: flex; align-items: center; gap: .3rem; font-size: .6rem; color: rgba(255,255,255,.44); }
.vy-leg-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.vy-leg-v { margin-left: auto; color: rgba(255,255,255,.65); font-weight: 600; }
.vy-bars { display: flex; align-items: flex-end; gap: 5px; height: 78px; margin-bottom: .4rem; }
.vy-bar { flex: 1; background: rgba(37,99,235,.32); border-radius: 2px 2px 0 0; min-height: 4px; }
.vy-bar.hi { background: rgba(37,99,235,.9); }
.vy-bar.c  { background: rgba(56,189,248,.55); }
.vy-bar-lbls { display: flex; justify-content: space-between; font-size: .5rem; color: rgba(255,255,255,.2); }
.vy-bar-metric { display: flex; justify-content: space-between; align-items: baseline; margin-top: .4rem; }
.vy-bar-metric-val { font-size: .95rem; font-weight: 800; color: rgba(255,255,255,.82); }
.vy-bar-metric-lbl { font-size: .58rem; color: rgba(255,255,255,.3); }
.vy-act { display: flex; flex-direction: column; }
.vy-act-it { display: flex; align-items: flex-start; gap: .48rem; padding: .26rem 0; border-bottom: 1px solid rgba(255,255,255,.028); }
.vy-act-it:last-child { border-bottom: none; }
.vy-act-dot { width: 5px; height: 5px; border-radius: 50%; margin-top: .32rem; flex-shrink: 0; background: #22c55e; }
.vy-act-dot.b { background: #2563eb; } .vy-act-dot.y { background: #fbbf24; }
.vy-act-tx { font-size: .62rem; color: rgba(255,255,255,.44); flex: 1; line-height: 1.35; }
.vy-act-tx strong { color: rgba(255,255,255,.65); font-weight: 600; }
.vy-act-t { font-size: .56rem; color: rgba(255,255,255,.18); flex-shrink: 0; }
/* automation flow chips (scene 2) */
.vy-flow2 { display: flex; flex-direction: column; gap: .4rem; }
.vy-flow2-row { display: flex; align-items: center; gap: .5rem; }
.vy-flow2-chip { flex: 1; display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.03); border: 1px solid rgba(120,130,255,.16); border-radius: 8px; padding: .5rem .6rem; }
.vy-flow2-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--e-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vy-flow2-ico svg { width: 14px; height: 14px; color: #fff; }
.vy-flow2-tt { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.85); }
.vy-flow2-sb { font-size: .56rem; color: rgba(255,255,255,.38); }
.vy-flow2-st { margin-left: auto; font-size: .54rem; font-weight: 700; color: #8de6b4; text-transform: uppercase; letter-spacing: .06em; }
.vy-flow2-arrow { color: rgba(120,130,255,.5); display: flex; justify-content: center; }
.vy-flow2-arrow svg { width: 14px; height: 14px; }

/* ════════════════════════════════════════════════════════════
   6b. THE 3 SCREEN DASHBOARDS (match the cockpit monitors)
   ════════════════════════════════════════════════════════════ */
:root { --scr-h: 462px; }

/* ---- Scene 1 · Conversaciones / CRM (chat) ---- */
.vy-crm {
  display: grid; grid-template-columns: 52px 232px 1.55fr 218px;
  height: var(--scr-h); background: #0b0c18; overflow: hidden;
}
.vy-crm-rail { background: #070810; border-right: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .8rem 0; }
.vy-crm-rail-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--e-grad); display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff; font-size: .8rem; margin-bottom: .4rem; }
.vy-crm-rail i { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); }
.vy-crm-rail i svg { width: 17px; height: 17px; }
.vy-crm-rail i.on { background: rgba(37,99,235,.16); color: #fff; }
.vy-crm-list { border-right: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; overflow: hidden; }
.vy-crm-list-hd { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem .5rem; font-size: .82rem; font-weight: 700; color: rgba(255,255,255,.88); }
.vy-crm-badge { background: #2563eb; color: #fff; font-size: .58rem; font-weight: 700; padding: .08rem .42rem; border-radius: 999px; }
.vy-crm-search { margin: 0 .8rem .55rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); border-radius: 7px; padding: .4rem .6rem; font-size: .64rem; color: rgba(255,255,255,.3); }
.vy-crm-conv { display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem; border-left: 2px solid transparent; }
.vy-crm-conv.on { background: rgba(37,99,235,.12); border-left-color: #2563eb; }
.vy-ava { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: .64rem; font-weight: 700; color: #fff; }
.vy-ava.sm { width: 28px; height: 28px; }
.vy-crm-conv-tx { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.vy-crm-conv-tx .nm { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-crm-conv-tx .sn { font-size: .63rem; color: rgba(255,255,255,.34); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-crm-time { font-size: .56rem; color: rgba(255,255,255,.22); flex-shrink: 0; }
.vy-crm-chat { display: flex; flex-direction: column; background: #0d0d1a; min-width: 0; }
.vy-crm-chat-hd { display: flex; align-items: center; gap: .55rem; padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.vy-crm-chat-id { display: flex; flex-direction: column; gap: 1px; }
.vy-crm-chat-id .nm { font-size: .76rem; font-weight: 700; color: rgba(255,255,255,.88); }
.vy-crm-chat-id .st { display: flex; align-items: center; gap: .35rem; font-size: .58rem; color: rgba(34,197,94,.85); }
.vy-crm-chat-id .st .vy-live-dot { width: 6px; height: 6px; }
.vy-crm-msgs { flex: 1; display: flex; flex-direction: column; gap: .42rem; padding: .9rem 1rem; overflow: hidden; }
.vy-msg { max-width: 74%; padding: .48rem .7rem; border-radius: 13px; font-size: .68rem; line-height: 1.4; }
.vy-msg.in { align-self: flex-start; background: rgba(255,255,255,.06); color: rgba(255,255,255,.78); border-bottom-left-radius: 4px; }
.vy-msg.out { align-self: flex-end; background: linear-gradient(135deg,#2563eb,#6f6ffd); color: #fff; border-bottom-right-radius: 4px; }
.vy-crm-input { display: flex; align-items: center; justify-content: space-between; margin: 0 1rem .9rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 9px; padding: .5rem .7rem; font-size: .66rem; color: rgba(255,255,255,.3); }
.vy-crm-send { width: 26px; height: 26px; border-radius: 7px; background: var(--e-grad); display: flex; align-items: center; justify-content: center; }
.vy-crm-send svg { width: 13px; height: 13px; color: #fff; }
.vy-crm-info { background: #070810; border-left: 1px solid rgba(255,255,255,.05); padding: .9rem .9rem; display: flex; flex-direction: column; gap: .5rem; }
.vy-crm-info-hd { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.3); }
.vy-crm-info-hd.mt { margin-top: .6rem; }
.vy-crm-field { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; }
.vy-crm-field .l { color: rgba(255,255,255,.4); }
.vy-crm-field .v { color: rgba(255,255,255,.78); font-weight: 600; }
.vy-tag { font-size: .58rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.vy-tag.ok { background: rgba(34,197,94,.16); color: #5be39a; }
.vy-crm-ai { font-size: .66rem; line-height: 1.5; color: rgba(255,255,255,.5); background: rgba(37,99,235,.08); border: 1px solid rgba(37,99,235,.18); border-radius: 9px; padding: .55rem .65rem; }
.vy-crm-ai strong { color: rgba(255,255,255,.82); }

/* ---- Scene 2 · Automatización (node flow) ---- */
.vy-auto { display: grid; grid-template-columns: 210px 1fr; height: var(--scr-h); background: #0b0c18; overflow: hidden; }
.vy-auto-side { background: #070810; border-right: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; padding-bottom: .6rem; }
.vy-auto-side .vy-dash-brand { margin-bottom: .3rem; }
.vy-auto-side-it { display: flex; align-items: center; gap: .5rem; padding: .46rem 1rem; font-size: .7rem; color: rgba(255,255,255,.42); border-left: 2px solid transparent; }
.vy-auto-side-it.on { color: rgba(255,255,255,.9); background: rgba(37,99,235,.12); border-left-color: #2563eb; }
.vy-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); flex-shrink: 0; }
.vy-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.16); }
.vy-auto-canvas { display: flex; flex-direction: column; min-width: 0; background:
  radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 22px 22px,
  #0d0d1a; }
.vy-auto-toolbar { display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); }
.vy-auto-title { font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.9); }
.vy-auto-meta { font-size: .62rem; color: rgba(34,197,94,.8); }
.vy-auto-btn { margin-left: auto; background: var(--e-grad); color: #fff; font-size: .68rem; font-weight: 700; padding: .36rem .85rem; border-radius: 7px; }
.vy-auto-flow { position: relative; flex: 1; min-height: 0; }
.vy-auto-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.vy-auto-lines path { fill: none; stroke: rgba(56,189,248,.55); stroke-width: 2; }
.vy-node { position: absolute; width: 17%; min-width: 118px; display: flex; align-items: center; gap: .45rem; background: #141733; border: 1px solid rgba(120,140,255,.3); border-radius: 10px; padding: .5rem .55rem; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.vy-node.trigger { border-color: rgba(56,189,248,.45); background: #10233a; }
.vy-node.cond { border-color: rgba(251,191,36,.4); background: #2a2410; }
.vy-node-ico { width: 26px; height: 26px; border-radius: 7px; background: rgba(56,189,248,.9); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vy-node-ico svg { width: 14px; height: 14px; color: #04040b; }
.vy-node-ico.v { background: #2563eb; } .vy-node-ico.v svg { color: #fff; }
.vy-node-ico.c { background: #38bdf8; } .vy-node-ico.y { background: #fbbf24; } .vy-node-ico.g { background: #22c55e; }
.vy-node-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.vy-node-tt { font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vy-node-sb { font-size: .56rem; color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Scene 3 · Resultados (charts) ---- */
.vy-results { display: flex; flex-direction: column; gap: .6rem; height: var(--scr-h); padding: 1rem 1.2rem; background: #0d0d1a; overflow: hidden; }
.vy-res-top { display: flex; align-items: baseline; justify-content: space-between; }
.vy-res-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }
.vy-res-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: .55rem; flex: 1; min-height: 0; }
.vy-res-grid2 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: .55rem; }
.vy-res-card { background: rgba(255,255,255,.024); border: 1px solid rgba(255,255,255,.052); border-radius: 10px; padding: .7rem .8rem; display: flex; flex-direction: column; overflow: hidden; }
.vy-res-area { min-height: 0; }
.vy-area { width: 100%; flex: 1; min-height: 0; margin-top: .35rem; }
.vy-area-fill { fill: url(#vyAreaG); }
.vy-area-line { fill: none; stroke: #8b9bff; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(37,99,235,.6)); }
.vy-res-area-foot { display: flex; justify-content: space-between; font-size: .52rem; color: rgba(255,255,255,.22); margin-top: .25rem; }
.vy-funnel { display: flex; flex-direction: column; gap: .34rem; margin-top: .45rem; flex: 1; justify-content: center; }
.vy-funnel-seg { width: var(--w); margin: 0 auto; min-height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; padding: 0 .6rem; color: #fff; }
.vy-funnel-seg .fl { font-size: .62rem; font-weight: 600; opacity: .95; }
.vy-funnel-seg .fv { font-size: .66rem; font-weight: 800; }
.vy-res-stat { justify-content: center; }
.vy-res-donut { justify-content: center; }

/* ════════════════════════════════════════════════════════════
   6d. STORY · sticky scrollytelling (light, premium)
   ════════════════════════════════════════════════════════════ */
.vy-story { background: var(--e-bg); padding: 6.5rem 1.5rem 5.5rem; }
.vy-story-head { max-width: 800px; margin: 0 auto 2rem; text-align: center; }
.vy-story-head .section-kicker { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--e-blue); }
.vy-story-head h2 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--e-ink); line-height: 1.1; margin: .55rem 0 1rem; }
.vy-story-head-sub { color: var(--e-ink2); font-size: 1.08rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }

.vy-story-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.12fr; gap: 3.5rem; align-items: start; }

/* left · text steps */
.vy-story-step { min-height: 84vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; opacity: .32; transition: opacity .5s ease; }
.vy-story-step.is-active { opacity: 1; }
.vy-story-num { font-size: .78rem; font-weight: 800; letter-spacing: .22em; color: var(--e-blue); margin-bottom: .85rem; }
.vy-story-step h3 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; color: var(--e-ink); line-height: 1.12; margin: 0 0 1rem; }
.vy-story-lead { color: var(--e-ink2); font-size: 1.06rem; line-height: 1.7; margin: 0 0 1.3rem; }
.vy-story-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.vy-story-bullets li { position: relative; padding-left: 1.75rem; color: var(--e-ink2); font-size: .98rem; line-height: 1.5; }
.vy-story-bullets li::before { content: ""; position: absolute; left: 0; top: .3em; width: 13px; height: 13px; border-radius: 50%; background: var(--e-grad); box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.vy-story-bullets em { font-style: normal; color: var(--e-ink); font-weight: 600; }
.vy-story-shot-m { display: none; }

/* right · sticky visual */
.vy-story-visual { position: relative; }
.vy-story-sticky {
  position: sticky; top: 96px; width: 100%; aspect-ratio: 16 / 10; max-height: 78vh;
  border-radius: 18px; overflow: hidden; background: #fff;
  border: 1px solid var(--e-line); box-shadow: var(--e-sh-lg);
}
.vy-story-shot {
  position: absolute; inset: 0; opacity: 0;
  transform: translateY(16px) scale(.985); filter: blur(6px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}
.vy-story-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.vy-story-shot.on { opacity: 1; transform: none; filter: none; }
.vy-story-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; z-index: 3; }
.vy-story-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(9,16,31,.18); transition: all .3s; }
.vy-story-dots i.on { background: var(--e-blue); width: 22px; border-radius: 4px; }

@media (max-width: 900px) {
  .vy-story { padding: 4rem 1.25rem 3rem; }
  .vy-story-inner { grid-template-columns: 1fr; gap: 0; }
  .vy-story-visual { display: none; }           /* sticky column off on mobile */
  .vy-story-step { min-height: 0; opacity: 1; padding: 2.2rem 0 1rem; }
  .vy-story-shot-m { display: block; margin-top: 1.4rem; border-radius: 14px; overflow: hidden; border: 1px solid var(--e-line); box-shadow: var(--e-sh); }
  .vy-story-shot-m img { width: 100%; display: block; }
}

/* ── 6e. FEATURE ROWS · alternating image + text (reveal on scroll) ── */
.vy-ferows { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(4.5rem, 10vh, 9rem); }
.vy-ferow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.vy-ferow.rev .vy-ferow-visual { order: 2; }     /* image on the right */
.vy-ferow-visual {
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid var(--e-line); box-shadow: var(--e-sh-lg);
  opacity: 0; transform: translateY(30px) scale(.97);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.vy-ferow-visual img { width: 100%; display: block; }
.vy-ferow-text { opacity: 0; transform: translateY(22px); transition: opacity .7s ease .1s, transform .7s ease .1s; }
.vy-ferow.in .vy-ferow-visual, .vy-ferow.in .vy-ferow-text { opacity: 1; transform: none; }
.vy-ferow-text h3 { font-size: clamp(1.5rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -0.03em; color: var(--e-ink); line-height: 1.12; margin: 0 0 1rem; }

@media (max-width: 900px) {
  .vy-ferow { grid-template-columns: 1fr; gap: 1.5rem; }
  .vy-ferow.rev .vy-ferow-visual { order: 0; }   /* image always on top on mobile */
  .vy-ferow-visual, .vy-ferow-text { transform: translateY(20px); }
  .vy-ferow.in .vy-ferow-visual, .vy-ferow.in .vy-ferow-text { transform: none; }
}

/* ── 7. SOCIAL PROOF ──────────────────────────────────────── */
.vy-social-proof { position: relative; overflow: hidden; background: var(--e-dark2); padding: 5.5rem 1.5rem 5rem; border-top: 1px solid var(--e-line-dark); }
.vy-sp-inner { max-width: 780px; margin: 0 auto 3.2rem; text-align: center; }
.vy-sp-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; color: var(--e-cyan); margin-bottom: .9rem; }
.vy-sp-inner h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -0.035em; color: rgba(255,255,255,.94); line-height: 1.16; }
.vy-sp-sub { margin-top: 1.1rem; font-size: 1.02rem; line-height: 1.65; color: rgba(255,255,255,.55); max-width: 660px; margin-left: auto; margin-right: auto; }
.vy-social-proof .vy-marquee { background: transparent; border: none; padding: 0; }
.vy-social-proof .vy-marquee::before { background: linear-gradient(90deg, var(--e-dark2), transparent); }
.vy-social-proof .vy-marquee::after  { background: linear-gradient(270deg, var(--e-dark2), transparent); }
.vy-social-proof .vy-marquee-item { color: rgba(255,255,255,.28); }
.vy-social-proof .vy-marquee-item:hover { color: rgba(255,255,255,.7); }
.vy-social-proof .vy-marquee-logo { filter: brightness(0) invert(1); opacity: .28; }
.vy-social-proof .vy-marquee-item:hover .vy-marquee-logo { opacity: .72; }

/* ── 8. SECTION BACKGROUNDS ───────────────────────────────── */
body.vy-enterprise .services,
body.vy-enterprise .calculator,
body.vy-enterprise .contact-form { background: var(--e-bg); }
body.vy-enterprise .benefits      { background: var(--e-bg2); }
body.vy-enterprise .testimonials  { background: var(--e-dark); }
body.vy-enterprise .final-cta     { background: var(--e-bg); border-top: 1px solid var(--e-line); }
body.vy-enterprise .services .vy-glow,
body.vy-enterprise .benefits .vy-glow,
body.vy-enterprise .calculator .vy-glow,
body.vy-enterprise .final-cta .vy-glow { display: none; }
body.vy-enterprise .section-title h2 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -0.04em; color: var(--e-ink); }
body.vy-enterprise .section-subtitle { color: var(--e-ink2); font-size: 1.05rem; }
body.vy-enterprise .testimonials .section-title h2 { color: #fff; }
body.vy-enterprise .testimonials .section-subtitle { color: rgba(255,255,255,.5); }
body.vy-enterprise .contact-form .section-title h2 { color: var(--e-ink); }
body.vy-enterprise .contact-form .section-subtitle { color: var(--e-ink2) !important; }

/* ── 9. SERVICES ──────────────────────────────────────────── */
body.vy-enterprise .service-card { background: #fff; border: 1px solid var(--e-line); box-shadow: var(--e-sh); border-radius: 20px; }
body.vy-enterprise .service-card:hover { border-color: rgba(37,99,235,.22); box-shadow: 0 2px 6px rgba(9,16,31,.04), 0 30px 72px rgba(9,16,31,.11); transform: translateY(-4px); }
body.vy-enterprise .service-card h3 { color: var(--e-ink); }
body.vy-enterprise .service-card p { color: var(--e-ink2); }
body.vy-enterprise .service-label { background: rgba(37,99,235,.08); color: var(--e-blue); }
body.vy-enterprise .vy-tilt-shine { background: radial-gradient(circle at var(--shine-x,50%) var(--shine-y,50%), rgba(37,99,235,.07) 0%, transparent 60%); }

/* ── 10. BENEFITS ─────────────────────────────────────────── */
body.vy-enterprise .benefit-card { background: #fff; border: 1px solid var(--e-line); box-shadow: var(--e-sh); border-radius: 20px; }
body.vy-enterprise .benefit-card:hover { border-color: rgba(37,99,235,.2); box-shadow: 0 2px 6px rgba(9,16,31,.04), 0 28px 72px rgba(9,16,31,.1); }
body.vy-enterprise .benefit-card h3 { color: var(--e-ink); }
body.vy-enterprise .benefit-description { color: var(--e-ink2); }
body.vy-enterprise .benefit-example { background: var(--e-bg2); border-left: 3px solid var(--e-blue); color: var(--e-ink2); }
body.vy-enterprise .benefit-metric-number { background: var(--e-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.vy-enterprise .benefit-metric-unit { color: var(--e-blue); }

/* ── 11. CALCULATOR ───────────────────────────────────────── */
body.vy-enterprise .calculator-input-card, body.vy-enterprise .calculator-result-card { background: #fff; border: 1px solid var(--e-line); box-shadow: var(--e-sh-sm); }
body.vy-enterprise .calculator-btn { background: var(--e-bg2); border: 1px solid var(--e-line); color: var(--e-ink); }
body.vy-enterprise .calculator-btn:hover { background: #fff; border-color: var(--e-blue); }
body.vy-enterprise .calculator-value { color: var(--e-blue); }
body.vy-enterprise .calculator-label { color: var(--e-ink2); }
body.vy-enterprise .calculator-result-value { color: var(--e-ink); }
body.vy-enterprise .cta-box { background: linear-gradient(145deg,#0e1132,#0a0d26); border: none; box-shadow: 0 30px 80px rgba(9,16,31,.2); }
body.vy-enterprise .cta-box h3 { color: #fff !important; }
body.vy-enterprise .cta-box p  { color: rgba(255,255,255,.6) !important; }

/* ── 12. TESTIMONIALS ─────────────────────────────────────── */
body.vy-enterprise .testimonial-card { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.062); border-radius: 20px; }
body.vy-enterprise .testimonial-card:hover { border-color: rgba(37,99,235,.28); }
body.vy-enterprise .testimonial-text { color: rgba(255,255,255,.76); }
body.vy-enterprise .testimonial-name { color: rgba(255,255,255,.88); }
body.vy-enterprise .testimonial-role { color: rgba(255,255,255,.36); }
body.vy-enterprise .vy-carousel-btn { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); color: rgba(255,255,255,.62); }
body.vy-enterprise .vy-carousel-btn:hover { border-color: rgba(37,99,235,.38); color: #fff; }

/* ── 13. CONTACT FORM ─────────────────────────────────────── */
body.vy-enterprise .form-card { background: #fff; border: 1px solid var(--e-line); box-shadow: var(--e-sh-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.vy-enterprise .form-card h3 { color: var(--e-ink); }
body.vy-enterprise .form-description { color: var(--e-ink2); }
body.vy-enterprise .form-label { color: var(--e-ink); }
body.vy-enterprise .form-input, body.vy-enterprise .form-textarea { background: var(--e-bg2); border: 1px solid var(--e-line); color: var(--e-ink); }
body.vy-enterprise .form-input::placeholder, body.vy-enterprise .form-textarea::placeholder { color: var(--e-ink3); }
body.vy-enterprise .form-input:focus, body.vy-enterprise .form-textarea:focus { background: #fff; border-color: rgba(37,99,235,.44); box-shadow: 0 0 0 3px rgba(37,99,235,.1); color: var(--e-ink); }
body.vy-enterprise .form-option { background: var(--e-bg2); border: 1px solid var(--e-line); color: var(--e-ink2); }
body.vy-enterprise .form-option:hover { border-color: rgba(37,99,235,.32); background: rgba(37,99,235,.05); color: var(--e-ink); }
body.vy-enterprise .form-note { color: var(--e-ink3); }
body.vy-enterprise .contact-form::before { background: linear-gradient(90deg, transparent, rgba(37,99,235,.28), rgba(56,189,248,.28), transparent); }

/* ── 14. FINAL CTA + STATS ────────────────────────────────── */
body.vy-enterprise .final-cta h2 { color: var(--e-ink); }
body.vy-enterprise .final-cta-description { color: var(--e-ink2); }
body.vy-enterprise .stat-card { background: #fff; border: 1px solid var(--e-line); box-shadow: var(--e-sh); border-radius: 20px; }
body.vy-enterprise .stat-card:hover { border-color: rgba(37,99,235,.28); box-shadow: 0 2px 6px rgba(9,16,31,.04), 0 24px 60px rgba(9,16,31,.1); }
body.vy-enterprise .stat-number { background: var(--e-grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
body.vy-enterprise .stat-label { color: var(--e-ink2); }

/* ── 15. FOOTER (light) ───────────────────────────────────── */
body.vy-enterprise .footer { background: var(--e-bg); border-top: 1px solid var(--e-line); }
body.vy-enterprise .footer, body.vy-enterprise .footer p { color: var(--e-ink2); }
body.vy-enterprise .footer h4 { color: var(--e-ink); }
body.vy-enterprise .footer a { color: var(--e-ink2); }
body.vy-enterprise .footer a:hover { color: var(--e-blue); }
body.vy-enterprise .footer-bottom { border-top: 1px solid var(--e-line); }
body.vy-enterprise .footer-bottom p { color: var(--e-ink3); }

/* ── 16. RESPONSIVE / FALLBACK ────────────────────────────── */
@media (max-width: 1024px) {
  .vy-screen-scene { width: 94vw; }
  .vy-dash { grid-template-columns: 1fr; }
  .vy-dash-sidebar { display: none; }
}
@media (max-width: 900px) {
  /* Keep the cinematic pin on phones, just lighter and shorter */
  .vy-cine { height: 240vh; }
  .vy-cine-stage { height: 100vh; height: 100svh; min-height: 540px; }
  .vy-cockpit-photo { background-position: center center; }
  .vy-cine-hero { padding: 90px 1.25rem 12vh; }
  .vy-cine-hero h1 { font-size: clamp(2rem, 9vw, 3.1rem); }
  .vy-cine-hero .sub { font-size: 1rem; }
  #vyGalaxyCanvas { display: none; }
  /* dashboards fit the small viewport */
  .vy-screen-scene { width: 94vw; }
  .vy-crm, .vy-auto, .vy-results { height: 64vh; max-height: 480px; }
  /* CRM: keep list + chat only */
  .vy-crm { grid-template-columns: 130px 1fr; }
  .vy-crm-rail, .vy-crm-info { display: none; }
  /* Automation: drop the side panel, smaller nodes */
  .vy-auto { grid-template-columns: 1fr; }
  .vy-auto-side { display: none; }
  .vy-node { min-width: 92px; padding: .4rem .42rem; }
  .vy-node-tt { font-size: .6rem; } .vy-node-sb { font-size: .5rem; }
  /* Results: stack the charts */
  .vy-res-grid { grid-template-columns: 1fr; }
  .vy-res-grid2 { grid-template-columns: 1fr 1fr; }
  .vy-res-grid2 .vy-res-donut { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .vy-dash-kpis { grid-template-columns: repeat(2,1fr); }
  .vy-dash-mid { grid-template-columns: 1fr; }
  .vy-dash-mid .vy-dash-card:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vy-cine { height: auto; }
  .vy-cine-stage { position: relative; height: 100vh; min-height: 560px; display: block; }
  .vy-zoom { transform: none !important; filter: none !important; }
  .vy-cine-hero { position: absolute; inset: 0; }
  .vy-screens { display: none; }
  #vyGalaxyCanvas { display: none; }
  .vy-live-dot, .vy-scroll-cue-mouse i { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   17. NORMAL CURSOR (disable the custom cursor on the home)
   ════════════════════════════════════════════════════════════ */
body.vy-enterprise #vyCursor { display: none !important; }
body.vy-enterprise.has-custom-cursor,
body.vy-enterprise.has-custom-cursor * { cursor: auto !important; }
body.vy-enterprise.has-custom-cursor a,
body.vy-enterprise.has-custom-cursor button,
body.vy-enterprise.has-custom-cursor [data-vy-scroll],
body.vy-enterprise.has-custom-cursor [role="button"],
body.vy-enterprise.has-custom-cursor label,
body.vy-enterprise.has-custom-cursor summary,
body.vy-enterprise.has-custom-cursor .vy-lang button,
body.vy-enterprise.has-custom-cursor .menu-toggle { cursor: pointer !important; }
body.vy-enterprise.has-custom-cursor input:not([type=checkbox]):not([type=radio]),
body.vy-enterprise.has-custom-cursor textarea { cursor: text !important; }

/* ════════════════════════════════════════════════════════════
   18. COOKIE BANNER — light, tech, matches the new home
   ════════════════════════════════════════════════════════════ */
body.vy-enterprise #vy-cb-banner {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--e-line);
  box-shadow: 0 24px 60px rgba(9,16,31,.16), 0 1px 0 rgba(9,16,31,.04) inset;
  color: var(--e-ink2);
}
body.vy-enterprise #vy-cb-banner::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(90deg, transparent, var(--e-cyan), var(--e-blue), transparent);
  opacity: .85;
}
body.vy-enterprise .vy-cb-title { color: var(--e-ink); }
body.vy-enterprise .vy-cb-text { color: var(--e-ink2); }
body.vy-enterprise .vy-cb-text a { color: var(--e-blue); text-decoration-color: rgba(37,99,235,.4); }
body.vy-enterprise .vy-cb-text a:hover { color: #1d4ed8; }
body.vy-enterprise .vy-cb-btn-primary { background: var(--e-blue); color: #fff; box-shadow: 0 6px 18px rgba(37,99,235,.22); }
body.vy-enterprise .vy-cb-btn-primary:hover { background: #1d4ed8; box-shadow: 0 10px 22px rgba(37,99,235,.3); }
body.vy-enterprise .vy-cb-btn-secondary { background: var(--e-bg2); color: var(--e-ink); border-color: var(--e-line); }
body.vy-enterprise .vy-cb-btn-secondary:hover { background: #fff; border-color: rgba(37,99,235,.3); }
body.vy-enterprise .vy-cb-btn-ghost { color: var(--e-ink2); }
body.vy-enterprise .vy-cb-btn-ghost:hover { color: var(--e-ink); background: var(--e-bg2); }

/* Cookie settings modal — light */
body.vy-enterprise #vy-cb-modal .vy-cb-modal-panel { background: #fff; border-color: var(--e-line); box-shadow: 0 40px 90px rgba(9,16,31,.28); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-head { border-bottom-color: var(--e-line); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-head h2,
body.vy-enterprise #vy-cb-modal .vy-cb-cat-head h3 { color: var(--e-ink); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-body,
body.vy-enterprise #vy-cb-modal .vy-cb-modal-fine,
body.vy-enterprise #vy-cb-modal .vy-cb-cat-desc,
body.vy-enterprise #vy-cb-modal .vy-cb-cat-lock { color: var(--e-ink2); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-x { color: var(--e-ink3); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-x:hover { color: var(--e-ink); background: var(--e-bg2); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-fine a { color: var(--e-blue); }
body.vy-enterprise #vy-cb-modal .vy-cb-cat { background: var(--e-bg2); border-color: var(--e-line); }
body.vy-enterprise #vy-cb-modal .vy-cb-switch-track { background: rgba(9,16,31,.18); }
body.vy-enterprise #vy-cb-modal .vy-cb-switch-knob { background: #fff; box-shadow: 0 1px 3px rgba(9,16,31,.35); }
body.vy-enterprise #vy-cb-modal .vy-cb-switch input:checked + .vy-cb-switch-track { background: var(--e-blue); }
body.vy-enterprise #vy-cb-modal .vy-cb-modal-foot { border-top-color: var(--e-line); background: var(--e-bg2); }

/* ════════════════════════════════════════════════════════════
   19. MOBILE — header + menu in light (home)
   ════════════════════════════════════════════════════════════ */
body.vy-enterprise .header.scrolled {
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 1px 0 rgba(9,16,31,.07), 0 4px 20px rgba(9,16,31,.05) !important;
}
body.vy-enterprise .mobile-menu {
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.vy-enterprise .mobile-menu a { color: var(--e-ink); }
body.vy-enterprise .mobile-menu a:hover { color: var(--e-blue); }
body.vy-enterprise .mobile-menu a.btn-primary { color: #fff; }
body.vy-enterprise .mobile-menu .vy-lang { margin-left: 0; margin-top: .4rem; }
body.vy-enterprise .mobile-menu .vy-lang button { color: var(--e-ink3); font-size: 1rem; }
body.vy-enterprise .mobile-menu .vy-lang button.on { color: var(--e-blue); }

/* ════════════════════════════════════════════════════════════
   20. INNER PAGES — light enterprise look.
       Scoped to body.vy-inner AND to <main> so the chatbot, header,
       footer and cookie banner (all outside <main>) keep their own
       global enterprise styling — identical to the home.
   ════════════════════════════════════════════════════════════ */
body.vy-inner { background: var(--e-bg); color: var(--e-ink); }
body.vy-inner main { color: var(--e-ink2); }

/* sections → white / off-white alternating */
body.vy-inner main section { background: var(--e-bg) !important; }
body.vy-inner main > section:nth-of-type(even) { background: var(--e-bg2) !important; }

/* headings + strong labels → near-black */
body.vy-inner main h1, body.vy-inner main h2, body.vy-inner main h3,
body.vy-inner main h4, body.vy-inner main h5,
body.vy-inner main [class*="title"], body.vy-inner main [class*="name"],
body.vy-inner main [class*="heading"] { color: var(--e-ink) !important; }

/* body / secondary text → ink2 */
body.vy-inner main p, body.vy-inner main li, body.vy-inner main blockquote,
body.vy-inner main figcaption, body.vy-inner main td, body.vy-inner main dd,
body.vy-inner main [class*="text"], body.vy-inner main [class*="label"],
body.vy-inner main [class*="-num"], body.vy-inner main [class*="desc"],
body.vy-inner main [class*="subtitle"], body.vy-inner main [class*="-sub"],
body.vy-inner main [class*="lead"], body.vy-inner main [class*="excerpt"],
body.vy-inner main [class*="meta"], body.vy-inner main [class*="-tag"],
body.vy-inner main [class*="-copy"], body.vy-inner main [class*="-body"],
body.vy-inner main .hero-description,
body.vy-inner main .vy-marquee-item, body.vy-inner main .vy-marquee-name { color: var(--e-ink2) !important; }

body.vy-inner main .gradient-text { -webkit-text-fill-color: transparent !important; }

/* remove dark decoration */
body.vy-inner main .hero-bg, body.vy-inner main .vy-hero-grid,
body.vy-inner main .vy-glow, body.vy-inner main [class*="-blob"] { display: none !important; }

/* badges / pills / ghost button */
body.vy-inner main .badge { background: rgba(37,99,235,.08); color: var(--e-blue) !important; border: 1px solid rgba(37,99,235,.22); }
body.vy-inner main .vy-tech-pill { background: #fff; color: var(--e-ink) !important; border: 1px solid var(--e-line); box-shadow: var(--e-sh-sm); }
body.vy-inner main .vy-tech-pill-dot { background: var(--e-blue); }
body.vy-inner main .btn-ghost { border-color: rgba(9,16,31,.16); color: var(--e-ink) !important; background: #fff; }
body.vy-inner main .btn-ghost:hover { border-color: rgba(37,99,235,.4); color: var(--e-blue) !important; }

/* containers / cards / boxes → white with soft border */
body.vy-inner main [class*="card"], body.vy-inner main [class*="-box"],
body.vy-inner main .vy-step-item, body.vy-inner main .vy-timeline-item,
body.vy-inner main .sn-stat-card, body.vy-inner main .sn-diff-card, body.vy-inner main .sn-eco-card,
body.vy-inner main .ct-method, body.vy-inner main .ct-hero-stat, body.vy-inner main .ct-trust-stat,
body.vy-inner main .services-detail-inner, body.vy-inner main .stat,
body.vy-inner main [class*="-panel"], body.vy-inner main [class*="-block"] {
  background: #fff !important; border: 1px solid var(--e-line) !important; box-shadow: var(--e-sh);
}
body.vy-inner main .sn-eco-tag { background: rgba(37,99,235,.07) !important; border-color: rgba(37,99,235,.18) !important; color: var(--e-blue) !important; }

/* key figures → blue gradient (after generic rules so they win) */
body.vy-inner main .stat-number, body.vy-inner main .stat-value,
body.vy-inner main .sn-stat-number, body.vy-inner main .ct-method-value,
body.vy-inner main .ct-hero-stat-value, body.vy-inner main .ct-trust-stat-value,
body.vy-inner main .vy-step-num {
  background: var(--e-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent !important; color: var(--e-blue) !important;
}

/* article prose links */
body.vy-inner main .article-body a, body.vy-inner main a.article-read-more,
body.vy-inner main .article-category { color: var(--e-blue) !important; }
body.vy-inner main .article-cover { border-bottom: 1px solid var(--e-line); }

/* icons on gradient chips stay white */
body.vy-inner main .sn-diff-icon, body.vy-inner main .sn-eco-icon, body.vy-inner main .ct-method-icon,
body.vy-inner main .ct-trust-stat-icon, body.vy-inner main .article-cover-icon,
body.vy-inner main .service-icon { color: #fff; }

/* servicios hero → centered like the home (no floating right visual) */
body.vy-inner .sv-hero .hero-visual { display: none !important; }
body.vy-inner .sv-hero .hero-content { grid-template-columns: 1fr !important; text-align: center; max-width: 880px; margin: 0 auto; }

/* clean light marquee logos */
body.vy-inner main .vy-marquee-logo { filter: grayscale(1); opacity: .55; transition: filter .2s, opacity .2s; }
body.vy-inner main .vy-marquee-item:hover .vy-marquee-logo { filter: none; opacity: 1; }

/* testimonial avatar — keep a perfect circle (don't squash on mobile) */
body.vy-enterprise .testimonial-avatar { flex-shrink: 0; aspect-ratio: 1 / 1; }

/* ════════════════════════════════════════════════════════════
   21. SERVICIOS — ajustes dedicados (enterprise, claro)
   ════════════════════════════════════════════════════════════ */
/* Carrusel de apps: bordes en blanco (no negro) + logos legibles */
body.vy-inner main section.vy-marquee { background: var(--e-bg) !important; }
body.vy-inner main .vy-marquee::before { background: linear-gradient(90deg, var(--e-bg), transparent) !important; }
body.vy-inner main .vy-marquee::after  { background: linear-gradient(270deg, var(--e-bg), transparent) !important; }
body.vy-inner main .vy-marquee-logo { filter: none; opacity: .85; }
body.vy-inner main .vy-marquee-item:hover .vy-marquee-logo { opacity: 1; }

/* Hero: subtítulo perfectamente centrado bajo el titular */
body.vy-inner .sv-hero .hero-content > div {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}
body.vy-inner .sv-hero .hero-description {
  max-width: 680px; margin-left: auto; margin-right: auto; text-align: center;
}

/* Service cards (sv-services): cada icono con su color fijo (no solo al hover).
   Al pasar el ratón la tarjeta solo se eleva: el color ya está puesto. */
body.vy-inner main .sv-icon-wrap {
  border: 1px solid currentColor !important; box-shadow: none !important;
  transition: transform .3s var(--ease-spring) !important;
}
body.vy-inner main .sv-services .service-card:hover .sv-icon-wrap {
  transform: scale(1.06) translateY(-2px) !important; box-shadow: none !important;
}
/* el resplandor de color en la esquina queda siempre apagado → look limpio */
body.vy-inner main .sv-services .service-card::before { opacity: 0 !important; }

body.vy-inner main .sv-services .service-card:nth-child(1) .sv-icon-wrap { color:#2563eb !important; background:rgba(37,99,235,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(2) .sv-icon-wrap { color:#0ea5e9 !important; background:rgba(14,165,233,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(3) .sv-icon-wrap { color:#6366f1 !important; background:rgba(99,102,241,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(4) .sv-icon-wrap { color:#ec4899 !important; background:rgba(236,72,153,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(5) .sv-icon-wrap { color:#14b8a6 !important; background:rgba(20,184,166,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(6) .sv-icon-wrap { color:#f59e0b !important; background:rgba(245,158,11,.11) !important; }
body.vy-inner main .sv-services .service-card:nth-child(7) .sv-icon-wrap { color:#8b5cf6 !important; background:rgba(139,92,246,.10) !important; }
body.vy-inner main .sv-services .service-card:nth-child(8) .sv-icon-wrap { color:#22c55e !important; background:rgba(34,197,94,.11) !important; }

body.vy-inner main .sv-services .service-label { background: rgba(37,99,235,.08) !important; color: var(--e-blue) !important; border: none !important; }

/* Pasos (Auditoría / Diseño / …) → banda oscura tech + tarjetas dinámicas.
   Cada paso: acento azul superior siempre visible, gran número de marca de
   agua (counter), línea de proceso que conecta los 4 y elevación al hover. */
body.vy-inner main section.vy-steps-section {
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(ellipse 60% 120% at 92% 100%, rgba(56,189,248,.16), transparent 60%),
    var(--e-dark) !important;
  padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; overflow: hidden;
}
body.vy-inner main .vy-steps-grid { counter-reset: vystep; position: relative; }
/* línea de proceso horizontal (solo desktop, detrás de las tarjetas) */
@media (min-width: 1024px) {
  body.vy-inner main .vy-steps-grid::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: 2.1rem; height: 2px; z-index: 0;
    background: linear-gradient(90deg, transparent, rgba(56,189,248,.45) 12%, rgba(37,99,235,.45) 88%, transparent);
  }
}
body.vy-inner main .vy-step-item {
  counter-increment: vystep; position: relative; z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 55px rgba(0,0,0,.45) !important;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 2.6rem 1.6rem 1.7rem !important;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s !important;
}
/* acento azul superior — siempre encendido */
body.vy-inner main .vy-step-item::after {
  display: block !important; content: ""; position: absolute; top: 0; left: 1.6rem; right: 1.6rem;
  height: 3px; border-radius: 0 0 4px 4px; opacity: 1 !important;
  background: var(--e-grad) !important;
}
/* número grande de marca de agua */
body.vy-inner main .vy-step-item::before {
  content: counter(vystep, decimal-leading-zero);
  position: absolute; top: .7rem; right: 1.1rem; z-index: 0;
  font-size: 3.4rem; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; background: var(--e-grad); -webkit-background-clip: text; background-clip: text;
  opacity: .22; pointer-events: none;
}
body.vy-inner main .vy-step-item:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(56,189,248,.4) !important;
  box-shadow: 0 30px 65px rgba(0,0,0,.55), 0 0 0 1px rgba(56,189,248,.18) !important;
}
/* texto sobre fondo oscuro */
body.vy-inner main .vy-steps-section .vy-step-num {
  position: relative; z-index: 1;
  -webkit-text-fill-color: transparent !important; background: var(--e-grad);
  -webkit-background-clip: text; background-clip: text;
}
body.vy-inner main .vy-steps-section .vy-step-title { position: relative; z-index: 1; color: #fff !important; font-size: 1.18rem !important; }
body.vy-inner main .vy-steps-section .vy-step-text  { position: relative; z-index: 1; color: rgba(255,255,255,.6) !important; }

/* "Cómo aplicamos estos servicios" — sin contenedor visible: las 6 tarjetas
   flotan. (El grid heredaba caja blanca de la regla genérica de section 20.) */
body.vy-inner main .services-detail-inner {
  background: none !important; border: none !important; box-shadow: none !important;
}
/* tarjetas limpias (arregla cuadrado/rectángulo) */
body.vy-inner main .detail-block { background: #fff !important; border: 1px solid var(--e-line) !important; box-shadow: var(--e-sh) !important; border-radius: 18px; }
body.vy-inner main .detail-block-bg-num {
  background: none !important; border: none !important; box-shadow: none !important;
  color: rgba(37,99,235,.09) !important; -webkit-text-fill-color: rgba(37,99,235,.09) !important;
  font-size: 4.5rem; top: .5rem; right: 1.1rem;
}
body.vy-inner main .detail-block-num {
  background: none !important; border: none !important; box-shadow: none !important;
  color: var(--e-blue) !important;
}
body.vy-inner main .detail-block-num::after { background: linear-gradient(90deg, rgba(37,99,235,.35), transparent) !important; }
body.vy-inner main .detail-list, body.vy-inner main .detail-list li { color: var(--e-ink2) !important; }