/* Sobre con lacre de Ocasella (compartido por la portada y la demo) */
.env{--paper:#F7F0E6;--paper-dark:#E6D8C5;--paper-mid:#EFE4D4;position:relative;width:100%;aspect-ratio:1.45;perspective:1400px}
.env__back{position:absolute;inset:0;background:var(--paper-dark);border-radius:6px;box-shadow:0 46px 70px -42px rgba(43,35,32,.6),0 1px 0 rgba(43,35,32,.06)}
.env__card{z-index:1;position:absolute;left:6%;right:6%;top:6%;height:88%;background:#FFFDF9;border-radius:4px;display:flex;flex-direction:column;align-items:center;padding-top:9%;text-align:center;box-shadow:0 0 0 1px #EBDFD0 inset;transition:transform 1.05s cubic-bezier(.2,.8,.2,1) .6s}
.env__card > *{opacity:0;transition:opacity .45s ease .8s}
.env:not(.is-open) .env__card{opacity:0}
.env__front{z-index:2;position:absolute;inset:0;border-radius:6px;background:
  linear-gradient(to top right,var(--paper) 49.6%,transparent 50%) left bottom/50.5% 100% no-repeat,
  linear-gradient(to top left,var(--paper) 49.6%,transparent 50%) right bottom/50.5% 100% no-repeat}
.env__front::after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:linear-gradient(to top,var(--paper),var(--paper-mid));clip-path:polygon(0 100%,50% 18%,100% 100%);border-radius:0 0 6px 6px}
.env__flap{position:absolute;left:0;right:0;top:0;height:60%;z-index:3;background:linear-gradient(to bottom,var(--paper-mid),var(--paper));clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .85s cubic-bezier(.45,0,.2,1) .25s,z-index 0s linear .7s,background 0s linear .62s}
.env__flap::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.35),transparent 40%)}

.seal{position:absolute;left:50%;top:60%;width:27%;aspect-ratio:1;margin:0;padding:0;border:0;background:none;cursor:pointer;transform:translate(-50%,-50%);z-index:5;border-radius:50%;-webkit-tap-highlight-color:transparent;filter:drop-shadow(0 7px 10px rgba(98,36,29,.42))}
.seal__half{position:absolute;inset:0;transition:transform .7s cubic-bezier(.3,0,.2,1),opacity .5s ease .2s}
.seal__half--l{clip-path:polygon(0 0,53% 0,48% 30%,55% 55%,47% 78%,52% 100%,0 100%)}
.seal__half--r{clip-path:polygon(52% 0,100% 0,100% 100%,51% 100%,46% 78%,54% 55%,47% 30%)}
.seal__half > *{width:100%;height:100%;display:block}
.seal:hover .seal__half{transform:scale(1.04)}
.seal:focus-visible{outline:3px solid #E8C99A;outline-offset:4px}

.env.is-open .seal{pointer-events:none}
.env.is-open .seal__half--l{transform:translate(-38%,24%) rotate(-24deg);opacity:0}
.env.is-open .seal__half--r{transform:translate(38%,24%) rotate(22deg);opacity:0}
.env.is-open .env__flap{transform:rotateX(180deg);z-index:0;background:
  repeating-linear-gradient(135deg,rgba(232,201,154,.55) 0 1px,transparent 1px 9px),
  linear-gradient(#9E3A2F,#8A3127)}
.env.is-open .env__flap::after{display:none}
.env.is-open .env__card{transform:translateY(-56%)}
.env.is-open .env__card > *{opacity:1}

@media (prefers-reduced-motion:reduce){
  .env *{transition-duration:.01ms!important;transition-delay:0s!important}
}