/* === header.css === */
/* ==========================================================================
   Section: Header
   ========================================================================== */

.mx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
  transition: border-color var(--duration-default) var(--ease-out-quart);
}
.mx-header.is-scrolled { border-bottom-color: var(--border-default); }

.mx-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: 80px;
}

.mx-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.mx-header__logo {
  width: 140px;
  height: auto;
  display: block;
  transition: opacity var(--duration-default) var(--ease-out-quart);
}
.mx-header__brand:hover .mx-header__logo { opacity: 0.85; }

.mx-header__nav { display: none; }
.mx-header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.mx-header__nav-link {
  position: relative;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-secondary);
  padding-block: var(--space-2);
  transition: color var(--duration-default) var(--ease-out-quart);
}
.mx-header__nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brand-default);
  transition: width var(--duration-default) var(--ease-out-quart);
}
.mx-header__nav-link:hover { color: var(--text-primary); }
.mx-header__nav-link:hover::after { width: 100%; }

.mx-header__cta { display: none; }

.mx-header__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
}
.mx-header__burger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--duration-default) var(--ease-out-quart),
              opacity var(--duration-default) var(--ease-out-quart);
}
.mx-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mx-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mx-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile drawer ----------
   Estratégia: drawer SEMPRE renderizado (display block),
   visibilidade controlada SÓ por transform — animação garantida */
.mx-drawer {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: #050505;
  z-index: 999;
  transform: translateX(100%);
  transition: transform var(--duration-medium) var(--ease-out-quart);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.mx-drawer.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
/* Desktop: drawer escondido completamente */
@media (min-width: 1024px) {
  .mx-drawer { display: none; }
}
/* Trava scroll do body quando drawer aberto */
body.mx-drawer-open { overflow: hidden; }
.mx-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-10) var(--container-pad) var(--space-12);
  min-height: 100%;
}
.mx-drawer__nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.mx-drawer__nav a:not(.mx-btn) {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-block: var(--space-4);
  display: block;
}
.mx-drawer__nav a:not(.mx-btn):hover {
  color: var(--brand-default);
}
.mx-drawer__nav .mx-btn {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
}

/* ---------- Desktop breakpoint ---------- */
@media (min-width: 1024px) {
  .mx-header__nav { display: block; }
  .mx-header__cta { display: inline-flex; }
  .mx-header__burger { display: none; }
}


/* === hero.css === */
/* ==========================================================================
   Section: Hero — BG layered Figma + notebook PNG alpha + chips depth
   ========================================================================== */

.mx-hero {
  position: relative;
  padding-top: clamp(40px, 8vw, 96px);
  padding-bottom: clamp(60px, 10vw, 120px);
  min-height: 760px;
  overflow: hidden;
  isolation: isolate;
}

/* ========== BG: replica fiel das camadas do Figma ========== */
.mx-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Camada 0 — base color + textura sutil (Figma: image 3 raster) */
.mx-hero__bg-base {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 100% at 75% 35%, rgba(255, 231, 0, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 80% at 25% 70%, rgba(40, 35, 0, 0.55) 0%, transparent 60%),
    linear-gradient(180deg, #0c0c0c 0%, #050505 100%);
  filter: blur(8px);
  transform: scale(1.06);
}

/* Camada 1 — brand/300 hue overlay (mix-blend-hue 50%) */
.mx-hero__bg-hue {
  position: absolute;
  inset: -10% -15% 80% -20%;
  background: var(--color-brand-300);
  mix-blend-mode: hue;
  opacity: 0.5;
  pointer-events: none;
}

/* Camada 2 — frame 1 (mix-blend hard-light) */
.mx-hero__bg-frame {
  position: absolute;
  top: -20px;
  right: 0;
  left: auto;
  width: clamp(640px, 50%, 970px);
  height: auto;
  mix-blend-mode: hard-light;
  opacity: 0.5;
  pointer-events: none;
}
.mx-hero__bg-frame--blur {
  width: clamp(620px, 47%, 902px);
  filter: blur(4px);
  mix-blend-mode: screen;
  opacity: 0.41;
}

/* Camada 3 — DETALHES/BRILHOS (ellipse rotada via CSS) */
.mx-hero__bg-ellipse {
  position: absolute;
  top: 100px;
  left: calc(50% + 26px);
  width: 760px;
  height: 730px;
  background: radial-gradient(ellipse 65% 50% at 50% 50%,
              rgba(255, 231, 0, 0.55) 0%,
              rgba(255, 231, 0, 0.18) 30%,
              transparent 70%);
  filter: blur(40px);
  mix-blend-mode: screen;
  opacity: 0.53;
  transform: rotate(44deg) skewX(-1.88deg);
  pointer-events: none;
}

/* Camada 4 — fade pra preto na parte de baixo (gradient -0.5deg) */
.mx-hero__bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              transparent 40%,
              rgba(0, 0, 0, 0.85) 92%,
              #000 100%);
  pointer-events: none;
}

/* ========== Layout interno ========== */
.mx-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 80px);
  display: grid;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* ========== Copy ========== */
.mx-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-width: 920px;
}
.mx-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0;
}
.mx-hero__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  margin: 8px 0;
}
.mx-hero__headline .mx-text-accent { color: var(--brand-default); }
.mx-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.45;
  color: var(--color-neutral-100);
  max-width: 640px;
}
.mx-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }

/* ========== Visual (notebook + chips) ========== */
.mx-hero__visual {
  position: relative;
  min-height: 520px;
}
.mx-hero__mockup-stage {
  position: relative;
  width: 100%;
  min-height: 520px;
}

/* Notebook */
.mx-hero__mockup-3d {
  position: relative;
  width: min(115%, 760px);
  margin-inline: auto;
  z-index: 2;
  transition: transform var(--duration-slow) var(--ease-out-quart);
  filter: drop-shadow(0 40px 80px rgba(0, 0, 0, 0.55));
}
.mx-hero__mockup-3d:hover { transform: translateY(-6px); }
.mx-hero__mockup-img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  background: transparent;
}

