/* ==========================================================================
   KNUP DIGITAL — design tokens + base styles
   ========================================================================== */

/* --- Self-hosted General Sans (Fontshare) ------------------------------- */
@font-face {
	font-family: 'General Sans';
	src: url('../fonts/general-sans/GeneralSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'General Sans';
	src: url('../fonts/general-sans/GeneralSans-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'General Sans';
	src: url('../fonts/general-sans/GeneralSans-Semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'General Sans';
	src: url('../fonts/general-sans/GeneralSans-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- Design tokens -------------------------------------------------------
   Typography roles, colors, radii and glass tokens here are also the source
   of truth the future admin "Tipografia"/"Configurações Gerais" tabs will
   write to (as inline CSS custom-property overrides) — every component in
   this theme must consume these variables rather than hardcoding values, so
   the future admin overrides actually take effect everywhere.
   -------------------------------------------------------------------------- */
:root {
	/* Brand palette */
	--knup-color-purple-900: #16041B; /* quase-preto/roxo escuro */
	--knup-color-purple-800: #520669;
	--knup-color-magenta-500: #A208CD;
	--knup-color-blue-600: #4422E7;
	--knup-color-blue-600-alt: #4720E6;
	--knup-color-gray-900: #333333;
	--knup-color-black: #000000;
	--knup-color-white: #FFFFFF;
	--knup-color-off-white: #F4F4F4; /* = old site's --e-global-color-secondary */

	/* Pastel/light tints derived from the palette, for backgrounds & smooth
	   section-to-section gradient transitions */
	--knup-color-purple-100: #F3E9F7;
	--knup-color-purple-50: #FBF6FC;
	--knup-color-magenta-100: #F6E3FB;
	--knup-color-blue-100: #ECE9FD;
	--knup-color-gray-100: #F5F5F6;
	--knup-color-gray-200: #E8E8EA;
	--knup-color-gray-300: #D4D4D8;
	--knup-color-gray-400: #A1A1AA;
	--knup-color-gray-500: #71717A;
	--knup-color-gray-600: #52525B;
	--knup-color-gray-700: #3F3F46;
	--knup-color-gray-800: #27272A;
	--knup-color-purple-700: #7C3AED;
	--knup-color-arc:     #9608BE; /* cor sólida do "ARC" no wordmark Score ARC */
	--knup-color-surface: #F6F7F9; /* fundo neutro de cards, páginas e seções */
	--knup-color-gray-50: #EDEDED; /* palavras em movimento no brand-strip */
	--knup-color-cookie-accent: #c660f0; /* violeta do banner de cookie LGPD */

	/* Gradients */
	--knup-gradient-brand: linear-gradient(135deg, var(--knup-color-purple-800) 0%, #760196 50%, #403399 100%);
	--knup-gradient-dark: linear-gradient(160deg, var(--knup-color-purple-900) 0%, var(--knup-color-purple-800) 100%);
	--knup-gradient-page-light: linear-gradient(180deg, var(--knup-color-purple-50) 0%, var(--knup-color-white) 100%);
	--knup-gradient-text: linear-gradient(90deg, var(--knup-color-purple-800) 0%, var(--knup-color-magenta-500) 100%);

	/* Radius scale — everything rounded, buttons always full pill */
	--knup-radius-sm: 8px;
	--knup-radius-md: 16px;
	--knup-radius-lg: 24px;
	--knup-radius-xl: 32px;
	--knup-radius-section: 30px; /* hero e blog-hero outer card */
	--knup-radius-pill: 999px;

	/* Z-index scale — global stacking context */
	--knup-z-dropdown: 100;
	--knup-z-subnav: 200;
	--knup-z-backtop: 999;
	--knup-z-header: 1000;
	--knup-z-drawer: 1001;
	--knup-z-overlay: 9999;
	--knup-z-cookie: 10000;

	/* Shadows */
	--knup-shadow-sm: 0 2px 8px rgba(22, 4, 27, 0.06);
	--knup-shadow-md: 0 8px 24px rgba(22, 4, 27, 0.10);
	--knup-shadow-lg: 0 16px 48px rgba(22, 4, 27, 0.16);
	--knup-shadow-glow-magenta: 0 0 60px rgba(162, 8, 205, 0.35);
	--knup-shadow-glow-blue: 0 0 60px rgba(68, 34, 231, 0.30);

	/* Liquid glass — light tier (over photos / text-heavy / busy backgrounds) */
	--knup-glass-light-bg: rgba(255, 255, 255, 0.82);
	--knup-glass-light-border: rgba(255, 255, 255, 0.45);
	--knup-glass-light-blur: 14px;

	/* Liquid glass — heavy tier (over plain dark gradient / decorative areas) */
	--knup-glass-heavy-bg: rgba(82, 6, 105, 0.40);
	--knup-glass-heavy-border: rgba(255, 255, 255, 0.14);
	--knup-glass-heavy-blur: 28px;

	/* Spacing scale (section rhythm) */
	--knup-space-xs: 8px;
	--knup-space-sm: 16px;
	--knup-space-md: 24px;
	--knup-space-lg: 48px;
	--knup-space-xl: 80px;
	--knup-space-2xl: 120px;

	/* Container */
	--knup-container-width: 1200px;

	/* ---- Typography roles (14) — family / weight / size / line-height ---- */
	--knup-font-heading: 'Inter', system-ui, sans-serif;
	--knup-font-body: 'General Sans', system-ui, sans-serif;
	--knup-hero-font: 'Poppins', sans-serif; /* hero badges + título homepage — intencionalmente diferente do heading padrão */

	--knup-h1-family: 'DM Sans', system-ui, sans-serif; --knup-h1-weight: 700; --knup-h1-size: clamp(2.5rem, 4vw, 3.75rem); --knup-h1-line: 1.1;
	--knup-h2-family: 'DM Sans', system-ui, sans-serif; --knup-h2-weight: 500; --knup-h2-size: clamp(2rem, 3vw, 2.75rem); --knup-h2-line: 1.15;
	--knup-h3-family: var(--knup-font-heading); --knup-h3-weight: 700; --knup-h3-size: clamp(1.5rem, 2vw, 1.875rem); --knup-h3-line: 1.25;
	--knup-h4-family: var(--knup-font-heading); --knup-h4-weight: 600; --knup-h4-size: 1.25rem; --knup-h4-line: 1.3;

	--knup-body-family: var(--knup-font-body); --knup-body-weight: 400; --knup-body-size: 1rem; --knup-body-line: 1.6;
	--knup-small-family: var(--knup-font-body); --knup-small-weight: 400; --knup-small-size: 0.875rem; --knup-small-line: 1.5;
	--knup-label-family: var(--knup-font-body); --knup-label-weight: 600; --knup-label-size: 0.8125rem; --knup-label-line: 1.4;
	--knup-highlight-family: var(--knup-font-body); --knup-highlight-weight: 600; --knup-highlight-size: 1rem; --knup-highlight-line: 1.6;
	--knup-quote-family: var(--knup-font-body); --knup-quote-weight: 500; --knup-quote-size: 1.5rem; --knup-quote-line: 1.4;
	--knup-button-family: var(--knup-font-body); --knup-button-weight: 600; --knup-button-size: 0.9375rem; --knup-button-line: 1;
	--knup-link-family: var(--knup-font-body); --knup-link-weight: 500; --knup-link-size: 1rem; --knup-link-line: 1.6;
	--knup-menu-family: var(--knup-font-body); --knup-menu-weight: 500; --knup-menu-size: 0.9375rem; --knup-menu-line: 1;
	--knup-footer-family: var(--knup-font-body); --knup-footer-weight: 400; --knup-footer-size: 0.9375rem; --knup-footer-line: 1.6;
	--knup-form-family: var(--knup-font-body); --knup-form-weight: 400; --knup-form-size: 1rem; --knup-form-line: 1.4;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* No `scroll-behavior: smooth` here on purpose — it's a documented source of
   conflict with GSAP ScrollTrigger (native smooth-scroll reports
   intermediate positions ScrollTrigger doesn't expect, which was causing
   the entrance animations on Metodologia ARC's diagram/pillar list to
   occasionally end up stuck mid-fade after a reload + scroll). Nothing in
   this theme relies on smooth in-page anchor scrolling. */
html { overflow-x: clip; }
body {
	margin: 0;
	overflow-x: clip;
	background: var(--knup-color-white);
	color: var(--knup-color-gray-900);
	font-family: var(--knup-body-family);
	font-weight: var(--knup-body-weight);
	font-size: var(--knup-body-size);
	line-height: var(--knup-body-line);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Scrollbar -------------------------------------------------------------
   Track = same off-white as the header bar; thumb = the same brand gradient
   used on the primary button, so the scrollbar reads as part of the same UI
   language. No `scrollbar-color` here on purpose: Chromium treats it as
   higher-priority than ::-webkit-scrollbar-thumb, and it only accepts flat
   colors, which flattened the gradient below. */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--knup-color-off-white); }
::-webkit-scrollbar-thumb {
	background-image: linear-gradient(180deg, var(--knup-color-purple-800) 0%, var(--knup-color-magenta-500) 50%, #403399 100%);
	border-radius: var(--knup-radius-pill);
	border: 2px solid var(--knup-color-off-white);
}
::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(180deg, var(--knup-color-purple-800) 0%, #403399 100%); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Typography roles ------------------------------------------------------ */
h1, .knup-h1 {
	font-family: var(--knup-h1-family); font-weight: var(--knup-h1-weight);
	font-size: var(--knup-h1-size); line-height: var(--knup-h1-line); margin: 0;
}
h2, .knup-h2 {
	font-family: var(--knup-h2-family); font-weight: var(--knup-h2-weight);
	font-size: var(--knup-h2-size); line-height: var(--knup-h2-line); margin: 0;
}
h3, .knup-h3 {
	font-family: var(--knup-h3-family); font-weight: var(--knup-h3-weight);
	font-size: var(--knup-h3-size); line-height: var(--knup-h3-line); margin: 0;
}
h4, .knup-h4 {
	font-family: var(--knup-h4-family); font-weight: var(--knup-h4-weight);
	font-size: var(--knup-h4-size); line-height: var(--knup-h4-line); margin: 0;
}
.knup-text-body {
	font-family: var(--knup-body-family); font-weight: var(--knup-body-weight);
	font-size: var(--knup-body-size); line-height: var(--knup-body-line);
}
.knup-text-small {
	font-family: var(--knup-small-family); font-weight: var(--knup-small-weight);
	font-size: var(--knup-small-size); line-height: var(--knup-small-line);
}
.knup-text-label {
	font-family: var(--knup-label-family); font-weight: var(--knup-label-weight);
	font-size: var(--knup-label-size); line-height: var(--knup-label-line);
	text-transform: uppercase; letter-spacing: 0.04em;
}
.knup-text-highlight {
	font-family: var(--knup-highlight-family); font-weight: var(--knup-highlight-weight);
	font-size: var(--knup-highlight-size); line-height: var(--knup-highlight-line);
}
/* Point-fix: o layout do card de depoimento tem altura fixa no bloco de autor;
   colapsar a line-height e empurrar com margin-top compensa o espaço extra
   que o h4 do nome do autor adicionaria. */
.knup-testimonials__author-meta .knup-text-highlight {
	line-height: 0;
	padding: 0;
	margin-top: 21px;
}
.knup-text-quote {
	font-family: var(--knup-quote-family); font-weight: var(--knup-quote-weight);
	font-size: var(--knup-quote-size); line-height: var(--knup-quote-line);
}
.knup-text-link {
	font-family: var(--knup-link-family); font-weight: var(--knup-link-weight);
	font-size: var(--knup-link-size); line-height: var(--knup-link-line);
}
.knup-text-menu {
	font-family: var(--knup-menu-family); font-weight: var(--knup-menu-weight);
	font-size: var(--knup-menu-size); line-height: var(--knup-menu-line);
}
.knup-text-footer {
	font-family: var(--knup-footer-family); font-weight: var(--knup-footer-weight);
	font-size: var(--knup-footer-size); line-height: var(--knup-footer-line);
}
.knup-text-form {
	font-family: var(--knup-form-family); font-weight: var(--knup-form-weight);
	font-size: var(--knup-form-size); line-height: var(--knup-form-line);
}

/* Gradient text (for headline emphasis words) */
.knup-text-gradient {
	background: var(--knup-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.knup-text-arc {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #9608BE;
}
/* Solid purple for the "ARC" wordmark inside the Score ARC card */
.knup-text-arc {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: var(--knup-color-arc);
}
/* Solid accent color (for emphasis words on dark/photo backgrounds, where a
   text-gradient would lose contrast) — matches the site's original "seus
   clientes" / fancy-text treatment: solid magenta, not a gradient fill. */
.knup-text-accent {
	color: var(--knup-color-magenta-500);
	font-weight: 700;
}

/* --- Layout helpers --------------------------------------------------------- */
.knup-container {
	width: 100%;
	max-width: var(--knup-container-width);
	margin-inline: auto;
	padding-inline: var(--knup-space-md);
}
.knup-section {
	padding-block: var(--knup-space-2xl);
}

/* --- Liquid glass utilities -------------------------------------------------
   Use -light over photos/busy backgrounds or wherever body text sits on top
   (legibility first); use -heavy only over plain dark gradients or for
   decorative/non-critical-text elements. */
.knup-glass-light {
	background: var(--knup-glass-light-bg);
	border: 1px solid var(--knup-glass-light-border);
	-webkit-backdrop-filter: blur(var(--knup-glass-light-blur));
	backdrop-filter: blur(var(--knup-glass-light-blur));
	border-radius: var(--knup-radius-lg);
	box-shadow: var(--knup-shadow-md);
}
.knup-glass-heavy {
	background: var(--knup-glass-heavy-bg);
	border: 1px solid var(--knup-glass-heavy-border);
	-webkit-backdrop-filter: blur(var(--knup-glass-heavy-blur));
	backdrop-filter: blur(var(--knup-glass-heavy-blur));
	border-radius: var(--knup-radius-lg);
	box-shadow: var(--knup-shadow-lg);
}

/* --- Buttons -----------------------------------------------------------------
   Always full pill. Primary/secondary pair pattern seen across the design
   references; arrow glyph slides right on hover, fill grows a soft glow. */
.knup-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--knup-space-xs);
	padding: 14px 28px;
	border-radius: var(--knup-radius-pill);
	font-family: var(--knup-button-family);
	font-weight: var(--knup-button-weight);
	font-size: var(--knup-button-size);
	line-height: var(--knup-button-line);
	border: none;
	white-space: nowrap;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.knup-btn__arrow {
	display: inline-flex;
	transition: transform 0.25s ease;
}
.knup-btn:hover .knup-btn__arrow {
	transform: translateX(4px);
}
.knup-btn:hover {
	transform: translateY(-2px);
}
.knup-btn--primary {
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	box-shadow: var(--knup-shadow-glow-magenta);
}
.knup-btn--primary:hover {
	box-shadow: 0 0 0 4px rgba(162, 8, 205, 0.16), var(--knup-shadow-glow-magenta);
}
.knup-btn--secondary {
	background: transparent;
	color: var(--knup-color-purple-800);
	border: 1.5px solid var(--knup-color-purple-800);
}
.knup-btn--secondary:hover {
	background: var(--knup-color-purple-800);
	color: var(--knup-color-white);
}
.knup-btn--glass {
	color: var(--knup-color-purple-900);
}

/* --- Click ripple (initRippleEffect in theme.js) ----------------------------
   Spawned as a plain <span> on click, sized/positioned off the host element's
   own rect so it always lands at the pointer and covers it corner-to-corner;
   removed once the animation ends. Default tint suits light surfaces
   (secondary buttons, white cards); solid/photo surfaces (primary gradient
   buttons, video cards) need the white variant to actually read on top of
   them — see .knup-ripple-host--light below. */
.knup-ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(82, 6, 105, 0.18);
	transform: scale(0);
	pointer-events: none;
	animation: knup-ripple-expand 0.6s ease-out forwards;
}
.knup-ripple-host--light .knup-ripple {
	background: rgba(255, 255, 255, 0.45);
}
@keyframes knup-ripple-expand {
	from { transform: scale(0); opacity: 0.6; }
	to { transform: scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.knup-ripple { display: none; }
}

/* --- Magnetic buttons (initMagneticButtons in theme.js) --------------------
   JS owns `transform` entirely while the effect is active (it bakes the
   existing -2px hover lift into its own calc), so the plain CSS hover lift
   below must be neutralized for these buttons — otherwise the two fight for
   the same property the instant the mouse enters before the first
   mousemove fires. */
.knup-btn--magnetic:hover {
	transform: none;
}

/* --- 3D tilt (initCardTilt in theme.js) -------------------------------------
   Same reasoning as .knup-btn--magnetic above: JS bakes each card's existing
   hover lift into its own rotation/translate calc, so the CSS hover lift
   needs to step aside instead of fighting it. */
.knup-blog-card.knup-tilt:hover,
.knup-faq-card.knup-tilt:hover {
	transform: none;
}

/* --- Cursor spotlight (initCursorSpotlight in theme.js) --------------------
   A soft radial glow that tracks the cursor inside glass cards. JS only
   ever writes the --knup-spotlight-x/-y custom properties on mousemove;
   the glow itself (opacity, position) is pure CSS, so an idle card costs
   nothing. Sized to fill the card exactly (inset: 0) with the card's own
   border-radius, so it never needs its own overflow clipping. */
.knup-spotlight {
	position: relative;
}
.knup-spotlight::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle 220px at var(--knup-spotlight-x, 50%) var(--knup-spotlight-y, 50%), rgba(255, 255, 255, 0.55), transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
.knup-spotlight:hover::before {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.knup-spotlight::before { display: none; }
}

/* ==========================================================================
   COMPONENT: Back to top (initBackToTop in theme.js) — site-wide singleton,
   markup injected once via wp_footer (knup_output_back_to_top() in
   functions.php), same pattern as the video lightbox above. The ring is an
   SVG circle whose stroke-dashoffset tracks overall page scroll progress
   (circumference = 2 * PI * 20 ≈ 125.6).
   ========================================================================== */
.knup-back-to-top {
	position: fixed;
	bottom: 24px;
	left: 24px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: var(--knup-glass-light-bg);
	-webkit-backdrop-filter: blur(var(--knup-glass-light-blur));
	backdrop-filter: blur(var(--knup-glass-light-blur));
	box-shadow: var(--knup-shadow-md);
	color: var(--knup-color-purple-800);
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.25s ease;
	z-index: var(--knup-z-backtop);
}
.knup-back-to-top.is-visible {
	opacity: 1;
	pointer-events: all;
	transform: translateY(0);
}
.knup-back-to-top:hover {
	box-shadow: var(--knup-shadow-lg);
}
.knup-back-to-top__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}
.knup-back-to-top__ring-bg,
.knup-back-to-top__ring-fill {
	fill: none;
	stroke-width: 2.5;
}
.knup-back-to-top__ring-bg { stroke: var(--knup-color-gray-200); }
.knup-back-to-top__ring-fill {
	stroke: var(--knup-color-magenta-500);
	stroke-dasharray: 125.6;
	stroke-dashoffset: 125.6;
	transition: stroke-dashoffset 0.1s linear;
}
.knup-back-to-top__icon {
	position: relative;
	width: 18px;
	height: 18px;
}
@media (max-width: 767px) {
	.knup-back-to-top { left: 16px; bottom: 88px; }
}

/* --- Mobile footer visibility -----------------------------------------------
   The mobile-footer Theme Builder location renders unconditionally in PHP
   (elementor_theme_do_location() doesn't add a wrapper class), so visibility
   is targeted at the widget's own root, .knup-mobile-footer, which is purely
   CSS so page caching is never bypassed. */
.knup-mobile-footer {
	display: none;
}
@media (max-width: 767px) {
	.knup-mobile-footer {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: var(--knup-z-overlay);
	}
}

/* ==========================================================================
   COMPONENT: Header
   ========================================================================== */
.knup-header {
	position: sticky;
	top: 0;
	z-index: var(--knup-z-header);
	background: var(--knup-glass-light-bg);
	-webkit-backdrop-filter: blur(var(--knup-glass-light-blur));
	backdrop-filter: blur(var(--knup-glass-light-blur));
	border-bottom: 1px solid transparent;
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.knup-header.is-scrolled {
	box-shadow: var(--knup-shadow-sm);
	border-bottom-color: var(--knup-glass-light-border);
}
.knup-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--knup-space-md);
	padding-block: 16px;
}
.knup-header__logo img { height: 36px; width: auto; }
.knup-header__nav ul {
	display: flex;
	align-items: center;
	gap: var(--knup-space-lg);
}
.knup-header__nav a {
	position: relative;
	color: var(--knup-color-gray-900);
	transition: color 0.2s ease;
}
.knup-header__nav a:hover,
.knup-header__nav a.is-active {
	color: var(--knup-color-magenta-500);
}
.knup-header__actions {
	display: flex;
	align-items: center;
	gap: var(--knup-space-sm);
}
.knup-header__utility-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--knup-radius-pill);
	color: var(--knup-color-gray-900);
	transition: background 0.2s ease, color 0.2s ease;
}
.knup-header__utility-icon:hover {
	background: var(--knup-color-purple-100);
	color: var(--knup-color-purple-800);
}
.knup-header__utility-icon svg { width: 18px; height: 18px; }

.knup-header__nav-toggle {
	display: none;
	position: relative;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	padding: 0;
}
.knup-header__nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--knup-color-gray-900);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.knup-header__nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.knup-header__nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.knup-header__nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* Invisible hit-area bump to a comfortable ~44px tap target on touch
   devices, without growing the visible 36px icon itself. */
.knup-header__nav-toggle::after {
	content: '';
	position: absolute;
	inset: -4px;
}

.knup-mobile-drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(320px, 80vw);
	height: 100vh;
	background: var(--knup-color-white);
	box-shadow: var(--knup-shadow-lg);
	transform: translateX(100%);
	transition: transform 0.35s ease;
	z-index: var(--knup-z-drawer);
	padding: var(--knup-space-2xl) var(--knup-space-md) var(--knup-space-md);
}
.knup-mobile-drawer.is-open { transform: translateX(0); }
.knup-mobile-drawer ul { display: flex; flex-direction: column; gap: var(--knup-space-md); }

@media (max-width: 1024px) {
	.knup-header__nav { display: none; }
	.knup-header__nav-toggle { display: flex; }
}

/* ==========================================================================
   COMPONENT: Header — Home (floating liquid-glass pill)
   Sits inside the hero's reserved top padding instead of the standard
   full-width sticky header used on every other page.
   ========================================================================== */
.knup-header-home {
	position: fixed;
	top: 24px;
	left: 0;
	right: 0;
	z-index: var(--knup-z-header);
}
.knup-header-home__bar {
	display: flex;
	align-items: center;
	margin-top: 25px;
	justify-content: space-between;
	gap: var(--knup-space-md);
	padding: 10px 10px 10px 26px;
	border-radius: var(--knup-radius-pill);
	box-shadow: var(--knup-shadow-lg);
	transition: background 0.3s ease, box-shadow 0.3s ease, margin-top 0.3s ease;
}
.knup-header-home.is-scrolled .knup-header-home__bar {
	margin-top: 0;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: var(--knup-shadow-md);
}
.knup-header-home__logo img { height: 32px; width: auto; }
.knup-header-home__nav ul {
	display: flex;
	align-items: center;
	gap: var(--knup-space-lg);
}
.knup-header-home__nav a {
	position: relative;
	color: var(--knup-color-gray-900);
	transition: color 0.2s ease;
}
.knup-header-home__nav a:hover,
.knup-header-home__nav a.is-active {
	color: var(--knup-color-magenta-500);
}
.knup-header-home__actions {
	display: flex;
	align-items: center;
	gap: var(--knup-space-sm);
}
.knup-header-home__utility-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--knup-radius-pill);
	color: var(--knup-color-gray-900);
	transition: background 0.2s ease, color 0.2s ease;
}
.knup-header-home__utility-icon:hover {
	background: var(--knup-color-purple-100);
	color: var(--knup-color-purple-800);
}
.knup-header-home__utility-icon svg { width: 18px; height: 18px; }
.knup-header-home__nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	background: transparent;
	border: none;
	padding: 0;
}
.knup-header-home__nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--knup-color-gray-900);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.25s ease;
}
.knup-header-home__nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.knup-header-home__nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.knup-header-home__nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1024px) {
	.knup-header-home__nav { display: none; }
	.knup-header-home__nav-toggle { display: flex; }
}

