/* Comentários 2 e 3: componentes em musgo, preservando a geometria e o movimento. */
#recursos .bento-card,
#galeria {
  --forest: #163c31;
  --lime: #98e27a;
  --paper: #f9fff3;
  --muted: #d3e4cf;
  --line: #63856d;
  --canvas: #214e40;
  color: var(--paper);
}

/* O fundo claro continua enquadrando os seis componentes; todos os cards são musgo. */
#recursos .bento-grid > .bento-card {
  background: #163c31;
  border-color: #406650;
}
#recursos .bento-card :is(h3, .mini-top, .schedule-row b, .document-slip b, .epi-card strong) {
  color: var(--paper);
}
#recursos .bento-card :is(p, .card-kicker, .schedule-row small, .schedule-done, .demo-label,
    .sync-caption, .sync-label, .number-visual > span, .document-slip small,
    .epi-card > span, .epi-confirm, .card-link) {
  color: var(--muted);
}
#recursos .bento-card :is(.schedule-row, .document-slip, .epi-card) {
  background: #214e40;
  border-color: #63856d;
  box-shadow: none;
}
#recursos .schedule-visual .schedule-row { background: #214e40; }
#recursos .schedule-row.is-current { border-color: var(--lime); box-shadow: 0 0 0 1px #98e27a33; }
#recursos .bento-card :is(.status-pill, .schedule-row.status-done .status-pill, .document-slip > span) {
  background: var(--lime);
  color: #163c31;
}
#recursos .bento-card .pulse-dot { background: var(--lime); }
#recursos .bento-card :is(.sync-brand, .sync-soc, .team-center) {
  background: #214e40;
  border-color: #63856d;
  color: var(--paper);
  box-shadow: none;
}
#recursos .sync-soc small { color: var(--muted); }
#recursos .sync-track { background: #63856d; }
#recursos .sync-track::before { background: #98e27a; opacity: .1; }
#recursos .sync-packet { background: var(--lime); }
#recursos .sync-packet.back { background: #d3e4cf; }
#recursos .bento-card .number-visual :is(strong, strong small, .number-separator) { color: var(--lime); }
#recursos .mini-bars i { background: #77b463; }
#recursos .mini-bars i:nth-child(n+9) { background: var(--lime); }
#recursos .team-person > img { border-color: #63856d; }
#recursos .team-person > span { color: var(--paper); background: #214e40; border-color: #63856d; }
#recursos .team-visual .connection { stroke: var(--lime); }
#recursos .signature { color: var(--lime); border-bottom-color: #63856d; }
#recursos .signature::after { background: #214e40; }
#recursos .card-link:hover { color: var(--lime); }

/* Os ícones em mask herdam a cor sem modificar seu SVG nem o JS de animação. */
#recursos .bento-card .brand-icon,
#galeria .brand-icon { background: #214e40; color: var(--lime); box-shadow: inset 0 0 0 1px #63856d; }
#recursos .bento-card :is(.mini-top > img, .schedule-done img, .document-slip > img,
    .sync-brand img, .team-center img, .epi-card > span img, .epi-confirm img),
#galeria :is(.audience-appbar > img, .component-heading img, .appointment-note img,
    .component-footnote > img, .profile-benefit > img) {
  filter: brightness(0) saturate(100%) invert(88%) sepia(28%) saturate(732%) hue-rotate(43deg) brightness(101%) contrast(78%);
}

/* A galeria inteira adota o tema escuro, incluindo os três mockups interativos. */
#galeria { background: #163c31; color-scheme: dark; }
#galeria :is(h2, h3, h4, .eyebrow, .component-heading > span, .demo-field,
    .toxic-control b, .network-totals strong, .roadmap strong) { color: var(--paper); }
#galeria :is(.section-heading p, .audience-copy p, .profile-benefit, .audience-caption,
    .component-heading small, .demo-person small, .toxic-control small,
    .appointment-note p, .appointment-action > span, .component-footnote,
    .component-footnote > small, .network-totals span, .roadmap p) { color: var(--muted); }
