/* Cores e tipografia aplicadas no site institucional da MON Marketing. */
@font-face {
  font-family: Montserrat;
  src: url("assets/Montserrat.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #060509;
  --panel: #222222;
  --orange: #fc6c14;
  --yellow: #f2a929;
  --paper: #222222;
  --ink: #ffffff;
  --line: #2c2c2c;
  --muted: #bdbdbd;
  font-family: Montserrat, Arial, sans-serif;
  color: #ffffff;
}

body {
  background: var(--bg);
}
h1,
h2,
h3 {
  font-family: Montserrat, Arial, sans-serif;
}
h1,
h2 {
  font-weight: 500;
  letter-spacing: -0.045em;
}
h1 em,
h2 em {
  font-weight: 700;
  color: var(--orange);
}
h3 {
  font-weight: 600;
  letter-spacing: -0.035em;
}
.header {
  background: #060606;
  border-color: var(--line);
}
.desktop-nav,
.logo-strip > span {
  color: #ffffff;
}
.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--orange);
}
.button,
.button.small {
  background: linear-gradient(110deg, var(--orange), var(--yellow));
  color: #060606;
  border-color: var(--orange);
}
.button:hover {
  background: var(--orange);
  color: #ffffff;
}
.hero::before {
  background:
    linear-gradient(90deg, #060509e6, #06050920 80%),
    linear-gradient(0deg, #060509, transparent 18%, transparent 85%, #060509);
}
.hero-scene {
  background: radial-gradient(ellipse, #fc6c1415, transparent 65%);
}
.scene-orbit {
  border-color: #fc6c1438;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1;
}
.hero-description,
.hero-note,
.section-heading > p,
.service-grid p,
.case-intro > p:not(.eyebrow),
.operation-banner p:last-child,
.diagnostic-copy > p:not(.eyebrow),
.faq details p,
footer p,
footer > small {
  color: var(--muted);
}
.section-heading h2 span,
.case-intro h2 > span,
.diagnostic h2 span,
.faq h2 span {
  color: #ffffff;
}
.status-dot,
.panel-top i {
  background: var(--orange);
}
.check,
.orange,
.service-icon,
.case-intro .dark {
  color: var(--orange);
}
.text-link:hover {
  color: var(--orange);
}
.trust-strip {
  background: #060606;
  border-color: var(--line);
}
.trust-strip .wrap > p {
  color: var(--muted);
}

/* A seleção de canais mantém a mesma apresentação da MON. */
.floating-brand,
.brand-ml,
.brand-shopee,
.brand-amazon,
.brand-shopify {
  background: #222222;
  color: #ffffff;
  border-color: #444444;
}
.floating-brand img {
  filter: brightness(0) invert(1);
}
.control-panel {
  background: linear-gradient(125deg, #222222, #111111);
  border-color: #444444;
}
.panel-top,
.panel-bottom {
  color: var(--muted);
  border-color: #333333;
}
.panel-heading small,
.operation-flow div span,
.chart {
  color: var(--muted);
}
.panel-arrow {
  color: var(--orange);
  background: #fc6c1415;
  border-color: #fc6c1440;
}
.operation-flow div {
  background: #111111;
  border-color: #333333;
}
.operation-flow b {
  color: var(--orange);
}
.floating-note {
  background: #222222;
  border-color: #fc6c1466;
}
.floating-note small {
  color: var(--muted);
}
.bag-icon {
  background: var(--orange);
  color: #060606;
}
.channel-tabs button {
  background: #222222;
  border-color: #333333;
  color: #ffffff;
}
.channel-tabs button[aria-selected="true"] {
  background: var(--orange);
  border-color: var(--orange);
  color: #060606;
}
.channel-content {
  background: #222222;
  color: #ffffff;
  border: 1px solid #333333;
}
.channel-visual {
  background: radial-gradient(ellipse, #fc6c1424, transparent 75%), #111111;
}
.channel-visual > img {
  filter: brightness(0) invert(1);
}
.channel-visual > span {
  color: var(--muted);
}
.visual-lines i {
  border-color: #fc6c1433;
}
.channel-copy .eyebrow {
  color: var(--orange);
}
.channel-copy > p:not(.eyebrow),
.channel-copy li {
  color: var(--muted);
}
.channel-copy li {
  border-color: #3b3b3b;
}
.channel-copy li::before {
  color: var(--orange);
}
.channel-copy .dark {
  color: #ffffff;
}
.solutions {
  background: #111111;
  border-color: var(--line);
}
.service-grid article {
  background: #222222;
  border-color: #333333;
}
.service-grid article:hover {
  border-color: var(--orange);
}
.service-number {
  color: var(--muted);
}
.case-card,
.case-two,
.case-three {
  background: #222222;
  color: #ffffff;
}
.case-card h3 {
  color: #ffffff;
}
.case-card small,
.case-card > span {
  color: var(--muted);
}
.case-card:hover {
  box-shadow: inset 3px 0 var(--orange);
}
.case-logo {
  mix-blend-mode: normal;
  background: #ffffff;
  border-radius: 4px;
  padding: 9px 12px;
  width: min(100%, 245px);
  height: 62px;
}
.arconti-logo {
  width: 175px;
  height: 65px;
  padding: 0;
}
.operation-banner {
  border-color: var(--line);
}
.operation-banner::before {
  background: linear-gradient(90deg, #060509f5 10%, #06050977 100%);
}
.operation-banner .eyebrow {
  color: var(--yellow);
}

.diagnostic-form {
  background: #222222;
  color: #ffffff;
  border: 1px solid #333333;
}
.form-top,
fieldset > p,
.choice small,
.choice i,
.summary-text,
.back {
  color: var(--muted);
}
.form-top span:first-child {
  color: var(--orange);
}
.progress-track {
  background: #444444;
}
.progress-track > span {
  background: var(--orange);
}
.choice,
.channel-choices label {
  background: #111111;
  border-color: #444444;
}
.choice:has(input:checked),
.channel-choices label:has(input:checked) {
  background: #fc6c1418;
  border-color: var(--orange);
}
.choice input,
.channel-choices input {
  accent-color: var(--orange);
}
.choice b,
.channel-choices label {
  color: #ffffff;
}
.steps-preview {
  color: var(--muted);
}
.steps-preview .active {
  color: var(--orange);
}
.steps-preview i {
  background: #444444;
}
.diagnostic-copy .diagnostic-note {
  color: var(--muted) !important;
}
.form-error {
  color: var(--yellow);
}
.summary-text {
  border-color: #444444;
}
.faq,
.faq details {
  border-color: var(--line);
}
.faq summary {
  color: #ffffff;
}
.final-cta {
  background:
    radial-gradient(ellipse at 100% 100%, #fc6c1424, transparent 65%), #111111;
  border-color: #fc6c1466;
}
.final-cta .eyebrow {
  color: var(--orange);
}
footer,
footer > small {
  border-color: var(--line);
}
.mobile-menu summary {
  border-color: #444444;
}
.mobile-menu nav {
  background: #222222;
  border-color: #444444;
}
@media (max-width: 760px) {
  .hero::before {
    background: linear-gradient(0deg, #060509, #06050950 30%, #060509c7);
  }
  .operation-banner::before {
    background: linear-gradient(90deg, #060509f5, #06050990);
  }
}