/* ==========================================================================
   COMPONENT: Footer
   Floating dark "liquid glass" card (same gradient + glow language as the
   hero), intentionally narrower than the viewport with rounded corners —
   not a full-width bar — so it reads as a deliberate closing element rather
   than a generic page footer.
   ========================================================================== */
.knup-footer {
	background: var(--knup-color-white);
	padding: var(--knup-space-xl) var(--knup-space-md) 15px;
}
.knup-footer--off-white { background: var(--knup-color-surface); }
.knup-blog-page .knup-footer { padding-top: 0; background: var(--knup-color-white); }
.knup-footer__shell {
	position: relative;
	overflow: hidden;
	max-width: 1400px;
	margin-inline: auto;
	border-radius: var(--knup-radius-xl);
	background: linear-gradient(160deg, var(--knup-color-purple-900) 0%, var(--knup-color-purple-800) 100%);
	border: 1px solid rgba(255, 255, 255, 0.12);
	box-shadow: var(--knup-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	padding: var(--knup-space-xl) var(--knup-space-lg) var(--knup-space-md);
}
.knup-footer__glow {
	position: absolute;
	top: -80px;
	right: -80px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(162, 8, 205, 0.35) 0%, rgba(162, 8, 205, 0) 70%);
	filter: blur(20px);
	pointer-events: none;
}
.knup-footer__grid {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--knup-space-lg);
	padding-bottom: var(--knup-space-xl);
}
.knup-footer__brand { margin-left: 20%; }
.knup-footer__logo { height: 30px; width: auto; margin-bottom: var(--knup-space-sm); display: block; }
.knup-footer__brand p { margin: var(--knup-space-xs) 0 var(--knup-space-md); max-width: 28ch; color: rgba(255, 255, 255, 0.68); }
.knup-footer__social { display: flex; gap: 10px; }
.knup-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--knup-radius-pill);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--knup-color-white);
	transition: transform 0.25s ease, background 0.25s ease;
}
.knup-footer__social a:hover { transform: translateY(-3px); background: var(--knup-gradient-brand); border-color: transparent; }
.knup-footer__social svg { width: 16px; height: 16px; }
.knup-footer__col-title { color: var(--knup-color-white); margin-bottom: var(--knup-space-sm); }
.knup-footer__column ul { display: flex; flex-direction: column; gap: 10px; }
.knup-footer__column a { color: rgba(255, 255, 255, 0.64); transition: color 0.2s ease; }
.knup-footer__column a:hover { color: var(--knup-color-white); }
.knup-footer__contact-link { display: inline-flex; align-items: center; gap: 8px; }
.knup-footer__contact-link svg { width: 16px; height: 16px; }
.knup-footer__legal {
	position: relative;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: var(--knup-space-md);
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 900px) {
	.knup-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.knup-footer__shell { border-radius: var(--knup-radius-lg); padding: var(--knup-space-lg) var(--knup-space-md) var(--knup-space-sm); }
	.knup-footer__grid { grid-template-columns: 1fr; text-align: center; }
	.knup-footer__brand { display: flex; flex-direction: column; align-items: center; margin-left: 0; }
	.knup-footer__social { justify-content: center; }
}

/* ==========================================================================
   COMPONENT: Mobile footer (bottom nav)
   ========================================================================== */
.knup-mobile-footer {
	align-items: center;
	justify-content: space-around;
	padding: 10px 6px;
	border-radius: 0;
	border-bottom: none;
	box-shadow: 0 -8px 24px rgba(22, 4, 27, 0.10);
}
.knup-mobile-footer__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--knup-color-gray-900);
	padding: 6px 10px;
	border-radius: var(--knup-radius-md);
}
.knup-mobile-footer__item svg { width: 20px; height: 20px; }
.knup-mobile-footer__item.is-cta {
	color: var(--knup-color-white);
	background: var(--knup-gradient-brand);
	transform: translateY(-10px);
	box-shadow: var(--knup-shadow-glow-magenta);
	padding: 10px 14px;
}

/* ==========================================================================
   Shared: pills
   ========================================================================== */
.knup-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 18px;
	border-radius: var(--knup-radius-pill);
}
.knup-pill svg { width: 16px; height: 16px; flex-shrink: 0; }
.knup-pill--solid {
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	font-family: var(--knup-highlight-family);
	font-weight: var(--knup-highlight-weight);
}

/* ==========================================================================
   COMPONENT: Hero
   ========================================================================== */
.knup-hero {
	position: relative;
	overflow: hidden;
	padding-top: 125px;
	padding-bottom: 133px;
	background: linear-gradient(90deg, var(--knup-color-purple-900) 0%, var(--knup-color-purple-800) 100%);
	border-radius: var(--knup-radius-section);
	margin: 10px;
}
.knup-hero__grid {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--knup-space-lg);
	top: 33px;
}
.knup-hero__content { flex: 0 1 auto; min-width: 0; margin-top: 35px; }
.knup-hero__badges {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	margin-bottom: var(--knup-space-md);
}
.knup-hero__badge-brand {
	font-family: var(--knup-hero-font);
	font-size: 26px;
	font-weight: 400;
	justify-self: start;
	width: fit-content;
	color: var(--knup-color-white);
	width: 100%;
	background: #A208CD1F;
	border: 1px solid #FFFFFF38;
	border-radius: 34px;
	padding: 7px 0 7px 22px;
	margin: 0 -32px 0 -2px;
	position: relative;
	z-index: 1;
	line-height: 1.2;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
.knup-hero__badge-pill {
	font-family: var(--knup-hero-font);
	font-size: 13px;
	font-weight: 500;
	-webkit-text-stroke-color: #000;
	stroke: #000;
	justify-self: start;
	width: fit-content;
	color: var(--knup-color-purple-900);
	background: var(--knup-color-off-white);
	border: 1px solid #FFFFFF59;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
	padding: 15px 20px 15px 20px;
	margin: 0 37px 0 -77px;
	z-index: 2;
}
.knup-hero__title {
	color: var(--knup-color-off-white);
	font-family: var(--knup-hero-font);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 4rem);
	line-height: 1.1;
	margin-top: 0;
	margin-bottom: 0;
}
.knup-hero__subtitle {
	text-align: start;
	font-family: var(--knup-hero-font);
	font-weight: 400;
	font-size: 17px;
	color: var(--knup-color-white);
	max-width: 480px;
	margin-bottom: var(--knup-space-md);
}
.knup-hero__media {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	justify-content: center;
}
.knup-hero__media img {
	width: 100%;
	margin-bottom: -127px;
	border-radius: var(--knup-radius-section);
	z-index: 1;
}
/* Rectangular (non-cutout) fallback images still get the card treatment */
.knup-hero__media .knup-img-placeholder {
	border-radius: var(--knup-radius-xl);
	box-shadow: var(--knup-shadow-lg);
}
@media (max-width: 1024px) {
	.knup-hero__grid { flex-direction: column; }
	.knup-hero__content { text-align: center; max-width: 497px; }
	.knup-hero__title { font-size: 37px; }
	.knup-hero__subtitle { max-width: 589px; margin-inline: auto; }
	.knup-hero__media { flex: 0 0 auto; }
}
@media (max-width: 767px) {
	.knup-hero__title { font-size: 31px; }
	.knup-hero__badges { grid-template-columns: 1fr; justify-content: center; }
	.knup-hero__badge-brand, .knup-hero__badge-pill { justify-self: center; font-size: 27px; border-radius: 7px; }
	.knup-hero__badge-brand { margin: 0 0 8px; }
	.knup-hero__badge-pill { margin: 0; }
}

/* ==========================================================================
   COMPONENT: Brand strip (rotating word)
   ========================================================================== */
.knup-brand-strip {
	margin-top: -50px;
	padding-block: 51px;
	background: var(--knup-color-purple-900);
	text-align: center;
	position: relative;
	height: 101px;
	z-index: 2;
	border-radius: 19px;
	width: 1400px;
	max-width: 100%;
	align-content: center;
	place-self: center;
}
.knup-brand-strip__line {
	margin: 0;
	font-size: 28px;
	line-height: 1.2;
}
.knup-brand-strip__prefix {
	color: var(--knup-color-magenta-500);
	font-size: 45px;
	font-weight: 500;
	line-height: 1px;
	white-space: nowrap;
}
.knup-brand-strip__words { color: var(--knup-color-gray-50); font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; }

@media (max-width: 600px) {
	.knup-brand-strip { height: auto; padding-block: 32px; }
	.knup-brand-strip__prefix { font-size: clamp(1.5rem, 8vw, 2.5rem); line-height: 1.2; }
	.knup-brand-strip__line { font-size: 1rem; }
}

/* ==========================================================================
   COMPONENT: Pain / diagnosis section
   Back to the familiar image-left/copy-right split, but the image sits in
   an organic "blob" frame with a slow-rotating gradient halo behind it and
   a floating glass badge overlapping its corner, plus a subtle scroll
   parallax — and the pills become a connected vertical checklist.
   ========================================================================== */
.knup-pain { background: var(--knup-color-white); overflow: hidden; padding-bottom: 84px; }
.knup-pain.is-building { overflow: visible; }
.knup-pain__header { text-align: center; max-width: 720px; margin: 0 auto var(--knup-space-xl); }
.knup-pain__header p { margin-top: var(--knup-space-sm); }

.knup-pain__grid {
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	gap: var(--knup-space-xl);
	align-items: center;
}
.knup-pain__media { position: relative; display: flex; align-items: center; justify-content: center; padding: 28px; }
.knup-pain__blob-dots {
	position: absolute;
	inset: -10%;
	z-index: 0;
	background-image: radial-gradient(circle, var(--knup-color-purple-800) 1px, transparent 1.6px);
	background-position: center;
	background-size: 16px 16px;
	opacity: 0.22;
	mask-image: radial-gradient(circle, #000 55%, transparent 95%);
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 95%);
}
.knup-pain__blob {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1328 / 1218;
	mask-image: url(../img/knup-k-shape.svg);
	mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	-webkit-mask-image: url(../img/knup-k-shape.svg);
	-webkit-mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
}
.knup-pain__blob img,
.knup-pain__blob .knup-img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.knup-pain__particles {
	position: absolute;
	z-index: 2;
	pointer-events: none;
}
.knup-pain__collage {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	grid-auto-flow: row dense;
	gap: 4px;
	width: 100%;
	height: 100%;
	background: var(--knup-color-white);
}
.knup-pain__collage-cell {
	position: relative;
	overflow: hidden;
}
.knup-pain__collage-cell--wide { grid-column: span 2; }
.knup-pain__collage-item {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
	transition: transform 0.6s ease;
}
.knup-pain__collage-cell:hover .knup-pain__collage-item { transform: scale(1.08); }
.knup-pain__collage-item--pos-top { object-position: center 29%; }
.knup-pain__collage-item--pos-left { object-position: center 36%; }
.knup-pain__collage-item--pos-bottom { object-position: center 88%; }
.knup-pain__question {
	font-family: 'DM Sans', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(25px, 2.2vw, 33px);
	line-height: 1.3;
	color: var(--knup-color-purple-900);
	margin: 0 0 var(--knup-space-md);
}
.knup-pain__lead {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--knup-color-magenta-500);
	font-family: var(--knup-highlight-family);
	font-weight: var(--knup-highlight-weight);
	margin: 0 0 var(--knup-space-md);
}
.knup-pain__lead svg { width: 18px; height: 18px; flex-shrink: 0; }
.knup-pain__checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.knup-pain__check-item {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 61%;
	padding: 10px 20px 10px 10px;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-gradient-brand);
	box-shadow: var(--knup-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.knup-pain__check-item:hover { transform: translateX(6px); box-shadow: var(--knup-shadow-md); }
.knup-pain__check-node {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.22);
	color: var(--knup-color-white);
	transition: transform 0.25s ease;
}
.knup-pain__check-node svg { width: 16px; height: 16px; }
.knup-pain__check-item:hover .knup-pain__check-node { transform: rotate(-8deg); }
.knup-pain__check-item span:last-child {
	font-size: 15px;
	font-weight: 500;
	color: var(--knup-color-white);
}
@media (max-width: 900px) {
	.knup-pain__grid { grid-template-columns: 1fr; }
	.knup-pain__media { max-width: 320px; margin: 0 auto; }
}

