/* ==========================================================================
   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);

	/* Animation clock — relógio absoluto da sessão (em ms desde o primeiro page
	 * load). Setado pelo script inline no header.php. Animações longas usam
	 * `animation-delay: calc(var(--sl-anim-clock) * -1)` pra preservar a fase
	 * entre navegações em vez de reiniciar do frame 0 toda vez. */
	--sl-anim-clock: 0ms;
}

/* ========================================================================
   CROSS-DOCUMENT VIEW TRANSITIONS — crossfade nativo entre navegações.
   Browser tira snapshot da página antiga, segura na tela enquanto a nova
   carrega (com --sl-anim-clock já correto), e faz cross-fade. Animações
   longas dão impressão de continuidade visual mesmo com DOM novo.
   Suporte: Chrome 126+, Edge 126+. Firefox/Safari fazem nav instantânea
   (mesmo comportamento de antes — sem regressão).
   ======================================================================== */
@view-transition { navigation: auto; }

/* Crossfade um pouquinho mais lento que o default (250ms) pra ficar mais
 * suave e dar tempo do browser pintar a nova página com o relógio correto */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.4s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cada elemento da topbar é capturado como snapshot SEPARADO via
 * view-transition-name (definido nas regras dos componentes abaixo). Como
 * cada snapshot OLD e NEW representa visualmente a mesma coisa (mesmo pill,
 * mesmo valor, mesma posição), o cross-fade é imperceptível. Sem o nome,
 * tudo virava parte do snapshot 'root' e cross-fadava com o conteúdo da
 * página inteira — causando o "reset visual" da topbar. */
::view-transition-old(sl-topbar),
::view-transition-new(sl-topbar),
::view-transition-old(sl-aurora),
::view-transition-new(sl-aurora),
::view-transition-old(sl-srv-1),
::view-transition-new(sl-srv-1),
::view-transition-old(sl-srv-2),
::view-transition-new(sl-srv-2),
::view-transition-old(sl-srv-3),
::view-transition-new(sl-srv-3),
::view-transition-old(sl-srv-link),
::view-transition-new(sl-srv-link),
::view-transition-old(sl-geo-rotator),
::view-transition-new(sl-geo-rotator),
::view-transition-old(sl-geo-time),
::view-transition-new(sl-geo-time) {
	animation-duration: 0.15s;
	animation-timing-function: linear;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-old(root),
	::view-transition-new(root) {
		animation-duration: 0.15s;
	}
}

/* ========================================================================
   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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
@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;
	right: 1.25rem;
	left: auto;
	/* BASE — abaixo de todos os outros FABs */
	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; }
}
/* Mobile: esconde o ticker (ocupa muito espaço) e desce os FABs pra base da tela.
 * Funciona mesmo sem a classe body.sl-no-ticker (que é controlada pelo JS no desktop). */
@media (max-width: 767px) {
	.sl-ticker { display: none !important; }
}

/* ========================================================================
   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-vo-tod-edge, var(--sl-line, rgba(255,255,255,0.08)));
	border-radius: 12px;
	background: linear-gradient(180deg, var(--sl-vo-tod-1, rgba(45,212,191,0.03)), var(--sl-vo-tod-2, 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);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.sl-vo-city:hover {
	border-color: rgba(45,212,191,0.35);
	transform: translateY(-2px);
}
.sl-vo-city:focus-visible {
	outline: 2px solid rgba(45,212,191,0.6);
	outline-offset: 2px;
	border-color: rgba(45,212,191,0.5);
}
.sl-vo-city--unknown { cursor: default; }
.sl-vo-city--unknown:hover { transform: none; }


/* --- Tinting por faixa do dia (dawn/day/sunset/night) ---
 * Cada card de cidade ganha uma luz sutil baseada na hora local — manhã
 * laranjada, dia teal, entardecer rosa-laranja, noite azul-violeta.
 * Mexe só nas variáveis CSS que .sl-vo-city consome — não duplica regra. */
.sl-vo-city[data-time-band="dawn"] {
	--sl-vo-tod-1:    rgba(251,146,60,0.07);
	--sl-vo-tod-2:    rgba(251,191,36,0.01);
	--sl-vo-tod-edge: rgba(251,146,60,0.18);
}
.sl-vo-city[data-time-band="day"] {
	--sl-vo-tod-1:    rgba(45,212,191,0.05);
	--sl-vo-tod-2:    rgba(250,204,21,0.015);
	--sl-vo-tod-edge: rgba(45,212,191,0.18);
}
.sl-vo-city[data-time-band="sunset"] {
	--sl-vo-tod-1:    rgba(244,114,182,0.07);
	--sl-vo-tod-2:    rgba(251,113,133,0.02);
	--sl-vo-tod-edge: rgba(244,114,182,0.20);
}
.sl-vo-city[data-time-band="night"] {
	--sl-vo-tod-1:    rgba(99,102,241,0.07);
	--sl-vo-tod-2:    rgba(67,56,202,0.02);
	--sl-vo-tod-edge: rgba(129,140,248,0.18);
}

/* --- Pulse de presença no count ("ativo agora") ---
 * Pequeno dot teal pulsando ao lado do número de visitantes. Reusa o
 * keyframe sl-vo-pulse já usado no contador grande do hero. */
.sl-vo-city:not(.sl-vo-city--unknown) .sl-vo-city-count {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}
.sl-vo-city:not(.sl-vo-city--unknown) .sl-vo-city-count::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	animation: sl-vo-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
	.sl-vo-city:not(.sl-vo-city--unknown) .sl-vo-city-count::before { animation: none; }
}
@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;
	overflow: hidden;
}
/* Quando o pin contém bandeira: moldura neutra (não tinge as cores)
 * + bandeira preenche bonita dentro do quadro 36×36, mantendo proporção 4:3. */
.sl-vo-city-pin--flag {
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.18);
	padding: 4px;
}
.sl-vo-flag-pin {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.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, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
	animation: sl-brand-breathe 4s ease-in-out infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
/* Pulse sutil contínuo do ícone — comunica "marca viva". Pausa no hover. */
@keyframes sl-brand-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.04); }
}
.sl-brand-lockup:hover .sl-brand-mark {
	animation-play-state: paused;
	transform: scale(1.08) rotate(-6deg);
	filter: drop-shadow(0 6px 20px rgba(var(--sl-teal-rgb), 0.55));
}
@media (prefers-reduced-motion: reduce) {
	.sl-brand-mark { animation: none; }
}
.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;
	transition: background-position 0.6s ease;
}
/* Shimmer no nome ao hover: gradient teal → laranja → teal varrendo. */
.sl-brand-lockup:hover .sl-brand-name {
	background: linear-gradient(90deg, var(--sl-teal) 0%, var(--sl-brand) 50%, var(--sl-teal) 100%);
	background-size: 200% 100%;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: sl-brand-name-shine 1.4s ease-out;
}
@keyframes sl-brand-name-shine {
	from { background-position: 100% 0; }
	to   { background-position: 0%   0; }
}
.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;
}

/* ─── Menu principal — 4 top-level + dropdowns ricos ─── */
.sl-nav {
	flex: 1;
	display: flex;
	justify-content: center;
}
.sl-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
}
.sl-nav-item {
	position: relative;
}
.sl-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.85rem;
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--sl-text-2);
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease, background 0.2s ease;
}
/* Underline animado teal — substitui a pill antiga */
.sl-nav-link::after {
	content: '';
	position: absolute;
	left: 0.85rem;
	right: 0.85rem;
	bottom: 0.25rem;
	height: 2px;
	background: linear-gradient(90deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}
.sl-nav-link:hover {
	color: var(--sl-text, #fafafc);
	background: rgba(255, 255, 255, 0.04);
}
.sl-nav-link:hover::after,
.sl-nav-item.is-active > .sl-nav-link::after,
.sl-nav-link[aria-current="page"]::after {
	transform: scaleX(1);
}
.sl-nav-item.is-active > .sl-nav-link {
	color: var(--sl-text, #fafafc);
}
.sl-nav-chevron {
	transition: transform 0.25s ease;
}
.sl-nav-item--has-dropdown[data-open] .sl-nav-chevron {
	transform: rotate(180deg);
}

/* ─── Dropdown ─── */
.sl-nav-dropdown {
	position: absolute;
	top: calc(100% + 0.25rem);
	left: 50%;
	transform: translateX(-50%) translateY(-6px);
	min-width: 320px;
	max-width: 380px;
	padding: 0.55rem;
	background: rgba(14, 14, 20, 0.96);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
	z-index: 60;
}
.sl-nav-item--has-dropdown:hover > .sl-nav-dropdown,
.sl-nav-item--has-dropdown[data-open] > .sl-nav-dropdown,
.sl-nav-item--has-dropdown:focus-within > .sl-nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}
/* Bridge invisível entre link e dropdown — evita "gap of death" no hover */
.sl-nav-item--has-dropdown::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 0.5rem;
	pointer-events: none;
}
.sl-nav-item--has-dropdown:hover::before,
.sl-nav-item--has-dropdown[data-open]::before {
	pointer-events: auto;
}
.sl-nav-dropdown ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sl-nav-dropdown-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.65rem 0.75rem;
	border-radius: 8px;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.7));
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.sl-nav-dropdown-item:hover {
	background: rgba(45, 212, 191, 0.07);
	color: var(--sl-text, #fafafc);
	transform: translateX(2px);
}
.sl-nav-dropdown-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: rgba(45, 212, 191, 0.08);
	color: var(--sl-teal, #2dd4bf);
	transition: background 0.18s ease;
}
.sl-nav-dropdown-icon svg {
	width: 16px;
	height: 16px;
}
.sl-nav-dropdown-item:hover .sl-nav-dropdown-icon {
	background: rgba(45, 212, 191, 0.18);
}
.sl-nav-dropdown-text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}
.sl-nav-dropdown-text strong {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	line-height: 1.25;
}
.sl-nav-dropdown-text small {
	font-size: 0.74rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.55));
	line-height: 1.4;
}
@media (prefers-reduced-motion: reduce) {
	.sl-nav-link::after,
	.sl-nav-dropdown,
	.sl-nav-dropdown-item { transition: none; }
}

/* ─── CTA item (Área do Cliente) — pulse dot + arrow + texto branco ─── */
.sl-nav-item--cta .sl-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: var(--sl-text, #fafafc);
	font-weight: 600;
}
.sl-nav-cta-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sl-teal, #2dd4bf);
	box-shadow: 0 0 8px var(--sl-teal, #2dd4bf);
	animation: sl-nav-cta-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes sl-nav-cta-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.8); }
}
.sl-nav-cta-arrow {
	transform: translateX(-3px);
	opacity: 0;
	transition: transform 0.25s var(--sl-ease, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.25s ease;
	flex-shrink: 0;
}
.sl-nav-item--cta .sl-nav-link:hover .sl-nav-cta-arrow {
	transform: translateX(0);
	opacity: 1;
}
/* Active (na própria página) — dot solid sem pulse */
.sl-nav-item--cta.is-active .sl-nav-cta-dot {
	animation: none;
	background: var(--sl-lime, #c4ff3e);
	box-shadow: 0 0 10px var(--sl-lime, #c4ff3e);
}
.sl-nav-item--cta.is-active .sl-nav-cta-arrow {
	transform: translateX(0);
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.sl-nav-cta-dot { animation: none; }
}

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

/* "Área do Cliente" no header — pill translúcido com tint laranja, mesma
 * família visual dos items do menu (glass) mas com hint de marca pra dizer
 * "sou o CTA". Hover explode pra laranja sólido pra dar dominância clara.
 * Override do .sl-btn-primary base SÓ neste contexto. */
.sl-header-actions .sl-btn-primary {
	background: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.07);
	color: var(--sl-text, #fafafc);
	border: 1px solid rgba(var(--sl-brand-rgb, 241, 96, 0), 0.32);
	box-shadow: none;
	backdrop-filter: blur(6px) saturate(140%);
	-webkit-backdrop-filter: blur(6px) saturate(140%);
	position: relative;
	overflow: hidden;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.18s ease;
}
/* Desliga o shimmer do .sl-btn-primary base — não combina com outline */
.sl-header-actions .sl-btn-primary::before { display: none; }
/* Arrow → aparece no hover, desliza da esquerda */
.sl-header-actions .sl-btn-primary::after {
	content: "→";
	display: inline-block;
	width: 0;
	margin-left: 0;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.22s ease, transform 0.22s ease, width 0.22s ease, margin-left 0.22s ease;
	overflow: hidden;
	white-space: nowrap;
}
.sl-header-actions .sl-btn-primary:hover {
	background: var(--sl-brand, #f16000);
	color: #fff;
	border-color: var(--sl-brand, #f16000);
	box-shadow: 0 8px 22px -8px rgba(var(--sl-brand-rgb, 241, 96, 0), 0.55);
	transform: translateY(-1px);
}
.sl-header-actions .sl-btn-primary:hover::after {
	width: 1ch;
	margin-left: 0.4rem;
	opacity: 1;
	transform: translateX(0);
}
/* Active — quando o user já está em /area-do-cliente/ (aria-current=page) */
.sl-header-actions .sl-btn-primary.is-active,
.sl-header-actions .sl-btn-primary[aria-current="page"] {
	background: var(--sl-brand, #f16000);
	color: #fff;
	border-color: var(--sl-brand, #f16000);
}

.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;
	cursor: pointer;
}
.sl-menu-toggle span {
	display: block; width: 18px; height: 1.5px;
	background: currentColor; border-radius: 2px;
	transition: all 0.3s;
}
.sl-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sl-menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sl-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ─── Mobile drawer — slide-in lateral ─── */
.sl-mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	pointer-events: none;
	visibility: hidden;
}
.sl-mobile-drawer[aria-hidden="false"] {
	pointer-events: auto;
	visibility: visible;
}
.sl-mobile-drawer-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.sl-mobile-drawer[aria-hidden="false"] .sl-mobile-drawer-overlay {
	opacity: 1;
}
.sl-mobile-drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: min(360px, 88vw);
	background: rgba(10, 10, 16, 0.98);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-left: 1px solid var(--sl-line, rgba(255, 255, 255, 0.08));
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	overflow-y: auto;
}
.sl-mobile-drawer[aria-hidden="false"] .sl-mobile-drawer-panel {
	transform: translateX(0);
}
.sl-mobile-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
}
.sl-mobile-drawer-head span {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
}
.sl-mobile-drawer-close {
	width: 32px; height: 32px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.1));
	border-radius: 8px;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.7));
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.sl-mobile-drawer-close:hover {
	color: var(--sl-text, #fafafc);
	border-color: var(--sl-teal, #2dd4bf);
}
.sl-mobile-drawer-nav {
	flex: 1;
	padding: 1rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.sl-mobile-drawer-group .sl-mobile-drawer-link {
	display: block;
	padding: 0.75rem 0.85rem;
	color: var(--sl-text, #fafafc);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 8px;
	transition: background 0.2s;
}
.sl-mobile-drawer-group .sl-mobile-drawer-link:hover {
	background: rgba(45, 212, 191, 0.08);
}
.sl-mobile-drawer-group ul {
	list-style: none;
	padding: 0 0 0 0.85rem;
	margin: 0.2rem 0 0;
	display: flex;
	flex-direction: column;
	border-left: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
	margin-left: 1rem;
}
.sl-mobile-drawer-group ul li a {
	display: block;
	padding: 0.55rem 0.85rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.65));
	font-size: 0.88rem;
	text-decoration: none;
	border-radius: 6px;
	transition: color 0.2s, background 0.2s;
}
.sl-mobile-drawer-group ul li a:hover {
	color: var(--sl-teal, #2dd4bf);
	background: rgba(45, 212, 191, 0.05);
}
.sl-mobile-drawer-foot {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
}

/* ─── Responsividade — hide desktop menu, show mobile toggle ─── */
@media (max-width: 980px) {
	.sl-nav { display: none; }
	.sl-menu-toggle { display: inline-flex; }
}

/* ========================================================================
   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: none; /* substituído pelo aurora border animado em ::after */
	position: relative;
	z-index: 2;
	padding: 0.6rem 0;
	/* View transition: marca a topbar como elemento "shared" entre páginas.
	 * O browser tira snapshot DESSA topbar e da próxima e faz a transição de
	 * elemento-pra-elemento (ao invés de cross-fade do root). Isso preserva
	 * o frame visível do aurora ::after — sem reset perceptível. */
	view-transition-name: sl-topbar;
}
/* Aurora border — gradient teal→laranja→teal varrendo horizontalmente em loop suave.
 * Elemento DOM real (.sl-status-aurora) em vez de pseudo pra poder receber
 * view-transition-name e ser preservado entre navegações. */
.sl-status-aurora {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(45, 212, 191, 0.5) 25%,
		rgba(241, 96, 0, 0.55) 50%,
		rgba(45, 212, 191, 0.5) 75%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: sl-aurora-flow 14s linear infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	pointer-events: none;
	view-transition-name: sl-aurora;
}
@keyframes sl-aurora-flow {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-status-aurora { animation: none; opacity: 0.4; }
}
.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;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0; /* permite que o overflow do marquee funcione no mobile */
}
.sl-status-items-track {
	display: flex;
	gap: 0.6rem;
	flex-wrap: wrap;
	align-items: center;
}
/* Desktop: clones (.sl-status-item--clone) ficam ocultos — são usados só pelo marquee no mobile.
 * Specificidade dupla (.sl-status-item.sl-status-item--clone) pra vencer a regra mais abaixo
 * que define `.sl-status-item { display: inline-flex }` (que tem mesma specificidade simples). */
.sl-status-item.sl-status-item--clone,
.sl-status-divider.sl-status-item--clone,
.sl-status-detail-link.sl-status-item--clone { display: none; }

/* ========================================================================
   STATUS BAR — marquee horizontal em telas <= 768px (tablets/smartphones)
   Em telas pequenas o flex wrap quebrava em 2 linhas. Solução: varredura
   contínua direita→esquerda, com fade nas bordas via mask-image e pausa
   quando o user interage (toque/hover/foco).
   ======================================================================== */
@media (max-width: 768px) {
	.sl-status-items {
		overflow: hidden;
		flex-wrap: nowrap;
		width: 100%;
		mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(to right, transparent 0, black 8%, black 92%, transparent 100%);
	}
	.sl-status-items-track {
		flex-wrap: nowrap;
		gap: 1.75rem;
		padding-right: 1.75rem; /* preserva o gap entre o último real e o primeiro clone */
		animation: sl-status-marquee 22s linear infinite;
		animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
		will-change: transform;
	}
	.sl-status-item.sl-status-item--clone { display: inline-flex; } /* clones visíveis no mobile pro loop seamless */
	.sl-status-divider.sl-status-item--clone { display: inline-block; }
	.sl-status-detail-link.sl-status-item--clone { display: inline-flex; }
	.sl-status-item { flex-shrink: 0; }
	.sl-status-items:hover .sl-status-items-track,
	.sl-status-items:focus-within .sl-status-items-track {
		animation-play-state: paused;
	}
	@keyframes sl-status-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); } /* avança até o início dos clones — invisível na transição */
	}
}
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
	.sl-status-items-track { animation: none; }
	.sl-status-items { overflow: visible; flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; }
	.sl-status-items-track { flex-wrap: wrap; padding-right: 0; }
	.sl-status-item.sl-status-item--clone,
	.sl-status-divider.sl-status-item--clone,
	.sl-status-detail-link.sl-status-item--clone { display: none; }
}
/* View-transition-name por servidor — apenas nos itens REAIS (não nos clones
 * do marquee mobile). Cada pill recebe snapshot próprio entre páginas e é
 * preservado como elemento "shared", sem cross-fade do root. */
.sl-status-item:not(.sl-status-item--clone)[data-service="s01"] { view-transition-name: sl-srv-1; }
.sl-status-item:not(.sl-status-item--clone)[data-service="s02"] { view-transition-name: sl-srv-2; }
.sl-status-item:not(.sl-status-item--clone)[data-service="s03"] { view-transition-name: sl-srv-3; }
.sl-status-detail-link:not(.sl-status-item--clone) { view-transition-name: sl-srv-link; }
.sl-status-geo-rotator { view-transition-name: sl-geo-rotator; }
.sl-status-geo-time { view-transition-name: sl-geo-time; }

/* ========================================================================
   BANDEIRAS SVG INLINE — renderizam idêntico em qualquer plataforma.
   Helper PHP: sl_flag('de'|'us'|'br') retorna <span class="sl-flag">…</span>
   Aspect ratios reais: DE 5:3, US 19:10, BR 14:10 (preservados pelo SVG)
   ======================================================================== */
