/* =====================================================================
   REDUCENTRO — Design Tokens  (v2 · derivados do LOGO OFICIAL)
   Território visual: "CONVERGÊNCIA" — a pessoa no centro, o cuidado em volta.
   Cores-mãe amostradas do vetor assets/brand/logo-oficial.pdf:
     azul    rg .294 .424 .702  → #4B6CB3
     laranja rg .976 .624 .212  → #F99F36
     branco                      → #FFFFFF
   Todo ratio anotado = contraste WCAG 2.x calculado por script (DESIGN.md §3).

   Camadas: 1. Primitivos → 2. Semânticos → 3. Componente.
   Componentes consomem SÓ semânticos/componente, nunca primitivos.

   Fontes (no <head>, antes do CSS):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu+Sans:ital,wght@0,300..800;1,400&display=swap">
   ===================================================================== */

:root {
  /* ===================================================================
     1. PRIMITIVOS — COR
     =================================================================== */

  /* Azul REDUCENTRO — matiz 221° do logo, rampa por luminosidade */
  --azul-950: #111A2C;  /* rodapé. Branco 17.38:1 · laranja 8.31:1 · rótulo do botão laranja */
  --azul-900: #1C2B4A;  /* TEXTO e blocos escuros. Sobre névoa 12.99:1 · branco sobre ele 14.06:1 */
  --azul-800: #23355C;  /* card dentro de bloco escuro. Branco 12.10:1 · laranja 5.79:1 */
  --azul-700: #314B81;  /* link, eyebrow. Sobre névoa 7.91:1 · branco 8.56:1 */
  --azul-600: #3F5C9E;  /* hover de link / botão azul. Sobre névoa 6.00:1 */
  --azul-500: #4B6CB3;  /* AZUL DO LOGO. Sobre névoa 4.74:1 · branco 5.13:1 · faixa alt 4.40:1 (só grande) */
  --azul-300: #A9BCE0;  /* texto secundário SÓ sobre escuro (7.33:1 no 900). Sobre claro = ornamento (1.77:1) */
  --azul-100: #DDE5F3;  /* chip, tag, trilho */
  --azul-50:  #EEF2F9;  /* superfície da frente Aparelho Digestivo */

  /* Laranja REDUCENTRO — NUNCA texto sobre claro nem sobre o azul do logo */
  --laranja-700: #A05908; /* único laranja seguro p/ TEXTO sobre claro: 4.94:1 (névoa) · 5.35:1 (branco) */
  --laranja-600: #C26C0A; /* borda do botão laranja sobre claro: 3.57–3.86:1 (UI) */
  --laranja-500: #F99F36; /* LARANJA DO LOGO. Sobre branco 2.09:1 ✗ · sobre azul-500 2.45:1 ✗
                             · sobre azul-900 6.72:1 ✓ · preenchimento do CTA com texto azul-950 (8.31:1) */
  --laranja-400: #FBB765; /* hover do botão laranja (azul-950 sobre ele: 9.99:1) */
  --laranja-200: #FCD9AE; /* ornamento sobre claro (1.24:1) */
  --laranja-50:  #FEF5EA; /* superfície da frente Obesidade & Metabolismo */

  /* Neutros — levemente frios, puxados para o azul do logo */
  --nevoa:    #F4F6FA;  /* FUNDO DO SITE (o "cinza claro" do panfleto, limpo) */
  --branco:   #FFFFFF;  /* cards, header, superfície */
  --gelo:     #E9EEF6;  /* faixa alternada */
  --linha:    #D6DDE9;  /* hairline decorativa (1.26:1 — nunca informativa) */
  --cinza-ui: #6B7690;  /* borda funcional de input / ícone: 4.20–4.55:1 */
  --tinta-700: #3B4863; /* texto secundário: 8.46:1 */
  --tinta-600: #566079; /* legenda, CRM/RQE: 5.80:1 (névoa) · 5.39:1 (gelo) */
  --erro:     #B3261E;  /* 6.04:1 */

  /* ===================================================================
     2. SEMÂNTICOS
     =================================================================== */

  /* Fundos */
  --bg:             var(--nevoa);
  --bg-alt:         var(--gelo);
  --surface:        var(--branco);
  --bg-invert:      var(--azul-900);   /* blocos escuros (Retomada, CTA final) */
  --bg-invert-deep: var(--azul-950);   /* rodapé */
  --surface-invert: var(--azul-800);   /* card em bloco escuro */
  --bg-brand:       var(--azul-500);   /* SÓ elementos pequenos: badge, controle selecionado, número de passo.
                                          Nunca seção com CTA laranja (laranja × azul-500 = 2.45:1) */

  /* Texto sobre claro */
  --text:        var(--azul-900);
  --text-soft:   var(--tinta-700);
  --text-mute:   var(--tinta-600);
  --heading:     var(--azul-500);      /* h1–h3 (≥ 22px). Em h4/menores usar --heading-sm */
  --heading-sm:  var(--azul-900);
  --link:        var(--azul-700);
  --link-hover:  var(--azul-600);
  --eyebrow:     var(--azul-700);
  --data-accent: var(--laranja-700);   /* dado/destaque laranja em texto sobre claro */

  /* Texto sobre escuro (azul-900 / 950 / 800) */
  --text-on-dark:      var(--branco);
  --text-soft-on-dark: var(--azul-300);
  --heading-on-dark:   var(--branco);
  --accent-on-dark:    var(--laranja-500);  /* laranja PODE ser texto aqui: 6.72:1 (900) · 5.79:1 (800) */

  /* Ação — laranja = agendar. Papel único. */
  --action-bg:        var(--laranja-500);
  --action-bg-hover:  var(--laranja-400);
  --action-text:      var(--azul-950);      /* 8.31:1 AAA */
  --action-border:    var(--laranja-600);   /* contorno ≥3:1 sobre claro */

  /* Ação secundária — azul */
  --secondary-border: var(--azul-500);      /* 4.74:1 */
  --secondary-text:   var(--azul-700);
  --secondary-hover:  var(--azul-50);
  --solid-bg:         var(--azul-500);      /* botão azul sólido: branco 5.13:1 (AA, usar 16px 700) */
  --solid-bg-hover:   var(--azul-600);      /* branco 6.49:1 */

  /* Linhas */
  --line:         var(--linha);
  --line-strong:  rgba(28, 43, 74, .22);
  --line-ui:      var(--cinza-ui);
  --line-on-dark: rgba(255, 255, 255, .16);

  /* Foco */
  --focus:         var(--azul-900);   /* 12.99:1 */
  --focus-on-dark: var(--branco);     /* 14.06:1 */

  /* Frentes clínicas — superfície + marcador + RÓTULO textual (nunca só cor) */
  --front-obes-surface: var(--laranja-50);
  --front-obes-marker:  var(--laranja-500);  /* ornamento */
  --front-obes-label:   var(--laranja-700);  /* 4.96:1 sobre laranja-50 */
  --front-dig-surface:  var(--azul-50);
  --front-dig-marker:   var(--azul-500);     /* ornamento */
  --front-dig-label:    var(--azul-700);     /* 7.62:1 sobre azul-50 */

  /* Grafismo "chevron de convergência" (DESIGN.md §5.5) */
  --chevron-on-light:  var(--laranja-500);
  --chevron-alt-light: var(--azul-300);
  --chevron-on-dark:   var(--laranja-500);

  /* ===================================================================
     3. TIPOGRAFIA — Ubuntu Sans (humanista, eco direto do wordmark)
     =================================================================== */
  --font-sans: 'Ubuntu Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Algarismos da Ubuntu Sans são TABULARES por padrão (564u todos) — CRM, RQE,
     telefone e horário alinham sem fonte mono. Mesmo assim declarar
     font-variant-numeric: tabular-nums em dados, por robustez de fallback. */

  --fw-light:   300;  /* eco do "CENTRO" — só em títulos ≥ 28px */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;  /* eco do "REDU" — só em display, 1–2 palavras */

  /* Escala fluida 360 → 1440px */
  --fs-display: clamp(2.125rem, 1.25rem + 4.1vw, 4.25rem);   /* 34 → 68px  h1 */
  --fs-h2:      clamp(1.75rem, 1.35rem + 1.8vw, 3rem);       /* 28 → 47px */
  --fs-h3:      clamp(1.375rem, 1.26rem + 0.5vw, 1.625rem);  /* 22 → 26px */
  --fs-h4:      clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);   /* 18 → 20px */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);/* 18 → 21px */
  --fs-body:    clamp(1.0625rem, 1.03rem + 0.15vw, 1.125rem);/* 17 → 18px */
  --fs-small:   0.9375rem;  /* 15px — meta, CRM/RQE */
  --fs-label:   0.8125rem;  /* 13px — eyebrow CAIXA-ALTA 700 */
  --fs-legal:   0.875rem;   /* 14px — rodapé (nunca menor) */

  --lh-display: 1.05;
  --lh-heading: 1.12;
  --lh-h3:      1.25;
  --lh-lead:    1.5;
  --lh-body:    1.6;
  --lh-tight:   1.2;

  --ls-display: -0.02em;
  --ls-heading: -0.012em;
  --ls-label:    0.1em;   /* eco do descritor do logo (caixa-alta espaçada) */
  --ls-button:   0.005em;

  --measure:       66ch;
  --measure-lead:  54ch;
  --measure-title: 20ch;

  /* ===================================================================
     4. ESPAÇAMENTO — base 4px
     =================================================================== */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;
  --section-y:    clamp(4rem, 2.8rem + 5.3vw, 7.5rem);  /* 64 → 120px */
  --section-y-sm: clamp(2.5rem, 2rem + 2.2vw, 4rem);
  --stack-title:  clamp(1.25rem, 1rem + 1vw, 2rem);

  /* ===================================================================
     5. GRID
     =================================================================== */
  --container:        75rem;   /* 1200px */
  --container-narrow: 46rem;   /* 736px */
  --gutter:   clamp(1.25rem, 0.8rem + 2vw, 2.5rem);   /* 20 → 40px */
  --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);      /* 16 → 32px */

  /* ===================================================================
     6. RAIO — terminais redondos do símbolo → cantos macios, sem virar "app"
     =================================================================== */
  --r-xs:   6px;    /* chip, tag */
  --r-sm:   10px;   /* botão, input, controle segmentado */
  --r-md:   16px;   /* card */
  --r-lg:   24px;   /* foto, mapa, sheet */
  --r-full: 999px;  /* só círculos e o botão flutuante */

  /* ===================================================================
     7. SOMBRA — tingida de azul-950, baixa. Sem glow, sem glass.
     =================================================================== */
  --sh-0: none;
  --sh-1: 0 1px 2px rgba(17, 26, 44, .06), 0 1px 1px rgba(17, 26, 44, .04);
  --sh-2: 0 2px 4px rgba(17, 26, 44, .05), 0 12px 28px -8px rgba(17, 26, 44, .14);
  --sh-3: 0 6px 16px rgba(17, 26, 44, .12), 0 24px 48px -12px rgba(17, 26, 44, .22);
  --sh-focus:         0 0 0 3px var(--branco), 0 0 0 5px var(--azul-900);
  --sh-focus-on-dark: 0 0 0 3px var(--azul-900), 0 0 0 5px var(--branco);

  /* ===================================================================
     8. MOTION — "convergir": chega ao centro e para. Sem bounce, sem loop.
     =================================================================== */
  --ease-out:    cubic-bezier(.22, .8, .3, 1);
  --ease-in-out: cubic-bezier(.6, 0, .3, 1);
  --dur-1: 120ms;  --dur-2: 200ms;  --dur-3: 320ms;  --dur-4: 520ms;
  --rise: 12px;        /* entrada vertical */
  --converge: 10px;    /* entrada lateral dos chevrons, das bordas para o centro */
  --stagger: 60ms;

  /* ===================================================================
     9. COMPONENTES
     =================================================================== */
  --header-h:      64px;
  --header-h-desk: 76px;
  --logo-h-mobile: 28px;   /* logo-horizontal.svg (6.67:1): 28px alt ≈ 187px larg (reduzido a pedido do cliente, era 34px) */
  --logo-h-desk:   34px;   /* ≈ 227px larg (reduzido a pedido do cliente, era 44px) */
  --btn-h:         52px;
  --btn-h-sm:      44px;
  --btn-px:        var(--sp-5);
  --tap-min:       48px;
  --card-pad:      clamp(1.25rem, 1rem + 1vw, 2rem);
  --wa-size:       56px;
  /* [Adicionado 14/09/2026 · vídeo do hero · revisado no hero minimalista]
     Overlay em GRADIENTE de azul-950: forte do lado do texto, leve do lado oposto (o vídeo aparece mais).
     Contraste calculado no PIOR CASO (pixel branco puro por baixo, o poster tem luminárias brancas),
     SÓ na área do texto e do botão, onde o overlay é sempre --hero-overlay-strong:
       strong .72 → fundo ≈ #545A67 → h1 branco 6,92:1 (≥ 4,5 exigido) · borda do botão laranja 3,31:1 (UI ≥ 3)
       rótulo do botão (azul-950 sobre laranja) 8,31:1, independe do vídeo.
     Lado leve (.30), sem texto: ornamental. Desktop: a faixa forte vai até a borda direita
     da coluna do texto + 4rem (--hero-strong-until); mobile: de baixo até 62% da altura (o texto fica embaixo).
     Verificado por medição no navegador: o texto nunca passa do fim da faixa forte (_qa/hero-min-*.png). */
  --hero-overlay-strong: rgba(17, 26, 44, .72);
  --hero-overlay-soft:   rgba(17, 26, 44, .30);
  --hero-text-max: 48rem;
  --hero-text-w:   min(100%, var(--hero-text-max));
  --fs-hero:       clamp(2.125rem, 1.2rem + 3.7vw, 4.25rem);   /* 34 → 68px */
  --hero-strong-until: calc(max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2) + var(--gutter) + var(--hero-text-max) + 4rem);
  --hero-overlay-desktop:
    linear-gradient(0deg, rgba(17, 26, 44, .35) 0%, rgba(17, 26, 44, 0) 30%),
    linear-gradient(90deg, var(--hero-overlay-strong) 0%, var(--hero-overlay-strong) var(--hero-strong-until), var(--hero-overlay-soft) 100%);
  --hero-overlay-mobile:
    linear-gradient(0deg, var(--hero-overlay-strong) 0%, var(--hero-overlay-strong) 62%, var(--hero-overlay-soft) 100%);
  --icon-stroke:   1.75px;
  --chevron-stroke: 2px;   /* grafismo em UI; no símbolo a razão é traço 1 : altura 16 */

  /* ===================================================================
     10. CAMADAS
     =================================================================== */
  --z-base: 1; --z-sticky: 50; --z-float: 80; --z-header: 100;
  --z-overlay: 150; --z-sheet: 160; --z-skip: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --rise: 0px; --converge: 0px; --stagger: 0ms; }
}

@media (prefers-contrast: more) {
  :root {
    --text-soft: var(--azul-900);
    --text-mute: var(--tinta-700);
    --heading: var(--azul-700);          /* 7.91:1 em vez de 4.74:1 */
    --line: var(--cinza-ui);
    --line-strong: var(--tinta-700);
    --text-soft-on-dark: var(--branco);
  }
}

@media (forced-colors: active) {
  :root { --action-border: ButtonText; --focus: Highlight; --focus-on-dark: Highlight; }
}

@media (min-width: 56.25em) { /* ≥ 900px */
  :root { --header-h: var(--header-h-desk); }
}