/* ===== /persianas-sheer-elegance-puebla/ · efecto propio «Las franjas» + 14 telas con filtro ===== */

/* --- 01 · el video real y los detalles de cerca --- */
.sh-media{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:12px}
.sh-media .ph--v{grid-row:span 2;aspect-ratio:4/5}
.sh-media .ph:not(.ph--v) img{position:absolute;inset:0}
.sh-media .tag{position:absolute;left:12px;top:12px;z-index:2;display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#9BE4FF}
.sh-media .tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}

/* --- 02 · Las franjas: la foto real del ventanal y la capa de enfrente que se desliza con el scroll --- */
.fr-track{position:relative;margin-top:clamp(2.4rem,5vw,4rem)}
.motion .fr-track{height:320vh}
.fr-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.motion .fr-stage{position:sticky;top:0;height:100svh;padding:96px 0 28px}
.fr-steps{list-style:none;display:grid;gap:.4rem;max-width:30rem}
.fr-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}
.fr-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);transition:color .45s}
.fr-steps h3{font:800 1.3rem/1.05 var(--f-display);text-transform:uppercase;color:inherit}
.fr-steps h3 button{padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;color:inherit;cursor:pointer}
.fr-steps h3 button:focus-visible{outline:2px solid var(--cielo);outline-offset:4px;border-radius:4px}
.fr-steps p{margin-top:.35rem;font-size:.95rem;line-height:1.5}
.fr-steps li.on{color:var(--texto);background:var(--grafito);border-color:rgba(0,175,239,.35)}
.fr-steps li.on::before{color:var(--naranja)}
.fr-steps li.on p{color:var(--texto-2)}
.fr-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) .fr-pista{display:none}

.fr-view{width:min(54vw,calc((100svh - 250px) * 1.04),720px);box-shadow:0 50px 90px -40px rgba(0,0,0,.9);border-radius:20px}
html:not(.motion) .fr-view{width:min(54vw,720px)}
.fr-win{position:relative;aspect-ratio:1200/1152;border-radius:20px 20px 0 0;overflow:hidden;background:#1b1d20;border:1px solid var(--linea-2);border-bottom:0}
/* la foto mide 1200 × 1600; se muestra la franja de 160 a 1312 px (la ventana y el reflejo en el piso) */
.fr-win>img{position:absolute;left:0;top:-13.889%;width:100%;height:auto;max-width:none}
.fr-win>svg{position:absolute;inset:0;width:100%;height:100%}
.fr-win .cap{fill:#3b3937}
.fr-dim{position:absolute;inset:0;background:#05070a;opacity:calc(var(--s,0) * .3);pointer-events:none}
.fr-tag{position:absolute;left:12px;top:12px;z-index:2;padding:.45rem .7rem;border-radius:8px;background:rgba(10,12,15,.78);font:700 .66rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:#9BE4FF}
.fr-hud{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.2rem;align-items:center;padding:.9rem 1.1rem;border:1px solid var(--linea-2);border-top:0;border-radius:0 0 20px 20px;background:var(--grafito)}
.fr-hud .hud-row{margin-top:0}
.fr-hud .hud-bar+.hud-row{margin-top:.85rem}
.fr-hud .hud-row b{font:700 1rem/1 var(--f-display);letter-spacing:.02em;color:var(--texto)}
.fr-hud .hud-bar i{transform:scaleX(var(--l,1));transition:transform .2s linear}
/* vista de lado: las dos capas de la tela */
.fr-corte{display:grid;justify-items:center;gap:.4rem;margin:0}
.fr-corte svg{width:66px;height:74px;overflow:visible}
.fr-corte figcaption{font:600 .6rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.fr-corte .so{fill:#a59d92}
.fr-corte .tu{fill:rgba(255,255,255,.14)}
.fr-corte .rayo{stroke:#ffd27a;stroke-width:1.6;stroke-linecap:round;opacity:calc(1 - var(--s,0))}
.fr-corte .lbl{font:600 7px/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;fill:var(--texto-3)}

/* --- 03 · Dim Out: dos fotos --- */
.sh-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sh-par .ph{aspect-ratio:3/4}

/* --- 04 · 14 telas con filtro por bloqueo de luz --- */
.tl-fil{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:clamp(1.6rem,3vw,2.2rem)}
.tl-fil button{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:999px;border:1px solid var(--linea-2);background:none;cursor:pointer;font:600 .88rem/1 var(--f-body);color:var(--texto-2);transition:background .3s,color .3s,border-color .3s}
.tl-fil button small{font:600 .72rem/1 var(--f-ui);color:var(--texto-3)}
.tl-fil button[aria-pressed="true"]{background:var(--texto);color:var(--negro);border-color:var(--texto)}
.tl-fil button[aria-pressed="true"] small{color:var(--negro)}
.telas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:1.4rem}
.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,opacity .35s,transform .35s var(--ease)}
.tela:hover{border-color:rgba(0,175,239,.45)}
.tela[hidden]{display:none}
.tela.entra{opacity:0;transform:translateY(10px)}
.tl-n{margin-top:1rem;font:600 .74rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3)}
.tela .tela-f{font:600 .66rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--cielo)}
.tela.dim .tela-f{color:var(--naranja)}
.tela .tela-n{margin-top:.45rem;font:800 1.45rem/1 var(--f-display);text-transform:uppercase}
.tela .bq{display:flex;align-items:center;gap:.3rem;margin-top:.75rem;font:600 .7rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--texto-2)}
.tela .bq i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.12)}
.tela .bq i.on{background:var(--texto)}
.tela .bq span{margin-left:.35rem}
.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}

