/* ============================================================
   CARRINHO - PREVIA 01 - 24/08/2026

   Arquivo NOVO e SO DESTA TELA. Nada aqui entra no style.css, que
   serve o site inteiro: assim esta tela nao tem como estragar a
   home nem a pagina de cursos, que e o que o Erico pediu.

   Todo seletor comeca com "ck-" (de checkout), pelo mesmo motivo
   do "tc-" da pagina de cursos: nomes curtos como .total, .cupom
   ou .curso JA EXISTEM no style.css com outro significado.

   As medidas saem dos nos do Figma "Carrinho / Entrar email"
   (974:80511 no computador, 974:82138 no celular).
   ============================================================ */

/* A fonte fica declarada aqui, e nao herdada do body do site: assim
   esta tela sai certa mesmo se um dia o style.css mudar de fonte, e
   nao depende de nenhum arquivo de fora. */
/* 03/09/2026 - o degrade pinta de cinza tudo o que fica a DIREITA da faixa
   de preco. Ele existe porque a caixa do carrinho passou a ser centrada
   (ver .ck-corpo): sem isto, numa tela larga sobrava uma tira branca entre
   a faixa e a borda. O ponto de virada e o mesmo calculo do .ck-dir:
   ate 1400 a faixa encosta na borda (100% - 500), acima disso ela para
   onde a caixa centrada termina (50% + 200). */
.ck-body {
	background: #fff;
	background-image: linear-gradient(to right,
		#fff 0px,
		#fff min(100% - 500px, 50% + 200px),
		var(--ck-fundo) min(100% - 500px, 50% + 200px));
	background-repeat: no-repeat;
	color: #172B4D;
	font-family: var(--fonte-texto);
}

/* cores desta tela, no mesmo tom do resto do site */
.ck-body {
	--ck-azul: #0052CC;
	--ck-azul-esc: #0747A6;
	--ck-navy: #172B4D;
	--ck-texto: #42526E;
	--ck-fraco: #7A869A;
	--ck-fundo: #F4F7FB;
	--ck-borda: #DFE1E6;
	--ck-verde: #00875A;
}

/* ---------- faixa de aviso da previa (SAI na versao definitiva) ---------- */
.ck-aviso {
	background: #172B4D;
	color: #fff;
	padding: 9px 16px;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}
