@charset "utf-8";
@import url('../lib/bootstrap/css/bootstrap.min.css');
@import url('../lib/font-awesome/font-awesome.min.css');
@import url('../lib/ekko-lightbox/ekko-lightbox.css');
@import url('../lib/owl-carousel/owl.carousel.min.css');
@import url('../lib/owl-carousel/owl.theme.default.min.css');
@import url('../lib/whatsapp-widget/whatsapp.css');
@import url('../lib/font-avenirLtd/font-avenirLtd.css');
@import url('color.css');
@import url('custom.css');

html, body{
	margin:0;
	padding:0;
	overflow-x:hidden !important;
	background: #fff;
}

body{
	font-family: 'Avenir-Light';
	font-size:15px;
	line-height:23px;
	color:#666;
}

.textos-medium{
	font-family: 'Avenir-Medium' !important;
}
.textos-bold{
	font-family: 'Avenir-Black' !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1240px;
    }
}

a,
a:link,
a:active,
a:visited{
	color:var(--pink);
	transition:0.5s;
	text-decoration:none
}
a:hover{
	color:#666
}


/* LINKS */
.cor-links-rodape a,
.cor-links-rodape a:link,
.cor-links-rodape a:active,
.cor-links-rodape a:visited{
	color:#fff;
	transition:0.5s
}
.cor-links-rodape a:hover{
	color:var(--green) !important;
	opacity:1 !important
}

@media (min-width: 1200px) {
  .container {
    max-width: 1320px;
  }
}

#menuHeader{
	z-index:999	
}


/* BARRA DE PROGRESSO */
#progress-bar {
  --scrollAmount: 0%;
  background-color: var(--green) !important;
  width: var(--scrollAmount) !important;
  height: 4px !important;
  position: fixed !important;
  top: 0 !important;
  z-index:999999999 !important
}

.buscador{
	position: relative;
	width: 100%;
	max-width: 335px; /* ajuste aqui se quiser maior */
}

.buscador-input{
	width: 100%;
	height: 46px;
	border: 0;
	outline: none;
	border-radius: 999px;
	padding: 0 54px 0 18px;
	background: rgba(255,255,255,0.20);
	color: #fff;
	font-size: 14px;
}

.buscador-input::placeholder{
	color: rgba(255,255,255,0.85);
}

.buscador-btn{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #fff;
}

.buscador-input:focus{
	background: rgba(255,255,255,0.26);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.zoom-container {
  position: relative;
  overflow: hidden;
  width: 100%; /* ou defina uma largura fixa, ex: 300px */
  height: auto; /* defina uma altura desejada */
  border-radius: 0px 40px 0px 40px;
}

.zoom-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  opacity:1;
}

.zoom-container:hover img {
  transform: scale(1.1);
  opacity:0.7
}

.opacity-04{
	opacity:0.4	
}

/* LINKS */
.cor-links-rodape a,
.cor-links-rodape a:link,
.cor-links-rodape a:active,
.cor-links-rodape a:visited{
	font-family: 'Avenir-Light';
	color:#fff;
	font-size:16px;
	text-decoration:none;
	transition:0.5s;
}
.cor-links-rodape a:hover{
	opacity:0.4;
}

.cor-links-noticias a,
.cor-links-noticias a:link,
.cor-links-noticias a:active,
.cor-links-noticias a:visited{
	color:var(--blue);
	transition:0.5s;
	text-decoration:none
}
.cor-links-noticias a:hover{
	opacity:0.4
}


/* MENU */
.menu-fixo{
	position: fixed;
	top: 0;
	z-index: 99;
	transition: all .5s;
}

@media only screen and (max-width: 600px) {
	.menu-fixo{
		position:inherit;
	}
}

.dropdown-toggle::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 600; /* necessário para ícones 'solid' */
    border: 0;
    margin-left: .4em;
    vertical-align: .0em;
	position: relative;
    top: 1px; /* faz o ícone descer */
}

.navbar-brand{
	padding:0px
}
.navbar-brand img{
	height:80px;
	transition:0.5s
}
.menu-fixo .navbar-brand img{
	height:60px;
	transition:0.5s
}

.navbar{
	margin:0;
	padding:0	
}

.navbar-nav .nav-item a{
	font-family: 'Avenir-Medium';
	padding: 13px 13px;
	font-size:15px;
	margin: 8px 20px;
	color: #fff;
	transition: 0.5s;
}

.dropdown-menu .dropdown-item{
	font-family: 'Avenir-Light';
	padding: 5px 20px !important;
	font-size:15px;
	margin: 0px !important;
	color: #fff;
	transition: 0.5s;
}

