/* =========================================================
   MexiApps Dashboard – Estilos del frontend
   Todas las clases están prefijadas con "mxd-" para evitar
   conflictos con el tema activo.
   ========================================================= */

.mxd-wrapper,
.mxd-wrapper *,
.mxd-wrapper *::before,
.mxd-wrapper *::after {
	box-sizing: border-box;
}

.mxd-wrapper {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #1a2240;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	/* Eliminar margen/padding heredado del tema antes del primer elemento */
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* El primer hijo directo (brandbar o hero) no hereda espacio superior del tema */
.mxd-wrapper > *:first-child {
	margin-top: 0 !important;
}

/* Neutralizar padding del entry-content / page-content del tema WordPress */
.entry-content .mxd-wrapper,
.page-content .mxd-wrapper,
.post-content .mxd-wrapper,
.elementor-widget-container .mxd-wrapper {
	margin-top: -28px !important; /* compensa el padding-top típico del content area */
}

.mxd-wrapper h1,
.mxd-wrapper h2,
.mxd-wrapper h3,
.mxd-wrapper p {
	margin: 0;
}

.mxd-wrapper a {
	text-decoration: none;
}

.mxd-container {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

.mxd-section {
	padding: 56px 0;
}

/* ===================== BARRA DE MARCA ===================== */

.mxd-brandbar {
	background: #fff;
	border-bottom: 1px solid #eef0f7;
	padding: 16px 0;
}

.mxd-brandbar-inner {
	display: flex;
	align-items: center;
}

.mxd-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mxd-brand-name {
	font-weight: 800;
	font-size: 20px;
	color: #171f3d;
}

.mxd-logo-mark,
.mxd-logo-img {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	flex-shrink: 0;
}

.mxd-logo-mark {
	background: linear-gradient( 135deg, var( --mxd-primary, #2541d6 ), var( --mxd-primary-alt, #7c3aed ) );
	color: #fff;
	font-weight: 800;
}

.mxd-logo-sm {
	width: 38px;
	height: 38px;
	font-size: 18px;
}

.mxd-logo-lg {
	/* Tamaño fijo solo para el mark de letra — se sobreescribe abajo para img */
	width: 88px;
	height: 88px;
	font-size: 36px;
	border-radius: 22px;
	box-shadow: 0 16px 32px -14px rgba( 10, 17, 48, 0.55 );
}

/* Cuando el logo grande ES una imagen: adaptarse a su tamaño natural */
img.mxd-logo-img.mxd-logo-lg {
	width: auto;
	height: auto;
	max-width: 180px;
	max-height: 180px;
	border-radius: 20px;
	background: #fff;
	padding: 12px;
	box-shadow: 0 16px 32px -14px rgba( 10, 17, 48, 0.45 );
	object-fit: contain;
	display: block;
}

.mxd-logo-img {
	object-fit: contain;
	background: transparent;
}

/* ===================== HERO ===================== */

.mxd-hero {
	background: linear-gradient( 180deg, #f4f6ff 0%, #ffffff 65% );
	text-align: center;
	padding-top: 48px;
	padding-bottom: 48px;
}

.mxd-hero-inner {
	max-width: 760px;
	margin: 0 auto;
}

.mxd-badge {
	display: inline-block;
	background: #e7ecff;
	color: var( --mxd-primary, #2541d6 );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 7px 18px;
	border-radius: 999px;
	margin-bottom: 22px;
}

.mxd-hero-title {
	font-size: clamp( 28px, 5.2vw, 48px );
	font-weight: 800;
	line-height: 1.18;
	color: #10172e;
	margin-bottom: 18px;
	letter-spacing: -0.01em;
}

.mxd-gradient-text {
	background: linear-gradient( 90deg, var( --mxd-primary, #2541d6 ), var( --mxd-primary-alt, #7c3aed ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.mxd-hero-subtitle {
	font-size: 17px;
	color: #5b6478;
	max-width: 560px;
	margin: 0 auto 32px;
}

.mxd-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}

.mxd-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 15px;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mxd-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
	line-height: 1;
}

.mxd-btn-primary {
	background: linear-gradient( 135deg, var( --mxd-primary, #2541d6 ), var( --mxd-primary-alt, #7c3aed ) );
	color: #fff;
	box-shadow: 0 14px 28px -10px rgba( 37, 65, 214, 0.55 );
}

.mxd-btn-primary:hover {
	transform: translateY( -2px );
	box-shadow: 0 18px 32px -10px rgba( 37, 65, 214, 0.6 );
	color: #fff;
}

.mxd-btn-secondary {
	background: #fff;
	color: var( --mxd-primary, #2541d6 );
	border: 1.5px solid var( --mxd-primary, #2541d6 );
}

.mxd-btn-secondary:hover {
	background: #f3f5ff;
	transform: translateY( -2px );
	color: var( --mxd-primary, #2541d6 );
}

/* ===================== CARACTERÍSTICAS ===================== */

.mxd-features {
	padding: 28px 0 48px;
}

.mxd-features-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 28px 20px;
	text-align: center;
}

@media ( min-width: 760px ) {
	.mxd-features-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.mxd-feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.mxd-feature-icon {
	width: 54px;
	height: 54px;
	border-radius: 16px;
	background: #eef1ff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mxd-feature-icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
	color: var( --mxd-primary, #2541d6 );
}

.mxd-feature-label {
	font-size: 13px;
	color: #5b6478;
	font-weight: 600;
}

/* ===================== ECOSISTEMA ===================== */

.mxd-ecosystem {
	background: #f7f8fd;
}

.mxd-section-heading {
	text-align: center;
	max-width: 540px;
	margin: 0 auto 44px;
}

.mxd-section-heading h2 {
	font-size: clamp( 24px, 4vw, 32px );
	font-weight: 800;
	color: #10172e;
	margin-bottom: 8px;
}

.mxd-section-heading p {
	color: #5b6478;
}

.mxd-ecosystem-diagram {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 16px;
	max-width: 620px;
	margin: 0 auto;
}

.mxd-ecosystem-center {
	order: -1;
	grid-column: span 2;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 6px;
}

.mxd-ecosystem-node {
	background: #fff;
	border: 1px solid #e8eaf4;
	border-radius: 18px;
	padding: 18px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	box-shadow: 0 10px 24px -18px rgba( 16, 23, 64, 0.35 );
}

.mxd-ecosystem-node .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
	color: var( --mxd-primary, #2541d6 );
}

.mxd-ecosystem-node span:last-child {
	font-size: 13px;
	font-weight: 700;
	color: #28304a;
}

@media ( min-width: 760px ) {
	.mxd-ecosystem-diagram {
		grid-template-columns: 1fr 1.35fr 1fr;
		grid-template-areas:
			".            top           ."
			"left-top     center        right-top"
			"left-bottom  bottom        right-bottom";
		gap: 22px;
		max-width: 780px;
		align-items: center;
	}

	.mxd-ecosystem-center {
		order: 0;
		grid-column: auto;
		grid-area: center;
		margin-bottom: 0;
	}

	.mxd-node-top {
		grid-area: top;
	}

	.mxd-node-left-top {
		grid-area: left-top;
	}

	.mxd-node-right-top {
		grid-area: right-top;
	}

	.mxd-node-left-bottom {
		grid-area: left-bottom;
	}

	.mxd-node-right-bottom {
		grid-area: right-bottom;
	}

	.mxd-node-bottom {
		grid-area: bottom;
	}
}

/* ===================== BUSCADOR ===================== */

.mxd-finder-card {
	background: #fff;
	border: 1px solid #eceefa;
	border-radius: 24px;
	padding: 40px 24px;
	text-align: center;
	max-width: 760px;
	margin: 0 auto;
	box-shadow: 0 20px 44px -28px rgba( 16, 23, 64, 0.35 );
}

.mxd-finder-card h2 {
	font-size: clamp( 22px, 4vw, 28px );
	font-weight: 800;
	color: #10172e;
	margin-bottom: 8px;
}

.mxd-finder-subtitle {
	color: #5b6478;
	margin-bottom: 26px;
}

.mxd-finder-form {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #f3f5fb;
	border-radius: 999px;
	padding: 8px 10px 8px 22px;
	max-width: 520px;
	margin: 0 auto 28px;
}

.mxd-finder-form input {
	flex: 1;
	border: none;
	background: transparent;
	outline: none;
	font-size: 14px;
	padding: 12px 0;
	color: #1a2240;
	min-width: 0;
}

.mxd-finder-form input::placeholder {
	color: #9aa1bd;
}

.mxd-finder-form > .dashicons-search {
	color: #9aa1bd;
	font-size: 18px;
}

.mxd-finder-form .dashicons-microphone {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --mxd-primary, #2541d6 );
	flex-shrink: 0;
	font-size: 18px;
	box-shadow: 0 6px 14px -8px rgba( 16, 23, 64, 0.4 );
}

.mxd-finder-examples-label {
	font-size: 13px;
	color: #9aa1bd;
	margin-bottom: 14px;
}

.mxd-finder-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

.mxd-tag {
	display: inline-block;
	background: #eef1ff;
	color: var( --mxd-primary, #2541d6 );
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 600;
}

/* ===================== PRODUCTOS (WooCommerce) ===================== */

.mxd-products-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.mxd-products-header h2 {
	font-size: clamp( 24px, 4vw, 30px );
	font-weight: 800;
	color: #10172e;
	margin-bottom: 6px;
}

.mxd-products-header p {
	color: #5b6478;
}

.mxd-view-all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var( --mxd-primary, #2541d6 );
	font-weight: 700;
	white-space: nowrap;
}

.mxd-view-all .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Estilos para la salida nativa de los shortcodes de WooCommerce */
.mxd-products-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat( 2, 1fr );
	gap: 20px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

@media ( min-width: 640px ) {
	.mxd-products-grid ul.products {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 980px ) {
	.mxd-products-grid ul.products {
		grid-template-columns: repeat( 4, 1fr );
	}
}

.mxd-products-grid ul.products li.product {
	background: #fff;
	border: 1px solid #eceefa;
	border-radius: 18px;
	padding: 16px;
	text-align: left;
	box-shadow: 0 14px 28px -22px rgba( 16, 23, 64, 0.45 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}

.mxd-products-grid ul.products li.product:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 32px -20px rgba( 16, 23, 64, 0.5 );
}

.mxd-products-grid ul.products li.product a {
	color: inherit;
}

.mxd-products-grid ul.products li.product img {
	border-radius: 12px;
	margin-bottom: 12px;
	width: 100%;
	height: auto;
	display: block;
}

.mxd-products-grid ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px;
	font-weight: 700;
	color: #10172e;
	margin: 0 0 6px;
	line-height: 1.35;
}

.mxd-products-grid ul.products li.product .price {
	color: var( --mxd-primary, #2541d6 );
	font-weight: 800;
	font-size: 15px;
}

.mxd-products-grid ul.products li.product .price del {
	color: #9aa1bd;
	font-weight: 400;
	margin-right: 6px;
	text-decoration: line-through;
}

.mxd-products-grid ul.products li.product .star-rating {
	font-size: 13px;
	margin: 6px 0;
}

.mxd-products-grid ul.products li.product .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
	width: 100%;
	background: linear-gradient( 135deg, var( --mxd-primary, #2541d6 ), var( --mxd-primary-alt, #7c3aed ) );
	color: #fff !important;
	border-radius: 10px;
	padding: 11px 14px;
	font-weight: 700;
	font-size: 13px;
	border: none;
}

.mxd-products-grid .woocommerce-result-count,
.mxd-products-grid .woocommerce-ordering {
	display: none;
}

.mxd-admin-notice {
	margin-top: 20px;
	background: #fff7e6;
	border: 1px solid #ffe2a8;
	color: #8a5a00;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ===================== ESTADÍSTICAS ===================== */

.mxd-stats {
	background: var( --mxd-dark, #0a1130 );
	color: #fff;
}

.mxd-stats-card {
	text-align: center;
}

.mxd-stats-card h2 {
	font-size: clamp( 24px, 4vw, 30px );
	font-weight: 800;
	margin-bottom: 10px;
}

.mxd-stats-subtitle {
	color: #aab0cc;
	max-width: 540px;
	margin: 0 auto 36px;
}

.mxd-stats-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 20px;
	max-width: 680px;
	margin: 0 auto 36px;
}

.mxd-stat-number {
	display: block;
	font-size: clamp( 24px, 5vw, 38px );
	font-weight: 800;
	color: #fff;
	margin-bottom: 6px;
}

.mxd-stat-label {
	font-size: 12px;
	color: #9aa1c9;
	font-weight: 600;
}

.mxd-stats-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba( 255, 255, 255, 0.08 );
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	padding: 10px 24px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 14px;
	color: #fff;
}

.mxd-stats-badge .dashicons {
	color: #34d399;
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ===================== RESPONSIVE ===================== */

@media ( max-width: 480px ) {
	.mxd-section {
		padding: 40px 0;
	}

	.mxd-hero {
		padding-top: 44px;
	}

	.mxd-btn {
		width: 100%;
		justify-content: center;
	}

	.mxd-hero-buttons {
		flex-direction: column;
	}

	.mxd-stats-grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: 10px;
	}
}

/* ===================== BOTTOM NAV MÓVIL ===================== */

.mxd-bottom-nav {
	display: none; /* Solo visible en móvil, ver media query abajo */
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background: #fff;
	border-top: 1px solid #eceefa;
	box-shadow: 0 -8px 32px -12px rgba( 16, 23, 64, 0.18 );
	align-items: center;
	justify-content: space-around;
	padding: 0 4px env( safe-area-inset-bottom, 8px );
	height: 68px;
}

/* Mostrar solo en pantallas móviles */
@media ( max-width: 767px ) {
	.mxd-bottom-nav {
		display: flex;
	}

	/* Espacio al final de la página para que el nav no tape contenido */
	.mxd-wrapper {
		padding-bottom: 72px;
	}
}

/* ---- Ítems ---- */

.mxd-bottom-nav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1;
	padding: 8px 4px;
	color: #9aa1bd;
	text-decoration: none;
	transition: color 0.15s ease;
	position: relative;
	min-width: 0;
}

.mxd-bottom-nav__item:hover,
.mxd-bottom-nav__item--active {
	color: var( --mxd-primary, #2541d6 );
}

/* Punto indicador activo */
.mxd-bottom-nav__item--active::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX( -50% );
	width: 24px;
	height: 3px;
	border-radius: 0 0 4px 4px;
	background: var( --mxd-primary, #2541d6 );
}

.mxd-bottom-nav__icon {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mxd-bottom-nav__icon .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
	line-height: 1;
}

.mxd-bottom-nav__label {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 56px;
}

/* ---- FAB (botón + central) ---- */

.mxd-bottom-nav__fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient( 135deg, var( --mxd-primary, #2541d6 ), var( --mxd-primary-alt, #7c3aed ) );
	color: #fff;
	box-shadow: 0 8px 22px -8px rgba( 37, 65, 214, 0.65 );
	flex-shrink: 0;
	margin-bottom: 12px;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	text-decoration: none;
}

.mxd-bottom-nav__fab:hover {
	transform: scale( 1.08 ) translateY( -2px );
	box-shadow: 0 12px 28px -8px rgba( 37, 65, 214, 0.7 );
	color: #fff;
}

.mxd-bottom-nav__fab .dashicons {
	font-size: 26px;
	width: 26px;
	height: 26px;
	line-height: 1;
}