/* ==========================================================================
   beehome-produto.css
   CSS das paginas de produto/modulo. Extraido dos <style> inline de
   /organiza, sem alterar valor nenhum: a pagina renderiza igual as irmas.
   Gerado por templates/gerar-assets-produto.py. Nao edite a mao.
   ========================================================================== */


/* ---------- fontes (Lexend / Work Sans) ---------- */
@font-face {
					font-family: "Mazzard";
					src: url(/assets/MazzardH-Bold.woff2) format("woff"), local(Helvetica);
			}

			@font-face {
					font-family: "Europa";
					src: url(/assets/Europa-Regular.woff) format("woff"), local(Helvetica);
			}
		

  @font-face {
    font-family: "Lexend";
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    src: url("/assets/_hcms/googlefonts/Lexend/800.woff2") format("woff2"), url("/assets/_hcms/googlefonts/Lexend/800.woff") format("woff");
  }
  @font-face {
    font-family: "Lexend";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("/assets/_hcms/googlefonts/Lexend/700.woff2") format("woff2"), url("/assets/_hcms/googlefonts/Lexend/700.woff") format("woff");
  }
  @font-face {
    font-family: "Lexend";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("/assets/_hcms/googlefonts/Lexend/300.woff2") format("woff2"), url("/assets/_hcms/googlefonts/Lexend/300.woff") format("woff");
  }
  @font-face {
    font-family: "Lexend";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("/assets/_hcms/googlefonts/Lexend/500.woff2") format("woff2"), url("/assets/_hcms/googlefonts/Lexend/500.woff") format("woff");
  }
  @font-face {
    font-family: "Lexend";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("/assets/_hcms/googlefonts/Lexend/regular.woff2") format("woff2"), url("/assets/_hcms/googlefonts/Lexend/regular.woff") format("woff");
  }


/* ---------- base HubSpot (breadcrumb, cta_button, sr-only) ---------- */
a.cta_button{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important;vertical-align:middle}.hs-breadcrumb-menu{list-style-type:none;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px}.hs-breadcrumb-menu-item{float:left;padding:10px 0px 10px 10px}.hs-breadcrumb-menu-divider:before{content:'›';padding-left:10px}.hs-featured-image-link{border:0}.hs-featured-image{float:right;margin:0 0 20px 20px;max-width:50%}@media (max-width: 568px){.hs-featured-image{float:none;margin:0;width:100%;max-width:100%}}.hs-screen-reader-text{clip:rect(1px, 1px, 1px, 1px);height:1px;overflow:hidden;position:absolute !important;width:1px}


/* ---------- cabecalho, menu e mega-menu ---------- */
#hs_cos_wrapper_Header .header_main {
  background:#fff;
  width:100%;
  z-index:1000;
  transition:top 0.3s,border-bottom 0.3s;
  border-bottom:1px solid transparent;
}

#hs_cos_wrapper_Header .cm_menu .hs-menu-wrapper>ul li a,
#hs_cos_wrapper_Header .customCTA-Header a {
  font-size:1rem !important;
  font-weight:600;
}

#hs_cos_wrapper_Header .hs-menu-wrapper ul[role="menu"] { gap:1rem; }

#hs_cos_wrapper_Header .sticky-header {
  position:fixed;
  top:0;
  left:0;
}

#hs_cos_wrapper_Header .header_main.sticky-header { border-bottom:1px solid #eee; }

#hs_cos_wrapper_Header .customCTA-Header { margin-left:20px; }

#hs_cos_wrapper_Header .customCTA-Header a {
  background:#ffdd00 !important;
  color:#030503 !important;
  border-radius:7px;
  padding:7px 10px;
  font-size:16px;
}

@media screen and (min-width:62rem) {
  #hs_cos_wrapper_Header .hs-item-has-children .hs-menu-children-wrapper {
    display:none !important;
    position:absolute;
    left:0;
    top:100%;
    border-radius:24px;
    background:#fff;
    border:1px solid #eee;
    padding:1rem;
    z-index:9999999;
    box-shadow:rgba(0,0,0,0.1) 0px 4px 12px;
  }

  #hs_cos_wrapper_Header .hs-item-has-children:hover>.hs-menu-children-wrapper { display:block !important; }

  #hs_cos_wrapper_Header .hs-item-has-children .hs-menu-children-wrapper#adaptoMenu1 {
    border-radius:24px;
    background:#fff;
    border:1px solid #eee;
    padding:1rem;
    z-index:9999999;
    gap:.5rem;
    position:absolute;
    top:100%;
    left:0;
    display:none !important;
    box-shadow:rgba(0,0,0,0.1) 0px 4px 12px;
  }

  #hs_cos_wrapper_Header .hs-item-has-children:hover>.hs-menu-children-wrapper#adaptoMenu1 {
    display:grid !important;
    grid-template-rows:repeat(5,auto);
    grid-auto-flow:column;
  }
}

	
	@media screen and (max-width: 61rem) {
			.cm_menu .hs-menu-wrapper > ul li a, .cm_menu_wrap .customCTA-Header > a {
				font-size: 0.75rem !important;
			}
	}
	
/* EXTRAS	 */
	
	.header_main {
  padding: 1rem 0;
}

.header_main .content-wrapper {
  display: flex;
  justify-content: space-between;
}

.header_main,
.header_main *,
.mega-menu,
.mega-menu * {
  font-family: Lexend, Arial, Helvetica, sans-serif !important;
}

.header_main .cm_logo {
  font-size: 0;
}

.header_main .cm_logo a {
  display: block;
}

.header_main .cm_logo a img {
  max-width: 135px;
}

.cm_menu_wrap {
  display: flex;
  align-items: center;
}

.cm_menu .hs-menu-wrapper > ul li a {
  display: block;
  padding: 15px 16px;
}

.cm_menu .hs-menu-wrapper > ul ul {
  min-width: 150px;
}

.cm_menu_wrap .cm_cart_wrap {
  padding-left: 16px;
}

.cart_wrap svg {
  width: 16px;
  height: 16px;
}

.child-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  height: 46px;
  cursor: pointer;
  text-align: center;
	z-index: 1000;
}

.child-trigger:after,
.child-trigger:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: #000;
  width: 14px;
  height: 2px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.child-trigger:after {
  width: 2px;
  height: 14px;
}

/* .child-open > .child-trigger:after {
  visibility: hidden;
} */

.child-trigger:hover:after, .child-trigger:hover:before {
  background-color: #000;
}

.cm_menu_wrap .cart-count-style svg path {
  fill: #447843;
}
.header_main button.cart {
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
  display: block;
}


.language_switcher {
	margin-left: 1rem;
	margin-right: .65rem;
}

.globe_class {
	background: none !important;
	background-image: none !important;
}

.language_switcher .dropdown_toggle {
	background: transparent !important;
	padding: 0;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .65rem;
}

.language_switcher .dropdown_toggle:hover {
	color: var(--tertiary-color);
}

.language_switcher .content_dropdown, .language_switcher .dropdown_toggle {
	width: fit-content;
	max-height: 1.87rem;
}

.language_switcher .dropdown_toggle svg {
	  max-width: 1.87rem;
    max-height: 1.87rem;
}

.lang_list_class {
	top: 0 !important;
}

.lang-list-visible .lang_list_class {
	display: block !important;
}

/* .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul#adaptoMenu1, .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul#adaptoMenu2, .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul#adaptoMenu3,.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul#adaptoMenu4,.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul#adaptoMenu5 {
	opacity: 0;
} */

/* Base state: hidden by default */
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children > ul {
  display: none;
/*   opacity: 0; */
  z-index: 1001;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 24px;
  padding: 1rem;
  
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  
}

/* On hover: fully display the dropdown */
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children:hover > ul {
  display: block !important; /* Use block by default */
/*   opacity: 1; */
  z-index: 999999 !important;
}

/* Keep legacy HubSpot flyouts hidden for top-level items that use the custom mega-menu. */
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.has-custom-mega-menu:hover > ul.hs-menu-children-wrapper,
.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.has-custom-mega-menu.mega-menu-open > ul.hs-menu-children-wrapper {
  display: none !important;
}

/* If you have a mega menu scenario, apply grid on hover for those specific items */


/* If you have targeted mega menus with adaptoMenuX IDs */





@media (min-width: 48rem) {
  .hamburger {
    display: none;
  }

  .cm_menu {
    display: block !important;
  }

  .cm_cart_wrap.mobile {
    display: none;
  }
}

.header_main.mobile-nav-v2-active {
  position: relative;
}

.mobile-nav-panel {
  display: none;
}

.header_main.mobile-nav-v2-active .cm_menu {
  display: none !important;
}

.header_main.mobile-nav-hamburger-visible.mobile-nav-v2-active .mobile-nav-panel {
  display: block;
  position: fixed;
  top: var(--mobile-nav-offset, 96px);
  left: 0;
  right: 0;
  width: auto;
  padding: 0 16px;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}

