/* Tokens */

:root {
  --vm-fundo: #F6F4EF;
  --vm-texto: #1C1B19;
  --vm-texto-2: #5E5A54;
  --vm-linha: #D8D3C9;
  --vm-acento: #9A5B3C;
  --vm-sobre-acento: #FFFFFF;
  --vm-rodape-fundo: #1C1B19;
  --vm-rodape-texto: #ECE8E1;
  --vm-rodape-texto-2: #A8A196;
  --vm-rodape-linha: #3A3733;
  --vm-rodape-acento: #D08B66;
  --vm-serifa: "Source Serif 4", Georgia, "Times New Roman", serif;
  --vm-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vm-largura: 1120px;
  --vm-medida: 65ch;
  --vm-margem: 32px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vm-fundo: #1A1917;
    --vm-texto: #ECE8E1;
    --vm-texto-2: #A8A196;
    --vm-linha: #36332E;
    --vm-acento: #D08B66;
    --vm-sobre-acento: #1A1917;
    --vm-rodape-fundo: #11100F;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --vm-fundo: #1A1917;
  --vm-texto: #ECE8E1;
  --vm-texto-2: #A8A196;
  --vm-linha: #36332E;
  --vm-acento: #D08B66;
  --vm-sobre-acento: #1A1917;
  --vm-rodape-fundo: #11100F;
  color-scheme: dark;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--vm-fundo);
  color: var(--vm-texto);
  font-family: var(--vm-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--vm-serifa);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

h1 em, h2 em { color: var(--vm-acento); }

p { margin: 0; }

a { color: inherit; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--vm-acento);
  outline-offset: 3px;
}

img { display: block; max-width: 100%; height: auto; }

.vm-faixa {
  max-width: calc(var(--vm-largura) + 2 * var(--vm-margem));
  margin: 0 auto;
  padding: 0 var(--vm-margem);
}

.vm-rotulo {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vm-acento);
}

.vm-abertura {
  font-size: 19px;
  line-height: 1.6;
  color: var(--vm-texto-2);
  max-width: var(--vm-medida);
}

.vm-texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: var(--vm-medida);
  font-size: 17px;
}

/* Botões */

.vm-botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.vm-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--vm-texto);
  background: var(--vm-texto);
  color: var(--vm-fundo);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.vm-btn:hover { background: var(--vm-acento); border-color: var(--vm-acento); color: var(--vm-sobre-acento); }

.vm-btn-contorno { background: transparent; color: var(--vm-texto); }

.vm-link-seta {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.vm-link-seta::after { content: " →"; }

.vm-link-seta:hover { color: var(--vm-acento); }

/* Cabeçalho */

.vm-oculto { position: absolute; width: 0; height: 0; overflow: hidden; }

.vm-cabecalho {
  --vm-marca-nucleo: var(--vm-fundo);
  border-bottom: 1px solid var(--vm-linha);
}

.vm-cabecalho-faixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 40px;
  min-height: 84px;
}

.vm-marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.vm-marca-simbolo { width: 46px; height: 46px; flex: none; color: var(--vm-texto); }

.vm-marca-texto { display: flex; flex-direction: column; gap: 2px; }

.vm-marca-nome { font-family: var(--vm-serifa); font-size: 22px; line-height: 1.1; }

.vm-marca-sub {
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vm-texto-2);
}

.vm-menu {
  display: flex;
  align-items: center;
  gap: 36px;
  margin-left: auto;
  font-size: 15px;
}

.vm-menu-item, .vm-menu-grupo-botao {
  padding: 30px 0;
  border: 0;
  background: none;
  color: var(--vm-texto-2);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.vm-menu-item:hover, .vm-menu-grupo-botao:hover, .vm-menu-item[aria-current="page"] { color: var(--vm-texto); }

.vm-menu-grupo-botao::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

.vm-menu-grupo { position: relative; }

.vm-menu-caixa {
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  z-index: 10;
  width: 300px;
  padding: 6px 20px 16px;
  border: 1px solid var(--vm-linha);
  background: var(--vm-fundo);
}

.vm-menu-grupo:hover .vm-menu-caixa,
.vm-menu-grupo:focus-within .vm-menu-caixa,
.vm-menu-grupo.vm-aberto .vm-menu-caixa { display: flex; flex-direction: column; }

.vm-menu-caixa a { text-decoration: none; }

.vm-menu-principal { padding: 14px 0 8px; color: var(--vm-texto); font-weight: 500; }

.vm-menu-principal + .vm-menu-principal { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--vm-linha); }

