/* Vozara Design System — pacote gerado por vz_css_pacote(). NÃO EDITE: edite os arquivos de origem. */
/* tokens/fonts.css */
/* Manrope (títulos 700-800) + Nunito Sans (texto 400-600).
   HOSPEDADAS AQUI (assets/fonts/, licença SIL OFL 1.1 — OFL-*.txt ao lado), não no Google Fonts:
   o @import do Google era uma cadeia de 3 saltos que travava a primeira pintura, e o IP do visitante
   ia para o Google (PageSpeed + privacidade, 2026-09-29). Fontes VARIÁVEIS: um arquivo cobre todos
   os pesos. Só latin e latin-ext — o navegador baixa só o subconjunto que a página usa.
   Atualizar: baixar de fonts.google.com e recalcular os fallbacks abaixo. */
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/design-system/assets/fonts/manrope-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url("/design-system/assets/fonts/manrope-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url("/design-system/assets/fonts/nunito-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:200 1000;font-display:swap;src:url("/design-system/assets/fonts/nunito-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:200 1000;font-display:swap;src:url("/design-system/assets/fonts/nunito-sans-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Nunito Sans";font-style:italic;font-weight:200 1000;font-display:swap;src:url("/design-system/assets/fonts/nunito-sans-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* Reservas com as MEDIDAS das fontes da marca (Arial reajustada): enquanto a fonte real chega, o
   texto já ocupa o mesmo espaço — a troca não empurra a página (CLS 0,297 → ~0 no hero).
   Medido em Chrome, texto PT-BR de 200 caracteres: Manrope 700 × Arial 700 e Nunito Sans 400 × Arial 400. */
@font-face{font-family:"Manrope Reserva";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:99.89%;ascent-override:107.12%;descent-override:30.03%;line-gap-override:0%}
@font-face{font-family:"Nunito Sans Reserva";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");size-adjust:100.16%;ascent-override:100.84%;descent-override:34.95%;line-gap-override:0%}

:root{
  --font-display:"Manrope","Manrope Reserva","Nunito Sans",system-ui,sans-serif;
  --font-body:"Nunito Sans","Nunito Sans Reserva","Manrope",system-ui,sans-serif;
  --font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* tokens/colors.css */
/* ── Brand palette — exact hex from BRAND-HANDOFF-VOZARA.md §5 ───────────── */
:root{
  --vz-petrol:#0E5A4A;        /* Primária — azul petróleo */
  --vz-teal:#1F8570;          /* Primária variação / hover — teal médio */
  --vz-coral:#D96F4C;         /* Acento — terracota/coral (CTA, destaque) */
  --vz-mint:#A8D8C9;          /* Apoio — verde-água claro (sucesso, positivo) */
  --vz-offwhite:#FBF7F2;      /* Neutro claro — off-white quente */
  --vz-graphite:#2B2B28;      /* Neutro escuro — grafite (texto) */

  /* ── Derived steps (oklch-harmonised from the six brand hexes) ───────── */
  --vz-ink:#050807;           /* page base, near-black with a teal cast */
  --vz-ink-2:#0A100E;         /* raised dark surface */
  --vz-ink-3:#101917;         /* hovered dark surface */
  --vz-petrol-deep:#083A2F;   /* darkest teal, section grounds */
  --vz-petrol-950:#06251E;
  --vz-teal-bright:#2FA98D;   /* focus rings, active line art */
  --vz-mint-bright:#C8EADF;   /* headline accent on dark */
  --vz-mint-soft:#E2F1EB;     /* light tint fills */
  --vz-coral-deep:#B8552F;    /* coral pressed */
  --vz-coral-soft:#F6DCD0;    /* coral tint fills */
  --vz-sand:#F2EBE2;          /* warm neutral one step down from off-white */
  --vz-stone:#D9D2C8;         /* warm border on light */
  --vz-graphite-60:#6B6B65;   /* muted text on light */
  --vz-amber:#C98A2E;         /* warning */
  --vz-error:#B3402E;         /* real error states only — never pure red */
}

/* ── Semantic aliases — DARK is the default surface (the brand's site runs dark) */
:root{
  --surface-page:var(--vz-ink);
  --surface-raised:var(--vz-ink-2);
  --surface-raised-hover:var(--vz-ink-3);
  --surface-sunken:#020403;
  --surface-glass:rgba(14,90,74,.22);
  --surface-glass-strong:rgba(14,90,74,.38);
  --surface-brand:var(--vz-petrol);
  --surface-brand-hover:var(--vz-teal);
  --surface-accent:var(--vz-coral);
  --surface-accent-hover:var(--vz-coral-deep); /* escurece no hover: 4.5:1 com on-accent (o #E07E5D clareava para 2.69:1) */
  --surface-inverse:var(--vz-offwhite);
  --surface-inverse-2:var(--vz-sand);

  --text-primary:var(--vz-offwhite);
  --text-secondary:rgba(251,247,242,.72);
  --text-muted:rgba(251,247,242,.52);
  --text-accent:var(--vz-mint-bright);
  --text-brand:var(--vz-mint);
  --text-on-brand:var(--vz-offwhite);
  --text-on-accent:#FFF6F1;
  --text-inverse:var(--vz-graphite);
  --text-inverse-muted:var(--vz-graphite-60);
  --text-link:var(--vz-mint-bright);
  --text-link-hover:var(--vz-coral-soft);
  --interactive-hover:var(--vz-coral);      /* coral is the hover colour across the system */
  --interactive-hover-soft:#F0B49B;

  --border-subtle:rgba(251,247,242,.10);
  --border-strong:rgba(251,247,242,.22);
  --border-glass:rgba(168,216,201,.24);
  --border-brand:var(--vz-teal);
  --border-focus:var(--vz-teal-bright);

  --status-success:var(--vz-mint);
  --status-success-ink:#0B3A2E;
  --status-warning:var(--vz-amber);
  --status-danger:var(--vz-error);
  --status-info:var(--vz-teal-bright);
}

/* ── Light scope — off-white editorial sections, white stat cards ───────── */
.vz-light{
  --vz-footer-logo-filter:none;
  --surface-page:var(--vz-offwhite);
  --surface-raised:#FFFFFF;
  --surface-raised-hover:var(--vz-sand);
  --surface-sunken:var(--vz-sand);
  --surface-glass:rgba(14,90,74,.06);
  --surface-glass-strong:rgba(14,90,74,.10);
  --surface-inverse:var(--vz-ink);
  --surface-inverse-2:var(--vz-ink-2);

  --text-primary:var(--vz-graphite);
  --text-secondary:rgba(43,43,40,.74);
  --text-muted:var(--vz-graphite-60); /* DESIGN.md text-muted-light — 5.1:1 no off-white (o rgba .54 dava 3.4:1, reprovado no PageSpeed) */
  --text-accent:var(--vz-petrol);
  --text-brand:var(--vz-petrol);
  --text-inverse:var(--vz-offwhite);
  --text-inverse-muted:rgba(251,247,242,.6);
  --text-link:var(--vz-petrol);
  --text-link-hover:var(--vz-coral-deep);
  --interactive-hover:var(--vz-coral);
  --interactive-hover-soft:var(--vz-coral-deep);

  --border-subtle:rgba(43,43,40,.10);
  --border-strong:rgba(43,43,40,.22);
  --border-glass:rgba(14,90,74,.16);
  --status-success-ink:#0B3A2E;
}

/* tokens/typography.css */
:root{
  /* Display — Manrope 700/800, tight tracking, headline-scale */
  --text-display-1:clamp(3.25rem,7vw,6rem);      /* 52 → 96 */
  --text-display-2:clamp(2.75rem,5.4vw,4.5rem);  /* 44 → 72 */
  --text-display-3:clamp(2.25rem,4vw,3.25rem);   /* 36 → 52 */
  --text-h1:2.5rem;   /* 40 */
  --text-h2:2rem;     /* 32 */
  --text-h3:1.5rem;   /* 24 */
  --text-h4:1.25rem;  /* 20 */
  --text-body-lg:1.125rem; /* 18 */
  --text-body:1rem;
  --text-body-sm:.875rem;  /* 14 */
  --text-caption:.8125rem; /* 13 */
  --text-micro:.6875rem;   /* 11 — eyebrows, [01] indices */

  --leading-tight:1.04;
  --leading-display:1.12;
  --leading-snug:1.3;
  --leading-body:1.55;
  --leading-loose:1.7;

  --tracking-display:-.028em;
  --tracking-tight:-.015em;
  --tracking-normal:0;
  --tracking-wide:.06em;
  --tracking-eyebrow:.16em;  /* LANDING PAGE DESIGN / HOW IT WORKS labels */

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-extrabold:800;
}

/* tokens/spacing.css */
:root{
  --space-0:0;
  --space-1:.25rem;  /* 4 */
  --space-2:.5rem;   /* 8 */
  --space-3:.75rem;  /* 12 */
  --space-4:1rem;    /* 16 */
  --space-5:1.25rem; /* 20 */
  --space-6:1.5rem;  /* 24 */
  --space-8:2rem;    /* 32 */
  --space-10:2.5rem; /* 40 */
  --space-12:3rem;   /* 48 */
  --space-16:4rem;   /* 64 */
  --space-20:5rem;   /* 80 */
  --space-24:6rem;   /* 96 */
  --space-32:8rem;   /* 128 */
  --space-40:10rem;  /* 160 */

  /* vertical rhythm between page sections */
  --section-y:clamp(4rem,9vw,10rem); /* @kind spacing */
  /* page side gutter */
  --gutter:clamp(1.25rem,4vw,4rem); /* @kind spacing */
  /* body copy max line length */
  --measure:66ch; /* @kind spacing */
  --container:1440px; /* @kind spacing */
  --container-narrow:960px; /* @kind spacing */
}

/* tokens/shape.css */
:root{
  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;    /* default card */
  --radius-xl:24px;
  --radius-2xl:32px;   /* full-bleed viewport panels */
  --radius-pill:999px; /* all buttons, all tags */

  --border-hair:1px; /* @kind spacing */
  --border-thick:2px; /* @kind spacing */

  /* Dark system: light is emitted, not cast. Glows over shadows. */
  --glow-teal:0 0 80px rgba(31,133,112,.35);
  --glow-teal-sm:0 0 32px rgba(31,133,112,.28);
  --glow-mint:0 0 48px rgba(168,216,201,.22);
  --glow-coral:0 0 40px rgba(217,111,76,.34);
  --shadow-dark-lift:0 24px 60px -24px rgba(0,0,0,.85);

  /* Light system: soft, warm, low-contrast */
  --shadow-sm:0 1px 2px rgba(43,43,40,.06);
  --shadow-md:0 8px 24px -8px rgba(43,43,40,.14);
  --shadow-lg:0 24px 60px -24px rgba(43,43,40,.22);

  --blur-glass:18px; /* @kind other */
  --blur-heavy:40px; /* @kind other */
}

/* tokens/motion.css */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.45,.05,.55,.95); /* @kind other */
  --ease-soft:cubic-bezier(.33,1,.68,1); /* @kind other */

  --dur-instant:90ms; /* @kind other */
  --dur-fast:180ms; /* @kind other */
  --dur-base:280ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-reveal:800ms; /* @kind other */   /* scroll reveal fade + 24px rise */

  --reveal-rise:24px; /* @kind spacing */
  --hover-lift:-2px; /* @kind spacing */
  --press-scale:.985; /* @kind other */
  --hover-scale:1.02; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:1ms; /* @kind other */--dur-base:1ms; /* @kind other */--dur-slow:1ms; /* @kind other */--dur-reveal:1ms; /* @kind other */--reveal-rise:0px; /* @kind spacing */--hover-scale:1; /* @kind other */}
}

/* tokens/components.css */
/* Tokens de componente — Vozara Design System.
 *
 * Os componentes React do dump (Claude Design) carregavam dezenas de valores crus em
 * `style={{...}}`: paddings em px, rgba de tint, tamanhos de controle. No port para
 * PHP + CSS eles viraram tokens aqui, para que NENHUM arquivo fora de tokens/ tenha
 * cor, px ou fonte hardcoded (regra checada por bin/lint_design_system.php).
 *
 * Todo valor abaixo é o MESMO número do componente original — a tabela de
 * procedência fica no README da biblioteca (design-system/README.md § Tokens).
 * Não é paleta nova: tints são as seis cores da marca com alfa.
 */
:root{
  /* ── Breakpoint ───────────────────────────────────────────────────────
     Media query não lê custom property: este token DOCUMENTA o valor que css/navigation.css
     e css/brand.css escrevem em em (47.5em = 760px, o corte do UI kit: window.innerWidth < 760).
     O JS lê o mesmo 760 em window.innerWidth para trocar a densidade do WaveField. */
  --vz-bp-mobile:760px;
  --vz-bp-nav:960px;      /* NavBar vira menu (css/navigation.css escreve 60em) */

  /* ── Opacidades de estado ─────────────────────────────────────────────── */
  --vz-opacity-disabled:.38;        /* Button disabled */
  --vz-opacity-disabled-soft:.45;   /* controles de formulário disabled */
  --vz-opacity-dismiss:.7;          /* × do Tag */

  /* ── Tamanhos de controle (px do original) ───────────────────────────── */
  --vz-size-2xs:5px;    /* ponto ativo da NavBar */
  --vz-size-xs:6px;     /* ponto do Badge */
  --vz-size-sm:10px;    /* miolo do Radio */
  --vz-size-md:13px;    /* ícone do Badge / check */
  --vz-size-icon-sm:16px;
  --vz-size-icon-md:18px;
  --vz-size-icon:20px;
  --vz-size-icon-lg:22px;
  --vz-size-icon-xl:26px;
  --vz-size-control:20px;   /* Checkbox / Radio */
  --vz-size-thumb:18px;     /* bolinha do Switch */
  --vz-size-switch-w:44px;
  --vz-size-switch-h:26px;
  --vz-size-switch-pad:3px;
  --vz-size-iconbtn-sm:32px;
  --vz-size-iconbtn-md:40px;
  --vz-size-iconbtn-lg:48px;
  --vz-size-social:36px;
  --vz-size-avatar:52px;
  --vz-size-spinner:1em;

  /* ── Espaçamentos finos que não caem na escala de 4 ─────────────────── */
  --vz-gap-2xs:2px;
  --vz-gap-xs:6px;
  --vz-gap-sm:8px;
  --vz-gap-md:10px;
  --vz-gap-lg:12px;
  --vz-pad-badge:5px 12px;
  --vz-pad-tag:8px 14px;
  --vz-pad-tooltip:6px 10px;
  --vz-pad-input:13px 16px;
  --vz-pad-tab:9px 18px;
  --vz-pad-tab-underline:0 0 12px;
  --vz-pad-pill:9px 18px;
  --vz-pad-pill-action:5px 5px 5px 18px;
  --vz-pad-pill-action-rev:5px 18px 5px 5px;
  --vz-pad-nav-link:4px 0;
  --vz-pad-btn-sm:9px 18px;
  --vz-pad-btn-md:13px 26px;
  --vz-pad-btn-lg:17px 34px;
  --vz-btn-cta-lg:1.1875rem;   /* 19px: CTA coral lg em negrito = "texto grande" WCAG (3:1 basta) */
  --vz-pad-cta:clamp(2rem,5vw,4.5rem);
  --vz-indent-input-icon:44px;   /* padding-left do Input com ícone / padding-right do Select */
  --vz-offset-input-icon:15px;   /* posição do ícone dentro do Input/Select */
  --vz-indent-accordion:44px;    /* recuo da resposta sob o índice (01) */
  --vz-offset-tooltip:8px;
  --vz-offset-nav-dot:-6px;
  --vz-float-rise:-7px;          /* keyframe vz-float */

  /* ── Tipografia fina ─────────────────────────────────────────────────── */
  --vz-leading-control:1.1;      /* Button */
  --vz-leading-badge:1.2;
  --vz-leading-tooltip:1.3;
  --vz-leading-input:1.4;
  --vz-tracking-button:-.005em;

  /* ── Medidas de texto ────────────────────────────────────────────────── */
  --vz-measure-heading:22ch;
  --vz-measure-hero:20ch;
  --vz-measure-note:34ch;
  --vz-measure-brief:38ch;
  --vz-measure-quote:46ch;
  --vz-measure-lead:52ch;

  /* ── Larguras ────────────────────────────────────────────────────────── */
  --vz-width-dialog:520px;
  --vz-width-toast:380px;
  --vz-footer-brand-min:220px;
  --vz-footer-logo-filter:brightness(0) invert(1); /* logo monocromático claro no rodapé escuro */
  --vz-footer-col-min:150px;
  --vz-grid-min-sm:240px;
  --vz-grid-min-md:260px;
  --vz-grid-min-lg:280px;
  --vz-grid-min-xl:300px;
  --vz-grid-min-2xl:320px;
  --vz-cta-heading-basis:420px;

  /* ── Logo (alturas mínimas do Logo.prompt.md) ───────────────────────── */
  --vz-logo-nav:44px;
  --vz-logo-footer:86px;
  --vz-logo-icon:32px;
  --vz-logo-ratio-horizontal:4.25;
  --vz-logo-ratio-tagline:2.33;

  /* ── Tints (seis cores da marca com alfa) ────────────────────────────── */
  --vz-tint-teal-20:rgba(31,133,112,.20);
  --vz-tint-coral-18:rgba(217,111,76,.18);
  --vz-tint-coral-32:rgba(217,111,76,.32);
  --vz-tint-amber-18:rgba(201,138,46,.18);
  --vz-tint-amber-34:rgba(201,138,46,.34);
  --vz-tint-error-18:rgba(179,64,46,.18);
  --vz-tint-error-34:rgba(179,64,46,.34);
  --vz-tint-mint-18:rgba(168,216,201,.18);
  --vz-tint-mint-22:rgba(168,216,201,.22);
  --vz-tint-mint-26:rgba(168,216,201,.26);
  --vz-tint-mint-05:rgba(168,216,201,.05);
  --vz-tint-mint-015:rgba(168,216,201,.015);
  --vz-tint-petrol-28:rgba(14,90,74,.28);
  --vz-tint-petrol-05:rgba(14,90,74,.05);
  --vz-tint-petrol-02:rgba(14,90,74,.02);

  /* ── Texto sobre tint (legibilidade dos Badges) ─────────────────────── */
  --vz-on-tint-coral:var(--interactive-hover-soft);  /* #F0B49B no original */
  --vz-on-tint-amber:#E8BE7C;
  --vz-on-tint-error:#E8A091;
  --vz-white:#FFFFFF;                                 /* hover do IconButton light */

  /* ── Superfícies compostas ───────────────────────────────────────────── */
  --vz-scrim:rgba(2,4,3,.72);
  --vz-blur-scrim:6px;
  --vz-navbar-bg:rgba(5,8,7,.72);
  --vz-cta-gradient:linear-gradient(140deg, var(--vz-petrol) 0%, var(--vz-petrol-deep) 62%, var(--vz-petrol-950) 100%);
  --vz-portrait-gradient:linear-gradient(180deg, var(--vz-ink-3), var(--vz-petrol-950));
  --vz-photo-stripes:repeating-linear-gradient(135deg, var(--vz-tint-mint-05) 0 8px, var(--vz-tint-mint-015) 8px 16px);
  --vz-photo-stripes-light:repeating-linear-gradient(135deg, var(--vz-tint-petrol-05) 0 8px, var(--vz-tint-petrol-02) 8px 16px);

  /* ── Motivos da marca (WaveField, Spotlight, hero) ──────────────────── */
  --vz-spotlight:rgba(47,169,141,.20);
  --vz-spotlight-size:620px;
  --vz-wave-accent:#E58164;                 /* nó coral que "acende" */
  --vz-wave-accent-halo:rgba(217,111,76,.34);
  --vz-wave-accent-halo-0:rgba(217,111,76,0);
  --vz-wave-glow:rgba(47,169,141,.16);
  --vz-wave-glow-0:rgba(47,169,141,0);
  --vz-wave-fade:radial-gradient(120% 120% at 50% 108%, rgba(5,8,7,0) 42%, rgba(5,8,7,.34) 74%, rgba(5,8,7,.9) 100%), linear-gradient(180deg, var(--vz-ink) 0%, rgba(5,8,7,.35) 7%, rgba(5,8,7,0) 20%);
  --vz-hero-scrim:linear-gradient(104deg, rgba(5,8,7,.94) 0%, rgba(5,8,7,.74) 36%, rgba(5,8,7,0) 66%);
  --vz-section-scrim:linear-gradient(180deg, var(--vz-ink) 18%, rgba(5,8,7,.72) 62%, rgba(5,8,7,0) 100%);
  --vz-spin-duration:700ms;
  --vz-float-duration:6s;
  --vz-pulse-duration:2.6s;
  --vz-text-reveal-duration:900ms;
  --vz-text-reveal-fade:700ms;
  --vz-spotlight-drift:1.2s;
  --vz-rotate-hover:90deg;

  /* ── DeviceFrame / ChatMockup / CycleDiagram (acréscimos de 2026-09-28) ── */
  --vz-device-phone-w:22rem;          /* largura do celular (≈ 352 px) */
  --vz-device-phone-h:38rem;          /* altura FIXA da tela do celular (≈ proporção de um aparelho real) */
  --vz-device-bezel:var(--vz-ink-3);
  --vz-device-edge:var(--vz-tint-mint-18);
  --vz-device-dot:9px;                /* luzes da barra do notebook */
  --vz-device-notch-w:5.5rem;
  --vz-device-notch-h:6px;
  --vz-chat-bubble-max:85%;
  --vz-chat-typing-dot:6px;
  --vz-cycle-node:3.5rem;             /* círculo do nó do diagrama */
  --vz-chat-step:900ms;               /* intervalo entre mensagens na animação */
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;font-synthesis-weight:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight);line-height:var(--leading-display);margin:0}
p{margin:0}
a{color:var(--text-link);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--interactive-hover-soft)}
/* Link dentro de texto corrido não pode depender só da cor (WCAG 1.4.1): sublinhado. Botões,
   navegação e cards clicáveis têm classe própria e não entram aqui. */
