#sobre-mi {
  padding-bottom: 0;
}

.sobre-mi {
  display: flex;
  flex-direction: column-reverse;
  /* En móvil, media arriba (reverse porque primero esta content en html) */
  background-color: #ffffff;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* Evitar que animaciones causen scroll */
  font-family: var(--font-serif);
  padding-bottom: 0;
}

.sobre-mi__content {
  flex: 1;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sobre-mi__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: var(--color-primary);
  line-height: 1.2;
}

.sobre-mi__text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #444;
}

.sobre-mi__text p {
  margin-bottom: 1.25rem;
}

.sobre-mi__text p:last-child {
  margin-bottom: 0;
}

.sobre-mi__media {
  flex: 1;
  position: relative;
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Evitar desbordes del zoom */
}

.sobre-mi__mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Efecto "mancha" o "niebla" suave en los bordes. closest-side evita cortes */
  -webkit-mask-image: radial-gradient(
    ellipse closest-side at center,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0) 95%
  );
  mask-image: radial-gradient(
    ellipse closest-side at center,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0) 95%
  );
}

.sobre-mi__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  /* Transición de opacidad para el crossfade (2s) y transicion linear de 8s para el transform (zoom) */
  transition:
    opacity 2s ease-in-out,
    transform 8s linear;
  will-change: opacity, transform;
}

/* Estados base para el zoom ANTES de volverse activos */
.sobre-mi__img.zoom-out {
  transform: scale(1.15);
}

.sobre-mi__img.zoom-in {
  transform: scale(1);
}

/* Imagen visible actualmente */
.sobre-mi__img.active {
  opacity: 1;
  z-index: 3;
  visibility: visible;
}

/* Transición activa de zoom (durante los 8s) */
.sobre-mi__img.active.zoom-out {
  transform: scale(1);
}

.sobre-mi__img.active.zoom-in {
  transform: scale(1.15);
}

/* Imagen saliente (se queda debajo de la nueva active mientras hace fade in) */
.sobre-mi__img.prev {
  opacity: 1;
  z-index: 2;
  visibility: visible;
}

/* La prev sigue su rumbo de zoom para que no haya un salto visible */
.sobre-mi__img.prev.zoom-out {
  transform: scale(1);
}

.sobre-mi__img.prev.zoom-in {
  transform: scale(1.15);
}

@media (min-width: 768px) {
  .sobre-mi {
    flex-direction: row;
    /* Desktop: lado a lado */
  }

  .sobre-mi__content {
    flex: 1;
    padding: 4rem 8%;
  }

  .sobre-mi__media {
    flex: 1;
    min-height: 500px;
  }

  .sobre-mi__mask {
    /* Máscara adaptada a desktop */
    -webkit-mask-image: radial-gradient(
      ellipse closest-side at center,
      rgba(0, 0, 0, 1) 40%,
      rgba(0, 0, 0, 0) 95%
    );
    mask-image: radial-gradient(
      ellipse closest-side at center,
      rgba(0, 0, 0, 1) 40%,
      rgba(0, 0, 0, 0) 95%
    );
  }
}

@media (min-width: 1024px) {
  .sobre-mi__title {
    font-size: 2rem;
  }

  .sobre-mi__text {
    font-size: 1.25rem;
  }

  .sobre-mi__media {
    min-height: 600px;
  }
}