/* ═══════════════════════════════════════════════════════════════════════
   VIMEDIA CORP · portada — capa AURA de las secciones nuevas (Fase 22.7)
   ───────────────────────────────────────────────────────────────────────
   Pedido del usuario: «te estás yendo muy lejos de lo bueno que ya tenía
   antes la web: efectos, colores, glass Aura UI». Decisión: la capa PRO se
   queda en lo que ya existía; SOLO las secciones nuevas (clientes,
   divisiones, casos, ecosistema, quiénes somos, testimonios, cotización)
   vuelven al lenguaje original de la web: morado #5e2ced, violeta #8b5cf6,
   cian #00dafc y dorado #f3e5ab, títulos en degradado, vidrio con borde en
   degradado y halos de color detrás.
   Va DESPUÉS de vm-home-pro.css. Los módulos traen su <style> en el cuerpo,
   por eso cada regla lleva `html` delante (gana por especialidad sin pelear).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --a-morado: #5e2ced; --a-violeta: #8b5cf6; --a-cian: #00dafc; --a-oro: #f3e5ab;
  --a-texto: linear-gradient(135deg, #5e2ced 0%, #00dafc 60%, #f3e5ab 100%);
  --a-texto-osc: linear-gradient(135deg, #a78bfa 0%, #00dafc 60%, #f3e5ab 100%);
  --a-borde: linear-gradient(135deg, rgba(94,44,237,.6) 0%, rgba(0,218,252,.5) 100%);
  --a-solido: linear-gradient(135deg, #5e2ced 0%, #8b5cf6 55%, #00dafc 100%);
}

/* — utilidades: texto en degradado y borde de vidrio en degradado — */
html .vm-casos__kicker, html .vm-eco__kicker, html .vm-nos__kicker, html .vm-tes__kicker, html .vm-cl__kicker,
html .vm-sl__titulo em, html .vm-cq__titulo em {
  background-image: var(--a-texto); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html .vm-eco__kicker, html .vm-cl__kicker, html .vm-sl__titulo em, html .vm-cq__titulo em { background-image: var(--a-texto-osc); }
/* la máscara de los titulares se queda: sólo cambia el relleno */
html .vm-sl__titulo em.vm-sube, html .vm-cq__titulo em.vm-sube { display: inline-block; }

/* halos de color detrás (dos por sección, fijos y suaves) */
html .vm-casos, html .vm-nos, html .vm-tes, html .vm-eco, html .vm-sl, html .vm-cl { position: relative; overflow: hidden; isolation: isolate; }
html .vm-casos::before, html .vm-nos::before, html .vm-tes::before, html .vm-eco::before, html .vm-sl::before,
html .vm-casos::after,  html .vm-nos::after,  html .vm-tes::after,  html .vm-eco::after,  html .vm-sl::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(80px);
}
html .vm-casos::before, html .vm-nos::before, html .vm-tes::before { width: 420px; height: 420px; top: -140px; left: -120px; background: radial-gradient(circle, var(--a-morado) 0%, transparent 70%); opacity: .22; }
html .vm-casos::after,  html .vm-nos::after,  html .vm-tes::after  { width: 360px; height: 360px; bottom: -120px; right: -100px; background: radial-gradient(circle, var(--a-cian) 0%, transparent 70%); opacity: .22; }
html .vm-eco::before, html .vm-sl::before { width: 520px; height: 520px; top: -160px; left: -140px; background: radial-gradient(circle, var(--a-morado) 0%, transparent 70%); opacity: .55; }
html .vm-eco::after,  html .vm-sl::after  { width: 460px; height: 460px; bottom: -160px; right: -120px; background: radial-gradient(circle, var(--a-cian) 0%, transparent 70%); opacity: .35; }

