/*!
 * Verticci Design System — bundle completo (tokens + componentes).
 * Gerado por scripts/build.mjs. NÃO EDITE À MÃO.
 * Este é o único arquivo necessário para usar o design system.
 */


/* =========================================================================
   TOKENS PRIMITIVOS — valores brutos. Não use diretamente em componentes.
   ========================================================================= */
:root {
  /* — Paleta primitiva — */
  --v-cor-grafite-50: #F4F7FA;
  --v-cor-grafite-100: #E6EBF2;
  --v-cor-grafite-200: #D5DAE1;
  --v-cor-grafite-300: #B9BDC6;
  --v-cor-grafite-400: #8D939A;
  --v-cor-grafite-500: #5C616A;
  --v-cor-grafite-600: #3D424A;
  --v-cor-grafite-700: #2A2D33;
  --v-cor-grafite-800: #1C1F24;
  --v-cor-grafite-900: #111315;
  --v-cor-grafite-950: #08090A;
  --v-cor-marfim-50: #FBFAF7;
  --v-cor-marfim-100: #F7F6F1;
  --v-cor-marfim-200: #F2F0E9;
  --v-cor-marfim-300: #E7E3D9;
  --v-cor-marfim-400: #DBD6C7;
  --v-cor-marfim-500: #C9C3B2;
  --v-cor-cobalto-50: #EEF1FF;
  --v-cor-cobalto-100: #DCE2FF;
  --v-cor-cobalto-200: #BEC7FF;
  --v-cor-cobalto-300: #97A6FF;
  --v-cor-cobalto-400: #6F82FF;
  --v-cor-cobalto-500: #3657FF;
  --v-cor-cobalto-600: #2843D6;
  --v-cor-cobalto-700: #1E36AC;
  --v-cor-cobalto-800: #15277F;
  --v-cor-cobalto-900: #0E1A57;
  --v-cor-estado-sucesso-claro: #1A7358;
  --v-cor-estado-sucesso-escuro: #3FC49B;
  --v-cor-estado-sucesso-suave-claro: #E3F5EF;
  --v-cor-estado-sucesso-suave-escuro: #0E2A22;
  --v-cor-estado-atencao-claro: #8F5F0B;
  --v-cor-estado-atencao-escuro: #E8A93A;
  --v-cor-estado-atencao-suave-claro: #FBF0DC;
  --v-cor-estado-atencao-suave-escuro: #2E2308;
  --v-cor-estado-critico-claro: #B33326;
  --v-cor-estado-critico-escuro: #F0705F;
  --v-cor-estado-critico-suave-claro: #FBE7E4;
  --v-cor-estado-critico-suave-escuro: #33110D;
  --v-cor-estado-informacao-claro: #2843D6;
  --v-cor-estado-informacao-escuro: #6F82FF;
  --v-cor-estado-informacao-suave-claro: #EEF1FF;
  --v-cor-estado-informacao-suave-escuro: #101A45;
  --v-cor-grafico-escuro-1: #6F82FF;
  --v-cor-grafico-escuro-2: #B9BDC6;
  --v-cor-grafico-escuro-3: #3FC49B;
  --v-cor-grafico-escuro-4: #97A6FF;
  --v-cor-grafico-escuro-5: #E8A93A;
  --v-cor-grafico-escuro-6: #8D939A;
  --v-cor-grafico-claro-1: #2843D6;
  --v-cor-grafico-claro-2: #5C616A;
  --v-cor-grafico-claro-3: #1A7358;
  --v-cor-grafico-claro-4: #6C7FFF;
  --v-cor-grafico-claro-5: #8F5F0B;
  --v-cor-grafico-claro-6: #B33326;

  /* — Tipografia — */
  --v-fonte-display: Sora, 'Segoe UI', system-ui, sans-serif;
  --v-fonte-texto: Inter, 'Segoe UI', system-ui, sans-serif;
  --v-fonte-mono: 'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
  --v-peso-light: 300;
  --v-peso-regular: 400;
  --v-peso-medium: 500;
  --v-peso-semibold: 600;
  --v-peso-bold: 700;
  --v-fs-display-xl: clamp(3.25rem, 2.1rem + 5.2vw, 6rem);
  --v-fs-display-l: clamp(2.5rem, 1.85rem + 3.1vw, 4.25rem);
  --v-fs-h1: clamp(2.125rem, 1.65rem + 2.3vw, 3.375rem);
  --v-fs-h2: clamp(1.6875rem, 1.42rem + 1.3vw, 2.375rem);
  --v-fs-h3: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem);
  --v-fs-h4: clamp(1.125rem, 1.07rem + 0.28vw, 1.3125rem);
  --v-fs-corpo-g: 1.125rem;
  --v-fs-corpo: 1rem;
  --v-fs-corpo-p: 0.875rem;
  --v-fs-legenda: 0.8125rem;
  --v-fs-micro: 0.6875rem;
  --v-lh-display: 1.02;
  --v-lh-titulo: 1.14;
  --v-lh-medio: 1.3;
  --v-lh-corpo: 1.6;
  --v-lh-solto: 1.75;
  --v-ls-display: -0.03em;
  --v-ls-titulo: -0.015em;
  --v-ls-normal: 0;
  --v-ls-amplo: 0.06em;
  --v-ls-logo: 0.18em;

  /* — Espaçamento (base 4px) — */
  --v-espaco-0: 0;
  --v-espaco-1: 0.25rem;
  --v-espaco-2: 0.5rem;
  --v-espaco-3: 0.75rem;
  --v-espaco-4: 1rem;
  --v-espaco-5: 1.25rem;
  --v-espaco-6: 1.5rem;
  --v-espaco-8: 2rem;
  --v-espaco-10: 2.5rem;
  --v-espaco-12: 3rem;
  --v-espaco-16: 4rem;
  --v-espaco-20: 5rem;
  --v-espaco-24: 6rem;
  --v-espaco-32: 8rem;
  --v-espaco-40: 10rem;

  /* — Raios de canto — */
  --v-raio-nenhum: 0;
  --v-raio-xs: 2px;
  --v-raio-sm: 4px;
  --v-raio-md: 8px;
  --v-raio-lg: 12px;
  --v-raio-xl: 20px;
  --v-raio-total: 999px;

  /* — Espessuras de borda — */
  --v-traco-fino: 1px;
  --v-traco-medio: 2px;
  --v-traco-grosso: 3px;

  /* — Elevação — */
  --v-sombra-sm: 0 1px 2px rgba(8, 9, 10, 0.28);
  --v-sombra-md: 0 4px 12px -2px rgba(8, 9, 10, 0.35);
  --v-sombra-lg: 0 12px 32px -8px rgba(8, 9, 10, 0.45);
  --v-sombra-xl: 0 24px 64px -16px rgba(8, 9, 10, 0.55);
  --v-sombra-foco: 0 0 0 3px rgba(54, 87, 255, 0.35);

  /* — Movimento — */
  --v-dur-instantanea: 80ms;
  --v-dur-rapida: 140ms;
  --v-dur-media: 220ms;
  --v-dur-lenta: 360ms;
  --v-dur-entrada: 560ms;
  --v-curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --v-curva-saida: cubic-bezier(0.4, 0, 1, 1);
  --v-curva-entrada: cubic-bezier(0, 0, 0.2, 1);
  --v-curva-suave: cubic-bezier(0.4, 0, 0.2, 1);

  /* — Layout e containers — */
  --v-largura-texto: 68ch;
  --v-container-estreito: 45rem;
  --v-container: 72rem;
  --v-container-largo: 88rem;
  --v-gutter: clamp(1.25rem, 4vw, 3rem);
  --v-colunas: 12;

  /* — Camadas (z-index) — */
  --v-z-base: 0;
  --v-z-elevado: 10;
  --v-z-fixo: 100;
  --v-z-overlay: 200;
  --v-z-modal: 300;
  --v-z-toast: 400;
  --v-z-tooltip: 500;

  /* — Séries de gráfico ativas — */
  --v-serie-1: var(--v-cor-grafico-escuro-1);
  --v-serie-2: var(--v-cor-grafico-escuro-2);
  --v-serie-3: var(--v-cor-grafico-escuro-3);
  --v-serie-4: var(--v-cor-grafico-escuro-4);
  --v-serie-5: var(--v-cor-grafico-escuro-5);
  --v-serie-6: var(--v-cor-grafico-escuro-6);

  /* — Estados ativos — */
  --v-sucesso: var(--v-cor-estado-sucesso-escuro);
  --v-sucesso-suave: var(--v-cor-estado-sucesso-suave-escuro);
  --v-atencao: var(--v-cor-estado-atencao-escuro);
  --v-atencao-suave: var(--v-cor-estado-atencao-suave-escuro);
  --v-critico: var(--v-cor-estado-critico-escuro);
  --v-critico-suave: var(--v-cor-estado-critico-suave-escuro);
  --v-informacao: var(--v-cor-estado-informacao-escuro);
  --v-informacao-suave: var(--v-cor-estado-informacao-suave-escuro);
}

