/**
 * site.css — Heros, seções, cards, rodapé.
 */

.ck-secao { max-width: var(--largura-conteudo); margin: 0 auto; padding: 64px 28px; }
.ck-secao--suave { max-width: none; background: var(--cor-superficie); }
.ck-secao--suave > * { max-width: var(--largura-conteudo); margin-inline: auto; }

.ck-cabeca { text-align: center; max-width: 660px; margin: 0 auto 38px; }
.ck-cabeca__eyebrow {
	font-family: var(--fonte-titulo);
	font-weight: 600;
	font-size: .8125rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cor-magenta-texto);
	margin-bottom: 8px;
}
.ck-cabeca h2 { font-size: clamp(1.75rem, 3.4vw, 2.25rem); margin: 0 0 10px; }
.ck-cabeca p { font-size: 1.0625rem; color: var(--cor-texto-suave); margin: 0; }

/* ═══════════════════════════════════════════════════════ HERO ══════════════ */

.ck-hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: center;
	overflow: hidden;
}
.ck-hero__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-hero .ck-sem-foto { position: absolute; inset: 0; }
.ck-hero__verniz {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(42,18,64,.93) 0%, rgba(42,18,64,.8) 34%, rgba(42,18,64,.38) 62%, rgba(42,18,64,.06) 100%);
}
.ck-hero__inner {
	position: relative; z-index: 2;
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	padding: 52px 28px;
	width: 100%;
}
.ck-hero__corpo { max-width: 620px; }
.ck-hero h1 {
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.07;
	margin: 0 0 16px;
	color: var(--cor-fundo);
}
.ck-realce { color: var(--cor-amarelo); }
.ck-hero__lead {
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--cor-sobre-roxo);
	margin: 0 0 28px;
	max-width: 540px;
}
.ck-hero__lead b { color: var(--cor-fundo); }
.ck-hero__acoes { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.ck-hero__selos { display: flex; gap: 22px; margin-top: 28px; flex-wrap: wrap; }
/* O eyebrow nunca teve regra de cor: a classe só existia no hero.php e herdava o
   #2A1240 do corpo — a MESMA cor do verniz. Medido no staging em 30/07: 1,20:1 no
   desktop e 2,81:1 no celular (mínimo 4,5:1). Falha independe da foto, acontecia
   também sobre o placeholder .ck-sem-foto. `--cor-amarelo` foi testado e REPROVA no
   celular (3,34:1); `--cor-sobre-roxo` mede 11,2:1 / 4,82:1 e é a cor que os selos
   logo abaixo já usam. */
.ck-hero__eyebrow { color: var(--cor-sobre-roxo); }
.ck-hero__selos span { font-size: .875rem; color: var(--cor-sobre-roxo); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }

/* Reenquadramento do hero da HOME em tela estreita.
   O hero não tem media query: é sempre `largura da viewport × min-height 560px` com
   `object-fit: cover`, então em 390px de largura só aparecem 29,5% do MEIO da arte (medido
   30/07). A arte da Home põe os brinquedos de ~55% para a direita, e o miolo central sai só
   com gramado. `85% center` desloca a janela para 59,9%–89,4%, que contém os dois infláveis
   de primeiro plano inteiros.
   Escopo em `.home` de propósito: 85% é calibrado para ESTA arte; outras páginas têm outra
   imagem destacada e outro ponto de interesse. */
@media (max-width: 900px) {
	.home .ck-hero__foto,
	.page-id-16 .ck-hero__foto { object-position: 85% center; }
}

/* Confete: decoração pura, some com prefers-reduced-motion (regra global no base.css) */
.ck-confete { position: absolute; border-radius: 50%; z-index: 1; pointer-events: none; opacity: .55; }
@keyframes ck-flutua { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(30deg); } }
.ck-confete { animation: ck-flutua 6s ease-in-out infinite; }

/* Breadcrumb */
.ck-migalhas { font-size: .8125rem; color: var(--cor-migalha); margin-bottom: 16px; }
.ck-migalhas a { color: var(--cor-migalha); text-decoration: none; }
.ck-migalhas a:hover { color: var(--cor-fundo); }
.ck-migalhas__sep { opacity: .5; margin: 0 7px; }
.ck-migalhas__atual { color: var(--cor-fundo); font-weight: 700; }

