/* ==========================================================
   NOVA HOME - CONCURSO LIVRE
   ========================================================== */


/* ==========================================================
   AJUSTES DO WOODMART SOMENTE NA NOVA HOME
   ========================================================== */

/*
 * Remove o título e breadcrumb padrão do Woodmart.
 * Aplicado somente na página /nova-home/.
 */

body.cl-nova-home-page .page-title,
body.cl-nova-home-page .page-title.page-title-default,
body.cl-nova-home-page .wd-page-title,
body.cl-nova-home-page .woodmart-title-container,
body.cl-nova-home-page .title-size-default,
body.cl-nova-home-page .title-size-large {
	display: none !important;
}


/*
 * Remove breadcrumbs eventualmente renderizados
 * fora do bloco de título.
 */

body.cl-nova-home-page .breadcrumbs,
body.cl-nova-home-page .yoast-breadcrumb {
	display: none !important;
}


/* ==========================================================
   ESTRUTURA GERAL
   ========================================================== */

.cl-new-home {
	background: #ffffff;
}

.cl-new-home .cl-container {
	width: min(1240px, calc(100% - 36px));
	margin: 0 auto;
}


/* ==========================================================
   HERO
   ========================================================== */

.cl-hero {
	padding: 58px 0 46px;

	background:
		radial-gradient(
			circle at 84% 20%,
			rgba(43, 183, 231, 0.17),
			transparent 28%
		),
		linear-gradient(
			180deg,
			#fbfeff 0%,
			#f4fbfe 100%
		);

	border-bottom: 1px solid #e5f0f5;
}

.cl-hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 58px;
	align-items: center;
}


/* ==========================================================
   LABEL
   ========================================================== */

.cl-eyebrow {
	display: inline-flex;
	align-items: center;

	padding: 7px 12px;

	border: 1px solid #cfeef8;
	border-radius: 30px;

	background: #e8f8fd;
	color: #159fd2;

	font-size: 12px;
	font-weight: 700;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.cl-hero h1 {
	max-width: 650px;

	margin: 18px 0 16px;

	color: #07314a;

	font-size: 52px;
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -2px;
}

.cl-hero h1 span {
	color: #2bb7e7;
}


/* ==========================================================
   SUBTÍTULO
   ========================================================== */

.cl-hero-description {
	max-width: 640px;

	margin: 0;

	color: #687986;

	font-size: 18px;
	line-height: 1.65;
}


/* ==========================================================
   BUSCA
   ========================================================== */

.cl-hero-search {
	display: flex;
	gap: 8px;

	margin-top: 26px;
	padding: 8px;

	border: 1px solid #d6e5ed;
	border-radius: 15px;

	background: #ffffff;

	box-shadow:
		0 12px 30px rgba(20, 80, 110, 0.08);
}

.cl-hero-search input[type="search"] {
	flex: 1;

	min-width: 0;
	height: 46px;

	padding: 0 14px;

	border: 0;
	outline: 0;

	background: transparent;

	color: #17212b;

	font-size: 14px;
}

.cl-hero-search input[type="search"]::placeholder {
	color: #7f8f99;
	opacity: 1;
}

.cl-hero-search button {
	min-width: 100px;

	border: 0;
	border-radius: 10px;

	background: #2bb7e7;
	color: #ffffff;

	font-size: 13px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		transform 0.2s ease;
}

.cl-hero-search button:hover {
	background: #179fd3;
	transform: translateY(-1px);
}

.cl-search-examples {
	margin: 7px 0 0 6px;

	color: #82919a;

	font-size: 11px;
}


/* ==========================================================
   BOTÕES
   ========================================================== */

.cl-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;

	margin-top: 20px;
}

.cl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 46px;
	padding: 0 20px;

	border-radius: 11px;

	font-size: 13px;
	font-weight: 700;

	text-decoration: none;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.cl-btn:hover {
	transform: translateY(-1px);
}

.cl-btn-primary {
	background: #07314a;
	color: #ffffff;
}

.cl-btn-primary:hover {
	background: #0b496a;
	color: #ffffff;
}

.cl-btn-secondary {
	border: 1px solid #cbdfe8;

	background: #ffffff;
	color: #07314a;
}

.cl-btn-secondary:hover {
	border-color: #2bb7e7;

	color: #159fd2;
}


/* ==========================================================
   BENEFÍCIOS
   ========================================================== */

.cl-benefits {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 11px 16px;

	margin-top: 25px;
}

.cl-benefits > div {
	display: flex;
	align-items: center;
	gap: 8px;

	color: #405966;

	font-size: 13px;
	font-weight: 600;
}

