/**
 * Unbox Front — site de exemplo (light only).
 *
 * Vocabulário único de tokens: --ubf-*. Os tokens de cor são repintados
 * dinamicamente pelo FrontAssets::dynamic_css() a partir das cores de marca do
 * Unbox Painel (contrato C1) — os valores aqui são os defaults Unbox (DS v2.3).
 */

:root {
	/* Cores de marca (repintadas pelo Painel). */
	--ubf-primary: #f97316;
	--ubf-primary-dark: #ea650b;
	--ubf-primary-soft: rgba(249, 115, 22, .12);
	--ubf-secondary: #111318;
	--ubf-bg: #ffffff;
	--ubf-text: #111318;

	/* Superfícies e bordas (DS v2.3, light). */
	--ubf-bg-page: #f7f8fb;
	--ubf-surface: #ffffff;
	--ubf-surface-2: #f1f3f7;
	--ubf-border: #e0e5ee;
	--ubf-border-2: #cfd7e6;

	/* Amarelo do rodapé — também pinta o canvas (ver `html`, overscroll iOS). */
	--ubf-footer-bg: #f6bb3f;

	/* Texto. */
	--ubf-t2: #3f4654;
	--ubf-muted: #778092;
	--ubf-t4: #a0a8b7;

	/* Tipografia. */
	--ubf-font-display: 'Sora', system-ui, -apple-system, sans-serif;
	--ubf-font-text: 'Inter', system-ui, -apple-system, sans-serif;

	/* Geometria. */
	--ubf-radius-card: 12px;
	--ubf-radius-control: 8px;
	--ubf-shadow-card: 0 10px 28px rgba(15, 23, 42, .07);
	--ubf-container: 1240px;
	--ubf-gutter: clamp(22px, 2.4vw, 40px); /* padding lateral (não colar na borda no mobile) */

	/* Duração das animações de entrada (reveal) — central, para afinar num lugar. */
	--ubf-reveal-dur: 1.15s;
}

/* ----- Reset / base ---------------------------------------------------- */

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

* {
	scrollbar-width: thin;
	scrollbar-color: var(--ubf-primary) transparent;
}

*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

*::-webkit-scrollbar-track {
	background: transparent;
}

*::-webkit-scrollbar-thumb {
	background: var(--ubf-primary);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--ubf-primary-dark);
	background-clip: content-box;
}

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

/* Rolagem por âncora (#seções tageadas): para 60px abaixo do topo (offset do
   menu fixo) e de forma suave, não "seca". Vale para QUALQUER âncora. */
html {
	scroll-padding-top: 60px;
	/* Bloqueia o "overscroll bounce" (área branca ao arrastar além do fim).
	   Funciona no Chrome/Android; também desativa pull-to-refresh. */
	overscroll-behavior-y: none;
	/*
	 * O Safari do iOS ignora o overscroll-behavior no documento — o "bounce"
	 * acontece de qualquer jeito. Pintar a tela (canvas) com o amarelo do
	 * rodapé faz a faixa revelada parecer continuação dele, em vez de um vão
	 * branco. Só aparece nessa área: o body é opaco e cobre a página inteira.
	 */
	background: var(--ubf-footer-bg);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body.ubf-body {
	margin: 0;
	/* Garante que o body cubra a tela mesmo em página curta — senão o amarelo
	   do canvas (ver `html`) apareceria abaixo do conteúdo. */
	min-height: 100vh;
	background: var(--ubf-bg-page);
	color: var(--ubf-text);
	font-family: var(--ubf-font-text);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: clip;
	overscroll-behavior-y: none; /* sem "bounce"/área branca ao arrastar além do fim */
	-webkit-font-smoothing: antialiased;
	/* Ajuste global: texto de corpo que quebra linha fica justificado.
	   Herdado — containers centralizados passam center aos filhos e vencem. */
	text-align: justify;
}

/* Títulos, botões e navegação NÃO justificam. Reset de especificidade zero
   (:where) — vence a herança do justify, mas perde p/ regras de componente
   que centralizam (essas continuam centralizadas). */
:where(
	.ubf-body h1, .ubf-body h2, .ubf-body h3, .ubf-body h4, .ubf-body h5, .ubf-body h6,
	.ubf-body button, .ubf-body .ubf-btn, .ubf-body nav, .ubf-body label, .ubf-body th
) {
	text-align: start;
}

.ubf-body h1,
.ubf-body h2,
.ubf-body h3,
.ubf-body h4,
.ubf-body h5,
.ubf-body h6,
.ubf-body button,
.ubf-body nav {
	font-family: var(--ubf-font-display);
}

.ubf-body img {
	max-width: 100%;
	height: auto;
}

.ubf-body a {
	color: inherit;
	text-decoration: none;
}

.ubf-body a:focus-visible,
.ubf-body button:focus-visible,
.ubf-body input:focus-visible,
.ubf-body textarea:focus-visible {
	outline: 2px solid var(--ubf-primary);
	outline-offset: 2px;
}

/* Skip link (a11y). */
.ubf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--ubf-secondary);
	color: #fff;
	padding: 10px 18px;
	border-radius: 0 0 var(--ubf-radius-control) 0;
	font-weight: 600;
	font-size: 14px;
}

.ubf-skip-link:focus {
	left: 0;
}

/* ----- Layout ----------------------------------------------------------- */

.ubf-main {
	min-height: 60vh;
}

.ubf-container {
	max-width: var(--ubf-container);
	margin: 0 auto;
	padding-left: var(--ubf-gutter);
	padding-right: var(--ubf-gutter);
}

.ubf-container--narrow {
	max-width: 860px;
}

.ubf-grid {
	display: grid;
	gap: 26px;
}

.ubf-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.ubf-grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

.ubf-list {
	display: flex;
	flex-direction: column;
}

.ubf-eyebrow {
	display: inline-block;
	font-family: var(--ubf-font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ubf-primary);
	margin-bottom: 10px;
}

/* ----- Buttons ---------------------------------------------------------- */

.ubf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	font-family: var(--ubf-font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}

.ubf-btn--primary {
	background: var(--ubf-primary);
	color: #fff;
}

.ubf-btn--primary:hover {
	background: var(--ubf-primary-dark);
	color: #fff;
}

.ubf-btn--ghost {
	border-color: var(--ubf-border-2);
	color: var(--ubf-text);
	background: var(--ubf-surface);
}

.ubf-btn--ghost:hover {
	border-color: var(--ubf-primary);
	color: var(--ubf-primary);
}

.ubf-btn--inverse {
	background: #fff;
	color: var(--ubf-primary);
}

.ubf-btn--inverse:hover {
	opacity: .9;
}

.ubf-btn__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.ubf-btn__icon svg {
	width: 100%;
	height: 100%;
}

.ubf-btn[disabled] {
	opacity: .55;
	pointer-events: none;
}

/* ----- Fallback chrome (C5 — só sem o Unbox Menu) ------------------------ */

.ubf-fbheader {
	background: var(--ubf-surface);
	border-bottom: 1px solid var(--ubf-border);
	position: sticky;
	top: 0;
	z-index: 60;
}

.ubf-fbheader__inner {
	max-width: var(--ubf-container);
	margin: 0 auto;
	padding: 0 var(--ubf-gutter);
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.ubf-fbheader__brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.ubf-fbheader__logo {
	max-height: 40px;
	width: auto;
}

.ubf-fbheader__name {
	font-family: var(--ubf-font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -.01em;
}

.ubf-fbheader__nav {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ubf-fbheader__link {
	font-family: var(--ubf-font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--ubf-t2);
	padding: 9px 14px;
	border-radius: var(--ubf-radius-control);
	transition: color .18s ease, background .18s ease;
}

.ubf-fbheader__link:hover {
	color: var(--ubf-primary);
	background: var(--ubf-primary-soft);
}

.ubf-fbheader__link.is-current {
	color: var(--ubf-primary);
}

.ubf-fbheader__toggle {
	display: none;
	width: 42px;
	height: 42px;
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-control);
	background: var(--ubf-surface);
	color: var(--ubf-text);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ubf-fbheader__toggle svg {
	width: 20px;
	height: 20px;
}

.ubf-fbheader__toggle-open,
.ubf-fbheader__toggle-close {
	display: inline-flex;
	width: 20px;
	height: 20px;
}

.ubf-fbheader__toggle-close {
	display: none;
}

.ubf-fbheader__toggle[aria-expanded="true"] .ubf-fbheader__toggle-open {
	display: none;
}

.ubf-fbheader__toggle[aria-expanded="true"] .ubf-fbheader__toggle-close {
	display: inline-flex;
}

.ubf-fbheader__drawer {
	display: none;
	flex-direction: column;
	padding: 10px var(--ubf-gutter) 16px;
	border-top: 1px solid var(--ubf-border);
	background: var(--ubf-surface);
}

.ubf-fbheader__drawer:not([hidden]) {
	display: flex;
}

.ubf-fbheader__drawer-link {
	font-family: var(--ubf-font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--ubf-t2);
	padding: 12px 6px;
	border-bottom: 1px solid var(--ubf-border);
}

.ubf-fbheader__drawer-link:last-child {
	border-bottom: 0;
}

.ubf-fbheader__drawer-link.is-current {
	color: var(--ubf-primary);
}

.ubf-fbfooter {
	border-top: 1px solid var(--ubf-border);
	background: var(--ubf-surface);
	margin-top: 48px;
}

.ubf-fbfooter__inner {
	max-width: var(--ubf-container);
	margin: 0 auto;
	padding: 22px var(--ubf-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	font-size: 13px;
	color: var(--ubf-muted);
}

.ubf-fbfooter__name {
	font-family: var(--ubf-font-display);
	font-weight: 600;
	color: var(--ubf-t2);
}

/* ----- Hero -------------------------------------------------------------- */

.ubf-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 26px;
	padding: 28px 0 8px;
}

.ubf-hero--full {
	grid-template-columns: 1fr;
}

.ubf-hero__lead {
	position: relative;
	border-radius: var(--ubf-radius-card);
	overflow: hidden;
	background: var(--ubf-secondary);
	min-height: 380px;
	display: flex;
	align-items: flex-end;
}

.ubf-hero__media {
	position: absolute;
	inset: 0;
}

.ubf-hero__img,
.ubf-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ubf-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(17, 19, 24, 0) 30%, rgba(17, 19, 24, .82) 100%);
	pointer-events: none;
}

.ubf-hero__content {
	position: relative;
	z-index: 1;
	padding: clamp(18px, 3vw, 32px);
	color: #fff;
	max-width: 720px;
}

.ubf-hero__badge,
.ubf-hero__urgent {
	display: inline-block;
	font-family: var(--ubf-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--ubf-primary);
	color: #fff;
	margin-bottom: 14px;
}

.ubf-hero__urgent {
	background: #ef4444;
}

.ubf-hero__title {
	margin: 0;
	font-size: clamp(24px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.ubf-hero__title a {
	color: #fff;
}

.ubf-hero__excerpt {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .85);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ubf-hero__meta {
	margin-top: 14px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .75);
	display: flex;
	align-items: center;
	gap: 8px;
}

.ubf-hero__side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ubf-hero__side-card {
	display: flex;
	gap: 14px;
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-card);
	padding: 12px;
	flex: 1;
	transition: box-shadow .18s ease, border-color .18s ease;
}

.ubf-hero__side-card:hover {
	border-color: var(--ubf-border-2);
	box-shadow: var(--ubf-shadow-card);
}

.ubf-hero__side-media {
	flex: 0 0 108px;
	border-radius: var(--ubf-radius-control);
	overflow: hidden;
	background: var(--ubf-surface-2);
	aspect-ratio: 4 / 3;
}

.ubf-hero__side-img,
.ubf-hero__side-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ubf-hero__side-body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
}

