* {margin:0;padding:0;box-sizing:border-box;transition:background-color 0.5s,color 0.5s;}
body {font-family:Arial, sans-serif;display:flex;flex-direction:column;min-height:100vh;background:#e6f7f9;color:#033649;}
body.dark {background:#022f40;color:#e6f7f9;}
.sidebar {width:220px;background:#b3e5f5;padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:fixed;top:0;bottom:0;}
body.dark .sidebar {background:#044a64;}
.logo {text-align:center;margin-bottom:30px;}
.menu button {display:block;width:100%;margin:10px 0;padding:12px;border:none;border-radius:20px;background:#66c5d6;color:#fff;font-size:16px;cursor:pointer;transition:0.3s;}
.menu button:hover {background:#4ab0c3;}
.idiomas {margin-top:auto;display:flex;align-items:center;gap:10px;}
.idiomas select, .idiomas button {padding:6px;border:none;border-radius:10px;}
.conteudo {flex:1;padding:20px;margin-left:240px;}
.secao {display:none;}
.secao.ativa {display:block;}

.grid-galeria img {width:100%;border-radius:10px;}
.formulario {display:flex;flex-direction:column;gap:10px;max-width:400px;}
.formulario input,.formulario select,.formulario textarea {padding:10px;border-radius:8px;border:1px solid #66c5d6;}
.formulario button {padding:12px;background:#037f9e;color:#fff;border:none;border-radius:10px;cursor:pointer;}
.social-icons {position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;}
.icon svg {border-radius:50%;}
.rodape {text-align:center;padding:15px;background:#e6f7f9;color:#033649;margin-left:240px;}
body.dark .rodape {background:#022f40;color:#e6f7f9;}
@media(max-width:768px){.sidebar{width:160px;}.conteudo{margin-left:170px;}.rodape{margin-left:170px;}.menu button{font-size:14px;padding:8px;}}


/* Estilo do logo atualizado */
.logo-img {
  width: 64px;
  height: 64px;
  border-radius: 12px; /* bordas arredondadas */
  object-fit: cover;
  display: block;
  margin: 0 auto 20px;
}


/* Logo responsivo atualizado */
.logo-img {
  width: 256px;       /* 4x maior que antes */
  height: 256px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: 0 auto 20px;
  max-width: 90%;     /* evita ultrapassar o ecrã em dispositivos pequenos */
}

/* Em tablets */
@media (max-width: 768px) {
  .logo-img {
    width: 180px;
    height: 180px;
  }
}

/* Em telemóveis */
@media (max-width: 480px) {
  .logo-img {
    width: 120px;
    height: 120px;
  }
}


/* Estilo para títulos e descrições na galeria */
.item-galeria h3 {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 5px;
  text-align: center;
}

.item-galeria p {
  font-size: 14px;
  color: #555;
  text-align: center;
}


/* === ADICIONAL: splash + quadro styles === */
/* Estilo para seleção múltipla de quadros */
#quadro {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #66c5d6;
}
#quadro[multiple] {
  height: auto;
}
#quadroCampo small {
  font-size: 12px;
  color: #555;
}

/* Splash Screen */
#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #e6f7f9;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 1s ease;
}

.splash-logo {
  width: 800px;
  height: 800px;
  object-fit: cover;
  border-radius: 20px;
}
/* === FIM ADICIONAL === */

/* Fonte manuscrita para o texto de inspiração */
#inspiracao p, #texto-inspiracao {
  font-family: 'Dancing Script', cursive;
  font-size: 1.4rem;
  line-height: 1.8;
}

/* === Estilos adicionais para botões da galeria === */
.sub-menu-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 20px;
}

.sub-menu-galeria button {
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: #037f9e;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.sub-menu-galeria button:hover {
  background: #025f75;
}

.sub-menu-galeria button.ativo {
  background: #66c5d6;
  color: #033649;
  font-weight: bold;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
}

.paginacao {
  text-align: center;
  margin-top: 20px;
}

#ver-mais {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: #66c5d6;
  color: #fff;
  cursor: pointer;
}
#modo-btn svg,
.social-btn svg {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#modo-btn:hover svg,
.social-btn:hover svg {
  transform: scale(1.1);
  filter: brightness(1.1);
}

/* Forçar 3 colunas fixas na galeria */
.grid-galeria {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  justify-items: center;
}

@media (max-width: 900px) {
  .grid-galeria {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grid-galeria {
    grid-template-columns: 1fr;
  }
}

/* Uniformizar tamanho das imagens da galeria + efeito hover */
.item-galeria img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.item-galeria img:hover {
  transform: scale(1.05);
}

/* Forçar cards da galeria a terem mesma altura */
.item-galeria {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 300px;
  min-height: 350px;
  box-sizing: border-box;
}

/* Lightbox - fundo escuro */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Imagem ampliada */
.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
}

/* Mostrar o lightbox */
.lightbox.ativo {
  display: flex;
}

/* Sub-menu galeria centrado */
.sub-menu-galeria {
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 10px;
  margin-bottom: 20px;
}

/* Formulário centralizado */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  align-items: center;
}

.formulario input,
.formulario select,
.formulario textarea {
  width: 100%;
  max-width: 350px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #66c5d6;
  text-align: center;
}