/**
 * Chico Sorteio Fantástico — público.
 *
 * Três níveis visuais, para que coisas de importância diferente não pareçam
 * igualmente importantes:
 *
 *   hero      escuro, dourado, prêmio grande, contador, ação
 *   serviço   claro, leve, espaçoso — o conteúdo trabalha, o card some
 *   técnico   discreto, recolhido, cara de anexo
 *
 * A tipografia é herdada do site: o CSS declarava Archivo, Inter e Courier
 * Prime, mas o plugin nunca as carregava — cada instalação renderizava com
 * uma fonte diferente. O monoespaçado ficou só nos números, onde ajuda.
 *
 * Media queries no fim do arquivo.
 */

.csf-bloco,
.csf-faixa,
.csf-rodape,
.csf-pacote,
.csf-modal,
.csf-pagina,
.csf-menu,
.csf-tira-vitrine,
.csf-pacotes,
.csf-hist {
	--csf-ink: #1B2426;
	--csf-ink-2: #2B3739;
	--csf-paper: #E4E8E8;
	--csf-gold: #D9A93F;
	--csf-gold-txt: #6E4F0C;
	--csf-rule: #63767A;
	--csf-loja: #FFFFFF;
	--csf-loja-2: #F3F4F4;
	--csf-texto: #182022;
	--csf-mudo: #4C5658;
	--csf-mudo-esc: #D2D9D9;
	--csf-borda: #E4E7E7;

	/* Herda do tema: o sorteio é parte da loja, não um bloco importado. */
	--csf-display: inherit;
	--csf-corpo: inherit;
	--csf-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Courier New', monospace;

	--csf-raio: 14px;
	--csf-raio-sm: 10px;
	--csf-sombra: 0 5px 24px rgba(24, 32, 34, .06);
	--csf-sombra-alta: 0 10px 34px rgba(24, 32, 34, .12);
}

/* ---------- barra de topo ---------- */

.csf-barra {
	--csf-barra-largura: 1180px;
	display: block;
	background: #1B2426;
	color: #E4E8E8;
	padding: 11px 16px;
	font-size: 14.5px;
	line-height: 1.45;
	text-decoration: none;
}

