/* =========================================================================
   Bloco de abertura da pagina de Promocoes.
   Carregado SOMENTE onde o shortcode [gcp_promocao] existe.

   PALETA: a mesma do tema, lida do CSS do site.
     --wd-primary-color      rgb(245,158,3)   #F59E03  ambar
     --wd-alternative-color  rgb(255,176,32)  #FFB020  ambar claro
     carvao (definido pelo Daniel)             #12161B / #181E25

   ALTURA E O REQUISITO PRINCIPAL. 72,5% do trafego e celular e a primeira
   fileira de produtos precisa aparecer sem rolagem. Por isso o conteudo vai
   na horizontal no desktop e o contador vira uma tira unica no celular, em
   vez de tres caixas empilhadas.
   ========================================================================= */

.gcp-promo {
	--gcp-promo-ambar: #F59E03;
	--gcp-promo-ambar-2: #FFB020;
	--gcp-promo-carvao: #12161B;    /* base — mesma cor do fundo da pagina */
	--gcp-promo-carvao-2: #181E25;  /* topo da sobreposicao */
	--gcp-promo-tinta: #F2F5F9;
	--gcp-promo-tinta-2: #B8C4D4;

	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--gcp-promo-carvao);
	color: var(--gcp-promo-tinta);
	padding: clamp(18px, 3.2vw, 30px) 20px clamp(16px, 2.6vw, 24px);

}

/* Imagem de fundo. O degrade sobe do carvao solido na base ate quase
   transparente no topo: assim a foto aparece em cima e a emenda com a secao
   de produtos que vem abaixo fica suave, sem linha de corte. */
.gcp-promo--img::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* A foto ja e escura (brilho medio 19 na esquerda, 38 na direita), entao a
	   sobreposicao comeca leve — senao a imagem some. Ela vai fechando ate
	   virar a cor solida do fundo na base, produzindo a dissolucao. */
	background-image:
		linear-gradient(180deg,
			rgba(24,30,37,.28) 0%,
			rgba(24,30,37,.52) 48%,
			rgba(18,22,27,.86) 84%,
			var(--gcp-promo-carvao) 100%),
		var(--gcp-promo-bg);
	background-size: cover;
	background-position: center 45%;
}

/* O atributo hidden do HTML esconde via `display:none` da folha do
   navegador — e QUALQUER `display` declarado pelo autor ganha dele. Como o
   selo usa inline-block e o contador usa flex, os dois continuavam visiveis
   depois de o JS marcar hidden. Esta regra devolve a prioridade ao atributo. */
.gcp-promo [hidden] { display: none !important; }

/* ---- grade ---- */
.gcp-promo__wrap {
	max-width: 1400px;   /* mesma largura de conteudo da pagina */
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"texto acao"
		"provas provas";
	align-items: center;
	column-gap: 32px;
	row-gap: 12px;
}

.gcp-promo__texto  { grid-area: texto; }
.gcp-promo__acao   { grid-area: acao; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gcp-promo__provas { grid-area: provas; }

/* ---- texto ---- */
.gcp-promo__selo {
	margin: 0 0 8px;
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--gcp-promo-ambar);
	color: #24160A;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.gcp-promo__titulo {
	margin: 0 0 6px;
	font-size: clamp(24px, 3.6vw, 40px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -.02em;
	text-wrap: balance;
}

.gcp-promo__linha {
	margin: 0;
	max-width: 48ch;
	font-size: clamp(13.5px, 1.5vw, 16px);
	line-height: 1.45;
	color: var(--gcp-promo-tinta-2);
	text-wrap: pretty;
}

/* ---- contador: uma tira, nao tres caixas ---- */
.gcp-promo__contador {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px;
	border-radius: 10px;
	background: rgba(245,158,3,.10);
	border: 1px solid rgba(245,158,3,.32);
	white-space: nowrap;
}

.gcp-promo__rotulo {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gcp-promo-tinta-2);
}

.gcp-promo__relogio {
	display: inline-flex;
	align-items: baseline;
	font-size: clamp(23px, 2.9vw, 31px);
	font-weight: 800;
	color: var(--gcp-promo-ambar-2);
	font-variant-numeric: tabular-nums;
	letter-spacing: .01em;
	line-height: 1;
}

