/* ==========================================================================
   NTJ Assessoria — Design System (tema escuro)
   Índice:
   01. Tokens
   02. Base / reset
   03. Tipografia
   04. Utilitários (container, grid, seções, reveal)
   05. Botões e links
   06. Header e navegação
   07. Drawer mobile
   08. Hero — carrossel 3D
   09. Produtos
   10. Quem somos
   11. Vídeo
   12. Números
   13. Como funciona
   14. Depoimentos
   15. Parceiros
   16. Benefícios
   17. Faixa CTA
   18. Instagram
   19. Contato / formulário
   20. Footer
   21. Botões flutuantes
   22. Páginas internas
   23. Blog / listagens
   24. Acessibilidade e movimento reduzido
   25. Responsivo
   ========================================================================== */

/* 01. Tokens
   ========================================================================== */
:root {
	--ntj-bg: #0d0a08;
	--ntj-bg-2: #1a1614;
	--ntj-bg-3: #1f1a17;
	--ntj-card: #252019;
	--ntj-card-hover: #2b251d;
	--ntj-border: rgba(245, 240, 232, 0.08);
	--ntj-border-strong: rgba(245, 240, 232, 0.16);

	--ntj-text: #f5f0e8;
	--ntj-text-2: #ffffff;
	--ntj-text-3: #7a7268;

	--ntj-wine: #8b1a1a;
	--ntj-wine-hover: #a32424;
	--ntj-amber: #e08c20;
	--ntj-amber-soft: rgba(224, 140, 32, 0.14);
	--ntj-orange: #d4700a;
	--ntj-green: #3b6b35;

	--ntj-grad: linear-gradient(120deg, var(--ntj-wine) 0%, var(--ntj-amber) 100%);
	--ntj-grad-soft: linear-gradient(120deg, rgba(139, 26, 26, 0.22), rgba(224, 140, 32, 0.16));

	--ntj-radius-sm: 10px;
	--ntj-radius: 14px;
	--ntj-radius-lg: 18px;
	--ntj-radius-btn: 999px;
	--ntj-btn-shadow: 0 10px 24px -10px rgba(224, 140, 32, 0.45);
	--ntj-btn-shadow-hover: 0 16px 32px -10px rgba(224, 140, 32, 0.6);
	--ntj-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
	--ntj-shadow-hover: 0 26px 50px -24px rgba(0, 0, 0, 0.9);

	/* Tipografia híbrida: Grift como base (self-hosted) e Cormorant como serifa de acento */
	--ntj-font-title: "Grift", "Montserrat", "Segoe UI", sans-serif;
	--ntj-font-ui: "Grift", "Montserrat", "Segoe UI", sans-serif;
	--ntj-font-body: "Grift", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--ntj-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;

	--ntj-container: 1200px;
	--ntj-header-h: 84px;
}

/* 02. Base / reset
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--ntj-bg);
	color: var(--ntj-text);
	font-family: var(--ntj-font-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

body.ntj-no-scroll {
	overflow: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	display: block;
}

img {
	height: auto;
}

figure {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

section[id],
article[id] {
	scroll-margin-top: calc(var(--ntj-header-h) + 20px);
}

a {
	color: var(--ntj-amber);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--ntj-text);
}

button {
	font: inherit;
	cursor: pointer;
}

::selection {
	background: var(--ntj-amber);
	color: #14100d;
}

/* 03. Tipografia
   ========================================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--ntj-font-title);
	font-weight: 600;
	line-height: 1.12;
	color: var(--ntj-text);
	margin: 0 0 0.5em;
	letter-spacing: 0.005em;
}

p {
	margin: 0 0 1em;
}

.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ntj-font-ui);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	margin-bottom: 14px;
	vertical-align: middle;
}

.section-eyebrow .eyebrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--ntj-amber);
	line-height: 1;
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-eyebrow .eyebrow-icon svg,
.section-eyebrow .eyebrow-svg {
	width: 15px;
	height: 15px;
	display: block;
	flex-shrink: 0;
}

.section-eyebrow .eyebrow-svg-ntj-logo {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	box-shadow: 0 2px 7px -1px rgba(0, 0, 0, 0.45);
	transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
}

.section-head:hover .eyebrow-icon,
.quem-content:hover .eyebrow-icon,
.cta-box:hover .eyebrow-icon {
	transform: scale(1.15) rotate(4deg);
}

.section-title {
	font-size: clamp(1.45rem, 2.6vw, 2.05rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.35em;
}

.section-title-sm {
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	margin-bottom: 0.8em;
}

.section-sub {
	max-width: 680px;
	margin: 0 auto;
	color: var(--ntj-text-2);
	font-size: 1rem;
	line-height: 1.55;
}

.section-head {
	text-align: center;
	max-width: 820px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

.section-head-left {
	text-align: left;
	margin-left: 0;
	margin-right: 0;
}

.section-head-left .section-sub {
	margin-left: 0;
}

.section-head .section-title:last-child {
	margin-bottom: 0;
}

/* 04. Utilitários
   ========================================================================== */
.container {
	width: 100%;
	max-width: var(--ntj-container);
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 28px);
}

.container-narrow {
	max-width: 880px;
}

.section {
	position: relative;
	padding: clamp(52px, 6.5vw, 88px) 0;
}

.grid {
	display: grid;
	gap: clamp(18px, 2.5vw, 28px);
}

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

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

.section-foot-cta,
div.section-cta {
	margin-top: clamp(28px, 4vw, 44px);
	text-align: center;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	padding: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	background: var(--ntj-amber);
	color: #14100d;
	padding: 12px 20px;
	border-radius: 8px;
	font-family: var(--ntj-font-ui);
	font-weight: 700;
	text-decoration: none;
}

/* Scroll reveal (só esconde quando há JS) */
html.js .reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
	transition-delay: var(--reveal-delay, 0s);
	will-change: opacity, transform;
}

html.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}

html:not(.js) .reveal {
	opacity: 1;
	transform: none;
}

/* 05. Botões e links
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1.5px solid transparent;
	border-radius: var(--ntj-radius-btn);
	padding: 14px 30px;
	font-family: var(--ntj-font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	cursor: pointer;
	position: relative;
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1),
	            background 0.25s ease,
	            color 0.25s ease,
	            border-color 0.25s ease,
	            filter 0.25s ease;
}

.btn .ntj-icon {
	flex-shrink: 0;
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn:hover .ntj-icon {
	transform: translateX(4px);
}

.btn-primary {
	background: var(--ntj-grad);
	color: #ffffff;
	border-color: transparent;
	box-shadow: var(--ntj-btn-shadow);
}

.btn-primary:hover {
	color: #ffffff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: var(--ntj-btn-shadow-hover);
}

.btn-outline {
	background: transparent;
	border-color: var(--ntj-border-strong);
	color: var(--ntj-text);
	box-shadow: none;
}

.btn-outline:hover {
	background: var(--ntj-grad);
	border-color: transparent;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: var(--ntj-btn-shadow-hover);
}

.btn-lg {
	padding: 17px 38px;
	font-size: 0.84rem;
}

.btn-block {
	width: 100%;
}

.btn[disabled],
.btn.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ntj-font-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	text-decoration: none;
}

.link-arrow .ntj-icon {
	transition: transform 0.25s ease;
}

.link-arrow:hover {
	color: var(--ntj-text);
}

.link-arrow:hover .ntj-icon {
	transform: translateX(4px);
}

.ntj-icon {
	display: inline-block;
	vertical-align: middle;
}

/* 06. Header
   ========================================================================== */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	padding: 13px 0;
	background: transparent;
	transition: background 0.35s cubic-bezier(0.25, 1, 0.5, 1),
	            padding 0.35s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
	            backdrop-filter 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-header.is-scrolled {
	padding: 9px 0;
	background: rgba(13, 10, 8, 0.94);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 1px 0 var(--ntj-border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

.site-branding,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	transition: gap 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-logo:hover .logo-title {
	color: var(--ntj-wine-hover, #a32424);
}

.site-logo .logo-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 58px;
	width: auto;
	flex-shrink: 0;
	transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-logo .logo-mark img,
.site-logo .logo-mark svg,
.site-logo > img,
.custom-logo-link > img {
	height: 100%;
	width: auto;
	max-height: 100%;
	display: block;
	object-fit: contain;
	transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.site-logo .logo-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1;
	user-select: none;
}

.site-logo .logo-title {
	font-family: var(--ntj-font-ui, Montserrat, sans-serif);
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ntj-wine, #8B1A1A);
	line-height: 1;
	margin: 0;
	transition: font-size 0.35s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s ease;
}

.site-logo .logo-subtitle {
	font-family: var(--ntj-font-ui, Montserrat, sans-serif);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	color: var(--ntj-text);
	margin: 0;
	line-height: 1.35;
	max-width: 320px;
	transition: font-size 0.35s cubic-bezier(0.25, 1, 0.5, 1),
	            max-width 0.35s ease,
	            color 0.25s ease;
}

.site-logo .logo-title + .logo-subtitle {
	font-size: 0.7rem;
	color: var(--ntj-text-2, #ffffff);
	margin-top: 4px;
	line-height: 1.25;
}

/* Transição de encolhimento no scroll */
.is-scrolled .site-logo {
	gap: 10px;
}

.is-scrolled .site-logo .logo-mark,
.is-scrolled .site-logo .logo-mark img,
.is-scrolled .site-logo .logo-mark svg,
.is-scrolled .site-logo > img,
.is-scrolled .custom-logo-link > img {
	height: 42px;
}

.is-scrolled .site-logo .logo-title {
	font-size: 1.35rem;
}

.is-scrolled .site-logo .logo-subtitle {
	font-size: 0.68rem;
	line-height: 1.25;
	max-width: 260px;
}

.is-scrolled .site-logo .logo-title + .logo-subtitle {
	font-size: 0.58rem;
	line-height: 1.2;
	max-width: 250px;
	margin-top: 2px;
}

.main-nav {
	margin-left: auto;
}

.main-nav .menu {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.4vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav a {
	position: relative;
	color: var(--ntj-text);
	font-family: var(--ntj-font-ui);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 8px 2px;
	transition: color 0.2s ease;
}

.main-nav a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--ntj-grad);
	transition: right 0.3s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a,
.main-nav .is-active > a {
	color: var(--ntj-amber);
}

.main-nav a:hover::after,
.main-nav .current-menu-item > a::after,
.main-nav .is-active > a::after {
	right: 0;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 16px;
}

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 22px;
	border-radius: var(--ntj-radius-btn);
	background: var(--ntj-grad);
	color: #ffffff;
	font-family: var(--ntj-font-ui);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1.5px solid transparent;
	box-shadow: var(--ntj-btn-shadow);
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1),
	            filter 0.25s ease,
	            color 0.25s ease;
}

.header-cta:hover {
	color: #ffffff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: var(--ntj-btn-shadow-hover);
}

.header-cta .btn-arrow {
	display: inline-block;
	font-size: 1.15em;
	line-height: 1;
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.header-cta:hover .btn-arrow {
	transform: translateX(4px);
}

/* Hambúrguer */
.menu-toggle {
	display: none;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--ntj-border-strong);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.menu-toggle:hover {
	border-color: var(--ntj-amber);
}

/* Alternância claro/escuro (botão da navbar, para o visitante) */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background: transparent;
	border: 1px solid var(--ntj-border-strong);
	border-radius: 50%;
	color: var(--ntj-text);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.theme-toggle:hover {
	border-color: var(--ntj-amber);
	color: var(--ntj-amber);
}

.theme-toggle .theme-toggle-icon {
	display: none;
	align-items: center;
	justify-content: center;
}

/* Escuro mostra o sol (clique vai para claro); claro mostra a lua */
.theme-toggle .theme-toggle-sun {
	display: inline-flex;
}

.ntj-secoes-claras .theme-toggle .theme-toggle-sun {
	display: none;
}

.ntj-secoes-claras .theme-toggle .theme-toggle-moon {
	display: inline-flex;
}

.menu-toggle-box {
	position: relative;
	display: block;
	width: 20px;
	height: 14px;
}

.menu-toggle-line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: var(--ntj-text);
	transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.menu-toggle-line:nth-child(1) {
	top: 0;
}

.menu-toggle-line:nth-child(2) {
	top: 6px;
}

.menu-toggle-line:nth-child(3) {
	top: 12px;
}

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

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

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

/* 07. Drawer mobile
   ========================================================================== */
.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 99;
	background: rgba(13, 10, 8, 0.97);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s ease, visibility 0.35s ease;
	overflow-y: auto;
	padding: calc(var(--ntj-header-h) + 24px) clamp(20px, 6vw, 40px) 48px;
}

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

.drawer-inner {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 420px;
	margin: 0 auto;
	min-height: 100%;
}

.menu-drawer {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.menu-drawer a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--ntj-border);
	color: var(--ntj-text);
	font-family: var(--ntj-font-title);
	font-size: 1.7rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.25s ease;
}

.menu-drawer a:hover {
	color: var(--ntj-amber);
	padding-left: 8px;
}

.drawer-contact {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--ntj-text-2);
	font-size: 0.92rem;
}