/* ==========================================================================
   COMPONENT: Pillars — even 4-column grid
   Icons sit in a gradient "halo" that sweeps into view on hover.
   ========================================================================== */
.knup-pillars { padding-top: 19px; padding-bottom: 61px; }
.knup-pillars__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--knup-space-md);
}
.knup-pillars__item {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.knup-pillars__item:hover { transform: translateY(-6px); box-shadow: var(--knup-shadow-lg); }
.knup-pillars__item-body { padding: 28px 32px 18px; }
.knup-pillars__halo {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--knup-color-white);
	color: var(--knup-color-purple-800);
	margin-bottom: 10px;
}
.knup-pillars__halo::before {
	content: '';
	position: absolute;
	inset: -4px;
	z-index: -1;
	border-radius: 50%;
	background: conic-gradient(from 90deg, var(--knup-color-magenta-500), var(--knup-color-blue-600), var(--knup-color-magenta-500));
	opacity: 0.45;
	transition: opacity 0.3s ease, transform 0.6s ease;
}
.knup-pillars__item:hover .knup-pillars__halo::before { opacity: 1; transform: rotate(160deg); }
.knup-pillars__halo svg { width: 20px; height: 20px; }
.knup-pillars__copy h4 { margin-bottom: 4px; }
@media (max-width: 900px) {
	.knup-pillars__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.knup-pillars__grid { grid-template-columns: 1fr; }
}

/* --- Pillar card figure: image arch at the BOTTOM of each card, badge
   straddling the text/photo boundary (mirrored version of the reference,
   which has the arch at the top). ------------------------------------- */
.knup-pillars__figure {
	position: relative;
	margin-top: auto;
	height: 88px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	overflow: hidden;
}
.knup-pillars__figure img,
.knup-pillars__figure .knup-img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.knup-pillars__figure-badge {
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--knup-color-purple-800);
	z-index: 1;
}
.knup-pillars__figure-badge svg { width: 14px; height: 14px; }

/* ==========================================================================
   COMPONENT: Content split (text + image) + Pillars summary
   These two sections form a single visual block (institutional text/image
   followed by the 3-card recap): same tint background, a tight shared gap
   instead of two full section paddings, and soft gradient blends into the
   white section above and into the .knup-arc section below — same approach
   used on the Renata Labury theme for seamless section transitions.
   ========================================================================== */
.knup-content-split,
.knup-pillars-summary {
	position: relative;
	background-color: rgb(68 34 231 / 10%);
}
.knup-content-split { padding-bottom: 48px; padding-top: 169px; overflow: hidden; }
.knup-pillars-summary { padding-top: 48px; padding-bottom: 129px; }
.knup-content-split > .knup-container,
.knup-pillars-summary > .knup-container {
	position: relative;
	z-index: 1;
}
.knup-content-split::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(to bottom, var(--knup-color-white) 0%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}
.knup-pillars-summary::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 140px;
	background: linear-gradient(to top, var(--knup-color-white) 0%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}
.knup-content-split__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--knup-space-lg);
	align-items: center;
}
.knup-content-split--image-left .knup-content-split__media { order: -1; }
.knup-content-split__copy h2 { font-size: 31px; margin-bottom: var(--knup-space-sm); }
.knup-content-split__copy p { margin-bottom: var(--knup-space-lg); max-width: 48ch; }
.knup-content-split__media img { display: block; }
@media (max-width: 900px) {
	.knup-content-split__grid { grid-template-columns: 1fr; }
	.knup-content-split--image-left .knup-content-split__media { order: 0; }
}

.knup-pillars-summary__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--knup-space-md);
}
.knup-pillars-summary__card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	aspect-ratio: 3 / 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--knup-space-md);
	border-radius: var(--knup-radius-lg);
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	box-shadow: var(--knup-shadow-md);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.knup-pillars-summary__card:hover { transform: translateY(-6px); box-shadow: var(--knup-shadow-lg); }
.knup-pillars-summary__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.6s ease;
}
.knup-pillars-summary__card:hover .knup-pillars-summary__bg { transform: scale(1.08); }
.knup-pillars-summary__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(82, 6, 105, 0.18) 0%, rgba(82, 6, 105, 0.6) 55%, rgba(31, 0, 39, 0.94) 100%),
		linear-gradient(135deg, rgba(217, 0, 166, 0.32) 0%, rgba(68, 34, 231, 0.32) 100%);
}
.knup-pillars-summary__index {
	position: absolute;
	top: var(--knup-space-sm);
	right: var(--knup-space-sm);
	z-index: 2;
	font-size: 40px;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.22);
}
.knup-pillars-summary__body { position: relative; z-index: 2; }
.knup-pillars-summary__card h3 { margin-bottom: 6px; color: var(--knup-color-white); }
.knup-pillars-summary__card p { color: rgba(255, 255, 255, 0.85); }
@media (max-width: 900px) {
	.knup-pillars-summary__grid { grid-template-columns: 1fr; }
	.knup-pillars-summary__card { aspect-ratio: 16 / 5.5; }
}

/* ==========================================================================
   COMPONENT: ARC methodology diagram
   ========================================================================== */
.knup-arc {
	position: relative;
	background: var(--knup-color-white);
	padding-bottom: 35px;
	padding: 50px;
}
.knup-arc > .knup-container {
	position: relative;
	z-index: 1;
}
.knup-arc__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--knup-space-2xl);
	align-items: center;
}
.knup-arc__pillars { display: flex; flex-direction: column; gap: 12px; margin: var(--knup-space-md) 0 var(--knup-space-lg); }
.knup-arc__pillar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	overflow: hidden;
	padding: 14px 20px 14px 16px;
	border-radius: var(--knup-radius-lg);
	background: var(--knup-color-white);
	box-shadow: var(--knup-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.knup-arc__pillar::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--knup-gradient-brand);
}
.knup-arc__pillar:hover { transform: translateX(6px); box-shadow: var(--knup-shadow-md); }
.knup-arc__pillar-number {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1;
	color: var(--knup-color-purple-50);
}
.knup-arc__pillar-icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
}
.knup-arc__pillar-icon svg { width: 18px; height: 18px; }
.knup-arc__pillar-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1px; }
.knup-arc__pillar-copy strong { font-size: 15px; color: var(--knup-color-purple-900); }
.knup-arc__pillar-copy span { font-size: 14px; color: var(--knup-color-gray-900); opacity: 0.7; }
/* --- ARC diagram: chrome swirl + dotted ring are 3-piece transparent PNGs
   each (designer-supplied), positioned by percentage offsets measured
   directly against the original 1536x1536 composite (so they reassemble
   pixel-accurately), with the logo + 3 satellite nodes as real HTML on top.
   At rest every piece sits at its final, correct position/rotation — the
   JS-driven entrance (initArcDiagram in theme.js) animates them IN from an
   offset the first time the diagram scrolls into view, then leaves them
   here; this block alone is what renders with JS disabled. ------------- */
.knup-arc__diagram {
	position: relative;
	width: 100%;
	max-width: 630px;
	aspect-ratio: 1;
	margin-inline: auto;
	transform: scale(1.1263);
}
.knup-arc__swirl,
.knup-arc__ring {
	position: absolute;
	inset: 0;
	transform-origin: 50% 59%;
}
.knup-arc__swirl-piece,
.knup-arc__ring-piece {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
}
.knup-arc__swirl-piece--top { left: 20.31%; top: 30.69%; width: 48.50%; }
.knup-arc__swirl-piece--bottom-right { left: 32.03%; top: 30.25%; width: 51.30%; }
.knup-arc__swirl-piece--bottom-left { left: 16.41%; top: 42.8%; width: 38.74%; }
.knup-arc__ring-piece--right { left: 64.84%; top: 27.34%; width: 24.02%; }
.knup-arc__ring-piece--bottom { left: 28.52%; top: 89.89%; width: 43.03%; }
.knup-arc__ring-piece--left { left: 12.89%; top: 26.17%; width: 23.76%; }
.knup-arc__logo {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 59%;
	width: 24%;
	height: auto;
	transform: translate(-50%, -50%);
}
.knup-arc__node {
	position: absolute;
	z-index: 2;
	width: 30.3%;
	height: auto;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 6px 16px rgba(82, 6, 105, 0.18));
}
.knup-arc__node--top { top: 23%; left: 49.8%; }
.knup-arc__node--bottom-left { top: 79.1%; left: 17.7%; }
.knup-arc__node--bottom-right { top: 77.99%; left: 82.1%; }
@media (max-width: 900px) {
	.knup-arc__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   COMPONENT: Testimonials — single floating liquid-glass card over an
   ambient rotating gradient glow, navigated by a clickable avatar rail.
   ========================================================================== */
.knup-testimonials {
	position: relative;
	background: #F6EBFA;
	overflow: hidden;
	padding-top: 161px;
	padding-bottom: 155px;
}
.knup-testimonials::before,
.knup-testimonials::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 140px;
	pointer-events: none;
	z-index: 0;
}
.knup-testimonials::before {
	top: 0;
	background: linear-gradient(to bottom, var(--knup-color-white) 0%, transparent 100%);
}
.knup-testimonials::after {
	bottom: 0;
	background: linear-gradient(to top, var(--knup-color-white) 0%, transparent 100%);
}
.knup-testimonials > .knup-container { position: relative; z-index: 1; }
.knup-testimonials__layout {
	display: flex;
	align-items: center;
	gap: var(--knup-space-xl);
}
.knup-testimonials__intro {
	position: relative;
	bottom: 77px;
	flex: 0 0 30%;
	max-width: 30%;
}
.knup-testimonials__intro-quote {
	width: 64px;
	height: auto;
	margin-bottom: var(--knup-space-sm);
}
.knup-testimonials__intro-title {
	font-family: var(--knup-h3-family);
	font-weight: 500;
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	line-height: 1.3;
	color: var(--knup-color-purple-900);
}
.knup-testimonials__right {
	flex: 0 0 70%;
	max-width: 70%;
}
.knup-testimonials__stage {
	position: relative;
	max-width: 1250px;
	margin-inline: auto;
	padding-inline: 64px;
}
.knup-testimonials__glow {
	position: absolute;
	inset: 8% 14%;
	z-index: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, var(--knup-color-magenta-500), var(--knup-color-blue-600), var(--knup-color-purple-800), var(--knup-color-magenta-500));
	filter: blur(70px);
	opacity: 0.32;
}
.knup-testimonials__card {
	position: relative;
	z-index: 1;
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 3px;
	padding: 22px var(--knup-space-xl);
}
.knup-testimonials__card.is-active { display: flex; }
.knup-testimonials__quote-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	margin-bottom: var(--knup-space-xs);
}
.knup-testimonials__quote-badge svg { width: 24px; height: 24px; }
.knup-testimonials__quote {
	margin-top: 11px;
	font-style: normal;
	font-size: 1.3625rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--knup-color-purple-900);
	max-width: 56ch;
}
.knup-testimonials__author { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.knup-testimonials__author-meta { text-align: left; }
.knup-testimonials__avatar-ring {
	display: inline-flex;
	width: 44px;
	height: 44px;
	padding: 3px;
	border-radius: 50%;
	background: conic-gradient(from 90deg, var(--knup-color-magenta-500), var(--knup-color-blue-600), var(--knup-color-magenta-500));
	flex-shrink: 0;
}
.knup-testimonials__avatar-ring img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--knup-color-white);
	display: block;
}
.knup-testimonials__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	color: var(--knup-color-purple-800);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.knup-testimonials__nav:hover { transform: translateY(-50%) scale(1.08); }
.knup-testimonials__nav--prev { left: 0; }
.knup-testimonials__nav--next { right: 0; }
.knup-testimonials__rail { display: flex; justify-content: center; gap: 14px; margin-top: var(--knup-space-xl); flex-wrap: wrap; }
.knup-testimonials__chip {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.knup-testimonials__chip img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.knup-testimonials__chip:hover { opacity: 0.85; }
.knup-testimonials__chip.is-active { opacity: 1; transform: scale(1.12); }
.knup-testimonials__chip.is-active::after {
	content: '';
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--knup-color-magenta-500);
	animation: knup-chip-pulse 1.8s ease-out infinite;
}
@keyframes knup-chip-pulse {
	0% { opacity: 0.8; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.3); }
}
@media (max-width: 900px) {
	.knup-testimonials__layout { flex-direction: column; }
	.knup-testimonials__intro,
	.knup-testimonials__right { flex: 1 1 100%; max-width: 100%; }
}
@media (max-width: 700px) {
	.knup-testimonials__stage { padding-inline: 0; }
	.knup-testimonials__nav { display: none; }
}

/* ==========================================================================
   COMPONENT: Blog teaser
   ========================================================================== */
.knup-blog-teaser {
	position: relative;
	padding-top: 50px;
	padding-bottom: 25px;
}
.knup-blog-teaser__heading { text-align: center; margin-bottom: var(--knup-space-lg); }

/* ---- Carousel shell: viewport clips the track, JS (initBlogCarousel in
   theme.js) translateX's it and clones the post set on both sides so it can
   loop forever no matter how many of the (max 9) posts actually exist. ---- */
.knup-blog-teaser__carousel { position: relative; }
/* overflow-x clips so the carousel still hides off-screen slides; overflow-y
   stays visible (not "hidden", which the CSS spec would force into "auto"
   here and risk a stray scrollbar) so initCardTilt()'s hover-lift on these
   cards isn't cropped at the top — see project screenshot of the cut-off
   tilt lift this was fixing. */
.knup-blog-teaser__viewport { overflow-x: clip; overflow-y: visible; }
.knup-blog-teaser__track { display: flex; gap: var(--knup-space-md); }
.knup-blog-teaser__track > .knup-blog-card { flex: 0 0 calc((100% - 2 * var(--knup-space-md)) / 3); }
.knup-blog-teaser__nav {
	position: absolute;
	top: 33%;
	z-index: 2;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--knup-color-purple-800);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.knup-blog-teaser__nav:hover { transform: translateY(-50%) scale(1.08); }
.knup-blog-teaser__nav--prev { left: -22px; }
.knup-blog-teaser__nav--next { right: -22px; }

.knup-blog-card {
	position: relative;
	display: block;
	border-radius: var(--knup-radius-lg);
	background: var(--knup-color-white);
	box-shadow: var(--knup-shadow-sm);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.knup-blog-card:hover { transform: translateY(-6px); box-shadow: var(--knup-shadow-md); }
.knup-blog-card__media { aspect-ratio: 16/10; overflow: hidden; background: var(--knup-color-gray-200); }
.knup-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.knup-blog-card__body { padding: var(--knup-space-md); }
.knup-blog-card__meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.knup-blog-card__category {
	display: inline-block;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	font-size: 10px;
	padding: 4px 14px;
	border-radius: var(--knup-radius-pill);
}
.knup-blog-card__reading-time { color: var(--knup-color-gray-400); font-size: var(--knup-label-size); }
.knup-blog-card__category + .knup-blog-card__reading-time::before { content: '• '; }
.knup-blog-card__body h4 { margin-bottom: 8px; }
.knup-blog-card__body p { margin-bottom: var(--knup-space-sm); }
.knup-blog-card__meta { color: var(--knup-color-gray-400); }
@media (max-width: 900px) {
	.knup-blog-teaser__track > .knup-blog-card { flex: 0 0 calc((100% - var(--knup-space-md)) / 2); }
}
@media (max-width: 700px) {
	.knup-blog-teaser__track > .knup-blog-card { flex: 0 0 100%; }
	.knup-blog-teaser__nav { display: none; }
}

/* Requested only for this Home block's card media — border-radius 25px +
   white backdrop instead of the shared .knup-blog-card__media tokens. */
.knup-blog-teaser .knup-blog-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 25px;
}
.knup-blog-teaser .knup-blog-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: white;
}

/* ==========================================================================
   Shared: image placeholder (gradient + icon + caption, used whenever a
   widget's MEDIA control is still empty — see knup_image_or_placeholder())
   ========================================================================== */
.knup-img-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--knup-space-sm);
	aspect-ratio: 4 / 3;
	width: 100%;
	height: 121px;
	border-radius: var(--knup-radius-lg);
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
}
.knup-img-placeholder__icon { width: 48px; height: 48px; opacity: 0.9; }
.knup-img-placeholder__icon svg { width: 48px; height: 48px; }
.knup-img-placeholder .knup-text-small { opacity: 0.85; }

/* --- Fallback chrome (only ever visible before Theme Builder templates exist) */
.knup-fallback-header,
.knup-fallback-footer,
.knup-fallback-content {
	padding: var(--knup-space-md);
}

/* ==========================================================================
   COMPONENT: Video card (poster + play button) — opens the site-wide
   lightbox (.knup-lightbox) on click. See initVideoLightbox in theme.js.
   ========================================================================== */
