/* ============================================================
   DOCAMPO LÓPEZ — Mega-menú de Productos
   Prefijo: dlp-mega-  ·  Ants Solutions
   Mismos tokens de color/tipografía que el resto del sitio.
   ============================================================ */

.dlp-mega-menu{
	--dl-paper:      #F2F3F5;
	--dl-ink:        #1E1E1E;
	--dl-ink-soft:   #4B4F56;
	--dl-brand:      var(--dlp-color-marca, #BF2E1B);
	--dl-blueprint:  #1E1E1E;
	--dl-line:       rgba(30,30,30,0.14);
	font-family: 'Montserrat', sans-serif;
	background: var(--dl-paper);
	border: 1px solid var(--dl-line);
	box-shadow: 0 14px 30px rgba(30,30,30,.10);
	padding: 28px 32px;
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	min-width: 560px;
	max-width: 900px;
}
.dlp-mega-menu *{ box-sizing: border-box; }
.dlp-mega-menu a{ text-decoration: none; color: inherit; }

.dlp-mega-menu-cols{
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
	flex: 1;
}

.dlp-mega-col{ min-width: 150px; }
.dlp-mega-col-title{
	display: block;
	font-weight: 700;
	font-size: 13.5px;
	color: var(--dl-ink);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--dl-brand);
}
.dlp-mega-col-title:hover{ color: var(--dl-brand); }
.dlp-mega-col ul{ list-style: none; margin: 0; padding: 0; }
.dlp-mega-col li{ margin-bottom: 8px; }
.dlp-mega-col a{
	font-size: 13px;
	color: var(--dl-ink-soft);
	transition: color .15s ease, padding-left .15s ease;
}
.dlp-mega-col a:hover{ color: var(--dl-brand); padding-left: 3px; }

.dlp-mega-lineas{
	min-width: 130px;
	border-left: 1px solid var(--dl-line);
	padding-left: 32px;
}
.dlp-mega-lineas-title{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dl-brand);
	margin: 0 0 14px;
}
.dlp-mega-lineas ul{ list-style: none; margin: 0; padding: 0; }
.dlp-mega-lineas li{ margin-bottom: 8px; }
.dlp-mega-lineas a{
	font-size: 13px;
	color: var(--dl-ink-soft);
	transition: color .15s ease;
}
.dlp-mega-lineas a:hover{ color: var(--dl-blueprint); }

.dlp-mega-footer{
	flex-basis: 100%;
	border-top: 1px solid var(--dl-line);
	margin-top: 4px;
	padding-top: 16px;
}
.dlp-mega-footer a{
	font-weight: 600;
	font-size: 12.5px;
	color: var(--dl-blueprint);
}
.dlp-mega-footer a:hover{ color: var(--dl-brand); }

/* ------------------------------------------------------------
   Mostrar/ocultar al pasar el mouse sobre el ítem "Productos".
   Si tu header ya trae su propio mecanismo de hover (por ejemplo
   un plugin de mega-menú), podés borrar este bloque entero — con
   que el shortcode quede DENTRO de ese contenedor alcanza.
   Si no, envolvé el ítem de menú "Productos" + este shortcode en
   un contenedor con la clase "dlp-mega-menu-host" desde Elementor
   (Advanced → CSS Classes) y este CSS hace el resto.
   ------------------------------------------------------------ */
.dlp-mega-menu-host{ position: relative; }
.dlp-mega-menu-host .dlp-mega-menu{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.dlp-mega-menu-host:hover .dlp-mega-menu{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

@media (max-width: 900px){
	.dlp-mega-menu{ min-width: 0; max-width: 100%; flex-direction: column; gap: 24px; }
	.dlp-mega-lineas{ border-left: none; border-top: 1px solid var(--dl-line); padding-left: 0; padding-top: 20px; }
}