.csf-barra:hover,
.csf-barra:focus-visible { color: #E4E8E8; }
.csf-barra:focus-visible { outline: 3px solid #D9A93F; outline-offset: -3px; }

.csf-barra-dentro {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: var(--csf-barra-largura, 1180px);
	margin: 0 auto;
}

.csf-barra-sec { color: #C3D0CE; }

.csf-barra-tkt {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #D9A93F;
	color: #1B2426;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.csf-icone-tkt { width: 18px; height: 18px; }

.csf-barra-txt { flex: 1; min-width: 0; }
.csf-barra-txt b { font-weight: 600; }

.csf-barra-fim {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #D9A93F;
}

.csf-barra-rel-lbl { font-size: 12.5px; color: #C3D0CE; }

.csf-barra-rel {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: 700;
	font-size: 15px;
	font-variant-numeric: tabular-nums;
}

.csf-barra .csf-icone { width: 16px; height: 16px; }

/* ---------- nível 2: card de serviço ---------- */

.csf-bloco {
	position: relative;
	background: var(--csf-loja);
	border: 1px solid var(--csf-borda);
	border-radius: var(--csf-raio);
	box-shadow: var(--csf-sombra);
	padding: 28px 26px;
	margin: 0 0 20px;
	font-family: var(--csf-corpo);
	font-size: 17px;
	line-height: 1.65;
	color: var(--csf-texto);
}

/* ---------- nível 1: hero ---------- */

.csf-bloco-destaque {
	background: linear-gradient(150deg, #24333A 0%, #1B2426 62%);
	color: var(--csf-paper);
	border-color: transparent;
	box-shadow: var(--csf-sombra-alta);
	padding: 32px 28px 30px;
}

.csf-centro { text-align: center; }

.csf-eyebrow {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--csf-gold-txt);
	background: rgba(217, 169, 63, .16);
	padding: 6px 12px;
	border-radius: 99px;
	margin: 0 0 12px;
}

.csf-bloco-destaque .csf-eyebrow,
.csf-modal .csf-eyebrow { color: var(--csf-gold); }

.csf-bloco h2,
.csf-modal h2 {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 29px;
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	color: inherit;
}

.csf-bloco h3 {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
	margin: 0 0 8px;
	color: inherit;
}

.csf-sub {
	font-size: 17px;
	line-height: 1.65;
	color: var(--csf-mudo);
	margin: 0 0 4px;
}

.csf-bloco-destaque .csf-sub,
.csf-modal .csf-sub { color: var(--csf-mudo-esc); }

/* ---------- prêmio ---------- */

.csf-premio {
	background: rgba(217, 169, 63, .1);
	border: 1px solid rgba(217, 169, 63, .45);
	border-radius: var(--csf-raio-sm);
	padding: 16px;
	margin: 20px 0;
}

.csf-bloco-destaque .csf-premio { background: rgba(255, 255, 255, .06); }

.csf-premio-lbl {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .05em;
	color: var(--csf-gold-txt);
	margin: 0;
}

.csf-bloco-destaque .csf-premio-lbl,
.csf-modal .csf-premio-lbl { color: var(--csf-gold); }

/* Moldura fixa: foto vertical virava uma parede na página. */
.csf-premio-img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: #fff;
	border-radius: var(--csf-raio-sm);
	margin: 12px 0 0;
}

.csf-premio-txt {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.3;
	margin: 12px 0 0;
}

.csf-premio-mini {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(217, 169, 63, .1);
	border: 1px solid rgba(217, 169, 63, .45);
	border-radius: var(--csf-raio-sm);
	padding: 14px;
	margin: 18px 0 0;
}

.csf-premio-mini-img {
	width: 66px;
	height: 66px;
	flex: none;
	object-fit: cover;
	border-radius: 8px;
	background: var(--csf-loja);
}

.csf-premio-mini-txt { min-width: 0; }

.csf-premio-mini-lbl {
	display: block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-gold-txt);
	margin-bottom: 3px;
}

.csf-premio-mini-txt strong {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	display: block;
}

/* ---------- vários prêmios ---------- */

.csf-premios-titulo {
	font-weight: 600;
	font-size: 16.5px;
	color: var(--csf-gold);
	margin: 18px 0 10px;
}

.csf-bloco:not(.csf-bloco-destaque) .csf-premios-titulo { color: var(--csf-gold-txt); }

.csf-premio-lista { display: grid; gap: 10px; margin: 0 0 18px; }

.csf-premio-item {
	display: flex;
	align-items: center;
	gap: 14px;
	background: rgba(217, 169, 63, .1);
	border: 1px solid rgba(217, 169, 63, .45);
	border-radius: var(--csf-raio-sm);
	padding: 14px;
}

.csf-bloco-destaque .csf-premio-item,
.csf-modal .csf-premio-item { background: rgba(255, 255, 255, .06); }

.csf-premio-pos {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--csf-gold);
	color: #12191A;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
}

.csf-premio-item-img {
	width: 54px;
	height: 54px;
	flex: none;
	object-fit: cover;
	border-radius: 8px;
	background: var(--csf-loja);
}

.csf-premio-item-txt { min-width: 0; }

.csf-premio-item-txt b {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.3;
	display: block;
}

/* ---------- pódio ---------- */

.csf-hist-qtd {
	font-size: 13px;
	font-weight: 600;
	color: var(--csf-mudo);
}

.csf-podio { display: grid; gap: 12px; margin: 18px 0 0; }

.csf-pod {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 16px;
}

.csf-pod-1 {
	background: rgba(217, 169, 63, .14);
	border: 1px solid rgba(217, 169, 63, .5);
}

.csf-pod-pos {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	background: #D3D8D8;
	color: #12191A;
}

.csf-pod-1 .csf-pod-pos { background: var(--csf-gold); }
.csf-pod-2 .csf-pod-pos { background: #C7CCCC; }
.csf-pod-3 .csf-pod-pos { background: #C89A72; color: #fff; }

.csf-pod-corpo { flex: 1; min-width: 0; }

.csf-pod-num {
	display: block;
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 25px;
	line-height: 1;
	color: var(--csf-texto);
	font-variant-numeric: tabular-nums;
}

.csf-pod-nome {
	display: block;
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 18px;
	margin-top: 5px;
}

.csf-pod-premio { display: block; font-size: 15.5px; color: var(--csf-mudo); margin-top: 3px; }

/* ---------- contagem ---------- */

.csf-contagem { display: flex; gap: 8px; margin: 20px 0 8px; }

.csf-cd {
	flex: 1;
	background: rgba(255, 255, 255, .07);
	border-radius: var(--csf-raio-sm);
	padding: 12px 0 9px;
	text-align: center;
}

.csf-bloco:not(.csf-bloco-destaque) .csf-cd {
	background: var(--csf-loja-2);
	border: 1px solid var(--csf-borda);
}

.csf-cd b {
	font-family: var(--csf-mono);
	font-size: 26px;
	display: block;
	line-height: 1;
	font-weight: 700;
	color: var(--csf-paper);
	font-variant-numeric: tabular-nums;
}

.csf-bloco:not(.csf-bloco-destaque) .csf-cd b { color: var(--csf-texto); }

.csf-cd span {
	font-size: 11.5px;
	font-weight: 500;
	color: #A9BDB7;
	margin-top: 6px;
	display: block;
}

.csf-bloco:not(.csf-bloco-destaque) .csf-cd span { color: var(--csf-mudo); }

.csf-cd-nota { font-size: 15.5px; color: var(--csf-mudo-esc); margin: 0; }
.csf-regra-destaque { font-weight: 600; margin-top: 14px; }

/* ---------- passos ---------- */

.csf-passos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--csf-borda);
	text-align: left;
}

.csf-bloco-destaque .csf-passos,
.csf-modal .csf-passos { border-color: rgba(255, 255, 255, .14); }

.csf-passo {
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 16px;
}

.csf-bloco-destaque .csf-passo,
.csf-modal .csf-passo { background: rgba(255, 255, 255, .06); }

.csf-passo b {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--csf-gold);
	color: #12191A;
	font-family: var(--csf-corpo);
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 10px;
	border: none;
}

.csf-passo p { font-size: 16px; line-height: 1.55; margin: 0; }

/* ---------- fichas e progresso ---------- */

.csf-fichas { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 6px; }

.csf-ficha {
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 22px;
	background: var(--csf-loja-2);
	color: var(--csf-texto);
	border: 1px solid var(--csf-borda);
	border-radius: 8px;
	padding: 9px 15px;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.csf-bloco-destaque .csf-ficha {
	background: rgba(255, 255, 255, .1);
	border-color: rgba(255, 255, 255, .18);
	color: var(--csf-paper);
}

.csf-ficha-vazia { background: transparent; color: var(--csf-mudo); border-style: dashed; }

.csf-ficha-pendente {
	background: transparent;
	color: var(--csf-mudo);
	border-style: dashed;
	letter-spacing: .12em;
	font-size: 18px;
}

.csf-ficha-invalida { opacity: .45; text-decoration: line-through; }

.csf-ficha-vencedor {
	background: var(--csf-gold);
	border-color: var(--csf-gold);
	color: #12191A;
}

.csf-barra-prog {
	height: 10px;
	background: var(--csf-loja-2);
	border-radius: 99px;
	overflow: hidden;
	margin-top: 16px;
}

.csf-bloco-destaque .csf-barra-prog { background: rgba(255, 255, 255, .12); }
.csf-barra-prog i { display: block; height: 100%; background: var(--csf-gold); border-radius: 99px; }

.csf-prog-txt {
	display: flex;
	justify-content: space-between;
	margin-top: 9px;
	font-size: 15px;
	color: var(--csf-mudo);
}

.csf-bloco-destaque .csf-prog-txt { color: var(--csf-mudo-esc); }

.csf-condicao {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--csf-mudo);
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 12px 14px;
	margin: 16px 0 0;
}

.csf-nota { margin: 14px 0 0; }
.csf-bloco-carrinho { margin-bottom: 24px; }

/* ---------- faixa ---------- */

.csf-faixa {
	background: linear-gradient(150deg, #24333A 0%, #1B2426 62%);
	color: var(--csf-paper);
	border-radius: var(--csf-raio);
	box-shadow: var(--csf-sombra-alta);
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	text-decoration: none;
	font-family: var(--csf-corpo);
}

.csf-faixa:hover { color: var(--csf-paper); }
.csf-faixa:focus-visible { outline: 3px solid var(--csf-gold); outline-offset: 3px; }

.csf-faixa-num {
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 28px;
	color: var(--csf-gold);
	line-height: 1;
	flex: none;
	font-variant-numeric: tabular-nums;
}

.csf-faixa-txt { flex: 1; min-width: 0; }

.csf-faixa-txt b {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 18px;
	display: block;
	margin-bottom: 4px;
}

.csf-faixa-txt span { font-size: 15px; color: var(--csf-mudo-esc); line-height: 1.45; display: block; }
.csf-faixa-seta { color: var(--csf-gold); font-size: 20px; flex: none; }

.csf-tira-vitrine { margin: 0 0 56px; }

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

.csf-rodape {
	background: linear-gradient(150deg, #24333A 0%, #1B2426 62%);
	color: var(--csf-paper);
	border-radius: var(--csf-raio);
	padding: 24px 22px;
	font-family: var(--csf-corpo);
}

.csf-rodape h4 {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 20px;
	margin: 0 0 6px;
	color: inherit;
}

.csf-rodape p { font-size: 15.5px; color: var(--csf-mudo-esc); line-height: 1.55; margin: 0; }

.csf-rod-links {
	display: flex;
	gap: 16px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	flex-wrap: wrap;
}

.csf-rod-links a {
	font-size: 15.5px;
	font-weight: 500;
	color: var(--csf-gold);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* ---------- pacotes ---------- */

.csf-pacotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 0 0 18px;
}

.csf-pacote {
	position: relative;
	background: var(--csf-loja);
	border: 1px solid var(--csf-borda);
	border-radius: var(--csf-raio);
	box-shadow: var(--csf-sombra);
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	font-family: var(--csf-corpo);
	color: var(--csf-texto);
}

.csf-pacote-melhor { border: 2px solid var(--csf-gold); }

.csf-tag {
	position: absolute;
	top: -12px;
	left: 18px;
	background: var(--csf-gold);
	color: #12191A;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 99px;
}

.csf-pac-esq { flex: 1; }

.csf-pac-lbl {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-mudo);
	margin: 0 0 3px;
}

.csf-pac-lbl-recebe {
	color: var(--csf-gold-txt);
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--csf-borda);
}

.csf-pac-preco {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 30px;
	line-height: 1;
	margin: 0;
}

.csf-pac-credito {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 23px;
	line-height: 1.15;
	margin: 0;
}

.csf-pac-credito small {
	display: block;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--csf-mudo);
	margin-top: 3px;
}

