@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('/css/midiaquire.css'); /* Importa o arquivo de media queries para responsividade */

/* === VARIÁVEIS GLOBAIS PARA CORES E FONTES === */
:root {
  --cor-primaria: #0077b6;           /* Define a cor azul principal usada no site */
  --cor-secundaria: #90e0ef;         /* Define um azul claro para detalhes e destaques */
  --cor-escura: #023e8a;             /* Azul escuro usado em banners e efeitos de degradê */
  --cinza-claro: #e0e0e0;            /* Cinza claro para textos e fundos suaves */
  --cinza-escuro: #d0d0d0;           /* Cinza um pouco mais escuro, usado como reserva */
  --cinza-preto: #1a1a1a;            /* Cor escura usada como fundo geral da página */
  --preto: #111111;                  /* Preto intenso para textos com maior destaque */
  --branco: #ffffff;                 /* Branco puro, usado para fundos claros e textos */
  --cor-primaria-escura: #004a75;   /* Azul escuro para efeitos hover nos botões */
  --fonte-principal: 'Segoe UI', sans-serif; /* Fonte principal usada no site */
  --cor-verde-agua: #40E0D0; /* Verde água para detalhes e destaques */
  --cor-rosa-escuro: #e60073; /* Rosa escuro para destaques e links ativos */
  --cor-laranja: #ff8c00; /* Laranja para botões e  destaques */
  --cor-amarelo: #ffd700; /* Amarelo para destaques e botões */
  --cor-roxo: #800080; /* Roxo para detalhes e destaques */   
  --cor-verde: #06e60d; /* Verde para botões e destaques */
  --fonte-principal: 'Segoe UI', sans-serif; /* Fonte principal do site */
  }

/* === RESET GERAL DE ESTILOS === */
* {
  margin: 0;                         /* Remove margens padrão de todos os elementos */
  padding: 0;                        /* Remove espaçamentos internos padrão */
  box-sizing: border-box;           /* Inclui padding e borda na largura e altura totais */
}

/* === ESTILO DO BODY === */
body {
  font-family: var(--fonte-principal); /* Aplica a fonte definida nas variáveis globais */
  background: linear-gradient(180deg, var(--cinza-preto) 0%, var(--cinza-preto) 40%, var(--cor-primaria) 100%);
  /* Fundo com degradê do cinza-preto para azul principal, de cima para baixo */
  color: var(--cinza-claro);        /* Cor clara para o texto, facilitando leitura */
  min-height: 100vh;                /* Altura mínima da página igual à altura da tela */
  overflow-x: hidden;               /* Evita rolagem horizontal indesejada */
}

/* === NAVBAR === */
.navbar {
  background: linear-gradient(180deg, var(--cinza-preto) 0%, var(--cinza-preto) 40%, var(--cor-primaria) 100%);
  /* Fundo degradê igual ao do body para continuidade visual */
  padding: 1rem 2rem;               /* Espaçamento interno: 1rem vertical e 2rem horizontal */
  display: flex;                    /* Utiliza flexbox para alinhar os itens da navbar */
  justify-content: space-between;  /* Espaça os itens nas extremidades */
  align-items: center;             /* Alinha verticalmente ao centro */
  color: var(--branco);            /* Cor do texto branco para contraste */
  flex-wrap: wrap;                 /* Permite quebra de linha se necessário */
}

/* Container interno da navbar */
.nav-container {
  display: flex;                   /* Flexbox para alinhar itens lado a lado */
  align-items: center;             /* Alinhamento vertical central */
  gap: 2rem;                      /* Espaço de 2rem entre os itens */
  width: 100%;                   /* Ocupa toda a largura disponível */
  flex-wrap: wrap;               /* Permite quebra de linha automática */
}

/* Área da logo */
.nav-logo {
  display: flex;                  /* Flex para alinhar ícone e texto lado a lado */
  align-items: center;             /* Alinha verticalmente ao centro */
  gap: 0.8rem;                    /* Espaço de 0.8rem entre ícone e texto */
}

/* Menu de navegação */
nav {
  margin-left: auto;             /* Empurra o menu para o lado direito */
  display: flex;                 /* Flexbox para alinhar links horizontalmente */
  gap: 1.5rem;                   /* Espaço de 1.5rem entre os links */
  flex-wrap: wrap;               /* Permite quebra de linha se necessário */
}

/* Tamanho do ícone da logo */
.logo-icon {
  max-width: 60px;               /* Largura máxima do ícone é 60 pixels */
  height: auto;                  /* Altura ajusta proporcionalmente */
}

/* Tamanho do nome da logo */
.logo-nome {
  max-width: 220px;              /* Largura máxima do texto da logo */
  height: auto;                  /* Altura ajusta proporcionalmente */
}

