/**
 * Tokens do design system da Visie (SPEC-11 §3, repo visie/doctor-woo),
 * portados para CSS puro. Tema escuro único. Cores literais só aqui.
 * Fora do original: o bloco de utilities do Tailwind, .cv-auto e os tokens que só o WebGL,
 * o cursor SVG e o teaser liam.
 */

:root {
  /* ── superfícies (§3.1) ─────────────────────────────────────────────── */
  --surface-base: #000000;
  --surface-raised: rgba(43, 43, 43, 0.12);
  --surface-inverse: rgba(232, 232, 232, 0.9);
  /* fundo translúcido de controle ghost, exige borda (§8.2) */
  --surface-control: rgba(255, 255, 255, 0.08);
  /* ≥3:1 sobre preto (0.40 ⇒ 3.7:1), obrigatória em controles translúcidos */
  --border-subtle: rgba(255, 255, 255, 0.4);

  /* ── texto (§3.1) ───────────────────────────────────────────────────── */
  --text-primary: #ffffff;
  --text-muted: #939393;
  --text-muted-alt: #999999;
  --text-inverse: #000000;

  /* ── liquid glass (§3.4 / §5.1) ─────────────────────────────────────── */
  /* Duas profundidades, como o material da Apple: `regular` é o vidro escuro
     sobre o fundo preto; `prominent` é o vidro claro do CTA principal.
     A borda NUNCA desce de 0.42 de alfa (3.9:1 sobre preto), o rim é o
     brilho especular E o contorno obrigatório dos controles (§8.2). */
  --glass-blur: 14px;
  /* Interior quase preto: o que dá a leitura de vidro é o rim, não o fill. */
  --glass-fill: rgba(255, 255, 255, 0.035);
  --glass-fill-hover: rgba(255, 255, 255, 0.085);
  /* topo 0.88 → base 0.42: luz vindo de cima, com o mínimo de contraste
     preservado em toda a volta do anel */
  /* Arco curto e forte no alto à esquerda, queda rápida para o piso, e um
     rebote na base, a luz bate em cima e volta pelo fundo. */
  --glass-rim: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.52) 14%,
    rgba(255, 255, 255, 0.42) 46%,
    rgba(255, 255, 255, 0.44) 74%,
    rgba(255, 255, 255, 0.8) 100%
  );
  --glass-specular: rgba(255, 255, 255, 0.2);
  /* Sombra curta de propósito: o CLS mede a ÁREA que se desloca, e ink
     overflow de sombra entra nessa conta. Uma sombra de 26px de blur inflava
     a região de impacto do botão em ~90px de altura e encarecia qualquer
     deslocamento da página em volta. 10px de blur lê igual sobre preto. */
  --glass-shadow:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 3px 10px rgba(0, 0, 0, 0.55);
  /* fio de luz logo abaixo da borda superior + rebote na inferior */
  --glass-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);

  --glass-prominent-fill: rgba(240, 240, 240, 0.92);
  --glass-prominent-fill-hover: rgba(255, 255, 255, 0.97);
  --glass-prominent-rim: linear-gradient(
    155deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0.6) 40%,
    rgba(150, 150, 150, 0.45) 100%
  );
  --glass-prominent-specular: rgba(255, 255, 255, 0.85);
  /* Sombra escura para descolar do preto; o bloom branco é um fio, não um
     halo, halo largo em fundo preto lê como desfoque, não como luz. */
  --glass-prominent-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 4px 12px rgba(0, 0, 0, 0.6),
    0 0 6px rgba(255, 255, 255, 0.07);
  --glass-prominent-inner:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -3px 8px rgba(0, 0, 0, 0.14);

  /* ── barra de chrome (§5.11) ────────────────────────────────────────── */
  --chrome-blur: 20px;
  /* Opacidade do preto sob o desfoque. Só vale COM backdrop-filter: sem ele,
     70% deixaria o menu ilegível quando uma bolha clara passa por trás. */
  --chrome-opacity: 70%;
  --chrome-opacity-fallback: 95%;
  /* Fio branco no pé da barra. Alfa baixo de propósito: é para separar a barra
     do que passa por baixo, não para desenhar uma linha, acima de ~0,16 vira
     régua, e numa página que é toda preta a régua chama mais atenção que o
     menu. Não é a borda obrigatória de controle translúcido de §8.2, que
     continua sendo `--border-subtle` nos botões. */
  --chrome-border: rgba(255, 255, 255, 0.12);

  /* ── blob de CSS (§5.10) ────────────────────────────────────────────── */
  /* Paleta do fundo. Trocar estes três troca o clima da dobra inteira. */
  --blob-a: #ea58f8;
  --blob-b: #b28df2;
  --blob-c: #a0f7fc;
  /* A razão borrão/tamanho é o que decide entre "forma" e "véu de cor": o
     original usa 1/25, e ampliar o borrão sem ampliar a forma na mesma
     proporção dissolve a silhueta. */
  --blob-size: 38vmax;
  --blob-blur-ratio: 25;
  --blob-opacity: 0.9;

  /* ── fundo líquido (§5.10) ──────────────────────────────────────────── */
  /* Véu entre o fundo e a copy. O fundo é animado: sem ele, uma mancha clara
     passando sob o H1 derruba o contraste do texto por alguns quadros. */
  --liquid-scrim:
    radial-gradient(72% 64% at 50% 48%, rgba(0, 0, 0, 0.84) 0%, rgba(0, 0, 0, 0.5) 58%, transparent 100%);

  /* ── device mockup (§3.1 / §5.8) ────────────────────────────────────── */
  --device-surround: #3a4245;
  --device-screen: #262c2d;
  --device-bg: #121515;
  --device-shadow:
    0 0 2px rgba(0, 21, 64, 0.14),
    0 2px 4px rgba(0, 21, 64, 0.05),
    13px 37px 48px rgba(0, 0, 0, 0.22);

  /* ── WhatsApp (§5.1) ─────────────────────────────────────────────────── */
  /* O verde da marca aparece no CONTORNO e no texto, não no preenchimento.
     Uma pílula chapada de #25d366 numa página que é toda preta rouba a cena
     de tudo em volta e briga com a escala de cor por score (§3.2), que já usa
     verde para "bom". Sobre o vidro escuro o mesmo verde entrega 10,6:1 de
     contraste e continua sendo reconhecido de longe. */
  --whatsapp-ink: #25d366;
  /* Rim inteiro em verde: aqui ele é ao mesmo tempo o brilho especular e o
     contorno obrigatório de §8.2, e é o contorno que carrega a marca. */
  --whatsapp-rim: linear-gradient(
    155deg,
    rgba(37, 211, 102, 1) 0%,
    rgba(37, 211, 102, 0.6) 46%,
    rgba(37, 211, 102, 0.95) 100%
  );
  /* Interior: o vidro escuro com um véu de verde, forte o bastante para o
     botão não ler como "ghost com borda colorida". */
  --whatsapp-fill: rgba(37, 211, 102, 0.1);
  --whatsapp-fill-hover: rgba(37, 211, 102, 0.2);
  --whatsapp-specular: rgba(37, 211, 102, 0.45);

  /* ── camada modal (§5.12) ───────────────────────────── */
  /* Fundo do ::backdrop do <dialog>. Alto o bastante para o relatório atrás
     virar textura e não competir com o painel, o desfoque sozinho não faz
     isso numa página que é quase toda texto claro sobre preto. */
  --scrim: rgba(0, 0, 0, 0.72);
  --scrim-blur: 8px;

  /* ── score (§3.2), nunca a cor sozinha: sempre número + rótulo ─────── */
  --score-bad: #f87171; /* 0–49, 7.6:1 sobre preto */
  --score-warn: #fbbf24; /* 50–79, 12.6:1 */
  --score-good: #4ade80; /* 80–100, 12.1:1 */

  /* ── raio, espaçamento, grid (§3.3) ─────────────────────────────────── */
  --radius-card: 8px;
  --radius-pill: 9999px;
  --gap-section: 48px;
  --container-content: 1160px;
  --container-pad: 24px;
  /* Altura do header fixo. Medida, não arbitrada: quem manda na altura é a
     CtaPill (py-3 + pill), e o valor é o mesmo no mobile e no desktop. Serve
     para descontar o header de composições centradas na tela, a primeira
     dobra e a segunda dobra encenada (motion.css). */
  --header-h: 73px;

  /* ── tipografia (§4), @font-face da Montserrat logo abaixo ───────────── */
  --font-sans: var(--font-montserrat, 'Montserrat'), 'Montserrat Fallback', system-ui, sans-serif;
  /* Títulos grandes no celular: um valor só, 1.6rem, para display e heading,
     o H1 da primeira dobra e os títulos de seção lêem igual. Acima de 768px
     cada papel volta à sua escala (ver o media query no fim do arquivo).
     A sobrancelha acompanha em 1rem. */
  --text-display: 1.6rem;
  --text-eyebrow: 1rem;
  --text-heading: 1.6rem;
  --text-cta: 24px;
  --text-card-title: 21px;
  --text-question: 18px;
  --text-body: 16px;
  --text-body-sm: 15px;
  --tracking-cta: 0.48px;

  /* Primitiva de máscara, não cor: em -webkit-mask só o alfa é lido, o canal
     de cor é ignorado. Existe como token para o lint de §9 continuar valendo
     sem exceção, e para deixar claro que trocar isto não muda nada visual. */
  --mask-opaque: #000000;

  /* ── foco (§8.3) ────────────────────────────────────────────────────── */
  --focus-ring: 2px solid #ffffff;
}