.sl-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1em;          /* escala com font-size do contexto — relativo, não fixo */
	aspect-ratio: 4/3;     /* container neutro; SVG dentro mantém seu próprio aspect */
	border-radius: 2px;
	overflow: hidden;
	line-height: 0;
	flex-shrink: 0;
	box-shadow:
		inset 0 0 0 0.5px rgba(255, 255, 255, 0.18),  /* borda sutil interna */
		0 1px 2px rgba(0, 0, 0, 0.4);                  /* sombra de profundidade */
	vertical-align: -0.15em;
}
.sl-flag svg {
	display: block;
	width: 100%;
	height: 100%;
}
/* Variantes de tamanho — usam absolute em vez de em pra evitar acumulação no contexto */
.sl-flag--sm { width: 14px; }
.sl-flag--md { width: 18px; }
.sl-flag--lg { width: 24px; }
.sl-flag--xl { width: 32px; }

/* Compat alias — código antigo que usa .sl-status-flag continua funcionando */
.sl-status-flag {
	display: inline-flex;
	align-items: center;
	margin-left: -2px;
}

.sl-status-item {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem; /* gap entre dot/nome/valor — uniforme com o pill de visitantes */
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-2);
	letter-spacing: 0.03em;
	white-space: nowrap;
	position: relative; /* base pro overlay shimmer (.is-updated::after) */
	/* Glassmorphism pill — cada servidor em cápsula com vidro fosco.
	 * min-height: 30px enforça altura uniforme em TODOS os pills (servers + geo),
	 * independente do conteúdo interno (alguns têm sparkline/icon, outros só texto). */
	min-height: 30px;
	box-sizing: border-box;
	padding: 0 14px;
	background: rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sl-status-item:hover {
	border-color: rgba(45, 212, 191, 0.35);
	background: rgba(45, 212, 191, 0.06);
	box-shadow: 0 4px 16px -8px rgba(45, 212, 191, 0.4);
}
.sl-status-item[data-status="down"]:hover     { border-color: rgba(239, 68, 68, 0.4); box-shadow: 0 4px 16px -8px rgba(239, 68, 68, 0.4); }
.sl-status-item[data-status="degraded"]:hover { border-color: rgba(241, 96, 0, 0.4);  box-shadow: 0 4px 16px -8px rgba(241, 96, 0, 0.4); }

/* Divider sutil entre os 3 pills de servidor e o atalho pra /status/.
 * Mesma altura que os pills (30px) mas line vertical de 1px no meio. */
.sl-status-divider {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.1);
	flex-shrink: 0;
	align-self: center;
	margin: 0 0.15rem;
}

/* Atalho chevron-only pra /status/ — mesmo "molde" dos pills mas só com seta */
.sl-status-detail-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	width: 30px;
	box-sizing: border-box;
	padding: 0;
	background: rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
	text-decoration: none;
	transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, transform 0.25s ease;
	flex-shrink: 0;
}
.sl-status-detail-link:hover {
	border-color: rgba(45, 212, 191, 0.4);
	background: rgba(45, 212, 191, 0.08);
	color: var(--sl-teal, #2dd4bf);
	transform: translateX(2px);
}
.sl-status-detail-link:focus-visible {
	outline: 2px solid rgba(45, 212, 191, 0.5);
	outline-offset: 2px;
}

/* Shimmer one-shot — varredura de luz cobrindo o item inteiro
 * (ponto · nome · porcentagem) quando o JS atualiza o valor. */
.sl-status-item.is-updated::after {
	content: '';
	position: absolute;
	inset: -2px -6px; /* leve overflow lateral pra entrada/saída suaves */
	background: linear-gradient(
		100deg,
		transparent 0%,
		transparent 30%,
		rgba(255, 255, 255, 0.18) 45%,
		rgba(255, 255, 255, 0.36) 50%,
		rgba(255, 255, 255, 0.18) 55%,
		transparent 70%,
		transparent 100%
	);
	background-size: 250% 100%;
	background-repeat: no-repeat;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 1;
	border-radius: 6px;
	animation: sl-status-item-shine 1.2s ease-out forwards;
}
@keyframes sl-status-item-shine {
	from { background-position: 150% 0; }
	to   { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-status-item.is-updated::after { animation: none; opacity: 0; }
}
.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;
	position: relative;
	--sl-radar-color: var(--sl-teal);
}
/* Radar pulse — 2 anéis concêntricos expandindo em loop, 1.2s defasados.
 * Substitui o pulse simples de opacity por um efeito mais rico de "ping". */
.sl-status-dot::before,
.sl-status-dot::after {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	border: 1.5px solid var(--sl-radar-color);
	opacity: 0;
	pointer-events: none;
	animation: sl-status-radar 2.4s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}
.sl-status-dot::after { animation-delay: 1.2s; }
@keyframes sl-status-radar {
	0%   { transform: scale(0.6); opacity: 0; }
	15%  { opacity: 0.65; }
	100% { transform: scale(3.2); opacity: 0; }
}
.sl-status-item[data-status="down"] .sl-status-dot     { background: var(--sl-danger);  box-shadow: 0 0 8px var(--sl-danger); --sl-radar-color: 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); --sl-radar-color: var(--sl-brand-3); }
@media (prefers-reduced-motion: reduce) {
	.sl-status-dot::before, .sl-status-dot::after { animation: none; display: none; }
}
.sl-status-name {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-status-value {
	color: var(--sl-teal);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	display: inline-block;
}

/* Mini sparkline — micro-chart inline mostrando últimas N leituras de uptime.
 * Aparece à direita do valor, escondida até ter ≥ 2 pontos. */
.sl-status-spark {
	width: 36px;
	height: 12px;
	color: var(--sl-teal);
	opacity: 0.55;
	overflow: visible;
	display: none; /* JS torna visible quando há ≥ 2 pontos */
	flex-shrink: 0;
	transition: opacity 0.25s ease;
}
.sl-status-item:hover .sl-status-spark { opacity: 0.85; }
.sl-status-spark polyline {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 2px currentColor);
}
.sl-status-item[data-status="down"] .sl-status-spark     { color: var(--sl-danger); }
.sl-status-item[data-status="degraded"] .sl-status-spark { color: var(--sl-brand-3); }

/* 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;
	gap: 0.6rem;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-2);
	letter-spacing: 0.05em;
}
/* Esconde spans vazios (dentro dos slots) */
.sl-rotator-slot > span:empty { display: none; }

/* Pills glassmorphism nos blocos da direita — MESMA altura mínima dos servidores
 * (30px enforçada via min-height) pra alinhamento perfeito em toda a status bar. */
