/**
 * Tienda: hero, selector de plataformas y configuradores de servicio.
 *
 * Porte del widget de produccion (shop-shop.html), tal cual.
 *
 * DEUDA CONOCIDA: 2146 declaraciones !important. Existen para ganarle al CSS
 * de Elementor, que aca no esta. No se quitan en este paso porque son 108 KB
 * de reglas y un borrado a ciegas puede romper especificidades internas: hay
 * reglas que se pisan entre si dentro del propio archivo. Se limpia aparte,
 * con el diseno ya verificado, y no de una sola pasada.
 */

/* ══════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════ */
.vp*,.vp*::before,.vp*::after{box-sizing:border-box !important;margin:0 !important;padding:0 !important}
.vp{
  width:100% !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  color:#fff !important;
  overflow-x:clip !important;
  background:#08080f !important;
}

/* ── Barra de anuncio ── */
.vp-announce{
  width:100% !important;
  background:linear-gradient(90deg,#ff007a 0%,#c026d3 45%,#7c3aed 100%) !important;
  padding:0 !important;
  overflow:hidden !important;
  position:relative !important;
  border-radius:0 !important;
  box-shadow:0 2px 18px rgba(255,0,122,.35) !important;
}
/* Fade edges */
.vp-announce::before,.vp-announce::after{
  content:'' !important;
  position:absolute !important;
  top:0 !important;bottom:0 !important;
  width:64px !important;
  z-index:2 !important;
  pointer-events:none !important;
}
.vp-announce::before{
  left:0 !important;
  background:linear-gradient(90deg,#ff007a,transparent) !important;
}
.vp-announce::after{
  right:0 !important;
  background:linear-gradient(270deg,#7c3aed,transparent) !important;
}
.vp-ann-track{
  display:flex !important;
  width:max-content !important;
  align-items:center !important;
  animation:vpTicker 28s linear infinite !important;
  padding:9px 0 !important;
}
.vp-ann-track:hover{animation-play-state:paused !important}
.vp-ann-item{
  white-space:nowrap !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.7px !important;
  color:#fff !important;
  padding:0 6px !important;
  text-shadow:0 1px 6px rgba(0,0,0,.2) !important;
}
.vp-ann-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:5px !important;
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  border-radius:20px !important;
  padding:2px 10px !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.5px !important;
  color:#fff !important;
  white-space:nowrap !important;
}
.vp-ann-sep{
  color:rgba(255,255,255,.4) !important;
  font-size:14px !important;
  padding:0 16px !important;
  user-select:none !important;
}
@keyframes vpTicker{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ══════════════════════════════════════════════════════
   HERO SECTION
══════════════════════════════════════════════════════ */
.vp-hero{
  position:relative !important;
  width:100% !important;
  padding:36px 24px 44px !important;
  text-align:center !important;
  overflow:clip !important;
}

/* Fondo: radial glow rosa + violeta, más intenso */
.vp-hero::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(ellipse 80% 60% at 20% -5%,  rgba(255,0,122,.52) 0%, transparent 60%),
    radial-gradient(ellipse 70% 55% at 80% 105%, rgba(138,43,226,.45) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 55%  50%, rgba(192,38,211,.18) 0%, transparent 55%) !important;
  pointer-events:none !important;
}

/* Grid de puntos decorativo, más visible */
.vp-hero::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px) !important;
  background-size:24px 24px !important;
  pointer-events:none !important;
}

/* Orbes flotantes hero */
.vp-orb{position:absolute !important;border-radius:50% !important;filter:blur(80px) !important;pointer-events:none !important}
.vp-orb-1{width:320px !important;height:320px !important;top:-80px !important;left:-100px !important;background:rgba(255,0,122,.22) !important;animation:vpOrb1 8s ease-in-out infinite !important}
.vp-orb-2{width:260px !important;height:260px !important;bottom:-100px !important;right:-80px !important;background:rgba(138,43,226,.22) !important;animation:vpOrb2 10s ease-in-out infinite !important}
@keyframes vpOrb1{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,20px)}}
@keyframes vpOrb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,-18px)}}

.vp-hero-inner{
  position:relative !important;
  z-index:1 !important;
  max-width:640px !important;
  margin:0 auto !important;
}

/* ── Logo ── */
.vp-logo{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:20px !important;
}
.vp-logo-bolt{flex-shrink:0 !important}
.vp-logo-name{
  font-size:26px !important;
  font-weight:900 !important;
  color:#fff !important;
  letter-spacing:-.7px !important;
}

/* ── Pill badge ── */
.vp-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  background:rgba(255,0,122,.1) !important;
  border:1px solid rgba(255,0,122,.35) !important;
  border-radius:100px !important;
  padding:8px 20px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.85) !important;
  letter-spacing:1.5px !important;
  text-transform:uppercase !important;
  margin-bottom:16px !important;
  box-shadow:0 0 18px rgba(255,0,122,.2) !important;
}
.vp-badge-dot{
  width:6px !important;height:6px !important;
  border-radius:50% !important;
  background:#ff007a !important;
  box-shadow:0 0 8px rgba(255,0,122,.9) !important;
  animation:vpPulse 2s ease-in-out infinite !important;
}
@keyframes vpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}

/* ── H1 ──
   La segunda linea en gradiente ya NO va dentro del H1: es un <p> hermano,
   para que el H1 quede corto y no diluya la palabra clave. Por eso .vp-h1-grad
   repite aca el tamano, el peso y el interlineado que antes heredaba del H1:
   sin esto, al salir del H1 volveria al cuerpo de texto.
   El margen inferior pasa del H1 a la linea en gradiente, asi la separacion
   con el subtitulo sigue siendo de 12px y no se suman dos margenes. */
.vp-h1,
.vp-h1-grad{
  font-size:clamp(24px,3.8vw,40px) !important;
  font-weight:900 !important;
  line-height:1.12 !important;
  letter-spacing:-1.5px !important;
}
.vp-h1{
  color:#fff !important;
  margin:0 !important;
}
.vp-h1-grad{
  display:block !important;
  margin:0 0 12px !important;
  background:linear-gradient(135deg,#ff007a 0%,#c026d3 50%,#8a2be2 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ── Subtítulo ── */
.vp-sub{
  font-size:14px !important;
  color:#fff !important;
  line-height:1.6 !important;
  margin-bottom:24px !important;
  max-width:480px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-shadow:0 1px 8px rgba(0,0,0,.4) !important;
}
.vp-sub strong{color:#fff !important;font-weight:700 !important}

/* ── Stats ── */
.vp-stats{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  flex-wrap:wrap !important;
  box-shadow:0 0 40px rgba(255,0,122,.18), 0 8px 32px rgba(0,0,0,.5) !important;
  backdrop-filter:blur(16px) !important;
}
.vp-stat{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:3px !important;
  padding:12px 22px !important;
  position:relative !important;
}
.vp-stat+.vp-stat::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;top:50% !important;
  transform:translateY(-50%) !important;
  width:1px !important;height:32px !important;
  background:rgba(255,255,255,.14) !important;
}
.vp-stat-num{
  font-size:18px !important;
  font-weight:900 !important;
  color:#fff !important;
  letter-spacing:-.5px !important;
  line-height:1 !important;
  text-shadow:0 0 20px rgba(255,0,122,.6) !important;
}
.vp-stat-lbl{
  font-size:10px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.75) !important;
  text-transform:uppercase !important;
  letter-spacing:.8px !important;
}

/* Línea divisoria hero → widget */
.vp-divider{
  width:100% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent 0%,rgba(255,0,122,.4) 30%,rgba(138,43,226,.4) 70%,transparent 100%) !important;
  margin:0 !important;
  box-shadow:0 0 12px rgba(255,0,122,.25) !important;
}

/* ══════════════════════════════════════════════════════
   WIDGET SECTION
══════════════════════════════════════════════════════ */
.vp-section{
  padding:48px 24px 64px !important;
  max-width:var(--wp--custom--ancho--general) !important;
  margin:0 auto !important;
}

/* ── Callout de importancia ── */
.vp-callout{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  background:rgba(255,0,122,.08) !important;
  border:1px solid rgba(255,0,122,.28) !important;
  border-radius:16px !important;
  padding:16px 20px !important;
  margin-bottom:36px !important;
  box-shadow:0 0 24px rgba(255,0,122,.1) !important;
}
.vp-callout-icon{
  font-size:26px !important;
  flex-shrink:0 !important;
  line-height:1 !important;
}
.vp-callout-text{
  font-size:13px !important;
  color:#fff !important;
  line-height:1.55 !important;
  font-weight:500 !important;
}
.vp-callout-text strong{
  color:#ff007a !important;
  font-weight:700 !important;
}

.vp-net-label,.vp-cat-label{
  font-size:11px !important;
  font-weight:800 !important;
  color:rgb(255, 255, 255) !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  margin-bottom:14px !important;
}
.vp-net-label{margin-top:0 !important}
.vp-cat-label{margin-top:28px !important}