:is(p,li,figcaption,.vz-caption) a:not([class]){text-decoration:underline;text-underline-offset:.15em}
::selection{background:var(--vz-mint);color:var(--vz-petrol-deep)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.vz-eyebrow{font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.vz-measure{max-width:var(--measure)}
@keyframes vz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes vz-pulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.35)}}
@keyframes vz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* css/layout.css */
/* 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%}

/* css/core.css */
/* Core — Icon, Button, IconButton, Logo, Badge, Tag, Card.
 * Port fiel dos style={{...}} dos .jsx; todo valor vem de token (tokens/*.css).
 * Estados forçados (.is-hover/.is-active/.is-focus) existem para o showcase mostrar
 * cada estado parado — em produção quem dispara é :hover/:active/:focus-visible. */

/* ── Icon ─────────────────────────────────────────────────────────────── */
.vz-icon{
  display:inline-flex;flex:0 0 auto;
  width:var(--vz-icon-size,var(--vz-size-icon));height:var(--vz-icon-size,var(--vz-size-icon));
  background-color:currentColor;
  -webkit-mask:var(--vz-icon-src) center/contain no-repeat;
          mask:var(--vz-icon-src) center/contain no-repeat;
}

/* ── Spinner (estado loading) ─────────────────────────────────────────── */
.vz-spinner{
  width:var(--vz-size-spinner);height:var(--vz-size-spinner);flex:0 0 auto;
  border-radius:var(--radius-pill);
  border:var(--border-thick) solid currentColor;border-right-color:transparent;
  animation:vz-spin var(--vz-spin-duration) linear infinite;
}
@keyframes vz-spin{to{transform:rotate(1turn)}}

