/*
 * novidades.css - propaganda da grande atualização do SacwinWeb (montada pelo novidades.js).
 * Cores do tema do sistema (netserv_layout.css): header #2b3643, ativo #1caf9a.
 */

.sw-nov {
	--nov-escuro: #2b3643;
	--nov-teal: #1caf9a;
	--nov-azul: #3b82c4;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(20, 28, 38, 0);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	transition: background .45s ease, backdrop-filter .45s ease;
}

.sw-nov *, .sw-nov *::before, .sw-nov *::after { box-sizing: border-box; }

.sw-nov--aberta { background: rgba(20, 28, 38, .72); backdrop-filter: blur(4px); }
.sw-nov--saindo { background: rgba(20, 28, 38, 0); backdrop-filter: none; }

.sw-nov__confete { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

/* ------------------------------------------------- janela */

.sw-nov__janela {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 32px);
	display: flex;
	flex-direction: column;
	background: #f4f7fa;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(40px) scale(.92);
	transition: opacity .45s ease, transform .55s cubic-bezier(.2, 1.3, .4, 1);
}

.sw-nov--aberta .sw-nov__janela { opacity: 1; transform: none; }
.sw-nov--saindo .sw-nov__janela { opacity: 0; transform: translateY(20px) scale(.96); transition-duration: .35s; }

.sw-nov__x {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	transition: background .2s, transform .3s;
}

.sw-nov__x:hover { background: rgba(255, 255, 255, .3); transform: rotate(90deg); }

/* ------------------------------------------------- topo animado */

.sw-nov__hero {
	position: relative;
	flex: none;
	padding: 38px 32px 30px;
	text-align: center;
	color: #fff;
	overflow: hidden;
	background: linear-gradient(120deg, #2b3643, #1a6f8f, #1caf9a, #2b3643);
	background-size: 300% 300%;
	animation: sw-nov-fundo 12s ease infinite;
}

@keyframes sw-nov-fundo {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.sw-nov__bolha {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%);
	animation: sw-nov-flutua 9s ease-in-out infinite;
}

.sw-nov__bolha--1 { width: 220px; height: 220px; left: -60px; top: -80px; }
.sw-nov__bolha--2 { width: 140px; height: 140px; right: 8%; bottom: -60px; animation-delay: -3s; }
.sw-nov__bolha--3 { width: 90px; height: 90px; right: 30%; top: -30px; animation-delay: -6s; }

@keyframes sw-nov-flutua {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(18px, 22px); }
}

/* ícones dos módulos girando em volta do título */
.sw-nov__orbita {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 460px;
	height: 460px;
	margin: -230px 0 0 -230px;
	border: 1px dashed rgba(255, 255, 255, .18);
	border-radius: 50%;
	animation: sw-nov-gira 30s linear infinite;
	pointer-events: none;
}

.sw-nov__orbita i {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	line-height: 34px;
	text-align: center;
	font-size: 15px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .85);
}

.sw-nov__orbita i:nth-child(1) { transform: rotate(0deg) translate(230px) rotate(0deg); }
.sw-nov__orbita i:nth-child(2) { transform: rotate(60deg) translate(230px) rotate(-60deg); }
.sw-nov__orbita i:nth-child(3) { transform: rotate(120deg) translate(230px) rotate(-120deg); }
.sw-nov__orbita i:nth-child(4) { transform: rotate(180deg) translate(230px) rotate(-180deg); }
.sw-nov__orbita i:nth-child(5) { transform: rotate(240deg) translate(230px) rotate(-240deg); }
.sw-nov__orbita i:nth-child(6) { transform: rotate(300deg) translate(230px) rotate(-300deg); }

@keyframes sw-nov-gira { to { transform: rotate(360deg); } }

/* logo da Netserv: entra girando em 3D, depois flutua com um halo pulsando */
.sw-nov__logo {
	position: relative;
	width: 116px;
	height: 116px;
	margin: 0 auto 14px;
	perspective: 600px;
}

.sw-nov__logo::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, #e6f4f2 70%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 -6px 14px rgba(43, 54, 67, .12);
	opacity: 0;
	transform: scale(.3);
	animation: sw-nov-explode .6s .2s cubic-bezier(.2, 1.6, .4, 1) forwards;
}

.sw-nov__logo-halo {
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .55);
	opacity: 0;
	animation: sw-nov-halo 2.6s 1.2s ease-out infinite;
}

