/* =========================================
   ESTILOS Y ANIMACIONES - REPERTORIO
   ========================================= */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #0b132b;
    color: #fff;
    scroll-behavior: smooth; /* Desplazamiento suave entre secciones */
}

/* Menú Superior */
.nav-ocasiones {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(11, 19, 43, 0.9);
    padding: 15px 0;
    text-align: center;
    z-index: 100;
    border-bottom: 2px solid #d4af37;
}

.nav-ocasiones a {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.nav-ocasiones a:hover {
    color: #d4af37;
}

/* Estructura de Secciones */
.seccion-repertorio {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 20px 50px 20px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Efecto Parallax de lujo */
}

/* Aquí configuras tu foto limpia de los novios */
.fondo-boda {
    background-image: url('/asset/boda.jpg'); 
}

.fondo-cumpleaños {
    background-image: url('/asset/foto4.jpg'); 
}

.seccion-repertorio fondo-happyhour {
    background-image: url('/asset/foto11.jpg'); 
}





/* Capa oscura para que las letras resalten sobre la foto */
.capa-oscura {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(22, 29, 48, 0.75); /* Azul corporativo transparente */
    z-index: 1;
}

.contenido-animado {
    position: relative;
    z-index: 2;
    max-width: 800px;
    width: 100%;
    text-align: center;
}

/* Tipografía */
.titulo-dorado {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    color: #d4af37;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    animation: fadeInDown 1s ease-out forwards;
}

.subtitulo {
    font-size: 1.2rem;
    font-style: italic;
    margin-bottom: 40px;
    color: #e0e0e0;
    animation: fadeInDown 1.2s ease-out forwards;
}

/* Cuadros de cada momento musical */
.lista-momentos {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
}

.momento {
    background: rgba(155, 153, 153, 0.253);
    border-left: 3px solid #d4af37;
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    text-align: left;
    backdrop-filter: blur(5px); /* Efecto vidrio empañado premium */
    opacity: 0; /* Oculto inicialmente para la animación */
    max-width: 350px;
    margin: 0 auto;
    /* AJUSTES DE TAMAÑO UNIFORME 👇 */
    width: 100%;            /* Fuerza a que todas las tarjetas midan lo mismo */
    max-width: 450px;       /* Límite de largo (bájalo a 400px si las quieres aún más cortas) */
    margin: 0 auto;         /* Mantiene las tarjetas centradas */
    box-sizing: border-box; /* Asegura que los márgenes internos no deformen la caja */
}

.momento h3 {
    margin: 0 0 5px 0;
    color: #d4af37;
    font-size: 1.1rem;
    font-family: 'Playfair Display', serif;
}

.momento p {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.momento p span {
    font-weight: 300;
    font-size: 0.9rem;
    color: #bbb;
}

/* Botón de reserva dentro del repertorio */
.btn-reservar-rep {
    background-color: #d4af37;
    color: #0b132b;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    text-transform: uppercase;
    display: inline-block;
    transition: transform 0.3s;
    animation: fadeInUp 1.5s ease-out forwards;
}

.btn-reservar-rep:hover {
    transform: scale(1.05);
}

/* =========================================
   ANIMACIONES CSS (KEYFRAMES)
   ========================================= */
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

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

/* Retrasos escalonados para que los textos entren uno tras otro */
.animar-elemento {
    animation: fadeInUp 0.8s ease-out forwards;
}
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
.delay-5 { animation-delay: 1.0s; }
.delay-6 { animation-delay: 1.2s; }
.delay-7 { animation-delay: 1.4s; }


/* =========================================
   AJUSTES PARA CELULARES (RESPONSIVE)
   ========================================= */
@media (max-width: 768px) {
    .seccion-repertorio {
        /* Desactiva el efecto fijo que causa el zoom gigante en móviles */
        background-attachment: scroll; 
        
        /* Ajusta el encuadre (puedes cambiar el 60% para mover la foto más a la izquierda o derecha) */
        background-position: 60% center; 
        
        /* Reduce un poco el espacio superior para celulares */
        padding: 130px 15px 40px 15px; 
    }

    .titulo-dorado {
        font-size: 2.2rem; /* Achica un poco el título para que no tape tanto la foto */
    }

    .subtitulo {
        font-size: 1rem;
        margin-bottom: 25px;
    }

    /* Evita que el menú superior se desborde en pantallas pequeñas */
    .nav-ocasiones {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .nav-ocasiones a {
        margin: 5px 10px;
        font-size: 0.8rem;
    }
}