/* Vokattus — componentes da landing (CSS puro, prefixo vk-). Todo valor de cor vem dos tokens. */

body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--font-sans); }
.vk *, .vk *::before, .vk *::after { box-sizing: border-box; }

/* Tinta do logo: cada arte existe em branco e preto; mostre a que contrasta com o tema. */
.vk-tinta-preto { display: none; }
[data-theme="branco"] .vk-tinta-branco { display: none; }
[data-theme="branco"] .vk-tinta-preto { display: block; }

/* Utilitários de tipo */
.vk-rotulo { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-fraco); }
.vk-display { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .92; letter-spacing: -.01em; color: var(--texto); margin: 0; text-wrap: balance; }

/* Foco: anel sólido de 2px com afastamento, igual em todo controle */
.vk-btn:focus-visible, .vk-campo__input:focus-visible, .vk-header__link:focus-visible,
.vk-faq__item summary:focus-visible, .vk-rodape a:focus-visible {
  outline: var(--borda-media) solid var(--foco); outline-offset: 2px;
}

/* ---------- Botao ---------- */
.vk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--espaco-3);
  min-height: 52px; padding: 0 var(--espaco-8);
  font-family: var(--font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  border: var(--borda-fina) solid transparent; border-radius: var(--raio-0); cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vk-btn--primario { background: var(--acao); color: var(--acao-texto); }
.vk-btn--primario:hover { background: var(--acao-hover); }
.vk-btn--contorno { background: transparent; color: var(--texto); border-color: var(--linha-forte); }
.vk-btn--contorno:hover { border-color: var(--texto); }
.vk-btn--texto { background: transparent; color: var(--texto); padding: 0; min-height: 44px; border-bottom-color: var(--texto); }
.vk-btn--bloco { width: 100%; }
.vk-btn--p { min-height: 40px; padding: 0 var(--espaco-6); font-size: 12px; }
.vk-btn[disabled] { opacity: .4; cursor: not-allowed; }
.vk-btn__tt { width: 18px; height: auto; display: block; }

/* ---------- Grade (grafismo da construção do TT) ---------- */
.vk-grade {
  position: relative;
  background-image:
    linear-gradient(90deg,
      transparent 0 9%, var(--linha-grade) 9% calc(9% + 1px), transparent 0 23.6%,
      var(--linha-grade) 23.6% calc(23.6% + 1px), transparent 0 27%,
      var(--linha-grade) 27% calc(27% + 1px), transparent 0 38.2%,
      var(--linha-grade) 38.2% calc(38.2% + 1px), transparent 0 50%,
      var(--linha-grade) 50% calc(50% + 1px), transparent 0 61.8%,
      var(--linha-grade) 61.8% calc(61.8% + 1px), transparent 0 73%,
      var(--linha-grade) 73% calc(73% + 1px), transparent 0 76.4%,
      var(--linha-grade) 76.4% calc(76.4% + 1px), transparent 0 91%,
      var(--linha-grade) 91% calc(91% + 1px), transparent 0),
    linear-gradient(180deg,
      transparent 0 14%, var(--linha-grade) 14% calc(14% + 1px), transparent 0 23.6%,
      var(--linha-grade) 23.6% calc(23.6% + 1px), transparent 0 88%,
      var(--linha-grade) 88% calc(88% + 1px), transparent 0);
}

/* ---------- Cabecalho ---------- */
.vk-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-6);
  padding-block: var(--espaco-6); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: var(--borda-fina) solid var(--linha); background: var(--fundo);
}
.vk-header__logo img { height: 18px; width: auto; }
.vk-header__nav { display: flex; gap: var(--espaco-8); }
.vk-header__link { font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave); text-decoration: none; padding-block: var(--espaco-2); }
.vk-header__link:hover { color: var(--texto); }
@media (max-width: 760px) { .vk-header__nav { display: none; } }

