/*
 * LP — 2º Simpósio Turismo de Experiência
 * Design system Rotas do Pinhão (ver P:\Local Sites\~Design Systems\design-system-rota-pinhao-dev.md).
 * Tudo escopado em body.chb-lp-simposio — zero efeito em outras páginas.
 */

body.chb-lp-simposio {
	/* --rp-primary (marrom-terra) fica reservado pra texto/títulos/links —
	   ver uso explícito abaixo, não é injetado como --chb-primary genérico
	   porque --chb-primary também pinta o fundo do botão (que precisa ser
	   --rp-cta, o laranja). */
	--chb-lp-brown: #7A3200;
	--chb-lp-brown-2: #7A4430;

	/* --rp-cta (laranja araucária) — CTA e ação. Texto branco no botão a
	   pedido do cliente (2026-09-24) — o design system original recomendava
	   texto escuro aqui (#FF7503 + branco é 2.69:1, abaixo de AA; ver
	   design-system-rota-pinhao-dev.md), decisão de marca documentada lá. */
	--chb-primary: #FF7503;
	--chb-primary-dark: #D4650A;
	--chb-primary-rgb: 255, 117, 3;
	--chb-primary-ink: #FFFFFF;
	--chb-accent: #FF7503;
	--chb-accent-rgb: 255, 117, 3;
	--chb-accent-text: #9A4200; /* laranja como cor de texto, AA (6.66:1) */

	/* Marrom-terra (--rp-primary) também como fundo escuro das seções
	   invertidas (palestrantes/rodapé/CTA) — antes era um verde-floresta de
	   campanha; trocado a pedido do cliente pelo marrom oficial do design
	   system, igual ao --chb-lp-brown usado em texto/links. */
	--chb-secondary: #7A3200;
	--chb-secondary-rgb: 122, 50, 0;

	/* Neutros do design system (--rp-on-surface / --rp-on-var / --rp-outline). */
	--chb-ink: #1C1B16;
	--chb-ink-soft: #4D4842;
	--chb-ink-mute: #8B8377;
	--chb-paper: #F4F3E9;
	--chb-paper-alt: #E8E8E0;
	--chb-card-bg: #FFFFFF;
	--chb-line: #D0CBB9;

	--chb-radius: 9px;
	--chb-radius-lg: 14px;
	--chb-shadow: 0 12px 35px rgba(28, 27, 22, .08);

	/* Par tipográfico oficial (googleFontsUrl do design system): Playfair
	   Display (display) + Inter (interface/corpo). */
	--chb-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--chb-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--chb-font-condensed: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	--chb-title-tracking: -0.01em;
	--chb-title-weight: 700;
}

/* ── Links/botões: --chb-primary segue laranja (é o botão), mas texto puro
   e o botão-fantasma fora da hero usam o marrom-terra — --rp-primary é a
   cor de "texto/título/link" no guia, --rp-cta só pinta ação. Escopado ao
   conteúdo (chb-prose/link-arrow), nunca um "a" genérico — isso venceria
   por especificidade a cor própria do menu/rodapé/cards e quebraria o
   header (branco sobre a hero). */