.csf-pac-nums { font-size: 16px; font-weight: 600; color: var(--csf-gold-txt); margin: 10px 0 0; }
.csf-pac-dir { margin-top: 16px; }

.csf-pac-btn {
	display: block;
	min-height: 50px;
	font-size: 15.5px;
	font-weight: 600;
	background: var(--csf-ink);
	color: var(--csf-paper);
	border: none;
	border-radius: var(--csf-raio-sm);
	padding: 14px 18px;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.csf-pac-btn:hover { color: var(--csf-paper); }
.csf-pac-nota { font-size: 13.5px; color: var(--csf-mudo); margin: 10px 0 0; line-height: 1.45; }
.csf-exemplo { font-size: 17px; font-weight: 600; margin-top: 14px; }

.csf-aviso {
	font-size: 15px;
	line-height: 1.55;
	color: var(--csf-mudo);
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 14px 16px;
	margin: 0 0 14px;
}

.csf-aviso strong { color: var(--csf-texto); font-weight: 600; }
.csf-aviso-cupom { background: var(--csf-loja); border: 1px solid var(--csf-borda); margin-bottom: 18px; }

/* ---------- ações ---------- */

.csf-cta {
	display: block;
	width: 100%;
	min-height: 56px;
	font-family: var(--csf-display);
	font-weight: 600;
	font-size: 17px;
	background: var(--csf-gold);
	color: #12191A;
	border: none;
	border-radius: var(--csf-raio-sm);
	box-shadow: 0 4px 14px rgba(217, 169, 63, .28);
	padding: 16px;
	cursor: pointer;
	margin-top: 20px;
	text-align: center;
	text-decoration: none;
}

.csf-cta:hover { color: #12191A; }

.csf-link {
	display: inline-block;
	margin-top: 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--csf-gold-txt);
	text-decoration: none;
	border: none;
	border-bottom: 2px solid currentColor;
	padding: 0 0 2px;
	background: none;
	cursor: pointer;
	font-family: inherit;
}

.csf-bloco-destaque .csf-link,
.csf-modal .csf-link { color: var(--csf-gold); }

.csf-link-seta { display: inline-flex; align-items: center; gap: 7px; }
.csf-icone { width: 19px; height: 19px; flex: none; }

.csf-cta:focus-visible,
.csf-link:focus-visible,
.csf-pac-btn:focus-visible { outline: 3px solid var(--csf-gold-txt); outline-offset: 3px; }

.csf-cta-pacotes {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--csf-borda);
}