.knup-video-card {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	border-radius: var(--knup-radius-lg);
	overflow: hidden;
	box-shadow: var(--knup-shadow-md);
}
.knup-video-card img { display: block; width: 100%; transition: transform 0.5s ease; }
.knup-video-card:hover img { transform: scale(1.04); }
.knup-video-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(22, 4, 27, 0) 50%, rgba(22, 4, 27, 0.45) 100%);
	transition: background 0.3s ease;
}
.knup-video-card:hover .knup-video-card__overlay { background: rgba(22, 4, 27, 0.35); }
.knup-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-gradient-brand);
	box-shadow: var(--knup-shadow-glow-magenta);
	color: var(--knup-color-white);
	transition: transform 0.3s ease;
}
.knup-play-btn svg { width: 28px; height: 28px; margin-left: 2px; }
.knup-video-card:hover .knup-play-btn { transform: translate(-50%, -50%) scale(1.08); }

/* ==========================================================================
   COMPONENT: Video lightbox — site-wide singleton, markup injected once via
   wp_footer (knup_output_lightbox() in functions.php).
   ========================================================================== */
.knup-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(22, 4, 27, 0.92);
	z-index: var(--knup-z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--knup-space-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}
.knup-lightbox.is-open {
	opacity: 1;
	pointer-events: all;
}
.knup-lightbox__box {
	position: relative;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16/9;
	border-radius: var(--knup-radius-xl);
	overflow: hidden;
	background: #000;
	transform: scale(0.92);
	transition: transform 0.3s ease;
}
.knup-lightbox.is-open .knup-lightbox__box { transform: scale(1); }
.knup-lightbox__box video,
.knup-lightbox__box iframe {
	width: 100%;
	height: 100%;
	display: block;
}
.knup-lightbox__close {
	position: absolute;
	top: -52px;
	right: 0;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: var(--knup-radius-pill);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(4px);
	color: var(--knup-color-white);
	font-size: 1.4rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}
.knup-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }


/* Video incorporado (modo lightbox=nao, nao usa .knup-video-card) */
.knup-video-embed-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	overflow: hidden;
}
.knup-video-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.knup-video-inline {
	width: 100%;
	border-radius: 16px;
	display: block;
}
/* ==========================================================================
   COMPONENT: Lead popup (liquid glass). On the real site this is an
   Elementor Pro Popup template (elementor/templates/popup-lead-form.json,
   content from Knup_Widget_Lead_Form) — .knup-popup__box is assigned to its
   container via css_classes, Elementor owns the overlay/open/close. The
   static preview (preview/home.html) renders .knup-popup/.knup-popup__close
   itself too, since it has no Elementor runtime — see initLeadPopup in
   theme.js and project memory knup-digital-lead-popup.
   ========================================================================== */
.knup-popup {
	position: fixed;
	inset: 0;
	background: rgba(22, 4, 27, 0.55);
	z-index: var(--knup-z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--knup-space-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease-out;
}
.knup-popup.is-open {
	opacity: 1;
	pointer-events: all;
}
.knup-popup__box {
	position: relative;
	width: 100%;
	max-width: 700px;
	max-height: 88vh;
	overflow-y: auto;
	scrollbar-width: none;
	padding: 28px var(--knup-space-md);
	background: rgb(255 255 255 / 1%);
	-webkit-backdrop-filter: blur(36px) saturate(180%);
	backdrop-filter: blur(36px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--knup-radius-xl);
	box-shadow: var(--knup-shadow-lg);
	transform: scale(0.92) translateY(12px);
	transition: transform 0.18s ease-out;
}
.knup-popup__box::-webkit-scrollbar { display: none; }
.knup-popup.is-open .knup-popup__box { transform: scale(1) translateY(0); }
.knup-popup__close {
	position: absolute;
	top: var(--knup-space-sm);
	right: var(--knup-space-sm);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: var(--knup-radius-pill);
	background: rgb(255 255 255 / 42%);
	color: var(--knup-color-purple-900);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	z-index: 1;
}
.knup-popup__close:hover { background: rgb(255 255 255 / 65%); transform: rotate(90deg); }
.knup-popup__close svg { width: 18px; height: 18px; }
.knup-popup__head { text-align: center; margin-bottom: var(--knup-space-md); }
.knup-popup__head h2 { font-size: 2rem; margin-bottom: var(--knup-space-xs); color: var(--knup-color-white); }
.knup-popup__head p { max-width: 48ch; margin-inline: auto; color: var(--knup-color-white); }
.knup-popup .knup-text-gradient {
	background: none;
	-webkit-background-clip: unset;
	background-clip: unset;
	color: #a208cd;
}
@media (max-width: 767px) {
	.knup-popup__box { max-height: 93vh; }
	.knup-popup__head h2 { font-size: 1.4rem; margin-top: 39px; }
}

/* ==========================================================================
   COMPONENT: FAQ grid + answer modal — page "Perguntas Frequentes"
   (class-knup-widget-faq-grid.php). Clicking a card opens .knup-faq-modal
   with the full answer (initFaqModal in theme.js) instead of expanding an
   inline accordion, per explicit request to differ from the old page.
   ========================================================================== */
.knup-faq {
	background: var(--knup-color-surface);
	padding-top: 100px;
	padding-bottom: 61px;
}
.knup-faq__head { margin: 0 auto var(--knup-space-xl); text-align: center; }
.knup-faq__head h1 { white-space: nowrap; }
.knup-faq__head p { max-width: 640px; margin: var(--knup-space-sm) auto 0; }
@media (max-width: 600px) { .knup-faq__head h1 { white-space: normal; } }

.knup-faq__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--knup-space-md);
}
@media (max-width: 1024px) { .knup-faq__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .knup-faq__grid { grid-template-columns: 1fr; } }

.knup-faq-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--knup-space-sm);
	min-height: 184px;
	padding: var(--knup-space-md);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.knup-faq-card:hover,
.knup-faq-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--knup-shadow-lg);
	border-color: rgba(162, 8, 205, 0.28);
}
.knup-faq-card__num {
	font-family: var(--knup-h2-family);
	font-weight: 600;
	font-size: 1.75rem;
	background: var(--knup-gradient-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.knup-faq-card__question {
	flex: 1;
	font-family: var(--knup-h4-family);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--knup-color-purple-900);
}
.knup-faq-card__icon {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin-left: auto;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-color-purple-50);
	color: var(--knup-color-purple-800);
	transition: background 0.3s ease, color 0.3s ease;
}
.knup-faq-card__icon svg {
	position: absolute;
	width: 16px;
	height: 16px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.knup-faq-card__icon-arrow { opacity: 0; transform: translateX(-4px); }
.knup-faq-card:hover .knup-faq-card__icon {
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
}
.knup-faq-card:hover .knup-faq-card__icon-plus { opacity: 0; transform: translateX(4px); }
.knup-faq-card:hover .knup-faq-card__icon-arrow { opacity: 1; transform: translateX(0); }

.knup-faq-modal {
	position: fixed;
	inset: 0;
	background: rgba(22, 4, 27, 0.55);
	z-index: var(--knup-z-overlay);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--knup-space-md);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease-out;
}
.knup-faq-modal.is-open { opacity: 1; pointer-events: all; }
.knup-faq-modal__box {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 86vh;
	overflow-y: auto;
	scrollbar-width: none;
	padding: var(--knup-space-lg) var(--knup-space-md);
	text-align: center;
	transform: scale(0.92) translateY(12px);
	transition: transform 0.18s ease-out;
}
.knup-faq-modal__box::-webkit-scrollbar { display: none; }
.knup-faq-modal.is-open .knup-faq-modal__box { transform: scale(1) translateY(0); }
.knup-faq-modal__close {
	position: absolute;
	top: var(--knup-space-sm);
	right: var(--knup-space-sm);
	width: 36px;
	height: 36px;
	border: none;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-color-purple-50);
	color: var(--knup-color-purple-800);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.knup-faq-modal__close:hover { background: var(--knup-color-purple-100); transform: rotate(90deg); }
.knup-faq-modal__close svg { width: 18px; height: 18px; }
.knup-faq-modal__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--knup-space-sm);
	border-radius: var(--knup-radius-pill);
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
}
.knup-faq-modal__icon svg { width: 26px; height: 26px; }
.knup-faq-modal__question { margin-bottom: var(--knup-space-sm); color: var(--knup-color-purple-900); }
.knup-faq-modal__answer { color: var(--knup-color-gray-900); margin-bottom: var(--knup-space-sm); }
.knup-faq-modal__cta { margin-top: var(--knup-space-xs); }

/* ==========================================================================
   COMPONENT: "Soluções complementares" page — 3 blocks: services grid
   (class-knup-widget-solucoes-hero.php), always-visible FAQ trio
   (class-knup-widget-solucoes-faq.php) and a closing CTA
   (class-knup-widget-solucoes-cta.php). Every "Contratar" button on this
   page links straight to wa.me (knup_whatsapp_link() in inc/helpers.php)
   instead of opening the lead-form popup, per explicit request.
   ========================================================================== */
.knup-solucoes-hero { background: var(--knup-color-surface); padding-top: 100px; padding-bottom: 29px; }
.knup-solucoes-hero__head { max-width: 720px; margin: 0 auto; text-align: center; }
.knup-solucoes-hero__head p { margin-top: var(--knup-space-sm); }
.knup-solucoes-hero__subhead { margin: var(--knup-space-xl) 0 var(--knup-space-lg); text-align: center; }

/* ---- Spotlight interativo: troca de painel via radio/label (CSS puro,
   sem JS), abas com ícone ao lado de um palco com foto em destaque. ---- */
.knup-spotlight { position: relative; }
.knup-spotlight__radio { position: absolute; opacity: 0; pointer-events: none; }
.knup-spotlight__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--knup-space-lg); align-items: stretch; }
.knup-spotlight__stage { position: relative; min-height: 460px; border-radius: var(--knup-radius-lg); overflow: hidden; box-shadow: var(--knup-shadow-lg); }
.knup-spotlight__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease;
}
.knup-spotlight__media { position: absolute; inset: 0; }
.knup-spotlight__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.knup-spotlight__info {
	position: absolute;
	left: var(--knup-space-md);
	right: var(--knup-space-md);
	bottom: var(--knup-space-md);
	padding: var(--knup-space-md);
	/* Mais transparente que .knup-glass-light (uso normal de "glass sobre foto"),
	   mas com blur bem mais forte pra compensar — efeito "vidro fumê" pedido pelo
	   cliente. Escopo local: não toca nos tokens --knup-glass-light-* globais. */
	background: rgba(255, 255, 255, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
	backdrop-filter: blur(28px) saturate(160%);
	border-radius: var(--knup-radius-lg);
	box-shadow: var(--knup-shadow-md);
}
.knup-spotlight__info strong { display: block; font-family: var(--knup-h4-family); font-weight: 600; font-size: 1.25rem; color: var(--knup-color-purple-900); margin-bottom: 4px; }
.knup-spotlight__info p { color: var(--knup-color-gray-900); margin-bottom: var(--knup-space-sm); }

/* Overrides por serviço, só para E-mail marketing (2), Site institucional (3)
   e Blog/Portal (6): info card totalmente transparente (sem o tom branco),
   mantendo só a borda + o blur já herdado da regra base, com o texto em
   branco. Os outros 3 painéis continuam com o tom .knup-spotlight__info
   padrão. */
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(2) .knup-spotlight__info,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(3) .knup-spotlight__info,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(6) .knup-spotlight__info {
	background: rgb(255 255 255 / 0%);
	border: 1px solid rgba(255, 255, 255, 0.55);
}
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(2) .knup-spotlight__info p,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(3) .knup-spotlight__info p,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(6) .knup-spotlight__info p {
	color: var(--knup-color-white);
	margin-bottom: var(--knup-space-sm);
}
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(2) .knup-spotlight__info strong,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(3) .knup-spotlight__info strong,
.knup-spotlight__stage > .knup-spotlight__panel:nth-child(6) .knup-spotlight__info strong {
	color: var(--knup-color-white);
	margin-bottom: var(--knup-space-sm);
}

.knup-spotlight__tabs { display: flex; flex-direction: column; gap: var(--knup-space-xs); justify-content: center; }
.knup-spotlight__tab {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--knup-space-sm);
	padding: var(--knup-space-sm) var(--knup-space-md);
	border-radius: var(--knup-radius-md);
	cursor: pointer;
	transition: background 0.25s ease, box-shadow 0.25s ease;
}
.knup-spotlight__tab:hover { background: var(--knup-color-purple-50); }
.knup-spotlight__tab-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-color-purple-50);
	color: var(--knup-color-purple-800);
	flex-shrink: 0;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.knup-spotlight__tab-icon svg { width: 18px; height: 18px; }
.knup-spotlight__tab-label { font-family: var(--knup-h4-family); font-weight: 600; color: var(--knup-color-purple-900); flex: 1; transition: color 0.25s ease; }

/* Indicador da direita: anel circular que enche em 5s (ver initSpotlightTabs()
   em assets/js/theme.js) e avança pro próximo serviço sozinho — troca o rail
   fino da esquerda que o cliente não gostou por "bolas de carregamento". */
.knup-spotlight__tab-progress { width: 30px; height: 30px; flex-shrink: 0; }
.knup-spotlight__tab-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.knup-spotlight__tab-progress-track { fill: none; stroke: var(--knup-color-purple-50); stroke-width: 3; }
.knup-spotlight__tab-progress-bar {
	fill: none;
	stroke: url(#knup-spot-progress-gradient);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 88;
	stroke-dashoffset: 88;
}
.knup-spotlight__tab.is-active .knup-spotlight__tab-progress-bar { animation: knup-spot-tab-progress 5s linear forwards; }
/* Ponto central sempre visível, mesmo degradê do anel — não depende de
   .is-active, então aparece igual em qualquer aba (ativa ou não). */
.knup-spotlight__tab-progress-dot { fill: url(#knup-spot-progress-gradient); }
@keyframes knup-spot-tab-progress {
	from { stroke-dashoffset: 88; }
	to { stroke-dashoffset: 0; }
}

/* qual painel acende para cada radio marcado (continua 100% CSS) */
#knup-spot-1:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(1),
#knup-spot-2:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(2),
#knup-spot-3:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(3),
#knup-spot-4:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(4),
#knup-spot-5:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(5),
#knup-spot-6:checked ~ .knup-spotlight__layout .knup-spotlight__stage .knup-spotlight__panel:nth-child(6) { opacity: 1; visibility: visible; }

/* qual aba fica em destaque: classe .is-active aplicada por initSpotlightTabs()
   (precisa de JS de qualquer forma por causa do avanço automático em 5s). */
.knup-spotlight__tab.is-active {
	background: #ECE8FD;
	box-shadow: var(--knup-shadow-md);
}
.knup-spotlight__tab.is-active .knup-spotlight__tab-icon {
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	transform: scale(1.08);
}
.knup-spotlight__tab.is-active .knup-spotlight__tab-label { color: var(--knup-color-magenta-500); }

@media (max-width: 760px) {
	.knup-spotlight__layout { grid-template-columns: 1fr; }
	.knup-spotlight__stage { min-height: 320px; }
}

.knup-solucoes-faq {
	background: linear-gradient(180deg, var(--knup-color-surface) 0%, #ECE8FD 18%, #ECE8FD 82%, var(--knup-color-surface) 100%);
	padding-top: 159px;
	padding-bottom: 165px;
}
.knup-solucoes-faq__head { text-align: center; margin-bottom: var(--knup-space-xl); }
.knup-solucoes-faq__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--knup-space-md);
}
@media (max-width: 900px) { .knup-solucoes-faq__grid { grid-template-columns: 1fr; } }
.knup-solucoes-faq-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
}
/* Topo virou uma faixa cheia no mesmo degradê do footer (.knup-footer__shell),
   ícone + título na mesma linha, ambos brancos — clipa nos cantos arredondados
   do card via overflow:hidden no pai, sem precisar repetir o border-radius aqui. */
.knup-solucoes-faq-card__top {
	display: flex;
	align-items: center;
	gap: var(--knup-space-sm);
	padding: 19px 35px;
	background: linear-gradient(160deg, var(--knup-color-purple-900) 0%, var(--knup-color-purple-800) 100%);
}
.knup-solucoes-faq-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--knup-color-white);
}
.knup-solucoes-faq-card__icon svg { width: 24px; height: 24px; }
.knup-solucoes-faq-card__question { font-family: var(--knup-h4-family); font-weight: 600; font-size: 1.0625rem; color: var(--knup-color-white); line-height: 20px; }
/* Só a 2ª pergunta ("As soluções pontuais incluem acompanhamento contínuo?")
   pediu um padding diferente no topo — as outras 2 ficam com o padrão acima. */
.knup-solucoes-faq__grid > .knup-solucoes-faq-card:nth-child(2) .knup-solucoes-faq-card__top { padding: 29px 35px; }
.knup-solucoes-faq-card__answer { padding: var(--knup-space-md) 35px 24px; color: var(--knup-color-gray-900); }

.knup-solucoes-cta { background: var(--knup-color-surface); padding-top: 25px; padding-bottom: 55px; }
.knup-solucoes-cta__panel {
	position: relative;
	max-width: 1300px;
	margin: 0 auto;
	padding: 75px 93px;
	text-align: center;
	overflow: hidden;
}
.knup-solucoes-cta__panel h2 { position: relative; z-index: 1; margin-bottom: var(--knup-space-lg); font-size: 33px; color: white; }
.knup-solucoes-cta__panel .knup-btn { position: relative; z-index: 1; }
/* Foto abstrata real (não gradiente CSS) por trás do glass, bem desfocada.
   O próprio .knup-glass-light do painel não serve aqui: o background dele é
   pintado no PAI, e qualquer filho (mesmo com z-index baixo) sempre pinta por
   cima do background do pai — então a foto cobriria o tom branco inteiro. Por
   isso o tom + blur do glass é repetido aqui num ::after dentro do próprio
   wrapper da foto, depois da <img> no DOM, pra pintar por cima dela e deixar
   passar só um "glow" colorido ambiente, sem comprometer a leitura do texto.
   scale(1.12) evita que a borda nítida do blur apareça nas bordas do card. */