/* ========== Chips notification (frontais) ========== */
.mx-hero__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(46, 46, 46, 0.45);
  border: 1px solid rgba(255, 231, 0, 0.26);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  animation: mxFloat 4s var(--ease-in-out) infinite;
  animation-delay: var(--float-delay, 0s);
  white-space: nowrap;
}
.mx-hero__chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: var(--brand-default);
  color: var(--brand-fg);
  border-radius: 50%;
  flex-shrink: 0;
}
.mx-hero__chip-icon--star {
  background: transparent;
  color: var(--brand-default);
  width: 32px; height: 32px;
}
.mx-hero__chip-icon svg { width: 14px; height: 14px; }
.mx-hero__chip-icon--star svg { width: 24px; height: 24px; }
.mx-hero__chip-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-family: var(--font-display);
}
.mx-hero__chip-text strong {
  font-weight: 500;
  font-size: 12px;
  color: var(--brand-default);
}
.mx-hero__chip-text span {
  font-weight: 500;
  font-size: 11px;
  color: var(--color-neutral-100);
}
.mx-hero__chip-time {
  margin-left: 8px;
  font-family: var(--font-body);
  font-size: 9px;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
}

/* ========== Chips BEHIND (profundidade) ========== */
.mx-hero__chip--behind {
  z-index: 1;
  background: rgba(46, 46, 46, 0.55);
  border-color: rgba(255, 231, 0, 0.18);
  filter: blur(2.5px);
  opacity: 0.65;
  transform: scale(0.92);
}
.mx-hero__chip--behind .mx-hero__chip-text strong { font-size: 11px; }
.mx-hero__chip--behind .mx-hero__chip-text span { font-size: 10px; }
.mx-hero__chip--behind-1 { top: 8%; right: 38%; }
.mx-hero__chip--behind-2 { bottom: 28%; right: 4%; filter: blur(3px); opacity: 0.5; }
.mx-hero__chip--behind-3 { top: 48%; left: -2%; filter: blur(3.5px); opacity: 0.55; }

/* ========== Farol (Lead qualificado) ========== */
.mx-hero__chip--focus {
  top: 53%;
  right: -16%;
  background: rgb(113 153 89 / 18%);
  border-color: var(--brand-default);
  box-shadow: var(--glow-yellow-lg);
  animation: mxFocusPulse 2.5s var(--ease-in-out) infinite;
  z-index: 2;
}
.mx-hero__chip--focus .mx-hero__chip-icon { box-shadow: var(--glow-yellow-sm); }

/* Posições frontais */
.mx-hero__chip--tl { top: 4%;  left: -4%; }
.mx-hero__chip--tr { top: 12%; right: 18%; }
.mx-hero__chip--bl { bottom: 16%; left: 6%; }

/* ========== Keyframes ========== */
@keyframes mxFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mx-hero__chip--behind { animation-name: mxFloatBehind; }
@keyframes mxFloatBehind {
  0%, 100% { transform: scale(0.92) translateY(0); }
  50%      { transform: scale(0.92) translateY(-4px); }
}
@keyframes mxFocusPulse {
  0%, 100% { box-shadow: var(--glow-yellow-md); }
  50%      { box-shadow: var(--glow-yellow-xl); }
}

/* ========== Responsive ========== */
@media (min-width: 1024px) {
  .mx-hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
@media (min-width: 1440px) {
  .mx-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 100px;
  }
}
@media (max-width: 1023px) {
  .mx-hero__copy { max-width: 100%; }
}

/* ========== Hero mobile — mockup TOP + fade-out + copy CENTRALIZADA ==========
   Layout mobile: visual sobe pro topo, recebe mask gradient no rodapé,
   copy CENTRALIZADA abaixo pra ficar integrada com o mockup */
@media (max-width: 767px) {
  .mx-hero__inner {
    display: flex;
    flex-direction: column-reverse;  /* HTML é copy→visual; reverte pra visual em cima */
    gap: 0;
    padding-inline: 0;
  }

  .mx-hero__visual {
    width: 100%;
    min-height: 380px;
    position: relative;
    margin: 0;
    overflow: hidden;  /* impede chips/mockup cortando o layout */
    /* fade-out no rodapé do mockup — desaparece em direção ao bg da seção */
    -webkit-mask-image: linear-gradient(180deg,
                         #000 0%, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg,
                #000 0%, #000 60%, transparent 100%);
  }
  .mx-hero__mockup-3d {
    width: 100%;
    max-width: 100%;
  }

  /* Copy CENTRALIZADA abaixo do mockup */
  .mx-hero__copy {
    position: relative;
    z-index: 2;
    padding: 0 20px 40px;
    margin-top: -100px;  /* sobe sobre o fade do mockup */
    align-items: center;
    text-align: center;
    max-width: 100%;
  }
  .mx-hero__eyebrow {
    align-self: center;
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  .mx-hero__headline {
    font-size: clamp(28px, 7vw, 40px);
    line-height: 1.1;
    text-align: center;
  }
  .mx-hero__sub {
    font-size: 14px;
    text-align: center;
    max-width: 100%;
  }
  .mx-hero__ctas {
    width: 100%;
    justify-content: center;
  }
  .mx-hero__ctas .mx-btn {
    width: 100%;
    justify-content: center;
    max-width: 320px;
  }

  /* Chips: bem menores e dentro da área visível, somem dos cantos extremos */
  .mx-hero__chip {
    padding: 6px 10px;
    transform: scale(0.85);
    transform-origin: center;
  }
  .mx-hero__chip-text strong { font-size: 9px; }
  .mx-hero__chip-text span { font-size: 8px; }
  .mx-hero__chip--focus {
    right: 8%; top: 22%;
    transform: scale(0.8);
  }
  .mx-hero__chip--bl {
    bottom: 38%; left: 4%;
  }
  .mx-hero__chip--tr {
    right: -6%; top: 36%;
    transform: scale(0.8);
  }
  .mx-hero__chip--tl {
    left: -1%; top: 1%;
    transform: scale(0.9);
  }
  .mx-hero__chip--behind { display: none; }
}


/* === marquee.css === */
/* ==========================================================================
   Section: Marquee — chips com borda amarela + ícone (Figma 133:86)
   ========================================================================== */

.mx-marquee {
  position: relative;
  padding-block: var(--space-8);
  background:
    linear-gradient(90deg, #000 0%, transparent 12%, transparent 88%, #000 100%),
    var(--bg-primary);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.mx-marquee__track {
  display: flex;
  width: max-content;
  gap: 15px;
  animation: mxMarqueeScroll 45s linear infinite;
  will-change: transform;
}
.mx-marquee:hover .mx-marquee__track { animation-play-state: paused; }

.mx-marquee__list {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-shrink: 0;
}

/* ---------- Chip (box com borda amarela + ícone + label) ---------- */
.mx-marquee__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 200px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 231, 0, 0.17);
  border-radius: 11px;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.625;
  color: var(--color-neutral-50);

  transition:
    border-color var(--duration-medium) var(--ease-out-quart),
    background-color var(--duration-medium) var(--ease-out-quart),
    box-shadow var(--duration-medium) var(--ease-out-quart);
}
.mx-marquee__chip.is-active,
.mx-marquee__chip:hover {
  border-color: rgba(255, 231, 0, 0.55);
  background: rgba(255, 231, 0, 0.06);
  box-shadow: var(--glow-yellow-sm);
}

.mx-marquee__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--brand-default);
}
.mx-marquee__icon svg { width: 100%; height: 100%; display: block; }

