.elementor-9 .elementor-element.elementor-element-9ee4435{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-9 .elementor-element.elementor-element-67c2d22 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-9 .elementor-element.elementor-element-344b500 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}/* Start custom CSS for container, class: .elementor-element-9ee4435 *//* ============================================================================
   VINCI HAIR CLINIC — DESIGN SYSTEM (CSS)
   Fonte: arquivo Figma "Vinci Hair Clinic — Design System"
   (BN7zJUzBLSLErbnVk779Eu). Todas as 16 páginas do Figma já foram revisadas.

   ----------------------------------------------------------------------------
   COMO USAR NO ELEMENTOR (leia isto primeiro)
   ----------------------------------------------------------------------------
   PASSO 1 — Cole o arquivo INTEIRO em UM lugar só, uma única vez:
     • WP Admin → Aparência → Personalizar → CSS Adicional
       (funciona em qualquer tema/plano, é o caminho mais simples)
     • OU, se você tem Elementor Pro: Elementor → Configurações do Site →
       CSS Personalizado.
   Não precisa (e não deve) colar pedaços separados em cada widget — o
   arquivo é UM só CSS, só que organizado em seções abaixo para você
   encontrar rápido o que precisa.

   PASSO 2 — Para aplicar um estilo pronto (título, botão, etc.) a um
   elemento do Elementor:
     1. Selecione o elemento (ex.: um widget de "Título" ou "Texto").
     2. Vá na aba "Avançado" (Advanced) do painel do elemento.
     3. No campo "Classes CSS" (CSS Classes), digite o nome da classe,
        por exemplo:  vinci-display-48-semibold
     4. Pronto — não precisa escrever CSS nenhum, só o nome da classe.
        Isso funciona na versão GRATUITA do Elementor (não precisa de Pro).

   Exemplo prático para um TÍTULO:
     Widget "Título" (Heading) → Avançado → Classes CSS → digite:
       vinci-display-48-semibold
     O texto vai ficar com a fonte, tamanho, peso e entrelinha corretos
     do design system, sem precisar mexer em cor, fonte etc. manualmente.

   Se algo não aparecer estilizado, o motivo quase sempre é: o arquivo
   inteiro (Passo 1) ainda não foi colado em CSS Adicional / CSS
   Personalizado. As classes abaixo (ex. vinci-btn) dependem das
   variáveis --vinci-* que estão no topo do arquivo — por isso ele
   precisa ser colado inteiro, e não em pedaços.

   ----------------------------------------------------------------------------
   ÍNDICE — use Ctrl+F / Cmd+F e procure pela tag entre colchetes
   ----------------------------------------------------------------------------
   [1. CORES]            Paleta de cores (variáveis)
   [2. TIPOGRAFIA BASE]  Fonte, pesos, entrelinha, tamanhos (variáveis)
   [3. TÍTULOS]          Classes prontas para títulos/headings
   [4. TEXTO / CORPO]    Classes prontas para parágrafos e textos gerais
   [5. BOTÕES]           Variáveis + classes de botão
   [6. FORMULÁRIOS]      Variáveis + classes de campo, checkbox, switch
   [7. BORDAS E SOMBRA]  Raio de borda, espessura de borda, sombra
   [8. ESPAÇAMENTO]      Escala de espaçamento (padding/margin/gap)
   [9. CORES DE MARCA]   Classes de cor de texto/fundo prontas para usar
   [10. BREAKPOINTS]     Valores de referência responsivos
   [11. MOVIMENTO]       Duração e curva de animação

   ----------------------------------------------------------------------------
   O QUE NÃO VIROU CSS (e por quê) — ver o guia (.md) para o texto completo
   ----------------------------------------------------------------------------
   "06 — Icons" (página vazia), "09 — Navigation" e "10 — Cards & Content"
   (layouts completos de página/componente, não tokens simples — os bugs
   de variável remota encontrados nessas páginas já foram corrigidos
   direto no Figma), "11 — Conversational Form" (já existe um build de
   produção separado), "12 — Responsive Behavior", "14 — Design Tokens",
   "15 — Accessibility", "16 — Documentation" (páginas de diretriz/processo,
   não fonte de tokens).

   HISTÓRICO DE MUDANÇAS RECENTES
   • 2026-09-08: a categoria "Heading/H3" (título isolado, só 20px) foi
     incorporada em Text/20 — agora são as classes
     .vinci-text-20-*-tight (ver seção 3, TÍTULOS).
   • 2026-09-08: uma varredura no arquivo inteiro encontrou várias
     variáveis apontando para uma biblioteca externa/remota em vez das
     variáveis locais do Vinci DS (mesmo problema em: a marca "Vinci
     Logo" em todas as 16 páginas, um ícone de checkbox em "08 — Forms",
     e praticamente a página inteira "09 — Navigation", mais de 1.400
     vínculos). Tudo corrigido direto no Figma — ver o guia (.md), §9.
   • 2026-09-09: arquivo reorganizado por seção (títulos, botões,
     formulários etc.) e comentado em português, a pedido do Otávio,
     para facilitar o uso no Elementor.
   ============================================================================ */


