/* css/estilos.css - Versión: BLINDADA + Lluvia Estrellas + Sobre Rectangular */

/* --- SEGURIDAD (NO SAVE / NO SELECT / NO TOUCH MENU) --- */
* {
    -webkit-touch-callout: none !important; /* Vital para iOS: Desactiva menú al dejar presionado */
    -webkit-user-select: none !important;   /* Safari */
    -khtml-user-select: none !important;    /* Konqueror HTML */
    -moz-user-select: none !important;      /* Firefox */
    -ms-user-select: none !important;       /* Internet Explorer/Edge */
    user-select: none !important;           /* Estándar */
    -webkit-tap-highlight-color: transparent; /* Quita el recuadro azul al tocar */
}

/* --- CONFIGURACIÓN GENERAL --- */
html, body {
    overflow-x: hidden; 
    width: 100%;
    overscroll-behavior: none; /* Evita el rebote elástico en Mac/iOS */
}

body { 
    font-family: 'Inter', sans-serif; 
}

/* --- TIPOGRAFÍAS --- */
.font-display { 
    font-family: 'Great Vibes', cursive; 
}
.font-serif-title { 
    font-family: 'Playfair Display', serif; 
    letter-spacing: 0.2em; 
}

/* --- UTILIDADES VISUALES --- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* IMAGENES PROTEGIDAS (No arrastrables, no click derecho, no save) */
img {
    pointer-events: none; /* Hace que la imagen sea 'invisible' al clic (evita descargar) */
}

/* --- ANIMACIONES GENERALES --- */
.animate-on-scroll { 
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; 
    will-change: opacity, transform; 
}

.animate-on-scroll.is-visible { 
    opacity: 1; 
    transform: translateY(0); 
    transition-delay: var(--delay, 0s); 
}

/* --- LLUVIA DE ESTRELLAS (AMBIENTAL) --- */
.star-rain {
    position: fixed;
    top: -50px;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: radial-gradient(circle, #FFFFFF 20%, #FFD700 100%);
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
    animation-name: falling;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

@keyframes falling {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* --- ESTRELLAS EXPLOSIVAS --- */
.star-particle {
    position: fixed; 
    pointer-events: none;
    z-index: 9999;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    background: radial-gradient(circle, #FFFFFF 10%, #FFD700 60%, transparent 100%);
    opacity: 0;
    will-change: transform, opacity;
}

@keyframes floatStar {
    0% { transform: translateY(0) scale(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; transform: translateY(-10px) scale(1) rotate(45deg); }
    100% { transform: translateY(-150px) scale(0) rotate(180deg); opacity: 0; }
}

/* --- ANIMACIÓN TICKET PREMIUM --- */
@keyframes shine {
    100% { left: 125%; }
}
.animate-shine {
    animation: shine 3s infinite;
}

/* --- CORRECCIÓN FONDOS PARALLAX --- */
.bg-fixed-custom {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media (hover: none), (max-width: 1024px) {
    .bg-fixed-custom {
        background-attachment: scroll !important;
    }
}

/* --- SISTEMA DE SOBRE (ENVELOPE) --- */
#envelope-overlay { 
    transition: opacity 0.6s ease-in-out; 
}

#envelope-card {
    width: 90vw;
    max-width: 600px;
    aspect-ratio: 1.6 / 1;
    height: auto;
    min-height: 0;
    overflow: visible !important; 
}

.envelope-shake { 
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; 
}

@keyframes shake { 
    10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); } 
    20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); } 
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0) rotate(-2deg); } 
    40%, 60% { transform: translate3d(4px, 0, 0) rotate(2deg); } 
}

.envelope-flap { 
    width: 0; height: 0;
    border-left: 45vw solid transparent; 
    border-right: 45vw solid transparent; 
    border-top: 25vh solid #0f172a; 
    position: absolute; top: 0; left: 50%; 
    transform: translateX(-50%); 
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5)); 
    z-index: 20; 
    transform-origin: top;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none; 
}

@media (min-width: 640px) {
    .envelope-flap { 
        border-left: 300px solid transparent; 
        border-right: 300px solid transparent; 
        border-top: 150px solid #0f172a; 
    }
}

.flap-open { 
    transform: translateX(-50%) rotateX(180deg); 
    z-index: 1 !important; 
}

/* --- DESTELLO BLANCO AL ABRIR --- */
#flash-effect { 
    position: fixed; inset: 0; background-color: white; z-index: 400; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-out; 
}
.do-flash { opacity: 0.6 !important; }

/* --- MODALES --- */
#rsvp-modal, #ticket-container { 
    transition: opacity 0.3s ease-in-out; 
}
#rsvp-modal.is-open { 
    opacity: 1; pointer-events: auto; 
}

#ticket-container {
    display: flex !important;
    opacity: 0;
    pointer-events: none;
}
#ticket-container.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- OPTIMIZACIÓN TICKET --- */
#vip-ticket-capture {
    transform-origin: center center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    transform: translateZ(0); 
}

@media (max-height: 700px) {
    #vip-ticket-capture {
        transform: scale(0.85);
    }
}