/* ── Button ───────────────────────────────────────────────────────────── */
.vz-btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:var(--weight-semibold);
  line-height:var(--vz-leading-control);letter-spacing:var(--vz-tracking-button);white-space:nowrap;
  border-radius:var(--radius-pill);border:var(--border-hair) solid transparent;
  cursor:pointer;text-decoration:none;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.vz-btn--sm{padding:var(--vz-pad-btn-sm);font-size:var(--text-body-sm);gap:var(--vz-gap-sm)}
.vz-btn--md{padding:var(--vz-pad-btn-md);font-size:var(--text-body);gap:var(--vz-gap-md)}
.vz-btn--lg{padding:var(--vz-pad-btn-lg);font-size:var(--text-body-lg);gap:var(--vz-gap-lg)}
.vz-btn--full{display:flex;width:100%}
/* Nunca mais largo que o contêiner. Em tela estreita o rótulo quebra em vez de vazar — no desktop
   a linha de botões quebra antes (flex-wrap) e o rótulo continua numa linha só. */
.vz-btn{max-width:100%}
@media (max-width:30em){.vz-btn{white-space:normal;text-align:center}}

/* CTA coral: on-accent sobre coral dá 3.11:1 — passa no AA só como "texto grande" (WCAG: ≥ 14pt em
   negrito). Por isso o primário é sempre negrito e, no tamanho lg, sobe para --vz-btn-cta-lg (19px). */