.knup-solucoes-cta__bg { position: absolute; inset: 0; z-index: 0; }
.knup-solucoes-cta__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: blur(5px);
	transform: scale(1.12);
}
/* Overlay escuro (em vez do tom claro anterior) para o h2/botão virarem
   texto branco por cima — ver .knup-solucoes-cta__panel h2 abaixo. */
.knup-solucoes-cta__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 30%);
}
.knup-solucoes-cta__glow {
	position: absolute;
	top: -120px;
	left: -80px;
	width: 360px;
	height: 360px;
	background: radial-gradient(circle, rgba(162, 8, 205, 0.30) 0%, rgba(162, 8, 205, 0) 70%);
	filter: blur(20px);
	pointer-events: none;
}
.knup-solucoes-cta__glow--alt {
	top: auto;
	left: auto;
	bottom: -140px;
	right: -100px;
	background: radial-gradient(circle, rgba(68, 34, 231, 0.25) 0%, rgba(68, 34, 231, 0) 70%);
}

/* --- Form ------------------------------------------------------------------ */
.knup-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--knup-space-sm) var(--knup-space-md);
}
.knup-form__field--50 { grid-column: span 1; }
.knup-form__field--100 { grid-column: 1 / -1; }
.knup-form__field { display: flex; flex-direction: column; gap: 6px; }
.knup-form__field label {
	font-family: var(--knup-form-family);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--knup-color-white);
}
.knup-form__required { color: #c9c9c9; }
.knup-form__field input,
.knup-form__field textarea {
	font-family: var(--knup-form-family);
	font-size: var(--knup-form-size);
	color: var(--knup-color-purple-900);
	padding: 13px var(--knup-space-sm);
	border-radius: var(--knup-radius-md);
	border: 1.5px solid rgba(22, 4, 27, 0.10);
	background: rgb(255 255 255 / 91%);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.knup-form__field input::placeholder,
.knup-form__field textarea::placeholder { color: rgba(22, 4, 27, 0.35); }
.knup-form__field input:focus,
.knup-form__field textarea:focus {
	outline: none;
	border-color: var(--knup-color-magenta-500);
	box-shadow: 0 0 0 3px rgba(162, 8, 205, 0.14);
}
.knup-form__field textarea { resize: vertical; min-height: 90px; }
.knup-form__field.is-invalid input,
.knup-form__field.is-invalid textarea { border-color: #E0316B; box-shadow: 0 0 0 3px rgba(224, 49, 107, 0.12); }

.knup-form__submit {
	width: 100%;
	justify-content: center;
	margin-top: var(--knup-space-xs);
	position: relative;
}
.knup-form__submit-spinner { display: none; width: 18px; height: 18px; animation: knup-spin 0.8s linear infinite; }
.knup-form__submit.is-loading { cursor: default; opacity: 0.85; }
.knup-form__submit.is-loading .knup-btn__arrow { display: none; }
.knup-form__submit.is-loading .knup-form__submit-spinner { display: inline-flex; }
.knup-form__error {
	margin: var(--knup-space-xs) 0 0;
	font-size: 0.9rem;
	color: var(--knup-color-white);
	text-align: center;
	min-height: 1em;
}
@keyframes knup-spin { to { transform: rotate(360deg); } }

/* --- Thank-you state -------------------------------------------------------- */
.knup-popup__thanks { text-align: center; padding-block: var(--knup-space-md); }
.knup-popup__thanks-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	margin-bottom: var(--knup-space-sm);
	animation: knup-thanks-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.knup-popup__thanks-icon svg { width: 38px; height: 38px; animation: knup-thanks-check 1.6s ease-in-out 0.4s infinite; }
.knup-popup__thanks h3 { margin-bottom: var(--knup-space-xs); color: var(--knup-color-white); }
.knup-popup__thanks p { max-width: 42ch; margin-inline: auto; color: var(--knup-color-white); }
@keyframes knup-thanks-pop {
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}
@keyframes knup-thanks-check {
	0%, 80%, 100% { transform: scale(1) rotate(0deg); }
	88% { transform: scale(1.12) rotate(-4deg); }
	94% { transform: scale(1.12) rotate(4deg); }
}
@media (max-width: 700px) {
	.knup-form { grid-template-columns: 1fr; }
	.knup-form__field--50 { grid-column: 1; }
	.knup-popup__head h2 { font-size: 1.5rem; }
}

/* ==========================================================================
   PAGE: Metodologia ARC
   Same soft-gradient section-transition technique as the Home page
   (.knup-content-split::before etc.) — each section's ::before blends down
   from the PREVIOUS section's color, so the seam isn't a hard line.
   ========================================================================== */

/* --- Bloco 1: Hero (vídeo) -------------------------------------------------- */
.knup-arc-hero {
	background: var(--knup-color-surface);
	padding-top: 85px;
	padding-bottom: 48px;
	text-align: center;
}
.knup-arc-hero__inner { max-width: 760px; margin-inline: auto; }
.knup-arc-hero__title { margin-bottom: var(--knup-space-lg); }
.knup-arc-hero__media { margin-bottom: var(--knup-space-lg); }
.knup-arc-hero__media .knup-video-card { aspect-ratio: 16/9; }
.knup-arc-hero__media .knup-video-card img { width: 100%; height: 100%; object-fit: cover; }
.knup-arc-hero__actions {
	display: flex;
	justify-content: center;
	gap: var(--knup-space-sm);
	flex-wrap: wrap;
}

/* --- Bloco 2: Pilares (gráfico animado) ------------------------------------ */
.knup-arc-pillars-visual {
	position: relative;
	background: #F6EBFA;
	padding-top: 85px;
	padding-bottom: 43px;
	overflow: hidden;
}
.knup-arc-pillars-visual::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 140px;
	background: linear-gradient(to bottom, var(--knup-color-surface) 0%, transparent 100%);
	pointer-events: none;
}
.knup-arc-pillars-visual__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 0.8fr 1fr;
	gap: var(--knup-space-xl);
	align-items: center;
}
.knup-arc-bars {
	max-width: 420px;
	margin-inline: auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: var(--knup-space-md);
	overflow: visible;
	padding-top: 64px; /* room for the ghost loop+dot that floats above each pillar */
}
.knup-arc-pillar { position: relative; flex: none; }
.knup-arc-pillar__chart { position: relative; display: block; overflow: visible; }
.knup-arc-pillar__line {
	position: absolute;
	display: block;
	pointer-events: none;
	opacity: 0.6;
}
.knup-arc-pillar__wave {
	fill: none;
	stroke: rgba(255, 255, 255, 0.55);
	stroke-width: 2;
}
.knup-arc-pillar__label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	pointer-events: none;
}
.knup-arc-pillars-visual__copy h2 { margin-bottom: var(--knup-space-md); font-size: 37px; }
.knup-arc-pillars-visual__copy p { margin-bottom: var(--knup-space-sm); max-width: 46ch; }
.knup-arc-pillars-visual__copy .knup-btn { margin-top: var(--knup-space-sm); }
@media (max-width: 900px) {
	.knup-arc-pillars-visual__grid { grid-template-columns: 1fr; }
}

/* --- Bloco 3: Benefícios (foto + lista glass) ------------------------------ */
.knup-arc-benefits {
	position: relative;
	background: var(--knup-color-white);
	padding-top: 140px;
	padding-bottom: 63px;
	overflow: hidden;
}
.knup-arc-benefits::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 140px;
	background: linear-gradient(to bottom, #F6EBFA 0%, transparent 100%);
	pointer-events: none;
}
.knup-arc-benefits__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
	gap: 50px;
	align-items: center;
}
.knup-arc-benefits__media img,
.knup-arc-benefits__media .knup-img-placeholder,
.knup-arc-benefits__video { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--knup-radius-lg); box-shadow: var(--knup-shadow-md); }
.knup-arc-benefits__video { pointer-events: none; }
.knup-arc-benefits__copy h2 { margin-bottom: var(--knup-space-md); max-width: 26ch; font-size: 35px; }
.knup-arc-benefits__tabs { margin-bottom: var(--knup-space-md); }
.knup-arc-benefits__tabs-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px var(--knup-space-sm);
	margin-bottom: var(--knup-space-sm);
}
.knup-arc-benefits__tab-btn {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--knup-space-xs) var(--knup-space-sm);
	background: none;
	border: none;
	border-radius: var(--knup-radius-md);
	cursor: pointer;
	text-align: left;
	font: inherit;
	font-size: 0.92rem;
	color: var(--knup-color-gray-900);
	opacity: 0.55;
	transition: background 0.25s ease, opacity 0.25s ease;
	width: 291px;
}
.knup-arc-benefits__tab-btn:hover { opacity: 0.85; }
.knup-arc-benefits__tab-btn.is-active {
	opacity: 1;
	background: rgba(82, 6, 105, 0.06);
	font-weight: 700;
	color: var(--knup-color-purple-900);
	width: 305px;
}
.knup-arc-benefits__tab-btn-row { display: flex; align-items: center; gap: var(--knup-space-sm); }
.knup-arc-benefits__tab-progress {
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: rgba(82, 6, 105, 0.1);
	overflow: hidden;
}
.knup-arc-benefits__tab-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--knup-gradient-brand);
}
/* The animation only matches once JS adds .is-in-view (block scrolled into
   view) — otherwise it'd start counting from page load instead of from
   whenever the user actually scrolls down to this block. */
.knup-arc-benefits__tabs.is-in-view .knup-arc-benefits__tab-btn.is-active .knup-arc-benefits__tab-progress-fill {
	animation: knup-tab-progress 5s linear forwards;
}
@keyframes knup-tab-progress {
	from { width: 0%; }
	to { width: 100%; }
}
.knup-arc-benefits__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--knup-radius-md);
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
}
.knup-arc-benefits__icon svg { width: 18px; height: 18px; }
.knup-arc-benefits__icon--sm { width: 32px; height: 32px; }
.knup-arc-benefits__icon--sm svg { width: 16px; height: 16px; }
.knup-arc-benefits__tabs-panel { position: relative; padding: 27px 27px; min-height: 45px; }
.knup-arc-benefits__tab-content { display: none; }
.knup-arc-benefits__tab-content.is-active { display: block; animation: knup-tab-fade 0.3s ease; }
.knup-arc-benefits__tab-content .knup-arc-benefits__icon { margin-bottom: var(--knup-space-sm); }
.knup-arc-benefits__tab-content .knup-arc-benefits__card-title { font-size: 1.1rem; }
.knup-arc-benefits__tab-content .knup-arc-benefits__card-desc { font-size: 0.95rem; }
@keyframes knup-tab-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
.knup-arc-benefits__card-title { display: block; font-family: var(--knup-font-heading); color: var(--knup-color-purple-900); font-size: 0.98rem; margin-bottom: 4px; }
.knup-arc-benefits__card-desc {
	margin: 0;
	font-size: 0.88rem;
	color: var(--knup-color-gray-900);
	opacity: 0.75;
}
@media (max-width: 900px) {
	.knup-arc-benefits__grid { grid-template-columns: 1fr; }
}

/* --- Bloco 4: CTA Score ARC (mockup animado) ------------------------------- */
.knup-arc-score-cta {
	position: relative;
	background: var(--knup-color-surface);
	padding-top: 55px;
	padding-bottom: 39px;
	overflow: hidden;
}
.knup-arc-score-cta::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 140px;
	background: linear-gradient(to bottom, var(--knup-color-white) 0%, transparent 100%);
	pointer-events: none;
}
.knup-arc-score-cta__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--knup-space-xl);
	align-items: center;
}
.knup-arc-score-cta__copy h2 {
	margin-bottom: var(--knup-space-md);
	font-size: 33px;
}
.knup-arc-score-cta__copy p { margin-bottom: var(--knup-space-sm); max-width: 48ch; }
.knup-arc-score-cta__copy .knup-btn { margin-top: var(--knup-space-sm); }

.knup-arc-score-visual {
	position: relative;
	width: 100%;
	height: 620px;
	max-width: 480px;
	margin-inline: auto;
}
.knup-arc-score-card-slot {
	position: absolute;
	transition: transform 0.2s ease-out;
}
.knup-arc-score-card {
	border-radius: var(--knup-radius-lg);
	box-shadow: var(--knup-shadow-lg);
	overflow: hidden;
	transform: rotate(var(--knup-rotate, 0deg));
	animation: knup-score-float 5s ease-in-out infinite;
}
.knup-arc-score-card-slot--banner { top: 40px; right: 0; width: 360px; z-index: -1; }
.knup-arc-score-card--banner {
	--knup-rotate: 0deg;
	height: 329px;
	width: 519px;
	display: flex;
	flex-direction: column;
	animation-delay: 0s;
	position: relative;
	top: 52px;
	right: 121px;
}
.knup-arc-score-card__banner-head {
	background: var(--knup-gradient-dark);
	padding: 26px 40px;
}
.knup-arc-score-card__banner-body {
	flex: 1;
	background: var(--knup-color-white);
	padding: 20px 40px 28px;
}
.knup-arc-score-card__banner-title {
	font-family: var(--knup-font-heading);
	font-weight: 700;
	font-size: 1.75rem;
	line-height: 1.35;
	color: var(--knup-color-purple-900);
	margin: 34px 0 23px;
}
.knup-arc-score-card__banner-text {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--knup-color-gray-900);
	opacity: 0.75;
	margin: 0;
}
.knup-arc-score-card__wordmark {
	font-family: var(--knup-font-heading);
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: 0.03em;
	color: var(--knup-color-white);
	white-space: nowrap;
	margin: 0;
	text-align: center;
}
.knup-arc-score-card-slot--mini { top: 128px; left: 0; width: 210px; z-index: 1; }
.knup-arc-score-card--mini {
	--knup-rotate: 0deg;
	padding: var(--knup-space-sm) var(--knup-space-sm) var(--knup-space-md);
	animation-delay: 0.6s;
	width: 242px;
	position: relative;
	bottom: 22px;
	right: 85px;
	padding: 17px 24px;
}
.knup-arc-score-card__back {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(82, 6, 105, 0.08);
	color: var(--knup-color-purple-800);
	margin-bottom: var(--knup-space-xs);
}
.knup-arc-score-card__back svg { width: 13px; height: 13px; }
.knup-arc-score-card--mini .knup-text-small { display: block; margin-bottom: var(--knup-space-xs); font-size: 0.58rem; line-height: 1.45; }
.knup-arc-score-card__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
}
.knup-arc-score-card__fields span {
	height: 7px;
	border-radius: var(--knup-radius-sm);
	background: var(--knup-color-gray-200);
}
.knup-arc-score-card-slot--result { top: 300px; left: 0; width: 360px; z-index: 0; }
.knup-arc-score-card--result {
	--knup-rotate: 0deg;
	padding: var(--knup-space-md);
	animation-delay: 1.2s;
	height: 255px;
	position: relative;
	top: 34px;
	right: 107px;
}
.knup-arc-score-card__result-score {
	font-family: var(--knup-font-heading);
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--knup-color-purple-900);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
}
.knup-arc-score-card__result-score svg { width: 16px; height: 16px; color: var(--knup-color-purple-800); flex: none; }
.knup-arc-score-card--result .knup-text-small { display: block; margin-bottom: var(--knup-space-xs); }
.knup-arc-score-card__placeholder-lines { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--knup-space-xs); }
.knup-arc-score-card__placeholder-lines span { height: 8px; border-radius: var(--knup-radius-sm); background: var(--knup-color-gray-200); }
.knup-arc-score-card__placeholder-lines span:last-child { width: 70%; }
.knup-arc-score-card__image {
	border-radius: var(--knup-radius-md);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	width: 100%;
	height: 120px;
}
.knup-arc-score-card__image img,
.knup-arc-score-card__image .knup-img-placeholder { aspect-ratio: 16/9; }
.knup-arc-score-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes knup-score-float {
	0%, 100% { transform: rotate(var(--knup-rotate, 0deg)) translateY(0); }
	50% { transform: rotate(var(--knup-rotate, 0deg)) translateY(-10px); }
}
@media (max-width: 560px) {
	.knup-arc-score-visual { height: 700px; }
	.knup-arc-score-card-slot--banner,
	.knup-arc-score-card-slot--mini,
	.knup-arc-score-card-slot--result { width: 86%; left: 2%; right: auto; }
	.knup-arc-score-card-slot--banner { top: 30px; }
	.knup-arc-score-card-slot--mini { top: 110px; }
	.knup-arc-score-card-slot--result { top: 360px; }
}
@media (max-width: 900px) {
	.knup-arc-score-cta__grid { grid-template-columns: 1fr; }
	.knup-arc-score-visual { margin-top: var(--knup-space-lg); }
}

/* ==========================================================================
   PAGE: Quero Contratar
   ========================================================================== */