.header_main.mobile-nav-hamburger-visible.mobile-nav-v2-active.mobile-nav-v2-open .mobile-nav-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mobile-nav-panel__inner {
  width: 100%;
  margin: 0;
  max-height: calc(100dvh - var(--mobile-nav-offset, 96px) - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0px 163.333px 130.667px rgba(0, 0, 0, 0.07), 0px 68.2368px 54.5894px rgba(0, 0, 0, 0.0503198), 0px 36.4826px 29.1861px rgba(0, 0, 0, 0.0417275), 0px 20.4519px 16.3615px rgba(0, 0, 0, 0.035), 0px 10.8618px 8.68947px rgba(0, 0, 0, 0.0282725), 0px 4.51985px 3.61588px rgba(0, 0, 0, 0.0196802);
}

.mobile-nav-panel__content {
  padding: 12px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}

.mobile-nav-list,
.mobile-nav-submenu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-nav-item {
  border-bottom: 1px solid rgba(3, 5, 3, 0.08);
}

.mobile-nav-item:last-child {
  border-bottom: 0;
}

.mobile-nav-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.mobile-nav-link,
.mobile-nav-label {
  flex: 1;
  display: block;
  padding: 16px 0;
  color: #030503;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.mobile-nav-label {
  cursor: default;
}

.mobile-nav-toggle {
  position: relative;
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 16px;
  background: #fd0;
  cursor: pointer;
}

.mobile-nav-toggle::before,
.mobile-nav-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #000;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
}

.mobile-nav-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.mobile-nav-item.is-open > .mobile-nav-row .mobile-nav-toggle::after {
  opacity: 0;
}

.mobile-nav-submenu {
  display: none;
  margin: 0 18px 14px;
  padding: 10px 0;
  border-radius: 24px;
  background: #fd0;
}

.mobile-nav-item.is-open > .mobile-nav-submenu {
  display: block;
}

.mobile-nav-submenu-link {
  display: block;
  padding: 12px 18px;
  color: #030503;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}

.mobile-nav-item.is-current > .mobile-nav-row .mobile-nav-link,
.mobile-nav-submenu-item.is-current .mobile-nav-submenu-link {
  font-weight: 700;
}

.mobile-nav-panel .customCTA-Header {
  display: block;
  margin: 16px 18px 0;
}

.mobile-nav-panel .customCTA-Header a {
  display: block;
  text-align: center;
}

.mobile-nav-panel .language_switcher.mobile {
  display: flex;
  justify-content: center;
  padding: 12px 18px 0;
}

.header_main.mobile-nav-hamburger-visible #hs_menu_wrapper_Header_ ul .hs-menu-depth-1.mega-menu-trigger > a::after {
  display: none !important;
}

.header_main.mobile-nav-hamburger-visible .cm_menu {
  left: 0;
  position: absolute;
  z-index: 99;
  top: 68px;
  width: 100%;
  height: 80vh;
  max-height: 80vh;
  overflow-y: auto;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  box-shadow: 0px 163.333px 130.667px rgba(0, 0, 0, 0.07), 0px 68.2368px 54.5894px rgba(0, 0, 0, 0.0503198), 0px 36.4826px 29.1861px rgba(0, 0, 0, 0.0417275), 0px 20.4519px 16.3615px rgba(0, 0, 0, 0.035), 0px 10.8618px 8.68947px rgba(0, 0, 0, 0.0282725), 0px 4.51985px 3.61588px rgba(0, 0, 0, 0.0196802);
}

.header_main.mobile-nav-hamburger-visible.mobile-nav-v2-active .cm_menu {
  display: none !important;
}

