/* Novo visual do Portal de Castanhal (portalecds) — header, hero, serviços, legislação/tutoriais (placeholder) e footer. */

:root {
	--pn-azul: #00014e;
	--pn-azul-escuro: #000137;
	--pn-azul-hover: #000142;
	--pn-azul-claro: #e6e6f0;
	--pn-verde: #3d9d48;
	--pn-vinho: #6b2440;
	--pn-roxo-escuro: #120e1a;
	--pn-amarelo: #c9962c;
	--pn-vermelho: #c0392b;
	--pn-laranja: #c9601f;
	--pn-azul-vivo: #2b6cb0;
	--pn-azul-celeste: #2ea7d9;
	--pn-azul-nfsae: #0a5aa3;
	--pn-verde-limao: #858f14;
	--pn-verde-esmeralda: #007b37;
	--pn-roxo-borda: #2e2740;
	--pn-texto: #211c2e;
	--pn-texto-suave: #444444;
	--pn-texto-fraco: #77728a;
	--pn-eyebrow-cor: #9891ac;
	--pn-borda: #e0e2ee;
	--pn-bg: #faf8ff;
	--pn-header-bg: #eeecf2;
	--pn-fonte-titulo: 'Montserrat', sans-serif;
	--pn-fonte-texto: 'Montserrat', sans-serif;
	--pn-fonte-eyebrow: 'Enriqueta', serif;
	/* Largura do container de conteúdo (header, hero, footer, seções...). */
	--pn-container-max: 1240px;
}

.pn-body {
	/* Zera o "margin-bottom:355px" legado do default.css (reservado pro rodapé antigo) */
	margin: 0;
	font-family: var(--pn-fonte-texto);
	color: var(--pn-texto);
	background: #fff;
	/* pf15-compat.css usa var(--castanhal/-hover/-dark, #8B49A7-ish) em dezenas de
	   componentes (spinner, checkbox, radio, tabs, treetable...). Redefinindo aqui,
	   em vez de sobrescrever cada seletor um a um, todo mundo vira azul automaticamente. */
	--castanhal: var(--pn-azul);
	--castanhal-hover: var(--pn-azul-hover);
	--castanhal-dark: var(--pn-azul-escuro);
	--pf-datepicker-primary: var(--pn-azul);
	--pf-datepicker-primary-dark: var(--pn-azul-hover);
	/* Rodapé fixo ao final em qualquer página (mesmo com pouco conteúdo, como a de
	   BCI): body vira coluna flex de altura mínima igual à viewport, #container
	   cresce pra empurrar o rodapé pro fim. Páginas com .pn-body-fixo (app-shell)
	   sobrescrevem isso abaixo, sem conflito. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.pn-body #container {
	flex: 1 0 auto;
}

.pn-body .pn-footer {
	flex-shrink: 0;
}

/* Área restrita — mesmo truque do .pn-body via var(--castanhal) */
.painel-interna {
	--castanhal: var(--pn-azul);
	--castanhal-hover: var(--pn-azul-hover);
	--castanhal-dark: var(--pn-azul-escuro);
	/* pf15-datepicker-panel.css resolve --pf-datepicker-primary no :root
	   (roxo legado). Redefinir aqui para o trigger/popup herdarem azul. */
	--pf-datepicker-primary: var(--pn-azul);
	--pf-datepicker-primary-dark: var(--pn-azul-hover);
	font-family: var(--pn-fonte-texto);
}

/* sticky footer da área restrita; "body." bate a especificidade do legado em default.css */
body.painel-interna {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

body.painel-interna #container2 {
	flex: 1 0 auto;
}

body.painel-interna .pn-footer {
	flex-shrink: 0;
}

.painel-interna .info-em {
	background: var(--pn-azul);
}

.painel-interna .btnCaixaComunicado .ui-button {
	color: var(--pn-header-bg) !important;
	font-weight: 700 !important;
}

/* .btn-padrao herda roxo fixo de input[type="submit"] no theme.css */
.painel-interna input[type='submit'] {
	background-color: var(--pn-azul) !important;
}

/* theme.css declara "segoe ui" direto em .ui-widget/inputs/botões — herança do
   body não basta, precisa sobrescrever nos componentes mesmo, nas 3 telas azuis. */
.pn-body,
.pn-body .ui-widget,
.pn-body .ui-widget input,
.pn-body .ui-widget select,
.pn-body .ui-widget textarea,
.pn-body .ui-widget button,
.pn-body input[type='submit'],
.painel-interna,
.painel-interna .ui-widget,
.painel-interna .ui-widget input,
.painel-interna .ui-widget select,
.painel-interna .ui-widget textarea,
.painel-interna .ui-widget button,
.painel-interna input[type='submit'],
.pn-tema-azul,
.pn-tema-azul .ui-widget,
.pn-tema-azul .ui-widget input,
.pn-tema-azul .ui-widget select,
.pn-tema-azul .ui-widget textarea,
.pn-tema-azul .ui-widget button,
.pn-tema-azul input[type='submit'] {
	font-family: var(--pn-fonte-texto) !important;
}

.painel-interna input[type='submit']:hover {
	background-color: var(--pn-azul-hover) !important;
}

/* Layout de "app-shell" (telas de formulário compacto, ex: 2ª via de parcela,
   consulta de protocolo): header + rodapé sempre visíveis, só o miolo rola.
   Nas demais páginas (incluindo divulgação) o rodapé fica no fim normal da página. */
.pn-body-fixo {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.pn-body-fixo #topo {
	flex-shrink: 0;
}

.pn-body-fixo #container {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0;
	display: block;
}

.pn-body-fixo .pn-footer {
	flex-shrink: 0;
}

/* HEADER */
.pn-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--pn-header-bg);
	border-bottom: 1px solid var(--pn-roxo-borda);
}

/* Skyline num ::before próprio (não no background do .pn-header) — assim a opacity
   acinzenta só o desenho, sem lavar a barra inteira de cinza. .pn-header-inner
   (position:relative) fica naturalmente por cima, já que vem depois do ::before
   na ordem de pintura. */
.pn-header::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../banner-header-recortado.png') repeat-x bottom left;
	background-size: auto 100%;
	opacity: 0.18;
	pointer-events: none;
}

.pn-header-inner {
	position: relative;
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 18px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: nowrap;
}

.pn-header-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 1px solid var(--pn-borda);
	border-radius: 8px;
	color: var(--pn-azul-escuro);
	font-size: 18px;
	cursor: pointer;
	flex-shrink: 0;
}

.pn-header-mobile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex: 1;
	min-width: 0;
}

.pn-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.pn-brand img {
	height: 92px;
	width: auto;
}

.pn-brand-eyebrow {
	font-family: var(--pn-fonte-texto);
	font-weight: 700;
	font-size: 13px;
	color: var(--pn-azul);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	line-height: 1.2;
}

.pn-brand-nome {
	font-family: var(--pn-fonte-eyebrow);
	font-weight: 700;
	font-size: 38px;
	color: var(--pn-azul);
	line-height: 1.1;
}

.pn-header-search-wrap {
	position: relative;
	flex: 1;
	max-width: 420px;
}

/* Usado na busca do header da área restrita (.topo-acoes-restrito) — pill
   branco liso, uma cor só, igual ao header público.
   Os seletores por #id abaixo (em vez de classe) são de propósito: o tema
   PrimeFaces (theme.css) tem uma regra global "input[type=text] { background:
   #fff !important; border: 1px solid #abadb3 !important; border-radius: 5px }"
   que "vazava" pro nosso input e deixava ele com um tom/borda diferente do
   resto do pill (o efeito de "duas cores" que dava pra ver antes). Um seletor
   por id tem mais especificidade que um atributo, então garante que a gente
   sempre vence essa regra, independente da ordem de carregamento dos CSS. */
.pn-header-search-wrap-compacto {
	flex: 0 1 240px;
	max-width: 240px;
}

.pn-header-search-wrap-compacto .pn-header-search {
	padding: 6px 14px;
}

#restritoSearchInput {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--pn-texto) !important;
}

#restritoSearchBtn {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.pn-header-search {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--pn-bg);
	border: 1px solid var(--pn-borda);
	border-radius: 100px;
	padding: 9px 16px;
	color: #8b849b;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
}

.pn-header-search:hover,
.pn-header-search:focus-within {
	border-color: var(--pn-azul);
}

.pn-header-search-input {
	flex: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0 !important;
	background: transparent !important;
	padding: 0;
	font-size: 13px !important;
	font-family: var(--pn-fonte-texto);
	color: var(--pn-texto) !important;
	outline: none;
}

.pn-header-search-input::placeholder {
	color: #8b849b;
}

.pn-header-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: none;
	background: transparent;
	color: #8b849b;
	font-size: 14px;
	padding: 4px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pn-header-search:hover .pn-header-search-btn,
.pn-header-search:focus-within .pn-header-search-btn {
	color: var(--pn-azul);
}

.pn-header-search-sugestoes {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 12px;
	box-shadow: 0 12px 30px -12px rgba(0, 1, 78, 0.25);
	padding: 6px;
	max-height: 280px;
	overflow-y: auto;
	font-weight: 400;
	text-transform: none;
}

.pn-header-search-sugestoes.pn-visivel {
	display: block;
}

.pn-header-search-item {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
}

.pn-header-search-item:hover {
	background: color-mix(in srgb, var(--pn-azul) 8%, white);
}

.pn-header-search-item-tag {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--pn-azul);
	text-transform: uppercase;
	margin-bottom: 2px;
}

.pn-header-search-item-texto {
	display: block;
	font-size: 12px;
	color: var(--pn-texto-fraco);
}

.pn-header-search-vazio {
	padding: 10px;
	font-size: 12px;
	color: var(--pn-texto-fraco);
	text-align: center;
}

.pn-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.pn-nav .ui-menubar {
	background: transparent;
	border: none;
}

.pn-nav a {
	text-decoration: none;
}

.pn-nav .ui-menubar > .ui-menubar-root-list > .ui-menuitem > .ui-menuitem-link,
.pn-nav .ui-menubar > ul.ui-menu-list > li.ui-menuitem > a.ui-menuitem-link {
	font-family: var(--pn-fonte-texto);
	font-size: 13px;
	font-weight: 500;
	color: var(--pn-azul) !important;
	background: transparent !important;
	padding: 8px 4px !important;
	text-decoration: none;
}

.pn-nav
	.ui-menubar
	> .ui-menubar-root-list
	> .ui-menuitem
	> .ui-menuitem-link:hover,
.pn-nav
	.ui-menubar
	> ul.ui-menu-list
	> li.ui-menuitem
	> a.ui-menuitem-link:hover {
	color: var(--pn-azul-hover) !important;
	background: transparent !important;
}

/* Subjanelas (dropdowns) do menu público — mesmo padrão de fonte/cor do novo portal.
   Descendente (sem >) para pegar também os submenus aninhados de "Serviços Específicos". */
.pn-nav .ui-menubar .ui-menu-child {
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 6px !important;
	box-shadow: 0 8px 24px rgba(0, 1, 78, 0.14);
	padding: 6px 0;
}

.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link,
.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link.ui-state-default {
	font-family: var(--pn-fonte-texto);
	font-size: 13px;
	font-weight: 400 !important;
	color: var(--pn-texto) !important;
	background: transparent !important;
	box-shadow: none !important;
}