.sl-status-geo-rotator,
.sl-status-geo-time {
	min-height: 30px;
	box-sizing: border-box;
	padding: 0 14px;
	background: rgba(255, 255, 255, 0.035);
	backdrop-filter: blur(10px) saturate(140%);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.sl-status-geo-rotator:hover,
.sl-status-geo-time:hover {
	border-color: rgba(45, 212, 191, 0.35);
	background: rgba(45, 212, 191, 0.06);
	box-shadow: 0 4px 16px -8px rgba(45, 212, 191, 0.4);
}

.sl-status-geo-location {
	color: var(--sl-text);
	font-weight: 500;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}
/* Slot inteiro (cidade + clima) é clicável — abre o weather modal */
.sl-rotator-slot[data-slot="geo"] {
	cursor: pointer;
}
.sl-rotator-slot[data-slot="geo"]:hover .sl-status-geo-location {
	color: var(--sl-teal);
	text-shadow: 0 0 8px rgba(45, 212, 191, 0.4);
}
.sl-rotator-slot[data-slot="geo"]:hover .sl-status-geo-weather {
	filter: brightness(1.15);
}
.sl-rotator-slot[data-slot="geo"]:focus-visible {
	outline: 2px solid rgba(45, 212, 191, 0.5);
	outline-offset: 4px;
	border-radius: 4px;
}
.sl-status-geo-weather {
	color: var(--sl-teal);
	display: inline-flex;
	align-items: center;
	gap: 0.05rem; /* ícone bem colado no valor */
}
.sl-status-geo-weather .sl-wx-icon { font-size: 0.75rem; line-height: 1; }
.sl-status-geo-weather .sl-wx-temp { font-variant-numeric: tabular-nums; }

/* Rotator: slots empilhados (CSS grid), só o ativo visível — push vertical
 * estilo splitflap/scoreboard. Slot ativo tá no centro; quando o rotator
 * troca, o slot atual é empurrado pra cima e some, o novo entra de baixo.
 * Overflow hidden no container clipa os slots saindo. */
.sl-status-geo-rotator {
	display: inline-grid;
	align-items: center;
	overflow: hidden; /* clipa o slot saindo pra cima/entrando de baixo */
}
.sl-rotator-slot {
	grid-area: 1 / 1;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem; /* espaço entre cidade-estado e clima */
	height: 100%; /* preenche a altura do pill (30px) pra translateY(100%) cobrir total */
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
}
.sl-rotator-slot--active {
	opacity: 1;
	pointer-events: auto;
}
/* --entering só é adicionado pelo JS quando o slot REALMENTE está virando ativo
 * (rotator tick), nunca no estado inicial. Sem isso, o page load fazia o slot
 * "entrar de baixo" toda vez — exatamente o que o usuário queria evitar. */
.sl-rotator-slot--entering {
	animation: sl-rotator-push-in 0.34s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.sl-rotator-slot--leaving {
	opacity: 1; /* mantém visível durante o exit pra animação ser percebida */
	animation: sl-rotator-push-out 0.28s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	pointer-events: none;
}
@keyframes sl-rotator-push-in {
	from { transform: translateY(110%); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
@keyframes sl-rotator-push-out {
	from { transform: translateY(0);     opacity: 1; }
	to   { transform: translateY(-110%); opacity: 0; }
}

/* Live event ticker — slots de evento usam o mesmo rotator que geo/visitors,
 * mas com tipografia premium pra dar peso de "número que importa" (vibe
 * Bloomberg/Linear status). Cobre todos os slots com prefixo de evento. */
.sl-rotator-slot[data-slot="commands"],
.sl-rotator-slot[data-slot="velocidade"],
.sl-rotator-slot[data-slot="relatorios"],
.sl-rotator-slot[data-slot="ignicao_on"],
.sl-rotator-slot[data-slot="ignicao_off"],
.sl-rotator-slot[data-slot="violacoes_cerca"],
.sl-rotator-slot[data-slot="uptime"],
.sl-rotator-slot[data-slot="antena_off"] {
	color: var(--sl-text-2);
}
/* Slots de ALERTA (velocidade, antena GPS desconectada) — laranja brand pra
 * subverter expectativa visual e captar olhar. Operações rotineiras ficam
 * teal; coisas que precisam de atenção ficam laranja. Hierarquia clara. */
.sl-rotator-slot[data-slot="velocidade"] .sl-evt-num,
.sl-rotator-slot[data-slot="antena_off"] .sl-evt-num {
	color: var(--sl-brand);
}
.sl-rotator-slot[data-slot="velocidade"].sl-rotator-slot--active .sl-evt-num,
.sl-rotator-slot[data-slot="antena_off"].sl-rotator-slot--active .sl-evt-num {
	text-shadow: 0 0 12px rgba(var(--sl-brand-rgb), 0.4);
}
.sl-evt-icon {
	font-size: 0.85rem;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	margin-right: 0.05rem;
	filter: saturate(1.2);
}
.sl-evt-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
	white-space: nowrap;
}
.sl-evt-num {
	color: var(--sl-teal);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Sutilíssimo glow no número quando o slot tá em cena — reforça a sensação
 * "live data" sem chamar atenção excessiva. */
.sl-rotator-slot--active .sl-evt-num {
	text-shadow: 0 0 12px rgba(45, 212, 191, 0.35);
}
@media (prefers-reduced-motion: reduce) {
	.sl-rotator-slot--entering,
	.sl-rotator-slot--leaving { animation: none; }
	.sl-rotator-slot--leaving { opacity: 0; }
}

/* Contador de visitantes online */
.sl-status-online {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem; /* gap entre ícone e número — mesmo valor do server pill */
	color: var(--sl-text);
}
.sl-status-online-icon {
	display: inline-flex;
	align-items: center;
	color: var(--sl-teal);
	opacity: 0.9;
	position: relative;
}
/* Reduz o ícone pra proporção mais próxima do dot dos servers (override do width/height inline) */
.sl-status-online-icon svg {
	display: block;
	position: relative;
	z-index: 1;
	width: 12px;
	height: 12px;
}
/* Pulse atrás do ícone — comunica "ao vivo" mesmo quando o número não muda */
.sl-status-online-icon::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1.5px solid var(--sl-teal);
	opacity: 0;
	pointer-events: none;
	animation: sl-online-radar 2.6s cubic-bezier(0.16, 0.84, 0.44, 1) infinite;
}
@keyframes sl-online-radar {
	0%   { transform: scale(0.7); opacity: 0; }
	18%  { opacity: 0.5; }
	100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-status-online-icon::after { animation: none; display: none; }
}
/* Link clicável do badge "X online agora" → /visitantes-online/.
 * Preenche o slot inteiro pra área toda do pill ser clicável. */
.sl-rotator-slot[data-slot="visitors"] .sl-status-online--link {
	width: 100%;
	height: 100%;
	align-items: center;
}
.sl-status-online--link {
	text-decoration: none;
	transition: color 0.2s;
}
.sl-status-online--link:hover {
	color: var(--sl-teal);
}
.sl-status-online-count {
	color: var(--sl-teal);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	display: inline-block;
	transition: transform 0.18s ease;
}
/* Bump animation — escala + flash branco quando contador muda (ex: 1 → 2 online) */
.sl-status-online-count.is-bumped {
	animation: sl-online-bump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sl-online-bump {
	0%   { transform: scale(1);   color: var(--sl-teal); }
	35%  { transform: scale(1.4); color: #fff; text-shadow: 0 0 8px var(--sl-teal); }
	100% { transform: scale(1);   color: var(--sl-teal); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-status-online-count.is-bumped { animation: none; }
}

/* Ícone sol/lua antes da hora */
.sl-status-geo-time {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem; /* mesmo gap interno do server pill (era 0.45rem) */
	color: var(--sl-text-2);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
}

/* Day/night SVG — sol com raios girando · lua com glow azulado · crossfade entre eles */
.sl-status-geo-daynight {
	display: inline-flex;
	width: 14px;
	height: 14px;
	position: relative;
	flex-shrink: 0;
}
.sl-status-geo-daynight svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.sl-day-sun  { color: #ffd166; opacity: 0; transform: scale(0.6) rotate(-45deg); }
.sl-day-moon { color: #c0d6f0; opacity: 0; transform: scale(0.6); }
.sl-status-geo-daynight[data-time="day"] .sl-day-sun {
	opacity: 1;
	transform: scale(1) rotate(0);
	filter: drop-shadow(0 0 3px rgba(255, 209, 102, 0.5));
}
.sl-status-geo-daynight[data-time="night"] .sl-day-moon {
	opacity: 1;
	transform: scale(1);
	filter: drop-shadow(0 0 4px rgba(192, 214, 240, 0.55));
}
/* Raios do sol giram lentamente — só o grupo .sl-sun-rays roda, o disco central fica parado */
.sl-day-sun .sl-sun-rays {
	transform-origin: 12px 12px;
	animation: sl-sun-rays-spin 28s linear infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
@keyframes sl-sun-rays-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-day-sun .sl-sun-rays { animation: none; }
	.sl-status-geo-daynight svg { transition: opacity 0.2s ease; }
}

/* Flip dos dígitos da hora — slide-fade quando o minuto muda */
.sl-status-geo-time-value {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
.sl-time-digit {
	display: inline-block;
	min-width: 0.62em;
	text-align: center;
	overflow: hidden;
	height: 1em;
	line-height: 1;
}
.sl-time-digit-current {
	display: inline-block;
}
.sl-time-digit.is-changed .sl-time-digit-current {
	animation: sl-time-flip 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sl-time-flip {
	0%   { transform: translateY(-100%); opacity: 0; }
	60%  { transform: translateY(10%);   opacity: 1; }
	100% { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-time-digit.is-changed .sl-time-digit-current { animation: none; }
}

@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 { display: none; }
}

/* ========================================================================
   HERO — card glass dark com accent bar laranja à esquerda
   ======================================================================== */
.sl-hero {
	padding: 5rem 0 6rem;
	position: relative;
	overflow: hidden;
}
/* Halo ambient pulsante atrás do card — radial brand orange dominante (esquerda,
 * acompanhando a accent bar aurora) + contra-glow teal sutil à direita pra
 * balanço de cor. Respiração lenta de 8s dá sensação de "vivo" sem distrair. */
.sl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(ellipse 50% 60% at 18% 50%, rgba(var(--sl-brand-rgb), 0.18), transparent 60%),
		radial-gradient(ellipse 35% 45% at 85% 55%, rgba(var(--sl-teal-rgb), 0.09), transparent 65%);
	filter: blur(40px);
	animation: sl-hero-halo-breathe 8s ease-in-out infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
.sl-hero > .sl-wrap { position: relative; z-index: 1; }
@keyframes sl-hero-halo-breathe {
	0%, 100% { opacity: 0.65; transform: scale(1); }
	50%      { opacity: 1;    transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-hero::before { animation: none; opacity: 0.7; }
}
.sl-hero-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
	align-items: center;
}
/* Desktop: 2 colunas — card à esquerda, mini-mapa à direita.
 * align-items: stretch pra mapa esticar até a altura do card. */
@media (min-width: 1024px) {
	.sl-hero-grid {
		grid-template-columns: minmax(0, 600px) 1fr;
		gap: 3rem;
		align-items: stretch;
	}
}

/* Mini-mapa do hero — Mapbox Static dark com 3 pins (servidores reais) */
.sl-hero-mini-map {
	position: relative;
	background: #0a0f1a;
	border: 1px solid rgba(45,212,191,0.18);
	border-radius: 18px;
	overflow: hidden;
	min-height: 380px;
	width: 100%;
	height: 100%;
}
@media (max-width: 1023px) {
	.sl-hero-mini-map { aspect-ratio: 2 / 1; height: auto; }
}
.sl-mm-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
	filter: saturate(0.9) brightness(0.95);
	transition: opacity 0.18s ease, filter 0.18s ease;
}
.sl-mm-bg.is-loading {
	opacity: 0.7;
	filter: saturate(0.7) brightness(0.85) blur(1px);
}
/* Feedback de loading nos botões de zoom enquanto o tile carrega */
.sl-hero-mini-map:has(.sl-mm-bg.is-loading) .sl-mm-zoom-btn {
	border-color: rgba(45, 212, 191, 0.45);
}
.sl-hero-mini-map.has-mapbox::after {
	/* Vinheta sutil pra escurecer bordas e dar contraste pros overlays nos cantos */
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 50%, rgba(8,8,12,0.45) 100%);
	pointer-events: none;
}
.sl-mm-fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	text-align: center;
	font-family: var(--sl-font-mono);
	color: rgba(255,255,255,0.55);
	padding: 1.5rem;
}
.sl-mm-fallback strong {
	display: block;
	font-size: 13px;
	color: var(--sl-brand);
	margin-bottom: 6px;
	letter-spacing: 0.04em;
}
.sl-mm-fallback span {
	font-size: 10.5px;
	line-height: 1.5;
}
/* Trajeto pontilhado animado — pequena animação dash-flow */
.sl-mm-route {
	animation: sl-mm-route-flow 2s linear infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
@keyframes sl-mm-route-flow {
	from { stroke-dashoffset: 0; }
	to   { stroke-dashoffset: -40; }
}

/* Markers — container 36x36 com ::before (pulse) + ::after (dot sólido) */
.sl-mm-marker {
	position: absolute;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	z-index: 5;
}
/* Anel de pulse expandindo */
.sl-mm-marker::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 2px solid currentColor;
	opacity: 0.4;
	animation: sl-mm-pulse 2s ease-out infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
/* Dot central sólido com glow */
.sl-mm-marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	margin-left: -7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 12px currentColor;
}
.sl-mm-marker--teal  { color: var(--sl-teal); }
.sl-mm-marker--brand { color: var(--sl-brand); }
/* Stagger dos pulses pra não pulsarem todos juntos */
.sl-mm-marker:nth-child(2)::before { animation-delay: calc(var(--sl-anim-clock, 0ms) * -1 + 0.6s); }
.sl-mm-marker:nth-child(3)::before { animation-delay: calc(var(--sl-anim-clock, 0ms) * -1 + 1.2s); }

@keyframes sl-mm-pulse {
	0%   { transform: scale(0.6); opacity: 0.65; }
	100% { transform: scale(2);   opacity: 0;    }
}

/* Coordenadas decorativas nos cantos do mini-mapa */
.sl-mm-coord {
	position: absolute;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}
.sl-mm-coord--tl { top: 14px;    left: 14px;  }
.sl-mm-coord--bl { bottom: 14px; left: 14px;  }
.sl-mm-coord--br { bottom: 14px; right: 14px; color: var(--sl-teal); }
.sl-mm-coord-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 6px rgba(45, 212, 191, 0.8);
	animation: sl-mm-status-pulse 1.6s ease-in-out infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
@keyframes sl-mm-status-pulse {
	0%, 100% { opacity: 1;   }
	50%      { opacity: 0.4; }
}

/* Compass rose — top-right */
.sl-mm-compass {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	color: rgba(255, 255, 255, 0.7);
	z-index: 6;
	pointer-events: none;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85));
}

/* Camadas do mapa — botão único + menu dropdown vertical (estilo da plataforma
 * de rastreamento). Posicionado abaixo da compass. */
.sl-mm-provider {
	position: absolute;
	top: 60px;
	right: 12px;
	z-index: 7;
}
.sl-mm-provider-trigger {
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background: rgba(10, 15, 26, 0.92);
	border: 1px solid rgba(45, 212, 191, 0.25);
	color: rgba(255, 255, 255, 0.85);
	display: grid;
	place-items: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.55);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.sl-mm-provider-trigger:hover {
	background: rgba(45, 212, 191, 0.12);
	border-color: rgba(45, 212, 191, 0.5);
	color: var(--sl-teal);
}
.sl-mm-provider[data-open="true"] .sl-mm-provider-trigger {
	background: rgba(45, 212, 191, 0.15);
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}

/* Menu dropdown — escondido por default, expande no [data-open=true] */
.sl-mm-provider-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 140px;
	background: rgba(10, 15, 26, 0.96);
	border: 1px solid rgba(45, 212, 191, 0.25);
	border-radius: 10px;
	padding: 4px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 12px 28px rgba(0,0,0,0.6);
	display: flex;
	flex-direction: column;
	gap: 2px;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.sl-mm-provider[data-open="true"] .sl-mm-provider-menu {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.sl-mm-provider-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 8px 10px;
	border-radius: 7px;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
}
.sl-mm-provider-opt:hover {
	background: rgba(45, 212, 191, 0.1);
	color: #fff;
}
.sl-mm-provider-opt.is-active { color: #fff; }
.sl-mm-provider-radio {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	flex-shrink: 0;
	position: relative;
	transition: border-color 0.15s ease;
}
.sl-mm-provider-opt.is-active .sl-mm-provider-radio { border-color: var(--sl-teal); }
.sl-mm-provider-opt.is-active .sl-mm-provider-radio::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 6px rgba(45, 212, 191, 0.7);
}

/* Zoom +/- — fica abaixo do seletor de provider, mesmo estilo do trigger */
.sl-mm-zoom {
	position: absolute;
	top: 108px;
	right: 12px;
	z-index: 7;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sl-mm-zoom-btn {
	width: 38px;
	height: 32px;
	border-radius: 8px;
	background: rgba(10, 15, 26, 0.92);
	border: 1px solid rgba(45, 212, 191, 0.25);
	color: rgba(255, 255, 255, 0.85);
	display: grid;
	place-items: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.55);
	transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.sl-mm-zoom-btn:hover {
	background: rgba(45, 212, 191, 0.12);
	border-color: rgba(45, 212, 191, 0.5);
	color: var(--sl-teal);
}
.sl-mm-zoom-btn:active { transform: scale(0.94); }
.sl-mm-zoom-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ========================================================================
   PAINEL DE VEÍCULOS — lateral esquerda do mapa, com botão recolher/expandir
   estilo plataforma de rastreamento. Lista compacta de devices reais da API.
   ======================================================================== */
.sl-mm-vehicles {
	position: absolute;
	top: 12px;
	left: 12px;
	bottom: 12px;
	width: 220px;
	z-index: 7;
	background: rgba(10, 15, 26, 0.94);
	border: 1px solid rgba(45, 212, 191, 0.22);
	border-radius: 10px;
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Recolhido: só o botão visível */
.sl-mm-vehicles[data-open="false"] { width: 38px; }

/* Botão recolher/expandir — top-right do painel */
.sl-mm-vehicles-toggle {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 5px;
	background: rgba(45, 212, 191, 0.14);
	border: 1px solid rgba(45, 212, 191, 0.32);
	color: rgba(255, 255, 255, 0.9);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), background 0.18s ease;
}
.sl-mm-vehicles-toggle:hover { background: rgba(45, 212, 191, 0.22); }
.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle { transform: rotate(180deg); }

/* Conteúdo (header + lista) — fade out quando recolhido */
.sl-mm-vehicles-content {
	padding: 8px 8px 10px;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
	transition: opacity 0.18s ease;
	min-width: 200px;
}
.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-content {
	opacity: 0;
	pointer-events: none;
}
/* Scrollbar custom (só visível em hover/scroll) */
.sl-mm-vehicles-content::-webkit-scrollbar { width: 6px; }
.sl-mm-vehicles-content::-webkit-scrollbar-track { background: transparent; }
.sl-mm-vehicles-content::-webkit-scrollbar-thumb {
	background: rgba(45, 212, 191, 0.18);
	border-radius: 3px;
}

/* Header */
.sl-mm-vehicles-head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 2px 32px 9px 4px; /* margem direita pro toggle */
}
.sl-mm-vehicles-head-icon {
	display: inline-flex;
	color: var(--sl-teal);
	flex-shrink: 0;
}
.sl-mm-vehicles-head strong {
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: -0.01em;
	flex: 1;
}
.sl-mm-vehicles-count {
	background: rgba(45, 212, 191, 0.14);
	color: var(--sl-teal);
	border-radius: 999px;
	padding: 1px 6px;
	font-size: 8.5px;
	font-weight: 700;
	font-family: var(--sl-font-mono);
	letter-spacing: 0.04em;
}

/* Lista */
.sl-mm-vehicles-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.sl-mm-vehicle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
}
.sl-mm-vehicle:hover {
	background: rgba(45, 212, 191, 0.08);
	border-color: rgba(45, 212, 191, 0.2);
}
.sl-mm-vehicle:focus-visible {
	outline: 2px solid var(--sl-teal);
	outline-offset: 1px;
}
/* Veículo focado no mapa — borda + bg teal mais fortes pra dar feedback de
 * "esse é o que tá sendo seguido". Click novamente pra desfocar. */
.sl-mm-vehicle.is-focused {
	background: rgba(45, 212, 191, 0.16);
	border-color: var(--sl-teal);
	box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.4), 0 4px 12px rgba(45, 212, 191, 0.18);
}
.sl-mm-vehicle-info {
	flex: 1;
	min-width: 0;
}
.sl-mm-vehicle-name {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 9.5px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	margin-bottom: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-mm-vehicle-time {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 8px;
	color: rgba(255, 255, 255, 0.4);
	letter-spacing: 0.02em;
}
.sl-mm-vehicle-data {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.sl-mm-vehicle-speed {
	font-family: var(--sl-font-mono);
	font-size: 9px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.78);
	white-space: nowrap;
}
.sl-mm-vehicle-status {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}
.sl-mm-vehicle--moving .sl-mm-vehicle-status   { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
.sl-mm-vehicle--stopped .sl-mm-vehicle-status  { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.7); }
.sl-mm-vehicle--offline .sl-mm-vehicle-status  { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.7); }
.sl-mm-vehicle--blocked .sl-mm-vehicle-status  { background: #374151; box-shadow: 0 0 4px rgba(55, 65, 81, 0.7); }

/* Mobile/tablet: painel mais estreito */
@media (max-width: 768px) {
	.sl-mm-vehicles { width: 190px; }
	.sl-mm-vehicles-content { min-width: 170px; }
}
@media (max-width: 480px) {
	.sl-mm-vehicles { width: 170px; top: 8px; left: 8px; bottom: 8px; }
	.sl-mm-vehicles-content { min-width: 150px; padding: 6px; }
}
.sl-mm-compass svg { width: 100%; height: 100%; display: block; }

/* Legend — bottom-center, identifica os 3 pins do Mapbox por região */
.sl-mm-legend {
	position: absolute;
	bottom: 36px;
	left: 50%;
	transform: translateX(-50%);
	display: inline-flex;
	gap: 0.7rem;
	padding: 6px 12px;
	background: rgba(10, 15, 26, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 999px;
	z-index: 6;
	pointer-events: none;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.sl-mm-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.sl-mm-legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	box-shadow: 0 0 6px currentColor;
	flex-shrink: 0;
}
@media (max-width: 600px) {
	.sl-mm-legend {
		flex-direction: column;
		gap: 0.3rem;
		bottom: 12px;
		font-size: 0.58rem;
	}
}

/* Label sob cada marker — pill mono pequeno com bandeira SVG */
.sl-mm-label {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: rgba(10, 15, 26, 0.88);
	border: 1px solid rgba(45, 212, 191, 0.25);
	border-radius: 6px;
	padding: 3px 8px;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
/* Marker brand laranja: label com border laranja */
.sl-mm-marker--brand .sl-mm-label {
	border-color: rgba(241, 96, 0, 0.4);
	color: rgba(255, 200, 170, 0.95);
}

@media (prefers-reduced-motion: reduce) {
	.sl-mm-marker::before { animation: none; opacity: 0.3; }
	.sl-mm-route { animation: none; }
	.sl-mm-coord-dot { animation: none; }
}
.sl-hero-copy {
	display: flex;
	flex-direction: column;
	gap: 1.5rem; /* spacing único entre title/sub/ctas/stats — sem margins extras nos filhos */
	position: relative;
	max-width: 600px;
}

/* Card glass envolvendo a copy + accent bar laranja brand preenchendo
 * todo lado esquerdo. overflow:hidden faz a barra acompanhar os cantos
 * arredondados do card automaticamente. */
.sl-hero-card {
	background: linear-gradient(180deg, rgba(14,14,20,0.88) 0%, rgba(10,10,16,0.94) 100%);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	padding: 2.25rem 2.25rem 2.25rem 2.5rem;
	box-shadow:
		0 30px 60px -16px rgba(0,0,0,0.7),
		0 6px 14px -6px rgba(0,0,0,0.4),
		inset 0 1px 0 rgba(255,255,255,0.06);
	overflow: hidden;
}
.sl-hero-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	/* Aurora vertical — gradient multi-stop em variações da brand orange
	 * (transparente nas pontas pra fade, gold no meio, brand no centro),
	 * animado verticalmente. Bot→Top dá sensação de "fogo subindo".
	 * Espelha o conceito do .sl-status-aurora horizontal da topbar. */
	background: linear-gradient(180deg,
		rgba(var(--sl-brand-rgb), 0.4) 0%,
		var(--sl-brand-3) 20%,
		var(--sl-brand-2) 40%,
		var(--sl-brand) 50%,
		var(--sl-brand-2) 60%,
		var(--sl-brand-3) 80%,
		rgba(var(--sl-brand-rgb), 0.4) 100%
	);
	background-size: 100% 220%;
	box-shadow: 0 0 22px rgba(var(--sl-brand-rgb), 0.6);
	animation: sl-hero-aurora-vert 6s linear infinite;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
@keyframes sl-hero-aurora-vert {
	from { background-position: 0% 220%; }
	to   { background-position: 0% -220%; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-hero-card::before { animation: none; background-position: 0% 0%; }
}
/* Tipografia compacta dentro do card — título e subtítulo menores */
.sl-hero-card .sl-hero-title {
	font-size: clamp(2rem, 4.2vw, 3rem);
}
.sl-hero-card .sl-hero-sub {
	font-size: 1rem;
	max-width: 460px;
}

.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;
}
/* Stats — 3 colunas, max-width pra ficarem alinhadas com a largura do título.
 * Quando soltas (sem hero-card), ganham card próprio glass.
 * Quando dentro de hero-card, viram seção flat com border-top sutil. */
.sl-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 520px;
	padding: 1.4rem 1.75rem;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	box-shadow:
		0 24px 60px -16px rgba(0,0,0,0.5),
		inset 0 1px 0 rgba(255,255,255,0.05);
}
.sl-hero-card .sl-hero-stats {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: none;
	border-top: 1px solid rgba(255,255,255,0.08);
	border-radius: 0;
	box-shadow: none;
	padding: 1.5rem 0 0 0;
}
.sl-stat-n {
	font-family: var(--sl-font-display);
	font-size: clamp(1.4rem, 2.2vw, 1.75rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--sl-text);
}
.sl-stat-l {
	font-family: var(--sl-font-mono);
	font-size: 0.66rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}
/* 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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
	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); }

/* ========================================================================
   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-doclink {
	color: var(--sl-teal, #2dd4bf);
	text-decoration: none;
	border-bottom: 1px dashed rgba(45,212,191,0.4);
	transition: border-color 0.2s, color 0.2s;
}
.sl-api-hero-doclink:hover {
	color: var(--sl-teal, #2dd4bf);
	border-bottom-color: rgba(45,212,191,0.9);
}

/* Nota de autenticação no painel de request — explica que API usa query param */
.sl-api-auth-note {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.65rem 0.85rem;
	margin: 0.75rem 0;
	background: rgba(45,212,191,0.06);
	border: 1px solid rgba(45,212,191,0.18);
	border-radius: 8px;
	color: var(--sl-text-2, rgba(250,250,252,0.72));
	font-size: 0.8rem;
	line-height: 1.45;
}
.sl-api-auth-note svg { color: var(--sl-teal, #2dd4bf); flex-shrink: 0; margin-top: 0.15em; }
.sl-api-auth-note code {
	background: rgba(0,0,0,0.3);
	padding: 0.05em 0.35em;
	border-radius: 3px;
	font-size: 0.85em;
	color: var(--sl-teal, #2dd4bf);
}
.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 */
/* Filtros por categoria — barra acima do picker de endpoints */
.sl-api-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}
.sl-api-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 999px;
	font-family: var(--sl-font, system-ui, sans-serif);
	font-size: 0.75rem;
	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-filter:hover {
	border-color: rgba(45,212,191,0.35);
	color: var(--sl-text, #fafafc);
}
.sl-api-filter.is-active {
	border-color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.1);
	color: var(--sl-teal, #2dd4bf);
}
.sl-api-filter-count {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	background: rgba(255,255,255,0.06);
	padding: 0.05em 0.45em;
	border-radius: 999px;
	color: inherit;
	opacity: 0.75;
}
.sl-api-filter.is-active .sl-api-filter-count {
	background: rgba(45,212,191,0.18);
	opacity: 1;
}

.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;
	position: relative;
}
/* Trunca payloads longos por default (~26 linhas em font-size 0.8rem · line-height 1.55) */
.sl-api-resp-body .sl-api-resp-pre {
	max-height: 360px;
	overflow: hidden;
	transition: max-height 0.3s ease;
}
.sl-api-resp-body.is-expanded .sl-api-resp-pre {
	max-height: none;
}
/* Fade no fundo + botão "Mostrar tudo" — só visíveis quando há overflow */
.sl-api-resp-body:has(.sl-api-resp-expand:not([hidden]))::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 80px;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.92));
	pointer-events: none;
	border-radius: 0 0 10px 10px;
}
.sl-api-resp-body.is-expanded::after { display: none; }
.sl-api-resp-expand {
	position: absolute;
	left: 50%;
	bottom: 0.4rem;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.85rem;
	background: var(--sl-teal, #2dd4bf);
	color: #0a0a0f;
	border: none;
	border-radius: 999px;
	font-family: var(--sl-font, system-ui, sans-serif);
	font-size: 0.72rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.sl-api-resp-expand:hover {
	background: var(--sl-lime, #c4ff3e);
	transform: translateX(-50%) translateY(-1px);
}

.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; }
}
/* Limites do plano — painel estático informativo (substituiu rate-limit fake) */
.sl-api-limits {
	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-limits-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
}
@media (max-width: 480px) { .sl-api-limits-list { grid-template-columns: 1fr; } }
.sl-api-limits-list li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: 0.65rem 0.75rem;
	background: rgba(0,0,0,0.18);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 10px;
}
.sl-api-limits-icon {
	color: var(--sl-teal, #2dd4bf);
	display: inline-flex;
}
.sl-api-limits-list strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 1.4rem;
	color: var(--sl-text, #fafafc);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sl-api-limits-list li > span:last-child {
	font-size: 0.7rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-api-limits-note {
	margin: 0.85rem 0 0;
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	line-height: 1.45;
}
.sl-api-limits-note code {
	background: rgba(0,0,0,0.3);
	padding: 0.05em 0.35em;
	border-radius: 3px;
	font-size: 0.85em;
	color: var(--sl-teal, #2dd4bf);
}

.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é */
	min-width: 240px;
	max-width: 300px;
	width: max-content;
	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 1.5rem 0.9rem 1rem; /* +0.5rem direita pra livrar o X */
	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-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;
	}
}

.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;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.sl-cmd-label-icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: rgba(var(--sl-brand-rgb), 0.14);
	color: var(--sl-brand-3, var(--sl-brand));
	flex-shrink: 0;
}

/* Badge "⚠ Crítico" — comandos que alteram o rastreador (RELAY, FACTORY) */
.sl-cmd-critical-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: rgba(255, 179, 71, 0.14);
	border: 1px solid rgba(255, 179, 71, 0.45);
	border-radius: 3px;
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	font-weight: 700;
	color: #ffb347;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Comando crítico — destaque sutil na borda */
.sl-cmd--critical {
	border-color: rgba(255, 179, 71, 0.35) !important;
	background: linear-gradient(180deg, rgba(255, 179, 71, 0.03), transparent) !important;
	position: relative;
}
.sl-cmd--critical::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: #ffb347;
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

/* Badge "✓ Seguro" — comandos reversíveis/recuperação (RELAY,0#, formatar GPS, etc) */
.sl-cmd-safe-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: rgba(45, 212, 191, 0.12);
	border: 1px solid rgba(45, 212, 191, 0.45);
	border-radius: 3px;
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--sl-teal);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}

/* Comando seguro — destaque sutil teal na borda esquerda */
.sl-cmd--safe {
	border-color: rgba(45, 212, 191, 0.3) !important;
	background: linear-gradient(180deg, rgba(45, 212, 191, 0.03), transparent) !important;
	position: relative;
}
.sl-cmd--safe::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: var(--sl-teal);
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

/* Badge "⭐ Obrigatório" — comandos essenciais pra ativar/configurar o rastreador */
.sl-cmd-required-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-left: 0.5rem;
	padding: 0.15rem 0.45rem;
	background: rgba(196, 255, 62, 0.12);
	border: 1px solid rgba(196, 255, 62, 0.45);
	border-radius: 3px;
	font-family: var(--sl-font-mono);
	font-size: 0.6rem;
	font-weight: 700;
	color: var(--sl-lime, #c4ff3e);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.4;
}
.sl-cmd-required-badge svg {
	filter: drop-shadow(0 0 3px rgba(196, 255, 62, 0.5));
}

/* Comando obrigatório — destaque sutil lime na borda esquerda */
.sl-cmd--required {
	border-color: rgba(196, 255, 62, 0.3) !important;
	background: linear-gradient(180deg, rgba(196, 255, 62, 0.03), transparent) !important;
	position: relative;
}
.sl-cmd--required::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 100%;
	background: var(--sl-lime, #c4ff3e);
	border-top-left-radius: inherit;
	border-bottom-left-radius: inherit;
}

.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;
}

/* Sub-menu "Ver outras X opções" (collapse do [sl_cmd_list]) */
.sl-cmdlist-more {
	margin-top: 0.75rem;
	border-top: 1px dashed var(--sl-line);
	padding-top: 0.75rem;
}
.sl-cmdlist-more-summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.9rem;
	background: rgba(var(--sl-brand-rgb), 0.08);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.25);
	border-radius: 8px;
	font-family: var(--sl-font-body, inherit);
	font-size: 0.85rem;
	color: var(--sl-brand-3, var(--sl-brand));
	font-weight: 600;
	user-select: none;
	transition: all 0.2s var(--sl-ease);
}
.sl-cmdlist-more-summary::-webkit-details-marker { display: none; }
.sl-cmdlist-more-summary:hover {
	background: rgba(var(--sl-brand-rgb), 0.14);
	border-color: rgba(var(--sl-brand-rgb), 0.4);
	transform: translateY(-1px);
}
.sl-cmdlist-more-summary:focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 2px;
}
.sl-cmdlist-more-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s var(--sl-ease);
}
.sl-cmdlist-more[open] .sl-cmdlist-more-icon {
	transform: rotate(180deg);
}
.sl-cmdlist-more[open] .sl-cmdlist-more-text strong {
	opacity: 0.6;
}
.sl-cmdlist-more-body {
	margin-top: 0.75rem;
	padding-top: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	animation: sl-cmdlist-more-in 0.3s ease-out;
}
@keyframes sl-cmdlist-more-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.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;
	animation-delay: calc(var(--sl-anim-clock, 0ms) * -1);
}