body.chb-lp-simposio .chb-link-arrow,
body.chb-lp-simposio .chb-prose a,
body.chb-lp-simposio .chb-btn--ghost { color: var(--chb-lp-brown); }
body.chb-lp-simposio .chb-btn--ghost:hover { background: rgba(122, 50, 0, .08); }
/* Botão-fantasma DENTRO da hero (fundo escuro/foto) — borda clara, não marrom. */
body.chb-lp-simposio .chb-hero .chb-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .6); }
body.chb-lp-simposio .chb-hero .chb-btn--ghost:hover { background: rgba(255, 255, 255, .12); }
/* Dentro de seção escura (palestrantes/invert) o link segue branco, nunca marrom. */
body.chb-lp-simposio .chb-section--invert a:not(.chb-btn) { color: #fff; }

/* ── Hero: véu escuro uniforme sobre a seção inteira (leitura do H1).
   z-index explícito garante que fica por cima do vídeo sempre, sem
   depender só da ordem no HTML — a célula do grid inteira é coberta
   (largura/altura por "stretch" padrão do grid), não só o que o vídeo
   (maior que a seção, cortado por fora) ocupa visualmente em cada
   momento. ── */
body.chb-lp-simposio .chb-hero__overlay {
	position: relative; z-index: 1;
	background: rgba(10, 13, 8, .8);
}
body.chb-lp-simposio .chb-hero__eyebrow {
	color: #FFB785; font-family: var(--chb-font-condensed); font-size: 10px;
	background: none; padding: 0; border-radius: 0;
}
body.chb-lp-simposio .chb-hero__badge-pill { border-color: rgba(255, 183, 133, .55); color: #fff; }
body.chb-lp-simposio .chb-hero__title { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 4.5rem); }
body.chb-lp-simposio .chb-hero__sub { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); }

