/* Pagina publica do Websis.
   Nao usa o Metronic: quem ve esta tela ainda nao e usuario, e carregar o CSS
   do ERP inteiro para uma pagina so custa caro na primeira visita. Os tokens
   repetem os do produto de proposito — quem entra depois precisa reconhecer o
   mesmo sistema. Sem gradiente em lugar nenhum: profundidade aqui vem de
   sombra e regua, nao de degrade. */

:root {
	--tinta: #0D1420;
	--tinta-2: #151D2C;
	--tinta-3: #1E2838;
	--papel: #FFFFFF;
	--papel-2: #F7F9FC;
	--papel-3: #EFF3F8;
	--regua: #E1E7EF;
	--regua-2: #CFD7E3;
	--apagado: #64707F;
	--apagado-2: #93A0B1;
	--acao: #3B6FE0;
	--acao-claro: #7FA4F0;
	--acao-fundo: #EEF3FE;
	--ok: #1E8E5A;
	--atencao: #B7791F;
	--erro: #C4362B;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--sombra-1: 0 1px 2px rgba(13,20,32,.06), 0 2px 8px rgba(13,20,32,.04);
	--sombra-2: 0 2px 4px rgba(13,20,32,.06), 0 12px 32px rgba(13,20,32,.10);
	--sombra-3: 0 24px 70px rgba(0,0,0,.45);

	--curva: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--tinta);
	background: var(--papel);
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.limite { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Entrada suave. prefers-reduced-motion desliga tudo no fim do arquivo. */
@keyframes sobe {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
.anima { animation: sobe .7s var(--curva) both; }
.d1 { animation-delay: .06s } .d2 { animation-delay: .12s }
.d3 { animation-delay: .18s } .d4 { animation-delay: .24s }

/* ---------------- Topo ---------------- */

/* Barra clara de proposito: a logo do sistema e azul-marinho com o verde
   #97B924 e some sobre fundo escuro. Inverter para branco mataria o verde,
   que e a unica cor da marca. */
.topo {
	position: sticky; top: 0; z-index: 50;
	background: var(--papel);
	border-bottom: 1px solid var(--regua);
}

.topo__l { display: flex; align-items: center; justify-content: space-between; height: 72px; }

.marca { display: flex; align-items: center; }
.marca img { height: 34px; width: auto; display: block; }

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 11px 22px; border: 1px solid var(--acao); background: var(--acao);
	color: #fff; font-size: 14px; font-weight: 600; border-radius: 7px;
	transition: transform .18s var(--curva), box-shadow .18s var(--curva), background-color .18s var(--curva);
}
.btn:hover { background: #2F5BC4; border-color: #2F5BC4; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(59,111,224,.32); }
.btn:active { transform: none; }

.btn--fantasma { background: transparent; border-color: rgba(255,255,255,.22); color: #fff; }
.btn--fantasma:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); box-shadow: none; }

/* No topo claro o botao secundario precisa de contorno escuro. */
.topo .btn--fantasma { border-color: var(--regua-2); color: var(--tinta); }
.topo .btn--fantasma:hover { background: var(--papel-2); border-color: var(--apagado-2); }

/* ---------------- Abertura ---------------- */

.hero {
	position: relative;
	overflow: hidden;
}

/* A janela e mais larga que a coluna e vaza para fora da grade. O corte na
   borda da tela (overflow do .hero) e proposital: da a impressao de que o
   sistema continua para la, em vez de caber inteiro num cartao. */
.hero__txt { min-width: 0; }

.hero h1 {
	font-size: clamp(36px, 4vw, 54px); line-height: 1.07;
	letter-spacing: -.035em; font-weight: 700; margin: 0 0 26px; text-wrap: balance;
}
.hero h1 span { color: var(--acao-claro); }

.hero p { font-size: 20px; line-height: 1.55; color: #D2DAE5; max-width: 46ch; margin: 0 0 38px; }

.hero__acoes { display: flex; gap: 12px; flex-wrap: wrap; }

/* Trocar de tela pelo proprio menu da janela, e nao por botoes acima dela:
   e o gesto que a pessoa faria dentro do sistema. Radio mais label, sem
   JavaScript, navegavel pelo teclado. */
#ap1:checked ~ .app__lat label[for="ap1"],
#ap2:checked ~ .app__lat label[for="ap2"],
.app > input:focus-visible ~ .app__lat label[for="ap1"],
.app > input:focus-visible ~ .app__lat label[for="ap2"],
#ap1:checked ~ .app__quadros > :nth-child(1),
#ap2:checked ~ .app__quadros > :nth-child(2),
.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }

.bloco__ico {
	width: 52px; height: 52px; border-radius: 13px;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 18px;
	transition: transform .22s var(--curva);
}
.bloco:hover .bloco__ico { transform: translateY(-2px) rotate(-4deg); }
.bloco__ico--fiscal { background: var(--acao-fundo); color: var(--acao); }
.bloco__ico--estoque { background: #E9F6EF; color: var(--ok); }
.bloco__ico--financeiro { background: #FBF4E5; color: var(--atencao); }

.bloco h2 { font-size: 23px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 12px; }
.bloco p { font-size: 16.5px; line-height: 1.62; color: var(--apagado); margin: 0; }

/* ---------------- Modulos ---------------- */
/* A pagina cobria fiscal, estoque e financeiro em tres blocos; o sistema tem
   bem mais modulos e isso nao aparecia em lugar nenhum. Grade seca, sem icone:
   sao oito itens, e oito icones decorativos virariam ruido. */

.modulos {
	padding: 104px 0;
	background: var(--papel-2);
	border-top: 1px solid var(--regua);
	border-bottom: 1px solid var(--regua);
}

.modulos h2 {
	margin: 0 0 10px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.2;
	letter-spacing: -.025em;
	color: var(--tinta);
	text-wrap: balance;
}

.modulos__sub {
	margin: 0 0 44px;
	color: var(--apagado);
	font-size: 18px;
	max-width: 58ch;
}

.modulos__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 28px 40px;
}

.modulo h3 {
	margin: 0 0 8px;
	padding-top: 16px;
	border-top: 2px solid var(--acao);
	font-size: 17px;
	font-weight: 650;
	letter-spacing: -.01em;
	color: var(--tinta);
}

.modulo p {
	margin: 0;
	color: var(--apagado);
	font-size: 15.5px;
	line-height: 1.6;
}

@media (max-width: 860px) {
	.modulos { padding: 64px 0; }
	.modulos__sub { margin-bottom: 32px; }
}

/* ---------------- Fecho ---------------- */

.fecho { background: var(--tinta); color: #fff; padding: 76px 0; }
.fecho__l { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fecho h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
.fecho p { color: #A3AEBF; margin: 12px 0 0; font-size: 17px; }
.fecho__acoes { display: flex; gap: 12px; flex-wrap: wrap; }

.rodape { background: var(--tinta); border-top: 1px solid rgba(255,255,255,.07); padding: 26px 0; }
.rodape__l { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
.rodape p { margin: 0; font-size: 13.5px; color: #566276; }
.rodape nav { display: flex; gap: 24px; }
.rodape nav a { color: #A3AEBF; font-size: 13.5px; transition: color .2s var(--curva); }
.rodape nav a:hover { color: #fff; }

/* ---------------- Telas estreitas ---------------- */

@media (max-width: 1040px) {
	.hero__grade { grid-template-columns: 1fr; gap: 48px; }
	.tres { grid-template-columns: 1fr; gap: 40px; }
	.hero { padding-top: 72px; }
}

@media (max-width: 560px) {
	.limite { padding: 0 20px; }
	.fecho__l { flex-direction: column; align-items: flex-start; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.anima { animation: none; }
	*, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   PRINTS DO PRODUTO
   ==========================================================================
   Substituem o dashboard que antes era desenhado em HTML/CSS aqui mesmo, com
   numeros inventados. Sao capturas do sistema rodando, na empresa de
   demonstracao — a interface e real e nenhum dado de cliente aparece.
   A moldura escura existe para o print (que e claro) nao encostar direto no
   fundo da secao e parecer recortado. */

/* Selos dos documentos fiscais, logo abaixo das acoes do hero. */
.hero__selo {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   FAIXAS COM FOTO
   ==========================================================================
   A foto entra como fundo com a tinta por cima: assim o texto continua legivel
   independente do enquadramento, e trocar a imagem nao exige refazer o CSS. */

.faixa {
	position: relative;
	padding: 104px 0;
	background-color: var(--tinta);
	background-size: cover;
	background-position: center;
	color: #fff;
}

.faixa::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(13, 20, 32, .93) 0%, rgba(13, 20, 32, .78) 52%, rgba(13, 20, 32, .55) 100%);
}

.faixa .limite { position: relative; z-index: 1; }

.faixa__l { max-width: 620px; }

.faixa__l h2 {
	margin: 0 0 14px;
	font-size: 32px;
	line-height: 1.22;
	letter-spacing: -.02em;
}

.faixa__l p {
	margin: 0;
	color: #C6CFDC;
	font-size: 17px;
	line-height: 1.6;
}

.faixa--balcao { background-image: url("/marca/fotos/balcao.jpg?v=1"); }
.faixa--loja   { background-image: url("/marca/fotos/loja.jpg?v=1"); }

/* ==========================================================================
   SECAO DE PRINT COM TEXTO
   ========================================================================== */

.tres-up { padding: 96px 0; }

.mostra {
	padding: 96px 0;
	background: var(--papel-2);
	border-top: 1px solid var(--regua);
	border-bottom: 1px solid var(--regua);
}

.mostra__grade {
	display: grid;
	grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.mostra__txt h2 {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.24;
	letter-spacing: -.02em;
}

.mostra__txt p {
	margin: 0 0 22px;
	color: var(--apagado);
	font-size: 17px;
	line-height: 1.6;
}

.mostra__tela { margin: 0; }

.lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lista li {
	position: relative;
	padding: 0 0 0 26px;
	margin-bottom: 10px;
	color: var(--tinta-3);
	font-size: 15px;
}

/* Marcador desenhado com borda em vez de caractere: nao depende de fonte de
   icones e nao vira quadradinho se a fonte faltar. */
.lista li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 6px;
	width: 6px;
	height: 10px;
	border: solid var(--ok);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

@media (max-width: 900px) {
	.mostra__grade { grid-template-columns: 1fr; gap: 36px; }
	.faixa { padding: 72px 0; }
	.faixa__l h2 { font-size: 26px; }
	.tres-up, .mostra { padding: 64px 0; }
}

/* ==========================================================================
   HERO: PRINT SANGRANDO
   ==========================================================================
   O print ocupava metade da grade e era reduzido a ~44% do tamanho original --
   nessa escala o menu lateral virava mancha e os numeros ficavam ilegiveis.
   E era cortado em linha reta na base do hero, o que parecia defeito, nao
   escolha.

   Agora: a barra lateral saiu do arquivo (menos ruido), a imagem escapa pela
   direita do container (entao aparece maior, perto de 70% do tamanho real) e a
   base dissolve no fundo com mask-image em vez de terminar em corte seco. */

/* A faixa de indicadores e larga e baixa (1065x300). Sem isto ela esticaria na
   altura do texto ao lado e ficaria borrada. */
.mostra__tela--faixa img {
	border-radius: 10px;
	box-shadow: var(--sombra-2);
}

.mostra__tela--faixa {
	align-self: center;
}

/* ==========================================================================
   HERO CLARO
   ==========================================================================
   O hero era um bloco em #0D1420. O print do sistema tem fundo branco, entao
   sobre a tinta ele virava um retangulo claro colado por cima, sem relacao com
   a pagina — e qualquer tratamento de borda so chamava mais atencao para o
   recorte. Com o hero claro, o print encosta no fundo da propria pagina e
   deixa de parecer figura aplicada.

   Consequencias em cascata, todas aqui: os selos e a moldura da imagem
   perdem a borda clara (que so existia para contrastar com o escuro), e a
   dissolucao da base passa a terminar em branco, nao em azul. */

/* Regua discreta separando o hero da faixa seguinte: sem o bloco escuro, as
   duas secoes claras encostariam sem limite visivel. */
.hero { border-bottom: 1px solid var(--regua); }

/* ==========================================================================
   HERO: O PRINT
   ==========================================================================
   Tres decisoes aqui, todas por causa do mesmo problema.

   1) O hero era um bloco em #0D1420. Como o print do sistema tem fundo branco,
      ele virava um retangulo claro colado sobre a tinta, sem relacao com a
      pagina. Hero passou a ser claro (ver .hero la em cima) e o print encosta
      no fundo da propria pagina.

   2) A imagem ocupava metade da grade e era reduzida a ~44% do tamanho real,
      escala em que texto de interface vira mancha. Agora escapa do container
      ate a borda da janela e aparece a ~79%.

   3) A base era cortada em linha reta na borda do hero, o que parecia defeito.
      Agora dissolve com mask-image.

   Em tela estreita nada disso vale: o hero empilha, a imagem cabe inteira e
   nao ha corte para disfarcar. --------------------------------------------- */

.hero__selo li {
	padding: 5px 11px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 999px;
	color: #C6CFDC;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
}

.mostra__tela img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--regua);
	border-radius: 10px;
	box-shadow: var(--sombra-2);
}

/* ==========================================================================
   HERO COM FOTO
   ==========================================================================
   Quarta tentativa de hero, e a que ficou. As anteriores e por que sairam estao
   no comentario do land_page.blade.php.

   A foto e o fundo da secao inteira, nao um elemento ao lado do texto. Por
   cima vem um degrade que escurece o lado esquerdo, onde fica o titulo, e
   abre para a direita, deixando a cena aparecer. Sem isso o texto branco
   some nas partes claras da imagem, e escurecer a foto inteira daria de novo
   o bloco chapado que nao funcionou.

   min-height em vh para a foto ter area suficiente para se ler como cena --
   uma faixa baixa demais vira textura, nao fotografia. */

.hero--foto {
	/* Era 72vh + 96px de respiro, o que em tela grande empurrava a proxima secao
	   para bem abaixo da dobra. O clamp da um piso (a foto precisa de area para
	   se ler como cena), acompanha a janela e para de crescer em monitor alto. */
	min-height: clamp(400px, 56vh, 580px);
	display: flex;
	align-items: center;
	padding: 72px 0;
	background-color: var(--tinta);
	background-image: url("/marca/fotos/balcao.jpg?v=1");
	background-size: cover;
	background-position: 62% center;
	color: #fff;
}

.hero--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(13, 20, 32, .95) 0%,
		rgba(13, 20, 32, .88) 34%,
		rgba(13, 20, 32, .62) 62%,
		rgba(13, 20, 32, .38) 100%);
}

.hero--foto .limite { position: relative; z-index: 1; width: 100%; }

.hero__txt { max-width: 620px; }

/* ==========================================================================
   DECLARACAO (secao so de texto)
   ==========================================================================
   Esta secao tinha a foto do balcao de fundo. Com a foto no hero, duas faixas
   fotograficas seguidas competiam; aqui ficou o texto sozinho, em fundo claro,
   funcionando como respiro entre o hero e os blocos de recurso. */

.declara {
	padding: 104px 0;
	background: var(--papel);
	border-bottom: 1px solid var(--regua);
}

.declara__l { max-width: 780px; }

.declara__l h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.22;
	letter-spacing: -.025em;
	color: var(--tinta);
	text-wrap: balance;
}

.declara__l p {
	margin: 0;
	color: var(--apagado);
	font-size: 18px;
	line-height: 1.6;
	max-width: 62ch;
}

@media (max-width: 860px) {
	.hero--foto { min-height: 0; padding: 56px 0; background-position: 58% center; }
	.declara { padding: 64px 0; }
}

/* ==========================================================================
   HERO: A TELA DO SISTEMA
   ==========================================================================
   O lado direito ja foi: (a) vazio, so foto; (b) uma lista de quatro passos
   numerados -- "1 Venda fechada no caixa", "2 Nota autorizada"... -- que e
   texto disfarcado de diagrama e nao mostra nada do produto.

   Print aqui ja tinha sido recusado antes, com razao: o dashboard da epoca
   tinha um grafico que era uma mancha ciana chapada ocupando 70% da imagem.
   Esse dashboard foi refeito desde entao, e agora e a melhor tela do sistema
   para abrir a pagina -- entao o print volta, dentro de uma moldura de janela,
   vazando pela borda para sugerir que o sistema continua para la. */

.hero__grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
	gap: 56px;
	align-items: center;
	width: 100%;
}

.hero__tela {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--papel);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: var(--sombra-3);
	/* Vaza para fora da coluna: o corte na borda da tela (overflow do .hero)
	   e proposital. */
	width: calc(100% + 90px);
}

/* Barra de janela: tres pontos e uma faixa. Sem isto o print parece um
   retangulo colado sobre a foto; com ela, le-se como software. */
.hero__barra {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	background: #E8ECF2;
	border-bottom: 1px solid var(--regua);
}

.hero__ponto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #C6CEDA;
}

.hero__tela img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 1040px) {
	.hero__grade { grid-template-columns: 1fr; gap: 40px; }
	.hero__tela { width: 100%; }
}

/* Secao de print com a imagem do outro lado. Duas secoes seguidas com a imagem
   sempre a direita davam ritmo de formulario; alternando, a pagina anda. */
.mostra--inverso {
	background: var(--papel);
}

.mostra--inverso .mostra__grade {
	grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
}

@media (max-width: 900px) {
	/* Empilhado, o texto vem antes da imagem nas duas secoes: ler a explicacao
	   antes de ver a tela faz mais sentido que o contrario. */
	.mostra--inverso .mostra__txt { order: -1; }
}


/* =========================================================================
   PLANOS  (/plano)
   -------------------------------------------------------------------------
   A tela antiga puxava o Metronic inteiro — fullcalendar, wizard, prismjs,
   pricing.css e quatro arquivos de skin — para desenhar quatro cartoes, e o
   <body> vinha com aside-enabled/aside-fixed/page-loading, classes do layout
   administrativo numa pagina publica que nao tem menu lateral. Aqui ela usa o
   mesmo sistema da landing, e so ele.
   ========================================================================= */

.planos-topo {
	padding: 64px 0 8px;
	text-align: center;
}

.planos-topo h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 4vw, 42px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
	color: var(--tinta);
}

.planos-topo p {
	max-width: 620px;
	margin: 0 auto;
	color: var(--apagado);
	font-size: 17px;
	line-height: 1.6;
}

/* TITUO_PLANO e MENSAGEM_PLANO vem do .env com style="color: #0d47a1" dentro.
   Sem isto o azul escuro do .env venceria a cor desta pagina. */
.planos-topo h1 *,
.planos-topo p * {
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
}

.planos-selo {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--acao-fundo);
	color: var(--acao);
	font-size: 14px;
	font-weight: 600;
}

