/* LOJA ONLINE — site de cada loja (04/11/2026): /loja/<slug>, /aparelho/<id>, /lojas.
   Complementa /assets/site.css (variáveis, .wrap, .btn, .eyebrow, .lead). O site é DA LOJA: logo e dados em tudo;
   a marca XForce · XDroid só no fim. Banner escuro com os aparelhos girando; cartões com bateria, parcelas no boleto e WhatsApp. */
.lo main{display:block}
/* TEMAS (04/11/2026): o mesmo desenho em cores diferentes. A classe vem do <body> (lo-tema-<nome>); só mudam os tokens.
   --lime/--lime-deep = cor de destaque (botões, "no boleto"); --lo-on-accent = texto em cima do destaque; --lo-accent-text = destaque em texto. */
body.lo-tema-azul{--lime:#2f7df6; --lime-deep:#1d5fd0; --lo-on-accent:#fff; --lo-accent-text:#1d5fd0}
body.lo-tema-roxo{--lime:#8b5cf6; --lime-deep:#6d28d9; --lo-on-accent:#fff; --lo-accent-text:#6d28d9}
body.lo-tema-laranja{--lime:#f97316; --lime-deep:#c2410c; --lo-on-accent:#fff; --lo-accent-text:#c2410c}
body.lo-tema-escuro{--ground:#0b0c0e; --surface:#15171b; --surface-2:#191b20; --inset:#23262c; --text:#f3f4f5; --dim:#a8acb4; --mute:#8a8e96;
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.2); --ink:#f3f4f5; --lime:#c4f24d; --lime-deep:#b5e63a; --lo-on-accent:#111; --lo-accent-text:#c4f24d;
  --lo-top-bg:rgba(11,12,14,.86); --shadow-s:0 1px 2px rgba(0,0,0,.4); --shadow-m:0 2px 8px rgba(0,0,0,.5), 0 18px 48px rgba(0,0,0,.45)}
body.lo-tema-escuro .lo-cta-dark{background:#fff; color:#111} body.lo-tema-escuro .lo-cta-dark:hover{background:#e9ebef}
body.lo-tema-escuro .lo-banner,body.lo-tema-escuro .lo-vender-in{border:1px solid var(--line)} body.lo-tema-escuro .lo-banner{border-width:1px 0}
body.lo-tema-escuro .lo-tags span{color:var(--dim)} body.lo-tema-escuro .lo-rede-tiktok,body.lo-tema-escuro .lo-foot .foot-social .lo-rede-tiktok{color:#fff}
body.lo-tema-escuro .lo-foot .foot-social a{background:var(--surface)}
.lo .btn svg{width:18px; height:18px; flex:none}
.lo .btn-lg{padding:14px 24px; font-size:15.5px}

/* topo da loja */
.lo-top{position:sticky; top:0; z-index:50; background:var(--lo-top-bg, rgba(245,245,247,.88)); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line)}
.lo-nav{display:flex; align-items:center; gap:18px; min-height:70px; padding-top:8px; padding-bottom:8px}
.lo-brand{display:flex; align-items:center; gap:12px; min-width:0}
.lo-brand-txt{display:flex; flex-direction:column; min-width:0; line-height:1.15}
.lo-brand-txt b{font-size:17px; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-brand-txt small{font-size:12.5px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-logo{width:46px; height:46px; border-radius:12px; object-fit:cover; background:var(--surface); border:1px solid var(--line); flex:none}
.lo-logo-txt{display:grid; place-items:center; font-weight:800; color:var(--lo-on-accent, var(--ink)); background:var(--lime); border-color:transparent}
.lo-menu{display:flex; gap:18px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--dim)}
.lo-menu a:hover{color:var(--text)}
/* Redes sociais e WhatsApp: só o logotipo OFICIAL de cada um, na cor da marca, sem fundo (pedido do Muller, 04/11/2026). */
.lo-top-redes{display:flex; align-items:center; gap:14px; flex:none}
.lo-rede,.lo-wa-ico{display:inline-flex; align-items:center; justify-content:center; flex:none; transition:.16s ease; line-height:0}
.lo-rede svg{width:24px; height:24px} .lo-wa-ico svg{width:27px; height:27px}
.lo-rede:hover,.lo-wa-ico:hover{transform:translateY(-1px); opacity:.85}
.lo-wa-ico{color:#25d366} .lo-rede-instagram{color:#e1306c} .lo-rede-facebook{color:#1877f2} .lo-rede-tiktok{color:#111} .lo-rede-youtube{color:#ff0000}
.lo-foot .foot-social .lo-wa{color:#25d366} .lo-foot .foot-social .lo-rede-instagram{color:#e1306c} .lo-foot .foot-social .lo-rede-facebook{color:#1877f2} .lo-foot .foot-social .lo-rede-tiktok{color:#111} .lo-foot .foot-social .lo-rede-youtube{color:#ff0000}

/* banner — mesmo desenho do carrossel do xforceprotect.com (.hb): faixa escura, texto à esquerda, aparelho sangrando à direita */
.lo-banner{position:relative; background:#0b0c0e; overflow:hidden; isolation:isolate; color:#f3f4f5}
.lo-banner::before{content:''; position:absolute; z-index:0; width:900px; height:900px; border-radius:50%; right:-260px; top:-420px;
  background:radial-gradient(circle, color-mix(in srgb, var(--lime) 16%, transparent) 0%, color-mix(in srgb, var(--lime) 5%, transparent) 42%, transparent 68%)}
.lo-banner-viewport{position:relative; z-index:1; height:470px}
.lo-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s}
.lo-slide[data-on]{opacity:1; visibility:visible}
.lo-slide-in{max-width:var(--max); margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:28px}
.lo-slide-txt{flex:1; min-width:0}
.lo-slide-eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); margin-bottom:12px}
.lo-slide h1,.lo-slide h2{font-size:clamp(26px,3.5vw,44px); font-weight:800; letter-spacing:-.032em; line-height:1.06; color:#fff}
.lo-slide h1 b,.lo-slide h2 b{color:var(--lime); font-weight:800}
.lo-slide p{margin-top:14px; font-size:clamp(14.5px,1.5vw,18px); color:#9aa0a6; max-width:46ch}
.lo-slide .lo-preco{margin-top:14px; padding-top:0}
.lo-slide .lo-preco small{color:#9aa0a6} .lo-slide .lo-preco > b{color:#fff; font-size:clamp(26px,3vw,36px)}
.lo-slide .lo-parc{color:#e9ebef; font-size:16px} .lo-slide .lo-parc b{font-size:18px} .lo-slide .lo-parc em{color:var(--lime)}
.lo-slide .lo-avista{color:#9aa0a6}
.lo-slide .lo-negociar b{color:var(--lime)} .lo-slide .lo-negociar span{color:#9aa0a6}
.lo-slide .lo-bat{margin-top:12px; color:#9aa0a6} .lo-slide .lo-bat span{color:#fff} .lo-slide .lo-bat i{background:rgba(255,255,255,.14)}
.lo-slide .lo-cond{margin-top:10px} .lo-slide .lo-cond li{color:#c9cdd3} .lo-slide .lo-cond svg{color:var(--lime)}
.lo-slide-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.lo-cta{display:inline-flex; align-items:center; gap:9px; background:var(--lime); color:var(--lo-on-accent, var(--ink)); font-weight:700; font-size:15px; padding:12px 22px; border-radius:999px; transition:.16s ease}
.lo-cta svg{width:18px; height:18px}
.lo-cta:hover{background:#d4ff5e; transform:translateY(-1px)}
.lo-cta-lg{padding:15px 26px; font-size:16px}
.lo-cta-dark{background:var(--ink); color:#fff}
.lo-cta-dark:hover{background:#000}
.lo-cta-ghost{background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.22)}
.lo-cta-ghost:hover{background:rgba(255,255,255,.14); transform:translateY(-1px)}
main > section:not(.lo-banner) .lo-cta-ghost,.lo-item .lo-cta-ghost{background:var(--surface); color:var(--text); border-color:var(--line-2)}
main > section:not(.lo-banner) .lo-cta-ghost:hover,.lo-item .lo-cta-ghost:hover{border-color:var(--mute); background:var(--surface)}
.lo-slide .lo-ctas .btn-dark{background:#fff; color:#111}
.lo-slide .lo-ctas .btn-ghost{background:transparent; border-color:rgba(255,255,255,.35); color:#fff}
.lo-slide-img{flex:none; width:340px; height:520px; margin-top:70px; position:relative; display:block}
.lo-slide-img::before{content:''; position:absolute; z-index:-1; left:11%; top:20%; width:78%; height:60%; border-radius:50%; background:radial-gradient(ellipse, rgba(196,242,77,.22), transparent 70%); filter:blur(34px)}
.lo-slide-img img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 26px 44px rgba(0,0,0,.7))}
.lo-slide-bat{position:absolute; left:50%; top:-14px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:7px; background:rgba(15,16,19,.78); color:#fff; border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:7px 13px; font-size:13.5px; font-weight:600; backdrop-filter:blur(10px); white-space:nowrap}
.lo-slide-bat svg{width:18px; height:18px; color:var(--lime)}
.lo-slide-logo{display:flex; align-items:center; justify-content:center; margin-top:0; height:auto}
.lo-slide-logo .lo-logo{width:220px; height:220px; border-radius:48px; font-size:96px; box-shadow:0 26px 44px rgba(0,0,0,.6)}
.lo-dots{position:absolute; z-index:2; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:9px}
.lo-dot{width:26px; height:4px; border-radius:99px; border:0; padding:0; cursor:pointer; background:rgba(255,255,255,.24); transition:.2s ease}
.lo-dot[data-on]{background:var(--lime); width:38px} .lo-dot:hover{background:rgba(255,255,255,.55)}
.lo-arrow{position:absolute; z-index:2; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#f3f4f5; display:grid; place-items:center; transition:.16s ease; padding:0}
.lo-arrow svg{width:18px; height:18px}
.lo-arrow:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3)}
.lo-prev{left:14px} .lo-next{right:14px}
.lo-previa{position:sticky; top:0; z-index:60; background:var(--lime); color:var(--ink); font-size:13px; font-weight:600; text-align:center; padding:7px 12px}

/* preço, condições, bateria */
.lo-preco{display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:2px; margin-top:auto; padding-top:8px}
/* Cores do cartão com contraste ≥ 4,5 (Lighthouse/WCAG): nada de --mute em texto pequeno. */
.lo-preco small{flex:0 0 100%; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--dim)}
.lo-preco > b{font-size:22px; letter-spacing:-.02em; line-height:1.1}
.lo-parc{flex:0 0 100%; font-size:14.5px; color:var(--text)} .lo-parc b{font-size:16px} .lo-parc em{font-style:normal; color:var(--lo-accent-text, #5c7a00); font-weight:700}
.lo-avista{flex:0 0 100%; font-size:13px; color:var(--dim)}
.lo-negociar b{color:var(--lime-deep); font-size:20px} .lo-negociar span{flex:0 0 100%; font-size:13px; color:var(--dim)}
.lo-preco-lg{margin:14px 0 6px} .lo-preco-lg > b{font-size:clamp(30px,4vw,44px)} .lo-preco-lg .lo-parc{font-size:17px} .lo-preco-lg .lo-parc b{font-size:20px} .lo-preco-lg .lo-avista{font-size:14.5px}
.lo-cond{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px}
.lo-cond li{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); font-weight:500}
.lo-cond svg{width:15px; height:15px; color:var(--lime-deep); flex:none}
.lo-bat{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim); margin-top:8px}
.lo-bat svg{width:18px; height:18px; flex:none}
.lo-bat i{flex:1; height:8px; border-radius:99px; background:var(--inset); overflow:hidden; display:block; max-width:140px}
.lo-bat i b{display:block; height:100%; border-radius:99px; background:var(--green)}
.lo-bat.meio i b{background:#d9a400} .lo-bat.baixa i b{background:var(--red)}
.lo-bat.ok svg{color:var(--green)} .lo-bat.meio svg{color:#d9a400} .lo-bat.baixa svg{color:var(--red)}
.lo-bat span{font-weight:600; color:var(--text); white-space:nowrap}
.lo-bat-lg{margin-top:10px; font-size:14px} .lo-bat-lg i{max-width:220px; height:10px}
.lo-ctas{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.lo-ctas .btn{gap:8px}

/* faixa de confiança */
.lo-fx{background:var(--surface); border-bottom:1px solid var(--line); padding:0}
.lo-fx-grid b,.lo-fx-grid span{display:block}
.lo-fx-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0}
.lo-fx-grid > div{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; padding:18px 18px 18px 0; border-right:1px solid var(--line); margin-right:18px}
.lo-fx-grid > div:last-child{border-right:0; margin-right:0}
.lo-fx-grid svg{width:26px; height:26px; color:var(--lime-deep); grid-row:1/3; align-self:center}
.lo-fx-grid b{font-size:14.5px} .lo-fx-grid span{font-size:12.5px; color:var(--dim); line-height:1.4}

/* lista e cartões */
.lo-lista{padding:40px 0 56px}
.lo-lista-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:22px}
.lo-lista-head h2{font-size:clamp(22px,2.6vw,30px)}
.lo-lista-head p{color:var(--dim); font-size:14.5px; max-width:60ch}
.lo-lista-head a{display:inline-flex; align-items:center; gap:6px; color:var(--lime-deep); font-weight:600}
.lo-lista-head a svg{width:16px; height:16px}
.lo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.lo-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-s); transition:transform .16s ease, box-shadow .16s ease}
.lo-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-m)}
.lo-card-img{position:relative; display:block; aspect-ratio:4/5; background:radial-gradient(70% 60% at 50% 60%, rgba(166,224,0,.14), transparent 70%), linear-gradient(180deg,var(--surface-2),var(--inset)); padding:18px}
.lo-card-img img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 16px 24px rgba(0,0,0,.22))}
.lo-card-bat{position:absolute; left:12px; top:12px; display:inline-flex; align-items:center; gap:5px; background:rgba(15,16,19,.78); color:#fff; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:600}
.lo-card-bat svg{width:15px; height:15px; color:var(--lime)}
.lo-card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.lo-card h3{font-size:18px} .lo-card h3 a:hover{color:var(--lime-deep)}
.lo-tags{display:flex; flex-wrap:wrap; gap:6px}
.lo-tags span{font-size:12px; color:#55555b; background:var(--inset); border-radius:8px; padding:3px 8px}
.lo-card-ficha{font-size:12.5px; color:var(--dim)}
.lo-card .lo-cond{margin-top:6px} .lo-card .lo-cond li{font-size:12px}
.lo-card-acoes{display:flex; flex-direction:column; gap:10px; margin-top:12px; align-items:stretch}
.lo-card-acoes .lo-cta{justify-content:center; padding:11px 16px; font-size:14px}
.lo-card-link{display:inline-flex; align-items:center; justify-content:center; gap:6px; font-size:14px; font-weight:600; color:var(--text)}
.lo-card-link svg{width:17px; height:17px; color:var(--dim)}
.lo-card-link:hover svg{color:var(--lime-deep)}
.lo-card-link:hover{color:var(--lime-deep)}

/* como comprar */
.lo-como{padding:46px 0 56px; border-top:1px solid var(--line); background:var(--surface)}
.lo-passos{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.lo-passos > div{border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; background:var(--ground)}
.lo-passos .n{width:30px; height:30px; border-radius:9px; background:var(--lime); color:var(--lo-on-accent, var(--ink)); display:grid; place-items:center; font-weight:800; font-size:13.5px; margin-bottom:12px}
.lo-passos b{display:block; font-size:16.5px; margin-bottom:6px}
.lo-passos p{color:var(--dim); font-size:14.5px}

/* mapa */
.lo-mapa{padding:40px 0 56px; border-top:1px solid var(--line)}
/* Mapa pequeno ("só o pontinho"): cartão com o pino no endereço à esquerda, mapa de 280 px à direita. */
.lo-mapa-grid{display:grid; grid-template-columns:minmax(280px,400px) 1fr; gap:18px; align-items:stretch}
.lo-mapa-frame{position:relative; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-m); height:280px; background:var(--inset)}
/* O Google põe uma caixa "Abrir no Maps" no canto de cima do mapa embutido; o mapa entra 70 px acima do quadro para ela ficar de fora. */
.lo-mapa-frame iframe{width:100%; height:calc(100% + 70px); margin-top:-70px; border:0; display:block}
/* O pino é nosso, fixo no centro do mapa (o Google centraliza no endereço, mas nem sempre desenha o marcador). Centro visível = 50% − 35 px por causa do corte de cima. */
.lo-mapa-pino{position:absolute; left:50%; top:calc(50% - 35px); width:40px; height:40px; margin:-40px 0 0 -20px; pointer-events:none; filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.lo-mapa-pino svg{width:100%; height:100%; display:block}
.lo-mapa-card{display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; box-shadow:var(--shadow-m); font-style:normal}
.lo-mapa-card b{font-size:16px}
.lo-mapa-end{display:flex; gap:9px; align-items:flex-start; color:var(--text); font-size:14.5px; line-height:1.45; font-weight:500}
.lo-mapa-end svg{width:20px; height:20px; color:var(--lime-deep); flex:none; margin-top:1px}
.lo-mapa-end:hover span{text-decoration:underline}
.lo-mapa-h{display:flex; gap:9px; align-items:flex-start; color:var(--dim); font-size:13.5px}
.lo-mapa-h svg{width:18px; height:18px; color:var(--lime-deep); flex:none; margin-top:1px}
.lo-mapa-acoes{display:flex; align-items:center; gap:16px; margin-top:auto; padding-top:8px}
.lo-cta-sm{padding:9px 16px; font-size:13.5px} .lo-cta-sm svg{width:16px; height:16px}

/* página do aparelho */
.lo-crumbs{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13.5px; color:var(--dim); padding-top:18px}
.lo-crumbs a:hover{color:var(--text)}
.lo-crumbs span:last-child{color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw}
.lo-item{padding:22px 0 34px}
.lo-item-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:40px; align-items:start}
.lo-item-img{position:sticky; top:88px; display:flex; justify-content:center; padding:28px 26px 40px; border:1px solid var(--line); border-radius:var(--r-lg); background:radial-gradient(70% 60% at 50% 55%, rgba(166,224,0,.16), transparent 70%), linear-gradient(180deg,var(--surface),var(--inset))}
.lo-item-img img{width:min(420px,100%); height:auto; max-height:560px; object-fit:contain; filter:drop-shadow(0 22px 38px rgba(0,0,0,.2))}
.lo-item-img .lo-slide-bat{background:rgba(15,16,19,.82)}
.lo-item-info h1{font-size:clamp(28px,3.4vw,40px); margin-top:8px; letter-spacing:-.03em}
.lo-item-info h1 b{color:var(--lime-deep)}
.lo-share{display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:9px 14px; border-radius:11px; border:1px solid var(--line-2); background:var(--surface); color:var(--text); font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.lo-share:hover{border-color:var(--mute)} .lo-share svg{width:17px; height:17px}
.lo-share.ok{border-color:var(--green); color:var(--green)}
.lo-pag{margin-top:20px; padding:16px 18px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.lo-pag b{display:block; font-size:15px; margin-bottom:6px}
.lo-pag ul{margin:0; padding-left:18px; color:var(--dim); font-size:14.5px; line-height:1.7} .lo-pag li b{display:inline; color:var(--text)} .lo-pag p{color:var(--dim); font-size:14.5px}
.lo-desc{margin-top:18px; color:var(--dim); font-size:15.5px; line-height:1.6; white-space:pre-line}
.lo-h3{margin-top:22px; font-size:17px}
.lo-ficha{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin:10px 0 0}
.lo-ficha > div{background:var(--surface); padding:12px 14px}
.lo-ficha dt{font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--mute)}
.lo-ficha dd{margin:3px 0 0; font-size:14.5px; font-weight:500; line-height:1.4}
.lo-ficha-tec{grid-template-columns:1fr}
.lo-ficha-tec > div{display:grid; grid-template-columns:150px 1fr; gap:12px; align-items:baseline}
.lo-ficha-tec dd{margin:0}
.lo-onde{display:flex; gap:9px; align-items:flex-start; margin-top:16px; font-size:14px; color:var(--dim); line-height:1.5}
.lo-onde svg{width:18px; height:18px; color:var(--lime-deep); flex:none; margin-top:2px}
.lo-onde a{color:var(--lime-deep); font-weight:600}
.lo-outros{border-top:1px solid var(--line)}
.lo-vendido .lead{max-width:56ch}

/* índice das lojas */
.lo-hero{padding:46px 0 26px}
.lo-hero h1{font-size:clamp(32px,4.6vw,52px)} .lo-hero h1 b{color:var(--lime-deep)}
.lo-hero .lead{margin-top:14px}
.lo-uf{font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin:26px 0 12px}
.lo-uf:first-child{margin-top:0}
.lo-lojas{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px}
.lo-loja-card{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--shadow-s); transition:transform .16s ease}
.lo-loja-card:hover{transform:translateY(-2px)}
.lo-loja-card .lo-logo{width:48px; height:48px; border-radius:13px}
.lo-loja-card > span{display:flex; flex-direction:column; min-width:0; flex:1; line-height:1.2}
.lo-loja-card b{font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lo-loja-card small{font-size:12.5px; color:var(--dim)}
.lo-loja-card em{font-style:normal; font-size:12.5px; font-weight:600; color:var(--lime-deep); white-space:nowrap}

/* rodapé DA LOJA + marca da plataforma no fim */
/* Rodapé no padrão do xforceprotect.com: fundo claro e as classes .foot/.foot-social/.foot-links/.legal do site.css. */
.lo-foot .foot > .lo-foot-loja{max-width:520px}
.lo-foot-nome{display:block; font-size:21px; letter-spacing:-.02em; font-weight:800; color:var(--ink)}
.lo-foot-desc{color:var(--dim); font-size:14.5px; margin-top:10px; max-width:44ch; line-height:1.55}
.lo-foot-end{font-style:normal; display:grid; gap:6px; margin-top:14px; font-size:14px; color:var(--text)}
.lo-foot-end > span{display:flex; gap:8px; align-items:flex-start; line-height:1.45}
.lo-foot-end svg{width:17px; height:17px; color:var(--lime-deep); flex:none; margin-top:2px}
.lo-foot-end a:hover{text-decoration:underline}
.lo-foot-rodape{margin-top:14px; color:var(--dim); font-size:13.5px; line-height:1.55; white-space:pre-line; max-width:52ch}
.lo-foot .foot-social a svg{width:20px; height:20px}
.lo-foot-cols{display:flex; gap:44px; flex-wrap:wrap}
.lo-foot .lo-foot-col{flex-direction:column; gap:9px; min-width:150px}
.lo-foot .lo-foot-col b{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--text); margin-bottom:4px}
.lo-foot .foot-social a:hover{opacity:.85}
.lo-foot .legal{color:var(--dim)} .lo-foot .legal b{color:var(--text)}
.lo-foot .legal a{color:var(--dim); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:2px}
.lo-foot .legal a:hover{color:var(--text); text-decoration-color:var(--lime-deep)}
.lo-marcas{display:inline-flex; align-items:center; gap:7px; vertical-align:middle; margin:0 2px}
/* Faixa das marcas: Tá Feito (destaque), XForce e XDroid, cada um com link e uma linha do que é. */
.lo-foot-marcas{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; padding-top:26px; border-top:1px solid var(--line)}
.lo-foot-marca{display:flex; align-items:center; gap:14px; flex:1 1 260px; padding:14px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); transition:.16s ease}
.lo-foot-marca:hover{border-color:var(--line-2); transform:translateY(-1px); box-shadow:var(--shadow-s)}
.lo-foot-marca > span:last-child{display:flex; flex-direction:column; gap:2px; min-width:0}
.lo-foot-marca b{font-size:14.5px; font-weight:700} .lo-foot-marca small{font-size:12.5px; color:var(--dim); line-height:1.4}
.lo-foot-marca .lo-mv,.lo-foot-marca .lo-xd{font-size:22px; flex:none; width:96px; justify-content:center}
.lo-foot-tafeito{flex-basis:360px; border-color:var(--line-2)} .lo-foot-tafeito img{width:104px; height:42px; object-fit:contain; flex:none}
.lo-foot .legal{margin-top:22px}
.lo-mv{display:inline-flex; align-items:flex-end; font-size:15px; letter-spacing:-.04em; line-height:1; text-decoration:none !important}
.lo-mv .mv{font-weight:800; color:var(--ink)} .lo-mv .loc{font-weight:500; color:var(--dim)} .lo-mv .dot{width:5px; height:5px; border-radius:50%; background:var(--lime-deep); margin-left:3px; margin-bottom:2px}
.lo-sep{color:var(--mute)}
.lo-xd{display:inline-flex; align-items:flex-end; font-size:15px; letter-spacing:-.03em; line-height:1; text-decoration:none !important}
.lo-xd .x{font-weight:800; color:var(--lime-deep)} .lo-xd span:nth-child(2){font-weight:700; color:var(--ink)} .lo-xd .dot{width:5px; height:5px; border-radius:50%; background:var(--ink); margin-left:3px; margin-bottom:2px}

/* Faixa "Quero vender meu iPhone": escura, com o botão lima. */
.lo-vender{padding:14px 0 10px}
.lo-vender-in{display:flex; align-items:center; justify-content:space-between; gap:24px; background:#0b0c0e; color:#fff; border-radius:var(--r-lg); padding:30px 36px; position:relative; overflow:hidden; isolation:isolate}
.lo-vender-in::before{content:''; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%; right:-160px; top:-260px; background:radial-gradient(circle, color-mix(in srgb, var(--lime) 18%, transparent) 0%, transparent 65%)}
.lo-vender .eyebrow{color:var(--lime)} .lo-vender h2{margin:6px 0 6px; font-size:26px; letter-spacing:-.02em; line-height:1.15} .lo-vender p{margin:0; color:#9aa0a6; font-size:15px}
.lo-vender .lo-cta{flex:none}

/* Sobre a loja + perguntas frequentes: texto de verdade para o Google (cidade, modelos, pagamento). */
.lo-sobre{padding:50px 0 6px}
.lo-sobre-grid{display:grid; grid-template-columns:1.35fr 1fr; gap:30px; align-items:start}
.lo-sobre p{font-size:15.5px; line-height:1.7; color:var(--dim); margin:0 0 12px} .lo-sobre p b{color:var(--text); font-weight:600}
.lo-sobre p a{color:var(--text); font-weight:600; text-decoration:underline; text-decoration-color:var(--lime); text-underline-offset:3px}
.lo-sobre-lista{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.lo-sobre-lista li{display:grid; grid-template-columns:150px 1fr; gap:10px; padding:11px 16px; font-size:14px; color:var(--dim); border-bottom:1px solid var(--line)}
.lo-sobre-lista li:last-child{border-bottom:0} .lo-sobre-lista b{color:var(--text); font-weight:600}
.lo-faq{padding:40px 0 16px}
.lo-faq-lista{display:grid; gap:8px; max-width:860px}
.lo-faq details{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:0 18px}
.lo-faq summary{cursor:pointer; padding:14px 0; font-weight:600; font-size:15px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
.lo-faq summary::-webkit-details-marker{display:none} .lo-faq summary::after{content:'+'; font-size:20px; color:var(--dim); flex:none; line-height:1}
.lo-faq details[open] summary::after{content:'\2212'}
.lo-faq p{margin:0 0 16px; color:var(--dim); font-size:14.5px; line-height:1.65}

@media (max-width:980px){
  .lo-fx-grid{grid-template-columns:repeat(2,1fr); row-gap:8px}
  .lo-fx-grid > div:nth-child(2){border-right:0; margin-right:0}
}
@media (max-width:900px){
  .lo-menu{display:none}
  .lo-arrow{display:none}
  .lo-banner-viewport{height:auto}
  .lo-slide{position:relative; inset:auto; display:none}
  .lo-slide[data-on]{display:block}
  .lo-slide-in{flex-direction:column; align-items:stretch; gap:6px; padding:22px 20px 46px}
  .lo-slide-img{order:-1; width:200px; height:260px; margin:0 auto 6px}
  .lo-slide-bat{top:auto; bottom:-6px}
  .lo-slide h1,.lo-slide h2{font-size:clamp(26px,7.5vw,36px)}
  .lo-item-grid{grid-template-columns:1fr; gap:22px}
  .lo-item-img{position:static; padding:18px 18px 34px}
  .lo-passos{grid-template-columns:1fr}
  .lo-mapa-grid{grid-template-columns:1fr} .lo-mapa-frame{height:220px}
  .lo-vender-in{flex-direction:column; align-items:stretch; padding:24px 20px} .lo-vender .lo-cta{justify-content:center}
  .lo-sobre-grid{grid-template-columns:1fr; gap:18px} .lo-sobre-lista li{grid-template-columns:120px 1fr}
  .lo-ficha-tec > div{grid-template-columns:1fr; gap:2px}
}
@media (max-width:600px){
  .lo-fx-grid{grid-template-columns:1fr}
  .lo-fx-grid > div{border-right:0; margin-right:0; padding:12px 0; border-bottom:1px solid var(--line)}
  .lo-fx-grid > div:last-child{border-bottom:0}
  .lo-grid{grid-template-columns:1fr; gap:12px}
  .lo-ctas .btn{width:100%}
  .lo-ficha{grid-template-columns:1fr}
  .lo-slide-ctas .lo-cta{width:100%; justify-content:center}
}

/* ── QUEM JÁ COMPROU (/clientes, 07/11/2026) — depoimentos dos clientes das lojas ─────────────────────────────── */
.lo-depo-top{gap:18px}
.lo-depo-top .lo-brand{color:inherit}
.lo-depo-nav{display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}
.lo-depo-nav a{font-size:14px; font-weight:600; color:var(--dim); padding:8px 12px; border-radius:999px; transition:background .15s ease, color .15s ease}
.lo-depo-nav a:hover{background:var(--inset); color:var(--text)}
.lo-hero-clientes{padding-bottom:10px}
.lo-depo-total{margin-top:16px; font-size:13.5px; font-weight:600; color:var(--mute); letter-spacing:.02em}
.lo-depo-lista{padding-top:28px}
.lo-depos{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px}
.lo-depo{position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-s); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease}
.lo-depo:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.lo-depo-foto{margin:0; aspect-ratio:4/5; background:var(--inset); overflow:hidden}
.lo-depo-foto img{width:100%; height:100%; object-fit:cover; display:block}
.lo-depo-ini{display:grid; place-items:center; aspect-ratio:4/5; background:linear-gradient(135deg, color-mix(in srgb, var(--lime) 55%, #fff) 0%, color-mix(in srgb, var(--lime) 18%, var(--inset)) 100%)}
.lo-depo-ini span{font-size:clamp(44px,6vw,64px); font-weight:800; letter-spacing:-.04em; color:var(--ink); opacity:.78}
.lo-depo-txt{display:flex; flex-direction:column; gap:14px; padding:18px 20px 20px}
.lo-depo-frase{margin:0; position:relative; padding-left:34px}
.lo-depo-aspas{position:absolute; left:0; top:-2px; width:26px; height:26px; color:var(--lime-deep)}
.lo-depo-frase p{font-size:17.5px; line-height:1.45; font-weight:600; letter-spacing:-.012em; color:var(--text); text-wrap:pretty}
.lo-depo-meta{display:flex; flex-direction:column; gap:3px; padding-top:14px; border-top:1px solid var(--line); font-size:14px; line-height:1.45; color:var(--dim)}
.lo-depo-meta b{font-size:15.5px; color:var(--text)}
.lo-depo-meta em{font-style:normal; font-weight:600; color:var(--text)}
.lo-depo-meta a{font-weight:600; color:var(--lime-deep); text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--lime-deep) 40%, transparent); text-underline-offset:3px}
.lo-depo-meta small{margin-top:4px; font-size:12.5px; color:var(--mute)}
.lo-depo-ex{position:absolute; top:12px; left:12px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#7a5b00; background:#ffe9a8; border:1px solid #f1cf5c; border-radius:999px; padding:4px 10px}
.lo-depo-vazio{text-align:center; padding:48px 24px; background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r-lg)}
.lo-depo-vazio h2{font-size:clamp(22px,2.6vw,30px)} .lo-depo-vazio p{color:var(--dim); margin:12px auto 22px; max-width:52ch}
.lo-depo-cta{padding:10px 0 64px}
.lo-depo-cta-card{display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; padding:30px 32px; background:var(--ink); color:#fff; border-radius:var(--r-lg)}
.lo-depo-cta-card h2{font-size:clamp(22px,2.6vw,30px); color:#fff} .lo-depo-cta-card p{margin-top:8px; color:rgba(255,255,255,.72); max-width:56ch; font-size:15.5px}
.lo-depo-cta-card .lo-ctas{display:flex; gap:10px; flex-wrap:wrap}
.lo-depo-cta-card .btn-ghost{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); box-shadow:none} .lo-depo-cta-card .btn-ghost:hover{background:rgba(255,255,255,.12); color:#fff}
@media (max-width:640px){
  .lo-depo-top{flex-wrap:wrap} .lo-depo-nav{margin-left:0; width:100%; justify-content:flex-start; gap:0} .lo-depo-nav a{padding:6px 10px; font-size:13px}
  .lo-depos{grid-template-columns:1fr} .lo-depo-foto,.lo-depo-ini{aspect-ratio:1/1}
  .lo-depo-cta-card{padding:24px 20px}
}