/**
 * Tienda: bloque de contenido SEO. Porte de shop-seo.html.
 */

/* ══════════════════════════════════════════
   SEO SECTIONS, tema Viralizate dark
══════════════════════════════════════════ */
.vc-seo-sep{
  width:100%;
  height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(255,0,122,.4) 30%,rgba(138,43,226,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(255,0,122,.2);
  margin:0;
}
.vc-seo-sep.tk{
  background:linear-gradient(90deg,transparent 0%,rgba(255,0,80,.4) 30%,rgba(0,242,234,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(255,0,80,.2);
}
.vc-seo-sep.yt{
  background:linear-gradient(90deg,transparent 0%,rgba(255,0,0,.4) 30%,rgba(255,107,53,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(255,0,0,.2);
}
.vc-seo-sep.fb{
  background:linear-gradient(90deg,transparent 0%,rgba(24,119,242,.4) 30%,rgba(66,165,245,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(24,119,242,.2);
}
.vc-seo-sep.tw{
  background:linear-gradient(90deg,transparent 0%,rgba(145,70,255,.4) 30%,rgba(191,148,255,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(145,70,255,.2);
}
.vc-seo-sep.kk{
  background:linear-gradient(90deg,transparent 0%,rgba(83,252,24,.4) 30%,rgba(0,212,170,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(83,252,24,.2);
}
.vc-seo-sep.sp{
  background:linear-gradient(90deg,transparent 0%,rgba(29,185,84,.4) 30%,rgba(0,230,118,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(29,185,84,.2);
}
.vc-seo-sep.xt{
  background:linear-gradient(90deg,transparent 0%,rgba(29,155,240,.4) 30%,rgba(0,180,255,.4) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(29,155,240,.2);
}

.vc-seo{
  width:100%;
  background:#08080f;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#fff;
  box-sizing:border-box;
  padding:64px 24px 72px;
  position:relative;
  overflow:hidden;
}

/* Dot grid sutil */
.vc-seo::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
  z-index:0;
}

/* Glow de fondo según red */
.vc-seo-glow{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
#vc-seo-ig .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(255,0,122,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(138,43,226,.15) 0%,transparent 60%);
}
#vc-seo-tk .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(255,0,80,.15) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(0,242,234,.12) 0%,transparent 60%);
}
#vc-seo-yt .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(255,0,0,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(255,107,53,.13) 0%,transparent 60%);
}
#vc-seo-fb .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(24,119,242,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(66,165,245,.13) 0%,transparent 60%);
}
#vc-seo-tw .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(145,70,255,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(191,148,255,.13) 0%,transparent 60%);
}
#vc-seo-kk .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(83,252,24,.14) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(0,212,170,.12) 0%,transparent 60%);
}
#vc-seo-sp .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(29,185,84,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(0,230,118,.13) 0%,transparent 60%);
}
#vc-seo-xt .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(29,155,240,.18) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(0,180,255,.13) 0%,transparent 60%);
}

.vc-seo-inner{
  position:relative;
  z-index:1;
  max-width:var(--wp--custom--ancho--general);
  margin:0 auto;
}

/* ── Header ── */
.vc-seo-header{
  text-align:center;
  margin-bottom:52px;
}
.vc-seo-header h2{
  font-size:clamp(24px,4vw,38px);
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.15;
  margin-bottom:16px;
  color:#fff;
}
.vc-seo-grad-ig{
  background:linear-gradient(135deg,#ff007a 0%,#c026d3 50%,#8a2be2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-tk{
  background:linear-gradient(135deg,#FF0050 0%,#ff6b6b 50%,#00F2EA 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-yt{
  background:linear-gradient(135deg,#FF0000 0%,#FF6B35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-fb{
  background:linear-gradient(135deg,#1877F2 0%,#42A5F5 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-tw{
  background:linear-gradient(135deg,#9146FF 0%,#BF94FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-kk{
  background:linear-gradient(135deg,#53FC18 0%,#00D4AA 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-sp{
  background:linear-gradient(135deg,#1DB954 0%,#00E676 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-grad-xt{
  background:linear-gradient(135deg,#1D9BF0 0%,#00B4FF 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.vc-seo-header p{
  font-size:15px;
  color:rgba(255,255,255,.65);
  line-height:1.7;
  max-width:620px;
  margin:0 auto;
}
.vc-seo-header p strong{
  color:rgba(255,255,255,.9);
  font-weight:600;
}

/* ── Grid 2 cols ── */
.vc-seo-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:48px;
}
@media(max-width:640px){
  .vc-seo-grid{ grid-template-columns:1fr; }
}

/* ── Card glassmorphism ── */
.vc-seo-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  padding:28px 24px;
  backdrop-filter:blur(10px);
}
.vc-seo-card h3{
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin-bottom:16px;
  text-transform:uppercase;
  letter-spacing:.8px;
}
.vc-seo-card p{
  font-size:13px;
  color:rgba(255,255,255,.55);
  margin-bottom:16px;
  line-height:1.6;
}
.vc-seo-card p strong{ color:rgba(255,255,255,.8); }
.vc-seo-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.vc-seo-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  color:rgba(255,255,255,.75);
  line-height:1.5;
}
.vc-seo-list li strong{ color:#fff; font-weight:600; }
.vc-seo-list li i{
  flex-shrink:0;
  margin-top:2px;
  font-size:12px;
}
.vc-seo-check-ig{ color:#ff007a; }
.vc-seo-check-tk{ color:#00F2EA; }
.vc-seo-check-yt{ color:#FF0000; }
.vc-seo-check-fb{ color:#42A5F5; }
.vc-seo-check-tw{ color:#BF94FF; }
.vc-seo-check-kk{ color:#53FC18; }
.vc-seo-check-sp{ color:#1DB954; }
.vc-seo-check-xt{ color:#1D9BF0; }

/* ── FAQ ── */
.vc-seo-faq-title{
  font-size:18px;
  font-weight:800;
  color:#fff;
  text-align:center;
  margin-bottom:24px;
  letter-spacing:-.3px;
}
.vc-seo-faqs{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:48px;
}
.vc-seo-faq-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .25s;
}
#vc-seo-ig .vc-seo-faq-item:hover{ border-color:rgba(255,0,122,.35); }
#vc-seo-tk .vc-seo-faq-item:hover{ border-color:rgba(255,0,80,.35); }
#vc-seo-xt .vc-seo-faq-item:hover{ border-color:rgba(29,155,240,.35); }

.vc-seo-faq-item summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:rgba(255,255,255,.9);
  user-select:none;
}
.vc-seo-faq-item summary::-webkit-details-marker{ display:none; }
.vc-seo-faq-item summary i.fa-chevron-down{
  flex-shrink:0;
  font-size:11px;
  color:rgba(255,255,255,.35);
  transition:transform .25s;
}
.vc-seo-faq-item[open] summary i.fa-chevron-down{ transform:rotate(180deg); }
.vc-seo-faq-body{
  padding:0 20px 18px;
  font-size:13px;
  color:rgba(255,255,255,.6);
  line-height:1.7;
  border-top:1px solid rgba(255,255,255,.07);
  padding-top:14px;
}
.vc-seo-faq-body strong{ color:rgba(255,255,255,.85); }

/* ── 3 pillars (TK extra) ── */
.vc-seo-pillars{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:48px;
}
@media(max-width:640px){ .vc-seo-pillars{ grid-template-columns:1fr; } }
.vc-seo-pillar{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:24px 20px;
  text-align:center;
}
.vc-seo-pillar i{
  font-size:26px;
  margin-bottom:12px;
  display:block;
}
.vc-seo-pillar h4{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}
.vc-seo-pillar p{
  font-size:12px;
  color:rgba(255,255,255,.5);
  line-height:1.6;
}

/* ── Prosa SEO extendida (espectadores / likes / views) ── */
.vc-seo-prose{
  margin-bottom:48px;
  max-width:760px;
}
.vc-seo-prose h2{
  font-size:17px;
  font-weight:800;
  color:#fff;
  margin-bottom:14px;
  letter-spacing:-.2px;
}
.vc-seo-prose h3{
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin:22px 0 10px;
}
.vc-seo-prose p{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
  margin-bottom:14px;
}
.vc-seo-prose p strong{ color:rgba(255,255,255,.8); }
.vc-seo-prose ul{ list-style:none; margin:0 0 14px; padding:0; }
.vc-seo-prose li{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.7;
  padding-left:18px;
  position:relative;
  margin-bottom:8px;
}
.vc-seo-prose li::before{
  content:'';
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#BF94FF;
}
.vc-seo-prose li strong{ color:#fff; font-weight:600; }

/* ── Footer SEO ── */
.vc-seo-footer{
  text-align:center;
  padding-top:40px;
  border-top:1px solid rgba(255,255,255,.08);
}
.vc-seo-footer h2{
  font-size:16px;
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  letter-spacing:-.2px;
}
.vc-seo-footer p{
  font-size:13px;
  color:rgba(255,255,255,.5);
  line-height:1.75;
  max-width:640px;
  margin:0 auto;
}
.vc-seo-footer p strong{ color:rgba(255,255,255,.75); }

/* ── Mercado Pago brand color ── */
.vc-seo-sep.mp{
  background:linear-gradient(90deg,transparent 0%,rgba(0,158,227,.5) 30%,rgba(0,100,200,.5) 70%,transparent 100%);
  box-shadow:0 0 12px rgba(0,158,227,.25);
}
#vc-seo-mp .vc-seo-glow{
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%,rgba(0,158,227,.2) 0%,transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 100%,rgba(0,100,200,.15) 0%,transparent 60%);
}
.vc-seo-grad-mp{
  background:linear-gradient(135deg,#009ee3 0%,#0064c8 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vc-seo-check-mp{ color:#009ee3; }
#vc-seo-mp .vc-seo-faq-item:hover{ border-color:rgba(0,158,227,.35); }
#vc-seo-mp .vc-seo-faq-item[open]{ border-color:rgba(0,158,227,.5); background:rgba(0,158,227,.05); }
#vc-seo-mp .vc-seo-faq-item[open] summary{ color:#009ee3; }
.vc-mp-methods{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 0;
}
.vc-mp-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,158,227,.08);border:1px solid rgba(0,158,227,.3);
  border-radius:40px;padding:8px 18px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.2px;
}
.vc-mp-badge span{ font-size:16px; }
/* enlaces del bloque SEO — contraste */
.vc-seo a{color:#fff !important;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.45);font-weight:600;transition:text-decoration-color .15s}
.vc-seo a:hover,.vc-seo a:focus-visible{text-decoration-color:#fff}

/* ── Threads y WhatsApp ──────────────────────────────────────────────
   Estas dos redes son posteriores al lote de lab/shop-split, que trae ocho.
   Sus reglas se tomaron de las landings en vivo. Sin ellas, el titulo del
   bloque SEO pierde el degradado y el check de la lista queda sin color. */
.vc-seo-grad-th{
  background:linear-gradient(135deg,#f5f5f5 0%,#9ca3af 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vc-seo-check-th{ color:#d1d5db; }
.vc-seo-grad-wa{
  background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.vc-seo-check-wa{ color:#25D366; }

/* ── Medios de pago (pie de landing) ──
   Mismos tokens que .vc-seo-pillar: fondo al 5%, borde al 9%, radio 16px.
   Se separa con el mismo borde superior que .vc-seo-footer para que lea como
   un cierre y no como una tarjeta suelta mas. */
.vc-seo-pagos{
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid rgba(255,255,255,.08);
}
.vc-seo-pagos h3{
  font-size:15px;
  font-weight:800;
  color:#fff;
  margin-bottom:10px;
  letter-spacing:-.2px;
}
.vc-seo-pagos > p{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
  margin-bottom:26px;
  max-width:760px;
}
.vc-seo-pagos > p strong{ color:rgba(255,255,255,.8); }
.vc-seo-pagos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
}
.vc-seo-pago{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  padding:22px 20px;
  transition:border-color .25s, background .25s;
}
.vc-seo-pago:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.16);
}
.vc-seo-pago i{
  font-size:20px;
  /* grid + justify-items en vez de block: el icono es un <svg> inline y el
     text-align:center que hereda de .vc-seo-footer no lo estaba centrando.
     Con grid el centrado no depende de la alineacion heredada. */
  display:grid;
  justify-items:center;
  margin-bottom:12px;
}
.vc-seo-pago h4{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin-bottom:6px;
}
.vc-seo-pago p{
  font-size:12px;
  color:rgba(255,255,255,.5);
  line-height:1.6;
}
@media(max-width:640px){ .vc-seo-pagos-grid{ grid-template-columns:1fr; } }

/* ── Variantes del servicio (arriba del FAQ) ──
   Mismos tokens que .vc-seo-faq-item: fondo al 5%, borde al 10%, radio 14px.
   Lee como antesala del FAQ porque comparte su lenguaje visual, pero sin
   acordeon: el texto tiene que estar visible para poder ser citado. */
.vc-seo-variantes{
  margin:0 0 40px;
}
.vc-seo-variantes h2{
  font-size:17px;
  font-weight:800;
  color:#fff;
  margin-bottom:8px;
  letter-spacing:-.2px;
}
.vc-seo-variantes-intro{
  font-size:13px;
  color:rgba(255,255,255,.5);
  line-height:1.7;
  margin-bottom:22px;
  max-width:760px;
}
.vc-seo-variante{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:20px 22px;
  margin-bottom:12px;
}
.vc-seo-variante h3{
  font-size:14px;
  font-weight:700;
  color:#fff;
  margin:0 0 8px;
  line-height:1.4;
}
.vc-seo-variante p{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.8;
  margin:0;
}
.vc-seo-variante p strong{ color:rgba(255,255,255,.8); }
.vc-seo-variante p a{
  color:rgba(255,255,255,.85);
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(max-width:640px){ .vc-seo-variante{ padding:18px 16px; } }