.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link:hover,
.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link.ui-state-hover,
.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link.ui-state-focus,
.pn-nav .ui-menubar .ui-menu-child .ui-menuitem-link.ui-state-active {
	color: var(--pn-azul) !important;
	background: var(--pn-azul-claro) !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

/* Itens-pai de submenu aninhado (ex.: dentro de "Serviços Específicos") ficam com
   .ui-state-active enquanto o próprio submenu está aberto — o tema pinta isso de
   roxo (#76297f) com !important; sobrescreve em qualquer nível do menu público. */
.pn-nav .ui-menubar .ui-menuitem.ui-state-active,
.pn-nav .ui-menubar .ui-state-active {
	background: var(--pn-azul-claro) !important;
	color: var(--pn-azul) !important;
	font-weight: 500 !important;
	border: 0;
}

.pn-nav .ui-menubar .ui-state-active a,
.pn-nav .ui-menubar .ui-state-active a:link,
.pn-nav .ui-menubar .ui-state-active a:visited {
	color: var(--pn-azul) !important;
}

.pn-nav-home {
	font-family: var(--pn-fonte-texto);
	font-size: 13px;
	font-weight: 700;
	color: var(--pn-texto);
	text-decoration: none;
}

.pn-nav-home:hover {
	color: var(--pn-azul);
}

.pn-entrar-btn {
	color: #fff;
	padding: 10px 22px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	font-family: var(--pn-fonte-texto);
	background-color: var(--pn-azul);
}

.pn-entrar-btn:hover {
	background: var(--pn-azul-hover);
}

/* BOTAO FECHAR (X) - PADRAO GLOBAL DE DIALOGOS */
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute !important;
	float: none !important;
	top: 8px !important;
	right: 8px !important;
	width: 26px !important;
	height: 26px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12) !important;
	transition: background 0.15s ease;
}

.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus {
	background: rgba(255, 255, 255, 0.25) !important;
}

.ui-dialog .ui-dialog-titlebar-close span {
	display: none !important;
}

.ui-dialog .ui-dialog-titlebar-close::before,
.ui-dialog .ui-dialog-titlebar-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: #fff;
	border-radius: 1px;
}

.ui-dialog .ui-dialog-titlebar-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.ui-dialog .ui-dialog-titlebar-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* LOGIN MODAL */
.pn-login-dialog.ui-dialog {
	border-radius: 20px;
	box-shadow: 0 30px 60px -20px rgba(23, 19, 32, 0.5);
	border: none;
	z-index: 100001 !important;
}

.pn-login-dialog.ui-dialog .ui-dialog-titlebar,
.pn-login-dialog.ui-dialog .ui-dialog-titlebar.ui-widget-header {
	position: absolute;
	top: 12px;
	right: 12px;
	left: auto;
	width: auto;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	z-index: 2;
}

.pn-login-dialog .ui-dialog-title {
	display: none;
}

.pn-login-dialog .ui-dialog-titlebar-close {
	position: relative;
	width: 28px !important;
	height: 28px !important;
	background: rgba(0, 0, 0, 0.06) !important;
}

.pn-login-dialog .ui-dialog-titlebar-close:hover,
.pn-login-dialog .ui-dialog-titlebar-close:focus {
	background: var(--pn-azul-claro, #e6e6f0) !important;
}

.pn-login-dialog .ui-dialog-titlebar-close::before,
.pn-login-dialog .ui-dialog-titlebar-close::after {
	background: var(--pn-azul);
}

.pn-login-dialog .ui-dialog-content {
	padding: 40px;
	border-radius: 20px;
}

.pn-login-avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--pn-borda);
	margin: 0 auto 20px;
	overflow: hidden;
	position: relative;
}

.pn-login-avatar img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 78%;
	height: 78%;
	object-fit: contain;
	transform: translate(-50%, -50%);
}

.pn-login-titulo {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 24px;
	margin: 0 0 6px;
	color: var(--pn-azul);
}

.pn-login-subtitulo {
	font-size: 14px;
	color: var(--pn-texto-suave);
	margin: 0 0 24px;
	line-height: 1.5;
}

.pn-login-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--pn-texto);
	margin-bottom: 6px;
}

.pn-login-dialog .ui-inputfield,
.pn-login-dialog input[type='text'],
.pn-login-dialog input[type='password'] {
	width: 100%;
	border: 1px solid var(--pn-borda) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 14px;
	font-family: var(--pn-fonte-texto);
	margin-bottom: 16px;
	background: var(--pn-bg) !important;
	box-sizing: border-box;
}

.pn-login-esqueci {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 18px;
	font-size: 13px;
	font-weight: 600;
}

a.pn-login-esqueci,
a.pn-login-esqueci:visited {
	color: var(--pn-azul) !important;
	text-decoration: none;
}

a.pn-login-esqueci:hover {
	color: var(--pn-azul-hover) !important;
	text-decoration: underline;
}

.pn-login-dialog .div-captcha {
	float: none;
	width: auto;
}

.pn-login-submit {
	display: block;
	clear: both;
	width: 100%;
	background: var(--pn-azul);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 13px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--pn-fonte-texto);
}

.pn-login-submit:hover {
	background: var(--pn-azul-hover);
}

/* LOGIN (página cheia, ex: /login.xhtml) — mesma cara do modal de login do header */
.pn-login-page-wrap {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 56px 32px 80px;
	display: flex;
	justify-content: center;
}

.pn-login-page {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 20px;
	padding: 40px;
	box-shadow: 0 30px 70px -20px rgba(0, 1, 78, 0.4);
}

.pn-login-page .pn-login-esqueci {
	justify-content: center;
	margin-top: 20px;
	margin-bottom: 0;
}

.pn-login-page .pn-login-subtitulo {
	margin-bottom: 32px;
}

.pn-login-page .div-captcha {
	margin-bottom: 28px;
}

.pn-login-page .pn-login-submit {
	width: 70%;
	display: block;
	margin: 0 auto;
}

.pn-login-page .ui-inputfield,
.pn-login-page input[type='text'],
.pn-login-page input[type='password'] {
	width: 100%;
	border: 1px solid var(--pn-borda) !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	font-size: 14px;
	font-family: var(--pn-fonte-texto);
	margin-bottom: 16px;
	background: var(--pn-bg) !important;
	box-sizing: border-box;
}

/* HERO */
.pn-hero {
	/* Mesma técnica de "furar" o container centralizado (.centro, 940px) usada em .pn-legislacao/#servicos,
	   pra essa seção ocupar a mesma largura do header (1240px), não só os 940px do .centro legado. */
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pn-hero-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 4px 32px 32px;
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	/* Áreas nomeadas (em vez de só 2 filhos lado a lado) pra poder reordenar no mobile
	   sem duplicar HTML: lá o carrossel sobe pra logo depois do título (ver breakpoint
	   860px) e a coluna "desc" some. Coluna da direita ("carrossel") ocupa as 3 linhas. */
	grid-template-areas:
		"topo carrossel"
		"desc carrossel"
		"destaque carrossel";
	column-gap: 64px;
	row-gap: 0;
	align-items: stretch;
}

.pn-hero-inner > * {
	/* Mesmo problema do .pn-footer-inner/.pn-legislacao-inner: sem isso, o lado com
	   mais conteúdo (min-width:auto padrão de grid item) estoura a coluna em telas estreitas. */
	min-width: 0;
}

.pn-hero-topo { grid-area: topo; }
.pn-hero-desc { grid-area: desc; }
.pn-hero-side { grid-area: carrossel; }
.pn-hero-destaque { grid-area: destaque; }

.pn-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--pn-azul-claro);
	color: var(--pn-azul);
	padding: 7px 14px;
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 22px;
}

.pn-hero h1 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 34px;
	line-height: 1.3;
	margin: 0 0 20px;
	color: var(--pn-azul);
}

.pn-hero p {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.76;
	color: var(--pn-texto-suave);
	max-width: 520px;
	margin: 0 0 22px;
}

.pn-hero-pills {
	display: flex;
	gap: 10px;
	margin-top: 24px;
	flex-wrap: nowrap;
}

.pn-hero-destaque {
	margin-top: 16px !important;
}

.pn-pill {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 135px;
	height: 110px;
	padding: 12px 8px;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-top: 4px solid transparent;
	border-radius: 14px;
	text-align: center;
	text-decoration: none;
	transition:
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.pn-pill:hover {
	box-shadow: 0 16px 32px -18px rgba(0, 1, 78, 0.35);
	transform: translateY(-2px);
}

.pn-pill-icon {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--pn-azul);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.pn-pill-icon i {
	color: #fff;
	font-size: 18px;
}

.pn-pill-texto {
	color: var(--pn-texto);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.pn-hero-side {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
	align-self: start;
}

/* DIVULGAÇÃO (hero) — banner no topo + texto embaixo. Padrão genérico (pn-divulgacao-*)
   reaproveitado por todas as telas nesse formato (WhatsApp, parcelamento, DTE, etc.). */
.pn-divulgacao-hero .pn-hero-inner {
	padding-top: 16px;
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
}

.pn-divulgacao-texto {
	display: flex;
	flex-direction: column;
}

.pn-divulgacao-texto h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 22px;
	color: var(--pn-azul);
	margin: 32px 0 14px 24px;
}

.pn-divulgacao-texto h2:first-child {
	margin-top: 0;
}

.pn-divulgacao-texto p {
	max-width: none;
	margin: 0 0 10px 24px;
}

.pn-divulgacao-texto ul {
	margin: 0 0 10px 24px;
	padding-left: 20px;
}

.pn-divulgacao-texto li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin-bottom: 4px;
}

.pn-hero strong,
.pn-dte-conteudo strong,
.pn-divulgacao-conteudo strong {
	color: var(--pn-azul);
	font-weight: 600;
}

.pn-divulgacao-hero .pn-eyebrow {
	font-size: 16px;
	margin-bottom: 20px;
}

.pn-divulgacao-foto-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	aspect-ratio: 4.3 / 1;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 50px -24px rgba(0, 1, 78, 0.3);
}

.pn-divulgacao-foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pn-divulgacao-voltar {
	display: inline-block;
	margin-top: 24px;
}

.pn-divulgacao-cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--pn-azul);
	color: #fff;
	padding: 13px 24px;
	border-radius: 10px;
	font-family: var(--pn-fonte-texto);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	margin-top: 28px;
}

a.pn-divulgacao-cta:hover {
	background: var(--pn-azul-hover);
}

.pn-divulgacao-cta i {
	font-size: 18px;
}

/* Título, link "ver todos" e botão CTA das páginas de divulgação (DES-IF, DESCAR,
   NFSA-e, REDESIM, CREDENCIAMENTO, CIB, Calendário Fiscal, WhatsApp, DTE,
   Parcelamento) usam sempre o mesmo padrão azul — sem cor própria por página — pra
   manter identidade visual única entre elas. As classes .pn-divulgacao-COR (usadas
   pra colorir a foto de fundo/botão do card na home) continuam existindo, só não
   sobrescrevem mais a cor do título/link aqui dentro. */

/* Botão sem link (DESCAR, REDESIM...) não finge ser clicável nem escurece no hover */
.pn-divulgacao-cta:not(a) {
	cursor: default;
}

/* DTE — mesmo padrão visual das outras duas (banner no topo, texto embaixo), sem CTA.
   Classes próprias (pn-dte-*) */
.pn-dte-hero .pn-hero-inner {
	padding-top: 16px;
	padding-bottom: 16px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
}

.pn-dte-texto {
	display: flex;
	flex-direction: column;
}

.pn-dte-hero .pn-eyebrow {
	font-size: 16px;
	margin-bottom: 20px;
}

.pn-dte-foto-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	aspect-ratio: 4.3 / 1;
	max-height: 20vh;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 50px -24px rgba(0, 1, 78, 0.3);
}

.pn-dte-foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fura o .centro (940px), igual #servicos/.pn-legislacao */
.pn-dte-conteudo {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pn-dte-conteudo-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 8px 32px 24px;
	text-align: left;
}

.pn-dte-conteudo-inner h2,
.pn-dte-conteudo-inner p,
.pn-dte-conteudo-inner ul {
	max-width: 760px;
}

.pn-dte-conteudo h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 22px;
	color: var(--pn-azul);
	margin: 40px 0 14px 24px;
}

.pn-dte-conteudo h2:first-child {
	margin-top: 0;
}

.pn-dte-conteudo p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin: 0 0 10px 24px;
}

.pn-dte-conteudo ul {
	margin: 0 0 10px 24px;
	padding-left: 20px;
}