/* 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 + v2.45.15 (Fase 1 SEO) ======= */

/* Breadcrumb nav (single-marca) */
.sl-cfg-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--sl-font-mono);
	font-size: 0.8rem;
	color: var(--sl-text-3);
}
.sl-cfg-breadcrumb a {
	color: var(--sl-text-2);
	text-decoration: none;
	transition: color 0.2s;
}
.sl-cfg-breadcrumb a:hover {
	color: var(--sl-teal, #26c6a3);
	text-decoration: underline;
}
.sl-cfg-breadcrumb [aria-current="page"] {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-cfg-breadcrumb-sep {
	color: var(--sl-line-hi);
	user-select: none;
}

/* Hero da página single-marca */
.sl-single-marca-hero {
	padding: 3rem 0 2rem;
	position: relative;
}
.sl-single-marca-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 30% 40%, color-mix(in srgb, var(--brand-c, #f16000) 8%, transparent), transparent 60%);
	pointer-events: none;
	z-index: 0;
}
.sl-single-marca-hero > * { position: relative; z-index: 1; }
.sl-single-marca-hero-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: center;
}
.sl-single-marca-hero-body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: flex-start;
}
.sl-single-marca-stats {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 1rem 0;
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
	width: 100%;
}
.sl-single-marca-stat strong {
	display: block;
	font-family: var(--sl-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--sl-text);
}
.sl-single-marca-stat span {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 0.64rem;
	color: var(--sl-text-3);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 0.4rem;
}
.sl-single-marca-hero-ctas {
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	margin-top: 0.5rem;
}
.sl-single-marca-hero-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}
.sl-single-marca-thumb {
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--brand-c, #f16000) 30%, transparent);
}
.sl-single-marca-mark {
	width: 240px;
	height: 240px;
	display: grid;
	place-items: center;
	border-radius: 20px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c, #f16000) 22%, transparent), color-mix(in srgb, var(--brand-c, #f16000) 4%, transparent));
	border: 1px solid color-mix(in srgb, var(--brand-c, #f16000) 35%, transparent);
	color: var(--brand-c, #f16000);
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 5rem;
	letter-spacing: -0.04em;
	box-shadow: 0 20px 60px -20px color-mix(in srgb, var(--brand-c, #f16000) 30%, transparent);
}
@media (max-width: 900px) {
	.sl-single-marca-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
	.sl-single-marca-hero-visual { order: -1; min-height: auto; }
	.sl-single-marca-mark { width: 160px; height: 160px; font-size: 3.2rem; }
}

/* Body do single-marca */
.sl-single-marca-content {
	/* Sem max-width próprio — usa o 1320px do .sl-wrap pra aproveitar largura total */
}

/* ============================================================
   Proteção anti-cópia (body.sl-protected)
   Aplica em: single-marca, /configuracoes/, /fabricante/<slug>/
   Admin WP logado NÃO tem essa classe — trabalha normal.
   ============================================================ */

body.sl-protected {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Exceção: comandos SMS + inputs + textareas continuam copiáveis/editáveis */
body.sl-protected .sl-cmd-code,
body.sl-protected .sl-cmdlist-code,
body.sl-protected code,
body.sl-protected pre,
body.sl-protected input,
body.sl-protected textarea {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

/* Bloqueia drag de imagens */
body.sl-protected img {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	pointer-events: auto;
}

/* Selection visual customizada nas áreas copiáveis */
body.sl-protected .sl-cmd-code::selection,
body.sl-protected .sl-cmdlist-code::selection,
body.sl-protected code::selection {
	background: rgba(241, 96, 0, 0.35);
	color: #ffd4b0;
}

/* Toast de aviso quando tenta copiar */
.sl-anti-copy-toast {
	position: fixed;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	padding: 0.9rem 1.4rem;
	background: linear-gradient(135deg, #f16000, #ff7a1a);
	color: #fff;
	border-radius: 10px;
	font-family: var(--sl-font-body, sans-serif);
	font-size: 0.92rem;
	font-weight: 600;
	box-shadow: 0 15px 40px -10px rgba(241, 96, 0, 0.4);
	z-index: 99999;
	opacity: 0;
	transition: all 0.35s var(--sl-ease);
	pointer-events: none;
	max-width: 90vw;
	text-align: center;
}
.sl-anti-copy-toast.is-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Destaques de texto (<mark> + shortcodes)
   Usado pra chamar atenção em valores importantes dentro de guias.
   ============================================================ */

/* <mark> nativo do HTML — estilo padrão (amarelo/laranja marca) */
mark,
.sl-mark {
	display: inline-block;
	padding: 0.05em 0.45em;
	background: linear-gradient(120deg, rgba(255, 179, 71, 0.22), rgba(241, 96, 0, 0.18));
	border: 1px solid rgba(255, 179, 71, 0.35);
	border-radius: 4px;
	color: #ffb347;
	font-weight: 700;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.95em;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Variantes por cor */
.sl-mark--yellow { background: linear-gradient(120deg, rgba(255, 179, 71, 0.22), rgba(241, 96, 0, 0.18)); border-color: rgba(255, 179, 71, 0.35); color: #ffb347; }
.sl-mark--teal   { background: linear-gradient(120deg, rgba(38, 198, 163, 0.2), rgba(45, 212, 191, 0.15));  border-color: rgba(38, 198, 163, 0.4);  color: #26c6a3; }
.sl-mark--green  { background: linear-gradient(120deg, rgba(196, 255, 62, 0.18), rgba(163, 230, 53, 0.12)); border-color: rgba(196, 255, 62, 0.35); color: #c4ff3e; }
.sl-mark--red    { background: linear-gradient(120deg, rgba(255, 64, 96, 0.18), rgba(239, 68, 68, 0.12));   border-color: rgba(255, 64, 96, 0.4);   color: #ff6b82; }
.sl-mark--blue   { background: linear-gradient(120deg, rgba(45, 212, 191, 0.18), rgba(34, 211, 238, 0.12)); border-color: rgba(34, 211, 238, 0.4);  color: #67e8f9; }
.sl-mark--purple { background: linear-gradient(120deg, rgba(167, 139, 250, 0.18), rgba(192, 132, 252, 0.12));border-color: rgba(167, 139, 250, 0.4); color: #c4b5fd; }

/* Body de texto corrido com largura confortável de leitura (máx ~75 chars/linha) */
.sl-single-marca-body {
	max-width: 980px;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--sl-text-2);
}
.sl-single-marca-body h2 {
	font-family: var(--sl-font-display);
	font-size: clamp(1.4rem, 2.8vw, 1.8rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 2.5rem 0 1rem;
}
.sl-single-marca-body h3 {
	font-family: var(--sl-font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.35rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 2rem 0 0.75rem;
}
.sl-single-marca-body p { margin: 0.75rem 0; }
.sl-single-marca-body ul, .sl-single-marca-body ol {
	padding-left: 1.5rem;
	margin: 0.75rem 0;
}
.sl-single-marca-body li { margin: 0.4rem 0; }

.sl-single-marca-upsell { margin-top: 2.5rem; }

/* Variante laranja pro Upsell (chama atenção) */
.sl-cfg-upsell.sl-cfg-upsell--warning {
	background: linear-gradient(135deg, rgba(241,96,0,0.08), rgba(255,179,71,0.04));
	border-color: rgba(241,96,0,0.3);
}
.sl-cfg-upsell.sl-cfg-upsell--warning .sl-cfg-upsell-icon {
	background: rgba(241,96,0,0.15);
}

/* Variante roxa pro FAQs */
.sl-single-marca-inherited.sl-single-marca-inherited--faqs {
	background: rgba(167, 139, 250, 0.04);
	border-color: rgba(167, 139, 250, 0.2);
}
.sl-single-marca-inherited.sl-single-marca-inherited--faqs::before {
	background: linear-gradient(180deg, #a78bfa, transparent);
}
.sl-single-marca-inherited.sl-single-marca-inherited--faqs .sl-single-marca-inherited-badge {
	background: rgba(167, 139, 250, 0.14);
	border-color: rgba(167, 139, 250, 0.35);
	color: #c4b5fd;
}

/* Rodapé editorial (validado + atualizado) */
.sl-single-marca-editorial {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1.5rem 0;
	padding: 0.75rem 1.1rem;
	background: rgba(38, 198, 163, 0.05);
	border: 1px dashed rgba(38, 198, 163, 0.25);
	border-radius: 8px;
	font-family: var(--sl-font-mono);
	font-size: 0.78rem;
	color: var(--sl-text-2);
	line-height: 1.5;
}
.sl-single-marca-editorial svg {
	flex-shrink: 0;
	color: var(--sl-teal, #26c6a3);
}
.sl-single-marca-editorial strong {
	color: var(--sl-text);
	font-weight: 700;
}

/* Ícone SVG no mark (quando não tem thumbnail) — preenche bem o quadrado de 240px */
.sl-single-marca-mark-icon {
	width: 160px;
	height: 160px;
}
@media (max-width: 600px) {
	.sl-single-marca-mark-icon { width: 110px; height: 110px; }
}
.sl-single-marca-mark-label {
	display: none; /* removido: ficava redundante com o título do post */
	font-family: var(--sl-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: 0.3rem;
	letter-spacing: 0.02em;
	opacity: 0.85;
}

/* Grid com Share + Feedback lado a lado no rodapé */
.sl-single-marca-bottom-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	align-items: stretch;
}
@media (max-width: 700px) {
	.sl-single-marca-bottom-grid { grid-template-columns: 1fr; }
}
.sl-single-marca-bottom-grid > aside { margin: 0 !important; }

/* Share com 3 botões inline (formato enxuto) */
.sl-single-marca-share {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, rgba(38,198,163,0.05), rgba(241,96,0,0.03));
	border: 1px solid rgba(38,198,163,0.2);
	border-radius: 12px;
}
.sl-single-marca-share .sl-single-marca-share-actions {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.sl-single-marca-share .sl-share-btn {
	flex: 1;
	min-width: 90px;
	justify-content: center;
	padding: 0.5rem 0.8rem;
	font-size: 0.82rem;
}

/* FAB "Voltar ao topo" (flutuante) — empilhado acima do WhatsApp + Ticker */
.sl-back-to-top {
	position: fixed;
	/* Ticker (~95px) + WhatsApp (56px) + 2 gaps (24px) = ~187px */
	bottom: calc(1.25rem + 95px + 12px + 56px + 12px);
	right: 1.5rem;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sl-brand);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 10px 25px -5px rgba(241,96,0,0.4);
	z-index: 9998;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.3s var(--sl-ease);
}
.sl-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.sl-back-to-top:hover {
	transform: translateY(-3px);
	box-shadow: 0 15px 35px -5px rgba(241,96,0,0.6);
}
@media (max-width: 600px) {
	.sl-back-to-top {
		bottom: calc(1rem + 95px + 10px);
		right: 1rem;
		width: 42px;
		height: 42px;
	}
}

/* Stats do hero em mobile (< 400px) — 1 coluna */
@media (max-width: 400px) {
	.sl-single-marca-stats {
		grid-template-columns: 1fr !important;
		gap: 0.6rem;
	}
	.sl-single-marca-stats > div {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--sl-line);
	}
	.sl-single-marca-stats > div:last-child {
		border-bottom: 0;
	}
}
.sl-single-marca-feedback { margin-top: 1rem; }

/* Bloco de compartilhamento (fim da página) */
.sl-single-marca-share {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1.25rem;
	padding: 1.25rem 1.5rem;
	margin-bottom: 1rem;
	background: linear-gradient(135deg, rgba(38,198,163,0.05), rgba(241,96,0,0.03));
	border: 1px solid rgba(38,198,163,0.2);
	border-radius: 12px;
}
.sl-single-marca-share-info {
	flex: 1 1 auto;
	min-width: 200px;
}
.sl-single-marca-share-info strong {
	display: block;
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--sl-text);
	margin-bottom: 0.2rem;
}
.sl-single-marca-share-info span {
	display: block;
	color: var(--sl-text-2);
	font-size: 0.88rem;
	line-height: 1.5;
}
.sl-single-marca-share-actions {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}
.sl-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.95rem;
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 8px;
	border: 1px solid var(--sl-line);
	background: rgba(255,255,255,0.04);
	color: var(--sl-text-2);
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s var(--sl-ease);
	font-family: inherit;
}
.sl-share-btn:hover {
	transform: translateY(-1px);
	background: rgba(255,255,255,0.08);
}
.sl-share-btn:focus-visible {
	outline: 2px solid var(--sl-brand);
	outline-offset: 2px;
}
.sl-share-btn--wa {
	border-color: rgba(37, 211, 102, 0.35);
	color: #25d366;
}
.sl-share-btn--wa:hover {
	background: rgba(37, 211, 102, 0.12);
	border-color: #25d366;
}
.sl-share-btn--copy {
	border-color: rgba(38, 198, 163, 0.3);
	color: var(--sl-teal, #26c6a3);
}
.sl-share-btn--copy:hover {
	background: rgba(38, 198, 163, 0.1);
	border-color: var(--sl-teal, #26c6a3);
}
.sl-share-btn--copy .sl-share-icon--ok { display: none; }
.sl-share-btn--copy.is-copied .sl-share-icon--default { display: none; }
.sl-share-btn--copy.is-copied .sl-share-icon--ok { display: inline-flex; }
.sl-share-btn--copy.is-copied {
	background: rgba(38, 198, 163, 0.15);
	border-color: var(--sl-teal, #26c6a3);
	color: var(--sl-teal, #26c6a3);
}
.sl-share-btn--native {
	border-color: rgba(var(--sl-brand-rgb), 0.3);
	color: var(--sl-brand-3, var(--sl-brand));
}
.sl-share-btn--native:hover {
	background: rgba(var(--sl-brand-rgb), 0.1);
	border-color: var(--sl-brand);
}
@media (max-width: 600px) {
	.sl-single-marca-share {
		flex-direction: column;
		align-items: flex-start;
		padding: 1rem 1.1rem;
	}
	.sl-single-marca-share-actions {
		width: 100%;
	}
	.sl-share-btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}

.sl-single-marca-nav {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-line);
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	justify-content: space-between;
}

/* Shortcode [sl_faq] — accordion de perguntas frequentes */
.sl-faq-item {
	background: rgba(22,22,32,0.5);
	border: 1px solid var(--sl-line);
	border-radius: 10px;
	margin: 0.75rem 0;
	overflow: hidden;
	transition: border-color 0.3s;
}
.sl-faq-item[open] {
	border-color: rgba(38,198,163,0.35);
	background: rgba(22,22,32,0.75);
}
.sl-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	user-select: none;
}
.sl-faq-item summary::-webkit-details-marker { display: none; }
.sl-faq-item-q {
	font-weight: 600;
	color: var(--sl-text);
	font-size: 0.98rem;
	line-height: 1.4;
	flex: 1;
}
.sl-faq-item-icon {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--sl-line-hi);
	display: grid;
	place-items: center;
	color: var(--sl-text-2);
	font-size: 1rem;
	transition: transform 0.3s var(--sl-ease), background 0.3s, border-color 0.3s, color 0.3s;
	flex-shrink: 0;
}
.sl-faq-item[open] .sl-faq-item-icon {
	transform: rotate(45deg);
	background: var(--sl-teal, #26c6a3);
	border-color: var(--sl-teal, #26c6a3);
	color: #000;
}
.sl-faq-item-a {
	padding: 0 1.2rem 1.2rem;
	color: var(--sl-text-2);
	font-size: 0.92rem;
	line-height: 1.6;
	border-top: 1px solid var(--sl-line);
	padding-top: 1rem;
}
.sl-faq-item-a p:first-child { margin-top: 0; }
.sl-faq-item-a p:last-child { margin-bottom: 0; }

/* ============================================================
   Comandos estruturados: section → steps numerados → callout
   ============================================================ */

/* Seção (obrigatórios / especiais) */
.sl-cmd-section {
	margin: 2rem 0;
}
.sl-cmd-section + .sl-cmd-section { margin-top: 3rem; }
.sl-cmd-section-head {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--sl-line);
}
.sl-cmd-section-badge {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	background: rgba(var(--sl-brand-rgb), 0.14);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.4);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--sl-brand-3, var(--sl-brand));
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.sl-cmd-section--especiais .sl-cmd-section-badge {
	background: rgba(38,198,163,0.14);
	border-color: rgba(38,198,163,0.4);
	color: var(--sl-teal, #26c6a3);
}

/* Variante "obrigatórios" — borda esquerda teal cobrindo toda a altura da seção,
 * efeito visual de "passo a passo importante". */
.sl-cmd-section--obrigatorios {
	position: relative;
	padding-left: 1.75rem;
	border-left: 3px solid var(--sl-teal, #26c6a3);
	background: linear-gradient(90deg, rgba(38, 198, 163, 0.04) 0%, transparent 60%);
	border-radius: 0 12px 12px 0;
}
/* Variante "especiais" — borda esquerda laranja brand, mesmo efeito */
.sl-cmd-section--especiais {
	position: relative;
	padding-left: 1.75rem;
	border-left: 3px solid var(--sl-brand, #f16000);
	background: linear-gradient(90deg, rgba(241, 96, 0, 0.04) 0%, transparent 60%);
	border-radius: 0 12px 12px 0;
}
@media (max-width: 600px) {
	.sl-cmd-section--obrigatorios,
	.sl-cmd-section--especiais { padding-left: 1rem; }
}
.sl-cmd-section-title {
	font-family: var(--sl-font-display);
	font-size: clamp(1.25rem, 2.5vw, 1.55rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0 0 0.4rem;
}
.sl-cmd-section-subtitle {
	color: var(--sl-text-2);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
}

/* Step numerado (1°, 2°, etc) — layout vertical, número INLINE com o label */
.sl-cmd-step {
	display: block;
	padding: 1.25rem 1.3rem;
	margin: 1rem 0;
	background: rgba(22, 22, 32, 0.5);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	transition: border-color 0.3s var(--sl-ease);
}
.sl-cmd-step:hover {
	border-color: rgba(var(--sl-brand-rgb), 0.3);
}

/* Label = número 1° + título, na mesma linha */
.sl-cmd-step-label {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	font-family: var(--sl-font-display);
	font-size: clamp(1.05rem, 2.2vw, 1.2rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sl-text);
	margin: 0 0 0.85rem;
	line-height: 1.3;
}
.sl-cmd-step-label-text {
	flex: 1;
	min-width: 0;
}

/* Número em círculo laranja perfeito — inline com o título */
.sl-cmd-step-num {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 42px;
	padding: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, rgba(var(--sl-brand-rgb), 0.22), rgba(var(--sl-brand-rgb), 0.06));
	border: 1px solid rgba(var(--sl-brand-rgb), 0.4);
	color: var(--sl-brand-3, var(--sl-brand));
	font-family: var(--sl-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: -0.02em;
	line-height: 1;
}

/* Corpo do step = texto explicativo + comandos — ocupa largura total */
.sl-cmd-step-body {
	width: 100%;
}
.sl-cmd-step-body p {
	color: var(--sl-text-2);
	font-size: 0.92rem;
	line-height: 1.65;
	margin: 0.5rem 0;
}
.sl-cmd-step-body .sl-cmd {
	margin: 0.6rem 0;
}
.sl-cmd-step-body .sl-cmd + .sl-cmd {
	margin-top: 0.5rem;
}

/* Garante que comandos longos (ex: Teltonika setparam com 12 params)
   quebrem em múltiplas linhas dentro da caixa do comando */
.sl-cmd-code {
	flex: 1;
	min-width: 0;
	display: block !important;
	white-space: pre-wrap !important;
	word-break: break-word !important;
	overflow-wrap: anywhere !important;
}

/* Callout "Obrigatórios concluídos" */
.sl-cmd-complete {
	display: block;
	padding: 1.35rem 1.6rem;
	margin: 2rem 0;
	background:
		linear-gradient(135deg, rgba(38,198,163,0.13), rgba(196,255,62,0.05));
	border: 1px solid rgba(38,198,163,0.4);
	border-radius: 14px;
	position: relative;
}
.sl-cmd-complete-header {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
}
.sl-cmd-complete-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--sl-teal, #26c6a3);
	color: #042b23;
	box-shadow: 0 6px 20px -6px rgba(38,198,163,0.5);
}
.sl-cmd-complete-body { flex: 1; min-width: 0; }
.sl-cmd-complete-body strong {
	display: block;
	font-family: var(--sl-font-display);
	font-size: clamp(1rem, 2.2vw, 1.15rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--sl-text);
	margin-bottom: 0.35rem;
}
.sl-cmd-complete-body p {
	margin: 0 0 0.4rem;
	color: var(--sl-text-2);
	font-size: 0.92rem;
	line-height: 1.6;
}

/* Aviso "Atenção" dentro do callout — ocupa largura total do callout */
.sl-cmd-complete-warning {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	width: 100%;
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 179, 71, 0.1);
	border: 1px solid rgba(255, 179, 71, 0.4);
	border-left: 3px solid #ffb347;
	border-radius: 8px;
	font-size: 0.88rem;
	line-height: 1.6;
	color: var(--sl-text-2);
}
.sl-cmd-complete-warning-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffb347;
	margin-top: 1px;
}
.sl-cmd-complete-warning-text strong {
	color: #ffb347;
	font-weight: 700;
	margin-right: 0.2rem;
}
@media (max-width: 600px) {
	.sl-cmd-step { flex-direction: column; gap: 0.8rem; }
	.sl-cmd-step-num { width: 38px; height: 38px; font-size: 0.95rem; }
	.sl-cmd-complete-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
}

/* Seções herdadas do fabricante (comandos padrão + FAQs gerais) */
.sl-single-marca-inherited {
	position: relative;
	margin-top: 3rem;
	padding: 1.75rem 1.5rem 1.5rem;
	background: rgba(38, 198, 163, 0.04);
	border: 1px solid rgba(38, 198, 163, 0.18);
	border-radius: 14px;
}
.sl-single-marca-inherited::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(180deg, var(--sl-teal, #26c6a3), transparent);
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
}
.sl-single-marca-inherited-head {
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px dashed rgba(38, 198, 163, 0.2);
}
.sl-single-marca-inherited-badge {
	display: inline-block;
	padding: 0.25rem 0.65rem;
	background: rgba(38, 198, 163, 0.14);
	border: 1px solid rgba(38, 198, 163, 0.35);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--sl-teal, #26c6a3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
}
.sl-single-marca-inherited-head h2 {
	font-family: var(--sl-font-display);
	font-size: clamp(1.3rem, 2.6vw, 1.65rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0 0 0.5rem;
}
.sl-single-marca-inherited-note {
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--sl-text-2);
	margin: 0;
}
.sl-single-marca-inherited-note a {
	color: var(--sl-teal, #26c6a3);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(38, 198, 163, 0.3);
	transition: border-color 0.2s;
}
.sl-single-marca-inherited-note a:hover {
	border-bottom-color: var(--sl-teal, #26c6a3);
}
.sl-single-marca-inherited-body > * + * {
	margin-top: 0.75rem;
}

/* ======= Taxonomia "Fabricante" ======= */

/* Chip pequeno do fabricante ao lado do nome do modelo na listagem */
.sl-cfg-fab-chip {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.18rem 0.55rem;
	background: rgba(38,198,163,0.1);
	border: 1px solid rgba(38,198,163,0.3);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--sl-teal, #26c6a3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	vertical-align: middle;
	line-height: 1.4;
	transition: all 0.2s var(--sl-ease);
}
.sl-cfg-fab-chip:hover {
	background: rgba(38,198,163,0.2);
	border-color: var(--sl-teal, #26c6a3);
	transform: translateY(-1px);
}

/* Linha de metadata (fabricante + família) no hero do single-marca */
.sl-single-marca-meta {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: -0.3rem;
	padding: 0.5rem 0;
}
.sl-single-marca-meta-item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.sl-single-marca-meta-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.sl-single-marca-meta-chips {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}
.sl-single-marca-fab-link {
	padding: 0.3rem 0.7rem;
	background: rgba(38,198,163,0.1);
	border: 1px solid rgba(38,198,163,0.3);
	border-radius: 6px;
	color: var(--sl-teal, #26c6a3);
	font-family: var(--sl-font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: all 0.2s var(--sl-ease);
}
.sl-single-marca-fab-link:hover {
	background: rgba(38,198,163,0.2);
	border-color: var(--sl-teal, #26c6a3);
	transform: translateY(-1px);
}
.sl-single-marca-fam-chip {
	padding: 0.3rem 0.7rem;
	background: rgba(var(--sl-brand-rgb), 0.08);
	border: 1px solid rgba(var(--sl-brand-rgb), 0.28);
	border-radius: 6px;
	color: var(--sl-brand-3, var(--sl-brand));
	font-family: var(--sl-font-display);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: default;
}

/* Modelos irmãos da mesma família */
.sl-single-marca-siblings {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 0.9rem 1rem;
	background: rgba(38,198,163,0.04);
	border: 1px dashed rgba(38,198,163,0.25);
	border-radius: 10px;
}
.sl-single-marca-siblings-label {
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.sl-single-marca-siblings-list {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}
.sl-single-marca-sibling {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.65rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--sl-line);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sl-text-2);
	text-decoration: none;
	transition: all 0.2s var(--sl-ease);
}
.sl-single-marca-sibling:hover {
	background: rgba(38,198,163,0.1);
	border-color: var(--sl-teal, #26c6a3);
	color: var(--sl-teal, #26c6a3);
	transform: translateY(-1px);
}

/* Grid de modelos no archive do fabricante (/fabricante/<slug>/) */
.sl-fab-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.25rem;
	margin-top: 1.5rem;
}
.sl-fab-card {
	--brand-c: var(--sl-brand);
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.4rem 1.3rem 1.6rem;
	background: rgba(22,22,32,0.6);
	border: 1px solid var(--sl-line);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s var(--sl-ease);
	overflow: hidden;
}
.sl-fab-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c) 10%, transparent), transparent 60%);
	opacity: 0;
	transition: opacity 0.3s var(--sl-ease);
	pointer-events: none;
}
.sl-fab-card:hover {
	border-color: color-mix(in srgb, var(--brand-c) 50%, transparent);
	transform: translateY(-4px);
	box-shadow: 0 20px 50px -15px color-mix(in srgb, var(--brand-c) 25%, transparent);
}
.sl-fab-card:hover::before { opacity: 1; }
.sl-fab-card:hover .sl-fab-card-arrow {
	transform: translateX(4px);
	color: var(--brand-c);
}
.sl-fab-card-head {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	min-height: 80px;
}
.sl-fab-card-thumb {
	max-width: 100%;
	max-height: 80px;
	height: auto;
	border-radius: 8px;
}
.sl-fab-card-mark {
	width: 64px;
	height: 64px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--brand-c) 22%, 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: 1.5rem;
	letter-spacing: -0.03em;
}
.sl-fab-card-body {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-fab-card-title {
	font-family: var(--sl-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0;
}
.sl-fab-card-desc {
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--sl-text-2);
	margin: 0;
}
.sl-fab-card-meta {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.04em;
	margin-top: auto;
	padding-top: 0.6rem;
}
.sl-fab-card-arrow {
	position: absolute;
	bottom: 1rem;
	right: 1.2rem;
	font-size: 1.3rem;
	color: var(--sl-text-3);
	transition: all 0.3s var(--sl-ease);
}
.sl-fab-nav {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-line);
	display: flex;
	gap: 0.7rem;
	flex-wrap: wrap;
	justify-content: center;
}

/* Topbar: busca + badge de online */
.sl-cfg-topbar {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-bottom: 0.75rem;
}
.sl-cfg-topbar .sl-cfg-search {
	flex: 1;
	min-width: 260px;
	margin-bottom: 0;
}
.sl-cfg-online-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.9rem;
	background: rgba(38, 198, 163, 0.08);
	border: 1px solid rgba(38, 198, 163, 0.3);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.78rem;
	color: var(--sl-teal, #26c6a3);
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}
.sl-cfg-online-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #26c6a3;
	box-shadow: 0 0 0 4px rgba(38, 198, 163, 0.2);
	animation: sl-cfg-online-pulse 2s ease-in-out infinite;
}
@keyframes sl-cfg-online-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(38, 198, 163, 0.2); }
	50%      { box-shadow: 0 0 0 7px rgba(38, 198, 163, 0.05); }
}
.sl-cfg-online-label {
	opacity: 0.7;
	font-weight: 500;
}

/* Stats agregadas no subtítulo do fabricante (X comandos · Y copiados) */
.sl-cfg-fab-stats {
	display: inline-flex;
	gap: 0.35rem;
	align-items: center;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Contador "X modelos" no cabeçalho do fabricante — chip com ícone 📦 + texto colorido */
.sl-cfg-fab-count {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.5rem;
	padding: 0.18rem 0.6rem;
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(241, 96, 0, 0.1));
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	color: var(--sl-teal);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.4;
	vertical-align: middle;
	cursor: help;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.sl-cfg-fab-count:hover {
	border-color: rgba(241, 96, 0, 0.45);
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(241, 96, 0, 0.18));
	transform: translateY(-1px);
}
.sl-cfg-fab-count-icon {
	font-size: 0.85rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 0 4px rgba(241, 96, 0, 0.3));
}

/* Lista de modelos dentro do accordion do fabricante */
.sl-cfg-models-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0.5rem;
}
.sl-cfg-models-list li {
	margin: 0;
}
.sl-cfg-model-link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: all 0.2s var(--sl-ease);
}
.sl-cfg-model-link:hover {
	background: rgba(var(--sl-brand-rgb), 0.08);
	border-color: rgba(var(--sl-brand-rgb), 0.35);
	transform: translateX(2px);
}
.sl-cfg-model-name {
	flex: 1;
	font-family: var(--sl-font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.01em;
}
.sl-cfg-model-desc {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	margin-top: 0.2rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 240px;
}

/* Stats "X comandos · Y copiados" no card de modelo */
.sl-cfg-model-stats {
	display: flex;
	gap: 0.4rem;
	align-items: center;
	font-family: var(--sl-font-mono);
	font-size: 0.68rem;
	color: var(--sl-text-3);
	letter-spacing: 0.04em;
	margin-top: 0.25rem;
	white-space: nowrap;
}
.sl-cfg-model-stat {
	display: inline-block;
}
.sl-cfg-model-stat-sep {
	color: var(--sl-line-hi);
}

/* Layout do card quando tem stats — título no topo, stats embaixo, seta à direita */
.sl-cfg-model-link:has(.sl-cfg-model-stats),
.sl-cfg-model-link:has(.sl-cfg-model-desc) {
	position: relative;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding-right: 2.5rem;
}
.sl-cfg-model-link:has(.sl-cfg-model-stats) .sl-cfg-model-arrow,
.sl-cfg-model-link:has(.sl-cfg-model-desc) .sl-cfg-model-arrow {
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}
.sl-cfg-model-arrow {
	color: var(--sl-text-3);
	font-size: 1.1rem;
	transition: transform 0.2s;
}
.sl-cfg-model-link:hover .sl-cfg-model-arrow {
	color: var(--sl-brand);
	transform: translateX(3px);
}

/* Link "Ver página completa" dentro do accordion (listagem) */
.sl-cfg-full-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.85rem 1rem;
	margin-top: 0.5rem;
	background: rgba(38,198,163,0.05);
	border: 1px dashed rgba(38,198,163,0.25);
	border-radius: 8px;
}
.sl-cfg-full-link .sl-btn {
	font-size: 0.85rem;
	padding: 0.5rem 0.9rem;
}
.sl-cfg-full-link-hint {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	letter-spacing: 0.03em;
}
@media (max-width: 600px) {
	.sl-cfg-full-link { flex-direction: column; align-items: flex-start; }
	.sl-cfg-full-link .sl-btn { align-self: stretch; text-align: center; }
}

/* ======= Original ======= */

/* 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;
}
/* Força ocultação quando [hidden] — sobrescreve display:flex acima */
.sl-cfg-feedback-ask[hidden],
.sl-cfg-feedback-thanks[hidden] {
	display: none !important;
}
.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;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.sl-server-flag {
	font-size: 1.1rem;
	line-height: 1;
	filter: saturate(1.15);
}
.sl-server-region {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-teal);
	letter-spacing: 0.04em;
	margin-top: 0.4rem;
	opacity: 0.85;
}
.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; }

/* CTA "Ver comandos de X" — aparece só quando o protocolo tem CPT marca correspondente */
.sl-brand-row-cta {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--sl-line);
}
.sl-brand-row-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem;
	background: linear-gradient(135deg, var(--brand-c, var(--sl-brand)) 0%, color-mix(in oklab, var(--brand-c, var(--sl-brand)) 70%, transparent) 100%);
	color: #fff;
	font-family: var(--sl-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	border-radius: 8px;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--brand-c, var(--sl-brand)) 50%, transparent);
}
.sl-brand-row-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.08);
	box-shadow: 0 6px 18px -4px color-mix(in oklab, var(--brand-c, var(--sl-brand)) 60%, transparent);
	text-decoration: none;
}
.sl-brand-row-btn svg { flex-shrink: 0; }
.sl-brand-row-btn span[aria-hidden] {
	font-size: 1.05em;
	transition: transform 0.18s ease;
}
.sl-brand-row-btn:hover span[aria-hidden] {
	transform: translateX(3px);
}

/* Selo "Catálogo atualizado em [data]" — abaixo dos stats do hero */
.sl-rastr-updated {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 1.75rem auto 0;
	padding: 0.4rem 0.85rem;
	background: rgba(38, 198, 163, 0.08);
	border: 1px solid rgba(38, 198, 163, 0.25);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-teal, #26c6a3);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sl-rastr-updated svg { color: var(--sl-teal, #26c6a3); }
.sl-rastr-updated time { font-weight: 600; }

.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: ajustes mobile-only de fonte (marquee fica em outro breakpoint) --- */
	.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; }
}

/* ============================================================
 * FÓRUM DE DISCUSSÃO (single-marca comments)
 * ============================================================ */
.sl-forum {
	max-width: 1320px;
	margin: 4rem auto 3rem;
	padding: 0 clamp(1rem, 4vw, 2rem);
}
.sl-forum-head {
	margin-bottom: 2rem;
}
.sl-forum-badge-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.9rem;
	border-radius: 999px;
	background: rgba(38, 198, 163, 0.1);
	color: var(--sl-teal);
	border: 1px solid rgba(38, 198, 163, 0.25);
	font-family: var(--sl-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sl-forum-head h2 {
	font-family: var(--sl-font-display);
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 500;
	letter-spacing: -0.025em;
	line-height: 1.2;
	margin: 1rem 0 0.75rem;
}
.sl-forum-sub {
	color: var(--sl-text-2);
	max-width: 640px;
	font-size: 0.95rem;
}

/* "Resposta aceita" no topo */
.sl-forum-accepted {
	background: rgba(38, 198, 163, 0.05);
	border: 1px solid rgba(38, 198, 163, 0.3);
	border-radius: 12px;
	padding: 1.25rem;
	margin: 2rem 0;
	position: relative;
}
.sl-forum-accepted-label {
	color: var(--sl-teal);
	font-family: var(--sl-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 0.75rem;
}

/* Lista de comentários */
.sl-forum-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-forum-list .children {
	list-style: none;
	padding-left: 1.5rem;
	margin-top: 1rem;
	margin-bottom: 0;
	border-left: 2px solid var(--sl-line);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Card de comentário */
.sl-forum-comment {
	background: var(--sl-bg-2, #14141c);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	padding: 1.25rem;
	transition: border-color 0.2s;
}
.sl-forum-comment:hover {
	border-color: rgba(255, 255, 255, 0.15);
}
.sl-forum-comment--admin {
	border-color: rgba(241, 96, 0, 0.3);
	background: linear-gradient(180deg, rgba(241,96,0,0.05) 0%, var(--sl-bg-2, #14141c) 100%);
}
.sl-forum-comment--pinned {
	border-color: rgba(38, 198, 163, 0.3);
}
.sl-forum-comment--reply {
	font-size: 0.95rem;
}

/* Cabeçalho do comentário */
.sl-forum-comment-head {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	margin-bottom: 0.85rem;
}
.sl-forum-avatar img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	border: 1px solid var(--sl-line);
}
.sl-forum-author-name {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	font-size: 0.95rem;
}
.sl-forum-author-name strong {
	color: var(--sl-text);
	font-weight: 600;
}
.sl-forum-time {
	display: block;
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	margin-top: 0.15rem;
}

/* Badges de autor */
.sl-forum-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.sl-forum-badge--admin {
	background: rgba(241, 96, 0, 0.15);
	color: var(--sl-brand);
	border: 1px solid rgba(241, 96, 0, 0.3);
}
.sl-forum-badge--guest {
	background: rgba(255, 255, 255, 0.05);
	color: var(--sl-text-3);
	border: 1px solid var(--sl-line);
}
.sl-forum-badge--copies {
	background: rgba(38, 198, 163, 0.1);
	color: var(--sl-teal);
	border: 1px solid rgba(38, 198, 163, 0.25);
}

/* Conteúdo */
.sl-forum-content {
	color: var(--sl-text-2);
	line-height: 1.6;
	margin-bottom: 1rem;
}
.sl-forum-content p:first-child { margin-top: 0; }
.sl-forum-content p:last-child  { margin-bottom: 0; }
.sl-forum-content code {
	background: rgba(255,255,255,0.06);
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	font-family: var(--sl-font-mono);
	font-size: 0.85em;
}

/* Ações */
.sl-forum-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	padding-top: 0.85rem;
	border-top: 1px solid var(--sl-line);
}
.sl-forum-like, .sl-forum-accept {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	background: transparent;
	border: 1px solid var(--sl-line);
	color: var(--sl-text-2);
	font-family: var(--sl-font-body);
	font-size: 0.82rem;
	cursor: pointer;
	transition: all 0.15s;
}
.sl-forum-like:hover, .sl-forum-accept:hover {
	border-color: rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.03);
}
.sl-forum-like.has-likes {
	border-color: rgba(241,96,0,0.3);
	background: rgba(241,96,0,0.08);
	color: var(--sl-brand);
}
.sl-forum-accept.is-accepted {
	border-color: rgba(38,198,163,0.4);
	background: rgba(38,198,163,0.1);
	color: var(--sl-teal);
}
.sl-forum-reply-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.75rem;
	border-radius: 6px;
	background: transparent;
	border: 1px solid var(--sl-line);
	color: var(--sl-text-2);
	font-size: 0.82rem;
	text-decoration: none;
}
.sl-forum-reply-link a:hover {
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}
.sl-forum-pinned-tag {
	margin-left: auto;
	color: var(--sl-teal);
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
}

/* Paginação */
.sl-forum-pagination {
	margin: 2rem 0;
	display: flex;
	justify-content: center;
}
.sl-forum-pagination ul, .sl-forum-pagination ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 0.5rem;
}
.sl-forum-pagination a, .sl-forum-pagination .page-numbers {
	display: inline-flex;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--sl-line);
	border-radius: 6px;
	color: var(--sl-text-2);
	font-size: 0.85rem;
	text-decoration: none;
}
.sl-forum-pagination a:hover { border-color: var(--sl-teal); color: var(--sl-teal); }
.sl-forum-pagination .current {
	background: var(--sl-brand);
	color: white;
	border-color: var(--sl-brand);
}

/* Form de novo comentário */
.sl-forum-form-wrap {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sl-line);
}
.sl-forum-form {
	background: var(--sl-bg-2, #14141c);
	border: 1px solid var(--sl-line);
	border-radius: 12px;
	padding: 1.5rem;
}
#reply-title {
	font-family: var(--sl-font-display);
	font-size: 1.3rem;
	font-weight: 500;
	margin: 0 0 1rem;
	letter-spacing: -0.02em;
}
#cancel-comment-reply-link {
	margin-left: 0.5rem;
	font-size: 0.85rem;
	color: var(--sl-text-3);
	text-decoration: none;
}
#cancel-comment-reply-link:hover { color: var(--sl-brand); }
.sl-forum-field { margin-bottom: 1rem; }
.sl-forum-field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
	color: var(--sl-text-2);
	font-weight: 500;
}
.sl-forum-field label .required { color: var(--sl-brand); }
.sl-forum-field label .sl-forum-help {
	color: var(--sl-text-3);
	font-weight: 400;
	font-size: 0.78rem;
	margin-left: 0.3rem;
}
.sl-forum-field input,
.sl-forum-field textarea {
	width: 100%;
	background: var(--sl-bg, #0a0a0f);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	padding: 0.7rem 0.9rem;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.95rem;
	transition: border-color 0.15s;
}
.sl-forum-field input:focus,
.sl-forum-field textarea:focus {
	outline: none;
	border-color: var(--sl-teal);
	box-shadow: 0 0 0 3px rgba(38,198,163,0.15);
}
.sl-forum-field textarea {
	min-height: 100px;
	resize: vertical;
	font-family: var(--sl-font-body);
	line-height: 1.5;
}
.sl-forum-form .form-submit {
	margin-top: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}
.sl-forum-submit, .sl-forum-form input[type="submit"] {
	background: var(--sl-brand);
	color: white;
	border: none;
	padding: 0.7rem 1.5rem;
	border-radius: 8px;
	font-family: var(--sl-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.15s, transform 0.15s;
}
.sl-forum-submit:hover, .sl-forum-form input[type="submit"]:hover {
	background: #d65500;
	transform: translateY(-1px);
}
.sl-forum-notice {
	font-size: 0.78rem;
	color: var(--sl-text-3);
	margin: 0;
}
.sl-forum-closed {
	background: var(--sl-bg-2);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
	padding: 1rem;
	color: var(--sl-text-2);
	text-align: center;
}

/* Mobile */
@media (max-width: 600px) {
	.sl-forum-comment { padding: 1rem; }
	.sl-forum-actions { gap: 0.35rem; }
	.sl-forum-like, .sl-forum-accept, .sl-forum-reply-link a { font-size: 0.78rem; padding: 0.35rem 0.6rem; }
	.sl-forum-list .children { padding-left: 1rem; }
}

/* ========================================================================
   WEATHER MODAL — abre ao clicar no nome da cidade na status bar
   Glassmorphism, animações climáticas no fundo (sol/chuva/nuvens),
   forecast 3 dias, saudação dinâmica, refresh button.
   ======================================================================== */
.sl-wx-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	animation: sl-wx-fade-in 0.25s ease;
}
.sl-wx-modal[hidden] { display: none; }
@keyframes sl-wx-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.sl-wx-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.sl-wx-modal-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 3rem);
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 20, 30, 0.95) 0%, rgba(14, 14, 21, 0.95) 100%);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 22px;
	box-shadow:
		0 30px 60px -12px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.05),
		0 0 60px -10px rgba(45, 212, 191, 0.25);
	display: flex;
	flex-direction: column;
	animation: sl-wx-slide-up 0.4s cubic-bezier(0.34, 1.36, 0.64, 1);
}
@keyframes sl-wx-slide-up {
	from { opacity: 0; transform: translateY(20px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Animação climática no fundo (definida pelo JS via data-wx-bg) */
.sl-wx-bg-anim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0.45;
}
/* Sol — raios que pulsam suaves no canto superior direito */
.sl-wx-bg-anim[data-wx-bg="sun"]::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 209, 102, 0.55) 0%, transparent 60%);
	animation: sl-wx-sun-pulse 4s ease-in-out infinite;
}
@keyframes sl-wx-sun-pulse {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50%      { transform: scale(1.15); opacity: 0.9; }
}
/* Lua — glow azulado no canto superior */
.sl-wx-bg-anim[data-wx-bg="moon"]::before {
	content: '';
	position: absolute;
	top: -30px;
	right: -30px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(192, 214, 240, 0.4) 0%, transparent 60%);
	filter: blur(2px);
}
/* Chuva — gotas caindo em linhas verticais */
.sl-wx-bg-anim[data-wx-bg="rain"]::before,
.sl-wx-bg-anim[data-wx-bg="rain"]::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(180deg, transparent 0%, rgba(173, 216, 230, 0.5) 50%, transparent 100%);
	background-size: 2px 35px;
	background-repeat: repeat;
	animation: sl-wx-rain 0.8s linear infinite;
}
.sl-wx-bg-anim[data-wx-bg="rain"]::after {
	background-position: 15px 0;
	animation-duration: 1.2s;
	opacity: 0.6;
}
@keyframes sl-wx-rain {
	from { background-position-y: 0; }
	to   { background-position-y: 35px; }
}
/* Nublado — nuvens suaves driftando */
.sl-wx-bg-anim[data-wx-bg="cloud"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 20% 30%, rgba(180, 200, 230, 0.25) 0%, transparent 40%),
	            radial-gradient(ellipse at 80% 60%, rgba(180, 200, 230, 0.2) 0%, transparent 40%);
	animation: sl-wx-cloud-drift 20s ease-in-out infinite;
}
@keyframes sl-wx-cloud-drift {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(-30px); }
}
/* Trovoada — flash periódico */
.sl-wx-bg-anim[data-wx-bg="storm"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(255, 255, 200, 0.15), transparent 30%);
	animation: sl-wx-storm-flash 8s ease-out infinite;
}
@keyframes sl-wx-storm-flash {
	0%, 92%, 96%, 100% { opacity: 0; }
	93%, 95%           { opacity: 1; }
}
/* Neve — flocos */
.sl-wx-bg-anim[data-wx-bg="snow"]::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle 2px at 20% 10%, white, transparent),
		radial-gradient(circle 1.5px at 70% 30%, white, transparent),
		radial-gradient(circle 1px at 50% 60%, white, transparent),
		radial-gradient(circle 2px at 80% 80%, white, transparent),
		radial-gradient(circle 1.5px at 30% 90%, white, transparent);
	background-size: 100% 100%;
	background-repeat: repeat;
	animation: sl-wx-snow 12s linear infinite;
}
@keyframes sl-wx-snow {
	from { background-position: 0 0; }
	to   { background-position: 0 100%; }
}

