/* ==========================================================================
   Dra. Isabela Bonna — Design tokens
   Identidade: MANUALIB.pdf  ·  Montserrat + Bw Vivant  ·  #1d1d1b / #ffffff
   Bw Vivant é uma fonte comercial (Blackwhite Foundry) e não está disponível
   via CDN. Newsreader (Production Type, Google Fonts) é a fonte de títulos:
   serifa editorial com tamanho óptico, usada em Light nos títulos grandes.
   Para trocar pela original, ver README.md.
   ========================================================================== */

:root {
  /* ---- Cor ------------------------------------------------------------ */
  --ink:          #1d1d1b;   /* marca */
  --paper:        #ffffff;   /* marca */
  --bone:         #f5f2ed;   /* canvas alternado, tirado das imagens */
  --greige:       #e9e4dc;
  --taupe:        #a2988c;   /* só decoração: fios, pontos, texto sobre --ink */
  --label:        #766b5f;   /* rótulos em texto: 5.2:1 no papel, 4.7:1 no bone */
  --numeral:      #958a7d;   /* numerais grandes: 3.4:1 no papel, 3:1 no bone */
  --muted:        #6c665f;
  --line:         rgba(29, 29, 27, 0.12);
  --line-soft:    rgba(29, 29, 27, 0.07);
  --ink-80:       rgba(29, 29, 27, 0.80);
  --ink-55:       rgba(29, 29, 27, 0.55);
  --paper-70:     rgba(255, 255, 255, 0.70);

  /* Canais RGB para véus e transparências derivados das cores de marca */
  --bone-rgb:     245 242 237;
  --ink-rgb:      29 29 27;

  /* Texto e fios sobre a faixa --ink */
  --on-ink:        rgb(var(--bone-rgb) / 0.74);   /* texto secundário: 11:1 */
  --on-ink-strong: rgb(var(--bone-rgb) / 0.82);   /* lead */
  --on-ink-line:   rgb(var(--bone-rgb) / 0.32);   /* fios e contorno de botão */

  --header-glass: rgb(255 255 255 / 0.86);
  --shadow-float: 0 6px 28px rgb(var(--ink-rgb) / 0.16);

  /* ---- Tipografia ----------------------------------------------------- */
  --font-display: "Newsreader", "Bw Vivant", Georgia, "Times New Roman", serif;
  --fw-display:      300;   /* títulos grandes: h1, h2, menu, numerais */
  --fw-display-text: 400;   /* títulos pequenos e itálicos: cards, FAQ, citações, logotipo */
  --font-sans:    "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Escala fluida — min em 360px, max em 1440px */
  --fs-micro:   0.75rem;                                 /* 12px  eyebrow, rótulos */
  --fs-xs:      clamp(0.8125rem, 0.79rem + 0.1vw,  0.875rem);   /* 13–14  meta, botões */
  --fs-sm:      clamp(0.9375rem, 0.92rem + 0.1vw,  1rem);       /* 15–16  texto secundário */
  --fs-base:    clamp(1rem,      0.96rem + 0.2vw,  1.125rem);   /* 16–18  corpo */
  --fs-lg:      clamp(1.125rem,  1.06rem + 0.3vw,  1.3125rem);
  --fs-xl:      clamp(1.25rem,  1.1rem   + 0.7vw,  1.625rem);
  --fs-h3:      clamp(1.375rem, 1.2rem   + 0.9vw,  2rem);
  --fs-h2:      clamp(1.75rem,  1.35rem  + 1.9vw,  3.125rem);
  --fs-h1:      clamp(2.125rem, 1.5rem   + 3.0vw,  4.5rem);
  --fs-hero:    clamp(2.375rem, 1.5rem   + 4.0vw,  5.5rem);
  --fs-numeral: clamp(2.5rem,  1.8rem   + 3.2vw,  5rem);

  --lh-tight:   1.08;
  --lh-snug:    1.18;
  --lh-body:    1.72;
  --lh-loose:   1.85;

  --ls-display: -0.02em;
  --ls-eyebrow:  0.16em;
  --ls-btn:      0.1em;

  /* ---- Espaço --------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.75rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  --section-y:   clamp(3.5rem, 7vw, 6.5rem);
  --section-y-s: clamp(2.75rem, 5vw, 4.5rem);
  --gutter:      clamp(1.25rem, 5vw, 4rem);
  /* Margem lateral que respeita o notch no celular deitado (viewport-fit=cover) */
  --pad-l:       max(var(--gutter), env(safe-area-inset-left));
  --pad-r:       max(var(--gutter), env(safe-area-inset-right));

  --maxw:        78rem;   /* 1248px — grade principal */
  --maxw-text:   42rem;   /* medida de leitura confortável */
  --maxw-narrow: 34rem;

  /* ---- Traço e forma --------------------------------------------------- */
  --radius:    2px;
  --radius-md: 4px;
  --hairline:  1px solid var(--line);

  /* ---- Movimento ------------------------------------------------------- */
  /* Curvas de referência, não aproximações. --ease é apelido de --ease-out
     para que as regras antigas herdem a curva certa sem sistema paralelo. */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease:       var(--ease-out);

  --dur-press:  160ms;   /* feedback de toque */
  --dur-fast:   180ms;
  --dur:        260ms;   /* hover, estado */
  --dur-panel:  240ms;   /* acordeão — custa layout, tem que ser curto */
  --dur-slow:   700ms;   /* revelação editorial, superfície de marketing */
  --dur-settle: 1200ms;  /* acomodação lenta da imagem do hero */

  --header-h: 76px;
}

@media (max-width: 720px) {
  :root { --header-h: 64px; }
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

* { margin: 0; padding: 0; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: 0.002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;   /* URL ou palavra longa nunca estoura a coluna */
  overflow-x: hidden;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ==========================================================================
   Transição entre páginas
   Evita o flash branco da navegação multi-página. É só opacidade, então
   continua valendo com prefers-reduced-motion — apenas mais curta.
   Navegadores sem suporte simplesmente navegam como antes.
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 260ms;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Respeita quem pediu menos movimento.
   Menos e mais suave, não zero: o que incomoda é deslocamento, não opacidade.
   Então as durações encurtam aqui e os transforms caem em main.css — mas
   fades, cor e o cross-fade entre páginas continuam. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :root {
    --dur-press:  1ms;
    --dur-fast:   120ms;
    --dur:        120ms;
    --dur-panel:  140ms;
    --dur-slow:   220ms;
    --dur-settle: 1ms;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 120ms; }
}