.pn-dte-conteudo li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin-bottom: 4px;
}

/* Bloco de texto abaixo de um pn-divulgacao-hero — mesma técnica de "furar" o container
   e o mesmo padding lateral do .pn-hero-inner, pra alinhar com o hero de cima. */
.pn-divulgacao-conteudo {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.pn-divulgacao-conteudo-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 8px 32px 32px;
	text-align: left;
}

.pn-divulgacao-conteudo h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 22px;
	color: var(--pn-azul);
	margin: 32px 0 14px 24px;
}

.pn-divulgacao-conteudo h2:first-child {
	margin-top: 0;
}

.pn-divulgacao-conteudo h3 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 18px;
	color: var(--pn-azul);
	margin: 38px 0 10px 48px;
}

.pn-divulgacao-conteudo p {
	font-size: 15px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin: 0 0 10px 24px;
}

.pn-divulgacao-conteudo ul {
	margin: 0 0 10px 24px;
	padding-left: 20px;
}

.pn-divulgacao-conteudo li {
	font-size: 14px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin-bottom: 4px;
}

/* CARROSSEL DE BANNERS/AVISOS (hero) — implementação própria, sem lib externa */
.pn-banner-carrossel {
	position: relative;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 24px 60px -16px rgba(0, 1, 78, 0.45);
}

.pn-banner-slide {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}

.pn-banner-slide.pn-banner-slide-ativo {
	opacity: 1;
	visibility: visible;
}

.pn-banner-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	border: none;
	background: transparent;
	color: var(--pn-azul-vivo);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition:
		color 0.2s ease,
		transform 0.2s ease;
}

.pn-banner-nav:hover {
	color: #fff;
	transform: translateY(-50%) scale(1.1);
}

.pn-banner-nav-prev {
	left: 12px;
}

.pn-banner-nav-next {
	right: 12px;
}

.pn-banner-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.pn-banner-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	cursor: pointer;
}

.pn-banner-dot.pn-banner-dot-ativo {
	background: #fff;
}

/* Visual de divulgação (sem foto/arte real ainda) — usado no slide do carrossel e na página de destino */
.pn-divulgacao-visual {
	background: linear-gradient(135deg, var(--pn-azul-escuro), var(--pn-azul));
	border-radius: 16px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 24px;
	text-decoration: none;
	width: 100%;
	height: 100%;
}

.pn-divulgacao-visual i {
	font-size: 40px;
}

.pn-divulgacao-visual .pn-divulgacao-titulo {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 18px;
	color: #fff;
}

/* Compensa visualmente o espaço das bolinhas de navegação, senão o conteúdo parece subir */
.pn-banner-slide.pn-divulgacao-visual {
	padding-bottom: 44px;
}

/* Slides com foto de divulgação cobrindo o card inteiro + degradê escuro por baixo
   pra legibilidade do texto, ancorado no canto inferior esquerdo. */
.pn-banner-foto {
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--pn-azul-escuro);
	text-decoration: none;
	display: block;
}

.pn-banner-foto-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pn-banner-foto-img-contido {
	object-fit: contain;
}

.pn-banner-foto-tint {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: linear-gradient(
		0deg,
		rgba(0, 1, 78, 0.88) 0%,
		rgba(0, 1, 78, 0.35) 45%,
		rgba(0, 1, 78, 0) 75%
	);
}

.pn-banner-foto-texto {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 44px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.pn-banner-foto-subtitulo {
	color: #fff;
	font-style: italic;
	font-size: 14px;
}

.pn-banner-foto-titulo {
	color: #fff;
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
}

.pn-banner-foto-titulo-verde {
	color: var(--pn-verde);
}

/* SERVIÇOS */
.pn-section {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 24px 32px 80px;
}

.pn-eyebrow {
	font-family: var(--pn-fonte-eyebrow);
	font-size: 18px;
	font-weight: 700;
	color: var(--pn-eyebrow-cor);
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.5;
	margin-bottom: 8px;
}

#inicio .pn-eyebrow {
	margin-bottom: 32px;
}

.pn-hero-logo {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	margin-bottom: 40px;
}

.pn-section h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 32px;
	/* Sem isso herda o line-height:130% do body — 130% de 12px (o font-size do body,
	   não do h2), então ~15px de altura de linha pra um texto de 32px: quando quebra
	   pra 2 linhas no mobile elas ficam coladas/sobrepostas. .pn-hero h1 e .pn-legislacao
	   h2 já tinham essa correção; faltava aqui. */
	line-height: 1.3;
	margin: 0;
	color: var(--pn-azul);
}

#servicos h2 {
	color: var(--pn-verde);
	margin-bottom: 36px;
}

#servicos .pn-eyebrow {
	margin-bottom: 32px;
}

#servicos .pn-section-intro {
	color: var(--pn-texto-suave);
}

#servicos.pn-section {
	background-color: var(--pn-header-bg);
	transition: background-color 0.4s ease;
	/* Mesma técnica de "furar" o container centralizado (.centro, 940px) usada em .pn-legislacao,
	   pra esse fundo ocupar a largura toda da viewport. */
	max-width: 100vw;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
	overflow: hidden;
}

#servicos.pn-section:has(.pn-card-amarelo:hover) {
	background-color: color-mix(in srgb, var(--pn-amarelo) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-nfsae:hover) {
	background-color: color-mix(in srgb, var(--pn-azul-nfsae) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-limao:hover) {
	background-color: color-mix(in srgb, var(--pn-verde-limao) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-azul:hover) {
	background-color: color-mix(in srgb, var(--pn-azul) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-cinza:hover) {
	background-color: color-mix(in srgb, var(--pn-texto-fraco) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-verde:hover) {
	background-color: color-mix(in srgb, var(--pn-verde) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-amarelo2:hover) {
	background-color: color-mix(in srgb, var(--pn-amarelo) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-vermelho:hover) {
	background-color: color-mix(in srgb, var(--pn-vermelho) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-laranja:hover) {
	background-color: color-mix(in srgb, var(--pn-laranja) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-esmeralda:hover) {
	background-color: color-mix(in srgb, var(--pn-verde-esmeralda) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-roxo:hover) {
	background-color: color-mix(in srgb, var(--pn-roxo-escuro) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-azul-vivo:hover) {
	background-color: color-mix(in srgb, var(--pn-azul-vivo) 10%, var(--pn-header-bg));
}

#servicos.pn-section:has(.pn-card-celeste:hover) {
	background-color: color-mix(in srgb, var(--pn-azul-celeste) 10%, var(--pn-header-bg));
}

/* Brasão repetido bem transparente, só como textura de fundo */
#servicos.pn-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../imagens_castanhal/brasao_prefeitura.png') repeat;
	background-size: 90px auto;
	opacity: 0.06;
	pointer-events: none;
}

.pn-servicos-inner {
	position: relative;
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 32px;
}

.pn-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.pn-section-intro {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.76;
	color: var(--pn-eyebrow-cor);
	max-width: 640px;
	margin: 8px 0 24px;
}

.pn-ver-todos {
	font-size: 14px;
	font-weight: 600;
	color: var(--pn-azul);
	text-decoration: none;
	white-space: nowrap;
}

.pn-ver-todos:hover {
	color: var(--pn-azul-hover);
}

.pn-services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
	margin-top: 4px;
}

.pn-service-card {
	position: relative;
	display: block;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-top: 4px solid transparent;
	border-radius: 16px;
	padding: 26px;
	overflow: hidden;
	transition:
		background-color 0.35s ease,
		box-shadow 0.2s,
		transform 0.2s;
	text-decoration: none;
	color: inherit;
}

.pn-service-card:hover {
	box-shadow: 0 20px 40px -22px rgba(0, 1, 78, 0.35);
	transform: translateY(-2px);
}

.pn-service-card::after,
.pn-partner-card::after {
	content: '';
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 84px;
	height: 84px;
	background: url('../imagens_castanhal/brasao_prefeitura.png') no-repeat
		center / contain;
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.pn-service-card:hover::after,
.pn-partner-card:hover::after {
	opacity: 0.16;
}

.pn-service-icon,
.pn-service-titulo,
.pn-service-desc,
.pn-partner-icon,
.pn-partner-titulo,
.pn-partner-desc {
	position: relative;
	z-index: 1;
}

.pn-service-icon {
	width: 44px;
	height: 44px;
	border-radius: 15px;
	background: rgba(0, 1, 78, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}

.pn-service-icon img {
	max-width: 24px;
	max-height: 24px;
}

.pn-service-icon i {
	color: #fff;
	font-size: 20px;
}

.pn-service-titulo {
	font-size: 16px;
	font-weight: 600;
	color: var(--pn-texto);
	margin-bottom: 4px;
}

.pn-service-desc {
	font-size: 13px;
	color: var(--pn-texto-fraco);
	line-height: 1.5;
}

.pn-partners-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-top: 24px;
}

.pn-partners-grid.pn-servicos-paginado {
	display: block;
}

.pn-servicos-page {
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.pn-servicos-page-ativa {
	display: grid;
}

.pn-servicos-paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
}

.pn-servicos-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--pn-borda);
	background: #fff;
	color: var(--pn-azul);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.pn-servicos-nav:hover {
	background: var(--pn-azul);
	color: #fff;
}

.pn-servicos-dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pn-servicos-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--pn-borda);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pn-servicos-dot-ativo {
	background: var(--pn-azul);
}

@media (max-width: 720px) {
	.pn-partners-grid,
	.pn-servicos-page {
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	}

	/* Setas/bolinhas de página dos cards de Serviço: no desktop ficam abaixo do grid
	   (fazem sentido lá, o usuário já viu os 8 cards). No mobile, com só 4 cards por
	   página, a paginação vem ANTES pra ficar visível sem precisar rolar até o fim
	   dos cards pra descobrir que tem mais — via "order" (o HTML injeta a paginação
	   depois do grid, mas isso só reordena visualmente, sem duplicar nada). */
	.pn-servicos-inner {
		display: flex;
		flex-direction: column;
	}
	.pn-section-head {
		order: 0;
	}
	.pn-servicos-paginacao {
		order: 1;
		margin: 20px 0;
	}
	.pn-partners-grid {
		order: 2;
	}
}

.pn-partner-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-top: 4px solid transparent;
	border-radius: 16px;
	padding: 26px;
	min-height: 150px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition:
		background-color 0.35s ease,
		transform 0.25s ease,
		box-shadow 0.25s ease;
}

.pn-partner-card:hover {
	transform: scale(1.08);
	box-shadow: 0 24px 48px -20px rgba(0, 1, 78, 0.4);
	z-index: 2;
	position: relative;
}

.pn-partner-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: var(--pn-azul);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}

.pn-partner-icon i {
	color: #fff;
	font-size: 22px;
}

.pn-partner-titulo {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 17px;
	color: var(--pn-texto);
}

.pn-partner-desc {
	font-size: 13px;
	color: var(--pn-texto-fraco);
	margin-top: 6px;
}

.pn-card-verde {
	border-top-color: var(--pn-verde);
}
.pn-card-verde .pn-service-icon,
.pn-card-verde .pn-partner-icon {
	background: var(--pn-verde);
}
.pn-card-verde .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-limao {
	border-top-color: var(--pn-verde-limao);
}
.pn-card-limao .pn-service-icon,
.pn-card-limao .pn-partner-icon {
	background: var(--pn-verde-limao);
}

.pn-card-amarelo2 {
	border-top-color: var(--pn-amarelo);
}
.pn-card-amarelo2 .pn-service-icon,
.pn-card-amarelo2 .pn-partner-icon {
	background: var(--pn-amarelo);
}
.pn-card-amarelo2 .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}
.pn-card-vermelho {
	border-top-color: var(--pn-vermelho);
}
.pn-card-vermelho .pn-service-icon,
.pn-card-vermelho .pn-partner-icon {
	background: var(--pn-vermelho);
}
.pn-card-vermelho .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}
/* Logo própria (redesim-Logo.png) no lugar do badge — mesmo tratamento do DES-IF/DESCAR/NFSA-e. */
.pn-card-limao .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}
.pn-card-vinho {
	border-top-color: var(--pn-vinho);
}
.pn-card-vinho .pn-service-icon,
.pn-card-vinho .pn-partner-icon {
	background: var(--pn-vinho);
}

.pn-card-esmeralda {
	border-top-color: var(--pn-verde-esmeralda);
}
.pn-card-esmeralda .pn-service-icon,
.pn-card-esmeralda .pn-partner-icon {
	background: var(--pn-verde-esmeralda);
}
/* Logo própria (id-card.png) no lugar do badge — mesmo tratamento dos demais cards. */
.pn-card-esmeralda .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-roxo {
	border-top-color: var(--pn-roxo-escuro);
}
.pn-card-roxo .pn-service-icon,
.pn-card-roxo .pn-partner-icon,
.pn-card-roxo .pn-pill-icon {
	background: var(--pn-roxo-escuro);
}
/* Logo própria (sinter-logo.png) no lugar do badge — mesmo tratamento do DES-IF/DESCAR/NFSA-e/REDESIM. */
.pn-card-roxo .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}
.pn-card-azul-vivo {
	border-top-color: var(--pn-azul-vivo);
}
.pn-card-azul-vivo .pn-service-icon,
.pn-card-azul-vivo .pn-partner-icon,
.pn-card-azul-vivo .pn-pill-icon {
	background: var(--pn-azul-vivo);
}

