/* Brand — WaveField, Spotlight, Parallax, TextReveal, PhotoSlot, PillLabel, SectionHeading,
 * StatCard, StepCard, Testimonial, TeamCard, CTABanner, Reveal. */

/* ── WaveField ────────────────────────────────────────────────────────── */
.vz-wave{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.vz-wave__canvas{position:absolute;left:0;right:0;top:0;width:100%;height:100%;display:block}
.vz-wave--parallax .vz-wave__canvas{top:-14%;height:128%;will-change:transform}
.vz-wave__fade{position:absolute;inset:0;background:var(--vz-wave-fade)}

/* ── Spotlight ────────────────────────────────────────────────────────── */
.vz-spotlight{position:relative;--vz-spot-x:50%;--vz-spot-y:34%}
.vz-spotlight__glow{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(var(--vz-spotlight-diameter,var(--vz-spotlight-size)) var(--vz-spotlight-diameter,var(--vz-spotlight-size)) at var(--vz-spot-x) var(--vz-spot-y),var(--vz-spotlight-color,var(--vz-spotlight)),transparent 70%);
}

/* ── Parallax ─────────────────────────────────────────────────────────── */

/* ── TextReveal ───────────────────────────────────────────────────────── */
.vz-text-reveal{display:block}
.vz-text-reveal__mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;white-space:pre}
.vz-text-reveal__word{
  display:inline-block;
  transition:transform var(--vz-text-reveal-duration) var(--ease-soft) var(--vz-word-delay,0ms),
    opacity var(--vz-text-reveal-fade) var(--ease-soft) var(--vz-word-delay,0ms);
}
.vz-text-reveal__word.is-accent{color:var(--vz-accent,var(--text-accent))}
.vz-js .vz-text-reveal:not(.is-on) .vz-text-reveal__word{transform:translateY(105%);opacity:0}

/* ── Reveal ───────────────────────────────────────────────────────────── */
.vz-reveal{transition:opacity var(--dur-reveal) var(--ease-soft) var(--vz-reveal-delay,0ms),transform var(--dur-reveal) var(--ease-soft) var(--vz-reveal-delay,0ms)}
.vz-js .vz-reveal:not(.is-on){opacity:0;transform:translateY(var(--reveal-rise))}