@media only screen and (max-width: 600px) {
	.navbar-nav .nav-item a{
		margin: 0px;
	}
}

.navbar-nav .nav-link:hover{
	opacity:0.4
}

.dropdown-item{
    font-size: 13px;
	line-height: 15px;
	color: #fff !important;
	padding:0 !important;
}

.dropdown-menu{
	top:73%;
	left:9px !important
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #ffffff !important;
	background: var(--green);
	opacity:1 !important
}

.dropdown-item.active,.dropdown-item:active{
	color: #ffffff !important;
	text-decoration: none;
	background: var(--green) !important;
	opacity:1 !important
}

.dropdown:hover>.dropdown-menu {
  display: block;
  left: 0px;
  border: none
}
.navbar-toggler-icon{
	margin-bottom: 5px	
}
@media only screen and (max-width: 600px) {
	.navbar-collapse{
		margin-top:20px
	}	
	.nav-link {
	   padding: 5px 20px !important;
	}
	.navbar-collapse{
		margin-bottom: 10px	
	}
	.dropdown:hover>.dropdown-menu {
	  margin-left: 15px;
	  margin-right: 15px;
	}
	.navbar-nav li.nav-item:nth-child(8),
	.navbar-nav li.nav-item:nth-child(9){
		display:inline !important
	}
	.dropdown-menu{
		width:92% !important
	}

}

.produto-lista-margin-selo{
	margin-bottom:70px;
}
.produto-lista-margin-nome{

}
@media only screen and (max-width: 600px) {
	.produto-lista-margin-selo{
		margin:auto;
		margin-bottom:20px;
	}
	.produto-lista-margin-nome{
		margin-top:20px
	}
}


/* MENU SOCIAL TOP */
.menu-social-top{
	list-style:none;
	padding:0;
	margin:0;
	text-align:right;
}
.menu-social-top > li{
	display:inline-table	
}
.menu-social-top > li > a,
.menu-social-top > li > a:link,
.menu-social-top > li > a:active,
.menu-social-top > li > a:visited,
.menu-social-top > li > a:focus{
	display:block;
	font-size:18px;
	line-height:26px;
	background:var(--blue);
	color:#fff;
	padding:4px;
	border-radius:50%;
	height:35px;
	width:35px;
	text-align:center;
	margin:0px 2px 0px 0px;
	cursor:pointer;
	transition:0.5s
}
.menu-social-top > li > a:hover{
	background:var(--green);
	color:#fff;
	opacity: 1
}
@media only screen and (max-width: 600px) {
	.menu-social-top{
		margin-left:auto;
		margin-right:auto;
		width:100%;
		margin-bottom:10px;
		text-align:center;
	}
	.menu-social-top > li{
		display:inline-table;
		margin-left:0px;
		margin-right:0px;
	}
}

/* MENU SOCIAL TOP */
.menu-social-bottom{
	list-style:none;
	padding:0;
	margin:0;
	text-align:left;
}
.menu-social-bottom > li{
	display:inline-table	
}
.menu-social-bottom > li > a,
.menu-social-bottom > li > a:link,
.menu-social-bottom > li > a:active,
.menu-social-bottom > li > a:visited,
.menu-social-bottom > li > a:focus{
	display:block;
	font-size:18px;
	line-height:26px;
	background:var(--pink);
	color:#fff;
	padding:4px;
	border-radius:50%;
	height:35px;
	width:35px;
	text-align:center;
	margin:0px 2px 0px 0px;
	cursor:pointer;
	transition:0.5s
}
.menu-social-bottom > li > a:hover{
	background:var(--green);
	color:#fff;
	opacity: 1
}
@media only screen and (max-width: 600px) {
	.menu-social-bottom{
		margin-left:auto;
		margin-right:auto;
		width:100%;
		margin-bottom:10px;
		text-align:center;
	}
	.menu-social-bottom > li{
		display:inline-table;
		margin-left:0px;
		margin-right:0px;
	}
}


/* BOTOES */
.botoes-sem-cor,
.botoes-sem-cor a,
.botoes-sem-cor a:link,
.botoes-sem-cor a:active,
.botoes-sem-cor a:visited{
	padding: 11px 25px;
	font-family: 'Avenir-Black' !important;
	color:#fff;
	font-size:15px;
	font-weight: 700;
	margin: 5px;
	border-radius: 20px;
	transition: 0.5s;
	display:inline-block
}
.botoes-sem-cor:hover,
.botoes-sem-cor a:hover{
	opacity:0.5
}

