/* Aplicação do design system oficial ao documento de produtos e jornadas. */
html { scroll-padding-top: var(--space-8); }
body { font-family: var(--font-sans); background: var(--surface-bg); color: var(--content-primary); }
::selection { background: var(--color-roxo-soft); color: var(--content-primary); }
a { color: var(--color-roxo-dark); }
a:hover { color: var(--brand-primary); }
a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--brand-primary); outline-offset: var(--space-1); box-shadow: var(--focus-ring);
}
.layout { grid-template-columns: 256px minmax(0, 1fr); }
.sidebar { background: var(--surface-dark); padding: var(--space-8) var(--space-6); color: var(--content-inverse); }
.sidebar > div:first-child { display: flex; align-items: center; }
.brand { display: inline-flex; align-items: center; min-height: var(--button-height); padding: var(--space-2) 0; }
.brand img { display: block; width: 160px; height: auto; }
.sidebar-label { font-size: var(--fs-xs); color: var(--content-inverse); letter-spacing: var(--tracking-wide); text-transform: none; margin: var(--space-4) 0 var(--space-8); }
.sidebar-label { margin-bottom: var(--space-4); }
.language-switch { display: flex; gap: var(--space-1); margin-bottom: var(--space-6); }
.language-switch a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-indigo-light); border-radius: var(--radius-md); color: var(--content-inverse); font-size: var(--fs-sm); text-decoration: none; }
.language-switch a[aria-current="page"] { background: var(--color-indigo-light); font-weight: 700; }
.language-switch a:hover { background: var(--brand-primary); }
.nav { gap: var(--space-2); }
.nav a { min-height: var(--button-height); align-items: center; border-radius: var(--radius-md); font-size: var(--fs-sm); padding: var(--space-3); color: var(--content-inverse); transition: background var(--duration-fast) var(--ease-in-out); }
.nav a.active { background: var(--brand-primary); color: var(--brand-on-primary); }
.nav a:hover { background: var(--color-indigo-light); }
.nav a.active:hover { background: var(--brand-primary-hov); }
.nav b { color: inherit; font-family: var(--font-mono); padding: 0; }
.nav-rule { background: var(--color-indigo-light); margin: var(--space-4) var(--space-3); }
.sidebar-bottom { color: var(--content-inverse); font-size: var(--fs-xs); line-height: var(--lh-loose); padding-top: var(--space-8); }
.sidebar-bottom strong { color: inherit; font-weight: 700; }
.main { max-width: var(--container-lg); padding: var(--space-10) var(--space-10) var(--space-20); }
.topline { color: var(--content-secondary); font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: none; margin-bottom: var(--space-5); }
.topline > span:first-child { text-transform: uppercase; letter-spacing: var(--tracking-widest); }
h1,h2,h3,h4 { font-family: var(--font-display); color: inherit; }
.product-home h1 { font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-5); }
h1 span { color: var(--brand-primary); font-style: italic; }
h2 { font-size: var(--fs-2xl); letter-spacing: var(--tracking-tight); }
h3 { letter-spacing: var(--tracking-snug); }
p { color: inherit; }
.lead, .product-home .lead { font-size: var(--fs-md); line-height: var(--lh-loose); color: var(--content-secondary); }
.section { margin-top: var(--section-pad-sm); }
.section-head { gap: var(--space-4); margin-bottom: var(--space-6); }
.section-number { background: var(--color-roxo-soft); color: var(--color-roxo-dark); width: var(--space-10); height: var(--space-10); border-radius: var(--radius-lg); font-family: var(--font-mono); }
.section-head p { color: var(--content-secondary); line-height: var(--lh-loose); }
.section-kicker, .offer-role { text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--fs-xs); font-weight: 700; }
.offer-overview { gap: var(--space-4); }
.offer-summary { padding: var(--space-6); border-radius: var(--radius-xl); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.offer-summary h2 { font-size: var(--fs-2xl); line-height: var(--lh-tight); font-weight: 700; }
.offer-summary p { font-size: var(--fs-base); line-height: var(--lh-loose); }
.offer-price { font-family: var(--font-mono); font-size: var(--fs-xl); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.offer-price span { font-family: var(--font-sans); font-size: var(--fs-sm); letter-spacing: var(--tracking-normal); }
.offer-summary > a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--button-height); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: var(--color-roxo-soft); color: var(--color-roxo-dark); text-decoration: none; font-size: var(--fs-sm); }
.offer-summary > a:hover { background: var(--brand-primary); color: var(--brand-on-primary); }
.core-offer { background: var(--surface-dark); color: var(--content-inverse); border-color: var(--surface-dark); }
.core-offer .offer-role { color: var(--content-inverse); }
.core-offer > a { background: var(--brand-primary); color: var(--brand-on-primary); }
.core-offer > a:hover { background: var(--brand-primary-hov); }
.offer-definition { border-radius: var(--radius-xl); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); margin: var(--space-6) 0; }
.offer-identity { background: var(--color-roxo-soft); border-color: var(--border-subtle); padding: var(--space-8); }
.offer-identity h3 { font-size: var(--fs-2xl); font-weight: 700; }
.offer-promise { color: var(--content-primary); font-size: var(--fs-md); }
.offer-spec { padding: var(--space-8); }
.offer-identity dt, .offer-spec h4, .scope-choice h4 { font-size: var(--fs-sm); color: var(--color-roxo-dark); }
.offer-identity dd { font-size: var(--fs-base); }
.offer-boundary, .choice-fixed, .flow-note { background: var(--surface-ground); border-left-color: var(--color-roxo); color: var(--content-primary); }
.offer-connection, .sequence-approved, .scope-mandate { background: var(--surface-dark); color: var(--content-inverse); border-radius: var(--radius-xl); padding: var(--space-8); }
.offer-connection h3, .scope-mandate h3 { color: var(--content-inverse); }
.offer-connection a, .offer-connection h4, .offer-connection .offer-reference, .scope-mandate a { color: var(--content-inverse); }
.offer-connection a, .scope-mandate a { text-decoration: underline; text-underline-offset: var(--space-1); }
.scope-mandate > .tag, .sequence-approved .tag { background: var(--color-indigo-light); color: var(--content-inverse); }
.sequence-approved li { border-color: var(--color-indigo-light); }
.sequence-approved li::before { color: var(--content-inverse); font-family: var(--font-mono); }
.shared-engine { background: var(--color-roxo-soft); border-color: var(--border-subtle); border-radius: var(--radius-xl); padding: var(--space-8); }
.decision-matrix, .journey-status, .choice, .panel, .product-detail, .flow, .audit-item, .source-card, .support-detail { border-color: var(--border-subtle); box-shadow: var(--shadow-sm); border-radius: var(--card-radius); }
.decision-row { grid-template-columns: minmax(180px, .9fr) 1fr 1fr; padding: var(--space-6); gap: var(--space-6); }
.decision-row p, .journey-status p, .choice p, .delivery-spec li, .screen-details p, .audit-body p, .source-card p { font-size: var(--fs-base); line-height: var(--lh-loose); }
.decision-row h4, .screen-details h4, .audit-body strong { text-transform: none; font-size: var(--fs-sm); letter-spacing: var(--tracking-normal); font-weight: 700; }
.choice { padding: var(--space-6); }
.choice h3 { font-size: var(--fs-xl); }
.choice .d-id, .screen-id, .audit-id { font-family: var(--font-mono); color: var(--color-roxo-dark); }
.choice-priority { font-size: var(--fs-sm); }
.delivery-acceptance { background: var(--color-roxo-soft); border-color: var(--brand-primary); padding: var(--space-4) var(--space-5); }
.decision-boundary { border-color: var(--brand-primary); }
.tag, .tag.source, .tag.code, .tag.local, .tag.proposal, .tag.open, .tag.history { background: var(--surface-ground); color: var(--content-primary); border: 1px solid var(--border-default); font-size: var(--fs-xs); font-weight: 500; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); white-space: normal; }
.tag.approved { background: var(--color-roxo-soft); color: var(--color-roxo-dark); border-color: var(--color-roxo-soft); }
.scope-mandate > .tag, .sequence-approved .tag { border-color: var(--color-indigo-light); }
.notice, .notice.warn { background: var(--color-roxo-soft); color: var(--content-primary); border-color: var(--brand-primary); }
.step, .step.gate, .step.local-step { background: var(--surface-ground); border-color: var(--border-default); }
.step a { min-height: var(--button-height); display: flex; align-items: center; }
.step::after { color: var(--content-secondary); }
.flow-label, .source-key { background: var(--surface-dark); color: var(--content-inverse); }
.row-links a, .mini-links a, .anchor-links a { display: inline-flex; min-height: var(--button-height); align-items: center; }
.citation { color: var(--color-roxo-dark); border-color: var(--color-roxo-dark); }
.expand-label { color: var(--color-roxo-dark); }
.support-detail > summary { min-height: var(--header-height); padding: var(--space-6); }
.support-detail > summary:hover { background: var(--color-roxo-soft); }
.support-body { background: var(--surface-bg); padding: var(--space-2) var(--space-6) var(--space-6); }
.support-body .product-detail { padding: var(--space-6); }
.screen:target { background: var(--color-roxo-soft); box-shadow: 0 0 0 var(--space-3) var(--color-roxo-soft); }
.choice:target, .source-card:target, .offer-definition:target { outline: 2px solid var(--brand-primary); outline-offset: var(--space-1); }
.footer { margin-top: var(--space-12); padding-top: var(--space-6); font-size: var(--fs-xs); }
.skip { background: var(--brand-primary); color: var(--brand-on-primary); z-index: var(--z-toast); }
@media (max-width: 1200px) {
  .layout { grid-template-columns: 224px minmax(0, 1fr); }
  .sidebar { padding: var(--space-8) var(--space-4); }
  .main { padding: var(--space-8) var(--space-6) var(--space-16); }
  .offer-summary { padding: var(--space-5); }
  .offer-summary h2 { font-size: var(--fs-xl); }
  .decision-row { grid-template-columns: minmax(160px, .75fr) 1fr; }
  .decision-row > .row-subject { grid-row: span 2; }
}
@media (max-width: 960px) {
  html { scroll-padding-top: 152px; }
  .layout { display: block; }
  .sidebar { position: sticky; top: 0; height: auto; padding: var(--space-3) var(--gutter-mobile) var(--space-2); z-index: var(--z-sticky); overflow: visible; }
  .brand { padding: var(--space-2) 0; }
  .brand img { width: 128px; }
  .mobile-title { display: inline; color: var(--content-inverse); margin-left: var(--space-6); font-size: var(--fs-xs); letter-spacing: var(--tracking-normal); }
  .sidebar-label, .sidebar-bottom, .nav-rule { display: none; }
  .sidebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); }
  .sidebar > div:first-child { min-width: 0; }
  .language-switch { margin: 0; align-items: center; }
  .language-switch a { padding: var(--space-2); }
  .mobile-title { display: none; }
  .nav { grid-column: 1 / -1; min-width: 0; }
  .nav { flex-direction: row; overflow-x: auto; gap: var(--space-1); margin-top: var(--space-3); padding-bottom: var(--space-1); scrollbar-width: thin; }
  .nav a { white-space: nowrap; min-height: var(--button-height); padding: var(--space-2) var(--space-3); }
  .nav b { display: none; }
  .offer-overview { grid-template-columns: 1fr; }
  .offer-summary { display: flex; padding: var(--space-6); }
  .offer-summary h2 { font-size: var(--fs-2xl); }
  .offer-summary > a { align-self: flex-start; margin-top: var(--space-4); }
  .offer-definition { grid-template-columns: 1fr; }
  .offer-identity { border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .section, .screen, .choice, .decision-row, .offer-definition, .shared-engine, .source-card, #mapa, .support-body .section { scroll-margin-top: 152px; }
  .support-body .screen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .main { padding: var(--space-6) var(--gutter-mobile) var(--space-12); }
  .product-home h1 { font-size: var(--fs-3xl); }
  .product-home .lead { font-size: var(--fs-base); }
  .section { margin-top: var(--space-12); }
  .section-head h2, .product-definitions .section-head h2 { font-size: var(--fs-2xl); }
  .section-number { width: var(--space-8); height: var(--space-8); }
  .offer-summary, .offer-spec, .offer-identity, .offer-connection, .shared-engine, .scope-mandate, .choice, .journey-status { padding: var(--space-5); }
  .offer-identity dl { display: block; }
  .offer-identity dt { margin: var(--space-5) 0 var(--space-2); }
  .offer-price span { display: block; }
  .audience-paths, .shared-engine, .decision-row, .journey-status-grid, .choice-grid { grid-template-columns: 1fr; }
  .decision-row > .row-subject { grid-row: auto; }
  .support-body { padding: var(--space-2) var(--space-3) var(--space-5); }
  .support-detail > summary { padding: var(--space-5); }
  .support-body .product-detail { padding: var(--space-4); }
  .topline { align-items: flex-start; gap: var(--space-4); }
  .topline > span:first-child { max-width: 60%; }
  .scope-mandate h3 { font-size: var(--fs-2xl); }
  .footer { display: block; line-height: var(--lh-loose); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
@media print {
  .sidebar { display: none; }
  .layout { display: block; }
  .main { max-width: none; padding: 0; }
  .offer-overview { grid-template-columns: repeat(3, 1fr); }
  .offer-summary { display: block; }
  .offer-summary, .offer-definition, .choice { box-shadow: none; }
}
