/* ===================== */
/* Variáveis de cores e fonte */
/* ===================== */
:root {
  --cor-primaria: #121a29;       /* azul escuro */
  --cor-secundaria: #244d89;     /* azul médio */
  --cor-terciaria: #c7d4e4;      /* cinza azulado */
  --cor-destaque: #244d89; /* amarelo ouro quente */
  --cor-fundo-claro: #ffffff;    
  --cor-fundo-secundario: #f0f8ff;
  --cor-fundo-terciario: #e6f2ff;
  --cor-texto: #003366;          
  --cor-texto-claro: #ffffff;    
  --cor-footer-bg: #121a29;
  --cor-footer-texto: #c7d4e4;
  --cor-sombra: rgba(0,0,0,0.15);
  --fonte-principal: 'Montserrat', sans-serif;
}

/* ===================== */
/* Base / Reset / Tipos  */
/* ===================== */
html {
  scroll-behavior: smooth;
  font-family: var(--fonte-principal);
}

body {
  background: var(--cor-fundo-claro);
  color: var(--cor-texto);
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: inherit;
}



/* ===================== */
/* Tipografia           */
/* ===================== */
h2, h3 {
  text-align: center;
  color: var(--cor-primaria);
  margin-bottom: 20px;
}

section p {
  text-align: center;
  line-height: 1.6;
  max-width: 800px;
  margin: auto 0 20px auto;
}

/* ===================== */
/* Header */
/* ===================== */

header{
  font-size: 0.8em;
  background-color: var(--cor-fundo-claro);
  color: var(--cor-secundaria);
}

/* ===================== */
/* Seções / Estrutura    */
/* ===================== */
section {
  width: 100%;
  padding: 80px 20px;
}

.section-content {
  max-width: 1100px;
  margin: auto;
  padding: 0 15px;
}

.sr-only {
  visibility: hidden;
}

/* Fundos das seções */
#inicio {
  background: linear-gradient(to right, var(--cor-primaria), var(--cor-secundaria));
  color: var(--cor-texto-claro);
}

#sobre {
  background-color: var(--cor-fundo-secundario);
  color: var(--cor-primaria);
}

#produtos {
  background-color: var(--cor-fundo-claro);
  color: var(--cor-primaria);
}

#projetos {
  background-color: var(--cor-fundo-claro);
  color: var(--cor-primaria);
}

#contato {
  background-color:  var(--cor-fundo-secundario);
  color: var(--cor-primaria);
}

