/* components.css — Classes semânticas reutilizáveis do sistema ÁUREO.
   Scaffolding do catálogo, tipografia aplicada, botões, selos, cards,
   formulários, acordeão, navbar, abas, marquee e stats. */

/* ============================================================
   1. SCAFFOLDING DO CATÁLOGO
   ============================================================ */
.page-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; }

.ds-shell {
  position: relative;
  z-index: 2;
  max-width: var(--container-wide);
  margin: clamp(12px, 2vw, 28px) auto;
  border-radius: var(--radius-2xl);
  background-image: linear-gradient(180deg, rgba(16, 16, 19, 0.86), rgba(8, 8, 9, 0.9));
  border: 1px solid var(--border-soft);
  border-top-color: var(--glass-border-top);
  box-shadow: var(--shadow-panel);
}

.ds-section { padding-block: var(--section-y); scroll-margin-top: 88px; }
.ds-section + .ds-section { border-top: 1px solid var(--border-hairline); }

.section-header { max-width: 760px; margin-bottom: var(--space-8); }
.section-header .eyebrow { display: inline-block; margin-bottom: var(--space-4); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-400);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}
.section-desc {
  margin-top: var(--space-4);
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 62ch;
}

/* Célula isolada que documenta um exemplo de componente */
.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
}
.tile__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.tile__demo { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.tile__demo--center { justify-content: center; }
.tile__demo--col { flex-direction: column; align-items: stretch; }

.spec {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Amostra de cor */
.swatch { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.swatch__chip { height: 78px; }
.swatch__meta { padding: var(--space-3); background: var(--noir-900); }
.swatch__name { font-family: var(--font-mono); font-size: var(--fs-label-xs); color: var(--text-secondary); }
.swatch__hex { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-label-xs); color: var(--text-faint); }

/* Linha de specimen tipográfico */
.specimen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--border-hairline);
}
.specimen__sample { color: var(--text-primary); }
.specimen__spec { font-family: var(--font-mono); font-size: var(--fs-label-xs); color: var(--text-faint); }

/* Tabela de referência (durações, curvas) */
.ref-table { width: 100%; border-collapse: collapse; }
.ref-table th, .ref-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}
.ref-table th { color: var(--gold-400); text-transform: uppercase; letter-spacing: 0.1em; }
.ref-table td { color: var(--text-secondary); }

/* ============================================================
   2. TIPOGRAFIA APLICADA
   ============================================================ */
.t-display-xl {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.t-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  font-weight: var(--weight-medium);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
}
.t-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: var(--weight-medium); line-height: var(--lh-snug); }
.t-h1 { font-family: var(--font-display); font-size: var(--fs-h1); font-weight: var(--weight-medium); }
.t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--weight-semibold); color: var(--text-primary); }
.t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--weight-semibold); color: var(--text-primary); }
.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.t-body-sm { font-size: var(--fs-body-sm); }
.t-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.t-primary { color: var(--text-primary); }
.t-secondary { color: var(--text-secondary); }
.t-muted { color: var(--text-muted); }

.link-gold {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold-300);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-medium);
  transition: gap var(--dur-base) var(--ease-reveal), color var(--dur-base);
}
.link-gold:hover { gap: var(--space-3); color: var(--gold-200); }

/* ============================================================
   3. BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-lift),
              box-shadow var(--dur-base) var(--ease-lift),
              background-color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.btn iconify-icon { font-size: 1.15em; }

.btn--primary {
  background-image: var(--grad-gold-pill);
  color: var(--text-on-gold);
  box-shadow: var(--shadow-gold-pill), var(--shadow-inset-sheen);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold-glow-lg), var(--shadow-inset-sheen); }

.btn--secondary { color: var(--gold-300); border-color: var(--border-gold-strong); }
.btn--secondary:hover { transform: translateY(-3px); background-color: rgba(201, 162, 74, 0.1); border-color: var(--gold-400); }

.btn--ghost { color: var(--text-secondary); }
.btn--ghost:hover { color: var(--gold-300); }

.btn--dark { background-color: var(--noir-800); color: var(--text-primary); border-color: var(--border-gold); }
.btn--dark:hover { transform: translateY(-3px); border-color: var(--border-gold-strong); box-shadow: var(--shadow-inset-white); }

.btn--sm { padding: 9px 18px; font-size: var(--fs-label); }
.btn--lg { padding: 18px 38px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

.btn:disabled, .btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn--loading { color: transparent !important; position: relative; pointer-events: none; }
.btn--loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(26, 20, 8, 0.3);
  border-top-color: var(--text-on-gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-size: 22px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-lift);
}
.btn-icon:hover {
  color: var(--gold-300);
  background: rgba(201, 162, 74, 0.1);
  border-color: var(--border-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-e2);
}
.btn-icon.is-active { color: var(--gold-200); background: rgba(201, 162, 74, 0.16); border-color: var(--border-gold-strong); }

/* ============================================================
   4. SELOS / BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-300);
  background: rgba(201, 162, 74, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
}
.badge iconify-icon { font-size: 1.05em; }
.badge--status { color: var(--text-secondary); background: transparent; border-style: dashed; border-color: var(--border-dashed); }
.badge--neutral {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border-soft);
  border-radius: var(--radius-xs);
}
.badge--popular {
  color: var(--text-on-gold);
  font-weight: var(--weight-bold);
  background-image: var(--grad-gold-pill);
  border-color: transparent;
  box-shadow: var(--shadow-gold-pill);
}
.badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-400);
  animation: pulse-dot var(--dur-glow) ease-in-out infinite;
}

/* ============================================================
   5. CARDS
   ============================================================ */