/* ── PhotoSlot ────────────────────────────────────────────────────────── */
.vz-photo{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--space-2);
  padding:var(--space-5);overflow:hidden;box-sizing:border-box;width:100%;
}
img.vz-photo{display:block;padding:0;object-fit:cover}
.vz-photo--ratio-4x3{aspect-ratio:4 / 3}
.vz-photo--ratio-3x4{aspect-ratio:3 / 4}
.vz-photo--ratio-16x9{aspect-ratio:16 / 9}
.vz-photo--ratio-16x10{aspect-ratio:16 / 10}
.vz-photo--ratio-1x1{aspect-ratio:1 / 1}
.vz-photo--r-none{border-radius:0}
.vz-photo--r-md{border-radius:var(--radius-md)}
.vz-photo--r-lg{border-radius:var(--radius-lg)}
.vz-photo--r-xl{border-radius:var(--radius-xl)}
.vz-photo--dark:not(.is-filled){background:var(--vz-photo-stripes);border:var(--border-hair) dashed var(--vz-tint-mint-26)}
.vz-photo--light:not(.is-filled){background:var(--vz-photo-stripes-light);border:var(--border-hair) dashed var(--vz-tint-petrol-28)}
.vz-photo__icon,.vz-photo__label{color:var(--vz-mint)}
.vz-photo--light .vz-photo__icon,.vz-photo--light .vz-photo__label{color:var(--vz-petrol)}
.vz-photo__label{font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.vz-photo__brief{max-width:var(--vz-measure-brief);font-size:var(--text-caption);line-height:var(--leading-body);color:var(--text-muted);text-wrap:pretty}
.vz-photo--light .vz-photo__brief{color:var(--vz-graphite-60)}

/* ── PillLabel ────────────────────────────────────────────────────────── */
.vz-pill{
  display:inline-flex;align-items:center;gap:var(--space-3);
  padding:var(--vz-pad-pill);border-radius:var(--radius-pill);
  background:var(--surface-glass-strong);border:var(--border-hair) solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-pill--action{padding:var(--vz-pad-pill-action)}
.vz-pill--action.vz-pill--reverse{padding:var(--vz-pad-pill-action-rev);flex-direction:row-reverse}
.vz-pill--float{animation:vz-float var(--vz-float-duration) var(--ease-in-out) var(--vz-float-delay,0ms) infinite}
.vz-pill--float.is-offscreen{animation-play-state:paused}
.vz-pill__label{font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-primary);white-space:nowrap}

/* ── SectionHeading ───────────────────────────────────────────────────── */
.vz-heading{display:flex;flex-direction:column;gap:var(--space-4);align-items:flex-start;text-align:left}
.vz-heading--center{align-items:center;text-align:center}
.vz-heading__eyebrow--accent{color:var(--text-accent)}
.vz-heading__eyebrow--coral{color:var(--vz-coral)}
.vz-heading__eyebrow--muted{color:var(--text-muted)}
.vz-heading__title{
  max-width:var(--vz-measure-heading);margin:0;font-family:var(--font-display);font-weight:var(--weight-bold);
  line-height:var(--leading-display);letter-spacing:var(--tracking-display);color:var(--text-primary);text-wrap:pretty;
}
.vz-heading--xl .vz-heading__title{font-size:var(--text-display-1)}
.vz-heading--lg .vz-heading__title{font-size:var(--text-display-3)}
.vz-heading--md .vz-heading__title{font-size:var(--text-h1)}
.vz-heading--sm .vz-heading__title{font-size:var(--text-h2)}
.vz-heading__accent{color:var(--vz-accent,var(--text-accent))}
.vz-heading__lead{max-width:var(--measure);font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-secondary);text-wrap:pretty}

/* ── StatCard ─────────────────────────────────────────────────────────── */
.vz-stat{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8) var(--space-8) var(--space-10)}
.vz-stat--center{align-items:center;text-align:center}
.vz-stat--left{align-items:flex-start;text-align:left}
.vz-stat--light{border-radius:0;background:var(--vz-offwhite)}
.vz-stat--glass{
  border-radius:var(--radius-lg);background:var(--surface-glass);border:var(--border-hair) solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-stat__value{font-family:var(--font-display);font-weight:var(--weight-regular);line-height:1;letter-spacing:var(--tracking-display);color:var(--text-primary)}
.vz-stat--light .vz-stat__value{color:var(--vz-petrol-deep)}
.vz-stat--xl .vz-stat__value{font-size:var(--text-display-1)}
.vz-stat--lg .vz-stat__value{font-size:var(--text-display-2)}
.vz-stat--md .vz-stat__value{font-size:var(--text-display-3)}
.vz-stat__label{max-width:var(--vz-measure-brief);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-brand);text-wrap:pretty}
.vz-stat--light .vz-stat__label{color:var(--vz-petrol)}

