/* -----------------------------------------------------------------------------
   Regras partilhadas que faltavam na exportacao do cPanel.
   -----------------------------------------------------------------------------

   O template original servia estas classes numa folha GLOBAL. Essa folha nunca
   veio na exportacao, e o resultado foi que ~90 paginas ficaram com 13% a 17%
   das suas classes sem regra nenhuma -- banners sem posicionamento, precos sem
   estilo, setas e caixas por formatar.

   Nao e um problema por pagina: 909 das 1769 ocorrencias de classes sem regra
   vinham de apenas 20 classes, cada uma repetida em 10 a 73 paginas. Por isso a
   correccao e um ficheiro so, carregado em todas as paginas, e nao a mesma regra
   copiada 73 vezes.

   Porque nao dentro de main-style.css: manter estas regras separadas mostra de
   onde vieram e permite retira-las de uma vez se um dia se refizer o desenho.
   E carregada logo a seguir a main-style.css e ANTES da folha da propria pagina,
   para que qualquer pagina possa continuar a mandar sobre o que aqui esta.

   Ligada em includes/header.php, no bloco que monta $wv_folhas.
   ----------------------------------------------------------------------------- */

/* Font Awesome, vendorizado em /assets/vendor/fontawesome/.
   Entra por @import daqui e nao por <link> porque o header.php so liga folhas
   que estejam em /assets/css/, e esta e uma biblioteca de terceiros que nao
   pertence la. O @import tem de vir antes de qualquer regra -- comentarios nao
   contam -- por isso fica aqui em cima.
   O endereco nao leva ?v= como as outras: e uma biblioteca fixa numa versao,
   que so muda se alguem a trocar de proposito, e nesse caso muda-se o caminho. */
@import url("/assets/vendor/fontawesome/all.css");

/* ============================================================================
   1. Trazido da folha global da origem.
   ============================================================================ */

/* --- uk-main-v1121.css --- */

.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



.sywhp-mn-cntnr {
	padding:30px 10px;
	position:relative;
	z-index:5;
}


.faqprim-mnbx .faqprim-qa-wrapr:last-child {
	margin-bottom:0;
}

.plntbl-pric-num-wght500 {
	font-weight:500;
}

.kl_price_discounted span {
	font-size:80%;
	font-weight:400;
}

.milnl-tag {
	position:absolute;
}

.milnl-tag:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
}

.milnl-tag-one {
	top:-2px;
	left:-2px;
	width:100px;
}

.milnl-tag-one div {
	width:100%;
	height:0;
	padding-top:88%;
	background:url('/assets/vendor/img-assets/tags/tag-popular-red.png')no-repeat;
	background-size:100%;
}

@media screen and (max-width:1250px) {
	.sywhp-mn-cntnr {
		padding:60px 10px;
	}
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:950px) {

	.sywhp-mn-cntnr {
		padding:50px 10px;
	}
}

._gt3k-r3n .kl_price_duration {
	font-size:16px;
	color:#102747;
}

._gt3k-r3n .kl_price_discounted {
	font-size:120%;
	font-weight:500;
}

@media(max-width:1200px) {
	._gt3k-r3n .kl_price_discounted {
		font-size:150%;
	}
}

/* --- uk-main-style-old.css --- */

.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



.sywhp-mn-cntnr {
	padding:30px 10px;
	position:relative;
	z-index:5;
}


.faqprim-mnbx .faqprim-qa-wrapr:last-child {
	margin-bottom:0;
}

.plntbl-pric-num-wght500 {
	font-weight:500;
}

.kl_price_discounted span {
	font: inherit;
}

.milnl-tag {
	position:absolute;
}

.milnl-tag:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
}

.milnl-tag-one {
	top:-2px;
	left:-2px;
	width:100px;
}

.milnl-tag-one div {
	width:100%;
	height:0;
	padding-top:88%;
	background:url('/assets/vendor/img-assets/tags/tag-popular-red.png')no-repeat;
	background-size:100%;
}

/* --- uk-responsive.css --- */