/* -------- A grade -------- */

.planos-grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
	gap: 20px;
	padding: 40px 0 8px;
	align-items: stretch;
}

.plano {
	display: flex;
	flex-direction: column;
	padding: 28px 26px 26px;
	background: var(--papel);
	border: 1px solid var(--regua);
	border-radius: 14px;
	transition: border-color .18s var(--curva), box-shadow .18s var(--curva), transform .18s var(--curva);
}

.plano:hover {
	border-color: var(--regua-2);
	box-shadow: var(--sombra-2);
	transform: translateY(-2px);
}

.plano__nome {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 600;
	color: var(--tinta);
}

.plano__preco {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 14px 0 2px;
}

.plano__moeda {
	font-size: 17px;
	font-weight: 600;
	color: var(--apagado);
}

.plano__valor {
	font-size: 36px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--tinta);
	/* Tabular para os precos alinharem coluna a coluna entre os cartoes. */
	font-variant-numeric: tabular-nums;
}

.plano__periodo {
	font-size: 14px;
	color: var(--apagado);
}

/* -------- Limites: o que de fato separa um plano do outro -------- */

.plano__limites {
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--regua);
	list-style: none;
}

.plano__limites li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
}

.plano__limites dt,
.plano__limite-rot {
	color: var(--apagado);
}