.ck-aviso b { color: #FFC400; }

/* ---------- cabecalho enxuto ----------
   No desenho o carrinho NAO tem o menu do site nem o rodape: so o
   logotipo e os dois selos. E o proposito e esse - tirar da frente
   tudo que leve a pessoa para fora da compra. */
.ck-topo {
	border-bottom: 1px solid var(--ck-borda);
	background: #fff;
}
/* O logotipo tem de nascer na MESMA regua do titulo "Finalizar
   compra". Antes o cabecalho tinha caixa propria de 1440 centrada e a
   coluna do conteudo era empurrada para a direita pela faixa cinza:
   numa tela de 1778 o logo caia em 209 e o titulo em 478, cada um numa
   regua. O Erico viu na PREVIA 01.

   A conta: a coluna da esquerda comeca em (tela - 500 da faixa - 900
   do maximo dela) e ainda tem 40 de folga interna, ou seja, em
   "tela - 1360". Em tela estreita isso fica negativo e a folga volta a
   ser os 40 de sempre - por isso o max(). Se um dia a faixa ou o
   maximo mudarem de medida, este numero muda junto. */
.ck-topo .ck-topo-in {
	padding: 13px 40px;
	padding-left: 40px;
	padding-left: max(40px, calc((100% - 1400px) / 2 + 40px));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
/* 01/10/2026 - A BORDA DIREITA DOS SELOS, alinhada com a de "Informacoes
   de preco". O padding-left acima ja usava a regua do CONTEUDO; o direito
   tinha ficado com os 40px da regua da JANELA, e por isso os selos fugiam
   para a direita quanto maior a tela - 20px de atraso em 1440, 260 em 1920
   e 580 em 2560. E o mesmo defeito do ACHADOS A-116, consertado so de um
   lado em 03/09.

   SO NESTA TELA (ck-topo--regua): o mesmo <header> existe em seis
   templates, e o carrinho_finaliza usa uma grade sem largura maxima - la
   esta conta desalinharia em vez de alinhar. */
.ck-topo.ck-topo--regua .ck-topo-in {
	padding-right: max(40px, calc((100% - 1400px) / 2 + 40px));
}
/* 01/10/2026, segunda volta. Alinhar a borda DIREITA nao bastou: ele quer os
   selos comecando onde comeca o texto "Informacoes de preco", nao terminando
   onde ele termina. Palavras dele: "o 7 dias tem que ser mais para esquerda
   ainda, logo acima do texto INFORMACOES DE PRECO".

   A conta: a coluna da direita e .ck-dir, flex 0 0 500px com padding 40 dos
   dois lados - o conteudo dela mede 420. Dando 420 ao bloco dos selos e
   encostando-o a direita, a borda esquerda dele cai exatamente na borda
   esquerda do titulo. Os selos ficam alinhados a esquerda DENTRO desse bloco. */
.ck-topo.ck-topo--regua .ck-selos {
	width: 420px;
	justify-content: flex-start;
}
@media (max-width: 991.98px) {
	/* no celular nao ha coluna da direita no alto - o .ck-dir desce para
	   baixo da lista. Sem isto o bloco de 420 empurraria os selos para fora
	   da tela estreita. */
	.ck-topo.ck-topo--regua .ck-selos { width: auto; justify-content: flex-end; }
}

/* 01/10/2026 - "continuar comprando" e "Area do Aluno" lado a lado, do
   MESMO tamanho (pedido dele). min-width em vez de largura fixa: os dois
   continuam acompanhando a fonte, e o 218 e a largura medida do
   "continuar comprando" hoje. */
.ck-botoes-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 22px;
}
.ck-botoes-topo .ck-voltar {
	min-width: 218px;
	justify-content: center;
	margin-bottom: 0;
}
.ck-area { padding: 9px 15px 9px 18px; }
@media (max-width: 420px) {
	/* abaixo de ~396px os dois nao cabem na mesma linha (medido: cabem em
	   396, empilham em 390). Empilhados, vao os dois a largura cheia -
	   irmao empilhado tem a mesma largura, CLAUDE.md 5e-bis. */
	.ck-botoes-topo { flex-direction: column; }
	.ck-botoes-topo .ck-voltar { width: 100%; min-width: 0; }
}

.ck-logo { font-size: 0; line-height: 0; display: block; }
.ck-logo img { width: auto; display: block; }
.ck-logo .ck-marca-larga { height: 31px; }
.ck-logo .ck-marca-simbolo { display: none; height: 30px; }
.ck-selos { display: flex; align-items: center; gap: 26px; }
.ck-selo { display: flex; align-items: center; gap: 9px; color: var(--ck-navy); }
.ck-selo svg { flex: none; }
.ck-selo span { font-size: 14px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.ck-selo span i { display: block; font-style: normal; font-weight: 700; }
/* 03/09/2026 - o selo virou um SVG unico (desenho + texto). A altura manda;
   a largura acompanha sozinha, entao os dois ficam alinhados pela base. */
.ck-selo-img { display: block; height: 34px; width: auto; flex: none; }


/* ============================================================
   A SUGESTAO DE CURSOS   -   01/10/2026

   Quatro cartoes no fim da coluna da esquerda. O cartao e o .cc do
   site inteiro - ja vem do style.css, que o carrinho carrega - entao
   aqui so entra a moldura da faixa.

   Sem carrossel de proposito: quatro cartoes numa grade dispensam o
   carrossel.js, que esta tela nao carrega. Menos JavaScript numa tela
   de compra e menos coisa para quebrar.
   ============================================================ */
.ck-sugestao {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--ck-borda);
}
.ck-sugestao-titulo {
	font-family: var(--fonte-titulo, inherit);
	font-size: 20px;
	font-weight: 600;
	color: var(--ck-navy);
	margin: 0 0 18px;
}
@media (max-width: 575.98px) {
	.ck-sugestao { margin-top: 32px; padding-top: 22px; }
	.ck-sugestao-titulo { font-size: 18px; }
}

/* ---------- os cartoes estavam apertados  -  02/10/2026 ----------
   Observacao dele, com print: "Os Cards dos cursos estao muito apertados,
   alguns cursos estao com o titulo em 4 linhas."

   Eram QUATRO numa linha (col-md-3) dentro de uma coluna que ja e estreita:
   sobravam pouco mais de 180px para cada cartao, e titulo de curso neste
   catalogo e longo - "Profissional de Apoio e Cuidador das Necessidades
   Especiais" nao cabe em duas linhas com 180px.

   Agora sao TRES por linha, em DUAS linhas: seis cursos. Cada cartao ganha
   largura, e o titulo passa a caber.

   ATENCAO - TUDO AQUI E ESCOPADO EM .ck-sugestao, DE PROPOSITO. A classe
   .cc e a MESMA da listagem /cursos (cursos.php), e la os cartoes estao
   certos, porque a coluna e a tela inteira. Mexer no .cc solto mudaria as
   duas telas; ele apontou esta. */
.ck-sugestao .row {
	margin-left: -8px;
	margin-right: -8px;
}
.ck-sugestao .row > [class*="col-"] {
	padding-left: 8px;
	padding-right: 8px;
	margin-bottom: 16px;
}
.ck-sugestao .cc {
	min-width: 216px;
}
.ck-sugestao .cc-corpo {
	padding: 16px 16px 18px;
}

/* O titulo para em DUAS linhas, com reticencias. O nome inteiro vai no
   title do link, entao o hover mostra o curso completo: ninguem perde
   informacao, e o preco deixa de ser empurrado para baixo.
   O min-height reserva as duas linhas, para que cartao de titulo curto e
   cartao de titulo longo tenham o preco na mesma altura. */
.ck-sugestao .cc-titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

@media (max-width: 767.98px) {
	/* no celular voltam a ser dois por linha, e o min-width sai da frente:
	   com 216px fixos a tela de 360px rolaria para o lado. */
	.ck-sugestao .cc { min-width: 0; }
}

/* ---------- as duas colunas ----------
   Esquerda: os cursos e a entrada. Direita: preco e cupom, no
   cinza do desenho, colada no alto e indo ate o pe da tela. */
/* 03/09/2026 - o max-width + margem automatica mantem a coluna e a faixa
   GRUDADAS uma na outra e centra as duas juntas. Antes so a coluna era
   centrada e a faixa ficava colada na borda da tela: com o zoom reduzido
   sobrava um buraco de 1200px entre as duas, e o Erico viu (03/09).
   1400 = 900 do maximo da coluna + 500 da faixa. Mudando um dos dois,
   mudar aqui, no .ck-topo-in e no degrade do .ck-body. */
.ck-corpo {
	display: flex;
	align-items: stretch;
	min-height: calc(100vh - 62px);
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}
.ck-esq {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 900px;
	/* 03/09/2026 - sem margem automatica aqui. Quem centra agora e o
	   .ck-corpo, com as duas colunas juntas. A primeira tentativa do dia
	   centrava so esta coluna, e ai a faixa cinza ficava longe dela. */
	margin-left: 0;
	margin-right: 0;
	padding: 34px 40px 60px;
}
/* 500 e nao 440: com 440 os nomes de curso quebravam em duas linhas na
   lista de precos. No Figma a faixa tem 528 (no 974:80513). */
.ck-dir {
	flex: 0 0 500px;
	background: var(--ck-fundo);
	border-left: 1px solid var(--ck-borda);
	padding: 34px 40px 60px;
}

/* O "voltar" era so a palavra solta no canto e o Erico nao achava.
   Virou pastilha com borda, no mesmo desenho dos botoes claros do
   site, e o texto passou a dizer para onde leva. */
.ck-voltar {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--ck-azul);
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 22px;
	padding: 9px 18px 9px 15px;
	border: 1.5px solid var(--ck-borda);
	border-radius: 50px;
	background: #fff;
	transition: border-color .15s, background .15s;
}
.ck-voltar:hover {
	color: var(--ck-azul-esc);
	border-color: var(--ck-azul);
	background: #F0F6FF;
	text-decoration: none;
}
.ck-dica-solta { margin: -8px 0 18px; font-size: 14px; }
/* 03/09/2026 - o que e titulo, botao ou rotulo vai de Lexend, como no
   resto do site. O corpo desta tela ja e Source Sans Pro pelo .ck-body. */
