/* =========================================================================
   FUNDOS DAS SEÇÕES — edite só este arquivo para colocar suas imagens.

   Como usar:
   1. Coloque as imagens em  assets/images/backgrounds/
   2. Descomente (tire o /* ... *\/) as linhas da seção desejada.
   3. Cada seção aceita 3 versões. As que você não definir herdam a anterior:
        celular  (até 599px)   → regra sem @media
        tablet   (600–959px)   → @media (min-width: 600px)
        desktop  (960px ou +)  → @media (min-width: 960px)
   A imagem sempre cobre a seção inteira (background-size: cover) e se
   ajusta ao tamanho da tela; a cor azul/vermelha continua por trás
   enquanto a imagem carrega.
   Para escolher qual parte da imagem fica visível em telas estreitas,
   use background-position (ex.: "center top", "30% center").

   Seletores disponíveis:
     .site-header  #topo (hero)  #data (foto aérea)  #verao
     #quinta  #sexta  #sabado  #domingo
     #noticias  #galeria  #playlist  #redes  #rodape
   ========================================================================= */

/* ----- Exemplo: Hero ----- */
/**/
#topo { background-image: url("../images/backgrounds/hero-celular.jpg"); }
@media (min-width: 600px) { #topo { background-image: url("../images/backgrounds/hero-tablet.jpg"); } }
@media (min-width: 960px) { #topo { background-image: url("../images/backgrounds/hero-desktop.jpg"); } }


/* ----- Cabeçalho ----- */
 .site-header { background-image: url("../images/backgrounds/cabecalho.jpg"); } /**/

/* ----- O verão começa aqui ----- */
 #verao { background-image: url("../images/backgrounds/verao-celular.jpg"); } /**/
 @media (min-width: 960px) { #verao { background-image: url("../images/backgrounds/verao-desktop.jpg"); } } /**/

/* ----- Programação (um fundo por dia) ----- */
 #quinta  { background-image: url("../images/backgrounds/quinta.jpg"); } /**/
 #sexta   { background-image: url("../images/backgrounds/sexta.jpg"); } /**/
 #sabado  { background-image: url("../images/backgrounds/sabado.jpg"); } /**/
 #domingo { background-image: url("../images/backgrounds/domingo.jpg"); } /**/

/* ----- Notícias / Galeria / Playlist / Redes ----- */
 #noticias { background-image: url("../images/backgrounds/noticias.jpg"); }/* */
 #galeria  { background-image: url("../images/backgrounds/galeria.jpg"); }/* */
 #playlist { background-image: url("../images/backgrounds/playlist.jpg"); } /**/
 #redes    { background-image: url("../images/backgrounds/redes.jpg"); } /**/

/* ----- Decorações (gotas e palmeiras vetoriais do design) -----
   Se o seu fundo já tiver esses elementos, esconda-os aqui: */
/* .drops, .palm { display: none; } */

/* ----- Menu lateral (painel que abre no botão ☰) -----
   Imagem em assets/images/backgrounds/menu.jpg (retrato funciona melhor:
   o painel tem até 380px de largura e a altura da tela). */
.menu-panel { background-image: url("../images/backgrounds/menu.jpg"); background-size: cover; background-position: center; }

/* ----- Páginas internas (programacao.html e historia.html) -----
   Os dias (#quinta, #sexta, #sabado, #domingo), #redes e #rodape já usam as regras acima.
   Para fundos próprios, descomente e coloque as imagens em assets/images/backgrounds/: */
 #programacao-topo    { background-image: url("../images/backgrounds/programacao-topo.jpg"); } /**/
 #circuitos           { background-image: url("../images/backgrounds/circuitos.jpg"); } /**/
 #historia            { background-image: url("../images/backgrounds/historia-1.jpg"); } /**/
 #um-pouco-de-historia { background-image: url("../images/backgrounds/historia-2.jpg"); } /**/
 #eunira-boaventura   { background-image: url("../images/backgrounds/historia-3.jpg"); }/* */
 #trio-patury         { background-image: url("../images/backgrounds/historia-4.jpg"); }/* */
 #circuitos-da-festa  { background-image: url("../images/backgrounds/historia-4.jpg"); } /**/