:root {
  /* Identidade SOCEO — primitivos de tipografia, cor e espaçamento. */
  --soceo-violet-50: #f7f5ff;
  --soceo-violet-100: #ece9fe;
  --soceo-violet-400: #9c6bff;
  --soceo-violet-500: #875bf7;
  --soceo-violet-600: #7839ee;
  --soceo-violet-700: #6728d4;
  --soceo-violet-800: #5b21c9;
  --soceo-blue-400: #5f6cff;
  --soceo-blue-600: #3238f2;
  --soceo-navy-950: #121128;
  --soceo-navy-900: #171233;
  --soceo-ink: #16033a;

  /* Semânticos: violeta lidera; azul apoia dados e estados em repouso. */
  --soceo-primary: var(--soceo-violet-600);
  --soceo-primary-hover: var(--soceo-violet-700);
  --soceo-secondary: var(--soceo-blue-600);
  --soceo-secondary-on-dark: var(--soceo-blue-400);
  --soceo-focus-ring: var(--soceo-violet-500);
  --soceo-surface-dark: var(--soceo-navy-950);

  --mix-ink: #151517;
  --mix-muted: #66666f;
  --mix-cobalt: var(--soceo-primary);
  --mix-paper: #fdfdfb;
  --mix-enter: 850ms cubic-bezier(.16, 1, .3, 1);
  --mix-exit: 260ms cubic-bezier(.4, 0, 1, 1);
}

.lp-franquias-root > .hero > .hero-prog:not(.mix-hero-prog) { display: none; }
.lp-franquias-root .mix-hero-prog { display: block; overflow: hidden; }
.lp-franquias-root .mix-hero-prog > i {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.lp-franquias-root .hero-slide,
.lp-franquias-root .hero-cta {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.mix-story-stage {
  position: absolute;
  inset: var(--soceo-nav-height, 96px) 0 0;
  z-index: 7;
  overflow: hidden;
  color: var(--mix-ink);
  background-color: transparent;
  background-image: none;
  font-family: "Polysans Neutral", Inter, Arial, sans-serif;
  transition: color 320ms ease;
}

/* O próprio hero cresce atrás do card; o stage mantém a geometria aprovada. */
.lp-franquias-root > .hero {
  background-color: #f6f2ed;
  background-image:
    linear-gradient(to bottom, #fff 0, rgba(255,255,255,.98) 44px, rgba(255,255,255,0) 132px),
    radial-gradient(circle at 50% 40%, #fff 0%, #f8f4ef 48%, #eee8f6 100%);
  transition: background-color 520ms cubic-bezier(.16,1,.3,1);
}
.lp-franquias-root[data-mix-index="1"] > .hero {
  background-color: #221833;
  background-image: radial-gradient(circle at 50% 57%, #5d3b73 0%, #312142 42%, #171326 100%);
}
.lp-franquias-root[data-mix-index="2"] > .hero {
  background-color: #deebf7;
  background-image: radial-gradient(circle at 50% 43%, #f8fcff 0%, #dcebf8 52%, #b8d3e8 100%);
}
.lp-franquias-root[data-mix-index="3"] > .hero {
  background-color: #1b1f4e;
  background-image: radial-gradient(circle at 50% 45%, #4b54a8 0%, #292f72 46%, #151936 100%);
}
.lp-franquias-root[data-mix-index="4"] > .hero {
  background-color: #10152f;
  background-image: radial-gradient(circle at 50% 48%, #283467 0%, #171d42 44%, #090d23 100%);
}
.lp-franquias-root[data-mix-index="5"] > .hero {
  background-color: var(--soceo-primary);
  background-image: radial-gradient(circle at 50% 45%, var(--soceo-violet-400) 0%, var(--soceo-primary) 46%, #35106f 100%);
}

.mix-story-stage > .mix-story-scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mix-story-scene.is-active,
.mix-story-scene.is-leaving {
  visibility: visible;
}

.mix-story-scene.is-active {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

.mix-story-scene.is-leaving { z-index: 1; opacity: 1; }

.mix-story-layout {
  position: relative;
  z-index: 2;
  width: min(1120px, calc(100% - 128px));
  min-width: 0;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: clamp(24px, 3.2vh, 36px) 0 148px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(250px, 1fr);
  align-items: center;
  justify-items: center;
  gap: 8px;
}

.mix-story-verb {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--mix-ink);
  font-family: "Bricolage Grotesque", "Polysans Neutral", Inter, Arial, sans-serif;
  font-size: clamp(54px, 7.3vw, 106px);
  line-height: .86;
  font-weight: 700;
  letter-spacing: -.028em;
  text-align: center;
  white-space: nowrap;
  text-transform: lowercase;
  will-change: transform, opacity;
}

.mix-story-verb::first-letter { text-transform: uppercase; }

.mix-story-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 1.4vh, 18px);
  min-width: 0;
}

.mix-story-sub {
  max-width: min(680px, 88vw);
  margin: 0;
  color: var(--mix-ink);
  font-family: Inter, Arial, sans-serif;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.42;
  font-weight: 500;
  letter-spacing: -.01em;
  text-align: center;
  text-wrap: balance;
  opacity: .74;
  will-change: transform, opacity;
}

.mix-story-object {
  position: relative;
  width: 900px;
  height: 330px;
  align-self: center;
  justify-self: center;
  will-change: transform, opacity;
}

.mix-story-scene.is-entering .mix-story-verb { animation: mix-text-in var(--mix-enter) 60ms both; }
.mix-story-scene.is-entering .mix-story-object { animation: mix-object-in var(--mix-enter) 30ms both; }
.mix-story-scene.is-entering .mix-side-story { animation: mix-side-in var(--mix-enter) 160ms both; }
.mix-story-scene.is-entering .mix-story-sub { animation: mix-sub-in var(--mix-enter) 220ms both; }
.mix-story-scene.is-leaving .mix-story-sub { animation: mix-sub-out var(--mix-exit) both; }
.mix-story-scene.is-leaving .mix-story-verb { animation: mix-text-out var(--mix-exit) both; }
.mix-story-scene.is-leaving .mix-story-object { animation: mix-object-out var(--mix-exit) both; }
.mix-story-scene.is-leaving .mix-side-story { animation: mix-side-out var(--mix-exit) both; }
.mix-story-scene.is-backward.is-entering .mix-story-verb { animation-name: mix-text-in-back; }
.mix-story-scene.is-backward.is-entering .mix-story-object { animation-name: mix-object-in-back; }
.mix-story-scene.is-backward.is-entering .mix-side-story { animation-name: mix-side-in-back; }
.mix-story-scene.is-backward.is-leaving .mix-story-verb { animation-name: mix-text-out-back; }
.mix-story-scene.is-backward.is-leaving .mix-story-object { animation-name: mix-object-out-back; }
.mix-story-scene.is-backward.is-leaving .mix-side-story { animation-name: mix-side-out-back; }

@keyframes mix-text-in { from { opacity: 0; transform: translate(120px,-28px) rotate(-2deg) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes mix-text-in-back { from { opacity: 0; transform: translate(-120px,-28px) rotate(2deg) scale(.88); } to { opacity: 1; transform: none; } }
@keyframes mix-side-in { from { opacity: 0; transform: translateX(-86px); } to { opacity: 1; transform: none; } }
@keyframes mix-side-in-back { from { opacity: 0; transform: translateX(86px); } to { opacity: 1; transform: none; } }
@keyframes mix-object-in { from { opacity: 0; transform: translateX(min(19vw, 260px)) rotate(9deg) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes mix-object-in-back { from { opacity: 0; transform: translateX(max(-19vw, -260px)) rotate(-9deg) scale(.84); } to { opacity: 1; transform: none; } }
@keyframes mix-text-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-150px); } }
@keyframes mix-text-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(150px); } }
@keyframes mix-side-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-86px); } }
@keyframes mix-side-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(86px); } }
@keyframes mix-sub-in { from { opacity: 0; transform: translateY(14px); } to { opacity: .74; transform: none; } }
@keyframes mix-sub-out { from { opacity: .74; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes mix-object-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(max(-18vw, -240px)) rotate(-7deg) scale(.96); } }
@keyframes mix-object-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(min(18vw, 240px)) rotate(7deg) scale(.96); } }

/* 01 — institucional */
.mix-intro-block {
  width: min(1040px, calc(100% - 96px));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  will-change: transform, opacity;
}

/* sobe o bloco pra compensar o header branco e centralizar oticamente */
.mix-story-intro { padding-bottom: 58px; }

.mix-intro-kicker {
  margin: 0 0 22px;
  color: var(--mix-cobalt);
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.mix-intro-block h1 {
  max-width: 1020px;
  margin: 0;
  font-family: "Bricolage Grotesque", "Polysans Neutral", Inter, Arial, sans-serif;
  font-size: clamp(46px, 5.3vw, 76px);
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.mix-intro-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-top: 36px;
}

.mix-intro-actions a {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Inter, Arial, sans-serif;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 180ms ease, background-color 180ms ease;
}

.mix-intro-actions a:hover { transform: translateY(-2px); }
.mix-intro-actions a:focus-visible { outline: 3px solid var(--soceo-focus-ring); outline-offset: 3px; }
.mix-story-stage .mix-primary-action { min-width: 132px; padding: 0 24px; color: #fff !important; background: var(--mix-ink); }
.mix-primary-action:hover { background: var(--mix-cobalt); }
.mix-secondary-action { gap: 9px; color: var(--mix-ink); }
.mix-play, .mix-play svg { width: 21px; height: 21px; display: block; }
.mix-play circle { fill: var(--mix-cobalt); }
.mix-play path { fill: #fff; }
.mix-story-intro.is-entering .mix-intro-block { animation: mix-intro-in var(--mix-enter) both; }
.mix-story-intro.is-leaving .mix-intro-block { animation: mix-intro-out var(--mix-exit) both; }
.mix-story-intro.is-backward.is-entering .mix-intro-block { animation-name: mix-intro-in-back; }
.mix-story-intro.is-backward.is-leaving .mix-intro-block { animation-name: mix-intro-out-back; }
@keyframes mix-intro-in { from { opacity: 0; transform: translateX(150px); } to { opacity: 1; transform: none; } }
@keyframes mix-intro-in-back { from { opacity: 0; transform: translateX(-150px); } to { opacity: 1; transform: none; } }
@keyframes mix-intro-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-150px); } }
@keyframes mix-intro-out-back { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(150px); } }

/* 02 — pergunta */
.mix-dots { display: inline-flex; align-items: center; gap: .16em; margin-left: .26em; align-self: center; }
.mix-dots i { width: .15em; height: .15em; border-radius: 50%; background: currentColor; opacity: .3; }
.mix-story-question.is-active .mix-dots i { animation: mix-dot 1.4s ease-in-out infinite; }
.mix-story-question.is-active .mix-dots i:nth-child(2) { animation-delay: 180ms; }
.mix-story-question.is-active .mix-dots i:nth-child(3) { animation-delay: 360ms; }
@keyframes mix-dot { 0%, 18%, 100% { opacity: .16; transform: translateY(0); } 40%, 65% { opacity: 1; transform: translateY(-4px); } }

.mix-question-object { display: grid; place-items: center; }
.mix-question-aura {
  position: absolute;
  width: 720px;
  height: 230px;
  border-radius: 999px;
  background: radial-gradient(ellipse, rgba(116, 103, 255, .22) 0%, rgba(236, 169, 255, .14) 40%, rgba(255,255,255,0) 72%);
  filter: blur(4px);
}

