/* VERTIKO POLISH v2 - Command Center MAX */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root{
  --vk-teal:#0d9488;
  --vk-teal-2:#14b8a6;
  --vk-teal-3:#2dd4bf;
  --vk-cyan:#06b6d4;
  --vk-glow: 0 0 0 1px rgba(13,148,136,.4), 0 0 20px -4px rgba(13,148,136,.6), 0 0 40px -8px rgba(45,212,191,.5), 0 0 60px -16px rgba(6,182,212,.4);
}

html{scroll-behavior:smooth}

/* ===== A1: Grid técnico animado en hero ===== */
.vk-grid-bg{position:relative;isolation:isolate}
.vk-grid-bg::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(13,148,136,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13,148,136,.06) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  animation: vk-grid-shift 25s linear infinite;
  pointer-events:none;z-index:-1;
}
@keyframes vk-grid-shift{0%{transform:translate(0,0)}100%{transform:translate(48px,48px)}}

/* ===== A2: Partículas teal flotantes (CSS only) ===== */
.vk-particles{position:relative;overflow:hidden}
.vk-particles::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(13,148,136,.25) 1px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(45,212,191,.2) 1px, transparent 2px),
    radial-gradient(circle at 80% 20%, rgba(6,182,212,.18) 1px, transparent 2px),
    radial-gradient(circle at 35% 80%, rgba(13,148,136,.22) 1px, transparent 2px),
    radial-gradient(circle at 90% 50%, rgba(45,212,191,.2) 1px, transparent 2px);
  background-size: 200px 200px, 250px 250px, 180px 180px, 220px 220px, 300px 300px;
  animation: vk-float 30s linear infinite;
  pointer-events:none;z-index:-1;
}
@keyframes vk-float{
  0%{background-position:0 0, 0 0, 0 0, 0 0, 0 0}
  100%{background-position:200px -200px, -250px 250px, 180px -180px, -220px 220px, 300px -300px}
}

/* ===== A3: Gradient mesh animado ===== */
.vk-mesh-bg{position:relative}
.vk-mesh-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(at 20% 20%, rgba(13,148,136,.10) 0%, transparent 50%),
    radial-gradient(at 80% 30%, rgba(45,212,191,.08) 0%, transparent 50%),
    radial-gradient(at 50% 80%, rgba(6,182,212,.08) 0%, transparent 50%);
  animation: vk-mesh 20s ease-in-out infinite alternate;
  pointer-events:none;z-index:-1;
}
@keyframes vk-mesh{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(20px,-20px) scale(1.1)}
}

/* ===== B1: Live ticker bar ===== */
#vk-ticker{
  position:fixed;top:0;left:0;right:0;
  background:linear-gradient(90deg, rgba(15,23,42,.95), rgba(15,23,42,.98), rgba(15,23,42,.95));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(13,148,136,.25);
  color:#e2e8f0;font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;
  padding:6px 16px;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;
  letter-spacing:.04em;
  animation:vk-slide-down .8s ease-out;
}
@keyframes vk-slide-down{from{transform:translateY(-100%)}to{transform:translateY(0)}}
#vk-ticker span{display:inline-flex;align-items:center;gap:6px}
#vk-ticker .vk-tick-label{color:#94a3b8;text-transform:uppercase;font-size:9px;letter-spacing:.08em}
#vk-ticker .vk-tick-val{color:#2dd4bf;font-weight:600}
body.vk-has-ticker{padding-top:32px}
@media(max-width:640px){#vk-ticker{font-size:9px;gap:12px;padding:5px 8px}body.vk-has-ticker{padding-top:28px}}

/* ===== B2: Halo hero radial ===== */
.vk-hero-halo{position:relative;isolation:isolate}
.vk-hero-halo::after{
  content:"";position:absolute;inset:-10%;
  background:radial-gradient(50% 50% at 30% 40%, rgba(13,148,136,.18) 0%, rgba(45,212,191,.08) 30%, transparent 70%);
  pointer-events:none;z-index:-1;
  animation:vk-halo-pulse 8s ease-in-out infinite alternate;
}
@keyframes vk-halo-pulse{
  0%{opacity:.6;transform:scale(1)}
  100%{opacity:1;transform:scale(1.1)}
}

/* ===== C1: Glow neón multi-capa en CTAs ===== */
.bg-vk-primary, button.bg-vk-primary, a.bg-vk-primary{
  position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset, 0 4px 12px -4px rgba(13,148,136,.4);
}
.bg-vk-primary:hover, button.bg-vk-primary:hover, a.bg-vk-primary:hover{
  transform:translateY(-2px);
  box-shadow: var(--vk-glow);
  filter:brightness(1.08) saturate(1.1);
}
.bg-vk-primary::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform:translateX(-100%);transition:transform .6s;pointer-events:none;
}
.bg-vk-primary:hover::before{transform:translateX(100%)}

