/* Rute Gabrielle — globais, componentes do design system e layout da página. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
  line-height: var(--leading-heading);
}

a { color: var(--text-accent); }

img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

/* ---------- utilitários de marca ---------- */

.rg-brand-name {
  font-family: var(--font-script);
  font-weight: var(--weight-regular);
  color: var(--text-accent);
}

.rg-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0;
}

.rg-blob {
  position: absolute;
  border-radius: var(--radius-full);
  background: var(--accent-gold);
  opacity: 0.08;
  pointer-events: none;
}

/* ---------- componentes do design system ---------- */

/* Button */
.rg-button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--weight-medium);
  border-radius: var(--radius-sm);
  padding: 16px 36px;
  border: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.rg-button:hover { opacity: 0.85; }
.rg-button:disabled { opacity: 0.5; cursor: not-allowed; }

.rg-button--primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
}
.rg-button--secondary {
  background: transparent;
  color: var(--accent-primary);
  border: 1.5px solid var(--accent-primary);
  padding: 14.5px 34.5px;
}
.rg-button--link {
  background: transparent;
  color: var(--text-accent);
  padding: 8px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--text-accent);
}

/* Card */
.rg-card {
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.rg-card--inverse {
  background: var(--bg-inverse);
  box-shadow: none;
}
.rg-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--text-primary);
  margin: 0 0 var(--space-1);
}
.rg-card--inverse .rg-card__title { color: var(--text-accent-inverse); }
.rg-card__body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
.rg-card--inverse .rg-card__body { color: var(--text-inverse); }

/* Divider */
.rg-divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.rg-divider::before,
.rg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--accent-gold);
}
.rg-divider__heart {
  color: var(--accent-gold);
  font-size: 16px;
  line-height: 1;
}

/* Tag */
.rg-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--weight-medium);
  color: var(--accent-primary);
  background: var(--bg-secondary);
  padding: 8px 18px;
  border-radius: var(--radius-full);
}

/* Logo */
.rg-logo { display: flex; align-items: center; gap: 11px; }
.rg-logo__mark { width: 48px; height: 48px; object-fit: contain; display: block; }
.rg-logo__text { display: flex; flex-direction: column; gap: 4px; }
.rg-logo__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.rg-logo__wordmark {
  font-family: var(--font-script);
  font-size: 20px;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}
.rg-logo--monogram .rg-logo__mark { width: 90px; height: 90px; }

/* ---------- layout ---------- */

.rg-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
}
.rg-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}
.rg-nav a {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  text-decoration: none;
}
.rg-nav a:hover { color: var(--text-accent); }
.rg-nav .rg-button { font-size: var(--text-body-sm); padding: 12px 22px; }
.rg-nav .rg-button--primary,
.rg-nav .rg-button--primary:hover { color: var(--text-inverse); }

.rg-section {
  padding: var(--space-5) var(--space-4);
  max-width: 1120px;
  margin: 0 auto;
}
.rg-section--band {
  max-width: none;
  background: var(--bg-secondary);
}
.rg-section--band > .rg-inner { max-width: 1120px; margin: 0 auto; }

.rg-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-4);
  align-items: center;
}
.rg-split--top { align-items: start; }

.rg-hero { position: relative; }
.rg-hero .rg-blob { width: 420px; height: 420px; top: -80px; right: -120px; }
.rg-hero__eyebrow { font-size: 48px; margin: 0; }
.rg-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-h1-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  margin: var(--space-3) 0 var(--space-2);
}
.rg-hero__lead {
  font-size: var(--text-body-lg);
  color: var(--text-muted);
  line-height: var(--leading-body);
  max-width: 520px;
  margin: 0 0 var(--space-3);
}
.rg-hero__portrait {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lifted);
  aspect-ratio: 4 / 5;
}
.rg-hero__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rg-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.rg-actions--center { justify-content: center; }

