/* ==========================================================================
   Cúpula em Saúde — Seção "Prêmio Inovo - Home"
   Bloco de duas colunas (imagem + texto) no padrão 21st.dev, com as fontes e
   cores da Cúpula. À esquerda, foto arredondada com card flutuante de
   comunidade (avatares + selo); à direita, eyebrow + título, divisor em
   gradiente, parágrafos e botão "Saiba mais" (azul forte, hover verde).

   Inserção: shortcode [cupula_premio_inovo]. Edição total pelo menu
   "Prêmio Inovo". Tokens globais em custom.css.
   ========================================================================== */

.cupula-inovo {
	--in-eyebrow: #45a397;
	--in-titulo: var(--cs-color-navy, #02065F);
	--in-texto: var(--cs-color-gray-900, #54595F);
	--in-divisor-1: var(--cs-color-navy, #02065F);
	--in-divisor-2: var(--cs-color-cyan, #00A0CC);
	--in-glow: #eafff4;
	--in-card-bg: #ffffff;
	--in-card-texto: var(--cs-color-navy, #02065F);
	--in-selo-bg: var(--cs-color-navy, #02065F);
	--in-selo-texto: #ffffff;

	--in-raio: 22px;
	--in-gap: clamp(28px, 5vw, 72px);

	position: relative;
	padding: clamp(32px, 6vw, 88px) 20px;
	font-family: var(--cs-font-body, "Nunito Sans", sans-serif);
	overflow: hidden;
}

/* Halo suave de fundo (como o blur do padrão de referência). */
.cupula-inovo::before {
	content: "";
	position: absolute;
	top: -18%;
	left: 50%;
	width: min(620px, 80%);
	aspect-ratio: 1 / 1;
	transform: translateX(-50%);
	background: var(--in-glow);
	border-radius: 50%;
	filter: blur(120px);
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
}

.cupula-inovo__wrap {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--in-gap);
	max-width: 1120px;
	margin: 0 auto;
}
.cupula-inovo.is-invertido .cupula-inovo__wrap {
	flex-direction: row-reverse;
}

/* ---- Coluna da imagem ---------------------------------------------------- */
.cupula-inovo__media {
	position: relative;
	flex: 0 0 auto;
	width: min(460px, 100%);
	margin: 0;
	border-radius: var(--in-raio);
	overflow: hidden;
	box-shadow: 0 30px 70px -20px rgba(2, 6, 95, 0.45);
}
.cupula-inovo__foto {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 560px;
	object-fit: cover;
	aspect-ratio: 4 / 5;
}

/* Card flutuante de comunidade. */
.cupula-inovo__card {
	position: absolute;
	left: clamp(16px, 4%, 32px);
	bottom: clamp(16px, 4%, 32px);
	right: auto;
	max-width: 76%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--in-card-bg);
	box-shadow: 0 16px 40px -12px rgba(2, 6, 95, 0.35);
}
.cupula-inovo__avatares {
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
}
.cupula-inovo__avatar,
.cupula-inovo__selo {
position: relative;
    width: 38px;
    height: 38px !important;
    border-radius: 50% !important;
    border: 3px solid var(--in-card-bg) !important;
    margin-left: -14px !important;
    z-index: var(--z, 1);
    transition: transform 0.25s ease;
}
.cupula-inovo__avatar:first-child { margin-left: 0!important; }
.cupula-inovo__avatar { object-fit: cover; }
.cupula-inovo__card:hover .cupula-inovo__avatar,
.cupula-inovo__card:hover .cupula-inovo__selo {
	transform: translateY(-3px);
}
.cupula-inovo__selo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--in-selo-bg);
	color: var(--in-selo-texto);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.cupula-inovo__card-texto {
	margin: 0 !important;
	color: var(--in-card-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	max-width: 140px;
}

/* ---- Coluna do conteúdo -------------------------------------------------- */
.cupula-inovo__conteudo {
	flex: 1 1 0;
	max-width: 520px;
}
.cupula-inovo__eyebrow {
	display: block;
	margin: 0 0 10px;
	color: var(--in-eyebrow);
	font-family: "Geist Mono", ui-monospace, monospace;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
}
.cupula-inovo__titulo {
	margin: 0 0 16px;
	color: var(--in-titulo);
	font-family: "Anton", "Nunito Sans", Arial, sans-serif;
	font-size: clamp(30px, 4.4vw, 50px);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.cupula-inovo__divisor {
	display: block;
	width: 96px;
	height: 3px;
	margin: 0 0 26px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--in-divisor-1) 0%, var(--in-divisor-2) 100%);
}
.cupula-inovo__texto p {
	margin: 0 0 16px;
	color: var(--in-texto);
	font-size: clamp(15px, 1.6vw, 17px);
	line-height: 1.7;
}
.cupula-inovo__texto p:last-child { margin-bottom: 0; }

/* ---- Ação (botão) --------------------------------------------------------
   O botão usa o padrão global "botao-padrao-01 pb-md" (estilos em botoes.css,
   cores no menu "Botões"). Aqui cuidamos apenas do espaçamento. */
.cupula-inovo__acao {
	margin-top: clamp(24px, 3vw, 34px);
}

/* ---- Reveal suave (JS adiciona .is-visible) ------------------------------ */
.cupula-inovo .qp-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.cupula-inovo.is-visible .qp-reveal { opacity: 1; transform: none; }
.cupula-inovo.is-visible .cupula-inovo__conteudo { transition-delay: 0.12s; }

/* ---- Responsivo ---------------------------------------------------------- */
@media (max-width: 860px) {
	.cupula-inovo__wrap,
	.cupula-inovo.is-invertido .cupula-inovo__wrap {
		flex-direction: column;
	}
	.cupula-inovo__media { width: 100%; max-width: 520px; }
	.cupula-inovo__foto { aspect-ratio: 16 / 11; max-height: 420px; }
	.cupula-inovo__conteudo { max-width: 560px; width: 100%; text-align: left; }
}

@media (max-width: 480px) {
	.cupula-inovo__card {
		left: 12px;
		right: 12px;
		bottom: 12px;
		max-width: none;
	}
	.cupula-inovo__acao .elementor-button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cupula-inovo .qp-reveal { opacity: 1; transform: none; transition: none; }
	.cupula-inovo__avatar,
	.cupula-inovo__selo { transition: none; }
}