/* =========================================================
   TEMA AUTOMAÇÃO — escuro, teal, brilho e movimento
   Carregado depois de style.css.
   ========================================================= */
body.theme-auto {
  --acc: var(--teal);
  --acc-2: var(--blue);
  --acc-glow: var(--teal-glow);
  --acc-soft: var(--teal-soft);
  --acc-ink: #04110F;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(38, 217, 195, .10), transparent 60%),
    radial-gradient(900px 600px at 0% 60%, rgba(95, 168, 255, .08), transparent 60%),
    linear-gradient(180deg, #060912 0%, #0A0E1A 100%);
}

/* luz que segue o mouse pela página inteira */
.page-glow {
  position: fixed;
  left: var(--gx, 50vw);
  top: var(--gy, 30vh);
  width: 720px;
  height: 720px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(38, 217, 195, .13), rgba(95, 168, 255, .05) 40%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  transition: left .25s var(--ease), top .25s var(--ease);
  mix-blend-mode: screen;
}
.theme-auto main, .theme-auto .nav, .theme-auto .footer { position: relative; z-index: 1; }

.theme-auto .nav-other { color: var(--muted); border-left: 1px solid var(--line); margin-left: 8px; padding-left: 18px; }

/* ---------- cabeçalho: ocupa a tela ---------- */
.theme-auto .track-hero {
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(110px, 12vw, 150px);
}
.theme-auto .track-hero::before { width: 900px; height: 900px; background: radial-gradient(circle, rgba(38, 217, 195, .34), transparent 65%); }
.theme-auto .track-hero::after { background: radial-gradient(circle, rgba(139, 124, 255, .26), transparent 65%); }
.theme-auto .track-hero .bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(154, 166, 178, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 166, 178, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 65% 45%, #000 15%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 65% 45%, #000 15%, transparent 70%);
  animation: gridDrift 18s linear infinite;
}
@keyframes gridDrift { to { background-position: 64px 64px; } }
.theme-auto .track-hero .scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  z-index: -1;
  background: linear-gradient(180deg, transparent, rgba(38, 217, 195, .09), transparent);
  animation: scan 8s linear infinite;
  pointer-events: none;
}
@keyframes scan { from { top: -25%; } to { top: 125%; } }
/* teto de 86px: acima disso "conversam com" não cabe na coluna e quebra em duas linhas */
.theme-auto .track-hero h2 { font-size: clamp(50px, 6.4vw, 86px); }
.theme-auto .track-hero h2::after {
  content: "_";
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
  animation: blinkCaret 1.1s steps(1) infinite;
}
@keyframes blinkCaret { 50% { opacity: 0; } }

/* hub com profundidade e parallax (--px/--py vêm do JS) */
.theme-auto .hub-big {
  --px: 0; --py: 0;
  transform: perspective(1400px) rotateX(calc(var(--py) * -6deg)) rotateY(calc(var(--px) * 8deg));
  transition: transform .25s var(--ease);
  box-shadow: 0 80px 140px -70px rgba(38, 217, 195, .55), 0 0 0 1px rgba(38, 217, 195, .12) inset;
  background: radial-gradient(600px circle at 50% 50%, rgba(38, 217, 195, .06), transparent 60%), var(--surface);
}
.theme-auto .hub-big .link { stroke: rgba(38, 217, 195, .35); animation-duration: .8s; }
.theme-auto .hub-big .node { transform: translate(calc(var(--px) * 10px), calc(var(--py) * 10px)); transition: transform .3s var(--ease); }
.theme-auto .hub-big .node rect { transition: stroke .3s, filter .3s; }
.theme-auto .hub-big .node:hover rect { filter: drop-shadow(0 0 10px var(--teal)); }
.theme-auto .hub-big .core rect { filter: drop-shadow(0 0 24px rgba(38, 217, 195, .55)); animation: corePulse 3s ease-in-out infinite; }
@keyframes corePulse { 50% { filter: drop-shadow(0 0 40px rgba(38, 217, 195, .85)); } }
.theme-auto .hub-big .pulse { r: 5; }

/* fita de integrações */
.int-ticker {
  margin-top: 60px;
  padding: 14px 0;
  border-block: 1px solid rgba(38, 217, 195, .18);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.int-track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8FE9DC;
}
.int-track span { display: inline-flex; align-items: center; gap: 28px; margin-right: 28px; white-space: nowrap; }
.int-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 10px var(--teal); }

/* ---------- revelações mais cinematográficas ---------- */
.theme-auto .reveal { transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.theme-auto .reveal:not(.is-in) { opacity: 0; transform: translateY(40px) scale(.975); filter: blur(6px); }

/* camadas: a de IA respira */
.theme-auto .layer.ia { animation: layerGlow 4s ease-in-out infinite; }
@keyframes layerGlow { 50% { box-shadow: 0 0 60px -20px rgba(38, 217, 195, .6); border-color: rgba(38, 217, 195, .7); } }
.theme-auto .layers.is-in .layer { transition-duration: 1.1s; }

/* portfólio: inclinação 3D no hover */
.theme-auto .pf-card { --rx: 0deg; --ry: 0deg; transform-style: preserve-3d; }
.theme-auto .pf-card:hover { transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); box-shadow: 0 50px 100px -50px rgba(38, 217, 195, .5); }
.theme-auto .pf-card .shot { transform: translateZ(18px); }
.theme-auto .pf-card.feature .shot img { animation: shotPan 14s ease-in-out infinite alternate; }
@keyframes shotPan { to { object-position: bottom left; } }

