/* --- VARIÁVEIS GERAIS --- */
:root {
  --cor-primaria: #fdc300;
  --cor-secundaria: #000000;
  --cor-fundo: #ffffff;
  --cor-texto: #000000;
  --cor-solar: #009fe3;
  --fonte-principal: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- RESET BÁSICO --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Rolagem suave nativa */
}

body {
  font-family: var(--fonte-principal);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: var(--cor-primaria);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--cor-secundaria);
}

/* --- CABEÇALHO E NAVEGAÇÃO --- */
header {
  background-color: var(--cor-fundo);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px; 
  padding: 0 max(5%, calc((100vw - 1200px) / 2));
}

.logo, .logo a {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo img {
  max-height: 40px;
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

nav a {
  font-weight: 600;
  color: var(--cor-secundaria);
  text-transform: uppercase;
  font-size: 0.9rem;
}

nav a:hover {
  color: var(--cor-primaria);
}

/* --- ESTRUTURA DAS SEÇÕES --- */
main section {
  padding: 0rem 5% 2.5rem 5%;
  max-width: 1200px;
  margin: 0 auto;
}

section h2 {
  color: var(--cor-secundaria);
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

section p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: justify;
  text-align-last: center;
}

/* --- NOSSA ORIGEM --- */
#nossa-origem header {
  position: static;
  box-shadow: none;
  padding: 0;
  background: transparent;
  display: block;
  text-align: center;
}

#nossa-origem h1 {
  font-size: 3.5rem;
  line-height: 3rem;
  color: var(--cor-primaria);
  margin-bottom: 0;
}

#nossa-origem h2 {
  font-size: 1.75rem;
  line-height: 1.5rem;
  color: var(--cor-secundaria);
  margin-bottom: 0;
}

/* --- EMPRESAS (GRID DE CARDS) --- */
#empresas {
  background-color: var(--cor-fundo);
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.redes-sociais {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}

.redes-sociais a {
  font-weight: bold;
  font-size: 0.9rem;
}

/* --- RODAPÉ --- */
footer {  
  color: var(--cor-secundaria);
  text-align: center;
  padding: 3rem 5% 1rem;
}

footer h1 {
  font-size: 3.5rem;
  line-height: 3rem;
  color: var(--cor-primaria);
  margin-bottom: 0;
}

footer h2 {
  font-size: 1.75rem;
  line-height: 1.5rem;
  color: var(--cor-secundaria);
  margin-bottom: 0;
}