.ubf-hero__side-title {
	margin: 0;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ubf-hero__side-title a:hover {
	color: var(--ubf-primary);
}

.ubf-hero__side-date {
	font-size: 12px;
	color: var(--ubf-muted);
	font-weight: 500;
}

/* ----- Section title ------------------------------------------------------ */

.ubf-section-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 22px;
}

.ubf-section-title__text {
	margin: 0;
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: -.015em;
	position: relative;
	padding-left: 16px;
}

.ubf-section-title__text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 5px;
	height: 78%;
	border-radius: 999px;
	background: var(--ubf-primary);
}

.ubf-section-title__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--ubf-font-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ubf-primary);
	flex: none;
}

.ubf-section-title__more:hover {
	color: var(--ubf-primary-dark);
}

.ubf-section-title__arrow {
	display: inline-flex;
	width: 15px;
	height: 15px;
}

.ubf-section-title__arrow svg {
	width: 100%;
	height: 100%;
}

/* ----- Content card -------------------------------------------------------- */

.ubf-card {
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.ubf-card:hover {
	border-color: var(--ubf-border-2);
	box-shadow: var(--ubf-shadow-card);
	transform: translateY(-2px);
}

.ubf-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--ubf-surface-2);
	overflow: hidden;
}

.ubf-card__img,
.ubf-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}

.ubf-card:hover .ubf-card__media img {
	transform: scale(1.03);
}

.ubf-card__body {
	padding: 16px 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	flex: 1;
}

.ubf-card__badge {
	align-self: flex-start;
	font-family: var(--ubf-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ubf-primary);
	background: var(--ubf-primary-soft);
	padding: 4px 10px;
	border-radius: 5px;
}

.ubf-card__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.32;
	letter-spacing: -.01em;
}

.ubf-card__title a:hover {
	color: var(--ubf-primary);
}

.ubf-card__excerpt {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ubf-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ubf-card__meta {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ubf-t4);
}

.ubf-card__author {
	color: var(--ubf-t2);
	font-weight: 600;
}

/* List variant: horizontal row. */
.ubf-card--list {
	flex-direction: row;
	align-items: stretch;
	border: 0;
	border-bottom: 1px solid var(--ubf-border);
	border-radius: 0;
	background: transparent;
	padding: 18px 0;
}

.ubf-card--list:hover {
	box-shadow: none;
	transform: none;
	border-color: var(--ubf-border);
}

.ubf-card--list .ubf-card__media {
	flex: 0 0 220px;
	aspect-ratio: 16 / 10;
	border-radius: var(--ubf-radius-control);
}

.ubf-card--list .ubf-card__body {
	padding: 2px 0 2px 20px;
}

.ubf-card--mini .ubf-card__title {
	font-size: 14.5px;
}

/* ----- Home sections ---------------------------------------------------- */

.ubf-home-latest {
	padding: 36px 0 8px;
}

.ubf-home-latest__more {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

.ubf-home-section {
	background: var(--ubf-surface);
	border-top: 1px solid var(--ubf-border);
	border-bottom: 1px solid var(--ubf-border);
	margin-top: 48px;
	padding: clamp(36px, 5vw, 64px) 0;
}

.ubf-home-section__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}

.ubf-home-section__title {
	margin: 0 0 14px;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.15;
}

.ubf-home-section__text {
	margin: 0 0 22px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ubf-muted);
}

.ubf-home-section__media {
	border-radius: var(--ubf-radius-card);
	overflow: hidden;
	background: var(--ubf-surface-2);
	border: 1px solid var(--ubf-border);
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ubf-home-section__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ----- CTA band ----------------------------------------------------------- */

.ubf-cta {
	margin: 48px 0 8px;
}

.ubf-cta__inner {
	background: linear-gradient(120deg, var(--ubf-primary), var(--ubf-primary-dark));
	border-radius: var(--ubf-radius-card);
	padding: clamp(28px, 4vw, 48px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	color: #fff;
}

.ubf-cta__title {
	margin: 0 0 8px;
	font-size: clamp(21px, 2.4vw, 30px);
	font-weight: 700;
	letter-spacing: -.015em;
}

.ubf-cta__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

/* ----- Breadcrumb / archive ------------------------------------------------ */

.ubf-breadcrumb {
	padding: 22px 0 0;
}

.ubf-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--ubf-muted);
}

.ubf-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.ubf-breadcrumb__item:not(:first-child)::before {
	content: "/";
	margin: 0 7px 0 3px;
	color: var(--ubf-t4);
}

.ubf-breadcrumb__link:hover {
	color: var(--ubf-primary);
}

.ubf-breadcrumb__current {
	color: var(--ubf-t2);
	font-weight: 600;
}

.ubf-archive-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 0 22px;
	border-bottom: 1px solid var(--ubf-border);
	margin-bottom: 22px;
}

.ubf-archive-head__title {
	margin: 0;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.ubf-archive-head__desc {
	margin: 8px 0 0;
	font-size: 15px;
	color: var(--ubf-muted);
	max-width: 640px;
}

.ubf-searchbar {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border-2);
	border-radius: 999px;
	padding: 11px 18px;
	width: 320px;
	max-width: 100%;
}

.ubf-searchbar:focus-within {
	border-color: var(--ubf-primary);
}

.ubf-searchbar__icon {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--ubf-muted);
	flex: none;
}

.ubf-searchbar__icon svg {
	width: 100%;
	height: 100%;
}

.ubf-searchbar__input {
	border: 0;
	background: none;
	outline: none;
	font-family: var(--ubf-font-text);
	font-size: 14px;
	color: var(--ubf-text);
	width: 100%;
}

.ubf-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}

.ubf-filters__pill {
	display: inline-flex;
	align-items: center;
	font-family: var(--ubf-font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--ubf-t2);
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border-2);
	border-radius: 999px;
	padding: 8px 16px;
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.ubf-filters__pill:hover {
	color: var(--ubf-primary);
	border-color: var(--ubf-primary);
}

.ubf-filters__pill.is-active {
	background: var(--ubf-primary);
	border-color: var(--ubf-primary);
	color: #fff;
}

.ubf-archive-count {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ubf-t4);
}

/* ----- Pagination ---------------------------------------------------------- */

.ubf-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 0 8px;
}

.ubf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--ubf-border-2);
	border-radius: var(--ubf-radius-control);
	background: var(--ubf-surface);
	font-family: var(--ubf-font-display);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ubf-t2);
	transition: color .18s ease, border-color .18s ease, background .18s ease;
}

.ubf-pagination .page-numbers:hover {
	border-color: var(--ubf-primary);
	color: var(--ubf-primary);
}

.ubf-pagination .page-numbers.current {
	background: var(--ubf-primary);
	border-color: var(--ubf-primary);
	color: #fff;
}

.ubf-pagination .page-numbers.dots {
	border: 0;
	background: transparent;
}

/* ----- Single ---------------------------------------------------------------- */

.ubf-single__head {
	padding: 20px 0 0;
}

.ubf-single__badge {
	display: inline-block;
	font-family: var(--ubf-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	background: var(--ubf-primary);
	color: #fff;
	padding: 6px 12px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.ubf-single__title {
	margin: 0;
	font-size: clamp(28px, 4.2vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.ubf-single__subtitle {
	margin: 16px 0 0;
	font-size: clamp(16px, 1.9vw, 19px);
	line-height: 1.55;
	color: var(--ubf-t2);
}

.ubf-single__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 22px 0 26px;
	padding: 14px 0;
	border-top: 1px solid var(--ubf-border);
	border-bottom: 1px solid var(--ubf-border);
}

.ubf-single__byline .ubf-authorbox {
	border: 0;
	padding: 0;
	background: transparent;
	flex: 1 1 320px;
}

.ubf-single__byline .ubf-authorbox__bio {
	display: none;
}

.ubf-single__pubinfo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ubf-muted);
	flex: none;
}

.ubf-single__figure {
	margin: 0 0 26px;
}

.ubf-single__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--ubf-radius-card);
	overflow: hidden;
	background: var(--ubf-surface-2);
}

.ubf-single__img,
.ubf-single__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ubf-single__credit {
	margin: 7px 2px 0;
	font-size: 12px;
	font-weight: 500;
	font-style: italic;
	color: var(--ubf-muted);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}

.ubf-single__credit-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	flex: none;
}

.ubf-single__credit-icon svg {
	width: 100%;
	height: 100%;
}

.ubf-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.ubf-single__tag {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ubf-t2);
	background: var(--ubf-surface-2);
	padding: 7px 14px;
	border-radius: 999px;
}

.ubf-single__tag:hover {
	color: var(--ubf-primary);
}

.ubf-single__related {
	margin-top: 52px;
	padding-top: 36px;
	border-top: 1px solid var(--ubf-border);
}

.ubf-single__dot,
.ubf-card__dot,
.ubf-hero__dot {
	color: var(--ubf-t4);
}

/* Corpo do conteúdo (editor nativo). */
.ubf-prose {
	font-size: 17px;
	line-height: 1.75;
	color: var(--ubf-text);
	overflow-wrap: break-word;
}

.ubf-prose > * + * {
	margin-top: 1.1em;
}

.ubf-prose h2,
.ubf-prose h3,
.ubf-prose h4 {
	margin: 1.6em 0 .6em;
	letter-spacing: -.015em;
	line-height: 1.25;
}

.ubf-prose a {
	color: var(--ubf-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ubf-prose img {
	border-radius: var(--ubf-radius-control);
}

.ubf-prose blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--ubf-primary);
	color: var(--ubf-t2);
	font-style: italic;
}

.ubf-prose iframe,
.ubf-prose video {
	max-width: 100%;
}

.ubf-prose figure {
	margin: 1.4em 0;
}

.ubf-prose figcaption {
	font-size: 13px;
	color: var(--ubf-muted);
	margin-top: 6px;
}

/* ----- Page ------------------------------------------------------------------ */

.ubf-page__head {
	padding: 20px 0 22px;
}

.ubf-page__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 800;
	letter-spacing: -.02em;
}

.ubf-page__figure {
	margin: 0 0 26px;
	border-radius: var(--ubf-radius-card);
	overflow: hidden;
}

.ubf-page__img {
	width: 100%;
	display: block;
}

/* ----- Author ------------------------------------------------------------------ */

.ubf-author-head {
	padding: 20px 0 26px;
}

.ubf-authorbox {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-card);
	padding: 18px 20px;
}