.rg-heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  margin: var(--space-1) 0 var(--space-3);
  max-width: 680px;
}
.rg-prose {
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-muted);
  line-height: var(--leading-body-loose);
  max-width: 680px;
}
.rg-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.rg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-3);
}
.rg-grid--tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rg-grid--gallery {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}

.rg-figure {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 0;
}
.rg-figure--portrait { aspect-ratio: 3 / 4; }
.rg-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }

.rg-quote {
  max-width: 900px;
  text-align: center;
}
.rg-quote__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  color: var(--text-inverse);
  margin: 0;
}
.rg-quote__sub {
  font-size: var(--text-body);
  color: var(--text-inverse);
  opacity: 0.85;
  margin: var(--space-2) 0 0;
}

.rg-contact {
  max-width: none;
  background: var(--bg-inverse);
  text-align: center;
}
.rg-contact > .rg-inner { max-width: 640px; margin: 0 auto; }
.rg-contact .rg-logo { justify-content: center; }
.rg-contact h2 {
  font-size: var(--text-h2);
  color: var(--text-inverse);
}
.rg-contact__meta {
  font-size: var(--text-body-sm);
  color: var(--text-inverse);
  opacity: 0.7;
  margin: 0 0 var(--space-2);
}
.rg-contact__lead {
  font-size: var(--text-body);
  color: var(--text-inverse);
  opacity: 0.85;
  margin: 0 0 var(--space-3);
}
.rg-contact__instagram {
  font-size: var(--text-body-sm);
  color: var(--text-accent-inverse);
  align-self: center;
}

.rg-credit {
  font-size: var(--text-body-sm);
  color: var(--text-accent);
  letter-spacing: var(--tracking-wide);
  margin: var(--space-3) 0 0;
}

.rg-footer {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  color: var(--text-faint);
}

/* Como funciona: lista ordenada com aparência de cards. */
.rg-steps { list-style: none; margin: 0; padding: 0; }

.rg-prose a { color: var(--text-accent); }
.rg-section--band .rg-tag { background: var(--bg-page); }

/* Sobre */
.rg-split--about { grid-template-columns: 0.8fr 1.2fr; }
.rg-about__photo { aspect-ratio: 2 / 3; max-width: 420px; }

/* FAQ */
.rg-faq {
  margin-top: var(--space-3);
  max-width: 820px;
  border-top: 1px solid var(--border-subtle);
}
.rg-faq__item { border-bottom: 1px solid var(--border-subtle); }
.rg-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
}
.rg-faq__item summary::-webkit-details-marker { display: none; }
.rg-faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--accent-gold);
  transition: transform 0.2s ease;
}
.rg-faq__item[open] summary::after { transform: rotate(45deg); }
.rg-faq__q {
  font-size: 19px;
  margin: 0;
}
.rg-faq__item summary:hover .rg-faq__q { color: var(--text-accent); }
.rg-faq__a {
  margin: 0 0 20px;
  max-width: 680px;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-muted);
}

.rg-note {
  margin: var(--space-3) 0 0;
  max-width: 820px;
  padding: var(--space-2) 20px;
  font-size: var(--text-body-sm);
  color: var(--text-primary);
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent-gold);
  border-radius: var(--radius-sm);
}

