/* ===================================================================
   Clínica Biopraxis — Design Tokens
   Fonte: guia-ui-webdesign-clinica-biopraxis.md
   Valores [oficial] extraídos do CSS de produção de clinicabiopraxis.com.br
   =================================================================== */

:root {
  /* --- Cores da marca [oficial] --- */
  --bio-primary:          #496C77;  /* azul-petróleo — títulos, links, nav */
  --bio-primary-hover:    #3A5761;  /* 7,73:1 em branco */
  --bio-primary-deep:     #316D79;  /* subtítulos caixa alta */
  --bio-ink:              #23383F;  /* [recomendação] superfície escura — 11,4:1 com branco */

  --bio-text:             #39525B;  /* --Texto do site — 8,29:1 */
  --bio-text-secondary:   #6A6E76;  /* 5,12:1 */
  --bio-text-tertiary:    #82868A;  /* 3,67:1 — só 18px+ */

  --bio-green:            #94CA56;  /* início do gradiente */
  --bio-cyan:             #57C5CD;  /* fim do gradiente */
  --bio-olive:            #A7C959;  /* menu ativo, tags */

  /* Derivados acessíveis — usar SEMPRE que a cor virar texto.
     Os verdes/cianos da marca reprovam em WCAG AA sobre branco. */
  --bio-green-text:       #557C27;  /* 4,89:1 */
  --bio-teal-text:        #25787E;  /* 5,16:1 */

  /* --- Gradiente da marca [oficial] --- */
  --bio-gradient:         linear-gradient(90deg, #94CA56 0%, #57C5CD 100%);
  --bio-gradient-logo:    linear-gradient(90deg, #A7C959 0%, #81C4CE 100%);
  /* Overlay obrigatório quando houver texto branco sobre o gradiente claro */
  --bio-gradient-overlay: rgba(57, 82, 91, 0.45);

  /* Gradiente profundo [recomendação] — mesma gestualidade da marca, mas
     construído sobre os derivados acessíveis. Texto branco por cima fica
     em 4,89:1 no pior ponto (o stop verde), então PASSA em WCAG AA.
     É este que carrega os CTAs sólidos, nunca o gradiente claro. */
  --bio-gradient-deep:    linear-gradient(100deg, #557C27 0%, #25787E 100%);
  --bio-gradient-deep-hv: linear-gradient(100deg, #4A6D22 0%, #1F686D 100%);

  /* --- Sub-marcas por programa [oficial] --- */
  --bio-programa-senior:  #DE8139;  /* fundo/borda apenas — 2,87:1 */
  --bio-programa-mulher:  #C46C7A;  /* texto só 18px+ — 3,64:1 */

  /* --- Neutras [oficial] --- */
  --bio-bg:               #FFFFFF;
  --bio-bg-alt:           #F1F3F4;
  --bio-bg-tint:          #F7FAFA;  /* [recomendação] lavagem fria mais leve que a alt */
  --bio-surface:          #FFFFFF;
  --bio-border:           #D0D5DD;
  --bio-divider:          #ECECEC;
  --bio-disabled:         #929496;

  /* --- Funcionais [recomendação — todas ≥4,5:1 em branco] --- */
  --bio-success:          #557C27;
  --bio-warning:          #AF5D1D;
  --bio-error:            #C0392B;
  --bio-info:             #496C77;

  /* --- Tipografia [oficial] ---
     Branding tem APENAS o peso 600. Nunca usar 400/700 em títulos:
     o navegador sintetiza e deforma a fonte.
     Sem licença web da Branding, o fallback é Poppins SemiBold. */
  --font-heading:  "Branding", "Poppins", system-ui, -apple-system, sans-serif;
  --font-body:     "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-heading:    600;
  --fw-body:       500;   /* peso padrão do corpo no site */
  --fw-bold:       700;

  --fs-display:    clamp(38px, 5.4vw, 64px);
  --fs-h1:         clamp(34px, 5vw, 58px);
  --fs-h2:         clamp(28px, 3.5vw, 40px);
  --fs-h3:         clamp(20px, 2vw, 24px);
  --fs-subtitle:   clamp(18px, 1.6vw, 20px);
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-small:      14px;
  --fs-micro:      12px;

  --lh-h1:         1.2;
  --lh-h2:         1.25;
  --lh-body:       1.6;
  --ls-h1:         -0.025em;   /* -1.45px em 58px [oficial] */
  --ls-eyebrow:    0.16em;

  /* --- Espaçamento (base 8px) --- */
  --sp-xs:         4px;
  --sp-sm:         8px;
  --sp-md:         16px;
  --sp-lg:         24px;
  --sp-xl:         32px;
  --sp-2xl:        48px;
  --sp-3xl:        72px;
  --sp-section:    100px;   /* [oficial] */
  --sp-section-mb: 56px;

  /* --- Raios [oficial] --- */
  --radius-sm:     8px;
  --radius-md:     10px;
  --radius-lg:     20px;    /* padrão de card */
  --radius-xl:     28px;
  --radius-2xl:    36px;
  --radius-pill:   999px;   /* botões */

  /* --- Layout --- */
  --container:     1200px;
  --container-max: 1320px;
  --container-narrow: 820px;
  --gutter:        20px;
  --header-h:      76px;

  /* --- Sombras --- */
  --shadow-soft:   0 1px 4px rgba(57, 82, 91, 0.08);
  --shadow-medium: 0 4px 16px rgba(57, 82, 91, 0.12);
  --shadow-lift:   0 18px 44px -12px rgba(35, 56, 63, 0.20);
  --shadow-deep:   0 32px 72px -20px rgba(35, 56, 63, 0.32);

  /* --- Movimento ---
     Curvas de saída longa: a aceleração morre devagar, então nada
     "para" de repente. É o que dá a sensação de suavidade pedida. */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast:      180ms;
  --dur-base:      320ms;
  --dur-slow:      620ms;
  --dur-reveal:    900ms;

  --transition:    var(--dur-base) var(--ease-out-soft);
  --tap-target:    44px;
}

/* ===================================================================
   Base
   =================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--bio-text);
  background: var(--bio-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  color: var(--bio-primary);
  margin: 0 0 var(--sp-md);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-md); text-wrap: pretty; }

a { color: var(--bio-primary); }

img { max-width: 100%; height: auto; display: block; }

/* Foco visível — requisito de acessibilidade, nunca remover */
:focus-visible {
  outline: 2px solid var(--bio-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   Botão — assinatura da marca [oficial]
   Pílula com seta à direita. O outline preenche com gradiente no hover;
   a variante sólida já nasce preenchida, no gradiente PROFUNDO.
   =================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  min-height: var(--tap-target);
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--bio-green);
  background: transparent;
  color: var(--bio-primary);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    color var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-slow) var(--ease-out-expo);
}

/* Camada de preenchimento: cresce de baixo, não "pisca" */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bio-gradient-deep);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }

.btn:hover,
.btn:focus-visible {
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn:active { transform: translateY(0) scale(0.985); }

/* A seta é parte da assinatura do botão da marca */
.btn__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform var(--dur-slow) var(--ease-out-expo);
}

.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

/* Variante sólida — CTA principal de tráfego pago.
   Usa o gradiente profundo: branco por cima passa em AA. */
.btn--solid {
  background: var(--bio-gradient-deep);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 28px -10px rgba(37, 120, 126, 0.55);
}

.btn--solid::before { background: var(--bio-gradient-deep-hv); }

.btn--solid:hover,
.btn--solid:focus-visible {
  color: #fff;
  box-shadow: 0 20px 44px -12px rgba(37, 120, 126, 0.6);
}

.btn--on-dark {
  background: #fff;
  color: var(--bio-ink);
  border-color: transparent;
}

.btn--on-dark::before { background: #fff; }

.btn--on-dark:hover,
.btn--on-dark:focus-visible { color: var(--bio-ink); }

.btn--lg { padding: 17px 34px; font-size: var(--fs-body-lg); }

.btn--block { display: flex; width: 100%; }

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--bio-bg-alt);
  color: var(--bio-disabled);
  border-color: var(--bio-border);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ===================================================================
   Card [oficial] — radius 20px
   =================================================================== */

.card {
  background: var(--bio-surface);
  border-radius: var(--radius-lg);
  padding: var(--sp-lg);
  box-shadow: var(--shadow-soft);
}

/* ===================================================================
   Faixa com gradiente CLARO
   Texto branco sobre ele reprova em WCAG AA (1,94–2,04:1).
   O overlay abaixo é obrigatório sempre que houver texto por cima.
   =================================================================== */

.gradient-band {
  position: relative;
  background: var(--bio-gradient);
  color: #fff;
}

.gradient-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bio-gradient-overlay);
  pointer-events: none;
}

.gradient-band > * { position: relative; }

/* ===================================================================
   Responsivo
   =================================================================== */

@media (max-width: 768px) {
  :root {
    --sp-section: var(--sp-section-mb);
    --gutter: 20px;
    --header-h: 64px;
  }

  /* Não reduzir o corpo abaixo de 15px — o público inclui idosos */
  body { font-size: 16px; }
}

/* ===================================================================
   Preferência por menos movimento — desliga tudo que anima,
   mas mantém os elementos VISÍVEIS (o reveal usa opacity 0 por padrão).
   =================================================================== */

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

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