/* ==========================================================================
   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;
}

/* ========================================================================
   LIGHT THEME OVERRIDES — ativado via [data-theme="light"] no <html>.
   Inverte os tokens principais. Componentes usando vars do design system
   se adaptam automaticamente. Hardcoded colors (rgba whites/blacks) podem
   precisar de ajustes pontuais — iteramos conforme aparecem inconsistências.
   ======================================================================== */
:root[data-theme="light"] {
	--sl-ink: #f6f6fa;
	--sl-ink-2: #ffffff;
	--sl-ink-3: #eeeef4;
	--sl-surface: rgba(0, 0, 0, 0.04);
	--sl-surface-hi: rgba(0, 0, 0, 0.07);
	--sl-line: rgba(0, 0, 0, 0.08);
	--sl-line-hi: rgba(0, 0, 0, 0.16);
	--sl-text: #0a0a14;
	--sl-text-2: rgba(10, 10, 20, 0.68);
	--sl-text-3: rgba(10, 10, 20, 0.45);
	--sl-shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.12);
	--sl-shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, 0.18);
}

/* Smooth transition entre temas — só nos elementos top-level pra evitar
 * cascade pesado em milhares de componentes. */
html, body { transition: background-color 0.35s ease, color 0.35s ease; }

/* ========================================================================
   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.85rem 0.4rem 0.85rem;
	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;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
/* Hover universal — lift sutil + accent teal */
.sl-chip:hover {
	transform: translateY(-1px);
	border-color: rgba(45, 212, 191, 0.35);
	background: rgba(45, 212, 191, 0.06);
}
.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;
	/* Posição padrão (bottom-right) — pode ser sobrescrita por .sl-ticker--* */
	right: 1.25rem;
	left: auto;
	bottom: 1.25rem;
	top: auto;
	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;
}
/* Posições configuráveis via Customizer (Customizer → Eventos do Ticker → Posição).
 * Anima slide-in do canto correspondente quando is-visible. */
.sl-ticker--bottom-right { right: 1.25rem; left: auto; bottom: 1.25rem; top: auto; }
.sl-ticker--bottom-left  { left: 1.25rem; right: auto; bottom: 1.25rem; top: auto; }
.sl-ticker--top-right    { right: 1.25rem; left: auto; top: 5rem;       bottom: auto; }
.sl-ticker--top-left     { left: 1.25rem; right: auto; top: 5rem;       bottom: auto; }
/* Tickers no topo: animação inverte (slide DOWN em vez de UP) */
.sl-ticker--top-right,
.sl-ticker--top-left {
	transform: translateY(-12px);
}
.sl-ticker--top-right.is-visible,
.sl-ticker--top-left.is-visible {
	transform: translateY(0);
}
.sl-ticker--top-right.is-hidden,
.sl-ticker--top-left.is-hidden {
	transform: translateY(-12px) !important;
}
.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);
	/* Drag handle — JS adiciona cursor:grab e listeners. user-select pra
	 * não selecionar texto enquanto arrasta. touch-action pra mobile. */
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}
.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 rgba(255, 255, 255, 0.18);
	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;
}

/* Theme toggle (sun/moon) — alterna dark/light mode com morph animation
 * Os 2 ícones ficam SEMPRE no DOM, sobrepostos via grid. Uma transição
 * de rotação + fade troca o "ativo" sem swap brusco. */
.sl-theme-toggle {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
	border: 1px solid var(--sl-line);
	color: var(--sl-text-2);
	padding: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition:
		background 0.35s var(--sl-ease),
		border-color 0.35s var(--sl-ease),
		color 0.35s var(--sl-ease),
		transform 0.18s var(--sl-spring),
		box-shadow 0.35s var(--sl-ease);
}
/* Glow halo (::before) — radial brand color que aparece no hover */
.sl-theme-toggle::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: radial-gradient(
		circle at center,
		rgba(45, 212, 191, 0.25) 0%,
		transparent 65%
	);
	opacity: 0;
	transition: opacity 0.35s var(--sl-ease);
	z-index: -1;
}
.sl-theme-toggle:hover {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
	border-color: rgba(45, 212, 191, 0.40);
	color: var(--sl-teal);
	transform: scale(1.04);
	box-shadow:
		0 4px 12px -2px rgba(45, 212, 191, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.sl-theme-toggle:hover::before { opacity: 1; }
.sl-theme-toggle:active { transform: scale(0.96); }
.sl-theme-toggle:focus-visible {
	outline: 2px solid var(--sl-teal);
	outline-offset: 2px;
}

/* SVGs sobrepostos (sun + moon ocupam o mesmo grid cell) — anima rotação
 * + opacity ao trocar tema. Usa CSS-only (sem precisar JS adicionar/remover) */
.sl-theme-toggle svg {
	grid-area: 1 / 1;
	display: block;
	transition:
		transform 0.5s var(--sl-spring),
		opacity 0.35s var(--sl-ease);
	will-change: transform, opacity;
}
/* Dark mode (default): sun visível, moon escondida */
.sl-theme-toggle .sl-theme-toggle-sun {
	transform: rotate(0deg) scale(1);
	opacity: 1;
}
.sl-theme-toggle .sl-theme-toggle-moon {
	transform: rotate(-180deg) scale(0.5);
	opacity: 0;
	pointer-events: none;
}
/* Light mode: moon visível, sun escondida (rotaciona em direção oposta) */
:root[data-theme="light"] .sl-theme-toggle .sl-theme-toggle-sun {
	transform: rotate(180deg) scale(0.5);
	opacity: 0;
	pointer-events: none;
}
:root[data-theme="light"] .sl-theme-toggle .sl-theme-toggle-moon {
	transform: rotate(0deg) scale(1);
	opacity: 1;
}

/* Light mode override do toggle base — bg branco com border sutil + glow laranja */
:root[data-theme="light"] .sl-theme-toggle {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.10);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
:root[data-theme="light"] .sl-theme-toggle::before {
	background: radial-gradient(
		circle at center,
		rgba(241, 96, 0, 0.20) 0%,
		transparent 65%
	);
}
:root[data-theme="light"] .sl-theme-toggle:hover {
	background: #ffffff;
	border-color: rgba(241, 96, 0, 0.40);
	color: var(--sl-brand);
	box-shadow:
		0 4px 12px -2px rgba(241, 96, 0, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .sl-theme-toggle:focus-visible {
	outline-color: var(--sl-brand);
}

/* Reduced motion — desliga rotação, mantém apenas fade */
@media (prefers-reduced-motion: reduce) {
	.sl-theme-toggle svg { transition: opacity 0.2s ease; }
	.sl-theme-toggle .sl-theme-toggle-sun,
	.sl-theme-toggle .sl-theme-toggle-moon,
	:root[data-theme="light"] .sl-theme-toggle .sl-theme-toggle-sun,
	:root[data-theme="light"] .sl-theme-toggle .sl-theme-toggle-moon {
		transform: none;
	}
}
.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);
}

/* Header — brand + close */
.sl-mobile-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.25rem;
	border-bottom: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
}
.sl-mobile-drawer-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sl-text);
	font-family: var(--sl-font-display, 'Bricolage Grotesque', sans-serif);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}
.sl-mobile-drawer-brand img,
.sl-mobile-drawer-brand .custom-logo-link img {
	max-height: 28px;
	width: auto;
}
.sl-mobile-drawer-close {
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.1));
	border-radius: 10px;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.7));
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.sl-mobile-drawer-close:hover {
	color: var(--sl-text, #fafafc);
	border-color: var(--sl-teal, #2dd4bf);
	background: rgba(45, 212, 191, 0.06);
	transform: rotate(90deg);
}

/* Nav — links com ícone, label, arrow + stagger animation */
.sl-mobile-drawer-nav {
	flex: 1;
	padding: 0.85rem 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	overflow-y: auto;
}
.sl-mobile-drawer-group {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sl-mobile-drawer[aria-hidden="false"] .sl-mobile-drawer-group {
	opacity: 1;
	transform: translateX(0);
	transition-delay: var(--sl-drawer-delay, 0ms);
}
.sl-mobile-drawer-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 0.95rem;
	color: var(--sl-text-2, rgba(250, 250, 252, 0.78));
	font-family: var(--sl-font-body, sans-serif);
	font-size: 0.98rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	text-decoration: none;
	border-radius: 12px;
	border: 1px solid transparent;
	transition: background 0.2s, color 0.2s, border-color 0.2s, padding 0.25s;
}
.sl-mobile-drawer-link::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scaleY(0);
	width: 3px;
	height: 60%;
	background: linear-gradient(180deg, var(--sl-teal), var(--sl-lime));
	border-radius: 0 3px 3px 0;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sl-mobile-drawer-link:hover {
	background: rgba(45, 212, 191, 0.06);
	color: var(--sl-text);
}
.sl-mobile-drawer-link.is-active {
	background: rgba(45, 212, 191, 0.10);
	color: var(--sl-text);
	font-weight: 600;
}
.sl-mobile-drawer-link.is-active::before {
	transform: translateY(-50%) scaleY(1);
}
.sl-mobile-drawer-icon {
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--sl-text-3, rgba(250, 250, 252, 0.6));
	transition: background 0.2s, color 0.2s, transform 0.2s;
}
.sl-mobile-drawer-icon svg {
	width: 16px;
	height: 16px;
	display: block;
}
.sl-mobile-drawer-link:hover .sl-mobile-drawer-icon {
	background: rgba(45, 212, 191, 0.12);
	color: var(--sl-teal);
}
.sl-mobile-drawer-link.is-active .sl-mobile-drawer-icon {
	background: rgba(45, 212, 191, 0.16);
	color: var(--sl-teal);
}
.sl-mobile-drawer-label {
	flex: 1;
	min-width: 0;
}
.sl-mobile-drawer-arrow {
	display: inline-grid;
	place-items: center;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.35));
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.2s, transform 0.2s, color 0.2s;
}
.sl-mobile-drawer-link:hover .sl-mobile-drawer-arrow,
.sl-mobile-drawer-link.is-active .sl-mobile-drawer-arrow {
	opacity: 1;
	transform: translateX(0);
	color: var(--sl-teal);
}

/* Sub-itens (children) — indentado com border-left */
.sl-mobile-drawer-group ul {
	list-style: none;
	padding: 0 0 0 0.5rem;
	margin: 0.2rem 0 0.4rem 2.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	border-left: 1px solid var(--sl-line, rgba(255, 255, 255, 0.08));
}
.sl-mobile-drawer-group ul li a {
	display: block;
	padding: 0.5rem 0.85rem;
	color: var(--sl-text-3, rgba(250, 250, 252, 0.55));
	font-size: 0.85rem;
	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);
}

/* Footer — theme toggle + CTA */
.sl-mobile-drawer-foot {
	display: flex;
	gap: 0.5rem;
	padding: 1rem 1rem 1.25rem;
	border-top: 1px solid var(--sl-line, rgba(255, 255, 255, 0.06));
	align-items: center;
}
.sl-mobile-drawer-theme {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.7rem 0.85rem;
	background: transparent;
	border: 1px solid var(--sl-line, rgba(255, 255, 255, 0.10));
	border-radius: 10px;
	color: var(--sl-text-2);
	font-family: var(--sl-font-mono, monospace);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.sl-mobile-drawer-theme:hover {
	color: var(--sl-teal);
	border-color: rgba(45, 212, 191, 0.40);
	background: rgba(45, 212, 191, 0.06);
}
/* Toggle ícone — sun OU moon visível por vez (mesma lógica do header toggle) */
.sl-mobile-drawer-theme-sun { display: none; }
.sl-mobile-drawer-theme-moon { display: inline-block; }
[data-theme="light"] .sl-mobile-drawer-theme-sun { display: inline-block; }
[data-theme="light"] .sl-mobile-drawer-theme-moon { display: none; }

.sl-mobile-drawer-cta {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--sl-brand);
	color: #ffffff;
	font-family: var(--sl-font-body, sans-serif);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	border-radius: 10px;
	transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: 0 4px 14px -4px rgba(241, 96, 0, 0.40);
}
.sl-mobile-drawer-cta:hover {
	background: var(--sl-brand-2);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px -4px rgba(241, 96, 0, 0.55);
}
.sl-mobile-drawer-cta:active { transform: translateY(0); }

/* Reduced motion — desliga stagger animation */
@media (prefers-reduced-motion: reduce) {
	.sl-mobile-drawer-group {
		opacity: 1;
		transform: none;
	}
	.sl-mobile-drawer-close:hover { transform: none; }
}

/* ─── 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.45rem; /* gap entre dot/flag/nome/valor — apertado pra texto não ficar solto */
	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); }

/* Respiro extra entre o dot pulsante e a bandeira (radar ring expande
 * sobre a flag se gap padrão). Aplica em ambos os temas. */
.sl-status-item .sl-flag,
.sl-status-item .sl-status-flag {
	margin-left: 0.4rem;
}

/* 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);
}
/* Vinheta removida (Pass 108) — user pediu mapa limpo sem gradiente nas bordas. */
.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; }
}

/* .sl-mm-compass removido do HTML (Pass 108) — CSS órfã deletada */

/* 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: painel some completamente, só o botão (estilizado standalone) fica visível */
.sl-mm-vehicles[data-open="false"] {
	width: 36px;
	height: 36px;
	bottom: auto;          /* libera o stretch vertical */
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	overflow: visible;
	transition:
		width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		background 0.2s ease,
		border-color 0.2s ease;
}

/* 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,
		width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		border-radius 0.32s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.32s ease;
}
.sl-mm-vehicles-toggle:hover { background: rgba(45, 212, 191, 0.22); }

/* Troca de ícones: chevron quando expandido / paper-plane quando recolhido */
.sl-mm-vehicles-toggle-expand { display: none; }
.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle-collapse { display: none; }
.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle-expand { display: block; }

