/*
  Arquivo: style.css
  Descrição: Estilos visuais do site da INDFOL
  Autor: Ewerton / INDFOL
*/


/* Formatação base */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
}
/* Término da formatação base */


/* Faixa preta com redes sociais */
.top-bar {
  height: 40px;
  background-color: #000;
  color: #fff;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  transition: top 0.4s;
}

.top-bar a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
  transition: color 0.3s;
}

.top-bar a:hover {
  color: #66ccff;
}

.top-bar.hide {
  top: -60px;
}

.topo-fixo {
  position: fixed;
  width: 100%;
  left: 0;
  top: 40px;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: linear-gradient(to right, #cce0ff, #ccf2cc);
  transition: top 0.4s;
}

.topo-fixo.sobe {
  top: 0 !important;
  transition: top 0.4s;
}
/* Término da formatação da barra preta */


/* Ajusta o topo-fixo para todos os elementos internos ocuparem a largura */
header,
/* Largura apenas para o header e a barra azul do topo */
header { 
  width: 100vw; 
  box-sizing: border-box; 
}

/* Só o menu azul do topo (não afeta o nav do drawer) */
.topo-fixo > nav.site-nav {
  width: 100%;
  box-sizing: border-box;
}

/* Garante que o nav interno do drawer não “estoure” */
.drawer-nav { width: auto; }

/* Garante que o conteúdo do site não suma atrás do topo */
body {
  padding-top: 207px;  /* ajuste conforme a soma da altura do topo-fixo e top-bar */
}

header {
  background: linear-gradient(to right, #cce0ff, #ccf2cc);
  padding: 20px 230px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

header img {
  max-width: 300px;
  height: auto;
}

.contato {
  text-align: right;
  font-size: 14px;
  line-height: 1.8;
}

.contato a {
  color: #003366;
  text-decoration: none;
}

.contato i {
  margin-right: 8px;
  color: #003366;
}

.contato a:hover i,
.contato a:hover {
  color: #006600;
}

.telefone {
  font-weight: bold;
  font-size: 20px;
}

.telefone i {
  font-size: 20px;
  vertical-align: middle;
  margin-right: 6px;
  }
  
  
  @media (max-width: 1320px) {
    header .contato {
      display: none !important;
    }
  
    header {
      justify-content: center;
      padding: 16px 16px;
    }


}
/* Término da formatação do cabeçalho e a barra preta */


/* Formatação do menu */
/* ===== VARIÁVEIS DO MENU ===== */
:root {
  --menu-bg: #003366;
  /* Fundo da barra e do título "Menu" no mobile */
  --menu-fg: #fff;
  /* Texto branco no desktop e no topo do mobile */
  --link-hover: #66ccff;
  /* Cor no hover do desktop */
  --mobile-text: #666;
  /* Texto dos itens no mobile */
  --divider: #666;
  /* Linhas divisórias no mobile */
  --overlay: rgba(0, 0, 0, .45);
  /* Escurecimento do fundo ao abrir o menu */
}

/* ===== NAV DESKTOP ===== */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--menu-bg);
  width: 100%;
  padding: 3px 0px;
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

ul.menu-desktop {
  list-style: none;
  display: flex;
  gap: 40px;
  margin: 0;
  padding: 0;
}

ul.menu-desktop>li>a {
  color: var(--menu-fg);
  font-weight: 700;
  font-size: 16px;
  display: block;
  padding: 6px 0;
}

ul.menu-desktop>li>a:hover {
  color: var(--link-hover);
}

/* Dropdown do "Produtos" (desktop, abre no hover) */
li.has-sub {
  position: relative;
}

li.has-sub:hover>ul.submenu-desktop {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%, 0);
}

ul.submenu-desktop {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  background: #003366;
  border-radius: 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
  min-width: 220px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
  opacity: 0;
  visibility: hidden;
  transition: .2s ease;
  font-size: 14px;
  overflow: hidden;
}

ul.submenu-desktop a {
  padding: 10px 16px;
  display: block;
  white-space: nowrap;
  color: #fff;
}

ul.submenu-desktop a:hover {
  background: #f3f6fb;
  color: #003366;
}

ul.submenu-desktop li+li {
  border-top: 1px solid #fff;
}

/* ===== BOTÃO HAMBÚRGUER (≤710px) ===== */
.menu-toggle {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  /* aparece no mobile */
  border: 0;
  background: #fff;
  color: transparent;
  width: 44px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  outline-offset: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.menu-toggle .bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 3px;
  background: var(--menu-bg);
  border-radius: 2px;
  transform-origin: center;
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}

.menu-toggle .bar:nth-child(1) {
  top: 10px;
}

.menu-toggle .bar:nth-child(2) {
  top: 16.5px;
}

.menu-toggle .bar:nth-child(3) {
  top: 23px;
}

.menu-toggle.is-open .bar:nth-child(1) {
  top: 16.5px;
  transform: rotate(45deg);
}

.menu-toggle.is-open .bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .bar:nth-child(3) {
  top: 16.5px;
  transform: rotate(-45deg);
}

/* ===== DRAWER MOBILE ===== */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
  z-index: 10000;
}

.drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(80vw, 360px);
  transform: translateX(-100%);
  background: #fff;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  transition: transform .28s ease;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px rgba(0, 0, 0, .3);
}

.drawer-header {
  background: var(--menu-bg);
  color: var(--menu-fg);
  text-align: center;
  font-weight: 800;
  letter-spacing: .3px;
  padding: 14px 16px;
}

.drawer-nav {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-list>li {
  border-bottom: 1px solid var(--divider);
}

.drawer-list>li>a,
.drawer-list>li>button.sub-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  background: #fff;
  color: var(--mobile-text);
  border: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

/* Setinha do submenu (no canto oposto) */
.chev {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--mobile-text);
  border-bottom: 2px solid var(--mobile-text);
  transform: rotate(-45deg);
  transition: transform .2s ease;
  margin-left: 12px;
}

.sub-toggle[aria-expanded="true"] .chev {
  transform: rotate(45deg);
}

/* Sublista com animação de altura */
.sublist {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  background: #fff;
}

.sublist a {
  display: block;
  padding: 14px 32px;
  color: var(--mobile-text);
}

.sublist li {
  border-top: 1px solid #e5e5e5;
}

/* Estados "aberto" */
.drawer.is-open {
  transform: translateX(0);
}

.drawer-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Remover sublinhado dos menus (desktop + mobile + submenu) */
nav.site-nav a,
ul.menu-desktop>li>a,
ul.submenu-desktop a,
.drawer-list>li>a,
.drawer-list>li>button.sub-toggle,
.sublist a,
nav.site-nav a:hover,
nav.site-nav a:focus,
.drawer-list a:hover,
.drawer-list a:focus,
.sub-toggle:hover,
.sub-toggle:focus,
.sublist a:hover,
.sublist a:focus,
.sublist a:active {
  text-decoration: none !important;
}

/* Remover rolagem horizontal no menu hambúrguer */
.drawer,
.drawer-nav {
  overflow-x: hidden;
  /* esconde o scroll horizontal */
}

.drawer-nav {
  width: 100%;
  /* garante que o conteúdo não passe da largura do drawer */
  box-sizing: border-box;
}

/* Breakpoint */
@media (max-width:710px) {
  .menu-toggle {
    display: block;
  }

  ul.menu-desktop {
    display: none;
  }
}
/* Término da formatação do menu */


/* Formatação do swiper */
.swiper-container {
  width: 100%;
  height: 40vh;
  margin-top: -1px;
  position: relative;
}

.swiper-slide {
  position: relative;
  text-align: center;
  cursor: grab;
}

.swiper-slide:active {
  cursor: grabbing;
}

.swiper-slide img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.slide-info.centralizado {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  left: 10%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 90vw;
  z-index: 2;
}

/* Formatação do título */
.slide-titulo {
  font-size: 2rem;
  color: #003366;
  font-weight: 600;
  margin: 0 0 10px 0;
  letter-spacing: -1px;
  line-height: 1.08;
  text-align: left;
  text-shadow: 0 2px 12px #fff8, 0 1px 1px #3333;
}

/* Formatação da descrição */
.slide-descricao {
  font-size: 1.2rem;
  color: #666;
  margin: 0 0 18px 0;
  line-height: 1.24;
  max-width: 480px;
  text-align: left;
  text-shadow: 0 1px 8px #fff7;
}

/* Formatação do botão VER PRODUTO */
.slide-botao {
  background: red;
  color: #fff;
  padding: 12px 20px;
  font-size: 12px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
  margin-top: 10px;
  display: inline-block;
}

.slide-botao:hover {
  background: #003366;
  color: #fff;
}

/* Responsivo */
@media (max-width: 1200px) {

  .swiper-container,
  .swiper-slide img {
    height: 32vh;
  }

  .slide-titulo {
    font-size: 1.5rem;
  }

  .slide-descricao {
    font-size: 1rem;
    margin-bottom: 12px;
    max-width: 330px;

  }

  .slide-info.centralizado {
    padding: 0 8px;
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    /* mantém à esquerda no desktop */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 90vw;
    z-index: 2;
  }
}

/* --- MOBILE: centralizar título/descrição e aplicar fundo + cor --- */
@media (max-width: 800px) {

  /* Centraliza o bloco inteiro no slide */
  .slide-info.centralizado {
    left: 50%;
    transform: translate(-50%, -50%);
    /* centraliza X e Y */
    align-items: center;
    text-align: center;
    max-width: 92%;
    padding: 16px 20px;
    background: rgba(0, 51, 102, 0.72);
    max-width: 100%;
  }

  /* Título e descrição sem fundos próprios (deixa o card trabalhar) */
  .slide-titulo {
    color: #fff;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    text-align: center;
  }

  .slide-descricao {
    color: #e9f2ff;
    /* um branco-azulado mais suave */
    margin: 6px 0 0 0;
    line-height: 1.5;
    max-width: none;
    text-shadow: none;
    text-align: center;
    padding: 0px 50px 0px 50px;

  }

  /* Botão centralizado logo abaixo */
  .slide-botao {
    display: inline-block;
    margin-top: 10px;
  }

  /* Altura um pouco maior no mobile para caber o bloco centralizado com conforto */
  .swiper-container,
  .swiper-slide img {
    height: 44vh;
  }
}

/* Formatação da seta do swiper */
.swiper-button-next,
.swiper-button-prev {
  background-color: black;
  padding: 5px;
  border-radius: 10%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: 0.3s;
}

/* Ao passar o mouse */
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 1;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  color: white !important;
  font-size: 20px !important;
}
/* Término da formatação do swiper */


/* Formatação 'quem somos' */
.quem-somos {
  padding: 20px 20px;
  background-color: #fff;
}

.quem-somos-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 0px;
  padding: 0;
}

.quem-somos-texto {
  flex: 1;
  min-width: 300px;
  margin-top: -50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  text-align: center;
}

.quem-somos-texto h2 {
  color: #003366;
  font-size: 32px;
  margin-bottom: 0px;
}

.quem-somos-texto p {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.3;
}

.botao-sobre {
  display: inline-block;
  background-color: #003366;
  color: #fff;
  padding: 12px 24px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s;
}

.botao-sobre:hover {
  background-color: #0055a5;
}

.quem-somos-imagem {
  flex: 1;
  min-width: 500px;
  text-align: center;
}

.quem-somos-imagem img {
  max-width: 100%;
  max-width: 450px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
}

