/**
 * WP Eventos - Programação — estilos do front.
 *
 * Todas as cores vêm de variáveis CSS definidas inline pelo renderer,
 * o que permite sobrescrever por instância (shortcode ou widget do Elementor).
 *
 * Os seletores são prefixados com `.wep-programacao` de propósito: temas costumam
 * estilizar `button` globalmente (caixa alta, fundo da cor da marca, sombras) e
 * venceriam regras de classe simples.
 *
 * Duas disposições de grade, escolhidas nas configurações:
 *   .wep-programacao--salas-colunas  salas no topo, horários nas linhas (padrão)
 *   .wep-programacao--salas-linhas   salas na lateral, horários nas colunas
 */

.wep-programacao {
	--wep-primaria: #1d4ed8;
	--wep-primaria-texto: #ffffff;
	--wep-destaque: #f59e0b;
	--wep-fundo: #ffffff;
	--wep-texto: #111827;
	--wep-texto-suave: #6b7280;
	--wep-borda: #e5e7eb;
	--wep-sala-fundo: #7a1030;
	--wep-sala-texto: #ffffff;
	--wep-card-fundo: #ffffff;
	--wep-card-hover: #f4f6fb;
	--wep-cabecalho-fundo: #f1f5f9;
	--wep-cabecalho-texto: #334155;
	--wep-vazio: #fafbfc;
	--wep-faixa-fundo: #fdf4e3;
	--wep-faixa-texto: #7a4a05;
	--wep-faixa-borda: #e9a23b;
	--wep-raio: 14px;
	--wep-coluna: 220px;
	--wep-lateral: 92px;
	--wep-banner: 180px;
	--wep-sala-escrita: horizontal-tb;
	--wep-sala-giro: 0deg;
	--wep-fonte: 15px;

	box-sizing: border-box;
	color: var(--wep-texto);
	font-size: var(--wep-fonte);
	line-height: 1.45;
	background: var(--wep-fundo);
}

.wep-programacao *,
.wep-programacao *::before,
.wep-programacao *::after {
	box-sizing: inherit;
}

/* Neutraliza estilos de botão herdados do tema. */
.wep-programacao button {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	text-decoration: none;
	box-shadow: none;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	filter: none;
}

.wep-programacao ul,
.wep-programacao li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wep-titulo {
	margin: 0 0 1.25rem;
	font-size: 1.7em;
	line-height: 1.2;
	color: var(--wep-texto);
}

.wep-vazio {
	margin: 0;
	padding: 2rem 1rem;
	text-align: center;
	color: var(--wep-texto-suave);
	background: var(--wep-vazio);
	border: 1px dashed var(--wep-borda);
	border-radius: var(--wep-raio);
}

/* ---------------------------------------------------------------- Abas */

.wep-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
}

.wep-programacao .wep-aba {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	min-width: 5rem;
	padding: 0.55rem 1rem;
	font-size: 1em;
	line-height: 1.2;
	color: var(--wep-texto);
	background: var(--wep-cabecalho-fundo);
	border: 1px solid var(--wep-borda);
	border-radius: calc(var(--wep-raio) * 0.7);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.wep-programacao .wep-aba:hover {
	color: var(--wep-texto);
	background: var(--wep-card-hover);
	border-color: var(--wep-primaria);
}

.wep-programacao .wep-aba:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-programacao .wep-aba.is-ativa {
	color: var(--wep-primaria-texto);
	background: var(--wep-primaria);
	border-color: var(--wep-primaria);
}

.wep-aba__dia {
	font-size: 0.72em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.8;
}

.wep-aba__data {
	font-size: 1.05em;
	font-weight: 700;
}

/* ---------------------------------------------------------------- Dia */

.wep-dia[hidden] {
	display: none;
}

/* Data centralizada com filetes laterais: âncora visual de cada dia. */
.wep-dia__titulo {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 0 0 1.1rem;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wep-texto);
	text-transform: capitalize;
	letter-spacing: 0.01em;
	text-align: center;
}

.wep-dia__titulo::before,
.wep-dia__titulo::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	border-radius: 2px;
	background: var(--wep-borda);
}

.wep-dia__titulo-texto {
	flex: 0 1 auto;
	padding: 0 0.25rem;
}

/* ------------------------------------------------------- Grade (comum) */

.wep-grade-wrap {
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	border: 1px solid var(--wep-borda);
	border-radius: var(--wep-raio);
	background: var(--wep-fundo);
	-webkit-overflow-scrolling: touch;
}

