/* =====================================================================
   CP White Label - TEMA NEUTRO TROCAVEL
   Toda a identidade visual (cor, raio, sombra, fonte) vive nas variaveis
   :root abaixo. Para tematizar uma campanha, sobrescreva SO estas
   variaveis num arquivo proprio (ex. css/tema-<campanha>.css) carregado
   depois deste, sem tocar nas regras de layout adiante.
   ===================================================================== */

:root {
	/* Paleta Promotech: VERDE da marca + DOURADO premium. Troque por campanha se quiser. */
	--cor-primaria:        #4C8C21;   /* verde da marca: acao, links, destaques */
	--cor-primaria-escura: #386718;   /* verde escuro: hover/pressionado */
	--cor-primaria-rgb:    76,140,33; /* mesma cor em RGB p/ sombras/realces (rgba) */
	--cor-secundaria:      #C8A044;   /* accent DOURADO: detalhes, realces, CTAs premium */

	/* Escala do dourado/accent (para gradientes, brilhos e bordas) */
	--cor-ouro:            #C8A044;   /* accent principal */
	--cor-ouro-claro:      #EBCE7E;   /* accent claro: brilho / topo de gradiente */
	--cor-ouro-escuro:     #9A7724;   /* accent escuro: profundidade */
	--cor-ouro-rgb:        200,160,68;/* accent em RGB p/ sombras/realces (rgba) */

	--cor-texto:           #1A2233;   /* corpo de texto (ink) */
	--cor-texto-suave:     #5B6472;   /* legendas, texto secundario */
	--cor-fundo:           #ffffff;   /* fundo geral */
	--cor-fundo-alt:       #F6F8F4;   /* surface: faixas alternadas de secao */
	--cor-borda:           #e4e8e0;
	--cor-header-bg:       #ffffff;
	--cor-header-texto:    #1A2233;
	--cor-footer-bg:       #0B1220;
	--cor-footer-texto:    #C7D0DD;

	/* Gradientes reutilizaveis (marca verde e realce dourado) */
	--grad-marca:  linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
	--grad-ouro:   linear-gradient(135deg, var(--cor-ouro-claro), var(--cor-ouro) 55%, var(--cor-ouro-escuro));
	--grad-verde-ouro: linear-gradient(120deg, var(--cor-primaria), var(--cor-ouro));

	--raio:        14px;
	--raio-pill:   999px;
	--sombra:      0 8px 30px rgba(17, 24, 39, .08);
	--sombra-sm:   0 2px 10px rgba(17, 24, 39, .06);
	--sombra-ouro: 0 10px 30px rgba(154, 119, 36, .28);
	--container:   1140px;

	--fonte-titulo: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fonte-corpo:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--fonte-corpo);
	color: var(--cor-texto);
	background: var(--cor-fundo);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.2; }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { color: var(--cor-primaria-escura); }
img { max-width: 100%; height: auto; }

