/*
Theme Name: FESPSP Base
Theme URI: https://www.fespsp.org.br/
Author: FESPSP
Description: Tema parent (FSE) e design system compartilhado da FESPSP. Contém só o que é agnóstico de conteúdo — tokens (theme.json), CSS do sistema, blocos custom, patterns estruturais e parts de marca. Cada site (fes-nicepage, fes-projetos, …) é um child theme que consome este base via Composer. Cores e medidas extraídas linha-por-linha do nicepage.css original — brand #bc2f2c (vermelho), texto #53565a (cinza grafite), top bar #d0d3d4, footer #333333. Sem plugins.
Version: 0.1.50
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.1
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fespsp
Tags: full-site-editing, block-templates, block-patterns, custom-colors, custom-logo, custom-menu, editor-style, featured-images
*/

/* =============================================================
   FESPSP — design system extraído do Nicepage
   ----------------------------------------------------------------
   Brand:   #bc2f2c (hover #a92a28)
   Texto:   #53565a (hover #4b4d51)
   Top bar: #d0d3d4 (hover #babec0)
   Cards:   #f2f2f2 (grey-5)
   Footer:  #333333 (grey-80)
   Body BG: #ffffff   |  Body text: #111111
   ============================================================= */

/* =============================================================
   BREAKPOINTS — convenção única de responsividade (Bloco H)
   ----------------------------------------------------------------
   Replicam os breakpoints do Nicepage original. São os ÚNICOS
   valores de corte usados no tema — não invente outros. Cada
   media query de reflow é desktop-first (max-width):

     xl  1140px  laptop / abaixo da largura de conteúdo (contentSize)
     lg   980px  tablet landscape / desktop pequeno
     md   760px  tablet retrato — abaixo daqui vira layout "mobile"
     sm   460px  smartphone

   Uso:  @media (max-width: 760px) { … }   ← literal, em px.
   CSS custom properties NÃO funcionam dentro da condição de um
   @media, então o valor vai literal no CSS; os mesmos números
   estão espelhados (como documentação/tokens legíveis por máquina)
   em theme.json → settings.custom.breakpoint
   (--wp--custom--breakpoint--{xl,lg,md,sm}).

   Nota: media queries anteriores a esta convenção (1199/991/767/
   600/575px) são legado e vão sendo normalizadas para o canon
   componente-a-componente ao longo do Bloco H (H2–H13). Trabalho
   novo já usa 1140/980/760/460.
   ============================================================= */

body {
	font-family: "Open Sans", sans-serif;
	color: #111;
	line-height: 1.55;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: Roboto, sans-serif;
	font-weight: 500;
	line-height: 1.2;
}

/* =============================================================
   TOP BAR — botões Área do Aluno / Área do Professor
   Valores extraídos via Playwright do Nicepage original:
     bg #d0d3d4 explícito, border #53565a, font Montserrat 12px 400 NORMAL,
     padding 6px 19px 7px, radius 100px, text-transform none
   ============================================================= */

/* Topbar — bg ocupa tela toda, conteúdo centralizado em 1140px via layout constrained */
.fespsp-topbar {
	background: #d0d3d4 !important;
	padding: 6px 0 !important;
}

/* Largura 1140 explícita + margin auto força centralização e dá referência
   para o justify-content:flex-end empurrar botões pro right edge */
.fespsp-topbar .wp-block-buttons {
	justify-content: flex-end !important;
	gap: 8px !important;
	margin: 0 auto !important;
	width: 1140px !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.fespsp-topbar .wp-block-button .wp-block-button__link,
.fespsp-topbar a.wp-block-button__link.wp-element-button {
	background: #d0d3d4 !important;
	color: #53565a !important;
	border: 1px solid #53565a !important;
	border-radius: 100px !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 400 !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	padding: 6px 19px 7px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	min-height: 0 !important;
}

.fespsp-topbar .wp-block-button .wp-block-button__link:hover,
.fespsp-topbar a.wp-block-button__link.wp-element-button:hover {
	background: #bc2f2c !important;
	color: #fff !important;
	border-color: #bc2f2c !important;
}

/* =============================================================
   HEADER — logo + navegação principal
   Sem padding horizontal — contentSize 1140px do layout constrained centraliza.
   ============================================================= */
.fespsp-header {
	background: #fff;
	padding: 18px 0;
}

/* Wrapper interno (logo + nav) — 1140 centralizado */
.fespsp-header > .wp-block-group {
	width: 1140px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
}

/* Logo colorido no header — 205px exato (medido via Playwright no Nicepage) */
.fespsp-header__logo,
.fespsp-header .wp-block-image,
.fespsp-header__logo img,
.fespsp-header .wp-block-image img {
	max-width: 205px !important;
	height: auto !important;
	margin: 0 !important;
}

.fespsp-header__logo a {
	display: inline-block;
}

.fespsp-header .wp-block-site-logo img {
	max-width: 205px;
	height: auto;
}

/* Navegação principal — valores extraídos via Playwright do Nicepage original:
   font Montserrat 400, size 14px, top-level color #111111, padding 10px 15px */
.fespsp-main-nav {
	font-family: Montserrat, sans-serif !important;
	font-weight: 400 !important;
	font-size: 14px !important;
}

/* Esconde as setinhas "v" dos itens com submenu — Nicepage não mostra */
.fespsp-main-nav .wp-block-navigation__submenu-icon,
.fespsp-main-nav button.wp-block-navigation-item__content + .wp-block-navigation__submenu-icon,
.fespsp-main-nav > ul > li > a + .wp-block-navigation__submenu-icon,
.fespsp-main-nav > ul > li > button + .wp-block-navigation__submenu-icon {
	display: none !important;
}

.fespsp-main-nav > ul > li > a.wp-block-navigation-item__content::after,
.fespsp-main-nav > ul > li > button.wp-block-navigation-item__content::after {
	display: none !important;
	content: none !important;
}

/* Top-level menu items: cor #111111, peso 400, padding 10px 15px.
   Seletor genérico para pegar links em qualquer profundidade de wrapper do WP. */
.fespsp-main-nav a.wp-block-navigation-item__content,
.fespsp-main-nav button.wp-block-navigation-item__content {
	color: #111 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	padding: 10px 15px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.fespsp-main-nav a.wp-block-navigation-item__content:hover,
.fespsp-main-nav button.wp-block-navigation-item__content:hover {
	color: #bc2f2c !important;
	background: transparent !important;
}

.fespsp-main-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: #bc2f2c !important;
}

/* Mega-menu (dropdown do Nicepage): bg branco, padding 10px 24px,
   itens em #53565a font-weight 400 size 14px — valores extraídos via Playwright */
.fespsp-main-nav .wp-block-navigation__submenu-container {
	background: #fff !important;
	border: 1px solid #e5e5e5 !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	min-width: 240px;
	padding: 12px 0 !important;
	border-radius: 0 !important;
}

/* Submenu items: bg branco como Nicepage, cor #53565a, font 14px peso 400 */
.fespsp-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: #53565a !important;
	background: #fff !important;
	padding: 10px 24px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	font-size: 14px !important;
}

.fespsp-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: #bc2f2c !important;
	background: #f2f2f2 !important;
}

/* =============================================================
   HEADER — responsivo (Bloco H / H2)
   Breakpoint md (760px, ver convenção no topo). Abaixo dele o menu
   principal (core/navigation, overlayMenu:"mobile") colapsa no
   hambúrguer. O WP nativo só colapsa < 600px; antecipamos o corte
   para 760px porque o Nicepage já colapsa a partir do MD. O drawer
   e o toggle abrir/fechar são NATIVOS do bloco — zero plugin/JS.
   ============================================================= */
@media (max-width: 760px) {

	/* Mostra o botão hambúrguer também na faixa 600–760px (o WP o
	   esconde em min-width:600px; nosso seletor mais específico vence). */
	.fespsp-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* Esconde o menu inline (estado fechado) nessa faixa — o hambúrguer
	   assume. O overlay aberto (.is-menu-open) NÃO casa este seletor,
	   então continua abrindo normalmente. */
	.fespsp-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Topbar (site principal): as pílulas Área do Aluno/Professor podem
	   quebrar linha e centralizam, em vez de estourar à direita. Inerte
	   no microsite Projetos (que não renderiza topbar). */
	.fespsp-topbar .wp-block-buttons {
		justify-content: center !important;
		flex-wrap: wrap;
	}
}

/* Estilos do bloco fespsp/carousel vivem em blocks/carousel/style.css —
   evitando duplicação e conflito de especificidade. */

/* =============================================================
   CURSOS — section 2 (Nicepage u-section-2)
   Grid 2 linhas × 3 colunas alternando texto/imagem.
   Cada célula: min-height 311px (256 tablet, 200 mobile MD).
   ============================================================= */
.fespsp-cursos {
	width: 1140px;
	max-width: 100%;
	margin: 45px auto 20px;
	padding: 0;
}

.fespsp-cursos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 311px 311px;
	gap: 20px;
}

.fespsp-cursos__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	box-sizing: border-box;
}

.fespsp-cursos__cell--text {
	background: #f2f2f2;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.fespsp-cursos__cell--text:hover {
	background: #e5e5e5;
}

.fespsp-cursos__cell--image {
	background-size: cover;
	background-position: center;
	min-height: 311px;
}

.fespsp-cursos__title {
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	color: #111;
	margin: 0 auto;
	line-height: 1.2;
}

