/* ════════════════════════════════════════════════════════════════════════
   DentGrow — Painel do menu «Serviços»
   Carregado em todas as páginas por mu-plugins/dentgrow-menu.php.

   Manual de normas: Inter; labels 600/12px/CAPS; DentBlue #1558D6 nos estados
   ativos; SkyBlue #EBF2FF no fundo dos ícones e no hover; DeepNavy #0A1628 na
   coluna da análise; GrowGreen #00C896 só no rótulo dessa coluna.

   O painel é position:fixed. O menu.js põe --dgm-top, --dgm-left, --dgm-width
   e --dgm-arrow (posição da seta) ao abrir; os valores abaixo são o recurso
   sem JS.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Item «Serviços» ──────────────────────────────────────────────────── */
.dgm-li { position: relative; }
.et-l--header .et-menu-nav li.dgm-li > a.dgm-trigger::after,
#nav .dgm-li > a.dgm-trigger::after { transition: transform .2s ease; }
.dgm-li.dgm-open > a.dgm-trigger::after { transform: rotate(180deg); }
.dgm-li.dgm-open > a.dgm-trigger { color: #FFFFFF !important; }

/* O sub-menu do Divi fica só para o menu móvel. */
@media (min-width: 981px) {
	.et-l--header .et-menu-nav li.dgm-li > ul.sub-menu { display: none !important; }
}

/* ── Painel ───────────────────────────────────────────────────────────── */
.dgm-panel {
	--dgm-top: 96px;
	--dgm-width: min(1040px, calc(100vw - 40px));
	--dgm-left: calc((100vw - var(--dgm-width)) / 2);
	--dgm-arrow: 70%;

	position: fixed;
	top: var(--dgm-top);
	left: var(--dgm-left);
	width: var(--dgm-width);
	padding-top: 14px;            /* ponte invisível: o rato passa do item ao painel sem fechar */
	z-index: 100001;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	pointer-events: none;
}
.dgm-li.dgm-open > .dgm-panel,
.dgm-li:not(.dgm-js):hover > .dgm-panel,
.dgm-li:not(.dgm-js):focus-within > .dgm-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .18s ease, transform .18s ease, visibility 0s;
	pointer-events: auto;
}
.dgm-arrow {
	position: absolute; top: 8px; left: var(--dgm-arrow);
	width: 14px; height: 14px; margin-left: -7px;
	background: #FFFFFF; border-radius: 3px; transform: rotate(45deg);
}
.dgm-box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px;
	background: #FFFFFF;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}
.dgm-panel *, .dgm-panel *::before, .dgm-panel *::after { box-sizing: border-box; }
.dgm-panel p { margin: 0; padding: 0; }
.dgm-panel a { text-decoration: none; }