.ubf-authorbox__avatar {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.ubf-authorbox__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ubf-authorbox__initials {
	font-family: var(--ubf-font-display);
	font-weight: 700;
	font-size: 18px;
}

.ubf-authorbox__body {
	min-width: 0;
	flex: 1;
}

.ubf-authorbox__name {
	font-family: var(--ubf-font-display);
	font-weight: 700;
	font-size: 15.5px;
}

.ubf-authorbox__name:hover {
	color: var(--ubf-primary);
}

.ubf-authorbox__bio {
	margin: 5px 0 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ubf-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ubf-authorbox__socials {
	display: flex;
	gap: 8px;
	flex: none;
}

.ubf-authorbox__social {
	width: 36px;
	height: 36px;
	border-radius: var(--ubf-radius-control);
	background: var(--ubf-surface-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ubf-t2);
	transition: background .18s ease, color .18s ease;
}

.ubf-authorbox__social:hover {
	background: var(--ubf-primary);
	color: #fff;
}

.ubf-authorbox__social svg {
	width: 16px;
	height: 16px;
}

/* ----- Share ------------------------------------------------------------------- */

.ubf-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	padding: 20px 0;
	border-top: 1px solid var(--ubf-border);
	border-bottom: 1px solid var(--ubf-border);
}

.ubf-share__label {
	font-family: var(--ubf-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ubf-muted);
}

.ubf-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.ubf-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	min-width: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--ubf-radius-control);
	background: var(--ubf-secondary);
	color: #fff;
	font-family: var(--ubf-font-display);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background .18s ease;
}

.ubf-share__btn:hover {
	background: var(--ubf-primary);
	color: #fff;
}

.ubf-share__btn svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* ----- Modal (share + genérico) --------------------------------------------------- */

.ubf-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

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

.ubf-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 19, 24, .55);
}

.ubf-modal__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	background: var(--ubf-surface);
	border-radius: var(--ubf-radius-card);
	box-shadow: var(--ubf-shadow-card);
	padding: 22px;
}

.ubf-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}

.ubf-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.ubf-modal__x {
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: var(--ubf-radius-control);
	background: var(--ubf-surface-2);
	color: var(--ubf-t2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.ubf-modal__x:hover {
	color: var(--ubf-primary);
}

.ubf-modal__x svg {
	width: 15px;
	height: 15px;
}

.ubf-modal__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 18px;
}

.ubf-modal__net {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 12px 4px;
	border-radius: var(--ubf-radius-control);
	transition: background .18s ease;
}

.ubf-modal__net:hover {
	background: var(--ubf-surface-2);
}

.ubf-modal__ico {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--ubf-primary-soft);
	color: var(--ubf-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ubf-modal__ico svg {
	width: 20px;
	height: 20px;
}

.ubf-modal__net-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ubf-t2);
}

.ubf-modal__copy {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ubf-surface-2);
	border-radius: var(--ubf-radius-control);
	padding: 8px 8px 8px 14px;
}

.ubf-modal__url {
	flex: 1;
	min-width: 0;
	font-size: 12.5px;
	color: var(--ubf-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ubf-modal__copy-btn {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 0;
	border-radius: 6px;
	background: var(--ubf-primary);
	color: #fff;
	font-family: var(--ubf-font-display);
	font-size: 12.5px;
	font-weight: 600;
	padding: 9px 14px;
	cursor: pointer;
}

.ubf-modal__copy-btn:hover {
	background: var(--ubf-primary-dark);
}

.ubf-modal__copy-btn svg {
	width: 14px;
	height: 14px;
}

/* ----- Empty state ----------------------------------------------------------------- */

.ubf-empty {
	text-align: center;
	background: var(--ubf-surface);
	border: 1px dashed var(--ubf-border-2);
	border-radius: var(--ubf-radius-card);
	padding: 48px 24px;
}

.ubf-empty__icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	color: var(--ubf-t4);
	margin-bottom: 12px;
}

.ubf-empty__icon svg {
	width: 100%;
	height: 100%;
}

.ubf-empty__title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
}

.ubf-empty__text {
	margin: 0;
	font-size: 14px;
	color: var(--ubf-muted);
}

/* ----- Contact form ------------------------------------------------------------------ */

.ubf-contact {
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-card);
	padding: clamp(22px, 3vw, 32px);
	max-width: 720px;
}

.ubf-contact__title {
	margin: 0 0 6px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.ubf-contact__text {
	margin: 0 0 20px;
	font-size: 14px;
	color: var(--ubf-muted);
}

.ubf-contact__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.ubf-contact__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 16px;
}

.ubf-contact__label {
	font-family: var(--ubf-font-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ubf-t2);
}

.ubf-contact__input {
	width: 100%;
	background: #fff;
	border: 1px solid #d4dbe8;
	border-radius: var(--ubf-radius-control);
	padding: 11px 14px;
	font-family: var(--ubf-font-text);
	font-size: 14px;
	color: var(--ubf-text);
	transition: border-color .18s ease;
}

.ubf-contact__input:focus {
	outline: none;
	border-color: var(--ubf-primary);
}

.ubf-contact__textarea {
	resize: vertical;
	min-height: 120px;
}

.ubf-contact__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}

.ubf-contact__feedback {
	font-size: 13.5px;
	font-weight: 600;
}

.ubf-contact__feedback.is-ok {
	color: #22c55e;
}

.ubf-contact__feedback.is-error {
	color: #ef4444;
}

/* ----- 404 ----------------------------------------------------------------------------- */

.ubf-404 {
	text-align: center;
	padding: clamp(48px, 8vw, 96px) 0 40px;
}

.ubf-404__code {
	display: block;
	font-family: var(--ubf-font-display);
	font-size: clamp(64px, 12vw, 120px);
	font-weight: 800;
	line-height: 1;
	color: var(--ubf-primary);
	letter-spacing: -.04em;
	margin-bottom: 10px;
}

.ubf-404__title {
	margin: 0 0 10px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	letter-spacing: -.015em;
}

.ubf-404__text {
	margin: 0 0 26px;
	font-size: 15px;
	color: var(--ubf-muted);
}

.ubf-404__latest {
	padding: 26px 0 8px;
	border-top: 1px solid var(--ubf-border);
}

/* ----- /exemplos/ ------------------------------------------------------------------------ */

.ubf-demo {
	padding: 30px 0 8px;
}

.ubf-demo__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.ubf-demo__list {
	margin-top: 22px;
	border-top: 1px solid var(--ubf-border);
}

.ubf-demo__results {
	min-height: 40px;
}

/* ===== Home banner (full-bleed até 1920px) ============================= */
/*
 * A imagem destacada de cada "banner" já vem cortada em 1920×700 pelo Painel.
 * A faixa ocupa 100% da largura até o teto de 1920px e é centralizada. Com mais
 * de um banner, as setas e os dots (na cor primária) ficam sobre a base.
 *
 * A faixa é 60px mais alta que a proporção da arte (--ubf-banner-extra). Isso
 * dá área para o `object-fit: cover` recortar — sem sobra, o ponto de foco
 * cadastrado no Painel não teria como deslocar nada.
 *
 * --ubf-header-h vem do JS e só é > 0 quando o header do Unbox Menu está no
 * modo "transparente sobre o hero", em que ele fica por cima do conteúdo sem
 * reservar espaço. Assim o topo da arte começa exatamente abaixo do header.
 */
.ubf-banner {
	--ubf-banner-extra: 60px;

	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	margin-top: var(--ubf-header-h, 0px);
	margin-inline: auto;
	background: var(--ubf-secondary);
}

.ubf-banner__viewport {
	position: relative;
	height: calc(700px + var(--ubf-banner-extra));
	overflow: hidden;
}

.ubf-banner__track {
	display: flex;
	height: 100%;
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.ubf-banner__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}

.ubf-banner__pic {
	display: block;
	width: 100%;
	height: 100%;
}

/* Seletor com 2 classes p/ vencer o `.ubf-body img { height: auto }` da base —
   sem isto a imagem fica na altura natural e sobra faixa vazia no viewport. */
.ubf-banner .ubf-banner__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Foco do Painel, publicado pelo slide em --ubf-banner-focus. */
	object-position: var(--ubf-banner-focus, center);
}

/* Controles (setas + dots) sobre a base do banner. */
.ubf-banner__controls {
	position: absolute;
	left: 50%;
	bottom: clamp(16px, 3vh, 34px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 16px;
	transform: translateX(-50%);
}

.ubf-banner__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: #fff;
	background: var(--ubf-primary);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.ubf-banner__arrow:hover {
	background: var(--ubf-primary-dark);
	transform: translateY(-1px);
}

.ubf-banner__arrow:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.ubf-banner__arrow svg {
	width: 22px;
	height: 22px;
}

.ubf-banner__dots {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.ubf-banner__dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ubf-primary);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .65);
	opacity: .45;
	cursor: pointer;
	transition: opacity .2s ease, transform .2s ease;
}

.ubf-banner__dot:hover {
	opacity: .8;
}

.ubf-banner__dot.is-active {
	opacity: 1;
	transform: scale(1.2);
}

/* Tablet/desktop estreito: acompanha a proporção da arte (1920×700) + a folga. */
@media (max-width: 1240px) {
	.ubf-banner__viewport {
		height: calc(100vw * 700 / 1920 + var(--ubf-banner-extra));
	}
}

/* Mobile: usa o "Banner vertical" (430×700) → viewport em retrato, também com a
   folga. (Vem depois do bloco de 1240, vence.) */
@media (max-width: 640px) {
	.ubf-banner__viewport {
		height: calc(100vw * 700 / 430 + var(--ubf-banner-extra));
	}

	/* No mobile quem aparece é o banner vertical: usa o foco dele, caindo no
	   foco do horizontal quando o vertical não tiver um definido. */
	.ubf-banner .ubf-banner__img {
		object-position: var(--ubf-banner-focus-v, var(--ubf-banner-focus, center));
	}

	.ubf-banner__arrow {
		width: 40px;
		height: 40px;
	}

	.ubf-banner__arrow svg {
		width: 18px;
		height: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-banner__track,
	.ubf-banner__arrow,
	.ubf-banner__dot {
		transition: none;
	}
}

/* ===== Home: Principais pautas ======================================== */
/*
 * Grade de cards vinda dos conteúdos do tipo Pauta (imagem + título curto).
 * Cada card é um BOTÃO: caixa branca de cantos arredondados, borda cinza um
 * tom acima do fundo da página, que sobe e ganha sombra ao passar o mouse — e
 * o rótulo vira amarelo. Card inteiro clicável, abre o single da pauta.
 *
 * Colunas: até 4 itens → 2 colunas (2×2); 5+ → 3 colunas (máximo). Passando de
 * 3 por linha, o grid acrescenta novas linhas automaticamente.
 */
.ubf-pautas {
	--ubf-pautas-title-color: #035695; /* título (Figma) */
	--ubf-pautas-label-color: #035695; /* rótulos (Figma) */
	--ubf-pautas-accent: #f2bd3f;      /* amarelo do hover */

	/* Medidas do design (desktop); escaladas no mobile mais abaixo. */
	--ubf-pauta-icon: 61px;     /* tamanho do ícone */
	--ubf-pauta-gap: 22px;      /* imagem ↔ rótulo, dentro do card */
	--ubf-pautas-col-gap: 24px; /* card ↔ card (horizontal) */
	--ubf-pautas-row-gap: 24px; /* card ↔ card (vertical) */

	padding: clamp(36px, 6vw, 76px) 0;
}

.ubf-pautas__title {
	margin: 0 0 clamp(24px, 3vw, 44px);
	text-align: center;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.4vw, 1.875rem); /* ~30px */
	line-height: 1.25;
	letter-spacing: 0;
	color: var(--ubf-pautas-title-color);
}

/* Trecho em negrito do título ("defesa do trabalhador"), que também é link:
   fica amarelo quando o mouse passa pelo título — peso fixo, porque o `bolder`
   padrão sobre 400 varia entre navegadores. */
