/* =========================================================
   SITI — landing · 9. "Un día en Juárez"
   Sin JS (o con "reducir movimiento") cada capítulo es su propia franja
   con su cielo. 11-dia.js le pone .is-live: la pantalla se fija y el
   scroll mueve el reloj, el cielo y los capítulos.
   ========================================================= */
.dia{position:relative;background:#090909}
.dia__stage{position:relative}
.cielo,.reloj,.dia__push{display:none}

/* ---------- capítulo ---------- */
.cap{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:clamp(40px,6vw,96px);align-items:center;
  padding:110px max(var(--pad),calc((100% - var(--shell)) / 2 + var(--pad)));
  background:linear-gradient(var(--cielo-a),var(--cielo-b));
}
.cap__copy{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.cap__arte{display:block;width:clamp(76px,9vw,128px);margin-bottom:12px}
.cap__arte img{width:100%;height:auto;filter:drop-shadow(0 22px 24px rgba(0,0,0,.35));animation:flotar 6s ease-in-out infinite}
.cap__hora{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-bottom:14px}
.cap__h{
  font-family:var(--f-dis);font-size:clamp(2.3rem,5.4vw,5rem);font-weight:800;
  letter-spacing:-.045em;line-height:.96;text-wrap:balance;margin-bottom:20px;
}
.cap__p{max-width:44ch;font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.6;color:rgba(255,255,255,.9)}
.escena{width:100%;max-width:440px;margin-inline:auto}

/* ---------- modo fijo ---------- */
.dia.is-live{height:calc(var(--n) * 115svh)}
.dia.is-live .dia__stage{position:sticky;top:0;height:100svh;overflow:hidden}
.dia.is-live .cielo{display:block;position:absolute;inset:0;overflow:hidden}
.dia.is-live .reloj{display:flex}
.dia.is-live .dia__push{display:block}
.dia.is-live .cap{
  position:absolute;inset:0;max-width:var(--shell);margin-inline:auto;
  padding:120px var(--pad) 70px;background:none;
  opacity:0;visibility:hidden;will-change:opacity;
}
.dia.is-live .cap__hora{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.dia.is-live .cap__arte,.dia.is-live .cap__h,.dia.is-live .cap__p,.dia.is-live .escena{will-change:transform}

/* ---------- cielo ---------- */
.cielo__capa{position:absolute;inset:0;opacity:0}
.cielo__capa:first-child{opacity:1}
/* sombrita detrás del texto para que el blanco se lea con cualquier cielo */
.cielo::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 55% 65% at 24% 52%,rgba(0,0,0,.22),transparent 72%)}
.cielo__stars{position:absolute;inset:0;opacity:0}

.cielo__sol,.cielo__luna{position:absolute;top:0;left:0;width:0;height:0;will-change:transform}
.cielo__sol i{position:absolute;border-radius:50%}
.cielo__sol i:nth-child(1){inset:-150px;background:rgba(254,187,40,.4);filter:blur(60px)}
.cielo__sol i:nth-child(2){inset:-40px;background:#ffe08a;box-shadow:0 0 80px 20px rgba(255,201,77,.4)}
.cielo__sol .cielo__ocaso{inset:-40px;background:#ff9a5c;opacity:0}
.cielo__luna i{
  position:absolute;inset:-38px;border-radius:50%;background:#f6f1e7;
  box-shadow:inset -18px -8px 0 0 #d9cdb6,0 0 60px 10px rgba(246,241,231,.25);
}

.cielo__nubes{position:absolute;inset:0}
.cielo__nubes i{
  position:absolute;left:0;top:var(--top);width:var(--w);height:calc(var(--w) * .36);
  background:
    radial-gradient(closest-side,#fff 92%,transparent) 0 100%/100% 55% no-repeat,
    radial-gradient(closest-side,#fff 92%,transparent) 16% 20%/38% 100% no-repeat,
    radial-gradient(closest-side,#fff 92%,transparent) 62% 40%/30% 84% no-repeat;
  filter:blur(5px);animation:deriva var(--dura) linear infinite;animation-delay:var(--delay);
}
@keyframes deriva{from{transform:translateX(-40vw)}to{transform:translateX(110vw)}}

.horizonte{position:absolute;left:0;right:0;bottom:0;width:100%;height:28vh}
.horizonte__sierra{fill:rgba(10,7,5,.3)}
.horizonte__cerro{fill:rgba(10,7,5,.45)}
.horizonte__cuadras{fill:rgba(12,9,7,.78)}
.horizonte__equis{fill:var(--orange);opacity:.92}
.horizonte__luces{fill:#ffc56b;opacity:var(--noche,0)}

/* ---------- reloj ---------- */
.reloj{
  position:absolute;top:86px;left:50%;transform:translateX(-50%);z-index:5;
  align-items:center;gap:14px;padding:6px 18px 6px 6px;border-radius:99px;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.reloj__hora{display:flex;align-items:baseline;gap:6px;padding:5px 14px;border-radius:99px;background:rgba(255,255,255,.14)}
.reloj__hora b{display:flex;font-family:var(--f-dis);font-weight:800;font-size:1.45rem;font-variant-numeric:tabular-nums}
.reloj__hora small{font-weight:700;font-size:.74rem;opacity:.8;white-space:nowrap}
.reloj__d{display:inline-grid;overflow:hidden;height:1.25em;line-height:1.25}
.reloj__d span{grid-area:1/1}
.reloj__puntos{display:flex;gap:6px}
.reloj__puntos i{width:6px;height:6px;border-radius:99px;background:#fff;opacity:.35;transition:width .5s var(--ease),opacity .4s}
.reloj__puntos i.is-on{opacity:1}
.reloj__puntos i.is-now{width:22px}

.dia__push{position:absolute;right:var(--pad);bottom:30px;z-index:5}
.push--dia{transform-origin:100% 100%}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .cap{grid-template-columns:1fr;gap:28px;padding-block:90px}
  .dia.is-live .cap{align-content:start;gap:20px;padding:142px var(--pad) 110px}
  .cap__arte{position:absolute;right:var(--pad);top:-6px;width:84px}
  .dia.is-live .cap__arte{top:132px}
  .cap__copy{position:relative;padding-right:92px}
  .cap__h{font-size:clamp(2rem,8.4vw,3rem);margin-bottom:12px}
  .cap__p{font-size:.98rem}
  .dia.is-live .escena{transform-origin:50% 0}
  .dia.is-live .cap__escena{zoom:.86}
  .dia__push{left:0;right:0;bottom:16px;display:flex;justify-content:center}
  .dia.is-live .dia__push{display:flex}
  .reloj{top:74px}
  .horizonte{height:17vh}
}
@media (max-width:560px){
  .cap__copy{padding-right:0}
  .cap__arte{width:64px}
  .dia.is-live .cap__arte{position:static;margin-bottom:6px}
  .reloj__puntos{display:none}
}
@media (max-width:860px) and (max-height:760px){
  .dia.is-live .cap__escena{zoom:.74}
  .dia.is-live .cap__arte{display:none}
}