/* Vokse — componentes. Lê as variáveis de tokens.css. */

.vk-botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1;
  padding: 14px var(--space-6); border: 1.5px solid transparent;
  border-radius: 0; border-top-right-radius: var(--radius-k-controle);
  text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.vk-botao:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 2px; }
.vk-botao--primario { background: var(--azul-vokse); color: var(--branco); }
.vk-botao--primario:hover { background: var(--azul-vokse-hover); color: var(--branco); }
.vk-botao--secundario { background: var(--branco); color: var(--azul-noite); border-color: var(--azul-vokse); }
.vk-botao--secundario:hover { background: var(--azul-nevoa); color: var(--azul-noite); }
.vk-botao--sobre-azul { background: var(--branco); color: var(--azul-vokse); }
.vk-botao--sobre-azul:hover { background: var(--azul-nevoa); color: var(--azul-vokse); }
.vk-botao--sobre-azul:focus-visible { outline-color: var(--branco); }
.vk-botao:disabled { opacity: .5; cursor: not-allowed; }

.vk-rotulo {
  display: inline-block; font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
.vk-rotulo--azul { color: var(--azul-vokse); }
.vk-rotulo--branco { color: var(--branco); }
.vk-rotulo--grafite { color: var(--grafite); }

.vk-pictograma { display: block; flex: none; }

.vk-degraus { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--space-3); align-items: end; }
.vk-degrau {
  box-sizing: border-box; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  background: var(--azul-nevoa); color: var(--azul-noite); border-top-right-radius: var(--radius-k-card);
}
.vk-degrau__titulo { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.vk-degrau__texto { font-family: var(--font-sans); font-size: 14px; line-height: 1.4; color: var(--grafite); }
.vk-degrau--destaque { background: var(--azul-vokse); color: var(--branco); }
.vk-degrau--destaque .vk-degrau__texto { color: var(--texto-sobre-azul); }

.vk-diag {
  display: flex; gap: 28px; align-items: flex-end; padding: 18px 24px;
  color: var(--azul-noite); border-top-right-radius: 40px;
}
.vk-diag__dominio { width: 170px; flex: none; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 26px; font-weight: 700; padding-bottom: 2px; }
.vk-diag__blocos { display: flex; gap: 6px; align-items: flex-end; flex: none; }
.vk-diag__bloco { width: 64px; background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-bloco); }
.vk-diag__bloco--cheio { background: var(--azul-vokse); }
.vk-diag__texto { margin: 0; flex: 1 1 0; min-width: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.4; color: var(--grafite); }
.vk-diag--critico { background: var(--azul-vokse); color: var(--branco); }
.vk-diag--critico .vk-diag__bloco { background: rgba(255, 255, 255, .22); }
.vk-diag--critico .vk-diag__bloco--cheio { background: var(--branco); }
.vk-diag--critico .vk-diag__texto { color: var(--branco); }

/* ---------- Site (v2.9). Celular primeiro; computador a partir de 1024px. ---------- */

/* Cabecalho: branco, fixo no topo. No celular, o menu desce como campo azul. */
.vk-cabecalho { position: sticky; top: 0; z-index: 10; background: var(--branco); border-bottom: 1px solid var(--linha); }
.vk-cabecalho__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: 1280px; margin: 0 auto; padding: var(--space-3) var(--space-4); }
.vk-cabecalho__logo { display: block; }
.vk-cabecalho__logo img { display: block; height: 24px; width: auto; }
.vk-cabecalho__nav { display: none; }
.vk-cabecalho__menu {
  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  color: var(--azul-noite); background: var(--branco); border: 1.5px solid var(--azul-vokse); border-radius: 0; border-top-right-radius: var(--radius-k-controle);
  padding: 10px var(--space-4); cursor: pointer;
}
.vk-cabecalho__menu:focus-visible, .vk-cabecalho a:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 2px; }
.vk-cabecalho__painel {
  display: flex; flex-direction: column; gap: var(--space-4); background: var(--azul-vokse);
  border-bottom-right-radius: var(--radius-k-campo); padding: var(--space-8) var(--space-4) var(--space-16);
}
.vk-cabecalho__painel[hidden] { display: none; }
.vk-cabecalho__painel a:not(.vk-botao) { color: var(--branco); font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1.1; text-decoration: none; }
.vk-cabecalho__painel .vk-botao { align-self: flex-start; margin-top: var(--space-4); font-family: var(--font-sans); font-size: 15px; font-weight: 600; }
@media (min-width: 1024px) {
  .vk-cabecalho__barra { padding: var(--space-4) var(--space-8); }
  .vk-cabecalho__nav { display: flex; align-items: center; gap: var(--space-8); white-space: nowrap; }
  .vk-cabecalho__nav a:not(.vk-botao) { font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--azul-noite); text-decoration: none; }
  .vk-cabecalho__nav a:not(.vk-botao):hover, .vk-cabecalho__nav a[aria-current="page"] { color: var(--azul-vokse); }
  .vk-cabecalho__menu, .vk-cabecalho__painel { display: none; }
}