footer address {
  font-style: normal;
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

footer address a {
  color: var(--cor-fundo);
}

.copyright {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.7;
}

/* --- SLIDESHOW PRINCIPAL RESPONSIVO --- */
main section.slideshow-principal {
  max-width: 100%;
  padding: 0;
  margin: 0 0 3rem 0; 
}

.slideshow-principal {
  position: relative;
  width: 100%;
    

  /* Força o container a ter a mesma proporção da imagem original */
  aspect-ratio: 2000 / 800; 
    
  /* Altura máxima para não ficar gigante em monitores ultrawide */
  max-height: 650px; 
  
  overflow: hidden;
  background-color: var(--cor-fundo);
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  transition: opacity 2s ease-in-out; 
  margin: 0;
}

.slide.ativo {
  opacity: 1; 
  z-index: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}

/* --- ESTILO DAS LOGOMARCAS NOS CARDS --- */
article.empresa header {
  position: static; 
  box-shadow: none;
  height: auto; /* Remove a altura fixa de 80px herdada do header principal */
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;  
}

.logo-container-empresa {
  display: flex;
  justify-content: center; /* Centraliza a logo horizontalmente */
  align-items: center;     /* Alinha a logo na vertical */
  margin-bottom: 1rem;     /* Espaço para o texto abaixo */
}

.logo-empresa-header {
  height: auto;           /* Altura exata solicitada */
  width: 220px;             /* Mantém a proporção da largura */
  display: block;
  object-fit: contain;     /* Garante que a logo não seja cortada */
}

/* Ajuste para telas menores: a logo de 134px pode ficar grande demais no celular */
@media (max-width: 480px) {
  .logo-empresa-header {
    height: 100px;         /* Diminui um pouco para não quebrar o layout no celular */
  }
}

/* Estilizando o parágrafo (slogan) abaixo do banner */
.slogan-container-empresa p {
  text-transform: uppercase;
  font-size: 1.25rem;          /* Tamanho solicitado */
  line-height: 1.5rem;
  text-align: center;
  margin-top: 1rem;           /* Espaço entre a logo e este texto */
  /*color: var(--cor-primaria); /* Usa a cor escura do projeto */
}

.empresas-container {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 2rem;
}

.texto-container-empresa {
  display: block;
  clear: both;
  width: 100%;
  margin-top: 2rem;
}

/* --- CONTÊINER DE TEXTO DA EMPRESA --- */
.texto-container-empresa {
  display: block;      /* Força o bloco a quebrar a linha e agir como um degrau */
  width: 100%;         /* Ocupa todo o espaço horizontal do cartão */
  clear: both;         /* Limpa qualquer elemento flutuante que possa estar causando a sobreposição */
  margin-top: 1rem;    /* Dá um respiro entre o header e o início do texto */
}

/* Ajustando os parágrafos que agora vivem dentro dessa div */
.texto-container-empresa p {
  text-align: justify;     /* Deixa o texto reto nas duas laterais */
  text-align-last: center; /* Puxa a última linha de cada parágrafo para o meio */
  margin-bottom: 1rem;     /* Espaçamento entre os parágrafos */
  font-size: 1rem;         /* Garante que o texto volte ao tamanho normal de leitura */
  line-height: 1.6;        /* Melhora a legibilidade do texto longo */
}

/* --- ESTILO DAS REDES SOCIAIS COM LOGOS --- */
.redes-sociais {
  list-style: none;
  display: flex;
  justify-content: center; /* Esta é a linha que centraliza tudo! */
  align-items: center;     /* Alinha o texto e os ícones verticalmente ao centro */
  gap: 1.5rem;             /* Espaço entre os itens */
  margin-top: 1.5rem;
  padding: 0;              /* Remove o preenchimento padrão da lista (ul) */
}

/* Estilo específico para o link de texto do Site */
.link-site {
  font-size: 1rem;
  font-weight: normal;
}

.link-dom {
  font-size: 1.125rem;
  font-weight: bold;  
}

/* Tamanho e efeito nos ícones SVG */
.social-icon {
  width: 26px;  /* Tamanho ideal para visualização */
  height: 26px;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Efeito de hover nos ícones */
.redes-sociais a:hover .social-icon {
  transform: translateY(-3px); /* Leve pulinho para cima */
  filter: brightness(1.2);     /* Dá um leve brilho no logo */
}

/* --- BANNER INFERIOR DOS CARTÕES DE EMPRESA --- */
.banner-inferior-empresa {
  width: 100%;
  margin-top: 2rem; /* Distância entre os ícones das redes sociais e o banner */
  border-radius: 8px; /* Cantos arredondados */
  overflow: hidden; /* Garante que a imagem não vaze dos cantos redondos */
}

.banner-inferior-empresa img {
  width: 100%;
  height: auto; /* Mantém a proporção original da imagem sem distorcer */
  display: block; /* Remove o espaçamento fantasma na parte inferior da imagem */
  object-fit: cover;
  transition: transform 0.3s ease; /* Prepara a imagem para um possível efeito */
}

/* Opcional: Efeito de leve zoom ao passar o mouse por cima do banner */
.banner-inferior-empresa:hover img {
  transform: scale(1.03);
}

/* --- AJUSTE DO MAPA (IFRAME) NO CONTATO --- */
#contato iframe {
  width: 100%;
  max-width: 1200px;
  height: 600px;
  display: block;
  margin: 0 auto;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* =======================================================
   AJUSTES PARA MOBILE (Telas até 768px de largura)
   ======================================================= */
@media (max-width: 768px) {
  /* Esconde os links do menu normal no celular */
  nav[aria-label="Menu principal"] ul {
    display: none; 
  }

  /* Adiciona o ícone de 3 barras (☰) visualmente via CSS */
  nav[aria-label="Menu principal"] {
    position: absolute !important;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: auto !important;    
  }

  nav[aria-label="Menu principal"]::before {
    content: "\2630"; /* Código Unicode para o ícone de 3 barras */
    font-size: 30px;
    color: #000000;
    cursor: pointer;
    display: inline-block;
    padding: 10px;    
  }
  
  nav[aria-label="Menu principal"] ul.menu-aberto {
    display: flex !important;
    flex-direction: column;
    background-color: var(--cor-fundo);
    position: absolute;
    top: 70px;
    right: -15px;
    width: 100vw;
    padding: 0;
    box-shadow: 0px 5px 10px rgba(0,0,0,0.1); 
    z-index: 999;
    gap: 0 !important;     
  }

  nav[aria-label="Menu principal"] ul.menu-aberto li {
    text-align: center;
    padding: 0 !important;
    margin: 0 !important;    
    border-bottom: 1px solid #eaeaea;
  }

  nav[aria-label="Menu principal"] ul.menu-aberto li:last-child {
    border-bottom: none;
  }

  nav[aria-label="Menu principal"] ul.menu-aberto li a {
    display: block !important;
    padding: 15px 0 !important;
  }
  
  nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  
  header#cabecalho { 
    position: sticky !important;
    top: 0;
    z-index: 1000;
    background-color: var(--cor-fundo);
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;     
    min-height: 70px; 
    padding: 10px 0;
    width: 100%;
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
  }
  
  .logo {
    margin: 0 !important;
    text-align: center;
  }

  #nossa-origem h1 {
    font-size: 2rem !important;
    line-height: 2rem;  
  }

  #nossa-origem h2 {
    font-size: 1rem !important;
    line-height: 1rem;    
  }  
    
  .slogan-container-empresa {
    font-size: 16px !important;
    text-align: center;
  }

  .slideshow-principal {
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;    
  }

  .slideshow-principal img {
    width: 100% !important;
    max-width: 100% !important;    
    height: auto !important;
    object-fit: cover;
  }

  main section {
    padding-bottom: 1rem;
  }
  
  section#nossa-origem {
    margin-top: 30px !important;
  }

  section#nossa-origem header {    
    height: 50px !important;    
  }

  .empresas-container {    
    gap: 1.5rem;    
  }

  .slogan-container-empresa p {
    font-size: 1rem;
    line-height: 1rem;    
  }

  footer h1 {
    font-size: 2rem !important;
    line-height: 2rem;
  }

  footer h2 {
    font-size: 1rem !important;
    line-height: 1rem;    
  }

  .dot {
    display: none;
  }

  /*.quebrar-linha {
    display: block;
  }*/
  
  #contato iframe {
    height: 350px;
    margin: 1.5rem auto;
    border-radius: 0;
  }  
}