/* --- Bloco 1: Hero --------------------------------------------------------- */
.knup-contratar-hero {
	background: var(--knup-color-surface);
	padding: 100px 0 60px;
	text-align: center;
}
.knup-contratar-hero__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(162, 8, 205, 0.08);
	border: 1px solid rgba(162, 8, 205, 0.18);
	border-radius: var(--knup-radius-pill);
	padding: 6px 18px;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--knup-color-magenta-500);
	margin-bottom: var(--knup-space-sm);
	letter-spacing: 0.03em;
}
.knup-contratar-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	margin: 0 auto var(--knup-space-sm);
	line-height: 1.1;
	white-space: nowrap;
}
.knup-contratar-hero p {
	max-width: 52ch;
	margin: 0 auto;
	color: rgba(22, 4, 27, 0.65);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* --- Bloco 2: Steps (glass cards) ----------------------------------------- */
.knup-contratar-steps {
	background: var(--knup-color-surface);
	padding: 40px 80px 30px;
}
.knup-contratar-steps__head {
	text-align: center;
	margin-bottom: 52px;
}
.knup-contratar-steps__head h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	max-width: 42ch;
	margin: 0 auto;
	color: rgba(22, 4, 27, 0.72);
	font-weight: 500;
}
.knup-contratar-steps__outer { position: relative; }
.knup-contratar-steps__spine { display: none; } /* spine não usado no layout v2 */
.knup-contratar-steps__spine-fill { display: none; }
.knup-contratar-steps__line {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: visible;
	pointer-events: none;
}
.knup-contratar-steps__line-path {
	fill: none;
	stroke: url(#knup-steps-line-gradient);
	stroke-width: 3;
	stroke-linecap: round;
	filter: drop-shadow(0 0 6px rgba(162, 8, 205, 0.3));
	transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.knup-contratar-steps__track {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
@media (max-width: 900px) {
	.knup-contratar-steps__line { display: none; }
}

/* Glass card */
.knup-contratar-step {
	position: relative;
	background: rgba(255, 255, 255, 0.62);
	border: 1px solid rgba(162, 8, 205, 0.10);
	border-radius: 59px 8px 59px 8px;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 28px 22px 26px;
	overflow: hidden;
	cursor: default;
	box-shadow: 0 2px 16px rgba(162, 8, 205, 0.04);
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.5s ease, transform 0.5s ease,
	            box-shadow 0.35s ease, border-color 0.35s ease;
}
.knup-contratar-step.is-revealed {
	opacity: 1;
	transform: none;
}
.knup-contratar-step:hover {
	box-shadow: 0 14px 44px rgba(162, 8, 205, 0.12);
	border-color: rgba(162, 8, 205, 0.22);
}
.knup-contratar-step.is-active-step {
	border-color: rgba(162, 8, 205, 0.28);
	box-shadow: 0 10px 36px rgba(162, 8, 205, 0.14);
}

/* Ghost number watermark */
.knup-contratar-step__bg-num {
	position: absolute;
	top: -8px;
	right: 10px;
	font-size: 100px;
	font-weight: 800;
	line-height: 1;
	background: var(--knup-gradient-brand);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.35s ease;
}
.knup-contratar-step:hover .knup-contratar-step__bg-num { opacity: 0.13; }

/* "Passo N" pill */
.knup-contratar-step__label {
	display: inline-block;
	background: rgba(162, 8, 205, 0.08);
	border: 1px solid rgba(162, 8, 205, 0.15);
	border-radius: var(--knup-radius-pill);
	padding: 4px 11px;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--knup-color-magenta-500);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 18px;
}

/* Icon box */
.knup-contratar-step__icon {
	width: 46px;
	height: 46px;
	border-radius: 13px;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	box-shadow: 0 4px 14px rgba(162, 8, 205, 0.26);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.knup-contratar-step__icon svg { width: 21px; height: 21px; }
.knup-contratar-step:hover .knup-contratar-step__icon {
	box-shadow: 0 7px 22px rgba(162, 8, 205, 0.42);
	transform: scale(1.08);
}

.knup-contratar-step__title {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--knup-color-purple-900);
	margin-bottom: 8px;
}
.knup-contratar-step__desc {
	font-size: 0.875rem;
	color: rgba(22, 4, 27, 0.6);
	line-height: 1.65;
}

@media (max-width: 900px) {
	.knup-contratar-steps__track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.knup-contratar-steps__track {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}
	.knup-contratar-step { opacity: 1; transform: none; }
}

/* --- Bloco 3: Formulário --------------------------------------------------- */
/* Gradient inline como background — mais confiável que ::before/::after
   sobrepostos (evita seam visível na transição com o Score ARC abaixo) */
.knup-contratar-form-section {
	position: relative;
	background: linear-gradient(180deg, var(--knup-color-surface) 0%, #F6EBFA 13%, #F6EBFA 87%, var(--knup-color-surface) 100%);
	padding: 117px 0 100px;
}
.knup-contratar-form-section__inner {
	position: relative;
	z-index: 1;
}
.knup-contratar-form-section__grid {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--knup-space-xl);
	align-items: start;
}
.knup-contratar-form-section__copy h2 {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: var(--knup-space-sm);
	line-height: 1.2;
}
.knup-contratar-form-section__copy > p {
	color: rgba(22, 4, 27, 0.65);
	margin-bottom: var(--knup-space-md);
	max-width: 40ch;
	line-height: 1.7;
}
.knup-contratar-copy-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.knup-contratar-copy-list__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.95rem;
	color: var(--knup-color-purple-900);
	font-weight: 500;
	line-height: 1.45;
}
.knup-contratar-copy-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	flex-shrink: 0;
	margin-top: 2px;
}
.knup-contratar-copy-list__icon svg { width: 13px; height: 13px; }
.knup-contratar-form-wrap {
	background: rgba(255, 255, 255, 0.65);
	border: 1px solid rgba(162, 8, 205, 0.12);
	border-radius: var(--knup-radius-lg);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	padding: var(--knup-space-lg);
	box-shadow: 0 8px 48px rgba(162, 8, 205, 0.08);
}
.knup-contratar-form-wrap .knup-form__field label {
	color: var(--knup-color-purple-900);
}
.knup-contratar-form-wrap .knup-form__required {
	color: rgba(22, 4, 27, 0.35);
}
.knup-contratar-form-wrap .knup-form__error { color: #E0316B; }
.knup-contratar-form-thanks {
	text-align: center;
	padding: var(--knup-space-lg) var(--knup-space-md);
}
.knup-contratar-form-thanks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--knup-gradient-brand);
	color: var(--knup-color-white);
	margin-bottom: var(--knup-space-sm);
	animation: knup-thanks-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.knup-contratar-form-thanks__icon svg { width: 34px; height: 34px; }
.knup-contratar-form-thanks h3 {
	color: var(--knup-color-purple-900);
	margin-bottom: var(--knup-space-xs);
}
.knup-contratar-form-thanks p {
	color: rgba(22, 4, 27, 0.65);
	max-width: 36ch;
	margin-inline: auto;
}
@media (max-width: 900px) {
	.knup-contratar-form-section__grid { grid-template-columns: 1fr; }
}

/* Score ARC CTA na página contratar: o ::before herda a cor branca do tema
   original, mas aqui o bloco acima termina em var(--knup-color-surface) — sobrescreve p/ combinar */
.knup-contratar-score-cta.knup-arc-score-cta::before {
	background: linear-gradient(to bottom, var(--knup-color-surface) 0%, transparent 100%);
}
.knup-contratar-score-cta {
	padding-top: 0px;
}

/* ==========================================================================
   COMPONENT: Blog category subnav — sticky bar below header with category
   dropdowns (left) and search input (right). Preview-visible only; in the
   real theme the categories come from WordPress taxonomy.
   ========================================================================== */
.knup-blog-subnav {
	position: sticky;
	top: 72px;
	z-index: 90;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(22, 4, 27, 0.08);
	box-shadow: 0 2px 12px rgba(22, 4, 27, 0.04);
}
.knup-blog-subnav__inner {
	display: flex;
	align-items: center;
	height: 52px;
	gap: 24px;
}
.knup-blog-subnav__cats {
	display: flex;
	align-items: center;
	gap: 2px;
}
.knup-blog-subnav__item { position: relative; }
.knup-blog-subnav__btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: none;
	font-family: var(--knup-font-body);
	font-size: 0.9rem;
	font-weight: 500;
	color: rgba(22, 4, 27, 0.72);
	padding: 8px 14px;
	border-radius: 8px;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease;
}
.knup-blog-subnav__btn:hover,
.knup-blog-subnav__item.is-open .knup-blog-subnav__btn {
	color: var(--knup-color-magenta-500);
	background: rgba(162, 8, 205, 0.06);
}
.knup-blog-subnav__chevron {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.knup-blog-subnav__item.is-open .knup-blog-subnav__chevron,
.knup-blog-subnav__item:hover .knup-blog-subnav__chevron { transform: rotate(180deg); }
.knup-blog-subnav__dropdown {
	position: absolute;
	top: calc(100% + 9px);
	left: 0;
	min-width: 210px;
	background: var(--knup-color-white);
	border: 1px solid rgba(22, 4, 27, 0.08);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(22, 4, 27, 0.10);
	padding: 6px 0;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: var(--knup-z-dropdown);
}
.knup-blog-subnav__dropdown::before {
	content: '';
	position: absolute;
	top: -9px;
	left: 0;
	right: 0;
	height: 9px;
}
.knup-blog-subnav__item.is-open .knup-blog-subnav__dropdown,
.knup-blog-subnav__item:hover .knup-blog-subnav__dropdown {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.knup-blog-subnav__dropdown a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	font-size: 0.875rem;
	color: rgba(22, 4, 27, 0.72);
	text-decoration: none;
	transition: color 0.15s ease, background 0.15s ease;
}
.knup-blog-subnav__dropdown a::before {
	content: '›';
	font-size: 1.1rem;
	color: var(--knup-color-magenta-500);
	line-height: 1;
}
/* Dropdown de redes sociais: troca › por ícone SVG */
.knup-blog-subnav__dropdown--social a::before { display: none; }
.knup-blog-subnav__social-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.knup-blog-subnav__social-icon svg { width: 16px; height: 16px; }
.knup-blog-subnav__dropdown a:hover {
	color: var(--knup-color-magenta-500);
	background: rgba(162, 8, 205, 0.04);
}
.knup-blog-subnav__search { position: relative; flex-shrink: 0; }
.knup-blog-subnav__search input {
	width: 230px;
	height: 38px;
	padding: 0 40px 0 16px;
	border: 1px solid rgba(22, 4, 27, 0.12);
	border-radius: 20px;
	font-family: var(--knup-font-body);
	font-size: 0.875rem;
	background: var(--knup-color-surface);
	color: rgba(22, 4, 27, 0.80);
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.knup-blog-subnav__search input:focus {
	border-color: var(--knup-color-magenta-500);
	box-shadow: 0 0 0 3px rgba(162, 8, 205, 0.10);
	background: var(--knup-color-white);
}
.knup-blog-subnav__search input::placeholder { color: rgba(22, 4, 27, 0.38); }
.knup-blog-subnav__search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.knup-blog-subnav__search-clear {
	position: absolute;
	right: 38px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	color: var(--knup-color-magenta-500);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, color 0.15s ease;
	border-radius: 50%;
}
.knup-blog-subnav__search-clear svg { width: 15px; height: 15px; }
.knup-blog-subnav__search-clear:hover { color: var(--knup-color-purple-800); }
.knup-blog-subnav__search-clear.is-visible { opacity: 1; pointer-events: auto; }
.knup-blog-subnav__search-icon {
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(22, 4, 27, 0.38);
	pointer-events: none;
	display: flex;
	align-items: center;
}
.knup-blog-subnav__search-icon svg { width: 16px; height: 16px; }
/* Dropdown de resultados de busca */
.knup-blog-search-results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 380px;
	max-height: 480px;
	overflow-y: auto;
	background: var(--knup-color-white);
	border: 1px solid rgba(22, 4, 27, 0.08);
	border-radius: 16px;
	box-shadow: 0 8px 40px rgba(22, 4, 27, 0.13);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: var(--knup-z-subnav);
}
.knup-blog-search-results.is-open { opacity: 1; transform: none; pointer-events: auto; }
.knup-blog-search-results__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px solid rgba(22, 4, 27, 0.05);
	transition: background 0.15s ease;
}
.knup-blog-search-results__item:last-of-type { border-bottom: none; }
.knup-blog-search-results__item:hover { background: rgba(162, 8, 205, 0.04); }
.knup-blog-search-results__thumb {
	width: 56px;
	height: 42px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
	background: #f0f0f4;
}
.knup-blog-search-results__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.knup-blog-search-results__cat { font-size: 0.72rem; }
.knup-blog-search-results__title {
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(22, 4, 27, 0.88);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.knup-blog-search-results__empty { padding: 20px 16px; font-size: 0.875rem; color: rgba(22, 4, 27, 0.45); text-align: center; }
.knup-blog-search-results__footer { padding: 10px 14px; border-top: 1px solid rgba(22, 4, 27, 0.06); text-align: center; }
.knup-blog-search-results__footer a { font-size: 0.8rem; color: var(--knup-color-magenta-500); font-weight: 600; text-decoration: none; }
.knup-blog-search-results__footer a:hover { text-decoration: underline; }
@media (max-width: 768px) {
	.knup-blog-subnav__inner { height: auto; padding-block: 10px; flex-wrap: wrap; gap: 10px; }
	.knup-blog-subnav__cta { display: none !important; }
	.knup-blog-subnav__right { width: 100%; margin-left: 0; }
	.knup-blog-subnav__search { width: 100%; }
	.knup-blog-subnav__search input { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG UNIFIED STICKY HEADER
   Novos elementos do subnav (logo + CTA) + transformação no scroll.
   Body class .knup-blog-page é adicionada pelo inline script do blog.html.
   ─────────────────────────────────────────────────────────────────────────── */
/* Logo: oculta por padrão, abre no modo unificado */
.knup-blog-subnav__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	overflow: hidden;
	max-width: 0;
	opacity: 0;
	margin-right: -24px;
	text-decoration: none;
	transition: opacity 0.3s ease, max-width 0.38s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.knup-blog-subnav__logo img { height: 32px; width: auto; display: block; }
/* Wrapper direito: botão Contratar + busca */
.knup-blog-subnav__right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
	margin-left: auto;
}
/* CTA: oculto por padrão, desliza de cima no modo unificado */
.knup-blog-subnav__cta {
	flex-shrink: 0;
	opacity: 0;
	transform: translateY(-14px);
	pointer-events: none;
	transition: opacity 0.28s ease 0.06s, transform 0.28s ease 0.06s;
}
/* Header colapsa no scroll (blog page only — desktop) */
.knup-blog-page [data-knup-header] {
	overflow: hidden;
	transition: box-shadow 0.3s ease, border-color 0.3s ease,
	            height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}
.knup-blog-page [data-knup-header].is-scrolled {
	opacity: 0;
	pointer-events: none;
}
/* Mobile: header permanece visível e subnav rola com a página */
@media (max-width: 1024px) {
	.knup-blog-page [data-knup-header].is-scrolled {
		opacity: 1;
		pointer-events: auto;
	}
	.knup-blog-subnav {
		position: relative;
		top: auto;
	}
}
/* Subnav recebe transição de top para deslizar suavemente */
.knup-blog-page .knup-blog-subnav {
	transition: top 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;
}
/* Modo unificado: logo e CTA surgem */
.knup-blog-page .knup-blog-subnav.is-unified { box-shadow: 0 2px 24px rgba(22, 4, 27, 0.12); }
.knup-blog-page .knup-blog-subnav.is-unified .knup-blog-subnav__inner { height: 70px; }
.knup-blog-page .knup-blog-subnav.is-unified .knup-blog-subnav__logo { max-width: 140px; opacity: 1; margin-right: 0; }
.knup-blog-page .knup-blog-subnav.is-unified .knup-blog-subnav__cta {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ==========================================================================
   PAGE: Blog (preview/blog.html) — grade de posts inspirada no blog da mLabs,
   com header2/footer padrão e fundo único var(--knup-color-surface). Os posts (16 fixos + os
   carregados via infinite scroll) são mock só do preview — no tema real esse
   markup é gerado pelo WP_Query do template de blog.
   ========================================================================== */
.knup-blog-hero {
	background: var(--knup-gradient-brand);
	padding: 50px 0 150px;
	margin: 10px;
	border-radius: var(--knup-radius-section);
}
.knup-blog-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(255, 255, 255, 0.14);
	border: 1px solid rgba(255, 255, 255, 0.28);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--knup-radius-pill);
	padding: 6px 18px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: var(--knup-space-sm);
}
.knup-blog-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin-bottom: var(--knup-space-sm); color: var(--knup-color-white); }
.knup-blog-hero p { max-width: 62ch; color: rgba(255, 255, 255, 0.68); font-size: 1.05rem; line-height: 1.7; }

.knup-blog-featured { background: transparent; padding-bottom: 0px; position: relative; bottom: 135px; }
.knup-blog-featured__grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 24px; align-items: stretch; }
.knup-blog-featured__side { display: flex; flex-direction: column; gap: 16px; }

.knup-blog-card--featured .knup-blog-card__media { aspect-ratio: 16/10; }
.knup-blog-card--featured .knup-blog-card__body h4 { font-size: 1.5rem; line-height: 1.3; }
.knup-blog-card--featured .knup-blog-card__body p { font-size: 1rem; }