@keyframes mxMarqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 7.5px)); }
}

@media (max-width: 768px) {
  .mx-marquee__chip { width: 170px; font-size: 14px; }
  .mx-marquee__icon { width: 20px; height: 20px; }
}


/* === solutions.css === */
/* ==========================================================================
   Section: Solutions — fiel ao Figma
   Card 628x622, border teal, BG radial dark com highlight, arrow glass + glow
   ========================================================================== */

.mx-solutions {
  position: relative;
  background-color: #050505;
  padding-block: clamp(80px, 10vw, 128px);
  overflow: hidden;
  isolation: isolate;
}
/* BG VETORES — light beam vertical + arcs cruzados centralizado.
   Posicionado atrás do head (topo) e repetido no meio/baixo se necessário */
.mx-solutions::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url('../assets/images/textures/vetores.png'),
    url('../assets/images/textures/vetores.png');
  background-position:
    50% 8%,
    50% 92%;
  background-size:
    min(1100px, 80%) auto,
    min(900px, 70%) auto;
  background-repeat: no-repeat;
  opacity: 1;
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 0;
}
/* Glow ambient lateral pra preencher os flancos */
.mx-solutions::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 600px at 50% 45%,
      rgba(255, 231, 0, 0.12) 0%,
      transparent 60%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: plus-lighter;
}
.mx-solutions > * { position: relative; z-index: 1; }

.mx-solutions__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(48px, 6vw, 80px);
  max-width: 1280px;
  margin-inline: auto;
}
.mx-solutions__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* cap a 64px no desktop pra caber em 2 linhas com folga */
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-brand-50);
  max-width: 100%;
}
.mx-solutions__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  color: var(--color-brand-50);
  max-width: 680px;
}

/* ========== Grid ========== */
.mx-solutions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1280px;
  margin-inline: auto;
}
/* Só vai pra 2 colunas quando há largura suficiente pra cada card
   acomodar texto sem quebrar palavra por palavra (~520px por card) */
@media (min-width: 1100px) {
  .mx-solutions-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .mx-svc-card--wide { grid-column: 1 / -1; }
}

/* ========== Card base (628x580) ========== */
.mx-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  border-radius: 24px;
  border: 1.88px solid rgba(12, 71, 73, 0.5);
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);

  /* BG radial dark — highlight no canto superior esquerdo */
  background:
    radial-gradient(120% 90% at 20% 0%,
      rgba(31, 31, 31, 1) 0%,
      rgba(18, 18, 18, 1) 25%,
      rgba(5, 5, 5, 1) 60%,
      rgba(12, 12, 12, 1) 100%);

  transition:
    transform var(--duration-default) var(--ease-out-quart),
    border-color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
}
.mx-svc-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 231, 0, 0.35);
  box-shadow: var(--glow-yellow-sm);
}

/* ========== Card WIDE (Agente) ========== */
.mx-svc-card--wide {
  flex-direction: column;
  min-height: 573px;
}
@media (min-width: 1100px) {
  .mx-svc-card--wide { flex-direction: row; align-items: center; }
}

/* ========== Stage (mockup container do topo) ========== */
.mx-svc-card__stage {
  position: relative;
  /* height removido — stage adapta ao conteúdo */
  overflow: hidden;
  flex-shrink: 0;
}

/* ========== Stage com mockup PNG único (LP + Tráfego) ==========
   Mockup centralizado e GRANDE (preenche o topo do card).
   Seta amarela glass se sobrepõe ao mockup com backdrop-filter blur. */