.ubf-pautas__em {
	font-weight: 700;
	text-decoration: none;
	transition: color 0.22s ease;
}

/* Basta o mouse estar no título, não só sobre as palavras — alvo mais fácil. */
.ubf-pautas__title:hover .ubf-pautas__em,
.ubf-pautas a.ubf-pautas__em:hover,
.ubf-pautas a.ubf-pautas__em:focus-visible {
	color: var(--ubf-pautas-accent);
}

/* Grade centralizada, colunas de mesma largura para os botões alinharem. */
.ubf-pautas__grid {
	display: grid;
	margin-inline: auto;
	column-gap: var(--ubf-pautas-col-gap);
	row-gap: var(--ubf-pautas-row-gap);
}

.ubf-pautas__grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}

.ubf-pautas__grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 1100px;
}

/* A célula existe só para a animação de entrada: assim o transform do reveal
   não disputa com o transform do hover, que é do card. */
.ubf-pautas__cell {
	display: flex;
}

.ubf-pauta {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: var(--ubf-pauta-gap);
	padding: clamp(16px, 2vw, 26px) clamp(16px, 2.2vw, 30px);
	background: var(--ubf-surface);
	border: 1px solid var(--ubf-border);
	border-radius: var(--ubf-radius-card);
	/* Lista explícita: transicionar `all` faria a cor do rótulo e o layout
	   entrarem na conta sem necessidade. */
	transition: transform 0.22s cubic-bezier(.22, .61, .36, 1),
		box-shadow 0.22s ease,
		border-color 0.22s ease;
}

a.ubf-pauta--link {
	color: inherit;
	text-decoration: none;
}

/* Movimento de botão: sobe e ganha sombra; o rótulo vira amarelo. */
.ubf-pautas a.ubf-pauta--link:hover,
.ubf-pautas a.ubf-pauta--link:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--ubf-shadow-card);
	border-color: var(--ubf-border-2);
}

.ubf-pautas a.ubf-pauta--link:hover .ubf-pauta__title,
.ubf-pautas a.ubf-pauta--link:focus-visible .ubf-pauta__title {
	color: var(--ubf-pautas-accent);
}

/* Ao pressionar, volta quase ao lugar — dá o retorno tátil do clique. */
.ubf-pautas a.ubf-pauta--link:active {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

.ubf-pauta__media {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--ubf-pauta-icon);
	height: var(--ubf-pauta-icon);
}

.ubf-pauta__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Troca de ícone no hover — só nos cards cuja pauta tem "Imagem hover"
   preenchida. As duas imagens ficam sobrepostas e a transição é de opacidade,
   evitando o "pisca" que um troca-src faria. */
.ubf-pauta__media--swap {
	position: relative;
}

.ubf-pauta__media--swap .ubf-pauta__img {
	transition: opacity 0.22s ease;
}

.ubf-pauta__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.ubf-pautas a.ubf-pauta--link:hover .ubf-pauta__media--swap .ubf-pauta__img,
.ubf-pautas a.ubf-pauta--link:focus-visible .ubf-pauta__media--swap .ubf-pauta__img {
	opacity: 0;
}

/* Depois da regra acima e com a mesma especificidade — a de cima apagaria a
   imagem de hover junto, já que ela também é `.ubf-pauta__img`. */
.ubf-pautas a.ubf-pauta--link:hover .ubf-pauta__media--swap .ubf-pauta__img--hover,
.ubf-pautas a.ubf-pauta--link:focus-visible .ubf-pauta__media--swap .ubf-pauta__img--hover {
	opacity: 1;
}

.ubf-pauta__title {
	margin: 0;
	min-width: 0;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	/* Teto de ~22px: em 30px o rótulo mais longo ("Qualidade de vida") não
	   cabia na coluna e quebrava em duas linhas. */
	font-size: clamp(1rem, 1.4vw, 1.375rem);
	line-height: 1.2;
	color: var(--ubf-pautas-label-color);
	transition: color 0.22s ease;
}

/* O rótulo já é 700; fixa o valor para o `<strong>` do campo não virar 900. */
.ubf-pauta__title strong,
.ubf-pauta__title b {
	font-weight: 700;
	color: inherit;
}

/* Entrada em cascata: cada botão surge de baixo, com um leve crescimento. Só é
   ativada quando o JS marca .ubf-reveal-ready — sem JS os cards já aparecem.
   O atraso por item é dado inline pelo JS. */
.ubf-pautas.ubf-reveal-ready .ubf-pautas__cell {
	opacity: 0;
	transform: translateY(24px) scale(.96);
	transition: opacity var(--ubf-reveal-dur) ease,
		transform var(--ubf-reveal-dur) cubic-bezier(.22, .61, .36, 1);
}

.ubf-pautas.ubf-reveal-ready.is-visible .ubf-pautas__cell {
	opacity: 1;
	transform: none;
}

/* Tablet: 3 colunas recolhem para 2. */
@media (max-width: 900px) {
	.ubf-pautas__grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		max-width: 760px;
	}
}

/* Mobile: uma coluna só — dois botões lado a lado apertariam o rótulo. */
@media (max-width: 560px) {
	.ubf-pautas {
		--ubf-pauta-icon: 44px;
		--ubf-pauta-gap: 14px;
		--ubf-pautas-row-gap: 12px;
	}

	.ubf-pautas__grid--2,
	.ubf-pautas__grid--3 {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}

	.ubf-pauta {
		padding: 14px 16px;
	}

	.ubf-pauta__title {
		font-size: 16px;
		line-height: 1.15;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-pautas.ubf-reveal-ready .ubf-pautas__cell {
		opacity: 1;
		transform: none;
		transition: none;
	}

	/* Sem movimento: o hover se resolve na sombra, na borda e na cor. */
	.ubf-pauta {
		transition: box-shadow 0.22s ease, border-color 0.22s ease;
	}

	.ubf-pautas a.ubf-pauta--link:hover,
	.ubf-pautas a.ubf-pauta--link:focus-visible,
	.ubf-pautas a.ubf-pauta--link:active {
		transform: none;
	}
}

/* ===== Home: Apoie as nossas causas (montagem + formulário de cadastro) = */
/*
 * Seção azul, 414px de altura, com duas colunas contidas em 790px: à esquerda a
 * montagem (arte fechada + grafismo de listras), à direita o formulário de
 * cadastro. Envios vão para o Painel (Mensagens → Cadastro).
 */
.ubf-signup {
	overflow: hidden; /* trava o excedente da montagem ao encostar na base */
	background: #035695;
}

.ubf-signup__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 790px;
	max-width: 100%;
	height: 414px; /* altura exata do fundo azul */
	margin-inline: auto;
}

/* --- Montagem (esquerda) --- */
/* Duas peças empilhadas — arte fechada em cima, listras embaixo — em tamanho
   natural (não encolhe) e encostadas na BASE da seção. A altura vem do próprio
   conteúdo: como a arte é um PNG único, não há mais o frame de medida fixa com
   as peças posicionadas em porcentagem. */
.ubf-signup__art {
	display: flex;
	flex: 0 0 379.71px;
	flex-direction: column;
	align-items: center;
	gap: clamp(16px, 3vw, 30px);
	align-self: flex-end;
}

.ubf-signup__art img {
	display: block;
	width: 100%;
	height: auto;
}

/* Largura das listras no desenho original (94.02% do frame de 379.71px). */
.ubf-signup__art-graf {
	width: 94.02%;
}

/* --- Formulário (direita) --- */
.ubf-signup__form {
	position: relative;
	flex: 0 0 321.1px;
	transform: translateY(10px); /* desce o formulário ~10px (pedido) */
}

.ubf-signup__field {
	margin-bottom: 16px;
}

.ubf-signup__label {
	display: block;
	margin-bottom: 6px;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.3;
	color: #ffffff;
}

.ubf-signup__input {
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 0;
	border-radius: 3px;
	background: #ffffff;
	color: #14181f;
	font-family: var(--ubf-font-text);
	font-size: 16px;
	line-height: 1.2;
}

.ubf-signup__input:focus-visible {
	outline: 3px solid #f9c651;
	outline-offset: 2px;
}