/* ============================================================================
   [1. CORES]
   Paleta de cores do Vinci. Dividida em duas camadas, exatamente como no
   Figma:
     • PRIMITIVAS — a paleta "crua" (tons de marrom, dourado, cinza).
       Evite usar essas diretamente no dia a dia — prefira as
       "semânticas" abaixo, que dizem PARA QUE cada cor serve.
     • SEMÂNTICAS — nomeadas pelo USO ("borda padrão", "dourado da
       marca") e apontam para uma primitiva. Se o marrom da marca mudar
       um dia, só se atualiza aqui, em um lugar só.
   Estas variáveis são a BASE de quase todas as outras seções deste
   arquivo (botões, formulários, texto etc. usam essas cores) — por
   isso ficam logo no topo.
   ============================================================================ */
:root {
  /* --- Primitivas: Primary (marrom da marca — logo, títulos, botão principal) --- */
  --vinci-primary-dark: #503629;     /* "Primary 900" — texto, logo, CTA sólido */
  --vinci-primary-medium: #845d32;   /* "Primary 700" — texto em fundo quente, ícones */
  --vinci-primary-pure: #bc955c;     /* "Primary 500" — cor de destaque, barra de CTA fixa */
  --vinci-primary-light: #d6d1ca;    /* "Primary 300" — bordas suaves */
  --vinci-primary-lightest: #f8f4ec; /* "Primary 100" — fundos suaves */

  /* --- Primitivas: Secondary (dourado/rosé — variação de destaque) --- */
  --vinci-secondary-medium: #a07040;   /* no Figma aparece rotulado "Secondary Dark" */
  --vinci-secondary-pure: #b8834f;
  --vinci-secondary-light: #c8a977;
  --vinci-secondary-lighter: #d4b48a;
  --vinci-secondary-lightest: #edc7a2;
  --vinci-secondary-pale: #f0e4d0;
  --vinci-secondary-palest: #fbf0e4;

  /* --- Primitivas: Neutro/Cinza (texto, bordas, superfícies neutras) --- */
  --vinci-gray-black: #000000; /* usar com moderação — ver o guia */
  --vinci-gray-700: #636569;   /* texto secundário */
  --vinci-gray-500: #9e9e9e;   /* ícones inativos, borda forte */
  --vinci-gray-200: #d9d9d9;   /* borda padrão */
  --vinci-gray-50: #f8f8f5;    /* borda sutil, fundo de card */
  --vinci-gray-0: #ffffff;     /* fundo base (branco) */
  --vinci-gray-white-10: rgba(255, 255, 255, 0.1); /* branco 10% de opacidade */

  /* --- Fundos --- */
  --vinci-bg-base: #ffffff;
  --vinci-bg-subtle: #faf7f2;
  --vinci-bg-warm: #f1e9dd;

  /* --- Cores de texto (sempre confira o contraste AA contra o fundo usado) --- */
  --vinci-text-primary: #503629;   /* títulos, corpo de texto principal */
  --vinci-text-secondary: #000000; /* "preto puro" — intencional no Figma */
  --vinci-text-tertiary: #636569;  /* legendas, metadados */
  --vinci-text-on-primary: #ffffff; /* texto sobre fundo colorido/escuro */
  --vinci-text-on-bg-warm: #845d32; /* texto sobre fundo bege/quente */

  /* --- Semânticas: bordas (por função, não por tom) --- */
  --vinci-border-default: var(--vinci-gray-200); /* inputs, cards, divisores */
  --vinci-border-subtle: var(--vinci-gray-50);   /* divisores discretos */
  --vinci-border-strong: var(--vinci-gray-500);  /* foco, ênfase */
  --vinci-border-brand: var(--vinci-primary-pure); /* foco com a cor da marca */

  /* --- Semânticas: cor de marca --- */
  --vinci-brand-gold: var(--vinci-primary-pure);      /* ícones, tags, CTA fixo */
  --vinci-brand-gold-dark: var(--vinci-primary-medium);
  --vinci-brand-whatsapp: #25d366; /* verde do WhatsApp — cor de terceiro, fora da paleta Vinci */

  /* --- Feedback (único tom de feedback que existe no sistema até agora) --- */
  --vinci-feedback-error: #e84747; /* erro de formulário — não existe ainda
    cor própria para sucesso/aviso/informação; ver o guia (.md), §10 */
}


