/* ═══════════════════════════════════════════════════════════════════════
   VIMEDIA CORP · portada — capa PRO
   ────────────────────────────────────────────────────────────────────────
   No cambia el marcado ni el contenido: es una hoja que va AL FINAL y
   disciplina lo que ya existe. Tres colores: el fondo oscuro, el blanco y
   UN acento. Sin degradados, sin cajas de ícono, sin pesos de valla.
   Lo que la portada tiene de bueno —la foto, el movimiento, la marca grande,
   las tarjetas— se queda. Lo que la ensucia —55 colores, 93 degradados,
   36 íconos en cajas— se apaga.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --p-fondo:   #0b0f1c;
  --p-tinta:   #ffffff;
  --p-acento:  #5e2ced;
  --p-linea:   rgba(255,255,255,.12);
  --p-suave:   rgba(255,255,255,.70);
  --p-vidrio:  rgba(255,255,255,.06);
  --p-linea-c: rgba(11,15,28,.10);   /* filete sobre blanco */
  --p-suave-c: rgba(11,15,28,.62);   /* texto secundario sobre blanco */
  --p-curva:   cubic-bezier(.2,.8,.2,1);
}

/* ═══ Barra ════════════════════════════════════════════════════════════ */
.vm-nav {
  background: rgba(11,15,28,.72) !important; background-image: none !important;
  border: 1px solid var(--p-linea) !important;
  box-shadow: 0 14px 34px -22px rgba(0,0,0,.7) !important;
  backdrop-filter: blur(18px) saturate(140%) !important; -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.vm-nav-brand { font-weight: 600 !important; letter-spacing: -.01em; }
.vm-corp-text { background: none !important; -webkit-text-fill-color: var(--p-suave) !important; color: var(--p-suave) !important; font-weight: 300 !important; }

/* Los once círculos de colores pasan a un solo lenguaje: ícono claro, sin
   fondo; el acento sólo cuando significa algo (activo / cursor). Las
   variables vienen escritas en línea, por eso van con !important. */
.vm-nav-links a, .vm-nav-links a[style] {
  --vm-item-bg: transparent !important; --vm-item-fg: rgba(255,255,255,.78) !important;
  --vm-item-ring: transparent !important; --vm-item-accent: var(--p-acento) !important;
  --vm-item-border: 1px solid transparent !important;
  background: transparent !important; background-image: none !important;
  color: rgba(255,255,255,.78) !important; border: 1px solid transparent !important;
  box-shadow: none !important; font-size: .88rem !important;
  transition: color .2s var(--p-curva), background .2s var(--p-curva), transform .2s var(--p-curva) !important;
}
.vm-nav-links a:hover { transform: translateY(-1px) !important; border: 1px solid transparent !important; box-shadow: none !important; background: rgba(255,255,255,.08) !important; color: #fff !important; }
.vm-nav-links a.vm-active { color: #fff !important; background: var(--p-acento) !important; animation: none !important; }
.vm-nav-links a::after { display: none !important; }
.vm-nav-wa { background: transparent !important; box-shadow: none !important; width: 40px !important; height: 40px !important; color: #25d366 !important; font-size: 1.15rem !important; }
.vm-nav-wa:hover { transform: translateY(-1px); }
.vm-cart-icon, .vm-nav-user { background: transparent !important; box-shadow: none !important; color: rgba(255,255,255,.78) !important; }
.vm-cart-icon:hover, .vm-nav-user:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.vm-cart-badge { background: var(--p-acento) !important; font-weight: 600 !important; }
.vm-nav-burger { background: transparent !important; box-shadow: none !important; }

/* ═══ Portada ══════════════════════════════════════════════════════════ */
.vm-portada .vm-hero { background: var(--p-fondo) !important; background-image: none !important; }
/* La foto se queda. El velo deja de ser una mancha de tres colores: un
   oscurecido parejo, medido para que el blanco lea encima. */
.vm-portada .vm-hero-slide::after { background: rgba(11,15,28,.58) !important; background-image: none !important; }
.vm-portada .vm-hero-mesh, .vm-portada .vm-hero-glow, .vm-portada .vm-hero-noise { display: none !important; }
/* La insignia deja de ser pastilla: antesala en texto, sin rayo. */
.vm-portada .vm-hero-badge {
  background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important;
  color: rgba(255,255,255,.85) !important; font-weight: 600 !important; font-size: .72rem !important; letter-spacing: .18em !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.vm-portada .vm-hero-badge i { display: none !important; }
/* La marca grande se queda grande, pero en blanco sólido: el degradado
   azul-naranja era el que más "plantilla" gritaba. */
.vm-portada .vm-hero-brand h1 { font-weight: 700 !important; letter-spacing: -.04em !important; }
.vm-portada .vm-vimedia { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff !important; text-shadow: 0 2px 30px rgba(0,0,0,.45) !important; }
.vm-portada .vm-vimedia::after { display: none !important; }
.vm-portada .vm-hero-tagline { color: rgba(255,255,255,.82) !important; font-weight: 400 !important; }
/* Dos botones: uno sólido (el acento) y uno en contorno. A la medida del texto. */
.vm-portada .vm-hero-btn { font-weight: 600 !important; border-radius: 10px !important; height: 42px !important; padding: 0 20px !important; box-shadow: none !important; letter-spacing: 0 !important; }
.vm-portada .vm-hero-btn.vm-primary { background: var(--p-acento) !important; background-image: none !important; border: 1px solid var(--p-acento) !important; color: #fff !important; }
.vm-portada .vm-hero-btn.vm-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.vm-portada .vm-hero-btn.vm-secondary { background: transparent !important; border: 1px solid rgba(255,255,255,.35) !important; color: #fff !important; }
.vm-portada .vm-hero-btn.vm-secondary:hover { background: rgba(255,255,255,.08) !important; }
/* Las cuatro divisiones siguen siendo tarjetas de vidrio — pero vidrio de
   verdad, sin bordes de arcoíris, y el ícono deja de ser un cubo de color. */
.vm-portada .vm-hero-service {
  background: var(--p-vidrio) !important; background-image: none !important;
  border: 1px solid var(--p-linea) !important; box-shadow: none !important; border-radius: 14px !important;
  transition: background .2s var(--p-curva), transform .2s var(--p-curva), border-color .2s var(--p-curva) !important;
}
.vm-portada .vm-hero-service::before, .vm-portada .vm-hero-service::after { display: none !important; }
.vm-portada .vm-hero-service:hover { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.26) !important; transform: translateY(-3px) !important; }
.vm-portada .vm-hero-service-icon,
.vm-portada .vm-hero-service:nth-child(2) .vm-hero-service-icon,
.vm-portada .vm-hero-service:nth-child(3) .vm-hero-service-icon,
.vm-portada .vm-hero-service:nth-child(4) .vm-hero-service-icon {
  width: auto !important; height: auto !important; background: none !important; background-image: none !important;
  box-shadow: none !important; border-radius: 0 !important; font-size: 1.15rem !important; color: #fff !important; margin: 0 auto 10px !important;
}
.vm-portada .vm-hero-service h4 { font-weight: 600 !important; }
.vm-portada .vm-hero-service p, .vm-portada .vm-hero-service span { color: var(--p-suave) !important; font-weight: 400 !important; }
.vm-slider-dot { background: rgba(255,255,255,.35) !important; } .vm-slider-dot.vm-active { background: #fff !important; }

/* ═══ Quiénes somos ════════════════════════════════════════════════════ */
.vm-mision { background: #fff !important; background-image: none !important; }
.vm-mision .vm-mision__kicker { color: var(--p-acento) !important; font-weight: 600 !important; letter-spacing: .18em !important; }
.vm-mision .vm-mision__title { font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--p-fondo) !important; }
.vm-mision .vm-mision__hl-grad { background: none !important; -webkit-text-fill-color: var(--p-fondo) !important; color: var(--p-fondo) !important; }
.vm-mision .vm-mision__intro { color: var(--p-suave-c) !important; }
.vm-mision .vm-mision__card {
  background: #fff !important; border: 1px solid var(--p-linea-c) !important; border-radius: 16px !important;
  box-shadow: 0 16px 40px -28px rgba(11,15,28,.35) !important; backdrop-filter: none !important;
}
.vm-mision .vm-mision__card::before { display: none !important; }
.vm-mision .vm-mision__icon,
.vm-mision .vm-mision__card--vision .vm-mision__icon,
.vm-mision .vm-mision__card--values .vm-mision__icon {
  width: auto !important; height: auto !important; background: none !important; background-image: none !important;
  box-shadow: none !important; color: var(--p-acento) !important; font-size: 1.15rem !important; border-radius: 0 !important;
}
.vm-mision .vm-mision__badge { background: none !important; border: 0 !important; color: var(--p-acento) !important; font-weight: 600 !important; padding: 0 !important; letter-spacing: .14em !important; box-shadow: none !important; }
.vm-mision .vm-mision__card h3 { font-weight: 600 !important; color: var(--p-fondo) !important; }
.vm-mision .vm-mision__card p { color: var(--p-suave-c) !important; }
/* Las tres filas con ícono dejan la cajita: texto, y el ícono chico en el acento. */
.vm-mision .vm-mision__card li, .vm-mision .vm-mision__card li > span, .vm-mision .vm-mision__card li > div,
.vm-mision .vm-mision__feature, .vm-mision .vm-mision__item, .vm-mision .vm-mision__chip, .vm-mision .vm-mision__point {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  color: var(--p-fondo) !important; font-weight: 500 !important;
}
.vm-mision .vm-mision__card li i, .vm-mision .vm-mision__feature i, .vm-mision .vm-mision__item i, .vm-mision .vm-mision__chip i, .vm-mision .vm-mision__point i,
.vm-mision .vm-mision__card li span:first-child:not(:last-child) {
  background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; height: auto !important; min-width: 0 !important;
  color: var(--p-acento) !important; font-size: .85rem !important;
}

/* ═══ Lo que hacemos (frases sobre foto) ═══════════════════════════════ */
.vm-sv__overlay { background: rgba(11,15,28,.62) !important; background-image: none !important; }
.vm-sv__blob--1, .vm-sv__blob--2 { display: none !important; }
.vm-sv__kicker { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: rgba(255,255,255,.85) !important; font-weight: 600 !important; letter-spacing: .18em !important; }
.vm-sv__t1, .vm-sv__t2 { font-weight: 700 !important; letter-spacing: -.035em !important; }
.vm-sv__t2 { background: none !important; -webkit-text-fill-color: rgba(255,255,255,.72) !important; color: rgba(255,255,255,.72) !important; font-weight: 400 !important; }
.vm-sv__intro { color: rgba(255,255,255,.82) !important; }
.vm-sv__dot { background: rgba(255,255,255,.35) !important; } .vm-sv__dot.is-active { background: #fff !important; }

/* ═══ Proceso ══════════════════════════════════════════════════════════ */
.vm-mtl { background: #fff !important; background-image: none !important; }
.vm-mtl__kicker { color: var(--p-acento) !important; font-weight: 600 !important; letter-spacing: .18em !important; }
.vm-mtl__title { font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--p-fondo) !important; }
.vm-mtl__title span { background: none !important; -webkit-text-fill-color: var(--p-acento) !important; color: var(--p-acento) !important; }
.vm-mtl__intro { color: var(--p-suave-c) !important; }
.vm-mtl__timeline::before { background: var(--p-linea-c) !important; background-image: none !important; height: 1px !important; }
/* El círculo de 72px con ícono gigante pasa a 40px, en contorno, ícono de 16. */
.vm-mtl__dot {
  width: 40px !important; height: 40px !important; background: #fff !important; background-image: none !important;
  border: 1px solid var(--p-acento) !important; color: var(--p-acento) !important; font-size: .9rem !important; box-shadow: none !important;
}
.vm-mtl__num { font-weight: 600 !important; color: var(--p-acento) !important; }
.vm-mtl__name { font-weight: 600 !important; color: var(--p-fondo) !important; }
.vm-mtl__desc { color: var(--p-suave-c) !important; }
.vm-mtl__tag { background: none !important; border: 1px solid var(--p-linea-c) !important; color: var(--p-suave-c) !important; font-weight: 500 !important; box-shadow: none !important; }

/* ═══ Cotización ═══════════════════════════════════════════════════════ */
.vm-cm { background: #fff !important; background-image: none !important; }
.vm-cm::before, .vm-cm::after { display: none !important; }
.vm-cm__kicker { color: var(--p-acento) !important; font-weight: 600 !important; letter-spacing: .18em !important; }
.vm-cm__kicker i { display: none !important; }
.vm-cm__title { font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--p-fondo) !important; }
.vm-cm__title span { background: none !important; -webkit-text-fill-color: var(--p-acento) !important; color: var(--p-acento) !important; }
.vm-cm__intro { color: var(--p-suave-c) !important; }
.vm-cm__card { background: #fff !important; border: 1px solid var(--p-linea-c) !important; border-radius: 16px !important; box-shadow: 0 16px 40px -28px rgba(11,15,28,.35) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.vm-cm__card::before { display: none !important; }
.vm-cm__card-title { font-weight: 600 !important; color: var(--p-fondo) !important; }
.vm-cm__icon, .vm-cm__icon--cyan, .vm-cm__icon--gold { width: auto !important; height: auto !important; background: none !important; background-image: none !important; box-shadow: none !important; color: var(--p-acento) !important; font-size: 1rem !important; border-radius: 0 !important; }
.vm-cm__label { font-weight: 600 !important; color: var(--p-suave-c) !important; letter-spacing: .06em !important; }
.vm-cm__value { font-weight: 600 !important; color: var(--p-fondo) !important; }
.vm-cm__value-pill { background: none !important; border: 0 !important; color: var(--p-suave-c) !important; font-weight: 500 !important; padding: 0 !important; box-shadow: none !important; }
.vm-cm__value-pill i { color: var(--p-acento) !important; font-size: .5rem !important; }
.vm-cm__flabel { background: #fff !important; background-image: none !important; color: var(--p-suave-c) !important; font-weight: 500 !important; }
.vm-cm__input, .vm-cm__textarea, .vm-cm__select { border: 1px solid var(--p-linea-c) !important; border-radius: 10px !important; box-shadow: none !important; background: #fff !important; }
.vm-cm__input:focus, .vm-cm__textarea:focus, .vm-cm__select:focus { border-color: var(--p-acento) !important; box-shadow: 0 0 0 3px rgba(94,44,237,.14) !important; }
/* El botón de enviar: sólido, el acento, y el logo de WhatsApp en blanco
   (la marca de un tercero vive en su glifo, no en el botón entero). */
.vm-cm__btn { background: var(--p-acento) !important; background-image: none !important; border: 0 !important; color: #fff !important; font-weight: 600 !important; border-radius: 10px !important; box-shadow: none !important; width: auto !important; min-width: 0 !important; padding: 0 22px !important; height: 44px !important; }
.vm-cm__btn:hover { filter: brightness(1.08); }
.vm-cm__note, .vm-cm__hint { color: var(--p-suave-c) !important; }
.vm-cm__note i, .vm-cm__hint i { color: var(--p-acento) !important; }

/* ═══ Pie ══════════════════════════════════════════════════════════════ */
.vm-footer { background: var(--p-fondo) !important; background-image: none !important; border-top: 1px solid var(--p-linea) !important; }
.vm-footer .vm-footer-logo span { font-weight: 600 !important; }
.vm-footer .vm-footer-social a { width: 40px !important; height: 40px !important; background: transparent !important; border: 1px solid var(--p-linea) !important; color: rgba(255,255,255,.8) !important; box-shadow: none !important; }
.vm-footer .vm-footer-social a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; transform: translateY(-1px); }
.vm-footer p, .vm-footer small { color: var(--p-suave) !important; }

/* ═══ Pesos: nada pasa de 700, y 700 sólo en los titulares de sección ══ */
.vm-portada strong, .vm-mision strong, .vm-mtl strong, .vm-cm strong, .vm-footer strong, b { font-weight: 600 !important; }

/* ═══ Movimiento: una sola curva ══════════════════════════════════════ */
.vm-portada .vm-hero-service, .vm-mision .vm-mision__card, .vm-cm__card, .vm-nav-links a { transition-timing-function: var(--p-curva) !important; }
@media (prefers-reduced-motion: reduce) {
  .vm-nav-links a, .vm-portada .vm-hero-service, .vm-portada .vm-hero-btn, .vm-footer .vm-footer-social a { transition: none !important; }
}

/* El VIMEDIA grande venía en 900 por su propio span; 700 y basta. */
.vm-portada .vm-vimedia { font-weight: 700 !important; }
/* El rayo de las antesalas y el cohete de «Ver servicios»: íconos de adorno fuera. */
.vm-portada .vm-hero-btn i, .vm-mision .vm-mision__kicker i, .vm-mtl__kicker i, .vm-sv__kicker i { display: none !important; }

/* ═══ Tokens que usan los módulos nuevos (Fase 22) ═════════════════════ */
:root { --p-acento-luz: #a78bfa; }   /* el acento aclarado para leerse sobre el fondo oscuro */

/* ═══ Divisiones — a la misma disciplina (Fase 22.1) ══════════════════
   La primera versión les puso texto navy y las fotos de fondo son oscuras:
   «letras negras sobre fondos oscuros», dijo el usuario. Sobre foto el texto va
   BLANCO sobre un velo parejo. Y las tarjetas bajan de 380px a 300 con el
   contenido apoyado abajo: lo que antes era espacio muerto ahora es foto. */
.vm-divisiones { background: #fff !important; background-image: none !important; padding: 72px 0 !important; }
.vm-divisiones::before, .vm-divisiones::after { display: none !important; }
.vm-divisiones__kicker, .vm-divisiones__chips { display: none !important; }
.vm-divisiones__title { font-weight: 700 !important; letter-spacing: -.03em !important; color: var(--p-fondo) !important; }
.vm-divisiones__title span { background: none !important; -webkit-text-fill-color: var(--p-acento) !important; color: var(--p-acento) !important; }
.vm-divisiones__intro { color: var(--p-suave-c) !important; }
.vm-divisiones__card { min-height: 300px !important; border-radius: 16px !important; border: 0 !important; box-shadow: 0 18px 44px -30px rgba(11,15,28,.5) !important; background: var(--p-fondo) !important; }
.vm-divisiones__card::before, .vm-divisiones__card::after { display: none !important; }
.vm-divisiones__img { transition: transform .7s var(--p-curva) !important; }
.vm-divisiones__card:hover .vm-divisiones__img { transform: scale(1.04) !important; }
.vm-divisiones__overlay { background: rgba(11,15,28,.55) !important; background-image: none !important; }
.vm-divisiones__content { justify-content: flex-end !important; }
.vm-divisiones__badge { display: none !important; }   /* repetía el nombre que ya dice el titular */
.vm-divisiones__title-card { color: #fff !important; font-weight: 600 !important; font-size: 1.5rem !important; letter-spacing: -.02em !important; }
.vm-divisiones__desc { color: rgba(255,255,255,.84) !important; max-width: 46ch; }
.vm-divisiones__tags span { background: rgba(255,255,255,.12) !important; background-image: none !important; color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important; font-weight: 500 !important; box-shadow: none !important; }
.vm-divisiones__btn { background: none !important; background-image: none !important; border: 0 !important; color: #fff !important; font-weight: 600 !important; box-shadow: none !important; padding-left: 0 !important; }
.vm-divisiones__btn:hover { color: var(--p-acento-luz) !important; }

/* ═══ Movimiento (Fase 22.1): la página se arma, no aparece ════════════
   Los estados de arranque sólo existen con `html.vm-motion`, que pone un guion
   en el <head>: sin JavaScript todo queda visible. Una curva, una duración. */
html.vm-motion .vm-entra { opacity: 0; transform: translateY(18px); transition: opacity .62s var(--p-curva) var(--d, 0ms), transform .62s var(--p-curva) var(--d, 0ms); }
html.vm-motion .vm-entra.is-in { opacity: 1; transform: none; }
/* 22.10: Chrome no mide lo que está en opacidad 0; con .01 no se ve y el hero sí cuenta para la velocidad */
html.vm-motion .vm-hero-content .vm-entra:not(.is-in) { opacity: .01; }
.vm-mascara { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
html.vm-motion .vm-sube { transform: translateY(112%); transition: transform .85s var(--p-curva) var(--d, 80ms); }
html.vm-motion .is-in .vm-sube, html.vm-motion .vm-mascara.is-in .vm-sube { transform: none; }
/* los números de la línea de prueba */
.vm-cuenta { font-variant-numeric: tabular-nums; }
/* la tira de clientes se desliza sola */
.vm-cl__lista.is-marquee { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.vm-cl__pista { display: flex; gap: 36px; width: max-content; animation: vmMarquee var(--dur, 30s) linear infinite; }
.vm-cl__grupo { display: flex; align-items: center; gap: 36px; }
.vm-cl__lista.is-marquee:hover .vm-cl__pista { animation-play-state: paused; }
@keyframes vmMarquee { to { transform: translateX(calc(-50% - 18px)); } }
/* los bloques nuevos respiran menos: 84 → 64 */
.vm-casos, .vm-eco, .vm-tes { padding-top: 64px !important; padding-bottom: 64px !important; }
.vm-nos { padding-top: 64px !important; }
@media (prefers-reduced-motion: reduce) {
  html.vm-motion .vm-entra, html.vm-motion .vm-sube { opacity: 1; transform: none; transition: none; }
  .vm-cl__pista { animation: none; }
}

/* La línea de prueba del hero */
.vm-portada .vm-hero-prueba { margin: 14px 0 0 !important; font-size: .82rem !important; color: rgba(255,255,255,.72) !important; letter-spacing: .04em !important; font-weight: 500 !important; }