/* ============================================================================
   V12X — Base, utilitários e componentes
   Depende de tokens.css. Importe nesta ordem:
     @import "./tokens.css";
     @import "./v12x.css";

   Convenção de nome: prefixo .v- em tudo. Modificador com --.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--v-nav-height) + var(--v-space-6));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font-text);
  font-size: var(--v-size-body);
  font-weight: var(--v-weight-regular);
  line-height: var(--v-leading-body);
  letter-spacing: var(--v-tracking-body);
  font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1; /* l com cauda, 6/9 abertos */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sem transição na troca de tema: os fundos de seção trocam instantaneamente,
     então animar o body cria um estado intermediário incoerente. */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }

/* Foco: visível, nunca removido. Preto no claro, branco no escuro — não laranja,
   que a 2.80:1 reprovaria o mínimo de 3:1 para elemento não textual. */
:focus-visible {
  outline: var(--v-focus-width) solid var(--v-focus);
  outline-offset: 3px;
  border-radius: var(--v-radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--v-accent); color: var(--v-on-accent); }

/* ---------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------ */
.v-container {
  width: 100%;
  max-width: calc(var(--v-container) + var(--v-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--v-gutter);
}
.v-container--wide { max-width: calc(var(--v-container-wide) + var(--v-gutter) * 2); }
.v-container--text { max-width: calc(var(--v-container-text) + var(--v-gutter) * 2); }

.v-section       { padding-block: var(--v-section-y); }
.v-section--tight{ padding-block: var(--v-section-y-tight); }
.v-section--loose{ padding-block: var(--v-section-y-loose); }

.v-section--subtle  { background: var(--v-bg-subtle); }
.v-section--sunken  { background: var(--v-bg-sunken); }

/* Seção-pontuação preta. Inverte os tokens semânticos dentro do próprio bloco,
   então os componentes-filho funcionam sem nenhuma variante. */
.v-section--inverse {
  background: var(--v-ink-900);
  --v-bg:             var(--v-ink-900);
  --v-bg-subtle:      var(--v-ink-800);
  --v-surface:        var(--v-ink-800);
  --v-surface-subtle: var(--v-ink-800);
  --v-surface-hover:  var(--v-ink-700);
  --v-border:         var(--v-ink-700);
  --v-border-strong:  var(--v-gray-600);
  --v-text:           var(--v-white);
  --v-text-secondary: var(--v-gray-500);
  --v-text-tertiary:  var(--v-gray-600);
  --v-text-inverse:   var(--v-ink-900);
  --v-accent-text:    var(--v-white);
  --v-accent-hover:   color-mix(in srgb, var(--v-orange-500) 82%, var(--v-white));
  --v-focus:          var(--v-white);
  color: var(--v-white);
}

/* ---------------------------------------------------------------------------
   HERO COM ONDA

   A onda (`brand/SoundWave.svg`) é um terreno de pontos em perspectiva: o
   horizonte denso fica no topo do desenho e o primeiro plano rarefeito embaixo.
   Por isso ela vive ANCORADA NA BASE do hero — ali ela lê como chão.

   Entra como `mask-image`, não como <img> nem inline:
     - inline seriam 13.043 nós no DOM, e o custo de layout é real;
     - como <img> a cor ficaria travada no #e6e6e6 do arquivo e não trocaria
       de tema.
   Com máscara, o navegador rasteriza uma vez e a cor vem de --v-wave.

   O esmaecimento do topo é feito no GRADIENTE DE FUNDO, não com
   mask-composite: o suporte a composite ainda diverge entre navegadores e,
   sem ele, o fallback pinta um bloco sólido. Assim não há esse risco.
   ------------------------------------------------------------------------ */
.v-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* folga extra embaixo para o conteúdo não sentar em cima da faixa densa */
  padding-bottom: calc(var(--v-section-y-loose) + 4vw);
}
.v-hero > * { position: relative; z-index: 1; }