/* ══════════════════════════════════════════ GALERIA EXPAND-AND-PUSH ════════ */

.ck-pushrow { display: flex; gap: 16px; max-width: 1100px; margin: 0 auto 16px; }
.ck-pushrow--std { height: 248px; }
.ck-pushrow--alta { height: 300px; }

.ck-pcard {
	position: relative;
	overflow: hidden;
	border-radius: var(--raio-m);
	box-shadow: var(--sombra-card);
	text-decoration: none;
	flex: 1 1 0;
	min-width: 0;
	transition: flex-grow var(--dur-lenta) var(--curva);
}
.ck-pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-pcard .ck-sem-foto { position: absolute; inset: 0; }
/*
 * O texto DENTRO do placeholder existe para o card não ficar um retângulo mudo — mas o
 * ck-pcard já carimba o mesmo nome embaixo, então aqui ele sairia duas vezes no mesmo
 * card. Só aparece quando há muito card sem foto junto (catálogo completo), que é
 * justamente onde a repetição mais pesa.
 */
.ck-pcard .ck-sem-foto span { display: none; }
/* Card de membro consolidado: existe como produto, não como página. Sem link, então sem
   cursor de mão e sem o realce de foco/hover que promete destino. A foto ainda cresce no
   hover — é vitrine, e o expand-and-push da fileira depende disso. */
.ck-pcard--sem-link { cursor: default; }
.ck-pcard__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,18,64,.72), transparent 78%); z-index: 1; }
.ck-pcard__titulo {
	position: absolute; left: 16px; right: 54px; bottom: 14px; z-index: 2;
	font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.1875rem;
	line-height: 1.15; color: var(--cor-fundo);
}
.ck-pcard__seta {
	position: absolute; right: 14px; bottom: 14px; z-index: 2;
	width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(255,255,255,.28); color: var(--cor-fundo); font-size: 1.0625rem;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	transition: background var(--dur-media) var(--curva);
}
/* O card sob o cursor cresce e ESPREME os vizinhos (a soma da fileira é preservada). */
.ck-pushrow:has(.ck-pcard:hover) .ck-pcard:not(:hover),
.ck-pushrow:has(.ck-pcard:focus-visible) .ck-pcard:not(:focus-visible) { flex-grow: .72; }
.ck-pcard:hover, .ck-pcard:focus-visible { flex-grow: 2.2; }
.ck-pcard:hover .ck-pcard__seta, .ck-pcard:focus-visible .ck-pcard__seta { background: var(--cor-magenta); }

@media (max-width: 900px) {
	.ck-pushrow { flex-wrap: wrap; height: auto; }
	.ck-pcard { flex: 1 1 calc(50% - 8px) !important; height: 210px; }
	.ck-pushrow:has(.ck-pcard:hover) .ck-pcard:not(:hover),
	.ck-pushrow:has(.ck-pcard:focus-visible) .ck-pcard:not(:focus-visible),
	.ck-pcard:hover, .ck-pcard:focus-visible { flex-grow: 1 !important; }
}
@media (max-width: 560px) { .ck-pcard { flex: 1 1 100% !important; } }
@media (prefers-reduced-motion: reduce) {
	.ck-pushrow:has(.ck-pcard:hover) .ck-pcard:not(:hover),
	.ck-pcard:hover, .ck-pcard:focus-visible { flex-grow: 1 !important; }
}

/* ════════════════════════════════════════════════ PROVA SOCIAL ═════════════ */

.ck-nota {
	display: inline-flex; align-items: center; gap: 10px;
	background: var(--cor-superficie);
	border-radius: var(--raio-max);
	padding: 8px 18px; margin-bottom: 14px;
	text-decoration: none;
}
.ck-nota__num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.25rem; color: var(--cor-texto); }
.ck-nota__estrelas { color: var(--cor-amarelo); font-size: 1rem; letter-spacing: 2px; }
.ck-nota__legenda { font-size: .8125rem; color: var(--cor-texto-suave); font-weight: 700; }
/* O "·" separa a nota da contagem. É pontuação visual e mora no CSS, não no texto:
   ck_nota_texto() também vira nome acessível do link no rodapé, e leitor de tela
   anunciando "ponto do meio" no meio da frase é ruído. */
.ck-nota__legenda::before { content: "· "; }