.plano__limite-val {
	font-weight: 600;
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Itens que so aquele plano tem (a interseccao sai no bloco comum). */
.plano__extras {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.plano__extras li {
	position: relative;
	padding: 5px 0 5px 24px;
	font-size: 14px;
	color: var(--tinta);
}

.plano__extras li::before {
	content: "";
	position: absolute;
	left: 2px; top: 11px;
	width: 11px; height: 6px;
	border-left: 2px solid var(--ok);
	border-bottom: 2px solid var(--ok);
	transform: rotate(-45deg);
}

.plano__acao {
	margin-top: auto;
	padding-top: 24px;
}

.plano__acao .btn {
	width: 100%;
}

/* -------- O que vem em todos -------- */

.planos-comuns {
	margin: 32px 0 0;
	padding: 34px 32px;
	background: var(--papel-2);
	border: 1px solid var(--regua);
	border-radius: 14px;
}

.planos-comuns h2 {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 600;
	color: var(--tinta);
}

.planos-comuns > p {
	margin: 0 0 22px;
	color: var(--apagado);
	font-size: 15px;
}

.planos-comuns ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.planos-comuns li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	color: var(--tinta);
	line-height: 1.5;
}

.planos-comuns li::before {
	content: "";
	position: absolute;
	left: 2px; top: 8px;
	width: 11px; height: 6px;
	border-left: 2px solid var(--ok);
	border-bottom: 2px solid var(--ok);
	transform: rotate(-45deg);
}

.planos-rodape {
	padding: 40px 0 64px;
	text-align: center;
	color: var(--apagado);
	font-size: 14px;
}

.planos-rodape a {
	color: var(--acao);
	font-weight: 600;
}

@media (max-width: 560px) {
	.planos-topo { padding-top: 40px; }
	.planos-comuns { padding: 26px 20px; }
}

/* Imagem do plano: opcional, so quando o admin sobe uma. */
.plano__img {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	object-fit: contain;
	border-radius: 8px;
}


/* =========================================================================
   FORMULARIO PUBLICO  (/cadastro)
   -------------------------------------------------------------------------
   A tela de cadastro puxava plugins.bundle, prismjs, scripts.bundle,
   fullcalendar, wizard.js, user.js e select2 para desenhar oito campos, e os
   inputs vinham com "form-control-solid h-auto py-7 px-6": caixas cinzas de
   ~76px de altura, do tamanho de um botao. Aqui usam a mesma medida do resto
   das paginas publicas.
   ========================================================================= */

.form-publico {
	max-width: 620px;
	margin: 0 auto;
	padding: 52px 0 72px;
}

.form-publico__topo {
	margin-bottom: 30px;
	text-align: center;
}

.form-publico__marca img {
	height: 38px;
	width: auto;
	margin-bottom: 26px;
}

.form-publico__topo h1 {
	margin: 0 0 8px;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--tinta);
}