.drawer-contact li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.drawer-contact a {
	color: var(--ntj-text-2);
	text-decoration: none;
}

.drawer-contact a:hover {
	color: var(--ntj-amber);
}

/* Redes sociais (drawer mobile e bloco de contato) */
.social-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.social-list li {
	margin: 0;
	padding: 0;
}

.social-list a {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--ntj-border-strong);
	border-radius: 50%;
	color: var(--ntj-text);
	text-decoration: none;
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.social-list a:hover,
.social-list a:focus-visible {
	background: var(--ntj-amber);
	border-color: var(--ntj-amber);
	color: var(--ntj-bg);
	transform: translateY(-2px);
}

.social-list a:focus-visible {
	outline: 2px solid var(--ntj-amber);
	outline-offset: 3px;
}

.social-list .ntj-icon {
	width: 20px;
	height: 20px;
	display: block;
}

/* 08. Hero — carrossel 3D
   ========================================================================== */
.hero {
	--hero-bg: var(--ntj-bg);
	--hero-glow:
		radial-gradient(58% 48% at 82% 16%, rgba(224, 140, 32, 0.14), transparent 70%),
		radial-gradient(48% 42% at 8% 82%, rgba(139, 26, 26, 0.22), transparent 72%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(13, 10, 8, 0.72) 0%, rgba(13, 10, 8, 0.35) 65%, transparent 100%);
	--hero-tag-line-bg: linear-gradient(90deg, var(--ntj-wine) 0%, var(--ntj-amber) 100%);

	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: stretch;
	padding: calc(var(--ntj-header-h) + 20px) 0 clamp(40px, 6vh, 72px);
	overflow: hidden;
	background: var(--hero-bg);
}

.hero > .container {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hero-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--hero-glow);
}

/* Esquemas de gradiente do Hero (Customizer -> Esquema de Gradiente do Hero) */

/* 1. Vinho Institucional & Ouro Velho (autoridade executiva e solidez) */
.hero--grad-vinho_institucional {
	--hero-bg: linear-gradient(145deg, #210708 0%, #140808 48%, #0d0a08 100%);
	--hero-glow:
		radial-gradient(64% 56% at 14% 26%, rgba(139, 26, 26, 0.44), transparent 72%),
		radial-gradient(56% 50% at 84% 20%, rgba(224, 140, 32, 0.2), transparent 70%),
		radial-gradient(52% 46% at 50% 92%, rgba(163, 36, 36, 0.25), transparent 75%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(24, 6, 6, 0.76) 0%, rgba(15, 7, 7, 0.38) 65%, transparent 100%);
}

/* 2. Âmbar Estratégico & Bronze (energia comercial e alta performance) */
.hero--grad-ambar_estrategico {
	--hero-bg: linear-gradient(140deg, #1f1307 0%, #140d07 52%, #0d0a08 100%);
	--hero-glow:
		radial-gradient(62% 54% at 80% 20%, rgba(224, 140, 32, 0.3), transparent 72%),
		radial-gradient(55% 48% at 16% 76%, rgba(212, 112, 10, 0.22), transparent 72%),
		radial-gradient(44% 38% at 48% 12%, rgba(139, 26, 26, 0.16), transparent 70%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(22, 14, 7, 0.74) 0%, rgba(13, 10, 8, 0.36) 65%, transparent 100%);
	--hero-tag-line-bg: linear-gradient(90deg, var(--ntj-amber) 0%, #f7b955 100%);
}

/* 3. Growth 360 — Verde Floresta & Âmbar (crescimento sustentável e eficiência) */
.hero--grad-growth_esmeralda {
	--hero-bg: linear-gradient(145deg, #0d170c 0%, #0f120c 52%, #0d0a08 100%);
	--hero-glow:
		radial-gradient(60% 52% at 15% 78%, rgba(59, 107, 53, 0.36), transparent 72%),
		radial-gradient(56% 48% at 84% 18%, rgba(224, 140, 32, 0.2), transparent 70%),
		radial-gradient(46% 40% at 62% 84%, rgba(143, 196, 135, 0.12), transparent 70%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(10, 18, 10, 0.75) 0%, rgba(13, 10, 8, 0.36) 65%, transparent 100%);
	--hero-tag-line-bg: linear-gradient(90deg, var(--ntj-green) 0%, var(--ntj-amber) 100%);
}

/* 4. Tríade Oficial NTJ — Vinho, Âmbar & Verde Floresta (identidade completa do emblema) */
.hero--grad-triade_ntj {
	--hero-bg: linear-gradient(150deg, #170b09 0%, #10110c 52%, #0d0a08 100%);
	--hero-glow:
		radial-gradient(56% 48% at 10% 82%, rgba(139, 26, 26, 0.34), transparent 70%),
		radial-gradient(56% 48% at 86% 16%, rgba(224, 140, 32, 0.25), transparent 68%),
		radial-gradient(52% 44% at 68% 86%, rgba(59, 107, 53, 0.28), transparent 72%);
	--hero-tag-line-bg: linear-gradient(90deg, var(--ntj-wine) 0%, var(--ntj-amber) 52%, var(--ntj-green) 100%);
}

/* 5. Noite Corporativa — Obsidiana Minimalista (sobriedade Private Banking e contraste máximo) */
.hero--grad-noite_corporativa {
	--hero-bg: linear-gradient(160deg, #060504 0%, #100c09 55%, #070504 100%);
	--hero-glow:
		radial-gradient(48% 42% at 76% 38%, rgba(224, 140, 32, 0.1), transparent 70%),
		radial-gradient(42% 38% at 20% 80%, rgba(139, 26, 26, 0.1), transparent 72%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(6, 5, 4, 0.82) 0%, rgba(6, 5, 4, 0.42) 65%, transparent 100%);
}

/* 6. Marfim Editorial & Âmbar (esquema luminoso / diurno) */
.hero--grad-creme_editorial {
	--hero-bg: linear-gradient(145deg, #faf6f0 0%, #f1e8dc 54%, #e7dac8 100%);
	--hero-glow:
		radial-gradient(58% 50% at 84% 18%, rgba(224, 140, 32, 0.2), transparent 70%),
		radial-gradient(52% 44% at 10% 82%, rgba(139, 26, 26, 0.12), transparent 72%),
		radial-gradient(44% 40% at 64% 88%, rgba(59, 107, 53, 0.1), transparent 70%);
	--hero-vignette: radial-gradient(ellipse at 35% 50%, rgba(250, 246, 240, 0.88) 0%, rgba(243, 236, 226, 0.45) 65%, transparent 100%);
}

.hero--grad-creme_editorial .hero-tag-text {
	color: #9c5206;
	text-shadow: none;
}

.hero--grad-creme_editorial .hero-title {
	color: #1f140d;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.hero--grad-creme_editorial .hero-title em,
.hero--grad-creme_editorial .hero-title strong {
	color: var(--ntj-wine);
	text-shadow: none;
}

.hero--grad-creme_editorial .hero-sub {
	color: #4a3a2d;
	text-shadow: none;
}

.hero--grad-creme_editorial .hero-arrow {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(43, 29, 20, 0.2);
	color: #2b1d14;
}

.hero--grad-creme_editorial .hero-dot {
	background: rgba(43, 29, 20, 0.25);
}

.hero--grad-creme_editorial .hero-dot.is-active {
	background: var(--ntj-wine);
}

body.ntj-home.ntj-hero-grad-creme_editorial .site-header:not(.is-scrolled) .main-nav a,
body.ntj-home.ntj-hero-grad-creme_editorial .site-header:not(.is-scrolled) .site-logo .logo-subtitle {
	color: #2b1d14;
}

body.ntj-home.ntj-hero-grad-creme_editorial .site-header:not(.is-scrolled) .theme-toggle,
body.ntj-home.ntj-hero-grad-creme_editorial .site-header:not(.is-scrolled) .menu-toggle {
	color: #2b1d14;
	border-color: rgba(43, 29, 20, 0.22);
}

.hero-stage {
	position: relative;
	perspective: 1700px;
	perspective-origin: 50% 40%;
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
}

.hero-track {
	position: relative;
	flex: 1 1 auto;
	min-height: 420px;
	transform-style: preserve-3d;
}

.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateX(0) translateZ(-420px) rotateY(0deg);
	transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.85s ease, filter 0.85s ease;
	filter: blur(8px);
}

.hero-slide.is-active {
	opacity: 1;
	transform: translateX(0) translateZ(0) rotateY(0);
	z-index: 3;
	pointer-events: auto;
	filter: blur(0);
}

/* Faces laterais do "cubo": anterior/próximo giram em torno da aresta que
   encosta no slide ativo, deixando parte visível nos cantos esquerdo/direito. */
.hero-slide.is-prev,
.hero-mirror {
	opacity: 0.72;
	transform-origin: 100% 50%;
	transform: translateX(-78%) rotateY(-32deg);
	z-index: 2;
	filter: blur(3px);
	pointer-events: auto;
	cursor: pointer;
}

.hero-slide.is-next {
	opacity: 0.58;
	transform-origin: 0 50%;
	transform: translateX(78%) rotateY(32deg);
	z-index: 2;
	filter: blur(2.5px);
	pointer-events: auto;
	cursor: pointer;
}

/* Espelho decorativo do vizinho no canto esquerdo (usado com 2 slides) */
.hero-mirror.is-swap {
	animation: heroMirrorIn 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes heroMirrorIn {
	from {
		opacity: 0;
	}
}

.hero-slide.is-prev:hover,
.hero-slide.is-next:hover,
.hero-mirror:hover {
	opacity: 0.94;
	filter: blur(0.5px);
}

/* Suaviza e esmaece o conteúdo dos slides inativos para não competir com o ativo */
.hero-slide.is-prev .hero-content,
.hero-slide.is-next .hero-content,
.hero-mirror .hero-content {
	opacity: 0.4;
	filter: blur(1.5px);
	transition: opacity 0.5s ease, filter 0.5s ease;
}

.hero-slide.is-prev:hover .hero-content,
.hero-slide.is-next:hover .hero-content,
.hero-mirror:hover .hero-content {
	opacity: 0.7;
	filter: blur(0);
}

/* Escurece levemente a imagem do slide de fundo para que elementos brancos não ofusquem o texto */
.hero-slide.is-prev .hero-media > img,
.hero-slide.is-next .hero-media > img,
.hero-mirror .hero-media > img {
	filter: brightness(0.78) contrast(0.95);
	transition: filter 0.5s ease;
}

.hero-slide.is-prev:hover .hero-media > img,
.hero-slide.is-next:hover .hero-media > img,
.hero-mirror:hover .hero-media > img {
	filter: brightness(1);
}

.hero-slide.is-next .hero-media {
	border-color: rgba(224, 140, 32, 0.45);
	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(224, 140, 32, 0.2);
}

.hero-slide.is-next::after {
	content: "Próximo \2192";
	position: absolute;
	right: clamp(10px, 3vw, 36px);
	top: 50%;
	transform: translateY(-50%);
	background: rgba(13, 10, 8, 0.88);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--ntj-amber);
	color: var(--ntj-amber);
	font-family: var(--ntj-font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 50px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 16px rgba(224, 140, 32, 0.25);
	z-index: 10;
	pointer-events: none;
	animation: ntjPulseNext 2.2s infinite ease-in-out;
}

@keyframes ntjPulseNext {
	0%, 100% {
		transform: translateY(-50%) translateX(0);
		opacity: 0.85;
	}
	50% {
		transform: translateY(-50%) translateX(6px);
		opacity: 1;
	}
}

.hero-slide-inner {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	align-items: center;
	gap: clamp(28px, 5vw, 64px);
	height: 100%;
	min-height: 0;
}

.hero-content {
	max-width: 560px;
	position: relative;
	z-index: 4;
}

.hero-slide.is-active .hero-content::before {
	content: "";
	position: absolute;
	inset: -24px -36px -24px -28px;
	background: var(--hero-vignette);
	pointer-events: none;
	z-index: -1;
	filter: blur(14px);
	border-radius: 24px;
}

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
	position: relative;
	cursor: default;
}

.hero-tag-emblem {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
	filter: drop-shadow(0 2px 8px rgba(224, 140, 32, 0.35));
	transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-tag-emblem .eyebrow-svg-ntj-logo {
	width: 18px;
	height: 18px;
}

.hero-tag-line {
	display: inline-block;
	width: 32px;
	height: 2px;
	background: var(--hero-tag-line-bg);
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(224, 140, 32, 0.45);
	transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
	flex-shrink: 0;
}

.hero-tag-text {
	font-family: var(--ntj-font-ui);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	line-height: 1.2;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
	transition: color 0.25s ease;
}

.hero-tag:hover .hero-tag-emblem {
	transform: scale(1.15) rotate(6deg);
}

.hero-tag:hover .hero-tag-line {
	width: 48px;
	box-shadow: 0 0 16px rgba(224, 140, 32, 0.7);
}

.hero-tag:hover .hero-tag-text {
	color: #f7a938;
}

.hero-title {
	/* O limite por altura da viewport evita que títulos longos estourem o
	   track em telas baixas e passem por cima dos controles do carrossel. */
	font-size: clamp(1.9rem, min(4.4vw, 6.4svh), 3.35rem);
	margin-bottom: 0.35em;
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85),
	             0 6px 18px rgba(0, 0, 0, 0.95),
	             0 14px 38px rgba(0, 0, 0, 0.9);
}

.hero-title em {
	font-style: italic;
	color: var(--ntj-amber);
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85),
	             0 6px 18px rgba(0, 0, 0, 0.95);
}

.hero-title strong {
	color: var(--ntj-amber);
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.85),
	             0 6px 18px rgba(0, 0, 0, 0.95);
}

.hero-sub {
	color: var(--ntj-text-2);
	font-size: clamp(0.98rem, 1.4vw, 1.1rem);
	max-width: 480px;
	margin-bottom: 32px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9),
	             0 4px 16px rgba(0, 0, 0, 0.95);
}

.hero-media {
	position: relative;
	border-radius: var(--ntj-radius-lg);
	overflow: hidden;
	box-shadow: var(--ntj-shadow);
	border: 1px solid var(--ntj-border);
	transform: translateZ(30px);
	height: min(100%, 66vh);
}

.hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, rgba(13, 10, 8, 0) 45%, rgba(13, 10, 8, 0.55) 100%);
	pointer-events: none;
}

.hero-media > img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Selo/logo do produto sobre a imagem (opcional, via campo no produto) */
.hero-media-logo {
	position: absolute;
	right: clamp(16px, 2.4vw, 26px);
	bottom: clamp(16px, 2.4vw, 26px);
	z-index: 1;
	display: inline-flex;
	align-items: center;
	padding: 13px 20px;
	border-radius: 18px;
	background: rgba(13, 10, 8, 0.25);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgb(255 152 0 / 18%);
	box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.35);
}

.hero-media-logo img {
	display: block;
	width: clamp(96px, 12vw, 152px);
	height: auto;
	object-fit: contain;
}

.hero-controls {
	/* Acima dos slides (z-index 2/3), para nunca ficar atrás da foto ou do
	   conteúdo quando algum título mais longo avançar sobre esta área. */
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: auto;
	padding-top: clamp(24px, 4vh, 44px);
}

.hero-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--ntj-border-strong);
	background: rgba(37, 32, 25, 0.6);
	color: var(--ntj-text);
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.hero-arrow:hover {
	border-color: var(--ntj-amber);
	color: var(--ntj-amber);
	transform: translateY(-2px);
}