/*Hero*/
.hero {
  position: relative;
  width: 100%;
  height: 60vh; /* ocupa toda a tela */
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slider img.active {
  opacity: 1;
}



/* Animação de transição entre as imagens */
@keyframes slide {
  0% { transform: translateX(0%); }
  20% { transform: translateX(0%); }

  25% { transform: translateX(-100%); }
  45% { transform: translateX(-100%); }

  50% { transform: translateX(-200%); }
  70% { transform: translateX(-200%); }

  75% { transform: translateX(-300%); }
  95% { transform: translateX(-300%); }

  100% { transform: translateX(0%); }
}

/*=====================*/

/* ===================== */
/* Sobre Nós             */
/* ===================== */
.sobre-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

.texto-sobre {
  flex: 1 1 500px;
  line-height: 1.7;
}

.texto-sobre p {
  margin-bottom: 15px;
  text-align: justify;
}

.imagem-sobre {
  position: relative;
  flex: 1 1 500px;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bloco-azul {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100%;
  height: 100%;
  background-color: var(--cor-secundaria);
  border-radius: 12px;
  z-index: 0;
  transform: rotate(-3deg);
  box-shadow: 0 8px 20px var(--cor-sombra);
}

.imagem-sobre img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 15px var(--cor-sombra);
}

.bloco-destaque {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  background-color: rgba(18,26,41,0.85);
  color: var(--cor-texto-claro);
  padding: 15px 20px;
  border-radius: 8px;
  max-width: 80%;
  box-shadow: 0 4px 10px var(--cor-sombra);
  font-weight: bold;
}

/* ===================== */
/* Marcas / Carrossel    */
/* ===================== */
.marcas {
  padding: 50px 0;
  text-align: center;
  background: var(--cor-fundo-terciario);
  overflow: hidden;
}

.marcas p {
  padding-bottom: 40px;
}

.marcas h2 {
  font-size: 28px;
  color: var(--cor-primaria);
}

.carrossel {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.marcas-track {
  display: flex;
  gap: 30px;
  width: 200%;
  animation: deslizar 20s linear infinite;
  flex-wrap: nowrap;
  align-items: center;
}

.item {
  flex: 0 0 auto;
  margin: 0 20px;
  width: 150px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--cor-fundo-claro);
  border-radius: 10px;
  box-shadow: 0 4px 10px var(--cor-sombra);
}

.item img {
  max-width: 100%;
  max-height: 80px;
  object-fit: contain;
}

@keyframes deslizar {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===================== */
/* Produtos              */
/* ===================== */
.produtos-container {
  width: 100%;
  margin-top: 40px;
}

.produtos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  align-items: stretch; /* faz todos os cards terem mesma altura */
}


@media (max-width: 1200px) {
  .produtos {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

/* Cards */

.card p{
  padding-bottom: 10px;
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* mantém o botão no final */
  background: var(--cor-terciaria);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px var(--cor-sombra);
  text-align: center;
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  height: 100%; /* garante altura consistente */
}


.card img {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 15px;
}

.card:hover img {
  transform: scale(1.05);
}

/* ===================== */
/* Projetos Sustentáveis  */
/* ===================== */
.projetos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 40px;
}

.projeto-card {
  background: var(--cor-fundo-terciario);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px var(--cor-sombra);
  text-align: center;
  width: 280px;
  transition: transform 0.3s;
}

.projeto-card:hover { transform: translateY(-5px); }

.projeto-card h4 {
  color: var(--cor-primaria);
  margin-bottom: 10px;
  font-size: 1.5em;
}

.saiba-mais { text-align: center; margin-top: 30px; }

.btn-saiba-mais {
  display: inline-block;
  padding: 12px 24px;
  background: var(--cor-secundaria);
  color: var(--cor-texto-claro);
  font-size: 1rem;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s;
}

.btn-saiba-mais:hover { background: var(--cor-primaria); }

/* ===================== */
/* Contato               */
/* ===================== */
.contato {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  margin-top: 20px;
}

.linha-contato-info {
  display: flex;
  justify-content: center;
  width: 100%;
}

.contato-info {
  max-width: 400px;
  text-align: center;
}

.contato-info p {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 1rem;
  color: var(--cor-primaria);
}

.icon { width: 20px; height: 20px; }
.icon2 { width: 30px; height: 30px; }

.linha-form-mapa {
  display: flex;
  flex-direction: row;
  gap: 30px;
  align-items: center;
}

.formulario-contato, .mapa {
  width: 100%;
  max-width: 400px;
}

.mapa iframe {
  width: 100%;
  height: 300px;
  border: 0;
}

.formulario-contato {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formulario-contato input,
.formulario-contato textarea,
.formulario-contato button {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--cor-terciaria);
  font-size: 1rem;
}

.formulario-contato button {
  cursor: pointer;
  transition: background 0.3s;
}

.botoes-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.botoes-form button {
  flex: 1;
  padding: 12px;
  font-size: 1rem;
  border-radius: 5px;
  border: none;
}

.botoes-form button:first-child {
  background: var(--cor-destaque);
  color: var(--cor-terciaria);
}

.botoes-form button:first-child:hover {
  background: #fff;
}

.botoes-form button:last-child {
  background: var(--cor-terciaria);
  color: var(--cor-primaria);
}

.botoes-form button:last-child:hover {
  background: #b3c1d2;
}

.redes-sociais {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
}

.redes-sociais img {
  width: 30px;
  height: 30px;
  transition: transform 0.3s;
}

.redes-sociais img:hover {
  transform: scale(1.2);
}

/* ===================== */
/* Footer                */
/* ===================== */
footer {
  background: var(--cor-footer-bg);
  color: var(--cor-footer-texto);
  padding: 40px 20px 20px;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  gap: 40px;
  margin-bottom: 20px;
}

.footer-logo img { max-width: 150px; margin-bottom: 10px; }

.footer-logo p { font-size: 14px; line-height: 1.5; color: var(--cor-footer-texto); }

.footer-links h4,
.footer-contato h4,
.footer-social h4 {
  margin-bottom: 10px;
  font-size: 16px;
  color: var(--cor-texto-claro);
}

.footer-links ul { list-style: none; padding: 0; }

.footer-links ul li { margin: 8px 0; }

.footer-links ul li a {
  text-decoration: none;
  color: var(--cor-footer-texto);
  transition: color 0.3s;
}

.footer-links ul li a:hover { color: var(--cor-destaque); }

.footer-contato p { margin: 6px 0; font-size: 14px; color: var(--cor-footer-texto); }

.footer-social a img {
  width: 28px;
  margin-right: 10px;
  transition: transform 0.3s;
}

.footer-social a img:hover { transform: scale(1.2); }

.footer-bottom {
  text-align: center;
  border-top: 1px solid #333;
  padding-top: 15px;
  font-size: 13px;
  color: #aaa;
}

/* ===================== */
/* Cookie Banner         */
/* ===================== */
.cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cor-fundo-claro);
  color: var(--cor-primaria);
  padding: 15px 20px;
  box-shadow: 0px 4px 20px var(--cor-sombra);
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  font-size: 14px;
  z-index: 9999;
}

.cookie-actions {
  display: flex;
  gap: 10px;
}

.cookie-actions button {
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#acceptCookies {
  background: var(--cor-secundaria);
  color: var(--cor-texto-claro);
}

#acceptCookies:hover {
  background: var(--cor-primaria);
}

#rejectCookies {
  background: var(--cor-terciaria);
  color: var(--cor-primaria);
}

#rejectCookies:hover {
  background: #b3c1d2;
}