/* ============================================================ MEDVANCE CLÍNICAS INTEGRADAS — DESIGN TOKENS ------------------------------------------------------------ Extraído do site em produção (medvanceclinicas.com.br), arquivo wp-content/uploads/elementor/css/post-13.css, em 06/08/2026. Regra do sistema: todo valor abaixo marcado [SITE] existe hoje no site deles. Todo valor marcado [NOVO] foi derivado por nós para fechar buracos do sistema (tons faltando, contraste reprovado, estados de interação). Como usar: importe este arquivo antes de qualquer CSS. Nunca escreva cor, fonte, raio ou espaçamento fora daqui. ============================================================ */ :root { /* ══════════════════════════════════════════════ 1. COR — PRIMITIVAS ══════════════════════════════════════════════ */ /* ── Coral — a cor de ação da marca ── #FA6456 é a cor mais usada do site (18 ocorrências). ATENÇÃO: coral-500 com texto branco dá 2.99:1 e REPROVA no WCAG AA. Para botão com texto branco use coral-600. */ --mv-coral-50: #FEEDEB; /* [NOVO] fundo de aviso suave */ --mv-coral-100: #FED2CD; /* [NOVO] borda / tag */ --mv-coral-200: #FCA49C; /* [NOVO] */ --mv-coral-300: #FB776A; /* [NOVO] */ --mv-coral-400: #F95243; /* [NOVO] hover de superfície coral */ --mv-coral-500: #FA6456; /* [SITE] cor-assinatura. Só com texto escuro */ --mv-coral-600: #DF1907; /* [NOVO] 4.91:1 no branco. Botão sólido */ --mv-coral-700: #BC1506; /* [NOVO] 6.45:1. Hover do botão */ --mv-coral-800: #951104; /* [NOVO] */ --mv-coral-900: #6D0C03; /* [NOVO] texto coral sobre claro */ /* ── Água — o verde-água da identidade da clínica ── Existe no site, mas subutilizado (3 ocorrências). É a ponte com o logo da cruz em degradê verde. */ --mv-agua-50: #F2F8F8; /* [NOVO] fundo de seção alternada */ --mv-agua-100: #DDEEED; /* [NOVO] */ --mv-agua-200: #B3E2E0; /* [SITE] superfície de destaque */ --mv-agua-300: #9ACBC9; /* [NOVO] */ --mv-agua-500: #86C0BE; /* [SITE] borda / ícone */ --mv-agua-600: #4F9794; /* [NOVO] */ --mv-agua-700: #427F7D; /* [NOVO] 4.57:1. Texto e foco */ --mv-agua-800: #346563; /* [NOVO] fundo escuro institucional */ --mv-agua-900: #264A49; /* [NOVO] rodapé */ /* ── Sol — amarelo de realce ── Segunda cor mais usada do site (13x). Nunca é texto: é marca-texto, fundo de selo e destaque de número. */ --mv-sol-100: #FEFACD; /* [NOVO] */ --mv-sol-200: #FDF6A0; /* [SITE] realce / marca-texto */ --mv-sol-400: #FBED41; /* [NOVO] realce forte */ --mv-sol-800: #968B03; /* [NOVO] único tom legível como texto */ /* ── Neutros ── Todos [SITE], exceto onde indicado. */ --mv-neutral-0: #FFFFFF; --mv-neutral-50: #FAFAFA; /* [NOVO] */ --mv-neutral-200: #C7C7C7; --mv-neutral-300: #BDBDBD; --mv-neutral-400: #B6B6B6; --mv-neutral-500: #838383; --mv-neutral-600: #707070; --mv-neutral-700: #575757; --mv-neutral-750: #5E5E5E; --mv-neutral-800: #444444; --mv-neutral-900: #222222; --mv-neutral-1000: #000000; /* ══════════════════════════════════════════════ 2. COR — SEMÂNTICA Use SEMPRE estas, não as primitivas acima. ══════════════════════════════════════════════ */ --mv-bg: var(--mv-neutral-0); --mv-bg-alt: var(--mv-agua-50); /* seção alternada */ --mv-surface: var(--mv-neutral-0); --mv-surface-accent: var(--mv-agua-200); /* card de destaque */ --mv-surface-brand: var(--mv-coral-500); /* bloco coral */ --mv-surface-dark: var(--mv-agua-900); /* rodapé / fechamento */ --mv-text: var(--mv-neutral-900); /* títulos 15.9:1 */ --mv-text-body: var(--mv-neutral-800); /* corpo 9.7:1 */ --mv-text-muted: var(--mv-neutral-600); /* legenda 4.9:1 */ --mv-text-on-dark: var(--mv-neutral-0); --mv-text-on-coral: var(--mv-neutral-900); /* 5.32:1 — NUNCA branco */ --mv-text-on-agua: var(--mv-neutral-900); /* 11.27:1 */ --mv-action: var(--mv-coral-600); /* botão sólido */ --mv-action-hover: var(--mv-coral-700); --mv-action-text: var(--mv-neutral-0); --mv-action-secondary: var(--mv-agua-700); --mv-focus-ring: var(--mv-agua-700); --mv-border: var(--mv-neutral-200); --mv-border-strong: var(--mv-neutral-600); --mv-divider: var(--mv-agua-200); /* WhatsApp — canal único de conversão da clínica */ --mv-whatsapp: #128C4A; /* [NOVO] verde escurecido: 4.55:1 com branco. O #25D366 padrão reprova (1.8:1). */ --mv-whatsapp-hover: #0E6E3A; /* ══════════════════════════════════════════════ 3. TIPOGRAFIA 3 famílias. O site carrega 5: Roboto e Roboto Slab entram só como padrão de fábrica do Elementor, não são decisão de design. Foram cortadas. ══════════════════════════════════════════════ */ --mv-font-display: "Cinzel", "Playfair Display", Georgia, serif; --mv-font-body: "Rubik", system-ui, -apple-system, sans-serif; --mv-font-eyebrow: "Montserrat", system-ui, -apple-system, sans-serif; /* ── Escala fluida ── Ancorada nos tamanhos reais do site: desktop 64 / 53 / 40 / 22 / 19 / 18 / 16 / 13 mobile 22 / 16 / 12 / 11 O salto de 64 para 22 do site atual é grande demais e quebra a hierarquia no celular. Aqui o mínimo sobe. */ --mv-text-display-1: clamp(2rem, 1.15rem + 4.2vw, 4rem); /* 32 → 64 */ --mv-text-display-2: clamp(1.75rem, 1.05rem + 3.5vw, 3.3125rem); /* 28 → 53 */ --mv-text-display-3: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); /* 24 → 40 */ --mv-text-title: 1.375rem; /* 22px */ --mv-text-lg: 1.1875rem; /* 19px */ --mv-text-base: 1.125rem; /* 18px */ --mv-text-sm: 1rem; /* 16px */ --mv-text-xs: 0.8125rem; /* 13px */ --mv-weight-regular: 400; --mv-weight-medium: 500; --mv-weight-semibold: 600; --mv-weight-bold: 700; /* ── Entrelinha ── O site usa 1.1em em tudo, inclusive no corpo. Em parágrafo isso aperta demais para o público 35–65 da clínica. Título mantém 1.1 (é a assinatura). Corpo sobe para 1.65. */ --mv-leading-tight: 1.1; /* [SITE] só títulos */ --mv-leading-snug: 1.2; /* [SITE] botão e label */ --mv-leading-body: 1.65; /* [NOVO] parágrafo */ --mv-tracking-eyebrow: 3.2px; /* [SITE] assinatura do olho */ --mv-tracking-normal: 0px; /* ══════════════════════════════════════════════ 4. FORMATO DOS ELEMENTOS A assinatura visual da Medvance é o canto diagonal: dois cantos opostos arredondados, dois em ângulo reto. Aparece 8 vezes no site. É o que diferencia a marca. ══════════════════════════════════════════════ */ --mv-radius-leaf: 20px 0 20px 0; /* [SITE] botão, tag, card pequeno */ --mv-radius-leaf-md: 40px 0 40px 0; /* [SITE] card médio */ --mv-radius-leaf-lg: 80px 0 80px 0; /* [SITE] bloco de seção */ --mv-radius-notch: 80px 0 0 0; /* [SITE] canto único, imagem */ --mv-radius-notch-sm:40px 0 0 0; /* [SITE] */ --mv-radius-xs: 10px; /* [SITE] */ --mv-radius-sm: 12px; /* [SITE] */ --mv-radius-md: 20px; /* [SITE] */ --mv-radius-lg: 40px; /* [SITE] */ --mv-radius-xl: 80px; /* [SITE] */ --mv-radius-pill: 999px; /* [SITE] era 668px, mesmo efeito */ --mv-radius-circle: 50%; /* ── Sombra ── O site tem uma sombra real: deslocamento sólido sem blur. As outras são artefato de animação do Elementor. */ --mv-shadow-hard: 9px 9px 0 0 var(--mv-neutral-0); /* [SITE] */ --mv-shadow-hard-coral: 9px 9px 0 0 var(--mv-coral-500); /* [NOVO] */ --mv-shadow-hard-agua: 9px 9px 0 0 var(--mv-agua-200); /* [NOVO] */ --mv-shadow-1: 0 2px 8px rgba(34,34,34,.06); /* [NOVO] card em repouso */ --mv-shadow-2: 0 12px 32px rgba(34,34,34,.10); /* [NOVO] card em hover */ --mv-border-width: 1px; --mv-border-width-strong: 2px; /* ══════════════════════════════════════════════ 5. ESPAÇAMENTO Base 10. Todos os degraus vêm dos valores do site. ══════════════════════════════════════════════ */ --mv-space-1: 10px; --mv-space-2: 20px; /* [SITE] o mais usado */ --mv-space-3: 30px; /* [SITE] gap de grid */ --mv-space-4: 40px; /* [SITE] */ --mv-space-5: 50px; /* [SITE] respiro de bloco */ --mv-space-6: 80px; --mv-space-7: 100px; /* [SITE] respiro de seção */ --mv-gap-grid: var(--mv-space-3); --mv-gap-stack: var(--mv-space-2); /* ══════════════════════════════════════════════ 6. LAYOUT ══════════════════════════════════════════════ */ --mv-container: 1140px; --mv-container-narrow: 720px; --mv-gutter: var(--mv-space-2); /* Breakpoints do site: 767 / 768 / 1025. Custom properties não funcionam dentro de @media, ficam aqui como documentação do sistema. */ --mv-bp-mobile: 767px; --mv-bp-tablet: 768px; --mv-bp-desktop: 1025px; /* ══════════════════════════════════════════════ 7. MOVIMENTO ══════════════════════════════════════════════ */ --mv-duration-fast: 150ms; --mv-duration-base: 250ms; --mv-duration-slow: 500ms; --mv-ease: cubic-bezier(.22,.61,.36,1); } /* Acessibilidade: respeitar quem desativou animação no sistema. */ @media (prefers-reduced-motion: reduce) { :root { --mv-duration-fast: 0ms; --mv-duration-base: 0ms; --mv-duration-slow: 0ms; } }