.hero-dots,
.depoimentos-dots {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ntj-border-strong);
	transition: background 0.25s ease, transform 0.25s ease, width 0.25s ease;
}

.hero-dot.is-active {
	background: var(--ntj-grad);
	width: 26px;
	border-radius: 50px;
	transform: none;
}

.hero-phrase {
	margin: clamp(34px, 5vw, 54px) auto 0;
	text-align: center;
	font-family: var(--ntj-font-serif);
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	font-style: italic;
	color: var(--ntj-text);
	max-width: 900px;
	line-height: 1.3;
}

.hero-phrase::before,
.hero-phrase::after {
	content: "“";
	color: var(--ntj-amber);
	font-size: 1.3em;
	line-height: 0;
	vertical-align: -0.18em;
}

.hero-phrase::after {
	content: "”";
}

.hero-phrase-auth {
	display: block;
	margin-top: 10px;
	font-family: var(--ntj-font-ui);
	font-style: normal;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ntj-text-2);
}

/* 09. Produtos
   ========================================================================== */
.section-produtos {
	background: linear-gradient(180deg, var(--ntj-bg) 0%, var(--ntj-bg-2) 100%);
}

.card {
	position: relative;
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius);
	padding: 30px 26px;
	box-shadow: var(--ntj-shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ntj-shadow-hover);
	border-color: rgba(224, 140, 32, 0.32);
	background: var(--ntj-card-hover);
}

.card-title {
	font-family: var(--ntj-font-ui);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 18px 0 8px;
	color: var(--ntj-text);
}

.card-sub {
	color: var(--ntj-text-2);
	font-size: 0.92rem;
	margin-bottom: 20px;
}

.card-produto {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	padding: 34px 28px 28px;
}

.card-produto .card-produto-header {
	width: 100%;
}

.card-produto .card-title {
	font-size: 1.15rem;
	margin: 0 0 8px;
}

.card-produto .card-sub {
	font-size: 0.92rem;
	color: var(--ntj-text-2);
	margin-bottom: 20px;
	min-height: 2.6em;
	line-height: 1.45;
}

.card-produto .card-produto-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin: 10px auto 26px;
}

.card-produto .card-produto-icon .icon-badge {
	margin: 0 auto;
	transition: transform 0.3s ease;
}

.card-produto:hover .card-produto-icon .icon-badge {
	transform: scale(1.08) translateY(-2px);
}

.card-produto .card-produto-footer {
	width: 100%;
	margin-top: auto;
}

.card-produto .card-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--ntj-radius-btn);
	font-family: var(--ntj-font-ui);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 700;
	border: 1.5px solid transparent;
	color: #ffffff;
	background: var(--ntj-grad);
	box-shadow: var(--ntj-btn-shadow);
	transition: background 0.25s ease,
	            border-color 0.25s ease,
	            color 0.25s ease,
	            transform 0.25s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-produto .card-btn svg {
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hover: inverte o preenchimento — fundo suave, borda âmbar e texto do tema */
.card-produto:hover .card-btn,
.card-produto .card-btn:hover {
	background: var(--ntj-grad-soft);
	border-color: var(--ntj-amber);
	color: var(--ntj-text);
	transform: translateY(-2px);
	box-shadow: var(--ntj-btn-shadow);
}

.card-produto:hover .card-btn svg,
.card-produto .card-btn:hover svg {
	transform: translateX(4px);
}

.icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: var(--ntj-amber-soft);
	border: 1px solid rgba(224, 140, 32, 0.26);
	color: var(--ntj-amber);
	flex-shrink: 0;
}

.icon-badge-lg {
	width: 74px;
	height: 74px;
}

.icon-badge-xl {
	width: 96px;
	height: 96px;
}

.icon-badge img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	border-radius: 8px;
}

/* Ícones oficiais dos produtos (PNG) */
.icon-badge--img {
	background: transparent;
	border: 0;
	width: 80px;
	height: 86px;
}

.icon-badge--img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5));
}

.icon-badge--img.icon-badge-lg {
	width: 106px;
	height: 114px;
}

.icon-badge--img.icon-badge-xl {
	width: 136px;
	height: 148px;
}

/* 10. Quem somos
   ========================================================================== */
.section-quem-somos {
	background: var(--ntj-bg-2);
}

.quem-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(36px, 6vw, 80px);
	align-items: center;
}

.quem-media {
	position: relative;
}

.quem-photo {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--ntj-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ntj-border);
	box-shadow: var(--ntj-shadow);
	background: linear-gradient(160deg, #2b2119, #17110c);
}

.quem-photo::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 36%;
	background: linear-gradient(to top, rgba(14, 10, 7, 0.78) 0%, rgba(14, 10, 7, 0.28) 55%, transparent 100%);
	pointer-events: none;
	z-index: 1;
}

/* A foto é um pouco mais alta que a moldura: o JS desliza a imagem dentro
   do quadro conforme o scroll da página (parallax suave, sem hover) */
.quem-photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 118%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.02);
	will-change: transform;
}

.quem-bubble {
	position: absolute;
	right: clamp(-8px, -1vw, -14px);
	bottom: 52px;
	z-index: 2;
	max-width: 270px;
	margin: 0;
	padding: 20px 24px;
	background: var(--ntj-grad);
	color: #fff;
	border-radius: 20px 20px 4px 20px;
	font-family: var(--ntj-font-serif);
	font-size: 1.25rem;
	line-height: 1.3;
	font-style: italic;
	box-shadow: 0 22px 44px -20px rgba(139, 26, 26, 0.7);
}

