body.srt-modern {
	margin: 0;
	min-height: 100vh;
	background: var(--srt-bg);
	color: var(--srt-text);
	font-family: var(--srt-font);
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	color-scheme: dark;
	overflow-x: hidden;
}

body.srt-modern * {
	box-sizing: border-box;
}

/* `hidden` precisa vencer o `display` dos componentes. Sem isto, um
 * overlay "escondido" (modal de produto, LGPD, entrada) continua com
 * display: grid, cobrindo a tela e engolindo todos os cliques. */
body.srt-modern [hidden] {
	display: none !important;
}

body.srt-modern img {
	display: block;
	max-width: 100%;
}

/* SVG sem `max-width: 100%` de proposito: como os icones nao tem largura
 * intrinseca, dentro de um container grid/flex centralizado o 100% resolve
 * contra a propria largura de conteudo e colapsa o icone (um "X" virava
 * 4px). O tamanho de cada icone vem do CSS do componente. */
body.srt-modern svg {
	display: block;
}

/* O tema pai declara `svg { fill: var(--text-color) }`, e CSS vence o
 * atributo `fill` do SVG. Sem isto, todo icone de contorno do tema fica
 * preenchido de preto (e um "X" de linha chega a colapsar). */
body.srt-modern svg[fill="none"] {
	fill: none;
}

body.srt-modern svg[fill="currentColor"] {
	fill: currentColor;
}

body.srt-modern a {
	color: inherit;
	text-decoration: none;
}

body.srt-modern button,
body.srt-modern input,
body.srt-modern textarea,
body.srt-modern select {
	font: inherit;
}

body.srt-modern button {
	cursor: pointer;
}

body.srt-modern :focus-visible {
	outline: 2px solid var(--srt-primary);
	outline-offset: 4px;
}

body.srt-modern.srt-menu-open {
	overflow: hidden;
}

body.srt-modern .srt-site {
	position: relative;
	min-height: 100vh;
	overflow: clip;
	background:
		radial-gradient(circle at 78% 4%, rgba(32, 176, 248, 0.16), transparent 34%),
		radial-gradient(circle at 8% 2%, rgba(32, 176, 248, 0.08), transparent 26%),
		linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
		linear-gradient(180deg, var(--srt-bg-top) 0%, #010f1c 22%, var(--srt-bg) 52%, var(--srt-bg-secondary) 100%);
	background-size: auto, auto, 72px 72px, 72px 72px, auto;
}

/* Elementos fixos que o tema pai injeta em todas as paginas (barra
 * "TEM DUVIDA? FALE COMIGO!" e o popup do Telegram). O tema filho tem o
 * proprio botao de suporte, entao estes sao ocultados para nao empilhar
 * dois botoes no mesmo canto. O tema pai nao e alterado. */
body.srt-modern #sr-tg-overlay,
body.srt-modern #sr-tg-popup,
body.srt-modern #sr-tg-button,
body.srt-modern .fixed-footer,
body.srt-modern .footer-spacing,
body.srt-modern .backtotop {
	display: none !important;
}

.srt-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	transform: translateY(-140%);
	border: 1px solid var(--srt-primary);
	border-radius: var(--srt-radius-sm);
	background: var(--srt-bg);
	color: var(--srt-text);
	padding: 10px 14px;
	transition: transform var(--srt-motion);
}

.srt-skip-link:focus {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	body.srt-modern *,
	body.srt-modern *::before,
	body.srt-modern *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}