.cl-benefits > div > span {
	width: 22px;
	height: 22px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	border-radius: 50%;

	background: #eaf9f0;
	color: #18a956;

	font-size: 11px;
	font-weight: 700;
}


/* ==========================================================
   MOCKUP MATERIAL DISPONÍVEL
   ========================================================== */

.cl-hero-preview {
	position: relative;

	min-height: 490px;

	display: flex;
	align-items: center;
	justify-content: center;
}


/* ==========================================================
   BADGE "CURSO JÁ DISPONÍVEL"
   ========================================================== */

.cl-preview-badge {
	position: absolute;
	z-index: 5;

	top: 15px;
	right: 0;

	padding: 12px 16px;

	border-radius: 14px;

	background: #2bb7e7;
	color: #ffffff;

	box-shadow:
		0 12px 28px rgba(43, 183, 231, 0.24);
}

.cl-preview-badge strong,
.cl-preview-badge span {
	display: block;
}

.cl-preview-badge strong {
	font-size: 14px;
}

.cl-preview-badge span {
	margin-top: 2px;

	font-size: 10px;

	opacity: 0.88;
}


/* ==========================================================
   JANELA DO CURSO
   ========================================================== */

.cl-course-window {
	width: 100%;
	max-width: 510px;

	overflow: hidden;

	border: 9px solid #16222b;
	border-radius: 22px;

	background: #ffffff;

	box-shadow:
		0 28px 65px rgba(8, 49, 74, 0.22);
}

.cl-window-bar {
	height: 32px;

	display: flex;
	align-items: center;
	gap: 6px;

	padding: 0 12px;

	background: #16222b;
}

.cl-window-bar span {
	width: 7px;
	height: 7px;

	border-radius: 50%;

	background: #52626d;
}


/* ==========================================================
   CONTEÚDO DO MOCKUP
   ========================================================== */

.cl-course-layout {
	display: grid;
	grid-template-columns: 112px 1fr;
}


/* ==========================================================
   SIDEBAR DO MOCKUP
   ========================================================== */

.cl-course-sidebar {
	min-height: 330px;

	padding: 18px 11px;

	background: #082f49;
	color: #caedf9;
}

.cl-course-sidebar strong {
	display: block;

	margin-bottom: 13px;

	color: #ffffff;

	font-size: 11px;
}

.cl-course-sidebar div {
	margin: 4px 0;
	padding: 8px;

	border-radius: 7px;

	font-size: 10px;
}

.cl-course-sidebar div.active {
	background: #2bb7e7;
	color: #ffffff;
}


/* ==========================================================
   CONTEÚDO CENTRAL DO MOCKUP
   ========================================================== */

.cl-course-content {
	padding: 20px;

	background:
		linear-gradient(
			180deg,
			#ffffff,
			#f8fcfe
		);
}

.cl-course-header {
	display: flex;
	justify-content: space-between;
	gap: 12px;

	margin-bottom: 14px;
}

.cl-course-header h3 {
	margin: 0;

	color: #07314a;

	font-size: 18px;
	line-height: 1.2;
}

.cl-course-header > span {
	height: fit-content;

	padding: 6px 8px;

	border-radius: 20px;

	background: #eaf9ef;
	color: #15954e;

	font-size: 9px;
	font-weight: 700;
}


/* ==========================================================
   ABAS DO MOCKUP
   ========================================================== */

.cl-tabs {
	display: flex;
	gap: 18px;

	margin-bottom: 14px;

	border-bottom: 1px solid #dfeaf0;
}

.cl-tabs span,
.cl-tabs strong {
	padding-bottom: 9px;

	font-size: 10px;
}

.cl-tabs span {
	color: #788891;
}

.cl-tabs strong {
	border-bottom: 2px solid #2bb7e7;

	color: #159fd2;
}


/* ==========================================================
   MATERIAL DISPONÍVEL
   ========================================================== */

.cl-material-box {
	padding: 13px;

	border: 1px solid #dce9ef;
	border-radius: 13px;

	background: #ffffff;
}

.cl-material-box h4 {
	margin: 0 0 8px;

	color: #07314a;

	font-size: 12px;
}

.cl-material-item {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	gap: 9px;
	align-items: center;

	padding: 9px 0;

	border-bottom: 1px solid #edf2f5;
}

.cl-material-item:last-child {
	border-bottom: 0;
}

.cl-material-item i {
	width: 27px;
	height: 27px;

	display: grid;
	place-items: center;

	border-radius: 7px;

	background: #eaf7fd;
	color: #159fd2;

	font-size: 9px;
	font-style: normal;
	font-weight: 700;
}

