/* ==========================================================================
   Brilha Dentes — Reset + fundamentos tipográficos
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 2 * var(--nav-pad)); /* barra de 104px */
}

@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;
  }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

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

ul, ol { margin: 0; padding: 0; list-style: none; }

/* --- Títulos ------------------------------------------------------------ */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: var(--w-regular);
  color: var(--c-text-strong);
  margin: 0;
}
h4, h5, h6 {
  font-family: var(--f-sans);
  font-weight: var(--w-medium);
  color: var(--c-text-strong);
  margin: 0;
}
p { margin: 0; }

h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); }
h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); }
h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); }

/* --- Estilos de texto do Figma --------------------------------------------
   Use a classe com o nome do estilo, independente da tag semântica
   (ex.: <h2 class="t-h1"> nos títulos de seção).
   ------------------------------------------------------------------------ */
.t-display,
.t-h1,
.t-h2,
.t-h3 {
  font-family: var(--f-display);
  font-weight: var(--w-regular);
}
.t-display { font-size: var(--t-display-size); line-height: var(--t-display-lh); letter-spacing: var(--t-display-ls); }
.t-h1      { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-ls); }
.t-h2      { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: 0; }
.t-h3      { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: 0; }
.t-h4 {
  font-family: var(--f-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
}

/* --- Dourado em gradiente no texto ----------------------------------------
   O dourado nunca é cor chapada: o gradiente é recortado pelas letras.
   .gold-text serve para trechos fora dos títulos (ex.: destaques da missão).
   ------------------------------------------------------------------------ */
.accent,
.gold-text {
  background-image: var(--g-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.accent::selection,
.gold-text::selection {
  color: var(--c-text-strong);
}

/* Estilo "alt" do Figma: palavra em itálico dourado — a assinatura da marca.
   Aparece em: "Brilham", "Procedimentos", "Equipe", "Nós", "Consulta."
   O respiro à direita evita que o recorte do gradiente corte a cauda do itálico. */
.accent {
  padding-right: 0.08em;
  margin-right: -0.08em;
  font-family: var(--f-accent);
  font-style: italic;
  font-weight: var(--w-regular);
}
/* Na mesma linha que a Ovo, as métricas da EB Garamond aumentariam a altura
   da linha (72/76 virava 79,6px): o itálico segue o line-height do estilo. */
:is(h1, h2, h3, .t-display, .t-h1, .t-h2, .t-h3) .accent {
  line-height: 0;
}

/* --- Utilitários de texto ----------------------------------------------- */
.tag {
  font-family: var(--f-sans);
  font-size: var(--t-tag-size);
  line-height: var(--t-tag-lh);
  letter-spacing: var(--t-tag-ls);
  text-transform: uppercase;
  color: var(--c-text-muted);
}
.tag--xs { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.text-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.text-xs { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
.muted  { color: var(--c-text-muted); }

::selection {
  background: var(--c-selection);
  color: var(--c-text-strong);
}

/* --- Layout: grid do Figma (16 / 8 / 4 colunas, ver tokens.css) --------- */
.container {
  --container-margin: var(--grid-margin);
  width: 100%;
  max-width: calc(var(--grid-max) + 2 * var(--container-margin));
  margin-inline: auto;
  padding-inline: var(--container-margin);
}
/* Dentro de elementos já recuados em --inset (card do hero, barra da nav):
   desconta o recuo para o conteúdo seguir alinhado às colunas da página. */
.container--inset {
  --container-margin: calc(var(--grid-margin) - var(--inset));
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.section { position: relative; }

/* --- Acessibilidade ------------------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--grid-margin); top: -100px;
  z-index: 200; padding: 12px 20px;
  background: var(--c-inverse); color: var(--c-on-inverse);
  border-radius: var(--r-pill); font-size: var(--t-body-sm-size);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: 16px; }

/* Única cor dourada sólida do site: outline não aceita gradiente */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Revelação no scroll e demais animações globais: css/animations.css */