/**
 * Kupper SEO — páginas mãe (pillar pages).
 *
 * As cores e fontes vêm das variáveis globais do kit do Elementor do próprio site,
 * com fallback para os valores atuais. Trocar a paleta no Elementor troca a paleta
 * destas páginas junto, sem editar este arquivo.
 *
 *   --e-global-color-primary   #377F86  (teal institucional)
 *   --e-global-color-secondary #6FC4CB  (teal claro)
 *   --e-global-color-text      #4A4A4A  (corpo de texto)
 *   fonte                      "Kupper" + Montserrat
 */

/* O kit do Elementor deste site aplica `body { overflow-x: hidden !important }`,
   e overflow hidden transforma o body em contêiner de rolagem — o que quebra
   `position: sticky` do índice lateral. `clip` recorta igual, sem criar o
   contêiner de rolagem. Escopado na classe que o plugin adiciona ao body. */
body.kupper-pillar {
	overflow-x: clip !important;
}

.kseo-pillar {
	--kseo-primary:   var(--e-global-color-primary, #377F86);
	--kseo-secondary: var(--e-global-color-secondary, #6FC4CB);
	--kseo-text:      var(--e-global-color-text, #4A4A4A);
	--kseo-dark:      #211F40;
	--kseo-muted:     #6E7375;
	--kseo-line:      #E2E8E9;
	--kseo-soft:      #F5F9F9;
	--kseo-white:     #FFFFFF;

	--kseo-font: var(--e-global-typography-text-font-family, "Kupper"), "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--kseo-heading: var(--e-global-typography-primary-font-family, "Kupper"), "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--kseo-serif: "Merriweather", Georgia, "Times New Roman", serif;

	/* 1140px é a largura medida do container de conteúdo do próprio site
	   (parágrafo do corpo em x=142.5 num viewport útil de 1425). É o que
	   alinha estas páginas com o resto do site. */
	--kseo-container: 1140px;
	--kseo-gutter: 20px;
	--kseo-side: 320px;
	--kseo-gap: 56px;
	/* o header do site é sticky: o índice lateral e as âncoras precisam desviar */
	--kseo-sticky-top: 120px;
	--kseo-radius: 10px;

	box-sizing: border-box;
	padding: 0 0 88px;
	font-family: var(--kseo-font);
	font-size: 17px;
	line-height: 1.75;
	color: var(--kseo-text);
	overflow-wrap: break-word;
}

.kseo-pillar *,
.kseo-pillar *::before,
.kseo-pillar *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------- hero */

.kseo-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	padding: 56px 0 60px;
	background: linear-gradient(115deg, var(--kseo-dark) 0%, #2B2A52 45%, var(--kseo-primary) 100%);
	color: #FFFFFF;
}

.kseo-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	max-width: var(--kseo-container);
	margin: 0 auto;
	padding: 0 var(--kseo-gutter);
}

/* Hero sem imagem: o inner CONTINUA na largura do container, senão a borda
   esquerda do título sai do eixo do corpo do texto. Quem encolhe é só o bloco
   de texto, para a linha não ficar longa demais. */
.kseo-hero--sem-imagem .kseo-hero__inner {
	grid-template-columns: minmax(0, 1fr);
}

.kseo-hero--sem-imagem .kseo-hero__text {
	max-width: 820px;
}

.kseo-hero__title {
	margin: 0 0 22px;
	font-family: var(--kseo-heading);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 300;
	line-height: 1.2;
	letter-spacing: .3px;
	color: #FFFFFF;
}

.kseo-hero__lead p {
	margin: 0;
	font-family: var(--kseo-serif);
	font-size: 16.5px;
	line-height: 1.72;
	color: rgba(255, 255, 255, .84);
}

.kseo-hero__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--kseo-radius);
	box-shadow: 0 20px 44px rgba(12, 11, 30, .32);
	aspect-ratio: 4 / 3;
}

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

/* ------------------------------------------------------- miolo em 2 colunas */