/* Honeypot: escondido de gente, visível para bots. */
.ubf-signup__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.ubf-signup__btn {
	display: block;
	width: 100%;
	margin-top: 22px;
	padding: 12px 20px;
	border: 0;
	border-radius: 3px;
	background: #f9c651;
	color: #035695;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: 25px;
	line-height: 1.1;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.ubf-signup__btn:hover {
	background: #f2bd3f;
	transform: translateY(-1px);
}

.ubf-signup__btn:disabled {
	opacity: .7;
	cursor: default;
	transform: none;
}

.ubf-signup__feedback {
	margin: 12px 0 0;
	min-height: 1em;
	font-size: 15px;
	color: #ffffff;
}

.ubf-signup__feedback.is-error {
	color: #ffd7d7;
}

.ubf-signup__feedback.is-ok {
	color: #d9f7e2;
}

/* --- Sucesso: formulário embaçado (vidro) + painel verde por cima --------- */
.ubf-signup__form-body {
	transition: filter .25s ease;
}

.ubf-signup__form.is-sent .ubf-signup__form-body {
	filter: blur(5px);
	pointer-events: none;
	user-select: none;
}

.ubf-signup__success {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 16px;
	border-radius: 4px;
	text-align: center;
	background: transparent; /* sem cor: só o efeito de vidro (blur) atrás */
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	animation: ubf-signup-pop .22s ease-out both;
}

.ubf-signup__success[hidden] {
	display: none;
}

/* Caixa azul "apenas atrás da informação" (o resto do form fica embaçado). */
.ubf-signup__success-card {
	display: grid;
	justify-items: center;
	gap: 16px;
	padding: 22px 28px;
	border-radius: 8px;
	background: #035695;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

.ubf-signup__success-msg {
	margin: 0;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	line-height: 1.25;
	color: #ffffff;
}

.ubf-signup__success-ok {
	min-width: 96px;
	padding: 10px 30px;
	border: 0;
	border-radius: 3px;
	background: #ffffff;
	color: #035695;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.ubf-signup__success-ok:hover {
	background: #e6f0f7;
	transform: translateY(-1px);
}

.ubf-signup__success-ok:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@keyframes ubf-signup-pop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.ubf-signup__form-body { transition: none; }
	.ubf-signup__success { animation: none; }
}

/* --- Entrada: cada conjunto entra de um lado (fade lateral) --------------- */
/* Só com JS (.ubf-reveal-ready): montagem vem da esquerda, form da direita. Os
   estados finais mantêm o translateY de posição (16px / 10px). */
.ubf-signup__inner.ubf-reveal-ready .ubf-signup__art,
.ubf-signup__inner.ubf-reveal-ready .ubf-signup__form {
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-signup__inner.ubf-reveal-ready .ubf-signup__art {
	opacity: 0;
	transform: translateX(-56px);
}

.ubf-signup__inner.ubf-reveal-ready.is-visible .ubf-signup__art {
	opacity: 1;
	transform: none;
}

.ubf-signup__inner.ubf-reveal-ready .ubf-signup__form {
	opacity: 0;
	transform: translate(56px, 10px);
}

.ubf-signup__inner.ubf-reveal-ready.is-visible .ubf-signup__form {
	opacity: 1;
	transform: translateY(10px);
}

@media (prefers-reduced-motion: reduce) {
	.ubf-signup__inner.ubf-reveal-ready .ubf-signup__art,
	.ubf-signup__inner.ubf-reveal-ready .ubf-signup__form {
		transition: none;
	}
}

/* Tablet e mobile: empilha (montagem em cima, formulário embaixo), centralizado.
   Reseta o align-self (no modo coluna ele empurraria a montagem para o lado). */
@media (max-width: 820px) {
	.ubf-signup__inner {
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: auto;
		gap: clamp(24px, 5vw, 40px);
		padding: clamp(32px, 6vw, 48px) var(--ubf-gutter);
	}

	.ubf-signup__art {
		flex: 0 1 auto;
		align-self: center;
		transform: none;
		width: 100%;
		max-width: 379.71px;
		margin-inline: auto;
	}

	.ubf-signup__form {
		flex: 0 1 auto;
		align-self: center;
		transform: none;
		width: 100%;
		max-width: 379.71px;
		margin-inline: auto;
	}

	/* Reveal no empilhado: sem o translateY de posição; só o fade lateral. */
	.ubf-signup__inner.ubf-reveal-ready .ubf-signup__art {
		transform: translateX(-56px);
	}

	.ubf-signup__inner.ubf-reveal-ready.is-visible .ubf-signup__art {
		transform: none;
	}

	.ubf-signup__inner.ubf-reveal-ready .ubf-signup__form {
		transform: translateX(56px);
	}

	.ubf-signup__inner.ubf-reveal-ready.is-visible .ubf-signup__form {
		transform: none;
	}
}

/* Celular estreito: inputs/botão um pouco mais compactos. */
@media (max-width: 480px) {
	.ubf-signup__input {
		height: 46px;
	}

	.ubf-signup__btn {
		font-size: 21px;
		padding: 11px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-signup__btn {
		transition: none;
	}
}

/* ===== Home: Trajetória (linha do tempo / carrossel) ================== */
/*
 * Conteúdo em 1435px; as setas de navegação (vermelhas) ficam FORA dessa faixa.
 * Cards: foto (311×247), trilho tracejado com dot vermelho, ano (#035695) e
 * descrição. Fonte Archivo. Alimentado pelo tipo nativo (título = ano).
 */
.ubf-traj {
	--ubf-traj-gold: #e7b24a; /* linha tracejada */
	--ubf-traj-red: #e5372c;  /* setas + dots */
	overflow: hidden;
	padding: clamp(40px, 6vw, 76px) 0;
	background: #ffffff;
}

/* --- Cabeçalho (1435 centralizado) --- */
.ubf-traj__head {
	max-width: 1435px;
	margin: 0 auto clamp(22px, 3vw, 38px);
	padding: 0 var(--ubf-gutter);
}

.ubf-traj__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ubf-traj__eyebrow-txt {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: clamp(16px, 1.4vw, 18px);
	letter-spacing: .16em;
	color: #035695;
}

.ubf-traj__grafismo {
	display: block;
	width: auto;
	height: 18px;
}

.ubf-traj__brand {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ubf-traj__logo {
	display: block;
	width: auto;
	height: clamp(46px, 5vw, 58px);
}

/* --- Carrossel: setas fora da faixa de 1435 --- */
.ubf-traj__carousel {
	display: flex;
	align-items: center;
	gap: clamp(4px, 1.2vw, 18px);
	max-width: calc(1435px + 210px); /* 1435 + 2 setas + folgas */
	margin-inline: auto;
	padding: 0 clamp(6px, 1.4vw, 14px);
}

/* O próprio viewport é o flex scroller: os cards ocupam FRAÇÕES exatas da área
   visível, então nunca sobra um pedaço de card cortado. Snap obrigatório. */
.ubf-traj__viewport {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 1435px;
	margin-inline: auto;
	display: flex;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.ubf-traj__viewport::-webkit-scrollbar {
	display: none;
}

.ubf-traj__track {
	display: contents;
}

/* 4 por vez no desktop; frações menores (3/2/1) em telas menores — sempre um
   número inteiro de cards, sem corte. */
.ubf-traj__card {
	flex: 0 0 25%;
	scroll-snap-align: start;
	/* Impede o fling rápido de pular vários cards: para em cada snap (1 por vez). */
	scroll-snap-stop: always;
}

@media (max-width: 1200px) {
	.ubf-traj__card {
		flex-basis: 33.3333%;
	}
}

@media (max-width: 860px) {
	.ubf-traj__card {
		flex-basis: 50%;
	}
}

@media (max-width: 600px) {
	.ubf-traj__card {
		flex-basis: 100%;
	}

	/* Título um pouco mais à direita (aproxima do conteúdo dos cards). */
	.ubf-traj__head {
		padding-left: calc(var(--ubf-gutter) + clamp(24px, 9vw, 52px));
	}

	/* Setas de navegação bem maiores no mobile. Seletor mais específico
	   (.ubf-traj .ubf-traj__nav) para vencer a regra base, que vem depois. */
	.ubf-traj .ubf-traj__nav {
		width: 84px;
		height: 84px;
	}

	.ubf-traj .ubf-traj__nav svg {
		width: 100%;
		height: 100%;
	}

	.ubf-traj .ubf-traj__nav svg path {
		stroke-width: 3;
	}

	/* Sem folga lateral para o card aproveitar a largura. */
	.ubf-traj .ubf-traj__carousel {
		gap: 0;
		padding: 0;
	}
}

.ubf-traj__photo {
	padding: 0 14px;
}

.ubf-traj .ubf-traj__img {
	display: block;
	width: 100%;
	aspect-ratio: 311 / 247;
	object-fit: cover;
	border-radius: 2px;
}

/* Trilho tracejado (contínuo: cards encostam, sem gap) + dot vermelho. */
.ubf-traj__rail {
	position: relative;
	margin: clamp(16px, 2vw, 24px) 0 clamp(12px, 1.5vw, 18px);
	border-top: 2px dashed var(--ubf-traj-gold);
}

.ubf-traj__dot {
	position: absolute;
	top: 0;
	left: 22px;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #ffffff;
	border: 4px solid var(--ubf-traj-red);
	box-sizing: border-box;
}

.ubf-traj__body {
	padding: 0 14px;
}

.ubf-traj__year {
	margin-bottom: 8px;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.1;
	color: #035695;
}

.ubf-traj__desc {
	font-family: 'Archivo', var(--ubf-font-display);
	font-size: 20px;
	line-height: 1.4;
	color: #1c2733;
}

.ubf-traj__desc p {
	margin: 0 0 8px;
}

.ubf-traj__desc p:last-child {
	margin-bottom: 0;
}

.ubf-traj__desc strong {
	font-weight: 700;
}

/* --- Setas de navegação (vermelhas), fora da faixa de conteúdo --- */
.ubf-traj__nav {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(44px, 6vw, 84px);
	height: clamp(44px, 6vw, 84px);
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ubf-traj-red);
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}

.ubf-traj__nav svg {
	width: 56%;
	height: 56%;
}

.ubf-traj__nav:hover {
	transform: scale(1.08);
}

.ubf-traj__nav:disabled {
	opacity: .3;
	cursor: default;
	transform: none;
}

/* Entrada dos cards da Trajetória: fade + subida + leve zoom, lento e em
   cascata (o atraso por card é dado inline pelo JS de reveal). Só com JS
   (.ubf-reveal-ready); sem JS os cards já aparecem. */
.ubf-traj.ubf-reveal-ready .ubf-traj__card {
	opacity: 0;
	transform: translateY(30px) scale(.97);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) cubic-bezier(.22, .61, .36, 1);
}

.ubf-traj.ubf-reveal-ready.is-visible .ubf-traj__card {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ubf-traj.ubf-reveal-ready .ubf-traj__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Home: Números (3 seções) ====================================== */
/*
 * Seção 1 (azul) e 2 (amarela) usam imagem de fundo 1920×350 (altura 350px).
 * Seção 3 (branca) tem 3 colunas + texto vermelho e os chevrons à direita,
 * encostados no limite de 1920px da página. Fonte Archivo. Cores do Figma.
 */
.ubf-num {
	--ubf-num-blue: #035695;
	--ubf-num-red: #f92a2f;
	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	margin-inline: auto;
}

.ubf-num__inner {
	width: 100%;
	max-width: 1240px;
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
}

/* --- Seção 1: Mandatos e emendas (azul) --- */
.ubf-num--mandatos {
	display: flex;
	align-items: center;
	min-height: 350px;
	background-color: #035695;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
}

.ubf-num__eyebrow {
	margin: 0 0 clamp(14px, 2vw, 26px);
	text-align: center;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700;
	font-size: clamp(15px, 1.4vw, 24px);
	letter-spacing: .14em;
	color: #ffffff;
}

.ubf-num__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 3vw, 40px);
	text-align: center;
}

.ubf-num__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.ubf-num__big {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	font-size: clamp(46px, 8vw, 128px);
	line-height: 1;
	letter-spacing: -.03em;
}

.ubf-num__lbl {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	font-size: clamp(16px, 1.9vw, 32px);
	line-height: 1.1;
}

/* --- Seção 2: Valor investido (amarelo) --- */
.ubf-num--valor {
	display: flex;
	align-items: center;
	min-height: 350px;
	background-color: #f9c651;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--ubf-num-blue);
}

.ubf-num__inner--center {
	text-align: center;
}

.ubf-num__value {
	display: inline-flex;
	align-items: baseline;
	gap: .16em;
	margin: 0 0 clamp(6px, 1vw, 14px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	line-height: 1;
	color: var(--ubf-num-blue);
}

.ubf-num__rs {
	font-size: clamp(26px, 4.2vw, 80px);
}

.ubf-num__amount {
	font-size: clamp(58px, 10vw, 180px);
	letter-spacing: -.04em;
}

.ubf-num__milhoes {
	font-size: clamp(22px, 3.2vw, 56px);
	font-weight: 700;
}

.ubf-num__text {
	max-width: 760px;
	margin: 0 auto;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.6vw, 26px);
	line-height: 1.3;
	color: var(--ubf-num-blue);
}

.ubf-num__text p {
	margin: 0;
}

/* --- Seção 3: Colunas + texto (branco) --- */
.ubf-num--colunas {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 450px;
	overflow: hidden;
	background: #ffffff;
	color: var(--ubf-num-blue);
}

/* Padding lateral maior — afasta as colunas dos chevrons à direita. */
.ubf-num--colunas .ubf-num__inner {
	padding-inline: clamp(24px, 7vw, 110px);
}

.ubf-num__chevrons {
	position: absolute;
	top: 50%;
	right: max(0px, calc((100% - 1920px) / 2));
	width: clamp(70px, 8vw, 139px);
	height: auto;
	transform: translateY(-50%);
	pointer-events: none;
}

.ubf-num__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(12px, 4vw, 60px);
	text-align: center;
}

.ubf-num__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.ubf-num__col-top {
	margin-bottom: 2px;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 500;
	font-size: clamp(14px, 1.2vw, 20px);
	line-height: 1.2;
	color: var(--ubf-num-blue);
}

.ubf-num__col-num {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	font-size: clamp(42px, 8vw, 128px);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--ubf-num-blue);
}

.ubf-num__col-suf {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	font-size: clamp(17px, 3vw, 50px);
	line-height: 1.05;
	letter-spacing: -.03em;
	color: var(--ubf-num-blue);
}

