/* ==========================================================================
   Design system do site institucional — Lojas Virtuais BR
   Tokens e componentes reaproveitaveis, escritos sobre o Bootstrap 3 que ja e
   carregado pelo site. Sem build, sem dependencia nova.
   Carregado em todas as paginas por head.php, antes dos css especificos.
   ========================================================================== */

:root {
	/* ---- cores da marca ---- */
	--lv-verde: #198A4E;
	/* o verde da marca fica em 4,39:1 com branco; para texto ou icone sobre
	   fundo verde (botoes, pilulas) usamos esta variante, que passa em 5,1:1 */
	--lv-verde-acessivel: #177E47;
	--lv-verde-escuro: #026932;
	--lv-verde-claro: #E8F4ED;
	--lv-amarelo: #FAD34E;
	--lv-amarelo-escuro: #D4AA1A;

	/* ---- neutros ---- */
	--lv-texto: #33393f;
	--lv-texto-suave: #5c646b;
	--lv-cinza-texto: #4a4a4a;
	--lv-cinza-borda: #d9dee3;
	--lv-fundo-suave: #f6f8f9;
	--lv-erro: #c0392b;

	/* ---- escala ---- */
	--lv-raio: 10px;
	--lv-raio-sm: 6px;
	--lv-sombra: 0 6px 20px rgba(0, 0, 0, .07);
	--lv-sombra-forte: 0 12px 34px rgba(0, 0, 0, .13);
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */
.lv-btn {
	display: inline-block;
	border: 2px solid transparent;
	border-radius: var(--lv-raio-sm);
	font-weight: 700;
	padding: 13px 28px;
	font-size: 16px;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.lv-btn:hover,
.lv-btn:focus {
	text-decoration: none;
	transform: translateY(-1px);
}

.lv-btn-primario {
	background: var(--lv-verde-acessivel);
	border-color: var(--lv-verde-acessivel);
	color: #fff;
}

.lv-btn-primario:hover,
.lv-btn-primario:focus {
	background: var(--lv-verde-escuro);
	border-color: var(--lv-verde-escuro);
	color: #fff;
}

/* CTA de destaque sobre o fundo verde do hero */
.lv-btn-destaque {
	background: var(--lv-amarelo);
	border-color: var(--lv-amarelo);
	color: #4a3800;
}

.lv-btn-destaque:hover,
.lv-btn-destaque:focus {
	background: var(--lv-amarelo-escuro);
	border-color: var(--lv-amarelo-escuro);
	color: #3a2c00;
}

.lv-btn-contorno-claro {
	background: transparent;
	border-color: rgba(255, 255, 255, .75);
	color: #fff;
}

.lv-btn-contorno-claro:hover,
.lv-btn-contorno-claro:focus {
	background: #fff;
	border-color: #fff;
	color: var(--lv-verde-escuro);
}

@media (prefers-reduced-motion: reduce) {
	.lv-btn:hover,
	.lv-btn:focus { transform: none; }
}

/* --------------------------------------------------------------------------
   Secoes e titulos
   -------------------------------------------------------------------------- */
.lv-secao {
	padding: 54px 0;
}

.lv-secao-suave {
	background: var(--lv-fundo-suave);
}

.lv-secao-cabecalho {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 32px;
}

.lv-secao-cabecalho h2 {
	font-size: 32px;
	font-weight: 700;
	color: var(--lv-verde-escuro);
	margin: 0 0 12px;
	line-height: 1.25;
}

.lv-secao-cabecalho p {
	font-size: 16px;
	color: var(--lv-texto-suave);
	margin: 0;
}

.lv-secao-cabecalho .lv-risco {
	width: 64px;
	height: 4px;
	border-radius: 2px;
	background: var(--lv-amarelo);
	margin: 16px auto 0;
}

/* --------------------------------------------------------------------------
   Cartoes
   -------------------------------------------------------------------------- */
.lv-card {
	background: #fff;
	border: 1px solid var(--lv-cinza-borda);
	border-radius: var(--lv-raio);
	padding: 26px 24px;
	/* sem height:100% aqui: dentro de .lv-grade (flex) o height definido
	   cancela o stretch e os cartoes da mesma linha ficam desalinhados. */
}

.lv-grade {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
}

.lv-grade > * {
	flex: 1 1 260px;
}

/* --------------------------------------------------------------------------
   Faixa de confianca (numeros e garantias)
   -------------------------------------------------------------------------- */
.lv-confianca-faixa {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	font-size: 14px;
}

.lv-confianca-faixa li i {
	margin-right: 7px;
}

/* --------------------------------------------------------------------------
   FAQ (accordion nativo, sem javascript)
   -------------------------------------------------------------------------- */
.lv-faq {
	max-width: 820px;
	margin: 0 auto;
}

.lv-faq details {
	background: #fff;
	border: 1px solid var(--lv-cinza-borda);
	border-radius: var(--lv-raio-sm);
	margin-bottom: 12px;
}

.lv-faq summary {
	cursor: pointer;
	padding: 16px 46px 16px 18px;
	font-weight: 600;
	color: var(--lv-verde-escuro);
	position: relative;
	list-style: none;
	font-size: 16px;
}

.lv-faq summary::-webkit-details-marker {
	display: none;
}

.lv-faq summary:after {
	content: "\f107"; /* fa-angle-down */
	font-family: FontAwesome;
	position: absolute;
	right: 18px;
	top: 15px;
	font-size: 20px;
	color: var(--lv-verde);
	transition: transform .2s ease;
}

.lv-faq details[open] summary:after {
	transform: rotate(180deg);
}

.lv-faq summary:focus-visible {
	outline: 3px solid rgba(25, 138, 78, .35);
	outline-offset: 2px;
}

.lv-faq .lv-faq-corpo {
	padding: 0 18px 18px;
	color: var(--lv-texto-suave);
	font-size: 15px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.lv-secao {
		padding: 38px 0;
	}

	.lv-secao-cabecalho h2 {
		font-size: 25px;
	}

	.lv-secao-cabecalho {
		margin-bottom: 24px;
	}

	.lv-cta-final h2 {
		font-size: 23px;
	}

	.lv-plano {
		flex-basis: 100%;
	}
}

/* --------------------------------------------------------------------------
   Planos (cartoes de plano e CTA final) — usados na home e em /planos
   -------------------------------------------------------------------------- */
/*
   Os dois cartoes precisam ter preco, itens e botao na mesma altura, mesmo com
   textos de tamanhos diferentes. Cada cartao ocupa as cinco linhas da grade da
   .lv-planos e repassa essas linhas para os proprios blocos (subgrid), entao a
   altura de cada faixa e a do maior conteudo entre os dois.
   Sem subgrid (navegador antigo) cai no empilhamento em coluna do @supports
   la embaixo, que e o comportamento anterior.
*/
.lv-planos {
	display: grid;
	/* o min() evita que os 330px estourem a tela em aparelhos de 320px */
	grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
	grid-template-rows: auto auto auto 1fr auto;
	gap: 24px;
	align-items: stretch;
	max-width: 940px;
	margin: 0 auto;
}

.lv-plano {
	grid-row: span 5;
	display: grid;
	grid-template-rows: subgrid;
	/* o subgrid herda o gap de 24px da .lv-planos e ele entrava entre as faixas
	   do cartao, deixando um vao extra so embaixo de cada bloco. o espacamento
	   interno fica por conta dos paddings das faixas. */
	row-gap: 0;
	background: #fff;
	border: 2px solid var(--lv-cinza-borda);
	border-radius: var(--lv-raio);
	padding: 22px 24px 20px;
	position: relative;
	transition: border-color .2s ease, box-shadow .2s ease;
}

@supports not (grid-template-rows: subgrid) {
	.lv-planos { display: flex; flex-wrap: wrap; }
	.lv-plano { flex: 1 1 330px; max-width: 100%; display: flex; flex-direction: column; }
	.lv-plano .lv-plano-itens { flex: 1 1 auto; }
}

/* faixas do cartao */
.lv-plano-cabecalho { padding-bottom: 14px; }

/* o h2/h3 herda margin-top do bootstrap e so empurra o titulo para baixo */
.lv-plano-cabecalho h2,
.lv-plano-cabecalho h3 { margin-top: 0; }

.lv-plano-periodos:not(:empty) { padding-bottom: 14px; }

/* a faixa do preco tem a altura do maior conteudo entre os dois cartoes; sem
   o centro o valor fica colado no topo quando o outro cartao e mais alto — e
   quando o periodo Mensal esconde a linha do "a vista". */
.lv-plano-valores {
	border-top: 1px solid var(--lv-cinza-borda);
	padding: 14px 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lv-plano-acao { padding-top: 0; }

/* item de grid nasce com min-width:auto e nao encolhe abaixo do conteudo;
   sem isto o seletor de periodicidade empurra a pagina para o lado. */
.lv-plano > * { min-width: 0; }

.lv-plano:hover {
	border-color: var(--lv-verde);
	box-shadow: var(--lv-sombra);
}

.lv-plano--destaque {
	border-color: var(--lv-verde);
	box-shadow: var(--lv-sombra);
}

.lv-plano-selo {
	position: absolute;
	top: -14px;
	left: 26px;
	background: var(--lv-amarelo);
	color: #4a3800;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 5px 12px;
	border-radius: 12px;
}

.lv-plano h3 {
	font-size: 22px;
	font-weight: 700;
	color: var(--lv-verde-escuro);
	margin: 0 0 4px;
}

.lv-plano .lv-plano-linha {
	font-size: 14px;
	color: var(--lv-texto-suave);
	margin: 0;
}

.lv-plano-preco {
	margin-bottom: 4px;
	color: var(--lv-texto);
}

.lv-plano-preco strong {
	font-size: 36px;
	line-height: 1;
	color: var(--lv-texto);
}

.lv-plano-preco small {
	font-size: 15px;
	color: var(--lv-texto-suave);
}

.lv-plano-avista {
	font-size: 13px;
	color: var(--lv-texto-suave);
	min-height: 20px;
	margin: 0;
}

.lv-plano .lv-plano-itens {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
	border-top: 1px solid var(--lv-cinza-borda);
	padding-top: 14px;
}

/* preso a .lv-plano-itens: quando a regra era ".lv-plano ul li" ela tambem
   pegava os itens do seletor de periodicidade — com mais especificidade que
   ".lv-periodos li" —, o que enfiava 26px de recuo e um icone de check
   invisivel dentro de cada botao. */
.lv-plano-itens li {
	position: relative;
	padding: 0 0 9px 26px;
	font-size: 14.5px;
	color: var(--lv-texto-suave);
	line-height: 1.45;
}

.lv-plano-itens li:before {
	content: "\f058";
	font-family: FontAwesome;
	position: absolute;
	left: 0;
	top: 0;
	color: var(--lv-verde);
}

.lv-plano-itens li.lv-plano-nao:before {
	content: "\f057";
	color: #b6bec5;
}

.lv-plano .lv-btn {
	width: 100%;
}

/*
   Periodicidade do plano profissional.
   Eram quatro pilulas soltas que quebravam em duas linhas; agora e um seletor
   unico, com as quatro opcoes dividindo a largura por igual.
*/
.lv-periodos {
	list-style: none;
	padding: 3px;
	margin: 0;
	display: flex;
	border: 1px solid var(--lv-cinza-borda);
	border-radius: 17px;
	background: #fff;
}

.lv-periodos li {
	margin: 0;
	padding: 0;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
}

.lv-periodos li:before {
	display: none;
}

.lv-periodos li + li {
	border-left: 1px solid var(--lv-cinza-borda);
}

.lv-periodos li.active,
.lv-periodos li.active + li {
	border-left-color: transparent;
}

.lv-periodos button {
	flex: 1 1 auto;
	/* sem isto o botao nao encolhe abaixo do texto e o seletor
	   fica mais largo que o cartao no celular */
	min-width: 0;
	border: 0;
	background: transparent;
	font-size: 12.5px;
	line-height: 1.2;
	padding: 7px 4px;
	border-radius: 14px;
	color: #4a5158;
	/* coluna: o percentual vai para a linha de baixo. lado a lado o texto
	   nao cabia na largura do botao e vazava para fora do fundo verde. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.lv-periodos button:hover {
	color: var(--lv-verde-escuro);
}

.lv-periodos button:focus-visible {
	outline: 2px solid var(--lv-verde);
	outline-offset: 1px;
}

.lv-periodos li.active button {
	background: var(--lv-verde-escuro);
	color: #fff;
}

.lv-periodos .lv-off {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #7a6000;
	white-space: nowrap;
}

.lv-periodos li.active .lv-off {
	color: #FFE89A;
}

/* em cartao estreito so o texto diminui: as quatro opcoes seguem lado a lado */
@media (max-width: 480px) {
	.lv-periodos button {
		font-size: 11.5px;
		padding: 7px 2px;
	}

	.lv-periodos .lv-off {
		font-size: 10.5px;
	}
}

/* abaixo disto "Trimestral" nao cabe em um quarto da largura: duas por linha */
@media (max-width: 360px) {
	.lv-periodos {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 3px;
	}

	.lv-periodos li + li {
		border-left: 0;
	}

	.lv-periodos button {
		font-size: 12px;
		background: var(--lv-fundo-suave);
	}

	.lv-periodos li.active button {
		background: var(--lv-verde-escuro);
	}
}

.lv-planos-obs {
	text-align: center;
	font-size: 13px;
	color: var(--lv-texto-suave);
	margin-top: 22px;
}

.lv-planos-obs a {
	color: var(--lv-verde-escuro);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.lv-cta-final {
	background: var(--lv-verde-escuro);
	color: #fff;
	padding: 58px 0;
	text-align: center;
}

.lv-cta-final h2 {
	font-size: 30px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #fff;
}

.lv-cta-final p {
	font-size: 16px;
	color: rgba(255, 255, 255, .92);
	margin: 0 0 26px;
}

/* --------------------------------------------------------------------------
   Emenda entre a barra fixa e o hero
   A barra (.navbar.bg_img_green) e o hero da pagina desenham a MESMA imagem,
   cada um no seu proprio elemento. Com background-size:cover em alturas
   diferentes, cada um recorta a imagem de um jeito e aparecia um risco
   horizontal na divisa dos dois.
   Quando o hero verde ja cobre a area da barra (ele abre em padding-top de
   140px justamente para isso), a barra nao precisa pintar fundo nenhum
   enquanto esta no topo. Ao rolar, o .top-nav-collapse devolve o fundo.
   O :has garante que isso so vale nas paginas que tem bloco verde (em todas
   elas ele e o primeiro da pagina; conferido uma a uma):
   /loja-virtual-gratis (bg_img_green-two) e /verifica_loja continuam como
   estao. Navegador sem :has cai no comportamento antigo, sem quebrar nada.
   -------------------------------------------------------------------------- */
body:has(main .bg_img_green) .navbar.bg_img_green:not(.top-nav-collapse) {
	background: none;
	border-color: transparent;
	box-shadow: none;
}