/* Linha de metadados (data/horário/local) com ícones — campo meta_html do Hero. */
body.chb-lp-simposio .chb-hero__meta {
	display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0 0 var(--chb-space-3);
}
body.chb-lp-simposio .chb-hero__meta > p { margin: 0; display: flex; align-items: center; gap: .6rem; }
body.chb-lp-simposio .chb-hero__meta img { width: 28px; height: 28px; flex-shrink: 0; }
body.chb-lp-simposio .chb-hero__meta strong { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
body.chb-lp-simposio .chb-hero__meta small { display: block; font-size: 12.5px; opacity: .8; font-weight: 400; }

/* Seta pra baixo no botão-fantasma da hero (âncora "Conheça a programação"). */
body.chb-lp-simposio .chb-hero .chb-btn--ghost::after { content: '↓'; margin-left: .55em; }

/* Conteúdo da hero alinhado à esquerda (INSTRUCOES-CH-BUILDER.md: "conteúdo
   alinhado à esquerda") — o layout "centralizado" padrão do plugin centra
   tudo; aqui só o texto muda de alinhamento, o layout continua o mesmo
   (sem coluna de imagem lateral). */
body.chb-lp-simposio .chb-hero__inner { align-items: flex-start; text-align: left; }
body.chb-lp-simposio .chb-hero__eyebrow,
body.chb-lp-simposio .chb-hero__badge-pill,
body.chb-lp-simposio .chb-hero__title,
body.chb-lp-simposio .chb-hero__sub,
body.chb-lp-simposio .chb-hero__text { margin-inline: 0; text-align: left; }
body.chb-lp-simposio .chb-hero__actions { justify-content: flex-start; }

/* "O Futuro do Turismo" (texto+foto) e os pilares logo abaixo (ícones em
   colunas) ficavam com espaço em excesso entre si — aproxima as duas. */
body.chb-lp-simposio #evento { padding-bottom: clamp(1.25rem, .75rem + 1.5vw, 2rem); }
body.chb-lp-simposio #pilares { padding-block: clamp(1rem, .5rem + 1.5vw, 1.75rem); }

/* ── Header: transparente sobre a hero; sólido + blur ao rolar ── */
body.chb-lp-simposio .chb-header {
	position: fixed; top: 0; left: 0; right: 0;
	background: transparent; border-bottom-color: transparent; backdrop-filter: none;
	--chb-header-text: #fff;
	transition: background .25s ease, backdrop-filter .25s ease, border-color .25s ease;
}
body.chb-lp-simposio .chb-header.is-scrolled {
	background: rgba(122, 50, 0, .92);
	backdrop-filter: blur(14px);
	border-bottom-color: rgba(255, 255, 255, .12);
}
/* Logo horizontal branca do cliente (attachment 192) — já vem pronta pra
   fundo escuro, sem precisar de filtro de inversão. */
body.chb-lp-simposio .chb-header__logo img { max-height: 40px; width: auto; }
body.chb-lp-simposio main.chb-main { padding-top: 0; }

@media (prefers-reduced-motion: reduce) {
	body.chb-lp-simposio .chb-header { transition: none; }
}

/* Seções "Texto" usadas nesta LP pra composições sob medida (pilares, temas,
   ecossistema, programação, realização) precisam da largura cheia do shell,
   não da .chb-shell--narrow (780px) padrão do tipo "Texto". */
body.chb-lp-simposio .chb-text .chb-shell--narrow { max-width: var(--chb-shell); }

/* ── Eyebrow das seções com a cor de marca reservada, fora da hero (fundo claro) ── */
body.chb-lp-simposio .chb-section:not(.chb-hero):not(.chb-section--invert) .chb-section__eyebrow {
	color: var(--chb-lp-brown);
	font-family: var(--chb-font-condensed);
}
/* Eyebrow "PALESTRANTES" (fundo marrom-terra escuro): laranja original tinha
   contraste baixo (~3.6:1, abaixo de AA pra texto pequeno) — troca pro
   damasco #FFB785, mesma cor já usada no eyebrow da hero sobre fundo escuro
   (5.75:1, AA), mantendo o mesmo par de cores "claro sobre escuro" do
   design system em vez de inventar uma terceira. */
body.chb-lp-simposio .chb-section--invert .chb-section__eyebrow { color: #FFB785; }

/* Cards de palestrante: interior claro (em vez do branco 6% quase invisível
   sobre o marrom) — texto escuro por cima, muito mais fácil de ler. */
body.chb-lp-simposio #palestrantes .chb-link-card {
	background: var(--chb-card-bg);
	border-color: var(--chb-line);
}
body.chb-lp-simposio #palestrantes .chb-link-card__title,
body.chb-lp-simposio #palestrantes .chb-link-card__claim { color: var(--chb-ink); }
body.chb-lp-simposio #palestrantes .chb-link-card__meta,
body.chb-lp-simposio #palestrantes .chb-link-card__text { color: var(--chb-ink-soft); }
/* Foto do palestrante quadrada (era 4:3, mais baixa). */
body.chb-lp-simposio #palestrantes .chb-link-card__media img,
body.chb-lp-simposio #palestrantes .chb-link-card__media .chb-media-placeholder { aspect-ratio: 1 / 1; }
/* Categoria e nome sempre reservam a altura de 2 linhas (mesmo quando o
   texto cabe em 1), pra o nome/bio começarem na mesma altura em todos os
   cards da fileira, independente do tamanho do rótulo/nome. */
body.chb-lp-simposio #palestrantes .chb-link-card__cat { line-height: 1.3; min-height: 2.6em; }
body.chb-lp-simposio #palestrantes .chb-link-card__title { line-height: 1.15; min-height: 2.3em; }

/* ══════════════════════════════════════════════════════════════════════
   Pilares (O Futuro do Turismo) — colunas planas com divisórias finas,
   sem caixa/sombra de card (a grade nativa .chb-cards é reaproveitada só
   pela responsividade; o visual de "caixa" é removido aqui).
   ══════════════════════════════════════════════════════════════════════ */
.chb-lp-flat-cols .chb-card {
	background: transparent; border: 0; box-shadow: none; padding: 0 1.4rem 0 0;
	border-right: 1px solid var(--chb-line); border-radius: 0;
}
.chb-lp-flat-cols .chb-card:last-child { border-right: 0; }
.chb-lp-flat-cols .chb-card:hover { transform: none; box-shadow: none; }
.chb-lp-flat-cols .chb-card__icon { margin-bottom: .9rem; }
.chb-lp-flat-cols .chb-card__icon img { width: 40px; height: 40px; }
.chb-lp-flat-cols .chb-card__title { font-size: var(--chb-text-lg); margin-bottom: .3em; }
@media (max-width: 767px) {
	.chb-lp-flat-cols .chb-card { border-right: 0; border-bottom: 1px solid var(--chb-line); padding: 0 0 1.4rem; }
	.chb-lp-flat-cols .chb-card:last-child { border-bottom: 0; }
}

/* ══════════════════════════════════════════════════════════════════════
   Sobre o encontro (Conhecimento/Conexões/Inovação/Desenvolvimento) —
   agora dentro do próprio texto+foto, logo abaixo do parágrafo (não mais
   seção separada) — cards nativos, só troca o ícone emoji por <img> SVG.
   ══════════════════════════════════════════════════════════════════════ */
.chb-lp-icon-cards { margin-top: .75rem; gap: .65rem; }
.chb-lp-icon-cards .chb-card__icon img { width: 26px; height: 26px; }
.chb-lp-icon-cards .chb-card { padding: .8rem .7rem; }
.chb-lp-icon-cards .chb-card__title { font-size: 14px; margin-bottom: .2em; }
.chb-lp-icon-cards .chb-card__text { font-size: 12px; line-height: 1.4; }

/* Foto do totem mais estreita, texto (e os 4 cards) com mais espaço. */
@media (min-width: 820px) {
	body.chb-lp-simposio #sobre-encontro .chb-text-image__grid { grid-template-columns: .8fr 1.2fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   Grandes Temas — seção nativa "cards" (repetidor de verdade, editável
   pelo painel do CH Builder). O número (campo "eyebrow" de cada item)
   ganha destaque maior que o padrão pra manter a leitura "01, 02, 03...".
   Cards com largura igual entre si, não importa quantos existirem.
   ══════════════════════════════════════════════════════════════════════ */
#temas .chb-card__eyebrow {
	font-family: var(--chb-font-display); font-weight: 800; font-size: 1.6rem;
	color: var(--chb-lp-brown); letter-spacing: 0; text-transform: none;
}
#temas .chb-card__icon { font-size: 1.5rem; margin-bottom: .3rem; }
/* Título sempre reserva altura de 3 linhas, pra o texto abaixo começar na
   mesma altura em todos os cards, curto ou longo. */
