/* ==========================================================================
   Cúpula em Saúde — Seção "Quem Participa do Evento"
   Painel navy arredondado com cabeçalho (eyebrow + título + CTA pílula com
   seta) e grade de 6 cards numerados (um pode ficar em destaque). Inspirada
   na seção "planos" do 11e.vercel.app, com as fontes e cores da Cúpula.

   Inserção: shortcode [cupula_participa]. Edição total pelo menu
   "Quem Participa do Evento". Tokens em custom.css.
   ========================================================================== */

.cupula-participa {
	--qp-bg-1: var(--cs-color-navy, #02065F);
	--qp-bg-2: #010430;
	--qp-eyebrow: var(--cs-color-cyan, #00A0CC);
	--qp-titulo: #ffffff;
	--qp-intro: #c7cbe8;
	--qp-card-bg: #080b52;
	--qp-card-border: #262c6b;
	--qp-card-destaque: var(--cs-color-cyan, #00A0CC);
	--qp-rotulo: #6c8ccb;
	--qp-card-titulo: #ffffff;
	--qp-card-texto: #aab2d8;
	--qp-numero: #3a4488;
	--qp-seta: var(--cs-color-cyan, #00A0CC);
	--qp-btn-bg: #d6f1f8;                         /* pílula + círculo (normal) */
	--qp-btn-texto: var(--cs-color-navy, #02065F); /* texto + seta (normal) */
	--qp-btn-bg-h: var(--cs-color-navy, #02065F);  /* pílula + círculo (hover) */
	--qp-btn-texto-h: #d6f1f8;                     /* texto + seta (hover) */

	--qp-raio: 28px;
	--qp-raio-card: 16px;
	--qp-gap: clamp(16px, 1.6vw, 24px);

	padding: clamp(28px, 5vw, 64px) 20px;
	font-family: var(--cs-font-body, "Nunito Sans", sans-serif);
}

/* ---- Painel (faixa) ------------------------------------------------------ */
.cupula-participa__faixa {
	position: relative;
	overflow: hidden;
	max-width: 1180px;
	margin: 0 auto;
	padding: clamp(28px, 4.5vw, 64px);
	border-radius: var(--qp-raio);
	background:
		radial-gradient(120% 120% at 85% 10%, color-mix(in srgb, var(--qp-eyebrow) 12%, transparent) 0%, transparent 46%),
		linear-gradient(155deg, var(--qp-bg-1) 0%, var(--qp-bg-2) 100%);
	box-shadow: 0 30px 80px rgba(1, 4, 48, 0.45);
}

/* Ícone decorativo (marca) no canto superior direito — suave e flutuante. */
.cupula-participa__marca {
	position: absolute;
	top: clamp(-10px, 1vw, 28px);
	right: clamp(8px, 3vw, 48px);
	width: clamp(120px, 17vw, 230px);
	height: auto;
	opacity: 0; /* revelado suavemente quando a seção entra na tela */
	pointer-events: none;
	user-select: none;
	z-index: 0;
	filter: drop-shadow(0 12px 34px rgba(1, 4, 48, 0.35));
	transition: opacity 1.2s ease;
	animation: cupula-qp-marca-flutua 9s ease-in-out infinite alternate;
}
.cupula-participa.is-visible .cupula-participa__marca { opacity: 0.05; }

@keyframes cupula-qp-marca-flutua {
	from { transform: translateY(0) rotate(-1.2deg); }
	to   { transform: translateY(-14px) rotate(1.6deg); }
}

.cupula-participa__faixa > *:not(.cupula-participa__marca) {
	position: relative;
	z-index: 1;
}

/* ---- Cabeçalho ----------------------------------------------------------- */
.cupula-participa__cabecalho {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: clamp(20px, 4vw, 48px);
	margin-bottom: clamp(28px, 4vw, 52px);
}
.cupula-participa__eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var(--qp-eyebrow);
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.cupula-participa__titulo {
	margin: 0 0 16px;
	max-width: 18ch;
	color: var(--qp-titulo);
	font-family: "Anton", "Nunito Sans", Arial, sans-serif;
	font-size: clamp(30px, 4.6vw, 52px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.cupula-participa__intro {
	margin: 0;
	max-width: 52ch;
	color: var(--qp-intro);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.65;
}

/* ---- CTA — réplica do botao-padrao-05 (pílula + círculo que invertem) ------
   Grande como o botão atual: pílula com texto + círculo separado com a seta
   diagonal que desliza. No hover, pílula, círculo e seta invertem de cor. */
.cupula-participa__cta {
	--cta-size: 3.1em;   /* diâmetro do círculo = altura da pílula */
	--cta-gap: 0.4em;    /* vão entre pílula e círculo */
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--cta-gap);
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--qp-btn-texto);
	font-family: var(--cs-font-button, "Poppins", sans-serif);
	font-weight: 600;
	font-size: clamp(16px, 1.5vw, 18px); /* tamanho grande */
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
}
.cupula-participa__cta:focus-visible {
	outline: 2px solid var(--qp-btn-bg-h);
	outline-offset: 3px;
}
/* Pílula (o texto). */
.cupula-participa__cta-texto {
	display: inline-flex;
	align-items: center;
	min-height: var(--cta-size);
	padding: 0 1.5em;
	border-radius: 999px;
	background: var(--qp-btn-bg);
	color: var(--qp-btn-texto);
	white-space: nowrap;
	transition: background-color 0.5s ease, color 0.5s ease;
}
/* Círculo com as duas setas (deslizam na diagonal). */
.cupula-participa__cta-circ {
	position: relative;
	overflow: hidden;
	width: var(--cta-size);
	height: var(--cta-size);
	border-radius: 50%;
	background: var(--qp-btn-bg);
	flex: 0 0 auto;
	transition: background-color 0.5s ease;
}
.cupula-participa__cta-circ svg {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 42%;
	height: 42%;
	color: var(--qp-btn-texto);
	transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s ease;
}
.cupula-participa__cta-circ .is-1 { transform: translate(0, 0); }
.cupula-participa__cta-circ .is-2 { transform: translate(-130%, 130%); }
/* Hover/foco: inverte pílula, círculo e seta (juntos). */
.cupula-participa__cta:hover .cupula-participa__cta-texto,
.cupula-participa__cta:focus-visible .cupula-participa__cta-texto {
	background: var(--qp-btn-bg-h);
	color: var(--qp-btn-texto-h);
}
.cupula-participa__cta:hover .cupula-participa__cta-circ,
.cupula-participa__cta:focus-visible .cupula-participa__cta-circ {
	background: var(--qp-btn-bg-h);
}
.cupula-participa__cta:hover .cupula-participa__cta-circ svg,
.cupula-participa__cta:focus-visible .cupula-participa__cta-circ svg {
	color: var(--qp-btn-texto-h);
}
.cupula-participa__cta:hover .cupula-participa__cta-circ .is-1,
.cupula-participa__cta:focus-visible .cupula-participa__cta-circ .is-1 { transform: translate(130%, -130%); }
.cupula-participa__cta:hover .cupula-participa__cta-circ .is-2,
.cupula-participa__cta:focus-visible .cupula-participa__cta-circ .is-2 { transform: translate(0, 0); }

/* ---- Carrossel ----------------------------------------------------------- */
.cupula-participa__carousel {
	position: relative;
}

/* Janela que recorta os slides. Padding vertical dá folga para a elevação
   (hover) e a sombra dos cards não serem cortadas em cima/embaixo. */
.cupula-participa__viewport {
	overflow: hidden;
	padding: 10px 0 16px;
}
/* Fallback sem JS: rolagem nativa com snap (JS troca para overflow: hidden). */
.cupula-participa__carousel:not(.is-ready) .cupula-participa__viewport {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.cupula-participa__carousel:not(.is-ready) .cupula-participa__viewport::-webkit-scrollbar { display: none; }
.cupula-participa__carousel:not(.is-ready) .cupula-participa__item { scroll-snap-align: start; }

/* Trilho: todos os cards em uma linha; desliza no eixo X. */
.cupula-participa__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch; /* garante cards de mesma altura */
	gap: var(--qp-gap);
}
.cupula-participa__carousel.is-ready .cupula-participa__lista {
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

.cupula-participa__item {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--qp-gap) * 2)) / 3); /* 3 visíveis no desktop */
	padding: clamp(22px, 2.4vw, 32px);
	padding-right: clamp(54px, 5vw, 64px);
	border-radius: var(--qp-raio-card);
	background: var(--qp-card-bg);
	border: 1px solid var(--qp-card-border);
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.cupula-participa__item:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--qp-card-destaque) 55%, var(--qp-card-border));
	box-shadow: 0 18px 40px rgba(1, 4, 48, 0.4);
}

/* Card em destaque (borda e brilho na cor de realce). */
.cupula-participa__item.is-destaque {
	border-color: var(--qp-card-destaque);
	background:
		linear-gradient(160deg, color-mix(in srgb, var(--qp-card-destaque) 14%, var(--qp-card-bg)) 0%, var(--qp-card-bg) 60%);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--qp-card-destaque) 40%, transparent),
		0 20px 46px color-mix(in srgb, var(--qp-card-destaque) 20%, transparent);
}

