/* ===== Fontes self hosted ===== */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Marca */
  --petroleo-900: #0F3B44;
  --petroleo-700: #1B5A66;
  --teal-500:     #2E8C9E;
  --teal-600:     #247584;   /* hover escuro, texto teal em fundo claro (AA) */
  --teal-400:     #4FA8B8;
  --turquesa-200: #A8DCE5;
  --turquesa-50:  #EDF7F9;

  /* Neutros */
  --branco:       #FFFFFF;
  --cinza-50:     #F7FAFB;
  --cinza-200:    #E3EAEC;
  --cinza-500:    #5F7075;   /* ajustado de #6B7D82 para AA sobre --turquesa-50 */
  --cinza-900:    #16292F;

  /* Ação */
  --whatsapp:       #25D366;
  --whatsapp-texto: #0B3D1F; /* texto escuro sobre verde: AA */
  --aviso:          #B8860B;

  /* Tipografia */
  --font-title: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.75rem;
  --text-4xl:  3.5rem;

  --lh-body:  1.65;
  --lh-title: 1.15;
  --measure:  68ch;

  /* Espaçamento, escala de 4px */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px;

  --section-y: 96px;
  --container: 1200px;
  --gutter: 24px;

  /* Forma */
  --radius-card: 12px;
  --radius-pill: 999px;
  --shadow: 0 1px 3px rgba(15,59,68,.08), 0 8px 24px rgba(15,59,68,.06);
  --shadow-lg: 0 2px 6px rgba(15,59,68,.10), 0 16px 40px rgba(15,59,68,.10);

  /* Movimento */
  --dur: 400ms;
  --ease: cubic-bezier(.2,.7,.2,1);

  --header-h: 72px;
  --cfo-h: 30px;
}

@media (max-width: 767px) {
  :root {
    --section-y: 64px;
    --gutter: 16px;
    --header-h: 64px;
  }
}