.csf-cta-pacotes-txt { font-size: 16px; line-height: 1.55; color: var(--csf-mudo); margin: 0 0 6px; }
.csf-cta-pacotes-txt strong { color: var(--csf-texto); }

/* ---------- flutuante ---------- */

.csf-flutuante {
	--csf-offset: 90px;
	position: fixed;
	bottom: var(--csf-offset, 90px);
	z-index: 99990;
	background: #1B2426;
	color: #E4E8E8;
	border-radius: 99px;
	padding: 11px 18px 11px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	box-shadow: 0 8px 26px rgba(10, 17, 18, .38);
	text-decoration: none;
}

.csf-flutuante[data-lado="right"] { right: 16px; }
.csf-flutuante[data-lado="left"] { left: 16px; }
.csf-flutuante:hover { color: #E4E8E8; }

.csf-flut-tkt {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background: #D9A93F;
	color: #1B2426;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
}

.csf-flut-lbl { font-weight: 600; font-size: 14.5px; line-height: 1.1; }

.csf-flut-rel {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	color: #D9A93F;
	display: block;
	margin-top: 3px;
}

/* ---------- modal ---------- */

.csf-overlay {
	position: fixed;
	inset: 0;
	z-index: 99995;
	background: rgba(6, 25, 23, .74);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 16px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}

.csf-overlay.csf-on { opacity: 1; pointer-events: auto; }
.csf-overlay[hidden] { display: none; }

.csf-modal {
	position: relative;
	width: 100%;
	max-width: 440px;
	background: linear-gradient(150deg, #24333A 0%, #1B2426 62%);
	color: var(--csf-paper);
	border-radius: var(--csf-raio);
	box-shadow: 0 20px 60px rgba(6, 25, 23, .5);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	transform: translateY(14px) scale(.98);
	transition: transform .3s cubic-bezier(.2, .9, .3, 1);
	font-family: var(--csf-corpo);
	font-size: 17px;
	line-height: 1.65;
}

.csf-overlay.csf-on .csf-modal { transform: translateY(0) scale(1); }

.csf-modal-corpo {
	padding: 32px 26px 26px;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.csf-fechar {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	background: rgba(255, 255, 255, .1);
	border: none;
	border-radius: 50%;
	color: var(--csf-paper);
	width: 44px;
	height: 44px;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.csf-fechar:focus-visible { outline: 3px solid var(--csf-gold); outline-offset: 2px; }

.csf-modal-nota {
	font-size: 15px;
	color: var(--csf-mudo-esc);
	text-align: center;
	margin: 14px 0 0;
}

/* ---------- cartelas ---------- */

.csf-cartelas { display: flex; gap: 10px; justify-content: center; margin: 24px 0 8px; flex-wrap: wrap; }

.csf-cartela {
	width: 98px;
	height: 126px;
	position: relative;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	perspective: 600px;
}

.csf-cartela:focus-visible { outline: 3px solid var(--csf-gold); outline-offset: 3px; }

.csf-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: var(--csf-raio-sm);
	backface-visibility: hidden;
	transition: transform .5s cubic-bezier(.4, .1, .2, 1);
}

.csf-frente {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(217, 169, 63, .5);
	color: var(--csf-gold);
	font-weight: 600;
	font-size: 12.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
	padding: 8px;
}

.csf-frente-tkt { font-size: 26px; line-height: 1; }

.csf-verso {
	background: var(--csf-gold);
	color: #12191A;
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 30px;
	transform: rotateY(180deg);
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.csf-cartela.csf-aberta .csf-frente { transform: rotateY(180deg); }
.csf-cartela.csf-aberta .csf-verso { transform: rotateY(360deg); }

.csf-rev-nota { font-size: 15.5px; color: var(--csf-mudo-esc); margin: 16px 0 0; }

/* ---------- mecânica da semana ---------- */

.csf-semana {
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 16px 18px;
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--csf-mudo);
}

.csf-semana-lbl {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-gold-txt);
	margin-bottom: 6px;
}

/* ---------- ganhadores ---------- */

.csf-hist {
	background: var(--csf-loja);
	border: 1px solid var(--csf-borda);
	border-radius: var(--csf-raio);
	padding: 20px;
	margin-bottom: 14px;
}

.csf-hist-surpresa { border-color: rgba(217, 169, 63, .55); }

.csf-hist-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.csf-hist-ciclo {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-gold-txt);
	background: rgba(217, 169, 63, .14);
	padding: 5px 11px;
	border-radius: 99px;
}

.csf-hist-num {
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 30px;
	color: var(--csf-texto);
	font-variant-numeric: tabular-nums;
}

.csf-hist-nome { font-family: var(--csf-display); font-weight: 700; font-size: 20px; margin: 12px 0 0; }
.csf-hist-premio { font-size: 16px; color: var(--csf-mudo); margin: 4px 0 0; }
.csf-hist-data { font-size: 15px; color: var(--csf-mudo); margin: 8px 0 0; }
.csf-hist-aviso { font-size: 15px; color: #8A3A2E; margin: 6px 0 0; }

.csf-proximo {
	border-top: 1px solid var(--csf-borda);
	margin-top: 24px;
	padding-top: 24px;
	text-align: center;
}

.csf-proximo-titulo {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 23px;
	margin-bottom: 8px;
}

.csf-proximo p { font-size: 17px; color: var(--csf-mudo); }

/* ---------- histórico pessoal ---------- */

.csf-grupo { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 18px; margin-top: 18px; }
.csf-grupo:first-of-type { border-top: none; padding-top: 0; margin-top: 14px; }

.csf-grupo-lbl {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-gold);
	background: rgba(217, 169, 63, .16);
	padding: 5px 11px;
	border-radius: 99px;
	margin-bottom: 8px;
}

.csf-grupo-res { font-size: 16px; color: var(--csf-mudo-esc); margin-top: 10px; }

/* ---------- nível 3: técnico ---------- */

.csf-tecnico {
	background: var(--csf-loja-2);
	border: 1px solid var(--csf-borda);
	box-shadow: none;
	color: var(--csf-mudo);
}

.csf-detalhes summary {
	cursor: pointer;
	font-family: var(--csf-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--csf-texto);
	padding: 4px 0;
	list-style: none;
}

.csf-detalhes summary::-webkit-details-marker { display: none; }

.csf-detalhes summary::before {
	content: '\203A';
	display: inline-block;
	margin-right: 9px;
	color: var(--csf-gold-txt);
	transition: transform .2s ease;
}

.csf-detalhes[open] summary::before { transform: rotate(90deg); }
.csf-detalhes summary:focus-visible { outline: 3px solid var(--csf-gold-txt); outline-offset: 3px; }
.csf-detalhes-corpo { padding-top: 14px; font-size: 15.5px; line-height: 1.6; }

/* Dentro do card de ganhador o resumo é secundário, não um título. */
.csf-detalhes-hist { margin-top: 14px; }
.csf-detalhes-hist summary { font-size: 15px; font-weight: 500; color: var(--csf-mudo); }
.csf-detalhes-hist .csf-conta { margin-top: 10px; }

/* Manchete da campanha. */
.csf-manchete { font-size: 34px; letter-spacing: -.025em; }
.csf-grande .csf-manchete { font-size: 39px; }

.csf-conta {
	background: var(--csf-loja);
	border: 1px solid var(--csf-borda);
	border-radius: var(--csf-raio-sm);
	padding: 14px 16px;
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--csf-mudo);
}