.cupula-participa__item-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}
.cupula-participa__numero {
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 600;
	color: var(--qp-numero);
	letter-spacing: 0.05em;
}
.cupula-participa__rotulo {
	color: var(--qp-rotulo);
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.3;
}
.cupula-participa__item-titulo {
	margin: 0 0 12px;
	color: var(--qp-card-titulo);
	font-family: var(--cs-font-heading, "Nunito Sans", sans-serif);
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.cupula-participa__item-texto {
	margin: 0;
	color: var(--qp-card-texto);
	font-size: 14.5px;
	line-height: 1.6;
}

/* Botão circular (seta) no canto superior direito do card. */
.cupula-participa__seta {
	position: absolute;
	top: clamp(20px, 2.3vw, 30px);
	right: clamp(20px, 2.3vw, 30px);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--qp-seta) 45%, transparent);
	color: var(--qp-seta);
	text-decoration: none;
	transition: background-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}
.cupula-participa__seta svg { width: 18px; height: 18px; transition: transform 0.3s ease; }
.cupula-participa__seta:hover {
	background: var(--qp-seta);
	color: var(--qp-bg-1);
	transform: translateY(-2px);
}
.cupula-participa__seta:hover svg { transform: translateX(2px); }

/* ---- Controles do carrossel (bullets + setas) ---------------------------- */
.cupula-participa__controles {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: clamp(22px, 3vw, 34px);
}
.cupula-participa__controles[hidden] { display: none; }

