/* Webzi Sitio — widget «Pasos con imagen» (Cómo funciona / Herramientas).
   Calcado de la maqueta marketing/home-webzi. Los botones se «desarman» con
   all:unset y !important: el estilo global de botones de Elementor (relleno
   lima) los pintaba encima. */
.wz-pasos{
  --wz-tinta: var(--e-global-color-e7a0002, #0F1B33);
  --wz-titulos: var(--e-global-color-primary, #0B2550);
  --wz-azul: var(--e-global-color-e7a0001, #2563C9);
  --wz-marca: var(--e-global-color-secondary, #143F85);
  --wz-texto: var(--e-global-color-text, #55627A);
  --wz-linea: var(--e-global-color-e7a0005, #E3EAF4);
  --wz-cielo: var(--e-global-color-e7a0003, #F2F7FF);
  --wz-cielo2: var(--e-global-color-e7a0004, #E6F0FE);
  --wz-sombra: 0 1px 2px rgba(15,27,51,.05), 0 18px 40px -18px rgba(15,27,51,.22);
  display:grid;gap:var(--wz-col-gap,48px);align-items:center;text-align:start;
  grid-template-columns:var(--wz-col-lista,minmax(0,.9fr)) minmax(0,1.1fr)
}
.wz-pasos *{box-sizing:border-box}
.wz-pasos--iconos{grid-template-columns:var(--wz-col-lista,minmax(0,.8fr)) minmax(0,1.2fr);gap:var(--wz-col-gap,44px);align-items:start}

/* ── Lista numerada con barra de avance ── */
.wz-pasos--numerado .wz-paso{border-bottom:1px solid var(--wz-linea)}
.wz-pasos--numerado .wz-paso button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:baseline;width:100%;padding:20px 0;font-family:var(--e-global-typography-primary-font-family,"Plus Jakarta Sans"),sans-serif;font-weight:700;font-size:18px;line-height:1.3;color:var(--wz-tit-color,var(--wz-tinta))!important;background:none!important}
.wz-pasos--numerado .wz-paso button b{color:var(--wz-num-color,var(--wz-azul));font-variant-numeric:tabular-nums}
.wz-pasos--numerado .wz-paso.wz-activo button{color:var(--wz-tit-color-activo,var(--wz-azul))!important}
.wz-pasos--numerado .wz-paso button:focus-visible{outline:3px solid var(--wz-azul);outline-offset:2px;border-radius:6px}
.wz-pasos--numerado .wz-paso-texto{display:none;color:var(--wz-desc-color,var(--wz-texto));padding:0 0 22px 34px;font-size:16px;line-height:1.6}
.wz-pasos--numerado .wz-activo .wz-paso-texto{display:block}
.wz-paso-barra{height:2px;background:var(--wz-linea);margin-bottom:-1px;overflow:hidden}
.wz-pasos--numerado .wz-activo .wz-paso-barra i{display:block;height:100%;background:var(--wz-barra,var(--wz-azul));animation:wz-llenar var(--wz-avance,6s) linear forwards}
.wz-pasos[data-avance="0"] .wz-activo .wz-paso-barra i{animation:none;width:100%}
@keyframes wz-llenar{from{width:0}to{width:100%}}

/* ── Lista con íconos (la activa en tarjeta blanca) ── */
.wz-pasos--iconos .wz-pasos-lista{display:flex;flex-direction:column;gap:var(--wz-tab-gap,8px)}
.wz-pasos--iconos .wz-paso{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:var(--wz-tab-alinear,flex-start);gap:var(--wz-tab-ico-gap,14px);padding:16px 18px;border-radius:16px;border:var(--wz-tab-borde-ancho,1px) solid var(--wz-tab-borde,transparent);background:var(--wz-tab-fondo,transparent)!important;color:inherit!important;transition:background .2s,border-color .2s;text-align:start}
.wz-pasos--iconos .wz-paso:hover{background:var(--wz-tab-fondo-hover,var(--wz-cielo))!important;border-color:var(--wz-tab-borde-hover,var(--wz-tab-borde,transparent))}
.wz-pasos--iconos .wz-paso.wz-activo{background:var(--wz-tab-fondo-activo,#fff)!important;border-color:var(--wz-tab-borde-activo,var(--wz-linea));box-shadow:var(--wz-tab-sombra,var(--wz-sombra))}
.wz-pasos--iconos .wz-paso:focus-visible{outline:3px solid var(--wz-azul);outline-offset:2px}
.wz-paso-ico{width:var(--wz-ico-caja,42px);height:var(--wz-ico-caja,42px);border-radius:var(--wz-ico-radio,12px);background:var(--wz-ico-fondo,var(--wz-cielo2));display:grid;place-items:center;color:var(--wz-ico-color,var(--wz-marca));flex:none;transition:background .2s,color .2s}
.wz-activo .wz-paso-ico{background:var(--wz-ico-fondo-activo,var(--wz-ico-fondo,var(--wz-cielo2)));color:var(--wz-ico-color-activo,var(--wz-ico-color,var(--wz-marca)))}
.wz-paso-ico svg{width:var(--wz-ico-tam,20px);height:var(--wz-ico-tam,20px);fill:currentColor}
.wz-paso-ico i{font-size:var(--wz-ico-tam,19px)}
.wz-paso-cuerpo b{display:block;font-family:var(--e-global-typography-primary-font-family,"Plus Jakarta Sans"),sans-serif;font-weight:700;font-size:17px;line-height:1.3;color:var(--wz-tit-color,var(--wz-tinta));transition:color .2s}
.wz-activo .wz-paso-cuerpo b{color:var(--wz-tit-color-activo,var(--wz-tit-color,var(--wz-tinta)))}
.wz-paso:hover .wz-paso-cuerpo b{color:var(--wz-tit-color-hover,var(--wz-tit-color,var(--wz-tinta)))}
.wz-paso.wz-activo:hover .wz-paso-cuerpo b{color:var(--wz-tit-color-activo,var(--wz-tit-color,var(--wz-tinta)))}
.wz-pasos--iconos .wz-paso-texto{display:none;color:var(--wz-desc-color,var(--wz-texto));font-size:14.5px;line-height:1.5;margin-top:var(--wz-desc-sep,3px);white-space:normal}
.wz-pasos--iconos .wz-activo .wz-paso-texto{display:block}

/* ── La imagen en su ventana, sobre el panel con degradado ── */
.wz-pasos-lamina{background:linear-gradient(135deg,#DDEBFF 0%,#E9F5FF 50%,#EEF6E2 100%);border-radius:32px;padding:28px}
/* Mostrar siempre las descripciones (opción del widget), no solo la del paso activo. */
.wz-pasos--desc-siempre .wz-paso-texto{display:block!important}
.wz-pasos--iconos .wz-pasos-lamina{position:sticky;top:96px}
.wz-ventanita{background:#fff;border-radius:14px;overflow:hidden;box-shadow:var(--wz-sombra)}
.wz-cromo{display:flex;gap:6px;padding:9px 12px;background:#F4F7FB;border-bottom:1px solid var(--wz-linea)}
.wz-cromo i{width:9px;height:9px;border-radius:50%;background:#D5DCE7}
.wz-pasos-img{display:block;width:100%;height:auto!important;max-width:100%!important;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:0!important}
.wz-pasos-img[hidden]{display:none}
.wz-ventanita[hidden]{display:none}
/* Sin marco: la imagen trae su propio fondo y ventana (Herramientas incluidas). */
.wz-pasos--sin-marco .wz-pasos-lamina{background:none;padding:0}
.wz-pasos--sin-marco .wz-ventanita{background:none;box-shadow:none;border-radius:24px}
.wz-pasos--sin-marco .wz-cromo{display:none}
/* Con una escena animada (escenas.css) el panel le cede todo el espacio. */
.wz-pasos-lamina:has(.wz-esc:not([hidden])){padding:0}
.wz-pasos-nota{margin:16px 0 0;font-size:13px;color:var(--wz-texto);text-align:center}

@media (max-width:960px){
  .wz-pasos,.wz-pasos--iconos{grid-template-columns:minmax(0,1fr);gap:28px}
  .wz-pasos--iconos .wz-pasos-lamina{position:static}
  .wz-pasos-lamina{padding:16px;border-radius:24px}
}
@media (prefers-reduced-motion:reduce){.wz-pasos *{animation:none!important;transition:none!important}}
/* Etiqueta bajo el título (1.6.4), p. ej. «Desde el plan Profesional» */
.wz-paso-etiqueta{display:table;margin-top:5px;padding:3px 9px;border-radius:999px;background:var(--wz-etiqueta-fondo,#ECF7C5);color:var(--wz-etiqueta-color,#3F6212);font:700 11.5px/1.3 var(--e-global-typography-primary-font-family,"Plus Jakarta Sans"),sans-serif}
.wz-pasos--numerado .wz-paso-etiqueta{margin:0 0 10px 34px}