/* Red social buttons */
.vp-nets{display:flex !important;flex-wrap:wrap !important;gap:10px !important;margin-bottom:0 !important}
.vp-btn-net{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.6) !important;
  padding:13px 22px !important;
  border-radius:14px !important;
  font-size:15px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  transition:border-color .25s,color .25s,background .25s,box-shadow .25s,transform .2s cubic-bezier(.34,1.56,.64,1) !important;
  font-family:'Inter',sans-serif !important;
}
.vp-btn-net:hover{background:rgba(255,255,255,.09) !important;color:rgba(255,255,255,.9) !important;transform:translateY(-2px) !important}
.vp-net-ico{width:24px !important;height:24px !important;object-fit:contain !important;border-radius:5px !important;flex-shrink:0 !important}
.vp-btn-net.active{
  border-width:2px !important;
  border-color:rgba(255,0,122,.7) !important;
  background:rgba(255,0,122,.12) !important;
  color:#fff !important;
  box-shadow:0 0 22px rgba(255,0,122,.35),0 4px 16px rgba(255,0,122,.2) !important;
  transform:translateY(-1px) !important;
}
.vp-btn-net:focus-visible{outline:2px solid #ff007a !important;outline-offset:3px !important}
/* Hover glow por red social */
.vp-btn-net[data-net="instagram"]:hover{box-shadow:0 4px 20px rgba(255,0,122,.28) !important}
.vp-btn-net[data-net="tiktok"]:hover{box-shadow:0 4px 20px rgba(255,0,80,.28) !important}
.vp-btn-net[data-net="youtube"]:hover{box-shadow:0 4px 20px rgba(255,0,0,.28) !important}
.vp-btn-net[data-net="facebook"]:hover{box-shadow:0 4px 20px rgba(24,119,242,.28) !important}
.vp-btn-net[data-net="twitch"]:hover{box-shadow:0 4px 20px rgba(145,70,255,.28) !important}
.vp-btn-net[data-net="kick"]:hover{box-shadow:0 4px 20px rgba(83,252,24,.22) !important}
.vp-btn-net[data-net="spotify"]:hover{box-shadow:0 4px 20px rgba(29,185,84,.28) !important}
.vp-btn-net[data-net="twitter"]:hover{box-shadow:0 4px 20px rgba(29,155,240,.28) !important}
.vp-btn-net[data-net="threads"]:hover{box-shadow:0 4px 20px rgba(190,200,216,.24) !important}
.vp-btn-net[data-net="whatsapp"]:hover{box-shadow:0 4px 20px rgba(37,211,102,.28) !important}

/* Categorías, Chips B-1 */
.vp-cats{display:flex;flex-direction:column !important;gap:7px !important;margin-bottom:28px !important}
.vp-btn-cat{
  display:flex !important;align-items:center !important;gap:11px !important;
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.65) !important;
  padding:10px 13px !important;
  border-radius:14px !important;
  cursor:pointer !important;
  font-weight:600 !important;
  font-size:13px !important;
  font-family:'Inter',sans-serif !important;
  text-align:left !important;
  width:100% !important;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.vp-btn-cat:hover{background:rgba(255,255,255,.09) !important;color:rgba(255,255,255,.9) !important;border-color:rgba(255,255,255,.2) !important;transform:translateX(3px) !important}
.vp-btn-cat.selected{
  background:rgba(255,0,122,.12) !important;
  border-color:rgba(255,0,122,.65) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(255,0,122,.22) !important;
  transform:translateX(3px) !important;
}
.vp-btn-cat:focus-visible{outline:2px solid #ff007a !important;outline-offset:3px !important}
/* Sub-elementos del chip */
.vp-chip-ico{
  width:34px !important;height:34px !important;border-radius:9px !important;
  background:rgba(255,255,255,.06) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:17px !important;flex-shrink:0 !important;
  transition:background .2s !important;
}
.vp-btn-cat.selected .vp-chip-ico{background:rgba(255,0,122,.18) !important}
.vp-chip-info{display:flex !important;flex-direction:column !important;gap:2px !important;flex:1 !important;min-width:0 !important}
.vp-chip-name{font-size:13px !important;font-weight:700 !important;color:inherit !important;line-height:1 !important}
.vp-chip-arrow{font-size:17px !important;color:rgba(255,0,122,.8) !important;opacity:0 !important;transform:translateX(-4px) !important;transition:opacity .2s,transform .2s !important;flex-shrink:0 !important;line-height:1 !important}
.vp-btn-cat:hover .vp-chip-arrow,.vp-btn-cat.selected .vp-chip-arrow{opacity:1 !important;transform:translateX(0) !important}

/* ══════════════════════════════════════════════════════
   TOKENS DE TEMA, CSS Custom Properties
══════════════════════════════════════════════════════ */
.vc-widget{
  --vc-c1:#ff007a !important;--vc-c2:#8a2be2 !important;
  --vc-orb-a:rgba(255,0,122,.22) !important;--vc-orb-b:rgba(138,43,226,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(255,0,122,.38),0 0 72px rgba(138,43,226,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(255,0,122,.45) !important;
  --vc-fill:linear-gradient(90deg,#ff007a,#8a2be2) !important;
  --vc-cta:linear-gradient(135deg,#ff007a,#8a2be2) !important;
  --vc-cta-shd:0 8px 32px rgba(255,0,122,.45) !important;
  --vc-qty-grad:linear-gradient(135deg,#ff007a,#8a2be2) !important;
  --vc-thumb-shd:0 0 0 5px rgba(255,0,122,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-premium{
  --vc-c1:#FFD700 !important;--vc-c2:#FF8C00 !important;
  --vc-orb-a:rgba(255,215,0,.24) !important;--vc-orb-b:rgba(255,140,0,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(255,215,0,.42),0 0 72px rgba(255,140,0,.20),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(255,215,0,.45) !important;
  --vc-fill:linear-gradient(90deg,#FFD700,#FF8C00) !important;
  --vc-cta:linear-gradient(135deg,#FFD700,#FF8C00) !important;
  --vc-cta-shd:0 8px 32px rgba(255,215,0,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#FFD700,#FF8C00) !important;
  --vc-thumb-shd:0 0 0 5px rgba(255,215,0,.32),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-argentinos{
  --vc-c1:#74ACDF !important;--vc-c2:#3A7ABD !important;
  --vc-orb-a:rgba(116,172,223,.28) !important;--vc-orb-b:rgba(58,122,189,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(116,172,223,.45),0 0 72px rgba(58,122,189,.22),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(116,172,223,.55) !important;
  --vc-fill:linear-gradient(90deg,#74ACDF,#A8D4F5) !important;
  --vc-cta:linear-gradient(135deg,#74ACDF,#2C6FAC) !important;
  --vc-cta-shd:0 8px 32px rgba(116,172,223,.45) !important;
  --vc-qty-grad:linear-gradient(135deg,#74ACDF,#ffffff) !important;
  --vc-thumb-shd:0 0 0 5px rgba(116,172,223,.38),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-latinos{
  --vc-c1:#00E5A0 !important;--vc-c2:#7B2FBE !important;
  --vc-orb-a:rgba(0,229,160,.22) !important;--vc-orb-b:rgba(123,47,190,.20) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(0,229,160,.35),0 0 72px rgba(123,47,190,.20),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(0,229,160,.45) !important;
  --vc-fill:linear-gradient(90deg,#00E5A0,#7B2FBE) !important;
  --vc-cta:linear-gradient(135deg,#00E5A0,#7B2FBE) !important;
  --vc-cta-shd:0 8px 32px rgba(0,229,160,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#00E5A0,#7B2FBE) !important;
  --vc-thumb-shd:0 0 0 5px rgba(0,229,160,.32),0 4px 14px rgba(0,0,0,.5) !important;
}
/* ── TikTok temas ── */
.vc-widget.t-tiktok{
  --vc-c1:#ff0050 !important;--vc-c2:#00f2ea !important;
  --vc-orb-a:rgba(255,0,80,.26) !important;--vc-orb-b:rgba(0,242,234,.20) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 30px rgba(255,0,80,.40),0 0 72px rgba(0,242,234,.20),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(255,0,80,.50) !important;
  --vc-fill:linear-gradient(90deg,#ff0050,#00f2ea) !important;
  --vc-cta:linear-gradient(135deg,#ff0050 0%,#8b00ff 50%,#00f2ea 100%) !important;
  --vc-cta-shd:0 8px 32px rgba(255,0,80,.45) !important;
  --vc-qty-grad:linear-gradient(135deg,#ff0050,#00f2ea) !important;
  --vc-thumb-shd:0 0 0 5px rgba(255,0,80,.30),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-tiktok-premium{
  --vc-c1:#FFD700 !important;--vc-c2:#FF8C00 !important;
  --vc-orb-a:rgba(255,215,0,.24) !important;--vc-orb-b:rgba(255,140,0,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(255,215,0,.42),0 0 72px rgba(255,140,0,.20),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(255,215,0,.45) !important;
  --vc-fill:linear-gradient(90deg,#FFD700,#FF8C00) !important;
  --vc-cta:linear-gradient(135deg,#FFD700,#FF8C00) !important;
  --vc-cta-shd:0 8px 32px rgba(255,215,0,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#FFD700,#FF8C00) !important;
  --vc-thumb-shd:0 0 0 5px rgba(255,215,0,.32),0 4px 14px rgba(0,0,0,.5) !important;
}

/* ── Badge NUEVO en red social ── */
.vp-net-new{
  font-size:7px !important;font-weight:900 !important;letter-spacing:.5px !important;text-transform:uppercase !important;
  background:linear-gradient(90deg,#ff0050,#00f2ea) !important;
  color:#000 !important;padding:1px 6px !important;border-radius:100px !important;
  margin-left:4px !important;vertical-align:middle !important;flex-shrink:0 !important;
}
/* ── Temas nuevas plataformas ── */
.vc-widget.t-youtube{
  --vc-c1:#FF0000 !important;--vc-c2:#FF6B35 !important;
  --vc-orb-a:rgba(255,0,0,.24) !important;--vc-orb-b:rgba(255,107,53,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(255,0,0,.38),0 0 72px rgba(255,107,53,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(255,0,0,.45) !important;--vc-fill:linear-gradient(90deg,#FF0000,#FF6B35) !important;
  --vc-cta:linear-gradient(135deg,#FF0000,#FF6B35) !important;--vc-cta-shd:0 8px 32px rgba(255,0,0,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#FF0000,#FF6B35) !important;--vc-thumb-shd:0 0 0 5px rgba(255,0,0,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-facebook{
  --vc-c1:#1877F2 !important;--vc-c2:#42A5F5 !important;
  --vc-orb-a:rgba(24,119,242,.26) !important;--vc-orb-b:rgba(66,165,245,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(24,119,242,.38),0 0 72px rgba(66,165,245,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(24,119,242,.45) !important;--vc-fill:linear-gradient(90deg,#1877F2,#42A5F5) !important;
  --vc-cta:linear-gradient(135deg,#1877F2,#42A5F5) !important;--vc-cta-shd:0 8px 32px rgba(24,119,242,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#1877F2,#42A5F5) !important;--vc-thumb-shd:0 0 0 5px rgba(24,119,242,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-twitch{
  --vc-c1:#9146FF !important;--vc-c2:#BF94FF !important;
  --vc-orb-a:rgba(145,70,255,.26) !important;--vc-orb-b:rgba(191,148,255,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(145,70,255,.38),0 0 72px rgba(191,148,255,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(145,70,255,.45) !important;--vc-fill:linear-gradient(90deg,#9146FF,#BF94FF) !important;
  --vc-cta:linear-gradient(135deg,#9146FF,#BF94FF) !important;--vc-cta-shd:0 8px 32px rgba(145,70,255,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#9146FF,#BF94FF) !important;--vc-thumb-shd:0 0 0 5px rgba(145,70,255,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-kick{
  --vc-c1:#53FC18 !important;--vc-c2:#00D4AA !important;
  --vc-orb-a:rgba(83,252,24,.22) !important;--vc-orb-b:rgba(0,212,170,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(83,252,24,.32),0 0 72px rgba(0,212,170,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(83,252,24,.40) !important;--vc-fill:linear-gradient(90deg,#53FC18,#00D4AA) !important;
  --vc-cta:linear-gradient(135deg,#53FC18,#00D4AA) !important;--vc-cta-shd:0 8px 32px rgba(83,252,24,.35) !important;
  --vc-qty-grad:linear-gradient(135deg,#53FC18,#00D4AA) !important;--vc-thumb-shd:0 0 0 5px rgba(83,252,24,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-spotify{
  --vc-c1:#1DB954 !important;--vc-c2:#00E676 !important;
  --vc-orb-a:rgba(29,185,84,.24) !important;--vc-orb-b:rgba(0,230,118,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(29,185,84,.36),0 0 72px rgba(0,230,118,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(29,185,84,.45) !important;--vc-fill:linear-gradient(90deg,#1DB954,#00E676) !important;
  --vc-cta:linear-gradient(135deg,#1DB954,#00E676) !important;--vc-cta-shd:0 8px 32px rgba(29,185,84,.38) !important;
  --vc-qty-grad:linear-gradient(135deg,#1DB954,#00E676) !important;--vc-thumb-shd:0 0 0 5px rgba(29,185,84,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.vc-widget.t-twitter{
  --vc-c1:#1D9BF0 !important;--vc-c2:#71C7F7 !important;
  --vc-orb-a:rgba(29,155,240,.26) !important;--vc-orb-b:rgba(113,199,247,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(29,155,240,.38),0 0 72px rgba(113,199,247,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(29,155,240,.45) !important;--vc-fill:linear-gradient(90deg,#1D9BF0,#71C7F7) !important;
  --vc-cta:linear-gradient(135deg,#1D9BF0,#71C7F7) !important;--vc-cta-shd:0 8px 32px rgba(29,155,240,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#1D9BF0,#71C7F7) !important;--vc-thumb-shd:0 0 0 5px rgba(29,155,240,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
.t-threads{
  --vc-c1:#3E4653 !important;--vc-c2:#7C8798 !important;
  --vc-orb-a:rgba(124,135,152,.24) !important;--vc-orb-b:rgba(62,70,83,.20) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.14),0 0 28px rgba(124,135,152,.34),0 0 72px rgba(62,70,83,.20),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(124,135,152,.45) !important;--vc-fill:linear-gradient(90deg,#3E4653,#7C8798) !important;
  --vc-cta:linear-gradient(135deg,#3E4653,#7C8798) !important;--vc-cta-shd:0 8px 32px rgba(62,70,83,.45) !important;
  --vc-qty-grad:linear-gradient(135deg,#7C8798,#C7CDD9) !important;--vc-thumb-shd:0 0 0 5px rgba(124,135,152,.30),0 4px 14px rgba(0,0,0,.5) !important;
}
.t-whatsapp{
  --vc-c1:#25D366 !important;--vc-c2:#5BF08D !important;
  --vc-orb-a:rgba(37,211,102,.26) !important;--vc-orb-b:rgba(91,240,141,.18) !important;
  --vc-card-shd:inset 0 1px 0 rgba(255,255,255,.12),0 0 28px rgba(37,211,102,.38),0 0 72px rgba(91,240,141,.18),0 28px 55px rgba(0,0,0,.72) !important;
  --vc-ig-shd:0 0 22px rgba(37,211,102,.45) !important;--vc-fill:linear-gradient(90deg,#25D366,#5BF08D) !important;
  --vc-cta:linear-gradient(135deg,#25D366,#5BF08D) !important;--vc-cta-shd:0 8px 32px rgba(37,211,102,.40) !important;
  --vc-qty-grad:linear-gradient(135deg,#25D366,#5BF08D) !important;--vc-thumb-shd:0 0 0 5px rgba(37,211,102,.28),0 4px 14px rgba(0,0,0,.5) !important;
}
/* Active colors per network */
.vp-btn-net[data-net="instagram"].active{border-color:rgba(255,0,122,.7) !important;background:rgba(255,0,122,.12) !important;box-shadow:0 0 16px rgba(255,0,122,.25) !important}
.vp-btn-net[data-net="tiktok"].active{border-color:rgba(255,0,80,.7) !important;background:rgba(255,0,80,.12) !important;box-shadow:0 0 16px rgba(255,0,80,.25) !important}
.vp-btn-net[data-net="youtube"].active{border-color:rgba(255,0,0,.7) !important;background:rgba(255,0,0,.12) !important;box-shadow:0 0 16px rgba(255,0,0,.25) !important}
.vp-btn-net[data-net="facebook"].active{border-color:rgba(24,119,242,.7) !important;background:rgba(24,119,242,.12) !important;box-shadow:0 0 16px rgba(24,119,242,.25) !important}
.vp-btn-net[data-net="twitch"].active{border-color:rgba(145,70,255,.7) !important;background:rgba(145,70,255,.12) !important;box-shadow:0 0 16px rgba(145,70,255,.25) !important}
.vp-btn-net[data-net="kick"].active{border-color:rgba(83,252,24,.6) !important;background:rgba(83,252,24,.08) !important;box-shadow:0 0 16px rgba(83,252,24,.20) !important;color:#53FC18 !important}
.vp-btn-net[data-net="spotify"].active{border-color:rgba(29,185,84,.7) !important;background:rgba(29,185,84,.12) !important;box-shadow:0 0 16px rgba(29,185,84,.25) !important}
.vp-btn-net[data-net="twitter"].active{border-color:rgba(29,155,240,.7) !important;background:rgba(29,155,240,.12) !important;box-shadow:0 0 16px rgba(29,155,240,.25) !important}
.vp-btn-net[data-net="threads"].active{border-color:rgba(190,200,216,.75) !important;background:rgba(190,200,216,.12) !important;box-shadow:0 0 16px rgba(190,200,216,.22) !important}
.vp-btn-net[data-net="whatsapp"].active{border-color:rgba(37,211,102,.7) !important;background:rgba(37,211,102,.12) !important;box-shadow:0 0 16px rgba(37,211,102,.25) !important}
/* Scrollable nets en mobile */
.vp-nets-wrap{position:relative !important}
.vp-swipe-hint{display:none !important}
@media(max-width:600px){
  .vp-nets{flex-wrap:nowrap !important;overflow-x:auto !important;padding-bottom:6px !important;scrollbar-width:none !important}
  .vp-nets::-webkit-scrollbar{display:none !important}
  /* Gradient fade → derecha indicando scroll */
  .vp-nets-wrap::after{
    content:'' !important;
    position:absolute !important;
    top:0 !important;right:0 !important;
    width:52px !important;
    height:calc(100% - 6px) !important;
    background:linear-gradient(to right,transparent,#08080f) !important;
    pointer-events:none !important;
    transition:opacity .35s !important;
    z-index:2 !important;
  }
  .vp-nets-wrap.vp-at-end::after{opacity:0 !important}
  /* Hint deslizá */
  .vp-swipe-hint{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    font-size:11px !important;
    color:rgb(255, 255, 255) !important;
    letter-spacing:.06em !important;
    font-weight:600 !important;
    margin:7px 0 0 !important;
    animation:vp-hint-pulse 1.4s ease-in-out 4 !important;
    font-family:'Inter',sans-serif !important;
  }
  @keyframes vp-hint-pulse{
    0%,100%{opacity:.38}
    50%{opacity:.82}
  }
  .vp-swipe-hint.vp-hint-gone{display:none !important}
}

/* ══════════════════════════════════════════════════════
   WIDGET COMPONENTES
══════════════════════════════════════════════════════ */
.vc-widget,.vc-widget*,.vc-widget*::before,.vc-widget*::after{box-sizing:border-box !important}
.vc-widget{
  position:relative !important;padding:16px !important;overflow:visible !important;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif !important;
  display:none !important;
  container-type:inline-size !important;container-name:vcw !important;
}
.vc-widget.show{display:block !important;animation:vcIn .45s cubic-bezier(.22,1,.36,1) !important}
@keyframes vcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.vc-orb{position:absolute !important;border-radius:50% !important;filter:blur(70px) !important;pointer-events:none !important;will-change:transform,background !important;transition:background .9s ease !important}
.vc-orb-a{width:230px !important;height:230px !important;top:-70px !important;left:-50px !important;background:var(--vc-orb-a) !important;animation:vcOrbA 7s ease-in-out infinite !important}
.vc-orb-b{width:180px !important;height:180px !important;bottom:-55px !important;right:-45px !important;background:var(--vc-orb-b) !important;animation:vcOrbB 9s ease-in-out infinite !important}
@keyframes vcOrbA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,18px) scale(1.1)}}
@keyframes vcOrbB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-18px,-22px) scale(1.12)}}

/* Aura central, simula la luz que emana del card hacia atrás */
.vc-widget::after{content:'' !important;position:absolute !important;left:50% !important;top:52% !important;transform:translate(-50%,-50%) !important;width:80% !important;padding-top:80% !important;background:var(--vc-orb-a) !important;border-radius:50% !important;filter:blur(65px) !important;pointer-events:none !important;z-index:0 !important;opacity:.52 !important;transition:background .9s ease,opacity .9s ease !important}

.vc-card{position:relative !important;background:rgba(10,10,18,.86) !important;backdrop-filter:blur(24px) !important;-webkit-backdrop-filter:blur(24px) !important;border-radius:26px !important;padding:28px 22px 22px !important;max-width:430px !important;margin:0 auto !important;color:#fff !important;overflow:hidden !important;border:1px solid rgba(255,255,255,.10) !important;z-index:1 !important;box-shadow:var(--vc-card-shd) !important;transition:box-shadow .8s ease,border-color .8s ease !important}
/* Gradient border: highlight superior más visible + fade lateral/inferior */
.vc-card::before{content:'' !important;position:absolute !important;inset:0 !important;border-radius:26px !important;padding:1px !important;background:linear-gradient(145deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 70%) !important;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0) !important;-webkit-mask-composite:xor !important;mask-composite:exclude !important;pointer-events:none !important}

.vc-badge-w{display:inline-flex !important;align-items:center !important;gap:7px !important;background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.18) !important;border-radius:100px !important;padding:5px 14px !important;font-size:9px !important;font-weight:800 !important;letter-spacing:2.5px !important;color:rgba(255,255,255,.88) !important;text-transform:uppercase !important;margin-bottom:22px !important}
.vc-dot{width:7px !important;height:7px !important;border-radius:50% !important;flex-shrink:0 !important;background:var(--vc-c1) !important;box-shadow:0 0 9px color-mix(in srgb,var(--vc-c1) 90%,transparent) !important;animation:vcPulse 2s ease-in-out infinite !important}
@keyframes vcPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

.vc-step{display:flex !important;align-items:center !important;gap:8px !important;font-size:10px !important;text-transform:uppercase !important;letter-spacing:2px !important;font-weight:800 !important;margin-bottom:14px !important;color:#fff !important;opacity:.7 !important}
.vc-step::before{content:'?' !important;flex-shrink:0 !important;width:18px !important;height:18px !important;border-radius:50% !important;border:1.5px solid rgba(255,255,255,.35) !important;background:rgba(255,255,255,.08) !important;font-size:11px !important;font-weight:900 !important;color:rgba(255,255,255,.7) !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;letter-spacing:0 !important;opacity:1 !important}

.vc-qgrid{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:6px !important;background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.07) !important;border-radius:16px !important;padding:6px !important;margin-bottom:26px !important}
.vc-qgrid.cols-2{grid-template-columns:repeat(2,1fr) !important}
.vc-qgrid.cols-3{grid-template-columns:repeat(3,1fr) !important}.vc-qgrid.vc-subwrap{margin-top:-18px !important;margin-bottom:26px !important;background:rgba(255,255,255,.05) !important}.vc-qgrid.vc-subwrap[hidden]{display:none !important}
/* vc-fix-arg-mobile: columnas parejas en las grillas de 3 y en las sub-grillas de genero.
   1fr es minmax(auto,1fr), asi que un sublabel largo ensancha su columna y encoge las otras:
   a 384px quedaban 107/117/73 px y el tercer boton se recortaba. minmax(0,1fr) las empareja. */
.vc-qgrid.cols-3,.vc-qgrid.vc-subwrap{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.vc-q-btn{min-width:0 !important}
.vc-q-name,.vc-q-sub{max-width:100% !important;text-align:center !important;overflow-wrap:anywhere !important}
@media(max-width:600px){
.vc-qgrid.cols-3,.vc-qgrid.vc-subwrap{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:4px !important}
.vc-qgrid.cols-3 .vc-q-btn,.vc-qgrid.vc-subwrap .vc-q-btn{padding:9px 3px 7px !important}
.vc-qgrid.cols-3 .vc-q-name{font-size:9px !important;line-height:1.15 !important}
.vc-qgrid.cols-3 .vc-q-sub{font-size:7px !important;line-height:1.1 !important}
.vc-qgrid.vc-subwrap .vc-q-name{font-size:9.5px !important;line-height:1.15 !important}
}
.vc-q-btn{position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:4px !important;background:transparent !important;border:1px solid transparent !important;border-radius:10px !important;padding:10px 4px 8px !important;cursor:pointer !important;color:rgba(255,255,255,.78) !important;font-family:inherit !important;outline:none !important;-webkit-tap-highlight-color:transparent !important;transition:all .25s cubic-bezier(.34,1.56,.64,1) !important;user-select:none !important}
.vc-q-btn:hover{color:rgba(255,255,255,.9) !important;background:rgba(255,255,255,.07) !important}
.vc-q-btn:focus-visible{outline:2px solid var(--vc-c1) !important;outline-offset:2px !important}
.vc-q-btn.active{background:color-mix(in srgb,var(--vc-c1) 12%,transparent) !important;border-color:color-mix(in srgb,var(--vc-c1) 65%,transparent) !important;color:#fff !important;box-shadow:0 0 16px color-mix(in srgb,var(--vc-c1) 28%,transparent) !important;transform:translateY(-2px) !important}
.vc-q-icon{font-size:20px !important;line-height:1 !important}
.vc-q-name{font-size:10px !important;font-weight:700 !important;letter-spacing:.3px !important}

.vc-ig{width:48px !important;height:48px !important;border-radius:14px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 auto 18px !important;background:linear-gradient(135deg,var(--vc-c1),var(--vc-c2)) !important;box-shadow:var(--vc-ig-shd) !important;transition:background .6s ease,box-shadow .6s ease !important}
.vc-ig svg{width:26px !important;height:26px !important;stroke:#fff !important;fill:none !important}

.vc-qty{font-size:76px !important;font-weight:900 !important;line-height:1 !important;letter-spacing:-4px !important;font-variant-numeric:tabular-nums !important;text-align:center !important;background-image:var(--vc-qty-grad) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;will-change:contents !important}
.vc-qty-unit{font-size:10px !important;color:rgba(255,255,255,.82) !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:1.5px !important;text-align:center !important;margin:5px 0 12px !important}
.vc-qlabel{font-size:10px !important;color:rgba(255,255,255,.72) !important;font-weight:800 !important;letter-spacing:2px !important;text-transform:uppercase !important;text-align:center !important}

.vc-slider-zone{margin:24px 0 18px !important}

/* Track: altura 48px para que el thumb (28px) + su glow entren sin ser cortados por overflow:hidden del card */
.vc-track{
  position:relative !important;
  height:48px !important;
  display:flex !important;
  align-items:center !important;
  background:transparent !important;
  margin-bottom:8px !important;
}
/* Barra visual del track vía ::before */
.vc-track::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;right:0 !important;
  height:8px !important;
  background:rgba(255,255,255,.1) !important;
  border-radius:100px !important;
  pointer-events:none !important;
}
/* Fill con glow y transición suave */
.vc-fill{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  height:8px !important;
  border-radius:100px !important;
  pointer-events:none !important;
  z-index:1 !important;
  background:var(--vc-fill) !important;
  box-shadow:0 0 18px color-mix(in srgb,var(--vc-c1) 85%,transparent), 0 0 6px color-mix(in srgb,var(--vc-c1) 40%,transparent) !important;
  transition:width .15s ease, box-shadow .5s ease !important;
}
/* Input cubre toda la altura del track para que el thumb se centre sin margin-top */
.vc-range{
  position:absolute !important;
  width:100% !important;
  top:0 !important;left:0 !important;
  height:100% !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  background:transparent !important;
  outline:none !important;
  cursor:pointer !important;
  touch-action:pan-y !important;
  z-index:2 !important;
  margin:0 !important;
}
.vc-range::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:32px !important;height:32px !important;
  background:#fff !important;
  border-radius:50% !important;
  cursor:grab !important;
  border:3px solid rgba(255,255,255,.9) !important;
  box-shadow:var(--vc-thumb-shd) !important;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important;
}
.vc-range:active::-webkit-slider-thumb{cursor:grabbing !important;transform:scale(1.3) !important}
.vc-range:hover::-webkit-slider-thumb{transform:scale(1.18) !important}
.vc-range::-moz-range-thumb{
  width:32px !important;height:32px !important;
  background:#fff !important;
  border-radius:50% !important;
  border:3px solid rgba(255,255,255,.9) !important;
  cursor:grab !important;
  box-shadow:var(--vc-thumb-shd) !important;
}
.vc-range::-moz-range-track{background:transparent !important;height:8px !important}
.vc-marks{
  display:flex !important;
  justify-content:space-between !important;
  color:rgba(255,255,255,.65) !important;
  font-size:11px !important;font-weight:700 !important;letter-spacing:.5px !important;
  margin-top:4px !important;
}
/* Bounce y pop del botón de plataforma al seleccionar */
@keyframes vpNetPop{
  0%{transform:translateY(-1px) scale(1)}
  30%{transform:translateY(1px) scale(.93)}
  65%{transform:translateY(-3px) scale(1.07)}
  100%{transform:translateY(-1px) scale(1)}
}
.vp-btn-net.vp-net-pop{animation:vpNetPop .42s cubic-bezier(.34,1.56,.64,1) !important}

/* Pulse del CTA al llegar al máximo */
@keyframes vcCtaPulse{
  0%,100%{box-shadow:var(--vc-cta-shd)}
  45%{box-shadow:var(--vc-cta-shd),0 0 38px color-mix(in srgb,var(--vc-c1) 75%,transparent),0 0 12px color-mix(in srgb,var(--vc-c1) 50%,transparent)}
}
.vc-cta.vc-cta-pulse{animation:vcCtaPulse .65s ease-in-out 2 !important}


/* Bounce del número al mover el slider */
@keyframes vcQtyBounce{
  0%{transform:scale(1)}
  40%{transform:scale(1.13)}
  70%{transform:scale(.97)}
  100%{transform:scale(1)}
}
.vc-qty.bounce{animation:vcQtyBounce .38s cubic-bezier(.34,1.56,.64,1) both}

.vc-price-block{display:flex !important;align-items:baseline !important;justify-content:center !important;gap:5px !important;margin:8px 0 22px !important}
.vc-currency{font-size:26px !important;font-weight:900 !important;line-height:1 !important;color:var(--vc-c1) !important}
.vc-price-num{font-size:52px !important;font-weight:900 !important;letter-spacing:-3px !important;font-variant-numeric:tabular-nums !important;color:#fff !important}
.vc-ars{font-size:11px !important;color:rgba(255,255,255,.80) !important;font-weight:700 !important;letter-spacing:1px !important;margin-bottom:6px !important}

.vc-cta{display:block !important;position:relative !important;overflow:hidden !important;color:#fff !important;text-decoration:none !important;padding:18px 24px !important;border-radius:16px !important;font-weight:800 !important;font-size:16px !important;letter-spacing:1.5px !important;text-align:center !important;-webkit-tap-highlight-color:transparent !important;margin-bottom:20px !important;cursor:pointer !important;text-transform:uppercase !important;background:var(--vc-cta) !important;box-shadow:var(--vc-cta-shd) !important;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease !important;border:none !important;width:100% !important;font-family:'Inter',sans-serif !important}
.vc-cta:hover{transform:translateY(-3px) scale(1.01) !important}
.vc-cta:active{transform:translateY(0) scale(.98) !important}
.vc-cta:focus-visible{outline:2px solid #fff !important;outline-offset:3px !important}
.vc-shimmer{position:absolute !important;top:0 !important;left:-100% !important;width:55% !important;height:100% !important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent) !important;transform:skewX(-22deg) !important;animation:vcShimmer 2.8s ease-in-out infinite !important;pointer-events:none !important}
@keyframes vcShimmer{0%{left:-100%}38%,100%{left:165%}}
.vc-cta-lbl{position:relative !important;z-index:1 !important}

.vc-divider{height:1px !important;background:rgba(255,255,255,.06) !important;margin:18px 0 !important}

.vc-trust{display:flex !important;justify-content:center !important;align-items:stretch !important;gap:8px !important}
.vc-trust-item{display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px !important;flex:1 !important;min-width:0 !important;background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.06) !important;border-radius:14px !important;padding:14px 8px !important;transition:background .25s,border-color .25s,transform .25s cubic-bezier(.34,1.56,.64,1) !important}
.vc-trust-item:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.12) !important;transform:translateY(-2px) !important}
.vc-trust-icon{width:36px !important;height:36px !important;border-radius:10px !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;background:color-mix(in srgb,var(--vc-c1) 12%,transparent) !important;box-shadow:0 0 12px color-mix(in srgb,var(--vc-c1) 15%,transparent) !important}
.vc-trust-icon svg{flex-shrink:0 !important;fill:none !important;stroke:var(--vc-c1) !important}
.vc-trust-title{font-size:9px !important;font-weight:800 !important;color:#fff !important;letter-spacing:.4px !important;text-transform:uppercase !important;text-align:center !important;line-height:1.3 !important}
.vc-trust-sub{font-size:8px !important;font-weight:600 !important;color:rgba(255,255,255,.82) !important;text-align:center !important;line-height:1.4 !important}

.vc-popular-tag{position:absolute !important;top:-10px !important;left:50% !important;transform:translateX(-50%) !important;background:linear-gradient(90deg,#FFD700,#FF8C00) !important;color:#000 !important;font-size:7px !important;font-weight:900 !important;letter-spacing:.6px !important;text-transform:uppercase !important;padding:2px 7px !important;border-radius:100px !important;white-space:nowrap !important;box-shadow:0 2px 8px rgba(255,180,0,.5) !important;animation:vcTagPop .4s cubic-bezier(.34,1.56,.64,1) both !important}
@keyframes vcTagPop{from{transform:translateX(-50%) scale(.6);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

/* ── Container queries ── */
@container vcw (max-width:420px){
  .vc-qty{font-size:60px !important;letter-spacing:-3px !important}
  .vc-price-num{font-size:44px !important;letter-spacing:-2px !important}
  .vc-cta{padding:16px 18px !important;font-size:15px !important}
}
@container vcw (max-width:360px){
  .vc-qty{font-size:50px !important}
  .vc-price-num{font-size:36px !important}
  .vc-q-name{font-size:9px !important}
  .vc-trust-item{padding:10px 6px !important}
  .vc-trust-icon{width:30px !important;height:30px !important;border-radius:8px !important}
}

/* ══════════════════════════════════════════════════════
   STEPPER DE PASOS
══════════════════════════════════════════════════════ */
.vp-stepper{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 0 32px !important;
}
.vp-stepper-item{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:7px !important;
  opacity:.3 !important;
  transition:opacity .35s ease !important;
}
.vp-stepper-item.active{opacity:1 !important}
.vp-stepper-num{
  width:36px !important;height:36px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.14) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:15px !important;font-weight:900 !important;
  color:rgba(255,255,255,.35) !important;
  background:rgba(255,255,255,.04) !important;
  transition:border-color .35s,color .35s,box-shadow .35s,background .35s !important;
  font-family:'Inter',sans-serif !important;
}
.vp-stepper-item.active .vp-stepper-num{
  border-color:#ff007a !important;
  color:#fff !important;
  background:rgba(255,0,122,.15) !important;
  box-shadow:0 0 18px rgba(255,0,122,.5),0 0 6px rgba(255,0,122,.3) !important;
}
.vp-stepper-lbl{
  font-size:10px !important;font-weight:800 !important;
  letter-spacing:1.2px !important;text-transform:uppercase !important;
  color:rgba(255,255,255,.35) !important;
  transition:color .35s !important;white-space:nowrap !important;
  font-family:'Inter',sans-serif !important;
}
.vp-stepper-item.active .vp-stepper-lbl{color:rgba(255,255,255,.8) !important}
.vp-stepper-line{
  flex:1 !important;height:2px !important;
  min-width:36px !important;max-width:72px !important;
  background:rgba(255,255,255,.1) !important;
  border-radius:2px !important;
  margin:0 10px 22px !important;
  position:relative !important;
  overflow:hidden !important;
}
.vp-stepper-line::before{
  content:'' !important;
  position:absolute !important;
  left:0 !important;top:0 !important;
  height:100% !important;width:0% !important;
  background:rgba(255,0,122,.7) !important;
  border-radius:2px !important;
  transition:width .55s cubic-bezier(.4,0,.2,1) !important;
}
.vp-stepper-line.active::before{width:100% !important}

.vp-stepper-thumb{
  width:30px !important;height:30px !important;border-radius:50% !important;
  margin-bottom:6px !important;overflow:hidden !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(255,255,255,.06) !important;
  font-size:17px !important;line-height:1 !important;
  opacity:0 !important;transform:scale(.5) translateY(4px) !important;
  transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.56,.64,1) !important;
  pointer-events:none !important;
}
.vp-stepper-thumb.show{
  opacity:1 !important;transform:scale(1) translateY(0) !important;
}
.vp-stepper-thumb img{
  width:100% !important;height:100% !important;
  object-fit:cover !important;border-radius:50% !important;display:block !important;
}

/* ══════════════════════════════════════════════════════
   DESKTOP, layout dos columnas (plataformas izq · card centro)
══════════════════════════════════════════════════════ */
@media(min-width:900px){
  /* ── Sección 1: Hero full-width ── */
  .vp-hero{padding:128px 64px 48px !important}
  .vp-hero-inner{
    max-width:var(--wp--custom--ancho--general) !important;
    margin:0 auto !important;
  }
  .vp-h1{
    font-size:clamp(28px,3.2vw,44px) !important;
    line-height:1.1 !important;
    letter-spacing:-1.5px !important;
    margin-bottom:14px !important;
  }
  .vp-sub{
    font-size:15px !important;
    max-width:560px !important;
    margin-bottom:28px !important;
  }

  /* ── Sección 2: Widget full-width ── */
  .vp-section{
    max-width:var(--wp--custom--ancho--general) !important;
    padding:56px 64px 72px !important;
  }
  .vp-cols-wrap{width:100% !important}
  .vp-cols{
    display:flex !important;
    align-items:flex-start !important;
    gap:56px !important;
    margin-top:28px !important;
  }
  .vp-col-left{
    flex:0 0 300px !important;
    max-width:300px !important;
    width:300px !important;
    align-self:stretch !important;
    position:relative !important;
  }
  #vp-left-inner{
    position:absolute !important;
    width:100% !important;
    transition:border-color .8s ease, box-shadow .8s ease !important;
    background:rgba(10,10,18,.94) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border-radius:22px !important;
    border:1px solid color-mix(in srgb,var(--tab-c1,#ff007a) 30%,rgba(255,255,255,.07)) !important;
    box-shadow:
      0 0 28px color-mix(in srgb,var(--tab-c1,#ff007a) 22%,transparent),
      0 0 72px color-mix(in srgb,var(--tab-c1,#ff007a) 12%,transparent),
      0 28px 55px rgba(0,0,0,.72) !important;
    padding:20px !important;
  }
  .vp-col-middle{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
  }
  .vp-col-middle .vc-widget{
    width:100% !important;
    max-width:620px !important;
  }
  .vp-col-middle #vp-upsell,
  .vp-col-middle #vc-placeholder{
    width:100% !important;
    max-width:620px !important;
  }
  /* Botones de plataforma en columna vertical */
  .vp-col-left .vp-nets{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    overflow-x:unset !important;
  }
  .vp-col-left .vp-nets-wrap{overflow:visible !important}
  .vp-col-left .vp-btn-net{
    width:100% !important;
    justify-content:flex-start !important;
  }
  .vp-col-left .vp-swipe-hint{display:none !important}
  /* Cats en columna */
  .vp-col-left .vp-cats{
    flex-direction:column !important;
    gap:6px !important;
  }
  .vp-col-left .vp-btn-cat{
    width:100% !important;
    text-align:left !important;
  }

  /* ── Callout: oculto en desktop, el stepper ya orienta ── */
  .vp-callout{display:none !important}

  /* ══════════════════════════════════════════════════
     CARD COMPACTA, se adapta a la altura del menú izquierdo
     (~620px para 7 plataformas + 3 categorías)
  ══════════════════════════════════════════════════ */

  .vc-card{
    max-width:none !important;
    padding:20px 36px 18px !important;
  }

  /* Badge: menos margen inferior */
  .vc-badge-w{margin-bottom:12px !important;padding:4px 12px !important;font-size:8.5px !important}

  /* Steps de texto: ocultos, la interacción habla por sí sola */
  .vc-step{display:none !important}

  /* Ícono de red social: más pequeño */
  .vc-ig{
    width:36px !important;height:36px !important;
    border-radius:11px !important;
    margin:0 auto 10px !important;
  }
  .vc-ig svg{width:18px !important;height:18px !important}

  /* Quality grid: compacto y bien proporcionado */
  .vc-qgrid{
    gap:8px !important;
    padding:6px !important;
    border-radius:14px !important;
    margin-bottom:14px !important;
  }
  .vc-q-btn{padding:11px 8px 9px !important;border-radius:11px !important;gap:5px !important}
  .vc-q-icon{font-size:22px !important}
  .vc-q-name{font-size:11px !important;letter-spacing:.3px !important}

  /* Cantidad */
  .vc-qty{font-size:62px !important;letter-spacing:-3px !important}
  .vc-qty-unit{font-size:9px !important;margin:2px 0 4px !important}
  .vc-qlabel{font-size:9px !important}

  /* Slider */
  .vc-slider-zone{margin:12px 0 8px !important}

  /* Precio */
  .vc-price-block{margin:4px 0 14px !important}
  .vc-currency{font-size:22px !important}
  .vc-price-num{font-size:46px !important;letter-spacing:-2px !important}
  .vc-ars{font-size:10px !important}

  /* CTA */
  .vc-cta{padding:14px 24px !important;font-size:15px !important;letter-spacing:1.5px !important;margin-bottom:14px !important}

  /* Divider */
  .vc-divider{margin:12px 0 !important}

  /* Trust badges */
  .vc-trust{gap:8px !important}
  .vc-trust-item{padding:11px 8px !important;border-radius:12px !important}
  .vc-trust-icon{width:32px !important;height:32px !important;border-radius:8px !important}
  .vc-trust-icon svg{width:17px !important;height:17px !important}
  .vc-trust-title{font-size:9px !important}
  .vc-trust-sub{font-size:8px !important}

}

/* ══════════════════════════════════════════════════════
   MOBILE, plataformas en grid + mejoras UX
══════════════════════════════════════════════════════ */
@media(max-width:600px){
  .vp-section{padding:28px 14px 48px !important}
  /* Callout → oculto en mobile (stepper lo reemplaza) */
  .vp-callout{display:none !important}
  /* Plataformas: grid 3 columnas tipo app icons */
  .vp-nets{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    overflow-x:unset !important;
    flex-wrap:unset !important;
    padding-bottom:0 !important;
    gap:8px !important;
  }
  .vp-nets-wrap::after{display:none !important}
  .vp-swipe-hint{display:none !important}
  .vp-btn-net{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    padding:14px 6px 12px !important;
    font-size:12px !important;
    text-align:center !important;
    min-width:0 !important;
    line-height:1.2 !important;
    border-radius:14px !important;
    width:100% !important;
  }
  .vp-net-ico{width:30px !important;height:30px !important}
  /* Categorías: chips, ajuste mobile */
  .vp-cats{gap:8px !important}
  .vp-btn-cat{padding:12px 13px !important;font-size:14px !important;transform:none !important}
  .vp-btn-cat:hover{transform:none !important}
  .vp-btn-cat.selected{transform:none !important}
  .vp-chip-ico{width:36px !important;height:36px !important;font-size:18px !important}
  .vp-chip-name{font-size:14px !important}
/* Quality grid: 4 categorías → 2×2 en mobile */
  .vc-qgrid{grid-template-columns:repeat(2,1fr) !important}
  /* Slider track más alto → tap target más grande */
  .vc-track::before{height:10px !important}
  .vc-fill{height:10px !important}
  /* Stepper más compacto en mobile */
  .vp-stepper-line{min-width:24px !important;max-width:48px !important;margin:0 6px 22px !important}
}

/* ── Responsive hero ── */
@media(max-width:500px){
  .vp-hero{padding:28px 16px 32px !important}
  .vp-h1{letter-spacing:-1px !important}
  .vp-stats{width:100% !important;justify-content:center !important}
  .vp-stat{flex:1 1 auto !important;min-width:60px !important;padding:10px 12px !important}
  .vp-stat-num{font-size:16px !important}
}
@media(max-width:380px){
  .vp-stat{padding:8px 10px !important}
}

/* ══════════════════════════════════════════════════════
   UPSELL POST-COMPRA
══════════════════════════════════════════════════════ */
.vp-upsell{
  display:none !important;
  margin-top:28px !important;
  animation:vcIn .5s cubic-bezier(.22,1,.36,1) !important;
}
.vp-upsell.show{display:block !important}

.vp-upsell-head{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-bottom:18px !important;
}
.vp-upsell-check{
  width:36px !important;height:36px !important;border-radius:50% !important;
  background:linear-gradient(135deg,#16a34a,#15803d) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;
  box-shadow:0 0 20px rgba(22,163,74,.45) !important;
}
.vp-upsell-check svg{stroke:#fff !important;fill:none !important}
.vp-upsell-title{
  font-size:16px !important;font-weight:800 !important;color:#fff !important;line-height:1.3 !important;
}
.vp-upsell-title span{
  display:block !important;font-size:12px !important;font-weight:500 !important;
  color:rgba(255,255,255,.5) !important;margin-top:2px !important;
}

.vp-upsell-cards{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;
  gap:12px !important;
}
.vp-upsell-card{
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:16px !important;
  padding:18px 16px !important;
  cursor:pointer !important;
  transition:background .2s,border-color .2s,transform .25s cubic-bezier(.34,1.56,.64,1) !important;
  text-align:left !important;
  font-family:'Inter',sans-serif !important;
  position:relative !important;
  overflow:hidden !important;
}
.vp-upsell-card:hover{
  background:rgba(255,0,122,.1) !important;
  border-color:rgba(255,0,122,.45) !important;
  transform:translateY(-3px) !important;
}
.vp-upsell-card-icon{font-size:28px !important;margin-bottom:10px !important;display:block !important;line-height:1 !important}
.vp-upsell-card-name{
  font-size:14px !important;font-weight:800 !important;color:#fff !important;
  margin-bottom:4px !important;
}
.vp-upsell-card-desc{
  font-size:12px !important;color:rgba(255,255,255,.5) !important;
  margin-bottom:14px !important;line-height:1.4 !important;
}
.vp-upsell-card-cta{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  font-size:12px !important;font-weight:700 !important;color:#ff007a !important;
  letter-spacing:.4px !important;text-transform:uppercase !important;
}
.vp-upsell-card-cta svg{transition:transform .2s !important}
.vp-upsell-card:hover .vp-upsell-card-cta svg{transform:translateX(4px) !important}
/* ══════════════════════════════════════════════════════
   TABS DE SERVICIO, dentro de col-middle (solo desktop)
══════════════════════════════════════════════════════ */
.vp-tab-bar{
  display:none;
  gap:8px !important;
  width:100% !important;
  max-width:580px !important;
  margin-bottom:14px !important;
  flex-shrink:0 !important;
}
.vp-tab-btn{
  flex:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  background:rgba(255,255,255,.05) !important;
  border:1.5px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  padding:12px 10px !important;
  cursor:pointer !important;
  color:rgba(255,255,255,.78) !important;
  font-size:12px !important;
  font-weight:700 !important;
  font-family:'Inter',sans-serif !important;
  letter-spacing:.2px !important;
  white-space:nowrap !important;
  transition:background .2s,border-color .2s,color .2s,box-shadow .2s,transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
.vp-tab-btn:hover{
  background:rgba(255,255,255,.09) !important;
  color:rgba(255,255,255,.9) !important;
  border-color:rgba(255,255,255,.2) !important;
  transform:translateY(-2px) !important;
}
.vp-tab-btn.active{
  background:color-mix(in srgb,var(--tab-c1,#ff007a) 12%,transparent) !important;
  border-color:color-mix(in srgb,var(--tab-c1,#ff007a) 65%,transparent) !important;
  color:#fff !important;
  box-shadow:0 0 18px color-mix(in srgb,var(--tab-c1,#ff007a) 22%,transparent) !important;
  transform:translateY(-2px) !important;
}
.vp-tab-ico{font-size:17px !important;line-height:1 !important;flex-shrink:0 !important}
.vp-tab-name{font-size:12px !important;font-weight:700 !important}

@media(min-width:900px){
  /* Tabs visibles en desktop */
  .vp-tab-bar{display:flex !important}
  /* Chips del panel izquierdo ocultos en desktop, reemplazados por tabs */
  .vp-cat-label{display:none !important}
  .vp-col-left .vp-cats{display:none !important}

  /* ── Tab bar + card unificados visualmente ── */
  #vp-tab-bar{
    flex-wrap:wrap !important;
    max-width:620px !important;
    width:100% !important;
    background:rgba(10,10,18,.86) !important;
    backdrop-filter:blur(24px) !important;
    -webkit-backdrop-filter:blur(24px) !important;
    border:1px solid rgba(255,255,255,.11) !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    border-radius:22px 22px 0 0 !important;
    padding:16px 16px 0 !important;
    margin-bottom:0 !important;
    gap:6px !important;
    position:relative !important;
  }
  /* Label "Elegí el servicio" como primer flex item full-width */
  #vp-tab-bar::before{
    content:'② Elegí el servicio';
    flex-basis:100% !important;
    width:100% !important;
    font-size:9px !important;
    font-weight:800 !important;
    letter-spacing:2.5px !important;
    text-transform:uppercase !important;
    color:rgba(255,255,255,.60) !important;
    text-align:center !important;
    padding-bottom:14px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    margin-bottom:4px !important;
  }
  /* Tabs: verticales, más grandes */
  .vp-tab-btn{
    flex-direction:column !important;
    gap:5px !important;
    padding:14px 10px 10px !important;
    min-height:72px !important;
    border-radius:12px 12px 0 0 !important;
    border-width:0 !important;
    border-bottom:3px solid transparent !important;
    font-size:11px !important;
    letter-spacing:.3px !important;
    transform:none !important;
  }
  .vp-tab-btn:hover{
    transform:none !important;
    background:rgba(255,255,255,.08) !important;
    border-bottom-color:rgba(255,255,255,.18) !important;
  }
  .vp-tab-btn.active{
    background:color-mix(in srgb,var(--tab-c1,#ff007a) 14%,transparent) !important;
    border-bottom-color:var(--tab-c1,#ff007a) !important;
    box-shadow:0 -2px 20px color-mix(in srgb,var(--tab-c1,#ff007a) 20%,transparent) !important;
    transform:none !important;
  }
  .vp-tab-ico{font-size:24px !important}
  .vp-tab-name{font-size:11px !important;font-weight:800 !important;letter-spacing:.3px !important}

  /* ── Neon unificado: tab bar + card comparten borde y glow del color de plataforma ── */
  #vp-tab-bar{
    border-color:color-mix(in srgb,var(--tab-c1,#ff007a) 38%,rgba(255,255,255,.08)) !important;
    border-bottom-color:rgba(255,255,255,.05) !important;
    box-shadow:
      0 -4px 28px color-mix(in srgb,var(--tab-c1,#ff007a) 18%,transparent),
      0  0   50px color-mix(in srgb,var(--tab-c1,#ff007a) 10%,transparent),
      inset 0 1px 0 rgba(255,255,255,.13) !important;
    transition:border-color .8s ease,box-shadow .8s ease !important;
  }

  /* Card se conecta al tab bar: sin borde ni radio superior */
  .vp-col-middle .vc-widget{
    padding:0 !important;
  }
  .vp-col-middle .vc-card{
    border-radius:0 0 22px 22px !important;
    border-top:none !important;
    border-color:color-mix(in srgb,var(--tab-c1,#ff007a) 30%,rgba(255,255,255,.07)) !important;
    box-shadow:
      0 0  28px color-mix(in srgb,var(--tab-c1,#ff007a) 22%,transparent),
      0 0  72px color-mix(in srgb,var(--tab-c1,#ff007a) 12%,transparent),
      0 28px 55px rgba(0,0,0,.72) !important;
    transition:border-color .8s ease,box-shadow .8s ease !important;
  }
  .vp-col-middle .vc-card::before{
    border-radius:0 0 26px 26px !important;
  }
}

/* ── Scroll suave global (hash links) ── */
html{scroll-behavior:smooth}

/* ── Anclas de navegación (invisibles, no afectan layout) ── */
a.vp-anchor{display:block !important;height:0 !important;visibility:hidden !important;pointer-events:none !important;overflow:hidden !important;margin:0 !important;padding:0 !important;scroll-margin-top:80px !important}
/* Mobile: el widget scrolleado necesita aire arriba */
.vc-widget{scroll-margin-top:72px}
/* Desktop: la sección entera es el target de scroll, no el widget individual */
@media(min-width:900px){
  a.vp-anchor{scroll-margin-top:32px !important}
  .vp-section{scroll-margin-top:32px !important}
  .vc-widget{scroll-margin-top:0 !important}
}

/* ══════════════════════════════════════════════════════
   MEJORAS v4.1
   1·Precio/unidad  2·Subtítulo calidad  3·Hitos slider
   4·Social proof   5·Tab color plataforma
══════════════════════════════════════════════════════ */

/* 2, Subtítulo debajo del nombre de calidad */
.vc-q-sub{
  font-size:8px !important;
  color:rgba(255,255,255,.33) !important;
  font-weight:500 !important;
  text-align:center !important;
  line-height:1 !important;
  margin-top:2px !important;
  transition:color .25s !important;
  white-space:nowrap !important;
}
.vc-q-btn.active .vc-q-sub,.vc-q-btn:hover .vc-q-sub{color:rgba(255,255,255,.6) !important}

/* 3, Badge de hito del slider */
.vc-milestone{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  background:rgba(255,165,0,.10) !important;
  border:1px solid rgba(255,165,0,.28) !important;
  border-radius:100px !important;
  padding:0 12px !important;
  font-size:11px !important;
  font-weight:700 !important;
  color:rgba(255,205,60,.92) !important;
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
  margin:0 auto 0 !important;
  transform:scale(.9) !important;
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1),max-height .28s ease,padding .28s ease,margin .28s ease !important;
  pointer-events:none !important;
  white-space:nowrap !important;
}
.vc-milestone.show{
  opacity:1 !important;
  transform:scale(1) !important;
  max-height:28px !important;
  padding:5px 12px !important;
  margin:0 auto 10px !important;
}

/* 4, Social proof toast */
.vc-social-proof{
  display:flex !important;
  align-items:center !important;
  gap:9px !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  padding:10px 13px !important;
  font-size:11px !important;
  color:rgba(255,255,255,.55) !important;
  font-weight:500 !important;
  line-height:1.35 !important;
  margin-top:10px !important;
  opacity:0 !important;
  animation:vcProofIn .5s 1.2s cubic-bezier(.22,1,.36,1) forwards !important;
}
.vc-social-proof strong{color:rgba(255,255,255,.82) !important;font-weight:700 !important}
@keyframes vcProofIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.vc-proof-avatar{
  width:26px !important;height:26px !important;border-radius:50% !important;
  background:linear-gradient(135deg,var(--vc-c1),var(--vc-c2)) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  font-size:13px !important;flex-shrink:0 !important;line-height:1 !important;
}
.vc-proof-live{
  display:inline-flex !important;align-items:center !important;gap:4px !important;
  margin-left:auto !important;flex-shrink:0 !important;
}
.vc-proof-dot{
  width:6px !important;height:6px !important;border-radius:50% !important;
  background:#4ade80 !important;
  box-shadow:0 0 6px rgba(74,222,128,.7) !important;
  animation:vcProofPulse 1.8s ease-in-out infinite !important;
  flex-shrink:0 !important;
}
@keyframes vcProofPulse{0%,100%{opacity:1}50%{opacity:.3}}
.vc-proof-live-txt{font-size:9px !important;color:#4ade80 !important;font-weight:700 !important;letter-spacing:.3px !important}

/* ── Ajustes desktop para las nuevas mejoras ── */
@media(min-width:900px){
  .vc-milestone.show{max-height:24px !important;padding:4px 10px !important;font-size:10.5px !important}
  .vc-social-proof{font-size:10.5px !important;padding:8px 11px !important;margin-top:8px !important}
  .vc-proof-avatar{width:23px !important;height:23px !important;font-size:11px !important}
}

/* A, Barra sticky mobile */
.vc-sticky-bar{
  position:fixed !important;bottom:0 !important;left:0 !important;right:0 !important;
  z-index:9999 !important;
  background:rgba(8,8,15,.97) !important;
  backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  padding:12px 20px 16px !important;
  display:flex !important;align-items:center !important;gap:12px !important;
  transform:translateY(110%) !important;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1) !important;
  box-shadow:0 -8px 32px rgba(0,0,0,.55) !important;
}
.vc-sticky-bar.show{transform:translateY(0) !important}
.vc-sticky-info{display:flex !important;flex-direction:column !important;gap:2px !important;flex:1 !important;min-width:0 !important}
.vc-sticky-qty{font-size:17px !important;font-weight:900 !important;color:#fff !important;line-height:1 !important;letter-spacing:-.5px !important}
.vc-sticky-name{font-size:11px !important;color:rgba(255,255,255,.45) !important;font-weight:600 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
.vc-sticky-price{display:flex !important;align-items:baseline !important;gap:3px !important;flex-shrink:0 !important}
.vc-sticky-price-num{font-size:20px !important;font-weight:900 !important;color:#fff !important;letter-spacing:-1px !important}
.vc-sticky-ars{font-size:9px !important;color:rgba(255,255,255,.45) !important;font-weight:700 !important;letter-spacing:.5px !important}
.vc-sticky-cta{
  flex-shrink:0 !important;background:linear-gradient(135deg,#ff007a,#8a2be2) !important;
  border:none !important;border-radius:12px !important;color:#fff !important;
  font-size:13px !important;font-weight:800 !important;letter-spacing:.8px !important;
  padding:12px 16px !important;cursor:pointer !important;font-family:'Inter',sans-serif !important;
  text-transform:uppercase !important;white-space:nowrap !important;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1) !important;
}
.vc-sticky-cta:active{transform:scale(.95) !important}
@media(min-width:900px){.vc-sticky-bar{display:none !important;transform:none !important}}


/* C, Resumen del pedido */
.vc-order-summary{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:7px !important;font-size:11.5px !important;color:rgba(255,255,255,.52) !important;
  font-weight:600 !important;text-align:center !important;
  background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;padding:8px 14px !important;margin:-6px 0 14px !important;
  opacity:0 !important;transition:opacity .3s .1s !important;
}
.vc-order-summary.visible{opacity:1 !important}
.vc-order-summary strong{color:rgba(255,255,255,.88) !important;font-weight:700 !important}
.vc-order-check{
  width:18px !important;height:18px !important;border-radius:50% !important;
  background:rgba(74,222,128,.15) !important;border:1.5px solid rgba(74,222,128,.4) !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;font-size:10px !important;line-height:1 !important;color:#4ade80 !important;
}

/* E, Descripción de calidad seleccionada */
.vc-q-desc{
  font-size:11px !important;color:rgba(255,255,255,.4) !important;font-weight:500 !important;
  text-align:center !important;line-height:1.45 !important;min-height:16px !important;
  margin:-16px 0 16px !important;padding:0 6px !important;
  opacity:0 !important;transition:opacity .25s !important;
}
.vc-q-desc.visible{opacity:1 !important}

/* (eliminado: pedidos procesados hoy) */
/* placeholder para no romper el bloque siguiente */
.vp-orders-today{display:none !important}
.vp-orders-num{display:none !important;
  font-variant-numeric:tabular-nums !important;
}
@media(min-width:900px){
.vc-order-summary{font-size:10.5px !important;padding:7px 12px !important;margin:-4px 0 10px !important}
  .vc-q-desc{font-size:10.5px !important;margin:-12px 0 12px !important}
  /* .vp-orders-today eliminado */
}

/* ══════════════════════════════════════════════════════
   MEJORAS v4.3, Usuario · FAQ · Reviews · Placeholder
══════════════════════════════════════════════════════ */

/* (eliminado: campo de usuario) */
.vc-user-field{display:none !important}
.vc-user-label{display:none !important}
.vc-user-input{
  display:none !important;
  padding:12px 16px !important;color:#fff !important;font-size:14px !important;
  font-weight:600 !important;font-family:'Inter',sans-serif !important;outline:none !important;
  transition:border-color .2s,background .2s,box-shadow .2s !important;
}
.vc-user-input::placeholder{color:rgba(255,255,255,.25) !important;font-weight:400 !important}
.vc-user-input:focus{
  border-color:var(--vc-c1,#ff007a) !important;background:rgba(255,255,255,.07) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--vc-c1,#ff007a) 15%,transparent) !important;
}
.vc-user-input.vc-input-error{border-color:rgba(255,80,80,.7) !important;background:rgba(255,0,0,.05) !important}
@keyframes vcInputShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.vc-user-input.vc-input-shake{animation:vcInputShake .42s ease !important}
.vc-user-hint{font-size:10px !important;color:rgba(255,255,255,.28) !important;font-weight:500 !important;padding:0 2px !important}
@media(min-width:900px){
  .vc-user-input{padding:10px 14px !important;font-size:13px !important}
  .vc-user-field{margin:0 0 10px !important}
}

/* Comparativa de calidades */
.vc-q-compare{margin:-14px 0 14px !important}
.vc-q-compare-toggle{
  display:flex !important;align-items:center !important;justify-content:center !important;gap:5px !important;
  background:none !important;border:none !important;font-size:11px !important;font-weight:700 !important;
  color:rgba(255,255,255,.35) !important;font-family:'Inter',sans-serif !important;
  cursor:pointer !important;width:100% !important;padding:4px !important;transition:color .2s !important;
}
.vc-q-compare-toggle:hover{color:rgba(255,255,255,.6) !important}
.vc-q-compare-chevron{transition:transform .3s !important;display:inline-block !important}
.vc-q-compare.open .vc-q-compare-chevron{transform:rotate(180deg) !important}
.vc-q-compare-body{max-height:0 !important;overflow:hidden !important;transition:max-height .35s cubic-bezier(.4,0,.2,1) !important}
.vc-q-compare.open .vc-q-compare-body{max-height:300px !important}
.vc-q-compare-list{display:flex !important;flex-direction:column !important;gap:5px !important;padding-top:8px !important}
.vc-q-compare-row{
  display:flex !important;gap:10px !important;align-items:flex-start !important;
  padding:8px 10px !important;background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.06) !important;border-radius:10px !important;
}
.vc-q-compare-name{font-size:11px !important;font-weight:800 !important;color:rgba(255,255,255,.62) !important;flex:0 0 72px !important;line-height:1.4 !important}
.vc-q-compare-desc{font-size:11px !important;color:rgba(255,255,255,.38) !important;font-weight:500 !important;line-height:1.4 !important;flex:1 !important}

/* Badges de pago eliminados */

/* CTA success animation mejorada */
@keyframes vcSuccessScale{0%{transform:scale(1)}25%{transform:scale(1.05)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.vc-cta.vc-success{animation:vcSuccessScale .5s cubic-bezier(.34,1.56,.64,1) !important}

/* Placeholder rediseñado */
.vc-placeholder-empty{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  justify-content:center !important;padding:56px 24px !important;text-align:center !important;
  min-height:400px !important;
}
.vc-ph-icon{font-size:44px !important;margin-bottom:20px !important;animation:vcPhFloat 3s ease-in-out infinite !important}
@keyframes vcPhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.vc-ph-title{font-size:17px !important;font-weight:800 !important;color:rgba(255,255,255,.7) !important;margin-bottom:8px !important;letter-spacing:-.3px !important}
.vc-ph-sub{font-size:13px !important;color:rgba(255,255,255,.32) !important;font-weight:500 !important;max-width:240px !important;line-height:1.5 !important;margin-bottom:28px !important}
.vc-ph-steps{display:flex !important;align-items:center !important;gap:8px !important;flex-wrap:wrap !important;justify-content:center !important}
.vc-ph-step{background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.1) !important;border-radius:8px !important;padding:6px 12px !important;font-size:11px !important;font-weight:700 !important;color:rgba(255,255,255,.45) !important}
.vc-ph-arrow{color:rgba(255,255,255,.18) !important;font-size:14px !important}
.vc-ph-trusted{display:flex !important;gap:16px !important;flex-wrap:wrap !important;justify-content:center !important;margin-top:28px !important}
.vc-ph-trust-item{font-size:11px !important;color:rgba(255,255,255,.35) !important;font-weight:600 !important}
@media(min-width:900px){.vc-placeholder-empty{min-height:480px !important}}

/* FAQ */
.vp-faq{padding:56px 24px 64px !important;max-width:var(--wp--custom--ancho--general) !important;margin:0 auto !important;border-top:1px solid rgba(255,255,255,.06) !important}
.vp-faq-title{font-size:clamp(22px,4vw,32px) !important;font-weight:900 !important;color:#fff !important;letter-spacing:-1px !important;margin-bottom:32px !important;text-align:center !important}
.vp-faq-title span{background:linear-gradient(135deg,#ff007a,#8a2be2) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important}
.vp-faq-item{border:1px solid rgba(255,255,255,.08) !important;border-radius:16px !important;overflow:hidden !important;margin-bottom:8px !important;background:rgba(255,255,255,.02) !important;transition:border-color .25s !important}
.vp-faq-item.open{border-color:rgba(255,0,122,.3) !important}
.vp-faq-q{
  width:100% !important;display:flex !important;align-items:center !important;justify-content:space-between !important;
  gap:16px !important;padding:18px 22px !important;background:none !important;border:none !important;
  color:#fff !important;font-size:15px !important;font-weight:700 !important;text-align:left !important;
  cursor:pointer !important;font-family:'Inter',sans-serif !important;transition:background .2s !important;
}
.vp-faq-q:hover{background:rgba(255,255,255,.03) !important}
.vp-faq-chevron{width:22px !important;height:22px !important;border-radius:50% !important;border:1.5px solid rgba(255,255,255,.18) !important;display:flex !important;align-items:center !important;justify-content:center !important;flex-shrink:0 !important;font-size:12px !important;color:rgba(255,255,255,.45) !important;transition:transform .3s,border-color .25s,background .25s,color .25s !important}
.vp-faq-item.open .vp-faq-chevron{transform:rotate(180deg) !important;border-color:rgba(255,0,122,.5) !important;background:rgba(255,0,122,.1) !important;color:#ff007a !important}
.vp-faq-body{max-height:0 !important;overflow:hidden !important;transition:max-height .35s cubic-bezier(.4,0,.2,1) !important}
.vp-faq-item.open .vp-faq-body{max-height:300px !important}
.vp-faq-a{padding:0 22px 18px !important;font-size:14px !important;color:rgba(255,255,255,.58) !important;line-height:1.65 !important;font-weight:400 !important}
.vp-faq-a strong{color:rgba(255,255,255,.85) !important;font-weight:600 !important}

/* Reviews */
.vp-reviews{padding:0 24px 72px !important;max-width:var(--wp--custom--ancho--general) !important;margin:0 auto !important}
.vp-reviews-title{font-size:clamp(22px,4vw,32px) !important;font-weight:900 !important;color:#fff !important;letter-spacing:-1px !important;margin-bottom:8px !important;text-align:center !important}
.vp-reviews-title span{background:linear-gradient(135deg,#ff007a,#8a2be2) !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important}
.vp-reviews-sub{font-size:14px !important;color:rgba(255,255,255,.42) !important;text-align:center !important;margin-bottom:32px !important;font-weight:500 !important}
.vp-reviews-grid{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)) !important;gap:12px !important}
.vp-review-card{background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.09) !important;border-radius:18px !important;padding:20px !important;transition:border-color .25s,transform .25s cubic-bezier(.34,1.56,.64,1) !important}
.vp-review-card:hover{border-color:rgba(255,255,255,.16) !important;transform:translateY(-3px) !important}
.vp-review-head{display:flex !important;align-items:center !important;gap:12px !important;margin-bottom:10px !important}
.vp-review-avatar{width:42px !important;height:42px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:20px !important;flex-shrink:0 !important;background:linear-gradient(135deg,rgba(255,0,122,.22),rgba(138,43,226,.22)) !important;border:1.5px solid rgba(255,255,255,.1) !important}
.vp-review-name{font-size:13px !important;font-weight:800 !important;color:#fff !important;line-height:1 !important}
.vp-review-service{font-size:11px !important;color:rgba(255,255,255,.38) !important;font-weight:500 !important;margin-top:3px !important}
.vp-review-stars{color:#FFD700 !important;font-size:12px !important;letter-spacing:1px !important;margin-bottom:8px !important}
.vp-review-text{font-size:13px !important;color:rgba(255,255,255,.58) !important;line-height:1.6 !important;font-weight:400 !important}

/* ── Igualar card con panel izquierdo: sin orbs, sin aura, sin glow ── */
.vc-orb{display:none !important}
.vc-widget::after{display:none !important}
.vc-card::before{display:none !important}
.vc-card{
  box-shadow:0 4px 24px rgba(0,0,0,.55) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
/* Sin animación de entrada: la card aparece al instante al cambiar de plataforma */
.vc-widget.show{animation:none !important}
@media(min-width:900px){
  .vp-col-middle .vc-card{
    box-shadow:0 4px 24px rgba(0,0,0,.55) !important;
    border-color:color-mix(in srgb,var(--tab-c1,#ff007a) 30%,rgba(255,255,255,.07)) !important;
  }
}

/* Trust badges globales, debajo del card principal */
.vp-trust-global{
  --vc-c1:#ff007a;
  display:flex !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:10px !important;
  margin-top:28px !important;
  padding:0 4px !important;
}
.vp-trust-global .vc-trust-item{flex:1 !important}

/* ══════════════════════════════════════════════════════
   REDISEÑO DESKTOP
   Mantiene el split de dos columnas y le aplica el lenguaje
   visual del mockup: pasos numerados, stepper de 4 tramos,
   calidad en 2×2, features en fila y cierre con pago seguro.
   Va al final del <style> para ganarle por ORDEN a los @media
   de arriba, que tienen la misma especificidad.
══════════════════════════════════════════════════════ */

/* ── 1. "¿Cómo comprar?": link chico plegable ──────────
   El div deja de ser la caja: la caja es .vp-callout-body. */
.vp-callout{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;
  gap:10px !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  margin-bottom:14px !important;
}
.vp-callout-toggle{
  display:inline-flex !important;align-items:center !important;gap:7px !important;
  background:none !important;border:none !important;padding:2px 0 !important;
  font-family:'Inter',sans-serif !important;font-size:13px !important;font-weight:700 !important;
  color:#ff007a !important;cursor:pointer !important;
  transition:color .2s,opacity .2s !important;
}
.vp-callout-toggle:hover{opacity:.78 !important}
.vp-callout-toggle:focus-visible{outline:2px solid #ff007a !important;outline-offset:3px !important;border-radius:6px !important}
.vp-callout-i{
  width:16px !important;height:16px !important;border-radius:50% !important;
  border:1.5px solid currentColor !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  font-size:10px !important;font-weight:900 !important;line-height:1 !important;flex-shrink:0 !important;
  font-style:italic !important;
}
.vp-callout-body{
  display:none !important;
  box-sizing:border-box !important;
  align-items:center !important;gap:14px !important;width:100% !important;
  background:rgba(255,0,122,.08) !important;
  border:1px solid rgba(255,0,122,.28) !important;
  border-radius:16px !important;
  padding:16px 20px !important;
  box-shadow:0 0 24px rgba(255,0,122,.1) !important;
}
.vp-callout.vp-callout-open .vp-callout-body{display:flex !important}
/* Con el detalle abierto el link de arriba es redundante */
.vp-callout.vp-callout-open .vp-callout-toggle{display:none !important}

/* ── 1b. Contenido del callout: anillo + checklist ────
   Objetivo: mockup `lab/mockups/Como comprar.png`. Reemplaza el párrafo con
   pasos numerados 1/2/3 por "Así de fácil" + 3 items con check, y el emoji
   suelto por un anillo con gradiente. `.vp-callout-icon` y `.vp-callout-text`
   quedan sin uso (sus reglas de arriba son inofensivas). */
.vp-callout-ring{
  position:relative !important;
  width:72px !important;height:72px !important;flex-shrink:0 !important;
  display:grid !important;place-items:center !important;
  font-size:26px !important;line-height:1 !important;
}
/* El anillo va de pseudo-elemento y se calan con mask, así el agujero deja ver
   el fondo real de la tarjeta y no hay que adivinar un color que lo tape. */
.vp-callout-ring::before{
  content:'' !important;position:absolute !important;inset:0 !important;
  border-radius:50% !important;
  background:conic-gradient(from 200deg,#ff007a 0deg 250deg,rgba(255,255,255,.10) 250deg 360deg) !important;
  -webkit-mask:radial-gradient(circle closest-side,transparent 76%,#000 77%) !important;
          mask:radial-gradient(circle closest-side,transparent 76%,#000 77%) !important;
  filter:drop-shadow(0 0 7px rgba(255,0,122,.5)) !important;
}
.vp-callout-copy{display:flex !important;flex-direction:column !important;gap:7px !important;min-width:0 !important}
.vp-callout-title{
  margin:0 !important;color:#ff007a !important;
  font-size:13px !important;font-weight:700 !important;line-height:1 !important;
}
.vp-callout-steps{
  margin:0 !important;padding:0 !important;list-style:none !important;
  display:flex !important;flex-direction:column !important;gap:6px !important;
}
.vp-callout-steps li{
  display:flex !important;align-items:center !important;gap:9px !important;
  color:#fff !important;font-size:13px !important;font-weight:500 !important;line-height:1.3 !important;
}
.vp-callout-steps li::before{
  content:'✓' !important;flex-shrink:0 !important;
  width:17px !important;height:17px !important;border-radius:50% !important;
  border:1.5px solid rgba(255,0,122,.55) !important;
  color:#ff007a !important;font-size:10px !important;font-weight:900 !important;
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
}
/* El pie va de ancho completo debajo del anillo y del texto, como en el mockup: además de
   ser fiel, a 430px no entra en una línea dentro de la columna de texto (~215px). */
.vp-callout-body{flex-wrap:wrap !important}

/* ── CLS: el callout abierto tiene que ser el DEFAULT del CSS en mobile ─────────────
   Medido el 2026-08-11: el CLS de 0,15 de la landing venía de UN solo corrimiento.
   El CSS pintaba `.vp-callout-body{display:none}` y el IIFE de init le agregaba
   `.vp-callout-open` cuando `innerWidth < 900` — o sea DESPUÉS de parsear todo el script.
   Al aparecer el cuerpo, `.vp-cols-wrap` y todo lo de abajo bajaban 149 px.

   Con el estado abierto como default en mobile, el JS agrega la clase y no cambia nada:
   queda idempotente y no hay corrimiento. En desktop sigue plegado, que es lo diseñado. */
@media(max-width:899px){
  .vp-callout-body{display:flex !important}
  /* el link "¿Cómo comprar?" solo tiene sentido cuando está plegado */
  .vp-callout-toggle{display:none !important}
}
.vp-callout-foot{
  flex:0 0 100% !important;
  margin:10px 0 0 !important;padding-top:9px !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.55) !important;
  font-size:11px !important;font-weight:500 !important;line-height:1.3 !important;
}

/* ── 2. Stepper de 4 pasos con ícono ────────────────── */
.vp-stepper{margin:0 0 30px !important;align-items:flex-start !important}
.vp-stepper-item{gap:8px !important}
/* El ícono estático reemplaza al thumb dinámico: los nombres de lo elegido
   ya los muestran las secciones numeradas de abajo. */
.vp-stepper-thumb{display:none !important}
.vp-stepper-ico{
  width:44px !important;height:44px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:rgba(255,255,255,.055) !important;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%) !important;
  color:rgba(255,255,255,.34) !important;
  transition:background .35s ease,color .35s ease,filter .35s ease !important;
}
.vp-stepper-ico svg{width:21px !important;height:21px !important;display:block !important}
.vp-stepper-item.active .vp-stepper-ico{
  background:linear-gradient(160deg,#ff007a,#c2185b) !important;
  color:#fff !important;
  filter:drop-shadow(0 0 12px rgba(255,0,122,.55)) !important;
}
.vp-stepper-num{width:32px !important;height:32px !important;font-size:14px !important}
.vp-stepper-lbl{font-size:9.5px !important;letter-spacing:1.4px !important}
.vp-stepper-line{
  min-width:26px !important;max-width:64px !important;
  margin:0 6px 0 !important;
  align-self:flex-start !important;
  margin-top:22px !important;
}
/* Servicios sin paso de calidad: el stepper muestra 3 tramos */
.vp-stepper.vp-stepper-noq #vp-step-3,
.vp-stepper.vp-stepper-noq #vp-sline-3{display:none !important}

/* ── 3. Encabezados de sección numerados ────────────── */
.vp-step-n{
  color:#ff007a !important;
  font-weight:900 !important;
  margin-right:6px !important;
  letter-spacing:0 !important;
}
.vp-net-label,.vp-cat-label{
  display:flex !important;align-items:baseline !important;
  font-size:12px !important;letter-spacing:.14em !important;
  margin-bottom:14px !important;
}
/* El viejo encabezado del tab bar era un ::before, que no permite pintar
   solo el número: ahora lo dibuja .vp-tab-label desde vpRenderTabs(). */
#vp-tab-bar::before{content:none !important;display:none !important}
.vp-tab-label{
  display:none !important;align-items:baseline !important;
  flex-basis:100% !important;width:100% !important;
  font-size:12px !important;font-weight:800 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:#fff !important;
  padding-bottom:14px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  margin:0 0 4px !important;
}
/* Encabezados dentro del card: "3. Elegí la calidad" / "4. Elegí la cantidad" */
.vc-step{
  display:flex !important;align-items:center !important;gap:0 !important;
  text-align:left !important;
  font-size:12px !important;letter-spacing:.14em !important;
  color:#fff !important;opacity:1 !important;
  margin:0 0 14px !important;
}
.vc-step::before{
  content:attr(data-n) '.' !important;
  width:auto !important;height:auto !important;
  border:none !important;background:none !important;border-radius:0 !important;
  color:#ff007a !important;font-size:inherit !important;font-weight:900 !important;
  letter-spacing:0 !important;margin-right:6px !important;opacity:1 !important;
}
/* "¿Cuál es la diferencia?" a la derecha del encabezado de calidad */
.vc-q-diff{
  margin-left:auto !important;
  background:none !important;border:none !important;padding:0 0 0 12px !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important;font-weight:600 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:rgba(255,255,255,.45) !important;cursor:pointer !important;
  white-space:nowrap !important;transition:color .2s !important;
}
.vc-q-diff:hover{color:rgba(255,255,255,.8) !important}
.vc-q-diff:focus-visible{outline:2px solid var(--vc-c1,#ff007a) !important;outline-offset:2px !important;border-radius:4px !important}

/* ── 4. Calidad: features en fila + comparar ────────── */
.vc-q-desc.vc-q-feats{
  display:flex !important;align-items:stretch !important;
  margin:-6px 0 10px !important;padding:0 !important;
  background:rgba(255,255,255,.028) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  border-radius:12px !important;
  min-height:0 !important;
  overflow:hidden !important;
}
.vc-q-feat{
  flex:1 1 0 !important;min-width:0 !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:6px !important;padding:9px 8px !important;
  font-size:10.5px !important;font-weight:600 !important;
  color:rgba(255,255,255,.62) !important;line-height:1.3 !important;text-align:left !important;
}
.vc-q-feat + .vc-q-feat{border-left:1px solid rgba(255,255,255,.07) !important}
.vc-q-feat-ico{display:flex !important;flex-shrink:0 !important;color:rgba(255,255,255,.4) !important}
.vc-q-feat-ico svg{width:13px !important;height:13px !important;display:block !important}

.vc-q-compare{margin:0 0 16px !important}
.vc-q-compare-toggle{
  gap:8px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:12px !important;
  padding:10px !important;
  font-size:10.5px !important;font-weight:800 !important;
  letter-spacing:.14em !important;text-transform:uppercase !important;
  color:rgba(255,255,255,.55) !important;
  transition:color .2s,border-color .2s,background .2s !important;
}
.vc-q-compare-toggle:hover{
  color:#fff !important;
  border-color:rgba(255,255,255,.2) !important;
  background:rgba(255,255,255,.03) !important;
}
.vc-q-compare-chevron{font-size:12px !important;letter-spacing:0 !important}

/* ── 5. Cantidad: unidad y calidad en una sola línea ── */
.vc-qty-line{
  display:flex !important;align-items:baseline !important;
  justify-content:center !important;gap:6px !important;
  flex-wrap:wrap !important;margin:6px 0 0 !important;
}
.vc-qty-line .vc-qty-unit,
.vc-qty-line .vc-qlabel{
  margin:0 !important;
  font-size:11px !important;font-weight:800 !important;
  letter-spacing:.16em !important;text-transform:uppercase !important;
  color:rgba(255,255,255,.82) !important;
}
.vc-qty-line .vc-qty-unit:empty{display:none !important}

/* ── 6. CTA con carrito + sello de pago seguro ──────── */
.vc-cta{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important}
.vc-cta-ico{display:flex !important;position:relative !important;z-index:1 !important;flex-shrink:0 !important}
.vc-cta-ico svg{width:19px !important;height:19px !important;display:block !important}
.vc-secure{
  display:flex !important;align-items:center !important;justify-content:center !important;
  gap:6px !important;margin:-6px 0 2px !important;
  font-size:10.5px !important;font-weight:600 !important;
  color:rgba(255,255,255,.38) !important;
}
.vc-secure svg{width:12px !important;height:12px !important;flex-shrink:0 !important}

/* ── Ajustes que sólo aplican al split de escritorio ── */
@media(min-width:900px){
  /* Los encabezados numerados vuelven a verse (antes .vc-step estaba oculto) */
  .vc-step{display:flex !important}
  .vp-tab-label{display:flex !important}
  /* El chip-label de servicio sigue siendo sólo de mobile: en desktop manda el tab bar.
     Hace falta repetirlo porque .vp-net-label,.vp-cat-label de arriba lo volvería a mostrar. */
  .vp-cat-label{display:none !important}
  /* El link de "¿Cómo comprar?" se alinea con el borde derecho de la sección */
  .vp-callout{margin-bottom:6px !important}

  /* Calidad en 2×2, como en el mockup. Las grillas de 3 (audiencias, géneros
     argentinos) mantienen sus 3 columnas. */
  .vc-qgrid:not(.cols-2):not(.cols-3):not(.vc-subwrap){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    /* Filas iguales: si no, la fila con el tag "Más comprado" queda más alta que la otra */
    grid-auto-rows:1fr !important;
    gap:8px !important;
    /* Aire arriba para que el tag "Más comprado" no se corte contra el borde */
    padding:14px 6px 6px !important;
    margin-bottom:12px !important;
  }
  .vc-qgrid:not(.cols-2):not(.cols-3):not(.vc-subwrap) .vc-q-btn{
    justify-content:center !important;
    padding:14px 10px 12px !important;
    min-height:78px !important;
    /* Cada opción se lee como una tarjeta propia, no como celda de una grilla */
    background:rgba(255,255,255,.022) !important;
    border-color:rgba(255,255,255,.08) !important;
  }
  .vc-qgrid:not(.cols-2):not(.cols-3):not(.vc-subwrap) .vc-q-btn:hover{
    background:rgba(255,255,255,.06) !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  .vc-qgrid:not(.cols-2):not(.cols-3):not(.vc-subwrap) .vc-q-btn.active{
    background:color-mix(in srgb,var(--vc-c1) 12%,transparent) !important;
    border-color:color-mix(in srgb,var(--vc-c1) 65%,transparent) !important;
  }
  .vc-q-icon{font-size:23px !important}
  .vc-q-name{font-size:11.5px !important}

  /* La card respira un poco más ahora que muestra los encabezados */
  .vc-card{padding:22px 32px 20px !important}
  .vc-badge-w{margin-bottom:14px !important}
}

/* En mobile el detalle de "¿Cómo comprar?" arranca abierto (lo pone el JS),
   así que el bloque ocupa el ancho completo como antes. */
@media(max-width:899px){
  .vp-callout{align-items:stretch !important;margin-bottom:28px !important}

  /* ── 2. ELEGÍ EL SERVICIO: de lista vertical a tiles en fila ──────────
     Objetivo: mockup `servicio1.png`. Ícono grande arriba, nombre abajo en
     mayúsculas, el activo con borde rosa y glow.

     Cada red tiene entre 1 y 4 servicios (Threads 1 · Spotify/Twitter/WhatsApp 2 ·
     Instagram/Facebook 3 · TikTok/YouTube/Twitch/Kick 4), así que las columnas se
     eligen para que NUNCA quede un hueco:
         1 → 1 (ancho completo)   2 → 2   3 → 3   4 → 2×2
     Se cuenta con :has() + :nth-child():last-child, sin JS. */
  .vp-cats{
    /* ⚠ `display` va SIN !important a propósito. La red inactiva se oculta con
       `el.style.display='none'` inline y se muestra con `display=''`; un !important acá
       le gana al inline y aparecen las 10 redes a la vez. Sin !important alcanza igual,
       porque el `.vp-cats{display:flex}` de arriba tampoco lo tiene y este viene después. */
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  .vp-cats:has(> .vp-btn-cat:nth-child(1):last-child){
    grid-template-columns:minmax(0,1fr) !important;
  }
  .vp-cats:has(> .vp-btn-cat:nth-child(2):last-child),
  .vp-cats:has(> .vp-btn-cat:nth-child(4):last-child){
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .vp-btn-cat{
    flex-direction:column !important;
    align-items:center !important;justify-content:center !important;
    gap:9px !important;
    padding:15px 8px !important;
    text-align:center !important;
    min-height:94px !important;
  }
  /* el translateX del hover/selected era para la lista; en tiles no va */
  .vp-btn-cat:hover,.vp-btn-cat.selected{transform:none !important}

  /* el emoji va suelto y grande, sin el recuadro de 34px de la lista */
  .vp-chip-ico{
    width:auto !important;height:auto !important;
    background:none !important;border-radius:0 !important;
    font-size:27px !important;line-height:1 !important;
  }
  .vp-btn-cat.selected .vp-chip-ico{background:none !important}

  .vp-chip-info{flex:none !important;align-items:center !important;width:100% !important;gap:0 !important}
  .vp-chip-name{
    /* "REPRODUCCIONES" son 14 caracteres en un tile de ~118px a 430px de pantalla, y es
       una sola palabra: no puede cortar. A 11px + .085em medía 116px y tocaba los bordes.
       Con clamp() escala con el ancho real y también entra en pantallas de 360px. */
    font-size:clamp(9px,2.45vw,11px) !important;letter-spacing:.05em !important;
    text-transform:uppercase !important;line-height:1.2 !important;
    max-width:100% !important;
  }
  .vp-chip-arrow{display:none !important}

  .vp-btn-cat.selected{
    border-color:#ff007a !important;
    background:rgba(255,0,122,.10) !important;
    box-shadow:0 0 0 1px rgba(255,0,122,.5),0 0 20px rgba(255,0,122,.26) !important;
  }
}

/* ── Tarjeta bordeada por sección numerada (mockup `lab/mockups/servicio.png`) ──
   Cada bloque "1. / 2. / 3. / 4." va dentro de su propia caja. Las secciones 1 y 2 se
   envolvieron en `.vp-sec` en el markup; las 3 y 4 viven dentro de cada widget y las
   envuelve el JS de inyección (`.vp-sec-w`).

   ⚠ En DESKTOP los envoltorios tienen que ser INVISIBLES para el layout, porque el split
   de dos columnas depende de la estructura original. `display:contents` hace justo eso:
   el div desaparece del árbol de cajas y sus hijos participan como antes. */
.vp-sec,.vp-sec-w{
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.022);
  padding:16px 14px 18px;
  margin:0 0 14px;
}
/* El título numerado ya trae su propio margen superior pensado para ir suelto */
.vp-sec > .vp-net-label,.vp-sec > .vp-cat-label,.vp-sec-w > .vc-step:first-child{
  margin-top:0 !important;
}
@media(min-width:900px){
  .vp-sec,.vp-sec-w{
    display:contents !important;
    border:0 !important;background:none !important;padding:0 !important;margin:0 !important;
  }
}
@media(max-width:899px){
  /* Sin esto quedarían cajas dentro de una caja: `.vc-card` ya es un recuadro y ahora
     las secciones 3 y 4 tienen el suyo. En mobile la card pasa a ser solo un contenedor. */
  .vc-card{
    background:none !important;border:0 !important;
    box-shadow:none !important;padding:0 !important;
  }
  /* el chip de red+servicio queda arriba, fuera de las dos tarjetas */
  .vc-badge-w{margin-bottom:12px !important}

  /* ── WhatsApp de ancho completo al final de la grilla ──────────────
     Son 10 plataformas en 3 columnas, así que la última fila queda con una sola y en el
     mockup ocupa todo. La condición es `:nth-child(3n+1):last-child`: el último item cae
     en posición ≡1 (mod 3), o sea que está solo en su fila. Si algún día son 11 redes,
     la última fila tendrá 2 y la regla no se aplica — no hay que tocar nada. */
  .vp-nets > .vp-btn-net:nth-child(3n+1):last-child{grid-column:1 / -1 !important}

  /* ── El precio en su propia caja bordeada ────────────────────────── */
  .vc-price-block{
    border:1px solid rgba(255,255,255,.10) !important;
    border-radius:14px !important;
    background:rgba(255,255,255,.03) !important;
    padding:13px 14px !important;
    margin:10px 0 12px !important;
  }

  /* ── CTA rosa→naranja fijo ────────────────────────────────────────
     El botón usa `background:var(--vc-cta)`, y esa variable se declara por widget con
     selector de ID: sobrescribirla desde una clase perdería por especificidad. Se pisa
     directo el `background` de `.vc-cta`, que es la misma clase y viene después.
     ⚠ Solo mobile: en desktop sigue el gradiente por plataforma. */
  .vc-cta{
    background:linear-gradient(90deg,#ff007a 0%,#ff8a00 100%) !important;
    box-shadow:0 10px 28px rgba(255,90,0,.28) !important;
  }
}

/* ── Grilla de calidad con UNA sola opción: que ocupe el ancho ─────────────
   De las 10 grillas del shop, 8 tienen 3 opciones, 1 tiene 4 y **1 tiene una sola**
   (TikTok → Seguidores). Esa dejaba media caja vacía: con las 4 columnas originales
   quedaba 77% vacío y con el 2×2 del rediseño 53%. Mismo truco de :has() que el
   selector de servicio. Fuera de @media a propósito: aplica en desktop y en mobile,
   y va después de las dos reglas que fijan columnas para ganarles por orden. */
.vc-qgrid:has(> *:nth-child(1):last-child){
  grid-template-columns:minmax(0,1fr) !important;
}

/* VIRALIZATE SHOP UX 2026-09-01 */
/*
 * Capa visual exclusiva del laboratorio del Shop.
 * Todo cambio experimental debe vivir aquí hasta ser aprobado.
 */



/*
 * Unificación v1
 * Stepper, navegación y configurador comparten una sola superficie. Las
 * divisiones internas ordenan el flujo, pero dejan de competir como tarjetas.
 */
.vp-section {
  isolation: isolate;
  box-sizing: border-box !important;
}

@media (min-width: 900px) {
  .vp-section {
    padding: 42px 32px 64px !important;
  }

  .vp-cols-wrap {
    position: relative !important;
    width: min(100%, 1260px) !important;
    margin: 0 auto !important;
    padding: 28px !important;
    overflow: hidden !important;
    border: 1px solid rgb(255 255 255 / 10%) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(circle at 76% 14%, color-mix(in srgb, var(--tab-c1, #ff007a) 12%, transparent), transparent 34%),
      linear-gradient(145deg, rgb(18 16 28 / 96%), rgb(7 7 13 / 98%)) !important;
    box-shadow:
      0 30px 80px rgb(0 0 0 / 42%),
      inset 0 1px 0 rgb(255 255 255 / 6%) !important;
  }

  .vp-cols-wrap::before {
    content: "Configurá tu pedido";
    display: block;
    margin: 0 0 5px;
    color: #fff;
    font: 800 clamp(20px, 2vw, 27px)/1.2 Inter, system-ui, sans-serif;
    letter-spacing: -.025em;
  }

  .vp-cols-wrap::after {
    content: "Elegí plataforma, servicio y cantidad en un solo lugar";
    position: absolute;
    top: 61px;
    left: 28px;
    color: rgb(255 255 255 / 55%);
    font: 500 13px/1.4 Inter, system-ui, sans-serif;
  }

  .vp-stepper {
    justify-content: flex-end !important;
    min-height: 68px !important;
    margin: -31px 0 20px 360px !important;
    padding: 0 10px 18px !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
  }

  .vp-cols {
    display: grid !important;
    grid-template-columns: 400px minmax(0, 1fr) !important;
    gap: 0 !important;
    margin-top: 0 !important;
  }

  .vp-col-left {
    width: auto !important;
    max-width: none !important;
    padding: 10px 24px 12px 0 !important;
  }

  .vp-col-left .vp-btn-net {
    min-height: 56px !important;
    padding: 13px 18px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }

  .vp-col-left .vp-net-ico {
    width: 25px !important;
    height: 25px !important;
  }

  #vp-left-inner {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .vp-col-middle {
    align-items: stretch !important;
    padding: 10px 0 12px 28px !important;
    border-left: 1px solid rgb(255 255 255 / 8%) !important;
  }

  .vp-col-middle .vc-widget,
  .vp-col-middle #vp-upsell,
  .vp-col-middle #vc-placeholder,
  #vp-tab-bar {
    width: 100% !important;
    max-width: none !important;
  }

  #vp-tab-bar {
    padding: 0 0 14px !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .vp-col-middle .vc-widget {
    padding: 0 !important;
  }

  .vp-col-middle .vc-card {
    max-width: none !important;
    padding: 24px 8px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* Cantidad: control más corto, centrado y alineado con sus marcas. */
  .vp-col-middle .vc-qty {
    font-size: 52px !important;
    letter-spacing: -2px !important;
  }

  .vp-col-middle .vc-slider-zone {
    width: min(100%, 620px) !important;
    margin: 10px auto 12px !important;
  }

  .vp-col-middle .vc-track {
    height: 38px !important;
  }

  .vp-col-middle .vc-track::before,
  .vp-col-middle .vc-fill {
    height: 6px !important;
  }

  .vp-col-middle .vc-range::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
    border-width: 2px !important;
  }

  .vp-col-middle .vc-range::-moz-range-thumb {
    width: 24px !important;
    height: 24px !important;
    border-width: 2px !important;
  }

  .vp-col-middle .vc-marks {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px !important;
  }

  /* Cada texto se centra sobre su posición matemática, incluidos los extremos. */
  .vp-col-middle .vc-marks > span {
    display: flex !important;
    width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  /*
   * Opciones/calidad: una sola fila estable en desktop. Evita que cuatro
   * variantes dupliquen la altura frente a servicios con dos o tres.
   */
  .vp-col-middle .vc-qgrid:not(.vc-subwrap) {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    grid-auto-rows: 82px !important;
    min-height: 96px !important;
    gap: 8px !important;
    padding: 7px !important;
    margin-bottom: 14px !important;
  }

  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn {
    min-height: 82px !important;
    padding: 13px 9px 10px !important;
    justify-content: center !important;
    border: 1px solid rgb(255 255 255 / 8%) !important;
    background: rgb(255 255 255 / 2.5%) !important;
    transform: none !important;
  }

  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn.active,
  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn[aria-pressed="true"] {
    border: 2px solid var(--vc-c1) !important;
    background: color-mix(in srgb, var(--vc-c1) 18%, rgb(13 12 21)) !important;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--vc-c1) 12%, transparent),
      inset 0 1px 0 rgb(255 255 255 / 10%) !important;
    color: #fff !important;
  }

  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn.active::after,
  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn[aria-pressed="true"]::after {
    content: "✓ SELECCIONADO";
    position: absolute;
    right: 8px;
    bottom: 6px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--vc-c1);
    color: #fff;
    font: 900 7px/1 Inter, system-ui, sans-serif;
    letter-spacing: .08em;
  }

  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn.active .vc-q-name,
  .vp-col-middle .vc-qgrid:not(.vc-subwrap) .vc-q-btn[aria-pressed="true"] .vc-q-name {
    color: #fff !important;
    font-weight: 900 !important;
  }

  .lab-purchase-summary {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 12px 0 10px;
    padding: 10px 13px;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 10px;
    background: rgb(255 255 255 / 3%);
    color: rgb(255 255 255 / 58%);
    font: 700 10px/1.35 Inter, system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  .lab-purchase-summary strong {
    color: #fff;
    font-size: 11px;
    text-align: right;
    letter-spacing: .02em;
  }

  .vp-col-middle .vc-cta {
    min-height: 64px !important;
    width: 100% !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--vc-c1) 24%, transparent) !important;
  }

  .vp-col-middle .vc-card::before,
  .vp-col-middle .vc-widget::after,
  .vp-col-middle .vc-orb {
    display: none !important;
  }

  .vp-trust-global {
    width: min(100%, 1260px) !important;
    margin: 16px auto 0 !important;
    padding: 0 18px !important;
  }
}

/* Escritorios amplios: el diseño respira sin dejar huecos laterales enormes. */
@media (min-width: 1360px) {
  .vp-section {
    padding-inline: 28px !important;
  }

  .vp-cols-wrap {
    width: min(calc(100vw - 72px), 1360px) !important;
    padding: 34px 68px 40px !important;
  }

  .vp-cols-wrap::after {
    top: 67px;
    left: 68px;
  }

  .vp-stepper {
    justify-content: center !important;
    margin-left: 490px !important;
    padding-inline: 18px !important;
  }

  .vp-cols {
    grid-template-columns: 440px minmax(0, 1fr) !important;
  }

  .vp-col-left {
    padding-right: 32px !important;
  }

  .vp-col-middle {
    padding-left: 38px !important;
  }

  .vp-col-middle .vc-card {
    padding-inline: 14px !important;
  }

  .vp-trust-global {
    width: min(calc(100vw - 72px), 1360px) !important;
  }
}

@media (max-width: 767px) {
  

  .vp-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-right: calc(50% - 50vw) !important;
    margin-left: calc(50% - 50vw) !important;
    padding: 0 14px 18px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-top: 1px solid rgb(255 255 255 / 9%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 9%) !important;
    border-radius: 0 !important;
    background: linear-gradient(160deg, rgb(17 15 26 / 96%), rgb(7 7 13 / 98%)) !important;
    box-shadow: 0 24px 60px rgb(0 0 0 / 35%) !important;
  }

  .vp-cols-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 18px 0 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .vp-cols,
  .vp-col-middle,
  .vp-col-middle #vc-seg,
  .vp-col-middle .vc-widget,
  .vp-col-middle .vc-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .vp-col-middle,
  .vp-col-middle #vc-seg,
  .vp-col-middle .vc-widget {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .vp-callout {
    margin: 0 !important;
    padding: 16px 10px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .vp-stepper {
    padding-bottom: 18px !important;
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
  }

  .vp-sec,
  .vc-card {
    border-color: rgb(255 255 255 / 8%) !important;
    background: rgb(255 255 255 / 2.5%) !important;
    box-shadow: none !important;
  }

  .vc-qty {
    font-size: 46px !important;
    letter-spacing: -2px !important;
  }

  .vc-slider-zone {
    width: calc(100% - 24px) !important;
    margin: 10px auto 12px !important;
  }

  .vc-track {
    height: 38px !important;
  }

  .vc-marks > span {
    display: flex !important;
    width: 0 !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .vc-qgrid:not(.vc-subwrap) .vc-q-btn.active,
  .vc-qgrid:not(.vc-subwrap) .vc-q-btn[aria-pressed="true"] {
    border: 2px solid var(--vc-c1) !important;
    background: color-mix(in srgb, var(--vc-c1) 18%, rgb(13 12 21)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--vc-c1) 12%, transparent) !important;
  }

  .vc-qgrid:not(.vc-subwrap) .vc-q-btn.active::after,
  .vc-qgrid:not(.vc-subwrap) .vc-q-btn[aria-pressed="true"]::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    border-radius: 50%;
    background: var(--vc-c1);
    color: #fff;
    font: 900 11px/1 system-ui, sans-serif;
  }

  .lab-purchase-summary {
    display: none !important;
  }

  .lab-purchase-summary strong {
    text-align: left;
  }

  .vc-cta {
    min-height: 56px !important;
  }
}

/* Plataformas móviles: todas las celdas tienen exactamente la misma medida. */
@media (max-width: 899px) {
  /* Un solo box para todo el selector móvil. */
  .vp-section {
    background: #0c0d14 !important;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%) !important;
  }

  .vp-cols-wrap,
  .vp-cols,
  .vp-col-left,
  .vp-col-middle,
  #vp-left-inner,
  .vp-sec,
  .vp-sec-w,
  .vc-widget,
  .vc-card {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .vp-cols-wrap {
    padding-top: 16px !important;
  }

  .vp-sec,
  .vp-sec-w {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .vp-stepper,
  .vp-sec-net,
  .vp-sec-serv,
  .vp-col-middle {
    border-bottom: 1px solid rgb(255 255 255 / 8%) !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
  }

  .vp-col-middle {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .vp-col-left .vp-nets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-auto-rows: 84px !important;
    align-items: stretch !important;
  }

  .vp-col-left .vp-btn-net,
  .vp-col-left .vp-btn-net:last-child,
  .vp-col-left .vp-btn-net[data-net="whatsapp"] {
    box-sizing: border-box !important;
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 84px !important;
    height: 84px !important;
    margin: 0 !important;
    padding: 9px 5px !important;
    justify-content: center !important;
  }
}


/* ═════════════════════════════════════════════════════════════════════════════
   Que el precio entre en pantalla al cambiar de calidad — 2026-09-04
   Medido: 605 px entre el borde superior de la grilla de calidades y el bloque de
   precio, asi que en un telefono el precio queda fuera de pantalla y el cambio no se
   ve. Tres medidas, todas en mobile salvo el flash.
   ═════════════════════════════════════════════════════════════════════════════ */

@media(max-width:899px){

  /* ── 1. Fuera la fila de features (−51 px) ───────────────────────────────────
     Repetia, palabra por palabra, la fila de la calidad seleccionada dentro de
     "Comparar calidades", que en mobile es donde queda toda esa informacion.
     ⚠ Se oculta, NO se borra del DOM: vpRenderQDesc() lo sigue actualizando al cambiar
     de calidad, y en ≥900px es la unica linea que describe la calidad elegida.
     ⚠ La regla base .vc-q-desc.vc-q-feats trae display:flex con !important y dos clases
     de especificidad; hay que empatarle o superarla, de ahi el .vc-card delante.
     Efecto lateral aceptado: las sub-calidades de genero (Masculinos / Femeninos) no
     estan en qCompare, asi que en mobile se quedan sin linea propia de descripcion. */
  .vc-card .vc-q-desc,
  .vc-card .vc-q-desc.vc-q-feats{display:none !important}

  /* ── 2. Bloque "4. ELEGI LA CANTIDAD" mas compacto (−50 px) ───────────────────
     Solo aire: no se toca ni el numero grande (.vc-qty, 46px) ni el precio, que son
     los dos datos que el cliente viene a leer. */

  /* el titulo de seccion: 14 → 8 de aire debajo */
  .vp-sec-w > .vc-step{margin-bottom:6px !important}

  /* la caja de la seccion: 16 → 12 arriba */
  .vp-sec-w{padding-top:12px !important}

  /* ⚠ El icono de plataforma (.vc-ig) NO se toca: el 2026-09-04 se probo achicarlo de
     48 a 34 px y el dueno pidio dejarlo como estaba — le sirve para identificar la red.
     Eran 24 px de los 88 de ahorro; se pagan a proposito. */

  /* la linea "SEGUIDORES GLOBALES" pegada al numero */
  .vc-qty-line{margin-top:2px !important}

  /* el slider. ⚠ El margen horizontal es `auto` con width:calc(100% - 24px) (regla de
     @media 767px): si se escribe `margin:6px 0 8px` el slider se va a la izquierda. */
  .vc-slider-zone{margin:6px auto 8px !important}

  /* el precio. Solo el margen: el borde, el fondo y el padding los pone la regla de
     @media(max-width:899px) de mas arriba y tienen que quedar como estan. */
  .vc-price-block{margin-top:6px !important}
}

/* ── 3. Flash del precio al cambiar de calidad (mobile y desktop) ───────────────
   Lo dispara window[cfg.setQFn] en shop.js, y solo cuando el precio cambia de verdad.
   El color sale de --vc-c1, que es la variable por plataforma, para que el destello sea
   del color de la red y no uno fijo. */
@keyframes vcPriceFlash{
  0%  {transform:scale(1);    box-shadow:0 0 0 0 color-mix(in srgb,var(--vc-c1) 0%,transparent)}
  28% {transform:scale(1.045);box-shadow:0 0 0 3px color-mix(in srgb,var(--vc-c1) 32%,transparent)}
  100%{transform:scale(1);    box-shadow:0 0 0 0 color-mix(in srgb,var(--vc-c1) 0%,transparent)}
}
.vc-price-block.vc-price-flash{
  animation:vcPriceFlash .55s cubic-bezier(.34,1.56,.64,1) both !important;
}
@media(prefers-reduced-motion:reduce){
  .vc-price-block.vc-price-flash{animation:none !important}
}


/* ═════════════════════════════════════════════════════════════════════════════
   Cabeceras de paso — 2026-09-04
   Los cuatro pasos numeran con DOS mecanismos distintos: el 1 y el 2 traen un
   <span class="vp-step-n"> en el markup (widget.php) y el 3 y el 4 lo dibujan con
   ::before desde data-n (lo pone la inyeccion de shop.js). Se estilan juntos para que
   se lean como la misma pieza.
   El punto del numero se saco del markup: dentro de la capsula sobraba.
   ═════════════════════════════════════════════════════════════════════════════ */

.vc-step,
.vp-net-label,
.vp-cat-label{
  /* ⚠ NADA de `display` aca. .vp-cat-label se oculta en escritorio con
     `display:none` (@media min-width:900px), y esta regla viene despues en el archivo:
     con `display:flex !important` reaparecia un segundo "2. Elegí el servicio" al pie de
     la columna de plataformas. Los tres selectores ya son flex por su regla propia. */
  align-items:center !important;gap:9px !important;
  padding:8px 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  /* El tinte arranca en el color de la plataforma y se apaga hacia la derecha, para que
     la cabecera no se lea como una caja mas encima de la grilla. */
  background:linear-gradient(90deg,
      color-mix(in srgb,var(--vc-c1,#ff007a) 11%,transparent) 0%,
      rgba(255,255,255,.032) 42%,
      transparent 100%) !important;
  color:#fff !important;
}

/* La capsula del numero.
   En los pasos 3 y 4 toma el color de la plataforma elegida — ahi --vc-c1/--vc-c2 estan
   declaradas por ID de widget — y en el 1 y el 2 cae al rosa/violeta de marca, porque esos
   dos encabezados viven FUERA del widget y no ven esas variables. */
.vc-step::before,
.vp-step-n{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  flex-shrink:0 !important;
  width:20px !important;height:20px !important;
  border-radius:7px !important;
  background:linear-gradient(135deg,var(--vc-c1,#ff007a),var(--vc-c2,#8a2be2)) !important;
  border:0 !important;
  color:#fff !important;
  font-size:11px !important;font-weight:900 !important;
  letter-spacing:0 !important;line-height:1 !important;
  margin:0 !important;padding:0 !important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--vc-c1,#ff007a) 38%,transparent) !important;
  text-shadow:0 1px 2px rgba(0,0,0,.28) !important;
  opacity:1 !important;
}
/* La regla vieja imprimia attr(data-n) seguido de un '.' literal */
.vc-step::before{content:attr(data-n) !important}

/* El encabezado del tab bar de escritorio conserva su subrayado, pero la capsula necesita
   centrado vertical: venia con align-items:baseline y quedaba montada sobre la linea. */
.vp-tab-label{align-items:center !important;gap:9px !important}

@media(max-width:899px){
  /* En mobile la cabecera cuesta altura y el objetivo de todo este bloque es justo lo
     contrario, asi que va con el padding minimo que deja respirar a la capsula de 20px. */
  .vc-step,
  .vp-net-label,
  .vp-cat-label{padding:5px 10px !important}
}