.wep-grade-wrap:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-programacao .wep-grade {
	table-layout: fixed;
	width: 100%;
	width: max-content; /* Progressivo: sem suporte, cai para 100%. */
	min-width: 100%;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	background: transparent;
}

/**
 * Regra base das células. Fica em 2 classes + 1 elemento (0,2,1), então toda
 * regra por papel abaixo precisa de 3 classes (0,3,0) para vencê-la — daí o
 * `.wep-grade` no meio dos seletores. Sem isso, `padding`, `text-align` e
 * `background` daqui sobrescrevem silenciosamente o estilo de cada papel.
 */
.wep-programacao .wep-grade th,
.wep-programacao .wep-grade td {
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--wep-borda);
	vertical-align: top;
	text-align: left;
	background: var(--wep-fundo);
}

.wep-programacao .wep-grade tbody tr:last-child th,
.wep-programacao .wep-grade tbody tr:last-child td {
	border-bottom: 0;
}

/* Canto superior esquerdo: acompanha sempre o trilho de salas. */
.wep-programacao .wep-grade .wep-grade__canto {
	position: sticky;
	top: 0;
	left: 0;
	z-index: 5;
	width: var(--wep-lateral);
	padding: 0.85rem 0.7rem;
	font-size: 0.74em;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

/*
 * O `height: 1px` é o gatilho que faz o `height: 100%` do conteúdo resolver.
 * Célula de tabela nunca encolhe abaixo do conteúdo, então na prática ela fica
 * com a altura da linha — mas passa a ser uma altura *definida*, e sem isso o
 * percentual do filho viraria `auto` e cada card teria a altura do seu texto.
 */
.wep-programacao .wep-grade .wep-celula {
	height: 1px;
	padding: 0.6rem;
	background: var(--wep-fundo);
}

/* Distribui os cards na altura da célula: no mesmo horário, mesma altura. */
.wep-celula__conteudo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	height: 100%;
}

.wep-programacao .wep-grade .wep-celula--vazia {
	background: var(--wep-vazio);
}

/* ------------------------------ Faixas em destaque */

.wep-programacao .wep-grade .wep-celula--destaque {
	padding: 0.5rem 0.6rem;
	background: var(--wep-faixa-fundo);
}

.wep-programacao .wep-grade .wep-linha--destaque .wep-hora {
	color: var(--wep-faixa-texto);
	background: var(--wep-faixa-fundo);
}

/* Faixa: bloco centralizado — horário, tema e, embaixo, o local em evidência. */
.wep-atividade--destaque {
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	padding: 0.75rem 1rem;
	color: var(--wep-faixa-texto);
	background: transparent;
	border: 0;
	border-left: 4px solid var(--wep-faixa-borda);
	border-radius: 0;
	text-align: center;
}

.wep-atividade--destaque:hover {
	box-shadow: none;
}

.wep-atividade--destaque .wep-atividade__hora {
	font-size: 0.85em;
	letter-spacing: 0.06em;
	color: var(--wep-faixa-texto);
	opacity: 0.8;
}

.wep-atividade--destaque .wep-atividade__tema {
	font-size: 1.12em;
	letter-spacing: 0.01em;
	color: var(--wep-faixa-texto);
}

.wep-atividade--destaque .wep-atividade__subtema {
	color: var(--wep-faixa-texto);
	opacity: 0.8;
}

/*
 * Invertido de propósito: fundo na cor do texto e texto na cor do fundo.
 * Como esse par já foi escolhido para contrastar entre si, a etiqueta continua
 * legível com qualquer cor de faixa que o usuário configurar.
 */
.wep-atividade--destaque .wep-atividade__local {
	align-self: center;
	margin-top: 0.1rem;
	padding: 0.3rem 0.9rem;
	font-size: 0.92em;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wep-faixa-fundo);
	background: var(--wep-faixa-texto);
	border: 0;
}

/* Informações adicionais: texto corrido logo abaixo do local. */
.wep-atividade__info {
	margin: 0;
	font-size: 0.88em;
	font-weight: 400;
	line-height: 1.5;
	color: var(--wep-texto-suave);
	overflow-wrap: anywhere;
}

.wep-atividade--destaque .wep-atividade__info {
	max-width: 46rem;
	margin-top: 0.15rem;
	color: var(--wep-faixa-texto);
	opacity: 0.9;
}