.ck-body h1.ck-titulo,
.ck-body h2, .ck-body h3,
.ck-voltar, .ck-botao, .ck-acao, .ck-aplicar button,
.pg-aba, .pg-botao {
	font-family: var(--fonte-titulo);
}
.ck-body h1.ck-titulo {
	font-size: 32px;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var(--ck-navy);
	margin: 0 0 26px;
}

/* ---------- a linha de cada curso ---------- */
.ck-curso {
	display: flex;
	gap: 18px;
	padding: 14px 0;
	align-items: flex-start;
}
/* CAIXA QUADRADA, e nao os 104x74 do Figma.
   No desenho o Figma usa FOTOS deitadas; o site usa ICONES QUADRADOS
   de 73x74 (conferido em upload/curso/*.png). Numa caixa deitada eles
   ficavam esticados - o Erico viu na PREVIA 01. A altura da linha
   continua a do desenho; so a largura da capa acompanha o arquivo
   que existe de verdade. */
/* Fundo TRANSPARENTE, e nao o cinza que estava aqui. Os icones dos
   cursos sao redondos e com fundo vazado; o quadrado cinza aparecia
   atras deles e a caixa se via na tela. Sem ele fica so o icone.
   O canto arredondado continua para o caso de um curso ter foto
   quadrada em vez de icone. */
.ck-capa {
	flex: 0 0 74px;
	height: 74px;
	border-radius: 8px;
	overflow: hidden;
	background: transparent;
}
.ck-capa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-info { flex: 1 1 auto; min-width: 0; }
.ck-tag { font-size: 13px; font-weight: 700; color: var(--ck-azul); margin-bottom: 3px; }
.ck-nome { font-size: 18px; font-weight: 400; line-height: 1.28; margin: 0 0 6px; color: var(--ck-navy); }
.ck-nota { font-size: 12px; color: var(--ck-fraco); display: flex; align-items: center; gap: 5px; }
.ck-nota b { color: var(--ck-navy); font-weight: 700; }
.ck-nota svg { flex: none; color: #FFAB00; }
.ck-acoes {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
	padding-top: 2px;
}
.ck-acao {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	color: var(--ck-texto);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: inherit;
}
.ck-acao:hover { color: var(--ck-azul); text-decoration: none; }
/* 11/10/2026 - A-223: o "remover" da 2a via e um formulario (POST); nao pode quebrar a linha das acoes */
.ck-remover-pedido { display: inline-flex; margin: 0; }
/* o aviso da remocao, no topo da 2a via */
.pg-remover-aviso { margin: 0 0 18px; }
/* 11/10/2026 - A-225: reativar os cancelados (2a via de pedido pago misto) */
.pg-reativar { margin: 0 0 18px; }
.pg-reativar-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ck-borda); border-radius: 10px; margin: 0 0 10px; cursor: pointer; }
.pg-reativar-item input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.pg-reativar-nome { flex: 1 1 auto; font-size: 15px; }
.pg-reativar-valor { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.pg-reativar .btn { margin-top: 6px; }
/* 11/10/2026 - a confirmacao NA PAGINA do reativar/remover (o confirm() do navegador pode vir bloqueado) */
.pg-confirma { margin: 10px 0 14px; padding: 12px 14px; border: 1px solid #FFD5CC; border-left: 4px solid #DE350B; background: #FFF8F5; border-radius: 10px; font-size: 14px; }
.pg-confirma p { margin: 0 0 10px; }
.pg-confirma-nao { background: none; border: 0; margin-left: 14px; color: var(--ck-texto); text-decoration: underline; cursor: pointer; font-family: inherit; font-size: 14px; }

.ck-risca { border: 0; border-top: 1px solid var(--ck-borda); margin: 24px 0 28px; }
.ck-vazio { color: var(--ck-texto); font-size: 16px; padding: 20px 0 10px; }

/* ---------- trocar a carga horaria ----------
   Aparece so quando a pessoa clica em "editar carga" - no desenho
   nao ha caixa de selecao a mostra o tempo todo. */
.ck-carga { display: none; margin-top: 10px; }
.ck-carga.ck-aberta { display: block; }
.ck-carga select {
	width: 100%;
	max-width: 320px;
	height: 42px;
	border: 1px solid var(--ck-borda);
	border-radius: 8px;
	padding: 0 12px;
	font: 400 14px/1 var(--fonte-texto);
	color: var(--ck-navy);
	background: #fff;
}

/* ---------- entrar ou cadastrar ---------- */
.ck-entrada h2 {
	font-size: 21px;
	font-weight: 400;
	margin: 0 0 18px;
	color: var(--ck-navy);
}
.ck-campo { position: relative; margin-bottom: 16px; }
.ck-campo .ck-ico-campo {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ck-fraco);
}
.ck-campo input {
	width: 100%;
	height: 52px;
	border: 1px solid var(--ck-borda);
	border-radius: 9px;
	padding: 0 16px 0 46px;
	font: 400 16px/1 var(--fonte-texto);
	color: var(--ck-navy);
	background: #fff;
}
.ck-campo input::placeholder { color: var(--ck-fraco); }
.ck-campo input:focus {
	outline: 0;
	border-color: var(--ck-azul);
	box-shadow: 0 0 0 3px rgba(0,82,204,.15);
}
/* ---------- as caixas coladas das etapas de senha e cadastro ----------
   No desenho (nos 974:80515 e 974:80703) os campos nao sao caixas
   soltas: formam UM bloco com uma borda so, e uma risquinha entre um
   campo e outro. O e-mail ja preenchido mostra o rotulo pequeno em
   cima do valor. */
.ck-grupo {
	border: 1px solid var(--ck-borda);
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 16px;
}
.ck-linha-campo {
	position: relative;
	display: flex;
	align-items: center;
	border-top: 1px solid var(--ck-borda);
}
.ck-grupo .ck-linha-campo:first-child { border-top: 0; }
.ck-linha-campo.ck-sozinho {
	border: 1px solid var(--ck-borda);
	border-radius: 9px;
	background: #fff;
	margin-bottom: 12px;
}
.ck-linha-campo input {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	height: 54px;
	border: 0;
	background: none;
	padding: 0 16px;
	font: 400 16px/1 var(--fonte-texto);
	color: var(--ck-navy);
}
.ck-linha-campo input:focus { outline: 0; }
.ck-linha-campo input::placeholder { color: var(--ck-fraco); }
/* campo com rotulo em cima: o e-mail que a pessoa ja digitou */
.ck-linha-campo.ck-preenchido { display: block; padding: 8px 16px 6px; }
.ck-linha-campo.ck-preenchido label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ck-fraco);
	margin: 0 0 1px;
}
.ck-linha-campo.ck-preenchido input {
	height: 26px;
	padding: 0;
	font-size: 16px;
}
.ck-exibir {
	flex: none;
	border: 0;
	background: none;
	color: var(--ck-texto);
	font: 400 14px/1 var(--fonte-texto);
	text-decoration: underline;
	padding: 0 16px;
	cursor: pointer;
}
.ck-exibir:hover { color: var(--ck-azul); }
.ck-dica { font-size: 12px; color: var(--ck-fraco); margin: -6px 0 16px 2px; }
/* A CAIXA DE AVISO

   25/08/2026: era um retangulo rosa com o texto colado na borda. Ele
   pediu "um visual melhor, no padrao do site". Ganhou a barra colorida
   na lateral, o icone e o respiro entre as linhas - o mesmo desenho das
   outras caixas do site. */
