/* Estilos personalizados para Mujer Plena */

/* Cursor pointer para elementos interactivos */
.cursor-pointer {
	cursor: pointer;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cursor-pointer:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Barra superior fija */
.top-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	height: auto;
	min-height: 32px;
}

/* Estilos para la barra superior con íconos */
.top-bar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.top-bar ul li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.top-bar ul li img {
	width: 16px;
	height: 16px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}

.top-bar ul li a {
	color: #ffffff !important;
	text-decoration: none;
	font-size: 14px;
	transition: opacity 0.3s ease;
}

.top-bar ul li a:hover {
	opacity: 0.8;
}

/* Asegurar que los enlaces siempre sean blancos */
.top-bar ul li a:link,
.top-bar ul li a:visited,
.top-bar ul li a:active,
.top-bar ul li a:focus {
	color: #ffffff !important;
}

/* Override adicional para asegurar color blanco */
.top-bar .text-white a,
.top-bar a.text-white,
.top-bar a[href^="tel:"],
.top-bar a[href^="mailto:"] {
	color: #ffffff !important;
}

/* Ajustar el header para que no quede detrás */
.site-header {
	margin-top: 32px !important;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
	.top-bar {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		z-index: 999 !important;
		height: auto !important;
		min-height: 38px !important;
		background-color: var(--bs-primary) !important;
		color: white !important;
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	.site-header {
		margin-top: 38px !important;
	}
	
	/* Asegurar que el header y su menú estén por encima y sean interactivos */
	.site-header {
		z-index: 1000 !important;
	}
	
	.site-header .header-nav {
		z-index: 1001 !important;
	}
	
	.site-header .w3menu-toggler {
		z-index: 1002 !important;
	}
	
	.site-header .menu-close {
		z-index: 1003 !important;
	}
	
	/* Asegurar que los elementos del menú sean clickeables */
	.site-header .header-nav ul.nav,
	.site-header .header-nav ul.nav li,
	.site-header .header-nav ul.nav li a,
	.site-header .header-nav ul.sub-menu,
	.site-header .header-nav ul.sub-menu li,
	.site-header .header-nav ul.sub-menu li a {
		z-index: 1004 !important;
		position: relative !important;
		pointer-events: auto !important;
	}
	
	/* Asegurar que el overlay no bloquee la interacción */
	.menu-close.fade-overlay {
		z-index: 999 !important;
		pointer-events: auto !important;
	}
	
	/* Asegurar que el contenedor de la barra sea visible en móviles */
	.top-bar .container {
		padding: 6px 15px !important;
		max-width: 100% !important;
	}
	
	.top-bar .container .d-flex {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		flex-wrap: nowrap !important;
	}
	
	.top-bar small {
		font-size: 11px !important;
		line-height: 1.2 !important;
		color: white !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
	
	/* Forzar visibilidad en todos los casos */
	.top-bar * {
		visibility: visible !important;
		opacity: 1 !important;
	}
	
	/* Estilos para móviles - barra con íconos */
	.top-bar ul li {
		font-size: 11px !important;
		gap: 4px !important;
	}
	
	.top-bar ul li img {
		width: 12px !important;
		height: 12px !important;
	}
	
	.top-bar ul li a {
		font-size: 11px !important;
	}
	
	/* Ocultar correo en móviles */
	.top-bar li:nth-child(2) {
		display: none !important;
	}
	
	/* Mostrar dirección en móviles */
	.top-bar .hide-mobile {
		display: flex !important;
	}
}

/* Estilos adicionales para pantallas muy pequeñas */
@media (max-width: 480px) {
	.top-bar {
		min-height: 42px !important;
	}
	
	.site-header {
		margin-top: 42px !important;
	}
	
	.top-bar .container {
		padding: 8px 10px !important;
	}
	
	.top-bar small {
		font-size: 10px !important;
	}
	
	.top-bar ul li {
		font-size: 10px !important;
		gap: 3px !important;
	}
	
	.top-bar ul li img {
		width: 10px !important;
		height: 10px !important;
	}
	
	.top-bar ul li a {
		font-size: 10px !important;
	}
}

/* WhatsApp Floating Button */
.whatsapp-float {
	position: fixed;
	width: 60px;
	height: 60px;
	bottom: 30px;
	left: 30px;
	background-color: #25d366;
	color: #fff;
	border-radius: 50px;
	text-align: center;
	font-size: 30px;
	box-shadow: 2px 2px 6px rgba(0,0,0,0.4);
	z-index: 1000;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.whatsapp-float:hover {
	background-color: #128c7e;
	color: #fff;
	transform: scale(1.1);
	box-shadow: 3px 3px 8px rgba(0,0,0,0.5);
}

.whatsapp-float i {
	margin: 0;
	line-height: 1;
}

/* Responsive adjustments for WhatsApp button */
@media (max-width: 768px) {
	.whatsapp-float {
		width: 50px;
		height: 50px;
		bottom: 20px;
		left: 20px;
		font-size: 24px;
	}
}

@media (max-width: 480px) {
	.whatsapp-float {
		width: 45px;
		height: 45px;
		bottom: 15px;
		left: 15px;
		font-size: 20px;
	}
}