/* FORMS */
.form-control input[type=select]{
	height:70px !important
}

.form-control-busca{
	padding:4px 12px;
	border-radius:10px;
	border:solid 1px #cacaca !important;
	width:97%;
	font-weight:500 !important;
	font-size:14px
}

.form-control{
	padding:10px 25px;
	border: 1px solid #cacaca;
	font-size:16px !important;
	height:48px;
	margin-bottom:11px;
	border-radius:5px;
	margin-top:3px;	
	font-weight:600
}
.form-control:focus,
.form-control-busca:focus{
	background:#f9f9f9;
}
::placeholder{
  color: #999 !important;
  opacity: 1;
}

:-ms-input-placeholder{
  color: #999 !important;
}

::-ms-input-placeholder{
  color: #999 !important;
}
.has-error .checkbox, 
.has-error .checkbox-inline, 
.has-error .control-label, 
.has-error .help-block, 
.has-error .radio, 
.has-error .radio-inline, 
.has-error .checkbox label, 
.has-error .checkbox-inline label, 
.has-error .radio label, 
.has-error .radio-inline label{
    color: #be1622;
}
.help-block {
    display: block;
    margin-top: 5px;
    margin-left: 16px;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 800;
    color: #be1622;
}


.page-item > .page-link > span > i{
	color:#555;
}
.page-item > .page-link:hover > span > i{
	color:#fff
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff !important;
    background-color: var(--blue);
    border-color: var(--blue);
	font-weight:800
}
.page-link{
	background-color: transparent;
    border-color: #cacaca;
	color:#555 !important;
	font-weight:800
}
.page-link:hover {
    background-color: var(--orange);
    border-color: var(--orange);
	color:#fff !important
}

.modal{
	/* escurece um pouco */
	background: rgba(0,0,0,.25) !important;

	/* desfoca o fundo (o site atrás) */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}


@media (min-width: 576px){
	.modal-dialog {
		max-width: 500px;
	}
}
.modal-content {
	border:none !important	
}

.ekko-lightbox .modal-footer {
    text-align:center !important;
}

.modal-open {
    overflow: hidden !important;
}

.textos_proposito{
	font-size: 30px !important
}
@media only screen and (max-width: 600px) {
	.textos_proposito{
		font-size: 20px !important
	}
}


.year-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
  font-weight: bold;
  text-decoration: none;
}

.year-item span {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: solid 2px #ccc;
  border-radius: 50%;
  margin-bottom: 5px;
  display: inline-block;
  box-sizing: border-box;
  line-height: 0; /* impede que texto oculto afete a altura */
  overflow: hidden;
}

/* Quando estiver ativo (selecionado) */
.year-item.active span {
  border:solid 2px var(--orange);
}

.year-item:hover span {
  border: solid 2px var(--orange);
}

/* Barra de anos superior */
.timeline-years {
  position: relative;

}
.timeline-years .year-item {
  text-align: center;
  font-size:17px;
  font-family: 'Avenir-Black' !important;
  color: var(--blue);
  position: relative;
  margin:2px 15px;
}
.timeline-years .year-item.active span {
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
}

/* Linha vertical */
.timeline {
  position: relative;
  margin: 0 auto;
  padding: 0 0 40px;
  width: 100%;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  height: 100%;
  background-color: var(--orange);
  z-index: 0;
}

/* Item da timeline */
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  margin-bottom: 80px;
}

.timeline-item.left .content-box {
  order: 1;
  text-align: right;
}
.timeline-item.left .timeline-img {
  order: 2;
  margin-left: 20px;
  text-align: left;
}

.timeline-item.right .content-box {
  order: 2;
  text-align: left;
}
.timeline-item.right .timeline-img {
  order: 1;
  margin-right: 20px;
  text-align: right;
}

.timeline-item .content-box {
  width: 45%;
}
.timeline-item .timeline-img {
  width: 45%;
}

.timeline-img img {
  max-width: 350px;
  height: 350px;
  display: inline-block;
  border: solid 15px !important;
  object-fit: cover; /* mantém o corte proporcional, caso queira */
}

@media only screen and (max-width: 600px) {
	.timeline-img img {
	  max-width: 200px;
	  height: 200px;
	  display: inline-block;
	  border: solid 7px !important;
	  object-fit: cover; /* mantém o corte proporcional, caso queira */
	}
}