/* Botão de fechar */
.sl-wx-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: var(--sl-text-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all 0.2s ease;
}
.sl-wx-modal-close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sl-text);
	transform: rotate(90deg);
}

/* Header */
.sl-wx-modal-header {
	position: relative;
	z-index: 1;
	padding: 1.75rem 1.75rem 1rem;
	text-align: center;
}
.sl-wx-greeting {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-teal);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
}
.sl-wx-modal-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0 0 0.35rem;
	line-height: 1.2;
}
.sl-wx-tz {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	margin: 0;
}

/* Body */
.sl-wx-modal-body {
	position: relative;
	z-index: 1;
	padding: 0 1.75rem 1.5rem;
	overflow-y: auto;
}

/* Bloco do clima atual */
.sl-wx-current {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 1.25rem;
}
.sl-wx-icon-big {
	font-size: 3.5rem;
	line-height: 1;
	flex-shrink: 0;
	filter: drop-shadow(0 4px 12px rgba(45, 212, 191, 0.3));
}
.sl-wx-temp-block {
	flex: 1;
	min-width: 0;
}
.sl-wx-temp-big {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 2.75rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--sl-text);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sl-wx-condition {
	font-size: 0.95rem;
	color: var(--sl-text-2);
	margin-top: 0.4rem;
	text-transform: capitalize;
}
.sl-wx-feels {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	margin-top: 0.2rem;
}