@media screen and (max-width:1250px) {
	.sywhp-mn-cntnr {
		padding:60px 10px;
	}
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:950px) {

	.sywhp-mn-cntnr {
		padding:50px 10px;
	}
}

/* --- uk-main-common-style.css --- */

.pb-12 {
	padding-bottom:12px;
}

@media(max-width:1024px) {
	.pb-12 {
		padding-bottom:8px;
	}
}

.re-banner .re-row {
	align-items:center;
}

.re-container {
	margin:0 auto;
	max-width:1450px;
	padding:0 20px;
	flex:1;
}

.re-banner .re-container {
	max-width:1240px;
}

.re-row {
	display:flex;
	flex-wrap:wrap;
}

.re-col-6 {
	width:50%;
	padding:0 8px;
}

.re-col-8 {
	width:60%;
}

.re-ban-btns {
	margin-top:60px;
}

.re-ban-btn-1 {
	text-decoration:none;
	font-weight:500;
	font-size:20px;
	color:#0f2494;
	background-color:#1dffff;
	padding:19px 60px;
	border-radius:10px;
	position:relative;
	display:inline-block;
	transition:all .3s ease-in-out;
	cursor:pointer;
}

.re-ban-btn-1:hover {
	box-shadow:0 60px 15px rgba(20,119,96,.3) inset;
	transform:translate(0,-4px);
}

.re-ban-btn-2 {
	font-weight:500;
	font-size:17px;
	text-decoration:none;
	color:#fff;
	border:2px solid #fff;
	border-radius:10px;
	position:relative;
	padding:17px 50px;
	display:inline-block;
	transition:all .3s ease-in-out;
}

.re-ban-btn-2:hover {
	transform:translate(0,-4px);
}

.re-ban-text-posiiton {
	padding-top:15px;
	text-align:center;
}

.p-0 {
	padding:0;
}

.re-ban-guarantee-pl {
	font-size:15px;
	font-weight:300;
}

@media(max-width:1250px) {
	.re-ban-btn-1 {
		padding:18px 53px;
	}

	.re-ban-btn-2 {
		padding:16px 30px;
	}
}

@media(max-width:1050px) {
	.re-ban-btn-1 {
		padding:15px 50px;
	}

	.re-ban-btn-1:before {
		width:16px;
		height:12px;
		right:32px;
	}

	.re-ban-btn-2 {
		padding:13px 30px;
	}

	.re-ban-btn-2:before {
		width:16px;
		height:16px;
		left:20px;
	}
}

@media(max-width:950px) {
	.re-ban-btns {
		margin-top:45px;
	}
}

@media(max-width:850px) {
	.re-ban-btn-1 {
		padding:15px 50px;
	}

	.re-ban-btn-1:before {
		width:14px;
		height:12px;
		right:24px;
	}

	.re-ban-btn-2 {
		padding:13px 26px;
	}

	.re-ban-btn-2:before {
		width:13px;
		height:13px;
		left:12px;
		top:40%;
	}
}

@media(max-width:768px) {
	.re-col-6 {
		width:100%;
	}

	.re-container {
		max-width:720px;
	}

	.re-ban-btns {
		margin-top:25px;
	}
}

@media(max-width:600px) {
	.chat-btn-disnon {
		display:none;
	}

	.re-ban-btn-1:before {
		right:48px;
	}

	.re-container {
		text-align:center;
	}
}

@media(max-width:450px) {
	.re-ban-btn-2 {
		padding:12px 10px 12px 28px;
		font-size:12px;
	}
}

@media(min-width:1600px) {
	.re-banner .re-container {
		max-width:1450px;
	}
}

.re-row {
	display:flex;
	flex-wrap:wrap;
}

@media(max-width:767px) {
	.re-col-6 {
		width:100%;
	}
}

._mo {
	color:#5c5f67;
}




/* --- main-common-style2.css --- */

.wv-center {
	justify-content:center;
}

.pb-12 {
	padding-bottom:12px;
}