.form-publico__topo p {
	margin: 0;
	color: var(--apagado);
	font-size: 15.5px;
}

/* Fita do plano escolhido: a pessoa veio de /plano e escolheu um; a tela
   antiga so guardava o id num <input type="hidden"> e nao dizia qual era. */
.form-publico__plano {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 26px;
	padding: 14px 18px;
	background: var(--acao-fundo);
	border: 1px solid #D3E0FA;
	border-radius: 10px;
	font-size: 14.5px;
	color: var(--tinta);
}

.form-publico__plano strong { font-weight: 650; }

.form-publico__plano a {
	color: var(--acao);
	font-weight: 600;
	white-space: nowrap;
}

/* -------- Campos -------- */

.campo { margin-bottom: 18px; }

.campo > label {
	display: block;
	margin-bottom: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tinta);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="password"] {
	display: block;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	background: var(--papel);
	border: 1px solid var(--regua-2);
	border-radius: 8px;
	color: var(--tinta);
	font-size: 15px;
	font-family: inherit;
	transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}

.campo input::placeholder { color: var(--apagado-2); }

.campo input:focus {
	outline: none;
	border-color: var(--acao);
	box-shadow: 0 0 0 3px var(--acao-fundo);
}

.campo input.erro { border-color: var(--erro); }

