/* =====================================================================
   SAÚDE TOTAL — tokens
   Régua: comércio de saúde. Sóbrio, legível, confiável.
   Público 55+ decidindo uma compra de valor médio. Nada de brincadeira.
   ===================================================================== */

:root {
  /* ---- Verde do rótulo, em escala ---- */
  --azul-900: #073b2c;
  --azul-800: #07513a;
  --azul-700: #087443;
  --azul-600: #0a8f50;
  --azul-500: #21aa67;
  --azul-100: #bfe8d1;
  --azul-050: #effaf4;

  /* ---- Ação e sinal ---- */
  --verde: #087b46;
  --verde-claro: #10a45d;
  --verde-fundo: #e9f8f0;
  --vermelho: #c62828;
  --vermelho-fundo: #fdeceb;
  --ouro: #a8842c;

  /* ---- Neutros ---- */
  --tinta: #10271d;
  --texto: #42594e;
  --texto-fraco: #708179;
  --linha: #dcebe3;
  --linha-forte: #c7dccf;
  --fundo-alt: #f5faf7;
  --branco: #ffffff;

  /* ---- Papéis ---- */
  --fundo: var(--branco);
  --marca: var(--azul-700);

  /* ---- Tipografia
         Corpo em 17px: o comprador tem 60 anos e lê no celular. ---- */
  --f-titulo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;

  --t-hero: clamp(2rem, 4.2vw, 3.25rem);
  --t-h2: clamp(1.5rem, 2.9vw, 2.125rem);
  --t-h3: 1.1875rem;
  --t-corpo: 1.0625rem;
  --t-peq: 0.9375rem;
  --t-micro: 0.8125rem;
  --linha-texto: 1.7;

  /* ---- Espaço ----
     A largura era 1140px. Num monitor de 1512 isso deixava 186px mortos de
     cada lado e espremia os quatro cartões de kit em 250px — largura em que
     O texto auxiliar do checkout quebrava em duas linhas e a duração do kit ficava
     em três. O aperto não era de tipografia, era de continente.

     1320px devolve ~45px a cada cartão sem esticar nenhuma linha de texto: os
     parágrafos têm `max-width` próprio em ch, então quem cresce são os grids,
     que é onde faltava. O respiro vertical entre seções subiu junto — metade
     da sensação de sufoco vinha da distância entre uma seção e a próxima, não
     da largura. */
  --gutter: clamp(1rem, 4vw, 3rem);
  --secao-y: clamp(3.5rem, 6.5vw, 7rem);
  --largura: 1320px;
  --largura-estreita: 860px;

  /* ---- Forma ---- */
  --r: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  /* ---- Elevação: luz vinda de cima, como objeto sobre mesa ---- */
  --sombra-1: 0 1px 2px rgba(7, 59, 44, .06), 0 2px 6px rgba(7, 59, 44, .05);
  --sombra-2: 0 2px 4px rgba(7, 59, 44, .06), 0 10px 26px rgba(7, 59, 44, .09);
  --sombra-3: 0 4px 8px rgba(7, 59, 44, .07), 0 20px 48px rgba(7, 59, 44, .14);
  --sombra-produto: 0 40px 60px -30px rgba(7, 59, 44, .4);
}