/* cenas: as mensagens chegam uma a uma */
.theme-auto .scene .msg { opacity: 0; transform: translateY(10px) scale(.98); }
.theme-auto .scene.is-in .msg { animation: msgIn .55s var(--ease) forwards; }
.theme-auto .scene.is-in .msg:nth-child(1) { animation-delay: .15s; }
.theme-auto .scene.is-in .msg:nth-child(2) { animation-delay: .6s; }
.theme-auto .scene.is-in .msg:nth-child(3) { animation-delay: 1.1s; }
.theme-auto .scene.is-in .msg:nth-child(4) { animation-delay: 1.6s; }
.theme-auto .scene.is-in .msg:nth-child(5) { animation-delay: 2.1s; }
.theme-auto .scene.is-in .msg:nth-child(6) { animation-delay: 2.6s; }
@keyframes msgIn { to { opacity: 1; transform: none; } }
.theme-auto .scene { position: relative; overflow: hidden; }
.theme-auto .scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at 100% 0%, rgba(38, 217, 195, .10), transparent 55%);
  pointer-events: none;
}

/* passos: a linha tracejada corre */
.theme-auto .steps.is-in::before { animation: dashRun 1.2s linear infinite; background-size: 16px 2px; }
@keyframes dashRun { to { background-position: 16px 0; } }

/* encontro das frentes e números */
.theme-auto .meet .glass:hover { border-top-color: var(--c, var(--teal)); box-shadow: 0 30px 60px -40px var(--c, var(--teal)); transform: translateY(-4px); transition: transform .5s var(--ease), box-shadow .5s; }
.theme-auto .numbers { margin-top: 60px; }
.theme-auto .num strong { text-shadow: 0 0 40px rgba(38, 217, 195, .25); }

/* CTA final */
.theme-auto .final .glow { background: radial-gradient(closest-side at 50% 50%, rgba(38, 217, 195, .3), transparent 72%); animation: glowBreath 5s ease-in-out infinite; }
@keyframes glowBreath { 50% { transform: translate(-50%, -50%) scale(1.15); opacity: .8; } }