@keyframes sw-nov-halo {
	0% { opacity: .9; transform: scale(1); }
	100% { opacity: 0; transform: scale(1.45); }
}

.sw-nov__logo img {
	position: absolute;
	left: 12px;
	top: 16px;
	width: 92px;
	height: auto;
	filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25));
	opacity: 0;
	transform: rotateY(-540deg) scale(.2);
	animation: sw-nov-logo 1.2s .3s cubic-bezier(.2, 1.1, .3, 1) forwards, sw-nov-boia 4s 1.6s ease-in-out infinite;
}

@keyframes sw-nov-logo {
	to { opacity: 1; transform: rotateY(0) scale(1); }
}

@keyframes sw-nov-boia {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-6px) rotate(-3deg); }
}

.sw-nov__selo {
	position: relative;
	display: inline-block;
	padding: 4px 14px;
	border-radius: 20px;
	background: #f5c518;
	color: #2b3643;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	animation: sw-nov-cai .6s .9s cubic-bezier(.2, 1.4, .4, 1) forwards, sw-nov-pulsa 2.2s 1.6s ease-in-out infinite;
}

@keyframes sw-nov-cai {
	from { opacity: 0; transform: translateY(-24px); }
	to { opacity: 1; transform: none; }
}

@keyframes sw-nov-pulsa {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, .6); }
	50% { box-shadow: 0 0 0 10px rgba(245, 197, 24, 0); }
}

.sw-nov__titulo {
	position: relative;
	margin: 12px 0 6px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	font-weight: 300;
	line-height: 1;
}

.sw-nov__pre {
	font-size: 36px;
	opacity: 0;
	animation: sw-nov-sobe .7s 1s ease forwards;
}

.sw-nov__marca {
	font-size: 64px;
	font-weight: 800;
	letter-spacing: -.01em;
	background: linear-gradient(100deg, #fff 20%, #f5c518 40%, #fff 50%, #9ff3e4 70%, #fff 90%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .25));
	opacity: 0;
	transform: scale(.3) rotate(-8deg);
	animation: sw-nov-explode .9s 1.15s cubic-bezier(.2, 1.6, .4, 1) forwards, sw-nov-brilho 3.5s 2.1s linear infinite;
}

@keyframes sw-nov-sobe {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: none; }
}

@keyframes sw-nov-explode {
	to { opacity: 1; transform: none; }
}

@keyframes sw-nov-brilho {
	from { background-position: 100% 0; }
	to { background-position: -150% 0; }
}

.sw-nov__sub {
	position: relative;
	min-height: 26px;
	margin: 6px 0 18px;
	font-size: 19px;
	font-weight: 400;
	color: rgba(255, 255, 255, .92);
}

.sw-nov__cursor { margin-left: 2px; animation: sw-nov-pisca 1s steps(1) infinite; }

@keyframes sw-nov-pisca { 50% { opacity: 0; } }

.sw-nov__pilulas {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.sw-nov__pilulas span {
	padding: 7px 16px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .28);
	font-size: 13px;
	font-weight: 600;
	opacity: 0;
	animation: sw-nov-sobe .5s calc(2s + var(--i) * .12s) ease forwards;
}

.sw-nov__pilulas i { margin-right: 4px; }

/* ------------------------------------------------- destaques */

.sw-nov__corpo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 22px 26px 8px;
}

.sw-nov__secao {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #6b7b8d;
}

.sw-nov__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 900px) { .sw-nov__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
	.sw-nov__grade { grid-template-columns: 1fr; }
	.sw-nov__pre { font-size: 24px; }
	.sw-nov__marca { font-size: 42px; }
	.sw-nov__hero { padding: 32px 16px 24px; }
	.sw-nov__corpo { padding: 18px 16px 8px; }
}

.sw-nov__card {
	--cor: #3b82c4;
	position: relative;
	padding: 18px 16px 16px;
	background: #fff;
	border-radius: 10px;
	border-top: 4px solid var(--cor);
	box-shadow: 0 1px 4px rgba(43, 54, 67, .12);
	color: #2b3643;
	overflow: hidden;
	opacity: 0;
	translate: 0 30px;
	animation: sw-nov-card .6s calc(2.3s + var(--i) * .1s) cubic-bezier(.2, 1.2, .4, 1) forwards;
	transition: transform .25s, box-shadow .25s;
}