/* ============================================================================
   [2. TIPOGRAFIA BASE]
   Fonte, pesos, entrelinha e tamanhos usados por TODAS as classes de texto
   (seções 3 e 4). Se um dia precisar trocar a fonte do site inteiro, é só
   mudar --vinci-font-family aqui.
   ============================================================================ */
:root {
  --vinci-font-family: "Myriad Pro", "Myriad Pro Fallback", Arial, sans-serif;
  /* Myriad Pro é fonte Adobe, não é web font gratuita — precisa estar
     hospedada/licenciada para web (ex.: Custom Fonts do Elementor Pro,
     ou um plugin como "Use Any Font"). Confirme a licença antes de usar
     em produção. */

  --vinci-weight-regular: 400;
  --vinci-weight-semibold: 600;
  --vinci-weight-bold: 700;

  --vinci-line-height-tight: 1.1;  /* 110% — usado em Títulos/Display */
  --vinci-line-height-body: 1.4;   /* 140% — usado em Texto/corpo */
  --vinci-letter-spacing-normal: 0; /* espaçamento entre letras padrão */

  --vinci-size-12: 12px;
  --vinci-size-14: 14px;
  --vinci-size-16: 16px;
  --vinci-size-18: 18px;
  --vinci-size-20: 20px;
  --vinci-size-24: 24px;
  --vinci-size-32: 32px;
  --vinci-size-40: 40px;
  --vinci-size-48: 48px;
  --vinci-size-56: 56px;
  --vinci-size-64: 64px;
  --vinci-size-72: 72px;
}


/* ============================================================================
   [3. TÍTULOS]
   *** Esta é a seção que você provavelmente estava procurando. ***

   Classes prontas para TÍTULOS (headings). No Elementor, use no widget
   "Título" (Heading): aba Avançado → Classes CSS → cole o nome da classe,
   por exemplo "vinci-display-48-semibold".

   Existem dois grupos de título no design system:

   A) DISPLAY — para títulos grandes (hero, topo de página, chamadas de
      alto impacto). Entrelinha apertada (110%). Tamanhos: 40, 48, 56,
      64, 72px — cada um em Regular, Semibold e Bold.

   B) TEXT/20 "TIGHT" — para subtítulos e títulos de seção/conteúdo, no
      tamanho 20px com entrelinha apertada (110%). É o antigo "H3" do
      Figma, hoje faz parte da família Text/20 (ver o histórico no topo
      do arquivo). Regular, Semibold e Bold.

   SUGESTÃO de uso por nível de título (o Figma ainda não define H1/H2
   formalmente — isto é só uma sugestão prática, ajuste como preferir):
     H1 (título da página)     → vinci-display-56-semibold ou 64
     H2 (título de seção)      → vinci-display-40-semibold ou 48
     H3 (subtítulo de seção)   → vinci-text-20-semibold-tight
     H4 (título menor/legenda) → vinci-text-16-semibold (ver seção 4)
   ============================================================================ */

/* --- 3.1 Display (títulos grandes, entrelinha 110%) --- */
.vinci-display-40-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-40); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-display-40-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-40); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-display-40-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-40); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }

.vinci-display-48-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-48); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-display-48-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-48); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-display-48-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-48); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }

.vinci-display-56-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-56); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-display-56-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-56); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-display-56-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-56); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }

.vinci-display-64-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-64); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-display-64-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-64); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-display-64-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-64); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }

.vinci-display-72-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-72); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-display-72-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-72); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-display-72-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-72); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }

/* --- 3.2 Text/20 "Tight" — subtítulos, 20px, entrelinha 110% (antigo H3) --- */
.vinci-text-20-regular-tight  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-tight); }
.vinci-text-20-semibold-tight { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-tight); }
.vinci-text-20-bold-tight     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-tight); }


/* ============================================================================
   [4. TEXTO / CORPO]
   Classes prontas para parágrafos, textos de UI, legendas — qualquer texto
   que NÃO seja um título. Entrelinha "arejada" (140%), para leitura
   confortável em blocos de texto. Tamanhos: 12, 14, 16, 18, 20, 24, 32px.
   16px é o tamanho padrão recomendado para corpo de texto.

   No Elementor: widget "Texto" (Text Editor) ou parágrafo → Avançado →
   Classes CSS → cole o nome da classe, ex.: "vinci-text-16-regular".
   ============================================================================ */

