/* Vistio Business v1.1.23
   Sólo #experiencia: fondo de reflejo dorado y composición de escritorio compacta.
   El brillo se dibuja DETRÁS de la información para evitar solapamientos. */
#experiencia.vb122-experience-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 28px 24px;
  background:
    radial-gradient(ellipse 64% 75% at 85% 36%,rgba(196,151,78,.075),transparent 78%),
    linear-gradient(120deg,#101011 0%,#0b0d10 53%,#12110f 100%);
}
#experiencia.vb122-experience-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(107deg,
    transparent 20%,
    rgba(230,194,123,.025) 37%,
    rgba(241,209,152,.12) 47%,
    rgba(226,186,111,.045) 53%,
    transparent 68%);
  transform: translate3d(112%,0,0);
  animation: vb123-reflection-rtl 12s ease-in-out infinite;
  will-change: transform;
}
#experiencia.vb122-experience-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background: radial-gradient(circle at 14% 15%,rgba(209,171,99,.11),transparent 43%);
}
@keyframes vb123-reflection-rtl {
  0%,7% {transform:translate3d(112%,0,0)}
  87%,100% {transform:translate3d(-112%,0,0)}
}
#experiencia.vb122-experience-section > .vb122-experience-grid {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(295px,1fr) minmax(505px,690px);
  column-gap: clamp(26px,3.2vw,44px);
  align-items: center;
}
/* Columna explicativa, sin cambiar contenido ni CTA. */
#experiencia .vb122-experience-copy h2 {
  font-size: clamp(43px,4.1vw,65px);
  margin: 11px 0 16px;
  line-height: 1.01;
}
#experiencia .vb122-experience-copy h2 em {margin-top: 7px}
#experiencia .vb122-experience-copy p {font-size: 16px;line-height:1.62}
#experiencia .vb122-experience-promise {gap:8px;margin:16px 0 17px}
#experiencia .vb122-experience-promise span {padding:8px 11px;font-size:11px}
#experiencia .vb122-experience-copy .experience-steps {margin-top:10px}
#experiencia .vb122-experience-copy .experience-steps > div {padding:12px 0;grid-template-columns:43px minmax(0,1fr)}
#experiencia .vb122-experience-copy .experience-steps strong {font-size:24px}
#experiencia .vb122-experience-copy .experience-steps span {font-size:19px}
#experiencia .vb122-experience-copy .button {margin-top:18px}
/* Reducir el panel sin aplicar transform:scale, que deja espacio falso.
   No se fijan alturas ni se recortan los módulos. */