/* Foto do local: imagem destacada da atividade, em tira clicável. */
.wep-programacao .wep-atividade__banner {
	display: block;
	width: 100%;
	max-width: 46rem;
	margin-top: 0.55rem;
	padding: 0;
	overflow: hidden;
	line-height: 0;
	background: transparent;
	border: 1px solid var(--wep-faixa-borda);
	border-radius: calc(var(--wep-raio) * 0.5);
	cursor: pointer;
}

.wep-atividade__banner img {
	display: block;
	width: 100%;
	height: var(--wep-banner, 180px);
	object-fit: cover;
	transition: transform 0.35s ease;
}

.wep-programacao .wep-atividade__banner:hover img {
	transform: scale(1.03);
}

.wep-programacao .wep-atividade__banner:focus-visible {
	outline: 2px solid var(--wep-faixa-texto);
	outline-offset: 2px;
}

.wep-atividade--destaque .wep-atividade__palestrantes {
	flex: 1 1 100%;
	border-top-color: var(--wep-faixa-borda);
}

.wep-programacao .wep-atividade--destaque .wep-palestrante {
	color: var(--wep-faixa-texto);
}

/* Local: etiqueta discreta com o lugar indicativo da atividade. */
.wep-atividade__local {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0.2rem 0.6rem;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wep-texto-suave);
	background: var(--wep-vazio);
	border: 1px solid var(--wep-borda);
	border-radius: 999px;
}

/* ------------------------------ Layout: salas nas colunas (padrão) */

.wep-programacao--salas-colunas .wep-grade thead th {
	position: sticky;
	top: 0;
	z-index: 3;
}