.vinci-text-12-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-12); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); }
.vinci-text-12-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-12); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-12-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-12); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-14-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-14); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); }
.vinci-text-14-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-14); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-14-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-14); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-16-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-16); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); } /* tamanho padrão do corpo */
.vinci-text-16-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-16); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-16-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-16); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-18-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-18); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); }
.vinci-text-18-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-18); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-18-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-18); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-20-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); } /* Text/20 "normal" — para PARÁGRAFO, não título. Para título de 20px, use a seção 3 (*-tight) */
.vinci-text-20-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-20-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-20); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-24-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-24); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); }
.vinci-text-24-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-24); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-24-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-24); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }

.vinci-text-32-regular  { font-family: var(--vinci-font-family); font-size: var(--vinci-size-32); font-weight: var(--vinci-weight-regular);  line-height: var(--vinci-line-height-body); }
.vinci-text-32-semibold { font-family: var(--vinci-font-family); font-size: var(--vinci-size-32); font-weight: var(--vinci-weight-semibold); line-height: var(--vinci-line-height-body); }
.vinci-text-32-bold     { font-family: var(--vinci-font-family); font-size: var(--vinci-size-32); font-weight: var(--vinci-weight-bold);     line-height: var(--vinci-line-height-body); }


/* ============================================================================
   [5. BOTÕES]
   Tudo sobre botões em um lugar só: variáveis + classes prontas.
   Fonte: página "07 — Buttons" do Figma. 4 tipos (Primary, Secondary,
   Tertiary, Ghost) × 3 tamanhos (sm/md/lg), cada um com estado normal,
   hover, pressionado e desabilitado — todos em formato pílula (cantos
   totalmente arredondados).

   COMO USAR NO ELEMENTOR: no widget "Botão" (Button) → Avançado →
   Classes CSS → cole 3 classes juntas, separadas por espaço:
   uma de base + uma de TIPO + uma de TAMANHO, por exemplo:

       vinci-btn vinci-btn--primary vinci-btn--md

   Tipos disponíveis:   vinci-btn--primary | --secondary | --tertiary | --ghost
   Tamanhos disponíveis: vinci-btn--sm | --md | --lg

   Os estados hover/pressionado já funcionam sozinhos (é só CSS
   :hover/:active) — não precisa configurar nada a mais no Elementor.

   Atenção: o widget de Botão do Elementor usa a tag <a>, e o estado
   nativo :disabled do navegador só funciona em <button>/<input>. Para
   um botão com "cara" de desabilitado, adicione manualmente a classe
   extra "is-disabled" (ex. via um campo dinâmico, ou visibilidade
   condicional do Pro) — o Elementor não tem um estado "desabilitado"
   nativo para esse widget.
   ============================================================================ */
:root {
  /* Cores por tipo/estado — tudo reaproveitado das cores da seção 1 */
  --vinci-btn-primary-bg: var(--vinci-primary-pure);
  --vinci-btn-primary-bg-hover: var(--vinci-primary-medium);
  --vinci-btn-primary-bg-pressed: var(--vinci-primary-dark);
  --vinci-btn-primary-bg-disabled: var(--vinci-gray-200);
  --vinci-btn-primary-text: var(--vinci-text-on-primary);
  --vinci-btn-primary-text-disabled: var(--vinci-gray-500);

  --vinci-btn-secondary-text: var(--vinci-primary-pure);
  --vinci-btn-secondary-text-hover: var(--vinci-primary-medium);
  --vinci-btn-secondary-text-pressed: var(--vinci-primary-dark);
  --vinci-btn-secondary-text-disabled: var(--vinci-gray-500);
  --vinci-btn-secondary-bg-hover: var(--vinci-primary-lightest);
  --vinci-btn-secondary-bg-pressed: var(--vinci-primary-light);

  /* Tertiary e Ghost usam as MESMAS variáveis no Figma hoje (não há
     diferença visual definida entre eles ainda — ver o guia, §6) */
  --vinci-btn-tertiary-text: var(--vinci-primary-pure);
  --vinci-btn-tertiary-text-hover: var(--vinci-primary-medium);
  --vinci-btn-tertiary-text-pressed: var(--vinci-primary-dark);
  --vinci-btn-tertiary-text-disabled: var(--vinci-gray-500);
  --vinci-btn-tertiary-bg-hover: var(--vinci-primary-lightest);
  --vinci-btn-tertiary-bg-pressed: var(--vinci-primary-light);

  /* Tamanhos — altura, espaçamento interno e tamanho de fonte por tamanho */
  --vinci-btn-height-sm: 32px;
  --vinci-btn-height-md: 40px;
  --vinci-btn-height-lg: 48px;
  --vinci-btn-padding-y-sm: 6px;
  --vinci-btn-padding-x-sm: 12px;
  --vinci-btn-padding-y-md: 10px;
  --vinci-btn-padding-x-md: 16px;
  --vinci-btn-padding-y-lg: 14px;
  --vinci-btn-padding-x-lg: 24px;
  --vinci-btn-font-size-sm: var(--vinci-size-12);
  --vinci-btn-font-size-md: var(--vinci-size-14);
  --vinci-btn-font-size-lg: var(--vinci-size-16);
}

