/*
 * Header do Live Composer "Header Kaina (home v3)" — dslc_hf 3688.
 * Carregado em todas as páginas do site; só atinge as classes deste header (kl-lc-header-*),
 * então o header antigo (3444 "Menu Topo") não muda.
 *   linha 1: faixa verde  (seção kl-lc-header-topo)  -> nome/CRP, telefone, e-mail, redes
 *   linha 2: barra branca (seção kl-lc-header-nav)   -> logo, menu (Menu Topo), botão
 */

:root { --kl-topo-h: 40px; }

/* ---------- largura igual à da home ---------- */
.kl-lc-header-topo,
.kl-lc-header-nav { padding: 0 !important; margin: 0 !important; }
.kl-lc-header-topo .dslc-modules-section-wrapper,
.kl-lc-header-nav .dslc-modules-section-wrapper {
	width: auto !important;
	max-width: 1280px !important;
	margin: 0 auto !important;
	padding: 0 16px !important;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.kl-lc-header-topo .dslc-modules-section-wrapper,
	.kl-lc-header-nav .dslc-modules-section-wrapper { padding: 0 24px !important; }
}
@media (min-width: 1024px) {
	.kl-lc-header-topo .dslc-modules-section-wrapper,
	.kl-lc-header-nav .dslc-modules-section-wrapper { padding: 0 32px !important; }
}
@media (min-width: 1280px) {
	.kl-lc-header-topo .dslc-modules-section-wrapper,
	.kl-lc-header-nav .dslc-modules-section-wrapper { padding-right: 120px !important; }
}

/* ---------- módulos lado a lado ---------- */
.kl-lc-header-topo-area,
.kl-lc-header-nav-area {
	display: flex !important;
	align-items: center;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.kl-lc-header-topo-area::after,
.kl-lc-header-nav-area::after { display: none !important; }
.kl-lc-header-topo-area > .dslc-module-front,
.kl-lc-header-nav-area > .dslc-module-front {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	min-height: 0 !important;
}

/* ---------- faixa verde ---------- */
.kl-lc-header-topo-area { height: var(--kl-topo-h); gap: 16px; justify-content: space-between; }
.kl-lc-header-topo .dslc-info-box,
.kl-lc-header-topo .dslc-info-box-wrapper,
.kl-lc-header-topo .dslc-info-box-main-wrap { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.kl-lc-header-topo .dslc-info-box-title h4,
.kl-lc-header-topo .dslc-info-box-title h4 a { margin: 0 !important; white-space: nowrap; }
.kl-lc-header-topo .dslc-info-box-title h4 a:hover { color: #fff !important; }
.kl-lc-topo-nome { flex: 1 1 0; }
.kl-lc-header-topo-area > .kl-lc-topo-fone { margin-right: 64px !important; }
.kl-lc-topo-redes { flex: 1 1 0; display: flex; justify-content: flex-end; }
.kl-lc-topo-redes .dslc-social { margin: 0 !important; }
@media (max-width: 1023px) {
	.kl-lc-topo-nome { display: none !important; }
	.kl-lc-header-topo-area > .kl-lc-topo-fone { margin-right: 24px !important; }
	.kl-lc-topo-fone, .kl-lc-topo-redes { flex: 0 0 auto; }
}
@media (max-width: 639px) { .kl-lc-topo-email { display: none !important; } }

/* ---------- barra branca ---------- */
.kl-lc-header-nav-area { gap: 24px; justify-content: space-between; padding: 14px 0 !important; }
.kl-lc-logo { flex: 0 0 auto; }
.kl-lc-logo img { display: block; height: auto; }
.kl-lc-menu { flex: 1 1 auto; }
.kl-lc-menu .dslc-navigation { text-align: center !important; }
.kl-lc-menu .dslc-navigation-inner > div > ul > li > a,
.kl-lc-menu .dslc-navigation-inner > ul > li > a { transition: color .2s ease, border-color .2s ease; }
.kl-lc-cta { flex: 0 0 auto; }

/* altura padrão dos botões da home (LC e Tailwind usam a mesma) */
:root { --kl-btn-h: 52px; }

/* botão "Agende um Atendimento": mesmo degradê do "Agendar diretamente comigo" do hero (.kl-btn-online):
   diagonal verde-água -> ciano, texto azul-marinho, contorno branco fino; no hover desliza para a parte clara.
   #dslc-header na frente: o mu-plugin antigo kaina-home-design ainda age na front page (".home .dslc-module-DSLC_Button
   .dslc-button a", com sombra !important) e ganhava pela especificidade. */
#dslc-header .kl-lc-cta .dslc-button a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: var(--kl-btn-h);
	white-space: nowrap;
	color: #001b36 !important;
	background-image: linear-gradient(45deg, #009494 0%, #00c9c6 25%, #00f6f6 50%, #5ffaf6 75%, #a8fdf9 100%) !important;
	background-size: 200% 100% !important;
	background-position: 0% 50%;
	box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75), 0 8px 18px -8px rgba(0, 150, 150, .55) !important;
	transition: background-position .45s ease, box-shadow .25s ease, transform .2s ease !important;
}
#dslc-header .kl-lc-cta .dslc-button a span { color: inherit !important; }
#dslc-header .kl-lc-cta .dslc-button a:hover {
	transform: translateY(-2px);
	background-position: 60% 50%;
	box-shadow: 0 0 0 1.5px #fff, 0 16px 28px -10px rgba(0, 190, 190, .7) !important;
}
/* desktop: o hero já tem dois botões de agendar, então o do menu fica discreto, igual ao cabeçalho da home antiga
   (módulo f0e76e31668 da página 1390): fundo #f6f3f4 com brilho branco no canto (classe gradient-lighten-top-right
   do LC), borda fina só embaixo e à esquerda, Work Sans 500. Fica fora da altura padrão de 52px de propósito.
   1025px = onde termina o "tablet" do LC (max-width:1024px); no tablet e no menu do celular segue o degradê. */
@media (min-width: 1025px) {
	#dslc-header .kl-lc-cta .dslc-button a {
		position: relative;
		overflow: hidden;
		gap: 10px;
		min-height: 0;
		padding: 10px 15px !important;
		border: 0 !important;
		border-bottom: 1px solid #beb991 !important;
		border-left: 1px solid #beb991 !important;
		border-radius: 50px !important;
		background: #f6f3f4 !important;
		color: #001b36 !important;
		font: 500 17px/17px "Work Sans", "Nunito", system-ui, sans-serif !important;
		box-shadow: none !important;
		transition: background-color .2s ease, box-shadow .2s ease !important;
	}
	#dslc-header .kl-lc-cta .dslc-button a::before {
		content: "";
		position: absolute;
		inset: 0;
		background-image: linear-gradient(30deg, rgba(255, 255, 255, 0), #fff);
		mix-blend-mode: overlay;
		pointer-events: none;
	}
	#dslc-header .kl-lc-cta .dslc-button a:hover {
		transform: none;
		background: rgba(255, 255, 255, .84) !important;
		box-shadow: 0 0 3px .1px rgba(14, 116, 178, .5) !important;
	}
}