.v-hero__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  aspect-ratio: 2889.62 / 956.13;          /* proporção do arquivo — sem distorcer */
  /* O desenho ocupa a caixa inteira, mas só o terço de baixo fica visível:
     é o gradiente que o transforma numa FAIXA de base em vez de um fundo. */
  background: linear-gradient(to bottom, transparent 0%, transparent 42%, var(--v-wave) 78%);
  -webkit-mask: url("../brand/SoundWave.svg") center bottom / 100% 100% no-repeat;
          mask: url("../brand/SoundWave.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* Variante espelhada: a onda coroando o TOPO de uma seção. scaleY(-1) inverte
   máscara e gradiente juntos, então a faixa visível fica no alto e o terreno
   "pende do teto" — o espelho exato do hero. Mesmo peso, mesma cor, mesmo custo. */
.v-wave-cap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: calc(var(--v-section-y) + 6vw);
}
.v-wave-cap > * { position: relative; z-index: 1; }
.v-wave-cap__wave {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 0;
  aspect-ratio: 2889.62 / 956.13;
  background: linear-gradient(to bottom, transparent 0%, transparent 42%, var(--v-wave) 78%);
  -webkit-mask: url("../brand/SoundWave.svg") center bottom / 100% 100% no-repeat;
          mask: url("../brand/SoundWave.svg") center bottom / 100% 100% no-repeat;
  transform: scaleY(-1);
  pointer-events: none;
}

/* Em tela estreita a proporção 3:1 encolheria a onda a uma tira. A saída é
   deixá-la MAIS LARGA que o viewport (o overflow:hidden do contêiner corta as
   laterais): a 210% da largura, a altura dobra e a textura volta a existir.
   Nada disso toca o desktop. */
@media (max-width: 833px) {
  .v-hero__wave {
    left: 50%;
    right: auto;
    width: 210%;
    transform: translateX(-50%);
  }
  .v-wave-cap__wave {
    left: 50%;
    right: auto;
    width: 210%;
    transform: translateX(-50%) scaleY(-1);
  }
  /* folga extra para o conteúdo não sentar na faixa densa, agora mais alta */
  .v-hero     { padding-bottom: calc(var(--v-section-y-loose) + 16vw); }
  .v-wave-cap { padding-top: calc(var(--v-section-y) + 14vw); }
}

/* Medida de leitura. Todo parágrafo longo passa por aqui. */
.v-measure { max-width: var(--v-container-text); }
.v-measure--center { max-width: var(--v-container-text); margin-inline: auto; }

/* Grade de 12 colunas. Use os spans; não invente grid-template ad hoc. */
.v-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--v-grid-gap);
}
.v-col-3  { grid-column: span 3; }
.v-col-4  { grid-column: span 4; }
.v-col-6  { grid-column: span 6; }
.v-col-8  { grid-column: span 8; }
.v-col-12 { grid-column: span 12; }

@media (max-width: 833px) {
  .v-col-3, .v-col-4 { grid-column: span 6; }
  .v-col-6, .v-col-8 { grid-column: span 12; }
}
@media (max-width: 519px) {
  .v-col-3, .v-col-4, .v-col-6, .v-col-8 { grid-column: span 12; }
}

.v-stack { display: flex; flex-direction: column; }
.v-stack > * + * { margin-top: var(--v-stack-gap, var(--v-space-4)); }
.v-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v-space-3); }

.v-center { text-align: center; }
.v-center .v-measure { margin-inline: auto; }

.v-rule { height: var(--v-hairline); background: var(--v-border); border: 0; }

/* ---------------------------------------------------------------------------
   TIPOGRAFIA
   ------------------------------------------------------------------------ */
.v-d1, .v-d2, .v-d3, .v-d4, .v-h1, .v-h2, .v-h3 {
  font-family: var(--v-font-display);
  text-wrap: balance;
}

.v-d1 { font-size: var(--v-size-d1); line-height: var(--v-leading-display); letter-spacing: var(--v-tracking-d1); font-weight: var(--v-weight-bold); }
.v-d2 { font-size: var(--v-size-d2); line-height: 1.08; letter-spacing: var(--v-tracking-d2); font-weight: var(--v-weight-bold); }
.v-d3 { font-size: var(--v-size-d3); line-height: 1.12; letter-spacing: var(--v-tracking-d3); font-weight: var(--v-weight-bold); }
.v-d4 { font-size: var(--v-size-d4); line-height: 1.16; letter-spacing: var(--v-tracking-d4); font-weight: var(--v-weight-semibold); }

