/* =========================================================================
   VC STRATEGY — Tokens de marca
   Derivados da ferramenta Panorama VC para manter site e produto coerentes.
   ========================================================================= */

:root {
  /* Cores ------------------------------------------------------------- */
  --vc-aqua:     #70C4D1;  /* primaria (acento da marca)        */
  --vc-teal:     #2AB0C4;  /* aqua mais profunda (hover/links)  */
  --vc-ink:      #464646;  /* texto / estrutura (charcoal)      */
  --vc-graphite: #6D6D6D;  /* texto secundario                  */
  --vc-line:     #D9D9D9;  /* bordas / divisores                */
  --vc-mist:     #F2FBFC;  /* superficie clara aqua             */
  --vc-mist-2:   #E9F4F6;  /* superficie clara aqua (mais forte)*/
  --vc-paper:    #FFFFFF;  /* fundo                             */

  /* Tipografia -------------------------------------------------------- */
  --vc-font-display: "Phudu", "Oswald", sans-serif;            /* titulos */
  --vc-font-body:    "Inter", system-ui, -apple-system, sans-serif; /* texto/UI */
  --vc-font-serif:   "Vollkorn", Georgia, serif;               /* apoio   */

  /* Escala de tipo (clamp para responsividade) ------------------------ */
  --vc-fs-display: clamp(2.4rem, 5vw, 4rem);
  --vc-fs-h2:      clamp(1.8rem, 3.2vw, 2.6rem);
  --vc-fs-h3:      clamp(1.3rem, 2vw, 1.6rem);
  --vc-fs-lead:    clamp(1.05rem, 1.4vw, 1.2rem);

  /* Raios / sombra ---------------------------------------------------- */
  --vc-radius:   16px;
  --vc-radius-pill: 999px;
  --vc-shadow:   0 10px 30px rgba(70, 70, 70, .10);
}

/* Base tipografica (defaults sensatos; o Elementor pode sobrescrever
   via Configuracoes do site sem conflito).                              */
body {
  font-family: var(--vc-font-body);
  color: var(--vc-ink);
  background: var(--vc-paper);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vc-font-display);
  color: var(--vc-ink);
  letter-spacing: -0.01em;
  line-height: 1.08;
}

a { color: var(--vc-teal); }
a:hover { color: var(--vc-ink); }

/* =========================================================================
   Utilitarios — aplique como "Classe CSS" nos widgets do Elementor
   ========================================================================= */

.vc-display { font-family: var(--vc-font-display); }
.vc-serif   { font-family: var(--vc-font-serif); font-style: italic; }
.vc-body    { font-family: var(--vc-font-body); }

.vc-aqua-text { color: var(--vc-aqua); }
.vc-teal-text { color: var(--vc-teal); }

.vc-lead {
  font-size: var(--vc-fs-lead);
  color: var(--vc-graphite);
  line-height: 1.6;
}

/* Eyebrow: rotulo curto acima de um titulo de secao */
.vc-eyebrow {
  font-family: var(--vc-font-body);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vc-teal);
  margin: 0 0 .6rem;
}

/* Superficies */
.vc-surface       { background: var(--vc-paper); border: 1px solid var(--vc-line); border-radius: var(--vc-radius); }
.vc-surface--mist { background: var(--vc-mist);  border-radius: var(--vc-radius); }
.vc-surface--ink  { background: var(--vc-ink); color: #fff; border-radius: var(--vc-radius); }
.vc-surface--ink h1,.vc-surface--ink h2,.vc-surface--ink h3 { color:#fff; }

/* Botoes (caso prefira marcar um botao do Elementor com classe em vez de
   estilizar pelo painel) */
.vc-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--vc-font-body); font-weight: 700;
  padding: .85rem 1.6rem; border-radius: var(--vc-radius-pill);
  text-decoration: none; line-height: 1; transition: transform .15s ease, background .2s ease;
}
.vc-btn--primary { background: var(--vc-aqua); color: var(--vc-ink); }
.vc-btn--primary:hover { background: var(--vc-teal); color: #fff; transform: translateY(-1px); }
.vc-btn--ink { background: var(--vc-ink); color: #fff; }
.vc-btn--ink:hover { background: var(--vc-teal); transform: translateY(-1px); }
.vc-btn--ghost { background: transparent; color: var(--vc-ink); border: 1.5px solid var(--vc-line); }
.vc-btn--ghost:hover { border-color: var(--vc-aqua); color: var(--vc-teal); }

/* Divisor aqua fininho — eco do tracado da marca */
.vc-rule { height: 2px; width: 64px; background: var(--vc-aqua); border: 0; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vc-btn { transition: none; }
}