/* FASE 7 · FOTO FINAL
   Hero final de una sola pantalla.
   Solo controla la foto final y su transición de entrada. */

.phase7-closing{
  /* ===== AJUSTES MANUALES · DESKTOP =====
     --phase7-photo-height : altura real de la imagen dentro del hero.
                             100% = llena exactamente la pantalla.
                             105% = un poco más alta (más recorte).
      --phase7-photo-top   : mueve físicamente la imagen.
                             negativo = sube / positivo = baja.
     --phase7-photo-y      : cambia el encuadre interno con object-position.
                             0% = muestra más arriba / 100% = muestra más abajo.
  */
  --phase7-photo-height:160%;
  --phase7-photo-top:0%;
  --phase7-photo-y:50%;

  position:relative;
  width:100%;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  background:rgb(247,237,230);
  isolation:isolate;
}

/* Una franja muy corta conserva la transición textura -> beige.
   Después queda solo el color liso detrás de la foto. */
.phase7-closing::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:clamp(54px,7svh,88px);
  z-index:0;
  pointer-events:none;
  background-image:url("../assets/textures/papel-organico.svg");
  background-repeat:repeat;
  background-position:center top;
  background-size:100% auto;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.78) 28%,
    rgba(0,0,0,.42) 58%,
    rgba(0,0,0,.14) 82%,
    transparent 100%
  );
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    rgba(0,0,0,.78) 28%,
    rgba(0,0,0,.42) 58%,
    rgba(0,0,0,.14) 82%,
    transparent 100%
  );
}

/* Foto final: mismo principio del hero inicial.
   Siempre llena UNA pantalla y se recorta solo lo necesario. */
.phase7-closing .closing__photo{
  position:absolute;
  left:0;
  top:var(--phase7-photo-top);
  z-index:1;
  display:block;
  width:100%;
  height:var(--phase7-photo-height);
  max-width:none;
  margin:0;
  object-fit:cover;
  object-position:center var(--phase7-photo-y);

  /* Transición mínima beige -> foto */
  -webkit-mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.12) 2%,
    rgba(0,0,0,.34) 4%,
    rgba(0,0,0,.62) 7%,
    rgba(0,0,0,.86) 10%,
    #000 13%,
    #000 100%
  );
  mask-image:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.12) 2%,
    rgba(0,0,0,.34) 4%,
    rgba(0,0,0,.62) 7%,
    rgba(0,0,0,.86) 10%,
    #000 13%,
    #000 100%
  );
}

/* TABLET / pantallas medianas */
@media (max-width:900px){
  .phase7-closing{
    /* AJUSTA AQUÍ TABLET */
    --phase7-photo-height:120%;
    --phase7-photo-top:0%;
    --phase7-photo-y:50%;
  }

  .phase7-closing::before{
    height:clamp(46px,6svh,70px);
  }

  .phase7-closing .closing__photo{
    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 2%,
      rgba(0,0,0,.40) 4%,
      rgba(0,0,0,.70) 6%,
      rgba(0,0,0,.90) 8%,
      #000 11%,
      #000 100%
    );
    mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.16) 2%,
      rgba(0,0,0,.40) 4%,
      rgba(0,0,0,.70) 6%,
      rgba(0,0,0,.90) 8%,
      #000 11%,
      #000 100%
    );
  }
}

/* MÓVIL */
@media (max-width:760px){
  .phase7-closing{
    /* AJUSTA AQUÍ CELULAR */
    --phase7-photo-height:100%;
    --phase7-photo-top:0%;
    --phase7-photo-y:50%;
  }

  .phase7-closing::before{
    height:clamp(38px,5.5svh,56px);
  }

  .phase7-closing .closing__photo{
    -webkit-mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 1.5%,
      rgba(0,0,0,.44) 3.5%,
      rgba(0,0,0,.72) 5.5%,
      rgba(0,0,0,.91) 7.5%,
      #000 10%,
      #000 100%
    );
    mask-image:linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,.18) 1.5%,
      rgba(0,0,0,.44) 3.5%,
      rgba(0,0,0,.72) 5.5%,
      rgba(0,0,0,.91) 7.5%,
      #000 10%,
      #000 100%
    );
  }
}

/* MÓVIL ANGOSTO */
@media (max-width:520px){
  .phase7-closing{
    /* AJUSTA AQUÍ CELULAR ANGOSTO */
    --phase7-photo-height:100%;
    --phase7-photo-top:0%;
    --phase7-photo-y:50%;
  }

  .phase7-closing::before{
    height:clamp(34px,5svh,48px);
  }
}

/* MÓVIL MUY PEQUEÑO */
@media (max-width:390px){
  .phase7-closing{
    /* AJUSTA AQUÍ CELULAR MUY PEQUEÑO */
    --phase7-photo-height:100%;
    --phase7-photo-top:0%;
    --phase7-photo-y:50%;
  }
}


/* FASE 7 · Cita al pie de la foto
   Solo añade el texto superpuesto; no altera la foto ni su transición. */
.phase7-verse{
  position:absolute;
  left:50%;
  bottom:clamp(26px,4.5svh,54px);
  z-index:3;
  width:min(88%,760px);
  transform:translateX(-50%);
  text-align:center;
  color:#fff;
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.42);
}

.phase7-verse__text{
  margin:0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.05rem,1.8vw,1.42rem);
  line-height:1.28;
  font-weight:500;
  letter-spacing:.01em;
}

.phase7-verse__reference{
  margin:8px 0 0;
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(1.08rem,1.9vw,1.48rem);
  line-height:1;
}

.phase7-verse__reference strong{
  font-weight:700;
}

.phase7-verse__line{
  display:block;
  width:min(72%,520px);
  height:1px;
  margin:14px auto 0;
  background:rgba(255,255,255,.48);
}

@media (max-width:760px){
  .phase7-verse{
    bottom:clamp(20px,3.8svh,34px);
    width:min(90%,520px);
  }

  .phase7-verse__text{
    font-size:clamp(.86rem,3.7vw,1.08rem);
    line-height:1.24;
  }

  .phase7-verse__reference{
    margin-top:7px;
    font-size:clamp(.92rem,4vw,1.12rem);
  }

  .phase7-verse__line{
    width:78%;
    margin-top:11px;
  }
}

@media (max-width:390px){
  .phase7-verse{
    bottom:18px;
    width:92%;
  }

  .phase7-verse__text{
    font-size:.82rem;
    line-height:1.22;
  }

  .phase7-verse__reference{
    font-size:.9rem;
  }
}