/* Vetmat: estilo da página.
   Identidade do Instagram aprovado pela Vetmat: azul em degradê como base, vermelho nos botões e
   destaques, ciano em detalhes, cartões brancos para os produtos. system.css continua dando a base
   (grade, campos, botões); aqui fica o desenho do site. */

:root {
  --vm-azul-fundo: #042b4b;
  --vm-azul-escuro: #063b64;
  --vm-azul: #007eb8;
  --vm-ciano: #08bce0;
  --vm-vermelho: #e30620;
  --vm-vermelho-escuro: #b8051a;
  --vm-branco: #ffffff;
  --vm-texto-claro: #d7e6f2;
  --vm-degrade: linear-gradient(135deg, #063b64 0%, #0a5590 52%, #007eb8 100%);
  --vm-degrade-hero: radial-gradient(120% 120% at 85% 10%, #1d9fd6 0%, #007eb8 28%, #0a5590 58%, #063b64 100%);
  --vm-sombra: 0 18px 40px -18px rgba(2, 25, 45, 0.55);
  --vm-topo-h: 124px;
  --action: var(--vm-vermelho); --action-ink: #fff;
}
@media (max-width: 1023px) { :root { --vm-topo-h: 124px; } }

html { scroll-padding-top: var(--vm-topo-h); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--vm-azul-fundo); color: var(--vm-branco); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; }
em { font-style: normal; color: var(--vm-ciano); }

/* a página não segue mais a regra de uma seção por tela */
main > :is(section, .section) { height: auto !important; min-height: 0 !important; padding: 0; }
main > :is(section, .section).vm-secao { padding: 96px 0; }
main > :is(section, .section) > :is(.wrap, .container) { height: auto !important; }
main > :is(section, .section) > :is(.wrap, .container):not(.vm-selos, .vm-atend, .vm-cat__grade, .vm-pp__grade, .vm-pp-desc__grade, .vm-qs-hero__grade, .vm-qs-numeros, .vm-qs-hist, .vm-qs-amb, .vm-qs-fim__caixa, .vm-404__caixa, .vm-lab-topo__grade, .vm-lab-duvidas) { display: block !important; }
main > :is(section, .section) > .vm-selos { display: grid !important; }
main > :is(section, .section) > .vm-atend { display: grid !important; }

.vm-pular { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 16px; background: #fff; color: var(--vm-azul-escuro); border-radius: 8px; }
.vm-pular:focus { top: 16px; }

/* botões */
.btn--primary { background: var(--vm-vermelho); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--vm-vermelho-escuro); }
.vm-btn-claro { background: rgba(255, 255, 255, 0.12); color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); font-weight: 600; }
.vm-btn-claro:hover { background: rgba(255, 255, 255, 0.22); }
.vm-btn-contorno { background: #fff; color: var(--vm-azul-escuro); border: 1px solid #c9d8e4; font-weight: 600; }
.vm-btn-contorno:hover { border-color: var(--vm-azul-escuro); }
.btn { transition: background-color 160ms, transform 120ms, border-color 160ms; }
.btn:active { transform: translateY(1px) scale(0.99); }
:focus-visible { outline: 3px solid var(--vm-ciano); outline-offset: 2px; }

/* ---------------------------------------------------------------- cabeçalho */
.vm-topo { position: sticky; top: 0; z-index: 40; }
.vm-topo__barra { background: #fff; color: var(--vm-azul-escuro); border-bottom: 1px solid #dbe6ef; }
.vm-topo__linha { display: flex; align-items: center; gap: 24px; height: 76px; }
.vm-logo { display: inline-flex; flex: none; }
.vm-logo img { height: 52px; width: auto; display: block; }
.vm-logo--placa { background: #fff; border-radius: 12px; padding: 8px 12px; }
.vm-logo--placa img { height: 44px; }
.vm-topo__acoes { display: flex; align-items: center; gap: 16px; flex: none; margin-left: auto; }
.vm-topo__carrinho { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px; background: none; border: 0; border-radius: 10px;
  font: 600 15px/1 var(--font-text); color: inherit; cursor: pointer; }
.vm-topo__carrinho:hover { background: #eef4f8; }
.vm-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--vm-vermelho); color: #fff;
  font: 700 12px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.vm-count[data-zero] { background: #dbe6ef; color: var(--vm-azul-escuro); }
.vm-topo__menu { display: none; width: 44px; height: 44px; place-items: center; background: none; border: 1px solid #c9d8e4; border-radius: 10px; color: inherit; cursor: pointer; }

.vm-topo__faixa { background: var(--vm-azul-escuro); color: #fff; }
.vm-topo__faixa-linha { display: flex; align-items: center; justify-content: space-between; height: 48px; gap: 24px; }
.vm-topo__links { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.vm-topo__links :is(a, button) { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: none; border: 0;
  font: 600 15px/1 var(--font-text); color: #fff; cursor: pointer; text-decoration: none; transition: background-color 160ms; }
.vm-topo__links :is(a, button):hover { background: rgba(255, 255, 255, 0.12); }
.vm-topo__fone { font-weight: 600; font-size: 15px; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.vm-topo__fone::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vm-ciano); }
.vm-topo__fone:hover { text-decoration: underline; text-underline-offset: 4px; }

/* busca */
.vm-busca { position: relative; flex: 1 1 auto; max-width: 620px; margin: 0 auto; }
.vm-busca__lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--vm-azul); pointer-events: none; }
.vm-busca input { width: 100%; height: 48px; padding: 0 16px 0 48px; border: 2px solid #c9d8e4; border-radius: 999px; background: #f5f9fc;
  font: 500 16px/1 var(--font-text); color: var(--vm-azul-escuro); transition: border-color 160ms, background-color 160ms; }
.vm-busca input::placeholder { color: #6a8197; }
.vm-busca input:focus { outline: none; border-color: var(--vm-azul); background: #fff; }
.vm-busca__painel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(70vh, 560px); overflow-y: auto; background: #fff; color: var(--vm-azul-escuro);
  border-radius: 16px; box-shadow: var(--vm-sombra); border: 1px solid #dbe6ef; padding: 12px; z-index: 50; }
.vm-busca__painel[hidden] { display: none; }
.vm-busca__filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.vm-busca__filtros:empty { display: none; }
.vm-filtro { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: var(--vm-azul-escuro); color: #fff;
  border: 0; font: 600 14px/1 var(--font-text); cursor: pointer; }
.vm-busca__info { font-size: 14px; color: #4a6478; padding: 8px 4px; }
.vm-busca__info:empty { display: none; }
.vm-busca__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.vm-res { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; }
.vm-res:hover { background: #f1f6fa; }
.vm-res img { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid #e3ecf3; background: #fff; }
.vm-res__nome { font-weight: 600; line-height: 1.3; }
.vm-res__meta { font-size: 14px; color: #4a6478; }
.vm-res .btn { height: 36px; padding: 0 14px; font-size: 14px; }
.vm-res .btn[data-na-cotacao] { background: var(--vm-azul-escuro); }
.vm-busca__vazio { padding: 8px 4px 4px; display: grid; gap: 12px; }
.vm-busca__vazio .btn { justify-self: start; }

/* ---------------------------------------------------------------- banner */
.vm-hero { background: var(--vm-degrade-hero); position: relative; overflow: hidden; }
.vm-hero::after { content: ""; position: absolute; right: -10%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 188, 224, 0.28), transparent 65%); pointer-events: none; }
.vm-hero__palco { position: relative; z-index: 1; min-height: 520px; padding: 64px 0 88px; }
.vm-slide { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 48px; animation: vm-entra 600ms cubic-bezier(.2, .7, .2, 1) both; }
.vm-slide[hidden] { display: none; }
@keyframes vm-entra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vm-slide { animation: none; } }
.vm-slide__texto { display: grid; gap: 20px; align-content: start; }
.vm-selo { justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--vm-vermelho);
  color: #fff; font: 700 14px/1 var(--font-text); }
.vm-slide :is(h1, h2) { font-size: clamp(34px, 3.4vw + 8px, 56px); line-height: 1.06; letter-spacing: -0.03em; color: #fff; max-width: 15ch; }
.vm-slide__lead { font-size: clamp(17px, 0.5vw + 14px, 20px); line-height: 1.5; color: var(--vm-texto-claro); max-width: 46ch; }
.vm-slide .btn-row { margin-top: 8px; }
.vm-slide__fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; height: 400px; }
.vm-slide__fotos img { min-height: 0; min-width: 0; }
.vm-slide__fotos img { width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--vm-sombra); }
.vm-slide__fotos img:first-child { grid-row: span 2; padding: 28px; }
.vm-hero__controles { position: absolute; left: 0; bottom: 32px; display: flex; align-items: center; gap: 16px; }
.vm-hero__pontos { display: flex; gap: 8px; }
.vm-hero__pontos button { width: 28px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width 300ms, background-color 300ms; }
.vm-hero__pontos button[aria-current="true"] { width: 48px; background: #fff; }
.vm-hero__pausa { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: none; color: #fff; cursor: pointer; }
.vm-hero__pausa .i-play { display: none; }
.vm-hero__pausa[aria-pressed="true"] .i-play { display: block; }
.vm-hero__pausa[aria-pressed="true"] .i-pausa { display: none; }

.vm-selos { list-style: none; margin: 0 auto; padding: 0; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(4, 43, 75, 0.55); border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; border-radius: 20px 20px 0 0; }
.vm-selos li { display: grid; gap: 2px; padding: 20px 24px; }
.vm-selos li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.vm-selos b { font-size: 18px; color: #fff; }
.vm-selos span { font-size: 14px; color: var(--vm-texto-claro); }

/* ---------------------------------------------------------------- seções */
.vm-secao { padding: 96px 0; }
.vm-secao--escura { background: var(--vm-azul-escuro); }
.vm-secao--degrade { background: var(--vm-degrade); }
.vm-cabeca { display: grid; gap: 12px; max-width: 720px; margin-bottom: 40px; }
.vm-cabeca h2 { font-size: clamp(30px, 2vw + 16px, 44px); line-height: 1.1; color: #fff; }
.vm-cabeca p { font-size: 18px; line-height: 1.55; color: var(--vm-texto-claro); }
.vm-cabeca--linha { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.vm-cabeca--linha > div { display: grid; gap: 12px; max-width: 720px; }
.vm-link-claro { background: none; border: 0; padding: 0; font: 600 16px/1.4 var(--font-text); color: #fff; cursor: pointer; text-decoration: underline; text-decoration-color: var(--vm-ciano);
  text-underline-offset: 6px; text-decoration-thickness: 2px; }
.vm-link-claro:hover { color: var(--vm-ciano); }

/* linhas */
.vm-linhas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vm-linha { text-decoration: none; display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 0 0 24px; background: #fff; color: var(--vm-azul-escuro); border: 0; border-radius: 24px;
  text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: transform 200ms, box-shadow 200ms; }
.vm-linha:hover { transform: translateY(-4px); box-shadow: var(--vm-sombra); }
.vm-linha__img { display: block; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #eef6fb, #d8eaf5); margin-bottom: 12px; overflow: hidden; }
.vm-linha__img img { width: 100%; height: 100%; object-fit: contain; padding: 20px; mix-blend-mode: multiply; transition: transform 500ms; }
.vm-linha:hover .vm-linha__img img { transform: scale(1.05); }
.vm-linha__nome { padding: 0 24px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.vm-linha__txt { padding: 0 24px; color: #4a6478; line-height: 1.5; }
.vm-linha__mais { margin: 8px 24px 0; justify-self: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: var(--vm-vermelho); color: #fff; font-weight: 600; font-size: 15px; }
.vm-linha:hover .vm-linha__mais svg { transform: translateX(3px); }
.vm-linha__mais svg { transition: transform 200ms; }

/* produtos */
.vm-produtos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vm-prod { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 20px; background: #fff; color: var(--vm-azul-escuro); border-radius: 20px; transition: transform 200ms, box-shadow 200ms; }
.vm-prod:hover { transform: translateY(-3px); box-shadow: var(--vm-sombra); }
.vm-prod__media { aspect-ratio: 4 / 3; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: #fff; }
.vm-prod__media img { width: 100%; height: 100%; object-fit: contain; transition: transform 500ms; }
.vm-prod:hover .vm-prod__media img { transform: scale(1.04); }
.vm-prod__lab { font-size: 13px; font-weight: 600; color: #006a9c; }
.vm-prod h3 { font-size: 19px; line-height: 1.25; }
.vm-prod__txt { flex: 1; color: #4a6478; font-size: 15px; line-height: 1.5; }
.vm-prod__add { margin-top: 10px; width: 100%; background: var(--vm-vermelho); color: #fff; font-weight: 600; }
.vm-prod__add:hover { background: var(--vm-vermelho-escuro); }
.vm-prod__add[data-na-cotacao] { background: var(--vm-azul-escuro); }

/* laboratórios */
.vm-labs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.vm-labs :is(button, a) { width: 100%; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 12px; height: 168px; padding: 24px 16px 18px; background: #fff;
  border: 0; border-radius: 20px; cursor: pointer; font: inherit; transition: transform 200ms, box-shadow 200ms; }
.vm-labs :is(button, a):hover { transform: translateY(-4px); box-shadow: var(--vm-sombra); }
.vm-labs img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.vm-labs span { font-size: 14px; font-weight: 600; color: #006a9c; }

/* atendimento */
.vm-atend { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.vm-atend__texto h2 { font-size: clamp(30px, 2vw + 16px, 44px); line-height: 1.1; }
.vm-atend__texto > p { margin-top: 16px; font-size: 18px; line-height: 1.55; color: var(--vm-texto-claro); max-width: 46ch; }
.vm-contatos { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; }
.vm-contatos li { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.vm-contatos span { color: var(--vm-texto-claro); }
.vm-contatos :is(a, b) { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.vm-contatos a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vm-quiz-inicio { display: grid; gap: 16px; padding: 40px; background: #fff; color: var(--vm-azul-escuro); border-radius: 24px; box-shadow: var(--vm-sombra); }
.vm-quiz-inicio .btn { justify-self: start; min-width: 180px; }

/* peças do quiz (no cartão e na tela cheia) */
.vm-quiz__passo { font-size: 14px; font-weight: 600; color: #006a9c; font-variant-numeric: tabular-nums; }
.vm-quiz__pergunta { font: 700 clamp(26px, 1.6vw + 16px, 40px)/1.12 var(--font-display); letter-spacing: -0.025em; }
.vm-quiz__campo { width: 100%; height: 60px; padding: 0 20px; border: 2px solid #c9d8e4; border-radius: 14px; background: #f5f9fc; font: 500 20px/1 var(--font-text); color: var(--vm-azul-escuro); }
.vm-quiz__campo:focus { outline: none; border-color: var(--vm-azul); background: #fff; }
.vm-quiz__campo[aria-invalid="true"] { border-color: var(--vm-vermelho); }
.vm-erro { color: var(--vm-vermelho); font-size: 15px; font-weight: 600; margin: 0; }

/* quiz em tela cheia */
.vm-tela { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--vm-degrade-hero); color: #fff; overflow-y: auto; }
.vm-tela[hidden] { display: none; }
.vm-tela__topo { position: sticky; top: 0; z-index: 1; background: rgba(4, 43, 75, 0.35); backdrop-filter: blur(6px); }
.vm-tela__topo-linha { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.vm-tela__fechar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: none; color: #fff; cursor: pointer; }
.vm-tela__fechar:hover { background: rgba(255, 255, 255, 0.14); }
.vm-tela__progresso { height: 4px; background: rgba(255, 255, 255, 0.18); }
.vm-tela__progresso span { display: block; height: 100%; width: 0; background: var(--vm-ciano); transition: width 400ms; }
.vm-tela__corpo { flex: 1; width: min(100% - 48px, 720px); padding: 72px 0 96px; display: grid; align-content: start; gap: 20px; animation: vm-entra 450ms both; }
.vm-tela .vm-quiz__passo { color: var(--vm-ciano); }
.vm-tela .vm-quiz__pergunta { font-size: clamp(30px, 2.4vw + 16px, 52px); color: #fff; }
.vm-tela .vm-quiz__dica { color: var(--vm-texto-claro); font-size: 17px; }
.vm-tela .vm-quiz__campo { background: #fff; border-color: transparent; }
.vm-tela .vm-erro { color: #ffd2d7; background: rgba(227, 6, 32, 0.35); padding: 10px 14px; border-radius: 10px; justify-self: start; }
.vm-opcoes { display: grid; gap: 12px; margin-top: 8px; }
.vm-opcao { display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 12px 20px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px; font: 600 18px/1.3 var(--font-text); text-align: left; cursor: pointer; transition: background-color 160ms, border-color 160ms, transform 120ms; }
.vm-opcao:hover { background: rgba(255, 255, 255, 0.2); border-color: #fff; }
.vm-opcao:active { transform: scale(0.99); }
.vm-opcao__letra { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.6); font-size: 14px; }
.vm-opcao[aria-pressed="true"] { background: #fff; color: var(--vm-azul-escuro); border-color: #fff; }
.vm-opcao[aria-pressed="true"] .vm-opcao__letra { background: var(--vm-vermelho); color: #fff; border-color: var(--vm-vermelho); }
.vm-tela__acoes { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.vm-tela__acoes .btn { height: 52px; padding: 0 28px; font-size: 17px; }
.vm-tela__voltar { background: none; border: 0; padding: 0; font: 600 16px/1 var(--font-text); color: var(--vm-texto-claro); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.vm-tela__enter { font-size: 14px; color: var(--vm-texto-claro); }
.vm-resumo { margin: 8px 0 0; padding: 20px 24px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; display: grid; gap: 6px; }
.vm-resumo span { color: var(--vm-texto-claro); }
.vm-resumo b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- rodapé */
.vm-rodape { background: var(--vm-azul-fundo); color: var(--vm-texto-claro); padding: 80px 0 32px; border-top: 4px solid var(--vm-vermelho); }
.vm-rodape__topo { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 48px; }
.vm-rodape__marca { display: grid; gap: 20px; align-content: start; }
.vm-rodape__marca .vm-logo { justify-self: start; }
.vm-rodape__marca p { line-height: 1.6; max-width: 36ch; }
.vm-redes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vm-redes a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; font-weight: 600; font-size: 14px; text-decoration: none; }
.vm-redes a:hover { background: rgba(255, 255, 255, 0.12); }
.vm-rodape__col h3 { font-size: 15px; color: #fff; margin-bottom: 16px; letter-spacing: 0; }
.vm-rodape__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.vm-rodape__col :is(a, button) { background: none; border: 0; padding: 0; font: inherit; color: var(--vm-texto-claro); text-decoration: none; cursor: pointer; text-align: left; }
.vm-rodape__col :is(a, button):hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.vm-rodape address { font-style: normal; line-height: 1.6; }
.vm-rodape__mapa { display: inline-block; margin-top: 12px; color: #fff !important; font-weight: 600; }
.vm-rodape__base { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 14px; }
.vm-rodape__base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.vm-rodape__base a { color: #fff; text-decoration: none; font-weight: 600; }
.vm-rodape__base a:hover { text-decoration: underline; text-underline-offset: 4px; }
.vm-rodape__nota { margin-top: 16px; font-size: 13px; color: #9fb8cc; max-width: 90ch; }

/* ---------------------------------------------------------------- carrinho */
.vm-cart { position: fixed; z-index: 55; top: 0; right: 0; bottom: 0; width: min(100vw, 420px); display: flex; flex-direction: column; background: #fff; color: var(--vm-azul-escuro);
  box-shadow: -20px 0 50px -20px rgba(2, 25, 45, 0.5); }
.vm-cart[hidden] { display: none; }
.vm-cart__head { flex: none; display: flex; align-items: center; justify-content: space-between; height: 76px; padding: 0 24px; background: var(--vm-azul-escuro); color: #fff; }
.vm-cart__head h2 { font-size: 22px; }
.vm-cart__close { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; border-radius: 10px; color: inherit; cursor: pointer; }
.vm-cart__close:hover { background: rgba(255, 255, 255, 0.14); }
.vm-cart__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; }
.vm-cart__body[hidden] { display: none; }
.vm-cart__empty { color: #4a6478; }
.vm-cart__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.vm-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e3ecf3; }
.vm-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; border: 1px solid #e3ecf3; background: #fff; }
.vm-item__nome { font-weight: 600; }
.vm-item__lab { color: #4a6478; font-size: 14px; }
.vm-item__acoes { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.vm-qtd { display: inline-flex; align-items: center; border: 1px solid #c9d8e4; border-radius: 999px; }
.vm-qtd button { width: 36px; height: 36px; background: none; border: 0; border-radius: 999px; font: 600 18px/1 var(--font-text); color: inherit; cursor: pointer; }
.vm-qtd button:hover { background: #eef4f8; }
.vm-qtd output { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.vm-item__tirar { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; color: #4a6478; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vm-cart .form { align-content: start; }
.vm-cart .field { color: var(--vm-azul-escuro); }
.vm-cart .field textarea { min-height: 72px; }
.vm-tipo { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.vm-tipo legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 14px; }
.vm-tipo label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px; border: 1px solid #c9d8e4; border-radius: 10px; font-weight: 400; font-size: 16px; cursor: pointer; }
.vm-tipo label:has(input:checked) { border-color: var(--vm-azul-escuro); box-shadow: inset 0 0 0 1px var(--vm-azul-escuro); font-weight: 600; }
.vm-tipo input { width: 18px; height: 18px; accent-color: var(--vm-vermelho); }
.vm-cart [aria-invalid="true"] { border-color: var(--vm-vermelho); }
.vm-cart .vm-erro { position: sticky; bottom: 0; padding: 12px; background: #fdecee; border-radius: 8px; }
.vm-cart__lgpd { font-size: 13px; color: #4a6478; }
.vm-cart__lgpd a, .vm-cart__foot a { color: var(--vm-azul); font-weight: 600; }
.vm-cart__foot { flex: none; display: grid; gap: 12px; padding: 20px 24px; border-top: 1px solid #e3ecf3; }
.vm-cart__foot .btn { width: 100%; height: 48px; }
.vm-cart__foot p { margin: 0; color: #4a6478; font-size: 14px; }
.vm-fundo-escuro { position: fixed; inset: 0; z-index: 54; background: rgba(2, 20, 36, 0.45); }

/* barra do celular */
.vm-barra { display: none; }

/* ---------------------------------------------------------------- telas menores */
@media (max-width: 1279px) {
  .vm-labs { grid-template-columns: repeat(3, 1fr); }
  .vm-topo__carrinho-txt { display: none; }
}
@media (max-width: 1023px) {
  .vm-topo__linha { flex-wrap: wrap; height: auto; padding: 10px 0; row-gap: 10px; gap: 12px; }
  .vm-logo img { height: 42px; }
  .vm-busca { order: 3; flex-basis: 100%; max-width: none; }
  .vm-busca input { height: 46px; }
  .vm-topo__menu { display: inline-grid; }
  .vm-topo__faixa { display: none; }
  .vm-topo__faixa.is-aberta { display: block; }
  .vm-topo__faixa-linha { flex-direction: column; align-items: stretch; height: auto; padding: 8px 0 16px; gap: 8px; }
  .vm-topo__links { flex-direction: column; }
  .vm-topo__links :is(a, button) { width: 100%; height: 48px; font-size: 17px; }
  .vm-topo__fone { padding: 0 14px; }
  .vm-hero__palco { min-height: 0; padding: 40px 0 72px; }
  .vm-slide { grid-template-columns: 1fr; gap: 28px; }
  .vm-slide__fotos { height: 240px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
  .vm-slide__fotos img:first-child { grid-row: auto; padding: 16px; }
  .vm-selos { grid-template-columns: 1fr 1fr; }
  .vm-selos li:nth-child(3) { border-left: 0; }
  .vm-selos li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .vm-linhas { grid-template-columns: 1fr; }
  .vm-linha { grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; padding: 0; column-gap: 0; }
  .vm-linha__img { grid-row: 1 / span 3; aspect-ratio: auto; height: 100%; margin: 0; }
  .vm-linha__nome { padding-top: 24px; }
  .vm-linha__mais { margin-bottom: 24px; }
  .vm-produtos { grid-template-columns: repeat(2, 1fr); }
  .vm-atend { grid-template-columns: 1fr; gap: 40px; }
  .vm-rodape__topo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .vm-topo__cta { display: none; }
  .vm-topo__carrinho { padding: 0 8px; }
  .vm-hero__palco { padding: 32px 0 64px; }
  .vm-slide :is(h1, h2) { max-width: none; }
  .vm-slide .btn-row .btn { flex: 1 1 100%; }
  .vm-slide__fotos { height: 150px; gap: 10px; }
  .vm-slide__fotos img, .vm-slide__fotos img:first-child { padding: 10px; border-radius: 14px; }
  .vm-hero__controles { bottom: 24px; }
  .vm-selos { border-radius: 16px 16px 0 0; }
  .vm-selos li { padding: 14px 16px; }
  .vm-selos b { font-size: 16px; }
  main > :is(section, .section).vm-secao { padding: 64px 0; }
  .vm-cabeca p { font-size: 16px; }
  .vm-linha { grid-template-columns: 112px 1fr; }
  .vm-linha__img img { padding: 10px; }
  .vm-linha__nome { padding: 18px 16px 0; font-size: 22px; }
  .vm-linha__txt { padding: 0 16px; font-size: 15px; }
  .vm-linha__mais { margin: 8px 16px 18px; }
  .vm-produtos { gap: 12px; }
  .vm-prod { padding: 10px 10px 14px; border-radius: 16px; }
  .vm-prod h3 { font-size: 16px; }
  .vm-prod__txt { display: none; }
  .vm-prod__add { height: 40px; font-size: 14px; }
  .vm-labs { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .vm-labs :is(button, a) { height: 132px; }
  .vm-labs img { max-height: 56px; }
  .vm-quiz-inicio { padding: 24px; }
  .vm-quiz-inicio .btn { justify-self: stretch; }
  .vm-contatos li { grid-template-columns: 1fr; gap: 4px; }
  .vm-rodape { padding: 56px 0 calc(96px + env(safe-area-inset-bottom)); }
  .vm-rodape__topo { grid-template-columns: 1fr; gap: 32px; }
  .vm-res { grid-template-columns: 48px 1fr; }
  .vm-res img { width: 48px; height: 48px; }
  .vm-res .btn { grid-column: 2; justify-self: start; }
  .vm-barra { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #dbe6ef; }
  .vm-barra .btn { height: 48px; gap: 8px; }
  .vm-barra__carrinho { background: var(--vm-azul-escuro); color: #fff; font-weight: 600; }
  .vm-cart { width: 100vw; }
  .vm-tela__corpo { padding: 40px 0 64px; }
  .vm-opcao { min-height: 56px; font-size: 17px; }
  .vm-tela__acoes .btn { flex: 1 1 100%; }
}

/* com o carrinho aberto no computador a página encolhe e continua à vista */
@media (min-width: 1280px) {
  html.vm-cart-open body { padding-right: 420px; }
  html.vm-cart-open .vm-fundo-escuro { display: none; }
}
@media (min-width: 1280px) and (max-width: 1699px) {
  html.vm-cart-open .vm-topo__fone { display: none; }
  html.vm-cart-open .vm-produtos { grid-template-columns: repeat(3, 1fr); }
  html.vm-cart-open .vm-labs { grid-template-columns: repeat(3, 1fr); }
  html.vm-cart-open .vm-slide__fotos { height: 340px; }
}

/* ---------------------------------------------------------------- páginas legais */
.vm-legal-pagina { background: #fff; color: var(--vm-azul-escuro); }
.vm-legal-topo { background: var(--vm-degrade); border-bottom: 4px solid var(--vm-vermelho); }
.vm-legal-topo__linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 88px; }
.vm-legal-topo .vm-logo { background: #fff; border-radius: 12px; padding: 6px 10px; }
.vm-legal-topo .vm-logo img { height: 44px; }
.vm-legal { max-width: 820px !important; padding: 56px 0 96px; display: grid; gap: 16px; line-height: 1.7; font-size: 17px; }
.vm-legal__data { font-size: 14px; color: #4a6478; }
.vm-legal h1 { font-size: clamp(32px, 2.4vw + 16px, 48px); line-height: 1.1; color: var(--vm-azul-escuro); }
.vm-legal h2 { font-size: 22px; margin-top: 24px; color: var(--vm-azul-escuro); }
.vm-legal ul { padding-left: 22px; display: grid; gap: 8px; }
.vm-legal a { color: var(--vm-azul); font-weight: 600; }
.vm-legal__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vm-legal__nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #c9d8e4; color: var(--vm-azul-escuro); text-decoration: none; font-size: 15px; }
.vm-legal__nav a[aria-current="page"] { background: var(--vm-azul-escuro); border-color: var(--vm-azul-escuro); color: #fff; }
.vm-legal__tabela { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.vm-legal__tabela th, .vm-legal__tabela td { text-align: left; vertical-align: top; padding: 12px; border-bottom: 1px solid #dbe6ef; }
.vm-legal__tabela th { background: #eef4f8; }
.vm-legal-rodape { background: var(--vm-azul-fundo); color: var(--vm-texto-claro); padding: 32px 0; font-size: 14px; }
.vm-legal-rodape .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.vm-legal-rodape a { color: #fff; }
@media (max-width: 639px) {
  .vm-legal-topo .btn { padding: 0 14px; font-size: 14px; }
  .vm-legal__tabela, .vm-legal__tabela tbody, .vm-legal__tabela tr, .vm-legal__tabela td { display: block; }
  .vm-legal__tabela thead { display: none; }
  .vm-legal__tabela td { border: 0; padding: 4px 0; }
  .vm-legal__tabela tr { padding: 12px 0; border-bottom: 1px solid #dbe6ef; }
}
.vm-legal ul { list-style: disc; }

/* ---------------------------------------------------------------- catálogo */
.vm-topo__links a[aria-current="page"] { background: rgba(255, 255, 255, 0.16); }
.vm-cat-topo { background: var(--vm-degrade-hero); padding: 48px 0 56px; }
.vm-cat-topo h1 { font-size: clamp(34px, 2.6vw + 16px, 56px); line-height: 1.06; margin-top: 12px; }
.vm-cat-topo p { margin-top: 12px; font-size: 18px; color: var(--vm-texto-claro); max-width: 60ch; }
.vm-migalha { font-size: 14px; color: var(--vm-texto-claro); display: flex; gap: 8px; }
.vm-migalha a { color: #fff; }
main > :is(section, .section).vm-cat { padding: 48px 0 96px; }
.vm-cat__grade { display: grid !important; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.vm-filtros { position: sticky; top: calc(var(--vm-topo-h) + 16px); display: grid; gap: 20px; padding: 24px; background: #fff; color: var(--vm-azul-escuro); border-radius: 20px;
  max-height: calc(100vh - var(--vm-topo-h) - 32px); overflow-y: auto; }
.vm-filtros__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vm-filtros__topo h2 { font-size: 20px; }
.vm-filtros__limpar { background: none; border: 0; padding: 0; font: 600 14px/1 var(--font-text); color: var(--vm-azul); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.vm-filtros__busca input { width: 100%; height: 44px; padding: 0 14px; border: 2px solid #c9d8e4; border-radius: 10px; background: #f5f9fc; font: 500 16px/1 var(--font-text); color: inherit; }
.vm-filtros__busca input:focus { outline: none; border-color: var(--vm-azul); background: #fff; }
.vm-filtros fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 4px; }
.vm-filtros legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.vm-check { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.vm-check:hover { background: #f1f6fa; }
.vm-check input { width: 18px; height: 18px; accent-color: var(--vm-vermelho); }
.vm-check b { font-weight: 600; font-size: 13px; color: #4a6478; font-variant-numeric: tabular-nums; }
.vm-check.is-vazio { opacity: 0.45; }
.vm-check:has(input:checked) { font-weight: 600; }
.vm-filtros__ver { display: none; }
.vm-cat__barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.vm-cat__total { font-size: 18px; font-weight: 700; }
.vm-cat__ferramentas { display: flex; align-items: center; gap: 12px; }
.vm-cat__abrir-filtros { display: none; }
.vm-cat__ordem { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--vm-texto-claro); }
.vm-cat__ordem select { height: 44px; padding: 0 12px; border-radius: 10px; border: 0; font: 600 15px/1 var(--font-text); color: var(--vm-azul-escuro); background: #fff; }
.vm-cat__ativos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.vm-cat__ativos:empty { display: none; }
.vm-cat__ativos .vm-filtro { background: #fff; color: var(--vm-azul-escuro); }
.vm-cat__produtos { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(3, 1fr); }
.vm-cat__produtos .vm-prod__txt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vm-cat__vazio { padding: 48px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; display: grid; gap: 12px; justify-items: start; }
.vm-cat__vazio h2 { font-size: 26px; }
.vm-cat__vazio p { color: var(--vm-texto-claro); }
.vm-cat__mais { display: flex; justify-content: center; margin-top: 32px; }
@media (min-width: 1440px) { .vm-cat__produtos { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1023px) {
  .vm-cat__grade { grid-template-columns: 1fr; }
  .vm-cat__abrir-filtros { display: inline-flex; }
  .vm-filtros { display: none; position: fixed; inset: 0; z-index: 58; top: 0; max-height: none; border-radius: 0; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); align-content: start; }
  .vm-filtros.is-aberto { display: grid; }
  .vm-filtros__ver { display: inline-flex; position: sticky; bottom: 0; height: 52px; }
  .vm-cat__produtos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .vm-cat-topo { padding: 32px 0 40px; }
  .vm-cat-topo p { font-size: 16px; }
  main > :is(section, .section).vm-cat { padding: 32px 0 64px; }
  .vm-cat__ordem span, .vm-cat__ordem { font-size: 0; gap: 0; }
  .vm-cat__ordem select { font-size: 14px; }
  .vm-cat__vazio { padding: 24px; }
}
/* links nos cartões */
.vm-prod h3 a, a.vm-res__nome { color: inherit; text-decoration: none; }
.vm-prod h3 a:hover, a.vm-res__nome:hover { text-decoration: underline; text-underline-offset: 3px; }
a.vm-prod__media { display: block; }
a.vm-res__nome { display: block; }

/* ---------------------------------------------------------------- página de produto */
.vm-pp-topo { background: var(--vm-azul-escuro); padding: 16px 0; }
main > :is(section, .section).vm-pp { padding: 40px 0 80px; }
.vm-pp__grade { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.vm-galeria { display: grid; gap: 12px; position: sticky; top: calc(var(--vm-topo-h) + 24px); }
.vm-galeria__principal { aspect-ratio: 1; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: var(--vm-sombra); }
.vm-galeria__principal img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.vm-galeria__mini { display: flex; gap: 10px; flex-wrap: wrap; }
.vm-galeria__mini button { width: 80px; height: 80px; padding: 4px; background: #fff; border: 2px solid transparent; border-radius: 12px; cursor: pointer; opacity: 0.75; }
.vm-galeria__mini button[aria-pressed="true"] { border-color: var(--vm-ciano); opacity: 1; }
.vm-galeria__mini img { width: 100%; height: 100%; object-fit: contain; }
.vm-pp__info { display: grid; gap: 20px; align-content: start; }
.vm-pp__info h1 { font-size: clamp(32px, 2.4vw + 14px, 52px); line-height: 1.08; letter-spacing: -0.03em; }
.vm-pp__resumo { font-size: 19px; line-height: 1.55; color: var(--vm-texto-claro); }
.vm-pp__ficha { margin: 0; display: grid; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.vm-pp__ficha > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.vm-pp__ficha dt { color: var(--vm-texto-claro); }
.vm-pp__ficha dd { margin: 0; font-weight: 600; }
.vm-pp__comprar { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin-top: 4px; }
.vm-qtd--grande { background: #fff; color: var(--vm-azul-escuro); border: 0; height: 56px; }
.vm-qtd--grande button { width: 48px; height: 56px; }
.vm-qtd--grande input { width: 56px; height: 56px; border: 0; background: none; text-align: center; font: 700 18px/1 var(--font-text); color: inherit; -moz-appearance: textfield; }
.vm-qtd--grande input::-webkit-inner-spin-button { -webkit-appearance: none; }
.vm-pp__add { flex: 1 1 220px; height: 56px; font-size: 17px; }
.vm-pp__info > .vm-link-claro { justify-self: start; }
.vm-pp__selos { list-style: none; margin: 8px 0 0; padding: 20px; display: grid; gap: 10px; background: rgba(4, 43, 75, 0.45); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; }
.vm-pp__selos li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.vm-pp__selos li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vm-ciano); flex: none; }

.vm-pp-desc { background: #fff; color: var(--vm-azul-escuro); }
.vm-pp-desc__grade { display: grid !important; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.vm-pp-desc h2 { font-size: clamp(26px, 1.4vw + 16px, 36px); margin-bottom: 20px; }
.vm-rico { display: grid; gap: 14px; font-size: 17px; line-height: 1.7; color: #23435f; max-width: 72ch; overflow-wrap: anywhere; }
.vm-rico h3 { font-size: 19px; color: var(--vm-azul-escuro); margin-top: 12px; }
.vm-rico ul, .vm-rico ol { padding-left: 22px; display: grid; gap: 6px; list-style: disc; }
.vm-rico ol { list-style: decimal; }
.vm-rico table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.vm-rico th, .vm-rico td { border: 1px solid #dbe6ef; padding: 8px 10px; text-align: left; vertical-align: top; }
.vm-rico th { background: #eef4f8; }
.vm-pp__fonte { margin-top: 20px; font-size: 14px; color: #4a6478; }
.vm-pp__aviso { margin-top: 20px; padding: 14px 18px; background: #eef4f8; border-left: 4px solid var(--vm-vermelho); border-radius: 8px; font-weight: 600; }
.vm-pp-desc__lado { display: grid; gap: 24px; position: sticky; top: calc(var(--vm-topo-h) + 24px); }
.vm-pp__apres { padding: 24px; border: 1px solid #dbe6ef; border-radius: 20px; }
.vm-pp__apres h2 { font-size: 20px; margin-bottom: 12px; }
.vm-pp__apres ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; list-style: disc; }
.vm-pp__central { padding: 28px; background: var(--vm-degrade); color: #fff; border-radius: 20px; display: grid; gap: 12px; }
.vm-pp__central h2 { font-size: 22px; margin: 0; }
.vm-pp__central p { color: var(--vm-texto-claro); }
.vm-pp__central .btn { justify-self: start; }
.vm-pp__fone { font-size: 14px; }

@media (max-width: 1023px) {
  .vm-pp__grade, .vm-pp-desc__grade { grid-template-columns: 1fr; gap: 32px; }
  .vm-galeria, .vm-pp-desc__lado { position: static; }
  .vm-galeria__principal { max-width: 560px; }
}
@media (max-width: 639px) {
  main > :is(section, .section).vm-pp { padding: 24px 0 56px; }
  .vm-pp__ficha > div { grid-template-columns: 1fr; gap: 2px; }
  .vm-pp__resumo { font-size: 17px; }
  .vm-pp__add { flex-basis: 100%; }
  .vm-qtd--grande { width: 100%; justify-content: space-between; }
  .vm-galeria__mini button { width: 64px; height: 64px; }
}

/* ---------------------------------------------------------------- quem somos */
.vm-qs-hero { background: var(--vm-degrade-hero); padding: 40px 0 0; overflow: hidden; }
.vm-qs-hero__grade { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-bottom: 56px; }
.vm-qs-hero__texto { display: grid; gap: 20px; }
.vm-qs-hero__texto .vm-selo { justify-self: start; }
.vm-qs-hero h1 { font-size: clamp(36px, 3.4vw + 10px, 60px); line-height: 1.04; letter-spacing: -0.03em; max-width: 14ch; }
.vm-qs-hero__lead { font-size: 19px; line-height: 1.6; color: var(--vm-texto-claro); max-width: 52ch; }
.vm-qs-ano { justify-self: end; display: grid; justify-items: end; gap: 4px; }
.vm-qs-ano span { font: 800 clamp(96px, 11vw, 200px)/0.85 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.75);
  background: linear-gradient(180deg, #fff 0%, var(--vm-ciano) 100%); -webkit-background-clip: text; background-clip: text; }
.vm-qs-ano small { font-size: 16px; font-weight: 600; color: var(--vm-texto-claro); }
.vm-qs-numeros { list-style: none; margin: 0 auto; padding: 0; display: grid !important; grid-template-columns: repeat(4, 1fr); background: rgba(4, 43, 75, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 0; border-radius: 20px 20px 0 0; }
.vm-qs-numeros li { display: grid; gap: 4px; padding: 24px; align-content: start; }
.vm-qs-numeros li + li { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.vm-qs-numeros b { font-size: 26px; letter-spacing: -0.02em; }
.vm-qs-numeros span { font-size: 14px; color: var(--vm-texto-claro); line-height: 1.45; }
.vm-qs-hist { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.vm-qs-hist__texto { display: grid; gap: 16px; }
.vm-qs-hist__texto h2 { font-size: clamp(30px, 2vw + 16px, 44px); margin-bottom: 8px; }
.vm-qs-hist__texto p { font-size: 18px; line-height: 1.65; color: var(--vm-texto-claro); }
.vm-qs-linha { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 28px; }
.vm-qs-linha::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--vm-ciano), rgba(8, 188, 224, 0.15)); }
.vm-qs-linha li { position: relative; display: grid; gap: 6px; }
.vm-qs-linha li::before { content: ""; position: absolute; left: -28px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--vm-azul-escuro); border: 3px solid var(--vm-ciano); }
.vm-qs-linha li:last-child::before { background: var(--vm-vermelho); border-color: #fff; }
.vm-qs-linha b { font-size: 22px; color: #fff; }
.vm-qs-linha p { color: var(--vm-texto-claro); line-height: 1.6; }
.vm-qs-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vm-qs-cards li { display: grid; gap: 10px; align-content: start; padding: 28px; background: #fff; color: var(--vm-azul-escuro); border-radius: 20px; transition: transform 200ms, box-shadow 200ms; }
.vm-qs-cards li:hover { transform: translateY(-3px); box-shadow: var(--vm-sombra); }
.vm-qs-cards h3 { font-size: 20px; }
.vm-qs-cards p { color: #4a6478; line-height: 1.55; }
.vm-qs-icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--vm-vermelho); color: #fff; margin-bottom: 4px; }
.vm-qs-icone svg { width: 26px; height: 26px; }
.vm-qs-claro { background: #fff; color: var(--vm-azul-escuro); }
.vm-qs-claro .vm-cabeca h2 { color: var(--vm-azul-escuro); }
.vm-qs-claro .vm-cabeca p { color: #4a6478; }
.vm-qs-mvv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vm-qs-mvv article { padding: 32px; border-radius: 20px; background: #eef4f8; border-top: 4px solid var(--vm-azul); display: grid; gap: 12px; align-content: start; }
.vm-qs-mvv article:nth-child(2) { border-top-color: var(--vm-ciano); }
.vm-qs-mvv article:nth-child(3) { border-top-color: var(--vm-vermelho); }
.vm-qs-mvv h3 { font-size: 22px; }
.vm-qs-mvv p, .vm-qs-mvv li { color: #23435f; line-height: 1.6; }
.vm-qs-mvv ul { margin: 0; padding-left: 20px; list-style: disc; display: grid; gap: 6px; }
.vm-qs-amb { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.vm-qs-amb h2 { font-size: clamp(30px, 2vw + 16px, 44px); }
.vm-qs-amb p { margin-top: 12px; font-size: 18px; line-height: 1.6; color: var(--vm-texto-claro); }
.vm-qs-amb__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vm-qs-amb__lista li { padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); display: grid; gap: 8px; }
.vm-qs-amb__lista b { font-size: 20px; color: var(--vm-ciano); }
.vm-qs-amb__lista span { color: var(--vm-texto-claro); line-height: 1.5; }
.vm-qs-fim__caixa { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px; border-radius: 24px;
  background: rgba(4, 43, 75, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); }
.vm-qs-fim__caixa h2 { font-size: clamp(26px, 1.6vw + 14px, 36px); }
.vm-qs-fim__caixa p { margin-top: 8px; color: var(--vm-texto-claro); font-size: 17px; }
@media (max-width: 1023px) {
  .vm-qs-hero__grade, .vm-qs-hist, .vm-qs-amb { grid-template-columns: 1fr; gap: 32px; }
  .vm-qs-ano { justify-self: start; justify-items: start; }
  .vm-qs-numeros { grid-template-columns: 1fr 1fr; }
  .vm-qs-numeros li:nth-child(3) { border-left: 0; }
  .vm-qs-numeros li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .vm-qs-cards, .vm-qs-mvv { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .vm-qs-hero { padding-top: 24px; }
  .vm-qs-hero__grade { padding-bottom: 32px; }
  .vm-qs-hero__lead, .vm-qs-hist__texto p, .vm-qs-amb p { font-size: 16px; }
  .vm-qs-ano span { font-size: 88px; }
  .vm-qs-numeros li { padding: 16px; }
  .vm-qs-numeros b { font-size: 20px; }
  .vm-qs-cards, .vm-qs-mvv, .vm-qs-amb__lista { grid-template-columns: 1fr; }
  .vm-qs-cards li, .vm-qs-mvv article { padding: 24px; }
  .vm-qs-fim__caixa { padding: 24px; }
  .vm-qs-fim__caixa .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- 404 */
main > :is(section, .section).vm-404 { padding: 120px 0 140px; }
.vm-404__caixa { display: grid !important; gap: 20px; justify-items: start; max-width: 720px !important; }
.vm-404 h1 { font-size: clamp(34px, 3vw + 12px, 56px); line-height: 1.06; }
.vm-404 p:not(.vm-selo) { font-size: 18px; line-height: 1.6; color: var(--vm-texto-claro); }

/* ---------------------------------------------------------------- páginas de laboratório */
a.vm-selo--link { text-decoration: none; }
a.vm-selo--link:hover { background: var(--vm-vermelho-escuro); }
.vm-lab-topo__grade { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.vm-lab-topo .btn-row { margin-top: 24px; }
.vm-lab-topo__logo { display: grid; place-items: center; min-height: 200px; padding: 32px; background: #fff; border-radius: 24px; box-shadow: var(--vm-sombra); }
.vm-lab-topo__logo img { max-width: 100%; max-height: 120px; width: auto; height: auto; }
.vm-lab-linhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.vm-lab-linhas li { display: grid; gap: 10px; align-content: start; padding: 28px; border-radius: 20px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); }
.vm-lab-linhas b { font-size: 24px; color: #fff; }
.vm-lab-linhas span { color: var(--vm-texto-claro); line-height: 1.55; }
.vm-lab-linhas small { color: #9fb8cc; font-size: 14px; line-height: 1.5; }
.vm-lab-linhas .vm-link-claro { justify-self: start; margin-top: 6px; font-size: 15px; }
.vm-lab-duvidas { display: grid !important; gap: 32px; }
.vm-lab-duvidas h2 { font-size: clamp(28px, 1.8vw + 16px, 40px); color: var(--vm-azul-escuro); }
.vm-lab-duvidas__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.vm-lab-duvidas__lista > div { padding: 24px; background: #eef4f8; border-radius: 16px; display: grid; gap: 8px; align-content: start; }
.vm-lab-duvidas__lista h3 { font-size: 19px; color: var(--vm-azul-escuro); }
.vm-lab-duvidas__lista p { color: #23435f; line-height: 1.6; }
.vm-lab-outros h3 { font-size: 16px; color: var(--vm-azul-escuro); margin-bottom: 12px; }
.vm-lab-outros ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.vm-lab-outros a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid #c9d8e4; color: var(--vm-azul-escuro); font-weight: 600; text-decoration: none; }
.vm-lab-outros a:hover { border-color: var(--vm-azul-escuro); }
@media (max-width: 1023px) { .vm-lab-topo__grade { grid-template-columns: 1fr; gap: 28px; } .vm-lab-topo__logo { min-height: 140px; order: -1; } }
@media (max-width: 639px) { .vm-lab-duvidas__lista { grid-template-columns: 1fr; } .vm-lab-linhas li { padding: 20px; } }

/* carrinho: confirmação depois que o servidor grava a cotação (criada por site.js) */
.vm-cart__ok { display: grid; align-content: start; justify-items: center; gap: 14px; padding-top: 40px; text-align: center; }
.vm-cart__ok[hidden] { display: none; }
.vm-cart__ok-icone { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #e3f5ee; color: #0f8a5f; }
.vm-cart__ok h3 { margin: 0; font-size: 22px; color: var(--vm-azul-escuro); }
.vm-cart__ok p { margin: 0; color: #4a6478; max-width: 32ch; }
.vm-cart__ok .btn { width: 100%; height: 48px; margin-top: 6px; }
.vm-cart__ok-fechar { background: none; border: 0; padding: 8px; font: 600 15px/1.4 var(--font-text); color: var(--vm-azul); text-decoration: underline; cursor: pointer; }
.vm-cart .vm-erro a { color: inherit; }

/* crédito da Concept no fim do rodapé: discreto, com o tamanho e a cor da nota (o ?v= do link deste CSS nas páginas
   faz o navegador e o cache da HostGator buscarem a versão nova) */
.vm-rodape__fim { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 32px; margin-top: 16px; }
.vm-rodape__fim .vm-rodape__nota { margin-top: 0; }
.vm-credito { margin: 0; font-size: 13px; color: #9fb8cc; white-space: nowrap; }
.vm-credito__coracao { display: inline-block; width: 1em; height: 1em; margin: 0 1px; vertical-align: -0.15em; }
.vm-credito .vm-credito__link { color: var(--vm-texto-claro); font-weight: 600; text-decoration: none; }
.vm-credito .vm-credito__link:is(:hover, :focus-visible) { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.vm-legal-rodape .vm-credito { flex-basis: 100%; text-align: right; }
@media (max-width: 639px) { .vm-legal-rodape .vm-credito { text-align: left; } }