.cl-material-item span {
	color: #304854;

	font-size: 10px;
	font-weight: 600;
}

.cl-material-item b {
	color: #18a956;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 960px) {

	.cl-hero-grid {
		grid-template-columns: 1fr;
	}

	.cl-hero h1 {
		font-size: 44px;
	}

	.cl-hero-preview {
		min-height: auto;
		margin-top: 15px;
	}
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-new-home .cl-container {
		width: min(calc(100% - 28px), 1240px);
	}

	.cl-hero {
		padding: 38px 0;
	}

	.cl-hero h1 {
		font-size: 36px;
		letter-spacing: -1px;
	}

	.cl-hero-description {
		font-size: 16px;
	}

	.cl-hero-search {
		flex-direction: column;
	}

	.cl-hero-search button {
		min-height: 44px;
	}

	.cl-benefits {
		grid-template-columns: 1fr;
	}

	.cl-preview-badge {
		top: -8px;
		right: 3px;
	}

	.cl-course-layout {
		grid-template-columns: 82px 1fr;
	}

	.cl-course-sidebar {
		padding: 14px 8px;
	}

	.cl-course-content {
		padding: 14px;
	}
}

.cl-hero {
	padding: 58px 0 46px;
}

/* ==========================================================
   ESCONDE O HEADER PADRÃO DO WOODMART
   SOMENTE NA NOVA HOME
   ========================================================== */

body.cl-nova-home-page .whb-header,
body.cl-nova-home-page .whb-main-header,
body.cl-nova-home-page .whb-sticky-header,
body.cl-nova-home-page .whb-clone,
body.cl-nova-home-page .main-header,
body.cl-nova-home-page header.site-header {
	display: none !important;
}

/* ==========================================================
   NOVO HEADER - CONCURSO LIVRE
   ========================================================== */

.cl-site-header {
	position: relative;
	z-index: 100;

	background: #ffffff;
}


/* TOPBAR */

.cl-topbar {
	background: #071118;
	color: #ffffff;
}

.cl-topbar .cl-container {
	padding-top: 6px;
	padding-bottom: 6px;
}

.cl-topbar-text {
	font-size: 11px;
}

.cl-topbar-text strong {
	color: #58ee91;
}


/* HEADER PRINCIPAL */

.cl-header-main {
	background: #ffffff;

	border-bottom: 1px solid #e1e8ed;
}

.cl-header-grid {
	min-height: 84px;

	display: grid;
	grid-template-columns: 220px 1fr auto;
	gap: 22px;
	align-items: center;
}


/* LOGO */

.cl-header-logo {
	display: block;

	max-width: 220px;
}

.cl-header-logo-img {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
}


/* BUSCA DO HEADER */

.cl-header-search {
	display: flex;

	overflow: hidden;

	border: 1px solid #d8e2e8;
	border-radius: 999px;

	background: #ffffff;
}

.cl-header-search input[type="search"] {
	flex: 1;

	min-width: 0;
	height: 48px;

	padding: 0 18px;

	border: 0;
	outline: 0;

	background: transparent;

	color: #17212b;

	font-size: 14px;
}

.cl-header-search button {
	width: 52px;

	border: 0;

	background: #2bb7e7;
	color: #ffffff;

	font-size: 19px;

	cursor: pointer;
}

.cl-header-search button:hover {
	background: #179fd3;
}


/* AÇÕES */

.cl-header-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.cl-header-action {
	position: relative;

	display: flex;
	align-items: center;
	gap: 7px;

	min-height: 42px;
	padding: 0 11px;

	border: 1px solid #e0e7eb;
	border-radius: 999px;

	background: #ffffff;
	color: #07314a;

	font-size: 12px;
	font-weight: 700;
}

.cl-header-action:hover {
	border-color: #2bb7e7;

	color: #159fd2;
}

.cl-action-icon {
	width: 25px;
	height: 25px;

	display: grid;
	place-items: center;

	border-radius: 50%;

	background: #eef8fc;

	font-size: 12px;
}

.cl-cart-count {
	position: absolute;

	top: -6px;
	right: -3px;

	min-width: 18px;
	height: 18px;

	display: grid;
	place-items: center;

	padding: 0 5px;

	border-radius: 999px;

	background: #2bb7e7;
	color: #ffffff;

	font-size: 9px;
	font-weight: 700;
}


/* NAVEGAÇÃO */

.cl-header-nav {
	position: relative;

	background: #2bb7e7;

	color: #ffffff;
}

