/* ==========================================================================
   BASE + COMPONENTES
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;      /* âncoras e "voltar ao topo" deslizam */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--rg-font);
  font-size: var(--rg-fs-body);
  line-height: var(--rg-lh-body);
  letter-spacing: var(--rg-ls-body);
  color: var(--rg-text);
  background: var(--rg-white);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Container do frame: o layout foi desenhado em 1440px.
   Acima disso o conteudo trava e centraliza; abaixo, escala por vw. */
.rg-frame { width: 100%; max-width: var(--rg-canvas); margin-inline: auto; position: relative; }

/* Deslocamento horizontal identico ao Figma, com teto em vw para telas menores.
   Cada secao define --pad-l / --pad-r. */
.rg-inset {
  padding-left:  min(var(--pad-l, var(--rg-gutter)), 7.4vw);
  padding-right: min(var(--pad-r, var(--rg-gutter)), 7.4vw);
}

.rg-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;
}

/* --- Tipografia ---------------------------------------------------------- */
.rg-h1 {
  margin: 0;
  font-size: var(--rg-fs-h1); font-weight: 600; line-height: var(--rg-lh-tight);
  letter-spacing: 0; color: var(--rg-white);
}
.rg-h2 {
  margin: 0;
  font-size: var(--rg-fs-h2); font-weight: 600; line-height: var(--rg-lh-tight);
  letter-spacing: 0; color: var(--rg-heading);
}
.rg-h2--tight { letter-spacing: var(--rg-ls-tight); } /* Figma aplica -5% em alguns titulos */
.rg-h3 {
  margin: 0;
  font-size: var(--rg-fs-h3); font-weight: 500; line-height: var(--rg-lh-h3);
  letter-spacing: 0; color: var(--rg-heading);
}
.rg-h4 {
  margin: 0;
  font-size: var(--rg-fs-h4); font-weight: 400; line-height: var(--rg-lh-tight);
  color: var(--rg-white);
}
.rg-h5 {
  margin: 0;
  font-size: var(--rg-fs-h5); font-weight: 500; line-height: var(--rg-lh-h3);
  color: var(--rg-heading);
}
.rg-lead {
  margin: 0;
  font-size: var(--rg-fs-lead); font-style: italic; font-weight: 400;
  line-height: var(--rg-lh-lead); letter-spacing: var(--rg-ls-body);
  color: var(--rg-green);
}
.rg-lead--sm { font-size: var(--rg-fs-lead-sm); line-height: var(--rg-lh-body); }
.rg-body { margin: 0; }
.rg-body p { margin: 0 0 27px; }
.rg-body p:last-child { margin-bottom: 0; }
.rg-center { text-align: center; }

/* --- Botao --------------------------------------------------------------- */
.rg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--rg-btn-h);
  padding: 0 var(--rg-btn-px);
  border: 0; border-radius: var(--rg-btn-radius);
  font-size: var(--rg-fs-sm); font-weight: 500; letter-spacing: var(--rg-ls-body);
  line-height: 1; text-align: center; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.rg-btn--bronze { background: var(--rg-bronze); color: var(--rg-white); }
.rg-btn--bronze:hover { background: #a2764b; }
.rg-btn--dark   { background: var(--rg-teal);  color: var(--rg-white); }
.rg-btn--dark:hover { background: #122c2e; }
.rg-btn:active { transform: translateY(1px); }
.rg-btn:focus-visible { outline: 2px solid var(--rg-bronze); outline-offset: 3px; }

/* --- Faixa de imagem full-bleed ------------------------------------------ */
.rg-faixa { width: 100%; height: var(--rg-h-faixa); overflow: hidden; }
.rg-faixa img { width: 100%; height: 100%; object-fit: cover; }