/* ===== /persianas-blackout-puebla/ · efecto propio «El apagón» + Sistema Fit + telas ===== */

/* --- El apagón: el scroll mueve el video real (la blackout baja a mediodía y se apaga la luz) --- */
.ap-track{position:relative;margin-top:clamp(2.4rem,5vw,4rem)}
.motion .ap-track{height:300vh}
.ap-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,5rem);align-items:center}
.motion .ap-stage{position:sticky;top:0;height:100svh;padding:96px 0 28px}
.ap-steps{list-style:none;display:grid;gap:.4rem;max-width:30rem}
.ap-steps li{position:relative;padding:1rem 1.1rem 1rem 3.4rem;border-radius:12px;border:1px solid transparent;color:var(--texto-3);transition:color .45s,background .45s,border-color .45s}
.ap-steps li::before{content:attr(data-n);position:absolute;left:1.1rem;top:1.05rem;font:600 .78rem/1 var(--f-ui);letter-spacing:.12em;color:var(--texto-3)}
.ap-steps li b{display:block;font:800 1.3rem/1.05 var(--f-display);text-transform:uppercase;color:inherit}
.ap-steps li span{display:block;margin-top:.35rem;font-size:.95rem;line-height:1.5}
.ap-steps li.on{color:var(--texto);background:var(--grafito);border-color:rgba(0,175,239,.35)}
.ap-steps li.on::before{color:var(--naranja)}
.ap-steps li.on span{color:var(--texto-2)}
html:not(.motion) .ap-steps li{color:var(--texto)}
.ap-view{position:relative;height:min(calc(100svh - 150px),780px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#000;border:1px solid var(--linea-2);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.ap-view video,.ap-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ap-hud{position:absolute;left:12px;right:12px;top:12px;z-index:2;padding:.75rem .9rem;border-radius:12px;background:rgba(10,12,15,.66);border:1px solid var(--linea-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ap-hud .hud-row{margin-top:0}
.ap-hud .hud-bar i{transform:scaleX(var(--l,1))}
.ap-fin{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:3rem 1.2rem 1.3rem;background:linear-gradient(0deg,rgba(10,12,15,.9),rgba(10,12,15,0));font:800 clamp(1.5rem,2.4vw,2rem)/1.02 var(--f-display);text-transform:uppercase;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ap-fin.on{opacity:1;transform:none}
.ap-fin em{font-style:normal}
.ap-pista{display:block;margin-top:1.2rem;font:600 .72rem/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--texto-3)}
html:not(.motion) .ap-pista{display:none}

/* --- Sistema Fit: la enrollable común contra el marco con guías --- */
.fit-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.6vw,1.2rem);margin-top:1.8rem}
.fit-vs .ph{aspect-ratio:3/4}
.fit-vs .tag{position:absolute;left:12px;top:12px;z-index:2;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .68rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase}
.fit-vs .tag.no{color:#ffb37a}
.fit-vs .tag.si{color:#9BE4FF}

/* --- 9 telas --- */
.telas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(1.8rem,3vw,2.6rem)}
.tela{position:relative;padding:1.3rem 1.3rem 1.2rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea);transition:border-color .3s}
.tela:hover{border-color:rgba(0,175,239,.45)}
.tela .tela-n{font:800 1.45rem/1 var(--f-display);text-transform:uppercase}
.tela .sw{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.8rem}
.tela .sw span{padding:.3rem .55rem;border-radius:999px;border:1px solid var(--linea-2);font:600 .7rem/1 var(--f-ui);letter-spacing:.06em;color:var(--texto-2)}
.tela dl{display:grid;gap:.35rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--linea);font-size:.86rem}
.tela dl div{display:flex;justify-content:space-between;gap:.8rem}
.tela dt{color:var(--texto-3)}
.tela dd{color:var(--texto);text-align:right}

/* --- dónde ponerlas: fotos en mosaico --- */
.donde{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem)}
.donde .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:1.3rem}
.donde .pair .ph{aspect-ratio:3/4}

@media (max-width:1100px){.telas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .motion .ap-track{height:260vh}
  .ap-stage{grid-template-columns:1fr;justify-items:center;align-content:center;gap:1rem}
  .motion .ap-stage{padding:78px 0 18px}
  .ap-steps{order:2;width:100%;max-width:none;gap:0}
  .motion .ap-steps li{display:none;padding:.2rem 0 0 2.4rem;border:0;background:none}
  .motion .ap-steps li.on{display:block}
  .motion .ap-steps li::before{left:0;top:.35rem}
  .ap-steps li b{font-size:1.15rem}
  .motion .ap-view{height:min(calc(100svh - 230px),640px)}
  html:not(.motion) .ap-view{height:auto;width:min(100%,420px)}
  .donde{grid-template-columns:1fr}
}
@media (max-width:640px){
  .telas{grid-template-columns:1fr}
  .fit-vs{grid-template-columns:1fr 1fr;gap:8px}
  .fit-vs .tag{font-size:.58rem;letter-spacing:.1em;left:8px;top:8px}
}