.quem-bubble::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -12px;
	border: 8px solid transparent;
	border-top-color: var(--ntj-amber);
	border-right: 0;
}

.quem-content .section-eyebrow {
	margin-bottom: 12px;
}

.quem-content .quem-title {
	font-size: clamp(1.45rem, 2.6vw, 2.05rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.4em;
}

.quem-content .quem-sub {
	font-size: 1.05rem;
	color: var(--ntj-text-2);
	margin: 0 0 1.6em;
	line-height: 1.55;
	max-width: 580px;
}

.quem-text {
	color: var(--ntj-text-2);
	font-size: 1.02rem;
	margin-bottom: 24px;
}

.quem-text p {
	margin-bottom: 1.1em;
}

.quem-text strong {
	color: var(--ntj-amber);
	font-weight: 500;
}

.quem-sign {
	position: absolute;
	left: 20px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	font-family: var(--ntj-font-serif);
	font-size: 1.02rem;
	line-height: 1.25;
	color: rgba(246, 240, 232, 0.9);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65);
}

.quem-sign span {
	font-family: var(--ntj-font-ui);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(246, 240, 232, 0.72);
	display: inline-block;
	transform: translateY(-1px);
}

/* 11. Vídeo
   ========================================================================== */
.section-video {
	background: var(--ntj-bg);
}

.video-frame {
	position: relative;
	border-radius: var(--ntj-radius-lg);
	overflow: hidden;
	border: 1px solid var(--ntj-border);
	box-shadow: var(--ntj-shadow);
	aspect-ratio: 16 / 9;
	background: #000;
}

/* Fundo ambiente: thumb do vídeo ampliada e desfocada, preenchendo as
   laterais de vídeos verticais (sem exibir as barras do player) */
.video-frame-bg {
	position: absolute;
	inset: -40px;
	background-size: cover;
	background-position: center;
	filter: blur(44px) saturate(1.15) brightness(0.75);
	pointer-events: none;
}

/* Player no formato vertical (9:16), centralizado */
.video-frame iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: auto;
	max-width: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
}

/* Modo horizontal (16:9): o player preenche toda a moldura */
.video-frame--horizontal iframe {
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.video-frame--horizontal .video-frame-bg {
	display: none;
}

/* Fachada (click-to-play): poster + botão de play no lugar do player —
   o iframe do YouTube só entra ao clicar */
.video-facade {
	position: absolute;
	inset: 0;
	display: block;
	text-decoration: none;
}

.video-facade-poster {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: auto;
	max-width: 100%;
	aspect-ratio: 9 / 16;
	background-size: cover;
	background-position: center;
}

.video-frame--horizontal .video-facade-poster {
	top: 0;
	left: 0;
	transform: none;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

.video-facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(56px, 8vw, 82px);
	height: clamp(56px, 8vw, 82px);
	border-radius: 50%;
	background: rgba(13, 10, 8, 0.32);
	backdrop-filter: blur(12px) saturate(1.15);
	-webkit-backdrop-filter: blur(12px) saturate(1.15);
	border: 1px solid rgba(245, 240, 232, 0.42);
	color: #ffffff;
	box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5);
	transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.video-facade-play svg {
	margin-left: 3px;
}

.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(13, 10, 8, 0.45);
	border-color: rgba(224, 140, 32, 0.8);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.6), var(--ntj-btn-shadow);
}

/* No mobile, a moldura vira o formato vertical: o vídeo preenche a largura
   (como Reels), sem o fundo ambiente */
@media (max-width: 640px) {
	.video-frame:not(.video-frame--horizontal) {
		aspect-ratio: 9 / 16;
	}

	.video-frame:not(.video-frame--horizontal) iframe {
		top: 0;
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
		max-width: none;
		aspect-ratio: auto;
	}

	.video-frame:not(.video-frame--horizontal) .video-frame-bg {
		display: none;
	}
}

.video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px;
	text-align: center;
	color: var(--ntj-text-2);
	background: var(--ntj-bg-3);
}

/* 12. Números
   ========================================================================== */
.section-numeros {
	background: var(--ntj-bg-2);
	overflow: hidden;
}

.numeros-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 60% at 50% 0%, rgba(139, 26, 26, 0.28), transparent 70%),
		radial-gradient(40% 50% at 85% 100%, rgba(224, 140, 32, 0.12), transparent 70%);
}

/* Duas colunas: mosaico de fotos (esquerda) + contadores (direita) */
.numeros-layout {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	gap: clamp(30px, 4.5vw, 64px);
	align-items: center;
}

/* Mosaico com as 6 fotos do escritório/estrutura (proporção vertical,
   como na página Quem Somos, para dar mais presença às fotos) */
.numeros-mosaico {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: clamp(8px, 1vw, 14px);
	aspect-ratio: 4 / 5;
}

.numeros-foto {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--ntj-radius);
	border: 1px solid var(--ntj-border);
	background: linear-gradient(160deg, #2b2119, #17110c);
}

.numeros-foto img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.94) contrast(1.02);
}

/* Distribuição das fotos no mosaico (1 vertical, 2 horizontais e 3 quadradas) */
.numeros-foto-1 {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.numeros-foto-2 {
	grid-column: 2 / span 2;
	grid-row: 1;
}

.numeros-foto-3 {
	grid-column: 2;
	grid-row: 2;
}

.numeros-foto-4 {
	grid-column: 3;
	grid-row: 2;
}

.numeros-foto-5 {
	grid-column: 1 / span 2;
	grid-row: 3;
}

.numeros-foto-6 {
	grid-column: 3;
	grid-row: 3;
}

/* Contadores em lista (coluna direita) */
.numeros-grid {
	position: relative;
	display: grid;
	gap: clamp(14px, 2vw, 22px);
}

.numero-card {
	padding-bottom: clamp(14px, 1.8vw, 20px);
	border-bottom: 1px solid var(--ntj-border);
}

.numero-card:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.numero-valor {
	font-family: var(--ntj-font-title);
	font-size: clamp(2.5rem, 4.4vw, 3.9rem);
	font-weight: 600;
	line-height: 1;
	color: var(--ntj-amber);
	margin-bottom: 10px;
}

.numero-label {
	color: var(--ntj-text-2);
	font-size: 0.98rem;
	max-width: 360px;
	margin: 0;
}

/* 13. Como funciona — trilho de etapas
   ========================================================================== */
.section-passos {
	background: var(--ntj-bg);

	/* Cores das etapas (verde > vinho > âmbar > verde, como no material original) */
	--passo-verde: #8fc487;
	--passo-vinho: #d46861;
	--passo-ambar: var(--ntj-amber);
	--passo-verde-tint: rgba(143, 196, 135, 0.13);
	--passo-vinho-tint: rgba(212, 104, 97, 0.14);
	--passo-verde-ring: rgba(143, 196, 135, 0.42);
	--passo-vinho-ring: rgba(212, 104, 97, 0.45);
	--passo-ambar-ring: rgba(224, 140, 32, 0.45);
}

.passos-track {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(18px, 3vw, 34px);
	list-style: none;
}

/* Trilho que conecta as etapas (na altura do centro dos nós) */
.passos-track::before {
	content: "";
	position: absolute;
	top: 37px;
	left: 12.5%;
	right: 12.5%;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--passo-verde) 0%,
		var(--passo-vinho) 33%,
		var(--passo-ambar) 66%,
		var(--passo-verde) 100%
	);
	opacity: 0.4;
}

.passo {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.passo--green {
	--passo-color: var(--passo-verde);
	--passo-tint: var(--passo-verde-tint);
	--passo-ring: var(--passo-verde-ring);
}

.passo--wine {
	--passo-color: var(--passo-vinho);
	--passo-tint: var(--passo-vinho-tint);
	--passo-ring: var(--passo-vinho-ring);
}

.passo--amber {
	--passo-color: var(--passo-ambar);
	--passo-tint: var(--ntj-amber-soft);
	--passo-ring: var(--passo-ambar-ring);
}

.passo-node {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	margin-bottom: 18px;
	border-radius: 50%;
	border: 2px solid var(--passo-ring);
	background-color: var(--ntj-bg);
	background-image: linear-gradient(var(--passo-tint), var(--passo-tint));
	color: var(--passo-color);
	box-shadow: var(--ntj-shadow);
}

.passo-numero {
	font-family: var(--ntj-font-ui);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.2em;
	color: var(--passo-color);
}

.passo-titulo {
	font-family: var(--ntj-font-ui);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 8px 0 0;
}

/* 14. Depoimentos (Bento Puzzle Grid — Encaixe perfeito estilo quebra-cabeça sem espaços vazios)
   ========================================================================== */
.section-depoimentos {
	background: linear-gradient(180deg, var(--ntj-bg-2) 0%, var(--ntj-bg) 100%);
}

.depoimentos-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
	margin-top: 36px;
	align-items: stretch;
}

.depoimento-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg, 18px);
	padding: clamp(24px, 2.8vw, 34px);
	box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.35);
	transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1),
	            box-shadow 0.28s cubic-bezier(0.25, 1, 0.5, 1),
	            border-color 0.28s ease;
	position: relative;
	box-sizing: border-box;
}

.depoimento-card:hover {
	transform: translateY(-4px);
	border-color: rgba(224, 140, 32, 0.45);
	box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.5);
}

/* Encaixe tipo quebra-cabeça dos 5 depoimentos (Linha 1: 7 + 5 cols = 12 | Linha 2: 5 + 3 + 4 cols = 12) */
.depoimentos-bento .depoimento-card:nth-child(1) {
	grid-column: span 7;
	order: 1;
}

.depoimentos-bento .depoimento-card:nth-child(3) {
	grid-column: span 5;
	order: 2;
}

.depoimentos-bento .depoimento-card:nth-child(2) {
	grid-column: span 5;
	order: 3;
}

.depoimentos-bento .depoimento-card:nth-child(4) {
	grid-column: span 3;
	order: 4;
}

.depoimentos-bento .depoimento-card:nth-child(5) {
	grid-column: span 4;
	order: 5;
}

/* Fallback para cards além dos 5 */
.depoimentos-bento .depoimento-card:nth-child(n+6) {
	grid-column: span 4;
	order: 6;
}

/* Destaque sutil no card compacto central */
.depoimento-card--highlight {
	background: linear-gradient(145deg, rgba(224, 140, 32, 0.08) 0%, var(--ntj-card) 100%);
	border-color: rgba(224, 140, 32, 0.28);
}

.depoimento-card--highlight .depoimento-texto {
	font-size: clamp(1.1rem, 1.4vw, 1.25rem);
	font-weight: 500;
	color: var(--ntj-text);
}

.depoimento-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.depoimento-stars {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	color: var(--ntj-amber);
}

.depoimento-stars svg {
	color: var(--ntj-amber);
	fill: currentColor;
}

.depoimento-quote {
	color: var(--ntj-amber);
	opacity: 0.35;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.depoimento-card:hover .depoimento-quote {
	opacity: 0.75;
	transform: scale(1.1);
}

.depoimento-texto {
	flex-grow: 1;
	font-family: var(--ntj-font-serif);
	font-size: clamp(1.02rem, 1.22vw, 1.15rem);
	line-height: 1.62;
	color: var(--ntj-text);
	font-style: italic;
	font-weight: 400;
	margin: 0 0 16px;
}

.depoimento-texto p {
	margin: 0 0 0.8em;
}

.depoimento-texto p:last-child {
	margin-bottom: 0;
}

.depoimento-autor {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--ntj-border);
}