.mix-question-search {
  position: relative;
  z-index: 4;
  width: 670px;
  height: 76px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 15px;
  padding: 0 18px 0 22px;
  color: #232329;
  border: 1px solid rgba(27, 27, 35, .1);
  border-radius: 20px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 28px 80px rgba(64, 45, 145, .16), 0 5px 18px rgba(20, 18, 44, .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.mix-search-plus { width: 20px; height: 20px; }
.mix-search-plus path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.mix-type-viewport { min-width: 0; overflow: hidden; white-space: nowrap; font: 500 17px/1.2 Inter, Arial, sans-serif; text-align: left; }
.mix-cursor { width: 1.5px; height: 1.15em; display: inline-block; margin-left: 2px; vertical-align: -.18em; background: var(--mix-cobalt); animation: mix-cursor-blink 800ms steps(1, end) infinite; }
@keyframes mix-cursor-blink { 0%, 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
.mix-search-tools { display: flex; align-items: center; gap: 11px; color: #5b5b64; }
.mix-search-tools svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.mix-send-arrow {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 50%;
  background: var(--mix-cobalt);
  box-shadow: 0 5px 13px rgba(52, 60, 237, .28);
  font: 600 18px/1 Inter, sans-serif;
  transform-origin: 50% 70%;
}

.mix-ai-token {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 72px;
  min-height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px 8px;
  border: 1px solid rgba(20, 20, 26, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 16px 36px rgba(27, 22, 68, .13);
  transform: translate(var(--drop-x), var(--drop-y)) rotate(var(--drop-r));
}
.mix-ai-token img { width: 28px; height: 28px; object-fit: contain; }
.mix-ai-token span { color: #424249; font: 600 10px/1 Inter, Arial, sans-serif; }
.mix-story-question.mix-typed-done .mix-ai-token {
  animation:
    mix-ai-drop 900ms cubic-bezier(.18, .9, .24, 1.25) var(--delay) both,
    mix-breathe 4.8s ease-in-out calc(1500ms + var(--delay)) infinite;
}
@keyframes mix-ai-drop {
  from { opacity: 0; transform: translate(var(--drop-x), -430px) rotate(0deg) scale(.7); }
  72% { opacity: 1; }
  to { opacity: 1; transform: translate(var(--drop-x), var(--drop-y)) rotate(var(--drop-r)) scale(1); }
}

/* 03 — pesquisa */
.mix-research-object { display: grid; place-items: center; }
.mix-research-shell {
  position: relative;
  width: 800px;
  height: 330px;
  overflow: hidden;
  padding: 14px 18px 12px;
  border: 1px solid rgba(34, 32, 55, .09);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(255,255,255,.97), rgba(244,242,255,.94));
  box-shadow: 0 30px 90px rgba(52, 47, 110, .14);
}
.mix-research-topbar { height: 28px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; color: #767682; font: 500 10px/1 Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.mix-research-topbar > span { width: 9px; height: 9px; border-radius: 50%; background: var(--mix-cobalt); box-shadow: 0 0 0 5px rgba(52,60,237,.1); }
.mix-research-topbar em { color: var(--mix-cobalt); font-style: normal; font-weight: 800; }
.mix-research-query { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 16px; border: 1px solid rgba(52,60,237,.12); border-radius: 13px; background: #fff; color: #29292f; font: 600 13.5px/1.2 Inter, sans-serif; box-shadow: 0 8px 25px rgba(40,35,90,.06); }
.mix-research-query svg { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--mix-cobalt); stroke-width: 1.7; stroke-linecap: round; }
.mix-research-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.mix-research-results article { min-width: 0; height: 56px; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(25,25,32,.07); border-radius: 12px; background: rgba(255,255,255,.78); }
.mix-story-search.is-active .mix-research-results article { animation: mix-result-in 600ms cubic-bezier(.16,1,.3,1) calc(180ms + var(--row-delay)) both; }
@keyframes mix-result-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.mix-source-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; font: 800 11px/1 Inter, sans-serif; }
.mix-source-sheet { background: #15803d; }.mix-source-meta { background: #1769ff; }.mix-source-slack { background: #6b2f69; }.mix-source-notion { color:#111; background:#fff; border:1px solid #ddd; }
.mix-research-results div { min-width: 0; }.mix-research-results strong, .mix-research-results small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: Inter, sans-serif; }
.mix-research-results strong { color:var(--mix-cobalt); font-size: 11.5px; text-decoration: underline dotted rgba(52,60,237,.4); text-underline-offset: 2px; }.mix-research-results small { margin-top:3px; color:#84848d; font-size:9.5px; }.mix-research-results b { color:var(--mix-cobalt); font:700 10px/1 Inter,sans-serif; }
.mix-scan-line { position: absolute; left: 0; right: 0; top: 78px; height: 2px; background: linear-gradient(90deg, transparent, var(--mix-cobalt), transparent); box-shadow: 0 0 20px rgba(52,60,237,.65); opacity:.8; }
.mix-story-search.is-active .mix-scan-line { animation: mix-scan 2.2s ease-in-out infinite; }
@keyframes mix-scan { 0%,100% { transform: translateY(0); opacity:0; } 15% { opacity:.8; } 80% { opacity:.8; } 95% { transform:translateY(210px); opacity:0; } }

/* 04 — reúne */
.mix-connections-object { display: grid; place-items: center; }
.mix-connections-canvas { position: relative; width: 840px; height: 330px; }
.mix-connection-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mix-connection-lines .mix-net-line { fill:none; stroke:rgba(205,210,255,.46); stroke-width:1.5; stroke-dasharray:1; stroke-dashoffset:1; filter:drop-shadow(0 0 4px rgba(154,162,255,.38)); }
.mix-story-connect.is-active .mix-net-line { animation: mix-line-draw 800ms cubic-bezier(.5,0,.2,1) calc(750ms + var(--nd, 0ms)) forwards; }
.mix-connection-lines .mix-orbit-ring { fill:none; stroke:rgba(200,205,255,.22); stroke-width:1; stroke-dasharray:3 8; opacity:0; }
.mix-story-connect.is-active .mix-orbit-ring { animation: mix-ring-in 900ms ease 450ms forwards, mix-line-flow 40s linear infinite; }
@keyframes mix-ring-in { to { opacity:1; } }
@keyframes mix-line-flow { to { stroke-dashoffset:-240; } }
.mix-hub { position:absolute; left:50%; top:50%; z-index:3; width:138px; height:138px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; color:#fff; background:radial-gradient(circle at 34% 28%, #7178ff, var(--mix-cobalt) 62%, #1d238f); box-shadow:0 24px 55px rgba(52,60,237,.3); transform:translate(-50%,-50%); }
.mix-hub strong { font:700 20px/1 Inter,sans-serif; letter-spacing:-.03em; }.mix-hub small { margin-top:7px; font:500 9px/1 Inter,sans-serif; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.mix-hub-orbit { position:absolute; inset:-13px; border:1px solid rgba(52,60,237,.22); border-radius:50%; }
.mix-story-connect.is-active .mix-hub-orbit { animation:mix-orbit 2.5s ease-in-out infinite; }
@keyframes mix-orbit { 50% { inset:-22px; opacity:.25; } }
.mix-connection-token { position:absolute; left:50%; top:50%; z-index:2; width:auto; min-width:91px; height:55px; display:flex; align-items:center; gap:9px; padding:0 15px; border:1px solid rgba(72,79,150,.14); border-radius:16px; background:linear-gradient(180deg, #ffffff, #f4f4ff); box-shadow:0 13px 30px rgba(32,27,70,.11); transform:translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))); rotate:var(--rot, 0deg); }
.mix-connection-token img { width:25px; height:25px; flex:0 0 auto; object-fit:contain; }.mix-connection-token span { color:#3b3b42; font:650 10px/1 Inter,sans-serif; white-space:nowrap; }
.mix-story-connect.is-active .mix-connection-token {
  animation:
    mix-connection-in 650ms cubic-bezier(.16,1,.3,1) calc(100ms + var(--delay)) both,
    mix-breathe 5.2s ease-in-out calc(1400ms + var(--delay)) infinite,
    mix-sweep-glow 5s linear var(--sweep, 0s) infinite;
}
@keyframes mix-connection-in { from { opacity:0; transform:translate(-50%,-50%) scale(.55); } to { opacity:1; transform:translate(calc(-50% + var(--cx)), calc(-50% + var(--cy))) scale(1); } }

/* 05 — calcula */
.mix-calculate-object { display:grid; place-items:center; }
.mix-reasoning-card { position:relative; z-index:3; width:500px; min-height:230px; padding:24px; border:1px solid rgba(30,28,50,.09); border-radius:24px; background:rgba(255,255,255,.96); box-shadow:0 28px 80px rgba(41,34,99,.15); }
.mix-reasoning-head { display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:10px; color:#24242b; font-family:Inter,sans-serif; }.mix-spark { width:30px; height:30px; display:grid; place-items:center; color:#fff; border-radius:9px; background:var(--mix-cobalt); }.mix-reasoning-head strong { font-size:14px; }.mix-reasoning-head em { color:#898994; font-size:10px; font-style:normal; }
.mix-equation { display:flex; align-items:center; justify-content:center; gap:10px; margin:25px 0 15px; }.mix-equation span { padding:8px 10px; color:#474750; border-radius:8px; background:#f2f1fa; font:700 9px/1 Inter,sans-serif; letter-spacing:.04em; }.mix-equation i { color:#9c9ca6; font:400 15px/1 Inter,sans-serif; }
.mix-reasoning-progress { height:5px; overflow:hidden; border-radius:999px; background:#e9e8f1; }.mix-reasoning-progress i { display:block; width:100%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--mix-cobalt),#918cff); transform-origin:left; }
.mix-story-calculate.is-active .mix-reasoning-progress i { animation:mix-progress 2.1s ease-in-out infinite; } @keyframes mix-progress { 0% { transform:scaleX(.08); } 65%,100% { transform:scaleX(1); } }
.mix-reasoning-card p { margin:18px 0 0; color:#71717b; font:500 12px/1.45 Inter,sans-serif; }.mix-reasoning-card p b { color:#29292f; }
.mix-metric { position:absolute; z-index:2; width:142px; min-height:82px; padding:14px 15px; border:1px solid rgba(25,25,33,.08); border-radius:16px; background:#fff; box-shadow:0 15px 35px rgba(34,29,72,.11); font-family:Inter,sans-serif; }.mix-metric small,.mix-metric strong { display:block; }.mix-metric small { color:#93939d; font-size:8px; font-weight:700; letter-spacing:.08em; }.mix-metric strong { margin-top:6px; color:#29292f; font-size:20px; letter-spacing:-.04em; }.mix-metric span { position:absolute; right:12px; top:12px; color:#168753; font-size:9px; font-weight:700; }.mix-metric span.is-down { color:#d24c3f; }
.mix-metric-a { left:20px; top:26px; transform:rotate(-6deg); }.mix-metric-b { right:20px; top:24px; transform:rotate(6deg); }.mix-metric-c { left:2px; bottom:30px; transform:rotate(5deg); }.mix-metric-d { right:2px; bottom:30px; transform:rotate(-5deg); }
.mix-story-calculate.is-active .mix-metric {
  animation:
    mix-metric-in 720ms cubic-bezier(.16,1,.3,1) 280ms both,
    mix-breathe 5.4s ease-in-out 1900ms infinite;
}
.mix-story-calculate.is-active .mix-metric-b { animation-delay: 400ms, 2400ms; }
.mix-story-calculate.is-active .mix-metric-c { animation-delay: 520ms, 2900ms; }
.mix-story-calculate.is-active .mix-metric-d { animation-delay: 640ms, 3400ms; }
@keyframes mix-metric-in { from { opacity:0; scale:.6; translate:0 35px; } to { opacity:1; scale:1; translate:0 0; } }

/* 06 — te entrega */
.mix-story-answer { color:#fff; }.mix-story-answer .mix-story-verb,.mix-story-answer .mix-story-copy { color:#fff; }.mix-story-answer .mix-story-copy { opacity:.72; }
.mix-answer-object { display:grid; place-items:center; }
.mix-answer-card { width:760px; min-height:306px; overflow:hidden; border:1px solid rgba(255,255,255,.24); border-radius:26px; background:rgba(255,255,255,.96); box-shadow:0 35px 100px rgba(10,12,72,.32); color:#22222a; }
.mix-answer-card header { display:grid; grid-template-columns:40px 1fr; gap:14px; padding:24px 25px 18px; }.mix-answer-spark { width:38px; height:38px; display:grid; place-items:center; color:#fff; border-radius:12px; background:var(--mix-cobalt); }.mix-answer-card header small,.mix-answer-card header strong { display:block; font-family:Inter,sans-serif; }.mix-answer-card header small { color:var(--mix-cobalt); font-size:9px; font-weight:800; letter-spacing:.09em; }.mix-answer-card header strong { max-width:610px; margin-top:8px; font-size:19px; line-height:1.25; letter-spacing:-.025em; }
.mix-answer-card > p { margin:0; padding:0 25px; color:#666670; font:500 12px/1.55 Inter,sans-serif; }.mix-answer-evidence { display:flex; gap:8px; padding:17px 25px 20px; }.mix-evidence-trigger { display:flex; align-items:center; gap:6px; padding:7px 9px; color:#62626c; border:1px solid #e7e6ed; border-radius:999px; background:#faf9fc; font:600 9px/1 Inter,sans-serif; cursor:pointer; }.mix-answer-evidence i { width:6px; height:6px; border-radius:50%; background:var(--mix-cobalt); }
.mix-answer-card footer { min-height:83px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:20px; padding:15px 25px; background:#f0efff; border-top:1px solid #e2e0ff; }.mix-answer-card footer small,.mix-answer-card footer strong { display:block; font-family:Inter,sans-serif; }.mix-answer-card footer small { color:#7774ae; font-size:8px; font-weight:800; letter-spacing:.1em; }.mix-answer-card footer strong { margin-top:6px; color:#30303a; font-size:11px; line-height:1.3; }.mix-answer-card button { height:38px; padding:0 15px; color:#fff; border:0; border-radius:10px; background:var(--mix-cobalt); font:700 10px/1 Inter,sans-serif; }.mix-answer-card button span { margin-left:6px; }
.mix-story-answer.is-entering .mix-answer-card { animation:mix-answer-reveal 900ms cubic-bezier(.16,1,.3,1) 180ms both; } @keyframes mix-answer-reveal { from { opacity:0; transform:perspective(800px) rotateX(10deg) translateY(35px) scale(.94); } to { opacity:1; transform:none; } }

/* Narrativa lateral e CTAs — composição recuperada da SOCEO */
.mix-side-story {
  position: absolute;
  left: -100px;
  bottom: 184px;
  z-index: 8;
  width: min(390px, 31vw);
  color: var(--mix-ink);
  font-family: Inter, Arial, sans-serif;
  will-change: transform, opacity;
}

@media (max-width: 1320px) and (min-width: 801px) {
  .mix-side-story { left: 0; }
}

.mix-side-story h3 {
  max-width: 360px;
  margin: 0;
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.mix-side-story p {
  max-width: 375px;
  margin: 15px 0 0;
  color: currentColor;
  font-size: clamp(13px, 1.08vw, 16px);
  line-height: 1.48;
  font-weight: 450;
  opacity: .72;
  text-wrap: balance;
}

.mix-shared-cta {
  position: absolute;
  left: max(60px, calc((100vw - 1320px) / 2));
  bottom: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 13px;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.16,1,.3,1), visibility 0s;
}

.lp-franquias-root[data-mix-index="0"] .mix-shared-cta {
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  pointer-events: none;
}

/* CTAs no idioma da HUD: pills finos, hairline e vidro, como o contador e as setas */
.mix-shared-cta a {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-family: Inter, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.mix-shared-cta a:hover { transform: translateY(-2px); }
.mix-shared-cta a:focus-visible { outline: 3px solid rgba(142,148,255,.55); outline-offset: 3px; }
.mix-cta-fill {
  padding: 0 22px;
  color: #fff !important;
  background: #171719;
  box-shadow: 0 10px 26px rgba(20,20,35,.16);
}
.mix-cta-fill:hover { background: var(--mix-cobalt); }
.mix-cta-ghost {
  padding: 0 20px;
  color: #171719 !important;
  border: 1px solid rgba(23,23,25,.2);
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Na abertura a HUD inteira some (contador + setas); ela estreia junto da cena 02 */
.lp-franquias-root.mix-story-active .hero-chrome.counter,
.lp-franquias-root.mix-story-active .ctrl.prev,
.lp-franquias-root.mix-story-active .ctrl.next {
  transition: opacity 300ms ease, visibility 0s;
}
.lp-franquias-root[data-mix-index="0"] .hero-chrome.counter,
.lp-franquias-root[data-mix-index="0"] .ctrl.prev,
.lp-franquias-root[data-mix-index="0"] .ctrl.next,
.lp-franquias-root[data-mix-index="0"] .mix-hero-prog {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.lp-franquias-root[data-mix-index="0"] .hero-chrome.controls {
  pointer-events: none !important;
}

/* Preferência persistente de movimento: substitui as setas ‹ › em todas as cenas. */
.mix-skip-cta {
  position: absolute;
  right: 60px;
  bottom: 54px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  min-width: 176px;
  padding: 0 20px;
  border: 1px solid rgba(23,23,25,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #3c3c44;
  font: 700 12.5px/1 Inter, Arial, sans-serif;
  letter-spacing: .01em;
  cursor: pointer;
  user-select: none;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: transform 180ms ease, color 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.mix-skip-toggle {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  margin: 0;
  accent-color: var(--mix-cobalt);
  cursor: pointer;
}
.mix-skip-cta:hover { transform: translateY(-2px); background: rgba(255,255,255,.5); }
.mix-skip-toggle:focus-visible { outline: 3px solid rgba(142,148,255,.62); outline-offset: 3px; }
.lp-franquias-root.mix-skip-preferred .mix-skip-cta {
  border-color: rgba(120,57,238,.3);
  background: rgba(244,238,255,.92);
  box-shadow: 0 10px 28px rgba(120,57,238,.14);
}
.lp-franquias-root[data-mix-index="1"] .mix-skip-cta,
.lp-franquias-root[data-mix-index="3"] .mix-skip-cta,
.lp-franquias-root[data-mix-index="4"] .mix-skip-cta,
.lp-franquias-root[data-mix-index="5"] .mix-skip-cta {
  color: #fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.1);
}
.lp-franquias-root[data-mix-index="1"].mix-skip-preferred .mix-skip-cta,
.lp-franquias-root[data-mix-index="3"].mix-skip-preferred .mix-skip-cta,
.lp-franquias-root[data-mix-index="4"].mix-skip-preferred .mix-skip-cta,
.lp-franquias-root[data-mix-index="5"].mix-skip-preferred .mix-skip-cta {
  border-color: rgba(174,178,255,.58);
  background: rgba(142,148,255,.2);
  box-shadow: 0 10px 28px rgba(4,6,44,.2);
}
.lp-franquias-root[data-mix-index="1"] .mix-skip-cta:hover,
.lp-franquias-root[data-mix-index="3"] .mix-skip-cta:hover,
.lp-franquias-root[data-mix-index="4"] .mix-skip-cta:hover,
.lp-franquias-root[data-mix-index="5"] .mix-skip-cta:hover {
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.18);
}

/* A cena de abertura preserva a mesma suavização, agora medida desde o hero
   ampliado para que a textura também continue atrás do header. */
.lp-franquias-root[data-mix-index="0"] > .hero::before,
.lp-franquias-root[data-mix-index="0"] > .hero::after {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--soceo-nav-height, 96px) + 48px),
    #000 calc(var(--soceo-nav-height, 96px) + 132px)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--soceo-nav-height, 96px) + 48px),
    #000 calc(var(--soceo-nav-height, 96px) + 132px)
  );
}

.lp-franquias-root[data-mix-index="1"] .mix-story-verb,
.lp-franquias-root[data-mix-index="1"] .mix-side-story,
.lp-franquias-root[data-mix-index="1"] .mix-story-sub,
.lp-franquias-root[data-mix-index="3"] .mix-story-verb,
.lp-franquias-root[data-mix-index="3"] .mix-side-story,
.lp-franquias-root[data-mix-index="3"] .mix-story-sub,
.lp-franquias-root[data-mix-index="4"] .mix-story-verb,
.lp-franquias-root[data-mix-index="4"] .mix-side-story,
.lp-franquias-root[data-mix-index="4"] .mix-story-sub,
.lp-franquias-root[data-mix-index="5"] .mix-story-verb,
.lp-franquias-root[data-mix-index="5"] .mix-side-story,
.lp-franquias-root[data-mix-index="5"] .mix-story-sub { color: #fff; }

.lp-franquias-root[data-mix-index="1"] .mix-cta-fill,
.lp-franquias-root[data-mix-index="3"] .mix-cta-fill,
.lp-franquias-root[data-mix-index="4"] .mix-cta-fill,
.lp-franquias-root[data-mix-index="5"] .mix-cta-fill {
  color: #17171d !important;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.26);
}
.lp-franquias-root[data-mix-index="1"] .mix-cta-fill:hover,
.lp-franquias-root[data-mix-index="3"] .mix-cta-fill:hover,
.lp-franquias-root[data-mix-index="4"] .mix-cta-fill:hover,
.lp-franquias-root[data-mix-index="5"] .mix-cta-fill:hover {
  color: #fff !important;
  background: var(--mix-cobalt);
}
.lp-franquias-root[data-mix-index="1"] .mix-cta-ghost,
.lp-franquias-root[data-mix-index="3"] .mix-cta-ghost,
.lp-franquias-root[data-mix-index="4"] .mix-cta-ghost,
.lp-franquias-root[data-mix-index="5"] .mix-cta-ghost {
  color: #fff !important;
  border-color: rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
}

/* Elevação consistente para os objetos */
.mix-question-search { box-shadow: 0 38px 95px rgba(10,6,34,.38), 0 8px 25px rgba(15,10,40,.2); }
.mix-ai-token { box-shadow: 0 24px 54px rgba(9,5,28,.3), 0 4px 14px rgba(9,5,28,.16); }
.mix-research-shell { box-shadow: 0 42px 110px rgba(37,74,104,.25), 0 9px 28px rgba(37,74,104,.13); }
.mix-connection-token { box-shadow: 0 23px 55px rgba(9,12,45,.28), 0 4px 15px rgba(9,12,45,.15); }
.mix-hub { box-shadow: 0 35px 82px rgba(9,12,45,.42), 0 0 0 16px rgba(154,162,255,.10); }
.mix-reasoning-card { box-shadow: 0 46px 125px rgba(0,0,0,.42), 0 8px 26px rgba(5,8,31,.28); }
.mix-metric { box-shadow: 0 27px 64px rgba(0,0,0,.32), 0 5px 16px rgba(5,8,31,.22); }
.mix-answer-card { box-shadow: 0 46px 125px rgba(6,8,66,.46), 0 8px 28px rgba(6,8,66,.28); }

/* Campo de fórmulas construído em CSS, sem vídeo */
.lp-franquias-root[data-mix-index="4"] .mix-story-stage,
.mix-story-calculate.is-active {
  overflow: visible;
}

.mix-formula-field {
  position: absolute;
  inset: calc(-1 * var(--soceo-nav-height, 96px)) 0 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 720px;
  perspective-origin: 50% 48%;
  mask-image: radial-gradient(circle at 50% 48%, transparent 0 16%, #000 36%, #000 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, transparent 0 16%, #000 36%, #000 100%);
}

.mix-formula {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(183,205,255,.62);
  font-family: "JetBrains Mono", "DM Mono", ui-monospace, monospace;
  font-size: calc(17px * var(--fs));
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.04em;
  white-space: nowrap;
  opacity: 0;
  text-shadow: 0 0 18px rgba(120,157,255,.5);
  transform-origin: center;
  will-change: transform, opacity, filter;
}

.mix-story-calculate.is-active .mix-formula {
  animation: mix-formula-depth var(--fd) cubic-bezier(.2,.45,.2,1) var(--ft) infinite;
}

@keyframes mix-formula-depth {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: translate3d(-50%,-50%,-720px) rotate(var(--fr)) scale(.2);
  }
  18% { opacity: .18; }
  52% {
    opacity: .48;
    filter: blur(.8px);
    transform: translate3d(calc(-50% + var(--fx)),calc(-50% + var(--fy)),-80px) rotate(var(--fr)) scale(.86);
  }
  82% { opacity: .25; }
  100% {
    opacity: 0;
    filter: blur(2px);
    transform: translate3d(calc(-50% + var(--fx)),calc(-50% + var(--fy)),280px) rotate(var(--fr)) scale(2.4);
  }
}

.mix-story-calculate .mix-story-layout { z-index: 2; }

/* Chrome herdado da SOCEO */
.lp-franquias-root.mix-story-active .counter,
.lp-franquias-root.mix-story-active .counter .cur,
.lp-franquias-root.mix-story-active .scroll-hint,
.lp-franquias-root.mix-story-active .controls { color:var(--mix-ink); }
.lp-franquias-root.mix-story-active .ctrl { color:var(--mix-ink); border-color:rgba(20,20,24,.16); background:rgba(20,20,24,.06); }
.lp-franquias-root.mix-story-active .mix-hero-prog { background:rgba(20,20,24,.14); }
.lp-franquias-root.mix-story-active .mix-hero-prog > i { background:var(--mix-cobalt); }
.lp-franquias-root.mix-final .mix-story-stage { background:transparent; }
.lp-franquias-root.mix-final .counter,
.lp-franquias-root.mix-final .counter .cur,
.lp-franquias-root.mix-final .scroll-hint,
.lp-franquias-root.mix-final .controls { color:#fff; }
.lp-franquias-root.mix-final .ctrl { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.1); }
.lp-franquias-root.mix-final .mix-hero-prog { background:rgba(255,255,255,.28); }
.lp-franquias-root.mix-final .mix-hero-prog > i { background:#aeb2ff; }

.lp-franquias-root[data-mix-index="1"] .counter,
.lp-franquias-root[data-mix-index="1"] .counter .cur,
.lp-franquias-root[data-mix-index="1"] .scroll-hint,
.lp-franquias-root[data-mix-index="1"] .controls,
.lp-franquias-root[data-mix-index="3"] .counter,
.lp-franquias-root[data-mix-index="3"] .counter .cur,
.lp-franquias-root[data-mix-index="3"] .scroll-hint,
.lp-franquias-root[data-mix-index="3"] .controls,
.lp-franquias-root[data-mix-index="4"] .counter,
.lp-franquias-root[data-mix-index="4"] .counter .cur,
.lp-franquias-root[data-mix-index="4"] .scroll-hint,
.lp-franquias-root[data-mix-index="4"] .controls { color:#fff; }
.lp-franquias-root[data-mix-index="1"] .ctrl,
.lp-franquias-root[data-mix-index="3"] .ctrl,
.lp-franquias-root[data-mix-index="4"] .ctrl { color:#fff; border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.08); }
.lp-franquias-root[data-mix-index="1"] .mix-hero-prog,
.lp-franquias-root[data-mix-index="3"] .mix-hero-prog,
.lp-franquias-root[data-mix-index="4"] .mix-hero-prog { background:rgba(255,255,255,.25); }
.lp-franquias-root[data-mix-index="1"] .mix-hero-prog > i,
.lp-franquias-root[data-mix-index="3"] .mix-hero-prog > i,
.lp-franquias-root[data-mix-index="4"] .mix-hero-prog > i { background:#aeb2ff; }

@media (max-height: 760px) {
  .mix-story-layout { padding-top:16px; padding-bottom:122px; grid-template-rows:auto minmax(210px,1fr); }
  .mix-story-verb { font-size:clamp(46px,6.4vw,78px); }
  .mix-story-object { height:270px; scale:.88; }
  .mix-intro-block h1 { font-size:clamp(42px,5vw,68px); }
  .mix-side-story { bottom:126px; }
  .mix-side-story h3 { font-size:25px; }
  .mix-side-story p { margin-top:9px; font-size:12px; }
  .mix-shared-cta { bottom:26px; }
}

@media (max-width: 800px) {
  .mix-story-layout { width:calc(100% - 28px); padding:22px 0 128px; grid-template-rows:auto minmax(250px,1fr); }
  .mix-story-verb { max-width:calc(100vw - 30px); font-size:clamp(38px,9vw,58px); line-height:.9; white-space:normal; }
  .mix-story-object { width:900px; scale:.78; }
  .mix-side-story { left:20px; bottom:105px; width:230px; }
  .mix-side-story h3 { font-size:20px; line-height:1.05; }
  .mix-side-story p { display:none; }
  .mix-shared-cta { left:20px; right:20px; bottom:28px; gap:8px; }
  .mix-shared-cta a { min-width:0; min-height:48px; padding:0 15px; font-size:11px; }
  .mix-cta-fill { flex:1.05; }
  .mix-cta-ghost { flex:1; }
  .mix-cta-fill small { display:none; }
  .mix-intro-block { width:calc(100% - 34px); }
  .mix-intro-block h1 { font-size:clamp(40px,11.4vw,58px); }
  .mix-intro-kicker { font-size:12px; }
  .mix-intro-actions { gap:18px; margin-top:24px; }
  .mix-intro-actions a { min-height:44px; font-size:13px; }
}

@media (max-width: 600px) {
  .mix-story-object { scale:.58; }
}

@media (max-width: 480px) {
  .mix-story-layout { padding-top:22px; }
  .mix-story-verb { font-size:clamp(32px,9.5vw,42px); }
  .mix-story-question .mix-story-verb { font-size:32px; }
  .mix-story-object { scale:.39; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-story-stage, .mix-story-scene *, .mix-intro-actions a { animation:none !important; transition:none !important; }
  .mix-story-scene.is-active * { opacity:1; }
  .mix-formula { opacity:.22 !important; filter:none !important; transform:translate3d(calc(-50% + var(--fx)),calc(-50% + var(--fy)),0) rotate(var(--fr)) scale(.75) !important; }
}

/* ============================================================
   Camada cinema — vinheta, grão, redes de conexão e segundo ato
   ============================================================ */

/* Grão de filme + vinheta pertencem ao fundo inteiro do hero. Se começarem
   no stage, a borda dos pseudos vira uma faixa quando o banner sai da tela. */
.lp-franquias-root > .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .045;
  mix-blend-mode: overlay;
}

.lp-franquias-root > .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  /* Mantém a profundidade nas laterais e no rodapé, mas deixa o topo limpo.
     Com o foco em 44%, a vinheta já começava escura no primeiro pixel e,
     somada à sombra real do header da Soceo, virava uma faixa preta. */
  background: radial-gradient(ellipse at 50% 32%, transparent 54%, rgba(10, 8, 30, .14) 80%, rgba(8, 6, 24, .30) 100%);
}

/* Verbos limpos, sem sombra, nas cenas escuras (o text-shadow deixava a fonte "flutuando") */

/* Levitação sutil compartilhada (usa translate, não conflita com transform) */
@keyframes mix-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -6px; }
}

/* Traço que se desenha */
@keyframes mix-line-draw { to { stroke-dashoffset: 0; } }
@keyframes mix-flow-in { to { opacity: .9; } }

/* 01 — constelação de fundo, o tema "conectado" começa aqui */
.mix-story-intro::before {
  content: "";
  position: absolute;
  inset: -4%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 25% 30%, rgba(52, 60, 237, .34) 1.3px, transparent 2.2px),
    radial-gradient(circle at 70% 65%, rgba(21, 21, 23, .25) 1px, transparent 1.8px),
    radial-gradient(circle at 45% 82%, rgba(52, 60, 237, .22) 1px, transparent 1.7px);
  background-size: 150px 150px, 190px 190px, 230px 230px;
  mask-image: radial-gradient(ellipse at 50% 46%, transparent 26%, #000 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, transparent 26%, #000 72%);
  opacity: .6;
  animation: mix-constellation 34s linear infinite alternate;
}
@keyframes mix-constellation {
  to { background-position: 70px 46px, -56px 34px, 44px -60px; }
}
.mix-intro-block { position: relative; z-index: 1; }

/* As IAs genéricas respondem com desculpas — balões de recusa */
.mix-ai-quote {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  margin: 0;
  max-width: 212px;
  padding: 9px 12px;
  border-radius: 13px;
  background: rgba(255, 255, 255, .94);
  color: #4a4550;
  font: 500 11px/1.35 Inter, Arial, sans-serif;
  box-shadow: 0 18px 44px rgba(9, 5, 28, .35);
  transform: translate(calc(-50% + var(--qx)), calc(-50% + var(--qy)));
  opacity: 0;
}
.mix-ai-quote::before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: var(--tail-x, 50%);
  width: 9px;
  height: 9px;
  background: inherit;
  transform: rotate(45deg);
}
.mix-ai-quote.is-below::before { bottom: auto; top: -4px; }
.mix-ai-quote i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #e0524a;
  vertical-align: 1px;
}
.mix-story-question.is-active .mix-ai-quote {
  animation:
    mix-quote-pop 650ms cubic-bezier(.18, .9, .24, 1.2) calc(1900ms + var(--qdelay, 0ms)) forwards,
    mix-breathe 5.4s ease-in-out calc(2900ms + var(--qdelay, 0ms)) infinite;
}
@keyframes mix-quote-pop {
  from { opacity: 0; translate: 0 10px; scale: .85; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.mix-story-question.mix-submit-pressed .mix-send-arrow {
  animation: mix-send-press 520ms cubic-bezier(.2, .8, .2, 1) 1 both;
}
@keyframes mix-send-press {
  0% {
    background: var(--mix-cobalt);
    box-shadow: 0 5px 13px rgba(52, 60, 237, .28);
    transform: translateY(0) scale(1);
  }
  34% {
    background: #262dc9;
    box-shadow: 0 1px 3px rgba(25, 30, 135, .45), inset 0 2px 5px rgba(15, 18, 95, .32);
    transform: translateY(2px) scale(.82);
  }
  64% {
    background: #434bf4;
    box-shadow: 0 0 0 8px rgba(52, 60, 237, 0), 0 7px 17px rgba(52, 60, 237, .32);
    transform: translateY(0) scale(1.08);
  }
  100% {
    background: var(--mix-cobalt);
    box-shadow: 0 5px 13px rgba(52, 60, 237, .28);
    transform: translateY(0) scale(1);
  }
}
@keyframes mix-send-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 60, 237, .45); }
  45% { box-shadow: 0 0 0 9px rgba(52, 60, 237, 0); }
}

/* 03 — pesquisa com brilho interno e citações vivas */
.mix-research-shell { box-shadow: 0 42px 110px rgba(37, 74, 104, .25), 0 9px 28px rgba(37, 74, 104, .13), inset 0 1px 0 rgba(255, 255, 255, .95); }
.mix-story-search.is-active .mix-research-results article { border-color: rgba(25, 25, 32, .07); }
.mix-story-search.is-active .mix-research-results article:nth-child(1) { animation: mix-result-in 600ms cubic-bezier(.16,1,.3,1) 260ms both, mix-cite-glow 4.8s ease-in-out 2.2s infinite; }
.mix-story-search.is-active .mix-research-results article:nth-child(2) { animation: mix-result-in 600ms cubic-bezier(.16,1,.3,1) 360ms both, mix-cite-glow 4.8s ease-in-out 2.8s infinite; }
.mix-story-search.is-active .mix-research-results article:nth-child(3) { animation: mix-result-in 600ms cubic-bezier(.16,1,.3,1) 460ms both, mix-cite-glow 4.8s ease-in-out 3.4s infinite; }
.mix-story-search.is-active .mix-research-results article:nth-child(4) { animation: mix-result-in 600ms cubic-bezier(.16,1,.3,1) 560ms both, mix-cite-glow 4.8s ease-in-out 4s infinite; }
@keyframes mix-cite-glow {
  0%, 14%, 100% { border-color: rgba(25, 25, 32, .07); box-shadow: none; }
  6% { border-color: rgba(52, 60, 237, .45); box-shadow: 0 0 0 3px rgba(52, 60, 237, .1); }
}

/* 04 — reúne: dados fluindo para o núcleo */
.mix-flow {
  fill: #c7cbff;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(154, 162, 255, .9));
}
.mix-story-connect.is-active .mix-flow { animation: mix-flow-in 800ms ease 1500ms forwards; }
.mix-story-connect.is-active .mix-hub { animation: mix-hub-glow 3.2s ease-in-out 1s infinite; }
@keyframes mix-hub-glow {
  0%, 100% { box-shadow: 0 35px 82px rgba(9, 12, 45, .42), 0 0 0 16px rgba(154, 162, 255, .10); }
  50% { box-shadow: 0 35px 82px rgba(9, 12, 45, .42), 0 0 0 16px rgba(154, 162, 255, .10), 0 0 74px 10px rgba(122, 132, 255, .32); }
}

/* 05 — calcula: a rede de dependência dos números */
.mix-dep-lines {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mix-dep-lines path {
  fill: none;
  stroke: rgba(160, 175, 255, .42);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.mix-dep-lines .mix-dep-arc { stroke: rgba(190, 200, 255, .3); stroke-width: 1; }
.mix-story-calculate.is-active .mix-dep-lines path {
  animation: mix-line-draw 950ms cubic-bezier(.5, 0, .2, 1) calc(1250ms + var(--ldelay, 0ms)) forwards;
}

.mix-dep-chip {
  /* âncora em 0,0 para que --chip-x/--chip-y usem as coordenadas do viewBox das linhas */
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(150, 165, 255, .24);
  border-radius: 999px;
  background: rgba(22, 28, 64, .96); /* quase sólido: esconde a ponta da linha que entra por baixo */
  color: #dfe4ff;
  font: 650 10px/1 Inter, Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgba(0, 0, 12, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translate(calc(-50% + var(--chip-x)), calc(-50% + var(--chip-y)));
  opacity: 0;
}
.mix-dep-chip img { width: 15px; height: 15px; object-fit: contain; }
.mix-dep-chip i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #8f9bff; box-shadow: 0 0 8px rgba(143, 155, 255, .9); }
.mix-story-calculate.is-active .mix-dep-chip {
  animation:
    mix-chip-pop 700ms cubic-bezier(.18, .9, .24, 1.2) calc(1500ms + var(--chip-delay, 0ms)) forwards,
    mix-breathe 5.6s ease-in-out calc(2600ms + var(--chip-delay, 0ms)) infinite;
}
@keyframes mix-chip-pop {
  from { opacity: 0; translate: 0 14px; scale: .82; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
/* Terceiro nível da rede: micro-fontes que alimentam cada chip */
.mix-dep-lines .mix-micro-line { stroke: rgba(150, 165, 255, .26); stroke-width: .9; }
.mix-dep-micro {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid rgba(150, 165, 255, .13);
  border-radius: 999px;
  background: rgba(14, 18, 48, .92); /* plaquinha: cobre a ponta da linha atrás do texto */
  color: rgba(205, 214, 255, .68);
  font: 650 8.5px/1 Inter, Arial, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 12px rgba(0, 0, 20, .6);
  transform: translate(calc(-50% + var(--mx)), calc(-50% + var(--my)));
  opacity: 0;
}
.mix-dep-micro::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(160, 175, 255, .85);
  box-shadow: 0 0 6px rgba(160, 175, 255, .8);
}
.mix-story-calculate.is-active .mix-dep-micro {
  animation:
    mix-micro-in 600ms ease calc(2450ms + var(--micro-delay, 0ms)) forwards,
    mix-breathe 6s ease-in-out calc(3300ms + var(--micro-delay, 0ms)) infinite;
}
@keyframes mix-micro-in {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}
.mix-story-calculate.is-active .mix-reasoning-card { animation: mix-card-rise 800ms cubic-bezier(.16, 1, .3, 1) 140ms both; }
@keyframes mix-card-rise {
  from { opacity: 0; translate: 0 24px; scale: .965; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.mix-reasoning-card { box-shadow: 0 46px 125px rgba(0, 0, 0, .42), 0 8px 26px rgba(5, 8, 31, .28), inset 0 1px 0 rgba(255, 255, 255, .9); }

/* 06 — te entrega: brilho varrendo o card e evidências vivas */
.mix-answer-card { position: relative; }
.mix-answer-card::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  transform: translateX(-130%);
}
.mix-story-answer.is-active .mix-answer-card::after { animation: mix-sheen 1500ms cubic-bezier(.5, 0, .2, 1) 1300ms forwards; }
@keyframes mix-sheen { to { transform: translateX(130%); } }
.mix-story-answer.is-active .mix-evidence-trigger:nth-child(1) { animation: mix-evidence-glow 4.6s ease-in-out 2s infinite; }
.mix-story-answer.is-active .mix-evidence-trigger:nth-child(2) { animation: mix-evidence-glow 4.6s ease-in-out 2.55s infinite; }
.mix-story-answer.is-active .mix-evidence-trigger:nth-child(3) { animation: mix-evidence-glow 4.6s ease-in-out 3.1s infinite; }
@keyframes mix-evidence-glow {
  0%, 15%, 100% { color: #62626c; border-color: #e7e6ed; box-shadow: none; }
  6% { color: var(--mix-cobalt); border-color: rgba(52, 60, 237, .5); box-shadow: 0 0 0 3px rgba(52, 60, 237, .1); }
}
.mix-story-answer.is-active .mix-answer-card button { animation: mix-send-pulse 3s ease-in-out 2.8s infinite; }
.mix-answer-card { box-shadow: 0 46px 125px rgba(6, 8, 66, .46), 0 8px 28px rgba(6, 8, 66, .28), inset 0 1px 0 rgba(255, 255, 255, .9); }

/* Responsivo e acessibilidade da camada nova */
@media (max-width: 800px) {
  /* Sem espaço lateral para chips e micro-fontes; ficam o arco e as linhas até o card */
  .mix-dep-chip, .mix-dep-micro { display: none; }
  .mix-sat, .mix-sat-lines { display: none; }
  .mix-dep-lines .mix-chip-line, .mix-dep-lines .mix-micro-line { display: none; }
  .mix-dep-lines .mix-chipflow, .mix-dep-lines .mix-microflow { display: none; }
  .mix-ai-quote { max-width: 150px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-dep-lines path { stroke-dashoffset: 0 !important; }
  .mix-dep-chip, .mix-dep-micro, .mix-ai-quote { opacity: 1 !important; }
  .mix-flow, .mix-dflow { display: none; }
  .lp-franquias-root > .hero::before { display: none; }
}

/* ============================================================
   Camada "modo SOCEO" — a LP ilustra o funcionamento real:
   @ referencia recursos · ⌖ certifica evidência · rastro
   operacional (Pensando/telemetria) · Execução Matemática laranja
   ============================================================ */

/* 01 — vislumbres fantasma do produto flutuando na abertura */
.mix-intro-ghost {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 15px;
  border: 1px solid rgba(21, 21, 23, .07);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 22px 55px rgba(30, 25, 80, .12);
  opacity: 0;
  pointer-events: none;
}
.mix-intro-ghost small { color: #8a8a94; font: 750 7.5px/1 Inter, sans-serif; letter-spacing: .14em; }
.mix-intro-ghost strong { color: #2c2c33; font: 650 13px/1.25 Inter, sans-serif; letter-spacing: -.01em; max-width: 200px; }
.mix-intro-ghost span { color: var(--mix-cobalt); font: 650 9px/1 Inter, sans-serif; }
.mix-intro-ghost-a { left: 4.5%; top: 31%; rotate: -4deg; }
.mix-intro-ghost-b { right: 3.8%; top: 36%; rotate: 3deg; }
.mix-intro-ghost-b strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }
.mix-intro-ghost-c { left: 5.5%; top: 60%; rotate: 2deg; }
.mix-story-intro.is-active .mix-intro-ghost {
  animation: mix-ghost-in 900ms ease 500ms forwards, mix-breathe 6.5s ease-in-out 1.9s infinite;
}
.mix-story-intro.is-active .mix-intro-ghost-b { animation-delay: 800ms, 2.3s; }
.mix-story-intro.is-active .mix-intro-ghost-c { animation-delay: 1100ms, 2.7s; }
@keyframes mix-ghost-in { from { opacity: 0; translate: 0 14px; } to { opacity: .85; translate: 0 0; } }

/* 03 — rastro operacional com telemetria real (tempo, tokens, janela) */
.mix-source-img { background: #fff; border: 1px solid #e8e6f0; }
.mix-source-img img { width: 17px; height: 17px; object-fit: contain; }
.mix-source-soceo { background: var(--mix-cobalt); }
.mix-research-telemetry {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(30, 30, 60, .08);
  color: #8a8a96;
  font: 600 9px/1 Inter, Arial, sans-serif;
  letter-spacing: .05em;
}
.mix-tel-think { display: inline-flex; color: var(--mix-cobalt); font-weight: 750; }
.mix-tel-think i { font-style: normal; opacity: .2; }
.mix-story-search.is-active .mix-tel-think i { animation: mix-dot 1.4s ease-in-out infinite; }
.mix-story-search.is-active .mix-tel-think i:nth-child(2) { animation-delay: 180ms; }
.mix-story-search.is-active .mix-tel-think i:nth-child(3) { animation-delay: 360ms; }
.mix-research-telemetry em { font-style: normal; }
.mix-research-telemetry em:first-of-type { margin-left: auto; }

/* 04 — reúne: sincronização viva (badge, contadores subindo, legenda) */
.mix-connection-token::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #35d07f;
  border: 2px solid #fff;
}
.mix-story-connect.is-active .mix-connection-token::after { animation: mix-ping 2.4s ease-out calc(var(--delay) + 1200ms) infinite; }
@keyframes mix-ping {
  0% { box-shadow: 0 0 0 0 rgba(53, 208, 127, .45); }
  60%, 100% { box-shadow: 0 0 0 7px rgba(53, 208, 127, 0); }
}
.mix-sync-pop {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  color: rgba(210, 255, 230, .9);
  font: 700 10px/1 Inter, Arial, sans-serif;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy) - 42px));
}
.mix-story-connect.is-active .mix-sync-pop { animation: mix-sync-rise 3.6s ease-out var(--pop-delay, 1.5s) infinite; }
@keyframes mix-sync-rise {
  0% { opacity: 0; translate: 0 0; }
  12% { opacity: .95; }
  55% { opacity: .55; }
  100% { opacity: 0; translate: 0 -32px; }
}
.mix-hub-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  padding: 5px 11px;
  border: 1px solid rgba(190, 240, 210, .25);
  border-radius: 999px;
  background: rgba(8, 30, 22, .55);
  color: rgba(210, 250, 225, .82);
  font: 650 9px/1 Inter, Arial, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transform: translate(-50%, 86px);
  opacity: 0;
}
.mix-story-connect.is-active .mix-hub-caption { animation: mix-chip-pop 600ms cubic-bezier(.18, .9, .24, 1.2) 1600ms forwards; }

/* 05 — a aba que desce: Execução Matemática (identidade laranja) */
.mix-reasoning-card { transform: translateY(-40px); }
.mix-math-link {
  position: absolute;
  left: 50%;
  top: calc(50% + 76px);
  z-index: 3;
  width: 2px;
  height: 28px;
  margin-left: -1px;
  background: linear-gradient(180deg, rgba(255, 154, 61, 0), rgba(255, 154, 61, .85));
  transform-origin: top;
  scale: 1 0;
}
.mix-story-calculate.is-active .mix-math-link { animation: mix-link-grow 400ms ease 1400ms forwards; }
@keyframes mix-link-grow { to { scale: 1 1; } }
.mix-math-trace {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 580px;
  padding: 11px 16px 9px;
  border: 1px solid rgba(255, 154, 61, .32);
  border-left: 3px solid #ff9a3d;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(44, 28, 14, .93), rgba(28, 19, 13, .92));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 190, 120, .12);
  font-family: "JetBrains Mono", "DM Mono", ui-monospace, monospace;
  transform: translate(-50%, 104px);
  opacity: 0;
}
.mix-story-calculate.is-active .mix-math-trace { animation: mix-tray-drop 600ms cubic-bezier(.16, 1, .3, 1) 1550ms forwards; }
@keyframes mix-tray-drop {
  from { opacity: 0; translate: 0 -14px; clip-path: inset(0 0 96% 0 round 14px); }
  to { opacity: 1; translate: 0 0; clip-path: inset(0 0 0% 0 round 14px); }
}
.mix-math-head { display: flex; align-items: center; gap: 8px; }
.mix-math-flag {
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: #ff9a3d;
  color: #241303;
  font: 800 10px/21px Inter, sans-serif;
  text-align: center;
}
.mix-math-head strong { color: #ffd9ae; font: 750 10.5px/1 Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; }
.mix-math-head em { margin-left: auto; color: rgba(255, 205, 150, .55); font: 500 9px/1 Inter, sans-serif; font-style: normal; }
.mix-math-trace ol { margin: 9px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.mix-math-trace li { display: grid; grid-template-columns: 88px 1fr auto; gap: 10px; align-items: baseline; opacity: 0; }
.mix-math-trace li b { color: rgba(255, 170, 90, .85); font: 750 8px/1.3 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mix-math-trace li code { color: #f4e8d8; font: 500 10.5px/1.35 "JetBrains Mono", ui-monospace, monospace; }
.mix-math-trace li code u { color: #9db4ff; text-decoration: underline dotted; text-underline-offset: 2px; }
.mix-math-trace li code s { text-decoration: none; color: #ffb46b; font-weight: 700; }
.mix-math-trace li code i { color: rgba(244, 232, 216, .5); font-style: normal; font-size: 9px; }
.mix-math-trace li small { color: rgba(255, 205, 150, .5); font: 600 8.5px/1 Inter, sans-serif; }
.mix-story-calculate.is-active .mix-math-trace li { animation: mix-trace-line 420ms ease calc(1800ms + var(--tl) * 220ms) forwards; }
@keyframes mix-trace-line { from { opacity: 0; translate: -8px 0; } to { opacity: 1; translate: 0 0; } }
.mix-math-trace li:last-child code::after { content: "▌"; margin-left: 4px; color: #ffb46b; animation: mix-cursor-blink 900ms steps(1, end) infinite; }
.mix-math-foot {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed rgba(255, 154, 61, .25);
  color: rgba(255, 205, 150, .45);
  font: 500 8.5px/1.3 Inter, sans-serif;
  letter-spacing: .06em;
}

/* 06 — resposta com prova: alvos ⌖ navegáveis */
.mix-answer-card header { grid-template-columns: 40px 1fr auto; }
.mix-proof-badge {
  align-self: start;
  padding: 6px 10px;
  border: 1px solid rgba(52, 60, 237, .25);
  border-radius: 999px;
  background: #eef0ff;
  color: var(--mix-cobalt);
  font: 700 8.5px/1 Inter, sans-serif;
  letter-spacing: .05em;
  white-space: nowrap;
  opacity: 0;
}
.mix-story-answer.is-active .mix-proof-badge { animation: mix-chip-pop 550ms cubic-bezier(.18, .9, .24, 1.2) 2100ms forwards; }
.mix-target {
  background: none;
  color: var(--mix-cobalt);
  text-decoration: underline dotted rgba(52, 60, 237, .45);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.mix-evidence-label { display: block; padding: 13px 25px 0; color: #9c9ca8; font: 700 7.5px/1 Inter, sans-serif; letter-spacing: .13em; }
.mix-answer-evidence { padding-top: 8px; }
.mix-answer-evidence i {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--mix-cobalt);
  font: 700 10px/1 Inter, sans-serif;
  font-style: normal;
}
.mix-evidence-trigger:focus-visible {
  outline: 2px solid var(--mix-cobalt);
  outline-offset: 2px;
}
.mix-evidence-dialog[hidden] { display: none; }
.mix-evidence-dialog {
  position: absolute;
  left: 50%;
  bottom: 82px;
  z-index: 9;
  width: min(520px, calc(100% - 50px));
  padding: 13px 15px 14px;
  border: 1px solid rgba(52, 60, 237, .22);
  border-radius: 15px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 58px rgba(18, 20, 82, .24);
  color: #292932;
  transform: translateX(-50%);
}
.mix-evidence-dialog:focus { outline: 3px solid var(--soceo-focus-ring); outline-offset: 2px; }
.mix-evidence-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mix-evidence-dialog-head small { color: var(--mix-cobalt); font: 750 8px/1 Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.mix-evidence-close { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #eff0ff; color: var(--mix-cobalt); font: 700 17px/1 Inter, sans-serif; cursor: pointer; }
.mix-evidence-dialog > strong { display: block; margin-top: 7px; font: 750 12px/1.2 Inter, sans-serif; }
.mix-evidence-dialog > p { margin: 5px 0 0; color: #666670; font: 550 10px/1.4 Inter, sans-serif; }
.mix-mobile-dependencies,
.mix-math-mobile-summary { display: none; }

/* Responsivo e acessibilidade da camada SOCEO */
@media (max-width: 800px) {
  .mix-intro-ghost, .mix-sync-pop, .mix-hub-caption,
  .mix-math-link, .mix-math-trace { display: none; }
  .mix-reasoning-card { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mix-intro-ghost, .mix-hub-caption,
  .mix-math-trace, .mix-math-trace li, .mix-proof-badge { opacity: 1 !important; }
  .mix-math-link { scale: 1 1 !important; }
  .mix-sync-pop { display: none; }
}

/* ============================================================
   REÚNE reformado — radar orbital, curvas com brilho, holofote
   ============================================================ */

.mix-connections-canvas::before {
  content: "";
  position: absolute;
  inset: -14% -6%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(150, 255, 200, .14), rgba(150, 255, 200, .05) 44%, transparent 70%);
}

.mix-radar {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 840px;
  height: 840px;
  margin: -420px 0 0 -420px;
  pointer-events: none;
  scale: 1 .42;
  mask-image: radial-gradient(circle, transparent 0 80px, #000 130px 48%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, transparent 0 80px, #000 130px 48%, transparent 62%);
  opacity: 0;
}
.mix-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(154, 162, 255, .25) 0 20deg, rgba(154, 162, 255, .06) 30deg, transparent 38deg 360deg);
}
.mix-story-connect.is-active .mix-radar { animation: mix-ring-in 800ms ease 1100ms forwards; }
.mix-story-connect.is-active .mix-radar::before { animation: mix-spin 5s linear infinite; }
@keyframes mix-spin { to { rotate: 360deg; } }

/* o feixe acende cada ferramenta ao passar */
@keyframes mix-sweep-glow {
  0%, 7%, 100% {
    box-shadow: 0 23px 55px rgba(9, 12, 45, .28), 0 4px 15px rgba(9, 12, 45, .15);
    border-color: rgba(72, 79, 150, .14);
  }
  3% {
    box-shadow: 0 23px 55px rgba(9, 12, 45, .28), 0 4px 15px rgba(9, 12, 45, .15), 0 0 0 2px rgba(154, 162, 255, .72), 0 0 38px 5px rgba(122, 132, 255, .42);
    border-color: rgba(174, 178, 255, .88);
  }
}

/* núcleo com anel externo girando e mais camadas de luz */
.mix-hub::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px dashed rgba(202, 206, 255, .38);
}
.mix-story-connect.is-active .mix-hub::after { animation: mix-spin 26s linear infinite; }
.mix-hub::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .35), transparent 46%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mix-radar { display: none; }
  .mix-net-line { stroke-dashoffset: 0 !important; }
  .mix-orbit-ring { opacity: 1 !important; }
}

/* ============================================================
   Refinamento causal final — cada cena entra, processa e repousa
   ============================================================ */

/* 01 — evidências chegam em ordem e confirmam o ciclo uma vez */
.mix-story-intro.is-active .mix-intro-ghost {
  animation:
    mix-causal-ghost-in 520ms cubic-bezier(.16, 1, .3, 1) 360ms both,
    mix-causal-proof 620ms ease 1.45s 1 both;
}
.mix-story-intro.is-active .mix-intro-ghost-b { animation-delay: 540ms, 1.62s; }
.mix-story-intro.is-active .mix-intro-ghost-c { animation-delay: 720ms, 1.79s; }
@keyframes mix-causal-ghost-in {
  from { opacity: 0; translate: 0 18px; scale: .94; }
  to { opacity: .85; translate: 0 0; scale: 1; }
}
@keyframes mix-causal-proof {
  0%, 100% { border-color: rgba(21, 21, 23, .07); box-shadow: 0 22px 55px rgba(30, 25, 80, .12); }
  50% { border-color: rgba(52, 60, 237, .28); box-shadow: 0 22px 55px rgba(30, 25, 80, .12), 0 0 0 4px rgba(52, 60, 237, .08); }
}

/* 02 — oito provedores em duas fileiras, fora da zona da pergunta */
.mix-ai-token {
  opacity: 0;
  --reply-shift: 0px;
  --reply-tail: 50%;
  --reply-enter-y: 7px;
  --reply-exit-y: -3px;
  width: 96px;
  min-height: 72px;
  box-sizing: border-box;
  transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) rotate(var(--drop-r));
}
.mix-ai-token img { width: 27px; height: 27px; }
.mix-ai-token span {
  max-width: 100%;
  font-size: 9.5px;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
}
.mix-ai-token[data-row="top"] { --entry-y: -34px; }
.mix-ai-token[data-row="bottom"] { --entry-y: 34px; }
.mix-story-question.mix-typed-done .mix-ai-token {
  animation: mix-ai-arrive 520ms cubic-bezier(.18, .9, .24, 1.25) var(--delay) both;
}
@keyframes mix-ai-arrive {
  from {
    opacity: 0;
    transform: translate(
      calc(-50% + var(--drop-x)),
      calc(-50% + var(--drop-y) - 460px)
    ) rotate(0deg) scale(.78);
  }
  58% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate(calc(-50% + var(--drop-x)), calc(-50% + var(--drop-y))) rotate(var(--drop-r)) scale(1);
  }
}
@keyframes mix-causal-particle {
  0%, 100% { opacity: 0; }
  16%, 76% { opacity: .9; }
}
.mix-story-question.is-active .mix-question-aura { animation: mix-aura-rest 5.8s ease-in-out 1.8s infinite; }
@keyframes mix-aura-rest { 50% { opacity: .72; scale: 1.035; } }

.mix-ai-reply {
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  bottom: calc(100% + 11px);
  z-index: 7;
  margin: 0;
  width: max-content;
  max-width: 210px;
  box-sizing: border-box;
  padding: 7px 11px 8px;
  border: 1px solid rgba(38, 35, 55, .1);
  border-radius: 11px;
  background: rgba(255, 255, 255, .97);
  color: #3f3b49;
  box-shadow: 0 15px 34px rgba(15, 9, 40, .22);
  font: 600 9px/1.15 Inter, Arial, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(calc(-50% + var(--reply-shift))) translateY(var(--reply-enter-y)) scale(.95);
  transform-origin: var(--reply-tail) 100%;
  opacity: 0;
}
.mix-ai-reply::after {
  content: "";
  position: absolute;
  left: var(--reply-tail);
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(38, 35, 55, .1);
  border-bottom: 1px solid rgba(38, 35, 55, .1);
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.mix-ai-token[data-row="top"] {
  --reply-enter-y: -7px;
  --reply-exit-y: 3px;
}
.mix-ai-token[data-row="top"] .mix-ai-reply {
  top: calc(100% + 11px);
  bottom: auto;
  transform-origin: var(--reply-tail) 0;
}
.mix-ai-token[data-row="top"] .mix-ai-reply::after {
  top: -5px;
  bottom: auto;
  border: 0;
  border-top: 1px solid rgba(38, 35, 55, .1);
  border-left: 1px solid rgba(38, 35, 55, .1);
}
/* Abinha sempre centralizada no meio do texto: a bolha fica centrada no ícone
   (sem deslocamento lateral), igual ao mobile. Assim a fileira de falas não
   fica torta e a rabinha aponta pelo centro de cada texto. */
/* A caixa aparece primeiro; dentro dela o loader azul e "Pensando" ocupam
   exatamente o mesmo espaço da resposta para a troca não deslocar o layout. */
.mix-ai-reply > .mix-ai-thinking,
.mix-ai-reply > .mix-ai-answer {
  grid-area: 1 / 1;
  max-width: none;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
}
.mix-ai-thinking {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--soceo-primary);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  pointer-events: none;
}
.mix-ai-thinking > span {
  display: inline-flex;
  align-items: center;
  max-width: none;
  font: inherit;
  line-height: inherit;
  white-space: nowrap;
}
.mix-ai-spinner {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  box-sizing: border-box;
  border: 1.5px solid rgba(120, 57, 238, .22);
  border-top-color: var(--soceo-primary);
  border-right-color: var(--soceo-primary);
  border-radius: 50%;
}
.mix-ai-answer {
  display: block;
  white-space: inherit;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
}
.mix-ai-token {
  /* cada IA pensa por um tempo próprio (--think-time), como modelos reais */
  --think-delay: calc(.52s + var(--delay, 0ms));
  --answer-delay: calc(var(--think-delay) + var(--think-time, 1.2s));
}
/* 1) a caixa entra já contendo o estado Pensando */
.mix-story-question.mix-typed-done .mix-ai-reply {
  animation: mix-ai-reply-shell-in 320ms cubic-bezier(.16, 1, .3, 1) var(--think-delay) 1 both;
}
/* 2) loader azul + Pensando processam dentro da caixa pelo tempo da IA */
.mix-story-question.mix-typed-done .mix-ai-thinking {
  animation: mix-ai-thinking-life calc(var(--think-time, 1.2s) + 300ms) ease-out var(--think-delay) 1 both;
}
.mix-story-question.mix-typed-done .mix-ai-spinner {
  animation: mix-ai-spinner-turn 280ms linear var(--think-delay) infinite;
}
/* 3) o estado Pensando cruza suavemente para a resposta */
.mix-story-question.mix-typed-done .mix-ai-answer {
  animation: mix-ai-answer-in 280ms cubic-bezier(.16, 1, .3, 1) var(--answer-delay) 1 both;
}
@keyframes mix-ai-spinner-turn {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes mix-ai-thinking-life {
  0% { opacity: 0; visibility: visible; transform: translateY(2px); }
  14%, 78% { opacity: 1; visibility: visible; transform: translateY(0); }
  100% { opacity: 0; visibility: hidden; transform: translateY(-2px); }
}
@keyframes mix-ai-answer-in {
  from { opacity: 0; visibility: hidden; transform: translateY(2px); }
  to { opacity: 1; visibility: visible; transform: translateY(0); }
}
@keyframes mix-ai-reply-shell-in {
  0% {
    opacity: 0;
    transform: translateX(calc(-50% + var(--reply-shift))) translateY(var(--reply-enter-y)) scale(.95);
  }
  38% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--reply-shift))) translateY(0) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateX(calc(-50% + var(--reply-shift))) translateY(0) scale(1);
  }
}

.mix-story-question .mix-side-story { width: 220px; }

/* 03 — consulta, varredura, fontes e telemetria */
.mix-research-query,
.mix-research-telemetry,
.mix-research-results article { opacity: 0; }
.mix-story-search.is-active .mix-research-query[data-motion-phase="query"] {
  animation: mix-causal-phase-in 380ms cubic-bezier(.16, 1, .3, 1) 100ms both;
}
.mix-story-search.is-active .mix-scan-line {
  animation: mix-causal-scan 980ms cubic-bezier(.5, 0, .2, 1) 420ms 1 both;
}
.mix-story-search.is-active .mix-research-results[data-motion-phase="sources"] article {
  animation:
    mix-result-in 420ms cubic-bezier(.16, 1, .3, 1) calc(560ms + var(--row-delay)) both,
    mix-causal-confirm 460ms ease calc(1.38s + var(--row-delay)) 1;
}
.mix-story-search.is-active .mix-research-telemetry[data-motion-phase="telemetry"] {
  animation: mix-causal-phase-in 420ms cubic-bezier(.16, 1, .3, 1) 1.55s both;
}
@keyframes mix-causal-phase-in {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mix-causal-scan {
  0% { opacity: 0; transform: translateY(0); }
  14%, 78% { opacity: .82; }
  100% { opacity: 0; transform: translateY(210px); }
}
@keyframes mix-causal-confirm {
  0%, 100% { border-color: rgba(25, 25, 32, .07); box-shadow: none; }
  50% { border-color: rgba(52, 60, 237, .42); box-shadow: 0 0 0 3px rgba(52, 60, 237, .09); }
}

/* 03 — glifos neutros das fontes internas (sem marcas) */
.mix-source-glyph { background: rgba(52, 60, 237, .09); }
.mix-source-glyph svg { width: 16px; height: 16px; fill: none; stroke: var(--mix-cobalt); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* 03 — satélites de categoria fora do painel (sem marcas), como no CALCULA */
.mix-sat {
  position: absolute;
  z-index: 1;
  width: 138px;
  padding: 8px 9px 9px;
  border: 1px solid rgba(34, 32, 55, .08);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #f7f6fd);
  box-shadow: 0 14px 36px rgba(37, 42, 110, .13);
  opacity: 0;
}
.mix-sat small { display: block; margin-bottom: 6px; color: #7d7d89; font: 700 8px/1 Inter, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
/* lado do satélite = coluna do item correspondente na lista; linha mira a row exata */
.mix-sat-sheet { left: -178px; top: -12px; }
.mix-sat-db { right: -178px; top: -12px; }
.mix-sat-note { left: -196px; top: 126px; }
.mix-sat-dash { right: -196px; top: 124px; }
.mix-sat-ads { left: -178px; bottom: -8px; }
.mix-sat-chat { right: -178px; bottom: -8px; }
/* satélites entram em cascata só depois da lista interna terminar */
.mix-story-search.is-active .mix-sat {
  animation:
    mix-sat-in 560ms cubic-bezier(.16, 1, .3, 1) calc(2.1s + var(--sat-d)) both,
    mix-breathe 6s ease-in-out calc(3.4s + var(--sat-d)) infinite;
}
@keyframes mix-sat-in { from { opacity: 0; transform: translateY(22px) scale(.72); } to { opacity: 1; transform: none; } }

.mix-sheet-grid { display: grid; grid-template-columns: 1fr 1fr 1.35fr; gap: 3px; }
.mix-sheet-grid b { height: 8px; border-radius: 2px; background: rgba(52, 60, 237, .18); }
.mix-sheet-grid i { height: 10px; border-radius: 2px; background: #ececf2; }
.mix-sheet-grid u { display: flex; align-items: center; justify-content: flex-end; height: 10px; color: #4a4a55; font: 700 7.5px/1 "JetBrains Mono", monospace; text-decoration: none; }
.mix-sheet-grid u.is-hot { color: var(--mix-cobalt); }

.mix-db-rows { display: grid; gap: 3px; }
.mix-db-rows span { display: flex; align-items: center; justify-content: space-between; height: 15px; padding: 0 6px; border-radius: 4px; background: #f1f0f7; }
.mix-db-rows i { color: #5b5b66; font: 600 7.5px/1 "JetBrains Mono", monospace; font-style: normal; }
.mix-db-rows em { color: #16a34a; font: 700 7px/1 Inter, sans-serif; font-style: normal; }
.mix-db-rows em.is-hot { color: #dc2626; }

.mix-note-card { position: relative; padding: 8px 8px 9px; border: 1px solid #ece5cb; border-radius: 8px; background: #fffdf3; }
.mix-note-card::after { content: ""; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: #ece5cb #f4f2fb; }
.mix-note-card b { display: block; width: 62%; height: 7px; margin-bottom: 6px; border-radius: 2px; background: #e2d9b6; }
.mix-note-card i { display: block; height: 5px; margin-top: 4px; border-radius: 2px; background: #eee9d2; }
.mix-note-card i.is-mark { width: 72%; background: rgba(52, 60, 237, .34); }

.mix-dash-mini { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 46px; padding: 5px 6px; border-radius: 8px; background: #f1f0f7; }
.mix-dash-mini span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: #c9c8dd; }
.mix-dash-mini span.is-hot { background: var(--mix-cobalt); }
.mix-dash-mini svg { position: absolute; left: 6px; right: 6px; top: 4px; width: calc(100% - 12px); height: 20px; fill: none; stroke: #8f8cc9; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.mix-ads-mini { display: grid; gap: 5px; }
.mix-ads-creative { position: relative; height: 26px; border-radius: 6px; background: linear-gradient(120deg, #e6e4f4, #d4d2ea); }
.mix-ads-creative::after { content: "AD"; position: absolute; top: 3px; right: 4px; padding: 1px 3px; color: #8f8cc9; border: 1px solid #b9b6dd; border-radius: 3px; font: 700 5.5px/1 Inter, sans-serif; letter-spacing: .06em; }
.mix-ads-row { display: flex; align-items: center; justify-content: space-between; }
.mix-ads-row i { color: #7d7d89; font: 700 7px/1 Inter, sans-serif; font-style: normal; letter-spacing: .06em; }
.mix-ads-row em { color: #dc2626; font: 800 8.5px/1 Inter, sans-serif; font-style: normal; }
.mix-ads-bar { height: 5px; border-radius: 999px; background: #ececf2; overflow: hidden; }
.mix-ads-bar i { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--mix-cobalt); }

.mix-chat-rows { display: grid; gap: 4px; }
.mix-chat-rows span { display: flex; align-items: flex-start; gap: 4px; }
.mix-chat-rows i { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #d6d5e4; }
.mix-chat-rows b { flex: 1; max-width: var(--w, 100%); height: 13px; border-radius: 3px 8px 8px 8px; background: #f1f0f7; }
.mix-chat-rows span.is-hot i { background: rgba(52, 60, 237, .45); }
.mix-chat-rows span.is-hot b { border: 1px solid rgba(52, 60, 237, .28); background: rgba(52, 60, 237, .12); }

.mix-sat-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mix-sat-line { fill: none; stroke: rgba(52, 60, 237, .30); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mix-story-search.is-active .mix-sat-line { animation: mix-line-draw 700ms cubic-bezier(.5, 0, .2, 1) calc(2.75s + var(--sl)) forwards; }

/* 04 — ferramentas em ondas, pacotes e resposta finita do núcleo */
.mix-story-connect.is-active .mix-connection-token {
  animation: mix-connection-in 520ms cubic-bezier(.16, 1, .3, 1) calc(80ms + var(--delay)) both;
}
.mix-story-connect.is-active .mix-flow {
  animation: mix-causal-particle 4.4s ease 900ms 1 both;
}
.mix-story-connect.is-active .mix-connection-token::after {
  animation: mix-ping 760ms ease-out calc(var(--delay) + 1.1s) 2;
}
.mix-story-connect.is-active .mix-hub {
  animation:
    mix-causal-hub-in 520ms cubic-bezier(.16, 1, .3, 1) 820ms both,
    mix-causal-hub-receive 430ms ease 2.2s 3;
}
.mix-story-connect.is-active .mix-hub-orbit {
  animation: mix-causal-orbit 820ms ease 1.18s 2 both;
}
.mix-story-connect.is-active .mix-sync-pop {
  animation: mix-sync-rise 1.7s ease-out var(--pop-delay, 1.5s) 1 both;
}
.mix-hub-source-status {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 5px;
  color: rgba(255, 255, 255, .88);
  font: 650 8px/1 Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mix-hub-source-status b {
  min-width: 10px;
  color: #fff;
  font-size: 10px;
}
.mix-story-connect.is-active .mix-hub-caption { animation-delay: 3.25s; }
.mix-story-connect.is-active .mix-radar { animation: mix-ring-in 520ms ease 940ms forwards; }
.mix-story-connect.is-active .mix-radar::before { animation: mix-spin 1.8s cubic-bezier(.4, 0, .2, 1) 1.05s 1 both; }
.mix-story-connect.is-active .mix-hub::after { animation: mix-spin 3.6s ease 1.05s 1 both; }
@keyframes mix-causal-hub-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.8); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mix-causal-hub-receive {
  50% { box-shadow: 0 35px 82px rgba(9, 12, 45, .42), 0 0 0 22px rgba(154, 162, 255, .16); }
}
@keyframes mix-causal-orbit {
  50% { transform: scale(1.11); opacity: .28; }
}

/* 05 — o cálculo conclui e só então apresenta a causa */
.mix-story-calculate.is-active .mix-reasoning-progress i {
  animation: mix-progress 2.1s cubic-bezier(.5, 0, .2, 1) 1 both;
}
.mix-reasoning-card [data-motion-phase="diagnosis"] { opacity: 0; }
.mix-story-calculate.is-active .mix-reasoning-card [data-motion-phase="diagnosis"] {
  animation: mix-causal-phase-in 460ms cubic-bezier(.16, 1, .3, 1) 1.72s both;
}
.mix-story-calculate.is-active .mix-metric {
  animation: mix-metric-in 620ms cubic-bezier(.16, 1, .3, 1) 240ms both;
}
.mix-story-calculate.is-active .mix-metric-b { animation-delay: 360ms; }
.mix-story-calculate.is-active .mix-metric-c { animation-delay: 480ms; }
.mix-story-calculate.is-active .mix-metric-d { animation-delay: 600ms; }
.mix-story-calculate.is-active .mix-dep-chip {
  animation: mix-chip-pop 600ms cubic-bezier(.18, .9, .24, 1.2) calc(1.16s + var(--chip-delay, 0ms)) forwards;
}
.mix-story-calculate.is-active .mix-dep-micro {
  animation: mix-micro-in 480ms ease calc(1.82s + var(--micro-delay, 0ms)) forwards;
}

/* 06 — diagnóstico, explicação, provas e ação em sequência */
.mix-answer-card [data-motion-phase="diagnosis"],
.mix-answer-card [data-motion-phase="explanation"],
.mix-answer-card [data-motion-phase="evidence"],
.mix-answer-card [data-motion-phase="action"] { opacity: 0; }
.mix-story-answer.is-active .mix-answer-card [data-motion-phase="diagnosis"] {
  animation: mix-causal-phase-in 430ms cubic-bezier(.16, 1, .3, 1) 220ms both;
}
.mix-story-answer.is-active .mix-answer-card [data-motion-phase="explanation"] {
  animation: mix-causal-phase-in 430ms cubic-bezier(.16, 1, .3, 1) 560ms both;
}
.mix-story-answer.is-active .mix-answer-card [data-motion-phase="evidence"] {
  animation: mix-causal-phase-in 430ms cubic-bezier(.16, 1, .3, 1) 860ms both;
}
.mix-story-answer.is-active .mix-answer-evidence[data-motion-phase="evidence"] .mix-evidence-trigger {
  opacity: 0;
  animation: mix-causal-chip-in 360ms cubic-bezier(.16, 1, .3, 1) 980ms both;
}
.mix-story-answer.is-active .mix-answer-evidence[data-motion-phase="evidence"] .mix-evidence-trigger:nth-child(2) { animation-delay: 1.08s; }
.mix-story-answer.is-active .mix-answer-evidence[data-motion-phase="evidence"] .mix-evidence-trigger:nth-child(3) { animation-delay: 1.18s; }
.mix-story-answer.is-active .mix-answer-card [data-motion-phase="action"] {
  animation: mix-causal-phase-in 430ms cubic-bezier(.16, 1, .3, 1) 1.34s both;
}
.mix-story-answer.is-active .mix-answer-card [data-motion-phase="action"] button {
  animation: mix-causal-action-pulse 620ms ease 1.66s 1 both;
}
.mix-story-answer.is-active .mix-proof-badge {
  animation: mix-chip-pop 440ms cubic-bezier(.18, .9, .24, 1.2) 820ms forwards;
}
@keyframes mix-causal-chip-in {
  from { opacity: 0; translate: 0 8px; scale: .96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes mix-causal-action-pulse {
  50% { box-shadow: 0 0 0 8px rgba(52, 60, 237, .15); }
}

/* Mobile: reflow real da pergunta, sem miniaturizar um canvas de 900 px */
@media (max-width: 480px) {
  .lp-franquias-root.mix-story-active .hero-chrome.controls {
    top: 58px !important;
    right: 14px !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    flex-direction: row !important;
    gap: 8px !important;
    transform: none !important;
  }
  .lp-franquias-root.mix-story-active[data-mix-index="0"] .hero-chrome.controls {
    top: 14px !important;
  }
  .lp-franquias-root.mix-story-active[data-mix-index="1"] .hero-chrome.controls {
    top: 14px !important;
  }
  .lp-franquias-root.mix-story-active[data-mix-index="1"] .mix-story-question .mix-story-verb {
    justify-self: start;
  }
  .mix-story-question .mix-story-object {
    width: calc(100vw - 28px);
    height: 300px;
    scale: 1;
  }
  .mix-story-question .mix-question-search {
    width: calc(100% - 32px);
    height: 58px;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 0 10px 0 14px;
    border-radius: 16px;
  }
  .mix-story-question .mix-type-viewport { font-size: 12px; }
  .mix-story-question .mix-search-plus { width: 17px; height: 17px; }
  .mix-story-question .mix-search-tools { gap: 7px; }
  .mix-story-question .mix-search-tools svg { width: 17px; height: 17px; }
  .mix-story-question .mix-send-arrow { width: 27px; height: 27px; font-size: 15px; }
  .mix-story-question .mix-question-aura { width: 100%; height: 180px; }
  .mix-story-question .mix-ai-token {
    width: 68px;
    min-height: 62px;
    padding: 7px 5px 6px;
    border-radius: 15px;
  }
  .mix-story-question .mix-ai-token img { width: 23px; height: 23px; }
  .mix-story-question .mix-ai-token span {
    font-size: 7.5px;
    line-height: 1.05;
    white-space: normal;
  }
  .mix-story-question .mix-ai-token[data-row="top"] { --drop-y: -158px !important; }
  .mix-story-question .mix-ai-token[data-row="bottom"] { --drop-y: 154px !important; }
  .mix-story-question .mix-ai-token[data-provider="Codex"],
  .mix-story-question .mix-ai-token[data-provider="Gemini"] { --drop-x: -139px !important; }
  .mix-story-question .mix-ai-token[data-provider="Claude"],
  .mix-story-question .mix-ai-token[data-provider="Qwen"] { --drop-x: -46px !important; }
  .mix-story-question .mix-ai-token[data-provider="Perplexity"],
  .mix-story-question .mix-ai-token[data-provider="DeepSeek"] { --drop-x: 46px !important; }
  .mix-story-question .mix-ai-token[data-provider="Microsoft Copilot"],
  .mix-story-question .mix-ai-token[data-provider="Grok"] { --drop-x: 139px !important; }
  .mix-story-question .mix-ai-token[data-provider="Codex"],
  .mix-story-question .mix-ai-token[data-provider="Gemini"] {
    --reply-shift: 0px;
    --reply-tail: 50%;
  }
  .mix-story-question .mix-ai-token[data-provider="Microsoft Copilot"],
  .mix-story-question .mix-ai-token[data-provider="Grok"] {
    --reply-shift: 0px;
    --reply-tail: 50%;
  }
  .mix-story-question .mix-ai-reply {
    bottom: calc(100% + 9px);
    width: 82px;
    max-width: 82px;
    min-height: 34px;
    padding: 5px 6px 6px;
    font-size: 8.5px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
  }
  .mix-story-question .mix-ai-token[data-row="top"] .mix-ai-reply {
    top: calc(100% + 9px);
    bottom: auto;
  }
}

/* Mobile real: cada painel reflui em vez de encolher o canvas desktop */
@media (max-width: 480px) {
  .mix-story-layout {
    padding-top: 18px;
    padding-bottom: 128px;
    grid-template-rows: auto minmax(330px, 1fr);
    gap: 4px;
  }
  .lp-franquias-root.mix-story-active:not([data-mix-index="0"]) .mix-story-layout {
    padding-top: 76px;
  }
  .lp-franquias-root.mix-story-active .mix-hero-prog {
    right: auto;
    bottom: 96px;
    left: 50%;
    width: 148px;
    transform: translateX(-50%);
  }
  .mix-story-search .mix-story-object,
  .mix-story-connect .mix-story-object,
  .mix-story-calculate .mix-story-object,
  .mix-story-answer .mix-story-object {
    width: calc(100vw - 28px);
    height: 330px;
    scale: 1;
  }

  /* 01 — mantém os três sinais sem disputar espaço com o título */
  .mix-intro-ghost {
    top: 58px;
    bottom: auto;
    display: flex !important;
    width: 110px;
    min-height: 50px;
    box-sizing: border-box;
    gap: 2px;
    padding: 7px 8px;
    border-radius: 11px;
  }
  .mix-intro-ghost-a { left: 8px; }
  .mix-intro-ghost-b { left: 50%; right: auto; transform: translateX(-50%); }
  .mix-intro-ghost-c { left: auto; right: 8px; }
  .mix-intro-ghost small { font-size: 5.5px; }
  .mix-intro-ghost strong,
  .mix-intro-ghost-b strong { font-size: 8.5px; line-height: 1.15; }
  .mix-intro-ghost span { font-size: 6.5px; }

  /* 03 — lista de fontes em uma coluna legível */
  .mix-research-shell {
    width: 100%;
    height: 326px;
    box-sizing: border-box;
    padding: 9px 10px 8px;
    border-radius: 18px;
  }
  .mix-research-topbar {
    height: 20px;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    gap: 6px;
    font-size: 7.5px;
  }
  .mix-research-topbar > span { width: 7px; height: 7px; box-shadow: 0 0 0 3px rgba(52, 60, 237, .1); }
  .mix-research-topbar strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .mix-research-query { height: 40px; gap: 8px; padding: 0 10px; border-radius: 11px; font-size: 12px; }
  .mix-research-query svg { width: 16px; height: 16px; }
  .mix-research-results { grid-template-columns: 1fr; gap: 4px; margin-top: 6px; }
  .mix-research-results article {
    height: 34px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 7px;
    padding: 3px 7px;
    border-radius: 9px;
  }
  .mix-source-mark { width: 24px; height: 24px; border-radius: 7px; }
  .mix-source-img img { width: 14px; height: 14px; }
  .mix-research-results strong { font-size: 10px; }
  .mix-research-results small { margin-top: 1px; font-size: 8px; }
  .mix-research-results b { font-size: 9px; }
  .mix-research-telemetry { gap: 7px; margin-top: 5px; padding-top: 5px; font-size: 7.5px; letter-spacing: .02em; }

  /* 04 — duas fileiras de ferramentas em torno do núcleo */
  .mix-connections-canvas { width: 100%; height: 300px; }
  .mix-connection-token {
    --cx: var(--mcx) !important;
    --cy: var(--mcy) !important;
    width: 62px;
    min-width: 0;
    height: 46px;
    box-sizing: border-box;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 4px 3px;
    border-radius: 11px;
  }
  .mix-connection-token img { width: 18px; height: 18px; }
  .mix-connection-token span {
    width: 58px;
    overflow: hidden;
    font-size: 8.5px;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
  }
  .mix-hub { width: 96px; height: 96px; }
  .mix-hub strong { font-size: 16px; }
  .mix-hub small { margin-top: 5px; font-size: 7px; }
  .mix-hub-source-status { margin-top: 4px; font-size: 6.5px; }
  .mix-hub-source-status b { font-size: 8px; }
  .mix-radar { width: 347px; height: 347px; margin: -174px 0 0 -174px; scale: 1 .52; }
  .mix-sync-pop {
    display: block !important;
    font-size: 7.5px;
    transform: translate(calc(-50% + var(--msx)), calc(-50% + var(--msy)));
  }
  .mix-hub-caption {
    display: block !important;
    padding: 4px 7px;
    font-size: 6.5px;
    transform: translate(-50%, 58px);
  }

  /* 05 — fontes, métricas, raciocínio e ledger em quatro faixas */
  .mix-calculate-object { display: block; }
  .mix-mobile-dependencies {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    display: block;
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    overflow-x: auto;
    padding: 7px 9px;
    border: 1px solid rgba(150, 165, 255, .2);
    border-radius: 11px;
    background: rgba(17, 23, 58, .78);
    scrollbar-width: thin;
  }
  .mix-mobile-dependencies p { width: max-content; margin: 0; color: rgba(220, 226, 255, .74); font: 600 8.5px/1.45 Inter, sans-serif; }
  .mix-mobile-dependencies b { margin-right: 6px; color: #aeb9ff; font-size: 7px; letter-spacing: .09em; }
  .mix-metric {
    top: 52px;
    bottom: auto;
    width: 80px;
    min-height: 48px;
    box-sizing: border-box;
    padding: 8px 9px;
    border-radius: 11px;
  }
  .mix-metric-a { left: 0; }
  .mix-metric-b { left: calc(33.333% - 27px); right: auto; }
  .mix-metric-c { left: calc(66.666% - 53px); }
  .mix-metric-d { left: auto; right: 0; }
  .mix-metric small { font-size: 6.5px; }
  .mix-metric strong { margin-top: 4px; font-size: 13px; }
  .mix-metric span { right: 7px; top: 7px; font-size: 6.5px; }
  .mix-reasoning-card {
    position: absolute;
    left: 50%;
    top: 108px;
    width: 315px;
    min-height: 138px;
    box-sizing: border-box;
    padding: 14px;
    border-radius: 17px;
    transform: translateX(-50%);
  }
  .mix-reasoning-head { grid-template-columns: 26px 1fr auto; gap: 8px; }
  .mix-reasoning-head .mix-spark { width: 26px; height: 26px; }
  .mix-reasoning-head strong { font-size: 12px; }
  .mix-reasoning-head em { font-size: 8px; }
  .mix-equation { gap: 6px; margin: 12px 0 10px; }
  .mix-equation span { padding: 6px 7px; font-size: 7.5px; }
  .mix-equation i { font-size: 12px; }
  .mix-reasoning-card p { margin-top: 11px; font-size: 10px; line-height: 1.35; }
  .mix-math-link { top: 245px; display: block !important; height: 14px; }
  .mix-math-trace {
    left: 50%;
    top: 258px;
    display: block;
    width: 315px;
    box-sizing: border-box;
    padding: 8px 10px 9px;
    border-radius: 11px;
    transform: translateX(-50%);
  }
  .mix-math-head { gap: 6px; }
  .mix-math-flag { width: 18px; height: 18px; font-size: 8px; line-height: 18px; }
  .mix-math-head strong { font-size: 9px; }
  .mix-math-head em { display: none; }
  .mix-math-mobile-summary { display: block; margin: 7px 0 0; color: #f4e8d8; font: 600 9px/1.35 "JetBrains Mono", ui-monospace, monospace; }
  .mix-math-mobile-summary b,
  .mix-math-mobile-summary strong { color: #ffb46b; }
  .mix-math-trace ol,
  .mix-math-foot { display: none; }

  /* 06 — resposta sem miniaturizar diagnóstico, prova e ação */
  .mix-answer-card { width: 100%; min-height: 0; box-sizing: border-box; border-radius: 18px; }
  .mix-answer-card header { position: relative; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 14px 14px 10px; }
  .mix-answer-spark { width: 32px; height: 32px; border-radius: 9px; }
  .mix-answer-card header small { font-size: 7.5px; }
  .mix-answer-card header strong { max-width: 245px; margin-top: 6px; font-size: 14px; line-height: 1.2; }
  .mix-proof-badge { position: absolute; right: 12px; top: 12px; padding: 4px 6px; font-size: 6.5px; }
  .mix-answer-card > p { padding: 0 14px; font-size: 10.5px; line-height: 1.4; }
  .mix-evidence-label { padding: 9px 14px 0; font-size: 7px; letter-spacing: .08em; }
  .mix-answer-evidence { flex-wrap: wrap; gap: 5px; padding: 7px 14px 10px; }
  .mix-evidence-trigger { min-height: 31px; padding: 6px 8px; font-size: 9px; }
  .mix-answer-card footer { min-height: 68px; gap: 9px; padding: 10px 14px; }
  .mix-answer-card footer small { font-size: 7px; }
  .mix-answer-card footer strong { margin-top: 4px; font-size: 10px; }
  .mix-answer-card footer button { min-width: 86px; height: 44px; padding: 0 10px; font-size: 9px; }
  .mix-evidence-dialog { bottom: 68px; width: calc(100% - 24px); padding: 11px 12px 12px; }
  .mix-evidence-close { width: 44px; height: 44px; }
  .mix-evidence-dialog > strong { font-size: 11px; }
  .mix-evidence-dialog > p { font-size: 9.5px; }
}

/* Primeira abertura: o hero só ganha movimento depois de uma intenção explícita. */
.lp-franquias-root:not(.mix-experience-activated) .mix-hero-prog {
  display: none !important;
}
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro,
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro::before,
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro::after,
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro *,
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro *::before,
.lp-franquias-root:not(.mix-experience-activated) .mix-story-intro *::after {
  animation: none !important;
  transition: none !important;
}

/* Acessibilidade: todos os estados finais visíveis e nenhum loop residual */
@media (prefers-reduced-motion: reduce) {
  .mix-skip-cta {
    transition: none !important;
  }
  .mix-story-scene::before,
  .mix-story-scene::after,
  .mix-story-scene *,
  .mix-story-scene *::before,
  .mix-story-scene *::after {
    animation: none !important;
    transition: none !important;
  }
  .mix-research-query,
  .mix-research-telemetry,
  .mix-research-results article,
  .mix-sat,
  .mix-intro-ghost,
  .mix-ai-token,
  .mix-answer-evidence[data-motion-phase="evidence"] .mix-evidence-trigger,
  .mix-answer-card [data-motion-phase],
  .mix-reasoning-card [data-motion-phase] { opacity: 1 !important; }
  .mix-reasoning-progress i { transform: scaleX(1) !important; }
  .mix-sat-line { stroke-dashoffset: 0 !important; }
  .mix-sync-pop {
    display: block !important;
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
  .mix-ai-reply {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(calc(-50% + var(--reply-shift))) translateY(0) scale(1) !important;
  }
  .mix-ai-thinking { display: none !important; }
  .mix-ai-answer {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  @media (max-width: 480px) {
    .mix-story-question .mix-ai-reply {
      width: 82px;
      max-width: 82px;
      min-height: 34px;
      padding: 5px 6px 6px;
      font-size: 8.5px;
      line-height: 1.12;
      text-align: center;
      white-space: normal;
    }
  }
  .mix-radar,
  .mix-flow,
  .mix-dflow { display: none !important; }
}