/* Lacrea · sobre compartido */
.env{position:relative;width:100%;aspect-ratio:1.42;container-type:inline-size;--ease-out:cubic-bezier(.16,1,.3,1)}
.env__body{position:absolute;inset:0;perspective:1400px}
.env__inside{position:absolute;inset:0;background:var(--env-liner);background-size:auto;border-radius:3px;box-shadow:0 1px 0 rgba(0,0,0,.06) inset}
.env__inside::after{content:"";position:absolute;inset:0;background:var(--env-shade);opacity:.25}
.env__letter{position:absolute;left:6%;right:6%;top:7%;bottom:6%;z-index:2;background:var(--letter-bg,#fff);color:var(--letter-ink,#222);box-shadow:0 2px 6px rgba(0,0,0,.12);transition:transform 1.1s var(--ease-out);overflow:hidden}
.env__front{position:absolute;inset:0;z-index:3;background:var(--env-paper);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.04) inset}
.env__bottom{position:absolute;inset:0;z-index:4;background:var(--env-shade);clip-path:polygon(0 100%,50% 47%,100% 100%);opacity:.55}
.env__flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:6;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s var(--ease-out)}
.env__flap-out,.env__flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.env__flap-out{background:var(--env-paper);filter:brightness(.97)}
.env__flap-in{background:var(--env-liner);transform:rotateX(180deg)}
.env__seal{position:absolute;z-index:8;left:50%;top:58%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:default;transition:transform .35s var(--ease-out),opacity .35s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.22))}
.env__seal svg{width:100%;height:100%;display:block}
button.env__seal{cursor:pointer}
button.env__seal:hover{transform:translate(-50%,-50%) scale(1.05) rotate(-4deg)}
button.env__seal:focus-visible{outline:2px dashed var(--env-ink);outline-offset:6px;border-radius:50%}
.env--emboss .env__seal{filter:drop-shadow(-1px -1px 0 rgba(255,255,255,.35)) drop-shadow(1px 1px 1px rgba(0,0,0,.35))}

/* Secuencia */
.env.is-breaking .env__seal{transform:translate(-50%,-50%) scale(1.18) rotate(8deg);opacity:0}
.env.is-open .env__flap{transform:rotateX(180deg)}
.env.is-open .env__flap{z-index:1}
.env.is-rising .env__letter{transform:translateY(-62%)}
.env.is-rising .env__letter{z-index:2}
.env.is-out{transition:opacity .55s ease,transform .55s var(--ease-out);opacity:0;transform:translateY(24px) scale(.96)}

/* Vista previa en el catálogo: la solapa se entreabre al pasar */
.env--peek .env__flap{transition:transform .6s var(--ease-out)}
.env--peek .env__letter{transition:transform .7s var(--ease-out)}
@media (hover:hover){
  .peek:hover .env__flap,.peek:focus-visible .env__flap{transform:rotateX(180deg);z-index:1}
  .peek:hover .env__seal,.peek:focus-visible .env__seal{opacity:0;transform:translate(-50%,-50%) scale(.9)}
  .peek:hover .env__letter,.peek:focus-visible .env__letter{transform:translateY(-34%);transition-delay:.18s}
}
/* Táctil: sin hover, se entreabre al cruzar el centro de la pantalla (site.js) */
.peek.is-peek .env__flap{transform:rotateX(180deg);z-index:1}
.peek.is-peek .env__seal{opacity:0;transform:translate(-50%,-50%) scale(.9)}
.peek.is-peek .env__letter{transform:translateY(-34%);transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .env__flap,.env__letter,.env__seal,.env.is-out{transition:none!important}
}