/* --- 5.1 Classe base — sempre usar junto com um tipo e um tamanho --- */
.vinci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vinci-font-family);
  font-weight: var(--vinci-weight-semibold);
  line-height: var(--vinci-line-height-body);
  border-radius: 9999px; /* formato pílula */
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* --- 5.2 Tamanhos --- */
.vinci-btn--sm { height: var(--vinci-btn-height-sm); padding: var(--vinci-btn-padding-y-sm) var(--vinci-btn-padding-x-sm); font-size: var(--vinci-btn-font-size-sm); }
.vinci-btn--md { height: var(--vinci-btn-height-md); padding: var(--vinci-btn-padding-y-md) var(--vinci-btn-padding-x-md); font-size: var(--vinci-btn-font-size-md); }
.vinci-btn--lg { height: var(--vinci-btn-height-lg); padding: var(--vinci-btn-padding-y-lg) var(--vinci-btn-padding-x-lg); font-size: var(--vinci-btn-font-size-lg); }

/* --- 5.3 Primary — botão preenchido (cor sólida) --- */
.vinci-btn--primary {
  background-color: var(--vinci-btn-primary-bg);
  color: var(--vinci-btn-primary-text);
}
.vinci-btn--primary:hover  { background-color: var(--vinci-btn-primary-bg-hover); }
.vinci-btn--primary:active { background-color: var(--vinci-btn-primary-bg-pressed); }
.vinci-btn--primary:disabled,
.vinci-btn--primary.is-disabled {
  background-color: var(--vinci-btn-primary-bg-disabled);
  color: var(--vinci-btn-primary-text-disabled);
  cursor: not-allowed;
}

/* --- 5.4 Secondary — botão contornado (outline) --- */
.vinci-btn--secondary {
  background-color: transparent;
  border-color: var(--vinci-btn-secondary-text);
  color: var(--vinci-btn-secondary-text);
}
.vinci-btn--secondary:hover {
  background-color: var(--vinci-btn-secondary-bg-hover);
  border-color: var(--vinci-btn-secondary-text-hover);
  color: var(--vinci-btn-secondary-text-hover);
}
.vinci-btn--secondary:active {
  background-color: var(--vinci-btn-secondary-bg-pressed);
  border-color: var(--vinci-btn-secondary-text-pressed);
  color: var(--vinci-btn-secondary-text-pressed);
}
.vinci-btn--secondary:disabled,
.vinci-btn--secondary.is-disabled {
  background-color: transparent;
  border-color: var(--vinci-border-default);
  color: var(--vinci-btn-secondary-text-disabled);
  cursor: not-allowed;
}

/* --- 5.5 Tertiary e Ghost — botão só com texto, sem fundo/borda --- */
.vinci-btn--tertiary,
.vinci-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--vinci-btn-tertiary-text);
}
.vinci-btn--tertiary:hover,
.vinci-btn--ghost:hover {
  background-color: var(--vinci-btn-tertiary-bg-hover);
  color: var(--vinci-btn-tertiary-text-hover);
}
.vinci-btn--tertiary:active,
.vinci-btn--ghost:active {
  background-color: var(--vinci-btn-tertiary-bg-pressed);
  color: var(--vinci-btn-tertiary-text-pressed);
}
.vinci-btn--tertiary:disabled,
.vinci-btn--tertiary.is-disabled,
.vinci-btn--ghost:disabled,
.vinci-btn--ghost.is-disabled {
  background-color: transparent;
  color: var(--vinci-btn-tertiary-text-disabled);
  cursor: not-allowed;
}


/* ============================================================================
   [6. FORMULÁRIOS]
   Campo de texto (Text Input), Checkbox e Switch — fonte: página
   "08 — Forms" do Figma. Variáveis + classes juntas nesta seção.

   COMO USAR NO ELEMENTOR: no widget de Formulário (Pro), cada campo tem
   um campo "Classes CSS" próprio em Conteúdo → [nome do campo] →
   Avançado. Adicione:
     • "vinci-input" no campo de texto padrão (+ "vinci-input--sm" ou
       "vinci-input--lg" se quiser um tamanho diferente do padrão)
     • "vinci-checkbox" no campo de checkbox
     • "vinci-switch" no campo de interruptor (switch)
   ============================================================================ */
