/* =====================================================================
   Compras — camada de página sobre o design system Me & You.
   Só usa tokens (var(--…)) para funcionar em claro e escuro.
   Acento do produto: brand-blue (família indigo/ciano, distinto do
   contábil teal e do indigo padrão).
   ===================================================================== */
/* reset mínimo — o design system Me & You assume que o host fornece um
   (no Artifact ele existe; num app ASP.NET standalone precisamos declarar). */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; }

:root { --accent-compras: var(--brand-blue); }
.product[data-product="compras"] { --theme-accent: var(--accent-compras); }

/* nunca rolar horizontalmente */
html, body { max-width: 100%; overflow-x: hidden; }
.nav__brand { min-width: 0; }
.nav__brand-accent { white-space: nowrap; }

/* --- grades responsivas --- */
.grid { display: grid; gap: var(--sp-6); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); }
                             .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 639px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* --- hero: layout com mockup --- */
.hero-grid { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-8); }

/* mockup de painel no hero */
.mockup {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--bg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.mockup__bar { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule); background: var(--bg-soft); }
.mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.mockup__body { padding: var(--sp-6); }
.mockup__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.mockup__stat .label { display: block; font-size: var(--text-xs); color: var(--ink-mute); }
.mockup__stat .num { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.mockup__chart { display: flex; align-items: flex-end; gap: var(--sp-2); height: 96px; }
.mockup__chart span { flex: 1; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: linear-gradient(180deg, var(--theme-accent), color-mix(in srgb, var(--theme-accent) 45%, transparent)); }

/* --- linha de pills (fontes/formatos) --- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-6); }

/* --- cartão de recurso --- */
.feat { }
.feat__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius); margin-bottom: var(--sp-4);
  background: color-mix(in srgb, var(--theme-accent) 14%, transparent);
  color: var(--theme-accent);
}
.feat h3 { font-size: var(--text-xl); margin: 0 0 var(--sp-2); color: var(--ink); }
.feat p  { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }

/* --- passos numerados --- */
.steps { counter-reset: step; }
.step__n { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--theme-accent); letter-spacing: .04em; }
.step h3 { font-size: var(--text-lg); margin: var(--sp-2) 0; color: var(--ink); }
.step p  { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }

/* --- FAQ (accordion nativo) --- */
.faq { display: grid; gap: var(--sp-3); }
.faq details {
  border: 1px solid var(--rule); border-radius: var(--radius-lg);
  background: var(--bg); padding: var(--sp-4) var(--sp-6);
}
.faq summary {
  cursor: pointer; font-weight: var(--fw-semibold); color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; gap: var(--sp-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--theme-accent); font-weight: var(--fw-bold); }
.faq details[open] summary::after { content: "–"; }
.faq details[open] summary { margin-bottom: var(--sp-3); }
.faq p { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }

/* --- faixa CTA em gradiente --- */
.cta-band { background: var(--brand-gradient); border-radius: var(--radius-lg); padding: var(--sp-12) var(--sp-8); text-align: center; color: #fff; }
.cta-band h2 { color: #fff; font-size: var(--text-3xl); margin: 0 0 var(--sp-3); }
.cta-band p  { color: rgba(255,255,255,.88); margin: 0 auto var(--sp-8); max-width: 40rem; }
.cta-band .btn--primary { background: #fff; color: var(--brand-deep); }
.cta-band .btn--primary:hover { background: #fff; box-shadow: var(--shadow); }
.cta-band .btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.cta-band .btn--ghost:hover { border-color: #fff; color: #fff; }

/* --- tipografia de apoio --- */
.lead { font-size: var(--text-lg); line-height: var(--lh-body); color: var(--ink-soft); max-width: 36rem; margin: 0; }
.section-head { max-width: 46rem; margin-bottom: var(--sp-12); }
.section-head h2 { font-size: var(--text-3xl); margin: var(--sp-3) 0; color: var(--ink); letter-spacing: -0.02em; }

/* --- atmosfera do hero (brilho suave da marca) --- */
.hero-wrap { position: relative; overflow: hidden; }
.hero-wrap::before {
  content: ""; position: absolute; z-index: 0; inset: -25% -10% auto auto; width: 62%; height: 130%;
  background: radial-gradient(48% 48% at 62% 38%, color-mix(in srgb, var(--brand-blue) 20%, transparent), transparent 70%);
  filter: blur(24px); pointer-events: none;
}
.hero-wrap > .container { position: relative; z-index: 1; }
.mockup__cap { display: block; margin-top: var(--sp-3); font-size: var(--text-xs); color: var(--ink-mute); text-align: center; }

/* --- ícone de recurso / fonte --- */
.feat__icon { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 22%, transparent); }
.feat svg, .src__icon svg { display: block; }
.btn svg { display: inline-block; vertical-align: -3px; margin-left: .4em; }
.src__icon {
  display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border-radius: var(--radius); margin-bottom: var(--sp-3);
  color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 20%, transparent);
}

/* --- movimento: entrada e revelação (respeita reduced-motion) --- */
@media (prefers-reduced-motion: no-preference) {
  .rise { opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) both; }
  .rise-1 { animation-delay: .04s; } .rise-2 { animation-delay: .12s; }
  .rise-3 { animation-delay: .20s; } .rise-4 { animation-delay: .28s; }
  @keyframes rise { to { opacity: 1; transform: none; } }
  .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

/* --- nav no mobile: mantém marca + CTA, recolhe os links --- */
@media (max-width: 760px) {
  .nav__links .nav__link { display: none; }
  .nav__links { margin-left: auto; gap: var(--sp-2); }
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* --- workspace (Radar) --- */
.stat { padding: var(--sp-4) var(--sp-6); }
.stat .num { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; display: block; }
.stat .label { font-size: var(--text-xs); color: var(--ink-mute); text-transform: uppercase; letter-spacing: .05em; }
.novidades { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-6); }
.novidades__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mute); margin-right: var(--sp-1); }
.novidade { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .4rem .85rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--fw-semibold); text-decoration: none; border: 1px solid transparent; }
.novidade svg { display: inline-block; }
.novidade--new { color: var(--theme-accent); background: color-mix(in srgb, var(--theme-accent) 12%, transparent); border-color: color-mix(in srgb, var(--theme-accent) 30%, transparent); }
.novidade--urgent { color: var(--warn-ink); background: var(--warn-bg); border-color: var(--warn-border); }
.novidade[aria-current="true"] { outline: 2px solid currentColor; outline-offset: 1px; }
.novidades .novidade:not(.novidade--new):not(.novidade--urgent) { color: var(--ink-mute); font-weight: var(--fw-normal); }