.knup-blog-card--mini { display: flex; }
.knup-blog-card--mini .knup-blog-card__media { width: 128px; flex-shrink: 0; aspect-ratio: 1/1; }
.knup-blog-card--mini .knup-blog-card__body { padding: 14px 16px; flex: 1; min-width: 0; }
.knup-blog-card--mini .knup-blog-card__body h4 {
	font-size: 0.92rem;
	line-height: 1.35;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.knup-blog-card--mini .knup-blog-card__body p { display: none; }
.knup-blog-card--mini .knup-blog-card__meta-row { margin-bottom: 6px; }

.knup-blog-card__author { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.knup-blog-card__author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.knup-blog-card__author-name { font-size: 0.78rem; font-weight: 600; color: var(--knup-color-purple-900); }
.knup-blog-card__author-date { margin-left: auto; font-size: 0.74rem; color: var(--knup-color-gray-400); white-space: nowrap; }
.knup-blog-card--mini .knup-blog-card__author-name { display: none; }

.knup-blog-all { background: var(--knup-color-white); padding-top: 0px; padding-bottom: var(--knup-space-xl); margin-top: -39px; }
.knup-blog-all__heading-row { display: flex; align-items: center; gap: 10px; margin-bottom: var(--knup-space-lg); }
.knup-blog-all__dots { display: flex; align-items: center; gap: 4px; }
.knup-blog-all__dots span { display: block; border-radius: 50%; background: var(--knup-gradient-brand); }
.knup-blog-all__dots span:nth-child(1) { width: 6px; height: 6px; }
.knup-blog-all__dots span:nth-child(2) { width: 8px; height: 8px; }
.knup-blog-all__dots span:nth-child(3) { width: 10px; height: 10px; }
.knup-blog-all__heading-row h2 { margin: 0; }

.knup-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.knup-blog-loader { display: none; align-items: center; justify-content: center; gap: 8px; padding: 36px 0 8px; }
.knup-blog-loader__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--knup-color-magenta-500); animation: knup-blog-loader-bounce 1s ease-in-out infinite; }
.knup-blog-loader__dot:nth-child(2) { animation-delay: 0.15s; }
.knup-blog-loader__dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes knup-blog-loader-bounce {
	0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
	40% { opacity: 1; transform: translateY(-5px); }
}

.knup-blog-end { display: none; text-align: center; padding: 30px 0 6px; color: rgba(22, 4, 27, 0.4); font-size: 0.88rem; }

@media (max-width: 900px) {
	.knup-blog-featured__grid { grid-template-columns: 1fr; }
	.knup-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.knup-blog-grid { grid-template-columns: 1fr; }
	.knup-blog-card--mini .knup-blog-card__media { width: 96px; }
}

/* CTA "Ver todos os artigos" abaixo do carrossel da Home */
.knup-blog-teaser__viewall { display: flex; justify-content: center; margin-top: var(--knup-space-lg); }

/* ═══════════════════════════════════════════════════════════
   SINGLE POST — v2
   ═══════════════════════════════════════════════════════════ */

