/* ============================================================
   PARALLAX – DISEÑO BASE DESKTOP (>= 1366px)
   ============================================================ */

.parallax {
  position: relative;
  background-image: url('../img/gerolstein.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 900px;
  display: flex;
  align-items: center;
  overflow: hidden;
  clip-path: polygon(0% 12.5%, 100% 0%, 100% 81%, 0% 100%);
}

.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 0;
}

.parallax-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  /* 🔹🔹🔹 AQUI CONTROLAS LA ALTURA VERTICAL DEL ÁREA INTERNA */
  height: 900px; /* <---- MODIFICA ESTE VALOR */
}


/* ============================================================
   IMAGEN JA (izquierda)
   ============================================================ */

.img_paralax{
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  width: 30%;
  aspect-ratio: 1 / 1;  /* mantiene forma circular */
  margin-bottom: 7%;
  margin-left: 7%;
}
.ja{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* no deforma la imagen */
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-origin: center;
  background-color: rgba(159, 170, 146, 0.633);

}
/* ============================================================
   TEXTO (derecha)
   ============================================================ */
.paralax-text {
  width: 30%;
  max-width: 600px;
  margin-left: 18%;
  margin-bottom: 20%;
}

.tit_paralax{
  font-size: 25px;
}
.subtit_paralax{
  font-size: 18px;
}

@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll;
    min-height: auto;
    clip-path: polygon(0% 8%, 100% 0%, 100% 91%, 0% 100%);
    padding: 2rem 0; /* algo de aire arriba/abajo */
  }

  .parallax-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;   /* separación mínima entre foto y texto */
    height: auto;
  }

  .img_paralax {
    width: 200px;
    margin: 0 auto 0.25rem auto;
    
  }

  .paralax-text {
    width: 90%;
    max-width: 500px;
    text-align: center;
    margin: 10px auto;   /* centrado horizontal, sin margen vertical auto */
  }

  /* 🔹 AQUÍ ES DONDE MÁS ESPACIO SE GENERABA: márgenes del h2/p */
  .tit_paralax {
    font-size: 15px;
    margin-top: 0.1rem;   /* casi pegado a la imagen */
    margin-bottom: 0.15rem;
  }

  .subtit_paralax {
    font-size: 12px;
    margin-top: 0;        /* quita margen arriba */
    margin-bottom: 0.25rem;
  }
}

@media (max-width: 1024px) {
  
}

@media (max-width: 1366px) {
  
}