@media(max-width:1024px) {
	.pb-12 {
		padding-bottom:8px;
	}
}

.p-0 {
	padding:0!important;
}

.re-banner .re-row {
	align-items:center;
}

.re-container {
	margin:0 auto;
	max-width:1450px;
	padding:0 20px;
	flex:1;
}

.re-banner .re-container {
	max-width:1240px;
}

.re-row {
	display:flex;
	flex-wrap:wrap;
}

.re-col-6 {
	width:50%;
	padding:0 8px;
}

.re-col-8 {
	width:60%;
}

.re-ban-btns {
	margin-top:60px;
}

.re-ban-btn-1 {
	text-decoration:none;
	font-weight:500;
	font-size:20px;
	color:#0f2494;
	background-color:#1dffff;
	padding:19px 60px;
	border-radius:10px;
	position:relative;
	display:inline-block;
	transition:all .3s ease-in-out;
	cursor:pointer;
}

.re-ban-btn-1:hover {
	transform:translate(0,-4px);
}

.re-ban-btn-2 {
	font-weight:500;
	font-size:17px;
	text-decoration:none;
	color:#fff;
	border:2px solid #fff;
	border-radius:10px;
	position:relative;
	padding:17px 50px;
	display:inline-block;
	transition:all .3s ease-in-out;
}

.re-ban-btn-2:hover {
	transform:translate(0,-4px);
}

.re-ban-text-posiiton {
	padding-top:15px;
	text-align:center;
}

.p-0 {
	padding:0;
}

.re-ban-guarantee-pl {
	font-size:15px;
	font-weight:300;
}

@media(max-width:1250px) {
	.re-ban-btn-1 {
		padding:18px 53px;
	}

	.re-ban-btn-2 {
		padding:16px 30px;
	}
}

@media(max-width:1050px) {
	.re-ban-btn-1 {
		padding:15px 50px;
	}

	.re-ban-btn-1:before {
		width:16px;
		height:12px;
		right:32px;
	}

	.re-ban-btn-2 {
		padding:13px 30px;
	}

	.re-ban-btn-2:before {
		width:16px;
		height:16px;
		left:20px;
	}
}

@media(max-width:950px) {
	.re-ban-btns {
		margin-top:45px;
	}
}

@media(max-width:850px) {
	.re-ban-btn-1 {
		padding:15px 50px;
	}

	.re-ban-btn-1:before {
		width:14px;
		height:12px;
		right:24px;
	}

	.re-ban-btn-2 {
		padding:13px 26px;
	}

	.re-ban-btn-2:before {
		width:13px;
		height:13px;
		left:12px;
		top:40%;
	}
}

@media(max-width:768px) {
	.re-col-6 {
		width:100%;
	}

	.re-container {
		max-width:720px;
	}

	.re-ban-btns {
		margin-top:25px;
	}
}

@media(max-width:600px) {
	.chat-btn-disnon {
		margin-top: 20px;
	}

	.re-ban-btn-1:before {
		right:48px;
	}

	.re-container {
		text-align:center;
	}
}

@media(max-width:450px) {
	.re-ban-btn-2 {
		padding:12px 10px 12px 28px;
		font-size:12px;
	}
}

@media(min-width:1600px) {
	.re-banner .re-container {
		max-width:1450px;
	}
}

.re-row {
	display:flex;
	flex-wrap:wrap;
}

@media(max-width:767px) {
	.re-col-6 {
		width:100%;
	}
}

._mo {
	color:#5c5f67;
}




.plan-txt-b {
	font-weight:var(--fw-extra-bold);
}

.plan_cross .plan-txt {
	color:#9baab8!important;
}

.plan-subt-list>span {
	display:inline-block;
	padding-bottom:4px;
}

@media(min-width:1100px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:1px;
	}
}

@media(min-width:1100px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:2px;
	}
}

/* --- uk-assets-main-common-style.css --- */

.p-0 {
	padding:0!important;
}

.plan-txt-b {
	font-weight:var(--fw-extra-bold);
}