.pn-card-laranja {
	border-top-color: var(--pn-laranja);
}
.pn-card-laranja .pn-service-icon,
.pn-card-laranja .pn-partner-icon,
.pn-card-laranja .pn-pill-icon {
	background: var(--pn-laranja);
}
.pn-card-laranja .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-amarelo {
	border-top-color: var(--pn-amarelo);
}
.pn-card-amarelo .pn-service-icon,
.pn-card-amarelo .pn-partner-icon {
	background: var(--pn-amarelo);
}

/* Teste visual (só card DES-IF): logo própria (des-if.png, cores originais) no lugar
   do badge quadrado — sem fundo/moldura, só a logo mesmo — e ícone de banco em
   amarelo escuro no lugar do brasão do hover. */
.pn-card-amarelo .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-partner-icon img {
	width: 52px;
	height: 52px;
	object-fit: contain;
}

/* Mesmo padrão do hover em todos os cards de Serviços: ícone atual do card (o
   mesmo do badge), maior, metade pra fora da borda direita — só aparece no hover.
   overflow:hidden do .pn-partner-card corta a metade que sai do card. */
.pn-card-amarelo.pn-partner-card::after,
.pn-card-cinza.pn-partner-card::after,
.pn-card-limao.pn-partner-card::after,
.pn-card-esmeralda.pn-partner-card::after,
.pn-card-roxo.pn-partner-card::after,
.pn-card-azul-vivo.pn-partner-card::after,
.pn-card-celeste.pn-partner-card::after,
.pn-card-nfsae.pn-partner-card::after,
.pn-card-azul.pn-partner-card::after,
.pn-card-verde.pn-partner-card::after,
.pn-card-amarelo2.pn-partner-card::after,
.pn-card-vermelho.pn-partner-card::after,
.pn-card-laranja.pn-partner-card::after {
	background: none;
	width: 180px;
	height: 180px;
	right: -90px;
	bottom: auto;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: FontAwesome;
	font-size: 150px;
}

.pn-card-amarelo.pn-partner-card::after {
	content: "\f19c";
	color: #fa9600;
}

.pn-card-cinza.pn-partner-card::after {
	content: "\f1ad";
	color: var(--pn-texto-fraco);
}

.pn-card-nfsae.pn-partner-card::after {
	content: "\f15c";
	color: var(--pn-azul-nfsae);
}

.pn-card-limao.pn-partner-card::after {
	content: "\f0b1";
	color: var(--pn-verde-limao);
}

.pn-card-azul.pn-partner-card::after {
	content: "\f015";
	color: var(--pn-azul);
}

.pn-card-verde.pn-partner-card::after {
	content: "\f0fa";
	color: var(--pn-verde);
}

.pn-card-amarelo2.pn-partner-card::after {
	content: "\f021";
	color: var(--pn-amarelo);
}

.pn-card-vermelho.pn-partner-card::after {
	content: "\f002";
	color: var(--pn-vermelho);
}

.pn-card-laranja.pn-partner-card::after {
	content: "\f0a3";
	color: var(--pn-laranja);
}

.pn-card-esmeralda.pn-partner-card::after {
	content: "\f2c3";
	color: var(--pn-verde-esmeralda);
}

.pn-card-roxo.pn-partner-card::after {
	content: "\f187";
	color: var(--pn-roxo-escuro);
}

.pn-card-azul-vivo.pn-partner-card::after {
	content: "\f073";
	color: var(--pn-azul-vivo);
}

.pn-card-celeste.pn-partner-card::after {
	content: "\f022";
	color: var(--pn-azul-celeste);
}

.pn-card-azul {
	border-top-color: var(--pn-azul);
}
.pn-card-azul .pn-service-icon,
.pn-card-azul .pn-partner-icon {
	background: var(--pn-azul);
}
.pn-card-azul .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-nfsae {
	border-top-color: var(--pn-azul-nfsae);
}
.pn-card-nfsae .pn-service-icon,
.pn-card-nfsae .pn-partner-icon {
	background: var(--pn-azul-nfsae);
}
/* Logo própria (nfsae-logo.png) no lugar do badge — mesmo tratamento do DES-IF/DESCAR. */
.pn-card-nfsae .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-cinza {
	border-top-color: var(--pn-texto-fraco);
}
.pn-card-cinza .pn-service-icon,
.pn-card-cinza .pn-partner-icon {
	background: var(--pn-texto-fraco);
}
.pn-card-cinza .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

.pn-card-celeste {
	border-top-color: var(--pn-azul-celeste);
}
.pn-card-celeste .pn-service-icon,
.pn-card-celeste .pn-partner-icon {
	background: var(--pn-azul-celeste);
}
/* Logo própria (CA-logo.png) no lugar do badge — mesmo tratamento do DES-IF. */
.pn-card-celeste .pn-partner-icon {
	background: none;
	width: auto;
	height: auto;
}

/* Cards sem link (div, não <a>) não fingem ser clicáveis */
.pn-partner-card:not(a),
.pn-service-card:not(a) {
	cursor: default;
}

.pn-partner-card:not(a):hover,
.pn-service-card:not(a):hover {
	transform: none;
	box-shadow: none;
}

.pn-card-verde:hover {
	background-color: color-mix(in srgb, var(--pn-verde) 12%, white);
}
.pn-card-limao:hover {
	background-color: color-mix(in srgb, var(--pn-verde-limao) 12%, white);
}
.pn-card-azul:hover {
	background-color: color-mix(in srgb, var(--pn-azul) 12%, white);
}
.pn-card-cinza:hover {
	background-color: color-mix(in srgb, var(--pn-texto-fraco) 12%, white);
}
.pn-card-amarelo2:hover {
	background-color: color-mix(in srgb, var(--pn-amarelo) 12%, white);
}
.pn-card-vinho:hover {
	background-color: color-mix(in srgb, var(--pn-vinho) 12%, white);
}
.pn-card-esmeralda:hover {
	background-color: color-mix(in srgb, var(--pn-verde-esmeralda) 12%, white);
}
.pn-card-roxo:hover {
	background-color: color-mix(in srgb, var(--pn-roxo-escuro) 12%, white);
}
.pn-card-azul-vivo:hover {
	background-color: color-mix(in srgb, var(--pn-azul-vivo) 12%, white);
}
.pn-card-laranja:hover {
	background-color: color-mix(in srgb, var(--pn-laranja) 12%, white);
}
.pn-card-amarelo:hover {
	background-color: color-mix(in srgb, var(--pn-amarelo) 12%, white);
}
.pn-card-nfsae:hover {
	background-color: color-mix(in srgb, var(--pn-azul-nfsae) 12%, white);
}
.pn-card-celeste:hover {
	background-color: color-mix(in srgb, var(--pn-azul-celeste) 12%, white);
}

/* PARCEIROS / LINKS EXTERNOS (carrossel grande) — reusa .pn-banner-carrossel/.pn-banner-slide
   do hero, só que "fura" o container centralizado (mesma técnica do #servicos/.pn-legislacao)
   pra ocupar a largura toda da viewport, com o carrossel preenchendo essa largura inteira. */
#parceiros.pn-section {
	max-width: 100vw;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
}

.pn-parceiros-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 32px;
}

#parceiros h2 {
	margin-bottom: 36px;
}

#parceiros .pn-eyebrow {
	margin-bottom: 32px;
}

#parceiros .pn-section-intro {
	color: var(--pn-texto-suave);
}

#parceiros.pn-section {
	transition: background-color 0.4s ease;
}

#parceiros.pn-section:has(.pn-card-verde:hover) {
	background-color: color-mix(in srgb, var(--pn-verde) 8%, white);
}

#parceiros.pn-section:has(.pn-card-vinho:hover) {
	background-color: color-mix(in srgb, var(--pn-vinho) 8%, white);
}

#parceiros.pn-section:has(.pn-card-roxo:hover) {
	background-color: color-mix(in srgb, var(--pn-roxo-escuro) 8%, white);
}

#parceiros.pn-section:has(.pn-card-azul-vivo:hover) {
	background-color: color-mix(in srgb, var(--pn-azul-vivo) 8%, white);
}

#parceiros.pn-section:has(.pn-card-laranja:hover) {
	background-color: color-mix(in srgb, var(--pn-laranja) 8%, white);
}

#parceiros.pn-section:has(.pn-card-amarelo:hover) {
	background-color: color-mix(in srgb, var(--pn-amarelo) 8%, white);
}

/* LEGISLAÇÃO */
.pn-legislacao {
	background: #f4f4f7;
	padding: 32px 32px 56px;
	/* A página usa um container centralizado de largura fixa (.centro, 940px) por baixo;
	   isso "quebra" essa seção pra fora dele pra ocupar a largura toda da viewport. */
	width: 100vw;
	box-sizing: border-box;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	overflow: hidden;
}

/* Brasão repetido como marca d'água — mesma técnica usada no #servicos/#tutoriais */
.pn-legislacao::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../imagens_castanhal/brasao_prefeitura.png') repeat;
	background-size: 110px auto;
	opacity: 0.06;
	pointer-events: none;
}

.pn-legislacao-inner {
	position: relative;
	max-width: var(--pn-container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 56px;
}

.pn-legislacao-inner > * {
	/* Mesmo problema do .pn-footer-inner: sem isso, a coluna da lista de leis
	   (min-width:auto padrão de grid item) "estoura" a coluna 1fr em telas estreitas. */
	min-width: 0;
}

.pn-legislacao-eyebrow {
	font-family: var(--pn-fonte-eyebrow);
	font-size: 18px;
	font-weight: 700;
	color: var(--pn-eyebrow-cor);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 32px;
}

.pn-legislacao h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.3;
	margin: 0 0 36px;
	color: var(--pn-verde);
}

.pn-legislacao p {
	font-weight: 400;
	font-size: 17px;
	line-height: 1.76;
	color: var(--pn-texto-suave);
	margin: 8px 0 24px;
	max-width: 420px;
}

.pn-legislacao-busca {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 100px;
	padding: 6px 6px 6px 18px;
	margin-bottom: 20px;
	max-width: 420px;
	transition: border-color 0.2s ease;
}

.pn-legislacao-busca:hover {
	border-color: var(--pn-azul);
}

.pn-legislacao-busca-wrap {
	position: relative;
	max-width: 420px;
}