.timeline-item .circle-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  background-color: var(--orange);
  border-radius: 50%;
  z-index: 2;
  border: 3px solid #fff;
}
.timeline-ano-circulo {
  width: 110px;
  height: 110px;
  background: var(--purple);
  border-radius: 50%;
  font-family: 'Avenir-Black' !important;
  font-size: 35px;
  color: #fff;
  margin-bottom:30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Alinhamento à esquerda */
.timeline-item.left .timeline-ano-circulo {
  margin-left: auto;
}

/* Alinhamento à direita */
.timeline-item.right .timeline-ano-circulo {
  margin-right: auto;
}


.card-soft{
  border: 0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}


/* ===========================
   POPUP NEWSLETTER (NL)
   =========================== */
.nl-overlay{
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;

	/* escurece um pouco */
	background: rgba(0,0,0,.25);

	/* desfoca o fundo (o site atrás) */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
	.nl-overlay{ background: rgba(0,0,0,.55); }
}

.nl-overlay.is-open{ display: flex; }

.nl-select,
.nl-select option{
	font-family: 'Avenir-Black', Arial, sans-serif;
	font-size: 14px;
}

.nl-modal{
	position: relative;
	width: min(640px, 96vw);
	max-height: 92vh;
	overflow: visible; /* ✅ NÃO corta as nuvens */
	background: #fff;
	border-radius: 18px;
	box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.nl-close{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 8px;
	background: rgba(0,0,0,.06);
	font-size: 22px;
	line-height: 34px;
	cursor: pointer;
	z-index: 20; /* acima das nuvens */
}

/* TOP */
.nl-top{
	position: relative;
	border-radius: 18px 18px 0 0;
	overflow: visible; /* ✅ permite “vazar” */
}

.nl-top-art{
	position: relative; /* referência pras nuvens */
	height: 180px;
	padding-top: 20px;
	background: #6a2a86; /* roxo topo */
	overflow: visible;   /* ✅ permite “vazar” */
}

/* ✅ NUVENS */
.nl-cloud{
	position: absolute;
	bottom: 30px;
	width: auto;
	height: auto;
	z-index: 15;
	pointer-events: none;
	user-select: none;
}

.nl-cloud-left{ left: -30px; }
.nl-cloud-right{ right: -30px; }

/* garante a imagem do topo abaixo das nuvens */
.nl-top-art img:not(.nl-cloud){
	position: relative;
	z-index: 1;
	max-width: 100%;
	height: 140px;
}

/* CORPO (scroll fica aqui, não no modal inteiro) */
.nl-body{
	padding: 26px 26px 22px;
	max-height: calc(92vh - 250px); /* 250px = altura do topo */
	overflow: auto;                /* ✅ scroll aqui */
}

/* form */
.nl-form{ margin: 0; }

.nl-row{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 12px;
}

.nl-row.nl-row-one{
	grid-template-columns: 1fr;
}

.nl-input,
.nl-select{
	font-family: 'Avenir-Black', Arial, sans-serif;
	width: 100%;
	height: 42px;
	padding: 0 14px;
	border: 1px solid #cfc6d6;
	border-radius: 10px;
	outline: none;
	background: #fff;
	color: #333;
	font-size: 14px;
}

.nl-input::placeholder{ color: #9c9c9c; }

.nl-input:focus,
.nl-select:focus{
	border-color: #6a2a86;
	box-shadow: 0 0 0 3px rgba(106,42,134,.15);
}

/* botões (caso use .nl-btn) */
.nl-btn{
	height: 42px;
	border: 0;
	border-radius: 10px;
	background: #9ac43c;
	color: #fff;
	font-weight: 800;
	letter-spacing: 1px;
	cursor: pointer;
	text-transform: uppercase;
	transition: .2s;
}

.nl-btn:hover{ filter: brightness(.95); }
.nl-btn:disabled{ opacity: .7; cursor: not-allowed; }

/* mensagem */
.nl-msg{
	min-height: 18px;
	font-size: 13px;
	margin: 2px 0 8px;
}

.nl-msg.is-ok{ color: #1a7f37; }
.nl-msg.is-err{ color: #b42318; }

/* checkbox */
.nl-nomore{
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 13px;
	color: #666;
	user-select: none;
	margin-top: 6px;
}

.nl-nomore input{ transform: translateY(1px); }

/* responsivo */
@media (max-width: 680px){
	.nl-top-art{ height: 170px; }
	
	.nl-top-art img:not(.nl-cloud){
		height: 130px;
	}

	.nl-cloud{
		bottom: 20px;
		width: 70px;
	}

	.nl-cloud-left{ left: -13px; }
	.nl-cloud-right{ right: -13px; }

	.nl-row{ grid-template-columns: 1fr; }
}

/* BOTÃO FECHAR (bolinha colorida) */
.nl-close{
	position: absolute;
	top: -10px;
	right: -10px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--orange); /* verde (troque pela cor que quiser) */
	color: #fff;
	font-size: 22px;
	line-height: 34px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0,0,0,.22);
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.nl-close:hover{
	filter: brightness(.95);
	transform: scale(1.04);
	box-shadow: 0 14px 32px rgba(0,0,0,.26);
}

.nl-close:active{
	transform: scale(.98);
}

.nl-close:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(154,196,60,.25), 0 10px 24px rgba(0,0,0,.22);
}

/* ===== ACCORDION HORIZONTAL (abas verticais) ===== */
.valores-accordion{
	--radius: 14px;
	--tabW: 56px;

	display: flex;
	align-items: stretch;
	gap: 12px;
	width: 100%;
}

/* abas */
.va-tab{
	flex: 0 0 var(--tabW);
	border: 0;
	background: var(--tabColor, #999);
	border-radius: var(--radius);
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	min-height: 300px;
	transition: .2s;
}

.va-tab.active{
	filter: brightness(.95);
	outline: 3px solid rgba(0,0,0,.06);
}

.va-tab-label{
	color: #fff;
	font-family: 'Avenir-Black', Arial, sans-serif;
	font-size: 16px;
	letter-spacing: .5px;
	text-transform: uppercase;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	user-select: none;
}

.va-tab-arrow{
	position: absolute;
	bottom: 10px;
	color: #fff;
	font-size: 26px;
	line-height: 1;
	opacity: .9;
}

/* painel central */
.va-panel{
	flex: 1 1 auto;
	min-width: 0;
	border-radius: var(--radius);
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 220px;
	box-shadow: 0 10px 30px rgba(0,0,0,.08);

	/* animação suave */
	opacity: 0;
	transform: translateX(14px);
	clip-path: inset(0 100% 0 0 round var(--radius)); /* escondido pela direita */
	will-change: transform, opacity, clip-path;
	transition: clip-path .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, transform .45s ease;
}

.va-panel.is-open{
	opacity: 1;
	transform: translateX(0);
	clip-path: inset(0 0 0 0 round var(--radius)); /* abre para a esquerda */
}

.va-panel-img{
	background: #ddd;
	overflow: hidden;
}

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

.va-panel-content{
	padding: 28px 24px;
	display: flex;
	flex-direction: column;
	justify-content: center;  /* centro vertical */
	align-items: center;      /* centro horizontal */
	text-align: center;
	color: #fff;
}

.va-panel-content p{
	max-width: 520px;
}

.va-panel-title{
	margin: 0 0 12px 0;
	font-family: 'Avenir-Black', Arial, sans-serif;
	font-size: 28px;
	line-height: 1.15;
	text-transform: uppercase;
}

.va-panel-text{
	margin: 0;
	font-family: 'Avenir-Medium', Arial, sans-serif;
	font-size: 17px;
	line-height: 1.4;
}

/* Responsivo: vira vertical */
@media (max-width: 900px){
	.valores-accordion{
		flex-direction: column;
	}
	.va-tab{
		flex: 0 0 auto;
		min-height: auto;
		padding: 14px 16px;
		justify-content: space-between;
	}
	.va-tab-label{
		writing-mode: horizontal-tb;
		transform: none;
	}
	.va-tab-arrow{
		position: static;
		font-size: 22px;
	}
	.va-panel{
		grid-template-columns: 1fr;
	}
	.va-panel-img{
		height: 220px;
	}
}

/* centraliza */
.breadcrumb{
	font-family: 'Avenir-Medium', Arial, sans-serif;
	font-size: 14px;
	background: transparent;
	justify-content: center;      /* <-- centro */
	padding:17px 0px
}

/* se quiser o texto alinhado no centro também */
.breadcrumb-item{
	text-align: center;
}

.breadcrumb a{
	color: var(--blue);
}

.breadcrumb .active{
	color: #666;
	font-family: 'Avenir-Medium', Arial, sans-serif;
}


/* ===========================
   GALERIA DE PRODUTO (THUMBS)
   =========================== */

.prod-gallery{
	width: 100%;
	margin-top: -35px;
}
@media (max-width: 767.98px){
	.prod-gallery{
		width: 100%;
		margin-top: 25px;
	}
}

/* NAV (setas) */
.thumb-nav{
	border: 0;
	background: transparent;
	width: 100%;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	user-select: none;
}

/* Setas no estilo do print */
.thumb-nav::before{
	content: "";
	width: 16px;
	height: 16px;
	border-right: 5px solid #d94b8a;  /* rosa do print (ajuste se quiser) */
	border-bottom: 5px solid #d94b8a;
	display: inline-block;
	transform: rotate(-135deg); /* ▲ */
}

/* seta de baixo */
.thumb-nav-next::before{
	transform: rotate(45deg); /* ▼ */
}

/* ====== THUMBS (DESKTOP: vertical) ====== */
.thumbs{
	display: flex;
	flex-direction: column;
	gap: 16px;

	/* altura igual ao print / quadro */
	max-height: 540px;

	/* tira scroll */
	overflow: hidden;

	/* respiro lateral */
	padding: 0;
	margin: 0;

	/* se quiser alinhar tudo no centro */
	align-items: center;
}

/* Thumb (sempre com borda!) */
.thumb-btn{
	width: 100%;
	max-width: 170px;              /* controla a largura das thumbs */
	border: 1px solid #d6dbe6;     /* borda padrão (todas) */
	background: #fff;
	border-radius: 10px;
	padding: 0px;
	cursor: pointer;
	transition: .15s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* hover */
.thumb-btn:hover{
	border-color: #b9c2d6;
}

/* ativa */
.thumb-btn.is-active{
	border-color: var(--green);
	box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* imagem dentro da thumb */
.thumb-btn img{
	width: 100%;
	max-width: 120px;      /* tamanho do produto dentro */
	height: auto;
	display: block;
	margin: 0 auto;
	object-fit: contain;
 	transition: transform 0.3s ease;
    opacity:1;
}

.thumb-btn:hover img {
  transform: scale(0.9);
  opacity:0.7
}

/* ====== IMAGEM PRINCIPAL ====== */
.main-image-wrap{
	background: #fff;
	border: 1px solid #d6dbe6;
	border-radius: 12px;
	padding: 16px;

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

	min-height: 520px;
}

.main-image{
	max-width: 100%;
	max-height: 520px;
	object-fit: contain;
	cursor: zoom-in;
	transition: transform 0.3s ease;
    opacity:1;
}

.main-image:hover img {
  transform: scale(0.9);
  opacity:0.7
}

/* ===========================
   LIGHTBOX
   =========================== */
.lb-overlay{
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.75);
	padding: 18px;
}

.lb-overlay.is-open{ display:flex; }

.lb-img{
	max-width: min(1100px, 96vw);
	max-height: 90vh;
	border-radius: 12px;
	box-shadow: 0 18px 60px rgba(0,0,0,.45);
}

.lb-close{
	position: absolute;
	top: 18px;
	right: 18px;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	font-size: 26px;
	line-height: 42px;
	cursor: pointer;
}

.prod-info{
	margin-left:0px
}

/* ===========================
   MOBILE: thumbs horizontal embaixo
   =========================== */
@media (max-width: 767.98px){

	.prod-info{
		margin-left:0px;
	}
	
	/* no mobile você provavelmente quer esconder as setas ▲ ▼ de cima/baixo
	   e usar o nav-row (◀ ▶) que já existe no HTML */
	.thumb-nav.d-none{
		display: none !important;
	}

	.thumbs{
		flex-direction: row;
		gap: 12px;

		max-height: none;

		/* sem scroll visível */
		overflow: hidden;

		/* centraliza */
		align-items: center;
		justify-content: flex-start;

		/* evita esmagar */
		width: 100%;
	}

	.thumb-btn{
		flex: 0 0 auto;
		max-width: 120px;
		padding: 10px;
	}

	.thumb-btn img{
		max-width: 90px;
	}

	.main-image-wrap{
		min-height: 320px;
	}

	.main-image{
		max-height: 320px;
	}
}

/* remove header/footer do ekko */
.ekko-lightbox .modal-header,
.ekko-lightbox .modal-footer{
	display: none !important;
}

/* botão laranjado tipo newsletter */
.ekko-lightbox .lb-close-orange{
	position: absolute;
	top: -10px;
	right: -10px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--orange); /* laranja */
	color: #fff;
	font-size: 22px;
	line-height: 34px;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
	z-index: 10;
}

.ekko-lightbox .lb-close-orange:hover{
	filter: brightness(.95);
}

/* garante que o modal-content seja referência pro absolute */
.ekko-lightbox .modal-content{
	position: relative;
}

/* trava scroll (igual newsletter) */
html.lb-lock,
body.lb-lock{
	overflow: hidden !important;
}

.modal-open .modal {
  z-index: 9999999999;
}


/* ===========================
   PROD INFO (ícones + conteúdo)
   =========================== */

.prod-info{
	width: 100%;
}

.info-row{
	display: flex;
	gap: 14px;
	padding: 18px 0;
	border-bottom: 1px solid #eef1f7;
}

.info-row:last-child{
	border-bottom: 0;
}

.info-ico{
	width: 34px;
	flex: 0 0 34px;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding-top: 2px;
	color: #8b94a7; /* cinza elegante igual print */
	font-size: 18px;
}

.info-body{
	flex: 1 1 auto;
	min-width: 0;
}

.info-title{
	font-family: 'Avenir-Black', Arial, sans-serif;
	font-size: 13px;
	letter-spacing: .8px;
	text-transform: uppercase;
	color: #9aa3b5;
	margin-bottom: 6px;
}

.info-text{
	font-family: 'Avenir-Medium', Arial, sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: #9aa0ad;
}

.info-text strong{
	font-family: 'Avenir-Black', Arial, sans-serif;
	color: #8e95a6;
}

/* links dentro do conteúdo */
.info-text a{
	color: var(--purple);
	text-decoration: none;
}
.info-text a:hover{
	text-decoration: underline;
}

/* bolinha de cor */
.color-dot{
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--dot, #eaeaea);
	display: inline-block;
	margin:3px
}

/* mobile */
@media (max-width: 767.98px){
	.info-row{
		padding: 14px 0;
	}
	.info-text{
		font-size: 14px;
	}
}

/* 2 colunas dentro do info-body */
.info-grid-2{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px; /* linha/coluna */
	align-items: start;
}

.info-cell{
	min-width: 0;
}

/* se só existir 1 item, ele ocupa 1 coluna normal */
.info-grid-2:has(.info-cell:only-child){
	grid-template-columns: 1fr;
}

/* mobile: vira 1 coluna */
@media (max-width: 767.98px){
	.info-grid-2{
		grid-template-columns: 1fr;
		gap: 10px;
	}
}


/* ===========================
   MOBILE: thumbs abaixo + setas left/right
   =========================== */
@media (max-width: 767.98px){

	/* força a ordem: imagem principal primeiro, thumbs depois, infos por último */
	.col-lg-6.col-md-9{ order: 1; }   /* imagem */
	.col-lg-2.col-md-3{ order: 2; }   /* thumbs */
	.col-lg-4{ order: 3; }            /* infos */

	/* thumbs vira horizontal */
	.thumbs{
		flex-direction: row;
		gap: 12px;
		max-height: none;
		overflow: hidden;
		width: 100%;
		justify-content: center; /* ou flex-start se preferir */
	}

	/* no mobile, NÃO usar as setas de cima/baixo (desktop) */
	.thumb-nav.d-none.d-md-flex{
		display: none !important;
	}

	/* no mobile, o nav-row (os 2 botões) vira setas left/right */
	.thumb-nav-row{
		display: flex !important;
	}

	/* desenha setas (← →) com CSS */
	.thumb-nav{
		border: 0;
		background: transparent;
		height: 42px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		padding: 0;
		user-select: none;
	}

	/* seta padrão (left) */
	.thumb-nav::before{
		content: "";
		width: 14px;
		height: 14px;
		border-right: 5px solid #d94b8a;
		border-bottom: 5px solid #d94b8a;
		display: inline-block;
		transform: rotate(135deg); /* ◀ */
	}

	/* seta do botão "next" vira right */
	.thumb-nav-next::before{
		transform: rotate(-45deg); /* ▶ */
	}

	/* tamanhos no mobile */
	.thumb-btn{
		flex: 0 0 auto;
		width: 120px;
		height: 110px;
		max-width: none;
	}

	.main-image-wrap{ min-height: 320px; }
	.main-image{ max-height: 320px; }
}


/* bloqueia a lista até liberar (pode mover pro seu CSS global) */
.catalogos-locked{
	pointer-events: none;
	filter: blur(2px);
	opacity: .35;
	user-select: none;
}


/* ===== Comprar com CNPJ (responsivo) ===== */
.buy-wrap{ margin: 0 auto; }
.buy-card{
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,.08);
	padding: 40px 40px 34px;
}

.buy-form{ margin-top: 10px; }

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

/* 2 colunas no desktop */
@media (min-width: 768px){
	.buy-grid{ grid-template-columns: 1fr 1fr; }
	.buy-span-2{ grid-column: 1 / -1; }
}

.buy-input, .buy-select, .buy-textarea{
	width: 100%;
	padding: 0 16px;
	border: 1px solid #d6dbe6;
	border-radius: 10px;
	font-size: 15px;
	font-family: 'Avenir-Black', Arial, sans-serif;
	color: #333;
	background: #fff;
}

.buy-input, .buy-select{ height: 52px; }

.buy-textarea{
	height: 160px;
	padding: 12px 16px;
	resize: vertical;
	line-height: 1.35;
}

.buy-input:focus, .buy-select:focus, .buy-textarea:focus{
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(106,42,134,.12);
}

.buy-actions{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.buy-btn{
	display: inline-flex;          /* ✅ não block */
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border-radius: 14px;
	border: none;
	background: var(--purple);
	color: #fff;
	font-family: 'Avenir-Black', Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .6px;
	cursor: pointer;
	min-width: 240px;
}
.buy-btn:disabled{ opacity: .7; cursor: not-allowed; }

.buy-msg{
	min-height: 18px;
	text-align: center;
	font-size: 14px;
}
.buy-msg.ok{ color:#1a7f37; }
.buy-msg.err{ color:#b42318; }


/* ===== Contato (mesmo padrão do comprar-cnpj) ===== */
.ct-wrap{ margin: 0 auto; }
.ct-card{
	background: #fff;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,.08);
	padding: 40px 40px 34px;
}
.ct-grid{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 768px){
	.ct-grid{ grid-template-columns: 1fr 1fr; }
	.ct-span-2{ grid-column: 1 / -1; }
}
.ct-input, .ct-select, .ct-textarea{
	width: 100%;
	padding: 0 16px;
	border: 1px solid #d6dbe6;
	border-radius: 10px;
	font-size: 15px;
	font-family: 'Avenir-Black', Arial, sans-serif;
	color: #333;
	background: #fff;
}
.ct-input, .ct-select{ height: 52px; }
.ct-textarea{
	height: 140px;
	padding: 12px 16px;
	resize: vertical;
	line-height: 1.35;
}
.ct-input:focus, .ct-select:focus, .ct-textarea:focus{
	outline: none;
	border-color: var(--purple);
	box-shadow: 0 0 0 3px rgba(106,42,134,.12);
}
.ct-file{
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ct-file small{
	color: #7a7a7a;
	font-size: 12px;
}
.ct-actions{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}
.ct-msg{
	min-height: 18px;
	text-align: center;
	font-size: 14px;
}
.ct-msg.ok{ color:#1a7f37; }
.ct-msg.err{ color:#b42318; }

/* ===== File upload estilizado ===== */
.ct-file{
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ct-file-label{
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Avenir-Black', Arial, sans-serif;
	color: var(--purple);
	text-transform: uppercase;
	font-size: 14px;
}

.ct-file-label i{
	color: var(--green);
	font-size: 16px;
}

.ct-file-box{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 1px solid #d6dbe6;
	border-radius: 10px;
	height: 52px;
	padding: 0 12px;
	background: #fff;
}

.ct-file-text{
	font-size: 14px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 120px);
}

.ct-file-btn{
	border: none;
	background: #f1f3f8;
	color: #333;
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 13px;
	cursor: pointer;
}

.ct-file-btn:hover{
	background: #e6e9f2;
}

.ct-file-box input[type="file"]{
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.left-col{
	position: relative;
}
.left-col::before{
	content:'';
	position:absolute;
	left:-60px;
	top:10px;
	width:180px;
	height:380px;
	background:url('../img/layout/logo-shape-left.png') no-repeat center/contain;
	opacity:0.1;
}

.right-col{
	position: relative;
}
.right-col::before{
	content:'';
	position:absolute;
	right:-50px;
	bottom:10px;
	width:180px;
	height:250px;
	background:url('../img/layout/logo-shape-right.png') no-repeat center/contain;
	opacity:0.1;
}

/* Imagem flutuando + texto contornando */
.news-float-link{
	float: left;
	display: block;
	width: min(460px, 100%);
	margin: 0 22px 14px 0; /* direita + baixo */
	border-radius: 18px;
	overflow: hidden;
}

.news-float-img{
	width: 100%;
	height: auto;
	display: block;
}

/* garante que o container “abrace” o float */
.news-text{
	font-size: 17px;
	color: #6b6b6b; /* ajuste ou use sua classe */
	line-height: 1.6;
}

/* limpa o float depois do texto */
.col-md-12::after{
	content: "";
	display: block;
	clear: both;
}

/* Mobile: imagem vira topo e texto embaixo (sem contornar) */
@media (max-width: 767px){
	.news-float-link{
		float: none;
		width: 100%;
		margin: 0 0 14px 0;
	}
}