/*
 * Blocos da home editáveis no Live Composer:
 *   página 3684 "Bloco da Home — Recursos lúdicos"  (seção com classe kl-lc-recursos)
 *   página 3685 "Bloco da Home — Blog"              (seção com classe kl-lc-blog)
 * Carregado na home (modelo v3) e nas páginas dos blocos, para o editor mostrar o mesmo visual.
 * Os cards seguem a estrutura: coluna (classe kl-card) > Imagem + Texto (kl-card-texto) + Botão (kl-card-botao).
 */

/* ---------- seção neutra: o espaçamento vem da home ---------- */
.kl-lc-bloco.dslc-modules-section {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: 0 !important;
}
.kl-lc-wrap .kl-lc-bloco .dslc-modules-section-wrapper {
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* ---------- Recursos lúdicos: cada coluna vira um card ---------- */
body:not(.dslca-enabled) .kl-lc-recursos .dslc-modules-section-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
body:not(.dslca-enabled) .kl-lc-recursos .dslc-modules-section-wrapper::before,
body:not(.dslca-enabled) .kl-lc-recursos .dslc-modules-section-wrapper::after { display: none; }
@media (min-width: 640px) {
	body:not(.dslca-enabled) .kl-lc-recursos .dslc-modules-section-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	body:not(.dslca-enabled) .kl-lc-recursos .dslc-modules-section-wrapper { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
body:not(.dslca-enabled) .kl-lc-recursos .kl-card.dslc-modules-area {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
}

.kl-lc-recursos .kl-card.dslc-modules-area {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(47, 59, 76, .05), 0 8px 10px -6px rgba(47, 59, 76, .05);
	outline: 1px solid rgba(47, 59, 76, .05);
	outline-offset: -1px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.kl-lc-recursos .kl-card.dslc-modules-area:hover {
	transform: translateY(-6px);
	box-shadow: 0 25px 50px -12px rgba(47, 59, 76, .16);
}
.kl-lc-recursos .kl-card > .dslc-module-front {
	float: none !important;
	width: 100% !important;
	max-width: none !important;
	align-self: stretch;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* imagem do topo em 16:9 */
.kl-lc-recursos .kl-card-imagem .dslc-image-container,
.kl-lc-recursos .kl-card-imagem .dslc-image {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: hidden;
}
.kl-lc-recursos .kl-card-imagem img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform .5s ease;
}
.kl-lc-recursos .kl-card:hover .kl-card-imagem img { transform: scale(1.05); }

/* texto do card */
.kl-lc-recursos .kl-card-texto,
.kl-lc-recursos .kl-card-texto .dslc-text-module-content { position: static !important; }
.kl-lc-recursos .kl-card-texto .dslc-text-module-content { padding: 22px 24px 4px !important; }
.kl-lc-recursos .kl-card-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 26px;
	margin: 0 0 2px !important;
}
.kl-lc-recursos .kl-idade {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: #fbf8f4;
	color: rgba(47, 59, 76, .7);
	font: 700 12px/1.5 "Work Sans", system-ui, sans-serif;
}
.kl-lc-recursos .kl-estrelas {
	color: #f9ce1f;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 2px;
}
/* selo "Grátis" / "-31%" sobre a imagem */
.kl-lc-recursos .kl-selo {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 6px 12px;
	border-radius: 999px;
	font: 800 12px/1 "Nunito", system-ui, sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.kl-lc-recursos .kl-selo-gratis { background: #b5dd63; color: #24400f; }
.kl-lc-recursos .kl-selo-oferta { background: #e84a62; color: #fff; }
/* preço */
.kl-lc-recursos .kl-preco {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 20px !important;
}
.kl-lc-recursos .kl-preco strong { color: #e84a62; font: 900 24px/1.2 "Nunito", system-ui, sans-serif; }
.kl-lc-recursos .kl-preco s { color: #5b6b7f; font-size: 14px; }

/* botão sempre no rodapé do card */
.kl-lc-recursos .kl-card-botao.dslc-module-front { margin-top: auto !important; }
.kl-lc-recursos .kl-card-botao .dslc-button { display: block !important; width: 100%; }
.kl-lc-recursos .kl-card-botao .dslc-button a {
	display: flex !important;
	width: 100%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background-color .2s ease;
}
.kl-lc-recursos .kl-card-botao .dslc-button a:hover { transform: translateY(-2px); }

/* ---------- altura padrão dos botões na home (--kl-btn-h, em lc-header.css) ----------
   O mu-plugin antigo kaina-home-design ainda vale na front page e põe min-height 50px em todo botão do LC
   (".home .dslc-module-DSLC_Button .dslc-button a"); aqui o body.kl-body ganha pela especificidade. */
body.kl-body .dslc-module-DSLC_Button .dslc-button a { min-height: var(--kl-btn-h, 52px); box-sizing: border-box; }
/* CTA do menu do celular (mu-plugin kaina-mobile-ui): mesma altura e mesmo degradê do botão do topo */
body.kl-body .kaina-menu-cta {
	min-height: var(--kl-btn-h, 52px);
	box-sizing: border-box;
	padding-top: 0;
	padding-bottom: 0;
	color: #001b36 !important;
	background: linear-gradient(45deg, #009494 0%, #00c9c6 25%, #00f6f6 50%, #5ffaf6 75%, #a8fdf9 100%) 0% 50% / 200% 100%;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75), 0 8px 18px -8px rgba(0, 150, 150, .55);
}

/* ---------- Blog ---------- */
/* um card por post, com respiro entre eles (na home antiga cada post era um módulo separado) */
.kl-lc-posts .dslc-blog-posts {
	background: transparent !important;
	padding: 0 !important;
	border-radius: 0 !important;
}
.kl-lc-posts .dslc-post {
	margin-bottom: 26px !important;
	padding: 5px;
	border-radius: 10px;
	background: #fff;
}
.kl-lc-posts .dslc-post:last-child { margin-bottom: 0 !important; }
.kl-lc-posts .dslc-blog-post-thumb-inner { border-color: transparent !important; }
.kl-lc-posts .dslc-blog-post-title h2 { margin: 0 0 10px !important; }
/* celular: foto em cima, ocupando a largura do card */
@media (max-width: 639px) {
	.kl-lc-posts .dslc-blog-post-thumb { float: none !important; width: 100% !important; margin: 0 !important; }
	.kl-lc-posts .dslc-blog-post-thumb-inner { padding: 0 !important; }
	.kl-lc-posts .dslc-blog-post-thumb img {
		display: block;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 5 / 3;
		object-fit: cover;
		border-radius: 10px;
	}
	.kl-lc-posts .dslc-blog-post-main { padding: 16px 12px 8px !important; }
}
.kl-lc-posts .dslc-blog-post-excerpt { margin-bottom: 12px !important; }
.kl-lc-blog .dslc-blog-post-read-more a { display: inline-flex; align-items: center; gap: 6px; }

/* lateral: o card da Kaina e o título "Categorias" vêm do modelo (landing-v3.php);
   o módulo Texto do LC com a classe kl-lc-blog-links (a lista de links) vira o card branco de baixo */
.kl-lc-blog-lateral > .kl-blog-perfil { margin-bottom: 24px; }
.kl-lc-blog-links {
	background: #fff;
	border-radius: 28px; /* px: a página do bloco (editor do LC) usa outra base de rem */
	padding: 20px 14px 14px !important;
	box-shadow: 0 20px 25px -5px rgba(47, 59, 76, .05), 0 8px 10px -6px rgba(47, 59, 76, .05), 0 0 0 1px rgba(47, 59, 76, .05);
	min-height: 0 !important;
}
.kl-lc-blog-links .kl-blog-cat-titulo { margin: 0 6px 10px !important; }
.kl-lc-blog-links ul,
.kl-lc-blog-links li { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.kl-lc-blog-links li + li { margin-top: 2px !important; }
.kl-lc-blog-links li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 14px;
	color: #2f3b4c !important;
	font: 700 15px/1.35 "Nunito", system-ui, sans-serif;
	text-decoration: none !important;
	transition: background-color .2s ease, color .2s ease;
}
.kl-lc-blog-links li a::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: currentColor;
	opacity: .3;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .2s ease, opacity .2s ease;
}
/* contagem de posts (kaina_cat_contagem_links): empurra a seta para a direita junto com ela */
.kl-lc-blog-links li a .kl-cat-n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	margin-left: auto;
	margin-right: -4px;
	padding: 0 7px;
	box-sizing: border-box;
	border-radius: 999px;
	background: #e3f4f1;
	color: #0f5e59;
	font: 800 12px/1 "Nunito", system-ui, sans-serif;
	transition: background-color .2s ease, color .2s ease;
}
.kl-lc-blog-links li a:hover .kl-cat-n { background: #fff; color: #e84a62; }
.kl-lc-blog-links li a:hover { background: #fdeef1; color: #e84a62 !important; }
.kl-lc-blog-links li a:hover::after { opacity: 1; transform: translateX(3px); }
@media (max-width: 1023px) {
	body:not(.dslca-enabled) .kl-lc-blog .dslc-modules-area { float: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
	body:not(.dslca-enabled) .kl-lc-blog .kl-lc-blog-lateral { margin-top: 32px !important; }
}

/* ---------- atalho "Editar no Live Composer" (só para quem pode editar) ---------- */
.kl-lc-editar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 10px;
}
.kl-lc-editar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: #2271b1;
	color: #fff !important;
	font: 600 13px/1.2 "Work Sans", system-ui, sans-serif;
	text-decoration: none;
}
.kl-lc-editar a:hover { background: #135e96; }

/* ---------- rodapé do LC na home: imagens alinhadas como nas outras páginas (o reset da home deixa img em bloco) ---------- */
.kl-body #dslc-footer img { display: inline-block; }