#experiencia .vb122-experience-window {width:100%;max-width:690px;min-width:0;overflow:visible;transform:none !important}
#experiencia .vb122-desktop-frame {width:100%;max-width:690px;border-radius:24px;overflow:hidden}
#experiencia .vb122-desktop-topbar {padding:11px 18px}
#experiencia .vb122-desktop-topbar span:first-child {font-size:10px}
#experiencia .vb122-desktop-shell {grid-template-columns:62px minmax(0,1fr);min-height:0}
#experiencia .vb122-desktop-sidebar {gap:14px;padding:19px 10px}
#experiencia .vb122-side-chip {width:18px;height:18px;border-radius:6px}
#experiencia .vb122-desktop-main {padding:18px 20px 16px;gap:11px;min-width:0}
#experiencia .vb122-desktop-head {gap:10px}
#experiencia .vb122-desktop-head small {font-size:10px;margin-bottom:5px}
#experiencia .vb122-desktop-head h3 {font-size:34px;line-height:1}
#experiencia .vb122-desktop-head p {font-size:12px;line-height:1.42;margin:6px 0 0}
#experiencia .vb122-head-badge {padding:9px 11px;border-radius:12px;font-size:10px;white-space:nowrap}
#experiencia .vb122-hero-card {grid-template-columns:minmax(0,1.16fr) minmax(145px,.84fr);gap:10px;padding:10px;border-radius:18px;min-width:0}
#experiencia .vb122-hero-panel {padding:13px;border-radius:14px}
#experiencia .vb122-hero-panel span {font-size:10px;margin-bottom:6px}
#experiencia .vb122-hero-panel h4 {font-size:21px;line-height:1.04;margin-bottom:6px}
#experiencia .vb122-hero-panel p {font-size:11px;line-height:1.44}
#experiencia .vb122-quick-actions {gap:6px;margin-top:10px}
#experiencia .vb122-quick-actions span {padding:6px 8px;font-size:10px}
#experiencia .vb122-side-preview {gap:8px}
#experiencia .vb122-side-preview-card {padding:11px;border-radius:13px}
#experiencia .vb122-side-preview-card strong {font-size:21px;margin-bottom:5px}
#experiencia .vb122-side-preview-card span {font-size:9px;margin-bottom:4px}
#experiencia .vb122-side-preview-card small {font-size:10px;line-height:1.37}
#experiencia .vb122-kpis {grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
#experiencia .vb122-kpi {padding:12px 10px;border-radius:14px;min-width:0}
#experiencia .vb122-kpi b {font-size:26px;margin-bottom:5px}
#experiencia .vb122-kpi small {font-size:9px;letter-spacing:.085em}
#experiencia .vb122-kpi span {font-size:10px;line-height:1.35;margin-top:5px}
#experiencia .vb122-work-grid {gap:9px}
#experiencia .vb122-work-card {padding:11px 12px;border-radius:14px;gap:8px;min-width:0}
#experiencia .vb122-work-card > div {min-width:0}
#experiencia .vb122-work-card span {font-size:9px;margin-bottom:5px;letter-spacing:.09em}
#experiencia .vb122-work-card b {font-size:15px;line-height:1.15}
#experiencia .vb122-work-card small {font-size:10px;line-height:1.3;margin-top:3px}
#experiencia .vb122-work-pill {padding:6px 8px;font-size:9px;flex:0 0 auto}
#experiencia .vb122-preview-note {padding:10px 16px 14px;font-size:9px;line-height:1.35;letter-spacing:.065em}
@media(max-width:1199px) and (min-width:981px) {
  #experiencia.vb122-experience-section > .vb122-experience-grid {grid-template-columns:minmax(260px,1fr) minmax(485px,600px);gap:24px}
  #experiencia .vb122-experience-copy h2 {font-size:clamp(41px,4vw,55px)}
  #experiencia .vb122-desktop-head h3 {font-size:30px}
  #experiencia .vb122-kpis {grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:980px) {
  #experiencia.vb122-experience-section > .vb122-experience-grid {grid-template-columns:minmax(0,1fr);gap:24px}
  #experiencia .vb122-experience-copy h2 {font-size:clamp(40px,6.6vw,60px)}
  #experiencia .vb122-experience-window,#experiencia .vb122-desktop-frame {max-width:690px;margin-inline:auto}
}
@media(max-width:760px) {
  #experiencia .vb122-desktop-shell {grid-template-columns:1fr}
  #experiencia .vb122-desktop-sidebar {flex-direction:row;justify-content:center;padding:10px;gap:12px}
  #experiencia .vb122-desktop-main {padding:16px;gap:10px}
  #experiencia .vb122-desktop-head {flex-direction:row}
  #experiencia .vb122-desktop-head h3 {font-size:30px}
  #experiencia .vb122-hero-card {grid-template-columns:minmax(0,1.2fr) minmax(145px,.8fr)}
  #experiencia .vb122-work-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {
  #experiencia.vb122-experience-section {padding-block:22px 18px}
  #experiencia .vb122-desktop-head {flex-direction:column}
  #experiencia .vb122-desktop-head h3 {font-size:29px}
  #experiencia .vb122-hero-card {grid-template-columns:1fr}
  #experiencia .vb122-side-preview {grid-template-columns:repeat(2,minmax(0,1fr))}
  #experiencia .vb122-side-preview-card {min-width:0}
  #experiencia .vb122-work-grid {grid-template-columns:1fr}
  #experiencia .vb122-work-card {gap:8px}
  #experiencia .vb122-kpis {grid-template-columns:repeat(2,minmax(0,1fr))}
  #experiencia .vb122-experience-copy h2 {font-size:clamp(35px,8vw,47px)}
  #experiencia .vb122-experience-copy .experience-steps span {font-size:17px}
}
@media(max-width:360px) {
  #experiencia .vb122-side-preview {grid-template-columns:1fr}
  #experiencia .vb122-desktop-main {padding:13px}
  #experiencia .vb122-head-badge {font-size:9px}
}
@media(prefers-reduced-motion:reduce) {
  #experiencia.vb122-experience-section::before {animation:none;transform:none;opacity:.24;will-change:auto}
}