/* ============================================================ Design system da aplicação Fonte: Plus Jakarta Sans · Cor primária: #073A79 (azul marinho) ============================================================ */ :root{ color-scheme:light; --bg:#E5E9F0; --bg-soft:#F1F3F7; --bg-admin:#F2F4F8; --card:#fff; --ink:#161C29; --navy:#0B2452; --ink2:#252C3B; --ink3:#353D4E; --muted:#8A90A3; --muted2:#79808F; --muted3:#474E5F; --primary:#073A79; --primary-dark:#05305F; --primary-soft:#E9F0F9; --primary-soft2:#F4F8FC; --line:#E7EDF4; --line2:#F2F5F9; --field:#E3E9F1; --field-bg:#F7F9FC; --ok:#16A34A; --ok-2:#15803D; --ok-bg:#E8F7EE; --warn:#B45309; --warn-bg:#FEF6E7; --info:#1D4ED8; --info-bg:#EAF2FE; --danger:#B91C1C; --danger-bg:#FDEEEE; --danger-line:#F3C8C8; --fire:#FF5C39; --pix:#32BCAD; --like:#FF3B5C; /* Vermelho de destaque (avisos que o cliente PRECISA ler) e os dois tons dos chips do topo, reaproveitados nas linhas abaixo do botão de pagar. */ /* Os três tons foram escurecidos o mínimo necessário para passar em 4.5:1 (WCAG AA) sobre os fundos claros onde são usados: #D32F2F dava 4.48:1 na frase da senha e #0E7A3C dava 4.41:1 no chip verde do topo. */ --alerta:#C62828; --azul-selo:#1D3FA8; --verde-selo:#0B6832; /* Etiqueta de desconto dos pacotes: vermelho de liquidação, cheio, para saltar da linha branca (pedido do cliente). */ --sale:#E11D2E; --sale-dark:#B3121F; --r-card:20px; --r-sm:12px; --r-pill:999px; --shadow:0 2px 14px rgba(11,36,82,.07); --shadow-lg:0 10px 34px rgba(11,36,82,.10); --shadow-btn:0 8px 20px rgba(7,58,121,.32); --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased} a{color:var(--primary);text-decoration:none} a:hover{color:var(--primary-dark)} img{max-width:100%} .ic{display:inline-block;vertical-align:middle;flex-shrink:0} button{font-family:inherit} input,textarea,select{font-family:inherit} :focus-visible{outline:2px solid var(--primary);outline-offset:1px} /* Esconde visualmente mas mantém acessível a screen readers. Padrão a11y. */ .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} @keyframes bm-spin{to{transform:rotate(360deg)}} @keyframes bm-pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}} @keyframes bm-ring{0%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}100%{box-shadow:0 0 0 20px rgba(22,163,74,0)}} @keyframes bm-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* ============================================================ LOJA (mobile-first) ============================================================ */ .app{max-width:460px;margin:0 auto;min-height:100vh;background:var(--bg-soft); box-shadow:0 0 60px rgba(11,36,82,.08);position:relative} .app.plain{background:var(--bg-soft)} .pad{padding:0 12px 12px} .stack{display:flex;flex-direction:column} .section-fade{animation:bm-fade .25s ease both} /* --- Banner --- Placeholder PRETO por decisão do cliente: a arte final entra depois como imagem (Admin → Configurações → banner). Enquanto não houver imagem, fica só o bloco preto — nada de logo/gradiente/slogan. Os dois blocos são espaço de ARTE: o do topo (#banner) é o do MASCOTE e o do rodapé (#bannerFoot) encerra a página, igual ao do topo. Tudo que mora dentro deles é position:absolute sobre um .banner que já é position:relative — a altura da página não muda por causa disso. */ .banner{position:relative;overflow:hidden;background:#000; display:flex;align-items:center;justify-content:center;min-height:132px} .banner.banner-ph{background:#000} /* O bloco do rodapé passou a ter a MESMA altura do topo (pedido do cliente: "banner igual ao do topo"). Antes eram 104px porque ele carregava o botão de vídeo: o vídeo saiu da tela e o retângulo voltou a ser só arte. */ .banner.foot{min-height:132px;margin-top:10px} .banner .banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block} /* Único botão flutuante sobre o banner: WhatsApp do SUPORTE, à direita. Sem moldura branca (o ícone do sprite já é o quadradinho verde) e com a palavra "Suporte" ao lado: ícone sozinho, num banner que pode virar qualquer arte, não diz para que serve. A pílula escura translúcida garante que o texto branco leia sobre qualquer imagem que o admin subir. */ .banner .wabtn{position:absolute;right:12px;top:12px;z-index:2; display:inline-flex;align-items:center;gap:7px; height:38px;padding:0 6px 0 12px; border:none;border-radius:999px;text-decoration:none; background:rgba(0,0,0,.46);color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.35);cursor:pointer; transition:transform .12s ease,box-shadow .2s ease,background-color .2s ease} @supports (backdrop-filter:blur(6px)){ .banner .wabtn{background:rgba(0,0,0,.34);backdrop-filter:blur(6px)} } .banner .wabtn .txt{font-size:11.5px;font-weight:800;letter-spacing:.2px; line-height:1;white-space:nowrap;color:#fff} .banner .wabtn .ic{width:26px;height:26px;display:block;border-radius:7px} .banner .wabtn:hover{background:rgba(0,0,0,.60);color:#fff;transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.45)} .banner .wabtn:active{transform:none} /* Rótulo do espaço do mascote (bloco do topo). Centrado e discreto, só para dizer que aquele retângulo está reservado para a arte. Empilhamento: o ::before da arte padrão e a .banner-img do admin ficam embaixo; o rótulo entra em 2 (não depende da ordem em que o JS insere a img) e o botão Suporte fica em 3, sempre clicável no canto direito. pointer-events:none para nunca roubar o toque. A sombra existe porque a arte do banner pode ser clara: sem ela o texto sumiria: sobre preto o branco a 62% dá ~7,5:1. */ .banner .mascot-ph{position:absolute;inset:0;z-index:2;display:flex; align-items:center;justify-content:center;pointer-events:none; color:rgba(255,255,255,.62);font-size:12px;font-weight:800;letter-spacing:.5px; text-shadow:0 1px 3px rgba(0,0,0,.75)} .banner .mascot-ph[hidden]{display:none} .banner .wabtn{z-index:3} /* Chamada do vídeo no bloco do RODAPÉ — REMOVIDA. O cliente não quer mais vídeo no rodapé: o botão saiu do index.html e as regras #bannerFoot .vidcta (e .wrapcta/.play/.vlbl) foram apagadas junto. O vídeo não tem mais botão em lugar nenhum da loja (ver js/loja.js). O retângulo preto do rodapé virou só espaço de arte, igual ao do topo. */ .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line2)} .topbar .logo{height:42px} .iconbtn{width:36px;height:36px;border-radius:12px;border:1px solid var(--line);background:#fff; display:flex;align-items:center;justify-content:center;color:var(--ink2);cursor:pointer} .iconbtn:hover{background:var(--primary-soft)} /* --- Tabs de redes --- */ .netbar{background:#fff;border-radius:18px;margin:8px 12px;padding:12px 4px 10px;box-shadow:var(--shadow); display:flex;gap:0;position:relative} .nettab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px; background:none;border:none;cursor:pointer;padding:2px 2px;position:relative} .nettab .chip{width:44px;height:44px;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(11,36,82,.12); display:flex;align-items:center;justify-content:center;transition:transform .12s,box-shadow .3s ease} .nettab:hover .chip{transform:translateY(-2px)} .nettab.active .chip{box-shadow:0 4px 14px rgba(7,58,121,.28)} /* Nome COMPLETO da rede, em até 2 linhas — nunca cortado com reticências. (line-clamp:2 só entra como trava de segurança para nomes absurdos.) */ .nettab .lbl{font-size:10.5px;font-weight:600;color:var(--ink3);line-height:1.2;text-align:center; max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-height:2.4em; transition:color .32s ease,font-weight .32s ease} .nettab .bar{width:26px;height:3px;border-radius:99px;background:transparent; transition:background-color .32s ease,transform .32s cubic-bezier(.4,0,.2,1)} .nettab.active .lbl{font-weight:800;color:var(--primary)} .nettab.active .bar{background:var(--primary)} @media(max-width:400px){ .nettab .chip{width:40px;height:40px} .nettab .lbl{font-size:10px} } /* --- Cards --- */ .card{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px;margin:10px 12px} .card.tight{padding:0} .card-h{display:flex;align-items:center;gap:10px} .card-h .t{font-size:17px;font-weight:800;color:var(--navy)} .card-h .s{font-size:11.5px;color:var(--muted);font-weight:500} .muted{color:var(--muted)} .hr{border-top:1px solid var(--line2)} /* --- Serviço: sub-tabs (categorias) --- PASTILHAS de uma linha, não mais caixas quadradas com o nome em duas linhas. A grade de colunas iguais obrigava toda pastilha a ter a altura da MAIOR ("Visualizações em Stories" em 2 linhas = ~48px de altura para todas, mesmo as que só dizem "Curtidas"). Em flex cada uma ocupa a largura do próprio nome, a linha inteira cabe sem quebrar e a faixa cai para ~28px. O nome continua INTEIRO — o catálogo do SMMHUB traz até ~11 tipos por rede e cortar "Visualizações em St…" não ajuda ninguém. CENTRALIZADO (pedido do cliente): alinhado à esquerda, a última linha ficava "puxada" para um canto e o conjunto tinha cara de texto justificado. ALTURA (item 11): o objetivo é chegar antes ao formulário. Cada pastilha caiu de 6px/11px para 4px/10.5px de padding/corpo — 11×1.2 + 12 + 3 (borda) ≈ 28px viraram 10.5×1.2 + 8 + 3 ≈ 24px, ou seja 4,6px por linha. Somando os 2px do padding-bottom da faixa, são ~6,6px a menos com uma linha de serviços e ~11,2px com duas (o caso comum). Nada é cortado: o nome continua inteiro. */ .subtabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px; margin:0 14px;padding-bottom:7px;border-bottom:1px solid var(--line2);position:relative} .subtab{flex:0 1 auto;max-width:100%;min-width:0; display:inline-flex;flex-direction:row;align-items:center;gap:4px; padding:4px 8px;color:var(--ink3);font-size:10.5px;font-weight:700;line-height:1.2; border:1.5px solid var(--field);border-radius:99px;background:#fff;cursor:pointer; white-space:nowrap;overflow:hidden; transition:color .2s ease,border-color .2s ease,background-color .2s ease} /* Reticências só como trava para um nome absurdo — na prática nada é cortado. */ .subtab > span{display:block;min-height:0;overflow:hidden;text-overflow:ellipsis} .subtab .ic{transition:color .32s ease;color:var(--ink3);flex-shrink:0} .subtab[data-cat-name="curtidas"] .ic{color:var(--like)} .subtab[data-cat-name="comentarios"] .ic{color:var(--ok)} .subtab[data-cat-name="visualizacoes"] .ic{color:var(--primary)} .subtab[data-cat-name="seguidores"] .ic, .subtab[data-cat-name="inscritos"] .ic, .subtab[data-cat-name="membros"] .ic{color:var(--ink3)} .subtab.active{color:var(--primary);font-weight:800;border-color:var(--primary);background:var(--primary-soft)} .subtab.active .ic{color:var(--primary)} /* --- Passos numerados --- A loja é usada por gente que nunca comprou nada parecido. Em vez de um bloco de texto explicativo (que ninguém lê), cada seção ganha uma ordem: 1 rede, 2 tipo de interação, 3 pacote, 4 dados. O número diz o que fazer agora. */ /* O passo 4 tem título longo ("Informação da rede e dados para contato") e QUEBRA em duas linhas em 390px. Por isso: - text-align:left no bloco, para a segunda linha nascer na mesma vertical da primeira (herdar center de algum pai deixaria o texto torto); - a bolinha é flex-shrink:0 e align-self:center, então ela fica centrada entre as duas linhas em vez de esticar ou descer junto; - align-items:center mantém número e texto equilibrados com 1 ou 2 linhas. */ .step{display:flex;align-items:center;gap:8px;margin:12px 14px 6px; font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.2;text-align:left} .step i{width:22px;height:22px;border-radius:50%;background:var(--primary);color:#fff; font-size:12.5px;font-weight:800;font-style:normal;flex-shrink:0;align-self:center; display:flex;align-items:center;justify-content:center} /* Dentro do card (que é .tight, sem padding) a margem de cima COLAPSA com a borda do card e o passo cola no topo. Padding não colapsa — daí o respiro. */ .card .step{margin:0 14px 8px;padding-top:14px} /* ALINHAMENTO DOS 4 PASSOS (pedido do cliente). Os passos 2, 3 e 4 vivem dentro do .card (margem lateral 12px) e recuam mais 14px de .card .step = 26px da borda do .app. - passos 3 e 4 ainda passam pelo .svcform, que já tem 12px de padding: sem o ajuste abaixo eles iam para 38px e apareciam deslocados; - o passo 1 fica FORA de card (index.html) e parava em 14px. Com as duas regras os quatro títulos nascem na MESMA vertical (26px). */ .svcform .step{margin-left:2px;margin-right:2px} .app > .step{margin-left:26px;margin-right:26px} /* --- Rodapé do cabeçalho (3 frases + linha de status) --- Fica LOGO ABAIXO do menu de redes. NÃO é uma etapa do fluxo: por isso não tem card, borda nem número — é texto solto, pequeno e discreto, só para separar o topo do passo 2. Se ganhar caixa branca vira "passo" aos olhos do cliente. */ .headnote{background:none;border:none;box-shadow:none;padding:0;margin:0} /* A consulta de status virou o cartão .statuscard — as regras vivem em css/topo.css, junto com os chips das frases. */ /* --- Pacotes (12 fixos: 6 linhas × 2 colunas, esquerda BR / direita Mundial) --- Tudo visível de uma vez, sem dropdown: o cliente escolhe com 1 toque. */ .packs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px} .pack{display:flex;flex-direction:column;align-items:stretch;gap:6px;text-align:center; border:1.5px solid var(--field);border-radius:14px;background:#fff;padding:8px;cursor:pointer; font-family:inherit;transition:border-color .15s,background-color .15s,box-shadow .15s} .pack .q{font-size:14.5px;font-weight:800;color:var(--navy);line-height:1.15} .pack .p{font-size:15px;font-weight:800;color:var(--primary);line-height:1.15} .pack:hover{border-color:var(--primary)} .pack.on{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 4px 14px rgba(7,58,121,.18)} .pack.on .n{color:var(--primary)} .pack[disabled]{opacity:.4;cursor:not-allowed;background:var(--field-bg)} .pack[disabled]:hover{border-color:var(--field)} .pack[disabled] .p{color:var(--muted)} /* --- Form --- ESPAÇAMENTO PADRÃO da loja (não invente números novos por aqui): 12px = respiro do miolo de um bloco (padding do .field, do .svcform) 10px = distância entre dois blocos irmãos (campo → campo, botão → campo) 8px = título → conteúdo 6/5px = rótulo → campo, legenda → texto Os antigos style="margin-top:14px" espalhados pelo loja.js saíram: o espaço entre um campo e o próximo mora aqui, num lugar só. */ .svcform{padding:0 12px 10px} .field{background:var(--field-bg);border-radius:16px;padding:12px;margin-top:10px} .field.flush{margin-top:0} label.lbl{display:flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:5px} .field .lbl:not(:first-child){margin-top:10px} .field .btn{margin-top:10px} .hint{font-size:11px;color:var(--muted);margin-top:5px} input.inp,textarea.inp,.select{width:100%;box-sizing:border-box;padding:11px 12px;border:1.5px solid var(--field); border-radius:12px;font-size:13px;font-weight:500;color:var(--ink);background:#fff;outline:none} /* Caixa dos comentários personalizados (uma linha por comentário). */ .ta-com{resize:vertical;min-height:104px;font-family:inherit;line-height:1.5} textarea.inp{height:64px;resize:none} input.inp:focus,textarea.inp:focus{border-color:var(--primary)} .select{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:600;font-size:13.5px;cursor:pointer} .select .ic{color:var(--muted)} .selwrap{position:relative} .selmenu{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1.5px solid var(--field); border-radius:12px;box-shadow:var(--shadow-lg);z-index:20;overflow:hidden;display:none} .selwrap.open .selmenu{display:block} .selmenu .opt{padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:10px} .selmenu .opt:hover,.selmenu .opt.sel{background:var(--primary-soft);color:var(--primary)} /* --- Botões --- */ .btn{display:flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;padding:13px 18px; font-size:13px;font-weight:800;letter-spacing:.4px;cursor:pointer;transition:transform .1s,box-shadow .2s;width:100%} .btn:active{transform:translateY(1px)} .btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-btn)} .btn-primary:hover,.btn-primary:focus{background:var(--primary-dark);color:#fff} .btn-pix{background:var(--primary);color:#fff;box-shadow:var(--shadow-btn)} .btn-pix:hover,.btn-pix:focus{background:var(--primary-dark);color:#fff} .btn-ghost{background:#fff;color:var(--ink2);border:1.5px solid var(--field)} .btn-ghost:hover,.btn-ghost:focus{background:var(--bg-soft);color:var(--ink2)} .btn-sm{padding:10px 14px;font-size:12px;border-radius:11px} .btn[disabled]{opacity:.6;cursor:not-allowed} .btn.loading{position:relative;color:transparent} .btn.loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%; border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:bm-spin .8s linear infinite} /* Legenda miúda abaixo de um botão. A LOJA (index) não usa mais — lá o bloco abaixo do "Pagar agora" é a .paynote colorida logo adiante. A regra fica porque checkout.html e o popup de compra ainda emitem .btn-sub. */ .btn-sub{text-align:center;font-size:11px;font-weight:600;color:var(--muted);margin-top:6px} /* --- Abaixo do "Pagar agora" (só na loja) --- Saíram a .btn-sub e a .btn-note deste ponto (cinzas, ilegíveis sobre o .field). No lugar, TRÊS linhas curtas e coloridas: uma por informação, cada uma numa linha só. As cores repetem os chips do topo (azul/verde) mais o vermelho de alerta do WhatsApp, para o cliente reconhecer o código de cor da página. CORPO: em 390px de tela a largura útil aqui dentro é 318px (390 − 12+12 do .card − 12+12 do .svcform − 12+12 do .field). A linha mais longa tem 71 caracteres, então o corpo é pequeno mesmo: 8px com letter-spacing negativo fecha em ~300px. Medido no navegador, não estimado. Contraste sobre var(--field-bg) #F7F9FC: 5.0:1 (vermelho #C62828), 6.0:1 (verde #0B6832), 8.6:1 (azul #1D3FA8) — todos acima de 4.5:1. */ /* As margens negativas devolvem 20px do padding do .field: cada 10px a mais de largura é meio ponto a mais de corpo nas frases, que é o que está em falta. */ .paynote{margin:8px -10px 0;text-align:center;display:flex;flex-direction:column;gap:3px} /* O corpo acompanha a largura da tela (vw) para a frase mais longa fechar numa linha em 390px sem virar ilegível em telas maiores. Medido no navegador: em 390px a caixa tem 323px e a frase mais longa 291px. */ .paynote .pn{font-size:clamp(7px,2.05vw,10px);font-weight:700;line-height:1.4; letter-spacing:-.15px;white-space:nowrap} /* A palavra "WhatsApp" e o ícone andam juntos — nunca em linhas diferentes. */ .paynote .wal{display:inline-flex;align-items:center;gap:3px;white-space:nowrap} .paynote .pn-blue{color:var(--azul-selo)} .paynote .pn-green{color:var(--verde-selo)} .paynote a.pn-red{color:var(--alerta);text-decoration:none; display:inline-flex;align-items:center;justify-content:center;gap:4px} .paynote a.pn-red:hover{color:var(--alerta);text-decoration:underline} .paynote .pn-red .waic{width:12px;height:12px;flex:0 0 auto;vertical-align:-2px} /* Abaixo de ~360px nem o piso do clamp faz a frase caber numa linha. Aí é melhor deixar quebrar em duas do que cortar o texto pela metade: o prazo é informação que o cliente precisa ler inteira. */ @media (max-width:359px){ .paynote .pn{white-space:normal} .paynote .pn-red .waic{width:10px;height:10px} } /* Vídeo do serviço selecionado, acima dos pacotes, também em telas pequenas. */ .service-video{margin:12px;overflow:hidden;border-radius:14px;background:#000} .service-video .vplayer{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;background:#000} /* Consentimento fica no mesmo fluxo do botão, com alvos de toque confortáveis. */ .legal-consent{display:flex;align-items:flex-start;gap:9px;margin:13px 1px 10px; color:var(--muted3);font-size:11.5px;font-weight:600;line-height:1.45;cursor:pointer} .legal-consent input{width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--primary)} .legal-consent a{font-weight:800;text-decoration:underline;text-underline-offset:2px} .legal-doc h1{margin:0 0 10px;color:var(--navy);font-size:20px} .legal-doc h2{margin:18px 0 6px;color:var(--navy);font-size:15px} .legal-doc ul{padding-left:20px} .legal-review{margin-bottom:18px;padding:12px 13px;border:1px solid var(--danger-line); border-radius:12px;background:var(--danger-bg);color:var(--danger);font-size:12px} .seo-catalog{margin:16px 12px;padding:16px;border-radius:16px;background:var(--card);color:var(--ink2)} .seo-catalog h1{font-size:18px}.seo-catalog h2{font-size:14px;margin-top:14px}.seo-catalog li{font-size:12px} /* --- Badges / pills --- */ .pill{display:inline-flex;align-items:center;gap:4px;padding:5px 9px;border-radius:var(--r-pill); font-size:10px;font-weight:800;line-height:1} .pill.ghost{background:var(--primary-soft2);border:1px solid var(--line);color:var(--ink3);font-weight:700} .pill.rec{background:var(--ok-bg);color:var(--ok-2)} .pill.off{background:var(--fire);color:#fff;letter-spacing:.3px} .st{display:inline-flex;align-items:center;padding:4px 9px;border-radius:var(--r-pill);font-size:9.5px;font-weight:800;white-space:nowrap} .st-pendente{background:var(--warn-bg);color:var(--warn)} .st-processando{background:var(--info-bg);color:var(--info)} .st-em_entrega{background:var(--primary-soft);color:var(--primary)} .st-concluido{background:var(--ok-bg);color:var(--ok-2)} .st-reembolsado{background:var(--danger-bg);color:var(--danger)} .st-falhados,.st-estorno_manual{background:var(--danger-bg);color:var(--danger)} .order-menu-toggle{font-size:23px;line-height:1;width:26px;height:32px} .chips button.chip-f{font-family:inherit} .order-actions-menu{position:fixed;width:275px;max-width:calc(100vw - 16px);z-index:1200;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px} .order-actions-menu button{display:block;width:100%;background:none;border:0;text-align:left;padding:12px 10px;border-radius:8px;font:inherit;font-size:12px;cursor:pointer} .order-actions-menu button:hover,.order-actions-menu button:focus-visible{background:var(--primary-soft)} .order-actions-menu .danger{color:var(--danger)} .provider-response{white-space:pre-wrap;overflow-wrap:anywhere;max-height:260px;overflow:auto;background:var(--field-bg);padding:12px;border-radius:10px;font-size:11px} .order-confirm{width:480px;max-width:calc(100vw - 32px);border:0;border-radius:18px;padding:24px;color:var(--navy);box-shadow:var(--shadow);font:inherit} .order-confirm::backdrop{background:rgba(15,23,42,.5)} .order-confirm h2{font-size:18px;margin:0 0 16px} .order-confirm p,.order-confirm label{font-size:13px;line-height:1.6} .order-confirm-buttons{display:flex;justify-content:flex-end;gap:10px;margin-top:20px} @media(max-width:560px){ .tbl.orders-table .tr{grid-template-columns:60px minmax(0,1fr) 66px 26px;gap:6px;padding:12px 10px;font-size:11px} .tbl.orders-table .code{overflow-wrap:anywhere} .tbl.orders-table .st{font-size:9px;padding:5px 6px;white-space:normal} } /* --- Selos de confiança (REMOVIDOS) --- As regras .trust / .trust .it / .trustpills saíram junto com o markup: a loja não exibe mais selo nenhum de "seguro/garantido". Nada a estilizar aqui. */ /* --- Total bar --- */ .totalbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:16px} .totalbar .lab{font-size:10.5px;font-weight:800;color:var(--muted2);letter-spacing:.6px} .totalbar .val{font-size:22px;font-weight:800;color:var(--primary)} /* --- Rows (lista simples) --- */ .row{display:flex;align-items:center;gap:12px;padding:14px 16px} .row+.row{border-top:1px solid var(--line2)} .row .t{font-size:13.5px;font-weight:800} .row .s{font-size:11px;color:var(--muted)} .kv{display:flex;justify-content:space-between;font-size:12.5px;gap:12px} .kv .k{color:var(--muted);font-weight:600} .kv .v{font-weight:700} .ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* --- Progresso --- */ .prog{height:8px;border-radius:99px;background:#E6EDF6;overflow:hidden} .prog>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2E6FC4,var(--primary))} .prog.lg{height:10px} /* --- Drawer (REMOVIDO) --- O menu lateral saiu da loja: o topo tem um ícone só (WhatsApp do suporte) e a navegação é pelo menu de redes. As regras .drawer / .drawer-mask foram apagadas junto com o HTML e o JS. */ /* Footer discreto das páginas públicas. MANTIDO de propósito: o rodapé de texto saiu do index.html (item 24), mas checkout.html, pix.html, pedidos.html, obrigado.html, termos.html e privacidade.html continuam emitindo