/* ============================================
   PALETA: Azul Rey · Rojo Vino · Detalles Dorados
   --royal-blue:    #1a3a8f  (primario)
   --royal-blue-lt: #2a4fbe  (hover/acento)
   --wine:          #6b1a2a  (oscuro/texto fuerte)
   --wine-mid:      #8b2a3e  (variante media)
   --gold:          #d4af37  (detalles dorados)
   --gold-lt:       #e8cc7a  (dorado claro)
   --cream:         #f8f5f0  (fondo base)
   ============================================ */

/* Fuentes Personalizadas */
.font-script { font-family: 'Pinyon Script', cursive; }
.font-serif-display { font-family: 'Playfair Display', serif; }
.font-classic { font-family: 'Cinzel', serif; }

/* Textura de grano (Noise) */
.noise-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 50;
}

/* Animaciones del Sobre */
.envelope-container { perspective: 2000px; }
.flap { transform-origin: top; transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); }
.open-flap { transform: rotateX(180deg); z-index: 0; }

.slide-down-animation { 
    animation: fadeOutDown 1.5s forwards; 
    pointer-events: none; 
}

@keyframes fadeOutDown {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(100vh); }
}

/* Efecto de Satén/Terciopelo — Azul Rey */
.velvet-texture {
    background: radial-gradient(circle at 30% 30%, #2a4fbe, #1a3a8f 55%, #122b72);
    box-shadow: inset 0 0 40px rgba(0,0,0,0.18);
}

/* Clases para Scroll Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition: all 1s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Utilidades de visibilidad del contenido principal */
#main-content {
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 1s ease-in-out;
}
#main-content.visible {
    opacity: 1;
    height: auto;
    overflow: visible;
}

/* Utilitario de retraso para animaciones */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Línea dorada decorativa */
.gold-line {
    display: block;
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
    margin: 0 auto;
}