.ubf-num__final {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 1.6vw, 22px);
	max-width: 780px;
	margin: clamp(22px, 3vw, 40px) auto 0;
}

/* Ícone (branco) sobre quadrado vermelho, à frente do texto. */
.ubf-num__final-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(56px, 6vw, 88px);
	height: clamp(56px, 6vw, 88px);
	border-radius: 4px;
	background: var(--ubf-num-red);
}

.ubf-num__final-icon img {
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.ubf-num__final-text {
	text-align: left;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.8vw, 30px);
	line-height: 1.3;
	color: var(--ubf-num-red);
}

.ubf-num__final-text p {
	margin: 0;
}

.ubf-num__final-text strong {
	font-weight: 700;
}

/* Entrada em cascata dos itens (fade + subida). Só com JS (.ubf-reveal-ready). */
.ubf-num.ubf-reveal-ready [data-ubf-reveal-item] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-num.ubf-reveal-ready.is-visible [data-ubf-reveal-item] {
	opacity: 1;
	transform: none;
}

/* Mobile: seções mais baixas, esconde os chevrons, menos gap. */
@media (max-width: 640px) {
	.ubf-num--mandatos,
	.ubf-num--valor {
		min-height: 240px;
	}

	.ubf-num--colunas {
		min-height: 340px;
	}

	.ubf-num__chevrons {
		display: none;
	}

	.ubf-num__stats,
	.ubf-num__cols {
		gap: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-num.ubf-reveal-ready [data-ubf-reveal-item] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Home: Áreas (sanfona, 4 seções) =============================== */
/*
 * Estrutura única; cada área muda cor/gráfico. Cabeçalho 140px (ícone + título
 * 40 + subtítulo 26). Painel expansível (grid-rows 1fr↔0fr) com itens (check +
 * texto 24) em 2 colunas. Fonte Archivo. Cores aproximadas do Figma (ajustáveis).
 */
.ubf-areas {
	--acc-dur: .45s; /* duração da expansão/contração */
}

.ubf-acc {
	--acc-title: #ffffff;
	--acc-sub: #ffffff;
	--acc-text: #ffffff;
	--acc-head-bg: transparent;
	--acc-panel-bg: transparent;
	position: relative;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: var(--acc-text);
}

/* Grafismo decorativo (seções 1 e 3). */
.ubf-acc__grafismo {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	width: auto;
}

/* --- Cabeçalho (botão) --- */
.ubf-acc__head {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 22px);
	width: 100%;
	min-height: 140px;
	margin: 0;
	/* Fundo (ex.: vermelho da Educação) ocupa toda a largura; o conteúdo fica
	   alinhado a um container central de 1240px. */
	padding-block: clamp(14px, 2vw, 22px);
	padding-inline: max(var(--ubf-gutter), calc((100% - 1240px) / 2));
	border: 0;
	background: transparent;
	color: var(--acc-title);
	text-align: left;
	cursor: pointer;
	font-family: 'Archivo', var(--ubf-font-display);
}

.ubf-acc__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(48px, 6vw, 92px);
	height: clamp(48px, 6vw, 92px);
}

.ubf-acc__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ubf-acc__titles {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ubf-acc__title {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 800;
	font-size: clamp(24px, 3.2vw, 40px);
	line-height: 1.05;
	color: var(--acc-title);
}

.ubf-acc__sub {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 500;
	font-size: clamp(16px, 2vw, 26px);
	line-height: 1.2;
	color: var(--acc-sub);
}

.ubf-acc__sub p {
	margin: 0;
}

.ubf-acc__toggle {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(42px, 5vw, 60px);
	height: clamp(42px, 5vw, 60px);
	border: 2px solid currentColor;
	border-radius: 4px;
	color: var(--acc-title);
	transition: transform var(--acc-dur) ease;
}

.ubf-acc__toggle svg {
	width: 58%;
	height: 58%;
}

/* Fechada: seta para baixo (padrão). Aberta: gira para cima. */
.ubf-acc:not(.is-collapsed) .ubf-acc__toggle {
	transform: rotate(180deg);
}

/* --- Painel expansível (altura automática, suave) --- */
.ubf-acc__panel {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows var(--acc-dur) ease;
}

.ubf-acc.is-collapsed .ubf-acc__panel {
	grid-template-rows: 0fr;
}

.ubf-acc__panel-inner {
	position: relative;
	min-height: 0;
	overflow: hidden;
	background: var(--acc-panel-bg);
}

.ubf-acc__items {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(16px, 2.4vw, 34px) clamp(24px, 5vw, 90px);
	/* Margem (maior no topo) dentro da seção + alinhamento com o cabeçalho. */
	padding-top: clamp(44px, 5.5vw, 80px);
	padding-bottom: clamp(30px, 4vw, 56px);
	padding-inline: max(var(--ubf-gutter), calc((100% - 1240px) / 2));
}

.ubf-acc__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(10px, 1.2vw, 16px);
}

.ubf-acc__check {
	flex: 0 0 auto;
	display: grid;
	place-items: start center;
	width: clamp(44px, 5.5vw, 81px);
	height: auto;
}

.ubf-acc__check img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ubf-acc__itemtext {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.7vw, 24px);
	line-height: 1.25;
	color: var(--acc-text);
}

.ubf-acc__itemtext p {
	margin: 0;
}

.ubf-acc__itemtext strong {
	font-weight: 700;
}

/* --- Cores por área (aproximadas — ajustar com os prints de cor) --- */
.ubf-acc--saude {
	background-color: #035695; /* conteúdo (mais escuro) */
}

/* Header mais claro que o conteúdo. */
.ubf-acc--saude .ubf-acc__head {
	background: #0e69ae;
}

/* Chevrons na BASE do fundo (canto inferior direito). */
.ubf-acc--saude .ubf-acc__grafismo {
	right: 0;
	bottom: 0;
	height: clamp(70px, 10vw, 127px);
}

.ubf-acc--infra {
	background-color: #ffbb1d;
	--acc-title: #035695;
	--acc-sub: #035695;
	--acc-text: #035695;
}

/* Header chapado (a imagem de fundo fica só no conteúdo). */
.ubf-acc--infra .ubf-acc__head {
	background: #ffbb1d;
}

.ubf-acc--educacao {
	background-color: #ffffff;
	--acc-title: #ffffff;
	--acc-sub: #ffffff;
	--acc-text: #0a4a86;
	--acc-panel-bg: #ffffff;
}

.ubf-acc--educacao .ubf-acc__head {
	background: #f80b12;
}

.ubf-acc--educacao .ubf-acc__grafismo {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	height: clamp(150px, 22vw, 290px);
}

.ubf-acc--cultura {
	background-color: #4084b8;
}

/* Header chapado (a imagem de fundo fica só no conteúdo). */
.ubf-acc--cultura .ubf-acc__head {
	background: #4084b8;
}

/* --- Entrada em cascata (fade + subida) das áreas --- */
.ubf-areas.ubf-reveal-ready .ubf-acc {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-areas.ubf-reveal-ready.is-visible .ubf-acc {
	opacity: 1;
	transform: none;
}

/* --- Mobile: 1 coluna, cabeçalho menor --- */
@media (max-width: 720px) {
	.ubf-acc__head {
		min-height: 96px;
	}

	.ubf-acc__items {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.ubf-acc__grafismo {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-areas.ubf-reveal-ready .ubf-acc {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ubf-acc__panel,
	.ubf-acc__toggle {
		transition: none;
	}
}

/* ===== Home: Construção + Municípios beneficiados ==================== */
/* --- Construção (fundo construção.png, grade 3×2) --- */
.ubf-constr {
	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	margin-inline: auto;
	padding: clamp(38px, 5vw, 64px) 0;
	background-color: #f9c651;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.ubf-constr__inner {
	max-width: 1120px;
	margin-inline: auto;
	padding-inline: clamp(24px, 6vw, 90px); /* padding lateral maior */
}

.ubf-constr__title {
	margin: 0 0 clamp(24px, 3vw, 46px);
	text-align: center;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900;
	font-size: clamp(20px, 2.6vw, 34px);
	line-height: 1.3;
	color: #035695;
}

.ubf-constr__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(18px, 2.6vw, 36px) clamp(20px, 3vw, 54px);
}

.ubf-constr__item {
	display: flex;
	align-items: center;
	gap: clamp(10px, 1.2vw, 16px);
}

.ubf-constr__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: clamp(34px, 3.4vw, 44px);
	height: auto;
}

.ubf-constr__icon img {
	width: 100%;
	height: auto;
	object-fit: contain;
}

.ubf-constr__text {
	min-width: 0;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.35;
	color: #035695;
	text-align: left; /* colunas estreitas: justify criava buracos */
}

.ubf-constr__text p {
	margin: 0;
}

/* --- Municípios beneficiados (pílulas) --- */
.ubf-cidades {
	background-color: #ffffff;
	background-position: bottom center;
	background-size: 100% auto;
	background-repeat: no-repeat;
	padding-top: clamp(38px, 5vw, 66px);
	/* espaço inferior para a paisagem (proporcional à largura da imagem). */
	padding-bottom: clamp(90px, 22vw, 410px);
}

.ubf-cidades__inner {
	max-width: 1000px;
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
	text-align: center;
}

/* O `text-align: center` do inner não chega até aqui: a base tem um reset
   `:where(.ubf-body h2) { text-align: start }`, e uma declaração direta no h2
   vence a herança do pai. Por isso o centro é declarado no próprio título. */
.ubf-cidades__title {
	margin: 0 0 clamp(22px, 3vw, 40px);
	text-align: center;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 800;
	font-size: clamp(18px, 2vw, 28px);
	letter-spacing: .1em;
	color: #035695;
}

.ubf-cidades__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: clamp(16px, 2vw, 30px);
	row-gap: clamp(16px, 1.8vw, 26px);
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.ubf-cidades__pill {
	padding: clamp(6px, .7vw, 10px) clamp(14px, 1.5vw, 24px);
	border-radius: 999px;
	background: #f9c651;
	color: #035695;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.1;
	white-space: nowrap;
	transition: transform .18s ease, box-shadow .18s ease;
}

.ubf-cidades__pill:hover {
	transform: scale(1.07);
	box-shadow: 0 6px 16px rgba(3, 86, 149, .18);
}

@media (prefers-reduced-motion: reduce) {
	.ubf-cidades__pill {
		transition: none;
	}

	.ubf-cidades__pill:hover {
		transform: none;
	}
}

/* Entrada em cascata (fade + subida). */
.ubf-constr.ubf-reveal-ready [data-ubf-reveal-item],
.ubf-cidades.ubf-reveal-ready [data-ubf-reveal-item] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-constr.ubf-reveal-ready.is-visible [data-ubf-reveal-item],
.ubf-cidades.ubf-reveal-ready.is-visible [data-ubf-reveal-item] {
	opacity: 1;
	transform: none;
}

/* Mobile/tablet: reduz colunas da Construção. */
@media (max-width: 900px) {
	.ubf-constr__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ubf-constr__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-constr.ubf-reveal-ready [data-ubf-reveal-item],
	.ubf-cidades.ubf-reveal-ready [data-ubf-reveal-item] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Home: Ramalho (fechamento) =================================== */
/* Fundo azul #035695 com a paisagem da cidade no topo; 2 colunas (imagem +
   texto) e um grafismo amarelo à direita. */
.ubf-ramalho {
	position: relative;
	z-index: 1;
	overflow: hidden;
	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	margin-inline: auto;
	margin-top: -6px; /* sobrepõe ~6px a seção de cima (some o filete/emenda) */
	background-color: #035695;
}

.ubf-ramalho__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: stretch;
	gap: clamp(20px, 3vw, 40px);
	min-height: 480px;
	max-width: 1245px; /* largura total do conteúdo (imagem + texto) */
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
}

.ubf-ramalho__media {
	align-self: end;
	display: flex;
	justify-content: center;
}

.ubf-ramalho__media img {
	display: block;
	width: 100%; /* reage à largura da coluna, até 580px */
	max-width: 580px;
	height: auto;
}

.ubf-ramalho__text {
	position: relative;
	z-index: 2; /* fica acima do grafismo */
	align-self: center;
	padding-block: clamp(24px, 4vw, 44px);
	color: #ffffff;
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular — o negrito fica reservado ao `<strong>` */
	font-size: clamp(20px, 1.8vw, 28px); /* 28 desktop; maior no mobile */
	line-height: 1.3;
}

.ubf-ramalho__text p {
	margin: 0 0 1em;
}

.ubf-ramalho__text p:last-child {
	margin-bottom: 0;
}

.ubf-ramalho__text strong {
	font-weight: 700;
}

.ubf-ramalho__grafismo {
	position: absolute;
	z-index: 1;
	top: 50%;
	right: 0; /* extremo canto direito da seção */
	transform: translateY(-50%);
	width: auto;
	height: clamp(200px, 26vw, 349px); /* 105×349 */
	pointer-events: none;
}

/* Entrada em cascata. */
.ubf-ramalho.ubf-reveal-ready [data-ubf-reveal-item] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-ramalho.ubf-reveal-ready.is-visible [data-ubf-reveal-item] {
	opacity: 1;
	transform: none;
}

/* Tablet: esconde o grafismo (evita sobrepor o texto quando o layout aperta). */
@media (max-width: 1024px) {
	.ubf-ramalho__grafismo {
		display: none;
	}
}

/* Mobile: empilha com TEXTO em cima e IMAGEM embaixo, centralizado; imagem
   ~20% menor e encostada na BASE da seção. */
@media (max-width: 760px) {
	.ubf-ramalho__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: clamp(16px, 4vw, 28px);
		padding-top: clamp(24px, 6vw, 40px);
		padding-bottom: 0; /* imagem toca a base */
	}

	.ubf-ramalho__text {
		order: 1; /* texto em cima */
		align-self: auto;
		padding-block: 0;
		text-align: center;
	}

	.ubf-ramalho__media {
		order: 2; /* imagem embaixo */
		align-self: end;
	}

	.ubf-ramalho__media img {
		max-width: 80%; /* ~20% menor */
	}
}

@media (prefers-reduced-motion: reduce) {
	.ubf-ramalho.ubf-reveal-ready [data-ubf-reveal-item] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Signup — variante amarela (fundo amarelo, formulário azul) ===== */
.ubf-signup--amarelo {
	background: #f6bb3f;
}

.ubf-signup--amarelo .ubf-signup__label {
	color: #035695;
}

.ubf-signup--amarelo .ubf-signup__input:focus-visible {
	outline-color: #035695;
}

.ubf-signup--amarelo .ubf-signup__btn {
	background: #035695;
	color: #ffffff;
}

.ubf-signup--amarelo .ubf-signup__btn:hover {
	background: #024a80;
}

/* ===== Rodapé do site (todas as páginas) ============================= */
.ubf-footer {
	position: relative;
	overflow: hidden;
	background: var(--ubf-footer-bg);
}

/* O piso de 300px (altura original da seção) vive no inner, não no rodapé: com
   o bloco legal a coluna da direita pode passar disso, e a seção precisa
   crescer junto em vez de cortar o texto no overflow. */
.ubf-footer__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 4vw, 56px);
	max-width: 1120px;
	min-height: 300px;
	margin-inline: auto;
	padding: 60px var(--ubf-gutter); /* 60px ao redor do conteúdo */
}