.vz-btn--primary{background:var(--surface-accent);color:var(--text-on-accent);font-weight:var(--weight-bold)}
.vz-btn--primary.vz-btn--lg{font-size:var(--vz-btn-cta-lg)}
.vz-btn--brand{background:var(--vz-mint);color:var(--vz-petrol-deep)}
.vz-btn--solid{background:var(--surface-brand);color:var(--text-on-brand)}
.vz-btn--secondary{
  background:var(--surface-glass-strong);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-btn--ghost{background:transparent;color:var(--text-secondary)}

.vz-btn:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){transform:scale(var(--hover-scale))}
.vz-btn--primary:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--surface-accent-hover);box-shadow:var(--glow-coral)}
.vz-btn--brand:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--vz-mint-bright);box-shadow:var(--glow-mint)}
.vz-btn--solid:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){background:var(--surface-brand-hover);box-shadow:var(--glow-teal-sm)}
.vz-btn--secondary:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){border-color:var(--interactive-hover);color:var(--interactive-hover-soft)}
.vz-btn--ghost:is(:hover,.is-hover):not(:disabled,[aria-disabled="true"]){color:var(--interactive-hover-soft)}
.vz-btn:is(:active,.is-active):not(:disabled,[aria-disabled="true"]){transform:scale(var(--press-scale));transition-duration:var(--dur-instant)}
.vz-btn.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-btn:is(:disabled,[aria-disabled="true"]){cursor:not-allowed;opacity:var(--vz-opacity-disabled)}
.vz-btn.is-loading{cursor:progress;opacity:1}
.vz-btn.is-loading .vz-btn__label{opacity:var(--vz-opacity-dismiss)}