/* ═══ Clientes ════════════════════════════════════════════════════════ */
html .vm-cl { background: #0f172a; border-top: 1px solid rgba(255,255,255,.06); }
html .vm-cl::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 140% at 0% 50%, rgba(94,44,237,.35), transparent 60%), radial-gradient(50% 140% at 100% 50%, rgba(0,218,252,.22), transparent 60%); }
html .vm-cl__item:hover { background-image: var(--a-texto-osc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ═══ Divisiones (slider) ════════════════════════════════════════════ */
html .vm-sl { background: #0f172a; }
html .vm-sl__panel { box-shadow: 0 24px 50px -30px rgba(94,44,237,.55); }
html .vm-sl__panel.is-on { box-shadow: 0 30px 70px -30px rgba(94,44,237,.75), 0 0 0 1px rgba(139,92,246,.35); }
html .vm-sl__velo { background: rgba(15,23,42,.42); }
html .vm-sl__panel.is-on .vm-sl__velo { background: rgba(15,23,42,.08); }
html .vm-sl__lomo i { color: var(--a-cian); }
html .vm-sl__placa { isolation: isolate; }
html .vm-sl__placa::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--a-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
html .vm-sl__placa { border-color: transparent; }
html .vm-sl__nombre i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: .85rem; background: var(--a-solido); box-shadow: 0 6px 14px rgba(94,44,237,.4); }
html .vm-sl__barra::after { background: linear-gradient(90deg, var(--a-morado), var(--a-cian)); }
html .vm-sl a.vm-sl__ir { color: var(--a-cian); }

/* ═══ Casos ══════════════════════════════════════════════════════════ */
html .vm-caso { position: relative; border-color: transparent; background: rgba(255,255,255,.88); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 20px 50px rgba(15,23,42,.08), 0 4px 14px rgba(94,44,237,.08); }
html .vm-caso::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--a-borde); z-index: 2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
html .vm-caso:hover { box-shadow: 0 28px 60px -20px rgba(94,44,237,.35), 0 8px 18px rgba(0,218,252,.12); }
html .vm-caso__div { background: var(--a-solido); border-radius: 999px; padding: 5px 11px; box-shadow: 0 6px 14px rgba(94,44,237,.35); }
html .vm-caso__res::before { background: var(--a-cian); box-shadow: 0 0 0 3px rgba(0,218,252,.2); }

/* ═══ Ecosistema ═════════════════════════════════════════════════════ */
html .vm-eco { background: #0f172a; }
html .vm-eco__item { position: relative; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html .vm-eco__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--a-borde); opacity: 0; transition: opacity .3s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
html .vm-eco__item:hover::before { opacity: 1; }
html .vm-eco__item:hover { box-shadow: 0 14px 34px -14px rgba(94,44,237,.6); }
html .vm-eco__item i { width: 34px; height: 34px; flex: 0 0 34px; margin-top: 0; border-radius: 10px; display: grid; place-items: center; font-size: .85rem; color: #fff; background: var(--a-solido); box-shadow: 0 6px 14px rgba(94,44,237,.35); }
html .vm-eco__item:nth-child(3n+2) i { background: linear-gradient(135deg, #00dafc 0%, #2563eb 100%); box-shadow: 0 6px 14px rgba(0,218,252,.3); }
html .vm-eco__item:nth-child(3n) i { background: linear-gradient(135deg, #f59e0b 0%, #f3e5ab 100%); color: #5e2ced; box-shadow: 0 6px 14px rgba(245,158,11,.28); }

/* ═══ Quiénes somos ══════════════════════════════════════════════════ */
html .vm-nos__foto { position: relative; box-shadow: 0 30px 60px -30px rgba(94,44,237,.5); }
html .vm-nos__foto::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: var(--a-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

/* ═══ Testimonios ════════════════════════════════════════════════════ */
html .vm-tes__item { position: relative; border-left: 0; padding: 24px 24px 22px; border-radius: 18px; background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 20px 50px rgba(15,23,42,.08), 0 4px 14px rgba(94,44,237,.08); }
html .vm-tes__item::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--a-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
html .vm-tes__cara { background: var(--a-solido); box-shadow: 0 6px 14px rgba(94,44,237,.35); }

/* ═══ Cotización (vidrio) ════════════════════════════════════════════ */
html .vm-cm.vm-cq { background: #0f172a !important; }
html .vm-cq__forma--luz2 > i { background: var(--a-cian); opacity: .38; }
html .vm-cq__forma--aro > i { border-color: var(--a-violeta); box-shadow: inset 0 0 36px rgba(255,255,255,.28), inset 0 -18px 40px rgba(11,15,28,.5), 0 0 80px rgba(0,218,252,.35); }
html .vm-cq__forma--orbe > i { background: radial-gradient(circle at 32% 30%, #fff 0%, #a78bfa 22%, #5e2ced 70%); }
html .vm-cq__vidrio { border-color: transparent; }
html .vm-cq__vidrio::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: var(--a-borde);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
html .vm-cq .vm-cm__btn { background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important; box-shadow: 0 10px 24px -8px rgba(37,211,102,.6) !important; }
html .vm-cq__pildora b { background: var(--a-solido); }
html .vm-cq__pildora--nota b { background: linear-gradient(135deg, #00dafc 0%, #2563eb 100%); color: #fff; }
html .vm-cq__ficha i { color: var(--a-cian); }
html .vm-cq .vm-cm__input:focus, html .vm-cq .vm-cm__select:focus, html .vm-cq .vm-cm__textarea:focus { border-bottom-color: var(--a-cian) !important; box-shadow: 0 1px 0 0 var(--a-cian) !important; }
html .vm-cq .vm-cm__input:focus + .vm-cm__flabel, html .vm-cq .vm-cm__input:not(:placeholder-shown) + .vm-cm__flabel,
html .vm-cq .vm-cm__textarea:focus + .vm-cm__flabel, html .vm-cq .vm-cm__textarea:not(:placeholder-shown) + .vm-cm__flabel,
html .vm-cq .vm-cm__select:focus + .vm-cm__flabel, html .vm-cq .vm-cm__select.has-val + .vm-cm__flabel { color: var(--a-cian) !important; }

@media (prefers-reduced-motion: reduce) {
  html .vm-eco__item::before { transition: none; }
}

/* 22.8 — el logo de WhatsApp lleva su verde solo en el ícono */
html .vm-cq__ficha .fa-whatsapp { color: #25d366; }

/* 22.9 — el resplandor del cuadro de Quiénes somos ya no se corta al final de la sección */
html .vm-nos { padding-bottom: 72px; }
@media (max-width: 900px) { html .vm-nos { padding-bottom: 48px; } }
/* 22.9 — los halos de estas dos secciones se apagan ANTES del borde: sin línea recta */
html .vm-casos::before, html .vm-nos::before { top: 8px; }
html .vm-casos::after,  html .vm-nos::after  { bottom: 8px; }