.ubf-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(10px, 1.4vw, 16px);
}

.ubf-footer__logo {
	display: block;
	width: clamp(240px, 28vw, 412px); /* ~412×110 */
	height: auto;
}

.ubf-footer__logo-txt {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 800;
	font-size: 26px;
	color: #035695;
}

.ubf-footer__socials {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 26px); /* fileira ~251px */
}

.ubf-footer__logo-link {
	display: inline-flex;
}

/* Seletor com 2 classes p/ vencer `.ubf-body a { color: inherit }` da base. */
.ubf-footer .ubf-footer__social {
	display: inline-flex;
	width: 28px;
	height: 28px;
	color: #035695;
	transition: opacity .18s ease, transform .18s ease;
}

.ubf-footer__social:hover {
	opacity: .8;
	transform: translateY(-1px);
}

.ubf-footer__social svg {
	width: 100%;
	height: 100%;
}

.ubf-footer__divider {
	width: 2px; /* 2×77 */
	height: 77px;
	background: rgba(3, 86, 149, .4);
}

.ubf-footer__right {
	min-width: 0;
}

/*
 * Bloco legal (propaganda eleitoral). Texto informativo: fica menor que o
 * crédito e sem itálico, para não competir com a marca. O caixa-alta espaçado
 * do rótulo é o mesmo tratamento de "MUNICÍPIOS BENEFICIADOS".
 */
.ubf-footer__legal {
	max-width: 46ch; /* linhas curtas: texto legal não deve virar um parágrafo largo */
	color: #035695;
}