/* ── IconButton ───────────────────────────────────────────────────────── */
.vz-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  border-radius:var(--radius-pill);border:var(--border-hair) solid transparent;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out);
}
.vz-iconbtn--sm{width:var(--vz-size-iconbtn-sm);height:var(--vz-size-iconbtn-sm)}
.vz-iconbtn--md{width:var(--vz-size-iconbtn-md);height:var(--vz-size-iconbtn-md)}
.vz-iconbtn--lg{width:var(--vz-size-iconbtn-lg);height:var(--vz-size-iconbtn-lg)}
.vz-iconbtn--glass{
  background:var(--surface-glass);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-iconbtn--light{background:var(--vz-offwhite);color:var(--vz-graphite)}
.vz-iconbtn--outline{background:transparent;color:var(--text-secondary);border-color:var(--border-strong)}
.vz-iconbtn:is(:hover,.is-hover):not(:disabled){transform:scale(var(--hover-scale))}
.vz-iconbtn--glass:is(:hover,.is-hover):not(:disabled){background:var(--surface-glass-strong)}
.vz-iconbtn--light:is(:hover,.is-hover):not(:disabled){background:var(--vz-white)}
.vz-iconbtn--outline:is(:hover,.is-hover):not(:disabled){background:var(--surface-glass)}
.vz-iconbtn:is(:active,.is-active):not(:disabled){transform:scale(var(--press-scale))}
.vz-iconbtn.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-iconbtn:disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled)}
.vz-iconbtn.is-loading{cursor:progress;opacity:1}

/* ── Logo ─────────────────────────────────────────────────────────────── */
.vz-logo{display:block;width:auto;max-width:100%}
.vz-logo--invert{filter:brightness(0) invert(1)}

/* ── Badge ────────────────────────────────────────────────────────────── */
.vz-badge{
  display:inline-flex;align-items:center;gap:var(--vz-gap-xs);white-space:nowrap;
  padding:var(--vz-pad-badge);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-caption);font-weight:var(--weight-semibold);
  line-height:var(--vz-leading-badge);border:var(--border-hair) solid transparent;
}
.vz-badge__dot{width:var(--vz-size-xs);height:var(--vz-size-xs);border-radius:var(--radius-pill);background:currentColor}
.vz-badge--neutral{background:var(--surface-glass);color:var(--text-secondary);border-color:var(--border-subtle)}
.vz-badge--brand{background:var(--vz-tint-teal-20);color:var(--vz-mint-bright);border-color:var(--border-glass)}
.vz-badge--accent{background:var(--vz-tint-coral-18);color:var(--vz-on-tint-coral);border-color:var(--vz-tint-coral-32)}
.vz-badge--success{background:var(--vz-mint);color:var(--status-success-ink);border-color:transparent}
.vz-badge--warning{background:var(--vz-tint-amber-18);color:var(--vz-on-tint-amber);border-color:var(--vz-tint-amber-34)}
.vz-badge--danger{background:var(--vz-tint-error-18);color:var(--vz-on-tint-error);border-color:var(--vz-tint-error-34)}

/* ── Tag ──────────────────────────────────────────────────────────────── */
.vz-tag{
  display:inline-flex;align-items:center;gap:var(--vz-gap-sm);
  padding:var(--vz-pad-tag);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-medium);
  background:var(--surface-glass);color:var(--text-secondary);
  border:var(--border-hair) solid var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tag--interactive{cursor:pointer}
.vz-tag:is(:hover,.is-hover):not(.is-selected,.is-disabled){background:var(--surface-glass-strong)}
.vz-tag.is-selected{background:var(--vz-petrol);color:var(--vz-offwhite);border-color:var(--border-brand)}
.vz-tag.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-tag.is-disabled,.vz-tag:disabled{opacity:var(--vz-opacity-disabled-soft);cursor:not-allowed}
.vz-tag__remove{
  display:inline-flex;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  opacity:var(--vz-opacity-dismiss);transition:opacity var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tag__remove:hover:not(:disabled){opacity:1;color:var(--interactive-hover-soft)}
.vz-tag__remove:disabled{cursor:not-allowed}

/* ── Card ─────────────────────────────────────────────────────────────── */
.vz-card{
  position:relative;display:block;text-decoration:none;
  border:var(--border-hair) solid transparent;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out);
}
.vz-card--pad-none{padding:0}
.vz-card--pad-sm{padding:var(--space-4)}
.vz-card--pad-md{padding:var(--space-6)}
.vz-card--pad-lg{padding:var(--space-8)}
.vz-card--r-none{border-radius:0}
.vz-card--r-md{border-radius:var(--radius-md)}
.vz-card--r-lg{border-radius:var(--radius-lg)}
.vz-card--r-xl{border-radius:var(--radius-xl)}
.vz-card--r-2xl{border-radius:var(--radius-2xl)}
.vz-card--dark{background:var(--surface-raised);color:var(--text-primary);border-color:var(--border-subtle)}
.vz-card--glass{
  background:var(--surface-glass);color:var(--text-primary);border-color:var(--border-glass);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
}
.vz-card--light{background:var(--vz-offwhite);color:var(--vz-graphite);box-shadow:var(--shadow-md)}
.vz-card--petrol{background:var(--vz-petrol);color:var(--vz-offwhite);border-color:var(--vz-tint-mint-18)}
.vz-card--interactive:is(:hover,.is-hover,:focus-visible){transform:translateY(var(--hover-lift))}
.vz-card--interactive.vz-card--dark:is(:hover,.is-hover,:focus-visible),
.vz-card--interactive.vz-card--glass:is(:hover,.is-hover,:focus-visible){box-shadow:var(--glow-teal-sm)}
.vz-card--interactive.vz-card--light:is(:hover,.is-hover,:focus-visible){box-shadow:var(--shadow-lg)}
.vz-card--interactive.vz-card--petrol:is(:hover,.is-hover,:focus-visible){box-shadow:var(--glow-teal)}
.vz-card.is-focus{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-card__index{
  position:absolute;right:var(--space-4);bottom:var(--space-3);
  font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted);
}
.vz-card--light .vz-card__index{color:var(--vz-graphite-60)}

/* css/forms.css */
/* Forms — Field, Input, Select, Checkbox, Radio, Switch. */

/* ── Field ────────────────────────────────────────────────────────────── */
.vz-field{display:flex;flex-direction:column;gap:var(--space-2)}
.vz-field__label{
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);color:var(--text-secondary);
}
.vz-field__required{color:var(--vz-coral)}
.vz-field__msg{font-family:var(--font-body);font-size:var(--text-caption);color:var(--text-muted)}
.vz-field__msg--error{color:var(--status-danger)}

