:root{
  --mgv-card-bg: #19755c;
  --mgv-title: #ffd9d9;
  --mgv-text: #ffffff;

  --mgv-btn-border:#D47DB6;
  --mgv-btn-a:#CE58F5;
  --mgv-btn-b:#521694;

  --mgv-shadow: 0 10px 30px rgba(0,0,0,.35);

  --mgv-frame-gap: 20px;
  --mgv-frame-pad: 18px;
}

/* Section (background layer) */
.mgv-parallax-section{
  /* ✅ TROQUE AQUI o fundo */
  background-image: url('../imgs/fundoParallax.jpg');
  background-size: cover;
  background-repeat: no-repeat;

  /* ✅ o JS altera essa var */
  background-position: center calc(50% + var(--mgv-parallax-bg-y, 0px));

  width: 100%;
  min-height: 578px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.mgv-parallax-section *{ box-sizing: border-box; }

.mgv-parallax-divider{
  width: 100%;
  min-height: inherit;
  position: relative;
}

/* Layout 2 colunas */
.mgv-parallax-inner{
  width: min(1140px, calc(100% - 40px));
  margin-inline: auto;
  min-height: inherit;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mgv-frame-gap);

  align-items: stretch;
  padding: 40px 0;

  position: relative;
}

/* Camadas (parallax) */
.mgv-parallax-card,
.mgv-parallax-img{
  padding: var(--mgv-frame-pad);
  background: transparent;
  backface-visibility: hidden;
  will-change: transform;
}

/* Texto (frente) */
.mgv-parallax-card{
  height: 300px;
  width:350px;
  position: relative;
  z-index: 5;
  transform: translate3d(0, var(--mgv-parallax-card-y, 0px), 0);
}

.mgv-parallax-card__content{
  background: var(--mgv-card-bg);
  box-shadow: var(--mgv-shadow);
  padding: 30px 20px;
  min-height: 100%;
}

/* Imagem (meio) */
.mgv-parallax-img{
  position: relative;
  z-index: 2;
  transform: translate3d(0, var(--mgv-parallax-img-y, 0px), 0);

  display: flex;
  align-items: center;
  justify-content: center;
}

.mgv-parallax-img img{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}

/* Conteúdo */
.mgv-parallax-title{
  margin: 0;
  font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--mgv-title);
}

.mgv-parallax-text{
  margin: 26px 0 0;
  font-family: "Roboto Condensed", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--mgv-text);
}

.mgv-parallax-button{
  display: inline-block;
  margin-top: 22px;
  padding: 13px 27px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;

  font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  color: #fff;

  background-image: linear-gradient(var(--mgv-btn-a), var(--mgv-btn-b));
  border: 2px solid var(--mgv-btn-border);
  box-shadow: -2px 2px 5px rgba(0,0,0,.25);
  font-shadow: -2px 2px 5px rgba(0,0,0,.25);
  border-radius: 5px;
}

.mgv-parallax-button:hover{ filter: brightness(1.02); }
.mgv-parallax-button:active{ opacity: .95; }

/* Responsivo */
@media (max-width: 900px){
  .mgv-parallax-inner{ grid-template-columns: 1fr; }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce){
  .mgv-parallax-section{ background-position: center center; }
  .mgv-parallax-card,
  .mgv-parallax-img{ transform: none !important; }
}

/* =========================
   PARALLAX 01 — sobreposição card > imagem
   ========================= */

#mgv-parallax-01 .mgv-parallax-inner{
  position: relative;
  min-height: 520px; /* ajuste conforme seu layout */
}

/* IMAGEM: fica “por trás” */
#mgv-parallax-01 .mgv-parallax-img{
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  z-index: 1;
  display: flex;
  justify-content: flex-end; /* joga a imagem mais pra direita */
  align-items: center;
  pointer-events: none;  /* não rouba hover/click */
}

#mgv-parallax-01 .mgv-parallax-img img{
  width: min(620px, 92%);
  height: auto;
  display: block;
}

/* CARD: fica “por cima” */
#mgv-parallax-01 .mgv-parallax-card{
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 5;

  width: min(520px, 92%);
}

#mgv-parallax-01 .mgv-parallax-card__pos{
  transform: translateY(-50%);
}


/* opcional: se seu card já tinha estilos, não precisa disso */
#mgv-parallax-01 .mgv-parallax-card__content{
  position: relative;
}

/* Responsivo: empilha (sem sobreposição) se ficar apertado */
@media (max-width: 768px){
  #mgv-parallax-01 .mgv-parallax-inner{
    min-height: auto;
    padding: 24px 0;
  }

  #mgv-parallax-01 .mgv-parallax-img{
    position: relative;
    inset: auto;
    justify-content: center;
    margin-top: 16px;
  }

  #mgv-parallax-01 .mgv-parallax-card{
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto;
  }
}

/* =========================================================
   OVERRIDE: Layout do #mgv-parallax-01 (browser + mobile)
   Mantém o parallax (não mexe no transform do card/img)
   ========================================================= */

/* o card e o img precisam ser posicionados por cima (não grid) */
#mgv-parallax-01 .mgv-parallax-inner{
  position: relative;
  display: block;              /* mata o grid apenas nesta seção */
  width: min(1140px, calc(100% - 40px));
  margin-inline: auto;
  min-height: inherit;
  padding: 40px 0;
}

/* Imagem: sempre atrás do card */
#mgv-parallax-01 .mgv-parallax-img{
  position: absolute;
  z-index: 2;
  left: 20%;
  top: 0;
  bottom: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  pointer-events: none;
}

/* Card: sempre acima */
#mgv-parallax-01 .mgv-parallax-card{
  position: absolute;
  z-index: 5;
  left: -10%;
  top: 50%;
  height: 85%;
  width: min(450px, 92%);

  /* NÃO coloque transform aqui (parallax usa transform neste elemento) */
}

/* posicionamento vertical sem quebrar o parallax */
#mgv-parallax-01 .mgv-parallax-card__pos{
  height: 100%;
  transform: translateY(-50%);
  display: flex;
}

/* garante que o conteúdo ocupe o card */
#mgv-parallax-01 .mgv-parallax-card__content{
  width: 100%;
  min-height: 100%;
}

/* Ajustes do tamanho da imagem no desktop */
#mgv-parallax-01 .mgv-parallax-img img{
  width: 100%;
  max-height: 520px;
  height: auto;
  object-fit: cover;
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px){
  /* deixa “vazar” pros lados como você pediu */
  #mgv-parallax-01{
    overflow: visible;
  }

  #mgv-parallax-01 .mgv-parallax-inner{
    overflow: visible;
    padding: 20px 0 40px;
    min-height: 578px; /* mantém a área */
  }

  /* Card: centralizado e 10px abaixo do topo */
  #mgv-parallax-01 .mgv-parallax-card{
    left: 50%;
    top: 10px;
    height: auto;
    width: min(520px, calc(100% - 32px));
  }

  /* centralização horizontal sem usar transform no card (parallax usa transform) */
  #mgv-parallax-01 .mgv-parallax-card__pos{
    transform: none;
    position: relative;
    left: -50%;
  }

  /* Img: centralizado, “vazando”, 40px abaixo do topo */
  #mgv-parallax-01 .mgv-parallax-img{
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;

    width: 120vw;            /* vaza pros lados */
    justify-content: center;
  }

  /* centraliza sem mexer no transform do container */
  #mgv-parallax-01 .mgv-parallax-img img{
    width: 120vw;
    max-width: none;
    transform: translateX(-50%); /* transform no IMG, não no container */
  }
}