.ck-depos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ck-depo {
	background: var(--cor-fundo);
	border: 1px solid var(--cor-borda);
	border-radius: var(--raio-m);
	padding: 24px;
	box-shadow: var(--sombra-card);
}
.ck-depo__estrelas { color: var(--cor-amarelo); font-size: .9375rem; letter-spacing: 2px; margin-bottom: 12px; }
.ck-depo__texto { font-size: .96875rem; margin: 0 0 18px; line-height: 1.6; }
.ck-depo__quem { display: flex; align-items: center; gap: 11px; }
.ck-depo__avatar {
	width: 42px; height: 42px; border-radius: 50%;
	display: grid; place-items: center;
	color: var(--cor-fundo); font-family: var(--fonte-titulo); font-weight: 700;
}
.ck-depo__nome { display: block; font-family: var(--fonte-titulo); font-weight: 600; font-size: .875rem; }
.ck-depo__fonte { font-size: .78125rem; color: var(--cor-texto-suave); }
@media (max-width: 900px) { .ck-depos { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════ COMO FUNCIONA ════════════ */

.ck-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1000px; margin: 0 auto; }
.ck-passo { background: var(--cor-fundo); border-radius: var(--raio-m); overflow: hidden; box-shadow: var(--sombra-card); }
.ck-passo__foto { height: 190px; overflow: hidden; }
.ck-passo__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-lenta) var(--curva); }
.ck-passo:hover .ck-passo__foto img { transform: scale(1.06); }
.ck-passo__corpo { padding: 22px 24px 26px; }
.ck-passo__num {
	font-family: var(--fonte-titulo); font-weight: 600; font-size: .8125rem;
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--cor-magenta-texto); margin-bottom: 4px;
}
.ck-passo h3 { font-size: 1.25rem; margin: 0 0 8px; }
.ck-passo p { font-size: .90625rem; color: var(--cor-texto-suave); margin: 0; line-height: 1.55; }
@media (max-width: 760px) { .ck-passos { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════ COBERTURA ═════════ */

.ck-nuvem { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; max-width: 820px; margin: 0 auto; }
.ck-cid {
	font-family: var(--fonte-titulo);
	font-size: 1.375rem; font-weight: 600;
	color: var(--cor-texto);
	text-decoration: none; line-height: 1; white-space: nowrap;
	transition: color var(--dur-media) var(--curva), transform var(--dur-lenta) var(--curva);
}
.ck-cid:hover, .ck-cid:focus-visible { color: var(--cor-link-hover); transform: translateY(-3px) scale(1.04); }
.ck-sep { color: var(--cor-amarelo); font-size: .8125rem; transform: translateY(-2px); user-select: none; }
.ck-sep--b { color: var(--cor-foco); } .ck-sep--c { color: var(--cor-verde); } .ck-sep--d { color: var(--cor-magenta); }
.ck-nuvem__quebra { flex-basis: 100%; height: 0; }
@media (max-width: 560px) { .ck-cid { font-size: 1.3125rem; } .ck-nuvem { gap: 8px 16px; } }

/*
 * `.ck-mais` era o <summary> de um acordeão que escondia as últimas praças; virou o LINK
 * para a página de cobertura, com todas as cidades já visíveis na nuvem. A aparência de
 * botão-pílula é a mesma — o que sai é o estado [open] e a seta que girava.
 */
.ck-cobertura__acao { text-align: center; }
.ck-mais {
	display: inline-flex; align-items: center; gap: 9px;
	margin-top: 30px;
	font-family: var(--fonte-titulo); font-weight: 600; font-size: .96875rem;
	color: var(--cor-marca); background: var(--cor-fundo);
	border: 1.5px solid var(--cor-borda-suave); border-radius: var(--raio-max);
	padding: 11px 24px;
	text-decoration: none;
	transition: border-color var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}
.ck-mais:hover { border-color: var(--cor-magenta); transform: translateY(-1px); color: var(--cor-marca); }
.ck-mais__seta { font-size: .75rem; transition: transform var(--dur-media) var(--curva); }
.ck-mais:hover .ck-mais__seta { transform: translateX(3px); }
/*
 * `margin: auto` nas laterais, não 0: o parágrafo herda o max-width de conteúdo e, sem a
 * margem automática, o BLOCO encosta na esquerda da seção. O `text-align:center` centraliza
 * o texto dentro dele e a frase fica visivelmente fora do eixo — centralizada em relação a
 * uma caixa que não está centralizada.
 */
.ck-cobertura__nota { font-size: .9375rem; color: var(--cor-texto-suave); margin: 22px auto 0; }

/* ═════════════════════════════════════════════════════════ CTA ════════════ */

.ck-cta { max-width: var(--largura-conteudo); margin: 0 auto; padding: 20px 28px 68px; }
.ck-cta__caixa {
	background: linear-gradient(135deg, var(--cor-marca), var(--cor-marca-clara));
	border-radius: var(--raio-g);
	padding: 52px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--sombra-alta);
}
.ck-cta__caixa h2 { font-size: clamp(1.75rem, 3.6vw, 2.375rem); margin: 0 0 12px; color: var(--cor-fundo); position: relative; }
.ck-cta__caixa p { font-size: 1.125rem; color: var(--cor-sobre-roxo); margin: 0 auto 28px; max-width: 560px; position: relative; }
.ck-cta__bola { position: absolute; border-radius: 50%; }

/* ═══════════════════════════════════════════════════════ PRODUTO ══════════ */

.ck-produto { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; max-width: var(--largura-conteudo); margin: 0 auto; padding: 56px 28px; align-items: start; }
.ck-produto__galeria { position: sticky; top: 150px; }
.ck-galeria__principal { border-radius: var(--raio-m); overflow: hidden; box-shadow: var(--sombra-card); }
.ck-galeria__principal img { width: 100%; height: auto; }
.ck-galeria__minis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.ck-galeria__minis img { border-radius: var(--raio-p); width: 100%; height: 90px; object-fit: cover; }
.ck-produto__lado .ck-prosa { max-width: none; margin: 0; }
@media (max-width: 900px) {
	.ck-produto { grid-template-columns: 1fr; gap: 28px; }
	.ck-produto__galeria { position: static; }
}

/* ═══════════════════════════════════════════════════════ VÍDEO ════════════ */

.ck-video { position: relative; aspect-ratio: 16/9; border-radius: var(--raio-m); overflow: hidden; background: var(--cor-marca-escura); }
.ck-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-video__play {
	position: absolute; inset: 0; z-index: 2;
	display: grid; place-items: center;
	width: 100%; height: 100%;
	background: rgba(42,18,64,.28);
	border: 0; cursor: pointer; color: var(--cor-fundo);
	transition: background var(--dur-media) var(--curva);
}
.ck-video__play:hover { background: rgba(42,18,64,.45); }
.ck-video__play > span:first-child {
	width: 74px; height: 74px; border-radius: 50%;
	background: var(--cor-magenta);
	display: grid; place-items: center;
	box-shadow: 0 8px 24px rgba(0,0,0,.35);
	transition: transform var(--dur-media) var(--curva);
}
.ck-video__play:hover > span:first-child { transform: scale(1.08); }
.ck-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.ck-video.is-on .ck-video__play, .ck-video.is-on img { display: none; }

/* ══════════════════════════════════════════════════════ CATÁLOGO ══════════ */

.ck-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 40px; max-width: 900px; }
.ck-catbloco { margin-bottom: 52px; }
.ck-catbloco__cabeca { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.ck-catbloco__cabeca h2 { margin: 0; font-size: 1.5rem; }
.ck-catbloco__cabeca a { text-decoration: none; }
.ck-catlista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 20px; }
.ck-catlista a { font-weight: 600; font-size: .9375rem; color: var(--cor-texto); text-decoration: none; padding: 6px 0; display: block; }
.ck-catlista a:hover { color: var(--cor-link-hover); }