.header_main.mobile-nav-hamburger-visible.mobile-nav-open .cm_menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper {
  width: 100%;
  background: #fff;
  border-radius: 24px;
  overflow: visible;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper > ul {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  background: #fff;
  overflow: visible;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper > ul > li {
  width: 100%;
  position: relative;
  overflow: visible;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper > ul > li > a {
  width: 100%;
  padding: 16px 58px 16px 18px;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper > ul ul {
  display: none;
  padding: 10px 0 0 15px;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-wrapper > ul ul li a {
  width: 100%;
  padding: 10px 16px;
}

.header_main.mobile-nav-hamburger-visible ul.hs-menu-children-wrapper {
  display: none !important;
  width: 100%;
  margin-top: 0;
  padding: 8px 12px 12px 12px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f8f8f6;
  max-height: 45vh;
  overflow-y: auto;
}

.header_main.mobile-nav-hamburger-visible .child-open > ul.hs-menu-children-wrapper {
  display: block !important;
}

.header_main.mobile-nav-hamburger-visible .hs-menu-depth-1 > ul.hs-menu-children-wrapper {
  width: 100%;
  box-shadow: none;
}

.header_main.mobile-nav-hamburger-visible .hs-menu-children-wrapper li {
  width: 100%;
}

.header_main.mobile-nav-hamburger-visible .hs-menu-item.hs-item-has-children.child-open {
  background: #fff9d6;
}

.header_main.mobile-nav-hamburger-visible .child-trigger,
.header_main.mobile-nav-hamburger-visible .child-trigger:hover,
.header_main.mobile-nav-hamburger-visible .child-trigger:active,
.header_main.mobile-nav-hamburger-visible .child-trigger:focus {
  background-color: #fd0;
  border: 0;
  color: #000;
}

.header_main.mobile-nav-hamburger-visible .child-trigger {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background-color: #fd0 !important;
}

.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-item > .child-trigger:before,
.header_main.mobile-nav-hamburger-visible .cm_menu .hs-menu-item > .child-trigger:after {
  background-color: #000 !important;
}

.header_main.mobile-nav-hamburger-visible .child-open > .child-trigger:after {
  opacity: 0;
}

.header_main.mobile-nav-v2-active .child-trigger {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 767px) {
  #hs_menu_wrapper_Header_ ul .hs-menu-depth-1.mega-menu-trigger > a::after {
    display: none !important;
  }

  .cm_menu {
    left: 0;
    position: absolute;
    z-index: 99;
    top: 68px;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    overflow-y: auto;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    box-shadow: 0px 163.333px 130.667px rgba(0, 0, 0, 0.07), 0px 68.2368px 54.5894px rgba(0, 0, 0, 0.0503198), 0px 36.4826px 29.1861px rgba(0, 0, 0, 0.0417275), 0px 20.4519px 16.3615px rgba(0, 0, 0, 0.035), 0px 10.8618px 8.68947px rgba(0, 0, 0, 0.0282725), 0px 4.51985px 3.61588px rgba(0, 0, 0, 0.0196802);
  }

  .header_main.mobile-nav-open .cm_menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .cm_menu_wrap .cm_cart_wrap {
    padding-left: 0;
    padding-right: 20px;
  }

  .cm_menu_wrap .cm_cart_wrap img {
    width: 25px;
    height: 25px;
  }

  .hamburger {
    display: block;
    background-color: #000000;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    padding: 11px;
    cursor: pointer;
  }

  .hamburger li {
    height: 1px;
    background: #FFFFFF;
    content: "";
    position: relative;
    transition: 0.25s ease-in-out;
    list-style-type: none;
    width: 14px;
  }

  .hamburger li:nth-child(1) {
    top: 0;
  }

  .hamburger li:nth-child(2) {
    top: 5px;
  }

  .hamburger li:nth-child(3) {
    top: 10px;
  }

  .hamburger .rot45deg {
    transform: rotate(45deg);
    top: 6px!important;
  }

  .hamburger .rot-45deg {
    transform: rotate(-45deg);
  }
 
  .hamburger .hidden {
    opacity: 0;
  }

  .cm_menu .hs-menu-wrapper > ul ul {
    display: none;
    padding: 10px 0 0 15px;
  }

  .menu_open .cm_cart_wrap {
    display: none;
  }

  .cm_cart_wrap.mobile {
    display: block;
    padding: 0;
  }

  .cm_cart_wrap.mobile a {
    padding: 15px 16px;
    display: block;
  }
	
	.customCTA-Header {
		padding-bottom: 20px;
		color: #030503 !important;
	}
	
  .cm_menu .hs-menu-wrapper {
    width: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: visible;
  }

  .cm_menu .hs-menu-wrapper > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    background: #fff;
    overflow: visible;
  }

  .cm_menu .hs-menu-wrapper > ul > li {
    width: 100%;
    position: relative;
    overflow: visible;
  }

  .cm_menu .hs-menu-wrapper > ul > li > a {
    width: 100%;
    padding: 16px 58px 16px 18px;
  }

  .cm_menu .hs-menu-wrapper > ul ul li a {
    width: 100%;
    padding: 10px 16px;
  }

	
  .cm_menu .customCTA-Header.mobile > a {
		color: #030503 !important;
	}
	
	ul.hs-menu-children-wrapper {
		display: none !important;
    width: 100%;
    margin-top: 0;
    padding: 8px 12px 12px 12px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #f8f8f6;
    max-height: 45vh;
    overflow-y: auto;
	}
	
	.child-open > ul.hs-menu-children-wrapper {
		display: block !important;
	} 
	
/* 	.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts > ul li.hs-item-has-children > ul {
		opacity: 1;
	} */
	
	.hs-menu-depth-1 > ul.hs-menu-children-wrapper {
		width: 100%;
		box-shadow: none;
	}

  .hs-menu-children-wrapper li {
    width: 100%;
  }

  .hs-menu-item.hs-item-has-children.child-open {
    background: #fff9d6;
  }
	
	.child-trigger, .child-trigger:hover, .child-trigger:active, .child-trigger:focus {
		background-color: #fd0;
		border: 0;
		color: #000;
	}

  .child-trigger {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background-color: #fd0 !important;
  }

  .cm_menu .hs-menu-item > .child-trigger:before,
  .cm_menu .hs-menu-item > .child-trigger:after {
    background-color: #000 !important;
  }

  .child-open > .child-trigger:after {
    opacity: 0;
  }
}

@media (min-width: 48rem) {
  .cm_menu .hs-menu-wrapper > ul ul {
    display: flex !important;
  }

  .child-trigger {
    display: none;
  }
}

@media (max-width: 61.9rem) {
	.language_switcher.desktop {
		display: none;
	}
	
	.language_switcher.mobile {
		text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 1rem 0;
	}
	
	.lang_list_class {
		padding: 0 !important;
	}
	
	.language_switcher .content_dropdown, .language_switcher .dropdown_toggle {
		max-height: auto !important;
	}
}


/* ---------- botao de WhatsApp e overlay do formulario ---------- */
.whatsapp-floating-button {
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:1002;
}

.whatsapp-button img {
  width:77px;
  height:80px;
  cursor:pointer;
  animation:shake 10s infinite;
  animation-iteration-count:infinite;
}

.overlay {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:1001;
}

.overlay.visible { display:block; }

.form-area {
  display:none;
  position:fixed;
  bottom:70px;
  right:20px;
  background-color:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  z-index:1002;
  width:450px;
  padding:20px;
  max-height:84vh;
  overflow-y:auto;
}

.form-area.visible { display:block; }

.form-area .close-form {
  position:absolute;
  top:10px;
  right:10px;
  cursor:pointer;
}

.form-area.custom-background {
  background:url(/assets/bg.webp) no-repeat center center;
  background-size:cover;
}

.whatsapp-floating-button form {
  background-color:transparent !important;
  background:none !important;
  color:#fff !important;
}

.whatsapp-floating-button form span,
.whatsapp-floating-button form p,
.whatsapp-floating-button form span>p { color:#fff !important; }

@keyframes shake {
  4.5%, 10.5% { transform:translate(0px,0px) rotate(0deg); }
  5% { transform:translate(1px,1px) rotate(0deg); }
  5.5% { transform:translate(-1px,-2px) rotate(-1deg); }
  6% { transform:translate(-3px,0px) rotate(1deg); }
  6.5% { transform:translate(3px,2px) rotate(0deg); }
  7% { transform:translate(1px,-1px) rotate(1deg); }
  7.5% { transform:translate(-1px,2px) rotate(-1deg); }
  8% { transform:translate(-3px,1px) rotate(0deg); }
  8.5% { transform:translate(3px,1px) rotate(-1deg); }
  9% { transform:translate(-1px,-1px) rotate(1deg); }
  9.5% { transform:translate(1px,2px) rotate(0deg); }
  10% { transform:translate(1px,-2px) rotate(-1deg); }
}

@media (max-width:50rem) {
  .form-area { width:auto !important; }
}


/* ---------- slider de depoimentos (slick) ---------- */
.recommendations-slider  {
    margin: 0 15px;
  }

  .fa-star {
    fill: #FFD966;
    color: #FFD966;
  }

  .slick-dots li button:before {
    color: ;
  }
	
	ul.slick-dots {
		
			justify-content: center;
    
	}
	
	.recommendations-slider .slick-list {
  overflow: hidden;
  position: relative;
}

.recommendations-slider .slick-track {
  display: flex !important; /* Ensure slides line up horizontally */
  align-items: center;       /* Vertically center content if needed */
}

.recommendations-slider .slick-slide {
  float: none !important;
  display: inline-block;     /* Prevent unwanted extra spacing */
  vertical-align: top;
}

.recommendations-slider {
  margin: 0; /* Remove the extra margin to reduce spacing */
}

/* Adjust dot spacing if needed */
.recommendations-slider .slick-dots {
  margin-top: 16px; /* Increase or decrease to adjust spacing */
}


/* ---------- correcao de proporcao de imagem ---------- */
img[width][height] { height: auto; max-width: 100%; }


/* ---------- dobras: hero, h2-1, p-1, abas, grid de beneficios, video ---------- */
/* Mobile */
@media (max-width: 768px) {
  .float{    
    margin-top: 32px;
  }
  .h2-1{
    font-size:24px!important;
  }
  .h2-1,
  .h3-1,
  .p-1,
	#addons{
    text-align:left!important;
  }
  .p-1{
    display:block!important;
  }
  .tabs-section-comunica .tab-grid {
    grid-template-columns: 1fr;
    padding:40px!important;     
    gap:40px!important;
    background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255, 249, 230, 0.00) 100%), #FDCC2C;
    border-radius: 32px;
  }
  .tab-grid{
    display:flex!important;
    flex-direction: column-reverse;
  }
  .inverted-grid{
    flex-direction: column;
  }
}
  @media(max-width:900px){
    .video-section{
      min-height:100px!important;
    }
    .products-tool-list{      
    	flex-direction: column!important;
    }
    .tabs-section-comunica .tabs-nav{      
    	flex-wrap: wrap;
    }
     
    .tabs-section-comunica .tabs-nav p{ 
      display:none;
    }
    .tabs-section-comunica .tabs-nav .active p{ 
      display:initial!important;
    }
    .product-tool-item{
      width:100%!important;
    }
  }
 .tabs-section-comunica .tab-image {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.tabs-section-comunica .tab-panel.active .tab-image {
  opacity: 1;
  transform: translateY(0);
}
  .video-section{
    min-height:500px;
    display: flex;
    justify-content: center;
  }
  .video-section video{
    margin-bottom:-140px;
    max-width:420px;
    width:100%;
  }
  .product-tool-item{
/* shadow */
    padding: 20px;
    width: 25%;
    min-height:500px;
    border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: #FFF;
    box-shadow: 0 48.842px 39.073px 0 rgba(0, 0, 0, 0.07), 0 20.405px 16.324px 0 rgba(0, 0, 0, 0.05), 0 10.909px 8.728px 0 rgba(0, 0, 0, 0.04), 0 6.116px 4.893px 0 rgba(0, 0, 0, 0.04), 0 3.248px 2.598px 0 rgba(0, 0, 0, 0.03), 0 1.352px 1.081px 0 rgba(0, 0, 0, 0.02);
backdrop-filter: blur(20px);
  }
  .product-tool-item-icon-bg{
    background: url(/assets/icones-prd-detalhado/toll-bg-icons.svg);
    height: 100%;
    position: absolute;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
  }
  .product-tool-item-icon{
          display: flex;
    position: relative;
    height: 175px;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
  }
  .product-tool-item span{
    color: #303030;
    font-family: Lexend, Arial, Helvetica, sans-serif!important;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 110%; /* 19.8px */
letter-spacing: -0.18px;
  }
  .product-tool-item {
    color: #303030;
    font-family: Lexend, Arial, Helvetica, sans-serif!important;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 150%; /* 21px */
  }
  .products-tool-list{    
    display: flex;
    gap: 36px;
    justify-content: center;
    align-items: flex-start;
  }
  /* Tabs */
.tabs-section-comunica {
  background: #f9f9f6;
}

/* Tabs nav */
.tabs-section-comunica .tabs-nav {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 48px;
}

.tabs-section-comunica .tab-btn {
  display: flex;
    height: 65px;
    cursor: pointer;
    font-weight: 500;
    background: #E9E9E9;
    padding: 10px 20px;
    border-radius: 15px 50px 50px 15px;
    gap: 10px;
    flex-direction: row;
    align-content: center;
    align-items: center;
}
  .tabs-section-comunica .tab-btn  p {
        font-size: 12px;
    color: #7B7A78;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.tabs-section-comunica .tab-btn.active p {
    color: #111 !important;
    font-weight: 600 !important;
}
.tabs-section-comunica .tab-btn.active img {
    filter: brightness(9) !important;
    opacity: 0.9;
}
.tabs-section-comunica .tab-btn img {
    filter: brightness(3);
    width: 24px;
    height: auto;
    transition: all 0.3s ease-in-out !important;
}
.tabs-section-comunica .tab-btn.active {
      background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(258, 249, 230, 0.00) 100%), #FDCC2C !important;
    color: #111 !important;
    box-shadow: 0 48.842px 39.073px 0 rgba(0, 0, 0, 0.07), 0 20.405px 16.324px 0 rgba(0, 0, 0, 0.05), 0 10.909px 8.728px 0 rgba(0, 0, 0, 0.04), 0 6.116px 4.893px 0 rgba(0, 0, 0, 0.04), 0 3.248px 2.598px 0 rgba(0, 0, 0, 0.03), 0 1.352px 1.081px 0 rgba(0, 0, 0, 0.02);
  font-weight: 600;
}

/* Conteúdo */
.tabs-section-comunica .tabs-content {
  max-width: 1100px;
  margin: 0 auto;
}

.tabs-section-comunica .tab-panel {
  display: none;
  position:relative;
}

.tabs-section-comunica .tab-panel.active {
  display: block;
  min-height:580px;
  margin:auto;
  max-width:840px;
}

/* FUNDO QUE ATRAVESSA AS COLUNAS */
.tabs-section-comunica .tab-bg {
  border-radius: 32px;
background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255, 249, 230, 0.00) 100%), #FDCC2C;
    padding: 56px;
    position: absolute;
    height: 300px;
    top: 23%;
    width: 100%;
    z-index: 0;
}

