@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Open+Sans:wght@300;400;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

body{
  text-transform:none;
  color:#2E3133;
  background-color:#000;
  line-height:1.6;
  position:relative;
  overflow-x:hidden;
  background-image:url('../images/background.png');
  background-size:contain;
  background-position:center;
  background-repeat:repeat;
  font-family:'Merriweather',sans-serif
}

header{
  background:linear-gradient(to bottom,rgba(17,17,17,.9) 0%,rgba(17,17,17,1) 100%);
  color:#fff;
  position:sticky;
  top:0;
  z-index:1000;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  box-shadow:0 2px 12px rgba(0,0,0,.35)
}
header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 20px;
  position:relative
}
header .logo{width:150px;height:auto;margin-left:7%}

.hamburger{
  display:none;
  background:#111;
  border:1px solid #222;
  color:#fff;
  border-radius:12px;
  padding:8px 12px;
  line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .12s ease,background .2s ease,box-shadow .2s ease
}
.hamburger:hover{background:#161616;transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.3)}
.hamburger[aria-expanded="true"]{background:#1b1b1b;transform:translateY(0);box-shadow:0 4px 14px rgba(0,0,0,.24) inset,0 8px 22px rgba(0,0,0,.32)}
.hamburger:focus-visible{outline:2px solid rgba(186,80,40,1);outline-offset:3px}

header nav ul{list-style:none;display:flex;margin-right:50px}
header nav ul li{margin-right:50px;margin-top:2%;margin-bottom:15px}
header nav ul li a{
  color:rgba(186,80,40,1);
  text-decoration:none;
  font-size:1em;
  font-weight:bold;
  font-family:'Merriweather',sans-serif;
  position:relative;
  transition:color .15s ease,opacity .15s ease;
  margin:10px
}
header nav ul li a.active,
header nav ul li a[aria-current="page"],
header nav ul li.current>a{color:#fff;opacity:1}
header nav ul li a.active::after,
header nav ul li a[aria-current="page"]::after,
header nav ul li.current>a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:rgba(186,80,40,1);
  border-radius:2px
}
header nav ul li a:hover{color:#fff}

.section-head{text-align:center;margin-bottom:24px}
.section-head h2{font-size:clamp(22px,2.4vw,32px);color:#cbcbcb;font-weight:700}
.section-sub{color:#a6adbb;font-size:.95rem;margin-top:6px}

.mv{padding:40px 0;background:transparent}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mv-card{
  background:#0f0f10;
  border:1px solid #1c1c1c;
  border-left:6px solid rgba(186,80,40,1);
  border-radius:12px;
  padding:18px 18px 16px
}
.mv-card h3{margin:0 0 8px;font-size:1.1rem;color:#fff}
.mv-card p{margin:0;color:#d5d8de;font-size:.98rem;line-height:1.7}

.valores{padding:40px 0;background:transparent}
.values-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(5,1fr)}
.value-card{
  background:#686767;
  color:#dedede;
  border:3px solid rgba(186,80,40,1);
  border-left:7px solid rgba(186,80,40,1);
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 6px rgba(0,0,0,.1);
  transition:background .35s ease,transform .12s ease;
  will-change:transform
}
.value-card h3{font-size:1.05rem;margin:0 0 8px;color:#fff;font-weight:700}
.value-card p{margin:0;color:#e3e6ec}
.value-card:hover{
  background:linear-gradient(to right,#a9a9a9 50%,rgba(186,80,40,1) 50%);
  background-size:200% 100%;
  background-position:right bottom;
  transform:translateY(-2px)
}

.cultura{padding:40px 0;background:transparent}
.culture-body{max-width:900px;margin:0 auto;color:#d5d8de}
.culture-body p+p{margin-top:12px}
.lema{
  margin:18px auto 0;
  padding:14px 16px;
  max-width:860px;
  background:rgba(17,17,17,.85);
  border:1px solid #262626;
  border-left:6px solid rgba(186,80,40,1);
  color:#fff;
  text-align:center;
  font-style:italic;
  border-radius:12px
}

.section-head h2 i,
.mv-card h3 i,
.value-card h3 i,
.cultura h2 i{color:rgba(186,80,40,1);margin-right:8px}
.value-card h3 i{font-size:1rem}
.mv-card h3 i{font-size:1.05rem}

.foto-escritorio{padding:40px 0;text-align:center}
.foto-wrapper{max-width:1100px;margin:0 auto}
.foto-wrapper img{
  width:auto;
  height:500px;
  border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  border:3px solid rgba(186,80,40,.8);
  transition:transform .3s ease,box-shadow .3s ease
}
.foto-wrapper img:hover{transform:scale(1.02);box-shadow:0 6px 24px rgba(0,0,0,.45)}

footer{
  background-color:#000;
  color:rgba(186,80,40,1);
  text-align:center;
  padding:20px;
  margin-top:40px;
  font-family:'Merriweather',sans-serif
}
footer .footer-links{margin-top:12px;display:grid;grid-template-columns:repeat(2,auto);justify-content:center;align-items:center;gap:10px 28px}
footer .footer-links a{
  text-decoration:none;
  color:rgba(186,80,40,1);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px
}
footer .footer-links a:hover{color:#fff}
footer .footer-links a[href*="wa.me"] i,
footer .footer-links a[href*="whatsapp"] i,
footer .footer-links a[href*="instagram"] i{
  font-size:40px;
  vertical-align:middle;
  margin-left:40%
}

.whatsapp-button{
  position:fixed;
  bottom:20px;
  right:20px;
  background-color:#25D366;
  color:#fff;
  border-radius:50%;
  padding:15px;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  font-size:30px;
  text-decoration:none;
  z-index:1000;
  transition:transform .3s ease;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center
}
.whatsapp-button:hover{transform:scale(1.1)}
.whatsapp-button i{vertical-align:middle;font-size:30px}

.fade-in{opacity:0;transform:translateY(8px);animation:fadeInUp .5s ease-out forwards}
@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}


@media (max-width:1024px){
  .values-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:768px){
  header .container{flex-direction:column;text-align:center}
  header nav ul{display:none;flex-direction:column;padding:10px 0;width:100%}
  header nav ul li{margin-right:0;margin-bottom:0px}
  .hamburger{display:block;font-size:30px;color:#fff;margin:10px auto 0;border-radius:12px;border:1px solid #111;padding:8px 12px}
  header nav ul.active{
    display:flex;
    flex-direction:column;
    gap:0px;
    padding:12px;
    margin:10px 12px 0;
    background:rgba(11,11,11,.92);
    border:1px solid #1d1d1d;
    border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.35);
    backdrop-filter:blur(8px)
  }
  .mv-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .foto-wrapper img{max-width:100vw}
  .footer-links{grid-template-columns:1fr}
  #footer-escritorio{margin-left: -10%}
  #footer-contato{margin-left: 10%}
  #direitos-reservados{margin-left: -10%}
  header nav ul.active li a{display:block;padding:10px 12px;border-radius:10px}
  header nav ul.active li a:hover{background:#151515;color:#fff}
  header nav ul li a{font-size:1.2em}
  .culture-body p {margin: 5%}

}
@media (max-width:520px){
  .values-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  header nav ul li a{font-size:1.1em}
  .hamburger{font-size:28px}
}
@media (max-width:420px){
  footer .footer-links{grid-template-columns:1fr;gap:8px 0;margin-left:10%}
}