/*Responsivo */
@media (max-width: 900px) {
  .quem-somos-container {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 8px;
  }

  .quem-somos-imagem {
    min-width: 0;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }

  .quem-somos-imagem img {
    width: 100%;
    max-width: 350px;
    height: auto;
  }

  .quem-somos-texto {
    min-width: 0;
    width: 100%;
    margin-top: 0;
    align-items: center;
    text-align: center;
  }
}
/* Término da formatação 'quem somos' */


/* Formatação produtos em destaque */
.produtos-destaque {
  position: relative;
  padding: 20px 20px 20px 20px;
  background: url("imagens/fundo-produtos-destaque.png") center center/cover no-repeat;
  text-align: center;
  overflow: hidden;
}

.produtos-destaque::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 0;
}

.produtos-destaque h2 {
  font-size: 32px;
  margin-top: -5px;
  color: #003366;
  margin-bottom: 20px;
  position: relative;
}

.produtos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.produto-card {
  background-color: #fff;
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(0, 51, 102, 0.05);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.3s;
}

.produto-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s;
}

.produto-card h3 {
  margin: 0;
  padding: 16px 0 10px 0;
  font-size: 13px;
  color: #666666;
  font-weight: bold;
}

.produto-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background: linear-gradient(120deg, #cce0ff99 0%, #ccf2ccbb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.35s;
  z-index: 2;
}

.produto-card:hover img {
  transform: scale(1.07);
}

.produto-card:hover .produto-overlay {
  opacity: 1;
}

.botao-vermais {
  background: red;
  color: #fff;
  font-weight: bold;
  padding: 12px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
  transition: background 0.3s;
  border: none;
  outline: none;
}

.botao-vermais:hover {
  background: #003366;
  color: #fff;
}

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

@media (max-width: 560px) {
  .produtos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Término da formatação 'Produtos' */


/* Formatação nossos cliente */
.clientes {
  background: #fff;
  padding: 28px 0 36px;
  text-align: center;
  cursor: grab;
}

.clientes h2 {
  margin: 0 0 16px;
  color: #003366;
  font-size: 32px;
  margin-bottom: 20px;
}

.clientes-swiper {
  width: 100%;
  max-width: 100%;
  padding: 12px 12px;
}

.clientes-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clientes:active {
cursor: grabbing;
}

.logo-box {
  width: 100%;
  max-width: 150px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  margin-bottom: 15px;

}

.cliente-logo {
  width: auto !important;
  height: 100% !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  cursor: pointer;
  transition: transform 0.5s ease-in-out, filter 0.4s ease-in-out;
}

.cliente-logo:hover {
  filter: none;
  transform: scale(1.08);
  cursor: grab;
}

.cliente-logo:active {
cursor: grabbing;
}

@media (max-width: 1024px) {
  .logo-box {
    height: 88px;
  }
}

@media (max-width: 640px) {
  .logo-box {
    height: 72px;
  }
}
/* Término da formatação nossos clientes */







/* Formatação do 'Contato' */
.contato-bloco {
  max-width: 550px;
  margin: -70px auto -70px 250px;
  padding: 20px 20px;
  background: #003366;
  border-radius: 16px;
  box-shadow: 0px 0px 15px #edefef;

}

.contato-titulo {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
  margin-top: -5px;
}

.contato-formulario {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 15px;
}

.contato-formulario input,
.contato-formulario textarea {
  font-size: 15px;
  padding: 15px;
  border: 1.5px solid #00336644;
  border-radius: 3px;
  outline: none;
  font-family: inherit;
  background: #f5f5f5;
  transition: border 0.2s, box-shadow 0.2s;
  resize: none;
  color: #003366;
}

.contato-formulario input:focus,
.contato-formulario textarea:focus {
  border: 2px solid red;
  box-shadow: 0 2px 12px #00336622;
  background: #fff;
}

.contato-formulario textarea {
  min-height: 130px;
  max-height: 260px;
}

.botao-enviar {
  background: red;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 10px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.22s, color 0.22s, transform 0.15s;
}
.botao-enviar:hover {
  background: rgba(255, 0, 0, 0.95);
  color: #fff;
  transform: scale(1.009);
}

/* Responsivo */
@media (max-width: 1200px) {
  .contato-bloco {
    margin: -40px auto -40px auto;
    padding: 20px 20px;
  }
  .contato-titulo {
    font-size: 1.4rem;
  }
  .botao-enviar {
    font-size: 1rem;
    padding: 12px 0;
  }
}

.secao-contato {
  background: linear-gradient(to right, rgba(35, 66, 38, 0.8), rgba(0, 27, 64, 0.8)), url("imagens/fundo-contato.jpg") center center/cover no-repeat;
  padding: 1px 1px;
  position: relative;
  opacity: 0, 5;
  border-top: 50px solid #fff;
  border-bottom: 50px solid #fff;
}
/* Término da formatação 'Contato' */


/* Formatação do popup de confirmação de envio de email */
.popup-confirmacao {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.32);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.popup-confirmacao.show {
  display: flex;
  animation: fadein 0.3s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.popup-conteudo {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 28px #00336644;
  max-width: 340px;
  width: 95%;
  text-align: center;
  padding: 36px 24px 28px 24px;
  position: relative;
}

.popup-sucesso {
  font-size: 48px;
  color: #25D366;
  display: inline-block;
  margin-bottom: 12px;
}

.popup-conteudo h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #003366;
  font-size: 1.45rem;
  font-weight: bold;
}

.popup-conteudo p {
  color: #222;
  font-size: 1.1rem;
  margin-bottom: 18px;
}

.botao-fechar {
  background: #ffc107;
  color: #003366;
  font-weight: bold;
  font-size: 1.1rem;
  border: none;
  border-radius: 7px;
  padding: 12px 36px;
  cursor: pointer;
  transition: background 0.22s, color 0.22s, transform 0.15s;
  box-shadow: 0 2px 8px #ffc10730;
}

.botao-fechar:hover {
  background: #003366;
  color: #fff;
  transform: scale(1.06);
}
/* Término da formatação do popup */


/* Formatação do mapa GOOGLE */
.mapa-localizacao {
  background: #fff;
  padding: 20px 0px 0px 0px;
  text-align: center;
}

.titulo-mapa {
  margin-top: 25px;
  color: #003366;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 15px;
}

.mapa-container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 4px 24px #00336615;
}

.mapa-container iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  display: block;
}
/* Término da formatação do mapa */


/* Formatação do Rodapé */
.rodape {
  background: linear-gradient(to right, rgba(0, 27, 64, 0.95), rgba(35, 66, 38, 0.95)), url('imagens/fundo-rodape.jpg') center center/cover no-repeat;
  color: #fff;
  padding: 15px 0 0px 0;
  font-size: 1rem;
  box-shadow: 0 -2px 12px #00336625;
  position: relative;
}

.rodape-container.duas-colunas {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 48px;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
  padding: 0 24px;
}

.rodape-coluna {
  flex: 1 1 300px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.rodape-logo {
  margin-top: -15px;
  width: 250px;
  margin-bottom: 12px;

}

.rodape-texto {
  color: #e0e0e0;
  font-size: 0.97rem;
  margin: 0 0 16px 0;

}

.rodape-link {
  display: block;
  color: #e0e0e0;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 1rem;
  transition: color 0.2s;
  word-break: break-word;
}

.rodape-link i {
  margin-right: 8px;
}

.rodape-link:hover {
  color: #ffc107;
}

.rodape-redes {
  margin-top: 10px;
}

.rodape-redes a {
  color: #fff;
  font-size: 1.4rem;
  margin-right: 16px;
  transition: color 0.2s, transform 0.2s;
  display: inline-block;
}

.rodape-redes a:hover {
  color: #ffc107;
  transform: scale(1.16);
}

.rodape-copy {
  text-align: center;
  color: #fff;
  background: #003366;
  padding: 10px 0 10px 0;
  font-size: 0.98rem;
  letter-spacing: 0.5px;
}

.rodape-coluna h4 {
  margin-top: 0px;
  font-size: 32px;
  margin-bottom: 15px;
  color: #fff;
}

/* Responsivo */
@media (max-width: 820px) {
  .rodape-container.duas-colunas {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
  }

  .rodape-coluna {
    margin-bottom: 0;
    align-items: center;
  }

  .rodape-logo {
    margin: 0 auto 12px auto;
    display: block;
  }

  .rodape-redes {
    justify-content: center;
  }
}

.linha-separadora {
  border: none;
  border-top: 1px solid #fff;
  width: 100%;
  margin: 0px 0 0px 0;
}
/* Término da formatação do rodapé */


/* Formatação do diferenciais */
/* ===== Estrutura meio a meio (imagem + texto) ===== */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  width: 100%;
}

/* Imagem à esquerda */
.split.image-left {
  grid-template-areas: "image content";
}

.split.image-left .split__image {
  grid-area: image;
}

.split.image-left .split__content {
  grid-area: content;
}

/* Imagem à direita */
.split.image-right {
  grid-template-areas: "content image";
}

.split.image-right .split__image {
  grid-area: image;
}

.split.image-right .split__content {
  grid-area: content;
}

/* Bloco da imagem */
.split__image {
  position: relative;

  /* IMAGEM por cima, GRADIENTE por baixo */
  background:
    var(--img),
    /* imagem da seção (top layer) */
    linear-gradient(990deg, #cce0ff, #ccf2cc);
  /* gradiente de fundo */

  /* A imagem encaixa sem esticar; o gradiente cobre tudo */
  background-size: contain;
  background-position: left, center;
  background-repeat: no-repeat, no-repeat;
  min-height: 420px;
}

/* Borda só na esquerda e embaixo */
.split__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-left: 15px solid transparent;
  /* largura da borda esquerda */
  border-bottom: 30px solid transparent;
  /* largura da borda inferior */
  border-image: linear-gradient(90deg, #ccf2cc, #cce0ff) 1;
  /* azul → verde */
  border-image-slice: 1;
  pointer-events: none;
}

/* Bloco do conteúdo */
.split__content {
  background: #edefef;
  padding: clamp(24px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split__content h2 {
  margin: 0 0 20px;
  font-size: clamp(24px, 3vw, 32px);
  color: #003366;
  text-align: center;
}

/* ===== Cards ===== */
.diferenciais-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.diferenciais-cards .card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transition: transform .25s ease;
  position: relative;
}

.diferenciais-cards .card:hover {
  transform: translateY(-4px);
}

/* Ícone à esquerda */
.diferenciais-cards .icon {
  font-size: 26px;
  color: #003366;
  flex-shrink: 0;
  margin-right: 15px;
  /* espaço entre ícone e texto */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-right: 1px solid #666666;
  /* <-- linha vertical */
  padding-right: 15px;
  /* espaço entre a linha e o texto */
}

.diferenciais-cards .icon img,
.diferenciais-cards .icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Texto ocupa o espaço restante e centraliza dentro dele */
.diferenciais-cards .card-text {
  flex: 1;
  text-align: center;
}

.diferenciais-cards .card-text h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: #0f2744;
  font-weight: 600;
  text-align: center;
}

.diferenciais-cards .card-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #3a4a5f;
  text-align: center;
}

/* ===== Responsivo ===== */
@media (max-width: 1100px) {
  .split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "content";
  }

  .split__image {
    min-height: 100px;
  }
}
/* Término da formatação do diferenciais */