/*
 * Título de seção que também é link (o nome da categoria no catálogo completo): o azul
 * sublinhado de link comum destoa de um <h2> de vitrine. Vira o próprio título, com a
 * marca só no hover — o cursor e o :focus continuam anunciando que é clicável.
 */
.ck-cabeca h2 a { color: inherit; text-decoration: none; }
.ck-cabeca h2 a:hover { color: var(--cor-link-hover); text-decoration: underline; text-underline-offset: 6px; }

/* ── Páginas produto×cidade preservadas (template-parts/secoes/geo-lista.php) ── */

.ck-geo__lista {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: var(--largura-conteudo);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px 20px;
}
.ck-geo__lista a { font-weight: 600; font-size: .9375rem; color: var(--cor-texto); text-decoration: none; padding: 6px 0; display: block; }
.ck-geo__lista a:hover { color: var(--cor-link-hover); }

/*
 * Variante COMPACTA — o hub de categoria. Grade de links titulada virou linha de texto
 * corrida: lá a lista é utilitária (existe para a página preservada receber link interno,
 * e 45 das 47 já recebem outro do city hub), então título + subtítulo pesavam como seção
 * de conteúdo sem serem uma. Os links são os mesmos; muda só o peso.
 *
 * A cor é a MESMA `--cor-texto-suave` já usada no subtítulo de `.ck-cabeca p` — token que
 * o fd_impeccable já aprova sobre o fundo claro. Não inventar cinza novo aqui.
 */