/* =========================================================================
   TEMA ESCURO — padrão da marca (grafite carbono).
   ========================================================================= */
:root {
  color-scheme: dark;
  --v-canvas: #111315;
  --v-canvas-rebaixado: #08090A;
  --v-superficie: #1C1F24;
  --v-superficie-alta: #2A2D33;
  --v-texto: #F2F0E9;
  --v-texto-suave: #B9BDC6;
  --v-texto-sutil: #8D939A;
  --v-texto-invertido: #111315;
  --v-borda: #282C33;
  --v-borda-sutil: #1E2228;
  --v-borda-forte: #5A626D;
  --v-acento: #3657FF;
  --v-acento-texto: #6F82FF;
  --v-acento-hover: #6F82FF;
  --v-acento-suave: #161B33;
  --v-acento-contraste: #FFFFFF;
  --v-foco: #6F82FF;
}

/* =========================================================================
   TEMA CLARO — marfim mineral. Ative com data-tema="claro" no <html>.
   Aceita também data-theme="light" para interoperabilidade.
   ========================================================================= */
[data-tema="claro"],
[data-theme="light"] {
  color-scheme: light;
  --v-canvas: #F2F0E9;
  --v-canvas-rebaixado: #E7E3D9;
  --v-superficie: #FBFAF7;
  --v-superficie-alta: #FFFFFF;
  --v-texto: #111315;
  --v-texto-suave: #3D424A;
  --v-texto-sutil: #5C616A;
  --v-texto-invertido: #F2F0E9;
  --v-borda: #DBD6C7;
  --v-borda-sutil: #E7E3D9;
  --v-borda-forte: #838B9A;
  --v-acento: #3657FF;
  --v-acento-texto: #2843D6;
  --v-acento-hover: #1E36AC;
  --v-acento-suave: #EEF1FF;
  --v-acento-contraste: #FFFFFF;
  --v-foco: #2843D6;

  /* — Séries de gráfico ativas — */
  --v-serie-1: var(--v-cor-grafico-claro-1);
  --v-serie-2: var(--v-cor-grafico-claro-2);
  --v-serie-3: var(--v-cor-grafico-claro-3);
  --v-serie-4: var(--v-cor-grafico-claro-4);
  --v-serie-5: var(--v-cor-grafico-claro-5);
  --v-serie-6: var(--v-cor-grafico-claro-6);

  /* — Estados ativos — */
  --v-sucesso: var(--v-cor-estado-sucesso-claro);
  --v-sucesso-suave: var(--v-cor-estado-sucesso-suave-claro);
  --v-atencao: var(--v-cor-estado-atencao-claro);
  --v-atencao-suave: var(--v-cor-estado-atencao-suave-claro);
  --v-critico: var(--v-cor-estado-critico-claro);
  --v-critico-suave: var(--v-cor-estado-critico-suave-claro);
  --v-informacao: var(--v-cor-estado-informacao-claro);
  --v-informacao-suave: var(--v-cor-estado-informacao-suave-claro);

  --v-sombra-sm: 0 1px 2px rgba(17, 19, 21, 0.08);
  --v-sombra-md: 0 4px 12px -2px rgba(17, 19, 21, 0.10);
  --v-sombra-lg: 0 12px 32px -8px rgba(17, 19, 21, 0.14);
  --v-sombra-xl: 0 24px 64px -16px rgba(17, 19, 21, 0.18);
}

