/* COMGI · diseño nativo de Elementor (estilo The7 «Elementor 2026»).
   Solo retoques que Elementor no ofrece como control: el resto se edita en Elementor. */
.cgn-prose { overflow-wrap: anywhere; }
.cgn-prose p { margin: 0 0 1.1em; }
.cgn-prose h2 { font-size: 30px; margin: 1.4em 0 .5em; }
.cgn-prose h3 { font-size: 23px; margin: 1.3em 0 .5em; }
.cgn-prose h2:first-child, .cgn-prose h3:first-child { margin-top: 0; }
.cgn-prose ul, .cgn-prose ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.cgn-prose li { margin-bottom: .45em; }
.cgn-prose li::marker { color: var(--cgn-blue, #2C74FF); }
.cgn-prose img { max-width: 100%; height: auto; border-radius: 0 0 40px 0; }
.cgn-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: 16px; display: block; overflow-x: auto; }
.cgn-prose th, .cgn-prose td { border: 1px solid #E3E8EF; padding: 10px 12px; text-align: left; vertical-align: top; }
.cgn-prose th { background: #EAF1FF; font-weight: 500; }
.cgn-prose a { text-decoration: underline; text-underline-offset: 3px; }
.cgn-prose a[href*=".pdf"] { display: inline-flex; gap: 8px; align-items: center; }
.cgn-prose a[href*=".pdf"]::before { content: "PDF"; font-size: 11px; font-weight: 600; color: #fff; background: linear-gradient(115deg, #2C74FF 33%, #01C2CE); border-radius: 6px 0; padding: 2px 6px; text-decoration: none; }
.cgn-prose iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.elementor .cgn-crumbs a { color: inherit !important; text-decoration: none; }
.elementor .cgn-crumbs a:hover { color: #fff !important; }
.cgn-card { transition: transform .2s, box-shadow .2s; }
.cgn-card:hover { transform: translateY(-4px); }
.cgn-card .elementor-heading-title a { color: inherit; }
/* Tarjetas de documento: la columna de texto ocupa el hueco sin desbordar. */
.cgn-doc > .e-con { --width: auto; flex: 1 1 0; min-width: 0; }
.cgn-doc .elementor-heading-title { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------
   Megamenú en columnas para el widget «Menú» de Elementor Pro.
   Se aplica al elemento del menú con la clase CSS «cg-mega» (Soy médico/a);
   puedes ponérsela a cualquier otro en Apariencia → Menús → Clases CSS.
   Solo escritorio: en móvil se mantiene el desplegable normal.
   --------------------------------------------------------------------- */
@media (min-width: 1025px) {
	.elementor-nav-menu--main li.cg-mega { position: static; }
	.elementor-nav-menu--main .elementor-nav-menu > li.cg-mega > .sub-menu {
		width: min(1100px, 92vw) !important;
		max-width: none !important;
		left: 50% !important;
		right: auto !important;
		margin-left: 0 !important;
		transform: translateX(-50%);
		grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
		gap: 10px 26px;
		padding: 30px 34px !important;
		background: #fff;
		box-shadow: 0 5px 33px rgba(64, 92, 146, .25);
		border-top: 3px solid var(--cgn-blue, #2C74FF);
	}
	.elementor-nav-menu--main .elementor-nav-menu > li.cg-mega:hover > .sub-menu,
	.elementor-nav-menu--main .elementor-nav-menu > li.cg-mega > a.highlighted ~ .sub-menu,
	.elementor-nav-menu--main .elementor-nav-menu > li.cg-mega:focus-within > .sub-menu {
		display: grid !important;
	}
	/* Encabezado de cada columna. */
	.elementor-nav-menu--main li.cg-mega > .sub-menu > li > a {
		font-weight: 500 !important;
		color: var(--cgn-title, #021228) !important;
		border-bottom: 1px solid #E3E8EF !important;
		padding: 8px 4px !important;
		margin-bottom: 6px;
		background: transparent !important;
		white-space: normal !important;
	}
	/* Enlaces de cada columna: siempre visibles, sin desplegable propio. */
	.elementor-nav-menu--main li.cg-mega > .sub-menu .sub-menu {
		display: block !important;
		position: static !important;
		width: auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		left: auto !important;
		top: auto !important;
		box-shadow: none !important;
		border: 0 !important;
		background: transparent !important;
		padding: 0 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
	.elementor-nav-menu--main li.cg-mega > .sub-menu .sub-menu a {
		font-size: 14px !important;
		padding: 6px 4px !important;
		color: var(--cgn-text, #3B4757) !important;
		background: transparent !important;
		white-space: normal !important;
		border: 0 !important;
	}
	.elementor-nav-menu--main li.cg-mega > .sub-menu .sub-menu a:hover {
		color: var(--cgn-blue, #2C74FF) !important;
	}
	.elementor-nav-menu--main li.cg-mega > .sub-menu .sub-arrow { display: none !important; }
}

/* ---------------------------------------------------------------------
   Candado en elementos del menú que llevan a la zona privada.
   Uso: Apariencia → Menús → elemento → Clases CSS: cg-lock
   (Si no ves «Clases CSS», actívalo en «Opciones de pantalla».)
   --------------------------------------------------------------------- */
.menu-item.cg-lock > a::before,
li.cg-lock > a::before {
	content: "" !important;
	/* !important: Elementor usa ::before para la animación del subrayado y lo oculta. */
	position: static !important;
	opacity: 1 !important;
	display: inline-block !important;
	width: .85em !important;
	height: .85em !important;
	margin-right: .4em !important;
	vertical-align: -.05em;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	flex: none !important;
	background-color: currentColor !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48h160v-48a80 80 0 0 0-160 0zm-64 48v-48a144 144 0 0 1 288 0v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M144 144v48h160v-48a80 80 0 0 0-160 0zm-64 48v-48a144 144 0 0 1 288 0v48h16c35.3 0 64 28.7 64 64v192c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64h16z'/%3E%3C/svg%3E") no-repeat center / contain;
}