.vm-menu-sub { padding: 6px 0 6px 16px; color: var(--vm-texto-2); }

.vm-menu-caixa a:hover, .vm-menu-caixa a[aria-current="page"] { color: var(--vm-acento); }

.vm-acoes { display: flex; align-items: center; gap: 4px; }

.vm-icone-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--vm-texto-2);
  cursor: pointer;
}

.vm-icone-botao:hover { color: var(--vm-acento); }

.vm-icone-botao svg { width: 22px; height: 22px; }

.vm-tema-botao, .vm-menu-botao { display: none; }

.vm-js .vm-tema-botao { display: inline-flex; }

.vm-icone-sol, [data-theme="dark"] .vm-icone-lua { display: none; }

[data-theme="dark"] .vm-icone-sol { display: block; }

/* Topo da página */

.vm-topo {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 96px;
  padding-bottom: 96px;
}

.vm-topo h1 {
  max-width: 15em;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.vm-topo-pagina h1 { font-size: clamp(36px, 5vw, 56px); }

/* Seções */

.vm-secao {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 72px;
  padding-bottom: 72px;
  border-top: 1px solid var(--vm-linha);
}

.vm-secao-cabeca {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vm-secao-cabeca h2 { font-size: clamp(30px, 3.6vw, 42px); }

/* Método */

.vm-metodo {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: metodo;
}

.vm-metodo li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-increment: metodo;
}

.vm-metodo li::before {
  content: counter(metodo, lower-roman) ".";
  font-family: var(--vm-serifa);
  font-size: 28px;
  color: var(--vm-acento);
}

.vm-metodo h3 { font-family: var(--vm-sans); font-size: 16px; font-weight: 600; line-height: 1.3; }

.vm-metodo p { font-size: 15px; color: var(--vm-texto-2); }

/* Frentes */

.vm-frentes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px;
}

.vm-frente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--vm-texto);
}

.vm-frente h3 { font-size: 30px; }

.vm-frente p { color: var(--vm-texto-2); }

.vm-frente ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.vm-frente li { padding: 8px 0; border-bottom: 1px solid var(--vm-linha); }

/* Quem está por trás */

.vm-quem {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.vm-quem img { width: 100%; max-width: 420px; justify-self: end; }

/* Lista de situações */

.vm-lista {
  display: flex;
  flex-direction: column;
  max-width: var(--vm-medida);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.vm-lista li { padding: 14px 0; border-bottom: 1px solid var(--vm-linha); }

.vm-lista li:first-child { border-top: 1px solid var(--vm-linha); }

/* Projetos */

.vm-projetos {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-projeto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--vm-linha);
}

.vm-projeto h3 { font-size: 24px; }

.vm-projeto-quando { margin-top: 8px; font-size: 14px; color: var(--vm-texto-2); }

.vm-projeto-texto { display: flex; flex-direction: column; gap: 12px; max-width: var(--vm-medida); }

.vm-nota { font-size: 14px; color: var(--vm-texto-2); }

/* Imprensa */

.vm-imprensa {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin: 0;
}

.vm-imprensa img { border: 1px solid var(--vm-linha); }

.vm-imprensa figcaption { display: flex; flex-direction: column; gap: 14px; max-width: var(--vm-medida); }

.vm-imprensa blockquote {
  margin: 0;
  font-family: var(--vm-serifa);
  font-size: 26px;
  line-height: 1.3;
}

/* Publicações */

.vm-publicacoes {
  display: flex;
  flex-direction: column;
  max-width: 80ch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-publicacoes li { display: flex; flex-direction: column; gap: 4px; padding: 18px 0; border-top: 1px solid var(--vm-linha); }

.vm-publicacoes a { font-family: var(--vm-serifa); font-size: 20px; line-height: 1.35; text-decoration: none; }

.vm-publicacoes a:hover { color: var(--vm-acento); }

.vm-publicacoes span { font-size: 14px; color: var(--vm-texto-2); }

/* Chamada final */

.vm-chamada {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding-top: 88px;
  padding-bottom: 104px;
  border-top: 1px solid var(--vm-linha);
}

.vm-chamada h2 { max-width: 20ch; font-size: clamp(32px, 4vw, 48px); }

/* Rodapé */

.vm-rodape {
  --vm-marca-nucleo: var(--vm-rodape-fundo);
  background: var(--vm-rodape-fundo);
  color: var(--vm-rodape-texto);
  font-size: 15px;
}

.vm-rodape a { text-decoration: none; }

.vm-rodape a:hover { color: var(--vm-rodape-acento); }

.vm-rodape ul { margin: 0; padding: 0; list-style: none; }

.vm-rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 36px;
  padding-top: 64px;
  padding-bottom: 48px;
}

.vm-rodape .vm-marca-simbolo { color: var(--vm-rodape-texto); }

.vm-rodape .vm-marca-sub { color: var(--vm-rodape-texto-2); }

.vm-rodape-marca { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

.vm-rodape-marca .vm-marca { margin-bottom: 6px; }

.vm-rodape-redes { margin-top: 6px; }

.vm-rodape-frase { max-width: 36ch; font-size: 14px; color: var(--vm-rodape-texto-2); }

.vm-rodape-redes { display: flex; gap: 8px; }

.vm-rodape-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--vm-rodape-linha);
}

