/* Leveragency · Web v2 · componente: demo de voz en vivo. Todo scopeado bajo .vz.
   Reusa base.css (.card .btn .input .tag .disclaimer .btn-row). No redefine nada de eso. */

.vz{min-width:0}
.vz .card{display:grid;gap:14px}

/* etiqueta de bloque (capa instrumento) */
.vz-k{
  font-family:var(--fm);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gris);margin:0}
.vz-t{margin:0;font-size:16.5px;line-height:1.45;color:var(--tinta-cuerpo);max-width:42ch}

/* ---------- 1 · formulario ---------- */
.vz-form{margin:0}
.vz-campo{display:grid;gap:6px}
.vz-lbl{font-size:14px;font-weight:600;color:var(--tinta)}
.vz .input.is-bad{border-color:var(--rojo)}
.vz-err{margin:0;font-size:13.5px;line-height:1.35;color:var(--rojo)}
.vz-err[hidden]{display:none}
.vz-aviso{
  margin:0;padding:10px 12px;border:1px solid var(--rojo);border-radius:var(--r-1);
  background:var(--rojo-wash);color:var(--rojo);font-size:14.5px;line-height:1.4}
.vz-go{width:100%;margin-top:2px}
.vz-nota{margin:0}
.vz-alt{justify-self:start}

/* ---------- 2 · conectando y 3 · en vivo ----------
   El panel tinta con el orb vive en voz-orb.css (2026-09-13). Acá quedan solo las dos piezas
   que el panel reusa: el punto rojo de EN VIVO y el reloj. El spinner, el medidor de 14 barras
   y la tarjeta clara de antes se fueron con el orb: el orb ES el indicador de estado. */
.vz-punto{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  animation:vz-late 1.3s var(--ease) infinite}
@keyframes vz-late{0%,100%{opacity:1}50%{opacity:.25}}
.vz-reloj{
  font-family:var(--fm);font-size:20px;font-variant-numeric:tabular-nums;color:var(--tinta);line-height:1}
.vz-reloj.is-poco{color:var(--rojo)}

/* ---------- 4 · cierre ---------- */
.vz-fin-t{margin:0;font-family:var(--fd);font-size:clamp(19px,2vw,23px);font-weight:600;
  letter-spacing:-.02em;line-height:1.25;color:var(--tinta);max-width:26ch}
.vz-fin-s{margin:0;font-size:16px;line-height:1.5;color:var(--tinta-cuerpo);max-width:44ch}
.vz-fin-cta{margin-top:2px}
.vz-fin-cta .btn{flex:1 1 auto}
.vz-fin-mail{margin:0;font-size:15px;color:var(--gris)}
.vz-fin-mail a{color:var(--ambar-texto)}

@media (min-width:520px){
  .vz-fin-cta .btn{flex:0 0 auto}
}

@media (prefers-reduced-motion:reduce){
  .vz-punto{animation:none}
}