/* Sólo la integración opcional: la versión geométrica anterior se conserva. */
/* Never paint the unrelated green envelope while the selected textures decode. */
body[data-envelope=textured] .envelope-scene{transition:opacity .18s ease}
body[data-envelope-state=loading] .envelope-scene,
body[data-envelope-state=error] .envelope-scene{opacity:0;visibility:hidden;pointer-events:none}
/* Keep the title's layout and accessible text, but never paint a fallback face
   before the final scene has been measured with the downloaded wedding fonts. */
body[data-envelope-state=loading] :is(.opening-heading,.scroll-cue){opacity:0!important;pointer-events:none}
.noscript-card{display:block;width:min(90vw,560px);height:auto;margin:32px auto}
.mobile-reading-card{display:none}
/* The fictional-example notice must not add height to the viewport-sized stage. */
body.public-demo .public-demo-notice{position:absolute;top:0;left:0;right:0}
/* The old view-switch toolbar is gone; do not reserve its space on phones. */
@media(max-width:850px){body[data-envelope=textured] .envelope-controls{bottom:calc(18px + env(safe-area-inset-bottom,0px))}}
body[data-envelope=textured] .opening-stage{overflow:clip}
body[data-envelope=textured] .envelope-scene{aspect-ratio:2980/2000;perspective:1800px;perspective-origin:50% 6.7%}
body[data-envelope=textured] .envelope-scene :is(.envelope-back,.envelope-lining,.envelope-front,.envelope-flap){background:none;clip-path:none;border:0;border-radius:0;box-shadow:none;filter:none;overflow:visible}
body[data-envelope=textured] .envelope-scene :is(.envelope-back,.envelope-front):before,
body[data-envelope=textured] .envelope-scene :is(.envelope-back,.envelope-front):after{display:none}
body[data-envelope=textured] .envelope-back{z-index:1}
body[data-envelope=textured] .envelope-lining{z-index:2}
body[data-envelope=textured] .envelope-front{z-index:4}
/* El lienzo tiene margen alfa: el bolsillo acaba antes del 100% de su altura.
   Recortar al papel opaco y acompañar su caída evita que la tarjeta asome abajo. */
body[data-envelope=textured] .letter-viewport{z-index:3;clip-path:polygon(-200% -600%,300% -600%,300% calc(var(--texture-pocket-floor,92%) + var(--shell-drop,0px)),-200% calc(var(--texture-pocket-floor,92%) + var(--shell-drop,0px)))}
body[data-envelope=textured] .envelope-flap{transform-origin:50% 6.7%;transform:translateY(var(--shell-drop,0px)) rotateX(var(--texture-angle,0deg));z-index:var(--texture-flap-z,5);transform-style:preserve-3d}
.textured-piece,.textured-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.textured-face{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.textured-inside{transform:rotateY(180deg)}
.textured-seal-shadow{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:calc(var(--texture-seal-opacity,1)*var(--shell-alpha,1));transform:translateY(var(--shell-drop,0px))}
body[data-envelope=textured] .envelope-scene>.seal{padding:0;margin:0;background:none;box-shadow:none;border:0;border-radius:0;outline:none;overflow:visible;z-index:7;opacity:calc(var(--texture-seal-opacity,1)*var(--shell-alpha,1));transform:translateY(calc(var(--shell-drop,0px) + var(--texture-seal-lift,0px)));min-width:0;min-height:0}
body[data-envelope=textured] .envelope-scene>.seal:before,
body[data-envelope=textured] .envelope-scene>.seal:after{display:none}
body[data-envelope=textured] .envelope-scene>.seal img{inset:0;width:100%;height:100%;object-fit:contain;filter:none;mix-blend-mode:normal;opacity:1}
body[data-envelope=textured] .seal:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.envelope-controls{position:absolute;right:5vw;bottom:100px;z-index:20;display:flex;gap:12px;align-items:center;font-size:13px;flex-wrap:wrap}
.envelope-controls[hidden]{display:none}
.envelope-colors{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:28px;background:var(--paper)}
.envelope-colors button,.envelope-toggle{min-height:44px;padding:8px 16px;border:0;border-radius:24px;background:none;font:inherit;color:var(--ink)}
.envelope-colors button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.envelope-toggle{border:1px solid var(--line);background:var(--paper)}
.envelope-status{font-size:12px;max-width:250px}
/* La decoración pertenece al estilo de web, no al color del sobre.
   T09 conserva siempre su rama descendente al elegir rosa, salvia o azul. */
body[data-envelope=textured][data-web-style=eucalipto] .botanical-right{width:clamp(100px,12vw,190px);height:min(68svh,580px);max-width:none;max-height:none;right:4px;top:-40px;bottom:auto;object-fit:cover;object-position:right bottom;transform:scaleY(-1);opacity:.8;mask-image:linear-gradient(to left,#000 65%,transparent),linear-gradient(to bottom,transparent,#000 14%,#000);mask-composite:intersect;--breeze-turn:1.3deg;--breeze-rise:5px;--breeze-sway:3px}
@media(min-width:851px){.envelope-controls{left:10%;right:auto}}
/* Wide but shallow windows need a shorter title block above the controls. */
@media(min-width:851px) and (max-height:760px){
 html body[data-envelope=textured] .opening .opening-stage .opening-heading h1{font-size:clamp(48px,11.5svh,100px)}
}
@media(min-width:1101px){body[data-envelope=textured][data-web-style=seda] .opening-heading{left:10%}body[data-envelope=textured][data-web-style=seda] .scroll-cue{left:10%}}
@media(min-width:851px){body[data-envelope=textured][data-web-style=jardin] .envelope-controls{left:19%}}
@media(min-width:851px) and (max-width:1100px){body[data-envelope=textured][data-web-style=jardin] .envelope-controls{left:15%}}
@media(min-width:1200px){body[data-envelope=textured] .envelope-scene{width:min(700px,49vw,calc((100svh - 210px)*1.49));left:69.5%;top:58%}}
@media(min-width:851px) and (max-width:1199px){body[data-envelope=textured] .envelope-scene{width:min(530px,47vw,calc((100svh - 190px)*1.49));left:69%;top:61%}}
@media(max-width:850px){.envelope-controls{left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom,0px));gap:8px;justify-content:center;font-size:12px}.envelope-colors button,.envelope-toggle{padding-inline:12px}.envelope-status{flex-basis:100%;text-align:center}}
@media(max-width:850px){body[data-envelope=textured][data-web-style=eucalipto] .botanical-right{width:clamp(42px,13vw,64px);height:35svh;right:-12px;top:64px;opacity:.45;--breeze-turn:1deg;--breeze-rise:3px;--breeze-sway:2px}}
@media(prefers-reduced-motion:reduce){body[data-envelope=textured] .envelope-flap{transform:none}}