/* ===== /cortinas-en-puebla/ · efecto propio «La caída»: la galería por espacio; cada foto entra cubierta por dos
   paños plisados que se abren hacia los lados como una cortina Ripplefold, quedan recogidos en las orillas y se mecen
   al pasar el cursor ===== */
.cg-grupo{margin-top:clamp(2.4rem,5vw,3.6rem)}
.cg-grupo .txt{max-width:62ch}
.cg-k{font:600 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--cielo)}
.cg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:1.4rem}
.cg .ph{aspect-ratio:3/4;isolation:isolate}
.cg .ph.w{grid-column:span 2;aspect-ratio:3/2}
.cg .ph figcaption{z-index:3}
.cg .ph::before,.cg .ph::after{content:"";position:absolute;top:0;bottom:0;width:50.5%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 9%,rgba(0,0,0,0) 88%,rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.08) 7px,rgba(255,255,255,.12) 14px,rgba(255,255,255,.02) 20px,rgba(0,0,0,.34) 26px),
    #6a625b;
  transition:transform 1.5s cubic-bezier(.65,.05,.25,1);transition-delay:calc(var(--d,0) * 1ms + 150ms)}
.cg .ph::before{left:0;transform-origin:0 50%}
.cg .ph::after{right:0;transform-origin:100% 50%}
.cg .ph.in::before,.cg .ph.in::after{transform:scaleX(.055)}
@media (hover:hover){
  .cg .ph.in:hover::before,.cg .ph.in:hover::after{animation:mece 1.8s ease-in-out infinite;transition:none}
}
@keyframes mece{0%,100%{transform:scaleX(.055) skewY(0)}50%{transform:scaleX(.09) skewY(.5deg)}}
html:not(.motion) .cg .ph::before,html:not(.motion) .cg .ph::after{transform:scaleX(.055);transition:none}
.cg .ph img{transition:transform 1.8s var(--ease)}
.cg .ph:not(.in) img{transform:scale(1.06)}

/* --- telas: tergales y blackout del muestrario --- */
.telas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:1.6rem}
.tela{position:relative;padding:1.15rem 1.15rem 1.05rem;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-f{font:600 .64rem/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--cielo)}
.tela.bo .tela-f{color:var(--naranja)}
.tela .tela-n{margin-top:.45rem;font:800 1.35rem/1 var(--f-display);text-transform:uppercase}
.tela .sw{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.7rem}
.tela .sw span{padding:.28rem .5rem;border-radius:999px;border:1px solid var(--linea-2);font:600 .66rem/1 var(--f-ui);letter-spacing:.05em;color:var(--texto-2)}
.tela dl{display:grid;gap:.3rem;margin-top:.85rem;padding-top:.75rem;border-top:1px solid var(--linea);font-size:.84rem}
.tela dl div{display:flex;justify-content:space-between;gap:.6rem}
.tela dt{color:var(--texto-3)}
.tela dd{color:var(--texto);text-align:right}

/* --- medios de las secciones --- */
.cm{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cm .ph{aspect-ratio:3/4}
.cm .ph.w{grid-column:1/-1;aspect-ratio:16/9}
.ph .tag{position:absolute;left:12px;top:12px;z-index:3;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)}
.rieles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:1.6rem}
.rieles div{padding:1.1rem 1.15rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.rieles b{display:block;font:800 1.2rem/1.05 var(--f-display);text-transform:uppercase}
.rieles span{display:block;margin-top:.45rem;color:var(--texto-2);font-size:.92rem}
.pc4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(2rem,4vw,3rem)}
.pc4 .ph{aspect-ratio:3/4}

/* --- la tienda --- */
.tienda{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:stretch;margin-top:clamp(2rem,4vw,3rem)}
.tienda .map{min-height:420px}
.tienda dl{display:grid;gap:.9rem}
.tienda dl div{padding:1rem 1.1rem;border-radius:14px;background:var(--grafito);border:1px solid var(--linea)}
.tienda dt{font:600 .68rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--texto-3)}
.tienda dd{margin-top:.4rem;color:var(--texto);font-size:1rem}
.tienda dd a{color:var(--texto);text-decoration:underline;text-decoration-color:var(--naranja);text-underline-offset:4px}

@media (max-width:1100px){.telas{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .cg,.pc4{grid-template-columns:1fr 1fr}
  .cg .ph.w{grid-column:span 2}
  /* en dos columnas, las fotos angostas rellenan el hueco que deja una ancha (cada grupo tiene un número par de angostas) */
  .cg{grid-auto-flow:dense}
  .telas{grid-template-columns:1fr 1fr}
  .tienda{grid-template-columns:1fr}
}
@media (max-width:640px){
  .telas{grid-template-columns:1fr}
  .rieles{grid-template-columns:1fr}
}