.fespsp-cursos__desc {
	margin: 20px 30px 0;
	color: #53565a;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* Ícone circular vermelho com seta — replica .u-icon-circle.u-custom-color-1 do Nicepage */
.fespsp-cursos__icon {
	width: 37px;
	height: 37px;
	background: #bc2f2c;
	color: #fff;
	border-radius: 50%;
	margin: 30px auto 0;
	padding: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.fespsp-cursos__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 1199px) {

	.fespsp-cursos__grid {
		grid-template-rows: 256px 256px;
	}

	.fespsp-cursos__cell--image {
		min-height: 256px;
	}
}

@media (max-width: 991px) {

	.fespsp-cursos__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
		gap: 12px;
	}

	.fespsp-cursos__cell--text {
		min-height: 200px;
	}

	.fespsp-cursos__cell--image {
		min-height: 200px;
	}
}

/* =============================================================
   NEWSLETTER + FEED ACONTECE — section 3
   Estrutura idêntica ao Nicepage: header com h3 + form lado-a-lado,
   abaixo o grid de posts em 3 colunas.
   ============================================================= */
.fespsp-newsletter-acontece {
	width: 1140px;
	max-width: 100%;
	margin: 45px auto 60px;
	padding: 0;
	background: #fff;
}

/* Linha superior: h3 esquerda + form direita */
.fespsp-acontece__header {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	margin-bottom: 30px;
	gap: 30px;
}

.fespsp-acontece__title {
	font-family: Roboto, sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.5rem !important;
	color: #111 !important;
	margin: 0 !important;
	line-height: 1.2;
}

/* Form inline newsletter — label, input e botão na mesma linha */
.fespsp-form--inline {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0 !important;
	flex-wrap: nowrap;
}

.fespsp-form--inline .fespsp-form__fields {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	margin: 0;
}

.fespsp-form--inline .fespsp-field {
	margin: 0;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.fespsp-form--inline .fespsp-field__label {
	font-family: "Open Sans", sans-serif !important;
	color: #53565a !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	margin: 0 !important;
	white-space: nowrap;
}

.fespsp-form--inline .fespsp-field__input {
	width: 220px;
	min-width: 0;
	border: 1px solid #d0d3d4 !important;
	border-radius: 3px !important;
	padding: 8px 12px !important;
}

/* IMPORTANTE: o display:block (não none) garante o submit visível — o style.css do bloco
   form historicamente escondia ".fespsp-form--inline .fespsp-form__actions { display: none }". */
.fespsp-form--inline .fespsp-form__actions {
	display: block !important;
	margin: 0 !important;
	flex: 0 0 auto;
}

.fespsp-form--inline .fespsp-form__submit {
	background: #53565a !important;
	color: #fff !important;
	border-radius: 0 !important;
	padding: 8px 18px !important;
	font-family: "Open Sans", sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* =============================================================
   NEWSLETTER CTA — faixa vermelha no fim das páginas internas
   (page-institucional → pattern fespsp/cta-newsletter).
   Escopo próprio: NÃO herda o layout do form inline branco da home
   (.fespsp-newsletter-acontece). Texto explícito em branco porque o
   preset has-white-color não gera CSS neste tema.
   ============================================================= */
.fespsp-newsletter-cta {
	text-align: center;
}

.fespsp-newsletter-cta__title {
	font-family: Roboto, sans-serif !important;
	font-weight: 700 !important;
	font-size: 2rem !important;
	line-height: 1.2 !important;
	color: #fff !important;
	margin: 0 auto 12px !important;
}

/* acento decorativo: filete branco curto sob o título */
.fespsp-newsletter-cta__title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 16px auto 0;
	background: rgba(255, 255, 255, 0.55);
	border-radius: 2px;
}

.fespsp-newsletter-cta__subtitle {
	font-family: "Open Sans", sans-serif !important;
	font-size: 1.05rem !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.9) !important;
	max-width: 32rem;
	margin: 0 auto 28px !important;
}

/* Form — sobrepõe as regras globais .fespsp-form--inline (maior
   especificidade que aquelas, então vence mesmo com !important).
   Desktop: input + botão dentro de UMA pílula branca (o <form> é a
   pílula; o botão escuro fica embutido à direita, com 5px de respiro). */
.fespsp-newsletter-cta .fespsp-form,
.fespsp-newsletter-cta .fespsp-form--inline {
	display: block !important;
	max-width: 540px;
	width: 100%;
	margin: 0 auto !important;
}

.fespsp-newsletter-cta .fespsp-form--inline > form {
	display: flex;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border-radius: 999px;
	padding: 5px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.fespsp-newsletter-cta .fespsp-form--inline > form:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6), 0 8px 24px rgba(0, 0, 0, 0.16);
}

.fespsp-newsletter-cta .fespsp-form__fields {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.fespsp-newsletter-cta .fespsp-field {
	flex: 1;
	margin: 0;
	flex-direction: column;
}

.fespsp-newsletter-cta .fespsp-field__input {
	width: 100% !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	padding: 12px 32px !important;
	font-family: "Open Sans", sans-serif !important;
	font-size: 1rem !important;
	color: #333 !important;
	box-shadow: none !important;
}

.fespsp-newsletter-cta .fespsp-field__input::placeholder {
	color: #8a8d91;
}

.fespsp-newsletter-cta .fespsp-field__input:focus {
	outline: none;
	box-shadow: none !important;
}

.fespsp-newsletter-cta .fespsp-form__actions {
	display: block !important;
	flex: 0 0 auto;
	margin: 0 !important;
}

.fespsp-newsletter-cta .fespsp-form__submit {
	background: #111 !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 12px 30px !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	cursor: pointer;
	transition: background 0.18s ease;
}

.fespsp-newsletter-cta .fespsp-form__submit:hover {
	background: #bc2f2c !important;
}

/* Mobile: desfaz a pílula única — input e botão empilhados em largura total */
@media (max-width: 600px) {

	.fespsp-newsletter-cta__title {
		font-size: 1.6rem !important;
	}

	.fespsp-newsletter-cta .fespsp-form--inline > form {
		background: transparent;
		padding: 0;
		box-shadow: none;
		flex-wrap: wrap;
		gap: 12px;
	}

	.fespsp-newsletter-cta .fespsp-form--inline > form:focus-within {
		box-shadow: none;
	}

	.fespsp-newsletter-cta .fespsp-form__fields {
		flex: 1 1 100%;
	}

	.fespsp-newsletter-cta .fespsp-field__input {
		background: #fff !important;
		padding: 14px 20px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	}

	.fespsp-newsletter-cta .fespsp-form__actions {
		flex: 1 1 100%;
	}

	.fespsp-newsletter-cta .fespsp-form__submit {
		width: 100%;
		padding: 14px 30px !important;
	}
}

/* Acontece — grid 3 colunas com cards estilo Nicepage:
   bg grey-5, image 198px, title bold 14px Open Sans, text 14px,
   botão "Ler mais" pequeno vermelho 8px padding. */
.fespsp-acontece .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.fespsp-acontece .wp-block-post {
	background: #f2f2f2;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}

.fespsp-acontece .wp-block-post-featured-image {
	margin: 0;
	display: block;
}

.fespsp-acontece .wp-block-post-featured-image img {
	width: 100%;
	height: 198px;
	object-fit: cover;
	display: block;
}

.fespsp-acontece .wp-block-post-title {
	font-family: "Open Sans", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	color: #111 !important;
	line-height: 1.3 !important;
	padding: 16px 20px 0 !important;
	margin: 0 !important;
}

.fespsp-acontece .wp-block-post-title a {
	color: #111 !important;
	text-decoration: none !important;
}

.fespsp-acontece .wp-block-post-title a:hover {
	color: #bc2f2c !important;
}

.fespsp-acontece .wp-block-post-excerpt {
	padding: 10px 20px 0 !important;
	color: #53565a !important;
	font-family: "Open Sans", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.fespsp-acontece .wp-block-post-excerpt p {
	margin: 0 !important;
}

/* "Ler mais" pequeno vermelho retângulo (estilo Nicepage u-btn-2) */
.fespsp-acontece .wp-block-post-excerpt__more-link {
	display: inline-block !important;
	margin: 14px 20px 20px !important;
	padding: 6px 14px !important;
	background: #bc2f2c !important;
	color: #fff !important;
	border-radius: 0 !important;
	border: 0 !important;
	font-family: "Open Sans", sans-serif !important;
	font-weight: 400 !important;
	font-size: 13px !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
}

.fespsp-acontece .wp-block-post-excerpt__more-link:hover {
	background: #a92a28 !important;
	color: #fff !important;
}

@media (max-width: 991px) {

	.fespsp-acontece .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {

	.fespsp-acontece .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}

/* =============================================================
   "A HISTÓRIA CONTADA POR QUEM VIVE" — 50/50 vídeo + texto
   Replica .u-section-4 do Nicepage original.
   ============================================================= */
.fespsp-historia {
	background: #fff;
	padding: 60px 0;
}

.fespsp-historia__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	box-sizing: border-box;
}

.fespsp-historia__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.fespsp-historia__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.fespsp-historia__title {
	font-family: Montserrat, sans-serif;
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 700;
	color: #111;
	line-height: 1.25;
	margin: 0 0 16px;
}

.fespsp-historia__body {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #53565a;
	margin: 0 0 12px;
}

@media (max-width: 991px) {

	.fespsp-historia__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* =============================================================
   BOTÕES — o botão default (tipografia, cor, padding e os estados
   :hover / :focus / :focus-visible / :active) vive em element.button
   no theme.json (WP 7.0, pseudo-elementos nativos = fonte única, sem
   CSS ad-hoc). Aqui ficam só as VARIAÇÕES de estilo (outline, pill).
   ============================================================= */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	color: #bc2f2c;
	border: 1px solid #bc2f2c;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #bc2f2c !important;
	color: #fff;
}

/* Botões round (telefone/whatsapp do footer) */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 50px;
	padding: 11px 25px 12px 23px;
}

/* =============================================================
   FOOTER — bg grey-80 (#333333), valores extraídos do Nicepage original:
     padding 0 (sheet interno tem margem),  min-height 740px, base 16px
   ============================================================= */
.fespsp-footer {
	background: #333;
	color: #fff;
	padding: 0;
	font-size: 16px;
	font-family: "Open Sans", sans-serif;
	line-height: 1.55;
	min-height: 740px;
}

/* Wrapper de conteúdo interno do footer — sheet 1140 centralizado */
.fespsp-footer > .wp-block-columns {
	width: 1140px !important;
	max-width: 100% !important;
	margin: 0 auto !important;
	padding: 43px 0 58px;
}

.fespsp-footer,
.fespsp-footer p,
.fespsp-footer li,
.fespsp-footer h1,
.fespsp-footer h2,
.fespsp-footer h3,
.fespsp-footer h4,
.fespsp-footer h5,
.fespsp-footer h6 {
	color: #fff;
}

.fespsp-footer a {
	color: #fff;
	text-decoration: none;
}

.fespsp-footer a:hover {
	color: #bc2f2c;
}

/* Logo branco do FESPSP — 253px exato (medido via Playwright) */
.fespsp-footer .wp-block-image.fespsp-footer__logo,
.fespsp-footer .wp-block-image.fespsp-footer__logo img,
.fespsp-footer__logo,
.fespsp-footer__logo img {
	max-width: 253px !important;
	width: 100%;
	height: auto;
	margin: 30px 0 20px !important;
	display: block;
}

/* Endereço — original: Roboto 12px, line-height ~1.6 (height 38.4 com 2 linhas) */
.fespsp-footer p {
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	margin: 20px 0 0;
	max-width: 405px;
}

/* Colunas de links — original computa Open Sans (apesar da classe u-heading-font,
   o seletor .u-text-4 override pra Open Sans). Font 12px peso 400.
   <strong> = peso 800 igual ao <span style="font-weight:800"> do original. */
.fespsp-footer__col {
	font-family: "Open Sans", sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
	color: #fff !important;
	margin: 0 0 16px !important;
}

.fespsp-footer__col strong {
	font-weight: 800 !important;
	font-size: 12px;
	color: #fff;
	display: inline-block;
	margin-bottom: 0;
}

.fespsp-footer__col a {
	color: #fff;
	text-decoration: none;
}

.fespsp-footer__col a:hover {
	color: #bc2f2c;
}

/* SIGA-NOS — h5 fica com letter-spacing maiúsculo */
.fespsp-footer h5.wp-block-heading {
	text-transform: uppercase !important;
	letter-spacing: 0.05em;
	font-size: 0.8125rem !important;  /* 13px */
	margin: 18px 0 8px !important;
}

/* Botões pill outline branco (telefone + whatsapp).
   Original Nicepage: Open Sans 14px 700, letter-spacing 1px, color #f2f2f2,
   padding 11px 25px 12px 23px, border 2px solid #f2f2f2, uppercase, radius 50px */
.fespsp-footer .wp-block-buttons {
	gap: 12px !important;
	margin: 23px 0 0 !important;
	flex-wrap: wrap;
}

.fespsp-footer .wp-block-button.is-style-outline .wp-block-button__link,
.fespsp-footer .fespsp-btn-pill .wp-block-button__link {
	background: transparent !important;
	color: #f2f2f2 !important;
	border: 2px solid #f2f2f2 !important;
	border-radius: 50px !important;
	padding: 11px 25px 12px 23px !important;
	font-family: "Open Sans", sans-serif !important;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px;
}

.fespsp-footer .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #bc2f2c !important;
	border-color: #bc2f2c !important;
	color: #fff !important;
}

/* Ícone do WhatsApp dentro do botão (SVG inline via mask) */
.fespsp-whats-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/></svg>") no-repeat center / contain;
}

