/* css/styles.css - Versión Final Premium */

/* 1. Importación de Fuentes de Alta Gama */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,400&family=Montserrat:wght@300;400;500;600;700&family=Pinyon+Script&display=swap');

/* 2. Variables Globales */
:root {
    --gold: #D4AF37;
    --gold-light: #F3E5AB;
    --gold-dark: #B8860B;
    --charcoal: #121212; /* Negro suave premium */
    --paper: #FAFAF9;    /* Blanco hueso/crema */
}

/* 3. Base */
body {
    font-family: 'Cormorant Garamond', serif; /* Fuente principal para lectura elegante */
    background-color: var(--paper);
    color: #2D2D2D;
    /* Textura sutil de fondo para quitar el aspecto "digital plano" */
    background-image: url("https://www.transparenttextures.com/patterns/cubes.png");
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 4. Clases de Tipografía Personalizada */
h1, h2, h3, .font-playfair {
    font-family: 'Playfair Display', serif;
}

.font-sans-elegant {
    font-family: 'Montserrat', sans-serif;
}

.font-script {
    font-family: 'Pinyon Script', cursive;
}

/* 5. Header Premium (CORREGIDO: Fondo Oscuro) */
.glass-header {
    background-color: #121212; /* Color sólido de respaldo */
    background: rgba(18, 18, 18, 0.98); /* Oscuro casi sólido con transparencia muy leve */
    backdrop-filter: blur(12px); /* Efecto de desenfoque moderno */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Borde inferior muy sutil */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    transition: all 0.3s ease;
}

/* 6. Efectos Dorados y Metálicos */
.text-gold-metallic {
    background: linear-gradient(to bottom, #D4AF37 0%, #F3E5AB 50%, #B8860B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    font-weight: 700;
}

/* 7. Tarjetas Premium (Estilo Papel de Invitación) */
.premium-card {
    background-color: #ffffff;
    /* Textura de papel de alta calidad */
    background-image: url("https://www.transparenttextures.com/patterns/cream-paper.png");
    border: 1px solid rgba(212, 175, 55, 0.15); /* Borde dorado muy sutil */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05); /* Sombra difusa */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.premium-card:hover {
    transform: translateY(-5px); /* Levantar levemente al pasar el mouse */
    box-shadow: 0 20px 40px -5px rgba(212, 175, 55, 0.15); /* Sombra dorada */
    border-color: rgba(212, 175, 55, 0.5);
}

/* 8. Botones de Lujo */
.btn-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #AA8C2C 100%);
    color: #fff;
    border: 1px solid #B8860B;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-gold:hover {
    background: linear-gradient(135deg, #E5C158 0%, #B8860B 100%);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4); /* Resplandor dorado */
    transform: translateY(-1px);
}

/* 9. Animación de la Vela (Ofrenda) */
.flame-anim {
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    animation: flicker 2s infinite alternate ease-in-out;
    transform-origin: center bottom;
}

@keyframes flicker {
    0% { opacity: 0.85; transform: scale(1); filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.4)); }
    50% { opacity: 1; transform: scale(1.1); filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)); }
    100% { opacity: 0.9; transform: scale(0.95); filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.5)); }
}

/* 10. Formularios Elegantes */
.input-elegant {
    border: 1px solid #E5E7EB;
    background-color: #FAFAFA;
    transition: all 0.3s;
    font-family: 'Montserrat', sans-serif;
    color: #333;
}

.input-elegant:focus {
    border-color: #D4AF37;
    background-color: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); /* Anillo de enfoque dorado */
    outline: none;
}

.input-elegant::placeholder {
    color: #9CA3AF;
    font-style: italic;
    font-family: 'Cormorant Garamond', serif;
}

/* 11. Utilidades Extra */
.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Selección de texto en color dorado */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #000;
}
@keyframes shimmer {
    100% { transform: translateX(100%); }
}