.ck-geo--compacta { padding-top: 0; padding-bottom: 48px; }
.ck-geo--compacta .ck-geo__rotulo {
	max-width: var(--largura-conteudo);
	margin: 0 auto 4px;
	font-family: var(--fonte-titulo);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cor-texto-suave);
}
.ck-geo--compacta .ck-geo__lista { display: block; font-size: .875rem; line-height: 1.85; color: var(--cor-texto-suave); }
.ck-geo--compacta .ck-geo__lista li { display: inline; }
/* Separador decorativo: `content` não entra na árvore de acessibilidade, o leitor de
   tela continua ouvindo só os links. */
.ck-geo--compacta .ck-geo__lista li:not(:last-child)::after { content: " · "; }
.ck-geo--compacta .ck-geo__lista a { display: inline; padding: 0; font-size: inherit; font-weight: 500; color: var(--cor-texto-suave); }
.ck-geo--compacta .ck-geo__lista a:hover { color: var(--cor-link-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════ RODAPÉ ═══════════ */

.ck-footer { background: var(--cor-marca); color: var(--cor-sobre-roxo); padding: 48px 28px 24px; }
.ck-footer a { color: var(--cor-texto-claro); text-decoration: none; }
.ck-footer a:hover { color: var(--cor-fundo); }

.ck-footer__grid {
	max-width: var(--largura-conteudo);
	margin: 0 auto;
	display: grid;
	/* 5ª coluna deliberadamente livre: espaço reservado para o bloco do GBP crescer. */
	grid-template-columns: 1.85fr 1fr 1fr 1.2fr;
	gap: 34px;
	align-items: start;
}
.ck-footer__marca-topo { display: flex; gap: 18px; align-items: center; }
/*
 * O `color` aqui não é enfeite: o box é CLARO dentro de um rodapé escuro, então tudo que
 * cair dentro dele precisa de cor escura. Sem esta linha, o fallback de texto do
 * footer.php (o <strong> que aparece quando não há logo.png) herda o #EFE3FB do rodapé e
 * fica em 1,23:1 sobre o branco — o nome da marca some. Enquanto houver logo enviada
 * ninguém vê o problema, o que é exatamente o motivo de ele ter passado despercebido.
 */
.ck-footer__logo { background: var(--cor-fundo); color: var(--cor-marca); border-radius: 18px; padding: 14px 18px; display: inline-block; box-shadow: 0 8px 20px rgba(0,0,0,.2); flex-shrink: 0; }
.ck-footer__logo img { height: 74px; width: auto; }
.ck-footer__sobre { font-size: .875rem; color: var(--cor-texto-claro); margin: 0; line-height: 1.6; }
.ck-footer__redes { display: flex; gap: 10px; margin-top: 20px; }
.ck-footer__redes a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,.12); color: var(--cor-fundo);
	transition: background var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}
.ck-footer__redes a:hover { background: var(--cor-magenta); transform: translateY(-2px); }

.ck-footer__titulo { font-family: var(--fonte-titulo); font-weight: 600; font-size: .875rem; color: var(--cor-fundo); margin: 0 0 14px; }
.ck-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ck-footer__col a { font-size: .90625rem; }
.ck-footer__hub { margin-top: 3px; }
.ck-footer__hub a { color: var(--cor-fundo); font-weight: 700; }