/* Rodape: chamada final e rodapé numa base azul só, curva do k no canto superior direito. */
.vk-rodape {
  background: var(--azul-vokse); color: var(--branco); border-top-right-radius: var(--radius-k-campo);
  padding: var(--space-16) var(--space-4) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6);
}
.vk-rodape__frase { margin: 0; font-family: var(--font-display); font-size: 30px; font-weight: 800; line-height: 1.08; max-width: min(640px, calc(100% - 64px)); }
.vk-rodape__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, .5); }
.vk-rodape__grade img { display: block; height: 24px; width: auto; }
.vk-rodape__texto { margin: var(--space-3) 0 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--texto-sobre-azul); }
.vk-rodape__contato { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); font-size: 14px; }
.vk-rodape a:not(.vk-botao) { color: var(--branco); }
.vk-rodape a:focus-visible { outline: 3px solid var(--branco); outline-offset: 2px; }
.vk-rodape__tag { margin: 0; font-family: var(--font-sans); font-size: 14px; font-style: italic; color: var(--texto-sobre-azul); }
@media (min-width: 1024px) {
  .vk-rodape { padding: var(--space-16) var(--space-18) var(--space-8); }
  .vk-rodape__frase { font-size: 44px; }
  .vk-rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* CampoFormulario: contorno com o canto do k; foco em azul; erro em status-alerta com a mensagem escrita. */
.vk-campo { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); color: var(--azul-noite); }
.vk-campo__rotulo { font-size: 14px; font-weight: 600; }
.vk-campo__entrada {
  font-family: var(--font-sans); font-size: 16px; color: var(--azul-noite); background: var(--branco);
  padding: 12px 14px; border: 1.5px solid var(--grafite); border-radius: 0; border-top-right-radius: var(--radius-k-controle);
}
.vk-campo__entrada:focus { outline: none; border: 3px solid var(--azul-vokse); padding: 10.5px 12.5px; }
.vk-campo__ajuda { font-size: 13px; color: var(--grafite); }
.vk-campo--erro .vk-campo__entrada { border-color: var(--status-alerta); }
.vk-campo--erro .vk-campo__ajuda { color: var(--status-alerta); font-weight: 600; }
.vk-opcao {
  display: flex; gap: var(--space-3); align-items: center; padding: 14px var(--space-4); cursor: pointer;
  font-family: var(--font-sans); font-size: 15px; color: var(--azul-noite);
  border: 1.5px solid var(--grafite); border-radius: 0; border-top-right-radius: var(--radius-k-controle);
}
.vk-opcao input { width: 18px; height: 18px; margin: 0; accent-color: var(--azul-vokse); flex: none; }
.vk-opcao:has(input:checked) { border: 2px solid var(--azul-vokse); background: var(--azul-nevoa); font-weight: 600; }
.vk-opcao:has(input:focus-visible) { outline: 3px solid var(--azul-noite); outline-offset: 2px; }

/* SeletorPerguntas: as quatro perguntas. Celular: lista que abre. Computador: quatro blocos em linha. */
.vk-perguntas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.vk-pergunta {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--azul-noite);
  background: var(--branco); border: 1.5px solid var(--azul-vokse); border-radius: 0; border-top-right-radius: var(--radius-k-bloco); padding: var(--space-4);
}
.vk-pergunta[aria-expanded="true"], .vk-pergunta[aria-selected="true"] { background: var(--azul-vokse); color: var(--branco); }
.vk-pergunta:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 2px; }
.vk-pergunta__sinal { flex: none; width: 16px; height: 16px; }
.vk-perguntas__solucoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0 var(--space-6); }
.vk-perguntas__solucoes[hidden] { display: none; }
.vk-solucao { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--azul-noite); padding-top: 14px; color: var(--azul-noite); text-decoration: none; }
.vk-solucao__nome { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; }
.vk-solucao__texto { font-family: var(--font-sans); font-size: 14px; line-height: 1.45; color: var(--grafite); }
@media (min-width: 1024px) {
  .vk-perguntas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .vk-pergunta { min-height: 140px; align-items: flex-end; padding: 20px; font-size: 20px; }
  .vk-pergunta__sinal { display: none; }
  .vk-perguntas__solucoes { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-8); }
}

/* SeletorAreas: abas com nome e pictograma; a área atual leva barra azul de 4px. */
.vk-abas { display: flex; gap: var(--space-8); overflow-x: auto; border-bottom: 1px solid var(--linha); scrollbar-width: none; }
.vk-aba {
  display: flex; align-items: center; gap: 10px; flex: none; padding: 0 0 14px; text-decoration: none; cursor: pointer;
  font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--grafite); background: none; border: 0;
}
.vk-aba[aria-current="page"], .vk-aba[aria-selected="true"] { color: var(--azul-noite); font-weight: 800; padding-bottom: 10px; border-bottom: 4px solid var(--azul-vokse); }
.vk-aba:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 2px; }
@media (min-width: 1024px) { .vk-abas { gap: 40px; } .vk-aba { font-size: 20px; } }

/* PlayerFilme: capa com foto P&B, véu azul e frase curta; botão branco com a curva do k. */
.vk-player { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--grafite); border: 0; padding: 0; cursor: pointer; border-top-right-radius: var(--radius-k-card); text-align: left; }
.vk-player__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.vk-player__veu { position: absolute; inset: 0; background: rgba(11, 112, 182, .86); }
.vk-player__pe { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.vk-player__frase { font-family: var(--font-display); font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--branco); max-width: 380px; }
.vk-player__acao { display: flex; align-items: center; gap: var(--space-3); flex: none; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--branco); }
.vk-player__play { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--branco); border-top-right-radius: var(--radius-k-bloco); }
.vk-player:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 3px; }
.vk-player video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--grafite); }
@media (min-width: 1024px) {
  .vk-player__pe { left: var(--space-8); right: var(--space-8); bottom: 28px; }
  .vk-player__frase { font-size: 30px; }
  .vk-player__play { width: 72px; height: 72px; }
}