/* ── Header: cover image left / info right ── */
.knup-post-header { background: var(--knup-color-white); padding: 32px 0 0; }
.knup-post-header__grid {
	display: grid;
	grid-template-columns: 56% 1fr;
	gap: 52px;
	align-items: center;
	min-height: 420px;
}
.knup-post-header__cover {
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	width: 100%;
}
.knup-post-header__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.knup-post-header__info { padding: 16px 0; }
.knup-post-header__breadcrumb {
	display: flex; align-items: center; gap: 6px;
	font-size: 0.8rem; color: rgba(22,4,27,0.42); margin-bottom: 20px;
}
.knup-post-header__breadcrumb a { color: rgba(22,4,27,0.42); text-decoration: none; }
.knup-post-header__breadcrumb a:hover { color: var(--knup-color-magenta-500, #9608be); }
.knup-post-header__breadcrumb svg { width: 12px; height: 12px; flex-shrink: 0; }
.knup-post-header__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.knup-post-header__reading-time { color: rgba(22,4,27,0.48); font-size: 0.875rem; }
.knup-post-header h1 {
	color: var(--knup-color-text, #1a0423); margin-bottom: 28px;
	line-height: 1.18; font-size: clamp(1.6rem, 2.8vw, 2.35rem);
}
.knup-post-header__author { display: flex; align-items: center; gap: 12px; }
.knup-post-header__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.knup-post-header__author-name { display: block; color: var(--knup-color-text, #1a0423); font-size: 0.875rem; font-weight: 600; }
.knup-post-header__author-date { display: block; color: rgba(22,4,27,0.42); font-size: 0.8rem; margin-top: 2px; }

/* ── Content + sidebar grid ── */
.knup-post-content { background: var(--knup-color-white); padding: 48px 0 0; }
.knup-post-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
	align-items: start;
	padding-bottom: var(--knup-space-xl);
}
.knup-post-main { min-width: 0; }

/* ── Article typography ── */
.knup-post-body { font-size: 1.0625rem; line-height: 1.82; color: var(--knup-color-text, #1a0423); }
.knup-post-body > p { margin-bottom: 1.4em; }
.knup-post-body > p:first-child { font-size: 1.125rem; font-weight: 500; color: #2a0535; }
.knup-post-body h2 {
	font-size: 1.5rem; font-weight: 700; line-height: 1.25;
	color: var(--knup-color-text, #1a0423); margin: 2.25em 0 0.7em;
}
.knup-post-body h3 {
	font-size: 1.2rem; font-weight: 600; line-height: 1.3;
	color: var(--knup-color-text, #1a0423); margin: 1.75em 0 0.55em;
}
.knup-post-body ul,
.knup-post-body ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.knup-post-body li { margin-bottom: 0.4em; }
.knup-post-body strong { font-weight: 600; }
.knup-post-body a { color: var(--knup-color-magenta-500, #9608be); text-decoration-color: rgba(150,8,190,0.3); text-underline-offset: 3px; }
.knup-post-body a:hover { text-decoration-color: var(--knup-color-magenta-500, #9608be); }
.knup-post-body blockquote {
	border-left: 3px solid var(--knup-color-magenta-500, #9608be);
	margin: 2em 0; padding: 2px 0 2px 22px;
}
.knup-post-body blockquote p { font-size: 1.125rem; font-style: italic; color: #4a1260; margin-bottom: 0; }

/* ── Share row ── */
.knup-post-share {
	display: flex; align-items: center; gap: 10px;
	padding: 20px 0; border-top: 1px solid rgba(22,4,27,0.08);
	border-bottom: 1px solid rgba(22,4,27,0.08); margin-top: 48px;
}
.knup-post-share__label { font-size: 0.875rem; font-weight: 600; color: var(--knup-color-text, #1a0423); margin-right: 4px; }
.knup-post-share a,
.knup-post-share button {
	display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(150,8,190,0.07); color: var(--knup-color-magenta-500, #9608be);
	transition: background 0.2s, color 0.2s;
	border: none; cursor: pointer; padding: 0; flex-shrink: 0;
}
.knup-post-share a:hover,
.knup-post-share button:hover { background: var(--knup-color-magenta-500, #9608be); color: var(--knup-color-white); }
.knup-post-share a svg,
.knup-post-share button svg { width: 16px; height: 16px; }
/* ── Share toast ── */
.knup-share-toast {
	position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(12px);
	background: #1a0423; color: var(--knup-color-white); font-size: 0.82rem; font-weight: 500;
	padding: 10px 20px; border-radius: 100px; white-space: nowrap;
	opacity: 0; pointer-events: none; transition: opacity 0.22s, transform 0.22s; z-index: var(--knup-z-overlay);
}
.knup-share-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Comments section ── */
.knup-post-comments { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(22,4,27,0.08); }
.knup-post-comments__title {
	font-size: 1.25rem; font-weight: 700; margin-bottom: 28px;
	display: flex; align-items: baseline; gap: 10px;
}
.knup-post-comments__count { color: rgba(22,4,27,0.32); font-size: 1rem; font-weight: 400; }
.knup-comments-list { margin-bottom: 36px; }
.knup-comments-empty { color: rgba(22,4,27,0.38); font-size: 0.9rem; padding: 16px 0; display: none; }

.knup-comment { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid rgba(22,4,27,0.06); }
.knup-comment:first-of-type { border-top: 1px solid rgba(22,4,27,0.06); }
.knup-comment__avatar {
	width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--knup-color-white); font-size: 1.05rem; font-weight: 700;
}
.knup-comment__body { flex: 1; min-width: 0; }
.knup-comment__header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.knup-comment__name { font-size: 0.9rem; font-weight: 600; color: var(--knup-color-text, #1a0423); }
.knup-comment__date { font-size: 0.775rem; color: rgba(22,4,27,0.38); }
.knup-comment__text { font-size: 0.9375rem; line-height: 1.65; color: var(--knup-color-text, #1a0423); margin: 0; }

.knup-comment-form { background: var(--knup-color-surface); border-radius: 20px; padding: 28px; }
.knup-comment-form__title { font-size: 1rem; font-weight: 700; color: var(--knup-color-text, #1a0423); margin-bottom: 18px; }
.knup-comment-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.knup-comment-form input,
.knup-comment-form textarea {
	width: 100%; padding: 12px 16px; border-radius: 10px;
	border: 1.5px solid rgba(22,4,27,0.1); background: var(--knup-color-white);
	font-size: 0.9rem; color: var(--knup-color-text, #1a0423); outline: none;
	font-family: inherit; transition: border-color 0.2s; box-sizing: border-box;
}
.knup-comment-form input:focus,
.knup-comment-form textarea:focus { border-color: var(--knup-color-magenta-500, #9608be); }
.knup-comment-form textarea { resize: vertical; min-height: 100px; margin-bottom: 16px; }
.knup-comment-form__success { color: #16a34a; font-size: 0.875rem; margin-top: 12px; display: none; }

/* ── Sidebar ── */
.knup-post-sidebar { position: sticky; top: 120px; }
.knup-post-sidebar__widget { margin-bottom: 24px; }
.knup-post-sidebar__search {
	position: relative; display: flex; align-items: center;
	background: var(--knup-color-surface); border-radius: 100px;
	padding: 0 16px 0 18px; height: 48px;
	border: 1.5px solid rgba(22,4,27,0.08);
}
.knup-post-sidebar__search input {
	flex: 1; border: none; background: transparent; outline: none;
	font-size: 0.875rem; color: var(--knup-color-text, #1a0423); font-family: inherit;
}
.knup-post-sidebar__search input::placeholder { color: rgba(22,4,27,0.35); }
.knup-post-sidebar__search-icon { color: rgba(22,4,27,0.32); display: flex; }
.knup-post-sidebar__search-icon svg { width: 18px; height: 18px; }

.knup-post-sidebar__inner { background: var(--knup-color-surface); border-radius: 16px; padding: 22px; }
.knup-post-sidebar__widget-title {
	font-size: 0.875rem; font-weight: 700; color: var(--knup-color-text, #1a0423);
	margin-bottom: 14px; padding-bottom: 10px;
	border-bottom: 1.5px solid rgba(22,4,27,0.07);
}
.knup-post-sidebar__cats { list-style: none; padding: 0; margin: 0; }
.knup-post-sidebar__cats li { display: flex; align-items: center; justify-content: space-between; }
.knup-post-sidebar__cats li + li { border-top: 1px solid rgba(22,4,27,0.05); }
.knup-post-sidebar__cats a {
	display: block; padding: 9px 0; color: var(--knup-color-text, #1a0423);
	font-size: 0.875rem; text-decoration: none; transition: color 0.2s; flex: 1;
}
.knup-post-sidebar__cats a:hover { color: var(--knup-color-magenta-500, #9608be); }
.knup-post-sidebar__cats-count {
	font-size: 0.75rem; color: rgba(22,4,27,0.35); font-weight: 600;
	background: rgba(22,4,27,0.06); border-radius: 100px;
	padding: 2px 8px; min-width: 26px; text-align: center; flex-shrink: 0;
}
.knup-post-sidebar__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.knup-post-sidebar__tag {
	display: inline-block; padding: 5px 13px; border-radius: 100px;
	font-size: 0.8rem; font-weight: 500;
	background: rgba(150,8,190,0.07); color: var(--knup-color-magenta-500, #9608be);
	text-decoration: none; border: 1px solid rgba(150,8,190,0.14);
	transition: background 0.2s, color 0.2s;
}
.knup-post-sidebar__tag:hover { background: var(--knup-color-magenta-500, #9608be); color: var(--knup-color-white); }

/* ── Related posts: gradient blend at top ── */
.knup-post-related {
	background: var(--knup-color-surface);
	padding: var(--knup-space-xl) 0;
	position: relative;
}
.knup-post-related::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; height: 70px;
	background: linear-gradient(to bottom, var(--knup-color-white) 0%, var(--knup-color-surface) 100%);
	pointer-events: none;
}
.knup-post-related__header {
	position: relative; z-index: 1;
	display: flex; align-items: baseline; gap: 16px;
	margin-bottom: 32px; padding-top: 16px;
}
.knup-post-related__title { font-size: 1.375rem; font-weight: 700; }

/* ── Post-page footer matches related section ── */
.knup-post-page .knup-footer { background: var(--knup-color-surface); padding-top: 0; }

@media (max-width: 1024px) {
	.knup-post-layout { grid-template-columns: 1fr; }
	.knup-post-sidebar { position: static; }
}
@media (max-width: 860px) {
	.knup-post-header__grid { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
	.knup-post-header__cover { aspect-ratio: 16 / 9; }
}
@media (max-width: 600px) {
	.knup-post-header h1 { font-size: 1.45rem; }
	.knup-comment-form__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVIDADE MOBILE — adições puras, nada aqui toca no desktop.
   Todos os blocos são @media max-width (não afetam ≥ breakpoint).
   ========================================================================== */

/* ── Nav overlay (backdrop semitransparente atrás do drawer) ──────────────── */
.knup-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(22, 4, 27, 0.48);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: var(--knup-z-header);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s ease;
}
.knup-nav-overlay.is-open {
	opacity: 1;
	pointer-events: all;
}

/* ── Menu toggle: ícone SVG moderno (dois traços assimétricos) ────────────── */
/* Hide legacy three-span bars; the new SVGs take their place */
.knup-header__nav-toggle span,
.knup-header-home__nav-toggle span { display: none; }

.knup-nav-icon-menu,
.knup-nav-icon-close { display: flex; align-items: center; justify-content: center; }
.knup-nav-icon-close { display: none; }

.knup-header__nav-toggle.is-open .knup-nav-icon-menu,
.knup-header-home__nav-toggle.is-open .knup-nav-icon-menu { display: none; }
.knup-header__nav-toggle.is-open .knup-nav-icon-close,
.knup-header-home__nav-toggle.is-open .knup-nav-icon-close { display: flex; }

/* ── Modern side drawer (override basic styles) ───────────────────────────── */
.knup-mobile-drawer {
	background: rgba(252, 250, 255, 0.97);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	backdrop-filter: blur(28px) saturate(180%);
	border-left: 1px solid rgba(162, 8, 205, 0.12);
	border-radius: 28px 0 0 28px;
	width: min(380px, 88vw);
	padding: 0;
	box-shadow: -8px 0 48px rgba(22, 4, 27, 0.18);
	/* top accent line */
	outline: none;
}
.knup-mobile-drawer::before {
	content: '';
	display: block;
	height: 4px;
	border-radius: 28px 0 0 0;
	width: 96%;
	position: relative;
	left: 14px;
	background: var(--knup-gradient-brand);
}
.knup-mobile-drawer.is-open { transform: translateX(0); }

/* Drawer: cabeçalho com logo + botão fechar */
.knup-mobile-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 16px;
	border-bottom: 1px solid rgba(22, 4, 27, 0.06);
}
.knup-mobile-drawer__logo img {
	height: 28px;
	width: auto;
	display: block;
}
.knup-mobile-drawer__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: var(--knup-radius-pill);
	background: var(--knup-color-purple-50);
	color: var(--knup-color-purple-800);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
	flex-shrink: 0;
}
.knup-mobile-drawer__close:hover {
	background: var(--knup-color-purple-100);
	transform: rotate(90deg);
}
.knup-mobile-drawer__close svg { width: 18px; height: 18px; }

/* Drawer: área de navegação rolável */
.knup-mobile-drawer__nav {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px 12px;
}
.knup-mobile-drawer__nav ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.knup-mobile-drawer__nav ul a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: var(--knup-radius-md);
	font-family: var(--knup-menu-family);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--knup-color-gray-900);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
	position: relative;
}
.knup-mobile-drawer__nav ul a::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 3px;
	border-radius: 3px;
	background: var(--knup-gradient-brand);
	opacity: 0;
	transform: scaleY(0.6);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.knup-mobile-drawer__nav ul a:hover,
.knup-mobile-drawer__nav ul a.is-active {
	background: rgba(162, 8, 205, 0.06);
	color: var(--knup-color-magenta-500);
	padding-left: 22px;
}
.knup-mobile-drawer__nav ul a:hover::before,
.knup-mobile-drawer__nav ul a.is-active::before {
	opacity: 1;
	transform: scaleY(1);
}

/* Drawer: rodapé com CTA */
.knup-mobile-drawer__foot {
	padding: 12px 24px 28px;
	border-top: 1px solid rgba(22, 4, 27, 0.06);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.knup-mobile-drawer__foot .knup-btn {
	width: 100%;
	justify-content: center;
}

/* Make the drawer a flex column so footer sticks to bottom */
.knup-mobile-drawer {
	display: flex;
	flex-direction: column;
}

/* ── @media ≤ 1024px: colapso do header ──────────────────────────────────── */
@media (max-width: 1024px) {
	/* Remove botão "Contratar" do rodapé do menu lateral */
	.knup-mobile-drawer__foot { display: none; }
	.knup-header__logo img { height: 27px; width: auto; }
	/* Utility icons (help, mail) somem — só logo + CTA + toggle */
	.knup-header__utility-icon,
	.knup-header-home__utility-icon { display: none !important; }
	/* Exceção: ícone de dúvidas fica visível no mobile (entre CTA e toggle) */
	.knup-header__duvidas-icon,
	.knup-header-home__duvidas-icon { display: flex !important; width: 30px; height: 30px; }

	/* CTA button fica compacto no header */
	.knup-header__actions .knup-btn,
	.knup-header-home__actions .knup-btn {
		padding: 10px 18px;
		font-size: 0.875rem;
	}

	/* Hero (Home): reduz sobreposição da imagem — evita espaço em branco excessivo */
	.knup-hero__media img { margin-bottom: -60px; }
	.knup-content-split { padding-top: 100px; }

	/* Header home: pill mais compacto */
	.knup-header-home__bar { padding: 8px 10px 8px 20px; width: 93%; justify-self: center; }
	.knup-header-home__logo img { height: 23px; width: auto; }
	.knup-header-home { top: 12px; }
	.knup-hero { padding-top: 100px; }
}

/* ── @media ≤ 900px: tablet e landscape de celular ───────────────────────── */
@media (max-width: 900px) {
	/* Seção genérica: reduz padding vertical */
	.knup-section { padding-block: 64px; }

	/* Pain section: checklist items full-width */
	.knup-pain__check-item { width: 100%; }

	/* Pillar summary card: proporção menos esticada */
	.knup-pillars-summary__card { aspect-ratio: 16 / 6; }

	/* Content split: padding menor */
	.knup-content-split { padding-bottom: 32px; }
	.knup-pillars-summary { padding-top: 19px; padding-bottom: 47px; }

	/* Testimonials: intro não fica negativa */
	.knup-testimonials__intro { bottom: 0; }

	/* Hero image sem sobreposição em tablet portrait */
	.knup-hero__media img { margin-bottom: -40px; }
	.knup-content-split { padding-top: 80px; }

	/* ARC: diagram menor */
	.knup-arc__diagram { transform: scale(1); }

	/* Contratar: steps com padding menor */
	.knup-contratar-steps { padding: 24px 24px 24px; }

	/* Soluções CTA: padding menor */
	.knup-solucoes-cta__panel { padding: 48px 40px; }

	/* Arc pillars copy: fonte menor */
	.knup-arc-pillars-visual__copy h2 { font-size: 28px; }

	/* Benefits tab buttons: largura auto */
	.knup-arc-benefits__tab-btn,
	.knup-arc-benefits__tab-btn.is-active { width: auto; }
}

/* ── @media ≤ 767px: celulares em portrait ───────────────────────────────── */
@media (max-width: 767px) {
	/* Seção genérica: menos padding ainda */
	.knup-section { padding-block: 28px; }

	/* Hero (Home) */
	.knup-hero { padding-top: 80px; padding-bottom: 20px; }
	.knup-hero__media img { margin-bottom: 0; border-radius: 20px; }
	.knup-hero__content { margin-top: 0; }
	.knup-content-split { padding-top: 48px; }

	/* Hero title em telas pequenas */
	.knup-hero__title { font-size: 28px !important; line-height: 1.2; }
	.knup-hero__subtitle { font-size: 15px; text-align: center; }

	/* Hero badges: lado a lado (como desktop) */
	.knup-hero__badges { grid-template-columns: auto auto; align-items: center; gap: 10px; }
	.knup-hero__badge-brand { margin: 0; }
	.knup-hero__badge-pill { white-space: normal; text-align: center; }

	/* Pillar summary cards: +~70% de altura */
	.knup-pillars-summary__card { aspect-ratio: 16 / 10; }

	/* Brand strip */
	.knup-brand-strip { margin-top: -16px; }

	/* Testimonials: stage sem padding lateral */
	.knup-testimonials { padding-top: 47px; padding-bottom: 47px; }
	.knup-testimonials__layout { gap: 60px; }
	.knup-testimonials__intro h2 { font-size: 1.5rem; }

	/* ARC: grid empilhado */
	.knup-arc { padding: 19px 0; }
	.knup-arc__grid { gap: 54px; }

	/* Arc hero */
	.knup-arc-hero { padding-top: 48px; padding-bottom: 52px; }
	.knup-arc-pillars-visual { padding-top: 0px; padding-bottom: 65px; }
	.knup-arc-benefits { padding-top: 25px; padding-bottom: 47px; }
	.knup-arc-benefits__tab-btn { line-height: 17px; }
	.knup-arc-score-cta { padding-top: 24px; overflow: hidden; }

	/* Score ARC: fix completo para mobile */
	.knup-arc-score-visual { overflow: hidden; }
	.knup-arc-score-cta__copy h2 { font-size: 24px; }
	.knup-arc-score-cta__copy .knup-btn { width: stretch; margin-inline: auto; justify-content: center; }

	/* Slots: largura relativa, sem overflow lateral */
	.knup-arc-score-card-slot--banner,
	.knup-arc-score-card-slot--mini,
	.knup-arc-score-card-slot--result { width: 86%; left: 2%; right: auto; }
	.knup-arc-score-card-slot--banner { top: 30px; }
	.knup-arc-score-card-slot--mini { top: 130px; }
	.knup-arc-score-card-slot--result { top: 340px; }

	/* Cards internos: reset das posições negativas e larguras fixas */
	.knup-arc-score-card--banner { width: 100%; height: auto; top: -17px; right: -10px; }
	.knup-arc-score-card--mini   { width: 100%; bottom: -332px; right: -10px; }
	.knup-arc-score-card--result  { width: 100%; height: auto; top: -102px; right: -10px; }

	/* Padding e fontes compactos dentro do banner */
	.knup-arc-score-card__banner-head { padding: 14px 18px; }
	.knup-arc-score-card__banner-body { padding: 14px 18px 18px; }
	.knup-arc-score-card__banner-title { font-size: 1.1rem; margin: 10px 0 8px; }
	.knup-arc-score-card__wordmark { font-size: 1.1rem; }

	/* Contratar */
	.knup-contratar-hero { padding: 64px 0 40px; }
	.knup-contratar-hero h1 { white-space: normal; font-size: clamp(1.8rem, 6vw, 2.6rem); }
	.knup-contratar-steps { padding: 20px 0; }
	.knup-contratar-form-section { padding: 48px 0 60px; }

	/* FAQ */
	.knup-faq { padding-top: 64px; }

	/* Soluções */
	.knup-solucoes-hero { padding-top: 64px; }
	.knup-solucoes-cta__panel { padding: 40px 24px; }
	.knup-solucoes-faq { padding-top: 80px; padding-bottom: 80px; }
	.knup-solucoes-faq__head { margin-bottom: 39px; }
	.knup-faq-modal__box { position: relative; bottom: 35px; width: 100%; max-width: 560px; max-height: 88vh; }

	/* Footer: estende até o mobile nav com 17px de respiro */
	.knup-footer { padding: 48px var(--knup-space-sm) calc(73px + 17px); }
	.knup-footer__grid { padding-top: 30px; padding-bottom: 50px; }
	/* Footer sem padding-top na página de Metodologia ARC */
	.knup-page-metodologia-arc .knup-footer { padding-top: 0; }
	/* Footer sem padding-top na página de Contratar */
	.knup-page-quero-contratar .knup-footer { padding: 0px var(--knup-space-sm) calc(73px + 17px); }
	.knup-footer__legal-text { line-height: 19px; padding-right: 20px; padding-left: 20px; }

	/* Mobile footer */
	.knup-mobile-footer { padding: 5px 6px; }
	/* flex:1 garante que os 5 itens tenham largura igual → item do meio fica geometricamente centrado */
	.knup-mobile-footer__item { flex: 1; justify-content: center; }
	.knup-mobile-footer__item.is-cta { padding: 15px 14px; margin-top: -15px; }
	.knup-mobile-footer__label { font-size: 11px; }

	/* Hero badges (mobile): efeito de overlap como desktop */
	.knup-hero__badge-brand {
		font-size: 26px;
		font-weight: 400;
		justify-self: start;
		width: 100%;
		background: #A208CD1F;
		border: 1px solid #FFFFFF38;
		border-radius: 34px;
		padding: 7px 20px 7px 10px;
		margin: 0 -32px 0 -2px;
		position: relative;
		z-index: 1;
		line-height: 1.2;
		text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
	}
	.knup-hero__badge-pill {
		font-size: 13px;
		font-weight: 500;
		justify-self: start;
		color: var(--knup-color-purple-900);
		background: var(--knup-color-off-white);
		border: 1px solid #FFFFFF59;
		line-height: 1.25;
		text-transform: none;
		letter-spacing: normal;
		padding: 15px 13px !important;
		margin: 0 0 0 -21px !important;
		z-index: 2;
	}
	.knup-footer__brand { margin-left: 0; }

	/* Blog */
	.knup-blog-hero { padding: 36px 0 145px; }

	/* Back-to-top não conflita com mobile footer */
	.knup-back-to-top { left: 12px; bottom: 96px; }

	/* Post header */
	.knup-post-header { padding: 20px 0 0; }

	/* Pain section: collage centralizada (+43% do tamanho original) */
	.knup-pain__media { max-width: 372px; }
	.knup-pain__question { font-size: 22px; }

	/* Blog teaser: título menor */
	.knup-blog-teaser__heading h2 { font-size: 1.5rem; }

	/* Popup: mais compacto */
	.knup-popup__box { padding: 20px var(--knup-space-sm); }
	.knup-popup__head h2 { font-size: 1.4rem; }
}

/* ── @media ≤ 480px: telas muito pequenas (SE, Galaxy A) ─────────────────── */
@media (max-width: 480px) {
	/* Container: padding mínimo */
	.knup-container { padding-inline: 14px; }

	/* Hero: logo pill badges empilhados melhor */
	.knup-hero { margin: 6px; border-radius: 20px; }
	.knup-hero__title { font-size: 24px !important; }
	.knup-hero__badge-brand {
		font-size: 15px !important;
		width: 158px;
		position: relative;
		left: -9px;
	}
	.knup-hero__badge-pill {
		font-size: 11px !important;
		padding: 11px 14px !important;
		border-radius: 50px;
		position: relative;
		right: -9px;
	}

	/* Buttons: sem overflow */
	.knup-btn { white-space: normal; text-align: center; }
	.knup-hero__content .knup-btn { font-size: 0.85rem; padding: 12px 20px; }

	/* Pain checklist: texto menor */
	.knup-pain__check-item span:last-child { font-size: 13px; }

	/* Contratar steps: full card opacity sem animação */
	.knup-contratar-step { opacity: 1 !important; transform: none !important; }

	/* Pillar cards: padding menor */
	.knup-pillars__item-body { padding: 20px 20px 12px; }

	/* ARC score visual: menor */
	.knup-arc-score-visual { height: 645px; padding-top: 0; margin: 0; }

	/* Blog featured: 1 coluna forçada */
	.knup-blog-featured__grid { grid-template-columns: 1fr; }
	.knup-blog-card--mini { flex-direction: column; }
	.knup-blog-card--mini .knup-blog-card__media { width: 100%; aspect-ratio: 16/9; }

	/* Footer */
	.knup-footer__shell { padding: 32px 16px 12px; }

	/* Post sidebar: esconde na mobile pequena */
	.knup-post-layout { gap: 32px; }

	/* Screenshot_13: reduz espaço (~75%) acima de "Artigos relacionados" */
	.knup-post-layout { padding-bottom: 20px; }
	.knup-post-related { padding-top: 20px; }

	/* Screenshot_14: reduz fonte e ícones do bloco de compartilhamento */
	.knup-post-share { gap: 6px; }
	.knup-post-share__label { font-size: 0.75rem; }
	.knup-post-share a,
	.knup-post-share button { width: 28px; height: 28px; }
	.knup-post-share a svg,
	.knup-post-share button svg { width: 13px; height: 13px; }

	/* Screenshot_15: centraliza textos do hero do blog */
	.knup-blog-hero { text-align: center; }
	.knup-blog-hero p { margin-inline: auto; }
}

/* ==========================================================================
   COMPONENT: Cookie Consent Banner
   Injetado dinamicamente por initCookieBanner() em theme.js.
   Dois estados: barra compacta (bottom-right) → painel expandido de
   preferências. Design liquid-glass consistente com .knup-popup.
   ========================================================================== */
.knup-cookie {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: var(--knup-z-cookie);
	width: min(440px, calc(100vw - 32px));
	background: rgba(12, 2, 16, 0.84);
	backdrop-filter: blur(28px) saturate(200%);
	-webkit-backdrop-filter: blur(28px) saturate(200%);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 20px;
	padding: 20px 22px;
	box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(162, 8, 205, 0.2);
	color: var(--knup-color-white);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.32s ease, transform 0.32s ease;
	pointer-events: none;
}
.knup-cookie.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}
.knup-cookie__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.knup-cookie__icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--knup-color-cookie-accent);
}
.knup-cookie__icon svg {
	width: 22px;
	height: 22px;
	display: block;
}
.knup-cookie__title {
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0 3px;
}
.knup-cookie__text {
	font-size: 0.77rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.55;
	margin: 0;
}
.knup-cookie__text a {
	color: var(--knup-color-cookie-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.knup-cookie__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 16px;
}
.knup-cookie__btn {
	flex: 1 1 auto;
	border: none;
	border-radius: 50px;
	padding: 9px 14px;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.18s, transform 0.18s;
	white-space: nowrap;
}
.knup-cookie__btn:hover { opacity: 0.84; transform: translateY(-1px); }
.knup-cookie__btn--accept {
	background: linear-gradient(135deg, #6a0dad, #a208cd);
	color: var(--knup-color-white);
}
.knup-cookie__btn--customize {
	background: rgba(255, 255, 255, 0.1);
	color: var(--knup-color-white);
	border: 1px solid rgba(255, 255, 255, 0.2);
}
.knup-cookie__btn--reject {
	background: transparent;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 400;
	flex: 0 0 auto;
	padding: 9px 6px;
}
.knup-cookie__btn--reject:hover { color: rgba(255,255,255,0.85); opacity: 1; transform: none; }

/* Panel de preferências */
.knup-cookie__panel {
	display: none;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.knup-cookie.is-expanded .knup-cookie__panel { display: block; }
.knup-cookie__panel-label {
	font-size: 0.7rem;
	font-weight: 700;
	color: rgba(255,255,255,0.45);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0 0 10px;
}
.knup-cookie__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.knup-cookie__row:last-of-type { border-bottom: none; }
.knup-cookie__row-name {
	font-size: 0.82rem;
	font-weight: 600;
	display: block;
	margin-bottom: 2px;
}
.knup-cookie__row-desc {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.48);
	line-height: 1.45;
	margin: 0;
}

/* Toggle switch */
.knup-cookie__toggle {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 22px;
	margin-top: 2px;
}
.knup-cookie__toggle input {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}
.knup-cookie__toggle-track {
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 50px;
	cursor: pointer;
	transition: background 0.22s ease;
}
.knup-cookie__toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	background: var(--knup-color-white);
	border-radius: 50%;
	transition: transform 0.22s ease;
	box-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.knup-cookie__toggle input:checked + .knup-cookie__toggle-track {
	background: linear-gradient(135deg, #7209b7, #a208cd);
}
.knup-cookie__toggle input:checked + .knup-cookie__toggle-track::after {
	transform: translateX(18px);
}
.knup-cookie__toggle input:disabled + .knup-cookie__toggle-track {
	opacity: 0.55;
	cursor: default;
}
.knup-cookie__panel-actions {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.knup-cookie__panel-actions .knup-cookie__btn { flex: 1; }

/* Mobile: toma toda a largura na base */
@media (max-width: 600px) {
	.knup-cookie {
		bottom: 0;
		right: 0;
		width: 100%;
		border-radius: 18px 18px 0 0;
		border-bottom: none;
		padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
	}
}

/* ==========================================================================
   COMPONENT: Legal pages (Políticas de Privacidade / Políticas de Cookies)
   ========================================================================== */
.knup-legal {
	padding: 72px 0 43px;
}
.knup-legal__hero {
	text-align: center;
	margin-bottom: 56px;
}
.knup-legal__hero .knup-text-label {
	display: inline-block;
	margin-bottom: 12px;
}
.knup-legal__hero h1 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin-bottom: 14px;
}
.knup-legal__hero p {
	color: var(--knup-color-gray-500);
	max-width: 54ch;
	margin-inline: auto;
}
.knup-legal__body {
	max-width: 760px;
	margin-inline: auto;
}
.knup-legal__section {
	margin-bottom: 44px;
}
.knup-legal__section h2 {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--knup-color-purple-700);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--knup-color-gray-200);
}
.knup-legal__section p,
.knup-legal__section li {
	font-size: 0.92rem;
	color: var(--knup-color-gray-600);
	line-height: 1.75;
	margin-bottom: 10px;
}
.knup-legal__section ul,
.knup-legal__section ol {
	padding-left: 20px;
}
.knup-legal__section li { margin-bottom: 6px; }
.knup-legal__section strong { color: var(--knup-color-gray-800); }
.knup-legal__section a { color: var(--knup-color-purple-700); text-decoration: underline; }
.knup-legal__update {
	display: inline-block;
	background: var(--knup-color-gray-100);
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 0.8rem;
	color: var(--knup-color-gray-500);
	margin-top: 8px;
}
.knup-legal__toc {
	background: var(--knup-color-gray-100);
	border-radius: 12px;
	padding: 20px 24px;
	margin-bottom: 44px;
}
.knup-legal__toc h3 {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--knup-color-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 10px;
}
.knup-legal__toc ol {
	padding-left: 18px;
	margin: 0;
}
.knup-legal__toc li {
	font-size: 0.85rem;
	margin-bottom: 4px;
}
.knup-legal__toc a {
	color: var(--knup-color-purple-700);
	text-decoration: none;
}
.knup-legal__toc a:hover { text-decoration: underline; }
/* Wrapper explícito para tabelas no preview HTML */
.knup-legal__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 16px 0 24px;
}
/* Auto-overflow para tabelas em conteúdo WYSIWYG do Elementor (sem wrapper) */
.knup-legal__section table {
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}
.knup-legal__cookie-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
	margin: 0;
}
.knup-legal__cookie-table th {
	background: var(--knup-color-gray-100);
	padding: 10px 14px;
	text-align: left;
	font-weight: 600;
	color: var(--knup-color-gray-700);
	border-bottom: 2px solid var(--knup-color-gray-200);
}
.knup-legal__cookie-table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--knup-color-gray-200);
	color: var(--knup-color-gray-600);
	vertical-align: top;
}
.knup-legal__cookie-table tr:last-child td { border-bottom: none; }