/* Puntos DIXONTEL: storefront. Uses the DIXONTEL palette (carbón, plata, ámbar). */
.dxp {
	--dxp-carbon: #1E120D;
	--dxp-carbon-900: #140B07;
	--dxp-carbon-700: #2C1E17;
	--dxp-amber: #E88413;
	--dxp-amber-600: #C96A08;
	--dxp-amber-700: #9C5205;
	--dxp-amber-50: #FFF7EB;
	--dxp-amber-400: #F0A03A;
	--dxp-silver-50: #F7F6F5;
	--dxp-silver-100: #F1F0EE;
	--dxp-silver-200: #E3E2DF;
	--dxp-silver-300: #CFCECA;
	--dxp-text-2: #565553;
	--dxp-muted: #7A7975;
	--dxp-green: #157F3D;
	--dxp-red: #C62828;
	--dxp-wa: #25D366;
	--dxp-radius: 12px;
	--dxp-shadow: 0 1px 2px rgba(30, 18, 13, .06);
	--dxp-shadow-lg: 0 12px 28px rgba(30, 18, 13, .16);
	color: var(--dxp-carbon);
	box-sizing: border-box;
}
.dxp *, .dxp *::before, .dxp *::after { box-sizing: border-box; }
.dxp [hidden] { display: none !important; }
.dxp .dxp-icon { flex: 0 0 auto; vertical-align: middle; }

