/* Vokse, layout das páginas. Lê tokens.css e bundle.css do Design System (v2.9.1), sem alterá-los.
   Celular primeiro: escala única de tipografia abaixo de 760px; tamanhos do DS a partir de 1024px. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; background: var(--branco); color: var(--azul-noite); font-family: var(--font-sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; }
a { color: var(--azul-vokse); }
a:hover { color: var(--azul-vokse-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--azul-noite); outline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
.display, .h1, .h2, .h3, .h4 { color: var(--azul-noite); }

.vk-pular { position: absolute; left: -9999px; top: 8px; z-index: 20; background: var(--branco); padding: 10px 14px; }
.vk-pular:focus { left: 8px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabeçalho: ajustes do comportamento do site sobre o componente do DS. */
.vk-cabecalho__menu svg { color: var(--azul-vokse); }

/* ---------- Estrutura ---------- */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.sec { padding-top: 56px; padding-bottom: 56px; }
.sec-topo { border-top: 1px solid var(--linha); }
.pilha { display: flex; flex-direction: column; gap: 24px; }
.pilha-sm { display: flex; flex-direction: column; gap: 12px; }
.pilha-lg { display: flex; flex-direction: column; gap: 32px; }
.grid2, .grid3, .grid4 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.grid2 { gap: 32px; }
.centro { align-items: center; }
.topo { align-items: start; }
.inicio { align-self: flex-start; }

.cor-grafite { color: var(--grafite); }
.cor-noite { color: var(--azul-noite); }
.cor-azul { color: var(--azul-vokse); }
.fundo-nevoa { background: var(--azul-nevoa); }

/* Campo azul com o k ampliado (abertura da página inicial e de Quem somos). */
.campo-azul { position: relative; overflow: hidden; background: var(--azul-vokse); color: var(--branco); }
.campo-azul .display, .campo-azul .h1, .campo-azul .h2 { color: var(--branco); }
.campo-azul p { color: var(--texto-sobre-azul); }
.campo-azul a:not(.vk-botao) { color: var(--branco); font-weight: 600; font-size: 15px; }
.campo-azul .wrap { position: relative; }
.k-grande { position: absolute; right: -24px; bottom: -50px; height: 300px; width: auto; opacity: .16; pointer-events: none; }
.abertura { padding-top: 72px; padding-bottom: 72px; gap: 28px; }
.tag { font-style: italic; font-size: 15px; margin-top: 24px !important; }

/* Blocos com a curva do k no canto superior direito. */
.bloco-nevoa, .bloco-branco, .bloco-azul { border-top-right-radius: var(--radius-k-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--azul-noite); }
.bloco-nevoa { background: var(--azul-nevoa); }
.bloco-branco { background: var(--branco); }
.bloco-azul { background: var(--azul-vokse); color: var(--branco); }
.bloco-azul .h4 { color: var(--branco); }
.bloco-azul .body, .bloco-azul .small { color: var(--texto-sobre-azul); }
a.bloco-nevoa:hover, a.bloco-branco:hover { color: var(--azul-noite); }
.bloco-alto { min-height: 180px; }
.bloco-base { justify-content: flex-end; min-height: 160px; }
.pergunta-card { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1.15; }
.num { font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--azul-vokse); }
.bloco-azul .num { color: var(--branco); }

/* Fios: listas com linha fina em cima, sem caixa. */
.fio { border-top: 1px solid var(--linha); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.fio-noite { border-top: 1px solid var(--azul-noite); padding-top: 20px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--azul-noite); }
a.fio-noite:hover { color: var(--azul-noite); }
.ver { color: var(--azul-vokse); font-weight: 600; font-size: 15px; }
.link-forte { font-weight: 600; }

/* Logos de clientes: cinza, ordem alfabética, setor embaixo. */
.clientes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 8px; }
.cliente { display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid var(--linha); padding: 16px 8px 8px; text-align: center; }
.cliente__logo { height: 56px; display: flex; align-items: center; justify-content: center; }
.cliente__logo img { max-height: 48px; max-width: 100%; width: auto; height: auto; opacity: .8; }
.cliente .caption { color: var(--grafite); }