#temas .chb-card__title { font-size: var(--chb-text-lg); line-height: 1.25; min-height: 3.75em; }
@media (min-width: 768px) {
	body.chb-lp-simposio #temas .chb-cards__grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* Título/subtítulo alinhados à esquerda (em vez do centralizado padrão do
   componente) em Palestrantes, Grandes Temas, Para quem é e Realização. */
#palestrantes .chb-section-header,
#temas .chb-section-header,
#para-quem-e .chb-section-header,
#realizacao .chb-section-header {
	text-align: left;
}
#palestrantes .chb-section-header .chb-section__lead,
#temas .chb-section-header .chb-section__lead,
#para-quem-e .chb-section-header .chb-section__lead,
#realizacao .chb-section-header .chb-section__lead {
	margin-inline: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   Ecossistema Reisen — agora texto+foto nativos (imagem em campo próprio,
   editável pelo painel, separada do texto); os ícones (Totem/Municípios/
   .../Reisen TV) viraram uma faixa própria logo abaixo, com selo escuro
   por trás de cada ícone (os SVGs são brancos, pensados pra fundo escuro).
   ══════════════════════════════════════════════════════════════════════ */
body.chb-lp-simposio .chb-prose a.chb-lp-btn-white,
body.chb-lp-simposio .chb-prose a.chb-lp-btn-white:hover { color: #fff; }
/* Título montado à mão no content (pra poder quebrar linha) — mesmo ajuste
   de espaçamento que a Programação precisou. */
#ecossistema .chb-prose .chb-section__title { margin-top: 0 !important; }
#ecossistema .chb-prose .chb-section__eyebrow { margin-bottom: 8px; }

.chb-lp-eco-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 2.5rem; }
.chb-lp-eco-icons > div { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.chb-lp-eco-icons__badge {
	display: flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; border-radius: 50%; background: var(--chb-lp-brown);
}
.chb-lp-eco-icons__badge img { width: 24px; height: 24px; }
.chb-lp-eco-icons span:last-child { font-size: 12.5px; font-weight: 700; color: var(--chb-ink); }

/* Botão "Confirmar presença" — centralizado, próprio, logo abaixo do mapa. */
.chb-lp-confirmar { display: flex; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════
   Programação — cabeçalho (eyebrow+título) e metadados (data/hora) lado a
   lado, linha do tempo horizontal com marcadores numerados (desktop) →
   vertical no mobile. Reveal sequencial via IntersectionObserver (JS),
   sem scroll-jacking/pin.
   ══════════════════════════════════════════════════════════════════════ */
body.chb-lp-simposio #programacao { background: #FFFFFF; }
.chb-lp-timeline__header {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 1.5rem 2.5rem; margin-bottom: 2.5rem;
}
.chb-lp-timeline__heading { flex: 1 1 320px; }
.chb-lp-timeline__heading .chb-section__eyebrow { margin-bottom: 8px; }
.chb-lp-timeline__heading .chb-section__title { margin-top: 0 !important; }
.chb-lp-timeline__meta {
	display: flex; flex-wrap: wrap; gap: 1.75rem;
}
.chb-lp-timeline__meta div { display: flex; align-items: center; gap: .6rem; }
.chb-lp-timeline__meta img { width: 30px; height: 30px; flex-shrink: 0; }
.chb-lp-timeline__meta strong { display: block; font-family: var(--chb-font-display); font-size: 1.05rem; font-weight: 700; }
.chb-lp-timeline__meta small { color: var(--chb-ink-soft); font-size: 12.5px; }
.chb-lp-timeline__rail {
	position: relative; display: flex; flex-direction: column; gap: 1.75rem;
}
.chb-lp-timeline__rail::before { content: none; }
.chb-lp-timeline__step { display: flex; align-items: flex-start; gap: 1rem; }
.chb-lp-timeline__dot {
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid var(--chb-ink); background: var(--chb-paper);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--chb-font-condensed); font-weight: 700; font-size: 13px; color: var(--chb-ink);
}
.chb-lp-timeline__step.is-active .chb-lp-timeline__dot { border-color: var(--chb-primary); color: var(--chb-primary); }
.chb-lp-timeline__step p { margin: .35em 0 0; font-weight: 700; color: var(--chb-ink); }
.chb-lp-timeline__step.is-active p { color: var(--chb-primary); }

@media (min-width: 860px) {
	.chb-lp-timeline__rail {
		flex-direction: row; align-items: flex-start; gap: 0;
	}
	.chb-lp-timeline__rail::before {
		content: ''; position: absolute; top: 17px; left: 17px; right: 17px; height: 2px; background: var(--chb-line);
	}
	/* Linha de progresso: preenche da esquerda pra direita conforme a
	   seção passa pela tela — --chb-lp-progress (0 a 1) é atualizado no
	   scroll via JS (ver lp-simposio-turismo-experiencia.js). */
	.chb-lp-timeline__rail::after {
		content: ''; position: absolute; top: 17px; left: 17px; right: 17px; height: 2px;
		background: var(--chb-primary); transform-origin: left center;
		transform: scaleX(var(--chb-lp-progress, 0));
	}
	.chb-lp-timeline__step { flex-direction: column; align-items: center; flex: 1; text-align: center; position: relative; z-index: 1; }
	.chb-lp-timeline__step p { max-width: 12ch; }
}

/* ══════════════════════════════════════════════════════════════════════
   Para quem é + Local do evento — seção nativa "Colunas com checklist"
   (repetidor de verdade, cada item do checklist é um campo próprio no
   painel — sem editor WYSIWYG) com o cartão de foto (endereço + "ver no
   mapa" + "confirmar presença") no campo opcional "ao lado" do mesmo tipo.
   ══════════════════════════════════════════════════════════════════════ */
#para-quem-e .chb-columns-checklist__col { max-width: 46rem; }
#para-quem-e .chb-columns-checklist__list {
	grid-template-columns: 1fr; gap: .85rem 2.5rem;
}
@media (min-width: 640px) {
	#para-quem-e .chb-columns-checklist__list { grid-template-columns: 1fr 1fr; }
}
#para-quem-e .chb-columns-checklist__list li { font-weight: 600; color: var(--chb-ink); font-size: var(--chb-text-base); }
/* Troca o "✓" padrão do componente pelo ícone laranja já usado no resto da
   página (mesmo arquivo svg, aplicado como máscara pra herdar a cor). */