.cl-nav-inner {
	display: flex;
	align-items: center;

	overflow-x: auto;

	scrollbar-width: none;
}

.cl-nav-inner::-webkit-scrollbar {
	display: none;
}

.cl-nav-inner > a,
.cl-categories-toggle {
	flex: 0 0 auto;

	min-height: 46px;

	display: flex;
	align-items: center;

	padding: 0 17px;

	border: 0;

	background: transparent;
	color: #ffffff;

	font-size: 13px;
	font-weight: 700;

	cursor: pointer;
}

.cl-nav-inner > a:hover,
.cl-categories-toggle:hover {
	background: rgba(255, 255, 255, 0.10);
}

.cl-categories-toggle {
	background: rgba(0, 0, 0, 0.08);
}


/* DROPDOWN */

.cl-categories-dropdown {
	position: absolute;
	z-index: 200;

	top: 100%;
	left: 0;
	right: 0;

	display: none;

	border-bottom: 1px solid #dbe8ee;

	background: #ffffff;

	box-shadow:
		0 18px 35px rgba(12, 62, 90, 0.12);
}

.cl-categories-dropdown.is-open {
	display: block;
}

.cl-categories-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;

	padding-top: 20px;
	padding-bottom: 20px;
}

.cl-categories-grid > a,
.cl-category-card {
	padding: 15px;

	border: 1px solid #dce8ef;
	border-radius: 14px;

	background: #f5fbfe;
}

.cl-categories-grid strong {
	display: block;

	margin-bottom: 5px;

	color: #07314a;

	font-size: 14px;
}

.cl-categories-grid span {
	color: #687986;

	font-size: 12px;
	line-height: 1.45;
}



/* SUBCATEGORIAS DE CONCURSO E ESCOLA */

.cl-category-card {
	position: relative;
	min-width: 0;
	padding: 0;
}

.cl-category-card-link {
	display: block;

	padding: 15px;

	color: inherit;
}

.cl-category-card-link:hover {
	color: inherit;
}

.cl-category-card-link strong {
	padding-right: 40px;
}

.cl-category-card:hover,
.cl-category-card.is-open {
	border-color: #2bb7e7;
}

.cl-category-card .cl-subcategories-toggle {
	position: absolute;
	z-index: 3;

	top: 11px;
	right: 11px;

	width: 32px;
	height: 32px;
	min-height: 32px;

	display: grid;
	place-items: center;

	padding: 0;

	border: 1px solid #cce4ee;
	border-radius: 9px;

	background: #ffffff;
	color: #07314a;

	box-shadow: none;

	cursor: pointer;
}

.cl-category-card .cl-subcategories-toggle:hover,
.cl-category-card .cl-subcategories-toggle:focus-visible {
	border-color: #2bb7e7;

	background: #eaf8fd;
	color: #07314a;
}

.cl-category-card .cl-subcategories-toggle span {
	color: #07314a;

	font-size: 18px;
	line-height: 1;

	transition: transform 0.2s ease;
}

.cl-category-card.is-open .cl-subcategories-toggle span {
	transform: rotate(180deg);
}

.cl-subcategories-menu {
	position: absolute;
	z-index: 20;

	top: calc(100% + 8px);
	right: 0;

	width: min(360px, calc(100vw - 32px));
	max-height: min(420px, 55vh);

	overflow-y: auto;

	padding: 14px;

	border: 1px solid #d7e7ee;
	border-radius: 14px;

	background: #ffffff;

	box-shadow:
		0 18px 38px rgba(7, 49, 74, 0.18);
}

.cl-subcategories-menu[hidden] {
	display: none;
}

.cl-subcategories-title {
	margin-bottom: 10px;

	color: #07314a;

	font-size: 13px;
	font-weight: 700;
}

.cl-subcategories-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
}

.cl-subcategories-list a {
	min-height: 36px;

	display: flex;
	align-items: center;

	padding: 8px 10px;

	border-radius: 8px;

	color: #31566a;

	font-size: 12px;
	line-height: 1.3;
}

.cl-subcategories-list a:hover,
.cl-subcategories-list a:focus-visible {
	background: #eaf8fd;
	color: #087da8;
}

.cl-subcategories-all {
	display: flex;
	align-items: center;

	margin-top: 10px;
	padding: 11px 10px 1px;

	border-top: 1px solid #e2edf2;

	color: #087da8;

	font-size: 12px;
	font-weight: 700;
}

/* ==========================================================
   RESPONSIVO DO HEADER
   ========================================================== */

