/* ==========================================================================
           1. SISTEMA DE DISEÑO (ELEGANCIA FLORAL / JARDÍN ENCANTADO)
           ========================================================================== */
        :root {
            --color-fondo: #FDFBF7; /* Champagne / Marfil muy suave */
            --color-secundario: #F4EBE8; /* Mauve ultra claro para contrastar secciones */
            --color-texto: #4A3B3C; /* Gris cálido oscuro / Mauve profundo */
            --color-texto-suave: #7A6F70; 
            
            /* Paleta Floral */
            --color-acento-mauve: #B5838D; /* Rosa viejo / Empolvado */
            --color-acento-salvia: #84A59D; /* Verde salvia elegante */
            --color-oro-rosado: #D48C9A; 
            
            --fuente-firma: 'Great Vibes', cursive;
            --fuente-titulos: 'Playfair Display', serif;
            --fuente-textos: 'Montserrat', sans-serif;

            --espaciado-seccion: 90px 0;
            --sombra-elegante: 0 15px 35px rgba(181, 131, 141, 0.15);
        }

        /* ==========================================================================
           2. RESET Y ESTILOS GLOBALES
           ========================================================================== */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body { font-family: var(--fuente-textos); background-color: var(--color-fondo); color: var(--color-texto); line-height: 1.7; font-weight: 300; overflow-x: hidden; text-align: center; }
        
        h1, h2, h3, h4 { font-family: var(--fuente-titulos); font-weight: 500; color: var(--color-texto); }
        p { font-size: 0.95rem; }
        a { text-decoration: none; color: inherit; }
        
        .contenedor { max-width: 650px; margin: 0 auto; padding: 0 7%; }
        .seccion-padding { padding: var(--espaciado-seccion); }

        /* Divisor Floral SVG en CSS */
        .divisor-hojas { font-size: 1.8rem; color: var(--color-acento-salvia); margin: 0 auto 30px; opacity: 0.8; }

        /* Animaciones Scroll */
        .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
        .delay-1 { transition-delay: 200ms; } .delay-2 { transition-delay: 400ms; }

        /* ==========================================================================
           3. PANTALLA DE BIENVENIDA (SOBRE VIRTUAL)
           ========================================================================== */
        #pantalla-bienvenida {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background-color: var(--color-secundario); z-index: 99999;
            display: flex; flex-direction: column; justify-content: center; align-items: center;
            transition: transform 1.2s cubic-bezier(0.7, 0, 0.3, 1), opacity 1.2s ease;
            background-image: radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, transparent 100%);
        }
        #pantalla-bienvenida.abierto { transform: translateY(-100vh); opacity: 0; pointer-events: none; }
        
        .sello-monograma { font-family: var(--fuente-firma); font-size: 5rem; color: var(--color-acento-mauve); margin-bottom: 20px; line-height: 1; animation: latido 2s infinite ease-in-out; }
        .bienvenida-texto { font-family: var(--fuente-textos); font-size: 0.85rem; letter-spacing: 4px; text-transform: uppercase; color: var(--color-texto-suave); margin-bottom: 40px; }
        
        .btn-abrir {
            background: var(--color-acento-mauve); color: white; border: none;
            padding: 15px 40px; font-family: var(--fuente-textos); font-weight: 500; letter-spacing: 2px;
            font-size: 0.9rem; border-radius: 50px; cursor: pointer; transition: all 0.3s ease;
            box-shadow: 0 10px 25px rgba(181, 131, 141, 0.4); text-transform: uppercase;
        }
        .btn-abrir:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(181, 131, 141, 0.5); background: #A3727C; }

        @keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

        /* --- REPRODUCTOR DE MÚSICA FLOTANTE --- */
        #btn-musica {
            position: fixed; bottom: 25px; right: 25px; width: 50px; height: 50px;
            background: rgba(253, 251, 247, 0.9); border: 1px solid rgba(181, 131, 141, 0.3); border-radius: 50%;
            display: flex; justify-content: center; align-items: center; z-index: 9990;
            cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.08); transition: transform 0.3s;
        }
        #btn-musica:hover { transform: scale(1.1); }
        #btn-musica i { font-size: 1.2rem; color: var(--color-acento-mauve); }
        .girar { animation: girarDisco 4s linear infinite; }
        @keyframes girarDisco { 100% { transform: rotate(360deg); } }

        /* ==========================================================================
           4. PORTADA PRINCIPAL (HERO FLORAL)
           ========================================================================== */
        .portada { position: relative; padding: 60px 20px 80px; }
        
        .marco-foto {
            width: 100%; max-width: 380px; margin: 0 auto 30px;
            position: relative; padding: 15px;
        }
        /* Borde decorativo fino */
        .marco-foto::before {
            content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            border: 1px solid var(--color-acento-mauve); border-radius: 200px 200px 0 0; opacity: 0.5;
        }
        
        .imagen-hero {
            width: 100%; aspect-ratio: 3/4; border-radius: 200px 200px 0 0;
            overflow: hidden; box-shadow: var(--sombra-elegante);
        }
        .imagen-hero img { width: 100%; height: 100%; object-fit: cover; }

        .portada-titulos { position: relative; z-index: 5; margin-top: -30px; }
        .texto-mis-xv { font-family: var(--fuente-textos); font-size: 0.8rem; letter-spacing: 5px; text-transform: uppercase; color: var(--color-acento-salvia); font-weight: 500; margin-bottom: 5px; }
        .nombre-quinceanera { font-family: var(--fuente-firma); font-size: 5.5rem; line-height: 1; color: var(--color-acento-mauve); margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(253, 251, 247, 0.8); }
        .fecha-hero { font-family: var(--fuente-titulos); font-size: 1.2rem; font-style: italic; color: var(--color-texto); }

        /* ==========================================================================
           5. MIS PADRES Y PADRINOS
           ========================================================================== */
        .seccion-padres { background-color: var(--color-secundario); position: relative; }
        .seccion-padres::before, .seccion-padres::after { content: ''; position: absolute; left: 0; right: 0; height: 50px; background-image: radial-gradient(circle at center, rgba(181, 131, 141, 0.05) 0%, transparent 100%); }
        .seccion-padres::before { top: 0; } .seccion-padres::after { bottom: 0; }
        
        .texto-bendicion { font-family: var(--fuente-titulos); font-size: 1.2rem; font-style: italic; line-height: 1.6; color: var(--color-texto); margin-bottom: 40px; }
        
        .bloque-nombres { margin-bottom: 30px; }
        .bloque-nombres h3 { font-family: var(--fuente-textos); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; color: var(--color-acento-salvia); margin-bottom: 10px; font-weight: 600; }
        .bloque-nombres p { font-family: var(--fuente-titulos); font-size: 1.4rem; color: var(--color-texto); }

        /* ==========================================================================
           6. CUENTA REGRESIVA
           ========================================================================== */
        .contador-grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
        .contador-box { background: #FFFFFF; width: 80px; height: 90px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid rgba(181, 131, 141, 0.1); }
        .contador-numero { font-family: var(--fuente-titulos); font-size: 2.2rem; color: var(--color-acento-mauve); line-height: 1; }
        .contador-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 5px; color: var(--color-texto-suave); }

        /* ==========================================================================
           7. DÓNDE Y CUÁNDO (UBICACIONES)
           ========================================================================== */
        .titulo-seccion { font-size: 2.5rem; margin-bottom: 10px; color: var(--color-acento-mauve); }
        
        .ubicacion-card { background: #FFFFFF; padding: 40px 20px; border-radius: 16px; margin-bottom: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid rgba(181, 131, 141, 0.1); position: relative; overflow: hidden; }
        /* Detalle color top */
        .ubicacion-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-acento-salvia); }
        
        .ubicacion-icon { font-size: 2.2rem; color: var(--color-acento-mauve); margin-bottom: 15px; }
        .ubicacion-card h3 { font-size: 1.4rem; margin-bottom: 5px; }
        .ubicacion-hora { font-family: var(--fuente-textos); font-weight: 500; color: var(--color-acento-salvia); font-size: 1rem; margin-bottom: 15px; letter-spacing: 1px; }
        .ubicacion-direccion { margin-bottom: 25px; color: var(--color-texto-suave); font-size: 0.9rem; padding: 0 5%; }
        
        .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent; color: var(--color-acento-mauve); padding: 12px 25px; font-family: var(--fuente-textos); font-weight: 500; font-size: 0.85rem; border-radius: 50px; border: 1px solid var(--color-acento-mauve); transition: all 0.3s; text-transform: uppercase; letter-spacing: 1px; }
        .btn-outline:hover { background: var(--color-acento-mauve); color: white; }

        /* ==========================================================================
           8. ITINERARIO (LÍNEA DE TIEMPO)
           ========================================================================== */
        .seccion-itinerario { background-color: var(--color-secundario); }
        .timeline { position: relative; max-width: 400px; margin: 0 auto; text-align: left; padding: 20px 0; }
        .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 24px; width: 2px; background-color: rgba(181, 131, 141, 0.3); }
        
        .timeline-item { position: relative; padding-left: 70px; margin-bottom: 40px; }
        .timeline-item:last-child { margin-bottom: 0; }
        
        .timeline-icon { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background-color: #FFFFFF; border: 2px solid var(--color-acento-mauve); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-acento-mauve); font-size: 1.2rem; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
        
        .timeline-hora { font-family: var(--fuente-titulos); font-size: 1.2rem; color: var(--color-texto); line-height: 1.2; }
        .timeline-titulo { font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-acento-salvia); margin-bottom: 5px; }
        .timeline-desc { font-size: 0.85rem; color: var(--color-texto-suave); }

        /* ==========================================================================
           9. GALERÍA FOTOGRÁFICA (CARRUSEL HORIZONTAL)
           ========================================================================== */
        .galeria-container { position: relative; width: 100vw; margin-left: calc(-50vw + 50%); padding: 20px 0; }
        .galeria-wrapper { overflow: hidden; }
        .galeria-scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0 5%; gap: 20px; padding-bottom: 20px; }
        .galeria-scroll::-webkit-scrollbar { display: none; } 
        
        .foto-item { flex: 0 0 75%; max-width: 350px; scroll-snap-align: center; position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); border: 4px solid #FFFFFF; }
        .foto-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .foto-item:hover img { transform: scale(1.05); }

        .carrusel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.9); border: none; width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.15); transition: all 0.3s; color: var(--color-acento-mauve); font-size: 1.2rem; }
        .carrusel-btn:hover { background: var(--color-acento-mauve); color: #FFFFFF; }
        .carrusel-prev { left: 10px; } .carrusel-next { right: 10px; }
        @media (min-width: 768px) { .carrusel-prev { left: 5%; } .carrusel-next { right: 5%; } }

        /* ==========================================================================
           10. LLUVIA DE SOBRES / REGALOS
           ========================================================================== */
        .seccion-regalos { background-color: var(--color-secundario); border-top: 1px dashed rgba(181, 131, 141, 0.3); border-bottom: 1px dashed rgba(181, 131, 141, 0.3); }
        .icono-regalo { font-size: 3rem; color: var(--color-acento-mauve); margin-bottom: 15px; }
        
        .datos-bancarios { display: none; margin-top: 20px; padding: 25px; background: #FFFFFF; border-radius: 12px; font-size: 0.9rem; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-align: left; border-left: 4px solid var(--color-acento-mauve); }
        .datos-bancarios.visible { display: block; animation: fadeIn 0.5s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* ==========================================================================
           11. RSVP Y FOOTER COMERCIAL
           ========================================================================== */
        .btn-rsvp { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-acento-mauve); color: white; padding: 16px 40px; border-radius: 50px; font-weight: 500; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 10px 20px rgba(181, 131, 141, 0.3); border: none; cursor: pointer; width: 100%; max-width: 350px; }
        .btn-rsvp:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(181, 131, 141, 0.4); background-color: #A3727C; }

        .footer-comercial { background-color: var(--color-texto); color: #FFFFFF; padding: 50px 20px; text-align: center; }
        .footer-comercial h3 { font-family: var(--fuente-textos); font-size: 1.1rem; font-weight: 400; margin-bottom: 20px; letter-spacing: 1px; color: #FFFFFF; }
        
        .social-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 30px; }
        .social-link { width: 45px; height: 45px; background: rgba(255,255,255,0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--color-oro-rosado); transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.1); }
        .social-link:hover { background: var(--color-oro-rosado); color: var(--color-texto); transform: translateY(-3px); }
        
        .creditos { font-size: 0.8rem; color: #999; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; max-width: 400px; margin: 0 auto; }
        .creditos a { color: var(--color-oro-rosado); font-weight: 600; text-decoration: underline; }

        /* ==========================================================================
           12. RESPONSIVO
           ========================================================================== */
        @media (max-width: 480px) {
            .nombre-quinceanera { font-size: 4.5rem; }
            .sello-monograma { font-size: 4rem; }
            .contador-box { width: 70px; height: 80px; }
            .contador-numero { font-size: 1.8rem; }
            
            /* Ajuste de galería móvil: Una sola foto completa a la vez */
            .galeria-scroll { padding: 0 5vw; gap: 5vw; }
            .foto-item { flex: 0 0 90vw; max-width: 90vw; }
            
            .timeline-item { padding-left: 60px; }
            .timeline::before { left: 19px; }
            .timeline-icon { width: 40px; height: 40px; font-size: 1rem; }
        }