.csf-conta p { margin: 0 0 4px; }
.csf-conta-total { color: var(--csf-mudo); }

.csf-hash {
	font-family: var(--csf-mono);
	font-size: 12.5px;
	word-break: break-all;
	line-height: 1.5;
	color: var(--csf-mudo);
}

.csf-commit { border-top: 1px solid var(--csf-borda); margin-top: 20px; padding-top: 18px; }

.csf-commit-lbl {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--csf-gold-txt);
	margin: 0 0 8px;
}

.csf-lista { margin: 0 0 22px; padding-left: 22px; }
.csf-lista li { font-size: 16.5px; line-height: 1.65; margin-bottom: 10px; }

/* ---------- crédito entregue ---------- */

.csf-credito { border: 2px solid var(--csf-gold); }
.csf-credito-espera { border: 1px dashed var(--csf-borda); box-shadow: none; }

.csf-credito-item {
	background: var(--csf-loja-2);
	border-radius: var(--csf-raio-sm);
	padding: 18px;
	margin: 16px 0;
}

.csf-credito-valor {
	font-family: var(--csf-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	margin: 0 0 12px;
}

.csf-credito-valor small { font-size: 16px; font-weight: 400; color: var(--csf-mudo); }
.csf-credito-codigo { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }

.csf-credito-codigo code {
	flex: 1;
	min-width: 190px;
	font-family: var(--csf-mono);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: .06em;
	background: var(--csf-loja);
	border: 2px dashed var(--csf-borda);
	border-radius: var(--csf-raio-sm);
	padding: 14px;
	text-align: center;
	color: var(--csf-texto);
	word-break: break-all;
}

.csf-btn-copiar {
	flex: none;
	min-height: 54px;
	font-family: var(--csf-corpo);
	font-size: 16px;
	font-weight: 600;
	padding: 12px 20px;
	background: var(--csf-ink);
	color: var(--csf-paper);
	border: none;
	border-radius: var(--csf-raio-sm);
	cursor: pointer;
}

.csf-btn-copiar:focus-visible { outline: 3px solid var(--csf-gold-txt); outline-offset: 2px; }
.csf-btn-copiado { background: #1E6B45; }

.csf-credito-validade { font-size: 15.5px; color: var(--csf-mudo); margin: 12px 0 0; }
.csf-credito-usado { font-size: 16px; color: #8A3A2E; font-weight: 600; margin: 0; }

/* ---------- menu entre páginas ---------- */

/*
 * Links de texto, não pílulas com fundo próprio: o menu aparece dentro da
 * página do lojista, e um fundo fixo só funciona se a página for da mesma
 * cor. Em site escuro, pílula branca vira a coisa mais chamativa da tela.
 * Herdando a cor do texto, funciona nos dois casos.
 */
.csf-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
	margin: 0 0 26px;
	padding: 0 0 14px;
	border-bottom: 1px solid rgba(128, 138, 138, .28);
	font-family: var(--csf-corpo);
}

.csf-menu-item {
	font-size: 15.5px;
	font-weight: 500;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
	border-bottom: 2px solid transparent;
	padding: 0 0 4px;
}

/*
 * O ícone é dourado sempre; o rótulo herda a cor da página. Assim o menu
 * aparece em fundo claro ou escuro sem precisar de fundo próprio, e sem
 * ficar apagado como acontecia com opacidade reduzida.
 */
.csf-menu-icone {
	width: 20px;
	height: 20px;
	flex: none;
	color: var(--csf-gold);
}

.csf-menu-item > span { opacity: .78; }

a.csf-menu-item:hover > span { opacity: 1; }

a.csf-menu-item:focus-visible {
	outline: 3px solid var(--csf-gold);
	outline-offset: 4px;
	border-radius: 4px;
}

.csf-menu-atual {
	font-weight: 700;
	border-bottom-color: var(--csf-gold);
	cursor: default;
}

.csf-menu-atual > span { opacity: 1; }

/* ---------- tema da página ---------- */

/*
 * O plugin não consegue saber a cor de fundo da seção onde as páginas
 * aparecem: o tema pode mandar texto escuro numa seção escura, e aí tudo
 * que está fora dos cards fica ilegível. Estas classes deixam o lojista
 * dizer o que é verdade.
 */
.csf-tema-escuro { color: #E4E8E8; }
.csf-tema-escuro .csf-menu-item > span { opacity: .82; }
.csf-tema-escuro .csf-menu-atual > span { opacity: 1; }
.csf-tema-escuro .csf-menu { border-bottom-color: rgba(228, 232, 232, .2); }
.csf-tema-escuro .csf-semana { background: rgba(255, 255, 255, .06); color: #C3D0CE; }
.csf-tema-escuro .csf-tecnico { background: rgba(255, 255, 255, .05); border-color: rgba(228, 232, 232, .16); }
.csf-tema-escuro .csf-tecnico .csf-detalhes summary { color: #E4E8E8; }
.csf-tema-escuro .csf-tecnico .csf-conta,
.csf-tema-escuro .csf-tecnico .csf-hash { background: transparent; border-color: rgba(228, 232, 232, .16); color: #C3D0CE; }

.csf-tema-claro { color: #182022; }
.csf-tema-claro .csf-menu { border-bottom-color: rgba(24, 32, 34, .16); }

/* ---------- página e formulário ---------- */

.csf-pagina { max-width: 780px; margin: 0 auto; padding: 28px 16px 60px; }

/* Dentro de uma página do tema o container já dá o espaçamento externo, mas
   a largura precisa continuar limitada: em container largo do Divi o
   regulamento virava uma linha de 1080px, impossível de ler. */
.csf-pagina-embutida {
	padding: 0;
	width: 100%;
	max-width: 780px;
	margin-inline: auto;
}

.csf-pagina-larga { max-width: 1000px; }

.csf-form { margin-top: 18px; }

.csf-form label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin: 14px 0 6px;
	color: var(--csf-texto);
}

.csf-form input[type="text"] {
	width: 100%;
	font-size: 17px;
	padding: 14px;
	border: 1px solid var(--csf-borda);
	border-radius: var(--csf-raio-sm);
	background: var(--csf-loja-2);
	min-height: 52px;
	font-family: inherit;
}

.csf-form input[type="text"]:focus-visible { outline: 3px solid var(--csf-gold-txt); outline-offset: 1px; }

/* ---------- abas da consulta ---------- */

.csf-abas {
	display: flex;
	gap: 8px;
	margin: 18px 0 0;
	padding: 5px;
	background: var(--csf-loja-2);
	border-radius: 99px;
}

.csf-aba {
	flex: 1;
	min-height: 46px;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 500;
	background: transparent;
	border: none;
	border-radius: 99px;
	padding: 11px 16px;
	cursor: pointer;
	color: var(--csf-mudo);
}

.csf-aba[aria-pressed="true"] {
	background: var(--csf-loja);
	color: var(--csf-texto);
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(24, 32, 34, .08);
}

.csf-aba:focus-visible { outline: 3px solid var(--csf-gold-txt); outline-offset: 2px; }
.csf-campo-dica { font-size: 14.5px; color: var(--csf-mudo); margin: 8px 0 0; }

/* ---------- escala grande ---------- */

.csf-grande { font-size: 20px; }
.csf-grande .csf-sub { font-size: 20px; }
.csf-grande h2 { font-size: 33px; }
.csf-grande h3 { font-size: 25px; }
.csf-grande .csf-eyebrow { font-size: 14.5px; }
.csf-grande .csf-passo p { font-size: 18.5px; }
.csf-grande .csf-passo b { width: 34px; height: 34px; font-size: 16px; }
.csf-grande .csf-premio-txt { font-size: 24px; }
.csf-grande .csf-premio-lbl { font-size: 14.5px; }
.csf-grande .csf-ficha { font-size: 25px; padding: 11px 17px; }
.csf-grande .csf-prog-txt { font-size: 17px; }
.csf-grande .csf-condicao { font-size: 16.5px; }
.csf-grande .csf-cta { font-size: 19px; min-height: 62px; }
.csf-grande .csf-link { font-size: 18px; }
.csf-grande .csf-cd b { font-size: 30px; }
.csf-grande .csf-cd span { font-size: 13px; }
.csf-grande .csf-cd-nota { font-size: 17px; }
.csf-grande .csf-pac-preco { font-size: 34px; }
.csf-grande .csf-pac-credito { font-size: 26px; }
.csf-grande .csf-pac-credito small { font-size: 16.5px; }
.csf-grande .csf-pac-nums { font-size: 18px; }
.csf-grande .csf-pac-btn { font-size: 17px; min-height: 54px; }
.csf-grande .csf-aviso { font-size: 17px; }
.csf-grande .csf-lista li { font-size: 19px; }
.csf-grande .csf-faixa-txt b { font-size: 20px; }
.csf-grande .csf-faixa-txt span { font-size: 17px; }
.csf-grande .csf-faixa-num { font-size: 32px; }
.csf-grande .csf-rodape h4 { font-size: 22px; }
.csf-grande .csf-rodape p,
.csf-grande .csf-rod-links a { font-size: 17px; }
.csf-grande .csf-modal-nota { font-size: 17px; }
.csf-grande .csf-verso { font-size: 34px; }
.csf-grande .csf-cartela { width: 108px; height: 138px; }
.csf-grande .csf-menu-item { font-size: 17.5px; min-height: 48px; }
.csf-grande .csf-menu-icone { width: 22px; height: 22px; }
.csf-grande .csf-premio-mini-txt strong { font-size: 19px; }
.csf-grande .csf-premio-mini-lbl { font-size: 14.5px; }
.csf-grande .csf-premio-mini-img { width: 76px; height: 76px; }
.csf-grande .csf-cta-pacotes-txt { font-size: 18px; }

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
	.csf-overlay,
	.csf-modal,
	.csf-face,
	.csf-detalhes summary::before { transition: none; }
}

/* ---------- telas médias ---------- */

@media (max-width: 860px) {
	.csf-pacotes { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- telas pequenas ---------- */

@media (max-width: 600px) {
	.csf-bloco { padding: 22px 18px; }
	.csf-bloco-destaque { padding: 26px 20px 24px; }
	.csf-bloco h2, .csf-modal h2 { font-size: 25px; }
	.csf-pacotes { grid-template-columns: 1fr; }
	.csf-passos { grid-template-columns: 1fr; }
	.csf-pac-preco { font-size: 27px; }
	.csf-barra { padding: 9px 12px; font-size: 13.5px; }
	.csf-barra-dentro { gap: 9px; }
	.csf-barra-sec { display: block; }
	.csf-barra-rel-lbl { display: none; }
	.csf-barra .csf-icone { display: none; }
	.csf-barra-tkt { width: 28px; height: 28px; }
	.csf-icone-tkt { width: 16px; height: 16px; }
	.csf-cd b { font-size: 23px; }
	.csf-cartela { width: 88px; height: 114px; }
	.csf-verso { font-size: 26px; }
	.csf-hist-num { font-size: 26px; }
	.csf-pod { gap: 12px; padding: 14px; }
	.csf-pod-pos { width: 38px; height: 38px; font-size: 13px; }
	.csf-pod-num { font-size: 22px; }
	.csf-pod-nome { font-size: 16.5px; }
	.csf-premio-item { gap: 11px; padding: 12px; }
	.csf-premio-item-img { width: 46px; height: 46px; }
	.csf-menu { gap: 4px 14px; }
	.csf-menu-item { font-size: 14.5px; gap: 6px; }
	.csf-menu-icone { width: 18px; height: 18px; }
	.csf-premio-mini-img { width: 56px; height: 56px; }
	.csf-premio-mini-txt strong { font-size: 16px; }
	.csf-tira-vitrine { margin-bottom: 40px; }
}