@media (max-width: 960px) {

	.cl-header-grid {
		grid-template-columns: 1fr auto;
	}

	.cl-header-search {
		grid-column: 1 / -1;
		grid-row: 2;
	}

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


@media (max-width: 600px) {

	.cl-topbar-text {
		font-size: 10px;
	}

	.cl-header-grid {
		min-height: auto;

		padding-top: 10px;
		padding-bottom: 10px;
	}

	.cl-header-logo {
		max-width: 175px;
	}

	.cl-action-label {
		display: none;
	}

	.cl-header-action {
		width: 42px;

		padding: 0;

		justify-content: center;
	}

	.cl-categories-grid {
		grid-template-columns: 1fr;
	}

	.cl-subcategories-menu {
		left: 0;
		right: 0;

		width: auto;
		max-height: min(360px, 55vh);
	}

	.cl-subcategories-list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================
   PROMOÇÃO VIGENTE
   ========================================================== */

.cl-promo-section {
	padding: 24px 0 6px;

	background: #ffffff;
}

.cl-promo-card {
	position: relative;

	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;

	overflow: hidden;

	padding: 24px 28px;

	border-radius: 20px;

	background:
		radial-gradient(
			circle at 84% 50%,
			rgba(43, 183, 231, 0.22),
			transparent 23%
		),
		linear-gradient(
			135deg,
			#07314a 0%,
			#0d4867 68%,
			#0f6789 100%
		);

	color: #ffffff;

	box-shadow:
		0 16px 36px rgba(7, 49, 74, 0.14);
}

.cl-promo-card::after {
	content: "";

	position: absolute;

	top: -90px;
	right: -70px;

	width: 230px;
	height: 230px;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.06);
}


/* CONTEÚDO */

.cl-promo-content {
	position: relative;
	z-index: 2;
}

.cl-promo-label {
	display: block;

	margin-bottom: 7px;

	color: #75dcff;

	font-size: 11px;
	font-weight: 700;

	letter-spacing: 0.08em;

	text-transform: uppercase;
}

.cl-promo-content h2 {
	margin: 0;

	color: #ffffff;

	font-size: 28px;
	font-weight: 700;

	line-height: 1.15;
	letter-spacing: -0.5px;
}

.cl-promo-content p {
	max-width: 720px;

	margin: 8px 0 0;

	color: rgba(255, 255, 255, 0.82);

	font-size: 13px;
	line-height: 1.55;
}


/* AÇÕES */

.cl-promo-actions {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	gap: 12px;
}

.cl-promo-badge {
	min-width: 104px;
	min-height: 80px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	padding: 10px 14px;

	border-radius: 16px;

	background: #ffffff;
	color: #07314a;

	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.12);
}

.cl-promo-badge strong {
	color: #159fd2;

	font-size: 24px;
	line-height: 1;
}

.cl-promo-badge span {
	margin-top: 5px;

	color: #07314a;

	font-size: 9px;
	font-weight: 700;
}

.cl-promo-button {
	min-height: 46px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0 18px;

	border-radius: 11px;

	background: #2bb7e7;
	color: #ffffff;

	font-size: 12px;
	font-weight: 700;

	white-space: nowrap;
}

.cl-promo-button:hover {
	background: #48c5ee;
	color: #ffffff;
}

/* ==========================================================
   O QUE VOCÊ PROCURA?
   ========================================================== */

.cl-quick-section {
	padding: 38px 0 62px;

	background: #ffffff;
}


/* CABEÇALHO */

.cl-section-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	gap: 24px;

	margin-bottom: 20px;
}

.cl-section-header h2 {
	margin: 0;

	color: #07314a;

	font-size: 31px;
	font-weight: 700;

	letter-spacing: -0.8px;
}

.cl-section-header p {
	margin: 7px 0 0;

	color: #687986;

	font-size: 14px;
}


/* GRID */

.cl-quick-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 12px;
}


/* CARD */

