:root{
  --azul:#011A40;
  --amarelo:#FFD740;
  --amarelo2:#FFB300;
  --laranja:#E67E22;
  --cinza:#f4f6f8;
}


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

body{
  font-family:'Open Sans', sans-serif;
  background:var(--cinza);
  color:#222;
}

section[id]{
  scroll-margin-top: 100px;
}

main{
  padding-top: 90px;
}

.centralizar{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.hero{
  background:
  linear-gradient(rgba(1, 26, 64, 0), rgba(1, 26, 64, 0.726)),
  url('./imagens/WhatsApp\ Image\ 2026-01-30\ at\ 10.17.53\ -\ Editado.jpg') center/cover;
  color:#fff;
  padding:110px 20px;
  text-align:center;
}

.hero h2{
  font-family:'Montserrat', sans-serif;
  font-size:2.6rem;
  font-weight:800;
  margin-bottom:25px;
}

.hero h1,
.hero h2{
  max-width: 900px;
  margin: 0 auto 25px;
  line-height: 1.2;
}

.hero span{
  color:var(--amarelo);
}

.btn{
  background:var(--amarelo);
  color:#000;
  padding:15px 28px;
  font-weight:700;
  text-decoration:none;
  border-radius:6px;
  transition:.3s;
}

.btn:hover{
  background:var(--amarelo2);
}

section{
  padding:70px 0;
}

section + section{
  border-top: 1px solid #eee;
}


.section-title{
  text-align:center;
  margin-bottom:45px;
}

.section-title h2{
  font-family:'Montserrat', sans-serif;
  font-size:2.1rem;
  color:var(--azul);
}

.section-subtitle{
  max-width: 800px;
  margin: -25px auto 35px;
  text-align: center;
  color: #4a4a4a;
  line-height: 1.6;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
}

.card{
  background:#fff;
  padding:35px 25px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.card h3{
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  margin-top:10px;
}

.catalog{
  background:#fff;
}

.products-grid{
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}

.product-card{
  padding:0;
  overflow:hidden;
  text-align:left;
  display:flex;
  flex-direction:column;
}

.product-media{
  position:relative;
  background:linear-gradient(135deg, rgba(1,26,64,0.9), rgba(1,26,64,0.6));
  color:#fff;
  min-height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-media img{
  width:80%;
  height:180px;
  object-fit:cover;
}

.product-placeholder{
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem;
  padding:16px 20px;
  background:rgba(255,255,255,0.15);
  border-radius:8px;
}

.product-code{
  position:absolute;
  bottom:12px;
  right:12px;
  background:var(--amarelo);
  color:#000;
  font-weight:700;
  font-size:0.75rem;
  padding:6px 10px;
  border-radius:999px;
}

.product-content{
  padding:22px 24px 26px;
}

.product-content h3{
  margin:0 0 10px;
  font-size:1.05rem;
  line-height:1.3;
}

.product-class{
  text-transform:uppercase;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:#8a8a8a;
  margin-bottom:12px;
}

.product-description{
  color:#3f3f3f;
  line-height:1.55;
  font-size:0.75rem;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.produtos-ver-mais{
  display:flex;
  justify-content:center;
  margin-top:32px;
}

#btn-ver-mais-produtos[hidden]{
  display:none;
}

#btn-ver-mais-produtos{
  border:none;
  cursor:pointer;
}

.suppliers{
  background:#fff;
}

.suppliers-grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.supplier-card img{
  width:100px;
  height:auto;
  margin:0 auto 18px;
  display:block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.12));
}

.reviews{
  background:var(--azul);
}

.reviews-title h2{
  color:#fff;
}

.reviews-grid{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}

.review-card{
  text-align:left;
}

.review-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.review-stars{
  color:var(--amarelo);
  font-size:1.35rem;
  letter-spacing:0.12em;
}

.review-user{
  display:flex;
  align-items:center;
  gap:8px;
  padding-right: 10px;
}

.review-name{
  font-size:0.9rem;
  font-weight:700;
  color:#22334e;
}

.review-comment{
  color:#2f2f2f;
  line-height:1.55;
}

.talk-to-us{
  background:#fff;
}

.talk-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:start;
}

.talk-content img{
  max-width:180px;
  margin-bottom:18px;
}

.talk-content h2{
  font-family:'Montserrat', sans-serif;
  font-size:2rem;
  color:var(--azul);
  margin-bottom:16px;
}

.talk-brand-text{
  font-size:1.2rem;
  color:#2f2f2f;
  line-height:1.6;
  margin-bottom:10px;
}

.talk-small-text{
  font-size:1rem;
  color:#666;
  line-height:1.5;
}

.talk-form{
  background:#f9fbfd;
  border:1px solid #dfe6ef;
  border-radius:10px;
  padding:24px;
}

.talk-form h3{
  font-family:'Montserrat', sans-serif;
  color:var(--azul);
  margin-bottom:18px;
}

.form-field{
  margin-bottom:14px;
}

.form-field label{
  display:block;
  font-weight:600;
  margin-bottom:6px;
}

.form-field input,
.form-field textarea{
  width:100%;
  border:1px solid #c8d3e0;
  border-radius:6px;
  padding:10px 12px;
  font-family:'Open Sans', sans-serif;
  font-size:0.95rem;
}

.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:#4f78ab;
}

.form-field input.invalid,
.form-field textarea.invalid{
  border-color:#d93025;
}

.error-message{
  display:block;
  color:#d93025;
  font-size:0.82rem;
  min-height:16px;
  margin-top:4px;
}