.plan_cross .plan-txt {
	color:#9baab8!important;
}

.up_mo {
	font-size:16px;
	transform:translate(0,-4px);
	font-weight:var(--fw-medium);
}

@media (max-width:1250px) {
	.up_mo {
		font-size:14px;
	}
}

.plan-subt-list>span {
	display:inline-block;
	padding-bottom:4px;
}

@media(max-width:600px) {
	.plan-subt-list {
		display:none;
	}
}

@media(min-width:1100px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:2px;
	}
}

/* --- main-common-style.css --- */

.p-0 {
	padding:0!important;
}

.plan-txt-b {
	font-weight:var(--fw-extra-bold);
}

.plan_cross .plan-txt {
	color:#9baab8!important;
}

.plan-subt-list>span {
	display:inline-block;
	padding-bottom:4px;
}

@media(min-width:1100px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:1px;
	}
}

@media (max-width: 600px) {
	.plan-subt-list {
		display: none;
	}
}

@media(min-width:1100px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:2px;
	}
}

@media (max-width: 600px) {
	.plan-subt-list {
		display: none;
	}
}

/* --- uk-style.css --- */

.p-0 {
	padding:0!important;
}

.plan-txt-b {
	font-weight:var(--fw-extra-bold);
}

.plan_cross .plan-txt {
	color:#9baab8!important;
}

.plan-subt-list>span {
	display:inline-block;
	padding-bottom:4px;
}

@media(min-width:1200px) {
	.mvh-plan-ttl-box-active .up_mo {
		font-size:14px;
		padding-top:1px;
	}
}

@media (max-width: 600px) {
	.plan-subt-list {
		display: none;
	}
}

/* ============================================================================
   2. Copiado de outra folha DESTE repositorio.

   Estas classes existiam localmente, mas dentro da folha de uma pagina que as
   outras 10 a 72 paginas nunca carregam. Nao foram inventadas nem alteradas:
   sao as regras que ja ca estavam, movidas para onde toda a gente as ve. A
   folha de origem de cada bloco vai indicada por cima dele.

   Como este ficheiro e carregado ANTES da folha de cada pagina, a pagina que
   dona da regra continua a poder manda-la abaixo sem conflito.
   ============================================================================ */

/* de assets/css/cheap-cloud-hosting.css */

.wh-wbtn span {
	font-size: 18px;
	padding-left: 8px;
	transition: all .2s ease-in-out;
	display: inline-block;
}

.wh-wbtn:hover span {
	transform: translate(4px, 0);
}

.wh-wbtn {
	color: #fb0;
	font-size: 16px;
}

.wh-wbtn span {
	font-size: 18px;
	padding-left: 8px;
	transition: all .2s ease-in-out;
	display: inline-block;
}

.wh-wbtn:hover {
	color: #ffca37;
}

.wh-wbtn:hover span {
	transform: translate(4px, 0);
}

.wh-best-content {
	max-width: 489px;
}

@media(max-width:768px) {
	.cc_order2 {
		order: 2;
	}

	.cc-simple-img {
		padding-top: 20px;
	}
}

@media(max-width:768px) {
	.wh-best-row2 .wh-best-content {
		margin: 0;
		margin: auto;
	}

	.wh-best-content {
		margin: auto;
	}
}

/* de assets/css/jetpack-ai-assistant.css */


.je-feachers .ss-reasons {
	position: relative;
	padding-bottom: 65px;
}

.je-feachers .ss-reasons:before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 300px;
	background: #f1f7ff;
}

/* de assets/css/cloud-vps.css */

.wv-features .wv-h2 {
	margin: auto;
}


.wv-features .wv-container {
	border-radius: 35px;
	background: #fff;
	margin-top: -60px;
	margin-bottom: -60px;
	position: relative;
	z-index: 1;
}

@media(max-width:1200px) {
	.wv-features .wv-container {
		margin-top: 0;
	}
}

/* de assets/css/forex-vps.css */

@media(max-width:768px) {
	.order-1 {
		order: 1;
	}

	.order-2 {
		order: 2;
	}
}

