/* Webzi Sitio — widget «Hero vitrina»: notebook + celular que muestran sitios
   reales y después cada herramienta. Todas las medidas van en cqw (ancho del
   propio widget) para que el conjunto escale entero en cualquier columna. */
.wz-vt{
  --wz-vt-chip:#fff; --wz-vt-chip-texto:#0B2550; --wz-vt-chip-sub:#475569; --wz-vt-chip-icono:#7CB518; --wz-vt-acento:#B6DE13; --wz-vt-acento-tinta:#0B2550; --wz-vt-punto:#094CBA;
  --wz-vt-borde1:#6b6f76; --wz-vt-borde2:#c9ccd1; --wz-vt-base:linear-gradient(#f3f4f6 0%,#d4d6db 35%,#a7abb3 75%,#7c818a 100%);
  --wz-vt-muesca:linear-gradient(#b8bcc3,#d9dce0); --wz-vt-titanio1:#8d929a; --wz-vt-titanio2:#d6d9dd;
  --wz-vt-dur:2.9s;
  position:relative;width:100%;aspect-ratio:1320/1000;container-type:inline-size;line-height:1.2
}
.wz-vt--grafito{--wz-vt-borde1:#3f444c;--wz-vt-borde2:#6b7079;--wz-vt-base:linear-gradient(#8b9099 0%,#5d626b 40%,#3c4048 80%,#2a2d33 100%);
  --wz-vt-muesca:linear-gradient(#4a4f57,#6b7079);--wz-vt-titanio1:#4b5058;--wz-vt-titanio2:#7d828b}
.wz-vt--negro{--wz-vt-borde1:#1f2329;--wz-vt-borde2:#3a3f47;--wz-vt-base:linear-gradient(#4a4e56 0%,#2b2e34 45%,#18191d 100%);
  --wz-vt-muesca:linear-gradient(#25282d,#3a3f47);--wz-vt-titanio1:#202329;--wz-vt-titanio2:#41464e}
.wz-vt *{box-sizing:border-box}
/* El widget ocupa el ancho de su columna. Sin esto, en una columna flex de Elementor (en celular) el ancho queda
   «según el contenido», el alto que sale del aspect-ratio no cuenta y la sección siguiente tapa el notebook. Con dos
   clases para que el ancho propio que se elija en Elementor (que lleva el id del elemento) siga mandando. */
.elementor-widget.elementor-widget-webzi-vitrina{width:100%}

/* Etiqueta: tarjeta con ícono, título y subtítulo, una por escena (solo se ve la activa). Todo se edita en el
   widget (Estilo → Etiqueta); aquí van los valores de fábrica en cqw, para que escale con el widget. La posición la
   dan las clases wz-vt--et-*; el ajuste fino X/Y y la animación usan «translate» y «scale» (propiedades aparte de
   transform), así no se pisan con el centrado de la posición «arriba al centro». */
.wz-vt-chip{position:absolute;z-index:5;right:.5%;top:3.1cqw;max-width:64cqw;background:var(--wz-vt-chip);color:var(--wz-vt-chip-texto);
  border-radius:max(10px,1.5cqw);padding:1.5cqw 2.8cqw 1.5cqw 2.2cqw;box-shadow:0 1.4cqw 3.4cqw rgba(15,27,51,.20),0 .2cqw .6cqw rgba(15,27,51,.08);
  translate:var(--wz-vt-et-x,0px) var(--wz-vt-et-y,0px);transition:opacity .3s}
.wz-vt--et-esq-izq .wz-vt-chip{right:auto;left:10%}
.wz-vt--et-centro .wz-vt-chip{right:auto;left:54%;top:-1.5cqw;transform:translateX(-50%)}
.wz-vt--sin-cel.wz-vt--et-centro .wz-vt-chip{left:50%}
.wz-vt--et-abajo .wz-vt-chip{top:auto;bottom:24%}
.wz-vt-chip-it{display:none;align-items:center;gap:1.4cqw}
.wz-vt-chip-it.wz-vt-act{display:flex}
.wz-vt-chip-ico{flex:none;display:flex;align-items:center;justify-content:center;color:var(--wz-vt-chip-icono);font-size:max(18px,3.8cqw);line-height:1}
.wz-vt-chip-ico svg{width:1em;height:1em}
.wz-vt-chip-ico svg.wz-vt-trazo{stroke-width:2.1}
.wz-vt-chip-ico .e-font-icon-svg{fill:currentColor}
.wz-vt-chip-txt{display:flex;flex-direction:column;min-width:0}
.wz-vt-chip-tit{font-size:max(14px,3.05cqw);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.wz-vt-chip-sub{font-size:max(11px,2.05cqw);font-weight:500;line-height:1.35;color:var(--wz-vt-chip-sub);margin-top:.35cqw}
.wz-vt-ok{display:none;position:absolute;right:max(-12px,-1.9cqw);top:max(-12px,-1.9cqw);width:max(22px,4cqw);height:max(22px,4cqw);border-radius:50%;
  background:var(--wz-vt-acento);color:var(--wz-vt-acento-tinta);align-items:center;justify-content:center;opacity:0;scale:.4}
.wz-vt--con-ok .wz-vt-ok{display:flex}
.wz-vt-ok svg{width:62%;height:62%}
.wz-vt-pop{animation:wz-vt-entra .45s ease both}
.wz-vt-pop .wz-vt-ok{animation:wz-vt-check .35s ease 1.1s forwards}
@keyframes wz-vt-entra{from{opacity:0;scale:.93}}
@keyframes wz-vt-check{to{opacity:1;scale:1}}
.wz-vt-chip.wz-vt-cambia{opacity:0;animation:none}
@media (max-width:767px){ .wz-vt--et-sin-movil .wz-vt-chip{display:none} .wz-vt--sub-sin-movil .wz-vt-chip-sub{display:none} }

/* Pantallas y escenas */
.wz-vt-pant{position:relative;overflow:hidden;background:#fff}
.wz-vt-pant:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%)}
.wz-vt-esc{position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .3s ease,transform .3s ease}
.wz-vt-esc.wz-vt-on{opacity:1;transform:none;transition:opacity .5s ease .25s,transform .9s ease .25s}
.wz-vt-esc img{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;object-position:center top;border-radius:0!important}
.wz-vt-esc.wz-vt-on img.wz-vt-recorre{animation:wz-vt-baja var(--wz-vt-dur) ease-in-out .4s forwards}
@keyframes wz-vt-baja{to{object-position:center 38%}}

/* Notebook: tapa oscura con canto metálico y cámara; base con la muesca para abrirlo */
.wz-vt-pc{position:absolute;left:12%;top:9%;width:84%}
.wz-vt-pc--solo{left:8%;width:84%}
.wz-vt-tapa{position:relative;background:#0b0b0d;border-radius:2.1cqw 2.1cqw .6cqw .6cqw;padding:1.15cqw 1.15cqw 1.5cqw;
  box-shadow:0 0 0 .22cqw var(--wz-vt-borde1),0 0 0 .32cqw var(--wz-vt-borde2),0 2cqw 4cqw rgba(15,27,51,.22)}
.wz-vt-tapa:before{content:"";position:absolute;left:50%;top:.42cqw;width:.42cqw;height:.42cqw;margin-left:-.21cqw;border-radius:50%;background:#1f2937}
.wz-vt-pc .wz-vt-pant{aspect-ratio:16/10;border-radius:.2cqw}
.wz-vt-base{position:relative;margin:0 -7.5%;height:1.55cqw;border-radius:0 0 3cqw 3cqw / 0 0 1.4cqw 1.4cqw;background:var(--wz-vt-base);box-shadow:0 .25cqw .2cqw rgba(15,27,51,.25)}
.wz-vt-base:before{content:"";position:absolute;left:50%;top:0;width:15%;height:45%;transform:translateX(-50%);background:var(--wz-vt-muesca);border-radius:0 0 1.2cqw 1.2cqw}
.wz-vt-base:after{content:"";position:absolute;left:3%;right:3%;bottom:-2.6cqw;height:2.4cqw;z-index:-1;background:radial-gradient(closest-side,rgba(15,27,51,.28),rgba(15,27,51,0))}

/* Celular: marco de titanio, botones laterales, isla y barra de estado */
.wz-vt-cel{position:absolute;left:2%;top:38%;width:21%;aspect-ratio:1/2.06;z-index:3;border-radius:3.8cqw;padding:.85cqw;background:#0b0b0d;
  box-shadow:0 0 0 .28cqw var(--wz-vt-titanio1),0 0 0 .42cqw var(--wz-vt-titanio2),0 2.4cqw 4cqw rgba(15,27,51,.32)}
.wz-vt-cel:after{content:"";position:absolute;left:50%;top:1.55cqw;width:30%;height:1.75cqw;transform:translateX(-50%);background:#000;border-radius:1cqw;z-index:6}
.wz-vt-bt{position:absolute;width:.42cqw;border-radius:.3cqw;background:linear-gradient(90deg,var(--wz-vt-titanio1),var(--wz-vt-titanio2))}
.wz-vt-bt1{left:-.7cqw;top:18%;height:5%}.wz-vt-bt2{left:-.7cqw;top:26%;height:9%}.wz-vt-bt3{left:-.7cqw;top:37%;height:9%}.wz-vt-bt4{right:-.7cqw;top:27%;height:13%}
.wz-vt-cel .wz-vt-pant{height:100%;border-radius:3cqw}
.wz-vt-barra{position:absolute;left:0;right:0;top:0;height:3.4cqw;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:0 2.2cqw;
  font-size:1.15cqw;font-weight:700;color:#111;background:#fff}
.wz-vt-barra svg{height:40%}
.wz-vt-pant-in{position:absolute;left:0;right:0;top:3.4cqw;bottom:0}

/* Puntos: uno para los sitios y uno por función */
.wz-vt-puntos{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:6px}
.wz-vt-puntos i{width:6px;height:6px;border-radius:9px;background:rgba(15,27,51,.2);transition:all .4s}
.wz-vt-puntos i.wz-vt-on{width:22px;background:var(--wz-vt-punto)}

/* Sin animaciones si el visitante las pidió desactivar: queda la primera pantalla, quieta. */
@media (prefers-reduced-motion:reduce){
  .wz-vt-esc,.wz-vt-chip{transition:none!important}
  .wz-vt-esc img,.wz-vt-pop{animation:none!important}
  .wz-vt-ok{opacity:1;scale:1}
}