.mx-svc-card__stage--mockup {
  height: clamp(240px, 28vw, 320px);  /* stage menor → menos gap pro body */
  display: flex;
  align-items: flex-start;
  justify-content: center;  /* mockup CENTRALIZADO */
  padding: 0 24px 0;
}
.mx-svc-card__mockup-img {
  display: block;
  /* Constraint duplo (max-width + max-height) garante que a imagem
     SEMPRE caiba na stage sem cortar. width:auto + height:auto preserva
     aspect ratio natural do PNG. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  /* fade-out suave no rodapé pra mergulhar no corpo do card */
  -webkit-mask-image: linear-gradient(180deg,
                       #000 0%, #000 75%, transparent 100%);
  mask-image: linear-gradient(180deg,
              #000 0%, #000 75%, transparent 100%);
}
.mx-svc-card__mockup-img--trafego {
  /* mesma regra — herda o constraint */
}

/* Mobile: stage maior pro mockup respirar */
@media (max-width: 899px) {
  .mx-svc-card__stage--mockup {
    height: clamp(280px, 60vw, 340px);
    padding: 16px 12px 0;
  }
}

/* ========== Mockup iPhone (apenas top do bezel/notch visível) ========== */
.mx-svc-card__mockup--iphone {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 62%;
  max-width: 320px;
  height: auto;
  pointer-events: none;
  z-index: 2;
}

/* ========== Chrome screenshot wrap (LP / Tráfego) ========== */
.mx-svc-card__chrome-wrap {
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  max-width: 260px;
  height: 268px;
  border-radius: 28px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  /* fade out no rodapé pra cortar o texto/keyboard do screenshot
     sem mostrar a parte branca da landing abaixo do iPhone */
  -webkit-mask-image: linear-gradient(to bottom,
                       #000 0%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom,
              #000 0%, #000 78%, transparent 100%);
}
.mx-svc-card__chrome-wrap--rect {
  height: 282px;
  border-radius: 28px;
  width: 50%;
  max-width: 260px;
  /* foguete: fade bem mais sutil (a imagem já é dark no rodapé) */
  -webkit-mask-image: linear-gradient(to bottom,
                       #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom,
              #000 0%, #000 88%, transparent 100%);
}
/* LP screenshot: a imagem é uma landing inteira; cropa pra mostrar só
   o iPhone com a chat */
.mx-svc-card__mockup--chrome {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
/* Tráfego (foguete): centraliza no foguete */
.mx-svc-card__mockup--rect {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
}

/* ========== Ghosted bg — image + radial gradient com multiply blend
   Abordagem nova: aplica bg direto no .mx-svc-card--ghost (sem layer HTML).
   Image blend MULTIPLY com radial gradient escuro = imagem fica escura
   mas detalhes ainda visíveis, tom uniforme entre todos os cards. */
.mx-svc-card__bg-mockups { display: none; }  /* layer HTML antiga desligada */

.mx-svc-card--ghost {
  /* Identidade Visual — usa bg-id.png (MOCKUP ID do designer) */
  background:
    url('../assets/images/solutions/bg-id.png') center/cover no-repeat,
    radial-gradient(118.96% 100.01% at 0.07% 0%,
      var(--color-neutral-900) 0%,
      var(--color-neutral-950) 59.71%,
      var(--color-neutral-700) 100%);
  /* background-blend-mode removido — image vai sobreposta sem blend */
}

.mx-svc-card--pos {
  /* Posicionamento — usa bg-pos.png (POsicionamento do designer) */
  background:
    url('../assets/images/solutions/bg-pos.png') center/cover no-repeat,
    radial-gradient(118.96% 100.01% at 0.07% 0%,
      var(--color-neutral-900) 0%,
      var(--color-neutral-950) 59.71%,
      var(--color-neutral-700) 100%);
}

/* ========== Card body ========== */
.mx-svc-card__body {
  /* position: relative removido — não cria stacking context */
  z-index: 2;
  padding: clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 0;  /* sem auto: body fica logo após o stage, sem gap forçado */
  min-width: 0;
}
.mx-svc-card__body--centered {
  margin-top: 0;
  flex: 1;
  justify-content: center;
  padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
  text-align: center;
  align-items: center;
}
.mx-svc-card__body--centered .mx-svc-card__features {
  align-items: flex-start;
  max-width: 420px;
  width: 100%;
}

.mx-svc-card__body--agent {
  padding: clamp(28px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
  margin-top: 0;
  min-height: 0%;
}
@media (min-width: 900px) {
  .mx-svc-card__body--agent { flex: 1; padding-block: 56px; }
}

.mx-svc-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--color-brand-50);
  text-wrap: balance;
}
.mx-svc-card__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  min-width: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
/* NÃO usar flex/grid no <li> — texto + <strong> precisam fluir inline como
   conteúdo normal. Bullet vai absolutamente posicionado fora do flow. */
.mx-svc-card__features li {
  position: relative;
  padding-left: 32px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--color-brand-50);
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}
.mx-svc-card__features li strong { font-weight: 700; }

/* Bullet — span absoluto no início do item, fora do fluxo inline */
.mx-svc-bullet {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 13 L13 3 M5 3 H13 V11' stroke='%23FFE700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ========================================================================
   Arrow icon — rounded-square (NÃO circular), no canto superior direito,
   fora do conteúdo, glow amarelo como reforço visual
   ======================================================================== */
.mx-svc-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  left: auto;
  transform: none;
  width: 64px;
  height: 64px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mx-svc-arrow--sm { width: 56px; height: 56px; top: 24px; right: 24px; }
/* legacy --center alias — mantém em top-right pra consistência */
.mx-svc-arrow--center { top: 24px; right: 24px; left: auto; transform: none; }

/* Glow span DESLIGADO — estava cobrindo o mockup e bloqueando o
   backdrop-filter. O halo amarelo agora vem todo de box-shadow no btn. */
.mx-svc-arrow__glow {
  display: none;
}

/* Botão glass — rounded-square com BLUR sutil + tinted yellow */
.mx-svc-arrow__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  /* Tonalidade amarelo-esverdeada translúcida (44%) — vidro tingido */
  background: rgb(218 235 82 / 44%);
  border: 1.5px solid rgba(255, 231, 0, 0.55);
  backdrop-filter: blur(2px) saturate(1.6);
  -webkit-backdrop-filter: blur(2px) saturate(1.6);
  /* Halo amarelo externo via box-shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 14px rgba(255, 231, 0, 0.22),
    0 0 32px rgba(255, 231, 0, 0.4),
    0 0 64px rgba(255, 231, 0, 0.18);
  color: var(--brand-default);
  transition:
    transform var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
}
.mx-svc-arrow__btn svg { width: 26px; height: 26px; }
.mx-svc-arrow--sm .mx-svc-arrow__btn { border-radius: 12px; }
.mx-svc-arrow--sm .mx-svc-arrow__btn svg { width: 22px; height: 22px; }

.mx-svc-card:hover .mx-svc-arrow__btn {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 0 16px rgba(255, 231, 0, 0.35),
    0 0 40px rgba(255, 231, 0, 0.55);
}

/* ========== AGENTE WIDE — layout 2 colunas ========== */
.mx-svc-card__agent-stage {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
@media (min-width: 900px) {
  .mx-svc-card__agent-stage {
    width: 52%;
    height: 100%;
    min-height: 573px;
  }
}
.mx-svc-card__agent-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 110%;
  height: 110%;
  object-fit: contain;
  object-position: center;
  z-index: 1;
}
@media (min-width: 900px) {
  .mx-svc-card__agent-img {
    width: 120%;
    height: 120%;
    object-position: left center;
  }
}
.mx-svc-card__agent-glow {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}
/* Glow CENTRAL — levemente deslocado pra direita (65%) atrás do laptop */
.mx-svc-card__agent-glow--mid {
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255, 231, 0, 0.45) 0%,
              rgba(255, 231, 0, 0.18) 35%,
              transparent 70%);
  filter: blur(60px);
  mix-blend-mode: plus-lighter;
}
/* Glow secundário sutil no rodapé pra ambient */
.mx-svc-card__agent-glow--bottom {
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 100px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255, 231, 0, 0.3) 0%,
              transparent 70%);
  filter: blur(40px);
  mix-blend-mode: plus-lighter;
}