/* ==== DIFERENCIAIS: prevenir corte em telas muito pequenas ==== */
/* Permitir que o conteúdo encolha sem forçar a coluna a estourar */
.diferenciais-cards {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.diferenciais-cards .card,
.diferenciais-cards .card * {
  min-width: 0;
}

/* Em telas pequenas, empilhar os cards (melhor leitura) */
@media (max-width: 680px) {
  .diferenciais-cards {
    grid-template-columns: 1fr;
    gap: 12px;
    /* um pouco menos de espaço ajuda no mobile */
  }

  .diferenciais-cards .card {
    padding: 14px 16px;
  }
}

/* Em telas MUITO estreitas, alinhar ícone em cima e remover a “barrinha” */
@media (max-width: 380px) {
  .diferenciais-cards .card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }

  .diferenciais-cards .icon {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
    width: 42px;
    height: 42px;
  }
}

/* Garantir quebra de linha quando necessário (sem “empurrar” a coluna) */
.diferenciais-cards .card-text h3,
.diferenciais-cards .card-text p {
  overflow-wrap: break-word;
}

/* só pra garantir que o padding do lado do texto nunca “vaze” */
.split__content {
  box-sizing: border-box;
}


/* Ajustes da barra de rolagem no mobile */
/* Conter qualquer resto de overflow do drawer, sliders etc. */
html,
body {
  overflow-x: hidden;
  /* cinta de segurança; pode manter sem problemas */
}

/* Ajuste do submenu (limpeza de transform inválido no hover) */
li.has-sub:hover>ul.submenu-desktop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  /* manter o centro sob "Produtos" */
}

/* Header com padding generoso + largura total: prevenir sobras em telas minúsculas */
@media (max-width: 710px) {
  header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Término dos ajustes */

/* =====================================================================
   PÁGINA EMPRESA — INDFOL
   Estrutura: Tokens → Containers → Seções (Intro, Galeria, MVV, ISO/CRCC,
   Áreas de Atuação, KPIs)
   ===================================================================== */

/* ========== 1) Tokens (cores e utilitários coerentes) ==========
   Use estes tokens para manter consistência geral da página. */
:root {
  --azul: #003366;
  /* títulos, destaques e ícones */
  --cinza: #666666;
  /* textos/parágrafos */
  --btn-red: #E30000;
  /* CTA vermelho */
  --btn-red-hover: #C40000;
  /* hover CTA vermelho */
  --ring: rgba(0, 0, 0, .06);
  /* borda/sombra suave */
}

/* ========== 2) Containers/Gutters locais ==========
   Mantém largura máxima e paddings laterais consistentes. */
.empresa-intro,
.mvv,
.iso,
.crcc,
#areas-atuacao,
.stats-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 40px);
  padding-right: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}

/* ========== 3) Intro (texto × mídia) ==========
   Grid do topo e respiros ajustados. */
.empresa-intro {
  padding: 30px 8px;
  padding-inline: clamp(16px, 4vw, 40px);
}

@media (min-width: 1024px) {
  .empresa-intro {
    padding-bottom: 6px;
  }
}

.empresa-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  /* texto maior que mídia */
  gap: clamp(16px, 3vw, 32px);
  align-items: start;
}

.col-texto>*+* {
  margin-top: 18px;
}

/* espaçamento vertical progressivo */
.cta-wrap {
  margin-top: 16px;
}

/* bloco do CTA */

/* ========== 4) Tipografia ==========
   Títulos e parágrafos do bloco Quem Somos / Nossa História / CTA. */
#quem-somos h2,
#nossa-historia h2,
.cta-destaque h2 {
  color: var(--azul);
  margin: 0 0 10px;
  font-size: clamp(24px, 3.6vw, 30px);
  line-height: 1.15;
}

#quem-somos p,
#nossa-historia p,
.cta-destaque p {
  color: var(--cinza);
  line-height: 1.65;
  margin: 0 0 14px;
  text-align: justify;
}

/* ========== 5) Botões ==========
   Base azul + variação vermelha onde houver CTA. */
.btn-primario {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 10px;
  background: var(--azul);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: background .22s, color .22s, transform .15s;
}

/* CTA vermelho (mantém visual já usado na página Empresa) */
.cta-wrap .btn-primario,
.cta-destaque .btn-primario,
.empresa-intro .btn-primario {
  background: var(--btn-red);
  font-size: 15px;
  font-weight: bold;
  margin: 10px auto 0;
}

.cta-destaque .btn-primario:hover,
.empresa-intro .btn-primario:hover {
  background: var(--btn-red-hover);
  color: #fff;
  transform: scale(1.009);
}

.cta-destaque .btn-primario:active,
.empresa-intro .btn-primario:active {
  transform: none;
  box-shadow: none;
}

@media (max-width: 720px) {

  .cta-destaque .btn-primario,
  .empresa-intro .btn-primario {
    width: 100%;
    text-align: center;
  }
}

/* ========== 6) Vídeo responsivo (16:9) ==========
   Cole o iframe dentro desta classe. */
.ratio-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.ratio-16x9 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ========== 7) Galeria (Swiper) ==========
   Mantém object-fit: contain para mostrar a foto inteira. */
.galeria-empresa {
  --galeria-w: 100%;
  --galeria-h: 555px;
  margin-top: 16px;
}

.galeria-empresa .swiper {
  width: var(--galeria-w);
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  }

.galeria-empresa .swiper-wrapper {
  display: flex !important;
  transition-property: transform !important;
}

.galeria-empresa .swiper-slide {
  flex-shrink: 0 !important;
  width: 100% !important;
  height: var(--galeria-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.galeria-empresa .swiper-slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.galeria-empresa .swiper-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  cursor: grab;
}

.swiper-slide img:active {

  cursor: grabbing;
}



/* paginação desativada por padrão (mantida, caso queira reativar) */
.galeria-empresa .swiper-pagination {
  position: static;
  margin-top: 8px;
  display: none;
}

.galeria-empresa .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #cfd8e3;
  opacity: 1;
}

.galeria-empresa .swiper-pagination-bullet-active {
  background: var(--azul);
  width: 18px;
  border-radius: 8px;
}

/* setas */
.galeria-empresa .galeria-prev,
.galeria-empresa .galeria-next {
  color: var(--azul);
  z-index: 2;
}

/* alturas responsivas */
@media (max-width: 1024px) {
  .galeria-empresa {
    --galeria-h: 240px;
  }
}

@media (max-width: 560px) {
  .galeria-empresa {
    --galeria-h: 200px;
  }
}

/* ========== 8) MVV (cards) ==========
   Caixa com “faixa” azul no topo e ícone centralizado. */
.mvv {
  padding-top: 15px;
  background: none;
}

.mvv .mvv-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
  /* mesma altura */
}

.mvv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: #fff;
  border: 1px solid #e7edf4;
  border-radius: 18px;
  padding: 20px 20px 18px;
  box-shadow: 0 10px 24px rgba(0, 29, 74, .06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.mvv-card::after {
  /* barrinha azul superior */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: var(--azul);
  border-radius: 18px 18px 0 0;
  opacity: .9;
}

.mvv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0, 29, 74, .12);
}

.mvv-card .mvv-icon {
  display: inline-grid;
  place-items: center;
  width: 170px;
  height: 80px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: #e9f1f9;
  color: var(--azul);
  box-shadow: 0 6px 14px rgba(0, 29, 74, .10);
}

.mvv-card .mvv-icon i {
  font-size: 70px;
  line-height: 1;
}

.mvv-card h3 {
  color: var(--azul);
  margin: 6px 0 10px;
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.2;
  text-align: center;
}

.mvv-card p {
  color: var(--cinza);
  margin: 0;
  line-height: 1.65;
  text-align: center;
}

.mvv-card ul {
  margin: 6px 0 0;
  padding-left: 1.1em;
}

.mvv-card li {
  color: var(--cinza);
  margin: 6px 0;
}

.mvv-card li::marker {
  color: var(--azul);
}

@media (max-width: 1024px) {
  .mvv .mvv-cards {
    grid-template-columns: 1fr;
  }

  .mvv-card {
    padding: 18px;
  }
}

/* ========== 9) ISO & CRCC — caixas lado a lado ==========
   Compartilham estilo para manter consistência visual. */
.iso,
.crcc {
  padding-top: 15px;
}

.iso-row,
.crcc-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  /* texto | logo */
  gap: clamp(16px, 3vw, 28px);
  align-items: center;
  background: #fff;
  border: 1px solid #e7edf4;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 29, 74, .06);
  padding: clamp(16px, 3vw, 24px);
  width: 100%;
  box-sizing: border-box;
}

.iso-texto h2,
.crcc-texto h2 {
  color: var(--azul);
  margin: 0 0 10px;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.2;
}

.iso-texto p,
.crcc-texto p {
  color: var(--cinza);
  line-height: 1.65;
  margin: 0 0 12px;
  text-align: justify;
}

.iso-logo,
.crcc-logo {
  margin: 0;
  text-align: center;
}

.iso-logo img,
.crcc-logo img {
  max-width: 150px;
  width: 100%;
  height: auto;
  display: inline-block;
}

.crcc-logo a {
  display: inline-block;
  line-height: 0;
}

.iso-logo a:hover img,
.crcc-logo a:hover img {
  transform: scale(1.02);
  filter: drop-shadow(0 6px 16px rgba(0, 29, 74, .15));
  transition: .18s;
}

@media (max-width: 1024px) {

  .iso-row,
  .crcc-row {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .iso-logo img,
  .crcc-logo img {
    max-width: 180px;
  }
}

/* ========== 10) Prévia de PDF (thumb estática ou pdf.js) ==========
   Pode substituir o logo nas caixas ISO/CRCC. */
.pdf-preview {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 29, 74, .10);
  background: linear-gradient(180deg, #f5f7fb, #eef2f7);
  transition: transform .18s ease, box-shadow .18s ease;
}

.pdf-preview:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 29, 74, .16);
}

.pdf-canvas {
  display: block;
  width: 100%;
  height: auto;
  background: transparent;
}

.pdf-chip {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: var(--azul);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  pointer-events: none;
}

.iso-logo .pdf-preview,
.crcc-logo .pdf-preview {
  margin-inline: auto;
}

@media (max-width:1024px) {

  .iso-logo .pdf-preview,
  .crcc-logo .pdf-preview {
    max-width: 320px;
  }
}

/* ========== 11) Áreas de Atuação (carrossel com cards) ==========
   Consolidado e sem duplicações — mantém o visual atual. */
.areas-atuacao {
  padding: clamp(24px, 4vw, 48px) 0;
  background: none;
}

.areas-atuacao__header h2 {
  margin: 0 0 12px;
  color: var(--azul);
  text-align: center;
}

/* Swiper base */
.areas-swiper {
  position: relative;
  overflow: hidden;
  padding: 8px 36px;
}

.areas-swiper .swiper-wrapper {
  align-items: stretch;
}

.areas-swiper .swiper-slide {
  height: auto;
}

/* Card */
.areas-atuacao {
  --card-h: 250px;
  /* altura padrão dos cards */
}

.area-card {
  display: grid;
  grid-template-rows: calc(var(--card-h)*0.58) calc(var(--card-h)*0.42);
  /* topo 58% */
  height: var(--card-h);
  border-radius: 16px;
  background: linear-gradient(180deg, #ccf2cc 0 58%, #fff 58% 100%);
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }

.area-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, .10);
  border-color: rgba(0, 51, 102, .25);