/* Estilo dos links do menu */
nav a {
  color: var(--branco);          /* Cor branca para os links */
  text-decoration: none;         /* Remove sublinhado padrão dos links */
  font-weight: 600;              /* Fonte semi-negrito para destaque */
  transition: color 0.3s;        /* Transição suave na mudança de cor */
  white-space: nowrap;           /* Impede que o texto quebre em múltiplas linhas */
}

/* Cor dos links no hover */
nav a:hover {
  color: var(--cor-secundaria);  /* Altera cor para azul claro ao passar o mouse */
}

/* === BANNER === */
.banner {
  position: relative;            /* Define posicionamento relativo para elementos filhos */
  width: 100%;                   /* Ocupa 100% da largura do container pai */
  height: 350px;                 /* Altura fixa do banner */
  overflow: hidden;              /* Esconde conteúdos que ultrapassam o limite */
  display: flex;                 /* Flexbox para alinhar conteúdos internos */
  justify-content: center;       /* Centraliza conteúdo horizontalmente */
  align-items: center;           /* Centraliza conteúdo verticalmente */
  background: linear-gradient(to right, rgba(0, 119, 182, 0.85), rgba(2, 62, 138, 0.85));
  /* Fundo com degradê azul semi-transparente da esquerda para a direita */
  color: var(--branco);          /* Texto branco dentro do banner */
  text-align: center;            /* Centraliza o texto */
  border-bottom: 4px solid var(--cor-primaria); /* Linha inferior decorativa */
  border-radius: 0 0 25px 25px; /* Cantos inferiores arredondados */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra suave para destaque */
}
/* === EFEITO DE SUBLINHADO NOS LINKS DA NAVBAR === */
nav a {
  position: relative;               /* Permite posicionar o sublinhado com ::after */
  color: var(--branco);            /* Mantém cor branca padrão */
  text-decoration: none;           /* Remove sublinhado nativo */
  font-weight: 600;                /* Negrito para destaque */
  transition: color 0.3s;          /* Transição suave para a cor */
  white-space: nowrap;             /* Evita quebra de linha nos links */
}

nav a::after {
  content: "";                     /* Cria elemento visual vazio */
  position: absolute;             /* Posiciona abaixo do link */
  left: 0;                         /* Início do sublinhado */
  bottom: -4px;                    /* Um pouco abaixo do texto */
  width: 0%;                       /* Começa invisível */
  height: 2px;                     /* Espessura da linha */
  background-color: transparent;  /* Cor inicial transparente */
  transition: width 0.3s ease, background-color 0.3s ease; /* Suaviza animação */
}

/* Hover: mostra sublinhado com cinza claro */
nav a:hover::after {
  width: 100%;                     /* Expande o sublinhado */
  background-color: var(--cinza-claro); /* Cor do hover */
}

/* Página ativa: sublinhado rosa escuro fixo */
nav a.ativo::after {
  width: 100%;                          /* Mantém sublinhado visível */
  background-color: var(--cor-verde-agua)        /* Rosa escuro fixo para ativo */
}

/* Página ativa: cor do texto também muda se quiser destaque extra */
nav a.ativo {
  color:var(--cor-verde);
}

/* Imagem de fundo do banner */
.banner-img {
  position: absolute;            /* Posição absoluta para ficar atrás do conteúdo */
  top: 0;                       /* Alinha ao topo do banner */
  left: 0;                      /* Alinha à esquerda do banner */
  width: 100%;                  /* Largura total do banner */
  height: 350px;                /* Altura fixa igual ao banner */
  object-fit: cover;            /* Cobre todo espaço, cortando se necessário */
  z-index: 0;                   /* Coloca atrás do conteúdo */
  opacity: 0.6;                 /* Transparência para deixar o texto legível */
}

/* Container do conteúdo do banner */
.banner-conteudo {
  position: relative;           /* Posicionamento relativo para sobrepor imagem */
  display: flex;               /* Flexbox para organizar conteúdo em coluna */
  flex-direction: column;      /* Itens alinhados verticalmente */
  align-items: center;         /* Centraliza itens horizontalmente */
  z-index: 1;                  /* Sobrepõe a imagem do banner */
}

/* Logo dentro do banner */
.banner-logo {
  max-width: 220px;            /* Limita o tamanho máximo da logo */
  margin-bottom: 15px;         /* Espaço abaixo da logo */
}

/* Título principal do banner */
.banner h1 {
  font-size: 2.4rem;           /* Tamanho grande do título */
  font-weight: 600;            /* Negrito para destaque */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Sombra para facilitar leitura */
  margin: 0;                   /* Remove margem padrão */
}

/* Slogan abaixo do título */
.slogan {
  font-size: 1.2rem;           /* Tamanho menor para o slogan */
  margin-top: 8px;             /* Espaço acima do slogan */
  font-weight: 400;            /* Peso normal da fonte */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Sombra leve para destaque */
}