/* Stats grid (umidade, vento, sunrise, sunset) */
.sl-wx-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.sl-wx-stat {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
}
.sl-wx-stat svg {
	color: var(--sl-teal);
	flex-shrink: 0;
	opacity: 0.7;
}
.sl-wx-stat-label {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex: 1;
	min-width: 0;
}
.sl-wx-stat-value {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--sl-text);
	font-variant-numeric: tabular-nums;
}

/* Forecast */
.sl-wx-forecast-title {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.6rem;
	font-weight: 500;
}
.sl-wx-forecast-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.6rem;
}
.sl-wx-forecast-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 0.85rem 0.4rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
	text-align: center;
}
.sl-wx-forecast-date {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.sl-wx-forecast-icon {
	font-size: 1.5rem;
	line-height: 1;
}
.sl-wx-forecast-temps {
	display: flex;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}
.sl-wx-forecast-max { color: var(--sl-text); font-weight: 600; }
.sl-wx-forecast-min { color: var(--sl-text-3); }

/* Footer */
.sl-wx-modal-footer {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.2);
}
.sl-wx-updated {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
}
.sl-wx-refresh {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 999px;
	color: var(--sl-teal);
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}
.sl-wx-refresh:hover {
	background: rgba(45, 212, 191, 0.2);
	transform: translateY(-1px);
}
.sl-wx-refresh.is-loading svg {
	animation: sl-wx-spin 0.8s linear infinite;
}
@keyframes sl-wx-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 480px) {
	.sl-wx-modal { padding: 0.75rem; }
	.sl-wx-modal-header { padding: 1.5rem 1.25rem 0.85rem; }
	.sl-wx-modal-body { padding: 0 1.25rem 1.25rem; }
	.sl-wx-modal-footer { padding: 0.85rem 1.25rem; }
	.sl-wx-modal-title { font-size: 1.25rem; }
	.sl-wx-temp-big { font-size: 2.25rem; }
	.sl-wx-icon-big { font-size: 2.75rem; }
	.sl-wx-current { gap: 1rem; padding: 1rem 0; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-wx-modal-panel { animation: none; }
	.sl-wx-bg-anim::before, .sl-wx-bg-anim::after { animation: none; }
}

/* ========================================================================
   SERVER MODAL — abre ao clicar num pill de servidor (s01/s02/s03)
   Mostra uptime 24h/30d, ping (atual/médio/min/max), incidentes 24h
   e sparkline dos últimos heartbeats coloridos por status.
   ======================================================================== */
.sl-srv-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	animation: sl-wx-fade-in 0.25s ease;
}
.sl-srv-modal[hidden] { display: none; }
.sl-srv-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.sl-srv-modal-panel {
	position: relative;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 3rem);
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 20, 30, 0.95) 0%, rgba(14, 14, 21, 0.95) 100%);
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 22px;
	box-shadow:
		0 30px 60px -12px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.05),
		0 0 60px -10px rgba(45, 212, 191, 0.25);
	display: flex;
	flex-direction: column;
	animation: sl-wx-slide-up 0.4s cubic-bezier(0.34, 1.36, 0.64, 1);
}
/* Cores de borda/glow mudam com status do servidor */
.sl-srv-modal-panel[data-srv-status="down"] {
	border-color: rgba(239, 68, 68, 0.4);
	box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(239, 68, 68, 0.1), 0 0 60px -10px rgba(239, 68, 68, 0.3);
}
.sl-srv-modal-panel[data-srv-status="degraded"] {
	border-color: rgba(241, 96, 0, 0.4);
	box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(241, 96, 0, 0.1), 0 0 60px -10px rgba(241, 96, 0, 0.3);
}
.sl-srv-modal-panel[data-srv-status="maintenance"] {
	border-color: rgba(168, 85, 247, 0.4);
	box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(168, 85, 247, 0.1), 0 0 60px -10px rgba(168, 85, 247, 0.3);
}

/* Animação de fundo do modal — pulsa com a cor do status */
.sl-srv-bg-anim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0.5;
}
.sl-srv-bg-anim::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(45, 212, 191, 0.45) 0%, transparent 60%);
	animation: sl-srv-pulse 3.5s ease-in-out infinite;
}
.sl-srv-modal-panel[data-srv-status="down"] .sl-srv-bg-anim::before     { background: radial-gradient(circle, rgba(239, 68, 68, 0.5) 0%, transparent 60%); }
.sl-srv-modal-panel[data-srv-status="degraded"] .sl-srv-bg-anim::before { background: radial-gradient(circle, rgba(241, 96, 0, 0.5) 0%, transparent 60%); }
.sl-srv-modal-panel[data-srv-status="maintenance"] .sl-srv-bg-anim::before { background: radial-gradient(circle, rgba(168, 85, 247, 0.5) 0%, transparent 60%); }
@keyframes sl-srv-pulse {
	0%, 100% { transform: scale(1); opacity: 0.7; }
	50%      { transform: scale(1.15); opacity: 1; }
}

/* Botão fechar */
.sl-srv-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 2;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: var(--sl-text-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all 0.2s ease;
}
.sl-srv-modal-close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sl-text);
	transform: rotate(90deg);
}

/* Header */
.sl-srv-modal-header {
	position: relative;
	z-index: 1;
	padding: 1.75rem 1.75rem 1rem;
	text-align: center;
}
.sl-srv-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem 0.3rem 0.5rem;
	background: rgba(45, 212, 191, 0.12);
	border: 1px solid rgba(45, 212, 191, 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.1em;
	font-weight: 600;
	margin-bottom: 0.85rem;
}
.sl-srv-status-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 6px var(--sl-teal);
	animation: sl-srv-dot-pulse 2s ease-in-out infinite;
}
@keyframes sl-srv-dot-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.5; }
}
.sl-srv-modal-panel[data-srv-status="down"] .sl-srv-status-badge {
	background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.4); color: var(--sl-danger);
}
.sl-srv-modal-panel[data-srv-status="down"] .sl-srv-status-dot {
	background: var(--sl-danger); box-shadow: 0 0 6px var(--sl-danger);
}
.sl-srv-modal-panel[data-srv-status="degraded"] .sl-srv-status-badge {
	background: rgba(241, 96, 0, 0.12); border-color: rgba(241, 96, 0, 0.4); color: var(--sl-brand-3, #f16000);
}
.sl-srv-modal-panel[data-srv-status="degraded"] .sl-srv-status-dot {
	background: var(--sl-brand-3, #f16000); box-shadow: 0 0 6px var(--sl-brand-3, #f16000);
}
.sl-srv-modal-panel[data-srv-status="maintenance"] .sl-srv-status-badge {
	background: rgba(168, 85, 247, 0.12); border-color: rgba(168, 85, 247, 0.4); color: #a855f7;
}
.sl-srv-modal-panel[data-srv-status="maintenance"] .sl-srv-status-dot {
	background: #a855f7; box-shadow: 0 0 6px #a855f7;
}
.sl-srv-modal-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0 0 0.35rem;
	line-height: 1.2;
}
.sl-srv-last-check {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	margin: 0;
}

/* Body */
.sl-srv-modal-body {
	position: relative;
	z-index: 1;
	padding: 0 1.75rem 1.5rem;
	overflow-y: auto;
}

/* Bloco principal: uptime grande */
.sl-srv-uptime-block {
	text-align: center;
	padding: 1.25rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 1.25rem;
}
.sl-srv-uptime-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 3rem;
	font-weight: 500;
	letter-spacing: -0.03em;
	color: var(--sl-teal);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.sl-srv-modal-panel[data-srv-status="down"] .sl-srv-uptime-value     { color: var(--sl-danger); }
.sl-srv-modal-panel[data-srv-status="degraded"] .sl-srv-uptime-value { color: var(--sl-brand-3, #f16000); }
.sl-srv-uptime-label {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 0.35rem;
}
.sl-srv-uptime-30d {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-2);
	margin-top: 0.45rem;
}
.sl-srv-uptime-30d:empty { display: none; }

/* Stats grid */
.sl-srv-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.65rem;
	margin-bottom: 1.5rem;
}
.sl-srv-stat {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 0.8rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
}
.sl-srv-stat--wide { grid-column: span 2; }
.sl-srv-stat svg {
	color: var(--sl-teal);
	flex-shrink: 0;
	opacity: 0.7;
}
.sl-srv-stat-label {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex: 1;
	min-width: 0;
}
.sl-srv-stat-value {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--sl-text);
	font-variant-numeric: tabular-nums;
}

/* Heartbeats sparkline (barras) */
.sl-srv-heartbeats {
	margin-bottom: 0.5rem;
}
.sl-srv-heartbeats-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.6rem;
}
.sl-srv-heartbeats-title {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0;
	font-weight: 500;
}
.sl-srv-heartbeats-meta {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
}
.sl-srv-heartbeats-bars {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 36px;
	padding: 0.5rem 0.7rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	margin-bottom: 0.6rem;
	overflow: hidden;
}
.sl-srv-hb-bar {
	flex: 1;
	min-width: 3px;
	border-radius: 2px;
	background: var(--sl-teal);
	transition: opacity 0.2s ease;
	cursor: help;
}
.sl-srv-hb-bar.is-up        { background: var(--sl-teal); }
.sl-srv-hb-bar.is-down      { background: var(--sl-danger); }
.sl-srv-hb-bar.is-degraded  { background: var(--sl-brand-3, #f16000); }
.sl-srv-hb-bar.is-maintenance { background: #a855f7; }
.sl-srv-hb-bar:hover { opacity: 0.7; }

.sl-srv-heartbeats-legend {
	display: flex;
	gap: 1rem;
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.sl-srv-heartbeats-legend > span {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.sl-srv-hb-swatch {
	width: 8px; height: 8px;
	border-radius: 2px;
	display: inline-block;
}
.sl-srv-hb-swatch.is-up       { background: var(--sl-teal); }
.sl-srv-hb-swatch.is-degraded { background: var(--sl-brand-3, #f16000); }
.sl-srv-hb-swatch.is-down     { background: var(--sl-danger); }

/* Footer */
.sl-srv-modal-footer {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.2);
}
.sl-srv-updated {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
}
.sl-srv-refresh {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.3);
	border-radius: 999px;
	color: var(--sl-teal);
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}
.sl-srv-refresh:hover {
	background: rgba(45, 212, 191, 0.2);
	transform: translateY(-1px);
}
.sl-srv-refresh.is-loading svg {
	animation: sl-wx-spin 0.8s linear infinite;
}

/* Cursor pointer + hover state nos pills dos servidores (status bar) */
.sl-status-item {
	cursor: pointer;
}
.sl-status-item:focus-visible {
	outline: 2px solid rgba(45, 212, 191, 0.5);
	outline-offset: 2px;
}

/* Mobile */
@media (max-width: 480px) {
	.sl-srv-modal { padding: 0.75rem; }
	.sl-srv-modal-header { padding: 1.5rem 1.25rem 0.85rem; }
	.sl-srv-modal-body { padding: 0 1.25rem 1.25rem; }
	.sl-srv-modal-footer { padding: 0.85rem 1.25rem; }
	.sl-srv-modal-title { font-size: 1.25rem; }
	.sl-srv-uptime-value { font-size: 2.5rem; }
	.sl-srv-stats { grid-template-columns: 1fr; gap: 0.5rem; }
	.sl-srv-stat--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-srv-modal-panel { animation: none; }
	.sl-srv-bg-anim::before { animation: none; }
	.sl-srv-status-dot { animation: none; }
}

/* ========================================================================
   JOURNEY MODAL — abre ao clicar no time pill (jornada do visitante)
   Stats da sessão, achievements, timeline, marcas exploradas, fato curioso,
   comparativo social, ações (exportar/limpar).
   ======================================================================== */
.sl-jrn-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	font-family: var(--sl-font-body, 'Manrope', sans-serif);
	animation: sl-wx-fade-in 0.25s ease;
}
.sl-jrn-modal[hidden] { display: none; }
.sl-jrn-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(8, 8, 12, 0.78);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.sl-jrn-modal-panel {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 3rem);
	overflow: hidden;
	background: linear-gradient(160deg, rgba(20, 20, 30, 0.96) 0%, rgba(14, 14, 21, 0.96) 100%);
	border: 1px solid rgba(45, 212, 191, 0.22);
	border-radius: 22px;
	box-shadow:
		0 30px 60px -12px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgba(255, 255, 255, 0.05),
		0 0 70px -15px rgba(241, 96, 0, 0.25);
	display: flex;
	flex-direction: column;
	animation: sl-wx-slide-up 0.45s cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* Aurora background */
.sl-jrn-bg-anim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	opacity: 0.4;
}
.sl-jrn-bg-anim::before,
.sl-jrn-bg-anim::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
}
.sl-jrn-bg-anim::before {
	top: -60px; right: -60px;
	width: 240px; height: 240px;
	background: radial-gradient(circle, rgba(45, 212, 191, 0.45) 0%, transparent 65%);
	animation: sl-jrn-float 8s ease-in-out infinite;
}
.sl-jrn-bg-anim::after {
	bottom: -70px; left: -70px;
	width: 260px; height: 260px;
	background: radial-gradient(circle, rgba(241, 96, 0, 0.35) 0%, transparent 65%);
	animation: sl-jrn-float 10s ease-in-out infinite reverse;
}
@keyframes sl-jrn-float {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(20px, -10px) scale(1.1); }
}

/* Botão fechar */
.sl-jrn-modal-close {
	position: absolute;
	top: 1rem; right: 1rem;
	z-index: 3;
	width: 36px; height: 36px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: var(--sl-text-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all 0.2s ease;
}
.sl-jrn-modal-close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--sl-text);
	transform: rotate(90deg);
}

/* Header com avatar */
.sl-jrn-header {
	position: relative;
	z-index: 1;
	padding: 1.75rem 1.75rem 1rem;
	text-align: center;
}
.sl-jrn-avatar {
	display: inline-block;
	margin-bottom: 0.85rem;
	filter: drop-shadow(0 6px 16px rgba(45, 212, 191, 0.3));
}
.sl-jrn-avatar svg {
	display: block;
}
.sl-jrn-greeting {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-teal);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 0.4rem;
}
.sl-jrn-modal-title {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	margin: 0 0 0.3rem;
	line-height: 1.15;
}
.sl-jrn-subtitle {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	margin: 0;
}