cursor: grab;
}

.area-card:active {
cursor: grabbing;
}


.area-card__top {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.area-card__icon {
  font-size: calc(var(--card-h) * 0.36);
  line-height: 1;
  color: var(--azul);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}

.area-card__icon::after {
  content: none !important;
}

/* remove qualquer pseudo decorativo */
.area-card__label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #666666;
  padding: 10px 10px 14px;
}

/* Paginação (se usar) */
.areas-swiper .swiper-pagination {
  bottom: -2px !important;
}

.areas-swiper .swiper-pagination-bullet {
  background: var(--azul);
  opacity: .25;
}

.areas-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

/* Alinhar às mesmas bordas do container da página */
#areas-atuacao {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}

#areas-atuacao .areas-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

#areas-atuacao .areas-swiper {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#areas-atuacao .areas-nav .prev {
  left: 6px;
}

/* setas por cima, sem empurrar layout */
#areas-atuacao .areas-nav .next {
  right: 6px;
}

/* Responsivo (cards e gutters) */
@media (max-width: 640px) {
  .areas-atuacao {
    --card-h: 210px;
  }

  #areas-atuacao {
    padding-inline: 16px;
  }

  .areas-swiper {
    padding: 8px 28px;
  }
}

/* ========== 12) Responsivo geral da página Empresa ==========
   Garante mesmo gutter no mobile até o Swiper de fotos. */
:root {
  --page-gutter: clamp(16px, 4vw, 24px);
}

@media (max-width: 900px) {
  .empresa-intro {
    padding-left: var(--page-gutter) !important;
    padding-right: var(--page-gutter) !important;
  }

  .empresa-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .col-texto,
  .col-midia {
    width: 100%;
    box-sizing: border-box;
  }

  .cta-wrap {
    margin-left: 0;
    margin-right: 0;
  }
.video-empresa.ratio-16x9 {
  border-radius: 12px;
  overflow: hidden;
}

.galeria-empresa .swiper {
  width: 100%;
  margin-inline: 0;
  border-radius: 12px;
}
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 16px;
  }

  .cta-wrap {
    padding-inline: 0;
    /* cria o espaço dos dois lados */
  }

  .empresa-intro .btn-primario {
    width: 100%;
    display: block;
    box-sizing: border-box;
    /* impede estouro quando houver padding no contêiner */
  }
}

/* ========== 13) KPIs (Nossos números) ==========
   Cards com contador animado (JS usa data-atributos). */
.stats {
  padding-block: 0 50px;
}

.stats-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.5vw, 24px);
}

.kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--ring);
  border-radius: 16px;
  padding: clamp(18px, 2.4vw, 26px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  padding-block: 10px;
}

.kpi-prefix {
  position: absolute;
  top: clamp(10px, 1.2vw, 14px);
  left: clamp(14px, 2vw, 18px);
  font-size: clamp(12px, 1.6vw, 14px);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cinza);
}

.kpi-number {
  font-weight: 800;
  font-size: clamp(28px, 5.2vw, 48px);
  line-height: 1;
  color: var(--azul);
  margin: 4px 0 6px 0;
}

.kpi-suffix {
  font-size: clamp(14px, 2vw, 16px);
  color: var(--cinza);
  margin: 0;
  margin-top: 5px;
}

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

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



/* =====================================================================
   PÁGINA FOTOS — INDFOL
   Organização: Variáveis → Layout → Hero → Filtros → Galeria → Lightbox → Instagram
   Importante: Mantidos valores/medidas para NÃO alterar o visual.
   ===================================================================== */

/* ---------- Variáveis de cor (compartilhadas) ---------- */
:root {
  --azul: #003366;
  --cinza-texto: #666666;
  --cinza-borda: #d9d9d9;
}

/* ---------- Container padrão da página Fotos ---------- */
.container-fotos { width: min(1200px, 92vw); margin-inline: auto; }

/* ========== HERO (título e descrição) ========== */
.galeria-hero { padding: clamp(28px, 4vw, 52px) 0 0; }

.galeria-hero h1{
  margin: -22px 40px 6px;          /* mantém o mesmo “pull up” do título */
  color: var(--azul);
  font-size: clamp(24px, 3.6vw, 30px);
}

.galeria-hero p{
  margin: 15px 40px 30px;
  max-width: 70ch;
  color: var(--cinza-texto);
}

/* Mobile: margens menores e texto justificado (mesmo visual) */
@media (max-width:720px){
  .galeria-hero h1{ margin: 2px 4px 15px; }
  .galeria-hero p{ margin: 0 4px 25px; text-align: justify; }
}

/* ========== FILTROS (botões) ========== */
/* Dica: JS usa [aria-pressed] para o estado ativo */
.galeria-filtros{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 24px;
}
.galeria-filtros .filtro{
  appearance: none;
  border: 1px solid var(--cinza-borda);
  background: #fff; color: #333;
  padding: 10px 14px; border-radius: 999px;
  font-weight: 600; cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.galeria-filtros .filtro:hover{ transform: translateY(-1px); }
.galeria-filtros .filtro[aria-pressed="true"]{
  background: var(--azul); color: #fff; border-color: var(--azul);
}

/* ========== GALERIA (grid de figuras) ========== */
.galeria{ padding: 0 0 clamp(28px, 5vw, 64px); }

.galeria-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Moldura + sombra leve */
.galeria-grid figure{
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--cinza-borda);
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  background: linear-gradient(to right, #ccf2cc, #cce0ff); /* mantém o gradiente “moldura” */
}

/* Imagem: mostrar inteira (contain) e altura fixa igual ao original final (220px) */
.galeria-grid img{
  display: block; width: 100%; height: 220px;
  object-fit: contain; object-position: center;
  transition: transform .35s ease, filter .35s ease;
}
.galeria-grid figure:hover img{ transform: scale(1.03); cursor: pointer;}

/* Legenda + tag */
.galeria-grid figcaption{
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  color: #fff; padding: 10px 9px; font-size: .7rem;
  display: flex; justify-content: space-between; align-items: end; gap: 8px;
}
.galeria-grid .tag{ font-size: .7rem; line-height: 1; padding: 5px 8px; border-radius: 999px; background: rgba(0,0,0,.45); }

/* Suporte ao filtro: ocultar com [hidden] */
.galeria-grid figure[hidden]{ display: none !important; }

/* Selo de numeração no canto (mantido) */
.foto-num{
  position: absolute; top: 10px; left: 10px;
  padding: 6px; font-size: .65rem; color: #fff;
  background: rgba(0,0,0,.55); border-radius: 999px; line-height: 1; z-index: 2;
}

/* “Mostrar mais” (centralizado) */
.galeria-more{ display: flex; justify-content: center; margin-top: 20px; margin-bottom: -40px; }
.galeria-more button{
  appearance: none; border: 1px solid var(--azul); background: #fff; color: var(--azul);
  padding: 12px 16px; border-radius: 12px; font-weight: 700; cursor: pointer;
}
.galeria-more button:hover{ background: var(--azul); color: #fff; }

/* ========== LIGHTBOX (modal de foto) ========== */
/* Estrutura/base */
.lightbox{
  position: fixed; inset: 0; display: none; place-items: center;
  background: rgba(10,15,25,.85); backdrop-filter: blur(4px); z-index: 9999;
}
.lightbox[open]{ display: grid; }

.lightbox__inner{ position: relative; width: min(95vw, 1200px); }
.lightbox__img{
  display: block; width: 100%; height: auto; max-height: 84vh;
  border-radius: 16px; background: #0b1020;
}
.lightbox__caption{
  display: flex; justify-content: space-between; gap: 12px;
  color: #e5e7eb; margin-top: 10px; font-size: .95rem;
}
.lightbox__caption small{ color: #9ca3af; }

/* Botão fechar */
.lightbox__close{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 40px;
  border: none; background: #E30000; color: #fff; font-size: 15px; cursor: pointer;
}
.lightbox__close:hover{ filter: brightness(1.1); }

/* Setas: usam a skin do Swiper (mesmo visual das setas do carrossel) */
.lightbox__prev, .lightbox__next{
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
}
.lightbox__prev{ left: 10px; } .lightbox__next{ right: 10px; }
@media (max-width:720px){ .lightbox__prev{ left: 6px; } .lightbox__next{ right: 6px; } }

/* Skin Swiper aplicada nas setas do lightbox */
.lightbox__prev.swiper-button-prev,
.lightbox__next.swiper-button-next{
  background-color: black !important;
  padding: 5px !important; border-radius: 10% !important;
  width: 37px !important; height: 54px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: .4 !important; border: none !important; box-shadow: none !important;
}
.lightbox__prev.swiper-button-prev:hover,
.lightbox__next.swiper-button-next:hover{ opacity: 1 !important; }
.lightbox__prev.swiper-button-prev::after,
.lightbox__next.swiper-button-next::after{ color: #fff !important; font-size: 20px !important; }

/* Número da foto no lightbox (mesmo estilo do selo da grade) */
.lb-num{
  position: absolute; top: 15px; left: 15px; z-index: 3;
  padding: 10px; font-size: .75rem; color: #fff; background: rgba(0,0,0,.55); border-radius: 999px;
}
@media (max-width:720px){ .lb-num{ top: 6px; left: 6px; } }

/* ========== INSTAGRAM (embeds + CTA) ========== */
.instagram-bloco{
  padding: clamp(28px, 4vw, 10px) 0;
  border-top: 1px solid var(--cinza-borda);
}
.instagram-bloco h2{ text-align: center; color: var(--azul); margin: 0 0 25px; }
.instagram-bloco p{
  margin: -20px 0 35px; color: var(--cinza-texto);
}
@media (max-width:720px){
  .instagram-bloco h2{ margin: 2px 4px 15px; }
  .instagram-bloco p{ margin: 0 4px 25px; text-align: justify; }
}

/* Grade responsiva para os embeds */
.ig-embeds{
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.instagram-media{
  width: 100% !important; max-width: 100% !important; min-width: 280px;
  margin: 0 auto !important;
}

/* Botão/CTA opcional */
.insta-cta{ margin-top: 12px; }
.btn-insta{
  display: inline-block; padding: 10px 14px;
  border: 1px solid var(--azul); color: var(--azul);
  border-radius: 12px; text-decoration: none; font-weight: 700;
}
.btn-insta:hover{ background: var(--azul); color: #fff; }










































/* ==============================================
   INDFOL — Página de Produtos (CSS)
   Objetivo: organização, comentários e limpeza leve
   Atenção: NÃO alterar o visual; mantida a ordem dos seletores
   ============================================== */


/* === Tokens / Design tokens === */
:root {
  --container: 1200px;
  --azul: #003366;
  --azul-esc: #083761;
  --cinza-900: #111;
  --cinza-700: #444;
  --cinza-500: #666;
  --cinza-300: #bbb;
  --cinza-200: #e6e6e6;
  --bg: #fff;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 16px
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0)
}

/* === Layout: wrapper e colunas === */
.prod-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
  margin: 18px 0 40px;
}

@media (max-width: 980px) {
  .prod-wrap {
    grid-template-columns: 1fr
  }
}

/* === Sidebar (accordion) === */
.prod-sidebar {
  border: 1px solid var(--cinza-200);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
  position: sticky;
  top: 100px;
  /* altura do seu cabeçalho fixo */
  max-height: calc(200vh - 100px - 16px);
  /* 16px = respiro inferior, ajuste se quiser */
  overflow: auto;
  align-self: start;
  margin-top: 5px;
  /* garante que não estique */
}

.side-group {
  border-top: 1px solid;
  border-color: #666666;

}

.side-group:last-child {
  border-bottom: 1px solid;
  border-color: #666666;

}

.side-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0px;
  padding: 15px 15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #666666;
  font-weight: 800;
  text-align: left;
  align-items: center;
  font-size: 12px;
}

.side-toggle:hover {
  background: #f8f8f8;
}

.chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--cinza-700);
  border-bottom: 2px solid var(--cinza-700);
  transform: rotate(-45deg);
  transition: .2s;
}

.side-toggle[aria-expanded="true"] .chev {
  transform: rotate(45deg)
}

.side-sub {
  list-style: none;
  margin: 0;
  padding: 0px 0px 0px 0px;
}

.side-sub li a {
  display: block;
  padding: 9px 10px;
  color: #666666;
  text-decoration: none;
  border-top: 1px solid;
  border-color: #E5E5E5;
  font-size: 11px;
  margin-left: 15px;
}

.side-sub li a:hover {
  background: #f3f6fa;
  color: var(--azul);

}

.side-link {
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 0px;
  padding: 15px 15px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #666666;
  font-weight: 800;
  text-align: left;
  align-items: center;
  font-size: 12px;
}

.side-link:hover {
  background: #f8f8f8;
}

.side-link.all {
  color: var(--azul);
}

/* UL das subcategorias sem marcador nativo */
.prod-sidebar .side-sub {
  list-style: none;
  margin: 0;
  padding: 0px;
}

/* link da subcategoria com espaço pro ponto */
.prod-sidebar .side-sub li a {
  position: relative;
  padding-left: 20px;
  /* espaço para a bolinha */
}

/* bolinha vazada */
.prod-sidebar .side-sub li a::before {
  content: "";
  position: absolute;
  left: 6px;
  /* ajuste horizontal */
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  /* diâmetro interno + borda */
  height: 7px;
  border: 2px solid #9aa0a6;
  /* cor da borda da bolinha */
  border-radius: 50%;
  background: transparent;
  /* vazada */
  box-sizing: border-box;
}

/* estado hover/ativo (opcional) */
.prod-sidebar .side-sub li a:hover::before {
  border-color: var(--azul);
}

/* Título do menu lateral */
.side-title {
  font-size: clamp(24px, 3.6vw, 25px);
  color: #FFFFFF;
  padding: 7px 0px 7px 0px;
  margin: 0px 0px 0px;
  text-align: center;
  background-color: #003366;
  border-radius: 6px 6px 0px 0px;
}

/* opcional: deixar “sticky” enquanto rola */
@media (min-width: 981px) {
  .prod-sidebar {
    position: sticky;
    top: 16px;
    /* ajuste se o seu header for fixo */
  }
}

/* === Barra de busca === */
.prod-content {
  min-width: 0
}

.prod-search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 12px
}