/* Inversão local: aplique .v-inverso para trocar o tema de um trecho isolado
   (ex.: uma seção escura dentro de uma página clara). */
[data-tema="claro"] .v-inverso,
[data-theme="light"] .v-inverso {
  color-scheme: dark;
  --v-canvas: #111315;
  --v-canvas-rebaixado: #08090A;
  --v-superficie: #1C1F24;
  --v-superficie-alta: #2A2D33;
  --v-texto: #F2F0E9;
  --v-texto-suave: #B9BDC6;
  --v-texto-sutil: #8D939A;
  --v-texto-invertido: #111315;
  --v-borda: #282C33;
  --v-borda-sutil: #1E2228;
  --v-borda-forte: #5A626D;
  --v-acento: #3657FF;
  --v-acento-texto: #6F82FF;
  --v-acento-hover: #6F82FF;
  --v-acento-suave: #161B33;
  --v-acento-contraste: #FFFFFF;
  --v-foco: #6F82FF;

  /* — Séries de gráfico ativas — */
  --v-serie-1: var(--v-cor-grafico-escuro-1);
  --v-serie-2: var(--v-cor-grafico-escuro-2);
  --v-serie-3: var(--v-cor-grafico-escuro-3);
  --v-serie-4: var(--v-cor-grafico-escuro-4);
  --v-serie-5: var(--v-cor-grafico-escuro-5);
  --v-serie-6: var(--v-cor-grafico-escuro-6);

  /* — Estados ativos — */
  --v-sucesso: var(--v-cor-estado-sucesso-escuro);
  --v-sucesso-suave: var(--v-cor-estado-sucesso-suave-escuro);
  --v-atencao: var(--v-cor-estado-atencao-escuro);
  --v-atencao-suave: var(--v-cor-estado-atencao-suave-escuro);
  --v-critico: var(--v-cor-estado-critico-escuro);
  --v-critico-suave: var(--v-cor-estado-critico-suave-escuro);
  --v-informacao: var(--v-cor-estado-informacao-escuro);
  --v-informacao-suave: var(--v-cor-estado-informacao-suave-escuro);
}



/* =========================================================================
   1. RESET
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  min-height: 100svh;
  background: var(--v-canvas);
  color: var(--v-texto);
  font-family: var(--v-fonte-texto);
  font-size: var(--v-fs-corpo);
  line-height: var(--v-lh-corpo);
  font-weight: var(--v-peso-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

ul[class],
ol[class] {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:target {
  scroll-margin-block: var(--v-espaco-20);
}

/* Foco visível e consistente em todo o sistema. */
:focus-visible {
  outline: var(--v-traco-medio) solid var(--v-foco);
  outline-offset: 2px;
  border-radius: var(--v-raio-xs);
}