.v-h1 { font-size: var(--v-size-h1); line-height: var(--v-leading-title); letter-spacing: var(--v-tracking-title); font-weight: var(--v-weight-semibold); }
.v-h2 { font-size: var(--v-size-h2); line-height: 1.22; letter-spacing: var(--v-tracking-title); font-weight: var(--v-weight-semibold); }
.v-h3 { font-size: var(--v-size-h3); line-height: 1.28; letter-spacing: -0.014em; font-weight: var(--v-weight-semibold); }

.v-lead { font-size: var(--v-size-lead); line-height: 1.42; letter-spacing: -0.014em; color: var(--v-text-secondary); text-wrap: pretty; }
.v-body { font-size: var(--v-size-body); line-height: var(--v-leading-body); text-wrap: pretty; }
.v-sm   { font-size: var(--v-size-sm);   line-height: var(--v-leading-body); letter-spacing: var(--v-tracking-sm); }
.v-xs   { font-size: var(--v-size-xs);   line-height: var(--v-leading-snug); letter-spacing: var(--v-tracking-xs); }

/* Sobrelinha — o rótulo acima do título. Sempre caixa alta, 600, com tracking.
   Cinza: é subordinada ao título, não compete com ele. */
.v-eyebrow {
  font-family: var(--v-font-text);
  font-size: var(--v-size-2xs);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-caps);
  text-transform: uppercase;
  color: var(--v-text-secondary);
  display: block;
  margin-bottom: var(--v-space-4);
}
.v-eyebrow--strong { color: var(--v-text); }

.v-muted    { color: var(--v-text-secondary); }
.v-faint    { color: var(--v-text-tertiary); }  /* ≥24px ou não-essencial apenas */
.v-accented { color: var(--v-accent-text); }

/* Números. Tabular para alinhar coluna; sem tracking negativo excessivo. */
.v-num {
  font-family: var(--v-font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.02em;
}

.v-prose > * + *  { margin-top: var(--v-space-5); }
.v-prose h2, .v-prose h3 { margin-top: var(--v-space-10); }
/* Link em texto corrido: sublinhado obrigatório. O acento não é mais cor de
   texto, então nada além do sublinhado distingue um link do texto ao redor. */
.v-prose a {
  color: var(--v-accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--v-border-strong);
  transition: text-decoration-color var(--v-duration-fast) var(--v-ease);
}
.v-prose a:hover { text-decoration-color: currentColor; }

/* ---------------------------------------------------------------------------
   BOTÕES
   Pílula, 17px, altura mínima 44px (alvo de toque). Três níveis, só.

   REGRA DURA: o botão primário é laranja com texto #151518.
   Branco sobre #FF6E11 dá 2.80:1 e reprova. Nunca faça.
   ------------------------------------------------------------------------ */
.v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-2);
  min-height: 44px;
  padding: 0 var(--v-space-6);
  border: var(--v-hairline) solid transparent;
  border-radius: var(--v-radius-pill);
  font-family: var(--v-font-text);
  font-size: var(--v-size-body);
  font-weight: var(--v-weight-medium);
  letter-spacing: var(--v-tracking-body);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v-duration-fast) var(--v-ease),
              border-color var(--v-duration-fast) var(--v-ease),
              color var(--v-duration-fast) var(--v-ease),
              transform var(--v-duration-fast) var(--v-ease);
}
.v-btn:active { transform: scale(0.975); }
.v-btn:disabled, .v-btn[aria-disabled="true"] {
  opacity: 0.4; pointer-events: none;
}

.v-btn--primary {
  background: var(--v-accent);
  color: var(--v-on-accent);          /* #151518 — 6.50:1 */
  font-weight: var(--v-weight-semibold);
}
/* O hover só desloca o laranja — escurece no claro, clareia no escuro.
   O texto continua quase-preto nos dois casos. */
.v-btn--primary:hover { background: var(--v-accent-hover); }

