/* =========================================================
   SITI — landing · 10. escenas del día
   Cada escena recibe --t (0 a 1) mientras se lee su capítulo. Un .k
   avanza su propio paso --k desde --d durante --len; --in es la entrada
   rápida (primer tercio). Sin JS --t vale 1: todo se ve terminado.
   ========================================================= */
.k{
  --k:clamp(0,(var(--t,1) - var(--d,0)) / var(--len,.3),1);
  --in:min(1,calc(var(--k) * 3));
}

.hoja{
  position:relative;padding:20px;border-radius:24px;color:#141414;
  background:rgba(250,249,246,.95);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.7);
}
.hoja__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:16px}
.hoja__head > span:first-child{display:flex;flex-direction:column;gap:4px;min-width:0}
.hoja__head small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(20,20,20,.5)}
.hoja__head b{font-family:var(--f-dis);font-weight:800;font-size:1.08rem;letter-spacing:-.02em;line-height:1.25}
.hoja__foot{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:.84rem;font-weight:600;color:rgba(20,20,20,.62)}
.hoja__foot.k{opacity:var(--in)}
.hoja .tag--live{background:rgba(22,163,74,.12);color:#15803d;border-color:rgba(22,163,74,.3)}

/* ---------- 6:00 cruces ---------- */
.cruces{display:flex;flex-direction:column;gap:12px}
.cruces__row{
  display:grid;grid-template-columns:132px 1fr 62px;align-items:center;gap:12px;
  opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 14px));
}
.cruces__name{display:flex;flex-direction:column;line-height:1.2}
.cruces__name b{font-family:var(--f-dis);font-size:.9rem}
.cruces__name small{font-size:.7rem;color:rgba(20,20,20,.5);white-space:nowrap}
.cruces__bar{height:10px;border-radius:99px;background:rgba(20,20,20,.07);overflow:hidden}
.cruces__bar i{display:block;height:100%;width:calc(var(--k) * var(--v) * 100%);border-radius:inherit;background:linear-gradient(90deg,var(--amber),var(--orange))}
.cruces__min{font-size:.78rem;color:rgba(20,20,20,.6);text-align:right;font-variant-numeric:tabular-nums}
.cruces__min b{font-family:var(--f-dis);font-size:1.15rem;color:#141414}
.cruces__row.is-best .cruces__bar i{background:linear-gradient(90deg,#4ade80,#16a34a)}
.cruces__row.is-best .cruces__name small::after{
  content:'Más rápido';margin-left:6px;padding:1px 7px;border-radius:99px;font-size:.6rem;font-weight:700;white-space:nowrap;
  background:#16a34a;color:#fff;opacity:clamp(0,(var(--t,1) - .5) * 6,1);
}

/* ---------- 8:00 dólar y clima ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hoja--mini{padding:16px}
.hoja--mini .hoja__head{margin-bottom:8px}
.dolar__num,.clima__num{font-family:var(--f-dis);font-weight:800;font-size:2.3rem;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.dolar__linea{width:100%;height:auto;margin:10px 0 8px}
.dolar__linea path{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k))}
.dolar__meta{display:flex;justify-content:space-between;font-size:.72rem;color:rgba(20,20,20,.55)}
.dolar__meta b{color:#141414}
.hoja--sol{background:linear-gradient(160deg,#fff4dc,#ffd9a8)}
.clima__horas{display:flex;align-items:flex-end;gap:8px;height:78px;margin-top:12px}
.clima__horas li{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}
.clima__horas i{width:100%;height:calc(var(--v) * var(--k) * 70%);border-radius:7px 7px 4px 4px;background:linear-gradient(var(--orange),var(--amber))}
.clima__horas small{font-size:.66rem;color:rgba(20,20,20,.55)}

/* ---------- 11:00 empleos ---------- */
.empleos{display:flex;flex-direction:column;gap:10px}
.hoja--row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;
  opacity:var(--in);transform:translateX(calc((1 - var(--in)) * 48px));
}
.empleos__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(var(--hot),.14);color:#B84500}
.empleos__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.empleos__txt b{font-family:var(--f-dis);font-size:.95rem}
.empleos__txt small{font-size:.74rem;color:rgba(20,20,20,.55)}
.empleos__sueldo{font-family:var(--f-dis);font-weight:800;font-size:.86rem;white-space:nowrap}
.sello{
  position:absolute;top:-12px;right:-6px;display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:99px;background:#16a34a;color:#fff;font-family:var(--f-dis);font-weight:800;font-size:.8rem;
  opacity:var(--k);transform:rotate(-7deg) scale(calc(.4 + var(--k) * .6));box-shadow:0 10px 20px -8px rgba(22,163,74,.7);
}

/* ---------- 2:00 comida ---------- */
.comida__rate{display:flex;align-items:center;gap:6px;font-family:var(--f-dis);font-weight:800;margin:-6px 0 16px}
.comida__rate .lucide{color:var(--amber);fill:var(--amber)}
.comida__rate small{font-family:var(--f-body);font-weight:600;color:rgba(20,20,20,.55)}
.sellos{display:grid;grid-template-columns:repeat(4,minmax(0,62px));justify-content:center;gap:14px}
.sellos__s{
  display:grid;place-items:center;aspect-ratio:1;border-radius:50%;
  border:2px dashed rgba(20,20,20,.18);background:rgba(255,122,34,var(--k));color:#fff;
}
.sellos__s .lucide{width:22px;height:22px;opacity:var(--k);transform:scale(calc(.3 + var(--k) * .7)) rotate(calc((1 - var(--k)) * -40deg))}
.sellos__s.is-gift{background:rgba(254,187,40,var(--k));color:#3A2400}

/* ---------- 5:30 opina ---------- */
.opina{display:flex;flex-direction:column;gap:8px}
.opina__row{
  position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-radius:14px;background:rgba(20,20,20,.05);opacity:var(--in);
}
.opina__fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * var(--k) * 100%);background:rgba(255,122,34,.2)}
.opina__row.is-top .opina__fill{background:rgba(255,122,34,.42)}
.opina__name,.opina__row b{position:relative;font-family:var(--f-dis);font-weight:700;font-size:.92rem}
.opina__row b{font-variant-numeric:tabular-nums}

/* ---------- 8:00 trivia ---------- */
.hoja--trivia{background:#141414;color:#fff}
.hoja--trivia .hoja__head small{color:rgba(255,255,255,.55)}
.timer{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:conic-gradient(var(--orange) calc((1 - var(--k)) * 360deg),rgba(255,255,255,.12) 0);
}
.timer b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#141414;font-family:var(--f-dis);font-size:1.05rem}
.quiz2{--ok:clamp(0,(var(--t,1) - .62) * 10,1);display:flex;flex-direction:column;gap:8px}
.quiz2 li{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  font-family:var(--f-dis);font-weight:700;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);opacity:calc(var(--in) * (1 - var(--ok) * .5));
}
.quiz2 li > span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.1);font-size:.8rem}
.quiz2 li.is-right{
  opacity:var(--in);
  background:color-mix(in srgb,rgba(34,197,94,.22) calc(var(--ok) * 100%),rgba(255,255,255,.07));
  border-color:color-mix(in srgb,#22c55e calc(var(--ok) * 100%),rgba(255,255,255,.1));
}
.quiz2 li.is-right .lucide{margin-left:auto;color:#4ade80;opacity:var(--ok)}
.trivia__res{
  display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(100deg,var(--orange),var(--amber));color:#1A0B00;font-family:var(--f-dis);font-weight:800;
  opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 12px));
}

/* ---------- 10:00 eventos ---------- */
.eventos2{display:flex;flex-direction:column}
.eventos2 li{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 0;
  border-bottom:1px solid rgba(20,20,20,.08);opacity:var(--in);transform:translateY(calc((1 - var(--in)) * 12px));
}
.eventos2__fecha{padding:6px 10px;border-radius:10px;background:rgba(var(--hot),.14);color:#B84500;font-family:var(--f-mono);font-size:.68rem;font-weight:500;text-transform:uppercase}
.eventos2__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.eventos2__txt b{font-family:var(--f-dis);font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eventos2__txt small{font-size:.74rem;color:rgba(20,20,20,.55)}
.hoja__btn{
  display:flex;justify-content:center;align-items:center;gap:8px;margin-top:16px;padding:13px;border-radius:99px;
  background:#141414;color:#fff;font-family:var(--f-dis);font-weight:700;font-size:.9rem;opacity:var(--in);
  transition:background-color .3s;
}
.hoja__btn:hover{background:#B84500}

@media (max-width:560px){
  .cruces__row{grid-template-columns:124px 1fr 54px;gap:10px}
  .dolar__num,.clima__num{font-size:1.9rem}
}