/* 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;
	
	}

	.pap-gallery.wp-block-gallery .wp-block-image {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 0 20px 0 !important;
	}

	.pap-gallery.wp-block-gallery .wp-block-image img {
		width: 100% !important;
		height: 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;

	}



	/* Ajustar banner en responsive para que no quede detrás del header */

	.header-transparent ~ .page-content .dz-bnr-inr.style-1 .dz-bnr-inr-entry {

		padding-top: 130px !important;

	}



	/* Texto en negrita en el hero de index para mejor legibilidad en móviles */

	.hero-content .text {

		font-weight: 600 !important;

	}



	/* Intercambiar estilos de botones en responsive */

	.hero-content .btn.btn-primary {

		/* El botón "Leer Mas" ahora tiene el estilo que tenía originalmente el "Ver video" (secundario) */

		background: none !important;

		border: none !important;

		color: var(--bs-secondary) !important;

		box-shadow: none !important;

		padding: 0 !important;

		margin-right: 25px !important;

		font-weight: 500 !important;

		font-size: 14px !important;

		text-decoration: none !important;

		display: inline-flex;

		align-items: center;

		min-height: auto !important;

	}



	.hero-content .btn.btn-primary i {
		
		margin-left: 8px !important;
		
		font-size: 14px !important;
		
		color: var(--bs-primary) !important;
		
	}



	.hero-content .popup-youtube {

		/* El botón "Ver video" ahora parece un botón redondeado principal */

		background-color: var(--bs-primary) !important;

		color: white !important;

		padding: 12px 25px !important;

		border-radius: 50px !important;

		font-weight: 600 !important;

		font-size: 15px !important;

		text-decoration: none !important;

		display: inline-flex !important;

		align-items: center;

		box-shadow: 0 10px 20px rgba(var(--bs-primary-rgb), 0.2) !important;

	}



	.hero-content .popup-youtube svg {

		transform: scale(1);

		margin-right: 10px !important;

	}



	.hero-content .popup-youtube svg path {

		fill: white !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;

}

#service-tab4.active svg.icon-gine,
#service-tab4:hover svg.icon-gine,
#service-tab5.active svg.icon-vph,
#service-tab5:hover svg.icon-vph {
	stroke: #ffffff;
}

#service-tab4 svg.icon-gine circle {
	fill: none;
}

.table-ecografia.table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-striped-bg: rgba(var(--bs-primary-rgb), 0.08);
}

.guia-ecografia {
	margin-top: 40px;
	padding-top: 10px;
}


/* Responsive adjustments for WhatsApp button */

@media (max-width: 768px) {

	.whatsapp-float {

		width: 50px;

		height: 50px;

		bottom: 20px;

		left: 20px;

		font-size: 24px;

	}

	

	/* Ocultar sección Contacto del footer en responsive */

	.footer-top .col-md-4.col-6:nth-child(2) {

		display: none !important;

	}

	

	/* Ajustar layout de footer en responsive - Enlaces Útiles y Enlaces Rápidos ocuparán 50% cada uno */

	.footer-top .col-md-4.col-6:nth-child(1),

	.footer-top .col-md-4.col-6:nth-child(3) {

		flex: 0 0 50%;

		max-width: 50%;

	}

}



@media (max-width: 480px) {

	.whatsapp-float {

		width: 45px;

		height: 45px;

		bottom: 15px;

		left: 15px;

		font-size: 20px;

	}

}



/* Center contact section in responsive view */

@media (max-width: 768px) {

	.content-wrapper .row {

		justify-content: center;

	}

	

	.content-wrapper .dz-img-box.style-2 {

		margin: 0 auto !important;

		max-width: 90% !important;

		text-align: center !important;

		width: 90% !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .dz-content,

	.content-wrapper .dz-img-box.style-2 .inner-content,

	.content-wrapper .dz-img-box.style-2 .dz-footer {

		text-align: center !important;

		justify-content: center !important;

		display: block !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .inner-content.clearfix {

		clear: none !important;

		text-align: center !important;

		display: block !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .inner-content h3,

	.content-wrapper .dz-img-box.style-2 .inner-content p,

	.content-wrapper .dz-img-box.style-2 .inner-content a,

	.content-wrapper .dz-img-box.style-2 .dz-footer a {

		text-align: center !important;

		display: block !important;

		width: 100% !important;

		float: none !important;

	}

}



@media (max-width: 576px) {

	.content-wrapper .col-xl-12.col-lg-6 {

		flex: 0 0 100% !important;

		max-width: 100% !important;

		display: flex;

		justify-content: center;

		padding: 0 10px;

	}

	

	.content-wrapper .dz-img-box.style-2 {

		max-width: 95% !important;

		margin: 0 auto !important;

		width: 95% !important;

		text-align: center !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .dz-content,

	.content-wrapper .dz-img-box.style-2 .inner-content,

	.content-wrapper .dz-img-box.style-2 .dz-footer {

		text-align: center !important;

		justify-content: center !important;

		display: block !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .inner-content.clearfix {

		clear: none !important;

		text-align: center !important;

		display: block !important;

	}

	

	.content-wrapper .dz-img-box.style-2 .inner-content h3,

	.content-wrapper .dz-img-box.style-2 .inner-content p,

	.content-wrapper .dz-img-box.style-2 .inner-content a,

	.content-wrapper .dz-img-box.style-2 .dz-footer a {

		text-align: center !important;

		display: block !important;

		width: 100% !important;

		float: none !important;

	}

}