.pn-legislacao-busca .pn-legislacao-busca-input {
	flex: 1;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	background: transparent !important;
	background-color: transparent !important;
	padding: 8px 0;
	font-size: 14px !important;
	font-family: var(--pn-fonte-texto);
	color: var(--pn-texto) !important;
	outline: none;
	transition: color 0.2s ease;
}

.pn-legislacao-busca:hover .pn-legislacao-busca-input::placeholder {
	color: var(--pn-azul);
}

.pn-legislacao-busca-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: #8b849b;
	font-size: 14px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.pn-legislacao-busca:hover .pn-legislacao-busca-btn {
	color: var(--pn-azul);
}

.pn-legislacao-busca-sugestoes {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 12px;
	box-shadow: 0 12px 30px -12px rgba(0, 1, 78, 0.25);
	padding: 6px;
	max-height: 260px;
	overflow-y: auto;
}

.pn-legislacao-busca-sugestoes.pn-visivel {
	display: block;
}

.pn-legislacao-busca-item {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	text-decoration: none;
}

.pn-legislacao-busca-item:hover {
	background: color-mix(in srgb, var(--pn-azul) 8%, white);
}

.pn-legislacao-busca-item-tag {
	font-size: 11px;
	font-weight: 700;
	color: var(--pn-azul);
	text-transform: uppercase;
	margin-bottom: 2px;
}

.pn-legislacao-busca-item-texto {
	font-size: 12px;
	color: var(--pn-texto-fraco);
}

.pn-legislacao .pn-ver-todos {
	display: inline-block;
	color: var(--pn-azul);
	margin-top: 4px;
}

.pn-legislacao .pn-ver-todos:hover {
	color: var(--pn-azul-hover);
}

.pn-law-item {
	display: grid;
	grid-template-columns: 180px 1fr auto;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-left: 4px solid transparent;
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 14px;
	text-decoration: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
	transition: box-shadow 0.15s, background-color 0.15s;
}

.pn-law-item:hover {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pn-law-item.pn-card-azul { border-left-color: var(--pn-azul); }
.pn-law-item.pn-card-azul .pn-law-tag { background: var(--pn-azul); }
.pn-law-item.pn-card-azul:hover { background-color: color-mix(in srgb, var(--pn-azul) 7%, white); }

#legislacao.pn-legislacao:has(.pn-card-azul:hover) {
	background-color: color-mix(in srgb, var(--pn-azul) 5%, #f4f4f7);
}

.pn-law-tag {
	justify-self: start;
	align-self: start;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #fff;
	padding: 5px 8px;
	border-radius: 6px;
	line-height: 1.4;
	white-space: nowrap;
}

.pn-law-texto {
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pn-azul);
	text-transform: lowercase;
}

.pn-law-texto::first-letter {
	text-transform: uppercase;
}

.pn-law-data {
	font-size: 10px;
	color: #77728a;
	white-space: nowrap;
}

/* TUTORIAIS (placeholder estático) — card grande em destaque à esquerda (vídeo + legenda escura)
   e, à direita, o texto de introdução seguido de dois cards menores lado a lado. */
/* Mesma técnica de "furar" o container centralizado (.centro, 940px) usada em #servicos/#parceiros/
   .pn-legislacao — sem isso, essa seção fica presa aos 940px do .centro legado, mais estreita que
   as demais (que já respiram até 1240px). */
#tutoriais.pn-section {
	max-width: 100vw;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding: 0;
	background: #fff;
	overflow: hidden;
}

.pn-tutoriais-inner {
	position: relative;
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 56px;
	align-items: stretch;
}

.pn-tutoriais-inner > * {
	/* Mesmo problema do .pn-footer-inner/.pn-legislacao-inner/.pn-hero-inner. */
	min-width: 0;
}

.pn-tutoriais-lista {
	display: flex;
	flex-direction: column;
}

.pn-tutoriais-head {
	margin-bottom: 32px;
}

.pn-tutoriais-head h2 {
	line-height: 1.3;
}

.pn-tutoriais-head p {
	font-weight: 400;
	font-size: 17px;
	color: var(--pn-texto-fraco);
	line-height: 1.76;
	margin: 8px 0 24px;
}

.pn-tutoriais-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.pn-tutorial-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-top: 4px solid var(--pn-azul);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 12px 30px -18px rgba(0, 1, 78, 0.3);
	transition:
		transform 0.15s,
		box-shadow 0.15s;
}

.pn-tutorial-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 36px -16px rgba(0, 1, 78, 0.4);
}

.pn-tutorial-featured {
	height: 100%;
}

.pn-tutorial-thumb {
	position: relative;
	height: 130px;
	background: linear-gradient(135deg, var(--pn-azul-vivo), var(--pn-azul));
	display: flex;
	align-items: center;
	justify-content: center;
}

.pn-tutorial-thumb-featured {
	flex: 1;
	min-height: 240px;
}

.pn-tutorial-play {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	transition: background 0.15s;
}

.pn-tutorial-card:hover .pn-tutorial-play {
	background: var(--pn-azul);
}

.pn-tutorial-play-sm {
	width: 42px;
	height: 42px;
	font-size: 15px;
}

.pn-tutorial-body {
	background: #fff;
	padding: 18px 20px 22px;
}

.pn-tutorial-featured .pn-tutorial-body {
	padding: 24px 26px 28px;
}

.pn-tutorial-tag {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pn-azul);
	margin-bottom: 10px;
}

.pn-tutorial-titulo {
	font-family: var(--pn-fonte-titulo);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pn-texto);
	margin-bottom: 6px;
}

.pn-tutorial-featured .pn-tutorial-titulo {
	font-size: 21px;
}

.pn-tutorial-desc {
	font-size: 13px;
	color: var(--pn-texto-fraco);
	line-height: 1.55;
}

/* FOOTER (chrome do site, aplicado em todas as páginas de Castanhal) */
.pn-footer {
	position: relative;
	background: var(--pn-header-bg);
	border-top: 1px solid var(--pn-roxo-borda);
	padding: 24px 32px 0;
	overflow: hidden;
}

.pn-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('../banner-header-recortado.png') repeat-x bottom left;
	background-size: auto 100%;
	opacity: 0.18;
	pointer-events: none;
}

.pn-footer-inner {
	position: relative;
	max-width: var(--pn-container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.8fr 1fr 1fr 1fr 1.1fr;
	gap: 32px;
}

.pn-footer-inner > * {
	/* Sem isso, um item com texto/link longo não encolhe (min-width:auto padrão de
	   grid item) e "estoura" a coluna 1fr pra fora do container em telas estreitas. */
	min-width: 0;
}

.pn-footer-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	margin-bottom: 12px;
}

.pn-footer-brand img {
	height: 76px;
	width: auto;
}

.pn-footer-brand-eyebrow {
	font-family: var(--pn-fonte-texto);
	font-weight: 700;
	font-size: 13px;
	color: var(--pn-azul);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.pn-footer-brand-nome {
	font-family: var(--pn-fonte-eyebrow);
	font-weight: 700;
	font-size: 34px;
	color: var(--pn-azul);
	line-height: 1.1;
}

.pn-footer-mini-copyright {
	font-size: 11px;
	color: var(--pn-texto-fraco);
	line-height: 1.5;
	white-space: nowrap;
}

.pn-footer-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pn-azul);
	margin-bottom: 14px;
}

.pn-footer-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pn-footer-links a {
	font-size: 13px;
	color: var(--pn-texto-suave);
	text-decoration: none;
}

.pn-footer-links a:hover {
	color: var(--pn-azul);
}

.pn-footer-contato {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pn-footer-contato-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	color: var(--pn-texto-suave);
	line-height: 1.5;
}

.pn-footer-contato-item i {
	color: var(--pn-azul);
	margin-top: 2px;
}

.pn-footer-copyright {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	margin-top: 14px;
	background: #001228;
	font-size: 12px;
	color: #868ca0;
}

.pn-footer-copyright .rodape-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 8px 32px;
	box-sizing: border-box;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.pn-footer-copyright .rodape-inner-left,
.pn-footer-copyright .rodape-inner-right {
	float: none;
	line-height: normal;
}

/* HERO da página de IPTU — banner + card de busca flutuante, no estilo "emissão de boleto".
   Coluna 1 em 1fr (não mais 700px fixo): quando um bloco de resultado ocupa as duas
   colunas (grid-column:1/-1, ex: #opImpressaoGuiaIptu), ele precisa alcançar a borda
   real do container (1240px, igual ao header/footer) em vez de ficar limitado à soma
   de duas trilhas fixas com sobra de espaço morto. */
.pn-iptu-hero-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	justify-content: start;
	gap: 28px;
	align-items: start;
	margin-bottom: 28px;
}

.pn-iptu-hero-left {
	grid-column: 1;
	background: linear-gradient(135deg, var(--pn-azul-escuro), var(--pn-azul));
	background-image:
		repeating-linear-gradient(
			115deg,
			rgba(255, 255, 255, 0.06) 0px,
			rgba(255, 255, 255, 0.06) 2px,
			transparent 2px,
			transparent 40px
		),
		linear-gradient(135deg, var(--pn-azul-escuro), var(--pn-azul));
	border-radius: 20px;
	padding: 36px 36px 30px;
	color: #fff;
	overflow: hidden;
}

.pn-iptu-hero-left h2 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 600;
	font-size: 30px;
	margin: 0 0 8px;
	color: #fff;
}

.pn-iptu-hero-left p {
	font-size: 15px;
	color: #d6ddf0;
	margin: 0 0 26px;
}

.pn-iptu-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
}

.pn-iptu-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 14px;
	padding: 16px 10px;
	text-decoration: none;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}

.pn-iptu-tile:hover {
	background: rgba(255, 255, 255, 0.2);
}

.pn-iptu-tile-icon {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.18);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pn-iptu-intro-left {
	grid-column: 1;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 20px;
	padding: 30px 32px;
}

.pn-iptu-intro-left p {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin: 0 0 10px;
}

.pn-iptu-intro-left p:last-child {
	margin-bottom: 0;
}

.pn-iptu-intro-left strong {
	font-size: 14px;
}

.pn-iptu-search-card {
	position: relative;
	grid-column: 2;
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 20px;
	padding: 26px 24px;
	box-shadow: 0 20px 50px -24px rgba(0, 1, 78, 0.3);
}

.pn-iptu-search-card h3 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.35;
	margin: 0 0 8px;
	color: var(--pn-azul);
}

.pn-iptu-search-card .pn-iptu-search-sub {
	font-size: 13px;
	color: var(--pn-texto-fraco);
	margin: 0 0 20px;
}

.pn-iptu-search-card .pn-search-fields {
	max-width: none;
}

/* box-sizing:border-box em tudo dentro do card — impede que padding/borda somem
   além de qualquer width:100% e vazem do bloco, não importa o componente PF usado. */
.pn-iptu-search-card,
.pn-iptu-search-card * {
	box-sizing: border-box;
}

.pn-iptu-search-card .ui-inputfield,
.pn-iptu-search-card .ui-selectonemenu,
.pn-iptu-search-card .ui-panelgrid,
.pn-iptu-search-card table {
	width: 100% !important;
	max-width: 100% !important;
}

.pn-iptu-search-card table:has(> tbody > tr > td > .ui-button) {
	width: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.pn-iptu-search-card table:has(> tbody > tr > td > .ui-button) tbody,
.pn-iptu-search-card table:has(> tbody > tr > td > .ui-button) tr {
	display: contents;
}

.pn-iptu-search-card table:has(> tbody > tr > td > .ui-button) td {
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}

/* Campos com máscara (CPF/CNPJ, CEP, telefone...) têm tamanho fixo conhecido —
   não faz sentido esticar até a borda do card. */
.pn-iptu-search-card .ui-inputmask {
	width: auto !important;
	max-width: 220px !important;
}

/* prefeitura-base-componentes/pf15-datepicker-panel.css tem uma regra global de botão
   com cadeia de :not() (especificidade proposital bem alta) — preciso repetir o mesmo
   seletor com o escopo do card na frente pra realmente ganhar. */
.pn-iptu-search-card .ui-button.ui-button-text-icon-left {
	padding: 6px 14px !important;
	min-height: 0 !important;
	border-radius: 6px !important;
}

.pn-iptu-search-card .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only):not(.ui-wizard-nav-back):not(.ui-wizard-nav-next) {
	gap: 10px !important;
}

