/* ========================================================================== VITRINE — tema escuro premium. Só vale dentro de , então o painel continua claro. ========================================================================== */ body.store { --gold: #ffc422; --gold-2: #ffd873; --gold-3: #b98600; --gold-dim: rgba(255, 196, 34, 0.16); --bg: #07070a; --bg-2: #0e0e13; --bg-3: #16161d; --card: rgba(255, 255, 255, 0.035); --line: rgba(255, 255, 255, 0.09); --line-2: rgba(255, 196, 34, 0.28); --text: #f5f3ee; --text-2: #97948d; --danger: #ff6b6b; --green: #25d366; --radius: 18px; --shadow: 0 24px 70px rgba(0, 0, 0, 0.55); --glow: 0 0 40px rgba(255, 196, 34, 0.22); --maxw: 1180px; background: var(--bg); color: var(--text); overflow-x: hidden; } /* Brilho ambiente no topo: dá profundidade sem pesar */ body.store::before { content: ''; position: fixed; inset: -20% -10% auto -10%; height: 70vh; z-index: 0; background: radial-gradient(60% 60% at 20% 0%, rgba(255, 196, 34, 0.16), transparent 70%), radial-gradient(50% 50% at 85% 10%, rgba(120, 90, 255, 0.1), transparent 70%); pointer-events: none; animation: auraDrift 18s ease-in-out infinite alternate; } body.store::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(100% 60% at 50% 0%, #000 0%, transparent 75%); -webkit-mask-image: radial-gradient(100% 60% at 50% 0%, #000 0%, transparent 75%); } @keyframes auraDrift { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.08); } } body.store > * { position: relative; z-index: 1; } body.store .btn-ghost { border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, 0.04); } body.store .btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(255, 196, 34, 0.08); } body.store .btn-gold { color: #17120b; } .btn-sm { padding: 9px 16px; font-size: 13px; } body.store .modal-close { background: rgba(20, 20, 26, 0.9); border-color: var(--line); color: var(--text); backdrop-filter: blur(8px); } body.store .modal-close:hover { border-color: var(--gold); color: var(--gold); } body.store .toast { position: fixed; background: rgba(20, 20, 26, 0.96); color: var(--text); border-color: var(--line-2); backdrop-filter: blur(12px); } /* ---------- aparecer no scroll ---------- */ .reveal { opacity: 0; transform: translateY(48px) scale(0.96); filter: blur(10px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), filter 0.9s var(--ease); transition-delay: var(--d, 0ms); will-change: opacity, transform, filter; } .reveal.reveal-left { transform: translateX(-40px) translateY(18px) scale(0.97); } .reveal.reveal-right { transform: translateX(40px) translateY(18px) scale(0.97); } .reveal.reveal-scale { transform: translateY(24px) scale(0.88); } .reveal.in { opacity: 1; transform: none; filter: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; filter: none; transition: none; } body.store::before { animation: none; } .hero-logo { animation: none; } .hero-logo-wrap:hover .hero-logo { scale: none; rotate: none; filter: none; } .wa-float, .wa-float::before, .wa-float::after { animation: none !important; } } /* ---------- porta de idade ---------- */ body.store .age-gate { position: fixed; inset: 0; z-index: 200; background: rgba(5, 5, 8, 0.86); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: center; padding: 20px; } body.store .age-box { background: linear-gradient(160deg, rgba(30, 30, 38, 0.95), rgba(12, 12, 16, 0.98)); border: 1px solid var(--line-2); border-radius: 26px; padding: 36px 30px; max-width: 380px; width: 100%; text-align: center; box-shadow: var(--shadow), var(--glow); animation: pop 0.4s var(--ease); } .age-logo { width: 96px; height: 96px; margin: 0 auto 18px; border-radius: 50%; box-shadow: var(--glow); } body.store .age-box h2 { font-family: var(--font-display); font-size: 21px; margin-bottom: 10px; color: var(--gold); } body.store .age-box p { color: var(--text-2); font-size: 14px; line-height: 1.55; margin-bottom: 22px; } .age-actions { display: flex; flex-direction: column; gap: 10px; } /* ---------- barra de promoção ---------- */ .promo-bar { position: relative; z-index: 70; background: linear-gradient(90deg, var(--gold-3), var(--gold) 45%, #ffe9a8 70%, var(--gold)); background-size: 200% 100%; animation: promoShine 6s linear infinite; color: #17120b; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 14px calc(9px); font-size: 13.5px; font-weight: 800; text-align: center; flex-wrap: wrap; } @keyframes promoShine { to { background-position: -200% 0; } } .promo-bar-cta { background: #17120b; color: var(--gold); padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; } .promo-bar-cta:hover { background: #000; } /* ---------- cabeçalho ---------- */ body.store .header { position: sticky; top: 0; z-index: 60; background: rgba(9, 9, 13, 0.72); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid transparent; padding-top: max(18px, env(safe-area-inset-top)); transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } body.store .header.scrolled { background: rgba(7, 7, 10, 0.92); border-bottom-color: var(--line); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .header-inner { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 14px; display: flex; align-items: center; gap: 14px; } body.store .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: transparent; box-shadow: 0 0 0 1px var(--line), 0 6px 20px rgba(255, 196, 34, 0.18); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } body.store .brand:hover .brand-mark { transform: rotate(-4deg) scale(1.05); box-shadow: 0 0 0 1px var(--line-2), var(--glow); } body.store .brand-name { font-size: 15px; background: linear-gradient(100deg, #fff3cf, var(--gold) 45%, #a97b00 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .search-wrap { flex: 1; position: relative; max-width: 440px; margin: 0 auto; } .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-2); pointer-events: none; } #search { width: 100%; padding: 11px 16px 11px 40px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-size: 16px; outline: none; transition: border 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } #search:focus { border-color: var(--gold); background: rgba(255, 196, 34, 0.06); box-shadow: 0 0 0 3px var(--gold-dim); } #search::placeholder { color: var(--text-2); } .cart-btn { position: relative; height: 44px; padding: 0 16px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; font-size: 14px; gap: 8px; box-shadow: 0 6px 22px rgba(255, 190, 14, 0.32); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .cart-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(255, 190, 14, 0.45); } .cart-count { background: #17120b; color: var(--gold); font-size: 12px; font-weight: 800; min-width: 20px; height: 20px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 6px; animation: pop 0.3s var(--ease); } /* ---------- categorias ---------- */ .categories { max-width: var(--maxw); margin: 0 auto; padding: 0 16px 10px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .categories::-webkit-scrollbar { display: none; } .cat-pill { padding: 9px 17px; border-radius: 999px; white-space: nowrap; scroll-snap-align: start; font-size: 13px; font-weight: 700; color: var(--text-2); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); transition: all 0.2s var(--ease); } .cat-pill:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-1px); } .cat-pill.active { background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; border-color: transparent; box-shadow: 0 6px 20px rgba(255, 190, 14, 0.3); } /* ---------- hero ---------- */ .hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 6vw, 70px) 16px clamp(20px, 4vw, 40px); display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; text-align: center; } .hero-glow { position: absolute; left: 50%; top: 10%; width: min(620px, 90%); aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 196, 34, 0.18), transparent 62%); filter: blur(30px); pointer-events: none; animation: pulseGlow 7s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.12); } } .hero-logo-wrap { display: flex; justify-content: center; } .hero-logo { width: clamp(132px, 26vw, 200px); height: auto; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 196, 34, 0.3), 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 60px rgba(255, 196, 34, 0.2); animation: floaty 6s ease-in-out infinite; transform-origin: center; transition: scale 0.45s var(--ease), rotate 0.45s var(--ease), filter 0.45s var(--ease), box-shadow 0.45s var(--ease); } .hero-logo-wrap:hover .hero-logo { scale: 1.1; rotate: -8deg; filter: brightness(1.12) saturate(1.12); box-shadow: 0 0 0 3px rgba(255, 196, 34, 0.5), 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 90px rgba(255, 196, 34, 0.55); } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto; font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 16px; background: rgba(255, 196, 34, 0.07); } .hero-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); animation: livePulse 2s infinite; } @keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(34px, 7.5vw, 68px); letter-spacing: 0.01em; line-height: 1.02; margin-top: 0; background: linear-gradient(100deg, #fff8e2 5%, var(--gold) 40%, #a97b00 70%, #ffe6a3 95%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: titleShine 8s linear infinite; } @keyframes titleShine { to { background-position: -220% 0; } } .hero-tagline { color: var(--text); font-weight: 700; font-size: clamp(13px, 2.2vw, 17px); margin-top: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .hero-desc { color: var(--text-2); font-size: clamp(13px, 1.7vw, 15px); margin: 12px auto 0; white-space: pre-line; line-height: 1.7; max-width: 620px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 26px; } .hero-actions .btn { padding: 14px 26px; font-size: 14.5px; } .btn-wa { background: var(--green); color: #05230f; box-shadow: 0 8px 26px rgba(37, 211, 102, 0.3); } .btn-wa:hover { transform: translateY(-1px); box-shadow: 0 12px 34px rgba(37, 211, 102, 0.45); } .btn-orders { background: linear-gradient(135deg, #1a1a22, #101016); color: var(--gold); border: 1px solid var(--line-2); box-shadow: 0 8px 26px rgba(255, 196, 34, 0.12); } .btn-orders:hover { transform: translateY(-1px); border-color: var(--gold); box-shadow: 0 12px 34px rgba(255, 196, 34, 0.22); } .hero-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; } .hero-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--text-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; background: rgba(255, 255, 255, 0.025); transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .hero-chip:hover { border-color: var(--line-2); color: var(--text); transform: translateY(-2px); } .hero-banner-wrap { margin-top: 8px; } .hero-banner { width: 100%; max-height: clamp(150px, 26vw, 300px); object-fit: contain; border-radius: 22px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.02); } /* Banner claro oculto por enquanto — o convite do app ocupa esse espaço */ #banner-section { display: none !important; } #install-section { margin-top: clamp(18px, 3.5vw, 32px); } /* ---------- títulos de seção ---------- */ .section { max-width: var(--maxw); margin: clamp(38px, 7vw, 76px) auto 0; padding: 0 16px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .section-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-2); display: block; margin-bottom: 7px; } .section-head h2 { font-family: var(--font-display); font-size: clamp(20px, 3.4vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .section-head p { color: var(--text-2); font-size: 13.5px; margin-top: 6px; } .result-count { color: var(--text-2); font-size: 13px; font-weight: 600; } /* ---------- promoções (cards editáveis no painel) ---------- */ .promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .promo-card { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(150deg, rgba(255, 196, 34, 0.1), rgba(255, 255, 255, 0.02) 45%, rgba(120, 90, 255, 0.07)); padding: 24px 22px; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .promo-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 80% 0%, rgba(255, 196, 34, 0.18), transparent 65%); opacity: 0.9; transition: opacity 0.35s var(--ease); } .promo-card:hover { transform: translateY(-5px); border-color: var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), var(--glow); } .promo-card:hover::after { opacity: 1; } .promo-card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; transform: scale(1.02); transition: transform 0.6s var(--ease), opacity 0.35s var(--ease); } .promo-card:hover .promo-card-img { transform: scale(1.08); opacity: 0.5; } .promo-card.has-img { background: #0c0c11; } .promo-card.has-img::after { background: linear-gradient(to top, rgba(6, 6, 9, 0.95) 15%, rgba(6, 6, 9, 0.5) 55%, rgba(6, 6, 9, 0.2)); } .promo-badge { align-self: flex-start; font-size: 10.5px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; background: var(--gold); color: #17120b; padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 20px rgba(255, 196, 34, 0.35); } .promo-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.2; } .promo-sub { color: var(--text-2); font-size: 13.5px; line-height: 1.55; } .promo-cta { align-self: flex-start; margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; background: var(--gold); color: #17120b; font-weight: 800; font-size: 13.5px; padding: 11px 20px; border-radius: 999px; box-shadow: 0 8px 24px rgba(255, 196, 34, 0.3); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), gap 0.2s var(--ease); } .promo-cta:hover { transform: translateY(-2px); gap: 12px; box-shadow: 0 12px 32px rgba(255, 196, 34, 0.45); } .promo-cta svg { width: 15px; height: 15px; } /* ---------- ofertas (produtos com preço promocional) ---------- */ .deals-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: none; } .deals-rail::-webkit-scrollbar { display: none; } .deals-rail .card { scroll-snap-align: start; } @media (min-width: 860px) { .deals-rail { grid-auto-columns: minmax(210px, 1fr); } } /* ---------- como comprar ---------- */ .howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .howto-step { position: relative; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; font-size: 13.5px; font-weight: 600; line-height: 1.35; backdrop-filter: blur(6px); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease); } .howto-step:hover { border-color: var(--line-2); transform: translateY(-3px); } .howto-step b { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; box-shadow: 0 6px 18px rgba(255, 196, 34, 0.28); } /* ---------- faixa de informações ---------- */ .info-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .info-item { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 16px; backdrop-filter: blur(6px); } .info-item span { font-size: 22px; flex-shrink: 0; } .info-item p { font-size: 12.5px; color: var(--text-2); line-height: 1.55; } /* ---------- instalar o app ---------- */ .install-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid var(--line-2); border-radius: 22px; padding: 22px 24px; background: linear-gradient(120deg, rgba(255, 196, 34, 0.12), rgba(255, 255, 255, 0.03) 55%, rgba(37, 211, 102, 0.06)); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28); } .install-card img { width: 54px; height: 54px; border-radius: 14px; box-shadow: var(--glow); } .install-text { flex: 1 1 220px; min-width: 0; } .install-text strong { display: block; font-size: 15px; margin-bottom: 4px; } .install-text p { color: var(--text-2); font-size: 13px; line-height: 1.5; } .install-card .btn { flex-shrink: 0; } /* ---------- grade de produtos ---------- */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; } @media (min-width: 700px) { .grid { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 18px; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; cursor: pointer; position: relative; backdrop-filter: blur(8px); transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); } .card:hover { transform: translateY(-6px); border-color: var(--line-2); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 196, 34, 0.14); } .card-img-wrap { position: relative; aspect-ratio: 1; background: #0b0b10; overflow: hidden; } .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); } .card:hover .card-img { transform: scale(1.07); } .card-img-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7, 7, 10, 0.65), transparent 45%); } .badge { position: absolute; top: 9px; left: 9px; z-index: 2; font-size: 9.5px; font-weight: 900; letter-spacing: 0.06em; padding: 5px 9px; border-radius: 999px; text-transform: uppercase; } .badge-promo { background: var(--gold); color: #17120b; box-shadow: 0 6px 18px rgba(255, 196, 34, 0.45); } .badge-out { background: rgba(10, 10, 14, 0.92); color: var(--danger); border: 1px solid var(--danger); top: auto; bottom: 10px; } .badge-feat { background: rgba(10, 10, 14, 0.85); color: var(--gold-2); border: 1px solid var(--line-2); left: auto; right: 9px; } .card-body { padding: 13px 14px 15px; } .card-cat { font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--gold-2); text-transform: uppercase; opacity: 0.9; } .card-opts { font-size: 11px; font-weight: 600; color: var(--text-2); margin: -2px 0 8px; } .card-name { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 5px 0 9px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; } .card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .card-price { font-size: 17px; font-weight: 800; color: var(--gold); } .card-price-old { font-size: 12.5px; color: var(--text-2); text-decoration: line-through; } .card-cta { margin-top: 11px; width: 100%; padding: 11px; background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; border-radius: 999px; font-weight: 800; font-size: 13.5px; text-align: center; transition: box-shadow 0.25s var(--ease); } .card:hover .card-cta { box-shadow: 0 8px 22px rgba(255, 196, 34, 0.35); } .card.out .card-cta { background: rgba(255, 255, 255, 0.06); color: var(--text-2); } .card.out .card-img { filter: grayscale(0.9) brightness(0.55); } /* esqueleto de carregamento */ .skel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .skel-img { aspect-ratio: 1; background: linear-gradient(100deg, #14141a 40%, #1e1e26 50%, #14141a 60%); background-size: 200% 100%; animation: shimmer 1.3s infinite; } .skel-line { height: 12px; margin: 12px 14px; border-radius: 6px; background: #16161d; } .skel-line.short { width: 55%; } .empty { text-align: center; padding: 70px 20px; color: var(--text-2); } .empty span { font-size: 44px; display: block; margin-bottom: 12px; } /* ---------- rodapé ---------- */ .footer { border-top: 1px solid var(--line); margin-top: clamp(50px, 9vw, 90px); background: linear-gradient(to bottom, transparent, rgba(255, 196, 34, 0.04)); } .footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 46px 16px 34px; text-align: center; } .footer-logo { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; opacity: 0.95; } .footer-brand { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); letter-spacing: 0.08em; margin-bottom: 8px; font-size: 16px; } .footer-inner > p { color: var(--text-2); font-size: 13.5px; } .footer-links { display: flex; gap: 10px; justify-content: center; margin: 20px 0; flex-wrap: wrap; } .footer-legal { font-size: 11.5px !important; opacity: 0.65; max-width: 480px; margin: 0 auto; line-height: 1.65; } /* ---------- botão flutuante do WhatsApp ---------- */ /* specificity alta: body.store > * { position:relative } não pode “roubar” o fixed */ body.store .wa-float { position: fixed; left: auto; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 70; width: 58px; height: 58px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 34px rgba(37, 211, 102, 0.45); animation: waBounce 2.4s var(--ease) infinite; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } body.store .wa-float::before, body.store .wa-float::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.55); pointer-events: none; } body.store .wa-float::before { animation: waRipple 2.2s ease-out infinite; } body.store .wa-float::after { animation: waRipple 2.2s ease-out 1.1s infinite; } @keyframes waRipple { 0% { transform: scale(1); opacity: 0.75; } 100% { transform: scale(1.7); opacity: 0; } } @keyframes waBounce { 0%, 70%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-7px) scale(1.06); } 50% { transform: translateY(0) scale(1); } 58% { transform: translateY(-3px) scale(1.03); } } body.store .wa-float:hover { animation: none; transform: scale(1.1); box-shadow: 0 16px 40px rgba(37, 211, 102, 0.55); } body.store .wa-float svg { width: 30px; height: 30px; position: relative; z-index: 1; } /* ---------- janelas ---------- */ /* body.store > * { position:relative } não pode roubar o fixed destes overlays */ body.store .drawer-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(3, 3, 5, 0.72); backdrop-filter: blur(6px); animation: fade 0.25s var(--ease); } body.store .product-modal { position: fixed; z-index: 90; inset: 0; margin: auto; width: min(1060px, calc(100vw - 24px)); max-height: calc(100vh - 24px); display: flex; flex-direction: column; background: linear-gradient(160deg, #14141b, #0b0b10); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); animation: pop 0.3s var(--ease); } .modal-body { min-width: 0; min-height: 0; overflow: auto; flex: 1; } .modal-grid { display: grid; grid-template-columns: 1fr; min-width: 0; align-items: start; } .modal-media { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .modal-img-wrap { background: #0b0b10; aspect-ratio: 1; position: relative; min-width: 0; overflow: hidden; max-height: 42vh; } .modal-img { width: 100%; height: 100%; max-width: 100%; object-fit: cover; } .modal-info { padding: clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px) 22px; display: flex; flex-direction: column; min-width: 0; gap: 0; } .modal-cat { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--gold-2); text-transform: uppercase; } .modal-name { font-family: var(--font-display); font-size: clamp(17px, 2.4vw, 23px); font-weight: 700; line-height: 1.3; margin: 8px 0 12px; padding-right: 36px; overflow-wrap: anywhere; } .modal-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; } .modal-price { font-size: clamp(21px, 3.4vw, 28px); font-weight: 800; color: var(--gold); } .modal-price-old { font-size: 15px; color: var(--text-2); text-decoration: line-through; } @media (min-width: 800px) { .modal-body { overflow: auto; } .modal-grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr); max-height: none; min-height: 0; } .modal-img-wrap { max-height: min(420px, 48vh); height: auto; aspect-ratio: 1; } .modal-info { overflow: visible; padding-top: clamp(16px, 3vw, 28px); } .modal-media { padding: clamp(16px, 3vw, 24px) 0 clamp(16px, 3vw, 24px) clamp(16px, 3vw, 24px); } } .opt-wrap { margin: 0 0 14px; } .opt-label { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 9px; } .opt-list { display: flex; flex-direction: column; gap: 7px; overflow: visible; max-height: none; } .opt-item { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; text-align: left; padding: 9px 11px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); color: var(--text); font-size: 13px; font-weight: 600; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .opt-item span { min-width: 0; flex: 1; overflow-wrap: anywhere; line-height: 1.3; } .opt-item img { width: 42px; height: 42px; object-fit: cover; border-radius: 9px; background: #0b0b10; flex-shrink: 0; } .opt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); flex-shrink: 0; } .opt-item:hover:not(:disabled):not(.disabled) { border-color: var(--line-2); } .opt-item.selected { border-color: var(--gold); background: rgba(255, 196, 34, 0.12); box-shadow: 0 0 0 1px var(--gold); } .opt-item.disabled { opacity: 0.35; cursor: not-allowed; } .opt-hint { font-size: 12px; color: var(--text-2); margin-top: 9px; } .modal-desc { color: var(--text-2); font-size: 13.5px; line-height: 1.7; white-space: pre-line; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); overflow-wrap: anywhere; } .modal-desc-title { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 8px; } .modal-actions { margin-top: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .modal-actions .btn { min-width: 0; flex: 1 1 160px; } .qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.03); } .qty button { width: 42px; height: 44px; font-size: 18px; font-weight: 700; color: var(--text-2); transition: color 0.15s, background 0.15s; } .qty button:hover { color: var(--gold); background: rgba(255, 196, 34, 0.1); } .qty span { min-width: 34px; text-align: center; font-weight: 700; } /* ---------- gaveta do pedido ---------- */ body.store .cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(420px, 100vw); background: linear-gradient(180deg, #101017, #0a0a0e); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: slideIn 0.3s var(--ease); overflow: hidden; } /* ---------- gaveta de pedidos (despacho) ---------- */ body.store .orders-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(460px, 100vw); background: linear-gradient(180deg, #101017, #0a0a0e); border-left: 1px solid var(--line); display: flex; flex-direction: column; animation: slideIn 0.3s var(--ease); overflow: hidden; } .orders-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .orders-head h3 { font-family: var(--font-display); font-size: 17px; } .orders-head .modal-close { position: static; } .orders-tabs { display: flex; gap: 8px; padding: 12px 16px 0; flex-shrink: 0; } .orders-tab { flex: 1; padding: 10px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; border: 1px solid var(--line); color: var(--text-2); background: rgba(255, 255, 255, 0.03); } .orders-tab.active { background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; border-color: transparent; } .orders-hint { padding: 10px 18px 0; font-size: 12px; color: var(--text-2); line-height: 1.45; flex-shrink: 0; } .orders-list { flex: 1; overflow-y: auto; padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 12px; } .order-card { border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.03); padding: 14px; } .order-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .order-card strong { font-size: 14.5px; color: var(--text); } .order-card time { font-size: 11.5px; color: var(--text-2); white-space: nowrap; } .order-card-meta { font-size: 12.5px; color: var(--text-2); line-height: 1.5; margin-bottom: 8px; } .order-card-items { font-size: 12.5px; color: var(--text); line-height: 1.55; margin-bottom: 10px; } .order-card-total { font-size: 14px; font-weight: 800; color: var(--gold); margin-bottom: 10px; } .order-card-actions { display: flex; gap: 8px; flex-wrap: wrap; } .order-card-actions .btn { flex: 1; min-width: 120px; padding: 10px 12px; font-size: 12.5px; } .orders-empty { text-align: center; padding: 48px 20px; color: var(--text-2); } .orders-empty span { font-size: 36px; display: block; margin-bottom: 10px; } .cart-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-shrink: 0; } .cart-head h3 { font-family: var(--font-display); font-size: 17px; } .cart-head .modal-close { position: static; } .cart-summary { margin: 0; padding: 9px 20px; font-size: 13px; font-weight: 800; color: var(--gold); border-bottom: 1px solid var(--line); background: rgba(255, 196, 34, 0.06); flex-shrink: 0; } .cart-items { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; overflow-y: auto; flex: 1 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; } .cart-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-radius: 14px; padding: 10px; animation: fadeUp 0.3s var(--ease); } .cart-item img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: #0b0b10; } .cart-item-name { font-size: 13px; font-weight: 600; line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-item-opt { font-size: 12px; color: var(--gold-2); font-weight: 600; margin: -2px 0 6px; } .cart-item-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cart-item-price { font-size: 13.5px; font-weight: 800; color: var(--gold); } .qty.small button { width: 30px; height: 30px; font-size: 14px; } .qty.small span { min-width: 24px; font-size: 13px; } .cart-item-remove { color: var(--text-2); font-size: 16px; padding: 6px; transition: color 0.15s; } .cart-item-remove:hover { color: var(--danger); } .cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-2); gap: 10px; } .cart-empty span { font-size: 44px; } .cart-foot { border-top: 1px solid var(--line); padding: 14px 20px 18px; overflow-y: auto; max-height: 62vh; flex: 0 1 auto; min-height: 0; background: #0a0a0e; position: relative; z-index: 2; } .step-title { font-size: 15px; font-weight: 800; color: var(--gold); margin: 4px 0 10px; } .choice-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .choice-group-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); margin: 8px 0 6px; } .choice-group-label:first-child { margin-top: 0; } .choice { width: 100%; text-align: left; padding: 13px 15px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); color: var(--text); font-size: 14px; font-weight: 700; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .choice strong { font-weight: 800; } .choice small { display: block; font-weight: 500; color: var(--text-2); margin-top: 3px; } .choice.selected { border-color: var(--gold); background: rgba(255, 196, 34, 0.12); box-shadow: 0 0 0 1px var(--gold); } .choice.city-choice { padding: 16px 16px 14px; font-size: 16px; } .choice.city-choice strong { font-size: 17px; display: block; margin-bottom: 2px; } .choice.city-choice .city-choice-price { color: var(--gold); font-weight: 800; } .choice.city-choice small { font-size: 13px; margin-top: 4px; } .city-warn { font-size: 13px; font-weight: 700; line-height: 1.45; color: #ffd873; background: rgba(255, 196, 34, 0.1); border: 1px solid var(--line-2); border-radius: 12px; padding: 11px 13px; margin: 0 0 12px; } .city-confirm { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 700; line-height: 1.35; margin: 4px 0 12px; cursor: pointer; } .city-confirm input { width: 21px; height: 21px; margin-top: 1px; flex-shrink: 0; accent-color: var(--gold); } .city-banner { display: flex; flex-direction: column; gap: 4px; background: rgba(255, 196, 34, 0.1); border: 1px solid var(--gold); border-radius: 14px; padding: 14px 16px; margin: 4px 0 14px; text-align: center; } .city-banner strong { font-size: 16px; font-weight: 900; color: var(--gold); letter-spacing: 0.02em; text-transform: uppercase; } .city-banner small { font-size: 12.5px; color: var(--text-2); font-weight: 600; } .checkout-fields label, .note-label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 10px; } .checkout-fields input, .note-label textarea { width: 100%; padding: 13px 14px; margin-top: 6px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 16px; outline: none; font-family: inherit; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .checkout-fields input:focus, .note-label textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); } .note-label textarea { resize: none; min-height: 56px; } .coupon-box { margin: 0 0 12px; } .coupon-toggle { background: none; border: 0; padding: 0; color: var(--gold-2); font-size: 13.5px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .coupon-toggle:hover { color: var(--gold); } .coupon-row { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; } .coupon-row input { flex: 1; min-width: 0; padding: 12px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 15px; outline: none; font-family: inherit; text-transform: uppercase; } .coupon-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); } .coupon-msg { font-size: 12.5px; font-weight: 700; margin-top: 8px; color: var(--green); } .coupon-msg.bad { color: var(--danger); } .cart-totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .cart-totals > div { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-2); } .cart-total { padding-top: 9px; border-top: 1px dashed var(--line); font-size: 16px !important; color: var(--text) !important; } .cart-total strong { color: var(--gold); font-size: 19px; } #cart-discount-row strong { color: var(--green); } .cart-note { font-size: 11.5px; color: var(--text-2); text-align: center; margin-top: 10px; white-space: pre-line; line-height: 1.5; } .checkout-success { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px 18px 20px; min-height: 360px; gap: 12px; } .confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .success-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; } .success-emoji { font-size: 42px; animation: pop 0.45s var(--ease); } .success-content h3 { font-family: var(--font-display); font-size: 22px; color: var(--gold); line-height: 1.2; } .success-content p { color: var(--text-2); font-size: 14px; line-height: 1.55; } /* ---------- passos do checkout ---------- */ .checkout-wizard { display: flex; flex-direction: column; gap: 12px; } .wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wizard-step-label { font-size: 12px; font-weight: 700; color: var(--text-2); } .wizard-dots { display: flex; gap: 6px; } .wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--line); transition: all 0.3s var(--ease); } .wizard-dot.active { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 196, 34, 0.6); } .wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; } .wizard-nav .btn { flex: 1; } .cart-totals-compact { margin: 0; } /* ---------- barra fixa do pedido (celular) ---------- */ body.store .cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 65; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(8, 8, 12, 0.94); border-top: 1px solid var(--line); backdrop-filter: blur(14px); animation: fadeUp 0.3s var(--ease); } .cart-bar-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-radius: 999px; background: linear-gradient(135deg, var(--gold), #f0a500); color: #17120b; font-weight: 800; font-size: 15px; box-shadow: 0 8px 26px rgba(255, 190, 14, 0.35); } .cart-bar-btn strong { font-size: 16px; } /* ========================================================================== CELULAR ========================================================================== */ @media (min-width: 700px) { .cart-bar { display: none !important; } } @media (max-width: 699px) { body.store.has-cart-bar { padding-bottom: calc(78px + env(safe-area-inset-bottom)); } body.store .wa-float { bottom: calc(86px + env(safe-area-inset-bottom)); right: max(14px, env(safe-area-inset-right)); width: 54px; height: 54px; } body.store .wa-float svg { width: 27px; height: 27px; } body.store.has-cart-bar .wa-float { bottom: calc(86px + env(safe-area-inset-bottom)); } .header-inner { gap: 8px; padding: 14px 12px 12px; } .cart-btn { padding: 0 13px; height: 42px; } .cart-btn-text { display: none; } body.store .brand-mark { width: 34px; height: 34px; } .hero { padding: 20px 16px 12px; gap: 18px; } .hero-actions { gap: 9px; } .hero-actions .btn { flex: 1 1 100%; padding: 15px 20px; } .hero-chips { gap: 7px; } .hero-chip { font-size: 11.5px; padding: 7px 12px; } .section { margin-top: 34px; } .howto { grid-template-columns: 1fr; gap: 9px; } .howto-step { padding: 13px 14px; } .info-strip { grid-template-columns: 1fr; } .promos { grid-template-columns: 1fr; } .promo-card { min-height: 180px; padding: 20px 18px; } .deals-rail { grid-auto-columns: 62%; } .install-card { padding: 16px; gap: 12px; } .install-card .btn { flex: 1 1 100%; } .product-modal { width: 100%; height: 100dvh; max-height: 100dvh; inset: 0; margin: 0; border-radius: 0; padding-top: env(safe-area-inset-top); } .modal-img-wrap { max-height: 32vh; } .modal-actions { position: sticky; bottom: 0; z-index: 2; background: #0b0b10; padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); margin: 8px -4px 0; border-top: 1px solid var(--line); } .cart-drawer { width: 100vw; height: 100dvh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .cart-items { flex: 0 0 auto; max-height: min(22vh, 168px); overflow-y: auto; padding: 8px 12px; gap: 8px; background: transparent; } .cart-item { grid-template-columns: 48px 1fr auto; padding: 8px; gap: 8px; } .cart-item img { width: 48px; height: 48px; } .cart-foot { flex: 1 1 0; max-height: none; min-height: 0; overflow-y: auto; padding: 10px 14px 0; } .checkout-wizard { min-height: 100%; } .city-warn { font-size: 12px; padding: 9px 11px; margin-bottom: 8px; } .choice.city-choice { padding: 11px 13px 9px; } .choice.city-choice strong { font-size: 15px; } .choice.city-choice small { font-size: 12px; margin-top: 2px; } .city-confirm { margin: 2px 0 8px; font-size: 13px; } .cart-totals-compact { margin-bottom: 4px; } .wizard-nav { position: sticky; bottom: 0; z-index: 3; flex-shrink: 0; background: #0a0a0e; padding: 8px 0 calc(10px + env(safe-area-inset-bottom)); margin-top: auto; } .wizard-nav .btn { padding: 15px 12px; font-size: 15px; } #cart-drawer:not(.hidden) ~ .cart-bar { display: none !important; } .toast, .toast-ask { bottom: calc(18px + env(safe-area-inset-bottom)); } body.store.has-cart-bar .toast, body.store.has-cart-bar .toast-ask { bottom: calc(92px + env(safe-area-inset-bottom)); } } @media (max-width: 560px) { body.store .brand-name { display: none; } .search-wrap { max-width: none; } } /* Telas grandes: hero em duas colunas */ @media (min-width: 900px) { .hero { grid-template-columns: 1.15fr 0.85fr; text-align: left; padding-top: 56px; gap: 40px; } .hero-content { order: 1; } .hero-logo-wrap { order: 2; } .hero-eyebrow { margin: 0; } .hero-desc { margin-left: 0; } .hero-actions, .hero-chips { justify-content: flex-start; } .hero-logo { width: clamp(200px, 22vw, 280px); } .hero-glow { left: 72%; top: 0; } }