/* ── StepCard ─────────────────────────────────────────────────────────── */
.vz-step{
  position:relative;display:flex;flex-direction:column;gap:var(--space-3);
  padding:var(--space-6) var(--space-6) var(--space-8);border-radius:var(--radius-lg);
  background:var(--surface-glass);border:var(--border-hair) solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.vz-step:is(:hover,.is-hover){background:var(--surface-glass-strong);box-shadow:var(--glow-teal-sm);transform:translateY(var(--hover-lift))}
.vz-step__icon{color:var(--text-accent);margin-bottom:var(--space-1)}
.vz-step__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-h4);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.vz-step__text{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-secondary);text-wrap:pretty}
.vz-step__index{position:absolute;right:var(--space-5);bottom:var(--space-4);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
@media (min-width:47.5625em) /* 761 px — ver --vz-bp-mobile */{
  .vz-step--offset-sm{margin-top:var(--space-12)}
  .vz-step--offset-md{margin-top:var(--space-24)}
}

/* ── Testimonial ──────────────────────────────────────────────────────── */
.vz-quote{display:flex;flex-direction:column;gap:var(--space-6);margin:0;max-width:var(--container-narrow)}
.vz-quote__text{margin:0;max-width:var(--vz-measure-quote);font-size:var(--text-h3);line-height:var(--leading-snug);color:var(--text-primary);text-wrap:pretty}
.vz-quote__by{display:flex;align-items:center;gap:var(--space-4)}
.vz-quote__avatar{
  width:var(--vz-size-avatar);height:var(--vz-size-avatar);flex:0 0 auto;border-radius:var(--radius-pill);object-fit:cover;
  background:var(--surface-glass);border:var(--border-hair) solid var(--border-glass);
}
.vz-quote__who{display:flex;flex-direction:column;gap:var(--vz-gap-2xs)}
.vz-quote__name{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-body);color:var(--text-primary)}
.vz-quote__role{font-size:var(--text-caption);color:var(--text-accent)}
.vz-quote.is-placeholder .vz-quote__text,.vz-quote.is-placeholder .vz-quote__name{color:var(--text-muted)}

/* ── TeamCard ─────────────────────────────────────────────────────────── */
.vz-team{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:3 / 4;
  padding:var(--space-4);border-radius:var(--radius-lg);overflow:hidden;
  background:var(--vz-portrait-gradient);border:var(--border-hair) solid var(--border-subtle);
  transition:transform var(--dur-base) var(--ease-out);
}
.vz-team:is(:hover,.is-hover){transform:translateY(var(--hover-lift))}
.vz-team__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vz-team__placeholder{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--text-caption);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);
}
.vz-team__panel{
  position:relative;padding:var(--space-4);border-radius:var(--radius-md);
  background:var(--surface-glass-strong);border:var(--border-hair) solid var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-team__name{display:block;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);color:var(--text-primary)}
.vz-team__role{display:block;margin-top:var(--vz-gap-2xs);font-size:var(--text-caption);color:var(--text-secondary)}
.vz-team__note{margin-top:var(--space-2);font-size:var(--text-caption);line-height:var(--leading-body);color:var(--text-muted)}
.vz-team__index{position:absolute;right:var(--space-3);top:var(--space-3);font-size:var(--text-micro);color:var(--text-muted)}

/* ── CTABanner ────────────────────────────────────────────────────────── */
.vz-cta{
  position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:var(--space-10);
  align-items:flex-end;justify-content:space-between;
  padding:var(--vz-pad-cta);border-radius:var(--radius-2xl);
}
.vz-cta--petrol{background:var(--vz-cta-gradient);border:var(--border-hair) solid var(--vz-tint-mint-22);box-shadow:var(--glow-teal)}
.vz-cta--glass{background:var(--surface-glass);border:var(--border-hair) solid var(--border-glass)}
.vz-cta__heading{flex:1 1 var(--vz-cta-heading-basis)}
.vz-cta__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);flex:0 1 auto;min-width:0}
/* Mobile: os dois CTAs ocupam a largura do painel, um por linha — antes o grupo não encolhia
   e o botão coral era cortado pelo overflow:hidden do painel. */
@media (max-width:47.5em){
  .vz-cta__actions{flex:1 1 100%}
  .vz-cta__actions .vz-btn{flex:1 1 100%;white-space:normal;text-align:center}
}

