/* Páginas de servicio con diseño propio: base común y una identidad por página */
.vx { --fondo:#fcfaff; --tinta:#17062d; --suave:#5f5470; --ac:#743cf0; --ac2:#c8a4ff; --tarj:#fff; --lin:#e6dcf3; --h-f:#17062d; --h-t:#fff; --h-s:#cfc3e0; --alt:#f4eefc; color:var(--tinta); background:var(--fondo); overflow:clip; font-size:17px; line-height:1.6; }
.vx-ancho { width:min(1240px,100%); margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }
.vx h1,.vx h2,.vx h3 { font-family:var(--brand-sans); color:inherit; }
.vx h1 { margin:14px 0 0; font-size:clamp(36px,4.6vw,68px); line-height:1.02; letter-spacing:-.045em; font-weight:800; }
.vx h2 { margin:0; font-size:clamp(28px,3.4vw,48px); line-height:1.06; letter-spacing:-.04em; font-weight:800; }
.vx h3 { margin:0; font-size:20px; line-height:1.2; letter-spacing:-.02em; font-weight:800; }
.vx a { color:var(--ac); }
.vx-hero { position:relative; overflow:hidden; color:var(--h-t); background:var(--h-f); }
.vx-hero-in { position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(24px,4vw,64px); align-items:center; min-height:min(760px,calc(100vh - 78px)); padding-block:clamp(36px,5vw,64px); }
.vx .migas { margin:0 0 24px; color:var(--h-s); font-size:13px; }
.vx .migas a { color:inherit; text-decoration:none; }
.vx .migas a:hover { text-decoration:underline; }
.vx-ey { margin:0; color:var(--ac2); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.vx-ent { max-width:60ch; margin:20px 0 0; color:var(--h-s); font-size:clamp(16px,1.3vw,18px); line-height:1.6; }
.vx .guia-meta { margin:14px 0 0; color:var(--h-s); font-size:13px; }
.vx-acc { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.vx a.vx-btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 24px; border:1px solid transparent; border-radius:999px; background:var(--ac); color:#fff; font-size:15px; font-weight:800; text-decoration:none; transition:transform .2s ease,filter .2s ease; }
.vx a.vx-btn:hover { transform:translateY(-2px); filter:brightness(1.12); }
.vx a.vx-btn.b { border-color:color-mix(in srgb,currentColor 35%,transparent); background:transparent; color:inherit; }
.vx-sec { padding:clamp(52px,7vw,104px) 0; }
.vx-princ h2 { max-width:18ch; margin-bottom:clamp(26px,3.5vw,44px); }
.vx-dos { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(22px,5vw,72px); align-items:start; }
.vx-pr h2 { position:sticky; top:104px; }
.vx-inv { background:var(--alt); }
.vx-txt p { margin:0 0 16px; color:var(--suave); }
.vx-txt ul,.vx-txt ol { margin:0 0 16px; padding-left:22px; color:var(--suave); }
.vx-txt li { margin-bottom:6px; }
.vx-txt b { color:var(--tinta); }
.vx-fe { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.vx-fe li { padding:24px; border:1px solid var(--lin); border-radius:18px; background:var(--tarj); transition:transform .25s ease,border-color .25s ease; }
.vx-fe li:hover { border-color:var(--ac); }
.vx-fe p { margin:8px 0 0; color:var(--suave); font-size:15.5px; line-height:1.5; }
.vx-n { display:block; margin-bottom:12px; color:var(--ac); font-size:13px; font-weight:800; }
.vx-fe-x { grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:16px; }
.vx-fe-x li { display:flex; gap:14px; padding:16px 18px; }
.vx-fe-x .vx-n { margin:2px 0 0; }
.vx-fe-x p { margin:0; }
.vx-fe-x h3 { font-size:17px; margin-bottom:4px; }
.vx-met { background:var(--alt); }
.vx-met h2 { margin-bottom:clamp(26px,3.5vw,44px); }
.vx-pasos { position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:16px; margin:0; padding:0; list-style:none; }
.vx-pasos::before { content:''; position:absolute; top:21px; left:22px; right:8%; height:2px; background:linear-gradient(90deg,var(--ac),var(--ac2)); }
.vx-pasos li { position:relative; }
.vx-pasos span { display:grid; place-items:center; width:44px; height:44px; margin-bottom:16px; border-radius:50%; background:var(--ac); box-shadow:0 0 0 6px var(--alt); color:#fff; font-weight:800; }
.vx-pasos p { margin:6px 0 0; color:var(--suave); font-size:15px; line-height:1.5; }
.vx-met .vx-txt { margin-top:24px; }
.vx-plan h2 { margin-bottom:28px; }
.vx-plan .planes-guia { margin:0 0 20px; }
.vx-plan p { color:var(--suave); }
.vx .plan-g-precio { color:var(--ac); }
.vx-banda { padding:clamp(20px,3vw,40px) 0; overflow:hidden; background:var(--h-f); }
.vx-banda>div { display:flex; gap:12px; width:max-content; transform:translateX(calc(-24% + var(--b,0)*24vw)); }
.vx-banda img { display:block; height:clamp(170px,23vw,340px); width:auto; aspect-ratio:16/10; object-fit:cover; object-position:top; border-radius:14px; }
.vx-nota { margin:10px 24px 0; color:var(--h-s); font-size:12.5px; text-align:right; }
.vx-faq details { border-bottom:1px solid var(--lin); }
.vx-faq summary { display:flex; justify-content:space-between; gap:16px; padding:18px 0; font-weight:800; cursor:pointer; list-style:none; }
.vx-faq summary::-webkit-details-marker { display:none; }
.vx-faq summary::after { content:'+'; color:var(--ac); font-size:22px; line-height:1; transition:transform .2s ease; }
.vx-faq details[open] summary::after { transform:rotate(45deg); }
.vx-faq details p { margin:0 0 18px; color:var(--suave); }
.vx-fin { padding:clamp(60px,8vw,110px) 0; color:var(--h-t); text-align:center; background:var(--h-f); }
.vx-fin h2 { font-size:clamp(34px,4.6vw,62px); }
.vx-fin p { margin:14px 0 0; color:var(--h-s); }
.vx-fin .vx-acc { justify-content:center; }
.vx-js .rev { opacity:var(--p,1); transform:translateY(calc((1 - var(--p,1))*40px)); transition:opacity .2s ease-out,transform .2s ease-out; }

/* Sistema integral: panel de control, azul noche con vídeo real */
.vx-crm { --h-f:radial-gradient(ellipse 70% 80% at 85% 20%,#2b3bd8 0,transparent 65%),#0b1030; --ac:#4f6bff; --ac2:#9fb2ff; --h-s:#c5cdf0; --alt:#eef1ff; --fondo:#fafbff; --lin:#dde3fb; }
.vx-pantalla { position:relative; }
.vx-pantalla video { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; border:1px solid rgba(159,178,255,.4); border-radius:16px; box-shadow:0 40px 90px rgba(0,0,0,.5); transform:perspective(1200px) rotateY(-9deg) rotateX(3deg); }
.vx-chip { position:absolute; padding:9px 14px; border-radius:12px; background:#fff; color:#0b1030; font-size:13px; font-weight:800; box-shadow:0 14px 34px rgba(0,0,0,.35); white-space:nowrap; }
.vx-chip:nth-of-type(1) { top:-14px; left:-6%; } .vx-chip:nth-of-type(2) { top:30%; right:-3%; } .vx-chip:nth-of-type(3) { bottom:22%; left:-9%; } .vx-chip:nth-of-type(4) { bottom:-14px; right:12%; }
.vx-crm .vx-fe li:first-child { grid-column:span 2; background:linear-gradient(135deg,#2b3bd8,#4f6bff); border-color:transparent; color:#fff; }
.vx-crm .vx-fe li:first-child p,.vx-crm .vx-fe li:first-child .vx-n { color:#dfe5ff; }

/* IA: negro total con orbe vivo */
.vx-ia { --fondo:#07060c; --tinta:#f3f0fa; --suave:#a9a2ba; --ac:#a57bff; --ac2:#d7c2ff; --tarj:#110e1a; --lin:#2a2438; --h-f:#07060c; --alt:#0e0b16; --h-s:#bdb6cc; }
.vx-orbe { position:relative; aspect-ratio:1; max-width:460px; width:100%; margin-inline:auto; transform:scale(calc(1 + var(--h,0)*.35)); }
.vx-orbe b { position:absolute; inset:24%; border-radius:50%; background:conic-gradient(from 0deg,#743cf0,#ff7ad9,#57d7ff,#743cf0); filter:blur(14px); animation:vx-gira 7s linear infinite; }
.vx-orbe i { position:absolute; inset:0; border:1px solid rgba(215,194,255,.28); border-radius:50%; animation:vx-pulso 4s ease-out infinite; }
.vx-orbe i:nth-child(2) { animation-delay:1.3s; } .vx-orbe i:nth-child(3) { animation-delay:2.6s; }
@keyframes vx-gira { to { transform:rotate(360deg); } }
@keyframes vx-pulso { from { transform:scale(.45); opacity:1; } to { transform:scale(1.05); opacity:0; } }
.vx-ia .vx-fe { grid-template-columns:minmax(0,1fr); gap:0; }
.vx-ia .vx-fe li { display:grid; grid-template-columns:70px minmax(0,1fr) minmax(0,1.3fr); gap:20px; align-items:baseline; padding:24px 6px; border:0; border-top:1px solid var(--lin); border-radius:0; background:none; }
.vx-ia .vx-fe li>div { display:contents; }
.vx-ia .vx-fe h3 { font-size:clamp(20px,2vw,26px); }
.vx-ia .vx-fe p { margin:0; }
.vx-ia .vx-pasos span { box-shadow:0 0 0 6px var(--alt); color:#07060c; }

/* Chatbot: cielo claro con móvil y conversación real */
.vx-chat { --h-f:linear-gradient(135deg,#dff3ff,#efe6ff); --h-t:#17062d; --h-s:#47506b; --ac:#2f7bff; --ac2:#2f7bff; --alt:#eaf5ff; --lin:#d5e6f7; }
.vx-movil { display:flex; flex-direction:column; gap:10px; width:min(330px,100%); min-height:500px; margin-inline:auto; padding:58px 16px 20px; border:10px solid #17062d; border-radius:38px; background:#fff; box-shadow:0 34px 80px rgba(23,6,45,.3); }
.vx-movil p { margin:0; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.42; animation:vx-entra .5s both; }
.vx-movil .yo { align-self:flex-end; max-width:86%; background:#2f7bff; color:#fff; border-bottom-right-radius:4px; }
.vx-movil .el { max-width:92%; background:#eef2f8; color:#17062d; border-bottom-left-radius:4px; animation-delay:.8s; }
.vx-tecl { display:flex; gap:4px; width:max-content; background:#eef2f8; animation-delay:1.6s!important; }
.vx-tecl i { width:7px; height:7px; border-radius:50%; background:#7d8aa5; animation:vx-tecla 1.2s infinite; }
.vx-tecl i:nth-child(2) { animation-delay:.2s; } .vx-tecl i:nth-child(3) { animation-delay:.4s; }
@keyframes vx-entra { from { opacity:0; transform:translateY(14px); } }
@keyframes vx-tecla { 50% { transform:translateY(-4px); } }
.vx-chat .vx-fe { grid-template-columns:minmax(0,1fr); max-width:820px; margin-inline:auto; }
.vx-chat .vx-fe li { width:82%; border-radius:22px 22px 22px 6px; background:#eef5ff; border-color:#d5e6f7; }
.vx-chat .vx-fe li:nth-child(even) { justify-self:end; border-radius:22px 22px 6px 22px; background:#2f7bff; color:#fff; }
.vx-chat .vx-fe li:nth-child(even) p,.vx-chat .vx-fe li:nth-child(even) .vx-n { color:#e4eeff; }
.vx-chat .vx-princ h2 { margin-inline:auto; text-align:center; }

/* WhatsApp: verde con mensajes que llegan */
.vx-wa { --h-f:linear-gradient(135deg,#075e54,#0c8a6f); --ac:#12a37f; --ac2:#a8f0d0; --h-s:#d3f1e6; --alt:#e9f7f1; --lin:#cfeadf; --fondo:#fbfefc; }
.vx-wa .vx-wa { display:grid; gap:12px; padding:22px; border-radius:22px; background:#e5ddd5 radial-gradient(#d6ccc2 1px,transparent 1px) 0 0/18px 18px; box-shadow:0 30px 70px rgba(0,0,0,.3); }
.vx-wa .vx-wa p { display:flex; justify-content:space-between; gap:18px; width:88%; margin:0; padding:12px 14px; border-radius:12px; background:#fff; color:#17062d; font-size:15px; box-shadow:0 2px 3px rgba(0,0,0,.12); animation:vx-entra .5s calc(var(--i)*.45s) both; }
.vx-wa .vx-wa p:nth-child(even) { justify-self:end; background:#dcf8c6; }
.vx-wa .vx-wa small { align-self:end; color:#34b7f1; font-size:12px; font-weight:800; }
.vx-wa .vx-fe { grid-template-columns:repeat(2,minmax(0,1fr)); }
.vx-wa .vx-fe li { border:0; border-left:4px solid var(--ac); border-radius:6px 16px 16px 6px; background:var(--alt); }

/* Diseño web: columnas de webs reales en movimiento */
.vx-web { --h-f:#10081c; --ac:#8548f5; --alt:#f6f1ff; }
.vx-web .vx-hero-in { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); min-height:calc(100vh - 78px); padding-block:0; }
.vx-cols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; height:100%; max-height:calc(100vh - 78px); overflow:hidden; mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent); }
.vx-cols>div { display:grid; gap:12px; align-content:start; }
.vx-cols>div:nth-child(2) { margin-top:-120px; }
.vx-cols img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:top; border-radius:12px; }
.vx-web .vx-fe li { padding:0 0 18px; border:0; border-bottom:2px solid var(--tinta); border-radius:0; background:none; }
.vx-web .vx-fe { gap:26px 28px; }

/* Tiendas: escaparate cálido */
.vx-tienda { --h-f:linear-gradient(135deg,#fff1e6,#ffe0d2); --h-t:#3a1a12; --h-s:#6e4a3f; --ac:#e0542f; --ac2:#e0542f; --alt:#fff5ee; --lin:#f5ddd0; --fondo:#fffbf8; --tinta:#2c120b; --suave:#6e4a3f; }
.vx-escap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; transform:translateY(calc(var(--h,0)*-60px)); }
.vx-escap figure { margin:0; padding:10px 10px 14px; border-radius:18px; background:#fff; box-shadow:0 18px 40px rgba(90,40,20,.14); animation:vx-entra .6s calc(var(--i)*.14s) both; }
.vx-escap figure:nth-child(even) { translate:0 26px; }
.vx-escap img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:12px; }
.vx-escap i { display:block; height:8px; margin-top:10px; border-radius:4px; background:#f5ddd0; }
.vx-escap i+i { width:42%; margin-top:6px; background:#e0542f; }
.vx-tienda .vx-fe { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; }
.vx-tienda .vx-fe li { display:flex; gap:16px; padding:22px 0; border:0; border-top:1px solid var(--lin); border-radius:0; background:none; }
.vx-tienda .vx-n { font-family:var(--brand-serif); font-size:34px; font-style:italic; font-weight:400; line-height:1; }

/* Identidad visual: blanco y negro editorial */
.vx-marca { --h-f:#fff; --h-t:#0c0c0c; --h-s:#555; --ac:#0c0c0c; --ac2:#0c0c0c; --tinta:#0c0c0c; --suave:#555; --alt:#f3f3f1; --lin:#ddd; --fondo:#fff; }
.vx-marca h1 { font-family:var(--brand-serif); font-weight:400; font-size:clamp(44px,6vw,92px); letter-spacing:-.03em; }
.vx-logos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #0c0c0c; border-left:1px solid #0c0c0c; }
.vx-logos img { display:block; width:100%; aspect-ratio:1; object-fit:contain; padding:12%; border-right:1px solid #0c0c0c; border-bottom:1px solid #0c0c0c; background:#fff; transition:filter .3s ease; }
.vx-logos img:hover { filter:invert(1); }
.vx-marca .vx-fe { grid-template-columns:minmax(0,1fr); gap:0; }
.vx-marca .vx-fe li { display:flex; gap:clamp(16px,4vw,48px); align-items:baseline; padding:26px 0; border:0; border-top:1px solid #0c0c0c; border-radius:0; background:none; }
.vx-marca .vx-fe h3 { font-family:var(--brand-serif); font-size:clamp(28px,3.4vw,46px); font-weight:400; letter-spacing:-.02em; }
.vx-marca .vx-pasos span { color:#fff; }
.vx-marca a.vx-btn { color:#fff; }
.vx-marca .vx-hero a.vx-btn.b { color:#0c0c0c; }
.vx-marca .vx-fin { background:#0c0c0c; color:#fff; --h-s:#bbb; }
.vx-marca .vx-fin a.vx-btn { background:#fff; color:#0c0c0c; }
.vx-marca .vx-fin a.vx-btn.b { background:transparent; color:#fff; }

/* Diseño gráfico: carteles que caen, magenta */
.vx-graf { --h-f:linear-gradient(135deg,#c2185b,#7b1fa2); --ac:#d81b78; --ac2:#ffd1ea; --h-s:#ffe0f0; --alt:#fff0f7; --lin:#f7d3e6; --fondo:#fffafc; }
.vx-carteles { position:relative; height:560px; }
.vx-carteles span { position:absolute; display:block; width:48%; }
.vx-carteles img { display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; box-shadow:0 24px 50px rgba(50,0,40,.4); }
.vx-carteles span:nth-child(1) { top:0; left:0; rotate:-8deg; } .vx-carteles span:nth-child(2) { top:6%; right:0; rotate:6deg; } .vx-carteles span:nth-child(3) { top:36%; left:25%; rotate:-2deg; z-index:2; } .vx-carteles span:nth-child(4) { bottom:0; left:-2%; rotate:5deg; } .vx-carteles span:nth-child(5) { bottom:-4%; right:2%; rotate:-6deg; }
.vx-graf .vx-fe { grid-template-columns:repeat(4,minmax(0,1fr)); }
.vx-graf .vx-fe li { background:var(--ac); border:0; color:#fff; rotate:calc((var(--i) - 1.5)*.6deg); }
.vx-graf .vx-fe li:nth-child(even) { background:#7b1fa2; }
.vx-graf .vx-fe p,.vx-graf .vx-n { color:#ffe0f0; }

/* SEO local: mapa con radar */
.vx-seo { --h-f:linear-gradient(135deg,#e3f7f0,#e4ecff); --h-t:#0d2b3e; --h-s:#3d5a6c; --ac:#0f9d8a; --ac2:#0f9d8a; --alt:#eef9f6; --lin:#d3ebe5; --tinta:#0d2b3e; --suave:#46606f; }
.vx-mapa { position:relative; overflow:hidden; aspect-ratio:10/7; border-radius:22px; background:#fff; box-shadow:0 30px 70px rgba(13,43,62,.16); }
.vx-mapa svg { position:absolute; inset:0; width:100%; height:100%; }
.vx-mapa path { fill:none; stroke:#dbe7ec; stroke-width:10; }
.vx-mapa i,.vx-mapa b { position:absolute; top:var(--y); left:var(--x); border-radius:50%; }
.vx-mapa i { width:16px; height:16px; background:#b6c6cf; }
.vx-mapa b { width:30px; height:30px; margin:-15px; background:var(--ac); box-shadow:0 0 0 6px rgba(15,157,138,.25); }
.vx-mapa b::before,.vx-mapa b::after { content:''; position:absolute; inset:-14px; border:2px solid var(--ac); border-radius:50%; animation:vx-pulso 3s ease-out infinite; }
.vx-mapa b::after { animation-delay:1.5s; }
.vx-seo .vx-fe li { background:var(--alt); border:0; }
.vx-seo .vx-n::before { content:'✓ '; }

/* Precios: documento claro y ordenado */
.vx-pcrm,.vx-pweb { --h-f:#faf7f0; --h-t:#17062d; --h-s:#5f5470; --ac:#743cf0; --ac2:#743cf0; --alt:#faf7f0; --fondo:#fff; }
.vx-pweb { --ac:#0f7a5a; --ac2:#0f7a5a; --h-f:#eefaf3; --alt:#eefaf3; --lin:#d6ecdf; }
.vx-resumen { padding:26px; border-radius:20px; background:#fff; box-shadow:0 24px 60px rgba(23,6,45,.1); color:var(--suave); font-size:15.5px; }
.vx-resumen .guia-resumen { margin:0; padding:0; border:0; background:none; }

@media (max-width:1020px) {
  .vx-hero-in,.vx-web .vx-hero-in,.vx-dos { grid-template-columns:minmax(0,1fr); min-height:0; }
  .vx-web .vx-hero-in { padding-block:36px; }
  .vx-cols { height:440px; }
  .vx-cols>div:nth-child(2) { margin-top:-50px; }
  .vx-pr h2 { position:static; }
  .vx-fe,.vx-graf .vx-fe { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .vx-pasos { grid-auto-flow:row; }
  .vx-pasos::before { top:10px; bottom:30px; right:auto; width:2px; height:auto; }
  .vx-pasos li { display:grid; grid-template-columns:44px minmax(0,1fr); gap:14px; }
  .vx-pasos span { margin:0; }
  .vx-ia .vx-fe li { grid-template-columns:44px minmax(0,1fr); }
  .vx-ia .vx-fe p { grid-column:2; }
  .vx-carteles { height:420px; }
}
@media (max-width:640px) {
  .vx { font-size:16px; }
  .vx-fe,.vx-graf .vx-fe,.vx-wa .vx-fe,.vx-tienda .vx-fe { grid-template-columns:minmax(0,1fr); }
  .vx-crm .vx-fe li:first-child { grid-column:auto; }
  .vx-chat .vx-fe li { width:94%; }
  .vx-chip { display:none; }
  .vx-acc a.vx-btn { flex:1 1 100%; }
  .vx-marca .vx-fe li { display:block; }
  .vx-carteles { height:340px; }
  .vx-graf .vx-fe li { rotate:none; }
}
@media (prefers-reduced-motion:reduce) {
  .vx * { animation:none!important; transition:none!important; }
}