/* ── Input / Textarea / Select (mesma pele) ───────────────────────────── */
.vz-input,.vz-select{
  width:100%;box-sizing:border-box;margin:0;
  padding:var(--vz-pad-input);border-radius:var(--radius-md);
  font-family:var(--font-body);font-size:var(--text-body);line-height:var(--vz-leading-input);
  background:var(--surface-glass);color:var(--text-primary);
  border:var(--border-hair) solid var(--border-subtle);outline:none;
  transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.vz-input::placeholder{color:var(--text-muted)}
.vz-input:is(:focus,:focus-visible,.is-focus),.vz-select:is(:focus,:focus-visible,.is-focus){border-color:var(--border-focus);box-shadow:var(--glow-teal-sm)}
.vz-input.is-invalid,.vz-select.is-invalid,.vz-field.is-invalid .vz-input,.vz-field.is-invalid .vz-select{border-color:var(--status-danger);box-shadow:none}
.vz-input:disabled,.vz-select:disabled{background:transparent;opacity:var(--vz-opacity-disabled-soft);cursor:not-allowed}
.vz-input[readonly]{background:transparent;border-style:dashed}
.vz-input--multiline{resize:vertical}
.vz-input--icon{padding-left:var(--vz-indent-input-icon)}

.vz-input-wrap,.vz-select-wrap{position:relative;display:block}
.vz-input-wrap__icon,.vz-select-wrap__chevron{position:absolute;top:var(--vz-offset-input-icon);color:var(--text-muted);pointer-events:none}
.vz-input-wrap__icon{left:var(--vz-offset-input-icon)}
.vz-select-wrap__chevron{right:var(--vz-offset-input-icon)}
.vz-select{appearance:none;-webkit-appearance:none;padding-right:var(--vz-indent-input-icon);cursor:pointer}
.vz-select option{background:var(--surface-raised);color:var(--text-primary)}
.vz-select.is-empty{color:var(--text-muted)}

/* ── Escolhas: Checkbox / Radio / Switch ──────────────────────────────── */
.vz-choice{position:relative;display:flex;gap:var(--space-3);align-items:center;cursor:pointer}
.vz-choice.has-description{align-items:flex-start}
.vz-choice.is-disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled-soft)}
.vz-choice__input{position:absolute;opacity:0;width:0;height:0;margin:0}
.vz-choice__text{display:flex;flex-direction:column;gap:var(--vz-gap-2xs)}
.vz-choice__label{font-family:var(--font-body);font-size:var(--text-body-sm);color:var(--text-primary)}
.vz-choice__desc{font-family:var(--font-body);font-size:var(--text-caption);color:var(--text-muted)}

.vz-choice__box{
  flex:0 0 auto;width:var(--vz-size-control);height:var(--vz-size-control);
  display:grid;place-items:center;background:var(--surface-glass);
  border:var(--border-hair) solid var(--border-strong);
  transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.vz-choice.has-description .vz-choice__box,.vz-choice.has-description .vz-choice__track{margin-top:var(--vz-gap-2xs)}
.vz-choice--checkbox .vz-choice__box{border-radius:var(--radius-xs)}
.vz-choice--radio .vz-choice__box{border-radius:var(--radius-pill)}
.vz-choice__check{color:var(--vz-offwhite);opacity:0}
.vz-choice__dot{width:var(--vz-size-sm);height:var(--vz-size-sm);border-radius:var(--radius-pill);background:var(--vz-teal);opacity:0}

.vz-choice:is(:hover,.is-hover):not(.is-disabled) .vz-choice__box{border-color:var(--interactive-hover)}
.vz-choice__input:checked + .vz-choice__box{border-color:var(--vz-teal)}
.vz-choice--checkbox .vz-choice__input:checked + .vz-choice__box{background:var(--vz-teal)}
.vz-choice__input:checked + .vz-choice__box .vz-choice__check,
.vz-choice__input:checked + .vz-choice__box .vz-choice__dot{opacity:1}
.vz-choice__input:focus-visible + :is(.vz-choice__box,.vz-choice__track),
.vz-choice.is-focus :is(.vz-choice__box,.vz-choice__track){outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}
.vz-choice.is-invalid .vz-choice__box{border-color:var(--status-danger)}

/* Switch — pílula 44×26 */
.vz-choice__track{
  flex:0 0 auto;display:flex;align-items:center;justify-content:flex-start;
  width:var(--vz-size-switch-w);height:var(--vz-size-switch-h);padding:var(--vz-size-switch-pad);box-sizing:border-box;
  border-radius:var(--radius-pill);border:var(--border-hair) solid var(--border-strong);background:var(--surface-glass);
  transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.vz-choice__thumb{
  width:var(--vz-size-thumb);height:var(--vz-size-thumb);border-radius:var(--radius-pill);background:var(--text-muted);
  transition:background var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.vz-choice:is(:hover,.is-hover):not(.is-disabled) .vz-choice__track{border-color:var(--interactive-hover)}
.vz-choice__input:checked + .vz-choice__track{background:var(--vz-teal);border-color:var(--vz-teal)}
.vz-choice__input:checked + .vz-choice__track .vz-choice__thumb{
  background:var(--vz-offwhite);
  transform:translateX(calc(var(--vz-size-switch-w) - var(--vz-size-thumb) - 2 * var(--vz-size-switch-pad) - 2 * var(--border-hair)));
}

/* css/navigation.css */
/* Navigation — NavBar, Tabs, Accordion, Footer. */

/* ── NavBar ───────────────────────────────────────────────────────────── */
.vz-navbar{
  position:relative;z-index:40;display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-5) var(--gutter);
  background:var(--vz-navbar-bg);
  -webkit-backdrop-filter:blur(var(--blur-glass));backdrop-filter:blur(var(--blur-glass));
  border-bottom:var(--border-hair) solid var(--border-subtle);
}
.vz-navbar--sticky{position:sticky;top:0}
.vz-navbar__links{display:flex;align-items:center;gap:var(--space-6);flex:1;min-width:0}
.vz-navbar__link,.vz-navbar__utility{
  position:relative;padding:var(--vz-pad-nav-link);white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-regular);
  color:var(--text-secondary);transition:color var(--dur-fast) var(--ease-out);
}
.vz-navbar__utility{display:inline-flex;align-items:center;gap:var(--vz-gap-xs);padding:0}
.vz-navbar__link.is-active{font-weight:var(--weight-semibold);color:var(--text-primary)}
.vz-navbar__link.is-active::after{
  /* translate (propriedade própria) e não transform: o keyframe vz-pulse anima transform:scale()
     e apagava o translateX(-50%) — o ponto ficava fora do centro do rótulo. */
  content:"";position:absolute;left:50%;bottom:var(--vz-offset-nav-dot);translate:-50% 0;
  width:var(--vz-size-2xs);height:var(--vz-size-2xs);border-radius:var(--radius-pill);background:var(--vz-mint-bright);
  animation:vz-pulse var(--vz-pulse-duration) var(--ease-in-out) infinite;
}
/* Pulsa só depois do primeiro gesto do visitante (ver "Primeiro gesto" em js/vozara-ds.js). */
.vz-js:not(.vz-interagiu) .vz-navbar__link.is-active::after{animation-play-state:paused}
/* Hover coral só onde existe ponteiro de verdade: no toque o :hover gruda no link depois do clique
   e parecia "ativo". .is-hover (estado congelado da vitrine) continua valendo em qualquer tela. */
.vz-navbar__link.is-hover,.vz-navbar__utility.is-hover{color:var(--interactive-hover-soft)}
@media (hover:hover){
  .vz-navbar__link:hover,.vz-navbar__utility:hover{color:var(--interactive-hover-soft)}
}
.vz-navbar__brand{flex:0 0 auto;display:block}
.vz-navbar__end{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-5);flex:1}
.vz-navbar__menu{display:none;background:none;border:0;padding:0;cursor:pointer;color:var(--text-primary)}
.vz-navbar__menu-close{display:none}
/* A NavBar colapsa em 960 px, não em 760: com 4 links + logo central + CTA, entre 760 e 960 os
   rótulos quebravam em duas linhas ("Como / funciona"). Rótulo de navegação nunca quebra. */
