/* O que nos move (Figma: O Mercanet, 2470:8994 / fotos 2448:2115 e
   2448:2118). Desktop: duas colunas de 630px com 20px de vão; as duas
   fotos (305×525, raio 30) ficam lado a lado na coluna da direita.

   Os mini-cards sobre as fotos usam as medidas EXATAS do Figma, em
   unidades "u" = 1/305 da largura da foto (container query): um valor
   do Figma em px vira "calc(N * var(--u))", e tudo escala junto com a
   foto em qualquer largura de tela, sem depender de altura de conteúdo. */

.move { padding: 56px 0; }
@media (min-width: 1024px) {
  .move { padding: 120px 0 0; }
}

.move-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
/* Mobile: texto, lista, fotos. */
.move-copy { order: 1; }
.move-bullets { order: 2; }
.move-media { order: 3; }
@media (min-width: 1024px) {
  /* O texto (eyebrow + título + parágrafo) é mais baixo que as fotos:
     centraliza na vertical; a lista desce pra baixo das duas colunas. */
  .move-grid { grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
  .move-copy { order: 0; }
  .move-media { order: 0; }
  .move-bullets { order: 0; grid-column: 1 / -1; margin-top: 40px !important; }
}

.move-copy h2 { margin-bottom: 24px; max-width: 630px; }
.move-copy .lead { max-width: 579px; margin-bottom: 25px; }

/* Lista: 4 linhas iguais separadas por linhas finas, cada uma com o
   ícone no padrão do site (anel branco de 1px + miolo laranja + check
   branco) e as palavras-chave em negrito (marcadas com ** no texto).
   Desktop: grade 2×2 sob as duas colunas, com divisória vertical no meio. */
.move-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--color-border-blue);
}
@media (min-width: 1024px) {
  .move-bullets { grid-template-columns: 1fr 1fr; }
}
.move-bullets li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border-blue);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-navy);
}
@media (min-width: 768px) {
  .move-bullets li { gap: 20px; padding: 18px 0; font-size: 18px; }
}
@media (min-width: 1024px) {
  .move-bullets li { padding: 28px 24px 28px 0; }
  .move-bullets li:nth-child(even) { padding: 28px 0 28px 40px; border-left: 1px solid var(--color-border-blue); }
}
.move-bullets strong { font-weight: 600; }
.move-bullet-icon {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid var(--color-border-blue);
}
.move-bullet-icon-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--color-orange);
}
.move-bullet-icon-fill img { width: 12px; height: 12px; }

/* Entrada animada (fade + slide-up) ao rolar até a seção — mesmo
   observer genérico usado em outras sessões do site (ver main.js). */