.ck-erro {
	position: relative;
	background: #FFF4F1;
	color: #8B2400;
	border: 1px solid #FFD5CC;
	border-left: 4px solid #DE350B;
	border-radius: 10px;
	padding: 14px 16px 14px 46px;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
}
.ck-erro::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 15px;
	width: 18px;
	height: 18px;
	background: #DE350B;
	border-radius: 50%;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center/18px no-repeat;
	        mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center/18px no-repeat;
}
/* quando a mensagem tem mais de um paragrafo - o caso do curso repetido */
.ck-erro br + br { line-height: 10px; }
/* 11/10/2026 - aviso que NAO e erro ("Cadastro criado. Entre com a sua senha"): mesmo desenho, em verde, com o visto */
.ck-ok {
	position: relative;
	background: #EEF8F1;
	color: #14532D;
	border: 1px solid #C6E9D2;
	border-left: 4px solid #1B7F4C;
	border-radius: 10px;
	padding: 14px 16px 14px 46px;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 18px;
}
.ck-ok::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 15px;
	width: 18px;
	height: 18px;
	background: #1B7F4C;
	border-radius: 50%;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.4 14.2L6.4 12l1.4-1.4 2.8 2.8 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/18px no-repeat;
	        mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.4 14.2L6.4 12l1.4-1.4 2.8 2.8 5.6-5.6 1.4 1.4z'/%3E%3C/svg%3E") center/18px no-repeat;
}
.ck-abaixo {
	display: flex;
	gap: 20px;
	justify-content: center;
	margin: 14px 0 0;
	font-size: 14px;
}
.ck-abaixo a { color: var(--ck-texto); text-decoration: underline; }
.ck-abaixo a:hover { color: var(--ck-azul); }
.ck-ja-tem { float: right; font-size: 14px; color: var(--ck-texto); font-weight: 400; }
.ck-ja-tem a { color: var(--ck-azul); text-decoration: underline; }
/* o reCAPTCHA e uma caixa fixa de 304 - centralizada no celular */
.ck-entrada .g-recaptcha { margin: 0 0 16px; }
@media (max-width: 400px) {
	.ck-entrada .g-recaptcha { transform: scale(.86); transform-origin: 0 0; height: 66px; }
}

.ck-botao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 54px;
	background: var(--ck-azul);
	color: #fff;
	border: 0;
	border-radius: 9px;
	font: 700 16px/1 var(--fonte-titulo);
	cursor: pointer;
}
.ck-botao { text-decoration: none; }

/* ---------- quem ja esta logado (26/08/2026) ---------- */
.ck-conectado {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #F1F8F3;
	border: 1px solid #CBE7D4;
	border-radius: 9px;
	padding: 14px 16px;
	margin-bottom: 18px;
}
.ck-conectado-marca {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #2E9E5B;
	color: #fff;
}
.ck-conectado-quem { display: flex; flex-direction: column; min-width: 0; }
.ck-conectado-quem b { font-size: 15px; color: var(--ck-navy); }
.ck-conectado-quem i {
	font-style: normal;
	font-size: 14px;
	color: var(--ck-fraco);
	overflow-wrap: anywhere;
}