.v-btn--secondary {
  background: var(--v-text);
  color: var(--v-bg);
}
.v-btn--secondary:hover { background: var(--v-text-secondary); }

.v-btn--ghost {
  background: transparent;
  color: var(--v-text);
  border-color: var(--v-border-strong);
}
.v-btn--ghost:hover { background: var(--v-surface-hover); border-color: var(--v-text-secondary); }

.v-btn--sm { min-height: 36px; padding: 0 var(--v-space-4); font-size: var(--v-size-sm); }
.v-btn--lg { min-height: 52px; padding: 0 var(--v-space-8); font-size: var(--v-size-lead); }

/* Link com chevron — o "Learn more ›" da Apple. Uso mais frequente que o botão.
   Na Apple é o azul que diz "isto é um link". Aqui não há cor de texto de acento,
   então o sublinhado é permanente e faz esse trabalho junto com o chevron. */
.v-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  color: var(--v-accent-text);
  font-size: var(--v-size-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--v-border-strong);
  transition: text-decoration-color var(--v-duration-fast) var(--v-ease);
}
.v-link:hover { text-decoration-color: currentColor; }
.v-link::after {
  content: "›";
  font-weight: var(--v-weight-medium);
  transition: transform var(--v-duration-fast) var(--v-ease-out);
}
.v-link:hover::after { transform: translateX(2px); }

/* ---------------------------------------------------------------------------
   NAVEGAÇÃO
   48px, translúcida com blur, texto 13px. Some no scroll? Não — fica.
   ------------------------------------------------------------------------ */
.v-nav {
  position: sticky;
  top: 0;
  z-index: var(--v-z-nav);
  height: var(--v-nav-height);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--v-bg) 78%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--v-hairline) solid var(--v-border);
}
.v-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-8);
  width: 100%;
}
.v-nav__logo { height: 20px; width: auto; color: var(--v-text); }
.v-nav__links { display: flex; align-items: center; gap: var(--v-space-8); list-style: none; }
.v-nav__link {
  font-size: var(--v-size-xs);
  color: var(--v-text);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--v-duration-fast) var(--v-ease);
}
.v-nav__link:hover { opacity: 1; }
/* Item ativo: peso + régua laranja. A cor de texto já não pode marcá-lo. */
.v-nav__link[aria-current="page"] {
  color: var(--v-text);
  opacity: 1;
  font-weight: var(--v-weight-medium);
  position: relative;
}
.v-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--v-accent);
}

/* --- Menu móvel ---------------------------------------------------------
   Abaixo de 834px os links viram um painel sob a barra, aberto pelo botão
   .v-nav__toggle. O estado vive no atributo data-open da própria .v-nav;
   o script só alterna o atributo e o aria-expanded — todo o resto é CSS. */
.v-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: calc(var(--v-space-2) * -1);
  border: 0;
  background: transparent;
  color: var(--v-text);
  border-radius: var(--v-radius-sm);
  cursor: pointer;
}
.v-nav__toggle .v-icon { --v-icon: var(--v-icon-lg); vertical-align: 0; }
.v-nav__toggle .v-icon--close { display: none; }
.v-nav[data-open] .v-nav__toggle .v-icon--open  { display: none; }
.v-nav[data-open] .v-nav__toggle .v-icon--close { display: inline-block; }

@media (max-width: 833px) {
  .v-nav__toggle { display: inline-flex; }
  .v-nav__links {
    display: none;
    position: absolute;
    top: var(--v-nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--v-bg);
    border-bottom: var(--v-hairline) solid var(--v-border);
    padding: var(--v-space-2) var(--v-gutter) var(--v-space-4);
  }
  .v-nav[data-open] .v-nav__links { display: flex; }
  .v-nav__links .v-nav__link {
    display: block;
    padding: var(--v-space-3) 0;
    font-size: var(--v-size-body);
    min-height: 44px;
  }
  .v-nav__link[aria-current="page"]::after { display: none; }
}