/* Ícones sociais — SVGs próprios do Nicepage (substituem wp:social-links).
   Cada link é um quadrado com o SVG completo (círculo vermelho + ícone branco). */
.fespsp-footer__social {
	display: flex;
	gap: 10px;
	margin: 10px 0 28px;
}

.fespsp-footer__social a {
	display: inline-block;
	width: 36px;
	height: 36px;
	transition: opacity 0.15s ease;
}

.fespsp-footer__social a:hover {
	opacity: 0.82;
}

.fespsp-footer__social svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* SIGA-NOS — original: Roboto 16px 700 (heading font), sem letter-spacing
   nem text-transform (texto já é "SIGA-NOS" maiúsculo no HTML) */
.fespsp-footer h5.wp-block-heading.fespsp-footer__siga {
	font-family: Roboto, sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: #fff !important;
	margin: 30px 0 12px !important;
	display: inline-block !important;
	width: auto !important;
}

/* QR + e-MEC — layout horizontal igual Nicepage:
   QR Code à esquerda, e-MEC (logo em cima + texto embaixo) à direita */
.fespsp-emec {
	display: flex;
	flex-direction: row;
	gap: 18px;
	margin-top: 30px;
	align-items: flex-start;
}

.fespsp-emec__qr {
	width: 160px;
	height: 160px;
	background: #fff;
	padding: 5px;
	flex-shrink: 0;
}

.fespsp-emec__qr img {
	width: 100%;
	height: 100%;
	display: block;
}

.fespsp-emec__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	max-width: 220px;
	padding-top: 10px;
}

.fespsp-emec__text img {
	max-width: 90px;
	height: auto;
}

.fespsp-emec__text p {
	font-size: 0.85rem !important;
	line-height: 1.4;
	margin: 0 !important;
}

/* =============================================================
   FOOTER — responsivo (Bloco H/H13)
   No canon md (≤760) as colunas do footer institucional já empilham (core),
   mas os blocos que ficam à esquerda no desktop precisam centralizar: logo,
   endereço, botões (telefone/whats), ícones sociais e o bloco QR + e-MEC.
   (No microsite Projetos o footer é um override mínimo — só o crédito
   centralizado —, então estas regras servem o footer institucional do site
   principal, que herda o mesmo DS.)
   ============================================================= */
@media (max-width: 760px) {

	.fespsp-footer > .wp-block-columns > .wp-block-column,
	.fespsp-footer .wp-block-columns .wp-block-column {
		text-align: center;
	}

	.fespsp-footer .wp-block-buttons,
	.fespsp-footer__social {
		justify-content: center;
	}

	.fespsp-footer__logo img,
	.fespsp-footer .wp-block-site-logo img {
		margin-left: auto;
		margin-right: auto;
	}

	/* QR + e-MEC lado a lado centralizados; o endereço/parágrafo perde o
	   max-width que o prendia à esquerda. */
	.fespsp-emec {
		justify-content: center;
	}

	.fespsp-footer p {
		max-width: none;
	}
}

/* =============================================================
   FORMULÁRIOS (Contato, Newsletter, Ouvidoria, Trabalhe Conosco)
   Padrão Nicepage: input sem borda, radius 3px, fundo transparente
   ============================================================= */
.fespsp-form {
	max-width: 720px;
}

.fespsp-form .fespsp-form__fields {
	display: grid;
	row-gap: 20px;
}

.fespsp-form__honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.fespsp-form__actions {
	margin-top: 20px;
}

.fespsp-form__submit {
	background: #bc2f2c;
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 10px 30px;
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 1px;
	cursor: pointer;
}

.fespsp-form__submit:hover {
	background: #a92a28;
}

.fespsp-form__flash {
	padding: 14px 16px;
	margin-bottom: 20px;
	border-radius: 3px;
	font-family: Montserrat, sans-serif;
}

.fespsp-form__flash--success {
	background: #e6f7e6;
	color: #1f6e1f;
}

.fespsp-form__flash--error {
	background: #fdecec;
	color: #8a2222;
}

/* Campos */
.fespsp-field {
	display: flex;
	flex-direction: column;
}

.fespsp-field__label {
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 0.875rem;
	color: #53565a;
	margin-bottom: 8px;
}

.fespsp-field__required {
	color: #bc2f2c;
	margin-left: 3px;
}

.fespsp-field__input,
.fespsp-field__textarea,
.fespsp-field__select {
	border: 1px solid #d0d3d4;
	background: transparent;
	border-radius: 3px;
	padding: 10px 12px;
	font: inherit;
	color: #111;
	width: 100%;

	/* border-box: sem isso, width:100% + padding(24) + borda(2) = 26px além do
	   container → overflow horizontal da página em telas estreitas (Bloco H). */
	box-sizing: border-box;
}

.fespsp-field__input:focus,
.fespsp-field__textarea:focus,
.fespsp-field__select:focus {
	outline: none;
	border-color: #bc2f2c;
	box-shadow: 0 0 0 3px rgba(188, 47, 44, 0.15);
}

.fespsp-field__textarea {
	min-height: 130px;
	resize: vertical;
}

.fespsp-field__help {
	font-size: 0.85rem;
	color: #4d4d4d;
	margin-top: 4px;
}

/* =============================================================
   TEAM GRID — cards para "Conselho Superior", "Diretoria", etc.
   ============================================================= */
.fespsp-team-grid {
	gap: 24px !important;
	margin: 24px 0 !important;
}

.fespsp-team-grid .wp-block-column {
	padding: 0;
}

.fespsp-team-card {
	background: #f2f2f2;
	padding: 24px 22px;
	height: 100%;
	box-sizing: border-box;
	border-left: 3px solid #bc2f2c;
}

.fespsp-team-card__name {
	font-family: Roboto, sans-serif !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #111 !important;
	margin: 0 0 10px !important;
	line-height: 1.3 !important;
}

