/* Diferenciais + Missão, Visão e Valores (Figma: Sobre 339:987 / Grupo
   419, 2450:3176). Grade de 8 cards (4×2, 305×218, vão de 20px) e, 20px
   abaixo, o painel navy de 1280×787 com missão/visão/valores à esquerda
   e a arte (vetor mascarado pelo próprio painel) à direita. */

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

.mvv-diferenciais {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (min-width: 640px) {
  .mvv-diferenciais { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .mvv-diferenciais { grid-template-columns: repeat(4, 1fr); }
}

.mvv-diferencial {
  box-sizing: border-box;
  min-height: 218px;
  border: 1.05px solid var(--color-border-blue);
  border-radius: 20px;
  padding: 34.95px 40px 30px;
  background: var(--color-white);
}
.mvv-diferencial--featured { background: var(--color-orange); border-color: var(--color-orange-light); }

/* Ícone em anel duplo: aro fino por fora (43px), círculo cheio de 26px
   por dentro e o ícone de 14px. Nos cards claros o miolo é laranja; no
   card laranja e no painel navy o aro é branco. */
.mvv-icon {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border: 0.5px solid var(--color-border-blue);
  border-radius: 50%;
}
.mvv-icon-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-orange);
}
.mvv-icon-fill img { width: 14px; height: 14px; }
.mvv-diferencial--featured .mvv-icon,
.mvv-icon--light { border-color: var(--color-white); }
.mvv-diferencial--featured .mvv-icon-fill { background: var(--color-white); }

.mvv-diferencial p {
  max-width: var(--mvv-w, 100%);
  margin: 24px 0 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-navy);
  text-wrap: wrap;
}
.mvv-diferencial--featured p { color: var(--color-white); }

/* Painel navy. */
.mvv-card {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* Fundo: brilho radial (Figma 2450:3107) — #2E3C50 no ponto
     (1243, 384) do painel, esmaecendo pra #19202E (elipse de 794×1291px,
     em % pra escalar com a largura). Sem borda. */
  border-radius: 20px;
  background: radial-gradient(ellipse 62.03% 164.1% at 97.11% 48.79%, #2E3C50 0%, #19202E 100%);
  padding: 40px 32px 0;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) {
  .mvv-card { border-radius: 30px; }
}

.mvv-card-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 40px; }

/* Ícone da chama: 8,86×12,06px dentro da caixa de 14px, com as margens do
   Figma (6,93% / 18,55% / 6,93% / 18,18%). */
.mvv-flame { position: relative; display: block; width: 14px; height: 14px; }
.mvv-flame img { position: absolute; left: 18.18%; right: 18.55%; top: 6.93%; bottom: 6.93%; width: auto; height: auto; }
.mvv-icon--light .mvv-icon-fill img { width: auto; height: auto; }

.mvv-pilar h3 { margin: 12px 0; font-size: 32px; font-weight: 700; line-height: 1.3; letter-spacing: -0.32px; color: var(--color-white); }
.mvv-pilar p { max-width: var(--mvv-w, 100%); margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--color-white); }
@media (max-width: 767px) {
  .mvv-pilar h3 { font-size: 26px; }
}

/* Arte: abaixo de 1280px (onde o texto e a arte não cabem lado a lado)
   fica numa faixa própria embaixo do texto, cortada pelo painel. */
.mvv-card-art {
  position: relative;
  display: block;
  margin: 32px 0 0;
  order: 2;
}
/* A arte inteira (sem cortar), menor e centralizada na faixa de baixo. */
.mvv-card-art img {
  display: block;
  width: 66%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
}
/* <1280px (referência do Figma mobile): painel com degradê vertical que
   clareia para a base e a arte grande ancorada embaixo, com a largura do
   painel (máx. 630px), cortada pela borda de baixo — 59% dela aparece.
   --art-w = largura da arte; altura = 1028/755 disso. O padding de baixo
   reserva a parte visível (59% da altura) + 24px de respiro. */
@media (max-width: 1279px) {
  .mvv > .container:last-child { container-type: inline-size; }
  .mvv-card {
    --art-w: min(100cqw, 630px);
    padding-bottom: calc(var(--art-w) * 0.803 + 24px);
    background: linear-gradient(180deg, #19202E 55%, #2A384B 100%);
  }
  .mvv-card-art { position: absolute; inset: 0; margin: 0; overflow: hidden; border-radius: inherit; }
  .mvv-card-art img {
    position: absolute;
    left: 50%;
    margin: 0 0 0 calc(var(--art-w) / -2);
    bottom: calc(var(--art-w) * -0.558);
    width: var(--art-w);
    max-width: none;
  }
}

@media (min-width: 1280px) {
  /* Largura exata da caixa de texto do Figma (passa do padding em alguns
     cards — é isso que fixa as quebras de linha). */
  .mvv-diferencial p { width: var(--mvv-w); max-width: none; }

  /* Texto a 112px / 94px do canto do painel, arte exatamente onde o Figma a coloca (x=686,
     y=-120,86 dentro do painel de 1280×787, em % pra acompanhar a
     largura do container). */
  .mvv-card { height: 787px; padding: 94px 0 0 112px; }
  .mvv-card-art { position: absolute; inset: 0; height: auto; margin: 0; }
  .mvv-card-art img { position: absolute; left: 53.594%; top: -15.358%; width: 58.984%; max-width: none; height: 130.62%; margin: 0; }
}

/* Entrada animada ao rolar: cards dos diferenciais em cascata (por
   coluna), painel navy sobe, a arte desliza da direita e Missão/Visão/
   Valores entram um a um. */
.mvv-diferencial,
.mvv-card,
.mvv-pilar {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (min-width: 1024px) {
  .mvv-diferencial:nth-child(4n+2) { transition-delay: 0.08s; }
  .mvv-diferencial:nth-child(4n+3) { transition-delay: 0.16s; }
  .mvv-diferencial:nth-child(4n) { transition-delay: 0.24s; }
}
.mvv-pilar:nth-child(2) { transition-delay: 0.15s; }
.mvv-pilar:nth-child(3) { transition-delay: 0.3s; }
.mvv-diferencial.is-visible,
.mvv-card.is-visible,
.mvv-pilar.is-visible { opacity: 1; transform: none; }

.mvv-card-art img { translate: 80px 0; opacity: 0; transition: translate 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, opacity 1s ease 0.2s; }
.mvv-card.is-visible .mvv-card-art img { translate: 0 0; opacity: 1; }
/* <1280px a arte sobe de baixo (não corta mais, então sem deslize lateral). */
@media (max-width: 1279px) {
  .mvv-card:not(.is-visible) .mvv-card-art img { translate: 0 60px; }
}

/* Hover: card sobe levemente e ganha sombra suave. */
@media (hover: hover) {
  .mvv-diferencial.is-visible { transition-delay: 0s; }
  .mvv-diferencial.is-visible:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(25, 32, 46, 0.08); border-color: rgba(236, 66, 8, 0.35); }
}

html:not(.js) .mvv-diferencial,
html:not(.js) .mvv-card,
html:not(.js) .mvv-pilar { opacity: 1; transform: none; }
html:not(.js) .mvv-card-art img { translate: 0 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .mvv-diferencial, .mvv-card, .mvv-pilar { opacity: 1; transform: none; transition: none; }
  .mvv-card-art img { translate: 0 0; opacity: 1; transition: none; }
}