:root {
  --vinci-line-height-form: 1.5; /* diferente do 140% usado no resto do
    sistema — é intencional, específico de formulário, não é erro */

  --vinci-input-height-sm: 40px;
  --vinci-input-height-md: 48px;
  --vinci-input-height-lg: 56px;
  --vinci-input-font-sm: var(--vinci-size-14);
  --vinci-input-font-md: var(--vinci-size-16);
  --vinci-input-font-lg: var(--vinci-size-18);
  --vinci-input-bg: var(--vinci-gray-0);
  --vinci-input-border: var(--vinci-gray-50);
  --vinci-input-border-hover: var(--vinci-gray-200);
  --vinci-input-border-focus: var(--vinci-primary-pure);
  --vinci-input-border-error: var(--vinci-feedback-error);
  --vinci-input-text: var(--vinci-gray-700);
  --vinci-input-placeholder: var(--vinci-gray-500);
  --vinci-input-bg-disabled: var(--vinci-gray-50);
  --vinci-input-text-disabled: var(--vinci-gray-500);

  --vinci-checkbox-size: 20px;
  --vinci-checkbox-border: var(--vinci-gray-200);
  --vinci-checkbox-bg-checked: var(--vinci-primary-pure);
  --vinci-checkbox-label: var(--vinci-gray-700);
  --vinci-checkbox-label-disabled: var(--vinci-gray-500);

  --vinci-switch-width: 44px;
  --vinci-switch-height: 24px;
  --vinci-switch-track-off: var(--vinci-gray-200);
  --vinci-switch-track-on: var(--vinci-primary-pure);
  --vinci-switch-track-disabled: var(--vinci-gray-50);
}

/* --- 6.1 Rótulo (label) e texto de ajuda --- */
.vinci-form-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--vinci-font-family);
  font-size: var(--vinci-size-14);
  font-weight: var(--vinci-weight-semibold);
  color: var(--vinci-text-primary);
}
.vinci-form-helper {
  display: block;
  margin-top: 4px;
  font-family: var(--vinci-font-family);
  font-size: var(--vinci-size-12);
  color: var(--vinci-text-secondary);
}
.vinci-form-helper.is-error { color: var(--vinci-feedback-error); } /* adicione esta classe extra no texto de ajuda quando o campo estiver com erro */

/* --- 6.2 Campo de texto --- */
.vinci-input {
  display: block;
  width: 100%;
  height: var(--vinci-input-height-md); /* tamanho médio por padrão */
  padding: 0 16px;
  font-family: var(--vinci-font-family);
  font-size: var(--vinci-input-font-md);
  line-height: var(--vinci-line-height-form);
  color: var(--vinci-input-text);
  background-color: var(--vinci-input-bg);
  border: 1px solid var(--vinci-input-border);
  border-radius: 12px;
  transition: border-color 0.1s ease;
  box-sizing: border-box;
}
.vinci-input::placeholder { color: var(--vinci-input-placeholder); }
.vinci-input:hover { border-color: var(--vinci-input-border-hover); }
.vinci-input:focus {
  border-color: var(--vinci-input-border-focus);
  border-width: 2px;
  outline: none;
}
.vinci-input.is-error { /* adicione esta classe extra junto com "vinci-input" quando o campo estiver com erro */
  border-color: var(--vinci-input-border-error);
  border-width: 1.5px;
}
.vinci-input:disabled,
.vinci-input.is-disabled {
  background-color: var(--vinci-input-bg-disabled);
  color: var(--vinci-input-text-disabled);
  cursor: not-allowed;
}
.vinci-input--sm { height: var(--vinci-input-height-sm); font-size: var(--vinci-input-font-sm); } /* use junto com "vinci-input" */
.vinci-input--lg { height: var(--vinci-input-height-lg); font-size: var(--vinci-input-font-lg); } /* use junto com "vinci-input" */

/* --- 6.3 Checkbox e Switch --- */
/* A cor usa a propriedade nativa "accent-color" do navegador, em vez de
   recriar o visual do zero — assim continua acessível e funciona com o
   <input> real que o Elementor já gera. */