#para-quem-e .chb-columns-checklist__check {
	width: 20px; height: 20px; margin-top: .1em; font-size: 0;
	background-color: var(--chb-primary);
	-webkit-mask: url('../icons/check-orange.svg') center / contain no-repeat;
	mask: url('../icons/check-orange.svg') center / contain no-repeat;
}
#para-quem-e .chb-columns-checklist__side-info strong { display: flex; align-items: center; gap: .5rem; }
#para-quem-e .chb-columns-checklist__side-info strong::before {
	content: ''; width: 22px; height: 22px; flex-shrink: 0;
	background: url('../icons/map-pin-orange.svg') center / contain no-repeat;
}
/* Foto com a mesma altura da coluna de checklist ao lado (em vez da altura
   mínima fixa padrão do componente) — o grid estica as duas colunas juntas.
   Também mais larga que o checklist (antes era o contrário). */
#para-quem-e .chb-columns-checklist__layout { align-items: stretch; }
@media (min-width: 900px) {
	#para-quem-e .chb-columns-checklist__layout { grid-template-columns: 1fr 1.3fr; }
}
#para-quem-e .chb-columns-checklist__side { min-height: 0; height: 100%; }
/* Degradê do lado esquerdo da foto (em vez de cima→baixo), pra escurecer a
   borda que encosta no texto do checklist e manter o resto da foto limpo.
   O overlay em si precisa cobrir a foto inteira até embaixo (a altura
   mínima de 320px do componente ficava menor que a foto esticada, deixando
   um pedaço sem degradê nenhum lá embaixo). */
