/* ================================================================
   Proyectos: cada caso en una pantalla vertical que «graba»
   ================================================================ */
.proj-head h1{font-size:clamp(4rem,15vw,13rem)}

.reel-sec{position:relative;height:620vh}
.reel-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:58% 42%}
@media (min-width:960px){ .reel-sticky{grid-template-rows:none;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(30px,4vw,70px);padding:0 max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)))} }

/* Lado izquierdo: ficha del proyecto */
.reel-meta{display:none}
@media (min-width:960px){
  .reel-meta{display:block}
  .reel-meta .eyebrow{margin-bottom:16px}
  .reel-meta h2{font-family:var(--display);font-weight:400;font-size:clamp(3rem,6vw,6.2rem);line-height:.9;letter-spacing:-.06em;margin:0 0 18px}
  .reel-meta p{margin:0;color:var(--gris);max-width:30ch}
  .reel-meta .tags{margin-top:20px}
}

/* Pantalla */
.reel-box{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding-top:70px}
@media (min-width:960px){ .reel-box{padding-top:40px} }
.screen-r{position:relative;height:min(76vh,700px);aspect-ratio:9/16;border-radius:30px;background:#111;padding:8px;box-shadow:0 40px 80px -40px rgba(28,27,26,.55)}
@media (max-width:959px){ .screen-r{height:calc(58svh - 90px)} }
.screen-in{position:relative;width:100%;height:100%;border-radius:23px;overflow:hidden;background:#1C1B1A;color:#fff}
.hud{position:absolute;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;align-items:center;z-index:5;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.rec{display:flex;align-items:center;gap:7px;font-weight:500}
.rec i{width:9px;height:9px;border-radius:50%;background:var(--siena-claro);box-shadow:0 0 0 3px rgba(208,138,104,.25);animation:rec 1.4s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.bar{position:absolute;left:14px;right:14px;bottom:16px;height:2px;background:rgba(255,255,255,.25);z-index:5;border-radius:2px}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:#fff;border-radius:2px}
.bar-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--siena-claro)}
.bar-ticks span{position:absolute;top:-3px;width:1px;height:8px;background:rgba(255,255,255,.5)}

.frame{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;z-index:1}
.frame.on{opacity:1;z-index:2}
.frame img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 4s ease-out}
.frame.on img{transform:scale(1)}
.frame .media{width:100%;height:100%;background:#3a3836}
.shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.6))}
.cap{position:absolute;left:18px;right:18px;bottom:40px;z-index:3}
.cap small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.cap b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;letter-spacing:-.04em}

.f-reto{display:flex;flex-direction:column;justify-content:center;padding:30px 22px;background:#1C1B1A}
.f-reto b{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.5rem);line-height:1;letter-spacing:-.045em}
.f-reto .zero{margin-top:22px;display:flex;align-items:baseline;gap:8px;color:#a8a199;font-size:12px}
.f-reto .zero span{font-family:var(--display);font-size:2.6rem;color:#fff;letter-spacing:-.04em}
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:2px;padding:44px 0 0;background:#fff}
.f-grid .media{height:auto;aspect-ratio:1}
.play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(250,248,245,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);z-index:3}
.play::after{content:"";position:absolute;left:23px;top:18px;border-left:15px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.f-result .nums{position:absolute;left:18px;right:18px;bottom:44px;z-index:3;display:grid;gap:14px}
.f-result .n b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,4.4vw,3.6rem);line-height:.9;letter-spacing:-.05em}
.f-result .n span{font-size:12px;opacity:.9}

/* Lado derecho: capítulo */
.chapters{position:relative;padding:4px var(--gutter) calc(84px + env(safe-area-inset-bottom));min-width:0}
@media (min-width:960px){ .chapters{padding:0;height:100%;display:flex;flex-direction:column;justify-content:center} }
.ch-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.ch-top .mob-name{font-family:var(--display);font-size:1.25rem;letter-spacing:-.04em}
@media (min-width:960px){ .ch-top .mob-name{display:none} }
.ch-stack{position:relative;min-height:170px}
@media (min-width:960px){ .ch-stack{min-height:300px} }
.ch{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(16px);transition:opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.ch.on{opacity:1;transform:none;transition-delay:.1s;pointer-events:auto}
.ch .num-label{color:var(--siena)}
.ch h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,3.3vw,3.2rem);line-height:1;letter-spacing:-.045em;margin:8px 0 12px}
.ch p{margin:0;color:var(--gris);font-size:clamp(.98rem,1.15vw,1.1rem);max-width:38ch}
.ch-list{display:flex;gap:6px;margin-top:22px}
.ch-list span{font-size:11px;letter-spacing:.06em;color:#b3aca3;transition:color .4s}
.ch-list span.on{color:var(--grafito)}
.ch-list span + span::before{content:"·";margin-right:6px;color:#d8d2ca}
@media (max-width:959px){ .ch-list{display:none} }

.proj-sep{padding:clamp(40px,6vw,80px) 0;text-align:center}
.proj-sep span{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--siena)}

.soon-r{padding:clamp(60px,8vw,110px) 0 0}
.soon-r .wrap{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;border-top:1px solid var(--linea);padding-top:26px}
.soon-r p{margin:0;color:var(--gris)}

/* Sin movimiento: todo visible en orden */
.reduce .reel-sec,html:not(.js) .reel-sec{height:auto}
.reduce .reel-sticky,html:not(.js) .reel-sticky{position:relative;height:auto;min-height:100svh}
.reduce .ch,html:not(.js) .ch{position:relative;opacity:1;transform:none;margin-bottom:22px}
.reduce .ch-stack,html:not(.js) .ch-stack{min-height:0}
.reduce .frame.f-result,html:not(.js) .frame.f-result{opacity:1}
.f-grid{grid-auto-rows:auto;align-content:start;background:#1C1B1A;padding-top:44px}