.ck-botao:hover { background: var(--ck-azul-esc); color: #fff; text-decoration: none; }
.ck-garantia { text-align: center; font-size: 12px; color: var(--ck-fraco); margin: 12px 0 0; }

/* ---------- coluna da direita ---------- */
.ck-dir h2 { font-size: 21px; font-weight: 400; margin: 0 0 2px; color: var(--ck-navy); }
.ck-sobre { font-size: 14px; color: var(--ck-fraco); margin: 0 0 20px; }
.ck-linha { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; }
.ck-l-nome { font-size: 15px; font-weight: 700; line-height: 1.3; }
.ck-l-sub { font-size: 13px; color: var(--ck-fraco); margin-top: 2px; }
.ck-l-valor { font-size: 15px; white-space: nowrap; padding-top: 1px; }
.ck-desconto .ck-l-valor { color: var(--ck-verde); font-weight: 700; }
.ck-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 14px 0 0;
	font-size: 21px;
	font-weight: 700;
}
.ck-dir .ck-risca { margin: 22px 0 24px; border-top-color: #D8DEE9; }
.ck-dir h3 { font-size: 19px; font-weight: 400; margin: 0 0 14px; color: var(--ck-navy); }
.ck-cupom-ativo { display: flex; align-items: center; gap: 12px; padding: 4px 0 16px; }
.ck-x {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid var(--ck-borda);
	background: #fff;
	color: var(--ck-texto);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}
.ck-c-nome { font-size: 15px; font-weight: 700; flex: 1 1 auto; min-width: 0; }
.ck-c-sub { font-size: 13px; color: var(--ck-fraco); margin-top: 1px; font-weight: 400; }
.ck-c-val { font-size: 14px; color: var(--ck-texto); white-space: nowrap; }
.ck-erro-cupom {
	color: #BF2600;
	font-size: 13px;
	margin: 0 0 12px;
}
.ck-x { text-decoration: none; }
.ck-x:hover { border-color: var(--ck-azul); color: var(--ck-azul); }
.ck-aplicar { display: flex; }
.ck-aplicar input {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	border: 1px solid var(--ck-borda);
	border-right: 0;
	border-radius: 9px 0 0 9px;
	padding: 0 16px;
	font: 400 15px/1 var(--fonte-texto);
	background: #fff;
	color: var(--ck-navy);
}
.ck-aplicar input::placeholder { color: var(--ck-fraco); }
.ck-aplicar input:focus { outline: 0; border-color: var(--ck-azul); }
.ck-aplicar button {
	flex: none;
	height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: 0 9px 9px 0;
	background: var(--ck-azul);
	color: #fff;
	font: 700 15px/1 var(--fonte-titulo);
	cursor: pointer;
}
.ck-aplicar button:hover { background: var(--ck-azul-esc); }

/* ============================================================
   CELULAR - ate 900px

   A ordem do desenho (no 974:82138) e outra: primeiro os cursos,
   depois o bloco de preco, e a entrada por ultimo. Por isso as
   tres partes viram uma coluna so, cada uma com a sua ordem.
   ============================================================ */
@media (max-width: 900px) {
	.ck-topo .ck-topo-in { padding: 11px 16px; }
	/* A MESMA largura de troca do topo do site: o style.css troca a
	   palavra pelo simbolo em 900 (linha 2377). Eu tinha posto 400 e
	   no celular dele saia a marca inteira - ele viu na PREVIA 02. */
	.ck-logo .ck-marca-larga { display: none; }
	.ck-logo .ck-marca-simbolo { display: block; height: 30px; }
	.ck-selos { gap: 14px; }
	.ck-selo span { font-size: 11px; }
	.ck-selo svg { width: 24px; height: 24px; }
	.ck-selo-img { height: 26px; }

	.ck-corpo { display: block; min-height: 0; max-width: none; }
	/* no celular a faixa ocupa a largura toda: o degrade sai de cena */
	.ck-body { background-image: none; }
	.ck-esq { display: contents; }
	.ck-cursos-bloco { order: 1; padding: 20px 16px 4px; }
	.ck-dir {
		order: 2;
		flex: none;
		border-left: 0;
		border-top: 1px solid var(--ck-borda);
		padding: 20px 16px 26px;
	}
	.ck-entrada { order: 3; padding: 22px 16px 40px; }
	.ck-entrada .ck-risca { display: none; }

	.ck-corpo { display: flex; flex-direction: column; }

	.ck-body h1.ck-titulo { font-size: 26px; margin-bottom: 18px; }
	.ck-curso { gap: 12px; flex-wrap: wrap; }
	.ck-capa { flex: 0 0 60px; height: 60px; }
	/* base ZERO, e nao "auto". Com base auto o flex mede o texto pelo
	   tamanho que ele teria numa linha so; num nome comprido isso
	   passa da largura da tela e o bloco inteiro DESCE para baixo do
	   icone, deixando o icone sozinho em cima. Foi o que ele
	   fotografou no celular, no curso "A Importancia do(a)
	   Merendeiro(a) no Ambiente Escolar". Com base zero o texto ocupa
	   o que sobra e quebra dentro da propria coluna. */
	.ck-info { flex: 1 1 0; min-width: 0; }
	.ck-nome { font-size: 16px; }
	/* as duas acoes descem para baixo do curso, alinhadas com o texto:
	   60 da capa + 12 do vao */
	.ck-acoes { flex: 1 1 100%; flex-direction: row; gap: 18px; padding: 8px 0 0 72px; }
	.ck-carga select { max-width: none; }
}

@media (max-width: 400px) {
	.ck-logo .ck-marca-simbolo { height: 26px; }
	.ck-selo span { font-size: 10px; }
	.ck-acoes { padding-left: 0; }
}

/* ============================================================
   24/08/2026 - O PRECO ACOMPANHA A ROLAGEM

   O Erico mostrou o carrinho da iHerb: o resumo do pedido fica
   sempre na tela enquanto a lista de produtos rola do lado. Ele
   perguntou se dava para fazer so com layout. Da - e o
   position: sticky, a mesma regra que o cartao de compra do
   perfil do curso ja usa (style.css, linha 4073).

   TRES COISAS PRECISAM SER VERDADE, e as tres foram conferidas:

   1. A faixa cinza (.ck-dir) continua esticada ate o pe da tela,
      porque e o desenho. Quem gruda e a caixa DE DENTRO. Se o
      sticky fosse na faixa, ela encolheria ate a altura do
      conteudo e viraria um retangulo solto no branco.

   2. Nenhuma caixa acima na hierarquia pode ter rolagem propria.
      As duas com overflow neste arquivo sao o icone do curso
      (.ck-capa) e o bloco dos campos (.ck-grupo) - nenhuma das
      duas esta por cima da coluna da direita.

   3. So faz efeito quando a coluna da esquerda e MAIS ALTA que a
      da direita. Com um curso so no carrinho nao gruda nada,
      porque nao ha rolagem para acompanhar. A iHerb se comporta
      igual - nao e defeito.

   O topo do carrinho nao e fixo, entao 24 de folga bastam.
   ============================================================ */
.ck-dir-fixo {
	position: -webkit-sticky;
	position: sticky;
	top: 24px;
}
/* No celular as duas colunas viram uma embaixo da outra: a faixa
   fica com a altura do proprio conteudo e nao sobra por onde
   deslizar. Desligado por escrito, para nao depender disso. Quem
   faz este papel no celular e a pastilha flutuante do carrinho. */
@media (max-width: 900px) {
	.ck-dir-fixo {
		position: static;
		top: auto;
	}
}

/* ============================================================
   24/08/2026 - AS FORMAS DE PAGAMENTO ACEITAS

   Ideia do Erico, vendo o carrinho da iHerb. Fica no pe da
   coluna da direita, depois do cupom.

   As bandeiras sao imagens de 48x28 que o site JA TEM, em
   imagens/cartao/ - as mesmas da lista de bandeiras da tela de
   pagamento. Nao foi baixada nenhuma imagem nova.

   O PIX e o boleto tem logo propria, mandada por ele em
   25/08/2026 e guardada em imagens/pix.png e imagens/boleto.png.
   As duas foram recortadas das margens transparentes e gravadas
   com 120px de largura.

   NAO usar o ic-pix.svg nem o ic-boleto.svg que o site ja tinha:
   eles sao brancos por dentro e sumiriam no quadrinho branco,
   como ja aconteceu com a estrela do cartao de curso.
   ============================================================ */
.ck-pagamentos {
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--ck-borda);
}
.ck-bandeiras {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ck-bandeiras li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 38px;
	background: #fff;
	border: 1px solid var(--ck-borda);
	border-radius: 7px;
}
.ck-bandeiras img {
	display: block;
	width: 42px;
	height: auto;
}
/* So o PIX precisa de caixa maior. A marca dele e muito deitada
   (120x39): no quadro de 58px o desenho ficaria com 13px de
   altura e nao se leria. O boleto nao precisa - 120x69 da quase
   a mesma proporcao dos cartoes, entao usa a regra de cima. */