::selection {
  background: var(--v-acento);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   2. TIPOGRAFIA
   ========================================================================= */

.v-display-xl,
.v-display-l,
.v-h1,
.v-h2,
.v-h3,
.v-h4,
h1,
h2,
h3,
h4 {
  font-family: var(--v-fonte-display);
  font-weight: var(--v-peso-semibold);
  line-height: var(--v-lh-titulo);
  letter-spacing: var(--v-ls-titulo);
  color: var(--v-texto);
  text-wrap: balance;
}

.v-display-xl {
  font-size: var(--v-fs-display-xl);
  line-height: var(--v-lh-display);
  letter-spacing: var(--v-ls-display);
  font-weight: var(--v-peso-semibold);
}

.v-display-l {
  font-size: var(--v-fs-display-l);
  line-height: 1.06;
  letter-spacing: var(--v-ls-display);
}

.v-h1,
h1 {
  font-size: var(--v-fs-h1);
}

.v-h2,
h2 {
  font-size: var(--v-fs-h2);
}

.v-h3,
h3 {
  font-size: var(--v-fs-h3);
  line-height: var(--v-lh-medio);
}

.v-h4,
h4 {
  font-size: var(--v-fs-h4);
  line-height: var(--v-lh-medio);
  font-weight: var(--v-peso-medium);
  letter-spacing: 0;
}

.v-corpo-g {
  font-size: var(--v-fs-corpo-g);
  line-height: var(--v-lh-solto);
}

.v-corpo {
  font-size: var(--v-fs-corpo);
}

.v-corpo-p {
  font-size: var(--v-fs-corpo-p);
}

.v-legenda {
  font-size: var(--v-fs-legenda);
  line-height: var(--v-lh-medio);
  color: var(--v-texto-sutil);
}

/* Sobrelinha — rótulo de seção. Reproduz o tracking do logotipo.
   Este é um elemento de assinatura da marca: use-o para abrir seções. */
.v-sobrelinha {
  display: inline-flex;
  align-items: center;
  gap: var(--v-espaco-3);
  font-family: var(--v-fonte-texto);
  font-size: var(--v-fs-micro);
  font-weight: var(--v-peso-medium);
  letter-spacing: var(--v-ls-logo);
  text-transform: uppercase;
  color: var(--v-texto-sutil);
}

.v-sobrelinha::before {
  content: "";
  inline-size: var(--v-espaco-6);
  block-size: var(--v-traco-medio);
  background: var(--v-acento);
  flex: none;
}

.v-sobrelinha--sem-marca::before {
  display: none;
}

/* Numerais tabulares — obrigatório em indicadores, tabelas e valores. */
.v-numero {
  font-family: var(--v-fonte-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -0.01em;
}

.v-texto-suave {
  color: var(--v-texto-suave);
}

.v-texto-sutil {
  color: var(--v-texto-sutil);
}

.v-acento {
  color: var(--v-acento-texto);
}

.v-medida {
  max-inline-size: var(--v-largura-texto);
}

/* Link padrão — sublinhado discreto que ganha peso no hover. */
.v-link,
.v-prosa a {
  color: var(--v-acento-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color var(--v-dur-rapida) var(--v-curva-padrao);
}

.v-link:hover,
.v-prosa a:hover {
  text-decoration-color: currentColor;
}

/* Bloco de prosa — para conteúdo longo vindo de CMS/markdown. */
.v-prosa {
  max-inline-size: var(--v-largura-texto);
  color: var(--v-texto-suave);
}

.v-prosa > * + * {
  margin-block-start: var(--v-espaco-5);
}

.v-prosa > * + :is(h2, h3, h4) {
  margin-block-start: var(--v-espaco-10);
}

.v-prosa :is(h2, h3, h4) {
  color: var(--v-texto);
}

.v-prosa :is(ul, ol) {
  padding-inline-start: var(--v-espaco-5);
}

.v-prosa li + li {
  margin-block-start: var(--v-espaco-2);
}

.v-prosa strong {
  color: var(--v-texto);
  font-weight: var(--v-peso-semibold);
}

/* Tese / citação — declaração institucional de alto impacto. */
.v-tese {
  font-family: var(--v-fonte-display);
  font-size: var(--v-fs-h2);
  font-weight: var(--v-peso-light);
  line-height: var(--v-lh-medio);
  letter-spacing: var(--v-ls-titulo);
  color: var(--v-texto);
  text-wrap: balance;
  padding-inline-start: var(--v-espaco-6);
  border-inline-start: var(--v-traco-medio) solid var(--v-acento);
}

.v-tese cite {
  display: block;
  margin-block-start: var(--v-espaco-4);
  font-family: var(--v-fonte-texto);
  font-size: var(--v-fs-corpo-p);
  font-style: normal;
  font-weight: var(--v-peso-regular);
  letter-spacing: var(--v-ls-normal);
  color: var(--v-texto-sutil);
}

/* =========================================================================
   3. LAYOUT
   ========================================================================= */

.v-container {
  inline-size: 100%;
  max-inline-size: var(--v-container);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}

.v-container--estreito {
  max-inline-size: var(--v-container-estreito);
}

.v-container--largo {
  max-inline-size: var(--v-container-largo);
}

.v-secao {
  padding-block: clamp(var(--v-espaco-16), 9vw, var(--v-espaco-32));
}

.v-secao--compacta {
  padding-block: clamp(var(--v-espaco-12), 6vw, var(--v-espaco-20));
}

/* Empilhamento vertical com ritmo consistente. */
.v-pilha {
  display: flex;
  flex-direction: column;
  gap: var(--v-espaco-4);
}

.v-pilha--2 { gap: var(--v-espaco-2); }
.v-pilha--3 { gap: var(--v-espaco-3); }
.v-pilha--6 { gap: var(--v-espaco-6); }
.v-pilha--8 { gap: var(--v-espaco-8); }
.v-pilha--12 { gap: var(--v-espaco-12); }

.v-linha {
  display: flex;
  align-items: center;
  gap: var(--v-espaco-4);
  flex-wrap: wrap;
}

.v-linha--entre {
  justify-content: space-between;
}

.v-linha--fim {
  justify-content: flex-end;
}

/* Grade de 12 colunas. */
.v-grade {
  display: grid;
  grid-template-columns: repeat(var(--v-colunas), minmax(0, 1fr));
  gap: var(--v-espaco-6);
}

/* Grade automática — para listas de cards que se adaptam sozinhas. */
.v-grade-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--v-min-col, 17rem), 100%), 1fr));
  gap: var(--v-espaco-6);
}

.v-grade-auto--larga { --v-min-col: 22rem; }
.v-grade-auto--estreita { --v-min-col: 13rem; }

.v-col-4 { grid-column: span 4; }
.v-col-5 { grid-column: span 5; }
.v-col-6 { grid-column: span 6; }
.v-col-7 { grid-column: span 7; }
.v-col-8 { grid-column: span 8; }
.v-col-12 { grid-column: span 12; }

@media (max-width: 60rem) {
  .v-col-4,
  .v-col-5,
  .v-col-6,
  .v-col-7,
  .v-col-8 {
    grid-column: span 12;
  }
}

/* Divisor horizontal. */
.v-divisor {
  border: 0;
  border-block-start: var(--v-traco-fino) solid var(--v-borda);
  margin-block: var(--v-espaco-8);
}

/* Régua vértice — hairline vertical que ecoa o divisor do logotipo.
   Elemento de assinatura: use para separar marca de conteúdo. */
.v-regra-vertice {
  inline-size: var(--v-traco-fino);
  align-self: stretch;
  min-block-size: var(--v-espaco-8);
  background: var(--v-borda-forte);
  flex: none;
}

/* =========================================================================
   4. ATMOSFERA — texturas de fundo da marca
   ========================================================================= */

/* Grade de precisão — malha ortográfica sutil. Comunica engenharia e método.
   Nunca aumente a opacidade: ela deve ser percebida, não vista. */
.v-grade-precisao {
  position: relative;
  isolation: isolate;
}

.v-grade-precisao::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--v-borda-sutil) var(--v-traco-fino), transparent var(--v-traco-fino)),
    linear-gradient(to bottom, var(--v-borda-sutil) var(--v-traco-fino), transparent var(--v-traco-fino));
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 75%);
}

/* Halo cobalto — luz difusa e discreta. Único uso aceito de "brilho" na marca. */
.v-halo {
  position: relative;
  isolation: isolate;
  /* O halo se estende além da borda direita; sem isto ele cria rolagem
     horizontal na página. `clip` recorta sem virar container de rolagem,
     preservando `position: sticky` em ancestrais. */
  overflow: hidden;
  overflow: clip;
}