@media (max-width:60em) /* 960 px — ver --vz-bp-nav */{
  .vz-navbar{flex-wrap:wrap}
  .vz-navbar__brand{order:-1}
  .vz-navbar__brand .vz-logo{height:var(--vz-logo-icon)}
  .vz-navbar__links{display:none;order:3;flex:1 0 100%;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding-top:var(--space-4)}
  /* Na lista vertical o ponto sob o rótulo parece solto entre dois itens: vai para a direita do
     rótulo, centrado na linha. Continua sendo o único indicador de ativo (regra da marca). */
  .vz-navbar__link.is-active::after{left:calc(100% + var(--space-3));top:50%;bottom:auto;translate:0 -50%}
  .vz-navbar.is-open .vz-navbar__links{display:flex}
  .vz-navbar__utility{display:none}
  .vz-navbar__menu{display:inline-flex}
  .vz-navbar.is-open .vz-navbar__menu-open{display:none}
  .vz-navbar.is-open .vz-navbar__menu-close{display:inline-flex}
}

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.vz-tabs{max-width:100%;min-width:0}  /* dentro de flex, sem isto a lista não encolhe e vaza */
.vz-tabs__list{display:inline-flex;max-width:100%;overflow-x:auto}
.vz-tabs--pill .vz-tabs__list{
  gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);
  background:var(--surface-glass);border:var(--border-hair) solid var(--border-subtle);
}
.vz-tabs--underline .vz-tabs__list{gap:var(--space-6);border-bottom:var(--border-hair) solid var(--border-subtle)}
.vz-tabs__tab{
  position:relative;cursor:pointer;border:0;background:transparent;white-space:nowrap;
  font-family:var(--font-body);font-size:var(--text-body-sm);font-weight:var(--weight-regular);color:var(--text-secondary);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.vz-tabs--pill .vz-tabs__tab{padding:var(--vz-pad-tab);border-radius:var(--radius-pill)}
.vz-tabs--underline .vz-tabs__tab{padding:var(--vz-pad-tab-underline)}
.vz-tabs__tab.is-selected{font-weight:var(--weight-semibold);color:var(--text-primary)}
.vz-tabs--pill .vz-tabs__tab.is-selected{background:var(--vz-petrol);color:var(--vz-offwhite)}
.vz-tabs--underline .vz-tabs__tab.is-selected::after{
  content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--border-hair));height:var(--border-thick);background:var(--vz-mint-bright);
}
.vz-tabs__tab:is(:hover,.is-hover):not(.is-selected,:disabled){color:var(--interactive-hover-soft)}
.vz-tabs__tab:disabled{cursor:not-allowed;opacity:var(--vz-opacity-disabled-soft)}
.vz-tabs__panel{padding-top:var(--space-6)}
.vz-tabs__panel:focus-visible{outline:var(--border-thick) solid var(--border-focus);outline-offset:var(--border-thick)}

/* ── Accordion ────────────────────────────────────────────────────────── */
.vz-accordion{display:flex;flex-direction:column}
.vz-accordion__item{border-bottom:var(--border-hair) solid var(--border-subtle)}
.vz-accordion__heading{margin:0;font:inherit}
.vz-accordion__trigger{
  display:flex;align-items:center;gap:var(--space-5);width:100%;
  padding:var(--space-5) 0;background:none;border:0;cursor:pointer;text-align:left;color:inherit;
}
.vz-accordion__index{flex:0 0 auto;font-family:var(--font-body);font-size:var(--text-micro);letter-spacing:var(--tracking-wide);color:var(--text-muted)}
.vz-accordion__q{
  flex:1;font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body);
  letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out);
}
.vz-accordion__item.is-open .vz-accordion__q{color:var(--text-primary)}
.vz-accordion__icon{
  color:var(--text-accent);
  transition:color var(--dur-fast) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.vz-accordion__icon--minus,.vz-accordion__item.is-open .vz-accordion__icon--plus{display:none}
.vz-accordion__item.is-open .vz-accordion__icon--minus{display:inline-flex}
.vz-accordion__trigger:is(:hover,.is-hover) .vz-accordion__q{color:var(--interactive-hover-soft)}
.vz-accordion__trigger:is(:hover,.is-hover) .vz-accordion__icon{color:var(--interactive-hover);transform:rotate(var(--vz-rotate-hover))}
.vz-accordion__region{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)}
.vz-accordion__item.is-open .vz-accordion__region{grid-template-rows:1fr}
.vz-accordion__clip{overflow:hidden}
.vz-accordion__a{
  max-width:var(--measure);padding:0 0 var(--space-6);
  font-family:var(--font-body);font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-brand);
}
.vz-accordion--numbered .vz-accordion__a{padding-left:var(--vz-indent-accordion)}
.vz-accordion__empty{padding:var(--space-5) 0;font-size:var(--text-body-sm);color:var(--text-muted);border-bottom:var(--border-hair) dashed var(--border-subtle)}