.prod-search input {
  width: min(720px, 100%);
  padding: 12px 14px;
  border: 1px solid var(--cinza-200);
  border-radius: 999px
}

.prod-search button {
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--cinza-200);
  background: #fff;
  cursor: pointer
}

.prod-search button:hover {
  background: #f7f7f7
}

/* === Paginação de cards === */
.prod-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 18px 0
}

.prod-pagination button {
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cinza-200);
  background: #fff;
  cursor: pointer
}

.prod-pagination button:hover {
  background: #f7f7f7
}

.prod-pagination button[aria-current="page"] {
  background: var(--azul);
  color: #fff;
  border-color: var(--azul)
}

/* === Página de produtos: largura/centralização === */
.prod-page {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  /* respiro */
  padding-right: 16px;
  /* respiro */
}

/* grid interno (menu + conteúdo) */
.prod-wrap {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
}

@media (max-width: 980px) {
  .prod-wrap {
    grid-template-columns: 1fr;
  }

}

/* barra de busca centralizada com largura máxima */
.prod-search {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.prod-search input {
  width: 100%;
}

/* === Ajustes mobile (até 980px) === */
@media (max-width: 980px) {

  /* 1) controla o espaço acima/abaixo do bloco (menu + produtos) */
  .prod-wrap {
    margin-top: 25px;
    /* MENOR espaço acima  */
    margin-bottom: 32px;
    /* MAIOR espaço abaixo */
    row-gap: 10px;
    /* espaço entre menu e conteúdo */
  }

  /* 2) no mobile, não “grudar” a sidebar no topo */
  .prod-sidebar {
    position: static;
    /* desativa sticky no mobile */
    max-height: none;
    overflow: visible;
    /* se quiser manter sticky no mobile, comente as 3 linhas acima e ajuste o top: */
    /* top: 72px; */
  }

  /* 3) (opcional) folga do wrapper geral */
  .prod-page {
    padding-top: 6px;
    padding-bottom: 0;
  }

}/* Reseta e define o header apenas dentro do card */

.prod-card header {
  /* neutraliza efeitos do header global */
  height: 50px !important;
  display: flex !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  background: #ffffff !important;
  border-radius: 14px 14px 0 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  text-align: center !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: hidden; /* impede vazar do header */
  }

/* Título do card */
.prod-card header h3 {
  margin: 0;
  font-size: .75rem;
  font-weight: 800;
  color: #666666 !important;
  text-align: center !important;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;  /* troque a cor aqui se quiser */
}



/* === Cards de produtos (grid + card) === */

/* --- ajustes rápidos para você customizar --- */
:root {
  --card-gap: 10px;
  /* espaço entre caixinhas */
  --card-radius: 14px;
  /* raio dos cantos */
  --card-border: 1px solid #e6e6e6;
  --card-bg: #fff;
  /* fundo da caixinha */
  --card-shadow: 0 6px 18px rgba(0, 0, 0, .06);

  --title-color: #111;
  /* cor do título */
  --title-bg: #dbe8f7;
  /* fundo da faixa do título (opcional) */
  --meta-color: #666;
  /* se você quiser um subtítulo depois */

  --btn-bg: #003366;
  /* botão “saiba mais” */
  --btn-bg-hover: #083761;
  --btn-txt: #fff;
  /* cor do texto do botão */
  --btn-border: 1px solid #e6e6e6;
}

/* === GRID: 2 (mobile) → 3 (tablet) → 4 (desktop) === */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* celular: 2 */
  gap: var(--card-gap, 16px);
}

@media (min-width: 740px) {

  /* tablet: ajuste se quiser (ex.: 768px) */
  .prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* tablet: 3 */
  }
}

@media (min-width: 980px) {

  /* desktop */
  .prod-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* desktop: 4 */
  }
}

/* garante que o card não estoure a célula */
.prod-card {
  width: 100%;
}

/* --- CAIXINHA (card) – estrutura básica --- */
.prod-card {
  display: flex;
  /* empilha título, imagem, botão */
  flex-direction: column;
  background: #cce0ffff;
  /* <<< ajuste o fundo aqui */
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
  /* garante canto arredondado na imagem */
}

/* --- TÍTULO (em cima) ---
   Usamos 'all:unset' para NÃO herdar estilos globais do <header> do site.
   Depois reatribuímos apenas o que queremos aqui. */
.prod-card header {
  all: unset;
  /* zera heranças problemáticas do tema */
  display: block;
  /* volta a ser bloco */
  width: 100%;
  background: #cce0ffff !important;
  /* <<< cor da faixa do título */
  padding: 10px 12px;
  /* altura/respiração do título */
  text-align: center;
  /* centraliza horizontalmente */
  box-sizing: border-box;
}

.prod-card h3 {
  margin: 0;
  font-size: 0.95rem;
  /* tamanho do título */
  line-height: 1.25;
  font-weight: 700;
  color: var(--title-color);
  /* <<< cor do texto do título */
}

/* (Opcional) subtítulo/linha auxiliar abaixo do título:
.prod-card .meta{ margin-top:4px; color: var(--meta-color); font-size:.85rem; } */

/* --- IMAGEM (no meio) ---
   'aspect-ratio: 4/3' define a altura visual.
   Troque por 1/1 (quadrado) ou 16/9 se preferir. */
.prod-card figure {
  margin: 0;
  display: block;
  aspect-ratio: 4 / 3;
  /* <<< proporção da área da imagem */
  background: #f2f5f8;
  /* cor de fundo quando a imagem não cobre */
transition: 0.35s;
}

.prod-card figure:hover {

transform: scale(1.05);

}

.prod-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cobre toda a área mantendo proporção */
  display: block;
  
  
}

/* --- RODAPÉ (embaixo) + BOTÃO “Saiba mais” --- */
.prod-card footer {
  margin-top: auto;
  /* empurra o footer para base do card */
  padding: 12px;
  /* respiro ao redor do botão */
  text-align: center;
  /* botão centralizado */
  box-sizing: border-box;
}

/* botão padrão */
.prod-card .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* espaço entre ícone e texto */
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  /* botão claro (secundário) */
  text-decoration: none;
}

/* botão principal (azul) */
.prod-card .btn.primary {
  font-size: 0.7rem;
  background: red;
  /* <<< cor do botão principal */
  color: #fff;
  font-weight: bold;
  border-radius: 5px;
  padding: 12px 20px;
  box-shadow: 0 2px 8px rgba(0, 51, 102, 0.1);
  transition: 0.3s;
    border: none;
  outline: none;
}

.prod-card .btn.primary:hover {
  background: #003366;
  color: #fff;  
}

/* --- toques finos (opcionais) --- */
/* sombra mais sutil no hover:
.prod-card:hover{ box-shadow: 0 10px 24px rgba(0,0,0,.08); } */

/* cantos só em cima, base reta:
.prod-card{ border-radius: var(--card-radius) var(--card-radius) 0 0; } */

/* imagem com cantos apenas embaixo (quando header tem raio em cima):
.prod-card figure{ border-radius: 0 0 var(--card-radius) var(--card-radius); overflow:hidden; } */

/* === Página do Produto: resets locais === */

/* EVITA overflow horizontal global */
header {
  width: 100% !important;
  /* era 100vw */
  box-sizing: border-box;
}

/* Bloco do título da página de produto (se estiver usando) */
.produto-head {
  background: none !important;
  /* remove qualquer faixa/gradiente atrás do título */
  box-shadow: none !important;
  padding: 0 !important;
}

/* Título alinhado à esquerda (sem “puxar” pro centro) */

:root {
  --container: 870px;
  --azul: #003366;
  --azul-esc: #083761;
  --cinza-700: #444;
  --cinza-300: #bbb;
  --bg: #fff;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.produto {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px 16px 56px;
  background: #ffffff;
  border-radius: 10px;
  margin-top: 5px;
}

.produto-titulo {
  margin: 0 0 8px;
text-align: left !important;
  font-size: 24px;
  color: #003366;

}

.divisor {
  border: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, var(--cinza-300), transparent 60%);
  margin: 5px 0 15px;
}

/* === Galeria: Swiper + imagens === */
.produto-galeria {
  position: relative;
}

.galeria-swiper {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #cce0ffff;
}

.galeria-swiper .swiper-slide {
  display: grid;
  place-items: center;
}

.galeria-swiper img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  cursor: zoom-in;
}

.galeria-swiper .swiper-button-prev,
.galeria-swiper .swiper-button-next {
  color: var(--azul);
}

