/* ========================================================================== MairimbFit — Design system Colores/tipografía/layout siguiendo el Figma aprobado (file Ed6eksw6rLlQeSExlvYZb2) ========================================================================== */ /* Reset base */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, svg { max-width: 100%; } img { height: auto; display: block; } button, input, textarea { font-family: inherit; } /* ─── Fonts (self-hosted Cabinet Grotesk) ─────────────────── */ @font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Regular.woff2') format('woff2'), url('assets/fonts/CabinetGrotesk-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Medium.woff2') format('woff2'), url('assets/fonts/CabinetGrotesk-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Bold.woff2') format('woff2'), url('assets/fonts/CabinetGrotesk-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Cabinet Grotesk'; src: url('assets/fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'), url('assets/fonts/CabinetGrotesk-Extrabold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } /* ─── Tokens ───────────────────────────────────────────────── */ :root { --mb-navy: #435366; --mb-navy-2: #34404E; --mb-orange: #FF6C0E; --mb-orange-2: #E85F09; --mb-lavender: #E9E3F7; --mb-lavender-2:#C9BDEB; --mb-yellow: #F5D25C; --mb-yellow-2: #F0C13B; --mb-blue-grey: #A9BBD1; --mb-cream: #FBF9F6; --mb-white: #FFFFFF; --mb-ink: #2B3440; --mb-ink-mute: #6B7684; --mb-line: rgba(43,52,64,0.12); --font-display: 'Fraunces', Georgia, serif; --font-body: 'Cabinet Grotesk', 'Inter', -apple-system, sans-serif; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.25rem; --text-xl: 1.563rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem; --text-4xl: clamp(2.2rem, 5vw, 3.6rem); --radius: 20px; --radius-sm: 12px; --radius-pill: 999px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ─── Base ─────────────────────────────────────────────────── */ html { overflow-x: clip; scroll-behavior: smooth; } body { overflow-x: clip; font-family: var(--font-body); color: var(--mb-ink); background: var(--mb-cream); font-size: var(--text-base); line-height: 1.6; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0; color: var(--mb-navy); } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } .mbfit-container { max-width: 1240px; margin-inline: auto; padding-inline: var(--space-5); } .mbfit-eyebrow { font-family: var(--font-body); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mb-orange); font-size: var(--text-sm); margin: 0 0 var(--space-2); } .mbfit-eyebrow--light { color: var(--mb-yellow); } .mbfit-eyebrow--center { text-align: center; } .mbfit-h2 { font-size: var(--text-3xl); } .mbfit-h2--center { text-align: center; margin-bottom: var(--space-6); } .mbfit-h2--light { color: var(--mb-white); } .mbfit-h2--accent { color: var(--mb-orange); text-align: center; margin-bottom: var(--space-3); } .mbfit-lead { font-size: var(--text-lg); color: var(--mb-ink-mute); max-width: 60ch; } .mbfit-lead--center { text-align: center; margin-inline: auto; margin-bottom: var(--space-7); } /* ─── Buttons ──────────────────────────────────────────────── */ .mbfit-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 14px 32px; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em; text-transform: uppercase; border: none; transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(255,108,14,0.18); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background 180ms var(--ease-out); } .mbfit-btn--primary { background: var(--mb-orange); color: var(--mb-white); } .mbfit-btn--primary:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 28px rgba(255,108,14,0.28); background: var(--mb-orange-2); } .mbfit-btn--primary:active { transform: translateY(-1px) scale(0.98); transition-duration: 90ms; } .mbfit-btn--primary:focus-visible { outline: 2px solid var(--mb-navy); outline-offset: 3px; } .mbfit-btn--white { background: var(--mb-white); color: var(--mb-navy); } .mbfit-btn--white:hover { transform: translateY(-3px) scale(1.01); box-shadow: 0 16px 28px rgba(0,0,0,0.16); } .mbfit-btn--lg { padding: 18px 40px; font-size: var(--text-base); } .mbfit-btn--disabled { opacity: 0.5; pointer-events: none; } /* ─── Header ───────────────────────────────────────────────── */ .mbfit-header { position: sticky; top: 0; z-index: 100; background: var(--mb-navy); } .mbfit-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-6); } .mbfit-header__logo img { height: 76px; width: auto; } .mbfit-nav-list { display: flex; gap: var(--space-6); } .mbfit-nav-list a { color: var(--mb-white); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.02em; text-transform: uppercase; position: relative; padding-block: 4px; } .mbfit-nav-list a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--mb-orange); transition: width 220ms var(--ease-out); } .mbfit-nav-list a:hover::after { width: 100%; } .mbfit-header__actions { display: flex; align-items: center; gap: var(--space-4); } .mbfit-header__icon { color: var(--mb-white); position: relative; display: inline-flex; transition: transform 180ms var(--ease-out); } .mbfit-header__icon:hover { transform: scale(1.1); color: var(--mb-orange); } .mbfit-header__cart-count { position: absolute; top: -6px; right: -8px; background: var(--mb-orange); color: var(--mb-white); font-size: 10px; font-weight: 700; border-radius: 999px; min-width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } .mbfit-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; } .mbfit-header__burger span { width: 24px; height: 2px; background: var(--mb-white); border-radius: 2px; transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out); } .mbfit-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mbfit-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mbfit-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ─── Hero (home) ──────────────────────────────────────────── */ .mbfit-hero { position: relative; background: var(--mb-lavender); overflow: hidden; padding-block: var(--space-8) var(--space-9); } .mbfit-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: center; } .mbfit-hero__title { font-size: clamp(2.4rem, 5.5vw, 4rem); color: var(--mb-orange); } .mbfit-hero__title em { font-style: italic; color: var(--mb-navy); } .mbfit-hero__sub { margin-block: var(--space-5); font-size: var(--text-lg); color: var(--mb-ink-mute); max-width: 46ch; } .mbfit-hero__figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 4/5; object-fit: cover; } .mbfit-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 60px; background: var(--mb-cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0; transform: scaleX(1.4); } /* ─── Secret section ───────────────────────────────────────── */ .mbfit-secret { background: var(--mb-navy); padding-block: var(--space-9); } .mbfit-secret__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-8); align-items: center; } .mbfit-secret__figure img { border-radius: var(--radius); width: 100%; aspect-ratio: 3/4; object-fit: cover; } .mbfit-secret__text { color: rgba(255,255,255,0.82); margin-block: var(--space-5); font-size: var(--text-base); } /* ─── Why cards ────────────────────────────────────────────── */ .mbfit-why { padding-block: var(--space-9); } .mbfit-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } .mbfit-why__card { text-align: center; padding: var(--space-6) var(--space-4); } .mbfit-why__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--mb-yellow); font-size: 28px; margin-bottom: var(--space-4); transition: transform 300ms var(--ease-out); } .mbfit-why__card:hover .mbfit-why__icon { transform: scale(1.08) rotate(-4deg); } .mbfit-why__card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); } .mbfit-why__card p { color: var(--mb-ink-mute); font-size: var(--text-sm); } /* ─── CTA strip ────────────────────────────────────────────── */ .mbfit-cta-strip { background: var(--mb-orange); padding-block: var(--space-8); } .mbfit-cta-strip__inner { text-align: center; max-width: 720px; margin-inline: auto; } .mbfit-cta-strip__inner h2 { font-size: var(--text-3xl); color: var(--mb-white); margin-bottom: var(--space-4); } .mbfit-cta-strip__inner p { color: rgba(255,255,255,0.9); margin-bottom: var(--space-6); } /* ─── Video section ────────────────────────────────────────── */ .mbfit-video { background: var(--mb-blue-grey); padding-block: var(--space-9); position: relative; } .mbfit-video__inner { text-align: center; } .mbfit-video__thumb { position: relative; border: none; padding: 0; border-radius: var(--radius); overflow: hidden; width: min(720px, 100%); margin-inline: auto; display: block; aspect-ratio: 16/9; } .mbfit-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .mbfit-video__thumb:hover img { transform: scale(1.04); } .mbfit-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--mb-navy); background: rgba(255,255,255,0.9); width: 72px; height: 72px; border-radius: 50%; margin: auto; transition: transform 200ms var(--ease-spring); } .mbfit-video__thumb:hover .mbfit-video__play { transform: scale(1.1); } .mbfit-video__inner h2 { margin-block: var(--space-6) var(--space-4); } .mbfit-video__social { display: flex; gap: var(--space-4); justify-content: center; } .mbfit-video__social a { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--mb-navy); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; transition: transform 180ms var(--ease-out), background 180ms var(--ease-out); } .mbfit-video__social a:hover { background: var(--mb-navy); color: var(--mb-white); transform: translateY(-3px); } /* ─── Testimonials ─────────────────────────────────────────── */ .mbfit-testimonials { padding-block: var(--space-9); } .mbfit-testi-carousel { max-width: 640px; margin-inline: auto; text-align: center; } .mbfit-testi-card { background: var(--mb-navy); border-radius: var(--radius); padding: var(--space-7) var(--space-6); color: var(--mb-white); } .mbfit-testi-card__stars { color: var(--mb-yellow); font-size: var(--text-lg); margin-bottom: var(--space-3); } .mbfit-testi-card h3 { color: var(--mb-yellow); font-size: var(--text-lg); margin-bottom: var(--space-3); } .mbfit-testi-card p { color: rgba(255,255,255,0.85); } .mbfit-testi-dots { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-5); } .mbfit-testi-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: var(--mb-line); padding: 0; transition: background 180ms var(--ease-out), transform 180ms var(--ease-out); } .mbfit-testi-dots button.is-active { background: var(--mb-orange); transform: scale(1.2); } /* ─── Before / after ───────────────────────────────────────── */ .mbfit-ba { background: var(--mb-lavender); padding-block: var(--space-9); } .mbfit-ba-carousel { display: flex; align-items: center; gap: var(--space-4); } .mbfit-ba-nav { flex: none; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--mb-white); color: var(--mb-navy); font-size: 22px; box-shadow: 0 6px 16px rgba(43,52,64,0.14); transition: transform 180ms var(--ease-out); } .mbfit-ba-nav:hover { transform: scale(1.1); background: var(--mb-orange); color: var(--mb-white); } /* ─── FAQ ──────────────────────────────────────────────────── */ .mbfit-faq { background: var(--mb-yellow); padding-block: var(--space-9); } .mbfit-faq__list { max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-3); } .mbfit-faq__item { background: var(--mb-navy); border-radius: var(--radius-sm); overflow: hidden; } .mbfit-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: none; color: var(--mb-white); padding: var(--space-4) var(--space-5); text-align: left; font-weight: 700; } .mbfit-faq__icon { font-size: var(--text-lg); transition: transform 220ms var(--ease-out); flex: none; } .mbfit-faq__item[data-open="true"] .mbfit-faq__icon { transform: rotate(45deg); } .mbfit-faq__a { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease-out); } .mbfit-faq__a p { color: rgba(255,255,255,0.82); padding: 0 var(--space-5) var(--space-5); } /* ─── Final CTA ────────────────────────────────────────────── */ .mbfit-final-cta { background: var(--mb-navy); padding-block: var(--space-9); } .mbfit-final-cta__inner { text-align: center; max-width: 640px; margin-inline: auto; } .mbfit-final-cta__inner h2 { color: var(--mb-white); margin-bottom: var(--space-6); } /* ─── Service page (hero + modalidades) ───────────────────── */ .mbfit-service-hero { position: relative; background-size: cover; background-position: center; min-height: 46vh; display: flex; align-items: flex-end; } .mbfit-service-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,52,64,0.35), rgba(43,52,64,0.75)); } .mbfit-service-hero__inner { position: relative; z-index: 1; padding-block: var(--space-7); text-align: center; width: 100%; } .mbfit-service-hero__inner h1 { color: var(--mb-white); font-size: var(--text-4xl); } .mbfit-service-hero__inner p { color: rgba(255,255,255,0.9); margin-block: var(--space-4); font-size: var(--text-lg); } .mbfit-service-intro { padding-block: var(--space-9); } .mbfit-service-intro__inner { max-width: 760px; margin-inline: auto; } .mbfit-service-intro__text p { margin-bottom: var(--space-4); color: var(--mb-ink-mute); } .mbfit-modalidad { padding-block: var(--space-8); text-align: center; } .mbfit-badge { display: inline-block; padding: 8px 20px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; margin-block: var(--space-3) var(--space-4); } .mbfit-badge--yellow { background: var(--mb-yellow); color: var(--mb-navy); } .mbfit-badge--lavender { background: var(--mb-lavender-2); color: var(--mb-navy); } .mbfit-modalidad__text { max-width: 640px; margin-inline: auto var(--space-7); color: var(--mb-ink-mute); } .mbfit-plan-grid { display: grid; gap: var(--space-6); text-align: left; } .mbfit-plan-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; } .mbfit-plan-grid--three { grid-template-columns: repeat(3, 1fr); } .mbfit-plan-card { border-radius: var(--radius); overflow: hidden; background: var(--mb-white); box-shadow: 0 10px 28px rgba(43,52,64,0.10); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } .mbfit-plan-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(43,52,64,0.18); } .mbfit-plan-card__img { position: relative; aspect-ratio: 1/1; overflow: hidden; } .mbfit-plan-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); } .mbfit-plan-card:hover .mbfit-plan-card__img img { transform: scale(1.06); } .mbfit-plan-card__title-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--mb-white); font-weight: 800; font-size: var(--text-lg); padding: var(--space-4); background: rgba(43,52,64,0.28); } .mbfit-plan-card__body { padding: var(--space-5); text-align: center; } .mbfit-plan-card__name { font-size: var(--text-base); margin-bottom: var(--space-2); } .mbfit-plan-card__price { color: var(--mb-orange); font-weight: 800; margin-bottom: var(--space-4); } .mbfit-plan-card__soon { color: var(--mb-ink-mute); font-size: var(--text-sm); margin-bottom: var(--space-4); } .mbfit-single-plan { padding-block: var(--space-8); } .mbfit-single-plan__inner { text-align: center; } .mbfit-single-plan__price { font-size: var(--text-2xl); color: var(--mb-orange); font-weight: 800; margin-bottom: var(--space-5); } .mbfit-affiliate { padding-block: var(--space-8); text-align: center; } .mbfit-benefits { background: var(--mb-yellow); padding-block: var(--space-9); } .mbfit-benefits__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .mbfit-benefit { display: flex; gap: var(--space-4); align-items: flex-start; background: rgba(255,255,255,0.35); border-radius: var(--radius-sm); padding: var(--space-5); } .mbfit-benefit__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--mb-navy); color: var(--mb-white); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; } .mbfit-benefit p { font-size: var(--text-sm); color: var(--mb-navy); } /* ─── My Account ───────────────────────────────────────────── */ .woocommerce-account .mbfit-container, .woocommerce-account .mbfit-woo-main { padding-block: var(--space-8); } .woocommerce-account .mbfit-container { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-7); align-items: start; } .mbfit-account-nav { background: var(--mb-navy); border-radius: var(--radius); padding: var(--space-5); } .mbfit-account-nav ul { display: flex; flex-direction: column; gap: var(--space-1); } .mbfit-account-nav a { display: block; padding: var(--space-3) var(--space-2); color: rgba(255,255,255,0.85); font-weight: 600; border-radius: var(--radius-sm); transition: background 180ms var(--ease-out), color 180ms var(--ease-out); } .mbfit-account-nav a:hover { background: rgba(255,255,255,0.08); color: var(--mb-white); } .mbfit-account-nav .is-active a { color: var(--mb-white); text-decoration: underline; text-underline-offset: 4px; } .mbfit-account-panel { background: var(--mb-white); border-radius: var(--radius); padding: var(--space-7); } .mbfit-account-title { font-size: var(--text-3xl); color: var(--mb-orange); margin-bottom: var(--space-4); } .mbfit-account-desc { color: var(--mb-ink-mute); max-width: 60ch; } .mbfit-account-quicklinks { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; } .mbfit-account-quicklink { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); background: var(--mb-cream); font-weight: 700; font-size: var(--text-sm); transition: transform 180ms var(--ease-out), background 180ms var(--ease-out); } .mbfit-account-quicklink:hover { transform: translateY(-2px); background: var(--mb-lavender); } .mbfit-account-empty { background: var(--mb-cream); border-radius: var(--radius-sm); padding: var(--space-6); color: var(--mb-ink-mute); } .mbfit-account-video iframe { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-sm); } .mbfit-repo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); } .mbfit-repo-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-sm); background: var(--mb-cream); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } .mbfit-repo-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(43,52,64,0.12); } .mbfit-repo-card__icon { font-size: 28px; } .mbfit-repo-card__title { font-weight: 700; color: var(--mb-navy); } .mbfit-repo-card__cta { color: var(--mb-orange); font-weight: 700; font-size: var(--text-sm); } /* ─── Generic page / WooCommerce shop ─────────────────────── */ .mbfit-page__inner { padding-block: var(--space-8); } .mbfit-page__inner--narrow { max-width: 760px; } .mbfit-page__title { font-size: var(--text-3xl); margin-bottom: var(--space-5); } .mbfit-page__content { color: var(--mb-ink-mute); } .mbfit-page__content > * + * { margin-top: var(--space-4); } .mbfit-woo-main { padding-block: var(--space-8); } .woocommerce ul.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .woocommerce ul.products li.product { background: var(--mb-white); border-radius: var(--radius); padding: var(--space-4); box-shadow: 0 8px 24px rgba(43,52,64,0.08); transition: transform 250ms var(--ease-out); } .woocommerce ul.products li.product:hover { transform: translateY(-5px); } .woocommerce ul.products li.product img { border-radius: var(--radius-sm); } .woocommerce ul.products li.product .price { color: var(--mb-orange); font-weight: 800; } .woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit, .woocommerce input.button, .woocommerce #payment #place_order { background: var(--mb-orange); color: var(--mb-white); border-radius: var(--radius-pill); padding: 12px 28px; font-weight: 700; text-transform: uppercase; font-size: var(--text-sm); border: none; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background: var(--mb-orange-2); transform: translateY(-2px); } /* ─── Footer ───────────────────────────────────────────────── */ .mbfit-footer { background: var(--mb-blue-grey); padding-block: var(--space-8) var(--space-6); } .mbfit-footer__inner { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: var(--space-6); padding-bottom: var(--space-7); } .mbfit-footer__col h4 { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--mb-navy); margin-bottom: var(--space-4); } .mbfit-footer__col ul { display: flex; flex-direction: column; gap: var(--space-2); } .mbfit-footer__col a { color: var(--mb-navy); font-weight: 600; transition: opacity 180ms var(--ease-out); } .mbfit-footer__col a:hover { opacity: 0.7; } .mbfit-footer__payments { color: var(--mb-navy); font-weight: 700; } .mbfit-footer__bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(67,83,102,0.2); padding-top: var(--space-5); flex-wrap: wrap; gap: var(--space-4); } .mbfit-footer__social { display: flex; gap: var(--space-3); } .mbfit-footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--mb-navy); color: var(--mb-navy); display: flex; align-items: center; justify-content: center; transition: transform 180ms var(--ease-out), background 180ms var(--ease-out); } .mbfit-footer__social a:hover { background: var(--mb-navy); color: var(--mb-white); transform: translateY(-3px); } .mbfit-footer__copy { color: var(--mb-navy); font-size: var(--text-sm); } .mbfit-whatsapp-float { position: fixed; right: var(--space-5); bottom: var(--space-5); width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: var(--mb-white); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(0,0,0,0.25); z-index: 90; transition: transform 220ms var(--ease-spring); } .mbfit-whatsapp-float:hover { transform: scale(1.1); } /* ─── 404 ──────────────────────────────────────────────────── */ .mbfit-404 { min-height: 60vh; display: flex; align-items: center; } .mbfit-404__inner { text-align: center; max-width: 560px; margin-inline: auto; } .mbfit-404__inner h1 { margin-block: var(--space-4); } .mbfit-404__inner p { color: var(--mb-ink-mute); margin-bottom: var(--space-6); } /* ─── Reveal on scroll (functional micro-interaction — never gated by reduced-motion) ─ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-split] { opacity: 1; transform: none; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1024px) { .mbfit-hero__grid, .mbfit-secret__grid { grid-template-columns: 1fr; } .mbfit-secret__figure { order: -1; } .mbfit-why__grid { grid-template-columns: repeat(2, 1fr); } .mbfit-plan-grid--three, .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); } .mbfit-benefits__grid { grid-template-columns: repeat(2, 1fr); } .mbfit-footer__inner { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .mbfit-nav-list { display: none; } .mbfit-header__burger { display: flex; } .mbfit-header__nav[data-open="true"] .mbfit-nav-list { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--mb-navy); padding: var(--space-5); gap: var(--space-4); } .woocommerce-account .mbfit-container { grid-template-columns: 1fr; } } @media (max-width: 768px) { .mbfit-why__grid, .mbfit-plan-grid--two, .mbfit-plan-grid--three, .woocommerce ul.products, .mbfit-benefits__grid { grid-template-columns: 1fr; } .mbfit-footer__inner { grid-template-columns: 1fr; text-align: left; } .mbfit-hero__title { text-align: center; } .mbfit-hero__content { text-align: center; } } @media (max-width: 480px) { .mbfit-container { padding-inline: var(--space-4); } .mbfit-btn--lg { padding: 15px 28px; } .mbfit-testi-card { padding: var(--space-5) var(--space-4); } } /* ========================================================================== Sitio estático: carrito, checkout, extras ========================================================================== */ .mbfit-nav-list a[aria-current="page"]::after { width: 100%; } .mbfit-price-old { color: var(--mb-ink-mute); font-weight: 500; margin-right: 6px; } .mbfit-plan-grid--single { grid-template-columns: minmax(0, 340px); max-width: none; justify-content: center; } .mbfit-plan-card__body .mbfit-btn { width: 100%; } .mbfit-cart, .mbfit-summary { background: var(--mb-white); border-radius: var(--radius); padding: var(--space-6); box-shadow: 0 8px 24px rgba(43,52,64,0.08); max-width: 720px; } .mbfit-cart-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--mb-line); } .mbfit-cart-row span { display: block; color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-cart-remove { background: none; border: none; font-size: 24px; color: var(--mb-ink-mute); line-height: 1; } .mbfit-cart-remove:hover { color: var(--mb-orange); } .mbfit-cart-total { display: flex; justify-content: space-between; padding-top: var(--space-5); font-size: var(--text-lg); } .mbfit-cart-total strong { color: var(--mb-orange); } .mbfit-checkout { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: var(--space-7); align-items: start; } .mbfit-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .mbfit-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); } .mbfit-form input, .mbfit-form textarea { font: inherit; padding: 14px 16px; border: 1.5px solid var(--mb-line); border-radius: var(--radius-sm); background: var(--mb-white); color: var(--mb-ink); transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out); } .mbfit-form input:focus, .mbfit-form textarea:focus { outline: none; border-color: var(--mb-orange); box-shadow: 0 0 0 3px rgba(255,108,14,0.18); } .mbfit-form__full { grid-column: 1 / -1; } .mbfit-form__hint { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-form__error { color: #b3261e; font-weight: 700; } .mbfit-summary h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); } .mbfit-video__social.mbfit-footer__social a { color: var(--mb-navy); border-color: var(--mb-navy); } .mbfit-video__social.mbfit-footer__social a svg { display: block; } .mbfit-video-modal { border: none; border-radius: var(--radius); padding: 0; width: min(880px, 92vw); aspect-ratio: 16/9; overflow: hidden; } .mbfit-video-modal iframe { width: 100%; height: 100%; } .mbfit-video-modal__close { position: absolute; top: 8px; right: 12px; z-index: 2; border: none; background: rgba(0,0,0,.6); color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; } @media (max-width: 900px) { .mbfit-checkout { grid-template-columns: 1fr; } .mbfit-form { grid-template-columns: 1fr; } } @media (max-width: 480px) { .mbfit-header__inner { gap: var(--space-3); } .mbfit-header__logo img { height: 52px; } .mbfit-header__actions { gap: var(--space-3); } } @media (max-width: 340px) { .mbfit-header__logo img { height: 42px; } } /* ========================================================================== v2 — Home fiel al Figma + modernización (tipografía de marca Galabiyah, hero animado, reseñas de Google, volver arriba, WhatsApp, pop-up de reseñas) ========================================================================== */ @font-face { font-family: 'Galabiyah'; src: url('assets/fonts/Galabiyah.woff') format('woff'), url('assets/fonts/Galabiyah.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-display: 'Galabiyah', Georgia, serif; --mb-lavender: #D9D2F0; --mb-yellow: #FFE25E; --mb-paper: #F7F5FB; } body { background: var(--mb-white); } h1, h2 { font-weight: 400; letter-spacing: 0.005em; } h3 { font-family: var(--font-body); font-weight: 800; } .mbfit-h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; } .mbfit-h2--script { text-wrap: balance; } .mbfit-h2--orange { color: var(--mb-orange); text-align: center; } .mbfit-h2--accent-left { color: var(--mb-orange); text-align: left; margin-bottom: var(--space-5); } .mbfit-center { text-align: center; margin-top: var(--space-7); } .mbfit-badge-wrap { text-align: center; } .mbfit-badge--navy { background: var(--mb-navy); color: var(--mb-white); letter-spacing: 0.06em; } .mbfit-btn--outline { background: transparent; color: var(--mb-navy); border: 2px solid var(--mb-navy); box-shadow: none; } .mbfit-btn--outline:hover { background: var(--mb-navy); color: var(--mb-white); transform: translateY(-3px); } /* Progreso de scroll */ .mbfit-progress { position: absolute; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--mb-orange); z-index: 2; } .mbfit-header { transition: box-shadow 250ms var(--ease-out); } .mbfit-header__inner { transition: padding 250ms var(--ease-out); } .mbfit-header.is-scrolled .mbfit-header__inner { padding-block: var(--space-2); } .mbfit-header__logo img { transition: height 250ms var(--ease-out); } .mbfit-header.is-scrolled .mbfit-header__logo img { height: 58px; } .mbfit-nav-list a { font-size: 0.95rem; } /* HERO */ .mbfit-hero { background: radial-gradient(1200px 600px at 78% 40%, #FFFFFF 0%, var(--mb-paper) 55%, #ECE8F6 100%); padding-block: clamp(var(--space-7), 6vw, var(--space-9)) 0; min-height: min(86vh, 860px); display: flex; align-items: stretch; } .mbfit-hero__mono { position: absolute; right: 4%; top: 6%; width: min(46vw, 620px); height: 92%; background: var(--mb-lavender); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; opacity: .9; animation: monoDrift 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes monoDrift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-14px,10px,0) scale(1.03); } } .mbfit-hero__grid { position: relative; z-index: 1; width: 100%; align-items: end; gap: var(--space-6); grid-template-columns: 1.05fr 0.95fr; } .mbfit-hero__content { padding-bottom: clamp(var(--space-8), 9vw, 120px); align-self: center; } .mbfit-hero__title { font-size: clamp(3rem, 7.4vw, 6.4rem); line-height: 0.98; color: var(--mb-orange); } .mbfit-hero__title span { display: block; overflow: hidden; padding-bottom: .06em; animation: lineUp 900ms var(--ease-out) both; } .mbfit-hero__title .l1, .mbfit-hero__title .l3 { color: var(--mb-orange); } .mbfit-hero__title .l2 { color: var(--mb-navy); animation-delay: 120ms; } .mbfit-hero__title .l3 { animation-delay: 240ms; } @keyframes lineUp { from { opacity: 0; transform: translateY(60%); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } } .mbfit-hero__sub { font-weight: 700; color: var(--mb-navy); font-size: clamp(1.1rem, 1.6vw, 1.4rem); max-width: 30ch; animation: fadeUp 800ms 450ms var(--ease-out) both; } .mbfit-hero__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; animation: fadeUp 800ms 600ms var(--ease-out) both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .mbfit-hero__rating { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.85); border: 1px solid var(--mb-line); padding: 8px 16px; border-radius: var(--radius-pill); font-size: var(--text-sm); color: var(--mb-navy); box-shadow: 0 6px 18px rgba(43,52,64,.08); transition: transform 180ms var(--ease-out); } .mbfit-hero__rating:hover { transform: translateY(-2px); } .mbfit-g { width: 18px; height: 18px; flex: none; } .mbfit-stars { color: #F5B301; letter-spacing: 1px; font-size: .95rem; } .mbfit-hero__figure { align-self: end; justify-self: center; position: relative; animation: fadeUp 1000ms 200ms var(--ease-out) both; } .mbfit-hero__figure img { width: min(100%, 560px); aspect-ratio: auto; border-radius: 0; object-fit: contain; animation: floatY 7s ease-in-out infinite; filter: drop-shadow(0 30px 40px rgba(67,83,102,.18)); } @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .mbfit-wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(40px, 6vw, 90px); fill: var(--mb-lavender); z-index: 2; } .mbfit-hero__wave { display: none; } /* EL SECRETO DEL ÉXITO */ .mbfit-secret { background: var(--mb-lavender); padding-block: var(--space-9) 0; } .mbfit-secret__grid { grid-template-columns: 0.8fr 1.2fr; align-items: end; gap: var(--space-7); } .mbfit-secret__figure { align-self: end; } .mbfit-secret__figure img { border-radius: 0; aspect-ratio: auto; width: min(100%, 460px); object-fit: contain; margin-inline: auto; } .mbfit-secret__content { padding-bottom: var(--space-9); } .mbfit-secret__text { color: var(--mb-navy); margin-bottom: var(--space-6); display: grid; gap: var(--space-3); max-width: 62ch; } .mbfit-secret__text p:first-child { font-weight: 800; font-size: var(--text-lg); } /* POR QUÉ UNIRTE */ .mbfit-why { padding-block: var(--space-9); background: var(--mb-white); } .mbfit-why__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7) var(--space-6); margin-top: var(--space-7); } .mbfit-why__card { padding: 0 var(--space-3); } .mbfit-why__icon { width: 92px; height: 92px; border-radius: 50%; background: transparent; margin-bottom: var(--space-4); display: inline-block; transition: transform 350ms var(--ease-spring); } .mbfit-why__card:hover .mbfit-why__icon { transform: translateY(-6px) rotate(-5deg) scale(1.06); } .mbfit-why__card p { color: var(--mb-navy); font-size: 1rem; max-width: 34ch; margin-inline: auto; } .mbfit-why__card:nth-child(2) { transition-delay: 80ms; } .mbfit-why__card:nth-child(3) { transition-delay: 160ms; } /* COMIENZA HOY */ .mbfit-start { background: var(--mb-paper); padding-block: var(--space-9); } .mbfit-start__head { text-align: center; max-width: 780px; margin-inline: auto; margin-bottom: var(--space-7); } .mbfit-start__text { color: var(--mb-navy); } .mbfit-badge--lavender { background: var(--mb-lavender); color: var(--mb-navy); } /* VIDEO / BIENVENIDAS */ .mbfit-video { background: var(--mb-blue-grey); position: relative; padding-block: var(--space-9); } .mbfit-video__thumb { border-radius: var(--radius); box-shadow: 0 30px 60px rgba(43,52,64,.25); margin-bottom: var(--space-5); } .mbfit-video__play { width: 84px; height: 84px; background: var(--mb-orange); color: #fff; box-shadow: 0 0 0 0 rgba(255,108,14,.5); animation: pulseRing 2.4s infinite; } @keyframes pulseRing { 70% { box-shadow: 0 0 0 22px rgba(255,108,14,0); } 100% { box-shadow: 0 0 0 0 rgba(255,108,14,0); } } .mbfit-video__inner h2 { color: var(--mb-navy); margin-block: var(--space-7) var(--space-4); font-family: var(--font-body); font-weight: 800; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: .02em; } .mbfit-video__text { max-width: 60ch; margin: 0 auto var(--space-6); color: var(--mb-navy); font-weight: 500; } /* RESEÑAS */ .mbfit-testimonials { background: var(--mb-white); padding-block: var(--space-9); } .mbfit-h2--script + .mbfit-badge-wrap { margin-top: calc(var(--space-4) * -1); margin-bottom: var(--space-5); } .mbfit-gscore { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: var(--space-6); color: var(--mb-navy); font-size: var(--text-sm); } .mbfit-gscore__n { font-family: var(--font-display); font-size: 2rem; line-height: 1; } .mbfit-gscore a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; } .mbfit-testi-carousel { max-width: 720px; } .mbfit-review__stage { display: grid; } .mbfit-review { grid-area: 1 / 1; background: var(--mb-yellow); color: var(--mb-navy); border-radius: var(--radius); padding: var(--space-6) var(--space-7); text-align: left; box-shadow: 0 24px 50px rgba(240,193,59,.35); animation: fadeUp 500ms var(--ease-out) both; } .mbfit-review[hidden] { display: none; } .mbfit-review__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); } .mbfit-review__head h3 { font-size: var(--text-lg); color: var(--mb-navy); } .mbfit-review__head .mbfit-g { margin-left: auto; width: 26px; height: 26px; } .mbfit-review__meta { font-size: var(--text-sm); color: rgba(67,83,102,.8); } .mbfit-review .mbfit-stars { display: block; margin-bottom: var(--space-3); font-size: 1.1rem; } .mbfit-review p { color: var(--mb-navy); } .mbfit-review p + p { margin-top: var(--space-3); } .mbfit-rpop__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mb-navy); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; letter-spacing: .04em; } /* ANTES / DESPUÉS */ .mbfit-ba { background: var(--mb-lavender); } .mbfit-ba-carousel { position: relative; padding-inline: clamp(0px, 5vw, 64px); } /* FAQ */ .mbfit-faq { background: var(--mb-yellow); } .mbfit-faq__q { font-size: 1rem; } .mbfit-faq__item { transition: transform 200ms var(--ease-out); } .mbfit-faq__item:hover { transform: translateX(4px); } /* CTA final */ .mbfit-final-cta__inner h2 { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 2.6vw, 1.9rem); letter-spacing: .03em; line-height: 1.3; } .mbfit-final-cta__inner h2 em { display: block; font-family: var(--font-display); font-style: normal; text-transform: none; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--mb-orange); letter-spacing: 0; margin-top: var(--space-2); } /* FOOTER */ .mbfit-footer__payments { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } .mbfit-footer__payments img { height: auto; } .mbfit-footer__payments .mbfit-getnet { width: 210px; max-width: 100%; } .mbfit-pay-word { color: #fff; font-weight: 800; font-size: 1.8rem; letter-spacing: -.02em; line-height: 1; } .mbfit-pay-word--paypal { font-style: italic; } .mbfit-footer__brand img { width: 150px; } /* Volver arriba (con anillo de progreso) */ .mbfit-totop { position: fixed; right: var(--space-5); bottom: 104px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--mb-navy); color: #fff; display: grid; place-items: center; z-index: 89; box-shadow: 0 10px 24px rgba(43,52,64,.28); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), background 180ms; } .mbfit-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; } .mbfit-totop:hover { background: var(--mb-orange); transform: translateY(-3px); } .mbfit-totop svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .mbfit-totop__track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; } .mbfit-totop__ring { fill: none; stroke: var(--mb-orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; } .mbfit-totop:hover .mbfit-totop__ring { stroke: #fff; } .mbfit-totop__arrow { position: relative; } /* WhatsApp con etiqueta */ .mbfit-whatsapp-float { position: static; width: 60px; height: 60px; animation: waPulse 3s infinite; } @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5), 0 10px 24px rgba(0,0,0,.25); } 70%,100% { box-shadow: 0 0 0 18px rgba(37,211,102,0), 0 10px 24px rgba(0,0,0,.25); } } .mbfit-wa { position: fixed; right: var(--space-5); bottom: var(--space-5); display: flex; align-items: center; gap: var(--space-3); z-index: 90; } .mbfit-wa__label { background: #fff; color: var(--mb-navy); border-radius: var(--radius-sm); padding: 8px 14px; font-size: .8rem; line-height: 1.25; box-shadow: 0 10px 24px rgba(43,52,64,.18); display: none; flex-direction: column; opacity: 0; transform: translateX(12px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } .mbfit-wa__label small { color: var(--mb-ink-mute); } .mbfit-wa.is-open .mbfit-wa__label, .mbfit-wa:hover .mbfit-wa__label { display: flex; opacity: 1; transform: none; } /* Pop-up flotante de reseñas (versión corta) */ .mbfit-rpop { position: fixed; left: var(--space-5); bottom: var(--space-5); width: min(420px, calc(100vw - 32px)); background: #fff; border-radius: var(--radius); padding: var(--space-4) var(--space-5) var(--space-3); box-shadow: 0 20px 50px rgba(43,52,64,.25); z-index: 88; border: 1px solid var(--mb-line); animation: popIn 500ms var(--ease-spring) both; } .mbfit-rpop[hidden] { display: none; } @keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } } .mbfit-rpop__item { display: flex; gap: var(--space-3); align-items: flex-start; animation: fadeUp 400ms var(--ease-out) both; } .mbfit-rpop__item[hidden] { display: none; } .mbfit-rpop .mbfit-rpop__avatar { width: 42px; height: 42px; font-size: .8rem; } .mbfit-rpop__top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .mbfit-rpop p { font-size: .88rem; color: var(--mb-ink); line-height: 1.4; } .mbfit-rpop__by { font-size: .78rem; color: var(--mb-ink-mute); } .mbfit-rpop__by strong { color: var(--mb-navy); } .mbfit-rpop__all { display: block; margin-top: var(--space-2); font-size: .75rem; font-weight: 700; color: var(--mb-orange); } .mbfit-rpop__close { position: absolute; top: 6px; right: 10px; border: none; background: none; font-size: 20px; color: var(--mb-ink-mute); line-height: 1; } .mbfit-rpop__close:hover { color: var(--mb-orange); } @media (max-width: 1024px) { .mbfit-hero { min-height: 0; } .mbfit-hero__grid { grid-template-columns: 1fr; text-align: center; } .mbfit-hero__content { padding-bottom: 0; } .mbfit-hero__sub { margin-inline: auto; } .mbfit-hero__cta { justify-content: center; } .mbfit-hero__mono { right: 50%; transform: translateX(50%); width: 78vw; opacity: .8; animation: none; } .mbfit-hero__title { text-align: center; } .mbfit-secret__grid { grid-template-columns: 1fr; } .mbfit-secret__content { padding-bottom: var(--space-7); } .mbfit-why__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { .mbfit-why__grid { grid-template-columns: 1fr; } .mbfit-rpop { display: none; } .mbfit-review { padding: var(--space-5); } .mbfit-ba-carousel { padding-inline: 0; } .mbfit-totop { bottom: 96px; } } @media (prefers-reduced-motion: reduce) { .mbfit-video__play, .mbfit-whatsapp-float { animation: none; } } /* Ajustes: íconos de cabecera iguales y CTA/badge de Google equilibrados */ .mbfit-header__icon { width: 34px; height: 34px; align-items: center; justify-content: center; } .mbfit-header__icon svg { width: 28px; height: 28px; } .mbfit-header__cart-count { top: -4px; right: -6px; } .mbfit-hero__cta { gap: var(--space-4); } .mbfit-hero__cta .mbfit-btn--lg, .mbfit-hero__rating { height: 60px; box-sizing: border-box; } .mbfit-hero__cta .mbfit-btn--lg { padding-block: 0; min-width: 210px; } .mbfit-hero__rating { padding: 0 24px; gap: 10px; font-size: 1rem; } .mbfit-hero__rating .mbfit-g { width: 22px; height: 22px; } .mbfit-hero__rating strong { font-size: 1.05rem; } @media (max-width: 700px) { .mbfit-hero__cta { flex-direction: column; align-items: center; gap: var(--space-3); } .mbfit-hero__cta .mbfit-btn--lg, .mbfit-hero__rating { width: min(100%, 300px); justify-content: center; } } /* ========================================================================== Ajustes v3: portadas sin texto duplicado, footer con monograma, hover de redes, y "El secreto del éxito" compacto (móvil: título → foto → texto) ========================================================================== */ .mbfit-plan-card__img { aspect-ratio: 1 / 1; background: var(--mb-lavender); } .mbfit-plan-card__img img { width: 100%; height: 100%; object-fit: cover; } /* Redes: al pasar el mouse el ícono se vuelve blanco sobre azul marino */ .mbfit-video__social.mbfit-footer__social a:hover, .mbfit-footer__social a:hover { background: var(--mb-navy); border-color: var(--mb-navy); color: var(--mb-white); } .mbfit-footer__social a:focus-visible { outline: 2px solid var(--mb-orange); outline-offset: 3px; } /* Footer: monograma grande a la izquierda; columnas; redes y copyright centrados debajo */ .mbfit-footer { padding-block: var(--space-8); } .mbfit-footer__inner { grid-template-columns: minmax(180px, 0.9fr) 1.1fr 1.1fr 1.1fr; grid-template-rows: auto auto; column-gap: var(--space-7); row-gap: var(--space-6); padding-bottom: 0; align-items: start; } .mbfit-footer__brand { grid-row: 1 / 3; align-self: center; justify-self: center; } .mbfit-footer__brand img { width: auto; height: clamp(220px, 24vw, 330px); } .mbfit-footer__bottom { grid-column: 2 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); border-top: 0; padding-top: 0; } .mbfit-footer__copy { text-align: center; } /* El secreto del éxito */ .mbfit-secret { padding-block: var(--space-7) 0; overflow: hidden; } .mbfit-secret__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-8); align-items: start; } .mbfit-secret__figure { grid-column: 1; grid-row: 1 / 4; align-self: end; } .mbfit-secret__figure img { width: min(100%, 400px); max-height: 600px; object-fit: contain; object-position: bottom; margin-inline: auto; } .mbfit-secret__title { grid-column: 2; grid-row: 1; margin: 0 0 var(--space-4); } .mbfit-secret__body { grid-column: 2; grid-row: 2; padding-bottom: var(--space-7); } .mbfit-secret__body .mbfit-secret__text { margin-bottom: var(--space-5); } @media (max-width: 1024px) { .mbfit-secret { padding-block: var(--space-7) 0; } .mbfit-secret__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; } .mbfit-secret__title { grid-column: 1; grid-row: 1; text-align: center; margin-bottom: var(--space-5); } .mbfit-secret__figure { grid-column: 1; grid-row: 2; } .mbfit-secret__figure img { width: min(78%, 320px); max-height: 460px; } .mbfit-secret__body { grid-column: 1; grid-row: 3; padding: var(--space-6) 0 var(--space-8); } .mbfit-secret__body .mbfit-btn { width: 100%; } .mbfit-footer__inner { grid-template-columns: 1fr 1fr; } .mbfit-footer__brand { grid-row: auto; grid-column: 1 / -1; } .mbfit-footer__brand img { height: 200px; } .mbfit-footer__bottom { grid-column: 1 / -1; } } @media (max-width: 600px) { .mbfit-footer__inner { grid-template-columns: 1fr; } } /* ========================================================================== v4: video de YouTube, reseñas en 3 con parallax, CTA final con foto parallax ========================================================================== */ /* Parallax genérico (transform vía JS: funciona también en iPhone) */ .mbfit-parallax { position: relative; overflow: hidden; isolation: isolate; } .mbfit-parallax__bg { position: absolute; inset: -18% 0; z-index: -1; will-change: transform; background-size: cover; background-position: center; } /* Video */ .mbfit-video { background: #7C93B8; padding-block: var(--space-9); } .mbfit-video__kicker { color: var(--mb-white); margin-bottom: var(--space-6); } .mbfit-video__frame { position: relative; max-width: 1000px; margin-inline: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 70px rgba(30,42,60,.35); background: #8da5cb; } .mbfit-video__thumb { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; margin: 0; border-radius: 0; box-shadow: none; display: block; cursor: pointer; background: none; } .mbfit-video__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } .mbfit-video__thumb:hover img { transform: scale(1.03); } .mbfit-video__play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: 0; transform: translate(-50%, -50%); background: rgba(255,255,255,.14); border: 3px solid #fff; color: #fff; backdrop-filter: blur(3px); animation: none; } .mbfit-video__thumb:hover .mbfit-video__play { background: var(--mb-orange); border-color: var(--mb-orange); transform: translate(-50%, -50%) scale(1.08); } .mbfit-video__play svg { margin-left: 4px; } .mbfit-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mbfit-video__inner h2.mbfit-video__title { font-family: var(--font-display); font-weight: 400; color: var(--mb-white); font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: .01em; line-height: 1.1; margin: var(--space-8) 0 var(--space-5); } .mbfit-video__title span { color: var(--mb-navy-2); } .mbfit-video__text { color: var(--mb-white); font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.55rem); line-height: 1.5; max-width: 900px; margin: 0 auto var(--space-6); } .mbfit-video__text .hl { color: var(--mb-orange); } .mbfit-video__text .dk { color: var(--mb-navy-2); } .mbfit-video__inner .mbfit-video__social { justify-content: center; } .mbfit-video__inner .mbfit-video__social a { color: var(--mb-navy); border-color: var(--mb-navy); } .mbfit-video__inner .mbfit-video__social a:hover { background: var(--mb-white); border-color: var(--mb-white); color: var(--mb-navy); } @media (max-width: 700px) { .mbfit-video__play { width: 60px; height: 60px; } .mbfit-video__text br { display: none; } } /* Reseñas: banda con parallax + tarjetas 3 en 3 */ .mbfit-testimonials { padding: 0 0 var(--space-9); background: var(--mb-white); } .mbfit-testimonials__band { padding: var(--space-9) 0 calc(var(--space-9) + 56px); text-align: center; background: var(--mb-navy-2); } .mbfit-testimonials__bg { background-image: linear-gradient(180deg, rgba(38,48,62,.72), rgba(38,48,62,.84)), url(assets/img/home/resenas-team.webp); background-size: cover; background-position: center 30%; } .mbfit-eyebrow--onDark { color: var(--mb-white); font-size: var(--text-base); } .mbfit-badge--yellow { background: var(--mb-yellow); color: var(--mb-navy); font-size: var(--text-lg); padding: 10px 28px; border-radius: 4px; letter-spacing: .02em; } .mbfit-testimonials__head .mbfit-h2 { margin-bottom: var(--space-4); } .mbfit-gscore--onDark, .mbfit-gscore--onDark .mbfit-gscore__n, .mbfit-gscore--onDark a { color: #fff; } .mbfit-rcarousel { position: relative; margin-top: -56px; z-index: 1; } .mbfit-rtrack { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--space-2) var(--space-2) var(--space-5); -webkit-overflow-scrolling: touch; } .mbfit-rtrack::-webkit-scrollbar { display: none; } .mbfit-rcard { flex: 0 0 calc((100% - 2 * var(--space-5)) / 3); scroll-snap-align: start; display: flex; flex-direction: column; } .mbfit-rcard__bubble { position: relative; flex: 1; background: var(--mb-yellow); color: var(--mb-navy); border-radius: 14px; padding: var(--space-5) var(--space-5) var(--space-6); box-shadow: 0 16px 36px rgba(43,52,64,.16); } .mbfit-rcard__bubble::after { content: ""; position: absolute; left: 34px; bottom: -14px; border: 14px solid transparent; border-top-color: var(--mb-yellow); border-bottom: 0; } .mbfit-rcard__top { display: flex; align-items: center; gap: 8px; margin-bottom: var(--space-3); } .mbfit-rcard__top .mbfit-stars { font-size: 1.15rem; color: #F5B301; } .mbfit-rcard__text { font-size: .93rem; line-height: 1.5; max-height: 12.5em; overflow: hidden; position: relative; transition: max-height 350ms var(--ease-out); } .mbfit-rcard__text p + p { margin-top: .7em; } .mbfit-rcard__text.is-clamped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3em; background: linear-gradient(transparent, var(--mb-yellow)); } .mbfit-rcard__text.is-open { max-height: 60em; } .mbfit-rcard__more { margin-top: var(--space-2); background: none; border: 0; padding: 0; font-weight: 800; font-size: .85rem; color: var(--mb-orange-2); text-decoration: underline; text-underline-offset: 3px; } .mbfit-rcard__bubble .mbfit-g { position: absolute; right: 16px; bottom: 14px; width: 26px; height: 26px; } .mbfit-rcard__by { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0 0 var(--space-3); } .mbfit-rcard__by strong { display: block; color: var(--mb-navy); text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; } .mbfit-rcard__by span:not(.mbfit-rpop__avatar) { color: var(--mb-ink-mute); font-size: .8rem; } .mbfit-rnav { position: absolute; top: 42%; z-index: 2; } .mbfit-rnav--prev { left: -12px; } .mbfit-rnav--next { right: -12px; } [data-rdots] { margin-top: var(--space-2); } @media (max-width: 1024px) { .mbfit-rcard { flex-basis: calc((100% - var(--space-5)) / 2); } } @media (max-width: 700px) { .mbfit-rcard { flex-basis: 88%; } .mbfit-rnav { display: none; } .mbfit-testimonials__band { padding-bottom: calc(var(--space-8) + 40px); } .mbfit-rcarousel { margin-top: -40px; } } /* CTA final con foto en parallax */ .mbfit-final-cta--photo { background: var(--mb-navy-2); padding-block: clamp(var(--space-9), 12vw, 160px); } .mbfit-final-cta__bg { background-image: linear-gradient(180deg, rgba(30,38,50,.62) 0%, rgba(30,38,50,.72) 100%), url(assets/img/home/cta-mairim-v2.webp); background-position: 55% 35%; } .mbfit-final-cta--photo .mbfit-final-cta__inner { margin-inline: auto; max-width: 820px; text-align: center; padding-inline: var(--space-5); } .mbfit-final-cta__lead { color: rgba(255,255,255,.88); font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-6); } @media (max-width: 800px) { .mbfit-final-cta__bg { background-image: linear-gradient(180deg, rgba(38,48,62,.80), rgba(38,48,62,.92)), url(assets/img/home/cta-mairim-v2.webp); background-position: 45% 35%; } .mbfit-final-cta--photo .mbfit-final-cta__inner { margin-inline: auto; text-align: center; } } /* ========================================================================== v5: tarjetas de portada en la Home y "Próximamente" ========================================================================== */ .mbfit-cover-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 320px)); justify-content: center; gap: var(--space-7) var(--space-8); } .mbfit-cover { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .mbfit-cover__img { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 24px; overflow: hidden; background: var(--mb-lavender); box-shadow: 0 18px 40px rgba(43,52,64,.18); transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out); } a.mbfit-cover__img:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(43,52,64,.26); } .mbfit-cover__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); } a.mbfit-cover__img:hover img { transform: scale(1.05); } .mbfit-cover .mbfit-btn { min-width: 220px; } .mbfit-cover.is-soon .mbfit-cover__img { filter: saturate(.6) brightness(.92); } .mbfit-cover__ribbon { position: absolute; top: 14px; right: 14px; background: var(--mb-orange); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-pill); } .mbfit-btn--soon { background: transparent; color: var(--mb-navy); border: 2px dashed rgba(67,83,102,.55); box-shadow: none; cursor: default; } .mbfit-btn--soon:hover { transform: none; box-shadow: none; } /* Menú / footer: ítem aún no disponible */ .mbfit-soon { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.55); font-weight: 700; font-size: 0.95rem; letter-spacing: .02em; text-transform: uppercase; cursor: default; } .mbfit-soon em { font-style: normal; background: var(--mb-orange); color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--radius-pill); line-height: 1.2; } .mbfit-footer .mbfit-soon { color: rgba(67,83,102,.65); text-transform: none; font-size: 1rem; } /* ========================================================================== v6: footer — crédito Smartecnia y versión móvil centrada y ordenada ========================================================================== */ .mbfit-footer__credit { font-size: var(--text-sm); color: var(--mb-navy); margin: 0; } .mbfit-footer__credit a { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--mb-navy); border-bottom: 1px solid transparent; transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out); } .mbfit-footer__credit a svg { color: var(--mb-orange); transition: transform 250ms var(--ease-spring); } .mbfit-footer__credit a:hover { color: var(--mb-white); border-color: var(--mb-white); } .mbfit-footer__credit a:hover svg { transform: scale(1.25) rotate(-8deg); } @media (max-width: 700px) { /* Orden en móvil: monograma → redes → servicios → información → pagos → copyright → crédito */ .mbfit-footer { padding-block: var(--space-7) var(--space-6); } .mbfit-footer__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; } .mbfit-footer__bottom { display: contents; } .mbfit-footer__brand { order: 1; } .mbfit-footer__brand img { height: 130px; } .mbfit-footer__social { order: 2; justify-content: center; margin-block: var(--space-5) var(--space-6); } .mbfit-footer__col:nth-of-type(1) { order: 3; } .mbfit-footer__col:nth-of-type(2) { order: 4; } .mbfit-footer__col:nth-of-type(3) { order: 5; } .mbfit-footer__copy { order: 6; } .mbfit-footer__credit { order: 7; } .mbfit-footer__col { width: 100%; padding-block: var(--space-4); border-top: 1px solid rgba(67,83,102,.2); } .mbfit-footer__col h4 { margin-bottom: var(--space-3); font-size: .78rem; letter-spacing: .12em; } .mbfit-footer__col ul { align-items: center; gap: 0; } .mbfit-footer__col li a, .mbfit-footer__col li .mbfit-soon { display: inline-flex; align-items: center; min-height: 40px; } .mbfit-footer__payments { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-4) var(--space-5); } .mbfit-footer__payments .mbfit-getnet { width: 200px; } .mbfit-pay-word { font-size: 1.5rem; } .mbfit-footer__copy { width: 100%; padding-top: var(--space-5); border-top: 1px solid rgba(67,83,102,.2); margin-bottom: var(--space-2); } .mbfit-footer__credit { margin-bottom: var(--space-8); } /* deja espacio para los botones flotantes */ } /* Menú superior: "Membresías" apagado; el aviso "Próximamente" aparece solo al pasar el mouse / enfocar */ .mbfit-nav-list .mbfit-soon { position: relative; color: rgba(255,255,255,.5); cursor: default; padding-block: 4px; outline: none; } .mbfit-nav-list .mbfit-soon em { position: absolute; left: 50%; top: calc(100% + 12px); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; white-space: nowrap; padding: 6px 12px; font-size: .68rem; transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); box-shadow: 0 8px 20px rgba(0,0,0,.25); z-index: 5; } .mbfit-nav-list .mbfit-soon em::before { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; background: var(--mb-orange); transform: translateX(-50%) rotate(45deg); border-radius: 2px; } .mbfit-nav-list .mbfit-soon:hover em, .mbfit-nav-list .mbfit-soon:focus-visible em { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 900px) { /* En el menú móvil no hay "hover": la etiqueta se muestra en línea */ .mbfit-nav-list .mbfit-soon em { position: static; transform: none; opacity: 1; box-shadow: none; padding: 3px 8px; font-size: .62rem; } .mbfit-nav-list .mbfit-soon em::before { display: none; } } /* ========================================================================== v7: Antes / Después — pares del mismo ángulo, lado a lado, con ampliación ========================================================================== */ .mbfit-ba-carousel { padding-inline: clamp(0px, 4vw, 56px); } .mbfit-batrack { display: flex; gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: var(--space-2) var(--space-1) 44px; margin-bottom: -24px; -webkit-overflow-scrolling: touch; } .mbfit-batrack::-webkit-scrollbar { display: none; } .mbfit-bacard { flex: 0 0 calc((100% - var(--space-5)) / 2); scroll-snap-align: start; background: var(--mb-white); border-radius: 24px; padding: var(--space-4); box-shadow: 0 16px 40px rgba(43,52,64,.14); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; } .mbfit-bacard__views { position: relative; } .mbfit-bapair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; padding: 0; border: 0; background: none; border-radius: 16px; overflow: hidden; cursor: zoom-in; } .mbfit-bapair[hidden] { display: none; } .mbfit-bapair__ph { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--mb-lavender); } .mbfit-bapair__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); } .mbfit-bapair:hover .mbfit-bapair__ph img { transform: scale(1.04); } .mbfit-bapair::after { content: "→"; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--mb-white); color: var(--mb-orange); font-weight: 800; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0,0,0,.22); pointer-events: none; } .mbfit-bachip { position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: var(--radius-pill); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; } .mbfit-bachip--before { background: rgba(67,83,102,.92); } .mbfit-bachip--after { background: var(--mb-orange); } .mbfit-bapair__zoom { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--mb-navy); display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 1; } .mbfit-batabs { display: flex; justify-content: center; gap: var(--space-2); } .mbfit-batabs button { border: 1.5px solid var(--mb-navy); background: transparent; color: var(--mb-navy); font-weight: 800; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; padding: 7px 16px; border-radius: var(--radius-pill); transition: background 180ms var(--ease-out), color 180ms var(--ease-out); } .mbfit-batabs button.is-active { background: var(--mb-navy); color: #fff; } .mbfit-batabs button:not(.is-active):hover { background: rgba(67,83,102,.1); } .mbfit-bacard__meta { text-align: center; } .mbfit-bacard__meta strong { display: block; color: var(--mb-navy); } .mbfit-bacard__meta span { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-ba__note { text-align: center; font-size: var(--text-sm); color: var(--mb-navy); opacity: .8; max-width: 60ch; margin: var(--space-2) auto 0; } .mbfit-ba .mbfit-testi-dots { margin-top: var(--space-2); } .mbfit-ba .mbfit-testi-dots button { background: rgba(67,83,102,.25); } .mbfit-ba .mbfit-testi-dots button.is-active { background: var(--mb-orange); } /* Ampliación */ .mbfit-badialog { border: 0; padding: var(--space-5); border-radius: 28px; width: min(980px, 94vw); max-height: 94vh; background: var(--mb-white); overflow: hidden; } .mbfit-badialog::backdrop { background: rgba(30,38,50,.82); backdrop-filter: blur(4px); } .mbfit-badialog[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); animation: popIn 300ms var(--ease-out) both; } .mbfit-badialog__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-width: 0; } .mbfit-badialog__pair figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--mb-lavender); } .mbfit-badialog__pair img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; aspect-ratio: 3 / 4; } .mbfit-badialog__cap { grid-column: 1 / -1; text-align: center; color: var(--mb-navy); font-weight: 700; margin: 0; } .mbfit-badialog__cap span { font-weight: 500; color: var(--mb-ink-mute); } .mbfit-badialog__close { position: absolute; top: 10px; right: 14px; z-index: 2; border: 0; background: var(--mb-navy); color: #fff; width: 38px; height: 38px; border-radius: 50%; font-size: 22px; line-height: 1; } .mbfit-badialog__nav { border: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--mb-lavender); color: var(--mb-navy); font-size: 24px; transition: background 180ms var(--ease-out), color 180ms var(--ease-out); } .mbfit-badialog__nav:hover { background: var(--mb-orange); color: #fff; } @media (max-width: 900px) { .mbfit-bacard { flex-basis: 86%; } .mbfit-ba-carousel { padding-inline: 0; } .mbfit-ba-nav { display: none; } } @media (max-width: 600px) { .mbfit-badialog { padding: var(--space-4) var(--space-3); } .mbfit-badialog[open] { grid-template-columns: 1fr; } .mbfit-badialog__nav { display: none; } .mbfit-bacard { flex-basis: 92%; padding: var(--space-3); } } .mbfit-ba-carousel { display: flex; align-items: center; gap: var(--space-4); } .mbfit-batrack { flex: 1; min-width: 0; } /* Antes/Después: subtítulo en dos líneas centradas y sombra de tarjetas sin recorte */ .mbfit-lead__line { display: block; } .mbfit-batrack { padding: 24px 24px 40px; margin: -24px -24px -32px; scroll-padding-inline: 24px; } .mbfit-bacard { box-shadow: 0 10px 26px rgba(43,52,64,.12); } .mbfit-ba-nav { position: relative; z-index: 2; } /* Nota de resultados: una sola línea en escritorio */ .mbfit-ba__note { max-width: min(100%, 960px); text-wrap: balance; } /* ========================================================================== v8: página Conectémos + pre-footer compartido (Instagram) ========================================================================== */ /* Hero */ .mbfit-chero { position: relative; min-height: min(80vh, 760px); display: flex; align-items: center; overflow: hidden; isolation: isolate; } .mbfit-chero__bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(38,48,62,0) 35%, rgba(38,48,62,.45) 100%), url(assets/img/conectemos/hero-conectemos.webp) 22% center / cover no-repeat; } .mbfit-chero__inner { display: flex; justify-content: flex-end; width: 100%; padding-block: var(--space-8); } .mbfit-chero__text { max-width: 620px; text-align: right; color: #fff; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); } .mbfit-chero__title { font-family: var(--font-display); font-weight: 400; color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.08; text-shadow: 0 2px 18px rgba(30,38,50,.35); } .mbfit-chero__lead { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.7rem); line-height: 1.12; text-shadow: 0 2px 18px rgba(30,38,50,.35); } .mbfit-chero__q { font-weight: 800; font-size: clamp(1.05rem, 1.8vw, 1.5rem); line-height: 1.3; max-width: 26ch; text-shadow: 0 2px 14px rgba(30,38,50,.4); } /* Hola, soy Mairim */ .mbfit-hola { background: var(--mb-navy); padding-block: var(--space-9); text-align: center; } .mbfit-hola__inner { max-width: 860px; } .mbfit-hola h2 { margin-bottom: var(--space-4); } .mbfit-hola p { color: #fff; font-weight: 800; font-size: clamp(1.1rem, 2.2vw, 1.6rem); line-height: 1.45; margin-bottom: var(--space-6); } .mbfit-hola p .hl { color: var(--mb-orange); } /* Galería de eventos (masonry con filtro y ampliación) */ .mbfit-gal { background: var(--mb-paper); padding-block: var(--space-9); } .mbfit-gal__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin-block: calc(var(--space-2) * -1) var(--space-6); } .mbfit-gal__chips button { border: 1.5px solid var(--mb-navy); background: transparent; color: var(--mb-navy); font-weight: 800; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--radius-pill); transition: background 180ms var(--ease-out), color 180ms var(--ease-out); } .mbfit-gal__chips button.is-active { background: var(--mb-navy); color: #fff; } .mbfit-gal__chips button:not(.is-active):hover { background: rgba(67,83,102,.1); } .mbfit-gal__grid { columns: 3; column-gap: var(--space-4); max-width: 1000px; margin-inline: auto; } .mbfit-gal__item { break-inside: avoid; margin: 0 0 var(--space-4); } .mbfit-gal__item[hidden] { display: none; } .mbfit-gal__item button { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--mb-lavender); cursor: zoom-in; box-shadow: 0 10px 26px rgba(43,52,64,.14); transition: transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out); } .mbfit-gal__item button:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(43,52,64,.22); } .mbfit-gal__item img { width: 100%; height: auto; transition: transform 600ms var(--ease-out); } .mbfit-gal__item button:hover img { transform: scale(1.04); } .mbfit-gal__zoom { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--mb-navy); display: grid; place-items: center; opacity: 0; transform: scale(.85); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .mbfit-gal__item button:hover .mbfit-gal__zoom, .mbfit-gal__item button:focus-visible .mbfit-gal__zoom { opacity: 1; transform: none; } .mbfit-galdialog { border: 0; padding: var(--space-4); border-radius: 24px; width: min(900px, 94vw); background: var(--mb-navy-2); color: #fff; overflow: hidden; } .mbfit-galdialog::backdrop { background: rgba(20,26,36,.88); backdrop-filter: blur(4px); } .mbfit-galdialog[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); animation: popIn 300ms var(--ease-out) both; } .mbfit-galdialog__fig { margin: 0; text-align: center; min-width: 0; } .mbfit-galdialog__fig img { max-width: 100%; max-height: 78vh; width: auto; height: auto; margin-inline: auto; border-radius: 14px; } .mbfit-galdialog__fig figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: rgba(255,255,255,.85); } .mbfit-galdialog .mbfit-badialog__nav { background: rgba(255,255,255,.14); color: #fff; } /* Clave */ .mbfit-clave { background: var(--mb-lavender); padding-block: var(--space-9) var(--space-8); } .mbfit-clave h2 { max-width: 20ch; margin-inline: auto; } .mbfit-clave h2 span { color: var(--mb-orange); } .mbfit-clave__img { width: min(100%, 560px); margin: var(--space-6) auto 0; animation: floatY 8s ease-in-out infinite; } /* YouTube + redes */ .mbfit-ytsec { background: var(--mb-white); padding-block: var(--space-9); } .mbfit-ytsec .mbfit-badge-wrap { margin-block: calc(var(--space-3) * -1) var(--space-7); } .mbfit-yt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); max-width: 1000px; margin-inline: auto; } .mbfit-yt h3 { font-family: var(--font-body); font-size: .95rem; line-height: 1.35; margin-top: var(--space-3); color: var(--mb-navy); font-weight: 800; } .mbfit-yt__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--mb-navy); box-shadow: 0 12px 28px rgba(43,52,64,.18); } .mbfit-yt__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; } .mbfit-yt__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); } .mbfit-yt__btn:hover img { transform: scale(1.05); } .mbfit-yt__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 46px; transform: translate(-50%, -50%); background: #FF0033; color: #fff; border-radius: 14px; display: grid; place-items: center; transition: transform 200ms var(--ease-spring); } .mbfit-yt__btn:hover .mbfit-yt__play { transform: translate(-50%, -50%) scale(1.12); } .mbfit-yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mbfit-redes { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } .mbfit-redes .mbfit-video__social { display: flex; justify-content: center; } .mbfit-redes .mbfit-video__social a { color: var(--mb-navy); border-color: var(--mb-navy); } /* Instagram (pre-footer compartido) */ .mbfit-ig { background: var(--mb-paper); padding-block: var(--space-9); } .mbfit-ig .mbfit-h2 { margin-bottom: var(--space-6); } .mbfit-ig__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); } .mbfit-ig__tile { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--mb-lavender); box-shadow: 0 8px 20px rgba(43,52,64,.1); } .mbfit-ig__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out); } .mbfit-ig__tile:hover img { transform: scale(1.08); } .mbfit-ig__hover { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: linear-gradient(0deg, rgba(38,48,62,.65), rgba(38,48,62,.35)); opacity: 0; transition: opacity 250ms var(--ease-out); } .mbfit-ig__tile:hover .mbfit-ig__hover, .mbfit-ig__tile:focus-visible .mbfit-ig__hover { opacity: 1; } .mbfit-ig__badge { position: absolute; right: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: .65rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; } @media (max-width: 1024px) { .mbfit-gal__grid { columns: 2; } .mbfit-ig__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 800px) { .mbfit-chero { min-height: 640px; align-items: flex-end; } .mbfit-chero__bg { background: linear-gradient(180deg, rgba(38,48,62,0) 25%, rgba(38,48,62,.78) 100%), url(assets/img/conectemos/hero-conectemos.webp) 30% center / cover no-repeat; } .mbfit-chero__inner { justify-content: center; padding-block: var(--space-7); } .mbfit-chero__text { text-align: center; align-items: center; } .mbfit-yt__grid { grid-template-columns: 1fr; max-width: 520px; } } @media (max-width: 520px) { .mbfit-gal__grid { columns: 2; column-gap: var(--space-3); } .mbfit-galdialog[open] { grid-template-columns: 1fr; } .mbfit-galdialog .mbfit-badialog__nav { display: none; } .mbfit-ig__grid { gap: var(--space-2); } } /* Clave: sin aire extra alrededor de la imagen */ .mbfit-clave { padding-block: var(--space-8) 0; overflow: hidden; } .mbfit-clave__img { margin: var(--space-5) auto 0; display: block; } /* Títulos de los videos centrados */ .mbfit-yt h3 { text-align: center; text-wrap: balance; } /* Reseñas: tarjetas más arriba sobre la foto y flechas laterales claras */ .mbfit-ba-nav { display: grid; place-items: center; } .mbfit-ba-nav svg { display: block; } @media (min-width: 701px) { .mbfit-testimonials__band { padding-bottom: calc(var(--space-9) + 120px); } .mbfit-rcarousel { margin-top: -120px; padding-inline: 64px; } .mbfit-ba-nav.mbfit-rnav { position: absolute; top: calc(50% - 44px); z-index: 3; width: 48px; height: 48px; background: var(--mb-white); color: var(--mb-navy); box-shadow: 0 8px 22px rgba(43,52,64,.22); } .mbfit-ba-nav.mbfit-rnav--prev { left: 6px; } .mbfit-ba-nav.mbfit-rnav--next { right: 6px; } .mbfit-ba-nav.mbfit-rnav:hover { background: var(--mb-orange); color: #fff; transform: scale(1.08); } } @media (max-width: 1024px) and (min-width: 701px) { .mbfit-rcarousel { padding-inline: 60px; } } /* ========================================================================== v11: Asesorías rediseñada + tarjetas de plan (carrito / detalle) + aviso ========================================================================== */ /* Hero */ .mbfit-ahero { position: relative; min-height: min(72vh, 640px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #c2570a; } .mbfit-ahero__bg { position: absolute; inset: 0; z-index: -2; background: url(assets/img/asesorias/hero-asesorias.webp) 50% 30% / cover no-repeat; } .mbfit-ahero__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(38,26,18,.78) 0%, rgba(38,26,18,.25) 55%, rgba(38,26,18,.05) 100%); } .mbfit-ahero__inner { padding-block: var(--space-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .mbfit-ahero h1 { font-family: var(--font-display); font-weight: 400; color: #fff; font-size: clamp(3rem, 7.4vw, 6rem); line-height: 1; text-shadow: 0 3px 24px rgba(0,0,0,.35); } /* Introducción */ .mbfit-aintro { position: relative; overflow: hidden; background: var(--mb-white); padding-block: var(--space-9) var(--space-8); } .mbfit-aintro__deco { position: absolute; right: -30px; top: 6%; height: 92%; width: auto; max-width: none; opacity: .95; pointer-events: none; } .mbfit-aintro__grid { position: relative; display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: start; } .mbfit-aintro__head h2 { text-align: left; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.02; } .mbfit-aintro__head .o { display: block; color: var(--mb-orange); } .mbfit-aintro__head .n { display: block; color: var(--mb-navy); } .mbfit-aintro__body { max-width: 62ch; display: grid; gap: var(--space-4); } .mbfit-aintro__body p { font-size: 1.1rem; line-height: 1.65; color: var(--mb-navy); } .mbfit-aintro__body .hl { color: var(--mb-orange); font-weight: 700; } .mbfit-aintro__body u { text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(67,83,102,.5); } .mbfit-appchips__label { position: relative; margin-top: var(--space-8); text-align: center; font-size: var(--text-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mb-navy); opacity: .7; } .mbfit-appchips { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); } .mbfit-appchips li { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--mb-white); border: 1.5px solid var(--mb-line); border-radius: var(--radius-pill); color: var(--mb-navy); font-weight: 700; box-shadow: 0 8px 20px rgba(43,52,64,.08); } .mbfit-appchips li svg { color: var(--mb-orange); flex: none; } /* Navegación de modalidades */ .mbfit-planes-anchor { scroll-margin-top: 90px; } .mbfit-modnav { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-4); background: var(--mb-paper); border-block: 1px solid var(--mb-line); position: sticky; top: 76px; z-index: 20; } .mbfit-modnav a { padding: 10px 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--mb-navy); color: var(--mb-navy); font-weight: 800; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; transition: background 180ms var(--ease-out), color 180ms var(--ease-out); } .mbfit-modnav a:hover { background: var(--mb-navy); color: #fff; } /* Modalidades */ .mbfit-mod { padding-top: var(--space-9); scroll-margin-top: 140px; } .mbfit-mod__title { font-family: var(--font-body); font-weight: 800; text-align: center; text-transform: uppercase; font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.05; letter-spacing: -.01em; } .mbfit-mod__title--orange { color: var(--mb-orange); } .mbfit-mod__title--navy { color: var(--mb-navy); } .mbfit-mod__band { margin-top: var(--space-4); padding-block: var(--space-3); text-align: center; } .mbfit-mod__band p { font-weight: 800; text-transform: uppercase; font-size: clamp(.95rem, 2.2vw, 1.5rem); letter-spacing: .01em; } .mbfit-mod__band--orange { background: var(--mb-yellow); } .mbfit-mod__band--orange p { color: var(--mb-orange-2); } .mbfit-mod__band--navy { background: var(--mb-lavender-2); } .mbfit-mod__band--navy p { color: var(--mb-navy); } .mbfit-mod__text { max-width: 720px; margin: var(--space-6) auto var(--space-7); text-align: center; font-size: 1.15rem; line-height: 1.6; color: var(--mb-navy); } .mbfit-mod__text b { font-weight: 800; } .mbfit-mod .mbfit-plan-grid { max-width: 1040px; margin-inline: auto; gap: var(--space-6); } .mbfit-mod .mbfit-plan-grid--two { max-width: 720px; } /* Ayuda */ .mbfit-help { padding-block: var(--space-9) var(--space-8); text-align: center; } .mbfit-help p { font-size: var(--text-lg); color: var(--mb-navy); margin-bottom: var(--space-4); } /* Tarjetas de plan (precio y stock reales de WooCommerce) */ .mbfit-plan-card { border-radius: 24px; } .mbfit-plan-card__img { border-radius: 24px 24px 0 0; } .mbfit-plan-card__body { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4) var(--space-5); } .mbfit-plan-card__name { font-size: 1.05rem; } .mbfit-plan-card__price { min-height: 1.6em; color: var(--mb-orange-2); font-size: 1.25rem; } .mbfit-plan-card__actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .mbfit-plan-card__actions .mbfit-btn { width: 100%; } .mbfit-btn.is-added { background: var(--mb-navy); box-shadow: 0 8px 20px rgba(67,83,102,.3); } .mbfit-linkbtn { border: 0; background: none; padding: 6px 4px; font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(67,83,102,.4); cursor: pointer; transition: color 180ms var(--ease-out); } .mbfit-linkbtn:hover { color: var(--mb-orange); } .mbfit-linkbtn[hidden] { display: none; } /* Detalle del plan */ .mbfit-plandialog { border: 0; padding: var(--space-5); border-radius: 28px; width: min(880px, 94vw); max-height: 92vh; background: var(--mb-white); overflow: auto; } .mbfit-plandialog::backdrop { background: rgba(30,38,50,.78); backdrop-filter: blur(4px); } .mbfit-plandialog[open] { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-6); align-items: center; animation: popIn 300ms var(--ease-out) both; } .mbfit-plandialog__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 20px; box-shadow: 0 14px 34px rgba(43,52,64,.2); } .mbfit-plandialog__body { display: flex; flex-direction: column; gap: var(--space-3); padding-right: var(--space-4); } .mbfit-plandialog__body h3 { font-size: 1.6rem; color: var(--mb-navy); } .mbfit-plandialog__desc { color: var(--mb-ink); line-height: 1.6; max-height: 34vh; overflow: auto; } .mbfit-plandialog__desc p + p, .mbfit-plandialog__desc ul { margin-top: .7em; } .mbfit-plandialog__desc ul { padding-left: 1.2em; list-style: disc; } .mbfit-plandialog .mbfit-plan-card__actions { align-items: stretch; } /* Aviso "agregado al carrito" y animación del contador */ .mbfit-toast { position: fixed; left: 50%; bottom: 28px; z-index: 120; display: flex; align-items: center; gap: var(--space-4); padding: 14px 22px; background: var(--mb-navy-2); color: #fff; border-radius: var(--radius-pill); box-shadow: 0 16px 40px rgba(0,0,0,.3); font-weight: 600; font-size: var(--text-sm); opacity: 0; transform: translate(-50%, 20px); transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); max-width: calc(100vw - 32px); } .mbfit-toast[hidden] { display: none; } .mbfit-toast.is-on { opacity: 1; transform: translate(-50%, 0); } .mbfit-toast a { color: var(--mb-yellow); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .mbfit-header__cart-count.is-bump { animation: cartBump 500ms var(--ease-spring); } @keyframes cartBump { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } } @media (max-width: 900px) { .mbfit-aintro__grid { grid-template-columns: 1fr; gap: var(--space-5); } .mbfit-aintro__deco { display: none; } .mbfit-ahero { min-height: 520px; } .mbfit-modnav { top: 62px; } } @media (max-width: 700px) { .mbfit-plandialog[open] { grid-template-columns: 1fr; gap: var(--space-4); } .mbfit-plandialog__img img { max-height: 34vh; } .mbfit-plandialog__body { padding-right: 0; } .mbfit-mod .mbfit-plan-grid--three, .mbfit-mod .mbfit-plan-grid--two { grid-template-columns: 1fr; max-width: 380px; } .mbfit-toast { bottom: 96px; } .mbfit-ahero__inner { padding-block: var(--space-7); } } /* Navegación de modalidades: compacta y sin fijar en móvil */ @media (max-width: 900px) { .mbfit-modnav { position: static; flex-wrap: nowrap; gap: var(--space-2); padding: var(--space-3) var(--space-3); } .mbfit-modnav a { padding: 8px 14px; font-size: .7rem; white-space: nowrap; } } /* ═══════════════════════════════════════════════════════════ v12: Tú mejor proyecto — landing + página de producto ═══════════════════════════════════════════════════════════ */ .mbfit-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .mbfit-btn--outline.mbfit-btn--lg { padding: 16px 36px; } /* ── Hero oscuro con foto ── */ .mbfit-thero { position: relative; background: #030505; color: #fff; overflow: hidden; } .mbfit-thero__stage { position: relative; } .mbfit-thero__stage img { display: block; width: 100%; height: auto; max-height: min(84vh, 780px); object-fit: cover; object-position: center; } .mbfit-thero__stage::after { content: ""; position: absolute; inset: auto 0 0 0; height: 26%; background: linear-gradient(to top, #030505, transparent); pointer-events: none; } .mbfit-thero__panel { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; } .mbfit-thero__wrap { display: flex; justify-content: flex-end; width: 100%; max-width: none; padding-right: max(24px, 3.4vw); } .mbfit-thero__card { pointer-events: auto; width: clamp(280px, 23vw, 340px); display: grid; gap: var(--space-4); justify-items: start; padding: clamp(20px, 2vw, 30px); border-radius: 26px; background: rgba(8, 10, 10, .55); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: fadeUp 800ms 300ms var(--ease-out) both; } .mbfit-thero__kicker { font-size: var(--text-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-yellow); } .mbfit-thero__lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.35; font-weight: 700; color: #fff; } .mbfit-thero__chips { display: flex; flex-wrap: wrap; gap: 8px; } .mbfit-thero__chips li { padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); } .mbfit-thero__chips li:last-child { background: var(--mb-yellow); border-color: var(--mb-yellow); color: var(--mb-navy-2); } .mbfit-thero__more { font-weight: 700; font-size: var(--text-sm); color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); transition: color 180ms; } .mbfit-thero__more:hover { color: var(--mb-yellow); } .mbfit-thero__more span { display: inline-block; transition: transform 220ms var(--ease-out); } .mbfit-thero__more:hover span { transform: translateY(3px); } /* ── Intro con video vertical ── */ .mbfit-tintro { position: relative; overflow: hidden; background: var(--mb-white); padding-block: clamp(var(--space-8), 8vw, var(--space-10)); } .mbfit-tintro__deco { top: 4%; right: -40px; height: 92%; opacity: .8; } .mbfit-tintro__grid { position: relative; display: grid; grid-template-columns: minmax(270px, 340px) 1fr; gap: clamp(32px, 7vw, 104px); align-items: center; } .mbfit-tvid { position: relative; justify-self: center; width: 100%; max-width: 340px; } .mbfit-tvid::before { content: ""; position: absolute; inset: 22px -18px -18px 22px; border-radius: 34px; background: var(--mb-orange); z-index: 0; transform: rotate(2.5deg); opacity: .95; } .mbfit-tvid__frame { position: relative; z-index: 1; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden; background: #000; box-shadow: 0 30px 60px rgba(43,52,64,.28); } .mbfit-tvid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .mbfit-tvid__btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; } .mbfit-tvid__btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms var(--ease-out); } .mbfit-tvid__btn:hover img { transform: scale(1.04); } .mbfit-tvid__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); pointer-events: none; } .mbfit-tvid__play { position: absolute; z-index: 2; left: 50%; top: 30%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--mb-orange); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255,108,14,.6); animation: tvidPulse 2.4s infinite; transition: transform 220ms var(--ease-spring); } .mbfit-tvid__play svg { margin-left: 4px; } .mbfit-tvid__btn:hover .mbfit-tvid__play { transform: scale(1.1); } @keyframes tvidPulse { 0% { box-shadow: 0 0 0 0 rgba(255,108,14,.55); } 70% { box-shadow: 0 0 0 22px rgba(255,108,14,0); } 100% { box-shadow: 0 0 0 0 rgba(255,108,14,0); } } .mbfit-tvid__tag { position: absolute; z-index: 2; left: 50%; bottom: 20px; transform: translateX(-50%); white-space: nowrap; padding: 8px 18px; border-radius: var(--radius-pill); background: rgba(255,255,255,.95); color: var(--mb-navy); font-weight: 800; font-size: var(--text-sm); } .mbfit-tintro__text { display: grid; gap: var(--space-4); max-width: 60ch; } .mbfit-tintro__text h2 { text-align: left; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1.02; margin-bottom: var(--space-3); } .mbfit-tintro__text h2 .o { display: block; color: var(--mb-orange); } .mbfit-tintro__text h2 .n { display: block; color: var(--mb-navy); } .mbfit-tintro__text p { font-size: 1.1rem; line-height: 1.7; color: var(--mb-navy); } .mbfit-tintro__text p b { color: var(--mb-orange-2); font-weight: 800; } .mbfit-tintro__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-3); } /* ── Las 7 semanas ── */ .mbfit-tweeks { background: var(--mb-paper); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); } .mbfit-tweeks__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-7); list-style: none; padding: 0; position: relative; } .mbfit-tweeks__list::before { content: ""; position: absolute; left: 12%; right: 12%; top: 36px; border-top: 2px dashed var(--mb-lavender-2); z-index: 0; } .mbfit-tweeks__list li { position: relative; z-index: 1; text-align: center; background: #fff; border-radius: var(--radius); padding: var(--space-7) var(--space-5) var(--space-6); box-shadow: 0 10px 30px rgba(67,83,102,.08); border: 1px solid var(--mb-line); transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out); } .mbfit-tweeks__list li:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(67,83,102,.14); } .mbfit-tweeks__n { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-orange); color: #fff; font-family: var(--font-body); font-weight: 900; font-size: 1.35rem; box-shadow: 0 0 0 8px var(--mb-paper); } .mbfit-tweeks__list li:nth-child(2) .mbfit-tweeks__n { background: var(--mb-navy); } .mbfit-tweeks__list li:nth-child(3) .mbfit-tweeks__n { background: var(--mb-yellow); color: var(--mb-navy-2); font-size: 1.6rem; } .mbfit-tweeks__k { font-size: var(--text-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mb-ink-mute); margin-top: var(--space-2); } .mbfit-tweeks__list h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--mb-orange); margin: 6px 0 var(--space-3); } .mbfit-tweeks__list li p:last-child { color: var(--mb-ink); line-height: 1.6; } /* ── ¿Qué obtendrás? ── */ .mbfit-tget { background: var(--mb-lavender); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); overflow: hidden; } .mbfit-tget__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .mbfit-tget__fig img { width: min(100%, 520px); margin-inline: auto; display: block; animation: floatY 8s ease-in-out infinite; } .mbfit-tget__body .mbfit-badge { margin-top: 0; } .mbfit-tget__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } .mbfit-tget__list li { display: flex; align-items: center; gap: var(--space-4); background: #fff; border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 700; color: var(--mb-navy); line-height: 1.3; box-shadow: 0 6px 18px rgba(67,83,102,.07); transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out); } .mbfit-tget__list li:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(67,83,102,.14); } .mbfit-tget__ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--mb-yellow); color: var(--mb-navy); } .mbfit-tget--pdp .mbfit-tget__list { margin-top: var(--space-6); max-width: 980px; margin-inline: auto; } .mbfit-tget--pdp .mbfit-badge-wrap { margin-top: var(--space-2); } /* ── Premio ── */ .mbfit-tprize { background: var(--mb-white); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); } .mbfit-tprize__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 6vw, 88px); align-items: center; } .mbfit-tprize__photo { position: relative; } .mbfit-tprize__photo::before { content: ""; position: absolute; inset: 24px 24px -24px -24px; border-radius: 30px; background: var(--mb-yellow); z-index: 0; } .mbfit-tprize__photo img { position: relative; z-index: 1; width: 100%; height: auto; border-radius: 30px; box-shadow: 0 30px 60px rgba(43,52,64,.22); display: block; } .mbfit-tprize__body { display: grid; gap: var(--space-4); justify-items: start; } .mbfit-tprize__body .mbfit-eyebrow { font-size: var(--text-base); margin: 0; } .mbfit-tprize__big { font-family: var(--font-display); font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.02; color: var(--mb-navy); text-transform: uppercase; } .mbfit-tprize__big span { display: inline-block; background: var(--mb-yellow); color: var(--mb-navy-2); padding: 2px 16px 6px; border-radius: 10px; transform: rotate(-1.5deg); margin-bottom: 6px; } .mbfit-tprize__body > p:not(.mbfit-eyebrow):not(.mbfit-tprize__big) { font-size: 1.15rem; line-height: 1.65; color: var(--mb-navy); max-width: 46ch; } /* ── Banda navy ── */ .mbfit-tband { background: var(--mb-navy); color: #fff; padding-block: clamp(var(--space-8), 8vw, var(--space-9)); text-align: center; position: relative; overflow: hidden; } .mbfit-tband::before { content: ""; position: absolute; right: -8%; top: 50%; width: min(46vw, 520px); aspect-ratio: 1; transform: translateY(-50%); background: rgba(255,255,255,.05); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; pointer-events: none; } .mbfit-tband__inner { position: relative; display: grid; gap: var(--space-6); justify-items: center; } .mbfit-tband h2 { color: #fff; font-size: clamp(2rem, 4.4vw, 3.4rem); text-transform: uppercase; } .mbfit-tband h2 em { font-style: normal; color: var(--mb-yellow); } /* ═════ Página de producto ═════ */ .mbfit-crumbs { background: var(--mb-paper); border-bottom: 1px solid var(--mb-line); padding-block: 14px; font-size: var(--text-sm); } .mbfit-crumbs .mbfit-container { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--mb-ink-mute); } .mbfit-crumbs a { color: var(--mb-navy); font-weight: 600; } .mbfit-crumbs a:hover { color: var(--mb-orange); } .mbfit-crumbs [aria-current] { color: var(--mb-ink); font-weight: 700; } .mbfit-pdp { background: var(--mb-white); padding-block: clamp(var(--space-6), 5vw, var(--space-8)); } .mbfit-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .mbfit-pdp__gallery { position: sticky; top: 110px; } .mbfit-pdp__img { position: relative; border-radius: 28px; overflow: hidden; background: var(--mb-paper); box-shadow: 0 26px 60px rgba(43,52,64,.18); } .mbfit-pdp__img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .mbfit-pdp__flag { position: absolute; left: 16px; top: 16px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--mb-yellow); color: var(--mb-navy-2); font-weight: 800; font-size: var(--text-sm); box-shadow: 0 6px 16px rgba(0,0,0,.15); } .mbfit-pdp__info { display: grid; gap: var(--space-4); } .mbfit-pdp__rating { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); } .mbfit-pdp__rating:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; } .mbfit-pdp__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1.02; color: var(--mb-navy); } .mbfit-pdp__pricebox { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .mbfit-pdp__price { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 900; color: var(--mb-orange-2); line-height: 1; min-height: 1em; } .mbfit-pdp__price .mbfit-price-old { font-size: .6em; font-weight: 600; margin-right: 10px; } .mbfit-pdp__off { padding: 5px 12px; border-radius: var(--radius-pill); background: var(--mb-orange); color: #fff; font-weight: 800; font-size: var(--text-sm); } .mbfit-pdp__off[hidden] { display: none; } .mbfit-pdp__start { display: flex; align-items: center; gap: 10px; color: var(--mb-navy); font-weight: 600; } .mbfit-pdp__start[hidden] { display: none; } .mbfit-pdp__start svg { color: var(--mb-orange); } .mbfit-pdp__lead { font-size: 1.15rem; line-height: 1.65; color: var(--mb-ink); } .mbfit-pdp__lead b { color: var(--mb-orange-2); } .mbfit-pdp__quote { border-left: 4px solid var(--mb-orange); padding: 4px 0 4px var(--space-4); font-weight: 700; font-size: 1.1rem; color: var(--mb-navy); line-height: 1.5; } .mbfit-pdp__quote strong { color: var(--mb-orange-2); } .mbfit-pdp__buy { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); } .mbfit-pdp__buy .mbfit-btn { flex: 1 1 210px; text-align: center; justify-content: center; } .mbfit-pdp__trust { display: grid; gap: 10px; padding: var(--space-4) var(--space-5); background: var(--mb-paper); border-radius: var(--radius-sm); } .mbfit-pdp__trust li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: var(--text-sm); color: var(--mb-navy); } .mbfit-pdp__trust svg { color: var(--mb-orange); flex: none; } .mbfit-pdp__help { font-size: var(--text-sm); color: var(--mb-ink-mute); } .mbfit-pdp__help a { color: var(--mb-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .mbfit-pdp__help a:hover { color: var(--mb-orange); } .mbfit-pdesc { background: var(--mb-paper); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); } .mbfit-pdesc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 88px); align-items: start; } .mbfit-pdesc__head { position: sticky; top: 120px; } .mbfit-pdesc__head h2 { text-align: left; color: var(--mb-navy); font-size: clamp(2.2rem, 4.2vw, 3.4rem); } .mbfit-pdesc__body { display: grid; gap: var(--space-4); max-width: 62ch; } .mbfit-pdesc__body p { font-size: 1.1rem; line-height: 1.75; color: var(--mb-ink); } .mbfit-pdesc__body .mbfit-pdesc__hl { margin-top: var(--space-3); padding: var(--space-5); border-radius: var(--radius); background: #fff; border: 2px solid var(--mb-yellow); font-weight: 700; color: var(--mb-navy); } .mbfit-preq { background: var(--mb-white); padding-block: clamp(var(--space-8), 7vw, var(--space-9)); } .mbfit-preq__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .mbfit-preq__card { position: relative; padding: var(--space-6); border-radius: var(--radius); display: grid; gap: var(--space-3); align-content: start; } .mbfit-preq__card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; text-transform: uppercase; } .mbfit-preq__card p { line-height: 1.6; font-size: 1.05rem; } .mbfit-preq__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; } .mbfit-preq__card--prize { background: var(--mb-yellow); color: var(--mb-navy-2); } .mbfit-preq__card--prize h3 { color: var(--mb-navy-2); } .mbfit-preq__card--prize .mbfit-preq__ic { background: #fff; color: var(--mb-orange-2); } .mbfit-preq__card--imp { background: var(--mb-navy); color: #fff; } .mbfit-preq__card--imp h3 { color: var(--mb-yellow); } .mbfit-preq__card--imp .mbfit-preq__ic { background: rgba(255,255,255,.12); color: var(--mb-yellow); } .mbfit-preq__reqs { margin-top: var(--space-5); padding: var(--space-6); border-radius: var(--radius); background: var(--mb-paper); border: 1px solid var(--mb-line); } .mbfit-preq__reqs h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; text-transform: uppercase; color: var(--mb-orange-2); margin-bottom: var(--space-5); } .mbfit-preq__reqs h3 small { font-family: var(--font-body); font-size: .5em; font-weight: 700; color: var(--mb-ink-mute); text-transform: none; letter-spacing: 0; } .mbfit-preq__reqs ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); } .mbfit-preq__reqs li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; color: var(--mb-ink); } .mbfit-preq__ck { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-orange); color: #fff; margin-top: 1px; } .mbfit-preq__ck svg { width: 16px; height: 16px; } .mbfit-pfinal { background: var(--mb-navy); color: #fff; text-align: center; padding-block: clamp(var(--space-8), 8vw, var(--space-9)); position: relative; overflow: hidden; } .mbfit-pfinal::before { content: ""; position: absolute; left: -6%; top: 50%; width: min(42vw, 480px); aspect-ratio: 1; transform: translateY(-50%); background: rgba(255,255,255,.05); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; pointer-events: none; } .mbfit-pfinal__inner { position: relative; display: grid; gap: var(--space-4); justify-items: center; } .mbfit-pfinal__see { color: rgba(255,255,255,.85); font-size: 1.05rem; max-width: 46ch; } .mbfit-pfinal__see strong { color: var(--mb-yellow); } .mbfit-pfinal h2 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.8rem); text-transform: uppercase; } .mbfit-pfinal__sub { font-size: 1.2rem; font-weight: 600; color: #fff; } .mbfit-pfinal__actions { margin-top: var(--space-3); } .mbfit-pfinal__note { font-size: var(--text-sm); color: rgba(255,255,255,.65); } /* Barra de compra fija (móvil) */ .mbfit-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: none; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px var(--space-5) calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--mb-line); box-shadow: 0 -10px 30px rgba(43,52,64,.14); transform: translateY(110%); transition: transform 320ms var(--ease-out); } .mbfit-buybar.is-on { transform: none; } .mbfit-buybar__info { display: grid; line-height: 1.2; min-width: 0; } .mbfit-buybar__info strong { font-size: var(--text-sm); color: var(--mb-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mbfit-buybar__info span { font-weight: 900; font-size: 1.15rem; color: var(--mb-orange-2); } .mbfit-buybar__info .mbfit-price-old { font-size: .8rem; font-weight: 500; } .mbfit-buybar .mbfit-btn { padding: 12px 22px; flex: none; } @media (max-width: 899px) { .mbfit-tintro__grid { grid-template-columns: 1fr; gap: var(--space-7); } .mbfit-tintro__deco { display: none; } .mbfit-tvid { max-width: 300px; } .mbfit-tweeks__list { grid-template-columns: 1fr; gap: var(--space-8); } .mbfit-tweeks__list::before { display: none; } .mbfit-tget__grid { grid-template-columns: 1fr; } .mbfit-tget__fig { order: 2; } .mbfit-tget__fig img { width: min(80%, 380px); } .mbfit-tprize__grid { grid-template-columns: 1fr; } .mbfit-tprize__photo { max-width: 460px; margin-inline: auto; width: calc(100% - 20px); } .mbfit-tprize__body { justify-items: center; text-align: center; } .mbfit-pdp__grid, .mbfit-pdesc__grid { grid-template-columns: 1fr; } .mbfit-pdp__gallery, .mbfit-pdesc__head { position: static; } .mbfit-pdp__img { max-width: 560px; } .mbfit-buybar { display: flex; } body.has-buybar .mbfit-wa { bottom: calc(var(--space-5) + 74px); } body.has-buybar .mbfit-totop { bottom: calc(104px + 74px); } body.has-buybar .mbfit-toast { bottom: 96px; } } @media (max-width: 640px) { .mbfit-tget__list { grid-template-columns: 1fr; } .mbfit-preq__pair, .mbfit-preq__reqs ul { grid-template-columns: 1fr; } .mbfit-tintro__cta { justify-content: flex-start; } .mbfit-pdp__buy .mbfit-btn { flex-basis: 100%; } } @media (max-width: 1039px) { .mbfit-thero__panel { position: static; display: block; pointer-events: auto; padding-bottom: var(--space-7); } .mbfit-thero__wrap { justify-content: center; padding-right: var(--space-5); max-width: 1240px; } .mbfit-thero__card { width: min(100%, 440px); margin-top: calc(var(--space-6) * -1); position: relative; z-index: 2; background: rgba(20,24,24,.9); } .mbfit-thero__stage img { aspect-ratio: 1 / 1; max-height: 520px; object-position: 45% center; } } /* ═══ v13: galería mosaico (bento) ═══ */ .mbfit-gal__chips button i { font-style: normal; display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 1px 7px; border-radius: var(--radius-pill); background: rgba(67,83,102,.12); font-size: .72rem; } .mbfit-gal__chips button.is-active i { background: rgba(255,255,255,.22); } .mbfit-gal__grid { display: grid; columns: auto; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 15.5vw, 215px); grid-auto-flow: dense; gap: var(--space-4); max-width: 1120px; margin-inline: auto; } .mbfit-gal__item { margin: 0; break-inside: auto; min-height: 0; transition-delay: var(--d, 0ms); } .mbfit-gal__item.reveal.is-visible { transition-delay: var(--d, 0ms); } .mbfit-gal__item button { height: 100%; border-radius: 22px; } .mbfit-gal__item img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(2) { grid-row: span 2; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(n+5) { grid-row: span 2; } .mbfit-gal__grid.is-filtered { grid-auto-rows: auto; grid-template-columns: repeat(3, 1fr); } .mbfit-gal__grid.is-filtered .mbfit-gal__item { aspect-ratio: 3 / 4; } .mbfit-gal__grid.is-swap .mbfit-gal__item:not([hidden]) { animation: galIn 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); } @keyframes galIn { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } .mbfit-gal__item button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28,36,48,.72) 0%, rgba(28,36,48,0) 55%); opacity: 0; transition: opacity 300ms var(--ease-out); pointer-events: none; } .mbfit-gal__item button:hover::after, .mbfit-gal__item button:focus-visible::after { opacity: 1; } .mbfit-gal__tag { position: absolute; z-index: 2; left: 12px; top: 12px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(255,255,255,.94); color: var(--mb-navy); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,.12); } .mbfit-gal__item[data-cat="competencia"] .mbfit-gal__tag { background: var(--mb-yellow); color: var(--mb-navy-2); } .mbfit-gal__cap { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 14px; color: #fff; font-weight: 700; font-size: .92rem; line-height: 1.3; text-align: left; opacity: 0; transform: translateY(10px); transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); } .mbfit-gal__item button:hover .mbfit-gal__cap, .mbfit-gal__item button:focus-visible .mbfit-gal__cap { opacity: 1; transform: none; } .mbfit-gal__zoom { z-index: 2; } @media (hover: none) { .mbfit-gal__item button::after, .mbfit-gal__cap { display: none; } } @media (max-width: 1024px) { .mbfit-gal__grid { grid-auto-rows: clamp(120px, 20vw, 190px); gap: var(--space-3); } } @media (max-width: 760px) { .mbfit-gal__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 130px; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(n) { grid-column: auto; grid-row: span 2; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .mbfit-gal__grid:not(.is-filtered) .mbfit-gal__item:nth-child(4) { grid-column: span 2; grid-row: span 1; } .mbfit-gal__grid.is-filtered { grid-template-columns: repeat(2, 1fr); } .mbfit-gal__item button { border-radius: 18px; } .mbfit-gal__tag { left: 8px; top: 8px; padding: 4px 9px; font-size: .62rem; } } @media (max-width: 520px) { .mbfit-gal__chips { gap: 6px; } .mbfit-gal__chips button { padding: 8px 12px; font-size: .68rem; letter-spacing: .03em; } .mbfit-gal__chips button i { margin-left: 4px; padding: 1px 6px; } } /* ═══════════════════════════════════════════════════════════ v14: Mi cuenta · Carrito · Checkout · Gracias (diseño propio) ═══════════════════════════════════════════════════════════ */ .mbfit-btn--block { display: flex; width: 100%; justify-content: center; align-items: center; gap: 10px; text-align: center; } .mbfit-btn:disabled { opacity: .6; cursor: progress; transform: none; box-shadow: none; } .mbfit-header__icon.is-logged::after { content: ""; position: absolute; right: -1px; bottom: 1px; width: 10px; height: 10px; border-radius: 50%; background: #3DD68C; border: 2px solid var(--mb-navy); } .mbfit-spin { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--mb-lavender-2); border-top-color: var(--mb-orange); animation: mbSpin 800ms linear infinite; } @keyframes mbSpin { to { transform: rotate(360deg); } } .mbfit-acc__loading { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 40vh; color: var(--mb-ink-mute); font-weight: 600; } /* ── Estructura de páginas de compra ── */ .mbfit-shop { background: var(--mb-paper); padding-block: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-9); min-height: 70vh; } .mbfit-shop__head { display: grid; justify-items: center; gap: var(--space-5); margin-bottom: var(--space-7); } .mbfit-shop__head h1 { color: var(--mb-orange); } .mbfit-steps { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } .mbfit-steps li { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--text-sm); color: var(--mb-ink-mute); } .mbfit-steps li span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--mb-lavender-2); color: var(--mb-ink-mute); font-weight: 800; } .mbfit-steps li + li::before { content: ""; width: clamp(24px, 6vw, 64px); height: 2px; background: var(--mb-lavender-2); margin-inline: 12px; } .mbfit-steps li.is-current { color: var(--mb-navy); } .mbfit-steps li.is-current span { background: var(--mb-orange); border-color: var(--mb-orange); color: #fff; box-shadow: 0 0 0 5px rgba(255,108,14,.16); } .mbfit-steps li.is-done span { background: var(--mb-navy); border-color: var(--mb-navy); color: #fff; } .mbfit-steps li.is-done + li::before, .mbfit-steps li.is-current + li:not(.is-current)::before { background: var(--mb-lavender-2); } /* ── Carrito ── */ .mbfit-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-6); align-items: start; } .mbfit-cartlist { display: grid; gap: var(--space-4); } .mbfit-citem { display: grid; grid-template-columns: 96px 1fr auto; gap: var(--space-5); align-items: center; background: #fff; border-radius: 24px; padding: var(--space-4); box-shadow: 0 8px 28px rgba(67,83,102,.08); border: 1px solid var(--mb-line); } .mbfit-citem__img { width: 96px; height: 96px; border-radius: 18px; object-fit: cover; background: var(--mb-lavender); } .mbfit-citem__body { display: grid; gap: 4px; justify-items: start; min-width: 0; } .mbfit-citem__body h3 { font-size: 1.15rem; color: var(--mb-navy); } .mbfit-citem__body p { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-citem__price { text-align: right; font-size: 1.35rem; color: var(--mb-orange-2); padding-right: var(--space-3); } .mbfit-citem__price .mbfit-price-old { display: block; font-size: .85rem; } .mbfit-cartback { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-top: var(--space-2); font-weight: 700; color: var(--mb-navy); font-size: var(--text-sm); } .mbfit-cartback:hover { color: var(--mb-orange); } .mbfit-sumcard { background: #fff; border-radius: 26px; padding: var(--space-6); box-shadow: 0 14px 40px rgba(67,83,102,.12); border: 1px solid var(--mb-line); display: grid; gap: var(--space-4); position: sticky; top: 110px; } .mbfit-sumcard h2 { font-family: var(--font-body); font-weight: 800; font-size: 1.25rem; color: var(--mb-navy); } .mbfit-sumrows { display: grid; gap: 10px; margin: 0; } .mbfit-sumrows > div { display: flex; justify-content: space-between; gap: var(--space-3); } .mbfit-sumrows dt { color: var(--mb-ink-mute); } .mbfit-sumrows dd { margin: 0; font-weight: 700; color: var(--mb-navy); } .mbfit-sumrows .is-disc dd { color: #1d9b63; } .mbfit-sumrows .is-total { padding-top: 14px; border-top: 1px dashed var(--mb-lavender-2); font-size: 1.3rem; } .mbfit-sumrows .is-total dt { color: var(--mb-navy); font-weight: 800; } .mbfit-sumrows .is-total dd { color: var(--mb-orange-2); font-weight: 900; } .mbfit-sumnote { font-size: .78rem; color: var(--mb-ink-mute); margin-top: -4px; } .mbfit-coupon { display: grid; gap: 10px; } .mbfit-coupon__toggle { justify-self: start; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(67,83,102,.35); cursor: pointer; } .mbfit-coupon__toggle:hover { color: var(--mb-orange); } .mbfit-coupon__form { display: flex; gap: 8px; } .mbfit-coupon__form[hidden] { display: none; } .mbfit-coupon__form input { flex: 1; min-width: 0; font: inherit; padding: 12px 14px; border: 1.5px solid var(--mb-line); border-radius: var(--radius-sm); } .mbfit-coupon__form input:focus { outline: none; border-color: var(--mb-orange); box-shadow: 0 0 0 3px rgba(255,108,14,.18); } .mbfit-coupon__form .mbfit-btn { padding: 10px 18px; } .mbfit-coupon__msg { font-size: var(--text-sm); font-weight: 600; } .mbfit-coupon__msg.is-error { color: #b3261e; } .mbfit-coupon.is-applied { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .mbfit-coupon__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(29,155,99,.12); color: #157a4d; font-weight: 800; font-size: var(--text-sm); } .mbfit-trust { display: grid; gap: 10px; padding-top: var(--space-4); border-top: 1px solid var(--mb-line); } .mbfit-trust li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); color: var(--mb-ink); line-height: 1.4; } .mbfit-trust svg { flex: none; color: var(--mb-orange); margin-top: 1px; } .mbfit-trust a { color: var(--mb-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .mbfit-cempty { max-width: 560px; margin: var(--space-6) auto 0; text-align: center; display: grid; gap: var(--space-4); justify-items: center; background: #fff; border-radius: 28px; padding: var(--space-8) var(--space-6); box-shadow: 0 14px 40px rgba(67,83,102,.1); } .mbfit-cempty img { opacity: .9; } .mbfit-cempty h2 { color: var(--mb-navy); font-size: clamp(1.8rem, 4vw, 2.4rem); } .mbfit-cempty p { color: var(--mb-ink-mute); } .mbfit-cempty__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); } /* ── Formularios ── */ .mbfit-field { display: grid; gap: 6px; } .mbfit-field label { font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); } .mbfit-field label em { font-style: normal; font-weight: 500; color: var(--mb-ink-mute); } .mbfit-field small { color: var(--mb-ink-mute); font-size: .78rem; } .mbfit-field input, .mbfit-field textarea { width: 100%; font: inherit; padding: 14px 16px; border: 1.5px solid var(--mb-line); border-radius: var(--radius-sm); background: #fff; color: var(--mb-ink); transition: border-color 180ms, box-shadow 180ms; } .mbfit-field input:focus, .mbfit-field textarea:focus { outline: none; border-color: var(--mb-orange); box-shadow: 0 0 0 3px rgba(255,108,14,.18); } .mbfit-field input[readonly] { background: var(--mb-paper); color: var(--mb-ink-mute); } .mbfit-field input:user-invalid { border-color: #b3261e; } .mbfit-field textarea { resize: vertical; } .mbfit-pw { position: relative; } .mbfit-pw input { padding-right: 52px; } .mbfit-pw__btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; border-radius: 10px; color: var(--mb-ink-mute); display: grid; place-items: center; } .mbfit-pw__btn:hover, .mbfit-pw__btn.is-on { color: var(--mb-orange); } .mbfit-aform__two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .mbfit-check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-sm); color: var(--mb-ink); line-height: 1.45; cursor: pointer; } .mbfit-check input { flex: none; appearance: none; width: 22px; height: 22px; margin: 0; border: 2px solid var(--mb-lavender-2); border-radius: 7px; background: #fff; display: grid; place-content: center; transition: background 160ms, border-color 160ms; cursor: pointer; } .mbfit-check input::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -2px; transition: transform 160ms var(--ease-spring); } .mbfit-check input:checked { background: var(--mb-orange); border-color: var(--mb-orange); } .mbfit-check input:checked::after { transform: rotate(-45deg) scale(1); } .mbfit-check input:focus-visible { outline: 2px solid var(--mb-navy); outline-offset: 2px; } .mbfit-check a { color: var(--mb-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .mbfit-alert { padding: 14px 18px; border-radius: var(--radius-sm); font-weight: 600; font-size: var(--text-sm); line-height: 1.4; } .mbfit-alert[hidden] { display: none; } .mbfit-alert--error { background: #fdecea; color: #a4231b; border: 1px solid #f5c2be; } .mbfit-alert--error a { color: inherit; font-weight: 800; text-decoration: underline; } .mbfit-alert--ok { background: rgba(29,155,99,.1); color: #157a4d; border: 1px solid rgba(29,155,99,.3); } .mbfit-meter { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 6px; align-items: center; margin-top: -6px; } .mbfit-meter i { height: 5px; border-radius: 3px; background: var(--mb-lavender); transition: background 200ms; } .mbfit-meter span { font-size: .75rem; font-weight: 700; color: var(--mb-ink-mute); min-width: 42px; text-align: right; } .mbfit-meter[data-level="1"] i:nth-child(-n+1) { background: #e5484d; } .mbfit-meter[data-level="2"] i:nth-child(-n+2) { background: #f5a524; } .mbfit-meter[data-level="3"] i:nth-child(-n+3) { background: #1d9b63; } /* ── Checkout ── */ .mbfit-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-6); align-items: start; } .mbfit-cform { display: grid; gap: var(--space-5); counter-reset: step; } .mbfit-card { border: 1px solid var(--mb-line); border-radius: 24px; background: #fff; padding: var(--space-6); margin: 0; display: grid; gap: var(--space-4); box-shadow: 0 8px 28px rgba(67,83,102,.07); min-width: 0; } .mbfit-card[hidden] { display: none; } .mbfit-card legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-2); font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; color: var(--mb-navy); display: flex; align-items: center; gap: 12px; } .mbfit-card legend::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; border-radius: 50%; background: var(--mb-orange); color: #fff; display: grid; place-items: center; font-size: .95rem; } .mbfit-card > legend + * { clear: both; } .mbfit-card__lead { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-card__lead a { color: var(--mb-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .mbfit-logged { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(29,155,99,.1); color: #157a4d; font-size: var(--text-sm); font-weight: 600; } .mbfit-logged[hidden] { display: none; } .mbfit-cform__pay { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; color: var(--mb-ink-mute); font-size: var(--text-sm); font-weight: 600; } .mbfit-cform__pay .mbfit-getnet { height: 62px; width: auto; } .mbfit-cform__pay b { font-weight: 900; color: var(--mb-navy); } .mbfit-cform .mbfit-form__hint { text-align: center; } .mbfit-checkout .mbfit-sumcard h2 { font-size: 1.25rem; } .mbfit-sitem { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; } .mbfit-sitem img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: var(--mb-lavender); } .mbfit-sitem strong { display: block; color: var(--mb-navy); line-height: 1.25; } .mbfit-sitem span { color: var(--mb-ink-mute); font-size: .8rem; } .mbfit-sitem b { color: var(--mb-navy); } /* ── Mi cuenta: acceso ── */ .mbfit-acc { background: var(--mb-paper); min-height: 70vh; } .mbfit-auth { padding-block: clamp(var(--space-6), 6vw, var(--space-9)); } .mbfit-auth__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0; border-radius: 32px; overflow: hidden; box-shadow: 0 30px 70px rgba(67,83,102,.18); padding: 0; max-width: 1080px; background: #fff; } .mbfit-auth__brand { position: relative; overflow: hidden; background: var(--mb-navy); color: #fff; padding: clamp(28px, 4vw, 56px); display: grid; gap: var(--space-5); align-content: center; } .mbfit-auth__brand::before { content: ""; position: absolute; right: -14%; bottom: -10%; width: 80%; aspect-ratio: 1; background: rgba(255,255,255,.06); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; pointer-events: none; } .mbfit-auth__brand > * { position: relative; } .mbfit-auth__brand h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; } .mbfit-auth__brand h1 em { font-style: normal; color: var(--mb-yellow); display: block; } .mbfit-auth__lead { color: rgba(255,255,255,.82); line-height: 1.6; max-width: 38ch; } .mbfit-auth__ben { display: grid; gap: var(--space-4); margin-top: var(--space-2); } .mbfit-auth__ben li { display: flex; gap: 14px; align-items: flex-start; } .mbfit-auth__ben li > span { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: var(--mb-yellow); } .mbfit-auth__ben strong { display: block; color: #fff; } .mbfit-auth__ben p { color: rgba(255,255,255,.72); font-size: var(--text-sm); line-height: 1.4; } .mbfit-auth__card { padding: clamp(24px, 4vw, 56px); display: grid; gap: var(--space-5); align-content: center; background: var(--mb-lavender); } .mbfit-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; border-radius: var(--radius-pill); background: rgba(255,255,255,.65); } .mbfit-auth__tabs[hidden] { display: none; } .mbfit-auth__tabs button { border: 0; padding: 12px 10px; border-radius: var(--radius-pill); background: transparent; font: inherit; font-weight: 800; color: var(--mb-navy); transition: background 200ms, color 200ms, box-shadow 200ms; } .mbfit-auth__tabs button.is-active { background: var(--mb-orange); color: #fff; box-shadow: 0 8px 18px rgba(255,108,14,.32); } .mbfit-auth__tabs button:not(.is-active):hover { background: rgba(255,255,255,.9); } .mbfit-aform { display: grid; gap: var(--space-4); } .mbfit-aform[hidden] { display: none; } .mbfit-aform h2 { font-family: var(--font-body); font-weight: 800; font-size: 1.5rem; color: var(--mb-navy); } .mbfit-aform__lead { color: var(--mb-ink-mute); margin-top: -8px; } .mbfit-aform__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .mbfit-aform__alt { text-align: center; color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-aform--card { background: #fff; border: 1px solid var(--mb-line); border-radius: 24px; padding: var(--space-6); box-shadow: 0 8px 28px rgba(67,83,102,.07); max-width: 640px; } .mbfit-aform--card + .mbfit-aform--card { margin-top: var(--space-5); } .mbfit-aform--card .mbfit-btn { justify-self: start; } .mbfit-pwbox h3 { font-family: var(--font-body); font-weight: 800; color: var(--mb-navy); } .mbfit-pwbox p { color: var(--mb-ink-mute); font-size: var(--text-sm); } /* ── Mi cuenta: escritorio ── */ .mbfit-dash { padding-block: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-9); } .mbfit-dash__grid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: var(--space-6); align-items: start; } .mbfit-dash__nav { position: sticky; top: 110px; background: var(--mb-navy); color: #fff; border-radius: 26px; padding: var(--space-5); display: grid; gap: var(--space-5); box-shadow: 0 20px 50px rgba(67,83,102,.25); } .mbfit-dash__user { display: flex; gap: 12px; align-items: center; padding-bottom: var(--space-4); border-bottom: 1px solid rgba(255,255,255,.14); min-width: 0; } .mbfit-dash__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mb-orange); color: #fff; display: grid; place-items: center; font-weight: 900; } .mbfit-dash__user > div { min-width: 0; } .mbfit-dash__user strong { display: block; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbfit-dash__user small { display: block; color: rgba(255,255,255,.65); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mbfit-dash__nav nav { display: grid; gap: 4px; } .mbfit-dash__nav nav a, .mbfit-dash__nav nav button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 0; background: none; color: rgba(255,255,255,.85); font: inherit; font-weight: 700; text-align: left; cursor: pointer; transition: background 180ms, color 180ms; } .mbfit-dash__nav nav a:hover, .mbfit-dash__nav nav button:hover { background: rgba(255,255,255,.1); color: #fff; } .mbfit-dash__nav nav a.is-active { background: #fff; color: var(--mb-navy); } .mbfit-dash__nav nav button { margin-top: var(--space-2); color: var(--mb-yellow); } .mbfit-dash__main { min-width: 0; } .mbfit-dash__hello { color: var(--mb-orange); font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.05; } .mbfit-dash__lead { color: var(--mb-ink); margin: var(--space-3) 0 var(--space-6); max-width: 60ch; } .mbfit-dash__title { color: var(--mb-navy); font-size: clamp(1.9rem, 3.6vw, 2.6rem); margin-bottom: var(--space-5); } .mbfit-dash__h { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; color: var(--mb-navy); margin-bottom: var(--space-3); } .mbfit-planlist { display: grid; gap: var(--space-4); } .mbfit-plancard { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-5); align-items: center; background: #fff; border-radius: 24px; padding: var(--space-4); border: 1px solid var(--mb-line); box-shadow: 0 8px 28px rgba(67,83,102,.08); } .mbfit-plancard img { width: 120px; height: 120px; border-radius: 18px; object-fit: cover; background: var(--mb-lavender); } .mbfit-plancard h3 { font-size: 1.35rem; color: var(--mb-navy); margin: 6px 0 2px; } .mbfit-plancard p { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-plancard__actions { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); } .mbfit-plancard.is-big { grid-template-columns: 180px 1fr; background: linear-gradient(135deg, #fff 0%, var(--mb-lavender) 100%); } .mbfit-plancard.is-big img { width: 180px; height: 180px; } .mbfit-status { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 800; letter-spacing: .03em; } .mbfit-status--ok { background: rgba(29,155,99,.14); color: #157a4d; } .mbfit-status--warn { background: rgba(245,165,36,.18); color: #9a6200; } .mbfit-status--info { background: rgba(67,83,102,.12); color: var(--mb-navy); } .mbfit-status--off { background: rgba(179,38,30,.1); color: #a4231b; } .mbfit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin-top: var(--space-6); } .mbfit-stats a { background: #fff; border-radius: 20px; padding: var(--space-5); border: 1px solid var(--mb-line); display: grid; gap: 2px; transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out); } .mbfit-stats a:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(67,83,102,.14); } .mbfit-stats b { font-family: var(--font-display); font-weight: 400; font-size: 2.4rem; color: var(--mb-orange); line-height: 1; } .mbfit-stats span { color: var(--mb-ink-mute); font-weight: 600; font-size: var(--text-sm); } .mbfit-alert { display: flex; } .mbfit-alert > div { display: grid; } .mbfit-dash .mbfit-alert:not(.mbfit-alert--ok):not(.mbfit-alert--error) { justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: rgba(245,165,36,.14); border: 1px solid rgba(245,165,36,.4); color: #7a4b00; margin-bottom: var(--space-5); } .mbfit-orders { display: grid; gap: var(--space-4); } .mbfit-order { background: #fff; border: 1px solid var(--mb-line); border-radius: 22px; padding: var(--space-5); display: grid; gap: 10px; box-shadow: 0 8px 28px rgba(67,83,102,.06); } .mbfit-order__head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; } .mbfit-order__head span:nth-child(2) { color: var(--mb-ink-mute); font-size: var(--text-sm); flex: 1; } .mbfit-order__items { color: var(--mb-ink); } .mbfit-order__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } .mbfit-order__foot b { font-size: 1.2rem; color: var(--mb-orange-2); } .mbfit-order__foot .mbfit-btn { padding: 10px 22px; } .mbfit-accempty { text-align: center; display: grid; gap: 10px; justify-items: center; background: #fff; border: 1px dashed var(--mb-lavender-2); border-radius: 24px; padding: var(--space-7) var(--space-5); } .mbfit-accempty img { opacity: .85; } .mbfit-accempty h3 { font-family: var(--font-body); font-weight: 800; color: var(--mb-navy); font-size: 1.2rem; } .mbfit-accempty p { color: var(--mb-ink-mute); max-width: 42ch; } .mbfit-accempty__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); } /* ── Gracias ── */ .mbfit-thanks__card { max-width: 720px; margin-inline: auto; background: #fff; border-radius: 32px; padding: clamp(28px, 5vw, 56px); text-align: center; display: grid; gap: var(--space-4); justify-items: center; box-shadow: 0 30px 70px rgba(67,83,102,.16); } .mbfit-thanks__check { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: #1d9b63; color: #fff; box-shadow: 0 0 0 10px rgba(29,155,99,.15); animation: popIn 500ms var(--ease-spring) both; } .mbfit-thanks h1 { color: var(--mb-orange); font-size: clamp(2.2rem, 5vw, 3.4rem); } .mbfit-thanks__lead { color: var(--mb-ink-mute); } .mbfit-thanks__steps { display: grid; gap: var(--space-4); text-align: left; margin: var(--space-3) 0; width: 100%; max-width: 520px; list-style: none; padding: 0; } .mbfit-thanks__steps li { display: flex; gap: 16px; align-items: flex-start; } .mbfit-thanks__steps b { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--mb-lavender); color: var(--mb-navy); display: grid; place-items: center; } .mbfit-thanks__steps strong { display: block; color: var(--mb-navy); } .mbfit-thanks__steps span { color: var(--mb-ink-mute); font-size: var(--text-sm); } .mbfit-thanks__cta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } @media (max-width: 960px) { .mbfit-cartpage, .mbfit-checkout { grid-template-columns: 1fr; } .mbfit-sumcard { position: static; } .mbfit-checkout .mbfit-sumcard { order: -1; } .mbfit-auth__grid { grid-template-columns: 1fr; border-radius: 26px; } .mbfit-auth__brand { padding-block: var(--space-6); } .mbfit-auth__ben { display: none; } .mbfit-dash__grid { grid-template-columns: 1fr; gap: var(--space-5); } .mbfit-dash__nav { position: static; padding: var(--space-4); border-radius: 22px; } .mbfit-dash__nav nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; } .mbfit-dash__nav nav::-webkit-scrollbar { display: none; } .mbfit-dash__nav nav a, .mbfit-dash__nav nav button { flex: none; white-space: nowrap; padding: 10px 14px; margin: 0; } } @media (max-width: 640px) { .mbfit-steps li:not(.is-current) { font-size: 0; gap: 0; } .mbfit-steps li:not(.is-current) span { font-size: var(--text-sm); } .mbfit-steps li.is-current { font-size: var(--text-sm); } .mbfit-steps li + li::before { width: 22px; margin-inline: 8px; } .mbfit-citem { grid-template-columns: 72px 1fr; gap: var(--space-4); } .mbfit-citem__img { width: 72px; height: 72px; border-radius: 14px; } .mbfit-citem__price { grid-column: 1 / -1; text-align: left; padding: 0; display: flex; align-items: baseline; gap: 10px; } .mbfit-aform__two { grid-template-columns: 1fr; } .mbfit-card, .mbfit-sumcard { padding: var(--space-5); } .mbfit-plancard, .mbfit-plancard.is-big { grid-template-columns: 84px 1fr; gap: var(--space-4); } .mbfit-plancard img, .mbfit-plancard.is-big img { width: 84px; height: 84px; border-radius: 14px; } .mbfit-stats { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2); } .mbfit-stats a { padding: var(--space-4) var(--space-3); } .mbfit-stats b { font-size: 1.9rem; } .mbfit-thanks__cta .mbfit-btn { width: 100%; } } .mbfit-acc [hidden], .mbfit-shop [hidden] { display: none !important; } .mbfit-coupon__chip { text-transform: uppercase; letter-spacing: .03em; } @media (max-width: 960px) { .mbfit-checkout .mbfit-trust { display: none; } } body[data-page="cuenta"] .mbfit-rpop, body[data-page="carrito"] .mbfit-rpop, body[data-page="checkout"] .mbfit-rpop, body[data-page="gracias"] .mbfit-rpop { display: none !important; } /* ═══════════════════════════════════════════════════════════ v15: /bio — link en bio (Instagram y redes) ═══════════════════════════════════════════════════════════ */ body[data-page="bio"] { background: var(--mb-paper); } .mbfit-bio { position: relative; min-height: 100vh; overflow: hidden; padding: clamp(28px, 6vw, 56px) 0 var(--space-7); } .mbfit-bio__bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px 420px at 92% 6%, rgba(255,108,14,.16), transparent 70%), radial-gradient(560px 460px at 6% 40%, rgba(201,189,235,.55), transparent 70%), linear-gradient(180deg, #F7F5FB 0%, #ECE8F6 100%); } .mbfit-bio__bg::after { content: ""; position: absolute; right: -18%; bottom: -8%; width: min(70vw, 460px); aspect-ratio: 1; background: rgba(67,83,102,.05); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; } .mbfit-bio__wrap { position: relative; z-index: 1; width: min(100% - 40px, 480px); margin-inline: auto; display: grid; gap: var(--space-4); } .mbfit-bio__wrap > *, .mbfit-bio__links > * { animation: bioIn 620ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); } @keyframes bioIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .mbfit-bio__head { display: grid; justify-items: center; gap: 6px; text-align: center; margin-bottom: var(--space-2); } .mbfit-bio__avatar { width: 116px; height: 116px; border-radius: 50%; padding: 4px; background: conic-gradient(from 200deg, var(--mb-orange), var(--mb-yellow), var(--mb-orange)); box-shadow: 0 14px 34px rgba(255,108,14,.28); display: block; } .mbfit-bio__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 4px solid #fff; display: block; background: var(--mb-lavender); } .mbfit-bio__head h1 { font-size: 2.3rem; color: var(--mb-navy); margin-top: var(--space-3); } .mbfit-bio__tag { color: var(--mb-ink-mute); font-weight: 600; font-size: .95rem; text-align: center; } .mbfit-bio__tag span { display: block; } .mbfit-bio__rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 14px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 6px 18px rgba(67,83,102,.12); font-size: .82rem; color: var(--mb-ink); } .mbfit-bio__rating .mbfit-g { width: 16px; height: 16px; } .mbfit-bio__rating strong { color: var(--mb-navy); } .mbfit-bio__hero { position: relative; display: grid; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-4); border-radius: 26px; background: var(--mb-navy); color: #fff; box-shadow: 0 22px 50px rgba(67,83,102,.32); overflow: hidden; transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); } .mbfit-bio__hero:hover { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(67,83,102,.4); } .mbfit-bio__heroimg { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; background: #000; } .mbfit-bio__heroimg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; transition: transform 600ms var(--ease-out); } .mbfit-bio__hero:hover .mbfit-bio__heroimg img { transform: scale(1.04); } .mbfit-bio__badge { position: absolute; left: 22px; top: 22px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--mb-yellow); color: var(--mb-navy-2); font-weight: 800; font-size: .74rem; letter-spacing: .03em; box-shadow: 0 6px 14px rgba(0,0,0,.25); } .mbfit-bio__herotx { display: grid; gap: 2px; padding-inline: var(--space-2); } .mbfit-bio__herotx strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; } .mbfit-bio__herotx small { color: var(--mb-yellow); font-weight: 700; font-size: .88rem; } .mbfit-bio__hero .mbfit-btn { margin-inline: var(--space-2); width: auto; animation: bioPulse 2.6s ease-in-out infinite; } @keyframes bioPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,108,14,.5); } 60% { box-shadow: 0 0 0 12px rgba(255,108,14,0); } } .mbfit-bio__links { display: grid; gap: var(--space-3); } .mbfit-bio__link { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--mb-line); box-shadow: 0 8px 22px rgba(67,83,102,.08); color: var(--mb-navy); transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 220ms; } a.mbfit-bio__link:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(67,83,102,.16); border-color: var(--mb-orange); } a.mbfit-bio__link:active { transform: scale(.98); transition-duration: 90ms; } a.mbfit-bio__link:focus-visible, .mbfit-bio__hero:focus-visible { outline: 3px solid var(--mb-orange); outline-offset: 3px; } .mbfit-bio__ic { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--mb-yellow); color: var(--mb-navy); } .mbfit-bio__tx { display: grid; min-width: 0; flex: 1; line-height: 1.25; } .mbfit-bio__tx strong { font-size: 1.02rem; } .mbfit-bio__tx small { color: var(--mb-ink-mute); font-size: .82rem; font-weight: 500; } .mbfit-bio__ar { color: var(--mb-ink-mute); flex: none; transition: transform 220ms var(--ease-out), color 220ms; } a.mbfit-bio__link:hover .mbfit-bio__ar { transform: translateX(4px); color: var(--mb-orange); } .mbfit-bio__link.is-wa .mbfit-bio__ic { background: #25D366; color: #fff; } .mbfit-bio__link.is-soon { opacity: .75; background: rgba(255,255,255,.6); box-shadow: none; } .mbfit-bio__link.is-soon .mbfit-bio__ic { background: var(--mb-lavender); } .mbfit-bio__link.is-soon em { flex: none; font-style: normal; font-weight: 800; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--mb-orange); color: #fff; } .mbfit-bio__video { display: grid; gap: 8px; padding: 12px; border-radius: 22px; background: #fff; border: 1px solid var(--mb-line); box-shadow: 0 8px 22px rgba(67,83,102,.08); } .mbfit-bio__video p { font-weight: 800; color: var(--mb-navy); padding-inline: 4px; } .mbfit-bio__video .mbfit-yt__frame { border-radius: 14px; } .mbfit-bio__social { justify-content: center; display: flex; gap: var(--space-3); margin-top: var(--space-3); } .mbfit-bio__social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--mb-navy); color: #fff; transition: background 200ms, transform 200ms var(--ease-out); } .mbfit-bio__social a:hover { background: var(--mb-orange); transform: translateY(-3px); } .mbfit-bio__foot { text-align: center; color: var(--mb-ink-mute); font-size: .78rem; display: grid; gap: 4px; margin-top: var(--space-3); } .mbfit-bio__foot a { color: var(--mb-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 3px; } .mbfit-bio__foot a svg { color: var(--mb-orange); } /* Conectémos (hero): título completo en una línea en escritorio; en móvil, título arriba y el resto abajo para no tapar la cara */ .mbfit-chero__text { max-width: min(880px, 100%); } .mbfit-chero__title { white-space: nowrap; font-size: clamp(2.2rem, 4.2vw, 3.7rem); } .mbfit-chero__lead { max-width: 620px; } @media (max-width: 800px) { .mbfit-chero { min-height: 780px; align-items: stretch; } .mbfit-chero__bg { background: linear-gradient(180deg, rgba(38,48,62,.78) 0%, rgba(38,48,62,.5) 22%, rgba(38,48,62,0) 44%, rgba(38,48,62,0) 68%, rgba(38,48,62,.8) 100%), url(assets/img/conectemos/hero-conectemos.webp) 30% center / cover no-repeat; } .mbfit-chero__inner { padding-block: var(--space-6) var(--space-7); } .mbfit-chero__text { align-self: stretch; } .mbfit-chero__title { font-size: clamp(1.5rem, 7vw, 2.5rem); } .mbfit-chero__lead { font-size: clamp(1.25rem, 5.4vw, 1.75rem); } .mbfit-chero__q { margin-top: auto; } } /* ═══ v16: hero de Tú mejor proyecto con la foto del periódico (comparar con ?hero=oscuro) ═══ */ .mbfit-thero2 { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: min(82vh, 720px); background: #8d8c8a; overflow: hidden; } .mbfit-thero2__photo { position: relative; min-height: 100%; } .mbfit-thero2__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; } .mbfit-thero2__panel { position: relative; z-index: 1; display: flex; align-items: center; background: linear-gradient(160deg, #E6E0F6 0%, #D9D2F0 100%); margin-left: -48px; border-radius: 48px 0 0 48px; padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 80px) clamp(36px, 5vw, 72px) clamp(56px, 6vw, 96px); overflow: hidden; box-shadow: -24px 0 60px rgba(43,52,64,.18); } .mbfit-thero2__panel::before { content: ""; position: absolute; right: -8%; bottom: -12%; width: min(60%, 420px); aspect-ratio: 1; background: rgba(255,255,255,.35); -webkit-mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; mask: url(assets/img/isotipo-positivo.png) center/contain no-repeat; pointer-events: none; } .mbfit-thero2__inner { position: relative; display: grid; gap: var(--space-4); justify-items: start; max-width: 520px; } .mbfit-thero2__kicker { font-size: var(--text-sm); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mb-orange-2); } .mbfit-thero2 h1 { font-size: clamp(2.8rem, 5.4vw, 5rem); line-height: .98; color: var(--mb-navy); } .mbfit-thero2 h1 em { font-style: normal; color: var(--mb-orange); display: block; } .mbfit-thero2__lead { font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.45; font-weight: 600; color: var(--mb-navy); max-width: 34ch; } .mbfit-thero2__chips { display: flex; flex-wrap: wrap; gap: 8px; } .mbfit-thero2__chips li { padding: 6px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; color: var(--mb-navy); background: rgba(255,255,255,.7); border: 1px solid rgba(67,83,102,.15); } .mbfit-thero2__chips li:last-child { background: var(--mb-yellow); border-color: var(--mb-yellow); } .mbfit-thero2__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-2); } .mbfit-thero2__more { font-weight: 700; font-size: var(--text-sm); color: var(--mb-navy); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(67,83,102,.4); } .mbfit-thero2__more:hover { color: var(--mb-orange); } @media (max-width: 899px) { .mbfit-thero2 { grid-template-columns: 1fr; min-height: 0; } .mbfit-thero2__photo { aspect-ratio: 4 / 3.2; min-height: 0; } .mbfit-thero2__photo img { object-position: 50% 25%; } .mbfit-thero2__panel { margin: -36px 0 0; border-radius: 36px 36px 0 0; padding: var(--space-6) var(--space-5) var(--space-7); box-shadow: 0 -18px 40px rgba(43,52,64,.16); } } /* Instagram (Behold): el widget reemplaza a las 6 fotos de respaldo cuando carga */ .mbfit-ig__widget { max-width: 1120px; margin-inline: auto; } .mbfit-ig__widget behold-widget { display: block; } .mbfit-ig__widget behold-widget:defined + .mbfit-ig__fallback { display: none; }