/* El sobre sellado (compartido por las portadas): dorso con forro, solapa de dos caras que gira sobre su doblez, la
   carta en el bolsillo, el frente con su escote y el sello de lacre. Sin .sobre-vivo (sin JS o con movimiento
   reducido) solo se ve la carta, ya abierta y en su lugar. Los colores entran por variables que pone cada página:
   --sobre-papel, --sobre-papel-2, --sobre-forro, --sobre-forro-2, --sobre-oro, --sobre-filo, --sobre-tinta,
   --sobre-tinta-texto, --sobre-tinta-2 y --sobre-sombra. */
.sobre{position:relative;perspective:1100px}
.sobre-dorso,.solapa,.sobre-frente,.sello{display:none}
.carta-boca{position:relative}
.sobre-vivo{will-change:transform}
.sobre-vivo :is(.sobre-dorso,.solapa,.sobre-frente,.sello){display:block}

.sobre-vivo .sobre-dorso{position:absolute;inset:0;z-index:1;border-radius:2px;box-shadow:var(--sobre-sombra);
  background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sobre-oro) 22%,transparent) 0 1px,transparent 1px 9px),linear-gradient(180deg,var(--sobre-forro-2),var(--sobre-forro))}
.sobre-vivo .solapa{position:absolute;left:0;top:0;z-index:5;width:100%;height:60%;transform-origin:50% 0;transform-style:preserve-3d;pointer-events:none}
.solapa-cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:polygon(0 0,100% 0,50% 100%)}
.solapa-fuera{background:linear-gradient(176deg,var(--sobre-papel) 0%,var(--sobre-papel) 55%,var(--sobre-papel-2) 100%)}
.solapa-fuera::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--sobre-tinta) 5%,transparent),color-mix(in srgb,var(--sobre-tinta) 35%,transparent));opacity:var(--luz,0)}
.solapa-dentro{transform:rotateX(180deg);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--sobre-oro) 26%,transparent) 0 1px,transparent 1px 9px),linear-gradient(0deg,var(--sobre-forro-2),var(--sobre-forro))}

/* La carta vive en el bolsillo: lo que queda bajo el filo del sobre no se ve */
.sobre-vivo .carta-boca{position:absolute;inset:0;z-index:3;clip-path:inset(-1200% -80% 0 -80%)}
.sobre-vivo .carta-boca > *{position:absolute;left:50%;top:0;margin:0 0 0 calc(var(--carta-w) / -2);transform-origin:50% 0;will-change:transform}

.sobre-vivo .sobre-frente{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:0 0 2px 2px;
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
  background:radial-gradient(60% 50% at 50% 0%,color-mix(in srgb,var(--sobre-tinta) 14%,transparent),transparent 70%),linear-gradient(180deg,var(--sobre-papel-2),var(--sobre-papel) 40%,var(--sobre-papel));
  box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--sobre-filo) 80%,transparent),inset 1px 0 0 color-mix(in srgb,var(--sobre-filo) 50%,transparent),inset -1px 0 0 color-mix(in srgb,var(--sobre-filo) 50%,transparent)}
.sobre-pliegues{position:absolute;inset:0;width:100%;height:100%}
.sobre-pliegues path{fill:none;stroke:color-mix(in srgb,var(--sobre-tinta) 14%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.sobre-para{position:absolute;left:8%;bottom:9%;margin:0;font:italic 400 clamp(1rem,2.4vw,1.375rem)/1.1 var(--display);color:var(--sobre-tinta-texto);white-space:nowrap}
.sobre-sello-txt{position:absolute;right:5%;bottom:24%;margin:0;padding:3px 7px;border:1px solid color-mix(in srgb,var(--sobre-tinta) 35%,transparent);font:700 14px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--sobre-tinta-2);transform:rotate(-4deg)}

/* El sello: la cera se parte en dos mitades que caen */
.sobre-vivo .sello{position:absolute;left:38%;top:40%;z-index:6;width:24%;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 5px 6px color-mix(in srgb,var(--sobre-tinta) 40%,transparent))}
.sello svg{display:block;width:100%;height:100%;overflow:visible}
.sello-izq,.sello-der{transform-box:fill-box;transform-origin:50% 50%}