/* de assets/css/ai-website-builder.css */


@media(max-width:768px) {
	.wh-best-img {
		padding-top: 20px;
	}
}

@media(max-width:991px) {
	.uk-services-col2 {
		order: 5;
		width: 100%;
	}
}

/* de assets/css/hosting.css */

.pp-steps-text {
	font-size: 16px;
	font-weight: 500;
	color: #3b3b55;
	border-bottom: 2px solid #fb0;
}

/* de assets/css/whmcs-reseller.css */

.ultrn-mncol1 {
	background-image: linear-gradient(#dbf4ff, #fff);
}

.ultrn-mncol2 {
	background-image: linear-gradient(#d1e4ff, #fff);
}

/* O nome do plano herda color:#fff de .ultrn-mnttl (main-style.css:2167), que
   servia quando o cartao era escuro: a mesma coluna leva .ultrn-col1, com
   background:#0f0a50. Os gradientes aqui em cima sao background-IMAGE, e a
   imagem pinta por cima da cor -- o cartao fica claro e o titulo branco cai
   para 1.14:1 contra #dbf4ff. Fica ilegivel em 255 paginas.

   Nao se resolve tirando o gradiente: o cartao claro e o desenho do template,
   e a folha global que faltou na exportacao trazia o titulo escuro com ele.
   Prova-o o unico caso que sobreviveu, .uk-pln-col4 .ultrn-mnttl{color:#091437},
   que continua em ~40 folhas de pagina. E esse valor que se repoe.

   As colunas 3 e 4 so existem em whmcs-reseller.php, cuja folha propria escolhe
   #395571 para o titulo. Entram aqui na mesma: sem elas, esta regra -- mais
   especifica do que o .ultrn-mnttl simples dessa folha -- so ganhava a primeira
   coluna, e a pagina ficava com tres planos lado a lado em dois azuis
   diferentes. Melhor as quatro iguais.

   Nao apanha os tres cartoes escuros de reseller-hosting.php: esses levam
   .ultrn-mncol sem numero, nao apanham gradiente nenhum, e o branco ali esta
   certo. */

.ultrn-mncol1 .ultrn-mnttl,
.ultrn-mncol2 .ultrn-mnttl,
.ultrn-mncol3 .ultrn-mnttl,
.ultrn-mncol4 .ultrn-mnttl {
	color: #091437;
}

/* de assets/css/cheap-vps-hosting.css */

.vp-powerful-img:hover {
	border-color: #928aff;
}

.vp-powerful-img {
	border: 1px solid #48428a;
	text-align: center;
	height: 100%;
	display: flex;
	border-radius: 10px;
	align-items: center;
	transition: all .3s ease-in-out;
	justify-content: center;
}

.vp-powerful-img-box {
	display: none;
	max-width: 580px;
}

.vp-powerful-img-box.vp-acco-activate {
	display: block;
}

@media(max-width:1600px) {
	.vp-powerful-img-box {
		max-width: 480px;
	}
}

@media(max-width:768px) {
	.vp-powerful-img {
		display: none;
	}

	.vp-maxed-img {
		padding-top: 20px;
	}
}

/* de assets/css/cheap-wordpress-hosting.css */

/* ============================================================================
   NAO PONHAS AQUI: classes com definicoes diferentes conforme a pagina.
   ============================================================================
   Seis classes foram retiradas desta folha depois de terem estado ca por
   engano: map-dc-location, faqprim-mnbx, btn-blu1-clr, wh-best-toggle-box,
   hero-bg-clr e pp-alway-h3.

   O caso que deu o alarme foi .hero-bg-clr. Estava definida em tres folhas de
   pagina, com TRES fundos diferentes: #19279b, #0027AF e um gradiente roxo.
   Trazer uma delas para aqui pintou de azul o cabecalho de 68 paginas que
   antes nao tinham fundo nenhum, e a escolha de qual das tres foi arbitraria.
   Nao ha valor global correcto: e uma decisao de desenho, pagina a pagina.

   Criterio para o futuro: so entra aqui uma classe que tenha UMA definicao,
   igual em toda a parte. Se duas folhas discordam, a classe pertence as
   folhas, nao a esta.
   ============================================================================ */

/* ============================================================================
   LOGOTIPO DO RODAPE EM TEXTO (.wv-logo-rodape)
   ============================================================================
   O rodape passou a mostrar "Weblink" seguido da extensao do pais servido
   (.pt / .ao / .co.mz), tal como o cabecalho. Antes era um <img> de um SVG
   unico -- e um SVG nao consegue mudar de pais, porque nao ve o PHP que o
   serve.

   A tipografia vem das classes que o cabecalho ja usa (wv-logo-texto e
   companhia, em assets/css/menu.css). Aqui fica so o que o contentor do
   rodape precisa: o .f6yt-ftr-logo do template tinha max-width:157px, medida
   a pensar na largura da imagem, e com texto essa medida partia o nome em
   duas linhas.
   ============================================================================ */
.wv-logo-rodape {
	max-width: none;
	line-height: 1;
}

/* A EXTENSAO PRECISA DE MAIS OPACIDADE AQUI DO QUE NO CABECALHO.

   No cabecalho a extensao esta a 12,5%, que foi o valor escolhido a olho
   sobre o banner do topo. O rodape tem fundo #0f0d2c, bastante mais escuro, e
   ai os mesmos 12,5% dao branco a 12,5% sobre quase preto: medido, um
   contraste de 1,39:1 -- o texto existe no HTML e nao se le no ecra. Foi
   exactamente o que aconteceu: o dono do site disse que nao via a extensao no
   rodape, e nao via mesmo.

   45% da 4,49:1, que passa o minimo AA (4,5:1 arredonda) para qualquer
   tamanho de texto, e mantem a extensao visivelmente secundaria em relacao ao
   "Weblink" a branco cheio. Nao se muda o valor do cabecalho: la o fundo e
   outro e o efeito ja era o pretendido. */
.wv-logo-rodape .wv-logo-tld {
	opacity: .45;
}


/* ============================================================================
   CONTACTO NO RODAPE (.wv-ftr-contacto)
   ============================================================================
   O telefone e o email de cada pais existiam desde sempre em
   includes/paises.php e ate mudavam com o dominio -- mas so chegavam aos
   dados estruturados do fim da pagina. O visitante nao os via em lado nenhum,
   nem na propria pagina de contacto.

   Um por linha, e nao separados por virgulas: sao para tocar no telemovel, e
   dois alvos colados sao dois enganos a espera de acontecer.
   ============================================================================ */
.wv-ftr-contacto-lnk {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 2px 0;
}

.wv-ftr-contacto-lnk:hover,
.wv-ftr-contacto-lnk:focus-visible {
	text-decoration: underline;
}


/* ============================================================================
   MEIOS DE PAGAMENTO NO RODAPE (.wv-ftr-pagamentos)
   ============================================================================
   Texto e nao icones, de proposito: nao ha ficheiros de logotipo destes meios
   no projecto, e um icone errado ou desactualizado diz menos do que o nome
   escrito. As "pastilhas" dao-lhes o ar de selo sem precisarem de imagem.
   ============================================================================ */
.wv-ftr-pagamentos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 13px;
}

.wv-ftr-pagamentos-ttl {
	opacity: .7;
}

.wv-ftr-pagamento {
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 5px;
	padding: 4px 10px;
	white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Seccao de depoimentos (.uk-client-white), em 130 paginas
   -----------------------------------------------------------------------------
   Tres defeitos, todos resoluveis aqui sem tocar nas 130 paginas -- e por isso
   e que isto vive numa folha e nao no markup.

   1. METADE DO CABECALHO ESTAVA VAZIA. A linha do titulo sao duas .wv-col-6 e a
      segunda nao tem nada la dentro: 593px de nada, em todas as 130 (confirmado
      por varrimento). O :empty do CSS nao serve, porque o elemento tem espacos
      e mudancas de linha; vai por posicao.

   2. A GRELHA SAIA AOS SOLAVANCOS. Os cartoes dimensionavam-se ao conteudo --
      medi de 351px a 858px na mesma pagina -- e as linhas ficavam com 1, depois
      1, depois 2... Passa a grelha de colunas iguais, que enche as linhas por
      igual e nao precisa de saber quantas citacoes a pagina tem: sao 9 conjuntos
      diferentes conforme a familia de paginas.

   3. O DESTAQUE NAO SE VIA. O <b> de cada citacao herdou a cor do texto normal
      quando o fundo da seccao passou de escuro a claro, portanto so mudava o
      peso. Ganha cor propria.

   A classe chama-se "slider3" mas nunca houve JavaScript de carrossel nenhum,
   nem em assets/js/ nem em linha -- e sempre foi uma lista estatica. Fica-o. */

/* 1. A coluna vazia */
.uk-client-box .wv-row.pb-90 > .wv-col-6 + .wv-col-6 {
	display: none;
}

/* O titulo deixa de ficar espremido a meia largura, mas nao se estica de ponta
   a ponta: uma linha de texto larga demais custa a ler. Centrado, porque com a
   coluna vizinha escondida ficava encostado a esquerda com um vazio enorme a
   direita -- lia-se como se faltasse la alguma coisa. As margens automaticas
   centram a caixa; o text-align centra o que esta dentro dela. */
.uk-client-box .wv-row.pb-90 > .wv-col-6:first-child {
	width: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* 2. A grelha */
.uk-client-slider3 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* align-items: stretch e nao o center que o .mw-row-align do markup poe:
   com o center, o cartao fica com a altura do seu texto e os vizinhos da
   mesma linha ficam a boiar, com folgas diferentes por cima e por baixo.
   Medido: numa linha de quatro, dois cartoes a 86px e dois a 110px. */
.uk-client-slider3 li {
	padding: 0;
	display: flex;
	align-items: stretch;
}

/* O cartao enche a celula, para as alturas baterem certo em cada linha. */
.uk-client-slider3 li div {
	width: 100%;
	padding: 18px 20px;
	border-radius: 10px;
	border: 1px solid rgba(59, 59, 85, .1);
	font-size: 16px;
	line-height: 1.5;
	transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

/* Sobe um pouco ao passar o rato, como os outros cartoes do site. Sem sombra
   pesada: sao onze ao mesmo tempo no ecra. */
.uk-client-slider3 li div:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(10, 8, 35, .08);
}

/* 3. O destaque dentro da citacao.
   O seletor leva o .uk-client-white a cabeca para bater a regra
   ".uk-client-white .uk-client-slider3 li b" do main-style.css, que poe a cor
   do texto normal e ganhava por especificidade. */
.uk-client-white .uk-client-slider3 li b {
	color: #0f0a50;
}

/* O "Mais Avaliacoes" era texto colorido com 117px de alvo. Passa a ter forma
   de comando, com area de toque acima dos 44px que se recomendam para o dedo. */
.uk-client-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid currentColor;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.uk-client-btn:hover,
.uk-client-btn:focus-visible {
	background: #6f66dd;
	border-color: #6f66dd;
	color: #fff;
}

.uk-client-btn:focus-visible {
	outline: 2px solid #0435b2;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.uk-client-slider3 {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* -----------------------------------------------------------------------------
   Cabecalho dos cartoes de plano, e o rotulo que lhes fica por cima
   ----------------------------------------------------------------------------- */

/* O QUE ESTAVA MAL NO FUNDO DO NOME. Tres dos quatro cartoes tinham uma banda
   de cor no topo, vinda do gradiente da coluna: .ultrn-mncol1 abre em #dbf4ff,
   .ultrn-mncol2 em #d1e4ff. O quarto -- o destacado, .uk-pln-col4 -- nao tem
   gradiente nenhum: fica num lilas liso (#f6f5ff) de cima a baixo. Resultado:
   o cartao que devia sobressair era o unico sem cabecalho, e a fila lia-se
   como tres cartoes e um erro.

   Em vez de mais um gradiente, o nome passa a ter faixa PROPRIA. Assim nao
   depende do fundo do cartao -- serve os quatro, e serve tambem qualquer
   variante que apareca depois. */

.ultrn-container .ultrn-mnttl,
.ultrn-container-4col .ultrn-mnttl {
	margin: 0;
	padding: 16px 12px;
	background: rgba(255, 255, 255, .55);
	border-bottom: 1px solid rgba(9, 20, 55, .08);
	/* O mesmo raio do cartao (15px), e nao 10px: com 10px sobrava um arco do
	   gradiente da coluna a espreitar por fora de cada canto de cima. */
	border-radius: 15px 15px 0 0;
}

/* O CORPO DO CARTAO tinha border-radius nos QUATRO cantos e borda a toda a
   volta. Por baixo da faixa, isso desenhava uma segunda caixa: cantos
   arredondados e uma linha a atravessar logo abaixo do nome, como se a faixa
   fosse uma folha solta atras do cartao. Em cima passa a encostar -- sem raio e
   sem borda -- e as duas partes leem-se como uma so. */
.ultrn-container .ultrn-mnttl + .ultrn-vlu-Wrap,
.ultrn-container-4col .ultrn-mnttl + .ultrn-vlu-Wrap {
	border-top: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

/* O branco a 55% clareia a banda que o gradiente ja pinta, e da uma faixa
   visivel ao cartao que nao tem gradiente. Uma cor solida servia os tres
   primeiros e destoava no quarto. */

/* -----------------------------------------------------------------------------
   O rotulo "10x Mais Rapido"
   -----------------------------------------------------------------------------
   E position:absolute com top:-18px, centrado por left:50% e translate. A
   posicao esta certa -- o que faltava era impedi-lo de PARTIR EM DUAS LINHAS.

   Sem nowrap, a largura depende da fonte que o sistema acabar por usar: aqui
   media 161px e cabia numa linha; no ecra do dono partia em duas, e ao dobrar
   de altura descia sobre o nome do plano. Nao era um erro de posicionamento --
   era um erro de largura que se via como erro de posicionamento.

   NAO se mexe no top. Tentei desce-lo de -18px para -14px e a regra ficava
   morta: o home.css declara o mesmo seletor e carrega DEPOIS desta folha,
   portanto ganha por ordem. E nao e preciso -- medido com o nowrap posto, o
   rotulo fica a 7px do texto do nome, que chega. Uma regra que nao produz
   efeito e pior do que nenhuma: quem a ler amanha julga que faz alguma coisa. */

/* z-index 6, acima do 5 que o .ultrn-mnttl leva do main-style.css:2167.
   Enquanto o nome nao tinha fundo, isto nao importava -- nao havia nada para
   tapar o rotulo. Ao dar-lhe faixa, a faixa passou a pintar por cima do
   amarelo e cortava-lhe a metade de baixo. Foi efeito da alteracao acima, e
   resolve-se aqui e nao mexendo no z-index do nome, que outros blocos usam. */
.uk-pln-faster {
	white-space: nowrap;
	z-index: 6;
}

/* -----------------------------------------------------------------------------
   Deslizar ate as ancoras, em vez de saltar
   -----------------------------------------------------------------------------
   O botao da pagina de erro leva a #plansToJmp, e o salto instantaneo deixa o
   visitante sem perceber que a pagina se moveu -- pior ainda numa pagina de
   erro, onde ele ja esta desorientado. Com o deslize, ve o caminho que fez.

   Vale para todas as ancoras do site, que e o comportamento que se espera hoje.

   O prefers-reduced-motion nao e um detalhe: para quem tem enxaqueca vestibular
   ou perturbacoes do equilibrio, o deslize de uma pagina inteira provoca
   sintomas fisicos. Quem pediu ao sistema para reduzir movimento volta a ter o
   salto instantaneo. */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}