/* Assinatura da história. */
.assinatura { border-top: 1px solid var(--azul-noite); padding-top: 16px; display: flex; flex-direction: column; gap: 4px; }

/* Cards das áreas em O que fazemos. */
.area-card { background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-card); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 170px; text-decoration: none; color: var(--azul-noite); }
.area-card:hover { color: var(--azul-noite); background: #DCEBF7; }
.faixa-direcao { background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-bloco); padding: 18px 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.faixa-direcao .body { flex: 1 1 280px; color: var(--grafite); }

/* Linha de ação: frase à esquerda, botão à direita. */
.linha-acao { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.linha-acao--fio { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--linha); }

/* Página de área. */
.area-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding-top: 40px; padding-bottom: 56px; }
.area-foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: grayscale(1); border-top-right-radius: var(--radius-k-card); }
.area-perguntas { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.area-perguntas span { border-top: 1px solid var(--linha); padding-top: 10px; }
.abas-wrap { padding-top: 24px; }
.sols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

/* "Quanto disso já roda sozinho?": abre sem script. */
.roda { align-self: stretch; }
.roda summary { list-style: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--azul-vokse); padding: 4px 0; display: inline-block; }
.roda summary::-webkit-details-marker { display: none; }
.roda summary .fechar { display: none; }
.roda[open] summary .abrir { display: none; }
.roda[open] summary .fechar { display: inline; }
.roda__corpo { margin-top: 8px; background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-bloco); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.roda__corpo .small { border-top: 1px solid var(--linha); padding-top: 8px; color: var(--azul-noite); }

/* Seletor das perguntas: o painel de soluções começa escondido; o script abre. */
.vk-perguntas__solucoes[hidden] { display: none; }
.vk-solucao:hover { color: var(--azul-noite); }
.vk-solucao:hover .vk-solucao__nome { color: var(--azul-vokse); }

/* Como trabalhamos: os cinco passos. */
.passo { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; border-top: 1px solid var(--linha); padding-top: 24px; padding-bottom: 24px; align-items: start; }
.passo .body { grid-column: 2; color: var(--grafite); }
.passo .num { text-align: center; align-self: center; }

/* Pedir uma conversa. */
.conversa { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: start; }
.vk-form { display: flex; flex-direction: column; gap: 20px; }
.vk-form__campos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.vk-form__grupo { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.vk-form__grupo legend { margin-bottom: 10px; padding: 0; }
.vk-form__consentimento { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--grafite); }
.vk-form__consentimento label { display: flex; gap: 10px; align-items: flex-start; }
.vk-form__consentimento input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--azul-vokse); flex: none; }
.vk-form__isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vk-form__aviso { color: var(--status-alerta); font-weight: 600; font-size: 14px; }
.vk-form__grupo.vk-campo--erro .vk-opcao { border-color: var(--status-alerta); }
.vk-form__grupo.vk-campo--erro .vk-campo__ajuda, .vk-form__consentimento.vk-campo--erro .vk-campo__ajuda { color: var(--status-alerta); font-weight: 600; }
.lateral { background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-card); padding: 28px; display: flex; flex-direction: column; gap: 20px; }
.lateral__item { display: flex; flex-direction: column; gap: 4px; }

/* Texto longo (política de privacidade). */
.texto-longo { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.aviso-rascunho { color: var(--status-atencao); font-weight: 600; }

/* Rodapé: ajustes do componente do DS ao container do site. */
.vk-rodape { padding-left: 0; padding-right: 0; margin-top: 0; }
.vk-rodape__corpo { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.vk-rodape__apoio { max-width: 820px; color: var(--texto-sobre-azul); }
.vk-rodape__chamada { align-self: flex-start; }
.vk-rodape__pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .3); }
.vk-rodape__pe-grupo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.vk-rodape .vk-rodape__newsletter { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--branco); text-decoration: none; border: 1.5px solid var(--branco); border-top-right-radius: var(--radius-k-controle); padding: 10px 16px; }
.vk-rodape .vk-rodape__newsletter:hover { background: rgba(255, 255, 255, .12); }
.vk-rodape__linkedin { display: inline-flex; }
.vk-rodape__privacidade { font-size: 13px; }
.vk-rodape__contato a { text-decoration: none; }
.vk-rodape__contato a:hover { text-decoration: underline; }