.depoimento-foto {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 1.5px solid rgba(224, 140, 32, 0.4);
}

.depoimento-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.depoimento-nome {
	font-family: var(--ntj-font-ui);
	font-weight: 700;
	font-size: 0.94rem;
	color: var(--ntj-text);
	letter-spacing: -0.01em;
}

.depoimento-empresa {
	font-weight: 500;
	font-size: 0.8rem;
	color: var(--ntj-text-2);
}

/* Responsividade do Bento Puzzle */
@media (max-width: 992px) {
	.depoimentos-bento {
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
	}

	.depoimentos-bento .depoimento-card:nth-child(1) {
		grid-column: span 2;
		order: 1;
	}

	.depoimentos-bento .depoimento-card:nth-child(2) {
		grid-column: span 1;
		order: 2;
	}

	.depoimentos-bento .depoimento-card:nth-child(3) {
		grid-column: span 1;
		order: 3;
	}

	.depoimentos-bento .depoimento-card:nth-child(4) {
		grid-column: span 1;
		order: 4;
	}

	.depoimentos-bento .depoimento-card:nth-child(5) {
		grid-column: span 1;
		order: 5;
	}

	.depoimentos-bento .depoimento-card:nth-child(n+6) {
		grid-column: span 1;
	}
}

@media (max-width: 640px) {
	.depoimentos-bento {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.depoimentos-bento .depoimento-card,
	.depoimentos-bento .depoimento-card:nth-child(n) {
		grid-column: span 1;
		order: initial;
		padding: 22px 18px;
	}
}

/* 15. Parceiros
   ========================================================================== */
.section-parceiros {
	background: var(--ntj-bg);
}

/* Flex (em vez de grid) para centralizar automaticamente a última linha
   quando ela não fecha com 3 cards */
.parceiros-grid-modern {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 24px;
	margin-top: 36px;
}

.parceiros-grid-modern .card-conexao {
	width: calc((100% - 48px) / 3);
}

.card-conexao {
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg, 18px);
	padding: 30px 22px 28px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	color: var(--ntj-text);
	box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.08);
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	position: relative;
	cursor: pointer;
}

.card-conexao:hover {
	transform: none;
	background: var(--ntj-card);
	box-shadow: 0 4px 18px -4px rgba(0, 0, 0, 0.08);
	border-color: rgba(224, 140, 32, 0.45);
}

.icon-badge-circle {
	width: 58px;
	height: 58px;
	min-width: 58px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fbf5ec;
	border: 1px solid rgba(224, 140, 32, 0.12);
	margin-bottom: 22px;
	transition: transform 0.28s ease, background 0.28s ease;
}

/* Imagem destacada do parceiro (ícone neon): estilo "app icon" —
   sem borda/anel próprio; o recorte arredondado acompanha a moldura da arte */
.parceiro-media {
	display: block;
	width: clamp(136px, 60%, 176px);
	aspect-ratio: 1 / 1;
	border-radius: 12%;
	overflow: hidden;
}

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

.card-conexao .parceiro-media {
	margin-bottom: 22px;
}

/* "Chamada no card" (meta do parceiro): exibida no card da home e na página */
.parceiro-chamada {
	font-weight: 600;
	color: var(--ntj-amber);
	line-height: 1.45;
}

.card-conexao .parceiro-chamada {
	font-size: 0.85rem;
	margin: 10px 0 0;
}

.card-parceiro-full .parceiro-chamada,
.card-beneficio-full .parceiro-chamada {
	font-size: 1.05rem;
	margin: 6px 0 14px;
}

.icon-badge-circle.cor-wine {
	color: #8b1a1a;
}

.icon-badge-circle.cor-amber {
	color: #c46d18;
}

.icon-badge-circle.cor-green {
	color: #2e632b;
}

.card-conexao-title {
	font-family: var(--ntj-font-ui);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--ntj-text);
	margin: 0;
	line-height: 1.35;
	letter-spacing: -0.01em;
}

.section-foot-cta {
	margin-top: 48px;
	display: flex;
	justify-content: center;
	text-align: center;
}

.section-foot-cta .btn {
	border-radius: var(--ntj-radius-btn);
	padding: 14px 34px;
	font-size: 1.02rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	transition: all 0.25s ease;
}

@media (max-width: 900px) {
	.parceiros-grid-modern {
		gap: 18px;
	}

	.parceiros-grid-modern .card-conexao {
		width: calc((100% - 18px) / 2);
	}
}

@media (max-width: 580px) {
	.parceiros-grid-modern {
		gap: 14px;
	}

	.parceiros-grid-modern .card-conexao {
		width: 100%;
	}

	.card-conexao {
		padding: 26px 18px 24px;
	}

	.section-foot-cta {
		margin-top: 36px;
	}

	.section-foot-cta .btn {
		width: 100%;
		justify-content: center;
		padding: 13px 20px;
		font-size: 0.95rem;
	}
}

/* Legado/compatibilidade com lista de parceiros */
.parceiros-grid .card {
	text-align: center;
	align-items: center;
	display: flex;
	flex-direction: column;
	padding: 32px 22px 26px;
}

.parceiros-grid .card-title {
	margin-top: 16px;
	min-height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.12rem;
}

.parceiros-grid .card .card-sub {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--ntj-text-2);
	margin: 8px 0 20px;
	flex-grow: 1;
}

.parceiros-grid .card .link-arrow {
	margin-top: auto;
}

/* 16. Benefícios
   ========================================================================== */
.section-beneficios {
	background: var(--ntj-bg-2);
}

.card-beneficio {
	display: flex;
	flex-direction: column;
}

section.section-cta {
	background: var(--ntj-bg);
	padding: clamp(48px, 6vw, 76px) 0;
	margin: 0;
}

.cta-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg);
	padding: clamp(26px, 3.8vw, 42px) clamp(24px, 4.5vw, 50px);
}

.cta-content {
	max-width: 660px;
}

.cta-content .section-eyebrow {
	margin-bottom: 10px;
}

.cta-title {
	font-size: clamp(1.35rem, 2.3vw, 1.85rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0 0 0.4em;
	color: var(--ntj-text);
}

.cta-frase {
	font-family: inherit;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--ntj-text-2);
	margin: 0;
	max-width: 640px;
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	flex-shrink: 0;
}

/* 18. Instagram
   ========================================================================== */
.section-instagram {
	background: var(--ntj-bg);
}

.instagram-handle {
	display: inline-block;
	font-family: var(--ntj-font-ui);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--ntj-amber);
	text-decoration: none;
	margin-top: 6px;
}

.instagram-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(8px, 1.4vw, 16px);
}

.instagram-tile {
	position: relative;
	display: block;
	border-radius: var(--ntj-radius);
	overflow: hidden;
	border: 1px solid var(--ntj-border);
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.instagram-tile img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform 0.5s ease, filter 0.4s ease;
}

.instagram-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(200deg, transparent 40%, rgba(139, 26, 26, 0.55));
	opacity: 0;
	transition: opacity 0.35s ease;
}

.instagram-tile:hover {
	transform: translateY(-4px);
	border-color: rgba(224, 140, 32, 0.4);
}

.instagram-tile:hover img {
	transform: scale(1.05);
}

.instagram-tile:hover::after {
	opacity: 1;
}

.instagram-note {
	margin: 22px auto 0;
	text-align: center;
	font-size: 0.8rem;
	color: var(--ntj-text-3);
	max-width: 640px;
}

.instagram-embed {
	display: flex;
	justify-content: center;
	width: 100%;
}

.instagram-embed .jf-website-widget,
.jf-website-widget {
	width: 100%;
	display: flex;
	justify-content: center;
}

/* 19. Contato / formulário
   ========================================================================== */
.section-contato {
	background: linear-gradient(180deg, var(--ntj-bg-2) 0%, var(--ntj-bg) 100%);
}

.contato-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(36px, 5vw, 64px);
	align-items: start;
}

.ntj-form {
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg);
	padding: clamp(24px, 4vw, 40px);
	box-shadow: var(--ntj-shadow);
}

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

.form-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.form-field-full {
	grid-column: 1 / -1;
}

.form-field label {
	font-family: var(--ntj-font-ui);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ntj-text-2);
}

.form-field .req {
	color: var(--ntj-amber);
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
	width: 100%;
	background: rgba(13, 10, 8, 0.6);
	border: 1px solid var(--ntj-border-strong);
	border-radius: var(--ntj-radius-sm);
	color: var(--ntj-text);
	padding: 14px 16px;
	font-family: var(--ntj-font-body);
	font-size: 0.95rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
	resize: vertical;
	min-height: 130px;
}

.form-field input:focus,
.form-field textarea:focus {
	outline: none;
	border-color: var(--ntj-amber);
	box-shadow: 0 0 0 3px rgba(224, 140, 32, 0.18);
}

.form-field.is-invalid input,
.form-field.is-invalid textarea {
	border-color: #d9534f;
}

.field-error {
	font-size: 0.78rem;
	color: #e88;
	min-height: 0;
}

.form-lgpd {
	margin: 20px 0 0;
}

.checkbox {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-family: var(--ntj-font-body);
	font-size: 0.86rem;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	color: var(--ntj-text-2);
	cursor: pointer;
}

.checkbox input {
	margin-top: 4px;
	width: 18px;
	height: 18px;
	accent-color: var(--ntj-amber);
	flex-shrink: 0;
}

.form-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 26px 0 0;
	flex-wrap: wrap;
}

.form-note {
	font-size: 0.8rem;
	color: var(--ntj-text-3);
}

.form-feedback {
	margin: 18px 0 0;
	font-size: 0.9rem;
	display: none;
}

.form-feedback.is-success,
.form-feedback.is-error {
	display: block;
	border-radius: var(--ntj-radius-sm);
	padding: 14px 18px;
}

.form-feedback.is-success {
	background: rgba(59, 107, 53, 0.18);
	border: 1px solid rgba(59, 107, 53, 0.55);
	color: #b9d8b3;
}

.form-feedback.is-error {
	background: rgba(139, 26, 26, 0.18);
	border: 1px solid rgba(139, 26, 26, 0.6);
	color: #f0b9b9;
}

.form-honeypot {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	height: 0;
	overflow: hidden;
}

.contato-info {
	background: var(--ntj-grad-soft);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg);
	padding: clamp(26px, 4vw, 40px);
}

.contato-info-title {
	font-size: 1.6rem;
	margin-bottom: 24px;
}

.contato-lista {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-bottom: 26px;
}

.contato-lista li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.contato-lista .icon-badge {
	width: 46px;
	height: 46px;
}

.contato-lista strong {
	display: block;
	font-family: var(--ntj-font-ui);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ntj-text-2);
	margin-bottom: 2px;
}

.contato-lista a,
.contato-lista span {
	color: var(--ntj-text);
	font-size: 0.95rem;
	text-decoration: none;
}

.contato-lista a:hover {
	color: var(--ntj-amber);
}

.btn-whats {
	margin-top: 6px;
}

.contato-info .social-list {
	margin-top: 24px;
}

/* 20. Footer
   ========================================================================== */