/* ── DeviceFrame ──────────────────────────────────────────────────────── */
.vz-device{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.vz-device__body{
  position:relative;width:100%;box-sizing:border-box;background:var(--vz-device-bezel);
  border:var(--border-hair) solid var(--vz-device-edge);box-shadow:var(--shadow-dark-lift),var(--glow-teal-sm);
}
.vz-device__screen{position:relative;overflow:hidden;background:var(--vz-offwhite)}
.vz-device__img{display:block;width:100%;height:auto}
.vz-device--laptop .vz-device__body{padding:var(--space-2) var(--space-2) var(--space-3);border-radius:var(--radius-md) var(--radius-md) var(--radius-xs) var(--radius-xs)}
.vz-device--laptop .vz-device__screen{border-radius:var(--radius-xs)}
.vz-device__bar{display:flex;gap:var(--space-1);padding:0 var(--space-1) var(--space-2)}
.vz-device__bar span{width:var(--vz-device-dot);height:var(--vz-device-dot);border-radius:var(--radius-pill);background:var(--border-strong)}
.vz-device__base{
  width:100%;height:var(--space-3);margin-top:calc(-1 * var(--space-3));
  border-radius:0 0 var(--radius-lg) var(--radius-lg);background:linear-gradient(180deg,var(--vz-ink-3),var(--surface-sunken));
  border:var(--border-hair) solid var(--vz-device-edge);border-top:0;
}
/* A base do notebook é mais larga que a tela só onde sobra espaço — no celular ela vazaria. */
@media (min-width:47.5625em){.vz-device__base{width:calc(100% + var(--space-8))}}
.vz-device--phone{max-width:var(--vz-device-phone-w);width:100%;margin-inline:auto}
.vz-device--phone .vz-device__body{padding:var(--space-3);border-radius:var(--radius-2xl)}
/* Tela de celular com ALTURA FIXA desde o início (não cresce com as mensagens) e rolagem visível:
   quem chegou no meio da animação sobe para ler o começo, como no aparelho. */
.vz-device--phone .vz-device__screen{border-radius:var(--radius-xl);height:var(--vz-device-phone-h);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--vz-stone) transparent}
.vz-device--phone .vz-device__screen > .vz-chat{min-height:100%}
.vz-device__notch{position:absolute;top:var(--space-1);left:50%;translate:-50% 0;width:var(--vz-device-notch-w);height:var(--vz-device-notch-h);border-radius:var(--radius-pill);background:var(--surface-sunken);z-index:2}
.vz-device__caption{font-size:var(--text-caption);color:var(--text-muted);text-align:center;max-width:var(--measure)}