#para-quem-e .chb-columns-checklist__side-overlay {
	min-height: 0; height: 100%;
	background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, 0) 85%);
}

/* ══════════════════════════════════════════════════════════════════════
   Realização e apoio — seção nativa "cards" (repetidor de verdade, cada
   logo é um item editável pelo painel do CH Builder, igual ao padrão já
   usado em Grandes Temas). Cada card vira um "chip" compacto com a logo
   centralizada; nos parceiros sem logo (ainda) o nome aparece como texto
   no lugar da imagem. Logos à esquerda, selo + frase de apoio à direita,
   conforme a referência visual do cliente.
   ══════════════════════════════════════════════════════════════════════ */
#realizacao.chb-section--alt { background: var(--chb-paper); border-color: transparent; }
#realizacao .chb-shell {
	display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center;
}
@media (min-width: 900px) {
	#realizacao .chb-shell { grid-template-columns: 1fr 1.6fr; }
	#realizacao .chb-section-header { order: 1; margin-bottom: 0; }
	#realizacao .chb-cards__grid { order: 2; }
}
#realizacao .chb-section__lead {
	font-family: var(--chb-font-display); font-weight: 700; color: var(--chb-primary);
	font-size: 1.4rem; line-height: 1.3; max-width: 26ch;
}
/* Logos sempre numa linha só, todas do mesmo tamanho, dividindo por igual
   toda a largura disponível (em vez de só encostar à esquerda); encolhem
   juntas até um piso mínimo e, telas bem estreitas, rolam horizontalmente. */
#realizacao .chb-cards__grid {
	display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
	gap: 1rem; overflow-x: auto; padding-bottom: .25rem;
}
#realizacao .chb-card {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; gap: .4rem; flex: 1 1 0; min-width: 96px; height: auto;
	padding: 1rem 1.1rem;
}
#realizacao .chb-card__icon--image { margin: 0; }
#realizacao .chb-card__icon--image img { width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; }
#realizacao .chb-card__title { font-family: var(--chb-font-condensed); font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--chb-ink-soft); margin: 0; }
#realizacao .chb-card__text { font-size: 10.5px; color: var(--chb-ink-soft); line-height: 1.3; margin: .15rem 0 0; }