.site-footer,
.footer {
	background: #0a0a0a;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding: clamp(48px, 6vw, 6rem) 0 clamp(28px, 3.5vw, 3rem);
	position: relative;
	overflow: hidden;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
	position: relative;
	z-index: 2;
}

.footer-col-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.footer-logo {
	width: 170px;
	height: auto;
	margin-bottom: 1.5rem;
	display: block;
}

.footer-brand-text {
	font-size: 0.88rem;
	color: #FFFFFF;
	line-height: 1.7;
	margin-bottom: 1.5rem;
	max-width: 280px;
}

.footer-social {
	display: flex;
	gap: 1rem;
}

.footer-social a {
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	transition: all 0.3s ease;
	text-decoration: none;
}

.footer-social a:hover {
	background: var(--ntj-primary);
	color: #FFFFFF;
	border-color: var(--ntj-primary);
	transform: translateY(-2px);
}

.footer-col-title {
	font-family: var(--ntj-font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #FFFFFF;
	margin-bottom: 1.5rem;
}

.footer-link,
.footer-menu-nav a {
	display: block;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-size: 0.88rem;
	text-decoration: none;
}

.footer-menu-nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-menu-nav li {
	margin: 0;
	padding: 0;
}

.footer-link:hover,
.footer-menu-nav a:hover {
	color: var(--ntj-amber);
	transform: translateX(4px);
}

.footer-info-text {
	font-size: 0.88rem;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.7;
	margin-bottom: 0.5rem;
}

.footer-info-text a {
	transition: all 0.3s ease;
	text-decoration: none;
	color: inherit;
}

.footer-info-text a:hover {
	color: var(--ntj-amber);
}

.footer-divider {
	width: 100%;
	height: 1px;
	background: rgba(255, 255, 255, 0.08);
	margin: 3.5rem 0 2rem;
}

.footer-disclaimer {
	margin: 0 0 1.5rem;
	font-size: 0.78rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.5);
	max-width: 860px;
}

.footer-disclaimer strong,
.footer-disclaimer b {
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
}

.footer-disclaimer em,
.footer-disclaimer i {
	font-style: italic;
}

.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
	position: relative;
	z-index: 2;
}

.footer-bottom p {
	margin: 0;
}

.footer-bottom-links {
	display: flex;
	gap: 1.5rem;
}

.footer-bottom-links a {
	color: rgba(255, 255, 255, 0.5);
	transition: all 0.3s ease;
	text-decoration: none;
}

.footer-bottom-links a:hover {
	color: #FFFFFF;
}

.footer-bottom-right {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}

.footer-credits {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.5);
}

.footer-credits a {
	transition: all 0.3s ease;
	color: inherit;
	text-decoration: none;
}

.footer-credits a:hover {
	color: #FFFFFF;
}

.credits-logo {
	height: 24px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

@media (min-width: 992px) {
	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
		gap: 2rem;
	}

	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
	}

	.footer-bottom-right {
		flex-direction: row;
		gap: 2rem;
		align-items: center;
	}
}

/* 21. Botões flutuantes
   ========================================================================== */
.float-btn {
	position: fixed;
	right: 22px;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.85);
	transition: transform 0.25s ease, opacity 0.3s ease;
}

.float-btn:hover {
	transform: translateY(-3px);
}

.float-whatsapp {
	bottom: 22px;
	width: auto;
	min-width: 54px;
	height: 54px;
	padding: 0 22px;
	gap: 10px;
	border-radius: 999px;
	background: linear-gradient(145deg, #3ddc74 0%, #25d366 52%, #1da851 100%);
	color: #ffffff;
	border: 0;
	text-decoration: none;
	box-shadow: 0 14px 30px -10px rgba(37, 211, 102, 0.55), 0 12px 26px -14px rgba(0, 0, 0, 0.7);
	transition: transform 0.25s ease, opacity 0.3s ease, visibility 0.3s ease, padding 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), gap 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.float-whatsapp:hover {
	color: #ffffff;
	transform: translateY(-3px) scale(1.03);
	filter: brightness(1.06);
	box-shadow: 0 18px 38px -10px rgba(37, 211, 102, 0.7), 0 12px 26px -14px rgba(0, 0, 0, 0.7);
}

.float-whatsapp-label {
	font-family: var(--ntj-font-ui);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	max-width: 260px;
	overflow: hidden;
	transition: max-width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

/* Durante o scroll: recolhe para só o ícone (o JS aplica/remove a classe) */
.float-whatsapp.is-collapsed {
	padding: 0;
	gap: 0;
}

.float-whatsapp.is-collapsed .float-whatsapp-label {
	max-width: 0;
	opacity: 0;
}

/* No footer: some para não sobrepor os créditos */
.float-whatsapp-wrap.is-hidden .float-whatsapp,
.float-whatsapp-wrap.is-hidden .whats-popup {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(10px);
}

.float-whatsapp:focus-visible {
	border-radius: 999px;
}

/* Popup de mensagem rápida do WhatsApp */
.whats-popup {
	position: fixed;
	right: 22px;
	bottom: 88px;
	z-index: 91;
	width: min(330px, calc(100vw - 32px));
	background: rgba(13, 10, 8, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid var(--ntj-border-strong);
	border-radius: var(--ntj-radius-lg);
	box-shadow: var(--ntj-shadow-hover);
	padding: 18px;
	color: #f5f0e8;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.98);
	transform-origin: bottom right;
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.28s ease;
}

.whats-popup.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.whats-popup-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	color: rgba(245, 240, 232, 0.6);
	transition: color 0.2s ease, background 0.2s ease;
}

.whats-popup-close:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}

.whats-popup-body {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin-bottom: 16px;
	padding-right: 26px;
}

.whats-popup-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	min-width: 38px;
	border-radius: 50%;
	background: linear-gradient(145deg, #3ddc74 0%, #25d366 52%, #1da851 100%);
	color: #ffffff;
}

.whats-popup-msg {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.5;
	color: #f5f0e8;
}

.whats-popup-form {
	display: flex;
	gap: 8px;
	align-items: center;
}

.whats-popup-input {
	flex: 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--ntj-border);
	border-radius: 999px;
	padding: 11px 16px;
	color: #ffffff;
	font-family: var(--ntj-font-body);
	font-size: 0.9rem;
}

.whats-popup-input::placeholder {
	color: rgba(245, 240, 232, 0.5);
}

.whats-popup-input:focus {
	outline: none;
	border-color: rgba(224, 140, 32, 0.6);
}

.whats-popup-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	border: 0;
	background: var(--ntj-grad);
	color: #ffffff;
	box-shadow: var(--ntj-btn-shadow);
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.whats-popup-send:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: var(--ntj-btn-shadow-hover);
}

/* Mantém o formato circular no foco por teclado */
.float-btn:focus-visible {
	border-radius: 50%;
}

.float-top {
	bottom: 88px;
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border-strong);
	color: var(--ntj-text);
}

.float-top:hover {
	color: var(--ntj-amber);
}

.float-whatsapp + .float-top {
	bottom: 88px;
}

/* 22. Páginas internas
   ========================================================================== */
.page-interna {
	padding-top: calc(var(--ntj-header-h) + clamp(44px, 6vw, 76px));
	padding-bottom: clamp(52px, 6.5vw, 88px);
}

.page-hero {
	text-align: center;
	max-width: 820px;
	margin: 0 auto clamp(28px, 4vw, 44px);
}

.page-hero-title {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-bottom: 0.3em;
}

.page-hero-sub {
	color: var(--ntj-text-2);
	font-size: 1.05rem;
}

.entry-content {
	color: var(--ntj-text-2);
	max-width: 780px;
}

.entry-content h2,
.entry-content h3 {
	color: var(--ntj-text);
	margin-top: 1.4em;
}

.entry-content p {
	margin-bottom: 1.1em;
}

.entry-content strong {
	color: var(--ntj-text);
}

.entry-content-intro {
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}

.breadcrumb {
	font-family: var(--ntj-font-ui);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ntj-text-3);
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0 0 30px;
	flex-wrap: wrap;
}

.breadcrumb a {
	color: var(--ntj-text-2);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--ntj-amber);
}

/* Produtos (listagem) */
.produtos-lista {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 30px);
}

.card-produto-full {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(20px, 4vw, 48px);
	padding: clamp(26px, 4vw, 42px);
	scroll-margin-top: calc(var(--ntj-header-h) + 24px);
}

.produto-full-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.produto-full-head .card-title {
	font-family: var(--ntj-font-title);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	margin: 0 0 6px;
}

.produto-full-head .card-sub {
	font-family: var(--ntj-font-ui);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	margin: 0;
}

.produto-full-body {
	color: var(--ntj-text-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
}

.produto-full-body p:last-of-type {
	margin-bottom: 0;
}

/* Single produto */
.single-produto .produto-hero {
	text-align: center;
	max-width: 760px;
	margin: 0 auto clamp(40px, 6vw, 60px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.single-produto .produto-hero .section-eyebrow,
.single-produto .produto-hero .page-hero-title {
	margin: 0;
}

.produto-sub {
	font-family: var(--ntj-font-ui);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	margin: 0;
}

.produto-layout {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: clamp(30px, 5vw, 60px);
	align-items: start;
	margin-bottom: clamp(40px, 6vw, 64px);
}

.produto-checklist {
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius);
	padding: clamp(24px, 3.4vw, 34px);
	position: sticky;
	top: calc(var(--ntj-header-h) + 24px);
}

.produto-checklist-title {
	font-family: var(--ntj-font-ui);
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	margin-bottom: 20px;
}

.produto-checklist ul {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.produto-checklist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--ntj-text-2);
	font-size: 0.94rem;
	line-height: 1.5;
}

.check-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(59, 107, 53, 0.22);
	border: 1px solid rgba(59, 107, 53, 0.6);
	color: #8fc487;
	flex-shrink: 0;
	margin-top: 1px;
}

.produto-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	border-radius: var(--ntj-radius-lg);
	padding: clamp(24px, 4vw, 38px) clamp(24px, 4vw, 46px);
	margin-bottom: clamp(48px, 7vw, 80px);
	flex-wrap: wrap;
}

.produto-cta-frase {
	font-family: var(--ntj-font-title);
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	margin: 0;
}

.produto-relacionados {
	padding-bottom: clamp(30px, 5vw, 50px);
}

/* Parceiros (página) */
.parceiros-page {
	margin-bottom: clamp(52px, 8vw, 90px);
}

.parceiros-page .section-title,
.beneficios-page .section-title {
	text-align: center;
	margin-bottom: clamp(30px, 4vw, 48px);
}

.parceiros-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.6vw, 28px);
}

.card-parceiro-full {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	scroll-margin-top: calc(var(--ntj-header-h) + 24px);
}

.card-parceiro-full .card-title {
	font-family: var(--ntj-font-ui);
	font-size: 1.05rem;
	margin: 14px 0 6px;
}

.parceiro-desc,
.beneficio-desc {
	color: var(--ntj-text-2);
	font-size: 0.94rem;
}

.parceiro-desc p:last-child,
.beneficio-desc p:last-child {
	margin-bottom: 0;
}

.beneficios-lista {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(18px, 2.6vw, 28px);
}

.card-beneficio-full {
	scroll-margin-top: calc(var(--ntj-header-h) + 24px);
}

.card-beneficio-full .card-title {
	font-family: var(--ntj-font-ui);
	font-size: 1.02rem;
	margin: 14px 0 8px;
}