/* ---------- Escala única de tipografia para celular (abaixo de 760px) ---------- */
@media (max-width: 759px) {
	.display { font-size: 42px; }
	.h1 { font-size: 40px; }
	.h2 { font-size: 32px; }
	.h3 { font-size: 26px; }
	.h4 { font-size: 20px; }
	.body-lg { font-size: 17px; }
	.crenca .h3 { font-size: 22px; line-height: 1.2; }
	.num { font-size: 34px; }
}

/* ---------- A partir de 760px ---------- */
@media (min-width: 760px) {
	.wrap { padding-left: 40px; padding-right: 40px; }
	.sec { padding-top: 80px; padding-bottom: 80px; }
	.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
	.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.clientes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 24px; }
	.sols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vk-form__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vk-rodape__grade { grid-template-columns: max-content max-content; column-gap: 120px; justify-content: start; }
	.vk-campo--largo { grid-column: 1 / -1; }
	.passo { grid-template-columns: 48px minmax(0, 320px) minmax(0, 640px); column-gap: 24px; justify-content: start; align-items: center; padding-top: 24px; padding-bottom: 24px; }
	.passo .num { text-align: center; }
	.passo .body { padding-left: 24px; }
	.passo .body { grid-column: auto; }
	.k-grande { right: 64px; bottom: -24px; height: 460px; }
	.abertura { padding-top: 120px; padding-bottom: 120px; }
	.bloco-nevoa, .bloco-branco, .bloco-azul { padding: 32px; }
	.pergunta-card { font-size: 24px; }
}

/* ---------- Computador (a partir de 1024px) ---------- */
@media (min-width: 1024px) {
	.wrap { padding-left: 72px; padding-right: 72px; }
	.sec { padding-top: 96px; padding-bottom: 96px; }
	.grid2 { gap: 56px; }
	.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.area-topo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; padding-top: 56px; padding-bottom: 72px; }
	.conversa { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; }
	.lateral { padding: 32px; }
	.recuo-titulo { padding-top: 36px; }
}

/* Com a barra do WordPress (só para quem está logado), o cabeçalho fixo desce junto. */
.admin-bar .vk-cabecalho { top: 46px; }
@media (min-width: 783px) { .admin-bar .vk-cabecalho { top: 32px; } }
@media (max-width: 600px) { .admin-bar .vk-cabecalho { top: 0; } }