.ck-bandeiras li.ck-band-pix { width: 86px; }
.ck-bandeiras li.ck-band-pix img { width: 68px; }

.ck-band-texto {
	font-size: 11px;
	font-weight: 700;
	color: var(--ck-navy);
	letter-spacing: .2px;
}

/* ============================================================
   A TELA DE PAGAMENTO - 25/08/2026

   Continua o mesmo arquivo do carrinho, porque e a mesma tela em
   duas etapas: a moldura, a coluna de precos, o cartao de curso e
   o cupom sao os mesmos e ja estao escritos acima com "ck-".

   O que e SO do pagamento comeca com "pg-".

   Do Figma: 974:80695 (cartao), 974:80691 (boleto),
   974:80519 (PIX), 974:80699 (pontos de fidelidade).
   ============================================================ */

/* ---------- "Bem-vindo, Fulano" ---------- */
.ck-bemvindo {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 26px 0 30px;
}
.ck-bemvindo svg { color: var(--ck-navy); flex: none; margin-top: 2px; }
.ck-bemvindo h2 {
	font-size: 21px;
	font-weight: 400;
	color: var(--ck-navy);
	margin: 0 0 4px;
	line-height: 1.3;
}
.ck-bemvindo p { font-size: 14px; color: var(--ck-fraco); margin: 0; }

/* ---------- a linha do pedido, so na 2a via ----------
   A pergunta que quem chega nesta tela faz primeiro e "e este mesmo
   o pedido que eu estou pagando?". Por isso o numero fica logo
   abaixo do titulo, e nao escondido no meio da pagina. */
.pg-pedido {
	font-size: 14px;
	color: var(--ck-fraco);
	margin: -10px 0 22px;
}
.pg-pedido b { color: var(--ck-navy); font-weight: 500; }

/* ---------- titulo do bloco ---------- */
.pg-titulo {
	font-size: 21px;
	font-weight: 400;
	color: var(--ck-navy);
	margin: 0 0 18px;
}

/* ---------- as abas ----------
   Ficaram abas, e nao a lista de selecao do Figma: o PIX e a forma
   de pagamento mais usada com folga, e a aba mostra as opcoes todas
   sem custo de clique. Decisao dele em 25/08/2026.

   A ORDEM IMPORTA e e montada no PHP: PIX, boleto, cartao e Pontos
   Fidelidade sempre por ultimo. */
.pg-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 22px;
}
.pg-aba {
	flex: 1 1 150px;
	min-width: 132px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 15px 10px;
	background: #fff;
	border: 1px solid var(--ck-borda);
	border-radius: 10px;
	color: var(--ck-texto);
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.pg-aba:hover { border-color: #B3BAC5; }
.pg-aba.pg-ativa {
	border-color: var(--ck-azul);
	color: var(--ck-azul);
	background: #F0F6FF;
	box-shadow: inset 0 0 0 1px var(--ck-azul);
}
.pg-aba svg { flex: none; }

/* ---------- os paineis ---------- */
.pg-painel { display: none; }
.pg-painel.pg-ativo { display: block; }

.pg-texto {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ck-texto);
	margin: 0 0 14px;
}
.pg-avista {
	font-size: 15px;
	color: var(--ck-navy);
	margin: 0 0 16px;
}
.pg-avista b { color: var(--ck-azul); }

.pg-lista { list-style: none; margin: 0 0 20px; padding: 0; }
.pg-lista li {
	position: relative;
	padding: 0 0 0 24px;
	margin-bottom: 9px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ck-texto);
}
.pg-lista li:before {
	content: "";
	position: absolute;
	left: 4px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ck-azul);
}
.pg-obs {
	margin-top: 22px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ck-fraco);
}
.pg-obs p { margin: 0 0 8px; }

/* ---------- o botao que fecha a compra ---------- */
.pg-form { margin: 0; }
.pg-botao {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 16px 20px;
	background: var(--ck-azul);
	border: 0;
	border-radius: 32px;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
}
.pg-botao:hover { background: var(--ck-azul-esc); }
.pg-garantia {
	margin: 10px 0 0;
	font-size: 12px;
	color: var(--ck-fraco);
	text-align: center;
}

/* ---------- os campos do cartao ---------- */
.pg-campo { margin-bottom: 14px; }
.pg-campo label {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ck-fraco);
}
.pg-campo input[type=text],
.pg-campo select {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--ck-borda);
	border-radius: 8px;
	color: var(--ck-navy);
	font-family: inherit;
	font-size: 15px;
}
.pg-campo input[type=text]:focus,
.pg-campo select:focus {
	outline: 0;
	border-color: var(--ck-azul);
	box-shadow: 0 0 0 3px rgba(0,82,204,.14);
}