.wep-programacao--salas-colunas .wep-grade .wep-sala {
	width: var(--wep-coluna);
	padding: 1rem 1.15rem;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.wep-programacao--salas-colunas .wep-grade .wep-sala + .wep-sala {
	border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.wep-programacao--salas-colunas .wep-sala__nome {
	display: block;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Coluna lateral de horários */
.wep-programacao--salas-colunas .wep-grade .wep-hora {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--wep-lateral);
	padding: 0.9rem 0.7rem;
	text-align: center;
	vertical-align: top;
	color: var(--wep-cabecalho-texto);
	background: var(--wep-cabecalho-fundo);
	border-right: 1px solid var(--wep-borda);
}

.wep-programacao--salas-colunas .wep-hora::after {
	content: "";
	position: absolute;
	top: 0;
	right: -7px;
	width: 7px;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
	pointer-events: none;
}

.wep-programacao--salas-colunas .wep-hora__inicio {
	display: block;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.wep-programacao--salas-colunas .wep-hora__fim {
	display: block;
	font-size: 0.82em;
	font-weight: 400;
	opacity: 0.7;
}

.wep-programacao--salas-colunas .wep-hora__fim::before {
	content: "– ";
}

.wep-programacao--salas-colunas .wep-grade .wep-celula + .wep-celula,
.wep-programacao--salas-colunas .wep-grade .wep-hora + .wep-celula {
	border-left: 1px solid var(--wep-borda);
}

/* ------------------------------ Layout: salas nas linhas */

.wep-programacao--salas-linhas .wep-grade thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 0.8rem 0.85rem;
	font-size: 0.8em;
	font-weight: 600;
	text-align: center;
	color: var(--wep-cabecalho-texto);
	background: var(--wep-cabecalho-fundo);
	white-space: nowrap;
}

.wep-programacao--salas-linhas .wep-grade .wep-hora {
	width: var(--wep-coluna);
}

.wep-programacao--salas-linhas .wep-grade .wep-hora + .wep-hora {
	border-left: 1px solid var(--wep-borda);
}

.wep-programacao--salas-linhas .wep-hora__inicio {
	display: block;
	font-size: 1.15em;
	font-weight: 700;
}

.wep-programacao--salas-linhas .wep-hora__fim {
	display: block;
	font-size: 0.9em;
	font-weight: 400;
	opacity: 0.65;
}

.wep-programacao--salas-linhas .wep-hora__fim::before {
	content: "– ";
}

/* Cabeçalho desligado nas configurações: some da vista, mas segura as colunas. */
.wep-programacao--salas-linhas .wep-grade--cabecalho-oculto thead th {
	height: 0;
	padding: 0;
	font-size: 0;
	line-height: 0;
	border-bottom: 0;
	overflow: hidden;
}

.wep-programacao--salas-linhas .wep-grade--cabecalho-oculto thead th > * {
	display: none;
}

.wep-programacao--salas-linhas .wep-grade .wep-sala {
	position: sticky;
	left: 0;
	z-index: 2;
	width: var(--wep-lateral);
	padding: 1rem 0.6rem;
	text-align: center;
	vertical-align: middle;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}

.wep-programacao--salas-linhas .wep-sala::after {
	content: "";
	position: absolute;
	top: 0;
	right: -7px;
	width: 7px;
	height: 100%;
	background: linear-gradient(to right, rgba(0, 0, 0, 0.12), transparent);
	pointer-events: none;
}

.wep-programacao--salas-linhas .wep-sala__nome {
	display: inline-block;
	max-height: 100%;
	overflow: hidden;
	writing-mode: var(--wep-sala-escrita, horizontal-tb);
	transform: rotate(var(--wep-sala-giro, 0deg));
	font-size: 0.92em;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wep-programacao--salas-linhas .wep-grade .wep-celula {
	border-left: 1px solid var(--wep-borda);
}

/* A linha "Geral" agrupa os destaques quando as salas são linhas. */
.wep-programacao--salas-linhas .wep-grade .wep-linha--destaque .wep-sala {
	color: var(--wep-faixa-texto);
	background: var(--wep-faixa-fundo);
	border-bottom-color: var(--wep-faixa-borda);
}

/* ---------------------------------------------------------------- Atividade */

.wep-atividade {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.3rem;
	padding: 0.7rem 0.75rem;
	background: var(--wep-card-fundo);
	border: 1px solid var(--wep-borda);
	border-left: 3px solid var(--wep-primaria);
	border-radius: calc(var(--wep-raio) * 0.55);
	overflow-wrap: anywhere;
	transition: box-shadow 0.18s ease;
}

.wep-atividade:hover {
	box-shadow: 0 3px 14px rgba(15, 23, 42, 0.09);
}

.wep-atividade__hora {
	margin: 0;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wep-destaque);
}

/**
 * Etiqueta da sala dentro do card.
 *
 * Visível por padrão de propósito: só some no desktop, onde o cabeçalho fixo da
 * coluna já mostra a sala. Assim, se a media query não valer por qualquer motivo,
 * o erro é mostrar a sala a mais — nunca de menos.
 */
.wep-atividade__sala {
	display: inline-flex;
	align-self: flex-start;
	max-width: 100%;
	margin: 0;
	padding: 0.3rem 0.7rem;
	font-size: 0.78em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wep-sala-texto);
	background: var(--wep-sala-fundo);
	border-radius: 999px;
}

/* "Sala:" só faz sentido no empilhado, onde não há cabeçalho de coluna. */
.wep-atividade__sala-rotulo {
	margin-right: 0.35em;
	font-weight: 500;
	opacity: 0.75;
}

@media (min-width: 861px) {
	.wep-atividade__sala-rotulo {
		display: none;
	}
}

@media (min-width: 861px) {
	.wep-programacao--salas-colunas .wep-atividade__sala {
		display: none;
	}
}

/* Aqui a sala está no trilho lateral e, no empilhado, na faixa da linha. */
.wep-programacao--salas-linhas .wep-atividade__sala {
	display: none;
}

/* Fora da grade não existe cabeçalho de sala: a etiqueta sempre aparece. */
.wep-programacao .wep-sem-horario .wep-atividade__sala {
	display: inline-flex;
}

.wep-atividade__tema {
	margin: 0;
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.35;
	color: var(--wep-texto);
}

.wep-atividade__subtema {
	margin: 0;
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--wep-texto-suave);
}

/* ---------------------------------------------------------------- Palestrantes */

.wep-atividade__palestrantes {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin: 0.2rem 0 0;
	padding: 0.45rem 0 0;
	border-top: 1px solid var(--wep-borda);
}

.wep-programacao .wep-palestrante {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.25rem 0.3rem;
	font-size: 1em;
	text-align: left;
	color: var(--wep-texto);
	background: transparent;
	border: 0;
	border-radius: calc(var(--wep-raio) * 0.45);
	cursor: pointer;
	transition: background-color 0.16s ease, color 0.16s ease;
}

.wep-programacao .wep-palestrante:hover {
	color: var(--wep-primaria);
	background: var(--wep-card-hover);
}

.wep-programacao .wep-palestrante:hover .wep-palestrante__avatar {
	border-color: var(--wep-primaria);
}

.wep-programacao .wep-palestrante:hover .wep-palestrante__nome {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.wep-programacao .wep-palestrante:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 1px;
}