.campo__erro {
	display: block;
	margin-top: 6px;
	color: var(--erro);
	font-size: 13px;
}

.campo__dica {
	display: block;
	margin-top: 6px;
	color: var(--apagado);
	font-size: 13px;
}

.dupla {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 18px;
}

/* Documento + botao de consulta na mesma linha. O botao tinha
   style="margin-left: -15px" e font-size-h1 para encostar no campo. */
.campo__doc { display: flex; gap: 10px; }
.campo__doc input { flex: 1 1 auto; min-width: 0; }

.campo__doc button {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 46px;
	padding: 0 16px;
	border: 1px solid var(--regua-2);
	border-radius: 8px;
	background: var(--papel-2);
	color: var(--tinta);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	transition: background-color .15s var(--curva), border-color .15s var(--curva);
}

.campo__doc button:hover:not([disabled]) {
	background: var(--papel-3);
	border-color: var(--apagado-2);
}

.campo__doc button[disabled] { opacity: .45; cursor: not-allowed; }

/* -------- Pessoa juridica / fisica -------- */

.tipo-pessoa {
	display: inline-flex;
	gap: 2px;
	margin-bottom: 18px;
	padding: 3px;
	background: var(--papel-3);
	border-radius: 8px;
}

.tipo-pessoa label {
	margin: 0;
	padding: 7px 18px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--apagado);
	cursor: pointer;
	transition: background-color .15s var(--curva), color .15s var(--curva);
}

.tipo-pessoa input { position: absolute; opacity: 0; pointer-events: none; }

.tipo-pessoa input:checked + span {
	background: var(--papel);
	color: var(--tinta);
	box-shadow: var(--sombra-1);
}

.tipo-pessoa span {
	display: block;
	margin: -7px -18px;
	padding: 7px 18px;
	border-radius: 6px;
	transition: background-color .15s var(--curva), color .15s var(--curva);
}

.tipo-pessoa label:focus-within span { box-shadow: 0 0 0 3px var(--acao-fundo); }

/* -------- Rodape do formulario -------- */

.form-publico__acoes { margin-top: 26px; }
.form-publico__acoes .btn { width: 100%; }

.form-publico__rodape {
	margin: 18px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--apagado);
}

.form-publico__rodape a { color: var(--acao); font-weight: 600; }

.aviso-erro {
	margin-bottom: 20px;
	padding: 12px 16px;
	background: #FBEAE8;
	border: 1px solid #F0C6C1;
	border-radius: 8px;
	color: #8E2921;
	font-size: 14.5px;
}

@media (max-width: 560px) {
	.dupla { grid-template-columns: 1fr; }
	.form-publico { padding: 32px 0 48px; }
}