#galeria .brand-marker { color: #163c31; background: var(--lime); }
#galeria .role-tabs button { color: var(--paper); border-color: #63856d; }
#galeria .role-tabs button:hover { color: var(--paper); background: #214e40; border-color: var(--lime); }
#galeria .role-tabs button[aria-selected=true] { color: #163c31; background: var(--lime); border-color: var(--lime); box-shadow: none; }
#galeria .audience-copy .profile-benefit { border-color: #63856d; }
#galeria .audience-copy .button-dark { background: var(--lime); color: #163c31; }
#galeria .audience-copy .button-dark:hover { background: #b6ee9e; }
#galeria .audience-copy .button-icon { color: var(--lime); background: #163c31; }
#galeria .audience-scene { background: #0f2f26; border-color: #63856d; box-shadow: none; }
#galeria .audience-appbar { background: #163c31; color: var(--paper); border-color: #63856d; }
#galeria .appbar-dots { color: var(--lime); }
#galeria .appointment-context { opacity: .35; }
#galeria .appointment-context :is(h4, p, b, small) { color: var(--muted); }
#galeria .appointment-context > div > span,
#galeria .appointment-context > span { background: #214e40; color: var(--muted); }
#galeria :is(.appointment-demo, .inventory-demo, .network-capacity) {
  color: var(--paper);
  background: #183f33;
  border-color: #63856d;
  box-shadow: 0 16px 32px #071d173d;
}
#galeria :is(.demo-person, .demo-field input, .demo-field select) {
  background: #214e40;
  color: var(--paper);
  border-color: #63856d;
}
#galeria .demo-field input::placeholder { color: #d3e4cf; opacity: 1; }
#galeria .demo-field select option { background: #214e40; color: var(--paper); }
#galeria .toxic-control { background: #214e40; border-color: #63856d; }
#galeria .toxic-control input { accent-color: var(--lime); }
#galeria .audience-scene.is-emphasized .toxic-control {
  background: #2b5945;
  border-color: var(--lime);
  box-shadow: 0 0 0 3px #98e27a24;
}
#galeria .appointment-action { border-color: #63856d; }
#galeria .appointment-action button { background: var(--lime); color: #163c31; }
#galeria .appointment-action button:hover { background: #b6ee9e; }
#galeria .appointment-action button img { filter: brightness(0) saturate(100%) invert(18%) sepia(22%) saturate(996%) hue-rotate(109deg) brightness(94%) contrast(90%); }
#galeria .appointment-demo.is-confirmed .appointment-action > span { color: var(--lime); }
#galeria .appointment-demo.is-confirmed .appointment-action button { background: var(--lime); color: #163c31; }
#galeria .risk-filters button { color: var(--paper); background: #214e40; border-color: #63856d; }
#galeria .risk-filters button:hover { border-color: var(--lime); }
#galeria .risk-filters button[aria-pressed=true] { color: #163c31; background: var(--lime); border-color: var(--lime); }
#galeria :is(.risk-demo-table th, .capacity-table th, .capacity-table small) { color: var(--muted); }
#galeria :is(.risk-demo-table td, .capacity-table td) { color: var(--paper); border-color: #63856d; }
#galeria :is(.risk-type, .norm-chip) { background: #214e40; color: var(--paper); border: 1px solid #63856d; }
#galeria .is-emphasized .risk-demo-table td:last-child { background: #2b5945; }
#galeria .component-footnote { border-color: #63856d; }
#galeria .network-totals > div { background: #214e40; border-color: #63856d; }
#galeria .network-totals strong { color: var(--lime); }
#galeria .is-emphasized .network-capacity { box-shadow: 0 0 0 3px #98e27a24; }
#galeria .capacity-table button { color: var(--paper); }
#galeria .capacity-table tr.is-selected { background: #2b5945; }
#galeria :is(.capacity-bar, .capacity-bar.medium, .capacity-bar.low) { background: #90c57c; color: #163c31; }
#galeria :is(.capacity-bar i, .capacity-bar.medium i, .capacity-bar.low i) { background: var(--lime); }
#galeria .roadmap { border-color: #63856d; }
#galeria .roadmap .status-pill { background: #214e40; color: var(--muted); border: 1px solid #63856d; }
#galeria .demo-table-viewport { scrollbar-color: #98e27a #183f33; }
#recursos .bento-card a:focus-visible,
#galeria :is(a, button, input, select):focus-visible { outline: 2px solid #98e27a; outline-offset: 3px; }
#galeria .toxic-control:focus-within { border-color: var(--lime); }