/* ── Footer ───────────────────────────────────────────────────────────── */
.vz-footer{
  padding:var(--space-16) var(--gutter) var(--space-8);
  background:var(--surface-sunken);border-top:var(--border-hair) solid var(--border-subtle);
}
.vz-footer__grid{
  display:grid;gap:var(--space-12);max-width:var(--container);margin:0 auto;
  grid-template-columns:minmax(var(--vz-footer-brand-min),1fr) repeat(auto-fit,minmax(var(--vz-footer-col-min),auto));
}
/* Mobile: marca ocupa a linha inteira e as colunas de links viram duas por linha — o
   minmax(220px) + minmax(150px) do desktop não cabe em 390 px e vazava para fora da tela. */
@media (max-width:47.5em){
  .vz-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10) var(--space-6)}
  .vz-footer__brand{grid-column:1 / -1}
}
.vz-footer__brand,.vz-footer__col{display:flex;flex-direction:column;gap:var(--space-3)}
.vz-footer__brand{gap:var(--space-4)}
/* align-self: sem ele o <img> estica na coluna e o SVG centraliza o desenho (logo "flutuando" no meio).
   Filtro: petróleo sobre o fundo escuro dá 2.47:1 — no tema escuro o logo sai monocromático claro. */
.vz-footer__logo{align-self:flex-start;filter:var(--vz-footer-logo-filter)}
.vz-footer__note{max-width:var(--vz-measure-note);font-size:var(--text-body-sm);color:var(--text-muted);line-height:var(--leading-body)}
.vz-footer__socials{display:flex;gap:var(--space-3);margin-top:var(--space-2)}
.vz-footer__social{
  display:grid;place-items:center;width:var(--vz-size-social);height:var(--vz-size-social);
  border-radius:var(--radius-pill);border:var(--border-hair) solid var(--border-subtle);color:var(--text-secondary);
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out);
}
.vz-footer__social:hover{color:var(--interactive-hover-soft);border-color:var(--interactive-hover)}
.vz-footer__link{font-size:var(--text-body-sm);color:var(--text-secondary)}
.vz-footer__bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;
  max-width:var(--container);margin:var(--space-12) auto 0;padding-top:var(--space-6);
  border-top:var(--border-hair) solid var(--border-subtle);
  font-size:var(--text-caption);color:var(--text-muted);
}

/* css/feedback.css */
/* Feedback — Dialog, Toast, Tooltip. */

/* ── Dialog ───────────────────────────────────────────────────────────── */
.vz-dialog{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--space-6)}
.vz-dialog[hidden]{display:none}
.vz-dialog__scrim{
  position:absolute;inset:0;background:var(--vz-scrim);
  -webkit-backdrop-filter:blur(var(--vz-blur-scrim));backdrop-filter:blur(var(--vz-blur-scrim));
}
.vz-dialog__panel{
  position:relative;width:100%;max-width:var(--vz-dialog-width,var(--vz-width-dialog));
  padding:var(--space-8);border-radius:var(--radius-xl);
  background:var(--surface-raised);color:var(--text-primary);border:var(--border-hair) solid var(--border-glass);
  box-shadow:var(--shadow-dark-lift),var(--glow-teal-sm);
}
.vz-dialog__panel:focus{outline:none}
.vz-dialog__close{position:absolute;top:var(--space-5);right:var(--space-5)}
.vz-dialog__title{
  margin-right:var(--vz-indent-input-icon);font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-h3);color:var(--text-primary);letter-spacing:var(--tracking-tight);
}
.vz-dialog__desc{margin-top:var(--space-3);max-width:var(--measure);font-size:var(--text-body-sm);line-height:var(--leading-body);color:var(--text-secondary)}
.vz-dialog__body{margin-top:var(--space-6)}
.vz-dialog__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:flex-end;margin-top:var(--space-8)}
.vz-dialog--inline{position:relative;inset:auto;z-index:auto;padding:var(--space-8);overflow:hidden;border-radius:var(--radius-lg)}
body.vz-dialog-open{overflow:hidden}

/* ── Toast ────────────────────────────────────────────────────────────── */
.vz-toast{
  display:flex;gap:var(--space-3);align-items:flex-start;
  width:min(var(--vz-width-toast),100%);box-sizing:border-box;padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-md);background:var(--surface-raised);
  border:var(--border-hair) solid var(--border-subtle);box-shadow:var(--shadow-dark-lift);
}
.vz-toast__icon{margin-top:var(--vz-gap-2xs)}
.vz-toast--success .vz-toast__icon{color:var(--vz-mint)}
.vz-toast--info .vz-toast__icon{color:var(--status-info)}
.vz-toast--warning .vz-toast__icon{color:var(--status-warning)}
.vz-toast--danger .vz-toast__icon{color:var(--status-danger)}
.vz-toast__body{flex:1;display:flex;flex-direction:column;gap:var(--vz-gap-2xs)}
.vz-toast__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);color:var(--text-primary)}
.vz-toast__msg{font-size:var(--text-caption);line-height:var(--leading-body);color:var(--text-secondary)}
.vz-toast__close{background:none;border:0;padding:0;cursor:pointer;color:var(--text-muted);transition:color var(--dur-fast) var(--ease-out)}
.vz-toast__close:hover{color:var(--interactive-hover-soft)}
.vz-toast-region{position:fixed;right:var(--space-6);bottom:var(--space-6);z-index:90;display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-end}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
.vz-tooltip{position:relative;display:inline-flex}
.vz-tooltip__bubble{
  position:absolute;z-index:60;white-space:nowrap;pointer-events:none;
  padding:var(--vz-pad-tooltip);border-radius:var(--radius-sm);
  background:var(--vz-petrol-deep);color:var(--vz-offwhite);border:var(--border-hair) solid var(--border-glass);
  font-family:var(--font-body);font-size:var(--text-caption);line-height:var(--vz-leading-tooltip);
  opacity:0;transition:opacity var(--dur-fast) var(--ease-out);
}
.vz-tooltip--top .vz-tooltip__bubble{bottom:calc(100% + var(--vz-offset-tooltip));left:50%;transform:translateX(-50%)}
.vz-tooltip--bottom .vz-tooltip__bubble{top:calc(100% + var(--vz-offset-tooltip));left:50%;transform:translateX(-50%)}
.vz-tooltip--left .vz-tooltip__bubble{right:calc(100% + var(--vz-offset-tooltip));top:50%;transform:translateY(-50%)}
.vz-tooltip--right .vz-tooltip__bubble{left:calc(100% + var(--vz-offset-tooltip));top:50%;transform:translateY(-50%)}
.vz-tooltip:is(:hover,:focus-within,.is-open) .vz-tooltip__bubble{opacity:1}

/* css/brand.css */
/* 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}
/* Flutua só depois do primeiro gesto do visitante (ver "Primeiro gesto" em js/vozara-ds.js). */
.vz-js:not(.vz-interagiu) .vz-pill--float{animation-play-state:paused}
.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));
  }
}