.ubf-footer__legal-title {
	margin: 0 0 clamp(6px, .8vw, 10px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 800;
	font-size: clamp(12px, 1.05vw, 14px);
	letter-spacing: .1em;
	line-height: 1.2;
}

.ubf-footer__legal-line {
	margin: 0;
	text-align: left; /* o justify global abriria buracos nestas linhas curtas */
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(13px, 1.15vw, 16px);
	line-height: 1.45;
}

/* Assinatura, abaixo das redes: acompanha a coluna da marca (centralizada). */
.ubf-footer__credit {
	margin: clamp(6px, 1vw, 12px) 0 0;
	text-align: center;
	font-family: 'Archivo', var(--ubf-font-display);
	font-style: italic;
	font-weight: 300; /* Light Italic */
	font-size: clamp(16px, 1.6vw, 24px); /* 24 */
	line-height: 1.35;
	color: #035695;
}

/* Grafismo vermelho: encostado na BASE da seção (ignora o padding de 60px). */
.ubf-footer__grafismo {
	position: absolute;
	bottom: 0;
	left: calc(50% + clamp(20px, 3vw, 46px));
	width: auto;
	height: clamp(30px, 4vw, 49px);
}

/* Mobile: empilha e centraliza; altura pelo conteúdo. */
@media (max-width: 720px) {
	.ubf-footer__inner {
		flex-direction: column;
		min-height: 0;
		padding: clamp(32px, 8vw, 60px) var(--ubf-gutter) clamp(48px, 13vw, 80px);
	}

	.ubf-footer__divider {
		width: 64px;
		height: 2px;
	}

	.ubf-footer__right {
		align-items: center;
		text-align: center;
	}

	.ubf-footer__legal {
		max-width: 100%;
	}

	.ubf-footer__legal-line {
		text-align: center;
	}

	.ubf-footer__grafismo {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* ===== Single: Pauta ================================================= */
/* --- Banner fixo (banner.png, 450px) --- */
.ubf-pauta-banner {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	min-height: 480px;
	margin-inline: auto;
	background-color: #035695;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #ffffff;
}

.ubf-pauta-banner__inner {
	width: 100%;
	max-width: 800px; /* conteúdo do banner alinhado ao corpo (800px) */
	margin-inline: auto;
	/* padding lateral maior que o gutter padrão */
	padding: clamp(28px, 4vw, 48px) max(var(--ubf-gutter), 28px);
}

.ubf-pauta-banner__title {
	max-width: 760px;
	margin: 0 0 clamp(10px, 1.4vw, 16px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 900; /* Black */
	font-size: clamp(42px, 5vw, 70px); /* 70 (mobile maior) */
	line-height: .9; /* ~60/70 */
	color: #f9c651; /* amarelo */
}

.ubf-pauta-banner__sub {
	max-width: 810px;
	margin: 0 0 clamp(20px, 2.6vw, 30px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular */
	font-size: clamp(19px, 1.9vw, 32px); /* 32 (mobile maior) */
	line-height: 1.15;
	color: #ffffff;
}

/* Seletor com 2 classes p/ a cor vencer o `.ubf-body a { color: inherit }`. */
.ubf-pauta-banner .ubf-pauta-banner__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 1.4vw, 18px) clamp(26px, 3vw, 44px);
	border-radius: 999px;
	background: #f9c651;
	color: #035695; /* azul */
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700; /* Bold */
	font-size: clamp(16px, 1.8vw, 32px); /* 32 */
	line-height: 1.1;
	text-align: center;
	transition: background .2s ease, transform .2s ease;
}

.ubf-pauta-banner .ubf-pauta-banner__btn:hover {
	background: #e9b23a; /* amarelo um pouco mais escuro */
	color: #035695;
	transform: scale(.94); /* shrink */
}

/* --- Corpo do single (800px) --- */
/* Fundo base das single de Pautas. */
body.single-ubx_pautas {
	background: #f7f8fb;
}

.ubf-pauta-body {
	background: #f7f8fb;
	padding-block: clamp(32px, 5vw, 64px);
}

.ubf-pauta-body__inner {
	max-width: 800px; /* largura do corpo */
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
}

.ubf-pauta-body__lead {
	margin: 0 0 clamp(20px, 3vw, 34px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular 40 */
	font-size: clamp(22px, 3vw, 40px);
	line-height: 1.15;
	color: #035695;
}

.ubf-pauta-body__figure {
	margin: 0 0 clamp(10px, 1.5vw, 16px);
}

.ubf-pauta-body__img {
	display: block;
	width: 100%;
	aspect-ratio: 800 / 472; /* imagem cropada em 472px de altura */
	object-fit: cover;
	border-radius: 4px;
}

.ubf-pauta-body__content {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400;
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.5;
	color: #035695;
}

.ubf-pauta-body__content p {
	margin: 0 0 1em;
}

.ubf-pauta-body__content h2,
.ubf-pauta-body__content h3,
.ubf-pauta-body__content h4 {
	margin: 1.3em 0 .5em;
	font-weight: 700;
	color: #035695;
}

.ubf-pauta-body__content ul,
.ubf-pauta-body__content ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.ubf-pauta-body__content li {
	margin-bottom: .4em;
}

.ubf-pauta-body__content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.ubf-pauta-body__content a {
	color: #035695;
	text-decoration: underline;
}

.ubf-pauta-body__content strong {
	font-weight: 700;
}

/* ===== Single Pauta: "Dados que o povo precisa saber:" (fundo amarelo) */
.ubf-pdados {
	position: relative;
	min-height: 220px;
	background: #f9c651;
	padding-block: 0 clamp(32px, 4vw, 48px); /* grafismo colado no topo */
	overflow: hidden;
}

.ubf-pdados__inner {
	display: flex;
	flex-direction: column;
	max-width: 800px; /* alinha com o corpo acima */
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
}

/* Grafismo vermelho colado no topo, à esquerda (acima do início do título),
   com margem até o título (altura 25px). */
.ubf-pdados__graf {
	align-self: flex-start;
	width: auto;
	height: 25px;
	margin-bottom: clamp(18px, 2.5vw, 28px);
}

.ubf-pdados__title {
	margin: 0 0 clamp(22px, 3vw, 32px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700; /* Bold 30 */
	font-size: clamp(22px, 2.4vw, 30px);
	line-height: 1.1;
	color: #035695;
}

.ubf-pdados__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(24px, 3vw, 48px);
	row-gap: clamp(20px, 2.5vw, 28px);
}

.ubf-pdados__item {
	display: flex;
	align-items: flex-start; /* imagem e texto alinhados pelo topo */
	gap: clamp(14px, 1.5vw, 18px);
}

/* O ícone é a imagem que vem do repetidor (52×52), alinhada ao topo do texto. */
.ubf-pdados__ic {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	height: 52px;
}

.ubf-pdados__ic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ubf-pdados__txt {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular 24 */
	font-size: clamp(17px, 1.7vw, 24px);
	line-height: 1.1;
	color: #035695;
}

.ubf-pdados__txt strong,
.ubf-pdados__txt b {
	font-weight: 700;
}

/* ===== Single Pauta: "AS CAUSAS" (fundo branco) ===================== */
.ubf-pcausas {
	background: #f7f8fb;
	padding-block: clamp(28px, 4vw, 48px) clamp(36px, 5vw, 60px);
}

.ubf-pcausas__inner {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: var(--ubf-gutter);
}

.ubf-pcausas__title {
	margin: 0 0 clamp(14px, 2vw, 22px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 700; /* Bold 24 */
	font-size: clamp(20px, 2vw, 24px);
	line-height: 1.2;
	color: #035695;
}

.ubf-pcausas__txt {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular 20 */
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.2; /* 24 / 20 */
	color: #333333;
}

.ubf-pcausas__txt p {
	margin: 0 0 1em;
}

.ubf-pcausas__txt ul,
.ubf-pcausas__txt ol {
	margin: 0 0 1em;
	padding-left: 1.3em;
}

.ubf-pcausas__txt li {
	margin-bottom: .5em;
}

.ubf-pcausas__txt strong,
.ubf-pcausas__txt b {
	font-weight: 700;
}

.ubf-pcausas__txt a {
	color: #035695;
	text-decoration: underline;
}

/* ===== Single Pauta: "Direitos Básicos" (fundo amarelo) ============= */
.ubf-direitos {
	position: relative;
	overflow: hidden;
	background: #f9c651;
}

/* Grafismo azul (115×378) encostado à esquerda, próximo ao topo.
   Mantido estreito p/ nunca invadir o texto (largura ≈ altura×115/378). */
.ubf-direitos__graf {
	position: absolute;
	left: 0;
	top: clamp(24px, 4vw, 56px);
	width: auto;
	height: clamp(140px, 18vw, 300px);
	z-index: 1;
}

.ubf-direitos__inner {
	position: relative;
	z-index: 2;
	max-width: 1245px;
	margin-inline: auto;
	/* altura mínima p/ conter a foto (absoluta, na base) sem cortá-la */
	min-height: clamp(420px, 46vw, 600px);
	/* sem padding inferior: a foto encosta na base da seção */
	padding: clamp(40px, 6vw, 72px) var(--ubf-gutter) 0;
}

.ubf-direitos__content {
	max-width: 500px; /* texto ocupa até 500px (não muda as quebras) */
	/* Desloca o texto até a esquerda do corpo (container 800px centralizado):
	   222px em telas largas; degrada nas médias; piso 90px (folga do grafismo).
	   clamp(MIN, PREFERIDO, MAX) = max(MIN, min(PREFERIDO, MAX)). */
	margin-left: clamp(90px, calc(50vw - 400px), 222px);
	padding-bottom: clamp(40px, 6vw, 72px); /* respiro na base do texto */
}

/*
 * O título escapa dos 500px da coluna e ocupa a largura da coluna de texto do
 * corpo do single (800px) — a lista abaixo continua nos 500px, intocada. O
 * max-width impede que ele passe da direita da seção, que tem overflow:hidden
 * e cortaria o texto em telas logo acima do breakpoint.
 */
.ubf-direitos__title {
	width: 800px;
	max-width: calc(min(1245px, 100vw) - 2 * var(--ubf-gutter) - clamp(90px, calc(50vw - 400px), 222px));
	margin: 0 0 clamp(20px, 3vw, 32px);
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* base "Misto": 1ª linha regular, 2ª em <strong> */
	font-size: clamp(30px, 4.6vw, 50px);
	line-height: 1.08;
	color: #035695;
}

.ubf-direitos__title strong,
.ubf-direitos__title b {
	font-weight: 700;
}

.ubf-direitos__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: clamp(14px, 1.8vw, 22px);
}

.ubf-direitos__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(12px, 1.3vw, 18px);
}

/* Dot azul de 20px na frente de cada item. */
.ubf-direitos__dot {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #035695;
	margin-top: .28em; /* centraliza na 1ª linha do texto */
}

.ubf-direitos__itxt {
	font-family: 'Archivo', var(--ubf-font-display);
	font-weight: 400; /* Regular 26 */
	font-size: clamp(17px, 1.9vw, 26px);
	line-height: 1.15; /* 30 / 26 */
	color: #035695;
}

/* Foto do Ramalho (584×593): absoluta na base à direita — NÃO se move quando
   o texto é deslocado (ancorada à direita do container 1245px). */
.ubf-direitos__photo {
	position: absolute;
	right: var(--ubf-gutter);
	bottom: 0;
	display: block;
	width: clamp(240px, 32vw, 540px);
	height: auto;
	z-index: 1;
	pointer-events: none;
}

/* Mobile: uma coluna nos "Dados". */
@media (max-width: 720px) {
	.ubf-pdados__grid {
		grid-template-columns: 1fr;
	}
}

/* Direitos: abaixo de 1180px o lado-a-lado não cabe — empilha.
   (Cobre também as telas "um pouco maiores" que quebravam o visual.) */
@media (max-width: 1180px) {
	.ubf-direitos__inner {
		min-height: 0;
		/* grafismo escondido → texto em largura total (padding normal) */
		padding: clamp(32px, 6vw, 56px) var(--ubf-gutter) 0;
	}

	.ubf-direitos__content {
		max-width: 100%;
		margin-left: 0; /* sem deslocamento: texto em largura total (pode quebrar) */
		padding-bottom: 0;
	}

	/* Aqui a coluna já é de largura total — o título acompanha, sem os 800px. */
	.ubf-direitos__title {
		width: auto;
		max-width: 100%;
	}

	/* Foto no fluxo, logo abaixo do texto. Ocupa a MESMA largura da coluna de
	   texto (o content box do inner, entre as gutters); a altura acompanha pelo
	   `height: auto` da base, mantendo a proporção. */
	.ubf-direitos__photo {
		position: static;
		display: block;
		width: 100%;
		margin: clamp(10px, 3vw, 24px) 0 0; /* pequena distância do texto */
	}

	/* Grafismo escondido no mobile / telas menores. */
	.ubf-direitos__graf {
		display: none;
	}
}

/* ===== Barra de progresso de leitura (single) ======================= */
.ubf-progress {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9999;
	width: 100%;
	height: 6px;
	background: #ffffff;
	pointer-events: none;
}

.ubf-progress__bar {
	display: block;
	width: 0;
	height: 100%;
	background: #d51319;
	transition: width .08s linear;
}

/* ===== Single Pauta: entrada dos itens (banner + corpo) ============== */
.ubf-pauta-banner__inner.ubf-reveal-ready [data-ubf-reveal-item],
.ubf-pauta-body__inner.ubf-reveal-ready [data-ubf-reveal-item],
.ubf-pdados__inner.ubf-reveal-ready [data-ubf-reveal-item],
.ubf-pcausas__inner.ubf-reveal-ready [data-ubf-reveal-item],
.ubf-direitos__inner.ubf-reveal-ready [data-ubf-reveal-item] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity var(--ubf-reveal-dur) ease, transform var(--ubf-reveal-dur) ease;
}

.ubf-pauta-banner__inner.ubf-reveal-ready.is-visible [data-ubf-reveal-item],
.ubf-pauta-body__inner.ubf-reveal-ready.is-visible [data-ubf-reveal-item],
.ubf-pdados__inner.ubf-reveal-ready.is-visible [data-ubf-reveal-item],
.ubf-pcausas__inner.ubf-reveal-ready.is-visible [data-ubf-reveal-item],
.ubf-direitos__inner.ubf-reveal-ready.is-visible [data-ubf-reveal-item] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ubf-pauta-banner__inner.ubf-reveal-ready [data-ubf-reveal-item],
	.ubf-pauta-body__inner.ubf-reveal-ready [data-ubf-reveal-item],
	.ubf-pdados__inner.ubf-reveal-ready [data-ubf-reveal-item],
	.ubf-pcausas__inner.ubf-reveal-ready [data-ubf-reveal-item],
	.ubf-direitos__inner.ubf-reveal-ready [data-ubf-reveal-item] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ===== Botões flutuantes do canto (voltar ao topo + suporte) =========
 * Medidas numa variável só: os dois botões usam o mesmo tamanho e o mesmo
 * recuo, então ficam alinhados na mesma coluna, um em cima do outro.
 */
:root {
	--ubf-fab-size: clamp(46px, 5vw, 54px);
	--ubf-fab-offset: clamp(16px, 2.5vw, 30px);
	--ubf-fab-gap: 14px;
}

.ubf-totop {
	position: fixed;
	right: var(--ubf-fab-offset);
	bottom: var(--ubf-fab-offset);
	z-index: 9998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ubf-fab-size);
	height: var(--ubf-fab-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #035695;
	color: #f9c651; /* seta amarela */
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s ease;
}

.ubf-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.ubf-totop:hover {
	background: #024a80;
	transform: translateY(-2px);
}

.ubf-totop svg {
	width: 46%;
	height: 46%;
}

@media (prefers-reduced-motion: reduce) {
	.ubf-totop {
		transition: opacity .2s ease, visibility .2s;
	}
}

/* O balão de suporte (plugin SupportBox, só para quem está logado) nasce no
   mesmo canto do "voltar ao topo", com tamanho (52px) e recuo (24px) próprios
   — ficava desalinhado e encavalado. Aqui ele herda as medidas dos botões
   flutuantes do site e sobe a altura de um botão + a folga. O `body` na frente
   é para vencer o `#id` do SupportBox sem depender da ordem dos CSS. */
body #supportbox-botao {
	width: var(--ubf-fab-size);
	height: var(--ubf-fab-size);
	inset-inline-end: var(--ubf-fab-offset);
	bottom: calc(var(--ubf-fab-offset) + var(--ubf-fab-size) + var(--ubf-fab-gap));
}

/* ===== Single: faixa graf-favela (antes do cadastro) ================= */
.ubf-graffavela {
	position: relative;
	z-index: 2; /* fica por cima da seção de baixo */
	width: 100%;
	max-width: none; /* full-bleed: estica o fundo acima de 1920px */
	margin-inline: auto;
	margin-bottom: -4px; /* sobrepõe 4px a seção debaixo */
	font-size: 0; /* remove folga abaixo da imagem */
	line-height: 0;
}

.ubf-graffavela__img {
	display: block;
	width: 100%;
	height: auto;
}