.vinci-checkbox {
  width: var(--vinci-checkbox-size);
  height: var(--vinci-checkbox-size);
  accent-color: var(--vinci-checkbox-bg-checked);
  border-radius: 4px;
}
.vinci-switch {
  width: var(--vinci-switch-width);
  height: var(--vinci-switch-height);
  accent-color: var(--vinci-switch-track-on);
}
.vinci-form-label-inline { /* rótulo ao lado do checkbox/switch */
  font-family: var(--vinci-font-family);
  font-size: var(--vinci-size-14);
  line-height: var(--vinci-line-height-body);
  color: var(--vinci-checkbox-label);
}
.vinci-checkbox:disabled ~ .vinci-form-label-inline,
.vinci-switch:disabled ~ .vinci-form-label-inline {
  color: var(--vinci-checkbox-label-disabled);
}


/* ============================================================================
   [7. BORDAS E SOMBRA]
   Raio de canto (border-radius), espessura de borda e sombra — para usar
   em containers, cards, seções etc. quando o próprio painel do Elementor
   não tem como "usar um token" diretamente.

   COMO USAR NO ELEMENTOR: em qualquer widget/container → Avançado →
   Classes CSS → cole a classe, ex.: "vinci-radius-lg vinci-shadow-md".
   Pode combinar várias classes desta seção no mesmo elemento.
   ============================================================================ */
:root {
  --vinci-radius-sm: 4px;    /* badges */
  --vinci-radius-md: 8px;    /* cards, inputs */
  --vinci-radius-lg: 12px;   /* modais */
  --vinci-radius-xl: 16px;   /* cards grandes/hero */
  --vinci-radius-full: 9999px; /* pílulas, avatares */

  --vinci-border-width-default: 1px;    /* inputs, cards, divisores */
  --vinci-border-width-emphasis: 1.5px; /* estado de foco/ativo */
  --vinci-border-width-brand: 2px;      /* CTAs, itens selecionados */

  --vinci-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06);      /* cards em repouso, itens de lista */
  --vinci-shadow-md: 0 4px 10px 0 rgba(0, 0, 0, 0.08);     /* dropdowns, popovers, tooltips */
  --vinci-shadow-lg: 0 10px 24px -2px rgba(0, 0, 0, 0.12); /* painéis flutuantes, cards expandidos */
  --vinci-shadow-xl: 0 20px 40px -4px rgba(0, 0, 0, 0.16); /* modais, overlays, diálogos */
}

/* --- 7.1 Raio de canto --- */
.vinci-radius-sm   { border-radius: var(--vinci-radius-sm); }
.vinci-radius-md   { border-radius: var(--vinci-radius-md); }
.vinci-radius-lg   { border-radius: var(--vinci-radius-lg); }
.vinci-radius-xl   { border-radius: var(--vinci-radius-xl); }
.vinci-radius-full { border-radius: var(--vinci-radius-full); }

/* --- 7.2 Cor de borda (semântica) --- */
.vinci-border-color-default { border-color: var(--vinci-border-default); }
.vinci-border-color-subtle  { border-color: var(--vinci-border-subtle); }
.vinci-border-color-strong  { border-color: var(--vinci-border-strong); }
.vinci-border-color-brand   { border-color: var(--vinci-border-brand); }

/* --- 7.3 Espessura de borda (combine com uma cor acima) --- */
.vinci-border-width-default  { border-width: var(--vinci-border-width-default); border-style: solid; }
.vinci-border-width-emphasis { border-width: var(--vinci-border-width-emphasis); border-style: solid; }
.vinci-border-width-brand    { border-width: var(--vinci-border-width-brand); border-style: solid; }

/* --- 7.4 Sombra --- */
.vinci-shadow-sm { box-shadow: var(--vinci-shadow-sm); }
.vinci-shadow-md { box-shadow: var(--vinci-shadow-md); }
.vinci-shadow-lg { box-shadow: var(--vinci-shadow-lg); }
.vinci-shadow-xl { box-shadow: var(--vinci-shadow-xl); }


/* ============================================================================
   [8. ESPAÇAMENTO]
   Escala de espaçamento (para padding, margin, gap) — todos os valores
   seguem base 4 (o número do token × 4 = pixels). Vai até 152px.
   O Elementor não tem um painel de "espaçamentos globais" como tem para
   cores e fontes, então isto aqui é mais uma REFERÊNCIA: ao preencher
   padding/margem/gap manualmente nos controles do Elementor, escolha um
   destes valores em vez de digitar um número qualquer.
   ============================================================================ */