.card {
  position: relative;
  padding: var(--space-6);
  background: var(--noir-850);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-reveal),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.card--hover:hover { transform: translateY(-6px); border-color: var(--border-gold); box-shadow: var(--shadow-e3); }
.card--xl { border-radius: var(--radius-xl); padding: var(--space-7); }

.card__glow {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: var(--glow-gold-soft);
  filter: blur(60px);
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--dur-base);
}
.card--hover:hover .card__glow { opacity: 1; }

.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 26px;
  color: var(--gold-300);
  background: rgba(201, 162, 74, 0.1);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
  transition: transform var(--dur-base) var(--ease-lift);
}
.card--hover:hover .icon-tile { transform: scale(1.1); }

.card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--gold-600);
  letter-spacing: 0.1em;
}
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); margin-top: var(--space-3); }
.card__text { margin-top: var(--space-2); color: var(--text-muted); font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); }

/* Card de estatística */
.stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-stat);
  line-height: 1;
}
.stat__suffix { color: var(--gold-600); }
.stat__label {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Card de preço */
.card-price { display: flex; flex-direction: column; }
.card-price--featured {
  border-color: var(--border-gold-strong);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.08), var(--noir-850));
  box-shadow: var(--shadow-gold-glow);
}
@media (min-width: 1024px) { .card-price--featured { transform: scale(1.05); } }
.price__tier { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--gold-400); }
.price__amount { font-family: var(--font-display); font-size: var(--fs-display-md); color: var(--text-primary); margin-block: var(--space-3); }
.price__amount small { font-family: var(--font-sans); font-size: var(--fs-body-sm); color: var(--text-faint); font-weight: var(--weight-regular); }
.price__list { display: flex; flex-direction: column; gap: var(--space-3); margin-block: var(--space-5) var(--space-6); }
.price__list li { display: flex; gap: var(--space-3); align-items: center; font-size: var(--fs-body-sm); color: var(--text-secondary); }
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--gold-300);
  background: rgba(201, 162, 74, 0.15);
  border-radius: 50%;
}

/* Card de depoimento */
.quote-mark { font-family: var(--font-display); font-size: 3.4rem; line-height: 0.4; color: var(--gold-700); }
.card__quote { font-family: var(--font-display); font-size: var(--fs-body-lg); font-style: italic; color: var(--text-primary); line-height: var(--lh-snug); }

/* Avatar */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--noir-700), var(--noir-850));
  border: 1px solid var(--border-gold);
  color: var(--gold-300);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
}
.avatar--sm { width: 44px; height: 44px; font-size: 0.95rem; }
.avatar--lg { width: 88px; height: 88px; font-size: 1.6rem; }

.author__name { font-weight: var(--weight-semibold); color: var(--text-primary); font-size: var(--fs-body-sm); }
.author__role { font-family: var(--font-mono); font-size: var(--fs-label-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ============================================================
   6. FORMULÁRIOS E INPUTS
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.input--underline {
  width: 100%;
  padding: 12px 2px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text-primary);
  transition: border-color var(--dur-base);
}
.input--underline:focus { outline: none; border-bottom-color: var(--gold-400); }

.input--boxed {
  width: 100%;
  padding: 13px 16px;
  background: var(--noir-800);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.input--boxed:focus { outline: none; border-color: var(--border-gold-strong); box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.12); }
textarea.input--boxed { resize: none; min-height: 116px; }
.input::placeholder, .input--underline::placeholder, .input--boxed::placeholder { color: var(--text-faint); }

.select-wrap { position: relative; }
.select-wrap iconify-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-400);
  pointer-events: none;
}
select.input--boxed { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }

.search {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 18px;
  background: var(--noir-800);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
}
.search:focus-within { border-color: var(--border-gold-strong); box-shadow: var(--shadow-gold-glow); }
.search iconify-icon { color: var(--text-muted); font-size: 18px; }
.search input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text-primary); }
.search input:focus { outline: none; }
.kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  padding: 3px 7px;
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xs);
}

/* ============================================================
   7. ACORDEÃO / FAQ
   ============================================================ */
.accordion { border-bottom: 1px dashed var(--border-dashed); }
.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--text-primary);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold-200); }
.accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--gold-300);
  border: 1px solid var(--border-gold);
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-reveal), background-color var(--dur-base);
}
.accordion__icon svg { width: 13px; height: 13px; }
.accordion[open] .accordion__icon { transform: rotate(45deg); background: rgba(201, 162, 74, 0.12); }
.accordion__body { padding-bottom: var(--space-5); max-width: 66ch; color: var(--text-secondary); }
.accordion[open] .accordion__body { animation: fadeIn var(--dur-base) var(--ease-out-soft) both; }

/* ============================================================
   8. NAVBAR
   ============================================================ */
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: 12px var(--space-5);
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.navbar__group { display: flex; align-items: center; gap: var(--space-5); }
.navbar__group--end { justify-self: end; }
.navbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: 0.18em;
  color: var(--text-primary);
}
.navbar__brand img { width: 22px; height: 22px; }
.navbar__link {
  font-size: var(--fs-body-sm);
  color: var(--text-muted);
  transition: color var(--dur-base);
}
.navbar__link:hover, .navbar__link.is-active { color: var(--gold-300); }
.navbar--mobile { grid-template-columns: auto 1fr auto; }

/* ============================================================
   9. ABAS / TABS
   ============================================================ */
.tabs__list {
  display: inline-flex;
  gap: var(--space-1);
  padding: 5px;
  background: var(--noir-800);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
}
.tab {
  padding: 9px 22px;
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  transition: color var(--dur-base), background-color var(--dur-base);
}
.tab:hover:not(.is-active) { color: var(--gold-300); }
.tab.is-active { color: var(--text-on-gold); background-image: var(--grad-gold-pill); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeIn var(--dur-slow) var(--ease-out-soft) both; }

/* ============================================================
   10. MARQUEE / FAIXA DE CONFIANÇA
   ============================================================ */
.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-8);
  animation: marquee var(--dur-marquee) linear infinite;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-style: italic;
  color: var(--text-muted);
}
.marquee__item::after { content: "✦"; font-style: normal; font-size: 0.55em; color: var(--gold-600); }

/* ============================================================
   11. TABELA DE CONTEÚDO (TOC)
   ============================================================ */
.toc {
  position: sticky;
  top: 14px;
  z-index: 60;
  display: flex;
  gap: var(--space-1);
  max-width: max-content;
  margin: 0 auto;
  padding: 6px;
  background: rgba(8, 8, 9, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  overflow-x: auto;
}
.toc__link {
  padding: 7px 13px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  border-radius: var(--radius-pill);
  transition: color var(--dur-base), background-color var(--dur-base);
}
.toc__link:hover { color: var(--gold-300); }
.toc__link.is-active { color: var(--text-on-gold); background-image: var(--grad-gold-pill); }

/* ============================================================
   12. GRADE DE ÍCONES
   ============================================================ */
.icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--text-secondary);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  transition: color var(--dur-base), border-color var(--dur-base), background-color var(--dur-base), transform var(--dur-base) var(--ease-lift);
}
.icon-cell:hover {
  color: var(--gold-300);
  border-color: var(--border-gold);
  background: rgba(201, 162, 74, 0.05);
  transform: translateY(-3px);
}
.icon-cell iconify-icon { font-size: 26px; }
.icon-cell span { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); }

/* ============================================================
   13. DEMOS DE MOVIMENTO
   ============================================================ */
.motion-demo { cursor: pointer; }
.motion-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  color: var(--gold-300);
  background: rgba(201, 162, 74, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-md);
}
.demo-fadein.is-playing { animation: fadeIn var(--dur-slow) var(--ease-out-soft) both; }
.demo-rise.is-playing { animation: reveal-rise var(--dur-slow) var(--ease-reveal) both; }
.demo-drift.is-playing { animation: drift 2.6s var(--ease-standard) infinite alternate; }
.demo-glow.is-playing { animation: glow-pulse var(--dur-glow) ease-in-out infinite; }