/* ==========================================================
   VortekSoft - Componentes para páginas internas
   (cargar después de shell.css y home.css)
   ========================================================== */

/* ---------- HERO dividido (texto + captura) ---------- */
.vk-hero-split { padding: 84px 0 0; }
.vk-hero-split .vk-hero-text { text-align: left; max-width: none; margin: 0; }
.vk-hero-split h1 { font-size: clamp(34px, 4.6vw, 56px); }
.vk-home .vk-hero-split .vk-hero-sub { margin: 0 0 32px !important; max-width: 560px; font-size: 18px; }
.vk-hero-split .vk-hero-cta { justify-content: flex-start; }
.vk-hero-split .vk-stage { margin: 0; max-width: none; padding-bottom: 34px; }
.vk-hero-split .vk-chip.c1 { left: -22px; top: 14%; }
.vk-hero-split .vk-chip.c2 { left: 4%; }
.vk-hero-split .vk-stage .vk-float-shot { right: -16px; width: 34%; }

.vk-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 64px 0 0; background: #fff;
  border: 1px solid var(--vk-line); border-radius: 20px 20px 0 0; border-bottom: 0; box-shadow: var(--vk-shadow);
}
.vk-kpis > div { text-align: center; padding: 26px 12px; border-left: 1px solid var(--vk-line); }
.vk-kpis > div:first-child { border-left: 0; }
.vk-kpis b { display: block; font: 800 clamp(24px, 3vw, 34px)/1.1 var(--vk-font); color: var(--vk-ink); margin-bottom: 6px; }
.vk-kpis span { font-size: 14px; color: var(--vk-text); font-weight: 500; }

/* ---------- Tarjetas de módulos ---------- */
.vk-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vk-tag { font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--vk-primary-600); background: rgba(0, 175, 179, .10); padding: 5px 10px; border-radius: 999px; }
.vk-card-sm { padding: 28px 24px; }
.vk-card-sm h4 { font-size: 18px; }
.vk-card-sm p { margin-bottom: 0; }

.vk-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.vk-chips span { font-size: 12px; font-weight: 700; color: var(--vk-deep); background: var(--vk-soft); border: 1px solid var(--vk-line); padding: 5px 11px; border-radius: 999px; }

