/*
 * Eleicoes Regionais — estilos publicos.
 *
 * Escrito do zero: nao transporta o acumulo de correcoes do prototipo.
 * Mobile primeiro. Responsividade por componente via container queries,
 * com fallback funcional em media queries para navegadores sem suporte.
 */

.er-root,
.er-section {
	box-sizing: border-box;
	color: var(--er-ink);
	font-family: var(--er-font);
	font-size: var(--er-size-base);
	line-height: 1.5;
}

.er-section *,
.er-section *::before,
.er-section *::after {
	box-sizing: inherit;
}

.er-section {
	container-type: inline-size;
	container-name: er-section;
	/* Nunca ultrapassa a coluna que o tema oferece. */
	max-width: 100%;
	overflow-wrap: break-word;
	padding: var(--er-space-4) 0;
}

.er-section__head {
	margin-bottom: var(--er-space-4);
}

.er-section__title {
	font-size: var(--er-size-xl);
	line-height: 1.25;
	margin: 0 0 var(--er-space-1);
}

.er-section__logo {
	display: block;
	height: auto;
	margin-bottom: var(--er-space-3);
	max-height: 64px;
	max-width: 240px;
	width: auto;
}

/* Navegacao publica entre listagem e apuracao. Nunca inclui item do painel. */
.er-modulenav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin-top: var(--er-space-3);
}

.er-modulenav__item {
	align-items: center;
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	display: inline-flex;
	min-height: var(--er-touch);
	padding: var(--er-space-2) var(--er-space-4);
	text-decoration: none;
}

.er-modulenav__item.is-current {
	background: var(--er-brand);
	border-color: var(--er-brand);
	color: var(--er-brand-contrast);
}

.er-section__sub {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	margin: 0;
}

/* --------------------------------------------------------------- foco */

.er-section a:focus-visible,
.er-section button:focus-visible,
.er-section select:focus-visible,
.er-section input:focus-visible,
.er-section [tabindex]:focus-visible {
	outline: var(--er-focus);
	outline-offset: var(--er-focus-offset);
}

/* ------------------------------------------------------------ filtros */

.er-filters {
	background: var(--er-surface-alt);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius);
	margin-bottom: var(--er-space-4);
	padding: var(--er-space-3);
}

.er-filters__toggle {
	align-items: center;
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	cursor: pointer;
	display: flex;
	font-size: var(--er-size-base);
	font-weight: 600;
	justify-content: space-between;
	min-height: var(--er-touch);
	padding: var(--er-space-2) var(--er-space-3);
	width: 100%;
}

.er-filters__toggle::after {
	content: "▾";
	margin-left: var(--er-space-2);
}

.er-filters__toggle[aria-expanded="true"]::after {
	content: "▴";
}

/* Sem JavaScript o corpo dos filtros fica visivel e o botao escondido. */
.er-filters__toggle {
	display: none;
}

.er-filters[data-er-collapsible].is-enhanced .er-filters__toggle {
	display: flex;
}

.er-filters[data-er-collapsible].is-enhanced .er-filters__body[hidden] {
	display: none;
}

.er-filters__body {
	display: grid;
	gap: var(--er-space-3);
	margin-top: var(--er-space-3);
}

.er-filters[data-er-collapsible].is-enhanced .er-filters__body {
	margin-top: var(--er-space-3);
}

.er-field {
	display: flex;
	flex-direction: column;
	gap: var(--er-space-1);
	margin: 0;
}

.er-field__label {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	font-weight: 600;
}

.er-field__input {
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	/* 16px evita o zoom automatico do teclado virtual no iOS. */
	font-size: 1rem;
	min-height: var(--er-touch);
	padding: var(--er-space-2) var(--er-space-3);
	width: 100%;
}

.er-filters__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin: 0;
}

.er-button {
	align-items: center;
	border-radius: var(--er-radius-sm);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--er-size-base);
	font-weight: 600;
	justify-content: center;
	min-height: var(--er-touch);
	padding: var(--er-space-2) var(--er-space-4);
	text-decoration: none;
}

.er-button--primary {
	background: var(--er-brand);
	border: 1px solid var(--er-brand);
	color: var(--er-brand-contrast);
}

.er-button--ghost {
	background: transparent;
	border: 1px solid var(--er-border-strong);
	color: var(--er-ink);
}

/* ------------------------------------------------ filtros ativos (chips) */

.er-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	list-style: none;
	margin: 0 0 var(--er-space-3);
	padding: 0;
}

.er-chips__item {
	margin: 0;
}

.er-chip {
	align-items: center;
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	border-radius: 999px;
	color: var(--er-ink);
	display: inline-flex;
	font-size: var(--er-size-sm);
	gap: var(--er-space-1);
	min-height: var(--er-touch);
	padding: var(--er-space-1) var(--er-space-3);
	text-decoration: none;
}

.er-chip__label {
	color: var(--er-ink-soft);
}

.er-chip__value {
	font-weight: 600;
}

.er-chip__remove {
	font-size: 1.125rem;
	line-height: 1;
}

.er-chip--clear {
	border-style: dashed;
}

/* O unico caminho de saida da tela vazia fica com margem propria. */
.er-empty__acoes {
	margin-top: var(--er-space-3);
}

/* --------------------------------------------------------- ordenar por */

.er-orderform {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin: 0;
}

.er-orderform__label {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	font-weight: 600;
}

/*
 * O seletor herda `width: 100%` de `.er-field__input`, que existe para os
 * campos em coluna do formulario de filtros. Aqui ele e um controle EM LINHA,
 * ao lado do rotulo e do botao. Tres classes (0,3,0) vencem sem depender da
 * ordem das folhas — empate resolvido por ordem ja foi defeito nesta base.
 */
.er-section .er-orderform .er-orderform__select {
	min-width: 10rem;
	width: auto;
}

/* Com JavaScript, trocar o seletor ja envia: o botao sai da tela. */
.er-orderform.is-enhanced .er-orderform__submit {
	display: none;
}

/* ----------------------------------------------------------- toolbar */

.er-toolbar {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--er-space-2);
	margin-bottom: var(--er-space-3);
}

.er-toolbar__count {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	margin: 0;
}

.er-viewswitch {
	display: flex;
	gap: var(--er-space-1);
}

.er-viewswitch__item {
	align-items: center;
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink-soft);
	display: inline-flex;
	gap: var(--er-space-1);
	min-height: var(--er-touch);
	min-width: var(--er-touch);
	justify-content: center;
	padding: var(--er-space-1) var(--er-space-2);
	text-decoration: none;
}

.er-viewswitch__item.is-current {
	background: var(--er-brand);
	border-color: var(--er-brand);
	color: var(--er-brand-contrast);
}

.er-icon {
	height: 20px;
	width: 20px;
	flex: none;
}

/* Rotulo textual some so quando ha espaco apertado; o SVG mantem o
   nome acessivel pelo texto visualmente oculto do proprio link. */
.er-viewswitch__label {
	font-size: var(--er-size-sm);
}

@media (max-width: 400px) {
	.er-viewswitch__label {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/* ------------------------------------------------------------- cards */

.er-cards {
	display: grid;
	gap: var(--er-space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-card {
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius);
	box-shadow: var(--er-shadow);
	overflow: hidden;
}

.er-card__link {
	align-items: center;
	color: inherit;
	display: flex;
	gap: var(--er-space-3);
	padding: var(--er-space-3);
	text-decoration: none;
}

.er-card__media {
	flex: none;
	position: relative;
}

.er-card__photo {
	background: var(--er-surface-alt);
	border-radius: 50%;
	display: block;
	height: 64px;
	object-fit: cover;
	width: 64px;
}

.er-card__number {
	background: var(--er-brand);
	border-radius: 999px;
	bottom: -4px;
	color: var(--er-brand-contrast);
	font-size: 0.75rem;
	font-weight: 700;
	left: 50%;
	padding: 2px 8px;
	position: absolute;
	transform: translateX(-50%);
	white-space: nowrap;
}

.er-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--er-space-1);
	min-width: 0;
}

.er-card__name {
	font-size: var(--er-size-lg);
	font-weight: 600;
	line-height: 1.25;
	/* Nome nunca e truncado a ponto de perder a identificacao. */
	overflow-wrap: anywhere;
}

.er-card__meta {
	align-items: center;
	color: var(--er-ink-soft);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--er-size-sm);
	gap: var(--er-space-2);
}

.er-card__coalition {
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
}

