/* ==========================================================================
   global.css — base tipográfica, layout de página, superfícies do navegador
   e utilitários de acessibilidade
   ========================================================================== */

html {
  scroll-behavior: smooth;
  /* Impede que o header fixo cubra o título ao navegar por âncora */
  scroll-padding-top: calc(var(--header-height) + 16px);
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-ink);
  background: var(--color-background);
}

/* --------------------------------------------------------------------------
   Superfícies do navegador

   Seleção, cursor, barra de rolagem e algarismos chegam com o padrão do
   navegador, que não pertence a nenhum sistema de design. Aqui elas passam
   a pertencer ao da marca.
   -------------------------------------------------------------------------- */

::selection {
  background: var(--color-selection-bg);
  color: var(--color-selection-ink);   /* 13.67:1 */
}

body {
  caret-color: var(--color-caret);
  /* Firefox */
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
  scrollbar-width: thin;
}

/* WebKit / Blink */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border: 3px solid var(--color-scrollbar-track);
  border-radius: var(--border-radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

/* Números que mudam ou se comparam usam largura fixa: contadores animados,
   KPIs de dashboard e a coluna de valores do extrato. Sem isto, cada dígito
   troca a largura da linha a cada frame. */
.metric-card__number,
.kpi strong,
.kpi em,
.mockup__metric b,
.ledger-row span,
.tree-row strong,
.tele-highlight strong {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1 {
  font-size: clamp(44px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -3px;
  margin: 18px 0 24px;
  max-width: 800px;
  text-wrap: balance;
}

h2 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -1.8px;
  margin: 12px 0 16px;
  text-wrap: balance;
}

h3 {
  font-size: 19px;
  line-height: 1.2;
  margin: 0 0 9px;
}

/* Ênfase por matiz no fim da manchete. Os dois tons já são tintas de texto
   acessíveis (6.17:1 e 4.98:1), então o recorte não custa legibilidade —
   e no fallback sem background-clip a cor sólida herdada continua passando. */
.text-gradient {
  color: var(--color-action-ink);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .text-gradient {
    color: transparent;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--container-width), 100% - var(--container-gutter));
  margin-inline: auto;
}

.section {
  padding: var(--section-space) 0;
}

.section--soft {
  background: var(--color-background-soft);
}

.section-head {
  max-width: 760px;
  margin-bottom: 42px;
}

.section-head p {
  font-size: 18px;
  color: var(--color-text);
}

.section-head--center {
  text-align: center;
  margin-inline: auto;
}

.section-head--sub h3 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -1.2px;
  margin: 12px 0 16px;
}

/* Espaçamento do bloco secundário dentro de uma seção longa (ex.: Telemedicina) */
.section-head--spaced {
  margin-top: 58px;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  z-index: var(--z-skip-link);
  transform: translate(-50%, -200%);
  background: var(--color-ink);
  color: var(--color-on-brand);
  padding: 12px 18px;
  border-radius: var(--border-radius-sm);
  font-weight: 800;
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* Utilitário: conteúdo só para leitores de tela. Mantido à disposição de
   quem for editar o HTML (rótulos de contexto, textos de apoio). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Foco visível: anel duplo — tinta da marca por fora, halo branco por dentro.
   O halo garante que o anel continue visível quando o elemento em foco está
   sobre um fundo escuro (CTA final, cards de produto, rodapé de suporte). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
video:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: var(--border-radius-xs);
  box-shadow: 0 0 0 3px var(--color-on-brand);
}

/* Sobre superfícies de marca o anel inverte: folga branca colada ao controle,
   traço escuro por fora. Assim ele aparece tanto sobre o botão claro quanto
   sobre o gradiente. */
.product a:focus-visible,
.cta__box a:focus-visible,
.support a:focus-visible {
  outline-color: var(--color-ink);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--color-on-brand);
}

/* --------------------------------------------------------------------------
   Preferência por movimento reduzido

   O que some: o marquee e a contagem — movimento contínuo e autônomo, que é
   o que dispara sintoma vestibular.
   O que fica: transições curtas de cor e opacidade. Elas são feedback, não
   movimento; matá-las tira a resposta ao toque sem beneficiar ninguém.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  /* Deslocamentos e escalas param; cor e opacidade continuam respondendo. */
  *,
  *::before,
  *::after {
    transition-property: color, background-color, border-color, outline-color,
      box-shadow, opacity, fill, stroke !important;
    transition-duration: 120ms !important;
  }

  .btn:hover,
  .partner-card:hover img {
    transform: none !important;
  }
}

/* --------------------------------------------------------------------------
   Resiliência a texto real

   Testado com palavras compostas longas (alemão), números de 7 dígitos e
   emoji. Sem estas regras, um título com uma palavra de 40 caracteres estoura
   o container em 375px e o conteúdo é cortado — cenário concreto assim que o
   site for traduzido ou um número comercial crescer.
   -------------------------------------------------------------------------- */

h1, h2, h3, h4,
p, li, blockquote, summary,
figcaption, .eyebrow, .tag,
.tele-badge, .brand-chip, .pill,
.resource-panel__kicker, .plan__price {
  overflow-wrap: break-word;
  word-break: normal;
}

/* Hifenização só nos blocos longos de leitura: em título ela cortaria a
   manchete no meio de uma palavra sem necessidade. */
p, li, blockquote {
  hyphens: auto;
}

/* Chips e badges têm largura livre; o texto envolve em vez de vazar. */
.eyebrow,
.tag,
.tele-badge,
.pill,
.resource-panel__kicker {
  max-width: 100%;
}