/* Correções de legibilidade do site MELCE — 03/09/2026, atualizado 10/09/2026,
   18/09/2026
   1) Menu mobile transbordando a tela (header com flex-wrap: nowrap)
   2) Texto do hero (Início) sobre a foto, com pouco contraste e fonte pequena
   3) Seção "Temos paixão por energia renovável..." (Contate-nos) com texto
      branco sobre fundo claro, quase ilegível
   4) Título das páginas internas (Equipe, Galeria, Contate-nos...) sobreposto
      pelos botões do header no mobile, causado pela correção (1)
   6) Site "parado": botões e cartões trocavam de sombra/cor sem transição
   7) Grade "Equipe" (Colaboradores e Parceiros) sem sombra, cantos retos e
      nenhuma reação ao passar o mouse
   8) Grade da Galeria: miniaturas quadradas coladas, sem sombra nem cantos
      arredondados — pareciam uma planilha de fotos
*/

/* 1) Menu mobile: permite quebrar linha em vez de estourar a viewport */
@media (max-width: 767px) {
  header {
    flex-wrap: wrap !important;
  }
  header nav {
    width: 100%;
  }
  header .kv-ee-menu.kv-ee-menu-item-wrapper {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    gap: 6px 16px;
  }
  header .kv-ee-menu.kv-ee-menu-item-wrapper li {
    list-style: none;
  }
  header .kv-ee-custom-header-buttons {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  header,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* 4) O header é position:absolute e flutua sobre o conteúdo; logo depois de
   <header>, cada página tem uma <section class="... navigation-3"> vazia,
   usada só como espaçador para empurrar o resto do conteúdo para baixo do
   header. A altura desse espaçador vem fixada inline (height:144px), medida
   uma única vez pelo builder para o header original de 1 linha — ela não
   reage à 3ª linha (botões) que a correção (1) passou a permitir no mobile,
   então sobra pouco espaço e o título da página nasce por baixo dos botões.
   Força a altura do espaçador para as duas faixas observadas (com e sem os
   botões numa linha própria). */
@media (max-width: 400px) {
  section.navigation-3 {
    height: 216px !important;
  }
}
@media (min-width: 401px) and (max-width: 767px) {
  section.navigation-3 {
    height: 186px !important;
  }
}

/* 2) Início: um único painel suave atrás de TODO o bloco de texto (título +
   parágrafo), em vez de uma caixa isolada só no parágrafo. O degradê some
   gradualmente à direita para não cortar a ilustração da turbina, e o
   arredondamento + sombra dão um acabamento de "vidro", não de post-it. */
.background-id_0m18 .kv-ee-row {
  position: relative;
  padding: 36px 32px;
}
.background-id_0m18 .kv-ee-row::before {
  content: "";
  position: absolute;
  inset: -20px;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(255, 255, 255, 0.92) 58%,
    rgba(255, 255, 255, 0.4) 82%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(6px);
  border-radius: 28px;
  box-shadow: 0 24px 60px rgba(15, 30, 70, 0.15);
  z-index: 0;
}
.background-id_0m18 .kv-ee-row > * {
  position: relative;
  z-index: 1;
}
.background-id_0m18 .kv-ee-cover-description {
  font-size: 1.05rem;
  line-height: 1.65;
}
.background-id_0m18 .kv-ee-cover-subtitle {
  font-size: 1.15rem;
}

/* A coluna do hero usa .kv-ee-col-lg-6{max-width:50%} sem nenhuma media
   query no CSS original do site — ou seja, ela força 50% de largura mesmo
   no celular, e o texto vaza para fora da tela. Corrige empilhando em
   largura total abaixo de 768px. */
@media (max-width: 767px) {
  .background-id_0m18 .kv-ee-row {
    display: block !important;
    padding: 24px 20px !important;
  }
  .background-id_0m18 .kv-ee-row > div {
    max-width: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .background-id_0m18 .kv-ee-row::before {
    inset: -12px;
  }
  /* .kv-ee-section-description{max-width:540px} também não tem media query
     no CSS original — 540px é mais largo que a própria tela no celular. */
  .background-id_0m18 .kv-ee-section-description {
    max-width: 100% !important;
  }
}

/* 3) Contate-nos: véu escuro atrás da seção de texto branco para restaurar
   o contraste (antes: texto branco sobre fundo/foto claros) */
.background-id_0m20 .kv-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 48, 0.55);
}

/* 5) Rodapé: .kv-ee-logo-group{max-width:50%} limita a coluna da marca a
   metade da largura do rodapé, sem media query — no mobile isso é estreito
   demais e a palavra "MELCE" quebra em duas linhas ("MEL"/"CE"). */
.kv-ee-logo-group .kv-ee-logo-title {
  white-space: nowrap;
}
@media (max-width: 767px) {
  .kv-ee-logo-group {
    max-width: 100%;
  }
}

/* 6) Transições leves para as "caixas" do site inteiro: botões e cartões
   (newsletter na Início, formulário da Contate-nos) trocavam de aparência
   instantaneamente ao passar o mouse/focar, o que dava uma sensação de site
   estático. Duração curta (200–300ms) para ficar perceptível sem exagerar. */