.cl-quick-card {
	min-height: 112px;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	padding: 17px;

	border: 1px solid #dae8ee;
	border-radius: 15px;

	background: #ffffff;

	color: inherit;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.cl-quick-card:hover {
	border-color: #2bb7e7;

	box-shadow:
		0 10px 26px rgba(16, 78, 108, 0.08);

	transform: translateY(-2px);
}


/* ÍCONE */

.cl-quick-icon {
	width: 35px;
	height: 35px;

	display: grid;
	place-items: center;

	margin-bottom: 15px;

	border-radius: 10px;

	background: #ebf8fd;
	color: #159fd2;

	font-size: 12px;
	font-weight: 700;
}


/* TEXTO */

.cl-quick-card div {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.cl-quick-card strong {
	color: #07314a;

	font-size: 14px;
	font-weight: 700;
}

.cl-quick-card div span {
	color: #687986;

	font-size: 11px;
	line-height: 1.4;
}

/* ==========================================================
   PROMOÇÃO + ATALHOS — TABLET
   ========================================================== */

@media (max-width: 960px) {

	.cl-promo-card {
		grid-template-columns: 1fr;
	}

	.cl-promo-actions {
		justify-content: flex-start;
	}

	.cl-quick-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================
   PROMOÇÃO + ATALHOS — MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-promo-section {
		padding-top: 16px;
	}

	.cl-promo-card {
		padding: 20px;
	}

	.cl-promo-content h2 {
		font-size: 23px;
	}

	.cl-promo-actions {
		flex-wrap: wrap;
		align-items: stretch;
	}

	.cl-promo-button {
		flex: 1;
	}

	.cl-quick-section {
		padding-top: 30px;
		padding-bottom: 48px;
	}

	.cl-quick-grid {
		grid-template-columns: 1fr;
	}

	.cl-section-header h2 {
		font-size: 28px;
	}
}

/* ==========================================================
   SEÇÕES DE PRODUTOS
   ========================================================== */

.cl-products-section {
	padding: 64px 0;

	background: #ffffff;
}

.cl-products-section-alt {
	background: #f7fbfd;
}


/* ==========================================================
   CABEÇALHO
   ========================================================== */

.cl-products-header {
	margin-bottom: 26px;
}

.cl-section-label {
	display: inline-flex;

	margin-bottom: 8px;
	padding: 6px 10px;

	border: 1px solid #cfeef8;
	border-radius: 30px;

	background: #eaf8fd;
	color: #159fd2;

	font-size: 10px;
	font-weight: 700;

	letter-spacing: 0.06em;

	text-transform: uppercase;
}

.cl-section-more {
	color: #159fd2;

	font-size: 13px;
	font-weight: 700;

	white-space: nowrap;
}

.cl-section-more:hover {
	color: #07314a;
}


/* ==========================================================
   GRID DE PRODUTOS
   ========================================================== */

.cl-products-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 18px;
}


/* ==========================================================
   CARD
   ========================================================== */

.cl-product-card {
	display: flex;
	flex-direction: column;

	min-width: 0;

	overflow: hidden;

	border: 1px solid #dce7ec;
	border-radius: 17px;

	background: #ffffff;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		border-color 0.2s ease;
}

.cl-product-card:hover {
	border-color: #c8e2ed;

	box-shadow:
		0 18px 45px rgba(12, 64, 91, 0.10);

	transform: translateY(-3px);
}


/* ==========================================================
   IMAGEM
   ========================================================== */

.cl-product-image {
	position: relative;

	display: block;

	overflow: hidden;

	aspect-ratio: 1 / 1;

	background: #eef4f7;
}

.cl-product-image-img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 0.3s ease;
}

.cl-product-card:hover
.cl-product-image-img {
	transform: scale(1.015);
}


/* ==========================================================
   BADGE
   ========================================================== */

.cl-product-badge {
	position: absolute;
	z-index: 3;

	top: 11px;
	left: 11px;

	padding: 6px 9px;

	border-radius: 8px;

	background: rgba(
		255,
		255,
		255,
		0.96
	);

	color: #159fd2;

	font-size: 9px;
	font-weight: 700;

	box-shadow:
		0 5px 15px rgba(
			8,
			49,
			74,
			0.12
		);
}


/* ==========================================================
   CORPO DO CARD
   ========================================================== */

.cl-product-body {
	display: flex;
	flex-direction: column;
	flex: 1;

	padding: 17px;
}


/* ==========================================================
   TÍTULO
   ========================================================== */

.cl-product-title {
	min-height: 48px;

	margin: 0;

	color: #1e303a;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.cl-product-title a {
	color: inherit;
}

.cl-product-title a:hover {
	color: #159fd2;
}


/* ==========================================================
   PREÇO
   ========================================================== */

.cl-product-price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: 13px;
}

.cl-product-old-price {
	color: #a0a8ad;

	font-size: 12px;

	text-decoration: line-through;
}

.cl-product-current-price {
	color: #159fd2;

	font-size: 20px;
	font-weight: 700;
}


/* ==========================================================
   PIX
   ========================================================== */

.cl-product-pix {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;

	gap: 4px;

	margin-top: 4px;

	color: #68747a;

	font-size: 11px;
}

.cl-product-pix strong {
	color: #dc2027;

	font-size: 14px;
	font-weight: 700;

	white-space: nowrap;
}


/* ==========================================================
   AÇÕES
   ========================================================== */