/* Bullets "pílula": o ativo se alonga suavemente. */
.cupula-participa__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.cupula-participa__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--qp-seta) 32%, transparent);
	cursor: pointer;
	transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.35s ease;
}
.cupula-participa__dot:hover { background: color-mix(in srgb, var(--qp-seta) 55%, transparent); }
.cupula-participa__dot.is-active {
	width: 28px;
	background: var(--qp-seta);
}
.cupula-participa__dot:focus-visible {
	outline: 2px solid var(--qp-seta);
	outline-offset: 3px;
}

/* Setas prev/next. */
.cupula-participa__navs {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}
.cupula-participa__nav {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--qp-seta) 40%, transparent);
	background: transparent;
	color: var(--qp-seta);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, opacity 0.3s ease, border-color 0.3s ease;
}
.cupula-participa__nav svg { width: 20px; height: 20px; }
.cupula-participa__nav:hover:not([disabled]) {
	background: var(--qp-seta);
	color: var(--qp-bg-1);
	transform: translateY(-2px);
}
.cupula-participa__nav:focus-visible {
	outline: 2px solid var(--qp-seta);
	outline-offset: 3px;
}
.cupula-participa__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	border-color: color-mix(in srgb, var(--qp-seta) 20%, transparent);
}

/* ---- Reveal suave -------------------------------------------------------- */
.cupula-participa .qp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.cupula-participa.is-visible .qp-reveal { opacity: 1; transform: none; }
/* Escalonamento dos cards. */
.cupula-participa.is-visible .cupula-participa__item {
	animation: cupula-qp-card-in 0.6s ease both;
}
.cupula-participa.is-visible .cupula-participa__item:nth-child(1) { animation-delay: 0.05s; }
.cupula-participa.is-visible .cupula-participa__item:nth-child(2) { animation-delay: 0.12s; }
.cupula-participa.is-visible .cupula-participa__item:nth-child(3) { animation-delay: 0.19s; }
.cupula-participa.is-visible .cupula-participa__item:nth-child(4) { animation-delay: 0.26s; }
.cupula-participa.is-visible .cupula-participa__item:nth-child(5) { animation-delay: 0.33s; }
.cupula-participa.is-visible .cupula-participa__item:nth-child(6) { animation-delay: 0.40s; }

@keyframes cupula-qp-card-in {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 1023px) {
	.cupula-participa__item { flex-basis: calc((100% - var(--qp-gap)) / 2); } /* 2 visíveis */
}
@media (max-width: 860px) {
	.cupula-participa__cabecalho {
		flex-direction: column;
		align-items: flex-start;
	}
}
@media (max-width: 639px) {
	.cupula-participa__item { flex-basis: 100%; } /* 1 visível */
	.cupula-participa__cta { width: 100%; justify-content: space-between; }
	.cupula-participa__controles { flex-direction: column-reverse; gap: 16px; }
	.cupula-participa__dots { justify-content: center; }
}

/* ---- Acessibilidade: reduzir movimento ----------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.cupula-participa .qp-reveal { opacity: 1; transform: none; transition: none; }
	.cupula-participa.is-visible .cupula-participa__item { animation: none; }
	.cupula-participa__item,
	.cupula-participa__cta,
	.cupula-participa__seta,
	.cupula-participa__cta-circ svg,
	.cupula-participa__nav,
	.cupula-participa__dot { transition: none; }
	.cupula-participa__carousel.is-ready .cupula-participa__lista { transition: none; }
	.cupula-participa__marca { animation: none; transition: none; }
}