/* ---------- Hero ---------- */
.vk-hero { position: relative; overflow: hidden; background: var(--fundo); }
.vk-hero__inner {
  position: relative; max-width: var(--largura-pagina); margin: 0 auto;
  display: grid; grid-template-columns: var(--aurea-maior) 1fr; gap: var(--espaco-12); align-items: end;
  padding-block: var(--espaco-32) var(--espaco-24);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.vk-hero__titulo { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(56px, 9vw, 112px); line-height: .92; letter-spacing: -.01em; margin: var(--espaco-6) 0 0; text-wrap: balance; }
.vk-hero__lead { font-size: 20px; line-height: 32px; font-weight: 300; color: var(--texto-suave); margin: 0 0 var(--espaco-8); max-width: 40ch; }
.vk-hero__foto { aspect-ratio: 4 / 5; max-width: 100%; background: var(--superficie); position: relative; overflow: hidden; }
.vk-hero__foto img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
@media (max-width: 860px) { .vk-hero__inner { grid-template-columns: 1fr; padding-block: var(--espaco-16); } }

/* ---------- Destaque (frase cheia + vazada) ---------- */
.vk-destaque { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: .9; margin: 0; font-size: clamp(48px, 8vw, 96px); letter-spacing: -.005em; color: var(--texto); }
.vk-destaque__vazado { color: transparent; -webkit-text-stroke: var(--borda-media) var(--texto); paint-order: stroke; }
.vk-destaque--empilhado span { display: block; }
.vk-destaque--marcador { font-family: var(--font-marcador); font-weight: 400; text-transform: uppercase; line-height: .9; }
@supports not (-webkit-text-stroke: 1px black) { .vk-destaque__vazado { color: var(--texto-fraco); } }

/* ---------- Faixa ---------- */
.vk-faixa { overflow: hidden; border-block: var(--borda-fina) solid var(--linha); background: var(--fundo); }
.vk-faixa__trilho { display: flex; width: max-content; gap: var(--espaco-8); align-items: center; padding-block: var(--espaco-4); }
.vk-faixa__item { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; text-transform: uppercase; white-space: nowrap; color: var(--texto); }
.vk-faixa__item--vazado { color: transparent; -webkit-text-stroke: var(--borda-fina) var(--texto); }
.vk-faixa__sep { width: 22px; height: auto; display: block; }
.vk-faixa--anda .vk-faixa__trilho { animation: vk-faixa 40s linear infinite; }
@keyframes vk-faixa { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .vk-faixa--anda .vk-faixa__trilho { animation: none; } }

/* ---------- Secao (cabeçalho de seção) ---------- */
.vk-secao { display: grid; grid-template-columns: var(--aurea-menor) 1fr; gap: var(--espaco-8); align-items: end; padding-bottom: var(--espaco-6); border-bottom: var(--borda-fina) solid var(--linha); }
.vk-secao__titulo { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(36px, 5vw, 48px); line-height: 1; margin: var(--espaco-3) 0 0; text-wrap: balance; }
.vk-secao__apoio { font-size: 16px; line-height: 26px; color: var(--texto-suave); margin: 0; max-width: var(--largura-texto); }
@media (max-width: 720px) { .vk-secao { grid-template-columns: 1fr; } }

/* ---------- Atributos ---------- */
.vk-atributos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--borda-fina) solid var(--linha); }
.vk-atributos__item { padding: var(--espaco-8) var(--espaco-6) var(--espaco-8) 0; border-right: var(--borda-fina) solid var(--linha); min-width: 0; }
.vk-atributos__item + .vk-atributos__item { padding-left: var(--espaco-6); }
.vk-atributos__item:last-child { border-right: 0; }
.vk-atributos__nome { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; text-transform: uppercase; margin: 0 0 var(--espaco-3); }
.vk-atributos__texto { font-size: 14px; line-height: 22px; color: var(--texto-suave); margin: 0; }
@media (max-width: 860px) {
  .vk-atributos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk-atributos__item:nth-child(2) { border-right: 0; }
  .vk-atributos__item:nth-child(3) { padding-left: 0; }
  .vk-atributos__item:nth-child(n+3) { border-top: var(--borda-fina) solid var(--linha); }
}

/* ---------- Etiqueta (inspirada na etiqueta tecida da gola) ---------- */
.vk-etiqueta { display: inline-flex; align-items: center; gap: var(--espaco-2); padding: 6px var(--espaco-3); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; background: var(--texto); color: var(--fundo); border-radius: var(--raio-0); }
.vk-etiqueta--contorno { background: transparent; color: var(--texto); border: var(--borda-fina) solid var(--linha-forte); }
.vk-etiqueta--tamanho { min-width: 32px; justify-content: center; letter-spacing: .1em; }

/* ---------- CardProduto ---------- */
.vk-produto { display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; color: var(--texto); text-decoration: none; }
.vk-produto__foto { position: relative; aspect-ratio: 4 / 5; max-width: 100%; background: var(--superficie); overflow: hidden; }
.vk-produto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vk-produto__selo { position: absolute; top: var(--espaco-4); left: var(--espaco-4); }
.vk-produto__nome { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.1; text-transform: uppercase; margin: 0; }
.vk-produto__desc { font-size: 14px; line-height: 22px; color: var(--texto-suave); margin: 0; }
.vk-produto__preco { display: flex; align-items: baseline; gap: var(--espaco-2); font-variant-numeric: tabular-nums; }
.vk-produto__de { font-size: 14px; color: var(--texto-fraco); text-decoration: line-through; }
.vk-produto__por { font-family: var(--font-display); font-weight: 500; font-size: 24px; }