.kseo-pillar__main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--kseo-side);
	align-items: start;
	gap: var(--kseo-gap);
	max-width: var(--kseo-container);
	margin: 0 auto;
	padding: 52px var(--kseo-gutter) 0;
}

.kseo-pillar__body {
	grid-column: 1;
	min-width: 0;
}

.kseo-pillar__side {
	grid-column: 2;
	position: sticky;
	top: var(--kseo-sticky-top);
	align-self: start;
	max-height: calc(100vh - var(--kseo-sticky-top) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* Página sem coluna lateral (política sem relacionados, por exemplo) */
.kseo-pillar__main:not(:has(.kseo-pillar__side)) {
	grid-template-columns: minmax(0, 1fr);
}

/* breadcrumb vive dentro do hero escuro */
.kseo-pillar .kupper-breadcrumb {
	margin-bottom: 22px;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .62);
}

.kseo-pillar .kupper-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kseo-pillar .kupper-breadcrumb li {
	margin: 0;
	padding: 0;
}

.kseo-pillar .kupper-breadcrumb a {
	color: rgba(255, 255, 255, .62);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kseo-pillar .kupper-breadcrumb a:hover,
.kseo-pillar .kupper-breadcrumb a:focus-visible {
	color: var(--kseo-secondary);
	border-bottom-color: currentColor;
}

.kseo-pillar .kupper-breadcrumb .sep {
	color: rgba(255, 255, 255, .35);
}

.kseo-pillar .kupper-breadcrumb [aria-current="page"] {
	color: rgba(255, 255, 255, .9);
}

/* -------------------------------------------------------------------- índice */

.kseo-toc {
	margin: 0 0 20px;
	padding: 20px 22px 22px;
	border: 1px solid var(--kseo-line);
	border-radius: var(--kseo-radius);
	background: var(--kseo-white);
}

.kseo-toc__title {
	margin: 0 0 12px;
	font-family: var(--kseo-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--kseo-primary);
}

.kseo-toc__list {
	margin: 0;
	padding: 0 0 0 18px;
	font-size: 14.5px;
	line-height: 1.5;
}

.kseo-toc__list li {
	margin: 0 0 10px;
	padding-left: 4px;
	color: #9AA3A4;
}

.kseo-toc__list li:last-child {
	margin-bottom: 0;
}

.kseo-toc__list a {
	color: var(--kseo-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.kseo-toc__list a:hover,
.kseo-toc__list a:focus-visible {
	color: var(--kseo-primary);
	border-bottom-color: var(--kseo-secondary);
}

/* --------------------------------------------------------------------- corpo */

.kseo-pillar__body h2 {
	margin: 56px 0 18px;
	padding-top: 18px;
	border-top: 1px solid var(--kseo-line);
	font-family: var(--kseo-heading);
	font-size: clamp(23px, 2.9vw, 30px);
	font-weight: 400;
	line-height: 1.3;
	color: var(--kseo-dark);
	scroll-margin-top: calc(var(--kseo-sticky-top) + 12px);
}

.kseo-pillar__body h3 {
	margin: 36px 0 12px;
	font-family: var(--kseo-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--kseo-primary);
	scroll-margin-top: calc(var(--kseo-sticky-top) + 12px);
}

.kseo-pillar__body p {
	margin: 0 0 20px;
}

.kseo-pillar__body strong {
	font-weight: 600;
	color: #34393B;
}

.kseo-pillar__body a {
	color: var(--kseo-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.kseo-pillar__body a:hover,
.kseo-pillar__body a:focus-visible {
	color: var(--kseo-dark);
}

.kseo-pillar__body ul,
.kseo-pillar__body ol {
	margin: 0 0 24px;
	padding: 0 0 0 4px;
	list-style: none;
}

.kseo-pillar__body ol {
	counter-reset: kseo-ol;
}

.kseo-pillar__body li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 26px;
}

.kseo-pillar__body ul > li::before {
	content: "";
	position: absolute;
	top: .68em;
	left: 4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--kseo-secondary);
}

.kseo-pillar__body ol > li::before {
	counter-increment: kseo-ol;
	content: counter(kseo-ol) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--kseo-primary);
}

.kseo-pillar__body li strong:first-child {
	color: var(--kseo-dark);
}

/* ------------------------------------------------------------------ tabelas */

.kseo-table-wrap {
	max-width: 100%;
	margin: 0 auto 30px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kseo-pillar table {
	width: 100%;
	min-width: 460px;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid var(--kseo-line);
	border-radius: var(--kseo-radius);
	font-size: 15.5px;
	line-height: 1.55;
	overflow: hidden;
}

.kseo-pillar thead th {
	padding: 13px 16px;
	background: var(--kseo-primary);
	font-family: var(--kseo-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .3px;
	text-align: left;
	color: #FFFFFF;
	border: none;
}

.kseo-pillar tbody td {
	padding: 13px 16px;
	border-top: 1px solid var(--kseo-line);
	vertical-align: top;
}

.kseo-pillar tbody tr:nth-child(odd) td {
	background: var(--kseo-soft);
}

/* Tabelas sem <thead> (a de identificação do controlador, por exemplo):
   a primeira coluna vira rótulo. */
.kseo-pillar table:not(:has(thead)) tbody td:first-child {
	width: 38%;
	font-weight: 600;
	color: var(--kseo-dark);
}

/* -------------------------------------------------------------------- FAQ */

.kseo-faq {
	margin: 0;
}

.kseo-faq h2 {
	margin-bottom: 26px;
}

.kseo-faq__item {
	margin: 0 0 14px;
	padding: 22px 24px;
	border: 1px solid var(--kseo-line);
	border-radius: var(--kseo-radius);
	background: var(--kseo-white);
}

.kseo-faq__item h3 {
	margin: 0 0 10px;
	font-size: 18.5px;
	font-weight: 600;
	color: var(--kseo-dark);
}

.kseo-faq__item p {
	margin: 0;
	color: #55595B;
}

/* ------------------------------------------------------------ aviso legal */

.kseo-pillar__disclaimer {
	margin: 40px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--kseo-line);
	font-size: 13px;
	line-height: 1.65;
	color: var(--kseo-muted);
}

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

.kseo-cta {
	margin: 56px 0 0;
	padding: 34px 34px 30px;
	border-radius: var(--kseo-radius);
	background: linear-gradient(135deg, var(--kseo-primary) 0%, var(--kseo-dark) 100%);
	color: #FFFFFF;
}

.kseo-cta__lead {
	margin: 0 0 10px;
	font-family: var(--kseo-heading);
	font-size: clamp(20px, 2.4vw, 25px);
	font-weight: 400;
	line-height: 1.35;
	color: #FFFFFF;
}

.kseo-cta__text {
	margin: 0 0 22px;
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
}

.kseo-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 18px;
}

.kseo-btn {
	display: inline-block;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 4px;
	font-family: var(--kseo-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .3px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.kseo-btn--primary {
	background: #FFFFFF;
	color: var(--kseo-primary);
}

.kseo-btn--primary:hover,
.kseo-btn--primary:focus-visible {
	background: var(--kseo-secondary);
	color: var(--kseo-dark);
}

.kseo-btn--ghost {
	border-color: rgba(255, 255, 255, .55);
	color: #FFFFFF;
}

.kseo-btn--ghost:hover,
.kseo-btn--ghost:focus-visible {
	background: rgba(255, 255, 255, .12);
	border-color: #FFFFFF;
}

.kseo-cta__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .68);
}

/* ------------------------------------------------------------- relacionados */

/* Dentro da coluna lateral, os relacionados ficam empilhados abaixo do índice.
   Fora dela (shortcode [kupper_paginas_mae]), viram uma grade de cartões. */
.kseo-related {
	margin: 0;
}

.kseo-pillar__side .kseo-related__list {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.kseo-pillar__side .kseo-related__item a {
	padding: 16px 18px;
	gap: 6px;
}

.kseo-pillar__side .kseo-related__name {
	font-size: 15.5px;
}

.kseo-pillar__side .kseo-related__desc {
	font-size: 13px;
	line-height: 1.55;
}

.kseo-related__title {
	margin: 0 0 20px;
	font-family: var(--kseo-heading);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--kseo-primary);
	border: none;
	padding: 0;
}

.kseo-related__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kseo-related--cols-2 .kseo-related__list { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.kseo-related--cols-4 .kseo-related__list { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.kseo-related__item {
	margin: 0;
	padding: 0;
}

.kseo-related__item::before {
	content: none;
}

.kseo-related__item a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 20px 22px;
	border: 1px solid var(--kseo-line);
	border-radius: var(--kseo-radius);
	background: var(--kseo-white);
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kseo-related__item a:hover,
.kseo-related__item a:focus-visible {
	border-color: var(--kseo-secondary);
	box-shadow: 0 6px 18px rgba(33, 31, 64, .07);
	transform: translateY(-2px);
}

.kseo-related__name {
	font-family: var(--kseo-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--kseo-dark);
}

.kseo-related__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--kseo-muted);
}

/* ------------------------------------------------------- páginas de política */

/* A página legal usa o MESMO container das demais. Já teve um override de 900px
   aqui, herdado de quando o layout era de uma coluna só: com a coluna lateral
   fixa em 320px, encolher o container encolhia apenas o texto (484px em vez de
   724px) e ainda tirava a página do eixo do site. Só o corpo do texto muda. */
.kseo-pillar--legal .kseo-pillar__body h2 {
	font-size: clamp(21px, 2.4vw, 26px);
}

.kseo-pillar--legal .kseo-pillar__body {
	font-size: 16.5px;
}

/* ------------------------------------------------------------------ responsivo */

/* Notebook estreito: coluna lateral mais magra antes de quebrar */
@media (max-width: 1180px) {
	.kseo-pillar {
		--kseo-side: 260px;
		--kseo-gap: 40px;
	}
}

/* Tablet e abaixo: uma coluna só.
   `display: contents` dissolve a <aside> para que índice, corpo e relacionados
   virem irmãos diretos do grid — só assim o índice pode subir para antes do
   texto com `order`, sem duplicar marcação. */
@media (max-width: 1024px) {
	.kseo-pillar__main {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding-top: 36px;
	}

	.kseo-pillar__side {
		display: contents;
	}

	/* Em coluna, o item flex cresce até o max-content — a tabela de 460px
	   arrastava o corpo inteiro para fora do container em vez de rolar dentro
	   do próprio wrapper. Travar a largura devolve a rolagem para a tabela. */
	.kseo-pillar__body,
	.kseo-toc,
	.kseo-related {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.kseo-toc {
		order: 1;
		margin-bottom: 40px;
	}

	.kseo-pillar__body {
		order: 2;
	}

	.kseo-related {
		order: 3;
		margin-top: 48px;
	}

	.kseo-related__list {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 16px;
	}

	.kseo-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.kseo-hero__media {
		order: -1;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 782px) {
	.kseo-pillar {
		--kseo-gutter: 18px;
		font-size: 16.5px;
	}

	.kseo-hero {
		padding: 36px 0 40px;
	}

	.kseo-cta {
		padding: 26px 22px 24px;
	}

	.kseo-btn {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------- impressão */

@media print {
	.kseo-toc,
	.kseo-cta,
	.kseo-related,
	.kseo-hero__media,
	.kseo-pillar .kupper-breadcrumb {
		display: none;
	}

	.kseo-pillar {
		padding: 0;
		font-size: 11pt;
	}

	.kseo-hero {
		width: auto;
		margin-left: 0;
		padding: 0 0 18px;
		background: none;
		color: #000;
	}

	.kseo-hero__title,
	.kseo-hero__lead p {
		color: #000;
	}

	.kseo-pillar__main {
		display: block;
		padding: 0;
	}
}