/* Os dois-pontos saem tortos se herdarem italico do tema. Como e um <span>
   sem semantica, basta travar o estilo aqui. */
.gcp-promo__pt {
	font-style: normal;
	font-weight: 700;
	opacity: .5;
	margin: 0 2px;
	transform: translateY(-1px);
}

/* Ultima hora: destaque discreto. Pisca-pisca em pagina de venda passa
   impressao de armadilha, nao de urgencia. */
.gcp-promo__contador.is-final {
	background: rgba(245,158,3,.20);
	border-color: var(--gcp-promo-ambar);
}

.gcp-promo__encerrada {
	margin: 0;
	font-size: 13px;
	color: var(--gcp-promo-tinta-2);
}

/* ---- cta ---- */
.gcp-promo__cta {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--gcp-promo-ambar) 0%, var(--gcp-promo-ambar-2) 100%);
	color: #24160A;
	font-weight: 800;
	font-size: 15px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(245,158,3,.26);
	transition: transform .15s ease, box-shadow .15s ease;
}

.gcp-promo__cta:hover,
.gcp-promo__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(245,158,3,.34);
	color: #24160A;
}

.gcp-promo__cta:focus-visible { outline: 3px solid var(--gcp-promo-tinta); outline-offset: 3px; }

/* ---- provas ---- */
.gcp-promo__provas {
	list-style: none;
	margin: 2px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/* baseline, nao center: "Códigos" tem o Ó acentuado, que deixa a caixa do
	   item mais alta que a dos vizinhos. Centralizado, esse item descia alguns
	   pixels. Alinhando pela linha de base do texto, os tres sentam igual. */
	align-items: baseline;
	gap: 6px 18px;
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--gcp-promo-tinta-2);
}

/* O ponto sai do fluxo (absoluto) para nao virar item de flex dentro do li —
   se fosse, ele e nao o texto definiria a linha de base do item. */
.gcp-promo__provas li {
	position: relative;
	padding-left: 11px;
	line-height: 1.2;
}

.gcp-promo__provas li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gcp-promo-ambar);
}

/* ---- tablet: acao desce, mas continua compacto ---- */
@media (max-width: 900px) {
	.gcp-promo__wrap {
		grid-template-columns: 1fr;
		grid-template-areas: "texto" "acao" "provas";
		row-gap: 12px;
	}
	.gcp-promo__acao { align-items: flex-start; flex-direction: row; flex-wrap: wrap; align-items: center; }
}

/* ---- telefone: cada pixel conta ---- */
@media (max-width: 600px) {
	.gcp-promo { padding: 14px 16px 14px; }
	/* No celular o recorte e estreito: desloca para a direita para as pessoas
	   aparecerem, em vez de sobrar so parede vazia. A sombra no titulo
	   garante leitura mesmo por cima delas. */
	.gcp-promo--img::before { background-position: 68% 42%; }
	.gcp-promo__wrap { row-gap: 10px; }
	.gcp-promo__selo { margin-bottom: 6px; padding: 3px 10px; font-size: 10.5px; }
	.gcp-promo__titulo {
		font-size: 23px;
		margin-bottom: 5px;
		text-shadow: 0 2px 14px rgba(18,22,27,.9);
	}
	.gcp-promo__linha {
		font-size: 13px;
		line-height: 1.4;
		text-shadow: 0 1px 10px rgba(18,22,27,.9);
	}
	.gcp-promo__acao { gap: 8px; width: 100%; }
	.gcp-promo__contador { padding: 6px 11px; gap: 8px; }
	.gcp-promo__rotulo { font-size: 10px; }
	.gcp-promo__relogio { font-size: 21px; }
	.gcp-promo__cta { flex: 1 1 auto; text-align: center; padding: 11px 18px; font-size: 14.5px; }
	.gcp-promo__provas { font-size: 11.5px; gap: 4px 12px; }
}

/* Telas bem estreitas: a frase de apoio e a primeira coisa dispensavel,
   porque titulo, prazo e botao ja dizem tudo que importa. */
@media (max-width: 380px) {
	.gcp-promo__linha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gcp-promo__cta { transition: none; }
	.gcp-promo__cta:hover { transform: none; }
}