/* ---------- Oferta (preço de campanha, como no OOH) ---------- */
.vk-oferta { display: inline-grid; grid-template-columns: auto auto; gap: var(--espaco-2) var(--espaco-6); align-items: end; font-variant-numeric: tabular-nums; }
.vk-oferta__produto { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave); }
.vk-oferta__valor { display: flex; flex-direction: column; gap: var(--espaco-1); }
.vk-oferta__de { font-size: 14px; color: var(--texto-fraco); text-decoration: line-through; }
.vk-oferta__por { font-family: var(--font-display); font-weight: 500; font-size: 56px; line-height: 1; }
.vk-oferta__por small { font-size: 20px; margin-right: var(--espaco-1); vertical-align: top; }
.vk-oferta__desconto { border: var(--borda-fina) solid var(--texto); padding: var(--espaco-2) var(--espaco-3); text-align: center; }
.vk-oferta__desconto b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1; }
.vk-oferta__desconto span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

/* ---------- Campo ---------- */
.vk-campo { display: flex; flex-direction: column; gap: var(--espaco-2); min-width: 0; }
.vk-campo__rotulo { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-suave); }
.vk-campo__input {
  height: 52px; width: 100%; padding: 0 var(--espaco-4); font: 400 16px/24px var(--font-sans);
  color: var(--texto); background: transparent; border: var(--borda-fina) solid var(--linha-forte); border-radius: var(--raio-0);
  appearance: none;
}
.vk-campo__input::placeholder { color: var(--texto-fraco); }
.vk-campo__input:hover { border-color: var(--texto-suave); }
select.vk-campo__input { background-image: linear-gradient(45deg, transparent 50%, var(--texto) 50%), linear-gradient(135deg, var(--texto) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: var(--espaco-12); }
.vk-campo__ajuda { font-size: 12px; line-height: 18px; color: var(--texto-fraco); margin: 0; }
.vk-campo--erro .vk-campo__input { border: var(--borda-media) solid var(--erro); }
.vk-campo--erro .vk-campo__ajuda { color: var(--erro); }

/* ---------- Formulario ---------- */
.vk-form { display: flex; flex-direction: column; gap: var(--espaco-6); max-width: var(--largura-form); padding: var(--espaco-8); background: var(--superficie); }
.vk-form__topo { display: flex; flex-direction: column; gap: var(--espaco-3); }
.vk-form__titulo { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.05; text-transform: uppercase; margin: 0; }
.vk-form__apoio { font-size: 14px; line-height: 22px; color: var(--texto-suave); margin: 0; }
.vk-form__campos { display: grid; gap: var(--espaco-4); }
.vk-form__legal { font-size: 12px; line-height: 18px; color: var(--texto-fraco); margin: 0; }
@media (max-width: 480px) { .vk-form { padding: var(--espaco-6); } }

/* ---------- FAQ ---------- */
.vk-faq { border-top: var(--borda-fina) solid var(--linha); }
.vk-faq__item { border-bottom: var(--borda-fina) solid var(--linha); }
.vk-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--espaco-6); padding-block: var(--espaco-6); font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.2; text-transform: uppercase; }
.vk-faq__item summary::-webkit-details-marker { display: none; }
.vk-faq__item summary::after { content: "+"; font-family: var(--font-sans); font-weight: 300; font-size: 28px; line-height: 1; color: var(--texto-suave); }
.vk-faq__item[open] summary::after { content: "–"; }
.vk-faq__resposta { margin: 0; padding-bottom: var(--espaco-6); max-width: var(--largura-texto); font-size: 16px; line-height: 26px; color: var(--texto-suave); }

/* ---------- Rodape ---------- */
.vk-rodape { border-top: var(--borda-fina) solid var(--linha); padding-block: var(--espaco-16) var(--espaco-8); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); background: var(--fundo); }
.vk-rodape__grid { max-width: var(--largura-pagina); margin: 0 auto; display: grid; grid-template-columns: var(--aurea-menor) 1fr 1fr; gap: var(--espaco-8); }
.vk-rodape__logo img { width: 120px; height: auto; }
.vk-rodape__frase { margin: var(--espaco-4) 0 0; font-size: 14px; color: var(--texto-suave); }
.vk-rodape h4 { margin: 0 0 var(--espaco-4); font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-fraco); }
.vk-rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-2); }
.vk-rodape a { color: var(--texto-suave); text-decoration: none; font-size: 14px; }
.vk-rodape a:hover { color: var(--texto); }
.vk-rodape__base { max-width: var(--largura-pagina); margin: var(--espaco-12) auto 0; padding-top: var(--espaco-6); border-top: var(--borda-fina) solid var(--linha); display: flex; justify-content: space-between; gap: var(--espaco-4); flex-wrap: wrap; font-size: 12px; color: var(--texto-fraco); }
@media (max-width: 720px) { .vk-rodape__grid { grid-template-columns: 1fr 1fr; } .vk-rodape__marca { grid-column: 1 / -1; } }