/* --- 05 · precio con las dos líneas --- */
.price-card .amt2{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem;padding:.9rem 1rem;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--linea)}
.price-card .amt2 span{font:600 .74rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}
.price-card .amt2 b{font:900 1.9rem/1 var(--f-display);color:var(--texto)}
.price-card .amt2 small{font:600 .8rem/1 var(--f-body);color:var(--texto-3)}

/* --- 06 · espacios: mosaico + antes y después --- */
.esp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(2rem,4vw,3rem)}
.esp .ph{aspect-ratio:3/4}
.esp .ph.w{grid-column:span 2;aspect-ratio:3/2}
.esp-ad{margin-top:clamp(3rem,6vw,5rem)}

@media (max-width:1100px){.telas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .motion .fr-track{height:280vh}
  .fr-stage{grid-template-columns:1fr;align-content:center;justify-items:center;gap:1rem}
  .motion .fr-stage{padding:74px 0 14px}
  .fr-view,html:not(.motion) .fr-view{order:-1;width:min(100%,calc((100svh - 330px) * 1.04),560px)}
  /* en celular los tres estados son pestañas y abajo va solo la explicación del que está activo */
  .fr-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;width:100%;max-width:560px}
  .fr-steps li{display:contents}
  .fr-steps li::before{display:none}
  .fr-steps h3{grid-row:1;display:flex}
  .fr-steps h3 button{flex:1;padding:.7rem .4rem;border-radius:10px;border:1px solid var(--linea-2);text-align:center;font-size:1rem;transition:border-color .35s,background .35s}
  .fr-steps li.on h3 button{border-color:var(--naranja);background:linear-gradient(180deg,rgba(245,134,52,.14),rgba(245,134,52,.03))}
  .fr-steps p{grid-row:2;grid-column:1/-1;display:none;margin-top:.15rem;min-height:4.5em}
  .fr-steps li.on p{display:block}
  .fr-pista{display:none}
  .fr-hud{padding:.75rem .9rem;gap:.9rem}
  .fr-corte svg{width:54px;height:60px}
  .esp{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .sh-media{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .sh-media .ph--v{grid-column:1/-1;grid-row:auto}
  .sh-media .ph:not(.ph--v){aspect-ratio:1}
  .telas{grid-template-columns:1fr}
  .price-card .amt2{flex-direction:column;align-items:flex-start;gap:.4rem}
}
@media (prefers-reduced-motion:reduce){.fr-hud .hud-bar i,.tela{transition:none}}