/* Sobre 3: las capas de papel originales con una composición nueva. */
.pre-page.classic-envelope { display: block; padding: 0; background: #ededeb; height: 100dvh; min-height: 0; overflow-y: auto; }
.classic-surface { position: relative; width: 100%; height: 100%; min-height: 480px; isolation: isolate; }
.classic-envelope[hidden] { display: none; }
.classic-envelope::before { display: none; }
.classic-layer { position: absolute; left: 0; width: 100%; max-width: none; pointer-events: none; object-fit: fill; }
.layer-middle { inset: 0; height: 100%; z-index: -3; }
.layer-bottom { bottom: 0; height: 56%; z-index: -2; }
/* The body carries the soft floral finish; both flaps retain their original paper. */
.middle-paper-base, .middle-floral-texture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.middle-paper-base { object-fit: fill; }
.middle-floral-texture { object-fit: cover; opacity: .34; }
.layer-middle::after { content: ''; position: absolute; inset: 0; background: rgb(236 236 233 / 22%); pointer-events: none; }
.layer-top { top: 0; height: 58%; z-index: -1; }
.classic-copy { position: absolute; top: 17%; left: 24px; right: 24px; text-align: center; color: var(--rust); }
.classic-copy > .eyebrow { color: #6c5847; font-size: 10px; margin-bottom: 20px; }
.classic-copy h2 { font: clamp(48px, 5.5vw, 78px)/1.2 var(--signature); letter-spacing: 0; margin: 0 0 14px; }
.classic-copy h2 em { color: var(--peach); font-style: normal; font-size: 0.7em; padding-inline: 8px; }
.classic-copy > p:not(.eyebrow) { font: 14px/1.7 var(--sans); }
.classic-copy .guest-welcome { margin: 0 auto 12px; max-width: 480px; font-size: 12px; }
.seal-color-filter { position: absolute; width: 0; height: 0; pointer-events: none; }
.classic-seal { position: absolute; top: 56%; left: 50%; transform: translate(-50%, -50%); width: 108px; height: 108px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; }
.classic-seal img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px #4b403122); }
.classic-seal:hover { transform: translate(-50%, -50%) rotate(0deg); }
.classic-seal:focus-visible { outline-offset: 8px; }
.classic-actions { position: absolute; top: 70%; left: 24px; right: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; color: var(--rust); }
.classic-actions time { font: 10px/1.6 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.classic-actions .btn-pre-page { margin: 0; padding: 10px 24px; border: 1px solid #947c6980; background: #f1e1d640; font-size: 10px; }
.classic-actions .btn-pre-page:hover { background: var(--soft-sage); color: var(--rust); }
.classic-actions > p { font: 10px var(--sans); color: #6c5847; }
.classic-botanical { position: absolute; bottom: 0; left: -28px; width: min(22vw, 280px); height: 38%; object-fit: contain; opacity: 0.24; filter: sepia(1) saturate(0.35); pointer-events: none; }
.classic-envelope.fade-out { animation: classic-away 700ms ease both; }
.classic-envelope.fade-out .layer-top { animation: flap-away 700ms ease both; }
.classic-envelope.fade-out .layer-bottom { animation: pocket-away 700ms ease both; }
@keyframes classic-away { 35% { opacity: 1; } to { opacity: 0; } }
@keyframes flap-away { to { transform: translateY(-65%); } }
@keyframes pocket-away { to { transform: translateY(40%); } }
@media (max-width: 640px) {
 /* Crop the wide paper layers instead of stretching them into a portrait viewport. */
 .layer-top, .layer-bottom { object-fit: cover; object-position: center; }
 .classic-copy { top: 19%; left: 20px; right: 20px; }
 .classic-copy h2 { font-size: clamp(37px, 10vw, 52px); }
 .classic-copy h2 em { padding-inline: 2px; }
 .classic-copy > p:not(.eyebrow) { font-size: 12px; max-width: 260px; margin: auto; }
 .classic-copy > .eyebrow { font-size: 9px; margin-bottom: 18px; }
 .classic-seal { width: 94px; height: 94px; }
 .classic-actions { top: 69%; gap: 17px; }
 .classic-actions time { max-width: 260px; font-size: 9px; }
 .classic-botanical { width: 130px; left: -42px; height: 28%; opacity: 0.17; }
}
@media (max-height: 650px) {
 .classic-copy { top: 11%; }
 .classic-copy > .eyebrow { margin-bottom: 10px; }
 .classic-copy h2 { font-size: 46px; margin-bottom: 8px; }
 .classic-actions { top: 69%; gap: 10px; }
}