/* Orthocrep — design tokens (extraídos de orthocrep.com.br, kit Elementor) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root {
  /* Cores de marca */
  --oc-primary: #253D3A;        /* verde-petróleo escuro: header, botões, títulos, texto */
  --oc-secondary: #3E885E;      /* verde médio: destaques, ícones, hover */
  --oc-sage: #6A9553;           /* verde-folha: detalhes, selos */
  --oc-accent: #AFEE6D;         /* verde-limão: CTA de destaque, badges, sublinhados */
  --oc-bg: #F9F9F8;             /* off-white: fundo das seções claras */
  --oc-white: #FFFFFF;
  --oc-black: #000000;

  /* Funcionais */
  --oc-whatsapp: #1EBE5D;       /* botão WhatsApp (único botão que foge do verde-petróleo) */
  --oc-text: #253D3A;
  --oc-text-muted: #54595F;
  --oc-border: #E9E6ED;

  /* Tipografia — Montserrat em tudo */
  --oc-font: "Montserrat", sans-serif;
  --oc-fw-regular: 400;
  --oc-fw-medium: 500;
  --oc-fw-semibold: 600;
  --oc-fw-bold: 700;

  --oc-fs-h1: clamp(30px, 5vw, 48px);
  --oc-fs-h2: clamp(24px, 3.5vw, 30px);
  --oc-fs-h3: 20px;
  --oc-fs-body: 16px;
  --oc-fs-small: 14px;
  --oc-fs-button: 15px;

  /* Forma */
  --oc-radius-pill: 100px;      /* botões */
  --oc-radius-card: 25px;       /* cards grandes */
  --oc-radius-sm: 10px;         /* cards pequenos / inputs */
  --oc-radius-circle: 186px;    /* ícones/imagens circulares */

  /* Espaço e sombra */
  --oc-space-section: 80px;
  --oc-container: 1140px;
  --oc-shadow: 0 8px 24px rgba(37, 61, 58, .12);
}

body { font-family: var(--oc-font); color: var(--oc-text); background: var(--oc-bg); }
h1, h2, h3 { font-weight: var(--oc-fw-semibold); color: var(--oc-primary); line-height: 1.2; }
strong, b { font-weight: var(--oc-fw-bold); }

.oc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 40px; border: 0; border-radius: var(--oc-radius-pill);
  font: var(--oc-fw-semibold) var(--oc-fs-button)/1 var(--oc-font);
  background: var(--oc-primary); color: var(--oc-white); cursor: pointer;
  transition: background .2s, transform .2s;
}
.oc-btn:hover { background: var(--oc-secondary); transform: translateY(-2px); }
.oc-btn--whatsapp { background: var(--oc-whatsapp); }
.oc-btn--whatsapp:hover { background: #17a44f; }
.oc-btn--accent { background: var(--oc-accent); color: var(--oc-primary); }