.pn-iptu-search-card .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only):not(.ui-wizard-nav-back):not(.ui-wizard-nav-next) .ui-button-text {
	padding: 0 !important;
	line-height: 1.2 !important;
	font-size: 12px !important;
}

.pn-iptu-search-card .ui-button-icon-left {
	position: static !important;
	margin: 0 !important;
}

/* .pn-tema-azul-grid é width:auto!important por padrão (compacta forms label+input+botão). */
.pn-iptu-search-card .pn-tema-azul-grid {
	width: 100% !important;
}

/* panelGrid columns="2" (rótulo | campo lado a lado) dentro do card vira empilhado
   (rótulo em cima, campo embaixo), igual às demais telas do card — evita que rótulos
   longos + campos com máscara (tamanho fixo via atributo size do HTML) estourem a
   largura do card tentando caber lado a lado. Não afeta a linha de botões, que já
   tem sua própria regra :has(.ui-button) acima. */
.pn-iptu-search-card .pn-tema-azul-grid:not(:has(.ui-button)) tr {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.pn-iptu-search-card .pn-tema-azul-grid:not(:has(.ui-button)) td {
	display: block;
	width: 100% !important;
	padding: 0 0 6px !important;
	white-space: normal !important;
}

/* Campo/combo dentro do pn-tema-azul-grid não deve esticar até a borda do card em
   telas largas — mesmo limite já usado manualmente em Documentos Requeridos
   Protocolo, agora padronizado pra todo campo que usa essa classe. */
.pn-iptu-search-card .pn-tema-azul-grid .ui-inputfield,
.pn-iptu-search-card .pn-tema-azul-grid .ui-selectonemenu {
	max-width: 500px !important;
}

/* #opImpressaoGuiaIptu não bate no elemento real: h:form sem id explícito faz o JSF
   prefixar o id do outputPanel (ex: "j_idt37:opImpressaoGuiaIptu"). data-testid é um
   passthrough attribute, não é prefixado pelo naming container — seletor estável. */
[data-testid="guia-iptu-resultado"] {
	grid-column: 1 / -1;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* Card de resultado sim/não (ex: Consulta de Protesto) */
.pn-resultado-protesto {
	border-radius: 16px;
	padding: 20px 24px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 20px;
}

.pn-resultado-protesto h4 {
	margin: 0 0 6px;
	font-size: 16px;
	font-family: var(--pn-fonte-titulo);
}

.pn-resultado-protesto p {
	margin: 0;
	font-size: 14px;
	color: var(--pn-texto-suave);
}

.pn-resultado-protesto.pn-resultado-ok {
	background: #eafaf0;
	border: 1px solid #b7e4c7;
	color: var(--pn-verde);
}

.pn-resultado-protesto.pn-resultado-ok h4 {
	color: var(--pn-verde);
}

.pn-resultado-protesto.pn-resultado-alerta {
	background: #fdeeee;
	border: 1px solid #f3c1c1;
	color: #b42318;
}

.pn-resultado-protesto.pn-resultado-alerta h4 {
	color: #b42318;
}

/* Sem coluna esquerda (usuário já logado como operador): card de busca ocupa a largura toda, centralizado */
.pn-iptu-hero-form:not(:has(.pn-iptu-hero-left)):not(:has(.pn-iptu-intro-left)) {
	grid-template-columns: 1fr;
}

.pn-iptu-hero-form:not(:has(.pn-iptu-hero-left)):not(:has(.pn-iptu-intro-left)) .pn-iptu-search-card {
	grid-column: 1;
	max-width: 480px;
}

@media (max-width: 900px) {
	.pn-iptu-hero-form {
		grid-template-columns: 1fr;
	}
	.pn-iptu-search-card,
	.pn-iptu-hero-left,
	.pn-iptu-intro-left {
		grid-column: 1;
	}
}

/* Aba "Pendências de Débitos" / "Pendências de Declaração PGDAS-D" abaixo do formulário de
   emissão de certidões. Reveste o p:tabView (que por padrão herda o visual azul-marinho
   legado do pf15-compat.css) com o mesmo cartão branco/borda suave/sombra do restante do
   "portal novo", em vez de criar outro padrão visual. */
.pn-tabs-pendencias {
	margin-bottom: 28px;
}

.pn-tabs-pendencias .pn-tabs.ui-tabs {
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 20px;
	box-shadow: 0 20px 50px -24px rgba(0, 1, 78, 0.3);
	padding: 0;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-nav {
	background: var(--pn-bg) !important;
	border: none !important;
	border-bottom: 1px solid var(--pn-borda) !important;
	border-radius: 20px 20px 0 0 !important;
	padding: 10px 10px 0 !important;
	margin: 0 !important;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li {
	background: transparent !important;
	border: none !important;
	border-radius: 12px 12px 0 0 !important;
	margin: 0 4px 0 0 !important;
	top: 0 !important;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li a {
	font-family: var(--pn-fonte-titulo);
	font-weight: 600;
	font-size: 13px;
	color: var(--pn-texto-fraco) !important;
	padding: 12px 18px !important;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li.ui-tabs-selected,
.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li.ui-state-active {
	background: #fff !important;
	border: 1px solid var(--pn-borda) !important;
	border-bottom-color: #fff !important;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li.ui-tabs-selected a,
.pn-tabs-pendencias .pn-tabs .ui-tabs-nav li.ui-state-active a {
	color: var(--pn-azul) !important;
}

.pn-tabs-pendencias .pn-tabs .ui-tabs-panel {
	background: #fff !important;
	border: none !important;
	border-radius: 0 0 20px 20px !important;
	padding: 22px 24px !important;
}

.pn-debito-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.pn-debito-chip {
	display: inline-flex;
	align-items: center;
	background: var(--pn-azul-claro);
	color: var(--pn-azul);
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
	font-size: 12px;
	padding: 8px 14px;
	border-radius: 20px;
	border: 1px solid var(--pn-borda);
}

/* PÁGINAS DE SERVIÇO (formulários) — usado em fm_impressao_guia_iptu e futuras telas.
   Fura o .centro (940px) igual ao resto do site, pra alinhar com os 1240px do header. */
.pn-form-page {
	width: 100vw;
	max-width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	box-sizing: border-box;
	padding-top: 40px;
	padding-bottom: 80px;
	padding-left: max(32px, calc((100vw - var(--pn-container-max)) / 2 + 32px));
	padding-right: max(32px, calc((100vw - var(--pn-container-max)) / 2 + 32px));
}

.centroRestrito-inner .pn-form-page {
	width: auto;
	max-width: none;
	position: static;
	left: auto;
	right: auto;
	margin-left: 0;
	margin-right: 0;
	padding: 10px 0;
}

.centroRestrito-inner .pn-iptu-hero-form {
	display: block;
}

.centroRestrito-inner .pn-iptu-intro-left {
	display: none;
}

/* Precisa vencer .pn-iptu-hero-form:not(:has(...)):not(:has(...)) .pn-iptu-search-card
   (max-width:480px), que também bate aqui pois páginas restritas não têm .pn-iptu-intro-left. */
.centroRestrito-inner .pn-iptu-search-card {
	max-width: none !important;
}

.pn-form-header {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 8px;
}

/* CREDENCIAMENTO EMPRESA — reskin visual do roxo legado (--castanhal) pro azul do
   novo portal, sem mexer na estrutura/campos do wizard. */
#formCredenciamentoEmpresa .ui-panel.ui-widget {
	border-radius: 10px !important;
	border-color: var(--pn-borda) !important;
	overflow: hidden;
	box-shadow: 0 8px 24px -16px rgba(0, 1, 78, 0.25);
	margin-bottom: 16px;
}

#formCredenciamentoEmpresa .ui-panel .ui-panel-titlebar,
#formCredenciamentoEmpresa .ui-panel .ui-panel-titlebar.ui-widget-header {
	background: var(--pn-azul) !important;
	border-radius: 9px 9px 0 0 !important;
}

#formCredenciamentoEmpresa .ui-wizard-step-title.ui-state-highlight,
#formCredenciamentoEmpresa .ui-wizard-step-title.ui-state-active {
	background: var(--pn-azul) !important;
	color: #fff !important;
}

#formCredenciamentoEmpresa .ui-wizard-nav-back,
#formCredenciamentoEmpresa .ui-wizard-nav-next,
#formCredenciamentoEmpresa .btn-nota,
#formCredenciamentoEmpresa .ui-button {
	background: var(--pn-azul) !important;
	border-color: var(--pn-azul) !important;
	color: #fff !important;
	border-radius: 8px !important;
}

#formCredenciamentoEmpresa .ui-wizard-nav-back:hover,
#formCredenciamentoEmpresa .ui-wizard-nav-next:hover,
#formCredenciamentoEmpresa .btn-nota:hover,
#formCredenciamentoEmpresa .ui-button:hover {
	background: var(--pn-azul-hover) !important;
	border-color: var(--pn-azul-hover) !important;
}

.pn-form-icon {
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: rgba(0, 1, 78, 0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex-shrink: 0;
}

.pn-form-header h1 {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 26px;
	margin: 0;
	color: var(--pn-azul);
}

.pn-form-intro {
	background: #fff;
	border: 1px solid var(--pn-borda);
	border-radius: 16px;
	padding: 22px 26px;
	margin: 22px 0 28px;
}

.pn-form-intro p {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pn-texto-suave);
	margin: 0 0 8px;
}

.pn-form-intro p:last-child {
	margin-bottom: 0;
}

/* Campos de busca empilhados (ex: Sequencial / Inscrição Imobiliária) */
.pn-search-fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 170px;
	margin-bottom: 16px;
}

.pn-search-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pn-search-field .ui-outputlabel,
.pn-search-field label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pn-texto);
}

/* Fieldset (p:fieldset) */
.pn-fieldset.ui-fieldset {
	background: #fff;
	border: 1px solid var(--pn-borda) !important;
	border-radius: 16px !important;
	padding: 4px 22px 22px !important;
	margin-bottom: 20px;
}

.pn-fieldset.ui-fieldset .ui-fieldset-legend {
	background: var(--pn-azul-claro) !important;
	border: none !important;
	color: var(--pn-azul-escuro) !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.02em;
	border-radius: 100px !important;
	padding: 6px 16px !important;
}

/* Botões (p:commandButton) */
.pn-btn-primary.ui-button {
	background: var(--pn-azul) !important;
	border-color: var(--pn-azul) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
	padding: 10px 20px !important;
}

.pn-btn-primary.ui-button:hover {
	background: var(--pn-azul-hover) !important;
	border-color: var(--pn-azul-hover) !important;
}

.pn-btn-secondary.ui-button {
	background: #fff !important;
	border-color: var(--pn-borda) !important;
	color: var(--pn-azul-escuro) !important;
	border-radius: 10px !important;
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
}

.pn-anexo-dialog.ui-dialog {
	border-radius: 16px;
	overflow: hidden;
	border: none;
	box-shadow: 0 30px 60px -20px rgba(23, 19, 32, 0.5);
}

.pn-anexo-dialog .ui-dialog-content {
	padding: 24px;
}

.pn-anexo-dialog .ui-fileupload-choose.ui-button {
	border-radius: 10px !important;
	padding: 10px 20px !important;
}

/* Campos (p:inputText, p:inputMask, p:spinner, p:selectOneMenu) */
.pn-input.ui-inputfield,
.pn-input .ui-inputfield {
	border: 1px solid var(--pn-borda) !important;
	border-radius: 10px !important;
	padding: 10px 12px !important;
	font-family: var(--pn-fonte-texto);
	background: var(--pn-bg) !important;
}