.rg-credit--source {
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

address.rg-contact__meta { font-style: normal; line-height: 1.8; }
.rg-contact__meta a { color: var(--text-accent-inverse); }

/* ---------- responsivo ---------- */

/* O blob decorativo não pode alargar a página no mobile. */
.rg-hero { overflow: clip; }

/* Âncoras não ficam escondidas atrás do header fixo. */
section[id] { scroll-margin-top: 96px; }

/* Botão de menu: só aparece no mobile, com JS ativo. */
.rg-menu-toggle {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.rg-menu-toggle__bars,
.rg-menu-toggle__bars::before,
.rg-menu-toggle__bars::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-primary);
  transition: transform 0.2s ease, background 0.2s ease;
}
.rg-menu-toggle__bars { position: relative; }
.rg-menu-toggle__bars::before,
.rg-menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.rg-menu-toggle__bars::before { top: -5px; }
.rg-menu-toggle__bars::after { top: 5px; }
.is-open .rg-menu-toggle__bars { background: transparent; }
.is-open .rg-menu-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.is-open .rg-menu-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 900px) {
  :root {
    --space-4: 48px;
    --space-5: 72px;
  }
  .rg-section { padding: var(--space-5) var(--space-3); }
  .rg-split { grid-template-columns: 1fr; gap: var(--space-3); }
  .rg-hero { padding-top: var(--space-4); }
  .rg-hero__title { font-size: var(--text-h1); }
  .rg-hero__lead { font-size: 20px; }
  .rg-hero .rg-blob { width: 280px; height: 280px; top: -60px; right: -110px; }
  .rg-hero__portrait { max-width: 480px; }
  .rg-split--top .rg-figure { max-width: 480px; }
  .rg-split--about { grid-template-columns: 1fr; }
  .rg-about__photo { max-width: 360px; }

  /* Header vira barra compacta + menu recolhível. */
  .rg-header { padding: 12px var(--space-3); }
  .rg-header--js .rg-menu-toggle { display: inline-flex; }
  .rg-header--js .rg-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-1) var(--space-3) var(--space-3);
    background: var(--bg-page);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    white-space: normal;
  }
  .rg-header--js.is-open .rg-nav { display: flex; }
  .rg-header--js .rg-nav a:not(.rg-button) {
    padding: 14px 0;
    font-size: var(--text-body);
    border-bottom: 1px solid var(--border-subtle);
  }
  .rg-header--js .rg-nav .rg-button { margin-top: var(--space-2); padding: 16px 24px; font-size: var(--text-body); }

  /* Sem JS: navegação quebra em linhas, sempre visível. */
  .rg-header:not(.rg-header--js) { flex-wrap: wrap; }
  .rg-header:not(.rg-header--js) .rg-nav { flex-wrap: wrap; white-space: normal; gap: var(--space-1) var(--space-2); }
}

@media (max-width: 520px) {
  :root {
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 56px;
  }
  .rg-section { padding: var(--space-5) var(--space-2); }
  .rg-header { padding: 10px var(--space-2); }
  .rg-header--js .rg-nav { padding: var(--space-1) var(--space-2) var(--space-3); }
  section[id] { scroll-margin-top: 80px; }

  .rg-logo__mark { width: 40px; height: 40px; }
  .rg-logo__eyebrow { font-size: 9px; letter-spacing: 0.3em; }
  .rg-logo__wordmark { font-size: 18px; }
  .rg-logo--monogram .rg-logo__mark { width: 72px; height: 72px; }

  .rg-hero__eyebrow { font-size: 36px; line-height: 1.2; }
  .rg-hero__title { font-size: 34px; margin-top: var(--space-2); }
  .rg-hero__lead { font-size: 17px; }
  .rg-hero .rg-blob { width: 220px; height: 220px; top: -40px; right: -100px; }
  .rg-actions .rg-button { width: 100%; }

  .rg-heading, .rg-quote__title, .rg-contact h2 { font-size: 26px; }
  .rg-prose { font-size: 16px; line-height: var(--leading-body); }

  .rg-grid { gap: var(--space-2); }
  .rg-card { padding: 20px; }
  .rg-card__title { font-size: 19px; }
  .rg-tag { font-size: 13px; padding: 7px 14px; }

  .rg-grid--gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rg-faq__q { font-size: 17px; }
  .rg-about__photo { max-width: 100%; aspect-ratio: 4 / 5; }

  .rg-credit { font-size: var(--text-caption); letter-spacing: 1px; }
  .rg-footer { padding: var(--space-3) var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}