/* ===== C2: Hover 3D tilt en cards ===== */
.rounded-lg.border, .rounded-xl.border, .rounded-2xl.border{
  transition:transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s, border-color .3s;
  transform-style:preserve-3d;
  will-change:transform;
}
.rounded-lg.border:hover, .rounded-xl.border:hover, .rounded-2xl.border:hover{
  transform:translateY(-4px) scale(1.01);
  box-shadow: 0 20px 50px -20px rgba(13,148,136,.25), 0 4px 12px -4px rgba(15,23,42,.1);
  border-color: rgba(13,148,136,.35);
}

/* ===== C3: Gradient border animado en cards destacadas ===== */
.vk-grad-border{position:relative;background-clip:padding-box;border:1px solid transparent !important}
.vk-grad-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--vk-angle,0deg), transparent, rgba(13,148,136,.6), transparent, rgba(45,212,191,.5), transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:vk-rotate 8s linear infinite;pointer-events:none;
}
@property --vk-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes vk-rotate{to{--vk-angle:360deg}}

/* ===== D1/D2: Mono numbers + counter ===== */
.vk-mono, .vk-mono *, .vk-num{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace !important;font-variant-numeric:tabular-nums}

/* ===== D3: Typing animation cursor ===== */
.vk-typing::after{content:"|";color:var(--vk-teal-2);animation:vk-blink 1s step-end infinite;margin-left:2px}
@keyframes vk-blink{50%{opacity:0}}

/* ===== E1: Section dividers ===== */
.vk-divider{position:relative;text-align:center;margin:48px auto;max-width:200px}
.vk-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(13,148,136,.4),transparent)}
.vk-divider::after{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--vk-teal-2);margin:0 auto;box-shadow:0 0 12px rgba(13,148,136,.6);position:relative;animation:vk-pulse-dot 2s infinite}
@keyframes vk-pulse-dot{0%,100%{box-shadow:0 0 12px rgba(13,148,136,.6)}50%{box-shadow:0 0 20px rgba(13,148,136,.9)}}

/* ===== E2: Scroll reveal con stagger ===== */
[data-vk-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1)}
[data-vk-reveal].vk-shown{opacity:1;transform:translateY(0)}
[data-vk-reveal-stagger] > *{opacity:0;transform:translateY(20px);transition:opacity .7s, transform .7s}
[data-vk-reveal-stagger].vk-shown > *{opacity:1;transform:translateY(0)}
[data-vk-reveal-stagger].vk-shown > *:nth-child(1){transition-delay:.05s}
[data-vk-reveal-stagger].vk-shown > *:nth-child(2){transition-delay:.12s}
[data-vk-reveal-stagger].vk-shown > *:nth-child(3){transition-delay:.19s}
[data-vk-reveal-stagger].vk-shown > *:nth-child(4){transition-delay:.26s}
[data-vk-reveal-stagger].vk-shown > *:nth-child(5){transition-delay:.33s}
[data-vk-reveal-stagger].vk-shown > *:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){[data-vk-reveal],[data-vk-reveal-stagger] > *{opacity:1 !important;transform:none !important;transition:none !important}}

/* ===== F1: Custom cursor (desktop only) ===== */
@media(hover:hover) and (pointer:fine){
  body.vk-cursor-active{cursor:none}
  #vk-cursor{position:fixed;width:8px;height:8px;border-radius:50%;background:var(--vk-teal-2);pointer-events:none;z-index:9998;mix-blend-mode:difference;transition:transform .1s ease-out;transform:translate(-50%,-50%)}
  #vk-cursor-ring{position:fixed;width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(45,212,191,.4);pointer-events:none;z-index:9997;transition:transform .25s cubic-bezier(.4,0,.2,1), width .2s, height .2s;transform:translate(-50%,-50%)}
  body.vk-cursor-hover #vk-cursor-ring{width:48px;height:48px;border-color:rgba(45,212,191,.8)}
}

/* ===== F2: Magnetic CTAs (transform via JS) ===== */
.vk-magnetic{transition:transform .2s cubic-bezier(.16,1,.3,1)}

/* ===== Focus + inputs polish ===== */
:focus-visible{outline:2px solid rgba(13,148,136,.55);outline-offset:3px;border-radius:4px}
input[type=text],input[type=email],textarea,select{transition:border-color .2s, box-shadow .2s}
input[type=text]:focus,input[type=email]:focus,textarea:focus,select:focus{
  border-color:rgba(13,148,136,.6) !important;
  box-shadow:0 0 0 4px rgba(13,148,136,.15), 0 0 20px -8px rgba(13,148,136,.4)
}

/* ===== Live dot + Op pill ===== */
.vk-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#10b981;animation:vp 2s infinite;vertical-align:middle}
@keyframes vp{0%{box-shadow:0 0 0 0 rgba(16,185,129,.65)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.vk-op-pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;color:#10b981;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-right:14px;font-family:"JetBrains Mono",monospace}

/* ===== Link transitions ===== */
a{transition:color .2s, opacity .2s}

/* ===== Header glass when ticker active ===== */
body.vk-has-ticker header,body.vk-has-ticker nav[class*="fixed"]{top:32px !important}
@media(max-width:640px){body.vk-has-ticker header,body.vk-has-ticker nav[class*="fixed"]{top:28px !important}}