/* ---- cores.css ---- */
/* Sem verde no site: os verdes herdados do layout e o destaque dos componentes viram o azul da marca (02 #116BF8).
   Vale em todas as páginas; na home, o tema-flowing.css (carregado depois) refina com a paleta completa. */
html:root,
html:root[data-theme] {
  --color-kt-green-accent: #116bf8;
  --color-kt-green-400: #21bcee;
  --color-kt-green-600: #116bf8;
  --color-kt-green-700: #116bf8;
  --color-kt-green-800: #052698;
  --color-kt-green-850: #052698;
  --color-kt-green-900: #031452;
  --color-kt-green-a10: #116bf81a;
  --color-kt-green-a20: #116bf833;
  --color-kt-green-a30: #116bf84d;
  --kt-text-brand: #21bcee;   /* texto de destaque em fundo escuro: ciano (01), com contraste */
  --kt-bg-brand: #116bf8;
  --kt-apple: #116bf8;
  --primary: #116bf8;
  --vy-destaque: #116bf8;
  --vy-destaque-rgb: 17 107 248;
}

/* Rolagem suave ao clicar em links de âncora (menu, "Ver as fases", índice das páginas jurídicas
   etc.): em vez de pular direto, a página desliza até o destino. Também conta pro scroll que o
   JavaScript dispara (ex.: ao ir para a pergunta do diagnóstico). Desativada para quem pede menos
   movimento na tela (prefers-reduced-motion), como recomenda a acessibilidade. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- tema-flowing.css ---- */
/* Tema Flowing: paleta oficial aplicada sobre o layout.
   Principais: 07 #000000 · 06 #FFFFFF · 04 #DCE3EB · 05 #878EA0
   Detalhes:   01 #21BCEE · 02 #116BF8 · 03 #052698
   Ativado com <html data-tema="flowing"> (o seletor duplo vence o tema "legacy" do layout). */