.v-halo::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset-block-start: -30%;
  inset-inline-end: -10%;
  inline-size: min(42rem, 70%);
  aspect-ratio: 1;
  background: radial-gradient(circle, color-mix(in srgb, var(--v-acento) 18%, transparent) 0%, transparent 68%);
  filter: blur(40px);
}

/* Diagonal ascendente — deriva do traço que sobe no símbolo. */
.v-ascendente {
  position: relative;
  overflow: hidden;
}

.v-ascendente::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: -10%;
  inline-size: 120%;
  block-size: var(--v-traco-fino);
  background: linear-gradient(to right, transparent, var(--v-acento) 45%, transparent);
  transform: rotate(-1.6deg);
  transform-origin: left center;
  opacity: 0.6;
}

/* =========================================================================
   5. MARCA — aplicação do logotipo
   ========================================================================= */

.v-logo {
  display: inline-flex;
  align-items: center;
  color: var(--v-texto);
  flex: none;
}

.v-logo svg,
.v-logo img {
  block-size: var(--v-logo-altura, 2rem);
  inline-size: auto;
}

.v-logo--sm { --v-logo-altura: 1.5rem; }
.v-logo--lg { --v-logo-altura: 2.75rem; }
.v-logo--xl { --v-logo-altura: 4rem; }

/* Área de proteção: nunca menos que a altura do símbolo dividida por 2. */
.v-logo--protegido {
  padding: calc(var(--v-logo-altura, 2rem) / 2);
}

/* Logo por máscara — recolore um SVG externo com currentColor, sem precisar
   incorporar o arquivo inline. Informe o arquivo e a proporção:

   <span class="v-logo-mascara"
         style="--v-logo-arquivo: url(assets/logo/verticci-horizontal.svg);
                --v-logo-proporcao: 5.87"
         role="img" aria-label="Verticci"></span>

   Proporções: horizontal 5.87 · horizontal-reduzido 6.1 · vertical 1.87
               símbolo 1.08 · ícone 1 · logotipo 8.19 */
.v-logo-mascara {
  display: inline-block;
  flex: none;
  block-size: var(--v-logo-altura, 2rem);
  aspect-ratio: var(--v-logo-proporcao, 5.87);
  background-color: currentColor;
  -webkit-mask: var(--v-logo-arquivo) center / contain no-repeat;
  mask: var(--v-logo-arquivo) center / contain no-repeat;
}

/* =========================================================================
   6. BOTÕES
   ========================================================================= */

.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-espaco-2);
  padding: var(--v-espaco-3) var(--v-espaco-6);
  border: var(--v-traco-fino) solid transparent;
  border-radius: var(--v-raio-sm);
  font-family: var(--v-fonte-texto);
  font-size: var(--v-fs-corpo-p);
  font-weight: var(--v-peso-medium);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--v-dur-rapida) var(--v-curva-padrao),
    border-color var(--v-dur-rapida) var(--v-curva-padrao),
    color var(--v-dur-rapida) var(--v-curva-padrao),
    transform var(--v-dur-instantanea) var(--v-curva-padrao);
}

.v-btn:active {
  transform: translateY(1px);
}

.v-btn:disabled,
.v-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Primário — a decisão principal. Um por tela. */
.v-btn--primario {
  background: var(--v-acento);
  color: var(--v-acento-contraste);
}

.v-btn--primario:hover:not(:disabled) {
  background: var(--v-acento-hover);
}

/* Secundário — ação alternativa de mesmo nível. */
.v-btn--secundario {
  background: transparent;
  color: var(--v-texto);
  border-color: var(--v-borda-forte);
}

.v-btn--secundario:hover:not(:disabled) {
  border-color: var(--v-texto);
  background: color-mix(in srgb, var(--v-texto) 6%, transparent);
}

/* Sutil — ação terciária, sem peso visual. */
.v-btn--sutil {
  background: transparent;
  color: var(--v-texto-suave);
  padding-inline: var(--v-espaco-3);
}

.v-btn--sutil:hover:not(:disabled) {
  color: var(--v-texto);
  background: color-mix(in srgb, var(--v-texto) 7%, transparent);
}

/* Sólido — alto contraste sobre fundos coloridos ou de imagem. */
.v-btn--solido {
  background: var(--v-texto);
  color: var(--v-texto-invertido);
}

.v-btn--solido:hover:not(:disabled) {
  background: color-mix(in srgb, var(--v-texto) 88%, var(--v-canvas));
}

.v-btn--critico {
  background: transparent;
  color: var(--v-critico);
  border-color: color-mix(in srgb, var(--v-critico) 45%, transparent);
}

.v-btn--critico:hover:not(:disabled) {
  background: var(--v-critico-suave);
  border-color: var(--v-critico);
}

.v-btn--p {
  padding: var(--v-espaco-2) var(--v-espaco-4);
  font-size: var(--v-fs-legenda);
}

.v-btn--g {
  padding: var(--v-espaco-4) var(--v-espaco-8);
  font-size: var(--v-fs-corpo);
}

.v-btn--bloco {
  inline-size: 100%;
}

/* Seta que avança no hover — microinteração padrão da marca. */
.v-btn__seta {
  transition: transform var(--v-dur-media) var(--v-curva-padrao);
}

.v-btn:hover .v-btn__seta {
  transform: translateX(3px);
}

/* =========================================================================
   7. SUPERFÍCIES
   ========================================================================= */

.v-card {
  background: var(--v-superficie);
  border: var(--v-traco-fino) solid var(--v-borda);
  border-radius: var(--v-raio-md);
  padding: var(--v-espaco-6);
}

.v-card--plano {
  background: transparent;
}

.v-card--alto {
  background: var(--v-superficie-alta);
  box-shadow: var(--v-sombra-md);
}

.v-card--destaque {
  border-color: color-mix(in srgb, var(--v-acento) 45%, transparent);
  background: linear-gradient(to bottom, var(--v-acento-suave), var(--v-superficie) 60%);
}