/* ---------- Sección oscura + galería con pestañas ---------- */
.vk-dark {
  color: rgba(255, 255, 255, .72); overflow: hidden;
  background: radial-gradient(800px 420px at 90% 0%, rgba(0, 175, 179, .30), transparent 65%), radial-gradient(700px 400px at 0% 100%, rgba(0, 175, 179, .14), transparent 65%), #06222f;
}
.vk-home .vk-dark h2, .vk-home .vk-dark h3, .vk-home .vk-dark h4 { color: #fff; }
.vk-dark .vk-eyebrow { color: #5ee7ea; background: rgba(94, 231, 234, .12); }
.vk-dark .vk-grad { background: linear-gradient(90deg, #5ee7ea, #8af2f4); -webkit-background-clip: text; background-clip: text; }
.vk-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 44px; padding: 6px; width: fit-content; max-width: 100%; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .10); border-radius: 16px; }
.vk-tab { border: 0; background: transparent; color: rgba(255, 255, 255, .75); font: 700 15px/1 var(--vk-font); padding: 13px 22px; border-radius: 11px; cursor: pointer; transition: .25s; display: inline-flex; gap: 9px; align-items: center; }
.vk-tab:hover { color: #fff; }
.vk-tab.active { background: var(--vk-primary); color: #fff; box-shadow: 0 8px 22px rgba(0, 175, 179, .4); }
.vk-panel { display: none; }
.vk-panel.active { display: block; animation: vk-fade .45s ease; }
@keyframes vk-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.vk-panel h3 { font-size: 30px; font-weight: 800; line-height: 1.2; margin-bottom: 14px; }
.vk-panel p { color: rgba(255, 255, 255, .72); }
.vk-dark .vk-checks li { color: rgba(255, 255, 255, .9); }
.vk-dark .vk-browser { border-color: rgba(255, 255, 255, .14); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-radius: 14px; }

/* ---------- Características ---------- */
.vk-feat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vk-feat { display: flex; gap: 18px; padding: 26px 24px; border: 1px solid var(--vk-line); border-radius: var(--vk-radius); background: #fff; transition: .3s; }
.vk-feat:hover { border-color: rgba(0, 175, 179, .45); box-shadow: var(--vk-shadow); transform: translateY(-4px); }
.vk-feat .ico { flex: none; width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); }
.vk-feat h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.vk-feat p { font-size: 15px; }
.vk-side-sticky { position: sticky; top: 120px; }
.vk-home .vk-lead-left { font-size: 18px; margin: 16px 0 28px; max-width: 440px; }

/* ---------- Precios ---------- */
.vk-toggle { display: flex; width: fit-content; margin: 0 auto 48px; padding: 5px; border-radius: 14px; background: var(--vk-soft); border: 1px solid var(--vk-line); }
.vk-toggle button { border: 0; background: transparent; font: 700 15px/1 var(--vk-font); color: var(--vk-text); padding: 12px 26px; border-radius: 10px; cursor: pointer; transition: .25s; }
.vk-toggle button.active { background: #fff; color: var(--vk-primary-600); box-shadow: 0 4px 14px rgba(1, 72, 91, .12); }
.vk-plan { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vk-line); border-radius: 22px; padding: 38px 32px 32px; transition: .3s; }
.vk-plan:hover { transform: translateY(-6px); box-shadow: var(--vk-shadow); }
.vk-plan.featured { border: 2px solid var(--vk-primary); box-shadow: 0 24px 60px rgba(0, 175, 179, .20); }
.vk-plan .badge-top { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 6px 18px; border-radius: 999px; white-space: nowrap; }
.vk-plan h4 { font-size: 22px; font-weight: 800; }
.vk-plan .cap { font-size: 14px; margin-top: 4px; }
.vk-plan .amount { margin: 22px 0 4px; font: 800 46px/1 var(--vk-font); color: var(--vk-ink); letter-spacing: -.03em; }
.vk-plan .amount small { font-size: 16px; font-weight: 600; color: var(--vk-text); letter-spacing: 0; margin-left: 4px; }
.vk-plan .save { display: inline-block; min-height: 24px; font-size: 13px; font-weight: 700; color: #12a36a; }
.vk-plan ul { list-style: none; padding: 0; margin: 22px 0 30px; display: grid; gap: 13px; flex: 1; }
.vk-plan li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--vk-ink); }
.vk-plan li i { color: var(--vk-primary); margin-top: 3px; }
.vk-plan .vk-btn { justify-content: center; width: 100%; }
.vk-pricing[data-period="monthly"] .vk-annual { display: none; }
.vk-pricing[data-period="annual"] .vk-monthly { display: none; }
.vk-pricing[data-period="monthly"] .save { visibility: hidden; }

/* ---------- FAQ ---------- */
.vk-faq { background: var(--vk-soft); }
.vk-acc { --bs-accordion-border-color: transparent; max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.vk-acc .accordion-item { border: 1px solid var(--vk-line); border-radius: 16px !important; overflow: hidden; background: #fff; transition: .25s; }
.vk-acc .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: rgba(0, 175, 179, .5); box-shadow: var(--vk-shadow); }
.vk-acc .accordion-header { margin: 0; }
.vk-acc .accordion-button { font: 700 17px/1.4 var(--vk-font); color: var(--vk-ink); background: #fff; padding: 22px 26px; box-shadow: none; text-transform: none; }
.vk-acc .accordion-button:not(.collapsed) { color: var(--vk-primary-600); background: #fff; }
.vk-acc .accordion-button:focus { box-shadow: 0 0 0 3px rgba(0, 175, 179, .25); }
.vk-acc .accordion-body { padding: 0 26px 24px; color: var(--vk-text); line-height: 1.75; font-size: 16px; }
.vk-acc .accordion-body strong { color: var(--vk-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .vk-hero-split { padding-top: 56px; }
  .vk-hero-split .vk-stage { margin-top: 44px; }
  .vk-kpis { grid-template-columns: repeat(2, 1fr); border-radius: 20px; border-bottom: 1px solid var(--vk-line); margin: 48px 0; }
  .vk-kpis > div:nth-child(3) { border-left: 0; }
  .vk-kpis > div:nth-child(n+3) { border-top: 1px solid var(--vk-line); }
  .vk-side-sticky { position: static; margin-bottom: 36px; }
}
@media (max-width: 767px) {
  .vk-feat-grid { grid-template-columns: 1fr; }
  .vk-tab { padding: 11px 14px; font-size: 14px; }
  .vk-panel h3 { font-size: 26px; }
  .vk-plan .amount { font-size: 40px; }
}
@media (max-width: 575px) {
  .vk-hero-split .vk-hero-cta .vk-btn { width: 100%; justify-content: center; }
  .vk-acc .accordion-button { padding: 18px 18px; font-size: 16px; }
  .vk-acc .accordion-body { padding: 0 18px 20px; }
}

/* contador dentro de .vk-stat b hereda el estilo del número */
.vk-stat b span { color: inherit; font-weight: inherit; }


/* contadores dentro de .vk-kpis b */
.vk-kpis b span { font: inherit; color: inherit; }


/* ==========================================================
   Páginas de servicios
   ========================================================== */
/* viñetas dentro de tarjetas */
.vk-mini { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.vk-mini li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--vk-ink); }
.vk-mini li i { color: var(--vk-primary); margin-top: 4px; font-size: 12px; }
.vk-card .num { font: 800 13px/1 var(--vk-font); letter-spacing: .08em; color: var(--vk-primary-600); margin-bottom: 14px; display: block; }

/* tarjeta visual del hero (maquetas de apoyo) */
.vk-visual { position: relative; background: #fff; border: 1px solid var(--vk-line); border-radius: 20px; box-shadow: var(--vk-shadow-lg); padding: 22px; }
.vk-visual-bar { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; }
.vk-visual-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; background: #d6dee6; }
.vk-visual-bar i:nth-child(1) { background: #ff6b6b; } .vk-visual-bar i:nth-child(2) { background: #ffc94d; } .vk-visual-bar i:nth-child(3) { background: #4cd38a; }
.vk-visual-bar span { margin-left: 8px; font-size: 12px; color: #8a99aa; font-weight: 600; }
.vk-hero-split .vk-stage .vk-visual { margin-bottom: 30px; }

/* ventana de código */
.vk-code { background: #0f1c2e; border-color: #1d2f47; color: #cfe3ff; }
.vk-code .vk-visual-bar span { color: #7e93b0; }
.vk-code pre { margin: 0; font: 500 14.5px/1.85 'JetBrains Mono', 'Fira Code', Consolas, monospace; white-space: pre-wrap; color: #cfe3ff; }
.vk-code .c-c { color: #6b829f; } .vk-code .c-k { color: #5ee7ea; } .vk-code .c-s { color: #ffd479; } .vk-code .c-f { color: #8ab4ff; } .vk-code .c-o { color: #7fe3a1; }

/* maqueta de campaña */
.vk-ads .kp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.vk-ads .kp > div { background: var(--vk-soft); border: 1px solid var(--vk-line); border-radius: 12px; padding: 12px 14px; }
.vk-ads .kp small { display: block; font-size: 11.5px; color: var(--vk-text); font-weight: 600; margin-bottom: 4px; }
.vk-ads .kp b { font: 800 22px/1 var(--vk-font); color: var(--vk-ink); }
.vk-ads .bars { display: flex; align-items: flex-end; gap: 9px; height: 110px; padding: 8px 4px 0; border-bottom: 1px solid var(--vk-line); margin-bottom: 16px; }
.vk-ads .bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--vk-primary), rgba(0, 175, 179, .35)); display: block; }
.vk-ads .ch { display: grid; gap: 11px; }
.vk-ads .ch div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; font-size: 13px; font-weight: 600; color: var(--vk-ink); }
.vk-ads .ch em { height: 8px; border-radius: 999px; background: #e9f1f6; position: relative; overflow: hidden; display: block; }
.vk-ads .ch em::after { content: ""; position: absolute; inset: 0; width: var(--w); background: linear-gradient(90deg, var(--vk-primary), var(--vk-deep)); border-radius: 999px; }

/* maqueta de roadmap */
.vk-road h6 { font: 800 16px/1.2 var(--vk-font); color: var(--vk-ink); margin: 0 0 4px; letter-spacing: 0; text-transform: none; }
.vk-road > p { font-size: 13px; margin-bottom: 18px; }
.vk-road ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.vk-road ol::before { content: ""; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 2px; background: var(--vk-line); }
.vk-road li { position: relative; display: flex; gap: 14px; align-items: center; }
.vk-road li .dot { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: #fff; border: 2px solid var(--vk-line); color: var(--vk-text); z-index: 1; }
.vk-road li.done .dot { background: var(--vk-primary); border-color: var(--vk-primary); color: #fff; }
.vk-road li.now .dot { border-color: var(--vk-primary); color: var(--vk-primary-600); box-shadow: 0 0 0 5px rgba(0, 175, 179, .15); }
.vk-road li b { display: block; font-size: 15px; color: var(--vk-ink); }
.vk-road li small { font-size: 12.5px; color: var(--vk-text); }

/* logos de tecnologías */
.vk-tech { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.vk-tech > div { background: #fff; border: 1px solid var(--vk-line); border-radius: 16px; padding: 24px 12px 18px; text-align: center; transition: .3s; }
.vk-tech > div:hover { transform: translateY(-5px); box-shadow: var(--vk-shadow); border-color: rgba(0, 175, 179, .45); }
.vk-tech img { height: 46px; width: auto; max-width: 70%; object-fit: contain; display: block; margin: 0 auto 12px; }
.vk-tech span { font-size: 14px; font-weight: 700; color: var(--vk-ink); }

/* tarjetas de solución (sector) */
.vk-sol { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vk-line); border-radius: var(--vk-radius); padding: 30px 26px; text-decoration: none; transition: .3s; }
.vk-sol:hover { transform: translateY(-8px); box-shadow: var(--vk-shadow); border-color: rgba(0, 175, 179, .45); }
.vk-sol .vk-tag { align-self: flex-start; margin-bottom: 18px; }
.vk-sol h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.vk-sol p { font-size: 15px; flex: 1; margin-bottom: 18px; }
.vk-sol .vk-link { margin-top: auto; }

/* formulario de contacto */
.vk-form { max-width: 760px; margin: 0 auto; background: #fff; border: 1px solid var(--vk-line); border-radius: 24px; padding: 38px; box-shadow: var(--vk-shadow); }
.vk-form .f { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vk-form .f .full { grid-column: 1 / -1; }
.vk-form input, .vk-form textarea { width: 100%; font: 500 15.5px/1.4 var(--vk-font); color: var(--vk-ink); background: var(--vk-soft); border: 1px solid var(--vk-line); border-radius: 12px; padding: 14px 16px; transition: .2s; outline: none; }
.vk-form input:focus, .vk-form textarea:focus { background: #fff; border-color: var(--vk-primary); box-shadow: 0 0 0 4px rgba(0, 175, 179, .15); }
.vk-form .vk-btn { justify-content: center; margin-top: 22px; width: 100%; }
.vk-form .msg { display: none; margin-top: 16px; padding: 13px 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; }
.vk-form .msg.err { display: block; background: #ffecec; color: #b42323; }
.vk-form .msg.ok { display: block; background: rgba(0, 175, 179, .12); color: var(--vk-deep); }

@media (max-width: 991px) { .vk-tech { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) {
  .vk-tech { grid-template-columns: repeat(2, 1fr); }
  .vk-form { padding: 24px 18px; } .vk-form .f { grid-template-columns: 1fr; }
  .vk-code pre { font-size: 12.5px; } .vk-ads .ch div { grid-template-columns: 78px 1fr; }
}

/* ==========================================================
   Contacto
   ========================================================== */
.vk-contact-hero { text-align: center; padding-bottom: 20px; }
.vk-contact-hero .vk-hero-text { text-align: center; max-width: 780px; margin: 0 auto; }
.vk-contact-hero .vk-hero-sub { margin: 0 auto 28px !important; }
.vk-contact-hero .vk-trust { justify-content: center !important; }
.vk-ccards { margin-top: 56px; padding-bottom: 70px; position: relative; z-index: 2; }
.vk-ccard { height: 100%; background: #fff; border: 1px solid var(--vk-line); border-radius: var(--vk-radius); padding: 30px 26px; text-align: left; box-shadow: var(--vk-shadow); display: flex; flex-direction: column; transition: .3s; }
.vk-ccard:hover { transform: translateY(-6px); border-color: rgba(0, 175, 179, .45); }
.vk-ccard .ico { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; font-size: 22px; margin-bottom: 20px; color: #fff; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); }
.vk-ccard h4 { font-size: 19px; font-weight: 800; margin-bottom: 10px; }
.vk-ccard .lines { display: grid; gap: 6px; margin-bottom: 18px; flex: 1; }
.vk-ccard .lines a, .vk-ccard .lines span { font-size: 16px; font-weight: 600; color: var(--vk-ink); text-decoration: none; line-height: 1.45; word-break: break-word; }
.vk-ccard .lines a:hover { color: var(--vk-primary-600); }
.vk-ccard .lines small { display: block; font-size: 13.5px; font-weight: 500; color: var(--vk-text); }

.vk-wa-express { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #25d366, #128c7e); border-radius: 16px; padding: 16px 20px; margin-bottom: 28px; transition: .25s; box-shadow: 0 12px 28px rgba(18, 140, 126, .25); }
.vk-wa-express:hover { color: #fff; transform: translateY(-2px); }
.vk-wa-express i.big { font-size: 32px; }
.vk-wa-express b { display: block; font-size: 16px; }
.vk-wa-express small { font-size: 13px; opacity: .88; }
.vk-wa-express .go { background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.vk-form.wide { max-width: none; margin: 0; height: 100%; }
.vk-form h3 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.vk-form .sub { font-size: 15px; margin-bottom: 22px; }
.vk-form .rc { display: flex; justify-content: center; margin-top: 18px; }
.vk-map { height: 100%; min-height: 440px; border-radius: 24px; overflow: hidden; border: 1px solid var(--vk-line); box-shadow: var(--vk-shadow); background: var(--vk-soft); }
.vk-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }
@media (max-width: 380px) { .vk-form .rc { transform: scale(.86); transform-origin: center; } }

/* ==========================================================
   Nosotros
   ========================================================== */
.vk-brandcard { text-align: center; padding: 38px 30px 30px; }
.vk-brandcard img { width: 210px; max-width: 70%; height: auto; display: block; margin: 0 auto 18px; }
.vk-brandcard .big { font: 800 44px/1 var(--vk-font); letter-spacing: -.03em; background: linear-gradient(90deg, var(--vk-primary), var(--vk-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vk-brandcard .lbl { color: var(--vk-text); font-weight: 600; margin-top: 6px; }
.vk-tech.six { grid-template-columns: repeat(6, 1fr); }
.vk-tech > div > i { display: block; font-size: 38px; color: var(--vk-primary-600); margin-bottom: 14px; }
.vk-team { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vk-line); border-radius: 24px; overflow: hidden; transition: .3s; }
.vk-team:hover { transform: translateY(-6px); box-shadow: var(--vk-shadow); }
.vk-team .ph { aspect-ratio: 4 / 3.3; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); position: relative; overflow: hidden; display: grid; place-items: center; }
.vk-team .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.vk-team .ph .ini { font: 800 78px/1 var(--vk-font); color: rgba(255, 255, 255, .92); letter-spacing: -.03em; }
.vk-team .in { padding: 28px 28px 26px; display: flex; flex-direction: column; flex: 1; }
.vk-team h4 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.vk-team .role { color: var(--vk-primary-600); font-weight: 700; font-size: 14.5px; margin-bottom: 14px; }
.vk-team p { font-size: 15.5px; flex: 1; }
.vk-team .soc { display: flex; gap: 10px; margin-top: 22px; }
.vk-team .soc a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--vk-deep); background: var(--vk-soft); border: 1px solid var(--vk-line); text-decoration: none; transition: .25s; }
.vk-team .soc a:hover { background: var(--vk-primary); color: #fff; border-color: var(--vk-primary); transform: translateY(-3px); }
@media (max-width: 991px) { .vk-tech.six { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .vk-tech.six { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================
   Clientes
   ========================================================== */
[hidden] { display: none !important; }
.vk-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 44px; }
.vk-filter button { border: 1px solid var(--vk-line); background: #fff; color: var(--vk-text); font: 700 14.5px/1 var(--vk-font); padding: 12px 22px; border-radius: 999px; cursor: pointer; transition: .25s; }
.vk-filter button:hover { color: var(--vk-primary-600); border-color: rgba(0, 175, 179, .5); }
.vk-filter button.active { background: var(--vk-primary); color: #fff; border-color: var(--vk-primary); box-shadow: 0 8px 20px rgba(0, 175, 179, .3); }
.vk-client { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--vk-line); border-radius: 22px; padding: 28px 26px; transition: .3s; }
.vk-client:hover { transform: translateY(-6px); box-shadow: var(--vk-shadow); border-color: rgba(0, 175, 179, .45); }
.vk-client .top { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.vk-client .logo { flex: none; width: 72px; height: 72px; border-radius: 18px; background: var(--vk-soft); border: 1px solid var(--vk-line); display: grid; place-items: center; overflow: hidden; }
.vk-client .logo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; }
.vk-client .logo i { font-size: 28px; color: var(--vk-primary-600); }
.vk-client h4 { font-size: 18px; font-weight: 800; margin: 6px 0 0; }
.vk-client .vk-stars { margin: 0 0 12px; }
.vk-client p { font-size: 15.5px; color: var(--vk-ink); flex: 1; }

/* ==========================================================
   Casos de éxito
   ========================================================== */
.vk-case { display: grid; grid-template-columns: 1.3fr 1fr; background: #fff; border: 1px solid var(--vk-line); border-radius: 28px; overflow: hidden; box-shadow: var(--vk-shadow); margin-bottom: 36px; }
.vk-case:last-child { margin-bottom: 0; }
.vk-case .l { padding: 38px 38px 34px; }
.vk-case .r { position: relative; padding: 38px; display: flex; flex-direction: column; justify-content: center; color: #fff; background: radial-gradient(420px 260px at 90% 0%, rgba(94, 231, 234, .35), transparent 65%), linear-gradient(135deg, var(--vk-deep), #013543); }
.vk-case.alt { grid-template-columns: 1fr 1.3fr; }
.vk-case.alt .l { order: 2; } .vk-case.alt .r { order: 1; }
.vk-case .head { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.vk-case .logo { flex: none; width: 68px; height: 68px; border-radius: 18px; background: var(--vk-soft); border: 1px solid var(--vk-line); display: grid; place-items: center; overflow: hidden; }
.vk-case .logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; display: block; }
.vk-case h3 { font-size: 26px; font-weight: 800; margin: 6px 0 0; }
.vk-case .ms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.vk-case .ms > div { background: var(--vk-soft); border: 1px solid var(--vk-line); border-radius: 14px; padding: 16px 14px; }
.vk-case .ms b { display: block; font: 800 20px/1.15 var(--vk-font); color: var(--vk-ink); letter-spacing: -.02em; }
.vk-case .ms span { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--vk-text); }
.vk-case .ms .hi b { color: var(--vk-primary-600); font-size: 26px; }
.vk-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); position: relative; }
.vk-phases::before { content: ""; position: absolute; left: 16%; right: 16%; top: 15px; height: 2px; background: var(--vk-line); }
.vk-phases li { position: relative; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--vk-ink); }
.vk-phases li i { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 8px; border-radius: 50%; background: var(--vk-primary); color: #fff; font-style: normal; font-size: 13px; position: relative; z-index: 1; box-shadow: 0 0 0 5px #fff; }
.vk-phases li small { display: block; font-weight: 600; color: var(--vk-text); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.vk-case .r .qm { font-size: 38px; color: #5ee7ea; line-height: 1; margin-bottom: 14px; }
.vk-case .r blockquote { margin: 0; font-size: 18px; line-height: 1.65; color: rgba(255, 255, 255, .95); font-weight: 500; }
.vk-case .r .who { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18); }
.vk-case .r .who .vk-avatar { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.vk-case .r .who b { display: block; color: #fff; }
.vk-case .r .who small { color: rgba(255, 255, 255, .7); font-size: 13px; }
@media (max-width: 991px) {
  .vk-case, .vk-case.alt { grid-template-columns: 1fr; }
  .vk-case.alt .l, .vk-case.alt .r { order: initial; }
  .vk-case .l, .vk-case .r { padding: 28px 24px; }
}
@media (max-width: 575px) { .vk-case .ms { grid-template-columns: 1fr; } .vk-case .r blockquote { font-size: 16.5px; } }

/* ==========================================================
   Organigrama
   ========================================================== */
.vk-org { display: flex; flex-direction: column; align-items: center; }
.vk-org-root { position: relative; background: #fff; border: 2px solid var(--vk-primary); border-radius: 20px; padding: 18px 34px; box-shadow: var(--vk-shadow); text-align: center; }
.vk-org-root img { height: 50px; width: auto; display: block; margin: 0 auto 6px; }
.vk-org-root small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--vk-primary-600); }
.vk-org-root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 40px; background: var(--vk-line); }
.vk-org-branches { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; width: 100%; margin-top: 40px; padding-top: 40px; }
.vk-org-branches::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--vk-line); }
.vk-org-branch { position: relative; display: flex; flex-direction: column; align-items: center; }
.vk-org-branch::before { content: ""; position: absolute; left: 50%; top: -40px; width: 2px; height: 40px; background: var(--vk-line); }
.vk-dir { width: 100%; max-width: 380px; display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--vk-line); border-radius: 22px; padding: 18px; box-shadow: var(--vk-shadow); position: relative; }
.vk-dir .ph { flex: none; width: 84px; height: 84px; border-radius: 20px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); }
.vk-dir .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.vk-dir .ph b { font: 800 28px/1 var(--vk-font); color: #fff; }
.vk-dir h4 { font-size: 19px; font-weight: 800; margin-bottom: 2px; }
.vk-dir .role { font-size: 13.5px; font-weight: 800; color: var(--vk-primary-600); margin-bottom: 6px; }
.vk-dir p { font-size: 13.5px; line-height: 1.5; }
.vk-dir::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 20px; background: var(--vk-line); }
.vk-kids { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; margin-top: 40px; }
.vk-kids::before { content: ""; position: absolute; top: -20px; left: 25%; right: 25%; height: 2px; background: var(--vk-line); }
.vk-kid { position: relative; background: #fff; border: 1px solid var(--vk-line); border-radius: 18px; padding: 20px 18px; text-align: center; transition: .3s; }
.vk-kid::before { content: ""; position: absolute; left: 50%; top: -20px; width: 2px; height: 20px; background: var(--vk-line); }
.vk-kid:hover { transform: translateY(-5px); box-shadow: var(--vk-shadow); border-color: rgba(0, 175, 179, .45); }
.vk-kid .ico { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px; display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); }
.vk-kid h5 { font: 800 16px/1.25 var(--vk-font); color: var(--vk-ink); margin: 0 0 3px; letter-spacing: -.01em; }
.vk-kid .sub { font-size: 12.5px; font-weight: 800; color: var(--vk-primary-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; display: block; }
.vk-kid p { font-size: 13.5px; line-height: 1.55; }
@media (max-width: 860px) {
  .vk-org-branches { grid-template-columns: 1fr; gap: 56px; }
  .vk-org-branches::before, .vk-org-branch::before { display: none; }
  .vk-org-root::after { display: none; }
  .vk-org-branches { margin-top: 28px; padding-top: 0; }
}
@media (max-width: 520px) { .vk-kids { grid-template-columns: 1fr; } .vk-kids::before, .vk-kid::before { display: none; } .vk-dir { flex-direction: column; text-align: center; } }

.vk-home h5, .vk-home h6 { text-transform: none; }

/* ==========================================================
   Planes (selector por categoría)
   ========================================================== */
.vk-pricing[data-period="web"] .vk-ecom { display: none; }
.vk-pricing[data-period="ecom"] .vk-web { display: none; }
.vk-plan .ptag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; padding: 7px 13px; border-radius: 999px; background: rgba(0, 175, 179, .12); color: var(--vk-primary-600); margin-bottom: 18px; }
.vk-plan .desc { font-size: 15px; min-height: 52px; }
.vk-plan .amount.once { margin-bottom: 0; }
.vk-plan li.no { color: #9aa8b6; }
.vk-plan li.no i { color: #c4cfda; }
.vk-home .vk-extra { margin: 56px auto 0; max-width: 620px; text-align: center; font-size: 16.5px; color: var(--vk-text); background: #fff; border: 1px dashed rgba(0, 175, 179, .55); border-radius: 16px; padding: 18px 24px; }
.vk-extra a { color: var(--vk-primary-600); font-weight: 700; text-decoration: none; }
.vk-extra a:hover { text-decoration: underline; }

/* ==========================================================
   FAQ: buscador
   ========================================================== */
.vk-search { position: relative; max-width: 560px; margin: 0 auto 28px; }
.vk-search i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--vk-primary-600); }
.vk-search input { width: 100%; font: 500 16px/1.4 var(--vk-font); color: var(--vk-ink); background: #fff; border: 1px solid var(--vk-line); border-radius: 16px; padding: 17px 20px 17px 52px; box-shadow: var(--vk-shadow); outline: none; transition: .2s; }
.vk-search input:focus { border-color: var(--vk-primary); box-shadow: 0 0 0 4px rgba(0, 175, 179, .15); }
.vk-empty { text-align: center; padding: 36px 16px; color: var(--vk-text); font-size: 16px; }
.vk-acc .accordion-item .cat { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--vk-primary-600); background: rgba(0, 175, 179, .10); padding: 4px 10px; border-radius: 999px; margin-right: 12px; flex: none; }
.vk-acc .accordion-button { gap: 4px; }

/* ==========================================================
   Error 404
   ========================================================== */
.vk-404 { min-height: 62vh; display: flex; align-items: center; padding-bottom: 60px; }
.vk-404 .vk-hero-text { text-align: left; max-width: none; margin: 0; }
.vk-404 .vk-hero-cta { justify-content: flex-start; }
.vk-404 .small-err { margin-top: 26px; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: var(--vk-text); }
.vk-n404 { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 36px 10px 26px; font: 800 clamp(110px, 17vw, 190px)/1 var(--vk-font); letter-spacing: -.06em; }
.vk-n404 > span:not(.o) { background: linear-gradient(90deg, var(--vk-primary), var(--vk-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.vk-n404 .o { width: .78em; height: .78em; border-radius: 50%; display: grid; place-items: center; font-size: .5em; letter-spacing: 0; color: #fff; -webkit-text-fill-color: #fff; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); box-shadow: 0 18px 40px rgba(0, 175, 179, .4); animation: vk-bob 4.5s ease-in-out infinite; }
.vk-n404 .o i { color: #fff; -webkit-text-fill-color: #fff; font-size: .52em; }
.vk-url { text-align: center; font-size: 15px; font-weight: 600; color: var(--vk-ink); padding-bottom: 6px; }
.vk-url small { display: block; margin-top: 4px; font-weight: 500; color: var(--vk-text); font-size: 13.5px; }
.vk-quick { display: flex; align-items: center; gap: 16px; height: 100%; background: #fff; border: 1px solid var(--vk-line); border-radius: 18px; padding: 18px 20px; text-decoration: none; transition: .25s; }
.vk-quick:hover { transform: translateY(-5px); box-shadow: var(--vk-shadow); border-color: rgba(0, 175, 179, .5); }
.vk-quick .ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; color: #fff; background: linear-gradient(135deg, var(--vk-primary), var(--vk-deep)); }
.vk-quick b { display: block; color: var(--vk-ink); font-size: 16px; }
.vk-quick small { color: var(--vk-text); font-size: 13.5px; }
.vk-quick > i.go { margin-left: auto; color: var(--vk-primary-600); transition: .25s; }
.vk-quick:hover > i.go { transform: translateX(4px); }
@media (max-width: 991px) { .vk-404 { min-height: 0; } }

/* ==========================================================================
   Páginas legales (/vortekpay/privacidad, /vortekpay/terminos)
   Texto largo con índice lateral.
   Con ?app=1 se muestran «solo texto», sin menú ni pie: así las abre la app
   VortekPay dentro de su propia pantalla (la clase vk-embed la pone un script
   en el <head> de cada página).
   ========================================================================== */
.vk-legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.vk-legal-nav { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 2px; padding: 18px 16px; border: 1px solid #e3ecef; border-radius: 16px; background: #fff; font-size: 14px; }
.vk-legal-nav b { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6b7f88; margin: 0 8px 8px; }
.vk-legal-nav a { padding: 6px 8px; border-radius: 8px; color: #33505b; text-decoration: none; line-height: 1.35; }
.vk-legal-nav a:hover { background: #eaf6f7; color: #01485b; }
.vk-legal-body { max-width: 760px; color: #33505b; font-size: 16.5px; line-height: 1.7; }
.vk-legal-body h2 { margin: 44px 0 12px; font-size: 24px; font-weight: 700; color: #01485b; scroll-margin-top: 110px; }
.vk-legal-body h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 600; color: #0d3b47; }
.vk-legal-body p { margin: 0 0 14px; }
.vk-legal-body ul { margin: 0 0 14px; padding-left: 22px; list-style: disc; }
.vk-legal-body li { margin-bottom: 8px; list-style: inherit; }
.vk-legal-body a { color: #018a91; font-weight: 600; }
.vk-legal-fecha { font-size: 14px; color: #6b7f88; }
.vk-legal-resumen { padding: 22px 24px 10px; border-radius: 18px; background: #eaf6f7; border: 1px solid #cfe9eb; scroll-margin-top: 110px; }
.vk-legal-resumen h2 { margin-top: 0; }
.vk-legal-tabla { overflow-x: auto; margin: 0 0 14px; border: 1px solid #e3ecef; border-radius: 14px; }
.vk-legal-tabla table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.vk-legal-tabla th { text-align: left; padding: 12px 16px; background: #f4f8f9; color: #01485b; font-weight: 600; }
.vk-legal-tabla td { padding: 12px 16px; border-top: 1px solid #e3ecef; vertical-align: top; }
.vk-legal-tabla td:first-child { font-weight: 600; color: #0d3b47; min-width: 190px; }
.vk-legal-body ul.vk-legal-contacto { list-style: none; padding-left: 0; }
.vk-legal-contacto i { width: 24px; color: #018a91; }

@media (max-width: 991.98px) {
    .vk-legal { grid-template-columns: 1fr; gap: 24px; }
    .vk-legal-nav { position: static; }
    .vk-legal-tabla td:first-child { min-width: 130px; }
}

/* Modo «solo texto» para la app */
.vk-embed, .vk-embed body { background: #fff !important; }
.vk-embed .vk-topbar,
.vk-embed .vk-header,
.vk-embed .vk-scrim,
.vk-embed .vk-footer,
.vk-embed .vk-totop,
.vk-embed .vk-hero,
.vk-embed .vk-legal-nav { display: none !important; }
.vk-embed .vk-section { padding: 14px 0 28px !important; }
.vk-embed .vk-legal { display: block; }
.vk-embed .vk-legal-body { font-size: 16px; }
.vk-embed .vk-legal-body h2 { font-size: 20px; margin-top: 34px; scroll-margin-top: 12px; }
.vk-embed .vk-legal-resumen { padding: 18px 18px 8px; scroll-margin-top: 12px; }
.vk-embed .vk-reveal { opacity: 1 !important; transform: none !important; }