/* Grid interno */
.tabs-section-comunica .tab-grid {
  display: grid;
  padding:0px 40px;
  grid-template-columns: 1fr 1fr;
  gap: 0px;
  position:relative;
  align-items: center;
}

/* Mockup */
.tabs-section-comunica .tab-mockup img {
      width: auto;
    max-width: 324px;
    height: 570px;
    display: block;
    margin: 0 auto;
}

/* Conteúdo */
.tabs-section-comunica .tab-card {
  background: transparent;
  padding: 0;
}
  .tabs-section-comunica .tab-card h4 img{    
    width: 32px;
    height: 32px;
    margin-top: -3px;
  }
.tabs-section-comunica .tab-card h4 {
      font-size: 24px;
  display:flex;
  gap:10px;
    font-weight: 700;
    letter-spacing: -0.24px;
    font-family: Lexend;
    color: #111;align-items: center;
}

.tabs-section-comunica .tab-card p {
  color: #111;
font-family: Lexend;
    margin: 16px 0px !important;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 150%; /* 21px */
}

  .product-content-item{    
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: space-around;
  }
  .product-content-item .cta-2{
    max-width:225px;
  }
  .dnd_area-row-1-padding {
   background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255, 249, 230, 0.00) 100%), #FDCC2C !important;
  }
  
h1, h2, h3, h4, p{
  margin:0 !important;

}


  @media(min-width:679px){    
   
    .recommendations-slider .slick-current + .slick-slide {
          opacity: 1 !important;
          background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255, 249, 230, 0.00) 100%), #FDCC2C;
      }
    .products-tab-item{
      width:160px;
    }
    .product-div-product-page .products-tabs{      
      min-width:190px;
    }
    .product-div-product-page .tab-item-active{
      width:190px;
    }
  }
  
  .product-content-item h3{    
    font-size: 40px;
    font-weight:bold;
  }
  .product-content-item span {
    font-size: 16px;
    font-weight: 700;
}
  .product-content-item p {
    font-size: 16px!important;
    font-weight: normal;
  }
  .product-content-category-item {
    font-size: 14px;
    font-weight: 600;
}
  @keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
  100% {
    transform: translateY(0);
  }
}
  .float{
  animation: float 4s ease-in-out infinite;
}
    /* --- WRAPPER GERAL (Isolado) --- */
    .bh-prod-section {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: visible; 
        background: transparent;
        margin: 0 auto;
        padding: 40px 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* --- VÍDEO CONTAINER --- */
    .bh-prod-video-wrapper {
        position: relative;
        width: 100%;
        max-width: 1000px; 
        z-index: 1; 
    }

    .bh-prod-video-wrapper video {
        display: block;
        width: 100%;
        height: auto;
        outline: none;
    }

    /* --- LAYER DOS BALÕES --- */
    .bh-prod-actions-layer {
        position: absolute;
        top: 70px !important;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; 
        z-index: 10;
    }

    /* --- ANIMAÇÃO DE ENTRADA (Customizada) --- */
    @keyframes bhProdEntrance {
        from { 
            opacity: 0; 
            transform: translateY(20px); 
        }
        to { 
            opacity: 1; 
            transform: translateY(0); 
        }
    }

    /* --- CARTÃO DE PRODUTO (Estilo Único) --- */
    .bh-prod-card {
        position: absolute; 
        pointer-events: auto; 
        text-decoration: none;
        box-sizing: border-box;
        
        /* Estado Inicial: Invisível */
        opacity: 0;
        /* Aplica animação de entrada */
        animation: bhProdEntrance 0.8s ease-out forwards;

        /* Estilo Visual Base */
        border-radius: 16px 100px 100px 16px;
        border: 1px solid #FCDD00;
        background: rgba(48, 48, 48, 0.50);
        box-shadow: 
            0 48.842px 39.073px 0 rgba(0, 0, 0, 0.07), 
            0 20.405px 16.324px 0 rgba(0, 0, 0, 0.05), 
            0 10.909px 8.728px 0 rgba(0, 0, 0, 0.04), 
            0 6.116px 4.893px 0 rgba(0, 0, 0, 0.04), 
            0 3.248px 2.598px 0 rgba(0, 0, 0, 0.03), 
            0 1.352px 1.081px 0 rgba(0, 0, 0, 0.02);
        
        /* Blur padrão */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);

        /* Layout Interno */
        display: flex;
        align-items: center;
        padding: 12px;
        width: 76px;   /* Largura Fechada */
        height: 64px;  
        overflow: hidden;
        
        /* Transições Suaves */
        transition: 
            width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
            background 0.3s, 
            backdrop-filter 0.3s,
            -webkit-backdrop-filter 0.3s,
            border 0.3s,
            box-shadow 0.3s;
    }

    /* ATRASOS DE APARIÇÃO (Classes Únicas) */
    .bh-delay-1 { animation-delay: 4.0s; }
    .bh-delay-2 { animation-delay: 4.2s; }
    .bh-delay-3 { animation-delay: 4.4s; }
    .bh-delay-4 { animation-delay: 4.6s; }
    
    .bh-delay-5 { animation-delay: 4.2s; } 
    .bh-delay-6 { animation-delay: 4.4s; }
    .bh-delay-7 { animation-delay: 4.6s; }
    .bh-delay-8 { animation-delay: 4.8s; }


    /* --- HOVER (Desktop) --- */
    @media(min-width: 900px){
        .bh-prod-card:hover {
            width: 320px; 
            
            /* Mantém cor escura translúcida (sem amarelo) */
            background: rgba(48, 48, 48, 0.60); 
            border: 1px solid #FFF; 
            z-index: 20; 
            
            /* Blur Intenso no Hover */
            backdrop-filter: blur(32px);
            -webkit-backdrop-filter: blur(32px);
        }

        /* Cores de texto forçadas no hover */
        .bh-prod-card:hover .bh-prod-title { color: #FFFFFF !important; }
        .bh-prod-card:hover .bh-prod-subtitle { color: rgba(255, 255, 255, 0.9) !important; }
        
        /* Mostra conteúdo */
        .bh-prod-card:hover .bh-prod-content {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* --- CONTEÚDO INTERNO --- */
    .bh-prod-icon {
        width: 38px;
        height: 38px;
        flex-shrink: 0;
        object-fit: contain;
        transition: filter 0.3s;
        margin: 0; /* Reset de margens globais */
    }

    .bh-prod-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 14px;
        opacity: 0; 
        transform: translateX(-10px);
        transition: all 0.3s ease;
        min-width: 200px;
    }

    .bh-prod-title {
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 2px;
        white-space: nowrap;
        display: block;
    }

    .bh-prod-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        white-space: normal;
    }
/* --- LAYER DOS BALÕES (GRID) --- */
    .bh-prod-actions-layer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none; 
        z-index: 10;
        
        /* Flexbox para centralizar as linhas verticalmente */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px; /* Espaço vertical entre as linhas */
        
        /* AJUSTE: Subir o conteúdo visualmente adicionando espaço em baixo */
        padding-bottom: 180px;
    }

    /* LINHAS DA GRADE */
    .bh-prod-row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px; /* Espaço horizontal entre os itens */
        width: 100%;
    }

    /* --- WRAPPER DE ITEM (Define a posição fixa na grade) --- */
    .bh-prod-item-wrapper {
        position: relative;
        width: 76px;  /* Largura inicial do botão */
        height: 64px; /* Altura fixa */
        z-index: 1;
        pointer-events: auto; 
        
        /* Transição suave da largura do espaço ocupado ao passar o mouse */
        transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* EXPANSÃO DO ESPAÇO (Empurra os vizinhos) */
    .bh-prod-item-wrapper:hover {
        width: 320px; /* Largura expandida */
        z-index: 100; /* Traz para frente de tudo */
    }

    /* --- CARTÃO DE PRODUTO (Preenche o wrapper) --- */
    .bh-prod-card {
        /* O cartão preenche 100% do wrapper */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%; 
        height: 100%; 
        box-sizing: border-box;
    }

    /* --- RESPONSIVIDADE (Mobile) --- */
    @media(max-width: 900px){
        .bh-prod-actions-layer {
            /* Mantém absoluto sobre o vídeo */
            position: absolute; 
            top: 0;
            left: 0;
            height: 100%;
            margin-top: 0;
            
            /* Ajuste de Padding para centralizar verticalmente no mobile */
            padding-bottom: 0; 
            justify-content: center;
            gap: 15px;
        }
        
        .bh-prod-row {
            flex-wrap: wrap; /* Permite quebra de linha se necessário */
            gap: 8px;
            width: 90%; 
        }

        .bh-prod-item-wrapper {
            /* Largura fixa no mobile (não expande) */
            width: 56px;
            height: 48px;
        }
        
        /* Desativa expansão de largura no mobile */
        .bh-prod-item-wrapper:hover {
            width: 56px; 
        }
    }



    /* --- POSICIONAMENTO ABSOLUTO --- */
    /* Lado Esquerdo 
    .bh-prod-card:nth-child(1) { top: 5%; left: 18%; }
    .bh-prod-card:nth-child(2) { top: 28%; left: 12%; }
    .bh-prod-card:nth-child(3) { top: 53%; left: 12%; }
    .bh-prod-card:nth-child(4) { top: 78%; left: 18%; }

    .bh-prod-card:nth-child(5) { top: 5%; right: 18%; }
    .bh-prod-card:nth-child(6) { top: 28%; right: 12%; }
    .bh-prod-card:nth-child(7) { top: 53%; right: 12%; }
    .bh-prod-card:nth-child(8) { top: 78%; right: 18%; }*/

    /* --- RESPONSIVIDADE (Mobile) --- */
    @media(max-width: 900px){
        .bh-prod-section { padding: 20px 0; }
        
        .bh-prod-card {
            width: 48px !important;
            height: 48px !important;
            padding: 8px !important;
            border-radius: 12px !important; 
        }
        
        .bh-prod-content { display: none !important; }
        .bh-prod-icon { width: 100%; height: 100%; }

        /* Reposicionamento Mobile */
        .bh-prod-card:nth-child(1) { left: 5%; top: 5%; }
        .bh-prod-card:nth-child(2) { left: 2%; top: 30%; }
        .bh-prod-card:nth-child(3) { left: 2%; top: 55%; }
        .bh-prod-card:nth-child(4) { left: 5%; top: 80%; }

        .bh-prod-card:nth-child(5) { right: 5%; top: 5%; }
        .bh-prod-card:nth-child(6) { right: 2%; top: 30%; }
        .bh-prod-card:nth-child(7) { right: 2%; top: 55%; }
        .bh-prod-card:nth-child(8) { right: 5%; top: 80%; }
    }


/* ---------- dobras: contact-pill, cta-2, listas de produto ---------- */
p {
    font-weight: 100 !important;
    line-height: 1.5 !important;
  }
  
  #hs_cos_wrapper_widget_1763567742792{
    overflow:hidden;
  }
  .row-number-3 img{
    margin-bottom:-6px;
  }
  .product-content-category-expanded{
    gap: 2%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
}
  .beea-item span{    
    color: #FDCC2C;
  }
 .product-content-category-expanded-item{
    border-radius: 30px 150px 150px 30px;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid;
    padding: 20px;
    margin-bottom: 30px;
  }
