/* ===========================
   Sobre de apertura (envelope reveal)
   =========================== */

/* Bloqueo de scroll mientras está cerrado */
body.sobre-bloqueado {
    overflow: hidden;
    height: 100vh;
}


.sobre-overlay{
    position: fixed;
    inset: 0;
    z-index: 9999;

    display:flex;
    align-items:flex-start;
    justify-content:center;

    background-image: url('../img/fondo-sobre.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* Overlay fullscreen
.sobre-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f1430 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    perspective: 1200px;
}*/

.sobre-overlay.abierto {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sobre-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 30vh 1rem 1rem;
}

.sobre-titulo {
    color: #A66A3D;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 3vw, 1.4rem);
    letter-spacing: 0.08em;
    text-align: center;
    opacity: 0.9;
    margin: 0;
}

.sobre-hint {
    color: #f7f3ea;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0.55;
    margin: 0;
    animation: bounce 2s ease-in-out infinite;
}

/* Cursor pointer y flotación leve */
.sobre-main {
    cursor: pointer;
    transition: transform 0.3s ease;
}
.sobre-main:hover { transform: translateY(-4px) scale(1.02); }

.sobre-float { animation: float 3.5s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); opacity: 0.55; }
    50%      { transform: translateY(-4px); opacity: 1; }
}

/* La carta interna está oculta hasta que se abre el sobre */
.carta-inner {
    opacity: 0;
    transform: translateY(0);
}

/* ===========================
   Animación de apertura
   =========================== */

.sobre-main.abriendo { animation: none; cursor: default; pointer-events: none; }

.sobre-main.cuerpo-oculto .sobre-cuerpo {
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

/* La solapa superior rota hacia atrás */
.sobre-main.abriendo .solapa-top {
    transform-origin: top center;
    animation: abrir-solapa 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes abrir-solapa {
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(180deg); }
}

/* El sello se desvanece y crece */
.sobre-main.abriendo .sello-wrapper {
    animation: desvanecer-sello 0.6s ease forwards;
}

@keyframes desvanecer-sello {
    to { opacity: 0; transform: translateX(-50%) scale(1.5); }
}

/* La carta interna aparece y sube cuando se abre el sobre - OPCION 1 (imagen) */
.sobre-main.abriendo .carta-inner-v1 {
    z-index: 6;
    animation: subir-carta 1.2s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes subir-carta {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(-220px); }
}

/* La carta interna aparece y sube cuando se abre el sobre - OPCION 2 (diseño original) */
.sobre-main.abriendo .carta-inner-v2 {
    z-index: 6;
    animation: subir-carta-v2 1.2s 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes subir-carta-v2 {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(-160px); }
}