/* ========================================================= GLOBAL DISTRIBUIDORA, Design System v3 Branco + azul elétrico · ilha flutuante · marca real ========================================================= */ :root{ --bg:#FFFFFF; --bg-grad:#F4F7FC; --bg-soft:#F4F7FC; --surface:#FFFFFF; --surface-2:#F0F4FA; --border:#E4E9F2; --border-soft:#EEF2F8; --accent:#0E5AE6; /* azul elétrico primário */ --accent-hi:#2E74FF; /* hover */ --accent-ink:#FFFFFF; /* texto sobre azul */ --blue-deep:#0A2E86; --navy:#0A2447; --blue-soft:#EAF1FE; --ok:#12B76A; --ok-dim:#E6F7EF; --ink:#0F1A2E; --ink-2:#566079; --ink-3:#8A93A6; --radius:16px; --radius-sm:12px; --shadow:0 6px 24px rgba(16,40,80,.08); --shadow-sm:0 3px 12px rgba(16,40,80,.06); --glow:0 10px 30px rgba(14,90,230,.18); --maxw:1200px; --font-d:'Sora',system-ui,sans-serif; --font-b:'Inter',system-ui,sans-serif; } /* ========================================================= A RÉGUA — matemática de design (09/07/2026) Antes disso o site tinha 52 tamanhos de fonte (incluindo meio-pixel: 12.5px usado 25×) e 57 valores de espaçamento. Não era um sistema, era sedimento. Aqui ficam as ÚNICAS medidas permitidas. LEI: código novo usa var(--fs-*) e var(--sp-*). Número solto em font-size/padding/margin/gap/border-radius é reprovado pelo `node _dev/gate-regua.js`. Não normalizado de propósito (o gate conhece as exceções): - font-size > 56px → display/assinatura (marquee, 404, chrome do hero) - espaço > 48px → calibragem de colisão (folga do CNPJ no rodapé, cenas do menu e do hero derivadas de --mw) - border-width → `0 0 13px 13px` é triângulo em CSS, não traço ========================================================= */ :root{ /* tipografia — razão ~1.2, ancorada no corpo de 16px. 8/10px existem só pro micro-lettering de rua (comanda, plaqueta, selo). */ --fs-4xs:8px; --fs-3xs:10px; --fs-2xs:11px; --fs-xs:12px; --fs-sm:14px; --fs-base:16px; --fs-lg:18px; --fs-xl:20px; --fs-2xl:24px; --fs-3xl:30px; --fs-4xl:36px; --fs-5xl:44px; --fs-6xl:56px; --fs-7xl:72px; --fs-8xl:96px; --fs-9xl:128px; /* espaço — base 4. --sp-hair é o fio de 2px (fresta, lamela). */ --sp-hair:2px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px; --sp-32:128px; /* raio — --r-full é a pílula (antes havia 99px E 999px pra mesma coisa) */ --r-2xs:2px; --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-full:999px; /* traço */ --bw-1:1px; --bw-2:2px; --bw-3:3px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font-b); background:var(--bg); color:var(--ink); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} h1,h2,h3,h4{font-family:var(--font-d);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--ink)} ::selection{background:var(--accent);color:#fff} svg{display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent);margin-bottom:16px; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} .muted{color:var(--ink-2)} /* ---------- LOGO (assets reais) ---------- */ .logo-wrap{display:inline-flex;align-items:center;line-height:0;flex-shrink:0} .logo-img{height:42px;width:auto;display:block;transition:opacity .15s} .logo-wrap:hover .logo-img{opacity:.85} .logo-img.foot{height:120px} .logo-img.side{height:48px;margin-bottom:8px} @media(max-width:520px){.logo-img{height:34px}} @media(max-width:560px){.logo-img.foot{height:96px}} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:16px 24px;border-radius:var(--radius-sm); font-weight:600;font-size:16px; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; white-space:nowrap; } .btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(14,90,230,.20)} .btn-primary:hover{background:var(--accent-hi);transform:translateY(-2px);box-shadow:0 10px 30px rgba(14,90,230,.32)} .btn-ghost{border:1px solid var(--border);color:var(--ink);background:#fff} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .btn:active{transform:translateY(0) scale(.98)} .btn-block{width:100%} .btn-lg{padding:16px 32px;font-size:16px} .btn-sm{padding:12px 16px;font-size:14px} .btn svg{width:18px;height:18px;flex-shrink:0} @media(max-width:560px){.btn{white-space:normal;text-align:center}} /* ---------- badges ---------- */ .badge{ display:inline-flex;align-items:center;gap:8px; font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:4px 12px;border-radius:999px; } .badge-accent{background:var(--blue-soft);color:var(--accent)} .badge-ok{background:var(--ok-dim);color:var(--ok)} .badge-dark{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)} .dot-ok{width:7px;height:7px;border-radius:50%;background:var(--ok)} /* ========================================================= HEADER, ILHA FLUTUANTE (pílula de vidro) ⚠️ LEGADO — APOSENTADA NA R4 (09/07/2026). Nenhuma página de cliente usa mais `.nav-island`, `.burger` nem `.mobile-menu`: a navegação virou o HUD + porta-menu (bloco "R4 · MODO RADICAL", no fim deste arquivo). Estes seletores continuam aqui só porque os labs históricos (lab-hero-3..8.html) têm o markup da ilha e ainda precisam renderizar. Não estender; não usar em página nova. ========================================================= */ .nav-island{ position:fixed;top:14px;left:50%;transform:translateX(-50%) translateZ(0);z-index:120; width:min(1180px,calc(100% - 24px)); background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); border:1px solid rgba(255,255,255,.75); box-shadow:0 6px 30px rgba(10,36,71,.12), inset 0 1px 0 rgba(255,255,255,.85); border-radius:999px; will-change:top; transition:top .25s ease, box-shadow .25s ease, background .25s ease; } .nav-island.scrolled{ top:8px; background:rgba(255,255,255,.92); box-shadow:0 14px 40px rgba(10,36,71,.18), inset 0 1px 0 rgba(255,255,255,.9); } .nav-island .nav{display:flex;align-items:center;gap:20px;height:62px;padding:0 12px 0 24px} .nav-links{display:flex;gap:4px;margin:0 auto} .nav-links a{ font-size:14px;color:var(--ink-2);font-weight:600; padding:8px 16px;border-radius:999px;transition:.18s; } .nav-links a:hover{color:var(--ink);background:rgba(14,90,230,.07)} .nav-links a.active{color:var(--accent);background:var(--blue-soft)} .nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .icon-btn{ width:42px;height:42px;border-radius:999px; display:flex;align-items:center;justify-content:center;color:var(--ink-2); transition:.15s;position:relative;background:transparent;border:none; } .icon-btn:hover{color:var(--accent);background:var(--blue-soft)} .icon-btn svg{width:20px;height:20px} .cart-count{ position:absolute;top:2px;right:0;background:var(--accent);color:#fff; font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:999px; display:none;align-items:center;justify-content:center;padding:0 4px; box-shadow:0 3px 8px rgba(14,90,230,.4); } .burger{display:none;flex-direction:column;gap:4px;width:42px;height:42px;border-radius:999px;align-items:center;justify-content:center} .burger span{width:17px;height:2px;background:var(--ink);border-radius:2px;transition:.2s} .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.x span:nth-child(2){opacity:0} .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} @media(max-width:940px){ .nav-links{display:none} .burger{display:flex} .nav-island .nav{height:56px;padding:0 8px 0 20px} } /* menu mobile (injetado pelo main.js) */ .mobile-menu{ position:fixed;top:82px;left:12px;right:12px;z-index:118; background:#fff;border-radius:24px;border:1px solid var(--border-soft); box-shadow:0 30px 70px rgba(10,36,71,.28); padding:12px;display:none; } .mobile-menu.open{display:block;animation:mm .22s ease} @keyframes mm{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .mobile-menu a{ display:flex;align-items:center;justify-content:space-between; padding:16px 16px;border-radius:16px;font-weight:600;font-size:16px;color:var(--ink); } .mobile-menu a svg{width:16px;height:16px;color:var(--ink-3);flex-shrink:0} .mobile-menu a:hover{background:var(--blue-soft);color:var(--accent)} .mobile-menu .mm-wa svg{width:18px;height:18px;color:#57D97E} .mobile-menu .mm-wa{ margin-top:8px;background:var(--navy);color:#fff;justify-content:center;gap:12px; } .mobile-menu .mm-wa:hover{background:var(--blue-deep);color:#fff} /* offset do conteúdo sob a ilha */ .page-pad{padding-top:112px} @media(max-width:940px){.page-pad{padding-top:96px}} /* ========================================================= BUSCA, overlay ========================================================= */ .search-overlay{ position:fixed;inset:0;z-index:220;display:none; background:rgba(7,20,48,.5); -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px); align-items:flex-start;justify-content:center;padding:96px 20px 32px; } .search-overlay.open{display:flex} .search-panel{ width:min(620px,100%);background:#fff;border-radius:24px;overflow:hidden; box-shadow:0 46px 110px rgba(3,10,30,.5); animation:sp .2s ease; } @keyframes sp{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}} .search-head{display:flex;align-items:center;gap:12px;padding:20px 20px;border-bottom:1px solid var(--border)} .search-head svg{width:20px;height:20px;color:var(--accent);flex-shrink:0} .search-head input{flex:1;border:none;outline:none;font-size:18px;font-family:inherit;color:var(--ink);background:transparent} .search-head input::placeholder{color:var(--ink-3)} .search-close{width:32px;height:32px;border-radius:12px;background:var(--surface-2);color:var(--ink-2);font-size:14px;font-weight:700;flex-shrink:0} .search-close:hover{background:var(--blue-soft);color:var(--accent)} .search-results{max-height:430px;overflow:auto;padding:12px} .search-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 12px 8px} .s-item{display:flex;align-items:center;gap:16px;padding:12px 12px;border-radius:16px;cursor:pointer} .s-item:hover{background:var(--blue-soft)} .s-item .s-ic{width:44px;height:44px;border-radius:12px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:#4E7FE0;flex-shrink:0} .s-item .s-ic svg{width:26px;height:26px} .s-item .s-tx{min-width:0} .s-item b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .s-item span{font-size:12px;color:var(--ink-3)} .s-item .s-price{margin-left:auto;font-family:var(--font-d);font-weight:800;font-size:14px;white-space:nowrap;color:var(--ink)} /* chips rápidos na busca (upgrade da busca existente) */ .gd-schips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px 12px} .gd-schip{padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:#fff; font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:var(--font-b);transition:.15s} .gd-schip:hover{border-color:var(--accent);color:var(--accent);background:var(--blue-soft)} .search-empty{text-align:center;padding:24px 20px 32px} .search-empty img{height:150px;margin:0 auto 12px} .search-empty h4{font-size:16px;margin-bottom:8px} .search-empty p{font-size:14px;color:var(--ink-2);margin-bottom:16px} /* ========================================================= TOAST (feedback do carrinho) ========================================================= */ .toast{ position:fixed;left:50%;bottom:24px;z-index:300; transform:translateX(-50%) translateY(16px); background:var(--navy);color:#fff; padding:12px 16px 12px 20px;border-radius:16px; display:flex;gap:16px;align-items:center; box-shadow:0 20px 50px rgba(4,16,44,.45); opacity:0;pointer-events:none;transition:.28s ease; font-size:14px;max-width:calc(100% - 32px); } .toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto} .toast .t-ok{width:22px;height:22px;border-radius:50%;background:var(--ok);display:flex;align-items:center;justify-content:center;flex-shrink:0} .toast .t-ok svg{width:12px;height:12px;color:#fff} .toast a{color:#8FC4FF;font-weight:700;white-space:nowrap} /* ========================================================= HERO ========================================================= */ .hero{ position:relative;overflow:hidden; background: radial-gradient(1100px 460px at 82% -10%, rgba(14,90,230,.1), transparent 62%), linear-gradient(180deg,#fff,var(--bg-soft)); border-bottom:1px solid var(--border); } .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:104px;padding-bottom:70px} .hero .wrap>*{min-width:0} .hero h1{font-size:clamp(36px,4.6vw,56px);margin-bottom:24px;overflow-wrap:break-word} .hero h1 em{font-style:normal;color:var(--accent)} .hero p.lead{font-size:18px;color:var(--ink-2);max-width:520px;margin-bottom:32px} .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px} .hero-trust{display:flex;gap:24px;flex-wrap:wrap} .hero-trust .ht{display:flex;flex-direction:column} .hero-trust .ht b{font-family:var(--font-d);font-size:24px;font-weight:800;color:var(--ink)} .hero-trust .ht span{font-size:12px;color:var(--ink-3)} .hero-trust .ht-mob{display:none} @media(max-width:900px){.hero-trust .ht-mob{display:flex}.hero-trust .ht-mob b{font-size:16px;color:var(--ok)}} .hero-visual{position:relative;height:430px} .hero-card{ position:absolute;background:var(--surface);border:1px solid var(--border); border-radius:var(--radius);box-shadow:var(--shadow);padding:20px; } .hero-card.main{inset:0;border:none;overflow:hidden;background:#0A2153; box-shadow:0 24px 60px rgba(10,46,134,.35)} /* ---------- HERO · foto de showroom seca + boneco + sombreado (versão calma) ---------- */ .hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit} /* foto real da loja de Santos ocupando o fundo inteiro, seca (sem piso/listra) */ .hs-photo{position:absolute;inset:0;background:url('../img/loja-santos.jpg') 50% 38%/cover; filter:brightness(.8) contrast(1.05) saturate(1.04)} /* leve sombreado embaixo — aterra o boneco e dá leitura pro preço/badges */ .hs-shade{position:absolute;inset:0;background: linear-gradient(to top,rgba(4,10,32,.72),rgba(5,12,40,.16) 38%,transparent 58%)} .hero-badges{position:absolute;top:18px;left:18px;right:18px;z-index:3;display:flex;justify-content:space-between;align-items:flex-start} .hero-card.main::after{content:"";position:absolute;left:50%;bottom:3%;transform:translateX(-50%);width:58%;height:12%;border-radius:50%;background:radial-gradient(closest-side,rgba(2,8,26,.6),transparent 74%);z-index:0;filter:blur(5px)} .hero-mascote{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:96%;width:auto;object-fit:contain;object-position:bottom;z-index:1;filter:drop-shadow(0 16px 20px rgba(6,20,54,.42))} .hero-price-tag{position:absolute;right:15px;bottom:15px;z-index:3;display:flex;align-items:center;gap:12px;text-align:left;max-width:72%;background:rgba(6,24,72,.52);backdrop-filter:blur(7px);padding:8px 16px;border-radius:12px;box-shadow:0 8px 18px rgba(6,20,54,.32);border:1px solid rgba(255,255,255,.16)} .hpt-thumb{width:54px;height:54px;border-radius:12px;background:#fff;padding:4px;flex-shrink:0} .hpt-thumb img{width:100%;height:100%;object-fit:contain} .hpt-tx{min-width:0} .hpt-name{font-family:var(--font-d);font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hpt-price{display:flex;align-items:baseline;gap:8px;justify-content:flex-start;margin-top:2px} .hpt-price b{font-family:var(--font-d);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.02em} .hpt-price span{color:#9FE8C3;font-size:12px;font-weight:600} .hero-card.main .badge-accent{background:rgba(255,255,255,.2);color:#fff} .hero-card.main .badge-ok{background:rgba(255,255,255,.2);color:#fff} .hero-card.main .badge-ok .dot-ok{background:#7CF0B4} .hero-card.chip{ width:210px;padding:16px 16px;bottom:-18px;left:-24px; display:flex;align-items:center;gap:12px;background:#fff;box-shadow:var(--shadow); } .hero-card.chip .ci{width:40px;height:40px;border-radius:12px;background:var(--ok-dim);color:var(--ok);display:flex;align-items:center;justify-content:center} .hero-card.chip .ci svg{width:19px;height:19px} .hero-card .ct b{display:block;font-size:14px;color:var(--ink);font-family:var(--font-d)} .hero-card .ct span{font-size:12px;color:var(--ink-3)} @media(max-width:900px){ .hero .wrap{grid-template-columns:1fr;gap:40px;padding-top:118px} .hero-visual{height:330px;order:-1} .hero-card.chip{display:none} .hero-price-tag{right:10px;bottom:10px;padding:8px 12px;max-width:82%;gap:8px} .hero-price-tag .hpt-thumb{width:42px;height:42px} .hpt-price b{font-size:16px} .hero-mascote{height:99%} .hero h1{font-size:30px} .hero p.lead{font-size:16px} } /* ---------- HERO · produto vivo (retoque, volume baixo) ---------- */ /* luz de estúdio que segue o cursor (--mx/--my setados via JS) */ .hero-card.main{--mx:62%;--my:16%} .hero-card.main::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(300px 240px at var(--mx) var(--my),rgba(255,255,255,.18),transparent 70%); transition:background .12s linear} /* bolhas/espuma subindo atrás do mascote */ .hero-bubbles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none} .hero-bubbles i{position:absolute;bottom:-20px;border-radius:50%;opacity:0; background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85),rgba(255,255,255,.14) 60%,transparent 72%)} .hero-bubbles i:nth-child(1){left:26%;width:9px;height:9px;--x:10px;animation:heroRise 8s ease-in 0s infinite} .hero-bubbles i:nth-child(2){left:40%;width:6px;height:6px;--x:-8px;animation:heroRise 9.5s ease-in 1.6s infinite} .hero-bubbles i:nth-child(3){left:52%;width:12px;height:12px;--x:12px;animation:heroRise 7.5s ease-in 3s infinite} .hero-bubbles i:nth-child(4){left:63%;width:7px;height:7px;--x:-6px;animation:heroRise 10s ease-in 4.2s infinite} .hero-bubbles i:nth-child(5){left:72%;width:5px;height:5px;--x:9px;animation:heroRise 8.5s ease-in 2.2s infinite} .hero-bubbles i:nth-child(6){left:34%;width:8px;height:8px;--x:-10px;animation:heroRise 9s ease-in 5.4s infinite} @keyframes heroRise{0%{transform:translateY(0) translateX(0);opacity:0}12%{opacity:.7}70%{opacity:.5}100%{transform:translateY(-330px) translateX(var(--x));opacity:0}} /* selo "Mais vendido" com micro-pulse discreto */ .hero-card.main .badge-accent{position:relative;animation:heroBadge 2.8s ease-in-out infinite} .hero-card.main .badge-accent::after{content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid rgba(255,255,255,.6);opacity:0;animation:heroBadgeRing 2.8s ease-out infinite} @keyframes heroBadge{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}} @keyframes heroBadgeRing{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.3)}} /* price tag: tilt 3D no mouse (transform via JS) */ .hero-price-tag{transition:transform .35s cubic-bezier(.2,.8,.3,1);transform-style:preserve-3d;will-change:transform} /* thumb do produto: brilho de estúdio passando + gotas hidrofóbicas escorrendo */ .hpt-thumb{position:relative;overflow:hidden} .hpt-gloss{position:absolute;top:-20%;left:-70%;width:48%;height:140%;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);transform:skewX(-16deg); opacity:0;animation:hptGloss 5s ease-in-out infinite} @keyframes hptGloss{0%,20%{left:-70%;opacity:0}32%{opacity:.9}46%,100%{left:180%;opacity:0}} .hpt-drop{position:absolute;border-radius:50%;pointer-events:none;opacity:0; background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95),rgba(255,255,255,.25) 42%,rgba(120,150,200,.14) 70%,transparent 78%); box-shadow:inset -1px -1px 2px rgba(30,60,120,.25)} .hpt-drop.d1{width:6px;height:6px;left:24%;top:18%;animation:hptDrop 5.5s ease-in .5s infinite} .hpt-drop.d2{width:4px;height:4px;left:60%;top:30%;animation:hptDrop 6s ease-in 2s infinite} .hpt-drop.d3{width:5px;height:5px;left:42%;top:50%;animation:hptDrop 6.5s ease-in 3.4s infinite} @keyframes hptDrop{0%{opacity:0;transform:translateY(0) scale(.6)}14%{opacity:.9;transform:translateY(0) scale(1)}55%{opacity:.9;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(26px) scale(.85)}} /* botão "Ver a loja": seta cutucando */ .btn-arw{display:inline-block;animation:btnArw 2s ease-in-out infinite} @keyframes btnArw{0%,100%{transform:translateX(0)}45%{transform:translateX(4px)}} /* ========================================================= HERO · assinatura Global — placas chanfradas + malha técnica O canto cortado ecoa o wordmark angular da marca; a malha ecoa o piso de LED do showroom de Santos (a foto do card). Grande continua macio (cards), pequeno vira "peça" (chanfro). Escopo section.hero: só a home (CRM tem .hero próprio em div). ========================================================= */ /* malha técnica no fundo, concentrada atrás do card e sumindo nas bordas */ section.hero::before{content:"";position:absolute;inset:0;pointer-events:none; background: linear-gradient(to right,rgba(14,90,230,.07) 1px,transparent 1px), linear-gradient(to bottom,rgba(14,90,230,.07) 1px,transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(760px 560px at 74% 46%,#000,transparent 72%); mask-image:radial-gradient(760px 560px at 74% 46%,#000,transparent 72%); } @media(max-width:900px){ section.hero::before{ -webkit-mask-image:radial-gradient(480px 420px at 60% 26%,#000,transparent 74%); mask-image:radial-gradient(480px 420px at 60% 26%,#000,transparent 74%); } } /* eyebrow → etiqueta de sistema (placa com canto cortado + LED) */ section.hero .eyebrow{ background:var(--blue-soft);border:1px solid rgba(14,90,230,.18); padding:8px 16px 8px 12px;gap:8px;margin-bottom:20px; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%); } section.hero .eyebrow::before{ width:6px;height:6px;border-radius:2px;background:var(--accent); box-shadow:0 0 8px rgba(14,90,230,.55); flex-shrink:0; } @media(max-width:560px){ section.hero .eyebrow{font-size:11px;letter-spacing:.08em;padding:8px 12px 8px 12px;gap:8px;white-space:nowrap} } /* selos do card (Mais vendido / Em estoque) → placas de inspeção */ section.hero .hero-badges .badge{ border-radius:0;padding:8px 12px; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } section.hero .hero-badges .badge-ok{ clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px); } section.hero .hero-card.main .badge-accent::after{ border-radius:0; clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%); } /* etiqueta de preço → placa chanfrada (sombra via filter pra seguir o corte) */ section.hero .hero-price-tag{ border-radius:0;padding:12px 20px 12px 16px;box-shadow:none; clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); filter:drop-shadow(0 8px 18px rgba(6,20,54,.35)); } section.hero .hpt-thumb{border-radius:4px} /* chip "Compra protegida" → placa parafusada no canto do card */ section.hero .hero-card.chip{ border-radius:0;border:1px solid var(--border);box-shadow:none; clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px)); filter:drop-shadow(0 10px 24px rgba(16,40,80,.16)); } section.hero .hero-card.chip .ci{ border-radius:0; clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%); } /* CTAs do hero → mesma família de placa (chanfro no canto de baixo) */ section.hero .hero-cta .btn{ border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%); } section.hero .hero-cta .btn-primary{ box-shadow:none;filter:drop-shadow(0 6px 16px rgba(14,90,230,.28)); } section.hero .hero-cta .btn-primary:hover{ box-shadow:none;filter:drop-shadow(0 10px 26px rgba(14,90,230,.40)); } /* régua de confiança → ficha técnica (hairline por item, 1º em azul) */ section.hero .hero-trust{gap:0;row-gap:16px} section.hero .hero-trust .ht{border-left:2px solid var(--border);padding:2px 16px 2px 12px} section.hero .hero-trust .ht b{font-size:20px} section.hero .hero-trust .ht span{font-size:12px} section.hero .hero-trust .ht:first-child{border-left-color:var(--accent)} /* ========================================================= HERO DARK · pivô "pegada jovem / preto e azul" (Renan, 08/07) PROVA de direção — escopo só a home (section.hero). NÃO toca :root nem o resto do site; o branco continua no resto até aprovar. Reverter = apagar este bloco inteiro. ========================================================= */ section.hero{ background: radial-gradient(1150px 520px at 80% -12%, rgba(26,79,224,.32), transparent 60%), radial-gradient(820px 480px at 4% 116%, rgba(34,211,238,.10), transparent 58%), linear-gradient(180deg,#070B14 0%,#080D1E 100%); border-bottom:1px solid rgba(255,255,255,.07); } /* malha técnica: azul-claro pra respirar no escuro */ section.hero::before{ background: linear-gradient(to right,rgba(96,160,255,.07) 1px,transparent 1px), linear-gradient(to bottom,rgba(96,160,255,.07) 1px,transparent 1px); background-size:44px 44px; } /* texto claro */ section.hero h1{color:#fff} section.hero h1 em{color:#3B8CFF;text-shadow:0 0 24px rgba(59,140,255,.35)} section.hero p.lead{color:#AEB8D4} /* etiqueta de sistema → vidro azul */ section.hero .eyebrow{ background:rgba(26,79,224,.16);border:1px solid rgba(96,160,255,.28);color:#8FB8FF; } section.hero .eyebrow::before{background:#5EA0FF;box-shadow:0 0 10px rgba(94,160,255,.8)} /* ficha de confiança */ section.hero .hero-trust .ht{border-left-color:rgba(255,255,255,.14)} section.hero .hero-trust .ht b{color:#fff} section.hero .hero-trust .ht span{color:#8A95B4} section.hero .hero-trust .ht:first-child{border-left-color:#3B8CFF} /* botão fantasma no escuro */ section.hero .hero-cta .btn-ghost{ color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.03); } section.hero .hero-cta .btn-ghost:hover{ border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.07) } /* chip flutuante → placa de vidro escuro */ section.hero .hero-card.chip{ background:rgba(15,25,48,.72);border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); filter:drop-shadow(0 14px 30px rgba(0,0,0,.55)); } section.hero .hero-card.chip .ct b{color:#fff} section.hero .hero-card.chip .ct span{color:#8A95B4} /* ========================================================= SEÇÕES GENÉRICAS ========================================================= */ section{padding:80px 0} .sec-head{max-width:640px;margin-bottom:48px} .sec-head.center{margin:0 auto 48px;text-align:center} .sec-head h2{font-size:clamp(24px,3.4vw,44px);margin-bottom:16px} .sec-head p{color:var(--ink-2);font-size:16px} .sec-head .line{display:flex;align-items:flex-end;justify-content:space-between;gap:20px} .sec-alt{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} @media(max-width:640px){section{padding:52px 0}.sec-head{margin-bottom:32px}} /* ---------- faixa de marcas ---------- */ .brands-strip{padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft)} .brands-strip .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center} .brands-strip .bl-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);flex-basis:100%;text-align:center;margin-bottom:-16px} @media(min-width:961px){.brands-strip .bl-label{flex-basis:auto;text-align:left;margin-bottom:0;margin-right:8px}} .brands-strip .bl{font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--ink-2);letter-spacing:.02em;transition:.2s} .brands-strip .bl:hover{color:var(--accent)} .brands-strip .bl .ex{font-size:10px;color:var(--accent);vertical-align:super;letter-spacing:.1em} .brands-strip .bl-more{font-size:14px;font-weight:600;color:var(--ink-3);font-family:var(--font-b)} /* ========================================================= PRODUTOS (card + grid) ========================================================= */ .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .prod-grid.g3{grid-template-columns:repeat(3,1fr)} @media(max-width:1040px){.prod-grid,.prod-grid.g3{grid-template-columns:repeat(3,1fr)}} @media(max-width:820px){.prod-grid,.prod-grid.g3{grid-template-columns:repeat(2,1fr);gap:16px}} .card-prod{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease; display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm); } .card-prod:hover{transform:var(--tilt,translateY(-5px));box-shadow:var(--glow);border-color:rgba(14,90,230,.35)} /* Tempero (Atlas lv170 + lv175, provadas 06/08/2026): com mouse de verdade o card inclina em 3D seguindo o cursor (o JS em products.js escreve --tilt) e os irmãos dão um passo atrás — fraco de propósito: foco, não apagão. No toque nada disso existe (hover:hover) e o hover clássico segue de base. */ @media(hover:hover){ .card-prod{transition:transform .16s ease-out, box-shadow .2s ease, border-color .2s ease, opacity .25s ease, filter .25s ease} .prod-grid:has(.card-prod:hover) .card-prod:not(:hover){opacity:.8;filter:saturate(.86)} } .card-prod .thumb{ aspect-ratio:1/1;display:flex;align-items:center;justify-content:center; background:radial-gradient(220px 160px at 50% 32%, var(--blue-soft), transparent 66%),var(--surface-2); position:relative; } .card-prod .thumb>svg{width:104px;height:104px;color:#4E7FE0} /* D2 (04/08): o respiro do tile chapado virou % em vez de 16px. Em px ele mudava de tamanho aparente a cada breakpoint (88,6% do tile no desktop de 280px × 82,9% no celular de 187px) — a foto de catálogo nascia colada na borda e cada tela mostrava um tamanho. Em %, os 29 produtos que caem neste fallback (sem recorte aprovado) ficam no MESMO tamanho em qualquer tela. */ .card-prod .thumb img.prod-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;padding:12%;mix-blend-mode:multiply;transform:scale(var(--pz,1));transition:transform .35s cubic-bezier(.2,.8,.3,1)} .card-prod:hover .thumb img.prod-photo{transform:scale(calc(var(--pz,1)*1.05))} /* ⚠️ D2 (04/08) · z-index 2 → 5. O comentário abaixo sempre disse "por cima da foto", mas a vitrine (`.card-prod.vt`) subiu o produto pra z-index:2 e o boneco pra 3 — empate no 2, e quem pinta por último no DOM ganha: a vem DEPOIS do `.p-badges`. Resultado: o galão de 5L cobria o "Em estoque" (medido: 8 de 55 cards, o pior com 1.558px² de badge tapado). A intenção estava no comentário e não no número. Agora o badge fica acima do produto E do boneco. */ .card-prod .thumb .p-badges{position:absolute;top:12px;left:12px;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:flex-start} /* badges por cima da foto — fortes e legíveis em qualquer imagem */ .card-prod .thumb .badge{box-shadow:0 2px 8px rgba(15,26,46,.20)} .card-prod .thumb .badge-ok{background:rgba(255,255,255,.92);color:#0A7A43;border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(6px) saturate(1.3);-webkit-backdrop-filter:blur(6px) saturate(1.3)} .card-prod .thumb .badge-ok .dot-ok{background:var(--ok)} .card-prod .thumb .badge-dark{background:var(--ink);color:#fff;border:none} .card-prod .thumb .badge-accent{background:var(--accent);color:#fff} /* 17/08 · O SELO DE VÍDEO — canto OPOSTO aos badges (que moram em cima à esquerda) pra nunca disputar espaço com "Em estoque". z-index 5 pela mesma razão dos badges: o galão de 5L passa por cima de quem fica no 2. */ .card-prod .thumb .thumb-vid{ position:absolute;bottom:12px;right:12px;z-index:5; display:inline-flex;align-items:center;gap:4px; padding:4px 8px; /* ⚠️ cor CRAVADA e não var(--ink): o tile da foto é CLARO nos dois temas, mas o --ink vira tinta clara no tema escuro — o selo sumiria em cima da foto. */ background:rgba(9,14,26,.88);color:#fff; border-radius:999px; font-family:var(--font-b);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; box-shadow:0 2px 8px rgba(15,26,46,.24); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .card-prod .thumb .thumb-vid svg{width:12px;height:12px} /* 18/08 · O CORAÇÃO DE FAVORITO (Conta v2) — canto de cima à DIREITA: os badges moram à esquerda e o selo de vídeo embaixo à direita; este era o canto vago. Cor cravada pela mesma razão do selo de vídeo (o tile é claro nos 2 temas). Ativo = ciano (a faísca da casa marca o que é "meu", não vermelho de rede social). */ .card-prod .thumb .fav-btn{ position:absolute;top:12px;right:12px;z-index:5; width:36px;height:36px;display:flex;align-items:center;justify-content:center; border-radius:999px;border:1px solid rgba(255,255,255,.2); background:rgba(9,14,26,.72);color:#fff;cursor:pointer;padding:0; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); transition:transform .18s,border-color .18s,color .18s; } .card-prod .thumb .fav-btn svg{width:18px;height:18px} .card-prod .thumb .fav-btn:hover{transform:scale(1.08);border-color:rgba(56,225,242,.55)} .card-prod .thumb .fav-btn.on{color:#38E1F2;border-color:rgba(56,225,242,.55)} .card-prod .thumb .fav-btn.on svg path{fill:currentColor} .card-prod .body{padding:16px 16px 20px;display:flex;flex-direction:column;gap:12px;flex:1} .card-prod .cat{font-size:12px;color:var(--ink-3);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .card-prod .cat b{color:var(--accent);font-weight:700} .card-prod .name{font-family:var(--font-b);font-weight:600;font-size:16px;line-height:1.3;color:var(--ink);min-height:39px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-prod .rating{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2)} .card-prod .rating .stars{color:#F5A623;letter-spacing:1px} .card-prod .price-row{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px} .price b{font-family:var(--font-d);font-weight:800;font-size:20px;color:var(--ink);letter-spacing:-.02em;display:block;white-space:nowrap} .price .old{font-size:12px;color:var(--ink-3);text-decoration:line-through;display:block} .price .pix{font-size:12px;color:var(--ok);font-weight:600;margin-top:2px;display:block;white-space:nowrap} .add-btn{ width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent);color:#fff; display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0; transition:.15s;box-shadow:0 6px 16px rgba(14,90,230,.3); } .add-btn svg{width:20px;height:20px} .add-btn:hover{background:var(--accent-hi);transform:scale(1.06)} .add-btn:active{transform:scale(.92)} .add-btn.ok{background:var(--ok)} /* estado vazio do grid (mascote da lupa) */ .empty-state{grid-column:1/-1;text-align:center;padding:40px 20px 48px} .empty-state img{height:180px;margin:0 auto 16px} .empty-state h3{font-size:20px;margin-bottom:8px} .empty-state p{color:var(--ink-2);font-size:16px;margin-bottom:20px} /* Tempero (Atlas lv1122, provada 06/08/2026): estado vazio parado é beco sem saída — o mascote flutua e a sombra respira junto. Vale pra lupa da loja e pro carrinho vazio do checkout (.co-empty vive no CSS inline de lá). */ .empty-state img,.co-empty img{animation:esFloat 3.4s ease-in-out infinite} .es-sombra{width:120px;height:14px;margin:calc(-1*var(--sp-2)) auto var(--sp-4);border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);animation:esSombra 3.4s ease-in-out infinite} @keyframes esFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes esSombra{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.8);opacity:.55}} @media(prefers-reduced-motion:reduce){.empty-state img,.co-empty img,.es-sombra{animation:none}} /* ========================================================= DIFERENCIAIS / FEATURES ========================================================= */ .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:900px){.feat-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.feat-grid{grid-template-columns:1fr}} .feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px;transition:.2s;box-shadow:var(--shadow-sm)} .feat:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--glow)} .feat .fi{width:50px;height:50px;border-radius:12px;background:var(--blue-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .feat .fi svg{width:24px;height:24px} .feat h3{font-size:18px;margin-bottom:8px} .feat p{font-size:14px;color:var(--ink-2)} /* ========================================================= MARCA DESTAQUE (Jaça), painel azul ========================================================= */ .spotlight{ background: radial-gradient(700px 340px at 85% 15%, rgba(255,255,255,.16), transparent 60%), linear-gradient(140deg,#1E6BFF,#0A2E86); border-radius:24px;overflow:hidden;box-shadow:0 20px 50px rgba(10,46,134,.28); } .spotlight .wrap-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:50px} .spotlight .eyebrow{color:#BcD5FF} .spotlight .eyebrow::before{background:#BcD5FF} .spotlight h2{font-size:clamp(24px,3vw,36px);margin-bottom:16px;color:#fff} .spotlight p{color:rgba(255,255,255,.85);margin-bottom:24px;font-size:16px} .spotlight .btn-primary{background:#fff;color:var(--accent)} .spotlight .btn-primary:hover{background:#EAF1FE} .spotlight .sp-visual{ position:relative;height:330px;border-radius:var(--radius); background:radial-gradient(closest-side,rgba(255,255,255,.22),rgba(255,255,255,.04)); border:1px solid rgba(255,255,255,.18); display:flex;align-items:flex-end;justify-content:center;overflow:hidden; } .sp-mascote{height:90%;width:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(0 14px 22px rgba(4,16,48,.4))} @media(max-width:820px){.spotlight .wrap-in{grid-template-columns:1fr;padding:32px}.spotlight .sp-visual{height:250px;order:-1}} /* ========================================================= PROVA SOCIAL ========================================================= */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:820px){.reviews{grid-template-columns:1fr}} .review{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)} .review .stars{color:#F5A623;letter-spacing:2px;margin-bottom:16px} .review p{color:var(--ink);font-size:16px;margin-bottom:20px;line-height:1.6} .review .who{display:flex;align-items:center;gap:12px} .review .av{width:42px;height:42px;border-radius:50%;background:var(--blue-soft);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent);font-family:var(--font-d)} .review .who b{display:block;font-size:14px} .review .who span{font-size:12px;color:var(--ink-3)} /* ========================================================= CTA FINAL, faixa azul com mascote ========================================================= */ .cta-band{ position:relative;overflow:hidden; display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px; background: radial-gradient(600px 300px at 18% 20%, rgba(255,255,255,.14), transparent 60%), linear-gradient(120deg,#0E5AE6,#0A2E86); border-radius:24px;padding:54px 60px 0 60px; box-shadow:0 20px 50px rgba(10,46,134,.28); } .cta-copy{padding-bottom:54px} .cta-band .eyebrow{color:#BcD5FF} .cta-band .eyebrow::before{background:#BcD5FF} .cta-band h2{font-size:clamp(24px,3.2vw,36px);margin-bottom:16px;color:#fff} .cta-band p{color:rgba(255,255,255,.85);max-width:480px;margin-bottom:32px;font-size:16px} .cta-band .btn-primary{background:#fff;color:var(--accent)} .cta-band .btn-primary:hover{background:#EAF1FE} .cta-band .btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff} .cta-band .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff} /* T2·S5 (20/07): o megafone cresceu um degrau e centrou na própria coluna (pedido: "aumenta ele um pouquinho e centraliza") — o pé segue no chão do card */ .cta-mascote{height:290px;width:auto;align-self:end;justify-self:center;filter:drop-shadow(0 12px 20px rgba(4,16,48,.35))} @media(max-width:760px){ .cta-band{grid-template-columns:1fr;padding:40px 32px 0 32px;text-align:left} .cta-copy{padding-bottom:40px} .cta-mascote{display:none} } /* ========================================================= FOOTER v3, navy editorial · cantos retos · social ========================================================= */ footer.site{ position:relative;overflow:hidden; background:linear-gradient(165deg,#0C2C55,#061630); border-top:3px solid var(--accent-hi); color:rgba(255,255,255,.72); padding:66px 0 32px;margin-top:24px; } footer.site::before{ content:"";position:absolute;top:-160px;right:-110px;width:480px;height:480px; background:radial-gradient(closest-side,rgba(46,116,255,.30),transparent 70%); pointer-events:none; } footer.site::after{ content:"";position:absolute;left:-130px;bottom:-170px;width:430px;height:430px; background:radial-gradient(closest-side,rgba(14,90,230,.14),transparent 70%); pointer-events:none; } footer.site .wrap{position:relative} .foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:40px;margin-bottom:48px} @media(max-width:960px){.foot-top{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:560px){.foot-top{grid-template-columns:1fr;gap:32px}} .foot-brand .logo-wrap{margin-bottom:20px} .foot-brand p{max-width:315px;font-size:14px;margin:0 0 24px;line-height:1.65} .foot-social{display:flex;flex-wrap:wrap;gap:12px} .fsoc{ display:inline-flex;align-items:center;gap:12px; border:1px solid rgba(255,255,255,.20); padding:12px 16px;font-size:14px;font-weight:600;color:#fff;transition:.2s; } .fsoc svg{width:18px;height:18px;flex-shrink:0} .fsoc-wa svg{color:#57D97E} .fsoc:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.45);transform:translateY(-1px)} .fsoc-ig:hover{border-color:rgba(224,101,126,.75)} .foot-col h4{ position:relative;padding-left:16px; font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:#7FA8E8;margin-bottom:20px;font-family:var(--font-b);font-weight:700; } .foot-col h4::before{content:"";position:absolute;left:0;top:2px;width:8px;height:8px;background:var(--accent-hi)} .foot-col a{display:block;color:rgba(255,255,255,.72);font-size:14px;margin-bottom:12px;transition:.18s;width:fit-content} .foot-col a:hover{color:#fff;transform:translateX(3px)} .unit-card{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10); border-left:2px solid var(--accent-hi);padding:12px 16px;margin-bottom:12px; } .unit-card b{color:#fff;font-size:14px;display:block;margin-bottom:2px} .unit-card span{font-size:12px;color:rgba(255,255,255,.6);display:block;line-height:1.45} .unit-card a{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:#7FB0FF;margin-top:8px} .unit-card a:hover{color:#fff} .foot-bottom{ border-top:1px solid rgba(255,255,255,.12);padding-top:24px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; font-size:12px;color:rgba(255,255,255,.48); } .foot-bottom .fb-left span{display:block;line-height:1.6} .pay-icons{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .pay-icons .pi{ height:26px;padding:0 12px; border:1px solid rgba(255,255,255,.16);background:transparent; display:flex;align-items:center;font-size:11px;font-weight:700; color:rgba(255,255,255,.7);letter-spacing:.06em; } .foot-sator{font-size:12px;color:rgba(255,255,255,.4)} .foot-sator b{color:rgba(255,255,255,.7);font-weight:700} a.foot-sator{text-decoration:none} a.foot-sator:hover{color:rgba(255,255,255,.65)} a.foot-sator:hover b{color:#fff} /* ========================================================= LOJA, vitrine por objetivo ========================================================= */ .shop-hero{ background: radial-gradient(900px 380px at 88% -20%, rgba(14,90,230,.1), transparent 60%), linear-gradient(180deg,#fff,var(--bg-soft)); border-bottom:1px solid var(--border); padding-bottom:32px; } .shop-hero h1{font-size:clamp(30px,3.8vw,44px);margin-bottom:12px} .shop-hero .sh-sub{color:var(--ink-2);font-size:16px;max-width:560px} /* D9: eram 4 placas (com uma delas segurando 99% da loja); agora são 8 — os 6 corredores reais + Tudo + o atalho pro Mercado Livre. 4 colunas dá 2 fileiras redondas no desktop e o nome curto entra no lugar do longo no celular. */ .goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:32px 0 20px} @media(max-width:960px){.goal-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:560px){.goal-grid{grid-template-columns:repeat(2,1fr);gap:8px}} .goal{ position:relative;border-radius:16px;padding:20px 16px 16px;cursor:pointer; border:1px solid var(--border);background:#fff;transition:.2s;text-align:left; } .goal svg{width:28px;height:28px;color:var(--accent);margin-bottom:12px} .goal b{display:block;font-family:var(--font-d);font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink);line-height:1.25} /* ⚠️ `>` de propósito: `.goal span` pegava TAMBÉM os dois spans de nome dentro do (a versão longa e a curta do celular) e, com specificity maior que `.g-curto`, forçava as duas a aparecer — a placa saía "Lavar & limpar / Lavar" empilhado. Só o filho direto é a linha de apoio. */ .goal > span{font-size:12px;color:var(--ink-3);display:block;line-height:1.35} .goal:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(14,90,230,.3)} a.goal{display:block;text-decoration:none} .goal.on{ background:linear-gradient(150deg,#1E6BFF,#0A2E86);border-color:transparent; box-shadow:0 14px 32px rgba(14,90,230,.35); } .goal.on b{color:#fff} .goal.on > span{color:#BcD5FF} .goal.on svg{color:#fff} /* o selo de contagem no canto: a placa diz o que tem dentro, o selo diz quanto */ .goal .g-n{position:absolute;top:var(--sp-2);right:var(--sp-2);font-style:normal; font-size:var(--fs-3xs);font-weight:800;letter-spacing:.04em;line-height:18px; padding:0 var(--sp-2);border-radius:var(--r-full);color:var(--ink-3); background:rgba(120,140,175,.12);border:1px solid var(--border)} .goal.on .g-n{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.34);color:#fff} .g-curto{display:none} @media(max-width:560px){ .goal{padding:var(--sp-4) var(--sp-3) var(--sp-3)} .goal svg{width:24px;height:24px;margin-bottom:var(--sp-2)} .goal > span{font-size:var(--fs-3xs)} .g-full{display:none} .g-curto{display:inline} } .trust-strip{ display:flex;gap:8px 32px;flex-wrap:wrap;align-items:center; padding:12px 20px;background:var(--blue-soft); border:1px solid #D9E6FB;border-radius:16px; font-size:14px;color:var(--ink-2);font-weight:500; } .trust-strip .ti{display:flex;gap:8px;align-items:center} .trust-strip .ti svg{width:15px;height:15px;color:var(--accent);flex-shrink:0} /* D9: o topo era 32px EM CIMA dos 80px (52 no celular) que a `.shop-wall` já dá — 112px de vazio entre a placa de corredor e a barra de filtros, e o filtro é justamente o que a pessoa procura assim que decide o corredor. O respiro da seção continua sendo o do muro; aqui não se soma um segundo. */ .shop-body{padding:0 0 56px} .shop-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;flex-wrap:wrap} .shop-toolbar .count{font-size:14px;color:var(--ink-2)} .shop-toolbar .count b{color:var(--ink)} .chips{display:flex;gap:8px;flex-wrap:wrap} .chip-f{padding:8px 16px;border-radius:999px;border:1px solid var(--border);font-size:14px;color:var(--ink-2);background:#fff;cursor:pointer;transition:.15s;font-weight:600} .chip-f:hover{border-color:var(--accent);color:var(--accent)} .chip-f.on{background:var(--accent);color:#fff;border-color:var(--accent)} .wa-block{ margin-top:48px;padding:32px;text-align:center; background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius); } .wa-block .muted{margin-bottom:8px} .wa-block b{display:block;font-weight:600;margin-bottom:16px} /* ========================================================= CHECKOUT, barra própria (padrão, confiável) ========================================================= */ .co-top{border-bottom:1px solid var(--border);background:var(--bg)} .co-top .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px} .co-back{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2);font-weight:500} .co-back:hover{color:var(--accent)} .co-back svg{width:15px;height:15px} .co-secure{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ok);font-weight:600} .co-secure svg{width:15px;height:15px} @media(max-width:640px){.co-back span{display:none}} /* ========================================================= PÁGINAS INTERNAS, hero de página (Sobre / Contato) ========================================================= */ .page-hero{ position:relative;overflow:hidden; background: radial-gradient(1000px 420px at 86% -20%, rgba(14,90,230,.10), transparent 60%), linear-gradient(180deg,#fff,var(--bg-soft)); border-bottom:1px solid var(--border); } .page-hero .wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center;padding-top:150px;padding-bottom:66px} .page-hero .wrap>*{min-width:0} .page-hero h1{font-size:clamp(30px,4.4vw,56px);margin-bottom:20px;overflow-wrap:break-word} .page-hero h1 em{font-style:normal;color:var(--accent)} .page-hero .lead{font-size:18px;color:var(--ink-2);max-width:520px;margin-bottom:32px} .ph-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px} .ph-mini{display:flex;gap:24px;flex-wrap:wrap} .ph-mini .m{display:flex;flex-direction:column} .ph-mini .m b{font-family:var(--font-d);font-size:20px;font-weight:800;color:var(--ink)} .ph-mini .m span{font-size:12px;color:var(--ink-3)} .ph-photo{ position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--border); box-shadow:0 26px 60px rgba(10,46,134,.22);aspect-ratio:4/5;background:var(--surface-2); } .ph-photo img{width:100%;height:100%;object-fit:cover} .ph-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(6,20,54,.55));pointer-events:none} .ph-tag{ position:absolute;left:16px;right:16px;bottom:16px;z-index:2; display:flex;align-items:center;gap:12px; background:rgba(8,26,68,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:12px 16px; } .ph-tag .pt-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0} .ph-tag .pt-ic svg{width:20px;height:20px} .ph-tag b{display:block;color:#fff;font-family:var(--font-d);font-size:14px;font-weight:700;line-height:1.2} .ph-tag span{display:block;color:rgba(255,255,255,.8);font-size:12px} .page-hero.compact .wrap{padding-bottom:52px} @media(max-width:900px){ .page-hero .wrap{grid-template-columns:1fr;gap:32px;padding-top:118px} .ph-photo{aspect-ratio:16/11;order:-1} } /* ---------- faixa de números ---------- */ .stat-strip{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .stat-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-top:40px;padding-bottom:40px} .stat{display:flex;flex-direction:column;gap:4px} .stat b{font-family:var(--font-d);font-size:clamp(24px,3.2vw,36px);font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1} .stat span{font-size:14px;color:var(--ink-2);font-weight:500} /* T3·S1 (20/07) · A CAUSA do "números muito pequenos" que o Anthony reportou: o odômetro (initOdometer) monta os dígitos em DENTRO do , e o `.stat span` de 14px acima os encolhia pra tamanho de rótulo. Dentro do , span herda o tamanho do número. */ .stat b span{font-size:inherit;letter-spacing:0;text-transform:none;color:inherit;font-weight:inherit} @media(max-width:640px){.stat-strip .wrap{grid-template-columns:repeat(2,1fr);gap:24px}} /* T3·S1 (20/07) · O PLACAR DE RUA — decisão S1-A do Anthony: cada número numa placa de metal parafusada (o mesmo material da .tl-placa/FX.05), número grande em Bungee que CONTA no scroll. O fundo sólido "texto jogado" morreu. */ .stat.placa{position:relative;gap:var(--sp-2);align-items:flex-start; background:linear-gradient(160deg,#39414E,#20262F); border:var(--bw-1) solid rgba(255,255,255,.16);border-radius:var(--r-xs); padding:var(--sp-5) var(--sp-6); box-shadow:inset 0 var(--bw-1) 0 rgba(255,255,255,.16),0 var(--sp-2) var(--sp-5) rgba(0,0,0,.5)} .stat.placa::before,.stat.placa::after{content:"";position:absolute;width:7px;height:7px;border-radius:var(--r-full); background:radial-gradient(circle at 35% 30%,#C6CDD8,#5A6270);box-shadow:inset 0 -1px 1px rgba(0,0,0,.6)} .stat.placa::before{left:7px;top:7px} .stat.placa::after{right:7px;bottom:7px} .stat.placa b{font-family:var(--font-lt,'Bungee',cursive);font-weight:400;color:#EAF2FF; font-size:var(--fs-4xl);letter-spacing:.02em;line-height:1; text-shadow:0 2px 0 rgba(0,0,0,.45)} /* > span, e NÃO span: o odômetro (initOdometer) constrói DENTRO do — um `span` solto encolhia os dígitos pra tamanho de rótulo */ .stat.placa > span{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase; color:#96A2B4;font-weight:600} @media(max-width:640px){.stat.placa{padding:var(--sp-4) var(--sp-5)}.stat.placa b{font-size:var(--fs-3xl)}} /* ---------- história ---------- */ .story{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center} .story .story-copy p{color:var(--ink-2);font-size:16px;margin-bottom:16px;line-height:1.75} .story .story-copy p:last-child{margin-bottom:0} .story .story-copy b{color:var(--ink);font-weight:700} .story .quote{font-family:var(--font-d);font-weight:700;font-size:clamp(20px,2.4vw,24px);color:var(--ink);line-height:1.3;letter-spacing:-.01em;border-left:3px solid var(--accent);padding-left:20px;margin:4px 0 24px} .story-panel{ position:relative;border-radius:24px;overflow:hidden;height:100%;min-height:360px; background:radial-gradient(600px 320px at 78% 12%, rgba(255,255,255,.12), transparent 60%),linear-gradient(150deg,rgba(30,107,255,.5),rgba(10,46,134,.6)); border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 50px rgba(10,46,134,.28); /* T2·S2 (20/07): o joinha ficava afundado no rodapé do card ("tá muito pra baixo") — agora ele CENTRA no painel, com respiro igual em cima e embaixo */ display:flex;align-items:center;justify-content:center; } .story-panel img{height:84%;width:auto;object-fit:contain;object-position:center;filter:drop-shadow(0 16px 22px rgba(4,16,48,.42));position:relative;z-index:1} .story-panel .sp-badge{ position:absolute;top:20px;left:20px;z-index:2; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24); border-radius:16px;padding:12px 16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); } .story-panel .sp-badge b{display:block;font-family:var(--font-d);font-size:24px;font-weight:800;color:#fff;line-height:1} .story-panel .sp-badge span{font-size:12px;color:#BcD5FF;font-weight:600} @media(max-width:820px){.story{grid-template-columns:1fr;gap:32px}.story-panel{min-height:300px;order:-1}} /* ---------- as 2 unidades (cards com foto) ---------- */ .units{display:grid;grid-template-columns:1fr 1fr;gap:24px} @media(max-width:820px){.units{grid-template-columns:1fr}} .unit{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column; } .unit:hover{box-shadow:var(--glow);border-color:rgba(14,90,230,.3);transform:translateY(-3px)} .unit .u-photo{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--surface-2)} .unit .u-photo img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .unit:hover .u-photo img{transform:scale(1.04)} .unit .u-pill{ position:absolute;top:13px;left:13px;z-index:2; display:inline-flex;align-items:center;gap:8px; background:rgba(8,26,68,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 12px; font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em; } .unit .u-pill .dot{width:7px;height:7px;border-radius:50%;background:#7CF0B4} .unit .u-body{padding:24px 24px 24px;display:flex;flex-direction:column;flex:1} .unit .u-body h3{font-size:20px;margin-bottom:12px} .u-line{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink-2);margin-bottom:12px;line-height:1.5} .u-line svg{width:17px;height:17px;color:var(--accent);flex-shrink:0;margin-top:2px} .u-line b{color:var(--ink);font-weight:600} .u-line a{color:var(--ink-2)} .u-line a:hover{color:var(--accent)} .u-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:16px} .u-row .btn{flex:1;min-width:140px} /* ---------- parede de marcas (Sobre) ---------- */ .brandwall{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:760px){.brandwall{grid-template-columns:repeat(2,1fr)}} .bw-item{ background:var(--surface);border:1px solid var(--border);border-radius:16px; padding:20px 16px;text-align:center;transition:.2s; } .bw-item:hover{border-color:rgba(14,90,230,.35);box-shadow:var(--shadow-sm);transform:translateY(-2px)} .bw-item b{display:block;font-family:var(--font-d);font-weight:800;font-size:18px;color:var(--ink);letter-spacing:.01em} .bw-item span{font-size:12px;color:var(--ink-3);font-weight:500} .bw-item.excl{background:linear-gradient(150deg,#1E6BFF,#0A2E86);border-color:transparent;box-shadow:0 12px 30px rgba(14,90,230,.3)} .bw-item.excl b{color:#fff} .bw-item.excl span{color:#BcD5FF;font-weight:700;letter-spacing:.06em;text-transform:uppercase} /* ========================================================= CONTATO, métodos, mapa-card, formulário ========================================================= */ .cmethods{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:900px){.cmethods{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.cmethods{grid-template-columns:1fr}} .cmethod{ display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:24px 24px;box-shadow:var(--shadow-sm);transition:.2s; } .cmethod:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--glow)} .cmethod .cm-ic{width:48px;height:48px;border-radius:12px;background:var(--blue-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px} .cmethod.wa .cm-ic{background:var(--ok-dim);color:var(--ok)} .cmethod .cm-ic svg{width:23px;height:23px} .cmethod h3{font-size:16px;margin-bottom:4px} .cmethod p{font-size:14px;color:var(--ink-2);margin-bottom:16px;flex:1} .cmethod .cm-val{font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--ink);display:inline-flex;align-items:center;gap:8px} .cmethod .cm-val:hover{color:var(--accent)} .cmethod .cm-val svg{width:15px;height:15px;flex-shrink:0} /* mapa-card (localização sem iframe externo) */ .map-card{ position:relative;border-radius:var(--radius);overflow:hidden; border:1px solid var(--border);min-height:190px; background: linear-gradient(135deg, rgba(14,90,230,.06), rgba(14,90,230,0) 40%), repeating-linear-gradient(0deg, #EAF1FE, #EAF1FE 1px, transparent 1px, transparent 26px), repeating-linear-gradient(90deg, #EAF1FE, #EAF1FE 1px, transparent 1px, transparent 26px), #F4F8FF; } .map-card::before{content:"";position:absolute;left:0;top:38%;width:100%;height:12px;background:#DCE7FB;transform:rotate(-4deg)} .map-card::after{content:"";position:absolute;left:24%;top:0;width:13px;height:100%;background:#DCE7FB;transform:rotate(3deg)} .map-card.photo::before,.map-card.photo::after{display:none} /* fachada real no lugar do mapa desenhado */ /* T2·C1 (20/07): o nome da cidade era pill branca com texto claro NO MEIO da fachada — ilegível ("branco igual o fundo"). Virou TARJA no rodapé da foto: scrim escuro, texto branco, pin pequeno do lado — lê em qualquer fachada. */ .map-card.photo .map-pin{left:14px;right:auto;top:auto;bottom:14px;transform:none; flex-direction:row;align-items:center;gap:8px} .map-card.photo .map-pin .pin{width:30px;height:30px;box-shadow:0 6px 14px rgba(4,10,26,.5)} .map-card.photo .map-pin .pin svg{width:14px;height:14px} .map-card.photo .pin-label{margin-top:0;background:rgba(6,10,20,.82);color:#fff; border-color:rgba(255,255,255,.18);box-shadow:0 6px 16px rgba(4,10,26,.45)} .map-pin{ position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:2; display:flex;flex-direction:column;align-items:center; } .map-pin .pin{ width:44px;height:44px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg); box-shadow:0 10px 22px rgba(14,90,230,.4);display:flex;align-items:center;justify-content:center; } .map-pin .pin svg{width:20px;height:20px;color:#fff;transform:rotate(45deg)} .map-pin .pin-label{margin-top:12px;background:#fff;border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;color:var(--ink);box-shadow:var(--shadow-sm);white-space:nowrap} /* formulário de contato */ .contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:start} @media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:32px}} .form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm)} .form-card h3{font-size:20px;margin-bottom:8px} .form-card .fc-sub{font-size:14px;color:var(--ink-2);margin-bottom:24px} .cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .cf-field{margin-bottom:16px} .cf-field.full{grid-column:1/-1} .cf-field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px} .cf-field input,.cf-field textarea,.cf-field select{ width:100%;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm); padding:12px 16px;color:var(--ink);font-size:14px;font-family:inherit;transition:.15s; } .cf-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23566079' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px} .cf-field textarea{resize:vertical;min-height:120px;line-height:1.5} .cf-field input:focus,.cf-field textarea:focus,.cf-field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,90,230,.12)} .cf-field input.err,.cf-field textarea.err{border-color:#E5484D;background:#FFF7F7} .cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--ink-3)} .form-note{font-size:12px;color:var(--ink-3);margin-top:8px;display:flex;gap:8px;align-items:flex-start;line-height:1.5} .form-note svg{width:14px;height:14px;color:var(--ok);flex-shrink:0;margin-top:2px} .form-success{display:none;text-align:center;padding:16px 12px 8px} .form-success.show{display:block;animation:mm .25s ease} .form-success img{height:150px;margin:0 auto 12px} .form-success h3{font-size:20px;margin-bottom:8px} .form-success p{font-size:14px;color:var(--ink-2);margin-bottom:20px} /* aside do contato */ .contact-aside .co-card,.contact-aside .aside-card{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:24px;box-shadow:var(--shadow-sm);margin-bottom:20px; } .aside-card h4{font-size:16px;margin-bottom:16px} .hours{list-style:none} .hours li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border-soft);font-size:14px} .hours li:last-child{border-bottom:none} .hours li span{color:var(--ink-2)} .hours li b{color:var(--ink);font-weight:600} .hours li.closed b{color:var(--ink-3);font-weight:500} .aside-wa{ background:linear-gradient(160deg,#0C2C55,#071B39);border-radius:var(--radius); padding:24px;color:#fff;position:relative;overflow:hidden; } .aside-wa h4{color:#fff;font-size:18px;margin-bottom:8px} .aside-wa p{color:rgba(255,255,255,.75);font-size:14px;margin-bottom:20px} .aside-wa .btn{width:100%} /* ========================================================= PÁGINAS DE POLÍTICA & FAQ (ajuda / legal) ========================================================= */ .legal-hero{ position:relative;overflow:hidden; background: radial-gradient(900px 380px at 84% -30%, rgba(14,90,230,.10), transparent 60%), linear-gradient(180deg,#fff,var(--bg-soft)); border-bottom:1px solid var(--border); } .legal-hero .wrap{max-width:860px;padding-top:112px;padding-bottom:48px} .legal-hero h1{font-size:clamp(30px,4vw,44px);margin:16px 0 16px;line-height:1.12} .legal-hero h1 em{font-style:normal;color:var(--accent)} .legal-hero .lead{font-size:18px;color:var(--ink-2);max-width:660px;line-height:1.6} .legal-wrap{max-width:860px;margin:0 auto;padding:54px 24px 84px} .legal-updated{font-size:14px;color:var(--ink-3);margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--border)} .legal h2{font-size:20px;margin:40px 0 16px;scroll-margin-top:100px;letter-spacing:-.01em} .legal h2:first-of-type{margin-top:0} .legal h3{font-size:16px;margin:24px 0 12px;color:var(--ink)} .legal p{color:var(--ink-2);font-size:16px;line-height:1.78;margin-bottom:16px} .legal ul{margin:0 0 20px;padding:0;list-style:none} .legal li{position:relative;padding-left:24px;color:var(--ink-2);font-size:16px;line-height:1.68;margin-bottom:12px} .legal li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:2px;background:var(--accent)} .legal b,.legal strong{color:var(--ink);font-weight:700} .legal a:not(.btn){color:var(--accent);font-weight:600} .legal a:not(.btn):hover{text-decoration:underline} .legal-hl{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:20px 20px;margin:20px 0} .legal-hl p:last-child{margin-bottom:0} .legal-hl b{color:var(--ink)} .legal-cta{margin-top:40px;padding-top:32px;border-top:1px solid var(--border);display:flex;gap:16px;flex-wrap:wrap;align-items:center} .legal-cta p{margin:0;font-size:16px;color:var(--ink-2)} /* FAQ, acordeão nativo (
) */ .faq-list{max-width:860px;margin:0 auto} .faq-cat{display:flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:700;font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase;margin:32px 0 16px} .faq-cat::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} .faq-cat:first-child{margin-top:0} .faq-item{border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-bottom:12px;overflow:hidden;transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow-sm)} .faq-item[open]{border-color:rgba(14,90,230,.35);box-shadow:var(--shadow-sm)} .faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;font-family:var(--font-d);font-weight:700;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary .fq-ic{width:22px;height:22px;flex-shrink:0;color:var(--accent);transition:transform .2s} .faq-item[open] summary .fq-ic{transform:rotate(45deg)} .faq-item .fq-body{padding:0 24px 20px;color:var(--ink-2);font-size:16px;line-height:1.72} .faq-item[open] .fq-body{animation:gdUp .24s ease} .faq-item .fq-body p{margin:0 0 12px} .faq-item .fq-body p:last-child{margin-bottom:0} .faq-item .fq-body a{color:var(--accent);font-weight:600} /* ========================================================= KIT DE LOADING, micro-interações e overlays temáticos (aprovado no lab-loading: Wash & Shine no splash, robô no caminho do carrinho, kit micro em tudo) ========================================================= */ /* ---- barrinha de topo (troca de página) ---- */ #gd-topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:4000;pointer-events:none} #gd-topbar i{display:block;height:100%;width:0;opacity:0;border-radius:0 999px 999px 0; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); box-shadow:0 0 8px rgba(46,116,255,.65); transition:width .5s cubic-bezier(.3,.6,.3,1),opacity .25s} #gd-topbar.go i{opacity:1;width:72%} #gd-topbar.done i{opacity:1;width:100%;transition:width .3s ease,opacity .25s} #gd-topbar.fade i{opacity:0;width:100%} /* ---- spinner G (micro, herda contexto) ---- */ .gd-spin{width:15px;height:15px;border-radius:50%;flex:none;display:inline-block;vertical-align:-2px; border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:gdspin .7s linear infinite} .gd-spin.dark{border-color:var(--blue-soft);border-top-color:var(--accent)} @keyframes gdspin{to{transform:rotate(360deg)}} .btn.is-loading,button.is-loading{pointer-events:none;opacity:.92} .btn .gd-spin{margin-right:8px} /* ---- skeleton de card da vitrine ---- */ .sk-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;position:relative} .sk-card::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(14,90,230,.08) 50%,transparent); animation:gdshimmer 1.4s ease infinite} @keyframes gdshimmer{to{transform:translateX(100%)}} .sk-card .sk-th{aspect-ratio:1/1;background:var(--surface-2)} .sk-card .sk-b{padding:16px;display:flex;flex-direction:column;gap:8px} .sk{display:block;background:var(--surface-2);border-radius:8px} /* ---- skeleton de LINHA da busca (22/08) ---- Nas páginas que não vendem, o catálogo desce sob demanda: abrir a busca tem um instante de espera de verdade. Rótulo solto num vazio de 800px não é resposta. A espera usa a MESMA geometria da linha de resultado, então a lista não pula quando o produto chega — ela só ganha conteúdo. */ .s-item.sk-row{cursor:default;position:relative;overflow:hidden} .s-item.sk-row::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,rgba(14,90,230,.08) 50%,transparent); animation:gdshimmer 1.4s ease infinite} .s-item.sk-row .s-ic{background:var(--surface-2)} .s-item.sk-row .sk-l1{height:14px;width:62%} .s-item.sk-row .sk-l2{height:11px;width:34%;margin-top:8px} .s-item.sk-row .sk-lp{height:14px;width:64px;margin-left:auto;flex-shrink:0} /* ---- foto de produto entra com fade ---- */ img.prod-photo{animation:gdImgIn .38s ease} @keyframes gdImgIn{from{opacity:0}to{opacity:1}} /* ---- badge do carrinho dá um pulso ao adicionar ---- */ .cart-count.bump{animation:gdBump .5s cubic-bezier(.2,1.6,.4,1)} @keyframes gdBump{0%{transform:scale(1)}35%{transform:scale(1.5)}100%{transform:scale(1)}} /* ---- resultados da busca entram em cascata ---- */ .search-results .s-item{animation:gdUp .26s ease backwards} .search-results .s-item:nth-child(3){animation-delay:.04s} .search-results .s-item:nth-child(4){animation-delay:.08s} .search-results .s-item:nth-child(5){animation-delay:.12s} .search-results .s-item:nth-child(6){animation-delay:.16s} .search-results .s-item:nth-child(7){animation-delay:.2s} .search-results .s-item:nth-child(8){animation-delay:.24s} @keyframes gdUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}} /* ---- resumo do checkout recalculando ---- */ .sum-wait{opacity:.45;transition:opacity .2s;position:relative} .sum-wait::after{content:"";position:absolute;top:16px;right:16px;width:16px;height:16px;border-radius:50%; border:2px solid var(--blue-soft);border-top-color:var(--accent);animation:gdspin .7s linear infinite} /* ---- A PORTA DE AÇO — abertura da loja E cortina de navegação (R4) ---- Toda loja de rua fecha com porta de enrolar — e toda porta de aço do Brasil amanhece grafitada. A nossa tá pintada com a marca da casa. O ritual: a arte "chacoalha" pra vida, a fresta de luz embaixo mostra que a loja JÁ tá acesa, o cadeado destrava e cai, a porta dá o tranco de porta real e sobe enrolando no cilindro do topo — revelação física, sem fade. Clique em qualquer lugar = puxar a porta direto. Desde a R4 o mesmo objeto tem DOIS papéis (o splash deixou de existir como coisa separada): · `.abre` — abertura da loja: 1ª entrada da sessão, com cadeado e bilhete. · `.tr` — transição do porta-menu: desce na página que sai, sobe na que entra. A troca de cena acontece ATRÁS da porta fechada. Estados: .down (descendo) · .landed (encostada) · .rattle (tranco) · .lift (sobe). */ html.gd-splash-hold::before,html.gd-cartload-hold::before{content:"";position:fixed;inset:0;z-index:4999} html.gd-splash-hold::before{background: repeating-linear-gradient(180deg,#1B2642 0 4px,#243154 10px,#141E38 36px,#0A1226 42px,#070D1C 46px)} html.gd-cartload-hold::before{background:linear-gradient(180deg,#fff 30%,var(--blue-soft) 130%)} #gd-porta{position:fixed;inset:0;z-index:5000;overflow:hidden;cursor:pointer;background:transparent} #gd-porta.lift{cursor:default;pointer-events:none} .gdd-door{position:absolute;inset:0;will-change:transform; background: radial-gradient(120% 90% at 50% 28%,rgba(46,116,255,.06),transparent 62%), repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 2px,transparent 2px 9px), repeating-linear-gradient(180deg,#1B2642 0 4px,#243154 10px,#141E38 36px,#0A1226 42px,#070D1C 46px); box-shadow:0 22px 44px rgba(0,0,0,.7)} .gdd-rail{position:absolute;top:0;bottom:0;width:clamp(12px,2.4vw,24px);z-index:2; background:linear-gradient(90deg,#040810,#101A30 55%,#040810)} .gdd-rail.l{left:0;border-right:1px solid rgba(255,255,255,.07)} .gdd-rail.r{right:0;border-left:1px solid rgba(255,255,255,.07)} .gdd-art{position:absolute;left:0;right:0;top:38%;transform:translateY(-50%); display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;z-index:3} .ga-word{font-family:var(--font-gt,'Pirata One',cursive);font-size:clamp(64px,15vw,128px);line-height:1;letter-spacing:.02em; background:linear-gradient(180deg,#FFFFFF 0%,#D7E1EF 28%,#93A7C4 46%,#F2F7FF 52%,#5E7291 68%,#CBD8E9 86%,#8FA3C0 100%); -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 3px 0 rgba(0,0,0,.6)) drop-shadow(0 0 22px rgba(127,179,255,.25)); animation:gddPop .5s cubic-bezier(.2,1.2,.35,1) .08s both} .ga-tag{font-family:var(--font-tag,'Sedgwick Ave Display',cursive);font-size:clamp(24px,4.5vw,36px);color:#38E1F2; transform:rotate(-3deg);text-shadow:0 0 22px rgba(56,225,242,.5);animation:gddSpray .45s ease .45s both} .ga-est{margin-top:16px;font-family:var(--font-d);font-weight:700;font-size:10px;letter-spacing:.34em; color:rgba(245,248,255,.42);animation:gddSpray .45s ease .7s both} @keyframes gddPop{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}} @keyframes gddSpray{from{opacity:0;filter:blur(9px)}to{opacity:1;filter:blur(0)}} .gdd-lock{position:absolute;left:50%;bottom:11.5%;transform:translateX(-50%);z-index:3;width:34px;height:44px} .gdd-lock .hasp{position:absolute;left:50%;top:0;width:20px;height:19px;transform:translateX(-50%); border:4px solid #93A2C2;border-bottom:none;border-radius:12px 12px 0 0; transition:transform .28s cubic-bezier(.3,1.6,.4,1)} .gdd-lock .body{position:absolute;left:2px;right:2px;top:15px;height:26px;border-radius:8px; background:linear-gradient(160deg,#C3CFE6,#7C8BA9 55%,#4A5670);box-shadow:0 3px 8px rgba(0,0,0,.55)} .gdd-lock .body::after{content:"";position:absolute;left:50%;top:8px;width:5px;height:9px;transform:translateX(-50%); border-radius:4px 4px 2px 2px;background:#232D45} #gd-porta.unlock .hasp{transform:translateX(-50%) translateY(-7px) rotate(-32deg)} #gd-porta.unlock .gdd-lock{animation:gddLockDrop .5s ease-in .22s forwards} @keyframes gddLockDrop{to{transform:translateX(-50%) translateY(30px) rotate(-16deg);opacity:0}} .gdd-handle{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:132px;height:11px;border-radius:999px;z-index:2; background:linear-gradient(180deg,#3A4A72,#111B33); box-shadow:0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.25)} .gdd-sub{position:absolute;left:0;right:0;bottom:2.4%;z-index:3;text-align:center; font-family:var(--font-d);font-weight:600;font-size:12px;letter-spacing:.24em;text-transform:uppercase; color:rgba(198,208,230,.6);transition:opacity .16s} .gdd-sub.tag{font-family:var(--font-tag,'Sedgwick Ave Display',cursive);font-weight:400;text-transform:none; letter-spacing:.02em;font-size:24px;color:#38E1F2;text-shadow:0 0 18px rgba(56,225,242,.55)} .gdd-fresta{position:absolute;left:0;right:0;bottom:-2px;height:4px;z-index:4; background:linear-gradient(90deg,transparent,rgba(56,225,242,.9) 18%,#EAFDFF 50%,rgba(56,225,242,.9) 82%,transparent); box-shadow:0 0 22px 4px rgba(56,225,242,.5),0 0 60px 14px rgba(46,116,255,.32); animation:gddFresta 1.5s ease-in-out infinite} @keyframes gddFresta{0%,100%{opacity:.55}50%{opacity:1}} .gdd-roll{position:absolute;top:0;left:0;right:0;height:36px;z-index:6;transform:translateY(-102%); transition:transform .28s ease .1s; background: repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 26px), linear-gradient(180deg,#2A3760,#0D1528 72%,#05090F); border-bottom:2px solid #040810;box-shadow:0 10px 26px rgba(0,0,0,.55)} /* o cilindro aparece assim que a porta existe: é dele que ela desenrola */ #gd-porta.lift .gdd-roll,#gd-porta.down .gdd-roll,#gd-porta.landed .gdd-roll{transform:translateY(0)} #gd-porta.rattle .gdd-door{animation:gddRattle .2s ease-in-out 2} @keyframes gddRattle{0%,100%{transform:translateY(0)}30%{transform:translateY(2.5px)}70%{transform:translateY(-2px)}} #gd-porta.lift .gdd-door{animation:gddLift 1.02s cubic-bezier(.62,.04,.22,1) forwards} @keyframes gddLift{0%{transform:translateY(0)}15%{transform:translateY(-15%)}25%{transform:translateY(-12.5%)}100%{transform:translateY(-104%)}} /* a porta DESCENDO (só no modo transição): você VÊ ela chegar e encostar */ #gd-porta.down .gdd-door{animation:gddDown .62s cubic-bezier(.45,.05,.25,1) both} @keyframes gddDown{0%{transform:translateY(-104%)}84%{transform:translateY(1.8%)}100%{transform:translateY(0)}} #gd-porta.landed .gdd-door{transform:translateY(0)} /* modo transição: sem cadeado/bilhete; a arte entra COM a porta, não antes dela */ #gd-porta.tr .ga-word,#gd-porta.tr .ga-tag{animation:none} #gd-porta.tr .gdd-art{opacity:0;transition:opacity .26s} #gd-porta.tr.down .gdd-art,#gd-porta.tr.landed .gdd-art{opacity:1} #gd-porta.tr.lift .gdd-art{opacity:0} /* ---- ROBÔ NO CORRE · chegada ao carrinho/checkout ---- */ #gd-cartload{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center; background:linear-gradient(180deg,#fff 30%,var(--blue-soft) 130%);transition:opacity .32s ease} #gd-cartload.out{opacity:0;pointer-events:none} .gc-inner{width:min(560px,84vw);position:relative;height:190px} .gc-runner{position:absolute;left:0;bottom:58px;width:92px; animation:gcRun .85s cubic-bezier(.4,.12,.5,.95) forwards} @keyframes gcRun{from{left:0}to{left:calc(100% - 92px)}} .gc-runner img{width:92px;display:block;animation:gcTrot .36s ease-in-out infinite;transform-origin:50% 92%} @keyframes gcTrot{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-3.5px) rotate(1.6deg)}} .gc-track{position:absolute;left:0;right:0;bottom:40px;height:8px;border-radius:999px; background:var(--surface-2);border:1px solid var(--border);overflow:hidden} .gc-track i{position:absolute;inset:0;width:0;border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-hi)); box-shadow:0 0 10px rgba(14,90,230,.35);animation:gcFill .85s cubic-bezier(.4,.12,.5,.95) forwards} @keyframes gcFill{to{width:100%}} .gc-dash{position:absolute;left:0;right:0;bottom:26px;height:3px; background:repeating-linear-gradient(90deg,var(--border) 0 20px,transparent 20px 40px); animation:gcDash .5s linear infinite} @keyframes gcDash{to{background-position:-40px 0}} .gc-lbl{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:14px;color:var(--ink-2); transition:opacity .15s} /* ---- reveal on scroll (marcado pelo initReveal do main.js) ---- */ .rv{opacity:0;transform:translateY(16px);transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);transition-delay:var(--rvd,0s)} .rv.in{opacity:1;transform:none} /* ---- cards da vitrine entram em cascata (--i setado no renderGrid) ---- */ .prod-grid .card-prod{animation:gdUp .3s ease backwards;animation-delay:calc(var(--i,0)*.04s)} /* durante o morph do filtro (View Transitions) a cascata cala a boca: card que desliza pro novo lugar não pode nascer de novo por cima */ .prod-grid.vt-swap .card-prod{animation:none} /* ---- mascote respira + aceno de boas-vindas (sutil) ---- */ .hero-mascote{animation:gdFloatX 5.5s ease-in-out infinite;transform-origin:58% 100%} @keyframes gdFloatX{ 0%,100%{transform:translateX(-50%) translateY(0) rotate(-1deg)} 30%{transform:translateX(-50%) translateY(-6px) rotate(1.3deg)} 60%{transform:translateX(-50%) translateY(-4px) rotate(-.5deg)} } .sp-mascote{animation:gdFloat 6s ease-in-out 1.2s infinite} .cta-mascote{animation:gdFloat 6.5s ease-in-out .6s infinite} @keyframes gdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* ---- acessibilidade: usuário pediu menos movimento ---- */ @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} #gd-porta,#gd-cartload,#gd-topbar{display:none!important} html.gd-splash-hold::before,html.gd-cartload-hold::before{display:none!important} .sk-card::after,.s-item.sk-row::after{animation:none} img.prod-photo,.search-results .s-item{animation:none} .cart-count.bump{animation:none} .rv{opacity:1;transform:none;transition:none} .prod-grid .card-prod{animation:none} .hero-mascote,.sp-mascote,.cta-mascote{animation:none} .hero-bubbles i,.hpt-gloss,.hpt-drop,.btn-arw,.hero-card.main .badge-accent,.hero-card.main .badge-accent::after{animation:none!important} .hero-card.main::before{display:none} .hero-price-tag{transition:none} .mobile-menu.open,.faq-item[open] .fq-body{animation:none} .skip-link{transition:none} } /* ============================================================ FASE 12 — Acessibilidade & responsivo (foco de teclado, skip-link) ============================================================ */ html{scroll-padding-top:96px} img,svg,video{max-width:100%} /* foco visível pra navegação por teclado (sem afetar clique de mouse) */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible, .icon-btn:focus-visible,.burger:focus-visible,.card-prod:focus-visible{ outline:3px solid var(--accent,#0E5AE6); outline-offset:2px; border-radius:8px; } input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--accent,#0E5AE6); outline-offset:1px; } /* skip-link: pular direto pro conteúdo (visível só ao focar via Tab) */ .skip-link{ position:fixed;top:10px;left:10px;z-index:9999; background:var(--accent,#0E5AE6);color:#fff; padding:12px 20px;border-radius:12px;font-weight:700;font-size:14px; text-decoration:none;box-shadow:0 8px 24px rgba(14,90,230,.28); transform:translateY(-160%);transition:transform .16s ease; } .skip-link:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:2px} [tabindex="-1"]:focus{outline:none} /* ============================================================ COMPONENTES VIVOS (curadoria das 13 ideias · lab-componentes) Doutrina: pouco movimento, muita precisão · 1 assinatura por tela · scroll anima 1× · hover = resposta · reduced-motion off. .gd-go é setado pelo IntersectionObserver do components.js. ============================================================ */ /* ---------- card de produto: coreografia de hover (upgrade in-place) ---------- */ .card-prod::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:999px;z-index:2; background:linear-gradient(90deg,var(--accent-hi),var(--blue-deep)); transform:scaleX(0);transform-origin:left;transition:transform .42s cubic-bezier(.2,.8,.3,1)} .card-prod:hover::after{transform:scaleX(1)} .card-prod .price .pix{transition:transform .3s ease,color .2s} .card-prod:hover .price .pix{transform:scale(1.04);transform-origin:left} @media(prefers-reduced-motion:reduce){.card-prod::after{transition:none}.card-prod:hover .price .pix{transform:none}} /* ---------- 2 · barra de confiança viva (home, após o hero) ---------- */ .gd-trustbar{background:var(--bg-soft);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .gd-trustbar .wrap{padding:32px 24px 24px} .gd-tb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:640px){.gd-tb-row{grid-template-columns:repeat(2,1fr);row-gap:24px}} .gd-tb{text-align:center} .gd-tb .n{font-family:var(--font-d);font-weight:800;font-size:clamp(24px,3.4vw,36px);color:var(--blue-deep);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums} .gd-tb .n em{font-style:normal;color:var(--accent)} .gd-tb .l{font-size:12px;color:var(--ink-2);margin-top:8px;line-height:1.35} .gd-tb-line{height:3px;border-radius:999px;background:var(--border);margin-top:24px;overflow:hidden} .gd-tb-line i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--accent-hi),var(--blue-deep))} .gd-go .gd-tb-line i{animation:gdTbLine 1.5s cubic-bezier(.3,.7,.3,1) forwards} @keyframes gdTbLine{to{width:100%}} /* ---------- 3 · AS SAÍDAS DA 01 · vitrine por objetivo (home) ---------- Cada card é uma PLACA DE SERVIÇO rodoviário — o azul de placa É o azul da marca: campo azul, orla branca, parafusos (a técnica da prateleira do FX.05), tarja SAÍDA em Bungee parafusada por cima da borda. A assinatura: quando a seção entra na tela (.gd-muro.in do initMuro), o FAROL varre a fileira e cada placa ACENDE como retrorrefletivo — em cascata, 1×, forwards. Sem JS as placas ficam "apagadas": azul fundo, 100% legíveis. Hover = o teu farol bate de novo (flash + brilho). (As físicas da era clean — bolhas, verniz, polidor, faísca — morreram aqui em 11/07: eram a assinatura do site branco.) */ .gd-vitrine{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} @media(max-width:900px){.gd-vitrine{grid-template-columns:repeat(2,1fr)}} @media(max-width:480px){.gd-vitrine{grid-template-columns:1fr}} .gd-placa{position:relative;border-radius:var(--r-lg);color:#DAE4F8; padding:var(--sp-6) var(--sp-5) var(--sp-5);min-height:210px; display:flex;flex-direction:column;text-align:left; background:linear-gradient(165deg,#14295F 0%,#0C1B42 58%,#091430 100%); border:var(--bw-1) solid rgba(198,216,248,.22); box-shadow:0 12px 30px rgba(0,0,0,.44); transition:filter .25s cubic-bezier(.2,.8,.3,1),border-color .25s,color .55s ease var(--pld,0s)} /* cascata: a luz chega numa placa de cada vez */ .gd-placa:nth-child(1){--pld:0s} .gd-placa:nth-child(2){--pld:.14s} .gd-placa:nth-child(3){--pld:.28s} .gd-placa:nth-child(4){--pld:.42s} /* a película refletiva ACESA: gradiente vivo + trama fina da película (some layer) */ .pl-luz{position:absolute;inset:0;z-index:0;border-radius:var(--r-lg);overflow:hidden;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px), repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 9px), radial-gradient(120% 90% at 50% -10%,rgba(120,180,255,.32),transparent 60%), linear-gradient(165deg,#2E74FF 0%,#1443B8 55%,#0A2E86 100%); box-shadow:0 18px 44px rgba(46,116,255,.28); opacity:0;transition:opacity .55s cubic-bezier(.2,.8,.3,1) var(--pld,0s)} /* o FAROL: lâmina de luz quente que varre a placa (::before = seção entra, ::after = hover). Translate, não `left` — sem layout por frame. */ .pl-luz::before,.pl-luz::after{content:"";position:absolute;top:-20%;left:0;width:44%;height:140%; transform:translateX(-130%) skewX(-18deg);opacity:0; background:linear-gradient(100deg,transparent,rgba(255,246,224,.38) 42%,rgba(255,250,238,.85) 50%,rgba(255,246,224,.38) 58%,transparent)} @keyframes plFarol{0%{transform:translateX(-130%) skewX(-18deg);opacity:0} 14%{opacity:1} 100%{transform:translateX(300%) skewX(-18deg);opacity:0}} /* orla branca de placa */ .gd-placa::before{content:"";position:absolute;inset:var(--sp-2);z-index:1;pointer-events:none; border:var(--bw-2) solid rgba(233,241,255,.30);border-radius:var(--r-sm); transition:border-color .55s ease var(--pld,0s)} /* os 2 parafusos que prendem a placa (mesma técnica da prateleira do FX.05) */ .gd-placa::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(circle 3.5px at 14px 14px,#C8D6EF 0 1.8px,rgba(4,10,24,.6) 2.3px,transparent 3.5px), radial-gradient(circle 3.5px at calc(100% - 14px) 14px,#C8D6EF 0 1.8px,rgba(4,10,24,.6) 2.3px,transparent 3.5px)} /* tarja SAÍDA — plaquinha branca montada por cima da borda superior */ .pl-saida{position:absolute;top:-10px;left:var(--sp-4);z-index:2; font-family:var(--font-lt);font-weight:400;font-size:var(--fs-3xs);letter-spacing:.14em;line-height:1; color:#0A2E86;background:linear-gradient(180deg,#FFFFFF,#DCE6F6); padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs); box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(10,46,134,.18)} /* pictograma direto no campo azul (placa de verdade não tem "chip") */ .pl-ico{width:56px;height:56px;margin-bottom:auto;position:relative;z-index:2;display:block} .pl-ico svg{width:100%;height:100%;stroke:rgba(232,240,255,.78);stroke-width:3;fill:none; stroke-linecap:round;stroke-linejoin:round; filter:drop-shadow(0 0 0 rgba(180,215,255,0)); transition:stroke .55s ease var(--pld,0s),filter .55s ease var(--pld,0s)} .gd-placa b{font-family:var(--font-d);font-size:var(--fs-lg);font-weight:800;line-height:1.15; margin-top:var(--sp-4);position:relative;z-index:2;color:#E4ECFC;transition:color .55s ease var(--pld,0s)} .pl-sub{font-size:var(--fs-xs);opacity:.8;margin-top:var(--sp-1);position:relative;z-index:2} .pl-go{margin-top:var(--sp-3);font-size:var(--fs-xs);font-weight:700;display:inline-flex;align-items:center; gap:var(--sp-2);position:relative;z-index:2;color:#9FC0FF;transition:color .55s ease var(--pld,0s)} .pl-go i{font-style:normal;transition:transform .3s} .gd-placa:hover .pl-go i,.gd-placa:focus-visible .pl-go i{transform:translateX(4px)} /* V11 (18/07) · o ATALHO DE MARCA sob as SAÍDAS (a ponte Renan × Anthony): as placas vendem pelo RESULTADO; quem já sabe a marca corta caminho nos stickers — todos clicáveis, direto pro filtro da loja. */ .gd-marcas-atalho{margin-top:var(--sp-6);text-align:center} .ma-label{display:inline-block;font-family:var(--font-tag);font-size:var(--fs-lg); color:var(--cyan);transform:rotate(-1.2deg);margin-bottom:var(--sp-3); text-shadow:0 0 14px rgba(56,225,242,.3)} .ma-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3) var(--sp-2)} /* T4·H1-A (20/07) · decisão do Anthony: a fileira virou FOLHA DE STICKER die-cut com os LOGOS REAIS — base branca de adesivo, rotação alternada de quem colou na mão, canto descolando no hover. Logo quando existe; wordmark honesto quando não (o asset decide, não o gosto). */ .ma-row a{--rot:-2deg;position:relative;display:inline-flex;align-items:center;justify-content:center; min-height:44px;min-width:64px;padding:var(--sp-2) var(--sp-4);text-decoration:none; background:linear-gradient(172deg,#FDFEFF,#EDF1F8);border-radius:8px; box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 5px 12px rgba(2,8,20,.5); transform:rotate(var(--rot)); /* overflow: o canto que descola (::after) tem que ser cortado pelo raio do adesivo, senão a aba vaza como um quadrado fora do sticker */ overflow:hidden; transition:transform .18s ease,box-shadow .18s ease,opacity .22s ease,filter .22s ease} .ma-row a:nth-child(2n){--rot:1.6deg} .ma-row a:nth-child(3n){--rot:-1.1deg} .ma-row a:nth-child(5n){--rot:2.4deg} /* ✂️ 10/08 · MOVIMENTO C+A (escolhido pelo Anthony na prova de roupa `site/_lab/fx01-movimento.html`, entre 4 candidatos codados na fileira real). A · DESCOLA O CANTO — era um triangulozinho de sombra que crescia; virou uma aba de vinil que DOBRA e mostra o verso, com sombra caindo por baixo. É a leitura literal do conceito que já estava no código pela metade: adesivo die-cut colado na mão. C · FOCO — passar o mouse na fileira apaga as 39 e deixa só a apontada acesa. São 39 marcas competindo; competição demais vira ruído. É o mesmo "foco" que ele aprovou dosado fraco no card de produto, aqui numa dose maior porque aqui há muito mais concorrência visual. A fileira é TEMPERO (camada 3 do `producao/aplicacao-de-movimento.md`), não assinatura: se roubar a cena do Drop, está errada mesmo bonita. */ .ma-row a::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0; border-radius:8px 0 8px 0; background:linear-gradient(315deg,#FFF 0%,#E6ECF6 42%,#AEBACE 58%,#8C99AE 100%); box-shadow:-3px -3px 7px rgba(2,8,20,.34); transition:width .26s cubic-bezier(.2,.8,.3,1),height .26s cubic-bezier(.2,.8,.3,1)} /* --lh = altura calculada pelo fitStickerLogos (components.js): peso visual igual por área — quadrada cresce, comprida encolhe. Sem JS, vale o 24px de sempre. */ .ma-row a img{display:block;height:var(--lh,24px);width:auto;max-width:118px;object-fit:contain} .ma-row a b{font-family:var(--font-d);font-weight:800;font-size:var(--fs-xs);letter-spacing:.06em;color:#0B1626} /* ---- 16/08 · A PLACA DE AÇO (a base escura pro logo que some no branco) ---- Logo de press kit vem, muita vez, na versão VAZADA: tinta branca sobre fundo transparente. Sobre a base branca do adesivo isso não é logo discreto, é RETÂNGULO VAZIO — o Anthony abriu "Marcas" na loja e não conseguia ler Alcance, MaxPro, Sagola nem SGT Tools. Amarelo e laranja (Cadillac, Kers) reprovam pelo mesmo motivo, só que mais devagar. Quem escolhe a base é a MEDIÇÃO, não uma lista chumbada por marca (isso é dívida que ninguém lembra de pagar quando o painel sobe marca nova): o `initPlacaEscura` do components.js rasteriza o logo, mede quanta tinta separa de cada base e pendura `.selo-escuro` quando o branco reprova. A régua e a semente vivem em `_dev/medir-contraste-marcas.js`. Vale nas DUAS superfícies que usam o sticker — a fileira da home e a parede de marcas da loja. O rim claro de 1px existe porque a placa escura anda em cima de página escura: sem ele o die-cut se dissolve no fundo. */ .ma-row a.selo-escuro,.bw-selo.selo-escuro{ background:linear-gradient(172deg,#1D2839,#080E1A); box-shadow:inset 0 0 0 1px rgba(255,255,255,.15),inset 0 1px 0 rgba(255,255,255,.22),0 4px 10px rgba(2,8,20,.55)} .ma-row a.selo-escuro b,.bw-selo.selo-escuro b{color:#EEF3FF} /* a aba do canto descolando mostra o VERSO do adesivo — o desta folha é escuro */ .ma-row a.selo-escuro::after{background:linear-gradient(315deg,#3A4A63 0%,#22304A 42%,#131E31 58%,#0A121F 100%)} .ma-row a.selo-escuro:hover,.ma-row a.selo-escuro:focus-visible{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.3),0 14px 26px rgba(2,8,20,.6)} /* C · o vizinho recua. Só no ponteiro fino: no celular `:hover` gruda no toque e a fileira ficaria apagada depois do tap, sem nada pra reacender. */ @media (hover:hover) and (pointer:fine){ .ma-row:hover a{opacity:.34;filter:saturate(.55)} } .ma-row a:hover,.ma-row a:focus-visible{opacity:1;filter:none; transform:rotate(var(--rot)) translateY(-4px) scale(1.09); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 14px 26px rgba(2,8,20,.6)} /* A · a aba do canto abre junto */ .ma-row a:hover::after,.ma-row a:focus-visible::after{width:22px;height:22px} @media(max-width:560px){ .ma-row a{min-height:40px;min-width:52px;padding:var(--sp-1) var(--sp-3)} .ma-row a img{height:calc(var(--lh,24px)*.82);max-width:96px} .ma-row a b{font-size:var(--fs-2xs)} .ma-label{font-size:var(--fs-md)} } /* ✦ o sticker da crew — só na placa do ML, torto, meio pra fora (die-cut) */ .pl-stk{position:absolute;right:-6px;top:44px;z-index:2;transform:rotate(-7deg); font-family:var(--font-tag);font-size:var(--fs-2xs);line-height:1;letter-spacing:.04em; color:var(--cyan,#38E1F2);background:#0B1526;border:var(--bw-1) solid rgba(56,225,242,.55); padding:var(--sp-1) var(--sp-2);border-radius:var(--r-xs); box-shadow:0 4px 10px rgba(0,0,0,.5),0 0 14px rgba(56,225,242,.22)} /* === ACENDE: o farol chega (initMuro põe .in no .gd-muro da própria seção) === */ .sec-vitrine .gd-muro.in~.wrap .gd-placa{border-color:rgba(198,220,255,.42);color:#EAF0FC} .sec-vitrine .gd-muro.in~.wrap .pl-luz{opacity:1} .sec-vitrine .gd-muro.in~.wrap .pl-luz::before{animation:plFarol .6s cubic-bezier(.2,.8,.3,1) var(--pld,0s) 1 both} .sec-vitrine .gd-muro.in~.wrap .gd-placa::before{border-color:rgba(244,249,255,.78)} .sec-vitrine .gd-muro.in~.wrap .pl-ico svg{stroke:#fff;filter:drop-shadow(0 0 7px rgba(160,205,255,.6))} .sec-vitrine .gd-muro.in~.wrap .gd-placa b{color:#fff} .sec-vitrine .gd-muro.in~.wrap .pl-go{color:#EAF3FF} /* hover/focus = o TEU farol bate: flash rápido + a placa brilha mais */ .gd-placa:hover,.gd-placa:focus-visible{filter:brightness(1.12);border-color:rgba(214,231,255,.6)} .gd-placa:hover .pl-luz::after,.gd-placa:focus-visible .pl-luz::after{animation:plFarol .45s ease-out 1} @media(prefers-reduced-motion:reduce){ .gd-placa,.pl-luz,.gd-placa::before,.pl-ico svg,.gd-placa b,.pl-go{transition:none} .pl-luz::before,.pl-luz::after{animation:none!important} } /* ---------- 6 · monte seu kit · Balcão (perfil → objetivos → kit vivo) ---------- */ .kb{max-width:820px;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:24px; padding:24px 32px 32px;box-shadow:var(--shadow)} @media(max-width:560px){.kb{padding:20px 16px 24px;border-radius:24px}} /* trilho de progresso */ .kb-rail{display:flex;align-items:center;gap:8px;margin-bottom:24px} .kb-rs{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0;cursor:default;font-family:var(--font-b); color:var(--ink-3);font-size:14px;font-weight:600;white-space:nowrap;min-width:0} .kb-rs i{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-style:normal; font-size:14px;font-weight:700;background:var(--surface-2);color:var(--ink-3); border:1.5px solid var(--border);transition:background .3s,color .3s,border-color .3s} .kb-rs.on{color:var(--ink)} .kb-rs.on i{background:var(--accent);color:#fff;border-color:var(--accent)} .kb-rs.done{cursor:pointer;color:var(--ink-2)} .kb-rs.done i{background:var(--blue-soft);color:var(--accent);border-color:var(--blue-soft)} .kb-rs span{overflow:hidden;text-overflow:ellipsis} .kb-rl{flex:1;height:2px;background:var(--border);border-radius:2px;min-width:12px;transition:background .3s} .kb-rl.done{background:var(--accent)} @media(max-width:520px){ .kb-rail{gap:8px} .kb-rs{font-size:12px;gap:8px} .kb-rs i{width:23px;height:23px;font-size:12px} .kb-rs:not(.on) span{display:none} } /* passos */ .kb-step{display:none} .kb-step.on{display:block;animation:gdUp .42s cubic-bezier(.2,.8,.3,1)} .kb-q{font-family:var(--font-d);font-weight:800;font-size:clamp(18px,2.4vw,24px);letter-spacing:-.01em;margin-bottom:16px} .kb-q em{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-3);margin-left:4px} @media(max-width:520px){.kb-q em{display:block;margin:4px 0 0}} /* ATO 1 · perfil */ .kb-opts{display:flex;flex-direction:column;gap:12px} .kb-opt{display:flex;align-items:center;gap:12px;padding:16px 16px;border:1.5px solid var(--border);border-radius:16px; background:#fff;cursor:pointer;font-size:16px;font-weight:600;color:var(--ink);text-align:left;font-family:var(--font-b); transition:border-color .22s,box-shadow .22s,transform .22s,background .22s} .kb-opt:hover{border-color:var(--accent);box-shadow:0 8px 20px rgba(14,90,230,.12);transform:translateX(3px)} .kb-opt.on{border-color:var(--accent);background:var(--blue-soft)} .kb-ot{display:flex;flex-direction:column} .kb-ot em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:1px} .kb-oi{width:40px;height:40px;flex:none;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;color:var(--accent)} .kb-opt.on .kb-oi{background:#fff} .kb-oi svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} /* ATO 2 · objetivos (múltipla escolha) */ .kb-goals{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(max-width:520px){.kb-goals{grid-template-columns:1fr}} .kb-goal{position:relative;display:flex;align-items:center;gap:12px;padding:16px 16px;border:1.5px solid var(--border); border-radius:16px;background:#fff;cursor:pointer;text-align:left;font-family:var(--font-b); transition:border-color .22s,box-shadow .22s,transform .22s,background .22s} .kb-goal:hover{border-color:var(--accent);box-shadow:0 8px 20px rgba(14,90,230,.12);transform:translateY(-2px)} .kb-goal.on{border-color:var(--accent);background:var(--blue-soft)} .kb-gi{width:38px;height:38px;flex:none;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--accent);transition:background .22s} .kb-goal.on .kb-gi{background:#fff} .kb-gi svg{width:21px;height:21px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .kb-gt{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.2} .kb-gt em{display:block;font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3);margin-top:2px} .kb-adv{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--blue-soft);border-radius:8px;padding:1px 8px;margin-top:8px} .kb-goal.on .kb-adv{background:#fff} .kb-gk{width:22px;height:22px;flex:none;border-radius:8px;border:1.6px solid var(--border);display:grid;place-items:center;transition:background .2s,border-color .2s} .kb-gk svg{width:13px;height:13px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s} .kb-goal.on .kb-gk{background:var(--accent);border-color:var(--accent)} .kb-goal.on .kb-gk svg{opacity:1;transform:scale(1)} .kb-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px} .kb-ghost{background:none;border:none;font-family:var(--font-b);font-size:14px;font-weight:600;color:var(--ink-3);cursor:pointer;padding:8px 4px;transition:color .2s} .kb-ghost:hover{color:var(--accent)} #kb-go[disabled]{opacity:.45;pointer-events:none} /* ATO 3 · kit vivo */ .kb-reshead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px} .kb-rt{font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:-.01em;display:flex;align-items:baseline;gap:8px} .kb-cnt{font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-3)} .kb-levels{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:4px} .kb-levels button{border:none;background:none;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-2); padding:8px 12px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap} .kb-levels button.on{background:#fff;color:var(--accent);box-shadow:var(--shadow-sm)} @media(max-width:400px){.kb-levels button{padding:8px 12px;font-size:12px}} .kb-groups{display:flex;flex-direction:column;gap:20px} .kb-gh{display:flex;align-items:center;gap:8px;margin-bottom:12px} .kb-ghi{width:26px;height:26px;flex:none;border-radius:8px;background:var(--blue-soft);display:grid;place-items:center;color:var(--accent)} .kb-ghi svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .kb-gh b{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)} .kb-glist{display:flex;flex-direction:column;gap:8px} /* item do kit */ .kb-item{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border:1px solid var(--border);border-radius:16px;background:#fff; transition:border-color .2s,box-shadow .2s} .kb-item:hover{border-color:rgba(14,90,230,.32);box-shadow:var(--shadow-sm)} .kb-thumb{width:54px;height:54px;flex:none;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden} .kb-thumb img{max-width:84%;max-height:84%;mix-blend-mode:multiply} .kb-mid{flex:1 1 130px;min-width:0} .kb-mid b{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.25} .kb-why{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px} .kb-swap{margin-top:4px;background:none;border:none;padding:0;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;display:inline-flex;align-items:center;gap:4px} .kb-swap svg{width:12px;height:12px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .kb-swap:hover{text-decoration:underline} .kb-tail{flex:none;display:flex;align-items:center;gap:12px;margin-left:auto} .kb-qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden} .kb-qty button{width:28px;height:28px;border:none;background:#fff;color:var(--ink-2);font-size:16px;cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s} .kb-qty button:hover{background:var(--blue-soft);color:var(--accent)} .kb-qty i{min-width:22px;text-align:center;font-style:normal;font-size:14px;font-weight:700;color:var(--ink)} .kb-price{font-family:var(--font-d);font-size:16px;font-weight:700;color:var(--blue-deep);letter-spacing:-.01em;min-width:74px;text-align:right} .kb-rm{width:26px;height:26px;flex:none;border:none;background:none;color:var(--ink-3);cursor:pointer;border-radius:8px;font-size:18px;line-height:1;display:grid;place-items:center;transition:background .15s,color .15s} .kb-rm:hover{background:#FDECEC;color:#E5484D} .kb-swaps{flex:1 1 100%;display:none;flex-wrap:wrap;gap:8px;margin-top:2px;padding-top:12px;border-top:1px dashed var(--border)} .kb-swaps.on{display:flex;animation:gdUp .3s cubic-bezier(.2,.8,.3,1)} .kb-swapopt{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:#fff;cursor:pointer;font-family:var(--font-b);text-align:left;transition:border-color .18s,background .18s} .kb-swapopt:hover{border-color:var(--accent)} .kb-swapopt.cur{border-color:var(--accent);background:var(--blue-soft)} .kb-swapopt img{width:26px;height:26px;object-fit:contain;mix-blend-mode:multiply;flex:none} .kb-swapopt b{font-size:12px;font-weight:700;color:var(--ink);line-height:1.15;display:block} .kb-swapopt em{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:600} @media(max-width:520px){ .kb-tail{width:calc(100% - 67px);margin-left:67px;justify-content:space-between;gap:8px} .kb-price{min-width:0} } /* sugestão de completar o kit */ .kb-suggest{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;border:1px dashed var(--accent);border-radius:16px;background:var(--blue-soft)} .kb-suggest[hidden]{display:none} .kb-sph{width:40px;height:40px;flex:none;border-radius:8px;background:#fff;display:grid;place-items:center;overflow:hidden} .kb-sph img{max-width:82%;max-height:82%;mix-blend-mode:multiply} .kb-stx{flex:1 1 150px;min-width:0} .kb-stx b{display:block;font-size:14px;font-weight:700;color:var(--ink)} .kb-stx span{font-size:12px;color:var(--ink-2)} .kb-sadd{flex:none;border:1.5px solid var(--accent);background:#fff;color:var(--accent);font-family:var(--font-b);font-weight:700;font-size:12px;border-radius:8px;padding:8px 12px;cursor:pointer;transition:background .18s,color .18s} .kb-sadd:hover{background:var(--accent);color:#fff} /* rodapé */ .kb-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border);flex-wrap:wrap} .kb-tot{line-height:1.2} .kb-tot b{font-family:var(--font-d);font-size:24px;color:var(--blue-deep);letter-spacing:-.02em;display:block} .kb-tot>span{font-size:12px;color:var(--ink-2)} .kb-tot em{font-style:normal;color:var(--ok);font-weight:700} .kb-acts{display:flex;align-items:center;gap:16px} @media(max-width:420px){ .kb-acts{width:100%;justify-content:space-between} .kb-acts .btn{flex:1;justify-content:center} } .kb-empty{text-align:center;color:var(--ink-3);font-size:14px;padding:24px 12px} @media(prefers-reduced-motion:reduce){ .kb-step.on,.kb-swaps.on{animation:none} .kb-opt,.kb-goal,.kb-item{transition:none} } /* ---------- 5 · rota "direto da fábrica" (home, após spotlight Jaça) ---------- */ .gd-rota{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:32px 32px;box-shadow:var(--shadow-sm);overflow:hidden} .gd-rota .rota-head{text-align:center;margin-bottom:8px} .gd-rota .rota-head .eyebrow{justify-content:center} .gd-rota .rota-head h3{font-family:var(--font-d);font-size:clamp(20px,2.6vw,24px);font-weight:800;letter-spacing:-.01em} .gd-rt-svg{width:100%;height:auto;display:block;overflow:visible;max-width:720px;margin:8px auto 0} .gd-rt-path{stroke:var(--border);stroke-width:2.5;fill:none} .gd-rt-fill{stroke:url(#gdRtGrad);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:560;stroke-dashoffset:560} .gd-go .gd-rt-fill{animation:gdRtDraw 2.4s cubic-bezier(.4,.2,.2,1) forwards} @keyframes gdRtDraw{to{stroke-dashoffset:0}} .gd-rt-node{opacity:0;transform:translateY(6px)} .gd-go .gd-rt-node{animation:gdRtPop .5s cubic-bezier(.2,.8,.3,1) forwards} .gd-go .gd-rt-node.n1{animation-delay:.05s}.gd-go .gd-rt-node.n2{animation-delay:.7s} .gd-go .gd-rt-node.n3{animation-delay:1.35s}.gd-go .gd-rt-node.n4{animation-delay:2.05s} @keyframes gdRtPop{to{opacity:1;transform:none}} .gd-rt-lbl{font-family:var(--font-d);font-weight:700;font-size:12px;fill:var(--ink)} .gd-rt-sub{font-size:10px;fill:var(--ink-3);font-family:var(--font-b)} /* ---------- marquee de marcas (home, substitui a brands-strip) ---------- */ .gd-mq-sec{padding:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft);overflow:hidden} /* carrossel + depoimentos = um bloco de confiança só: mata a borda dupla no encontro (sem costura de dois bandões) */ .gd-mq-sec + .sec-alt{border-top:none} .gd-mq-sec .mq-label{text-align:center;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px} .gd-mq{position:relative;overflow:visible;padding-top:12px} .gd-mq::before,.gd-mq::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none} .gd-mq::before{left:0;background:linear-gradient(90deg,var(--bg-soft),transparent)} .gd-mq::after{right:0;background:linear-gradient(270deg,var(--bg-soft),transparent)} .gd-mq-track{display:flex;gap:16px;width:max-content;animation:gdMq 48s linear infinite} .gd-mq:hover .gd-mq-track{animation-play-state:paused} @keyframes gdMq{from{transform:translateX(0)}to{transform:translateX(-50%)}} .gd-bcard{position:relative;width:178px;flex:none;min-height:86px; display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center; border:1px solid var(--border);border-radius:16px;background:#fff; padding:16px;transition:border-color .25s,box-shadow .25s,transform .25s} .gd-bcard:hover{border-color:rgba(14,90,230,.35);box-shadow:0 10px 24px rgba(14,90,230,.13);transform:translateY(-3px)} .gd-bcard .bw{font-family:var(--font-d);font-weight:800;font-size:18px;letter-spacing:.02em;color:var(--blue-deep)} .gd-bcard .bt{position:absolute;left:0;right:0;bottom:10px;width:max-content;margin:0 auto; font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase; color:var(--accent);background:var(--blue-soft);border-radius:999px;padding:4px 8px; opacity:0;transform:translateY(5px);transition:opacity .28s,transform .28s} .gd-bcard:hover .bt{opacity:1;transform:none} /* marcas-herói: SCAPEX (exclusivo) e Jaça (preferida do dono) ganham cartão azul cheio pra saltar das demais */ .gd-bcard.bx{border-color:transparent;background:linear-gradient(158deg,var(--accent-hi),var(--blue-deep));box-shadow:0 10px 24px rgba(10,46,134,.28)} .gd-bcard.bx .bw{color:#fff} .gd-bcard.bx .bt{color:var(--blue-deep);background:#fff} .gd-bcard.bx:hover{border-color:transparent;box-shadow:0 14px 30px rgba(10,46,134,.4)} .gd-bcard.bx .selo{position:absolute;top:-9px;right:12px;z-index:3;font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--accent); background:#fff;padding:4px 8px;border-radius:999px;box-shadow:0 4px 10px rgba(8,32,95,.45)} /* varredura de brilho (mesma do "Polir & detalhar"): faixa de gloss diagonal cruza o cartão sozinha, com descanso. fica num wrapper próprio com overflow:hidden pra clipar o gloss sem cortar o selo que sai pra fora do card */ .gd-bcard.bx .glow{position:absolute;inset:0;border-radius:12px;overflow:hidden;z-index:1;pointer-events:none} .gd-bcard.bx .glow::after{content:"";position:absolute;top:-30%;left:-62%;width:42%;height:170%; transform:skewX(-18deg);opacity:0; background:linear-gradient(105deg,transparent,rgba(255,255,255,.22) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.22) 70%,transparent); animation:bcardGloss 5.4s ease-in-out infinite} .gd-bcard.bx .bw{position:relative;z-index:2} .gd-bcard.bx .bt{z-index:2} @keyframes bcardGloss{0%,52%{left:-62%;opacity:0}60%{opacity:.9}78%{left:150%;opacity:.9}86%,100%{left:150%;opacity:0}} .gd-mq:hover .gd-bcard.bx .glow::after{animation-duration:2.7s} @media(prefers-reduced-motion:reduce){.gd-mq-track{animation:none;transform:none}.gd-bcard.bx .glow::after{animation:none}} /* ---------- selo de exclusividade SCAPEX (home compacto + sobre) ---------- */ .gd-selo-band{display:flex;justify-content:center;padding:8px 0} .gd-selo{position:relative;border-radius:24px;padding:24px 40px;text-align:center;color:#fff;max-width:400px; background:linear-gradient(155deg,#12328F,#08205F);box-shadow:0 20px 48px rgba(8,32,95,.4); transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.3,1);overflow:hidden;will-change:transform} .gd-selo::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1.6px;pointer-events:none; background:conic-gradient(from var(--hg,0deg),rgba(143,193,255,0),rgba(143,193,255,.9),rgba(255,255,255,.95),rgba(46,116,255,.7),rgba(143,193,255,0) 62%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude} .gd-go .gd-selo::before{animation:gdSeloEdge 4.5s linear infinite} @keyframes gdSeloEdge{to{--hg:360deg}} @property --hg{syntax:'';initial-value:0deg;inherits:false} .gd-selo::after{content:"";position:absolute;top:-40%;left:-60%;width:40%;height:180%;transform:skewX(-18deg);opacity:0;pointer-events:none; background:linear-gradient(105deg,transparent,rgba(255,255,255,.32),transparent)} .gd-go .gd-selo::after{animation:gdSeloSweep 3.8s ease-in-out infinite} @keyframes gdSeloSweep{0%,14%{left:-60%;opacity:0}26%{opacity:1}54%,100%{left:160%;opacity:0}} .gd-selo .h-k{font-size:10px;font-weight:800;letter-spacing:.22em;opacity:.78} .gd-selo .h-b{font-family:var(--font-d);font-weight:800;font-size:clamp(24px,4vw,30px);letter-spacing:.04em;margin:4px 0 4px} .gd-selo .h-s{font-size:12px;font-weight:600;letter-spacing:.06em;color:#9FC3FF} .gd-selo .h-chip{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.1em; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:8px 16px;border-radius:999px} .gd-selo .h-chip svg{width:13px;height:13px;stroke:#8FF0BE;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round} @media(prefers-reduced-motion:reduce){.gd-selo::before,.gd-selo::after{animation:none!important}.gd-selo{transition:none}} /* ---------- timeline-estrada (sobre) ---------- */ .gd-tl{position:relative;max-width:760px;margin:0 auto;padding:8px 0} .gd-tl-road{position:absolute;left:50%;top:8px;bottom:8px;width:10px;transform:translateX(-50%); border-radius:999px;background:var(--surface-2);overflow:hidden} .gd-tl-fill{position:absolute;left:0;right:0;top:0;height:0;border-radius:999px; background:linear-gradient(180deg,var(--accent-hi),var(--blue-deep))} .gd-tl-fill::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.6px;transform:translateX(-50%); background:repeating-linear-gradient(180deg,rgba(255,255,255,.85) 0 8px,transparent 8px 18px)} .gd-go .gd-tl-fill{animation:gdTlFill 2.6s cubic-bezier(.4,.2,.25,1) forwards} @keyframes gdTlFill{to{height:100%}} .gd-tl-row{position:relative;display:grid;grid-template-columns:1fr 40px 1fr;align-items:center;min-height:96px} .gd-tl-dot{grid-column:2;justify-self:center;width:16px;height:16px;border-radius:50%;z-index:2; background:#fff;border:3.5px solid var(--accent);box-shadow:0 0 0 4px rgba(14,90,230,.14);transform:scale(0)} .gd-go .gd-tl-dot{animation:gdTlDot .45s cubic-bezier(.2,.8,.3,1) forwards} @keyframes gdTlDot{to{transform:scale(1)}} .gd-tl-card{opacity:0} .gd-tl-row.l .gd-tl-card{grid-column:1;text-align:right;transform:translateX(-10px)} .gd-tl-row.r .gd-tl-card{grid-column:3;transform:translateX(10px)} .gd-go .gd-tl-card{animation:gdTlIn .55s cubic-bezier(.2,.8,.3,1) forwards} @keyframes gdTlIn{to{opacity:1;transform:translateX(0)}} .gd-tl-card b{font-family:var(--font-d);font-size:16px;font-weight:800;color:var(--blue-deep);display:block} .gd-tl-card b em{font-style:normal;color:var(--accent)} .gd-tl-card span{font-size:14px;color:var(--ink-2);line-height:1.45;display:block;margin-top:4px} @media(max-width:560px){ .gd-tl-road{left:19px} .gd-tl-row{grid-template-columns:40px 1fr;min-height:auto;margin-bottom:24px} .gd-tl-dot{grid-column:1} .gd-tl-row.l .gd-tl-card,.gd-tl-row.r .gd-tl-card{grid-column:2;text-align:left;transform:translateX(10px)} } @media(prefers-reduced-motion:reduce){.gd-tl-fill{height:100%!important}.gd-tl-dot{transform:scale(1)}.gd-tl-card{opacity:1;transform:none}} /* ---------- status vivo das lojas (sobre/contato · upgrade da u-pill) ---------- */ .u-pill.live .dot{animation:gdStorePulse 2s ease-out infinite} .u-pill.live.off{background:rgba(20,30,54,.6)} .u-pill.live.off .dot{background:var(--ink-3);animation:none} @keyframes gdStorePulse{0%{box-shadow:0 0 0 0 rgba(124,240,180,.55)}70%,100%{box-shadow:0 0 0 6px rgba(124,240,180,0)}} @media(prefers-reduced-motion:reduce){.u-pill.live .dot{animation:none}} /* ---------- scanner de inspeção (PDP · varre a foto 1×) ---------- */ .gd-scan-line{position:absolute;left:10px;right:10px;top:-8%;height:2.5px;border-radius:999px;opacity:0;z-index:3;pointer-events:none; background:linear-gradient(90deg,transparent,var(--accent-hi) 22%,#8FC1FF 50%,var(--accent-hi) 78%,transparent); box-shadow:0 0 14px 3px rgba(46,116,255,.5)} .gd-scan-glow{position:absolute;left:0;right:0;top:-30%;height:26%;opacity:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(46,116,255,.1))} .gd-scan .gd-scan-line{animation:gdScanSweep 1.25s cubic-bezier(.45,.1,.35,1) .2s} .gd-scan .gd-scan-glow{animation:gdScanSweep 1.25s cubic-bezier(.45,.1,.35,1) .2s} @keyframes gdScanSweep{0%{top:-8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:106%;opacity:0}} .gd-scan-stamp{position:absolute;left:50%;bottom:16px;transform:translate(-50%,10px);opacity:0;z-index:4; display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #C9EEDD;border-radius:999px; padding:8px 16px;font-size:12px;font-weight:700;color:#0B8A50;box-shadow:0 8px 20px rgba(16,40,80,.14);white-space:nowrap} .gd-scan .gd-scan-stamp{animation:gdScanStamp .5s cubic-bezier(.2,.8,.3,1) 1.45s forwards} @keyframes gdScanStamp{to{opacity:1;transform:translate(-50%,0)}} .gd-scan-stamp svg{width:14px;height:14px;stroke:#0B8A50;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round} @media(max-width:560px){.gd-scan-stamp{font-size:11px;padding:8px 12px}} @media(prefers-reduced-motion:reduce){.gd-scan-line,.gd-scan-glow{display:none}.gd-scan-stamp{opacity:1;transform:translate(-50%,0);animation:none}} /* ---------- "pediu, postou": envio honesto (PDP) ---------- */ .gd-cut{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px; padding:16px 16px;margin-top:16px} .gd-cut .co-i{width:42px;height:42px;flex:none;border-radius:12px;background:var(--blue-soft);display:grid;place-items:center;color:var(--accent)} .gd-cut .co-i svg{width:25px;height:25px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round} .gd-cut b{font-size:14px;font-weight:700;display:block;line-height:1.3;color:var(--ink)} .gd-cut span{font-size:12px;color:var(--ink-2);display:block;margin-top:2px} .gd-cut span em{font-style:normal;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums} /* ---------- 9 · antes/depois (slider de resultado · demo estilizado) ---------- Painéis sintéticos em CSS (lataria apagada × pintura com brilho) enquanto não chegam as FOTOS REAIS do Renan. Troca demo→foto = Fase 13.5 (Ativação). */ .gd-ba-wrap{max-width:720px;margin:0 auto} .gd-ba{position:relative;width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden; cursor:ew-resize;touch-action:none;user-select:none;box-shadow:0 20px 50px rgba(8,25,60,.28)} .gd-ba-l{position:absolute;inset:0} .gd-ba-after{background:url("../img/audi-antes.webp") center center/cover no-repeat} .gd-ba-after::after{content:"";position:absolute;top:-30%;left:-40%;width:34%;height:160%;transform:skewX(-18deg); background:linear-gradient(105deg,transparent,rgba(255,255,255,.18),transparent);animation:gdBaSheen 4.6s ease-in-out infinite;pointer-events:none} @keyframes gdBaSheen{0%,20%{left:-40%}60%,100%{left:150%}} .gd-ba-before{clip-path:inset(0 calc(100% - var(--cut,50%)) 0 0); background:url("../img/audi-depois.webp") center center/cover no-repeat} .gd-ba-tag{position:absolute;top:14px;font-size:11px;font-weight:800;letter-spacing:.09em;padding:4px 12px;border-radius:999px;z-index:3;color:#fff} .gd-ba-tag.a{left:14px;background:rgba(20,26,40,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .gd-ba-tag.b{right:14px;background:rgba(14,90,230,.85)} .gd-ba-bar{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2.5px;background:#fff;z-index:4;box-shadow:0 0 12px rgba(0,0,0,.35)} .gd-ba-knob{position:absolute;top:50%;left:var(--cut,50%);transform:translate(-50%,-50%);z-index:5; width:46px;height:46px;border-radius:50%;background:#fff;display:grid;place-items:center; box-shadow:0 6px 18px rgba(4,14,50,.4);color:var(--blue-deep);font-weight:800;font-size:16px;pointer-events:none} .gd-ba-note{text-align:center;font-size:12px;color:var(--ink-3);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px} .gd-ba-note svg{width:15px;height:15px;stroke:var(--accent);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round} @media(prefers-reduced-motion:reduce){.gd-ba-after::after{animation:none}} /* ---------- 12 · WhatsApp contextual (FAB site-wide, injetado) ---------- */ .gd-wafab{position:fixed;right:20px;bottom:20px;z-index:130;display:flex;align-items:center; background:#fff;border:1px solid #C9EEDD;border-radius:999px;box-shadow:0 12px 30px rgba(11,138,80,.28); overflow:hidden;cursor:pointer;text-decoration:none; transform:translateY(120%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.25,1),opacity .3s} .gd-wafab.in{transform:translateY(0);opacity:1} .gd-wafab.hide{transform:translateY(120%);opacity:0;pointer-events:none} .gd-wafab .wa-ic{width:54px;height:54px;flex:none;display:grid;place-items:center;background:#25D366;color:#fff;border-radius:999px;margin:4px} .gd-wafab .wa-ic svg{width:27px;height:27px;stroke:currentColor;stroke-width:2.1;fill:none;stroke-linecap:round;stroke-linejoin:round} .gd-go-wa .gd-wafab .wa-ic{animation:gdWaPop 5s ease-in-out infinite} @keyframes gdWaPop{0%,86%,100%{transform:scale(1)}92%{transform:scale(1.07)}} .gd-wafab .wa-tx{max-width:0;opacity:0;white-space:nowrap;overflow:hidden; transition:max-width .5s cubic-bezier(.2,.8,.3,1),opacity .35s,padding .5s; font-size:14px;font-weight:600;color:var(--ink);padding:0} .gd-wafab.open .wa-tx{max-width:240px;opacity:1;padding:0 20px 0 8px} .gd-wafab .wa-tx em{font-style:normal;display:block;font-size:11px;font-weight:500;color:var(--ink-3)} @media(max-width:860px){ .gd-wafab{right:14px;bottom:14px} /* Trilho M (20/07): na PDP mobile o zap SAI de cena — a página já tem o link "pergunta rápida no WhatsApp" no buy-box, e três flutuantes + barra de compra era chrome demais brigando com o preço. Menos moldura, mais palco. */ body[data-page="produto"] .gd-wafab{display:none} } /* Celular: o FAB fica só no círculo verde (padrão universal do WhatsApp). A frase larga que auto-abre cobria o preço/hero em tela estreita — no toque abre o WhatsApp direto. Trilho M rodada 2: subiu de 600→760 (o teto do chip escuro): entre 601-760 o balão abria com TEXTO ESCURO sobre o chip escuro — ilegível. */ @media(max-width:760px){ .gd-wafab.open .wa-tx{max-width:0;opacity:0;padding:0} } @media(prefers-reduced-motion:reduce){.gd-wafab .wa-ic{animation:none}} /* ---------- 13 · drawer do carrinho (injetado, site-wide) ---------- */ .gd-scrim{position:fixed;inset:0;background:rgba(8,25,60,.4);opacity:0;pointer-events:none;transition:opacity .35s;z-index:240} .gd-scrim.on{opacity:1;pointer-events:auto} .gd-drawer{position:fixed;top:0;bottom:0;right:0;width:min(360px,90%);background:#fff;z-index:250; box-shadow:-16px 0 44px rgba(8,25,60,.24);transform:translateX(105%); transition:transform .45s cubic-bezier(.2,.8,.25,1);display:flex;flex-direction:column} .gd-drawer.on{transform:none} .gd-drawer .dw-h{display:flex;align-items:center;justify-content:space-between;padding:20px 20px;border-bottom:1px solid var(--border)} .gd-drawer .dw-h b{font-family:var(--font-d);font-size:16px;display:flex;align-items:center;gap:8px;color:var(--ink)} .gd-drawer .dw-h b svg{width:18px;height:18px;stroke:var(--ok);stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round} .gd-dw-x{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer;font-size:14px;color:var(--ink-2)} .gd-dw-x:hover{background:var(--surface-2);color:var(--accent)} .gd-dw-body{padding:20px 20px;overflow:auto;flex:1} .gd-dw-item{display:flex;gap:12px;align-items:center;border:1px solid var(--border);border-radius:16px;padding:12px} .gd-dw-item .i-ph{width:54px;height:58px;flex:none;display:grid;place-items:center} .gd-dw-item .i-ph img{max-height:54px;max-width:48px;mix-blend-mode:multiply} .gd-dw-item b{font-size:14px;font-weight:600;line-height:1.3;display:block;color:var(--ink)} .gd-dw-item span{font-size:12px;color:var(--ink-2)} .gd-dw-item span em{font-style:normal;color:var(--ok);font-weight:700} .gd-dw-more{font-size:12px;color:var(--ink-3);text-align:center;margin-top:12px} .gd-dw-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0} .gd-dw-opt{border:1.5px solid var(--border);border-radius:12px;padding:12px 8px;text-align:center;font-size:11px;font-weight:600; color:var(--ink-2);cursor:pointer;transition:.2s;background:#fff;font-family:var(--font-b)} .gd-dw-opt.on{border-color:var(--accent);color:var(--accent);background:var(--blue-soft)} .gd-dw-opt b{display:block;font-size:12px;color:inherit;margin-bottom:1px} .gd-dw-foot{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border)} .gd-dw-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-2);margin-bottom:12px} .gd-dw-sum b{font-family:var(--font-d);font-size:20px;color:var(--blue-deep)} .gd-dw-keep{margin-top:8px;width:100%;background:none;border:none;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;text-decoration:underline} /* ============================================================ TEMA ESCURO — pivô "pegada jovem / preto + azul" (Renan, 08/07/2026) Aprovado no hero, agora no site inteiro. BLOCO ÚNICO no fim do CSS: re-declara os tokens do :root e corrige os brancos cravados na mão. Vence por ordem de fonte (é o último). Reverter = apagar este bloco. Decisões travadas: · header fica CLARO de propósito (o logo colorido horizontal só lê bem em fundo claro; texto do menu é fixado escuro aqui embaixo); · tiles de foto de produto ficam CLAROS (mix-blend-mode:multiply exige fundo claro, senão a foto sobre fundo branco some no escuro). ============================================================ */ :root{ --bg:#070B14; --bg-grad:#0A1322; --bg-soft:#0C1526; --surface:#111A2E; --surface-2:#18233B; --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.055); --accent:#3F84FF; --accent-hi:#6EA8FF; --blue-soft:rgba(46,116,255,.14); --ok:#1FC776; --ok-dim:rgba(31,199,118,.15); --ink:#EEF2FA; --ink-2:#AEB8D4; --ink-3:#7E8AA6; --shadow:0 10px 34px rgba(0,0,0,.45); --shadow-sm:0 3px 14px rgba(0,0,0,.34); --glow:0 14px 36px rgba(46,116,255,.30); } /* HEADER — ilha vira VIDRO ESCURO + logomarca branca (filtro no logo horizontal) */ .nav-island{background:rgba(10,16,28,.72);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05)} .nav-island.scrolled{background:rgba(10,16,28,.9);box-shadow:0 16px 44px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)} .logo-img:not(.foot){filter:brightness(0) invert(1)} .nav-links a{color:var(--ink-2)} .nav-links a:hover{color:#fff;background:rgba(255,255,255,.07)} .nav-links a.active{color:#7FB0FF;background:rgba(63,132,255,.16)} .icon-btn{color:var(--ink-2)} .icon-btn:hover{color:#fff;background:rgba(255,255,255,.07)} .burger span{background:#EEF2FA} /* BOTÃO FANTASMA no escuro */ .btn-ghost{background:transparent;border-color:rgba(255,255,255,.22);color:var(--ink)} .btn-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.06);color:#fff} /* CARD DE PRODUTO — tile da foto FICA CLARO (multiply precisa de fundo claro) */ .card-prod .thumb{background:radial-gradient(220px 160px at 50% 32%, #E9F0FC, transparent 66%), #EDF2FB} .card-prod .thumb .badge-dark{background:#0B1220;color:#fff} .card-prod:hover{border-color:rgba(46,116,255,.45)} /* BUSCA · MENUS · CHIPS · CARDS que eram brancos cravados */ .mobile-menu{background:var(--surface);border-color:var(--border-soft)} .search-panel{background:var(--surface)} .gd-schip{background:var(--surface-2);border-color:var(--border);color:var(--ink-2)} .goal{background:var(--surface-2);border-color:var(--border)} .chip-f{background:var(--surface-2);border-color:var(--border);color:var(--ink-2)} .trust-strip{border-color:rgba(46,116,255,.28)} /* MONTE SEU KIT — botões/tiles brancos → escuros (thumbs de foto ficam claros) */ .kb-opt,.kb-goal,.kb-item{background:var(--surface-2)} .kb-qty button{background:var(--surface-2);color:var(--ink-2)} .kb-thumb{background:#EDF2FB} .kb-swapopt{background:var(--surface-2)} .kb-swapopt img{mix-blend-mode:normal;background:#fff;padding:2px;border-radius:4px} .kb-rm:hover{background:rgba(229,72,77,.16);color:#FF8A8E} /* anti-flash do robô-no-corre — mata o flash branco no carregamento (o splash da porta de aço já nasce escuro no bloco base, não precisa de override) */ html.gd-cartload-hold::before{background:linear-gradient(180deg,#070B14 30%,#0A1322 130%)} #gd-cartload{background:linear-gradient(180deg,#070B14 30%,#0C1730 130%)} /* CONTATO — faixa decorativa, pin do mapa, campo com erro, hero das legais */ .map-card::after{background:rgba(46,116,255,.16)} .map-pin .pin-label{background:var(--surface);color:var(--ink);border-color:var(--border)} .cf-field input.err,.cf-field textarea.err{background:rgba(229,72,77,.12)} .legal-hero{background:radial-gradient(900px 380px at 84% -30%, rgba(46,116,255,.14), transparent 60%),linear-gradient(180deg,#0A1322,#070B14)} /* HEROS de página (loja/contato/sobre) — tinham linear-gradient(#fff,...) */ .shop-hero,.page-hero{background:radial-gradient(1000px 420px at 86% -18%, rgba(46,116,255,.16), transparent 60%),linear-gradient(180deg,#0B1526,#070B14)} /* CHECKOUT · barra do topo vira ESCURA (logo branco via filtro acima) */ .co-top{background:rgba(10,16,28,.86);border-bottom-color:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .co-back{color:var(--ink-2)} .co-back:hover{color:#7FB0FF} .co-secure{color:#1FC776} /* FAB WhatsApp — pílula branca fica (alto contraste no escuro), texto fixado escuro */ .gd-wafab .wa-tx{color:#0E1A2E} .gd-wafab .wa-tx em{color:#5A6480} /* DRAWER DO CARRINHO — painel branco → escuro (texto já vira claro via tokens) */ .gd-drawer{background:var(--surface)} .gd-dw-x{background:var(--surface-2)} .gd-dw-opt{background:var(--surface-2)} .gd-dw-item .i-ph{background:#EDF2FB;border-radius:8px} /* BLOG · cada artigo tem