.half-item{
width:49%;
}
  .products-list-product-page .product-item{
    justify-content: flex-start!important;
}
  .product-div-product-page h3 img{

    filter: brightness(9);
    height: 28px;
    margin: 0px 10px;
}

.product-div-product-page .product-content-category-item {
    padding: 10px;
    width: auto;
}
.products-list-product-page {
    margin: 24px 0px;
  }

.product-div-product-page .tab-item-active p{
color: #1e1e1e !important;
transition: 0.3s;
font-weight: 500;
}

.product-div-product-page{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.product-div-product-page .products-tabs {
    display: flex;
    width: auto;
    max-height: 550px;
    justify-content: space-between;
    flex-direction: column;
}.product-div-product-page .product-content{
width:100%;

}
.product-div-product-page .products-tab-item{
    min-height: 56px;
    min-width: 160px;
    transition: width .4s ease-in-out;  
}
.product-div-product-page  .product-content-wrapper{
margin:auto; 
    min-height: 530px;
    border-radius: 20px;
background: linear-gradient(18deg, rgba(253, 204, 44, 1) 71%, rgba(255, 249, 230, 1) 100%) !important;
}

.product-div-product-page  .tab-item-active {
    max-width: 100%;
    background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(258, 249, 230, 0.00) 100%), #FDCC2C !important;
    color: #111 !important;
    
}

  @media(max-width:678px){
    .contact-pill-text h2,
    .contact-pill-text p{
      margin-bottom:15px!important;
    }
    .contact-pill {
        flex-direction: column !important;
        align-items: flex-start !important;
        border-radius: 32px !important;
    }
    .recommendations-slider .slick-current{
          opacity: 1 !important;
          background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255, 249, 230, 0.00) 100%), #FDCC2C;
      }
  .product-div-product-page .products-tabs{
      gap: 10px;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        flex-direction: row;
    }
    .product-div-product-page .products-tab-item{      
    min-width: auto!important;
    }
        .products-tabs p {
        display: none;
    }
    .product-div-product-page .product-content{
      padding:20px;
    }
    .half-item{
      width:100%;
    }
    .product-div-product-page .products-tabs{
      gap:10px;
      width:100%;
    }
    .contact-pill,.product-div-product-page{      
    flex-direction: column!important;   
    align-items: flex-start!important;
    }
.cases-wrapper,
.challenges-list,
.products-list,
.tolls-list{  
    flex-direction: column!important;
}

.case-item,
.challenge-item,
.product-item,
.toll-item{
width:100%!important;
margin-bottom:10px!important;
}
}
  .challenges-list{    
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 2%;
    align-items: flex-start;
}
.challenge-item{
    width: 49%;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    min-height: 375px;
    margin-bottom: 15px;
}
.challenge-item span{
    font-size: 20px;
}
.challenge-item h3 {
    font-size: 33px;
  }
  .products-list {
    display: flex;
    flex-direction: row;
    gap: 1%;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
}

.product-item {
    width: 24%;
    padding: 30px;
    background: #fff;
    border-radius: 20px;
    display: flex;
    height: 300px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.product-item h3{
    font-size: 33px;
    max-width: 200px;
}
.product-item img{
    filter: brightness(0);
}
  .tolls-list{
    display: flex;
    flex-wrap: wrap;
    gap: 1%;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    align-content: center;
}

.toll-item {
    width: 49%;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 10px 10px 10px #ccc;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    min-height: 140px;
    background: #ffff;
    flex-direction: row;
    align-items: center;
  }
  .contact-pill{
    display: flex;
    padding: 30px;
    background: linear-gradient(18deg, rgba(253, 204, 44, 1) 71%, rgba(255, 249, 230, 1) 100%) !important;
    border-radius: 10px 150px 150px 10px;
    margin-top: -22px;
    box-shadow: 10px 10px 40px #ccc;
    align-content: center;
    align-items: center;
    justify-content: space-between;
  }
  form{
        max-width: 800px;
    margin: auto;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
  }
  form .hs-form-field,form .hs-input,form input[type=submit] {
    width: 100% !important;
}
  }
  .dnd_area-row-9-force-full-width-section .slick-dots{
    display:none;
  }
  .slick-list.draggable {
    background: none !important;
}
  article img{    
    border-radius: 20px 150px 150px 20px;
  }
  article a{    
    font-size: 23px;
    font-weight: 300;
  }
  article > div > div{
        background: linear-gradient(18deg, rgba(253, 204, 44, 1) 71%, rgba(255, 249, 230, 1) 100%) !important;
    padding: 20px;
    border-radius: 20px;
  }
   .hide{
    display:none;
  }
  .dnd_area-row-1-background-layers{    
background:#fdcb2c;
  }
  .cta-1{
    color: #1e1e1e;
    font-size: 18px;
    font-weight: 400;
    padding: 15px;
    background: #FCDD00;
    border-radius: 10px 50px 50px 10px;
  }
