/* ============================================================ MEGAFEAST — main.css v2 Identidad: Tambo-style (blanco, negro, rojo) - Claro, comercial, alto contraste - Cards de producto blancas con borde sutil - Categorías como círculos con color de fondo - Tipografía grotesca moderna ============================================================ */ :root { /* Paleta */ --mf-red: #ff3131; --mf-red-2: #d92525; --mf-red-3: #ffe5e5; --mf-ink: #1a1a1a; --mf-ink-2: #4a4a4a; --mf-mute: #8a8a8a; --mf-line: #ececec; --mf-line-2: #d4d4d4; --mf-bg: #ffffff; --mf-bg-2: #fafafa; --mf-bg-3: #f4f4f4; --mf-yellow: var(--mf-red); --mf-discount: #ff3b6b; --mf-success: #1ba672; /* Tipografía */ --mf-sans: 'Zain', system-ui, -apple-system, sans-serif; --mf-display: 'Zain', system-ui, sans-serif; --mf-mono: 'IBM Plex Mono', monospace; --mf-radius: 8px; --mf-radius-lg: 12px; --mf-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); --mf-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; /* Safety net: garantiza que el fondo blanco cubra el viewport completo, incluso si el body no llega a 100% por algún motivo (contenido muy corto, error de JS, etc.). Así, cuando una página tiene poco contenido, la pantalla se ve blanca hasta el final y el footer queda empujado hacia abajo, fuera de la vista inicial. */ background: var(--mf-bg); } body { font-family: var(--mf-sans); font-size: 14px; line-height: 1.5; color: var(--mf-ink); background: var(--mf-bg); min-height: 100vh; /* fallback para navegadores sin soporte dvh */ min-height: 100dvh; /* viewport dinámico: en mobile ignora la barra de URL, así no hay "saltos" al hacer scroll y el footer se mantiene fuera de la vista cuando hay poco contenido. */ font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; scrollbar-width: none; -ms-overflow-style: none; display: flex; flex-direction: column; } /* Sticky footer: con body en flex/column y .mf-main-content en flex:1 + min-height:100dvh, el main SIEMPRE ocupa al menos la altura completa del viewport, empujando al fuera de la vista inicial. Esto es importante en mobile donde el footer (apilado a 1 columna) es muy alto y junto con el contenido del main puede exceder la pantalla; sin este min-height, el footer aparece "a mitad" del viewport en lugar de quedar abajo, fuera de vista hasta hacer scroll. */ .mf-main-content { flex: 1 0 auto; min-height: 100vh; /* fallback para navegadores sin dvh */ min-height: 100dvh; /* viewport dinámico (mobile): ignora la barra de URL y mantiene el footer fuera de la vista inicial aunque la suma header+contenido+footer exceda la pantalla. */ } mf-header, mf-footer { display: block; } /* Páginas "bare" (sin chrome): en mobile/tablet ocultan el header y el footer porque la navegación ya se hace por la menubar inferior fija. La página se ve más limpia y enfocada en su contenido (útil para perfil, login, registro, mis-pedidos, etc.). En desktop se mantiene el header+footer normal. Se activa con `class="mf-page-bare"` en el . */ @media (max-width: 1080px) { body.mf-page-bare mf-header, body.mf-page-bare mf-footer { display: none; } /* Sin header ni footer no hay nada que "empujar" fuera del viewport, así que el body y el main deben quedar al tamaño EXACTO de su contenido. Si dejáramos el min-height:100dvh del main, se crearía un hueco vacío al final que el usuario podría deslizar sin haber nada que ver. El fondo blanco del cubre el espacio sobrante entre el final del contenido y la menubar fija, manteniendo el look limpio. */ body.mf-page-bare { min-height: auto; } body.mf-page-bare .mf-main-content { min-height: auto; flex: 0 0 auto; /* No crecer: el main termina justo donde termina su contenido, sin hueco. */ } } /* ============================================================ SUBHEAD — back link + título para subpáginas. Patrón compartido: perfil, mis-pedidos, checkout, etc. Estructura HTML:

← VUELTA

Texto acento

Subtítulo opcional

============================================================ */ .mf-subhead { max-width: 720px; margin: 0 auto; padding: calc(1rem + env(safe-area-inset-top)) 1.25rem 0.5rem; } .mf-subhead__back { display: inline-flex; align-items: center; gap: 0.25rem; font-family: var(--mf-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--mf-mute); text-decoration: none; text-transform: uppercase; padding: 0.4rem 0.6rem 0.4rem 0.3rem; margin-left: -0.3rem; border-radius: 8px; transition: color 0.12s, background 0.12s; } .mf-subhead__back:hover { color: var(--mf-red); background: var(--mf-bg-3); } .mf-subhead__back svg { width: 18px; height: 18px; } .mf-subhead__title { font-family: var(--mf-display); font-size: 1.85rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; color: var(--mf-ink); margin: 0.75rem 0 0.5rem; } .mf-subhead__title em { font-style: normal; color: var(--mf-red); } .mf-subhead__sub { color: var(--mf-ink-2); font-size: 14px; margin: 0 0 1rem; line-height: 1.5; max-width: 520px; } @media (min-width: 640px) { .mf-subhead { padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem 0.5rem; } .mf-subhead__title { font-size: 2.1rem; } } @media (min-width: 900px) { .mf-subhead { padding-top: calc(2rem + env(safe-area-inset-top)); padding-left: 1.5rem; padding-right: 1.5rem; } } /* ============================================================ Menubar — animación de hover Solo el icono/label del item hace un pequeño slide al pasar el mouse. El menubar queda fijo en su sitio, no se mueve. ============================================================ */ .mf-menubar__item { position: relative; overflow: visible; } .mf-menubar__icon, .mf-menubar__label { transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), color 180ms ease, opacity 180ms ease; will-change: transform; } /* El item activo tiene un micro-slide permanente para dar feedback visual coherente con el hover (mouse). En touch no se nota porque queda dentro del pill oscuro. */ .mf-menubar__item.is-active .mf-menubar__icon { transform: translateY(-2px); } /* El :hover con translate solo aplica cuando el dispositivo tiene puntero real (mouse/trackpad). En touch el :hover queda "pegado" después del tap y producía que el icono de Inicio se quedara elevado aunque el usuario ya estuviera en Pedidos/Perfil. */ @media (hover: hover) { .mf-menubar__item:hover .mf-menubar__icon { transform: translateY(-3px); } .mf-menubar__item:hover .mf-menubar__label { transform: translateY(-1px); } } /* Foco de teclado (accesibilidad) — debe funcionar siempre, independiente del tipo de puntero. */ .mf-menubar__item:focus-visible .mf-menubar__icon { transform: translateY(-3px); } .mf-menubar__item:focus-visible .mf-menubar__label { transform: translateY(-1px); } /* Para usuarios con reduced motion, desactivar el slide */ @media (prefers-reduced-motion: reduce) { .mf-menubar__icon, .mf-menubar__label { transition: color 180ms ease, opacity 180ms ease; } .mf-menubar__item:hover .mf-menubar__icon, .mf-menubar__item:focus-visible .mf-menubar__icon, .mf-menubar__item.is-active .mf-menubar__icon { transform: none; } .mf-menubar__item:hover .mf-menubar__label, .mf-menubar__item:focus-visible .mf-menubar__label { transform: none; } } /* El contenedor (topbar + header) se mantiene sticky arriba al hacer scroll en todas las páginas (excepto carrito en mobile/tablet). */ mf-header { position: sticky; top: 0; z-index: 100; } body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } html { scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* En móvil y tablet ocultamos TODAS las barras de scroll (de cualquier elemento, no sólo el body/html): el desplazamiento táctil sigue funcionando, pero los "rieles" visuales no aportan valor y consumen alto/precio. En desktop se mantienen los scrollbars de marca en los contenedores horizontales (.mf-cats, .mf-products, .mf-rail, etc.). */ @media (max-width: 1080px) { *, *::before, *::after { scrollbar-width: none !important; -ms-overflow-style: none !important; } *::-webkit-scrollbar, *::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb { width: 0 !important; height: 0 !important; display: none !important; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--mf-red); } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--mf-red); color: white; } /* =========================== Utilidades SEO / a11y =========================== */ .mf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Bloque de texto SEO: visible pero discreto, optimizado para palabras clave */ .mf-seo-text { max-width: 880px; margin: 0 auto; padding: 1.5rem 1.5rem 0.5rem; color: var(--mf-ink-2); font-size: 14px; line-height: 1.65; } .mf-seo-text h2 { font-size: 1.15rem; font-weight: 700; color: var(--mf-ink); margin-bottom: 0.6rem; letter-spacing: -0.01em; } .mf-seo-text p { margin: 0.4rem 0; } .mf-seo-text dl { margin: 0.4rem 0; } .mf-seo-text dt { font-weight: 600; color: var(--mf-ink); margin-top: 0.6rem; } .mf-seo-text dd { margin: 0.2rem 0 0 0; padding-left: 0; } /* =========================== FAQ (acordeón nativo

) =========================== */ .mf-faq { display: flex; flex-direction: column; gap: 0.6rem; padding: 0 1.5rem; } .mf-faq__item { background: var(--mf-bg); border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 0.9rem 1.2rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .mf-faq__item[open] { border-color: var(--mf-line-2); box-shadow: var(--mf-shadow); } .mf-faq__item summary { cursor: pointer; font-weight: 600; color: var(--mf-ink); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .mf-faq__item summary::-webkit-details-marker { display: none; } .mf-faq__item summary::after { content: '+'; font-size: 1.4rem; line-height: 1; color: var(--mf-red); font-weight: 400; flex-shrink: 0; transition: transform 0.15s ease; } .mf-faq__item[open] summary::after { content: '−'; } .mf-faq__item p { margin: 0.7rem 0 0; color: var(--mf-ink-2); line-height: 1.6; } /* =========================== Top bar promocional =========================== El topbar muestra un mensaje centrado y, alineado a la derecha, un botón "X" para cerrarlo. Al cerrarlo se aplica la clase is-topbar-hidden a : el .mf-topbar sale de la vista con transform y el .mf-header sube con margin-top negativo la misma distancia — sin gap y sin "aplastamiento" del texto. Importante: - El contenedor ya es sticky (position: sticky; top: 0), por eso no animamos margin-top ahí — un margin negativo en un sticky queda "absorbido" por el anclaje. - La variable --mf-topbar-h se define en (ancestro común) porque las custom properties sólo heredan hacia abajo, no a elementos hermanos. */ mf-header { --mf-topbar-h: 2.25rem; } /* Las transiciones SOLO se activan cuando el usuario hace clic en la X (clase is-topbar-animating). Por defecto están desactivadas para que, en recargas con el topbar ya cerrado, NO se vea la animación de "salida" (que era el "parpadeo" que reportaba el usuario en páginas como perfil/carrito). */ mf-header.is-topbar-animating { transition: margin-top 0.3s ease; } .mf-topbar { background: var(--mf-red); color: white; padding: 0 0.75rem; font-size: 13px; font-weight: 500; height: var(--mf-topbar-h); box-sizing: border-box; display: flex; align-items: center; position: relative; will-change: transform; } /* La transición del topbar SOLO se activa con is-topbar-animating (ver comentario en mf-header). */ mf-header.is-topbar-animating .mf-topbar { transition: transform 0.3s ease; } .mf-topbar__text { flex: 1; text-align: center; } .mf-topbar__close { margin-left: auto; background: transparent; border: 0; color: white; padding: 0.35rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; opacity: 0.85; transition: background 0.15s ease, opacity 0.15s ease; } .mf-topbar__close:hover { background: rgba(0, 0, 0, 0.18); opacity: 1; } .mf-topbar__close:focus-visible { outline: 2px solid white; outline-offset: 1px; } .mf-header { will-change: margin-top; } /* La transición del header SOLO se activa con is-topbar-animating (ver comentario en mf-header). */ mf-header.is-topbar-animating .mf-header { transition: margin-top 0.3s ease; } mf-header.is-topbar-hidden .mf-topbar { transform: translateY(-100%); } mf-header.is-topbar-hidden .mf-header { margin-top: calc(-1 * var(--mf-topbar-h)); } /* =========================== Header =========================== */ .mf-header { background: white; border-bottom: 1px solid var(--mf-line); } .mf-header__bar { max-width: 1280px; margin: 0 auto; padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 1.2rem; } .mf-logo { display: inline-flex; align-items: center; font-family: var(--mf-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--mf-ink); white-space: nowrap; } .mf-logo__img { height: 38px; width: auto; display: block; } .mf-logo__mark { color: var(--mf-red); margin-right: 0.15rem; } .mf-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; border: 1px solid var(--mf-line-2); border-radius: 999px; background: white; font-size: 13px; font-weight: 500; color: var(--mf-ink); cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .mf-pill:hover { border-color: var(--mf-red); color: var(--mf-red); } .mf-pill--solid { background: var(--mf-ink); color: white; border-color: var(--mf-ink); } .mf-pill--solid:hover { background: var(--mf-red); border-color: var(--mf-red); color: white; } .mf-pill__icon { width: 16px; height: 16px; display: inline-flex; } .mf-header__spacer { flex: 1; } .mf-header__actions { display: flex; gap: 0.5rem; align-items: center; } .mf-icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--mf-ink); transition: all 0.15s ease; position: relative; } .mf-icon-btn:hover { background: var(--mf-bg-3); color: var(--mf-red); } /* En móvil y tablet el menú inferior ya muestra "Cuenta", así que el icono "Mi perfil" del header se oculta para no duplicar el control. El carrito YA NO está en la menubar (es un side panel), por lo que su icono del header se mantiene visible a cualquier tamaño. */ @media (max-width: 1080px) { .mf-icon-btn[aria-label="Mi perfil"] { display: none; } } .mf-icon-btn__count { position: absolute; top: 2px; right: 2px; background: var(--mf-red); color: white; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } @media (max-width: 880px) { .mf-pill--label { display: none; } .mf-header__bar { padding: 0.7rem 1rem; gap: 0.6rem; } } /* =========================== Hero banner (edge-to-edge slide carousel) =========================== Edge-to-edge: el contenedor y el track ocupan el 100% del ancho (sin max-width ni margin auto). Los slides se apilan en una fila flex y el track se desplaza con translateX para producir un slide horizontal suave entre imágenes. */ .mf-hero { background: var(--mf-bg-3); position: relative; overflow: hidden; width: 100%; } .mf-hero__track { position: relative; width: 100%; aspect-ratio: 1280 / 280; display: flex; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* Cada slide ocupa el 100% del track; quedan alineados horizontalmente fuera de pantalla. */ .mf-hero__slide { flex: 0 0 100%; min-width: 100%; position: relative; overflow: hidden; background: var(--mf-bg-2); } .mf-hero__bg { position: absolute; inset: 0; overflow: hidden; } .mf-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Dots */ .mf-hero__dots { position: absolute; bottom: 0.9rem; left: 50%; transform: translateX(-50%); display: inline-flex; gap: 0.45rem; z-index: 4; } /* ponytail: con un solo banner no hay slider — ocultar dots. */ .mf-hero.is-single .mf-hero__dots { display: none; } .mf-hero__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.4); cursor: pointer; padding: 0; transition: background 0.15s ease, width 0.2s ease; } .mf-hero__dot:hover { background: rgba(0, 0, 0, 0.6); } .mf-hero__dot.is-active { background: white; width: 26px; border-radius: 6px; } /* ============== Responsive ============== */ @media (max-width: 1080px) and (min-width: 721px) { .mf-hero__track { aspect-ratio: 16 / 6; } } @media (max-width: 720px) { .mf-hero__track { aspect-ratio: 5 / 3; } .mf-hero__dots { bottom: 0.6rem; } } /* =========================== Categorías circulares =========================== */ .mf-section { max-width: 1280px; margin: 0 auto; padding: 2.5rem 1.5rem; } /* =========================== Categorías (burbujas con color) =========================== */ .mf-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 1.5rem; padding: 1.5rem 0 0.4rem; scrollbar-width: thin; scrollbar-color: var(--mf-red) var(--mf-bg-3); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease; } .mf-cats::-webkit-scrollbar { height: 8px; display: block; } .mf-cats::-webkit-scrollbar-track { background: var(--mf-bg-3); border-radius: 99px; } .mf-cats::-webkit-scrollbar-thumb { background: var(--mf-red); border-radius: 99px; } .mf-cats::-webkit-scrollbar-thumb:hover { background: var(--mf-red-2); } .mf-cats.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); } .mf-cats.is-end { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 100%); } .mf-cat { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 0.5rem 0.25rem; cursor: pointer; text-align: center; flex: 0 0 auto; width: 96px; transition: transform 0.2s ease; } .mf-cat:hover { transform: translateY(-2px); } .mf-cat:hover .mf-cat__name { color: var(--mf-red); } .mf-cat__bubble { width: 76px; height: 76px; border-radius: 50%; background-color: #e7e6e9; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } .mf-cat:hover .mf-cat__bubble { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } .mf-cat__bubble img { width: 100%; height: 100%; object-fit: cover; display: block; } .mf-cat__initial { font-size: 1.8rem; font-weight: 800; color: var(--mf-ink); line-height: 1; user-select: none; } .mf-cat__name { font-size: 11px; font-weight: 500; color: var(--mf-ink); line-height: 1.2; text-align: center; width: 100%; white-space: normal; word-break: break-word; } /* Colección: distinguir visualmente en la barra horizontal. Badge rojo, bubble con tinte rojo más fuerte. */ .mf-cat--collection .mf-cat__bubble { background: linear-gradient(135deg, var(--mf-red-3, #ffeded), #fff); border: 1px solid rgba(255, 49, 49, 0.18); } .mf-cat__badge { display: inline-block; margin-top: 2px; padding: 1px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--mf-red-3, #ffeded); color: var(--mf-red-2, #ff3131); border-radius: 999px; white-space: nowrap; } /* Fondo único para todos los bubbles de categoría (#e7e6e9). Las reglas por slug quedan como override opcional; si una categoría en particular quiere un tinte distintivo más adelante, solo tiene que agregar su selector --slug aquí sin tocar el JS. */ .mf-cat__bubble--cervezas, .mf-cat__bubble--bebidas, .mf-cat__bubble--piscos, .mf-cat__bubble--rones, .mf-cat__bubble--vinos, .mf-cat__bubble--whiskys, .mf-cat__bubble--vodkas, .mf-cat__bubble--tequilas, .mf-cat__bubble--espumantes, .mf-cat__bubble--snacks, .mf-cat__bubble--comidas { background-color: #e7e6e9; } @media (max-width: 720px) { .mf-cats { gap: 1rem; padding-top: 0; padding-bottom: 0.5rem; } .mf-cat { width: 80px; } .mf-cat__bubble { width: 64px; height: 64px; } .mf-cat__name { font-size: 12px; } } /* En PC el aire entre el hero (edge-to-edge) y la fila de categorías era excesivo (2.5rem = 40px). Lo reducimos a 1rem para un ritmo más compacto, sin que quede pegado como en mobile (0.5rem). */ @media (min-width: 1081px) { #categorias { padding-top: 1rem; padding-bottom: 2rem; } #promos { padding-top: 0; padding-bottom: 0.8rem; } #catalogo { padding-top: 0; } /* Gap más compacto entre secciones de categoría del catálogo en PC */ #mf-sections .mf-section__head { margin-bottom: 0.6rem; } #mf-sections .mf-products, #promos .mf-products { padding-bottom: 0.6rem; } } /* En mobile y tablet el gap entre la fila de categorías y el primer título de sección (h2) era muy grande por el padding-top 2.5rem de .mf-section. Lo recortamos para un ritmo más compacto. */ @media (max-width: 1080px) { #promos, #catalogo { padding-top: 0.6rem; } /* ponytail: en tablet (721-1080px) el #categorias caía al padding base 2.5rem del .mf-section (40px), demasiado aire entre el hero y las burbujas. PC mantiene 1rem; mobile/tablet usa 0.5rem. */ #categorias { padding-top: 0.5rem; padding-bottom: 0; } .mf-section__head { margin-bottom: 0.7rem; } } /* =========================== Section head =========================== */ .mf-section__head { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.2rem; padding: 0 0.5rem; } .mf-section__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--mf-ink); } .mf-section__kicker { display: inline-block; margin-right: .25rem; padding: 2px 9px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: rgba(255, 49, 49, 0.14); color: var(--mf-red); border-radius: 999px; flex-shrink: 0; } .mf-section__head.is-collection .mf-section__title { color: var(--mf-red); } .mf-section__more { font-size: 13px; font-weight: 500; color: var(--mf-ink); display: inline-flex; align-items: center; gap: 0.3rem; border-bottom: 1px solid var(--mf-ink); padding-bottom: 1px; } .mf-section__more:hover { color: var(--mf-red); border-color: var(--mf-red); } /* =========================== Catálogo / productos (estilo Tambo) =========================== */ .mf-products { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8rem; } @media (max-width: 720px) { .mf-products { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } } @media (min-width: 721px) and (max-width: 1100px) { .mf-products { grid-template-columns: repeat(5, 1fr); } } /* Home: cada sección de categoría muestra una sola fila con scroll horizontal */ #mf-sections .mf-products, #mf-promos.mf-products { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0.8rem; padding-bottom: 1.2rem; scrollbar-width: thin; scrollbar-color: var(--mf-red) var(--mf-bg-3); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); transition: -webkit-mask-image 0.25s ease, mask-image 0.25s ease; } #mf-sections .mf-products::-webkit-scrollbar, #mf-promos.mf-products::-webkit-scrollbar { height: 8px; display: block; } #mf-sections .mf-products::-webkit-scrollbar-track, #mf-promos.mf-products::-webkit-scrollbar-track { background: var(--mf-bg-3); border-radius: 99px; } #mf-sections .mf-products::-webkit-scrollbar-thumb, #mf-promos.mf-products::-webkit-scrollbar-thumb { background: var(--mf-red); border-radius: 99px; } #mf-sections .mf-products::-webkit-scrollbar-thumb:hover, #mf-promos.mf-products::-webkit-scrollbar-thumb:hover { background: var(--mf-red-2); } #mf-sections .mf-products .mf-card { flex: 0 0 calc((100% - 0.8rem * 5) / 6.5); min-width: 0; } /* Con Descuentazo: mismo tamaño default que sections (PC = 6.5 cards) */ #mf-promos.mf-products .mf-card { flex: 0 0 calc((100% - 0.8rem * 5) / 6.5); min-width: 0; } /* Cuando ya se hizo scroll, mostrar también el degradado izquierdo */ #mf-sections .mf-products.is-scrolled, #mf-promos.mf-products.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 88%, rgba(0, 0, 0, 0.6) 94%, transparent 100%); } /* Cuando se llegó al final, ocultar el degradado derecho */ #mf-sections .mf-products.is-end, #mf-promos.mf-products.is-end { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.6) 6%, #000 12%, #000 100%); } @media (max-width: 1100px) { #mf-sections .mf-products .mf-card { flex: 0 0 calc((100% - 0.8rem * 4) / 5.5); } /* Con Descuentazo: tablet = 5.5 cards visibles */ #mf-promos.mf-products .mf-card { flex: 0 0 calc((100% - 0.8rem * 4) / 5.5); } } /* En PC el aire entre el final de la fila de productos (incluido su scrollbar) y el título de la siguiente sección era muy justo: se pegaban visualmente. Añadimos un margin-bottom amplio SOLO en desktop (>=1081px) para que cada bloque "respire". */ @media (min-width: 1081px) { #mf-sections .mf-products, #mf-promos.mf-products { margin-bottom: 2.5rem; } } @media (max-width: 720px) { #mf-sections .mf-products, #mf-promos.mf-products { gap: 0.6rem; } /* Catalog: mobile = 2 cards completas (grid) */ #mf-sections .mf-products .mf-card { flex: 0 0 calc((100% - 0.6rem) / 2.5); } /* Con Descuentazo: mobile = 2.5 cards visibles */ #mf-promos.mf-products .mf-card { flex: 0 0 calc((100% - 0.6rem) / 2.5); } /* El degradado derecho empieza tarde (en 95%) para que el "medio producto" asomado al borde sea claramente visible y funcione como señal de "hay más para scrollear". */ #mf-sections .mf-products, #mf-promos.mf-products { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%); } #mf-sections .mf-products.is-scrolled, #mf-promos.mf-products.is-scrolled { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 95%, rgba(0,0,0,0.55) 98%, transparent 100%); } #mf-sections .mf-products.is-end, #mf-promos.mf-products.is-end { -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 8%, #000 16%, #000 100%); } } .mf-card { background: white; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 0.7rem 0.7rem 0.8rem; display: flex; flex-direction: column; transition: all 0.2s ease; position: relative; cursor: pointer; user-select: none; -webkit-user-drag: none; } .mf-card a, .mf-card img { -webkit-user-drag: none; } .mf-card:hover { box-shadow: var(--mf-shadow-hover); transform: translateY(-2px); border-color: var(--mf-line-2); } .mf-card__media { position: relative; aspect-ratio: 1/1; margin: -0.7rem -0.7rem 0.5rem; background: #ffffff; border-radius: var(--mf-radius) var(--mf-radius) 0 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .mf-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.4rem; background: #ffffff; transition: transform 0.3s ease; } .mf-card:hover .mf-card__media img { transform: scale(1.05); } /* Tags (izquierda) */ .mf-card__tags { position: absolute; top: 0.4rem; left: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; z-index: 2; } .mf-tag { font-size: 9.5px; font-weight: 700; padding: 0.18rem 0.4rem; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.1; color: white; background: var(--mf-ink); } .mf-tag--prime { background: var(--mf-yellow); color: var(--mf-ink); } .mf-tag--fresh { background: var(--mf-success); } .mf-tag--delivery{ background: var(--mf-ink); } .mf-tag--top { background: #6b21a8; } .mf-tag--nuevo { background: var(--mf-yellow); color: var(--mf-ink); } /* Badge descuento (esquina superior izquierda en estilo Tambo) */ .mf-card__discount { position: absolute; top: 0; left: 0; z-index: 3; background: var(--mf-red); color: white; font-size: 12px; font-weight: 800; padding: 0.35rem 0.55rem 0.4rem; border-radius: var(--mf-radius) 0 var(--mf-radius) 0; line-height: 1; letter-spacing: -0.01em; } .mf-card__name { font-size: 13.5px; font-weight: 500; color: var(--mf-ink); line-height: 1.3; margin: 0.4rem 0 0.7rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; } .mf-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; gap: 0.5rem; } .mf-card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; line-height: 1; } .mf-card__price-now { font-size: 1.05rem; font-weight: 800; color: var(--mf-red); line-height: 1; letter-spacing: -0.01em; } .mf-card__price-now span { font-size: 0.78rem; font-weight: 600; margin-right: 1px; } .mf-card__price-old { font-size: 11.5px; color: var(--mf-red-2); text-decoration: line-through; line-height: 1; font-weight: 400; } .mf-card__add { width: 32px; height: 32px; border-radius: 50%; background: var(--mf-red); color: white; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 600; flex-shrink: 0; transition: all 0.15s ease; line-height: 1; } .mf-card__add:hover { background: var(--mf-red-2); transform: scale(1.08); } .mf-card__add[disabled] { background: var(--mf-mute); cursor: not-allowed; } /* Tarjeta especial "Ver más" */ .mf-card--more { display: flex; flex-direction: column; background: white; border: 1px solid var(--mf-line); cursor: pointer; } .mf-card--more .mf-card__media { background: var(--mf-bg-2); display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; } .mf-card__more-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--mf-red); text-align: center; } .mf-card__more-count { font-size: 2.2rem; font-weight: 900; line-height: 1; } .mf-card__more-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--mf-mute); letter-spacing: 0.06em; } .mf-card--more .mf-card__name { font-weight: 600; text-align: center; margin: 0.6rem 0.4rem; font-size: 13px; color: var(--mf-ink); display: flex; align-items: center; justify-content: center; } .mf-card--more .mf-card__foot { width: 100%; margin-top: auto; padding-top: 0.2rem; } .mf-card--more .mf-btn { width: 100%; font-size: 12.5px; padding: 0.65rem 1rem; } /* =========================== Categoría rail (sección de fila) =========================== */ .mf-rail { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; scrollbar-width: thin; } .mf-rail::-webkit-scrollbar { height: 4px; } .mf-rail::-webkit-scrollbar-thumb { background: var(--mf-line-2); border-radius: 2px; } .mf-rail > * { scroll-snap-align: start; flex: 0 0 180px; } @media (max-width: 720px) { .mf-rail > * { flex: 0 0 140px; } } /* =========================== Footer — Estilo "Kresna-inspired" Identidad: MegaFeast (rojo, blanco, negro) - Card contenedor con esquinas redondeadas - Panel izquierdo rojo con gradiente - Centro con dos columnas y títulos manuscritos (italic display) - Derecha: newsletter - Watermark "MegaFeast" gigante al fondo - Badge +18 flotante =========================== */ .mf-footer { background: var(--mf-ink); color: white; padding: 0; margin-top: 4rem; font-family: var(--mf-sans); position: relative; overflow: hidden; } .mf-footer__wrap { max-width: 1280px; margin: 0 auto; padding: 3.5rem 1.5rem 1.8rem; position: relative; } .mf-footer__card { position: relative; background: transparent; border-radius: 0; padding: 0; overflow: visible; box-shadow: none; } /* Watermark de marca al fondo (toma el lugar del "Kresna" grande de la referencia) */ .mf-footer__watermark { position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%); font-family: var(--mf-display); font-weight: 800; font-size: clamp(10rem, 22vw, 22rem); line-height: 0.85; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.04); pointer-events: none; user-select: none; white-space: nowrap; z-index: 0; } /* Badge +18 flotante (sustituye al "Feeling lucky?" 3D de la referencia) */ .mf-footer__age { position: absolute; top: -22px; right: 32px; width: 76px; height: 76px; border-radius: 50%; background: var(--mf-red); color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(255, 49, 49, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.12); z-index: 4; font-family: var(--mf-display); line-height: 1; } .mf-footer__age-num { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; } .mf-footer__age-sub { font-size: 0.55rem; font-weight: 600; margin-top: 2px; text-transform: lowercase; letter-spacing: 0.02em; opacity: 0.9; } .mf-footer__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.05fr 1.1fr 1.1fr; gap: 2.5rem; align-items: start; } /* ---------- Panel izquierdo: marca roja ---------- */ .mf-footer__brand { background: linear-gradient(160deg, var(--mf-red) 0%, var(--mf-red-2) 100%); border-radius: 20px; padding: 1.8rem 1.6rem 1.5rem; color: white; display: flex; flex-direction: column; gap: 1rem; min-height: 260px; position: relative; overflow: hidden; } .mf-footer__brand::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 90% 110%, rgba(255,255,255,0.15), transparent 55%); pointer-events: none; } .mf-footer__logo { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: white; z-index: 1; } .mf-footer__logo img { height: 36px; width: auto; display: block; filter: brightness(0) invert(1); } .mf-footer__wordmark { font-family: var(--mf-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; } .mf-footer__tagline { font-family: var(--mf-display); font-weight: 400; font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; z-index: 1; } .mf-footer__tagline em { font-style: italic; font-weight: 400; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.6); text-underline-offset: 4px; } .mf-footer__hello { font-family: var(--mf-display); font-style: italic; font-weight: 500; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); margin: auto 0 0; z-index: 1; } .mf-social { display: flex; gap: 0.55rem; flex-wrap: wrap; } .mf-social a { width: 36px; height: 36px; border-radius: 50%; background: var(--mf-bg-3); display: flex; align-items: center; justify-content: center; color: var(--mf-ink); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; } .mf-social a:hover { background: var(--mf-red); color: white; transform: translateY(-2px); } .mf-footer__brand .mf-social { z-index: 1; margin-top: 0.4rem; } .mf-footer__brand .mf-social a { background: rgba(0, 0, 0, 0.18); color: white; width: 38px; height: 38px; } .mf-footer__brand .mf-social a:hover { background: rgba(0, 0, 0, 0.35); color: white; } /* ---------- Centro: navegación en columnas (Catálogo, Compañía, Legal) ---------- */ .mf-footer__nav { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem; padding-top: 0.4rem; } .mf-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 0; } .mf-footer__col a { font-family: var(--mf-sans); font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.15s ease, transform 0.15s ease; display: inline-block; } .mf-footer__col a:hover { color: var(--mf-red); transform: translateX(2px); } /* Títulos de columna "handwritten" — usando italic display font (no tenemos script font, así que italic Geologica + tracking simula la onda manuscrita) */ .mf-footer__col-title { font-family: var(--mf-display); font-weight: 400; font-style: italic; font-size: 1.05rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 0.9rem; letter-spacing: 0.01em; position: relative; } .mf-footer__col-title::after { content: ""; display: block; width: 22px; height: 2px; background: var(--mf-red); margin-top: 4px; border-radius: 2px; } /* ---------- Derecha: CTA "¿Tienes un evento?" ---------- */ .mf-footer__event { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: 0.4rem; gap: 0.5rem; } .mf-footer__event-eyebrow { font-family: var(--mf-display); font-weight: 600; font-size: 0.8rem; color: var(--mf-red); margin: 0; text-transform: uppercase; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 0.4rem; } .mf-footer__event-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--mf-red); border-radius: 2px; } .mf-footer__event-title { font-family: var(--mf-display); font-weight: 800; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.2; color: white; margin: 0; letter-spacing: -0.01em; max-width: 28ch; } .mf-footer__event-title em { font-style: italic; color: var(--mf-red); } .mf-footer__event-hint { font-family: var(--mf-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.5); margin: 0 0 0.2rem; letter-spacing: 0.02em; text-transform: lowercase; } .mf-footer__event-cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--mf-red); color: white; font-family: var(--mf-sans); font-weight: 700; font-size: 0.88rem; padding: 0.6rem 1.1rem; border-radius: 10px; text-decoration: none; transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 6px 14px rgba(255, 49, 49, 0.35); } .mf-footer__event-cta:hover { background: var(--mf-red-2); color: white; transform: translateY(-1px); box-shadow: 0 10px 20px rgba(255, 49, 49, 0.45); } .mf-footer__event-wa { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mf-sans); font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.15s ease; } .mf-footer__event-wa:hover { color: white; } .mf-footer__event-wa svg { color: var(--mf-success); flex-shrink: 0; } /* ---------- Bottom ---------- */ .mf-footer__bottom { position: relative; z-index: 2; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--mf-mono); font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.01em; } .mf-footer__legal { color: rgba(255, 255, 255, 0.7); } .mf-footer__lr-link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; color: rgba(255, 255, 255, 0.85); text-decoration: none; font-family: var(--mf-sans); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.02em; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .mf-footer__lr-link:hover { background: var(--mf-red); border-color: var(--mf-red); color: #fff; } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .mf-footer__inner { grid-template-columns: 1fr 1fr; } .mf-footer__event { grid-column: 1 / -1; align-items: flex-start; text-align: left; } .mf-footer__event-eyebrow::before { display: none; } .mf-footer__event-title { max-width: none; } } @media (max-width: 720px) { .mf-footer__wrap { padding: 2.5rem 1.25rem 1.5rem; } .mf-footer__inner { grid-template-columns: 1fr; gap: 1.8rem; } .mf-footer__nav { grid-template-columns: 1fr 1fr; gap: 1.5rem; } /* Card de marca más compacta en mobile: menos padding, sin min-height forzado, gap y radio reducidos. El tagline se ajusta al ancho disponible. */ .mf-footer__brand { padding: 1.1rem 1.1rem 1rem; gap: 0.6rem; min-height: 0; border-radius: 16px; } .mf-footer__tagline { font-size: 1rem; line-height: 1.25; } .mf-footer__logo img { height: 28px; } .mf-footer__age { width: 64px; height: 64px; top: -18px; right: 18px; } .mf-footer__age-num { font-size: 1.15rem; } .mf-footer__age-sub { font-size: 0.5rem; } .mf-footer__bottom { flex-direction: column; align-items: flex-start; } .mf-footer__watermark { font-size: clamp(8rem, 30vw, 12rem); bottom: -8%; } /* En mobile el CTA de eventos es lo más importante del footer (llamada a la acción, cotizar). Lo subimos al primer puesto con order: -1, y lo alineamos a la izquierda para que lea bien a ancho completo. */ .mf-footer__event { order: -1; align-items: flex-start; text-align: left; } .mf-footer__event-eyebrow::before { display: none; } .mf-footer__event-title { max-width: none; } } @media (max-width: 480px) { .mf-footer__nav { grid-template-columns: 1fr; } } /* =========================== Producto / Detalle =========================== */ .mf-pd { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; } .mf-pd__media { background: var(--mf-bg-3); border-radius: var(--mf-radius-lg); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; } .mf-pd__media img { max-width: 100%; max-height: 100%; object-fit: contain; } .mf-pd__cat { font-size: 12px; font-weight: 500; color: var(--mf-mute); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; } .mf-pd__name { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 0.6rem; line-height: 1.1; } .mf-pd__desc { color: var(--mf-ink-2); line-height: 1.6; margin: 1rem 0; } .mf-pd__price { display: flex; align-items: baseline; gap: 0.8rem; margin: 1.2rem 0; padding: 1.2rem 0; border-top: 1px solid var(--mf-line); border-bottom: 1px solid var(--mf-line); } .mf-pd__price-now { font-size: 2rem; font-weight: 800; color: var(--mf-ink); } .mf-pd__price-old { font-size: 1rem; text-decoration: line-through; color: var(--mf-mute); } .mf-pd__add { background: var(--mf-red); color: white; font-weight: 700; font-size: 14px; padding: 1rem 1.5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.15s ease; margin-top: 0.5rem; } .mf-pd__add:hover { background: var(--mf-red-2); } .mf-pd__qty { display: inline-flex; align-items: center; border: 1px solid var(--mf-line-2); border-radius: 999px; overflow: hidden; margin-right: 0.5rem; } .mf-pd__qty button { width: 40px; height: 44px; font-size: 1.1rem; color: var(--mf-ink); } .mf-pd__qty button:hover { background: var(--mf-bg-3); color: var(--mf-red); } .mf-pd__qty input { width: 50px; height: 44px; text-align: center; background: transparent; border: 0; font-weight: 600; border-left: 1px solid var(--mf-line); border-right: 1px solid var(--mf-line); } .mf-pd__buy-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; } @media (max-width: 880px) { .mf-pd { grid-template-columns: 1fr; gap: 1.5rem; padding: 1rem; } } /* =========================== Carrito / Checkout =========================== */ .mf-cart { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; } .mf-cart__items { display: flex; flex-direction: column; gap: 0.6rem; } .mf-cart__item { display: grid; grid-template-columns: 72px 1fr auto; gap: 1rem; padding: 0.8rem; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); background: white; align-items: center; } .mf-cart__item img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; background: var(--mf-bg-3); } .mf-cart__item-name { font-size: 14px; font-weight: 500; } .mf-cart__item-price { font-size: 13px; color: var(--mf-mute); } .mf-cart__item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; } .mf-cart__item-total { font-size: 15px; font-weight: 700; color: var(--mf-ink); } .mf-qty-sm { display: inline-flex; border: 1px solid var(--mf-line-2); border-radius: 999px; overflow: hidden; } .mf-qty-sm button { width: 26px; height: 26px; font-size: 0.9rem; } .mf-qty-sm input { width: 32px; height: 26px; text-align: center; border: 0; border-left: 1px solid var(--mf-line); border-right: 1px solid var(--mf-line); font-size: 12px; background: transparent; font-weight: 600; } .mf-summary { background: white; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); padding: 1.5rem; position: sticky; top: 80px; align-self: start; } .mf-summary h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--mf-line); } .mf-summary__row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 14px; } .mf-summary__row--total { border-top: 1px solid var(--mf-line); margin-top: 0.5rem; padding-top: 0.8rem; font-size: 1.1rem; font-weight: 700; } .mf-summary__row--total span:last-child { color: var(--mf-red); } .mf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.3rem; font-size: 13px; font-weight: 700; border-radius: 999px; border: 0; transition: all 0.15s ease; cursor: pointer; text-align: center; white-space: nowrap; } .mf-btn--primary { background: var(--mf-red); color: white; } .mf-btn--primary:hover { background: var(--mf-red-2); } .mf-btn--block { display: flex; width: 100%; } .mf-btn--ghost { background: white; color: var(--mf-ink); border: 1px solid var(--mf-line-2); } .mf-btn--ghost:hover { border-color: var(--mf-red); color: var(--mf-red); } .mf-btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* El atributo `hidden` debe ganarle al `display: inline-flex` del .mf-btn, si no los botones con hidden siguen visibles. La regla del navegador ([hidden] { display: none }) tiene la MISMA especificidad que .mf-btn, pero al estar definida después .mf-btn ganaba la cascada. */ .mf-btn[hidden] { display: none; } .mf-btn--google { background: white; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.6rem; } .mf-btn--google:hover { background: #f8f9fa; border-color: #c4c7c5; } .mf-btn--google:disabled { opacity: 0.7; cursor: wait; } .mf-auth-divider { display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0 0.8rem; color: var(--mf-mute, #8a8a8a); font-size: 12px; } .mf-auth-divider::before, .mf-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--mf-line, #e5e5e5); } .mf-empty { text-align: center; padding: 3rem 1.5rem; background: var(--mf-bg-2); border-radius: var(--mf-radius); color: var(--mf-mute); } .mf-empty a { color: var(--mf-red); font-weight: 600; } @media (max-width: 880px) { .mf-cart { grid-template-columns: 1fr; padding: 1rem; } .mf-summary { position: relative; top: 0; } } /* =========================== Formularios =========================== */ .mf-form { max-width: 440px; margin: 3rem auto; padding: 2rem; background: white; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg); box-shadow: var(--mf-shadow); } .mf-form h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.3rem; letter-spacing: -0.01em; } .mf-form__sub { color: var(--mf-mute); font-size: 13px; margin-bottom: 1.5rem; } .mf-field { margin-bottom: 1rem; } .mf-field label { display: block; font-size: 12px; font-weight: 600; color: var(--mf-ink-2); margin-bottom: 0.4rem; } .mf-field input, .mf-field select, .mf-field textarea { width: 100%; padding: 0.7rem 0.9rem; background: white; border: 1px solid var(--mf-line-2); border-radius: var(--mf-radius); color: var(--mf-ink); font-size: 14px; transition: border-color 0.15s ease; } .mf-field input:focus, .mf-field select:focus, .mf-field textarea:focus { outline: 0; border-color: var(--mf-red); box-shadow: 0 0 0 3px rgba(225, 29, 42, 0.1); } .mf-field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .mf-alert { padding: 0.7rem 0.9rem; border-radius: var(--mf-radius); background: var(--mf-red-3); color: var(--mf-red-2); font-size: 13px; margin-bottom: 1rem; border-left: 3px solid var(--mf-red); } .mf-alert--success { background: #e6f7f0; color: #0d6b4a; border-left-color: var(--mf-success); } .mf-alert--info { background: #eaf2fb; color: #1b4a86; border-left-color: #2f7ac6; } .mf-loc-summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 1rem; background: #fafafa; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); } .mf-loc-summary__addr { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--mf-ink); } .mf-loc-summary__addr svg { color: var(--mf-red); flex-shrink: 0; margin-top: 2px; } .mf-loc-summary__main { font-size: 13.5px; font-weight: 500; line-height: 1.35; } .mf-loc-summary__sub { font-size: 12px; color: var(--mf-mute); margin-top: 0.15rem; } .mf-loc-summary__btn { background: white; color: var(--mf-ink-2); border: 1px solid var(--mf-line-2); padding: 0.45rem 0.8rem; border-radius: 6px; font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; flex-shrink: 0; } .mf-loc-summary__btn:hover { border-color: var(--mf-red); color: var(--mf-red); } .mf-loc-empty { padding: 1rem; background: #fafafa; border: 1px dashed var(--mf-line-2); border-radius: var(--mf-radius); text-align: center; } .mf-loc-empty p { margin: 0 0 0.7rem; font-size: 13px; color: var(--mf-mute); } .mf-btn--sm { padding: 0.45rem 0.9rem !important; font-size: 12.5px !important; } .mf-form__foot { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--mf-line); font-size: 13px; text-align: center; color: var(--mf-mute); } .mf-form__foot a { color: var(--mf-red); font-weight: 600; } /* =========================== Drag-to-scroll utility =========================== */ .is-dragging { cursor: grabbing !important; user-select: none; } .is-dragging * { user-select: none; pointer-events: none !important; } /* =========================== Menubar inferior (móvil/tablet) =========================== */ .mf-menubar { display: none; } @media (max-width: 1080px) { /* Reservar espacio al final del documento para que la barra fija no tape contenido (incluye safe-area en iOS). */ body { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); } .mf-menubar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; column-gap: 0.4rem; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(0.9rem + env(safe-area-inset-bottom)); z-index: 95; width: calc(100% - 1.8rem); max-width: 420px; padding: 0.45rem 0.55rem; background: var(--mf-bg); border: 1px solid var(--mf-line); border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); font-family: var(--mf-sans); } .mf-menubar__item { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; padding: 0.55rem 0.5rem; border-radius: 999px; color: var(--mf-mute); text-decoration: none; font-size: 13px; font-weight: 500; letter-spacing: -0.005em; transition: background 0.18s ease, color 0.18s ease; -webkit-tap-highlight-color: transparent; } .mf-menubar__item:hover { color: var(--mf-ink-2); } .mf-menubar__item:active { transform: scale(0.97); } .mf-menubar__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .mf-menubar__icon svg { width: 22px; height: 22px; display: block; } .mf-menubar__label { display: none; } /* Estado activo: pill oscuro con icono + label en blanco. Mantiene la misma celda del grid (no cambia el ancho de la columna) para que los tres iconos sigan centrados. */ .mf-menubar__item.is-active { background: var(--mf-ink); color: #ffffff; padding: 0.55rem 0.95rem; justify-content: center; } .mf-menubar__item.is-active .mf-menubar__label { display: inline; } .mf-menubar__item.is-active:hover { color: #ffffff; } /* Badge del carrito dentro del icono */ .mf-menubar__badge { position: absolute; top: -4px; right: -6px; background: var(--mf-red); color: #ffffff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; } .mf-menubar__item.is-active .mf-menubar__badge { background: var(--mf-red); color: #ffffff; } } @media (max-width: 380px) { .mf-menubar { padding: 0.4rem 0.45rem; gap: 0.25rem; } .mf-menubar__item { padding: 0.5rem 0.4rem; } .mf-menubar__item.is-active { padding: 0.5rem 0.75rem; } } /* =========================== Toasts =========================== Anclados ARRIBA de la pantalla. Mobile: full-width centrado, desktop: esquina superior derecha. Slide-down al entrar, swipe-up para descartar (mobile) o click en X (desktop). Duración máxima 2000ms (manejado en JS). =========================== */ #mf-toast-host { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: calc(12px + env(safe-area-inset-top)) 1rem 0; pointer-events: none; /* los clicks pasan entre toasts */ } .mf-toast { pointer-events: auto; background: var(--mf-ink); color: #fff; padding: 0.75rem 0.4rem 0.75rem 1rem; font-family: var(--mf-display); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; min-width: 220px; max-width: calc(100vw - 2rem); border-radius: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12); display: flex; align-items: center; gap: 0.25rem; cursor: pointer; user-select: none; -webkit-user-select: none; /* Estado inicial: invisible arriba. La animación .is-in lo trae. */ transform: translateY(-120%); opacity: 0; } .mf-toast.is-in { animation: mf-toast-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .mf-toast.is-out { animation: mf-toast-out 0.28s cubic-bezier(0.4, 0, 1, 1) forwards; } .mf-toast__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .mf-toast__close { appearance: none; background: transparent; border: 0; color: rgba(255, 255, 255, 0.75); cursor: pointer; padding: 0.4rem 0.5rem; margin-left: 0.25rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.12s, color 0.12s; flex-shrink: 0; } .mf-toast__close:hover { background: rgba(255, 255, 255, 0.14); color: #fff; } .mf-toast__close:active { background: rgba(255, 255, 255, 0.22); } .mf-toast__close svg { width: 14px; height: 14px; display: block; } .mf-toast--success { background: var(--mf-success); } .mf-toast--error { background: var(--mf-red); } .mf-toast--info { background: var(--mf-ink); } @keyframes mf-toast-in { from { transform: translateY(-120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes mf-toast-out { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-120%); opacity: 0; } } /* Desktop: esquina superior derecha, no full-width */ @media (min-width: 720px) { #mf-toast-host { align-items: flex-end; padding: calc(12px + env(safe-area-inset-top)) 1.5rem 0; } .mf-toast { min-width: 280px; max-width: 380px; } } /* Mobile y tablet: el X se oculta, se cierra con swipe o tap */ @media (max-width: 719px) { .mf-toast__close { display: none; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .mf-toast { transition: none; animation: none; transform: none; opacity: 1; } } /* =========================== Vista de categoría (index.html?cat=...) =========================== */ .mf-catview { background: white; padding: 1rem 0 2.5rem; } .mf-catview__inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; } .mf-breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 12.5px; color: var(--mf-mute); padding: 0.4rem 0 0.6rem; } .mf-breadcrumb a { color: var(--mf-mute); text-decoration: none; } .mf-breadcrumb a:hover { color: var(--mf-red); } .mf-breadcrumb__sep { color: var(--mf-line-2); font-size: 14px; } .mf-breadcrumb span[aria-current] { color: var(--mf-ink); font-weight: 500; } .mf-catview__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; color: var(--mf-ink); margin: 0.2rem 0 1.2rem; letter-spacing: -0.01em; } #mf-catview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } @media (min-width: 721px) and (max-width: 1100px) { #mf-catview-grid { grid-template-columns: repeat(5, 1fr); } } @media (min-width: 1101px) { #mf-catview-grid { grid-template-columns: repeat(6, 1fr); gap: 0.8rem; } } /* =========================== Misc =========================== */ .mf-page-title { max-width: 1280px; margin: 0 auto; padding: 1.5rem; } .mf-page-title h1 { font-size: 1.5rem; font-weight: 700; } .mf-orders { max-width: 900px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; } .mf-order { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; padding: 1.2rem; background: white; border: 1px solid var(--mf-line); border-radius: var(--mf-radius); } .mf-order__num { font-family: var(--mf-mono); font-size: 12px; color: var(--mf-mute); } .mf-order__total { font-size: 1.1rem; font-weight: 700; text-align: right; } .mf-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 11px; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.05em; background: var(--mf-bg-3); color: var(--mf-ink-2); } .mf-status--pendiente { background: #fff4e6; color: #b8730d; } .mf-status--preparacion{ background: #e6f0ff; color: #1a5fb4; } .mf-status--camino { background: #f3e8ff; color: #6b21a8; } .mf-status--entregado { background: #e6f7f0; color: var(--mf-success); } .mf-status--cancelado { background: #ffebeb; color: #c62828; } /* =========================== Auth Pages (Login / Registro) =========================== */ .mf-auth-body { background-color: white; font-family: var(--mf-font, "Geologica", sans-serif); margin: 0; padding: 0; min-height: 100vh; box-sizing: border-box; overflow-x: hidden; } .mf-auth-container { width: 100%; min-height: 100vh; box-sizing: border-box; } .mf-auth-card { display: grid; grid-template-columns: 40% 60%; width: 100vw; min-height: 100vh; box-shadow: none; border-radius: 0; overflow: hidden; box-sizing: border-box; } /* Panel Visual (Izquierda) - Split Screen Completo */ .mf-auth-visual { background: radial-gradient(circle at 20% 30%, #ff3131 0%, #7c0d0d 50%, #0c0908 100%); padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; box-sizing: border-box; min-height: 100vh; } .mf-auth-visual::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 80%, rgba(255, 49, 49, 0.15) 0%, transparent 50%); pointer-events: none; } .mf-auth-visual__logo { display: flex; align-items: center; justify-content: flex-start; z-index: 1; } .mf-auth-visual__brand-logo { height: 44px; filter: brightness(0) invert(1); opacity: 0.95; object-fit: contain; } .mf-auth-visual__bottom { color: white; z-index: 1; } .mf-auth-visual__eyebrow { font-family: var(--mf-font-heading, "Lexend", sans-serif); font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin: 0 0 0.8rem; } .mf-auth-visual__tagline { font-family: var(--mf-font-heading, "Lexend", sans-serif); font-size: 2rem; font-weight: 800; line-height: 1.25; margin: 0 0 1rem; color: white; letter-spacing: -0.02em; } .mf-auth-visual__sub { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); margin: 0; } /* Formulario (Derecha) - Split Screen Completo */ .mf-auth-form-side { padding: 4rem 3rem; display: flex; flex-direction: column; justify-content: center; align-items: center; background: white; box-sizing: border-box; min-height: 100vh; } .mf-auth-form { width: 100%; max-width: 400px; margin: auto; display: flex; flex-direction: column; gap: 1.2rem; box-sizing: border-box; } .mf-auth-form__logo-container { display: flex; justify-content: flex-start; margin-bottom: 0.5rem; } .mf-auth-form__logo-img { height: 40px; object-fit: contain; } .mf-auth-form__title { font-family: var(--mf-font-heading, "Lexend", sans-serif); font-size: 1.85rem; font-weight: 800; color: var(--mf-ink, #0c0908); margin: 0; letter-spacing: -0.01em; } .mf-auth-form__subtitle { font-size: 13.5px; line-height: 1.45; color: var(--mf-mute, #686868); margin: 0 0 0.5rem; } /* Inputs Premium */ .mf-field__label { font-family: var(--mf-font-heading, "Lexend", sans-serif); font-size: 12.5px; font-weight: 700; color: var(--mf-ink, #0c0908); margin-bottom: 0.4rem; display: block; } .mf-input-wrapper { position: relative; display: flex; align-items: center; width: 100%; } .mf-input-text { width: 100%; padding: 0.85rem 1rem; font-size: 13.5px; font-family: var(--mf-font, sans-serif); border: 1.5px solid var(--mf-line, #e2e2e2); border-radius: 12px; background: #fbfbfb; color: var(--mf-ink, #0c0908); transition: all 0.2s ease; box-sizing: border-box; } .mf-input-text:focus { outline: none; border-color: var(--mf-red, #ff3131); background: white; box-shadow: 0 0 0 4px rgba(255, 49, 49, 0.08); } .mf-input-toggle-pw { position: absolute; right: 0.8rem; background: none; border: 0; cursor: pointer; color: var(--mf-mute, #686868); padding: 0.2rem; display: flex; align-items: center; justify-content: center; transition: color 0.15s ease; } .mf-input-toggle-pw:hover { color: var(--mf-red, #ff3131); } .mf-eye-icon { width: 20px; height: 20px; stroke-width: 2; } .mf-input-toggle-pw.is-visible { color: var(--mf-red, #ff3131); } .mf-btn--large { padding: 0.95rem 1.5rem !important; font-size: 14px !important; } .mf-auth-form__foot { text-align: center; font-size: 13.5px; color: var(--mf-mute, #686868); margin-top: 1rem; } .mf-auth-form__foot a { color: var(--mf-red, #ff3131); font-weight: 700; text-decoration: none; transition: opacity 0.15s ease; } .mf-auth-form__foot a:hover { opacity: 0.85; } /* =========================== Auth Responsivo =========================== */ @media (max-width: 840px) { .mf-auth-card { grid-template-columns: 1fr; width: 100vw; min-height: 100vh; } .mf-auth-visual { display: none; } .mf-auth-form-side { padding: 3rem 1.5rem; min-height: 100vh; width: 100%; } .mf-auth-form { max-width: 440px; margin: auto; } .mf-auth-form__logo-container { display: flex; justify-content: center; margin-bottom: 1.5rem; } .mf-auth-form__logo-img { height: 38px; } .mf-auth-form__title { text-align: center; } .mf-auth-form__subtitle { text-align: center; } } /* ============================================================ QR Code Display and Modal for Yape/Plin Payments ============================================================ */ .mf-qr-card { background: white; border: 1px solid var(--mf-line); border-radius: var(--mf-radius-lg); padding: 2rem; max-width: 500px; margin: 1.5rem auto; box-shadow: var(--mf-shadow); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .mf-qr-title { font-family: var(--mf-display); font-size: 1.25rem; font-weight: 700; color: var(--mf-ink); margin-bottom: 0.2rem; } .mf-qr-instructions { font-size: 0.88rem; color: var(--mf-ink-2); line-height: 1.4; } .mf-qr-code-wrapper { background: var(--mf-bg-2); padding: 1.2rem; border-radius: var(--mf-radius-lg); border: 2px dashed var(--mf-line-2); display: inline-block; margin: 0.5rem 0; animation: mf-pulse-border 2.5s infinite ease-in-out; } .mf-qr-img { width: 220px; height: 220px; object-fit: contain; display: block; } .mf-qr-payment-code-label { font-size: 0.82rem; color: var(--mf-mute); margin-top: 0.5rem; } .mf-qr-payment-code { font-family: var(--mf-mono); font-size: 1.15rem; background: var(--mf-bg-3); padding: 0.5rem 1rem; border-radius: var(--mf-radius); color: var(--mf-ink); letter-spacing: 0.05em; font-weight: 600; margin-top: 0.2rem; display: inline-block; } .mf-qr-actions { display: flex; gap: 0.8rem; width: 100%; margin-top: 0.8rem; } .mf-qr-actions .mf-btn { flex: 1; } @keyframes mf-pulse-border { 0% { border-color: var(--mf-line-2); box-shadow: 0 0 0 0 rgba(255, 49, 49, 0); } 50% { border-color: var(--mf-red); box-shadow: 0 0 12px 2px rgba(255, 49, 49, 0.15); } 100% { border-color: var(--mf-line-2); box-shadow: 0 0 0 0 rgba(255, 49, 49, 0); } } /* Modal styling for "Mis Pedidos" */ .mf-qr-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(5px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; } .mf-qr-modal { background: white; border-radius: var(--mf-radius-lg); padding: 2.5rem 2rem 2rem 2rem; max-width: 460px; width: 100%; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); position: relative; text-align: center; animation: mf-modal-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .mf-qr-modal__close { position: absolute; top: 1rem; right: 1rem; font-size: 1.6rem; color: var(--mf-mute); cursor: pointer; line-height: 1; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.15s ease; } .mf-qr-modal__close:hover { background: var(--mf-bg-3); color: var(--mf-ink); } @keyframes mf-modal-pop { from { transform: scale(0.9) translateY(15px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } /* =========================== Cart side panel (carrito lateral) =========================== Side panel desde la derecha en tablet/PC; en mobile ocupa el ancho completo. Reemplaza la página /carrito cuando se dispara desde el header o la menubar. */ .mf-cart-panel { position: fixed; inset: 0; z-index: 200; display: block; } .mf-cart-panel[hidden] { display: none; } .mf-cart-panel__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.2s ease; cursor: pointer; } .mf-cart-panel.is-open .mf-cart-panel__backdrop { opacity: 1; } .mf-cart-panel__sheet { position: absolute; top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; background: var(--mf-bg, #fff); display: flex; flex-direction: column; box-shadow: -8px 0 28px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); outline: none; } .mf-cart-panel.is-open .mf-cart-panel__sheet { transform: translateX(0); } /* En mobile/tablet chico el panel ocupa todo el ancho. */ @media (max-width: 720px) { .mf-cart-panel__sheet { max-width: none; } } .mf-cart-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--mf-line, #eee); background: var(--mf-bg, #fff); position: sticky; top: 0; z-index: 1; } .mf-cart-panel__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mf-ink, #111); letter-spacing: -0.01em; } .mf-cart-panel__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--mf-ink-2, #555); cursor: pointer; transition: background 0.15s, color 0.15s; } .mf-cart-panel__close:hover { background: var(--mf-bg-3, #f4f4f4); color: var(--mf-ink, #111); } .mf-cart-panel__close:focus-visible { outline: 2px solid var(--mf-red, #d23); outline-offset: 2px; } .mf-cart-panel__body { flex: 1 1 auto; overflow-y: auto; padding: 0.6rem 1.1rem 1rem; -webkit-overflow-scrolling: touch; } /* =========================== Listado de items =========================== */ .mf-cart-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .mf-cart-panel__item { display: grid; grid-template-columns: 72px 1fr; gap: 0.75rem; padding: 0.75rem 0.5rem; border-radius: 10px; background: var(--mf-bg-2, #fafafa); border: 1px solid var(--mf-line, #eee); transition: border-color 0.15s; } .mf-cart-panel__item:hover { border-color: var(--mf-line-2, #d8d8d8); } .mf-cart-panel__media { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--mf-bg-3, #f0f0f0); display: flex; align-items: center; justify-content: center; } .mf-cart-panel__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mf-cart-panel__info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .mf-cart-panel__row1 { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; } .mf-cart-panel__name { margin: 0; font-size: 0.88rem; font-weight: 600; color: var(--mf-ink, #111); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .mf-cart-panel__remove { flex-shrink: 0; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--mf-mute, #888); cursor: pointer; transition: background 0.15s, color 0.15s; } .mf-cart-panel__remove:hover { background: rgba(220, 38, 38, 0.1); color: var(--mf-red, #d23); } .mf-cart-panel__price { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--mf-ink, #111); } .mf-cart-panel__price small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--mf-mute, #888); margin-top: 0.1rem; } .mf-cart-panel__qty { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: auto; background: var(--mf-bg, #fff); border: 1px solid var(--mf-line, #eee); border-radius: 999px; padding: 2px; width: max-content; } .mf-cart-panel__qtybtn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 50%; color: var(--mf-ink, #111); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s; } .mf-cart-panel__qtybtn:hover { background: var(--mf-bg-3, #f4f4f4); } .mf-cart-panel__qtybtn--plus { background: var(--mf-red, #d23); color: #fff; } .mf-cart-panel__qtybtn--plus:hover { background: var(--mf-red-dark, #b22); color: #fff; } .mf-cart-panel__qtyval { min-width: 1.4rem; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--mf-ink, #111); } /* =========================== Empty state =========================== */ .mf-cart-panel__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 1.5rem 2rem; gap: 0.6rem; min-height: 60%; } .mf-cart-panel__empty-icon { width: 96px; height: 96px; border-radius: 50%; background: var(--mf-bg-3, #f4f4f4); display: inline-flex; align-items: center; justify-content: center; color: var(--mf-mute, #888); margin-bottom: 0.5rem; } .mf-cart-panel__empty-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--mf-ink, #111); } .mf-cart-panel__empty-hint { margin: 0 0 0.6rem; font-size: 0.88rem; color: var(--mf-mute, #888); max-width: 28ch; } /* =========================== Footer (summary + CTA) =========================== */ .mf-cart-panel__foot { border-top: 1px solid var(--mf-line, #eee); padding: 0.95rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); background: var(--mf-bg, #fff); display: flex; flex-direction: column; gap: 0.4rem; } .mf-cart-panel__sumrow { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.88rem; color: var(--mf-ink-2, #555); } .mf-cart-panel__sumrow--mute { color: var(--mf-mute, #888); font-size: 0.82rem; } .mf-cart-panel__sumrow--total { font-size: 1.05rem; font-weight: 800; color: var(--mf-ink, #111); margin-top: 0.2rem; } .mf-cart-panel__divider { height: 1px; background: var(--mf-line, #eee); margin: 0.45rem 0 0.2rem; } .mf-cart-panel__note { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.45rem 0 0.6rem; padding: 0.65rem 0.75rem; background: linear-gradient(180deg, #fff7e6 0%, #fff1d1 100%); border: 1px solid #f5d77a; border-radius: 10px; color: #6b4f00; line-height: 1.4; } .mf-cart-panel__note-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; background: #ffb547; color: #fff; } .mf-cart-panel__note-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .mf-cart-panel__note-lead { font-size: 0.82rem; font-weight: 700; color: #4a3600; } .mf-cart-panel__note-sub { font-size: 0.76rem; color: #6b4f00; } .mf-cart-panel__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; padding: 0.85rem 1rem; background: var(--mf-red, #d23); color: #fff; font-size: 0.95rem; font-weight: 700; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; transition: background 0.15s, transform 0.1s; margin-top: 0.2rem; } .mf-cart-panel__cta:hover { background: var(--mf-red-dark, #b22); color: #fff; } .mf-cart-panel__cta:active { transform: scale(0.98); } .mf-cart-panel__cta.is-disabled, .mf-cart-panel__cta[aria-disabled="true"] { background: color-mix(in srgb, var(--mf-red, #d23) 35%, #d8d8d8); color: #fff; cursor: not-allowed; pointer-events: none; filter: saturate(0.4); } .mf-cart-panel__cta.is-disabled:hover, .mf-cart-panel__cta[aria-disabled="true"]:hover { background: color-mix(in srgb, var(--mf-red, #d23) 35%, #d8d8d8); } .mf-cart-panel__ship-hint { color: var(--mf-mute, #888); font-size: 0.78rem; font-weight: 400; } .mf-cart-panel__clear { background: transparent; border: 0; color: var(--mf-mute, #888); font-size: 0.78rem; cursor: pointer; padding: 0.4rem 0.6rem; margin: 0.1rem auto 0; text-decoration: underline; text-underline-offset: 2px; } .mf-cart-panel__clear:hover { color: var(--mf-ink, #111); } /* Body lock cuando el panel está abierto */ body.mf-cart-open { overflow: hidden; } /* ============================================================ SKELETON (shimmer) — ponytail Placeholders animados que pintan al instante mientras llegan los productos de Supabase. Reusa las dimensiones de .mf-card y .mf-cat para no saltar layout cuando llegan los datos reales. ============================================================ */ @keyframes mf-skel-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .mf-skel { display: block; background-color: #ececec; background-image: linear-gradient(90deg, #e6e6e6 8%, #f3f3f3 18%, #e6e6e6 33%); background-size: 800px 100%; animation: mf-skel-shimmer 1.4s linear infinite; border-radius: 8px; } .mf-skel--img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; } .mf-skel--line { height: 14px; width: 90%; margin-top: 10px; } .mf-skel--price { height: 18px; width: 50%; margin-top: 10px; } .mf-skel--round { width: 76px; height: 76px; border-radius: 50%; } .mf-skel--name { height: 12px; width: 60%; margin: 10px auto 0; } /* Reduce motion: dejar estático, sin animación */ @media (prefers-reduced-motion: reduce) { .mf-skel { animation: none; } } /* ===== FABs flotantes (Instagram + WhatsApp) ===== ponytail: enlaces directos, sin SDK. Si necesitas tracking o mensajes pre-llenados, añadelos al href en partials.js. */ .mf-fab { position: fixed; right: 16px; z-index: 2147483000; width: 52px; height: 52px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.22); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .mf-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,.28); } .mf-fab--wa { bottom: 16px; background: #25D366; } .mf-fab--wa:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #25D366; } .mf-fab--ig { bottom: 76px; background: linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); } .mf-fab--ig:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #dc2743; } .mf-fab img { display: block; width: 36px; height: 36px; } .mf-fab svg { display: block; } @media (max-width: 1080px) { .mf-fab--wa { bottom: calc(5.5rem + env(safe-area-inset-bottom) + 12px); } .mf-fab--ig { bottom: calc(5.5rem + env(safe-area-inset-bottom) + 72px); } } @media (max-width: 480px) { .mf-fab--wa { right: 12px; bottom: calc(5.5rem + env(safe-area-inset-bottom) + 8px); width: 48px; height: 48px; } .mf-fab--ig { right: 12px; bottom: calc(5.5rem + env(safe-area-inset-bottom) + 64px); width: 48px; height: 48px; } .mf-fab img { width: 32px; height: 32px; } } @media (prefers-reduced-motion: reduce) { .mf-fab { transition: none; } }