/* Portada de Colecciones. Solo se carga en /colecciones.
   Efecto "apertura": al entrar, la foto llega recortada como un cuadro con
   margen y se abre hasta ocupar la pantalla mientras se aleja el zoom (--e va
   de 0 a 1, lo calcula colecciones.js con el scroll). El nombre sube desde
   atras de una linea y la frase se descubre de un lado al otro. */
.cl{background:#120d09}
.cl .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cl-col{position:relative;height:calc(100vh - var(--sh-header,96px));min-height:560px;overflow:hidden;display:flex;align-items:flex-end;color:#faf5ec;--e:1}
.cl-col .ph{position:absolute;inset:0;overflow:hidden;
  clip-path:inset(calc((1 - var(--e)) * 9%) calc((1 - var(--e)) * 7%) round calc((1 - var(--e)) * 28px))}
.cl-col img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(calc(1.16 - var(--e) * .16))}
.cl-col .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(14,10,7,.82) 0%,rgba(14,10,7,.35) 38%,rgba(14,10,7,0) 62%),
             linear-gradient(90deg,rgba(14,10,7,.5) 0%,rgba(14,10,7,0) 55%)}
.cl-col.der .ph::after{background:linear-gradient(0deg,rgba(14,10,7,.82) 0%,rgba(14,10,7,.35) 38%,rgba(14,10,7,0) 62%),
             linear-gradient(270deg,rgba(14,10,7,.5) 0%,rgba(14,10,7,0) 55%)}
.cl-col .in{position:relative;z-index:1;width:100%;padding:0 6vw clamp(48px,7vh,90px);display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.cl-col.der .in{flex-direction:row-reverse;text-align:right}
.cl-col.der .in p{margin-left:auto}
.cl-col .n{display:block;font:500 11.5px var(--mono);letter-spacing:.3em;text-transform:uppercase;color:#e7a878;opacity:0;transition:opacity .9s ease .1s}
.cl-col h2{font:300 clamp(64px,11vw,190px)/.9 var(--serif);letter-spacing:-.02em;margin:14px 0 18px;overflow:hidden;padding-bottom:.04em;color:#faf5ec}
.cl-col h2 span{display:inline-block;transform:translateY(105%);transition:transform 1.3s cubic-bezier(.19,1,.22,1)}
.cl-col p{font:400 clamp(16px,1.3vw,19px)/1.5 var(--sans);color:#e6dac8;margin:0;max-width:40ch;
  clip-path:inset(0 100% 0 0);transition:clip-path 1.4s cubic-bezier(.19,1,.22,1) .35s}
.cl-col.der p{clip-path:inset(0 0 0 100%)}
.cl-col .cta{flex:none;display:inline-flex;align-items:center;gap:14px;font:500 13px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#faf5ec;
  padding:18px 28px;border:1px solid rgba(250,245,236,.55);border-radius:999px;backdrop-filter:blur(6px);background:rgba(20,14,9,.18);
  opacity:0;transition:background .3s,color .3s,border-color .3s,opacity .9s ease .6s}
.cl-col .cta:hover{background:#faf5ec;color:#1a130d;border-color:#faf5ec}
.cl-col .cta i{font-style:normal;transition:transform .3s}
.cl-col .cta:hover i{transform:translateX(4px)}
.cl-col.vis .n,.cl-col.vis .cta{opacity:1}
.cl-col.vis h2 span{transform:none}
.cl-col.vis p{clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.cl-col{--e:1!important}.cl-col .n,.cl-col .cta{opacity:1}.cl-col h2 span{transform:none}.cl-col p{clip-path:none}}
@media(max-width:760px){
  .cl-col .in,.cl-col.der .in{flex-direction:column;align-items:flex-start;text-align:left;gap:26px}
  .cl-col.der .in p{margin-left:0}
  .cl-col h2{font-size:clamp(56px,17vw,90px)}
}
/* el footer arranca pegado a la ultima coleccion */
.sh-colecciones .site-ft{margin-top:0}