/*
 * Acabado moderno sobre el diseño aprobado (mundo-vip.css). No cambia la
 * estructura ni los textos: tipografía, menú fijo, esquinas, sombras y
 * animaciones. Lo usan la portada y las páginas de la tienda.
 */

.mvip-page {
	--mv-radius: 14px;
	--mv-radius-sm: 10px;
	--mv-shadow: 0 18px 45px -22px rgba(21, 21, 25, .35);
	--mv-ease: cubic-bezier(.22, 1, .36, 1);
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-feature-settings: "ss01";
}

.mvip-page h1,
.mvip-page h2,
.mvip-page h3 {
	font-family: inherit;
	letter-spacing: -.025em;
}

.mvip-page h1,
.mvip-page h2 {
	font-weight: 800;
}

/* ---------- Añadidos de Mundo VIP: acceso a la plataforma y contacto ---------- */

.mvip-page .mv-nav-right{display:flex;align-items:center;gap:24px;flex-shrink:0}
.mvip-page .mv-nav .mv-nav-login{color:#151519;font-weight:700}
.mvip-page .mv-nav .mv-nav-login:hover{color:var(--mv-red)}
.mvip-page .mv-contact-info{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mvip-page .mv-platform-access{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.mvip-page .mv-button--ghost{background:transparent;color:#151519;border-color:#151519}
.mvip-page .mv-button--ghost:hover{background:#151519;color:#fff}

/* ---------- Menú fijo y translúcido ---------- */

.mvip-page .mv-nav {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	transition: box-shadow .3s var(--mv-ease), background .3s;
}

.mvip-page .mv-nav.is-scrolled {
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 10px 30px -18px rgba(21, 21, 25, .45);
}

.mvip-page .mv-nav-links a {
	position: relative;
}

.mvip-page .mv-nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	height: 2px;
	background: var(--mv-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--mv-ease);
}

.mvip-page .mv-nav-links a:hover::after {
	transform: scaleX(1);
}

/* ---------- Portada ---------- */

.mvip-page .mv-hero {
	overflow: hidden;
}

.mvip-page .mv-hero-image {
	animation: mv-acercar 18s var(--mv-ease) both;
}

@keyframes mv-acercar {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

.mvip-page .mv-hero h1 span {
	background: linear-gradient(90deg, #ff2d4a, var(--mv-red));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Botones ---------- */

.mvip-page .mv-button {
	border-radius: 999px;
	padding-inline: 28px;
	transition: background .25s, transform .3s var(--mv-ease), box-shadow .3s var(--mv-ease);
}

.mvip-page .mv-button:not(.mv-button--outline):not(.mv-button--ghost) {
	box-shadow: 0 12px 28px -12px rgba(230, 0, 35, .65);
}

.mvip-page .mv-button:hover {
	transform: translateY(-2px);
}

.mvip-page .mv-button--outline {
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.mvip-page .mv-copy {
	border-radius: 999px;
}

/* ---------- Tarjetas y fotos ---------- */

.mvip-page .mv-experience-photo,
.mvip-page .mv-platform-visual > img {
	border-radius: var(--mv-radius);
}

.mvip-page .mv-experience-photo > img {
	transition: transform .9s var(--mv-ease);
}

.mvip-page .mv-experience:hover .mv-experience-photo > img {
	transform: scale(1.06);
}

.mvip-page .mv-photo-number {
	border-radius: 8px;
}

.mvip-page .mv-tags span {
	border-radius: 999px;
}

.mvip-page .mv-membership-card {
	border-radius: var(--mv-radius);
	border-color: #ffffff22;
	box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .6);
}

.mvip-page .mv-inventory {
	border-radius: var(--mv-radius);
	border-color: transparent;
	box-shadow: var(--mv-shadow);
}

.mvip-page .mv-benefit {
	padding: 18px;
	margin: -18px;
	border-radius: var(--mv-radius);
	transition: background .3s, box-shadow .3s var(--mv-ease), transform .3s var(--mv-ease);
}

.mvip-page .mv-benefit:hover {
	background: #fff;
	box-shadow: var(--mv-shadow);
	transform: translateY(-3px);
}

.mvip-page .mv-step {
	transition: border-color .3s;
}

.mvip-page .mv-step:hover {
	border-top-color: var(--mv-red);
}

/* ---------- Animación al aparecer (solo si hay JavaScript) ---------- */

.mv-js .mvip-page [data-mv-reveal] {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .8s var(--mv-ease), transform .8s var(--mv-ease);
	transition-delay: var(--mv-delay, 0s);
}

.mv-js .mvip-page [data-mv-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- WhatsApp flotante ---------- */

.mv-whatsapp-flotante {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .45);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.mv-whatsapp-flotante:hover {
	transform: scale(1.08);
	color: #fff;
}

.mv-whatsapp-flotante svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

@media (max-width: 760px) {
	.mvip-page .mv-nav-links a::after { bottom: 8px; }
	.mv-whatsapp-flotante { right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
	.mvip-page .mv-hero-image { animation: none; }
	.mv-js .mvip-page [data-mv-reveal] { opacity: 1; transform: none; transition: none; }
}