/* Card clicável — a borda superior recebe o traço cobalto no hover. */
.v-card--interativo {
  position: relative;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--v-dur-media) var(--v-curva-padrao),
    background-color var(--v-dur-media) var(--v-curva-padrao),
    transform var(--v-dur-media) var(--v-curva-padrao);
}

.v-card--interativo::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--v-traco-medio);
  background: var(--v-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v-dur-media) var(--v-curva-padrao);
}

.v-card--interativo:hover {
  border-color: var(--v-borda-forte);
  transform: translateY(-2px);
}

.v-card--interativo:hover::before {
  transform: scaleX(1);
}

.v-painel {
  background: var(--v-superficie);
  border: var(--v-traco-fino) solid var(--v-borda);
  border-radius: var(--v-raio-lg);
  overflow: hidden;
}

.v-painel__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-espaco-4);
  padding: var(--v-espaco-4) var(--v-espaco-6);
  border-block-end: var(--v-traco-fino) solid var(--v-borda);
}

.v-painel__corpo {
  padding: var(--v-espaco-6);
}

/* =========================================================================
   8. INDICADORES (KPI)
   ========================================================================= */

.v-indicador {
  display: flex;
  flex-direction: column;
  gap: var(--v-espaco-2);
  padding: var(--v-espaco-5) var(--v-espaco-6);
  background: var(--v-superficie);
  border: var(--v-traco-fino) solid var(--v-borda);
  border-radius: var(--v-raio-md);
  border-inline-start: var(--v-traco-medio) solid var(--v-borda-forte);
}

.v-indicador--acento {
  border-inline-start-color: var(--v-acento);
}

.v-indicador--positivo { border-inline-start-color: var(--v-sucesso); }
.v-indicador--negativo { border-inline-start-color: var(--v-critico); }

.v-indicador__rotulo {
  font-size: var(--v-fs-micro);
  font-weight: var(--v-peso-medium);
  letter-spacing: var(--v-ls-amplo);
  text-transform: uppercase;
  color: var(--v-texto-sutil);
}

.v-indicador__valor {
  font-family: var(--v-fonte-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  font-weight: var(--v-peso-semibold);
  line-height: 1;
  letter-spacing: var(--v-ls-titulo);
  font-variant-numeric: tabular-nums;
  color: var(--v-texto);
}

.v-indicador__valor small {
  font-size: 0.5em;
  font-weight: var(--v-peso-regular);
  color: var(--v-texto-sutil);
  margin-inline-start: 0.15em;
}

.v-indicador__nota {
  font-size: var(--v-fs-legenda);
  color: var(--v-texto-sutil);
}

/* Variação percentual. */
.v-delta {
  display: inline-flex;
  align-items: center;
  gap: var(--v-espaco-1);
  font-family: var(--v-fonte-mono);
  font-size: var(--v-fs-legenda);
  font-variant-numeric: tabular-nums;
  font-weight: var(--v-peso-medium);
}

.v-delta--sobe { color: var(--v-sucesso); }
.v-delta--desce { color: var(--v-critico); }
.v-delta--neutro { color: var(--v-texto-sutil); }

/* =========================================================================
   9. BADGES E ETIQUETAS
   ========================================================================= */

.v-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v-espaco-2);
  padding: var(--v-espaco-1) var(--v-espaco-3);
  border-radius: var(--v-raio-sm);
  border: var(--v-traco-fino) solid var(--v-borda);
  background: var(--v-superficie);
  color: var(--v-texto-suave);
  font-size: var(--v-fs-micro);
  font-weight: var(--v-peso-medium);
  letter-spacing: var(--v-ls-amplo);
  text-transform: uppercase;
  white-space: nowrap;
}

.v-badge--acento {
  background: var(--v-acento-suave);
  border-color: color-mix(in srgb, var(--v-acento) 40%, transparent);
  color: var(--v-acento-texto);
}

.v-badge--sucesso {
  background: var(--v-sucesso-suave);
  border-color: color-mix(in srgb, var(--v-sucesso) 40%, transparent);
  color: var(--v-sucesso);
}

.v-badge--atencao {
  background: var(--v-atencao-suave);
  border-color: color-mix(in srgb, var(--v-atencao) 40%, transparent);
  color: var(--v-atencao);
}

.v-badge--critico {
  background: var(--v-critico-suave);
  border-color: color-mix(in srgb, var(--v-critico) 40%, transparent);
  color: var(--v-critico);
}

.v-badge--pilula {
  border-radius: var(--v-raio-total);
  padding-inline: var(--v-espaco-4);
}

/* Ponto de status. */
.v-ponto {
  inline-size: var(--v-espaco-2);
  block-size: var(--v-espaco-2);
  border-radius: var(--v-raio-total);
  background: currentColor;
  flex: none;
}

/* =========================================================================
   10. FORMULÁRIOS
   ========================================================================= */

.v-campo {
  display: flex;
  flex-direction: column;
  gap: var(--v-espaco-2);
}

.v-rotulo {
  font-size: var(--v-fs-corpo-p);
  font-weight: var(--v-peso-medium);
  color: var(--v-texto);
}

.v-rotulo[data-obrigatorio]::after {
  content: "*";
  color: var(--v-acento-texto);
  margin-inline-start: 0.2em;
}

.v-input,
.v-textarea,
.v-select {
  inline-size: 100%;
  padding: var(--v-espaco-3) var(--v-espaco-4);
  background: var(--v-canvas-rebaixado);
  color: var(--v-texto);
  border: var(--v-traco-fino) solid var(--v-borda-forte);
  border-radius: var(--v-raio-sm);
  font-size: var(--v-fs-corpo-p);
  transition:
    border-color var(--v-dur-rapida) var(--v-curva-padrao),
    background-color var(--v-dur-rapida) var(--v-curva-padrao);
}

.v-input::placeholder,
.v-textarea::placeholder {
  color: var(--v-texto-sutil);
}

.v-input:hover,
.v-textarea:hover,
.v-select:hover {
  border-color: var(--v-texto-sutil);
}