/* Buttons */
.dxp .dxp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 10px 18px; border-radius: 8px; border: 1px solid transparent;
	font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1.1; text-decoration: none; cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap;
}
.dxp .dxp-btn--sm { min-height: 36px; padding: 7px 14px; font-size: 13px; }
.dxp .dxp-btn--block { width: 100%; }
.dxp .dxp-btn--accent { background: var(--dxp-amber); color: var(--dxp-carbon-900); }
.dxp .dxp-btn--accent:hover { background: var(--dxp-amber-600); color: #fff; }
.dxp .dxp-btn--outline { background: #fff; color: var(--dxp-carbon); border-color: var(--dxp-silver-300); }
.dxp .dxp-btn--outline:hover { border-color: var(--dxp-carbon); background: var(--dxp-silver-50); color: var(--dxp-carbon); }
.dxp .dxp-btn--light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.45); }
.dxp .dxp-btn--light:hover { background: rgba(255,255,255,.16); color: #fff; }
.dxp .dxp-btn--whatsapp { background: var(--dxp-wa); color: var(--dxp-carbon-900); }
.dxp .dxp-btn[disabled], .dxp .dxp-btn.is-busy { opacity: .55; pointer-events: none; }
.dxp .dxp-btn:focus-visible { outline: 2px solid var(--dxp-amber-600); outline-offset: 2px; }
.dxp .dxp-link { color: var(--dxp-amber-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.dxp .dxp-muted { color: var(--dxp-muted); font-size: 13px; }
.dxp .dxp-muted-light { color: #CFCECA; font-size: 13px; margin: 0; }
.dxp .dxp-chip {
	display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
	padding: 4px 10px; border-radius: 999px; background: var(--dxp-silver-100); color: var(--dxp-carbon);
	font-size: 12px; font-weight: 700; margin: 0;
}
.dxp .dxp-chip--accent { background: var(--dxp-amber-50); color: var(--dxp-amber-700); }
.dxp .dxp-eyebrow {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
	background: var(--dxp-amber); color: var(--dxp-carbon-900); font-size: 12px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
}

/* Page */
.dxp-page { display: flex; flex-direction: column; gap: 32px; margin: 8px 0 24px; }
.dxp .dxp-h { font-size: 22px; line-height: 1.25; margin: 0 0 16px; }
.dxp .dxp-section { margin: 0; }

.dxp .dxp-hero {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px;
	padding: 32px; border-radius: 16px; color: #fff;
	background: radial-gradient(120% 140% at 100% 0%, #3D2C23 0%, #1E120D 55%, #140B07 100%);
	box-shadow: var(--dxp-shadow-lg);
}
.dxp .dxp-hero--guest { grid-template-columns: 1fr; }
.dxp .dxp-hero__main { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.dxp .dxp-hero__title { color: #fff; font-size: 30px; line-height: 1.15; margin: 4px 0 0; }
.dxp .dxp-hero__text { color: #CFCECA; margin: 0; font-size: 16px; max-width: 52ch; }
.dxp .dxp-hero__text strong { color: #fff; }
.dxp .dxp-balance { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dxp .dxp-balance strong { font-size: 56px; line-height: 1; font-weight: 800; color: var(--dxp-amber-400); letter-spacing: -.02em; }
.dxp .dxp-balance span { color: #fff; font-size: 17px; font-weight: 600; }
.dxp .dxp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dxp .dxp-hero__level {
	align-self: stretch; display: flex; flex-direction: column; gap: 12px; justify-content: center;
	padding: 20px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.dxp .dxp-level-head { display: flex; align-items: center; gap: 12px; }
.dxp .dxp-level-name { display: block; color: #fff; font-size: 22px; line-height: 1.2; }
.dxp .dxp-badge {
	display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
	background: var(--dxp-level, #9A9A9A); color: #fff; box-shadow: inset 0 0 0 3px rgba(255,255,255,.35);
}
.dxp .dxp-badge-img { border-radius: 50%; object-fit: cover; }
.dxp .dxp-progress { height: 10px; border-radius: 999px; background: rgba(154,154,154,.35); overflow: hidden; }
.dxp .dxp-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--dxp-amber-400), var(--dxp-amber)); }

.dxp .dxp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dxp .dxp-stat {
	display: flex; flex-direction: column; gap: 4px; padding: 18px; background: #fff;
	border: 1px solid var(--dxp-silver-200); border-radius: var(--dxp-radius); box-shadow: var(--dxp-shadow);
}
.dxp .dxp-stat__icon {
	display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
	border-radius: 8px; background: var(--dxp-amber-50); color: var(--dxp-amber-700); margin-bottom: 6px;
}
.dxp .dxp-stat__label { color: var(--dxp-muted); font-size: 13px; }
.dxp .dxp-stat strong { font-size: 26px; line-height: 1.1; }
.dxp .dxp-stat small { color: var(--dxp-muted); font-size: 12px; }

.dxp .dxp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.dxp .dxp-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px;
	background: #fff; border: 1px solid var(--dxp-silver-200); border-radius: var(--dxp-radius); box-shadow: var(--dxp-shadow);
}
.dxp .dxp-card--featured { border-color: var(--dxp-amber); background: linear-gradient(180deg, #fff 0%, var(--dxp-amber-50) 100%); }
.dxp .dxp-card__icon {
	display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
	border-radius: 8px; background: var(--dxp-silver-100); color: var(--dxp-carbon);
}
.dxp .dxp-card__img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.dxp .dxp-card__title { font-size: 17px; line-height: 1.3; margin: 0; }
.dxp .dxp-card__text { color: var(--dxp-text-2); font-size: 14px; line-height: 1.45; margin: 0; flex: 1; }
.dxp .dxp-done { display: inline-flex; align-items: center; gap: 6px; color: var(--dxp-green); font-weight: 600; font-size: 14px; }
.dxp .dxp-inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.dxp .dxp-inline-form input { min-height: 36px; padding: 6px 10px; border: 1px solid var(--dxp-silver-300); border-radius: 8px; font: inherit; }

.dxp .dxp-coupons { display: flex; flex-direction: column; gap: 12px; }
.dxp .dxp-coupon {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
	padding: 14px 18px; background: #fff; border: 2px dashed var(--dxp-amber); border-radius: var(--dxp-radius);
}
.dxp .dxp-coupon__info { display: flex; flex-direction: column; gap: 2px; }
.dxp .dxp-coupon__code { font: 700 16px/1 ui-monospace, Menlo, monospace; letter-spacing: .08em; padding: 8px 12px; background: var(--dxp-silver-100); border-radius: 6px; color: var(--dxp-carbon); }
.dxp .dxp-coupon__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dxp .dxp-refer {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: center;
	padding: 24px; background: var(--dxp-amber-50); border: 1px solid #F8D496; border-radius: var(--dxp-radius);
}
.dxp .dxp-refer .dxp-h { margin-bottom: 6px; }
.dxp .dxp-refer__box { display: flex; gap: 8px; flex-wrap: wrap; }
.dxp .dxp-refer__box input { flex: 1 1 220px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--dxp-silver-300); border-radius: 8px; background: #fff; font: inherit; font-size: 14px; }

.dxp .dxp-levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.dxp .dxp-level {
	display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px;
	background: #fff; border: 1px solid var(--dxp-silver-200); border-radius: var(--dxp-radius);
}
.dxp .dxp-level.is-current { border: 2px solid var(--dxp-amber); box-shadow: 0 6px 16px rgba(30,18,13,.10); }
.dxp .dxp-level strong { font-size: 17px; }

.dxp .dxp-table-wrap { overflow-x: auto; border: 1px solid var(--dxp-silver-200); border-radius: var(--dxp-radius); background: #fff; }
.dxp .dxp-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 14px; }
.dxp .dxp-table th { text-align: left; padding: 12px 14px; background: var(--dxp-silver-50); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--dxp-text-2); border-bottom: 1px solid var(--dxp-silver-200); }
.dxp .dxp-table td { padding: 12px 14px; border-bottom: 1px solid var(--dxp-silver-100); vertical-align: top; }
.dxp .dxp-table tr:last-child td { border-bottom: 0; }
.dxp .dxp-table .num { text-align: right; font-weight: 700; white-space: nowrap; }
.dxp .is-plus { color: var(--dxp-green); }
.dxp .is-minus { color: var(--dxp-red); }
.dxp .dxp-empty { padding: 20px; background: #fff; border: 1px dashed var(--dxp-silver-300); border-radius: var(--dxp-radius); color: var(--dxp-text-2); margin: 0; }

/* Milestones (premios por puntos acumulados) */
.dxp .dxp-next { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; margin-bottom: 14px; background: #fff; border: 1px solid var(--dxp-silver-200); border-left: 4px solid var(--dxp-amber); border-radius: var(--dxp-radius); }
.dxp .dxp-next__text { font-size: 15px; color: var(--dxp-carbon); }
.dxp .dxp-progress--light { background: var(--dxp-silver-200); }
.dxp .dxp-milestones { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 10px; }
.dxp .dxp-milestone { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: #fff; border: 1px solid var(--dxp-silver-200); border-radius: var(--dxp-radius); box-shadow: var(--dxp-shadow); }
.dxp .dxp-milestone > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dxp .dxp-milestone strong { font-size: 15px; line-height: 1.3; }
.dxp .dxp-milestone span { color: var(--dxp-muted); font-size: 13px; }
.dxp .dxp-milestone__pts { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--dxp-silver-100); color: var(--dxp-carbon) !important; font-weight: 800; font-size: 18px !important; line-height: 1; }
.dxp .dxp-milestone__pts small { font-size: 10px; font-weight: 600; color: var(--dxp-muted); text-transform: uppercase; margin-top: 2px; }
.dxp .dxp-milestone.is-done { border-color: #A7D7B5; background: linear-gradient(180deg, #fff 0%, #F2FAF4 100%); }
.dxp .dxp-milestone.is-done .dxp-milestone__pts { background: var(--dxp-green); color: #fff !important; }
.dxp .dxp-milestone.is-done .dxp-milestone__pts small { color: #E9F4EC; }
.dxp .dxp-milestone__check { margin-left: auto; color: var(--dxp-green) !important; display: inline-flex; }
.dxp .dxp-milestone--repeat { grid-column: 1 / -1; background: radial-gradient(120% 140% at 100% 0%, #3D2C23 0%, #1E120D 60%, #140B07 100%); border-color: var(--dxp-carbon); color: #fff; }
.dxp .dxp-milestone--repeat strong { color: #fff; font-size: 17px; }
.dxp .dxp-milestone--repeat span { color: #CFCECA; }
.dxp .dxp-milestone__icon { display: inline-flex; width: 48px; height: 48px; border-radius: 10px; align-items: center; justify-content: center; background: var(--dxp-amber); color: var(--dxp-carbon-900) !important; }
.dxp .dxp-unlock { display: inline-flex; align-items: center; gap: 6px; color: var(--dxp-green) !important; font-weight: 600; }
.dxp.dxp-product-msg--vip { background: #F2FAF4; border-color: #A7D7B5; color: var(--dxp-green); margin-top: -8px; }
/* Product / loop / thank-you */
.dxp.dxp-product-msg {
	display: flex; align-items: center; gap: 8px; margin: 8px 0 16px; padding: 10px 14px;
	background: var(--dxp-amber-50); border: 1px solid #F8D496; border-radius: 8px; color: var(--dxp-amber-700); font-weight: 600;
}
.dxp.dxp-loop-msg { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--dxp-amber-700); margin: 2px 0 6px; }

/* Cart & checkout box */
.dxp.dxp-cartbox {
	display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; padding: 18px 20px;
	background: #fff; border: 1px solid var(--dxp-silver-200); border-left: 4px solid var(--dxp-amber); border-radius: var(--dxp-radius); box-shadow: var(--dxp-shadow);
}
.dxp .dxp-cartbox__earn { display: flex; gap: 12px; align-items: flex-start; color: var(--dxp-amber-700); }
.dxp .dxp-cartbox__earn > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; color: var(--dxp-carbon); }
.dxp .dxp-cartbox__earn span { color: var(--dxp-text-2); font-size: 14px; }
.dxp .dxp-cartbox__redeem { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--dxp-silver-200); }
.dxp .dxp-cartbox__redeem label { font-weight: 600; }
.dxp .dxp-cartbox__redeem.is-applied { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; color: var(--dxp-green); }
.dxp .dxp-cartbox__row { display: flex; gap: 10px; flex-wrap: wrap; }
.dxp .dxp-cartbox__row input { width: 160px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--dxp-silver-300); border-radius: 8px; font: inherit; font-size: 16px; }
.dxp .dxp-cartbox__redeem small, .dxp .dxp-cartbox__note { color: var(--dxp-muted); font-size: 13px; margin: 0; }

/* Launcher */
.dxp.dxp-launcher { position: fixed; bottom: 24px; z-index: 9990; }
.dxp.dxp-launcher--left { left: 24px; }
.dxp.dxp-launcher--right { right: 24px; }
.dxp .dxp-launcher__btn {
	display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 18px 0 14px; border: 0; border-radius: 999px;
	background: var(--dxp-carbon); color: #fff; font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; box-shadow: var(--dxp-shadow-lg);
}
.dxp .dxp-launcher__btn .dxp-icon { color: var(--dxp-amber-400); }
.dxp .dxp-launcher__btn b { background: var(--dxp-amber); color: var(--dxp-carbon-900); padding: 4px 8px; border-radius: 999px; font-size: 12px; }
.dxp .dxp-launcher__btn:hover { background: var(--dxp-carbon-700); }
.dxp .dxp-launcher__panel {
	position: absolute; bottom: 64px; width: 340px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); overflow: auto;
	background: #fff; border-radius: 16px; box-shadow: 0 20px 48px rgba(30, 18, 13, .25); border: 1px solid var(--dxp-silver-200);
}
.dxp.dxp-launcher--left .dxp-launcher__panel { left: 0; }
.dxp.dxp-launcher--right .dxp-launcher__panel { right: 0; }
.dxp .dxp-launcher__head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: var(--dxp-carbon); color: #fff; font-weight: 700; position: sticky; top: 0; }
.dxp .dxp-launcher__head .dxp-icon { color: var(--dxp-amber-400); }
.dxp .dxp-launcher__close { background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px; display: inline-flex; }
.dxp .dxp-launcher__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.dxp .dxp-launcher__balance { display: flex; flex-direction: column; }
.dxp .dxp-launcher__balance strong { font-size: 36px; line-height: 1; color: var(--dxp-carbon); }
.dxp .dxp-launcher__balance span { color: var(--dxp-muted); font-size: 13px; }
.dxp .dxp-launcher__level { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.dxp .dxp-launcher__body .dxp-progress { background: var(--dxp-silver-200); }
.dxp .dxp-launcher__intro { margin: 0; color: var(--dxp-text-2); }
.dxp .dxp-launcher__h { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dxp-muted); }
.dxp .dxp-launcher__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dxp .dxp-launcher__list li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 14px; padding: 8px 10px; background: var(--dxp-silver-50); border-radius: 8px; }
.dxp .dxp-launcher__list li .dxp-icon { color: var(--dxp-amber-700); }
.dxp .dxp-launcher__list b { font-size: 12px; color: var(--dxp-amber-700); text-align: right; }

/* Toast */
.dxp-toast {
	position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 99999; max-width: calc(100vw - 32px);
	padding: 12px 18px; border-radius: 10px; background: #1E120D; color: #fff; font-size: 14px; box-shadow: 0 12px 28px rgba(30,18,13,.25);
}
.dxp-toast.is-error { background: #9F1F1F; }

@media (max-width: 900px) {
	.dxp .dxp-hero { grid-template-columns: 1fr; padding: 24px; }
	.dxp .dxp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dxp .dxp-refer { grid-template-columns: 1fr; }
	.dxp .dxp-coupon { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.dxp .dxp-balance strong { font-size: 44px; }
	.dxp .dxp-hero__title { font-size: 24px; }
	.dxp.dxp-launcher { bottom: 76px; }
	.dxp.dxp-launcher--left { left: 16px; }
	.dxp.dxp-launcher--right { right: 16px; }
	.dxp .dxp-launcher__btn { height: 48px; padding: 0 14px 0 12px; }
	.dxp .dxp-launcher__btn span { display: none; }
	.dxp .dxp-launcher__panel { position: fixed; left: 16px; right: 16px; bottom: 136px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.dxp * { transition: none !important; }
}