/* === SEÇÃO DE CONTEÚDO === */
.conteudo {
  padding: 2rem 1rem;          /* Espaçamento interno: vertical 2rem e horizontal 1rem */
  max-width: 960px;            /* Limita largura máxima para facilitar leitura */
  margin: 2rem auto 4rem;      /* Margens: 2rem cima, auto horizontal (centraliza), 4rem baixo */
  background: linear-gradient(180deg, var(--cinza-preto) 0%, var(--cinza-preto) 50%, var(--cor-primaria) 100%);
  /* Fundo degradê do cinza-preto para azul principal */
  color: var(--cinza-claro);   /* Cor clara para o texto */
  border-radius: 12px;         /* Bordas arredondadas */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Sombra suave para destaque */
  box-sizing: border-box;      /* Inclui padding e borda no tamanho total */
  overflow-wrap: break-word;   /* Quebra palavras longas para evitar overflow */
  word-break: break-word;      /* Complementa a quebra de palavras */
}

/* Títulos dentro do conteúdo */
.conteudo h2 {
  margin-bottom: 1rem;         /* Espaço abaixo do título */
  color: var(--cor-secundaria); /* Cor azul clara para destaque */
  text-align: center;          /* Centraliza o texto do título */
}

/* Grade para os produtos */
.produtos-grid {
  display: grid;               /* Layout em grade para os produtos */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* Colunas responsivas de tamanho mínimo 160px */
  gap: 1.5rem;                /* Espaço entre os produtos */
  margin-top: 1rem;           /* Espaço acima da grade */
  justify-items: center;      /* Centraliza os itens dentro das células da grade */
  overflow: hidden;           /* Evita que conteúdo ultrapasse a área da grade */
}

/* Cards dos produtos */
.produto-home {
  text-align: center;          /* Centraliza o conteúdo do card */
  padding: 1rem;              /* Espaçamento interno do card */
  border-radius: 8px;         /* Bordas arredondadas para suavidade */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra para destaque */
  transition: transform 0.3s;  /* Animação suave para transformações */
  overflow: hidden;           /* Evita conteúdo excedente */
}

/* Animação hover nos produtos */
.produto-home:hover {
  transform: translateY(-5px); /* Levanta o card quando o mouse passa por cima */
}

/* Imagem dos produtos */
.produto-home img {
  width: 100%;                /* Imagem ocupa toda largura do container */
  height: auto;               /* Mantém proporção da imagem */
  max-width: 150px;           /* Limita a largura máxima para controle */
  margin-bottom: 0.5rem;      /* Espaço abaixo da imagem */
  display: block;             /* Remove espaço em branco abaixo da imagem */
  object-fit: contain;        /* Mantém proporção sem cortar a imagem */
}

/* Texto dos produtos */
.produto-home p {
  font-weight: 500;           /* Peso médio da fonte para o texto */
  color: var(--cinza-claro); /* Cor clara para o texto */
}

/* === RODAPÉ === */
.rodape {
  background: linear-gradient(180deg, var(--cinza-preto) 0%, var(--cinza-preto) 40%, var(--cor-primaria) 100%);
  /* Fundo degradê escuro para azul */
  color: var(--branco);        /* Texto branco para contraste */
  text-align: center;          /* Centraliza o conteúdo do rodapé */
  padding: 2rem 1rem;          /* Espaçamento interno vertical e horizontal */
  box-sizing: border-box;      /* Inclui padding e borda no tamanho total */
  width: 100%;                /* Ocupa toda a largura disponível */
  max-width: 100vw;           /* Não ultrapassa a largura da viewport */
  overflow-x: hidden;         /* Evita rolagem horizontal no rodapé */
  flex-shrink: 0;             /* Não permite que o rodapé encolha */
  display: flex;              /* Usa flexbox para o layout interno */
  flex-direction: column;     /* Itens alinhados em coluna */
  justify-content: center;    /* Centraliza verticalmente */
  align-items: center;        /* Centraliza horizontalmente */
}

/* Logo no rodapé */
.rodape img {
  max-width: 180px;            /* Limita a largura da imagem da logo */
  margin-bottom: 1rem;         /* Espaço abaixo da logo */
  height: auto;                /* Mantém proporção da imagem */
}

/* Seção de destaques */
.conteudo.destaques {
  background: linear-gradient(180deg, var(--cor-escura) 0%, var(--cor-primaria) 100%);
  /* Fundo degradê azul escuro para azul principal */
  color: var(--cinza-claro);  /* Texto claro para destaque */
}

