* { box-sizing: border-box; }

body {
    margin: 0; padding: 0; 
    background-color: #d8dee3; 
    background-image: url('fondo-flores-pagina.jpg'); 
    background-size: cover; background-position: center; background-attachment: fixed;
    font-family: 'Cormorant Garamond', serif; overflow-x: hidden;
    will-change: background-position;
    animation: fondoMove 10s cubic-bezier(0.42, 0, 0.58, 1) infinite; 
}

@keyframes fondoMove {
    0% { background-position: center top; }
    50% { background-position: center 10%; } 
    100% { background-position: center top; }
}

.escritorio-fondo { 
    position: relative; display: flex; justify-content: center; align-items: center; 
    min-height: 100vh; padding: 15px; background-color: rgba(255, 255, 255, 0.4); 
}

.contenedor-vista { 
    display: none; 
    width: 100%; max-width: 340px; 
    flex-direction: column; align-items: center; gap: 20px;
    animation: aparecer 0.6s ease forwards;
}
.contenedor-vista.activa { display: flex; }

@keyframes aparecer {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.letterpress { color: #3b4036; text-shadow: 1px 1px 1px rgba(255,255,255,0.9), -0.5px -0.5px 0px rgba(0,0,0,0.1); letter-spacing: 1px; margin: 0; text-align: center; }

/* === TEXTOS === */
.nombres { 
    font-family: 'Pinyon Script', cursive; 
    font-size: clamp(2.4em, 8vw, 3.2em); 
    color: #2c3026; margin: 8px 0; line-height: 0.9; font-weight: normal; 
    text-align: center; display: block; width: 100%; 
}
.y-comercial { font-family: 'Cormorant Garamond', serif; font-size: 0.5em; color: #849079; display: inline-block; margin: 2px 0; }

.texto-pequeno { font-size: clamp(0.75em, 3vw, 0.9em); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px;}
.cursiva { font-style: italic; font-size: clamp(1em, 4vw, 1.2em); line-height: 1.3; margin: 5px 0; padding: 0 10px;}
.versiculo { font-size: 0.75em; font-weight: 600; margin-top: 5px; margin-bottom: 25px;}
.separador { height: 1px; width: 80%; margin: 6px auto; background: linear-gradient(to right, transparent, #c6c0b5, transparent); }
.adorno-floral { font-size: 1.5em; color: #849079; margin-bottom: 2px; }
.titulo-dorso { font-size: clamp(1.4em, 5vw, 1.8em); margin-bottom: 5px; } 

.textura-papel { 
    background-color: #F8F6F0; background-image: url('textura-algodon.jpg'); 
    background-blend-mode: multiply; background-size: cover; border-radius: 8px; 
    position: relative;
}
.textura-sobre {
    background-color: #849079; background-image: url('textura-algodon.jpg'); 
    background-blend-mode: multiply; background-size: cover;
}

.contador-caja { display: flex; justify-content: center; gap: 7px; margin: 15px 0; }
.tiempo { display: flex; flex-direction: column; align-items: center; }
.numero { font-size: 1.6em; font-weight: 600; color: #2c3026; line-height: 1; } 
.etiqueta { font-size: 0.65em; text-transform: uppercase; letter-spacing: 1px; color: #849079; font-weight: bold;}

.sobre-contenedor { width: 320px; height: 200px; position: relative; border-radius: 8px;}
.box-shadow-sobre { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); transition: box-shadow 0.6s ease; }
.sobre-cuerpo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0 0 8px 8px; z-index: 1; border: 2px solid rgba(230, 225, 215, 0.5); }
.sobre-solapa { position: absolute; top: 0; left: 0; width: 100%; height: 50%; border-radius: 8px 8px 0 0; transform-origin: top; transition: transform 0.6s ease; z-index: 2; border-bottom: 1px solid rgba(0,0,0,0.1); }

.sello-cera { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 95px; height: 95px; 
    background-image: url('sello.png');
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-color: transparent; border: none; cursor: pointer; 
    z-index: 3; transition: transform 0.3s;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.sello-cera:hover { transform: translate(-50%, -50%) scale(1.05); }

.sobre-contenedor.abierto .sobre-solapa { transform: rotateX(180deg); }
.sobre-contenedor.abierto .sello-cera { opacity: 0; pointer-events: none; }
.sobre-contenedor.abierto.box-shadow-sobre { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }

.instruccion { font-style: italic; letter-spacing: 2px; font-size: 0.9em; }

/* =========================================================
   CONTENEDOR 3D Y EFECTO DE GIRO (CON EL FIX APLICADO)
   ========================================================= */

.tarjeta-3d-contenedor { 
    perspective: 1500px; 
    -webkit-perspective: 1500px; 
    width: 100%; 
}

.tarjeta-3d { 
    position: relative; 
    width: 100%; 
    min-height: 600px; /* Asegura que la tarjeta no colapse */
    transform-style: preserve-3d; /* CRUCIAL PARA EL GIRO 3D */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

.tarjeta-3d.girada { 
    transform: rotateY(180deg); 
}

/* Propiedades compartidas por AMBAS caras */
.cara { 
    width: 100%; 
    height: 100%; 
    position: absolute; /* Superpone una cara sobre la otra */
    top: 0; 
    left: 0; 
    border-radius: 8px; 
    border: none; 
    
    /* CRUCIAL: Oculta la parte de atrás cuando la carta gira */
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 

    /* Aquí ponemos la sombra, no en el contenedor padre */
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25));
}

/* MARCO INCRUSTADO TRANSPARENTE (Aplica a ambas caras) */
.cara::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('borde-dorado.png'); background-size: 100% 100%;
    background-repeat: no-repeat; pointer-events: none; z-index: 10;
    transform: translateZ(1px); opacity: 0.65; 
}

/* CARA FRONTAL */
.cara-frente { 
    z-index: 2; /* Por defecto arriba */
    padding: 70px 25px 55px 25px; /* Empuje hacia arriba */
} 

/* CARA TRASERA (DRESS CODE) */
.cara-dorso { 
    /* El dorso ya está rotado 180deg para estar "de espaldas" */
    transform: rotateY(180deg); 
    display: flex; flex-direction: column; justify-content: center; 
    z-index: 1; /* Por defecto abajo */
    padding: 150px 25px; 
}

/* Contenedor interno */
.cara-contenido { 
    display: flex; flex-direction: column; align-items: center; 
    width: 100%; height: 100%; position: relative; z-index: 5; 
}

/* =========================================================
   MARIPOSAS (POSICIÓN INICIAL Y LÓGICA DE VUELO FÍSICA)
   ========================================================= */

.mariposa-individual {
    position: absolute;
    top: 50%; left: 50%; /* Centro de la pantalla */
    opacity: 1; /* Aparecen visibles desde el inicio */
    pointer-events: none;
    transform-origin: center center;
    z-index: 100; /* Vuelan sobre TODO */
}

/* POSICIÓN INICIAL (Posadas en el sobre) */
.macho-base {
    width: 130px; /* Tamaño Grande */
    transform: translate(20px, -190px) scaleX(-1) rotate(15deg); 
}

.hembra-base {
    width: 80px; /* Tamaño Pequeño */
    transform: translate(125px, -160px) scaleX(-1) rotate(-25deg);
}

/* ACTIVACIÓN DE ANIMACIONES */
.vuelo-final-macho { animation: coreografia-macho 18s cubic-bezier(0.42, 0, 0.58, 1) forwards; }
.vuelo-final-hembra { animation: coreografia-hembra 18s cubic-bezier(0.42, 0, 0.58, 1) forwards; }

/* FÍSICA CORREGIDA: scaleX(-1) mira a la izquierda, scaleX(1) mira a la derecha */

/* --- VUELO DIRECTO FUERA DE LA PANTALLA --- */

@keyframes coreografia-macho {
    /* 0%: Inicio en el sobre */
    0% { transform: translate(60px, -110px) scaleX(-1) rotate(-15deg); opacity: 1; }
    
    /* 15%: Se eleva y gira hacia la izquierda */
    15% { transform: translate(-50px, -250px) scaleX(1) rotate(-45deg); opacity: 1; }
    
    /* 35%: Sale disparado por la izquierda y se vuelve invisible */
    35% { transform: translate(-800px, -500px) scaleX(1) rotate(-60deg); opacity: 0; }
    
    /* 100%: Se queda fuera de la pantalla el resto del tiempo */
    100% { transform: translate(-800px, -500px) scaleX(1) rotate(-60deg); opacity: 0; }
}

@keyframes coreografia-hembra {
    /* 0%: Inicio en el sobre */
    0% { transform: translate(140px, -70px) scaleX(-1) rotate(-25deg); opacity: 1; }
    
    /* 15%: Se eleva y gira hacia la derecha */
    15% { transform: translate(200px, -200px) scaleX(-1) rotate(45deg); opacity: 1; }
    
    /* 35%: Sale disparada por la derecha y se vuelve invisible */
    35% { transform: translate(800px, -500px) scaleX(-1) rotate(60deg); opacity: 0; }
    
    /* 100%: Se queda fuera de la pantalla el resto del tiempo */
    100% { transform: translate(800px, -500px) scaleX(-1) rotate(60deg); opacity: 0; }
}

/* ========================================================= */

.floral-border { position: fixed; width: clamp(100px, 30vw, 150px); height: clamp(100px, 30vw, 150px); background-size: contain; background-repeat: no-repeat; z-index: 50; pointer-events: none; }
.flora-arriba-izq { top: -20px; left: -20px; transform: rotate(-15deg); background-image: url('rositas-izq.png'); }
.flora-arriba-der { top: -20px; right: -20px; transform: rotate(15deg); background-image: url('rositas-der.png'); }
.flora-abajo-izq { bottom: -20px; left: -20px; transform: rotate(10deg); background-image: url('flores-izq.png'); }
.flora-abajo-der { bottom: -20px; right: -20px; transform: rotate(-10deg); background-image: url('flores-der.png'); }
.flora-mariposa { position: fixed; width: 50px; height: 50px; background-size: contain; background-repeat: no-repeat; background-image: url('mariposa.png'); z-index: 55; pointer-events: none; }
.mariposa-1 { top: 20%; left: 10px; transform: rotate(-20deg); }
.mariposa-2 { top: 75%; right: 10px; transform: rotate(20deg); }

.contenido-dresscode { display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-top: 5px; gap: 8px; }
.tarjeta-genero { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 5px; border-radius: 8px; background-color: rgba(248, 246, 240, 0.4); border: 1px solid rgba(132, 144, 121, 0.3); transform-style: preserve-3d; cursor: pointer; }
.titulo-genero { margin: 0 0 5px 0; font-size: 1.1em; border-bottom: 1px solid #c6c0b5; padding-bottom: 2px; width: 100%; text-align: center; } 
.imagen-tilt { height: clamp(70px, 15vw, 90px); width: auto; max-width: 100%; margin-bottom: 5px; backface-visibility: hidden; transform: translateZ(20px); mix-blend-mode: multiply; object-fit: contain; }

.sobre-reverso { 
    width: 100%; min-height: 530px; display: flex; flex-direction: column; justify-content: center; align-items: center; 
    padding: 35px 25px; border: none; position: relative; border-radius: 8px;
    background-color: transparent; filter: drop-shadow(0 15px 25px rgba(0,0,0,0.25)); 
}
.sobre-reverso::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('borde-dorado.png'); background-size: 100% 100%; background-repeat: no-repeat;
    pointer-events: none; z-index: 10; transform: translateZ(1px); opacity: 0.85; 
}
.contenido-panel p { margin: 5px 0; font-size: 1em; }
.mapa-contenedor { width: 100%; margin-top: 10px; border-radius: 4px; overflow: hidden; border: 1px solid #c6c0b5; background: #eee; }
.contenedor-scroll { width: 100%; max-height: 50vh; overflow-y: auto; padding-right: 5px; }
.contenedor-scroll::-webkit-scrollbar { width: 4px; }
.contenedor-scroll::-webkit-scrollbar-track { background: transparent; }
.contenedor-scroll::-webkit-scrollbar-thumb { background: #849079; border-radius: 4px; }

/* === FORMULARIO === */
.formulario-rsvp { width: 100%; display: flex; flex-direction: column; gap: 15px; margin-top: 5px; padding-bottom: 15px;}
.grupo-input { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.label-premium { font-size: 0.85em; color: #3b4036; font-weight: 600; }
.input-premium, .select-premium, .textarea-premium { 
    background: rgba(255, 255, 255, 0.5); border: 1px solid #849079; border-radius: 4px; 
    font-family: 'Cormorant Garamond', serif; font-size: 1em; color: #3b4036; 
    padding: 8px; width: 100%; outline: none; transition: all 0.3s; 
}
.input-premium:focus, .select-premium:focus, .textarea-premium:focus { background: #fff; box-shadow: 0 0 5px rgba(132, 144, 121, 0.5); }
.textarea-premium { resize: vertical; min-height: 60px; }
.iframe-oculto { display: none; }

/* === BOTONES EXTRA DELGADOS Y MÁS JUNTOS === */
.botones-accion { display: flex; flex-direction: column; gap: 5px; margin: 5px auto 0; width: 85%; } 
.boton-sello { 
    background-color: transparent; color: #3b4036; 
    font-family: 'Cormorant Garamond', serif; font-size: 0.85em; letter-spacing: 2px; font-weight: 600; 
    border: 1px solid #849079; padding: 4px 8px; 
    cursor: pointer; transition: all 0.3s; width: 100%; border-radius: 4px; position: relative; z-index: 100; transform: translateZ(10px); 
}
.boton-sello:hover { background-color: #849079; color: #F8F6F0; }
.btn-atras { margin-top: 8px; max-width: 130px; align-self: center; padding: 4px 8px;}
.boton-sello::after { content: ''; position: absolute; top: -5px; bottom: -5px; left: -5px; right: -5px; z-index: 101; }
#contenedor-musica, #btn-mostrar-musica { display: none !important; }