/* Body com scroll */
.sl-jrn-modal-body {
	position: relative;
	z-index: 1;
	padding: 0.5rem 1.75rem 1.5rem;
	overflow-y: auto;
}

/* 4 big stats */
.sl-jrn-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.6rem;
	margin-bottom: 1.25rem;
}
.sl-jrn-stat {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 0.85rem 0.5rem 0.7rem;
	text-align: center;
}
.sl-jrn-stat-icon {
	font-size: 1.3rem;
	line-height: 1;
	margin-bottom: 0.4rem;
}
.sl-jrn-stat-value {
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--sl-text);
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.sl-jrn-stat-label {
	font-family: var(--sl-font-mono);
	font-size: 0.55rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 0.25rem;
}
.sl-jrn-stat-extra {
	font-family: var(--sl-font-mono);
	font-size: 0.58rem;
	color: var(--sl-teal);
	margin-top: 0.3rem;
	min-height: 0.7rem;
}
.sl-jrn-stat-extra:empty { display: none; }

/* Comparativo social */
.sl-jrn-comparative {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 0.9rem;
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.1), rgba(241, 96, 0, 0.08));
	border: 1px solid rgba(45, 212, 191, 0.2);
	border-radius: 10px;
	font-size: 0.78rem;
	color: var(--sl-text);
	margin-bottom: 1.25rem;
}
.sl-jrn-comparative svg {
	color: var(--sl-teal);
	flex-shrink: 0;
}

/* Section header padrão */
.sl-jrn-section {
	margin-bottom: 1.25rem;
}
.sl-jrn-section-title {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.6rem;
	font-weight: 500;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.sl-jrn-section-meta {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-teal);
	font-weight: 600;
}

/* Achievements grid — 5 cols x 6 rows = 30 slots (todos achievements) */
.sl-jrn-achievements {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.4rem;
}
.sl-jrn-ach {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	padding: 0.55rem 0.3rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	text-align: center;
	opacity: 0.4;
	filter: grayscale(0.8);
	transition: all 0.3s ease;
	cursor: help;
	min-height: 70px;
}
.sl-jrn-ach.is-unlocked {
	opacity: 1;
	filter: none;
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.08), rgba(45, 212, 191, 0.08));
	border-color: rgba(45, 212, 191, 0.3);
	box-shadow: 0 0 12px -2px rgba(45, 212, 191, 0.25);
}
.sl-jrn-ach-icon {
	font-size: 1.25rem;
	line-height: 1;
}
.sl-jrn-ach-name {
	font-family: var(--sl-font-mono);
	font-size: 0.5rem;
	color: var(--sl-text-2);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1.2;
}

/* Marcas chips */
.sl-jrn-brands {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}
.sl-jrn-brand-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.7rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text);
	text-decoration: none;
	transition: all 0.2s ease;
}
.sl-jrn-brand-chip:hover {
	border-color: rgba(45, 212, 191, 0.4);
	background: rgba(45, 212, 191, 0.08);
}
.sl-jrn-brand-chip-count {
	font-size: 0.6rem;
	color: var(--sl-teal);
	font-weight: 600;
}
.sl-jrn-brands-empty {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
}
.sl-jrn-brands-empty a { color: var(--sl-teal); }

/* Timeline */
.sl-jrn-timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	border-left: 2px solid rgba(45, 212, 191, 0.2);
	margin-left: 0.5rem;
}
.sl-jrn-timeline li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.1rem;
	font-size: 0.78rem;
	color: var(--sl-text-2);
	line-height: 1.3;
}
.sl-jrn-timeline li::before {
	content: '';
	position: absolute;
	left: -5px;
	top: 0.65rem;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sl-teal);
	box-shadow: 0 0 6px var(--sl-teal);
}
.sl-jrn-timeline li:first-child::before {
	background: var(--sl-brand);
	box-shadow: 0 0 8px var(--sl-brand);
}
.sl-jrn-timeline-time {
	font-family: var(--sl-font-mono);
	font-size: 0.62rem;
	color: var(--sl-text-3);
	margin-right: 0.45rem;
}
.sl-jrn-timeline-title {
	color: var(--sl-text);
}
.sl-jrn-timeline-empty {
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	color: var(--sl-text-3);
	padding: 0.5rem 0 0.5rem 1.1rem;
}

/* Fato curioso */
.sl-jrn-fact {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.85rem 1rem;
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.06), rgba(45, 212, 191, 0.06));
	border: 1px dashed rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	font-size: 0.82rem;
	color: var(--sl-text);
	line-height: 1.4;
}
.sl-jrn-fact-icon {
	font-size: 1.1rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Footer */
.sl-jrn-modal-footer {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 1rem 1.75rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.25);
}
.sl-jrn-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	color: var(--sl-text-2);
	font-family: var(--sl-font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}
.sl-jrn-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sl-text);
}
.sl-jrn-btn--ghost {
	background: rgba(45, 212, 191, 0.08);
	border-color: rgba(45, 212, 191, 0.25);
	color: var(--sl-teal);
}
.sl-jrn-btn--ghost:hover {
	background: rgba(45, 212, 191, 0.15);
	color: var(--sl-text);
}
.sl-jrn-btn--danger:hover {
	background: rgba(239, 68, 68, 0.12);
	border-color: rgba(239, 68, 68, 0.3);
	color: var(--sl-danger);
}

/* Cursor + hover no time pill */
.sl-status-geo-time {
	cursor: pointer;
	transition: border-color 0.25s ease, background 0.25s ease;
}
.sl-status-geo-time:hover .sl-status-geo-time-value {
	color: var(--sl-text);
}
.sl-status-geo-time:focus-visible {
	outline: 2px solid rgba(45, 212, 191, 0.5);
	outline-offset: 2px;
}