.v-input:focus,
.v-textarea:focus,
.v-select:focus {
  outline: none;
  border-color: var(--v-acento);
  box-shadow: var(--v-sombra-foco);
}

.v-input[aria-invalid="true"],
.v-textarea[aria-invalid="true"] {
  border-color: var(--v-critico);
}

.v-textarea {
  min-block-size: 8rem;
  resize: vertical;
}

.v-select {
  appearance: none;
  padding-inline-end: var(--v-espaco-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--v-espaco-5) center, right var(--v-espaco-4) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.v-ajuda {
  font-size: var(--v-fs-legenda);
  color: var(--v-texto-sutil);
}

.v-erro {
  font-size: var(--v-fs-legenda);
  color: var(--v-critico);
}

/* Caixa de seleção e rádio. */
.v-check {
  display: flex;
  align-items: flex-start;
  gap: var(--v-espaco-3);
  cursor: pointer;
  font-size: var(--v-fs-corpo-p);
  color: var(--v-texto-suave);
}

.v-check input {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin: 0.2rem 0 0;
  accent-color: var(--v-acento);
  flex: none;
  cursor: pointer;
}

/* =========================================================================
   11. TABELA DE DADOS
   ========================================================================= */

.v-tabela-envolve {
  inline-size: 100%;
  overflow-x: auto;
  border: var(--v-traco-fino) solid var(--v-borda);
  border-radius: var(--v-raio-md);
}

.v-tabela {
  inline-size: 100%;
  font-size: var(--v-fs-corpo-p);
  text-align: left;
}

.v-tabela thead th {
  padding: var(--v-espaco-3) var(--v-espaco-4);
  background: var(--v-canvas-rebaixado);
  border-block-end: var(--v-traco-fino) solid var(--v-borda);
  font-size: var(--v-fs-micro);
  font-weight: var(--v-peso-medium);
  letter-spacing: var(--v-ls-amplo);
  text-transform: uppercase;
  color: var(--v-texto-sutil);
  white-space: nowrap;
}

.v-tabela tbody td {
  padding: var(--v-espaco-3) var(--v-espaco-4);
  border-block-end: var(--v-traco-fino) solid var(--v-borda-sutil);
  color: var(--v-texto-suave);
  vertical-align: middle;
}

.v-tabela tbody tr:last-child td {
  border-block-end: none;
}

.v-tabela tbody tr {
  transition: background-color var(--v-dur-rapida) var(--v-curva-padrao);
}

.v-tabela tbody tr:hover {
  background: color-mix(in srgb, var(--v-texto) 4%, transparent);
}

/* Colunas numéricas: sempre alinhadas à direita e tabulares. */
.v-tabela :is(th, td)[data-num] {
  text-align: right;
  font-family: var(--v-fonte-mono);
  font-variant-numeric: tabular-nums;
  color: var(--v-texto);
}

/* =========================================================================
   12. MÉTODO — as etapas do Verticci OS
   ========================================================================= */

.v-etapas {
  display: grid;
  gap: 0;
  counter-reset: etapa;
}

.v-etapa {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--v-espaco-6);
  padding-block: var(--v-espaco-8);
  border-block-start: var(--v-traco-fino) solid var(--v-borda);
  counter-increment: etapa;
}

.v-etapa:last-child {
  border-block-end: var(--v-traco-fino) solid var(--v-borda);
}

.v-etapa__num {
  font-family: var(--v-fonte-mono);
  font-size: var(--v-fs-legenda);
  font-weight: var(--v-peso-medium);
  font-variant-numeric: tabular-nums;
  color: var(--v-acento-texto);
  padding-block-start: 0.35em;
  min-inline-size: 3ch;
}

.v-etapa__num::before {
  content: counter(etapa, decimal-leading-zero);
}

.v-etapa__titulo {
  font-family: var(--v-fonte-display);
  font-size: var(--v-fs-h3);
  font-weight: var(--v-peso-medium);
  letter-spacing: var(--v-ls-titulo);
  color: var(--v-texto);
  margin-block-end: var(--v-espaco-2);
}

.v-etapa__desc {
  color: var(--v-texto-suave);
  max-inline-size: var(--v-largura-texto);
}

@media (max-width: 40rem) {
  .v-etapa {
    grid-template-columns: 1fr;
    gap: var(--v-espaco-2);
  }
}

/* =========================================================================
   13. NAVEGAÇÃO
   ========================================================================= */

.v-cabecalho {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--v-z-fixo);
  background: color-mix(in srgb, var(--v-canvas) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block-end: var(--v-traco-fino) solid var(--v-borda-sutil);
}

.v-cabecalho__interno {
  display: flex;
  align-items: center;
  gap: var(--v-espaco-8);
  min-block-size: 4.5rem;
}

.v-nav {
  display: flex;
  align-items: center;
  gap: var(--v-espaco-6);
  margin-inline-start: auto;
}

.v-nav__link {
  position: relative;
  font-size: var(--v-fs-corpo-p);
  color: var(--v-texto-suave);
  text-decoration: none;
  padding-block: var(--v-espaco-2);
  transition: color var(--v-dur-rapida) var(--v-curva-padrao);
}

.v-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--v-traco-medio);
  background: var(--v-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--v-dur-media) var(--v-curva-padrao);
}

.v-nav__link:hover,
.v-nav__link[aria-current] {
  color: var(--v-texto);
}

.v-nav__link:hover::after,
.v-nav__link[aria-current]::after {
  transform: scaleX(1);
}

@media (max-width: 52rem) {
  .v-nav {
    display: none;
  }
}

/* Cabeçalho compacto: sem a navegação, o logo e o CTA precisam caber lado a
   lado em 375px. Reduz o logo e aperta o respiro em vez de deixar estourar. */
@media (max-width: 40rem) {
  .v-cabecalho__interno {
    gap: var(--v-espaco-4);
    min-block-size: 3.75rem;
  }

  .v-cabecalho__interno .v-logo,
  .v-cabecalho__interno .v-logo-mascara {
    --v-logo-altura: 1.5rem;
  }
}

