:root {
	--primary-color: #0f172a;
	--primary-dark: #0a0f1d;
	--accent-color: #c5a059;
	--accent-hover: #b08d4b;
	--text-body: #334155;
	--bg-light: #f8fafc;
	--footer-bg: #0f172a;
}
body {
	font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	color: var(--text-body);
	background-color: #fff;
	padding-top: 70px;
}
.text-justify {
	text-align: justify;
}
h1, h2, h3, h4, h5, h6, .navbar-brand {
	font-family: 'Playfair Display', serif;
	color: var(--primary-color);
}

/* Navbar Modernization */
.navbar {
	background-color: #fff !important;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
	padding: 0.7rem 0;
}

.navbar-brand {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--primary-color) !important;
	transition: color 0.3s;
}
.navbar-brand small {
	display: block;
	margin: -2px 0 0 31px;
	font-family: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	font-size: .62rem;
	font-weight: 600;
	letter-spacing: .08em;
	color: #64748b;
}
.nav-link {
	color: var(--primary-color) !important;
	font-weight: 500;
	margin: 0 0.5rem;
	position: relative;
	transition: color 0.3s;
	/* 44px é o mínimo de alvo de toque (WCAG 2.5.5 / HIG). O padrão do MDB
	   deixava os itens do menu aberto em ~32px de altura. */
	display: flex;
	align-items: center;
	min-height: 44px;
}
/* Hover underline effect */
.nav-link::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	display: block;
	margin-top: 5px;
	left: 0;
	right: 0;
	background: var(--accent-color);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after {
	transform: scaleX(1);
	background: var(--accent-color);
}
.nav-link:hover, .nav-link.active {
	color: var(--accent-color) !important;
}

.btn-cta {
	background-color: var(--accent-color);
	color: #fff !important;
	border-radius: 50px; /* Modern rounded button */
	padding: 0.7rem 1.8rem;
	font-weight: 600;
	transition: all 0.3s;
	box-shadow: 0 4px 6px rgba(197, 160, 89, 0.3);
	border: none;
}
.btn-cta:hover {
	background-color: var(--accent-hover);
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(197, 160, 89, 0.4);
}

/* Footer Modernization */
footer {
	background-color: var(--footer-bg);
	color: #cbd5e1;
	padding: 5rem 0 2rem;
}
footer h5 {
	color: #fff;
	margin-bottom: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.5px;
}
footer a {
	color: #cbd5e1;
	text-decoration: none;
	transition: color 0.2s, transform 0.2s;
	display: inline-block;
}
footer a:hover {
	color: var(--accent-color);
	transform: translateX(5px); /* Subtle movement on hover */
}
.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.05);
	margin-top: 4rem;
	padding-top: 2rem;
	font-size: 0.875rem;
	opacity: 0.7;
}