.form-submit{
  border:none;
  cursor:pointer;
}

.about{
  background:#fff;
}

.about p{
  max-width:900px;
  margin:auto;
  text-align:center;
  font-size:1.1rem;
  line-height:1.6;
  color:#444;
}

.contact{
  background:#fff;
}

.contact-info p{
  margin-bottom:10px;
}

.mapa iframe {
  width: 100%;
  height: 350px;
  border-radius: 12px;
  margin-top: 15px;
}

footer{
  background:var(--azul);
  color:#fff;
  padding:50px 0 0;
}

.footer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  align-items:start;
}

.footer-brand img{
  width:140px;
  margin-bottom:12px;
}

.footer-brand h3{
  font-family:'Montserrat', sans-serif;
  margin-bottom:10px;
}

.footer-brand p{
  color:#d6dbe4;
  line-height:1.6;
}

.footer-links,
.footer-location,
.footer-support{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-links h4,
.footer-location h4,
.footer-support h4{
  font-family:'Montserrat', sans-serif;
  margin-bottom:6px;
}

.footer-links a{
  color:#fff;
  text-decoration:none;
  transition:opacity 0.2s ease;
}

.footer-links a:hover{
  opacity:0.8;
  color:var(--amarelo);
}

.footer-support a{
  color:#fff;
  text-decoration:none;
}

.footer-support a:hover{
  color:var(--amarelo);
}

.footer-bottom{
  margin-top:30px;
  padding:18px 0;
  text-align:center;
  background:rgba(0,0,0,0.2);
  font-size:0.9rem;
}

.whatsapp{
  position:fixed;
  right:30px;
  bottom:30px;
  background:#25d366;
  color:#fff;
  padding:16px 20px;
  border-radius:50px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
  background-image: url('./imagens/logo_whatsapp-Photoroom.png');
  width: 70px;
  height: 70px;
  background-repeat: no-repeat; /* Não repete a imagem */
  background-position: center; /* Centraliza a imagem */
  background-size: 70%;
}

.whatsapp:hover{
  transform: scale(1.05);
  box-shadow:0 14px 25px rgba(0,0,0,.4);
}

/*-------------------------------------------*/

@media (max-width:768px){
  section[id]{
    scroll-margin-top: 180px;
  }

  main{
    padding-top: 170px;
  }

  section{
    padding: 52px 0;
  }

  .section-title{
    margin-bottom: 28px;
  }

  .section-title h2{
    font-size: 1.6rem;
  }

  .grid{
    gap: 16px;
  }

  .card{
    padding: 22px 16px;
  }

  .hero h1,
  .hero h2{
    font-size:1.65rem;
    line-height: 1.28;
    margin-bottom: 18px;
  }

  .hero{
    padding: 84px 16px;
  }

  .btn{
    font-size: 0.95rem;
    padding: 12px 20px;
  }

  .product-media{
    min-height: 132px;
  }

  .product-media img{
    width: 72%;
    height: 132px;
  }

  .product-content{
    padding: 16px 16px 18px;
  }

  .product-content h3{
    font-size: 0.95rem;
  }

  .product-class{
    font-size: 0.64rem;
    margin-bottom: 8px;
  }

  .product-description{
    font-size: 0.86rem;
    line-height: 1.45;
    -webkit-line-clamp: 4;
  }

  .suppliers-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .supplier-card img{
    width: 78px;
    margin-bottom: 10px;
  }

  .reviews-grid{
    grid-template-columns: 1fr;
  }

  .review-stars{
    font-size: 1.1rem;
  }

  .review-name{
    font-size: 0.85rem;
  }

  .review-comment{
    font-size: 0.9rem;
  }

  .nav{
    gap:12px;
  }

  .nav a{
    font-size:.9rem;
  }

  .logo img{
    height:42px;
  }

  .talk-grid{
    grid-template-columns:1fr;
  }

  .talk-content{
    text-align:center;
  }

  .talk-content h2{
    font-size: 1.45rem;
    margin-bottom: 12px;
  }

  .talk-brand-text{
    font-size: 1rem;
    line-height: 1.5;
  }

  .talk-small-text{
    font-size: 0.92rem;
  }

  .talk-content img{
    margin:0 auto 18px;
    max-width: 140px;
  }

  .talk-form{
    padding: 16px;
  }

  .talk-form h3{
    margin-bottom: 12px;
  }

  .form-field{
    margin-bottom: 10px;
  }

  .form-field label{
    font-size: 0.9rem;
  }

  .form-field input,
  .form-field textarea{
    padding: 9px 10px;
    font-size: 0.9rem;
  }

  .contact-info p{
    font-size: 0.95rem;
    line-height: 1.5;
  }

  .mapa iframe {
    height: 260px;
  }

  .whatsapp{
    right: 14px;
    bottom: 14px;
    width: 56px;
    height: 56px;
    padding: 10px;
  }

  .footer-brand img{
    margin:0 auto 12px;
  }

  .footer-brand,
  .footer-links,
  .footer-location,
  .footer-support{
    text-align:center;
    align-items:center;
  }

  .footer-bottom{
    font-size: 0.78rem;
    padding: 14px 10px;
  }
}

@media (max-width: 480px){
  .hero h1,
  .hero h2{
    font-size: 1.45rem;
  }

  .section-title h2{
    font-size: 1.4rem;
  }

  .suppliers-grid{
    grid-template-columns: 1fr;
  }

  .product-description{
    -webkit-line-clamp: 3;
  }
}