/* =======================================================================
   "¿Por qué Chordeleg?" — frases sueltas sobre la foto
   Escritorio y celular: la foto es el fondo y se queda fija; las frases van apareciendo una por una con el scroll.
   Con movimiento reducido: la foto arriba y las frases debajo, todo visible (sin sticky ni animaciones).
   ======================================================================= */
.cho2{ --ease:cubic-bezier(.2,.8,.2,1); }
#chordeleg.cho2{ padding:0; }

/* ---------- Base: movimiento reducido (sin sticky), todo visible ---------- */
.cho2__sticky{ padding-top:72px; }
.cho2__bg{ position:relative; aspect-ratio:4/5; margin:0 16px; overflow:hidden; background:#1a1a1c; }
.cho2__bg img{ width:100%; height:100%; object-fit:cover; object-position:72% 50%; }
.cho2__col{ padding-top:32px; }
.cho2__title{ margin:0 0 4px; font-family:var(--serif); font-weight:500; font-size:32px; line-height:1.1; letter-spacing:-.01em; color:#111; }
.cho2__f{ margin:20px 0 0; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.3; letter-spacing:-.005em; color:#111; }
.cho2__f--key{ font-size:40px; line-height:1.1; font-weight:500; }
.cho2__f--sans{ font-family:var(--font); font-weight:350; font-size:16px; line-height:1.6; color:var(--steel); }

/* ---------- Precio y enlace (fondo claro de siempre) ---------- */
.cho2__end{ padding:56px 0 72px; }
.cho2__line{ display:block; width:1px; height:56px; margin:0 0 22px; background:rgba(15,16,18,.35); transform-origin:top; }
.cho2__pm{ display:block; overflow:hidden; padding:.12em 0 .16em; margin:-.12em 0 -.16em; }
.cho2__price{ display:block; font-family:var(--serif); font-weight:500; font-size:56px; line-height:1; letter-spacing:-.01em; color:#111; }
.cho2__end .pill{ margin-top:26px; color:#111; }

/* ---------- Con movimiento: foto fija de fondo (celular primero, luego escritorio) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Zoom lento de 108% a 100% al entrar en pantalla (una sola vez) */
  .cho2__bg img{ transform:scale(1.08); transition:transform 8s ease-out; }
  .cho2.is-in .cho2__bg img{ transform:none; }
  /* El precio sube desde detrás de una máscara, con una línea corta que lo conecta */
  .js .cho2__price{ transform:translateY(110%); }
  .js .cho2__line{ transform:scaleY(0); }
  .cho2__end.is-in .cho2__price{ transform:none; transition:transform .8s var(--ease); }
  .cho2__end.is-in .cho2__line{ transform:none; transition:transform .6s var(--ease); }

  .cho2__track{ height:250vh; height:250svh; }
  .cho2__sticky{ position:sticky; top:var(--franja-h,0px); height:calc(100vh - var(--franja-h,0px)); height:calc(100svh - var(--franja-h,0px)); padding-top:0; overflow:hidden; background:#111; }
  .cho2__bg{ position:absolute; inset:0; margin:0; aspect-ratio:auto; }
  .cho2__bg img{ object-position:72% 50%; }
  /* Degradado oscuro (sin caja ni franja) para que el texto blanco se lea sobre la foto; en celular cubre todo el alto del texto */
  .cho2__bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(8,8,10,.72) 0%, rgba(8,8,10,.82) 40%, rgba(8,8,10,.92) 100%); }
  .cho2__wrap{ position:relative; z-index:2; height:100%; }
  .cho2__col{ display:flex; flex-direction:column; justify-content:center; height:100%; padding:80px 0 28px; }
  .cho2__title{ margin-bottom:clamp(4px,1svh,10px); font-size:clamp(26px,3.8svh,32px); color:#fff; }
  .cho2__f{ margin:clamp(6px,1.3svh,12px) 0 0; font-size:clamp(18px,2.7svh,22px); font-weight:500; color:#fff;
    opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
  .cho2__f.is-shown{ opacity:1; transform:none; }
  .cho2__f.is-dim{ opacity:.4; }
  .cho2__f--key{ font-size:clamp(32px,4.7svh,40px); }
  .cho2__f--sans{ font-size:16px; color:rgba(255,255,255,.8); }
}

/* ======================= ESCRITORIO ======================= */
@media (min-width:769px){
  .cho2__end{ padding:96px 0; }
  .cho2__price{ font-size:72px; }
  .cho2__f{ font-size:28px; }
}
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  .cho2__bg img{ object-position:70% 50%; }
  /* Degradado de izquierda a derecha: el texto va a la izquierda, las manos quedan a la vista a la derecha */
  .cho2__bg::after{
    background:linear-gradient(to right, rgba(8,8,10,.92) 0%, rgba(8,8,10,.82) 40%, rgba(8,8,10,.55) 58%, rgba(8,8,10,.18) 76%, rgba(8,8,10,0) 90%),
               linear-gradient(to bottom, rgba(8,8,10,.35) 0%, rgba(8,8,10,0) 18%); }
  .cho2__col{ max-width:540px; padding:88px 0 40px; }
  .cho2__title{ margin-bottom:clamp(6px,1.4svh,14px); font-size:clamp(40px,6.2svh,56px); }
  .cho2__f{ margin:clamp(8px,1.6svh,14px) 0 0; font-size:clamp(22px,3.1svh,28px); }
  .cho2__f--key{ font-size:clamp(40px,6.2svh,56px); }
  .cho2__f--sans{ font-size:18px; }
}