/* Quem somos (página) */
.page-quem-somos {
	padding-bottom: 0;
}

.quem-page-grid {
	max-width: 820px;
	margin: 0 auto clamp(48px, 7vw, 72px);
}

.quem-page-content .entry-content {
	max-width: none;
	font-size: 1.06rem;
	margin-bottom: 24px;
}

/* História em 2 Atos (2012 -> 2025) */
.quem-historia-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 34px);
	align-items: stretch;
	margin-bottom: clamp(44px, 6vw, 68px);
}

.quem-ato-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(26px, 3.6vw, 42px);
	border-radius: var(--ntj-radius-lg);
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	overflow: hidden;
}

.quem-ato-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ntj-wine), var(--ntj-amber));
	opacity: 0.9;
}

.quem-ato-card--evolution::before {
	background: linear-gradient(90deg, var(--ntj-amber), #3b6b35);
}

.quem-ato-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.quem-ato-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 5px 14px;
	border-radius: 999px;
	background: rgba(139, 26, 26, 0.24);
	border: 1px solid rgba(212, 104, 97, 0.42);
	color: #f2a39d;
	font-family: var(--ntj-font-ui);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.quem-ato-badge--amber {
	background: var(--ntj-amber-soft);
	border-color: rgba(224, 140, 32, 0.45);
	color: var(--ntj-amber);
}

.quem-ato-eyebrow {
	font-family: var(--ntj-font-ui);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ntj-text-3);
}

.quem-ato-title {
	font-family: var(--ntj-font-title);
	font-size: clamp(1.38rem, 2.2vw, 1.82rem);
	line-height: 1.24;
	color: var(--ntj-text);
	margin: 0 0 18px;
}

.quem-ato-body {
	color: var(--ntj-text-2);
	font-size: 1rem;
	line-height: 1.68;
}

.quem-ato-body p {
	margin: 0 0 1.05em;
}

.quem-ato-body p:last-child {
	margin-bottom: 0;
}

.quem-ato-body strong {
	color: var(--ntj-amber);
	font-weight: 600;
}

.quem-ato-footer {
	margin-top: auto;
	padding-top: 26px;
}

/* Mosaico de fotos (esquerda) + Missão/Visão (direita) em duas colunas */
.quem-mosaico-mvv {
	margin-bottom: clamp(56px, 8vw, 92px);
}

.quem-mosaico-mvv--split {
	display: grid;
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	gap: clamp(24px, 3.5vw, 44px);
	align-items: stretch;
}

.quem-page-mosaico {
	aspect-ratio: 16 / 9;
	margin-bottom: 0;
}

.quem-mosaico-mvv--split .quem-page-mosaico {
	aspect-ratio: auto;
	height: 100%;
}

/* Na coluna direita os cards de Missão e Visão ficam empilhados */
.quem-mosaico-mvv--split .quem-mv-grid {
	grid-template-columns: 1fr;
	margin-bottom: 0;
}

/* Seção Missão, Visão e Valores */
.section-quem-mvv {
	position: relative;
	background: var(--ntj-bg-2);
	--valor-verde: #8fc487;
	--valor-vinho: #d46861;
	--valor-ambar: var(--ntj-amber);
	--valor-verde-tint: rgba(143, 196, 135, 0.13);
	--valor-vinho-tint: rgba(212, 104, 97, 0.14);
	--valor-ambar-tint: var(--ntj-amber-soft);
	--valor-verde-ring: rgba(143, 196, 135, 0.38);
	--valor-vinho-ring: rgba(212, 104, 97, 0.4);
	--valor-ambar-ring: rgba(224, 140, 32, 0.4);
}

.quem-mv-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(22px, 3vw, 34px);
	margin-bottom: clamp(56px, 8vw, 92px);
}

.quem-mv-card {
	position: relative;
	padding: clamp(28px, 3.8vw, 44px);
	border-radius: var(--ntj-radius-lg);
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.quem-mv-card--missao {
	border-top: 3px solid var(--ntj-wine);
}

.quem-mv-card--visao {
	border-top: 3px solid var(--ntj-amber);
}

.quem-mv-head {
	display: flex;
	align-items: center;
	gap: 16px;
}

.quem-mv-eyebrow {
	display: block;
	font-family: var(--ntj-font-ui);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ntj-amber);
	margin-bottom: 4px;
}

.quem-mv-title {
	font-family: var(--ntj-font-title);
	font-size: clamp(1.55rem, 2.4vw, 2rem);
	color: var(--ntj-text);
	margin: 0;
}

.quem-mv-text {
	color: var(--ntj-text-2);
	font-size: 1.04rem;
	line-height: 1.68;
	margin: 0;
}

/* Grid de Valores (1 a 7) */
.quem-valores-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 26px);
}

.valor-card {
	position: relative;
	padding: clamp(24px, 3vw, 32px);
	border-radius: var(--ntj-radius);
	background: var(--ntj-card);
	border: 1px solid var(--ntj-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
	transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.valor-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ntj-shadow-hover);
}

/* O 7º valor fecha a grade centralizado no desktop */
.quem-valores-grid > .valor-card:nth-child(7):last-child {
	grid-column: 1 / -1;
	max-width: 520px;
	width: 100%;
	justify-self: center;
}

.valor-card-top {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
}

.valor-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--valor-ambar-tint);
	border: 1px solid var(--valor-ambar-ring);
	color: var(--valor-ambar);
}

.valor-card--green .valor-icone {
	background: var(--valor-verde-tint);
	border-color: var(--valor-verde-ring);
	color: var(--valor-verde);
}

.valor-card--green:hover {
	border-color: var(--valor-verde-ring);
}

.valor-card--wine .valor-icone {
	background: var(--valor-vinho-tint);
	border-color: var(--valor-vinho-ring);
	color: var(--valor-vinho);
}

.valor-card--wine:hover {
	border-color: var(--valor-vinho-ring);
}

.valor-card--amber:hover {
	border-color: var(--valor-ambar-ring);
}

.valor-titulo {
	font-family: var(--ntj-font-title);
	font-size: 1.32rem;
	line-height: 1.25;
	color: var(--ntj-text);
	margin: 0;
}

.valor-desc {
	color: var(--ntj-text-2);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}

.numeros-layout--sem-mosaico {
	grid-template-columns: 1fr;
}

.numeros-layout--sem-mosaico .numeros-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 36px);
}

.numeros-layout--sem-mosaico .numero-card {
	padding-bottom: 0;
	border-bottom: 0;
	padding-right: clamp(16px, 2vw, 24px);
	border-right: 1px solid var(--ntj-border);
}

.numeros-layout--sem-mosaico .numero-card:last-child {
	padding-right: 0;
	border-right: 0;
}

@media (max-width: 992px) {
	.quem-historia-grid,
	.quem-mv-grid {
		grid-template-columns: 1fr;
	}

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

	.quem-valores-grid > .valor-card:nth-child(7):last-child {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.quem-page-mosaico {
		aspect-ratio: 4 / 3;
	}

	.quem-mosaico-mvv--split {
		grid-template-columns: 1fr;
	}

	.quem-mosaico-mvv--split .quem-page-mosaico {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.numeros-layout--sem-mosaico .numeros-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.numeros-layout--sem-mosaico .numero-card:nth-child(2n) {
		padding-right: 0;
		border-right: 0;
	}
}

@media (max-width: 640px) {
	.quem-valores-grid {
		grid-template-columns: 1fr;
	}

	.quem-page-mosaico,
	.quem-mosaico-mvv--split .quem-page-mosaico {
		aspect-ratio: 1 / 1;
	}

	.numeros-layout--sem-mosaico .numeros-grid {
		grid-template-columns: 1fr;
	}

	.numeros-layout--sem-mosaico .numero-card {
		padding-right: 0;
		border-right: 0;
		padding-bottom: 16px;
		border-bottom: 1px solid var(--ntj-border);
	}

	.numeros-layout--sem-mosaico .numero-card:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

.error-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

/* 23. Blog / listagens
   ========================================================================== */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.6vw, 28px);
	margin-bottom: 40px;
}

.post-card-media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--ntj-radius-sm);
}

.post-card-title {
	font-family: var(--ntj-font-ui);
	font-size: 1.05rem;
	margin: 16px 0 8px;
}

.post-card-title a {
	color: var(--ntj-text);
	text-decoration: none;
}

.post-card-title a:hover {
	color: var(--ntj-amber);
}

.post-card-excerpt {
	color: var(--ntj-text-2);
	font-size: 0.92rem;
}

.pagination {
	margin: 30px 0;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 10px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border-radius: var(--ntj-radius-btn);
	border: 1px solid var(--ntj-border-strong);
	color: var(--ntj-text);
	text-decoration: none;
	font-family: var(--ntj-font-ui);
	font-size: 0.84rem;
	font-weight: 700;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--ntj-grad);
	border-color: transparent;
	color: #fff;
}

/* 24. Acessibilidade
   ========================================================================== */
:focus-visible {
	outline: 2px solid var(--ntj-amber);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	html.js .reveal {
		opacity: 1;
		transform: none;
	}

	.hero-slide {
		filter: none;
	}
}

/* 25. Responsivo
   ========================================================================== */
@media (max-width: 1200px) {
	.hero-slide.is-prev,
	.hero-mirror {
		transform: translateX(-76%) rotateY(-28deg);
	}

	.hero-slide.is-next {
		transform: translateX(76%) rotateY(28deg);
	}
}