.vm-rodape-redes a:hover { border-color: var(--vm-rodape-acento); }

.vm-rodape-redes svg { width: 18px; height: 18px; }

.vm-rodape-titulo {
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vm-rodape-acento);
}

.vm-rodape-coluna li { padding: 5px 0; }

.vm-rodape-contato { display: inline-flex; align-items: center; gap: 10px; }

.vm-rodape-contato svg { width: 18px; height: 18px; flex: none; color: var(--vm-rodape-texto-2); }

.vm-rodape-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: 24px;
  padding-bottom: 40px;
  border-top: 1px solid var(--vm-rodape-linha);
  font-size: 13px;
  color: var(--vm-rodape-texto-2);
}

.vm-rodape-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Tablet */

@media (max-width: 1024px) {
  .vm-metodo { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .vm-rodape-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Celular */

@media (max-width: 760px) {
  :root { --vm-margem: 18px; }

  .vm-cabecalho-faixa { justify-content: space-between; min-height: 68px; }

  .vm-cabecalho .vm-marca { flex: 1; min-width: 0; gap: 8px; }

  .vm-marca-simbolo { width: 34px; height: 34px; }

  .vm-marca-nome { font-size: 19px; }

  .vm-marca-sub { letter-spacing: 0.08em; }

  .vm-acoes { gap: 0; }

  .vm-icone-botao { width: 36px; }

  .vm-acoes { order: 2; }

  .vm-js .vm-menu-botao { display: inline-flex; }

  .vm-menu {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-left: 0;
    padding-bottom: 12px;
  }

  .vm-js .vm-menu { display: none; }

  .vm-menu-aberto .vm-menu { display: flex; }

  .vm-menu-grupo-botao {
    padding: 16px 0 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vm-acento);
    pointer-events: none;
  }

  .vm-menu-grupo-botao::after { display: none; }

  .vm-menu-caixa {
    display: flex;
    flex-direction: column;
    position: static;
    width: auto;
    padding: 0;
    border: 0;
  }

  .vm-menu-item { padding: 14px 0; border-top: 1px solid var(--vm-linha); color: var(--vm-texto); }

  .vm-rodape-grade { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 48px; }

  .vm-topo { gap: 22px; padding-top: 56px; padding-bottom: 64px; }

  .vm-abertura { font-size: 17px; }

  .vm-texto, .vm-lista { font-size: 16px; }

  .vm-secao { gap: 28px; padding-top: 48px; padding-bottom: 48px; }

  .vm-metodo { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .vm-frentes { grid-template-columns: minmax(0, 1fr); gap: 40px; }

  .vm-quem { grid-template-columns: minmax(0, 1fr); gap: 32px; }

  .vm-quem img { justify-self: start; }

  .vm-projeto { grid-template-columns: minmax(0, 1fr); gap: 12px; }

  .vm-imprensa { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .vm-imprensa img { max-width: 280px; }

  .vm-imprensa blockquote { font-size: 22px; }

  .vm-chamada { padding-top: 56px; padding-bottom: 72px; }
}