.galeria-swiper .swiper-pagination-bullet-active {
  background: var(--azul);
}

.hint {
  display: block;
  margin-top: 8px;
  color: #777;
  font-size: .85rem;
}

/* cole no final do seu style.css */
.produto .galeria-swiper .swiper-pagination{
  display: none !important;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 3;
}

.lightbox-prev.swiper-button-prev,
.lightbox-next.swiper-button-next {
  background-color: black;
  padding: 5px;
  border-radius: 10%;
  width: 37px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .4;
  transition: .3s;
  border: none;
  box-shadow: none;
  top: 50%;
}

.lightbox-prev.swiper-button-prev:hover,
.lightbox-next.swiper-button-next:hover {
  opacity: 1;
}

.lightbox-prev.swiper-button-prev::after,
.lightbox-next.swiper-button-next::after {
  color: #fff;
  font-size: 20px;
}

.lightbox__box { position: relative; display: inline-block; }

/* === Lightbox (imagem ampliada) === */
.lightbox {
  display: grid;
  place-items: center;
}

#lightbox-img {
  width: min(96vw, 1200px);
  aspect-ratio: 16 / 9;
  /* ⬅️ proporção desejada */
  height: auto;
  /* o browser calcula a altura pela razão */
  object-fit: contain;
  /* mantém a imagem inteira dentro da área 16:9 */
  background: #cce0ffff;
  /* opcional para “letterbox” */
  border-radius: 14px;
  display: block;
}

/* === Botões (secundário e primário) === */
.produto-botoes {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px auto 0px;
  justify-content: flex-start;
  width: 100%;
  align-items: stretch;
}

.btn-sec,
.btn-pri {
  border: none;
  background: red;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s ease;
font-weight: bold;
font-size: 0.7rem;
text-align: center;
}

.btn-sec:hover {
  background: #C40000;
  color: #fff;
  transform: scale(1.009);
}

.btn-pri {
margin: 10px auto 0px;
  background: red;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  border-radius: 10px;
  width: 100% !important;
  text-align: center;
}

.btn-pri:hover {
background: var(--btn-red-hover);
color: #fff;
transform: scale(1.009);

}

/* === Descrição do produto === */
.produto-descricao {
  margin: 30px 0 24px;
  color: #666666;
  text-align: justify;
  line-height: 1.6;
  font-size: 14px;
}

.produto-descricao h2,
.produto-tabela h2,
.produto-downloads h2,
.produto-form h2,
.produto-outros h2 {
  color: var(--azul);
  margin: 0 0 12px;
}


/* === TABELA DE PRODUTO (controle de altura de linha) === */
.produto-tabela table tr {
  height: 5px;              /* controla a altura fixa da linha */
}

.produto-tabela table td,
.produto-tabela table th {
  line-height: 1;          /* espaçamento do texto dentro da célula */
}



/* === Tabela dimensional (sticky header + marca d’água) === */
.tabela-wrap {
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
  margin-bottom: 30px;
  color: #666666;
}

/* logo central, leve e por baixo da tabela */
.tabela-wrap::before{
  content: "";
  position: absolute;
  inset: 0;
  background: url("/imagens/marca-dagua-tabela-produto.png") center / 280px repeat;
  opacity: .04;              /* intensidade da marca d’água */
  pointer-events: none;      /* não interfere com seleção/cliques */
  z-index: 0;
}

.tabela-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  z-index: 1;
  
}

.tabela-wrap th,
.tabela-wrap td {
  padding: 7px 7px;
  border-bottom: 1px solid #eee;
  text-align: center;
  font-size: 11px;
}

.tabela-wrap thead th {
  background: #f3f6fa;
  color: #123;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Ajustes responsivos do tamanho da marca (opcional) */
@media (max-width: 960px){
  .tabela-wrap::before{ background-size: 240px; }
}
@media (max-width: 720px){
  .tabela-wrap::before{ background-size: 200px; }
}
@media (max-width: 480px){
  .tabela-wrap::before{ background-size: 160px; }
}



/* ===== Tabela do produto: no celular mostrar só 2 primeiras colunas ===== */
@media (max-width: 768px) {

  /* esconde colunas 3+ (cabeçalho + corpo) */
  .produto-tabela .tabela-wrap table thead th:nth-child(n+3),
  .produto-tabela .tabela-wrap table tbody td:nth-child(n+3) {
    display: none;
  }

  /* (opcional, mas recomendado) ajusta as larguras pra 2 colunas */
  .produto-tabela .tabela-wrap table thead th,
  .produto-tabela .tabela-wrap table tbody td {
    width: 50% !important;
  }
}




/* === Área de downloads === */
.produto-downloads {
  margin: 20px 0 12px;
}

.downloads-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.download-item {
  display: block;
  padding: 12px 16px;
  border: 1px dashed var(--azul);
  border-radius: 10px;
  text-decoration: none;
  color: var(--azul);
}

.download-item:hover {
  background: #f0f6ff;
}

/* === Formulário de contato (grid) === */
.produto-form {
  margin: 12px 0 28px;
}

.form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 1fr;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo-100 {
  grid-column: 1 / -1;
}

.campo label {
  font-size: .9rem;
  color: #333;
}

.campo input,
.campo textarea {
  border: 1px solid #d5dce6;
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  resize: none;
}

.campo input:focus,
.campo textarea:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, .12);
}

/* === Outros produtos (cards aleatórios) === */
.outros-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.outro-card {
  border-radius: 14px;
  box-shadow: var(--shadow);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.outro-thumb {
  aspect-ratio: 1/1;
  background: #f6f6f6;
}

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

.outro-body {
  padding: 12px;
}

.outro-titulo {
  font-weight: 700;
  color: #123;
  margin: 0 0 6px;
}

.outro-cat {
  font-size: .85rem;
  color: #666;
}

/* === Ajustes responsivos adicionais === */
@media (max-width: 960px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 560px) {
  .outros-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* (opcional) em telas MUITO estreitas, cair para 1 coluna */
  @media (max-width: 360px) {
    .outros-grid {
      grid-template-columns: 1fr;
    }
  }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .7);
  z-index: 9999;
  padding: 3vw;
}

.lightbox[aria-hidden="false"] {
  display: grid;
}

.lightbox img {
  max-width: 94vw;
  max-height: 88vh;
  border-radius: 10px;
}

.lightbox-fechar {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 34px;
  line-height: 1;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

/* === Breakpoints (container/ajustes finos) === */

/* 960px: tablet grande */
@media (max-width: 960px) {
  :root {
    --container: 960px;
  }

  /* Opção 1 — simples e segura: dá padding no grid apenas em telas menores */
  @media (max-width: 960px) {
    .prod-grid {
      padding-right: 28px;
    }
  }

  /* leve ajuste */
  .form-grid {
    grid-template-columns: 1fr;
  }

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

/* 768px: tablet vertical */
@media (max-width: 1230px) {
  :root {
    --container: 100%;
  }

  /* container passa a ser fluido */
  .produto {
    padding: 20px 14px 44px;
  }

  /* padding reduzido para caber melhor */
  .galeria-swiper img {
    height: 200px;
    background: #cce0ffff;
    object-fit: cover;

  }

  /* mantém sua altura de 250px */
}

/* 560px: celulares médios/pequenos */
@media (max-width: 560px) {
  .outros-grid {
    grid-template-columns: 1fr;
  }

  .tabela-wrap th,
  .tabela-wrap td {
    padding: 10px 12px;
    font-size: 11px;
  }

  .lightbox-prev.swiper-button-prev,
  .lightbox-next.swiper-button-next {
    width: 36px;
    height: 50px;
  }
}

/* 380px: celulares muito pequenos */
@media (max-width: 380px) {
  .produto {
    padding: 16px 12px 36px;
  }

  .galeria-swiper img {
    height: 230px;
  }

  /* pequeno respiro em telas minúsculas */
}



/* ====== FIM DO PATCH ====== */

/* === FIX: produto ocupa largura total do grid === */
/* Quando houver um .produto dentro de .prod-grid, ele passa a ocupar a grade inteira */
.prod-grid>.produto {
  grid-column: 1 / -1;
}

/* (opcional) garante que a galeria não “vaze” lateralmente */
.produto-galeria,
.galeria-swiper {
  width: 100%;
  overflow: hidden;
}

/* (opcional) em telas bem pequenas, dá um respiro no padding da página do produto */
@media (max-width: 720px) {
  .produto {
    padding: 20px 14px 44px;
  }
}

/* Caixa de mensagem fixa (remove “alça” de redimensionar) */
.campo textarea {
  resize: none;
  overflow: auto;
}

/* Popup básico */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(0, 0, 0, .55);
  z-index: 10000;
  padding: 16px;
}

.modal[aria-hidden="false"] {
  display: grid;
}

.modal__box {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15);
  max-width: 520px;
  width: min(92vw, 520px);
  padding: 22px;
  text-align: center;
}

.modal__box h3 {
  margin: 0 0 8px;
  color: var(--azul);
}

.modal__box p {
  margin: 0 0 16px;
  color: #333;
}

.modal__box .btn-pri {
  width: auto;
}

/* ===== Desenho entre descrição e tabela (estático e responsivo) ===== */
.produto-desenho{
  margin: 16px 0 24px;
}

.desenho-box{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}

/* Imagem fluida, sem “zoom”/lightbox e sem corte */
.desenho-media{
  display: block;
  width: 100%;
  height: 200px;              /* preserva proporção original */
  max-height: 620px;         /* limita no desktop para não “gigantar” */
  object-fit: contain;
  background: #f6f6f6;       /* bom para PNG com transparência */
  border-radius: 8px;
  cursor: default;           /* garante que não indique zoom */
}


/* Legenda discreta */
.desenho-legenda{
  margin-top: 8px;
  font-size: .9rem;
  color: #666;
  text-align: center;
}

/* Breakpoints (mantém desktop como está) */
@media (max-width: 960px){
  .desenho-media{ max-height: 520px; }
}
@media (max-width: 768px){
  .produto-desenho{ margin: 14px 0 20px; }
  .desenho-box{ padding: 8px; }
  .desenho-media{ max-height: 420px; }
}
@media (max-width: 560px){
  .desenho-media{ max-height: 360px; }
}
@media (max-width: 380px){
  .desenho-media{ max-height: 300px; }
}

/* ===== Realce da linha na tabela (hover/focus) ===== */

/* transição suave */
.tabela-wrap tbody tr {
  transition: background-color .15s ease;
}

/* realce apenas nas células do corpo (não afeta o thead sticky) */
.tabela-wrap tbody tr:hover>td,
.tabela-wrap tbody tr:focus-within>td {
  background: #f3f6fa;
  /* azul bem claro, combina com o tema */
}

/* detalhe de marca: “faixa” à esquerda na linha ativa */
.tabela-wrap tbody tr:hover>td:first-child,
.tabela-wrap tbody tr:focus-within>td:first-child {
  box-shadow: inset 4px 0 0 var(--azul);
}

/* acessibilidade: se tiver inputs/links dentro da célula, não mostra outline “quebrando” */
.tabela-wrap tbody td:focus {
  outline: none;
}

/* usuários que preferem menos animação */
@media (prefers-reduced-motion: reduce) {
  .tabela-wrap tbody tr {
    transition: none;
  }
}