.cl-product-actions {
	display: grid;
	grid-template-columns: 1fr 42px;

	gap: 8px;

	margin-top: auto;
	padding-top: 16px;
}

.cl-product-button {
	min-height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 10px;

	background: #07314a;
	color: #ffffff;

	font-size: 11px;
	font-weight: 700;

	text-transform: uppercase;
}

.cl-product-button:hover {
	background: #0b496a;
	color: #ffffff;
}


/* ==========================================================
   WHATSAPP
   ========================================================== */

.cl-product-whatsapp {
	min-height: 42px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 10px;

	background: #20c96b;
	color: #ffffff;

	font-size: 17px;
	font-weight: 700;
}

.cl-product-whatsapp:hover {
	background: #18b65e;
	color: #ffffff;
}


/* ==========================================================
   SEM PRODUTOS
   ========================================================== */

.cl-products-empty {
	padding: 30px;

	border: 1px dashed #cbdfe8;
	border-radius: 14px;

	background: #ffffff;

	color: #687986;

	font-size: 13px;
}

/* ==========================================================
   PRODUTOS — TABLET
   ========================================================== */

@media (max-width: 960px) {

	.cl-products-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================
   PRODUTOS — MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-products-section {
		padding: 48px 0;
	}

	.cl-products-grid {
		grid-template-columns: 1fr;
	}

	.cl-product-title {
		min-height: auto;
	}

	.cl-section-more {
		margin-top: 4px;
	}
}

/* ==========================================================
   COMO FUNCIONA
   ========================================================== */

.cl-how-section {
	padding: 64px 0;

	background: #ffffff;
}

.cl-how-grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 18px;
}

.cl-how-card {
	padding: 24px;

	border: 1px solid #dce8ef;
	border-radius: 17px;

	background: #ffffff;
}

.cl-how-number {
	width: 42px;
	height: 42px;

	display: grid;
	place-items: center;

	border-radius: 12px;

	background: #2bb7e7;
	color: #ffffff;

	font-size: 15px;
	font-weight: 700;
}

.cl-how-card h3 {
	margin: 16px 0 7px;

	color: #07314a;

	font-size: 19px;
	font-weight: 700;
}

.cl-how-card p {
	margin: 0;

	color: #687986;

	font-size: 13px;
	line-height: 1.55;
}

/* ==========================================================
   DIFERENCIAL - MATERIAL DISPONÍVEL
   ========================================================== */

.cl-material-feature {
	padding: 12px 0 70px;

	background: #ffffff;
}

.cl-material-feature-panel {
	display: grid;

	grid-template-columns:
		0.95fr 1.05fr;

	gap: 42px;
	align-items: center;

	padding: 38px;

	border-radius: 24px;

	background:
		linear-gradient(
			135deg,
			#07314a,
			#0b5678
		);

	color: #ffffff;
}


/* COLUNA ESQUERDA */

.cl-section-label-light {
	border-color:
		rgba(255, 255, 255, 0.18);

	background:
		rgba(255, 255, 255, 0.10);

	color: #78ddff;
}

.cl-material-feature-content h2 {
	margin: 12px 0 14px;

	color: #ffffff;

	font-size: 35px;
	font-weight: 700;

	line-height: 1.1;
	letter-spacing: -0.8px;
}

.cl-material-feature-content p {
	margin: 0;

	color:
		rgba(255, 255, 255, 0.82);

	font-size: 15px;
	line-height: 1.65;
}

.cl-material-feature-content p strong {
	color: #ffffff;
}


/* LISTA */

.cl-material-feature-list {
	display: grid;

	gap: 11px;

	margin-top: 21px;
}

.cl-material-feature-list > div {
	display: flex;
	align-items: center;
	gap: 9px;

	color: #ffffff;

	font-size: 13px;
	font-weight: 600;
}

.cl-material-feature-list > div > span {
	width: 24px;
	height: 24px;

	display: grid;
	place-items: center;

	flex: 0 0 auto;

	border-radius: 50%;

	background:
		rgba(255, 255, 255, 0.13);

	color: #75e3ff;

	font-size: 11px;
	font-weight: 700;
}


/* CARD DIREITO */

.cl-material-preview-card {
	padding: 18px;

	border-radius: 18px;

	background: #ffffff;
	color: #17212b;

	box-shadow:
		0 18px 40px rgba(0, 0, 0, 0.18);
}

.cl-material-preview-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;

	padding-bottom: 13px;

	border-bottom: 1px solid #dce8ef;
}

.cl-material-preview-header strong {
	color: #07314a;

	font-size: 14px;
}