@media (max-width: 760px) {
  .theme-auto .nav-other { display: none; }
  .theme-auto .track-hero { min-height: 0; }
  .theme-auto .hub-big { transform: none; }
  .page-glow { display: none; }
  .int-ticker { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-auto .reveal:not(.is-in) { filter: none; transform: none; opacity: 1; }
  .theme-auto .track-hero .scan, .theme-auto .track-hero .bg-grid, .theme-auto .layer.ia, .theme-auto .hub-big .core rect { animation: none; }
}

/* =========================================================
   REVISÃO 02/11: sem rótulos pequenos, Central MC3 com agentes 24h
   ========================================================= */
.theme-auto .eyebrow { display: none; }
.theme-auto .sec-head .display, .theme-auto .layers-wrap .display { margin-top: 0; }
.hub-col { display: grid; gap: 16px; align-content: start; }
.hub-cap { margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; color: var(--t2); max-width: 54ch; }
.hub-cap b { color: #fff; }
.hub-cap i { flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(38,217,195,.6); animation: capPulse 2.2s ease-out infinite; }
@keyframes capPulse { 70% { box-shadow: 0 0 0 10px rgba(38,217,195,0); } 100% { box-shadow: 0 0 0 0 rgba(38,217,195,0); } }
.hub-big .badge24 rect { fill: var(--teal); filter: drop-shadow(0 0 12px rgba(38,217,195,.7)); }
.hub-big .badge24 text { fill: #04110F; font: 800 12px var(--f-mono); letter-spacing: .04em; }
@media (max-width: 760px) { .hub-cap { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .hub-cap i { animation: none; } }

/* ---- hub premium: caixas maiores, gradiente, ponto de agente ---- */
.theme-auto .hub-big .node rect { fill: url(#gNode); stroke: rgba(255,255,255,.12); }
.theme-auto .hub-big .node text { font-size: 14px; }
.theme-auto .hub-big .node .sub { font-size: 10.5px; }
.theme-auto .hub-big .node.ag rect { stroke: rgba(38,217,195,.35); }
.theme-auto .hub-big .ag-dot { fill: var(--teal); filter: drop-shadow(0 0 5px var(--teal)); animation: agDot 2s ease-in-out infinite; }
@keyframes agDot { 50% { opacity: .35; } }
.theme-auto .hub-big .core text { font-size: 17px; }
.theme-auto .hub-big .core .sub { font-size: 11.5px; }

/* ---- camadas: numerais grandes, degraus, sem ícones ---- */
.theme-auto .layers-wrap { grid-template-columns: 1fr 1.05fr; gap: 56px; }
.theme-auto .layers-h { font-size: clamp(38px, 4.4vw, 66px); margin: 0 0 22px; }
.theme-auto .layers { gap: 0; perspective: none; }
.theme-auto .layer {
  grid-template-columns: 86px 1fr;
  gap: 20px;
  padding: 26px 28px 26px 24px;
  border-radius: 0 18px 18px 0;
  border: 0;
  border-left: 2px solid rgba(255,255,255,.18);
  background: linear-gradient(90deg, rgba(255,255,255,.03), transparent 70%);
  transform: translateX(-16px);
}
.theme-auto .layer + .layer { margin-top: 8px; }
.theme-auto .layer:nth-child(2) { margin-left: 22px; }
.theme-auto .layer:nth-child(3) { margin-left: 44px; }
.theme-auto .layer.ia { border-left-color: var(--teal); background: linear-gradient(90deg, rgba(38,217,195,.12), transparent 70%); animation: none; }
.theme-auto .layer.int { border-left-color: var(--blue); background: linear-gradient(90deg, rgba(95,168,255,.09), transparent 70%); }
.theme-auto .layer .ln {
  font-family: var(--f-display); font-stretch: 75%; font-weight: 800;
  font-size: 58px; line-height: .9; letter-spacing: -.02em;
  background: var(--metal-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-auto .layer.ia .ln { background: linear-gradient(180deg, #DFFBF6, #26D9C3); -webkit-background-clip: text; background-clip: text; }
.theme-auto .layer.int .ln { background: linear-gradient(180deg, #DCEBFF, #5FA8FF); -webkit-background-clip: text; background-clip: text; }
.theme-auto .layer h4 { font-size: 20px; margin: 6px 0 8px; }
.theme-auto .layer p { font-size: 15px; color: var(--t2); max-width: 44ch; }
.theme-auto .layers.is-in .layer { transform: none; }
@media (max-width: 760px) {
  .theme-auto .layer { grid-template-columns: 56px 1fr; padding: 18px 16px; transform: none; }
  .theme-auto .layer:nth-child(2), .theme-auto .layer:nth-child(3) { margin-left: 0; }
  .theme-auto .layer .ln { font-size: 40px; }
}
@media (max-width: 900px) { .theme-auto .layers-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* títulos de seção: teto de 80px para frases curtas caberem numa linha só em tela larga */
.theme-auto .sec-head h2 { font-size: clamp(40px, 6.4vw, 80px); }
/* títulos: linhas equilibradas, sem palavra sozinha na última linha */
.theme-auto .display, .theme-auto h3, .theme-auto h4 { text-wrap: balance; }
/* quebras que só fazem sentido em tela larga; no celular o texto se equilibra sozinho */
@media (max-width: 640px) { .theme-auto .br-desk { display: none; } }

/* ---------- faixa: empresas que confiam na MC3 (logos nas cores originais) ---------- */
.clientes-sec { padding-top: 40px; }
.theme-auto .clientes-tit { font-size: clamp(30px, 3.6vw, 52px); margin: 0 0 34px; }
.clientes-faixa {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clientes-trilho {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 6px 18px 6px 0;
  list-style: none;
  flex-shrink: 0;
  animation: clientesAnda 48s linear infinite;
}
.clientes-faixa:hover .clientes-trilho { animation-play-state: paused; }
@keyframes clientesAnda { to { transform: translateX(-100%); } }
.cliente {
  display: grid;
  place-items: center;
  height: 104px;
  padding: 0 30px;
  border-radius: 18px;
  background: var(--fundo);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8);
}
.cliente img { display: block; max-width: none; }
@media (max-width: 640px) {
  .clientes-sec { padding-top: 20px; }
  .cliente { height: 84px; padding: 0 22px; }
  .cliente img { zoom: .82; }
}
/* a faixa anda sempre, inclusive com "reduzir movimento" ligado (pedido do Marcio); para ao passar o mouse */
@media (prefers-reduced-motion: reduce) {
  .clientes-trilho { animation-duration: 48s !important; animation-iteration-count: infinite !important; }
}

/* frases em sequência no mesmo título: uma por linha, cada uma equilibrada (o <br> impede o equilíbrio) */
.linha { display: block; }

/* celulares estreitos (até 380px): o título do topo cabe em 3 linhas, sem "empresa." sozinha */
@media (max-width: 380px) { .theme-auto .track-hero h2 { font-size: 46px; } }

/* ---------- celular: diagrama só com o nome de cada quadro; camadas na ordem 01, 02, 03 ---------- */
@media (max-width: 760px) {
  .theme-auto .hub-big .node .sub, .theme-auto .hub-big .core .sub { display: none; }
  .theme-auto .hub-big .node text:not(.sub) { font-size: 21px; transform: translateY(11px); }
  .theme-auto .hub-big .core text:not(.sub) { font-size: 24px; transform: translateY(11px); }
  .theme-auto .layers { display: flex; flex-direction: column-reverse; gap: 12px; }
}
/* menu aberto fica por cima do conteúdo (aqui o topo não é fixo e divide a camada com a página) */
.theme-auto .nav.menu-aberto { z-index: 70; }