@media (max-width: 992px) {
	:root {
		--ntj-header-h: 78px;
	}

	.site-header {
		padding: 14px 0;
	}

	.site-header.is-scrolled {
		padding: 8px 0;
	}

	.site-logo .logo-mark,
	.site-logo > img,
	.custom-logo-link > img {
		height: 46px;
	}

	.site-logo .logo-title {
		font-size: 1.4rem;
	}

	.site-logo .logo-subtitle {
		font-size: 0.58rem;
	}

	.is-scrolled .site-logo .logo-mark,
	.is-scrolled .site-logo > img,
	.is-scrolled .custom-logo-link > img {
		height: 38px;
	}

	.is-scrolled .site-logo .logo-title {
		font-size: 1.2rem;
	}

	.is-scrolled .site-logo .logo-subtitle {
		font-size: 0.52rem;
	}

	.main-nav,
	.header-cta {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.hero-stage {
		display: block;
		flex: none;
	}

	.hero-track {
		height: auto;
		min-height: 640px;
	}

	.hero-slide-inner {
		grid-template-columns: 1fr;
		height: auto;
		min-height: 0;
		gap: 30px;
	}

	.hero-media {
		height: auto;
	}

	.hero-media > img {
		height: auto;
		aspect-ratio: 16 / 11;
	}

	.hero-slide.is-prev,
	.hero-slide.is-next,
	.hero-mirror {
		opacity: 0;
		pointer-events: none;
		transform: translateX(0) translateZ(-500px) scale(0.9);
	}

	.hero-slide.is-next::after {
		display: none;
	}

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

	.passos-track {
		grid-template-columns: 1fr;
		gap: 0;
		max-width: 560px;
		margin: 0 auto;
	}

	.passos-track::before {
		top: 46px;
		left: 27px;
		right: auto;
		bottom: 46px;
		width: 2px;
		height: auto;
		background: linear-gradient(
			180deg,
			var(--passo-verde) 0%,
			var(--passo-vinho) 33%,
			var(--passo-ambar) 66%,
			var(--passo-verde) 100%
		);
	}

	.passo {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 20px;
		row-gap: 4px;
		align-items: center;
		text-align: left;
		padding: 18px 0;
	}

	.passo-node {
		grid-row: 1 / span 2;
		grid-column: 1;
		align-self: center;
		width: 56px;
		height: 56px;
		margin-bottom: 0;
	}

	.passo-numero {
		grid-row: 1;
		grid-column: 2;
		align-self: end;
	}

	.passo-titulo {
		grid-row: 2;
		grid-column: 2;
		align-self: start;
		margin: 0;
	}

	.contato-grid,
	.quem-grid,
	.quem-page-grid,
	.produto-layout,
	.numeros-layout {
		grid-template-columns: 1fr;
	}

	.numeros-mosaico {
		width: 100%;
		max-width: 620px;
		margin: 0 auto;
	}

	.produto-checklist {
		position: static;
	}

	.card-produto-full {
		grid-template-columns: 1fr;
	}

	.parceiros-lista,
	.beneficios-lista {
		grid-template-columns: 1fr;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.hero {
		min-height: auto;
		padding-top: calc(var(--ntj-header-h) + 16px);
		padding-bottom: 36px;
	}

	.hero-track {
		min-height: 600px;
	}

	.hero-slide {
		transition: opacity 0.5s ease, transform 0.5s ease;
		transform: none;
	}

	.hero-slide.is-active {
		transform: none;
	}

	.hero-media > img {
		aspect-ratio: 16 / 10;
	}

	.cta-box,
	.produto-cta {
		flex-direction: column;
		align-items: flex-start;
	}

	.cta-actions {
		width: 100%;
	}

	.cta-actions .btn,
	.produto-cta .btn {
		flex: 1 1 auto;
	}

	.numeros-layout {
		gap: 24px;
	}

	.numeros-grid {
		gap: 16px;
	}

	.depoimento-texto {
		max-height: none;
		overflow: visible;
	}

	.form-grid {
		grid-template-columns: 1fr;
	}

	.instagram-grid {
		grid-template-columns: repeat(6, minmax(130px, 1fr));
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 8px;
		scrollbar-width: none;
	}

	.instagram-grid::-webkit-scrollbar {
		display: none;
	}

	.instagram-tile {
		scroll-snap-align: start;
	}

	.quem-bubble {
		position: relative;
		right: auto;
		bottom: auto;
		max-width: 300px;
		margin: 14px 12px 0 auto;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.footer-bottom {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.posts-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 576px) {
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	.hero-track {
		min-height: 560px;
	}

	.hero-title {
		font-size: clamp(1.7rem, 7.4vw, 2.3rem);
	}

	.hero-controls {
		gap: 14px;
	}

	.hero-arrow {
		width: 42px;
		height: 42px;
	}

	.card {
		padding: 24px 20px;
	}

	.float-btn {
		right: 16px;
		width: 50px;
		height: 50px;
	}

	.float-whatsapp {
		bottom: 16px;
		width: auto;
		height: 50px;
		padding: 0 16px;
	}

	.float-whatsapp-label {
		font-size: 0.68rem;
	}

	.whats-popup {
		right: 16px;
		bottom: 78px;
	}

	.float-top {
		bottom: 78px;
	}
}

/* Impressão */
@media print {
	.site-header,
	.site-footer,
	.float-btn,
	.hero-controls {
		display: none !important;
	}

	body {
		background: #fff;
		color: #111;
	}
}

/* ==========================================================================
   26. NTJ — Seções claras alternadas (Customizer: ntj-secoes-claras)
   Ritmo: hero (escuro) > produtos (claro) > quem somos (escuro) > vídeo (claro)
          > números (escuro) > passos (claro) > depoimentos (claro)
          > parceiros (escuro) > instagram (claro) > CTA (claro)
          > contato (escuro) > footer (escuro)
   ========================================================================== */

/* 1. Tema claro: redefine os tokens só dentro destas seções
   ========================================================================== */
.ntj-secoes-claras .section-produtos,
.ntj-secoes-claras .section-video,
.ntj-secoes-claras .section-passos,
.ntj-secoes-claras .section-depoimentos,
.ntj-secoes-claras .section-instagram,
.ntj-secoes-claras .section-quem-mvv {
	--ntj-bg: #faf6f1;
	--ntj-bg-2: #f3ece2;
	--ntj-bg-3: #ebe2d4;
	--ntj-card: #ffffff;
	--ntj-card-hover: #ffffff;
	--ntj-border: rgba(43, 29, 20, 0.1);
	--ntj-border-strong: rgba(43, 29, 20, 0.22);

	--ntj-text: #2b1d14;
	--ntj-text-2: #5e5249;
	--ntj-text-3: #8a7e72;

	/* âmbar mais escuro para manter contraste de texto sobre fundo claro */
	--ntj-amber: #b45f06;
	--ntj-amber-soft: rgba(180, 95, 6, 0.1);
	--ntj-wine-hover: #8b1a1a;

	--ntj-shadow: 0 18px 40px -26px rgba(70, 40, 15, 0.35);
	--ntj-shadow-hover: 0 26px 50px -24px rgba(70, 40, 15, 0.45);

	color: var(--ntj-text);
}

/* Fundos (alternando creme e creme mais escuro) */
.ntj-secoes-claras .section-produtos {
	background: linear-gradient(180deg, #faf6f1 0%, #f3ece2 100%);
}

.ntj-secoes-claras .section-video {
	background: #f3ece2;
}

.ntj-secoes-claras .section-passos {
	background: #faf6f1;
}

.ntj-secoes-claras .section-depoimentos {
	background: linear-gradient(180deg, #faf6f1 0%, #f3ece2 100%);
}

.ntj-secoes-claras .section-quem-mvv {
	background: linear-gradient(180deg, #faf6f1 0%, #f3ece2 100%);
	--valor-verde: #2f5a2a;
	--valor-vinho: #8b1a1a;
	--valor-ambar: #b45f06;
	--valor-verde-tint: rgba(47, 90, 42, 0.1);
	--valor-vinho-tint: rgba(139, 26, 26, 0.08);
	--valor-ambar-tint: rgba(180, 95, 6, 0.1);
	--valor-verde-ring: rgba(47, 90, 42, 0.32);
	--valor-vinho-ring: rgba(139, 26, 26, 0.32);
	--valor-ambar-ring: rgba(180, 95, 6, 0.35);
}

.ntj-secoes-claras .section-depoimentos .depoimento-card {
	box-shadow: 0 4px 18px -4px rgba(70, 40, 15, 0.06);
}

.ntj-secoes-claras .section-depoimentos .depoimento-card:hover {
	border-color: rgba(180, 95, 6, 0.45);
	box-shadow: 0 16px 36px -10px rgba(70, 40, 15, 0.14);
}

.ntj-secoes-claras .section-produtos .btn-outline,
.ntj-secoes-claras .section-video .btn-outline,
.ntj-secoes-claras .section-passos .btn-outline,
.ntj-secoes-claras .section-depoimentos .btn-outline,
.ntj-secoes-claras .section-instagram .btn-outline {
	background: #ffffff;
	border-color: rgba(43, 29, 20, 0.18);
	color: var(--ntj-text);
	box-shadow: 0 2px 8px rgba(43, 29, 20, 0.04);
}

.ntj-secoes-claras .section-produtos .btn-outline:hover,
.ntj-secoes-claras .section-video .btn-outline:hover,
.ntj-secoes-claras .section-passos .btn-outline:hover,
.ntj-secoes-claras .section-depoimentos .btn-outline:hover,
.ntj-secoes-claras .section-instagram .btn-outline:hover {
	background: var(--ntj-grad);
	border-color: transparent;
	color: #ffffff;
	transform: translateY(-2px);
	box-shadow: var(--ntj-btn-shadow-hover);
}

/* CTA do card de produto: preenchido por padrão e suave no hover */
.ntj-secoes-claras .section-produtos .card-produto .card-btn,
.ntj-secoes-claras .section-produtos .card-produto .card-btn.btn-outline {
	background: var(--ntj-grad);
	border-color: transparent;
	color: #ffffff;
	box-shadow: var(--ntj-btn-shadow);
}

.ntj-secoes-claras .section-produtos .card-produto .card-btn:hover,
.ntj-secoes-claras .section-produtos .card-produto:hover .card-btn {
	background: var(--ntj-grad-soft);
	border-color: var(--ntj-amber);
	color: var(--ntj-text);
	box-shadow: var(--ntj-btn-shadow);
}

.ntj-secoes-claras .section-video .video-placeholder {
	background: var(--ntj-bg-3);
}

/* Etapas do "Como funciona": cores mais escuras para manter contraste no fundo claro */
.ntj-secoes-claras .section-passos {
	--passo-verde: #2f5a2a;
	--passo-vinho: #8b1a1a;
	--passo-verde-tint: rgba(47, 90, 42, 0.1);
	--passo-vinho-tint: rgba(139, 26, 26, 0.08);
	--passo-verde-ring: rgba(47, 90, 42, 0.35);
	--passo-vinho-ring: rgba(139, 26, 26, 0.35);
	--passo-ambar-ring: rgba(180, 95, 6, 0.4);
}

/* 3. Seções escuras: pequenas variações para criar ritmo
   ========================================================================== */
.ntj-secoes-claras .section-quem-somos {
	background: linear-gradient(180deg, #1a1614 0%, #14100d 100%);
}

/* Parceiros virou a seção escura do ritmo (fundo preto) */
.ntj-secoes-claras .section-parceiros {
	background: #000;
}

.ntj-secoes-claras .section-beneficios {
	background: linear-gradient(180deg, #1f1a17 0%, #181310 100%);
}

/* 4. Faixa CTA (fundo neutro/card claro com destaque em gradiente apenas no botão)
   ========================================================================== */
.ntj-secoes-claras .section-cta {
	background: #f3ece2;
}

.ntj-secoes-claras .section-cta .cta-box {
	background: #ffffff;
	border: 1px solid rgba(43, 29, 20, 0.1);
	box-shadow: 0 12px 34px -14px rgba(43, 29, 20, 0.08);
}

.ntj-secoes-claras .section-cta .cta-title {
	color: #14100d;
}

.ntj-secoes-claras .section-cta .cta-frase {
	color: #4a3f35;
}

.ntj-secoes-claras .btn-primary,
.ntj-secoes-claras .section-cta .btn-primary {
	background: var(--ntj-grad);
	color: #ffffff;
	border-color: transparent;
	box-shadow: var(--ntj-btn-shadow);
}

.ntj-secoes-claras .btn-primary:hover,
.ntj-secoes-claras .section-cta .btn-primary:hover {
	color: #ffffff;
	transform: translateY(-2px);
	filter: brightness(1.08);
	box-shadow: var(--ntj-btn-shadow-hover);
}

/* 5. Transição suave entre claro e escuro (opcional)
   Remove o corte reto: um degradê curto no topo das seções escuras que vêm após as claras.
   ========================================================================== */
.ntj-secoes-claras .section-quem-somos::before,
.ntj-secoes-claras .section-numeros::before,
.ntj-secoes-claras .section-beneficios::before,
.ntj-secoes-claras .section-contato::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 90px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent);
	pointer-events: none;
}