.wep-palestrante__avatar {
	display: block;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	overflow: hidden;
	border: 1px solid var(--wep-borda);
	border-radius: 50%;
	background: var(--wep-cabecalho-fundo);
	transition: border-color 0.16s ease;
}

.wep-palestrante__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.wep-palestrante__iniciais {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--wep-primaria);
}

.wep-palestrante__nome {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.wep-programacao--sem-fotos .wep-palestrante__nome {
	font-weight: 500;
}

/* ---------------------------------------------------------------- Sem horário */

.wep-sem-horario {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.85rem;
	background: var(--wep-vazio);
	border: 1px dashed var(--wep-borda);
	border-radius: var(--wep-raio);
}

.wep-sem-horario__rotulo {
	flex: 0 0 auto;
	padding-top: 0.4rem;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wep-texto-suave);
}

.wep-sem-horario__itens {
	display: grid;
	flex: 1 1 18rem;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}


/* ---------------------------------------------------------------- Modal */

.wep-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	font-size: var(--wep-fonte);
	line-height: 1.45;
}

.wep-modal[hidden] {
	display: none;
}

.wep-modal *,
.wep-modal *::before,
.wep-modal *::after {
	box-sizing: border-box;
}

.wep-modal__fundo {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.62);
	backdrop-filter: blur(2px);
	animation: wep-fade 0.18s ease;
}

.wep-modal__caixa {
	position: relative;
	z-index: 1;
	width: min(46rem, 100%);
	max-height: min(88vh, 46rem);
	overflow-y: auto;
	padding: 1.75rem;
	color: var(--wep-texto);
	background: var(--wep-fundo);
	border-radius: var(--wep-raio);
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
	animation: wep-sobe 0.22s ease;
}