.kv-ee-button,
.kv-ee-content-card,
.kv-ee-default-card,
.kv-ee-form-control {
  transition: transform 0.2s ease, box-shadow 0.25s ease,
    background-color 0.25s ease, border-color 0.25s ease;
}
.kv-ee-button:hover {
  transform: translateY(-2px);
}
.kv-ee-content-card:hover,
.kv-ee-default-card:hover {
  box-shadow: 0 16px 36px rgba(15, 30, 70, 0.12);
}
.kv-ee-form-control:focus {
  box-shadow: 0 0 0 3px rgba(61, 207, 142, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .kv-ee-button,
  .kv-ee-content-card,
  .kv-ee-default-card,
  .kv-ee-form-control {
    transition: none;
  }
}

/* 7) Equipe: a seção "Nossos Colaboradores e Parceiros" é uma única lista
   com 6 itens (2 fotos da equipe + 4 logos de parceiros: IFCE, SEBRAE,
   NUVEN, EMBRAPII), todos renderizados como linhas horizontais foto+texto
   com a MESMA foto cortada (cover) em proporção retrato — o que fazia os
   logos ficarem espremidos/cortados e a seção parecer jogada, sem nenhuma
   organização. Reconstruído como um grid de cartões de 2 colunas: como a
   lista sempre tem 2 fotos de equipe seguidas de 4 logos, 2 colunas fixas
   fazem a 1ª linha ser só a equipe e a 2ª/3ª linha só os parceiros —
   sem precisar alterar o HTML gerado pelo site builder. */
.temate40 .kv-ee-list-control .kv-ee-row[data-type="list"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0;
}
@media (min-width: 576px) {
  .temate40 .kv-ee-list-control .kv-ee-row[data-type="list"] {
    grid-template-columns: repeat(2, 1fr);
  }
}
.temate40 .kv-ee-item {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15, 30, 70, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.temate40 .kv-ee-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(15, 30, 70, 0.16);
}
.temate40 .kv-ee-col-50:first-child {
  flex: none;
  width: 100%;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.temate40 .kv-ee-content-image {
  width: 100% !important;
  padding-bottom: 100% !important;
  border-radius: 0;
  box-shadow: none;
  background-color: #eef1f7;
  transition: transform 0.4s ease;
}
.temate40 .kv-ee-item:nth-child(-n + 2):hover .kv-ee-content-image {
  transform: scale(1.06);
}
.temate40 .kv-ee-col-50.kv-ee-text-space {
  flex: none;
  width: 100%;
  padding: 18px 20px 22px;
}
.temate40 .kv-ee-text-space .kv-ee-title,
.temate40 .kv-ee-text-space .kv-ee-description {
  margin-left: 0 !important;
  text-align: center;
}
.temate40 .kv-ee-text-space .kv-ee-title {
  margin-top: 0 !important;
}
/* Parceiros (itens 3 a 6): logo em fundo claro com "contain" (marca
   inteira visível, sem cortes) e preto-e-branco -> colorido no hover, um
   tratamento visualmente diferente das fotos de pessoas para deixar claro
   que é outro grupo de conteúdo. Rótulo indica o início do grupo. */
.temate40 .kv-ee-item:nth-child(3) {
  position: relative;
}
@media (min-width: 576px) {
  .temate40 .kv-ee-item:nth-child(3),
  .temate40 .kv-ee-item:nth-child(4) {
    margin-top: 20px;
  }
}
.temate40 .kv-ee-item:nth-child(3)::before {
  content: "Parceiros institucionais";
  position: absolute;
  top: -26px;
  left: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(20, 34, 73, 0.55);
  white-space: nowrap;
}
.temate40 .kv-ee-item:nth-child(n + 3) .kv-ee-content-image {
  box-sizing: border-box;
  background-color: #fff;
  background-size: contain !important;
  border-bottom: 1px solid rgba(15, 30, 70, 0.08);
  filter: grayscale(1);
  opacity: 0.85;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.temate40 .kv-ee-item:nth-child(n + 3):hover .kv-ee-content-image {
  filter: grayscale(0);
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .temate40 .kv-ee-item,
  .temate40 .kv-ee-content-image {
    transition: none;
  }
}

/* 8) Galeria: miniaturas quadradas coladas umas às outras, sem cantos
   arredondados nem sombra — pareciam uma planilha, não uma galeria. O zoom
   da foto ao passar o mouse já existia no tema original (mantido); aqui
   arredonda o quadro (".kv-ee-image-container" já tem overflow:hidden, então
   o zoom continua "preso" dentro do canto arredondado) e adiciona sombra +
   leve elevação do quadro inteiro. */
.yilugu00 .kv-ee-image-container {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 30, 70, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yilugu00 .kv-ee-image-container:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15, 30, 70, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .temate40 .kv-ee-content-image,
  .yilugu00 .kv-ee-image-container {
    transition: none;
  }
}