.fespsp-team-card__bio {
	font-family: "Open Sans", sans-serif !important;
	font-size: 13px !important;
	line-height: 1.55 !important;
	color: #53565a !important;
	margin: 0 !important;
}

/* =============================================================
   TEAM GRID (bloco custom) — wrapper do bloco fespsp/team-grid
   Mesmas regras visuais do .fespsp-team-grid antigo, mas grid CSS próprio.
   ============================================================= */
.fespsp-team-grid-block {
	width: 1140px;
	max-width: 100%;
	margin: 24px auto;
	box-sizing: border-box;
}

.fespsp-team-grid-block__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 991px) {

	.fespsp-team-grid-block__grid {
		grid-template-columns: 1fr;
	}
}

/* Foto do team-card (opcional) */
.fespsp-team-card__photo {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 14px;
	background: #ddd;
}

.fespsp-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Cargo (novo no bloco custom) */
.fespsp-team-card__role {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: #bc2f2c;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin: 0 0 6px;
}

/* =============================================================
   ACCORDION — core/details com visual Nicepage
   ============================================================= */
.wp-block-details {
	background: #f2f2f2;
	border-left: 3px solid #bc2f2c;
	margin: 12px 0 !important;
	padding: 16px 22px;
}

.wp-block-details > summary {
	font-family: Roboto, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	color: #111;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	font-size: 1.5rem;
	color: #bc2f2c;
	margin-left: 12px;
	transition: transform 0.2s ease;
}

.wp-block-details[open] > summary::after {
	content: "−";
}

.wp-block-details[open] > summary {
	margin-bottom: 12px;
}

.wp-block-details p {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #53565a;
	margin: 0 0 10px;
}

/* =============================================================
   PAGE HERO — hero institucional editorial bold
   Design: dark base + radial red glow + barra vermelha 60×4 + título XL
   Padrão de design moderno editorial (não centralizado, esquerda dominante,
   contraste alto com brand accent vermelho)
   ============================================================= */
.fespsp-page-hero {
	position: relative;
	overflow: hidden;
	min-height: 340px;
	padding: 90px 0;
	background-color: #1a1a1a;
	background-image:
		radial-gradient(ellipse at 100% 40%, rgba(188, 47, 44, 0.32) 0%, transparent 55%),
		linear-gradient(135deg, #1a1a1a 0%, #25292f 60%, #1a1a1a 100%);
	display: flex;
	align-items: center;
}

/* Forma diagonal decorativa vermelha no canto sup-direito */
.fespsp-page-hero::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -180px;
	width: 540px;
	height: 360px;
	background: #bc2f2c;
	transform: rotate(-18deg);
	opacity: 0.12;
	pointer-events: none;
}

/* Padrão de pontos sutis no fundo (textura) */
.fespsp-page-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
	background-size: 24px 24px;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 50%, transparent 100%);
	mask-image: linear-gradient(135deg, transparent 0%, #000 50%, transparent 100%);
}

.fespsp-page-hero__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
}

/* Barra vermelha como marker brand antes do título */
.fespsp-page-hero__bar {
	width: 64px;
	height: 4px;
	background: #bc2f2c;
	margin-bottom: 24px;
	border-radius: 2px;
	box-shadow: 0 0 24px rgba(188, 47, 44, 0.5);
}

/* TÍTULO XL com forte contraste */
.fespsp-page-hero .wp-block-post-title.fespsp-page-hero__title,
.fespsp-page-hero__title {
	font-family: Roboto, sans-serif !important;
	font-size: clamp(2.25rem, 5.5vw, 4rem) !important;
	font-weight: 700 !important;
	color: #fff !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em;
	margin: 0 !important;
	text-align: left !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
	max-width: 880px;
}

/* Subtítulo opcional do hero (usado na home do blog) */
.fespsp-page-hero__lead {
	font-family: "Open Sans", sans-serif !important;
	font-size: clamp(1rem, 1.4vw, 1.125rem) !important;
	line-height: 1.5 !important;
	color: rgba(255, 255, 255, 0.82) !important;
	margin: 18px 0 0 !important;
	max-width: 720px;
	text-align: left !important;
}

/* Mobile: ajustes */
@media (max-width: 767px) {

	.fespsp-page-hero {
		min-height: 260px;
		padding: 60px 0;
	}

	.fespsp-page-hero::before {
		width: 320px;
		height: 220px;
		right: -100px;
	}
}

/* =============================================================
   ACONTECE — barra de busca full-bleed abaixo do hero
   ============================================================= */
.fespsp-acontece-search {
	background: #f2f2f2;
	border-bottom: 1px solid #e5e5e5;
	padding: 22px 0;
}

.fespsp-acontece-search__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.fespsp-acontece-search .wp-block-search {
	margin: 0;
	max-width: 720px;
}

