/* FONDO DE LA PÁGINA */ 
        body 
        {
            margin: 0; 
            font-family: Arial, sans-serif; 
            background-image: url("img7.avif"); 
            background-size: cover;
            background-position: center; 
            background-repeat: no-repeat; 
            background-attachment: fixed;
            color: white; 
        } 
            /* CAJAS SEMI-TRANSPARENTES */ 
            header, nav, main, aside, footer, section 
            { background-color: rgba(0, 0, 0, 0.7); 
                padding: 20px; 
                margin: 10px; 
                border-radius: 10px; 
            } 

                /* HEADER */ 
                header { 
                text-align: left; 
             } 
                header 
                .logo-container {
                display: flex; 
                align-items: center; 
                justify-content:flex-start; 
                gap: 20px;
                padding: left;
                flex-wrap: wrap; 
              } 
                header 
                .logo { 
                    width: 150px; 
                    height: auto; 
                    object-fit: contain; 
                }
                 /*aplicar animacion AL NOMBRE DE LA BANDA*/

                 @keyframes entrar-arriba {
                  0% { opacity: 0; transform: translateY(-50px); }
                  100% { opacity: 1; transform: translateY(0); }
                }
                header h1 {
                animation: entrar-arriba 1.5s ease-out;
                }
                
               
                 /* NAV */ 
                 nav ul { 
                    display: flex; 
                    justify-content: center; 
                    list-style: none;
                    padding: 0; 
                    gap: 20px; 
                 } 
                nav ul li {
                    position: relative;
                }


                     /*  el submenu */


                nav ul li a {
                    color: white;
                    text-decoration: none;
                    font-weight: bold;
                   padding: 10px;
                   display: block;
                   transition: color 0.3s;
               }

               nav ul li a:hover {
                   color: #ff4444;
                }

           /* Submenu oculto por defecto */
             nav ul li ul.submenu {
             display: none; 
             /* oculto */
              position: absolute; 

              /* posición relativa al li padre */
               top: 100%; 
               /* justo debajo del enlace padre */
               left: 0;
               background-color: rgba(0, 0, 0, 0.9);
               padding: 10px 0;
               border-radius: 5px;
               min-width: 150px; 

                /* ancho mínimo */
                z-index: 1000; 
            }
            
           /* que esté sobre otros elementos */


        /* Mostrar submenu al pasar el mouse */
               nav ul li:hover ul.submenu {
                display: block;
            }

   /* Estilo de los enlaces del submenu */
         nav ul li ul.submenu li a {
             padding: 8px 20px;
             white-space: nowrap;  
             /* que no se rompa en varias líneas */
              font-weight: normal;
              }

           nav ul li ul.submenu li a:hover {
               color: #ff8888;
            }



                 /* LAYOUT PRINCIPAL */ 
                 .container 
                 { 
                    display: flex; 
                    flex-wrap: wrap;
                    justify-content: center;
                      gap: 20px; 
                  } 

                  /* MAIN Y ASIDE */
                   main { flex: 3; min-width: 300px; } 
                   aside { flex: 1; min-width: 200px; }
                    /* GALERÍA */
                     .galeria 
                     { 
                    display: flex;
                    flex-wrap: wrap;
                    gap: 15px;
                    justify-content: center; }
                    .galeria img {
                    width: 250px; 
                    height: 160px;
                    object-fit: cover;
                    border-radius: 10px;
                    transition: transform 0.3s;
                     } 
                    .galeria img:hover { transform: scale(1.05);
                            } 

                            /*Filtros*/

                    #p8 {
                        filter: sepia(100%);
                    }


              /* VIDEO RESPONSIVE */ 
                     .video-container { position: relative;
                 width: 100%;
                  max-width: 900px;
                  padding-bottom: 56.25%;
                         /* 16:9 */ 
                         height: 0; 
                         margin: 0 auto; 
                     } 
                .video-container iframe { 
                    position: absolute; 
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%; 
                   }
                     /* FOOTER */ 
                     footer 
                     { 
                        text-align: center;
                         font-size: 14px; 
                     }