/* ── ChatMockup ───────────────────────────────────────────────────────── */
.vz-chat{display:flex;flex-direction:column;background:var(--surface-sunken);color:var(--text-primary);font-family:var(--font-body);min-height:100%}
.vz-chat__head{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-4) var(--space-3);background:var(--vz-petrol);color:var(--vz-offwhite)}
.vz-chat__avatar{display:grid;place-items:center;flex:0 0 auto;width:var(--vz-size-iconbtn-md);height:var(--vz-size-iconbtn-md);border-radius:var(--radius-pill);background:var(--vz-mint);color:var(--vz-petrol-deep);font-weight:var(--weight-bold);font-size:var(--text-body-sm)}
/* Mensagem que rola por baixo do cabeçalho some num degradê em vez de aparecer cortada ao meio. */
.vz-chat__head::after{content:"";position:absolute;left:0;right:0;top:100%;height:var(--space-10);background:linear-gradient(var(--surface-sunken) 30%,transparent);pointer-events:none}
.vz-chat__who{display:flex;flex-direction:column;line-height:var(--leading-snug)}
.vz-chat__name{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body-sm)}
.vz-chat__sub{font-size:var(--text-micro);opacity:var(--vz-opacity-dismiss)}
.vz-chat__list{list-style:none;margin:0;padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.vz-chat__msg{display:flex;flex-direction:column;gap:var(--space-1);max-width:var(--vz-chat-bubble-max);transition:opacity var(--dur-base) var(--ease-soft),transform var(--dur-base) var(--ease-soft)}
.vz-chat__msg--negocio{align-self:flex-start}
.vz-chat__msg--cliente{align-self:flex-end;align-items:flex-end}
.vz-chat__bubble{position:relative;padding:var(--space-2) var(--space-3) var(--space-1);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);font-size:var(--text-body-sm);line-height:var(--leading-body)}
.vz-chat__msg--negocio .vz-chat__bubble{background:var(--surface-raised);border-top-left-radius:var(--radius-xs)}
.vz-chat__msg--cliente .vz-chat__bubble{background:var(--vz-mint-soft);border-top-right-radius:var(--radius-xs)}
.vz-chat__text{margin:0;overflow-wrap:anywhere}
.vz-chat__time{display:block;text-align:right;font-size:var(--text-micro);color:var(--text-muted)}
.vz-chat__fwd{display:inline-flex;align-items:center;gap:var(--space-1);font-size:var(--text-micro);font-style:italic;color:var(--text-muted)}
.vz-chat__quicks{display:flex;flex-direction:column;gap:var(--space-1);width:100%}
.vz-chat__quick{display:block;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-sm);text-align:center;font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--vz-teal)}
.vz-chat__quick.is-tapped{background:var(--vz-mint-soft);color:var(--vz-petrol-deep)}
.vz-chat__typing{display:none;align-self:flex-start;gap:var(--space-1);margin:0 var(--space-3) var(--space-4);padding:var(--space-3);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.vz-chat__typing span{width:var(--vz-chat-typing-dot);height:var(--vz-chat-typing-dot);border-radius:var(--radius-pill);background:var(--text-muted);animation:vz-pulse var(--vz-pulse-duration) var(--ease-in-out) infinite}
.vz-chat__typing span:nth-child(2){animation-delay:.2s}
.vz-chat__typing span:nth-child(3){animation-delay:.4s}
.vz-js .vz-chat[data-vz-chat] .vz-chat__msg:not(.is-on){display:none}
.vz-chat.is-typing .vz-chat__typing{display:flex}
.vz-chat__replay-wrap{display:flex;justify-content:center;padding:0 var(--space-3) var(--space-4)}
.vz-chat__replay{background:var(--surface-raised);box-shadow:var(--shadow-sm);color:var(--vz-teal)}
.vz-chat__replay[hidden]{display:none}

/* ── CycleDiagram ─────────────────────────────────────────────────────── */
.vz-cycle__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6);grid-template-columns:repeat(var(--vz-cycle-n),minmax(0,1fr))}
.vz-cycle__step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2)}
.vz-cycle__step:not(:last-child)::after{
  content:"";position:absolute;top:calc(var(--vz-cycle-node) / 2);height:var(--border-thick);
  left:calc(50% + var(--vz-cycle-node) / 2 + var(--space-2));right:calc(var(--vz-cycle-node) / 2 + var(--space-2) - 50% - var(--space-6));
  background:linear-gradient(90deg,var(--vz-teal),var(--vz-mint));
}
.vz-cycle__node{display:grid;place-items:center;width:var(--vz-cycle-node);height:var(--vz-cycle-node);border-radius:var(--radius-pill);background:var(--surface-glass-strong);border:var(--border-hair) solid var(--border-glass);color:var(--text-accent);box-shadow:var(--glow-teal-sm)}
.vz-cycle__step:last-child .vz-cycle__node{background:var(--vz-coral);border-color:transparent;color:var(--text-on-accent);box-shadow:var(--glow-coral)}
.vz-cycle__num{font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.vz-cycle__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body);color:var(--text-primary)}
.vz-cycle__text{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-secondary)}
.vz-cycle__loop{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-8) 0 0;font-size:var(--text-body-sm);color:var(--text-accent)}
@media (max-width:47.5em){
  .vz-cycle__list{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .vz-cycle__step:not(:last-child)::after{
    top:calc(100% + var(--space-2));bottom:auto;left:50%;right:auto;width:var(--border-thick);height:var(--space-6);
    background:linear-gradient(180deg,var(--vz-teal),var(--vz-mint));
  }
}