.move-copy {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.move-copy.is-visible { opacity: 1; transform: none; }
.move-bullets li {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.move-bullets.is-visible li { opacity: 1; transform: none; }
.move-bullets li:nth-child(1) { transition-delay: 0.05s; }
.move-bullets li:nth-child(2) { transition-delay: 0.15s; }
.move-bullets li:nth-child(3) { transition-delay: 0.25s; }
.move-bullets li:nth-child(4) { transition-delay: 0.35s; }
html:not(.js) .move-bullets li { opacity: 1; transform: none; }
html:not(.js) .move-copy { opacity: 1; transform: none; }

.move-media {
  display: flex;
  gap: 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.1s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.move-media.is-visible { opacity: 1; transform: none; }
html:not(.js) .move-media { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .move-copy,
  .move-media,
  .move-bullets li { transition: none; opacity: 1; transform: none; }
}

.move-photo-wrap {
  --u: calc(100cqw / 305);
  position: relative;
  flex: 1;
  aspect-ratio: 305 / 525;
  /* Raio fixo (não em "u"): "cqw" no próprio elemento-container mediria
     a largura de um ancestral, não a da foto — só os filhos usam "u". */
  border-radius: 20px;
  overflow: hidden;
  container-type: inline-size;
}
@media (min-width: 768px) {
  .move-photo-wrap { border-radius: 30px; }
}
.move-photo { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Mini-card de vidro (Figma: fundo branco 90% + blur 2px, raio 16,436) —
   filhos posicionados em absoluto, na posição do Figma relativa ao card. */
.move-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-radius: calc(16.436 * var(--u));
  font-family: var(--font-base);
  white-space: nowrap;
}
.move-card > * { position: absolute; display: block; }

/* Card "Pedidos hoje" (2448:2123): 183×124,226 em (100, 378). */
.move-card--orders { left: calc(100 * var(--u)); top: calc(378 * var(--u)); width: calc(183 * var(--u)); height: calc(124.226 * var(--u)); }
.move-card-label { left: calc(18.03 * var(--u)); top: calc(16.65 * var(--u)); font-size: calc(8.155 * var(--u)); line-height: calc(13.252 * var(--u)); font-weight: 400; color: var(--color-gray-04); }
.move-card-value { left: calc(18.03 * var(--u)); top: calc(30.27 * var(--u)); font-size: calc(18.012 * var(--u)); line-height: calc(29.269 * var(--u)); font-weight: 600; color: var(--color-navy); }
.move-card-trend {
  left: calc(131.66 * var(--u));
  top: calc(23.71 * var(--u));
  width: calc(35.31 * var(--u));
  height: calc(15.637 * var(--u));
  border-radius: calc(3.027 * var(--u));
  background: #D7FAE4;
}
.move-card-trend img { position: absolute; left: calc(5.55 * var(--u)); top: calc(6.05 * var(--u)); width: calc(3.783 * var(--u)); height: calc(4.54 * var(--u)); }
.move-card-trend span { position: absolute; left: calc(12.1 * var(--u)); top: calc(5.04 * var(--u)); font-size: calc(6.053 * var(--u)); line-height: 1; font-weight: 500; color: #239749; }
.move-card-chart { left: calc(20.62 * var(--u)); top: calc(43.38 * var(--u)); width: calc(139.728 * var(--u)); height: auto; }
.move-card-link { left: calc(62.49 * var(--u)); top: calc(97.86 * var(--u)); font-size: calc(8.155 * var(--u)); line-height: calc(13.252 * var(--u)); font-weight: 400; color: var(--color-gray-04); }
.move-card-link-arrow { left: calc(155.45 * var(--u)); top: calc(101.2 * var(--u)); width: calc(6.679 * var(--u)); height: calc(6.024 * var(--u)); }

/* Card "Funil de vendas" (2448:2140): 146,945×207,816 em (136, 295,21). */
.move-card--funnel { left: calc(136 * var(--u)); top: calc(295.21 * var(--u)); width: calc(146.945 * var(--u)); height: calc(207.816 * var(--u)); }
.move-card-title { left: calc(37.1 * var(--u)); top: calc(20.92 * var(--u)); font-size: calc(9.294 * var(--u)); line-height: calc(12.494 * var(--u)); font-weight: 500; color: var(--color-navy); }

/* Barras do funil: 21,4 de altura, raios 1,749 (topo) / 3,498 (base);
   texto (número + legenda) centralizado na barra. */
.move-funnel-bar {
  height: calc(21.4 * var(--u));
  border-radius: calc(1.749 * var(--u)) calc(1.749 * var(--u)) calc(3.498 * var(--u)) calc(3.498 * var(--u));
  color: var(--color-white);
  text-align: center;
  line-height: 1;
}
.move-funnel-bar b { display: block; margin-top: calc(5.23 * var(--u)); font-size: calc(8.228 * var(--u)); font-weight: 600; line-height: 1; }
.move-funnel-bar i { display: block; margin-top: calc(0.8 * var(--u)); font-size: calc(2.391 * var(--u)); font-style: normal; font-weight: 500; line-height: 1; }
.move-funnel-bar--1 { left: calc(22.36 * var(--u)); top: calc(46.13 * var(--u)); width: calc(103.195 * var(--u)); background: #FDAC83; }
.move-funnel-bar--2 { left: calc(30.44 * var(--u)); top: calc(69.43 * var(--u)); width: calc(87.026 * var(--u)); background: #F97F51; }
.move-funnel-bar--3 { left: calc(38.05 * var(--u)); top: calc(92.73 * var(--u)); width: calc(71.808 * var(--u)); background: #F15A22; }
.move-funnel-bar--4 { left: calc(45.66 * var(--u)); top: calc(116.03 * var(--u)); width: calc(56.591 * var(--u)); background: #EB4208; }
.move-funnel-bar--5 { left: calc(53.27 * var(--u)); top: calc(139.33 * var(--u)); width: calc(41.373 * var(--u)); background: #BF2219; }

.move-funnel-progress { left: calc(18.6 * var(--u)); top: calc(183.08 * var(--u)); width: calc(110.289 * var(--u)); height: calc(3.718 * var(--u)); border-radius: 100px; background: #FDECE6; overflow: hidden; }
.move-funnel-progress span { display: block; width: calc(92.459 / 110.289 * 100%); height: 100%; background: linear-gradient(90deg, #EC4208, #F15A22); border-radius: 100px; }