*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:  "Cinzel", sans-serif;}

body {
width: 100%;
height: 100%;
}
p{
text-indent: 20px;
padding-bottom: 10px;
}


body::before {
  content: "";
  background: url(imagens_ver/band_alema3.png) no-repeat center center/cover;
  position: fixed; /* fixa na tela toda */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  z-index: -1;
}
.botoes {
  display: none;
}
.navbar {
position: fixed;
overflow: hidden;
width: 100%;
height: 100px;
padding: 5px 15px;
display: flex;
align-items: center;
justify-content: space-evenly;
z-index: 5;
}

.navbar .logo {
display: flex;
align-items: center;}

.navbar .logo img{
width: 80px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px;
cursor: pointer;}



.navbar .titulo {

}
.navbar .titulo img {
width: 60%;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 310px
}

.navbar .direita .direto {
display: flex;
width: 100%;
margin-right: 50px;
margin-left: 20px;
}

.navbar .direita .direto li{
text-decoration: none;
list-style: none;
padding-left: 20px;
margin-right: 20px;
font-size: 20px;
}

.navbar .direita .direto li a {
text-decoration: none;
color: black;
}

.navbar .direita .direto li:hover {
transform: scale(1.2);	
}

.sidebar {
position: fixed;
left: 0px;
top: 100px;
width: 240px;
height: auto;
padding-right: 10px;
color: rgba(255,255,255, 0.8);
}

.sidebar .links {

padding-bottom: 15px;
border-bottom: 1px solid gray;}

.sidebar .links-2 {
padding-top: 15px;}

.sidebar .links .icon {
display: flex;
align-items: center;
padding: 10px 24px;
height: 50px;
cursor: pointer;}

.sidebar .links .icon:hover{
background: rgb(144, 139, 139);}

.sidebar .links .icon a{
text-decoration: none;
color: black;
display: flex;
align-items: center;
font-size: 20px;
}


.sidebar .links .icon:hover {
transform: scale(1.2);	
}

.sidebar .links .icon img{
 width: 50px;
 margin: 15px 15px 15px 0px;
 cursor: pointer;
 transition: 0.3s;
}



.sidebar .subscriptions {
border-bottom: none;
padding-top: 15px;}

.content {
  position: fixed;
  display: flex;              /* ← TEM QUE ESTAR AQUI */
  flex-wrap: wrap;
  align-content: flex-start;
  top: 100px;
  left: 320px;
  width: calc(100% - 240px);
  height: calc(100vh - 120px);
  overflow-y: auto;
  gap: 20px;     
   
}

.caixa_grande{
  padding-top: 10px;
  flex: 0 0 40%;
  height: 500px;
  background: url(imagens_ver/bandeira_bavaria_background.png) no-repeat center center/cover;
  border: 1px solid black;
  border-radius: 4px;
  overflow-y: auto;
}

.caixa_grande h1{
 
  text-align: center;
}
.caixa_grande h2{
  padding: 15px;
  text-align: center;
}

.caixa_grande h4{
  padding: 15px;
  text-align: justify;
  line-height: 1.5;
}

.caixa_grande h6{
  padding: 15px;
  text-align: center;
}

.caixa_pequena{
  
  flex: 0 0 45%;
  height: 500px;
  background: url(imagens_ver/bandeira_bavaria_background.png) no-repeat center center/cover;
  border: 1px solid black;
  border-radius: 4px;
  overflow-y: auto;
}

.caixa_pequena h2{
  text-align: center;
  margin-bottom: 10px;
}
.caixa_pequena.festas,
.caixa_pequena.encontros {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 👈 impede a caixa inteira de rolar */
}

/* área que vai rolar */
.lista-scroll {
  overflow-y: auto;
  flex: 1; /* ocupa o espaço restante */
}

.caixa_pequena.encontros h2{
  background-color: #eaeaea;
 position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  margin: 0;
  }
  .caixa_pequena.festas h2{
  background-color: #eaeaea;
 position: sticky;
  top: 0;
  z-index: 3;
  padding: 0;
  margin: 0;
  }

 .caixa_pequena h4{
  padding: 15px;
  text-align: justify;
  line-height: 1.5;
}
/* estrutura base (igual para tudo) */
.linha-evento,
.cabecalho-evento {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 5px;
  padding: 5px;
  align-items: center;
}

/* linhas */
.linha-evento {
  border-bottom: 1px solid #ccc;
}

/* cabeçalho */
.cabecalho-evento {
  top: 0;
  font-weight: bold;
  background-color: #eaeaea;
  border-bottom: 2px solid #999;
  position: sticky;   /* 👈 fica fixo ao rolar */
  top: 0;
  z-index: 2;
}

/* alinhamentos estilo Excel */
.nome { text-align: left; }
.data { text-align: left; }
.local { text-align: left; }
.contato { text-align: left; }
.inicio { text-align: center; }
.fim { text-align: center; }
/*aumenta o espaço no fim da tela*/
.caixa_grande:last-child,
.caixa_pequena:last-child {
  margin-bottom: 80px; /* 👈 espaço depois da última box */
}


@media screen and (max-width: 1200px){
  .navbar {
    display: none;
  }

  .sidebar {
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
   

/*
  .sidebar.ativo {
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
  }
  */  


    .content {
  position: relative;   /* ← tira o fixo */
  padding-bottom: 120px;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column; /* ← empilha */
  align-items: center;
  gap: 10px;

  overflow: visible; /* evita conflito de rolagem */
  }
  .caixa_grande,
  .caixa_pequena { 
     flex: none;              /* ← MUITO IMPORTANTE */
  width: 90%;
  max-width: 500px;
  margin: 0 auto;
  }



  .botoes {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin-top: 10px;
  margin-bottom: 10px;
 
}

.botao {
  padding: 10px;              /* espaçamento interno */
  background-color: red;      /* cor de fundo */
  color: white;               /* cor da fonte */
  border: none;               /* remove borda padrão */
  border-radius: 5px;         /* cantos arredondados (opcional) */
  cursor: pointer;            /* cursor de mão */
  margin-right: 10px;         /* aproxima da margem direita */
}
}