.v-rodape {
  border-block-start: var(--v-traco-fino) solid var(--v-borda);
  padding-block: var(--v-espaco-16) var(--v-espaco-10);
  color: var(--v-texto-sutil);
  font-size: var(--v-fs-corpo-p);
}

.v-rodape a {
  color: var(--v-texto-suave);
  text-decoration: none;
}

.v-rodape a:hover {
  color: var(--v-texto);
}

/* =========================================================================
   14. AVISOS
   ========================================================================= */

.v-aviso {
  display: flex;
  gap: var(--v-espaco-4);
  padding: var(--v-espaco-4) var(--v-espaco-5);
  border-radius: var(--v-raio-sm);
  border: var(--v-traco-fino) solid var(--v-borda);
  border-inline-start: var(--v-traco-grosso) solid var(--v-texto-sutil);
  background: var(--v-superficie);
  font-size: var(--v-fs-corpo-p);
  color: var(--v-texto-suave);
}

.v-aviso--info { border-inline-start-color: var(--v-informacao); background: var(--v-informacao-suave); }
.v-aviso--sucesso { border-inline-start-color: var(--v-sucesso); background: var(--v-sucesso-suave); }
.v-aviso--atencao { border-inline-start-color: var(--v-atencao); background: var(--v-atencao-suave); }
.v-aviso--critico { border-inline-start-color: var(--v-critico); background: var(--v-critico-suave); }

/* =========================================================================
   15. GRÁFICOS — primitivas CSS
   ========================================================================= */

/* Barra de progresso / medidor. */
.v-medidor {
  inline-size: 100%;
  block-size: var(--v-espaco-2);
  background: var(--v-canvas-rebaixado);
  border-radius: var(--v-raio-total);
  overflow: hidden;
}

.v-medidor__preenchimento {
  block-size: 100%;
  inline-size: var(--v-valor, 0%);
  background: var(--v-acento);
  border-radius: inherit;
  transition: inline-size var(--v-dur-lenta) var(--v-curva-padrao);
}

/* Gráfico de barras puro CSS. Defina --v-valor (0–100%) em cada barra. */
.v-barras {
  display: flex;
  align-items: flex-end;
  gap: var(--v-espaco-2);
  block-size: var(--v-barras-altura, 10rem);
}

.v-barras__item {
  flex: 1;
  block-size: var(--v-valor, 50%);
  min-inline-size: var(--v-espaco-2);
  background: var(--v-serie-1);
  border-radius: var(--v-raio-xs) var(--v-raio-xs) 0 0;
  transition: block-size var(--v-dur-lenta) var(--v-curva-padrao);
}

.v-barras__item[data-serie="2"] { background: var(--v-serie-2); }
.v-barras__item[data-serie="3"] { background: var(--v-serie-3); }
.v-barras__item[data-serie="4"] { background: var(--v-serie-4); }
.v-barras__item[data-serie="5"] { background: var(--v-serie-5); }
.v-barras__item[data-serie="6"] { background: var(--v-serie-6); }

.v-barras__item--fraca { background: var(--v-borda-forte); }

/* Legenda de séries. */
.v-legenda-serie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v-espaco-4);
  font-size: var(--v-fs-legenda);
  color: var(--v-texto-sutil);
}

.v-legenda-serie li {
  display: flex;
  align-items: center;
  gap: var(--v-espaco-2);
}

.v-legenda-serie li::before {
  content: "";
  inline-size: var(--v-espaco-3);
  block-size: var(--v-espaco-1);
  border-radius: var(--v-raio-total);
  background: var(--v-cor, var(--v-serie-1));
  flex: none;
}

/* =========================================================================
   16. UTILITÁRIOS
   ========================================================================= */

.v-visualmente-oculto {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.v-pular-para {
  position: absolute;
  inset-block-start: var(--v-espaco-2);
  inset-inline-start: var(--v-espaco-2);
  z-index: var(--v-z-toast);
  padding: var(--v-espaco-3) var(--v-espaco-5);
  background: var(--v-acento);
  color: var(--v-acento-contraste);
  border-radius: var(--v-raio-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.v-pular-para:focus {
  transform: translateY(0);
}

.v-centro { text-align: center; }
.v-direita { text-align: right; }
.v-cheio { inline-size: 100%; }
.v-none { display: none; }

/* =========================================================================
   17. MOVIMENTO — revelação de entrada
   ========================================================================= */

/* Aplique .v-revela nos filhos diretos de um container com .v-revela-grupo.
   O escalonamento cria uma entrada ordenada — a "composição" da marca. */
@keyframes v-sobe {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.v-revela {
  animation: v-sobe var(--v-dur-entrada) var(--v-curva-padrao) both;
}

.v-revela-grupo > * {
  animation: v-sobe var(--v-dur-entrada) var(--v-curva-padrao) both;
}

.v-revela-grupo > :nth-child(1) { animation-delay: 0ms; }
.v-revela-grupo > :nth-child(2) { animation-delay: 70ms; }
.v-revela-grupo > :nth-child(3) { animation-delay: 140ms; }
.v-revela-grupo > :nth-child(4) { animation-delay: 210ms; }
.v-revela-grupo > :nth-child(5) { animation-delay: 280ms; }
.v-revela-grupo > :nth-child(6) { animation-delay: 350ms; }
.v-revela-grupo > :nth-child(7) { animation-delay: 420ms; }
.v-revela-grupo > :nth-child(8) { animation-delay: 490ms; }

/* Revelação ao rolar, sem JavaScript. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .v-revela-ao-rolar {
      animation: v-sobe var(--v-dur-lenta) var(--v-curva-padrao) both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }
}

/* =========================================================================
   18. IMPRESSÃO
   ========================================================================= */

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #fff;
    color: #111315;
  }

  .v-cabecalho,
  .v-nav,
  .v-pular-para {
    display: none !important;
  }

  .v-card,
  .v-painel,
  .v-indicador {
    border-color: #d5dae1;
    box-shadow: none;
    break-inside: avoid;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #5c616a;
  }
}