.ck-footer__nota { display: inline-flex; align-items: baseline; gap: 7px; margin-bottom: 6px; }
.ck-footer__nota-num { font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.625rem; color: var(--cor-amarelo); line-height: 1; }
.ck-footer__nota-estrelas { font-size: .875rem; color: var(--cor-amarelo); letter-spacing: 1px; }
.ck-footer__nota-legenda { font-size: .84375rem; color: var(--cor-texto-claro); margin: 0 0 14px; }
.ck-footer__nome { font-family: var(--fonte-titulo); font-weight: 600; font-size: .9375rem; color: var(--cor-fundo); margin: 0 0 8px; line-height: 1.3; }
.ck-footer__nome span { color: var(--cor-texto-claro); font-weight: 400; }
.ck-footer__gbp address { font-style: normal; font-size: .8125rem; color: var(--cor-texto-claro); line-height: 1.6; margin: 0 0 10px; }
.ck-footer__tel { display: block; font-size: .84375rem; color: var(--cor-fundo) !important; font-weight: 700; margin-bottom: 10px; }
.ck-footer__perfil { font-size: .84375rem; color: var(--cor-fundo) !important; font-weight: 700; }

.ck-footer__barra {
	max-width: var(--largura-conteudo);
	margin: 30px auto 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.15);
	display: flex; justify-content: space-between; align-items: center;
	flex-wrap: wrap; gap: 14px;
}
.ck-footer__inst { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: .875rem; }
.ck-footer__inst > span { color: rgba(255,255,255,.28); }
.ck-footer__wa { display: inline-flex; align-items: center; gap: 6px; color: var(--cor-fundo) !important; font-weight: 700; }
.ck-footer__wa svg { width: 14px; height: 14px; }
.ck-footer__topo {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--fonte-titulo); font-weight: 600; font-size: .84375rem;
	color: var(--cor-fundo) !important;
	background: rgba(255,255,255,.12);
	border-radius: var(--raio-max);
	padding: 9px 18px;
	transition: background var(--dur-media) var(--curva), transform var(--dur-media) var(--curva);
}
.ck-footer__topo:hover { background: var(--cor-magenta); transform: translateY(-2px); }

.ck-footer__legal {
	max-width: var(--largura-conteudo);
	margin: 16px auto 0;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	font-size: .78125rem; color: var(--cor-migalha);
}
.ck-footer__legal a { color: var(--cor-sobre-roxo); font-weight: 700; }