.dgm-col { padding: 28px 20px 24px; display: flex; flex-direction: column; }
.dgm-col + .dgm-col { border-left: 1px solid #F1F5F9; }
.dgm-panel .dgm-label {
	margin: 0 12px 10px; font-size: 12px; font-weight: 600; line-height: 1.3;
	letter-spacing: .28em; text-transform: uppercase; color: #4A5568;
}
.dgm-panel .dgm-label--green { margin: 0; color: #00C896; }

/* No header 52 o painel vive dentro do menu do Divi, cujas regras genéricas
   (`.nav li ul`, `.et-menu li li`, `.et-menu li li a`) fariam desta lista um
   sub-menu escondido de 240px. Repomos tudo explicitamente. */
.dgm-panel ul.dgm-list {
	position: static !important; visibility: inherit !important; opacity: 1 !important;
	transform: none !important; width: auto !important; min-width: 0 !important;
	margin: 0 !important; padding: 0 !important; border: 0 !important;
	background: none !important; box-shadow: none !important;
	list-style: none; display: flex !important; flex-direction: column; gap: 4px;
	left: auto !important; top: auto !important;
}
.dgm-panel ul.dgm-list li {
	margin: 0 !important; padding: 0 !important; list-style: none;
	float: none !important; width: auto !important; display: block !important;
	line-height: normal !important;
}
.dgm-panel ul.dgm-list li a { width: auto !important; }
.dgm-panel .dgm-item {
	display: flex; align-items: flex-start; gap: 14px;
	padding: 12px !important; border-radius: 14px;
	color: #0A1628 !important; opacity: 1 !important;
	transition: background .18s ease;
}
.dgm-ic {
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: #EBF2FF; color: #1558D6;
	transition: background .18s ease, color .18s ease;
}
.dgm-ic svg { display: block; }
.dgm-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dgm-title { font-size: 15px; font-weight: 600; line-height: 1.35; color: #0A1628; transition: color .18s ease; }
.dgm-desc { font-size: 13px; font-weight: 400; line-height: 1.5; color: #4A5568; }
.dgm-go { flex: 0 0 auto; margin-top: 12px; color: #1558D6; opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; }
.dgm-go svg { display: block; }

.dgm-panel .dgm-item:hover,
.dgm-panel .dgm-item:focus-visible { background: #EBF2FF; }
.dgm-item:hover .dgm-ic, .dgm-item:focus-visible .dgm-ic { background: #1558D6; color: #FFFFFF; }
.dgm-item:hover .dgm-title, .dgm-item:focus-visible .dgm-title { color: #1558D6; }
.dgm-item:hover .dgm-go, .dgm-item:focus-visible .dgm-go { opacity: 1; transform: none; }
.dgm-panel a:focus-visible { outline: 3px solid #00C896; outline-offset: 2px; }

.dgm-panel .dgm-all {
	margin: auto 12px 0; padding: 16px 0 0 !important; border-top: 1px solid #F1F5F9;
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; font-weight: 600; color: #1558D6 !important; opacity: 1 !important;
}
.dgm-panel .dgm-all:hover { color: #0E3FA0 !important; }

.dgm-cta {
	position: relative; overflow: hidden;
	background: #0A1628; color: #FFFFFF;
	padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.dgm-cta::before {
	content: ""; position: absolute; right: -40px; top: -40px;
	width: 180px; height: 180px; border-radius: 50%;
	border: 28px solid rgba(0, 200, 150, .10);
	pointer-events: none;
}
.dgm-panel .dgm-cta__title { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; }
.dgm-panel .dgm-cta__sub { font-size: 14px; line-height: 1.6; color: #CBD5E1; }
.dgm-panel .dgm-cta__btn {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
	background: #1558D6; color: #FFFFFF !important; opacity: 1 !important;
	font-size: 14px; font-weight: 600; padding: 12px 18px !important; border-radius: 8px;
	transition: background .15s ease;
}
.dgm-panel .dgm-cta__btn:hover { background: #0E3FA0; }

/* Ecrãs médios: a coluna da análise passa para baixo. */
@media (min-width: 981px) and (max-width: 1100px) {
	.dgm-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.dgm-cta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; }
	.dgm-panel .dgm-cta__btn { margin-top: 0; margin-left: auto; }
}

/* ── Telemóvel ────────────────────────────────────────────────────────────
   O painel não existe aqui: fica a lista do menu móvel do Divi, com a frase
   de cada serviço por baixo do nome. */
@media (max-width: 980px) {
	.dgm-panel { display: none !important; }
}
.et_mobile_menu .dgm-panel { display: none !important; }
.dgm-mdesc { display: none; }
.et_mobile_menu .dgm-mdesc {
	display: block; margin-top: 2px;
	font-size: 13px; font-weight: 400; line-height: 1.45; color: #A9B4C7;
}

@media (prefers-reduced-motion: reduce) {
	.dgm-panel, .dgm-li.dgm-open > .dgm-panel { transition: none; transform: none; }
	.dgm-ic, .dgm-go, .dgm-title, .dgm-item { transition: none; }
}