.cl-material-preview-header span {
	padding: 6px 8px;

	border-radius: 20px;

	background: #eaf9ef;
	color: #169750;

	font-size: 9px;
	font-weight: 700;
}


/* ITENS */

.cl-material-preview-item {
	display: grid;

	grid-template-columns:
		30px 1fr auto;

	gap: 9px;
	align-items: center;

	padding: 12px 0;

	border-bottom:
		1px solid #edf1f3;
}

.cl-material-preview-item:last-child {
	border-bottom: 0;
}

.cl-material-preview-item i {
	width: 28px;
	height: 28px;

	display: grid;
	place-items: center;

	border-radius: 8px;

	background: #eaf7fd;
	color: #159fd2;

	font-size: 9px;
	font-style: normal;
	font-weight: 700;
}

.cl-material-preview-item div {
	color: #304854;

	font-size: 11px;
	font-weight: 600;
}

.cl-material-preview-item b {
	color: #18a956;
}

/* ==========================================================
   COMO FUNCIONA + MATERIAL — TABLET
   ========================================================== */

@media (max-width: 960px) {

	.cl-how-grid {
		grid-template-columns: 1fr;
	}

	.cl-material-feature-panel {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================
   COMO FUNCIONA + MATERIAL — MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-how-section {
		padding: 48px 0;
	}

	.cl-material-feature {
		padding-bottom: 48px;
	}

	.cl-material-feature-panel {
		padding: 24px;
	}

	.cl-material-feature-content h2 {
		font-size: 29px;
	}

	.cl-material-preview-header {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* ==========================================================
   PREPARAÇÃO OAB
   ========================================================== */

.cl-oab-section {
	padding: 64px 0;

	background: #f7fbfd;
}

.cl-oab-header {
	margin-bottom: 20px;
}


/* ==========================================================
   ABAS
   ========================================================== */

.cl-oab-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	margin-bottom: 22px;
}

.cl-oab-tab {
	min-height: 38px;

	padding: 0 14px;

	border: 1px solid #d5e5ec;
	border-radius: 999px;

	background: #ffffff;
	color: #49606d;

	font-size: 12px;
	font-weight: 700;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease;
}

.cl-oab-tab:hover {
	border-color: #2bb7e7;

	color: #159fd2;
}

.cl-oab-tab.is-active {
	border-color: #07314a;

	background: #07314a;
	color: #ffffff;
}


/* ==========================================================
   PAINÉIS
   ========================================================== */

.cl-oab-panel {
	display: none;
}

.cl-oab-panel.is-active {
	display: block;
}

/* ==========================================================
   OAB — MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-oab-section {
		padding: 48px 0;
	}

	.cl-oab-tabs {
		overflow-x: auto;
		flex-wrap: nowrap;

		padding-bottom: 4px;

		scrollbar-width: none;
	}

	.cl-oab-tabs::-webkit-scrollbar {
		display: none;
	}

	.cl-oab-tab {
		flex: 0 0 auto;
	}
}

/* ==========================================================
   POR QUE COMPRAR NO CONCURSO LIVRE
   ========================================================== */

.cl-trust-section {
	padding: 64px 0;

	background: #f7fbfd;
}

.cl-trust-grid {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 16px;
}


/* CARD */

.cl-trust-card {
	padding: 22px;

	border: 1px solid #dce8ef;
	border-radius: 17px;

	background: #ffffff;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.cl-trust-card:hover {
	border-color: #c7e3ee;

	box-shadow:
		0 14px 35px rgba(12, 64, 91, 0.08);

	transform: translateY(-2px);
}


/* ÍCONE */

.cl-trust-icon {
	width: 40px;
	height: 40px;

	display: grid;
	place-items: center;

	border-radius: 11px;

	background: #eaf8fd;
	color: #159fd2;

	font-size: 14px;
	font-weight: 700;
}


/* TÍTULO */

.cl-trust-card h3 {
	margin: 15px 0 7px;

	color: #07314a;

	font-size: 16px;
	font-weight: 700;
}


/* TEXTO */

.cl-trust-card p {
	margin: 0;

	color: #687986;

	font-size: 12px;
	line-height: 1.55;
}

/* ==========================================================
   CONFIANÇA — TABLET
   ========================================================== */

@media (max-width: 960px) {

	.cl-trust-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* ==========================================================
   CONFIANÇA — MOBILE
   ========================================================== */

@media (max-width: 600px) {

	.cl-trust-section {
		padding: 48px 0;
	}

	.cl-trust-grid {
		grid-template-columns: 1fr;
	}
}