/* ---------------------------------------------------------------------------
   ÍCONES — Phosphor 2.1.1 (MIT)

   Os glifos do Phosphor são PREENCHIDOS, não traçados: não existe stroke-width
   para ajustar. A cor vem de `color` (via fill: currentColor) e o tamanho de
   width/height. Isso significa que um ícone dentro de .v-muted já fica cinza
   sozinho, e dentro de um botão já herda a cor do botão.

   Um peso por contexto, sem exceção:
     regular  → padrão, 20px e acima
     bold     → abaixo de 20px, onde o regular perde corpo
     fill     → estado ativo/selecionado, e só isso

   Nunca use thin, light ou duotone: não sustentam a sobriedade do sistema.
   ------------------------------------------------------------------------ */
.v-icon {
  display: inline-block;
  flex: none;                       /* nunca esmaga dentro de flex */
  width: var(--v-icon, var(--v-icon-md));
  height: var(--v-icon, var(--v-icon-md));
  fill: currentColor;
  vertical-align: -0.185em;         /* alinha ao texto ao redor */
}
.v-icon--sm  { --v-icon: var(--v-icon-sm); }
.v-icon--lg  { --v-icon: var(--v-icon-lg); }
.v-icon--xl  { --v-icon: var(--v-icon-xl); }
.v-icon--2xl { --v-icon: var(--v-icon-2xl); }

/* Ícone dentro de botão e link acompanha o texto e não precisa de ajuste. */
.v-btn .v-icon, .v-link .v-icon { --v-icon: var(--v-icon-md); vertical-align: -0.16em; }
.v-btn--sm .v-icon { --v-icon: var(--v-icon-sm); }

/* Ícone puramente decorativo — some para leitor de tela.
   Quando o ícone É a informação (botão só de ícone), use aria-label no
   controle e NÃO esta classe. */
.v-icon[aria-hidden="true"] { pointer-events: none; }

/* Placa de ícone — o quadrado de contorno da referência Apple. */
.v-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 1.5px solid var(--v-text);
  border-radius: var(--v-radius-md);
  color: var(--v-text);
}
.v-icon-tile .v-icon { --v-icon: var(--v-icon-xl); vertical-align: 0; }
.v-icon-tile--accent { background: var(--v-accent); border-color: transparent; color: var(--v-on-accent); }

/* ---------------------------------------------------------------------------
   ASSINATURA DE PRODUTO

   O logo é só a wordmark "V12X". O nome completo "V12X Labs" aparece em texto,
   e a assinatura é o lugar onde os dois se encontram: a marca em cima, o nome
   embaixo, escrito.

   Ela é TIPOGRÁFICA de propósito — composta ao vivo, sem arquivo próprio. Um
   arquivo de assinatura viraria um segundo logo, que é exatamente o que a
   decisão de manter "Labs" fora da marca evita.
   ------------------------------------------------------------------------ */
.v-signature {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--v-space-3);
}
.v-signature__mark {
  height: 18px;
  width: auto;
  color: var(--v-text);
}
.v-signature__name {
  font-size: var(--v-size-xs);
  letter-spacing: var(--v-tracking-xs);
  color: var(--v-text-secondary);
}
/* Em linha, para rodapé estreito. A régua separa marca de texto. */
.v-signature--inline {
  flex-direction: row;
  align-items: center;
  gap: var(--v-space-4);
}
.v-signature--inline .v-signature__name {
  padding-left: var(--v-space-4);
  border-left: var(--v-hairline) solid var(--v-border-strong);
}

/* ---------------------------------------------------------------------------
   CARD
   Hairline + fundo. Sombra só quando o card flutua de verdade.
   ------------------------------------------------------------------------ */
.v-card {
  background: var(--v-surface);
  border: var(--v-hairline) solid var(--v-border);
  border-radius: var(--v-radius-lg);
  padding: var(--v-space-8);
  transition: border-color var(--v-duration-base) var(--v-ease),
              background var(--v-duration-base) var(--v-ease);
}
.v-card--subtle { background: var(--v-surface-subtle); border-color: transparent; }
.v-card--xl     { border-radius: var(--v-radius-xl); padding: var(--v-space-12); }
.v-card--link   { text-decoration: none; color: inherit; display: block; }
.v-card--link:hover { border-color: var(--v-border-strong); }
.v-card__title  { margin-bottom: var(--v-space-3); }
.v-card__body   { color: var(--v-text-secondary); font-size: var(--v-size-sm); }

