:root{
  --vc-taupe:        #9E8C7D;
  --vc-taupe-escuro: #7D6D5F;
  --vc-taupe-fundo:  #E7DED5;
  --vc-grafite:      #545454;
  --vc-tinta:        #262220;
  --vc-cacau:        #4A3D33;

  --vc-porcelana:    #FBF9F7;
  --vc-areia:        #F1ECE6;
  --vc-branco:       #FFFFFF;
  --vc-linha:        #E2D9D1;
  --vc-linha-forte:  #C9BBAD;

  --vc-zap:          #17804A;
  --vc-zap-escuro:   #106038;
  --vc-erro:         #A5432F;
  --vc-erro-fundo:   #FBEEEA;

  --vc-txt:          var(--vc-grafite);
  --vc-txt-forte:    var(--vc-tinta);
  --vc-txt-suave:    #757070;
  --vc-txt-claro:    #F1ECE6;
  --vc-txt-claro-2:  #C7BBB0;

  --vc-fonte-display: 'Marcellus', 'Times New Roman', serif;
  --vc-fonte-texto:   'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;

  --vc-t-display-1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --vc-t-display-2: clamp(2rem,   1.5rem + 2.1vw, 3rem);
  --vc-t-titulo:    clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --vc-t-subtitulo: 1.25rem;
  --vc-t-destaque:  1.25rem;
  --vc-t-corpo:     1.125rem;
  --vc-t-menor:     0.9688rem;
  --vc-t-micro:     0.8125rem;
  --vc-t-rotulo:    0.7813rem;

  --vc-tracking-marca: 0.22em;

  --vc-e-1: 0.25rem;  --vc-e-2: 0.5rem;   --vc-e-3: 0.75rem;
  --vc-e-4: 1rem;     --vc-e-5: 1.5rem;   --vc-e-6: 2rem;
  --vc-e-7: 3rem;     --vc-e-8: 4rem;     --vc-e-9: 6rem;
  --vc-e-10: 8rem;

  --vc-secao-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --vc-container: 1200px;
  --vc-container-estreito: 720px;
  --vc-medida: 68ch;

  --vc-r-sm: 6px;
  --vc-r-md: 14px;
  --vc-r-pill: 999px;
  --vc-traco: 1.5px;

  --vc-sombra: 0 18px 40px -28px rgba(38, 34, 32, 0.45);

  --vc-rapido: 160ms;
  --vc-medio: 320ms;
  --vc-lento: 900ms;
  --vc-curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

body{
  margin: 0;
  background: var(--vc-porcelana);
  color: var(--vc-txt);
  font-family: var(--vc-fonte-texto);
  font-size: var(--vc-t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4{
  font-family: var(--vc-fonte-display);
  font-weight: 400;
  color: var(--vc-txt-forte);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 0 0 var(--vc-e-4);
  text-wrap: balance;
}
h1{ font-size: var(--vc-t-display-1); }
h2{ font-size: var(--vc-t-display-2); }
h3{ font-size: var(--vc-t-titulo); line-height: 1.2; }
h4{ font-size: var(--vc-t-subtitulo); line-height: 1.3; }

p{ margin: 0 0 var(--vc-e-4); max-width: var(--vc-medida); }
p:last-child{ margin-bottom: 0; }

img, svg{ display: block; max-width: 100%; }
a{ color: inherit; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible{
  outline: 2px solid var(--vc-tinta);
  outline-offset: 3px;
  border-radius: 2px;
}

.vc-container{
  width: 100%;
  max-width: var(--vc-container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.vc-container--estreito{ max-width: var(--vc-container-estreito); }

.vc-secao{ padding-block: var(--vc-secao-y); }
.vc-secao--areia{ background: var(--vc-areia); }
.vc-secao--cacau{ background: var(--vc-cacau); color: var(--vc-txt-claro); }
.vc-secao--cacau :where(h1,h2,h3,h4){ color: #FFFFFF; }
.vc-secao--cacau p{ color: var(--vc-txt-claro-2); }

/* Tipografia */
.vc-rotulo{
  display: inline-block;
  font-family: var(--vc-fonte-texto);
  font-size: var(--vc-t-rotulo);
  font-weight: 600;
  letter-spacing: var(--vc-tracking-marca);
  text-transform: uppercase;
  color: var(--vc-taupe-escuro);
  margin-bottom: var(--vc-e-4);
}
.vc-secao--cacau .vc-rotulo{ color: var(--vc-taupe); }

.vc-destaque{
  font-size: var(--vc-t-destaque);
  line-height: 1.6;
  color: var(--vc-grafite);
  max-width: 56ch;
}
.vc-secao--cacau .vc-destaque{ color: var(--vc-txt-claro); }

.vc-menor{ font-size: var(--vc-t-menor); }
.vc-micro{ font-size: var(--vc-t-micro); line-height: 1.5; color: var(--vc-txt-suave); }

.vc-sublinha{
  background-image: linear-gradient(var(--vc-taupe), var(--vc-taupe));
  background-repeat: no-repeat;
  background-size: 100% var(--vc-traco);
  background-position: 0 92%;
  padding-bottom: 0.06em;

  white-space: nowrap;

  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.vc-cabecalho-secao{ max-width: 34ch; margin-bottom: var(--vc-e-8); }
.vc-cabecalho-secao--centro{ margin-inline: auto; text-align: center; }
.vc-cabecalho-secao--centro p{ margin-inline: auto; }

/* Botões */
.vc-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vc-e-3);
  padding: 1rem 2rem;
  border: var(--vc-traco) solid transparent;
  border-radius: var(--vc-r-pill);
  font-family: var(--vc-fonte-texto);
  font-size: var(--vc-t-corpo);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vc-rapido) var(--vc-curva),
              color var(--vc-rapido) var(--vc-curva),
              border-color var(--vc-rapido) var(--vc-curva);
}
.vc-btn svg{ width: 1.25em; height: 1.25em; flex: none; }

.vc-btn--primario{ background: var(--vc-tinta); color: var(--vc-porcelana); }
.vc-btn--primario:hover{ background: var(--vc-cacau); }

.vc-btn--secundario{ background: transparent; color: var(--vc-tinta); border-color: var(--vc-linha-forte); }
.vc-btn--secundario:hover{ background: var(--vc-taupe-fundo); border-color: var(--vc-taupe); }

.vc-secao--cacau .vc-btn--secundario{ color: #FFFFFF; border-color: rgba(255,255,255,.35); }
.vc-secao--cacau .vc-btn--secundario:hover{ background: rgba(255,255,255,.08); border-color: #FFFFFF; }

.vc-btn--zap{ background: var(--vc-zap); color: #FFFFFF; }
.vc-btn--zap:hover{ background: var(--vc-zap-escuro); }

.vc-btn--g{ padding: 1.25rem 2.5rem; font-size: 1.1875rem; }
.vc-btn--p{ padding: 0.6875rem 1.375rem; font-size: var(--vc-t-menor); }
.vc-btn--bloco{ width: 100%; }

.vc-link{
  color: var(--vc-tinta);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--vc-tinta), var(--vc-tinta));
  background-repeat: no-repeat;
  background-size: 0% var(--vc-traco);
  background-position: 0 100%;
  transition: background-size var(--vc-medio) var(--vc-curva);
}
.vc-link:hover{ background-size: 100% var(--vc-traco); }

/* Formulário */
.vc-campo{ margin-bottom: var(--vc-e-5); }
.vc-campo > label{
  display: block;
  font-size: var(--vc-t-rotulo);
  font-weight: 600;
  letter-spacing: var(--vc-tracking-marca);
  text-transform: uppercase;
  color: var(--vc-grafite);
  margin-bottom: var(--vc-e-2);
}
.vc-campo input,
.vc-campo select,
.vc-campo textarea{
  width: 100%;
  padding: 0.9375rem 1.125rem;
  background: var(--vc-branco);
  border: var(--vc-traco) solid var(--vc-linha-forte);
  border-radius: var(--vc-r-sm);
  font-family: var(--vc-fonte-texto);
  font-size: var(--vc-t-corpo);
  color: var(--vc-tinta);
  transition: border-color var(--vc-rapido) var(--vc-curva);
}
.vc-campo input::placeholder{ color: #8A8481; }
.vc-campo input:hover{ border-color: var(--vc-taupe); }
.vc-campo input:focus{ border-color: var(--vc-tinta); }
.vc-campo--erro input{ border-color: var(--vc-erro); background: var(--vc-erro-fundo); }
.vc-campo .vc-ajuda{ font-size: var(--vc-t-micro); color: var(--vc-txt-suave); margin-top: var(--vc-e-2); }
.vc-campo .vc-erro{ font-size: var(--vc-t-micro); color: var(--vc-erro); margin-top: var(--vc-e-2); font-weight: 500; }

/* Cards e selos */
.vc-card{
  background: var(--vc-branco);
  border: 1px solid var(--vc-linha);
  border-radius: var(--vc-r-md);
  padding: var(--vc-e-6);
}
.vc-card--elevado{ box-shadow: var(--vc-sombra); }
.vc-secao--cacau .vc-card{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.16);
}

.vc-selo{
  display: inline-flex;
  align-items: center;
  gap: var(--vc-e-2);
  padding: 0.375rem 0.875rem;
  background: var(--vc-taupe-fundo);
  color: var(--vc-cacau);
  border-radius: var(--vc-r-pill);
  font-size: var(--vc-t-rotulo);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.vc-selo--contorno{ background: transparent; border: 1px solid var(--vc-linha-forte); color: var(--vc-grafite); }

.vc-moldura{
  border-radius: clamp(2rem, 9vw, 6rem) var(--vc-r-md) var(--vc-r-md) var(--vc-r-md);
  overflow: hidden;
  background: var(--vc-taupe-fundo);
}
.vc-moldura--espelhada{ border-radius: var(--vc-r-md) clamp(2rem, 9vw, 6rem) var(--vc-r-md) var(--vc-r-md); }
.vc-moldura img{ width: 100%; height: 100%; object-fit: cover; }

/* Arco e roseta */
.vc-arco{ display: block; width: 100%; height: 44px; color: var(--vc-linha-forte); }
.vc-arco path{ fill: none; stroke: currentColor; stroke-width: var(--vc-traco); vector-effect: non-scaling-stroke; }

.vc-roseta{ color: var(--vc-taupe); }
.vc-roseta path{
  fill: none;
  stroke: currentColor;
  stroke-width: 7.5;
  stroke-linecap: round;
  transition: opacity var(--vc-medio) var(--vc-curva), stroke-width var(--vc-medio) var(--vc-curva);
}
.vc-roseta[data-arco-ativo] path{ opacity: 0.22; }
.vc-roseta[data-arco-ativo="1"] path:nth-child(1),
.vc-roseta[data-arco-ativo="2"] path:nth-child(2),
.vc-roseta[data-arco-ativo="3"] path:nth-child(3),
.vc-roseta[data-arco-ativo="4"] path:nth-child(4),
.vc-roseta[data-arco-ativo="5"] path:nth-child(5){ opacity: 1; stroke-width: 9; }

@media (prefers-reduced-motion: no-preference){
  .vc-roseta--traca path{
    stroke-dasharray: 330;
    stroke-dashoffset: 330;
    animation: vc-tracar var(--vc-lento) var(--vc-curva) forwards;
  }
  .vc-roseta--traca path:nth-child(2){ animation-delay: 110ms; }
  .vc-roseta--traca path:nth-child(3){ animation-delay: 220ms; }
  .vc-roseta--traca path:nth-child(4){ animation-delay: 330ms; }
  .vc-roseta--traca path:nth-child(5){ animation-delay: 440ms; }
}
@keyframes vc-tracar{ to{ stroke-dashoffset: 0; } }

.vc-revela{ opacity: 0; transform: translateY(14px); }
.vc-revela.vc-visivel{
  opacity: 1;
  transform: none;
  transition: opacity var(--vc-medio) var(--vc-curva), transform var(--vc-medio) var(--vc-curva);
}
@media (prefers-reduced-motion: reduce){
  .vc-revela{ opacity: 1; transform: none; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Grades, listas, acordeão */
.vc-grade{ display: grid; gap: var(--vc-e-5); }
.vc-grade--2{ grid-template-columns: repeat(2, 1fr); }
.vc-grade--3{ grid-template-columns: repeat(3, 1fr); }
.vc-grade--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .vc-grade--3, .vc-grade--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .vc-grade--2, .vc-grade--3, .vc-grade--4{ grid-template-columns: 1fr; } }

.vc-lista{ list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vc-e-3); }
.vc-lista li{ display: grid; grid-template-columns: 1.5rem 1fr; gap: var(--vc-e-3); align-items: start; }
.vc-lista svg{ width: 1.5rem; height: 1.5rem; color: var(--vc-taupe); margin-top: 0.15em; }

.vc-acordeao{ border-top: 1px solid var(--vc-linha); }
.vc-acordeao__item{ border-bottom: 1px solid var(--vc-linha); }
.vc-acordeao__gatilho{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vc-e-5);
  padding: var(--vc-e-5) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--vc-fonte-display);
  font-size: var(--vc-t-subtitulo);
  color: var(--vc-tinta);
  cursor: pointer;
}
.vc-acordeao__sinal{
  flex: none;
  width: 2rem; height: 2rem;
  border: var(--vc-traco) solid var(--vc-linha-forte);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: transform var(--vc-medio) var(--vc-curva), background-color var(--vc-rapido) var(--vc-curva);
}
.vc-acordeao__item[aria-expanded="true"] .vc-acordeao__sinal,
.vc-acordeao__gatilho[aria-expanded="true"] .vc-acordeao__sinal{
  transform: rotate(45deg);
  background: var(--vc-taupe-fundo);
  border-color: var(--vc-taupe);
}
.vc-acordeao__corpo{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--vc-medio) var(--vc-curva); }
.vc-acordeao__corpo > div{ overflow: hidden; }
.vc-acordeao__gatilho[aria-expanded="true"] + .vc-acordeao__corpo{ grid-template-rows: 1fr; }
.vc-acordeao__corpo p{ padding-bottom: var(--vc-e-5); font-size: var(--vc-t-menor); }

.vc-confianca{
  display: flex;
  flex-wrap: wrap;
  gap: var(--vc-e-4) var(--vc-e-7);
  padding-top: var(--vc-e-5);
  border-top: 1px solid var(--vc-linha);
}
.vc-confianca__item{ display: flex; align-items: baseline; gap: var(--vc-e-2); font-size: var(--vc-t-menor); }
.vc-confianca__num{ font-family: var(--vc-fonte-display); font-size: 1.5rem; color: var(--vc-tinta); line-height: 1; }

.vc-rt{
  font-size: var(--vc-t-micro);
  color: var(--vc-txt-suave);
  letter-spacing: 0.02em;
}