/* Montserrat variável (latin), local; licença OFL em ../fonts/OFL.txt. */
@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/**
 * SPEC-11 §4, fallback métrico da Montserrat, declarado à mão porque o
 * `adjustFontFallback` do next/font resolve o problema errado aqui.
 *
 * Ele casa a altura-x (size-adjust 110.19%), o que deixa o Arial 6% MAIS LARGO
 * que a Montserrat. Largura é o que decide onde o texto quebra: com esse valor
 * o H1 do hero ocupava 6 linhas antes da fonte chegar e 5 depois. Num hero
 * centrado verticalmente, isso reflowava a página e era a origem do CLS
 * intermitente que o `display: optional` tentou, e não conseguiu, resolver.
 *
 * 104% foi medido, não escolhido: é onde a largura da mesma frase fica a 0,1%
 * da Montserrat (110,19% dava +6,0%). As três overrides verticais são as que o
 * next/font calculou e continuam valendo, a altura da caixa de linha não muda.
 *
 * Ao trocar a fonte, remedir: renderizar a mesma frase nas duas famílias e
 * ajustar size-adjust até a largura bater.
 */
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans'), local('Roboto');
  ascent-override: 87.85%;
  descent-override: 22.78%;
  line-gap-override: 0%;
  size-adjust: 104%;
}