.cp-container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ---------- Botoes ---------- */
.btn-cp {
	display: inline-flex; align-items: center; gap: .5rem;
	background: var(--cor-primaria); color: #fff;
	border: 0; border-radius: var(--raio-pill);
	padding: .75rem 1.6rem; font-weight: 600; font-family: var(--fonte-titulo);
	cursor: pointer; transition: background .15s, transform .15s;
}
.btn-cp:hover { background: var(--cor-primaria-escura); color: #fff; transform: translateY(-1px); }
.btn-cp-outline {
	background: transparent; color: var(--cor-primaria);
	border: 2px solid var(--cor-primaria);
}
.btn-cp-outline:hover { background: var(--cor-primaria); color: #fff; }

/* ---------- Header / Navbar ---------- */
.cp-header {
	position: sticky; top: 0; z-index: 1000;
	background: var(--cor-header-bg);
	border-bottom: 1px solid var(--cor-borda);
	box-shadow: var(--sombra-sm);
}
/* Header usa mais da largura da tela (evita o menu embolar com muitos módulos) */
.cp-header .cp-container { display: flex; align-items: center; justify-content: space-between; gap: .8rem; height: 68px; max-width: min(1400px, 96vw); }
.cp-logo { display: flex; align-items: center; gap: .55rem; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.1rem; color: var(--cor-header-texto); white-space: nowrap; flex-shrink: 0; }
.cp-logo span { white-space: nowrap; }
.cp-logo .cp-logo-badge { width: 36px; height: 36px; border-radius: 10px; background: var(--cor-primaria); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
/* Quando ha logo da campanha: mostra a imagem, sem o fundo colorido do selo. */
.cp-logo-badge--img { background: transparent !important; overflow: hidden; width: auto !important; max-width: 190px; height: 46px !important; border-radius: 0 !important; }
.cp-logo-badge--img img { width: auto; max-width: 190px; height: 100%; object-fit: contain; display: block; } /* logo larga (ex.: 600x200) nao vira miniatura */
/* gap e fonte compactos; itens e botao nunca quebram em duas linhas */
.cp-nav { display: flex; align-items: center; gap: clamp(.5rem, .9vw, 1.1rem); }
.cp-nav a { color: var(--cor-header-texto); font-weight: 500; white-space: nowrap; }
.cp-nav a:not(.btn-cp) { font-size: .9rem; }
/* So os links de texto mudam de cor no hover. O botao (.btn-cp) fica de fora:
   com ele incluido, o hover pintava o texto de verde sobre o fundo verde-escuro
   do proprio botao e "Meus cupons" virava um borrao. */
.cp-nav a:not(.btn-cp):hover { color: var(--cor-primaria); }
/* .cp-nav a (0,1,1) vence .btn-cp (0,1,0) e pintava o botao com a cor do texto do
   header: azul-marinho sobre azul no tema azul, ilegivel. Repete as cores aqui,
   com a especificidade do container. O outline segue a primaria, como fora do nav. */
.cp-nav .btn-cp { color: #fff; white-space: nowrap; flex-shrink: 0; padding: .55rem 1.05rem; font-size: .92rem; }
.cp-nav .btn-cp:hover { color: #fff; }
.cp-nav .btn-cp-outline { color: var(--cor-primaria); }
.cp-nav .btn-cp-outline:hover { color: #fff; }
.cp-nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--cor-header-texto); cursor: pointer; }

/* Muitos módulos: cai para o menu-hambúrguer mais cedo, antes de apertar */
@media (max-width: 1024px) {
	.cp-nav-toggle { display: block; }
	.cp-nav {
		position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
		background: var(--cor-header-bg); padding: 1rem 20px; gap: .2rem;
		border-bottom: 1px solid var(--cor-borda); box-shadow: var(--sombra);
		transform: translateY(-120%); transition: transform .2s; height: auto;
	}
	.cp-nav.aberto { transform: translateY(0); }
	.cp-nav a { padding: .7rem 0; border-bottom: 1px solid var(--cor-borda); }
	.cp-nav .btn-cp { margin-top: .5rem; justify-content: center; border-bottom: 0; }
}

/* ---------- Secoes genericas ---------- */
.cp-secao { padding: 72px 0; }
.cp-secao--alt { background: var(--cor-fundo-alt); }
.cp-secao__titulo { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .5rem; }
.cp-secao__subtitulo { color: var(--cor-texto-suave); font-size: 1.05rem; margin: 0 auto 2.5rem; max-width: 640px; text-align: center; }
.cp-secao__cabecalho { text-align: center; }

/* ---------- Banner ---------- */
.cp-banner {
	background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura));
	color: #fff; padding: 96px 0; text-align: center;
}
.cp-banner h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 1rem; }
.cp-banner p { font-size: 1.2rem; opacity: .95; max-width: 680px; margin: 0 auto 2rem; }
.cp-banner .btn-cp { background: #fff; color: var(--cor-primaria); }
.cp-banner .btn-cp:hover { background: #f3f4f6; }

/* ---------- Como participar (passos) ---------- */
.cp-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }
.cp-passo { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 1.8rem; text-align: center; box-shadow: var(--sombra-sm); }
.cp-passo__num { width: 48px; height: 48px; margin: 0 auto 1rem; border-radius: 50%; background: var(--cor-primaria); color: #fff; display: grid; place-items: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.2rem; }
.cp-passo h3 { font-size: 1.15rem; margin: 0 0 .4rem; }
.cp-passo p { color: var(--cor-texto-suave); margin: 0; font-size: .95rem; }

/* ---------- Apresentacao ---------- */
.cp-apresentacao { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .cp-apresentacao { grid-template-columns: 1fr; } }
.cp-apresentacao__arte { border-radius: var(--raio); background: var(--cor-fundo-alt); min-height: 280px; display: grid; place-items: center; color: var(--cor-texto-suave); border: 2px dashed var(--cor-borda); }

/* ---------- Regulamento ---------- */
.cp-regulamento { text-align: center; }
.cp-regulamento .cp-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 2.5rem; box-shadow: var(--sombra-sm); }

.cp-vazio { text-align: center; color: var(--cor-texto-suave); padding: 2rem; }

/* ---------- FAQ ---------- */
.cp-faq { max-width: 760px; margin: 0 auto; }
.cp-faq__item { border: 1px solid var(--cor-borda); border-radius: var(--raio); margin-bottom: .8rem; overflow: hidden; background: #fff; }
.cp-faq__pergunta { width: 100%; text-align: left; background: none; border: 0; padding: 1.2rem 1.4rem; font-weight: 600; font-family: var(--fonte-titulo); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--cor-texto); }
.cp-faq__pergunta .cp-faq__icone { transition: transform .2s; color: var(--cor-primaria); }
.cp-faq__item.aberto .cp-faq__icone { transform: rotate(45deg); }
.cp-faq__resposta { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 1.4rem; color: var(--cor-texto-suave); }
.cp-faq__item.aberto .cp-faq__resposta { max-height: 400px; padding: 0 1.4rem 1.2rem; }

/* ---------- Footer ---------- */
.cp-footer { background: var(--cor-footer-bg); color: var(--cor-footer-texto); padding: 48px 0 28px; }
.cp-footer a { color: var(--cor-footer-texto); }
.cp-footer a:hover { color: #fff; }
.cp-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.cp-footer__brand { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.2rem; color: #fff; }
.cp-footer__links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.cp-footer__base { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; font-size: .85rem; opacity: .8; text-align: center; }
/* Crédito "Desenvolvido por [logo Promotech]" nos rodapés */
.cp-promotech { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 3px; }
.cp-promotech__logo { height: 15px; width: auto; display: inline-block; vertical-align: middle; opacity: .92; transition: opacity .15s; }
.cp-promotech:hover .cp-promotech__logo { opacity: 1; }

/* =====================================================================
   AUTENTICACAO (entrar / cadastrar) e PAINEL
   ===================================================================== */
.cp-auth-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--cor-fundo-alt); padding: 40px 16px; }
.cp-auth { width: 100%; max-width: 460px; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); overflow: hidden; }
.cp-auth__topo { text-align: center; padding: 28px 28px 8px; }
.cp-auth__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.2rem; color: var(--cor-texto); }
.cp-auth__logo .cp-logo-badge { width: 34px; height: 34px; border-radius: 9px; background: var(--cor-primaria); color: #fff; display: grid; place-items: center; }
.cp-auth__abas { display: flex; margin: 18px 28px 0; border-bottom: 2px solid var(--cor-borda); }
.cp-auth__aba { flex: 1; text-align: center; padding: .8rem 0; font-family: var(--fonte-titulo); font-weight: 600; color: var(--cor-texto-suave); cursor: pointer; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.cp-auth__aba.ativa { color: var(--cor-primaria); border-bottom-color: var(--cor-primaria); }
.cp-auth__corpo { padding: 22px 28px 28px; }
.cp-campo { margin-bottom: 14px; }
.cp-campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: var(--cor-texto); }
.cp-campo input { width: 100%; padding: .7rem .9rem; border: 1px solid var(--cor-borda); border-radius: 10px; font-size: 1rem; font-family: var(--fonte-corpo); }
.cp-campo input:focus { outline: none; border-color: var(--cor-primaria); box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb),.15); }
.cp-aceite { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--cor-texto-suave); margin: 6px 0 16px; }
.cp-aceite input { margin-top: .2rem; }
.cp-auth .btn-cp { width: 100%; justify-content: center; }
.cp-auth__erro { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 10px; padding: .7rem .9rem; font-size: .9rem; margin-bottom: 16px; }
.cp-social { margin-top: 18px; }
.cp-social__sep { text-align: center; color: var(--cor-texto-suave); font-size: .82rem; margin: 18px 0 14px; position: relative; }
.cp-social__sep::before, .cp-social__sep::after { content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--cor-borda); }
.cp-social__sep::before { left: 0; } .cp-social__sep::after { right: 0; }
.cp-social__btns { display: grid; gap: 10px; }
.cp-social__btn { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .7rem; border-radius: 10px; border: 1px solid var(--cor-borda); background: #fff; font-weight: 600; font-family: var(--fonte-titulo); color: var(--cor-texto); cursor: pointer; text-decoration: none; }
.cp-social__btn:hover { background: var(--cor-fundo-alt); color: var(--cor-texto); }
.cp-social__btn i { font-size: 1.15rem; }
.cp-social__btn.google i { color: #ea4335; }
.cp-social__btn.facebook i { color: #1877f2; }
.cp-social__btn.apple i { color: #111; }
.cp-social__btn.instagram i { color: #e1306c; }
.cp-auth__voltar { display: block; text-align: center; margin-top: 16px; font-size: .88rem; }

/* Painel */
.cp-painel { max-width: 900px; margin: 0 auto; padding: 40px 20px; }
.cp-painel__topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.cp-painel__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; }
.cp-painel__card { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra-sm); }
.cp-painel__card .num { font-family: var(--fonte-titulo); font-weight: 800; font-size: 2rem; color: var(--cor-primaria); }

/* =====================================================================
   AREA LOGADA (participante) — fundo, premios (vales), rodape
   ===================================================================== */
.cp-area { min-height: 100vh; display: flex; flex-direction: column; background: var(--cor-fundo-alt); }
.cp-area .cp-painel { flex: 1; width: 100%; }

/* Hero da area logada */
.cp-hero { background: linear-gradient(135deg, var(--cor-primaria), var(--cor-primaria-escura)); color: #fff; border-radius: var(--raio); padding: 28px 30px; margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: var(--sombra); }
.cp-hero h1 { margin: 0; font-size: 1.7rem; }
.cp-hero p { margin: .3rem 0 0; opacity: .92; }
.cp-hero .btn-cp { background: #fff; color: var(--cor-primaria); }
.cp-hero .btn-cp:hover { background: #eef2ff; }

/* Cards de resumo */
.cp-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 16px; margin-bottom: 28px; }
.cp-resumo__card { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 22px; display: flex; align-items: center; gap: 16px; box-shadow: var(--sombra-sm); }
.cp-resumo__ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.3rem; background: color-mix(in srgb, var(--cor-primaria) 12%, #fff); color: var(--cor-primaria); flex-shrink: 0; }
.cp-resumo__num { font-family: var(--fonte-titulo); font-weight: 800; font-size: 1.8rem; line-height: 1; }
.cp-resumo__lbl { color: var(--cor-texto-suave); font-size: .88rem; }

.cp-bloco-titulo { display: flex; align-items: center; gap: .6rem; margin: 30px 0 14px; font-size: 1.25rem; font-family: var(--fonte-titulo); font-weight: 700; }
.cp-bloco-titulo i { color: var(--cor-primaria); }

/* Cartao branco generico (tabela de cupons, vazios) */
.cp-cartao { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra-sm); overflow: hidden; }
.cp-cartao--vazio { text-align: center; color: var(--cor-texto-suave); padding: 2.4rem 1rem; }
.cp-tabela { width: 100%; border-collapse: collapse; }
.cp-tabela th, .cp-tabela td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--cor-borda); font-size: .92rem; }
.cp-tabela th { color: var(--cor-texto-suave); font-weight: 600; background: var(--cor-fundo-alt); }
.cp-tabela tr:last-child td { border-bottom: 0; }

/* Rodape compacto da area logada */
.cp-footer-min { background: var(--cor-footer-bg); color: var(--cor-footer-texto); text-align: center; padding: 22px 20px; font-size: .85rem; margin-top: 40px; }
.cp-footer-min a { color: #fff; }

/* ===== Página pública de regulamento ===== */
.reg-page { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 30px 34px; line-height: 1.6; color: var(--cor-texto); }
.reg-page h3 { font-family: var(--fonte-titulo); font-size: 1.05rem; margin: 22px 0 6px; color: var(--cor-primaria-escura); }
.reg-page h3:first-child { margin-top: 0; }
.reg-page p { margin: .5rem 0; }
.reg-page .reg-pend { background: #fde68a; color: #92400e; padding: 1px 6px; border-radius: 5px; font-weight: 600; font-size: .85em; }
.reg-page .reg-tabela { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .88rem; }
.reg-page .reg-tabela th, .reg-page .reg-tabela td { border: 1px solid var(--cor-borda); padding: .45rem .6rem; text-align: left; vertical-align: top; }
.reg-page .reg-tabela th { background: var(--cor-fundo-alt); font-weight: 700; }
.reg-page__aviso { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 48px 30px; text-align: center; }
.reg-page__aviso i { font-size: 2.6rem; color: var(--cor-secundaria); }
.reg-page__aviso h1 { margin: 14px 0 6px; }
.reg-page__aviso p { color: var(--cor-texto-suave); margin: 0 auto 22px; max-width: 460px; }

/* =====================================================================
   MODERNIZACAO — VERDE + DOURADO, INTERACOES E MICRO-ANIMACOES (front)
   ===================================================================== */
::selection { background: var(--cor-ouro-claro); color: #3a2e0a; }

/* Reveal on scroll (JS adiciona .is-visible) */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Botoes: brilho deslizante + variante dourada ---------- */
.btn-cp { position: relative; overflow: hidden; box-shadow: 0 4px 16px rgba(var(--cor-primaria-rgb),.25); }
.btn-cp > * { position: relative; z-index: 1; }
.btn-cp::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); transition: left .55s ease; z-index: 0; }
.btn-cp:hover::after { left: 140%; }
.btn-cp--ouro { background: var(--grad-ouro); color: #3a2e0a; box-shadow: var(--sombra-ouro); }
.btn-cp--ouro:hover { background: linear-gradient(135deg, #f0d88e, var(--cor-ouro) 55%, var(--cor-ouro-escuro)); color: #3a2e0a; }
/* Vence a regra antiga .cp-banner .btn-cp (botao branco do tema anterior) */
.cp-banner .btn-cp--ouro { background: var(--grad-ouro); color: #3a2e0a; box-shadow: var(--sombra-ouro); }
.cp-banner .btn-cp--ouro:hover { background: linear-gradient(135deg, #f0d88e, var(--cor-ouro) 55%, var(--cor-ouro-escuro)); color: #3a2e0a; }

/* Logo com gradiente da marca (quando nao ha imagem propria) */
.cp-logo .cp-logo-badge:not(.cp-logo-badge--img) { background: var(--grad-marca); box-shadow: 0 4px 12px rgba(var(--cor-primaria-rgb),.28); }

/* ---------- Header: sublinhado dourado animado ---------- */
.cp-nav > a:not(.btn-cp) { position: relative; }
.cp-nav > a:not(.btn-cp)::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--grad-verde-ouro); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.cp-nav > a:not(.btn-cp):hover::after { transform: scaleX(1); }

/* ---------- Titulos de secao: fio verde->ouro ---------- */
.cp-secao__cabecalho .cp-secao__titulo { position: relative; display: inline-block; }
.cp-secao__cabecalho .cp-secao__titulo::after { content: ""; display: block; width: 66px; height: 4px; margin: 14px auto 0; border-radius: 999px; background: var(--grad-verde-ouro); }
.cp-apresentacao .cp-secao__titulo::after { content: ""; display: block; width: 58px; height: 4px; margin: 14px 0 0; border-radius: 999px; background: var(--grad-verde-ouro); }

/* ---------- Banner: profundidade + glows + selo ---------- */
.cp-banner { position: relative; overflow: hidden; background: radial-gradient(120% 120% at 12% 10%, rgba(var(--cor-ouro-rgb),.20), transparent 42%), var(--grad-marca); }
.cp-banner__conteudo { position: relative; z-index: 2; }
.cp-banner__glow { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; pointer-events: none; z-index: 1; }
.cp-banner__glow--1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(235,206,126,.65), transparent 70%); top: -90px; right: -50px; animation: cpFloat 9s ease-in-out infinite; }
.cp-banner__glow--2 { width: 280px; height: 280px; background: radial-gradient(circle, rgba(120,200,60,.45), transparent 70%); bottom: -110px; left: -50px; animation: cpFloat 12s ease-in-out infinite reverse; }
@keyframes cpFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.cp-banner__selo { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(235,206,126,.55); color: #fff; padding: .42rem 1.05rem; border-radius: 999px; font-family: var(--fonte-titulo); font-weight: 600; font-size: .82rem; letter-spacing: .5px; margin-bottom: 1.3rem; backdrop-filter: blur(6px); }
.cp-banner__selo i { color: var(--cor-ouro-claro); }
.cp-banner__cta { margin-top: .4rem; }

/* ---------- Passos (Como participar) ---------- */
.cp-passo { position: relative; overflow: hidden; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.cp-passo::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-verde-ouro); transform: scaleX(0); transform-origin: left; transition: transform .32s ease; }
.cp-passo:hover { transform: translateY(-7px); box-shadow: var(--sombra); border-color: transparent; }
.cp-passo:hover::before { transform: scaleX(1); }
.cp-passo__num { background: var(--grad-marca); box-shadow: 0 6px 16px rgba(var(--cor-primaria-rgb),.30); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.cp-passo:hover .cp-passo__num { background: var(--grad-ouro); color: #3a2e0a; box-shadow: var(--sombra-ouro); transform: rotate(-6deg) scale(1.08); }

/* ---------- Apresentacao: moldura gradiente ---------- */
.cp-apresentacao__arte { background: var(--grad-verde-ouro); padding: 4px; border: 0; min-height: 300px; }
.cp-apresentacao__arte img { border-radius: calc(var(--raio) - 2px); }
.cp-apresentacao__arte > span { display: grid; place-items: center; width: 100%; height: 100%; min-height: 292px; background: var(--cor-fundo-alt); border-radius: calc(var(--raio) - 2px); }

/* ---------- Regulamento: card com realce ---------- */
.cp-regulamento .cp-card { position: relative; overflow: hidden; border-top: 4px solid transparent; transition: transform .25s ease, box-shadow .25s ease; }
.cp-regulamento .cp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--grad-verde-ouro); }
.cp-regulamento .cp-card:hover { transform: translateY(-5px); box-shadow: var(--sombra); }

/* ---------- FAQ ---------- */
.cp-faq__item { transition: box-shadow .2s ease, border-color .2s ease; }
.cp-faq__item:hover { border-color: var(--cor-ouro); box-shadow: var(--sombra-sm); }
.cp-faq__item.aberto { border-color: var(--cor-primaria); box-shadow: var(--sombra-sm); }
.cp-faq__item.aberto .cp-faq__pergunta { color: var(--cor-primaria-escura); }
.cp-faq__icone { width: 26px; height: 26px; border-radius: 50%; background: var(--cor-fundo-alt); display: grid; place-items: center; font-size: .78rem; flex-shrink: 0; }
.cp-faq__item.aberto .cp-faq__icone { background: var(--grad-ouro); color: #3a2e0a; }

/* ---------- Footer: fio dourado no topo ---------- */
.cp-footer { position: relative; }
.cp-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-verde-ouro); }

/* Acessibilidade: respeita usuarios que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none; }
	.cp-banner__glow { animation: none; }
	.cp-passo:hover, .jg-brinde:hover, .cp-regulamento .cp-card:hover { transform: none; }
}

/* Botao "Participe pelo WhatsApp" (helpers/whatsapp_helper.php). Verde da marca
   WhatsApp de proposito, fora da paleta do tema: o participante reconhece o
   canal antes de ler o texto. */
.btn-cp.btn-cp-whatsapp { background: #25D366; color: #fff; }
.btn-cp.btn-cp-whatsapp:hover { background: #1DA851; color: #fff; }
/* Dentro do hero e do banner, .cp-hero .btn-cp pinta todo botao de branco e o
   hover de #eef2ff; sem esta regra o WhatsApp ficava com texto branco sobre
   fundo quase branco ao passar o mouse. */
.cp-hero .btn-cp-whatsapp, .cp-banner .btn-cp-whatsapp { background: #25D366; color: #fff; }
.cp-hero .btn-cp-whatsapp:hover, .cp-banner .btn-cp-whatsapp:hover { background: #1DA851; color: #fff; }

/* =====================================================================
   JUNTE E GANHE -- premios (landing), onde retirar, vales do painel,
   escolha da loja. Tudo em cima das variaveis do tema (temas_def).
   ===================================================================== */
/* ---- Landing: regra + brindes ---- */
.jg-regra { display: flex; gap: 16px; align-items: center; max-width: 760px; margin: 0 auto 28px; background: var(--grad-marca); color: #fff; border-radius: var(--raio); padding: 20px 24px; box-shadow: var(--sombra); }
.jg-regra__ico { width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0; display: grid; place-items: center; font-size: 1.5rem; background: var(--grad-ouro); color: #3a2e0a; }
.jg-regra__txt { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.15rem; line-height: 1.35; }
.jg-regra__teto { margin-top: 6px; font-size: .9rem; opacity: .92; }
.jg-brindes { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.2rem; }
.jg-brinde { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-sm); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; }
.jg-brinde:hover { transform: translateY(-6px); box-shadow: var(--sombra); }
.jg-brinde__img { aspect-ratio: 4 / 3; background: var(--cor-fundo-alt); display: grid; place-items: center; color: var(--cor-primaria); font-size: 2.6rem; overflow: hidden; }
.jg-brinde__img img { width: 100%; height: 100%; object-fit: cover; }
.jg-brinde__corpo { padding: 1rem 1.2rem 1.2rem; }
.jg-brinde__nome { font-size: 1.1rem; margin: 0 0 .3rem; }
.jg-brinde__desc { color: var(--cor-texto-suave); font-size: .92rem; margin: 0; }
.jg-nota { text-align: center; color: var(--cor-texto-suave); font-size: .9rem; margin: 16px 0 0; }

/* ---- Lojas (landing e escolha) ---- */
.jg-filtro { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 auto 16px; max-width: 760px; }
.jg-filtro__busca, .jg-filtro__cidade { flex: 1 1 220px; min-width: 0; padding: .65rem .9rem; border: 1px solid var(--cor-borda); border-radius: 10px; font: inherit; background: #fff; }
.jg-filtro__cidade { flex: 0 1 220px; }
.jg-lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.jg-loja { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; padding: 14px 16px; box-shadow: var(--sombra-sm); }
.jg-loja__ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(var(--cor-primaria-rgb), .1); color: var(--cor-primaria); }
.jg-loja__nome { display: block; font-weight: 600; }
.jg-loja__end { display: block; color: var(--cor-texto-suave); font-size: .86rem; line-height: 1.4; }
/* ponto de troca (onde se retira): descricao/localizacao e linhas com icone */
.jg-ponto__desc { display: block; font-size: .9rem; line-height: 1.4; margin: 1px 0 2px; }
.jg-loja__nome > i, .jg-loja__end > i { color: var(--cor-primaria); width: 16px; text-align: center; margin-right: 2px; }
.jg-loja--ponto .jg-loja__end + .jg-loja__end { margin-top: 1px; }
.jg-lojas--compra .jg-loja { padding: 10px 14px; box-shadow: none; }
.jg-vale__loja .jg-vale__ponto-det { display: block; color: var(--cor-texto-suave); font-size: .9rem; margin-left: 22px; line-height: 1.45; }
[data-busca][hidden] { display: none !important; }

/* ---- Painel: alerta, progresso, avisos ---- */
.jg-alerta-premio { display: flex; gap: 12px; align-items: center; background: #fff7e0; border: 1px solid var(--cor-ouro); color: #5c4510; border-radius: var(--raio); padding: 12px 16px; margin-bottom: 20px; }
.jg-alerta-premio:hover { color: #3a2e0a; box-shadow: var(--sombra-sm); }
.jg-alerta-premio i { font-size: 1.3rem; color: var(--cor-ouro-escuro); }
.jg-resumo__teto { font-size: 1rem; color: var(--cor-texto-suave); font-weight: 600; }
.jg-progresso { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); padding: 18px 20px; box-shadow: var(--sombra-sm); margin-bottom: 8px; }
.jg-progresso__topo { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--cor-texto-suave); margin-bottom: 8px; }
.jg-progresso__topo i { color: var(--cor-primaria); }
.jg-progresso__barra { height: 14px; border-radius: 999px; background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); overflow: hidden; }
.jg-progresso__fill { height: 100%; border-radius: 999px; background: var(--grad-verde-ouro); transition: width .8s ease; }
.jg-progresso__txt { margin-top: 8px; font-size: .95rem; }
.jg-progresso__txt i { color: var(--cor-primaria); }
.jg-aviso, .jg-como { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--raio); padding: 14px 18px; margin-bottom: 16px; }
.jg-aviso { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.jg-como { background: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); color: var(--cor-texto); }
.jg-aviso i, .jg-como i { margin-top: 3px; }
.jg-como i { color: var(--cor-primaria); }

/* ---- Painel: cartoes dos vales ---- */
.jg-vales { display: grid; gap: 14px; }
.jg-vale { background: #fff; border: 1px solid var(--cor-borda); border-radius: var(--raio); box-shadow: var(--sombra-sm); overflow: hidden; }
.jg-vale--disponivel { border-color: var(--cor-ouro); }
.jg-vale--reservado { border-color: rgba(var(--cor-primaria-rgb), .5); }
.jg-vale--expirado, .jg-vale--cancelado { box-shadow: none; opacity: .75; }
.jg-vale__topo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--cor-borda); background: var(--cor-fundo-alt); }
.jg-vale__data { margin-left: auto; font-size: .8rem; color: var(--cor-texto-suave); }
.jg-selo { font-size: .76rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.jg-selo--demo { background: #fff7ed; color: #9a3412; border: 1px dashed #fdba74; text-transform: lowercase; }
.jg-vale__corpo { padding: 16px; }
.jg-vale__titulo { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.jg-vale__titulo i { color: var(--cor-primaria); }
.jg-vale__txt { margin: 0 0 12px; color: var(--cor-texto); font-size: .95rem; }
.jg-vale__txt:last-child { margin-bottom: 0; }
.jg-vale__txt--discreto { color: var(--cor-texto-suave); font-size: .88rem; }
.jg-vale__reservado { display: flex; gap: 20px; padding: 18px; flex-wrap: wrap; }
.jg-qr { flex: 0 0 auto; text-align: center; margin: 0 auto; }
.jg-qr img { display: block; width: 220px; max-width: 70vw; height: auto; image-rendering: pixelated; background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; padding: 6px; }
.jg-codigo { margin-top: 8px; font-family: "Courier New", monospace; font-weight: 700; font-size: 1.6rem; letter-spacing: 4px; color: var(--cor-texto); }
.jg-codigo-mini { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: 2px; }
.jg-vale__info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.jg-vale__loja i, .jg-vale__prazo i, .jg-vale__doc i { color: var(--cor-primaria); width: 18px; }
.jg-vale__loja span { color: var(--cor-texto-suave); font-size: .9rem; margin-left: 22px; display: inline-block; }
.jg-vale__prazo { font-size: 1rem; }
.jg-vale__doc { font-size: .9rem; background: var(--cor-fundo-alt); border-radius: 10px; padding: 10px 12px; }
.jg-vale__info form { margin: 0; }
.jg-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--grad-marca); color: #fff; border-radius: 10px; padding: .45rem .8rem; margin: 4px; font-family: "Courier New", monospace; font-weight: 700; letter-spacing: 2px; }

/* ---- Escolha da loja ---- */
.jg-escolha { display: grid; gap: 10px; }
.jg-escolha__loja { background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; overflow: hidden; }
.jg-escolha__cab { padding: 12px 16px 6px; }
.jg-escolha__cab i { color: var(--cor-primaria); }
.jg-opcao { display: flex; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; margin: 0; border-top: 1px solid transparent; }
.jg-opcao--brinde { border-top-color: var(--cor-borda); }
.jg-opcao:hover { background: var(--cor-fundo-alt); }
.jg-opcao input[type=radio] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--cor-primaria); }
.jg-opcao:has(input:checked) { background: rgba(var(--cor-primaria-rgb), .08); }
.jg-opcao__img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.jg-opcao__img--ico { display: grid; place-items: center; background: var(--cor-fundo-alt); color: var(--cor-primaria); }
.jg-opcao__corpo { min-width: 0; }
.jg-escolha__acao { position: sticky; bottom: 0; padding: 14px 0; background: linear-gradient(transparent, var(--cor-fundo-alt) 30%); text-align: center; }
.jg-escolha__acao .btn-cp { min-width: 260px; }
@media (max-width: 560px) {
	.jg-regra { flex-direction: column; text-align: center; }
	.jg-vale__data { margin-left: 0; width: 100%; }
	.jg-escolha__acao .btn-cp { width: 100%; min-width: 0; }
}