/* Grades de campo (h:panelGrid, renderiza uma <table> simples) */
table.pn-field-grid {
	border: none !important;
	border-collapse: collapse;
	width: 100%;
}

table.pn-field-grid td {
	border: none !important;
	padding: 8px 10px 8px 0 !important;
	vertical-align: middle;
	font-family: var(--pn-fonte-texto);
	font-size: 14px;
}

table.pn-field-grid .ui-outputlabel,
table.pn-field-grid label {
	font-size: 13px;
	font-weight: 600;
	color: var(--pn-texto);
	display: block;
	margin-bottom: 6px;
}

table.pn-field-grid input[readonly] {
	background: var(--pn-bg) !important;
	border: 1px solid var(--pn-borda) !important;
	border-radius: 8px !important;
	color: var(--pn-texto-suave) !important;
}

/* Grade de 4 colunas (rótulo|campo|rótulo|campo). O campo tinha width:100% da coluna
   — como a coluna precisa caber o rótulo/campo mais longo da tabela toda (ex:
   "Complemento"), campos curtos (Número, Cep) ficavam maiores do que precisavam.
   Agora o campo tem largura fixa e igual pra todos (não herda a coluna) — fica
   compacto, colado no rótulo (que encolhe pro tamanho do próprio texto) e alinhado
   entre as linhas, já que todo campo passa a ter a mesma largura. A tabela não pode
   ficar em width:100% aqui — sobraria espaço e o auto layout distribuiria esse
   excedente de volta pras colunas, esticando tudo de novo. */
table.pn-field-grid-4col {
	width: auto !important;
}

table.pn-field-grid-4col td:nth-child(4n+1),
table.pn-field-grid-4col td:nth-child(4n+3) {
	white-space: nowrap;
	padding-right: 4px !important;
}

table.pn-field-grid-4col input {
	width: 220px !important;
	max-width: 220px !important;
	box-sizing: border-box;
}

/* Botões dentro de fieldset (ex: Imprimir BCI) — mesmo padrão compacto do card de
   busca, em vez do botão grande/padrão. Repete a cadeia de :not() do
   pf15-datepicker-panel.css (especificidade alta) pra realmente vencer. */
.pn-fieldset .ui-button.ui-button-text-icon-left {
	padding: 6px 14px !important;
	min-height: 0 !important;
	border-radius: 6px !important;
}

.pn-fieldset .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only):not(.ui-wizard-nav-back):not(.ui-wizard-nav-next) {
	gap: 10px !important;
}

.pn-fieldset .ui-button.ui-button-text-icon-left:not(.ui-button-icon-only):not(.ui-wizard-nav-back):not(.ui-wizard-nav-next) .ui-button-text {
	padding: 0 !important;
	line-height: 1.2 !important;
	font-size: 12px !important;
}

.pn-fieldset .ui-button-icon-left {
	position: static !important;
	margin: 0 !important;
}

/* Tabela de parcelas (p:dataTable / p:dataGrid) */
.pn-table.ui-datatable table,
.pn-table.ui-datagrid {
	border: none !important;
}

.pn-table.ui-datatable .ui-datatable-header,
.pn-table.ui-datagrid .ui-datagrid-header {
	background: #fff !important;
	border: none !important;
}

.pn-table.ui-datatable thead th {
	background: var(--pn-bg) !important;
	border: none !important;
	border-bottom: 1px solid var(--pn-borda) !important;
	border-right: 1px solid var(--pn-borda) !important;
	color: var(--pn-texto-suave) !important;
	font-size: 11px !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600 !important;
}

.pn-table.ui-datatable thead th:last-child {
	border-right: none !important;
}

/* Cabeçalho de coluna com 2 linhas (ex: "Protocolo" / "Tipo de Pedido"), separadas por um traço fino.
   h:panelGroup layout="block" vira uma <div> pura, sem estilo de tema — herda tudo do <th> pai. */
.pn-table-header-empilhado {
	text-align: center;
}

.pn-table.ui-datatable tbody td {
	border: none !important;
	border-bottom: 1px solid var(--pn-borda) !important;
	font-size: 13px;
}

.pn-table.ui-datatable tbody tr:hover {
	background: var(--pn-bg) !important;
}

/* Tabela de Documentos Requeridos por Protocolo — cabeçalho no azul institucional,
   nome da unidade em azul escuro e centralizado verticalmente conforme a quantidade
   de documentos da linha, e linhas divisórias entre os documentos empilhados numa
   mesma unidade. As regras usam o id do componente porque pf15-compat.css define
   fundo/cor de thead e tbody de toda p:dataTable com !important e mais especificidade
   que uma styleClass simples. */
#formDocReqProtocolo\:dtDocReqProtocolo thead th.ui-state-default,
#formDocReqProtocolo\:dtDocReqProtocoloTodasUnidades thead th.ui-state-default {
	background: var(--pn-azul) !important;
	color: #fff !important;
	text-shadow: none !important;
}

#formDocReqProtocolo\:dtDocReqProtocolo thead th .ui-column-title,
#formDocReqProtocolo\:dtDocReqProtocoloTodasUnidades thead th .ui-column-title {
	color: #fff !important;
}

#formDocReqProtocolo\:dtDocReqProtocoloTodasUnidades .pn-doc-req-unidade-col {
	vertical-align: middle !important;
}

#formDocReqProtocolo\:dtDocReqProtocoloTodasUnidades .pn-doc-req-unidade {
	color: var(--pn-azul) !important;
	font-weight: normal !important;
	text-transform: uppercase;
}

.pn-tabela-doc-req .pn-doc-req-linha {
	padding: 6px 0;
	border-bottom: 1px solid var(--pn-borda);
}

.pn-tabela-doc-req .pn-doc-req-linha:last-child {
	border-bottom: none;
}

@media (max-width: 860px) {
	.pn-legislacao-inner,
	.pn-tutoriais-inner {
		grid-template-columns: 1fr;
	}
	.pn-hero-inner {
		grid-template-columns: 1fr;
		/* Ordem própria pro mobile: título, depois o carrossel (sobe pra antes da frase de
		   destaque — é a chamada mais forte da seção, não faz sentido deixar por último
		   depois de rolar o hero inteiro), e a coluna "desc" nem entra mais (escondida
		   abaixo via .pn-hero-desc, o carrossel já cobre esse papel promocional). */
		grid-template-areas:
			"topo"
			"carrossel"
			"destaque";
		row-gap: 20px;
	}
	.pn-hero-topo h1 {
		/* Só o título da home (dentro de .pn-hero-topo) — .pn-hero h1 é genérico e outras
		   páginas com esse mesmo padrão de hero não devem encolher junto. 34px/1.3 vira
		   5 linhas numa tela de ~390px; mais compacto assim. */
		font-size: 26px;
		line-height: 1.2;
	}
	.pn-hero-desc {
		display: none;
	}
	.pn-hero-side {
		/* Antes ficava display:none nessa largura (o carrossel não tinha suporte a toque
		   e sumia com promoções sem lugar nenhum pra aparecer: WhatsApp, DTE, parcelamento,
		   evite protesto). Agora empilha abaixo do texto (.pn-hero-inner já virou 1fr acima)
		   com um aspect-ratio mais baixo pra não dominar a tela. */
		aspect-ratio: 4 / 3;
	}
	.pn-banner-nav {
		/* Alvo de toque maior que o ícone sozinho (22px) — círculo com fundo pra não
		   depender só do texto/imagem de fundo pra dar contraste. */
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.35);
	}
	.pn-banner-dot {
		width: 10px;
		height: 10px;
	}
	.pn-hero-destaque {
		/* Os 64px fazem sentido separando do parágrafo longo (desktop) — aqui ela vem
		   logo depois do carrossel, já com o row-gap do grid; 64px a mais ficava flutuando. */
		margin-top: 0 !important;
	}
	.pn-tutorial-thumb-featured {
		min-height: 180px;
	}
	.pn-footer-inner {
		grid-template-columns: 1fr 1fr;
	}

	.pn-header-toggle {
		display: flex;
	}

	.pn-header-mobile {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		background: #fff;
		padding: 18px 20px 22px;
		border-bottom: 1px solid var(--pn-borda);
		box-shadow: 0 16px 30px -18px rgba(0, 1, 78, 0.35);
	}

	.pn-header-mobile.pn-header-mobile-aberto {
		display: flex;
	}

	.pn-header-search-wrap {
		max-width: none;
	}

	.pn-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		width: 100%;
	}

	.pn-nav .ui-menubar,
	.pn-nav .ui-menubar .ui-menubar-root-list {
		width: 100%;
	}

	.pn-entrar-btn {
		width: 100%;
	}
}

/* Solicitar Acesso — roxo legado vira azul */
.pn-solic-acesso {
	--castanhal: var(--pn-azul);
	--castanhal-hover: var(--pn-azul-hover);
	--castanhal-dark: var(--pn-azul-escuro);
}

.pn-solic-acesso .ui-state-default,
.pn-solic-acesso .ui-widget-header .ui-state-default {
	background: var(--pn-azul) !important;
}

.pn-solic-acesso .ui-state-hover,
.pn-solic-acesso .ui-state-focus {
	background: var(--pn-azul-hover) !important;
}

.pn-solic-acesso .ui-state-active {
	background: var(--pn-azul-escuro) !important;
}

.pn-solic-acesso .ui-panel .ui-panel-titlebar,
.pn-solic-acesso .ui-dialog .ui-dialog-titlebar {
	background: var(--pn-azul) !important;
}

.pn-solic-busca-grid tr:last-child td {
	padding-top: 24px;
}

/* SOLICITAR ACESSO — mesmo reskin em card do #formCredenciamentoEmpresa
   (cantos arredondados, sombra, espaçamento entre painéis), sem mexer na
   estrutura/campos do cadastro (pessoa física/jurídica). */
#form_solicitar_acesso .ui-panel.ui-widget {
	border-radius: 10px !important;
	border-color: var(--pn-borda) !important;
	overflow: hidden;
	box-shadow: 0 8px 24px -16px rgba(0, 1, 78, 0.25);
	margin-bottom: 16px;
}

#form_solicitar_acesso .ui-panel .ui-panel-titlebar,
#form_solicitar_acesso .ui-panel .ui-panel-titlebar.ui-widget-header {
	border-radius: 9px 9px 0 0 !important;
}

/* Telas de formulário/consulta (2ª via, protocolo, regularização SN...).
   .pn-body cobre TODO o portal público automaticamente (sem precisar de wrapper
   por página); .pn-tema-azul continua valendo nas páginas que já usam o wrapper. */
.pn-tema-azul .ui-state-default,
.pn-tema-azul .ui-widget-header .ui-state-default,
.pn-tema-azul .ui-button.ui-state-default,
.pn-body .ui-state-default,
.pn-body .ui-widget-header .ui-state-default,
.pn-body .ui-button.ui-state-default,
.painel-interna .ui-state-default,
.painel-interna .ui-widget-header .ui-state-default,
.painel-interna .ui-button.ui-state-default,
.painel-interna button.ui-datepicker-trigger.ui-button,
.painel-interna button.ui-datepicker-trigger.ui-button.ui-button-icon-only,
.pn-body button.ui-datepicker-trigger.ui-button,
.pn-body button.ui-datepicker-trigger.ui-button.ui-button-icon-only,
.pn-tema-azul button.ui-datepicker-trigger.ui-button {
	background: var(--pn-azul) !important;
}

.pn-tema-azul .ui-state-hover,
.pn-tema-azul .ui-state-focus,
.pn-tema-azul .ui-button.ui-state-hover,
.pn-tema-azul .ui-button.ui-state-focus,
.pn-body .ui-state-hover,
.pn-body .ui-state-focus,
.pn-body .ui-button.ui-state-hover,
.pn-body .ui-button.ui-state-focus,
.painel-interna .ui-state-hover,
.painel-interna .ui-state-focus,
.painel-interna .ui-button.ui-state-hover,
.painel-interna .ui-button.ui-state-focus,
.painel-interna button.ui-datepicker-trigger.ui-button.ui-state-hover,
.pn-body button.ui-datepicker-trigger.ui-button.ui-state-hover {
	background: var(--pn-azul-hover) !important;
}