/* ---------------------------------------------------------------------------
   MÉTRICA
   O componente mais usado da V12X — o número é o argumento.
   ------------------------------------------------------------------------ */
.v-metric { display: flex; flex-direction: column; gap: var(--v-space-2); }
.v-metric__value {
  font-family: var(--v-font-display);
  font-size: var(--v-size-d3);
  font-weight: var(--v-weight-bold);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--v-text);
}
/* Destaque de métrica. O número NÃO fica laranja: #FF6E11 sobre branco dá 2.80:1
   e reprova até o mínimo de 3:1 para texto grande. O laranja entra como régua,
   que é preenchimento — a ênfase continua, a leitura não se perde. */
.v-metric__value--accent { position: relative; padding-top: var(--v-space-4); }
.v-metric__value--accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--v-accent);
}
.v-metric__label { font-size: var(--v-size-sm); color: var(--v-text-secondary); }
/* Secundário, não terciário: a nota carrega informação real ("276 testes no
   núcleo"), e terciário a 13px daria 3.16:1 — reprova AA. */
.v-metric__note  { font-size: var(--v-size-xs); color: var(--v-text-secondary); }

/* ---------------------------------------------------------------------------
   SELO E PÍLULA DE FILTRO
   ------------------------------------------------------------------------ */
.v-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--v-space-1);
  padding: var(--v-space-1) var(--v-space-3);
  border-radius: var(--v-radius-pill);
  background: var(--v-surface-subtle);
  border: var(--v-hairline) solid var(--v-border);
  color: var(--v-text-secondary);
  font-size: var(--v-size-2xs);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-caps);
  text-transform: uppercase;
  line-height: 1.6;
}
.v-badge--accent { background: var(--v-accent); border-color: transparent; color: var(--v-on-accent); }
.v-badge--outline{ background: transparent; border-color: var(--v-accent-text); color: var(--v-accent-text); }

.v-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--v-space-5);
  border-radius: var(--v-radius-pill);
  border: var(--v-hairline) solid var(--v-border-strong);
  background: transparent;
  color: var(--v-text);
  font-size: var(--v-size-sm);
  cursor: pointer;
  transition: all var(--v-duration-fast) var(--v-ease);
}
.v-chip:hover { border-color: var(--v-text-secondary); }
.v-chip[aria-pressed="true"] {
  background: var(--v-text);
  border-color: var(--v-text);
  color: var(--v-bg);
  font-weight: var(--v-weight-medium);
}

/* ---------------------------------------------------------------------------
   TABELA
   Sem zebra. Régua horizontal fina, cabeçalho em caixa alta pequena.
   ------------------------------------------------------------------------ */
.v-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--v-size-sm);
  text-align: left;
}
.v-table th {
  padding: var(--v-space-3) var(--v-space-4);
  border-bottom: var(--v-hairline) solid var(--v-border-strong);
  font-size: var(--v-size-2xs);
  font-weight: var(--v-weight-semibold);
  letter-spacing: var(--v-tracking-caps);
  text-transform: uppercase;
  color: var(--v-text-secondary);
  white-space: nowrap;
}
.v-table td {
  padding: var(--v-space-4);
  border-bottom: var(--v-hairline) solid var(--v-border);
  vertical-align: baseline;
}
.v-table tr:last-child td { border-bottom: 0; }
.v-table .v-td-num { font-variant-numeric: tabular-nums; text-align: right; }
.v-table th:first-child, .v-table td:first-child { padding-left: 0; }
.v-table th:last-child,  .v-table td:last-child  { padding-right: 0; }

/* ---------------------------------------------------------------------------
   FORMULÁRIO
   ------------------------------------------------------------------------ */