/* Cards */
.card-article {
	background-color: #fff;
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.05);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	height: 100%;
	overflow: hidden;
}
.card-article:hover {
	transform: translateY(-8px);
	box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

/* Utilities */
.text-accent { color: var(--accent-color) !important; }
.bg-light-section { background-color: var(--bg-light); }
.section-padding { padding: 6rem 0; }

/* Breadcrumb */
.breadcrumb {
	background: transparent;
	padding: 0;
	font-size: 0.9rem;
}
/* Medido: os links do breadcrumb davam 37x19. Precisa crescer nos DOIS eixos —
   44x44 é área, não só altura. O padding lateral é compensado por margem
   negativa para o texto não sair do lugar. */
.breadcrumb-item a {
	display: inline-block;
	min-width: 44px;
	padding: 12px 6px;
	margin: -12px -6px;
	text-align: center;
}
.breadcrumb-item a {
	color: var(--accent-color);
	font-weight: 500;
}
.breadcrumb-item.active {
	color: #6c757d;
}

/* Hero Section */
.view {
	min-height: 100vh;
}
.mask {
	overflow: visible;
	position: relative;
}

/* Home: apresentação profissional sóbria e responsiva.
   Só declarações que o bloco "Home refresh 2026" (no fim do arquivo) NÃO
   redefine. As duplicadas foram removidas: elas eram silenciosamente
   sobrescritas pelo bloco posterior, e uma delas levava junto o breakpoint de
   tablet (ver a nota em @media 992px lá embaixo). */
.home-identity-badge {
	display: inline-block;
	padding: .65rem 1rem;
	margin-bottom: 1.5rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
}
.home-hero-title {
	max-width: 760px;
	margin-bottom: 1.4rem;
	color: #fff;
	font-weight: 800;
	letter-spacing: -.035em;
	text-wrap: balance;
}
.home-hero-copy {
	max-width: 65ch;
	margin-bottom: 2rem;
	color: rgba(255,255,255,.82);
	font-size: 1.12rem;
	line-height: 1.75;
	text-align: left;
	text-wrap: pretty;
}
.home-hero-actions { display: flex; align-items: center; flex-wrap: wrap; }
.home-secondary-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.home-secondary-action:hover { color: #d8b86f; text-decoration: none; }
.home-trust-item strong { display: block; font-size: 1.05rem; }
.home-trust-item span { color: rgba(255,255,255,.68); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; }
.home-whatsapp-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: .9rem;
	border-radius: 12px;
	background: #167a45;
	color: #fff;
}
.home-whatsapp-button:hover { background: #116238; color: #fff; }
.home-section-title { font-size: clamp(2rem, 3.5vw, 2.7rem); text-wrap: balance; }
.home-section-copy { max-width: 65ch; line-height: 1.7; text-align: center; text-wrap: pretty; }
.home-area-card {
	border-radius: 16px;
	box-shadow: 0 9px 28px rgba(15,23,42,.07);
	transition: transform .25s ease, box-shadow .25s ease;
}
.home-area-card p { text-align: left; }
/* Elevação no hover só onde hover existe de verdade. Em toque, o mesmo gesto
   dispara :hover "grudado" e o card fica levantado depois do tap. */
@media (hover: hover) and (pointer: fine) {
	.home-area-card:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(15,23,42,.12); }
}

/* Button fixes */
.btn-lg {
	padding: 0.9rem 2rem;
	font-size: 1.1rem;
	border-radius: 50px;
}
/* Piso de toque em qualquer botão/CTA. Medido: o WhatsApp do hub de área
   fechava em 42px — dois pixels abaixo do mínimo. */
.btn,
.btn-block {
	min-height: 44px;
}
/* .btn-sm do MDB desce a 10.24px no rótulo ("VER TODOS OS ASSUNTOS"), abaixo do
   piso de legibilidade — e continua precisando de 44px de alvo. */
.btn-sm {
	font-size: .8125rem;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Sidebar das páginas de tema (area.php e previdenciario.php): os relacionados
   fechavam em 43px e o "Voltar" em 17px. */
.card-body .list-unstyled a,
.card-body + .text-center > a,
section .text-center > a.text-muted {
	display: flex;
	align-items: center;
	min-height: 44px;
}
.btn {
	overflow: visible;
	white-space: normal;
	word-wrap: break-word;
}

/* Display classes for MDB — fluidas.
   3.5rem fixo em viewport de 320px ocupa 56px de altura por linha e estoura
   títulos longos; clamp resolve sem precisar de breakpoint. */
.display-3 {
	font-size: clamp(2.1rem, 7vw, 3.5rem);
	font-weight: 300;
	line-height: 1.2;
	text-wrap: balance;
}
.display-4 {
	font-size: clamp(1.9rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.5px;
	text-wrap: balance;
}

/* Safe areas: iPhone com notch em paisagem encosta o conteúdo na borda e no
   canto arredondado. Precisa de viewport-fit=cover no <meta> (em _layout.php). */
@supports (padding: max(0px)) {
	.navbar > .container,
	main > section > .container,
	footer > .container {
		padding-left: max(15px, env(safe-area-inset-left));
		padding-right: max(15px, env(safe-area-inset-right));
	}
	footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* Alvos de toque do rodapé.
   Medido em navegador: os ícones sociais davam 17x22 e 19x22 de área clicável,
   e os links da lista 31x17 — bem abaixo dos 44px do WCAG 2.5.5. O alvo precisa
   crescer no PRÓPRIO <a> (é ele que recebe o toque), não no <i> de dentro. */
footer .list-unstyled a,
footer li a {
	display: flex;
	align-items: center;
	min-height: 44px;
}
footer a.mr-3 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: .25rem !important;
}
footer a.mr-3 > .fab { line-height: 1; }

/* O rodapé usa .small dentro de .font-small: 16 x .9 x .8 = 11.52px, abaixo do
   piso de legibilidade. 13px é o mínimo confortável em texto secundário. */
footer .small,
footer small,
footer .list-unstyled {
	font-size: .8125rem;
}

/* Hambúrguer: o padrão do MDB entrega 54x38. Altura abaixo do mínimo de toque
   justo no controle mais importante do celular. */
.navbar-toggler {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Link "saiba mais" dos cards de área: 19px de altura medidos no navegador. */
.home-area-card a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Telefone/e-mail dentro do cartão de contato do hero: 159x20 medidos. */
.home-contact-card .card-body a:not(.btn) {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* O deslocamento no hover não pode existir onde não há hover: em toque ele
   fica preso depois do tap. */
@media (hover: none) {
	footer a:hover { transform: none; }
}

/* Container fixes */
.container {
	overflow: visible;
}
.container-fluid {
	overflow: visible;
}

/* Section spacing */
.section {
	padding: 6rem 0;
}

/* WOW animations
   O conteúdo é VISÍVEL por padrão. Só esconde depois que um script inline no
   <head> confirma que o JS roda (.js-anim) — e um failsafe em _layout.php
   remove essa classe se o WOW não inicializar em 1,5s.

   Antes, `.wow { visibility: hidden }` valia incondicionalmente: hero, cards de
   área e os passos do "Como funciona" ficavam invisíveis até o WOW rodar. Como
   o wow.min.js carrega com `defer` de um <script> externo, qualquer falha de
   rede, bloqueio de JS ou renderizador headless entregava a home EM BRANCO —
   inclusive para o Googlebot. Animação de entrada não pode ser pré-requisito
   para o conteúdo existir. */
.js-anim .wow {
	visibility: hidden;
}

/* Quem pediu menos movimento recebe o conteúdo direto, sem entrada animada. */
@media (prefers-reduced-motion: reduce) {
	.js-anim .wow,
	.wow {
		visibility: visible !important;
		animation: none !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Card fixes - prevent text cutting */
.card {
	overflow: visible;
}
.card-body {
	overflow: visible;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Text content fixes */
p, div, span, li {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Prevent text truncation */
h1, h2, h3, h4, h5, h6 {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Badge fixes */
.badge {
	white-space: normal;
	word-wrap: break-word;
	border-radius: 4px;
	padding: 0.5em 0.8em;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Row and column fixes */
.row {
	overflow: visible;
}
[class*="col-"] {
	overflow: visible;
}

/* Flex shrink prevention */
.flex-shrink-0 {
	flex-shrink: 0;
}

/* Meta info fixes */
.d-flex.flex-wrap {
	overflow: visible;
}

/* Section fixes */
section {
	overflow: visible;
}

/* Main content area */
main {
	overflow: visible;
}

/* Excerpt styling (from MDB blog template) */
.excerpt {
	overflow: visible;
}

/* Blockquote styling */
.blockquote {
	border-left: 4px solid var(--accent-color);
	padding-left: 1.5rem;
	margin: 2rem 0;
	font-style: italic;
	color: #555;
}

/* Ensure all text containers allow wrapping */
* {
	box-sizing: border-box;
}

/* Contenção de estouro horizontal.
   `overflow-x: hidden` em <html> transforma a raiz em container de scroll, e
   isso desativa `position: sticky` nos descendentes — a sidebar de
   /previdenciario e /{area} depende de sticky. `clip` contém o estouro sem
   criar container de scroll, então o sticky continua funcionando.
   ponytail: isto é contenção, não conserto. Se aparecer barra horizontal, o
   culpado é um filho estourando a largura — ache e corrija ele, não aumente
   esta regra. */
html,
body {
	overflow-x: clip;
}
/* Precisa valer na RAIZ, não só no body: elementos `position: fixed` (a navbar)
   dimensionam contra o bloco contido inicial. Se só o body contiver, a raiz
   ainda estica e a navbar estica junto — foi o que apareceu medindo em iPhone
   12 antes do CSS carregar: navbar de 735px num viewport de 390. */
@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}
/* A marca é `white-space: nowrap`; antes da folha carregar ela empurra a
   navbar além da viewport (FOUC). Truncar em vez de esticar. */
.navbar-brand {
	max-width: calc(100% - 76px);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Specific fixes for meta info */
.d-flex.flex-wrap > div {
	min-width: 0;
	flex: 0 1 auto;
}

/* Number process can be long */
span[style*="word-break"] {
	display: inline-block;
	max-width: 100%;
}

/* Ensure excerpt content is fully visible */
.excerpt {
	overflow: visible !important;
	max-width: 100% !important;
}
.excerpt > div {
	overflow: visible !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100% !important;
	width: 100% !important;
}
.excerpt > div > div {
	overflow: visible !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100% !important;
	width: 100% !important;
}
/* Fix for Principais Aprendizados specifically */
.excerpt div[style*="font-size: 1.1rem"] {
	overflow: visible !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	text-overflow: clip !important;
	max-width: 100% !important;
	width: 100% !important;
	display: block !important;
}
/* Fix for all list items and paragraphs inside excerpt */
.excerpt ul, .excerpt ol, .excerpt li, .excerpt p {
	overflow: visible !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	text-overflow: clip !important;
	max-width: 100% !important;
	width: 100% !important;
}
/* Fix for any nested elements */
.excerpt * {
	max-width: 100% !important;
	overflow: visible !important;
	text-overflow: clip !important;
}
/* Ensure no truncation anywhere */
.excerpt *:not(script):not(style) {
	white-space: normal !important;
}

/* Specific fix for Principais Aprendizados content */
.principais-aprendizados-content,
.principais-aprendizados-content * {
	overflow: visible !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	white-space: normal !important;
	text-overflow: clip !important;
	max-width: 100% !important;
	width: auto !important;
	display: block !important;
}
.principais-aprendizados-content ul,
.principais-aprendizados-content ol {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
}
.principais-aprendizados-content li {
	display: list-item !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}
/* Override any MDB or Bootstrap styles that might interfere */
.principais-aprendizados-content * {
	max-width: 100% !important;
	overflow: visible !important;
	text-overflow: clip !important;
	white-space: normal !important;
}
/* Ensure parent containers don't constrain */
.excerpt > .mb-5 {
	overflow: visible !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Fix for long titles */
h1, h2, h3, h4, h5, h6 {
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
}

/* Ensure icons don't shrink */
.flex-shrink-0 {
	flex-shrink: 0 !important;
}

/* Home refresh 2026: visual moderno e responsivo */
.home-hero{min-height:auto;position:relative;overflow:hidden;background:radial-gradient(circle at 88% 14%,rgba(209,174,103,.2),transparent 27%),radial-gradient(circle at 4% 92%,rgba(26,116,122,.3),transparent 33%),linear-gradient(128deg,#071b24 0%,#0b2932 52%,#123d44 100%)}
.home-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:52px 52px}
.home-hero-mask{position:relative!important;z-index:1;background:linear-gradient(90deg,rgba(2,13,18,.16),transparent)}
.home-hero-row{min-height:min(760px,calc(100vh - 70px));padding:5.5rem 0}.home-hero-content{padding-right:3rem}
.home-identity-badge{border-color:rgba(222,190,124,.45);background:rgba(222,190,124,.1);color:#f4dfb0}
.home-hero-title{font-size:clamp(2.8rem,4.9vw,4.5rem);line-height:1.06}.home-hero-title span{color:#e1bd73}
.home-hero-actions{gap:.8rem}.home-hero-actions .btn-cta{border-radius:12px;padding:.92rem 1.45rem;box-shadow:0 12px 28px rgba(0,0,0,.2)}
.home-secondary-action{padding:.87rem 1.1rem;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.06)}
.home-trust-list{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12)}.home-trust-item{min-width:180px;margin:0}.home-trust-item strong{color:#e1bd73}
.home-contact-column{display:flex;align-items:center}.home-contact-card{width:100%;max-width:410px;overflow:hidden;border-radius:20px!important;background:rgba(255,255,255,.97);box-shadow:0 28px 70px rgba(0,0,0,.28)}.home-profile-card-head{background:linear-gradient(135deg,#a97e35,#dfbd77)}
.home-contact-card a,.home-contact-card span{overflow-wrap:anywhere}.home-areas-section{position:relative;background:linear-gradient(180deg,#f3f6f4 0%,#fff 180px)!important}.home-section-title{color:#102b32}.home-area-card{border-color:#e1e8e7!important}
/* ── Breakpoints da home ──────────────────────────────────────────────
   Todos ficam DEPOIS de todas as regras base, de propósito. Antes havia dois
   conjuntos: um junto do bloco antigo (linha ~230) e outro aqui. Como o bloco
   "refresh 2026" acima redeclara `.home-hero-title` sem media query e com a
   mesma especificidade, ele vencia a regra de tablet do conjunto antigo —
   na faixa 768–991px (iPad retrato) o título caía no clamp de DESKTOP e o
   breakpoint de tablet simplesmente não existia. Um conjunto só resolve. */

/* Tablet: hero deixa de disputar altura com a viewport e o cartão de contato
   desce para baixo do texto. */
@media (max-width: 991.98px) {
	.navbar-brand { font-size: 1.2rem; }
	.home-hero, .home-hero-row { min-height: auto; }
	.home-hero-row { padding: 5.25rem 0 4rem; }
	.home-hero-content { padding-right: 15px; }
	.home-hero-title { font-size: clamp(2.6rem, 6.4vw, 3.9rem); max-width: 20ch; }
	.home-contact-column { margin-top: 3rem; }
	.home-contact-card { max-width: none; }
	/* Os três contatos lado a lado só cabem com o texto podendo quebrar:
	   `minmax(0,1fr)`, não `1fr` — 1fr tem min-width auto e estoura a grade. */
	.home-contact-card .card-body > .p-4 {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
	.home-contact-card .card-body > .p-4 > .d-flex {
		min-width: 0;
		margin-bottom: 0 !important;
		padding: .5rem;
		border-bottom: 0 !important;
		align-items: flex-start !important;
	}
	.home-whatsapp-button { grid-column: 1 / -1; }
}

/* Celular: coluna única, ações em bloco, alvos de toque cheios. */
@media (max-width: 767.98px) {
	body { padding-top: 63px; }
	.navbar { padding: .55rem 0; }
	.navbar-brand { max-width: calc(100vw - 92px); font-size: 1.05rem; }
	.navbar-brand small { margin-left: 27px; font-size: .55rem; }
	.home-hero-row { padding: 3.4rem 0 3rem; }
	.home-identity-badge { margin-bottom: 1.2rem; padding: .55rem .75rem; font-size: .7rem; }
	.home-hero-title { font-size: clamp(2.25rem, 9.5vw, 3.1rem); line-height: 1.08; max-width: none; }
	.home-hero-copy { font-size: 1rem; line-height: 1.65; }
	.home-hero-actions { align-items: stretch; flex-direction: column; }
	.home-hero-actions .btn,
	.home-secondary-action { width: 100%; justify-content: center; text-align: center; }
	.home-trust-item { min-width: 0; width: calc(50% - .75rem); }
	.home-section-copy { text-align: left; }
	.home-contact-column { margin-top: 2.25rem; }
	.home-contact-card { border-radius: 16px !important; }
	.home-contact-card .card-body > .p-4 { display: block; }
	.home-contact-card .card-body > .p-4 > .d-flex {
		padding: 0 0 1rem;
		margin-bottom: 1.25rem !important;
		border-bottom: 1px solid #f0f0f0 !important;
		align-items: center !important;
	}
	section.py-5, section .py-5 { padding-top: 2.7rem !important; padding-bottom: 2.7rem !important; }
}

/* Telas estreitas (iPhone SE e afins): 9.5vw já não segura o título em 320px. */
@media (max-width: 419.98px) {
	.home-hero-title { font-size: 2.05rem; letter-spacing: -.025em; }
	.home-identity-badge { letter-spacing: .045em; }
	.home-trust-list { gap: 1rem; }
	.home-trust-item { width: 100%; }
}