/* reflexo que atravessa o card ao passar o mouse */
.sw-nov__card::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent);
	transform: skewX(-20deg);
	transition: left .6s ease;
	pointer-events: none;
}

.sw-nov__card:hover { box-shadow: 0 12px 26px rgba(43, 54, 67, .2); transform: translateY(-5px); }
.sw-nov__card:hover::after { left: 130%; }
.sw-nov__card:hover .sw-nov__card-icone { transform: rotate(-10deg) scale(1.15); }

/* a entrada anima o translate, para o transform do hover continuar funcionando */
@keyframes sw-nov-card { to { opacity: 1; translate: 0 0; } }

.sw-nov__card--teal { --cor: #1caf9a; }
.sw-nov__card--azul { --cor: #3b82c4; }
.sw-nov__card--laranja { --cor: #e8912d; }
.sw-nov__card--roxo { --cor: #8a63c7; }
.sw-nov__card--verde { --cor: #2fa36b; }
.sw-nov__card--vermelho { --cor: #d9534f; }

.sw-nov__card-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 10px;
	border-radius: 10px;
	background: var(--cor);
	color: #fff;
	font-size: 20px;
	transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
}

.sw-nov__card strong { display: block; margin-bottom: 6px; font-size: 15px; }
.sw-nov__card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5b6b7d; }

/* ------------------------------------------------- rodapé */

.sw-nov__rodape {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 26px 18px;
	border-top: 1px solid #e1e7ee;
	background: #f4f7fa;
}

.sw-nov__nao {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: #5b6b7d;
	cursor: pointer;
	user-select: none;
}

.sw-nov__nao input { width: 16px; height: 16px; margin: 0; accent-color: #1caf9a; cursor: pointer; }

.sw-nov__botao {
	position: relative;
	padding: 11px 26px;
	border: 0;
	border-radius: 24px;
	background: linear-gradient(90deg, #1caf9a, #1a8fb0);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(28, 175, 154, .4);
	animation: sw-nov-chama 2.4s 3s ease-in-out infinite;
	transition: transform .2s, box-shadow .2s;
}

.sw-nov__botao i { margin-left: 6px; transition: transform .2s; }
.sw-nov__botao:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(28, 175, 154, .5); }
.sw-nov__botao:hover i { transform: translateX(4px); }
.sw-nov__botao:focus-visible, .sw-nov__x:focus-visible { outline: 2px solid #f5c518; outline-offset: 2px; }

@keyframes sw-nov-chama {
	0%, 100% { box-shadow: 0 6px 18px rgba(28, 175, 154, .4); }
	50% { box-shadow: 0 6px 18px rgba(28, 175, 154, .4), 0 0 0 8px rgba(28, 175, 154, .18); }
}

/* monitores baixos (1366x768): topo mais compacto para as duas linhas de cards caberem */
@media (max-height: 820px) and (min-width: 521px) {
	.sw-nov__hero { padding: 24px 32px 20px; }
	.sw-nov__logo { width: 84px; height: 84px; margin-bottom: 10px; }
	.sw-nov__logo img { left: 9px; top: 12px; width: 66px; }
	.sw-nov__titulo { margin: 8px 0 4px; }
	.sw-nov__pre { font-size: 28px; }
	.sw-nov__marca { font-size: 50px; }
	.sw-nov__sub { margin: 4px 0 12px; font-size: 17px; }
	.sw-nov__corpo { padding-top: 16px; }
	.sw-nov__card { padding: 14px 14px 12px; }
	.sw-nov__card-icone { width: 36px; height: 36px; margin-bottom: 8px; font-size: 17px; }
	.sw-nov__card p { font-size: 12px; line-height: 1.45; }
}

/* quem pediu menos animação vê tudo parado e já no lugar */
@media (prefers-reduced-motion: reduce) {
	.sw-nov *, .sw-nov *::before, .sw-nov *::after { animation: none !important; transition: none !important; }
	.sw-nov__logo::before, .sw-nov__logo img, .sw-nov__selo, .sw-nov__pre, .sw-nov__marca, .sw-nov__pilulas span, .sw-nov__card { opacity: 1; transform: none; translate: none; }
	.sw-nov__logo-halo { display: none; }
	.sw-nov__janela { transition: none; }
}