/* =========================================================================
   Lúcida V5 — tokens
   Fonte: código da V1 (_referencias/v1/index.html §1 e §3) + direção de arte
   da V1 (docs/referencia/identidade-v1-DIRECAO-DE-ARTE.md §2, §3, §4, §5, §6, §8).
   Único lugar do projeto com #hex, rgb()/rgba() e font-size em px.
   Diferenças em relação à V1 (docs/PLAN.md §2):
   - sem os dois tokens de linha das Grid Lines (removidas);
   - --surface-mist-section opaco (#F5F6F7 = rgba(13,27,65,.04) composto sobre branco);
   - valores que a V1 escrevia soltos no CSS viraram token (--text-inverse,
     --surface-hover, --mist-*, escala tipográfica --fs/--lh/--ls por breakpoint).
   ========================================================================= */
:root{
  /* blue/ (§2.2) */
  --blue-50:#F4F7FE; --blue-100:#E6EEFF; --blue-200:#CDDCFF; --blue-300:#A7C2FE; --blue-400:#789FFE;
  --blue-500:#4775FA; --blue-600:#2F59E4; --blue-700:#2448BE; --blue-800:#1E3A92; --blue-900:#172C68; --blue-950:#0D1B41;
  /* aqua/ (§2.3) */
  --aqua-100:#D6F8FB; --aqua-300:#8CE4EB; --aqua-500:#20B2C4; --aqua-600:#0590A2; --aqua-700:#007182;
  /* ink/ e gray/ (§2.4) */
  --ink-950:#0A0F1C; --ink-900:#151B2A; --ink-800:#293040; --ink-700:#3F4656; --ink-600:#555C6B; --ink-500:#676D7C; --ink-400:#868C99;
  --gray-400:#B2B7C2; --gray-300:#D0D4DD; --gray-200:#E1E5EB; --gray-100:#EEF0F5; --gray-50:#F5F7FA; --gray-25:#FAFBFD;

  /* superfícies (§2.5) — mist-section agora opaco (PLAN §2.1) */
  --surface-white:#FFFFFF; --surface-mist:#F5F7FA; --surface-mist-section:#F5F6F7;
  --surface-glass:rgba(255,255,255,.80); --surface-glass-strong:rgba(255,255,255,.88);
  --surface-hover:rgba(21,27,42,.04);              /* hover dos links do header (V1: valor solto no .nav a:hover) */
  --text-inverse:#FFFFFF;                          /* texto sobre blue/600 (V1: #FFFFFF solto) */
  /* bordas (§2.5) */
  --border-subtle:#E1E5EB; --border-default:#D0D4DD; --border-strong:#B2B7C2; --border-focus:#4775FA;
  --border-glass:rgba(255,255,255,.65); --border-on-blue:rgba(255,255,255,.72);
  /* overlays (§2.5) */
  --overlay-veil-hero-d:linear-gradient(90deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.90) 45%, rgba(255,255,255,0) 70%);
  --overlay-veil-hero-t:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.90) 55%, rgba(255,255,255,0) 75%);
  /* F2 — Card / Tratamento: o scrim da V1 (0 → .72 em 45 %) não dá AA com o texto sobre as fotos claras (medido em
     _processo/evidencias/F2-r1/contraste.txt); reforço na base (aberto) e faixa lateral atrás do nome vertical (fechado) — V5-PEND-12 */
  --overlay-scrim-trat:linear-gradient(180deg, rgba(10,15,28,0) 0%, rgba(10,15,28,.62) 42%, rgba(10,15,28,.86) 100%);
  --overlay-scrim-side:linear-gradient(90deg, rgba(10,15,28,.58) 0%, rgba(10,15,28,.3) 50%, rgba(10,15,28,.1) 100%);
  --overlay-backdrop:rgba(10,15,28,.32); --overlay-on-blue-hover:rgba(30,58,146,.30);
  /* semânticos (§2.6) */
  --status-success:#1E7546; --status-success-bg:#E0F9E8; --status-attention:#915C08; --status-attention-bg:#FEF2D9;
  /* mapa de córnea (§2.7) */
  --map-1:#2E54AE; --map-2:#4F8DDF; --map-3:#54C2DB; --map-4:#79DBB2; --map-5:#ECDD80; --map-6:#F8AF6C; --map-7:#E67B6E;

  /* gradientes (§3.1, §3.3) */
  --grad-h1:linear-gradient(100deg, #2F59E4 0%, #4775FA 35%, #0590A2 65%, #2F59E4 100%);
  --grad-cta:linear-gradient(135deg, #2448BE 0%, #2F59E4 100%);
  /* névoas (§3.2) — gradiente radial, não blur */
  --mist-blue:radial-gradient(closest-side, rgba(167,194,254,.30) 0%, rgba(167,194,254,0) 70%);
  --mist-aqua:radial-gradient(closest-side, rgba(140,228,235,.35) 0%, rgba(140,228,235,0) 70%);

  /* espaço (§5.1) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px;
  --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px; --space-30:120px; --space-40:160px;
  /* raios (§6.1) */
  --radius-xs:6px; --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px;
  /* sombras (§6.2) */
  --shadow-xs:0 1px 2px rgba(21,27,42,.06);
  --shadow-sm:0 1px 2px rgba(21,27,42,.04), 0 6px 16px rgba(21,27,42,.06);
  --shadow-float:0 2px 4px rgba(23,44,104,.06), 0 16px 40px rgba(23,44,104,.14);
  --shadow-header:0 8px 24px rgba(21,27,42,.08);
  --shadow-cta:0 24px 64px rgba(36,72,190,.22);
  /* vidro (§6.3) */
  --blur-glass:20px; --blur-glass-strong:16px; --blur-tag:12px;
  /* foco (§7) */
  --focus-ring:0 0 0 2px #FFFFFF, 0 0 0 4px #4775FA;
  --focus-ring-on-blue:0 0 0 2px #2F59E4, 0 0 0 4px #FFFFFF;

  /* motion (§8.1) */
  --ease-out-quint:cubic-bezier(.22,1,.36,1); --ease-out-expo:cubic-bezier(.16,1,.3,1); --ease-in-out-sine:cubic-bezier(.37,0,.63,1);
  --dur-fast:.18s; --dur-base:.3s; --dur-slow:.6s; --dur-appear:.8s; --stagger-base:.08s;
  --dur-float:6s; --dur-grad:8s; --delay-grad:.9s; --dur-reduced:.2s;
  --appear-y:24px; --appear-blur:8px; --appear-blur-photo:12px; --appear-scale-photo:1.02;

  /* layout (§5.2) — desktop ≥ 1200 */
  --cols:12; --gutter:24px; --margin:48px; --content-max:1440px;
  --section-py:80px; --head-gap:64px;
  --header-top:0px; --header-h:64px;

  /* tipografia (§4.2) — Inter; desktop ≥ 1200 */
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600;
  --fs-display:64px;   --lh-display:68px;   --ls-display:-.025em;
  --fs-h2:44px;        --lh-h2:48px;        --ls-h2:-.02em;
  --fs-h3:22px;        --lh-h3:28px;        --ls-h3:-.015em;
  --fs-h4:18px;        --lh-h4:26px;        --ls-h4:-.014em;
  --fs-lead:20px;      --lh-lead:30px;      --ls-lead:-.017em;
  --fs-body:16px;      --lh-body:26px;      --ls-body:-.011em;
  --fs-body-sm:14px;   --lh-body-sm:20px;   --ls-body-sm:-.006em;
  --fs-table:15px;     --lh-table:22px;     --ls-table:-.008em;
  --fs-button:15px;    --lh-button:20px;    --ls-button:-.009em;
  --fs-button-sm:14px; --lh-button-sm:20px; --ls-button-sm:-.006em;
  --fs-nav:14px;       --lh-nav:20px;       --ls-nav:-.006em;
  --fs-nav-panel:28px; --lh-nav-panel:34px; --ls-nav-panel:-.02em;
  --fs-caption:12px;   --lh-caption:16px;   --ls-caption:0;
  --fs-eyebrow:12px;   --lh-eyebrow:16px;   --ls-eyebrow:.06em;
  --fs-note:12px;      --lh-note:18px;      --ls-note:0;

  /* cartão de optotipos do hero (PLAN §4 linha 1) — corpo das 6 linhas Snellen, 44 → 12 */
  --fs-opto-1:44px; --fs-opto-2:34px; --fs-opto-3:26px; --fs-opto-4:20px; --fs-opto-5:16px; --fs-opto-6:12px;
  --ls-opto:.14em;

  /* componentes com medida fixa da V1 */
  --ui-card-w:240px;      /* Card / UI flutuante (§7.4): 240 / 232 / 220 */
  --dialog-w:560px;       /* diálogo (estrutura V2 §12) */

  /* F2 — medidas fixas dos componentes da V1 (V1 §15, §19, §20, §22 · DIRECAO §7.5–7.7, §8.2) */
  --trat-h:520px;             /* Card / Tratamento: altura da linha (desktop) */
  --trat-open-w:432px;        /* card aberto */
  --trat-body-w:384px;        /* texto do aberto = 432 − 2 × 24 */
  --trat-grow-hl:1.5;         /* refrativa e catarata em destaque: largura relativa quando fechados (hierarquia da V2) */
  --trat-compact-w:320px; --trat-compact-h:440px; --trat-compact-media-h:240px;  /* Compacto (tablet) */
  --mcard-radius:20px;        /* Card / Médico: raio da foto */
  --mcard-w-t:280px; --mcard-w-m:290px;  /* carrossel da Equipe (tablet / mobile) */
  --bento-h:380px; --bento-pad:28px; --bento-ui-min:140px;
  --dur-jor-bar:8s; --dur-jor-swap:.5s; --delay-jor-card:.15s;   /* #8 Jornada */
  --dur-topo-fade:1.2s; --stagger-oct:.12s; --stagger-peri:.1s; --dur-count:1.2s;   /* #10 micro-UIs */
  --ui-float-off:40px;        /* card de UI da Jornada sai 40 px para a esquerda da foto (V1 .jpanel__float) */

  /* F3 — Localização (estrutura V2 §4.8, refeito na paleta V1): malha girada −14°, pin 40 px, pulso 2,4 s até 2,4× */
  --map-angle:-14deg; --pin-size:40px; --pulse-scale:2.4; --dur-pulse:2.4s;
  /* F3 — CTA (DIRECAO §3.3 e §8.2 #14): névoas da V1 (valores que a V1 escrevia soltos no .cta-card__mist--*) e a deriva */
  --mist-cta-glow:radial-gradient(closest-side, rgba(140,228,235,.12) 0%, rgba(140,228,235,0) 70%);
  --mist-cta-deep:radial-gradient(closest-side, rgba(30,58,146,.50) 0%, rgba(30,58,146,0) 70%);
  --cta-drift-x:40px; --cta-drift-y:24px; --dur-cta-drift:14s; --delay-cta-drift:7s;
  --cta-rise:64px;            /* recorte V5-F1 sai 64 px acima do topo do card (estrutura V2 §4.10) */
  --cta-img-inset:.136;       /* faixa transparente no topo de cta-leitor-*: 13,6 % da altura (alfa ≥ 8, linha 204/1500) */

  /* Fatia H — hero "Lente antirreflexo" (docs/PLAN-hero-C.md §2, §5, §7) */
  --overlay-veil-hero-c:radial-gradient(ellipse 46% 58% at 50% 42%, rgba(255,255,255,.92) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,0) 100%);
  --hero-lead-max:620px;      /* lead centrado: máx. ~620 px (PLAN §2) */
  --hero-photo-w:220px;       /* foto da paciente 4:5 (PLAN §2a) */
  --hero-photo-top:128px;     /* fallback sem JS: no desktop o JS alinha o topo da foto ao topo do H1 (REVIEW-hero-r1) */
  --hero-slot-drop:24px;      /* base do card "Próximo horário" = base dos botões + 24 (REVIEW-hero-r1) */
  --hero-obj-gap:40px;        /* folga mínima objeto ↔ texto (REVIEW-hero-r1) */
  --hero-chip-gap:32px;       /* hero ≥ 1200: chip → H1 (REVIEW-hero-r2) */
  --hero-lead-gap:68px;       /* hero ≥ 1200: H1 → lead. A REVIEW-hero-r2 pede 64, mas com 64 a borda inferior da lente fica 2,23 px abaixo da linha de base da 1ª linha do lead (aceite da REVIEW); 68 = menor valor no grid de 4 que cumpre — V5-PEND-30 */
  --hero-obj-gap-t:32px;      /* tablet (810–1199): objeto a menos disto do texto desce para baixo dos botões (REVIEW-hero-r2) */
  --hero-obj-scale-t:.8;      /* tablet: optotipo e horário menores nas bordas (a foto usa --hero-photo-w) — V5-PEND-31 */
  --hero-fan-photo:.46;       /* mobile: foto do leque = 46 % da largura útil (REVIEW-hero-r2) */
  --hero-fan-overlap:16px;    /* mobile: optotipo e horário sobrepõem a foto ~16 px (REVIEW-hero-r2) */
  --hero-fan-rot:4deg;        /* mobile: rotação do leque — optotipo −4°, horário +4° (REVIEW-hero-r2) */
  --hero-opto-min-w:200px;    /* optotipo ≥ 1200: cols 1–2, mas não menos que isto — a linha "E D F C Z P" + nota "20/20" centrada pede ≈ 197 (V5-PEND-28) */
  --lens-d:280px;             /* fallback sem JS: o JS calcula o diâmetro pela caixa de "clareza." (REVIEW-hero-r1) */
  --lens-d-min:120px;         /* diâmetro mínimo da lente */
  --lens-gap:14px;            /* folga de cada lado de "clareza.": D = (largura + 2 × gap) / ((1 + inner) / 2) — espessura do anel contada uma vez (V5-PEND-27 → REVIEW-hero-r2) */
  --lens-inner:.97;           /* raio do recorte / raio externo: costura real ↔ ampliado sob a borda do render V5-H2 (borda ≈ 3,5–4 % do raio, alfa medido). Era .90 com o anel fosco da lente provisória em CSS (REVIEW-hero-r2) */
  --lens-render-disc:.86;     /* V5-H2: diâmetro do disco / lado do quadro (alpha bbox 1026 × 1044 em 1200) */
  --lens-r:calc(var(--lens-d) / 2 * var(--lens-inner));   /* raio do recorte = raio interno do anel (o JS sobrescreve com px) */
  --lens-scale:1.08;          /* ampliação dentro da lente (REVIEW-hero-r1) */
  --lens-shadow:0 1px 2px rgba(23,44,104,.08), 0 24px 48px -18px rgba(23,44,104,.24);   /* sombra fria de contato do render V5-H2 (o asset não traz sombra) */
  /* lente sem mouse (docs/PLAN-hero-mobile.md M1–M3) — substitui o "passa e estaciona" do Replanejamento R1 */
  --lens-edge:8px;            /* M1: folga mínima do vidro até a borda da viewport (o centro entra só o necessário) */
  --lens-sweep-dur:2400ms;    /* M2: duração do caminho de referência da r1 (1ª/última palavra da linha 1 → 1ª da última linha → "clareza."); a varredura de todas as linhas mantém essa velocidade e a duração cresce com o caminho (REVIEW-heromob-r1 #2) */
  --lens-sweep-ramp:.2;       /* M2: fração da duração em aceleração no começo e em desaceleração no fim; no meio, velocidade constante por distância */
  --lens-drag-return:1200ms;  /* M3: espera depois de soltar o dedo antes de voltar a "clareza." */
  --lens-lead-gap:12px;       /* < 1200: folga mínima entre a base do vidro em repouso e o topo do lead; o lead desce o necessário (REVIEW-heromob-r1 #1) */

  /* Fatia B — ajustes do usuário, leva 2 (docs/PLAN-ajustes-0510b.md) */
  --refr-visor:120px;         /* B2: visor do refrator no cartão "Refração" (desktop) */
  --refr-min-w:170px;         /* B2: largura mínima em que a tabela cabe com 8 px entre colunas; vaga menor = zoom (136 / 170 = .8, a escala do tablet) */
  --dur-refr-spin:40s;        /* B2: anel de marcas — 1 volta em 40 s, linear */
  --path-media-ratio:16 / 10; /* B3: imagem fixa das linhas de "Como podemos ajudar" (desktop e tablet) */
  --path-zoom:1.04;           /* B3: zoom da imagem no hover */
  /* B5 — CTA final: volume (brilho atrás do homem + sombra funda no canto inferior esquerdo), grão e ponto de foco do logo
     (REVIEW-ajustes2-r1 #4: brilho 18 → 24 %, sombra 60 → 70 %) */
  --cta-vol-light:radial-gradient(closest-side, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 100%);
  --cta-vol-deep:radial-gradient(closest-side, rgba(30,58,146,.70) 0%, rgba(30,58,146,0) 100%);   /* #1E3A92 = blue/800 */
  --cta-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --cta-grain-opacity:.1;     /* grão: ruído cinza com contraste esticado (×3) para aparecer de perto com overlay a 10 % */
  --cta-focus-dot:rgba(255,255,255,.90);   /* ponto branco ~90 % */
  --cta-focus-ring:rgba(255,255,255,.40);  /* anel na proporção do logo (2× o raio do ponto), ~40 % */
  /* ondas (REVIEW-ajustes2-r1 #3): anel que cresce de r 12 até o maior eco do breakpoint, opacidade .22 → 0, 4 ondas defasadas */
  --cta-wave-opacity:.22; --dur-cta-wave:7s; --delay-cta-wave:1.75s; --cta-wave-r0:12;
  --cta-focus-size:40px;      /* ponto + anel (mesma caixa do pin do mapa) */
}