/* todas as tabelas dentro do wrapper com colunas iguais */
.tabela-wrap table { table-layout: fixed; }
.tabela-wrap thead th, 
.tabela-wrap tbody td { width: 20%; }

/* controle de overflow */
.tabela-wrap th, .tabela-wrap td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabela-wrap th:last-child,
.tabela-wrap td:last-child {
  white-space: normal;           /* Observações pode quebrar */
  word-break: break-word;
}

/* ===== Tabela: permitir quebra de linha em todas as células ===== */
.tabela-wrap table { table-layout: fixed; } /* mantém colunas estáveis (se já usa, ok) */

.tabela-wrap th,
.tabela-wrap td {
  white-space: normal;         /* permite múltiplas linhas */
  overflow-wrap: anywhere;     /* quebra palavras longas/sem espaços */
  word-break: break-word;      /* fallback para navegadores antigos */
  text-overflow: clip;         /* remove "..." se tiver herdado */
  overflow: visible;           /* garante mostrar o texto quebrado */
  vertical-align: center;         /* conteúdo começa no topo da célula */
  line-height: 1.35;           /* melhora leitura em múltiplas linhas */
}



/* Primeira coluna em negrito – só no corpo da tabela */
.produto-tabela .tabela-wrap table tbody td:first-child {
  font-weight: bold;
  white-space: nowrap;
  /* evita quebra tipo "1.1/2" em duas linhas */
}



/* (opcional) Cabeçalho pode quebrar também; se preferir manter em 1 linha, descomente:
.tabela-wrap thead th { white-space: nowrap; }
*/

.modal__box--3d {
  max-width: 960px;
  width: min(80vw, 960px);
}

.modal-titulo {
  margin: 0 0 12px;
  color: var(--azul);
  text-align: left;
}

.modal__box--3d .acao {
  margin-top: 12px;
  text-align: right;
}

@media (max-width: 768px) {
  #viewer3d {
    height: 54vh !important;
    
  }
}

.viewer-controls{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center;
  margin:10px 0 0;
}
.vbtn{
  min-width:38px; height:38px; border:0; border-radius:10px; cursor:pointer;
  background:#eef3fa; color:#123; font-weight:700; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .12s ease;
}
.vbtn:hover{ transform: translateY(-1px); }
@media (max-width: 768px){
  .viewer-controls{ gap:6px; }
  .vbtn{ min-width:34px; height:34px; }
}
.vbtn:disabled { opacity: .5; cursor: not-allowed; }

.modal{ display:none; position:fixed; inset:0; place-items:center; background:rgba(0,0,0,.6); z-index:9999; padding:3vw; }
.modal[aria-hidden="false"]{ display:grid; }

/* Wrapper do viewer para aplicar a marca d’água */
.viewer-wrap{
  position: relative;
}

/* Marca d’água central, por cima, porém sem capturar cliques */
.viewer-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: url("/imagens/logo.png") center / clamp(140px, 40vw, 700px) no-repeat; /* ajuste o caminho/tamanho */
  opacity: .07;                 /* intensidade da marca d’água */
  pointer-events: none;         /* mantém rotação/zoom funcionando */
  z-index: 2;
}

/* Garante que o viewer fique abaixo do overlay */
.viewer-wrap > model-viewer{
  position: relative;
  z-index: 1;
  background: #f6f6f6;          /* mantém o fundo atual do seu viewer */
  border-radius: 12px;          /* combina com seu modal */
}












/* ===== Notas abaixo da tabela ===== */
.notas {
  margin-top: 16px;
  color: #666666;
  margin-bottom: 30px;
  font-size: 14px;
}

/* Título em negrito, herdando cor/tamanho do tema */
.notas-titulo {
  font-weight: 700;
  margin-bottom: 6px;
}

/* Zera estilos e cria numeração customizada */
.notas-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nota;
}

/* Linha da nota em flex: [número] [texto] */
.notas-lista>li {
  counter-increment: nota;
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin-bottom: .4em;
}

/* Coluna do número (fixa) */
.notas-lista>li::before {
  content: counter(nota) ".";
  font-weight: 700;
  width: 1.6em;
  /* largura da coluna do número */
  flex: 0 0 1.6em;
  line-height: 1.4;
}

/* Coluna do texto (justificado) */
.notas .li-text {
  flex: 1 1 auto;
  text-align: justify;
}

/* Negrito seguro (não vira bloco) */
.notas .b {
  font-weight: 700;
  display: inline;
}

/* Evita quebra entre número e unidade (10 kgf/cm², 200 °C, etc.) */
.notas .nowrap {
  white-space: nowrap !important;
}

/* Anti-queira agressiva herdada do tema (blindagem) */
.notas,
.notas * {
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
}




/* === AJUSTE DE TAMANHO DO DESENHO TÉCNICO (somente no mobile) === */
@media (max-width: 768px) {
  .produto-desenho .desenho-media {
    width: 100%;             /* aumenta proporcionalmente */
    max-width: 600px;       /* permite um pouco mais de largura */
    height: 265px;           /* mantém proporção da imagem */
    display: block;
    margin: 0 auto;         /* centraliza horizontalmente */
  }
}



.catalogo-aviso {
  max-width: 800px;
  margin: 60px auto;
  padding: 30px 25px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #f9fafb;
  text-align: center;
}

.catalogo-aviso h1 {
  font-size: 1.8rem;
  margin-bottom: 15px;
  color: #003366;
  /* cor INDFOL */
}

.catalogo-aviso p {
  margin-bottom: 10px;
  line-height: 1.6;
  color: #333;
}

/* RESPONSIVO – MOBILE */
@media (max-width: 768px) {
  .catalogo-aviso {
    /* em vez de ficar 100% colado, ganha margem lateral */
    margin: 30px 15px;
    /* 30px em cima/baixo, 15px nas laterais */
    padding: 20px 15px;
    /* um pouco menos de padding pra caber melhor */
  }

  .catalogo-aviso h1 {
    font-size: 1.4rem;
  }

  .catalogo-aviso p {
    font-size: 0.95rem;
  }
}



















/*FORMATAÇÃO PAGINA CONTATO*/


.contato-page {
  width: 100%;
  box-sizing: border-box;
}

.contato-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0px 50px 40px;
  box-sizing: border-box;
}

/* Texto inicial */
.contato-intro {
  margin-bottom: 18px;
}

.contato-title {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.1;
  color: #003366;
}

.contato-text {
  margin: 0;
  color: #666666;
  text-align: justify;
}

/* GRID principal (form à esquerda / coluna à direita) */
.contato-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  align-items: stretch;
  min-width: 0; /* evita overflow em grid */
}

/* Coluna direita empilhada */
.contato-side {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 14px;
  min-width: 0;
}

/* Cards (quadros vermelhos da sua imagem — você pode trocar as cores pelo padrão do site) */
.contato-card,
.contato-map-card {
  border-radius: 10px;
  padding: 16px;
  box-sizing: border-box;
  background: rgb(255, 255, 255);
  min-width: 0;
}

.contato-card-title {
  margin: 0 0 14px;
  font-size: 24px;
  letter-spacing: 0.5px;
  color: #003366;
}

.contato-card-title--center {
  text-align: center;
}

/* ===== Form ===== */
.contato-form {
  display: grid;
  gap: 12px;
}

.contato-row {
  display: grid;
  gap: 6px;
}

.contato-row label {
  font-size: 14px;
}

.req {
  color: #c40000;
}

/* Inputs/Select/Textarea - ajuste para bater com seu padrão */
.contato-form input,
.contato-form select,
.contato-form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d5dce6;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  background: #fff;
  color: #111;
  font-size: 13px;
  resize: none;
}

/* Focus */
.contato-form input:focus,
.contato-form select:focus,
.contato-form textarea:focus {
  border-color: #003366;
  box-shadow: 0 0 0 3px rgba(0, 51, 102, .12);
}

/* Botões (troque pelas classes do seu site se já tiver) */
.contato-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.btn-padrao {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: red;
  color: #fff;
}

.botao-padrao:hover {
  background: rgba(0, 0, 0, 0.95);
  color: #fff;
  transform: scale(1.009);
}

.btn-padrao.btn-secundario {
  background: #333;
}

/* ===== Infos (direita superior) ===== */
.contato-info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.contato-info li {
  display: grid;
  grid-template-columns: 20px auto 1fr;
  gap: 10px;
  align-items: start;
  min-width: 0;
}

.contato-info i {
  margin-top: 2px;
  opacity: 0.9;
}

.info-label {
  white-space: nowrap;
    font-size: 14px;

}

.info-link,
.info-text {
  min-width: 0;
  word-break: break-word;
}

.info-link {
  color: inherit;
  text-decoration: none;
}

.info-link:hover {
  text-decoration: underline;
}

/* ===== Redes sociais ===== */
.social-head {
  margin-bottom: 10px;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 6px 0 2px;
}

.social-link {
  font-size: 24px;
  color: #666;
  text-decoration: none;
  line-height: 1;
  transition: color 0.2s, transform 0.2s;
}

.social-link:hover {
  opacity: 0.75;
  transform: scale(1.16);
  color: #006600;
}

/* ===== Foto fachada ===== */
.contato-card--foto {
  padding: 10px;
}

.foto-box {
  width: 100%;
  height: 100%;
  min-height: 190px;
  border-radius: 6px;
  overflow: hidden;
}

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

/* ===== Mapa ===== */
.contato-map-card {
  margin-top: 14px;
}

.map-box {
  width: 100%;
  height: 360px;
  border-radius: 6px;
  overflow: hidden;
}

/* ===== Responsivo ===== */
@media (max-width: 900px) {
  .contato-grid {
    grid-template-columns: 1fr;
  }

  .contato-side {
    grid-template-rows: auto auto auto;
  }

  .map-box {
    height: 320px;
  }
}

@media (max-width: 520px) {
  .contato-wrap {
    padding: 22px 12px 34px;
  }

  .contato-card,
  .contato-map-card {
    padding: 14px;
  }

  .contato-info li {
    grid-template-columns: 20px 1fr;
  }

  .info-label {
    grid-column: 2;
  }

  .info-link,
  .info-text {
    grid-column: 2;
  }
}

/* ===== Canais de atendimento (visual melhor) ===== */

.contato-card--info{
  background: #fff;              /* ou sua cor padrão */
  border-radius: 12px;
  padding: 18px;
}

.contato-card--info .contato-card-title{
  margin-bottom: 14px;
  font-size: 24px;
}

/* lista */
.contato-info{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

/* item */
.info-item{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.03);
}

/* ícone em “bolinha” */
.info-ico{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 140, 255, 0.10); /* ajuste para sua paleta */
  border: 1px solid rgba(0,0,0,0.06);
}

.info-ico i{
  font-size: 18px;
  opacity: 0.9;
}

/* texto */
.info-txt{
  min-width: 0;
  display: grid;
  gap: 2px;
}


.info-value{
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  line-height: 1.35;
  word-break: break-word;
  color: #003366;
}

a.info-value:hover{
  color: #006600;
}

/* um “hover” suave no item */
.info-item:hover{
  background: rgba(0,0,0,0.045);
}

/* mobile: aumenta respiro e evita aperto */
@media (max-width: 520px){
  .info-item{
    padding: 12px;
    grid-template-columns: 40px 1fr;
  }
  .info-ico{
    width: 40px;
    height: 40px;
  }
}


/* ===== FIX alinhamento dos itens de contato ===== */