.pg-numero { position: relative; }
.pg-numero .ico-cartao-credito-input {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	height: 24px;
	width: auto;
}
.pg-numero input { padding-right: 56px !important; }

.pg-dupla { display: flex; gap: 14px; }
.pg-dupla .pg-campo { flex: 1 1 0; min-width: 0; }
.pg-validade { display: flex; gap: 10px; }
.pg-validade select { min-width: 0; }

.pg-cvv { display: flex; gap: 10px; align-items: center; }
.pg-cvv input { min-width: 0; }
.pg-ajuda {
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid var(--ck-borda);
	border-radius: 50%;
	background: #fff;
	color: var(--ck-fraco);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
}
.pg-ajuda:hover { border-color: var(--ck-azul); color: var(--ck-azul); }

.pg-cvv-explica { display: none; margin: 0 0 16px; }
.pg-cvv-explica.pg-aberto { display: block; }
.pg-cvv-explica img {
	max-width: 320px;
	width: 100%;
	height: auto;
	border: 1px solid var(--ck-borda);
	border-radius: 8px;
}

.pg-aviso-campo { margin-top: 6px; font-size: 12px; line-height: 1.5; }
.pg-aviso-campo.pg-bom  { color: var(--ck-verde); }
.pg-aviso-campo.pg-ruim { color: #DE350B; }

/* ---------- as bandeiras aceitas, embaixo do cartao ---------- */
.pg-bandeiras-aceita { margin-top: 26px; }
.pg-bandeiras-aceita span {
	display: block;
	margin-bottom: 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--ck-fraco);
}
.pg-bandeiras-aceita ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.pg-bandeiras-aceita li {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 34px;
	background: #fff;
	border: 1px solid var(--ck-borda);
	border-radius: 6px;
}
.pg-bandeiras-aceita img { display: block; width: 38px; height: auto; }

/* ---------- pontos de fidelidade ----------
   A conta aparece na tela de proposito: saldo, custo e sobra. E a
   unica forma de pagamento em que a pessoa nao ve valor em reais,
   entao precisa ver em pontos o que esta gastando. */
.pg-pontos {
	background: var(--ck-fundo);
	border: 1px solid var(--ck-borda);
	border-radius: 10px;
	padding: 4px 16px;
	margin-bottom: 16px;
}
.pg-pontos-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ck-borda);
	font-size: 14px;
	color: var(--ck-texto);
}
.pg-pontos-item:last-child { border-bottom: 0; }
.pg-pontos-item b { font-size: 17px; color: var(--ck-navy); }
.pg-pontos-custo b { color: #DE350B; }
.pg-pontos-sobra b { color: var(--ck-verde); }
.pg-obs-pontos {
	font-size: 12px;
	line-height: 1.6;
	color: var(--ck-fraco);
	margin: 0 0 18px;
}

/* ---------- celular ---------- */
@media (max-width: 640px) {
	.ck-bemvindo h2 { font-size: 18px; }
	.pg-abas { gap: 8px; }
	.pg-aba {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		padding: 12px 6px;
		font-size: 12px;
	}
	.pg-dupla { flex-direction: column; gap: 0; }
	.pg-botao { font-size: 15px; padding: 15px 16px; }
}

/* ============================================================
   COMPRA FINALIZADA - Figma 974:80523 (PIX), 974:80637 (boleto)
   e 974:80577 (cartao e pontos), 25/08/2026

   Sao a mesma tela. Quando ainda falta pagar, entra o painel cinza
   da direita com a chave PIX ou o codigo de barras; quando nao falta
   - cartao aprovado, pontos, deposito - a coluna da esquerda fica
   sozinha e centralizada, como no no 974:80577.
   ============================================================ */
.fz-tela {
	display: grid;
	grid-template-columns: 1fr 512px;
	min-height: calc(100vh - 78px);
	background: #fff;
}
.fz-tela.fz-sozinha { grid-template-columns: 1fr; }

.fz-esq {
	padding: 72px 56px 72px 152px;
	align-self: center;
	max-width: 760px;
}
.fz-tela.fz-sozinha .fz-esq {
	margin: 0 auto;
	padding: 72px 24px;
	max-width: 620px;
}

/* o circulo verde do visto */
.fz-marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: #6FCF97;
	border: 3px solid #1F7A45;
	color: #12331F;
	margin-bottom: 26px;
}
.fz-marca svg { width: 36px; height: 36px; }

/* o mesmo circulo, em ambar, quando o boleto ou o PIX nao saiu */
.fz-marca.fz-marca-alerta {
	background: #F7C948;
	border-color: #9A6B00;
	color: #3A2A00;
}
.fz-suporte { margin: 18px 0 0; font-size: 15px; }

