/* Reset */
* { margin: 0; padding: 0;  box-sizing: border-box;}
 /* Barra preta superior */
.topbar { background:#333; height:25px; }
body { font-family: 'Overpass', sans-serif;  background-color: #fff;color:  #444; line-height: 1.6;}
html, body {overflow-x: hidden; font-size: 16px;}
p {margin-bottom: 0; text-align: justify; margin: 5px 5px 0 10px; width: 100%;overflow-wrap: break-word;height: auto;font-size: 1em;  }
h1 {font-size: 2.5em;color: #7b717a;padding: 2px 0 10px 0;font-family: 'Segoe UI', sans-serif;font-weight: 700;text-align: center;
margin-bottom: 20px;margin-top: 80px;position: relative;}
h1::after {content: '';display: block;width: 300px;height: 3px;background: linear-gradient(to right, transparent, #7b717a, transparent);
margin: 10px auto 0 auto;border-radius: 3px;}
h2{    font-size: 2.0em;   }
h3{font-size: 1.17em; font-weight: 500; }
.nav { position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: 9999;  background: #EBE5DA;}
.navbar-container { max-width: 1500px;margin: auto 0;display: flex; align-items: center;justify-content:space-around;height:60px;}
.logo img {height: 5rem; margin-left: 70px; padding:0; margin-top: 15px;}
.menu-toggle { display: none; font-size: 28px; cursor: pointer;}
.menu { display: flex;list-style: none; gap: 25px; align-items: center;}
.menu li a,
.dropbtn { display: flex; align-items: center; gap: 6px; text-decoration: none;color: #7b717a;font-size: 14px;font-weight: 500;
    padding: 8px 12px;border-radius: 8px;cursor: pointer; transition: background-color .3s, color .3s, font-weight .3s;}
.menu li a:hover,
.dropdown:hover .dropbtn {background-color: #CBDCCD; color: #000;font-weight: 600;}
.dropdown {position: relative; }
.dropdown-content {position: absolute;width: 180px;top: 100%; left: 0;margin-top: 8px;background: #fff; box-shadow: 0 8px 20px#D2C1D0;
  border-radius: 8px;  display: none;  z-index: 2000;}
.dropdown.open .dropdown-content {    display: block;}
.dropdown-content a:hover {    background: #CBDCCD;    color: #2e3d29;}
.dropdown-content a { display: block;padding: 12px 16px; font-size: 14px; color: #5c4b41; transition: .3s;}
.dropdown-content a:hover {background: #CBDCCD;color: #2e3d29;}
.seta {width: 8px; height: 8px; border-right: 2px solid #555;border-bottom: 2px solid #555; transform: rotate(45deg); /* fechado */    transition: transform .3s, border-color .3s;}
.dropdown:hover .seta,
.dropdown.open .seta {transform: rotate(-135deg); /* aberto */  border-color: #000;}
#login-logout-button {background-color: #CBDCCD; color: #000;border: none; padding: 8px 12px; font-weight: bold; border-radius: 8px;
  cursor: pointer; transition: background-color .3s, color .3s;margin-right: 2%;width: auto;font-size: .9em;}
#login-logout-button:hover {background-color: #D2C1D0; color: #000;}
.veja-mais { width: 40%;font-size: 12px;text-align: center;display: inline-block; padding: 4px 10px; background-color: #B0C4DE;
  color: #fff; text-decoration: none; border-radius: 8px; transition: background-color 0.3s;}
.veja-mais:hover { background-color: #CBDCCD;}
button {margin-top:0px;padding:5px;width: fit-content;  }      
.logged-in {width: 10%; margin-right:10px;}
.logged-out {width: 10%;margin-right:10px;}
#responseMessage{  margin-left:10px}
.footer {  background:#CBD1DC; color: #333; padding: 60px 20px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.footer p{ font-size: 0.8em;  margin-bottom: 10px;}
.footer-container { display: flex; justify-content: space-between;  flex-wrap: wrap; max-width: 1200px; margin: auto;}
.footer-box { flex: 1 1 300px; margin: 20px;}
.footer-box h2 { color: #333; font-size: 22px; margin-bottom: 15px; border-bottom: 2px solid #fff; padding-bottom: 5px;}
.footer-box p{  text-align: justify;}
.footer-box p,
.footer-box a {  color: #333; text-decoration: none; font-size: 16px; margin: 6px 0;}
.footer-box i {color: #333; margin-right: 10px; font-size: 18px;}
.footer-box a:hover {  text-decoration: underline;  color: #EBDAE9;}
.footer-box ul {  list-style: none;  padding: 0;  margin: 0;}
.footer-box ul li { margin: 10px 0;}
.footer-box ul li a {  color: #333;  transition: color 0.3s;}
.footer-box ul li a:hover {  color: #ffd;}
.footer-direitos p {  font-size: 11px;  color: #555;text-align: center;}
.titulo {  margin: 10px 0; font-size: 20px;}

.perfil-container {position: relative; list-style: none;}
.perfil-btn {width: 45px; height: 45px;background: #1f2937;color: #fff;border-radius: 50%;display: flex;align-items: center;
  justify-content: center;font-size: 9px;font-weight: bold;cursor: pointer;margin-left: 10px;}
.perfil-menu {position: absolute;top: 60px;right: 0; background: #fff; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  width: 150px;display: none; flex-direction: column; z-index: 999;}
.perfil-menu a { padding: 10px;text-decoration: none;  color: #333;}
.perfil-menu a:hover {  background: #f3f3f3;}
.perfil-menu.ativo { display: flex;}

@media (max-width: 480px) {
  .cards {display: flex; flex-direction: column; gap: 20px; padding: 0 16px;  }
  .card-work {flex: none; max-width: 100%; transform: none; box-shadow: 0 6px 20px rgba(0,0,0,0.06);  }
  /* desativa efeitos de hover */
  .card-work:hover { flex: none; transform: none; box-shadow: 0 6px 20px rgba(0,0,0,0.06);  }
  .card-work:hover img { transform: none;  }
  .img-box { height: 280px;  }  
}

@media (max-width: 768px) {
  body {font-size: 14px; padding-top: 65px;  }
  h1 { font-size: 1.5em; }
  h2 { font-size: 1em; }
  h3 { font-size: 0.95em; }
  p  { font-size: 0.9em; }

  .img-box {    height: 260px;  }
  .logo img { height: 55px;    margin-left: 5px;  }
  /* FOOTER */
  .footer-box h2 { font-size: 18px; text-align: center;  }
  .footer-box p,
  .footer-box a { font-size: 14px;  }
  .footer-direitos p { font-size: 10px;  }  
  .menu-toggle { display: block;  }
  .menu { display: none; position: absolute; align-items: flex-start; top: 70px;right: 16px; flex-direction: column;
        background: #fff; width: 180px; padding: 15px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.15);
        z-index: 9999;  gap:10px; }
  .menu.active { display: flex;  }  
}

@media (max-width: 900px) {  
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.1em; }
  .logo img { height: 60px; margin-left: 8px;  }
}