.v-field { display: flex; flex-direction: column; gap: var(--v-space-2); }
.v-label { font-size: var(--v-size-sm); font-weight: var(--v-weight-medium); color: var(--v-text); }
.v-input {
  min-height: 48px;
  padding: var(--v-space-3) var(--v-space-4);
  background: var(--v-bg);
  border: var(--v-hairline) solid var(--v-border-strong);
  border-radius: var(--v-radius-md);
  color: var(--v-text);
  font-size: var(--v-size-body);
  transition: border-color var(--v-duration-fast) var(--v-ease),
              box-shadow var(--v-duration-fast) var(--v-ease);
}
.v-input::placeholder { color: var(--v-text-tertiary); }
.v-input:focus {
  outline: none;
  border-color: var(--v-focus);
  box-shadow: var(--v-focus-ring);
}
/* Erro. A paleta não tem vermelho e o laranja não escreve, então o estado é
   carregado por borda forte + texto. Cor sozinha nunca comunicaria isto. */
.v-input[aria-invalid="true"] { border-color: var(--v-text); border-width: 2px; }
.v-help { font-size: var(--v-size-xs); color: var(--v-text-secondary); }

/* ---------------------------------------------------------------------------
   REVELAR (accordion)
   ------------------------------------------------------------------------ */
.v-disclosure { border-bottom: var(--v-hairline) solid var(--v-border); }
.v-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--v-space-4);
  padding: var(--v-space-5) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--v-size-body);
  font-weight: var(--v-weight-medium);
}
.v-disclosure__summary::-webkit-details-marker { display: none; }
.v-disclosure__summary::after {
  content: "+";
  font-size: var(--v-size-lead);
  color: var(--v-text-secondary);
  line-height: 1;
  transition: transform var(--v-duration-base) var(--v-ease-out);
}
.v-disclosure[open] .v-disclosure__summary::after { transform: rotate(45deg); }
.v-disclosure__body { padding-bottom: var(--v-space-5); color: var(--v-text-secondary); font-size: var(--v-size-sm); }

/* ---------------------------------------------------------------------------
   CITAÇÃO
   ------------------------------------------------------------------------ */
.v-quote {
  border-left: 2px solid var(--v-accent);
  padding-left: var(--v-space-6);
  font-family: var(--v-font-display);
  font-size: var(--v-size-d4);
  font-weight: var(--v-weight-medium);
  line-height: 1.3;
  letter-spacing: var(--v-tracking-d4);
  text-wrap: balance;
}
.v-quote__cite {
  display: block;
  margin-top: var(--v-space-4);
  font-family: var(--v-font-text);
  font-size: var(--v-size-sm);
  font-weight: var(--v-weight-regular);
  letter-spacing: var(--v-tracking-sm);
  color: var(--v-text-secondary);
  font-style: normal;
}

/* ---------------------------------------------------------------------------
   RODAPÉ
   ------------------------------------------------------------------------ */
.v-footer {
  background: var(--v-bg-sunken);
  padding-block: var(--v-space-16) var(--v-space-10);
  font-size: var(--v-size-xs);
  color: var(--v-text-secondary);
}
.v-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--v-space-10) var(--v-space-8);
  padding-bottom: var(--v-space-10);
  border-bottom: var(--v-hairline) solid var(--v-border-strong);
}
.v-footer__title { color: var(--v-text); font-weight: var(--v-weight-semibold); margin-bottom: var(--v-space-3); }
.v-footer__list { list-style: none; display: flex; flex-direction: column; gap: var(--v-space-2); }
.v-footer__link { color: var(--v-text-secondary); text-decoration: none; }
.v-footer__link:hover { color: var(--v-text); text-decoration: underline; text-underline-offset: 3px; }
.v-footer__base { padding-top: var(--v-space-6); display: flex; flex-wrap: wrap; gap: var(--v-space-4); justify-content: space-between; }

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE
   ------------------------------------------------------------------------ */
.v-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.v-skip {
  position: absolute; top: var(--v-space-2); left: var(--v-space-2);
  z-index: var(--v-z-toast);
  transform: translateY(-200%);
  background: var(--v-accent); color: var(--v-on-accent);
  padding: var(--v-space-3) var(--v-space-5);
  border-radius: var(--v-radius-md);
  font-weight: var(--v-weight-semibold);
  text-decoration: none;
}
.v-skip:focus { transform: translateY(0); }