.wep-modal .wep-modal__fechar {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	text-shadow: none;
	color: var(--wep-texto-suave);
	background: transparent;
	border: 0;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.wep-modal .wep-modal__fechar:hover {
	color: var(--wep-texto);
	background: var(--wep-cabecalho-fundo);
}

.wep-modal .wep-modal__fechar:focus-visible {
	outline: 2px solid var(--wep-primaria);
	outline-offset: 2px;
}

.wep-modal__conteudo {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}

/**
 * Só a largura é padronizada: a altura acompanha a proporção original da foto.
 * Sem `aspect-ratio` e sem `object-fit: cover`, nada é cortado — as fotos dos
 * palestrantes chegam em enquadramentos variados.
 */
.wep-modal__foto {
	flex: 0 0 11rem;
	width: 11rem;
	overflow: hidden;
	border-radius: calc(var(--wep-raio) * 0.8);
	background: var(--wep-cabecalho-fundo);
}

.wep-modal__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.wep-modal__foto.is-vazia {
	display: none;
}

/* Modo amplo: foto de local, panorâmica, ocupa a largura acima do texto. */
.wep-modal__caixa.is-amplo .wep-modal__conteudo {
	flex-direction: column;
	gap: 1.1rem;
}

.wep-modal__caixa.is-amplo .wep-modal__foto {
	flex: 0 0 auto;
	width: 100%;
}

.wep-modal__caixa.is-amplo .wep-modal__foto img {
	height: auto;
	max-height: 60vh;
	object-fit: contain;
}

.wep-modal__texto {
	flex: 1 1 16rem;
	min-width: 0;
}

.wep-modal__nome {
	margin: 0 0 0.2rem;
	padding-right: 2rem;
	font-size: 1.4em;
	line-height: 1.25;
	color: var(--wep-texto);
}

.wep-modal__cargo {
	margin: 0 0 1rem;
	font-size: 0.95em;
	font-weight: 600;
	color: var(--wep-primaria);
}

.wep-modal__cargo:empty {
	display: none;
}

.wep-modal__curriculo {
	font-size: 0.95em;
	line-height: 1.6;
	color: var(--wep-texto);
}

.wep-modal__curriculo p:first-child {
	margin-top: 0;
}

.wep-modal__curriculo p:last-child {
	margin-bottom: 0;
}

.wep-modal__curriculo img {
	max-width: 100%;
	height: auto;
}

@keyframes wep-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wep-sobe {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

body.wep-modal-aberto {
	overflow: hidden;
}

/* ---------------------------------------------------------------- Responsivo */

@media (max-width: 860px) {
	/* A tabela vira blocos empilhados. */
	.wep-grade-wrap {
		overflow-x: visible;
		border: 0;
		border-radius: 0;
	}

	/*
	 * As três últimas linhas repetem os papéis em 3 classes: sem elas, as
	 * larguras fixas de `.wep-grade .wep-sala/.wep-hora/.wep-celula` (0,3,0)
	 * venceriam este `width: auto` (0,2,1) e a tabela não empilharia direito.
	 */
	.wep-programacao .wep-grade,
	.wep-programacao .wep-grade thead,
	.wep-programacao .wep-grade tbody,
	.wep-programacao .wep-grade tr,
	.wep-programacao .wep-grade th,
	.wep-programacao .wep-grade td,
	.wep-programacao .wep-grade .wep-sala,
	.wep-programacao .wep-grade .wep-hora,
	.wep-programacao .wep-grade .wep-celula {
		display: block;
		width: auto;
		min-width: 0;
		max-width: none;
	}

	.wep-programacao .wep-grade thead {
		display: none;
	}

	.wep-programacao .wep-grade tr.wep-linha {
		margin-bottom: 1rem;
		border: 1px solid var(--wep-borda);
		border-radius: var(--wep-raio);
		overflow: hidden;
	}

	.wep-programacao .wep-grade tr.wep-linha:last-child {
		margin-bottom: 0;
	}

	/*
	 * Sem `height: auto` aqui a célula viraria um bloco de 1px de verdade — e a
	 * linha tem `overflow: hidden`, o que cortaria os cards no empilhado.
	 */
	.wep-programacao .wep-grade .wep-celula {
		height: auto;
		padding: 0.6rem;
		border-left: 0;
		border-bottom: 0;
	}

	.wep-celula__conteudo {
		height: auto;
	}

	.wep-programacao .wep-grade .wep-celula + .wep-celula {
		padding-top: 0;
	}

	.wep-programacao .wep-grade .wep-celula--vazia {
		display: none;
	}

	.wep-atividade {
		height: auto;
	}

	/* Salas nas colunas: cada bloco é uma faixa de horário, em ordem crescente. */
	.wep-programacao--salas-colunas .wep-grade .wep-hora {
		position: static;
		display: flex;
		align-items: baseline;
		gap: 0.4rem;
		padding: 0.75rem 0.9rem;
		text-align: left;
		border-right: 0;
		border-bottom: 0;
	}

	.wep-programacao--salas-colunas .wep-hora::after {
		display: none;
	}

	.wep-programacao--salas-colunas .wep-hora__inicio,
	.wep-programacao--salas-colunas .wep-hora__fim {
		display: inline;
		font-size: 1.05em;
	}

	/* Faixa em destaque: o bloco inteiro assume a cor, sem competir com os cards. */
	.wep-programacao .wep-grade tr.wep-linha--destaque {
		border-color: var(--wep-faixa-borda);
		background: var(--wep-faixa-fundo);
	}

	.wep-programacao .wep-grade .wep-celula--destaque {
		background: transparent;
	}

	.wep-atividade--destaque {
		padding: 0.5rem 0.6rem 0.5rem 0.9rem;
	}

	.wep-atividade--destaque .wep-atividade__tema {
		font-size: 1.05em;
	}

	.wep-dia__titulo {
		font-size: 1.1em;
		gap: 0.7rem;
	}

	/* Salas nas linhas: cada bloco é uma sala. */
	.wep-programacao--salas-linhas .wep-grade .wep-sala {
		position: static;
		padding: 0.75rem 0.9rem;
		text-align: left;
		border-bottom: 0;
	}

	.wep-programacao--salas-linhas .wep-sala::after {
		display: none;
	}

	.wep-programacao--salas-linhas .wep-sala__nome {
		writing-mode: horizontal-tb;
		transform: none;
		max-height: none;
		font-size: 1em;
		letter-spacing: 0.05em;
	}

	.wep-modal__caixa {
		padding: 1.25rem;
	}

	.wep-modal__foto {
		flex: 0 0 8rem;
		width: 8rem;
	}
}

@media (max-width: 520px) {
	.wep-abas {
		gap: 0.4rem;
	}

	.wep-programacao .wep-aba {
		flex: 1 1 auto;
		min-width: 4.5rem;
		padding: 0.5rem 0.6rem;
	}

	.wep-modal {
		padding: 0.75rem;
	}

	.wep-modal__conteudo {
		gap: 1rem;
	}

	.wep-modal__foto {
		flex: 0 0 6.5rem;
		width: 6.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wep-programacao *,
	.wep-modal * {
		animation: none !important;
		transition: none !important;
	}
}