/* Glass yellow callout flutuante */
.mx-svc-card__agent-callout {
  position: absolute;
  bottom: 8%;
  left: 6%;
  z-index: 3;
  width: 211px;
  padding: 16px 20px;
  background: rgba(4, 25, 26, 0.55);
  border: 1.5px solid rgba(255, 231, 0, 0.35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mx-svc-card__agent-callout p {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-brand-50);
  margin: 0;
}
.mx-svc-card__agent-callout strong {
  font-weight: 700;
  color: var(--color-brand-400);
}

/* ========== Responsive ========== */
@media (max-width: 899px) {
  .mx-svc-card { min-height: 540px; }
  .mx-svc-card__stage { height: 297px; }
  .mx-svc-card__body--centered { padding: 48px 28px; }
  .mx-svc-card__mockup--iphone { width: 70%; max-width: 280px; }
  .mx-svc-card__chrome-wrap,
  .mx-svc-card__chrome-wrap--rect { width: 60%; max-width: 240px; height: 260px; }
  .mx-svc-arrow { top: 20px; right: 20px; width: 56px; height: 56px; }
  .mx-svc-arrow--sm { width: 48px; height: 48px; }
  .mx-svc-arrow__btn svg { width: 22px; height: 22px; }
}
@media (min-width: 1280px) {
  .mx-svc-card__stage { height: 297px; }
  .mx-svc-card__mockup--iphone { max-width: 340px; }
  .mx-svc-card__chrome-wrap,
  .mx-svc-card__chrome-wrap--rect { max-width: 300px; height: 340px; }
}


/* === pillars.css === */
/* ==========================================================================
   Section: Pillars
   Ilha gradient interna, split 561/793, hover amarelo nos pilares
   ========================================================================== */

.mx-pillars-section {
  position: relative;
  background-color: #050505;
  /* Textura de dots irregulares no fundo da seção */
  background-image:
    radial-gradient(circle at 50% 50%, rgba(180, 180, 180, 0.08) 0.9px, transparent 1.8px),
    radial-gradient(circle at 50% 50%, rgba(200, 200, 200, 0.04) 1.4px, transparent 2.4px);
  background-size: 22px 22px, 47px 47px;
  background-position: 0 0, 11px 11px;
  overflow: hidden;
  isolation: isolate;
}
/* Iluminação amarela posicionada ATRÁS do container rounded —
   2 glows nas laterais que emergem fora das bordas do container */
.mx-pillars-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 500px 380px at 5% 50%,
      rgba(255, 231, 0, 0.22) 0%,
      rgba(255, 231, 0, 0.06) 35%,
      transparent 65%),
    radial-gradient(ellipse 500px 380px at 95% 50%,
      rgba(255, 231, 0, 0.20) 0%,
      rgba(255, 231, 0, 0.05) 35%,
      transparent 65%);
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: plus-lighter;
}
.mx-pillars-section > * { position: relative; z-index: 1; }

.mx-pillars {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: clamp(32px, 4vw, 60px);
  border-radius: clamp(24px, 4vw, 64px);
  background-image:
    radial-gradient(120% 80% at 90% 5%, rgba(255, 231, 0, 0.08) 0%, transparent 45%),
    linear-gradient(155.92deg, var(--color-neutral-700) 1.25%, var(--color-neutral-950) 98.74%);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  isolation: isolate;
}
/* Glints amarelos sutis no container — replica iluminação do Figma */
.mx-pillars::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255, 231, 0, 0.18) 0%,
              rgba(255, 231, 0, 0.04) 35%,
              transparent 70%);
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: plus-lighter;
}
.mx-pillars::after {
  content: '';
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 50%;
  height: 60%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
              rgba(255, 231, 0, 0.10) 0%,
              transparent 70%);
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: plus-lighter;
}
.mx-pillars > * { position: relative; z-index: 1; }

/* ---------- Cabeçalho (esquerda no desktop) ---------- */
.mx-pillars__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 440px;
}
.mx-pillars__head .mx-pill { align-self: flex-start; }

.mx-pill--solid {
  background: var(--brand-default);
  color: var(--brand-fg);
  border: none;
  font-family: 'DM Mono', var(--font-display);
}
.mx-pill--solid::before { background: var(--brand-fg); box-shadow: none; }

.mx-pillars__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  display: block;
}
.mx-pillars__headline span { display: inline; }
.mx-pillars__headline .mx-text-accent { display: block; margin-bottom: 0.05em; }

.mx-pillars__sub {
  font-family: var(--font-body);
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.5;
  color: var(--color-neutral-200);
  max-width: 380px;
}
.mx-pillars__sub strong { font-weight: 700; color: var(--color-brand-50); }

/* ---------- Lista de pilares (direita no desktop) ---------- */
.mx-pillars__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

.mx-pillar-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  transition: transform var(--duration-default) var(--ease-out-quart);
}

.mx-pillar-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: rgba(64, 64, 64, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--color-neutral-100);
  transition:
    background-color var(--duration-default) var(--ease-out-quart),
    color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
}
.mx-pillar-item__icon svg { width: 24px; height: 24px; }

/* Estado ATIVO (primeiro pilar destacado por padrão) */
.mx-pillar-item--active .mx-pillar-item__icon {
  background: var(--brand-default);
  color: var(--brand-fg);
  border-color: rgba(255, 231, 0, 0.5);
  box-shadow: var(--glow-yellow-md);
}
.mx-pillar-item--active .mx-pillar-item__title {
  color: var(--brand-default);
  text-shadow: 0 0 54px rgba(255, 231, 0, 0.25);
}

.mx-pillar-item__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mx-pillar-item__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-brand-50);
  transition: color var(--duration-default) var(--ease-out-quart),
              text-shadow var(--duration-default) var(--ease-out-quart);
  text-wrap: balance;
}
.mx-pillar-item__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.45;
  color: var(--color-neutral-200);
  text-wrap: pretty;
}

/* ---------- Hover state (farol amarelo) ---------- */
@media (hover: hover) {
  .mx-pillar-item:hover .mx-pillar-item__icon {
    background: var(--brand-default);
    color: var(--brand-fg);
    box-shadow: var(--glow-yellow-md);
  }
  .mx-pillar-item:hover .mx-pillar-item__title {
    color: var(--brand-default);
    text-shadow: 0 0 54px rgba(255, 231, 0, 0.25);
  }
}

/* ---------- Desktop split horizontal ---------- */
@media (min-width: 1024px) {
  .mx-pillars {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .mx-pillars__head { flex-shrink: 0; }
  .mx-pillars__list { flex: 1; min-width: 0; }
}
@media (min-width: 1280px) {
  .mx-pillars { gap: 96px; }
}


/* === method.css === */
/* ==========================================================================
   Section: Method (ANAGRAMA METODO) — fiel ao Figma
   Cada card tem: glow amarelo topo + círculo com letra + linhas spectrum
   + 4 dots + título amarelo uppercase + descrição.
   ========================================================================== */

.mx-method {
  position: relative;
  padding-block: clamp(80px, 10vw, 128px);
  background:
    radial-gradient(ellipse 60% 40% at 50% 10%, rgba(255, 231, 0, 0.08) 0%, transparent 70%),
    var(--bg-primary);
  overflow: hidden;
}

.mx-method__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(48px, 6vw, 80px);
}
.mx-method__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 53px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-brand-50);
  max-width: 1000px;
}