/* Estilo exclusivo dos produtos na home com degradê */
.produto-home {
  text-align: center;          /* Centraliza conteúdo do produto */
  padding: 1rem;              /* Espaçamento interno */
  margin: 0.5rem;             /* Espaçamento externo entre cards */
  border-radius: 8px;         /* Bordas arredondadas */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); /* Sombra para destaque */
  transition: transform 0.3s;  /* Animação suave para transformações */
  overflow: hidden;           /* Evita que conteúdo extrapole o card */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, var(--cor-primaria) 100%);
  /* Fundo degradê do preto transparente para azul */
  color: var(--branco);       /* Texto branco para contraste */
}

/* Hover nos produtos home */
.produto-home:hover {
  transform: translateY(-7px); /* Levanta o card com efeito hover */
}

/* === ÍCONES DE REDES SOCIAIS COM TAMANHO MENOR === */
.social-links {
  display: flex;              /* Flexbox para alinhar os ícones horizontalmente */
  justify-content: center;    /* Centraliza os ícones na linha */
  gap: 1.5rem;               /* Espaçamento entre os ícones */
  margin-top: 1rem;           /* Espaço acima da seção de ícones */
}

.social-link {
  color: var(--branco);       /* Cor branca para os links das redes sociais */
  font-size: 1.1rem;          /* Tamanho da fonte do texto/link */
  text-decoration: none;      /* Remove sublinhado padrão */
  display: flex;              /* Flex para alinhar ícone e texto */
  align-items: center;        /* Alinha verticalmente os itens */
  gap: 0.5rem;                /* Espaço entre ícone e texto */
  transition: color 0.3s ease; /* Transição suave na mudança de cor */
}

/* Cor no hover do link social */
.social-link:hover {
  color: var(--cor-secundaria); /* Muda para azul claro ao passar o mouse */
}

/* Ícone dentro do link social */
.social-link i {
  font-size: 1.2rem;          /* Tamanho do ícone menor e mais sutil */
  filter: drop-shadow(0 0 5px var(--cor-secundaria)); /* Sombra azul leve no ícone */
  transition: filter 0.3s ease, transform 0.3s ease; /* Transição suave para filtro e tamanho */
}

/* Hover no ícone social */
.social-link:hover i {
  filter: drop-shadow(0 0 8px var(--cor-primaria)); /* Sombra azul mais intensa */
  transform: scale(1.2);       /* Aumenta o tamanho do ícone levemente */
}
/* === MODAL GERAL PARA VÍDEOS OU CONTEÚDOS === */

/* Modal oculto por padrão, cobre a tela toda */
.modal {
  display: none; /* Modal escondido inicialmente */
  position: fixed; /* Fixa o modal na tela */
  z-index: 1000; /* Sobrepõe quase tudo na página */
  left: 0; /* Começa no canto esquerdo */
  top: 0; /* Começa no topo da tela */
  width: 100%; /* Ocupa toda a largura da viewport */
  height: 100%; /* Ocupa toda a altura da viewport */
  overflow: auto; /* Permite rolar o conteúdo se ultrapassar a altura */
  background-color: rgba(0, 0, 0, 0.7); /* Fundo preto translúcido */
}

/* Conteúdo do modal: caixa branca centralizada */
.modal-content {
  background-color: var(--branco); /* Usa branco puro do root */
  margin: 5% auto; /* Espaço vertical e centraliza horizontalmente */
  padding: 20px; /* Espaçamento interno confortável */
  border-radius: 8px; /* Bordas suavemente arredondadas */
  max-width: 700px; /* Largura máxima do modal */
  position: relative; /* Para posicionar o botão fechar dentro */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Sombra suave para destaque */
  font-family: var(--fonte-principal); /* Fonte global do site */
  color: var(--cor-primaria-escura); /* Texto com azul escuro para legibilidade */
}

/* Botão fechar (X) do modal */
.modal-close {
  color: var(--cinza-escuro); /* Cor cinza escura da paleta */
  position: absolute; /* Posicionado relativamente ao .modal-content */
  right: 15px; /* Distância da borda direita */
  top: 10px; /* Distância do topo */
  font-size: 28px; /* Tamanho grande para visibilidade */
  font-weight: bold; /* Negrito para destaque */
  cursor: pointer; /* Cursor muda para mãozinha */
  user-select: none; /* Impede seleção acidental do X */
  transition: color 0.3s ease; /* Transição suave ao passar o mouse */
}

/* Cor do botão fechar muda para azul ao passar o mouse */
.modal-close:hover {
  color: var(--cor-primaria); /* Cor azul principal da marca */
}

/* Estilo do iframe de vídeo dentro do modal para ser responsivo */
.modal-video iframe {
  width: 100%; /* Ocupa toda a largura do container */
  height: 315px; /* Altura padrão para vídeos embutidos */
  border: none; /* Remove borda padrão */
  border-radius: 8px; /* Bordas arredondadas para combinar com modal */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra leve */
}