.cta-2{
    color: #fff;
  display:inline-flex;
    font-size: 16px;
    font-weight: 400;
    line-height: 150%;
    font-style: normal;
    font-weight: 400;
    padding: 8px 16px;
    background: #1e1e1e;
    border-radius: 35px 80px 80px 35px;
  }
  .cta-1:hover,
  .cta-2:hover{
    opacity:0.8;
  }
  .pill-content{    
    display: flex;
    width: 100%;
 }  
  .pill-item{    
    width: 25%;
    display: flex;
    font-weight: 500;
    font-size: 20px;
    gap: 10px;
    flex-direction: row;
    align-content: center;
    align-items: center;    
  }
  .pill-item p,
  .products-tab-item p{
  margin:0px;
  }  
 .pill-wrapper{
    padding: 20px;
    background: #ffff;
    border-radius: 10px 50px 50px 10px;
    margin-top: -22px;
    box-shadow: 10px 10px 40px #ccc;
  }
 
  .product-content-wrapper{
        display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #FDCC2C;
    margin: 50px 0px;
    padding: 0px 20px;
    border-radius: 10px 300px 300px 10px;
  }
  .product-content{
    padding:40px;
    width:60%;
  }
  .product-content-image{    
    position: relative;
    height: 470px;
    width: 50%;
  }
  .product-content-image img{ 
    position: absolute;
    right: 0px;
    top: -20px;
  }
  .product-content-item span{    
    font-size: 19px;
    font-weight: 700;
  }
 .product-content-item p{    
    font-size: 18px;
    font-weight: normal;
    margin-top: 20px;
  }
  .product-content-category{
        border-radius: 10px 60px 60px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 1px solid;
    padding: 20px;
    margin-bottom: 30px;
  }
  .product-content-category-item{    
    font-size: 14px;
    font-weight: 600;
    width: 25%;
  }
  .recommendations--role{
    font-size:18px;
  }
  .recommendations--name{
    font-size: 21px;    
  }
  .recommendations--text,
  .recommendations--text p,
  .recommendations--text span{
    font-size:16px;
    
  }
  .recommendations--top-title-area{    
    align-items: flex-start!important;
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-direction: column;
  }
  .slick-dots li.slick-active>button{
        border-radius: 0px 20px 20px 0px;
    width: 100px;
  }
  .security-home{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: #FDCC2C;
    margin: 50px 0px;
    padding: 0px 20px;
    border-radius: 10px 300px 300px 10px;
    align-items: center;
}
  .recommendation-individual {
    border:0px!important;
background: #949494;    
    opacity: 0.6;
background: linear-gradient(18deg,rgba(148, 148, 148, 1) 71%, rgba(243, 243, 243, 1) 100%);
  }
  
  .security-home-img{    
    display: flex;
    flex-wrap: wrap;
    width: 40%;
    align-items: center;
    height: 370px;
  }
  .security-home-text p{    
    font-size: 18px;
    margin-bottom: 40px;
  }
  .security-home-img-item{    
    display: flex;
    flex-direction: column;
    width: 50%;
    font-size: 20px;
    font-weight: 600;
    height: 200px;
    align-content: center;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .security-home-text{    
    width: 50%;
    padding: 40px;
  }
  .case-item-logo,.case-item-cta{  
    padding: 0px 30px;
  background: #fdd246;
  }
  .case-item-logo img{    
    padding-bottom: 15px;
  }
  .case-item-content{    
    transition: all 0.4s 
cubic-bezier(0.42, 0, 0.58, 1);
    gap: 32px;
    color: #fff;
    position: relative;
    z-index: 2;
    bottom: -240px !important;
    transition: all 0.4s 
cubic-bezier(0.42, 0, 0.58, 1);
    height: 600px;
  }
  .case-item-text{   
    background: #fdd246; 
    color: #111;
    padding: 30px;
    font-size: 16px;
  }
  .case-item-title{    
    color: #111;
    font-size: 24px;
    padding: 0px 30px;
    background: #fdd246;
    font-weight: 500;
  }
  .case-item{
    background-size: cover!important;
    background-repeat:no-repeat;
    overflow: hidden;
    height: 520px;
    width:32%;
    border-radius: 16px;
    vertical-align: baseline;
  }
  .cases-wrapper{    
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
  }
  .case-item:hover .case-item-content {
    bottom: 0px !important;
    gap: 8px;
    transition: all 0.4s 
cubic-bezier(0.42, 0, 0.58, 1);
}
.case-item-blur {
    background: linear-gradient(180deg, rgba(32, 24, 61, 0) 0%, rgb(253 210 70) 100%);
    height: 100px;
}
  .case-item-cta{    
    height: 100px;
  }


/* ---------- dobras: cards de add-on e faixa da Bee-IA ---------- */
/* --- Configurações Gerais do Container --- */
        .bh-orbital-section {
            width: 100%;
            display: flex;
            align-items: flex-end; /* Conteúdo colado na base */
            justify-content: center;
            overflow: hidden;
            position: relative;
            
            /* Correção de espaçamento fantasma */
            line-height: 0;
            font-size: 0;
        }

        .bh-orbital-section * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        /* --- BALÕES DE TEXTO --- */
        .info-bubble {
            position: absolute;
            background: #FFFFFF;
            padding: 16px 20px;
            border-radius: 8px 100px 100px 8px;
            width: fit-content;
            max-width: 220px;
            box-shadow: 0 10px 25px rgba(30, 30, 30, 0.08);
            z-index: 20;
            animation: bh-fadeInBubble 1s ease-out forwards 1s;
            opacity: 0;
            color: #1E1E1E;
            text-align: left;
            
            font-family: 'Lexend', sans-serif;
            font-size: 12px; 
            line-height: 150%;
            font-style: normal;
            font-weight: 400;
        }

        .info-bubble strong {
            display: block;
            font-size: 1.5em; 
            font-weight: 600;
            margin-bottom: 4px;
        }

        /* Posicionamento Desktop */
        .bubble-left {
            top: 48%;
            left: 10px;
        }

        .bubble-right {
            bottom: 16%;
            right: 30px;
        }
        
        @media (min-width: 769px) and (max-width: 1366px) {
            .bubble-left { left: 15%; }
            .bubble-right { right: 15%; }
        }

        @keyframes bh-fadeInBubble {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- Área Central --- */
        .bh-orbital-section .box-block {
            position: relative;
            width: 450px;
            height: 450px;
            margin-bottom: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        /* --- Órbita Rotativa --- */
        .bh-orbital-section .circle {
            position: absolute;
            width: 0;
            height: 0;
            /* Centralizado na cabeça e deslocado para a direita */
            top: 37%;
            left: 54%;
            animation: bh-rotate 60s linear infinite;
            pointer-events: none;
            z-index: 1; 
        }

        .bh-orbital-section .box {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 10;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            animation: bh-boxEntry 1s ease-out forwards;
        }

        .bh-orbital-section .box .logo-central {
            width: 100%;
            object-fit: contain;
            display: block; 
        }

        /* --- Slots da Mandala (Pétalas) --- */
        .bh-orbital-section .icon-box {
            position: absolute;
            width: 20px;
            height: 20px;
            top: -10px;
            left: -10px;
            pointer-events: none;
            transform: rotate(var(--angle)); 
            animation: bh-popIconBox 800ms ease-out forwards var(--box-delay);
        }

        .bh-orbital-section .icon-box::before {
content: '';
    position: absolute;
    top: -4px;
    left: -10px;
    right: -10px;
    bottom: -14px;
    border-radius: 0 0 50% 50%;
    padding: 3px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
        }

        @keyframes bh-boxEntry {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        @keyframes bh-rotate {
            100% { transform: rotate(360deg); }
        }

        @keyframes bh-popIconBox {
            0% {
                 transform: rotate(var(--angle)) translateY(0);
                 width: 20px; height: 20px;
            }
            100% {
                /* Tamanho 55px para as linhas não se tocarem */
                width: 55px; 
                height: 55px;
                top: -27.5px;
                left: -27.5px;
                transform: rotate(var(--angle)) translateY(-120px);
            }
        }

        .bh-orbital-section .icon-box:nth-child(1) { --angle: 0deg;    --box-delay: 100ms; }
        .bh-orbital-section .icon-box:nth-child(2) { --angle: -45deg;  --box-delay: 200ms; }
        .bh-orbital-section .icon-box:nth-child(3) { --angle: -90deg;  --box-delay: 300ms; }
        .bh-orbital-section .icon-box:nth-child(4) { --angle: -135deg; --box-delay: 400ms; }
        .bh-orbital-section .icon-box:nth-child(5) { --angle: -180deg; --box-delay: 500ms; }
        .bh-orbital-section .icon-box:nth-child(6) { --angle: -225deg; --box-delay: 600ms; }
        .bh-orbital-section .icon-box:nth-child(7) { --angle: -270deg; --box-delay: 700ms; }
        .bh-orbital-section .icon-box:nth-child(8) { --angle: -315deg; --box-delay: 800ms; }

        /* --- RESPONSIVIDADE (Mobile) --- */
        @media (max-width: 768px) {
            .bh-orbital-section { 
                align-items: center; 
                overflow: visible;
            }

            .bh-orbital-section .box-block { width: 100%; height: auto; }
            .bh-orbital-section .icon-box { animation-name: bh-popIconBoxMobile; }
            
            /* Ajuste Mandala Mobile: Mais para cima */
            .bh-orbital-section .circle {
                top: 25%; /* Subiu de 37% para 30% */
                /* left mantém-se herdeiro do desktop ou pode ajustar se necessário */
            }

            /* Ajuste Mobile: Balões empilhados na base, alinhados à esquerda */
            .bubble-left { 
        top: 116%;
        left: 5%;
        min-width: 90%;
        transform: none;
            }
            
            .bubble-right { 
        top: 90%;

        min-width: 90% !important;

        bottom: auto;
        right: auto;
            }
            
            @keyframes bh-fadeInBubble {
                from { opacity: 0; }
                to { opacity: 1; }
            }
        }

        @keyframes bh-popIconBoxMobile {
            0% {
                 transform: rotate(var(--angle)) translateY(0);
                 width: 20px; height: 20px;
            }
            100% {
                /* Reduzido de 35px para 28px para não se tocarem */
                width: 28px;
                height: 28px;
                
                /* Reajuste do centro (metade de 28) */
                top: -14px;
                left: -14px;
                
                transform: rotate(var(--angle)) translateY(-70px);
            }
        }
      
        form .hs-input, form input[type=submit]{
    border-radius: 8px!important;
  }
  form input[type=text], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea{
        background-color: #fff!important;
    border-radius: 8px;
border: 1px solid var(--Gray, #A7A7A7);
    
  }
  form{
    border-radius: 24px;
    padding: 40px !important;
background: #FFF;
/* shadow */
box-shadow: 0 100px 80px 0 rgba(0, 0, 0, 0.07), 0 41.778px 33.422px 0 rgba(0, 0, 0, 0.05), 0 22.336px 17.869px 0 rgba(0, 0, 0, 0.04), 0 12.522px 10.017px 0 rgba(0, 0, 0, 0.04), 0 6.65px 5.32px 0 rgba(0, 0, 0, 0.03), 0 2.767px 2.214px 0 rgba(0, 0, 0, 0.02);
  }
      
      
      /*BOX ADDONS*/
      .add-on-produto {
        height:264px;
          border-radius: 24px;
          background-color:#fff;
          display: flex;
          padding: 24px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 16px;
          flex-shrink: 0;
      }

      .add-on-produto img {
        height: 64px;
        width: auto;
      }
      
      .add-on-produto p {
        font-size: 14px;
      }
      
      .bee-ia-produto {
        height:264px;
        display: flex;
        color: #fff;
        gap:24px;
        padding: 24px;
        justify-content: space-between;
        align-items: center;
        border-radius: 24px;
        background: #303030;
      }

@media (max-width: 600px) {

  .product-item {
    height: auto !important;
  }

    .bee-ia-produto {
        height: auto !important;
        display: flex;
        flex-direction: column !important;
        color: #fff;
        gap: 24px;
        padding: 24px;
        justify-content: center; 
        align-items: center;
        border-radius: 24px;
        background: #303030;
    }

}


/* ---------- estrutura de secao (substitui os .dnd_area-row-* do HubSpot) ---------- */
/* As larguras vem medidas da propria /organiza: as dobras de texto correm em
   1240px (a secao tem 20px de respiro lateral) e as dobras de componente em
   1280px (secao sem respiro). A pilula final ocupa a largura toda menos 20px. */
.sec { padding: 64px 20px; background: #FAF9F5; }
.sec > .sec-inner { max-width: 1240px; margin: 0 auto; }
.sec--wide { padding-left: 0; padding-right: 0; }
.sec--wide > .sec-inner { max-width: 1280px; }
.sec--pill > .sec-inner { max-width: none; }
/* A pilula fecha a pagina, e o rodape vem logo depois: sem respiro aqui ela
   encosta no preto. Nas 7 paginas de produto o que separava era a dobra de
   ferramentas do modulo, que nao existe na pilar da TV. */
.sec--pill { padding-bottom: 100px; }
.sec--hero { padding: 64px 20px 0; background: radial-gradient(72.56% 122.13% at 67.34% -52.16%, #FFF9E6 0%, rgba(255,249,230,0) 100%), #FDCC2C; }
.sec--tight { padding-top: 0; }
/* O cabecalho sticky tem 116px. Nas 7 paginas de produto o hero tem 611px de
   altura, por conta do mockup de celular em pe, e o H1 cai bem abaixo dele.
   Produto com peca em paisagem tem hero mais baixo, e um H1 de duas ou tres
   linhas subiria para tras do menu: nesse caso use .sec--hero-baixo. */
.sec--hero-baixo { padding-top: 140px; }
.sec--flush { padding-bottom: 0; }
.sec--depoimentos { padding: 100px 0; }
.sec--form { padding: 64px 20px 0; }
.hero-grid { display: grid; grid-template-columns: 40.16% 59.84%; align-items: center; }
.hero-grid > div { min-width: 0; }
.hero-grid > div:first-child { padding-right: 20px; }
.hero-copy h1 { font-size: 30px; font-weight: bold; text-align: left; }
.hero-copy h2 { font-size: 24px; font-weight: normal; line-height: 1; text-align: left; margin-top: 16px; }
.hero-copy p  { font-size: 16px; text-align: left; padding-bottom: 32px; }
.solucao-grid { display: grid; grid-template-columns: 52.90% 45.48%; align-items: center; }
.solucao-grid h2 { font-size: 24px; text-align: left; }
.solucao-grid p  { line-height: 1.2; text-align: left; }
/* Quando a dobra da solucao e uma lista de motivos em vez de texto corrido.
   O marcador usa o amarelo de acao (#FDCC2C), que nunca e cor de texto. */
.lista-porque { list-style: none; margin: 0; padding: 0; }
.lista-porque li { position: relative; padding-left: 26px; margin-bottom: 16px; font-size: 16px; line-height: 1.45; color: #1e1e1e; }
.lista-porque li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: #FDCC2C; }

/* ---------- peca de tela cheia, sem moldura ---------- */
/* Diferente dos mockups em monitor, esta e a propria tela: uma peca 16:9 que
   ocuparia a TV inteira. Sem moldura ela ficaria colada no fundo, entao leva
   raio, borda fina e sombra, o que a le como "uma tela" e nao como uma foto
   solta. A flutuacao e a mesma do .float das outras dobras. */
.tela-cheia {
  width: 100%; height: auto; display: block;
  border-radius: 14px; border: 1px solid rgba(30, 30, 30, 0.10);
  box-shadow: 0 18px 42px rgba(30, 30, 30, 0.18);
  animation: float 4s ease-in-out infinite;
}
/* O .solucao-grid nasce sem gap, calibrado para a ilustracao antiga, que era
   menor que a coluna e deixava respiro sozinha. Uma peca que ocupa a coluna
   inteira encostaria no texto, entao ela encolhe 48px e encosta a direita. */
/* img.tela-cheia e nao .tela-cheia: o tema traz
   img[width][height] { max-width: 100% }, com especificidade (0,2,1), que
   vencia um seletor de duas classes e mantinha a peca colada no texto. */
.solucao-grid img.tela-cheia { max-width: calc(100% - 48px); margin-left: auto; }
@media (max-width: 900px) {
  .solucao-grid img.tela-cheia { max-width: 100%; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .tela-cheia { animation: none; } }

/* A dobra de beneficios das 7 paginas de produto tem 4 itens, e o
   .product-tool-item nasce com width: 25% e min-height: 500px. Com 5 ou 6
   itens o flex esmaga todos numa linha (6 itens viram 183px de largura).
   Esta classe quebra em linhas de tres. E como o card fica mais largo, o
   texto ocupa menos altura e os 500px fixos deixavam uma faixa branca vazia
   embaixo: aqui a altura passa a ser a do conteudo, igualada por linha. */
.products-tool-list--3 { flex-wrap: wrap; align-items: stretch; }
.products-tool-list--3 .product-tool-item { width: calc(33.333% - 24px); min-height: 0; }
@media (max-width: 900px) { .products-tool-list--3 .product-tool-item { width: 100% !important; } }


/* ==========================================================================
   Beehome TV: componentes proprios
   A TV nao e um produto de celular, e estas duas pecas nao existiam no
   sistema. Cor, fonte, raio e sombra seguem os tokens das outras dobras.
   ========================================================================== */

/* ---------- peca do hero: a TV em perspectiva ---------- */
/* A peca ja vem com moldura propria e em perspectiva, entao a moldura em CSS
   nao entra aqui (ela continua servindo a tela de emergencia, abaixo). O PNG
   veio com fundo branco solido, sem canal alfa: em vez de recortar e arriscar
   halo nas bordas da sombra, a peca fica num card branco arredondado, que
   sobre o amarelo do hero funciona como enquadramento. */
.tv-hero { position: relative; width: 100%; max-width: 560px; margin: 0 auto; }
/* A peca tem fundo transparente, entao nao ha card branco: ela fica solta no
   amarelo. A sombra e drop-shadow e nao box-shadow, porque box-shadow
   desenharia um retangulo em volta da caixa da imagem em vez de acompanhar o
   contorno da TV. */
.tv-hero__card {
  animation: tvHeroEntra 0.9s cubic-bezier(0.16, 0.84, 0.44, 1) both,
             tvHeroFlutua 6s ease-in-out 0.9s infinite,
             tvHeroAcende 7s ease-in-out 1.6s infinite;
}
.tv-hero__card img { display: block; width: 100%; height: auto; }
@keyframes tvHeroEntra {
  from { opacity: 0; transform: translateY(18px) scale(0.965); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tvHeroFlutua {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
/* O brilho antigo era uma faixa branca por cima da peca. Sobre um card branco
   funcionava; sobre o amarelo, com a peca recortada, apareceria como um risco
   claro no fundo. Agora quem acende e a propria imagem, via filter, que
   respeita a transparencia. */
@keyframes tvHeroAcende {
  0%, 86%, 100% { filter: drop-shadow(0 20px 38px rgba(30, 30, 30, 0.24)) brightness(1); }
  93%           { filter: drop-shadow(0 20px 38px rgba(30, 30, 30, 0.24)) brightness(1.07); }
}
/* Quem pede menos movimento no sistema ve a peca parada. */
@media (prefers-reduced-motion: reduce) {
  .tv-hero__card { animation: none; filter: drop-shadow(0 20px 38px rgba(30, 30, 30, 0.24)); }
}

/* ---------- moldura de TV com a playlist rodando ---------- */
/* A moldura e desenhada em CSS. As telas por dentro sao pecas reais do
   produto, alternando em crossfade: e o que a TV faz na parede. */
.tv-frame { width: 100%; max-width: 520px; margin: 0 auto; }
.tv-frame__screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: #1E1E1E; border: 12px solid #3A3A3A; border-radius: 16px;
  box-shadow: 0 26px 54px rgba(30, 30, 30, 0.24);
}
.tv-frame__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: tvFade 15s linear infinite;
}
.tv-frame__slide:nth-child(1) { animation-delay: 0s; }
.tv-frame__slide:nth-child(2) { animation-delay: 5s; }
.tv-frame__slide:nth-child(3) { animation-delay: 10s; }
@keyframes tvFade {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  30%  { opacity: 1; }
  33%  { opacity: 0; }
  100% { opacity: 0; }
}
.tv-frame__neck { width: 12%; height: 14px; margin: 0 auto; background: #3A3A3A; }
.tv-frame__base { width: 34%; height: 10px; margin: 0 auto; background: #3A3A3A; border-radius: 0 0 8px 8px; }
.tv-frame__dots { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.tv-frame__dots span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(30, 30, 30, 0.22);
  animation: tvDot 15s linear infinite;
}
.tv-frame__dots span:nth-child(1) { animation-delay: 0s; }
.tv-frame__dots span:nth-child(2) { animation-delay: 5s; }
.tv-frame__dots span:nth-child(3) { animation-delay: 10s; }
@keyframes tvDot {
  0%, 33%   { background: #1E1E1E; transform: scale(1.15); }
  34%, 100% { background: rgba(30, 30, 30, 0.22); transform: scale(1); }
}
/* Quem pede menos movimento no sistema ve a primeira tela, parada. */
@media (prefers-reduced-motion: reduce) {
  .tv-frame__slide, .tv-frame__dots span { animation: none; }
  .tv-frame__slide:nth-child(1) { opacity: 1; }
  .tv-frame__dots span:nth-child(1) { background: #1E1E1E; }
}

/* ---------- tela de emergencia (ilustracao de interface) ---------- */
/* Nao existe captura desse recurso. Esta e a unica peca da pagina que e
   desenhada, e por isso leva legenda dizendo que e ilustracao. */
.tv-emergencia {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  background: #B3261E; color: #fff; text-align: center; padding: 6% 8%;
  font-family: Lexend, Arial, Helvetica, sans-serif;
}
.tv-emergencia__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.18); border-radius: 100px; padding: 5px 12px;
}
.tv-emergencia__titulo { font-size: clamp(20px, 4.6vw, 34px); font-weight: 800; line-height: 1.05; margin: 0; }
.tv-emergencia__texto { font-size: clamp(11px, 1.7vw, 14px); font-weight: 300; line-height: 1.4; margin: 0; opacity: .95; }
.legenda-ilustracao { font-size: 12px; color: #7D7D7D; text-align: center; margin-top: 14px; font-style: italic; }

/* ---------- dobra de passos (como o conteudo chega na tela) ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; margin-top: 48px; }
.passos::before {
  content: ""; position: absolute; top: 34px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(to right, #E4D9C3 0 8px, transparent 8px 16px);
  z-index: 0;
}
.passo { position: relative; z-index: 1; background: #FEFEFC; border: 1px solid #E9E9E9; border-radius: 18px; padding: 28px 24px; transition: transform .25s ease, border-color .25s ease; }
.passo:hover { transform: translateY(-4px); border-color: #FDCC2C; }
.passo__num {
  width: 44px; height: 44px; border-radius: 50%; background: #FDCC2C; color: #1E1E1E;
  font-family: Lexend, Arial, Helvetica, sans-serif; font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.passo h3 { font-family: Lexend, Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 700; color: #1E1E1E; margin: 0 0 10px; letter-spacing: -0.2px; }
.passo p { font-family: Lexend, Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.55; color: #565450; margin: 0; }

/* ---------- depoimentos com cards de altura igual ---------- */
/* O slider do site alinha os slides pelo centro (.slick-track tem
   align-items: center), entao cada card fica com a altura do proprio texto e
   a fileira sai desencontrada. Isto acontece hoje tambem na home, onde os
   cards visiveis medem 564, 558, 540, 492 e 561px. A classe abaixo estica
   todos a mesma altura, sem mexer no slider das outras paginas. */
.recommendations-slider--igual .slick-track { align-items: stretch !important; }
.recommendations-slider--igual .slick-slide { height: auto !important; }
.recommendations-slider--igual .slick-slide > div { height: 100%; }
.recommendations-slider--igual .recommendation-individual { height: 100%; display: flex; flex-direction: column; }
.recommendations-slider--igual .recommendation-individual .bottom-title-area { flex: 1; }
/* A causa do desencontro nao era so o alinhamento: as fotos vem em tamanhos
   diferentes no HTML da home (Debora com 277px e Elizabete com 320px de
   altura, contra 75px das outras tres). Aqui todas viram o mesmo circulo de
   75px, que e o tamanho que o componente ja usa na maioria dos cards. */
.recommendations-slider--igual .recommendations--top-title-area img {
  width: 75px !important; height: 75px !important; min-width: 75px;
  border-radius: 50%; object-fit: cover;
}
.recommendations-slider--igual .recommendations--top-title-area picture { display: contents; }
@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .passos::before { display: none; }
}
.categoria-titulo { padding: 64px 0 48px; }
/* 4 colunas, e a faixa da Bee-IA ocupa duas: 6 add-ons + Bee-IA fecham
   exatamente duas linhas, como na pagina atual. */
.addons-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.addons-grid > .bee-ia-produto { grid-column: span 2; }
@media (max-width: 900px) {
  /* no celular as paginas atuais usam 16px de respiro lateral em toda dobra */
  .sec, .sec--hero, .sec--form { padding-left: 16px; padding-right: 16px; }
  /* no celular o header sticky cobre o topo do hero: as paginas atuais
     empurram o H1 para 128px */
  .sec--hero { padding-top: 128px; }
  .sec--wide { padding-left: 16px; padding-right: 16px; }
  .sec--depoimentos { padding: 64px 16px; }
  .hero-grid, .solucao-grid { grid-template-columns: 1fr; }
  .hero-grid > div:first-child { padding-right: 0; }
  .addons-grid { grid-template-columns: repeat(2, 1fr); }
  .addons-grid > .bee-ia-produto { grid-column: span 2; }
}
@media (max-width: 560px) {
  .addons-grid, .addons-grid > .bee-ia-produto { grid-template-columns: 1fr; grid-column: auto; }
}

/* ---------- variacao de mockup em paisagem ---------- */
/* As 7 paginas de produto mostram o produto num mockup de celular em pe
   (456x938). Produto de tela grande, como a Beehome TV, tem captura em
   paisagem (1200x750): no slot de celular ela esticaria. Estas classes
   trocam so a proporcao. Cor, tipografia, fundo da aba e botao nao mudam. */
.video-section--wide { min-height: 420px; align-items: center; }
.video-section--wide img { width: 100%; max-width: 700px; height: auto; display: block; margin-bottom: -60px; }
/* Hero de peca em paisagem nao tem o mockup de celular vazando para fora, e
   com padding-bottom 0 o botao encosta na dobra seguinte. */
.sec--hero-baixo { padding-bottom: 72px; }
/* O .tab-grid original nasce com gap 0, porque o mockup de celular e estreito
   e sobra respiro natural. Peca em paisagem e larga: sem gap ela encosta no
   texto. Aqui o mockup vai para uma coluna de largura fixa e o texto fica com
   o resto, com 64px de folga entre os dois. */
.tabs-section-comunica .tab-grid--wide { grid-template-columns: 380px 1fr; column-gap: 64px; }
.tabs-section-comunica .tab-grid--wide.inverted-grid { grid-template-columns: 1fr 380px; }
/* <picture> e inline por padrao, e com a <img> em width:100% o slot colapsa
   para 0px. display: contents tira o <picture> do layout e a imagem passa a
   medir contra a coluna do grid. */
.tabs-section-comunica .tab-mockup--wide picture,
.tv-hero picture { display: contents; }
.tabs-section-comunica .tab-mockup--wide img {
  width: 100%; max-width: 380px; height: auto; margin: 0 auto; display: block;
  /* os mockups tambem sao recortados: drop-shadow acompanha o contorno do
     monitor, box-shadow desenharia um retangulo em volta */
  filter: drop-shadow(0 14px 30px rgba(30, 30, 30, 0.20));
}
/* O .tab-bg original e um retangulo amarelo de 300px fixos em top: 23%, medida
   pensada para o mockup de celular de 570px que atravessa por cima e por
   baixo dele. Com peca em paisagem o painel fica bem mais baixo, e o texto e
   o botao acabavam ACIMA do amarelo. No modo paisagem o amarelo passa a
   cobrir o painel inteiro e o conteudo respira por dentro. */
.tabs-section-comunica .tab-panel--wide.active { min-height: 0; max-width: 1120px; }
.tabs-section-comunica .tab-panel--wide .tab-bg { top: 0; bottom: 0; height: auto; padding: 0; }
.tabs-section-comunica .tab-panel--wide .tab-grid--wide { position: relative; padding: 56px; z-index: 1; }
@media (max-width: 900px) {
  .tabs-section-comunica .tab-panel--wide .tab-grid--wide { padding: 32px 24px; }
}
@media (max-width: 900px) {
  .video-section--wide img { max-width: 100%; margin-bottom: -24px; }
  .tabs-section-comunica .tab-grid--wide,
  .tabs-section-comunica .tab-grid--wide.inverted-grid { grid-template-columns: 1fr; }
  /* No celular o .tab-grid original vira flex em coluna, e ai o item encolhe
     ate o conteudo. Uma <img> tem largura propria e estica; a moldura de TV,
     que e feita de divs, colapsava para 129px. */
  .tabs-section-comunica .tab-grid--wide { align-items: stretch; }
  .tabs-section-comunica .tab-grid--wide > .tab-mockup--wide { width: 100%; }
}