.pn-body .ui-datatable .ui-row-toggler,
.pn-body .ui-datatable .ui-row-toggler.ui-icon,
.painel-interna .ui-datatable .ui-row-toggler,
.painel-interna .ui-datatable .ui-row-toggler.ui-icon,
.pn-tema-azul .ui-datatable .ui-row-toggler {
	background: var(--pn-azul) !important;
	background-image: none !important;
	color: #fff !important;
}

.pn-tema-azul .ui-state-active,
.pn-tema-azul .ui-button.ui-state-active,
.pn-body .ui-state-active,
.pn-body .ui-button.ui-state-active,
.painel-interna .ui-state-active,
.painel-interna .ui-button.ui-state-active {
	background: var(--pn-azul-escuro) !important;
}

.pn-tema-azul .ui-panel .ui-panel-titlebar,
.pn-tema-azul .ui-panel .ui-panel-titlebar.ui-widget-header,
.pn-body .ui-panel .ui-panel-titlebar,
.pn-body .ui-panel .ui-panel-titlebar.ui-widget-header {
	background: var(--pn-azul) !important;
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 15px;
}

.pn-tema-azul .ui-panel {
	width: 100%;
}

.pn-tema-azul .ui-panel-content,
.pn-tema-azul .ui-panel .ui-panel-content.ui-widget-content {
	padding: 24px 28px 32px !important;
}

.pn-tema-azul-intro p {
	font-family: var(--pn-fonte-texto);
	font-size: 15px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	margin: 0 0 10px;
}

.pn-tema-azul-grid {
	margin: 4px 0 8px;
	width: auto !important;
}

.pn-tema-azul-grid td {
	padding: 8px 16px 8px 0;
}

.pn-tema-azul-grid td:first-child {
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
	color: var(--pn-texto);
	white-space: nowrap;
	width: 1px;
}

/* Grid com 2 pares rótulo/valor por linha (ex: detalhe do REDESIM) — o 2º rótulo
   é a 3ª célula da linha, não pega a regra :first-child acima. */
.pn-tema-azul-grid-4col td:nth-child(4n+3) {
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
	color: var(--pn-texto);
	white-space: nowrap;
	width: 1px;
}

.pn-tema-azul-grid-4col {
	width: 100% !important;
	table-layout: fixed;
}

.pn-tema-azul-grid-4col td:first-child,
.pn-tema-azul-grid-4col td:nth-child(4n+3) {
	width: 20%;
	white-space: normal;
}

.pn-tema-azul-grid-4col td:nth-child(4n+2),
.pn-tema-azul-grid-4col td:nth-child(4n) {
	width: 30%;
}

.pn-tema-azul .ui-inputfield {
	font-family: var(--pn-fonte-texto);
}

.pn-tema-azul .ui-paginator .ui-paginator-first,
.pn-tema-azul .ui-paginator .ui-paginator-prev,
.pn-tema-azul .ui-paginator .ui-paginator-next,
.pn-tema-azul .ui-paginator .ui-paginator-last,
.pn-tema-azul .ui-paginator .ui-paginator-page.ui-state-default,
.pn-body .ui-paginator .ui-paginator-first,
.pn-body .ui-paginator .ui-paginator-prev,
.pn-body .ui-paginator .ui-paginator-next,
.pn-body .ui-paginator .ui-paginator-last,
.pn-body .ui-paginator .ui-paginator-page.ui-state-default {
	background: var(--pn-azul) !important;
}

.pn-tema-azul .ui-paginator .ui-paginator-page.ui-state-active,
.pn-body .ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--pn-azul-escuro) !important;
}

.pn-tema-azul .ui-selectonemenu .ui-selectonemenu-trigger,
.pn-tema-azul .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-default,
.pn-body .ui-selectonemenu .ui-selectonemenu-trigger,
.pn-body .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-default {
	background: var(--pn-azul) !important;
}

.pn-tema-azul .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover,
.pn-body .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover {
	background: var(--pn-azul-hover) !important;
}

.pn-tema-azul .pn-tema-azul-btn {
	margin-top: 8px;
}

/* Overlays (select/datepicker) são anexados ao body, não ao wrapper.
   .pn-body cobre isso globalmente; os dois seletores antigos ficam por segurança. */
.pn-body-fixo .ui-state-highlight,
.pn-body-fixo .ui-widget-header,
.pn-tema-azul-page .ui-state-highlight,
.pn-tema-azul-page .ui-widget-header,
.pn-body .ui-state-highlight,
.pn-body .ui-widget-header,
.painel-interna .ui-state-highlight,
.painel-interna .ui-widget-header {
	background: var(--pn-azul) !important;
}

/* O X do dialog (pf15-compat.css) foi pensado pra titlebar clara: circulo cinza translucido
   + icone na cor institucional (roxo/azul). Aqui em cima o titlebar vira azul-marinho, entao
   o X (mesma familia de cor do fundo) some -- ex.: dialog "Carregando...".
   IMPORTANTE: pf15-compat.css desenha o X com duas barras via :before/:after, coloridas por
   ".ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:before/:after"
   (4 classes de especificidade). Os seletores abaixo repetem essa mesma cadeia com mais um
   wrapper (5 classes) na frente pra garantir vitoria, independente da ordem de carregamento. */
.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close {
	background: rgba(255, 255, 255, 0.14) !important;
}

.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:hover,
.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:focus,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:hover,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:focus,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:hover,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:focus,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:hover,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close:focus,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close:hover,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close:focus {
	background: rgba(255, 255, 255, 0.24) !important;
}

.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:before,
.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:before,
.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:after,
.pn-body-fixo .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:after,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:before,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:before,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:after,
.pn-tema-azul-page .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:after,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:before,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:before,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:after,
.pn-body .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:after,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:before,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:before,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-close:after,
.painel-interna .ui-dialog:not(.pn-login-dialog) .ui-dialog-titlebar-close .ui-icon-closethick:after,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close .ui-icon-close:before,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick:before,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close .ui-icon-close:after,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick:after {
	color: #fff !important;
}

/* LGPD — modal de cookies, padrão azul/Montserrat */
.dialog-lgpd.ui-dialog {
	border-radius: 16px;
	border: none;
	box-shadow: 0 30px 60px -20px rgba(23, 19, 32, 0.5);
}

.dialog-lgpd.ui-dialog .ui-dialog-titlebar,
.dialog-lgpd.ui-dialog .ui-dialog-titlebar.ui-widget-header {
	background: var(--pn-azul) !important;
	border-radius: 16px 16px 0 0;
	padding: 16px 20px;
}

.dialog-lgpd .ui-dialog-title {
	font-family: var(--pn-fonte-titulo);
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
	letter-spacing: normal;
}

.dialog-lgpd .ui-dialog-content {
	font-family: var(--pn-fonte-texto);
	font-size: 14px;
	line-height: 1.7;
	color: var(--pn-texto-suave);
	padding: 20px;
	border-radius: 0 0 16px 16px;
}

.pn-lgpd-btn {
	font-family: var(--pn-fonte-texto);
	font-weight: 600;
	font-size: 14px;
	color: #fff;
	background: var(--pn-azul);
	border: none;
	border-radius: 8px;
	padding: 10px 22px;
	cursor: pointer;
}

.pn-lgpd-btn:hover {
	background: var(--pn-azul-hover);
}

/* Páginas com template full (ex.: REDESIM) usam .centro-inner sem o container
   centralizado que o header/footer já têm (max-width 1240px + padding 32px) —
   isso fazia o conteúdo ficar mais à esquerda que o brasão. Alinha os dois. */
body.publico-full .centro .centro-inner {
	max-width: var(--pn-container-max);
	margin: 0 auto;
	padding: 20px 32px;
}

/* Área restrita — tabelas e paginador no azul institucional; campos de formulário claros */
.painel-interna .tables div,
.painel-interna .tables div div {
	background: var(--pn-azul) !important;
}

.painel-interna .ui-datatable thead th.ui-state-default,
.painel-interna .ui-datatable thead th.tabela-table-header,
.painel-interna .ui-datatable-tablewrapper > table > thead > tr > th.ui-state-default {
	background: var(--pn-azul) !important;
	color: #fff !important;
	text-shadow: none !important;
}

.painel-interna .ui-datatable thead th span:not(.ui-icon),
.painel-interna .ui-datatable thead th label,
.painel-interna .ui-datatable thead th .ui-outputlabel {
	color: #fff !important;
	background: transparent !important;
	text-shadow: none !important;
}

.painel-interna .ui-datatable thead th .ui-icon,
.painel-interna .ui-datatable thead th .ui-sortable-column-icon {
	color: #fff !important;
}

.painel-interna .ui-datatable .ui-paginator,
.painel-interna .ui-datagrid .ui-paginator {
	color: #333 !important;
}

.painel-interna .ui-paginator .ui-paginator-first,
.painel-interna .ui-paginator .ui-paginator-prev,
.painel-interna .ui-paginator .ui-paginator-next,
.painel-interna .ui-paginator .ui-paginator-last,
.painel-interna .ui-paginator .ui-paginator-page.ui-state-default {
	background: var(--pn-azul) !important;
	color: #fff !important;
}

.painel-interna .ui-paginator .ui-paginator-page.ui-state-active {
	background: var(--pn-azul-escuro) !important;
	color: #fff !important;
}

.painel-interna .ui-selectonemenu,
.painel-interna .ui-selectonemenu.ui-state-default,
.painel-interna .ui-selectonemenu.ui-state-hover,
.painel-interna .ui-selectonemenu.ui-state-focus,
.painel-interna .ui-selectonemenu .ui-selectonemenu-label,
.painel-interna .ui-selectonemenu .ui-selectonemenu-label.ui-state-default,
.painel-interna .ui-selectonemenu .ui-selectonemenu-label.ui-state-hover,
.painel-interna .ui-selectonemenu .ui-selectonemenu-label.ui-state-focus,
.painel-interna .ui-selectonemenu label.ui-selectonemenu-label,
.painel-interna .ui-selectonemenu input.ui-selectonemenu-label,
.painel-interna .ui-panel .ui-panelgrid .ui-selectonemenu .ui-selectonemenu-label,
.painel-interna .ui-panel .ui-panelgrid span.ui-selectonemenu-label,
.pn-body .ui-selectonemenu,
.pn-body .ui-selectonemenu.ui-state-default,
.pn-body .ui-selectonemenu .ui-selectonemenu-label,
.pn-tema-azul .ui-selectonemenu,
.pn-tema-azul .ui-selectonemenu.ui-state-default,
.pn-tema-azul .ui-selectonemenu .ui-selectonemenu-label {
	background: #fff !important;
	color: #666 !important;
	border: 1px solid #abadb3 !important;
}

.painel-interna .ui-selectonemenu .ui-selectonemenu-trigger,
.painel-interna .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-default,
.painel-interna .ui-selectonemenu .ui-selectonemenu-trigger.ui-state-hover,
.pn-body .ui-selectonemenu .ui-selectonemenu-trigger,
.pn-tema-azul .ui-selectonemenu .ui-selectonemenu-trigger {
	background: var(--pn-azul) !important;
	color: #fff !important;
	border: 0 !important;
}

.painel-interna .ui-separator {
	background-color: var(--pn-azul) !important;
	border-color: var(--pn-azul) !important;
}

.nfse-filtro-grid {
	width: auto !important;
}

.nfse-filtro-label {
	text-align: right !important;
	font-weight: 700 !important;
	white-space: nowrap;
	vertical-align: middle !important;
	padding: 4px 10px 4px 0 !important;
	border: none !important;
}

.nfse-filtro-campo {
	text-align: left !important;
	vertical-align: middle !important;
	padding: 4px 0 !important;
	border: none !important;
}