/* Layout — padrões de composição extraídos do UI kit do site (ui_kits/website/*.jsx).
 * O kit repetia o mesmo objeto PAGE e os mesmos grids auto-fit inline em cada seção;
 * aqui eles viram classes, para que uma página nova nasça montando blocos, não CSS.
 *
 *   .vz-section            respiro vertical --section-y sobre --surface-page
 *   .vz-section--flush-top sem respiro em cima (seção que continua a anterior)
 *   .vz-container          largura máxima --container com --gutter nas laterais
 *   .vz-grid               repeat(auto-fit, minmax(var(--vz-grid-min), 1fr)) — nunca margin em cadeia
 *   .vz-stack / .vz-row    flex + gap
 *   .vz-hero               hero sobre WaveField + scrim de proteção do texto
 */
.vz-section{position:relative;padding:var(--section-y) 0;background:var(--surface-page);color:var(--text-primary)}
.vz-section--flush-top{padding-top:0}
.vz-section--clip{overflow:hidden}
.vz-container{position:relative;max-width:var(--container);margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}
.vz-container--narrow{max-width:var(--container-narrow)}

.vz-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(var(--vz-grid-min,var(--vz-grid-min-md)),100%),1fr))}
.vz-grid--sm{--vz-grid-min:var(--vz-grid-min-sm)}
.vz-grid--lg{--vz-grid-min:var(--vz-grid-min-lg)}
.vz-grid--xl{--vz-grid-min:var(--vz-grid-min-xl)}
.vz-grid--2xl{--vz-grid-min:var(--vz-grid-min-2xl)}
.vz-grid--tight{gap:var(--space-2)}
.vz-grid--split{gap:clamp(2rem,5vw,4rem);align-items:start}
.vz-grid--wide{gap:clamp(2.5rem,6vw,5rem)}

.vz-stack{display:flex;flex-direction:column;gap:var(--space-3)}
.vz-stack--lg{gap:var(--space-6)}
.vz-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.vz-row--between{justify-content:space-between}
.vz-row--end{align-items:flex-end}

.vz-mt-2{margin-top:var(--space-2)}
.vz-mt-3{margin-top:var(--space-3)}
.vz-mt-5{margin-top:var(--space-5)}
.vz-mt-6{margin-top:var(--space-6)}
.vz-mt-8{margin-top:var(--space-8)}
.vz-mt-10{margin-top:var(--space-10)}
.vz-mt-fluid{margin-top:clamp(2.5rem,6vw,5rem)}

.vz-text-secondary{color:var(--text-secondary)}
.vz-text-muted{color:var(--text-muted)}
.vz-text-accent{color:var(--text-accent)}
.vz-text-coral{color:var(--vz-coral)}
.vz-caption{font-size:var(--text-caption);line-height:var(--leading-body);color:var(--text-muted)}
.vz-body-sm{font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-secondary)}
.vz-title-sm{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body)}
.vz-title-md{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-h3);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight)}

/* Hero: WaveField + scrim diagonal + título xl. */
.vz-hero{position:relative;padding-bottom:clamp(2rem,5vw,5rem);background:var(--vz-ink);overflow:hidden}
.vz-hero__scrim{position:absolute;inset:0;pointer-events:none;background:var(--vz-hero-scrim)}
.vz-hero__inner{position:relative;padding-top:clamp(2.5rem,6vw,6rem)}
.vz-hero__title{
  margin-top:var(--space-8);max-width:var(--vz-measure-hero);font-family:var(--font-display);font-weight:var(--weight-extrabold);
  font-size:var(--text-display-1);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);color:var(--text-primary);
}
/* Tela estreita: o piso de 52 px do --text-display-1 não cabe palavra longa ("compradores,") em
   320 px — o título passa a acompanhar a largura. */
@media (max-width:30em){.vz-hero__title{font-size:min(var(--text-display-1),11vw)}}
.vz-hero__lead{max-width:var(--vz-measure-lead);font-size:var(--text-body-lg);line-height:var(--leading-body);color:var(--text-secondary);text-wrap:pretty}
.vz-hero__pills{position:relative;margin-top:clamp(2rem,5vw,4rem);min-height:clamp(7.5rem,14vw,11.25rem)}
.vz-hero__pill{position:absolute}
.vz-hero__pill--a{left:1%;top:0}
.vz-hero__pill--b{right:5%;top:30%}
.vz-hero__pill--c{left:26%;bottom:0}
/* Mobile: em 760 px as posições em % fazem as pílulas colidirem. Viram coluna escalonada
   (esquerda, direita, centro) e o parallax sai — nada se move sobre texto em tela pequena. */
@media (max-width:47.5em){
  .vz-hero__pills{display:flex;flex-direction:column;gap:var(--space-3);min-height:0}
  .vz-hero__pill{position:static;transform:none!important}
  .vz-hero__pill--a{align-self:flex-start}
  .vz-hero__pill--b{align-self:flex-end}
  .vz-hero__pill--c{align-self:center}
}
.vz-section__scrim{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;background:var(--vz-section-scrim)}

/* Lajota editorial off-white (seção "Proposta de valor"). */
.vz-slab{height:100%;padding:var(--space-8);background:var(--vz-offwhite);display:flex;flex-direction:column;gap:var(--space-4);color:var(--vz-petrol)}
.vz-slab__title{margin:0;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-h3);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--vz-petrol-deep)}
.vz-slab__text{font-size:var(--text-body);line-height:var(--leading-body);text-wrap:pretty}

/* Painel claro elevado (seção "Guia"). */
.vz-panel{padding:var(--space-8);background:var(--surface-raised);box-shadow:var(--shadow-md);border-radius:var(--radius-lg)}
.vz-fill{height:100%}