/* ============================================================ MVANT — sistema de diseño Boutique de sneakers / galería contemporánea / lujo minimalista ============================================================ */ :root { --bg: #111111; --bg-alt: #080808; --bg-card: #181818; --bg-elevated: #242424; /* Atmósfera MVANT global (ver más abajo): degradado carbón → antracita → negro profundo, único para todas las páginas públicas. */ --bg-carbon: #101010; --bg-deep: #050505; --text: #ffffff; --text-muted: #bdbdbd; --silver: #9c9c9c; /* Identidad de acento MVANT — azul eléctrico (reemplaza el ámbar/camel anterior) */ --mvant-accent: #00a8ff; --mvant-neon: #00d9ff; --mvant-electric-white: #bff5ff; --accent: var(--mvant-accent); --border: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.2); --ease: cubic-bezier(0.16, 0.84, 0.44, 1); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Regla MVANT de product media (Home/Catálogo/Relacionados/Product Page/Bolsa): toda fotografía que represente un producto usa este mismo fit/radio, sin excepción — la única excepción real es el Hero (fondo puramente decorativo, sigue en cover aparte). "contain" nunca recorta: si una foto futura no es 1:1, se ve completa y centrada, con el propio fondo del wrapper (var(--bg-card)) rellenando el sobrante. */ --product-media-fit: contain; --product-media-radius: 14px; } * { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-weight: 400; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- Atmósfera MVANT global ---------- FUENTE ÚNICA de fondo para todas las páginas públicas (index.html debajo del Hero, catalog.html, product.html, condiciones.html, contacto.html). Scope con :has(#siteHeader): todas las públicas comparten ese header; admin.html usa .admin-header y nunca queda incluido, así su look no cambia. Implementación: SOLO background-color + background-image en — nada de pseudo-elemento con position:fixed + z-index negativo (la versión anterior). Ese enfoque es frágil entre navegadores: no crea su propio "stacking context", así que un ::before con z-index:-1 puede terminar pintándose DETRÁS del propio fondo de en vez de encima — eso es exactamente lo que producía el resultado inconsistente (Cómo comprar/Catálogo mostrando solo el background-color plano de respaldo, mientras Nosotros se veía bien porque su degradado nunca dependió de este mecanismo: vive en divs normales dentro de .brand-experience, sin trucos de z-index). Con el degradado como background-image de body no hay ambigüedad posible: un background siempre se pinta detrás de todo el contenido de su propio elemento, en cualquier navegador. background-attachment:fixed ancla el degradado al viewport (no al alto total del documento) para que se vea igual de "denso" en una página corta (Contacto) que en una larga (Catálogo con varios productos) — si algún navegador muy antiguo lo ignora, cae a "scroll" sin romper nada, solo se repite con el contenido. */ body:has(#siteHeader) { background-color: var(--bg-deep); background-image: radial-gradient(ellipse 1400px 800px at 50% -10%, rgba(255, 255, 255, 0.05), transparent 60%), linear-gradient(180deg, var(--bg-carbon) 0%, var(--bg-alt) 50%, var(--bg-deep) 100%); background-repeat: no-repeat; background-attachment: fixed; background-size: 100% 100vh; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { display: block; max-width: 100%; } a:focus-visible, button:focus-visible, input:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; } .container-wide { max-width: 1400px; margin: 0 auto; padding: 0 32px; } @media (max-width: 640px) { .container-wide { padding: 0 20px; } } .eyebrow { display: block; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--silver); font-weight: 500; margin-bottom: 10px; } /* ---------- Scroll reveal ---------- */ /* La animación de aparición al hacer scroll se desactivó por rendimiento (ver auditoría de scroll): los elementos .reveal se muestran directamente, sin depender de is-visible ni de JS. window.MVANT.observeReveal (js/main.js) se conserva como no-op porque catalog.js y home.js siguen llamándolo tras renderizar contenido dinámico. Se reconstruirá una animación específica y optimizada más adelante, donde tenga sentido. */ .reveal { opacity: 1; transform: none; } /* ---------- Header ---------- */ /* Header global de las 6 páginas públicas: transparente arriba, sólido tras el primer scroll. .is-scrolled lo activa/desactiva js/main.js mediante un IntersectionObserver sobre un sentinel de 1px al inicio del — sin listener de scroll, sin rAF (ver PASO A4). Transición corta y solo en background-color/border-color, sin blur ni transform, tal como se pidió. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; border-bottom: 1px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; } .site-header.is-scrolled { background: #050505; border-bottom-color: var(--border); } /* Marcador invisible (1x1px) al inicio de en las 6 páginas públicas — lo observa js/main.js con IntersectionObserver para saber cuándo activar/desactivar .is-scrolled. position:absolute + tamaño mínimo: no reserva espacio ni afecta el layout de nada. */ [data-scroll-sentinel] { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; opacity: 0; } /* Indicador de página activa: reutiliza el mismo ::after (línea inferior) que ya usa el hover de .nav-link, solo que en reposo en vez de solo al pasar el mouse — evita crear un segundo lenguaje visual para "activo" vs "hover". Sin pill, sin fondo, sin JS. */ .nav-link.active::after { transform: scaleX(1); opacity: 1; } /* position+z-index es necesario aquí: .mobile-nav vive DENTRO de .site-header (ver HTML) con position:fixed + z-index:90 para cubrir toda la pantalla al abrirse. Sin este z-index, .header-inner es un hijo "static" de .site-header y pinta por DEBAJO de cualquier descendiente posicionado con z-index dentro del mismo stacking context — el z-index:100 de .site-header solo importa frente a OTROS elementos de nivel superior (main, .hero, etc.), nunca frente a sus propios hijos. Sin esto, el botón de menú (dentro de .header-inner) quedaba completamente tapado por .mobile-nav al abrir el menú — imposible de ver o tocar para cerrar. */ .header-inner { position: relative; z-index: 95; max-width: 1400px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo-mark { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.14em; } .main-nav { display: flex; gap: 34px; } /* ---------- Menú desplegable (mega menu) ---------- */ .nav-item { position: relative; display: flex; align-items: center; } .mega-menu { /* Puente invisible: arranca pegado al link (sin espacio muerto) y el padding-top hace de colchón visual, así el hover nunca se corta al bajar el cursor hacia el panel. */ position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 20px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease), visibility 0.35s; z-index: 150; } .nav-item:hover .mega-menu, .nav-item:focus-within .mega-menu { opacity: 1; visibility: visible; pointer-events: auto; } /* repeat(2, 1fr): Tenis y Perfumes ahora son dos mega-menús separados (antes uno solo con 3 columnas: Hombre/Mujer/Perfumes) — cada uno solo necesita Hombre + Mujer como columnas reales; "Todos" (.mega-menu-all) ocupa la fila completa arriba, ver más abajo. */ .mega-menu-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; min-width: 380px; background: rgba(8, 8, 8, 0.94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border); padding: 30px 34px; transform: translateY(-10px); transition: transform 0.35s var(--ease); } .nav-item:hover .mega-menu-inner, .nav-item:focus-within .mega-menu-inner { transform: translateY(0); } .mega-col { display: flex; flex-direction: column; gap: 3px; } /* Fila "Todos": ocupa las 2 columnas del grid, con un separador para no confundirse con Hombre/Mujer. Reutiliza la tipografía de .mega-col-title (mismo Design System). */ .mega-menu-all { grid-column: 1 / -1; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .mega-col-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; transition: color 0.3s ease; } .mega-col-title:hover { color: var(--mvant-accent); } .mega-brand-list a { display: block; font-size: 0.82rem; color: var(--text-muted); padding: 5px 0; transition: color 0.3s ease; } .mega-brand-list a:hover { color: var(--mvant-accent); } .mega-brand-list:empty::after { content: "Próximamente"; display: block; font-size: 0.78rem; color: var(--text-muted); opacity: 0.6; padding: 5px 0; } .nav-link { position: relative; font-size: 0.76rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; padding-bottom: 6px; transition: color 0.3s ease; } .nav-link::before { /* micro chispa que recorre la línea de izquierda a derecha */ content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: radial-gradient(circle 5px at 0% 50%, var(--mvant-electric-white), var(--mvant-neon) 40%, transparent 72%); background-repeat: no-repeat; background-size: 22px 3px; background-position: -10% 0; opacity: 0; pointer-events: none; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--mvant-accent); transform: scaleX(0); transform-origin: left; opacity: 0; box-shadow: none; transition: transform 0.32s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease, box-shadow 0.35s ease; } .nav-link:hover { color: var(--mvant-accent); text-shadow: 0 0 6px rgba(0, 168, 255, 0.45); } .nav-link:hover::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 5px var(--mvant-accent), 0 0 10px rgba(0, 168, 255, 0.45); animation: mvant-glow-pulse 0.45s ease-out; } .nav-link:hover::before { animation: mvant-spark 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes mvant-glow-pulse { 0% { box-shadow: 0 0 0 rgba(0, 168, 255, 0); } 55% { box-shadow: 0 0 0 rgba(0, 168, 255, 0); } 70% { box-shadow: 0 0 9px var(--mvant-electric-white), 0 0 16px rgba(0, 217, 255, 0.7); } 100% { box-shadow: 0 0 5px var(--mvant-accent), 0 0 10px rgba(0, 168, 255, 0.45); } } @keyframes mvant-spark { 0% { opacity: 1; background-position: -10% 0; } 85% { opacity: 1; background-position: 105% 0; } 100% { opacity: 0; background-position: 110% 0; } } .header-actions { display: flex; align-items: center; gap: 18px; } /* .social-link es hoy siempre el ícono de Instagram del header — en reposo sigue blanco/ gris MVANT; el color de marca (gradiente Instagram) solo aparece al interactuar. */ .social-link { color: #fff; opacity: 0.8; transition: opacity 0.3s ease, color 0.3s ease, filter 0.3s ease; } .social-link:hover, .social-link:focus-visible, .social-link:active { opacity: 1; color: #dd2a7b; filter: drop-shadow(0 0 4px rgba(245, 133, 41, 0.4)) drop-shadow(0 0 4px rgba(129, 52, 175, 0.35)); } /* ---------- Microinteracción de marca global: WhatsApp / Instagram ---------- Regla única, por href/atributo — no por página ni por componente — para que cualquier enlace REAL de estas dos plataformas (footer, menú mobile, CTA de Home, dock de compra de Product Page, tarjeta de Contacto) muestre su color de marca solo al interactuar, sin tocar el archivo de esas páginas ni duplicar la regla en cada una. En reposo todo sigue blanco/gris MVANT — el color nunca es el estado por defecto. Quedan fuera (ya tienen su propio tratamiento dedicado, ver arriba/abajo): .social-link, .contact-card (icono/CTA con su glow propio), .btn-whatsapp (icono verde ya aprobado en Product Page/Bolsa) y #contactWhatsapp. */ a[href*="instagram.com"]:not(.social-link):not(.contact-card):hover, a[href*="instagram.com"]:not(.social-link):not(.contact-card):focus-visible, a[href*="instagram.com"]:not(.social-link):not(.contact-card):active { color: #dd2a7b; text-shadow: 0 0 8px rgba(245, 133, 41, 0.35), 0 0 8px rgba(129, 52, 175, 0.3); } a[data-wa-link]:not(.btn-whatsapp):hover, a[data-wa-link]:not(.btn-whatsapp):focus-visible, a[data-wa-link]:not(.btn-whatsapp):active, a[href*="wa.me"]:not(.btn-whatsapp):not(#contactWhatsapp):hover, a[href*="wa.me"]:not(.btn-whatsapp):not(#contactWhatsapp):focus-visible, a[href*="wa.me"]:not(.btn-whatsapp):not(#contactWhatsapp):active { color: #25d366; text-shadow: 0 0 8px rgba(37, 211, 102, 0.35); } .menu-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; } .menu-toggle span { display: block; height: 2px; width: 26px; border-radius: 1px; background: #fff; transition: transform 0.3s ease, opacity 0.3s ease; } .menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { opacity: 0; } .menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav { display: none; } @media (max-width: 860px) { .main-nav { display: none; } .menu-toggle { display: flex; } /* Dark soft/liquid glass — translúcido + blur moderado (14px, no full-screen pesado), en vez del fondo sólido anterior. El propio panel hace de "backdrop": tocar el fondo entre los links (fuera de un ) cierra el menú, ver lógica en main.js. */ .mobile-nav { position: fixed; inset: 0; padding: 110px 32px 40px; background: rgba(8, 8, 8, 0.88); border-left: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 22px; transform: translateY(-100%); transition: transform 0.45s var(--ease); z-index: 90; overflow-y: auto; } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .mobile-nav { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } .mobile-nav.is-open { transform: translateY(0); } .mobile-nav a { font-size: 1.35rem; font-weight: 500; letter-spacing: 0.02em; color: #fff; border-bottom: 1px solid var(--border); padding-bottom: 16px; transition: color 0.2s ease; } .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--mvant-accent); } body.nav-open { overflow: hidden; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-alt); } /* ---------- Hero MVANT 2.0 — imágenes finales (mvant-hero-desktop.jpeg / mobile.jpeg) ----------