/* ===== /persianas-verticales-puebla/ · efecto propio «La vertical gigante» + colores Dreams ===== */

/* --- La vertical gigante: una persiana de PVC a todo lo ancho; con el scroll las lamas giran y se recogen
       hacia la izquierda y descubren la recepción real de una oficina --- */
.vg-track{position:relative;margin-top:clamp(2.2rem,4vw,3.2rem)}
.motion .vg-track{height:330vh}
.vg-stage{position:relative;height:min(100svh,880px);overflow:hidden;background:#101215;--n:16}
.motion .vg-stage{position:sticky;top:0;height:100svh}
.vg-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;transform-origin:30% 50%}
.vg-sombra{position:absolute;inset:0;background:#07090c;opacity:.55;pointer-events:none}
.vg-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(0deg,rgba(10,12,15,.92),rgba(10,12,15,0));pointer-events:none;z-index:3}
.vg-lamas{position:absolute;inset:0;perspective:1500px;pointer-events:none;z-index:2}
.vg-lamas i{position:absolute;top:16px;bottom:-1%;left:calc(var(--k) * 100% / var(--n));width:calc(100% / var(--n) + 1px);transform-origin:50% 50%;will-change:transform;
  background:linear-gradient(90deg,rgba(0,0,0,.2),rgba(255,255,255,.16) 36%,rgba(255,255,255,.04) 64%,rgba(0,0,0,.22)),
    repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 4px),#e7e3db;
  box-shadow:inset 0 -10px 0 #c9c3b8}
.vg-lamas i::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--sh,0)}
.vg-riel{position:absolute;left:0;right:0;top:0;height:18px;z-index:4;background:linear-gradient(#45494e,#1b1d20);box-shadow:0 3px 6px rgba(0,0,0,.45)}
.vg-hud{position:absolute;left:clamp(16px,4vw,48px);top:clamp(96px,14vh,130px);z-index:5;width:min(300px,calc(100% - 32px));padding:.85rem 1rem;border-radius:14px;background:rgba(10,12,15,.74);border:1px solid var(--linea-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.vg-hud .hud-top{display:flex;align-items:center;gap:.5rem;font:600 .66rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--cielo)}
.vg-hud .hud-top i{width:7px;height:7px;border-radius:50%;background:var(--naranja);box-shadow:0 0 0 3px rgba(245,134,52,.25)}
.vg-hud .hud-row{margin-top:.7rem}
.vg-hud .hud-row output{font:700 1.05rem/1 var(--f-display);color:var(--texto)}
.vg-hud .hud-bar i{transform:scaleX(var(--l,0))}
.vg-pasos{position:absolute;left:clamp(16px,4vw,48px);right:120px;bottom:clamp(20px,5vh,44px);z-index:5;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:1rem}
.vg-pasos ol{list-style:none;display:flex;gap:.5rem}
.vg-pasos li{padding:.6rem .9rem;border-radius:999px;border:1px solid var(--linea-2);background:rgba(10,12,15,.6);font:700 .95rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--texto-3);transition:color .4s,border-color .4s,background .4s}
.vg-pasos li.on{color:var(--texto);border-color:var(--naranja);background:rgba(245,134,52,.16)}
.vg-fin{max-width:24ch;font:800 clamp(1.5rem,2.6vw,2.4rem)/1.02 var(--f-display);text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.vg-fin.on{opacity:1;transform:none}
.vg-fin em{font-style:normal}
html:not(.motion) .vg-lamas,html:not(.motion) .vg-hud{display:none}
html:not(.motion) .vg-sombra{opacity:0}
html:not(.motion) .vg-fin{opacity:1;transform:none}
html:not(.motion) .vg-pasos ol{display:none}

/* --- medios de las secciones --- */
.vt-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vt-par .ph{aspect-ratio:3/4}
.vt-par .ph--w{grid-column:1/-1;aspect-ratio:5/4}
.ph .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}
.ph .tag i{width:7px;height:7px;border-radius:50%;background:#ff4d3d;box-shadow:0 0 0 3px rgba(255,77,61,.25)}

/* --- Dreams: video, fotos, ficha y los 12 colores --- */
.dr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
.dr-media{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:12px}
.dr-media .ph--v{grid-row:span 2;aspect-ratio:4/5}
.dr-media .ph:not(.ph--v) img{position:absolute;inset:0}
.dr-ficha{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:1.6rem}
.dr-ficha div{padding:.85rem 1rem;border-radius:12px;background:var(--grafito);border:1px solid var(--linea)}
.dr-ficha dt{font:600 .66rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.dr-ficha dd{margin-top:.4rem;font:800 1.1rem/1.1 var(--f-display);text-transform:uppercase;color:var(--texto)}
.dr-col{margin-top:clamp(2.6rem,5vw,4rem)}
.dr-col .k{font:600 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--cielo)}
.dr-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.dr-tabs button{padding:.65rem 1.05rem;border-radius:999px;border:1px solid var(--linea-2);background:none;cursor:pointer;font:700 1rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.03em;color:var(--texto-2);transition:background .3s,color .3s,border-color .3s}
.dr-tabs button[aria-selected="true"]{background:var(--texto);color:var(--negro);border-color:var(--texto)}
.dr-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:1.2rem}
.dr-sw[hidden]{display:none}
.dr-sw figure{margin:0;border-radius:14px;overflow:hidden;background:var(--grafito);border:1px solid var(--linea)}
.dr-sw img{display:block;width:100%;height:auto;aspect-ratio:480/213;object-fit:cover}
.dr-sw figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.75rem .9rem;font:800 1.1rem/1 var(--f-display);text-transform:uppercase}
.dr-sw figcaption small{font:600 .64rem/1.2 var(--f-ui);letter-spacing:.12em;color:var(--texto-3);text-align:right}

/* --- cómo se operan: tres pasos --- */
.op{list-style:none;display:grid;gap:10px;margin-top:1.6rem;counter-reset:op}
.op li{position:relative;padding:1.1rem 1.2rem 1.1rem 3.6rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.op li::before{content:attr(data-n);position:absolute;left:1.2rem;top:1.15rem;font:600 .78rem/1 var(--f-ui);letter-spacing:.12em;color:var(--naranja)}
.op b{display:block;font:800 1.25rem/1.05 var(--f-display);text-transform:uppercase}
.op span{display:block;margin-top:.35rem;color:var(--texto-2);font-size:.96rem}

@media (max-width:900px){
  .motion .vg-track{height:280vh}
  .vg-stage{--n:8}
  .vg-foto{object-position:42% 50%}
  .vg-lamas i:nth-child(n+9){display:none}
  .vg-hud{top:84px}
  .vg-pasos li{font-size:.82rem;padding:.5rem .7rem}
  .vg-pasos{right:clamp(16px,4vw,48px);bottom:96px}
  .vg-fin{max-width:18ch}
  .dr{grid-template-columns:1fr}
}
@media (max-width:640px){
  .dr-media{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .dr-media .ph--v{grid-column:1/-1;grid-row:auto}
  .dr-media .ph:not(.ph--v){aspect-ratio:1}
  .dr-sw{grid-template-columns:1fr 1fr}
  .dr-sw figure:last-child{grid-column:1/-1}
  .dr-ficha dd{font-size:1rem}
}