/* o aviso de que quem libera e a equipe - pontos e deposito */
.fz-espera {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #FFF8E6;
	border: 1px solid #F0DCA8;
	border-radius: 10px;
	padding: 15px 17px;
	margin: 0 0 30px;
	max-width: 34em;
	font-size: 15px;
	line-height: 1.6;
	color: #42526E;
}
.fz-espera svg { flex: 0 0 20px; width: 20px; height: 20px; color: #9A6B00; margin-top: 2px; }
.fz-espera b { color: var(--ck-tinta, #253858); }
.fz-suporte a { color: var(--ck-azul, #0B5FD4); text-decoration: underline; }

.fz-titulo {
	font-size: 46px;
	line-height: 1.16;
	font-weight: 700;
	color: var(--ck-tinta, #253858);
	margin: 0 0 20px;
	letter-spacing: -0.5px;
}
.fz-texto {
	font-size: 16px;
	line-height: 1.68;
	color: #42526E;
	margin: 0 0 34px;
	max-width: 34em;
}
.fz-texto b { color: var(--ck-tinta, #253858); }

.fz-botao {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--ck-azul, #0B5FD4);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 30px;
	border-radius: 999px;
	transition: filter .15s;
}
.fz-botao:hover { filter: brightness(1.08); color: #fff; }
.fz-botao svg { width: 18px; height: 18px; }
/* 08/10/2026 - o botao de BAIXO (fim do painel do pagamento) e a palavra "Abaixo" so existem no celular:
   no computador o painel fica ao lado, e valem o botao de cima e o "Ao lado". Faixa de 900px, abaixo. */
.fz-botao.fz-botao-baixo { display: none; }
.fz-so-cel { display: none; }

/* ---- o painel da direita ---- */
.fz-dir {
	background: #F4F6FA;
	padding: 72px 48px;
	align-self: stretch;
}
.fz-dir-titulo {
	font-size: 22px;
	font-weight: 700;
	color: var(--ck-tinta, #253858);
	margin: 0 0 18px;
	line-height: 1.3;
}
.fz-dir-texto {
	font-size: 15px;
	line-height: 1.7;
	color: #42526E;
	margin: 0 0 24px;
}
.fz-dir-texto b { color: var(--ck-tinta, #253858); }

.fz-copiar {
	display: block;
	width: 100%;
	background: #E8F0FE;
	border: 1.5px solid var(--ck-azul, #0B5FD4);
	color: var(--ck-azul, #0B5FD4);
	font-weight: 700;
	font-size: 16px;
	padding: 15px 20px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s;
}
.fz-copiar:hover { background: #DAE7FD; }
.fz-copiar.fz-copiado {
	background: #E3FCEF;
	border-color: #1F7A45;
	color: #1F7A45;
}

.fz-cartao {
	background: #fff;
	border-radius: 14px;
	padding: 22px;
	margin-top: 24px;
	text-align: center;
}
.fz-cartao-titulo {
	font-size: 15px;
	font-weight: 600;
	color: var(--ck-tinta, #253858);
	margin-bottom: 14px;
}
.fz-qr { width: 150px; height: 150px; display: block; margin: 0 auto 10px; }

.fz-barra { margin: 0 auto 8px; }
.fz-barra svg { max-width: 100%; height: auto; }
.fz-linha-digitavel {
	font-size: 12px;
	color: #42526E;
	word-break: break-all;
	margin-bottom: 8px;
}

.fz-ampliar {
	display: inline-block;
	background: none;
	border: 0;
	padding: 0;
	color: var(--ck-azul, #0B5FD4);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

/* ---- o QR Code ampliado ---- */
.fz-lupa {
	position: fixed;
	inset: 0;
	background: rgba(9, 30, 66, .72);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 60;
	cursor: zoom-out;
}
.fz-lupa[hidden] { display: none; }
.fz-lupa img {
	width: min(78vw, 78vh);
	height: auto;
	background: #fff;
	padding: 20px;
	border-radius: 16px;
}

/* ---- telas menores ---- */
@media (max-width: 1200px) {
	.fz-esq { padding: 64px 40px; }
	.fz-tela { grid-template-columns: 1fr 420px; }
	.fz-titulo { font-size: 38px; }
}
@media (max-width: 900px) {
	/* o painel deixa de ser coluna e vira o bloco de baixo: numa tela
	   estreita ele viria espremido, e e a parte que a pessoa precisa
	   usar para pagar */
	.fz-tela, .fz-tela.fz-sozinha { grid-template-columns: 1fr; }
	.fz-esq { padding: 40px 22px 28px; max-width: none; }
	.fz-dir { padding: 32px 22px 48px; }
	.fz-titulo { font-size: 30px; }
	.fz-botao { width: 100%; justify-content: center; }
	/* 08/10/2026 - ideia do Gladson: com painel de pagamento, o botao desce para o fim dele (quem tocava no de
	   cima saia sem pagar). Sem o botao, o texto perde os 34 que o separavam dele - sobravam 62px vazios. */
	.fz-botao.fz-botao-cima { display: none; }
	.fz-botao.fz-botao-baixo { display: flex; margin-top: 28px; }
	.fz-tela:not(.fz-sozinha) .fz-esq .fz-texto { margin-bottom: 0; }
	.fz-so-pc { display: none; }
	.fz-so-cel { display: inline; }
}

/* ============================================================
   07/10/2026 - A BARRA FIXA DO CELULAR (template/carrinho.html)

   Ideia do Gladson, previa aprovada pelo Erico. Total a esquerda,
   "ir para o pagamento" a direita, presa no pe da tela. So ate
   900px - a mesma faixa em que o .ck-dir-fixo deixa de acompanhar a
   rolagem (acima). O body ganha um espaco embaixo do tamanho dela,
   para o fim da pagina nao ficar escondido. z-index 900: abaixo do
   aviso de cookies da LGPD (9999), que tem de continuar clicavel.
   ============================================================ */
.ck-barra { display: none; }
@media (max-width: 900px) {
	.ck-barra {
		display: flex;
		align-items: center;
		gap: 14px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		background: #fff;
		border-top: 1px solid #dfe5ee;
		box-shadow: 0 -6px 18px rgba(23, 43, 77, .10);
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		transition: transform .22s ease;
	}
	.ck-barra.ck-barra-fora { transform: translateY(110%); }
	.ck-barra-total { flex: 1; min-width: 0; line-height: 1.15; }
	.ck-barra-total small { display: block; font-size: 13px; color: #5b6b82; }
	.ck-barra-total b { font-family: Lexend, "Segoe UI", Arial, sans-serif; font-size: 20px; font-weight: 700; color: #172b4d; white-space: nowrap; }
	.ck-barra .ck-botao { width: auto; flex: 0 0 auto; height: 50px; margin: 0; padding: 0 18px; white-space: nowrap; }
	body.ck-com-barra { padding-bottom: 78px; }
}
@media (max-width: 340px) {
	/* telas bem estreitas: o botao encolhe antes de empurrar o total */
	.ck-barra .ck-botao { padding: 0 12px; font-size: 15px; }
	.ck-barra-total b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.ck-barra { transition: none; }
}
/* 11/10/2026 - 2a via: o "editar carga" na altura do NOME do curso (antes ficava na altura da etiqueta "90h - Extensao" e destoava
   quando so alguns cursos mostram o link). Medido: centro do link = centro da 1a linha do nome. No celular, alinhado com o texto. */
@media (min-width: 900.02px) { .pg-cursos .ck-acoes { padding-top: 24px; } }
@media (max-width: 400px) { .pg-cursos .ck-acoes { padding-left: 72px; } }