html[data-tema="flowing"],
html[data-tema="flowing"][data-theme] {
  /* Paleta */
  --vy-07: #000000;
  --vy-06: #ffffff;
  --vy-04: #dce3eb;
  --vy-05: #878ea0;
  --vy-01: #21bcee;
  --vy-02: #116bf8;
  --vy-03: #052698;
  /* Derivados da paleta (só onde a cor pura não tem contraste ou precisa de profundidade) */
  --vy-05-escuro: #5a6072;     /* 05 escurecido: texto secundário em fundo claro (contraste AA) */
  --vy-04-linha: #c3ccd8;      /* 04 escurecido: bordas em fundo claro */
  --vy-superficie: #0a0e1a;    /* 07 com um toque de 03: cartões em fundo escuro */
  --vy-superficie-2: #121a2e;  /* hover / superfícies elevadas */
  --vy-linha-escura: #1e2638;  /* bordas em fundo escuro */

  /* Escala neutra do layout → paleta */
  --color-kt-neutral-100: var(--vy-06);
  --color-kt-neutral-200: var(--vy-04);
  --color-kt-neutral-300: var(--vy-04);
  --color-kt-neutral-400: var(--vy-04-linha);
  --color-kt-neutral-500: var(--vy-04);
  --color-kt-neutral-600: var(--vy-05);
  --color-kt-neutral-700: var(--vy-05-escuro);
  --color-kt-neutral-800: var(--vy-linha-escura);
  --color-kt-neutral-900: var(--vy-superficie);
  --color-kt-neutral-petrol: var(--vy-superficie);

  /* Verdes do layout → azuis da paleta */
  --color-kt-green-accent: var(--vy-01);
  --color-kt-green-400: var(--vy-01);
  --color-kt-green-600: var(--vy-01);
  --color-kt-green-700: var(--vy-02);
  --color-kt-green-800: var(--vy-03);
  --color-kt-green-850: var(--vy-03);
  --color-kt-green-900: #031452;
  --color-kt-green-a10: #21bcee1a;
  --color-kt-green-a20: #21bcee33;
  --color-kt-green-a30: #21bcee4d;

  /* Âmbar do layout (etiquetas e alertas dos painéis) → paleta */
  --color-kt-amber-200: var(--vy-04);
  --color-kt-amber-300: var(--vy-01);
  --color-kt-amber-600: var(--vy-02);
  --color-kt-amber-900: #031452;

  /* Tokens de uso */
  --kt-text-secondary: var(--vy-04);
  --kt-text-tertiary: var(--vy-05);
  --kt-text-brand: var(--vy-01);
  --kt-text-link: var(--vy-01);
  --kt-icon-secondary: var(--vy-05);
  --kt-icon-brand: var(--vy-01);
  --kt-bg-brand: var(--vy-02);
  --kt-bg-card: var(--vy-superficie);
  --kt-bg-card-hover: var(--vy-superficie-2);
  --kt-bg-secondary: var(--vy-superficie-2);
  --kt-bg-dark: var(--vy-superficie);
  --kt-border-default: var(--vy-linha-escura);
  --kt-border-muted: #2a3348;
  --kt-border-control: #2a3348;
  --kt-border-accent: var(--vy-05);
  --kt-border-weak: #dce3eb1f;
  --kt-nav-border: var(--vy-linha-escura);
  --kt-shadow-md: 0 4px 20px #05269840, 0 1px 16px #0000001a;
  --kt-shadow-lg: 0 8px 32px #05269859, 0 2px 20px #00000029;
  --kt-gradient-text: linear-gradient(90deg, #fff, var(--vy-05));
  --kt-button-primary-bg: var(--vy-02);
  --kt-button-primary-text: var(--vy-06);

  --kt-on-light-band: var(--vy-06);
  --kt-on-light-band-alt: var(--vy-06);
  --kt-on-light-band-deep: var(--vy-04);
  --kt-on-light-card: var(--vy-04);
  --kt-on-light-card-hover: var(--vy-04-linha);
  --kt-on-light-text: var(--vy-07);
  --kt-on-light-text-muted: var(--vy-05-escuro);
  --kt-on-light-brand: var(--vy-03);
  --kt-on-light-border: var(--vy-04-linha);
  --kt-on-light-border-control: var(--vy-05-escuro);
  --kt-banner-link-hover: var(--vy-03);

  --kt-decor-crest: #21bcee80;
  --kt-decor-trough: #116bf812;
  --kt-decor-head: radial-gradient(15% 40% at 48% -6%, #116bf880, #05269859 60%, transparent 80%);
  --kt-decor-haze: radial-gradient(16% 26% at 49% 24%, #21bcee3d, transparent 75%);
  --kt-decor-bloom: radial-gradient(20% 34% at 63% 2%, #dce3eb85, transparent 70%);

  /* Variáveis dos componentes da Flowing */
  --vy-destaque: var(--vy-01);
  --vy-destaque-rgb: 33 188 238;
  --vy-destaque-claro: var(--vy-03);
  --vy-card: var(--vy-superficie);
  --vy-card-hover: var(--vy-superficie-2);
  --vy-fundo-centro: var(--vy-superficie);
  --vy-texto-2: var(--vy-05);
  --vy-texto-3: var(--vy-05);
  --vy-texto-suave: var(--vy-04);
  --vy-texto-claro-2: var(--vy-05-escuro);
  --vy-borda-clara: var(--vy-04-linha);
  --vy-fundo-claro: var(--vy-04);
  --vy-borda-form: var(--vy-04-linha);
  --vy-fundo-campo: var(--vy-04);
}

/* Seleção de texto e foco no azul da marca */
html[data-tema="flowing"] ::selection { background: var(--vy-02); color: var(--vy-06); }
html[data-tema="flowing"] :focus-visible { outline-color: var(--vy-01); }

/* Botão do menu: mesma cor de ação (02) de todos os botões principais */
html[data-tema="flowing"] nav a[data-variant="accent"] { background-color: var(--vy-02); color: var(--vy-06); }
html[data-tema="flowing"] nav a[data-variant="accent"]:hover { background-color: #0d5fe0; }

/* Números: o "+" em fundo claro usa o 02 (o ciano não tem contraste suficiente sobre branco) */
html[data-tema="flowing"] .vy-prefixo { color: var(--vy-02); }

/* Botão de ação do diagnóstico: mesmo azul dos botões principais */
html[data-tema="flowing"] .vy-diag-cta { background: var(--vy-02); color: var(--vy-06); }

/* Centro da órbita: gradiente 03 → 02, com brilho ciano */
html[data-tema="flowing"] .vy-centro {
  background: radial-gradient(circle at 50% 30%, var(--vy-02) 0%, var(--vy-03) 55%, var(--vy-07) 100%);
  border-color: #21bcee73;
}

/* ---- rodape.css ---- */
/* Rodapé: alinhamento dos botões do topo com as colunas de links no celular
   (os links usam 2 colunas com 2rem de espaço; os botões usavam 0.75rem e ficavam fora da 2ª coluna) */
@media (max-width: 767px) {
  footer .vy-rodape-botoes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
  footer .vy-rodape-botoes > a { width: 100%; }
}

/* ---- idioma.css ---- */
/* Seletor de idioma do cabeçalho: botão (globo) + menu com PT/EN, no mesmo formato do layout original. */
.vy-idioma { position: relative; display: inline-flex; }
.vy-idioma-botao { cursor: pointer; background: none; border: 0; }
.vy-idioma-botao[aria-expanded="true"] svg.lucide-chevron-down { transform: rotate(180deg); }

.vy-idioma-menu {
  position: absolute;
  top: calc(100% + 10px);
  /* à direita do botão, nunca ao centro: numa tela estreita, um menu centralizado passa da borda
     e cria rolagem lateral na página inteira. Crescendo pra esquerda, ele nunca sai da tela. */
  right: 0;
  max-width: calc(100vw - 2rem);
  z-index: 40;
  margin: 0;
  padding: 6px;
  min-width: 9.5rem;
  list-style: none;
  background: #0b0e16;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.vy-idioma-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  color: #dce3eb;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.vy-idioma-item:hover,
.vy-idioma-item:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; outline: none; }
.vy-idioma-item.vy-idioma-atual { color: #fff; font-weight: 600; }
.vy-idioma-item.vy-idioma-atual::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vy-destaque, #116bf8);
}

/* ---- numeros.css ---- */
/* Faixa de números (seção "Marcas de 7 países confiam na Flowing...") */
.vy-numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .vy-numeros { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .vy-numero { padding: 0.25rem 2rem; border-left: 1px solid var(--vy-borda-clara, #d6d6d6); }
  .vy-numero:first-child { border-left: 0; padding-left: 0; }
}

.vy-numero { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }

.vy-valor {
  font-family: gtPlanarWordmark, "gtPlanarWordmark Fallback", "Instrument Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #000;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vy-prefixo { color: var(--vy-destaque, #116bf8); }

.vy-legenda {
  font-family: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vy-texto-claro-2, #616161);
  max-width: 15rem;
}

/* Países girando: uma linha fixa, o nome sobe e é trocado pelo próximo */
.vy-ticker {
  display: inline-block;
  height: 1.4em;
  overflow: hidden;
  vertical-align: bottom;
  color: #000;
  font-weight: 500;
}
.vy-ticker-item { display: block; }
.vy-ticker-item.vy-troca { animation: vy-troca 0.8s cubic-bezier(.2,.8,.2,1); }
/* sobe e some, troca o texto no meio (feito no JS), entra por baixo */
@keyframes vy-troca {
  0% { transform: translateY(0); opacity: 1; }
  45% { transform: translateY(-100%); opacity: 0; }
  55% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- rede.css ---- */
/* Rede de plataformas (seção "Dominamos as principais plataformas do mercado").
   Cores em variáveis: para o tom lilás da referência, troque por --vy-rede-forte:#9a7ed6; --vy-rede-medio:#c6b6ea; --vy-rede-claro:#e4dcf4. */
.vy-rede {
  --vy-rede-card: transparent; /* sem fundo: a rede fica direto sobre a seção escura */
  --vy-rede-anel: #f8f9fb;
  --vy-rede-forte: #3d7ef9;
  --vy-rede-medio: #8fb4fb;
  --vy-rede-claro: #d9e5fd;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}
.vy-rede svg { display: block; width: 100%; height: auto; }
/* visual à esquerda no desktop, alternando com o globo da seção anterior (que fica à direita) */
@media (min-width: 1024px) { .vy-rede { order: -1; } }

.vy-rede-card { fill: var(--vy-rede-card); }
.vy-rede-anel { fill: var(--vy-rede-anel); }
.vy-rede-forte { stop-color: var(--vy-rede-forte); }
.vy-rede-medio { stop-color: var(--vy-rede-medio); }
.vy-rede-claro { stop-color: var(--vy-rede-claro); }
.vy-rede-bolinha { fill: var(--vy-rede-claro); opacity: 0.75; }
.vy-rede-pilula { fill: var(--vy-rede-forte); opacity: 0.85; }

.vy-rede-logo circle { stroke: rgb(0 0 0 / 5%); stroke-width: 1; }
.vy-rede-logo { transform-box: fill-box; transform-origin: center; transition: scale 0.25s ease; }
.vy-rede-logo:hover { scale: 1.06; }
@media (prefers-reduced-motion: reduce) { .vy-rede-logo { transition: none; } }

/* legenda ao lado do título */
.vy-legenda-rede { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; color: var(--vy-texto-2, #929292); }
.vy-legenda-rede li { display: flex; align-items: center; gap: 0.5rem; }
.vy-legenda-rede li::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.vy-legenda-rede li:first-child::before { background: linear-gradient(135deg, #d9e5fd, #3d7ef9); }
.vy-legenda-rede li:last-child::before { background: #fff; box-shadow: 0 0 0 3px #f8f9fb33; }
.vy-rede-outras { margin: 0; max-width: 32rem; font-size: 0.9375rem; line-height: 1.6; color: var(--vy-texto-2, #929292); }

/* ---- faq.css ---- */
/* Ícone +/− do FAQ (o original vinha quebrado do clone) */
.vy-faq-icone { position: relative; width: 16px; height: 16px; flex: none; color: var(--vy-texto-claro-2, #616161); }
.vy-faq-icone::before,
.vy-faq-icone::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  margin-top: -0.75px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s ease-out;
}
.vy-faq-icone::after { transform: rotate(90deg); }
[data-state="open"] > .vy-faq-icone::after { transform: rotate(0deg); }
[data-slot="accordion-trigger"]:hover .vy-faq-icone { color: var(--vy-destaque-claro, #0d4b4a); }

/* Respostas: mais altura de linha e respiro antes da próxima pergunta */
[data-slot="accordion-content"] p { line-height: 1.7; }
[data-slot="accordion-content"] [data-accordion-panel] > div > div { padding-top: 0.25rem; padding-bottom: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .vy-faq-icone::before, .vy-faq-icone::after { transition: none; } }

/* ---- relatorio.css ---- */
/* Seção "Por que escolher a Flowing": ícones dos diferenciais + painel de relatório (paleta Flowing) */
.vy-dif-icone {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.25rem;
  border-radius: 12px;
  background: rgb(17 107 248 / 10%);
  color: #116bf8;
}
.vy-dif-icone svg { width: 22px; height: 22px; }

.vy-relatorio-wrap { position: relative; width: 100%; padding-bottom: 2.5rem; }
.vy-relatorio {
  position: relative;
  overflow: hidden;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background:
    radial-gradient(90% 70% at 100% 0%, rgb(17 107 248 / 28%), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgb(5 38 152 / 35%), transparent 70%),
    #0a0e1a;
  border: 1px solid #1e2638;
  box-shadow: 0 30px 60px -20px rgb(5 38 152 / 45%);
  color: #fff;
  font-family: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
}
@media (min-width: 768px) { .vy-relatorio { padding: 2rem; } }
/* espaço livre no rodapé do painel para o cartão flutuante não cobrir conteúdo */
.vy-relatorio { padding-bottom: 4.5rem; }
@media (min-width: 768px) { .vy-relatorio { padding-bottom: 4.5rem; } }

.vy-rel-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.vy-rel-topo strong { display: block; font-size: 1.125rem; font-weight: 500; }
.vy-rel-topo small { display: block; margin-top: 0.2rem; color: #878ea0; font-size: 0.8rem; }
.vy-rel-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgb(33 188 238 / 12%);
  color: #21bcee;
  font-size: 0.8rem;
  white-space: nowrap;
}
.vy-rel-selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #21bcee; box-shadow: 0 0 0 3px rgb(33 188 238 / 25%); }

.vy-rel-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; margin-top: 1.5rem; }
.vy-rel-kpi { padding: 0.8rem; border-radius: 0.875rem; background: rgb(220 227 235 / 5%); border: 1px solid rgb(220 227 235 / 7%); }
.vy-rel-kpi small { display: block; color: #878ea0; font-size: 0.75rem; }
.vy-rel-kpi b { display: block; margin-top: 0.3rem; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vy-rel-kpi em { display: block; margin-top: 0.15rem; color: #21bcee; font-size: 0.75rem; font-style: normal; }

.vy-rel-grafico { display: block; width: 100%; height: auto; margin-top: 1.25rem; }
.vy-rel-grafico text { fill: #878ea0; font: 11px "Instrument Sans", sans-serif; }
.vy-rel-legenda { display: flex; gap: 1rem; margin-top: 0.5rem; color: #878ea0; font-size: 0.78rem; }
.vy-rel-legenda span { display: inline-flex; align-items: center; gap: 0.4rem; }
.vy-rel-legenda i { width: 14px; height: 0; border-top: 2px solid #21bcee; }
.vy-rel-legenda i.vy-azul { border-top-color: #116bf8; }

.vy-rel-lista { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.25rem 0 0; padding: 1rem 0 0; list-style: none; border-top: 1px solid #1e2638; }
.vy-rel-lista li { display: flex; align-items: center; gap: 0.6rem; color: #dce3eb; font-size: 0.875rem; }
.vy-rel-lista li::before {
  content: "✓";
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #116bf8;
  color: #fff;
  font-size: 0.65rem;
}
.vy-rel-nota { position: absolute; right: 1.25rem; bottom: 0.9rem; color: #5a6072; font-size: 0.7rem; }

/* Cartão flutuante: otimização da semana */
.vy-rel-flutuante {
  position: absolute;
  left: -0.75rem;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 20rem;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 16px 40px rgb(5 38 152 / 22%), 0 2px 8px rgb(0 0 0 / 8%);
  color: #000;
  animation: vy-flutua 5s ease-in-out infinite;
}
.vy-rel-flutuante .vy-dif-icone { width: 36px; height: 36px; margin: 0; border-radius: 10px; }
.vy-rel-flutuante .vy-dif-icone svg { width: 18px; height: 18px; }
.vy-rel-flutuante small { display: block; color: #5a6072; font-size: 0.72rem; }
.vy-rel-flutuante strong { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.3; }
@media (min-width: 1024px) { .vy-rel-flutuante { left: -2rem; } }
@keyframes vy-flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .vy-rel-flutuante { animation: none; } }

/* ---- depoimentos.css ---- */
/* Depoimentos: layout original (grade, avatar + @, texto). Aqui só o avatar de iniciais e a etiqueta de rascunho. */
.vy-dep-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #116bf8 0%, #052698 75%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Depoimento ainda não aprovado pelo cliente ("rascunho": true em conteudo.json) */
.vy-dep-rascunho {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgb(255 214 10 / 14%);
  color: #ffd60a;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

/* ---- diagnostico.css ---- */
/* Diagnóstico rápido (no lugar da antiga calculadora) */
.vy-diag {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 30rem;
  padding: 1.5rem;
  border-radius: 1.5rem;
  background: var(--vy-card, #131313);
  color: #fff;
  font-family: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
}
@media (min-width: 768px) { .vy-diag { padding: 2rem; } }

.vy-diag-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.875rem; color: var(--vy-texto-2, #929292); }
.vy-diag-voltar { background: none; border: 0; padding: 0; color: var(--vy-texto-2, #929292); font: inherit; cursor: pointer; }
.vy-diag-voltar:hover { color: #fff; }
.vy-diag-voltar[hidden] { display: none; }

.vy-diag-barra { height: 2px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.vy-diag-barra span { display: block; height: 100%; background: var(--vy-destaque, #116bf8); transition: width 0.4s ease; }

.vy-diag-pergunta {
  margin: 0;
  font-family: gtPlanarWordmark, "gtPlanarWordmark Fallback", "Instrument Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.vy-diag-opcoes { display: flex; flex-direction: column; gap: 0.625rem; }
.vy-diag-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.vy-diag-opcao::after { content: "→"; color: var(--vy-texto-2, #929292); transition: transform 0.2s, color 0.2s; }
.vy-diag-opcao:hover, .vy-diag-opcao:focus-visible { border-color: var(--vy-destaque, #116bf8); background: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.08); outline: none; }
.vy-diag-opcao:hover::after, .vy-diag-opcao:focus-visible::after { color: var(--vy-destaque, #116bf8); transform: translateX(3px); }
.vy-diag-opcao.vy-marcada { border-color: var(--vy-destaque, #116bf8); background: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.15); }

.vy-diag-passo { display: flex; flex-direction: column; gap: 1.5rem; animation: vy-diag-entra 0.35s ease; }
@keyframes vy-diag-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Resultado */
.vy-diag-rotulo { font-size: 0.875rem; color: var(--vy-destaque, #116bf8); }
.vy-diag-fase { color: var(--vy-destaque, #116bf8); }
.vy-diag-prioridades { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; counter-reset: prioridade; }
.vy-diag-prioridades li { display: flex; gap: 0.75rem; color: var(--vy-borda-clara, #d6d6d6); line-height: 1.4; counter-increment: prioridade; }
.vy-diag-prioridades li::before {
  content: counter(prioridade);
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.15);
  color: var(--vy-destaque, #116bf8);
  font-size: 0.8rem;
}
.vy-diag-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 1.5rem;
  border-radius: 999px;
  background: var(--vy-destaque, #116bf8);
  color: #000;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s;
}
.vy-diag-cta:hover { opacity: 0.9; }
.vy-diag-refazer { align-self: center; background: none; border: 0; color: var(--vy-texto-2, #929292); font: inherit; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.vy-diag-refazer:hover { color: #fff; }
.vy-diag-nota { margin: 0; font-size: 0.8rem; color: var(--vy-texto-claro-2, #616161); text-align: center; }
/* ---- widget-contato.css ---- */
/* Janela flutuante "Fale com a Flowing" (formulário do CRM em iframe) — paleta Flowing */
.vy-lead,
.vy-lead * { box-sizing: border-box; }

.vy-lead {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid #1e2638;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(5 38 152 / 35%), 0 4px 18px rgb(0 0 0 / 30%);
  color: #000;
  font-family: "Instrument Sans", "Instrument Sans Fallback", Arial, sans-serif;
  animation: vy-lead-entra 0.35s ease-out;
}
.vy-lead[hidden] { display: none; }
@keyframes vy-lead-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.vy-lead-topo {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 32px;
  gap: 12px;
  align-items: center;
  min-height: 78px;
  padding: 14px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(17 107 248 / 45%), transparent 60%),
    #000;
  color: #fff;
}
.vy-lead-marca {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #116bf8 0%, #052698 70%);
  box-shadow: 0 0 0 2px rgb(33 188 238 / 45%);
}
.vy-lead-marca img { width: 44%; height: auto; }
.vy-lead-titulos { display: grid; gap: 3px; min-width: 0; }
.vy-lead-titulos strong { font-size: 16px; font-weight: 500; line-height: 1.25; }
.vy-lead-titulos span { color: #dce3eb; font-size: 12.5px; line-height: 1.45; }

.vy-lead-fechar {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #dce3eb;
  cursor: pointer;
  font: 300 24px/1 Arial, sans-serif;
  transition: background 0.2s, color 0.2s;
}
.vy-lead-fechar:hover,
.vy-lead-fechar:focus-visible { background: rgb(220 227 235 / 14%); color: #fff; outline: none; }

.vy-lead-corpo { flex: 1; min-height: 0; overflow-y: auto; background: #fff; }
.vy-lead-corpo iframe { display: block; width: 100%; height: var(--vy-lead-altura, 520px); border: 0; background: #fff; }

.vy-lead-rodape {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 10px 16px;
  border-top: 1px solid #dce3eb;
  background: #fff;
  color: #878ea0;
  font-size: 12.5px;
  line-height: 1;
}
.vy-lead-rodape strong { color: #052698; font-size: 15px; font-weight: 700; }
.vy-lead-yollo { text-decoration: none; }
.vy-lead-yollo:hover strong, .vy-lead-yollo:focus-visible strong { color: #116bf8; text-decoration: underline; text-underline-offset: 3px; }
.vy-lead-whats {
  padding: 8px 12px;
  border-radius: 999px;
  background: #116bf8;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.vy-lead-whats[hidden] { display: none; }

/* Botão para reabrir: logo do WhatsApp em destaque + barrinha com a mensagem ao lado */
.vy-lead-abrir {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: 500 15px/1.2 "Instrument Sans", Arial, sans-serif;
}
.vy-lead-abrir[hidden] { display: none; }
.vy-lead-abrir:focus-visible { outline: none; }
.vy-lead-abrir:focus-visible .vy-lead-icone { outline: 2px solid #116bf8; outline-offset: 3px; }

.vy-lead-balao {
  position: relative;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
  color: #5a6072;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  animation: vy-balao-entra 0.5s 0.6s ease-out both;
  transition: background 0.2s;
}
/* setinha apontando para o ícone */
.vy-lead-balao::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  background: inherit;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 2px;
}
.vy-lead-abrir:hover .vy-lead-balao { background: #fff; color: #000; }
@keyframes vy-balao-entra { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.vy-lead-icone {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #116bf8;
  box-shadow: 0 12px 30px rgb(0 0 0 / 30%);
  transition: transform 0.2s;
}
.vy-lead-icone img { width: 32px; height: 32px; }
.vy-lead-abrir:hover .vy-lead-icone { transform: scale(1.06); }
/* pulso suave para chamar atenção */
.vy-lead-icone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #116bf8;
  animation: vy-pulso-whats 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes vy-pulso-whats { from { transform: scale(1); opacity: 0.55; } to { transform: scale(1.6); opacity: 0; } }

@media (max-width: 600px) {
  .vy-lead { right: 6px; bottom: 6px; width: calc(100vw - 12px); max-height: calc(100dvh - 12px); }
  .vy-lead-topo { grid-template-columns: 34px minmax(0, 1fr) 32px; min-height: 72px; padding: 12px; }
  .vy-lead-marca { width: 34px; height: 34px; }
  .vy-lead-titulos strong { font-size: 15px; }
  .vy-lead-abrir { right: 12px; bottom: 12px; }
  .vy-lead-icone { width: 56px; height: 56px; }
  .vy-lead-balao { padding: 5px 10px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .vy-lead, .vy-lead-balao, .vy-lead-icone::before { animation: none; }
  .vy-lead-icone { transition: none; }
}

/* ---- ferramentas.css ---- */
/* Páginas de ferramentas (Diagnóstico rápido, Calculadora de ROI) — mesmo visual do site */
.vy-pagina {
  --verde: var(--vy-destaque, #116bf8);
  --verde-fundo: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.14);
  --card: var(--vy-card, #151515);
  --borda: rgba(255, 255, 255, 0.08);
  --texto: #fff;
  --texto-2: var(--vy-texto-suave, #b5b5b5);
  --texto-3: var(--vy-texto-3, #8a8a8a);
  --titulo: gtPlanarWordmark, "gtPlanarWordmark Fallback", "Instrument Sans", sans-serif;
  font-family: "Instrument Sans", "Instrument Sans Fallback", sans-serif;
  color: var(--texto);
}
.vy-wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: 1rem; }
.vy-escuro { position: relative; background: #000; overflow: hidden; }
.vy-escuro::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 70rem;
  background: radial-gradient(closest-side, rgb(var(--vy-destaque-rgb, 17 107 248) / 0.13), transparent 70%);
  pointer-events: none;
}
.vy-claro { background: var(--vy-fundo-claro, #f4f4f4); color: #000; }

/* Hero */
.vy-hero { position: relative; padding: 9rem 0 3.5rem; text-align: center; }
@media (min-width: 768px) { .vy-hero { padding: 11rem 0 4.5rem; } }
.vy-etiqueta { display: inline-block; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--verde-fundo); color: var(--verde); font-size: 0.875rem; }
.vy-claro .vy-etiqueta { background: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.2); color: var(--vy-destaque-claro, #0d4b4a); }
.vy-h1 {
  margin: 1.25rem auto 0;
  max-width: 52rem;
  font-family: var(--titulo);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.vy-hero p { max-width: 38rem; margin: 1.5rem auto 0; color: var(--texto-2); font-size: 1.125rem; line-height: 1.5; text-wrap: balance; }
.vy-h2 { margin: 0; font-family: var(--titulo); font-weight: 300; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; }
.vy-h3 { margin: 0; font-size: 1.25rem; font-weight: 500; }

/* Cartões */
.vy-card { position: relative; border-radius: 1.5rem; background: var(--card); border: 1px solid var(--borda); padding: 1.5rem; }
@media (min-width: 768px) { .vy-card { padding: 2rem; } }
.vy-grade { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
  .vy-grade-2-1 { grid-template-columns: 1.65fr 1fr; align-items: start; }
  .vy-grade-1-1 { grid-template-columns: 1fr 1fr; }
}
.vy-rotulo { font-size: 0.875rem; color: var(--texto-3); }
.vy-rotulo-verde { font-size: 0.875rem; color: var(--verde); }
.vy-divisor { height: 1px; margin: 1.75rem 0; background: var(--borda); border: 0; }
.vy-nota { margin: 0; font-size: 0.85rem; line-height: 1.5; color: var(--texto-3); }
.vy-nota a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Chips de seleção (perfis, períodos) */
.vy-abas { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.vy-aba {
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--texto-2);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.vy-aba:hover { color: #fff; }
.vy-aba[aria-pressed="true"] { background: var(--verde-fundo); color: var(--verde); }

/* Campos */
.vy-campos { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .vy-campos-2 { grid-template-columns: 1fr 1fr; } .vy-campos-3 { grid-template-columns: repeat(3, 1fr); } }
.vy-campo { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.vy-campo label, .vy-campo .vy-label { font-size: 0.95rem; color: var(--texto); }
.vy-valor-grande { font-family: var(--titulo); font-weight: 300; font-size: 1.75rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.vy-entrada {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.875rem;
  background: transparent;
  transition: border-color 0.2s;
}
.vy-entrada:focus-within { border-color: var(--verde); }
.vy-entrada input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 1.05rem; outline: none; font-variant-numeric: tabular-nums; }
.vy-entrada span { color: var(--texto-3); }
.vy-entrada-meta { border-color: transparent; background: var(--verde-fundo); }
.vy-entrada-meta input { color: var(--verde); }
.vy-ajuda { font-size: 0.8rem; line-height: 1.4; color: var(--texto-3); }

/* Slider no estilo do site (trilho verde, alça clara) */
.vy-slider { width: 100%; margin: 0.75rem 0 0.25rem; height: 28px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vy-slider::-webkit-slider-runnable-track { height: 2px; background: var(--verde); }
.vy-slider::-moz-range-track { height: 2px; background: var(--verde); }
.vy-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 52px; height: 28px; margin-top: -13px; border-radius: 999px; border: 0;
  background: #ededed linear-gradient(#111, #111) no-repeat calc(50% - 2.5px) center / 1.5px 11px;
  box-shadow: 4px 0 0 -1px transparent;
}
.vy-slider::-moz-range-thumb { width: 52px; height: 28px; border-radius: 999px; border: 0; background: #ededed; }
.vy-slider:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 4px; }
.vy-limites { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--texto-3); }

/* Resultado */
.vy-resultado-num { margin: 0.25rem 0 0; font-family: var(--titulo); font-weight: 300; font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.vy-linhas { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; }
.vy-linha { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.vy-linha dt { color: var(--texto); }
.vy-linha dd { margin: 0; font-size: 1.1rem; }
.vy-positivo { color: var(--verde) !important; }
.vy-negativo { color: #ff7a6b !important; }
.vy-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.vy-kpi { padding: 0.75rem; border-radius: 0.875rem; background: rgba(255, 255, 255, 0.04); }
.vy-kpi b { display: block; margin-top: 0.2rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.vy-kpi small { display: block; color: var(--texto-3); font-size: 0.75rem; }
.vy-kpi b { font-size: 1.05rem; white-space: nowrap; }
.vy-kpi b small { margin-top: 0.15rem; font-weight: 400; }

/* Botões */
.vy-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.5rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-size: 0.95rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.vy-botao:hover { opacity: 0.88; }
.vy-botao-branco { background: #fff; color: #000; }
.vy-botao-contorno { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.18); }
.vy-botao-preto { background: #000; color: #fff; }
.vy-botao-cheio { width: 100%; }

/* Gráfico */
.vy-grafico-topo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.vy-grafico-legenda { display: flex; gap: 1.25rem; font-size: 0.9rem; color: var(--texto-2); }
.vy-grafico-legenda span { display: inline-flex; align-items: center; gap: 0.5rem; }
.vy-grafico-legenda i { display: inline-block; width: 1.25rem; height: 0; border-top: 2px solid var(--verde); }
.vy-grafico-legenda i.vy-tracejado { border-top: 2px dashed var(--vy-texto-3, #8a8a8a); }
.vy-grafico { width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.vy-grafico text { fill: var(--vy-texto-3, #8a8a8a); font: 13px "Instrument Sans", sans-serif; }

/* Tabela do detalhamento */
.vy-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.vy-tabela th, .vy-tabela td { padding: 0.65rem 0; text-align: right; border-bottom: 1px solid var(--borda); font-weight: 400; }
.vy-tabela th:first-child, .vy-tabela td:first-child { text-align: left; color: var(--texto-2); }
.vy-tabela thead th { color: var(--texto-3); font-size: 0.85rem; }
.vy-tabela tr.vy-total td { border-bottom: 0; color: #fff; font-weight: 500; }

/* Seção de contato (fundo claro) */
.vy-contato { padding: 6rem 0; }
.vy-contato .vy-h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
.vy-contato p.vy-sub { margin-top: 1.5rem; max-width: 26rem; color: var(--vy-texto-claro-2, #616161); line-height: 1.5; }
.vy-form { display: grid; gap: 1.25rem; }
.vy-form label { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.95rem; color: var(--vy-texto-claro-2, #616161); }
.vy-form input {
  height: 3rem; padding: 0 1rem; border: 1px solid var(--vy-borda-form, #c9c9c9); border-radius: 0.875rem; background: transparent;
  font: inherit; color: #000; outline: none;
}
.vy-form input:focus { border-color: var(--vy-destaque-claro, #0d4b4a); }
.vy-form input[readonly] { background: var(--vy-fundo-campo, #ececec); color: var(--vy-texto-claro-2, #616161); }
.vy-form .vy-nota { color: var(--vy-texto-claro-2, #616161); }
.vy-form-acoes { display: flex; justify-content: flex-end; }

/* Mais ferramentas */
.vy-mais { padding: 5rem 0 6rem; }
.vy-mais .vy-grade { margin-top: 2.5rem; }
.vy-ferramenta {
  display: block; padding: 2rem; border-radius: 1.5rem; background: var(--card); border: 1px solid var(--borda);
  color: #fff; text-decoration: none; transition: border-color 0.2s, background 0.2s;
}
.vy-ferramenta:hover { border-color: rgb(var(--vy-destaque-rgb, 17 107 248) / 0.5); background: var(--vy-card-hover, #181818); }
.vy-ferramenta .vy-h3 { display: flex; justify-content: space-between; gap: 1rem; font-weight: 400; font-size: 1.5rem; letter-spacing: -0.02em; }
.vy-ferramenta .vy-h3::after { content: "↗"; color: var(--texto-3); font-size: 1rem; }
.vy-ferramenta p { margin: 0.75rem 0 0; max-width: 28rem; color: var(--texto-2); line-height: 1.5; }

/* Diagnóstico: cartão "o que você recebe" */
.vy-recebe { display: flex; flex-direction: column; gap: 1.25rem; }
.vy-recebe ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; counter-reset: r; }
.vy-recebe li { display: flex; gap: 0.875rem; color: var(--texto-2); line-height: 1.45; counter-increment: r; }
.vy-recebe li::before {
  content: counter(r); flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 50%; background: var(--verde-fundo); color: var(--verde); font-size: 0.85rem;
}
.vy-recebe li b { display: block; color: #fff; font-weight: 500; }
.vy-selos { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vy-selos span { padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--borda); color: var(--texto-2); font-size: 0.85rem; }

.vy-secao { padding-bottom: 5rem; }
.vy-pagina .vy-diag { background: var(--card); border: 1px solid var(--borda); }
.vy-secao-topo { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; }
.vy-moeda { padding: 0.35rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 0.85rem; }
.vy-moeda option { color: #000; }
.vy-cab-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* ---- legal.css ---- */
/* Páginas jurídicas (termos, privacidade, cookies, LGPD, aviso legal) */
.vy-legal-corpo { padding: 4rem 0 6rem; background: #fff; color: #000; }
.vy-legal-grade { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .vy-legal-grade { grid-template-columns: 15rem minmax(0, 46rem); justify-content: center; gap: 4rem; } }

/* Índice lateral */
.vy-legal-indice { display: none; }
@media (min-width: 1024px) {
  .vy-legal-indice { display: block; position: sticky; top: 7rem; align-self: start; }
}
.vy-legal-indice p { margin: 0 0 0.75rem; color: var(--vy-texto-claro-2, #616161); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.vy-legal-indice ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.15rem; border-left: 1px solid var(--vy-borda-clara, #d6d6d6); }
.vy-legal-indice a {
  display: block;
  margin-left: -1px;
  padding: 0.35rem 0 0.35rem 0.9rem;
  border-left: 2px solid transparent;
  color: var(--vy-texto-claro-2, #616161);
  font-size: 0.875rem;
  line-height: 1.35;
  text-decoration: none;
}
.vy-legal-indice a:hover { color: #000; }
.vy-legal-indice a.vy-ativo { border-left-color: var(--vy-destaque-claro, #0d4b4a); color: #000; }

/* Texto */
.vy-legal-texto { font-size: 1.0625rem; line-height: 1.75; color: #1f2430; }
.vy-legal-texto section { scroll-margin-top: 6.5rem; }
.vy-legal-texto section + section { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--vy-borda-clara, #e4e4e4); }
.vy-legal-texto h2 { margin: 0 0 1rem; color: #000; font-family: "Instrument Sans", sans-serif; font-size: 1.375rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.vy-legal-texto p { margin: 0 0 1rem; }
.vy-legal-texto p:last-child { margin-bottom: 0; }
.vy-legal-texto ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.vy-legal-texto li { margin: 0.4rem 0; padding-left: 0.25rem; }
.vy-legal-texto li::marker { color: var(--vy-destaque-claro, #0d4b4a); }
.vy-legal-texto a { color: var(--vy-destaque-claro, #0d4b4a); text-underline-offset: 2px; }

/* Dado da empresa ainda não preenchido em legal.json */
.vy-preencher { padding: 0.05rem 0.35rem; border-radius: 4px; background: #fff3b0; color: #6b4e00; font-size: 0.92em; white-space: nowrap; }

.vy-legal-data { margin-top: 1.25rem; color: var(--vy-texto-2, #929292); font-size: 0.95rem; }
.vy-legal-voltar { color: inherit; text-decoration: none; }
.vy-legal-voltar:hover .vy-etiqueta { filter: brightness(1.2); }

/* Outras páginas / central */
.vy-legal-lista { display: grid; gap: 1rem; margin-top: 2rem; }
@media (min-width: 768px) { .vy-legal-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vy-legal-lista.vy-tres { grid-template-columns: repeat(3, 1fr); } }
.vy-legal-cartao {
  display: block;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--vy-fundo-claro, #f4f4f4);
  border: 1px solid transparent;
  color: #000;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.vy-legal-cartao:hover { border-color: var(--vy-destaque-claro, #0d4b4a); background: #fff; }
.vy-legal-cartao strong { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.15rem; font-weight: 500; }
.vy-legal-cartao strong::after { content: "→"; color: var(--vy-destaque-claro, #0d4b4a); }
.vy-legal-cartao span { display: block; margin-top: 0.5rem; color: var(--vy-texto-claro-2, #616161); font-size: 0.95rem; line-height: 1.5; }
.vy-legal-outras { padding: 0 0 6rem; background: #fff; color: #000; }
.vy-legal-outras h2 { margin: 0; font-family: "Instrument Sans", sans-serif; font-size: 1.25rem; font-weight: 500; }

/* ---- legibilidade.css ---- */
/* Padrão de leitura das descrições (todas as páginas).
   - Texto corrido nunca abaixo de 16px; notas e legendas no mínimo 14px.
   - Entrelinha de 1.6 no texto corrido (o tema original usava 1.2, apertado demais).
   - Peso 400 nas descrições: o peso 300 some em telas escuras.
   Os títulos e os painéis ilustrativos (dados de exemplo) não mudam.
   O seletor html:root[data-theme] vence o :root[data-theme="legacy"] do CSS original. */
html:root,
html:root[data-theme] {
  --type-body-xl-size: 1.375rem;
  --type-body-xl-leading: 1.5;
  --type-body-lg-size: 1.1875rem;
  --type-body-lg-leading: 1.6;
  --type-body-lg-weight: 400;
  --type-body-md-size: 1.0625rem;
  --type-body-md-leading: 1.6;
  --type-body-sm-size: 1rem;
  --type-body-sm-leading: 1.6;
  --type-body-sm-weight: 400;
  --type-body-xs-size: 0.875rem;
  --type-body-xs-leading: 1.5;
  --type-label-sm-size: 0.9375rem;
  --type-label-sm-leading: 1.4;
  --type-label-md-leading: 1.4;
}

@media (min-width: 768px) {
  html:root,
  html:root[data-theme] {
    --type-body-md-size: 1.125rem;
  }
}

/* Quebra de linha equilibrada: evita palavra sozinha na última linha */
.type-body-lg, .type-body-md, .type-body-sm, .type-body-xs, main p, footer p { text-wrap: pretty; }

/* Texto institucional do rodapé (era 12px) */
footer p:not([class*="type-"]) { font-size: 0.875rem; line-height: 1.6; }

/* Notas e ajudas das ferramentas e do diagnóstico */
.vy-nota, .vy-ajuda, .vy-diag-nota { font-size: 0.875rem; line-height: 1.6; }
.vy-legenda-orbita, .vy-diag-topo, .vy-limites, .vy-tabela thead th { font-size: 0.9375rem; }

/* Páginas jurídicas: leitura longa */
.vy-legal-cartao span, .vy-legal-data { font-size: 1rem; line-height: 1.6; }