/* =====================================================================
   institucional.css — Quem Somos, Termos de Uso, Privacidade e Contato
   ===================================================================== */

.institucional {
	max-width: 960px;
	padding-bottom: 20px;
}

.institucional--juridico {
	max-width: 900px;
}

.institucional__hero {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 30px;
	margin-bottom: 22px;
}

.institucional__hero h1 {
	font-size: clamp(1.7rem, 3vw, 2.3rem);
	margin-bottom: 14px;
}

.institucional__lead {
	font-size: 1.06rem;
	line-height: 1.65;
	color: #3a4133;
	max-width: 76ch;
}

.institucional__meta {
	margin-top: 14px;
	font-size: 0.86rem;
	color: var(--muted);
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

/* --- Índice ---------------------------------------------------------- */
.institucional__indice {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-left: 4px solid var(--green);
	border-radius: var(--radius);
	padding: 18px 22px;
	margin-bottom: 24px;
}

.institucional__indice strong {
	display: block;
	margin-bottom: 10px;
	color: #2b3324;
}

.institucional__indice ol {
	columns: 2;
	column-gap: 28px;
	padding-left: 20px;
	margin: 0;
}

.institucional__indice li {
	margin-bottom: 5px;
	font-size: 0.92rem;
	break-inside: avoid;
}

.institucional__indice a:hover {
	color: var(--green-dark);
	text-decoration: underline;
}

/* --- Blocos de texto ------------------------------------------------- */
.institucional__bloco {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 26px;
	margin-bottom: 18px;
	scroll-margin-top: 150px;
}

.institucional__bloco h2 {
	font-size: 1.24rem;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--green-wash);
}

.institucional__bloco h3 {
	font-size: 1.02rem;
	margin: 18px 0 10px;
	color: var(--green-dark);
}

.institucional__bloco p {
	margin-bottom: 13px;
	line-height: 1.7;
	color: #3a4133;
}

.institucional__bloco ul,
.institucional__bloco ol {
	margin: 0 0 14px 22px;
}

.institucional__bloco li {
	margin-bottom: 9px;
	line-height: 1.65;
	color: #3a4133;
}

.institucional__bloco a {
	color: var(--green-dark);
	text-decoration: underline;
}

/* Botão que se comporta como link no meio do texto (rever cookies). */
.link-botao {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--green-dark);
	text-decoration: underline;
	cursor: pointer;
}

.link-botao:hover,
.link-botao:focus-visible {
	color: var(--green);
}

.institucional__nota {
	background: var(--green-wash);
	border-radius: 9px;
	padding: 13px 16px;
	font-size: 0.92rem;
	margin-top: 4px;
}

/* --- Números --------------------------------------------------------- */
.institucional__numeros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-bottom: 22px;
}

.institucional__numero {
	background: linear-gradient(135deg, #6f9f12, #4e7a0b);
	color: #fff;
	border-radius: var(--radius);
	padding: 22px;
	text-align: center;
	box-shadow: var(--shadow-soft);
}

.institucional__numero strong {
	display: block;
	font-size: 1.9rem;
	line-height: 1.1;
	margin-bottom: 4px;
}

.institucional__numero span {
	font-size: 0.88rem;
	opacity: 0.9;
}

/* --- Cards missão/visão/valores -------------------------------------- */
.institucional__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 18px;
}

.institucional__card {
	background: #fff;
	border: 1px solid var(--border);
	border-top: 4px solid var(--green);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 22px;
}

.institucional__card h2 {
	font-size: 1.14rem;
	margin-bottom: 12px;
	color: var(--green-dark);
}

.institucional__card p,
.institucional__card li {
	font-size: 0.94rem;
	line-height: 1.6;
	color: #3a4133;
}

.institucional__card ul {
	margin: 0 0 0 18px;
}

.institucional__card li {
	margin-bottom: 8px;
}

/* --- Passos ---------------------------------------------------------- */
.institucional__passos {
	list-style: none;
	margin: 0;
	counter-reset: passo;
	display: grid;
	gap: 16px;
}

.institucional__passos li {
	counter-increment: passo;
	position: relative;
	padding-left: 52px;
	margin: 0;
}

.institucional__passos li::before {
	content: counter(passo);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6f9f12, #4e7a0b);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.institucional__passos strong {
	display: block;
	margin-bottom: 4px;
	color: #2b3324;
	font-size: 1.02rem;
}

.institucional__passos p {
	margin-bottom: 0;
	font-size: 0.94rem;
}

/* --- Tabela ---------------------------------------------------------- */
.tabela-scroll {
	overflow-x: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.tabela {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 560px;
}

.tabela th,
.tabela td {
	padding: 11px 14px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	vertical-align: top;
	line-height: 1.5;
}

.tabela thead th {
	background: var(--green-wash);
	color: var(--green-dark);
	font-size: 0.84rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.tabela tbody tr:last-child td {
	border-bottom: 0;
}

.tabela tbody tr:nth-child(even) {
	background: var(--surface-alt);
}

/* --- Contato --------------------------------------------------------- */
.institucional__contato {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	padding: 26px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr);
	gap: 24px;
	align-items: start;
}

.institucional__contato h2 {
	font-size: 1.24rem;
	margin-bottom: 12px;
}

.institucional__contato p {
	margin-bottom: 14px;
	line-height: 1.65;
	color: #3a4133;
}

.institucional__dados {
	list-style: none;
	margin: 0 0 18px 0;
	display: grid;
	gap: 8px;
}

.institucional__dados li {
	font-size: 0.94rem;
	color: #3a4133;
	margin: 0;
}

.institucional__dados strong {
	color: var(--muted);
}

.institucional__dados a {
	color: var(--green-dark);
	font-weight: 600;
}

.institucional__acoes {
	display: grid;
	gap: 10px;
}

.institucional__acoes .button {
	width: 100%;
	min-height: 44px;
}

/* Ícones sociais sobre fundo claro. O sublinhado dos links institucionais
   não pode alcançar o quadrado do ícone. */
.social--institucional .social__link {
	background: var(--green-wash);
	border-color: var(--green-soft);
	color: var(--green-dark);
	text-decoration: none;
}

.social--institucional .social__link:hover {
	color: #fff;
}

/* --- Página de contato ----------------------------------------------- */
.contato-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
	gap: 18px;
	align-items: start;
}

.contato-form,
.contato-canais {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 24px;
}

.contato-form h2,
.contato-canais h2 {
	font-size: 1.18rem;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--green-wash);
}

.form-lgpd {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
}

@media (max-width: 900px) {
	.institucional__numeros,
	.institucional__cards {
		grid-template-columns: 1fr;
	}

	.institucional__contato,
	.contato-grid {
		grid-template-columns: 1fr;
	}

	.institucional__indice ol {
		columns: 1;
	}
}

@media (max-width: 680px) {
	.institucional__hero,
	.institucional__bloco,
	.institucional__contato,
	.contato-form,
	.contato-canais {
		padding: 20px;
	}
}