/* ── Reveal simples (fade + slide), aplicado via JS a título/parágrafo/card/foto.
   Anima só opacity/transform — nunca top/left/width/height (ver chb-scroll-fx). ── */
.chb-lp-reveal {
	opacity: 0; transform: translateY(38px);
	transition: opacity .7s ease, transform .7s ease;
}
.chb-lp-reveal.is-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
	.chb-lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   CTA final — mantém a foto de fundo aplicada pelo cliente, mas com um véu
   bem claro (#E8E8E0) por cima em vez do escurecimento padrão do
   componente; texto/botão passam a ler em tom escuro sobre fundo claro,
   alinhado à esquerda. Cor do botão fixada em laranja com texto escuro,
   por conta própria da seção (não depende do --chb-primary-ink global,
   que é branco — branco ficaria ilegível num fundo agora claro).
   ══════════════════════════════════════════════════════════════════════ */
body.chb-lp-simposio .chb-cta__overlay { background: rgba(232, 232, 224, .88); }
body.chb-lp-simposio .chb-cta--has-bg { color: var(--chb-ink); }
body.chb-lp-simposio .chb-cta { text-align: left; }
body.chb-lp-simposio .chb-cta__text { margin-left: 0; margin-right: 0; }
body.chb-lp-simposio .chb-cta__actions { justify-content: flex-start; }
body.chb-lp-simposio .chb-cta__contact { justify-content: flex-start; }

/* ══════════════════════════════════════════════════════════════════════
   Pop-up "Confirmar presença" — modal simples, sem dependências.
   ══════════════════════════════════════════════════════════════════════ */
.chb-lp-modal { position: fixed; inset: 0; z-index: 300; display: none; }
.chb-lp-modal.is-open { display: block; }
.chb-lp-modal__overlay { position: absolute; inset: 0; background: rgba(20, 15, 10, .6); }
.chb-lp-modal__panel {
	position: relative; z-index: 1; width: min(90vw, 460px);
	margin: 6vh auto; max-height: 88vh; overflow-y: auto;
	background: #fff; border-radius: var(--chb-radius-lg); padding: 2rem;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.chb-lp-modal__panel h3 { font-family: var(--chb-font-display); font-size: 1.5rem; margin: 0 0 .35em; color: var(--chb-ink); }
.chb-lp-modal__panel p { color: var(--chb-ink-soft); margin: 0 0 1.25rem; font-size: 14px; }
.chb-lp-modal__notice {
	background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA;
	border-radius: var(--chb-radius); padding: .65rem .9rem; font-size: 13.5px !important;
}
.chb-lp-modal__close {
	position: absolute; top: .9rem; right: .9rem; width: 32px; height: 32px;
	border: 0; background: var(--chb-paper-alt); border-radius: 50%;
	font-size: 20px; line-height: 1; color: var(--chb-ink); cursor: pointer;
}
.chb-lp-modal__form label { display: block; margin-bottom: 1rem; font-weight: 600; font-size: 13.5px; color: var(--chb-ink); }
.chb-lp-modal__form input {
	display: block; width: 100%; margin-top: .35rem; padding: .65rem .8rem;
	border: 1px solid var(--chb-line); border-radius: var(--chb-radius);
	font: inherit; font-size: 14px; color: var(--chb-ink); background: var(--chb-paper);
}
.chb-lp-modal__form input:focus { outline: 2px solid var(--chb-primary); outline-offset: 1px; }
.chb-lp-modal__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.chb-lp-modal__actions .chb-btn { flex: 1 1 180px; text-align: center; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
	.chb-lp-modal__panel { animation: chbLpModalIn .25s ease; }
}
@keyframes chbLpModalIn {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}