/* ---------- header fixo ao rolar: a faixa verde sai, a barra branca fica no topo ---------- */
body:not(.dslca-enabled) #dslc-header:has(.kl-lc-header-nav) {
	position: sticky !important;
	top: calc(-1 * var(--kl-topo-h));
	z-index: 60;
}
body.admin-bar:not(.dslca-enabled) #dslc-header:has(.kl-lc-header-nav) { top: calc(32px - var(--kl-topo-h)); }
@media (max-width: 782px) {
	body.admin-bar:not(.dslca-enabled) #dslc-header:has(.kl-lc-header-nav) { top: calc(46px - var(--kl-topo-h)); }
}
@media (max-width: 600px) {
	body.admin-bar:not(.dslca-enabled) #dslc-header:has(.kl-lc-header-nav) { top: calc(-1 * var(--kl-topo-h)); }
}
.kl-lc-header-nav { transition: box-shadow .25s ease; }
#dslc-header.kl-rolou .kl-lc-header-nav { box-shadow: 0 1px 0 rgba(47, 59, 76, .06), 0 10px 26px rgba(47, 59, 76, .07); }
/* com o menu do celular aberto (mu-plugin kaina-mobile-ui), o header fica acima do fundo escurecido */
.kaina-menu-open body:not(.dslca-enabled) #dslc-header:has(.kl-lc-header-nav) { z-index: 1000; }

/* Expressões que não podem quebrar no meio (ex.: "crianças e adolescentes" no título dos recursos) — 05/10/2026 */
.kl-junto { white-space: nowrap; }
@media (max-width: 420px) { .kl-junto { white-space: normal; } }