/* ==========================================================================
   Smart Localiza — CSS Principal v2
   Ultra moderno: bento, big numbers, sticky swap, mouse blob, aurora, grain
   ========================================================================== */

/* ========================================================================
   DESIGN TOKENS
   ======================================================================== */
:root {
	/* Cores */
	--sl-ink: #08080c;
	--sl-ink-2: #0e0e15;
	--sl-ink-3: #14141e;
	--sl-surface: rgba(255, 255, 255, 0.04);
	--sl-surface-hi: rgba(255, 255, 255, 0.07);
	--sl-line: rgba(255, 255, 255, 0.06);
	--sl-line-hi: rgba(255, 255, 255, 0.12);
	--sl-brand: #f16000;
	--sl-brand-2: #ff7a1a;
	--sl-brand-3: #ffb347;
	--sl-brand-rgb: 241, 96, 0;
	--sl-teal: #2dd4bf;
	--sl-teal-rgb: 45, 212, 191;
	--sl-lime: #c4ff3e;
	--sl-lime-rgb: 196, 255, 62;
	--sl-text: #fafafc;
	--sl-text-2: rgba(250, 250, 252, 0.62);
	--sl-text-3: rgba(250, 250, 252, 0.45);
	--sl-danger: #ff4060;

	/* Tipografia */
	--sl-font-display: 'Bricolage Grotesque', 'Syne', sans-serif;
	--sl-font-body: 'Manrope', -apple-system, system-ui, sans-serif;
	--sl-font-mono: 'JetBrains Mono', monospace;

	/* Easing */
	--sl-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--sl-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--sl-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Spacing / Size */
	--sl-r: 18px;
	--sl-r-lg: 26px;
	--sl-r-xl: 32px;

	/* Shadows */
	--sl-shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
	--sl-shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
	--sl-glow-brand: 0 0 40px rgba(var(--sl-brand-rgb), 0.4);
}

/* ========================================================================
   RESET + BASE
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	background: var(--sl-ink);
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 15px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
	position: relative;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ========================================================================
   GRAIN TEXTURE — via SVG noise filter
   ======================================================================== */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.6;
	mix-blend-mode: overlay;
}

/* Gradient mesh de fundo */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background:
		radial-gradient(ellipse 60vw 50vh at 10% -10%, rgba(var(--sl-brand-rgb), 0.18), transparent 60%),
		radial-gradient(ellipse 70vw 60vh at 100% 20%, rgba(var(--sl-teal-rgb), 0.10), transparent 55%),
		radial-gradient(ellipse 50vw 40vh at 50% 110%, rgba(var(--sl-lime-rgb), 0.05), transparent 50%);
}

.sl-page { position: relative; z-index: 1; }

/* ========================================================================
   PREMIUM INTERACTIONS — tilt 3D + spotlight + magnetic buttons
   ======================================================================== */

/* 3D TILT — cards seguem o cursor com perspective */
.sl-tilt-active {
	transition: transform 0.35s var(--sl-ease);
	will-change: transform;
	transform-style: preserve-3d;
}
.sl-tilt-active > * {
	/* Mantém children sempre "acima" do tilt (evita aliasing) */
	transform: translateZ(0.1px);
}

/* SPOTLIGHT — glow radial seguindo o cursor */
.sl-spotlight {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.sl-spotlight::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(
		380px circle at var(--mx, 50%) var(--my, 50%),
		rgba(var(--sl-brand-rgb), 0.12),
		transparent 55%
	);
	opacity: 0;
	transition: opacity 0.5s var(--sl-ease);
	pointer-events: none;
	z-index: 0;
	mix-blend-mode: screen;
}
.sl-spotlight:hover::after,
.sl-spotlight.is-focus::after { opacity: 1; }
.sl-spotlight > * { position: relative; z-index: 1; }
/* Spotlight colorido por contexto — usa a cor do card quando definida */
.sl-spotlight[style*="--brand-c"]::after {
	background: radial-gradient(
		380px circle at var(--mx, 50%) var(--my, 50%),
		color-mix(in srgb, var(--brand-c) 18%, transparent),
		transparent 55%
	);
}

/* MAGNETIC BUTTONS — botões atraem o cursor levemente */
.sl-magnetic {
	transition: transform 0.4s var(--sl-ease);
	will-change: transform;
}
.sl-magnetic:active {
	transition-duration: 0.1s;
	transform: scale(0.97) !important;
}

/* Respeita reduced-motion e mobile (touch-only) */
@media (prefers-reduced-motion: reduce), (hover: none) {
	.sl-tilt-active,
	.sl-magnetic { transform: none !important; transition: none !important; }
	.sl-spotlight::after { display: none !important; }
}

/* ========================================================================
   PRELOADER — radar de entrada (aparece 1x por sessão)
   ======================================================================== */
.sl-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: radial-gradient(ellipse at center, #0e0e1a 0%, #060609 70%);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.55s var(--sl-ease), visibility 0.55s var(--sl-ease);
	/* Falha-segura: auto-hide após 4s mesmo sem JS */
	animation: sl-prel-failsafe 0.1s linear 4s forwards;
}
.sl-preloader.is-hidden,
.sl-preloader[hidden] {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
@keyframes sl-prel-failsafe {
	to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.sl-preloader-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.75rem;
	animation: sl-prel-in 0.6s var(--sl-ease) both;
}
@keyframes sl-prel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Radar circular */
.sl-preloader-radar {
	position: relative;
	width: 100px; height: 100px;
}
.sl-preloader-grid {
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(var(--sl-brand-rgb), 0.15);
	background:
		radial-gradient(circle, transparent 66%, rgba(var(--sl-brand-rgb), 0.04) 66%),
		conic-gradient(from 0deg, transparent 0%, transparent 98%, rgba(var(--sl-brand-rgb), 0.18) 100%);
}
.sl-preloader-grid::before,
.sl-preloader-grid::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(var(--sl-brand-rgb), 0.12);
}
.sl-preloader-grid::before {
	inset: 25%;
}
.sl-preloader-grid::after {
	inset: 40%;
}

/* Dot central pulsante */
.sl-preloader-dot {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--sl-brand);
	box-shadow: 0 0 18px var(--sl-brand);
	animation: sl-prel-dot 1.2s ease-in-out infinite;
	z-index: 3;
}
@keyframes sl-prel-dot {
	0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
	50%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0.7; }
}

/* Anéis expandindo (3 em cascata) */
.sl-preloader-ring {
	position: absolute;
	top: 50%; left: 50%;
	width: 12px; height: 12px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid var(--sl-brand);
	animation: sl-prel-ring 1.8s ease-out infinite;
	z-index: 2;
}
.sl-preloader-ring--2 { animation-delay: 0.6s; }
.sl-preloader-ring--3 { animation-delay: 1.2s; }
@keyframes sl-prel-ring {
	0%   { width: 12px;  height: 12px;  opacity: 0.9; border-width: 2px; }
	100% { width: 100px; height: 100px; opacity: 0;   border-width: 1px; }
}

/* Varredura tipo radar */
.sl-preloader-sweep {
	position: absolute;
	top: 50%; left: 50%;
	width: 50%; height: 50%;
	transform-origin: left top;
	background: conic-gradient(from 0deg at 0% 0%, rgba(var(--sl-teal-rgb), 0.4) 0deg, transparent 40deg);
	animation: sl-prel-sweep 3s linear infinite;
	z-index: 1;
}
@keyframes sl-prel-sweep {
	to { transform: rotate(360deg); }
}

/* Brand */
.sl-preloader-brand {
	text-align: center;
	display: flex; flex-direction: column; gap: 0.3rem;
}
.sl-preloader-name {
	font-family: var(--sl-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.02em;
}
.sl-preloader-tag {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-teal);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Barra de progresso (shimmer) */
.sl-preloader-bar {
	width: 180px; height: 2px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 1px;
	overflow: hidden;
	position: relative;
}
.sl-preloader-bar span {
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 40%;
	background: linear-gradient(90deg, transparent, var(--sl-brand), var(--sl-teal), transparent);
	animation: sl-prel-bar 1.3s ease-in-out infinite;
}
@keyframes sl-prel-bar {
	0%   { left: -40%; }
	100% { left: 100%; }
}

/* Reduced motion: esconde o preloader (não trava usuário que pediu menos animação) */
@media (prefers-reduced-motion: reduce) {
	.sl-preloader { display: none !important; }
}

/* ========================================================================
   MOUSE BLOB FOLLOWER
   ======================================================================== */
.sl-cursor-blob {
	position: fixed;
	top: 0; left: 0;
	width: 500px; height: 500px;
	pointer-events: none;
	z-index: 1;
	margin: -250px 0 0 -250px;
	background: radial-gradient(circle, rgba(var(--sl-brand-rgb), 0.20), transparent 60%);
	filter: blur(60px);
	opacity: 0;
	transition: opacity 0.6s;
	will-change: transform;
	mix-blend-mode: screen;
}
.sl-cursor-blob.is-active { opacity: 1; }

/* ========================================================================
   CONTAINERS
   ======================================================================== */
.sl-wrap {
	max-width: 1320px;
	margin: 0 auto;
	padding-inline: 1.5rem;
	position: relative;
}
.sl-wrap-narrow { max-width: 860px; margin: 0 auto; padding-inline: 1.5rem; }

.sl-section {
	padding: 7rem 0;
	position: relative;
}
.sl-section--tight { padding: 4.5rem 0; }

/* ========================================================================
   TIPOGRAFIA
   ======================================================================== */
h1, h2, h3, h4, h5 {
	font-family: var(--sl-font-display);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1;
	color: var(--sl-text);
}

.sl-display {
	font-family: var(--sl-font-display);
	font-size: clamp(2.8rem, 7vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.95;
}

.sl-mega {
	font-family: var(--sl-font-display);
	font-size: clamp(4rem, 18vw, 16rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.85;
}

.sl-eyebrow {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--sl-text-3);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.sl-eyebrow::before {
	content: "";
	width: 8px; height: 1px;
	background: currentColor;
}

p { color: var(--sl-text-2); }

::selection { background: rgba(var(--sl-brand-rgb), 0.35); color: #fff; }

/* ========================================================================
   CHIP (badge modernizado)
   ======================================================================== */
.sl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.75rem 0.4rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--sl-line);
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	color: var(--sl-text-2);
	backdrop-filter: blur(12px);
	width: fit-content;
}
.sl-chip-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 12px var(--sl-teal), inset 0 0 0 2px rgba(0,0,0,0.2);
	animation: sl-dot-pulse 1.8s ease-in-out infinite;
}
@keyframes sl-dot-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.3); opacity: 0.7; }
}

.sl-chip--brand .sl-chip-dot { background: var(--sl-brand); box-shadow: 0 0 12px var(--sl-brand); }
.sl-chip--lime .sl-chip-dot { background: var(--sl-lime); box-shadow: 0 0 12px var(--sl-lime); }

/* ========================================================================
   GRADIENT / SPECIAL TEXT
   ======================================================================== */
.sl-gt {
	background: linear-gradient(100deg, var(--sl-brand) 0%, var(--sl-brand-3) 50%, var(--sl-teal) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sl-gt-flow 8s ease-in-out infinite;
	display: inline-block;
}
@keyframes sl-gt-flow {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.sl-outlined {
	-webkit-text-stroke: 1.5px var(--sl-text-2);
	color: transparent;
}

/* ========================================================================
   DASHBOARD MOCKUP (section-dashboard.php) — Painel ao vivo na home
   ======================================================================== */
.sl-dash-section { padding-top: 4rem; padding-bottom: 4rem; }

.sl-dash {
	margin-top: 2.5rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: var(--sl-r-xl, 28px);
	overflow: hidden;
	background: linear-gradient(180deg, #0b0b12 0%, #0a0a10 100%);
	box-shadow:
		0 30px 80px -20px rgba(0,0,0,0.6),
		0 0 0 1px rgba(45,212,191,0.08),
		0 0 60px -10px rgba(45,212,191,0.15);
}

.sl-dash-chrome {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 0.85rem 1.25rem;
	background: rgba(255,255,255,0.02);
	border-bottom: 1px solid var(--sl-line, rgba(255,255,255,0.06));
}
.sl-dash-dots { display: flex; gap: 0.4rem; }
.sl-dash-dot {
	width: 11px; height: 11px;
	border-radius: 50%;
	opacity: 0.85;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.sl-dash-title {
	text-align: center;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	white-space: nowrap;
}
.sl-dash-live {
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sl-teal, #2dd4bf);
}
.sl-dash-live-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 10px var(--sl-teal, #2dd4bf);
	animation: sl-dash-pulse 1.8s ease-in-out infinite;
}
@keyframes sl-dash-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.8); }
}

.sl-dash-body {
	display: grid;
	grid-template-columns: 230px 1fr;
	min-height: 700px;
}
.sl-dash-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* ---- Sidemenu (esquerda) — todos os itens visíveis sem scroll ---- */
.sl-dash-sidemenu {
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	border-right: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	padding: 0.5rem 0.45rem;
}
.sl-dash-sidemenu ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}
.sl-dash-sidemenu li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.42rem 0.75rem;
	border-radius: 8px;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	font-size: 0.8rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	cursor: default;
	transition: background 0.2s, color 0.2s;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sl-dash-sidemenu li svg {
	flex-shrink: 0;
	opacity: 0.85;
}
.sl-dash-sidemenu li:hover {
	background: rgba(255,255,255,0.03);
	color: var(--sl-text, #fafafc);
}
.sl-dash-sidemenu li.is-active {
	background: rgba(45,212,191,0.1);
	color: var(--sl-teal, #2dd4bf);
	font-weight: 600;
}
.sl-dash-sidemenu li.is-active::before {
	content: "";
	position: absolute;
	left: -0.55rem;
	top: 22%;
	bottom: 22%;
	width: 2px;
	background: var(--sl-teal, #2dd4bf);
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 10px rgba(45,212,191,0.6);
}
.sl-dash-sidemenu li.is-active svg {
	opacity: 1;
}

/* ---- Rodapé do sidemenu: separador + Conta + Sair ---- */
.sl-dash-sidemenu-sep {
	margin: 0.25rem 0.2rem;
	height: 1px;
	background: var(--sl-line, rgba(255,255,255,0.06));
}
.sl-dash-sidemenu-foot {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
}
.sl-dash-sidemenu-foot li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.42rem 0.75rem;
	border-radius: 8px;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	font-size: 0.8rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	cursor: default;
	transition: background 0.2s, color 0.2s;
}
.sl-dash-sidemenu-foot li:hover {
	background: rgba(255,255,255,0.03);
	color: var(--sl-text, #fafafc);
}
/* Item "Conta" — mesmo padding dos demais, compacto vertical pra não destoar */
.sl-dash-sidemenu-account {
	align-items: center !important;
}
.sl-dash-sidemenu-account > svg {
	color: var(--sl-brand, #f16000);
	flex-shrink: 0;
}
.sl-dash-sidemenu-account-body {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
	line-height: 1.15;
}
.sl-dash-sidemenu-account-body strong {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sl-brand, #f16000);
	line-height: 1.15;
}
.sl-dash-sidemenu-account-body small {
	font-size: 0.65rem;
	color: var(--sl-brand, #f16000);
	opacity: 0.85;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Mapa (top) ---- */
.sl-dash-map {
	position: relative;
	overflow: hidden;
	min-height: 460px;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(241,96,0,0.08), transparent 55%),
		radial-gradient(ellipse at 70% 80%, rgba(45,212,191,0.08), transparent 55%),
		linear-gradient(180deg, #0a0a12 0%, #080810 100%);
}
.sl-dash-map-svg {
	width: 100%;
	height: 100%;
	min-height: 460px;
	display: block;
}
.sl-dash-scanline {
	animation: sl-dash-scan 6s linear infinite;
}
@keyframes sl-dash-scan {
	0%   { transform: translateY(0); }
	100% { transform: translateY(460px); }
}

/* ---- Panels (bottom): veículo selecionado + sensores ---- */
.sl-dash-panels {
	display: grid;
	grid-template-columns: minmax(280px, 1.1fr) 2fr;
	border-top: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}

/* Veículo selecionado (esquerda) */
.sl-dash-vehicle {
	padding: 1.15rem 1.35rem;
	border-right: 1px solid var(--sl-line, rgba(255,255,255,0.05));
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.sl-dash-vehicle-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--sl-line, rgba(255,255,255,0.05));
}
.sl-dash-vehicle-arrow {
	color: var(--sl-brand, #f16000);
	display: inline-flex;
}
.sl-dash-vehicle-head strong {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--sl-text, #fafafc);
}
.sl-dash-vehicle-model {
	font-size: 0.8rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-dash-vehicle-status {
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #28c840;
	box-shadow: 0 0 10px rgba(40, 200, 64, 0.65);
	flex-shrink: 0;
	animation: sl-dash-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	.sl-dash-vehicle-status { animation: none; }
}
.sl-dash-vehicle-info {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.45rem 1rem;
	margin: 0;
}
.sl-dash-vehicle-info > div {
	display: contents;
}
.sl-dash-vehicle-info dt {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.65rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
	padding-top: 0.15rem;
	white-space: nowrap;
}
.sl-dash-vehicle-info dd {
	margin: 0;
	font-size: 0.82rem;
	color: var(--sl-text, #fafafc);
	font-weight: 500;
	line-height: 1.45;
}

/* Sensores (direita) */
.sl-dash-sensors {
	padding: 1.15rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.sl-dash-sensors-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--sl-line, rgba(255,255,255,0.05));
	color: var(--sl-teal, #2dd4bf);
}
.sl-dash-sensors-head strong {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--sl-text, #fafafc);
	flex: 1;
}
.sl-dash-sensors-live {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.sl-dash-sensors-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
}
.sl-dash-sensor {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 0.4rem;
	row-gap: 0.2rem;
	align-items: center;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	border-radius: 10px;
	background: rgba(255,255,255,0.015);
	position: relative;
	transition: border-color 0.25s, background 0.25s;
}
.sl-dash-sensor:hover {
	border-color: rgba(45,212,191,0.3);
	background: rgba(45,212,191,0.04);
}
/* Ícone e label inline na linha 1; value na linha 2 spanning as duas colunas */
.sl-dash-sensor-icon {
	grid-row: 1;
	grid-column: 1;
	color: var(--sl-teal, #2dd4bf);
	opacity: 0.75;
	display: inline-flex;
	align-items: center;
}
.sl-dash-sensor-label {
	grid-row: 1;
	grid-column: 2;
}
.sl-dash-sensor-value {
	grid-row: 2;
	grid-column: 1 / -1;
}
.sl-dash-sensor-label {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-dash-sensor-value {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--sl-text, #fafafc);
	line-height: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.sl-dash-scanline,
	.sl-dash-live-dot { animation: none; }
}

/* Responsive */
@media (max-width: 960px) {
	.sl-dash-body { grid-template-columns: 1fr; min-height: auto; }
	.sl-dash-sidemenu { display: none; } /* mockup — esconde em tablet/mobile pra priorizar mapa */
	.sl-dash-map,
	.sl-dash-map-svg { min-height: 360px; }
	.sl-dash-panels { grid-template-columns: 1fr; }
	.sl-dash-vehicle { border-right: 0; border-bottom: 1px solid var(--sl-line, rgba(255,255,255,0.05)); }
	.sl-dash-sensors-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
	.sl-dash-sensors-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
	.sl-dash-sensors-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-dash-chrome { grid-template-columns: auto 1fr auto; padding: 0.75rem 1rem; }
	.sl-dash-title { font-size: 0.62rem; letter-spacing: 0.08em; padding: 0 0.75rem; overflow: hidden; text-overflow: ellipsis; }
	.sl-dash-vehicle-info { grid-template-columns: 1fr; gap: 0.1rem 0; }
	.sl-dash-vehicle-info > div { display: block; margin-bottom: 0.65rem; }
	.sl-dash-vehicle-info dt { margin-bottom: 0.15rem; }
}
@media (max-width: 480px) {
	.sl-dash { margin-top: 1.5rem; border-radius: 20px; }
	.sl-dash-title { display: none; }
	.sl-dash-chrome { grid-template-columns: auto 1fr; }
	.sl-dash-map,
	.sl-dash-map-svg { min-height: 300px; }
}

/* ========================================================================
   SIMULE UMA FROTA — demo interativa (page-simule-frota.php)
   ======================================================================== */
.sl-sim {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1.5rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: var(--sl-r-xl, 28px);
	overflow: hidden;
	background: linear-gradient(180deg, #0b0b12 0%, #0a0a10 100%);
	box-shadow: 0 30px 80px -20px rgba(0,0,0,0.55);
}

/* MAPA */
.sl-sim-map {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(241,96,0,0.06), transparent 55%),
		radial-gradient(ellipse at 70% 80%, rgba(45,212,191,0.06), transparent 55%),
		linear-gradient(180deg, #0a0a12 0%, #080810 100%);
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}
.sl-sim-svg {
	width: 100%;
	height: 100%;
	min-height: 480px;
	display: block;
}

/* Cerca virtual — estado "violada" */
.sl-sim-fence.is-breached circle {
	stroke: rgba(255,64,96,0.8) !important;
	fill: rgba(255,64,96,0.06) !important;
	animation: sl-sim-fence-pulse 0.8s ease-in-out 3;
}
.sl-sim-fence.is-breached text { fill: rgba(255,64,96,0.85) !important; }
@keyframes sl-sim-fence-pulse {
	0%, 100% { stroke-width: 2; }
	50%      { stroke-width: 3.5; }
}

/* Veículo — estado normal pulsa sutil; bloqueado fica vermelho estático */
.sl-sim-vehicle-halo { animation: sl-sim-vehicle-pulse 2.5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sl-sim-vehicle-pulse {
	0%, 100% { opacity: 0.6; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(1.3); }
}
#sl-sim-vehicle.is-blocked .sl-sim-vehicle-dot  { fill: #ff4060; }
#sl-sim-vehicle.is-blocked .sl-sim-vehicle-ring { stroke: rgba(255,64,96,0.9); }
#sl-sim-vehicle.is-blocked .sl-sim-vehicle-halo { fill: rgba(255,64,96,0.15); }
#sl-sim-vehicle.is-blocked { cursor: not-allowed !important; }
#sl-sim-vehicle.is-dragging { cursor: grabbing !important; }

/* Banner de alerta overlay (no mapa) */
.sl-sim-alert {
	position: absolute;
	top: 0.85rem; right: 0.85rem;
	max-width: calc(100% - 1.7rem);
	width: max-content;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255,64,96,0.4);
	border-radius: 12px;
	background: rgba(30,14,20,0.95);
	backdrop-filter: blur(10px);
	box-shadow: 0 15px 30px -10px rgba(0,0,0,0.5), 0 0 24px -6px rgba(255,64,96,0.35);
	transform: translateY(-10px);
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
	z-index: 3;
}
.sl-sim-alert:not([hidden]) {
	opacity: 1;
	transform: translateY(0);
}
.sl-sim-alert-icon { font-size: 1.3rem; filter: drop-shadow(0 0 8px rgba(255,64,96,0.6)); }
.sl-sim-alert strong { display: block; font-size: 0.92rem; font-weight: 600; color: var(--sl-text); }
.sl-sim-alert small  { display: block; font-family: var(--sl-font-mono); font-size: 0.68rem; color: rgba(255,160,176,0.75); margin-top: 0.15rem; }

/* Hint inicial */
.sl-sim-hint {
	position: absolute;
	bottom: 1rem; left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	background: rgba(14,14,21,0.88);
	border: 1px solid rgba(45,212,191,0.25);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-2);
	backdrop-filter: blur(8px);
	animation: sl-sim-hint-bob 2.5s ease-in-out infinite;
	z-index: 2;
}
.sl-sim-hint.is-hidden { display: none; }
@keyframes sl-sim-hint-bob {
	0%, 100% { transform: translate(-50%, 0); }
	50%      { transform: translate(-50%, -4px); }
}

/* Toast rápido de aviso (ignição desligada / veículo bloqueado) */
.sl-sim-map-toast {
	position: absolute;
	bottom: 4rem;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	background: rgba(30,14,20,0.95);
	border: 1px solid rgba(255,176,32,0.55);
	border-radius: 999px;
	color: #ffb020;
	font-family: var(--sl-font-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px -10px rgba(0,0,0,0.55), 0 0 20px -6px rgba(255,176,32,0.35);
	z-index: 4;
	opacity: 0;
	transform: translate(-50%, 6px);
	transition: opacity 0.2s, transform 0.3s;
	pointer-events: none;
}
.sl-sim-map-toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
	animation: sl-sim-toast-pulse 0.5s ease-out;
}
@keyframes sl-sim-toast-pulse {
	0%   { transform: translate(-50%, 8px); opacity: 0; }
	40%  { transform: translate(-50%, -3px); opacity: 1; }
	100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Controles flutuantes de ignição (overlay no mapa, canto inferior esquerdo) */
.sl-sim-map-controls {
	position: absolute;
	bottom: 0.85rem;
	left: 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	z-index: 3;
}
.sl-sim-map-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(14,14,21,0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	cursor: pointer;
	transition: transform 0.2s, border-color 0.2s, background 0.2s, color 0.2s, box-shadow 0.2s;
	padding: 0;
}
.sl-sim-map-btn:hover:not(:disabled) {
	transform: scale(1.06);
	color: var(--sl-text, #fafafc);
	box-shadow: 0 8px 20px -6px rgba(0,0,0,0.6);
}
.sl-sim-map-btn:active:not(:disabled) { transform: scale(0.96); }
.sl-sim-map-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Variante: bloquear veículo → laranja (ação de bloqueio) */
.sl-sim-map-btn--block {
	color: var(--sl-brand, #f16000);
	border-color: rgba(241,96,0,0.38);
	background: rgba(241,96,0,0.1);
}
.sl-sim-map-btn--block:hover:not(:disabled) {
	border-color: rgba(241,96,0,0.7);
	background: rgba(241,96,0,0.2);
	color: #ffa466;
	box-shadow: 0 8px 20px -6px rgba(241,96,0,0.45);
}

/* Variante: desbloquear veículo → lime (ação de liberação) */
.sl-sim-map-btn--unblock {
	color: var(--sl-lime, #c4ff3e);
	border-color: rgba(196,255,62,0.35);
	background: rgba(196,255,62,0.1);
}
.sl-sim-map-btn--unblock:hover:not(:disabled) {
	border-color: rgba(196,255,62,0.7);
	background: rgba(196,255,62,0.2);
	color: #dbff7a;
	box-shadow: 0 8px 20px -6px rgba(196,255,62,0.4);
}

/* Variante: ligar ignição → power verde (Ligada) */
.sl-sim-map-btn--ignite-on {
	color: #3dd76f;
	border-color: rgba(61,215,111,0.35);
	background: rgba(61,215,111,0.12);
}
.sl-sim-map-btn--ignite-on:hover:not(:disabled) {
	border-color: rgba(61,215,111,0.7);
	background: rgba(61,215,111,0.22);
	color: #5fe88a;
	box-shadow: 0 8px 20px -6px rgba(61,215,111,0.45);
}

/* Variante: desligar ignição → power vermelho (Desligada) */
.sl-sim-map-btn--ignite-off {
	color: #ff4060;
	border-color: rgba(255,64,96,0.38);
	background: rgba(255,64,96,0.1);
}
.sl-sim-map-btn--ignite-off:hover:not(:disabled) {
	border-color: rgba(255,64,96,0.7);
	background: rgba(255,64,96,0.2);
	color: #ff6880;
	box-shadow: 0 8px 20px -6px rgba(255,64,96,0.45);
}

/* Em mobile (quando mapa e painel viram coluna única) — botões um pouco menores */
@media (max-width: 820px) {
	.sl-sim-map-controls { bottom: 0.6rem; left: 0.6rem; gap: 0.4rem; }
	.sl-sim-map-btn { width: 38px; height: 38px; border-radius: 10px; }
	.sl-sim-map-btn svg { width: 17px; height: 17px; }
}

/* PAINEL LATERAL */
.sl-sim-panel {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	border-left: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	min-width: 0;
}
.sl-sim-panel-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sl-line, rgba(255,255,255,0.05));
}
.sl-sim-panel-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
	animation: sl-ticker-pulse 1.8s ease-in-out infinite;
}
.sl-sim-panel-head strong {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sl-text-2);
}

.sl-sim-plate {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.sl-sim-plate-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3);
}
.sl-sim-plate strong {
	font-family: var(--sl-font-mono);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--sl-text);
	letter-spacing: 0.04em;
}

/* Status pill */
.sl-sim-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	transition: background 0.3s, border-color 0.3s, color 0.3s;
	align-self: flex-start;
	border: 1px solid;
}
.sl-sim-status[data-sim-status="ok"]      { color: var(--sl-teal);    background: rgba(45,212,191,0.1);  border-color: rgba(45,212,191,0.35); }
.sl-sim-status[data-sim-status="warn"]    { color: var(--sl-brand-3); background: rgba(255,176,32,0.1);  border-color: rgba(255,176,32,0.35); }
.sl-sim-status[data-sim-status="alert"]   { color: var(--sl-danger);  background: rgba(255,64,96,0.1);   border-color: rgba(255,64,96,0.4); animation: sl-sim-alert-pulse 1.2s ease-in-out infinite; }
.sl-sim-status[data-sim-status="blocked"] { color: #ff4060;           background: rgba(255,64,96,0.15);  border-color: rgba(255,64,96,0.5); }
.sl-sim-status-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}
@keyframes sl-sim-alert-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,64,96,0.5); }
	50%      { box-shadow: 0 0 0 5px rgba(255,64,96,0); }
}

/* Telemetria grid */
.sl-sim-telemetry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.55rem;
}
.sl-sim-telemetry > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	border-radius: 10px;
	background: rgba(255,255,255,0.015);
}
.sl-sim-telemetry small {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-text-3);
}
.sl-sim-telemetry strong {
	font-family: var(--sl-font-mono);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sl-text);
	letter-spacing: 0.02em;
}
.sl-sim-tele-ok      { color: var(--sl-teal) !important; }
.sl-sim-tele-warn    { color: var(--sl-brand-3) !important; }
.sl-sim-tele-alert   { color: var(--sl-danger) !important; }
.sl-sim-tele-blocked { color: #ff4060 !important; }

/* Ações */
.sl-sim-actions {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.sl-sim-btn {
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	border: 1px solid transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}
.sl-sim-btn--primary {
	background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
	color: #fff;
	box-shadow: 0 6px 14px -4px rgba(var(--sl-brand-rgb), 0.5);
}
.sl-sim-btn--primary:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 20px -4px rgba(var(--sl-brand-rgb), 0.6);
}
.sl-sim-btn--ghost {
	background: rgba(255,255,255,0.02);
	border-color: var(--sl-line, rgba(255,255,255,0.1));
	color: var(--sl-text-2);
}
.sl-sim-btn--ghost:hover:not(:disabled) {
	border-color: rgba(255,255,255,0.22);
	color: var(--sl-text);
	background: rgba(255,255,255,0.04);
}
.sl-sim-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Log de eventos */
.sl-sim-log {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	flex: 1;
	min-height: 0;
}
.sl-sim-log-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}
.sl-sim-log-head > span:first-child {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--sl-text-3);
}
.sl-sim-log-count {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
}
.sl-sim-log-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	max-height: 180px;
	overflow-y: auto;
	scrollbar-width: thin;
}
.sl-sim-log-list::-webkit-scrollbar { width: 4px; }
.sl-sim-log-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.sl-sim-log-empty {
	font-size: 0.78rem;
	color: var(--sl-text-3);
	font-style: italic;
	padding: 0.5rem 0;
}
.sl-sim-log-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem;
	border-left: 2px solid var(--sl-line);
	border-radius: 0 6px 6px 0;
	background: rgba(255,255,255,0.015);
	font-size: 0.78rem;
	animation: sl-sim-log-in 0.4s ease-out;
}
@keyframes sl-sim-log-in {
	from { opacity: 0; transform: translateX(-8px); }
	to   { opacity: 1; transform: translateX(0); }
}
.sl-sim-log-item[data-tone="alert"]   { border-left-color: var(--sl-danger); }
.sl-sim-log-item[data-tone="success"] { border-left-color: var(--sl-lime); }
.sl-sim-log-item[data-tone="info"]    { border-left-color: var(--sl-teal); }
.sl-sim-log-item[data-tone="warn"]    { border-left-color: var(--sl-brand-3); }
.sl-sim-log-icon { font-size: 0.95rem; }
.sl-sim-log-msg  { color: var(--sl-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-sim-log-time { font-family: var(--sl-font-mono); font-size: 0.62rem; color: var(--sl-text-3); }

/* Outro */
.sl-sim-outro {
	text-align: center;
	margin-top: 2.5rem;
	padding: 2rem 1rem;
	color: var(--sl-text-2);
}
.sl-sim-outro p {
	font-size: 1.02rem;
	max-width: 640px;
	margin: 0 auto;
	line-height: 1.55;
}
.sl-sim-outro strong { color: var(--sl-text); }

/* Responsive */
@media (max-width: 960px) {
	.sl-sim { grid-template-columns: 1fr; }
	.sl-sim-panel { border-left: 0; border-top: 1px solid var(--sl-line, rgba(255,255,255,0.06)); }
	.sl-sim-map, .sl-sim-svg { min-height: 380px; }
}
@media (max-width: 560px) {
	.sl-sim-telemetry { grid-template-columns: 1fr; }
	.sl-sim-alert { right: 0.5rem; top: 0.5rem; padding: 0.6rem 0.75rem; max-width: calc(100% - 1rem); }
	.sl-sim-alert strong { font-size: 0.82rem; }
}

/* ========================================================================
   LIVE TICKER — feed flutuante de eventos do sistema (canto inferior-esq)
   ======================================================================== */
.sl-ticker {
	position: fixed;
	left: 1.25rem;
	bottom: 1.25rem;
	width: 280px;
	max-width: calc(100vw - 2.5rem);
	background: rgba(14, 14, 21, 0.92);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border: 1px solid rgba(45, 212, 191, 0.22);
	border-radius: 14px;
	padding: 0.7rem 0.85rem 0.7rem 0.9rem;
	box-shadow:
		0 15px 35px -10px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(45, 212, 191, 0.08),
		0 0 24px -8px rgba(45, 212, 191, 0.2);
	z-index: 9997; /* um nível abaixo do toast/copies */
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.45s var(--sl-ease, cubic-bezier(0.22,1,0.36,1)), transform 0.45s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
}
.sl-ticker.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.sl-ticker.is-hidden {
	opacity: 0 !important;
	transform: translateY(12px) !important;
	pointer-events: none;
}
.sl-ticker-head {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.45rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sl-ticker-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	animation: sl-ticker-pulse 1.6s ease-in-out infinite;
}
@keyframes sl-ticker-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.75); }
}
.sl-ticker-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sl-teal, #2dd4bf);
	flex: 1;
}
.sl-ticker-close {
	position: absolute;
	top: 4px;
	right: 8px;
	background: transparent;
	border: 0;
	padding: 4px 6px;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.2s;
	font-family: inherit;
}
.sl-ticker-close:hover { color: var(--sl-text, #fafafc); }

.sl-ticker-stage {
	position: relative;
	min-height: 42px;
}
.sl-ticker-event {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.4s, transform 0.4s;
}
.sl-ticker-event.is-active {
	opacity: 1;
	transform: translateY(0);
}
.sl-ticker-event-icon {
	font-size: 1.05rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 0 6px rgba(45,212,191,0.3));
}
.sl-ticker-event-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.sl-ticker-event-body strong {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-ticker-event-body small {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.62rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.06em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Variantes de cor por tipo de evento (borda + glow sutil) */
.sl-ticker.tone-alert    { border-color: rgba(255,64,96,0.3);  box-shadow: 0 15px 35px -10px rgba(0,0,0,0.55), 0 0 24px -8px rgba(255,64,96,0.25); }
.sl-ticker.tone-warn     { border-color: rgba(255,176,32,0.32); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.55), 0 0 24px -8px rgba(255,176,32,0.25); }
.sl-ticker.tone-success  { border-color: rgba(196,255,62,0.3); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.55), 0 0 24px -8px rgba(196,255,62,0.22); }
.sl-ticker.tone-info     { border-color: rgba(45,212,191,0.3); }
.sl-ticker.tone-neutral  { border-color: rgba(241,96,0,0.28); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.55), 0 0 24px -8px rgba(241,96,0,0.2); }

@media (prefers-reduced-motion: reduce) {
	.sl-ticker-dot,
	.sl-ticker-event { animation: none; transition: opacity 0.15s; }
}
@media (max-width: 560px) {
	.sl-ticker {
		left: 0.75rem;
		bottom: 0.75rem;
		width: 220px;
		max-width: calc(100vw - 6rem); /* deixa espaço pro WhatsApp FAB à direita */
		padding: 0.55rem 0.7rem 0.55rem 0.75rem;
	}
	.sl-ticker-head {
		gap: 0.3rem;
		margin-bottom: 0.35rem;
		padding-bottom: 0.35rem;
	}
	.sl-ticker-label    { font-size: 0.52rem; letter-spacing: 0.12em; }
	.sl-ticker-event    { gap: 0.5rem; }
	.sl-ticker-event-icon { font-size: 0.95rem; }
	.sl-ticker-event-body strong { font-size: 0.74rem; }
	.sl-ticker-event-body small  { font-size: 0.56rem; }
	.sl-ticker-stage    { min-height: 36px; }
	.sl-ticker-close    { top: 2px; right: 4px; font-size: 1rem; padding: 2px 5px; }
}

/* ========================================================================
   VISITANTES ONLINE (page-visitantes-online.php)
   ======================================================================== */
.sl-vo-total {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 3rem 1rem 3.5rem;
	margin-bottom: 2.5rem;
	text-align: center;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: var(--sl-r-xl, 28px);
	background:
		radial-gradient(ellipse at top, rgba(45,212,191,0.08), transparent 60%),
		linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.sl-vo-total-num {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(4rem, 12vw, 8rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--sl-teal) 0%, #7fe4d3 55%, var(--sl-lime) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-vo-total-label {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	margin-top: 0.4rem;
}
.sl-vo-total-live {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-teal, #2dd4bf);
	letter-spacing: 0.08em;
	margin-top: 0.6rem;
}
.sl-vo-total-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 10px var(--sl-teal, #2dd4bf);
	animation: sl-vo-pulse 1.8s ease-in-out infinite;
}
@keyframes sl-vo-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.8); }
}

/* Lista de cidades */
.sl-vo-cities {
	margin-bottom: 2rem;
}
.sl-vo-cities-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.85rem;
}
.sl-vo-cities-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-vo-cities-count {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
}

.sl-vo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.75rem;
}
.sl-vo-city {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(45,212,191,0.03), rgba(45,212,191,0));
	transition: border-color 0.25s, background 0.25s, transform 0.25s;
	animation: sl-vo-in 0.45s ease-out backwards;
	animation-delay: var(--sl-vo-delay, 0ms);
}
.sl-vo-city:hover {
	border-color: rgba(45,212,191,0.35);
	background: linear-gradient(180deg, rgba(45,212,191,0.06), rgba(45,212,191,0));
	transform: translateY(-2px);
}
@keyframes sl-vo-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sl-vo-city-top {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.85rem;
}
.sl-vo-city-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.55rem;
	border-top: 1px dashed rgba(255,255,255,0.06);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-vo-city-meta[hidden] { display: none; }
.sl-vo-meta-time {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-variant-numeric: tabular-nums;
}
.sl-vo-meta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px; height: 14px;
	color: var(--sl-lime, #c4ff3e);
}
.sl-vo-meta-icon[data-state="night"] { color: #8fa8ff; }
.sl-vo-meta-temp {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-variant-numeric: tabular-nums;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
}
.sl-vo-meta-temp[hidden] { display: none; }

/* Variante: localização não detectada */
.sl-vo-city--unknown {
	background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
	border-style: dashed;
	opacity: 0.85;
}
.sl-vo-city--unknown:hover {
	border-color: rgba(255,255,255,0.15);
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
}
.sl-vo-city--unknown .sl-vo-city-pin {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.12);
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-vo-city--unknown .sl-vo-city-count {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-vo-city-pin {
	width: 36px; height: 36px;
	border-radius: 10px;
	background: rgba(45,212,191,0.1);
	border: 1px solid rgba(45,212,191,0.3);
	color: var(--sl-teal, #2dd4bf);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.sl-vo-city-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.sl-vo-city-body strong {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-vo-city-body span {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-vo-city-count {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sl-teal, #2dd4bf);
	line-height: 1;
	letter-spacing: -0.02em;
	min-width: 1.5em;
	text-align: right;
}

/* Empty state */
.sl-vo-empty {
	text-align: center;
	padding: 3rem 1.5rem;
	border: 1px dashed var(--sl-line, rgba(255,255,255,0.1));
	border-radius: var(--sl-r-lg, 18px);
	background: rgba(255,255,255,0.01);
}
.sl-vo-empty-icon {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	opacity: 0.6;
}
.sl-vo-empty h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--sl-text, #fafafc);
}
.sl-vo-empty p {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 0.9rem;
	margin: 0;
	max-width: 480px;
	margin-inline: auto;
}

/* Nota de privacidade */
.sl-vo-privacy {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1rem 1.25rem;
	margin-top: 2rem;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 12px;
	background: rgba(45,212,191,0.04);
	color: var(--sl-teal, #2dd4bf);
}
.sl-vo-privacy > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.sl-vo-privacy strong {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
}
.sl-vo-privacy span {
	font-size: 0.82rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	line-height: 1.5;
}

/* ========================================================================
   BUTTONS
   ======================================================================== */
.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.9rem 1.5rem;
	border-radius: 999px;
	font-family: var(--sl-font-body);
	font-weight: 600;
	font-size: 0.92rem;
	letter-spacing: -0.005em;
	border: none;
	cursor: pointer;
	transition: all 0.35s var(--sl-ease);
	position: relative;
	overflow: hidden;
	text-decoration: none;
	will-change: transform;
	white-space: nowrap;
}
.sl-btn-sm { padding: 0.65rem 1.1rem; font-size: 0.85rem; }
.sl-btn-lg { padding: 1.05rem 1.9rem; font-size: 1rem; }

.sl-btn-primary {
	background: var(--sl-brand);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(0,0,0,0.3);
}
.sl-btn-primary::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent 50%);
	opacity: 0;
	transition: opacity 0.35s;
}
.sl-btn-primary:hover {
	background: var(--sl-brand-2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 12px 30px rgba(var(--sl-brand-rgb), 0.5);
}
.sl-btn-primary:hover::before { opacity: 1; }

.sl-btn-ghost {
	background: transparent;
	color: var(--sl-text);
	box-shadow: inset 0 0 0 1px var(--sl-line-hi);
}
/* Estado ativo dos botões (marca a página atual). */
.sl-btn-ghost.is-active {
	background: rgba(var(--sl-brand-rgb), 0.18);
	box-shadow: inset 0 0 0 1px rgba(var(--sl-brand-rgb), 0.5);
	color: var(--sl-text);
}
.sl-btn-ghost.is-active:hover {
	background: rgba(var(--sl-brand-rgb), 0.26);
	box-shadow: inset 0 0 0 1px rgba(var(--sl-brand-rgb), 0.7);
}
.sl-btn-primary.is-active {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.25),
		0 0 0 3px rgba(var(--sl-brand-rgb), 0.28),
		0 8px 22px -6px rgba(var(--sl-brand-rgb), 0.55);
}
.sl-btn-primary.is-active:hover {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.25),
		0 0 0 4px rgba(var(--sl-brand-rgb), 0.35),
		0 12px 28px -6px rgba(var(--sl-brand-rgb), 0.65);
}

/* ====== BOTÃO LIME ("Área do Cliente" sozinho no header, amarelo) ====== */
.sl-btn-lime {
	background: var(--sl-lime);
	color: #0e0e15;
	font-weight: 700;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.3),
		0 1px 0 rgba(0,0,0,0.25),
		0 8px 22px -6px rgba(var(--sl-lime-rgb), 0.45);
}
.sl-btn-lime:hover {
	background: color-mix(in srgb, var(--sl-lime) 88%, white);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.35),
		0 12px 28px -8px rgba(var(--sl-lime-rgb), 0.65);
}
.sl-btn-lime.is-active {
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.35),
		0 0 0 3px rgba(var(--sl-lime-rgb), 0.4),
		0 10px 24px -6px rgba(var(--sl-lime-rgb), 0.6);
}

/* "Pegajoso" — glow pulsante que chama a atenção sem ser agressivo.
   Desativa pra quem pediu reduced-motion. */
@keyframes sl-btn-sticky-pulse {
	0%, 100% {
		box-shadow:
			inset 0 1px 0 rgba(255,255,255,0.3),
			0 1px 0 rgba(0,0,0,0.25),
			0 8px 22px -6px rgba(var(--sl-lime-rgb), 0.45),
			0 0 0 0 rgba(var(--sl-lime-rgb), 0.55);
	}
	50% {
		box-shadow:
			inset 0 1px 0 rgba(255,255,255,0.3),
			0 1px 0 rgba(0,0,0,0.25),
			0 8px 22px -6px rgba(var(--sl-lime-rgb), 0.45),
			0 0 0 8px rgba(var(--sl-lime-rgb), 0);
	}
}
.sl-btn-sticky {
	animation: sl-btn-sticky-pulse 2.4s ease-in-out infinite;
}
.sl-btn-sticky:hover,
.sl-btn-sticky.is-active {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.sl-btn-sticky { animation: none; }
}
.sl-btn-ghost:hover {
	background: var(--sl-surface);
	box-shadow: inset 0 0 0 1px rgba(var(--sl-brand-rgb), 0.5);
}

.sl-btn-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sl-text);
	font-weight: 600;
	font-size: 0.92rem;
	transition: gap 0.35s var(--sl-ease), color 0.2s;
}
.sl-btn-arrow::after {
	content: "→";
	transition: transform 0.35s var(--sl-ease);
}
.sl-btn-arrow:hover { gap: 0.7rem; color: var(--sl-brand-2); }
.sl-btn-arrow:hover::after { transform: translateX(3px); }

/* ========================================================================
   HEADER
   ======================================================================== */
.sl-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
	background: rgba(8, 8, 12, 0.5);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border-bottom: 1px solid transparent;
	transition: all 0.45s var(--sl-ease);
}
.sl-header.is-scrolled {
	padding-top: 0.7rem;
	padding-bottom: 0.7rem;
	background: rgba(8, 8, 12, 0.85);
	border-bottom-color: var(--sl-line);
}
.sl-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.sl-brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	transition: transform 0.35s var(--sl-ease);
}
.sl-brand-lockup:hover { transform: translateY(-1px); }
.sl-brand-mark {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	filter: drop-shadow(0 4px 14px rgba(var(--sl-teal-rgb), 0.35));
	transition: width 0.3s, height 0.3s;
}
.sl-header.is-scrolled .sl-brand-mark { width: 32px; height: 32px; }
.sl-brand-lockup img { max-height: 44px; width: auto; transition: max-height 0.3s var(--sl-ease); }
.sl-header.is-scrolled .sl-brand-lockup img { max-height: 36px; }
.sl-brand-mark svg { width: 100%; height: 100%; }
.sl-brand-word {
	display: inline-flex; flex-direction: column;
	line-height: 1; gap: 0.15rem;
}
.sl-brand-name {
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--sl-teal);
	letter-spacing: -0.03em;
}
.sl-brand-tag {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: rgba(var(--sl-teal-rgb), 0.7);
	text-transform: uppercase;
}

.sl-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.sl-nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	gap: 0.25rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	padding: 0.3rem;
	backdrop-filter: blur(8px);
}
.sl-nav a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	font-size: 0.87rem;
	font-weight: 500;
	color: var(--sl-text-2);
	transition: all 0.2s;
}
.sl-nav a:hover { color: var(--sl-text); background: rgba(255, 255, 255, 0.05); }
.sl-nav .current-menu-item > a,
.sl-nav .current-menu-parent > a,
.sl-nav .current-menu-ancestor > a,
.sl-nav .current_page_item > a,
.sl-nav .current_page_parent > a,
.sl-nav .current_page_ancestor > a {
	color: var(--sl-text);
	background: rgba(var(--sl-brand-rgb), 0.15);
	box-shadow: inset 0 0 0 1px rgba(var(--sl-brand-rgb), 0.25);
}

.sl-header-actions {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.sl-menu-toggle {
	display: none;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	color: var(--sl-text);
	padding: 0;
	flex-direction: column; justify-content: center; align-items: center;
	gap: 4px;
}
.sl-menu-toggle span {
	display: block; width: 18px; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: all 0.3s;
}

/* ========================================================================
   LIVE TICKER
   ======================================================================== */
/* ========================================================================
   STATUS BAR — uptime real dos servidores (substitui o ticker)
   ======================================================================== */
.sl-status {
	background: linear-gradient(90deg, rgba(var(--sl-teal-rgb), 0.06), rgba(var(--sl-brand-rgb), 0.04));
	border-bottom: 1px solid var(--sl-line);
	position: relative;
	z-index: 2;
	padding: 0.55rem 0;
}
.sl-status-inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.sl-status-items {
	display: flex;
	gap: 1.75rem;
	flex-wrap: wrap;
	align-items: center;
}
.sl-status-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-2);
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.sl-status-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
	flex-shrink: 0;
	animation: sl-status-pulse 2.5s ease-in-out infinite;
}
.sl-status-item[data-status="down"] .sl-status-dot { background: var(--sl-danger); box-shadow: 0 0 8px var(--sl-danger); }
.sl-status-item[data-status="degraded"] .sl-status-dot { background: var(--sl-brand-3); box-shadow: 0 0 8px var(--sl-brand-3); }
@keyframes sl-status-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}
.sl-status-name {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-status-value {
	color: var(--sl-teal);
	font-weight: 700;
}

/* Item "comandos copiados" — ícone laranja no lugar do dot pulsante, valor em brand. */
.sl-status-item--copies .sl-status-copies-icon {
	display: inline-flex;
	color: var(--sl-brand);
	opacity: 0.85;
	flex-shrink: 0;
}
.sl-status-item--copies .sl-status-value {
	color: var(--sl-brand);
	display: inline-block;
	transform-origin: center;
}
/* Animação de incremento — pulse + flash teal momentâneo ao copiar */
.sl-status-item--copies .sl-status-value.is-bumped {
	animation: sl-copies-bump 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sl-copies-bump {
	0%   { transform: scale(1);    color: var(--sl-brand); }
	35%  { transform: scale(1.35); color: var(--sl-teal);  }
	100% { transform: scale(1);    color: var(--sl-brand); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-status-item--copies .sl-status-value.is-bumped { animation: none; }
}
.sl-status-item[data-status="down"] .sl-status-value { color: var(--sl-danger); }
.sl-status-item[data-status="degraded"] .sl-status-value { color: var(--sl-brand-3); }

/* Geo/clima/hora — só aparece depois que o JS busca dados do servidor */
.sl-status-geo[hidden] { display: none !important; } /* respeita atributo hidden */
.sl-status-geo {
	display: inline-flex;
	align-items: center;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-2);
	letter-spacing: 0.05em;
	animation: sl-status-geo-in 0.5s ease both;
}
@keyframes sl-status-geo-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
/* Esconde spans vazios (dentro dos slots) */
.sl-rotator-slot > span:empty { display: none; }

/* Separador · automático entre rotator e time */
.sl-status-geo > .sl-status-geo-rotator:not(:empty) + .sl-status-geo-time::before {
	content: "·";
	color: var(--sl-text-3);
	margin: 0 0.75rem;
	opacity: 0.6;
}

.sl-status-geo-location { color: var(--sl-text); font-weight: 500; }
.sl-status-geo-weather {
	color: var(--sl-teal);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.sl-status-geo-weather .sl-wx-icon { font-size: 0.85rem; line-height: 1; }
.sl-status-geo-weather .sl-wx-temp { font-variant-numeric: tabular-nums; }

/* Rotator: slots empilhados, só o ativo visível — cross-fade suave */
.sl-status-geo-rotator {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 1em;
	min-width: 14em;
}
.sl-rotator-slot {
	position: absolute;
	inset: 0;
	display: inline-flex;
	align-items: center;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.4s var(--sl-ease), transform 0.4s var(--sl-ease);
	white-space: nowrap;
	pointer-events: none;
}
.sl-rotator-slot--active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
/* Separador interno dentro do slot "geo" (entre cidade e clima) */
.sl-rotator-inner-sep {
	display: inline-block;
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--sl-text-3);
	opacity: 0.5;
	margin: 0 1.1rem;
}
.sl-status-geo-location:empty ~ .sl-rotator-inner-sep,
.sl-status-geo-weather:empty ~ .sl-rotator-inner-sep { display: none; }

/* Contador de visitantes online */
.sl-status-online {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--sl-text);
}
.sl-status-online-icon {
	display: inline-flex;
	align-items: center;
	color: var(--sl-teal, #2dd4bf);
	opacity: 0.9;
}
.sl-status-online-icon svg { display: block; }
/* Link clicável do badge "X online agora" → /visitantes-online/ */
.sl-status-online--link {
	text-decoration: none;
	transition: color 0.2s, opacity 0.2s;
	cursor: pointer;
}
.sl-status-online--link:hover {
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-online--link:hover .sl-status-online-icon { opacity: 1; }
.sl-status-online-count {
	color: var(--sl-teal);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Ícone sol/lua antes da hora */
.sl-status-geo-time {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.sl-status-geo-daynight { font-size: 0.85rem; }
.sl-status-geo-daynight:empty { display: none; }
.sl-status-geo-time {
	color: var(--sl-text-2);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

@media (max-width: 768px) {
	.sl-status-inner { flex-direction: column; gap: 0.5rem; align-items: stretch; }
	.sl-status-items {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 0.25rem;
		margin: 0 -1rem;
		padding-left: 1rem;
		padding-right: 1rem;
		scrollbar-width: none;
	}
	.sl-status-items::-webkit-scrollbar { display: none; }
	.sl-status-geo { justify-content: center; flex-wrap: wrap; }
}
@media (max-width: 480px) {
	/* Em smartphones pequenos esconde o clima pra economizar espaço */
	.sl-status-geo-weather,
	.sl-status-geo-weather + .sl-status-geo-sep { display: none; }
}

/* ========================================================================
   HERO ASSIMÉTRICO
   ======================================================================== */
.sl-hero {
	padding: 5rem 0 6rem;
	position: relative;
	overflow: hidden;
}
.sl-hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 4rem;
	align-items: center;
}
.sl-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
}
.sl-hero-title { margin-top: 1rem; }
.sl-hero-sub {
	font-size: 1.1rem;
	color: var(--sl-text-2);
	max-width: 530px;
	line-height: 1.55;
}
.sl-hero-ctas {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}

.sl-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-line);
}
.sl-stat-n {
	font-family: var(--sl-font-display);
	font-size: clamp(1.8rem, 3.2vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--sl-text);
}
.sl-stat-l {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--sl-text-3);
	margin-top: 0.4rem;
}

/* Visual direita: stack de cards 3D */
/* Wrapper do atalho demo na página Plataforma — centraliza a pílula */
.sl-plat-demo-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

/* Card de demo interativa na página Plataforma */
.sl-demo-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.75rem;
	align-items: center;
	margin-top: 3rem;
	padding: 1.75rem;
	border: 1px solid rgba(45, 212, 191, 0.28);
	border-radius: var(--sl-r-xl, 28px);
	background:
		radial-gradient(ellipse at 10% 50%, rgba(45, 212, 191, 0.08), transparent 55%),
		linear-gradient(135deg, rgba(20, 22, 28, 0.65), rgba(14, 14, 20, 0.85));
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6),
	            0 0 0 1px rgba(45, 212, 191, 0.06),
	            0 0 40px -10px rgba(45, 212, 191, 0.2);
	position: relative;
	overflow: hidden;
}
.sl-demo-card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 20% 30%, rgba(241, 96, 0, 0.07), transparent 50%);
	pointer-events: none;
}
.sl-demo-card > * { position: relative; z-index: 1; }

/* Mini mapa visual à esquerda */
.sl-demo-card-viz {
	aspect-ratio: 1;
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: var(--sl-r-lg, 18px);
	overflow: hidden;
	background: linear-gradient(180deg, #0a0a12, #080810);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5);
}
.sl-demo-card-viz svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Conteúdo à direita */
.sl-demo-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	min-width: 0;
}
.sl-demo-card-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	align-self: flex-start;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgba(45, 212, 191, 0.12);
	border: 1px solid rgba(45, 212, 191, 0.3);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sl-teal, #2dd4bf);
}
.sl-demo-card-badge-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	animation: sl-ticker-pulse 1.6s ease-in-out infinite;
}
.sl-demo-card-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--sl-text, #fafafc);
	margin: 0;
}
.sl-demo-card-desc {
	color: var(--sl-text-2, rgba(250, 250, 252, 0.65));
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
}
.sl-demo-card-desc strong { color: var(--sl-text, #fafafc); font-weight: 600; }

.sl-demo-card-feats {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.sl-demo-card-feats li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.7));
}
.sl-demo-card-feats li span {
	width: 26px;
	text-align: center;
	font-size: 0.95rem;
}

.sl-demo-card-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.4rem;
}
.sl-demo-card-note {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.45));
	letter-spacing: 0.04em;
}

/* Responsivo */
@media (max-width: 780px) {
	.sl-demo-card {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		padding: 1.5rem;
	}
	.sl-demo-card-viz {
		max-width: 280px;
		margin: 0 auto;
	}
	.sl-demo-card-actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Link sutil pra demo interativa — pílula com badge "DEMO" */
.sl-hero-demo-link {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.9rem 0.55rem 0.55rem;
	margin-top: 1.25rem;
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 999px;
	background: rgba(45, 212, 191, 0.06);
	font-size: 0.82rem;
	color: var(--sl-text-2);
	text-decoration: none;
	transition: border-color 0.25s var(--sl-ease),
	            background 0.25s var(--sl-ease),
	            color 0.25s var(--sl-ease),
	            transform 0.25s var(--sl-ease);
	max-width: 100%;
}
.sl-hero-demo-link:hover {
	border-color: rgba(45, 212, 191, 0.55);
	background: rgba(45, 212, 191, 0.12);
	color: var(--sl-text);
	transform: translateY(-1px);
}
.sl-hero-demo-link > span:nth-child(2) { flex: 1; min-width: 0; }
.sl-hero-demo-link-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.22rem 0.55rem;
	border-radius: 999px;
	background: rgba(45, 212, 191, 0.18);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--sl-teal);
	flex-shrink: 0;
}
.sl-hero-demo-link-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
	animation: sl-ticker-pulse 1.6s ease-in-out infinite;
}
.sl-hero-demo-link-arrow {
	color: var(--sl-teal);
	font-weight: 700;
	transition: transform 0.2s var(--sl-ease);
	flex-shrink: 0;
}
.sl-hero-demo-link:hover .sl-hero-demo-link-arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.sl-hero-demo-link-dot { animation: none; }
}

.sl-hero-visual {
	position: relative;
	aspect-ratio: 1 / 1.05;
	perspective: 1800px;
}
.sl-stack-card {
	position: absolute;
	background: rgba(20, 20, 30, 0.85);
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-lg);
	box-shadow: var(--sl-shadow-lg), 0 0 0 1px rgba(255,255,255,0.02);
	padding: 1.5rem;
	backdrop-filter: blur(20px);
	transform-style: preserve-3d;
	will-change: transform;
}

/* Card 1 — principal, mapa abstrato */
.sl-stack-map {
	inset: 10% 6% 10% 6%;
	transform: rotateX(12deg) rotateY(-12deg);
	overflow: hidden;
	background: linear-gradient(180deg, rgba(14,14,21,0.95), rgba(8,8,12,0.98));
}
.sl-stack-map-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(var(--sl-brand-rgb), 0.15) 1px, transparent 1px),
		linear-gradient(90deg, rgba(var(--sl-brand-rgb), 0.15) 1px, transparent 1px);
	background-size: 40px 40px;
	mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}
.sl-stack-map-route {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.sl-stack-map-route path {
	fill: none;
	stroke: var(--sl-brand);
	stroke-width: 2;
	stroke-dasharray: 6 6;
	filter: drop-shadow(0 0 8px rgba(var(--sl-brand-rgb), 0.8));
	animation: sl-route-draw 3s linear infinite;
}
@keyframes sl-route-draw { to { stroke-dashoffset: -96; } }

/* Decorativos de fundo — blocos de cidade + ruas curvadas */
.sl-stack-map-deco {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Scan line teal descendo o mapa */
.sl-stack-map-scan {
	position: absolute;
	left: 0; right: 0; top: -8px;
	height: 6px;
	background: linear-gradient(90deg,
		rgba(45,212,191,0) 0%,
		rgba(45,212,191,0.45) 50%,
		rgba(45,212,191,0) 100%);
	opacity: 0.55;
	animation: sl-stack-scan 5s linear infinite;
	z-index: 2;
	pointer-events: none;
}
@keyframes sl-stack-scan {
	0%   { transform: translateY(0); }
	100% { transform: translateY(105%); }
}

/* Coordenadas decorativas nos cantos do mapa */
.sl-stack-map-coords {
	position: absolute;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.58rem;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.35);
	z-index: 3;
	pointer-events: none;
}
.sl-stack-map-coords--tl { top: 0.75rem; left: 0.85rem; }
.sl-stack-map-coords--tr { top: 0.75rem; right: 0.85rem; }
.sl-stack-map-coords--bl { bottom: 0.75rem; left: 0.85rem; }
.sl-stack-map-coords--br { bottom: 0.75rem; right: 0.85rem; }

/* Compass rose (canto direito superior — abaixo das coords) */
.sl-stack-map-compass {
	position: absolute;
	top: 2.2rem; right: 0.75rem;
	width: 46px; height: 46px;
	color: rgba(45,212,191,0.9);
	z-index: 3;
	pointer-events: none;
	animation: sl-compass-spin 20s linear infinite;
	filter: drop-shadow(0 0 6px rgba(45,212,191,0.35));
}
.sl-stack-map-compass svg { width: 100%; height: 100%; display: block; }
@keyframes sl-compass-spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* Mini chip de satélite + HDOP (flutuante inferior-centro) */
.sl-stack-map-stats {
	position: absolute;
	bottom: 0.75rem; left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.7rem;
	background: rgba(10, 10, 18, 0.85);
	border: 1px solid rgba(45, 212, 191, 0.28);
	border-radius: 999px;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	color: var(--sl-teal, #2dd4bf);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 12px rgba(45,212,191,0.15);
	z-index: 4;
}
.sl-stack-map-stat { white-space: nowrap; }
.sl-stack-map-stat-dot {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	margin-right: 0.3rem;
	animation: sl-stack-pulse 1.8s ease-in-out infinite;
	vertical-align: middle;
}
.sl-stack-map-stat-sep { opacity: 0.4; }
@keyframes sl-stack-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

/* Reduced motion: desativa animações decorativas */
@media (prefers-reduced-motion: reduce) {
	.sl-stack-pin::before,
	.sl-stack-map-scan,
	.sl-stack-map-compass,
	.sl-stack-map-stat-dot { animation: none; }
}

.sl-stack-pin {
	position: absolute;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--pin-c, var(--sl-brand));
	border: 3px solid #fff;
	color: #fff;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	display: grid; place-items: center;
	box-shadow:
		0 8px 20px rgba(0,0,0,0.6),
		0 0 18px color-mix(in srgb, var(--pin-c, #f16000) 60%, transparent);
	z-index: 3;
}
/* Halo animado ao redor de cada pin (expande + fade) */
.sl-stack-pin::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid var(--pin-c, var(--sl-brand));
	animation: sl-pin-halo 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes sl-pin-halo {
	0%   { opacity: 0.9; transform: scale(0.75); }
	100% { opacity: 0;   transform: scale(1.9); }
}
.sl-stack-pin::after {
	content: "";
	position: absolute;
	bottom: -6px; left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: var(--pin-c, var(--sl-brand));
}
/* Delays pra dessincronizar os pulsos */
.sl-stack-map > .sl-stack-pin:nth-of-type(1)::before { animation-delay: 0s; }
.sl-stack-map > .sl-stack-pin:nth-of-type(2)::before { animation-delay: 0.8s; }
.sl-stack-map > .sl-stack-pin:nth-of-type(3)::before { animation-delay: 1.6s; }

/* PIN "VOCÊ" — posição dinâmica via JS (lat/lon do visitante) */
.sl-stack-pin-you {
	position: absolute;
	width: 0; height: 0;
	z-index: 4;
	transition: top 0.6s var(--sl-ease), left 0.6s var(--sl-ease);
}
.sl-stack-pin-you[hidden] { display: none; }
.sl-stack-pin-you-dot {
	position: absolute;
	top: 50%; left: 50%;
	width: 14px; height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--sl-lime);
	border: 2.5px solid #fff;
	box-shadow: 0 0 20px var(--sl-lime), 0 4px 10px rgba(0,0,0,0.6);
}
.sl-stack-pin-you-halo {
	position: absolute;
	top: 50%; left: 50%;
	width: 14px; height: 14px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid var(--sl-lime);
	animation: sl-pin-you-pulse 2s ease-out infinite;
	pointer-events: none;
}
.sl-stack-pin-you-halo--2 { animation-delay: 1s; }
@keyframes sl-pin-you-pulse {
	0%   { opacity: 0.9; width: 14px; height: 14px; }
	100% { opacity: 0;   width: 60px; height: 60px; }
}
.sl-stack-pin-you-label {
	position: absolute;
	top: 22px; left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	background: rgba(10, 10, 18, 0.92);
	border: 1px solid rgba(var(--sl-lime-rgb), 0.3);
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	font-family: var(--sl-font-mono);
	font-size: 0.55rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-lime);
	backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   Card 2 — LIVE DATA CARD (ultra moderno pulsante)
   Efeitos: borda animada gradient, glow pulsante no número,
            badge AO VIVO, shimmer na barra, aurora no fundo
   ═══════════════════════════════════════════════════════════════════ */
.sl-stack-data {
	position: absolute;
	bottom: -2%; right: -8%;
	width: 290px;
	transform: rotateX(8deg) rotateY(-10deg);
	background: linear-gradient(135deg, rgba(18, 18, 28, 0.96) 0%, rgba(12, 12, 20, 0.98) 100%);
	z-index: 5;
	padding: 1.15rem 1.35rem;
	border-radius: 16px;
	overflow: hidden;
	box-shadow:
		0 30px 80px -20px rgba(45, 212, 191, 0.18),
		0 10px 30px -10px rgba(0, 0, 0, 0.7);
}
/* Row superior: título + badge lado a lado */
.sl-stack-data-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.65rem;
}
/* Aurora sutil no fundo — gira 30s */
.sl-stack-data-glow {
	position: absolute;
	inset: -50%;
	background: conic-gradient(from 0deg at 50% 50%,
		rgba(var(--sl-teal-rgb), 0.35) 0deg,
		transparent 90deg,
		rgba(var(--sl-lime-rgb), 0.3) 180deg,
		transparent 270deg,
		rgba(var(--sl-teal-rgb), 0.35) 360deg);
	filter: blur(40px);
	animation: sl-data-aurora 30s linear infinite;
	pointer-events: none;
	opacity: 0.55;
}
@keyframes sl-data-aurora {
	to { transform: rotate(360deg); }
}
/* Borda gradient animada com mask trick */
.sl-stack-data::before {
	content: "";
	position: absolute; inset: 0;
	border-radius: 16px;
	padding: 1.5px;
	background: linear-gradient(135deg,
		rgba(var(--sl-teal-rgb), 0.8),
		rgba(var(--sl-lime-rgb), 0.4),
		rgba(var(--sl-teal-rgb), 0.8));
	background-size: 200% 200%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: sl-data-border 5s ease infinite;
	pointer-events: none;
	z-index: 1;
}
@keyframes sl-data-border {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}
.sl-stack-data > *:not(.sl-stack-data-glow) { position: relative; z-index: 2; }

/* Badge AO VIVO (em linha com o título) */
.sl-stack-data-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	background: rgba(var(--sl-teal-rgb), 0.12);
	border: 1px solid rgba(var(--sl-teal-rgb), 0.35);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.55rem;
	color: var(--sl-teal);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	flex-shrink: 0;
	white-space: nowrap;
}
.sl-stack-data-badge-dot {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 6px var(--sl-teal);
	animation: sl-data-dot-pulse 1.2s ease-in-out infinite;
}
@keyframes sl-data-dot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.4; transform: scale(1.4); }
}

.sl-stack-data-title {
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Valor grande com glow pulsante (breathing) */
.sl-stack-data-value {
	font-family: var(--sl-font-display);
	font-size: 2.3rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 18px rgba(var(--sl-teal-rgb), 0.35));
	animation: sl-data-value-breathe 3s ease-in-out infinite;
}
.sl-stack-data[data-mode="distance"] .sl-stack-data-value {
	background: linear-gradient(135deg, var(--sl-lime) 0%, var(--sl-teal) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 20px rgba(var(--sl-lime-rgb), 0.4));
}
@keyframes sl-data-value-breathe {
	0%, 100% { filter: drop-shadow(0 0 18px rgba(var(--sl-teal-rgb), 0.35)); }
	50%      { filter: drop-shadow(0 0 28px rgba(var(--sl-teal-rgb), 0.55)); }
}

.sl-stack-data-unit { color: var(--sl-teal); font-size: 1rem; margin-left: 0.3rem; }
.sl-stack-data-sub {
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 0.35rem;
}
.sl-stack-data-sub:empty { display: none; }

/* Barra com shimmer + largura viva */
.sl-stack-data-bar {
	margin-top: 0.85rem;
	height: 4px; border-radius: 2px;
	background: rgba(255,255,255,0.08);
	overflow: hidden;
	position: relative;
}
.sl-stack-data-bar::after {
	content: "";
	position: absolute; inset: 0;
	width: 70%;
	background: linear-gradient(90deg, var(--sl-brand), var(--sl-teal));
	border-radius: 2px;
	animation: sl-bar 4s ease-in-out infinite;
}
/* No modo distância, barra vira teal→lime (cor do pin) */
.sl-stack-data[data-mode="distance"] .sl-stack-data-bar::after {
	background: linear-gradient(90deg, var(--sl-teal), var(--sl-lime));
}
/* Shimmer: luz viajando de esquerda pra direita sobre a barra */
.sl-stack-data-bar::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: -40%;
	width: 40%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	animation: sl-bar-shimmer 2.5s ease-in-out infinite;
	z-index: 1;
}
@keyframes sl-bar-shimmer {
	0%   { left: -40%; }
	100% { left: 140%; }
}
@keyframes sl-bar {
	0%, 100% { width: 40%; }
	50%      { width: 85%; }
}

/* ========================================================================
   SECTION HEAD (título centralizado pra seções)
   ======================================================================== */
.sl-s-head {
	max-width: 760px;
	margin: 0 auto 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}
.sl-s-head h2 {
	font-size: clamp(2rem, 4.5vw, 3.5rem);
	font-weight: 500;
	letter-spacing: -0.04em;
}
.sl-s-head p {
	color: var(--sl-text-2);
	font-size: 1.05rem;
}

/* ========================================================================
   BENTO PREMIUM — 2 cards lado a lado (plataforma + suporte)
   Visual: conic border rotating + ghost number + mouse spotlight
   ======================================================================== */

/* Property pra animar conic-gradient — @property permite transitions em custom props */
@property --sl-bx-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.sl-bx {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	margin-top: 2.5rem;
}
@media (max-width: 900px) {
	.sl-bx { grid-template-columns: 1fr; }
}

.sl-bx-card {
	position: relative;
	color: inherit;
	text-decoration: none;
	padding: 2.2rem 2.2rem 2rem;
	border-radius: 24px;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	overflow: hidden;
	isolation: isolate;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	transition:
		transform 0.6s cubic-bezier(0.22,1,0.36,1),
		box-shadow 0.6s;
	box-shadow:
		0 1px 0 0 rgba(255,255,255,0.05) inset,
		0 20px 50px -20px rgba(0,0,0,0.55);
}

/* Borda conic-gradient RODANDO infinitamente (sutil) */
.sl-bx-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1.5px;
	background: conic-gradient(
		from var(--sl-bx-angle),
		transparent 0deg,
		var(--sl-bx-accent, rgba(45,212,191,0.6)) 90deg,
		transparent 180deg,
		var(--sl-bx-accent, rgba(45,212,191,0.6)) 270deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	--sl-bx-angle: 0deg;
	animation: sl-bx-rotate 10s linear infinite;
	pointer-events: none;
	z-index: 1;
	opacity: 0.6;
	transition: opacity 0.4s;
}
@keyframes sl-bx-rotate {
	to { --sl-bx-angle: 360deg; }
}
.sl-bx-card:hover::before {
	opacity: 1;
	animation-duration: 4s;
}

/* Mouse spotlight (JS atualiza --mx/--my com coords) */
.sl-bx-spot {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle 250px at var(--mx, 50%) var(--my, 50%),
		var(--sl-bx-glow, rgba(45,212,191,0.18)) 0%,
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
	z-index: 0;
}
.sl-bx-card:hover .sl-bx-spot { opacity: 1; }

/* Hover state geral */
.sl-bx-card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 0 rgba(255,255,255,0.08) inset,
		0 30px 70px -20px rgba(0,0,0,0.65),
		0 0 80px -30px var(--sl-bx-glow-strong, rgba(45,212,191,0.3));
}

/* Lista de features com check (Card 01) */
.sl-bx-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	position: relative;
	z-index: 3;
	flex: 1;
}
.sl-bx-list li {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 0.8rem;
	align-items: start;
}
.sl-bx-list-check {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--sl-bx-icon-bg, rgba(241,96,0,0.12));
	border: 1px solid var(--sl-bx-accent, rgba(241,96,0,0.35));
	color: var(--sl-bx-accent-solid, #f16000);
	flex-shrink: 0;
	margin-top: 0.15rem;
}
.sl-bx-list li strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	line-height: 1.3;
	margin-bottom: 0.2rem;
}
.sl-bx-list li span {
	display: block;
	font-size: 0.83rem;
	line-height: 1.5;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}

/* Fluxo de suporte 2 camadas (Card 02) */
.sl-bx-flow {
	display: flex;
	align-items: stretch;
	gap: 0.6rem;
	margin: 0.5rem 0 1.5rem;
	padding: 1.25rem 1rem;
	border: 1px dashed rgba(255,255,255,0.08);
	border-radius: 14px;
	background: rgba(255,255,255,0.02);
	position: relative;
	z-index: 3;
	flex: 1;
	align-self: flex-start;
}
.sl-bx-flow-node {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 0.5rem;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	background: rgba(255,255,255,0.03);
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	transition: border-color 0.3s, color 0.3s, background 0.3s, transform 0.3s;
}
.sl-bx-flow-node--primary {
	border-color: var(--sl-bx-accent, rgba(45,212,191,0.4));
	background: rgba(45,212,191,0.08);
	color: var(--sl-bx-accent-solid, var(--sl-teal));
}
.sl-bx-card:hover .sl-bx-flow-node--primary {
	transform: translateY(-3px);
	box-shadow: 0 10px 20px -10px rgba(45,212,191,0.4);
}
.sl-bx-flow-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
}
.sl-bx-flow-arrow {
	display: grid;
	place-items: center;
	font-size: 1.2rem;
	color: var(--sl-text-3, rgba(250,250,252,0.4));
	font-weight: 700;
	animation: sl-bx-flow-arrow-pulse 2.4s ease-in-out infinite;
}
.sl-bx-flow-arrow:nth-of-type(2) { animation-delay: 0.4s; }
@keyframes sl-bx-flow-arrow-pulse {
	0%, 100% { opacity: 0.4; transform: translateX(0); }
	50%      { opacity: 1;   transform: translateX(3px); }
}
@media (max-width: 560px) {
	.sl-bx-flow { padding: 1rem 0.75rem; gap: 0.4rem; }
	.sl-bx-flow-node { padding: 0.6rem 0.3rem; gap: 0.35rem; }
	.sl-bx-flow-label { font-size: 0.58rem; letter-spacing: 0.04em; }
	.sl-bx-flow-arrow { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-bx-card::before,
	.sl-bx-flow-arrow { animation: none; }
}

/* Head do card (icon + eyebrow label) */
.sl-bx-head {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 1.25rem;
	position: relative;
	z-index: 3;
}
.sl-bx-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.35s;
}
.sl-bx-card:hover .sl-bx-icon {
	transform: rotate(-4deg) scale(1.08);
	border-color: var(--sl-bx-accent, rgba(45,212,191,0.4));
}
.sl-bx-eyebrow {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	transition: color 0.35s;
}
.sl-bx-card:hover .sl-bx-eyebrow {
	color: var(--sl-bx-accent-solid, var(--sl-teal));
}

/* Title + desc */
.sl-bx-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin: 0 0 0.85rem;
	color: var(--sl-text, #fafafc);
	position: relative;
	z-index: 3;
	max-width: 18ch;
}
.sl-bx-desc {
	font-size: 0.97rem;
	line-height: 1.6;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	margin: 0 0 1.5rem;
	position: relative;
	z-index: 3;
	max-width: 52ch;
	flex: 1;
}

/* Tags */
.sl-bx-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	position: relative;
	z-index: 3;
}
.sl-bx-tag {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.sl-bx-card:hover .sl-bx-tag {
	border-color: rgba(255,255,255,0.15);
}
.sl-bx-tag--brand {
	background: rgba(241,96,0,0.12);
	border-color: rgba(241,96,0,0.35);
	color: var(--sl-brand, #f16000);
}
.sl-bx-tag--teal {
	background: rgba(45,212,191,0.12);
	border-color: rgba(45,212,191,0.35);
	color: var(--sl-teal, #2dd4bf);
}

/* Variantes de cor (hue) */
.sl-bx-card--brand {
	--sl-bx-accent:        rgba(241,96,0,0.55);
	--sl-bx-accent-solid:  #f16000;
	--sl-bx-glow:          rgba(241,96,0,0.18);
	--sl-bx-glow-strong:   rgba(241,96,0,0.35);
	--sl-bx-icon-bg:       rgba(241,96,0,0.12);
}
.sl-bx-card--teal {
	--sl-bx-accent:        rgba(45,212,191,0.55);
	--sl-bx-accent-solid:  #2dd4bf;
	--sl-bx-glow:          rgba(45,212,191,0.18);
	--sl-bx-glow-strong:   rgba(45,212,191,0.35);
	--sl-bx-icon-bg:       rgba(45,212,191,0.12);
}

/* =============== LEGACY BENTO (mantido no CSS pra outras páginas) =============== */
.sl-bento {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(200px, auto);
	gap: 1.25rem;
}
.sl-bento-cell {
	position: relative;
	background: rgba(18, 18, 26, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	padding: 1.75rem;
	overflow: hidden;
	transition: all 0.5s var(--sl-ease);
	backdrop-filter: blur(10px);
	display: flex; flex-direction: column;
	--mx: 50%; --my: 50%;
}
.sl-bento-cell::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: var(--sl-r-lg);
	padding: 1px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.3), transparent 50%, rgba(var(--sl-teal-rgb), 0.2));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0; transition: opacity 0.5s;
	pointer-events: none;
}
.sl-bento-cell::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(400px circle at var(--mx) var(--my), rgba(var(--sl-brand-rgb), 0.12), transparent 50%);
	opacity: 0; transition: opacity 0.5s;
	pointer-events: none;
}
.sl-bento-cell:hover {
	transform: translateY(-4px);
	background: rgba(22, 22, 32, 0.8);
}
.sl-bento-cell:hover::before,
.sl-bento-cell:hover::after { opacity: 1; }

.sl-bento-cell > * { position: relative; z-index: 1; }

.sl-bento-cell h3 {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0.75rem 0 0.5rem;
}
.sl-bento-cell p {
	color: var(--sl-text-2);
	font-size: 0.93rem;
	margin: 0;
}

/* Ícone pequeno (canto-superior-esquerdo em TODOS os cards — padronizado) */
.sl-bento-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.2), rgba(var(--sl-brand-rgb), 0.05));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	display: grid; place-items: center;
	color: var(--sl-brand-3);
	flex-shrink: 0;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 700;
	font-size: 0.92rem;
	letter-spacing: -0.02em;
}
.sl-bento-icon--lime {
	background: linear-gradient(135deg, rgba(var(--sl-lime-rgb), 0.18), rgba(var(--sl-lime-rgb), 0.05));
	border-color: rgba(var(--sl-lime-rgb), 0.3);
	color: var(--sl-lime);
}

/* Body do card: título + descrição agrupados, empurrando tags/bars pro rodapé */
.sl-bento-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 1rem;
}
.sl-bento-body h3 { margin: 0; }
.sl-bento-body p { margin: 0; }

/* Tags no rodapé do card (ex: Painel web · App iOS · App Android · Seu domínio) */
.sl-bento-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 1.1rem;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.02em;
}
.sl-bento-tag {
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--sl-line);
	color: var(--sl-text-2);
	white-space: nowrap;
	transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.sl-bento-cell:hover .sl-bento-tag {
	border-color: rgba(255, 255, 255, 0.12);
}
.sl-bento-tag--brand {
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
}
.sl-bento-tag--teal {
	background: rgba(var(--sl-teal-rgb), 0.08);
	border-color: rgba(var(--sl-teal-rgb), 0.3);
	color: var(--sl-teal);
}

/* Bento variants (tamanhos) */
.sl-bento-a { grid-column: span 2; grid-row: span 2; }  /* grande 2x2 */
.sl-bento-b { grid-column: span 2; grid-row: span 1; }  /* wide */
.sl-bento-c { grid-column: span 1; grid-row: span 2; }  /* tall */
.sl-bento-d { grid-column: span 1; }                     /* 1x1 */

/* Card especial: radar dentro do bento A */
.sl-bento-radar {
	position: absolute;
	right: -60px; bottom: -60px;
	width: 350px; height: 350px;
	opacity: 0.7;
	pointer-events: none;
	z-index: 0 !important;
}
.sl-bento-radar .ring {
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 1.5px solid rgba(var(--sl-brand-rgb), 0.25);
}
.sl-bento-radar .ring-2 { inset: 20%; border-color: rgba(var(--sl-brand-rgb), 0.18); }
.sl-bento-radar .ring-3 { inset: 40%; border-color: rgba(var(--sl-brand-rgb), 0.14); }
.sl-bento-radar .sweep {
	position: absolute; inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0%, rgba(var(--sl-brand-rgb), 0.35) 15%, transparent 30%);
	animation: sl-radar-sweep 4s linear infinite;
}
@keyframes sl-radar-sweep { to { transform: rotate(360deg); } }
.sl-bento-radar .blip {
	position: absolute;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-brand);
	box-shadow: 0 0 12px var(--sl-brand);
	animation: sl-blip 4s ease-in-out infinite;
}
.sl-bento-radar .blip:nth-child(1) { top: 30%; left: 70%; animation-delay: 0s; }
.sl-bento-radar .blip:nth-child(2) { top: 55%; left: 35%; animation-delay: 1.2s; }
.sl-bento-radar .blip:nth-child(3) { top: 22%; left: 48%; animation-delay: 2.5s; }
@keyframes sl-blip { 0%, 100% { opacity: 0; transform: scale(0.4); } 30%, 70% { opacity: 1; transform: scale(1); } }

/* Bar chart mini (dentro de bento) */
.sl-mini-bars {
	display: flex; align-items: flex-end;
	gap: 0.35rem;
	height: 64px;
	margin-top: auto;
	padding-top: 1rem;
}
.sl-mini-bars .bar {
	flex: 1;
	background: linear-gradient(180deg, var(--sl-brand), var(--sl-brand-3));
	border-radius: 3px 3px 0 0;
	opacity: 0.5;
	animation: sl-bar-grow 2.5s ease-in-out infinite;
}
.sl-mini-bars .bar:nth-child(1) { animation-delay: 0s; }
.sl-mini-bars .bar:nth-child(2) { animation-delay: 0.2s; opacity: 0.7; }
.sl-mini-bars .bar:nth-child(3) { animation-delay: 0.4s; opacity: 1; }
.sl-mini-bars .bar:nth-child(4) { animation-delay: 0.6s; opacity: 0.85; }
.sl-mini-bars .bar:nth-child(5) { animation-delay: 0.8s; opacity: 0.6; }
.sl-mini-bars .bar:nth-child(6) { animation-delay: 1s; opacity: 0.9; }
.sl-mini-bars .bar:nth-child(7) { animation-delay: 1.2s; opacity: 0.7; }
@keyframes sl-bar-grow {
	0%, 100% { height: 30%; }
	50% { height: 95%; }
}

/* Shield icon wrap (pra bloqueio) */
.sl-bento-shield {
	width: 120px; height: 120px;
	margin: auto auto 1.5rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--sl-brand-rgb), 0.2), transparent 60%);
	display: grid; place-items: center;
	position: relative;
}
.sl-bento-shield::before {
	content: "";
	position: absolute; inset: -10px;
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 50%;
	animation: sl-ripple 3s ease-out infinite;
}
@keyframes sl-ripple {
	0% { opacity: 1; transform: scale(0.8); }
	100% { opacity: 0; transform: scale(1.4); }
}

/* ========================================================================
   BIG NUMBER SECTION
   ======================================================================== */
/* ========================================================================
   BIG NUMBER PREMIUM (section-bignum.php) — uptime ultra moderno
   Holographic number + aurora + sparkline equalizer + scanline CRT
   ======================================================================== */

.sl-bxnum-section {
	position: relative;
	padding: 6rem 0 5rem;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

/* ── Background FX ─────────────────────────────────────── */
.sl-bxnum-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}
/* Dots pattern */
.sl-bxnum-dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	opacity: 0.5;
}
/* Aurora orbs — desativadas (user pediu pra remover glows de canto) */
.sl-bxnum-aurora { display: none !important; }
@keyframes sl-bxnum-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-40px, 30px) scale(1.15); }
}
/* Central glow que destaca o número */
.sl-bxnum-glow {
	position: absolute;
	top: 25%; left: 50%;
	transform: translate(-50%, -50%);
	width: 900px; height: 500px;
	background: radial-gradient(ellipse, rgba(241,96,0,0.18), transparent 60%);
	filter: blur(40px);
	pointer-events: none;
}
/* Scanline CRT descendo lento */
.sl-bxnum-scanline {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(45,212,191,0.04) 48%,
		rgba(45,212,191,0.08) 50%,
		rgba(45,212,191,0.04) 52%,
		transparent 100%
	);
	background-size: 100% 8px;
	opacity: 0.6;
	animation: sl-bxnum-scan 6s linear infinite;
	mix-blend-mode: screen;
}
@keyframes sl-bxnum-scan {
	0%   { background-position: 0 -100%; }
	100% { background-position: 0 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-bxnum-aurora,
	.sl-bxnum-scanline,
	.sl-bxnum-value-shine,
	.sl-bxnum-srv-bar,
	.sl-bxnum-eyebrow-pulse::before,
	.sl-bxnum-srv-dot::after { animation: none; }
}

/* ── Eyebrow ─────────────────────────────────────── */
.sl-bxnum-eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: fit-content;
	margin: 0 auto 3rem;
	padding: 0.5rem 1rem 0.5rem 0.85rem;
	border: 1px solid rgba(45,212,191,0.25);
	border-radius: 999px;
	background: rgba(14,14,21,0.6);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--sl-text-2, rgba(250,250,252,0.75));
}
.sl-bxnum-eyebrow-pulse {
	position: relative;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 10px var(--sl-teal, #2dd4bf);
}
.sl-bxnum-eyebrow-pulse::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid var(--sl-teal, #2dd4bf);
	animation: sl-bxnum-ring 2s ease-out infinite;
}
@keyframes sl-bxnum-ring {
	0%   { transform: scale(1);   opacity: 0.9; }
	100% { transform: scale(2.5); opacity: 0; }
}
.sl-bxnum-eyebrow-text { white-space: nowrap; }
.sl-bxnum-eyebrow-live {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(196,255,62,0.12);
	border: 1px solid rgba(196,255,62,0.35);
	color: var(--sl-lime, #c4ff3e);
	font-size: 0.6rem;
	letter-spacing: 0.2em;
}
.sl-bxnum-eyebrow-live-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-lime, #c4ff3e);
	box-shadow: 0 0 8px var(--sl-lime, #c4ff3e);
	animation: sl-bxnum-blink 1.2s ease-in-out infinite;
}
@keyframes sl-bxnum-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

/* ── Big Value Stack ─────────────────────────────────────── */
.sl-bxnum-value {
	position: relative;
	display: flex;
	align-items: baseline;
	justify-content: center;
	width: fit-content;
	line-height: 0.9;
	letter-spacing: -0.05em;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 800;
	font-size: clamp(3.5rem, 13vw, 10.5rem);
	margin: 0 auto 2rem;
	/* padding assimétrico: mais à direita pra acomodar drop-shadow laranja do % */
	padding: 0.25em 2em 0.15em 1.5em;
	white-space: nowrap;
	max-width: calc(100% - 2rem);
	overflow: visible;
}

/* Em telas ultra-wide (>1600px) limita pelo wrap em vez do vw */
@media (min-width: 1400px) {
	.sl-bxnum-value { font-size: clamp(8rem, 11vw, 9.5rem); }
}

/* Mobile: número menor pra não empurrar laterais */
@media (max-width: 520px) {
	.sl-bxnum-value { font-size: clamp(2.8rem, 17vw, 4.5rem); }
}

/* Echo: versão offset atrás do número pra dar profundidade */
.sl-bxnum-value-echo {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	color: transparent;
	-webkit-text-stroke: 1px rgba(241,96,0,0.15);
	pointer-events: none;
	z-index: 0;
	filter: blur(2px);
}

/* Main: número com gradient holográfico */
.sl-bxnum-value-main {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: baseline;
}
.sl-bxnum-value-num {
	background: linear-gradient(180deg,
		#ffffff 0%,
		#e8e8f0 40%,
		#a8a8b8 90%,
		#808090 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.sl-bxnum-value-pct {
	background: linear-gradient(135deg, #ff7a1a 0%, var(--sl-brand, #f16000) 60%, #c74900 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 18px rgba(241,96,0,0.45)) drop-shadow(0 14px 30px rgba(0,0,0,0.35));
	margin-left: 0.05em;
	padding-right: 0.1em;
}

/* Shimmer sweep horizontal por cima do número */
.sl-bxnum-value-shine {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(255,255,255,0.2) 45%,
		rgba(255,255,255,0.4) 50%,
		rgba(255,255,255,0.2) 55%,
		transparent 70%
	);
	mix-blend-mode: overlay;
	background-size: 300% 100%;
	animation: sl-bxnum-shine 5s ease-in-out infinite;
	pointer-events: none;
	z-index: 3;
	border-radius: 20px;
}
@keyframes sl-bxnum-shine {
	0%,  30%  { background-position: -150% 0; opacity: 0; }
	45%, 55%  { opacity: 1; }
	70%, 100% { background-position: 250% 0; opacity: 0; }
}

/* Caption */
.sl-bxnum-caption {
	max-width: 620px;
	margin: 0 auto 3.5rem;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}
.sl-bxnum-caption strong {
	color: var(--sl-text, #fafafc);
	font-weight: 700;
}

/* ── Servidores ao vivo ─────────────────────────────────────── */
.sl-bxnum-servers {
	display: grid;
	grid-template-columns: repeat(3, minmax(220px, 1fr));
	gap: 1rem;
	max-width: 880px;
	margin: 0 auto 2.5rem;
}
@media (max-width: 760px) {
	.sl-bxnum-servers { grid-template-columns: 1fr; max-width: 360px; }
}

.sl-bxnum-srv {
	position: relative;
	padding: 1.25rem 1.3rem 1.1rem;
	border-radius: 16px;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(45,212,191,0.18);
	overflow: hidden;
	transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.4s, background 0.4s;
	text-align: left;
	box-shadow: 0 10px 30px -12px rgba(0,0,0,0.4);
}
.sl-bxnum-srv::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle at top right,
		rgba(196,255,62,0.12),
		transparent 60%
	);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
}
.sl-bxnum-srv:hover {
	transform: translateY(-4px);
	border-color: rgba(196,255,62,0.4);
	box-shadow:
		0 20px 40px -15px rgba(0,0,0,0.55),
		0 0 40px -15px rgba(196,255,62,0.35);
}
.sl-bxnum-srv:hover::before { opacity: 1; }

.sl-bxnum-srv-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.85rem;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	position: relative;
	z-index: 1;
}
.sl-bxnum-srv-dot {
	position: relative;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-lime, #c4ff3e);
	box-shadow: 0 0 10px var(--sl-lime, #c4ff3e);
	flex-shrink: 0;
}
.sl-bxnum-srv-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1.5px solid var(--sl-lime, #c4ff3e);
	animation: sl-bxnum-ring 2.2s ease-out infinite;
}
.sl-bxnum-srv-label {
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	font-weight: 700;
	flex: 1;
}
.sl-bxnum-srv-status {
	color: var(--sl-lime, #c4ff3e);
	font-weight: 700;
	font-size: 0.6rem;
	padding: 0.15rem 0.45rem;
	background: rgba(196,255,62,0.12);
	border: 1px solid rgba(196,255,62,0.3);
	border-radius: 4px;
}

.sl-bxnum-srv-metric {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1rem;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 700;
	font-size: 2.25rem;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sl-text, #fafafc);
	margin-bottom: 1rem;
	position: relative;
	z-index: 1;
	font-variant-numeric: tabular-nums;
}
.sl-bxnum-srv-pct {
	font-size: 1.4rem;
	color: var(--sl-teal, #2dd4bf);
	margin-left: 0.1em;
}

/* Sparkline equalizer bars */
.sl-bxnum-srv-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 36px;
	margin-bottom: 0.9rem;
	position: relative;
	z-index: 1;
}
.sl-bxnum-srv-bar {
	flex: 1;
	height: var(--h, 60%);
	background: linear-gradient(180deg, var(--sl-teal, #2dd4bf), rgba(45,212,191,0.2));
	border-radius: 2px;
	animation: sl-bxnum-bar-breath 2.4s ease-in-out infinite;
	animation-delay: var(--d, 0ms);
	transform-origin: bottom;
	opacity: 0.75;
}
.sl-bxnum-srv:hover .sl-bxnum-srv-bar {
	opacity: 1;
}
@keyframes sl-bxnum-bar-breath {
	0%, 100% { transform: scaleY(1);    opacity: 0.7; }
	50%      { transform: scaleY(0.85); opacity: 1; }
}

.sl-bxnum-srv-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	position: relative;
	z-index: 1;
}
.sl-bxnum-srv-trend {
	color: var(--sl-lime, #c4ff3e);
	font-weight: 700;
}

/* ── CTA Row ─────────────────────────────────────── */
.sl-bxnum-cta-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	margin-top: 2rem;
}
.sl-bxnum-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0));
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.92rem;
	transition: transform 0.25s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.sl-bxnum-cta:hover {
	transform: translateY(-2px);
	border-color: var(--sl-teal, rgba(45,212,191,0.6));
	background: linear-gradient(135deg, rgba(45,212,191,0.08), rgba(45,212,191,0));
	color: var(--sl-text, #fafafc);
	box-shadow: 0 14px 30px -10px rgba(45,212,191,0.3);
}
.sl-bxnum-cta svg { transition: transform 0.3s; }
.sl-bxnum-cta:hover svg { transform: translateX(3px); }
.sl-bxnum-cta-hint {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
	text-transform: uppercase;
}

/* Esconde o .sl-bignum antigo (caso algum CSS cache ainda mostre) */
.sl-bignum {
	padding: 8rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.sl-bignum-eyebrow { margin-bottom: 2rem; display: inline-block; }
.sl-bignum-value {
	font-family: var(--sl-font-display);
	font-size: clamp(6rem, 22vw, 22rem);
	font-weight: 400;
	letter-spacing: -0.07em;
	line-height: 0.82;
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 1;
}
.sl-bignum-suffix {
	color: var(--sl-brand);
	-webkit-text-fill-color: var(--sl-brand);
}
.sl-bignum-caption {
	font-size: 1.2rem;
	color: var(--sl-text-2);
	margin-top: 1rem;
	max-width: 600px;
	margin-inline: auto;
}

/* 3 servidores ao vivo abaixo do big number */
.sl-bignum-servers {
	margin-top: 3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.85rem;
}
.sl-bignum-srv {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	transition: all 0.3s;
	min-width: 180px;
}
.sl-bignum-srv:hover {
	border-color: rgba(var(--sl-teal-rgb), 0.3);
	background: rgba(255, 255, 255, 0.05);
}
.sl-bignum-srv[data-status="down"] {
	border-color: rgba(255, 64, 96, 0.3);
	background: rgba(255, 64, 96, 0.05);
}
.sl-bignum-srv[data-status="down"] .sl-bignum-srv-dot {
	background: var(--sl-danger);
	box-shadow: 0 0 10px var(--sl-danger);
}
.sl-bignum-srv-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 10px var(--sl-teal);
	flex-shrink: 0;
}
.sl-bignum-srv-meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	align-items: flex-start;
	min-width: 0;
}
.sl-bignum-srv-label {
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sl-bignum-srv-val {
	font-family: var(--sl-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.02em;
	line-height: 1;
}
.sl-bignum-srv[data-status="down"] .sl-bignum-srv-val {
	color: var(--sl-danger);
}

.sl-bignum-servers-note {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	flex-basis: 100%;
	justify-content: center;
	margin-top: 0.5rem;
}

@media (max-width: 720px) {
	.sl-bignum-servers { gap: 0.5rem; }
	.sl-bignum-srv { min-width: calc(100% - 2rem); }
	.sl-bignum-servers-note { margin-top: 0.75rem; }
}

.sl-bignum-bg {
	position: absolute; inset: 0;
	background: radial-gradient(circle at center, rgba(var(--sl-brand-rgb), 0.15), transparent 60%);
	filter: blur(40px);
	z-index: 0;
}

/* ========================================================================
   STICKY FEATURE SWAP
   ======================================================================== */
.sl-sticky {
	padding: 6rem 0;
}
.sl-sticky-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: flex-start;
}
.sl-sticky-viz {
	position: sticky;
	top: 120px;
	aspect-ratio: 4/5;
	background: linear-gradient(180deg, rgba(22,22,32,0.8), rgba(14,14,21,0.9));
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	padding: 2rem;
	overflow: hidden;
	box-shadow: var(--sl-shadow-lg);
}
.sl-sticky-viz-inner {
	position: relative;
	width: 100%; height: 100%;
}
.sl-sticky-pane {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 0.6s var(--sl-ease), transform 0.6s var(--sl-ease);
	transform: translateY(20px);
	display: flex; flex-direction: column; justify-content: center;
}
.sl-sticky-pane.is-active { opacity: 1; transform: translateY(0); }
.sl-sticky-pane-num {
	font-family: var(--sl-font-mono);
	font-size: 0.82rem;
	color: var(--sl-text-3);
	letter-spacing: 0.15em;
}
.sl-sticky-pane h3 {
	font-size: 2rem;
	margin: 1rem 0 1rem;
}
.sl-sticky-pane p {
	color: var(--sl-text-2);
	font-size: 1rem;
}
.sl-sticky-pane-img {
	margin-top: 2rem;
	aspect-ratio: 16/10;
	background: rgba(var(--sl-brand-rgb), 0.08);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: var(--sl-r);
	display: grid; place-items: center;
	font-size: 3rem;
}

.sl-sticky-steps {
	display: flex; flex-direction: column;
	gap: 1.25rem;
}
.sl-sticky-step {
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	background: rgba(255,255,255,0.02);
	transition: all 0.4s var(--sl-ease);
	cursor: pointer;
}
.sl-sticky-step.is-active {
	background: rgba(var(--sl-brand-rgb), 0.06);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	box-shadow: 0 0 0 1px rgba(var(--sl-brand-rgb), 0.2);
}
.sl-sticky-step-head {
	display: flex; align-items: center; gap: 0.75rem;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--sl-text-3);
	text-transform: uppercase;
	margin-bottom: 0.6rem;
}
.sl-sticky-step.is-active .sl-sticky-step-head { color: var(--sl-brand-2); }
.sl-sticky-step-num {
	width: 24px; height: 24px;
	border-radius: 6px;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	display: grid; place-items: center;
	font-weight: 600;
}
.sl-sticky-step.is-active .sl-sticky-step-num {
	background: var(--sl-brand);
	border-color: var(--sl-brand);
	color: #fff;
}
.sl-sticky-step h3 {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 0.4rem;
}
.sl-sticky-step p {
	color: var(--sl-text-2);
	font-size: 0.95rem;
	margin: 0;
}

/* ========================================================================
   HORIZONTAL SCROLLER
   ======================================================================== */
.sl-hscroll {
	padding: 6rem 0 6rem;
	overflow: hidden;
}
.sl-hscroll-head {
	max-width: 1320px;
	margin: 0 auto 3rem;
	padding-inline: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
}
.sl-hscroll-head h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); max-width: 600px; }
.sl-hscroll-track {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1rem 1.5rem 2rem;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.sl-hscroll-track::-webkit-scrollbar { display: none; }
.sl-hscroll-track::before, .sl-hscroll-track::after {
	content: "";
	flex: 0 0 calc((100vw - 1320px) / 2);
	min-width: 0;
}
@media (max-width: 1320px) {
	.sl-hscroll-track::before, .sl-hscroll-track::after { flex-basis: 1.5rem; }
}
.sl-hscroll-card {
	flex: 0 0 360px;
	aspect-ratio: 4/5;
	border-radius: var(--sl-r-xl);
	padding: 2rem;
	background: linear-gradient(180deg, rgba(22, 22, 32, 0.7), rgba(14, 14, 21, 0.9));
	border: 1px solid var(--sl-line);
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 0.4s var(--sl-ease);
}
.sl-hscroll-card:hover {
	border-color: var(--sl-line-hi);
	transform: translateY(-4px);
}
.sl-hscroll-card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at bottom, rgba(var(--sl-brand-rgb), 0.15), transparent 60%);
	opacity: 0; transition: opacity 0.4s;
}
.sl-hscroll-card:hover::before { opacity: 1; }
.sl-hscroll-card > * { position: relative; z-index: 1; }
.sl-hscroll-card-idx {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.15em;
}
.sl-hscroll-card h3 {
	font-size: 1.7rem;
	font-weight: 600;
	margin: 0.75rem 0;
}
.sl-hscroll-card p {
	color: var(--sl-text-2);
	font-size: 0.92rem;
}
.sl-hscroll-card-tag {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--sl-teal);
	padding: 0.25rem 0.6rem;
	background: rgba(var(--sl-teal-rgb), 0.1);
	border-radius: 999px;
	width: fit-content;
}

/* ========================================================================
   PRICING
   ======================================================================== */
.sl-pricing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	align-items: stretch;
}
.sl-plan {
	position: relative;
	padding: 2.5rem 2rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	background: rgba(22, 22, 32, 0.6);
	display: flex; flex-direction: column;
	transition: all 0.4s var(--sl-ease);
	backdrop-filter: blur(10px);
}
.sl-plan:hover { transform: translateY(-4px); border-color: var(--sl-line-hi); }
.sl-plan--highlight {
	background:
		linear-gradient(180deg, rgba(var(--sl-brand-rgb), 0.12), rgba(22, 22, 32, 0.7)),
		var(--sl-ink-2);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	box-shadow: 0 40px 80px -20px rgba(var(--sl-brand-rgb), 0.35);
}
.sl-plan--highlight::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: var(--sl-r-xl);
	padding: 1px;
	background: linear-gradient(140deg, rgba(var(--sl-brand-rgb), 0.6), transparent 50%, rgba(var(--sl-teal-rgb), 0.3));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
.sl-plan-tag {
	position: absolute; top: -10px; left: 50%;
	transform: translateX(-50%);
	padding: 0.35rem 0.9rem;
	background: var(--sl-brand);
	color: #fff;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
}
.sl-plan h3 {
	font-size: 1.4rem; font-weight: 600;
	margin-bottom: 0.4rem;
}
.sl-plan-desc {
	color: var(--sl-text-2);
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.sl-plan-price {
	display: flex; align-items: baseline; gap: 0.3rem;
	padding: 1.5rem 0;
	border-block: 1px solid var(--sl-line);
	margin-bottom: 1.5rem;
}
.sl-plan-price-curr {
	font-family: var(--sl-font-mono);
	font-size: 0.9rem;
	color: var(--sl-text-2);
}
.sl-plan-price-n {
	font-family: var(--sl-font-display);
	font-size: 3.5rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.9;
}
.sl-plan-price-p {
	color: var(--sl-text-3);
	font-size: 0.88rem;
}
.sl-plan-feats { list-style: none; padding: 0; flex: 1; margin-bottom: 1.5rem; }
.sl-plan-feats li {
	padding: 0.4rem 0;
	color: var(--sl-text-2);
	font-size: 0.93rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.sl-plan-feats li::before {
	content: "";
	flex-shrink: 0;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: rgba(var(--sl-brand-rgb), 0.15);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ff7a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}
.sl-plan-feats strong { color: var(--sl-text); }

/* ========================================================================
   TESTIMONIALS — horizontal marquee
   ======================================================================== */
.sl-testis {
	padding: 5rem 0;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.sl-testis-track {
	display: flex;
	gap: 1.25rem;
	animation: sl-testis-slide 45s linear infinite;
	width: max-content;
}
.sl-testis:hover .sl-testis-track { animation-play-state: paused; }
@keyframes sl-testis-slide { to { transform: translateX(-50%); } }
.sl-testi {
	flex: 0 0 420px;
	padding: 2rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.sl-testi-stars { color: var(--sl-brand-3); letter-spacing: 0.15em; font-size: 0.9rem; }
.sl-testi-quote {
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--sl-text);
	font-weight: 500;
}
.sl-testi-author { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.sl-testi-avatar {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sl-brand), var(--sl-teal));
	display: grid; place-items: center;
	font-family: var(--sl-font-display);
	font-weight: 700;
	color: #fff;
	font-size: 0.9rem;
}
.sl-testi-author strong { display: block; font-size: 0.95rem; color: var(--sl-text); }
.sl-testi-author span { font-size: 0.8rem; color: var(--sl-text-3); }

/* ========================================================================
   FAQ
   ======================================================================== */
.sl-faqs { display: flex; flex-direction: column; gap: 0.6rem; }
.sl-faq {
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r);
	background: rgba(22, 22, 32, 0.5);
	overflow: hidden;
	transition: all 0.4s var(--sl-ease);
}
.sl-faq[open] {
	background: rgba(var(--sl-brand-rgb), 0.03);
	border-color: rgba(var(--sl-brand-rgb), 0.25);
}
.sl-faq summary {
	padding: 1.35rem 1.5rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	font-weight: 600;
	gap: 1rem;
}
.sl-faq summary::-webkit-details-marker { display: none; }
.sl-faq summary::marker { content: ""; } /* Firefox/Safari: esconde marker nativo (.sl-faq-icon já dá feedback visual) */
.sl-faq-icon {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var(--sl-line-hi);
	display: grid; place-items: center;
	color: var(--sl-text-2);
	font-size: 1rem;
	flex-shrink: 0;
	transition: all 0.35s var(--sl-ease);
}
.sl-faq[open] .sl-faq-icon {
	transform: rotate(45deg);
	background: var(--sl-brand);
	border-color: var(--sl-brand);
	color: #fff;
}
.sl-faq-body { padding: 0 1.5rem 1.35rem; color: var(--sl-text-2); }

/* ========================================================================
   AURORA CTA
   ======================================================================== */
.sl-aurora {
	padding: 5rem 0;
}
.sl-aurora-box {
	position: relative;
	padding: 5rem 3rem;
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	text-align: center;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	background: #0a0a12;
}
.sl-aurora-bg {
	position: absolute; inset: -50%;
	z-index: -1;
	background: conic-gradient(from 0deg at 50% 50%,
		#f16000 0deg,
		#ff7a1a 60deg,
		#2dd4bf 140deg,
		#0a0a12 220deg,
		#f16000 300deg,
		#f16000 360deg);
	filter: blur(80px);
	animation: sl-aurora-spin 18s linear infinite;
	opacity: 0.7;
}
@keyframes sl-aurora-spin { to { transform: rotate(360deg); } }
.sl-aurora-box::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(10, 10, 18, 0.4), rgba(10, 10, 18, 0.9) 70%),
		rgba(10, 10, 18, 0.5);
	z-index: 0;
}
.sl-aurora-box::after {
	content: "";
	position: absolute; inset: 1px;
	border-radius: calc(var(--sl-r-xl) - 1px);
	border: 1px solid var(--sl-line);
	pointer-events: none;
	z-index: 0;
}
.sl-aurora-box > * { position: relative; z-index: 1; }
.sl-aurora-box h2 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.95;
}
.sl-aurora-box p {
	font-size: 1.1rem;
	color: var(--sl-text-2);
	max-width: 520px;
}
.sl-aurora-ctas {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* ========================================================================
   PAGE HERO (sub-páginas)
   ======================================================================== */
.sl-page-hero {
	padding: 6rem 0 3rem;
	text-align: center;
	position: relative;
}
.sl-page-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
}
.sl-page-hero .sl-chip { margin: 0 auto 1.5rem; }
.sl-page-body {
	padding: 3rem 0 6rem;
}
.sl-page-content {
	color: var(--sl-text-2);
	font-size: 1.05rem;
	line-height: 1.7;
}
.sl-page-content h2 {
	color: var(--sl-text);
	font-size: 2rem;
	margin: 2.5rem 0 1rem;
}
.sl-page-content h3 { color: var(--sl-text); font-size: 1.4rem; margin: 2rem 0 1rem; }
.sl-page-content p, .sl-page-content ul, .sl-page-content ol { margin-bottom: 1.25rem; }
.sl-page-content a { color: var(--sl-brand-3); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sl-page-content blockquote {
	border-left: 2px solid var(--sl-brand);
	padding: 0.25rem 0 0.25rem 1.5rem;
	margin: 1.5rem 0;
	color: var(--sl-text);
	font-style: italic;
}

/* ========================================================================
   POSTS (blog index/archive)
   ======================================================================== */
.sl-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.5rem;
}
.sl-post-card {
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	overflow: hidden;
	background: rgba(22, 22, 32, 0.5);
	transition: all 0.4s var(--sl-ease);
	display: flex; flex-direction: column;
}
.sl-post-card:hover { transform: translateY(-3px); border-color: var(--sl-line-hi); }
.sl-post-thumb { aspect-ratio: 16/10; overflow: hidden; }
.sl-post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--sl-ease); }
.sl-post-card:hover .sl-post-thumb img { transform: scale(1.05); }
.sl-post-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.sl-post-meta { font-family: var(--sl-font-mono); font-size: 0.72rem; color: var(--sl-text-3); letter-spacing: 0.1em; text-transform: uppercase; }
.sl-post-card h3 { font-size: 1.15rem; font-weight: 600; }
.sl-post-card h3 a { color: var(--sl-text); }
.sl-post-card h3 a:hover { color: var(--sl-brand-3); }
.sl-post-card p { color: var(--sl-text-2); font-size: 0.92rem; }
.sl-post-card .sl-btn-arrow { margin-top: auto; font-size: 0.85rem; }

.sl-pag { margin-top: 3rem; text-align: center; }
.sl-pag .nav-links { display: inline-flex; gap: 0.4rem; }
.sl-pag a, .sl-pag span.current {
	padding: 0.55rem 1rem;
	border-radius: 10px;
	border: 1px solid var(--sl-line);
	color: var(--sl-text);
	font-family: var(--sl-font-mono);
	font-size: 0.82rem;
	text-decoration: none;
}
.sl-pag a:hover { border-color: var(--sl-brand); }
.sl-pag span.current { background: var(--sl-brand); border-color: var(--sl-brand); color: #fff; }

/* ========================================================================
   FORMS
   ======================================================================== */
.sl-form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; margin: 0 auto; }
.sl-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.sl-form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.sl-form label {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="password"], input[type="search"], textarea, select,
.sl-form input, .sl-form textarea, .sl-form select {
	width: 100%;
	padding: 0.9rem 1.1rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.95rem;
	transition: all 0.25s;
}
input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: rgba(var(--sl-brand-rgb), 0.6);
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb), 0.1);
	background: rgba(255,255,255,0.04);
}
::placeholder { color: var(--sl-text-3); }

/* Select: chevron custom + dropdown escuro legível */
select, .sl-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.6rem;
	cursor: pointer;
}
select option,
.sl-form select option {
	background-color: #14141a;
	color: #fff;
	padding: 0.5rem;
}
select option:checked,
select option:hover,
.sl-form select option:checked {
	background-color: #1f1f28;
	color: #fff;
}
select option[disabled],
.sl-form select option[disabled] {
	color: #6c6c7a;
}

.sl-form-alert {
	padding: 0.85rem 1.1rem;
	border-radius: 12px;
	font-size: 0.9rem;
	margin-bottom: 0.5rem;
}
.sl-form-alert--ok {
	background: rgba(var(--sl-teal-rgb), 0.1);
	border: 1px solid rgba(var(--sl-teal-rgb), 0.3);
	color: var(--sl-teal);
}
.sl-form-alert--error {
	background: rgba(255, 64, 96, 0.1);
	border: 1px solid rgba(255, 64, 96, 0.3);
	color: var(--sl-danger);
}

/* ========================================================================
   FOOTER
   ======================================================================== */
.sl-footer {
	padding: 5rem 0 2rem;
	border-top: 1px solid var(--sl-line);
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
	position: relative;
	overflow: hidden;
}
.sl-footer-main {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 3rem;
	margin-bottom: 4rem;
}
.sl-footer-brand { max-width: 340px; }
.sl-footer-brand p { color: var(--sl-text-2); font-size: 0.92rem; margin-top: 1.25rem; }
.sl-footer-col h4 {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 1.1rem;
}
.sl-footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sl-footer-col a {
	color: var(--sl-text-2);
	font-size: 0.93rem;
	transition: color 0.2s;
}
.sl-footer-col a:hover { color: var(--sl-text); }

.sl-footer-social { display: flex; gap: 0.5rem; margin-top: 1.5rem; }
.sl-footer-social a {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	display: grid; place-items: center;
	color: var(--sl-text-2);
	transition: all 0.25s;
}
.sl-footer-social a:hover {
	background: rgba(var(--sl-brand-rgb), 0.1);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
	transform: translateY(-2px);
}

.sl-footer-mega {
	margin: 4rem 0 2rem;
	font-family: var(--sl-font-display);
	font-size: clamp(4rem, 15vw, 14rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.85;
	text-align: center;
	background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.01));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.sl-footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-line);
	gap: 1.5rem;
	flex-wrap: wrap;
	font-size: 0.82rem;
	color: var(--sl-text-3);
}
.sl-footer-legal-links { display: flex; gap: 1.5rem; }
.sl-footer-legal-links a { color: var(--sl-text-3); }
.sl-footer-legal-links a:hover { color: var(--sl-text); }

/* ========================================================================
   WHATSAPP FAB
   ======================================================================== */
.sl-wa-fab {
	position: fixed;
	bottom: 1.5rem; right: 1.5rem;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: #25d366;
	display: grid; place-items: center;
	z-index: 40;
	color: white;
	box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
	transition: transform 0.35s var(--sl-ease), box-shadow 0.35s;
}
.sl-wa-fab:hover { transform: scale(1.08); box-shadow: 0 14px 40px rgba(37, 211, 102, 0.55); }
.sl-wa-fab::before {
	content: "";
	position: absolute; inset: -6px;
	border-radius: 50%;
	border: 2px solid #25d366;
	opacity: 0.4;
	animation: sl-wa-pulse 2s ease-out infinite;
}
@keyframes sl-wa-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(1.5); opacity: 0; }
}

/* ========================================================================
   API PLAYGROUND (page-api.php)
   ======================================================================== */

/* Hero */
.sl-api-hero {
	padding: 4rem 0 2rem;
	position: relative;
}
.sl-api-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.sl-api-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}
.sl-api-hero-sub {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 1.1rem;
	line-height: 1.55;
	max-width: 640px;
	margin: 0;
}
.sl-api-hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.5rem;
}
.sl-api-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 999px;
	background: rgba(45,212,191,0.04);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-api-badge-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
}

/* Section padding override */
.sl-api-section { padding-top: 2rem; padding-bottom: 5rem; }

/* Picker de endpoints */
.sl-api-picker {
	position: relative;
	margin-bottom: 1.5rem;
	padding-bottom: 0.25rem;
}
.sl-api-picker::after {
	content: "";
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: 40px;
	background: linear-gradient(-90deg, rgba(10,10,15,0.95), transparent);
	pointer-events: none;
}
.sl-api-picker-scroll {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
}
.sl-api-picker-scroll::-webkit-scrollbar { display: none; }
.sl-api-chip {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.95rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	background: rgba(255,255,255,0.02);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.75rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
	white-space: nowrap;
}
.sl-api-chip:hover {
	border-color: rgba(45,212,191,0.3);
	color: var(--sl-text, #fafafc);
	transform: translateY(-1px);
}
.sl-api-chip.is-active {
	border-color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.08);
	color: var(--sl-text, #fafafc);
	box-shadow: 0 0 0 1px var(--sl-teal, #2dd4bf);
}
.sl-api-chip-method {
	font-weight: 700;
	font-size: 0.68rem;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	letter-spacing: 0.06em;
}
.sl-api-chip-method--get    { background: rgba(45,212,191,0.15); color: var(--sl-teal, #2dd4bf); }
.sl-api-chip-method--post   { background: rgba(196,255,62,0.15); color: var(--sl-lime, #c4ff3e); }
.sl-api-chip-method--put    { background: rgba(255,176,32,0.18); color: #ffb020; }
.sl-api-chip-method--patch  { background: rgba(255,176,32,0.18); color: #ffb020; }
.sl-api-chip-method--delete { background: rgba(255,64,96,0.18);  color: #ff4060; }

/* Split request ↔ response */
.sl-api-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 860px) {
	.sl-api-split { grid-template-columns: 1fr; }
}

/* Panels */
.sl-api-panel {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	padding: 1rem 1.1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-width: 0;
}
.sl-api-panel--response { background: linear-gradient(180deg, rgba(45,212,191,0.03), rgba(45,212,191,0)); }

.sl-api-panel-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	flex-wrap: wrap;
	min-width: 0;
}

/* Method badge (no header do request panel) */
.sl-api-method {
	font-family: var(--sl-font-mono, monospace);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.55rem;
	border-radius: 5px;
	background: rgba(45,212,191,0.15);
	color: var(--sl-teal, #2dd4bf);
	flex-shrink: 0;
}
.sl-api-method[data-method="POST"]   { background: rgba(196,255,62,0.15); color: var(--sl-lime, #c4ff3e); }
.sl-api-method[data-method="PUT"],
.sl-api-method[data-method="PATCH"]  { background: rgba(255,176,32,0.18); color: #ffb020; }
.sl-api-method[data-method="DELETE"] { background: rgba(255,64,96,0.18);  color: #ff4060; }

.sl-api-path {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.85rem;
	color: var(--sl-text, #fafafc);
	background: transparent;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
	min-width: 0;
}
.sl-api-panel-desc {
	flex-basis: 100%;
	font-size: 0.82rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	line-height: 1.4;
}

/* Fields (path params / query / headers) */
.sl-api-field-title {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	margin: 0 0 0.5rem;
}
.sl-api-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-api-field {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 0.65rem;
	align-items: center;
}
.sl-api-field > span {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-api-field input {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.8rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 8px;
	background: rgba(0,0,0,0.25);
	color: var(--sl-text, #fafafc);
	transition: border-color 0.2s;
	min-width: 0;
}
.sl-api-field input:focus-visible {
	outline: none;
	border-color: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 0 2px rgba(45,212,191,0.2);
}
.sl-api-field input[readonly] {
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	cursor: default;
}

/* Body JSON editor */
.sl-api-code-editor {
	width: 100%;
	min-height: 140px;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	background: rgba(0,0,0,0.35);
	color: var(--sl-text, #fafafc);
	resize: vertical;
	transition: border-color 0.2s;
}
.sl-api-code-editor:focus-visible {
	outline: none;
	border-color: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 0 2px rgba(45,212,191,0.2);
}
.sl-api-body-error {
	margin-top: 0.4rem;
	padding: 0.45rem 0.7rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: #ff8095;
	background: rgba(255,64,96,0.08);
	border: 1px solid rgba(255,64,96,0.25);
	border-radius: 6px;
}

/* Actions */
.sl-api-actions {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.sl-api-actions .sl-btn { padding: 0.7rem 1.2rem; font-size: 0.85rem; }
.sl-api-run-icon { font-size: 0.7rem; display: inline-block; }

/* Response */
.sl-api-resp-status {
	font-family: var(--sl-font-mono, monospace);
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.7rem;
	border-radius: 5px;
	background: rgba(255,255,255,0.06);
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-api-resp-status[data-tone="success"] { background: rgba(196,255,62,0.15); color: var(--sl-lime, #c4ff3e); }
.sl-api-resp-status[data-tone="warn"]    { background: rgba(255,176,32,0.18); color: #ffb020; }
.sl-api-resp-status[data-tone="error"]   { background: rgba(255,64,96,0.18);  color: #ff4060; }
.sl-api-resp-status[data-tone="pending"] {
	background: rgba(45,212,191,0.15); color: var(--sl-teal, #2dd4bf);
	animation: sl-api-pending 1.5s ease-in-out infinite;
}
@keyframes sl-api-pending {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}
.sl-api-resp-latency {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-api-resp-actions { margin-left: auto; display: flex; gap: 0.35rem; }

.sl-api-icon-btn {
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 6px;
	padding: 0.35rem 0.5rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sl-api-icon-btn:hover {
	border-color: rgba(45,212,191,0.3);
	color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.05);
}
.sl-api-icon-btn.is-copied {
	border-color: var(--sl-lime, #c4ff3e);
	color: var(--sl-lime, #c4ff3e);
}

.sl-api-resp-body {
	min-height: 140px;
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	padding: 0.8rem 0.9rem;
	overflow-x: auto;
}
.sl-api-resp-pre {
	margin: 0;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.8rem;
	line-height: 1.55;
	color: var(--sl-text, #fafafc);
	white-space: pre-wrap;
	word-break: break-word;
}
.sl-api-resp-pre code { font-family: inherit; }

/* Syntax highlighting leve no JSON */
.sl-api-resp-pre .json-key    { color: var(--sl-teal, #2dd4bf); }
.sl-api-resp-pre .json-string { color: var(--sl-lime, #c4ff3e); }
.sl-api-resp-pre .json-number { color: #ffb020; }
.sl-api-resp-pre .json-bool   { color: #ff8095; }
.sl-api-resp-pre .json-null   { color: var(--sl-text-3, rgba(250,250,252,0.5)); font-style: italic; }

/* SDK Snippets */
.sl-api-snippets {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	padding: 1rem 1.1rem 1.1rem;
	margin-bottom: 1.5rem;
}
.sl-api-snippets-title {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	margin: 0;
}
.sl-api-snippets-tabs {
	display: flex;
	gap: 0.3rem;
	margin-left: auto;
	flex-wrap: wrap;
}
.sl-api-snippet-tab {
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sl-api-snippet-tab:hover  { border-color: rgba(45,212,191,0.3); color: var(--sl-text, #fafafc); }
.sl-api-snippet-tab.is-active {
	border-color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.08);
	color: var(--sl-teal, #2dd4bf);
}
.sl-api-snippet-pre {
	margin: 0;
	padding: 0.95rem 1rem;
	background: rgba(0,0,0,0.35);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.78rem;
	line-height: 1.55;
	color: var(--sl-text, #fafafc);
	overflow-x: auto;
	white-space: pre;
}

/* Footer: rate limit + links */
.sl-api-footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 720px) {
	.sl-api-footer { grid-template-columns: 1fr; }
}
.sl-api-ratelimit {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(45,212,191,0.04), rgba(45,212,191,0));
	padding: 1.1rem 1.2rem;
}
.sl-api-rl-row { margin-top: 0.75rem; }
.sl-api-rl-label {
	display: flex;
	justify-content: space-between;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.75rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	margin-bottom: 0.35rem;
}
.sl-api-rl-label strong {
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}
.sl-api-rl-bar {
	height: 6px;
	background: rgba(255,255,255,0.05);
	border-radius: 999px;
	overflow: hidden;
}
.sl-api-rl-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sl-teal), var(--sl-lime));
	border-radius: 999px;
	transition: width 0.4s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
}
.sl-api-rl-bar span[data-level="high"] {
	background: linear-gradient(90deg, #ffb020, #ff4060);
}

.sl-api-links {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.sl-api-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	background: rgba(255,255,255,0.02);
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	font-size: 0.88rem;
	transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.sl-api-link:hover {
	border-color: rgba(45,212,191,0.35);
	background: rgba(45,212,191,0.04);
	transform: translateX(2px);
	color: var(--sl-text, #fafafc);
}
.sl-api-link > span:last-child {
	color: var(--sl-teal, #2dd4bf);
	font-family: var(--sl-font-mono, monospace);
}

/* Mobile ajustes finos */
@media (max-width: 560px) {
	.sl-api-field { grid-template-columns: 1fr; gap: 0.3rem; }
	.sl-api-field > span { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
	.sl-api-panel { padding: 0.85rem 0.9rem; }
	.sl-api-snippets-tabs { margin-left: 0; width: 100%; }
	.sl-api-panel-head { gap: 0.4rem; }
}

/* ========================================================================
   GOOGLE MAPS (Contato / Sobre) — dark styled + pin Smart Localiza custom
   ======================================================================== */
.sl-gmap {
	width: 100%;
	height: 100%;
	min-height: 260px;
	background: #1a1a24;
	border-radius: inherit;
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.sl-gmap--banner { min-height: 420px; }

/* Remove outline feio e aplica fundo escuro enquanto tiles carregam */
.sl-gmap:focus,
.sl-gmap:focus-within { outline: none; }
.sl-gmap .gm-style {
	font-family: var(--sl-font-body, 'Manrope', sans-serif) !important;
	background: #1a1a24;
}

/* Fullscreen + Zoom + Street View controls (inline-styled pelo Google — precisa !important) */
.sl-gmap .gm-fullscreen-control,
.sl-gmap .gm-bundled-control,
.sl-gmap .gm-bundled-control-on-bottom,
.sl-gmap .gm-svpc {
	background: rgba(14,14,21,0.9) !important;
	border: 1px solid rgba(255,255,255,0.12) !important;
	border-radius: 8px !important;
	box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
/* Os ícones dentro dos controles são PNGs coloridos — inverte pra ficar brancos em fundo dark */
.sl-gmap .gm-fullscreen-control img,
.sl-gmap .gm-bundled-control img,
.sl-gmap .gm-svpc img,
.sl-gmap button[aria-label*="Aumentar"] img,
.sl-gmap button[aria-label*="Reduzir"] img,
.sl-gmap button[aria-label*="Zoom"] img,
.sl-gmap button[aria-label*="ela inteira"] img,
.sl-gmap button[aria-label*="ompleta"] img {
	filter: invert(1) opacity(0.75);
	transition: opacity 0.2s;
}
.sl-gmap .gm-fullscreen-control:hover img,
.sl-gmap .gm-bundled-control:hover img,
.sl-gmap button:hover img {
	filter: invert(1) opacity(1);
}
/* Hover state do botão inteiro */
.sl-gmap .gm-fullscreen-control:hover,
.sl-gmap .gm-bundled-control button:hover,
.sl-gmap .gm-svpc:hover {
	background: rgba(45,212,191,0.12) !important;
}
/* Inner buttons dos zoom-controls */
.sl-gmap .gm-bundled-control button,
.sl-gmap .gm-bundled-control-on-bottom button {
	background: transparent !important;
}

/* Attribution "Dados cartográficos ©2026 Google / Termos..." no rodapé — dark bar legível */
.sl-gmap .gm-style-cc {
	background: transparent !important;
}
.sl-gmap .gm-style-cc > div,
.sl-gmap .gm-style-cc > div > div,
.sl-gmap .gm-style-cc > div > div > div {
	background: rgba(14,14,21,0.9) !important;
	background-color: rgba(14,14,21,0.9) !important;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.3) !important;
}
.sl-gmap .gm-style-cc a,
.sl-gmap .gm-style-cc span,
.sl-gmap .gm-style-cc button {
	color: rgba(250,250,252,0.85) !important;
	background: transparent !important;
	background-color: transparent !important;
	text-shadow: none !important;
	font-size: 11px !important;
}
.sl-gmap .gm-style-cc a { text-decoration: none !important; }
.sl-gmap .gm-style-cc a:hover {
	color: var(--sl-teal, #2dd4bf) !important;
	text-decoration: underline !important;
}

/* Logo Google (canto inferior esquerdo) — não pode esconder por ToS, mas damos fundo escuro */
.sl-gmap a[href^="https://maps.google.com"],
.sl-gmap a[href*="/maps/@"] {
	background: rgba(14,14,21,0.75) !important;
	padding: 2px 6px !important;
	border-radius: 0 6px 0 0 !important;
}
.sl-gmap a[href^="https://maps.google.com"] img,
.sl-gmap a[href*="/maps/@"] img {
	opacity: 0.85;
	transition: opacity 0.2s;
}
.sl-gmap a[href^="https://maps.google.com"]:hover img,
.sl-gmap a[href*="/maps/@"]:hover img { opacity: 1; }

/* InfoWindow dark — Google renderiza HTML sobre um wrapper .gm-style-iw-c */
.sl-gmap .gm-style-iw-c {
	background: rgba(14,14,21,0.95) !important;
	border: 1px solid rgba(241,96,0,0.35) !important;
	border-radius: 12px !important;
	box-shadow: 0 15px 35px -10px rgba(0,0,0,0.65), 0 0 24px -8px rgba(241,96,0,0.25) !important;
	padding: 0 !important;
	max-width: 280px !important;
}
.sl-gmap .gm-style-iw-d {
	overflow: hidden !important;
	padding: 0 !important;
}
.sl-gmap .gm-style-iw-tc::after {
	background: rgba(14,14,21,0.95) !important;
	box-shadow: none !important;
}
/* Remove padding extra do InfoWindow do Google */
.sl-gmap .gm-style-iw-chr {
	position: absolute !important;
	top: 0; right: 0;
	z-index: 5;
}
.sl-gmap .gm-ui-hover-effect { opacity: 0.7 !important; }
.sl-gmap .gm-ui-hover-effect > span {
	background: var(--sl-text-3, rgba(250,250,252,0.7)) !important;
	margin: 6px !important;
}

/* Conteúdo dentro do InfoWindow */
.sl-gmap-iw {
	padding: 0.85rem 1rem 0.95rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	color: var(--sl-text, #fafafc);
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	line-height: 1.45;
	max-width: 240px;
}
.sl-gmap-iw strong {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--sl-text, #fafafc);
}
.sl-gmap-iw span {
	font-size: 0.82rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
}
.sl-gmap-iw a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.55rem;
	padding: 0.45rem 0.75rem;
	background: rgba(241,96,0,0.15);
	border: 1px solid rgba(241,96,0,0.4);
	border-radius: 8px;
	color: var(--sl-brand, #f16000);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	align-self: flex-start;
}
.sl-gmap-iw a:hover {
	background: rgba(241,96,0,0.25);
	border-color: var(--sl-brand, #f16000);
	color: #ffa466;
}

/* Fallback quando Google Maps não carrega (chave ausente / bloqueada) */
.sl-gmap-fallback {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 100%;
	min-height: 260px;
	text-align: center;
	padding: 2rem;
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	background: rgba(241,96,0,0.04);
	border: 1px dashed rgba(241,96,0,0.25);
	border-radius: inherit;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.sl-gmap-fallback:hover {
	background: rgba(241,96,0,0.1);
	border-color: rgba(241,96,0,0.5);
	transform: translateY(-2px);
}
.sl-gmap-fallback svg { color: var(--sl-brand, #f16000); }
.sl-gmap-fallback span { font-weight: 700; font-size: 1rem; color: var(--sl-text, #fafafc); }
.sl-gmap-fallback small { font-size: 0.8rem; color: var(--sl-text-3, rgba(250,250,252,0.5)); max-width: 320px; }

/* ========================================================================
   SAVINGS TEASER (home) — card chamativo linkando pra /calculadora-economia/
   ======================================================================== */
.sl-sav-teaser-section { padding-top: 3rem; padding-bottom: 3rem; }

/* Divider chip entre ROI revenda e Savings teaser */
.sl-sav-teaser-divider {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2.5rem;
}
.sl-sav-teaser-divider-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(196,255,62,0.2), transparent);
}
.sl-sav-teaser-divider-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.15rem;
	border: 1px solid rgba(196,255,62,0.25);
	border-radius: 999px;
	background: rgba(196,255,62,0.05);
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--sl-text-2, rgba(250,250,252,0.75));
	white-space: nowrap;
}
.sl-sav-teaser-divider-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-lime, #c4ff3e);
	box-shadow: 0 0 8px var(--sl-lime, #c4ff3e);
}
@media (max-width: 640px) {
	.sl-sav-teaser-divider-pill { font-size: 0.62rem; white-space: normal; text-align: center; }
}
.sl-sav-teaser {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	border: 1px solid rgba(196,255,62,0.22);
	background:
		radial-gradient(ellipse at -10% 120%, rgba(241,96,0,0.14), transparent 55%),
		radial-gradient(ellipse at 110% -20%, rgba(45,212,191,0.16), transparent 55%),
		linear-gradient(135deg, rgba(14,14,21,0.85), rgba(10,10,15,0.9));
	padding: 3rem 3rem;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 2.5rem;
	align-items: center;
	box-shadow:
		0 30px 80px -20px rgba(0,0,0,0.6),
		0 0 0 1px rgba(196,255,62,0.06),
		0 0 60px -20px rgba(196,255,62,0.25);
}
@media (max-width: 860px) {
	.sl-sav-teaser { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.75rem; }
}

/* Background decorativo */
.sl-sav-teaser-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}
.sl-sav-teaser-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	opacity: 0.5;
	animation: sl-sav-orb-float 14s ease-in-out infinite;
}
.sl-sav-teaser-orb--1 {
	width: 320px; height: 320px;
	background: radial-gradient(circle, var(--sl-lime, #c4ff3e), transparent 70%);
	top: -120px; right: -80px;
}
.sl-sav-teaser-orb--2 {
	width: 260px; height: 260px;
	background: radial-gradient(circle, var(--sl-teal, #2dd4bf), transparent 70%);
	bottom: -100px; left: -40px;
	animation-delay: -5s;
	animation-duration: 18s;
}
@keyframes sl-sav-orb-float {
	0%, 100% { transform: translate(0,0) scale(1); }
	50%      { transform: translate(-20px, 15px) scale(1.1); }
}
.sl-sav-teaser-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(196,255,62,0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(196,255,62,0.035) 1px, transparent 1px);
	background-size: 36px 36px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
@media (prefers-reduced-motion: reduce) {
	.sl-sav-teaser-orb { animation: none; }
}

/* Conteúdo */
.sl-sav-teaser-left {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.sl-sav-teaser-left h2 {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.025em;
	font-weight: 700;
	margin: 0;
}
.sl-sav-teaser-sub {
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	margin: 0;
	max-width: 540px;
}
.sl-sav-teaser-sub strong {
	color: var(--sl-lime, #c4ff3e);
	font-weight: 600;
}

/* Lista de vetores de economia (5 itens) */
.sl-sav-teaser-vectors {
	list-style: none;
	padding: 0;
	margin: 0.25rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}
.sl-sav-teaser-vectors li {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.75rem;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	border: 1px solid rgba(196,255,62,0.18);
	border-radius: 999px;
	background: rgba(196,255,62,0.04);
	letter-spacing: 0.02em;
	transition: border-color 0.2s, background 0.2s;
}
.sl-sav-teaser-vectors li:hover {
	border-color: rgba(196,255,62,0.45);
	background: rgba(196,255,62,0.08);
}
.sl-sav-teaser-vectors em {
	color: var(--sl-lime, #c4ff3e);
	font-style: normal;
	font-weight: 700;
}

/* CTAs */
.sl-sav-teaser-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-top: 0.4rem;
}
.sl-sav-teaser-btn {
	position: relative;
	overflow: hidden;
	padding-right: 1.7rem;
	box-shadow: 0 14px 40px -10px rgba(241,96,0,0.55);
}
.sl-sav-teaser-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.8s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
	pointer-events: none;
}
.sl-sav-teaser-btn:hover::before { transform: translateX(120%); }
.sl-sav-teaser-arrow {
	display: inline-block;
	transition: transform 0.25s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
}
.sl-sav-teaser-btn:hover .sl-sav-teaser-arrow { transform: translateX(4px); }
.sl-sav-teaser-hint {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* Right side: figura com economia estimada */
.sl-sav-teaser-right {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}
.sl-sav-teaser-figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 2.2rem 1.8rem;
	width: 100%;
	max-width: 400px;
	border: 1px solid rgba(196,255,62,0.25);
	border-radius: 22px;
	background:
		radial-gradient(ellipse at top, rgba(196,255,62,0.08), transparent 60%),
		linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.2));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	text-align: center;
}
.sl-sav-teaser-figure::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(196,255,62,0.5), rgba(45,212,191,0.3), transparent 60%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
}
.sl-sav-teaser-fig-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
}
.sl-sav-teaser-fig-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(2.8rem, 7vw, 4.4rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.035em;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf) 0%, #a6f0de 45%, var(--sl-lime, #c4ff3e) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}
.sl-sav-teaser-fig-sub {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	line-height: 1.5;
	max-width: 280px;
}
.sl-sav-teaser-ticker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid rgba(45,212,191,0.25);
	border-radius: 999px;
	background: rgba(45,212,191,0.06);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}
.sl-sav-teaser-ticker strong {
	color: var(--sl-lime, #c4ff3e);
	font-weight: 700;
}
.sl-sav-teaser-pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 10px var(--sl-teal, #2dd4bf);
	animation: sl-sav-teaser-pulse 1.6s ease-in-out infinite;
}
@keyframes sl-sav-teaser-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.75); }
}

/* ========================================================================
   SAVINGS CALCULATOR (page-calculadora-economia.php)
   Calculadora "Quanto sua frota economiza" — pra cliente final
   ======================================================================== */

/* Hero */
.sl-sav-hero {
	padding: 4rem 0 2rem;
	position: relative;
}
.sl-sav-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}
.sl-sav-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}
.sl-sav-hero-sub {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 1.1rem;
	line-height: 1.55;
	max-width: 680px;
	margin: 0;
}

.sl-sav-section { padding-top: 2rem; padding-bottom: 4rem; }

/* Grid 2 colunas: inputs | outputs */
.sl-sav-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 960px) {
	.sl-sav-grid { grid-template-columns: 1fr; }
}

/* Panels (inputs + outputs) */
.sl-sav-panel {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	padding: 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}
.sl-sav-outputs {
	background: linear-gradient(180deg, rgba(241,96,0,0.05), rgba(241,96,0,0));
	border-color: rgba(241,96,0,0.2);
}

.sl-sav-panel-head {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sl-sav-step {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	flex-shrink: 0;
}
.sl-sav-outputs .sl-sav-step {
	background: linear-gradient(135deg, var(--sl-brand, #f16000), #ff9440);
	-webkit-background-clip: text;
	background-clip: text;
}
.sl-sav-panel-head h2 {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.2rem;
	letter-spacing: -0.01em;
}
.sl-sav-panel-head p {
	font-size: 0.85rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	margin: 0;
	line-height: 1.45;
}

/* Fields */
.sl-sav-fields {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.sl-sav-field label {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--sl-text, #fafafc);
}
.sl-sav-field label small {
	font-size: 0.75rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	font-weight: 400;
}
.sl-sav-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
}
.sl-sav-field-val {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 1rem;
	font-weight: 700;
	color: var(--sl-teal, #2dd4bf);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.sl-sav-field input[type="range"] {
	width: 100%;
	-webkit-appearance: none; appearance: none;
	background: transparent;
	cursor: pointer;
	height: 22px;
}
.sl-sav-field input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: rgba(255,255,255,0.08);
	border-radius: 999px;
}
.sl-sav-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	border: 2px solid #0a0a0f;
	box-shadow: 0 0 0 1px rgba(45,212,191,0.4), 0 4px 12px rgba(45,212,191,0.3);
	margin-top: -7px;
	cursor: grab;
	transition: transform 0.15s, box-shadow 0.15s;
}
.sl-sav-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sl-sav-field input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.sl-sav-field input[type="range"]::-moz-range-track {
	height: 4px; background: rgba(255,255,255,0.08); border-radius: 999px;
}
.sl-sav-field input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	border: 2px solid #0a0a0f;
	box-shadow: 0 0 0 1px rgba(45,212,191,0.4), 0 4px 12px rgba(45,212,191,0.3);
	cursor: grab;
}
.sl-sav-field input[type="range"]:focus-visible { outline: none; }
.sl-sav-field input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(45,212,191,0.4); }

.sl-sav-field-bounds {
	display: flex;
	justify-content: space-between;
	margin-top: 0.35rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.04em;
}

/* Select (região) */
.sl-sav-field--select { display: flex; flex-direction: column; gap: 0.45rem; }
.sl-sav-select {
	appearance: none; -webkit-appearance: none;
	width: 100%;
	padding: 0.75rem 2.4rem 0.75rem 1rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	background-color: rgba(0,0,0,0.25);
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%232dd4bf" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 1rem center;
	color: var(--sl-text, #fafafc);
	font-family: inherit;
	font-size: 0.92rem;
	cursor: pointer;
	transition: border-color 0.2s;
}
.sl-sav-select:focus-visible {
	outline: none;
	border-color: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 0 2px rgba(45,212,191,0.2);
}
.sl-sav-field-hint {
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	line-height: 1.4;
}

/* Cards de economia */
.sl-sav-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
@media (max-width: 520px) {
	.sl-sav-cards { grid-template-columns: 1fr; }
}
.sl-sav-card {
	padding: 0.9rem 1rem;
	border: 1px solid rgba(241,96,0,0.18);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(241,96,0,0.06), rgba(241,96,0,0.02));
	transition: transform 0.25s, border-color 0.25s;
}
.sl-sav-card:hover {
	transform: translateY(-2px);
	border-color: rgba(241,96,0,0.4);
}
.sl-sav-card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.55rem;
}
.sl-sav-card-icon {
	width: 28px; height: 28px;
	border-radius: 7px;
	background: rgba(241,96,0,0.15);
	border: 1px solid rgba(241,96,0,0.3);
	color: var(--sl-brand, #f16000);
	display: grid; place-items: center;
	flex-shrink: 0;
}
.sl-sav-card-title {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	flex: 1;
}
.sl-sav-card-pct {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	background: rgba(196,255,62,0.15);
	color: var(--sl-lime, #c4ff3e);
}
.sl-sav-card-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
	margin-bottom: 0.15rem;
}
.sl-sav-card-sub {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.66rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.04em;
}

/* Highlight block (totais + ROI + CTA) */
.sl-sav-highlight {
	border: 1px solid rgba(45,212,191,0.25);
	border-radius: 22px;
	background:
		radial-gradient(ellipse at top left, rgba(45,212,191,0.08), transparent 60%),
		linear-gradient(180deg, rgba(45,212,191,0.04), rgba(196,255,62,0.02));
	padding: 2rem 2.25rem;
	margin-bottom: 1.5rem;
	overflow: hidden;
	position: relative;
}
.sl-sav-highlight::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at bottom right, rgba(196,255,62,0.05), transparent 60%);
	pointer-events: none;
}
.sl-sav-highlight-grid {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 2rem;
	position: relative;
	align-items: center;
}
@media (max-width: 820px) {
	.sl-sav-highlight { padding: 1.5rem 1.4rem; }
	.sl-sav-highlight-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

.sl-sav-highlight-totals {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-sav-total {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.sl-sav-total-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-sav-total-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}
.sl-sav-total--big .sl-sav-total-value {
	font-size: clamp(2.5rem, 6vw, 3.8rem);
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf) 0%, #7fe4d3 55%, var(--sl-lime, #c4ff3e) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-sav-cost {
	color: var(--sl-brand, #f16000) !important;
	font-size: 1.3rem !important;
}
.sl-sav-total-sub {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	margin-top: 0.1rem;
}

/* Payback / ROI */
.sl-sav-payback {
	padding: 1.5rem 1.5rem;
	border: 1px solid rgba(196,255,62,0.25);
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(196,255,62,0.05), rgba(196,255,62,0));
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.sl-sav-payback-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-lime, #c4ff3e);
}
.sl-sav-payback-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(2.2rem, 5vw, 3.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}
.sl-sav-payback-bar {
	height: 8px;
	background: rgba(255,255,255,0.05);
	border-radius: 999px;
	overflow: hidden;
	margin: 0.3rem 0 0.2rem;
}
.sl-sav-payback-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	border-radius: 999px;
	transition: width 0.5s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
}
.sl-sav-payback-meta {
	display: flex;
	justify-content: space-between;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-sav-payback-meta span:last-child { color: var(--sl-text-2, rgba(250,250,252,0.62)); }
.sl-sav-cta {
	margin-top: 0.6rem;
	width: 100%;
	justify-content: center;
}
.sl-sav-payback-note {
	text-align: center;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.04em;
}

/* Disclaimer */
.sl-sav-disclaimer {
	font-size: 0.78rem;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
	line-height: 1.55;
	max-width: 880px;
	margin: 1rem auto 0;
	text-align: center;
}

/* ========================================================================
   PERSONA PAGES (gestores, revendas, seguradoras)
   ======================================================================== */

/* Hero compartilhado */
.sl-persona-hero {
	padding: 4rem 0 2.5rem;
	position: relative;
	overflow: hidden;
}
.sl-persona-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 20% 0%, rgba(241,96,0,0.08), transparent 55%),
	            radial-gradient(ellipse at 80% 100%, rgba(45,212,191,0.08), transparent 55%);
}
.sl-persona-hero-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.sl-persona-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}
.sl-persona-hero-sub {
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	font-size: 1.1rem;
	line-height: 1.55;
	max-width: 720px;
	margin: 0;
}
.sl-persona-hero-sub strong { color: var(--sl-lime, #c4ff3e); font-weight: 600; }
.sl-persona-hero--revenda .sl-persona-hero-sub strong { color: var(--sl-brand, #f16000); }
.sl-persona-hero--seguradora .sl-persona-hero-sub strong { color: var(--sl-teal, #2dd4bf); }

.sl-persona-hero-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.4rem;
}

/* 3 stats em linha sob o CTA */
.sl-persona-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	width: 100%;
	max-width: 640px;
}
@media (max-width: 560px) { .sl-persona-hero-stats { grid-template-columns: 1fr; max-width: 320px; } }
.sl-persona-hero-stats > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	text-align: center;
}
.sl-persona-hero-stats strong {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-persona-hero--revenda .sl-persona-hero-stats strong {
	background: linear-gradient(135deg, var(--sl-brand, #f16000), #ffa466);
	-webkit-background-clip: text;
	background-clip: text;
}
.sl-persona-hero-stats span {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	line-height: 1.4;
}

/* Pains grid (6 cards) */
.sl-persona-pains { padding-bottom: 2rem; }
.sl-persona-pain-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
@media (max-width: 900px) { .sl-persona-pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-persona-pain-grid { grid-template-columns: 1fr; } }
.sl-persona-pain {
	padding: 1.5rem 1.4rem 1.6rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,64,96,0.04), transparent);
	transition: border-color 0.2s, transform 0.2s;
}
.sl-persona-pain:hover {
	border-color: rgba(255,64,96,0.3);
	transform: translateY(-2px);
}
.sl-persona-pain-icon {
	font-size: 1.7rem;
	line-height: 1;
	margin-bottom: 0.85rem;
	filter: grayscale(0.15);
}
.sl-persona-pain h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--sl-text, #fafafc);
}
.sl-persona-pain p {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
}

/* Value/Features grid */
.sl-persona-value,
.sl-persona-feats { padding-top: 2rem; padding-bottom: 3rem; }
.sl-persona-feat-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
.sl-persona-feat-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sl-persona-feat-grid,
                            .sl-persona-feat-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-persona-feat-grid,
                            .sl-persona-feat-grid--3 { grid-template-columns: 1fr; } }
.sl-persona-feat {
	padding: 1.5rem 1.4rem 1.6rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(45,212,191,0.04), transparent);
	transition: border-color 0.2s, transform 0.2s;
}
.sl-persona-feat:hover {
	border-color: rgba(45,212,191,0.35);
	transform: translateY(-2px);
}
.sl-persona-feat-icon {
	font-size: 1.8rem;
	line-height: 1;
	margin-bottom: 0.85rem;
}
.sl-persona-feat h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--sl-text, #fafafc);
}
.sl-persona-feat p {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
}
.sl-persona-feat p strong {
	color: var(--sl-text, #fafafc);
	font-size: 1.05rem;
	font-weight: 700;
}

/* Proof section (gestores) */
.sl-persona-proof { padding-top: 2rem; }
.sl-persona-proof-inner {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 2.5rem;
	align-items: center;
	padding: 2.5rem;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 22px;
	background: linear-gradient(135deg, rgba(45,212,191,0.05), rgba(196,255,62,0.03));
}
@media (max-width: 820px) {
	.sl-persona-proof-inner { grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem; }
}
.sl-persona-proof-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
.sl-persona-proof-stats > div {
	padding: 1.2rem 1.4rem;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	background: rgba(255,255,255,0.02);
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.sl-persona-proof-stats strong {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-persona-proof-stats span {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* CTA box (revendas - link calculadora ROI) */
.sl-persona-cta-box { padding-top: 2rem; padding-bottom: 3rem; }
.sl-persona-cta-box-inner {
	text-align: center;
	padding: 3rem 2rem;
	border: 1px solid rgba(241,96,0,0.22);
	border-radius: 22px;
	background:
		radial-gradient(ellipse at top, rgba(241,96,0,0.07), transparent 60%),
		linear-gradient(180deg, rgba(241,96,0,0.03), rgba(241,96,0,0));
}

/* Usecases grid (seguradoras) - 4 cards 2x2 com número destacado */
.sl-persona-usecases { padding-top: 2rem; padding-bottom: 2rem; }
.sl-persona-usecase-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
@media (max-width: 720px) { .sl-persona-usecase-grid { grid-template-columns: 1fr; } }
.sl-persona-usecase {
	padding: 1.75rem 1.75rem 1.85rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(45,212,191,0.04), transparent);
	transition: border-color 0.2s, transform 0.2s;
	position: relative;
}
.sl-persona-usecase:hover {
	border-color: rgba(45,212,191,0.35);
	transform: translateY(-2px);
}
.sl-persona-usecase-num {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	margin-bottom: 0.85rem;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-persona-usecase h3 {
	font-size: 1.1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--sl-text, #fafafc);
}
.sl-persona-usecase p {
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
}
.sl-persona-usecase code {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.82rem;
	padding: 0.1rem 0.4rem;
	background: rgba(45,212,191,0.1);
	border: 1px solid rgba(45,212,191,0.25);
	border-radius: 5px;
	color: var(--sl-teal, #2dd4bf);
	white-space: nowrap;
}

/* Tech specs (seguradoras) */
.sl-persona-techspecs { padding-top: 2rem; padding-bottom: 3rem; }
.sl-persona-techspecs-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
	padding: 2.5rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
@media (max-width: 820px) {
	.sl-persona-techspecs-inner { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }
}
.sl-persona-techspecs-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6rem;
}
.sl-persona-techspecs-list li {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	background: rgba(0,0,0,0.2);
	align-items: baseline;
}
.sl-persona-techspecs-list strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-teal, #2dd4bf);
}
.sl-persona-techspecs-list span {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}

/* Partnership (seguradoras) */
.sl-persona-partnership { padding-top: 1rem; padding-bottom: 3rem; }
.sl-persona-partnership-inner {
	text-align: center;
	padding: 3.5rem 2rem 3rem;
	border: 1px solid rgba(196,255,62,0.22);
	border-radius: 22px;
	background:
		radial-gradient(ellipse at top, rgba(196,255,62,0.06), transparent 60%),
		linear-gradient(180deg, rgba(45,212,191,0.04), rgba(45,212,191,0));
}
.sl-persona-partnership-inner h2 { margin-inline: auto; }
.sl-persona-partnership-inner p { margin-inline: auto; }
.sl-persona-partnership-foot {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.sl-persona-partnership-foot small {
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.45));
	line-height: 1.5;
}

/* Link "Ver mais perguntas" abaixo do FAQ da home */
.sl-faqs-more {
	margin-top: 2rem;
	text-align: center;
}

/* ========================================================================
   PRICING INTERATIVO (home) — slider com cálculo dinâmico
   ======================================================================== */
.sl-pri {
	max-width: 1100px;
	margin: 2.5rem auto 0;
	padding: 2.25rem 2.25rem 2rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
}

/* Slider */
.sl-pri-slider {
	margin-bottom: 2rem;
}
.sl-pri-slider-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.75rem;
}
.sl-pri-slider-label {
	font-size: 1rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
}
.sl-pri-slider-val {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	background: linear-gradient(135deg, var(--sl-brand, #f16000), #ffaa44);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-variant-numeric: tabular-nums;
}
.sl-pri-slider input[type="range"] {
	-webkit-appearance: none; appearance: none;
	width: 100%;
	height: 24px;
	background: transparent;
	cursor: pointer;
}
.sl-pri-slider input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: linear-gradient(90deg,
		var(--sl-brand, #f16000) 0%,
		var(--sl-teal, #2dd4bf) 50%,
		var(--sl-lime, #c4ff3e) 100%
	);
	border-radius: 999px;
}
.sl-pri-slider input[type="range"]::-moz-range-track {
	height: 4px;
	background: linear-gradient(90deg, var(--sl-brand), var(--sl-teal), var(--sl-lime));
	border-radius: 999px;
}
.sl-pri-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sl-brand, #f16000);
	border: 3px solid #0a0a0f;
	box-shadow: 0 0 0 1px rgba(241,96,0,0.4), 0 6px 14px rgba(241,96,0,0.4);
	margin-top: -9px;
	cursor: grab;
	transition: transform 0.15s, box-shadow 0.15s;
}
.sl-pri-slider input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sl-pri-slider input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
.sl-pri-slider input[type="range"]::-moz-range-thumb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sl-brand, #f16000);
	border: 3px solid #0a0a0f;
	box-shadow: 0 0 0 1px rgba(241,96,0,0.4), 0 6px 14px rgba(241,96,0,0.4);
	cursor: grab;
}
.sl-pri-slider-bounds {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.06em;
}

/* Resultado (3 cards) */
.sl-pri-result {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
	margin-bottom: 1.5rem;
}
@media (max-width: 720px) {
	.sl-pri-result { grid-template-columns: 1fr; }
}
.sl-pri-result-card {
	padding: 1.2rem 1.25rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: rgba(255,255,255,0.02);
	transition: border-color 0.3s, background 0.3s;
}
.sl-pri-result-card--main {
	border-color: rgba(241,96,0,0.35);
	background: linear-gradient(180deg, rgba(241,96,0,0.06), transparent);
}
.sl-pri-result-label {
	display: block;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	margin-bottom: 0.5rem;
}
.sl-pri-result-value {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
}
.sl-pri-result-curr {
	font-size: 1rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}
.sl-pri-result-value strong {
	font-size: 2rem;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}
.sl-pri-result-card--main .sl-pri-result-value strong {
	background: linear-gradient(135deg, #ff7a1a, var(--sl-brand, #f16000));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-pri-result-tier {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.78rem;
	color: var(--sl-text-2, rgba(250,250,252,0.6));
}

/* Scale visual (7 faixas) */
.sl-pri-scale {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.4rem;
	margin-bottom: 1.75rem;
}
@media (max-width: 760px) { .sl-pri-scale { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .sl-pri-scale { grid-template-columns: repeat(2, 1fr); } }
.sl-pri-scale-tier {
	padding: 0.6rem 0.5rem;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 8px;
	background: rgba(255,255,255,0.015);
	text-align: center;
	transition: border-color 0.3s, background 0.3s, transform 0.2s;
}
.sl-pri-scale-tier.is-active {
	border-color: var(--sl-brand, rgba(241,96,0,0.5));
	background: rgba(241,96,0,0.08);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px -8px rgba(241,96,0,0.35);
}
.sl-pri-scale-range {
	display: block;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.62rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.02em;
	margin-bottom: 0.2rem;
}
.sl-pri-scale-tier.is-active .sl-pri-scale-range { color: var(--sl-text-2, rgba(250,250,252,0.75)); }
.sl-pri-scale-price {
	display: block;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}
.sl-pri-scale-tier.is-active .sl-pri-scale-price { color: var(--sl-brand, #f16000); }

/* Footer CTA */
.sl-pri-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255,255,255,0.06);
}
.sl-pri-footer .sl-btn-lg { padding: 0.85rem 2rem; }
.sl-pri-footer-hint {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.04em;
	text-align: center;
}

/* ========================================================================
   LOGOS MARQUEE — prova social (home, entre Features e BigNum)
   ======================================================================== */
.sl-logos-section {
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.sl-logos-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.75rem;
	justify-content: center;
}
.sl-logos-head-line {
	flex: 1;
	max-width: 200px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
}
.sl-logos-head-text {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-align: center;
	white-space: nowrap;
}
.sl-logos-head-text strong {
	color: var(--sl-text-2, rgba(250,250,252,0.85));
	font-weight: 700;
	letter-spacing: 0.04em;
}
@media (max-width: 560px) {
	.sl-logos-head-text { font-size: 0.68rem; white-space: normal; }
}

/* Marquee infinito */
.sl-logos-marquee {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.sl-logos-track {
	display: flex;
	gap: 3rem;
	width: max-content;
	animation: sl-logos-scroll 32s linear infinite;
}
@keyframes sl-logos-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.sl-logos-marquee:hover .sl-logos-track {
	animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
	.sl-logos-track { animation: none; }
}

.sl-logo-item {
	display: inline-flex;
	align-items: center;
	padding: 0.7rem 1.25rem;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: rgba(255,255,255,0.35);
	white-space: nowrap;
	transition: color 0.3s;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	background: rgba(255,255,255,0.02);
}
.sl-logo-item:hover {
	color: var(--sl-text, #fafafc);
	border-color: rgba(45,212,191,0.3);
}

/* Anti-cópia SÓ nos nomes das empresas (admin logado com edit_posts vê normal) */
[data-logos-protect="1"] .sl-logo-item {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-touch-callout: none;
	pointer-events: none;
}

/* ========================================================================
   PERSONAS — 3 cards de funil por público (home, abaixo do hero)
   ======================================================================== */
.sl-per-section { padding-top: 3rem; padding-bottom: 3rem; }
.sl-per-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
}
@media (max-width: 860px) { .sl-per-grid { grid-template-columns: 1fr; } }

.sl-per-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1.75rem 1.6rem 1.4rem;
	border-radius: 18px;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), border-color 0.35s, box-shadow 0.4s;
}
.sl-per-card-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at top, var(--sl-per-glow, rgba(45,212,191,0.12)), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s;
	pointer-events: none;
	z-index: 0;
}
.sl-per-card:hover {
	transform: translateY(-5px);
	border-color: var(--sl-per-accent, rgba(45,212,191,0.4));
	box-shadow: 0 20px 45px -15px rgba(0,0,0,0.6), 0 0 40px -15px var(--sl-per-glow, rgba(45,212,191,0.3));
}
.sl-per-card:hover .sl-per-card-glow { opacity: 1; }

.sl-per-card-chip {
	display: inline-flex;
	align-self: flex-start;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	position: relative; z-index: 1;
	transition: border-color 0.35s, color 0.35s;
}
.sl-per-card:hover .sl-per-card-chip {
	border-color: var(--sl-per-accent, rgba(45,212,191,0.4));
	color: var(--sl-per-solid, var(--sl-teal));
}

.sl-per-card-icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 12px;
	background: var(--sl-per-icon-bg, rgba(45,212,191,0.08));
	border: 1px solid var(--sl-per-accent, rgba(45,212,191,0.25));
	color: var(--sl-per-solid, var(--sl-teal));
	position: relative; z-index: 1;
	transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.sl-per-card:hover .sl-per-card-icon { transform: scale(1.08) rotate(-3deg); }

.sl-per-card-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--sl-text, #fafafc);
	position: relative; z-index: 1;
}
.sl-per-card-desc {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
	position: relative; z-index: 1;
}
.sl-per-card-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	position: relative; z-index: 1;
	flex: 1;
}
.sl-per-card-bullets li {
	position: relative;
	padding-left: 1.25rem;
	font-size: 0.85rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	line-height: 1.4;
}
.sl-per-card-bullets li::before {
	content: "✓";
	position: absolute;
	left: 0; top: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--sl-per-solid, var(--sl-teal));
}

.sl-per-card-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sl-per-solid, var(--sl-teal));
	position: relative; z-index: 1;
	transition: gap 0.3s;
}
.sl-per-card:hover .sl-per-card-cta { gap: 0.7rem; }

/* Variantes por hue */
.sl-per-card--brand {
	--sl-per-accent:   rgba(241,96,0,0.4);
	--sl-per-solid:    #f16000;
	--sl-per-glow:     rgba(241,96,0,0.18);
	--sl-per-icon-bg:  rgba(241,96,0,0.1);
}
.sl-per-card--lime {
	--sl-per-accent:   rgba(196,255,62,0.4);
	--sl-per-solid:    #c4ff3e;
	--sl-per-glow:     rgba(196,255,62,0.18);
	--sl-per-icon-bg:  rgba(196,255,62,0.1);
}
.sl-per-card--teal {
	--sl-per-accent:   rgba(45,212,191,0.4);
	--sl-per-solid:    #2dd4bf;
	--sl-per-glow:     rgba(45,212,191,0.18);
	--sl-per-icon-bg:  rgba(45,212,191,0.1);
}

/* ========================================================================
   FUNCIONALIDADES PREMIUM (section-features.php)
   Glassmorphism + gradient border animado + shine sweep + aurora glow
   ======================================================================== */
.sl-fpx-section {
	position: relative;
	padding-top: 4rem;
	padding-bottom: 4rem;
	overflow: hidden;
	isolation: isolate;
}

/* Background ambiente */
.sl-fpx-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: -1;
}
/* Aurora orbs da section Funcionalidades — desativadas (user removeu glows de canto) */
.sl-fpx-orb { display: none !important; }
.sl-fpx-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

@media (prefers-reduced-motion: reduce) {
	.sl-fpx-orb { animation: none; }
}

/* Grid responsivo */
.sl-fpx-grid-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1rem;
	margin-top: 2.5rem;
	position: relative;
}
@media (max-width: 900px) { .sl-fpx-grid-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-fpx-grid-wrap { grid-template-columns: 1fr; } }

/* CARD — base glassmorphism */
.sl-fpx-card {
	position: relative;
	padding: 1.75rem 1.6rem 1.5rem;
	border-radius: 20px;
	background:
		linear-gradient(145deg, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0.015) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.08);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s,
		box-shadow 0.5s;
	box-shadow:
		0 1px 0 0 rgba(255,255,255,0.04) inset,
		0 10px 30px -12px rgba(0,0,0,0.5);
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

/* Borda gradiente animada (pseudo-elemento) */
.sl-fpx-card::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		135deg,
		transparent 0%,
		rgba(255,255,255,0.12) 25%,
		transparent 50%,
		rgba(255,255,255,0.12) 75%,
		transparent 100%
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	        mask-composite: exclude;
	pointer-events: none;
	opacity: 0.8;
	transition: opacity 0.4s, background 0.4s;
	z-index: 1;
}

/* Aurora radial glow on hover */
.sl-fpx-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(
		circle at 50% 0%,
		var(--sl-fpx-glow, rgba(45,212,191,0.22)) 0%,
		transparent 50%
	);
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1);
	pointer-events: none;
	z-index: 0;
}

/* Hover state */
.sl-fpx-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255,255,255,0.16);
	box-shadow:
		0 1px 0 0 rgba(255,255,255,0.08) inset,
		0 25px 60px -15px rgba(0,0,0,0.65),
		0 0 80px -30px var(--sl-fpx-glow, rgba(45,212,191,0.3));
}
.sl-fpx-card:hover::after { opacity: 1; }
.sl-fpx-card:hover::before {
	opacity: 1;
	background: linear-gradient(
		135deg,
		var(--sl-fpx-accent, rgba(45,212,191,0.5)) 0%,
		rgba(255,255,255,0.2) 35%,
		transparent 55%,
		rgba(255,255,255,0.2) 75%,
		var(--sl-fpx-accent, rgba(45,212,191,0.5)) 100%
	);
}

/* Shine sweep overlay (passa da esquerda pra direita no hover) */
.sl-fpx-card-shine {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(255,255,255,0.08) 48%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.08) 52%,
		transparent 70%
	);
	transform: translateX(-130%);
	transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
	z-index: 2;
}
.sl-fpx-card:hover .sl-fpx-card-shine {
	transform: translateX(130%);
}

/* Number badge (01-09) */
.sl-fpx-card-num {
	position: absolute;
	top: 1.1rem;
	right: 1.3rem;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sl-text-3, rgba(250,250,252,0.35));
	z-index: 3;
	transition: color 0.35s, transform 0.35s;
}
.sl-fpx-card:hover .sl-fpx-card-num {
	color: var(--sl-fpx-accent-solid, var(--sl-teal, #2dd4bf));
	transform: translateY(-2px);
}

/* Icon — caixa com ring gradient + SVG dentro usando stroke gradient */
.sl-fpx-card-icon {
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	margin-bottom: 1.2rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.1);
	transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.35s, background 0.35s;
	z-index: 3;
}
.sl-fpx-card-icon::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--sl-fpx-icon-glow, radial-gradient(circle, rgba(45,212,191,0.25), transparent 70%));
	filter: blur(10px);
	opacity: 0;
	transition: opacity 0.45s;
	z-index: -1;
}
.sl-fpx-card:hover .sl-fpx-card-icon {
	transform: scale(1.08) rotate(-2deg);
	border-color: rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.06);
}
.sl-fpx-card:hover .sl-fpx-card-icon::before {
	opacity: 1;
}

/* Title + desc */
.sl-fpx-card-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin: 0 0 0.55rem;
	color: var(--sl-text, #fafafc);
	position: relative;
	z-index: 3;
	transition: color 0.35s;
}
.sl-fpx-card-desc {
	font-size: 0.89rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	margin: 0 0 1.25rem;
	position: relative;
	z-index: 3;
	flex: 1;
}

/* Footer (tag + arrow) */
.sl-fpx-card-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	position: relative;
	z-index: 3;
}
.sl-fpx-card-tag {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	text-transform: uppercase;
}
.sl-fpx-card-arrow {
	display: inline-grid;
	place-items: center;
	width: 28px; height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.03);
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, color 0.3s, background 0.3s;
}
.sl-fpx-card:hover .sl-fpx-card-arrow {
	transform: translate(3px, -3px);
	color: var(--sl-fpx-accent-solid, var(--sl-teal, #2dd4bf));
	border-color: var(--sl-fpx-accent-solid, rgba(45,212,191,0.5));
	background: rgba(255,255,255,0.06);
}

/* Variantes de cor (hue) — definem accent + glow */
.sl-fpx-card--teal  {
	--sl-fpx-glow: rgba(45,212,191,0.28);
	--sl-fpx-accent: rgba(45,212,191,0.55);
	--sl-fpx-accent-solid: #2dd4bf;
	--sl-fpx-icon-glow: radial-gradient(circle, rgba(45,212,191,0.4), transparent 70%);
}
.sl-fpx-card--brand {
	--sl-fpx-glow: rgba(241,96,0,0.28);
	--sl-fpx-accent: rgba(241,96,0,0.55);
	--sl-fpx-accent-solid: #ffaa44;
	--sl-fpx-icon-glow: radial-gradient(circle, rgba(241,96,0,0.4), transparent 70%);
}
.sl-fpx-card--lime {
	--sl-fpx-glow: rgba(196,255,62,0.3);
	--sl-fpx-accent: rgba(196,255,62,0.55);
	--sl-fpx-accent-solid: #c4ff3e;
	--sl-fpx-icon-glow: radial-gradient(circle, rgba(196,255,62,0.35), transparent 70%);
}

/* ========================================================================
   SMARTS APP (plans-smartsapp.php — WhatsApp integration)
   ======================================================================== */

/* Descrição do pacote dentro do card */
.sl-sa-pkg-desc {
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0.75rem 0 1.25rem;
	min-height: 4.7em; /* padroniza altura dos 3 cards independente do texto */
}

/* Lista de itens inclusos (com check lime) */
.sl-sa-includes {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 1.25rem;
}
.sl-sa-includes li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.85rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	line-height: 1.4;
}
.sl-sa-includes li::before {
	content: "✓";
	position: absolute;
	left: 0; top: 0;
	width: 1.1rem;
	height: 1.1rem;
	font-size: 0.7rem;
	font-weight: 700;
	border-radius: 50%;
	background: rgba(196,255,62,0.15);
	color: var(--sl-lime, #c4ff3e);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}
.sl-pkg--popular .sl-sa-includes li::before {
	background: rgba(241,96,0,0.2);
	color: var(--sl-brand, #f16000);
}

/* Fluxo "Como funciona — 3 passos" */
.sl-sa-flow {
	margin-top: 4rem;
	padding: 2.5rem 2rem;
	border: 1px solid rgba(45,212,191,0.18);
	border-radius: 22px;
	background:
		radial-gradient(ellipse at top, rgba(45,212,191,0.05), transparent 60%),
		linear-gradient(180deg, rgba(45,212,191,0.02), rgba(45,212,191,0));
}
.sl-sa-flow-head {
	text-align: center;
	margin-bottom: 2rem;
}
.sl-sa-flow-head h3 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	margin: 0.5rem 0 0;
	letter-spacing: -0.02em;
}
.sl-sa-flow-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}
@media (max-width: 720px) { .sl-sa-flow-steps { grid-template-columns: 1fr; } }
.sl-sa-flow-step {
	padding: 1.5rem 1.5rem 1.6rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: rgba(0,0,0,0.2);
	position: relative;
}
.sl-sa-flow-num {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	margin-bottom: 0.75rem;
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-sa-flow-step h4 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--sl-text, #fafafc);
}
.sl-sa-flow-step p {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
}

/* ========================================================================
   SITE WHITE-LABEL (page-site-proprio.php)
   ======================================================================== */

/* Hero */
.sl-sitewl-hero {
	padding: 4rem 0 2rem;
	position: relative;
}
.sl-sitewl-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.sl-sitewl-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}
.sl-sitewl-hero-sub {
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	font-size: 1.1rem;
	line-height: 1.55;
	max-width: 700px;
	margin: 0;
}
.sl-sitewl-hero-sub strong { color: var(--sl-text, #fafafc); font-weight: 600; }
.sl-sitewl-hero-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.4rem;
}
.sl-sitewl-hero-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}
.sl-sitewl-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.9rem;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 999px;
	background: rgba(45,212,191,0.05);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
}
.sl-sitewl-badge-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
}

/* Section padding override */
.sl-sitewl-preview-section,
.sl-sitewl-features-section,
.sl-sitewl-pricing-section { padding-top: 2rem; padding-bottom: 4rem; }

/* Preview do site exemplo */
.sl-sitewl-preview {
	margin-top: 2.5rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.1));
	border-radius: 18px;
	overflow: hidden;
	background: #0e0e15;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}
.sl-sitewl-preview-chrome {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.65rem 1rem;
	background: rgba(255,255,255,0.03);
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sl-sitewl-preview-dots {
	display: flex;
	gap: 0.35rem;
}
.sl-sitewl-preview-dots span {
	width: 11px; height: 11px;
	border-radius: 50%;
	display: inline-block;
}
.sl-sitewl-preview-url {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.3rem 0.8rem;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.75rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	max-width: 480px;
	margin: 0 auto;
}
.sl-sitewl-preview-url svg { color: var(--sl-lime, #c4ff3e); flex-shrink: 0; }
.sl-sitewl-preview-openbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px; height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,0.08);
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	background: rgba(255,255,255,0.02);
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
	flex-shrink: 0;
}
.sl-sitewl-preview-openbtn:hover {
	border-color: rgba(45,212,191,0.4);
	color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.06);
}
.sl-sitewl-preview-frame {
	position: relative;
	height: 560px;
	background: #0a0a0f;
	overflow: hidden;
}

/* Imagem real do site exemplo (enviada via Customizer) */
.sl-sitewl-preview-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

/* Placeholder exibido enquanto a imagem não foi configurada no Customizer */
.sl-sitewl-preview-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 2rem;
	margin: 1rem;
	text-align: center;
	color: var(--sl-text-3, rgba(255,255,255,0.5));
	border: 2px dashed rgba(255,255,255,0.1);
	border-radius: 12px;
	background:
		radial-gradient(circle at 50% 40%, rgba(241,96,0,0.06), transparent 60%),
		#0a0a0f;
}
.sl-sitewl-preview-placeholder svg {
	opacity: 0.45;
	margin-bottom: 0.4rem;
}
.sl-sitewl-preview-placeholder strong {
	color: var(--sl-text-2, rgba(255,255,255,0.82));
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.sl-sitewl-preview-placeholder span {
	font-size: 0.82rem;
	max-width: 360px;
	line-height: 1.55;
}
.sl-sitewl-preview-placeholder em {
	color: var(--sl-teal, #26c6a3);
	font-style: normal;
	font-weight: 600;
}

/* ======= Mockup visual do site exemplo (substitui iframe bloqueado) ======= */
.sl-sitewl-mock {
	position: absolute;
	inset: 0;
	background: #0f0b08;
	display: flex;
	flex-direction: column;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	overflow: hidden;
}

/* Header do mockup */
.sl-sitewl-mock-header {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 0.9rem 2rem;
	background: rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(255,255,255,0.05);
	backdrop-filter: blur(6px);
	z-index: 2;
	flex-shrink: 0;
}
.sl-sitewl-mock-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}
.sl-sitewl-mock-nav {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	flex: 1;
	justify-content: flex-end;
	font-size: 0.85rem;
	color: rgba(255,255,255,0.75);
}
.sl-sitewl-mock-nav span { cursor: default; }
.sl-sitewl-mock-nav span.is-active {
	color: #fff;
	position: relative;
	padding-bottom: 2px;
	border-bottom: 2px solid #f16000;
}
.sl-sitewl-mock-access {
	padding: 0.55rem 1.25rem;
	background: #f16000;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	border-radius: 6px;
	flex-shrink: 0;
}

/* Hero com caminhão */
.sl-sitewl-mock-hero {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.sl-sitewl-mock-bg {
	position: absolute;
	inset: 0;
}
.sl-sitewl-mock-truck {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sl-sitewl-mock-pin {
	position: absolute;
	top: 48%;
	right: 24%;
	transform: translate(50%, -50%);
	filter: drop-shadow(0 8px 24px rgba(241,96,0,0.5));
	animation: sl-sitewl-mock-pin-bob 3.5s ease-in-out infinite;
}
@keyframes sl-sitewl-mock-pin-bob {
	0%, 100% { transform: translate(50%, -50%); }
	50%      { transform: translate(50%, -58%); }
}

/* Card hero à esquerda */
.sl-sitewl-mock-card {
	position: absolute;
	left: 4rem;
	top: 50%;
	transform: translateY(-50%);
	max-width: 380px;
	padding: 1.25rem 1.5rem 1.5rem;
	background: rgba(14,10,6,0.65);
	border-left: 3px solid #f16000;
	backdrop-filter: blur(4px);
}
.sl-sitewl-mock-card h3 {
	font-family: var(--sl-font-display, sans-serif);
	font-size: 2.15rem;
	font-weight: 800;
	line-height: 1.1;
	color: #f16000;
	margin: 0 0 0.7rem;
	letter-spacing: -0.02em;
}
.sl-sitewl-mock-card p {
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.85);
	margin: 0 0 1.1rem;
}
.sl-sitewl-mock-ctas {
	display: flex;
	gap: 0.55rem;
}
.sl-sitewl-mock-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 1.15rem;
	font-size: 0.78rem;
	font-weight: 700;
	border-radius: 4px;
	cursor: default;
}
.sl-sitewl-mock-btn--ghost {
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
}
.sl-sitewl-mock-btn--primary {
	background: #f16000;
	color: #fff;
}

/* Responsividade do mockup */
@media (max-width: 820px) {
	.sl-sitewl-mock-nav span:not(.is-active) { display: none; }
	.sl-sitewl-mock-card { left: 1.5rem; max-width: 55%; padding: 1rem 1.2rem; }
	.sl-sitewl-mock-card h3 { font-size: 1.5rem; }
	.sl-sitewl-mock-card p { font-size: 0.7rem; }
	.sl-sitewl-mock-pin { right: 12%; }
	.sl-sitewl-mock-pin svg { width: 50px; height: 50px; }
}
@media (max-width: 560px) {
	.sl-sitewl-mock-nav { display: none; }
	.sl-sitewl-mock-header { padding: 0.75rem 1rem; }
	.sl-sitewl-mock-card { padding: 0.85rem 1rem; }
	.sl-sitewl-mock-card h3 { font-size: 1.2rem; }
	.sl-sitewl-mock-pin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-sitewl-mock-pin { animation: none; }
}
.sl-sitewl-preview-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10,10,15,0) 40%, rgba(10,10,15,0.85) 85%, rgba(10,10,15,0.95) 100%);
	pointer-events: none;
}
.sl-sitewl-preview-cta {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background: var(--sl-brand, #f16000);
	color: #fff;
	text-decoration: none;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.85rem;
	box-shadow: 0 12px 28px rgba(241,96,0,0.4);
	transition: transform 0.2s, box-shadow 0.2s;
	z-index: 2;
}
.sl-sitewl-preview-cta:hover {
	transform: translate(-50%, -2px);
	box-shadow: 0 16px 36px rgba(241,96,0,0.55);
}
@media (max-width: 720px) {
	.sl-sitewl-preview-frame { height: 420px; }
}

/* Features grid */
.sl-sitewl-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
@media (max-width: 900px) { .sl-sitewl-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-sitewl-features { grid-template-columns: 1fr; } }
.sl-sitewl-feat {
	padding: 1.5rem 1.5rem 1.6rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	transition: border-color 0.2s, transform 0.2s;
}
.sl-sitewl-feat:hover {
	border-color: rgba(45,212,191,0.3);
	transform: translateY(-2px);
}
.sl-sitewl-feat-icon {
	width: 44px; height: 44px;
	border-radius: 10px;
	background: rgba(45,212,191,0.1);
	border: 1px solid rgba(45,212,191,0.25);
	color: var(--sl-teal, #2dd4bf);
	display: grid;
	place-items: center;
	margin-bottom: 1rem;
}
.sl-sitewl-feat h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--sl-text, #fafafc);
}
.sl-sitewl-feat p {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	margin: 0;
}

/* Pricing (2 cards) */
.sl-sitewl-pricing {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2rem;
	max-width: 860px;
	margin-inline: auto;
}
@media (max-width: 680px) { .sl-sitewl-pricing { grid-template-columns: 1fr; } }
.sl-sitewl-price {
	padding: 1.75rem 1.75rem 1.85rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.1));
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.sl-sitewl-price--featured {
	border-color: rgba(45,212,191,0.35);
	background: linear-gradient(180deg, rgba(45,212,191,0.06), rgba(45,212,191,0));
	box-shadow: 0 20px 50px -20px rgba(45,212,191,0.2);
}
.sl-sitewl-price header { margin-bottom: 1.25rem; }
.sl-sitewl-price-label {
	display: block;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
	margin-bottom: 0.5rem;
}
.sl-sitewl-price-value {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
}
.sl-sitewl-price-currency {
	font-size: 1.5rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}
.sl-sitewl-price-amount {
	font-size: clamp(3rem, 5vw, 4rem);
	color: var(--sl-text, #fafafc);
}
.sl-sitewl-price--featured .sl-sitewl-price-amount {
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-sitewl-price-sub {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
}
.sl-sitewl-price-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	border-top: 1px solid rgba(255,255,255,0.06);
	padding-top: 1.2rem;
}
.sl-sitewl-price-list li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 0.88rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	line-height: 1.45;
}
.sl-sitewl-price-list li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.45rem;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 6px rgba(45,212,191,0.5);
}

/* Pricing total callout */
.sl-sitewl-pricing-total {
	margin-top: 2rem;
	padding: 1.75rem 2rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
	border: 1px solid rgba(196,255,62,0.25);
	border-radius: 16px;
	background: linear-gradient(135deg, rgba(196,255,62,0.05), rgba(45,212,191,0.03));
	max-width: 860px;
	margin-inline: auto;
}
@media (max-width: 680px) {
	.sl-sitewl-pricing-total { grid-template-columns: 1fr; text-align: center; }
	.sl-sitewl-pricing-total-cta { justify-self: stretch; }
	.sl-sitewl-pricing-total-cta .sl-btn { width: 100%; justify-content: center; }
}
.sl-sitewl-pricing-total-label {
	display: block;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	margin-bottom: 0.35rem;
}
.sl-sitewl-pricing-total-value {
	display: block;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--sl-text, #fafafc);
}
.sl-sitewl-pricing-total small {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--sl-text-3, rgba(250,250,252,0.55));
}

/* ========================================================================
   SCROLL PROGRESS BAR
   ======================================================================== */
.sl-scroll-bar {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, var(--sl-brand), var(--sl-teal), var(--sl-lime));
	transform-origin: 0 50%;
	transform: scaleX(0);
	z-index: 100;
	pointer-events: none;
	will-change: transform;
}

/* ========================================================================
   REVEAL ANIMATIONS
   ======================================================================== */
.sl-reveal {
	opacity: 0;
	transform: translateY(40px);
	filter: blur(8px);
	transition: opacity 1s var(--sl-ease), transform 1s var(--sl-ease), filter 1s var(--sl-ease);
	will-change: opacity, transform, filter;
}
.sl-reveal.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

.sl-reveal-l { transform: translateX(-40px); }
.sl-reveal-l.is-in { transform: translateX(0); }
.sl-reveal-r { transform: translateX(40px); }
.sl-reveal-r.is-in { transform: translateX(0); }
.sl-reveal-scale { transform: scale(0.94); filter: blur(10px); }
.sl-reveal-scale.is-in { transform: scale(1); }

.sl-reveal-children > * {
	opacity: 0;
	transform: translateY(24px);
	filter: blur(6px);
	transition: opacity 0.8s var(--sl-ease), transform 0.8s var(--sl-ease), filter 0.8s var(--sl-ease);
}
.sl-reveal-children.is-in > * {
	opacity: 1; transform: translateY(0); filter: blur(0);
}
.sl-reveal-children.is-in > *:nth-child(1) { transition-delay: 0ms; }
.sl-reveal-children.is-in > *:nth-child(2) { transition-delay: 80ms; }
.sl-reveal-children.is-in > *:nth-child(3) { transition-delay: 160ms; }
.sl-reveal-children.is-in > *:nth-child(4) { transition-delay: 240ms; }
.sl-reveal-children.is-in > *:nth-child(5) { transition-delay: 320ms; }
.sl-reveal-children.is-in > *:nth-child(6) { transition-delay: 400ms; }
.sl-reveal-children.is-in > *:nth-child(7) { transition-delay: 480ms; }
.sl-reveal-children.is-in > *:nth-child(8) { transition-delay: 560ms; }

/* Char reveal (hero title) */
.sl-char {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.6em);
	filter: blur(10px);
	animation: sl-char-in 1s var(--sl-ease) forwards;
}
@keyframes sl-char-in { to { opacity: 1; transform: translateY(0); filter: blur(0); } }

/* ========================================================================
   PLATFORM PAGE — page-plataforma.php
   ======================================================================== */
.sl-plat-hero { padding: 6rem 0 3rem; position: relative; }

/* Badge de público-alvo no hero */
.sl-plat-hero-who {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	padding: 0.55rem 1.1rem;
	margin-top: 0.25rem;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 999px;
	background: rgba(255,255,255,0.02);
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
}
.sl-plat-hero-who-sep {
	color: var(--sl-text-3, rgba(250,250,252,0.35));
}
@media (max-width: 560px) {
	.sl-plat-hero-who { font-size: 0.62rem; gap: 0.4rem; padding: 0.45rem 0.85rem; }
}

/* Bridge CTA ao final do Tour */
.sl-plat-bridge {
	margin-top: 3rem;
	padding: 2rem 2.25rem;
	display: grid;
	grid-template-columns: 1.4fr auto;
	gap: 2rem;
	align-items: center;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 18px;
	background:
		radial-gradient(ellipse at top right, rgba(45,212,191,0.07), transparent 60%),
		linear-gradient(180deg, rgba(45,212,191,0.03), rgba(45,212,191,0));
}
@media (max-width: 820px) {
	.sl-plat-bridge { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; gap: 1.5rem; text-align: center; }
	.sl-plat-bridge-ctas { justify-content: center; }
}
.sl-plat-bridge-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-teal, #2dd4bf);
	margin-bottom: 0.75rem;
}
.sl-plat-bridge-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	animation: sl-bxnum-blink 1.4s ease-in-out infinite;
}
.sl-plat-bridge h3 {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
	color: var(--sl-text, #fafafc);
}
.sl-plat-bridge p {
	margin: 0;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	font-size: 0.95rem;
	line-height: 1.55;
}
.sl-plat-bridge-ctas {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

/* Specs técnicas (1000+ / 7 / 99,8% / 40+) */
.sl-plat-specs-section { padding-top: 1rem; padding-bottom: 2rem; }
.sl-plat-specs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
@media (max-width: 900px) { .sl-plat-specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sl-plat-specs { grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; } }

.sl-plat-spec {
	padding: 1.5rem 1.4rem 1.6rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
	transition: border-color 0.25s, transform 0.25s, background 0.25s;
	text-align: left;
}
.sl-plat-spec:hover {
	border-color: rgba(241,96,0,0.3);
	transform: translateY(-3px);
	background: linear-gradient(180deg, rgba(241,96,0,0.04), rgba(241,96,0,0));
}
.sl-plat-spec-num {
	display: block;
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--sl-brand, #f16000), #ffaa44);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 0.75rem;
	font-variant-numeric: tabular-nums;
}
.sl-plat-spec-num em {
	font-style: normal;
	font-size: 0.65em;
	margin-left: 0.05em;
}
.sl-plat-spec-label {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--sl-text, #fafafc);
	margin-bottom: 0.4rem;
	line-height: 1.3;
}
.sl-plat-spec small {
	font-size: 0.78rem;
	color: var(--sl-text-2, rgba(250,250,252,0.6));
	line-height: 1.5;
}

/* Window shell principal */
.sl-ps-shell {
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	background: var(--sl-ink-2);
	box-shadow: 0 60px 120px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(var(--sl-brand-rgb),0.08);
	isolation: isolate;
}
.sl-ps-chrome {
	display: flex; align-items: center; gap: 1rem;
	padding: 0.9rem 1.15rem;
	background: rgba(8, 8, 12, 0.9);
	border-bottom: 1px solid var(--sl-line);
}
.sl-ps-url {
	flex: 1; max-width: min(420px, 100%); margin: 0 auto;
	display: flex; align-items: center; gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-2);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-ps-live {
	display: flex; align-items: center; gap: 0.45rem;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--sl-teal);
}

/* Topbar com breadcrumb e user */
.sl-ps-topbar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.75rem 1.25rem;
	background: rgba(18,18,26,0.6);
	border-bottom: 1px solid var(--sl-line);
	gap: 1rem;
}
.sl-ps-breadcrumb {
	display: flex; align-items: center; gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
}
.sl-ps-breadcrumb strong { color: var(--sl-text); }
.sl-ps-sep { opacity: 0.4; }
.sl-ps-topactions { display: flex; align-items: center; gap: 0.8rem; }
.sl-ps-search {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.4rem 0.8rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	font-size: 0.75rem;
	color: var(--sl-text-3);
	min-width: clamp(120px, 30vw, 240px);
	flex-shrink: 1;
}
.sl-ps-user { display: flex; align-items: center; gap: 0.6rem; }
.sl-ps-avatar {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--sl-brand), var(--sl-teal));
	display: grid; place-items: center;
	color: #fff; font-weight: 700;
	font-family: var(--sl-font-display);
	font-size: 0.75rem;
}
.sl-ps-userinfo { display: flex; flex-direction: column; line-height: 1; gap: 0.15rem; }
.sl-ps-userinfo strong { font-size: 0.8rem; color: var(--sl-text); }
.sl-ps-userinfo small { font-size: 0.65rem; color: var(--sl-text-3); }

/* App layout */
.sl-ps-app {
	display: grid;
	grid-template-columns: 56px 300px 1fr;
	min-height: 620px;
}

/* Rail de ícones */
.sl-ps-rail {
	background: rgba(8, 8, 12, 0.6);
	border-right: 1px solid var(--sl-line);
	padding: 0.8rem 0;
	display: flex; flex-direction: column; align-items: center;
	gap: 0.3rem;
}
.sl-ps-rail-logo { margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--sl-line); width: 40px; display: grid; place-items: center; }
.sl-ps-rail-i {
	width: 38px; height: 38px;
	border-radius: 10px;
	background: transparent;
	border: none;
	color: var(--sl-text-3);
	display: grid; place-items: center;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
}
.sl-ps-rail-i:hover { color: var(--sl-text); background: rgba(255,255,255,0.04); }
.sl-ps-rail-i.is-active {
	color: var(--sl-brand);
	background: rgba(var(--sl-brand-rgb), 0.12);
	box-shadow: inset 2px 0 0 var(--sl-brand);
}
.sl-ps-badge {
	position: absolute;
	top: 2px; right: 2px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--sl-danger);
	color: #fff;
	font-family: var(--sl-font-mono);
	font-size: 0.55rem;
	font-weight: 700;
	display: grid; place-items: center;
}

/* Sidebar */
.sl-ps-sidebar {
	background: rgba(8, 8, 12, 0.3);
	border-right: 1px solid var(--sl-line);
	padding: 1rem 0.85rem;
	overflow-y: auto;
	max-height: 620px;
	display: flex; flex-direction: column; gap: 0.85rem;
}
.sl-ps-side-head { display: flex; align-items: center; justify-content: space-between; }
.sl-ps-side-head strong { font-family: var(--sl-font-display); font-size: 1.05rem; }
.sl-ps-add {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--sl-teal), var(--sl-platform-dim, #1a9e82));
	color: #fff; font-size: 1.05rem; font-weight: 700;
	border: none; cursor: pointer;
}

.sl-ps-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.sl-ps-filter {
	padding: 0.35rem 0.65rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-2);
	cursor: pointer;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.sl-ps-filter.is-active {
	background: rgba(var(--sl-brand-rgb), 0.12);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
}
.sl-ps-filter span { opacity: 0.6; margin-left: 0.25rem; }

.sl-ps-group { display: flex; flex-direction: column; gap: 0.25rem; }
.sl-ps-ghead {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	color: var(--sl-text-3);
	padding: 0.3rem 0.5rem;
	cursor: pointer;
	display: flex; align-items: center; justify-content: space-between;
	border-radius: 6px;
}
.sl-ps-ghead:hover { background: rgba(255,255,255,0.03); }
.sl-ps-ghead span {
	color: var(--sl-teal);
	padding: 0.1rem 0.45rem;
	background: rgba(45,212,191,0.1);
	border-radius: 999px;
	font-size: 0.58rem;
}

.sl-ps-vh {
	display: flex; align-items: center; gap: 0.6rem;
	padding: 0.55rem;
	border-radius: 8px;
	cursor: pointer;
	transition: background 0.15s;
}
.sl-ps-vh:hover { background: rgba(255,255,255,0.04); }
.sl-ps-vh.is-active { background: rgba(var(--sl-brand-rgb), 0.08); box-shadow: inset 2px 0 0 var(--sl-brand); }
.sl-ps-pin {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: grid; place-items: center;
	color: #fff;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sl-ps-vhbody { flex: 1; min-width: 0; }
.sl-ps-vhbody strong { display: block; font-size: 0.78rem; color: var(--sl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-ps-vhbody span { font-family: var(--sl-font-mono); font-size: 0.65rem; color: var(--sl-text-3); }
.sl-ps-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sl-ps-dot--ok { background: var(--sl-teal); box-shadow: 0 0 5px var(--sl-teal); }
.sl-ps-dot--warn { background: var(--sl-brand-3); box-shadow: 0 0 5px var(--sl-brand-3); }
.sl-ps-dot--danger { background: var(--sl-danger); box-shadow: 0 0 5px var(--sl-danger); animation: sl-dot-pulse 1.2s infinite; }

/* Main: map + detail */
.sl-ps-main { display: flex; flex-direction: column; }
.sl-ps-map {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: var(--sl-ink-3);
	min-height: 380px;
}
.sl-ps-pin-map {
	position: absolute;
	width: 36px; height: 36px;
	background: var(--pc);
	color: #fff;
	border: 3px solid #fff;
	border-radius: 50%;
	display: grid; place-items: center;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	transform: translate(-50%, -100%);
	box-shadow: 0 6px 14px rgba(0,0,0,0.55);
	z-index: 5;
	transition: transform 0.25s var(--sl-ease);
	cursor: pointer;
}
.sl-ps-pin-map::after {
	content: "";
	position: absolute;
	bottom: -7px; left: 50%;
	transform: translateX(-50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--pc);
}
.sl-ps-pin-map:hover { transform: translate(-50%, -100%) scale(1.2); z-index: 6; }

/* Radar pulse nos pins: anéis expandindo */
.sl-ps-pin-pulse::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 24px; height: 24px;
	border-radius: 50%;
	border: 2px solid var(--pc);
	transform: translate(-50%, -50%);
	opacity: 0;
	animation: sl-ps-pulse 2.5s ease-out infinite;
	pointer-events: none;
}
.sl-ps-pin-pulse.is-active::before {
	animation-duration: 1.5s;
	border-width: 2.5px;
}
@keyframes sl-ps-pulse {
	0%   { width: 24px;  height: 24px;  opacity: 0.8; }
	100% { width: 80px;  height: 80px;  opacity: 0; }
}

/* Card de telemetria flutuante perto do veículo ativo */
.sl-ps-telemetry {
	position: absolute;
	z-index: 7;
	background: rgba(14, 14, 21, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(241, 96, 0, 0.35);
	border-radius: 10px;
	padding: 0.55rem 0.75rem;
	min-width: 210px;
	box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.7);
	animation: sl-ps-tel-in 0.6s var(--sl-ease) 0.3s both;
	transform: translate(14px, -50%);
}
.sl-ps-telemetry::before {
	content: "";
	position: absolute;
	left: -6px; top: 50%;
	width: 10px; height: 10px;
	background: rgba(14, 14, 21, 0.92);
	border-left: 1px solid rgba(241, 96, 0, 0.35);
	border-bottom: 1px solid rgba(241, 96, 0, 0.35);
	transform: translateY(-50%) rotate(45deg);
}
.sl-ps-telemetry-head {
	display: flex; align-items: center; gap: 0.4rem;
	font-size: 0.78rem;
	color: var(--sl-text);
	margin-bottom: 0.35rem;
}
.sl-ps-telemetry-data {
	display: flex; align-items: center; gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-2);
}
.sl-ps-telemetry-sep {
	width: 3px; height: 3px;
	border-radius: 50%;
	background: var(--sl-text-3);
}
@keyframes sl-ps-tel-in {
	from { opacity: 0; transform: translate(4px, -50%); }
	to   { opacity: 1; transform: translate(14px, -50%); }
}

/* Data stream ticker no rodapé do mapa */
.sl-ps-ticker {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	z-index: 6;
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	background: linear-gradient(180deg, rgba(14,14,21,0) 0%, rgba(14,14,21,0.85) 40%, rgba(14,14,21,0.95) 100%);
	border-top: 1px solid rgba(45, 212, 191, 0.15);
	overflow: hidden;
}
.sl-ps-ticker-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
	flex-shrink: 0;
	animation: sl-ps-pulse-dot 1.2s ease-in-out infinite;
}
@keyframes sl-ps-pulse-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(1.3); }
}
.sl-ps-ticker-track {
	display: flex; gap: 0.35rem;
	font-family: var(--sl-font-mono);
	font-size: 0.66rem;
	color: var(--sl-text-2);
	letter-spacing: 0.02em;
	white-space: nowrap;
	animation: sl-ps-ticker-scroll 22s linear infinite;
}
.sl-ps-ticker-track span {
	flex-shrink: 0;
}
@keyframes sl-ps-ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.sl-ps-mapctrl {
	position: absolute;
	right: 0.8rem; top: 0.8rem;
	display: flex; flex-direction: column; gap: 0.3rem;
	z-index: 6;
}
.sl-ps-mapctrl button {
	width: 32px; height: 32px;
	border-radius: 8px;
	border: 1px solid var(--sl-line-hi);
	background: rgba(14, 14, 21, 0.85);
	backdrop-filter: blur(10px);
	color: var(--sl-text-2);
	font-size: 0.85rem;
	cursor: pointer;
	display: grid; place-items: center;
}
.sl-ps-mapctrl button:hover { color: var(--sl-text); }
.sl-ps-mapctrl button.is-active { color: var(--sl-teal); border-color: rgba(45,212,191,0.4); background: rgba(45,212,191,0.12); }

.sl-ps-mapstatus {
	position: absolute;
	left: 0.8rem; top: 0.8rem;
	background: rgba(14, 14, 21, 0.85);
	backdrop-filter: blur(12px);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	padding: 0.6rem 0.85rem;
	display: flex; flex-direction: column; gap: 0.3rem;
	z-index: 6;
	min-width: 180px;
}
.sl-ps-mapstatus-row {
	display: flex; align-items: center; gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-2);
}
.sl-ps-mapstatus-row strong { color: var(--sl-text); }

/* Detail panel */
.sl-ps-detail {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sl-line);
	background: rgba(14, 14, 21, 0.8);
}
.sl-ps-detail-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.sl-ps-detail-title { display: flex; align-items: center; gap: 0.7rem; }
.sl-ps-detail-title strong { display: block; font-size: 0.92rem; color: var(--sl-text); }
.sl-ps-detail-title small { display: block; font-family: var(--sl-font-mono); font-size: 0.7rem; color: var(--sl-text-3); margin-top: 0.15rem; }
.sl-ps-detail-actions { display: flex; gap: 0.4rem; }
.sl-ps-act {
	padding: 0.4rem 0.75rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	color: var(--sl-text-2);
	font-size: 0.72rem;
	font-weight: 500;
	cursor: pointer;
}
.sl-ps-act:hover { background: rgba(255,255,255,0.08); color: var(--sl-text); }
.sl-ps-act--primary { background: var(--sl-brand); color: #fff; border-color: var(--sl-brand); }
.sl-ps-act--primary:hover { background: var(--sl-brand-2); color: #fff; }

.sl-ps-sensors-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
}
.sl-ps-sensor {
	padding: 0.7rem 0.85rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	display: flex; flex-direction: column; gap: 0.2rem;
}
.sl-ps-sensor span {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-ps-sensor strong {
	font-family: var(--sl-font-display);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--sl-text);
	letter-spacing: -0.02em;
}
.sl-ps-sensor strong small { font-size: 0.7rem; color: var(--sl-text-3); font-weight: 400; margin-left: 0.15rem; }

/* ========================================================================
   PAINEL 3 COLUNAS — info + sensores + comandos
   ======================================================================== */
.sl-ps-detail--3col {
	display: grid;
	grid-template-columns: 240px 1fr 220px;
	gap: 1.25rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sl-line);
	background: rgba(14, 14, 21, 0.85);
}
.sl-ps-detail-info,
.sl-ps-detail-sensors,
.sl-ps-detail-cmds { display: flex; flex-direction: column; gap: 0.65rem; }

.sl-ps-detail-head-row {
	display: flex; align-items: center; gap: 0.5rem;
	padding-bottom: 0.45rem;
	border-bottom: 1px solid var(--sl-line);
}
.sl-ps-detail-head-row strong {
	flex: 1;
	font-family: var(--sl-font-display);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--sl-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sl-ps-info-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.sl-ps-info-row {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 0.5rem;
	padding: 0.3rem 0;
	border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.sl-ps-info-row span {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.sl-ps-info-row strong {
	font-size: 0.76rem;
	color: var(--sl-text);
	font-weight: 500;
	text-align: right;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 62%;
}

/* Grid de sensores — 3 colunas no painel 3col */
.sl-ps-detail-sensors .sl-ps-sensors-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 0.45rem;
}
.sl-ps-detail-sensors .sl-ps-sensor { padding: 0.5rem 0.65rem; }
.sl-ps-detail-sensors .sl-ps-sensor strong { font-size: 0.95rem; }
.sl-ps-detail-sensors .sl-ps-sensor span { font-size: 0.58rem; letter-spacing: 0.08em; }

/* Commands panel */
.sl-ps-cmdlist { display: flex; flex-direction: column; gap: 0.35rem; }
.sl-ps-cmd {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.7rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	color: var(--sl-text-2);
	font-family: var(--sl-font-body);
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
}
.sl-ps-cmd:hover {
	background: rgba(255,255,255,0.05);
	border-color: var(--sl-line-hi);
	color: var(--sl-text);
}
.sl-ps-cmd-idx {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	padding: 0.1rem 0.35rem;
	background: rgba(255,255,255,0.04);
	border-radius: 4px;
}
.sl-ps-cmd-dot { width: 7px; height: 7px; border-radius: 50%; }
.sl-ps-cmd > span:not(.sl-ps-cmd-idx):not(.sl-ps-cmd-dot):not(.sl-ps-cmd-arrow) { flex: 1; }
.sl-ps-cmd-arrow {
	color: var(--sl-text-3);
	font-size: 0.95rem;
	line-height: 1;
}
.sl-ps-cmd--danger { border-color: rgba(255, 64, 96, 0.25); }
.sl-ps-cmd--danger:hover { background: rgba(255, 64, 96, 0.08); border-color: rgba(255, 64, 96, 0.5); }
.sl-ps-cmd--ok { border-color: rgba(var(--sl-teal-rgb), 0.25); }
.sl-ps-cmd--ok:hover { background: rgba(var(--sl-teal-rgb), 0.08); border-color: rgba(var(--sl-teal-rgb), 0.5); }
.sl-ps-cmd-add {
	padding: 0.5rem 0.7rem;
	background: transparent;
	border: 1px dashed var(--sl-line-hi);
	border-radius: 8px;
	color: var(--sl-text-3);
	font-family: var(--sl-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	cursor: pointer;
	margin-top: 0.2rem;
}
.sl-ps-cmd-add:hover {
	color: var(--sl-brand-3);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	background: rgba(var(--sl-brand-rgb), 0.04);
}

/* ========================================================================
   HISTÓRICO — timeline de eventos
   ======================================================================== */
.sl-histline {
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
	padding-left: 1.25rem;
}
.sl-histline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, var(--sl-brand), var(--sl-teal), var(--sl-brand-3));
}
.sl-histline-item {
	position: relative;
	padding: 0.4rem 0 0.4rem 0.7rem;
	margin-left: -1.25rem;
	padding-left: 1.6rem;
}
.sl-histline-dot {
	position: absolute;
	left: 0; top: 0.65rem;
	width: 11px; height: 11px;
	border-radius: 50%;
	background: var(--sl-text-2);
	border: 2px solid var(--sl-ink-2);
	box-shadow: 0 0 0 1px var(--sl-line-hi);
}
.sl-histline-item--start .sl-histline-dot { background: var(--sl-brand); box-shadow: 0 0 8px var(--sl-brand); }
.sl-histline-item--park .sl-histline-dot { background: var(--sl-brand-3); }
.sl-histline-item--drive .sl-histline-dot { background: var(--sl-teal); box-shadow: 0 0 8px var(--sl-teal); }
.sl-histline-item strong { display: block; font-size: 0.78rem; color: var(--sl-text); font-weight: 600; }
.sl-histline-item small { display: block; font-family: var(--sl-font-mono); font-size: 0.6rem; color: var(--sl-text-3); margin-top: 0.15rem; }

/* ========================================================================
   VISÃO GERAL — Donut + legend
   ======================================================================== */
.sl-vg-donut {
	--ok: 0;
	--off: 0;
	--exp: 0;
	width: 140px; height: 140px;
	border-radius: 50%;
	background: conic-gradient(
		var(--sl-teal) 0 calc(var(--ok) * 1%),
		var(--sl-danger) calc(var(--ok) * 1%) calc((var(--ok) + var(--off)) * 1%),
		var(--sl-brand-3) calc((var(--ok) + var(--off)) * 1%) calc((var(--ok) + var(--off) + var(--exp)) * 1%),
		var(--sl-text-3) calc((var(--ok) + var(--off) + var(--exp)) * 1%) 100%
	);
	position: relative;
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.sl-vg-donut::before {
	content: "";
	position: absolute;
	inset: 16px;
	border-radius: 50%;
	background: var(--sl-ink-2);
}
.sl-vg-donut-inner {
	position: relative;
	z-index: 1;
	text-align: center;
}
.sl-vg-donut-total {
	display: block;
	font-family: var(--sl-font-display);
	font-size: 2rem;
	font-weight: 500;
	color: var(--sl-text);
	letter-spacing: -0.03em;
	line-height: 1;
}
.sl-vg-donut-inner small {
	font-family: var(--sl-font-mono);
	font-size: 0.55rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sl-vg-legend { display: flex; flex-direction: column; gap: 0.4rem; }
.sl-vg-legend-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.65rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	font-size: 0.72rem;
	color: var(--sl-text-2);
}
.sl-vg-legend-item strong { margin-left: auto; color: var(--sl-text); font-family: var(--sl-font-mono); font-weight: 700; font-size: 0.85rem; }
.sl-vg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

.sl-screen-tab-badge {
	background: var(--sl-danger);
	color: #fff;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 0.6rem;
	margin-left: 0.3rem;
	font-weight: 700;
}

/* ========================================================================
   CONFIGURAÇÕES — Search input
   ======================================================================== */
.sl-cfg-search {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 560px;
	margin-top: 1rem;
	padding: 0.4rem 0.4rem 0.4rem 1.1rem;
	background: rgba(22, 22, 32, 0.7);
	border: 1px solid var(--sl-line-hi);
	border-radius: 999px;
	backdrop-filter: blur(12px);
	transition: all 0.3s var(--sl-ease);
}
.sl-cfg-search:focus-within {
	border-color: rgba(var(--sl-brand-rgb), 0.5);
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb), 0.12);
	background: rgba(22, 22, 32, 0.9);
}
.sl-cfg-search-icon { color: var(--sl-text-3); flex-shrink: 0; }
.sl-cfg-search:focus-within .sl-cfg-search-icon { color: var(--sl-brand-3); }
.sl-cfg-search input {
	flex: 1;
	background: transparent;
	border: 0;
	padding: 0.75rem 0;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.95rem;
	outline: none;
}
.sl-cfg-search input::placeholder { color: var(--sl-text-3); }
.sl-cfg-search-clear {
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,0.06);
	border: 0;
	color: var(--sl-text-2);
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
	transition: all 0.2s;
}
.sl-cfg-search-clear:hover { background: rgba(var(--sl-brand-rgb), 0.15); color: var(--sl-brand-3); }

/* ========================================================================
   CONFIGURAÇÕES — Lista de marcas (accordion 1 coluna)
   ======================================================================== */
.sl-cfg-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	/* largura alinhada ao .sl-gw-banner (ocupa todo o .sl-wrap) */
}

/* ========================================================================
   CFG COUNTER — contador grande de comandos copiados (abaixo do H2)
   ======================================================================== */
.sl-cfg-counter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	margin: -0.25rem auto 2.25rem;
	text-align: center;
}
.sl-cfg-counter-num {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: clamp(3.5rem, 10vw, 6.5rem);
	font-weight: 700;
	line-height: 0.95;
	letter-spacing: -0.04em;
	background: linear-gradient(135deg, var(--sl-brand) 0%, var(--sl-brand-2) 55%, var(--sl-lime) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	transform-origin: center;
	will-change: transform, filter;
}
.sl-cfg-counter-label {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
}
/* Animação de incremento — pulse com glow laranja */
.sl-cfg-counter-num.is-bumped {
	animation: sl-cfg-counter-bump 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sl-cfg-counter-bump {
	0%   { transform: scale(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(241,96,0,0));   }
	45%  { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 28px rgba(241,96,0,0.5)); }
	100% { transform: scale(1);    filter: brightness(1) drop-shadow(0 0 0 rgba(241,96,0,0));   }
}
@media (prefers-reduced-motion: reduce) {
	.sl-cfg-counter-num.is-bumped { animation: none; }
}
@media (max-width: 560px) {
	.sl-cfg-counter { margin-bottom: 1.75rem; }
	.sl-cfg-counter-label { font-size: 0.65rem; }
}

/* ========================================================================
   TIER SYSTEM — cor do contador evolui por visitante (localStorage)
   Aplica gradient diferente no texto do contador grande + status bar.
   ======================================================================== */
.sl-cfg-counter-num.tier-bronze,
.sl-status-item--copies.tier-bronze .sl-status-value {
	background: linear-gradient(135deg, #cd7f32 0%, #e8a057 55%, #ffc89c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-cfg-counter-num.tier-silver,
.sl-status-item--copies.tier-silver .sl-status-value {
	background: linear-gradient(135deg, #a8a8b0 0%, #d8d8e0 55%, #f0f0f8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-cfg-counter-num.tier-gold,
.sl-status-item--copies.tier-gold .sl-status-value {
	background: linear-gradient(135deg, #ffd700 0%, #ffb400 55%, #ff8c00 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-cfg-counter-num.tier-platinum,
.sl-status-item--copies.tier-platinum .sl-status-value {
	background: linear-gradient(135deg, #e5e4e2 0%, #b3dee5 40%, #ffd1ff 70%, #c4ffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 20px rgba(200, 220, 255, 0.3);
}

/* ========================================================================
   COPIES TOAST — notificação flutuante ao atingir múltiplos de 10
   ======================================================================== */
.sl-copies-toast {
	position: fixed;
	right: 1.5rem;
	top: 5.5rem; /* abaixo do header sticky, livre do WhatsApp FAB no rodapé */
	max-width: 380px;
	width: calc(100vw - 3rem);
	background: rgba(14, 14, 21, 0.96);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border: 1px solid rgba(241, 96, 0, 0.3);
	border-radius: 14px;
	padding: 0.9rem 1rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	box-shadow:
		0 20px 40px -10px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(241, 96, 0, 0.15),
		0 0 30px -5px rgba(241, 96, 0, 0.25);
	transform: translateY(-20px) scale(0.95);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 9998;
	pointer-events: none;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
}
.sl-copies-toast.is-visible {
	transform: translateY(0) scale(1);
	opacity: 1;
	pointer-events: auto;
}
.sl-copies-toast-icon {
	font-size: 1.75rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 0 12px rgba(241, 96, 0, 0.5));
}
.sl-copies-toast-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1;
}
.sl-copies-toast-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--sl-text, #fafafc);
	line-height: 1.25;
}
.sl-copies-toast-msg {
	font-size: 0.8rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.62));
	line-height: 1.4;
}
.sl-copies-toast-have {
	align-self: flex-start;
	margin-top: 0.35rem;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
	font-family: inherit;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(250, 250, 252, 0.2);
	transition: color 0.2s, text-decoration-color 0.2s;
}
.sl-copies-toast-have:hover {
	color: var(--sl-text, #fafafc);
	text-decoration-color: rgba(250, 250, 252, 0.5);
}
.sl-copies-toast-cta {
	flex-shrink: 0;
	padding: 0.5rem 0.85rem;
	background: linear-gradient(135deg, var(--sl-brand) 0%, var(--sl-brand-2) 100%);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.2s, box-shadow 0.2s;
	white-space: nowrap;
}
.sl-copies-toast-cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(241, 96, 0, 0.5);
}
.sl-copies-toast-close {
	position: absolute;
	top: 4px;
	right: 8px;
	background: transparent;
	border: 0;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
	border-radius: 4px;
	font-family: inherit;
}
.sl-copies-toast-close:hover { color: var(--sl-text); }

/* Variantes por tier — borda e icon filter mudam na rank-up */
.sl-copies-toast.tier-bronze   { border-color: rgba(205, 127, 50, 0.5); }
.sl-copies-toast.tier-silver   { border-color: rgba(192, 192, 200, 0.5); }
.sl-copies-toast.tier-gold     { border-color: rgba(255, 215, 0, 0.55); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,215,0,0.2), 0 0 40px -5px rgba(255,180,0,0.4); }
.sl-copies-toast.tier-platinum { border-color: rgba(180, 220, 255, 0.55); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(180,220,255,0.25), 0 0 45px -5px rgba(220,200,255,0.45); }

@media (prefers-reduced-motion: reduce) {
	.sl-copies-toast { transition: opacity 0.2s; transform: none !important; }
}
@media (max-width: 560px) {
	.sl-copies-toast {
		right: 0.75rem;
		left: 0.75rem;
		width: auto;
		max-width: none;
		top: 4.5rem;
		flex-wrap: wrap;
	}
	.sl-copies-toast-cta { width: 100%; text-align: center; }
}

.sl-cfg-brand {
	--brand-c: var(--sl-brand);
	border: 1px solid var(--sl-line);
	border-radius: 16px;
	background: rgba(22, 22, 32, 0.5);
	overflow: hidden;
	transition: all 0.4s var(--sl-ease);
}
.sl-cfg-brand[open] {
	background: rgba(18, 18, 26, 0.85);
	border-color: color-mix(in srgb, var(--brand-c) 30%, transparent);
	box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--brand-c) 25%, transparent);
}
.sl-cfg-brand summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	user-select: none;
}
.sl-cfg-brand summary::-webkit-details-marker { display: none; }

.sl-cfg-mark {
	width: 46px; height: 46px;
	border-radius: 12px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c) 25%, transparent), color-mix(in srgb, var(--brand-c) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand-c) 30%, transparent);
	color: var(--brand-c);
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.02em;
	flex-shrink: 0;
	text-transform: uppercase;
}

.sl-cfg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.sl-cfg-info strong { color: var(--sl-text); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.sl-cfg-info span {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sl-cfg-toggle {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--sl-line-hi);
	display: grid; place-items: center;
	color: var(--sl-text-2);
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 1;
	transition: all 0.4s var(--sl-ease);
	flex-shrink: 0;
}
.sl-cfg-brand[open] .sl-cfg-toggle {
	transform: rotate(45deg);
	background: var(--brand-c);
	border-color: var(--brand-c);
	color: #fff;
}

.sl-cfg-body {
	padding: 0 1.3rem 1.5rem;
	border-top: 1px solid var(--sl-line);
	padding-top: 1.25rem;
}

/* Conteúdo Gutenberg dentro da marca — estilização consistente */
.sl-cfg-body h1, .sl-cfg-body h2, .sl-cfg-body h3, .sl-cfg-body h4 {
	font-family: var(--sl-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.sl-cfg-body h3 {
	font-size: 1.25rem;
	padding: 0.5rem 0.8rem;
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-left: 3px solid color-mix(in srgb, var(--brand-c) 60%, var(--sl-brand));
	border-radius: 6px;
}
.sl-cfg-body h4 { font-size: 1.05rem; }
.sl-cfg-body p { color: var(--sl-text-2); font-size: 0.92rem; line-height: 1.55; margin: 0.5rem 0 0.75rem; }
.sl-cfg-body > *:first-child { margin-top: 0; }
.sl-cfg-body ul, .sl-cfg-body ol { color: var(--sl-text-2); font-size: 0.92rem; padding-left: 1.5rem; margin: 0.5rem 0 1rem; }

/* <details> nativo do Gutenberg dentro do conteúdo do modelo
   — seta chevron custom que rotaciona ao expandir */
.sl-cfg-body details,
.sl-cfg-body .wp-block-details {
	margin: 1rem 0;
	padding: 1rem 1.2rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	transition: border-color 0.25s, background 0.25s;
}
.sl-cfg-body details[open],
.sl-cfg-body .wp-block-details[open] {
	border-color: rgba(var(--sl-brand-rgb), 0.25);
	background: rgba(var(--sl-brand-rgb), 0.03);
}
.sl-cfg-body details > summary,
.sl-cfg-body .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	color: var(--sl-text);
	font-weight: 600;
	font-size: 1rem;
	padding: 0;
	user-select: none;
	transition: color 0.2s;
}
.sl-cfg-body details > summary::-webkit-details-marker,
.sl-cfg-body .wp-block-details > summary::-webkit-details-marker { display: none; }
.sl-cfg-body details > summary::marker,
.sl-cfg-body .wp-block-details > summary::marker { content: ""; }
.sl-cfg-body details > summary::after,
.sl-cfg-body .wp-block-details > summary::after {
	content: "";
	flex-shrink: 0;
	width: 28px; height: 28px;
	border-radius: 50%;
	background: rgba(var(--sl-brand-rgb), 0.1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23f16000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center / 14px no-repeat;
	border: 1px solid rgba(var(--sl-brand-rgb), 0.25);
	transition: transform 0.3s var(--sl-ease), background-color 0.25s;
}
.sl-cfg-body details[open] > summary::after,
.sl-cfg-body .wp-block-details[open] > summary::after {
	transform: rotate(180deg);
	background-color: rgba(var(--sl-brand-rgb), 0.2);
}
.sl-cfg-body details > summary:hover,
.sl-cfg-body .wp-block-details > summary:hover { color: var(--sl-brand-3); }
.sl-cfg-body details > *:not(summary),
.sl-cfg-body .wp-block-details > *:not(summary) {
	margin-top: 0.85rem;
}

/* ========================================================================
   CONFIGURAÇÕES — Comando SMS (shortcode [sl_cmd])
   ======================================================================== */
.sl-cmd {
	margin: 0.7rem 0;
	padding: 1rem 1.2rem;
	background: rgba(10, 10, 15, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	transition: border-color 0.3s;
}
.sl-cmd:hover { border-color: rgba(var(--sl-brand-rgb), 0.25); }

.sl-cmd-label {
	font-family: var(--sl-font-mono);
	font-size: 0.66rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.sl-cmd-wrap {
	display: flex;
	gap: 0.6rem;
	align-items: stretch;
}

.sl-cmd-code {
	flex: 1;
	min-width: 0;
	padding: 0.8rem 1rem;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	font-family: var(--sl-font-mono);
	font-size: 0.88rem;
	color: var(--sl-brand-3);
	word-break: break-all;
	white-space: pre-wrap;
	line-height: 1.5;
	display: flex;
	align-items: center;
}

.sl-cmd-copy {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0 1rem;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.28);
	border-radius: 10px;
	color: var(--sl-brand-3);
	font-family: var(--sl-font-body);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s var(--sl-ease);
	white-space: nowrap;
	min-width: 100px;
	justify-content: center;
}
.sl-cmd-copy:hover {
	background: rgba(var(--sl-brand-rgb), 0.2);
	border-color: rgba(var(--sl-brand-rgb), 0.5);
}
.sl-cmd-copy:active { transform: scale(0.97); }

.sl-cmd-copy-icon--ok { display: none; }
.sl-cmd-copy.is-copied {
	background: rgba(var(--sl-teal-rgb), 0.15);
	border-color: rgba(var(--sl-teal-rgb), 0.45);
	color: var(--sl-teal);
}
.sl-cmd-copy.is-copied .sl-cmd-copy-icon--default { display: none; }
.sl-cmd-copy.is-copied .sl-cmd-copy-icon--ok { display: inline-block; }

/* ========================================================================
   CMD LIST — [sl_cmd_list] lista compacta com busca + copiar todos
   ======================================================================== */
.sl-cmdlist {
	margin: 1rem 0;
	padding: 1.25rem;
	background: rgba(10, 10, 15, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
}
.sl-cmdlist-title {
	font-family: var(--sl-font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--sl-text);
	letter-spacing: -0.01em;
	margin-bottom: 0.85rem;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--sl-line);
}

.sl-cmdlist-count {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-brand-3);
	letter-spacing: 0.12em;
	padding: 0.2rem 0.55rem;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.22);
	border-radius: 999px;
	white-space: nowrap;
	flex-shrink: 0;
	font-weight: 700;
}

.sl-cmdlist-count-standalone {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}

.sl-cmdlist-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.95rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	margin-bottom: 0.75rem;
	transition: border-color 0.2s;
}
.sl-cmdlist-search:focus-within {
	border-color: rgba(var(--sl-brand-rgb), 0.35);
}
.sl-cmdlist-search-icon { color: var(--sl-text-3); flex-shrink: 0; }
.sl-cmdlist-search:focus-within .sl-cmdlist-search-icon { color: var(--sl-brand-3); }
.sl-cmdlist-input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: none;
	padding: 0.25rem 0;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.88rem;
}
.sl-cmdlist-input::placeholder { color: var(--sl-text-3); }

.sl-cmdlist-rows {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.sl-cmdlist-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.8rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	transition: all 0.2s var(--sl-ease);
}
.sl-cmdlist-row:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.25);
	background: rgba(255, 255, 255, 0.04);
}
.sl-cmdlist-row.is-hidden { display: none; }

.sl-cmdlist-label {
	flex-shrink: 0;
	font-family: var(--sl-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--sl-text);
	padding: 0.25rem 0.65rem;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 6px;
	white-space: nowrap;
}

.sl-cmdlist-code {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sl-font-mono);
	font-size: 0.82rem;
	color: var(--sl-brand-3);
	word-break: break-all;
	padding: 0.25rem 0;
}

.sl-cmdlist-copy {
	flex-shrink: 0;
	padding: 0.4rem 0.85rem !important;
	min-width: auto !important;
	width: auto !important;
	font-size: 0.72rem !important;
}

.sl-cmdlist-empty {
	padding: 2rem 1rem;
	text-align: center;
	color: var(--sl-text-3);
	font-size: 0.9rem;
	font-style: italic;
}

@media (max-width: 640px) {
	.sl-cmdlist-row { flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem 0.7rem; }
	.sl-cmdlist-label { order: -1; flex-basis: 100%; }
	.sl-cmdlist-code { font-size: 0.78rem; }
}

/* ========================================================================
   CONFIGURAÇÕES — Empty state (nenhuma marca cadastrada)
   ======================================================================== */
.sl-cfg-empty {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	padding: 4rem 2rem;
	background: rgba(22, 22, 32, 0.4);
	border: 1px dashed var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
}
.sl-cfg-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; opacity: 0.8; }
.sl-cfg-empty h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 0.75rem; }
.sl-cfg-empty p { color: var(--sl-text-2); max-width: 460px; margin: 0 auto; }
.sl-cfg-empty-ctas { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

.sl-cfg-empty-steps {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px dashed var(--sl-line);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	text-align: left;
}
.sl-cfg-empty-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 0.85rem 1rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
}
.sl-cfg-empty-step > span:first-child {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: rgba(var(--sl-brand-rgb), 0.12);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
	display: grid; place-items: center;
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
}
.sl-cfg-empty-step strong { display: block; font-size: 0.92rem; color: var(--sl-text); font-weight: 600; }
.sl-cfg-empty-step span:last-child { display: block; font-size: 0.82rem; color: var(--sl-text-3); margin-top: 0.2rem; }

.sl-cfg-noresult { max-width: 720px; margin: 0 auto; }
.sl-cfg-searchable.is-hidden { display: none !important; }

/* ========================================================================
   CONTATO — team cards + contact split + quick links
   ======================================================================== */
.sl-team {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1200px;
	margin: 0 auto;
}
.sl-team-card {
	--team-c: var(--sl-brand);
	position: relative;
	padding: 2rem;
	background: rgba(22, 22, 32, 0.65);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	transition: all 0.4s var(--sl-ease);
	backdrop-filter: blur(10px);
	display: flex; flex-direction: column; gap: 1.1rem;
}
.sl-team-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--team-c);
	opacity: 0.7;
	transition: opacity 0.4s;
}
.sl-team-card::after {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(500px circle at 100% 0%, color-mix(in srgb, var(--team-c) 15%, transparent), transparent 55%);
	opacity: 0; transition: opacity 0.4s;
	pointer-events: none;
}
.sl-team-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--team-c) 45%, transparent);
}
.sl-team-card:hover::before { opacity: 1; }
.sl-team-card:hover::after { opacity: 1; }
.sl-team-card > * { position: relative; z-index: 1; }

.sl-team-head { display: flex; gap: 1rem; align-items: center; }
.sl-team-avatar {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: linear-gradient(135deg, color-mix(in srgb, var(--team-c) 60%, var(--sl-brand-2)), color-mix(in srgb, var(--team-c) 30%, #111));
	color: #fff;
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
	flex-shrink: 0;
	box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--team-c) 50%, transparent);
	border: 2px solid rgba(255,255,255,0.08);
}
.sl-team-meta { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.sl-team-dept {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--team-c);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}
.sl-team-name {
	font-family: var(--sl-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--sl-text);
	letter-spacing: -0.015em;
	line-height: 1.2;
}
.sl-team-role {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.04em;
	margin-top: 0.25rem;
}

.sl-team-hint {
	font-size: 0.88rem;
	color: var(--sl-text-2);
	line-height: 1.5;
	padding: 0.75rem 0.85rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed var(--sl-line);
	border-radius: 10px;
	margin: 0;
}

.sl-team-channels {
	display: flex; flex-direction: column; gap: 0.4rem;
	margin-top: auto;
}
.sl-team-ch {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.82rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.25s var(--sl-ease);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sl-team-ch:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: color-mix(in srgb, var(--team-c) 40%, transparent);
	transform: translateX(2px);
}
.sl-team-ch--wa {
	background: rgba(37, 211, 102, 0.1);
	border-color: rgba(37, 211, 102, 0.3);
	color: #25d366;
	font-weight: 600;
}
.sl-team-ch--wa:hover { background: rgba(37, 211, 102, 0.18); border-color: rgba(37, 211, 102, 0.55); color: #25d366; }
.sl-team-ch--email {
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
}
.sl-team-ch svg { flex-shrink: 0; }

/* =========================================================================
   CONTATO — split form + info
   ========================================================================= */
.sl-contact-split {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}
.sl-contact-form-wrap {
	padding: 2.5rem;
	background: rgba(18, 18, 26, 0.6);
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	backdrop-filter: blur(10px);
}
.sl-contact-form-wrap .sl-form { max-width: 100%; }

.sl-contact-info { display: flex; flex-direction: column; gap: 1rem; }

.sl-contact-info-card {
	padding: 1.75rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	display: flex; flex-direction: column; gap: 1rem;
}
.sl-contact-info-head {
	display: flex; align-items: center; gap: 0.55rem;
	color: var(--sl-brand-3);
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}
.sl-contact-info-head strong { color: inherit; }

.sl-contact-address {
	font-style: normal;
	line-height: 1.6;
	color: var(--sl-text-2);
	font-size: 0.95rem;
}
.sl-contact-address strong {
	display: block;
	color: var(--sl-text);
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.25rem;
}

.sl-contact-map {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--sl-line);
	height: 280px;
	background: var(--sl-ink-3);
	position: relative;
}
/* Garante que o container interno .sl-gmap preenche todo o espaço */
.sl-contact-map .sl-gmap { border-radius: inherit; }

/* Canais gerais */
.sl-contact-channels {
	display: flex; flex-direction: column; gap: 0.5rem;
	padding: 1.25rem 1.5rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
}
.sl-contact-ch {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--sl-line);
}
.sl-contact-ch:last-child { border-bottom: none; }
.sl-contact-ch-label {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	flex-shrink: 0;
}
.sl-contact-ch-value {
	color: var(--sl-text);
	font-weight: 500;
	font-size: 0.9rem;
	text-decoration: none;
	text-align: right;
	word-break: break-all;
}
a.sl-contact-ch-value:hover { color: var(--sl-brand-3); }

/* Redes sociais */
.sl-contact-social {
	display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.sl-contact-social-link {
	flex: 1;
	min-width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	color: var(--sl-text-2);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.25s var(--sl-ease);
}
.sl-contact-social-link:hover {
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
	transform: translateY(-2px);
}

/* =========================================================================
   CONTATO — quick links (ações rápidas)
   ========================================================================= */
.sl-quick-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 1200px;
	margin: 0 auto;
}
.sl-quick-link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 1.4rem;
	background: rgba(22, 22, 32, 0.55);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	text-decoration: none;
	color: inherit;
	transition: all 0.3s var(--sl-ease);
}
.sl-quick-link:hover {
	transform: translateY(-3px);
	border-color: rgba(var(--sl-brand-rgb), 0.35);
	background: rgba(26, 26, 36, 0.85);
}
.sl-quick-link:hover .sl-quick-link-arrow {
	color: var(--sl-brand-3);
	transform: translate(2px, -2px);
}
.sl-quick-link-icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.15), rgba(var(--sl-teal-rgb), 0.08));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.25);
	display: grid; place-items: center;
	font-size: 1.25rem;
	color: var(--sl-brand-3);
	flex-shrink: 0;
}
.sl-quick-link-body {
	display: flex; flex-direction: column; gap: 0.2rem;
	min-width: 0;
}
.sl-quick-link-body strong {
	font-size: 0.98rem;
	color: var(--sl-text);
	font-weight: 600;
}
.sl-quick-link-body span {
	font-size: 0.82rem;
	color: var(--sl-text-3);
}
.sl-quick-link-arrow {
	color: var(--sl-text-3);
	transition: all 0.3s var(--sl-ease);
}

@media (max-width: 1024px) {
	.sl-team { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
	.sl-contact-split { grid-template-columns: 1fr; gap: 2rem; }
	.sl-quick-links { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
	.sl-quick-links { grid-template-columns: 1fr; }
	.sl-contact-form-wrap { padding: 1.75rem 1.25rem; }
	.sl-contact-info-card { padding: 1.25rem; }
	.sl-office-grid { grid-template-columns: 1fr; }
	.sl-office-mapwrap { height: 320px; }
	.sl-uptime-servers { grid-template-columns: 1fr; }
	.sl-bignum-servers { flex-direction: column; width: 100%; }
	.sl-bignum-srv { min-width: auto; width: 100%; justify-content: center; }
}

/* ========================================================================
   LEGAL PAGE — Política de Privacidade / Termos (page-legal.php)
   ======================================================================== */
.sl-legal-hero {
	padding: 5rem 0 2rem;
	position: relative;
}
.sl-legal-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
	color: var(--sl-text-2);
	letter-spacing: 0.02em;
}
.sl-legal-meta-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
}
.sl-legal-meta time { color: var(--sl-text); font-weight: 600; }

.sl-legal-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 4rem;
	max-width: 1200px;
	margin: 0 auto;
	align-items: start;
}

/* TOC sticky */
.sl-legal-toc {
	position: sticky;
	top: 90px;
	padding: 1.5rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	backdrop-filter: blur(10px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}
.sl-legal-toc-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding-bottom: 0.85rem;
	border-bottom: 1px solid var(--sl-line);
	margin-bottom: 0.85rem;
}
.sl-legal-toc-nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.sl-legal-toc-nav li { position: relative; }
.sl-legal-toc-nav a {
	display: block;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	color: var(--sl-text-2);
	text-decoration: none;
	border-radius: 6px;
	border-left: 2px solid transparent;
	transition: all 0.25s var(--sl-ease);
	line-height: 1.4;
}
.sl-legal-toc-nav a:hover {
	color: var(--sl-text);
	background: rgba(255, 255, 255, 0.03);
}
.sl-legal-toc-nav a.is-active {
	color: var(--sl-brand-3);
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-left-color: var(--sl-brand);
	font-weight: 600;
}

.sl-legal-toc-help {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--sl-line);
}
.sl-legal-toc-help strong {
	display: block;
	color: var(--sl-text);
	font-size: 0.82rem;
	margin-bottom: 0.35rem;
	font-weight: 600;
}
.sl-legal-toc-help p {
	font-size: 0.78rem;
	color: var(--sl-text-3);
	line-height: 1.5;
	margin: 0 0 0.75rem;
}
.sl-legal-toc-help-links {
	display: flex;
	gap: 0.5rem;
}
.sl-legal-toc-help-links a {
	flex: 1;
	text-align: center;
	padding: 0.45rem 0.6rem;
	font-size: 0.75rem;
	color: var(--sl-brand-3);
	background: rgba(var(--sl-brand-rgb), 0.08);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 8px;
	text-decoration: none;
	transition: all 0.2s;
}
.sl-legal-toc-help-links a:hover {
	background: rgba(var(--sl-brand-rgb), 0.15);
	color: var(--sl-text);
}

/* Content — typography otimizada pra leitura longa */
.sl-legal-content {
	color: var(--sl-text);
	font-size: 1.02rem;
	line-height: 1.75;
	max-width: 720px;
}
.sl-legal-content > *:first-child { margin-top: 0; }
.sl-legal-content > *:last-child { margin-bottom: 0; }

.sl-legal-content h2 {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--sl-text);
	margin: 3rem 0 1rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sl-line);
	scroll-margin-top: 90px;
}
.sl-legal-content h2:first-child,
.sl-legal-content h2:first-of-type {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}
.sl-legal-content h3 {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sl-text);
	margin: 2rem 0 0.75rem;
	scroll-margin-top: 90px;
}
.sl-legal-content p {
	color: var(--sl-text-2);
	margin: 0 0 1.1rem;
	line-height: 1.75;
}
.sl-legal-content strong { color: var(--sl-text); font-weight: 600; }

.sl-legal-content ul, .sl-legal-content ol {
	color: var(--sl-text-2);
	padding-left: 1.5rem;
	margin: 0 0 1.25rem;
}
.sl-legal-content li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}
.sl-legal-content li::marker { color: var(--sl-brand-3); }

.sl-legal-content a {
	color: var(--sl-brand-3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color 0.2s;
}
.sl-legal-content a:hover { color: var(--sl-brand-2); }

.sl-legal-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--sl-brand);
	background: rgba(var(--sl-brand-rgb), 0.04);
	border-radius: 0 8px 8px 0;
	font-style: italic;
	color: var(--sl-text-2);
}

.sl-legal-content code {
	padding: 0.15rem 0.4rem;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.88em;
	color: var(--sl-brand-3);
}

.sl-legal-content hr {
	border: 0;
	height: 1px;
	background: var(--sl-line);
	margin: 2rem 0;
}

/* Rodapé legal — identidade da empresa responsável pelo documento */
.sl-legal-footer {
	max-width: 1200px;
	margin: 4rem auto 0;
	padding: 1.75rem 2rem;
	background: rgba(18, 18, 26, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	text-align: center;
}
.sl-legal-footer-brand strong {
	display: block;
	color: var(--sl-text);
	font-weight: 600;
	margin-bottom: 0.3rem;
}
.sl-legal-footer-brand span {
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
	color: var(--sl-text-3);
}
.sl-legal-footer-links {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.sl-legal-footer-links a {
	color: var(--sl-text-2);
	font-size: 0.88rem;
	text-decoration: none;
	transition: color 0.2s;
}
.sl-legal-footer-links a:hover { color: var(--sl-brand-3); }

/* Responsive */
@media (max-width: 960px) {
	.sl-legal-layout { grid-template-columns: 1fr; gap: 1.5rem; }
	.sl-legal-toc {
		position: static;
		max-height: none;
		margin-bottom: 1rem;
	}
	.sl-legal-content { max-width: 100%; }
}

/* ========================================================================
   ROI CALCULATOR — home (/)
   ======================================================================== */
.sl-roi {
	margin: 0 auto;
	padding: 2.5rem;
	background: rgba(18, 18, 26, 0.75);
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	position: relative;
	overflow: hidden;
	backdrop-filter: blur(14px);
}
.sl-roi::before {
	content: "";
	position: absolute;
	inset: -50%;
	background: radial-gradient(ellipse at 10% 0%, rgba(var(--sl-brand-rgb), 0.12), transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.sl-roi > * { position: relative; z-index: 1; }

/* Inputs row — 3 sliders (veículos, preço, chip M2M) */
.sl-roi-inputs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--sl-line);
	margin-bottom: 2rem;
}
.sl-roi-input { display: flex; flex-direction: column; gap: 0.85rem; }
.sl-roi-input-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
.sl-roi-input label {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3);
	font-weight: 600;
	margin: 0;
}
.sl-roi-input-val {
	font-family: var(--sl-font-display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sl-brand-3);
}
.sl-roi-input-bounds {
	display: flex;
	justify-content: space-between;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.06em;
}

/* Range slider — cross-browser custom */
.sl-roi-input input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg,
		var(--sl-brand) 0%, var(--sl-brand) var(--sl-fill, 50%),
		rgba(255, 255, 255, 0.08) var(--sl-fill, 50%), rgba(255, 255, 255, 0.08) 100%);
	outline: none;
	transition: background 0.1s;
	cursor: pointer;
}
/* Thumb WebKit */
.sl-roi-input input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sl-brand);
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb), 0.15), 0 4px 12px rgba(0,0,0,0.4);
	cursor: grab;
	transition: transform 0.15s var(--sl-ease), box-shadow 0.15s;
}
.sl-roi-input input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.sl-roi-input input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.25); }
/* Thumb Firefox */
.sl-roi-input input[type="range"]::-moz-range-thumb {
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--sl-brand);
	border: 3px solid #fff;
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb), 0.15), 0 4px 12px rgba(0,0,0,0.4);
	cursor: grab;
}

/* Results cards */
.sl-roi-results {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-bottom: 2rem;
}
.sl-roi-card {
	padding: 1.5rem 1.4rem;
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: all 0.3s var(--sl-ease);
	position: relative;
	overflow: hidden;
}
.sl-roi-card-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
}
.sl-roi-card-value {
	font-family: var(--sl-font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sl-text);
	font-variant-numeric: tabular-nums;
	transition: color 0.3s;
}
.sl-roi-card-sub {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	line-height: 1.4;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.sl-roi-card-sub strong { color: var(--sl-text); }

/* Breakdown de custos (smart + chip) */
.sl-roi-breakdown {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
}
.sl-roi-breakdown > span { display: inline-flex; align-items: baseline; gap: 0.35rem; }
.sl-roi-breakdown em {
	font-style: normal;
	color: var(--sl-text-3);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.62rem;
}
.sl-roi-breakdown strong {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-roi-breakdown-sep {
	color: var(--sl-text-3);
	opacity: 0.5;
}
.sl-roi-tier {
	font-size: 0.66rem;
	color: rgba(255, 122, 26, 0.8);
	letter-spacing: 0.02em;
	padding-top: 0.15rem;
}

/* Middle card (custo) */
.sl-roi-card--mid .sl-roi-card-value { color: var(--sl-brand-3); }

/* Highlighted card (margem) */
.sl-roi-card--highlight {
	background:
		linear-gradient(180deg, rgba(var(--sl-brand-rgb), 0.12), rgba(22, 22, 32, 0.7));
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	box-shadow: 0 20px 40px -12px rgba(var(--sl-brand-rgb), 0.3);
}
.sl-roi-card--highlight::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: 14px;
	padding: 1px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.6), transparent 50%, rgba(var(--sl-teal-rgb), 0.3));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
}
.sl-roi-card--highlight .sl-roi-card-value {
	background: linear-gradient(100deg, var(--sl-brand) 0%, var(--sl-brand-3) 50%, var(--sl-teal) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: sl-gt-flow 8s ease-in-out infinite;
}

/* Pulse quando valor muda (triggered via JS) */
.sl-roi-card.is-updating .sl-roi-card-value {
	transform: scale(1.02);
	transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Annual projection + CTA */
.sl-roi-annual {
	display: grid;
	grid-template-columns: 1fr auto 1.4fr;
	gap: 2rem;
	align-items: center;
	padding: 1.5rem 1.75rem;
	background: rgba(var(--sl-brand-rgb), 0.05);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 14px;
	margin-bottom: 1rem;
}
.sl-roi-annual-label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
	font-weight: 600;
}
.sl-roi-annual-value {
	font-family: var(--sl-font-display);
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sl-brand-3);
	font-variant-numeric: tabular-nums;
}
.sl-roi-annual-divider {
	width: 1px;
	height: 60px;
	background: linear-gradient(180deg, transparent, var(--sl-line-hi), transparent);
}
.sl-roi-annual-right {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}
.sl-roi-annual-right .sl-btn { align-self: stretch; }
.sl-roi-annual-note {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
}

.sl-roi-disclaimer {
	font-size: 0.78rem;
	color: var(--sl-text-3);
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

/* Responsive ROI */
@media (max-width: 1100px) {
	.sl-roi-inputs { grid-template-columns: repeat(2, 1fr); }
	.sl-roi-input:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
	.sl-roi { padding: 1.75rem 1.25rem; }
	.sl-roi-inputs { grid-template-columns: 1fr; gap: 1.75rem; }
	.sl-roi-input:last-child { grid-column: auto; }
	.sl-roi-results { grid-template-columns: 1fr; }
	.sl-roi-annual { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
	.sl-roi-annual-divider { display: none; }
	.sl-roi-annual-right { align-items: stretch; }
}

/* ========================================================================
   SMART SMS MOCK — preview visual do painel dentro do banner Gateway
   ======================================================================== */
.sl-sms-mock {
	width: 100%;
	background: rgba(8, 8, 12, 0.85);
	border: 1px solid var(--sl-line-hi);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.5);
	font-size: 0.75rem;
}
.sl-sms-chrome {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.8rem;
	background: rgba(14, 14, 21, 0.9);
	border-bottom: 1px solid var(--sl-line);
}
.sl-sms-chrome-title {
	flex: 1;
	text-align: center;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
}

.sl-sms-app {
	display: grid;
	grid-template-columns: 110px 1fr;
	min-height: 340px;
}

.sl-sms-side {
	background: rgba(14, 14, 21, 0.95);
	padding: 0.75rem 0.5rem;
	border-right: 1px solid var(--sl-line);
}
.sl-sms-brand {
	font-family: var(--sl-font-display);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--sl-text);
	padding: 0.4rem 0.6rem 0.75rem;
	border-bottom: 1px solid var(--sl-line);
	margin-bottom: 0.4rem;
	letter-spacing: -0.01em;
}
.sl-sms-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.sl-sms-nav-item {
	padding: 0.4rem 0.6rem;
	border-radius: 6px;
	font-size: 0.7rem;
	color: var(--sl-text-3);
	font-weight: 500;
}
.sl-sms-nav-item.is-active {
	background: var(--sl-brand);
	color: #fff;
	font-weight: 600;
}

.sl-sms-main {
	padding: 0.9rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.sl-sms-total {
	text-align: center;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--sl-line);
}
.sl-sms-total-num {
	font-family: var(--sl-font-display);
	font-size: 2.2rem;
	font-weight: 500;
	color: var(--sl-brand);
	letter-spacing: -0.04em;
	line-height: 1;
}
.sl-sms-total-lbl {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.35rem;
}

.sl-sms-donuts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.3rem;
	padding-bottom: 1.3rem;
}
.sl-sms-donut {
	--pct: 0;
	--c: var(--sl-teal);
	position: relative;
	aspect-ratio: 1;
	border-radius: 50%;
	background: conic-gradient(var(--c) 0 calc(var(--pct) * 1%), rgba(255, 255, 255, 0.06) calc(var(--pct) * 1%) 100%);
	display: grid;
	place-items: center;
	text-align: center;
}
.sl-sms-donut::before {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: rgba(14, 14, 21, 0.95);
}
.sl-sms-donut-val {
	position: relative;
	z-index: 1;
	font-family: var(--sl-font-display);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sl-text);
	line-height: 1;
}
.sl-sms-donut-lbl {
	position: absolute;
	bottom: -1rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--sl-font-mono);
	font-size: 0.5rem;
	color: var(--sl-text-3);
	white-space: nowrap;
	letter-spacing: 0.02em;
}

.sl-sms-logs {
	margin-top: 0.3rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sl-line);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.sl-sms-log {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.35rem 0.55rem;
	background: rgba(255, 255, 255, 0.02);
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.04);
}
.sl-sms-log > div:first-child { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.sl-sms-log strong { color: var(--sl-text); font-family: var(--sl-font-mono); font-weight: 600; font-size: 0.6rem; }
.sl-sms-log code {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	color: var(--sl-brand-3);
	background: transparent;
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sl-sms-log-meta { display: flex; align-items: center; gap: 0.35rem; font-family: var(--sl-font-mono); color: var(--sl-text-3); font-size: 0.55rem; flex-shrink: 0; }
.sl-sms-log-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sl-teal); box-shadow: 0 0 5px var(--sl-teal); }

/* CTAs do banner (agora dentro do texto, não na coluna direita) */
.sl-gw-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1.25rem;
}

/* ========================================================================
   CONFIGURAÇÕES — Busca inline (acima da lista de marcas)
   ======================================================================== */
.sl-cfg-search--inline {
	margin-bottom: 1.25rem;
	margin-top: -1rem;
	/* largura alinhada ao .sl-gw-banner (ocupa todo o .sl-wrap) */
}

/* ========================================================================
   CONFIGURAÇÕES — Gateway banner + shortcuts (mantidos)
   ======================================================================== */

/* Gateway banner — upsell principal */
.sl-gw-banner {
	position: relative;
	display: flex;
	align-items: stretch;        /* esticar os dois lados pra mesma altura */
	gap: 2.5rem;
	padding: 2.5rem 3rem;
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	isolation: isolate;
	max-width: 1200px;
	margin: 0 auto;
	background: #0a0a12;
}
.sl-gw-banner-bg {
	position: absolute; inset: -30%;
	z-index: -2;
	background: conic-gradient(from 45deg at 30% 50%,
		rgba(var(--sl-brand-rgb), 0.4) 0deg,
		rgba(var(--sl-teal-rgb), 0.3) 120deg,
		rgba(var(--sl-brand-rgb), 0.4) 240deg,
		rgba(var(--sl-lime-rgb), 0.2) 360deg);
	filter: blur(70px);
	animation: sl-aurora-spin 25s linear infinite;
	opacity: 0.5;
}
.sl-gw-banner::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at left, rgba(10,10,18,0.4), rgba(10,10,18,0.85) 70%);
	z-index: -1;
}
.sl-gw-banner::after {
	content: "";
	position: absolute; inset: 1px;
	border-radius: calc(var(--sl-r-xl) - 1px);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	pointer-events: none;
}
.sl-gw-banner > * { position: relative; z-index: 1; }

.sl-gw-banner-left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;     /* ícone empilha ACIMA do bloco de texto */
	gap: 1.25rem;
	align-items: flex-start;
	align-self: center;
}
.sl-gw-banner-right {
	flex: 0 0 auto;
	width: 100%;
	max-width: 540px;
	min-width: 0;
	align-self: center;
}
.sl-gw-icon {
	width: 64px; height: 64px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.3), rgba(var(--sl-brand-rgb), 0.1));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.4);
	display: grid; place-items: center;
	font-size: 2rem;
	flex-shrink: 0;
	box-shadow: 0 10px 30px -8px rgba(var(--sl-brand-rgb), 0.45);
}
.sl-gw-tag {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-brand-3);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
	font-weight: 700;
}
.sl-gw-banner h2 {
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.15;
	margin-bottom: 0.75rem;
}
.sl-gw-banner p {
	color: var(--sl-text-2);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
	max-width: 520px;
}

/* Grid de 21 marcas (accordion) */
.sl-cfg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	max-width: 1200px;
	margin: 0 auto;
}
.sl-cfg-brand {
	--brand-c: var(--sl-brand);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	background: rgba(22, 22, 32, 0.5);
	overflow: hidden;
	transition: all 0.4s var(--sl-ease);
}
.sl-cfg-brand[open] {
	background: rgba(22, 22, 32, 0.9);
	border-color: color-mix(in srgb, var(--brand-c) 30%, transparent);
	box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--brand-c) 25%, transparent);
}
.sl-cfg-brand summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1rem 1.1rem;
	user-select: none;
}
.sl-cfg-brand summary::-webkit-details-marker { display: none; }

.sl-cfg-mark {
	width: 42px; height: 42px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c) 25%, transparent), color-mix(in srgb, var(--brand-c) 8%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand-c) 30%, transparent);
	color: var(--brand-c);
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}
.sl-cfg-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sl-cfg-info strong {
	color: var(--sl-text);
	font-size: 0.98rem;
	font-weight: 600;
}
.sl-cfg-info span {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sl-cfg-toggle {
	width: 28px; height: 28px;
	border-radius: 50%;
	border: 1px solid var(--sl-line-hi);
	display: grid; place-items: center;
	color: var(--sl-text-2);
	font-weight: 500;
	font-size: 1.05rem;
	transition: all 0.35s var(--sl-ease);
	flex-shrink: 0;
	line-height: 1;
}
.sl-cfg-toggle::before {
	content: "+";
	display: block;
	transition: content 0.25s var(--sl-ease);
}
.sl-cfg-brand[open] .sl-cfg-toggle {
	transform: rotate(45deg);
	background: var(--brand-c);
	border-color: var(--brand-c);
	color: #fff;
}

.sl-cfg-body {
	padding: 0 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	border-top: 1px solid var(--sl-line);
	padding-top: 1rem;
	margin-top: 0.25rem;
}

/* ======= Configurações — NEW v2.45.10 ======= */

/* Badge "Popular" no summary (top 3 marcas) */
.sl-cfg-popular {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: rgba(var(--sl-brand-rgb), 0.14);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.35);
	border-radius: 3px;
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	font-weight: 700;
	color: var(--sl-brand-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 1.4;
}

/* Toolbar: expandir/recolher + status */
.sl-cfg-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.75rem 0 1.25rem;
	padding: 0 0.25rem;
}
.sl-cfg-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
}
.sl-cfg-toolbar-btn {
	background: transparent;
	border: 0;
	padding: 0.3rem 0.55rem;
	color: var(--sl-text-3);
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: 0.03em;
	border-radius: 4px;
	transition: color 0.2s, background 0.2s;
}
.sl-cfg-toolbar-btn:hover {
	color: var(--sl-brand-3);
	background: rgba(var(--sl-brand-rgb), 0.06);
}
.sl-cfg-toolbar-btn:focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 2px;
}
.sl-cfg-toolbar-sep { color: var(--sl-line); }
.sl-cfg-status {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.03em;
	min-height: 1.2em;
}

/* Upsell Gateway dentro de cada marca aberta */
.sl-cfg-upsell {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	margin-top: 0.5rem;
	background:
		linear-gradient(135deg, rgba(38,198,163,0.07), rgba(241,96,0,0.04));
	border: 1px solid rgba(38,198,163,0.22);
	border-radius: 10px;
	position: relative;
}
.sl-cfg-upsell-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: rgba(38,198,163,0.14);
	font-size: 1.1rem;
}
.sl-cfg-upsell-body {
	flex: 1;
	min-width: 0;
}
.sl-cfg-upsell-body strong {
	display: block;
	color: var(--sl-text);
	font-size: 0.92rem;
	font-weight: 700;
	margin-bottom: 0.2rem;
	letter-spacing: -0.01em;
}
.sl-cfg-upsell-body p {
	margin: 0;
	color: var(--sl-text-2);
	font-size: 0.82rem;
	line-height: 1.5;
}
.sl-cfg-upsell-cta {
	flex-shrink: 0;
	font-size: 0.82rem;
	padding: 0.5rem 0.85rem;
}
@media (max-width: 600px) {
	.sl-cfg-upsell {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}
	.sl-cfg-upsell-cta { align-self: stretch; text-align: center; }
}

/* Feedback "Funcionou?" */
.sl-cfg-feedback {
	margin-top: 0.25rem;
	padding: 0.9rem 1rem;
	background: rgba(0,0,0,0.18);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
}
.sl-cfg-feedback-ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.sl-cfg-feedback-label {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.05em;
}
.sl-cfg-feedback-btns {
	display: flex;
	gap: 0.5rem;
}
.sl-cfg-feedback-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line);
	border-radius: 6px;
	color: var(--sl-text-2);
	font-family: var(--sl-font-body, inherit);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--sl-ease);
}
.sl-cfg-feedback-btn:hover {
	background: rgba(38,198,163,0.08);
	border-color: rgba(38,198,163,0.3);
	color: var(--sl-teal, #26c6a3);
	transform: translateY(-1px);
}
.sl-cfg-feedback-btn[data-vote="no"]:hover {
	background: rgba(255,64,96,0.08);
	border-color: rgba(255,64,96,0.3);
	color: #ff6b82;
}
.sl-cfg-feedback-btn:focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 2px;
}
.sl-cfg-feedback-btn.is-active {
	background: rgba(38,198,163,0.15);
	border-color: var(--sl-teal, #26c6a3);
	color: var(--sl-teal, #26c6a3);
}
.sl-cfg-feedback-btn[data-vote="no"].is-active {
	background: rgba(255,64,96,0.12);
	border-color: #ff4060;
	color: #ff6b82;
}
.sl-cfg-feedback-thanks {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.sl-cfg-feedback-thanks strong {
	color: var(--sl-text);
	font-size: 0.88rem;
	font-weight: 700;
}
.sl-cfg-feedback-stats {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.03em;
}

/* Mini resumo do painel SMS (mobile < 600px, substitui mock full) */
.sl-sms-mini {
	display: none;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(38,198,163,0.06), rgba(241,96,0,0.03));
	border: 1px solid rgba(38,198,163,0.2);
	border-radius: 12px;
	text-align: center;
}
.sl-sms-mini-num {
	font-family: var(--sl-font-display);
	font-size: clamp(2.2rem, 8vw, 3rem);
	font-weight: 600;
	color: var(--sl-text);
	line-height: 1;
	letter-spacing: -0.03em;
}
.sl-sms-mini-lbl {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.05em;
	margin-top: 0.5rem;
}
.sl-sms-mini-bars {
	display: flex;
	gap: 2px;
	height: 6px;
	margin-top: 1rem;
	border-radius: 3px;
	overflow: hidden;
}
.sl-sms-mini-bars span {
	flex: var(--w);
	display: block;
	background: currentColor;
}
@media (max-width: 600px) {
	.sl-sms-mock { display: none; }
	.sl-sms-mini { display: block; }
}

.sl-cfg-models-head {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sl-cfg-models {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}
.sl-cfg-model {
	padding: 0.3rem 0.55rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 6px;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text);
}
.sl-cfg-brand[open] .sl-cfg-model {
	border-color: color-mix(in srgb, var(--brand-c) 25%, transparent);
}
/* Shortcuts — Manual / Gateway / API */
.sl-shortcuts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1200px;
	margin: 0 auto;
}
.sl-shortcut {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1.25rem;
	align-items: center;
	padding: 1.5rem 1.75rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	text-decoration: none;
	color: inherit;
	transition: all 0.4s var(--sl-ease);
}
.sl-shortcut:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(26, 26, 36, 0.85);
}
.sl-shortcut:hover .sl-shortcut-arrow {
	color: var(--sl-brand-3);
	transform: translate(2px, -2px);
}
.sl-shortcut-icon {
	width: 52px; height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.15), rgba(var(--sl-teal-rgb), 0.08));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.25);
	display: grid; place-items: center;
	font-size: 1.4rem;
	color: var(--sl-brand-3);
	flex-shrink: 0;
}
.sl-shortcut-body { display: flex; flex-direction: column; gap: 0.25rem; }
.sl-shortcut-body strong {
	font-size: 1.05rem;
	color: var(--sl-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.sl-shortcut-body span {
	font-size: 0.88rem;
	color: var(--sl-text-2);
	line-height: 1.4;
}
.sl-shortcut-arrow {
	color: var(--sl-text-3);
	transition: all 0.35s var(--sl-ease);
	flex-shrink: 0;
}

.sl-shortcut--highlight {
	background: linear-gradient(180deg, rgba(var(--sl-brand-rgb), 0.10), rgba(22, 22, 32, 0.7));
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	box-shadow: 0 20px 40px -16px rgba(var(--sl-brand-rgb), 0.35);
}
.sl-shortcut--highlight .sl-shortcut-icon {
	background: linear-gradient(135deg, var(--sl-brand), var(--sl-brand-2));
	border-color: transparent;
	color: #fff;
	box-shadow: 0 8px 20px -6px rgba(var(--sl-brand-rgb), 0.5);
}

/* ========================================================================
   SOBRE — ID Card (identidade oficial)
   ======================================================================== */
.sl-id-card {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	padding: 2.5rem;
	background: rgba(18, 18, 26, 0.7);
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	backdrop-filter: blur(14px);
	overflow: hidden;
	isolation: isolate;
}
.sl-id-card::before {
	content: "";
	position: absolute;
	top: -50%; right: -20%;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(var(--sl-teal-rgb), 0.15), transparent 60%);
	filter: blur(60px);
	z-index: -1;
	pointer-events: none;
}

.sl-id-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--sl-line);
	margin-bottom: 1.5rem;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.sl-id-head-brand { display: flex; align-items: center; gap: 1rem; }
.sl-id-head-name {
	font-family: var(--sl-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--sl-text);
}
.sl-id-head-sub {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	margin-top: 0.35rem;
	letter-spacing: 0.02em;
}
.sl-id-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.9rem;
	background: rgba(var(--sl-teal-rgb), 0.1);
	border: 1px solid rgba(var(--sl-teal-rgb), 0.3);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-teal);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
}

.sl-id-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem 2rem;
}
.sl-id-item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.sl-id-item--wide { grid-column: 1 / -1; }
.sl-id-label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}
.sl-id-label small {
	font-size: 0.88em;
	color: rgba(255,255,255,0.2);
	letter-spacing: 0.08em;
	text-transform: none;
}
.sl-id-value {
	color: var(--sl-text);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.sl-id-foot {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sl-line);
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

/* ========================================================================
   SOBRE — Nossa história (split + year callout)
   ======================================================================== */
.sl-story {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 3rem;
	max-width: 1100px;
	margin: 0 auto;
	padding: 3rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	align-items: center;
}
.sl-story-meta {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-story-year {
	font-family: var(--sl-font-display);
	font-size: clamp(3.5rem, 8vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.85;
	background: linear-gradient(180deg, var(--sl-brand-3) 0%, var(--sl-brand) 70%, rgba(241,96,0,0.3) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 1rem;
}
.sl-story-year-label {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sl-story-body p:last-child { margin-bottom: 0; }

/* ========================================================================
   SOBRE — Princípios/Valores
   ======================================================================== */
.sl-principles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-principle {
	padding: 2rem 1.75rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	transition: all 0.4s var(--sl-ease);
	position: relative;
	overflow: hidden;
}
.sl-principle::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 3rem; height: 3rem;
	background: radial-gradient(circle at 0% 0%, rgba(var(--sl-brand-rgb), 0.25), transparent 70%);
	opacity: 0;
	transition: opacity 0.4s;
}
.sl-principle:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(26, 26, 36, 0.85);
}
.sl-principle:hover::before { opacity: 1; }

.sl-principle-num {
	font-family: var(--sl-font-mono);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--sl-brand-3);
	margin-bottom: 1.25rem;
	padding: 0.4rem 0.8rem;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 999px;
	width: fit-content;
}
.sl-principle h3 {
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	margin-bottom: 0.5rem;
}
.sl-principle p {
	color: var(--sl-text-2);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

/* ========================================================================
   SOBRE — Escritório + mapa
   ======================================================================== */
/* Mapa banner full-width com pin flutuante */
.sl-office-mapwrap {
	position: relative;
	height: 460px;
	margin-top: 3rem;
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	border: 1px solid var(--sl-line-hi);
	background: var(--sl-ink-3);
	isolation: isolate;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
/* Garante que o .sl-gmap interno preenche todo o banner */
.sl-office-mapwrap .sl-gmap { border-radius: inherit; }

.sl-office-pin {
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	z-index: 2;
	background: rgba(12, 12, 18, 0.92);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	border-radius: 16px;
	padding: 1rem 1.25rem;
	min-width: 280px;
	max-width: 340px;
	box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
}
.sl-office-pin-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}
.sl-office-pin-icon {
	width: 42px; height: 42px;
	background: rgba(var(--sl-brand-rgb), 0.15);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	border-radius: 11px;
	display: grid; place-items: center;
	color: var(--sl-brand);
	flex-shrink: 0;
}
.sl-office-pin strong {
	display: block;
	font-size: 0.98rem;
	color: var(--sl-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.sl-office-pin small {
	display: block;
	font-size: 0.82rem;
	color: var(--sl-text-2);
	margin-top: 0.15rem;
}
.sl-office-pin a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.85rem;
	padding-top: 0.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--sl-brand-3);
	text-decoration: none;
	transition: gap 0.2s, color 0.2s;
	width: 100%;
}
.sl-office-pin a:hover { color: #fff; gap: 0.6rem; }

/* Grid de 4 cards premium */
.sl-office-grid {
	margin-top: 1.5rem;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
.sl-office-card {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 16px;
	padding: 1.5rem 1.35rem;
	transition: all 0.3s;
	display: flex;
	flex-direction: column;
}
.sl-office-card:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(var(--sl-brand-rgb), 0.03);
	transform: translateY(-3px);
}
.sl-office-card-icon {
	width: 46px; height: 46px;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 12px;
	display: grid; place-items: center;
	color: var(--sl-brand);
	margin-bottom: 1.1rem;
	transition: background 0.3s, border-color 0.3s;
}
.sl-office-card:hover .sl-office-card-icon {
	background: rgba(var(--sl-brand-rgb), 0.18);
	border-color: rgba(var(--sl-brand-rgb), 0.45);
}
.sl-office-card-label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3);
	margin-bottom: 0.55rem;
}
.sl-office-card-value {
	color: var(--sl-text);
	font-size: 0.92rem;
	line-height: 1.55;
	flex: 1;
}
.sl-office-card-value a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}
.sl-office-card-value a:hover { color: var(--sl-brand-3); }
.sl-office-card-value strong {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-office-card-foot {
	display: inline-block;
	margin-top: 0.85rem;
	padding-top: 0.7rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.05em;
	color: var(--sl-text-3);
	text-decoration: none;
	transition: color 0.2s;
}
a.sl-office-card-foot:hover { color: var(--sl-brand-3); }

/* ========================================================================
   ÁREA DO CLIENTE — 3 Servers + Tools + Support
   ======================================================================== */

/* Grid 3 servidores */
.sl-servers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-server {
	position: relative;
	padding: 2rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	overflow: hidden;
	transition: all 0.5s var(--sl-ease);
	backdrop-filter: blur(10px);
}
.sl-server::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: var(--sl-r-xl);
	padding: 1px;
	background: linear-gradient(135deg, rgba(var(--sl-teal-rgb), 0.5), transparent 50%, rgba(var(--sl-brand-rgb), 0.3));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}
.sl-server::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(500px circle at 50% 0%, rgba(var(--sl-brand-rgb), 0.15), transparent 60%);
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}
.sl-server:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	background: rgba(26, 26, 36, 0.85);
}
.sl-server:hover::before, .sl-server:hover::after { opacity: 1; }
.sl-server > * { position: relative; z-index: 1; }

/* Linha de uptime live acima do badge Online */
.sl-server-uptime {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.1rem;
}
.sl-server-uptime-value {
	font-family: var(--sl-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--sl-teal);
	letter-spacing: -0.02em;
	line-height: 1;
	transition: color 0.3s;
}
.sl-server-uptime-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
/* Status down: texto vermelho + valor fica vermelho também */
.sl-server[data-status="down"] .sl-server-uptime-value { color: var(--sl-danger); }
.sl-server[data-status="degraded"] .sl-server-uptime-value { color: var(--sl-brand-3); }

.sl-server-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.75rem;
	background: rgba(var(--sl-teal-rgb), 0.1);
	border: 1px solid rgba(var(--sl-teal-rgb), 0.25);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-teal);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	width: fit-content;
	transition: all 0.3s;
}
/* Status down: badge vira vermelho (texto trocado via JS) */
.sl-server[data-status="down"] .sl-server-status {
	background: rgba(255, 64, 96, 0.1);
	border-color: rgba(255, 64, 96, 0.3);
	color: var(--sl-danger);
}
.sl-server[data-status="down"] .sl-pd-dot-live { background: var(--sl-danger); box-shadow: 0 0 10px var(--sl-danger); }
.sl-server[data-status="degraded"] .sl-server-status {
	background: rgba(var(--sl-brand-rgb), 0.1);
	border-color: rgba(var(--sl-brand-rgb), 0.25);
	color: var(--sl-brand-3);
}

.sl-server-num {
	font-family: var(--sl-font-display);
	font-size: clamp(4rem, 10vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.06em;
	line-height: 0.85;
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.35) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.sl-server-meta {
	padding: 1rem 0;
	border-top: 1px solid var(--sl-line);
}
.sl-server-label {
	font-size: 1rem;
	color: var(--sl-text);
	font-weight: 600;
}
.sl-server-host {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	margin-top: 0.3rem;
	word-break: break-all;
}

.sl-server-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8rem 1rem;
	background: rgba(var(--sl-brand-rgb), 0.08);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 12px;
	color: var(--sl-brand-3);
	font-weight: 600;
	font-size: 0.9rem;
	transition: all 0.3s var(--sl-ease);
}
.sl-server:hover .sl-server-cta {
	background: var(--sl-brand);
	color: #fff;
	border-color: var(--sl-brand);
}

/* Dica de segurança */
.sl-server-tip {
	display: flex;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 179, 71, 0.05);
	border: 1px solid rgba(255, 179, 71, 0.2);
	border-radius: 14px;
	max-width: 1100px;
	margin: 2.5rem auto 0;
	align-items: flex-start;
}
.sl-server-tip-icon { font-size: 1.3rem; flex-shrink: 0; }
.sl-server-tip div { color: var(--sl-text-2); font-size: 0.92rem; line-height: 1.55; }
.sl-server-tip strong { color: var(--sl-text); }
.sl-server-tip code {
	padding: 0.1rem 0.4rem;
	background: rgba(255,255,255,0.06);
	border-radius: 4px;
	font-size: 0.85em;
	color: var(--sl-brand-3);
}
.sl-server-tip a { color: var(--sl-brand-3); text-decoration: underline; text-underline-offset: 3px; }

/* Ferramentas complementares */
.sl-tools {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 0.85rem;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-tool {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s var(--sl-ease);
}
.sl-tool:hover {
	transform: translateX(4px);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(26, 26, 36, 0.85);
}
.sl-tool:hover .sl-tool-arrow { color: var(--sl-brand-3); transform: translate(2px, -2px); }
.sl-tool-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.12), rgba(var(--sl-teal-rgb), 0.08));
	border: 1px solid var(--sl-line);
	display: grid; place-items: center;
	font-size: 1.2rem;
	font-family: var(--sl-font-mono);
	color: var(--sl-brand-3);
	flex-shrink: 0;
}
.sl-tool-body { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.sl-tool-body strong { font-size: 0.95rem; color: var(--sl-text); font-weight: 600; }
.sl-tool-body span { font-size: 0.82rem; color: var(--sl-text-3); }
.sl-tool-arrow {
	color: var(--sl-text-3);
	transition: all 0.3s var(--sl-ease);
	flex-shrink: 0;
}

/* Suporte */
.sl-support {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	padding: 3rem;
	background: rgba(18, 18, 26, 0.6);
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	align-items: center;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-support-right {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.sl-support-action {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.2rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s var(--sl-ease);
}
.sl-support-action:hover {
	transform: translateX(4px);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(26, 26, 36, 0.85);
}
.sl-support-action-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	display: grid; place-items: center;
	font-size: 1.2rem;
	flex-shrink: 0;
}
.sl-support-action div { display: flex; flex-direction: column; gap: 0.15rem; }
.sl-support-action strong { font-size: 0.95rem; color: var(--sl-text); }
.sl-support-action span { font-size: 0.82rem; color: var(--sl-text-3); }

/* ========================================================================
   RASTREADORES — Lista horizontal de marcas/protocolos
   ======================================================================== */

/* Filtro: campo de busca + contador */
.sl-brand-filter {
	max-width: 1200px;
	margin: 0 auto 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.sl-brand-search {
	flex: 1;
	min-width: 280px;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	transition: border-color 0.25s, background 0.25s;
}
.sl-brand-search:focus-within {
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	background: rgba(255, 255, 255, 0.05);
}
.sl-brand-search svg {
	color: var(--sl-text-3);
	flex-shrink: 0;
	transition: color 0.25s;
}
.sl-brand-search:focus-within svg { color: var(--sl-brand-3); }
.sl-brand-search input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--sl-text);
	font-family: inherit;
	font-size: 0.95rem;
	outline: 0;
	padding: 0;
	min-width: 0;
	width: 100%;
}
.sl-brand-search input::-webkit-search-decoration,
.sl-brand-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
.sl-brand-search input::placeholder { color: var(--sl-text-3); }
.sl-brand-search-clear {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	color: var(--sl-text-3);
	width: 28px; height: 28px;
	display: grid; place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.2s;
}
.sl-brand-search-clear:hover { color: var(--sl-text); border-color: var(--sl-line-hi); }
.sl-brand-count {
	font-family: var(--sl-font-mono);
	font-size: 0.74rem;
	color: var(--sl-text-3);
	letter-spacing: 0.05em;
	white-space: nowrap;
}
.sl-brand-count span { color: var(--sl-text); font-weight: 600; }

/* Empty state (busca sem resultados) */
.sl-brand-empty {
	max-width: 1200px;
	margin: 1rem auto 0;
	padding: 3rem 1.5rem;
	text-align: center;
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed var(--sl-line);
	border-radius: 12px;
}
.sl-brand-empty strong {
	display: block;
	color: var(--sl-text);
	font-size: 1rem;
	margin-bottom: 0.4rem;
}
.sl-brand-empty p {
	font-family: var(--sl-font-mono);
	font-size: 0.82rem;
	color: var(--sl-text-3);
	margin: 0;
}

/* Linha oculta (filtro ou ainda não revelada) */
.sl-brand-row--hidden { display: none !important; }

/* Performance: navegador pula renderização de linhas fora da tela */
.sl-brand-row {
	content-visibility: auto;
	contain-intrinsic-size: auto 110px;
}

.sl-brand-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 1200px;
	margin: 0 auto;
}
.sl-brand-row {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1.25rem 1.5rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-left: 3px solid color-mix(in srgb, var(--brand-c) 50%, var(--sl-line));
	border-radius: 12px;
	transition: all 0.3s var(--sl-ease);
	--brand-c: var(--sl-brand);
}
.sl-brand-row:hover {
	border-color: color-mix(in srgb, var(--brand-c) 30%, var(--sl-line));
	border-left-color: var(--brand-c);
	background: rgba(22, 22, 32, 0.75);
	transform: translateX(2px);
}

/* Coluna 1: avatar + nome + tag + desc — estende pra preencher */
.sl-brand-row-head {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
/* Se tem descrição, alinha ao topo (título multi-linha fica melhor) */
.sl-brand-row:has(.sl-brand-row-desc) .sl-brand-row-head,
.sl-brand-row:has(.sl-brand-row-data:not(:empty)) .sl-brand-row-head {
	align-items: flex-start;
}
.sl-brand-mark {
	width: 44px; height: 44px;
	border-radius: 10px;
	display: grid; place-items: center;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c) 20%, transparent), color-mix(in srgb, var(--brand-c) 6%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand-c) 35%, transparent);
	color: var(--brand-c);
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.02em;
	flex-shrink: 0;
}
.sl-brand-row-title { min-width: 0; }
.sl-brand-row .sl-brand-name {
	font-family: var(--sl-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 0.15rem 0;
	line-height: 1.3;
	color: var(--sl-text);
}
.sl-brand-row .sl-brand-tag {
	display: inline-block;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-brand-row-desc {
	font-size: 0.82rem;
	color: var(--sl-text-2);
	line-height: 1.45;
	margin: 0.35rem 0 0 0;
}
/* Modelos inline (extraídos do título após ":") — tom técnico */
.sl-brand-models-inline {
	font-family: var(--sl-font-mono);
	font-size: 0.76rem;
	color: var(--sl-text-2);
	line-height: 1.55;
	margin: 0.35rem 0 0 0;
	letter-spacing: 0.01em;
}

/* Coluna 2: protocolos e modelos — aparece só quando tem conteúdo */
.sl-brand-row-data {
	flex: 0 1 auto;
	display: flex;
	gap: 1.75rem;
	align-items: flex-start;
}
/* Se não tem protocolos nem modelos, remove a lacuna */
.sl-brand-row-data:empty { display: none; }

.sl-brand-row-col {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
	max-width: 320px;
}
.sl-brand-row-label {
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sl-brand-row-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}
.sl-brand-chip {
	padding: 0.25rem 0.55rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--sl-line);
	border-radius: 5px;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text);
	letter-spacing: 0.02em;
	transition: border-color 0.25s;
}
.sl-brand-row:hover .sl-brand-chip {
	border-color: color-mix(in srgb, var(--brand-c) 25%, var(--sl-line));
}
/* Chip de protocolo: destaque teal */
.sl-brand-chip--proto {
	background: rgba(var(--sl-teal-rgb), 0.08);
	border-color: rgba(var(--sl-teal-rgb), 0.25);
	color: var(--sl-teal);
}
.sl-brand-row:hover .sl-brand-chip--proto {
	background: rgba(var(--sl-teal-rgb), 0.12);
	border-color: rgba(var(--sl-teal-rgb), 0.4);
}

/* Responsivo */
@media (max-width: 900px) {
	.sl-brand-row {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
		padding: 1rem 1.25rem;
	}
	.sl-brand-row-data { flex-direction: column; gap: 0.75rem; }
	.sl-brand-row-col { max-width: 100%; }
}

/* ========================================================================
   RASTREADORES — Homologação split layout
   ======================================================================== */
.sl-homolog {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 3rem;
	align-items: center;
	padding: 3rem;
	border-radius: var(--sl-r-xl);
	background:
		radial-gradient(ellipse at right, rgba(var(--sl-brand-rgb), 0.08), transparent 60%),
		rgba(18, 18, 26, 0.7);
	border: 1px solid var(--sl-line-hi);
	max-width: 1200px;
	margin: 0 auto;
}
.sl-homolog-steps {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.sl-homolog-step {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	transition: all 0.3s var(--sl-ease);
}
.sl-homolog-step:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(var(--sl-brand-rgb), 0.04);
	transform: translateX(4px);
}
.sl-homolog-num {
	width: 36px; height: 36px;
	border-radius: 8px;
	background: rgba(var(--sl-brand-rgb), 0.12);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	display: inline-block;          /* inline-block + line-height = centragem perfeita */
	box-sizing: border-box;
	text-align: center;
	line-height: 34px;              /* match da altura interna (36 - 2×1px border) */
	font-family: var(--sl-font-body);   /* Manrope tem métricas mais previsíveis que mono */
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--sl-brand-3);
	flex-shrink: 0;
	padding: 0;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}
.sl-homolog-step strong {
	display: block;
	font-size: 0.95rem;
	color: var(--sl-text);
	font-weight: 600;
}
.sl-homolog-step span {
	display: block;
	font-size: 0.82rem;
	color: var(--sl-text-3);
	margin-top: 0.15rem;
}

/* ========================================================================
   RASTREADORES — Protocolos chips
   ======================================================================== */
.sl-protocols {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	justify-content: center;
	margin-top: 1.75rem;
}
.sl-protocol {
	padding: 0.55rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.78rem;
	color: var(--sl-text);
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all 0.3s var(--sl-ease);
}
.sl-protocol:hover {
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3);
	transform: translateY(-2px);
}
.sl-protocol:focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 2px;
}
.sl-protocol.is-active {
	background: rgba(var(--sl-brand-rgb), 0.18);
	border-color: var(--sl-brand);
	color: var(--sl-brand-3);
	font-weight: 700;
	box-shadow: 0 0 0 3px rgba(var(--sl-brand-rgb), 0.12);
}

/* Mobile: scroll horizontal pros 9+ chips em telas pequenas */
@media (max-width: 520px) {
	.sl-protocols {
		flex-wrap: nowrap;
		overflow-x: auto;
		justify-content: flex-start;
		padding: 0.5rem 1rem;
		margin-left: -1rem;
		margin-right: -1rem;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.sl-protocols::-webkit-scrollbar { display: none; }
	.sl-protocol {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}
}

/* Callout "protocolo > marca" — mensagem central */
.sl-proto-callout {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	max-width: 980px;
	margin: 0 auto;
	padding: 1.5rem 1.75rem;
	background:
		linear-gradient(135deg, rgba(38,198,163,0.06), rgba(241,96,0,0.04));
	border: 1px solid rgba(38,198,163,0.2);
	border-radius: 14px;
	position: relative;
}
.sl-proto-callout::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: linear-gradient(90deg, var(--sl-teal, #26c6a3), var(--sl-brand));
	opacity: 0.08;
	pointer-events: none;
}
.sl-proto-callout-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgba(38,198,163,0.12);
	color: var(--sl-teal, #26c6a3);
	position: relative;
	z-index: 1;
}
.sl-proto-callout-body {
	flex: 1;
	position: relative;
	z-index: 1;
}
.sl-proto-callout-body strong {
	display: block;
	font-family: var(--sl-font-display);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin-bottom: 0.5rem;
}
.sl-proto-callout-body p {
	color: var(--sl-text-2);
	font-size: 0.95rem;
	line-height: 1.6;
	margin: 0;
}
.sl-proto-callout-body em {
	font-style: normal;
	color: var(--sl-teal, #26c6a3);
	font-weight: 700;
	background: rgba(38,198,163,0.1);
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
}
@media (max-width: 600px) {
	.sl-proto-callout {
		flex-direction: column;
		gap: 0.85rem;
		padding: 1.25rem 1.25rem;
	}
}

/* Badge "Popular" nas top 3 marcas */
.sl-brand-row {
	position: relative;
}
.sl-brand-popular {
	position: absolute;
	top: 1rem;
	right: 1rem;
	padding: 0.2rem 0.55rem;
	background: rgba(var(--sl-brand-rgb), 0.14);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.35);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--sl-brand-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	z-index: 2;
}
@media (max-width: 600px) {
	.sl-brand-popular { top: 0.75rem; right: 0.75rem; }
}

/* Empty state com CTAs */
.sl-brand-empty-ctas {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 1.25rem;
}

/* Divider na seção homolog (entre "está na lista" e "não encontrou") */
.sl-homolog-divider {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sl-line), transparent);
	margin: 2.5rem 0 2rem;
}

/* ========================================================================
   SERVIÇOS — Grid 2x2 de service cards
   ======================================================================== */
.sl-srv-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	max-width: 1000px;
	margin: 0 auto;
}
.sl-srv-card {
	position: relative;
	padding: 2.25rem 2rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	overflow: hidden;
	transition: all 0.5s var(--sl-ease);
	backdrop-filter: blur(10px);
}
.sl-srv-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 2px;
	background: linear-gradient(90deg, var(--sl-brand), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--sl-ease);
}
.sl-srv-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(600px circle at 30% 0%, rgba(var(--sl-brand-rgb), 0.08), transparent 50%);
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}
.sl-srv-card:hover {
	transform: translateY(-6px);
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(26, 26, 36, 0.85);
}
.sl-srv-card:hover::before { transform: scaleX(1); }
.sl-srv-card:hover::after { opacity: 1; }
.sl-srv-card > * { position: relative; z-index: 1; }

.sl-srv-icon {
	display: inline-grid;
	place-items: center;
	width: 64px; height: 64px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.15), rgba(var(--sl-teal-rgb), 0.08));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	font-size: 2rem;
	margin-bottom: 1.25rem;
}

.sl-srv-title {
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	margin-bottom: 0.6rem;
}
.sl-srv-desc {
	color: var(--sl-text-2);
	font-size: 0.98rem;
	line-height: 1.55;
	margin: 0;
}

/* ========================================================================
   UPTIME CALLOUT — big number + copy + 3 servidores ao vivo
   ======================================================================== */
.sl-uptime {
	position: relative;
	padding: 4rem 3.5rem;
	border-radius: 24px;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(135deg, #0a0a12 0%, #12121c 100%);
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 3.5rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	box-shadow:
		0 30px 80px -20px rgba(45, 212, 191, 0.12),
		0 20px 40px -10px rgba(0, 0, 0, 0.6);
}
.sl-uptime-bg {
	position: absolute; inset: -40%;
	z-index: -2;
	background: conic-gradient(from 120deg at 50% 50%,
		rgba(var(--sl-teal-rgb), 0.4) 0deg,
		rgba(var(--sl-lime-rgb), 0.25) 90deg,
		rgba(var(--sl-brand-rgb), 0.3) 180deg,
		rgba(var(--sl-teal-rgb), 0.4) 360deg);
	filter: blur(80px);
	animation: sl-aurora-spin 28s linear infinite;
	opacity: 0.7;
}
.sl-uptime::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(10, 10, 18, 0.35), rgba(10, 10, 18, 0.88) 75%);
	z-index: -1;
}
/* Borda animada gradient teal→lime→brand */
.sl-uptime::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 24px;
	padding: 1.5px;
	background: linear-gradient(135deg,
		rgba(var(--sl-teal-rgb), 0.6),
		rgba(var(--sl-lime-rgb), 0.3),
		rgba(var(--sl-brand-rgb), 0.4),
		rgba(var(--sl-teal-rgb), 0.6));
	background-size: 200% 200%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: sl-uptime-border 8s ease infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes sl-uptime-border {
	0%, 100% { background-position: 0% 0%; }
	50%      { background-position: 100% 100%; }
}
.sl-uptime > *:not(.sl-uptime-bg) { position: relative; z-index: 1; }

/* Lado esquerdo: big number + badge "Ao vivo" + label */
.sl-uptime-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}
.sl-uptime-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.85rem;
	background: rgba(var(--sl-teal-rgb), 0.1);
	border: 1px solid rgba(var(--sl-teal-rgb), 0.3);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-teal);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.sl-uptime-num {
	font-family: var(--sl-font-display);
	font-size: clamp(4.5rem, 11vw, 9.5rem);
	font-weight: 400;
	letter-spacing: -0.06em;
	line-height: 0.85;
	display: flex;
	align-items: baseline;
	gap: 0;
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.4) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 10px 40px rgba(45, 212, 191, 0.15);
}
.sl-uptime-unit {
	color: var(--sl-teal);
	-webkit-text-fill-color: var(--sl-teal);
	font-size: 0.55em;
	text-shadow: 0 0 30px rgba(45, 212, 191, 0.5);
}
.sl-uptime-num-label {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: -0.25rem;
}

/* Lado direito: copy + servidores */
.sl-uptime-copy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-uptime-copy h2 {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
}
.sl-uptime-copy p {
	color: var(--sl-text-2);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0;
	max-width: 500px;
}
.sl-uptime-copy .sl-btn-arrow { margin-top: 0.5rem; }

/* Grid dos 3 servidores */
.sl-uptime-servers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
	margin: 0.75rem 0 0.5rem;
}
.sl-uptime-srv {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 0.9rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	transition: all 0.3s;
}
.sl-uptime-srv:hover {
	border-color: rgba(var(--sl-teal-rgb), 0.3);
	background: rgba(255, 255, 255, 0.05);
}
.sl-uptime-srv[data-status="down"] {
	border-color: rgba(255, 64, 96, 0.3);
	background: rgba(255, 64, 96, 0.05);
}
.sl-uptime-srv[data-status="down"] .sl-uptime-srv-dot {
	background: var(--sl-danger);
	box-shadow: 0 0 10px var(--sl-danger);
}
.sl-uptime-srv-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 8px var(--sl-teal);
	flex-shrink: 0;
}
.sl-uptime-srv-meta {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.sl-uptime-srv-label {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	color: var(--sl-text-3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-uptime-srv-val {
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.01em;
	line-height: 1;
}
.sl-uptime-srv[data-status="down"] .sl-uptime-srv-val {
	color: var(--sl-danger);
}

/* ========================================================================
   TIMELINE — 4 etapas verticais com gradient line
   ======================================================================== */
.sl-tl {
	position: relative;
	max-width: 760px;
	margin: 0 auto;
}

/* Linha gradient conectando os dots */
.sl-tl::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 28px;
	bottom: 80px;
	width: 2px;
	background: linear-gradient(180deg,
		rgba(var(--sl-teal-rgb), 0.5) 0%,
		rgba(var(--sl-brand-rgb), 0.4) 50%,
		rgba(var(--sl-lime-rgb), 0.4) 100%);
	z-index: 0;
}

.sl-tl-step {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 1.75rem;
	padding-bottom: 3rem;
	z-index: 1;
}
.sl-tl-step:last-child { padding-bottom: 0; }

/* Marker (bolinha numerada com glow) */
.sl-tl-marker {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--sl-ink-2);
	border: 2px solid rgba(var(--sl-brand-rgb), 0.5);
	display: grid;
	place-items: center;
	position: relative;
	transition: all 0.5s var(--sl-ease);
}
.sl-tl-marker::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(var(--sl-brand-rgb), 0.35), transparent 70%);
	z-index: -1;
	filter: blur(10px);
	opacity: 0;
	transition: opacity 0.6s var(--sl-ease);
}
.sl-tl-step:hover .sl-tl-marker,
.sl-tl-step.is-in .sl-tl-marker {
	border-color: var(--sl-brand);
	transform: scale(1.05);
}
.sl-tl-step:hover .sl-tl-marker::before,
.sl-tl-step.is-in .sl-tl-marker::before {
	opacity: 1;
}

.sl-tl-num {
	font-family: var(--sl-font-mono);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--sl-brand-3);
	letter-spacing: 0.02em;
}

/* Content (direito do marker) */
.sl-tl-content { padding-top: 2px; }

.sl-tl-meta {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: 0.6rem;
}
.sl-tl-meta strong {
	color: var(--sl-brand-3);
	padding: 0.25rem 0.6rem;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	border-radius: 999px;
	font-weight: 700;
}
.sl-tl-meta span { color: var(--sl-text-3); }

.sl-tl-title {
	font-size: clamp(1.4rem, 2.2vw, 1.7rem);
	font-weight: 600;
	margin-bottom: 0.55rem;
	letter-spacing: -0.025em;
}

.sl-tl-desc {
	color: var(--sl-text-2);
	font-size: 0.98rem;
	line-height: 1.55;
	margin-bottom: 1.1rem;
	max-width: 580px;
}

/* Lista de deliverables com checkmark */
.sl-tl-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.sl-tl-list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0.95rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	color: var(--sl-text);
	font-size: 0.92rem;
	transition: all 0.3s var(--sl-ease);
}
.sl-tl-list li:hover {
	background: rgba(var(--sl-brand-rgb), 0.04);
	border-color: rgba(var(--sl-brand-rgb), 0.25);
}
.sl-tl-list li::before {
	content: "";
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background:
		url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center,
		linear-gradient(135deg, var(--sl-brand), var(--sl-brand-3));
}

/* Footer do timeline — resumo + CTA */
.sl-tl-footer {
	margin-top: 3rem;
	padding: 2rem 2.25rem;
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-xl);
	background: rgba(22, 22, 32, 0.6);
	backdrop-filter: blur(10px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 2rem;
	align-items: center;
}

.sl-tl-footer-num {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	padding-right: 2rem;
	border-right: 1px solid var(--sl-line);
}
.sl-tl-footer-num > span {
	font-family: var(--sl-font-display);
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.9;
	background: linear-gradient(180deg, var(--sl-brand-3), var(--sl-brand));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.sl-tl-footer-num small {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.sl-tl-footer-copy { display: flex; flex-direction: column; gap: 0.2rem; }
.sl-tl-footer-copy strong { color: var(--sl-text); font-size: 1rem; font-weight: 600; }
.sl-tl-footer-copy span { color: var(--sl-text-2); font-size: 0.88rem; }

/* ========================================================================
   PLANOS — SEGMENTED CONTROL (iOS-style)
   ======================================================================== */
.sl-seg {
	display: inline-flex;
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 999px;
	padding: 4px;
	gap: 2px;
	margin-top: 1rem;
	backdrop-filter: blur(10px);
}
.sl-seg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.25rem;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--sl-text-2);
	font-family: var(--sl-font-body);
	font-size: 0.88rem;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.3s var(--sl-ease);
	position: relative;
	z-index: 1;
	white-space: nowrap;
}
.sl-seg-btn:hover { color: var(--sl-text); }
.sl-seg-btn.is-active { color: var(--sl-text); }
.sl-seg-icon { font-size: 1rem; }

.sl-seg-indicator {
	position: absolute;
	top: 4px;
	left: 4px;
	height: calc(100% - 8px);
	background: rgba(var(--sl-brand-rgb), 0.15);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.3);
	border-radius: 999px;
	transition: transform 0.45s var(--sl-ease), width 0.45s var(--sl-ease);
	z-index: 0;
	width: 0;
	pointer-events: none;
}

/* Plan views — só a ativa fica visível */
.sl-plan-view {
	display: none;
	opacity: 0;
	transition: opacity 0.4s var(--sl-ease);
}
.sl-plan-view.is-active {
	display: block;
	opacity: 1;
	animation: sl-plan-fadein 0.5s var(--sl-ease);
}
@keyframes sl-plan-fadein {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Inline link (botão dentro de texto que troca aba) */
.sl-inline-link {
	background: none;
	border: 0;
	padding: 0;
	color: var(--sl-brand-3);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	font: inherit;
}
.sl-inline-link:hover { color: var(--sl-brand-2); }

/* ========================================================================
   PLANOS — GATEWAY SMS
   ======================================================================== */
.sl-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 1100px;
	margin: 1rem auto 4rem;
	padding-top: 1rem;
}
.sl-pkg {
	position: relative;
	padding: 2.5rem 2rem;
	background: rgba(22, 22, 32, 0.85);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	transition: all 0.4s var(--sl-ease);
	/* backdrop-filter removido — causava clipping de .sl-tier-tag no Chrome 120+ */
}
.sl-pkg:hover { transform: translateY(-4px); border-color: var(--sl-line-hi); }
.sl-pkg--popular {
	background: linear-gradient(180deg, rgba(var(--sl-brand-rgb), 0.10), rgba(22, 22, 32, 0.7));
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	box-shadow: 0 30px 60px -20px rgba(var(--sl-brand-rgb), 0.35);
}
.sl-pkg-badge {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}
.sl-pkg-name {
	font-family: var(--sl-font-display);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.02em;
}
.sl-pkg-volume {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--sl-line);
	margin-bottom: 0.3rem;
}
.sl-pkg-volume-n {
	font-family: var(--sl-font-display);
	font-size: 3.2rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 0.95;
	color: var(--sl-text);
}
.sl-pkg-volume-u {
	font-family: var(--sl-font-mono);
	font-size: 0.88rem;
	color: var(--sl-teal);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-pkg-price {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
}
.sl-pkg-once {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-pkg-rate {
	color: var(--sl-text-2);
	font-size: 0.88rem;
	padding: 0.6rem 0.85rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	margin-top: 0.4rem;
}
.sl-pkg-rate span {
	color: var(--sl-brand-3);
	font-family: var(--sl-font-display);
	font-size: 1.05rem;
	font-weight: 600;
}
.sl-pkg .sl-tier-cta { margin-top: 1rem; }

/* Calculadora SMS */
.sl-calc {
	max-width: 780px;
	margin: 3rem auto 0;
	padding: 2.25rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	background: rgba(22, 22, 32, 0.5);
	backdrop-filter: blur(10px);
}
.sl-calc-head {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.75rem;
}
.sl-calc-head h3 { font-size: 1.5rem; font-weight: 600; }
.sl-calc-body {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 2rem;
	align-items: center;
}
.sl-calc-field { display: flex; flex-direction: column; gap: 0.5rem; }
.sl-calc-field label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3);
}
.sl-calc-field input {
	font-family: var(--sl-font-display);
	font-size: 2rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	letter-spacing: -0.02em;
}
.sl-calc-divider {
	font-family: var(--sl-font-display);
	font-size: 2rem;
	color: var(--sl-text-3);
	font-weight: 300;
}
.sl-calc-result {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.sl-calc-label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sl-text-3);
}
.sl-calc-value {
	font-family: var(--sl-font-display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--sl-brand-3);
	line-height: 1;
}
.sl-calc-result small { font-family: var(--sl-font-mono); font-size: 0.72rem; color: var(--sl-text-3); }

/* ========================================================================
   PLANOS — SITE + HOSTING (services)
   ======================================================================== */
.sl-services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-service {
	position: relative;
	padding: 2.5rem 2rem;
	background: rgba(22, 22, 32, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-xl);
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	backdrop-filter: blur(10px);
	transition: all 0.4s var(--sl-ease);
}
.sl-service:hover { transform: translateY(-4px); border-color: var(--sl-line-hi); }
.sl-service--highlight {
	background: linear-gradient(180deg, rgba(var(--sl-teal-rgb), 0.08), rgba(22, 22, 32, 0.7));
	border-color: rgba(var(--sl-teal-rgb), 0.35);
	box-shadow: 0 30px 60px -20px rgba(var(--sl-teal-rgb), 0.25);
}
.sl-service-badge {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.3rem 0.65rem;
	background: rgba(255,255,255,0.04);
	border-radius: 999px;
	width: fit-content;
}
.sl-service--highlight .sl-service-badge {
	color: var(--sl-teal);
	background: rgba(var(--sl-teal-rgb), 0.1);
}
.sl-service-icon {
	font-size: 2.5rem;
	margin: 0.5rem 0 0.25rem;
}
.sl-service h3 {
	font-size: 1.5rem;
	font-weight: 600;
}
.sl-service p { color: var(--sl-text-2); font-size: 0.95rem; }
.sl-service-feats {
	list-style: none;
	padding: 0;
	margin: 0.5rem 0 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-service-feats li {
	color: var(--sl-text-2);
	font-size: 0.9rem;
	padding-left: 1.4rem;
	position: relative;
}
.sl-service-feats li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--sl-brand-3);
	font-weight: 700;
}
.sl-service--highlight .sl-service-feats li::before { color: var(--sl-teal); }

.sl-service-price {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	padding: 1.25rem 0;
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
	margin-top: auto;
}
.sl-service-price-note {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-left: auto;
}
.sl-service-payment {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--sl-text-2);
	padding: 0.7rem 0.9rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	margin-bottom: 0.5rem;
}
.sl-service-payment strong { color: var(--sl-text); }

/* Combo card */
.sl-combo {
	max-width: 1100px;
	margin: 3rem auto 0;
	padding: 3rem;
	border-radius: var(--sl-r-xl);
	background:
		radial-gradient(ellipse at left, rgba(var(--sl-brand-rgb), 0.12), transparent 60%),
		rgba(18, 18, 26, 0.8);
	border: 1px solid var(--sl-line-hi);
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 3rem;
	align-items: center;
}
.sl-combo-left h3 { font-size: 2rem; margin: 1rem 0; letter-spacing: -0.03em; }
.sl-combo-left p { color: var(--sl-text-2); }
.sl-combo-right {
	padding: 1.5rem;
	background: rgba(10, 10, 15, 0.6);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-combo-calc { display: flex; flex-direction: column; gap: 0.5rem; }
.sl-combo-line {
	display: flex;
	justify-content: space-between;
	font-size: 0.95rem;
	color: var(--sl-text-2);
	padding: 0.4rem 0;
	border-bottom: 1px dashed var(--sl-line);
}
.sl-combo-line:last-of-type { border-bottom: none; }
.sl-combo-line strong { color: var(--sl-text); font-family: var(--sl-font-mono); }
.sl-combo-total {
	border-top: 1px solid var(--sl-line) !important;
	padding-top: 0.85rem !important;
	margin-top: 0.35rem;
	font-size: 1.05rem;
}
.sl-combo-total strong {
	font-family: var(--sl-font-display);
	font-size: 1.45rem;
	color: var(--sl-brand-3);
	font-weight: 500;
}

/* Linha "custo 1º ano" dentro do combo */
.sl-combo-year {
	display: grid !important;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	padding-top: 0.85rem !important;
	margin-top: 0.5rem;
	border-top: 1px dashed rgba(196,255,62,0.3) !important;
}
.sl-combo-year span:first-child {
	grid-column: 1;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sl-text-3);
}
.sl-combo-year strong {
	grid-column: 2;
	grid-row: 1;
	font-family: var(--sl-font-display);
	font-size: 1.4rem !important;
	color: var(--sl-lime, #c4ff3e) !important;
	font-weight: 700;
}
.sl-combo-year small {
	grid-column: 1 / -1;
	grid-row: 2;
	font-size: 0.7rem;
	color: var(--sl-text-3);
	margin-top: 0.2rem;
	font-family: var(--sl-font-mono);
	letter-spacing: 0.04em;
}

/* Cross-reference entre abas (plans-smartsapp, plans-site, etc) */
.sl-plans-xref {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 1rem;
	align-items: center;
	margin-top: 2rem;
	padding: 1.15rem 1.5rem;
	border: 1px solid rgba(45,212,191,0.2);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(45,212,191,0.04), rgba(45,212,191,0));
}
@media (max-width: 720px) {
	.sl-plans-xref { grid-template-columns: auto 1fr; text-align: left; }
	.sl-plans-xref .sl-btn { grid-column: 1 / -1; justify-content: center; margin-top: 0.5rem; }
}
.sl-plans-xref-icon {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: rgba(45,212,191,0.12);
	border: 1px solid rgba(45,212,191,0.3);
	color: var(--sl-teal, #2dd4bf);
	flex-shrink: 0;
}
.sl-plans-xref strong {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	margin-bottom: 0.15rem;
}
.sl-plans-xref span {
	display: block;
	font-size: 0.82rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	line-height: 1.45;
}
.sl-plans-xref--info {
	margin-top: 1.5rem;
	margin-bottom: 1rem;
	border-color: rgba(241,96,0,0.2);
	background: linear-gradient(180deg, rgba(241,96,0,0.04), rgba(241,96,0,0));
}
.sl-plans-xref--info .sl-plans-xref-icon {
	background: rgba(241,96,0,0.12);
	border-color: rgba(241,96,0,0.3);
	color: var(--sl-brand, #f16000);
}

/* Badge "NEW" no segmented control */
.sl-seg-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.1rem 0.4rem;
	margin-left: 0.1rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.56rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	border-radius: 4px;
	background: linear-gradient(135deg, var(--sl-lime, #c4ff3e), var(--sl-teal, #2dd4bf));
	color: #0a0a0f;
	text-transform: uppercase;
	box-shadow: 0 0 10px rgba(196,255,62,0.4);
	animation: sl-seg-badge-pulse 2s ease-in-out infinite;
}
@keyframes sl-seg-badge-pulse {
	0%, 100% { box-shadow: 0 0 8px rgba(196,255,62,0.35); }
	50%      { box-shadow: 0 0 14px rgba(196,255,62,0.6); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-seg-badge { animation: none; }
}

/* ========================================================================
   PLANOS PAGE — tiers + features all + plano especial
   ======================================================================== */

/* Grid de features comuns a todos os planos */
.sl-feats-all {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.85rem;
	max-width: 1100px;
	margin: 0 auto;
}
.sl-feat-item {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 0.85rem 1rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	color: var(--sl-text);
	font-size: 0.92rem;
	transition: all 0.3s var(--sl-ease);
}
.sl-feat-item:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	background: rgba(22, 22, 32, 0.8);
}
.sl-feat-icon {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.15), rgba(var(--sl-teal-rgb), 0.08));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.2);
	font-size: 1.1rem;
	flex-shrink: 0;
}

/* Tiers grid (6 cards na page Planos) */
.sl-tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: 1100px;
	margin: 1rem auto 0;
	padding-top: 1rem;
}

/* Preview (home) — 3 cards */
.sl-tiers-preview {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	max-width: 900px;
	margin: 1rem auto 0;
	padding-top: 1rem;
}

/* Card de tier individual */
.sl-tier {
	position: relative;
	padding: 2.25rem 1.75rem 1.75rem;
	background: rgba(22, 22, 32, 0.85);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	text-align: center;
	transition: all 0.4s var(--sl-ease);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	/* backdrop-filter removido — causava clipping de .sl-tier-tag no Chrome 120+ */
}
.sl-tier:hover {
	transform: translateY(-4px);
	border-color: var(--sl-line-hi);
	background: rgba(26, 26, 36, 0.8);
}
.sl-tier-range {
	font-family: var(--sl-font-display);
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sl-text);
}
.sl-tier-label {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.sl-tier-price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.3rem;
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sl-line);
}
.sl-tier-curr {
	font-family: var(--sl-font-mono);
	font-size: 0.88rem;
	color: var(--sl-text-2);
}
.sl-tier-value {
	font-family: var(--sl-font-display);
	font-size: 2.6rem;
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--sl-text);
}
.sl-tier-per {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	margin-bottom: 1rem;
}
.sl-tier-cta {
	width: 100%;
	margin-top: 0.5rem;
}

/* Tier popular — destaque */
.sl-tier--popular {
	background:
		linear-gradient(180deg, rgba(var(--sl-brand-rgb), 0.10), rgba(22, 22, 32, 0.7)),
		var(--sl-ink-2);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	box-shadow: 0 30px 60px -20px rgba(var(--sl-brand-rgb), 0.35);
}
.sl-tier--popular::before {
	content: "";
	position: absolute; inset: -1px;
	border-radius: var(--sl-r-lg);
	padding: 1px;
	background: linear-gradient(140deg, rgba(var(--sl-brand-rgb), 0.6), transparent 55%, rgba(var(--sl-teal-rgb), 0.3));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none;
	z-index: 0;
}
.sl-tier-tag {
	display: inline-block;
	align-self: center;
	margin: -2.4rem auto 0.5rem;
	padding: 0.4rem 1rem;
	background: var(--sl-brand);
	color: #fff;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	letter-spacing: 0.15em;
	border-radius: 999px;
	text-transform: uppercase;
	font-weight: 700;
	white-space: nowrap;
	box-shadow: 0 6px 18px rgba(241,96,0,0.4);
	position: relative;
	z-index: 3;
}

/* Plano Especial — 1000+ em card ENTERPRISE destacado */
.sl-special {
	position: relative;
	padding: 4.5rem 3.5rem;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(135deg, #0a0a12 0%, #15151e 100%);
	isolation: isolate;
	max-width: 1100px;
	margin: 0 auto;
	box-shadow:
		0 30px 80px -20px rgba(196, 255, 62, 0.12),
		0 20px 40px -10px rgba(0, 0, 0, 0.6);
}
/* Aurora girando por trás — mais vibrante */
.sl-special-bg {
	position: absolute; inset: -30%;
	z-index: -1;
	background: conic-gradient(from 45deg at 50% 50%,
		rgba(var(--sl-lime-rgb), 0.45) 0deg,
		rgba(var(--sl-brand-rgb), 0.35) 100deg,
		rgba(var(--sl-teal-rgb), 0.3) 200deg,
		rgba(var(--sl-lime-rgb), 0.45) 360deg);
	filter: blur(80px);
	animation: sl-aurora-spin 22s linear infinite;
	opacity: 0.8;
}
.sl-special::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at left, rgba(10,10,18,0.3), rgba(10,10,18,0.85) 70%),
		rgba(10,10,18,0.45);
	z-index: 0;
}
/* Borda animada com gradient lime→brand */
.sl-special::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 24px;
	padding: 2px;
	background: linear-gradient(135deg,
		rgba(var(--sl-lime-rgb), 0.7),
		rgba(var(--sl-brand-rgb), 0.4),
		rgba(var(--sl-lime-rgb), 0.7));
	background-size: 200% 200%;
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: sl-special-border 6s ease infinite;
	pointer-events: none;
	z-index: 0;
}
@keyframes sl-special-border {
	0%, 100% { background-position: 0% 0%; }
	50%      { background-position: 100% 100%; }
}

/* Ribbon destacado no canto superior direito */
.sl-special-ribbon {
	position: absolute;
	top: 2rem; right: -4rem;
	transform: rotate(35deg);
	background: linear-gradient(135deg, var(--sl-lime), #9fe01a);
	color: #0a0a0f;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	padding: 0.45rem 4.5rem;
	box-shadow: 0 4px 14px rgba(196, 255, 62, 0.35);
	z-index: 2;
	text-transform: uppercase;
	white-space: nowrap;
}

.sl-special-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	max-width: 820px;
}
.sl-special-tag .sl-chip {
	background: rgba(var(--sl-lime-rgb), 0.12);
	border-color: rgba(var(--sl-lime-rgb), 0.4);
	color: var(--sl-lime);
}
.sl-special-tag .sl-chip-dot { background: var(--sl-lime); box-shadow: 0 0 14px var(--sl-lime); }

.sl-special-title {
	font-size: clamp(2.2rem, 5vw, 4rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
	text-shadow: 0 4px 30px rgba(196, 255, 62, 0.1);
}
.sl-special-desc {
	font-size: 1.1rem;
	color: var(--sl-text-2);
	max-width: 640px;
	line-height: 1.6;
}

.sl-special-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	padding: 1.75rem 0;
	border-block: 1px solid rgba(var(--sl-lime-rgb), 0.15);
	margin: 1rem 0;
	position: relative;
}
.sl-special-metric { display: flex; flex-direction: column; gap: 0.35rem; }
.sl-special-num {
	font-family: var(--sl-font-display);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--sl-text);
	background: linear-gradient(135deg, var(--sl-text) 0%, var(--sl-lime) 120%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.sl-special-l {
	font-family: var(--sl-font-mono);
	font-size: 0.66rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sl-special-disclaimer {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	line-height: 1.5;
	margin: -0.5rem 0 0 0;
	max-width: 640px;
}
.sl-special-disclaimer strong { color: var(--sl-text-2); font-weight: 500; }

.sl-special-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
/* Botão principal do Plano Especial: LIME (diferente dos outros tiers que são laranja) */
.sl-special-cta.sl-btn-primary {
	background: var(--sl-lime);
	color: #0a0a0f;
	border-color: var(--sl-lime);
	box-shadow: 0 10px 30px -10px rgba(196, 255, 62, 0.5);
}
.sl-special-cta.sl-btn-primary:hover {
	background: #b8f025;
	border-color: #b8f025;
	transform: translateY(-2px);
	box-shadow: 0 15px 35px -10px rgba(196, 255, 62, 0.6);
}

/* ========================================================================
   SCREEN TOUR (4 telas)
   ======================================================================== */
.sl-screens {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	align-items: start; /* cada card segue sua altura natural — sem esticar pro maior */
}
.sl-screen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
.sl-screen-viz {
	/* altura segue o conteúdo; grid pai usa align-items:start pra não forçar match */
	border: 1px solid var(--sl-line-hi);
	border-radius: var(--sl-r-lg);
	background: var(--sl-ink-2);
	overflow: hidden;
	box-shadow: var(--sl-shadow-soft);
	display: flex; flex-direction: column;
}
.sl-screen-header {
	display: flex;
	gap: 0.35rem;
	padding: 0.6rem 0.8rem;
	border-bottom: 1px solid var(--sl-line);
	background: rgba(14,14,21,0.8);
}
.sl-screen-tab {
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	background: transparent;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.05em;
}
.sl-screen-tab.is-active { background: rgba(var(--sl-brand-rgb), 0.12); color: var(--sl-brand-3); }

.sl-screen-body { flex: 1; display: flex; flex-direction: column; padding: 0.5rem; gap: 0.5rem; position: relative; }

.sl-screen-chart {
	padding: 0.75rem;
	border-top: 1px solid var(--sl-line);
}
.sl-screen-chart-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	margin-bottom: 0.4rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-screen-chart-bars {
	display: flex; align-items: flex-end; gap: 0.3rem; height: 40px;
}
.sl-screen-chart-bars span {
	flex: 1;
	background: linear-gradient(180deg, var(--sl-brand-3), var(--sl-brand));
	border-radius: 2px 2px 0 0;
	opacity: 0.8;
}

/* Alert items */
.sl-screen-alert {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.8rem;
	border-radius: 8px;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line);
}
.sl-screen-alert-pin { font-size: 1.1rem; }
.sl-screen-alert strong { display: block; font-size: 0.78rem; color: var(--sl-text); font-weight: 600; }
.sl-screen-alert small { display: block; font-family: var(--sl-font-mono); font-size: 0.6rem; color: var(--sl-text-3); margin-top: 0.1rem; }
.sl-screen-alert--danger { border-left: 3px solid var(--sl-danger); }
.sl-screen-alert--warn   { border-left: 3px solid var(--sl-brand-3); }
.sl-screen-alert--info   { border-left: 3px solid var(--sl-teal); }
.sl-screen-alert--ok     { border-left: 3px solid var(--sl-lime); opacity: 0.75; }

/* KPI cards (reports tab) */
.sl-screen-kpi {
	padding: 0.7rem 0.85rem;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	display: flex; flex-direction: column; gap: 0.15rem;
}
.sl-screen-kpi small { font-family: var(--sl-font-mono); font-size: 0.58rem; color: var(--sl-text-3); letter-spacing: 0.1em; text-transform: uppercase; }
.sl-screen-kpi strong { font-family: var(--sl-font-display); font-size: 1.3rem; font-weight: 500; color: var(--sl-text); letter-spacing: -0.02em; line-height: 1; }
.sl-screen-kpi span { font-family: var(--sl-font-mono); font-size: 0.6rem; }

/* Maintenance progress rows */
.sl-screen-row {
	display: grid;
	grid-template-columns: 1fr 80px 60px;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--sl-line);
	align-items: center;
	font-size: 0.72rem;
	color: var(--sl-text-2);
}
.sl-screen-row:last-child { border-bottom: none; }
.sl-screen-row small { font-family: var(--sl-font-mono); color: var(--sl-text-3); font-size: 0.62rem; text-align: right; }
.sl-screen-progress {
	height: 4px;
	background: rgba(255,255,255,0.06);
	border-radius: 2px;
	overflow: hidden;
	position: relative;
}
.sl-screen-progress span {
	display: block;
	height: 100%;
	width: var(--p, 50%);
	background: var(--c, var(--sl-brand));
}

.sl-screen-info { padding: 0 1rem; }
.sl-screen-tag {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-brand-3);
	letter-spacing: 0.12em;
	margin-bottom: 0.6rem;
}
.sl-screen-info h3 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; }
.sl-screen-info p { color: var(--sl-text-2); font-size: 0.95rem; }

/* ========================================================================
   MOBILE APPS
   ======================================================================== */
.sl-section-mobile {
	padding: 6rem 0;
	background: linear-gradient(180deg, transparent, rgba(var(--sl-brand-rgb), 0.04), transparent);
}
.sl-mobile-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}
.sl-mobile-feats {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0;
	display: flex; flex-direction: column; gap: 0.6rem;
}
.sl-mobile-feats li {
	color: var(--sl-text-2);
	font-size: 0.95rem;
}

/* Nota white-label privado (abaixo dos feats) */
.sl-mobile-wl-note {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	padding: 0.9rem 1.1rem;
	border: 1px solid rgba(45,212,191,0.22);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(45,212,191,0.05), rgba(45,212,191,0));
}
.sl-mobile-wl-note-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(45,212,191,0.12);
	border: 1px solid rgba(45,212,191,0.3);
	color: var(--sl-teal, #2dd4bf);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.sl-mobile-wl-note > div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}
.sl-mobile-wl-note strong {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--sl-text, #fafafc);
	line-height: 1.3;
}
.sl-mobile-wl-note small {
	font-size: 0.78rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
	line-height: 1.5;
}

.sl-mobile-phones {
	position: relative;
	height: 560px;
	display: flex; justify-content: center;
}
.sl-phone {
	position: absolute;
	width: 260px; height: 540px;
	border-radius: 38px;
	background: #1a1a24;
	border: 8px solid #0a0a0f;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,0.08);
	overflow: hidden;
	display: flex; flex-direction: column;
}
.sl-phone--back { transform: translateX(-80px) rotate(-6deg); opacity: 0.92; }
.sl-phone--front { transform: translateX(80px) rotate(5deg); z-index: 2; }

.sl-phone-notch {
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 100px; height: 22px;
	background: #0a0a0f;
	border-radius: 0 0 12px 12px;
	z-index: 10;
}
.sl-phone-screen {
	flex: 1; display: flex; flex-direction: column;
	background: var(--sl-ink-2);
	border-radius: 28px;
	margin: 24px 2px 2px;
	overflow: hidden;
	position: relative;
}
.sl-phone-status {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.5rem 1rem 0.25rem;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-2);
}
.sl-phone-app-header {
	display: flex; justify-content: space-between; align-items: center;
	padding: 0.5rem 1rem 0.75rem;
	border-bottom: 1px solid var(--sl-line);
	font-family: var(--sl-font-display);
	font-weight: 700;
	color: var(--sl-text);
	font-size: 0.88rem;
}
.sl-phone-app-body { flex: 1; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; overflow: hidden; }
.sl-phone-card {
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--sl-line);
}
.sl-phone-card strong { font-size: 0.8rem; color: var(--sl-text); }
.sl-phone-card--alert { border-color: rgba(255, 64, 96, 0.3); background: rgba(255, 64, 96, 0.05); }

.sl-phone-metric {
	padding: 0.45rem 0.6rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	display: flex; flex-direction: column; gap: 0.15rem;
}
.sl-phone-metric small { font-size: 0.55rem; color: var(--sl-text-3); }
.sl-phone-metric strong { font-size: 0.78rem; color: var(--sl-text); transition: color 0.3s; }

/* Ignição on/off */
.sl-phone-metric strong[data-plat-ignition] {
	font-size: 1rem;
	line-height: 1;
	transition: color 0.3s, text-shadow 0.3s;
}
.sl-phone-metric strong[data-plat-ignition].is-on  {
	color: var(--sl-teal, #2dd4bf);
	text-shadow: 0 0 6px rgba(45,212,191,0.45);
}
.sl-phone-metric strong[data-plat-ignition].is-off {
	color: #ff4060;
	text-shadow: 0 0 6px rgba(255,64,96,0.45);
}

/* Mapa dentro do Phone 2 */
.sl-phone-map {
	flex: 1;
	background: linear-gradient(180deg, #141420, #1a1a28);
	position: relative;
	border-radius: 10px;
	margin: 0.5rem;
	overflow: hidden;
}

/* Pin interativo no mapa do Phone */
.sl-phone-pin {
	position: absolute;
	top: 40%;
	left: 45%;
	width: 22px;
	height: 22px;
	background: var(--sl-brand, #f16000);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 0 rgba(241,96,0,0);
	display: grid;
	place-items: center;
	transform: translate(-50%, -50%);
	transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.35s;
	z-index: 2;
}
.sl-phone-pin-label {
	color: #fff;
	font-size: 0.5rem;
	font-weight: 700;
	font-family: var(--sl-font-mono, monospace);
	letter-spacing: 0.04em;
}
.sl-phone-pin-dot {
	display: none; /* placeholder pra futuro — hoje o texto 01 já indica */
}
/* Estado bloqueado */
.sl-phone-pin.is-blocked {
	background: #ff4060;
	box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 4px rgba(255,64,96,0.25), 0 0 20px rgba(255,64,96,0.5);
}
/* Flash (anima sempre que muda estado) */
.sl-phone-pin.is-flashing {
	animation: sl-phone-pin-flash 0.9s cubic-bezier(0.22,1,0.36,1);
}
.sl-phone-pin.is-flashing::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 2px solid currentColor;
	pointer-events: none;
	animation: sl-phone-pin-ripple 0.9s ease-out;
}
.sl-phone-pin.is-blocked.is-flashing::after { border-color: #ff4060; }
.sl-phone-pin:not(.is-blocked).is-flashing::after { border-color: var(--sl-brand, #f16000); }
@keyframes sl-phone-pin-flash {
	0%   { transform: translate(-50%, -50%) scale(1); }
	25%  { transform: translate(-50%, -50%) scale(1.45); }
	55%  { transform: translate(-50%, -50%) scale(0.88); }
	100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes sl-phone-pin-ripple {
	0%   { opacity: 0.75; transform: scale(0.8); }
	100% { opacity: 0; transform: scale(2.6); }
}

/* Botão bloquear/desbloquear */
.sl-phone-block-btn {
	margin-top: 0.5rem;
	width: 100%;
	background: var(--sl-brand, #f16000);
	color: #fff;
	padding: 0.6rem 0.8rem;
	border-radius: 8px;
	border: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	transition: background 0.3s, transform 0.15s, box-shadow 0.3s;
	box-shadow: 0 3px 10px rgba(241,96,0,0.35);
}
.sl-phone-block-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(241,96,0,0.5); }
.sl-phone-block-btn:active { transform: translateY(0);    box-shadow: 0 2px 6px rgba(241,96,0,0.35); }
.sl-phone-block-btn.is-blocked {
	background: #1f8a4d;
	box-shadow: 0 3px 10px rgba(31,138,77,0.35);
}
.sl-phone-block-btn.is-blocked:hover {
	background: #247d4a;
	box-shadow: 0 6px 16px rgba(31,138,77,0.5);
}
.sl-phone-block-btn-icon { font-size: 0.85rem; line-height: 1; }

/* ========================================================================
   INTEGRATIONS
   ======================================================================== */
.sl-integrations {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.sl-int-card {
	padding: 1.75rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-r-lg);
	background: rgba(18, 18, 26, 0.6);
	transition: all 0.4s var(--sl-ease);
}
.sl-int-card:hover {
	transform: translateY(-4px);
	border-color: var(--sl-line-hi);
	background: rgba(22, 22, 32, 0.8);
}
.sl-int-icon {
	width: 48px; height: 48px;
	border-radius: 12px;
	display: grid; place-items: center;
	font-size: 1.3rem;
	font-weight: 700;
	margin-bottom: 1rem;
	font-family: var(--sl-font-mono);
}
.sl-int-card h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.4rem; }
.sl-int-card p { color: var(--sl-text-2); font-size: 0.9rem; margin: 0; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1024px) {
	.sl-gw-banner { flex-direction: column; align-items: stretch; padding: 2rem; }
	.sl-gw-banner-right { max-width: 100%; }
	.sl-gw-banner-left { grid-template-columns: 1fr; gap: 1rem; }
	.sl-cfg-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-shortcuts { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
	.sl-id-card { padding: 2rem; }
	.sl-id-grid { grid-template-columns: 1fr; gap: 1.25rem; }
	.sl-story { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; text-align: center; }
	.sl-story-meta { align-items: center; }
	.sl-principles { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.sl-office-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-office-mapwrap { height: 380px; }
	.sl-office-pin { min-width: auto; max-width: calc(100% - 2rem); left: 1rem; right: 1rem; bottom: 1rem; }
	.sl-servers { grid-template-columns: 1fr; max-width: 500px; margin-inline: auto; }
	.sl-support { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
	.sl-homolog { grid-template-columns: 1fr; gap: 2rem; padding: 2rem; }
	.sl-srv-grid { grid-template-columns: 1fr; max-width: 600px; margin-inline: auto; }
	.sl-uptime { grid-template-columns: 1fr; gap: 2rem; text-align: center; padding: 3rem 2rem; }
	.sl-uptime-hero { align-items: center; }
	.sl-uptime-num { justify-content: center; }
	.sl-uptime-num-label { text-align: center; }
	.sl-uptime-copy { align-items: center; }
	.sl-uptime-copy p { margin-inline: auto; }
	.sl-uptime-servers { width: 100%; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
	.sl-uptime-srv { padding: 0.6rem 0.75rem; }
	.sl-uptime-srv-val { font-size: 0.88rem; }
	.sl-packages { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
	.sl-services { grid-template-columns: 1fr; }
	.sl-combo { grid-template-columns: 1fr; padding: 2.25rem; gap: 1.5rem; }
	.sl-calc-body { grid-template-columns: 1fr; gap: 1.25rem; text-align: center; }
	.sl-calc-divider { display: none; }
	.sl-tiers { grid-template-columns: repeat(2, 1fr); }
	.sl-special-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-special { padding: 3rem 2rem; }
	.sl-screens { grid-template-columns: 1fr; }
	.sl-mobile-grid { grid-template-columns: 1fr; gap: 3rem; }
	.sl-integrations { grid-template-columns: 1fr 1fr; }
	.sl-ps-sensors-grid { grid-template-columns: repeat(2, 1fr); }
	.sl-ps-detail--3col { grid-template-columns: 1fr; gap: 1rem; }
	.sl-ps-detail-sensors .sl-ps-sensors-grid { grid-template-columns: repeat(3, 1fr); }
	.sl-hero-grid { grid-template-columns: 1fr; gap: 3rem; }
	.sl-bento { grid-template-columns: repeat(2, 1fr); }
	.sl-bento-a, .sl-bento-b, .sl-bento-c, .sl-bento-d { grid-column: span 2; grid-row: auto; }
	.sl-sticky-grid { grid-template-columns: 1fr; gap: 3rem; }
	.sl-sticky-viz { position: relative; top: auto; height: 400px; }
	.sl-pricing { grid-template-columns: 1fr; }
	.sl-footer-main { grid-template-columns: 1fr 1fr; }
	.sl-footer-brand { grid-column: span 2; }
}

@media (max-width: 768px) {
	.sl-cmd-wrap { flex-direction: column; }
	.sl-cmd-copy { width: 100%; padding: 0.7rem; min-width: auto; }
	.sl-cfg-grid { grid-template-columns: 1fr; }
	.sl-sms-app { grid-template-columns: 90px 1fr; min-height: auto; }
	.sl-sms-donuts { grid-template-columns: repeat(2, 1fr); }
	.sl-sms-log code { max-width: 140px; }
	.sl-gw-banner { padding: 1.75rem 1.25rem; }
	.sl-homolog { padding: 1.5rem; }
	.sl-tl { max-width: 100%; }
	.sl-tl::before { left: 19px; }
	.sl-tl-step { grid-template-columns: 40px 1fr; gap: 1rem; padding-bottom: 2.25rem; }
	.sl-tl-marker { width: 40px; height: 40px; }
	.sl-tl-num { font-size: 0.75rem; }
	.sl-tl-meta { flex-wrap: wrap; }
	.sl-tl-footer { grid-template-columns: 1fr; text-align: center; gap: 1rem; padding: 1.5rem; }
	.sl-tl-footer-num { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--sl-line); padding-bottom: 1rem; flex-direction: row; gap: 0.75rem; align-items: baseline; }
	.sl-tl-footer-num > span { font-size: 2.25rem; }
	.sl-seg { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; width: 100%; justify-content: flex-start; }
	.sl-seg-btn { padding: 0.55rem 0.9rem; font-size: 0.82rem; }
	.sl-seg-btn span:last-child { /* tab label */ }
	.sl-tiers, .sl-tiers-preview { grid-template-columns: 1fr; max-width: 480px; }
	.sl-special-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.sl-special { padding: 2.5rem 1.5rem; }
	.sl-integrations { grid-template-columns: 1fr; }
	.sl-ps-app { grid-template-columns: 48px 1fr; grid-template-rows: auto auto; min-height: auto; }
	.sl-ps-sidebar { max-height: 240px; grid-column: 2 / 3; }
	.sl-ps-main { grid-column: 1 / -1; }
	.sl-ps-topbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
	.sl-ps-search { min-width: 0; width: 100%; }
	.sl-ps-sensors-grid { grid-template-columns: 1fr 1fr; }
	.sl-mobile-phones { height: 480px; }
	.sl-phone { width: 220px; height: 450px; }
	.sl-phone--back { transform: translateX(-50px) rotate(-5deg); }
	.sl-phone--front { transform: translateX(50px) rotate(4deg); }
	.sl-section { padding: 4rem 0; }
	.sl-hero { padding: 3rem 0 4rem; }
	.sl-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: rgba(8,8,12,0.98); padding: 1rem; border-top: 1px solid var(--sl-line); }
	.sl-nav.is-open { display: flex; }
	.sl-nav ul { flex-direction: column; width: 100%; border-radius: var(--sl-r); background: none; border: none; padding: 0; gap: 0; }
	.sl-nav a { width: 100%; padding: 0.8rem 1rem; border-radius: 0; border-bottom: 1px solid var(--sl-line); text-align: left; }
	.sl-menu-toggle { display: flex; }
	.sl-header-actions .sl-btn-ghost { display: none; }
	.sl-bento { grid-template-columns: 1fr; }
	.sl-bento-a, .sl-bento-b, .sl-bento-c, .sl-bento-d { grid-column: span 1; }
	.sl-hero-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
	.sl-hscroll-card { flex: 0 0 280px; }
	.sl-testi { flex: 0 0 320px; }
	.sl-form-row { grid-template-columns: 1fr; }
	.sl-footer-main { grid-template-columns: 1fr; gap: 2rem; }
	.sl-footer-brand { grid-column: auto; }
	.sl-footer-bottom { flex-direction: column; text-align: center; }
	.sl-aurora-box { padding: 3rem 1.5rem; }
	.sl-cursor-blob { display: none; }
	.sl-stack-data { position: relative; transform: none; width: auto; }
	.sl-hero-visual { display: flex; flex-direction: column; gap: 1rem; aspect-ratio: auto; perspective: none; }
	.sl-stack-map { position: relative; inset: auto; transform: none; aspect-ratio: 1; width: 100%; }
}

/* ========================================================================
   MOBILE CONSOLIDATED — 480px e abaixo
   (ajustes específicos que só fazem sentido em viewports de smartphone)
   ======================================================================== */
@media (max-width: 480px) {
	/* --- Spacing geral: seções mais compactas --- */
	.sl-section { padding: 3.5rem 0; }
	.sl-section--tight { padding: 2.5rem 0; }
	.sl-wrap, .sl-wrap-narrow { padding-inline: 1rem; }

	/* --- Hero stats: 3 colunas → 1 em mobile (cabem melhor empilhadas) --- */
	.sl-hero-stats { grid-template-columns: 1fr; gap: 1.25rem; }

	/* --- Status bar: quebra em 2 linhas quando aperta --- */
	.sl-status-items { gap: 0.75rem 1rem; flex-wrap: wrap; }
	.sl-status-item { font-size: 0.68rem; }

	/* --- Footer: reduzir margens/tamanhos --- */
	.sl-footer-main { gap: 1.75rem; margin-bottom: 2rem; }
	.sl-footer-mega { font-size: clamp(2rem, 12vw, 5rem); line-height: 0.9; }
	.sl-footer-bottom { flex-direction: column; gap: 0.75rem; align-items: flex-start; text-align: left; }

	/* --- Plataforma (mockup de app) — restringe a altura, rail estreito --- */
	.sl-ps-app { grid-template-columns: 48px 1fr; min-height: auto; }
	.sl-ps-sidebar {
		display: none; /* esconde sidebar no mobile — conteúdo continua acessível via rail */
	}
	.sl-ps-topbar { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.85rem; }
	.sl-ps-topactions { flex-wrap: wrap; gap: 0.5rem; }
	.sl-ps-search { display: none; }
	.sl-ps-breadcrumb { font-size: 0.66rem; }
	.sl-ps-rail-i { width: 42px; height: 42px; }
	.sl-ps-map { min-height: 280px; }
	.sl-ps-browser-chrome { padding: 0.4rem 0.7rem; }
	.sl-ps-live { display: none; }

	/* --- Telemetry card no mapa: reduz/reposiciona --- */
	.sl-ps-telemetry { display: none; } /* economiza espaço em mobile */
	.sl-ps-mapstatus { padding: 0.45rem 0.6rem; font-size: 0.62rem; min-width: 140px; }
	.sl-ps-ticker { font-size: 0.6rem; padding: 0.35rem 0.6rem; }

	/* --- Grids de 3+ colunas ainda sem breakpoint adequado --- */
	.sl-special-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.sl-feats-all { grid-template-columns: 1fr; }
	.sl-principles { grid-template-columns: 1fr; }

	/* --- Formulários: full width, padding interno --- */
	.sl-form { max-width: 100%; padding-inline: 0; }
	.sl-form-row { grid-template-columns: 1fr !important; gap: 0.75rem; }

	/* --- Botões: touch target mínimo 44px --- */
	.sl-btn-sm { padding: 0.75rem 1.1rem; }
	.sl-footer-social a { width: 44px; height: 44px; }

	/* --- Tipografia de títulos: mais conservadora em mobile --- */
	.sl-mega { font-size: clamp(2rem, 10vw, 4rem); letter-spacing: -0.02em; }
	.sl-s-head h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); letter-spacing: -0.02em; }

	/* --- Contato: cards do time empilham sempre --- */
	.sl-team { gap: 1rem; }
	.sl-team-card { padding: 1.25rem; }

	/* --- Office map + cards --- */
	.sl-office-mapwrap { height: 260px; }
	.sl-office-pin { min-width: auto; padding: 0.75rem 0.9rem; }
	.sl-office-pin-head { gap: 0.5rem; }

	/* --- Legal (políticas) — TOC fica no topo e colapsa --- */
	.sl-legal-toc { padding: 1rem; }
	.sl-legal-content { font-size: 0.92rem; }

	/* --- Cookies banner: já é responsivo, só ajusta padding --- */
	.sl-cookies { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; padding: 1rem 1.1rem; border-radius: 12px; }
}

/* ========================================================================
   404 — Página não encontrada (metáfora "sinal perdido")
   ======================================================================== */
.sl-404 {
	padding: 5rem 0 6rem;
	position: relative;
	overflow: hidden;
}
.sl-404::before {
	content: "";
	position: absolute;
	top: -10%; left: -10%;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(241,96,0,0.12) 0%, transparent 70%);
	filter: blur(90px);
	pointer-events: none;
	z-index: 0;
}
.sl-404 > .sl-wrap { position: relative; z-index: 1; }

/* Topo: radar + copy */
.sl-404-top {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 3rem;
	align-items: center;
	max-width: 1100px;
	margin: 0 auto 4rem;
}
.sl-404-radar {
	width: 260px;
	height: 260px;
	flex-shrink: 0;
}
.sl-404-copy { min-width: 0; }
.sl-404-title {
	font-family: var(--sl-font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.8rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 1rem 0 1rem 0;
	color: var(--sl-text);
}
.sl-404-desc {
	font-size: 1.05rem;
	color: var(--sl-text-2);
	line-height: 1.6;
	max-width: 560px;
	margin: 0 0 1.75rem 0;
}

/* Busca */
.sl-404-search {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.55rem 0.55rem 0.55rem 1.1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	transition: border-color 0.25s, background 0.25s;
	max-width: 520px;
	margin-bottom: 1rem;
}
.sl-404-search:focus-within {
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	background: rgba(255, 255, 255, 0.05);
}
.sl-404-search svg { color: var(--sl-text-3); flex-shrink: 0; transition: color 0.25s; }
.sl-404-search:focus-within svg { color: var(--sl-brand-3); }
.sl-404-search input {
	flex: 1;
	background: transparent;
	border: 0;
	color: var(--sl-text);
	font-family: inherit;
	font-size: 0.95rem;
	outline: 0;
	padding: 0.35rem 0;
	min-width: 0;
}
.sl-404-search input::placeholder { color: var(--sl-text-3); }
.sl-404-search .sl-btn {
	padding: 0.55rem 1.1rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

.sl-404-ctas {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
}

/* Grid de rotas alternativas */
.sl-404-routes { max-width: 1100px; margin: 0 auto; }
.sl-404-routes-label {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 1.25rem;
	position: relative;
}
.sl-404-routes-label::before,
.sl-404-routes-label::after {
	content: "";
	display: inline-block;
	width: 40px;
	height: 1px;
	background: var(--sl-line);
	vertical-align: middle;
	margin: 0 0.75rem;
}
.sl-404-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.85rem;
}
.sl-404-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.25rem;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	text-decoration: none;
	transition: all 0.3s var(--sl-ease);
}
.sl-404-card:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.35);
	background: rgba(22, 22, 32, 0.8);
	transform: translateY(-2px);
}
.sl-404-card-icon {
	width: 40px; height: 40px;
	flex-shrink: 0;
	display: grid; place-items: center;
	background: rgba(var(--sl-brand-rgb), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.22);
	border-radius: 10px;
	color: var(--sl-brand);
	transition: all 0.3s;
}
.sl-404-card:hover .sl-404-card-icon {
	background: rgba(var(--sl-brand-rgb), 0.18);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
}
.sl-404-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.sl-404-card-body strong {
	font-size: 0.95rem;
	color: var(--sl-text);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.sl-404-card-body span {
	font-size: 0.8rem;
	color: var(--sl-text-3);
}
.sl-404-card-arrow {
	color: var(--sl-text-3);
	flex-shrink: 0;
	transition: transform 0.25s, color 0.25s;
}
.sl-404-card:hover .sl-404-card-arrow {
	color: var(--sl-brand-3);
	transform: translateX(3px);
}

/* Responsivo */
@media (max-width: 960px) {
	.sl-404-top { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
	.sl-404-radar { margin: 0 auto; width: 200px; height: 200px; }
	.sl-404-copy .sl-chip { margin: 0 auto; }
	.sl-404-search { margin-left: auto; margin-right: auto; }
	.sl-404-ctas { justify-content: center; }
	.sl-404-desc { margin-left: auto; margin-right: auto; }
	.sl-404-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.sl-404-grid { grid-template-columns: 1fr; }
	.sl-404-search { flex-direction: column; padding: 1rem; align-items: stretch; gap: 0.75rem; }
	.sl-404-search input { padding: 0.5rem; background: rgba(0,0,0,0.2); border-radius: 8px; }
	.sl-404-search svg { display: none; }
	.sl-404 { padding: 3rem 0; }
}

/* ========================================================================
   FOCUS-VISIBLE — contorno globally keyboard-friendly (WCAG 2.4.7)
   Só aparece em navegação por teclado; mouse mantém UX limpo.
   Inputs/selects já têm seu próprio estilo de foco customizado (linha ~2083).
   ======================================================================== */
:where(a, button, [role="button"], summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 3px;
	border-radius: 4px;
}
.sl-btn:focus-visible {
	outline-offset: 4px;
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb), 0.22);
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.sl-reveal, .sl-reveal.is-in, .sl-reveal-children > *, .sl-char {
		opacity: 1 !important; transform: none !important; filter: none !important;
	}
	.sl-cursor-blob, .sl-scroll-bar { display: none; }
	body::before { display: none; }
}