/* Landing /es/ventas-con-ia. Todas las reglas usan el prefijo vi- y solo aplican en esa página. */

.vi-intro{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--topbar-height,34px) + 7rem) 0 3rem;background:var(--blue-deep);color:#fff;isolation:isolate}
.vi-intro__bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.vi-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.55;animation:viFloat 14s ease-in-out infinite alternate}
.vi-orb--a{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,#2F6BFF 0%,transparent 70%)}
.vi-orb--b{width:460px;height:460px;bottom:-180px;right:-80px;background:radial-gradient(circle,#66C7FF 0%,transparent 70%);opacity:0.35;animation-duration:18s}
.vi-orb--c{width:360px;height:360px;top:30%;left:45%;background:radial-gradient(circle,#7C5CFF 0%,transparent 70%);opacity:0.3;animation-duration:22s}
.vi-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 0%,transparent 75%)}

.vi-intro__inner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,0.85fr);gap:3.5rem;align-items:center}

.vi-in{opacity:0;transform:translateY(18px);animation:viIn 0.8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:var(--d,0s)}

.vi-badge{display:inline-flex;align-items:center;gap:0.55rem;margin:0 0 1.6rem;padding:0.45rem 1rem;border:1px solid rgba(102,199,255,0.35);border-radius:999px;background:rgba(102,199,255,0.08);color:var(--blue-light);font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.vi-badge__dot{width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 0 rgba(52,211,153,0.6);animation:viPing 1.8s ease-out infinite}

.vi-title{margin:0 0 1.4rem;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(2.1rem,4vw,3.6rem);line-height:1.08;letter-spacing:-0.02em;color:#fff}
.vi-line{display:block}
.vi-grad{background:linear-gradient(110deg,#66C7FF 0%,#5B8CFF 35%,#A78BFA 65%,#66C7FF 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:viShine 6s linear infinite}

.vi-lead{max-width:540px;margin:0 0 2.2rem;font-size:1.08rem;line-height:1.75;color:rgba(255,255,255,0.68)}

.vi-flow{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap}
.vi-chip{flex:none;width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:800;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.vi-chip--img{background:none;box-shadow:none;overflow:visible}
.vi-chip--img img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.3))}
.vi-chip--tt img{background:#fff;border-radius:12%;box-shadow:0 0 0 1px rgba(255,255,255,0.3),0 6px 14px rgba(0,0,0,0.35)}
.vi-chip--ai{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#2F6BFF,#7C5CFF);font-size:0.95rem;box-shadow:0 0 0 6px rgba(47,107,255,0.15),var(--glow-blue)}
.vi-chip--sale{background:#10B981}
.vi-flow__line{position:relative;flex:1 1 28px;max-width:70px;height:2px;background:rgba(255,255,255,0.15);overflow:hidden;border-radius:2px}
.vi-flow__line i{position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#66C7FF,transparent);animation:viRun 1.8s linear infinite}

.vi-card{position:relative;padding:2.2rem;border-radius:24px;background:#fff;color:var(--text-primary);box-shadow:0 30px 80px rgba(0,0,0,0.45),0 0 70px rgba(91,140,255,0.35),0 0 0 1px rgba(102,199,255,0.35)}
.vi-card__title{margin:0 0 0.4rem;font-family:'Sora',sans-serif;font-size:1.45rem;font-weight:700;color:var(--text-primary)}
.vi-card__title:focus{outline:none}
.vi-card__sub{margin:0 0 1.5rem;font-size:0.92rem;color:var(--text-body)}

.vi-field{margin-bottom:1rem}
.vi-field label{display:block;margin-bottom:0.35rem;font-size:0.82rem;font-weight:600;color:var(--text-primary)}
.vi-field .form-control{height:52px;border-radius:12px;border:1.5px solid var(--border);font-size:1rem;padding:0 1rem;transition:border-color .2s,box-shadow .2s}
.vi-field .form-control:focus{border-color:var(--blue-accent);box-shadow:0 0 0 4px rgba(47,107,255,0.12)}
.vi-field.is-invalid .form-control{border-color:#E5484D}
.vi-field__error{min-height:0;margin:0.3rem 0 0;font-size:0.78rem;color:#D93036}
.vi-field__error:empty{display:none}
.vi-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vi-error{margin:0 0 1rem;padding:0.7rem 0.9rem;border-radius:10px;background:#FEF2F2;color:#B42318;font-size:0.85rem}

.vi-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:0.55rem;min-height:54px;font-size:1rem;font-weight:700;border-radius:12px}
.vi-submit[disabled]{opacity:0.7;cursor:wait}
.vi-submit.is-loading svg{display:none}
.vi-submit.is-loading::after{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,0.4);border-top-color:#fff;animation:viSpin .7s linear infinite}
.vi-legal{margin:0.9rem 0 0;text-align:center;font-size:0.76rem;color:var(--text-body)}
.vi-legal a{color:var(--blue-accent);text-decoration:underline}

.vi-again{display:block;margin:0.9rem auto 0;padding:0;background:none;border:0;color:var(--text-body);font-size:0.82rem;text-decoration:underline;cursor:pointer}
.vi-again:hover{color:var(--blue-accent)}
.vi-done{text-align:center;animation:viIn .5s ease forwards}
.vi-done__check{width:68px;height:68px;margin:0 auto 1.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#10B981;color:#fff;box-shadow:0 0 0 10px rgba(16,185,129,0.14);animation:viPop .5s cubic-bezier(.2,1.6,.4,1) both}

.vi-perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:4rem auto 0;padding:0;list-style:none}
.vi-perks li{padding:1rem 1.2rem;border:1px solid rgba(255,255,255,0.1);border-radius:14px;background:rgba(255,255,255,0.03)}
.vi-perks strong{display:block;font-family:'Sora',sans-serif;font-size:1rem;color:#fff}
.vi-perks span{font-size:0.84rem;color:rgba(255,255,255,0.55)}

@keyframes viIn{to{opacity:1;transform:none}}
@keyframes viFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}
@keyframes viShine{to{background-position:-220% 0}}
@keyframes viRun{to{left:100%}}
@keyframes viPing{0%{box-shadow:0 0 0 0 rgba(52,211,153,0.6)}100%{box-shadow:0 0 0 10px rgba(52,211,153,0)}}
@keyframes viSpin{to{transform:rotate(360deg)}}
@keyframes viPop{from{transform:scale(0.4);opacity:0}to{transform:scale(1);opacity:1}}

@media (max-width:992px){
  .vi-intro{min-height:0;padding-top:calc(var(--topbar-height,34px) + 6rem)}
  .vi-intro__inner{grid-template-columns:1fr;gap:2.5rem}
  .vi-card{max-width:520px;width:100%}
  .vi-perks{margin-top:3rem}
}

@media (max-width:640px){
  .vi-intro{padding-bottom:2.5rem}
  .vi-badge{font-size:0.68rem;letter-spacing:0.05em}
  .vi-lead{font-size:1rem;margin-bottom:1.8rem}
  .vi-chip{width:36px;height:36px;border-radius:10px;font-size:0.68rem}
  .vi-chip--ai{width:44px;height:44px}
  .vi-flow{gap:0.35rem}
  .vi-card{padding:1.6rem 1.3rem;border-radius:20px}
  .vi-perks{grid-template-columns:1fr;gap:0.6rem;margin-top:2.5rem}
}

@media (prefers-reduced-motion:reduce){
  .vi-in,.vi-done,.vi-done__check{opacity:1;transform:none;animation:none}
  .vi-orb,.vi-grad,.vi-flow__line i,.vi-badge__dot{animation:none}
}