/* ---------- Track scroll horizontal com drag ---------- */
.mx-method__track-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.mx-method__track-wrap::-webkit-scrollbar { display: none; }
.mx-method__track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mx-method__track {
  display: flex;
  width: max-content;
  /* CSS animation removida — JS controla scroll */
}

.mx-method__list {
  display: flex;
  gap: 28px;
  padding-inline: 14px;
  flex-shrink: 0;
  margin: 0;
  list-style: none;
}

/* ---------- Card (843x470 no Figma → mantém ratio) ---------- */
.mx-method-card {
  position: relative;
  width: clamp(340px, 36vw, 520px);
  aspect-ratio: 843 / 470;
  flex-shrink: 0;
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 30% at 50% 0%,
      rgba(255, 231, 0, 0.18) 0%,
      rgba(255, 231, 0, 0.04) 40%,
      transparent 70%),
    linear-gradient(180deg, rgba(22, 22, 22, 0.95) 0%, rgba(5, 5, 5, 1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 48px);
  transition: border-color var(--duration-medium) var(--ease-out-quart),
              box-shadow var(--duration-medium) var(--ease-out-quart);
}
.mx-method-card:hover {
  border-color: rgba(255, 231, 0, 0.35);
  box-shadow: var(--glow-yellow-md);
}

/* ---------- Top: spectrum (linhas + círculo central + dots) ---------- */
.mx-method-card__spectrum {
  position: relative;
  width: 100%;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(14px, 1.5vw, 24px);
}
/* (linha horizontal removida — passava por cima da letra) */

/* círculo com a letra */
.mx-method-card__letter {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 231, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.5) 60%);
  border: 1.5px solid rgba(255, 231, 0, 0.55);
  box-shadow:
    inset 0 0 18px rgba(255, 231, 0, 0.18),
    0 0 32px rgba(255, 231, 0, 0.28);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  color: var(--brand-default);
  text-shadow: 0 0 12px rgba(255, 231, 0, 0.5);
}

/* dots laterais (2 de cada lado abaixo da linha) */
.mx-method-card__spectrum::after {
  content: '';
  position: absolute;
  top: calc(50% + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 6px;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 231, 0, 0.55) 2px, transparent 2.5px),
    radial-gradient(circle at 35% 50%, rgba(255, 255, 255, 0.35) 2px, transparent 2.5px),
    radial-gradient(circle at 65% 50%, rgba(255, 255, 255, 0.35) 2px, transparent 2.5px),
    radial-gradient(circle at 100% 50%, rgba(255, 231, 0, 0.55) 2px, transparent 2.5px);
  background-repeat: no-repeat;
}

/* ---------- Título e descrição ---------- */
.mx-method-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--brand-default);
  text-transform: uppercase;
  text-shadow: 0 0 40px rgba(255, 231, 0, 0.25);
  margin-bottom: clamp(10px, 1vw, 16px);
}

.mx-method-card__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--color-brand-50);
  max-width: 480px;
}

/* ---------- Keyframes ---------- */
@keyframes mxMethodScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mx-method__track { animation: none; }
}

/* ---------- Hint "Clique e Arraste" ---------- */
.mx-method__hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 32px);
  pointer-events: none;
  user-select: none;
}
.mx-method__hint-icon {
  display: inline-flex;
  width: 52px;
  height: 24px;
  color: var(--brand-default);
  filter: drop-shadow(0 0 6px rgba(255, 231, 0, 0.4));
  overflow: visible;
}
.mx-method__hint-icon svg { width: 100%; height: 100%; overflow: visible; }
/* A bolinha central animada (cursor "arrastando") */
.mx-method__hint-icon svg > circle:first-of-type {
  transform-origin: 22px 10px;
  animation: mxHintDot 2s ease-in-out infinite;
}
/* As setas pulsam em opacidade pra reforçar a direção */
.mx-method__hint-icon svg > path {
  animation: mxHintArrows 2s ease-in-out infinite;
}
.mx-method__hint-text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-neutral-300);
}

@keyframes mxHintDot {
  0%, 100% { transform: translateX(-10px) scale(1); }
  50%      { transform: translateX(10px) scale(1.1); }
}
@keyframes mxHintArrows {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-method__hint-icon svg > circle:first-of-type,
  .mx-method__hint-icon svg > path { animation: none; }
}

@media (max-width: 768px) {
  .mx-method-card {
    width: 300px;
    /* padding interno mais generoso pra texto não encostar nas bordas */
    padding: 28px 24px 32px;
    /* aspect-ratio livre — deixa crescer conforme conteúdo */
    aspect-ratio: auto;
    min-height: 260px;
  }
  .mx-method-card__spectrum {
    height: 76px;
    margin-bottom: 12px;
  }
  .mx-method-card__letter { width: 60px; height: 60px; font-size: 28px; }
  .mx-method-card__name {
    font-size: 24px;
    margin-bottom: 10px;
  }
  .mx-method-card__desc {
    font-size: 13px;
    line-height: 1.45;
    max-width: 100%;
  }
  /* gap maior entre cards pra respirar */
  .mx-method__list { gap: 16px; padding-inline: 12px; }
}


/* === portfolio.css === */
/* ==========================================================================
   Section: Portfolio — marquee CSS infinito (mesma técnica do Method)
   ========================================================================== */

.mx-portfolio {
  background: var(--bg-primary);
  padding-block: clamp(80px, 10vw, 128px);
  overflow: hidden;
}

.mx-portfolio__head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.mx-portfolio__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 53px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  color: var(--color-brand-50);
  max-width: 900px;
}
.mx-portfolio__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 20px);
  color: var(--text-muted);
  max-width: 640px;
}

/* ---------- Stage (track + setas) ---------- */
.mx-portfolio__stage {
  position: relative;
}

.mx-portfolio__track-wrap {
  position: relative;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  /* scroll-behavior: auto (default) — JS controla suavidade via scrollBy({behavior:'smooth'}) */
}
.mx-portfolio__track-wrap::-webkit-scrollbar { display: none; }
.mx-portfolio__track-wrap.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.mx-portfolio__track {
  display: flex;
  width: max-content;
}

.mx-portfolio__list {
  display: flex;
  gap: 24px;
  padding-inline: 12px;
  flex-shrink: 0;
  margin: 0;
  list-style: none;
}