@media (max-width: 1000px) { .ck-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) {
	.ck-footer__grid { grid-template-columns: 1fr; }
	.ck-footer__marca-topo { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════ FLOAT ════════════ */

.ck-float {
	position: fixed; bottom: 24px; right: 24px; z-index: 55;
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%;
	background: var(--cor-whatsapp); color: var(--cor-fundo);
	box-shadow: var(--sombra-wa);
	transition: transform var(--dur-media) var(--curva), box-shadow var(--dur-media) var(--curva);
}
.ck-float:hover { transform: translateY(-3px) scale(1.05); color: var(--cor-fundo); box-shadow: 0 12px 28px rgba(24,134,71,.6); }
.ck-float svg { width: 34px; height: 34px; }
.ck-drawer-on .ck-float { display: none; }

/* ══════════════════════════════════════════════ FAIXA MAIS ALUGADOS ═══════ */

/*
 * A faixa é uma BANDA de fundo lilás sangrando de ponta a ponta — é o que o desenho
 * da Mesa faz (<section id="faixa" style="background:#FBF7FF">, sem max-width). Quem
 * é limitado a 1000px é o leque lá dentro, não a seção.
 *
 * Sem este fundo o marquee ficava #FBF7FF sobre o branco do body: 1,06:1, invisível.
 * O lilás é cor de FUNDO (o theme.json a nomeia "Lilás de fundo") e tinha virado a cor
 * do TEXTO na conversão de 26/07 — os papéis estavam trocados.
 */
.ck-faixa { position: relative; margin: 0 auto; padding: 72px 28px 56px; overflow: hidden; background: var(--cor-superficie); }

/*
 * O marquee é CAMADA DE FUNDO (absolute atrás das cartas), não um irmão empilhado.
 * Não pausa no hover: é decoração pura pela definição literal da WCAG, e o único
 * mecanismo de parada é o prefers-reduced-motion (regra global no base.css).
 */
.ck-marquee {
	position: absolute;
	top: 50%; left: 0; right: 0;
	transform: translateY(-50%);
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* #000 aqui nao e cor: numa mask, preto = opaco e transparente = recortado (canal alfa). */
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ck-marquee__track {
	display: flex;
	align-items: center;
	gap: 28px;
	width: max-content;
	/* ~78px/s MEDIDO. Trocar a velocidade = trocar a duração proporcional à largura. */
	animation: ck-marquee 30s linear infinite;
}
.ck-marquee__track span {
	font-family: var(--fonte-titulo);
	font-weight: 700;
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	/* Roxo da marca a 16% sobre o lilás: o texto é TEXTURA de fundo, não leitura.
	   É decoração (aria-hidden), então não responde à régua de contraste. */
	color: var(--cor-marca);
	opacity: .16;
	white-space: nowrap;
	line-height: 1;
}
/* A bola TAMBÉM casa com `.ck-marquee__track span`, que tem especificidade maior —
   por isso cada propriedade aqui precisa do !important, inclusive a opacidade. */
.ck-marquee__bola { color: var(--cor-amarelo) !important; opacity: .55 !important; font-size: 1.5rem !important; }
@keyframes ck-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/*
 * O leque ABRE PRESO À ROLAGEM (scrubbed) — assets/js/leque.js. As cartas saem
 * empilhadas no centro e se afastam conforme a seção sobe na viewport; subindo,
 * fecham. Não é animação disparada por entrada em tela.
 *
 * O estado escrito AQUI é o do fim do gesto (aberto), de propósito: sem o JS a
 * seção fica exatamente como estava no ar antes de a rolagem existir. O JS só
 * sobrescreve o transform inline — quem chega sem ele não perde nada.
 *
 * --step é o ÚNICO botão da abertura: o quanto cada carta lateral se afasta do
 * centro. 213px guarda a mesma sobreposição do componente do cofre (185px para
 * carta de 260px), reescalada para os 300px daqui.
 */
.ck-leque {
	position: relative; z-index: 1;
	height: 420px;
	max-width: 1000px;
	margin: 0 auto;
	--step: 213px;
}
.ck-leque__carta {
	position: absolute;
	left: 50%; top: 24px;
	width: 300px; height: 340px;
	border-radius: var(--raio-g);
	overflow: hidden;
	box-shadow: var(--sombra-card);
	text-decoration: none;
	transform-origin: bottom center;
	transform: translateX(calc(-50% + var(--step) * var(--dir)))
		translateY(var(--dy)) rotate(var(--rot)) scale(var(--esc));
	transition: transform var(--dur-lenta) var(--curva), box-shadow var(--dur-lenta) var(--curva);
}
/* A do meio passa por cima das duas laterais enquanto o leque está fechado. */
.ck-leque__carta:nth-child(2) { z-index: 5; }
.ck-leque__carta img, .ck-leque__carta .ck-sem-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-leque__carta:hover, .ck-leque__carta:focus-visible {
	z-index: 20;
	/* Mantém o deslocamento lateral: sem ele a carta pularia para o centro no hover. */
	transform: translateX(calc(-50% + var(--step) * var(--dir)))
		translateY(-6px) rotate(0) scale(1.04);
	box-shadow: var(--sombra-alta);
}
.ck-leque__titulo {
	position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 2;
	font-family: var(--fonte-titulo); font-weight: 600; font-size: 1.375rem;
	color: var(--cor-fundo); line-height: 1.15;
}
/*
 * No estreito o leque vira COLUNA em fluxo — as cartas saem do absolute, senão
 * empilhariam umas sobre as outras no left:50%. O JS reconhece este corte e
 * devolve o transform ao CSS abaixo de 900px.
 */
@media (max-width: 900px) {
	.ck-leque { height: auto; max-width: none; display: flex; flex-direction: column; align-items: center; gap: 18px; }
	.ck-leque__carta { position: relative; left: auto; top: auto; transform: none; width: 100%; max-width: 340px; height: 260px; }
	.ck-marquee { display: none; }
}
/*
 * Movimento reduzido trava o leque ABERTO — não em transform:none, que com as
 * cartas em absolute empilharia as três no mesmo ponto. O gesto some, o desenho fica.
 */
@media (prefers-reduced-motion: reduce) {
	.ck-leque__carta { transition: none !important; }
}