.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin: var(--sp-6) 0 var(--sp-6); }
.chip { display: inline-block; padding: .35rem .85rem; border-radius: var(--radius-pill); border: 1px solid var(--rule); color: var(--ink-soft); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--theme-accent); color: var(--theme-accent); }
.chip[aria-current="true"] { background: var(--theme-accent); color: #fff; border-color: var(--theme-accent); }
.opp h3 { font-size: var(--text-lg); margin: 0 0 var(--sp-2); color: var(--ink); }
.opp__meta { color: var(--ink-mute); font-size: var(--text-sm); display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.opp__terms { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.pricebox { border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--rule)); background: color-mix(in srgb, var(--theme-accent) 6%, transparent); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); }
.pricebox__title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; color: var(--theme-accent); margin: 0 0 var(--sp-2); }
.pricebox__title span { color: var(--ink-mute); font-weight: var(--fw-normal); text-transform: none; letter-spacing: 0; }
.pricebox__title svg { color: var(--theme-accent); }
.pricebox__row { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid color-mix(in srgb, var(--theme-accent) 15%, transparent); }
.pricebox__row:first-of-type { border-top: none; }
.pricebox__item { color: var(--ink-soft); font-size: var(--text-sm); }
.pricebox__val { color: var(--ink); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pricebox__val small { color: var(--ink-mute); font-weight: var(--fw-normal); }
.pricebox__meta { grid-column: 1 / -1; color: var(--ink-mute); font-size: var(--text-xs); }
.pricebox__none { color: var(--ink-mute); font-size: var(--text-xs); font-style: italic; margin: 0 0 var(--sp-4); }

.opp__edit { display: grid; grid-template-columns: 210px 1fr auto; gap: var(--sp-3); align-items: end; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule); }
@media (max-width: 680px) { .opp__edit { grid-template-columns: 1fr; } }
.opp__edit .label { display: block; margin-bottom: var(--sp-1); }
select.field { appearance: auto; }

/* --- rodapé em colunas --- */
.foot-cols { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
@media (min-width: 720px) { .foot-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-cols h4 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: #8e9ab5; margin: 0 0 var(--sp-3); }
.foot-cols a { display: block; margin-bottom: var(--sp-2); color: #e2e8f0; font-size: var(--text-sm); }

/* --- lista de definições (detalhe da oportunidade) --- */
.deflist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-8); margin: 0; }
@media (max-width: 680px) { .deflist { grid-template-columns: 1fr; } }
.deflist > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--rule); }
.deflist > div:first-of-type, .deflist > div:nth-of-type(2) { border-top: none; }
.deflist dt { color: var(--ink-mute); font-size: var(--text-sm); }
.deflist dd { margin: 0; color: var(--ink); font-size: var(--text-sm); font-weight: var(--fw-medium); text-align: right; }
.pager { font-variant-numeric: tabular-nums; }

/* --- menu suspenso da navegação (agrupa as páginas de mercado) --- */
.nav__links { flex-wrap: wrap; row-gap: var(--sp-1); }
.nav__menu { position: relative; }
.nav__menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu-trigger::after { content: "▾"; font-size: .8em; color: var(--ink-mute); }
.nav__menu[open] > summary { color: var(--ink); }
.nav__menu-panel {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 13rem;
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--ink) 14%, transparent);
  padding: var(--sp-2); display: grid; gap: 2px; z-index: 60;
}
.nav__menu-panel a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--ink-soft); text-decoration: none; white-space: nowrap;
}
.nav__menu-panel a:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--ink); }