/* Link textual redundante: existe para leitores de tela e teclado, e
   fica visivel ao receber foco. */
.er-card__profile {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.er-card__profile:focus-visible {
	background: var(--er-surface);
	clip: auto;
	clip-path: none;
	display: block;
	height: auto;
	padding: var(--er-space-2) var(--er-space-3);
	position: static;
	width: auto;
}

.er-badge {
	background: var(--er-surface-alt);
	border: 1px solid var(--er-border);
	border-radius: 999px;
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 2px 8px;
	white-space: nowrap;
}

.er-badge--party {
	background: var(--er-brand);
	border-color: var(--er-brand);
	color: var(--er-brand-contrast);
}

/* Modo lista: linha compacta, mas o partido continua visivel. */
.er-cards--list .er-card__link {
	gap: var(--er-space-3);
	padding: var(--er-space-2) var(--er-space-3);
}

.er-cards--list .er-card__photo {
	height: 44px;
	width: 44px;
}

.er-cards--list .er-card__name {
	font-size: var(--er-size-base);
}

/* Modo miniaturas. */
.er-cards--thumbs {
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.er-cards--thumbs .er-card__link {
	flex-direction: column;
	text-align: center;
}

.er-cards--thumbs .er-card__photo {
	height: 96px;
	width: 96px;
}

.er-cards--thumbs .er-card__meta {
	justify-content: center;
}

/* Colunas por largura do proprio componente, nao da janela. */
@container er-section (min-width: 560px) {
	.er-cards--cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.er-toolbar {
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
	}

	.er-filters__body {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container er-section (min-width: 900px) {
	.er-cards--cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.er-filters__body {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: end;
	}
}

/* Fallback para navegadores sem container queries. */
@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.er-cards--cards {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.er-toolbar {
			align-items: center;
			flex-direction: row;
			justify-content: space-between;
		}

		.er-filters__body {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1024px) {
		.er-cards--cards {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.er-filters__body {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
}

/* -------------------------------------------------------- paginacao */

.er-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-3);
	justify-content: center;
	margin-top: var(--er-space-4);
}

.er-pagination a {
	align-items: center;
	border: 1px solid var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	display: inline-flex;
	min-height: var(--er-touch);
	padding: var(--er-space-2) var(--er-space-4);
	text-decoration: none;
}

.er-pagination__status,
.er-pagination__end {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	margin: var(--er-space-3) 0 0;
	text-align: center;
}

/* ----------------------------------------------------------- perfil */

.er-profile__header {
	display: flex;
	flex-direction: column;
	gap: var(--er-space-4);
	margin-bottom: var(--er-space-5);
}

.er-profile__media {
	display: flex;
	flex-direction: column;
	gap: var(--er-space-3);
}

.er-profile__photo {
	aspect-ratio: 1 / 1;
	background: var(--er-surface-alt);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius);
	display: block;
	height: auto;
	max-width: 220px;
	object-fit: cover;
	width: 100%;
}

.er-profile__name {
	font-size: 1.625rem;
	line-height: 1.2;
	margin: 0 0 var(--er-space-2);
	overflow-wrap: anywhere;
}

.er-profile__fullname,
.er-profile__situation {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	margin: 0 0 var(--er-space-2);
}

.er-profile__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin: 0 0 var(--er-space-3);
}

.er-profile__block {
	border-top: 1px solid var(--er-border);
	margin-top: var(--er-space-5);
	padding-top: var(--er-space-4);
}

.er-profile__block h2 {
	font-size: var(--er-size-lg);
	margin: 0 0 var(--er-space-3);
}

.er-datalist {
	display: grid;
	gap: var(--er-space-3);
	margin: 0;
}

.er-datalist__row {
	border-bottom: 1px solid var(--er-border);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--er-space-2);
}

.er-datalist dt {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	font-weight: 600;
}

.er-datalist dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Bloco de cada integrante da chapa: dados e bens proprios, separados dos do
   titular. Empilhado no celular, sem exigir tabela larga. */
.er-member {
	background: var(--er-surface-alt);
	border-radius: var(--er-radius-sm);
	margin-bottom: var(--er-space-3);
	padding: var(--er-space-3);
}

.er-member__head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin-bottom: var(--er-space-2);
}

.er-member__name {
	font-weight: 700;
	overflow-wrap: anywhere;
}

.er-member__assets-title {
	font-size: var(--er-size-base);
	margin: var(--er-space-3) 0 var(--er-space-2);
}

.er-datalist--member {
	gap: var(--er-space-2);
}

.er-datalist--member .er-assets__item,
.er-member .er-assets__item {
	background: var(--er-surface);
}

.er-members,
.er-assets {
	display: grid;
	gap: var(--er-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-members__item {
	align-items: center;
	background: var(--er-surface-alt);
	border-radius: var(--er-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	padding: var(--er-space-2) var(--er-space-3);
}

.er-members__role {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	font-weight: 600;
}

/* Bens empilhados com rotulo: nao exige tabela larga no celular. */
.er-assets__item {
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-sm);
	display: grid;
	gap: 2px;
	padding: var(--er-space-3);
}

.er-assets__type {
	font-weight: 600;
}

.er-assets__desc {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
	overflow-wrap: anywhere;
}

.er-assets__label {
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
	margin-right: var(--er-space-1);
}

.er-assets__total {
	margin-top: var(--er-space-3);
}

@container er-section (min-width: 620px) {
	.er-profile__header {
		flex-direction: row;
	}

	.er-profile__media {
		flex: none;
		width: 220px;
	}

	.er-datalist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 760px) {
		.er-profile__header {
			flex-direction: row;
		}

		.er-profile__media {
			flex: none;
			width: 220px;
		}

		.er-datalist {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}
}

/* -------------------------------------------------------- apuracao */

.er-results__status {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
	margin: 0 0 var(--er-space-3);
}

.er-status {
	border-radius: 999px;
	font-size: var(--er-size-sm);
	font-weight: 600;
	padding: 4px 10px;
}

.er-status--final {
	background: #e3f3e6;
	color: #1c5c2b;
}

.er-status--partial {
	background: var(--er-warning-bg);
	color: #7a5900;
}

.er-results__updated {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
}

.er-summary {
	display: grid;
	gap: var(--er-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: var(--er-space-4);
}

.er-summary__item {
	background: var(--er-surface-alt);
	border-radius: var(--er-radius-sm);
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--er-space-3);
}

.er-summary__label {
	color: var(--er-ink-soft);
	font-size: var(--er-size-sm);
}

.er-summary__value {
	font-size: var(--er-size-lg);
	font-weight: 700;
}

.er-summary__of {
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
	font-weight: 400;
}

.er-votes {
	display: grid;
	gap: var(--er-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-votes__item {
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-sm);
	display: grid;
	gap: var(--er-space-2);
	padding: var(--er-space-3);
}

.er-votes__id {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-2);
}

.er-votes__name {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.er-votes__numbers {
	align-items: baseline;
	display: flex;
	gap: var(--er-space-2);
}

.er-votes__count {
	font-size: var(--er-size-lg);
	font-weight: 700;
}

.er-votes__pct {
	color: var(--er-ink-soft);
}

.er-votes__bar {
	background: var(--er-surface-alt);
	border-radius: 999px;
	display: block;
	height: 8px;
	overflow: hidden;
}

.er-votes__fill {
	background: var(--er-brand);
	display: block;
	height: 100%;
}

.er-votes__flags {
	color: var(--er-ink-soft);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--er-size-sm);
	gap: var(--er-space-2);
}

.er-votes__status--flag {
	background: var(--er-warning-bg);
	border-radius: var(--er-radius-sm);
	padding: 2px 6px;
}

@container er-section (min-width: 560px) {
	.er-summary {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 700px) {
		.er-summary {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}

/* --------------------------------------------------- estados e avisos */

.er-empty,
.er-notice {
	border-radius: var(--er-radius);
	margin: var(--er-space-3) 0;
	padding: var(--er-space-4);
}

.er-empty {
	background: var(--er-surface-alt);
	border: 1px dashed var(--er-border-strong);
	text-align: center;
}

.er-empty p,
.er-notice p {
	margin: 0 0 var(--er-space-2);
}

.er-empty p:last-child,
.er-notice p:last-child {
	margin-bottom: 0;
}

.er-notice--warning {
	background: var(--er-warning-bg);
	border-left: 4px solid var(--er-warning-border);
}

.er-notice--info {
	background: var(--er-info-bg);
	border-left: 4px solid var(--er-info-border);
}

/* Aviso de demonstracao. Deliberadamente visivel: identifica a procedencia do
   conjunto exibido, sem depender do titulo do tema nem do nome dos registros. */
.er-demo-notice {
	background: var(--er-warning-bg);
	border: 1px solid var(--er-warning-border);
	border-left-width: 4px;
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	display: block;
	font-size: var(--er-size-sm);
	line-height: 1.5;
	margin: 0 0 var(--er-space-4);
	padding: var(--er-space-3);
}

.er-demo-notice__title {
	display: block;
	font-weight: 700;
	margin-bottom: 2px;
}

.er-demo-notice__body {
	display: block;
}

.er-muted {
	color: var(--er-ink-muted);
}

.er-source {
	border-top: 1px solid var(--er-border);
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
	margin-top: var(--er-space-5);
	padding-top: var(--er-space-3);
}

.er-breadcrumb {
	color: var(--er-ink-soft);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--er-size-sm);
	gap: var(--er-space-2);
	margin-bottom: var(--er-space-3);
}

.er-link {
	color: var(--er-brand);
}

/* Links que funcionam como controle de navegacao (voltar, limpar filtros)
   precisam do alvo de toque minimo, ao contrario de links em texto corrido. */
.er-profile__back .er-link,
.er-empty .er-link,
.er-notice .er-link {
	align-items: center;
	display: inline-flex;
	min-height: var(--er-touch);
	padding: var(--er-space-2) 0;
}

/* ------------------------------------------------------------ ads */

.er-ad {
	display: block;
	margin: var(--er-space-4) 0;
	max-width: 100%;
}

.er-ad img,
.er-ad iframe {
	max-width: 100%;
}

/* Reserva de dimensao responsiva.
 *
 * O servidor publica a proporcao do criativo em --er-ad-w / --er-ad-h. A
 * largura acompanha o contêiner e para no tamanho natural do criativo, de modo
 * que 728x90 ou 970x250 nao transbordam uma coluna de 320 px.
 *
 * Antes usava-se `min-width` fixo, que `max-width:100%` nao anula. */
.er-ad[style*="--er-ad-w"] {
	aspect-ratio: var(--er-ad-w) / var(--er-ad-h);
	max-width: calc(var(--er-ad-w) * 1px);
	width: 100%;
}

@supports not (aspect-ratio: 1 / 1) {
	/* Sem aspect-ratio a reserva vira apenas altura maxima, sem forcar
	   largura minima — continua sem transbordar. */
	.er-ad[style*="--er-ad-w"] {
		max-height: calc(var(--er-ad-h) * 1px);
	}
}

/* A variante incompativel nao chega ao HTML: a decisao e do servidor (modo
   servidor) ou do JS a partir de um <template> inerte (modo cliente). Nao ha
   regra de CSS escondendo criativo carregado. */
.er-ad--deferred:empty {
	display: none;
}

/* --------------------------------------------------------- noticias */

.er-news {
	border-top: 1px solid var(--er-border);
	margin-top: var(--er-space-5);
	padding-top: var(--er-space-4);
}

.er-news__title {
	font-size: var(--er-size-lg);
	margin: 0 0 var(--er-space-3);
}

.er-news__list {
	display: grid;
	gap: var(--er-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-news__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.er-news__date {
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
}

.er-prose > :first-child {
	margin-top: 0;
}

.er-prose > :last-child {
	margin-bottom: 0;
}

/* Identidade publica do prototipo v11. O componente tem sua propria superficie
   clara: preferencia escura do SO nao pode produzir texto claro sobre o tema
   branco do WordPress. Estes tokens ficam restritos ao componente publico. */
.er-root,
.er-section {
	--er-ink: #14202b;
	--er-ink-soft: #42515e;
	--er-ink-muted: #647383;
	--er-surface: #fff;
	--er-surface-alt: #f3f6f8;
	--er-border: #dce4eb;
	--er-border-strong: #b8c9d7;
	--er-warning-bg: #fff6e0;
	--er-info-bg: #edf6fc;
	--er-radius: 14px;
	--er-shadow: 0 8px 24px rgba(7, 56, 95, .07);
	--er-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color-scheme: light;
	background: var(--er-surface-alt);
	color: var(--er-ink);
}

#er-main.er-root {
	width: min(1180px, calc(100% - 32px));
	max-width: 1180px;
	margin: 32px auto 48px;
	border: 1px solid var(--er-border);
	border-radius: 22px;
	box-shadow: 0 16px 44px rgba(7, 56, 95, .08);
}

.er-section {
	padding: clamp(16px, 3vw, 36px);
	border-radius: 22px;
	min-width: 0;
}

.er-section :is(h1, h2, h3, dt, dd, p, li) {
	color: inherit;
}

.er-section :is(a, .er-link) {
	color: var(--er-brand);
}

.er-section :is(.er-muted, .er-source, .er-card__coalition) {
	color: var(--er-ink-muted);
}

.er-section .er-section__head {
	padding: clamp(24px, 4vw, 48px);
	margin: 0 0 24px;
	border-radius: 16px;
	background: linear-gradient(120deg, var(--er-brand-dark), var(--er-brand));
	color: #fff;
}

.er-section .er-section__title {
	color: #fff;
	font: 700 clamp(30px, 4vw, 52px)/1.08 Georgia, serif;
	letter-spacing: -.035em;
}

.er-section .er-modulenav__item {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .5);
	font-weight: 700;
}

.er-section .er-modulenav__item.is-current {
	background: #fff;
	color: var(--er-brand-dark);
}

.er-section .er-filters {
	background: #fff;
	border: 1px solid var(--er-border);
	border-radius: 14px;
	padding: 18px;
	box-shadow: var(--er-shadow);
}

.er-section :is(.er-field__input, .er-button, .er-views__button) {
	font-family: var(--er-font);
	border-radius: 8px;
}

.er-section button.er-button--primary {
	background: var(--er-brand);
	border: 1px solid var(--er-brand);
	color: var(--er-brand-contrast);
}

.er-section button.er-filters__toggle {
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	color: var(--er-ink);
}

.er-section .er-card {
	min-width: 0;
	box-shadow: var(--er-shadow);
	border-radius: 14px;
}

.er-section .er-card__link {
	color: var(--er-ink);
}

.er-section .er-card__name {
	font: 700 24px/1.1 Georgia, serif;
	letter-spacing: -.025em;
}

.er-section .er-cards--cards .er-card__link {
	padding: 0;
	gap: 0;
	align-items: stretch;
	flex-direction: column;
}

.er-section .er-cards--cards .er-card__photo {
	width: 100%;
	height: 240px;
	border-radius: 0;
	object-position: center top;
}

.er-section .er-cards--cards .er-card__body {
	padding: 20px;
	gap: 10px;
}

.er-section .er-cards--cards .er-card__number {
	left: auto;
	right: 12px;
	bottom: 12px;
	transform: none;
	font-size: 22px;
	font-weight: 800;
	border-radius: 8px;
	padding: 6px 12px;
}

.er-section .er-breadcrumb {
	font-size: 13px;
	margin-bottom: 24px;
	color: var(--er-ink-muted);
}

.er-section .er-profile__header {
	padding: clamp(18px, 3vw, 32px);
	border: 1px solid var(--er-border);
	border-radius: 16px;
	background: #fff;
	gap: 28px;
	align-items: flex-start;
}

.er-section .er-profile__photo {
	max-width: 210px;
	aspect-ratio: 21 / 26;
	object-position: center top;
	border-radius: 15px;
}

.er-section .er-profile__identity {
	min-width: 0;
	padding-top: 8px;
}

.er-section .er-profile__name {
	font: 700 clamp(32px, 5vw, 52px)/1.04 Georgia, serif;
	letter-spacing: -.035em;
	color: var(--er-ink);
	margin: 0 0 14px;
}

.er-section :is(.er-profile__fullname, .er-profile__situation) {
	color: var(--er-ink-soft);
	font-size: 15px;
	line-height: 1.6;
}

.er-section .er-profile__badges {
	margin: 20px 0;
	align-items: center;
}

.er-section .er-profile__badges .er-badge {
	white-space: normal;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 12px;
	font-weight: 700;
}

.er-section .er-profile__badges .er-badge--number {
	background: #edf6fc;
	color: var(--er-brand-dark);
	font-size: 26px;
	line-height: 1.1;
}

.er-section .er-profile__block {
	padding: clamp(16px, 2.5vw, 28px);
	border: 1px solid var(--er-border);
	border-radius: 14px;
	background: #fff;
	margin-top: 20px;
}

.er-section .er-profile__block h2 {
	font: 700 24px/1.2 Georgia, serif;
	color: var(--er-ink);
	margin: 0 0 20px;
}

.er-section .er-datalist {
	gap: 0;
	border: 1px solid var(--er-border);
	border-radius: 10px;
	overflow: hidden;
}

.er-section .er-datalist__row {
	padding: 14px 16px;
	gap: 5px;
	background: #fff;
}

.er-section .er-datalist dt {
	color: var(--er-ink-muted);
	font: 700 11px/1.4 var(--er-font);
	text-transform: uppercase;
	letter-spacing: .06em;
}

.er-section .er-datalist dd {
	color: var(--er-ink);
	font-size: 14px;
	line-height: 1.5;
}

.er-section .er-assets__item {
	padding: 16px;
	border-radius: 10px;
	background: #f8fafb;
}

.er-section .er-profile__back {
	margin: 24px 0;
}

@container er-section (max-width: 559px) {
	.er-section .er-profile__header {
		display: grid;
		grid-template-columns: minmax(76px, 30%) minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}
	.er-section .er-profile__media {
		width: 100%;
		min-width: 0;
	}
	.er-section .er-profile__name {
		font-size: clamp(24px, 8cqi, 32px);
	}
	.er-section .er-profile__fullname {
		font-size: 12px;
	}
	.er-section .er-profile__badges {
		gap: 5px;
		margin: 12px 0;
	}
	.er-section .er-profile__badges .er-badge {
		font-size: 10px;
		padding: 5px 7px;
	}
	.er-section .er-cards--cards .er-card__link {
		flex-direction: row;
	}
	.er-section .er-cards--cards .er-card__media {
		width: 34%;
	}
	.er-section .er-cards--cards .er-card__photo {
		height: 100%;
		min-height: 150px;
	}
	.er-section .er-cards--cards .er-card__body {
		padding: 14px;
		justify-content: center;
	}
	.er-section .er-card__name {
		font-size: 21px;
	}
}

@media (max-width: 600px) {
	#er-main.er-root {
		width: calc(100% - 16px);
		margin: 16px auto 28px;
		border-radius: 16px;
	}
	.er-section .er-profile__header {
		gap: 16px;
	}
}

/* ---------------------------------------------------------------------------
   Redes sociais do perfil — linha de ícones logo abaixo da identificação.
   Pedido do responsável: número, partido, cargo, UF e ano e, na linha
   seguinte, somente os ícones das redes com link válido.
   --------------------------------------------------------------------------- */

.er-profile__social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 var(--er-space-3);
	padding: 0;
}

.er-profile__social-item {
	margin: 0;
	padding: 0;
}

.er-social-link {
	align-items: center;
	background: var(--er-surface-alt);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	display: inline-flex;
	gap: 6px;
	/* Alvo de toque com folga: 44px é o mínimo utilizável no celular. */
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
	padding: 0 10px;
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.er-social-link:hover,
.er-social-link:focus-visible {
	background: var(--er-surface);
	border-color: var(--er-border-strong);
	color: var(--er-brand);
}

.er-social-link:focus-visible {
	outline: var(--er-focus);
	outline-offset: var(--er-focus-offset);
}

.er-social-link__icon {
	display: block;
	flex: 0 0 auto;
	height: 20px;
	width: 20px;
}

/* O rótulo acompanha o ícone: identificar a rede não pode depender só da
   forma nem só da cor. Em telas estreitas ele sai e sobra o alvo de toque,
   com o nome preservado no rótulo acessível e no title. */
.er-social-link__text {
	font-size: var(--er-size-sm);
	line-height: 1;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.er-social-link__text {
		display: none;
	}

	.er-social-link {
		padding: 0;
		width: 44px;
	}
}

/* ===========================================================================
   Correcao de UX, perfis e publicidade — 12/09/2026.

   Este bloco fica no FIM do arquivo de proposito. Varios defeitos corrigidos
   aqui eram empates de especificidade resolvidos pela ordem: uma regra de
   estado escrita antes perdia para uma regra generica escrita depois. Estado
   de componente agora vem por ultimo e com especificidade propria, para nao
   depender de quem foi escrito primeiro.

   Evidencias: docs/ux/evidencias-baseline.md
   Contrato visual: docs/ux/prototipo-perfis.html
   =========================================================================== */

/* ---------------------------------------------------- UX-01: modo ativo
 *
 * `.er-viewswitch__item.is-current` (0,2,0) empatava com
 * `.er-section :is(a, .er-link)` (0,2,0) e perdia pela ordem: o rotulo ficava
 * com a cor da marca sobre o fundo da marca, contraste 1,0:1. Medido nos dois
 * ambientes. Agora o estado tem especificidade propria (0,3,0), cobre
 * `:visited` e `:hover`, e nao depende so de cor.
 */
.er-section .er-viewswitch__item.is-current,
.er-section .er-viewswitch__item.is-current:visited,
.er-section .er-viewswitch__item.is-current:hover,
.er-section .er-viewswitch__item.is-current:focus {
	background: var(--er-brand);
	border-color: var(--er-brand-dark);
	color: var(--er-brand-contrast);
	font-weight: 700;
}

.er-viewswitch__item {
	position: relative;
}

/* Estado tambem sem cor: traco sob o rotulo. */
.er-section .er-viewswitch__item.is-current::after {
	background: currentColor;
	border-radius: 2px;
	bottom: 5px;
	content: "";
	height: 2px;
	left: 12px;
	position: absolute;
	right: 12px;
}

@media (max-width: 400px) {
	.er-section .er-viewswitch__item.is-current::after {
		left: 8px;
		right: 8px;
	}
}

/* ------------------------------------------------------- UX-02: filtros
 *
 * O tema Newspaper 12.3.1 publica `input[type="search"] { box-sizing:
 * content-box }` (especificidade 0,1,1) em style.css:358 — heranca do
 * normalize v2. O reset do plugin e `.er-section *` (0,1,0) e PERDE. Medido no
 * site publicado: busca com 62px de altura contra 44px dos selects, e 328px de
 * largura numa coluna de 302px. A declaracao na propria regra do campo (0,2,0)
 * vence o seletor de tipo + atributo.
 */
.er-section .er-field__input {
	box-sizing: border-box;
	line-height: 1.25;
	margin: 0;
	max-width: 100%;
	min-width: 0;
}

.er-section .er-field {
	margin: 0;
	min-width: 0;
}

/* A busca fica fora do recolhimento e ganha o dobro da largura. */
.er-filters__lead {
	align-items: end;
	display: grid;
	gap: var(--er-space-3);
	grid-template-columns: minmax(0, 1fr);
}

.er-filters__badge {
	background: var(--er-brand);
	border-radius: 999px;
	color: var(--er-brand-contrast);
	font-size: 0.75rem;
	font-weight: 700;
	margin-left: auto;
	margin-right: var(--er-space-2);
	padding: 3px 8px;
}

/* O botao "Filtros" e controle de CELULAR. Antes aparecia em qualquer
 * largura, e um clique dele escondia todos os filtros no desktop. */
.er-filters[data-er-collapsible].is-enhanced .er-filters__toggle {
	display: none;
}

@container er-section (max-width: 781px) {
	.er-filters[data-er-collapsible].is-enhanced .er-filters__toggle {
		display: flex;
	}
}

@container er-section (min-width: 900px) {
	.er-filters__lead {
		grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	}
	.er-section .er-filters__body {
		display: contents;
	}
	.er-section .er-filters__actions {
		grid-column: 1 / -1;
		margin-top: var(--er-space-3);
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 781px) {
		.er-filters[data-er-collapsible].is-enhanced .er-filters__toggle {
			display: flex;
		}
	}
	@media (min-width: 1024px) {
		.er-filters__lead {
			grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
		}
		.er-section .er-filters__body {
			display: contents;
		}
		.er-section .er-filters__actions {
			grid-column: 1 / -1;
			margin-top: var(--er-space-3);
		}
	}
}

/* ------------------------------------------ UX-03 e UX-04: lista e miniaturas
 *
 * O numero deixa de flutuar sobre a foto. Com cinco digitos ele media 52,4px
 * sobre uma foto de 44px: cobria o rosto e transbordava dos dois lados. Agora
 * e a primeira ficha da identificacao, com a mesma leitura em qualquer
 * quantidade de digitos.
 *
 * No modo CARTOES o numero sobre a foto e a aparencia aprovada — foto de
 * 240px, numero no canto — e continua como esta.
 */
.er-cards--list {
	/* minmax(0,1fr) e obrigatorio: sem ele a trilha `auto` da lista e
	   dimensionada pelo item mais largo, e um criativo de 336px arrasta TODOS
	   os cartoes para fora do container.
	 *
	 * A regra e do MODO LISTA, nao de `.er-cards`: em `.er-cards` ela tem a
	 * mesma especificidade de `.er-cards--cards` e, por vir depois no arquivo,
	 * derrubava as duas e tres colunas do modo cartoes. Cartoes e miniaturas
	 * ja declaram trilhas com minimo zero. */
	grid-template-columns: minmax(0, 1fr);
}

.er-cards--list .er-card__number,
.er-cards--thumbs .er-card__number {
	background: var(--er-info-bg);
	/* Largura estavel para 2 a 5 digitos: sem isto cada linha tem uma coluna
	   de numero diferente e os nomes nao alinham entre si. */
	min-width: 5ch;
	text-align: center;
	border: 1px solid #cfe0ec;
	border-radius: 7px;
	bottom: auto;
	color: var(--er-brand-dark);
	display: inline-block;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-weight: 800;
	left: auto;
	padding: 3px 8px;
	position: static;
	transform: none;
	white-space: nowrap;
}

/* Lista: foto | numero | identificacao. O numero e uma coluna propria, entao
   nao existe caminho de CSS que o coloque de volta sobre o rosto. */
.er-section .er-cards--list .er-card__link {
	align-items: center;
	display: grid;
	gap: var(--er-space-2) var(--er-space-3);
	grid-template-columns: var(--er-list-photo-narrow) auto minmax(0, 1fr);
	padding: 10px var(--er-space-3);
}

.er-cards--list .er-card__media {
	grid-column: 1;
}

.er-cards--list .er-card__number {
	grid-column: 2;
}

.er-cards--list .er-card__body {
	grid-column: 3;
}

.er-cards--list .er-card__photo {
	height: var(--er-list-photo-narrow);
	width: var(--er-list-photo-narrow);
}

/* (0,3,0): a tipografia do modo vence `.er-section .er-card__name`, que antes
   impunha 24px Georgia a lista e as miniaturas por vir depois no arquivo. */
.er-section .er-cards--list .er-card__name {
	font-size: var(--er-list-name-narrow);
	line-height: 1.25;
}

.er-section .er-cards--thumbs .er-card__name {
	font-size: var(--er-thumb-name);
	line-height: 1.22;
	/* break-word, nao anywhere: parte a palavra so quando ela sozinha nao
	   couber. `hyphens` fica manual — hifenizar nome proprio produz
	   "Nascimen-to" e "Professo-ra". */
	hyphens: manual;
	overflow-wrap: break-word;
	text-wrap: balance;
	word-break: normal;
}

.er-cards--thumbs {
	grid-template-columns: repeat(auto-fill, minmax(var(--er-thumb-col), 1fr));
}

.er-cards--thumbs .er-card__photo {
	height: var(--er-thumb-photo);
	width: var(--er-thumb-photo);
}

.er-cards--thumbs .er-card__link {
	gap: var(--er-space-2);
	padding: 14px 10px;
}

.er-cards--thumbs .er-card__body {
	align-items: center;
	width: 100%;
}

/* Cartoes: o numero divide a CELULA da foto, em vez de flutuar sobre ela por
 * posicionamento absoluto. A aparencia aprovada — canto inferior direito de
 * uma foto grande — fica identica, e o mesmo HTML serve aos outros modos.
 */
.er-section .er-cards--cards .er-card__link {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
}

.er-section .er-cards--cards .er-card__media {
	grid-area: 1 / 1;
}

.er-section .er-cards--cards .er-card__number {
	align-self: end;
	grid-area: 1 / 1;
	justify-self: end;
	margin: 12px;
	/* `relative` nao e enfeite: `.er-card__media` e posicionado e, por isso,
	   pinta ACIMA de um irmao estatico na mesma celula. Sem isto o numero
	   fica atras da foto — presente na arvore, invisivel na tela. */
	position: relative;
	transform: none;
	z-index: 1;
}

.er-section .er-cards--cards .er-card__body {
	grid-area: 2 / 1;
}

@container er-section (max-width: 559px) {
	.er-section .er-cards--cards .er-card__link {
		grid-template-columns: 34% minmax(0, 1fr);
		grid-template-rows: auto;
	}
	.er-section .er-cards--cards .er-card__media,
	.er-section .er-cards--cards .er-card__number {
		grid-area: 1 / 1;
	}
	.er-section .er-cards--cards .er-card__number {
		margin: 10px;
	}
	.er-section .er-cards--cards .er-card__body {
		grid-area: 1 / 2;
	}
}

/* A coligacao sai do modo compacto e continua inteira no perfil e nos cartoes. */
.er-cards--list .er-card__coalition,
.er-cards--thumbs .er-card__coalition {
	display: none;
}

/* No estreito o numero sai da linha do nome e vai para cima dele: com foto,
   numero e nome disputando 334px, sobravam ~180px para o nome e qualquer nome
   composto virava quatro linhas. */
@container er-section (max-width: 559px) {
	.er-section .er-cards--list .er-card__link {
		grid-template-areas: "foto numero" "foto corpo";
		grid-template-columns: var(--er-list-photo-narrow) minmax(0, 1fr);
		row-gap: 2px;
	}
	.er-cards--list .er-card__media {
		align-self: center;
		grid-area: foto;
	}
	.er-cards--list .er-card__number {
		grid-area: numero;
		justify-self: start;
	}
	.er-cards--list .er-card__body {
		grid-area: corpo;
	}
}

@container er-section (min-width: 560px) {
	.er-section .er-cards--list .er-card__link {
		grid-template-columns: var(--er-list-photo) auto minmax(0, 1fr);
	}
	.er-cards--list .er-card__photo {
		height: var(--er-list-photo);
		width: var(--er-list-photo);
	}
	.er-section .er-cards--list .er-card__name {
		font-size: var(--er-list-name);
	}
}

/* ------------------------------------------------ publicidade no fluxo */

.er-adslot {
	background: #fbf8ef;
	border: 1px dashed #e6dcbe;
	border-radius: var(--er-radius-sm);
	display: grid;
	gap: var(--er-space-2);
	grid-column: 1 / -1;
	justify-items: center;
	margin: var(--er-space-2) 0;
	padding: var(--er-space-3);
}

.er-adslot__label {
	color: #7a6a3a;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.er-adslot .er-ad {
	margin: 0;
}

/* --------------------------------------------------------------- perfil */

.er-profile__layout {
	display: grid;
	gap: var(--er-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.er-profile__main {
	min-width: 0;
}

.er-profile__backtop {
	margin: 0 0 var(--er-space-3);
}

.er-profile__backend {
	margin: var(--er-space-5) 0 0;
}

.er-section .er-profile__back {
	align-items: center;
	background: var(--er-surface);
	border: 1px solid var(--er-border-strong);
	border-radius: 999px;
	color: var(--er-ink);
	display: inline-flex;
	font-size: var(--er-size-sm);
	font-weight: 600;
	gap: var(--er-space-2);
	max-width: 100%;
	min-height: var(--er-touch);
	padding: 10px var(--er-space-4);
	text-decoration: none;
	/* fit-content, nao max-content: max-content IGNORA o container e faz o
	   botao definir a largura do perfil inteiro em coluna estreita. */
	width: fit-content;
}

.er-profile__back-ctx {
	font-weight: 400;
}

@container er-section (max-width: 559px) {
	.er-profile__back-ctx {
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}
}

/* Identidade ao lado da foto no celular; fichas e redes em largura inteira.
   Sem isto cada ficha ocupa uma linha e o cabecalho vira uma coluna de texto
   espremida ao lado de uma foto enorme. */
@container er-section (max-width: 619px) {
	.er-section .er-profile__header {
		align-items: start;
		display: grid;
		gap: 14px;
		grid-template-columns: minmax(84px, 30%) minmax(0, 1fr);
		padding: 14px;
		row-gap: 12px;
	}
	.er-profile__identity {
		display: contents;
	}
	.er-profile__idtop {
		grid-column: 2;
		min-width: 0;
	}
	.er-profile__badges,
	.er-profile__social,
	.er-profile__situation {
		grid-column: 1 / -1;
		margin-bottom: 0;
	}
}

@container er-section (max-width: 399px) {
	.er-section .er-profile__header {
		grid-template-columns: 92px minmax(0, 1fr);
	}
	.er-section .er-profile__name {
		font-size: clamp(21px, 8cqi, 32px);
	}
}

/* ------------------------------------------- foto reduzida que nao deforma
 *
 * Caixa de proporcao fixa e recorte do navegador. A imagem NUNCA e esticada
 * para caber: origem retrato, quadrada ou paisagem produzem a mesma caixa.
 */
.er-profile__summary-photo,
.er-identbar__photo,
.er-figura {
	aspect-ratio: 4 / 5;
	background: var(--er-surface-alt);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-sm);
	display: block;
	flex: none;
	object-fit: cover;
	object-position: center top;
}

/* Largura E altura, as duas.
 *
 * `aspect-ratio` e ignorado quando o elemento ja tem largura e altura
 * definidas — e `<img width height>` define as duas. Declarar so a largura
 * no CSS deixava a altura do atributo valer: a foto da barra media 38x120 e
 * vazava 32px acima e abaixo de uma barra de 88px. */
.er-profile__summary-photo {
	height: 60px;
	width: 48px;
}

.er-identbar__photo {
	height: 48px;
	width: 38px;
}

.er-figura--vazia {
	align-items: center;
	color: var(--er-ink-muted);
	display: flex;
	font-size: var(--er-size-sm);
	font-weight: 700;
	justify-content: center;
}

.er-section .er-profile__photo {
	display: block;
	object-position: center top;
}

/* ------------------------------------------------------- resumo lateral */

.er-profile__summary {
	align-self: start;
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius);
	display: grid;
	gap: var(--er-space-2);
	min-width: 0;
	padding: var(--er-space-4);
}

.er-profile__summary-id {
	align-items: center;
	display: flex;
	gap: var(--er-space-2);
	min-width: 0;
}

.er-profile__summary-name {
	display: block;
	font-weight: 700;
	overflow-wrap: break-word;
}

.er-profile__summary-meta {
	display: block;
	font-size: var(--er-size-sm);
}

.er-profile__summary-back {
	justify-content: center;
	width: 100%;
}

.er-profile__summary-list {
	border-top: 1px solid var(--er-border);
	display: grid;
	gap: var(--er-space-1);
	margin-top: var(--er-space-1);
	padding-top: var(--er-space-2);
}

.er-profile__summary-list a {
	align-items: center;
	border-radius: var(--er-radius-sm);
	color: var(--er-ink);
	display: flex;
	font-size: var(--er-size-sm);
	justify-content: space-between;
	gap: var(--er-space-2);
	min-height: var(--er-touch);
	padding: var(--er-space-2);
	text-decoration: none;
}

.er-profile__summary-list a:hover,
.er-profile__summary-list a:focus-visible {
	background: var(--er-surface-alt);
	color: var(--er-brand);
}

.er-profile__summary-list .qtd {
	color: var(--er-ink-muted);
	font-size: var(--er-size-sm);
}

/* A ancora nao pode parar atras do cabecalho fixo do tema NEM da barra
 * compacta. `sticky` ocupar espaco no fluxo impede que ela cubra o conteudo
 * em repouso — mas nao impede que um salto de ancora leve o destino para
 * debaixo dela. Sao coisas diferentes, e eu tinha tratado como a mesma. */
.er-profile,
.er-profile__block,
.er-profile__block h2,
.er-profile [id],
.er-profile a,
.er-profile button {
	/* O `calc()` fica AQUI, e nao dentro de outra variavel no `:root`.
	 * `var()` dentro de uma custom property e resolvido no escopo em que essa
	 * propriedade e DECLARADA: composto no `:root`, o valor congelava com a
	 * reserva zerada e a reserva do perfil nunca chegava a valer. */
	scroll-margin-top: calc(var(--er-sticky-offset) + var(--er-identbar-h) + 8px);
}

@container er-section (min-width: 1000px) {
	.er-profile__layout {
		grid-template-columns: minmax(0, 1fr) var(--er-summary-width);
	}
	.er-profile__summary {
		position: sticky;
		top: var(--er-sticky-offset);
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.er-profile__layout {
			grid-template-columns: minmax(0, 1fr) var(--er-summary-width);
		}
		.er-profile__summary {
			position: sticky;
			top: var(--er-sticky-offset);
		}
	}
}

/* Identidade e voltar so existem no resumo do desktop. No estreito esse papel
   e da barra compacta — dois conjuntos de navegacao ao mesmo tempo seriam
   ruido concorrente. */
@container er-section (max-width: 999px) {
	.er-profile__summary [data-er-summary-id] {
		display: none;
	}
	.er-profile__summary-list {
		border-top: 0;
		margin-top: 0;
		padding-top: 0;
	}
}

/* ---------------------------------------------- barra compacta (celular) */

.er-identbar[hidden] {
	display: none;
}

.er-identbar {
	align-items: center;
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius-sm);
	box-shadow: 0 6px 20px rgba(7, 56, 95, .12);
	display: flex;
	gap: var(--er-space-2);
	margin-bottom: var(--er-space-3);
	max-height: 88px;
	min-width: 0;
	padding: var(--er-space-2);
	/* Gruda a partir do topo do PERFIL, nao da propria posicao no fim do
	   documento. Isto so funciona porque o elemento e emitido antes do
	   conteudo — ver templates/profile.php. */
	position: sticky;
	top: var(--er-sticky-offset);
	/* Abaixo do z-index 999 do cabecalho do tema e dos 9999 dos fundos de
	   menu e busca: nunca disputa camada com o jornal. */
	z-index: 20;
}

.er-identbar__text {
	min-width: 0;
}

.er-identbar__name {
	display: block;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.er-identbar__meta {
	color: var(--er-ink-soft);
	display: block;
	font-size: 0.75rem;
}

.er-section .er-identbar__back {
	flex: none;
	margin-left: auto;
	padding: var(--er-space-2) var(--er-space-3);
}

/* A altura da barra e RESERVADA onde ela pode aparecer, mesmo enquanto esta
 * escondida.
 *
 * O salto de ancora acontece com a barra ainda oculta: se a reserva fosse zero
 * nesse instante, o navegador calcularia o destino sem ela e o titulo pararia
 * debaixo da barra que aparece logo em seguida. A reserva e estatica porque,
 * no instante do salto, a barra ainda esta oculta e sua altura medida e zero. */
@container er-section (max-width: 999px) {
	/* A propriedade vai em DESCENDENTES, nunca em `.er-profile`: ele e o
	   proprio container, e uma container query so casa com o que esta dentro
	   dele. Declarada no container, a regra nunca valia e a reserva
	   continuava zero. */
	.er-profile__layout,
	.er-profile__main,
	.er-profile__block {
		--er-identbar-h: 96px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 1099px) {
		.er-profile__layout,
		.er-profile__main,
		.er-profile__block {
			--er-identbar-h: 96px;
		}
	}
}

/* A barra compacta nao existe no desktop — la quem carrega identidade e
   retorno e o resumo lateral.
 *
 * Esta regra fica DEPOIS das regras base de propósito. Quando ela morava
 * dentro do bloco de container acima, empatava em especificidade com
 * `.er-identbar { display: flex }` e perdia pela ordem: o script removia o
 * `hidden`, a barra virava item da grade, ocupava a coluna do resumo e
 * empurrava o resumo para a linha de baixo — onde ele parava de grudar.
 * Mesmo tipo de defeito do UX-01. */
@container er-section (min-width: 1000px) {
	.er-identbar {
		display: none;
	}
}

@supports not (container-type: inline-size) {
	@media (min-width: 1100px) {
		.er-identbar {
			display: none;
		}
	}
}

/* Altura util insuficiente: nada fixo. O retorno continua no topo do
   documento e o resumo volta ao fluxo. */
@media (max-height: 480px) {
	.er-identbar,
	.er-profile__summary {
		position: static;
	}
}

/* ------------------------------------------------------- redes do perfil */

.er-social-link__handle {
	color: var(--er-ink-muted);
	font-size: 0.75rem;
	font-weight: 400;
	white-space: nowrap;
}

/* Somente icones: o rotulo sai da TELA, nao do documento. */
.er-profile__social[data-estilo="icone"] .er-social-link__text,
.er-profile__social[data-estilo="icone"] .er-social-link__handle {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.er-profile__social[data-estilo="icone"] .er-social-link {
	padding: 0;
	width: var(--er-touch);
}

.er-section .er-social-more {
	align-items: center;
	background: var(--er-surface);
	border: 1px dashed var(--er-border-strong);
	border-radius: var(--er-radius-sm);
	color: var(--er-brand);
	cursor: pointer;
	display: inline-flex;
	font-size: var(--er-size-sm);
	font-weight: 600;
	gap: var(--er-space-1);
	min-height: var(--er-touch);
	padding: 0 14px;
}

.er-profile__social-item[hidden] {
	display: none;
}

/* -------------------------------------------------- resumo dos bens */

.er-assets__resumo {
	align-items: center;
	background: var(--er-surface-alt);
	border-radius: var(--er-radius-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-5);
	margin: 0 0 var(--er-space-3);
	padding: var(--er-space-3);
}

.er-assets__resumo div {
	display: grid;
}

.er-assets__resumo dt {
	color: var(--er-ink-muted);
	font-size: 0.75rem;
}

.er-assets__resumo dd {
	font-size: var(--er-size-lg);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	margin: 0;
}

/* ------------------------------------------------------ PROD-02: logo
 *
 * O logo do jornal e preto e o cabecalho e um gradiente azul escuro:
 * contraste de 1,8:1 a 2,5:1, abaixo de 3:1 em toda a faixa. A superficie
 * clara resolve sem exigir outro arquivo do editor.
 */
.er-section .er-section__logo {
	background: var(--er-surface);
	border-radius: var(--er-radius-sm);
	padding: var(--er-space-2) var(--er-space-3);
}

/* ====================================================================
 * Compatibilidade: devolver ao `sticky` o conteiner de rolagem
 * ====================================================================
 *
 * Temas que envolvem a pagina em um elemento com `overflow: hidden` — o
 * `.td-theme-wrap` do jornal e o caso medido — transformam esse elemento em
 * conteiner de rolagem. A partir dai `position: sticky` se prende a ELE, que
 * nunca rola, e o resumo do perfil sai da tela junto com o conteudo. O
 * elemento continua dizendo `position: sticky` o tempo inteiro; a unica prova
 * e a POSICAO durante a rolagem.
 *
 * A classe e aplicada pelo script APENAS a ancestrais de uma secao deste
 * modulo, e apenas quando o valor computado e `hidden`. Nenhuma outra pagina
 * do site e tocada, e nenhuma rolagem real (`auto`, `scroll`) e removida.
 *
 * `!important` aqui e deliberado, e o unico do arquivo: a regra do tema pode
 * vir de um seletor de id (`#page`, 0-1-0-0) ou mais forte, e esta correcao
 * nao pode depender de adivinhar a especificidade dele. A classe so existe
 * onde o script a colocou, entao o alcance do `!important` e exatamente o
 * ancestral diagnosticado.
 */
@supports (overflow: clip) {
	/* UM EIXO POR VEZ.
	 *
	 * A regra anterior escrevia `overflow: clip` nos dois eixos. Um ancestral
	 * com `overflow-x: hidden; overflow-y: auto` perdia a rolagem vertical, e
	 * o conteudo abaixo da dobra ficava inalcancavel. O script agora decide
	 * eixo a eixo, e so onde nao existe rolagem real. */
	.er-compat-clip--x {
		/* Corta igual a `hidden` e NAO cria conteiner de rolagem. */
		overflow-x: clip !important;
	}

	.er-compat-clip--y {
		overflow-y: clip !important;
	}

	/* `hidden` tambem estabelecia contexto de formatacao de bloco, e `clip`
	 * nao. Sem isto, um tema que usava o `overflow` para conter floats
	 * perderia essa contencao. Aplicado so onde o display computado era
	 * `block`: um flex ou grid do tema nao vira outra coisa. */
	.er-compat-clip--bfc {
		display: flow-root !important;
	}
}

/* ====================================================================
 * Cartoes: a fotografia oficial aparece INTEIRA
 * ====================================================================
 *
 * A caixa continua regular — todos os cartoes com a mesma altura de foto —
 * mas o recorte saiu. `cover` amplia ate preencher e descarta o resto: com o
 * arquivo em retrato, 44,7% da altura aparecia; o rosto ficava cortado.
 *
 * `contain` mostra o arquivo inteiro e preenche o que sobra com superficie do
 * sistema visual. Nada e ampliado artificialmente e nenhum arquivo e alterado.
 *
 * Largura e altura continuam definidas nos dois lados (atributo no HTML e
 * regra aqui): a caixa nao muda de tamanho enquanto a imagem carrega.
 */
.er-cards--cards {
	--er-card-photo-h: 240px;
}

.er-section .er-cards--cards .er-card__photo {
	background: var(--er-surface-alt);
	height: var(--er-card-photo-h);
	min-height: 0;
	object-fit: contain;
	object-position: center;
	width: 100%;
}

/* O numero ganha FAIXA PROPRIA, abaixo da imagem.
 *
 * Antes ele era pintado sobre o canto inferior direito da foto. Numa caixa
 * que agora mostra o arquivo inteiro, esse canto pode ser justamente o rosto.
 * Em linha propria ele nao cobre nada — e continua no canto da area da foto,
 * que e onde o leitor aprendeu a procurar.
 */
.er-section .er-cards--cards .er-card__link {
	grid-template-rows: auto auto auto;
}

.er-section .er-cards--cards .er-card__media {
	grid-area: 1 / 1;
}

.er-section .er-cards--cards .er-card__number {
	align-self: start;
	grid-area: 2 / 1;
	justify-self: end;
	margin: 10px 12px 0;
	/* Fora da area da imagem nao ha disputa de camada: o `relative` e o
	   `z-index` que existiam aqui resolviam a sobreposicao que deixou de
	   existir. */
	position: static;
	transform: none;
}

.er-section .er-cards--cards .er-card__body {
	grid-area: 3 / 1;
	padding-top: 10px;
}

@container er-section (max-width: 559px) {
	.er-cards--cards {
		--er-card-photo-h: 180px;
	}
	.er-section .er-cards--cards .er-card__link {
		grid-template-columns: 34% minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.er-section .er-cards--cards .er-card__media {
		grid-area: 1 / 1;
		/* A coluna da grade JA vale 34%. A largura de 34% declarada antes no
		   arquivo se aplicava DENTRO dessa coluna: a caixa da foto ficava com
		   34% de 34% — cerca de 39px num cartao de 390px. */
		width: auto;
	}
	.er-section .er-cards--cards .er-card__number {
		grid-area: 2 / 1;
		margin: 8px 10px 12px;
	}
	/* O corpo ocupa as duas linhas da coluna da direita: a faixa do numero
	   nasce sob a foto, nao ao lado do nome. */
	.er-section .er-cards--cards .er-card__body {
		grid-area: 1 / 2 / 3 / 3;
		padding-top: 14px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 699px) {
		.er-cards--cards {
			--er-card-photo-h: 180px;
		}
		.er-section .er-cards--cards .er-card__link {
			grid-template-columns: 34% minmax(0, 1fr);
			grid-template-rows: auto auto;
		}
		.er-section .er-cards--cards .er-card__media {
			grid-area: 1 / 1;
			width: auto;
		}
		.er-section .er-cards--cards .er-card__number {
			grid-area: 2 / 1;
			margin: 8px 10px 12px;
		}
		.er-section .er-cards--cards .er-card__body {
			grid-area: 1 / 2 / 3 / 3;
			padding-top: 14px;
		}
	}
}

/* ====================================================================
 * Tres modelos de cabecalho publico
 * ====================================================================
 *
 * Uma marcacao so, tres aparencias. A classe vem do painel, validada contra um
 * enum fechado no servidor E conferida de novo no template: o valor vira classe
 * no HTML e nao pode ser texto livre.
 *
 * Estas regras ficam DEPOIS do bloco de identidade visual v11 de proposito.
 * `.er-section .er-section__head--editorial` (0-2-0) empata em especificidade
 * com `.er-section .er-section__head` (0-2-0), que pinta o gradiente do modelo
 * classico — quem decide e a ordem. Foi esse mesmo empate que produziu UX-01 e
 * mais tres defeitos nesta folha; aqui ele e usado de propósito e declarado.
 */

/* Invólucros novos, neutros no modelo classico: ele continua empilhando logo,
   titulo e navegacao como antes. */
.er-section__titulo {
	min-width: 0;
}

/* A linha secundaria da apuracao vive DENTRO da faixa da marca nos modelos
   classico e compacto. O cinza do texto corrido sobre azul escuro dava
   contraste insuficiente. */
.er-section .er-section__head--classic .er-section__sub,
.er-section .er-section__head--compact .er-section__sub {
	color: rgba(255, 255, 255, .85);
}

/* ------------------------------------------------------- 2. Editorial */

.er-section .er-section__head--editorial {
	background: var(--er-surface);
	border: 1px solid var(--er-border);
	border-radius: var(--er-radius);
	color: var(--er-ink);
	padding: var(--er-space-5) var(--er-space-5) 0;
}

.er-section .er-section__head--editorial .er-section__marca {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-4);
	justify-content: space-between;
	padding-bottom: var(--er-space-4);
}

.er-section .er-section__head--editorial .er-section__logo {
	background: none;
	flex: none;
	margin: 0;
	max-height: 48px;
	padding: 0;
}

.er-section .er-section__head--editorial .er-section__titulo {
	text-align: right;
}

.er-section .er-section__head--editorial .er-section__title {
	color: var(--er-ink);
	/* `cqi` e nao `vw`: quem manda no tamanho e a largura do COMPONENTE. */
	font: 700 clamp(26px, 3.4cqi + 16px, 40px)/1.1 Georgia, serif;
	letter-spacing: -.02em;
	margin: 0;
}

.er-section .er-section__head--editorial .er-section__sub {
	color: var(--er-ink-muted);
	margin-top: var(--er-space-1);
}

.er-section .er-section__head--editorial .er-modulenav {
	border-top: 1px solid var(--er-border);
	gap: var(--er-space-5);
	margin: 0;
}

.er-section .er-section__head--editorial .er-modulenav__item {
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--er-ink-soft);
	font-weight: 700;
	padding: var(--er-space-3) 0;
	position: relative;
}

.er-section .er-section__head--editorial .er-modulenav__item.is-current {
	background: transparent;
	color: var(--er-brand-dark);
}

/* O item ativo nao pode depender SO de cor. */
.er-section .er-section__head--editorial .er-modulenav__item.is-current::after {
	background: var(--er-brand);
	bottom: -1px;
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	right: 0;
}

/* ------------------------------------------------- 3. Faixa compacta */

.er-section .er-section__head--compact {
	align-items: center;
	background: var(--er-brand);
	border-radius: var(--er-radius);
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	gap: var(--er-space-4);
	justify-content: space-between;
	margin: 0 0 24px;
	padding: var(--er-space-4) var(--er-space-5);
}

.er-section .er-section__head--compact .er-section__marca {
	align-items: center;
	display: flex;
	flex: 1 1 12ch;
	gap: var(--er-space-4);
	min-width: 0;
}

.er-section .er-section__head--compact .er-section__logo {
	flex: none;
	margin: 0;
	max-height: 40px;
	padding: var(--er-space-1) var(--er-space-2);
}

.er-section .er-section__head--compact .er-section__titulo {
	flex: 1 1 auto;
	text-align: center;
}

.er-section .er-section__head--compact .er-section__title {
	color: #fff;
	font: 700 clamp(20px, 2.4cqi + 12px, 28px)/1.15 Georgia, serif;
	letter-spacing: -.02em;
	margin: 0;
}

.er-section .er-section__head--compact .er-modulenav {
	flex: none;
	margin: 0;
}

.er-section .er-section__head--compact .er-modulenav__item {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .45);
	padding: var(--er-space-2) var(--er-space-3);
}

/* O item ATUAL precisa reaparecer aqui.
 *
 * `.er-section .er-section__head--compact .er-modulenav__item` (0-3-0) empata
 * com `.er-section .er-modulenav__item.is-current` (0-3-0) e vence pela ordem:
 * sem esta regra, o item atual ficava com o fundo translucido e o texto
 * `--er-brand-dark` sobre azul — contraste de 1,39:1. Mesmo empate de UX-01. */
.er-section .er-section__head--compact .er-modulenav__item.is-current {
	background: #fff;
	border-color: #fff;
	color: var(--er-brand-dark);
}

/* Estreito: identidade em cima, navegacao embaixo. Sem altura fixa, sem
   truncar texto, sem rolagem horizontal. */
@container er-section (max-width: 559px) {
	.er-section .er-section__head--editorial {
		padding: var(--er-space-4) var(--er-space-4) 0;
	}
	.er-section .er-section__head--editorial .er-section__marca {
		gap: var(--er-space-2);
	}
	.er-section .er-section__head--editorial .er-section__titulo {
		text-align: left;
	}
	.er-section .er-section__head--editorial .er-modulenav {
		gap: var(--er-space-4);
	}

	.er-section .er-section__head--compact {
		justify-content: flex-start;
		padding: var(--er-space-3) var(--er-space-4);
	}
	/* Logo em cima, titulo embaixo: lado a lado, o titulo herdava cerca de
	   180px num cartao de 390 e quebrava no MEIO de uma palavra. */
	.er-section .er-section__head--compact .er-section__marca {
		flex-basis: 100%;
		flex-wrap: wrap;
		gap: var(--er-space-2);
	}
	.er-section .er-section__head--compact .er-section__titulo {
		flex-basis: 100%;
		text-align: left;
	}
	.er-section .er-section__head--compact .er-modulenav {
		flex-basis: 100%;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 699px) {
		.er-section .er-section__head--editorial {
			padding: var(--er-space-4) var(--er-space-4) 0;
		}
		.er-section .er-section__head--editorial .er-section__titulo {
			text-align: left;
		}
		.er-section .er-section__head--compact {
			justify-content: flex-start;
			padding: var(--er-space-3) var(--er-space-4);
		}
		.er-section .er-section__head--compact .er-section__marca,
		.er-section .er-section__head--compact .er-modulenav {
			flex-basis: 100%;
		}
		.er-section .er-section__head--compact .er-section__marca {
			flex-wrap: wrap;
			gap: var(--er-space-2);
		}
		.er-section .er-section__head--compact .er-section__titulo {
			flex-basis: 100%;
			text-align: left;
		}
	}
}

/* Hospedeiro da fixacao no componente.
 *
 * Existe quando o ancestral do tema nao pode ser alterado sem remover
 * comportamento — ver `fixarNoComponente()` em `public.js`. Ele reproduz a
 * caixa original e devolve ao `sticky` do CSS uma referencia que rola.
 *
 * A area transparente nao intercepta clique; o elemento de dentro, sim. */
.er-fixahost {
	/* Leva `er-section` junto, para que as regras escritas como
	 * `.er-section ...` e a heranca declarada ali continuem valendo. O que e
	 * CAIXA da secao — fundo, padding, raio, largura — nao vem junto. */
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0;
	max-width: none;
	padding: 0;
	pointer-events: none;
	position: absolute;

	/* E NAO pode ser conteiner de consulta: as condicoes de largura valem na
	 * secao original, que e mais larga que a coluna. Sem conteiner, as
	 * consultas nao casam — que e justamente o estado correto nos dois casos em
	 * que o hospedeiro existe: o resumo so gruda no largo, a barra so existe no
	 * estreito. Quem decide de fato e a leitura feita no lugar original. */
	container-name: none;
	container-type: normal;
}

.er-fixahost > * {
	pointer-events: auto;
}

/* O espaco reservado nao pinta nada: ele so guarda o lugar de onde o elemento
 * saiu, com a altura que a caixa tinha. */
.er-fixaspace {
	box-sizing: border-box;
	visibility: hidden;
}

/* Wrappers exclusivos do plugin: centraliza o criativo sem alterar seu HTML. */
.er-adslot{min-width:0;max-width:100%;box-sizing:border-box}
.er-ad{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;box-sizing:border-box;margin-left:auto;margin-right:auto;text-align:center}
.er-ad :is(div,ins,a){min-width:0;max-width:100%;box-sizing:border-box}
.er-ad ins[data-revive-zoneid]{display:block;margin-left:auto;margin-right:auto;text-decoration:none}
.er-ad a{display:block}
.er-ad :is(img,iframe){display:block;max-width:100%;margin-left:auto;margin-right:auto}
.er-ad img{height:auto}