/* ---------- Setas glass ---------- */
.mx-portfolio__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
  width: 56px; height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 12, 12, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  transition:
    background-color var(--duration-default) var(--ease-out-quart),
    border-color var(--duration-default) var(--ease-out-quart),
    color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
}
.mx-portfolio__arrow:hover {
  background: var(--brand-default);
  border-color: var(--brand-default);
  color: var(--brand-fg);
  box-shadow: var(--glow-yellow-md);
}
.mx-portfolio__arrow svg { width: 20px; height: 20px; }
.mx-portfolio__arrow--left  { left: clamp(8px, 2vw, 24px); }
.mx-portfolio__arrow--right { right: clamp(8px, 2vw, 24px); }
@media (max-width: 640px) {
  .mx-portfolio__arrow { width: 44px; height: 44px; }
}

/* ---------- Card de projeto (305x609 do Figma) ---------- */
.mx-project-card-v {
  position: relative;
  display: block;
  width: 305px;
  flex-shrink: 0;
  border-radius: 15px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.10);
  text-decoration: none;
  color: inherit;
  transition:
    border-color var(--duration-medium) var(--ease-out-quart),
    box-shadow var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}
.mx-project-card-v__media {
  position: relative;
  display: block;
  aspect-ratio: 305 / 609;
  background: #d9d9d9;
}
.mx-project-card-v__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Overlay (hover) ---------- */
.mx-project-card-v__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 55%, transparent 100%);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--duration-medium) var(--ease-out-quart),
    transform var(--duration-medium) var(--ease-out-quart);
}
.mx-project-card-v__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-default);
  font-style: normal;
}
.mx-project-card-v__overlay strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--text-primary);
}
.mx-project-card-v__cta {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--brand-default);
  text-transform: uppercase;
}

/* Hover ativa overlay + glow */
.mx-project-card-v:hover {
  border-color: rgba(255, 231, 0, 0.55);
  box-shadow: var(--glow-yellow-md);
  transform: translateY(-3px);
}
.mx-project-card-v:hover .mx-project-card-v__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* (animation removida — JS controla scroll incremental e setas) */

@media (max-width: 768px) {
  .mx-project-card-v { width: 220px; }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .mx-project-card-v { width: 260px; }
}


/* === cta.css === */
/* ==========================================================================
   Section: CTA Diagnóstico — anéis amarelos + container glass
   ========================================================================== */

/* ===========================================================
   WRAPPER CTA + FAQ — UMA instância do VETORES.png cobrindo o wrapper
   =========================================================== */
.mx-cta-faq-wrap {
  position: relative;
  background-color: #050505;
  overflow: hidden;
  isolation: isolate;
}
/* VETORES.png já tem o feixe de luz no TOPO e os arcs no BASE.
   Escalando pra cobrir o wrapper, o feixe atrás do CTA e os arcs no FAQ. */
.mx-cta-faq-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../assets/images/textures/vetores.png');
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 70%;
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 0;
}
.mx-cta-faq-wrap > * { position: relative; z-index: 1; }

.mx-cta {
  position: relative;
  background: transparent;
  padding-block: clamp(80px, 10vw, 160px);
}

/* Stage = card de vidro fosco. Translúcido + backdrop-blur faz com que
   o VETORES.png do wrapper passe BORRADO atrás do CTA (efeito glass) */
.mx-cta__stage {
  position: relative;
  max-width: 1132px;
  margin-inline: auto;
  width: calc(100% - 32px);
  background: rgba(8, 8, 8, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 35px;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 24px 80px rgba(0, 0, 0, 0.5);
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}

/* Anéis removidos — o bg agora é o VETORES.png compartilhado entre CTA+FAQ */
.mx-cta__rings { display: none; }

/* Container interno (agora transparente, herda do stage) */
.mx-cta__container {
  position: relative;
  z-index: 2;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-6);
}
.mx-cta__container .mx-pill { align-self: center; }

.mx-cta__headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.5vw, 53px);
  line-height: 1.18;
  letter-spacing: -0.04em;
  color: var(--color-brand-50);
  margin: 0;
}
.mx-cta__sub {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.6vw, 25px);
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: #f6f8fc;
  max-width: 738px;
}

/* ---------- Botão glass com ícone capsula ---------- */
.mx-cta__btn {
  margin-top: var(--space-2);
  display: inline-flex;
  align-items: center;
  gap: 24px;
  padding: 12px 32px 12px 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 104px;
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
  color: rgba(255, 255, 255, 0.87);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition:
    transform var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart),
    background-color var(--duration-default) var(--ease-out-quart);
  text-decoration: none;
}
.mx-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(157.85deg, #ffffff 9.7%, var(--brand-default) 92.88%);
  color: var(--brand-fg);
  box-shadow: inset 0 0 32px var(--color-brand-400);
  flex-shrink: 0;
}
.mx-cta__btn-icon svg { width: 22px; height: 22px; }
.mx-cta__btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-yellow-lg);
  background: rgba(0, 0, 0, 0.4);
}
.mx-cta__btn:focus-visible { box-shadow: 0 0 0 2px var(--brand-default); outline: none; }

@media (max-width: 768px) {
  .mx-cta__btn {
    flex-direction: row;
    gap: 14px;
    padding: 8px 20px 8px 8px;
    font-size: 13px;
    letter-spacing: 0.05em;
  }
  .mx-cta__btn-icon { width: 52px; height: 40px; }
  .mx-cta__btn-icon svg { width: 18px; height: 18px; }
  .mx-cta__btn-label {
    text-align: left;
    line-height: 1.2;
    flex: 1;
  }
}


/* === faq.css === */
/* ==========================================================================
   Section: FAQ — accordion smooth (grid-rows animation)
   ========================================================================== */

.mx-faq {
  position: relative;
  background: transparent;
  padding-block: clamp(80px, 10vw, 128px);
}

.mx-faq .mx-section__head { margin-bottom: clamp(40px, 5vw, 64px); }
.mx-faq .mx-section__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-align: center;
}

.mx-faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1280px;
  margin-inline: auto;
}