:root {
  --vinci-space-1: 4px;
  --vinci-space-2: 8px;
  --vinci-space-3: 12px;
  --vinci-space-4: 16px;
  --vinci-space-5: 20px;
  --vinci-space-6: 24px;
  --vinci-space-8: 32px;
  --vinci-space-10: 40px;
  --vinci-space-12: 48px;
  --vinci-space-16: 64px;  /* espaçamento padrão ENTRE seções da página */
  --vinci-space-18: 72px;
  --vinci-space-20: 80px;
  --vinci-space-22: 88px;
  --vinci-space-24: 96px;
  --vinci-space-26: 104px;
  --vinci-space-28: 112px;
  --vinci-space-30: 120px;
  --vinci-space-32: 128px;
  --vinci-space-34: 136px;
  --vinci-space-36: 144px;
  --vinci-space-38: 152px;

  /* Atalhos para padding de seção (mesmos valores de --vinci-space-12/16 acima) */
  --vinci-padding-section-md: var(--vinci-space-12);
  --vinci-padding-section-lg: var(--vinci-space-16);
}


/* ============================================================================
   [9. CORES DE MARCA — classes prontas de texto/fundo]
   Classes rápidas para aplicar cor de texto ou fundo sem escrever CSS.
   COMO USAR: Avançado → Classes CSS → cole a classe, ex. "vinci-accent-gold".
   ============================================================================ */

/* --- 9.1 Cor de texto (tons neutros de texto) --- */
.vinci-ink-primary    { color: var(--vinci-text-primary); }
.vinci-ink-secondary  { color: var(--vinci-text-secondary); }
.vinci-ink-tertiary   { color: var(--vinci-text-tertiary); }
.vinci-ink-on-primary { color: var(--vinci-text-on-primary); }
.vinci-ink-on-bg-warm { color: var(--vinci-text-on-bg-warm); }

/* --- 9.2 Cor de marca (dourado, WhatsApp) --- */
.vinci-accent-gold        { color: var(--vinci-brand-gold); }
.vinci-accent-gold-dark   { color: var(--vinci-brand-gold-dark); }
.vinci-accent-whatsapp    { color: var(--vinci-brand-whatsapp); }
.vinci-bg-accent-gold     { background-color: var(--vinci-brand-gold); }
.vinci-bg-accent-whatsapp { background-color: var(--vinci-brand-whatsapp); }

/* --- 9.3 Fundo (superfícies) --- */
.vinci-surface-warm   { background-color: var(--vinci-bg-warm); }
.vinci-surface-base   { background-color: var(--vinci-bg-base); }
.vinci-surface-subtle { background-color: var(--vinci-bg-subtle); }


/* ============================================================================
   [10. BREAKPOINTS]
   Valores de referência responsivos (Mobile / Tablet / Desktop Grande).
   IMPORTANTE: variável CSS (--vinci-*) não funciona dentro de @media —
   isso é uma limitação do CSS, não um erro deste arquivo. Estes valores
   aqui são só para consulta rápida; se você mesmo escrever um @media,
   digite o número diretamente. No Elementor, configure em:
   Configurações do Site → Layout → Largura de Conteúdo e Breakpoints.
   ============================================================================ */
:root {
  --vinci-breakpoint-tablet-min: 768px;   /* Tablet: 768–1023px · 8 colunas · margem 48px · gutter 24px */
  --vinci-breakpoint-desktop-min: 1440px; /* Desktop Grande: 1440px+ · 12 colunas · margem 112px · gutter 16px */
  /* Mobile = tudo abaixo de 768px · 4 colunas · margem 20px · gutter 16px */
}


/* ============================================================================
   [11. MOVIMENTO / ANIMAÇÃO]
   Duração e curva (easing) de transições/animações — para usar em CSS
   personalizado (Elementor Pro) quando for animar algo manualmente.
   Inclui também a regra global de "reduzir movimento" para quem tem essa
   preferência ativada no sistema operacional (acessibilidade).
   ============================================================================ */
:root {
  --vinci-duration-instant: 0ms;
  --vinci-duration-fast: 100ms;       /* micro-interações, hover, foco */
  --vinci-duration-normal: 200ms;     /* transições padrão, dropdowns, tooltips */
  --vinci-duration-slow: 300ms;       /* entrada de modal, painéis deslizantes */
  --vinci-duration-deliberate: 500ms; /* carregamento tipo skeleton, mudanças grandes de layout */

  --vinci-ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --vinci-ease-in: cubic-bezier(0.42, 0, 1, 1);        /* saídas */
  --vinci-ease-out: cubic-bezier(0, 0, 0.58, 1);       /* entradas */
  --vinci-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1); /* reposicionamento */
  --vinci-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ênfase lúdica — usar com moderação (contexto de saúde) */
}

/* Respeita a preferência "reduzir movimento" do sistema operacional —
   aplicado uma vez, globalmente, para todo o site de uma vez só. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}/* End custom CSS */