/* Mobile */
@media (max-width: 600px) {
	.sl-jrn-modal { padding: 0.75rem; }
	.sl-jrn-header { padding: 1.5rem 1.25rem 0.85rem; }
	.sl-jrn-modal-body { padding: 0.5rem 1.25rem 1.25rem; }
	.sl-jrn-modal-footer { padding: 0.85rem 1.25rem; }
	.sl-jrn-modal-title { font-size: 1.3rem; }
	.sl-jrn-stats { grid-template-columns: repeat(2, 1fr); }
	.sl-jrn-achievements { grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
	.sl-jrn-ach { padding: 0.45rem 0.25rem; min-height: 62px; }
	.sl-jrn-ach-icon { font-size: 1.05rem; }
	.sl-jrn-ach-name { font-size: 0.48rem; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-jrn-modal-panel { animation: none; }
	.sl-jrn-bg-anim::before, .sl-jrn-bg-anim::after { animation: none; }
}

/* ========================================================================
   STATUS PAGE (page-status.php) — /status/
   Página completa de status: banner global, métricas, cards por monitor
   com sparkline barcode, atividade recente. Reusa endpoint sl_uptime.
   ======================================================================== */
.sl-status-hero { padding: 4rem 0 1rem; }
.sl-status-hero-inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 720px;
	margin: 0 auto;
}
.sl-status-hero-sub {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 1.05rem;
	line-height: 1.55;
	max-width: 600px;
	margin: 0;
}

/* Banner global de estado */
.sl-status-banner-section { padding: 1rem 0 0.5rem; }
.sl-status-banner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 1.4rem;
	border-radius: 14px;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	background: rgba(255,255,255,0.02);
	transition: background 0.3s, border-color 0.3s;
}
.sl-status-banner-icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: currentColor;
}
.sl-status-banner-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.sl-status-banner-text strong {
	font-size: 1.15rem;
	color: var(--sl-text, #fafafc);
}
.sl-status-banner-text span {
	font-size: 0.78rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-status-banner-refresh {
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.1));
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	width: 36px; height: 36px;
	border-radius: 8px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sl-status-banner-refresh:hover {
	border-color: var(--sl-teal, #2dd4bf);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-banner-refresh.is-spinning svg {
	animation: sl-status-spin 1s linear;
}
@keyframes sl-status-spin {
	from { transform: rotate(0); } to { transform: rotate(360deg); }
}

/* Variantes de cor do banner por estado */
.sl-status-banner--up {
	background: linear-gradient(135deg, rgba(45,212,191,0.12), rgba(45,212,191,0.02));
	border-color: rgba(45,212,191,0.35);
}
.sl-status-banner--up .sl-status-banner-icon {
	background: rgba(45,212,191,0.2);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-banner--degraded {
	background: linear-gradient(135deg, rgba(255,176,32,0.12), rgba(255,176,32,0.02));
	border-color: rgba(255,176,32,0.35);
}
.sl-status-banner--degraded .sl-status-banner-icon {
	background: rgba(255,176,32,0.2);
	color: #ffb020;
}
.sl-status-banner--down {
	background: linear-gradient(135deg, rgba(255,64,96,0.15), rgba(255,64,96,0.03));
	border-color: rgba(255,64,96,0.4);
}
.sl-status-banner--down .sl-status-banner-icon {
	background: rgba(255,64,96,0.2);
	color: #ff4060;
}
.sl-status-banner--maintenance {
	background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(99,102,241,0.02));
	border-color: rgba(99,102,241,0.35);
}
.sl-status-banner--maintenance .sl-status-banner-icon {
	background: rgba(99,102,241,0.2);
	color: #818cf8;
}
.sl-status-banner--unknown .sl-status-banner-icon {
	background: rgba(255,255,255,0.05);
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* Métricas agregadas */
.sl-status-metrics-section { padding: 1rem 0 1.5rem; }
.sl-status-metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
@media (max-width: 720px) { .sl-status-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .sl-status-metrics { grid-template-columns: 1fr; } }
.sl-status-metric {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.sl-status-metric-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}
.sl-status-metric strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 1.85rem;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.sl-status-metric-sub {
	font-size: 0.72rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-status-metric.is-alert {
	border-color: rgba(255,176,32,0.4);
	background: linear-gradient(180deg, rgba(255,176,32,0.06), rgba(255,176,32,0));
}
.sl-status-metric.is-alert strong { color: #ffb020; }

/* Cards de monitor */
.sl-status-monitors-section { padding: 1.5rem 0; }
.sl-status-monitors-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 1rem;
	gap: 1rem;
}
.sl-status-section-title {
	font-size: 1.4rem;
	margin: 0;
	color: var(--sl-text, #fafafc);
}
.sl-status-section-meta {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.sl-status-monitors {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.sl-status-monitor {
	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: 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
.sl-status-monitor--down {
	border-color: rgba(255,64,96,0.35);
	background: linear-gradient(180deg, rgba(255,64,96,0.05), rgba(255,64,96,0));
}
.sl-status-monitor--degraded {
	border-color: rgba(255,176,32,0.3);
	background: linear-gradient(180deg, rgba(255,176,32,0.04), rgba(255,176,32,0));
}
.sl-status-monitor-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.sl-status-monitor-title {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	min-width: 0;
}
.sl-status-monitor-title strong {
	font-size: 1.1rem;
	color: var(--sl-text, #fafafc);
}
.sl-status-monitor-key {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.1em;
	background: rgba(255,255,255,0.04);
	padding: 0.15em 0.5em;
	border-radius: 4px;
}

/* Pill de status no card */
.sl-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.sl-status-pill-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}
.sl-status-pill--up {
	background: rgba(45,212,191,0.12);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-pill--up .sl-status-pill-dot { animation: sl-status-pulse 2s ease-in-out infinite; }
.sl-status-pill--degraded { background: rgba(255,176,32,0.14); color: #ffb020; }
.sl-status-pill--down     { background: rgba(255,64,96,0.16);  color: #ff4060; }
.sl-status-pill--maintenance { background: rgba(99,102,241,0.14); color: #818cf8; }
.sl-status-pill--unknown  { background: rgba(255,255,255,0.05); color: var(--sl-text-3, rgba(250,250,252,0.5)); }
@keyframes sl-status-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Sparkline barcode — heartbeats coloridos por status */
.sl-status-bar {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 60px;
	padding: 0.4rem 0;
	background: rgba(0,0,0,0.18);
	border-radius: 8px;
	padding: 0.5rem;
	overflow: hidden;
}
.sl-status-tick {
	flex: 1;
	min-width: 3px;
	border-radius: 2px;
	transition: opacity 0.2s, transform 0.15s;
	cursor: help;
}
.sl-status-tick:hover { transform: scaleY(1.05); }
.sl-status-tick--up          { background: var(--sl-teal, #2dd4bf); }
.sl-status-tick--degraded    { background: #ffb020; }
.sl-status-tick--down        { background: #ff4060; }
.sl-status-tick--maintenance { background: #818cf8; }
.sl-status-tick--unknown     { background: rgba(255,255,255,0.15); }

/* Stats row do monitor */
.sl-status-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
}
@media (max-width: 540px) { .sl-status-stats { grid-template-columns: repeat(2, 1fr); } }
.sl-status-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.7rem;
	background: rgba(0,0,0,0.18);
	border-radius: 8px;
}
.sl-status-stat-label {
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: var(--sl-font-mono, monospace);
}
.sl-status-stat strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.95rem;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}

/* Footer do card */
.sl-status-monitor-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: 0.72rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-status-monitor-msg { min-width: 0; }
.sl-status-monitor-interval {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.68rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* Atividade recente */
.sl-status-activity-section { padding: 1.5rem 0; }
.sl-status-activity {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-status-activity-empty {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 1.1rem 1.25rem;
	background: rgba(45,212,191,0.05);
	border: 1px solid rgba(45,212,191,0.15);
	border-radius: 10px;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 0.85rem;
}
.sl-status-activity-empty svg { color: var(--sl-teal, #2dd4bf); flex-shrink: 0; }
.sl-status-activity-item {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
}
.sl-status-activity-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	margin-top: 0.42rem;
	flex-shrink: 0;
}
.sl-status-activity-dot--down        { background: #ff4060; }
.sl-status-activity-dot--degraded    { background: #ffb020; }
.sl-status-activity-dot--maintenance { background: #818cf8; }
.sl-status-activity-dot--unknown     { background: rgba(255,255,255,0.3); }
.sl-status-activity-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}
.sl-status-activity-line {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.sl-status-activity-line strong { color: var(--sl-text, #fafafc); font-size: 0.9rem; }
.sl-status-activity-status {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.1em 0.5em;
	border-radius: 4px;
}
.sl-status-activity-status--down        { color: #ff4060; background: rgba(255,64,96,0.1); }
.sl-status-activity-status--degraded    { color: #ffb020; background: rgba(255,176,32,0.1); }
.sl-status-activity-status--maintenance { color: #818cf8; background: rgba(99,102,241,0.1); }
.sl-status-activity-time {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* Meta — como medimos */
.sl-status-meta-section { padding: 1.5rem 0; }
.sl-status-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 720px) { .sl-status-meta { grid-template-columns: 1fr; } }
.sl-status-meta-card {
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
	padding: 1.2rem 1.4rem;
}
.sl-status-meta-card h3 {
	margin: 0 0 0.6rem;
	font-size: 0.75rem;
	font-family: var(--sl-font-mono, monospace);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-meta-card p {
	margin: 0 0 0.7rem;
	color: var(--sl-text-2, rgba(250,250,252,0.72));
	font-size: 0.85rem;
	line-height: 1.55;
}
.sl-status-meta-card p:last-child { margin-bottom: 0; }
.sl-status-meta-card ul {
	margin: 0 0 0.7rem;
	padding: 0 0 0 1.2rem;
	color: var(--sl-text-2, rgba(250,250,252,0.72));
	font-size: 0.85rem;
	line-height: 1.55;
}
.sl-status-meta-card ul strong { color: var(--sl-text, #fafafc); }
.sl-status-meta-note { font-size: 0.75rem !important; color: var(--sl-text-3, rgba(250,250,252,0.5)) !important; }
.sl-status-meta-note code {
	background: rgba(0,0,0,0.3);
	padding: 0.1em 0.4em;
	border-radius: 3px;
	font-size: 0.85em;
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-link {
	color: var(--sl-teal, #2dd4bf);
	text-decoration: none;
	border-bottom: 1px dashed rgba(45,212,191,0.4);
}
.sl-status-link:hover { border-bottom-color: var(--sl-teal, #2dd4bf); }

/* ========================================================================
   STATUS PAGE — Tier S premium additions
   90-day history barcode · MTTR/MTBF/SLA · Error · Toast · Badge · Fetch indicator
   ======================================================================== */

/* --- Error state acima do banner --- */
.sl-status-error {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.95rem 1.2rem;
	background: rgba(255,64,96,0.08);
	border: 1px solid rgba(255,64,96,0.3);
	border-radius: 12px;
	margin-bottom: 0.85rem;
	color: var(--sl-text, #fafafc);
}
/* Override do [hidden] — sem isso, display:flex acima vence o display:none default */
.sl-status-error[hidden] { display: none; }
.sl-status-error svg { color: #ff4060; flex-shrink: 0; }
.sl-status-error-text { display: flex; flex-direction: column; gap: 0.15rem; }
.sl-status-error-text strong { color: #ff4060; font-size: 0.95rem; }
.sl-status-error-text span    { color: var(--sl-text-2); font-size: 0.78rem; }

/* --- SLA card variant — verde se met, amarelo se miss --- */
.sl-status-metric--sla.is-met {
	border-color: rgba(45,212,191,0.3);
	background: linear-gradient(180deg, rgba(45,212,191,0.05), rgba(45,212,191,0));
}
.sl-status-metric--sla.is-met strong { color: var(--sl-teal, #2dd4bf); }
.sl-status-metric--sla:not(.is-met) {
	border-color: rgba(255,176,32,0.3);
	background: linear-gradient(180deg, rgba(255,176,32,0.05), rgba(255,176,32,0));
}
.sl-status-metric--sla:not(.is-met) strong { color: #ffb020; }

/* --- 90-day history barcode --- */
.sl-status-history {
	display: flex;
	gap: 2px;
	height: 40px;
	padding: 4px;
	background: rgba(0,0,0,0.18);
	border-radius: 8px;
	align-items: stretch;
}
.sl-status-day {
	flex: 1;
	min-width: 2px;
	border-radius: 2px;
	cursor: help;
	transition: transform 0.15s, opacity 0.2s;
}
.sl-status-day:hover { transform: scaleY(1.1); }
.sl-status-day--up          { background: var(--sl-teal, #2dd4bf); }
.sl-status-day--degraded    { background: #ffb020; }
.sl-status-day--down        { background: #ff4060; }
.sl-status-day--maintenance { background: #818cf8; }
.sl-status-day--empty {
	background: rgba(255,255,255,0.04);
	border: 1px dashed rgba(255,255,255,0.06);
}
.sl-status-history-legend {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.4rem;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.05em;
	gap: 1rem;
}
.sl-status-history-meta {
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	font-size: 0.7rem;
	text-align: center;
	flex: 1;
}

/* --- Fetch indicator (pulse no banner enquanto busca) --- */
.sl-status-banner.is-fetching {
	box-shadow: 0 0 0 0 currentColor;
	animation: sl-status-fetch-pulse 1.5s ease-in-out infinite;
}
@keyframes sl-status-fetch-pulse {
	0%, 100% { box-shadow: inset 0 0 0 1px rgba(45,212,191,0.0); }
	50%      { box-shadow: inset 0 0 0 1px rgba(45,212,191,0.5); }
}
.sl-status-banner-refresh.is-fetching {
	animation: sl-status-spin 1s linear infinite;
}

/* --- Code blocks (API URL + badge HTML) --- */
.sl-status-code-block {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.65rem;
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
	margin: 0.6rem 0 0.4rem;
	overflow-x: auto;
	white-space: nowrap;
}
.sl-status-code-block code {
	flex: 1;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-teal, #2dd4bf);
	background: transparent;
	padding: 0;
	border-radius: 0;
	min-width: 0;
}
.sl-status-copy-btn {
	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.62));
	width: 28px;
	height: 28px;
	border-radius: 5px;
	display: grid;
	place-items: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.sl-status-copy-btn:hover {
	border-color: var(--sl-teal, #2dd4bf);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-copy-btn.is-copied {
	border-color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.1);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-copy-btn.is-copied svg { display: none; }
.sl-status-copy-btn.is-copied::after {
	content: '✓';
	font-weight: 700;
	font-size: 0.85rem;
}

/* --- Badge preview --- */
.sl-status-meta-card--badge .sl-status-badge-preview {
	margin: 0.6rem 0 0.4rem;
	padding: 0.85rem 0.75rem;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
}
.sl-status-badge-preview img {
	display: block;
	max-width: 100%;
	height: auto;
}
.sl-status-badge-preview-label {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	letter-spacing: 0.05em;
}

/* --- Toast notifications (status changes) --- */
.sl-status-toast-stack {
	position: fixed;
	top: 5rem;
	right: 1rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	pointer-events: none;
	max-width: 360px;
}
.sl-status-toast {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	background: rgba(20,20,28,0.96);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.1));
	border-radius: 12px;
	box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
	pointer-events: auto;
	animation: sl-status-toast-in 0.32s cubic-bezier(0.22,1,0.36,1);
	min-width: 280px;
}
.sl-status-toast.is-leaving {
	animation: sl-status-toast-out 0.25s ease forwards;
}
.sl-status-toast--recovery {
	border-color: rgba(45,212,191,0.4);
	background: linear-gradient(180deg, rgba(45,212,191,0.08), rgba(20,20,28,0.96));
}
.sl-status-toast--recovery .sl-status-toast-icon { color: var(--sl-teal, #2dd4bf); }
.sl-status-toast--incident {
	border-color: rgba(255,64,96,0.5);
	background: linear-gradient(180deg, rgba(255,64,96,0.08), rgba(20,20,28,0.96));
}
.sl-status-toast--incident .sl-status-toast-icon { color: #ff4060; }
.sl-status-toast-icon {
	flex-shrink: 0;
	margin-top: 0.1rem;
}
.sl-status-toast-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}
.sl-status-toast-body strong { color: var(--sl-text, #fafafc); font-size: 0.9rem; }
.sl-status-toast-body small {
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
}
.sl-status-toast-close {
	background: transparent;
	border: none;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	padding: 0 0.25rem;
	flex-shrink: 0;
	transition: color 0.2s;
}
.sl-status-toast-close:hover { color: var(--sl-text, #fafafc); }
@keyframes sl-status-toast-in {
	from { opacity: 0; transform: translateX(20px); }
	to   { opacity: 1; transform: translateX(0); }
}
@keyframes sl-status-toast-out {
	from { opacity: 1; transform: translateX(0); }
	to   { opacity: 0; transform: translateX(20px); }
}
@media (max-width: 480px) {
	.sl-status-toast-stack { left: 1rem; right: 1rem; max-width: none; top: 4.5rem; }
	.sl-status-toast { min-width: 0; }
}

/* --- Meta card grid: primeiro card mais largo (mais texto explicativo) --- */
@media (min-width: 880px) {
	.sl-status-meta { grid-template-columns: 2fr 1.3fr 1.3fr; }
}

/* ========================================================================
   STATUS PAGE — Tier C — Response time chart + Incidents
   ======================================================================== */

/* Chart de tempo de resposta */
.sl-status-chart-section {
	padding: 1.5rem 0;
}
.sl-status-chart-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}
.sl-status-chart-controls {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
}
.sl-status-chart-tabs,
.sl-status-chart-periods {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 8px;
}
.sl-status-chart-tab,
.sl-status-chart-period {
	background: transparent;
	border: none;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	padding: 0.4rem 0.75rem;
	border-radius: 5px;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	cursor: pointer;
	transition: background 0.2s, color 0.2s;
	white-space: nowrap;
}
.sl-status-chart-tab:hover,
.sl-status-chart-period:hover {
	color: var(--sl-text, #fafafc);
}
.sl-status-chart-tab.is-active,
.sl-status-chart-period.is-active {
	background: rgba(45,212,191,0.12);
	color: var(--sl-teal, #2dd4bf);
}
.sl-status-chart-wrap {
	position: relative;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 12px;
	background: rgba(0,0,0,0.18);
	padding: 0.75rem;
	min-height: 240px;
}
.sl-status-chart {
	width: 100%;
	height: 220px;
}
.sl-status-chart svg { display: block; }
.sl-status-chart-empty {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	background: rgba(0,0,0,0.4);
	backdrop-filter: blur(2px);
}
/* Override do [hidden] — sem isso, display:flex acima vence display:none default */
.sl-status-chart-empty[hidden] { display: none; }
.sl-status-chart-empty svg { color: var(--sl-text-3, rgba(250,250,252,0.5)); }
.sl-status-chart-empty p { margin: 0; font-size: 0.85rem; }
.sl-status-chart-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin-top: 0.85rem;
}
@media (max-width: 540px) { .sl-status-chart-stats { grid-template-columns: repeat(2, 1fr); } }
.sl-status-chart-stats > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.55rem 0.7rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.06));
	border-radius: 8px;
}
.sl-status-chart-stats span {
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-family: var(--sl-font-mono, monospace);
}
.sl-status-chart-stats strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 1rem;
	color: var(--sl-text, #fafafc);
	font-variant-numeric: tabular-nums;
}

/* ─── Incidents — destaque "ativos" no topo de /status/ ─── */
.sl-status-active-incidents-section { padding: 1rem 0 0; }
.sl-status-active-incidents {
	border: 1px solid rgba(255,64,96,0.4);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(255,64,96,0.08), rgba(255,64,96,0));
	padding: 1rem 1.2rem;
}
.sl-status-active-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: #ff4060;
	margin-bottom: 0.7rem;
	font-size: 0.95rem;
}
.sl-status-active-incidents ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.sl-status-active-incidents li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	background: rgba(0,0,0,0.2);
	border-radius: 8px;
	flex-wrap: wrap;
}
.sl-status-active-incidents li a {
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	font-weight: 600;
	flex: 1;
	min-width: 0;
}
.sl-status-active-incidents li a:hover { color: var(--sl-teal, #2dd4bf); }
.sl-status-active-incidents li small {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-transform: uppercase;
}

/* ─── Severity badge (compartilhado entre widget, archive, single) ─── */
.sl-status-incident-sev {
	display: inline-flex;
	align-items: center;
	padding: 0.18em 0.65em;
	border-radius: 4px;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--sev-color) 18%, transparent);
	color: var(--sev-color, #9ca3af);
	flex-shrink: 0;
}

/* ─── Recent incidents list (resolvidos últimos 7d) ─── */
.sl-status-recent-incidents-section { padding: 1.5rem 0; }
.sl-status-section-link {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	color: var(--sl-teal, #2dd4bf);
	text-decoration: none;
	letter-spacing: 0.04em;
}
.sl-status-section-link:hover { text-decoration: underline; }
.sl-status-recent-incidents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.sl-status-recent-incidents li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.95rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	flex-wrap: wrap;
}
.sl-status-recent-incidents li a {
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	font-weight: 500;
	flex: 1;
	min-width: 0;
}
.sl-status-recent-incidents li a:hover { color: var(--sl-teal, #2dd4bf); }
.sl-status-recent-incidents li small {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.7rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
}

/* ─── Archive de incidents ─── */
.sl-status-incidents-section { padding: 1.5rem 0; }
.sl-status-incidents-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-status-incident-card {
	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: 1.2rem 1.4rem;
}
.sl-status-incident-card--investigating,
.sl-status-incident-card--identified,
.sl-status-incident-card--monitoring {
	border-left: 3px solid #ff4060;
}
.sl-status-incident-head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	flex-wrap: wrap;
	margin-bottom: 0.65rem;
}
.sl-status-incident-title {
	flex: 1;
	color: var(--sl-text, #fafafc);
	text-decoration: none;
	font-size: 1.1rem;
	font-weight: 600;
	min-width: 0;
}
.sl-status-incident-title:hover { color: var(--sl-teal, #2dd4bf); }
.sl-status-incident-status {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.18em 0.65em;
	border-radius: 4px;
}
.sl-status-incident-status--resolved      { background: rgba(45,212,191,0.15); color: var(--sl-teal, #2dd4bf); }
.sl-status-incident-status--investigating { background: rgba(255,64,96,0.15);  color: #ff4060; }
.sl-status-incident-status--identified    { background: rgba(255,176,32,0.15); color: #ffb020; }
.sl-status-incident-status--monitoring    { background: rgba(99,102,241,0.15); color: #818cf8; }
.sl-status-incident-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.2rem;
	font-size: 0.78rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
	margin-bottom: 0.7rem;
}
.sl-status-incident-meta strong { color: var(--sl-text, #fafafc); margin-right: 0.3em; }
.sl-status-incident-excerpt {
	color: var(--sl-text-2, rgba(250,250,252,0.7));
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0 0 0.7rem;
}
.sl-status-incident-readmore {
	display: inline-block;
	color: var(--sl-teal, #2dd4bf);
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
}
.sl-status-incident-readmore:hover { text-decoration: underline; }
.sl-status-incidents-empty {
	text-align: center;
	padding: 4rem 2rem;
	color: var(--sl-text-2, rgba(250,250,252,0.62));
}
.sl-status-incidents-empty svg { color: var(--sl-teal, #2dd4bf); margin-bottom: 1rem; }
.sl-status-incidents-empty h2 { color: var(--sl-text, #fafafc); margin-bottom: 0.5rem; }
.sl-status-incidents-empty p { margin: 0 0 1.5rem; }
.sl-status-pagination {
	margin-top: 2rem;
	text-align: center;
}
.sl-status-pagination .nav-links {
	display: inline-flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	justify-content: center;
}
.sl-status-pagination .page-numbers {
	display: inline-block;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 8px;
	color: var(--sl-text-2);
	text-decoration: none;
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.8rem;
}
.sl-status-pagination .page-numbers:hover {
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}
.sl-status-pagination .page-numbers.current {
	background: rgba(45,212,191,0.12);
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}

/* ─── Single de incidente ─── */
.sl-status-incident-single-head {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-top: 1rem;
}
.sl-status-incident-meta--single {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.6rem;
	background: rgba(255,255,255,0.02);
	border: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	border-radius: 10px;
	padding: 1rem 1.2rem;
	margin-top: 1.5rem;
}
.sl-status-incident-meta--single > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.sl-status-incident-meta--single strong {
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.65rem;
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.sl-status-incident-meta--single span {
	color: var(--sl-text, #fafafc);
	font-size: 0.85rem;
	font-weight: 500;
}
.sl-status-incident-body .sl-prose {
	color: var(--sl-text, #fafafc);
	font-size: 1rem;
	line-height: 1.65;
	margin-top: 1.5rem;
}
.sl-status-incident-body .sl-prose h2 { margin-top: 2rem; margin-bottom: 0.75rem; }
.sl-status-incident-body .sl-prose p  { margin: 0 0 1rem; }
.sl-status-incident-body .sl-prose ul,
.sl-status-incident-body .sl-prose ol { margin: 0 0 1rem 1.5rem; }
.sl-status-incident-foot {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sl-line, rgba(255,255,255,0.08));
	color: var(--sl-text-3, rgba(250,250,252,0.5));
	font-size: 0.78rem;
	font-family: var(--sl-font-mono, monospace);
}

/* ========================================================================
   BILLING REQUEST FORM — [sl_billing_form] + page-segunda-via-boleto.php
   Layout single-card premium: header + stats + form + how + security + foot
   ======================================================================== */

/* ─── WRAPPER + CARD ─── */
.sl-boleto-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 1rem 1rem 5rem;
}
.sl-boleto-card {
	width: 100%;
	max-width: 640px;
	position: relative;
	border-radius: 28px;
	box-shadow:
		0 0 50px -10px rgba(241, 96, 0, 0.18),
		0 0 80px -20px rgba(45, 212, 191, 0.1),
		0 28px 80px -24px rgba(0, 0, 0, 0.7);
	/* Fade-up sutil ao carregar — combina com .sl-reveal do resto do site */
	animation: sl-boleto-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sl-boleto-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sl-boleto-card { animation: none; }
}

/* Halo glow gradient — borda animada premium (mesmo @property anterior) */
.sl-boleto-halo {
	position: absolute;
	inset: -1px;
	border-radius: 28px;
	background: conic-gradient(
		from var(--sl-halo-angle, 0deg),
		var(--sl-brand, #f16000),
		var(--sl-teal, #2dd4bf),
		var(--sl-lime, #c4ff3e),
		var(--sl-brand, #f16000)
	);
	opacity: 0.45;
	filter: blur(4px);
	animation: sl-billing-halo-spin 6s linear infinite;
	pointer-events: none;
	z-index: 0;
}
/* @property + keyframe — anima o ÂNGULO do conic-gradient, retângulo NÃO gira.
 * Evita o "corner sweep" feio de rotação geométrica. */
@property --sl-halo-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}
@keyframes sl-billing-halo-spin {
	to { --sl-halo-angle: 360deg; }
}
.sl-boleto-card-inner {
	position: relative;
	z-index: 1;
	padding: 2.5rem 2.25rem;
	background: linear-gradient(180deg, rgba(20, 20, 26, 0.97), rgba(14, 14, 20, 0.98));
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
	border-radius: 27px;
	overflow: hidden;
}
/* Aurora interna sutil — radial gradient laranja sumindo */
.sl-boleto-card-inner::before {
	content: "";
	position: absolute;
	top: -40%; left: 50%;
	width: 140%; height: 120%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at top, rgba(241, 96, 0, 0.12), transparent 55%);
	pointer-events: none;
	z-index: 0;
}
.sl-boleto-card-inner > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.sl-boleto-halo { animation: none; opacity: 0.35; }
}

/* ─── STATS ROW ─── */
.sl-boleto-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem;
	padding: 1.15rem 1rem;
	margin-bottom: 2rem;
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.08));
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.02);
}
.sl-boleto-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.3rem;
	padding: 0.35rem 0.5rem;
	border-right: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
}
.sl-boleto-stat:last-child { border-right: 0; }
.sl-boleto-stat-icon {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.18);
	color: var(--sl-teal, #2dd4bf);
	margin-bottom: 0.15rem;
	transition: background 0.2s, transform 0.2s;
}
.sl-boleto-stat:hover .sl-boleto-stat-icon {
	background: rgba(45, 212, 191, 0.15);
	transform: translateY(-1px);
}
.sl-boleto-stat strong {
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
	line-height: 1.25;
	letter-spacing: -0.005em;
}
.sl-boleto-stat span {
	font-size: 0.72rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.55));
	line-height: 1.4;
}

/* ─── FORM ─── */
.sl-boleto-form { margin-bottom: 2rem; }
.sl-boleto-field { margin-bottom: 1rem; }
.sl-boleto-field label {
	display: block;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.55));
	margin-bottom: 0.45rem;
}
.sl-boleto-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}
.sl-boleto-input-icon {
	position: absolute;
	left: 1.05rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.4));
	pointer-events: none;
	transition: color 0.2s;
}
.sl-boleto-input-wrap input {
	width: 100%;
	padding: 0.95rem 1.1rem 0.95rem 2.9rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.1));
	border-radius: 12px;
	color: var(--sl-text, #fafafc);
	font-family: inherit;
	font-size: 1rem;
	transition: all 0.25s ease;
	box-sizing: border-box;
	outline: none;
}
.sl-boleto-input-wrap input::placeholder {
	color: var(--sl-text-3, rgba(250, 250, 252, 0.38));
}
.sl-boleto-input-wrap input:focus {
	border-color: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.6);
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 4px rgba(var(--sl-brand-rgb, 241, 96, 0), 0.12);
}
.sl-boleto-input-wrap:focus-within .sl-boleto-input-icon {
	color: var(--sl-brand, #f16000);
}
.sl-boleto-field small {
	display: block;
	font-size: 0.78rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
	line-height: 1.5;
	margin-top: 0.55rem;
}
.sl-boleto-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ─── LGPD consent checkbox ─── */
.sl-boleto-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.08));
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.sl-boleto-consent:hover {
	border-color: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.4);
	background: rgba(255, 255, 255, 0.04);
}
.sl-boleto-consent input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--sl-brand, #f16000);
	cursor: pointer;
}
.sl-boleto-consent span {
	font-size: 0.82rem;
	line-height: 1.5;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.72));
}
.sl-boleto-consent a {
	color: var(--sl-brand, #f16000);
	text-decoration: underline;
	text-decoration-color: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.4);
	text-underline-offset: 2px;
	transition: text-decoration-color 0.2s;
}
.sl-boleto-consent a:hover {
	text-decoration-color: var(--sl-brand, #f16000);
}

/* ─── BOTÃO ─── */
.sl-boleto-btn {
	width: 100%;
	margin-top: 1.25rem;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.6rem;
	padding: 1rem 1.5rem !important;
	font-size: 1rem;
	font-weight: 600;
}
.sl-boleto-btn-arrow {
	transition: transform 0.25s var(--sl-ease, cubic-bezier(0.22,1,0.36,1));
}
.sl-boleto-btn:hover .sl-boleto-btn-arrow {
	transform: translateX(4px);
}
.sl-boleto-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.sl-billing-submit-spinner {
	animation: sl-billing-spin 0.9s linear infinite;
}
@keyframes sl-billing-spin {
	to { transform: rotate(360deg); }
}
/* Esconde arrow quando carregando */
.sl-billing-submit:disabled .sl-boleto-btn-arrow { display: none; }

/* ─── ALERT (success/error) ─── */
.sl-billing-message {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	font-size: 0.9rem;
	line-height: 1.4;
}
.sl-billing-message--success {
	background: rgba(45, 212, 191, 0.1);
	border: 1px solid rgba(45, 212, 191, 0.4);
	color: var(--sl-teal, #2dd4bf);
}
.sl-billing-message--error {
	background: rgba(255, 64, 96, 0.1);
	border: 1px solid rgba(255, 64, 96, 0.4);
	color: #ff4060;
}

/* ─── EXTRAS (fora do card) — Como funciona + Security ─── */
.sl-boleto-extras {
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	animation: sl-boleto-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
@media (prefers-reduced-motion: reduce) {
	.sl-boleto-extras { animation: none; }
}

/* ─── COMO FUNCIONA (standalone fora do card) ─── */
.sl-boleto-how {
	padding: 1.5rem 1.75rem;
	background: rgba(255, 255, 255, 0.015);
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
	border-radius: 16px;
}
.sl-boleto-how-label {
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.55));
	margin-bottom: 1rem;
}
.sl-boleto-how-steps {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.sl-boleto-how-step {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 1rem;
	align-items: center;
}
.sl-boleto-how-num {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.1);
	border: 1px solid rgba(var(--sl-brand-rgb, 241, 96, 0), 0.3);
	display: grid;
	place-items: center;
	font-family: var(--sl-font-mono, 'JetBrains Mono', monospace);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--sl-brand, #f16000);
	letter-spacing: 0.02em;
	transition: transform 0.2s, background 0.2s;
}
.sl-boleto-how-step:hover .sl-boleto-how-num {
	transform: scale(1.06);
	background: rgba(var(--sl-brand-rgb, 241, 96, 0), 0.18);
}
.sl-boleto-how-step > div {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.sl-boleto-how-step strong {
	font-size: 0.98rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
}
.sl-boleto-how-step span {
	font-size: 0.86rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.62));
	line-height: 1.5;
}

/* ─── SECURITY NOTE (standalone fora do card) ─── */
.sl-boleto-security {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: 1rem;
	align-items: center;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(45, 212, 191, 0.22);
	border-radius: 14px;
	background: rgba(45, 212, 191, 0.04);
}
.sl-boleto-security-icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(45, 212, 191, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sl-teal, #2dd4bf);
	flex-shrink: 0;
}
.sl-boleto-security-icon svg { display: block; }
.sl-boleto-security > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.sl-boleto-security strong {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sl-text, #fafafc);
}
.sl-boleto-security span {
	font-size: 0.85rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.62));
	line-height: 1.5;
}

/* ─── FOOTER FALLBACK ─── */
.sl-boleto-foot {
	padding-top: 1.25rem;
	border-top: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.85rem;
}
.sl-boleto-foot span {
	color: var(--sl-text-3, rgba(250, 250, 252, 0.5));
}
.sl-boleto-foot-link {
	color: var(--sl-brand, #f16000);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}
.sl-boleto-foot-link:hover {
	color: var(--sl-brand-3, #ff8033);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 620px) {
	.sl-boleto-wrap { padding: 1.5rem 0.75rem 3rem; }
	.sl-boleto-card-inner { padding: 1.75rem 1.35rem; }
	.sl-boleto-stats {
		grid-template-columns: 1fr;
		gap: 0;
		padding: 0.5rem;
	}
	.sl-boleto-stat {
		flex-direction: row;
		justify-content: flex-start;
		gap: 0.8rem;
		border-right: 0;
		border-bottom: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
		padding: 0.85rem 0.75rem;
		text-align: left;
	}
	.sl-boleto-stat:last-child { border-bottom: 0; }
	.sl-boleto-stat strong { font-size: 0.95rem; }
	.sl-boleto-foot { flex-direction: column; align-items: flex-start; }
}