/* ---------- Item ---------- */
.mx-faq-item {
  background: rgba(8, 8, 8, 0.45);
  border: 1px solid var(--color-neutral-700);
  border-radius: 16px;
  overflow: hidden;
  transition:
    border-color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mx-faq-item[data-state="open"] {
  border-color: var(--brand-default);
  box-shadow: var(--glow-yellow-sm);
}

.mx-faq-item__summary {
  width: 100%;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 32px;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font: inherit;
}
.mx-faq-item__summary:focus-visible {
  outline: 2px solid var(--brand-default);
  outline-offset: -2px;
}

.mx-faq-item__q {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.4;
  color: var(--color-neutral-100);
}
.mx-faq-item__q strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ---------- Icon (+/-) ---------- */
.mx-faq-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--brand-default);
  color: var(--brand-fg);
  border-radius: 10px;
  position: relative;
  box-shadow: var(--glow-yellow-sm);
  transition: transform var(--duration-default) var(--ease-out-quart);
}
.mx-faq-item__icon::before,
.mx-faq-item__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--duration-default) var(--ease-out-quart);
}
.mx-faq-item__icon::before { width: 18px; height: 2.5px; }
.mx-faq-item__icon::after  { width: 2.5px; height: 18px; }
.mx-faq-item[data-state="open"] .mx-faq-item__icon::after { transform: scaleY(0); }
.mx-faq-item[data-state="open"] .mx-faq-item__icon { transform: rotate(180deg); }

/* ---------- Answer — animação grid-rows smooth ---------- */
.mx-faq-item__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.mx-faq-item[data-state="open"] .mx-faq-item__answer {
  grid-template-rows: 1fr;
}
.mx-faq-item__answer-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 32px;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    padding-bottom 0.35s ease;
}
.mx-faq-item[data-state="open"] .mx-faq-item__answer-inner {
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 28px;
}
.mx-faq-item__answer-inner::before {
  content: '';
  display: block;
  border-top: 1.5px dashed rgba(255, 231, 0, 0.45);
  margin-bottom: 24px;
}
.mx-faq-item__answer-inner p {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: var(--color-neutral-100);
  max-width: 80ch;
  margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .mx-faq__list { padding-inline: 4px; }
  .mx-faq-item__summary {
    padding: 16px 16px;
    gap: 14px;
    align-items: flex-start;
  }
  .mx-faq-item__q {
    font-size: 14px;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
  }
  .mx-faq-item__answer-inner { padding-inline: 16px; }
  .mx-faq-item[data-state="open"] .mx-faq-item__answer-inner { padding-bottom: 18px; }
  .mx-faq-item__icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    margin-top: 2px;
  }
  .mx-faq-item__icon::before { width: 12px; height: 2px; }
  .mx-faq-item__icon::after  { width: 2px; height: 12px; }
  .mx-faq-item__answer-inner p { font-size: 13px; line-height: 1.55; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mx-faq-item__answer,
  .mx-faq-item__answer-inner,
  .mx-faq-item__icon,
  .mx-faq-item__icon::after { transition: none; }
}


/* === footer.css === */
/* ==========================================================================
   Section: Footer — 2 colunas (brand+social+CTA · contato+credit)
   ========================================================================== */

.mx-footer {
  padding-block: clamp(64px, 8vw, 96px);
  background: var(--bg-primary);
  border-top: 1px solid var(--color-neutral-800);
  position: relative;
}
.mx-footer::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 231, 0, 0.35), transparent);
}

.mx-footer__inner {
  display: grid;
  /* 2 colunas SEMPRE — em mobile com gap menor, centralizadas */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  justify-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .mx-footer__inner {
    gap: 80px;
    justify-items: start;
    text-align: left;
  }
}

/* ========== COLUNA ESQUERDA ========== */
.mx-footer__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
@media (min-width: 768px) {
  .mx-footer__left { align-items: flex-start; gap: 32px; }
}

.mx-footer__brand {
  display: inline-flex;
  align-items: center;
  color: var(--text-primary);
  text-decoration: none;
}
.mx-footer__logo {
  width: 180px;
  height: auto;
  display: block;
  transition: opacity var(--duration-default) var(--ease-out-quart);
}
.mx-footer__brand:hover .mx-footer__logo { opacity: 0.85; }

/* Social group */
.mx-footer__social-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mx-footer__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

/* Social icons — amarelo quadrado arredondado */
.mx-footer__social-icons {
  display: flex;
  gap: 10px;
}
.mx-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--brand-default);
  color: var(--brand-fg);
  border-radius: 8px;
  transition:
    background-color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart),
    transform var(--duration-default) var(--ease-out-quart);
}
.mx-footer__social-icons a:hover {
  background: var(--brand-hover);
  box-shadow: var(--glow-yellow-md);
  transform: translateY(-2px);
}
.mx-footer__social-icons svg { width: 18px; height: 18px; }

/* CTA outlined */
.mx-footer__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border: 1.5px solid var(--brand-default);
  color: var(--brand-default);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition:
    background-color var(--duration-default) var(--ease-out-quart),
    color var(--duration-default) var(--ease-out-quart),
    box-shadow var(--duration-default) var(--ease-out-quart);
}
.mx-footer__cta-btn:hover {
  background: var(--brand-default);
  color: var(--brand-fg);
  box-shadow: var(--glow-yellow-md);
}

/* ========== COLUNA DIREITA ========== */
.mx-footer__right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  align-items: center;
}
@media (min-width: 768px) {
  .mx-footer__right { align-items: flex-start; gap: 18px; }
}
.mx-footer__contact-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 6px;
}
.mx-footer__phone {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  color: var(--color-neutral-100);
  transition: color var(--duration-default) var(--ease-out-quart);
}
.mx-footer__phone:hover { color: var(--brand-default); }

.mx-footer__handles {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mx-footer__handles a {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-neutral-100);
  transition: color var(--duration-default) var(--ease-out-quart);
}
.mx-footer__handles a:hover { color: var(--brand-default); }

.mx-footer__credit {
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-subtle);
}
.mx-footer__credit a {
  color: var(--color-neutral-100);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: color var(--duration-default) var(--ease-out-quart),
              border-color var(--duration-default) var(--ease-out-quart);
}
.mx-footer__credit a:hover {
  color: var(--brand-default);
  border-color: var(--brand-default);
}
.mx-footer__copy {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-subtle);
}

/* Ajustes mobile pra 2 colunas caberem confortável */
@media (max-width: 767px) {
  .mx-footer__logo { width: 130px; }
  .mx-footer__heading { font-size: 14px; }
  .mx-footer__contact-heading { font-size: 18px; }
  .mx-footer__phone,
  .mx-footer__handles a { font-size: 14px; }
  .mx-footer__credit,
  .mx-footer__copy { font-size: 12px; }
  .mx-footer__social-icons a { width: 36px; height: 36px; border-radius: 7px; }
  .mx-footer__social-icons svg { width: 16px; height: 16px; }
  .mx-footer__cta-btn { padding: 10px 22px; font-size: 13px; }
}