/* Estilos para la sección de la galería */
.gallery-section {

    padding: 20px; /* Agrega un poco de padding si es necesario */
    border-radius: 10px; /* Opcional: redondea las esquinas */
    margin: 20px 0; /* Opcional: agrega margen superior e inferior */
}
 
 :root {
            --color-cafe: #5D4037;
            --color-rojo: #D32F2F;
            --color-amarillo: #FFD700;
            --color-naranjo: #FF7849;
            --color-negro: #212121;
            --color-azul: #1976D2;
            --color-celeste: #03A9F4;
            --color-verde: #388E3C;
        }
        
        body {
            font-family: 'Montserrat', sans-serif;
            color: #333;
            background: fixed url('../img/1.webp') no-repeat center center;
            background-size: cover;
            position: relative;
        }

        /* Efecto parallax */
        .parallax-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            /*background: url('../img/1.webp') no-repeat center center;*/
            background-size: cover;
            transition: all 0.3s ease;
        }
        
        /* Contenido que se mueve sobre fondo fijo */
        .content-wrapper {
            position: relative;
            /*background-color: rgba(255, 255, 255, 0.9);/*
        }
        
        /* Estilos para la sección hero */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
            background-color: rgba(114, 67, 67, 0.578); /* Café con transparencia */
        }
        
        .hero h1 {
            font-family: 'Playfair Display', serif;
            font-size: 3.5rem;
            color: var(--color-amarillo);
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        /* Secciones con estilos únicos */
        .section-title {
            text-align: center;
            font-family: 'Playfair Display', serif;
            color: var(--color-rojo);
            /*border-bottom: 3px solid var(--color-naranjo);*/
            display: inline-block;
            padding-bottom: 10px;
            margin-bottom: 30px;
            
        }
        
        /* Carrusel de videos */
        .video-carousel {
            background-color: rgba(25, 118, 210, 0.1); /* Azul claro */
            padding: 20px;
            border-radius: 10px;
        }
        
        /* Galería de eventos */
        .gallery-item {
            margin-bottom: 30px;
            border: 5px solid var(--color-cafe);
            border-radius: 5px;
            overflow: hidden;
            transition: all 0.3s ease;
           
        }
        
        .gallery-item:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          
        }
        
        /* Sección "A la Música" */
        .poema-section {
            background: rgba(210, 50, 50, 0.1) url('../img/3.jpeg') no-repeat bottom right;
            padding: 40px;
            border-left: 5px solid var(--color-rojo);
            margin: 40px 0;
            font-style: italic;
            position: relative;
        }
        
        /* Tarjetas de amigos de la música */
        .friend-card {
            background-color: var(--color-cafe);
            color: white;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 30px;
            transition: all 0.3s ease;
            border: 3px solid var(--color-amarillo);
        }
        
        .friend-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        /* Animaciones */
        .animate__animated {
            animation-duration: 1.5s;
        }
        
        /* Efecto de acordeón para secciones */
        .accordion-button {
            background-color: var(--color-cafe);
            color: white;
            font-weight: bold;
        }
        
        /* Formulario de contacto */
        .contact-form {
            background-color: rgba(255, 215, 0, 0.1);
            padding: 30px;
            border-radius: 10px;
            border: 2px solid var(--color-celeste);
        }
        
        /* Botones personalizados */
        .btn-custom {
            background-color: var(--color-rojo);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 50px;
            transition: all 0.3s ease;
        }
        
        .btn-custom:hover {
            background-color: var(--color-naranjo);
            transform: translateY(-3px);
        }
        
        /* Responsivo */
        @media (max-width: 768px) {
            .hero h1 {
                font-size: 2.5rem;
            }
        }

        /* Nueva clase para el título de la galería */
        .gallery-title {
            font-family: 'Playfair Display', serif;
            color: var(--color-rojo);
            display: block; /* Cambia a block para centrarlo */
            margin-bottom: 30px;
            text-align: center;
        }
    }