html.mix-content-route,
html.mix-content-route body {
  overflow-x: clip;
  background: #fdfdfb !important;
}

.mix-content-page {
  --content-paper: #fdfdfb;
  --content-ink: #151517;
  --content-muted: #62626d;
  --content-violet: #7839ee;
  --content-blue: #3238f2;
  --content-line: rgba(21, 21, 23, .13);
  min-width: 0;
  margin-top: calc(-1 * var(--soceo-nav-height, 96px));
  overflow: clip;
  color: var(--content-ink);
  background: var(--content-paper);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.mix-content-page *, .mix-content-page *::before, .mix-content-page *::after { box-sizing: border-box; }
.mix-content-page :is(a, button):focus-visible { outline: 3px solid #875bf7; outline-offset: 4px; }
.mix-content-page .sr-only { width: 1px; height: 1px; position: absolute; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mix-content-shell { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }

.mix-content-eyebrow { margin: 0; color: var(--content-violet); font-size: 11px; font-weight: 800; letter-spacing: .15em; line-height: 1.4; }
.mix-content-eyebrow > i { width: 7px; height: 7px; display: inline-block; margin-right: 10px; border-radius: 50%; background: var(--content-violet); box-shadow: 0 0 0 5px rgba(120,57,238,.1); }
.mix-content-primary { min-height: 50px; width: fit-content; display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; color: #fff; border-radius: 999px; background: linear-gradient(135deg, var(--content-violet), var(--content-blue)); box-shadow: 0 14px 30px rgba(86,55,224,.22); font-size: 14px; font-weight: 760; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.mix-content-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(86,55,224,.3); }
.mix-content-primary svg, .mix-content-card > strong svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.mix-content-hero, .mix-materials-hero { position: relative; padding: calc(var(--soceo-nav-height, 96px) + 72px) 0 70px; background: radial-gradient(circle at 76% 27%, rgba(120,57,238,.11), transparent 31%), radial-gradient(circle at 54% 72%, rgba(50,56,242,.06), transparent 31%), linear-gradient(rgba(21,21,23,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(21,21,23,.035) 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; }
.mix-content-hero::after, .mix-materials-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(120,57,238,.22), transparent); }
.mix-content-hero__grid, .mix-materials-grid { min-height: 550px; display: grid; grid-template-columns: minmax(0,.92fr) minmax(520px,1.08fr); gap: clamp(54px,7vw,104px); align-items: center; }
.mix-content-hero__copy h1, .mix-materials-copy h1 { max-width: 650px; margin: 24px 0 0; font: 700 clamp(50px,5.4vw,76px)/.96 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.mix-content-hero__copy h1 span { color: var(--content-violet); }
.mix-content-hero__copy > p:not(.mix-content-eyebrow), .mix-materials-copy > p:not(.mix-content-eyebrow) { max-width: 570px; margin: 25px 0 0; color: var(--content-muted); font-size: 18px; line-height: 1.65; }
.mix-content-hero__copy .mix-content-primary, .mix-materials-copy .mix-content-primary { margin-top: 32px; }

.mix-content-map, .mix-materials-board { position: relative; margin: 0; padding: 18px; border: 1px solid rgba(120,57,238,.18); border-radius: 28px; background: rgba(255,255,255,.88); box-shadow: 0 30px 90px rgba(32,25,76,.13); backdrop-filter: blur(18px); }
.mix-content-map::before, .mix-materials-board::before { content: ""; position: absolute; z-index: -1; inset: 12% -8% -9% 18%; border-radius: 50%; background: rgba(120,57,238,.12); filter: blur(42px); }
.mix-content-map__head, .mix-materials-board > header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 14px; border-bottom: 1px solid var(--content-line); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.mix-content-map__head > span i, .mix-materials-board > header span i { width: 7px; height: 7px; display: inline-block; margin-right: 8px; border-radius: 50%; background: #29a468; box-shadow: 0 0 0 5px rgba(41,164,104,.1); }
.mix-content-map__head small { color: var(--content-muted); font: 600 10px/1 "DM Mono", monospace; }
.mix-content-map__line { height: 34px; display: flex; justify-content: center; gap: 46%; }
.mix-content-map__line i { width: 1px; background: linear-gradient(var(--content-line), transparent); }
.mix-content-map__track { min-height: 112px; display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; align-items: center; margin-bottom: 10px; padding: 18px; color: inherit; border: 1px solid var(--content-line); border-radius: 18px; background: #fff; text-decoration: none; transition: transform 180ms ease, border-color 180ms ease; }
.mix-content-map__track:hover { transform: translateY(-2px); border-color: rgba(120,57,238,.45); }
.mix-content-map__index { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--content-violet); background: #f0ebff; font: 700 12px/1 "DM Mono", monospace; }
.mix-content-map__track div { display: grid; gap: 7px; }
.mix-content-map__track div small { color: var(--content-violet); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.mix-content-map__track div strong { font: 650 17px/1.2 "Bricolage Grotesque", Inter, sans-serif; }
.mix-content-map__track em { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; color: #23764d; background: #e9f8f0; font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
.mix-content-map__track em i { width: 6px; height: 6px; border-radius: 50%; background: #29a468; }
.mix-content-map__track.is-preparing { background: #faf9fc; }
.mix-content-map__track.is-preparing em { color: #6b6474; background: #efedf2; }
.mix-content-map figcaption { display: flex; align-items: center; justify-content: center; gap: 13px; padding: 14px 4px 2px; color: var(--content-muted); font: 650 10px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.mix-content-map figcaption i { color: var(--content-violet); font-style: normal; }

.mix-content-categories { padding: 94px 0 116px; }
.mix-content-categories > .mix-content-shell > header { max-width: 780px; }
.mix-content-categories h2 { margin: 18px 0 0; font: 700 clamp(38px,4vw,58px)/1 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.045em; }
.mix-content-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 48px; }
.mix-content-card { min-height: 440px; display: flex; flex-direction: column; padding: 26px; color: inherit; border: 1px solid var(--content-line); border-radius: 26px; background: #fff; text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease; }
.mix-content-card:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(28,24,58,.1); }
.mix-content-card > header { display: flex; align-items: center; justify-content: space-between; }
.mix-content-card > header > span { font: 700 11px/1 "DM Mono", monospace; color: var(--content-muted); }
.mix-content-card > header em { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 999px; color: #23764d; background: #e9f8f0; font-size: 10px; font-style: normal; font-weight: 750; }
.mix-content-card > header em i { width: 6px; height: 6px; border-radius: 50%; background: #29a468; }
.mix-content-card.is-faculty > header em { color: #6b6474; background: #efedf2; }
.mix-content-card > div > small { display: block; margin-top: 52px; color: var(--content-violet); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.mix-content-card h3 { max-width: 500px; margin: 13px 0 0; font: 700 clamp(28px,2.6vw,40px)/1.04 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.035em; }
.mix-content-card > div > p { max-width: 480px; margin: 16px 0 0; color: var(--content-muted); font-size: 15px; line-height: 1.6; }
.mix-content-card__latest { margin-top: 28px; padding: 17px 18px; border-radius: 15px; background: #f7f4ff; }
.mix-content-card__latest small { color: var(--content-violet); font: 700 9px/1.3 "DM Mono", monospace; letter-spacing: .1em; }
.mix-content-card__latest strong { display: block; margin-top: 8px; font: 650 15px/1.25 "Bricolage Grotesque", Inter, sans-serif; }
.mix-content-formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.mix-content-formats span { padding: 9px 11px; border: 1px solid var(--content-line); border-radius: 9px; color: var(--content-muted); font: 650 9px/1 "DM Mono", monospace; letter-spacing: .08em; }
.mix-content-card > strong { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 28px; color: var(--content-violet); font-size: 13px; }

/* Content Hub — comportamento editorial estudado a partir da referência pública,
   implementado localmente com dados e identidade do SOCEO. */
.mix-content-hub { background: #f7f6fb; }
.mix-hub-hero { padding: calc(var(--soceo-nav-height, 96px) + 88px) 0 96px; background: #f7f6fb; }
.mix-hub-hero__heading { display: grid; grid-template-columns: minmax(300px,.8fr) minmax(440px,1.2fr); gap: clamp(48px,9vw,140px); align-items: end; padding: 30px 0 82px; }
.mix-hub-hero__heading h1 { margin: 0; font: 690 clamp(74px,6.6vw,96px)/.76 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.mix-hub-hero__heading h1 span { display: block; color: var(--content-violet); }
.mix-hub-hero__heading p { max-width: 680px; margin: 0 0 4px; color: #3f3d49; font-size: clamp(18px,1.7vw,25px); line-height: 1.42; text-wrap: balance; }

.mix-hub-features { height: 424px; display: flex; gap: 12px; container-type: inline-size; }
.mix-hub-feature { --hub-feature-image: none; position: relative; flex: 0 0 calc((100% - 72px) / 10); min-width: 0; height: 424px; display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 16px 12px 12px; overflow: hidden; isolation: isolate; color: #fff; border-radius: 16px; background: #27213e var(--hub-feature-image) center/cover no-repeat; text-decoration: none; transition: flex-basis 600ms cubic-bezier(.65,.05,.36,1), box-shadow 260ms ease; }
.mix-hub-feature::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(13,9,28,.03) 22%,rgba(13,9,28,.12) 48%,rgba(13,9,28,.88)); }
.mix-hub-feature::after { content: ""; position: absolute; z-index: -2; inset: 0; opacity: .9; background: linear-gradient(145deg,#2c2356,#7839ee 55%,#3439ef); }
.mix-hub-feature.is-insights::after { background: linear-gradient(150deg,#202079,#5339cf 48%,#9c67ff); }
.mix-hub-feature.is-artigos::after { background: linear-gradient(150deg,#18142c,#59308e 52%,#d08aff); }
.mix-hub-feature.is-frameworks::after { background: linear-gradient(150deg,#22203c,#3439ef 48%,#8658e8); }
.mix-hub-feature.is-materiais::after { background: linear-gradient(145deg,#d9d4eb,#7255bd 52%,#271f48); }
.mix-hub-feature.is-ferramentas::after { background: linear-gradient(145deg,#1e2851,#4337a3 52%,#9a67eb); }
.mix-hub-feature.is-faculdade::after { background: linear-gradient(150deg,#19152b,#4e328f 48%,#a77bea); }
.mix-hub-feature.is-materiais { background: linear-gradient(145deg,#d9d4eb,#7255bd 52%,#271f48); }
.mix-hub-feature.is-ferramentas { background: linear-gradient(145deg,#1e2851,#4337a3 52%,#9a67eb); }
.mix-hub-feature.is-faculdade { background: linear-gradient(150deg,#19152b,#4e328f 48%,#a77bea); }
.mix-hub-feature.is-materiais::before { background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(35,24,75,.86)); }
.mix-hub-feature.is-active { flex-basis: calc(4 * (100% - 72px) / 10); box-shadow: 0 24px 54px rgba(43,31,93,.18); }
.mix-hub-feature__type { position: absolute; top: 14px; left: 14px; max-width: calc(100% - 16px); padding: 9px 10px; overflow: hidden; color: #17141e; border-radius: 999px; background: rgba(255,255,255,.88); font-size: 11px; line-height: 1; white-space: nowrap; text-overflow: ellipsis; backdrop-filter: blur(10px); }
.mix-hub-feature.is-faculdade .mix-hub-feature__type { left: 8px; max-width: calc(100% - 16px); padding-inline: 8px; font-size: 10px; }
.mix-hub-feature.is-ferramentas .mix-hub-feature__type { left: 8px; max-width: calc(100% - 16px); padding-inline: 8px; font-size: 10px; }
.mix-hub-feature__brand { position: absolute; top: 24px; right: 22px; opacity: 0; font: 760 23px/1 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.03em; transition: opacity 140ms ease 0ms; }
.mix-hub-feature > strong { width: min(520px,calc(40cqw - 80.8px)); padding-inline: 4px; opacity: 0; font: 660 clamp(28px,3.2vw,48px)/.98 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.035em; text-wrap: balance; transition: opacity 160ms ease; }
.mix-hub-feature__progress { width: 100%; height: 4px; flex: 0 0 4px; overflow: hidden; opacity: 0; border-radius: 999px; background: rgba(255,255,255,.42); transition: opacity 140ms ease 0ms; }
.mix-hub-feature__progress i { width: 100%; height: 100%; display: block; border-radius: inherit; background: rgba(255,255,255,.96); transform: scaleX(0); transform-origin: left center; will-change: transform; }
.mix-hub-feature.is-active .mix-hub-feature__brand, .mix-hub-feature.is-active > strong { opacity: 1; }
.mix-hub-feature.is-active .mix-hub-feature__brand { transition-delay: 260ms; }
.mix-hub-feature.is-active > strong { transform: translateY(0); transition-delay: 260ms, 0ms; }
.mix-hub-feature.is-active .mix-hub-feature__progress { opacity: 1; transition-delay: 320ms; }
.mix-hub-features.is-interacting .mix-hub-feature__progress { opacity: 0; transition-delay: 0ms; }

@media (max-width: 1280px) and (min-width: 1141px) {
  .mix-hub-features { gap: 10px; }
  .mix-hub-feature { flex-basis: calc((100% - 60px) / 10); }
  .mix-hub-feature.is-active { flex-basis: calc(4 * (100% - 60px) / 10); }
  .mix-hub-feature > strong { width: min(520px,calc(40cqw - 76px)); }
}

@media (max-width: 1280px) {
  html.mix-content-hub-route .mix-secretaria-launcher { display: none !important; }
}

@media (max-width: 1140px) {
  .mix-hub-hero { padding: calc(var(--soceo-nav-height,96px) + 42px) 0 72px; }
  .mix-hub-hero__heading { grid-template-columns: 1fr; gap: 34px; padding: 12px 0 54px; }
  .mix-hub-hero__heading h1 { font-size: clamp(48px,15vw,98px); }
  .mix-hub-hero__heading p { max-width: 520px; font-size: 18px; }
  .mix-hub-features { height: auto; display: grid; }
  .mix-hub-feature, .mix-hub-feature.is-active { height: 318px; flex-basis: auto; }
  .mix-hub-feature__brand, .mix-hub-feature > strong { opacity: 1; }
  .mix-hub-feature > strong { width: 100%; transform: none; font-size: 30px; }
  .mix-hub-feature__progress { display: none; }
}

/* Faculdade de CEO — estrutura de catálogo estudada a partir da Devin University,
   com conteúdo, estados e identidade próprios do SOCEO. */
.mix-content-faculty { background: #f5f3f8; }
.mix-faculty-hero { padding: calc(var(--soceo-nav-height, 96px) + 70px) 0 72px; background: #fff; }
.mix-faculty-hero__grid { min-height: 490px; display: grid; grid-template-columns: minmax(0,1fr) minmax(480px,1fr); gap: clamp(54px,7vw,96px); align-items: center; }
.mix-faculty-hero__copy h1 { max-width: 620px; margin: 0; font: 680 clamp(58px,6.2vw,88px)/.92 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.045em; }
.mix-faculty-hero__copy > p { max-width: 580px; margin: 24px 0 0; color: #54505b; font-size: 19px; line-height: 1.52; }
.mix-faculty-primary { min-height: 46px; width: fit-content; display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 0 18px; color: #fff; border-radius: 8px; background: #201435; font-size: 14px; font-weight: 720; text-decoration: none; transition: background 180ms ease, transform 180ms ease; }
.mix-faculty-primary:hover { background: var(--content-violet); transform: translateY(-2px); }
.mix-faculty-primary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mix-faculty-primary--locked { min-height: 48px; color: #68636e; border: 1px solid #d4d0d7; background: #e5e2e7; box-shadow: none; cursor: not-allowed; }
.mix-faculty-primary--locked:hover { color: #68636e; background: #e5e2e7; transform: none; }
.mix-faculty-primary--locked em { padding-left: 10px; border-left: 1px solid #c4bec9; font: 700 10px/1 "DM Mono",monospace; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.mix-faculty-hero__copy > small { display: block; margin-top: 14px; color: #77717e; font-size: 12px; }
.mix-faculty-stats { max-width: 560px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 44px 0 0; }
.mix-faculty-stats > div { min-height: 64px; padding-right: 24px; border-right: 1px solid rgba(21,21,23,.13); }
.mix-faculty-stats > div + div { padding-left: 34px; border-right: 0; }
.mix-faculty-stats dt { font: 680 32px/1 "Bricolage Grotesque",Inter,sans-serif; }
.mix-faculty-stats dd { margin: 10px 0 0; color: #655f6c; font: 700 11px/1 "DM Mono",monospace; letter-spacing: .05em; text-transform: uppercase; }
.mix-faculty-visual { min-height: 342px; display: grid; place-items: center; margin: 0; overflow: hidden; color: #fff; border: 0; border-radius: 2px; background: #0d0913; box-shadow: 0 22px 54px rgba(24,10,43,.18); }
.mix-faculty-visual svg { width: 100%; height: auto; display: block; }
.mix-faculty-visual__architecture { fill: rgba(13,9,19,.42); stroke: rgba(226,216,245,.58); stroke-width: 1.15; }
.mix-faculty-visual__architecture path:last-child { fill: none; stroke: url(#faculty-beam); opacity: .82; }
.mix-faculty-visual__cycle { fill: none; stroke: rgba(196,167,255,.42); stroke-width: 1; stroke-dasharray: 4 7; }
.mix-faculty-visual__nodes circle { fill: #b993ff; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 0 7px rgba(185,147,255,.8)); }
.mix-faculty-visual__label,
.mix-faculty-visual__index { fill: rgba(240,234,247,.64); font: 650 9px/1 "DM Mono",monospace; letter-spacing: .13em; }
.mix-faculty-visual__brand { fill: #fff; font: 700 29px/1 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.04em; }
.mix-faculty-visual__title { fill: #fff; font: 560 16px/1 "DM Mono",monospace; letter-spacing: .04em; text-anchor: middle; }
.mix-faculty-catalog { padding: 76px 0 112px; background: #f5f3f8; border-top: 1px solid rgba(21,21,23,.08); }
.mix-faculty-group + .mix-faculty-group { margin-top: 58px; }
.mix-faculty-group h2 { margin: 0 0 20px; font: 660 clamp(32px,3.1vw,46px)/1 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.035em; }
.mix-faculty-course-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.mix-faculty-course { min-height: 238px; display: flex; flex-direction: column; padding: 22px; color: inherit; border: 1px solid rgba(21,21,23,.11); background: #fff; text-decoration: none; }
.mix-faculty-course.is-preview { border-color: rgba(120,57,238,.28); box-shadow: 0 12px 34px rgba(42,24,72,.07); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mix-faculty-course.is-preview:hover { border-color: #9567e7; box-shadow: 0 18px 44px rgba(42,24,72,.12); transform: translateY(-4px); }
.mix-faculty-course.is-preview header em { color: #625b69; background: #eeeaf1; }
.mix-faculty-course header { min-height: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.mix-faculty-course header span { color: #625b69; font: 650 11px/1.3 "DM Mono",monospace; letter-spacing: .04em; }
.mix-faculty-course header em { padding: 5px 8px; color: #625b69; background: #eeeaf1; font: 650 11px/1 "DM Mono",monospace; font-style: normal; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.mix-faculty-course h3 { margin: 18px 0 0; font: 650 23px/1.08 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.025em; }
.mix-faculty-course > p { margin: 14px 0 0; color: #5f5a64; font-size: 14px; line-height: 1.48; }
.mix-faculty-course footer { margin-top: auto; padding-top: 18px; color: #736c7b; font-size: 12px; }
.mix-faculty-course.is-preview footer { display: flex; align-items: center; justify-content: space-between; color: #5e27c5; font-weight: 750; }
.mix-faculty-course footer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (max-width: 980px) {
  .mix-faculty-hero__grid { grid-template-columns: 1fr; gap: 54px; }
  .mix-faculty-course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .mix-faculty-hero { padding: calc(var(--soceo-nav-height,96px) + 42px) 0 56px; }
  .mix-faculty-hero__grid { min-height: 0; gap: 44px; }
  .mix-faculty-hero__copy h1 { font-size: clamp(52px,16vw,68px); }
  .mix-faculty-hero__copy > p { font-size: 17px; }
  .mix-faculty-stats { margin-top: 36px; }
  .mix-faculty-stats > div + div { padding-left: 24px; }
  .mix-faculty-visual { min-height: 230px; }
  .mix-faculty-visual svg { width: 100%; transform: none; }
  .mix-faculty-catalog { padding: 56px 0 82px; }
  .mix-faculty-group + .mix-faculty-group { margin-top: 46px; }
  .mix-faculty-course-grid { grid-template-columns: 1fr; gap: 14px; }
  .mix-faculty-course { min-height: 218px; padding: 20px; }
}

/* Curso e aula — fluxo completo da Faculdade. */
html.mix-faculty-course-route,
html.mix-faculty-course-route body,
html.mix-faculty-lesson-route,
html.mix-faculty-lesson-route body { background: #f6f4f8 !important; }

.mix-faculty-course-page,
.mix-faculty-lesson-page { color: #18141e; background: #f6f4f8; }
.mix-faculty-back { min-height: 44px; width: fit-content; display: inline-flex; align-items: center; color: #655e6c; font-size: 13px; font-weight: 700; text-decoration: none; }
.mix-faculty-back:hover { color: #6d2ed8; }
.mix-faculty-eyebrow { margin: 0; color: #6f37ce; font: 750 11px/1.4 "DM Mono",monospace; letter-spacing: .08em; text-transform: uppercase; }
.mix-faculty-course-meta,
.mix-faculty-lesson-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: #6c6472; font-size: 13px; font-weight: 700; }
.mix-faculty-course-meta span,
.mix-faculty-lesson-meta span + span { position: relative; }
.mix-faculty-course-meta span::before,
.mix-faculty-lesson-meta span + span::before { content: "·"; position: absolute; left: -11px; color: #a59da9; }

.mix-faculty-course-hero { padding: calc(var(--soceo-nav-height,96px) + 42px) 0 78px; background: #fff; border-bottom: 1px solid rgba(24,20,30,.1); }
.mix-faculty-course-hero__grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.85fr); gap: clamp(56px,7vw,104px); align-items: center; margin-top: 34px; }
.mix-faculty-course-hero h1 { max-width: 720px; margin: 18px 0 0; font: 700 clamp(52px,5.7vw,82px)/.94 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.045em; text-wrap: balance; }
.mix-faculty-course-lede { max-width: 650px; margin: 24px 0 0; color: #5d5763; font-size: 18px; line-height: 1.62; }
.mix-faculty-course-hero .mix-faculty-visual { min-height: 310px; }

.mix-faculty-progress { max-width: 620px; display: grid; gap: 12px; margin-top: 34px; }
.mix-faculty-progress > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.mix-faculty-progress strong { font-size: 13px; }
.mix-faculty-progress span { color: #766f7b; font-size: 12px; }
.mix-faculty-progress__track { height: 6px; overflow: hidden; border-radius: 999px; background: #e6e1e9; }
.mix-faculty-progress__track i { width: 100%; height: 100%; display: block; border-radius: inherit; background: #7839ee; transform: scaleX(0); transform-origin: left center; transition: transform 280ms ease; }

.mix-faculty-outcomes { padding: 80px 0; background: #20172b; color: #fff; }
.mix-faculty-outcomes .mix-content-shell { display: grid; grid-template-columns: minmax(280px,.7fr) minmax(0,1.3fr); gap: 48px 90px; }
.mix-faculty-outcomes h2 { margin: 0; font: 660 clamp(36px,4vw,58px)/.98 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.035em; }
.mix-faculty-outcomes ul { grid-column: 2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; margin: 0; padding: 0; background: rgba(255,255,255,.13); list-style: none; }
.mix-faculty-outcomes li { min-height: 132px; padding: 24px 26px; background: #20172b; color: #ded8e6; font-size: 15px; line-height: 1.58; }
.mix-faculty-outcomes li::before { content: "✓"; display: block; margin-bottom: 14px; color: #b998ff; font-weight: 800; }

.mix-faculty-curriculum { padding: 92px 0 120px; }
.mix-faculty-curriculum__head { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 50px; }
.mix-faculty-curriculum__head h2 { max-width: 750px; margin: 14px 0 0; font: 670 clamp(38px,4vw,58px)/.98 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.035em; }
.mix-faculty-curriculum__head > span { color: #6c6571; font: 700 11px/1 "DM Mono",monospace; letter-spacing: .07em; text-transform: uppercase; }
.mix-faculty-module { display: grid; grid-template-columns: minmax(210px,.52fr) minmax(0,1.48fr); gap: 44px; padding: 36px 0; border-top: 1px solid rgba(24,20,30,.16); }
.mix-faculty-module header h2 { display: flex; gap: 13px; align-items: baseline; margin: 0; font: 650 28px/1.05 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.025em; }
.mix-faculty-module header h2 span { color: #7136d7; font: 750 12px/1 "DM Mono",monospace; }
.mix-faculty-module ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mix-faculty-module li > :is(a,.mix-faculty-lesson-row) { min-height: 82px; display: grid; grid-template-columns: 46px minmax(0,1fr) 30px; gap: 15px; align-items: center; padding: 15px 17px; color: inherit; border: 1px solid rgba(24,20,30,.11); background: #fff; text-decoration: none; }
.mix-faculty-module li a { transition: border-color 160ms ease, transform 160ms ease; }
.mix-faculty-module li a:hover { border-color: #8b52ed; transform: translateX(4px); }
.mix-faculty-lesson-row { cursor: default; }
.mix-faculty-lesson-number { color: #655d69; font: 700 11px/1 "DM Mono",monospace; }
.mix-faculty-lesson-name { display: grid; gap: 6px; }
.mix-faculty-lesson-name strong { font-size: 15px; }
.mix-faculty-lesson-name small { color: #716a76; font-size: 11px; }
.mix-faculty-lesson-state { width: 28px; height: 28px; display: grid; place-items: center; color: #6f37ce; border-radius: 50%; background: #f0e8ff; }
.mix-faculty-lesson-state svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mix-faculty-lesson-row .mix-faculty-lesson-state { color: #7a7480; background: #efedf1; }
.mix-faculty-module a.is-complete .mix-faculty-lesson-state::before { content: "✓"; font-size: 12px; font-weight: 850; }
.mix-faculty-module a.is-complete .mix-faculty-lesson-state svg { display: none; }

.mix-faculty-lesson-page { min-height: 100vh; display: grid; grid-template-columns: 320px minmax(0,1fr); padding-top: var(--soceo-nav-height,96px); }
.mix-faculty-sidebar { height: calc(100vh - var(--soceo-nav-height,96px)); position: sticky; top: var(--soceo-nav-height,96px); overflow-y: auto; padding: 30px 24px 48px; border-right: 1px solid rgba(24,20,30,.12); background: #fff; }
.mix-faculty-sidebar__title { margin: 16px 0 0; font: 660 24px/1.05 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.025em; }
.mix-faculty-sidebar .mix-faculty-progress { margin-top: 24px; }
.mix-faculty-sidebar .mix-faculty-progress > div:first-child { display: grid; gap: 4px; }
.mix-faculty-sidebar nav { display: grid; gap: 28px; margin-top: 34px; }
.mix-faculty-sidebar nav section > p { margin: 0 0 10px; color: #6b646f; font: 750 11px/1.4 "DM Mono",monospace; letter-spacing: .05em; text-transform: uppercase; }
.mix-faculty-sidebar nav section > a { min-height: 44px; display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 10px; align-items: start; padding: 10px 9px; color: #554f5a; border-radius: 6px; font-size: 12px; line-height: 1.35; text-decoration: none; }
.mix-faculty-sidebar nav section > a:hover { color: #5721b8; background: #f5f0fd; }
.mix-faculty-sidebar nav section > a.is-active { color: #35146e; background: #ede3ff; font-weight: 750; }
.mix-faculty-sidebar nav i { width: 10px; height: 10px; margin-top: 3px; border: 1px solid #aaa1b1; border-radius: 50%; }
.mix-faculty-sidebar nav a.is-complete i { display: grid; place-items: center; color: #fff; border-color: #7839ee; background: #7839ee; }
.mix-faculty-sidebar nav a.is-complete i::after { content: "✓"; font-size: 7px; font-style: normal; }
.mix-faculty-sidebar-toggle,
.mix-faculty-sidebar-toggle.soceo-inline-icon-control { display: none; }

.mix-faculty-lesson { min-width: 0; background: #fbfafc; }
.mix-faculty-lesson__inner { width: min(100% - 80px,740px); margin: 0 auto; padding: 58px 0 100px; }
.mix-faculty-lesson-meta { margin-top: 40px; }
.mix-faculty-lesson h1 { max-width: 800px; margin: 18px 0 0; font: 700 clamp(48px,5vw,70px)/.96 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.mix-faculty-lesson__intro { margin: 26px 0 0; color: #5c5661; font-size: 19px; line-height: 1.65; }
.mix-faculty-lesson__body { margin-top: 58px; }
.mix-faculty-lesson__body > section { margin-top: 50px; }
.mix-faculty-lesson__body h2 { margin: 0 0 18px; font: 660 30px/1.08 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.025em; }
.mix-faculty-lesson__body p,
.mix-faculty-lesson__body li { color: #4f4954; font-size: 16px; line-height: 1.75; }
.mix-faculty-lesson__body p { margin: 0 0 18px; }
.mix-faculty-lesson__body ul { display: grid; gap: 10px; margin: 22px 0 0; padding-left: 23px; }
.mix-faculty-callout { display: grid; grid-template-columns: 150px minmax(0,1fr); margin-top: 54px; overflow: hidden; border: 1px solid #d8cce8; background: #fff; }
.mix-faculty-callout strong { display: flex; align-items: center; padding: 24px; color: #fff; background: #2b173f; font-size: 12px; line-height: 1.35; text-transform: uppercase; letter-spacing: .07em; }
.mix-faculty-callout p { display: flex; align-items: center; margin: 0; padding: 24px 28px; color: #403749; background: #f1ebf8; }
.mix-faculty-steps { display: grid; gap: 12px; padding: 0; counter-reset: faculty-step; list-style: none; }
.mix-faculty-steps li { min-height: 66px; position: relative; padding: 18px 18px 18px 62px; border: 1px solid rgba(24,20,30,.12); background: #fff; }
.mix-faculty-steps li::before { counter-increment: faculty-step; content: counter(faculty-step); width: 28px; height: 28px; position: absolute; top: 16px; left: 17px; display: grid; place-items: center; color: #fff; border-radius: 50%; background: #28163e; font: 750 10px/1 "DM Mono",monospace; }

.mix-faculty-quiz { display: grid; gap: 16px; margin-top: 12px; }
.mix-faculty-quiz fieldset { margin: 0; padding: 24px; border: 1px solid rgba(24,20,30,.13); background: #fff; }
.mix-faculty-quiz legend { display: flex; gap: 12px; padding: 0 8px; font-weight: 750; line-height: 1.4; }
.mix-faculty-quiz legend span { color: #7435df; font: 750 12px/1.4 "DM Mono",monospace; }
.mix-faculty-quiz label { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 13px; border: 1px solid rgba(24,20,30,.11); cursor: pointer; }
.mix-faculty-quiz label:has(input:checked) { border-color: #7839ee; background: #f4effd; }
.mix-faculty-quiz input { margin-top: 3px; accent-color: #7839ee; }
.mix-faculty-quiz__feedback { min-height: 24px; margin: 12px 0 0 !important; color: #9b2f3f !important; font-size: 13px !important; }
.mix-faculty-quiz__feedback.is-correct { color: #197349 !important; }
.mix-faculty-quiz button,
.mix-faculty-lesson footer button { min-height: 48px; width: fit-content; padding: 0 20px; color: #fff; border: 0; border-radius: 7px; background: #26153b; font-size: 13px; font-weight: 750; cursor: pointer; }
.mix-faculty-quiz button:hover,
.mix-faculty-lesson footer button:hover { background: #6d2ed8; }
.mix-faculty-lesson footer button:disabled { color: #85808a; background: #ded9e2; cursor: not-allowed; }
.mix-faculty-quiz__result { min-height: 24px; font-size: 14px !important; }
.mix-faculty-lesson footer { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-top: 78px; padding-top: 28px; border-top: 1px solid rgba(24,20,30,.14); }
.mix-faculty-lesson footer a { min-height: 44px; max-width: 50%; display: inline-flex; align-items: center; color: #645d69; font-size: 13px; font-weight: 700; text-decoration: none; }

.mix-faculty-unavailable { min-height: 80vh; padding: calc(var(--soceo-nav-height,96px) + 80px) 0 120px; background: #f6f4f8; }
.mix-faculty-unavailable h1 { max-width: 760px; margin: 18px 0 0; font: 700 clamp(48px,6vw,78px)/.95 "Bricolage Grotesque",Inter,sans-serif; letter-spacing: -.04em; }
.mix-faculty-unavailable > div > p:not(.mix-faculty-eyebrow) { color: #625b68; font-size: 17px; }

@media (max-width: 980px) {
  .mix-faculty-course-hero__grid { grid-template-columns: 1fr; }
  .mix-faculty-course-hero .mix-faculty-visual { display: none; }
  .mix-faculty-outcomes .mix-content-shell { grid-template-columns: 1fr; gap: 22px; }
  .mix-faculty-outcomes ul { grid-column: 1; margin-top: 10px; }
  .mix-faculty-module { grid-template-columns: 1fr; gap: 20px; }
  .mix-faculty-lesson-page { display: block; }
  .mix-faculty-sidebar-toggle,
  .mix-faculty-sidebar-toggle.soceo-inline-icon-control { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; position: sticky; z-index: 7; top: var(--soceo-nav-height,96px); padding: 0 24px; color: #2d2435; border: 0; border-bottom: 1px solid rgba(24,20,30,.12); background: #fff; font-size: 13px; font-weight: 750; }
  .mix-faculty-sidebar { width: 100%; height: auto; max-height: calc(100vh - var(--soceo-nav-height,96px) - 52px); display: none; position: fixed; z-index: 6; top: calc(var(--soceo-nav-height,96px) + 52px); overflow-y: auto; border-right: 0; border-bottom: 1px solid rgba(24,20,30,.14); box-shadow: 0 16px 28px rgba(24,20,30,.12); }
  .mix-faculty-sidebar.is-open { display: block; }
}

@media (max-width: 620px) {
  html.mix-content-faculty-route .mix-secretaria-launcher,
  html.mix-blog-route .mix-secretaria-launcher { display: none !important; }
  .mix-faculty-course-hero { padding: calc(var(--soceo-nav-height,96px) + 26px) 0 62px; }
  .mix-faculty-course-hero__grid { margin-top: 26px; }
  .mix-faculty-course-hero h1 { font-size: clamp(45px,13vw,60px); }
  .mix-faculty-course-lede { font-size: 16px; }
  .mix-faculty-progress > div:first-child { display: grid; gap: 5px; }
  .mix-faculty-outcomes { padding: 62px 0; }
  .mix-faculty-outcomes ul { grid-template-columns: 1fr; }
  .mix-faculty-outcomes li { min-height: 0; }
  .mix-faculty-curriculum { padding: 66px 0 88px; }
  .mix-faculty-curriculum__head { display: grid; }
  .mix-faculty-module li a { grid-template-columns: 34px minmax(0,1fr) 28px; padding: 14px 12px; }
  .mix-faculty-lesson-page { padding-top: var(--soceo-nav-height,96px); }
  .mix-faculty-sidebar-toggle { padding: 0 18px; }
  .mix-faculty-lesson__inner { width: min(100% - 36px,820px); padding: 38px 0 82px; }
  .mix-faculty-lesson-meta { margin-top: 30px; }
  .mix-faculty-lesson h1 { font-size: clamp(42px,12.5vw,56px); }
  .mix-faculty-lesson__intro { font-size: 17px; }
  .mix-faculty-lesson__body { margin-top: 46px; }
  .mix-faculty-lesson__body h2 { font-size: 27px; }
  .mix-faculty-lesson__body p,
  .mix-faculty-lesson__body li { font-size: 15px; }
  .mix-faculty-callout { grid-template-columns: 1fr; }
  .mix-faculty-callout strong { min-height: 48px; padding: 14px 18px; }
  .mix-faculty-callout p { padding: 20px 18px; }
  .mix-faculty-quiz fieldset { padding: 19px 14px; }
  .mix-faculty-lesson footer { align-items: stretch; flex-direction: column; }
  .mix-faculty-lesson footer a { max-width: none; }
  .mix-faculty-lesson footer button { width: 100%; }
}

.mix-materials-grid { min-height: 570px; }
.mix-materials-copy nav { display: flex; gap: 9px; margin-bottom: 50px; color: var(--content-muted); font-size: 12px; }
.mix-materials-copy nav a { color: var(--content-muted); text-decoration: none; }
.mix-materials-status { width: fit-content; min-height: 34px; display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0 13px; border-radius: 999px; color: #6b6474; background: #efedf2; font-size: 11px; font-weight: 750; }
.mix-materials-status i { width: 7px; height: 7px; border-radius: 50%; background: #8b8294; }
.mix-materials-copy h1 { margin-top: 19px; font-size: clamp(46px,5vw,70px); }
.mix-materials-board { padding: 20px; }
.mix-materials-board > header em { padding: 8px 11px; border-radius: 999px; color: #6b6474; background: #efedf2; font-size: 9px; font-style: normal; letter-spacing: 0; }
.mix-materials-board__item { min-height: 100px; display: grid; grid-template-columns: 44px 1fr 12px; gap: 16px; align-items: center; margin-top: 12px; padding: 16px; border: 1px solid var(--content-line); border-radius: 17px; background: #fff; }
.mix-materials-board__item > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--content-violet); background: #f0ebff; font: 700 11px/1 "DM Mono", monospace; }
.mix-materials-board__item div { display: grid; gap: 6px; }
.mix-materials-board__item small { color: var(--content-violet); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.mix-materials-board__item strong { font: 650 16px/1.2 "Bricolage Grotesque", Inter, sans-serif; }
.mix-materials-board__item > i { width: 9px; height: 9px; border: 2px solid #bdb6c5; border-radius: 50%; }
.mix-materials-board figcaption { margin: 18px 4px 2px; padding: 16px 4px 0; color: var(--content-muted); border-top: 1px solid var(--content-line); font-size: 12px; line-height: 1.5; }

.mix-materials-finder { padding: calc(var(--soceo-nav-height, 96px) + 76px) 0 116px; background: radial-gradient(circle at 78% 8%, rgba(120,57,238,.1), transparent 28%), linear-gradient(rgba(21,21,23,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(21,21,23,.03) 1px, transparent 1px), #fff; background-size: auto, 48px 48px, 48px 48px, auto; }
.mix-materials-section-head { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 72px; align-items: end; }
.mix-materials-section-head h2, .mix-materials-faq h2 { max-width: 760px; margin: 16px 0 0; font: 700 clamp(40px,4.3vw,62px)/.98 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.047em; text-wrap: balance; }
.mix-materials-section-head > p { max-width: 420px; margin: 0 0 5px; color: var(--content-muted); font-size: 16px; line-height: 1.65; }
.mix-materials-finder__layout { display: grid; grid-template-columns: 258px minmax(0,1fr); gap: 32px; align-items: start; margin-top: 54px; }
.mix-materials-filters { position: sticky; top: 116px; padding: 22px; border: 1px solid var(--content-line); border-radius: 22px; background: #f7f6f9; }
.mix-materials-filter-group { display: grid; gap: 4px; }
.mix-materials-filter-group > strong, .mix-materials-topic > span { margin-bottom: 10px; color: var(--content-muted); font: 750 10px/1 "DM Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.mix-materials-filter-group button { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 13px; color: #34333a; border: 0; border-radius: 11px; background: transparent; font: 650 13px/1 Inter, sans-serif; cursor: pointer; }
.mix-materials-filter-group button em { min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #77717e; background: #e9e6ed; font: 700 10px/1 "DM Mono", monospace; font-style: normal; }
.mix-materials-filter-group button:hover { background: #eeebf3; }
.mix-materials-filter-group button.is-active { color: #fff; background: #19181d; }
.mix-materials-filter-group button.is-active em { color: #fff; background: rgba(255,255,255,.16); }
.mix-materials-topic { display: grid; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--content-line); }
.mix-materials-topic select { width: 100%; height: 44px; padding: 0 38px 0 12px; color: var(--content-ink); border: 1px solid var(--content-line); border-radius: 11px; background: #fff; font: 600 13px/1 Inter, sans-serif; }
.mix-materials-clear { margin-top: 19px; padding: 0; color: var(--content-violet); border: 0; background: transparent; font: 700 12px/1.3 Inter, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.mix-materials-results { min-width: 0; }
.mix-materials-results__bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.mix-materials-results__bar p { margin: 0; color: var(--content-muted); font-size: 14px; }
.mix-materials-results__bar p strong { color: var(--content-ink); }
.mix-materials-results__bar label { width: min(290px,100%); height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--content-line); border-radius: 999px; background: #fff; }
.mix-materials-results__bar label:focus-within { border-color: rgba(120,57,238,.58); box-shadow: 0 0 0 4px rgba(120,57,238,.09); }
.mix-materials-results__bar svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: #77717e; stroke-width: 1.6; stroke-linecap: round; }
.mix-materials-results__bar input { width: 100%; height: 42px; padding: 0; color: var(--content-ink); border: 0; outline: 0; background: transparent; font: 600 13px/1 Inter, sans-serif; }
.mix-materials-grid-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.mix-material-card { min-height: 320px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--content-line); border-radius: 20px; background: #fdfdfb; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.mix-material-card:hover { transform: translateY(-3px); border-color: rgba(120,57,238,.34); box-shadow: 0 18px 42px rgba(31,25,59,.08); }
.mix-material-card > header { display: flex; align-items: center; justify-content: space-between; }
.mix-material-card > header > span { color: #8d8792; font: 700 11px/1 "DM Mono", monospace; }
.mix-material-card > header em { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; color: #6b6474; border-radius: 999px; background: #efedf2; font-size: 9px; font-style: normal; font-weight: 750; }
.mix-material-card > header em i { width: 6px; height: 6px; border-radius: 50%; background: #938a9d; }
.mix-material-card__type { width: fit-content; margin-top: 38px; padding: 8px 10px; color: var(--content-violet); border-radius: 8px; background: #f0ebff; font: 750 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.mix-material-card h3 { margin: 16px 0 0; font: 700 clamp(24px,2vw,31px)/1.04 "Bricolage Grotesque", Inter, sans-serif; letter-spacing: -.032em; }
.mix-material-card > p { margin: 14px 0 0; color: var(--content-muted); font-size: 14px; line-height: 1.58; }
.mix-material-card > footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 24px; color: #7b7581; border-top: 1px solid var(--content-line); font: 700 9px/1 "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.mix-material-card > footer strong { color: var(--content-violet); font-size: 9px; }
.mix-materials-empty { min-height: 320px; padding: 72px 24px; text-align: center; border: 1px dashed rgba(120,57,238,.35); border-radius: 20px; background: #faf8ff; }
.mix-materials-empty > strong { font: 700 26px/1.1 "Bricolage Grotesque", Inter, sans-serif; }
.mix-materials-empty > p { color: var(--content-muted); }
.mix-materials-empty > button { color: var(--content-violet); border: 0; background: transparent; font-weight: 750; text-decoration: underline; cursor: pointer; }

.mix-materials-faq { padding: 116px 0 128px; background: #f3f1f6; }
.mix-materials-faq__shell { display: grid; grid-template-columns: minmax(290px,.72fr) minmax(0,1.28fr); gap: clamp(60px,8vw,120px); align-items: start; }
.mix-materials-faq__shell > header { position: sticky; top: 124px; }
.mix-materials-faq__shell > header > p:last-child { max-width: 430px; margin: 22px 0 0; color: var(--content-muted); font-size: 15px; line-height: 1.65; }
.mix-materials-faq__list { border-top: 1px solid rgba(21,21,23,.2); }
.mix-materials-faq__item { border-bottom: 1px solid rgba(21,21,23,.2); }
.mix-materials-faq__item h3 { margin: 0; }
.mix-materials-faq__item h3 button { width: 100%; min-height: 88px; display: grid; grid-template-columns: 1fr 28px; gap: 24px; align-items: center; padding: 20px 2px; color: var(--content-ink); border: 0; background: transparent; text-align: left; font: 650 17px/1.35 Inter, sans-serif; cursor: pointer; }
.mix-materials-faq__item h3 button:hover { color: var(--content-violet); }
.mix-materials-faq__item h3 i { width: 26px; height: 26px; position: relative; border-radius: 50%; background: #19181d; }
.mix-materials-faq__item h3 i::before, .mix-materials-faq__item h3 i::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 10px; height: 1.5px; background: #fff; transform: translate(-50%,-50%); }
.mix-materials-faq__item h3 i::after { transform: translate(-50%,-50%) rotate(90deg); transition: transform 180ms ease; }
.mix-materials-faq__item h3 button[aria-expanded="true"] { color: var(--content-violet); }
.mix-materials-faq__item h3 button[aria-expanded="true"] i { background: var(--content-violet); }
.mix-materials-faq__item h3 button[aria-expanded="true"] i::after { transform: translate(-50%,-50%) rotate(0); }
.mix-materials-faq__answer p { max-width: 660px; margin: -4px 42px 26px 2px; color: var(--content-muted); font-size: 15px; line-height: 1.7; }

@media (max-width: 980px) {
  .mix-content-hero__grid, .mix-materials-grid { grid-template-columns: 1fr; gap: 54px; }
  .mix-content-hero__grid { padding-top: 44px; }
  .mix-materials-grid { padding-top: 44px; padding-bottom: 30px; }
  .mix-content-category-grid { grid-template-columns: 1fr; }
  .mix-materials-section-head { grid-template-columns: 1fr; gap: 20px; }
  .mix-materials-finder__layout { grid-template-columns: 220px minmax(0,1fr); }
  .mix-materials-grid-list { grid-template-columns: 1fr; }
  .mix-materials-faq__shell { grid-template-columns: 1fr; gap: 48px; }
  .mix-materials-faq__shell > header { position: static; }
}

@media (max-width: 620px) {
  .mix-content-shell { width: min(100% - 32px, 1240px); }
  .mix-content-hero, .mix-materials-hero { padding-top: calc(var(--soceo-nav-height, 96px) + 34px); padding-bottom: 50px; background-size: auto, auto, 32px 32px, 32px 32px; }
  .mix-content-hero__grid, .mix-materials-grid { min-height: 0; gap: 40px; }
  .mix-content-hero__copy h1, .mix-materials-copy h1 { font-size: clamp(42px,13vw,56px); }
  .mix-content-hero__copy > p:not(.mix-content-eyebrow), .mix-materials-copy > p:not(.mix-content-eyebrow) { font-size: 16px; }
  .mix-content-map, .mix-materials-board { padding: 12px; border-radius: 22px; }
  .mix-content-map__track { grid-template-columns: 38px 1fr; padding: 14px; }
  .mix-content-map__track em { grid-column: 2; width: fit-content; }
  .mix-content-map figcaption { gap: 8px; font-size: 8px; }
  .mix-content-categories { padding: 68px 0 84px; }
  .mix-content-category-grid { margin-top: 32px; }
  .mix-content-card { min-height: 430px; padding: 22px; }
  .mix-materials-copy nav { margin-bottom: 34px; }
  .mix-materials-finder { padding: calc(var(--soceo-nav-height, 96px) + 46px) 0 84px; background-size: auto, 32px 32px, 32px 32px, auto; }
  .mix-materials-finder__layout { grid-template-columns: 1fr; margin-top: 38px; }
  .mix-materials-filters { position: static; padding: 17px; }
  .mix-materials-filter-group { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mix-materials-filter-group > strong { grid-column: 1 / -1; }
  .mix-materials-results__bar { align-items: stretch; flex-direction: column; }
  .mix-materials-results__bar label { width: 100%; }
  .mix-material-card { min-height: 290px; padding: 20px; }
  .mix-materials-faq { padding: 82px 0 94px; }
  .mix-materials-faq__item h3 button { min-height: 78px; gap: 14px; font-size: 15px; }
  .mix-materials-faq__answer p { margin-right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-content-primary, .mix-content-map__track, .mix-content-card, .mix-material-card, .mix-materials-faq__item h3 i::after, .mix-hub-feature, .mix-hub-feature > strong, .mix-hub-feature__progress { transition: none; }
}

/* Newsletter — o painel editorial aprovado volta a ser o hero principal. */
html.mix-content-newsletter-route,
html.mix-content-newsletter-route body {
  background: #f7f6fb !important;
}

.mix-content-newsletter {
  --newsletter-ink: #17131f;
  --newsletter-muted: #625d68;
  --newsletter-violet: #7839ee;
  background: #f7f6fb;
}

.mix-newsletter-hero {
  padding: calc(var(--soceo-nav-height, 96px) + 52px) 0 76px;
  background: #f7f6fb;
}

.mix-newsletter-card {
  min-height: 480px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(400px, .92fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: center;
  padding: 48px;
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(145deg, #2c2356, #7839ee 55%, #3439ef);
  box-shadow: 0 24px 54px rgba(43, 31, 93, .18);
}

.mix-newsletter-card::before,
.mix-newsletter-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.mix-newsletter-card::before {
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, #000, transparent 73%);
}

.mix-newsletter-card::after {
  width: 540px;
  height: 540px;
  top: -290px;
  left: 24%;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  box-shadow:
    0 0 0 74px rgba(255, 255, 255, .035),
    0 0 0 148px rgba(255, 255, 255, .025);
}

.mix-newsletter-card__type {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 9px 11px;
  color: #17141e;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-size: 12px;
  line-height: 1;
  backdrop-filter: blur(10px);
}

.mix-newsletter-card__copy {
  min-width: 0;
  align-self: end;
  padding: 72px 0 6px;
}

.mix-newsletter-card__copy > p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font: 720 11px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: .12em;
}

.mix-newsletter-card__copy h1 {
  max-width: 590px;
  margin: 18px 0 0;
  color: #fff;
  font: 680 clamp(46px, 4.9vw, 70px)/.9 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.mix-newsletter-card__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 30px;
}

.mix-newsletter-card__topics span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  color: rgba(255, 255, 255, .88);
  background: rgba(24, 14, 50, .16);
  font-size: 11px;
  line-height: 1;
}

.mix-newsletter-form-card {
  position: relative;
  z-index: 1;
  padding: 29px 30px 27px;
  color: var(--newsletter-ink);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 22px 50px rgba(26, 12, 62, .25);
}

.mix-newsletter-form-card__index {
  margin: 0;
  color: var(--newsletter-violet);
  font: 720 11px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: .12em;
}

.mix-newsletter-form-card h2 {
  margin: 15px 0 0;
  color: var(--newsletter-ink);
  font: 690 clamp(30px, 3vw, 40px)/.98 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.035em;
}

.mix-newsletter-form-card__intro {
  margin: 11px 0 0;
  color: #625d68;
  font-size: 13px;
  line-height: 1.45;
}

.mix-newsletter-form-card form {
  display: grid;
  gap: 14px;
  margin-top: 21px;
}

.mix-newsletter-field { display: grid; gap: 7px; }

.mix-newsletter-field label {
  color: #39343d;
  font-size: 12px;
  font-weight: 720;
}

.mix-newsletter-field input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  color: var(--newsletter-ink);
  border: 1px solid #aaa4af;
  border-radius: 8px;
  background: #fff;
  font: 540 16px/1 Inter, sans-serif;
}

.mix-newsletter-field input::placeholder { color: #8e8794; }
.mix-newsletter-field input:focus { border-color: var(--newsletter-violet); outline: 3px solid rgba(120, 57, 238, .14); outline-offset: 1px; }
.mix-newsletter-field p { margin: 0; color: #6f6875; font-size: 12px; line-height: 1.4; }

.mix-newsletter-consent {
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #554f5b;
  font-size: 12px;
  line-height: 1.42;
  cursor: pointer;
}

.mix-newsletter-consent input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--newsletter-violet);
}

.mix-newsletter-consent a { color: var(--newsletter-violet); text-underline-offset: 2px; }

.mix-newsletter-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mix-newsletter-form-card button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  color: #fff;
  border: 0;
  border-radius: 8px;
  background: #21172f;
  font: 730 13px/1 Inter, sans-serif;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.mix-newsletter-form-card button:hover { background: var(--newsletter-violet); transform: translateY(-1px); }
.mix-newsletter-form-card button:disabled { cursor: wait; opacity: .72; transform: none; }
.mix-newsletter-form-card button span { font-size: 18px; font-weight: 400; }

.mix-newsletter-form-status {
  min-height: 0;
  margin: 0;
  color: #655e6a;
  font-size: 11px;
  line-height: 1.4;
}

.mix-newsletter-form-status:empty { display: none; }

.mix-newsletter-benefits {
  padding: 96px 0 104px;
  background: #fff;
}

.mix-newsletter-benefits header {
  max-width: 790px;
  margin: 0 auto 54px;
  text-align: center;
}

.mix-newsletter-benefits h2 {
  margin: 0;
  color: var(--newsletter-ink);
  font: 690 clamp(40px, 4.4vw, 54px)/1.02 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mix-newsletter-benefits header > span {
  max-width: 660px;
  display: block;
  margin: 20px auto 0;
  color: var(--newsletter-muted);
  font-size: 20px;
  line-height: 1.48;
}

.mix-newsletter-benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mix-newsletter-benefits__grid article {
  min-height: 246px;
  padding: 30px;
  border: 1px solid #e7e2ec;
  border-radius: 20px;
  background: #f8f6fb;
}

.mix-newsletter-benefit__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.mix-newsletter-benefit__icon svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mix-newsletter-benefit__icon.is-insight { color: #e35b42; }
.mix-newsletter-benefit__icon.is-curation { color: #8b3ff0; }
.mix-newsletter-benefit__icon.is-invite { color: #353fd4; }

.mix-newsletter-benefits__grid h3 {
  margin: 24px 0 0;
  color: var(--newsletter-ink);
  font: 680 28px/1.05 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.025em;
}

.mix-newsletter-benefits__grid article p {
  margin: 14px 0 0;
  color: var(--newsletter-muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 1140px) {
  .mix-newsletter-hero { padding: calc(var(--soceo-nav-height, 96px) + 42px) 0 72px; }
  .mix-newsletter-card { min-height: 0; grid-template-columns: 1fr; gap: 34px; padding: 58px 28px 28px; }
  .mix-newsletter-card__copy { align-self: auto; padding: 34px 0 0; }
  .mix-newsletter-card__copy h1 { font-size: clamp(44px, 8vw, 62px); }
  .mix-newsletter-form-card { width: min(100%, 620px); }
  .mix-newsletter-benefits__grid { grid-template-columns: 1fr; }
  .mix-newsletter-benefits__grid article { min-height: 220px; }
}

@media (max-width: 620px) {
  html.mix-content-newsletter-route .mix-secretaria-launcher { display: none !important; }
  .mix-newsletter-hero { padding-top: calc(var(--soceo-nav-height, 96px) + 28px); padding-bottom: 36px; }
  .mix-newsletter-card { gap: 27px; padding: 54px 16px 16px; border-radius: 16px; }
  .mix-newsletter-form-card { width: 100%; grid-row: 1; margin-top: 28px; padding: 25px 20px 22px; border-radius: 8px; }
  .mix-newsletter-card__copy { grid-row: 2; padding: 20px 4px 8px; }
  .mix-newsletter-card__copy h1 { font-size: clamp(39px, 12vw, 50px); }
  .mix-newsletter-card__topics { gap: 6px; margin-top: 24px; }
  .mix-newsletter-card__topics span { font-size: 10px; }
  .mix-newsletter-form-card h2 { font-size: 34px; }
  .mix-newsletter-benefits { padding: 72px 0 80px; }
  .mix-newsletter-benefits header { margin-bottom: 38px; }
  .mix-newsletter-benefits h2 { font-size: 38px; }
  .mix-newsletter-benefits header > span { font-size: 17px; }
  .mix-newsletter-benefits__grid { gap: 12px; }
  .mix-newsletter-benefits__grid article { min-height: 220px; padding: 24px; border-radius: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-newsletter-form-card button { transition: none; }
}

/* Catálogo de Materiais aprovado — abre direto após o header global. */
.mix-content-materials {
  --materials-navy: #151426;
  --materials-paper: #f3efff;
  --materials-indigo: #30239b;
  --materials-violet: #7338e8;
}

.mix-content-materials .mix-materials-finder {
  padding: calc(var(--soceo-nav-height, 96px) + 58px) 0 112px;
  background: #fff;
}

.mix-content-materials .mix-materials-section-head {
  max-width: 840px;
  display: block;
  margin-inline: auto;
  text-align: center;
}

.mix-content-materials .mix-materials-section-head h1 {
  margin: 0;
  font: 700 clamp(42px, 5vw, 68px)/.98 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mix-content-materials .mix-materials-section-head > p {
  max-width: 720px;
  margin: 20px auto 0;
  color: var(--content-muted);
  font-size: 17px;
  line-height: 1.6;
}

.mix-content-materials .mix-materials-finder__layout {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 36px;
  margin-top: 62px;
}

.mix-content-materials .mix-materials-filters {
  top: calc(var(--soceo-nav-height, 96px) + 22px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.mix-content-materials .mix-materials-filter-group {
  gap: 0;
}

.mix-content-materials .mix-materials-filter-group + .mix-materials-filter-group {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--content-line);
}

.mix-content-materials .mix-materials-filter-group > strong {
  margin-bottom: 12px;
  color: var(--content-ink);
}

.mix-content-materials .mix-materials-filter-group button {
  padding-inline: 9px;
  border-bottom: 1px solid rgba(21, 21, 23, .08);
  border-radius: 0;
}

.mix-content-materials .mix-materials-filter-group button:last-child {
  border-bottom: 0;
}

.mix-content-materials .mix-materials-filter-group button:hover {
  color: var(--content-violet);
  background: #f7f4ff;
}

.mix-content-materials .mix-materials-filter-group button.is-active {
  color: var(--content-violet);
  background: transparent;
}

.mix-content-materials .mix-materials-filter-group button.is-active em {
  color: #fff;
  background: var(--content-violet);
}

.mix-materials-topic-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5c5663;
  cursor: pointer;
}

.mix-materials-topic-option input {
  width: 1px;
  height: 1px;
  position: absolute;
  opacity: 0;
}

.mix-materials-topic-option > span {
  width: 16px;
  height: 16px;
  position: relative;
  flex: 0 0 auto;
  border: 1px solid #a69dac;
  border-radius: 4px;
  background: #fff;
}

.mix-materials-topic-option input:checked + span {
  border-color: var(--content-violet);
  background: var(--content-violet);
}

.mix-materials-topic-option input:checked + span::after {
  content: "";
  width: 7px;
  height: 4px;
  position: absolute;
  top: 4px;
  left: 4px;
  border-bottom: 1.5px solid #fff;
  border-left: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.mix-materials-topic-option input:focus-visible + span {
  outline: 3px solid rgba(120, 57, 238, .28);
  outline-offset: 3px;
}

.mix-materials-topic-option b {
  font-size: 13px;
  font-weight: 550;
}

.mix-content-materials .mix-materials-results__bar {
  margin: -8px 0 22px;
}

.mix-content-materials .mix-materials-results__bar label {
  border-radius: 12px;
}

.mix-content-materials .mix-materials-grid-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 16px;
}

.mix-content-materials .mix-material-card {
  min-height: 0;
  display: block;
  padding: 0;
  color: var(--content-ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  box-shadow: none;
}

.mix-content-materials .mix-material-card[hidden] { display: none; }

.mix-content-materials .mix-material-card:hover {
  border-color: transparent;
  box-shadow: none;
  transform: translateY(-4px);
}

.mix-material-card__cover {
  aspect-ratio: 1.42;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  overflow: hidden;
  color: #fff;
  border-radius: 3px;
  background: var(--materials-navy);
}

.mix-material-card__cover::before,
.mix-material-card__cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.mix-material-card__cover::before {
  width: 150px;
  height: 150px;
  top: -76px;
  right: -58px;
  border: 1px solid rgba(177, 145, 255, .32);
  border-radius: 50%;
}

.mix-material-card__cover::after {
  inset: auto 20px 20px;
  height: 1px;
  background: currentColor;
  opacity: .22;
}

.mix-material-card__cover--paper {
  color: #24124b;
  background: var(--materials-paper);
}

.mix-material-card__cover--indigo { background: var(--materials-indigo); }
.mix-material-card__cover--violet { background: var(--materials-violet); }

.mix-material-card__format {
  width: fit-content;
  position: relative;
  z-index: 1;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font: 700 8px/1 "DM Mono", monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .82;
}

.mix-material-card__cover > strong {
  max-width: 92%;
  position: relative;
  z-index: 1;
  padding-bottom: 15px;
  font: 650 clamp(18px, 1.5vw, 24px)/1.02 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.03em;
}

.mix-material-card__meta {
  display: grid;
  padding: 16px 3px 0;
}

.mix-material-card__topic {
  width: fit-content;
  padding: 4px 7px;
  color: var(--content-violet);
  border: 1px solid rgba(120, 57, 238, .5);
  border-radius: 5px;
  font: 700 8px/1 "DM Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.mix-material-card__meta > strong {
  margin-top: 11px;
  font: 650 21px/1.04 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.025em;
}

.mix-material-card__meta > span:last-child {
  margin-top: 9px;
  color: var(--content-muted);
  font-size: 13px;
  line-height: 1.52;
}

.mix-content-materials .mix-materials-faq {
  padding: 92px 0 104px;
}

.mix-content-materials .mix-materials-faq h2 {
  margin-top: 0;
}

.mix-materials-blog-cta {
  color: #fff;
  background: #151426;
}

.mix-materials-blog-cta .mix-content-shell {
  max-width: 820px;
  padding: clamp(68px, 8vw, 108px) 0;
  text-align: center;
}

.mix-materials-blog-cta p {
  margin: 0;
  color: #b99aff;
  font: 700 10px/1 "DM Mono", monospace;
  letter-spacing: .13em;
}

.mix-materials-blog-cta h2 {
  margin: 18px 0 0;
  font: 700 clamp(34px, 4.2vw, 56px)/1 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.mix-materials-blog-cta a {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 0 24px;
  color: #151426;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.mix-materials-blog-cta a:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .24);
}

@media (max-width: 1100px) {
  .mix-content-materials .mix-materials-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .mix-content-materials .mix-materials-finder { padding-top: calc(var(--soceo-nav-height, 96px) + 40px); }
  .mix-content-materials .mix-materials-section-head h1 { font-size: clamp(38px, 12vw, 52px); }
  .mix-content-materials .mix-materials-section-head > p { font-size: 15px; }
  .mix-content-materials .mix-materials-finder__layout { grid-template-columns: 1fr; gap: 34px; margin-top: 44px; }
  .mix-content-materials .mix-materials-filters { position: static; padding: 18px; border: 1px solid var(--content-line); border-radius: 16px; background: #faf9fb; }
  .mix-content-materials .mix-materials-filter-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mix-content-materials .mix-materials-filter-group > strong { grid-column: 1 / -1; }
  .mix-content-materials .mix-materials-grid-list { grid-template-columns: 1fr; gap: 32px; }
  .mix-material-card__cover > strong { font-size: 24px; }
  .mix-materials-blog-cta .mix-content-shell { width: min(100% - 32px, 820px); }
}

/* Página individual de Materiais — extensão do catálogo aprovado. */
html.mix-material-detail-route,
html.mix-material-detail-route body {
  background: #f7f5fa !important;
}

.mix-material-detail-page {
  --detail-ink: #151426;
  --detail-muted: #625e6c;
  --detail-violet: #7338e8;
  --detail-line: rgba(21, 20, 38, .14);
  background: #f7f5fa;
}

.mix-material-detail__hero {
  padding: calc(var(--soceo-nav-height, 96px) + 68px) 0 92px;
  background:
    radial-gradient(circle at 12% 14%, rgba(115, 56, 232, .1), transparent 26%),
    linear-gradient(180deg, #fff 0%, #f7f5fa 100%);
}

.mix-material-detail__hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(390px, .8fr);
  gap: clamp(48px, 7vw, 100px);
  align-items: start;
}

.mix-material-detail__copy { min-width: 0; }

.mix-material-detail__back {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--detail-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mix-material-detail__back > span { transform: rotate(180deg); }
.mix-material-detail__back:hover { color: var(--detail-violet); }

.mix-material-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.mix-material-detail__tags span {
  padding: 7px 10px;
  color: var(--detail-violet);
  border: 1px solid rgba(115, 56, 232, .32);
  border-radius: 7px;
  background: #fff;
  font: 700 11px/1 "DM Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-material-detail__copy h1 {
  max-width: 780px;
  margin: 23px 0 0;
  color: var(--detail-ink);
  font: 700 clamp(48px, 5.4vw, 76px)/.96 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mix-material-detail__lede {
  max-width: 68ch;
  margin: 26px 0 0;
  color: var(--detail-muted);
  font-size: 18px;
  line-height: 1.65;
}

.mix-material-detail__benefit,
.mix-material-detail__included {
  max-width: 700px;
  margin-top: 34px;
  padding-top: 27px;
  border-top: 1px solid var(--detail-line);
}

.mix-material-detail__benefit > strong,
.mix-material-detail__included > strong {
  display: block;
  color: var(--detail-ink);
  font-size: 14px;
  font-weight: 780;
}

.mix-material-detail__benefit p {
  margin: 10px 0 0;
  color: var(--detail-muted);
  font-size: 15px;
  line-height: 1.65;
}

.mix-material-detail__included ul {
  display: grid;
  gap: 12px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.mix-material-detail__included li {
  position: relative;
  padding-left: 27px;
  color: #3f3b47;
  font-size: 14px;
  line-height: 1.55;
}

.mix-material-detail__included li::before {
  content: "";
  width: 13px;
  height: 7px;
  position: absolute;
  top: 6px;
  left: 1px;
  border-bottom: 2px solid var(--detail-violet);
  border-left: 2px solid var(--detail-violet);
  transform: rotate(-45deg);
}

.mix-material-detail__form-card {
  position: sticky;
  top: calc(var(--soceo-nav-height, 96px) + 24px);
  padding: clamp(25px, 3vw, 36px);
  border: 1px solid var(--detail-line);
  border-radius: 16px;
  background: #fff;
}

.mix-material-form__intro h2,
.mix-material-delivery h2 {
  margin: 0;
  color: var(--detail-ink);
  font: 700 clamp(30px, 3vw, 42px)/1 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.mix-material-form__intro > p {
  margin: 15px 0 0;
  color: var(--detail-muted);
  font-size: 14px;
  line-height: 1.55;
}

.mix-material-detail__form-card > small {
  display: block;
  margin-top: 18px;
  color: #77717e;
  font-size: 11px;
  line-height: 1.45;
}

.mix-material-detail__form-card form {
  display: grid;
  gap: 16px;
  margin-top: 28px;
}

.mix-material-form__field,
.mix-material-form__consent { display: grid; gap: 7px; }

.mix-material-form__field > label {
  color: #343039;
  font-size: 13px;
  font-weight: 720;
}

.mix-material-form__field > label span {
  color: #77717e;
  font-size: 11px;
  font-weight: 550;
}

.mix-material-form__field input,
.mix-material-form__field select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  color: var(--detail-ink);
  border: 1px solid #aaa4af;
  border-radius: 10px;
  background: #fff;
  font: 550 16px/1 Inter, sans-serif;
}

.mix-material-form__field input:focus,
.mix-material-form__field select:focus {
  border-color: var(--detail-violet);
  outline: 3px solid rgba(115, 56, 232, .14);
  outline-offset: 1px;
}

.mix-material-form__field [aria-invalid="true"] {
  border-color: #b13a32;
  background: #fff9f8;
}

.mix-material-form__field > p,
.mix-material-form__consent > p {
  min-height: 0;
  margin: 0;
  color: #9f2f29;
  font-size: 12px;
  line-height: 1.4;
}

.mix-material-form__field > p:empty,
.mix-material-form__consent > p:empty { display: none; }

.mix-material-form__honeypot { display: none !important; }

.mix-material-form__consent label {
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding-top: 3px;
  color: #46414b;
  font-size: 13px;
  line-height: 1.48;
  cursor: pointer;
}

.mix-material-form__consent input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--detail-violet);
}

.mix-material-form__consent input[aria-invalid="true"] {
  outline: 2px solid #b13a32;
  outline-offset: 2px;
}

.mix-material-detail__form-card button[type="submit"] {
  min-height: 50px;
  padding: 0 20px;
  color: #fff;
  border: 0;
  border-radius: 999px;
  background: var(--detail-violet);
  font: 750 14px/1 Inter, sans-serif;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease;
}

.mix-material-detail__form-card button[type="submit"]:hover { background: #5d25cc; transform: translateY(-1px); }
.mix-material-detail__form-card button[type="submit"]:disabled { cursor: wait; opacity: .62; transform: none; }

.mix-material-form__status {
  margin: 0 !important;
  padding: 0;
  color: var(--detail-muted);
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.mix-material-form__status:empty { display: none; }
.mix-material-form__status[data-state="sent"] { color: #17683d; }
.mix-material-form__status[data-state="error"] { color: #9f2f29; }

.mix-material-form__intro,
.mix-material-detail__form-card > form,
.mix-material-detail__form-card > small {
  transition: opacity 180ms ease;
}

.mix-material-detail__form-card[data-state="sending"] > .mix-material-form__intro,
.mix-material-detail__form-card[data-state="sending"] > form,
.mix-material-detail__form-card[data-state="sending"] > small,
.mix-material-detail__form-card[data-state="sent"] > .mix-material-form__intro,
.mix-material-detail__form-card[data-state="sent"] > form,
.mix-material-detail__form-card[data-state="sent"] > small {
  visibility: hidden;
  opacity: 0;
}

.mix-material-delivery {
  position: absolute;
  z-index: 2;
  inset: 1px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 15px;
  background:
    radial-gradient(circle at 50% 34%, rgba(115, 56, 232, .11), transparent 36%),
    #fff;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.mix-material-detail__form-card[data-state="sending"] .mix-material-delivery,
.mix-material-detail__form-card[data-state="sent"] .mix-material-delivery {
  visibility: visible;
  opacity: 1;
}

.mix-material-delivery__visual {
  width: min(100%, 250px);
  display: grid;
  justify-items: center;
  gap: 28px;
  margin-bottom: 34px;
}

.mix-material-delivery__brand {
  width: 92px;
  height: auto;
  display: block;
}

.mix-material-delivery__route {
  width: 220px;
  height: 66px;
  position: relative;
}

.mix-material-delivery__line {
  height: 1px;
  position: absolute;
  top: 33px;
  right: 22px;
  left: 22px;
  background: linear-gradient(90deg, rgba(115, 56, 232, .16), rgba(115, 56, 232, .58), rgba(115, 56, 232, .16));
}

.mix-material-delivery__line::after {
  content: "";
  height: 100%;
  position: absolute;
  inset: 0;
  background: var(--detail-violet);
  transform: scaleX(0);
  transform-origin: left;
  animation: mix-material-line-progress 1.45s cubic-bezier(.22, 1, .36, 1) infinite;
}

.mix-material-delivery__origin {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 27px;
  left: 16px;
  border: 3px solid rgba(115, 56, 232, .24);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 7px rgba(115, 56, 232, .07);
}

.mix-material-delivery__envelope,
.mix-material-delivery__check {
  width: 54px;
  height: 54px;
  position: absolute;
  top: 6px;
  left: 18px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--detail-violet);
  box-shadow: 0 15px 32px rgba(77, 31, 177, .23);
}

.mix-material-delivery__envelope {
  animation: mix-material-envelope-travel 1.45s cubic-bezier(.22, 1, .36, 1) infinite;
}

.mix-material-delivery__envelope svg { width: 25px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }

.mix-material-delivery__check {
  top: 6px;
  left: 148px;
  background: #1c8c58;
  opacity: 0;
  transform: scale(.72);
}

.mix-material-delivery__check svg { width: 27px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__envelope,
.mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__line::after { animation: none; opacity: 0; }

.mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__check {
  animation: mix-material-check-in 420ms cubic-bezier(.16, 1, .3, 1) both;
}

.mix-material-delivery > p {
  max-width: 330px;
  margin: 15px 0 0;
  color: var(--detail-muted);
  font-size: 14px;
  line-height: 1.55;
}

@keyframes mix-material-envelope-travel {
  0% { opacity: .72; transform: translateX(0) scale(.92); }
  46% { opacity: 1; transform: translateX(65px) scale(1); }
  82%, 100% { opacity: .72; transform: translateX(130px) scale(.92); }
}

@keyframes mix-material-line-progress {
  0% { opacity: .4; transform: scaleX(0); }
  70%, 100% { opacity: 1; transform: scaleX(1); }
}

@keyframes mix-material-check-in {
  0% { opacity: 0; transform: scale(.72) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.mix-material-detail__context { padding: 96px 0; background: #fff; }

.mix-material-detail__context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
}

.mix-material-detail__context h2,
.mix-material-detail__faq h2 {
  max-width: 760px;
  margin: 0;
  color: var(--detail-ink);
  font: 700 clamp(38px, 4.5vw, 60px)/.98 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.mix-material-detail__context-grid > div > p,
.mix-material-detail__faq header > p {
  max-width: 68ch;
  margin: 22px 0 0;
  color: var(--detail-muted);
  font-size: 16px;
  line-height: 1.7;
}

.mix-material-detail__context dl { margin: 0; border-top: 1px solid var(--detail-line); }

.mix-material-detail__context dl > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--detail-line);
}

.mix-material-detail__context dt {
  color: #77717e;
  font: 700 11px/1.4 "DM Mono", ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mix-material-detail__context dd { margin: 0; color: var(--detail-ink); font-size: 14px; font-weight: 650; }

.mix-material-detail__faq { padding: 96px 0 112px; background: #f1eef5; }

.mix-material-detail__faq-grid {
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
  gap: clamp(52px, 8vw, 120px);
  align-items: start;
}

.mix-material-detail__faq .mix-materials-faq__list { border-color: rgba(21, 20, 38, .2); }

.mix-material-detail__unavailable {
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: calc(var(--soceo-nav-height, 96px) + 60px) 0 90px;
  background: #fff;
}

.mix-material-detail__unavailable .mix-content-shell { max-width: 780px; text-align: center; }

.mix-material-detail__unavailable h1 {
  margin: 0;
  font: 700 clamp(46px, 6vw, 76px)/.96 "Bricolage Grotesque", Inter, sans-serif;
  letter-spacing: -.04em;
}

.mix-material-detail__unavailable p { margin: 22px auto 0; color: var(--detail-muted); line-height: 1.65; }

.mix-material-detail__unavailable a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 22px;
  color: #fff;
  border-radius: 999px;
  background: var(--detail-violet);
  font-weight: 750;
  text-decoration: none;
}

@media (max-width: 900px) {
  .mix-material-detail__hero-grid,
  .mix-material-detail__context-grid,
  .mix-material-detail__faq-grid { grid-template-columns: 1fr; }
  .mix-material-detail__form-card { position: relative; top: auto; }
}

@media (max-width: 700px) {
  .mix-material-detail__hero { padding: calc(var(--soceo-nav-height, 96px) + 36px) 0 70px; }
  .mix-material-detail__hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .mix-material-detail__copy h1 { font-size: clamp(42px, 13vw, 58px); }
  .mix-material-detail__lede { font-size: 16px; }
  .mix-material-detail__form-card { padding: 23px 18px; }
  .mix-material-detail__context,
  .mix-material-detail__faq { padding: 72px 0 82px; }
  .mix-material-detail__context dl > div { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-material-detail__form-card button[type="submit"],
  .mix-material-form__intro,
  .mix-material-detail__form-card > form,
  .mix-material-detail__form-card > small,
  .mix-material-delivery { transition: none; }

  .mix-material-delivery__envelope,
  .mix-material-delivery__line::after,
  .mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__check {
    animation: none;
  }

  .mix-material-delivery__envelope { left: 83px; transform: none; }
  .mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__envelope { opacity: 0; }
  .mix-material-detail__form-card[data-state="sent"] .mix-material-delivery__check { opacity: 1; transform: none; }
}