/* WhatsApp: número com o ícone verde ao lado. */
.vk-whats { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.vk-whats:hover span { text-decoration: underline; }
.vk-whats__icone { flex: none; display: block; }
.vk-whats--grande { font-family: var(--font-display); font-size: 24px; font-weight: 700; line-height: 1.2; color: var(--azul-noite); gap: 10px; }
.vk-whats--grande:hover { color: var(--azul-noite); }

/* Cartões das edições de O Próximo Degrau: "Ler no LinkedIn" fica no pé. */
.card-news .ver { margin-top: auto; padding-top: 4px; }
a.card-news:hover .h4 { color: var(--azul-vokse); }

/* Página de área: pictograma grande no lugar da foto, até a sessão de fotos própria. */
.area-picto { width: 100%; aspect-ratio: 4 / 5; background: var(--azul-nevoa); border-top-right-radius: var(--radius-k-card); display: flex; align-items: center; justify-content: center; }
.area-picto .vk-pictograma { width: 46%; height: auto; }
@media (max-width: 759px) { .area-picto { aspect-ratio: 16 / 10; } .area-picto .vk-pictograma { width: 30%; } }

/* k da abertura na altura inteira do campo azul, cortado embaixo e na direita. */
@media (min-width: 760px) {
	.k-grande { height: 118%; bottom: -18%; right: -3%; }
}

/* Quem somos: retrato do fundador (exceção registrada no DS v2.9.2). Mesma grade de duas colunas dos princípios: foto na primeira, nome na segunda, alinhado à base da foto. */
.fundador { row-gap: 20px; }
.fundador__foto { width: 100%; max-width: 280px; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; filter: grayscale(1); border-top-right-radius: var(--radius-k-card); }
.fundador__nome { gap: 4px; }
.fundador__nome .h3, .fundador__nome p { margin: 0; }
@media (min-width: 760px) { .fundador { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; align-items: end; } .fundador__foto { max-width: 400px; } }

/* ---------- Ajustes da revisão de design (20/10) ---------- */
/* Primeira seção das páginas internas: o cabeçalho já tem a linha. */
main > .sec-topo:first-child { border-top: 0; }
/* Seções brancas seguidas: fio fino e metade do espaço. */
.fio-secao { border: 0; border-top: 1px solid var(--linha); margin: 0; }
.sec-junta { padding-top: 40px; }
/* Capa do filme: frase em cima, ação embaixo no celular. */
@media (max-width: 759px) {
	.vk-player__pe { flex-direction: column; align-items: flex-start; gap: 12px; }
	.vk-player__frase { font-size: 20px; }
	.vk-player__play { width: 48px; height: 48px; }
}
@media (min-width: 760px) { .vk-player__frase { max-width: 60%; } }
/* Cartões das quatro perguntas: texto no topo, "Ver soluções" no pé. */
.card-pergunta { justify-content: space-between; gap: 20px; min-height: 0; }
@media (min-width: 760px) { .card-pergunta { min-height: 200px; } }
/* Títulos que são frase inteira: menores no celular. */
@media (max-width: 759px) { .h1-frase { font-size: 32px; line-height: 1.08; } }
/* Logos: 7 por linha no computador. */
@media (min-width: 1024px) { .clientes { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* Bloco do pictograma: quadrado no computador, faixa baixa no celular. */
.area-picto { aspect-ratio: 1 / 1; }
.area-picto .vk-pictograma { width: 42%; }
@media (max-width: 759px) { .area-picto { aspect-ratio: 16 / 6; } .area-picto .vk-pictograma { width: 18%; } .area-topo { padding-bottom: 32px; } }
/* Foto do domínio: quadrada no computador, faixa baixa no celular (P&B, canto k). */
.area-foto { aspect-ratio: 1 / 1; height: auto; }
@media (max-width: 759px) { .area-foto { aspect-ratio: 16 / 7; } }
/* Edição de O Próximo Degrau: leitura em uma coluna, até 720px. */
.edicao { display: flex; flex-direction: column; gap: 40px; }
.edicao__topo { gap: 16px; max-width: 900px; }
.edicao__texto { max-width: 720px; display: flex; flex-direction: column; gap: 20px; color: var(--azul-noite); }
.edicao__texto p { margin: 0; }
.edicao__assina { margin-top: 12px !important; font-weight: 600; }
.edicao__pe { max-width: 720px; display: flex; flex-direction: column; gap: 24px; padding-top: 32px; border-top: 1px solid var(--linha); }

/* ---------- Revisão final (1.0.25) ---------- */
/* Quebra de linha: títulos equilibrados, sem palavra sozinha na última linha. */
h1, h2, h3, .display, .h1, .h2, .h3, .h4, .pergunta-card, .vk-pergunta, .vk-rodape__frase, .vk-player__frase, .tag, .vk-rodape__tag { text-wrap: balance; }
p, .body, .body-lg, .small, .vk-solucao__texto { text-wrap: pretty; }
/* Cartões das áreas na página inicial: "Ver soluções" na mesma altura nos quatro. */
a.fio-noite .ver { margin-top: auto; }
/* Abas das áreas no celular: mais juntas e com um esmaecido na borda indicando que há mais abas ao lado. */
@media (max-width: 759px) {
	.vk-abas { gap: 20px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.vk-abas.vk-abas--fim { -webkit-mask-image: none; mask-image: none; }
	.vk-aba { flex: none; }
}

/* Rodapé compacto (21/10/2026): ícones de contato, linha legal, tag e política, centralizados */
.vk-rodape__pe--centro { flex-direction: column; justify-content: center; text-align: center; gap: 12px; padding-top: 24px; }
.vk-rodape__icones { display: flex; align-items: center; justify-content: center; gap: 8px; }
.vk-rodape__icones a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; }
.vk-rodape__icones a:hover { background: rgba(255, 255, 255, .12); }
.vk-rodape__legal { margin: 0; max-width: 760px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--texto-sobre-azul); text-wrap: balance; }
.vk-rodape__legal .nw { white-space: nowrap; }