/* ── base ─────────────────────────────────────────────────────────────── */

body {
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* §8.3, anel de foco visível em tudo; nunca outline: none */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--text-primary);
  color: var(--text-inverse);
}

/* Papéis tipográficos (§4). line-height 1.0 só em títulos.
   Em @layer components de propósito: fora de layer, estas regras venceriam
   as utilities do Tailwind (não-layered ganha de layered) e um `text-[18px]`
   ao lado de `type-cta` viraria letra morta. Dentro do layer, o papel é o
   padrão e a utility é o ajuste pontual, que é a intenção de quem escreve. */
@layer components {
  .type-display {
    font-size: var(--text-display);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
  }
  /* Sobrancelha do H1: a pergunta que arma a frase principal. Caixa alta e
     espaçamento maior compensam o corpo menor, para ela ler como parte do
     mesmo título e não como legenda solta. */
  .type-eyebrow {
    font-size: var(--text-eyebrow);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .type-heading {
    font-size: var(--text-heading);
    font-weight: 400;
    line-height: 1.05;
  }
  .type-cta {
    font-size: var(--text-cta);
    font-weight: 500;
    letter-spacing: var(--tracking-cta);
  }
  .type-card-title {
    font-size: var(--text-card-title);
    font-weight: 600;
  }
  .type-question {
    font-size: var(--text-question);
    font-weight: 600;
    line-height: 1.2;
  }
  .type-body {
    font-size: var(--text-body);
    font-weight: 500;
    line-height: 1.5;
  }
  .type-body-sm {
    font-size: var(--text-body-sm);
    font-weight: 400;
    line-height: 1.45;
  }
}

@media (min-width: 768px) {
  :root {
    --header-h: 69px;
    --text-display: 64px;
    --text-eyebrow: 26px;
    --text-heading: 56px;
    --gap-section: 96px;
  }
}