/* garante o layout do item */
.contato-card--info .info-item{
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  overflow: hidden; /* evita o ícone "vazar" */
}

/* bolinha do ícone sempre centralizada */
.contato-card--info .info-ico{
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  display: flex !important;              /* troca grid por flex (mais compatível) */
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* zera qualquer estilo estranho do FontAwesome */
.contato-card--info .info-ico i{
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
}

/* bloco do texto: evita subir/encostar no ícone */
.contato-card--info .info-txt{
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

/* label e valor com baseline bem alinhada */
.contato-card--info .info-label{
  line-height: 1.1 !important;
}

.contato-card--info .info-value{
  line-height: 1.35 !important;
  margin: 0 !important;
}



.titulo-destaque{
text-align: left;
font-size: 25px;
font-weight: bold;
margin-top: 50px;
color: #000000 !important;

}


.texto-politica{
text-align: left;
color: #666666 !important;
font-size: 15px;
}





/* ================================
   Banner de Cookies (INDFOL)
   ================================ */

.cookie-banner {
  position: fixed;
  left: 16px !important;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  background: #0b1220; /* escuro */
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  display: none; /* JS mostra */
}

.cookie-banner__title {
  font-weight: 800;
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: .2px;
}

.cookie-banner__text {
  margin: 0 0 10px;
  line-height: 1.35;
  color: rgba(255,255,255,.9);
  font-size: 14px;
}

.cookie-banner__text a {
  color: #93c5fd;
  text-decoration: underline;
}

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

.cookie-btn {
  border: 0;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 14px;
}

.cookie-btn--accept {
  background: #22c55e;
  color: #06210f;
}

.cookie-btn--reject {
  background: rgba(255,255,255,.12);
  color: #fff;
}

@media (min-width: 900px) {
  .cookie-banner {
    left: auto;
    right: 20px;
    max-width: 560px;
  }
}

















.wpp-float{
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 70px;
  height: 70px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 9999;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* chama atenção */
.wpp-float::before{
  content: "";
  position: absolute;
  inset: -20px;
  border-radius: inherit;
  background: rgba(37, 211, 102, .35);
  filter: blur(1px);
  animation: wppPulse 1s ease-out infinite;
  z-index: -1;
}

.wpp-float:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,.30);
  filter: saturate(1.1);
}


.wpp-icon i{
  font-size: 35px; /* ajuste fino: 36~44 fica ótimo */
}



.wpp-icon{
  line-height: 0;
}

.wpp-badge{
  position: absolute;
  top: 0px;
  right: 0px;
  min-width: 18px;
  height: 18px;
  padding: 0 0px;
  border-radius: 999px;
  background: #ff7b00;
  color: #fff;
  font-size: 11px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
}

@keyframes wppPulse{
  0%   { transform: scale(.85); opacity: .75; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* mobile: um pouco menor */
@media (max-width: 480px){
  .wpp-float{
    width: 54px;
    height: 54px;
    right: 14px;
    bottom: 14px;
  }
}



.link-privacidade{
color: white;

}


/* Lightbox abre tanto com [open] quanto com aria-hidden="false" */
.lightbox[open],
.lightbox[aria-hidden="false"] {
  display: grid;
}

/* garante clique nos botões do lightbox */
#lightbox #lbPrev,
#lightbox #lbNext {
  pointer-events: auto !important;
  z-index: 999999 !important;
}




























































/* Setas: usam a skin do Swiper (mesmo visual das setas do carrossel) */
.lightbox__prev,
.lightbox__next {
  background-color: black;
  padding: 5px;
  border-radius: 10%;
  width: 37px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.4;
  transition: 0.3s;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.lightbox__prev {
  left: 10px;
}

.lightbox__next {
  right: 10px;
}

@media (max-width:720px) {
  .lightbox__prev {
    left: 6px;
  }

  .lightbox__next {
    right: 6px;
  }
}

/* Skin Swiper aplicada nas setas do lightbox */

.lightbox__prev:hover,
.lightbox__next:hover {
  opacity: 1;
}

.lightbox__prev::after,
.lightbox__next::after {
  color: white;
  font-size: 20px;
  font-family: swiper-icons;
}

#lightbox #lbPrev::after {
  content: "prev";
}

#lightbox #lbNext::after {
  content: "next";
}






















/* ==========================================================================
   LIGHTBOX — Swipe/Drag + animação de troca (para 2 lightboxes)
   Suporta IDs de imagem: #lbImg e #lightbox-img
   ========================================================================== */

/* base (animação + swipe/drag) */
#lightbox #lbImg,
#lightbox #lightbox-img{
  transition: transform .22s ease, opacity .22s ease;
  will-change: transform, opacity;

  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* swipe horizontal consistente */
  cursor: grab;
}

/* cursor durante o arrasto (classe adicionada no JS) */
#lightbox .lightbox__inner.is-grabbing #lbImg,
#lightbox .lightbox__inner.is-grabbing #lightbox-img{
  cursor: grabbing;
}

/* saída */
#lightbox #lbImg.lb-exit-left,
#lightbox #lightbox-img.lb-exit-left{
  transform: translateX(-5px);
  opacity: 0;
}

#lightbox #lbImg.lb-exit-right,
#lightbox #lightbox-img.lb-exit-right{
  transform: translateX(5px);
  opacity: 0;
}

/* entrada / estado normal */
#lightbox #lbImg.lb-enter,
#lightbox #lightbox-img.lb-enter{
  transform: translateX(0);
  opacity: 1;
}







/* cursor durante arrasto (vale para inner OU box) */
.lightbox__inner.is-grabbing #lbImg,
.lightbox__inner.is-grabbing #lightbox-img,
.lightbox__box.is-grabbing #lbImg,
.lightbox__box.is-grabbing #lightbox-img{
  cursor: grabbing !important;
}







/* ==========================================================
   CURSOR (mãozinha) — garante GRAB/GRABBING só dentro do LIGHTBOX
   Funciona para:
   - Produtos: .lightbox__box + #lightbox-img
   - Fotos:    .lightbox__inner + #lbImg
   ========================================================== */

/* estado normal: mão aberta em toda a área do lightbox */
#lightbox .lightbox__box,
#lightbox .lightbox__inner,
#lightbox .lightbox__box *,
#lightbox .lightbox__inner *{
  cursor: grab;
}

/* durante o arrasto (quando o JS adiciona .is-grabbing) */
#lightbox .lightbox__box.is-grabbing,
#lightbox .lightbox__box.is-grabbing *,
#lightbox .lightbox__inner.is-grabbing,
#lightbox .lightbox__inner.is-grabbing *{
  cursor: grabbing !important;
}

/* (produtos) quando o JS marca o #lightbox inteiro como is-grabbing */
#lightbox.is-grabbing .lightbox__box,
#lightbox.is-grabbing .lightbox__box *{
  cursor: grabbing !important;
}

/* botões continuam com cursor de clique quando NÃO estiver arrastando */
#lightbox:not(.is-grabbing) #lbClose,
#lightbox:not(.is-grabbing) #lbPrev,
#lightbox:not(.is-grabbing) #lbNext{
  cursor: pointer;
}













/* ===== Botão único do 3D ===== */
.produto-3d-open{
  display: grid;
  gap: 6px;
  margin: 14px 0 6px;
  justify-items: center;
  font-size: 10px !important;
}

#abrir3d{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 999px;
}

.produto-3d-hint{
  opacity: .75;
  font-size: 12px;
}













/* ===== Setas dentro do viewer ===== */
.viewer-wrap{
  position: relative;
}

.mv-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  background-color: black;
  padding: 5px;
  border-radius: 10%;
  width: 37px;
  height: 54px;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0.4;
  transition: 0.3s;
  border: none;
  box-shadow: none;
  cursor: pointer;
}

.mv-arrow:hover{ opacity: 1; }

.mv-prev{ left: 12px; }
.mv-next{ right: 12px; }

/* seta padrão Swiper (igual ao lightbox) */
.mv-arrow::after{
  color: white;
  font-size: 20px;
  font-family: swiper-icons;
}

/* define o conteúdo “prev/next” */
#mvPrev::after{ content: "prev"; }
#mvNext::after{ content: "next"; }


















/* Label do modelo */
.mv-label{
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 10px;
  max-width: calc(100% - 24px);
  backdrop-filter: blur(6px);
  font-weight: bold;
}























/* Esconde os 3 botões antigos (mas mantém para o JS pegar os modelos) */
.produto-botoes{
  display: none !important;
}







/* Estilo exclusivo do botão "Abrir 3D" */
.btn-3d-open{
  display: flex;
  align-items: center;
  gap: 5px !important;
  font-size: 11px;
  justify-content: center;
  border-radius: 5px !important;
  text-align: center;

  padding: 7px 7px !important;   /* ↓ diminui a altura aqui */
  min-height: unset;    /* remove altura mínima se existir */
  line-height: 1.2;     /* evita ficar “esticado” */

}

/* opcional: ícone um pouco maior */
.btn-3d-open i{
  font-size: 11px;
}

/* opcional: ocupar mais largura (bom no mobile) */
@media (max-width: 768px){
  .btn-3d-open{
    width: 100%;
    justify-content: center;
  }
}





/* === Outros produtos: centralizar no mobile === */
@media (max-width: 740px){
  .produto-outros{
    display: flex;
    flex-direction: column;
    align-items: center; /* centraliza título e grid */
  }

  #outros-grid{
    width: 100%;
    max-width: 520px;    /* ajuste fino: 480~560 costuma ficar perfeito */
    margin: 0 auto;      /* centraliza o grid no container */
  }
}

































/* ==========================================================
   GALERIA (Swiper) — Cursor de arrastar + ícone real de zoom
   - grab/grabbing no slide e imagem
   - zoom-in apenas no botão de zoom (cantinho)
   ========================================================== */

/* Cursor padrão: ARRSTAR (inclusive em cima da imagem) */
.produto-galeria .galeria-swiper,
.produto-galeria .galeria-swiper .swiper-wrapper,
.produto-galeria .galeria-swiper .swiper-slide,
.produto-galeria .galeria-swiper .swiper-slide img {
  cursor: grab !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Quando arrastando */
.produto-galeria .galeria-swiper.is-dragging,
.produto-galeria .galeria-swiper.is-dragging .swiper-slide,
.produto-galeria .galeria-swiper.is-dragging .swiper-slide img {
  cursor: grabbing !important;
}

/* Deixa o slide pronto pra receber overlay */
.produto-galeria .galeria-swiper .swiper-slide {
  position: relative;
}

/* Botão de zoom (elemento real) */
.produto-galeria .zoom-overlay {
  position: absolute;
  background-color: black;
  opacity: 0.4;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffffff;
  border: 0;
  padding: 0;
  z-index: 5;
  cursor: zoom-in !important;
  transition: 0.3s;
}

.produto-galeria .zoom-overlay:hover {
  opacity: 1;
  color: #ffffff;
}

/* Ícone FontAwesome dentro do botão */
.produto-galeria .zoom-overlay i {
  font-size: 15px;
  pointer-events: none; /* clique fica no botão */
}

/* Não mostrar o botão no mobile se quiser (opcional)
@media (max-width: 640px){
  .produto-galeria .zoom-overlay { display:none; }
}
*/








/* ✅ impede o navegador de "arrastar a imagem" no desktop */
.produto-galeria .galeria-swiper img{
  -webkit-user-drag: none;
  user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  pointer-events: auto;
}