.fespsp-acontece-search .wp-block-search__inside-wrapper {
	background: #fff;
	border: 1px solid #d0d3d4;
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.fespsp-acontece-search .wp-block-search__input {
	border: 0 !important;
	background: transparent !important;
	padding: 12px 16px !important;
	font-family: "Open Sans", sans-serif !important;
	font-size: 14px !important;
	color: #111 !important;
	flex: 1;
}

.fespsp-acontece-search .wp-block-search__input:focus {
	outline: none;
	box-shadow: none;
}

.fespsp-acontece-search .wp-block-search__button {
	background: #bc2f2c !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 12px 22px !important;
	font-family: Montserrat, sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.fespsp-acontece-search .wp-block-search__button:hover {
	background: #a92a28 !important;
}

/* =============================================================
   STATS ROW — pattern fespsp/stats-row
   4 colunas com número grande vermelho + label cinza
   ============================================================= */
.fespsp-stats {
	width: 1140px;
	max-width: 100%;
	margin: 45px auto;
	padding: 40px 30px;
	background: #f2f2f2;
	box-sizing: border-box;
}

.fespsp-stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.fespsp-stats__cell {
	text-align: center;
}

.fespsp-stats__number {
	font-family: Roboto, sans-serif;
	font-size: 2.75rem;
	font-weight: 700;
	color: #bc2f2c;
	line-height: 1;
	margin: 0 0 8px;
}

.fespsp-stats__label {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #53565a;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 760px) {

	.fespsp-stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Variante "cards" (Projetos "FESPSP em números"): fundo transparente, 3 cards
   com borda vermelha-clara, ícone no topo e número grande (4.5rem/900) com
   contador on-scroll (src/stat/view.js atua só nesta variante). O padrão
   (grey-5, sem ícone/borda) — do "FESPSP em números" do site principal — fica
   intacto. */
.fespsp-stats--cards {
	background: transparent;
	padding: 0;
}

.fespsp-stats--cards .fespsp-stats__grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.fespsp-stats--cards .fespsp-stats__cell {
	border: 1px solid rgba(188, 47, 44, 0.25);
	border-radius: 8px;
	padding: 40px 24px 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.fespsp-stats--cards .fespsp-stats__icon {
	width: 56px;
	height: 56px;
	object-fit: contain;
	margin-bottom: 18px;
}

.fespsp-stats--cards .fespsp-stats__number {
	font-size: 4.5rem;
	font-weight: 900;
	margin-bottom: 10px;
}

@media (max-width: 760px) {

	.fespsp-stats--cards .fespsp-stats__grid {
		grid-template-columns: 1fr;
	}

	.fespsp-stats--cards .fespsp-stats__number {
		font-size: 3.25rem;
	}
}

/* Reveal on-scroll: a linha inteira desliza da esquerda (-200px) + fade em 2s,
   replicando o customAnimationIn do Nicepage (u-section-2 .u-list-1, translate_x
   -200px / opacity 0 / duration 2000). A classe .is-revealed é adicionada pelo
   view.js ao entrar na viewport; desligado em prefers-reduced-motion. `overflow-x:
   clip` evita barra horizontal durante o deslize. Estado natural = visível (sem JS). */
@media (prefers-reduced-motion: no-preference) {

	.fespsp-stats--cards {
		overflow-x: clip;
	}

	.fespsp-stats--cards.is-revealed .fespsp-stats__grid {
		animation: fespsp-stats-in 2000ms ease both;
	}
}

@keyframes fespsp-stats-in {

	from {
		transform: translateX(-200px);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* =============================================================
   LOGO STRIP — bloco fespsp/logo-strip (faixa de parceiros)
   Logos numa faixa rolável horizontal, com setas circulares (view.js).
   Espalha os logos quando cabem; rola quando passam da largura.
   ============================================================= */
.fespsp-logos {
	width: 100%;
	margin: 40px 0 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

.fespsp-logos__track {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.fespsp-logos__track::-webkit-scrollbar {
	display: none;
}

/* Cada logo ocupa uma COLUNA de 1/3 da faixa (3 por tela no desktop): as colunas
   preenchem exatamente a largura, sem sobra à direita → os logos ficam sempre
   distribuídos/centralizados a cada passo do scroll (o carrossel avança colunas
   inteiras). O logo, centrado na coluna, tem teto de tamanho (max-width/height) e
   contain: imagem maior reduz proporcionalmente até a MESMA caixa — nunca corta. */
.fespsp-logos__track .wp-block-image {
	flex: 0 0 calc((100% - 2 * 24px) / 3);
	height: 280px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fespsp-logos__track .wp-block-image img {
	max-width: 293px;
	max-height: 227px;
	width: auto;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* Quando tudo cabe, os logos se distribuem (sem rolagem, setas escondidas via .is-static). */
.fespsp-logos.is-static .fespsp-logos__track {
	justify-content: space-around;
}

.fespsp-logos__arrow {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background: #e5e5e5;
	color: #53565a;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.fespsp-logos__arrow:hover {
	background: #d0d3d4;
}

/* Some as setas quando todos os logos cabem (view.js marca .is-static). */
.fespsp-logos.is-static .fespsp-logos__arrow {
	display: none;
}

/* Mobile (Bloco H/H8): encolhe o slot e o teto do logo no celular — mantendo o
   scroll horizontal (overflow-x:auto) + setas. Setas a 44px (alvo de toque). */
@media (max-width: 760px) {

	.fespsp-logos__track .wp-block-image {
		flex-basis: calc((100% - 2 * 24px) / 3); /* 3 por tela no tablet */
		height: 160px;
	}

	.fespsp-logos__track .wp-block-image img {
		max-width: 180px;
		max-height: 130px;
	}

	.fespsp-logos__arrow {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 460px) {

	.fespsp-logos__track .wp-block-image {
		flex-basis: 100%; /* 1 por tela no smartphone — logo maior, ocupa a faixa toda */
		height: 200px;
	}

	.fespsp-logos__track .wp-block-image img {
		max-width: 240px;
		max-height: 180px;
	}
}

/* =============================================================
   TIMELINE — pattern fespsp/timeline
   Lista vertical com linha vertical vermelha e marcadores
   ============================================================= */
.fespsp-timeline {
	width: 1140px;
	max-width: 100%;
	margin: 45px auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.fespsp-timeline__title {
	font-family: Roboto, sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 30px;
}

.fespsp-timeline__list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}

.fespsp-timeline__list::before {
	content: "";
	position: absolute;
	left: 100px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: #bc2f2c;
}

.fespsp-timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 30px;
	margin-bottom: 30px;
}

.fespsp-timeline__item::before {
	content: "";
	position: absolute;
	left: 94px;
	top: 8px;
	width: 14px;
	height: 14px;
	background: #bc2f2c;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 0 0 2px #bc2f2c;
}

.fespsp-timeline__date {
	font-family: Roboto, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #bc2f2c;
	text-align: right;
	padding-right: 30px;
}

.fespsp-timeline__heading {
	font-family: Roboto, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 6px;
}

.fespsp-timeline__content p {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #53565a;
	margin: 0;
}

/* =============================================================
   IMAGE + TEXT SPLIT — pattern fespsp/img-text-split
   Layout 50/50 com imagem + texto. Adicione classe is-reverse para inverter
   ============================================================= */
.fespsp-imgtext {
	width: 1140px;
	max-width: 100%;
	margin: 45px auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 380px;
	box-sizing: border-box;
}

.fespsp-imgtext.is-reverse {
	direction: rtl;
}

.fespsp-imgtext.is-reverse > * {
	direction: ltr;
}

.fespsp-imgtext__image {
	background-size: cover;
	background-position: center;
}

.fespsp-imgtext__text {
	background: #f2f2f2;
	padding: 50px 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.fespsp-imgtext__title {
	font-family: Roboto, sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 16px;
}

.fespsp-imgtext__body {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 1.65;
	color: #53565a;
	margin: 0 0 20px;
}

.fespsp-imgtext__cta {
	display: inline-block;
	padding: 10px 30px;
	background: #bc2f2c;
	color: #fff;
	text-decoration: none;
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	align-self: flex-start;
}

.fespsp-imgtext__cta:hover {
	background: #a92a28;
	color: #fff;
}

@media (max-width: 767px) {

	.fespsp-imgtext {
		grid-template-columns: 1fr;
	}

	.fespsp-imgtext__image {
		min-height: 240px;
	}
}

/* =============================================================
   Parágrafo "large" — usado para meta/intro nas páginas internas
   ============================================================= */
.has-large-font-size {
	font-family: Roboto, sans-serif !important;
	font-size: 1.25rem !important;
	line-height: 1.5 !important;
	font-weight: 400 !important;
	color: #111 !important;
	margin: 0 0 30px !important;
}

/* =============================================================
   SINGLE POST
   ============================================================= */
.fespsp-post-hero {
	min-height: 320px;
	background-size: cover;
	background-position: center;
}

/* =============================================================
   SECTION TITLE — H2 institucional com barra brand acima
   Usado nas páginas internas para abrir cada seção.
   ============================================================= */
.fespsp-section-title {
	font-family: Roboto, sans-serif !important;
	font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
	font-weight: 700 !important;
	color: #111 !important;
	line-height: 1.2 !important;
	margin: 56px 0 22px !important;
	position: relative;
	padding-top: 16px;
}

.fespsp-section-title::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 3px;
	background: #bc2f2c;
	border-radius: 2px;
}

/* =============================================================
   PAGE NAV — pattern fespsp/page-nav
   Barra horizontal sticky de âncoras para seções dentro da página.
   Cole logo após o hero institucional.
   ============================================================= */
.fespsp-page-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.fespsp-page-nav__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	box-sizing: border-box;
}

.fespsp-page-nav__link {
	display: inline-flex;
	align-items: center;
	padding: 14px 18px;
	font-family: Montserrat, sans-serif;
	font-weight: 500;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #53565a;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

.fespsp-page-nav__link:hover,
.fespsp-page-nav__link:focus-visible {
	color: #bc2f2c;
	border-bottom-color: #bc2f2c;
}

/* Sections-alvo: oferece offset para o scroll considerar a sticky bar */
:where(#historia, #missao, #linha-do-tempo, #conselho, #diretoria, #relatorios) {
	scroll-margin-top: 72px;
}

@media (max-width: 767px) {

	.fespsp-page-nav__inner {
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 0;
	}

	.fespsp-page-nav__link {
		padding: 12px 14px;
		font-size: 12px;
	}
}

/* =============================================================
   VALUES GRID — pattern fespsp/values-grid
   Três cards (Missão / Visão / Valores) com ícone, título e descrição.
   ============================================================= */
.fespsp-values {
	width: 1140px;
	max-width: 100%;
	margin: 60px auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.fespsp-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.fespsp-values__card {
	background: #fff;
	border: 1px solid #ececec;
	border-top: 3px solid #bc2f2c;
	padding: 36px 28px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fespsp-values__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

.fespsp-values__icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(188, 47, 44, 0.08);
	color: var(--wp--preset--color--brand, #bc2f2c);
	border-radius: 50%;
	margin-bottom: 20px;
}

.fespsp-values__icon svg,
.fespsp-values__icon img {
	width: 28px;
	height: 28px;
	object-fit: contain;
	display: block;
}

.fespsp-values__title {
	font-family: Roboto, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 12px;
	line-height: 1.2;
}

.fespsp-values__body {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.65;
	color: #53565a;
	margin: 0;
}

@media (max-width: 980px) {

	.fespsp-values__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* Variante "boxed" (Projetos "Áreas de atuação"): card com borda completa
   arredondada, ícone sem círculo (maior) e conteúdo centralizado, sem corpo.
   O padrão (Missão/Visão/Valores do site principal) segue com borda-topo
   vermelha + ícone em círculo, à esquerda. Fluida p/ caber numa coluna
   (o `.fespsp-values` base é 1140px fixo). */
.fespsp-values--boxed {
	width: 100%;
	margin: 0;
	padding: 0;
}

.fespsp-values--boxed .fespsp-values__grid {
	gap: 24px;
}

.fespsp-values--boxed .fespsp-values__card {
	border: 1px solid #d9d9d9;
	border-radius: 14px;
	align-items: center;
	text-align: center;
	padding: 30px 20px;
}

.fespsp-values--boxed .fespsp-values__icon {
	background: transparent;
	border-radius: 0;
	width: auto;
	height: auto;
	margin-bottom: 16px;
}

.fespsp-values--boxed .fespsp-values__icon img,
.fespsp-values--boxed .fespsp-values__icon svg {
	width: 48px;
	height: 48px;
}

.fespsp-values--boxed .fespsp-values__title {
	margin-bottom: 0;
}

/* Áreas (--boxed) — grade responsiva 3 → 2 → 1 (Bloco H/H6). Sobrepõe o
   colapso 3→1 do `.fespsp-values` base (que serve os 3 cards Missão/Visão/
   Valores do site principal). Casa o Nicepage: 3 col no md (intro empilha
   por cima via composição), 2 col no sm, 1 col no smartphone. */
@media (max-width: 980px) {

	.fespsp-values--boxed .fespsp-values__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 760px) {

	.fespsp-values--boxed .fespsp-values__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {

	.fespsp-values--boxed .fespsp-values__grid {
		grid-template-columns: 1fr;
	}
}

/* Card com modal (Áreas de atuação): o card inteiro é um gatilho (button
   reset) que abre um <dialog> nativo — replica os popups do Nicepage. O botão
   herda o layout do card boxed (coluna centrada); o card guarda o hover. */
.fespsp-values__card--modal {
	padding: 0;
}

.fespsp-values__trigger {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px 20px;
	cursor: pointer;
}

/* <button> só aceita conteúdo de fluxo em linha, então o título é um <span>
   (h3 seria inválido). word-break:keep-all + overflow-wrap:normal impedem
   quebra no meio de palavra longa (Sustentabilidade fica em 1 linha, transborda
   de leve dentro do card como fazia o <h3>); títulos de 2 palavras
   (Desenvolvimento Social) ainda quebram no espaço. */
.fespsp-values__card--modal .fespsp-values__title {
	display: block;
	width: 100%;
	margin: 0;
	overflow-wrap: normal;
	word-break: keep-all;
}

/* Diálogo (modal). <dialog> nativo: showModal() gera o ::backdrop no top-layer,
   prende o foco e liga o Esc. padding:0 no dialog e no ::backdrop escuro deixam
   o clique fora do miolo (.fespsp-values__dialog-inner) fechar via backdropClose. */
.fespsp-values__dialog {
	width: 698px;
	max-width: calc(100vw - 40px);
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: #53565a;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.fespsp-values__dialog::backdrop {
	background: rgba(0, 0, 0, 0.7);
}

.fespsp-values__dialog-inner {
	position: relative;
	padding: 56px 40px 48px;
	text-align: center;
}

.fespsp-values__dialog-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	color: #9a9a9a;
	cursor: pointer;
	transition: color 0.2s ease;
}

.fespsp-values__dialog-close:hover {
	color: #111;
}

.fespsp-values__dialog-close svg {
	width: 16px;
	height: 16px;
	fill: currentcolor;
}

.fespsp-values__dialog-icon {
	margin: 0 auto 8px;
}

.fespsp-values__dialog-icon img {
	width: 120px;
	height: auto;
	max-height: 120px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
}

.fespsp-values__dialog-title {
	font-family: Montserrat, sans-serif;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--wp--preset--color--brand, #bc2f2c);
	margin: 0 0 18px;
}

.fespsp-values__dialog-body {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #53565a;
	margin: 0 auto;
	max-width: 545px;
}

/* Frase em destaque: linha opcional que fecha o modal, na cor da marca. Sai do
   fluxo tipográfico do corpo de propósito (Montserrat, como o título) — é um
   remate, não continuação do texto. Só renderiza quando preenchida. */
.fespsp-values__dialog-highlight {
	font-family: Montserrat, sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--wp--preset--color--brand, #bc2f2c);
	margin: 18px auto 0;
	max-width: 545px;
}

/* Indicador só no editor (badge "modal" no canto do card). */
.fespsp-values__modal-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #bc2f2c;
	background: rgba(188, 47, 44, 0.1);
	border-radius: 999px;
	padding: 2px 8px;
	pointer-events: none;
}

@media (max-width: 575px) {

	.fespsp-values__dialog-inner {
		padding: 48px 24px 36px;
	}

	.fespsp-values__dialog-icon img {
		width: 96px;
	}

	.fespsp-values__dialog-title {
		font-size: 1.4rem;
	}
}

/* =============================================================
   PULLQUOTE — pattern fespsp/pullquote
   Banner brand-red full-width com citação grande Montserrat e mark decorativo.
   ============================================================= */
.fespsp-pullquote {
	background: #bc2f2c;
	color: #fff;
	padding: 70px 30px;
	margin: 60px 0;
	position: relative;
	overflow: hidden;
}

.fespsp-pullquote::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 45%);
	pointer-events: none;
}

.fespsp-pullquote__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 30px;
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	text-align: center;
}

.fespsp-pullquote__mark {
	font-family: Montserrat, sans-serif;
	font-size: 8rem;
	font-weight: 700;
	line-height: 0.7;
	color: rgba(255, 255, 255, 0.22);
	margin-bottom: 10px;
	-webkit-user-select: none;
	user-select: none;
}

.fespsp-pullquote__text {
	font-family: Montserrat, sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 500;
	line-height: 1.3;
	color: #fff;
	margin: 0 auto 24px;
	max-width: 860px;
	border: 0;
	padding: 0;
	font-style: normal;
}

.fespsp-pullquote__cite {
	font-family: "Open Sans", sans-serif;
	font-size: 13px;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.85);
	display: inline-block;
}

@media (max-width: 767px) {

	.fespsp-pullquote {
		padding: 50px 20px;
	}

	.fespsp-pullquote__mark {
		font-size: 5rem;
	}
}

/* =============================================================
   RELATED PAGES — pattern fespsp/related-pages
   Grid 3 colunas de cards cross-link com cover 16:9 e hover lift.
   ============================================================= */
.fespsp-related {
	width: 1140px;
	max-width: 100%;
	margin: 60px auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.fespsp-related__inner {
	display: block;
}

.fespsp-related__title {
	font-family: Roboto, sans-serif;
	font-size: 1.75rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 30px;
	line-height: 1.2;
}

.fespsp-related__grid {
	display: grid;

	/* Contagem de colunas via custom property (render.php a define p/ columns≠3).
	   Fallback 3. As media queries abaixo (Bloco H/H10) fazem 4/3/2 → 2 → 1. */
	grid-template-columns: repeat(var(--related-cols, 3), 1fr);
	gap: 24px;
}

.fespsp-related__card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ececec;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.fespsp-related__card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
	border-color: #bc2f2c;
}

.fespsp-related__cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-image: var(--fespsp-cover);
	background-size: cover;
	background-position: center;
	background-color: #f2f2f2;
}

.fespsp-related__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.fespsp-related__kicker {
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #bc2f2c;
	margin-bottom: 8px;
}

.fespsp-related__heading {
	font-family: Roboto, sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	color: #111;
	margin: 0 0 8px;
	line-height: 1.25;
}

.fespsp-related__lead {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: #53565a;
	margin: 0 0 14px;
	flex: 1;
}

.fespsp-related__more {
	font-family: Montserrat, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #bc2f2c;
	letter-spacing: 0.02em;
	margin-top: auto;
}

.fespsp-related__card:hover .fespsp-related__more {
	color: #a92a28;
}

@media (max-width: 980px) {

	.fespsp-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 460px) {

	.fespsp-related__grid {
		grid-template-columns: 1fr;
	}
}

/* Variante "cards" do related-pages — seção Relatórios/Publicações do microsite
   Projetos: card cinza-claro sem borda, capa retrato, sem kicker, e o "more" vira
   botão cinza sólido. O padrão (branco + borda + link "Conheça →") do site
   principal fica intacto. Aplicada via className fespsp-related--cards. */
.fespsp-related--cards {
	width: 1140px;
	max-width: 100%;
	margin: 24px auto 0;
	padding: 0;
	box-sizing: border-box;
}

.fespsp-related--cards .fespsp-related__card {
	background: #f2f2f2;
	border: 0;
}

.fespsp-related--cards .fespsp-related__card:hover {
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
	border-color: transparent;
}

.fespsp-related--cards .fespsp-related__cover {
	aspect-ratio: 4 / 3;
	background-color: #e5e5e5;
}

.fespsp-related--cards .fespsp-related__heading {
	font-size: 1.25rem;
}

.fespsp-related--cards .fespsp-related__more {
	align-self: flex-start;
	background: #53565a;
	color: #fff;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	padding: 10px 30px;
	margin-top: 16px;
}

.fespsp-related--cards .fespsp-related__card:hover .fespsp-related__more {
	color: #fff;
	background: #bc2f2c;
}

/* Variante "carrossel" do related-pages — um card por vez em showcase (capa retrato
   + texto lado a lado), com setas circulares e autoplay (view.js / Interactivity API).
   Mesmo desenho de setas do news-carousel/logo-strip. Aplicada via carousel=true no
   render.php (classe fespsp-related--carousel) e refletida no editor (grid de 1 coluna). */
.fespsp-related--carousel {
	width: 1140px;
	max-width: 100%;
	margin: 24px auto 0;
	padding: 0;
	box-sizing: border-box;
}

/* Container flex: [seta] [viewport] [seta] — igual ao news-carousel. */
.fespsp-related__carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
}

.fespsp-related__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;

	/* Altura acompanha o slide ativo (definida pelo view.js) → sem "vão" cinza quando
	   um card tem menos texto que os vizinhos. Anima junto com o deslize. */
	transition: height 0.4s ease;
}

/* flex-start (não stretch): cada slide tem a altura do próprio conteúdo — um card com
   pouco texto NÃO é esticado à altura do card mais alto (era o vão cinza no mobile). */
.fespsp-related__track {
	display: flex;
	align-items: flex-start;
	gap: 0;
	transition: transform 0.5s ease;
	will-change: transform;
}

/* Um slide por página: card ocupa 100% da viewport e vira linha (capa + texto).
   overflow visível p/ a capa transbordar o retângulo cinza (a viewport é quem clampa). */
.fespsp-related--carousel .fespsp-related__card {
	flex: 0 0 100%;

	/* min-width:0 anula o min-width:auto padrão de flex-item: sem isso, o flex-shrink:0
	   (flex 0 0 100%) somado ao min-content do conteúdo deixa o card MAIS LARGO que a
	   viewport e o texto/capa vazam pela direita (bug do mobile). */
	min-width: 0;
	flex-direction: row;
	align-items: stretch;
	background: #f2f2f2;
	border: 0;
	overflow: visible;
	min-height: 360px;
}

/* Sem "lift" no hover — o card é largo e o slide todo é clicável. */
.fespsp-related--carousel .fespsp-related__card:hover {
	transform: none;
	box-shadow: none;
	border-color: transparent;
}

.fespsp-related--carousel .fespsp-related__cover {
	flex: 0 0 42%;
	width: 42%;
	aspect-ratio: auto;
	align-self: stretch;
	background-color: #e5e5e5;
	background-size: cover;
	background-position: center;
}

.fespsp-related--carousel .fespsp-related__body {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
	padding: 48px 64px;
}

.fespsp-related--carousel .fespsp-related__heading {
	font-family: Montserrat, sans-serif;
	font-size: 1.875rem;
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 18px;
}

.fespsp-related--carousel .fespsp-related__lead {
	font-family: "Open Sans", sans-serif;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #53565a;
	margin: 0 0 24px;
	flex: 0 0 auto;
}

/* "Leia mais →": link de texto (não o botão sólido da variante cards). */
.fespsp-related--carousel .fespsp-related__more {
	align-self: flex-start;
	background: none;
	padding: 0;
	margin-top: 0;
	font-family: Montserrat, sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	text-transform: none;
	color: #111;
	transition: color 0.15s ease;
}

/* Seta "→" ao lado do "Saiba mais" (como no mockup), sem alterar o texto do conteúdo.
   Desliza pra direita no hover do card. */
.fespsp-related--carousel .fespsp-related__more::after {
	content: "\2192";
	display: inline-block;
	margin-left: 12px;
	transition: transform 0.15s ease;
}

.fespsp-related--carousel .fespsp-related__card:hover .fespsp-related__more {
	background: none;
	color: #bc2f2c;
}

.fespsp-related--carousel .fespsp-related__card:hover .fespsp-related__more::after {
	transform: translateX(4px);
}

/* Setas — mesmo círculo cinza do news-carousel/logo-strip, um pouco maiores. */
.fespsp-related__arrow {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: #e5e5e5;
	color: #53565a;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease;
}

.fespsp-related__arrow:hover {
	background: #d0d3d4;
}

/* Tablet/mobile: empilha capa em cima e texto embaixo; setas menores. */
@media (max-width: 782px) {

	/* Todos os slides com a MESMA altura (a do mais alto) → a viewport não fica
	   aumentando/diminuindo ao trocar de slide. Como a descrição é colapsada em 5 linhas
	   (abaixo), a altura fica contida; o view.js lê a mesma offsetHeight p/ todos. */
	.fespsp-related__track {
		align-items: stretch;
	}

	.fespsp-related--carousel .fespsp-related__card {
		flex-direction: column;
	}

	.fespsp-related--carousel .fespsp-related__cover {
		flex-basis: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.fespsp-related--carousel .fespsp-related__body {
		padding: 32px 28px 36px;
	}

	/* Colapsa a descrição no mobile: limita a 5 linhas (o "Saiba mais →" leva ao texto
	   completo) — evita cards altíssimos quando a descrição é longa. */
	.fespsp-related--carousel .fespsp-related__lead {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		overflow: hidden;
	}

	.fespsp-related__arrow {
		width: 44px;
		height: 44px;
		font-size: 22px;
	}

	.fespsp-related__carousel {
		gap: 8px;
	}
}

/* Efeito "flutuante" — APENAS no desktop (layout capa+texto lado a lado): a capa
   transborda o retângulo cinza SÓ no topo; embaixo fica contida (sobra cinza abaixo).
   Margens assimétricas na capa (align-self:stretch): topo negativo sobe além do card,
   base positiva recolhe pra dentro. A folga do transbordo superior vem do padding-top
   da viewport (o overflow:hidden clampa no padding-box → o topo fica visível; horizontal
   segue clampando os slides). No tablet/mobile a capa fica rente. */
@media (min-width: 981px) {

	.fespsp-related__viewport {
		padding: 44px 0 0;
	}

	/* margin: topo(-) transborda · direita 0 · base(+) recolhe · esquerda(+) recua a capa
	   pra dentro do cinza, deixando uma margem cinza à esquerda (como no mockup). */
	.fespsp-related--carousel .fespsp-related__cover {
		margin: -36px 0 40px 48px;
		box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
	}
}

/* =============================================================
   COMPARTILHAR — bloco fespsp/share
   Botões redondos com o glifo da rede; o de "copiar link" acende um aviso
   discreto ao lado. Ícones em currentColor, então o hover troca a cor de uma vez.
   ============================================================= */
.fespsp-share {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.fespsp-share__label {
	font-family: Montserrat, sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #7a7d81;
}

.fespsp-share__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fespsp-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid #e0e0e0;
	border-radius: 50%;
	background: #fff;
	color: #53565a;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fespsp-share__btn svg {
	width: 16px;
	height: 16px;
}

.fespsp-share__btn:hover,
.fespsp-share__btn:focus-visible {
	background: #bc2f2c;
	border-color: #bc2f2c;
	color: #fff;
}

/* Confirmação do "copiar": o botão fica verde por alguns segundos (o view.js
   liga/desliga a classe) e o aviso de texto aparece ao lado. */
.fespsp-share__btn--copy.is-copied,
.fespsp-share__btn--copy.is-copied:hover {
	background: #2e7d32;
	border-color: #2e7d32;
	color: #fff;
}

.fespsp-share__feedback {
	font-size: 0.85rem;
	color: #2e7d32;
}

/* =============================================================
   CAPA A4 ("capa de livro") — componente .fespsp-cover-a4
   -------------------------------------------------------------
   A capa tem a proporção de uma folha A4 em retrato (1:√2), como a capa de um
   livro/relatório. A arte NÃO é recortada: cabe inteira dentro do A4
   (background-size:contain) e a sobra é preenchida por uma versão expandida da
   própria imagem — desfocada, dessaturada e escurecida em degradê, com vinheta.
   Assim uma foto paisagem vira uma capa apresentável sem cortar o assunto, e uma
   arte que já é A4 preenche o quadro (o fundo simplesmente não aparece).

   Três camadas, todas alimentadas pela mesma --fespsp-cover (definida inline no
   render): ::before = fundo expandido · ::after = degradê+vinheta · a camada da
   arte = a imagem contida, com sombra projetada para "descolar" do fundo.

   Uso: .fespsp-cover-a4 no quadro + .fespsp-cover-a4__art na camada da arte, com
   --fespsp-cover:url(...) no quadro. Dentro do fespsp/related-pages a variante
   fespsp-related--a4 aplica a mesma receita nos elementos que o card já tem — por
   isso os seletores vêm em par.
   ============================================================= */
:is(.fespsp-cover-a4, .fespsp-related--a4 .fespsp-related__cover) {
	position: relative;
	aspect-ratio: 1 / 1.4142;
	overflow: hidden;
	background-image: none;
	background-color: #17181a;
}

:is(.fespsp-cover-a4, .fespsp-related--a4 .fespsp-related__cover)::before {
	content: "";
	position: absolute;

	/* Sangra além do quadro: o blur puxa transparência das bordas e deixaria uma
	   moldura clara se a camada terminasse rente. */
	inset: -12%;
	background-image: var(--fespsp-cover);
	background-size: cover;
	background-position: center;

	/* Escurece o suficiente para a arte se destacar, mas sem apagar a textura — o
	   fundo precisa ler como "a mesma imagem ampliada", não como uma tarja. */
	filter: blur(30px) saturate(0.85) brightness(0.72);
}

:is(.fespsp-cover-a4, .fespsp-related--a4 .fespsp-related__cover)::after {
	content: "";
	position: absolute;
	inset: 0;

	/* Degradê simétrico + vinheta: escurece as pontas e alivia no miolo, onde a arte
	   fica — o fundo emoldura a capa (efeito de foco) em vez de só pesar embaixo. A
	   base é um pouco mais escura que o topo, para a capa "assentar". */
	background:
		linear-gradient(180deg, rgba(10, 11, 12, 0.45) 0%, rgba(10, 11, 12, 0.1) 42%, rgba(10, 11, 12, 0.2) 62%, rgba(10, 11, 12, 0.62) 100%),
		radial-gradient(110% 75% at 50% 50%, rgba(10, 11, 12, 0) 45%, rgba(10, 11, 12, 0.35) 100%);
}

:is(.fespsp-cover-a4__art, .fespsp-related--a4 .fespsp-related__cover-art) {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--fespsp-cover);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	/* drop-shadow (e não box-shadow) segue o recorte real da arte contida — a sombra
	   nasce na borda da imagem, não no retângulo da camada. */
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.55));
}

/* No carrossel a capa é um objeto ao lado do texto: em vez de esticar na altura do
   card (que quebraria a proporção), ela tem altura fixa e a largura sai do A4. */
@media (min-width: 981px) {

	.fespsp-related--carousel.fespsp-related--a4 .fespsp-related__cover {
		flex: 0 0 auto;
		width: auto;

		/* 520px de altura → ~368px de largura no A4. O texto do showcase é curto
		   (título + CTA), então a capa é quem carrega o peso visual do slide. */
		height: 520px;
		align-self: center;
	}
}

/* Empilhado (tablet/mobile): a capa centraliza no card em vez de ocupar a largura
   toda — um A4 de 390px de largura teria 551px de altura e comeria a tela inteira.
   O teto em vh mantém a capa dentro do campo de visão em qualquer aparelho. */
@media (max-width: 980px) {

	.fespsp-related--carousel.fespsp-related--a4 .fespsp-related__cover {
		width: min(100%, calc(58vh / 1.4142));
		aspect-ratio: 1 / 1.4142;
		margin-inline: auto;
	}
}

/* =============================================================
   FEATURE-SPLIT — bloco fespsp/feature-split
   Seção 50/50 imagem + texto + CTA. Suporta inverter o lado (is-reverse)
   e imagem cover (padrão) ou contain (logo/ilustração).
   ============================================================= */
.fespsp-feature__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
}

.fespsp-feature.is-reverse .fespsp-feature__media {
	order: 2;
}

.fespsp-feature__media {
	min-height: 420px;
	height: 100%;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
}

.fespsp-feature--contain .fespsp-feature__media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	min-height: 320px;
}

.fespsp-feature--contain .fespsp-feature__media img {
	max-width: 100%;
	height: auto;
	display: block;
}

.fespsp-feature__text {
	padding: 48px 44px;
}

.fespsp-feature__title {
	font-family: Montserrat, sans-serif;
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.2;
	color: #bc2f2c;
	margin: 0 0 18px;
}

.fespsp-feature__body {
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.65;
	color: #53565a;
	margin: 0 0 24px;
}

.fespsp-feature__body p {
	margin: 0 0 14px;
}

.fespsp-feature__body p:last-child {
	margin-bottom: 0;
}

.fespsp-feature__cta {
	display: inline-block;
	font-family: Montserrat, sans-serif;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	color: #bc2f2c;
	border: 2px solid #bc2f2c;
	padding: 10px 30px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.fespsp-feature__cta:hover {
	background-color: #bc2f2c;
	color: #fff;
}

/* Empilha no canon md (Bloco H/H9). Era 767; normalizado p/ 760. As duas
   seções da Home (Núcleo/SuperAção) são reverse:false → mídia em cima, texto
   embaixo (ordem do DOM), batendo o Nicepage. O reset de `order` mantém o
   controle de ordem quando a variante is-reverse for usada. */
@media (max-width: 760px) {

	.fespsp-feature__inner {
		grid-template-columns: 1fr;
	}

	.fespsp-feature.is-reverse .fespsp-feature__media {
		order: 0;
	}

	.fespsp-feature__media {
		min-height: 260px;
	}

	.fespsp-feature__text {
		padding: 32px 24px;
	}
}

/* =============================================================
   HERO — painel de marca (texto branco) + imagem full-bleed.
   Geometria extraída do Nicepage (u-section-1). Aplica-se a um
   bloco core/columns com className "fespsp-hero": coluna 1 =
   has-brand-background-color (texto), coluna 2 = imagem cover.
   O texto branco vive aqui porque o preset has-white-color não
   vence a cascata neste tema (ver nota do CTA newsletter).
   ============================================================= */

/* Grid determinístico em vez do flex do core: tracks de largura fixa não
   sofrem "blowout" pelo padding-left de 294px (o flex inflava a coluna
   além dos 53%). min-width:0 nos itens deixa o texto quebrar dentro do track. */
.fespsp-hero.wp-block-columns {
	display: grid !important;
	grid-template-columns: 53.3% 46.7%;
	gap: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.fespsp-hero .wp-block-column {
	min-width: 0;
}

/* Coluna de texto (vermelha): branco, alto, alinhado ao topo, com o
   recuo esquerdo generoso do original. */
.fespsp-hero .wp-block-column.has-brand-background-color {
	min-height: 1008px;

	/* Recuo esquerdo fluido: 294px é o canon do Nicepage e permanece exato em
	   telas largas (≈1400px+, o clamp trava no máximo); abaixo disso encolhe
	   junto com a coluna % para não estrangular a caixa de texto. */
	padding: 0 0 0 clamp(40px, 21vw, 294px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.fespsp-hero .wp-block-column.has-brand-background-color .wp-block-heading {
	color: #fff !important;

	/* margin-right também fluido (canon 194px) pela mesma razão. */
	margin: 195px clamp(24px, 13.9vw, 194px) 0 0;

	/* Tipografia fluida: nunca passa do canon 2.5rem em tela larga, mas encolhe
	   com o viewport em vez de deixar palavra longa ("desenvolvimento") quebrar.
	   keep-all + overflow-wrap:normal proíbem a quebra no meio da palavra. */
	font-size: clamp(1.875rem, 2.85vw, 2.5rem) !important;
	overflow-wrap: normal;
	word-break: keep-all;

	/* Sem <br> no markup: o browser distribui as linhas de forma equilibrada,
	   evitando palavra/artigo órfão em qualquer resolução. */
	text-wrap: balance;
}

.fespsp-hero .wp-block-column.has-brand-background-color p {
	color: #fff !important;
	margin: 21px 136px 0 0;
}

/* Coluna da imagem: full-bleed, recortada em cover à altura do painel. */
.fespsp-hero .wp-block-column:not(.has-brand-background-color) {
	flex-grow: 1;
	padding: 0;
}

.fespsp-hero .wp-block-image {
	margin: 0;
}

.fespsp-hero .wp-block-image img {
	width: 100%;
	height: 1008px;
	object-fit: cover;
	border-radius: 0 !important;
	display: block;
}

@media (max-width: 1199px) {

	.fespsp-hero .wp-block-column.has-brand-background-color {
		min-height: 831px;
		padding-left: 50px;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color .wp-block-heading {
		font-size: 2.25rem !important;
		font-weight: 700 !important;
		margin: 115px 78px 0 52px;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color p {
		margin: 15px 44px 0 52px;
	}

	.fespsp-hero .wp-block-image img {
		height: 831px;
	}
}

@media (max-width: 991px) {

	.fespsp-hero .wp-block-column.has-brand-background-color {
		padding-left: 30px;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color .wp-block-heading {
		margin: 124px 30px 0 25px;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color p {
		margin: 15px 42px 0 61px;
	}
}

/* Tablet/mobile (≤760, canon md — Bloco H/H3): as colunas empilham. O grid do
   desktop é fixo em 2 tracks e NÃO colapsa sozinho, então forçamos 1 coluna
   aqui. Texto em cima, imagem embaixo (ordem do DOM), como o Nicepage no range
   SM. Heading 32px/700 e corpo 16px/400 batem o original; recuo lateral ~32px
   (o desktop usa 294px). O antigo corte 781px (que só tirava alturas, sem
   colapsar o grid → o hero nunca empilhou) foi normalizado p/ o canon 760. */
@media (max-width: 760px) {

	.fespsp-hero.wp-block-columns {
		grid-template-columns: 1fr;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color {
		min-height: 0;
		padding: 44px 32px;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color .wp-block-heading {
		font-size: 2rem !important;
		margin: 0;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color p {
		margin: 16px 0 0;
	}

	/* Imagem full-width, sem altura fixa — não estoura nem estica. */
	.fespsp-hero .wp-block-image img {
		height: auto;
	}
}

/* Smartphone (≤460, canon sm): o Nicepage inverte a ordem (imagem em cima,
   painel de texto embaixo) e aperta o respiro lateral. */
@media (max-width: 460px) {

	.fespsp-hero .wp-block-column:not(.has-brand-background-color) {
		order: -1;
	}

	.fespsp-hero .wp-block-column.has-brand-background-color {
		padding: 32px 16px;
	}
}

/* =============================================================
   NOTÍCIAS — cards da query "Últimas notícias" (core/query com
   className `fespsp-noticias`): foto no topo + caixa cinza-claro
   (#f2f2f2) com título, data e botão "Saiba mais" cinza sólido.
   Extraído do Nicepage (u-section-5). Reutilizável entre sites.
   ============================================================= */
.fespsp-noticias .wp-block-post-template {
	gap: 30px;
}

.fespsp-noticias li.wp-block-post {
	background: #f2f2f2;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.fespsp-noticias .wp-block-post-featured-image {
	margin: 0 0 20px;
}

.fespsp-noticias .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
}

.fespsp-noticias .wp-block-post-title,
.fespsp-noticias .wp-block-post-date,
.fespsp-noticias .wp-block-read-more {
	margin-left: 24px;
	margin-right: 24px;
}

.fespsp-noticias .wp-block-post-title {
	font-family: Montserrat, sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	color: #111;
	margin-top: 0;
	margin-bottom: 12px;
}

.fespsp-noticias .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.fespsp-noticias .wp-block-post-date {
	font-size: 0.875rem;
	color: #8a8d91;
	margin-bottom: 18px;
}

.fespsp-noticias .wp-block-read-more {
	display: inline-block;
	align-self: flex-start;
	background: #53565a;
	color: #fff;
	text-decoration: none;
	font-family: "Open Sans", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	padding: 10px 30px;
	margin-bottom: 24px;
	transition: background-color 0.2s ease;
}

.fespsp-noticias .wp-block-read-more:hover {
	background: #bc2f2c;
}

/* Grade de posts responsiva 3 → 2 → 1 (Bloco H/H7). O core/query (grid,
   columnCount:3) colapsa sozinho via container-query, mas pulava direto p/ 1
   col deixando o tablet com 3 col apertadas; fixamos os cortes no canon.
   !important vence o grid-template gerado por instância do core. A capa
   mantém a proporção 3/2 (aspect-ratio no featured-image, herdado). */
@media (max-width: 760px) {

	.fespsp-noticias .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 460px) {

	.fespsp-noticias .wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* =============================================================
   PRECEDÊNCIA DE COR DE TEXTO — colisão do slug `text`
   ----------------------------------------------------------------
   O editor de blocos adiciona a classe-marcador genérica `.has-text-color`
   a QUALQUER texto com cor customizada. Como a paleta tem um slug literalmente
   chamado `text`, o WordPress gera `.has-text-color{color:var(--…--text)!important}`
   (cinza). Essa regra (às vezes reemitida numa folha carregada depois) vence,
   com mesma especificidade + `!important`, por ordem de cascata — deixando cinza
   texto que deveria ser de marca (brand/brand-hover) OU branco sobre fundo vermelho
   (o `has-white-color`, ex.: hero e "Entre em contato"). Restauramos a precedência
   com seletor de dupla-classe (padrão reutilizável de branco-sobre-marca do DS). */
.has-brand-color.has-text-color {
	color: var(--wp--preset--color--brand) !important;
}

.has-brand-hover-color.has-text-color {
	color: var(--wp--preset--color--brand-hover) !important;
}

.has-white-color.has-text-color {
	color: var(--wp--preset--color--white) !important;
}

/* Formulário sobre fundo de marca (ex.: seção "Entre em contato"): rótulos e
   asterisco de obrigatório em branco e submit com contorno branco, para o
   fespsp/form ser legível direto sobre o vermelho (sem card branco). Reutilizável. */
.has-brand-background-color .fespsp-field__label {
	color: #fff !important;
}

.has-brand-background-color .fespsp-field__required {
	color: #fff !important;
}

.has-brand-background-color .fespsp-field__input,
.has-brand-background-color .fespsp-field__textarea,
.has-brand-background-color .fespsp-field__select {
	background-color: #fff !important;
}

.has-brand-background-color .fespsp-form__submit {
	border: 2px solid #fff !important;
}

/* =============================================================
   UTILITÁRIOS
   ============================================================= */
.is-style-no-bullets ul,
ul.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}