.projects-left-inside {
  position: sticky;
  top: 120px;
  height: 620px;
  border-radius: 28px 28px 28px 28px;
  overflow: hidden;

  background: none;
  /* ❌ quitamos el fondo de acá */
}
.projects{
  grid-template-columns: 520px 1fr; /* antes 420px */
}
/* ---------- Columna izquierda (imagen) ---------- */


.projects-image-wrapper{
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .35s ease;
  justify-content: start;
}

.projects-image-scale{
  position: absolute;
  inset: 0;
  transform: scale(1.00);
  transition: transform .75s cubic-bezier(.19,1,.22,1);
}

.projects-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* El wrapper ya existe, solo lo preparamos */
.projects-image-wrapper {
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.projects-image-scale {
  transform: scale(1.04);
  transition: transform .8s cubic-bezier(.19, 1, .22, 1);
}

/* Cuando está activa */
.projects-image-wrapper.is-active {
  opacity: 1;
}

.projects-image-wrapper.is-active .projects-image-scale {
  transform: scale(1);
} 



@media (max-width: 992px){
  .page-content{
    padding: 110px 22px;
  }

  .projects{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .projects-left-inside{
    position: relative;  /* adiós sticky en móvil */
    top: auto;
    height: 140px;       /* más bajo para móvil */
    border-radius: 24px;
    overflow: hidden;    /* importante en móvil */
  }

  .projects-right{
    max-width: 100%;
    margin-left: 0;
    padding-right: 0;
  }

  .page-title{
    font-size: 2.2rem;
  }

  @media (max-width: 992px){
  .projects-image-wrapper{
    display: none !important;
  }
}

}