NOME DA TELA
...chips/sair...
NOME DA TELA
...chips/sair...
| (vira card no celular) 7) conteudo largo que precisa rolar de lado: envolva em .fg-rolagem-x (o body NUNCA rola de lado) 02/08/2026: inicio.html passou a LINKAR este arquivo. Ele podia manter os proprios tokens (--verde, --texto...) enquanto era uma tela burra de dois botoes; virou a PORTA com login de todo mundo, e duas fontes da verdade pra cor da marca so sobrevivem ate a primeira mudanca sair pela metade. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ /* base da marca */ --fg-creme:#faf7f0; /* fundo de TODAS as telas */ --fg-texto:#231f1c; /* quase-preto quente */ /* cinza quente (texto secundario). ESCURECIDO de #8a8178 pra #6f675e em 26/08/2026 (achado 5.2 do DEPLOY.md): o tom antigo dava 3,82:1 sobre branco, 3,57:1 sobre o creme do body e 3,39:1 sobre o --fg-painel — abaixo do minimo de 4,5:1, e ele carrega TODO o texto secundario do site (.fgp-quando, .fgp-fatos, .fgp-pai, .fgp-ev, .fg-hint...), sempre em corpo de 11 a 13px, numa tela lida no celular, na cozinha, as 23h. O novo mantem a MESMA matiz quente (30°, so mais escuro) e mede 5,56:1 no branco / 5,20:1 no creme / 4,93:1 no painel. */ --fg-sub:#6f675e; --fg-borda:#e2ddd2; /* borda clara quente (cards) */ --fg-borda-forte:#cfc8bd; /* borda de inputs / divisores */ --fg-apagado:#c2bab0; /* assinatura / texto minimo */ /* tricolor da Italia — SO detalhe (faixa, bandeira, pontinhos) */ --fg-it-verde:#009246; --fg-it-branco:#f4f5f0; --fg-it-vermelho:#ce2b37; /* acentos de acao (por area, via .fg-area-*) */ --fg-verde:#1a7a3a; --fg-verde-esc:#0f5226; --fg-vermelho:#c0392b; --fg-vermelho-esc:#8e2418; --fg-grafite:#20242c; --fg-grafite-esc:#101318; /* semanticos (status/mensagens — iguais em todas as areas) */ --fg-ok:#1a7a3a; --fg-erro:#c0392b; --fg-alerta:#b9770e; /* ambar quente (nunca #f39c12 frio) */ --fg-info:#2471a3; /* versoes LAVADAS dos semanticos (fundo de aviso, faixa de destaque). Estavam escritas a mao, dobradas, em chamados.html e manutencao.html — duas copias do mesmo tom divergem na primeira vez que alguem mexe numa */ --fg-ok-suave:#e8f5ec; --fg-erro-suave:#fbeae7; --fg-alerta-suave:#faf3e3; --fg-info-suave:#e9f2f9; --fg-painel:#f4f1ea; /* fundo de painel / thead de tabela */ /* acento padrao (verde); as classes .fg-area-* sobrescrevem */ --acento:var(--fg-verde); --acento-esc:var(--fg-verde-esc); --acento-suave:#e8f5ec; /* fundo lavado do acento */ /* raios */ --fg-radius-g:17px; /* card grande / CTA */ --fg-radius-m:14px; /* card comum / icone */ --fg-radius-p:10px; /* input / botao pequeno */ --fg-radius-pill:99px; /* bandeira / badge / chip */ /* sombras — SEMPRE rgba do texto quente (35,31,28), nunca preto puro */ --fg-sombra-suave:0 2px 8px -2px rgba(35,31,28,.10); --fg-sombra-card:0 10px 26px -8px rgba(35,31,28,.35); --fg-sombra-hover:0 14px 30px -8px rgba(35,31,28,.42); --fg-sombra-bandeira:0 1.5px 4px rgba(35,31,28,.25); --fg-anel:0 0 0 1px #e2ddd2; /* tipografia */ --fg-fonte:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } /* ---------- 2. AREAS (lei 2: acento por tela) ---------- */ .fg-area-pedidos{ --acento:var(--fg-verde); --acento-esc:var(--fg-verde-esc); --acento-suave:#e8f5ec; } .fg-area-manutencao{ --acento:var(--fg-vermelho); --acento-esc:var(--fg-vermelho-esc); --acento-suave:#fbeae7; } .fg-area-admin{ --acento:var(--fg-grafite); --acento-esc:var(--fg-grafite-esc); --acento-suave:#e9e7e2; } /* ---------- 3. BASE (body.fg) ---------- */ .fg{ margin:0; font-family:var(--fg-fonte); color:var(--fg-texto); /* fundo texturizado da marca (igual inicio.html) */ background: radial-gradient(1100px 500px at 50% -18%, #fff 0%, rgba(255,255,255,0) 60%), repeating-linear-gradient(-45deg, rgba(26,122,58,.028) 0 26px, rgba(0,0,0,0) 26px 52px), var(--fg-creme); /* 100vh no iPhone e a tela INTEIRA, sem as barras do navegador. Como o Chrome/Safari do celular tem barra em cima e embaixo, isso deixa a pagina uns 150px mais alta do que cabe -- e ela fica SEMPRE rolavel, mesmo com o conteudo curto. Junto com o cabecalho sticky, o efeito e brutal: a pessoa rola sem querer, o cabecalho fica grudado no topo e o comeco do conteudo some ATRAS dele. Foi o que o Pedro viu tres vezes no iPhone dele em 02/08, e o que nenhum teste no computador reproduz (no desktop 100vh == a tela). dvh e a altura VISIVEL de verdade, com as barras descontadas. O 100vh fica antes so como reserva pra navegador velho que nao conhece dvh. */ min-height:100vh; min-height:100dvh; overflow-x:hidden; /* lei 4: body nunca rola de lado */ -webkit-tap-highlight-color:transparent; } .fg *,.fg *::before,.fg *::after{box-sizing:border-box} .fg img{max-width:100%; height:auto} .fg table{max-width:100%} .fg :focus-visible{outline:2px solid var(--acento); outline-offset:2px} /* container central de conteudo */ .fg-wrap{max-width:900px; margin:0 auto; padding:14px} .fg-wrap--estreito{max-width:640px} /* ---------- 4. IDENTIDADE (lei 5) ---------- */ /* faixa tricolor fininha — filha do .fg-header (padrao) */ .fg-tricolor{display:flex; height:5px} .fg-tricolor i{flex:1} .fg-tricolor i:nth-child(1){background:var(--fg-it-verde)} .fg-tricolor i:nth-child(2){background:var(--fg-it-branco)} .fg-tricolor i:nth-child(3){background:var(--fg-it-vermelho)} /* variante fixa de ponta a ponta (estilo inicio.html), se a pagina nao tiver header */ .fg-tricolor--fixa{position:fixed; top:0; left:0; right:0; z-index:60} /* cabecalho padrao: creme + logo + titulo (NUNCA barra solida verde) */ .fg-header{ position:sticky; top:0; z-index:50; background:var(--fg-creme); border-bottom:1.5px solid var(--fg-borda); padding-top:env(safe-area-inset-top, 0px); /* notch do iPhone */ } .fg-header-conteudo{ display:flex; align-items:center; gap:10px; padding:9px 14px; max-width:900px; margin:0 auto; } /* A palavra que vem depois da marca (Gerente, Admin, Inicio...). Ate 02/08/2026 era 14px/900 CAIXA ALTA: o mesmo peso do wordmark, colada nele, disputando a atencao com a propria marca -- o Pedro descreveu como "um formato de texto nada a ver". Agora e um RÓTULO: divisor fino, peso medio, cor apagada de proposito. A marca manda; a palavra so situa. */ .fg-header-titulo{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--fg-sub); white-space:nowrap; padding-left:11px; margin-left:2px; border-left:1.5px solid var(--fg-borda); align-self:stretch; display:flex; align-items:center; } .fg-header-acoes{margin-left:auto; display:flex; gap:8px; align-items:center} /* chip do header (filial / SAIR / links PEDIDOS e ABRIR CHAMADO) */ .fg-header-chip{ font-size:12.5px; font-weight:700; color:var(--fg-texto); background:#fff; border:1.5px solid var(--fg-borda); padding:6px 12px; border-radius:var(--fg-radius-pill); cursor:pointer; letter-spacing:.03em; /* lei 4: toque >= 40px. As margens negativas devolvem os 8px pro layout: o header NAO cresce (a busca sticky do catalogo e calibrada pela altura dele) e o chip continua cabendo dentro do padding de 9px do conteudo */ min-height:40px; margin-top:-4px; margin-bottom:-4px; display:inline-flex; align-items:center; text-decoration:none; /* chip que e nao ganha sublinhado do navegador */ } /* logo real da marca — PNG transparente em alta (Rafael 23/07), sem blend. O seletor e `.fg .fg-logo` de proposito: `.fg img{height:auto}` la em cima tem especificidade (0,1,1) e vencia `.fg-logo{height:26px}` (0,1,0). Por causa disso SEIS arquivos carregavam a mesma linha de remendo (`img.fg-logo{height:26px}`) com o mesmo comentario copiado, e quem criasse uma tela nova sem lembrar dela ganhava uma logo de 235x79 que engolia a busca sticky do catalogo. Consertado na raiz em 02/08/2026. */ .fg .fg-logo{ height:26px; width:auto; display:block; } .fg .fg-logo--grande{height:auto} .fg-logo--grande{height:auto; width:min(360px,86vw); margin:0 auto} /* bandeira pill (detalhe sob a logo, uso opcional) */ .fg-bandeira{ display:flex; height:7px; border-radius:var(--fg-radius-pill); overflow:hidden; box-shadow:var(--fg-sombra-bandeira); } .fg-bandeira i{flex:1} .fg-bandeira i:nth-child(1){background:var(--fg-it-verde)} .fg-bandeira i:nth-child(2){background:var(--fg-it-branco)} .fg-bandeira i:nth-child(3){background:var(--fg-it-vermelho)} /* tres pontinhos — divisor de secao da marca */ .fg-pontinhos{display:flex; gap:9px; justify-content:center; margin:24px 0} .fg-pontinhos i{width:9px; height:9px; border-radius:50%} .fg-pontinhos i:nth-child(1){background:var(--fg-it-verde)} .fg-pontinhos i:nth-child(2){background:#fff; box-shadow:var(--fg-anel)} .fg-pontinhos i:nth-child(3){background:var(--fg-it-vermelho)} /* ---------- 5. CARD ---------- */ .fg-card{ background:#fff; border:1.5px solid var(--fg-borda); border-radius:var(--fg-radius-m); padding:12px 14px; margin-bottom:10px; box-shadow:var(--fg-sombra-suave); } .fg-card--clique{cursor:pointer; transition:border-color .12s ease, box-shadow .12s ease} .fg-card--clique:hover{border-color:var(--acento); box-shadow:var(--fg-sombra-hover)} .fg-card--clique:active{transform:scale(.985)} /* card selecionado / com item no carrinho */ .fg-card--ativo{border-color:var(--acento); background:var(--acento-suave)} /* CTA grande gradiente (estilo inicio.html) — usar pouco */ .fg-card--cta{ border:0; color:#fff; border-radius:var(--fg-radius-g); background:linear-gradient(140deg,#22964a 0%,var(--fg-verde) 45%,var(--fg-verde-esc) 100%); box-shadow:var(--fg-sombra-card); transition:transform .12s ease, box-shadow .12s ease; } .fg-card--cta:active{transform:scale(.965)} .fg-area-manutencao .fg-card--cta{ background:linear-gradient(140deg,#d9503f 0%,var(--fg-vermelho) 45%,var(--fg-vermelho-esc) 100%); } /* ---------- 5b. TOAST: aviso que flutua, nao empurra ---------- Pedido do Pedro (04/08 10:42, grupo TRABALHO): o aviso da contagem entrava no FLUXO do layout e "teleportava" a tela inteira pra baixo ao aparecer — e era vermelho ate quando a noticia era boa ("Ordem salva"). Regra do design a partir daqui: aviso passageiro FLUTUA (fixed, fora do layout) e a cor conta a verdade — verde = deu certo, vermelho = deu errado. Uso: elemento com .fg-toast; JS controla display e poe .fg-toast--ok no sucesso. bottom com folga pros rodapes fixos (fechar contagem, EMITIR). */ .fg-toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(88px + env(safe-area-inset-bottom,0px)); z-index:70; max-width:min(92vw,520px); width:max-content; padding:11px 18px; border-radius:var(--fg-radius-pill); background:var(--fg-erro); color:#fff; font-size:13.5px; font-weight:700; line-height:1.4; text-align:center; box-shadow:0 6px 24px rgba(0,0,0,.22); animation:fg-toast-entra .22s ease} .fg-toast--ok{background:var(--fg-ok)} @keyframes fg-toast-entra{ from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)}} /* ---------- 5c. INPUT DE BUSCA sem enfeite nativo ---------- O iPhone poe fundo, cantos e um X proprios em type=search — era o "quadrado la tras" que o Pedro apontou 2x (04/08 10:50 e 11:05) na lupa da separacao E na busca do catalogo do lider. Mata a decoracao na raiz, pro site inteiro: o desenho do campo e SEMPRE nosso. */ input[type=search]{-webkit-appearance:none; appearance:none} input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration{display:none; -webkit-appearance:none} /* ---------- 6. BOTOES (touch >= 44px) ---------- */ .fg-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 18px; font-family:var(--fg-fonte); font-size:15px; font-weight:800; letter-spacing:.04em; border:0; border-radius:12px; cursor:pointer; background:var(--acento); color:#fff; transition:transform .12s ease, box-shadow .12s ease, background .12s ease; } .fg-btn:active{transform:scale(.965)} .fg-btn:disabled{background:#b3aca0; color:#fff; cursor:default; transform:none} /* botao que e (VOLTAR PRO INICIO, ABRIR DANFE) nao pode vir com o sublinhado do navegador -- ate 02/08 cada tela desligava isso na mao */ a.fg-btn{text-decoration:none} /* variantes */ .fg-btn--bloco{display:flex; width:100%; padding:15px; font-size:16px} .fg-btn--sec{background:#fff; color:var(--acento); border:2px solid var(--acento)} .fg-btn--sec:disabled{border-color:#b3aca0; color:#b3aca0; background:#fff} .fg-btn--perigo{background:var(--fg-erro)} .fg-btn--ok{background:var(--fg-ok)} .fg-btn--info{background:var(--fg-info)} .fg-btn--fantasma{background:none; color:var(--acento); min-height:40px; padding:8px 10px} .fg-btn--mini{min-height:36px; padding:7px 12px; font-size:13px; border-radius:var(--fg-radius-p)} /* ---------- 7. BADGE (status) ---------- */ .fg-badge{ display:inline-block; padding:3px 10px; border-radius:var(--fg-radius-pill); font-size:12px; font-weight:800; letter-spacing:.03em; color:#fff; background:var(--fg-sub); white-space:nowrap; } .fg-badge--verde{background:var(--fg-ok)} .fg-badge--vermelho{background:var(--fg-erro)} .fg-badge--vermelho-esc{background:#7d1010} /* urgencia URGENTE */ .fg-badge--amarelo{background:var(--fg-alerta)} .fg-badge--azul{background:var(--fg-info)} .fg-badge--grafite{background:var(--fg-grafite)} .fg-badge--claro{background:#fff; color:var(--fg-texto); border:1.5px solid var(--fg-borda)} /* ---------- 8. FORMULARIO ---------- */ /* font-size 16px evita zoom automatico do iPhone ao focar */ .fg-input{ display:block; width:100%; min-height:44px; font-family:var(--fg-fonte); font-size:16px; color:var(--fg-texto); padding:11px 12px; background:#fff; border:1.5px solid var(--fg-borda-forte); border-radius:var(--fg-radius-p); } .fg-input:focus{border-color:var(--acento); outline:none; box-shadow:0 0 0 3px rgba(35,31,28,.12); box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent)} select.fg-input{appearance:auto} /* CAMPO DE PIN. Reclamacao do Pedro (02/08, print do iPhone): "essas bolas pretas ficaram desproporcionais". Num campo de largura inteira, 4 bolinhas grandes ficam amontoadas num canto e o resto e vazio -- parece defeito. Aqui ele vira o que e: um teclado de PIN. Estreito, centralizado, com as marcas espacadas. E tabular-nums pra digito nao dancar de largura. */ /* O CAMPO DO PIN. Ate 02/08 ele era `max-width:230px; margin:0 auto` -- uma ilha estreita e centralizada entre um rotulo alinhado a esquerda e um botao ENTRAR de ponta a ponta. Pedro: "seu pin ta estranho ali com a caixa de texto estando no meio". Estava mesmo: tres elementos empilhados, tres larguras diferentes. Agora acompanha o botao. E NAO tem mais placeholder. Eram quatro asteriscos, e asterisco senta no ALTO da linha -- no iPhone virou uma fileira de bolinhas pretas descolada do centro do campo ("essas bolas pretas ficaram desproporcionais no pin"). Nao se conserta com tamanho: o glifo e alto por desenho. E o placeholder nao fazia falta nenhuma, porque o rotulo LOGO ACIMA ja diz SEU PIN e os digitos ja saem mascarados sozinhos no type=password. */ .fg-input--pin{ width:100%; text-align:center; letter-spacing:.42em; text-indent:.42em; font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; min-height:56px; padding:10px 12px; } textarea.fg-input{min-height:64px; resize:vertical} /* rotulo + campo (cada informacao UMA vez: rotulo curto, sem repetir no hint) */ .fg-campo{margin-bottom:14px} /* JA PEGUEI NO CD (24/08/2026) -- alvo de dedo grande: quem lanca isso esta em pe na loja, com o celular numa mao e a caixa na outra. */ .ret-linha{display:flex;align-items:center;gap:12px;cursor:pointer; padding:14px 12px;border:2px solid var(--linha,#d8d2c9);border-radius:12px; font-weight:700;line-height:1.25} .ret-linha input{width:26px;height:26px;flex:0 0 auto} .ret-ajuda{font-size:13px;opacity:.72;margin-top:8px;line-height:1.35} .fg-campo label{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-sub); margin-bottom:6px; } .fg-hint{font-size:12px; color:var(--fg-sub); margin-top:4px} /* ---------- 9. MENSAGENS ---------- */ .fg-msg{border-radius:var(--fg-radius-p); padding:10px 12px; font-size:13.5px; margin:10px 0; border:1.5px solid var(--fg-borda); background:#fff} .fg-msg--erro{border-color:var(--fg-erro); color:var(--fg-erro); background:#fbeae7; font-weight:700} .fg-msg--ok{border-color:var(--fg-ok); background:#e8f5ec} .fg-msg--alerta{border-color:var(--fg-alerta); background:#faf3e3} /* ---------- 10. TABELA -> CARDS (mobile first) ---------- */ /* No celular vira cards empilhados; cada | PRECISA de
data-rotulo="NOME DA COLUNA". Em tela >=700px vira tabela normal. */
.fg-tabela-cards{width:100%; border-collapse:collapse; font-size:13px}
.fg-tabela-cards thead{display:none}
.fg-tabela-cards,
.fg-tabela-cards tbody,
.fg-tabela-cards tr,
.fg-tabela-cards td{display:block; width:100%}
.fg-tabela-cards tr{
background:#fff; border:1.5px solid var(--fg-borda);
border-radius:var(--fg-radius-m); padding:10px 12px; margin-bottom:8px;
}
.fg-tabela-cards td{
border:0; padding:3px 0;
display:flex; justify-content:space-between; align-items:baseline; gap:12px;
overflow-wrap:anywhere;
}
.fg-tabela-cards td::before{
content:attr(data-rotulo);
font-size:11px; font-weight:800; letter-spacing:.05em;
color:var(--fg-sub); flex:none;
}
.fg-tabela-cards td:not([data-rotulo])::before{content:none}
@media (min-width:700px){
.fg-tabela-cards{display:table; background:#fff;
border:1.5px solid var(--fg-borda); border-radius:var(--fg-radius-p); overflow:hidden}
.fg-tabela-cards thead{display:table-header-group}
.fg-tabela-cards tbody{display:table-row-group}
.fg-tabela-cards tr{display:table-row; border:0; border-radius:0; padding:0; margin:0}
.fg-tabela-cards td{display:table-cell; width:auto;
border-bottom:1px solid var(--fg-borda); padding:7px 9px}
.fg-tabela-cards td::before{content:none}
.fg-tabela-cards th{border-bottom:1px solid var(--fg-borda); padding:7px 9px;
text-align:left; background:#f4f1ea; font-size:11px; letter-spacing:.05em}
}
/* ---------- 11. RODAPE FIXO (lei 4) ---------- */
/* Uso: conteudo termina com
e a barra fica em ...botoes... */
.fg-rodape-fixo{
position:fixed; left:0; right:0; bottom:0; z-index:40;
background:#fff; border-top:1.5px solid var(--fg-borda);
padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}
.fg-rodape-fixo .fg-rodape-linha{max-width:900px; margin:0 auto; display:flex; gap:10px}
.fg-rodape-fixo .fg-btn{flex:1; margin:0}
/* espacador: garante que a barra nunca cubra o fim do conteudo */
.fg-rodape-espaco{height:calc(80px + env(safe-area-inset-bottom, 0px))}
/* ---------- 12. UTILITARIOS ANTI-OVERFLOW ---------- */
/* wrapper de rolagem lateral para conteudo largo (tabela desktop, pre, etc) */
.fg-rolagem-x{overflow-x:auto; max-width:100%; -webkit-overflow-scrolling:touch}
/* quebra palavras longas (NOME_TAKEAT gigante, urls) */
.fg-quebra{overflow-wrap:anywhere; word-break:break-word}
/* esconder acessivel (rotulos so pra leitor de tela) */
.fg-so-leitor{position:absolute; width:1px; height:1px; overflow:hidden;
clip:rect(0 0 0 0); white-space:nowrap}
/* ---------- 13. LINHA DE ESCOLHA (.fg-opcao) ----------
O menu do site inteiro e sempre o MESMO gesto: icone quadrado + titulo +
subtitulo + seta. Tres arquivos descobriram isso sozinhos e implementaram
tres vezes com nomes diferentes (.opcao no inicio.html, .menu-op no
index.html, .area no gerente.html), com tamanhos que nao batiam. Batizado
aqui em 02/08/2026, quando a porta de entrada passou a montar o menu de
TODO MUNDO — sem um nome so, a colcha de retalho voltava pela porta nova.
Duas variantes: a clara (padrao, card branco) e a --cta (gradiente do
acento, pra UMA acao principal por tela). O estado --breve e a forma
honesta de mostrar o que ainda nao foi construido (veio do gerente.html). */
/* cor EXPLICITA, nao `inherit`: com inherit, um .fg-opcao que tambem e
.fg-card--cta (o cartao verde) puxava a tinta escura do body por cima do
branco do CTA -- as duas classes vivem no mesmo elemento e esta vem depois
na folha. O titulo saia preto sobre o gradiente verde. */
.fg-opcao{display:flex; align-items:center; gap:14px; text-align:left;
text-decoration:none; color:var(--fg-texto); width:100%}
.fg-card--cta.fg-opcao{color:#fff}
.fg-opcao .fg-opcao-ic{
width:52px; height:52px; flex:none; border-radius:var(--fg-radius-m);
background:var(--acento-suave); display:flex; align-items:center;
justify-content:center; font-size:24px; line-height:1;
}
/* icone DESENHADO (icones.js), nao emoji. 02/08/2026, pedido do Pedro:
"faz artes com o caracter da empresa, deixa profissional".
currentColor e o que faz o mesmo desenho sair branco no cartao verde e
grafite no cartao claro -- um arquivo so, sem variante por fundo. */
.fg-opcao .fg-opcao-ic svg{width:26px; height:26px; display:block}
.fg-card--cta.fg-opcao .fg-opcao-ic svg{stroke-width:1.6}
.fg-opcao .fg-opcao-txt{min-width:0} /* deixa o texto encolher no celular */
.fg-opcao .fg-opcao-tit{display:block; font-size:16.5px; font-weight:900;
letter-spacing:.04em}
.fg-opcao .fg-opcao-sub{display:block; font-size:12.5px; color:var(--fg-sub);
margin-top:4px; line-height:1.45}
.fg-opcao .fg-opcao-seta{margin-left:auto; padding-left:8px; font-size:20px;
color:var(--fg-sub); flex:none}
/* A SETA ESTAVA INVISIVEL (medido em 26/08/2026, no navegador: 0x0 px).
O `font-size:20px` acima e da epoca em que a seta era o glifo "→" digitado
no HTML. Quando ela virou DESENHO (icones.js, 02/08) ninguem escreveu a
regra irma da linha 511 (`.fg-opcao-ic svg{width:26px;height:26px}`): um
|