@media (max-width:1199px){
  :root{
    --cols:8; --gutter:20px; --margin:32px; --section-py:60px; --head-gap:48px;
    --fs-display:56px;   --lh-display:60px;   --ls-display:-.025em;
    --fs-h2:40px;        --lh-h2:44px;        --ls-h2:-.015em;
    --fs-lead:18px;      --lh-lead:28px;      --ls-lead:-.014em;
    --ui-card-w:232px;
    --lens-d:220px; --hero-photo-w:136px;   /* foto menor na borda: cabe a 32 px do lead em 1024 (REVIEW-hero-r2) */
    --refr-visor:104px;                     /* B2: visor no cartão montado a 170 px e reduzido (× .8 ≈ 83 px na tela) */
    --bento-pad:24px; --ui-float-off:16px;
  }
}
@media (max-width:809px){
  :root{
    --cols:4; --gutter:16px; --margin:24px; --section-py:30px; --head-gap:40px;   /* N1 (mobile2 08/10, REVIEW-mobile2-r1 #1): 30 + 30 = 60 entre seções vizinhas (leva 1: 48 → 40; r2: 40 → 60) */
    --radius-xl:24px; --radius-lg:20px;
    --header-h:56px;
    --fs-display:40px;   --lh-display:44px;   --ls-display:-.02em;
    --fs-h2:32px;        --lh-h2:36px;        --ls-h2:-.01em;
    --fs-h3:20px;        --lh-h3:26px;        --ls-h3:-.012em;
    --fs-h4:17px;        --lh-h4:24px;        --ls-h4:-.013em;
    --fs-lead:17px;      --lh-lead:26px;      --ls-lead:-.013em;
    --fs-nav:28px;       --lh-nav:34px;       --ls-nav:-.02em;
    --fs-opto-1:36px; --fs-opto-2:28px; --fs-opto-3:21px; --fs-opto-4:16px; --fs-opto-5:13px; --fs-opto-6:10px;
    --ui-card-w:220px;
    --lens-d:140px; --hero-photo-w:160px;
    --refr-visor:104px;     /* B2: visor no leque (cartão montado a 170 px e reduzido pela vaga de 46 %) */
    --bento-pad:20px; --bento-ui-min:160px; --ui-float-off:12px;
    --pin-size:32px;
  }
}
/* Celulares estreitos: títulos menores para as linhas dos títulos de duas linhas
   ("Diferentes necessidades.", "para entender seu caso.") caberem sem viúva (09/10) */
@media (max-width:389px){ :root{ --fs-h2:28px; --lh-h2:32px } }
@media (max-width:359px){ :root{ --fs-h2:24px; --lh-h2:28px } }