.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle {
	/* Sem rotation no estado recolhido — agora usa um SVG diferente (paper-plane)
	 * em vez de rotacionar o chevron. */
	transform: none;
	/* Quando recolhido, o toggle vira um botão floating standalone:
	 * maior, com bg sólido glass + sombra próprias */
	top: 0;
	right: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: rgba(10, 15, 26, 0.94);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle:hover {
	background: rgba(45, 212, 191, 0.18);
	border-color: rgba(45, 212, 191, 0.50);
}

/* 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; }
}

/* 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: 2px;
	box-sizing: border-box;
}
/* SVG do check renderizado com geometricPrecision pra paridade entre as 3
 * instâncias (sub-pixel rendering consistente). Path bbox centralizado
 * em x=12 (viewBox 0-24), sem necessidade de shift horizontal. */
.sl-bx-list-check svg {
	display: block;
	shape-rendering: geometricPrecision;
}

/* ── Pass 73: Bento section (section-bento.php) — ajustes light mode ──
 * Card 02 (suporte 2 camadas) tem flow CLIENTE FINAL → VOCÊ → SMART.
 * Os nodes laterais (sl-bx-flow-node) usam rgba(255,255,255,0.0X) que vira
 * invisível em fundo claro. Reaplica com escala neutra escura. */

[data-theme="light"] .sl-bx-flow-node {
	background: rgba(0, 0, 0, 0.03) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-bx-flow-node--primary {
	background: rgba(45, 212, 191, 0.08) !important;
	border-color: rgba(45, 212, 191, 0.45) !important;
	color: var(--sl-teal) !important;
	box-shadow: 0 4px 12px -4px rgba(45, 212, 191, 0.30) !important;
}
[data-theme="light"] .sl-bx-card:hover .sl-bx-flow-node--primary {
	box-shadow: 0 10px 20px -10px rgba(45, 212, 191, 0.40) !important;
}

/* Container do flow tinha bg/border próprios sutis */
[data-theme="light"] .sl-bx-flow {
	background: rgba(0, 0, 0, 0.02) !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Setas do flow (→) usam text-3 que já inverte em light, mas reforça */
[data-theme="light"] .sl-bx-flow-arrow {
	color: var(--sl-text-3) !important;
}
.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 1.25rem;
	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.45rem;
	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;
}
/* Respiro extra entre o dot pulsante e a bandeira (mesmo tratamento
 * do .sl-status-item — ring expandindo invade visualmente a flag) */
.sl-bxnum-srv-top .sl-flag {
	margin-left: 0.4rem;
}
.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;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.sl-sav-teaser-divider-pill:hover {
	transform: translateY(-1px);
	border-color: rgba(196, 255, 62, 0.45);
	background: rgba(196, 255, 62, 0.10);
}
.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: linear-gradient(90deg,
		var(--sl-teal) 0%,
		var(--sl-teal) var(--sl-fill, 0%),
		rgba(255, 255, 255, 0.08) var(--sl-fill, 0%),
		rgba(255, 255, 255, 0.08) 100%);
	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: linear-gradient(90deg,
		var(--sl-teal) 0%,
		var(--sl-teal) var(--sl-fill, 0%),
		rgba(255, 255, 255, 0.08) var(--sl-fill, 0%),
		rgba(255, 255, 255, 0.08) 100%);
	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-demo.php)
   ======================================================================== */

/* Hero */
.sl-sitedemo-hero {
	padding: 4rem 0 2rem;
	position: relative;
}
.sl-sitedemo-hero-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.sl-sitedemo-hero h1 {
	font-size: clamp(2.2rem, 5vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}
.sl-sitedemo-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-sitedemo-hero-sub strong { color: var(--sl-text, #fafafc); font-weight: 600; }
.sl-sitedemo-hero-ctas {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.4rem;
}
.sl-sitedemo-hero-badges {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 0.5rem;
}
.sl-sitedemo-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-sitedemo-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-sitedemo-preview-section,
.sl-sitedemo-features-section,
.sl-sitedemo-pricing-section { padding-top: 2rem; padding-bottom: 4rem; }

/* Preview do site exemplo */
.sl-sitedemo-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-sitedemo-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-sitedemo-preview-dots {
	display: flex;
	gap: 0.35rem;
}
.sl-sitedemo-preview-dots span {
	width: 11px; height: 11px;
	border-radius: 50%;
	display: inline-block;
}
.sl-sitedemo-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-sitedemo-preview-url svg { color: var(--sl-lime, #c4ff3e); flex-shrink: 0; }
.sl-sitedemo-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-sitedemo-preview-openbtn:hover {
	border-color: rgba(45,212,191,0.4);
	color: var(--sl-teal, #2dd4bf);
	background: rgba(45,212,191,0.06);
}
.sl-sitedemo-preview-frame {
	position: relative;
	height: 560px;
	background: #0a0a0f;
	overflow: hidden;
}

/* Imagem real do site exemplo (enviada via Customizer) */
.sl-sitedemo-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-sitedemo-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-sitedemo-preview-placeholder svg {
	opacity: 0.45;
	margin-bottom: 0.4rem;
}
.sl-sitedemo-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-sitedemo-preview-placeholder span {
	font-size: 0.82rem;
	max-width: 360px;
	line-height: 1.55;
}
.sl-sitedemo-preview-placeholder em {
	color: var(--sl-teal, #26c6a3);
	font-style: normal;
	font-weight: 600;
}

/* ======= Mockup visual do site exemplo (substitui iframe bloqueado) ======= */
.sl-sitedemo-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-sitedemo-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-sitedemo-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-sitedemo-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-sitedemo-mock-nav span { cursor: default; }
.sl-sitedemo-mock-nav span.is-active {
	color: #fff;
	position: relative;
	padding-bottom: 2px;
	border-bottom: 2px solid #f16000;
}
.sl-sitedemo-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-sitedemo-mock-hero {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.sl-sitedemo-mock-bg {
	position: absolute;
	inset: 0;
}
.sl-sitedemo-mock-truck {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sl-sitedemo-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-sitedemo-mock-pin-bob 3.5s ease-in-out infinite;
}
@keyframes sl-sitedemo-mock-pin-bob {
	0%, 100% { transform: translate(50%, -50%); }
	50%      { transform: translate(50%, -58%); }
}

/* Card hero à esquerda */
.sl-sitedemo-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-sitedemo-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-sitedemo-mock-card p {
	font-size: 0.78rem;
	line-height: 1.5;
	color: rgba(255,255,255,0.85);
	margin: 0 0 1.1rem;
}
.sl-sitedemo-mock-ctas {
	display: flex;
	gap: 0.55rem;
}
.sl-sitedemo-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-sitedemo-mock-btn--ghost {
	background: rgba(0,0,0,0.4);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
}
.sl-sitedemo-mock-btn--primary {
	background: #f16000;
	color: #fff;
}

/* Responsividade do mockup */
@media (max-width: 820px) {
	.sl-sitedemo-mock-nav span:not(.is-active) { display: none; }
	.sl-sitedemo-mock-card { left: 1.5rem; max-width: 55%; padding: 1rem 1.2rem; }
	.sl-sitedemo-mock-card h3 { font-size: 1.5rem; }
	.sl-sitedemo-mock-card p { font-size: 0.7rem; }
	.sl-sitedemo-mock-pin { right: 12%; }
	.sl-sitedemo-mock-pin svg { width: 50px; height: 50px; }
}
@media (max-width: 560px) {
	.sl-sitedemo-mock-nav { display: none; }
	.sl-sitedemo-mock-header { padding: 0.75rem 1rem; }
	.sl-sitedemo-mock-card { padding: 0.85rem 1rem; }
	.sl-sitedemo-mock-card h3 { font-size: 1.2rem; }
	.sl-sitedemo-mock-pin { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.sl-sitedemo-mock-pin { animation: none; }
}
.sl-sitedemo-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-sitedemo-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-sitedemo-preview-cta:hover {
	transform: translate(-50%, -2px);
	box-shadow: 0 16px 36px rgba(241,96,0,0.55);
}
@media (max-width: 720px) {
	.sl-sitedemo-preview-frame { height: 420px; }
}

/* Features grid */
.sl-sitedemo-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 2rem;
}
@media (max-width: 900px) { .sl-sitedemo-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sl-sitedemo-features { grid-template-columns: 1fr; } }
.sl-sitedemo-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-sitedemo-feat:hover {
	border-color: rgba(45,212,191,0.3);
	transform: translateY(-2px);
}
.sl-sitedemo-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-sitedemo-feat h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.4rem;
	color: var(--sl-text, #fafafc);
}
.sl-sitedemo-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-sitedemo-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-sitedemo-pricing { grid-template-columns: 1fr; } }
.sl-sitedemo-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-sitedemo-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-sitedemo-price header { margin-bottom: 1.25rem; }
.sl-sitedemo-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-sitedemo-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-sitedemo-price-currency {
	font-size: 1.5rem;
	color: var(--sl-text-2, rgba(250,250,252,0.7));
}
.sl-sitedemo-price-amount {
	font-size: clamp(3rem, 5vw, 4rem);
	color: var(--sl-text, #fafafc);
}
.sl-sitedemo-price--featured .sl-sitedemo-price-amount {
	background: linear-gradient(135deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.sl-sitedemo-price-sub {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--sl-text-2, rgba(250,250,252,0.65));
}
.sl-sitedemo-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-sitedemo-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-sitedemo-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-sitedemo-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-sitedemo-pricing-total { grid-template-columns: 1fr; text-align: center; }
	.sl-sitedemo-pricing-total-cta { justify-self: stretch; }
	.sl-sitedemo-pricing-total-cta .sl-btn { width: 100%; justify-content: center; }
}
.sl-sitedemo-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-sitedemo-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-sitedemo-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: 1.5rem;
	/* 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;
}
.sl-cfg-upsell-ctas {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	flex-shrink: 0;
}
@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; }
	.sl-cfg-upsell-ctas { width: 100%; }
}

/* 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;
}

/* Cores específicas por servidor — gradient mantém o "fade na base" mas com
 * a cor solicitada pelo user (01 azul, 02 verde, 03 vermelho). Aplica em
 * ambos os temas. */
.sl-server[data-service="s01"] .sl-server-num {
	background: linear-gradient(180deg, #0a89ff 0%, rgba(10, 137, 255, 0.40) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
.sl-server[data-service="s02"] .sl-server-num {
	background: linear-gradient(180deg, #008000 0%, rgba(0, 128, 0, 0.40) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
.sl-server[data-service="s03"] .sl-server-num {
	background: linear-gradient(180deg, #c83737 0%, rgba(200, 55, 55, 0.40) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

/* Domain label (smartlocaliza.com, localizasmart.com, localizamobile.com)
 * pintado na mesma cor do número 01/02/03 — match visual entre identificador
 * grande e nome do servidor. Aplica em ambos os temas. */
.sl-server[data-service="s01"] .sl-server-label { color: #0a89ff !important; }
.sl-server[data-service="s02"] .sl-server-label { color: #008000 !important; }
.sl-server[data-service="s03"] .sl-server-label { color: #c83737 !important; }

/* Botão "Acessar painel" também segue a cor do servidor — bg/border/text
 * em tom suave; hover preenche com cor sólida. */
.sl-server[data-service="s01"] .sl-server-cta {
	background: rgba(10, 137, 255, 0.08) !important;
	border-color: rgba(10, 137, 255, 0.30) !important;
	color: #0a89ff !important;
}
.sl-server[data-service="s01"]:hover .sl-server-cta {
	background: #0a89ff !important;
	border-color: #0a89ff !important;
	color: #ffffff !important;
}
.sl-server[data-service="s02"] .sl-server-cta {
	background: rgba(0, 128, 0, 0.08) !important;
	border-color: rgba(0, 128, 0, 0.30) !important;
	color: #008000 !important;
}
.sl-server[data-service="s02"]:hover .sl-server-cta {
	background: #008000 !important;
	border-color: #008000 !important;
	color: #ffffff !important;
}
.sl-server[data-service="s03"] .sl-server-cta {
	background: rgba(200, 55, 55, 0.08) !important;
	border-color: rgba(200, 55, 55, 0.30) !important;
	color: #c83737 !important;
}
.sl-server[data-service="s03"]:hover .sl-server-cta {
	background: #c83737 !important;
	border-color: #c83737 !important;
	color: #ffffff !important;
}

/* ── Pass 83: Plans-site (template-parts/plans-site.php) — light mode ──
 * Cards .sl-service usavam bg dark + .sl-combo (callout combo) era full
 * dark. Em light viravam manchas escuras desconectadas do tema. */

/* Cards de serviço (Desenvolvimento, Hospedagem) */
[data-theme="light"] .sl-service {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-service:hover {
	border-color: rgba(0, 0, 0, 0.14) !important;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-service--highlight {
	background: linear-gradient(180deg, rgba(45, 212, 191, 0.06), #ffffff) !important;
	border-color: rgba(45, 212, 191, 0.40) !important;
	box-shadow: 0 20px 40px -16px rgba(45, 212, 191, 0.20) !important;
}

/* Badges "Investimento único" / "Recorrente mensal" */
[data-theme="light"] .sl-service-badge {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-service--highlight .sl-service-badge {
	background: rgba(45, 212, 191, 0.12) !important;
	color: var(--sl-teal) !important;
}

/* Texto + título dentro dos cards */
[data-theme="light"] .sl-service h3 { color: var(--sl-text) !important; }
[data-theme="light"] .sl-service p { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-service-feats li { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-service-feats li::before { color: var(--sl-brand) !important; }
[data-theme="light"] .sl-service--highlight .sl-service-feats li::before { color: var(--sl-teal) !important; }

/* Bloco de preço (R$ 500 / R$ 30) — borders + nota */
[data-theme="light"] .sl-service-price {
	border-top-color: rgba(0, 0, 0, 0.08) !important;
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-service-price-note { color: var(--sl-text-3) !important; }

/* Linha de pagamento "Parcelamento em 5x..." / "Mensal sem fidelidade" */
[data-theme="light"] .sl-service-payment {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-service-payment strong { color: var(--sl-text) !important; }

/* Combo callout "Quer o combo? A gente cuida de tudo" */
[data-theme="light"] .sl-combo {
	background:
		radial-gradient(ellipse at left, rgba(241, 96, 0, 0.06), transparent 60%),
		#ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-combo-left h3 { color: var(--sl-text) !important; }
[data-theme="light"] .sl-combo-left p { color: var(--sl-text-2) !important; }

/* Box interno do combo (breakdown de preço) */
[data-theme="light"] .sl-combo-right {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-combo-line {
	color: var(--sl-text-2) !important;
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-combo-line strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-combo-total {
	border-top-color: rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-combo-total strong { color: var(--sl-brand) !important; }

/* Linha "Custo no 1º ano" — cor lime cru fica anêmica em fundo branco,
 * trocar pra teal sólido pra contrastar */
[data-theme="light"] .sl-combo-year {
	border-top-color: rgba(45, 212, 191, 0.40) !important;
}
[data-theme="light"] .sl-combo-year span:first-child { color: var(--sl-text-3) !important; }
[data-theme="light"] .sl-combo-year strong { color: var(--sl-teal) !important; }
[data-theme="light"] .sl-combo-year small { color: var(--sl-text-3) !important; }

/* Smarts App flow steps "Como funciona" (3 cards numerados) — usavam
 * rgba(0,0,0,0.2) que vira cinza pesado feio em fundo branco. */
[data-theme="light"] .sl-sa-flow {
	background:
		radial-gradient(ellipse at top, rgba(45, 212, 191, 0.06), transparent 60%),
		#ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-sa-flow-step {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-sa-flow-step h4 { color: var(--sl-text) !important; }
[data-theme="light"] .sl-sa-flow-step p { color: var(--sl-text-2) !important; }
/* Números 01/02/03 — mantém gradient teal→lime mas garante visibilidade */
[data-theme="light"] .sl-sa-flow-num {
	background: linear-gradient(135deg, var(--sl-teal), #65a30d) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

/* Homolog overrides movidos pro fim do arquivo (Pass 90) pra garantir
 * source-order priority sobre a regra base que vem depois deste ponto. */

.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);
	overflow: hidden;
}
.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; }
/* Hover underline animado (mesmo padrão do .sl-nav-link::after do menu) */
.sl-seg-btn::after {
	content: '';
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
	bottom: 4px;
	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-seg-btn:hover::after { transform: scaleX(1); }
/* Esconde no ativo (o .sl-seg-indicator já mostra a linha) */
.sl-seg-btn.is-active::after { display: none; }

/* Indicator vira só underline gradient (sem pill bg) — mesmo padrão exato
 * do .sl-nav-link::after do menu principal. JS seta width=button width,
 * line spans full button. */
.sl-seg-indicator {
	position: absolute;
	left: 0;
	bottom: 4px;
	height: 2px;
	background: linear-gradient(90deg, var(--sl-teal, #2dd4bf), var(--sl-lime, #c4ff3e));
	border-radius: 2px;
	transition: transform 0.45s var(--sl-ease), width 0.45s var(--sl-ease);
	z-index: 0;
	width: 0;
	pointer-events: none;
	border: 0;
}

/* 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;
}
/* "Como medimos" (1º card) tem texto longo + bullets — faz span horizontal
 * full-width acima dos outros 2 (API pública + Badge embeddable). */
.sl-status-meta-card:first-child {
	grid-column: 1 / -1;
}
@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; }
}





/* ========================================================================
   LIGHT MODE — overrides de componentes com cores hardcoded
   Apenas ativam quando data-theme="light" no <html>. Mantém defaults dark.
   Adicione novos selectors aqui conforme aparecerem inconsistências visuais.
   ======================================================================== */

/* Cards/sections com gradient escuro → variante light */
[data-theme="light"] .sl-dash,
[data-theme="light"] .sl-sim {
	background: linear-gradient(180deg, #ffffff 0%, #f8f8fb 100%);
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.12),
		0 0 0 1px rgba(45, 212, 191, 0.10),
		0 0 60px -10px rgba(45, 212, 191, 0.08);
}

[data-theme="light"] .sl-demo-card-viz {
	background: linear-gradient(180deg, #ffffff, #f6f6fa);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .sl-sitedemo-preview-frame {
	background: #f0f0f5;
}

[data-theme="light"] .sl-uptime {
	background: linear-gradient(135deg, #ffffff 0%, #eeeef4 100%);
}

[data-theme="light"] .sl-special {
	background: linear-gradient(135deg, #ffffff 0%, #ebebf1 100%);
}

[data-theme="light"] .sl-aurora-box,
[data-theme="light"] .sl-gw-banner {
	background: #ebebf1;
}

/* Hero card no light mode — fundo claro com borda sutil em vez de escuro+brilho */
[data-theme="light"] .sl-hero-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.10);
}

/* Topbar no light mode — bg neutro (era gradient teal→laranja que tingia
 * os pills internos via transparency/backdrop-filter). */
[data-theme="light"] .sl-status {
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Mobile drawer (menu hamburger) no light mode */
[data-theme="light"] .sl-mobile-drawer-overlay {
	background: rgba(0, 0, 0, 0.40);
}
[data-theme="light"] .sl-mobile-drawer-panel {
	background: #ffffff;
	border-left: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-mobile-drawer-head {
	border-bottom-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-mobile-drawer-brand { color: var(--sl-text); }
[data-theme="light"] .sl-mobile-drawer-close {
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-mobile-drawer-close:hover {
	background: rgba(45, 212, 191, 0.08);
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-mobile-drawer-link {
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-mobile-drawer-link:hover {
	background: rgba(45, 212, 191, 0.06);
	color: var(--sl-text);
}
[data-theme="light"] .sl-mobile-drawer-link.is-active {
	background: rgba(45, 212, 191, 0.10);
	color: var(--sl-text);
}
[data-theme="light"] .sl-mobile-drawer-icon {
	background: rgba(0, 0, 0, 0.04);
	color: var(--sl-text-3);
}
[data-theme="light"] .sl-mobile-drawer-link:hover .sl-mobile-drawer-icon {
	background: rgba(45, 212, 191, 0.12);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-mobile-drawer-link.is-active .sl-mobile-drawer-icon {
	background: rgba(45, 212, 191, 0.16);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-mobile-drawer-group ul {
	border-left-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-mobile-drawer-group ul li a {
	color: var(--sl-text-3);
}
[data-theme="light"] .sl-mobile-drawer-foot {
	border-top-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-mobile-drawer-theme {
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-mobile-drawer-theme:hover {
	background: rgba(45, 212, 191, 0.08);
	border-color: var(--sl-teal);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-status,
[data-theme="light"] .sl-status a,
[data-theme="light"] .sl-status .sl-status-value,
[data-theme="light"] .sl-status .sl-evt-text { color: var(--sl-text); }
[data-theme="light"] .sl-status .sl-evt-num { color: var(--sl-text); }

/* Header no light mode — borda inferior visível */
[data-theme="light"] .sl-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.18);
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
}

/* Footer claro */
[data-theme="light"] .sl-footer {
	background: #f0f0f5;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Botões ghost no light mode — mais visíveis */
[data-theme="light"] .sl-btn-ghost {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}
[data-theme="light"] .sl-btn-ghost:hover {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.18);
}

/* Cards de planos em /planos/ */
[data-theme="light"] .sl-tier,
[data-theme="light"] .sl-pkg,
[data-theme="light"] .sl-sitedemo-price,
[data-theme="light"] .sl-feat-card,
[data-theme="light"] .sl-bento-cell,
[data-theme="light"] .sl-office-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}

/* Inputs/textareas — surface invisível em light se hardcoded */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] input[type="url"],
[data-theme="light"] input[type="number"],
[data-theme="light"] textarea,
[data-theme="light"] select {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}

/* Mini-mapa — backdrop em light fica claro mas mantém os overlays escuros pra
 * preservar contraste com o estilo dark do Mapbox que segue carregado. */
[data-theme="light"] .sl-hero-mini-map {
	background: #f0f0f5;
	border-color: rgba(0, 0, 0, 0.10);
}

/* FAQ accordion claro */
[data-theme="light"] .sl-faq {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Logo lockup — força o texto preto em light */
[data-theme="light"] .sl-brand-lockup,
[data-theme="light"] .sl-brand-lockup * { color: var(--sl-text); }

/* Phone notch e elementos que devem ficar dark mesmo em light (decorativos) */
/* (sem override — mantêm dark intencional) */

/* ── Light mode — segunda passada (componentes restantes) ── */

/* Preloader inicial */
[data-theme="light"] .sl-preloader {
	background: radial-gradient(ellipse at center, #ffffff 0%, #ebebf1 70%);
}
[data-theme="light"] .sl-preloader-name,
[data-theme="light"] .sl-preloader-tag { color: var(--sl-text); }

/* Dash map / sim map — gradients internos de cards */
[data-theme="light"] .sl-dash-map,
[data-theme="light"] .sl-sim-map {
	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, #ffffff 0%, #f4f4f8 100%);
}

/* Select option dropdown — só funciona no Chrome/Edge (Firefox ignora) */
[data-theme="light"] select option,
[data-theme="light"] .sl-form select option {
	background-color: #ffffff;
	color: var(--sl-text);
}
[data-theme="light"] select option:checked,
[data-theme="light"] select option:hover,
[data-theme="light"] .sl-form select option:checked {
	background-color: #f0f0f5;
	color: var(--sl-text);
}

/* Sitedemo preview wrapper */
[data-theme="light"] .sl-sitedemo-preview {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.10);
	box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.15);
}

/* Mock visual do site exemplo (mockup interno) */
[data-theme="light"] .sl-sitedemo-mock {
	background: #fff8f1;
}

/* Forum comments */
[data-theme="light"] .sl-forum-comment {
	background: #ffffff;
}
[data-theme="light"] .sl-forum-comment:hover {
	border-color: rgba(0, 0, 0, 0.15);
}

/* Forms (qualquer surface escura) */
[data-theme="light"] .sl-form,
[data-theme="light"] .sl-form-row,
[data-theme="light"] .sl-form-group {
	color: var(--sl-text);
}

/* Componentes intencionalmente DARK no light mode (mantêm escuro porque
 * representam hardware ou são elementos visuais decorativos):
 * - .sl-phone-notch, .sl-phone-map (mockup de smartphone)
 * - .sl-gmap (mapa Google em estado loading antes dos tiles aparecerem)
 * - .sl-aurora-bg (gradient de fundo escuro intencional do CTA aurora)
 */

/* ===== Borders e surfaces hardcoded com rgba(255,255,255,X) =====
 * Os 301+ uses de rgba(255,255,255,X) sem fallback via var() ficam invisíveis
 * sobre fundo branco. Como não dá pra reescrever 301 linhas, aplicamos um
 * override genérico de baixa especificidade que afeta apenas elementos diretos
 * dentro de containers principais. Componentes específicos com necessidade
 * podem sobrescrever com selectors mais específicos. */
[data-theme="light"] .sl-page [style*="rgba(255"] { /* placeholder noop */ }

/* Top status bar — aurora e bordas */
[data-theme="light"] .sl-status-aurora { opacity: 0.4; }
[data-theme="light"] .sl-status::before,
[data-theme="light"] .sl-status::after {
	border-color: rgba(0, 0, 0, 0.06);
}

/* Cards específicos do dashboard mockup que possam ter surface clara */
[data-theme="light"] .sl-dash-card,
[data-theme="light"] .sl-dash-stat,
[data-theme="light"] .sl-dash-row,
[data-theme="light"] .sl-sim-row {
	background: rgba(0, 0, 0, 0.025);
	border-color: rgba(0, 0, 0, 0.08);
}

/* Hero mini-map — frame e overlays internos */
[data-theme="light"] .sl-hero-mini-map {
	background: #f0f0f5;
	border-color: rgba(45, 212, 191, 0.30);
}
/* Mas os overlays internos do mapa permanecem escuros pois o Mapbox dark-v11
 * é a imagem por baixo (não dá pra mudar pra um tile light sem trocar style) */
[data-theme="light"] .sl-mm-vehicles,
[data-theme="light"] .sl-mm-provider,
[data-theme="light"] .sl-mm-zoom,
[data-theme="light"] .sl-mm-coord,
[data-theme="light"] .sl-mm-legend { /* mantém estilo dark — overlays sobre o mapa dark */ }

/* Plans cross-references e ribbons */
[data-theme="light"] .sl-plans-xref {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* H-scroll cards */
[data-theme="light"] .sl-hscroll-card,
[data-theme="light"] .sl-testi {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Brand tag / chip / pill genéricos */
[data-theme="light"] .sl-chip,
[data-theme="light"] .sl-chip--brand,
[data-theme="light"] .sl-pill {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* Sticky feature swap section */
[data-theme="light"] .sl-sticky-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Big number sections */
[data-theme="light"] .sl-bignum-display,
[data-theme="light"] .sl-stat-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* CTA section background — gradient mais sutil em light */
[data-theme="light"] .sl-aurora-bg {
	opacity: 0.5; /* abaixa intensidade do gradient escuro pra suavizar */
}

/* Modal e Drawer */
[data-theme="light"] .sl-modal,
[data-theme="light"] .sl-modal-content,
[data-theme="light"] .sl-mobile-drawer-panel {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}
[data-theme="light"] .sl-mobile-drawer-overlay {
	background: rgba(0, 0, 0, 0.50);
}

/* Code blocks (blog, configurações, comandos SMS) */
[data-theme="light"] code,
[data-theme="light"] pre,
[data-theme="light"] .sl-cmd-content,
[data-theme="light"] .sl-code-block {
	background: #f6f6fa;
	color: #1a1a24;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Marca taxonomy archive — cards de fabricante */
[data-theme="light"] .sl-marca-card,
[data-theme="light"] .sl-fab-card,
[data-theme="light"] .sl-fam-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}

/* Configurações page (lista de modelos) */
[data-theme="light"] .sl-cfg-card,
[data-theme="light"] .sl-cfg-list-item {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Search results / ribbons */
[data-theme="light"] .sl-search-results,
[data-theme="light"] .sl-search-empty {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* SMS Calc tool */
[data-theme="light"] .sl-sms-calc,
[data-theme="light"] .sl-sms-calc-result {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Timeline (página /sobre/) */
[data-theme="light"] .sl-timeline-item,
[data-theme="light"] .sl-timeline-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Blog post cards */
[data-theme="light"] .sl-post-card,
[data-theme="light"] .sl-post-meta {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Cookie banner */
[data-theme="light"] .sl-cookies-banner,
[data-theme="light"] .sl-cookies-modal {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
	box-shadow: 0 -4px 24px -4px rgba(0, 0, 0, 0.10);
}

/* Visitantes online (online-page) */
[data-theme="light"] .sl-vo-card,
[data-theme="light"] .sl-vo-total,
[data-theme="light"] .sl-vo-city {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Forum */
[data-theme="light"] .sl-forum-list,
[data-theme="light"] .sl-forum-form,
[data-theme="light"] .sl-forum-respond {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Status incidents (timeline de incidentes) */
[data-theme="light"] .sl-incident,
[data-theme="light"] .sl-incident-card {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
}

/* Generic surface helper — força bg branco em qualquer .sl-card-* */
[data-theme="light"] [class*="sl-card"]:not([class*="dark"]) {
	background: #ffffff;
}

/* Fallback genérico: qualquer elemento com border-color hardcoded em white */
[data-theme="light"] [style*="border-color: rgba(255"],
[data-theme="light"] [style*="border-color:rgba(255"] {
	border-color: rgba(0, 0, 0, 0.10);
}

/* ── Light mode — terceira passada (componentes específicos identificados) ── */

/* Search bar do /configuracoes/ */
[data-theme="light"] .sl-cfg-search {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}
[data-theme="light"] .sl-cfg-search-input,
[data-theme="light"] #sl-cfg-search-input {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] .sl-cfg-search-input::placeholder,
[data-theme="light"] #sl-cfg-search-input::placeholder {
	color: rgba(10, 10, 20, 0.45);
}
[data-theme="light"] .sl-cfg-search-icon { color: rgba(10, 10, 20, 0.50); }

/* Brand accordion cards (Coban, Concox, Genéricos) */
[data-theme="light"] .sl-cfg-brand,
[data-theme="light"] details.sl-cfg-brand,
[data-theme="light"] details.sl-cfg-searchable {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-cfg-brand summary,
[data-theme="light"] .sl-cfg-brand-head { color: var(--sl-text); }
[data-theme="light"] .sl-cfg-fab-stats,
[data-theme="light"] .sl-cfg-fab-count { color: var(--sl-text-2); }
[data-theme="light"] .sl-cfg-popular {
	background: rgba(241, 96, 0, 0.10);
	color: var(--sl-brand);
	border-color: rgba(241, 96, 0, 0.25);
}

/* Toolbar de expandir/recolher */
[data-theme="light"] .sl-cfg-toolbar-btn {
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-cfg-toolbar-btn:hover { color: var(--sl-text); }

/* Body interno do accordion (lista de modelos) */
[data-theme="light"] .sl-cfg-body,
[data-theme="light"] .sl-cfg-models-list,
[data-theme="light"] .sl-cfg-model {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] .sl-cfg-model {
	border-color: rgba(0, 0, 0, 0.06);
}

/* "Não quer enviar comandos manualmente?" banner */
[data-theme="light"] .sl-cfg-cta-banner,
[data-theme="light"] .sl-cfg-promo,
[data-theme="light"] .sl-cfg-banner {
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.06), rgba(241, 96, 0, 0.04));
	border: 1px solid rgba(45, 212, 191, 0.20);
}

/* CTA AURORA section — fundo escuro intencional. No light mode mudamos pra
 * uma versão "tech card" branca com aurora colorida sutil. */
[data-theme="light"] .sl-aurora-box {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}
/* Reduz drasticamente o aurora gradient (que é escuro com glow) — em light fica
 * apenas como sutil colored glow */
[data-theme="light"] .sl-aurora-bg {
	opacity: 0.25;
	filter: invert(1) hue-rotate(180deg);
}
/* h2/p dentro do aurora — texto escuro */
[data-theme="light"] .sl-aurora-box h2,
[data-theme="light"] .sl-aurora-box p { color: var(--sl-text); }
[data-theme="light"] .sl-aurora-box .sl-chip {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}

/* Botões dentro de seções escuras — força contraste */
[data-theme="light"] .sl-aurora-box .sl-btn-ghost {
	background: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}
[data-theme="light"] .sl-aurora-box .sl-btn-ghost:hover {
	background: rgba(0, 0, 0, 0.08);
}

/* CTA fine print (sem cartão de crédito · 20 rastreadores · sem fidelidade) */
[data-theme="light"] .sl-aurora-fine,
[data-theme="light"] .sl-aurora-box small,
[data-theme="light"] .sl-aurora-bullets { color: var(--sl-text-3); }

/* ROI calculator (template-parts/section-roi.php) */
[data-theme="light"] .sl-roi {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sl-roi-card {
	background: #f6f6fa;
	border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-roi-card--highlight {
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.08), rgba(241, 96, 0, 0.04));
	border-color: rgba(241, 96, 0, 0.20);
}
[data-theme="light"] .sl-roi-card-label,
[data-theme="light"] .sl-roi-card-sub,
[data-theme="light"] .sl-roi-input-bounds,
[data-theme="light"] .sl-roi-tier { color: var(--sl-text-2); }
[data-theme="light"] .sl-roi-annual {
	background: #f6f6fa;
	border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-roi-annual-fine { color: var(--sl-text-3); }
[data-theme="light"] .sl-roi-disclaimer { color: var(--sl-text-3); }

/* Range sliders no light mode — bg só pra inputs SEM track customizado.
 * Sliders com runnable-track próprio (ROI, pricing, savings) sobrescrevem
 * pra transparent — senão o input area de 24px gera stripe cinza atrás
 * do track de 4px (efeito "barra dupla" reportado em light). */
[data-theme="light"] input[type="range"] {
	background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-pri-slider input[type="range"],
[data-theme="light"] .sl-roi-input input[type="range"],
[data-theme="light"] .sl-sav-field input[type="range"] {
	background: transparent !important;
}

/* Fleet calculator (Quanto sua frota economiza) */
[data-theme="light"] .sl-fleet,
[data-theme="light"] .sl-fleet-calc,
[data-theme="light"] .sl-economy {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-fleet-result,
[data-theme="light"] .sl-fleet-card {
	background: #f6f6fa;
	border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-fleet h2,
[data-theme="light"] .sl-fleet p { color: var(--sl-text); }
[data-theme="light"] .sl-fleet-bullets,
[data-theme="light"] .sl-fleet-bullet {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text-2);
}

/* Savings calculator + teaser (page-calculadora-economia.php + section-savings-teaser.php) */
[data-theme="light"] .sl-sav-hero,
[data-theme="light"] .sl-sav-teaser {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-sav-teaser-left h2,
[data-theme="light"] .sl-sav-teaser-sub,
[data-theme="light"] .sl-sav-hero h1,
[data-theme="light"] .sl-sav-hero-sub { color: var(--sl-text); }
[data-theme="light"] .sl-sav-hero-sub,
[data-theme="light"] .sl-sav-teaser-sub strong { color: var(--sl-text-2); }
[data-theme="light"] .sl-sav-teaser-bullets,
[data-theme="light"] .sl-sav-teaser-bullet,
[data-theme="light"] .sl-sav-teaser-pill {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-sav-teaser-result,
[data-theme="light"] .sl-sav-teaser-card {
	background: #f6f6fa;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
/* .sl-sav-teaser-right é só wrapper de coluna do grid — sem bg/border próprio.
 * Só o .sl-sav-teaser-figure interno é o card visível. */
[data-theme="light"] .sl-sav-teaser-right {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}
[data-theme="light"] .sl-sav-teaser-result strong { color: var(--sl-text); }
[data-theme="light"] .sl-sav-teaser-fine { color: var(--sl-text-3); }

/* Calculadora form e cards de resultados */
[data-theme="light"] .sl-sav-form,
[data-theme="light"] .sl-sav-results,
[data-theme="light"] .sl-sav-card,
[data-theme="light"] .sl-sav-summary {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-sav-input,
[data-theme="light"] .sl-sav-input input {
	background: #f6f6fa;
	color: var(--sl-text);
	border-color: rgba(0, 0, 0, 0.10);
}

/* ── Light mode — quarta passada (overlays e pseudo-elements) ── */

/* CRÍTICO: Aurora CTA tem ::before overlay com rgba dark — sobrescreve nossa
 * background. Inverter pra rgba light. */
[data-theme="light"] .sl-aurora-box::before {
	background:
		radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.85) 70%),
		rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .sl-aurora-box::after {
	border-color: rgba(0, 0, 0, 0.06);
}
/* Aurora bg conic gradient — reduz drasticamente em light pra suavizar */
[data-theme="light"] .sl-aurora-bg {
	opacity: 0.18;
}

/* Savings teaser "right" card (R$ 180+) — só o .sl-sav-teaser-figure (o
 * card visível); .sl-sav-teaser-right é wrapper de grid, fica transparente. */
[data-theme="light"] .sl-sav-teaser-figure {
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfeff 100%);
	border: 1px solid rgba(45, 212, 191, 0.30);
	box-shadow: 0 10px 30px -10px rgba(45, 212, 191, 0.20);
}
[data-theme="light"] .sl-sav-teaser-fig-label,
[data-theme="light"] .sl-sav-teaser-fig-sub { color: var(--sl-text-2); }
[data-theme="light"] .sl-sav-teaser-ticker {
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.25);
}
[data-theme="light"] .sl-sav-teaser-ticker strong { color: var(--sl-teal); }
[data-theme="light"] .sl-sav-teaser-vectors,
[data-theme="light"] .sl-sav-teaser-vectors li {
	background: rgba(45, 212, 191, 0.05);
	border: 1px solid rgba(45, 212, 191, 0.20);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-sav-teaser-hint { color: var(--sl-text-3); }

/* BigNum chip ("UPTIME REAL · últimos 365 dias · LIVE") */
[data-theme="light"] .sl-bignum-chip,
[data-theme="light"] .sl-bignum-eyebrow,
[data-theme="light"] .sl-uptime-eyebrow {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text-2);
}

/* Servers chip dentro do BigNum (eu-central-1, us-west-1, us-west-2) */
[data-theme="light"] .sl-server-card,
[data-theme="light"] .sl-server-row,
[data-theme="light"] .sl-uptime-server {
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-server-card:hover,
[data-theme="light"] .sl-server-row:hover {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.14);
}

/* ── Light mode — quinta passada (feat-items, calc, plano especial, combo) ── */

/* Feature items pills (Sem letra miúda · Gateway de SMS · Smarts App features) */
[data-theme="light"] .sl-feat-item,
[data-theme="light"] .sl-feats-all .sl-feat-item {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .sl-feat-item:hover {
	border-color: rgba(0, 0, 0, 0.16);
	background: #fafafc;
}
[data-theme="light"] .sl-feat-icon { /* mantém colorido */ }

/* Plano Especial — "Grande frota? Economize mais" (line 17005-17013 em main.css) */
[data-theme="light"] .sl-special {
	background: linear-gradient(135deg, #ffffff 0%, #f3f3f8 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-special::before,
[data-theme="light"] .sl-special::after {
	background: transparent !important; /* remove overlays escuros se houver */
}
[data-theme="light"] .sl-special h2,
[data-theme="light"] .sl-special h3,
[data-theme="light"] .sl-special p,
[data-theme="light"] .sl-special strong { color: var(--sl-text); }
[data-theme="light"] .sl-special-stats,
[data-theme="light"] .sl-special-stat,
[data-theme="light"] .sl-special-row {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-special-fine,
[data-theme="light"] .sl-special small { color: var(--sl-text-3); }
[data-theme="light"] .sl-special-ribbon {
	background: var(--sl-lime, #c4ff3e);
	color: #042b23;
}

/* SMS Calculator card "Quanto você gastaria?" */
[data-theme="light"] .sl-calc,
[data-theme="light"] .sl-calc-body {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-calc-head h3 { color: var(--sl-text); }
[data-theme="light"] .sl-calc-field {
	background: #f6f6fa;
	border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-calc-field input,
[data-theme="light"] .sl-calc-field input[type="number"] {
	background: #ffffff;
	color: var(--sl-text);
	border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-calc-result,
[data-theme="light"] .sl-calc-output {
	color: var(--sl-text);
}
[data-theme="light"] .sl-calc-fine,
[data-theme="light"] .sl-calc small { color: var(--sl-text-3); }

/* Site Demo — cards Desenvolvimento + Hospedagem (.sl-sitedemo-price) */
[data-theme="light"] .sl-sitedemo-price {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-sitedemo-price--featured {
	background: linear-gradient(180deg, #f0fdf4 0%, #ecfeff 100%);
	border-color: rgba(45, 212, 191, 0.30);
	box-shadow: 0 10px 30px -10px rgba(45, 212, 191, 0.20);
}
[data-theme="light"] .sl-sitedemo-price-label,
[data-theme="light"] .sl-sitedemo-price-sub { color: var(--sl-text-2); }
[data-theme="light"] .sl-sitedemo-price-list li { color: var(--sl-text-2); }

/* Site Demo — combo card "Quer o combo?" + box de breakdown */
[data-theme="light"] .sl-sitedemo-pricing-total,
[data-theme="light"] .sl-sitedemo-combo,
[data-theme="light"] .sl-sitedemo-combo-card {
	background: linear-gradient(135deg, #ffffff 0%, #f3f3f8 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sl-sitedemo-pricing-total::before,
[data-theme="light"] .sl-sitedemo-pricing-total::after {
	background: transparent !important;
}
[data-theme="light"] .sl-sitedemo-pricing-total h2,
[data-theme="light"] .sl-sitedemo-pricing-total h3,
[data-theme="light"] .sl-sitedemo-pricing-total p,
[data-theme="light"] .sl-sitedemo-pricing-total strong { color: var(--sl-text); }
[data-theme="light"] .sl-sitedemo-pricing-total-label,
[data-theme="light"] .sl-sitedemo-pricing-total small { color: var(--sl-text-2); }
[data-theme="light"] .sl-sitedemo-pricing-total .sl-chip {
	background: rgba(45, 212, 191, 0.10);
	border-color: rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}

/* Cross-link banner "Quer ver com mais detalhes?" — já parecia OK mas reforça */
[data-theme="light"] .sl-plans-xref,
[data-theme="light"] .sl-plans-xref--info {
	background: #ffffff;
	border-color: rgba(45, 212, 191, 0.25);
	color: var(--sl-text);
}
[data-theme="light"] .sl-plans-xref strong { color: var(--sl-text); }
[data-theme="light"] .sl-plans-xref span { color: var(--sl-text-2); }

/* Generic catch-all: qualquer .sl-*-card ou .sl-*-box ainda escuro */
[data-theme="light"] .sl-features-grid > *,
[data-theme="light"] .sl-feats-grid > *,
[data-theme="light"] .sl-pillar > * {
	color: var(--sl-text);
}

/* ── Light mode — sexta passada (/area-cliente/) ── */

/* Cards de servidor (01, 02, 03) */
[data-theme="light"] .sl-server {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-server:hover {
	border-color: rgba(45, 212, 191, 0.40);
	box-shadow: 0 16px 40px -12px rgba(45, 212, 191, 0.20);
}
[data-theme="light"] .sl-server-num {
	/* Substitui o gradient branco-fade-pra-transparente (invisível em fundo
	 * branco) por um gradient com tons escuros pra preservar o efeito visual
	 * de "número fantasma decorativo" mas com contraste em light. */
	background: linear-gradient(180deg, rgba(10, 10, 20, 0.55) 0%, rgba(10, 10, 20, 0.18) 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke: 0 !important;
}
[data-theme="light"] .sl-server-uptime-value { color: var(--sl-teal); }
[data-theme="light"] .sl-server-uptime-label { color: var(--sl-text-2); }
[data-theme="light"] .sl-server-status {
	background: rgba(45, 212, 191, 0.10);
	border-color: rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-server-label,
[data-theme="light"] .sl-server-label * { color: var(--sl-text); }
[data-theme="light"] .sl-server-region { color: var(--sl-text-2); }
[data-theme="light"] .sl-server-host {
	color: var(--sl-text-3);
	background: rgba(0, 0, 0, 0.03);
	padding: 4px 8px;
	border-radius: 4px;
}
[data-theme="light"] .sl-server-cta {
	background: rgba(241, 96, 0, 0.10);
	border-color: rgba(241, 96, 0, 0.25);
	color: var(--sl-brand);
}

/* Dica de segurança banner */
[data-theme="light"] .sl-server-tip {
	background: rgba(255, 165, 0, 0.06);
	border: 1px solid rgba(255, 165, 0, 0.20);
	color: var(--sl-text);
}
[data-theme="light"] .sl-server-tip code {
	background: rgba(255, 165, 0, 0.10);
	color: var(--sl-text);
}

/* Outras áreas da plataforma — cards de tools */
[data-theme="light"] .sl-tool {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-tool:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-tool-icon {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-tool-body strong { color: var(--sl-text); }
[data-theme="light"] .sl-tool-body span { color: var(--sl-text-2); }
[data-theme="light"] .sl-tool-arrow { color: var(--sl-text-3); }

/* Suporte — card grande "Nosso suporte resolve em minutos" */
[data-theme="light"] .sl-support {
	background: linear-gradient(135deg, #ffffff 0%, #f3f3f8 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-support h3,
[data-theme="light"] .sl-support p { color: var(--sl-text); }

/* Cards de contato dentro do suporte (WhatsApp / Telefone / E-mail) */
[data-theme="light"] .sl-support-action {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-support-action:hover {
	background: #fafafc;
	border-color: rgba(0, 0, 0, 0.16);
}
[data-theme="light"] .sl-support-action-icon {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-support-action strong { color: var(--sl-text); }
[data-theme="light"] .sl-support-action span { color: var(--sl-text-2); }

/* ── Light mode — sétima passada (/contato/) ── */

/* Form card "Manda sua mensagem" */
[data-theme="light"] .sl-contact-form-wrap,
[data-theme="light"] .sl-contact-form {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-contact-form h2,
[data-theme="light"] .sl-contact-form-wrap h2 { color: var(--sl-text); }
[data-theme="light"] .sl-contact-form p,
[data-theme="light"] .sl-contact-form-wrap > p { color: var(--sl-text-2); }
[data-theme="light"] .sl-contact-form label,
[data-theme="light"] .sl-form label {
	color: var(--sl-text-2);
}

/* Inputs/textareas/selects do form de contato */
[data-theme="light"] .sl-contact-form input[type="text"],
[data-theme="light"] .sl-contact-form input[type="email"],
[data-theme="light"] .sl-contact-form input[type="tel"],
[data-theme="light"] .sl-contact-form input[type="number"],
[data-theme="light"] .sl-contact-form select,
[data-theme="light"] .sl-contact-form textarea {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}

/* Card "Nosso escritório" + endereço */
[data-theme="light"] .sl-contact-info,
[data-theme="light"] .sl-contact-info-card {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-contact-address,
[data-theme="light"] .sl-contact-address strong,
[data-theme="light"] .sl-contact-address * { color: var(--sl-text); }

/* Frame do mapa Google */
[data-theme="light"] .sl-contact-map {
	background: #f0f0f5;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	overflow: hidden;
}

/* Linhas de canal (Telefone, E-mail, Horário) */
[data-theme="light"] .sl-contact-ch {
	border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-contact-ch-label { color: var(--sl-text-3); }
[data-theme="light"] .sl-contact-ch-value { color: var(--sl-text); }

/* Botões de redes sociais (Instagram / Facebook / YouTube) */
[data-theme="light"] .sl-contact-social {
	border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-contact-social a,
[data-theme="light"] .sl-contact-social-btn {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-contact-social a:hover,
[data-theme="light"] .sl-contact-social-btn:hover {
	background: #fafafc;
	border-color: rgba(0, 0, 0, 0.18);
	color: var(--sl-text);
}

/* Team cards "Atendimento humano. Nomes reais." */
[data-theme="light"] .sl-team-card {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-team-card:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 14px 40px -10px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sl-team-name { color: var(--sl-text); }
[data-theme="light"] .sl-team-role,
[data-theme="light"] .sl-team-dept { color: var(--sl-text-2); }
[data-theme="light"] .sl-team-hint { color: var(--sl-text-2); }

/* Channels dentro do team card (WhatsApp / Telefone / E-mail) */
[data-theme="light"] .sl-team-channels { border-top-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .sl-team-ch {
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-team-ch:hover {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.16);
}
/* WhatsApp pill — verde sutil em light */
[data-theme="light"] .sl-team-ch--wa {
	background: rgba(37, 211, 102, 0.08);
	border-color: rgba(37, 211, 102, 0.30);
	color: #166534;
}
[data-theme="light"] .sl-team-ch--wa:hover {
	background: rgba(37, 211, 102, 0.14);
	border-color: rgba(37, 211, 102, 0.45);
}
/* E-mail pill */
[data-theme="light"] .sl-team-ch--email { color: var(--sl-text-2); }

/* "Já sabe o que precisa? Vai direto." quick links */
[data-theme="light"] .sl-quick-link {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-quick-link:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-quick-link-icon {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-quick-link-body strong { color: var(--sl-text); }
[data-theme="light"] .sl-quick-link-body span { color: var(--sl-text-2); }
[data-theme="light"] .sl-quick-link-arrow { color: var(--sl-text-3); }

/* ── Light mode — oitava passada (/sobre/ + /segunda-via-boleto/) ── */

/* Story card "Nascemos com um foco claro" */
[data-theme="light"] .sl-story {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-story-year {
	color: rgba(241, 96, 0, 0.95); /* mantém laranja do brand */
}
[data-theme="light"] .sl-story-year-label { color: var(--sl-text-3); }
[data-theme="light"] .sl-story-body h2 { color: var(--sl-text); }

/* 3 pilares "Sua marca na frente / Tecnologia como serviço / Preço descendente" */
[data-theme="light"] .sl-principle {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-principle:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-principle-num {
	color: rgba(10, 10, 20, 0.20);
	-webkit-text-stroke: 1.5px rgba(10, 10, 20, 0.30);
}
[data-theme="light"] .sl-principle h3 { color: var(--sl-text); }
[data-theme="light"] .sl-principle p { color: var(--sl-text-2); }

/* ID Card — "Smart Localiza" Receita Federal */
[data-theme="light"] .sl-id-card {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-id-head { border-bottom-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .sl-id-head-name { color: var(--sl-text); }
[data-theme="light"] .sl-id-head-sub { color: var(--sl-text-2); }
[data-theme="light"] .sl-id-status {
	background: rgba(45, 212, 191, 0.10);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-id-grid { border-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .sl-id-item { border-color: rgba(0, 0, 0, 0.06); }
[data-theme="light"] .sl-id-label { color: var(--sl-text-3); }
[data-theme="light"] .sl-id-value { color: var(--sl-text); }
[data-theme="light"] .sl-id-value small { color: var(--sl-text-3); }
[data-theme="light"] .sl-id-foot {
	background: rgba(0, 0, 0, 0.03);
	border-top-color: rgba(0, 0, 0, 0.06);
}

/* Office pin floating box no mapa (Abrir no Google Maps) */
[data-theme="light"] .sl-office-pin {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(241, 96, 0, 0.40);
	box-shadow: 0 10px 30px -10px rgba(241, 96, 0, 0.30);
}
[data-theme="light"] .sl-office-pin-head { color: var(--sl-text); }

/* Office grid cards (endereço/telefone/email/horário) já estão cobertos
   via .sl-office-card no segundo pass — reforço aqui pra contraste */
[data-theme="light"] .sl-office-card-label { color: var(--sl-text-3); }
[data-theme="light"] .sl-office-card-value { color: var(--sl-text); }
[data-theme="light"] .sl-office-card-foot { color: var(--sl-text-2); }

/* ===== /segunda-via-boleto/ ===== */

/* Card principal do form */
[data-theme="light"] .sl-boleto-card {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-boleto-halo {
	opacity: 0.4; /* aurora glow mais sutil em light */
}

/* Stats no topo (Boleto PDF / Linha digitável / Atualizado) */
[data-theme="light"] .sl-boleto-stat {
	background: rgba(0, 0, 0, 0.03);
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-boleto-stat-icon {
	background: rgba(45, 212, 191, 0.10);
	border-color: rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-boleto-stat strong { color: var(--sl-text); }
[data-theme="light"] .sl-boleto-stat span { color: var(--sl-text-2); }

/* Form fields */
[data-theme="light"] .sl-boleto-field label,
[data-theme="light"] .sl-boleto-field small { color: var(--sl-text-2); }
[data-theme="light"] .sl-boleto-input-wrap {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .sl-boleto-input-wrap input {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] .sl-boleto-input-wrap input::placeholder { color: rgba(10, 10, 20, 0.40); }
[data-theme="light"] .sl-boleto-input-icon { color: rgba(10, 10, 20, 0.55); }

/* LGPD consent */
[data-theme="light"] .sl-boleto-consent { color: var(--sl-text-2); }
[data-theme="light"] .sl-boleto-consent input[type="checkbox"] { accent-color: var(--sl-brand); }
[data-theme="light"] .sl-boleto-consent a { color: var(--sl-brand); }

/* Process steps (Você solicita / Validamos / Enviamos) */
[data-theme="light"] .sl-boleto-process,
[data-theme="light"] .sl-boleto-step,
[data-theme="light"] .sl-boleto-process-step {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-boleto-step-num,
[data-theme="light"] .sl-boleto-process-num {
	background: rgba(241, 96, 0, 0.08);
	border-color: rgba(241, 96, 0, 0.25);
	color: var(--sl-brand);
}
[data-theme="light"] .sl-boleto-step strong,
[data-theme="light"] .sl-boleto-process-step strong { color: var(--sl-text); }
[data-theme="light"] .sl-boleto-step span,
[data-theme="light"] .sl-boleto-process-step span { color: var(--sl-text-2); }

/* "Processo 100% seguro" banner */
[data-theme="light"] .sl-boleto-secure,
[data-theme="light"] .sl-boleto-trust {
	background: rgba(45, 212, 191, 0.06);
	border: 1px solid rgba(45, 212, 191, 0.25);
	color: var(--sl-text);
}

/* Container wrap geral do boleto */
[data-theme="light"] .sl-boleto-wrap { color: var(--sl-text); }

/* Note: "Falar com financeiro" link no canto inferior direito */
[data-theme="light"] .sl-boleto-card a[href*="wa.me"] { color: var(--sl-brand); }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE — SWEEP FINAL (catch-all + componentes restantes)
   ════════════════════════════════════════════════════════════════════════ */

/* Bento grid (home) */
[data-theme="light"] .sl-bento,
[data-theme="light"] .sl-bento-a,
[data-theme="light"] .sl-bento-b,
[data-theme="light"] .sl-bento-c,
[data-theme="light"] .sl-bento-d,
[data-theme="light"] .sl-bento-cell {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-bento-cell:hover { border-color: rgba(0, 0, 0, 0.16); }

/* Pillars / Features grid */
[data-theme="light"] .sl-pillar,
[data-theme="light"] .sl-pillar-card,
[data-theme="light"] .sl-feature-card,
[data-theme="light"] .sl-features-grid > *,
[data-theme="light"] .sl-feats-grid > * {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}

/* Testimonials */
[data-theme="light"] .sl-testi,
[data-theme="light"] .sl-testi-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-testi-quote { color: var(--sl-text); }
[data-theme="light"] .sl-testi-author { color: var(--sl-text-2); }

/* Sticky swap section */
[data-theme="light"] .sl-stack,
[data-theme="light"] .sl-stack-card,
[data-theme="light"] .sl-stack-item,
[data-theme="light"] .sl-stack-data,
[data-theme="light"] .sl-stack-map {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* H-scroll cards */
[data-theme="light"] .sl-hscroll,
[data-theme="light"] .sl-hscroll-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* Visitantes Online — só os cards de cidade têm bg branco + border + shadow.
 * O .sl-vo-cities é wrapper de seção (margin only), NÃO é um card — antes
 * estava recebendo bg/border criando "frame dentro de frame" feio. */
[data-theme="light"] .sl-vo-total,
[data-theme="light"] .sl-vo-city {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-vo-cities {
	background: transparent;
	border: 0;
	box-shadow: none;
}
[data-theme="light"] .sl-vo-city:hover {
	border-color: rgba(45, 212, 191, 0.30);
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-vo-total-num,
[data-theme="light"] .sl-vo-cities-count,
[data-theme="light"] .sl-vo-city-body strong { color: var(--sl-text); }
[data-theme="light"] .sl-vo-total-label,
[data-theme="light"] .sl-vo-cities-label,
[data-theme="light"] .sl-vo-city-body span,
[data-theme="light"] .sl-vo-meta-time,
[data-theme="light"] .sl-vo-meta-temp { color: var(--sl-text-2); }
[data-theme="light"] .sl-vo-city--unknown { background: #f6f6fa; }

/* Card feedback "Essa configuração funcionou pra você?" no single-marca —
 * usava rgba(0,0,0,0.18) que vira cinza escuro feio em fundo branco. */
[data-theme="light"] .sl-cfg-feedback {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-cfg-feedback-label { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-cfg-feedback-label strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cfg-feedback-thanks strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cfg-feedback-stats { color: var(--sl-text-3) !important; }

/* Botões "Sim/Não" — bg branco, border escura sutil; hover preserva accent */
[data-theme="light"] .sl-cfg-feedback-btn {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-cfg-feedback-btn:hover {
	background: rgba(45, 212, 191, 0.08) !important;
	border-color: rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-teal) !important;
}
[data-theme="light"] .sl-cfg-feedback-btn[data-vote="no"]:hover {
	background: rgba(255, 64, 96, 0.08) !important;
	border-color: rgba(255, 64, 96, 0.40) !important;
	color: #d11636 !important;
}
[data-theme="light"] .sl-cfg-feedback-btn.is-active {
	background: rgba(45, 212, 191, 0.12) !important;
	border-color: var(--sl-teal) !important;
	color: var(--sl-teal) !important;
}
[data-theme="light"] .sl-cfg-feedback-btn[data-vote="no"].is-active {
	background: rgba(255, 64, 96, 0.10) !important;
	border-color: #d11636 !important;
	color: #d11636 !important;
}

/* Incidents */
[data-theme="light"] .sl-incident,
[data-theme="light"] .sl-incident-card,
[data-theme="light"] .sl-incident-row,
[data-theme="light"] .sl-incidents-list > * {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-incident-title { color: var(--sl-text); }
[data-theme="light"] .sl-incident-time,
[data-theme="light"] .sl-incident-meta { color: var(--sl-text-2); }

/* Single marca (single-marca.php) */
[data-theme="light"] .sl-single-marca-hero,
[data-theme="light"] .sl-single-marca-hero-body,
[data-theme="light"] .sl-single-marca-meta,
[data-theme="light"] .sl-single-marca-content,
[data-theme="light"] .sl-single-marca-share-info,
[data-theme="light"] .sl-marca-fab-link,
[data-theme="light"] .sl-marca-card,
[data-theme="light"] .sl-fab-card,
[data-theme="light"] .sl-fam-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-marca-card:hover,
[data-theme="light"] .sl-fab-card:hover {
	border-color: rgba(0, 0, 0, 0.16);
	box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-cfg-breadcrumb,
[data-theme="light"] .sl-cfg-breadcrumb a { color: var(--sl-text-2); }
[data-theme="light"] .sl-cfg-breadcrumb a:hover { color: var(--sl-text); }
[data-theme="light"] .sl-cfg-breadcrumb [aria-current="page"] { color: var(--sl-text); }

/* Single marca SHARE buttons */
[data-theme="light"] .sl-share-btn {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-share-btn:hover {
	background: #fafafc;
	border-color: rgba(0, 0, 0, 0.18);
	color: var(--sl-text);
}

/* Comandos SMS shortcodes */
[data-theme="light"] .sl-cmd,
[data-theme="light"] .sl-cmd-list,
[data-theme="light"] .sl-cmd-item,
[data-theme="light"] .sl-cmd-content {
	background: #f6f6fa;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-cmd-label { color: var(--sl-text-2); }
[data-theme="light"] .sl-cmd-text { color: var(--sl-text); }
[data-theme="light"] .sl-cmd-copy {
	background: rgba(241, 96, 0, 0.08);
	border: 1px solid rgba(241, 96, 0, 0.25);
	color: var(--sl-brand);
}
[data-theme="light"] .sl-cmd-copy:hover { background: rgba(241, 96, 0, 0.14); }

/* Forum / comments */
[data-theme="light"] .sl-forum,
[data-theme="light"] .sl-forum-comments,
[data-theme="light"] .sl-forum-thread,
[data-theme="light"] .sl-forum-reply,
[data-theme="light"] .sl-forum-meta {
	background: #ffffff;
	border-color: rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-forum-author,
[data-theme="light"] .sl-forum-date { color: var(--sl-text-2); }
[data-theme="light"] .sl-forum-accepted {
	background: rgba(45, 212, 191, 0.06);
	border: 1px solid rgba(45, 212, 191, 0.25);
}

/* 404 page */
[data-theme="light"] .sl-404,
[data-theme="light"] .sl-404-content,
[data-theme="light"] .sl-404-suggestions {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] .sl-404-link {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* Search results */
[data-theme="light"] .search-results,
[data-theme="light"] .sl-search-result,
[data-theme="light"] .search-no-results {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* Pagination */
[data-theme="light"] .sl-pagination,
[data-theme="light"] .sl-pagination a,
[data-theme="light"] .sl-pagination span {
	color: var(--sl-text-2);
	border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .sl-pagination .current {
	background: var(--sl-brand);
	color: #ffffff;
	border-color: var(--sl-brand);
}

/* Personas + Rastreadores + Plataforma + Legal pages */
[data-theme="light"] .sl-persona-hero,
[data-theme="light"] .sl-persona-card,
[data-theme="light"] .sl-persona-stat,
[data-theme="light"] .sl-rev-card,
[data-theme="light"] .sl-gf-card,
[data-theme="light"] .sl-seg-card,
[data-theme="light"] .sl-rast-hero,
[data-theme="light"] .sl-rast-grid > *,
[data-theme="light"] .sl-rast-card,
[data-theme="light"] .sl-rast-filter,
[data-theme="light"] .sl-plat-hero,
[data-theme="light"] .sl-plat-feature,
[data-theme="light"] .sl-plat-section,
[data-theme="light"] .sl-plat-card {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}

/* Page-legal */
[data-theme="light"] .sl-legal,
[data-theme="light"] .sl-legal-content,
[data-theme="light"] .sl-legal-toc,
[data-theme="light"] .sl-legal-section {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] .sl-legal h1,
[data-theme="light"] .sl-legal h2,
[data-theme="light"] .sl-legal h3 { color: var(--sl-text); }
[data-theme="light"] .sl-legal p,
[data-theme="light"] .sl-legal li { color: var(--sl-text-2); }

/* Page-api */
[data-theme="light"] .sl-api-hero,
[data-theme="light"] .sl-api-card,
[data-theme="light"] .sl-api-endpoint,
[data-theme="light"] .sl-api-method {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
}
[data-theme="light"] .sl-api-code {
	background: #1e1e2e;
	color: #fafafa;
}

/* Live event ticker popup (canto inferior) */
[data-theme="light"] .sl-ticker {
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.18);
	color: var(--sl-text);
	backdrop-filter: blur(12px);
}
[data-theme="light"] .sl-ticker-label,
[data-theme="light"] .sl-ticker-title { color: var(--sl-text); }
[data-theme="light"] .sl-ticker-meta { color: var(--sl-text-2); }
[data-theme="light"] .sl-ticker-close { color: var(--sl-text-3); }
[data-theme="light"] .sl-ticker-close:hover { color: var(--sl-text); }

/* Cookie banner */
[data-theme="light"] .sl-cookie-banner,
[data-theme="light"] .sl-cookie-modal {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
	box-shadow: 0 -8px 32px -8px rgba(0, 0, 0, 0.15);
}

/* Back-to-top */
[data-theme="light"] .sl-back-to-top {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-brand);
	box-shadow: 0 8px 20px -6px rgba(241, 96, 0, 0.25);
}
[data-theme="light"] .sl-back-to-top:hover {
	border-color: var(--sl-brand);
	box-shadow: 0 12px 30px -8px rgba(241, 96, 0, 0.40);
}

/* Online counter pill — fora da topbar (página /visitantes-online/) */
[data-theme="light"] .sl-online-pill {
	background: rgba(45, 212, 191, 0.08);
	border: 1px solid rgba(45, 212, 191, 0.25);
	color: var(--sl-teal);
}
/* .sl-status-online dentro da topbar fica DENTRO de .sl-status-geo-rotator
 * que já tem white pill bg — não precisa de bg próprio (era teal sobre teal
 * criando look inconsistente). Mantém só os colors do conteúdo. */
[data-theme="light"] .sl-status-online {
	background: transparent !important;
	border: 0 !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-status-online-icon { color: var(--sl-teal) !important; }
[data-theme="light"] .sl-status-online-count { color: var(--sl-teal) !important; }

/* ── Light mode — nona passada (boleto-card-inner + toast) ── */

/* CRÍTICO: .sl-boleto-card-inner tem hardcoded dark gradient que sobrepõe nossa
 * regra externa em .sl-boleto-card. Override direto no inner. */
[data-theme="light"] .sl-boleto-card-inner {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 250, 0.98));
}
[data-theme="light"] .sl-boleto-card-inner::before {
	background: radial-gradient(ellipse at top, rgba(241, 96, 0, 0.06), transparent 55%);
}

/* Halo glow externo — reduzir opacity em light pra não brigar com bg branco */
[data-theme="light"] .sl-boleto-halo {
	opacity: 0.30;
	filter: blur(6px);
}

/* Labels do form de boleto */
[data-theme="light"] .sl-boleto-card-inner label,
[data-theme="light"] .sl-boleto-field label {
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-boleto-field small,
[data-theme="light"] .sl-boleto-card-inner small {
	color: var(--sl-text-3);
}

/* Toast de notificação (visitor journey messages "Atendemos frotas...") */
[data-theme="light"] .sl-copies-toast {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text);
	box-shadow:
		0 20px 40px -10px rgba(0, 0, 0, 0.18),
		0 4px 12px rgba(0, 0, 0, 0.06);
}
/* Tier variants — em light mode também limpamos a borda colorida */
[data-theme="light"] .sl-copies-toast.tier-bronze,
[data-theme="light"] .sl-copies-toast.tier-silver,
[data-theme="light"] .sl-copies-toast.tier-gold,
[data-theme="light"] .sl-copies-toast.tier-platinum {
	border-color: rgba(0, 0, 0, 0.08) !important;
	box-shadow:
		0 20px 40px -10px rgba(0, 0, 0, 0.18),
		0 4px 12px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-copies-toast-title { color: var(--sl-text); }
[data-theme="light"] .sl-copies-toast-msg { color: var(--sl-text-2); }
[data-theme="light"] .sl-copies-toast-close { color: var(--sl-text-3); }
[data-theme="light"] .sl-copies-toast-close:hover { color: var(--sl-text); }

/* Visitor Journey Modal — também tem dark hardcoded */
[data-theme="light"] .sl-jrn-modal-panel {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.25);
}
[data-theme="light"] .sl-jrn-modal-overlay { background: rgba(0, 0, 0, 0.55); }
[data-theme="light"] .sl-jrn-modal-title,
[data-theme="light"] .sl-jrn-greeting,
[data-theme="light"] .sl-jrn-stat-value { color: var(--sl-text); }
[data-theme="light"] .sl-jrn-subtitle,
[data-theme="light"] .sl-jrn-stat-label { color: var(--sl-text-2); }
[data-theme="light"] .sl-jrn-stat,
[data-theme="light"] .sl-jrn-achievement {
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-jrn-modal-close {
	background: rgba(0, 0, 0, 0.05);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-jrn-modal-close:hover {
	background: rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}

/* Bg-anim do modal — reduzir intensidade em light */
[data-theme="light"] .sl-jrn-bg-anim { opacity: 0.3; }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE — UNIFICAÇÃO DE BIG CARDS
   Aplica o mesmo look-and-feel do card CTA "Pronto pra ter sua plataforma"
   em todos os outros cards grandes do site. Garante consistência visual em
   light mode independente do que estava hardcoded em cada componente.
   ════════════════════════════════════════════════════════════════════════ */

/* === Lista de TODOS os "big cards" que devem compartilhar o mesmo look === */
[data-theme="light"] .sl-aurora-box,
[data-theme="light"] .sl-special,
[data-theme="light"] .sl-uptime,
[data-theme="light"] .sl-dash,
[data-theme="light"] .sl-sim,
[data-theme="light"] .sl-gw-banner,
[data-theme="light"] .sl-roi,
[data-theme="light"] .sl-sav-teaser,
[data-theme="light"] .sl-sav-hero,
[data-theme="light"] .sl-sitedemo-pricing-total,
[data-theme="light"] .sl-sitedemo-preview,
[data-theme="light"] .sl-id-card,
[data-theme="light"] .sl-story,
[data-theme="light"] .sl-support,
[data-theme="light"] .sl-boleto-card-inner,
[data-theme="light"] .sl-contact-form-wrap,
[data-theme="light"] .sl-contact-form,
[data-theme="light"] .sl-contact-info-card,
[data-theme="light"] .sl-fleet,
[data-theme="light"] .sl-calc {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text) !important;
}

/* Mata overlays escuros via ::before em todos os big cards */
[data-theme="light"] .sl-aurora-box::before,
[data-theme="light"] .sl-special::before,
[data-theme="light"] .sl-uptime::before,
[data-theme="light"] .sl-gw-banner::before,
[data-theme="light"] .sl-sitedemo-pricing-total::before,
[data-theme="light"] .sl-id-card::before,
[data-theme="light"] .sl-boleto-card-inner::before {
	background:
		radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.85) 70%),
		rgba(255, 255, 255, 0.6) !important;
}

/* Bordas internas via ::after em light */
[data-theme="light"] .sl-aurora-box::after,
[data-theme="light"] .sl-special::after,
[data-theme="light"] .sl-uptime::after,
[data-theme="light"] .sl-id-card::after {
	border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Aurora gradients animados — opacidade reduzida em light */
[data-theme="light"] .sl-aurora-bg,
[data-theme="light"] .sl-special-bg,
[data-theme="light"] .sl-uptime-bg,
[data-theme="light"] .sl-gw-banner-bg,
[data-theme="light"] .sl-boleto-halo {
	opacity: 0.18 !important;
}

/* Headings dentro dos big cards — texto escuro */
[data-theme="light"] .sl-aurora-box h1,
[data-theme="light"] .sl-aurora-box h2,
[data-theme="light"] .sl-aurora-box h3,
[data-theme="light"] .sl-special h1,
[data-theme="light"] .sl-special h2,
[data-theme="light"] .sl-special h3,
[data-theme="light"] .sl-uptime h1,
[data-theme="light"] .sl-uptime h2,
[data-theme="light"] .sl-uptime h3,
[data-theme="light"] .sl-dash h2,
[data-theme="light"] .sl-dash h3,
[data-theme="light"] .sl-sim h2,
[data-theme="light"] .sl-sim h3,
[data-theme="light"] .sl-gw-banner h2,
[data-theme="light"] .sl-gw-banner h3,
[data-theme="light"] .sl-roi h2,
[data-theme="light"] .sl-roi h3,
[data-theme="light"] .sl-sav-teaser h2,
[data-theme="light"] .sl-sav-teaser h3,
[data-theme="light"] .sl-sav-hero h1,
[data-theme="light"] .sl-sitedemo-pricing-total h2,
[data-theme="light"] .sl-sitedemo-pricing-total h3,
[data-theme="light"] .sl-id-card h2,
[data-theme="light"] .sl-id-card h3,
[data-theme="light"] .sl-story h2,
[data-theme="light"] .sl-story h3,
[data-theme="light"] .sl-support h2,
[data-theme="light"] .sl-support h3,
[data-theme="light"] .sl-boleto-card-inner h2,
[data-theme="light"] .sl-contact-form-wrap h2,
[data-theme="light"] .sl-contact-info-card h2,
[data-theme="light"] .sl-fleet h2,
[data-theme="light"] .sl-calc h2,
[data-theme="light"] .sl-calc h3 {
	color: var(--sl-text);
}

/* Parágrafos dentro dos big cards — texto secundário */
[data-theme="light"] .sl-aurora-box p,
[data-theme="light"] .sl-special p,
[data-theme="light"] .sl-uptime p,
[data-theme="light"] .sl-gw-banner p,
[data-theme="light"] .sl-roi p,
[data-theme="light"] .sl-sav-teaser p,
[data-theme="light"] .sl-sav-hero p,
[data-theme="light"] .sl-sitedemo-pricing-total p,
[data-theme="light"] .sl-id-card p,
[data-theme="light"] .sl-story p,
[data-theme="light"] .sl-support p,
[data-theme="light"] .sl-boleto-card-inner p,
[data-theme="light"] .sl-contact-form-wrap p,
[data-theme="light"] .sl-fleet p,
[data-theme="light"] .sl-calc p {
	color: var(--sl-text-2);
}

/* Small/fine print dentro dos big cards */
[data-theme="light"] .sl-aurora-box small,
[data-theme="light"] .sl-special small,
[data-theme="light"] .sl-uptime small,
[data-theme="light"] .sl-gw-banner small,
[data-theme="light"] .sl-roi small,
[data-theme="light"] .sl-sav-teaser small,
[data-theme="light"] .sl-sitedemo-pricing-total small,
[data-theme="light"] .sl-id-card small,
[data-theme="light"] .sl-support small,
[data-theme="light"] .sl-boleto-card-inner small {
	color: var(--sl-text-3);
}

/* Chips internos (estilo "● Vamos operar juntos") — bg verde-claro + borda teal */
[data-theme="light"] .sl-aurora-box .sl-chip,
[data-theme="light"] .sl-special .sl-chip,
[data-theme="light"] .sl-uptime .sl-chip,
[data-theme="light"] .sl-dash .sl-chip,
[data-theme="light"] .sl-sim .sl-chip,
[data-theme="light"] .sl-gw-banner .sl-chip,
[data-theme="light"] .sl-roi .sl-chip,
[data-theme="light"] .sl-sav-teaser .sl-chip,
[data-theme="light"] .sl-sav-hero .sl-chip,
[data-theme="light"] .sl-sitedemo-pricing-total .sl-chip,
[data-theme="light"] .sl-id-card .sl-chip,
[data-theme="light"] .sl-story .sl-chip,
[data-theme="light"] .sl-support .sl-chip,
[data-theme="light"] .sl-boleto-card-inner .sl-chip,
[data-theme="light"] .sl-fleet .sl-chip,
[data-theme="light"] .sl-calc .sl-chip {
	background: rgba(45, 212, 191, 0.10);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}

/* Botões ghost dentro dos big cards — borda escura + hover sutil */
[data-theme="light"] .sl-aurora-box .sl-btn-ghost,
[data-theme="light"] .sl-special .sl-btn-ghost,
[data-theme="light"] .sl-uptime .sl-btn-ghost,
[data-theme="light"] .sl-gw-banner .sl-btn-ghost,
[data-theme="light"] .sl-roi .sl-btn-ghost,
[data-theme="light"] .sl-sav-teaser .sl-btn-ghost,
[data-theme="light"] .sl-sitedemo-pricing-total .sl-btn-ghost,
[data-theme="light"] .sl-support .sl-btn-ghost {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}
[data-theme="light"] .sl-aurora-box .sl-btn-ghost:hover,
[data-theme="light"] .sl-special .sl-btn-ghost:hover,
[data-theme="light"] .sl-uptime .sl-btn-ghost:hover,
[data-theme="light"] .sl-gw-banner .sl-btn-ghost:hover,
[data-theme="light"] .sl-roi .sl-btn-ghost:hover,
[data-theme="light"] .sl-sav-teaser .sl-btn-ghost:hover,
[data-theme="light"] .sl-sitedemo-pricing-total .sl-btn-ghost:hover,
[data-theme="light"] .sl-support .sl-btn-ghost:hover {
	background: rgba(0, 0, 0, 0.08);
	border-color: rgba(0, 0, 0, 0.20);
}

/* Strong/bold dentro dos big cards */
[data-theme="light"] .sl-aurora-box strong,
[data-theme="light"] .sl-special strong,
[data-theme="light"] .sl-uptime strong,
[data-theme="light"] .sl-id-card strong,
[data-theme="light"] .sl-story strong,
[data-theme="light"] .sl-boleto-card-inner strong,
[data-theme="light"] .sl-fleet strong { color: var(--sl-text); }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT MODE — UNIVERSAL CARD STYLE
   Aplica o mesmo padrão visual em TODOS os cards-like do site:
   .sl-*-card · .sl-*-box · .sl-*-panel · .sl-*-hero · .sl-*-modal-panel
   Garante consistência total em light mode independente da página.
   ════════════════════════════════════════════════════════════════════════ */

[data-theme="light"] .sl-sim-panel,
[data-theme="light"] .sl-demo-card,
[data-theme="light"] .sl-stack-card,
[data-theme="light"] .sl-bx-card,
[data-theme="light"] .sl-hscroll-card,
[data-theme="light"] .sl-page-hero,
[data-theme="light"] .sl-post-card,
[data-theme="light"] .sl-api-hero,
[data-theme="light"] .sl-api-panel,
[data-theme="light"] .sl-sav-panel,
[data-theme="light"] .sl-sav-card,
[data-theme="light"] .sl-persona-hero,
[data-theme="light"] .sl-persona-cta-box,
[data-theme="light"] .sl-pri-result-card,
[data-theme="light"] .sl-per-card,
[data-theme="light"] .sl-fpx-card,
[data-theme="light"] .sl-sitedemo-hero,
[data-theme="light"] .sl-sitedemo-mock-hero,
[data-theme="light"] .sl-sitedemo-mock-card,
[data-theme="light"] .sl-plat-hero,
[data-theme="light"] .sl-legal-hero,
[data-theme="light"] .sl-single-marca-hero,
[data-theme="light"] .sl-fab-card,
[data-theme="light"] .sl-srv-card,
[data-theme="light"] .sl-uptime-hero,
[data-theme="light"] .sl-phone-card,
[data-theme="light"] .sl-int-card,
[data-theme="light"] .sl-wx-modal-panel,
[data-theme="light"] .sl-srv-modal-panel,
[data-theme="light"] .sl-status-hero,
[data-theme="light"] .sl-status-meta-card,
[data-theme="light"] .sl-status-incident-card,
[data-theme="light"] .sl-tier-slider,
[data-theme="light"] .sl-pricing-slider,
[data-theme="light"] .sl-volume-card,
[data-theme="light"] .sl-volume-section,
[data-theme="light"] .sl-shortcut,
[data-theme="light"] .sl-brand-card,
[data-theme="light"] .sl-cta-box,
[data-theme="light"] .sl-pillar-box,
[data-theme="light"] .sl-form-card,
[data-theme="light"] .sl-quote-card,
[data-theme="light"] .sl-stat-card,
[data-theme="light"] .sl-info-card,
[data-theme="light"] .sl-cmd-card,
[data-theme="light"] .sl-marca-share-card,
[data-theme="light"] .sl-fab-banner,
[data-theme="light"] .sl-fab-hero,
[data-theme="light"] .sl-fam-hero,
[data-theme="light"] .sl-fam-card,
[data-theme="light"] .sl-archive-hero {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text) !important;
}

/* Mata overlays escuros via ::before/::after em todos */
[data-theme="light"] .sl-sim-panel::before,
[data-theme="light"] .sl-demo-card::before,
[data-theme="light"] .sl-stack-card::before,
[data-theme="light"] .sl-page-hero::before,
[data-theme="light"] .sl-api-hero::before,
[data-theme="light"] .sl-api-panel::before,
[data-theme="light"] .sl-sav-panel::before,
[data-theme="light"] .sl-sav-card::before,
[data-theme="light"] .sl-persona-hero::before,
[data-theme="light"] .sl-pri-result-card::before,
[data-theme="light"] .sl-per-card::before,
[data-theme="light"] .sl-fpx-card::before,
[data-theme="light"] .sl-sitedemo-hero::before,
[data-theme="light"] .sl-plat-hero::before,
[data-theme="light"] .sl-single-marca-hero::before,
[data-theme="light"] .sl-fab-card::before,
[data-theme="light"] .sl-srv-card::before,
[data-theme="light"] .sl-uptime-hero::before,
[data-theme="light"] .sl-phone-card::before,
[data-theme="light"] .sl-int-card::before,
[data-theme="light"] .sl-wx-modal-panel::before,
[data-theme="light"] .sl-srv-modal-panel::before,
[data-theme="light"] .sl-status-hero::before,
[data-theme="light"] .sl-status-meta-card::before,
[data-theme="light"] .sl-status-incident-card::before {
	background: transparent !important;
}

[data-theme="light"] .sl-sim-panel::after,
[data-theme="light"] .sl-demo-card::after,
[data-theme="light"] .sl-stack-card::after,
[data-theme="light"] .sl-page-hero::after,
[data-theme="light"] .sl-api-hero::after,
[data-theme="light"] .sl-sav-panel::after,
[data-theme="light"] .sl-sav-card::after,
[data-theme="light"] .sl-pri-result-card::after,
[data-theme="light"] .sl-per-card::after,
[data-theme="light"] .sl-fpx-card::after,
[data-theme="light"] .sl-sitedemo-hero::after,
[data-theme="light"] .sl-plat-hero::after,
[data-theme="light"] .sl-fab-card::after,
[data-theme="light"] .sl-srv-card::after,
[data-theme="light"] .sl-uptime-hero::after,
[data-theme="light"] .sl-int-card::after,
[data-theme="light"] .sl-wx-modal-panel::after,
[data-theme="light"] .sl-status-meta-card::after {
	border-color: rgba(0, 0, 0, 0.06) !important;
}

/* Headings em TODOS esses cards — texto escuro */
[data-theme="light"] .sl-sim-panel h1,
[data-theme="light"] .sl-sim-panel h2,
[data-theme="light"] .sl-sim-panel h3,
[data-theme="light"] .sl-demo-card h1,
[data-theme="light"] .sl-demo-card h2,
[data-theme="light"] .sl-demo-card h3,
[data-theme="light"] .sl-stack-card h1,
[data-theme="light"] .sl-stack-card h2,
[data-theme="light"] .sl-stack-card h3,
[data-theme="light"] .sl-bx-card h2,
[data-theme="light"] .sl-bx-card h3,
[data-theme="light"] .sl-hscroll-card h2,
[data-theme="light"] .sl-hscroll-card h3,
[data-theme="light"] .sl-page-hero h1,
[data-theme="light"] .sl-page-hero h2,
[data-theme="light"] .sl-post-card h2,
[data-theme="light"] .sl-post-card h3,
[data-theme="light"] .sl-api-hero h1,
[data-theme="light"] .sl-api-hero h2,
[data-theme="light"] .sl-api-panel h2,
[data-theme="light"] .sl-api-panel h3,
[data-theme="light"] .sl-sav-panel h2,
[data-theme="light"] .sl-sav-card h2,
[data-theme="light"] .sl-sav-card h3,
[data-theme="light"] .sl-persona-hero h1,
[data-theme="light"] .sl-persona-hero h2,
[data-theme="light"] .sl-persona-cta-box h2,
[data-theme="light"] .sl-pri-result-card h2,
[data-theme="light"] .sl-pri-result-card h3,
[data-theme="light"] .sl-per-card h2,
[data-theme="light"] .sl-per-card h3,
[data-theme="light"] .sl-fpx-card h2,
[data-theme="light"] .sl-fpx-card h3,
[data-theme="light"] .sl-sitedemo-hero h1,
[data-theme="light"] .sl-sitedemo-hero h2,
[data-theme="light"] .sl-plat-hero h1,
[data-theme="light"] .sl-plat-hero h2,
[data-theme="light"] .sl-legal-hero h1,
[data-theme="light"] .sl-legal-hero h2,
[data-theme="light"] .sl-single-marca-hero h1,
[data-theme="light"] .sl-single-marca-hero h2,
[data-theme="light"] .sl-fab-card h2,
[data-theme="light"] .sl-fab-card h3,
[data-theme="light"] .sl-srv-card h2,
[data-theme="light"] .sl-srv-card h3,
[data-theme="light"] .sl-uptime-hero h1,
[data-theme="light"] .sl-uptime-hero h2,
[data-theme="light"] .sl-phone-card h2,
[data-theme="light"] .sl-phone-card h3,
[data-theme="light"] .sl-int-card h2,
[data-theme="light"] .sl-int-card h3,
[data-theme="light"] .sl-wx-modal-panel h2,
[data-theme="light"] .sl-wx-modal-panel h3,
[data-theme="light"] .sl-srv-modal-panel h2,
[data-theme="light"] .sl-srv-modal-panel h3,
[data-theme="light"] .sl-status-hero h1,
[data-theme="light"] .sl-status-hero h2,
[data-theme="light"] .sl-status-meta-card h3,
[data-theme="light"] .sl-status-incident-card h3 {
	color: var(--sl-text) !important;
}

/* Parágrafos */
[data-theme="light"] .sl-sim-panel p,
[data-theme="light"] .sl-demo-card p,
[data-theme="light"] .sl-stack-card p,
[data-theme="light"] .sl-bx-card p,
[data-theme="light"] .sl-hscroll-card p,
[data-theme="light"] .sl-page-hero p,
[data-theme="light"] .sl-post-card p,
[data-theme="light"] .sl-api-hero p,
[data-theme="light"] .sl-api-panel p,
[data-theme="light"] .sl-sav-panel p,
[data-theme="light"] .sl-sav-card p,
[data-theme="light"] .sl-persona-hero p,
[data-theme="light"] .sl-pri-result-card p,
[data-theme="light"] .sl-per-card p,
[data-theme="light"] .sl-fpx-card p,
[data-theme="light"] .sl-sitedemo-hero p,
[data-theme="light"] .sl-plat-hero p,
[data-theme="light"] .sl-legal-hero p,
[data-theme="light"] .sl-single-marca-hero p,
[data-theme="light"] .sl-fab-card p,
[data-theme="light"] .sl-srv-card p,
[data-theme="light"] .sl-uptime-hero p,
[data-theme="light"] .sl-phone-card p,
[data-theme="light"] .sl-int-card p,
[data-theme="light"] .sl-status-hero p,
[data-theme="light"] .sl-status-meta-card p,
[data-theme="light"] .sl-status-incident-card p {
	color: var(--sl-text-2) !important;
}

/* Small/fine print em todos */
[data-theme="light"] .sl-sim-panel small,
[data-theme="light"] .sl-demo-card small,
[data-theme="light"] .sl-stack-card small,
[data-theme="light"] .sl-page-hero small,
[data-theme="light"] .sl-post-card small,
[data-theme="light"] .sl-api-hero small,
[data-theme="light"] .sl-sav-panel small,
[data-theme="light"] .sl-sav-card small,
[data-theme="light"] .sl-persona-hero small,
[data-theme="light"] .sl-pri-result-card small,
[data-theme="light"] .sl-fpx-card small,
[data-theme="light"] .sl-fab-card small,
[data-theme="light"] .sl-srv-card small,
[data-theme="light"] .sl-uptime-hero small {
	color: var(--sl-text-3) !important;
}

/* Strong/bold */
[data-theme="light"] .sl-sim-panel strong,
[data-theme="light"] .sl-demo-card strong,
[data-theme="light"] .sl-stack-card strong,
[data-theme="light"] .sl-bx-card strong,
[data-theme="light"] .sl-hscroll-card strong,
[data-theme="light"] .sl-post-card strong,
[data-theme="light"] .sl-api-panel strong,
[data-theme="light"] .sl-sav-card strong,
[data-theme="light"] .sl-persona-hero strong,
[data-theme="light"] .sl-pri-result-card strong,
[data-theme="light"] .sl-per-card strong,
[data-theme="light"] .sl-fpx-card strong,
[data-theme="light"] .sl-fab-card strong,
[data-theme="light"] .sl-srv-card strong,
[data-theme="light"] .sl-int-card strong { color: var(--sl-text) !important; }

/* Span/labels secundários */
[data-theme="light"] .sl-sim-panel span:not([class*="sl-gt"]):not([class*="brand"]),
[data-theme="light"] .sl-demo-card span:not([class*="sl-gt"]):not([class*="brand"]),
[data-theme="light"] .sl-bx-card span:not([class*="sl-gt"]):not([class*="brand"]),
[data-theme="light"] .sl-hscroll-card span:not([class*="sl-gt"]):not([class*="brand"]),
[data-theme="light"] .sl-post-card span:not([class*="sl-gt"]):not([class*="brand"]) { color: var(--sl-text-2); }

/* Chips internos em todos esses cards — verde-teal consistente */
[data-theme="light"] .sl-sim-panel .sl-chip,
[data-theme="light"] .sl-demo-card .sl-chip,
[data-theme="light"] .sl-stack-card .sl-chip,
[data-theme="light"] .sl-bx-card .sl-chip,
[data-theme="light"] .sl-page-hero .sl-chip,
[data-theme="light"] .sl-api-hero .sl-chip,
[data-theme="light"] .sl-api-panel .sl-chip,
[data-theme="light"] .sl-sav-panel .sl-chip,
[data-theme="light"] .sl-persona-hero .sl-chip,
[data-theme="light"] .sl-pri-result-card .sl-chip,
[data-theme="light"] .sl-fpx-card .sl-chip,
[data-theme="light"] .sl-sitedemo-hero .sl-chip,
[data-theme="light"] .sl-plat-hero .sl-chip,
[data-theme="light"] .sl-single-marca-hero .sl-chip,
[data-theme="light"] .sl-fab-card .sl-chip,
[data-theme="light"] .sl-uptime-hero .sl-chip,
[data-theme="light"] .sl-status-hero .sl-chip {
	background: rgba(45, 212, 191, 0.10);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}

/* Botões ghost dentro dos cards */
[data-theme="light"] .sl-sim-panel .sl-btn-ghost,
[data-theme="light"] .sl-demo-card .sl-btn-ghost,
[data-theme="light"] .sl-stack-card .sl-btn-ghost,
[data-theme="light"] .sl-page-hero .sl-btn-ghost,
[data-theme="light"] .sl-api-hero .sl-btn-ghost,
[data-theme="light"] .sl-sav-panel .sl-btn-ghost,
[data-theme="light"] .sl-persona-hero .sl-btn-ghost,
[data-theme="light"] .sl-pri-result-card .sl-btn-ghost,
[data-theme="light"] .sl-fpx-card .sl-btn-ghost,
[data-theme="light"] .sl-sitedemo-hero .sl-btn-ghost,
[data-theme="light"] .sl-plat-hero .sl-btn-ghost,
[data-theme="light"] .sl-single-marca-hero .sl-btn-ghost,
[data-theme="light"] .sl-uptime-hero .sl-btn-ghost,
[data-theme="light"] .sl-status-hero .sl-btn-ghost {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.12);
	color: var(--sl-text);
}

/* Internal aurora gradients animados — opacidade reduzida */
[data-theme="light"] .sl-sav-card-bg,
[data-theme="light"] .sl-fpx-card-bg,
[data-theme="light"] .sl-uptime-hero-bg,
[data-theme="light"] .sl-status-hero-bg,
[data-theme="light"] .sl-persona-hero-bg,
[data-theme="light"] .sl-plat-hero-bg,
[data-theme="light"] .sl-single-marca-hero-bg,
[data-theme="light"] .sl-fab-card-bg,
[data-theme="light"] .sl-srv-card-bg {
	opacity: 0.18 !important;
}

/* Listas (ul/li) dentro dos cards — texto secundário */
[data-theme="light"] .sl-sim-panel li,
[data-theme="light"] .sl-demo-card li,
[data-theme="light"] .sl-stack-card li,
[data-theme="light"] .sl-bx-card li,
[data-theme="light"] .sl-post-card li,
[data-theme="light"] .sl-sav-card li,
[data-theme="light"] .sl-persona-hero li,
[data-theme="light"] .sl-fpx-card li,
[data-theme="light"] .sl-fab-card li,
[data-theme="light"] .sl-int-card li { color: var(--sl-text-2); }

/* ── Light mode — pass 11: reduzir glows laranja/teal de fundo de seções ── */

/* Hero halo ambient (radial laranja + teal) — em light fica MUITO saturado.
 * Reduz opacidade pra 0.30 do original e diminui o blur pra ficar mais discreto. */
[data-theme="light"] .sl-hero::before {
	opacity: 0.30 !important;
	filter: blur(60px);
}

/* Mesma lógica nos outros heroes/cards com glow de fundo */
[data-theme="light"] .sl-persona-hero::before,
[data-theme="light"] .sl-sav-hero::before,
[data-theme="light"] .sl-plat-hero::before,
[data-theme="light"] .sl-api-hero::before,
[data-theme="light"] .sl-page-hero::before,
[data-theme="light"] .sl-uptime-hero::before,
[data-theme="light"] .sl-sitedemo-hero::before,
[data-theme="light"] .sl-status-hero::before,
[data-theme="light"] .sl-legal-hero::before,
[data-theme="light"] .sl-single-marca-hero::before {
	opacity: 0.25 !important;
}

/* Sections inteiras com radial gradient laranja de fundo (não ::before, mas
 * background direto na .sl-section) */
[data-theme="light"] .sl-section--orange-glow,
[data-theme="light"] .sl-section--branded {
	background: transparent;
}

/* Fix específico: reduce em geral todos os glows de brand RGBA acima de 0.10
 * em backgrounds de seções/cards. Nem sempre captura, mas ajuda nos óbvios. */
[data-theme="light"] [class*="-bg"] {
	opacity: 0.5;
}

/* Body global — adiciona um bg sutil pra não ficar branco-puro absoluto que
 * cansa a vista. Mantém perto do branco mas com toque warm. */
[data-theme="light"] body {
	background:
		radial-gradient(ellipse 80vw 60vh at 0% 0%, rgba(241, 96, 0, 0.025), transparent 50%),
		radial-gradient(ellipse 70vw 50vh at 100% 100%, rgba(45, 212, 191, 0.020), transparent 55%),
		var(--sl-ink);
}

/* ── Light mode — pass 12: BigNum digits + chip universal ── */

/* CRÍTICO: BigNum value (99,7) usa gradient WHITE→white-30%, fica invisível
 * em fundo claro. Inverter pra dark gradient com contraste forte e !important
 * pra superar especificidade da regra base. */
[data-theme="light"] .sl-bignum-value {
	background: linear-gradient(180deg, #08080c 0%, #2a2a3a 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
}
/* Suffix (%) mantém laranja brand mesmo em light */
[data-theme="light"] .sl-bignum-suffix {
	-webkit-text-fill-color: var(--sl-brand);
	color: var(--sl-brand);
}

/* CHIP universal (.sl-chip) — usado em todo o site como eyebrow.
 * Em dark mode é rgba(255,255,255,0.04) com backdrop-filter (vidro escuro).
 * Em light mode precisa de bg sólido sutil + texto legível. */
[data-theme="light"] .sl-chip {
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
	backdrop-filter: blur(8px);
}
/* Variante --brand mantém o dot laranja */
[data-theme="light"] .sl-chip--brand {
	background: rgba(241, 96, 0, 0.08);
	border-color: rgba(241, 96, 0, 0.20);
	color: var(--sl-brand);
}
/* Variante --lime (verde-limão) */
[data-theme="light"] .sl-chip--lime {
	background: rgba(196, 255, 62, 0.15);
	border-color: rgba(196, 255, 62, 0.40);
	color: #4a6800;
}

/* Pills tipo "LIVE" dentro de chips (badge interno verde-limão pulsante) */
[data-theme="light"] .sl-chip .sl-pill--live,
[data-theme="light"] .sl-chip [class*="live"] {
	background: rgba(196, 255, 62, 0.30);
	border: 1px solid rgba(196, 255, 62, 0.60);
	color: #2d4500;
}

/* ── Light mode — pass 13: /rastreadores/ brand list rows ── */

/* Search bar */
[data-theme="light"] .sl-brand-search {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text);
}
[data-theme="light"] #sl-brand-search-input,
[data-theme="light"] .sl-brand-search input {
	background: transparent;
	color: var(--sl-text);
}
[data-theme="light"] #sl-brand-search-input::placeholder { color: rgba(10, 10, 20, 0.45); }
[data-theme="light"] .sl-brand-search-clear { color: var(--sl-text-3); }
[data-theme="light"] .sl-brand-search-clear:hover { color: var(--sl-text); }
[data-theme="light"] .sl-brand-count { color: var(--sl-text-2); }
[data-theme="light"] .sl-brand-count strong { color: var(--sl-text); }

/* Linhas de marca/modelo (ADM Series, AIVDM, AMT GPS, Aplicom...) */
[data-theme="light"] .sl-brand-row {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.06);
	color: var(--sl-text);
}
[data-theme="light"] .sl-brand-row:hover {
	border-color: rgba(241, 96, 0, 0.40);
	box-shadow: 0 8px 24px -8px rgba(241, 96, 0, 0.20);
}

/* Mark/avatar (AD, AI, AM, etc) — mantém laranja brand */
[data-theme="light"] .sl-brand-mark {
	background: rgba(241, 96, 0, 0.10);
	border: 1px solid rgba(241, 96, 0, 0.30);
	color: var(--sl-brand);
}

/* Nome da marca/série */
[data-theme="light"] .sl-brand-name { color: var(--sl-text); }
[data-theme="light"] .sl-brand-tag {
	background: rgba(0, 0, 0, 0.04);
	color: var(--sl-text-2);
	border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .sl-brand-models-inline,
[data-theme="light"] .sl-brand-row-desc { color: var(--sl-text-2); }

/* Labels "PROTOCOLO" / "PORTA" */
[data-theme="light"] .sl-brand-row-label { color: var(--sl-text-3); }

/* Chips de protocolo (adm, ais, aquila, etc.) e porta (6092, 6130...) */
[data-theme="light"] .sl-brand-chip {
	background: rgba(45, 212, 191, 0.10);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-teal);
}
[data-theme="light"] .sl-brand-chip--proto {
	background: rgba(45, 212, 191, 0.10);
	color: var(--sl-teal);
	border-color: rgba(45, 212, 191, 0.35);
}

/* Linha que tá expandida/destacada (highlight selection) */
[data-theme="light"] .sl-brand-row.is-active,
[data-theme="light"] .sl-brand-row.is-expanded,
[data-theme="light"] .sl-brand-row[aria-expanded="true"] {
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.04), rgba(241, 96, 0, 0.02)) , #ffffff;
	border-color: rgba(241, 96, 0, 0.30);
	box-shadow: 0 8px 24px -8px rgba(241, 96, 0, 0.15);
}

/* Filtros de marca (chip pills no topo) */
[data-theme="light"] .sl-brand-filter,
[data-theme="light"] .sl-brand-filter-pills {
	color: var(--sl-text);
}
[data-theme="light"] .sl-brand-filter-pill {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.10);
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-brand-filter-pill:hover {
	background: #fafafc;
	border-color: rgba(0, 0, 0, 0.18);
	color: var(--sl-text);
}
[data-theme="light"] .sl-brand-filter-pill.is-active {
	background: rgba(241, 96, 0, 0.10);
	border-color: rgba(241, 96, 0, 0.30);
	color: var(--sl-brand);
}

/* Texto "X de Y modelos" no topo direito */
[data-theme="light"] .sl-rastr-updated,
[data-theme="light"] .sl-rastr-stats,
[data-theme="light"] .sl-rastr-meta { color: var(--sl-text-2); }

/* ── Light mode — pass 14: chip universal force + logo marquee ── */

/* CHIP universal — força específica pra superar backdrop-filter dark
 * Usar bg sólido em vez de transparente pra eliminar visual cinza */
[data-theme="light"] .sl-chip {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text-2) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .sl-chip:hover {
	background: #fafafc !important;
	border-color: rgba(0, 0, 0, 0.18) !important;
}
[data-theme="light"] .sl-chip--brand {
	background: rgba(241, 96, 0, 0.06) !important;
	border-color: rgba(241, 96, 0, 0.22) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-chip--lime {
	background: rgba(196, 255, 62, 0.18) !important;
	border-color: rgba(196, 255, 62, 0.45) !important;
	color: #4a6800 !important;
}

/* Logos marquee — empresas que operam com a Smart */
[data-theme="light"] .sl-logos-section {
	background: transparent;
}
[data-theme="light"] .sl-logos-head-text { color: var(--sl-text-2); }
[data-theme="light"] .sl-logos-head-text strong { color: var(--sl-text); }
[data-theme="light"] .sl-logos-head-line {
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.10), transparent);
}

/* Items individuais do marquee (Jbgprs Rastreadores, OLT Serviços, etc.) */
[data-theme="light"] .sl-logo-item {
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
	color: var(--sl-text-2);
	font-family: var(--sl-font-mono);
}
[data-theme="light"] .sl-logo-item:hover {
	background: rgba(0, 0, 0, 0.06);
	border-color: rgba(0, 0, 0, 0.16);
	color: var(--sl-text);
}

/* Fade nas bordas do marquee — em dark é gradient escuro pra dissolver,
 * em light precisa ser branco pra dissolver no fundo claro */
[data-theme="light"] .sl-logos-marquee::before,
[data-theme="light"] .sl-logos-marquee::after {
	background: linear-gradient(90deg, var(--sl-ink), transparent) !important;
}
[data-theme="light"] .sl-logos-marquee::after {
	background: linear-gradient(270deg, var(--sl-ink), transparent) !important;
}

/* ── Light mode — pass 15: dashboard mockup volta a ser DARK ──
 * O .sl-dash e .sl-sim representam screenshots reais do produto (que é dark
 * nativo). Forçar branco descaracteriza — fica tipo Figma com mock vazio.
 * Mantemos dark, mas adicionamos um "frame" branco em volta tipo screenshot. */

[data-theme="light"] .sl-dash,
[data-theme="light"] .sl-sim {
	background: linear-gradient(180deg, #0b0b12 0%, #0a0a10 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.18),
		0 0 0 8px rgba(255, 255, 255, 0.95),
		0 0 0 9px rgba(0, 0, 0, 0.06) !important;
	color: #fafafc !important;
}

/* Restaura textos brancos DENTRO do mockup em light mode */
[data-theme="light"] .sl-dash *,
[data-theme="light"] .sl-sim * {
	color: inherit;
}
[data-theme="light"] .sl-dash h2,
[data-theme="light"] .sl-dash h3,
[data-theme="light"] .sl-dash strong,
[data-theme="light"] .sl-sim h2,
[data-theme="light"] .sl-sim h3,
[data-theme="light"] .sl-sim strong { color: #fafafc; }
[data-theme="light"] .sl-dash p,
[data-theme="light"] .sl-dash span:not([class*="brand"]):not([class*="teal"]),
[data-theme="light"] .sl-sim p,
[data-theme="light"] .sl-sim span:not([class*="brand"]):not([class*="teal"]) {
	color: rgba(250, 250, 252, 0.62);
}
[data-theme="light"] .sl-dash small,
[data-theme="light"] .sl-sim small { color: rgba(10, 10, 20, 0.50); }

/* Restaura backgrounds internos do mockup (dash-map etc) */
[data-theme="light"] .sl-dash-map,
[data-theme="light"] .sl-sim-map {
	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%) !important;
}

/* Aurora bgs internos voltam ao normal (não com opacity reduzida) */
[data-theme="light"] .sl-dash::before,
[data-theme="light"] .sl-dash::after,
[data-theme="light"] .sl-sim::before,
[data-theme="light"] .sl-sim::after {
	background: initial !important;
}

/* Cards/rows dentro do mockup voltam ao escuro */
[data-theme="light"] .sl-dash-card,
[data-theme="light"] .sl-dash-stat,
[data-theme="light"] .sl-dash-row,
[data-theme="light"] .sl-sim-row,
[data-theme="light"] .sl-sim-card {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Mesma lógica pra .sl-demo-card-viz e demais "screenshots de produto" */
[data-theme="light"] .sl-demo-card-viz,
[data-theme="light"] .sl-stack-map,
[data-theme="light"] .sl-phone-card,
[data-theme="light"] .sl-phone-map,
[data-theme="light"] .sl-sitedemo-mock {
	background: linear-gradient(180deg, #0b0b12 0%, #0a0a10 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.95), 0 30px 80px -20px rgba(0, 0, 0, 0.15) !important;
	color: #fafafc !important;
}

/* ── Light mode — pass 16: phone-map dentro do mockup ──
 * O .sl-phone-map é o mapa INTERNO do phone — fica dentro do bezel.
 * Não deve ter frame branco (só o phone outer tem). Removemos box-shadow
 * frame e melhoramos a visibilidade do conteúdo do mapa. */

[data-theme="light"] .sl-phone-map {
	background: linear-gradient(180deg, #0e0e15 0%, #0a0a10 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: none !important;
	border-radius: 12px !important;
}

/* Realça o grid e a rota dentro do mapa pra ficar mais visível */
[data-theme="light"] .sl-phone-map svg line,
[data-theme="light"] .sl-phone-map svg path[stroke-dasharray] {
	opacity: 0.9;
}

/* Marker pin (01 laranja) — mantém vibrante */
[data-theme="light"] .sl-phone-map circle[fill] { opacity: 1; }

/* Bottom panel do phone (Velocidade / Ignição cards) */
[data-theme="light"] .sl-phone-stat,
[data-theme="light"] .sl-phone-meta-card,
[data-theme="light"] .sl-phone-info {
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1px solid rgba(255, 255, 255, 0.10) !important;
	color: #fafafc !important;
}

/* Botão dentro do phone (Bloquear veículo) — mantém laranja brand */
[data-theme="light"] .sl-phone-btn,
[data-theme="light"] .sl-phone-card .sl-btn-primary {
	background: var(--sl-brand) !important;
	color: #ffffff !important;
}

/* Cards de veículos no phone esquerdo (Toyota Hilux SRX, Mercedes-Benz, Honda) */
[data-theme="light"] .sl-phone-vehicle,
[data-theme="light"] .sl-phone-list-item,
[data-theme="light"] .sl-phone-row {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	color: #fafafc !important;
}
[data-theme="light"] .sl-phone-vehicle strong,
[data-theme="light"] .sl-phone-list-item strong { color: #fafafc !important; }
[data-theme="light"] .sl-phone-vehicle span,
[data-theme="light"] .sl-phone-list-item span { color: rgba(250, 250, 252, 0.62) !important; }

/* Header do phone (Hilux SRX · HLX-7A23) e Smart Localiza */
[data-theme="light"] .sl-phone-header,
[data-theme="light"] .sl-phone-title { color: #fafafc !important; }

/* Status bar do phone (9:41, 5G, batteria) */
[data-theme="light"] .sl-phone-statusbar,
[data-theme="light"] .sl-phone-time,
[data-theme="light"] .sl-phone-signals { color: #fafafc !important; }

/* ── Light mode — pass 17: REVERT mockups pra light ──
 * Correção: usuário quer o mapa branco em light mode (não dark).
 * Sobrescreve as passes 15+16 que tinham forçado dark interior. */

/* Dashboard mockup — bg branco com grid sutil em vez de dark navy */
[data-theme="light"] .sl-dash,
[data-theme="light"] .sl-sim {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow:
		0 30px 80px -20px rgba(0, 0, 0, 0.10),
		0 0 0 1px rgba(0, 0, 0, 0.04) !important;
	color: var(--sl-text) !important;
}

/* Textos dentro do dashboard — preto/secundário */
[data-theme="light"] .sl-dash *,
[data-theme="light"] .sl-sim * {
	color: inherit;
}
[data-theme="light"] .sl-dash h2,
[data-theme="light"] .sl-dash h3,
[data-theme="light"] .sl-dash strong,
[data-theme="light"] .sl-sim h2,
[data-theme="light"] .sl-sim h3,
[data-theme="light"] .sl-sim strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-dash p,
[data-theme="light"] .sl-dash span:not([class*="brand"]):not([class*="teal"]),
[data-theme="light"] .sl-sim p,
[data-theme="light"] .sl-sim span:not([class*="brand"]):not([class*="teal"]) {
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-dash small,
[data-theme="light"] .sl-sim small { color: var(--sl-text-3) !important; }

/* Mapa interno do dashboard — bg branco com grid sutil */
[data-theme="light"] .sl-dash-map,
[data-theme="light"] .sl-sim-map {
	background:
		radial-gradient(ellipse at 30% 20%, rgba(241, 96, 0, 0.04), transparent 55%),
		radial-gradient(ellipse at 70% 80%, rgba(45, 212, 191, 0.04), transparent 55%),
		linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%) !important;
}

/* Grid lines e SVG dentro do mapa do dashboard */
[data-theme="light"] .sl-dash-map svg line,
[data-theme="light"] .sl-dash-map svg rect[stroke],
[data-theme="light"] .sl-dash-map svg path[stroke]:not([stroke-dasharray]) {
	stroke: rgba(0, 0, 0, 0.08) !important;
}

/* Sidebar do dashboard mockup — bg branco-cinza */
[data-theme="light"] .sl-dash-sidebar,
[data-theme="light"] .sl-dash-nav,
[data-theme="light"] .sl-dash-aside {
	background: #f6f6fa !important;
	border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-dash-nav-item,
[data-theme="light"] .sl-dash-sidebar-item {
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-dash-nav-item.is-active,
[data-theme="light"] .sl-dash-sidebar-item.is-active {
	background: rgba(45, 212, 191, 0.10) !important;
	color: var(--sl-teal) !important;
}

/* Bottom panel info card (KIA SPORTAGE / Sensores) */
[data-theme="light"] .sl-dash-bottom,
[data-theme="light"] .sl-dash-info,
[data-theme="light"] .sl-dash-panel {
	background: #ffffff !important;
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-dash-card,
[data-theme="light"] .sl-dash-stat,
[data-theme="light"] .sl-dash-row,
[data-theme="light"] .sl-sim-row,
[data-theme="light"] .sl-sim-card {
	background: rgba(0, 0, 0, 0.03) !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
}

/* Phone mockup — interior branco também */
[data-theme="light"] .sl-phone-card {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%) !important;
	color: var(--sl-text) !important;
}

/* Mapa dentro do phone — branco com grid sutil */
[data-theme="light"] .sl-phone-map {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-phone-map svg line {
	stroke: rgba(0, 0, 0, 0.08) !important;
}

/* Cards dentro do phone — bg cinza-claro com texto escuro */
[data-theme="light"] .sl-phone-stat,
[data-theme="light"] .sl-phone-meta-card,
[data-theme="light"] .sl-phone-info,
[data-theme="light"] .sl-phone-vehicle,
[data-theme="light"] .sl-phone-list-item,
[data-theme="light"] .sl-phone-row {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-phone-vehicle strong,
[data-theme="light"] .sl-phone-list-item strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-phone-vehicle span,
[data-theme="light"] .sl-phone-list-item span { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-phone-header,
[data-theme="light"] .sl-phone-title { color: var(--sl-text) !important; }

/* Status bar do phone (9:41, 5G) — preto em light */
[data-theme="light"] .sl-phone-statusbar,
[data-theme="light"] .sl-phone-time,
[data-theme="light"] .sl-phone-signals { color: var(--sl-text) !important; }

/* Demo cards e site demo mock — bg branco também */
[data-theme="light"] .sl-demo-card-viz,
[data-theme="light"] .sl-stack-map,
[data-theme="light"] .sl-sitedemo-mock {
	background: linear-gradient(180deg, #ffffff 0%, #f6f6fa 100%) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
}

/* ── Light mode — pass 18: cabeçalhos dos screen mockups ──
 * Os cards `.sl-screen-viz` em /plataforma/ têm um header dark hardcoded
 * (rgba(14,14,21,0.8)) com tabs no estilo dark. Em light mode esse header
 * fica preto-cinza num card branco, quebrando consistência. */

[data-theme="light"] .sl-screen-viz {
	background: #ffffff !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Header dos tabs (Histórico/Velocidade/Altitude, Gerenciar alertas/Resolvidos, etc.) */
[data-theme="light"] .sl-screen-header {
	background: #f6f6fa !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Tabs inativas — texto cinza secundário */
[data-theme="light"] .sl-screen-tab {
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-screen-tab:hover {
	color: var(--sl-text-2) !important;
	background: rgba(0, 0, 0, 0.03);
}

/* Tab ATIVA (Histórico orange, Gerenciar alertas, Visão geral, Manutenção) */
[data-theme="light"] .sl-screen-tab.is-active {
	background: rgba(241, 96, 0, 0.10) !important;
	color: var(--sl-brand) !important;
	border: 1px solid rgba(241, 96, 0, 0.20);
}

/* Badge interno (ex: "8" em Gerenciar alertas) */
[data-theme="light"] .sl-screen-tab-badge {
	background: var(--sl-brand);
	color: #ffffff;
}

/* Body do screen (área de conteúdo) — branco com bg sutil */
[data-theme="light"] .sl-screen-body {
	background: #ffffff;
	color: var(--sl-text);
}

/* Chart bars do histórico (velocidade) */
[data-theme="light"] .sl-screen-chart {
	border-top-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-screen-chart-label { color: var(--sl-text-3); }
[data-theme="light"] .sl-screen-chart-bars span { background: rgba(241, 96, 0, 0.30); }
[data-theme="light"] .sl-screen-chart-bars span.is-tall,
[data-theme="light"] .sl-screen-chart-bars span:nth-child(7),
[data-theme="light"] .sl-screen-chart-bars span:nth-child(8) { background: var(--sl-brand); }

/* Alert items (Dispositivo vencido, Ignição Desligada, etc.) */
[data-theme="light"] .sl-screen-alert {
	background: rgba(0, 0, 0, 0.025);
	border: 1px solid rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .sl-screen-alert strong { color: var(--sl-text); }
[data-theme="light"] .sl-screen-alert small { color: var(--sl-text-3); }
[data-theme="light"] .sl-screen-alert--danger {
	background: rgba(255, 64, 96, 0.06);
	border-color: rgba(255, 64, 96, 0.25);
}
[data-theme="light"] .sl-screen-alert--warn {
	background: rgba(255, 165, 0, 0.06);
	border-color: rgba(255, 165, 0, 0.25);
}

/* Timeline events (Início da viagem, Estacionamento, Dirigindo, etc.) */
[data-theme="light"] .sl-screen-timeline-item,
[data-theme="light"] .sl-screen-event {
	color: var(--sl-text);
}
[data-theme="light"] .sl-screen-event-time,
[data-theme="light"] .sl-screen-event small { color: var(--sl-text-3); }
[data-theme="light"] .sl-screen-event-place { color: var(--sl-text-2); }

/* Donut chart (Visão geral 155 veículos) */
[data-theme="light"] .sl-screen-donut-label,
[data-theme="light"] .sl-screen-donut-value { color: var(--sl-text); }
[data-theme="light"] .sl-screen-donut-sub { color: var(--sl-text-3); }
[data-theme="light"] .sl-screen-stat,
[data-theme="light"] .sl-screen-stat-row {
	color: var(--sl-text-2);
}
[data-theme="light"] .sl-screen-stat strong { color: var(--sl-text); }

/* Manutenção rows (Troca de Óleo · CHEVROLET CELTA, etc.) */
[data-theme="light"] .sl-screen-maint-row,
[data-theme="light"] .sl-screen-maint-item { color: var(--sl-text); }
[data-theme="light"] .sl-screen-maint-row small { color: var(--sl-text-3); }

/* Tag "01 — Histórico" abaixo de cada card */
[data-theme="light"] .sl-screen-tag { color: var(--sl-text-3); }
[data-theme="light"] .sl-screen-info h3 { color: var(--sl-text); }
[data-theme="light"] .sl-screen-info p { color: var(--sl-text-2); }

/* ── Light mode — pass 19: BigNum REAL (.sl-bxnum-*, não sl-bignum-*) ── */

/* Eyebrow chip "● UPTIME REAL · últimos 365 dias · LIVE" */
[data-theme="light"] .sl-bxnum-eyebrow {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text-2) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-bxnum-eyebrow-text { color: var(--sl-text) !important; }

/* Pill "LIVE" interna */
[data-theme="light"] .sl-bxnum-eyebrow-live {
	background: rgba(196, 255, 62, 0.30) !important;
	border-color: rgba(196, 255, 62, 0.60) !important;
	color: #2d4500 !important;
}
[data-theme="light"] .sl-bxnum-eyebrow-live-dot {
	background: #6da300 !important;
	box-shadow: 0 0 8px rgba(196, 255, 62, 0.7) !important;
}

/* Dot teal pulsante (esquerda do chip) — mantém */

/* CRÍTICO: Os dígitos "99,7" usam .sl-bxnum-value-num com gradient
 * WHITE → LIGHT-GRAY que ficam invisíveis em fundo claro. Inverter pra
 * dark gradient com alta especificidade e !important. */
[data-theme="light"] .sl-bxnum-value-num {
	background: linear-gradient(180deg,
		#08080c 0%,
		#1a1a26 40%,
		#3a3a4a 90%,
		#5a5a6a 100%
	) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)) !important;
}

/* Suffix % mantém laranja brand (já está bom) */

/* Echo (sombra de "99,7%" atrás dos dígitos principais) */
[data-theme="light"] .sl-bxnum-value-echo {
	-webkit-text-stroke: 1px rgba(241, 96, 0, 0.10) !important;
	color: transparent !important;
}

/* Shimmer sweep — em light usa laranja brand com blend multiply pra
 * o "raio" ficar visível atravessando o número (no dark é overlay
 * com white, em light precisa de cor + opacidade maior). */
[data-theme="light"] .sl-bxnum-value-shine {
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(241, 96, 0, 0.18) 45%,
		rgba(241, 96, 0, 0.32) 50%,
		rgba(241, 96, 0, 0.18) 55%,
		transparent 70%
	) !important;
	mix-blend-mode: multiply !important;
}

/* ── Light mode — pass 20: reduzir glow do dot teal nos chips ──
 * Em dark, o glow de 12px verde fica elegante no fundo escuro.
 * Em light, esse glow vaza pra fora do chip branco e fica feio. */

[data-theme="light"] .sl-chip-dot {
	box-shadow: 0 0 4px rgba(45, 212, 191, 0.50), inset 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
}

/* Variantes do dot — brand laranja (background restaurado pra superar
 * o !important do default chip-dot teal em light) */
[data-theme="light"] .sl-chip--brand .sl-chip-dot {
	background: var(--sl-brand) !important;
	box-shadow: 0 0 12px rgba(241, 96, 0, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}

/* Variantes do dot — lime verde-limão (idem) */
[data-theme="light"] .sl-chip--lime .sl-chip-dot {
	background: var(--sl-lime) !important;
	box-shadow: 0 0 12px rgba(196, 255, 62, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}

/* Reduzir também a animação pulse-ring do BigNum eyebrow pulse */
[data-theme="light"] .sl-bxnum-eyebrow-pulse {
	box-shadow: 0 0 4px rgba(45, 212, 191, 0.50) !important;
}

/* Light mode chip: drop shadow microsutil + inset highlight branco pra
 * efeito "papel" elevado. Hover herda da base (border teal + lift). */
[data-theme="light"] .sl-chip {
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .sl-chip:hover {
	background: rgba(45, 212, 191, 0.08) !important;
	border-color: rgba(45, 212, 191, 0.45) !important;
	box-shadow:
		0 4px 12px -4px rgba(45, 212, 191, 0.30),
		inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* Custom chip-like pill (.sl-sav-teaser-divider-pill — "Você é gestor de
 * frota...") — mesmo polish do .sl-chip universal mas com accent lime
 * em vez de teal pra ficar coerente com a paleta lime do divider. */
[data-theme="light"] .sl-sav-teaser-divider-pill {
	background: rgba(196, 255, 62, 0.10) !important;
	border-color: rgba(196, 255, 62, 0.45) !important;
	color: var(--sl-text-2) !important;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] .sl-sav-teaser-divider-pill:hover {
	background: rgba(196, 255, 62, 0.15) !important;
	border-color: rgba(196, 255, 62, 0.55) !important;
	box-shadow:
		0 4px 12px -4px rgba(196, 255, 62, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

/* ── Light mode — pass 21: pulse do BigNum eyebrow + spacing das flags ── */

/* Eyebrow pulse no BigNum — usar EXATAMENTE o mesmo padrão do .sl-status-dot
 * do header pra coerência visual entre os 2 indicadores "live" do site. */
[data-theme="light"] .sl-bxnum-eyebrow-pulse {
	background: var(--sl-teal) !important;
	box-shadow: 0 0 6px var(--sl-teal) !important;
}
/* Reduz o ring expansivo em light pra ficar mais sutil */
[data-theme="light"] .sl-bxnum-eyebrow-pulse::before {
	border-color: rgba(45, 212, 191, 0.55) !important;
	border-width: 1px !important;
}

/* Em light mantém a MESMA escala (2.5x) do dark — só reduz opacity pra
 * ficar elegante. Tamanho do pulse idêntico nos dois temas. */

/* Spacing pras flags — pequeno gap respiro entre flag e o texto adjacente */
.sl-flag,
.sl-status-flag {
	margin-right: 0.3em;
}
/* Quando flag vier DEPOIS do texto (raro), aplica margin-left em vez */
* + .sl-flag {
	margin-right: 0.3em;
	margin-left: 0;
}
/* Ajuste fino — em light mode, ajusta a sombra interna pra não ficar branca-branca */
[data-theme="light"] .sl-flag {
	box-shadow:
		inset 0 0 0 0.5px rgba(0, 0, 0, 0.10),
		0 1px 2px rgba(0, 0, 0, 0.10);
}

/* ── Light mode — pass 22: server cards usam TEAL (mesmo do header) ── */

/* O dot e o pill ONLINE usam --sl-lime (verde-limão neon) que fica muito
 * berrante em light mode. Trocar por --sl-teal (mesmo do header) pra
 * coerência total dos indicadores live. */

[data-theme="light"] .sl-bxnum-srv-dot {
	background: var(--sl-teal) !important;
	box-shadow: 0 0 10px rgba(45, 212, 191, 0.55) !important;
}
/* Mantém EXATAMENTE a mesma escala/animação do dark — só troca cor pra teal
 * e reduz opacity pra ficar elegante em fundo claro. Tamanho idêntico. */
[data-theme="light"] .sl-bxnum-srv-dot::after {
	border-color: rgba(45, 212, 191, 0.45) !important;
	border-width: 1.5px !important;
	/* animation-name continua sl-bxnum-ring (escala 2.5x igual dark) */
}

/* Pill "ONLINE" também passa pra teal em light */
[data-theme="light"] .sl-bxnum-srv-status {
	color: var(--sl-teal) !important;
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.35) !important;
}

/* Trend "↑ 100%" no rodapé — também teal */
[data-theme="light"] .sl-bxnum-srv-trend {
	color: var(--sl-teal) !important;
}

/* Bars do sparkline — em light mode, fica teal puro em vez de lime */
[data-theme="light"] .sl-bxnum-srv-bar {
	background: linear-gradient(180deg, var(--sl-teal), rgba(45, 212, 191, 0.30)) !important;
}

/* Cards individuais dos servidores */
[data-theme="light"] .sl-bxnum-srv {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-bxnum-srv-label { color: var(--sl-text) !important; }
[data-theme="light"] .sl-bxnum-srv-foot,
[data-theme="light"] .sl-bxnum-srv-foot span:first-child { color: var(--sl-text-3); }

/* Valor "100%" do uptime */
[data-theme="light"] .sl-bxnum-srv-val,
[data-theme="light"] .sl-bxnum-srv-pct { color: var(--sl-teal) !important; }

/* Pass 23/32 obsoleto removido (Pass 62) — spacing dot↔flag↔label agora
 * vive na regra base .sl-bxnum-srv-top + .sl-bxnum-srv-top .sl-flag,
 * aplicando uniformemente em dark + light. */

/* ── Pass 24: chip-dot padrão usa laranja da marca no light mode ──
 * Em dark mode o dot teal fica elegante. Em light mode o usuário pediu
 * o glow na cor da marca (laranja) pra reforçar identidade visual. */

/* Light mode: cor base teal igual ao dark, inset adaptado pra fundo claro */
[data-theme="light"] .sl-chip-dot {
	background: var(--sl-teal) !important;
	box-shadow: 0 0 12px rgba(45, 212, 191, 0.85), inset 0 0 0 2px rgba(255, 255, 255, 0.4) !important;
}

/* ── Pass 26: restaurar efeitos visuais nos ROI cards (dark mode) ──
 * Usuário reportou que os cards do ROI calculator perderam riqueza visual
 * em dark. Adiciona hover lift + shimmer sutil + glow extra no highlight,
 * mantendo o estilo minimalista original mas com mais "vida" interativa.
 * Escopado a :root:not([data-theme="light"]) pra não vazar em light mode. */

:root:not([data-theme="light"]) .sl-roi-card {
	transition: transform 0.3s var(--sl-ease), border-color 0.3s var(--sl-ease), box-shadow 0.3s var(--sl-ease), background 0.3s var(--sl-ease);
}
:root:not([data-theme="light"]) .sl-roi-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.06), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s var(--sl-ease);
	pointer-events: none;
	border-radius: inherit;
}
:root:not([data-theme="light"]) .sl-roi-card:hover {
	transform: translateY(-3px);
	border-color: var(--sl-line-hi);
	background: rgba(255, 255, 255, 0.04);
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
}
:root:not([data-theme="light"]) .sl-roi-card:hover::after {
	opacity: 1;
}

/* Highlight card (Sua margem) — reforça glow laranja em dark */
:root:not([data-theme="light"]) .sl-roi-card--highlight {
	box-shadow:
		0 20px 40px -12px rgba(241, 96, 0, 0.35),
		0 0 60px -20px rgba(241, 96, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
:root:not([data-theme="light"]) .sl-roi-card--highlight:hover {
	transform: translateY(-4px);
	box-shadow:
		0 28px 56px -12px rgba(241, 96, 0, 0.45),
		0 0 80px -20px rgba(241, 96, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Annual row — glow sutil ao redor da projeção 12 meses em dark */
:root:not([data-theme="light"]) .sl-roi-annual {
	box-shadow:
		0 10px 30px -10px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Pass 27: Hero map adaptation for light theme ──
 * O map IMAGE continua dark (Mapbox dark-v11 server-side, caro de trocar).
 * Mas adaptamos todos os overlays/chrome pra estética light: cards brancos
 * flutuantes ao estilo Google Maps light, texto escuro, borders sutis.
 * Coords (texto no canto sem bg) ficam brancas pois sentam no map dark. */

/* Wrap externo — frame branco com soft drop shadow */
[data-theme="light"] .sl-hero-mini-map {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.18) !important;
}
/* Vinheta light também removida — Pass 108 */
[data-theme="light"] .sl-hero-mini-map.has-mapbox::after {
	background: transparent !important;
}

/* Vehicle panel — sidebar branca floating estilo Google Maps */
[data-theme="light"] .sl-mm-vehicles {
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20) !important;
}
[data-theme="light"] .sl-mm-vehicles-head strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-mm-vehicles-toggle {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.28) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-mm-vehicles-toggle:hover {
	background: rgba(45, 212, 191, 0.18) !important;
	color: var(--sl-text) !important;
}
/* Quando recolhido em light mode — botão standalone branco com border + shadow */
[data-theme="light"] .sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle {
	background: #ffffff !important;
	border: 1px solid rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-teal) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .sl-mm-vehicles[data-open="false"] .sl-mm-vehicles-toggle:hover {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: var(--sl-teal) !important;
}
[data-theme="light"] .sl-mm-vehicles-content::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.14) !important;
}

/* Vehicle rows — fundo cinza claro, hover teal sutil */
[data-theme="light"] .sl-mm-vehicle {
	background: rgba(0, 0, 0, 0.025) !important;
	border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-mm-vehicle:hover {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.30) !important;
}
[data-theme="light"] .sl-mm-vehicle.is-focused {
	background: rgba(45, 212, 191, 0.16) !important;
	border-color: var(--sl-teal) !important;
	box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.4), 0 4px 12px rgba(45, 212, 191, 0.18) !important;
}
[data-theme="light"] .sl-mm-vehicle-name { color: var(--sl-text) !important; }
[data-theme="light"] .sl-mm-vehicle-time { color: var(--sl-text-3) !important; }
[data-theme="light"] .sl-mm-vehicle-speed { color: var(--sl-text-2) !important; }

/* Zoom buttons + provider trigger — pill brancos flutuantes */
[data-theme="light"] .sl-mm-zoom-btn,
[data-theme="light"] .sl-mm-provider-trigger {
	background: rgba(255, 255, 255, 0.96) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] .sl-mm-zoom-btn:hover,
[data-theme="light"] .sl-mm-provider-trigger:hover {
	background: #ffffff !important;
	border-color: rgba(45, 212, 191, 0.45) !important;
	color: var(--sl-teal) !important;
}
[data-theme="light"] .sl-mm-provider[data-open="true"] .sl-mm-provider-trigger {
	background: rgba(45, 212, 191, 0.12) !important;
	border-color: var(--sl-teal) !important;
	color: var(--sl-teal) !important;
}

/* Provider dropdown menu (Mapbox/Google) — branco flutuante */
[data-theme="light"] .sl-mm-provider-menu {
	background: rgba(255, 255, 255, 0.98) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.20) !important;
}
[data-theme="light"] .sl-mm-provider-opt {
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-mm-provider-opt:hover {
	background: rgba(0, 0, 0, 0.04) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-mm-provider-opt.is-active {
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-mm-provider-radio {
	border-color: rgba(0, 0, 0, 0.30) !important;
}

/* .sl-mm-compass removido do HTML (Pass 108) — light override órfã, deletada */

/* Legend ("3 parados / 5 offline") — pill branca */
[data-theme="light"] .sl-mm-legend {
	background: rgba(255, 255, 255, 0.94) !important;
	border-color: rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* Coord labels (tl/bl/br) — sentam direto no map dark, manter brancos
 * com text-shadow extra pra reforçar legibilidade. */
[data-theme="light"] .sl-mm-coord {
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ── Pass 28: Topbar pills (servers + ticker + clock) light-theme ──
 * Sem mexer em .sl-status-dot (pulsantes preservados conforme pedido).
 * Adapta apenas chrome dos pills: bg branco fosco, borda escura sutil,
 * texto escuro. Hover continua acentuando teal. */

[data-theme="light"] .sl-status-item,
[data-theme="light"] .sl-status-detail-link,
[data-theme="light"] .sl-status-geo-rotator,
[data-theme="light"] .sl-status-geo-time {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

/* Hover continua teal accent — só ajusta as opacidades pra ficarem
 * legíveis em fundo claro. */
[data-theme="light"] .sl-status-item:hover,
[data-theme="light"] .sl-status-geo-rotator:hover,
[data-theme="light"] .sl-status-geo-time:hover {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.40) !important;
	box-shadow: 0 4px 16px -8px rgba(45, 212, 191, 0.45) !important;
}
[data-theme="light"] .sl-status-detail-link {
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-status-detail-link:hover {
	background: rgba(45, 212, 191, 0.12) !important;
	border-color: rgba(45, 212, 191, 0.45) !important;
	color: var(--sl-teal) !important;
}

/* Server name + value — text colors */
[data-theme="light"] .sl-status-name { color: var(--sl-text) !important; }
[data-theme="light"] .sl-status-value { color: var(--sl-teal) !important; }

/* Status item por estado (down/degraded) — preservar cores semânticas */
[data-theme="light"] .sl-status-item[data-status="down"]:hover {
	border-color: rgba(239, 68, 68, 0.45) !important;
	background: rgba(239, 68, 68, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(239, 68, 68, 0.45) !important;
}
[data-theme="light"] .sl-status-item[data-status="degraded"]:hover {
	border-color: rgba(241, 96, 0, 0.45) !important;
	background: rgba(241, 96, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(241, 96, 0, 0.45) !important;
}

/* Divider entre servers e chevron */
[data-theme="light"] .sl-status-divider {
	background: rgba(0, 0, 0, 0.12) !important;
}

/* Shimmer one-shot quando valor atualiza — em light, o overlay branco
 * com mix-blend-mode:overlay fica invisível. Trocar pra brand orange
 * com multiply pra varredura ficar visível na cor da marca. */
[data-theme="light"] .sl-status-item.is-updated::after {
	background: linear-gradient(
		100deg,
		transparent 0%,
		transparent 30%,
		rgba(241, 96, 0, 0.18) 45%,
		rgba(241, 96, 0, 0.32) 50%,
		rgba(241, 96, 0, 0.18) 55%,
		transparent 70%,
		transparent 100%
	) !important;
	mix-blend-mode: multiply !important;
}

/* Ticker (rotator) text + numbers — força contraste */
[data-theme="light"] .sl-status .sl-evt-text { color: var(--sl-text) !important; }
[data-theme="light"] .sl-status .sl-evt-num { color: var(--sl-text) !important; }
[data-theme="light"] .sl-rotator-slot[data-slot="velocidade"] .sl-evt-num,
[data-theme="light"] .sl-rotator-slot[data-slot="antena_off"] .sl-evt-num {
	color: var(--sl-brand) !important;
}

/* Clock pill — sun/moon icon + valor */
[data-theme="light"] .sl-status-geo-daynight { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-status-geo-time-value { color: var(--sl-text) !important; }

/* Geo location/weather (slot inicial do rotator) */
[data-theme="light"] .sl-status-geo-location { color: var(--sl-text) !important; }
[data-theme="light"] .sl-status-geo-weather { color: var(--sl-text-2) !important; }

/* ── Pass 29: Comandos SMS — steps, sections, lists em light theme ──
 * Aplica fundo claro nos cards de step (1° Configurar fuso, 2° Time...,
 * etc), no wrapper de APN list, em rows individuais, no callout de
 * conclusão e em todos os elementos do shortcode [sl_cmd_section/step]. */

/* Step cards numerados (1°, 2°, 3°...) */
[data-theme="light"] .sl-cmd-step {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-cmd-step:hover {
	border-color: rgba(241, 96, 0, 0.30) !important;
	box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-cmd-step-label { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cmd-step-body p { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-cmd-step-body strong { color: var(--sl-text) !important; }

/* Número circular (1°, 2°...) — manter o gradient laranja, só ajusta border */
[data-theme="light"] .sl-cmd-step-num {
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.18), rgba(241, 96, 0, 0.05)) !important;
	border: 1px solid rgba(241, 96, 0, 0.40) !important;
	color: var(--sl-brand) !important;
}

/* Section title + subtitle */
[data-theme="light"] .sl-cmd-section-title { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cmd-section-subtitle { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-cmd-section-head {
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Section variants — mantém border-left colorida mas reduz gradient bg */
[data-theme="light"] .sl-cmd-section--obrigatorios {
	background: linear-gradient(90deg, rgba(45, 212, 191, 0.06) 0%, transparent 60%) !important;
}
[data-theme="light"] .sl-cmd-section--especiais {
	background: linear-gradient(90deg, rgba(241, 96, 0, 0.05) 0%, transparent 60%) !important;
}

/* Box do comando SMS (.sl-cmd) — card elevado branco com sombra sutil */
[data-theme="light"] .sl-cmd {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-cmd:hover {
	border-color: rgba(241, 96, 0, 0.30) !important;
	box-shadow: 0 6px 16px -8px rgba(241, 96, 0, 0.18) !important;
}

/* Code block dentro do comando (o input com GMT,W,0,0#) — inset cinza claro
 * pra parecer um "input field" recuado dentro do card branco */
[data-theme="light"] .sl-cmd-code {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-brand) !important;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Label "COMANDO SMS" / "SERVIDOR 01" */
[data-theme="light"] .sl-cmd-label { color: var(--sl-text-3) !important; }
[data-theme="light"] .sl-cmd-label-icon {
	background: rgba(241, 96, 0, 0.12) !important;
	color: var(--sl-brand) !important;
}

/* APN/cmd list wrap ("APNs disponíveis") */
[data-theme="light"] .sl-cmdlist {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-cmdlist-title {
	color: var(--sl-text) !important;
	border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Search input no APN list */
[data-theme="light"] .sl-cmdlist-search {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-cmdlist-search:focus-within {
	border-color: rgba(241, 96, 0, 0.40) !important;
}
[data-theme="light"] .sl-cmdlist-search-icon { color: var(--sl-text-3) !important; }
[data-theme="light"] .sl-cmdlist-input { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cmdlist-input::placeholder { color: var(--sl-text-3) !important; }

/* Count badge (35) */
[data-theme="light"] .sl-cmdlist-count {
	color: var(--sl-brand) !important;
	background: rgba(241, 96, 0, 0.10) !important;
	border-color: rgba(241, 96, 0, 0.28) !important;
}

/* Rows individuais (Vivo M2M Smart, etc) */
[data-theme="light"] .sl-cmdlist-row {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-cmdlist-row:hover {
	background: #fafafc !important;
	border-color: rgba(241, 96, 0, 0.30) !important;
}
[data-theme="light"] .sl-cmdlist-label {
	background: rgba(241, 96, 0, 0.10) !important;
	border-color: rgba(241, 96, 0, 0.25) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-cmdlist-code { color: var(--sl-brand) !important; }
[data-theme="light"] .sl-cmdlist-empty { color: var(--sl-text-3) !important; }

/* "Ver outras X opções" details/summary */
[data-theme="light"] .sl-cmdlist-more {
	border-top: 1px dashed rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-cmdlist-more-summary {
	background: rgba(241, 96, 0, 0.08) !important;
	border: 1px solid rgba(241, 96, 0, 0.30) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-cmdlist-more-summary:hover {
	background: rgba(241, 96, 0, 0.14) !important;
	border-color: rgba(241, 96, 0, 0.45) !important;
}

/* Botão "Copiar" — light variant */
[data-theme="light"] .sl-cmd-copy {
	background: rgba(241, 96, 0, 0.08) !important;
	border: 1px solid rgba(241, 96, 0, 0.30) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-cmd-copy:hover {
	background: rgba(241, 96, 0, 0.16) !important;
	border-color: rgba(241, 96, 0, 0.50) !important;
}
[data-theme="light"] .sl-cmd-copy.is-copied {
	background: rgba(45, 212, 191, 0.14) !important;
	border-color: rgba(45, 212, 191, 0.45) !important;
	color: var(--sl-teal) !important;
}

/* Section badge "OBRIGATÓRIO" / "OPCIONAL" */
[data-theme="light"] .sl-cmd-section-badge {
	background: rgba(241, 96, 0, 0.10) !important;
	border: 1px solid rgba(241, 96, 0, 0.40) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-cmd-section--especiais .sl-cmd-section-badge {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-teal) !important;
}

/* Callout "Pronto! Configuração obrigatória concluída" */
[data-theme="light"] .sl-cmd-complete {
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.10), rgba(45, 212, 191, 0.03)) !important;
	border: 1px solid rgba(45, 212, 191, 0.40) !important;
}
[data-theme="light"] .sl-cmd-complete-body strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-cmd-complete-body p { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-cmd-complete-warning {
	background: rgba(255, 179, 71, 0.12) !important;
	border-color: rgba(255, 179, 71, 0.45) !important;
	color: var(--sl-text-2) !important;
}

/* ── Pass 30: Features grid (sl-fpx-card) — polish em light theme ──
 * O wrapper já vira branco via universal card rule (linha 22894), mas
 * vários detalhes (gradient border, shine, foot border, arrow box,
 * número badge, hover shadow) usam rgba(255,255,255,...) que ficam
 * INVISÍVEIS em fundo branco. Esta pass restaura todos esses elementos
 * com cores apropriadas pra fundo claro. */

/* Card base: shadow + border mais definidos em light */
[data-theme="light"] .sl-fpx-card {
	box-shadow:
		0 1px 0 0 rgba(0, 0, 0, 0.02) inset,
		0 4px 12px -4px rgba(0, 0, 0, 0.06),
		0 12px 32px -16px rgba(0, 0, 0, 0.10) !important;
}

/* Hover: lift + glow colorido por variante (sem virar branco-em-branco) */
[data-theme="light"] .sl-fpx-card:hover {
	border-color: rgba(0, 0, 0, 0.14) !important;
	box-shadow:
		0 1px 0 0 rgba(0, 0, 0, 0.04) inset,
		0 20px 48px -16px rgba(0, 0, 0, 0.18),
		0 0 60px -20px var(--sl-fpx-glow, rgba(45, 212, 191, 0.4)) !important;
}

/* Aurora radial glow (::after) on hover — opacidade-only, mantém cores das variantes */
[data-theme="light"] .sl-fpx-card::after {
	background: radial-gradient(
		circle at 50% 0%,
		var(--sl-fpx-glow, rgba(45, 212, 191, 0.22)) 0%,
		transparent 50%
	) !important;
}

/* Gradient border (::before) — usa neutros escuros + accent da variante no hover */
[data-theme="light"] .sl-fpx-card::before {
	background: linear-gradient(
		135deg,
		transparent 0%,
		rgba(0, 0, 0, 0.06) 25%,
		transparent 50%,
		rgba(0, 0, 0, 0.06) 75%,
		transparent 100%
	) !important;
}
[data-theme="light"] .sl-fpx-card:hover::before {
	background: linear-gradient(
		135deg,
		var(--sl-fpx-accent, rgba(45, 212, 191, 0.5)) 0%,
		rgba(0, 0, 0, 0.10) 35%,
		transparent 55%,
		rgba(0, 0, 0, 0.10) 75%,
		var(--sl-fpx-accent, rgba(45, 212, 191, 0.5)) 100%
	) !important;
}

/* Shine sweep — em light, white glaze fica invisível. Trocar pra
 * tint escuro sutil que aparece como faixa de sombra varrendo. */
[data-theme="light"] .sl-fpx-card-shine {
	background: linear-gradient(
		115deg,
		transparent 30%,
		rgba(0, 0, 0, 0.04) 48%,
		rgba(0, 0, 0, 0.08) 50%,
		rgba(0, 0, 0, 0.04) 52%,
		transparent 70%
	) !important;
}

/* Número badge (01-09) — em light, --sl-text-3 é rgba(10,10,20,0.45)
 * que fica mais legível que o branco-30%. Reforça com peso. */
[data-theme="light"] .sl-fpx-card-num {
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-fpx-card:hover .sl-fpx-card-num {
	color: var(--sl-fpx-accent-solid, var(--sl-teal)) !important;
}

/* Icon box — bg sutil escuro + border definida */
[data-theme="light"] .sl-fpx-card-icon {
	background: rgba(0, 0, 0, 0.025) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-fpx-card:hover .sl-fpx-card-icon {
	background: rgba(0, 0, 0, 0.04) !important;
	border-color: rgba(0, 0, 0, 0.14) !important;
}

/* Title + desc — usa tokens de texto */
[data-theme="light"] .sl-fpx-card-title { color: var(--sl-text) !important; }
[data-theme="light"] .sl-fpx-card-desc { color: var(--sl-text-2) !important; }

/* Footer divider line + tag */
[data-theme="light"] .sl-fpx-card-foot {
	border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-fpx-card-tag {
	color: var(--sl-text-3) !important;
}

/* Arrow box (canto inferior direito) — restaura visibilidade em fundo branco */
[data-theme="light"] .sl-fpx-card-arrow {
	background: rgba(0, 0, 0, 0.03) !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-fpx-card:hover .sl-fpx-card-arrow {
	background: rgba(0, 0, 0, 0.05) !important;
	border-color: var(--sl-fpx-accent-solid, var(--sl-teal)) !important;
	color: var(--sl-fpx-accent-solid, var(--sl-teal)) !important;
}

/* ── Pass 33: Aurora rebalance + code blocks API consistency (light) ──
 * Audit identificou: aurora orange/teal quase imperceptível em light mode
 * (opacity 0.18) + 2 code blocks da API (.sl-api-resp-pre, .sl-api-snippet-pre)
 * sem override em light. Esta pass:
 *
 * 1. Bumpa opacidade aurora 0.18 → 0.40 e softpediza overlay branco
 *    pra cores brand (laranja/teal) bleeding through visíveis sem comprometer
 *    legibilidade do texto sobreposto.
 *
 * 2. Trata os pre/code blocks da API como "code editor" mantendo bg dark
 *    (mesmo padrão do .sl-api-code linha 22559) — convenção de docs (Stripe,
 *    GitHub, Vercel) mantém code-blocks dark mesmo em sites light pra
 *    paridade visual com IDEs. */

/* Aurora gradients animados — bump de opacity */
[data-theme="light"] .sl-aurora-bg,
[data-theme="light"] .sl-special-bg,
[data-theme="light"] .sl-uptime-bg,
[data-theme="light"] .sl-gw-banner-bg,
[data-theme="light"] .sl-boleto-halo {
	opacity: 0.40 !important;
}

/* Overlay branco do .sl-aurora-box — afrouxar pras cores aurora bleed-through */
[data-theme="light"] .sl-aurora-box::before {
	background:
		radial-gradient(ellipse at center, rgba(255, 255, 255, 0.40), rgba(255, 255, 255, 0.72) 70%),
		rgba(255, 255, 255, 0.50) !important;
}

/* Internal aurora gradients dos cards (ROI, savings, hero etc) */
[data-theme="light"] .sl-sav-card-bg,
[data-theme="light"] .sl-fpx-card-bg,
[data-theme="light"] .sl-uptime-hero-bg,
[data-theme="light"] .sl-status-hero-bg,
[data-theme="light"] .sl-persona-hero-bg,
[data-theme="light"] .sl-plat-hero-bg,
[data-theme="light"] .sl-single-marca-hero-bg,
[data-theme="light"] .sl-fab-card-bg,
[data-theme="light"] .sl-srv-card-bg {
	opacity: 0.32 !important;
}

/* Code blocks API (responses + SDK snippets) — manter dark editor look */
[data-theme="light"] .sl-api-resp-pre {
	background: #1e1e2e !important;
	color: #fafafa !important;
	padding: 1rem 1.1rem !important;
	border-radius: 10px !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

[data-theme="light"] .sl-api-snippet-pre {
	background: #1e1e2e !important;
	color: #fafafa !important;
	border: 1px solid rgba(0, 0, 0, 0.15) !important;
}

/* Container "snippets" wrap em light — fica claro mas o pre interno fica dark */
[data-theme="light"] .sl-api-snippets {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-api-snippets-title { color: var(--sl-text-3) !important; }

/* Tabs (Curl/Node/Python) ficam claras pra match com o tema */
[data-theme="light"] .sl-api-snippet-tab {
	background: rgba(0, 0, 0, 0.03) !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-api-snippet-tab:hover {
	border-color: rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-api-snippet-tab.is-active {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: var(--sl-teal) !important;
	color: var(--sl-teal) !important;
}

/* Wrapper do JSON response em light */
[data-theme="light"] .sl-api-resp {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* JSON syntax highlighting — manter cores VIBRANTES sobre o pre dark
 * (não inverter, o code é dark sempre). As cores já são contrastantes
 * com #1e1e2e — ok como estão. */

/* ── Pass 34: ROI calculator — toned down orange wash em light ──
 * User: "Não ficou bom no tema branco". Calculator estava com 4 fontes
 * concorrentes de laranja em light:
 *   1. .sl-roi::before — radial 12% laranja no topo (wash forte)
 *   2. .sl-roi-card--highlight — gradient 0.08 laranja (Sua Margem)
 *   3. .sl-roi-card--mid value — color #ffb347 (laranja-3 fica washed em fundo branco)
 *   4. .sl-roi-annual-value — laranja-3 idem
 *
 * Resultado: card inteiro parecia "molhado de laranja". Esta pass:
 *   - mata o radial ::before em light (estética dark-only — não funciona em white)
 *   - mantém highlight card laranja MAS reduzido (cleaner accent vs wash)
 *   - troca laranja-3 (#ffb347 washed) por laranja brand sólido (#f16000)
 *     nos values dos cards mid e annual pra contrastar bem em fundo branco */

/* Mata radial laranja do topo (era estético em dark sobre #12121a, vira
 * mancha laranja desbotada em fundo branco) */
[data-theme="light"] .sl-roi::before {
	background: transparent !important;
}

/* Highlight card "Sua Margem" — gradient mais sutil pra parecer accent
 * em vez de wash. Border preservada laranja pra identidade visual. */
[data-theme="light"] .sl-roi-card--highlight {
	background: linear-gradient(135deg, rgba(241, 96, 0, 0.05), rgba(241, 96, 0, 0.02)) !important;
	border-color: rgba(241, 96, 0, 0.22) !important;
}

/* Values do mid card (Custo Total) e annual (Margem Acumulada) — usar
 * laranja brand sólido em vez de laranja-3 washed (#ffb347 fica anêmico
 * em fundo branco). Brand #f16000 contrasta forte e mantém identidade. */
[data-theme="light"] .sl-roi-card--mid .sl-roi-card-value,
[data-theme="light"] .sl-roi-annual-value {
	color: var(--sl-brand) !important;
}

/* Suffix R$ X / mês de input-val (R$ 56, R$ 10) também usa laranja-3
 * por padrão. Trocar pra brand pra dar mais peso. */
[data-theme="light"] .sl-roi-input-val {
	color: var(--sl-brand) !important;
}

/* Tier label "Faixa Smart: 400-799 · R$ 2,50/v" — usa laranja-3 fade.
 * Em light fica anêmico. Trocar pra text-2 neutro (informacional, não
 * precisa puxar atenção). */
[data-theme="light"] .sl-roi-tier {
	color: var(--sl-text-3) !important;
}

/* ── Pass 35: Savings teaser figure card — polish em light ──
 * O card "ECONOMIA MÉDIA ANUAL R$ 180+" estava com gradient bg muito
 * washed (`#f0fdf4 → #ecfeff` quase = page bg) + ::before mask border
 * com lime cru `rgba(196,255,62,0.5)` aparecendo como linha vibrante.
 * Subtleza: reforçar contraste + suavizar border. */

[data-theme="light"] .sl-sav-teaser-figure {
	background: linear-gradient(135deg, #e8fbf3 0%, #e3f9fa 100%) !important;
	border: 1px solid rgba(45, 212, 191, 0.35) !important;
	box-shadow:
		0 2px 6px rgba(45, 212, 191, 0.08),
		0 14px 36px -14px rgba(45, 212, 191, 0.25),
		inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}
/* Border gradient mask (::before) — substitui lime+teal cru por teal-only
 * com opacidade reduzida pra um halo elegante em vez de "linha lime crua" */
[data-theme="light"] .sl-sav-teaser-figure::before {
	background: linear-gradient(135deg, rgba(45, 212, 191, 0.45), rgba(45, 212, 191, 0.15), transparent 65%) !important;
}

/* "R$ 180+" gradient — usar stops mais saturados pra ler melhor em fundo
 * teal claro (lime puro fica washed sobre bg #e8fbf3) */
[data-theme="light"] .sl-sav-teaser-fig-value {
	background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #65a30d 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	color: transparent !important;
}

/* Orbs decorativos (lime/teal blur) — desligar em light. Estética dark-only.
 * Em fundo branco viram halo verde que invade a área do card e cria "wash"
 * que o user reportou (Pass 36). */
[data-theme="light"] .sl-sav-teaser-orb {
	display: none !important;
}

/* Grid lines decorativos — quase invisíveis, manter subtle */
[data-theme="light"] .sl-sav-teaser-grid {
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px) !important;
}

/* Ticker pill "ROI médio: paga em < 30 dias" no bottom do card —
 * teal accent mais sólido em light */
[data-theme="light"] .sl-sav-teaser-ticker {
	background: rgba(255, 255, 255, 0.85) !important;
	border: 1px solid rgba(45, 212, 191, 0.35) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-sav-teaser-ticker strong {
	color: var(--sl-teal) !important;
	font-weight: 700 !important;
}

/* User pediu: percentuais dos vectors (-12%, +40pp, etc) e a palavra
 * "retorno" do subtítulo na MESMA cor do "< 30 dias" (teal). Lime cru
 * em fundo branco fica anêmico — teal contrasta forte e mantém paleta. */
[data-theme="light"] .sl-sav-teaser-vectors em,
[data-theme="light"] .sl-sav-teaser-sub strong {
	color: var(--sl-teal) !important;
}

/* ── Pass 39: Pricing slider track — limpa rainbow muddy em light ──
 * Track padrão (.sl-pri-slider) usa gradient orange→teal→lime que em fundo
 * dark fica espectro elegante de "savings", mas em light vira marrom→
 * teal→lime confuso. Substitui em light por single-tone teal sutil; thumb
 * preserva laranja brand mas troca border dark por branco pra integrar. */

/* User pediu (Pass 43): manter rainbow original brand→teal→lime do dark
 * em light também — a cor do thumb varia conforme a quantidade no spectrum
 * de "savings" (cheaper → better deal). Restaura o gradient rainbow. */
[data-theme="light"] .sl-pri-slider input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(90deg,
		var(--sl-brand) 0%,
		var(--sl-teal) 50%,
		var(--sl-lime) 100%) !important;
}
[data-theme="light"] .sl-pri-slider input[type="range"]::-moz-range-track {
	background: linear-gradient(90deg,
		var(--sl-brand) 0%,
		var(--sl-teal) 50%,
		var(--sl-lime) 100%) !important;
}

/* Thumb laranja brand — border dark substituída por branco + soft drop shadow */
[data-theme="light"] .sl-pri-slider input[type="range"]::-webkit-slider-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(241, 96, 0, 0.30),
		0 4px 10px rgba(241, 96, 0, 0.30) !important;
}
[data-theme="light"] .sl-pri-slider input[type="range"]::-moz-range-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(241, 96, 0, 0.30),
		0 4px 10px rgba(241, 96, 0, 0.30) !important;
}

/* Mesmo tratamento no thumb do .sl-sav-field (savings calculator) — usa
 * teal mas a border #0a0a0f fica harsh em fundo branco. */
[data-theme="light"] .sl-sav-field input[type="range"]::-webkit-slider-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(45, 212, 191, 0.35),
		0 4px 10px rgba(45, 212, 191, 0.30) !important;
}
[data-theme="light"] .sl-sav-field input[type="range"]::-moz-range-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(45, 212, 191, 0.35),
		0 4px 10px rgba(45, 212, 191, 0.30) !important;
}
[data-theme="light"] .sl-sav-field input[type="range"]::-webkit-slider-runnable-track {
	background: linear-gradient(90deg,
		var(--sl-teal) 0%,
		var(--sl-teal) var(--sl-fill, 0%),
		rgba(0, 0, 0, 0.08) var(--sl-fill, 0%),
		rgba(0, 0, 0, 0.08) 100%) !important;
}
[data-theme="light"] .sl-sav-field input[type="range"]::-moz-range-track {
	background: linear-gradient(90deg,
		var(--sl-teal) 0%,
		var(--sl-teal) var(--sl-fill, 0%),
		rgba(0, 0, 0, 0.08) var(--sl-fill, 0%),
		rgba(0, 0, 0, 0.08) 100%) !important;
}

/* ── Pass 55: Status page (page-status.php) — fundos cinza fracos em light ──
 * Vários elementos usam rgba(0,0,0,0.18) que em fundo branco vira cinza
 * washed sem definição. E rgba(255,255,255,0.X) que vira invisível em light.
 * Substitui por escala neutra de cinza com bom contraste em fundo claro. */

/* Monitor card wrapper — branco com border + sombra sutil */
[data-theme="light"] .sl-status-monitor {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-status-monitor--down {
	border-color: rgba(255, 64, 96, 0.40) !important;
	background: linear-gradient(180deg, rgba(255, 64, 96, 0.04), #ffffff) !important;
}
[data-theme="light"] .sl-status-monitor--degraded {
	border-color: rgba(255, 176, 32, 0.40) !important;
	background: linear-gradient(180deg, rgba(255, 176, 32, 0.04), #ffffff) !important;
}

/* Badge "S01/S02/S03" key — cinza claro visível em light */
[data-theme="light"] .sl-status-monitor-key {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--sl-text-3) !important;
}

/* Heartbeat barcode (60min row) — bg cinza claro definido + border sutil */
[data-theme="light"] .sl-status-bar {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .sl-status-tick--unknown {
	background: rgba(0, 0, 0, 0.10) !important;
}

/* 90-day history timeline — mesmo tratamento */
[data-theme="light"] .sl-status-history {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .sl-status-day--empty {
	background: rgba(0, 0, 0, 0.05) !important;
	border: 1px dashed rgba(0, 0, 0, 0.10) !important;
}

/* 4 stat boxes (UPTIME 24H / UPTIME 30D / PING ATUAL / PING MÉDIO) */
[data-theme="light"] .sl-status-stat {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.05) !important;
}
[data-theme="light"] .sl-status-stat-label {
	color: var(--sl-text-3) !important;
}
[data-theme="light"] .sl-status-stat strong {
	color: var(--sl-text) !important;
}

/* Pill "OPERACIONAL/UNKNOWN" — variant unknown em fundo branco precisa contraste */
[data-theme="light"] .sl-status-pill--unknown {
	background: rgba(0, 0, 0, 0.05) !important;
	color: var(--sl-text-3) !important;
}

/* Footer "Sem incidentes registrados · check a cada 60s" */
[data-theme="light"] .sl-status-monitor-foot { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-status-monitor-msg { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-status-monitor-interval { color: var(--sl-text-3) !important; }

/* Chart wrap "Tempo de resposta" — mesmo tratamento do .sl-status-monitor:
 * branco + border sutil + drop shadow leve */
[data-theme="light"] .sl-status-chart-wrap {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.08) !important;
	border-radius: 14px !important;
}

/* Code blocks da API pública (GET .../uptime) e badge HTML */
[data-theme="light"] .sl-status-code-block {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-status-code-block code {
	color: var(--sl-teal) !important;
}

/* Botão "copiar" ao lado do code */
[data-theme="light"] .sl-status-copy-btn {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-status-copy-btn:hover {
	border-color: var(--sl-teal) !important;
	color: var(--sl-teal) !important;
}
[data-theme="light"] .sl-status-copy-btn.is-copied {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: var(--sl-teal) !important;
	color: var(--sl-teal) !important;
}

/* Badge preview wrapper — bg branco */
[data-theme="light"] .sl-status-badge-preview {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-status-badge-preview-label {
	color: var(--sl-text-3) !important;
}

/* Chart tabs/periods (eu-central-1 / us-west-1 / 1h / 24h) — overrides
 * de bg pra match com o tema light */
[data-theme="light"] .sl-status-chart-tab,
[data-theme="light"] .sl-status-chart-period {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	color: var(--sl-text-2) !important;
}
[data-theme="light"] .sl-status-chart-tab:hover,
[data-theme="light"] .sl-status-chart-period:hover {
	border-color: rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-status-chart-tab.is-active,
[data-theme="light"] .sl-status-chart-period.is-active {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: rgba(45, 212, 191, 0.40) !important;
	color: var(--sl-teal) !important;
}

/* ROI calculator sliders — preservar orange-fill gradient (--sl-fill) que
 * a regra genérica `[data-theme="light"] input[type="range"]` (linha 21676)
 * estava matando ao forçar bg flat gray. Restaura o fill laranja com unfilled
 * em cinza claro pra ler em light bg. */
[data-theme="light"] .sl-roi-input input[type="range"] {
	background: linear-gradient(90deg,
		var(--sl-brand) 0%,
		var(--sl-brand) var(--sl-fill, 50%),
		rgba(0, 0, 0, 0.08) var(--sl-fill, 50%),
		rgba(0, 0, 0, 0.08) 100%) !important;
}

/* Thumb — border dark substituída por branco + glow laranja */
[data-theme="light"] .sl-roi-input input[type="range"]::-webkit-slider-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(241, 96, 0, 0.30),
		0 4px 10px rgba(241, 96, 0, 0.30) !important;
}
[data-theme="light"] .sl-roi-input input[type="range"]::-moz-range-thumb {
	border: 3px solid #ffffff !important;
	box-shadow:
		0 0 0 1px rgba(241, 96, 0, 0.30),
		0 4px 10px rgba(241, 96, 0, 0.30) !important;
}

/* ── Pass 90: Homolog section (page-rastreadores.php) — light mode ──
 * "Dois caminhos pra começar" + 4 steps numerados. Container usava
 * rgba(18,18,26,0.7) (dark) e steps rgba(255,255,255,0.02) (invisível em
 * light). Movido pra fim do arquivo pra garantir precedence. */

[data-theme="light"] .sl-homolog {
	background:
		radial-gradient(ellipse at right, rgba(241, 96, 0, 0.06), transparent 60%),
		#ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.10) !important;
}
[data-theme="light"] .sl-homolog-step {
	background: #f6f6fa !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .sl-homolog-step:hover {
	background: rgba(241, 96, 0, 0.04) !important;
	border-color: rgba(241, 96, 0, 0.30) !important;
}
[data-theme="light"] .sl-homolog-num {
	background: rgba(241, 96, 0, 0.10) !important;
	border-color: rgba(241, 96, 0, 0.35) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-homolog-step strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-homolog-step span { color: var(--sl-text-2) !important; }
[data-theme="light"] .sl-homolog-divider {
	background: rgba(0, 0, 0, 0.08) !important;
}

/* Contact channels card (page-contato.php) — Telefone/E-mail/Horário.
 * Wrapper usava rgba(22,22,32,0.5) que vira cinza pesado em light. */
[data-theme="light"] .sl-contact-channels {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	box-shadow: 0 4px 16px -8px rgba(0, 0, 0, 0.06) !important;
}

/* Google Map (.sl-gmap) — bg loading fica light em vez de #1a1a24 (dark)
 * + fallback (overlay quando map não carrega) com estilo light apropriado.
 * O Google Map style em si vira light via JS (pickStyle return null em
 * data-theme="light") — Pass 91 modificou o JS pra detectar tema. */
[data-theme="light"] .sl-gmap {
	background: #f0f0f5 !important;
}
[data-theme="light"] .sl-gmap-fallback {
	background: #ffffff !important;
	border: 1px dashed rgba(0, 0, 0, 0.18) !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-gmap-fallback:hover {
	background: rgba(241, 96, 0, 0.04) !important;
	border-color: rgba(241, 96, 0, 0.40) !important;
}
[data-theme="light"] .sl-gmap-fallback span { color: var(--sl-text) !important; }
[data-theme="light"] .sl-gmap-fallback small { color: var(--sl-text-3) !important; }

/* InfoWindow do Google Maps (popup que aparece ao clicar no marker) — bg
 * estava rgba(14,14,21,0.95) dark mesmo em light mode. Wildcard agressivo:
 * QUALQUER elemento `.gm-style-iw-*` filho do .sl-gmap recebe bg branco em
 * light. Necessário porque Google muda os wrappers internos sem aviso. */
[data-theme="light"] .sl-gmap [class*="gm-style-iw"] {
	background: #ffffff !important;
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-gmap .gm-style-iw-c {
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow:
		0 15px 35px -10px rgba(0, 0, 0, 0.18),
		0 4px 12px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-gmap .gm-style-iw-tc::after {
	background: #ffffff !important;
}

/* Conteúdo dentro do InfoWindow — texto escuro */
[data-theme="light"] .sl-gmap-iw {
	color: var(--sl-text) !important;
}
[data-theme="light"] .sl-gmap-iw strong { color: var(--sl-text) !important; }
[data-theme="light"] .sl-gmap-iw span { color: var(--sl-text-2) !important; }

/* Botão "Abrir no Google Maps" dentro do InfoWindow — preserva laranja brand */
[data-theme="light"] .sl-gmap-iw a {
	background: rgba(241, 96, 0, 0.08) !important;
	border-color: rgba(241, 96, 0, 0.40) !important;
	color: var(--sl-brand) !important;
}
[data-theme="light"] .sl-gmap-iw a:hover {
	background: rgba(241, 96, 0, 0.16) !important;
	border-color: var(--sl-brand) !important;
	color: var(--sl-brand) !important;
}

/* Botão de close (X) do InfoWindow — preto sobre branco em light */
[data-theme="light"] .sl-gmap .gm-ui-hover-effect > span {
	background: rgba(0, 0, 0, 0.55) !important;
}

/* Controles do Google Maps (fullscreen, zoom, street view) — bg branco em light */
[data-theme="light"] .sl-gmap .gm-fullscreen-control,
[data-theme="light"] .sl-gmap .gm-bundled-control,
[data-theme="light"] .sl-gmap .gm-bundled-control-on-bottom,
[data-theme="light"] .sl-gmap .gm-svpc {
	background: rgba(255, 255, 255, 0.95) !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10) !important;
}
/* Ícones dos controles — em light NÃO inverte (PNG já vem dark, fica preto sobre branco) */
[data-theme="light"] .sl-gmap .gm-fullscreen-control img,
[data-theme="light"] .sl-gmap .gm-bundled-control img,
[data-theme="light"] .sl-gmap .gm-svpc img,
[data-theme="light"] .sl-gmap button[aria-label*="Aumentar"] img,
[data-theme="light"] .sl-gmap button[aria-label*="Reduzir"] img,
[data-theme="light"] .sl-gmap button[aria-label*="Zoom"] img,
[data-theme="light"] .sl-gmap button[aria-label*="ela inteira"] img,
[data-theme="light"] .sl-gmap button[aria-label*="ompleta"] img {
	filter: opacity(0.65) !important;
}
[data-theme="light"] .sl-gmap .gm-fullscreen-control:hover img,
[data-theme="light"] .sl-gmap .gm-bundled-control:hover img,
[data-theme="light"] .sl-gmap button:hover img {
	filter: opacity(1) !important;
}
/* Hover dos controles em light */
[data-theme="light"] .sl-gmap .gm-fullscreen-control:hover,
[data-theme="light"] .sl-gmap .gm-bundled-control button:hover,
[data-theme="light"] .sl-gmap .gm-svpc:hover {
	background: rgba(45, 212, 191, 0.10) !important;
}

/* Attribution bar "Dados cartográficos ©2026 Google" — bar light */
[data-theme="light"] .sl-gmap .gm-style-cc > div,
[data-theme="light"] .sl-gmap .gm-style-cc > div > div,
[data-theme="light"] .sl-gmap .gm-style-cc > div > div > div {
	background: rgba(255, 255, 255, 0.92) !important;
	background-color: rgba(255, 255, 255, 0.92) !important;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .sl-gmap .gm-style-cc a,
[data-theme="light"] .sl-gmap .gm-style-cc span,
[data-theme="light"] .sl-gmap .gm-style-cc button {
	color: rgba(10, 10, 20, 0.75) !important;
}
[data-theme="light"] .sl-gmap .gm-style-cc a:hover {
	color: var(--sl-teal) !important;
}

/* Logo Google (canto inferior esquerdo) — bg branco em light */
[data-theme="light"] .sl-gmap a[href^="https://maps.google.com"],
[data-theme="light"] .sl-gmap a[href*="/maps/@"] {
	background: rgba(255, 255, 255, 0.85) !important;
}

/* ── Pass 103: Modais padronizados (weather + server status + journey) ──
 * Os 3 modais visíveis ao user (.sl-wx-modal, .sl-srv-modal, .sl-jrn-modal)
 * tinham overlays/panels com valores ligeiramente diferentes (opacity 0.75
 * vs 0.78, max-width 480px vs 560px, blur 8px vs 10px). Esta pass unifica
 * pra um padrão único em ambos os temas. */

/* Overlay — mesmo bg + blur em todos os 3 */
.sl-wx-modal-overlay,
.sl-srv-modal-overlay,
.sl-jrn-modal-overlay {
	background: rgba(8, 8, 12, 0.75) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
}

/* Panel — mesmo max-width, border-radius, padding base, animation. */
.sl-wx-modal-panel,
.sl-srv-modal-panel,
.sl-jrn-modal-panel {
	max-width: 480px !important;
	width: 100% !important;
	border-radius: 18px !important;
}

/* Light mode unificado pros 3 panels — bg branco, border + shadow consistentes */
[data-theme="light"] .sl-wx-modal-panel,
[data-theme="light"] .sl-srv-modal-panel,
[data-theme="light"] .sl-jrn-modal-panel {
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.10) !important;
	box-shadow:
		0 24px 60px -16px rgba(0, 0, 0, 0.20),
		0 8px 20px -8px rgba(0, 0, 0, 0.10) !important;
	color: var(--sl-text) !important;
}

/* Light mode overlay — um pouco mais claro pra contraste com panel branco */
[data-theme="light"] .sl-wx-modal-overlay,
[data-theme="light"] .sl-srv-modal-overlay,
[data-theme="light"] .sl-jrn-modal-overlay {
	background: rgba(0, 0, 0, 0.45) !important;
}

/* ── Pass 114: /mapa-ao-vivo/ — full-screen interactive Google Maps ─────── */

.sl-livemap-section {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - 80px);
	background: var(--sl-ink);
}
.sl-livemap-header {
	padding: 1.5rem 0 1.25rem;
	border-bottom: 1px solid var(--sl-line);
	background: var(--sl-ink-2);
}
.sl-livemap-header-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1.5rem;
	flex-wrap: wrap;
}
.sl-livemap-title h1 {
	font-size: clamp(1.4rem, 2.5vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0.6rem 0 0.4rem;
	color: var(--sl-text);
}
.sl-livemap-title p {
	color: var(--sl-text-2);
	font-size: 0.92rem;
	margin: 0;
}
.sl-livemap-stats {
	display: flex;
	gap: 1.25rem;
	flex-wrap: wrap;
}
.sl-livemap-stat {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 64px;
}
.sl-livemap-stat strong {
	font-family: var(--sl-font-display);
	font-size: clamp(1.4rem, 2.5vw, 1.85rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--sl-text);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.sl-livemap-stat span {
	font-family: var(--sl-font-mono);
	font-size: 0.65rem;
	color: var(--sl-text-3);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.sl-livemap-stat--moving strong  { color: #22c55e; }
.sl-livemap-stat--stopped strong { color: #fbbf24; }
.sl-livemap-stat--offline strong { color: #ef4444; }
.sl-livemap-stat--sync strong    { color: var(--sl-teal); font-size: 0.92rem; font-family: var(--sl-font-mono); }

/* Body — sidebar + mapa */
.sl-livemap-body {
	flex: 1;
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 0;
	min-height: 600px;
}
@media (max-width: 768px) {
	.sl-livemap-body {
		grid-template-columns: 1fr;
		grid-template-rows: 280px 1fr;
	}
}

/* Sidebar */
.sl-livemap-sidebar {
	position: relative;
	background: var(--sl-ink-2);
	border-right: 1px solid var(--sl-line);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: width 0.3s var(--sl-ease);
}
.sl-livemap-sidebar[data-collapsed="true"] {
	width: 40px;
	flex-shrink: 0;
}
.sl-livemap-sidebar[data-collapsed="true"] .sl-livemap-sidebar-content {
	opacity: 0;
	pointer-events: none;
}
.sl-livemap-sidebar[data-collapsed="true"] .sl-livemap-sidebar-toggle {
	transform: rotate(180deg);
}
.sl-livemap-sidebar-toggle {
	position: absolute;
	top: 12px;
	right: 8px;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background: rgba(45, 212, 191, 0.10);
	border: 1px solid rgba(45, 212, 191, 0.30);
	color: var(--sl-text-2);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
	transition: transform 0.3s var(--sl-ease), background 0.2s;
}
.sl-livemap-sidebar-toggle:hover {
	background: rgba(45, 212, 191, 0.18);
	color: var(--sl-teal);
}
.sl-livemap-sidebar-content {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1rem 0;
	flex: 1;
	min-height: 0;
	transition: opacity 0.2s ease;
}

/* Search */
.sl-livemap-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--sl-line);
	border-radius: 8px;
}
.sl-livemap-search:focus-within {
	border-color: rgba(45, 212, 191, 0.45);
}
.sl-livemap-search svg { color: var(--sl-text-3); flex-shrink: 0; }
.sl-livemap-search input {
	flex: 1;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 0.85rem;
}
.sl-livemap-search input::placeholder { color: var(--sl-text-3); }

/* Filters */
.sl-livemap-filters {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--sl-line);
}
.sl-livemap-filter {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.4rem 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s;
	font-size: 0.85rem;
	color: var(--sl-text-2);
}
.sl-livemap-filter:hover { background: rgba(255, 255, 255, 0.03); }
.sl-livemap-filter input { accent-color: var(--sl-teal); cursor: pointer; }
.sl-livemap-filter-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.sl-livemap-filter-dot--moving  { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.sl-livemap-filter-dot--stopped { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); }
.sl-livemap-filter-dot--offline { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
.sl-livemap-filter-dot--blocked { background: #374151; }
.sl-livemap-filter-label { flex: 1; }
.sl-livemap-filter-count {
	font-family: var(--sl-font-mono);
	font-size: 0.72rem;
	color: var(--sl-text-3);
	font-variant-numeric: tabular-nums;
}

/* List */
.sl-livemap-list {
	flex: 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding-bottom: 1rem;
}
.sl-livemap-list-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 2rem 1rem;
	color: var(--sl-text-3);
	text-align: center;
}
.sl-livemap-list-empty svg { opacity: 0.5; }
.sl-livemap-list-empty p { font-size: 0.85rem; margin: 0; }
.sl-livemap-list-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.7rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	color: var(--sl-text);
	text-align: left;
	transition: background 0.15s, border-color 0.15s;
}
.sl-livemap-list-item:hover {
	background: rgba(45, 212, 191, 0.06);
	border-color: rgba(45, 212, 191, 0.20);
}
.sl-livemap-list-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.sl-livemap-list-dot--moving  { background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, 0.6); }
.sl-livemap-list-dot--stopped { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.6); }
.sl-livemap-list-dot--offline { background: #ef4444; box-shadow: 0 0 6px rgba(239, 68, 68, 0.6); }
.sl-livemap-list-dot--blocked { background: #374151; }
.sl-livemap-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}
.sl-livemap-list-info strong {
	font-family: var(--sl-font-mono);
	font-size: 0.78rem;
	color: var(--sl-text);
	font-weight: 700;
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.sl-livemap-list-info span {
	font-size: 0.72rem;
	color: var(--sl-text-3);
}

/* Map wrap */
.sl-livemap-map-wrap {
	position: relative;
	background: var(--sl-ink-2);
	min-height: 600px;
}
.sl-livemap-map {
	width: 100%;
	height: 100%;
	min-height: 600px;
}
.sl-livemap-loading,
.sl-livemap-no-key {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	background: rgba(10, 10, 16, 0.7);
	color: var(--sl-text-2);
	z-index: 5;
}
.sl-livemap-loading-spinner {
	width: 32px; height: 32px;
	border: 2px solid var(--sl-line);
	border-top-color: var(--sl-teal);
	border-radius: 50%;
	animation: sl-livemap-spin 0.8s linear infinite;
}
@keyframes sl-livemap-spin { to { transform: rotate(360deg); } }
.sl-livemap-no-key svg { color: var(--sl-text-3); }
.sl-livemap-no-key strong { color: var(--sl-text); font-size: 1rem; }
.sl-livemap-no-key p { color: var(--sl-text-2); font-size: 0.85rem; text-align: center; }

/* InfoWindow content (inside Google Maps popup) */
.sl-livemap-iw {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.5rem 0.5rem 0.7rem;
	min-width: 200px;
	font-family: var(--sl-font-body);
}
.sl-livemap-iw strong {
	font-family: var(--sl-font-mono);
	font-size: 0.92rem;
	color: var(--sl-text);
	letter-spacing: 0.04em;
	font-weight: 700;
}
.sl-livemap-iw-status {
	display: inline-block;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	width: fit-content;
}
.sl-livemap-iw-status--moving  { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.sl-livemap-iw-status--stopped { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.sl-livemap-iw-status--offline { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.sl-livemap-iw-status--blocked { background: rgba(55, 65, 81, 0.20); color: #9ca3af; }
.sl-livemap-iw-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: 0.78rem;
	color: var(--sl-text-2);
	margin-top: 0.2rem;
}
.sl-livemap-iw-meta strong { font-size: 0.85rem; color: var(--sl-text); }

/* Light mode adaptations */
[data-theme="light"] .sl-livemap-section { background: var(--sl-ink); }
[data-theme="light"] .sl-livemap-header,
[data-theme="light"] .sl-livemap-sidebar,
[data-theme="light"] .sl-livemap-map-wrap { background: #ffffff; }
[data-theme="light"] .sl-livemap-header { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sl-livemap-sidebar { border-right-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sl-livemap-search { background: #f6f6fa; border-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sl-livemap-filter:hover { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .sl-livemap-filters { border-bottom-color: rgba(0, 0, 0, 0.08); }
[data-theme="light"] .sl-livemap-list-item:hover {
	background: rgba(45, 212, 191, 0.08);
	border-color: rgba(45, 212, 191, 0.30);
}
[data-theme="light"] .sl-livemap-loading {
	background: rgba(255, 255, 255, 0.85);
}

/* Botões "Atualizar" dentro dos modais — bg teal 0.10 ficava washed em
 * fundo branco. Light mode: bg branco sólido + border teal 0.40 + texto
 * teal. Hover preenche com teal claro. Aplica em todos os 3 modais. */
[data-theme="light"] .sl-wx-refresh,
[data-theme="light"] .sl-srv-refresh,
[data-theme="light"] .sl-status-banner-refresh {
	background: #ffffff !important;
	border: 1px solid rgba(45, 212, 191, 0.45) !important;
	color: var(--sl-teal) !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
[data-theme="light"] .sl-wx-refresh:hover,
[data-theme="light"] .sl-srv-refresh:hover,
[data-theme="light"] .sl-status-banner-refresh:hover {
	background: rgba(45, 212, 191, 0.10) !important;
	border-color: var(--sl-teal) !important;
	box-shadow: 0 4px 12px -4px rgba(45, 212, 191, 0.30) !important;
}