/* ══════════════════════════════════════════════════════════════════════════════ A FOLHA COMPARTILHADA DAS PÁGINAS DE RAMO (11/09/2026) ═══ POR QUE ESTE ARQUIVO PODE EXISTIR, SE A HOME PROÍBE ARQUIVO EXTERNO ═══ A regra do `index.html` continua valendo e está escrita lá: a RAIZ deste domínio é dividida com o aplicativo Angular, e um `/estilo.css` solto na raiz seria pedido em `/`, cairia no `location /` do Angular e voltaria como o index dele — sem erro nenhum, só sem estilo. `/site/` é outra história: ele tem BLOCO PRÓPRIO nos dois nginx (o do contêiner do site e o `docker/nginx/production.conf`), e `servir-local.mjs` faz o mesmo recorte. Um arquivo aqui não disputa caminho com rota nenhuma do aplicativo. ═══ E POR QUE A HOME NÃO PASSOU A USAR ESTA FOLHA ═══ Porque a home é a primeira impressão, lida no 4G do salão, e o CSS embutido pinta no primeiro quadro sem uma segunda requisição — a mesma razão que tirou as fontes do Google de lá. As duas páginas de ramo são um SEGUNDO clique: quem chega nelas já baixou o HTML da home e já está na conexão. Elas podem pagar uma requisição; a home, não. O CUSTO DESSA DECISÃO, dito sem maquiagem: o CSS existe em dois lugares — embutido no `index.html` e aqui. Mexeu no desenho de um componente que as três páginas usam (`.modulo`, `.cartaz`, `.faq`, `.ramo`), mexa nos dois. O que NÃO está duplicado é o conteúdo, que era o problema real. ══════════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════════ +Frella — site institucional ARQUIVO ÚNICO, E É DE PROPÓSITO. Este site divide o domínio com o aplicativo: ele responde só em `/`, e todo o resto de `www.maisfrella.com.br` é do Angular. Um `/style.css` daqui cairia no roteador do app e voltaria como o index dele. Sem arquivo externo, não existe caminho para colidir. As cores são as MESMAS do aplicativo (src/tokens.scss): laranja da marca para a área do TRABALHADOR, marinho do "+" para a área da EMPRESA. É a mesma divisão que o app faz por dentro, e ela vira o código de cor das duas abas daqui. ══════════════════════════════════════════════════════════════════════════════ */ :root{ --laranja:#ee7a1e; --laranja-forte:#a8500a; --laranja-escuro:#d6690f; --marinho:#2b3a80; --marinho-fundo:#1b2450; --tinta:#17191f; --tinta-suave:#5d5852; --creme:#f7f6f3; --creme-fundo:#f2f1ee; --papel:#fbfcfc; --borda:rgba(23,25,31,.14); --borda-forte:rgba(23,25,31,.30); --verde:#2f6d57; --sombra:0 16px 34px rgba(24,22,19,.10); --sombra-alta:0 28px 64px rgba(24,22,19,.16); /* A PILHA DO SISTEMA, e não uma fonte baixada — ver a nota no sobre por que a página deixou de pedir fontes ao Google. O peso e o espaçamento negativo é que fazem o papel de "fonte de display" aqui; a família é a mesma. */ --fonte:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --display:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --limite:1180px; /* A COR DO PÚBLICO ATIVO. Um token só, trocado no pelo seletor de aba: tudo o que é acento (botão, olho de seção, marcador, fita do plano) segue este valor, e nenhuma regra precisa saber qual aba está aberta. */ --acento:var(--marinho); --acento-forte:#22307a; --acento-suave:rgba(43,58,128,.12); --acento-sombra:rgba(43,58,128,.28); } body[data-publico="trabalhador"]{ --acento:var(--laranja); --acento-forte:var(--laranja-forte); --acento-suave:rgba(238,122,30,.13); --acento-sombra:rgba(238,122,30,.32); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;font-family:var(--fonte);color:var(--tinta);background:var(--creme-fundo); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit} .limite{width:100%;max-width:var(--limite);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)} /* ── Cabeçalho ───────────────────────────────────────────────────────────── */ .topo{ position:sticky;top:0;z-index:40;background:rgba(247,246,243,.88); backdrop-filter:blur(12px);border-bottom:1px solid transparent; transition:border-color .2s ease, box-shadow .2s ease; } .topo[data-rolado="sim"]{border-bottom-color:var(--borda);box-shadow:0 6px 20px rgba(24,22,19,.05)} .topo__linha{display:flex;align-items:center;gap:1rem;min-height:70px} .marca{display:inline-flex;align-items:center;text-decoration:none} /* A MARCA É UMA IMAGEM, e não mais um SVG com o nome escrito ao lado (25/09/2026). É a mesma `frella-logo-compact.png` que o aplicativo usa, copiada para cá: o site roda em contêiner próprio e NÃO enxerga `frontend/` — apontar para lá funciona no gateway local e dá 404 depois do deploy. A altura é fixada pelo CSS e a largura acompanha; o `width`/`height` do são os do arquivo, e servem para o navegador reservar o espaço antes de baixar. A 34px de altura ela ocupa ~108px de largura — MENOS que o desenho antigo (34px de ícone, o intervalo e o nome em 1.3rem), então o menu do cabeçalho não foi empurrado em tela estreita. */ .marca img{height:30px;width:auto;display:block} @media (min-width:620px){.marca img{height:34px}} /* No rodapé, que é marinho escuro, o "+" marinho da marca desapareceria no fundo. Marca monocromática branca é o uso de sempre nesse caso, e mantém o desenho reconhecível. */ .rodape .marca img{filter:brightness(0) invert(1)} /* ═══ O ALVO DE TOQUE DO MENU (11/09/2026) ═══ Os itens tinham a altura do texto — vinte e quatro pixels —, e vinte e quatro pixels é menos da metade do que um polegar acerta. O menu do topo só aparece a partir de `44rem`, então o alvo pequeno atingia principalmente tablet e o toque em telas híbridas, que é onde ninguém testa. `align-items:center` no flex do menu é o que mantém a linha visualmente igual à de antes: a caixa cresce para os 44px e o texto continua onde estava. O `gap` não mudou, então o desenho é o mesmo e o que cresceu é só a área clicável. */ .topo__menu{display:none;margin-left:auto;align-items:center;gap:1.6rem;font-size:.95rem;font-weight:500} .topo__menu a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--tinta-suave);transition:color .15s} .topo__menu a:hover{color:var(--acento-forte)} .topo__acoes{margin-left:auto;display:flex;align-items:center;gap:.6rem} @media(min-width:920px){.topo__menu{display:flex}.topo__acoes{margin-left:1.8rem}} /* ── Botões ──────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--fonte);font-weight:600;font-size:1rem; padding:.78rem 1.4rem;border-radius:.9rem;border:1px solid transparent; text-decoration:none;cursor:pointer;white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .btn:active{transform:translateY(1px)} .btn--principal{background:var(--acento);color:#fff;box-shadow:0 10px 24px var(--acento-sombra)} .btn--principal:hover{background:var(--acento-forte)} .btn--contorno{background:var(--papel);color:var(--tinta);border-color:var(--borda-forte)} .btn--contorno:hover{border-color:var(--acento);color:var(--acento-forte)} .btn--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)} .btn--fantasma:hover{background:rgba(255,255,255,.12)} .btn--g{font-size:1.06rem;padding:1rem 1.7rem;border-radius:1rem} /* `min-height` e não mais padding sozinho: o botão media 43px, um pixel abaixo do alvo mínimo. */ .btn--p{font-size:.9rem;padding:.55rem 1rem;min-height:44px} /* ══ O SELETOR DE PÚBLICO ════════════════════════════════════════════════════ Duas abas de verdade (role="tablist"), com seta do teclado e endereço próprio (#empresa / #trabalhador) para o link ser compartilhável. */ /* ══ O TOPO COMO UMA PEÇA SÓ (27/08/2026) ═══ O cabeçalho é creme translúcido; o corpo é creme-fundo, um tom mais escuro. A faixa das abas, presa entre os dois, herdava o corpo e aparecia como um DEGRAU DE COR logo abaixo do logotipo — a primeira coisa que se vê na página, e a que mais parecia inacabada. Agora a faixa continua o creme do cabeçalho, e o hero desce desse creme até o fundo do corpo sem emenda. */ .publico{padding:1.4rem 0 .2rem;background:var(--creme)} /* AS ABAS PRECISAVAM DE UMA FRASE. Duas pílulas soltas no alto de uma página de venda parecem um filtro; com a chamada em cima elas viram a primeira pergunta que a página faz — e dizem, sem gastar uma linha, que o produto tem dois lados. */ .publico__chamada{ margin:0 0 .85rem;text-align:center;font-size:.88rem;font-weight:500; color:var(--tinta-suave); } .publico__chamada b{color:var(--tinta);font-weight:700} .publico__caixa{ display:flex;gap:.35rem;padding:.35rem;margin-inline:auto;width:max-content;max-width:100%; background:var(--papel);border:1px solid var(--borda);border-radius:1.15rem;box-shadow:var(--sombra); } .publico__aba{ display:flex;align-items:center;gap:.5rem;border:0;cursor:pointer; font-family:var(--fonte);font-size:.99rem;font-weight:600;color:var(--tinta-suave); background:transparent;padding:.7rem 1.25rem;border-radius:.85rem; transition:background .18s ease,color .18s ease;white-space:nowrap; } .publico__aba svg{width:19px;height:19px;flex:none} /* O RÓTULO EM DUAS LINHAS, na aba da empresa. "Tenho um estabelecimento" é quase o dobro de "Quero trabalhar", e numa linha só ela empurrava a vizinha para fora da pílula em tela estreita — a segunda aba ficava cortada justamente na hora de escolher entre as duas. ALINHADO À ESQUERDA: com o ícone à esquerda e duas linhas de comprimentos diferentes, centralizar deixaria a segunda linha flutuando longe do ícone. ENTRELINHA CURTA para a pílula não engordar: são duas linhas de texto curto, e o respiro padrão somaria altura sem ganhar leitura. */ .publico__aba-rotulo{text-align:left;line-height:1.18} .publico__aba:hover{color:var(--tinta)} .publico__aba[aria-selected="true"]{color:#fff} #aba-empresa[aria-selected="true"]{background:var(--marinho);box-shadow:0 8px 18px rgba(43,58,128,.28)} #aba-trabalhador[aria-selected="true"]{background:var(--laranja);box-shadow:0 8px 18px rgba(238,122,30,.30)} @media(max-width:480px){.publico__aba{padding:.65rem .8rem;font-size:.9rem}} [data-painel][hidden]{display:none} /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero{ position:relative;padding:clamp(2rem,5vw,3.5rem) 0 clamp(2.6rem,6vw,4.5rem);overflow:hidden; /* A descida do creme do topo até o fundo do corpo — ver a nota de `.publico`. */ background:linear-gradient(var(--creme),var(--creme-fundo) 46%); } .hero::before{ content:'';position:absolute;inset:0 -10% auto -10%;height:78%;pointer-events:none; background:radial-gradient(58% 62% at 20% 46%,var(--acento-suave),transparent 70%), radial-gradient(50% 52% at 86% 20%,rgba(238,122,30,.10),transparent 70%); /* A MÁSCARA EXISTE POR CAUSA DO `overflow:hidden`. O brilho ia até 30% ACIMA do hero e era cortado a prumo na borda de cima — e o corte aparecia como um risco de cor logo abaixo das abas, justamente a emenda que o creme do `.publico` existe para apagar. Com a máscara ele nasce transparente e só ganha força depois de entrar na seção. */ -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24%); mask-image:linear-gradient(to bottom,transparent,#000 24%); } .hero__grade{position:relative;display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center} @media(min-width:1000px){.hero__grade{grid-template-columns:1.05fr .95fr}} .selo{ display:inline-flex;align-items:center;gap:.5rem;background:rgba(47,109,87,.12);color:var(--verde); border:1px solid rgba(47,109,87,.28);padding:.42rem .9rem;border-radius:999px; font-size:.86rem;font-weight:600;margin-bottom:1.2rem; } /* ═══ POR QUE O TÍTULO DA ABA DO TRABALHADOR NÃO É UM

═══ Os dois painéis são duas VISTAS do mesmo documento, e um documento tem um

. Os dois já existiram, e o segundo só não aparecia em auditoria porque o painel escondido some da árvore de acessibilidade — o que é sorte, não estrutura. O

ficou com o painel da empresa, que é o padrão e o que o buscador indexa; o herói do trabalhador é um

com exatamente o mesmo desenho. Mudar de tag não mudou um pixel, e é por isso que a regra abaixo vale para os dois. / h1,.herotitulo{font-family:var(--display);font-weight:700;font-size:clamp(2rem,5.2vw,3.5rem);line-height:1.08;letter-spacing:-.025em;margin:0 0 1.1rem} h1 em,.herotitulo em{font-style:normal;color:var(--acento-forte)} .herotexto{font-size:clamp(1.03rem,2vw,1.2rem);color:var(--tinta-suave);margin:0 0 1.9rem;max-width:40ch} .heroacoes{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:1.1rem} / NO CELULAR OS DOIS BOTÕES TÊM A MESMA LARGURA. Lado a lado eles se medem pelo texto; empilhados, isso vira uma escada — "Experimentar por 10 dias" largo, "Criar meu perfil" curto — justamente no lugar da tela em que a pessoa decide. / @media(max-width:560px){ .heroacoes{display:grid;grid-template-columns:1fr;gap:.7rem} .heroacoes .btn{width:100%} } .heronota{font-size:.9rem;color:var(--tinta-suave);display:flex;align-items:center;gap:.45rem} .heronota svg{width:17px;height:17px;flex:none;color:var(--verde)} / ── Mockup ──────────────────────────────────────────────────────────────── / .aparelho{ position:relative;margin-inline:auto;width:min(330px,84vw);border-radius:2.6rem;padding:.75rem; background:linear-gradient(160deg,#2f3846,#161a21); box-shadow:var(--sombra-alta),0 0 0 1px rgba(255,255,255,.06) inset; } .aparelho::after{content:'';position:absolute;top:1.15rem;left:50%;transform:translateX(-50%);width:34%;height:1.1rem;border-radius:999px;background:#161a21;z-index:2} .tela{background:var(--creme-fundo);border-radius:2rem;overflow:hidden;padding:2.1rem .8rem 1rem} .telabarra{display:flex;align-items:center;justify-content:space-between;padding:0 .3rem .7rem;font-size:.72rem;color:var(--tinta-suave);font-weight:600} .cartao{background:var(--papel);border:1px solid var(--borda);border-radius:1rem;padding:.75rem .8rem;margin-bottom:.6rem;box-shadow:0 6px 14px rgba(24,22,19,.05)} .cartao--verde{background:rgba(47,109,87,.10);border-color:rgba(47,109,87,.30)} .cartao--laranja{background:rgba(238,122,30,.10);border-color:rgba(238,122,30,.32)} .cartaorotulo{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-suave);font-weight:700;margin-bottom:.2rem} .cartaovalor{font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em} .cartaovalor small{font-size:.82rem;font-weight:600;color:var(--tinta-suave)} .linha{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.83rem;padding:.42rem 0;border-bottom:1px dashed var(--borda)} .linha:last-child{border-bottom:0} .linha b{font-weight:600} .valor-oculto{filter:blur(5px);opacity:.55;user-select:none;-webkit-user-select:none;pointer-events:none;white-space:nowrap} .etiqueta{font-size:.66rem;font-weight:700;padding:.15rem .45rem;border-radius:.45rem} .etiqueta--cozinha{background:rgba(183,122,27,.18);color:#8a5b12} .etiqueta--entregue{background:rgba(47,109,87,.16);color:var(--verde)} .etiqueta--rota{background:rgba(238,122,30,.16);color:var(--laranja-forte)} .etiqueta--nota{background:rgba(43,58,128,.14);color:var(--marinho)} .abas{display:flex;gap:.3rem;padding:.5rem .1rem .2rem;font-size:.68rem;font-weight:600;color:var(--tinta-suave)} .abas span{padding:.25rem .4rem;border-radius:.4rem} .abas span[data-ativa]{background:var(--acento);color:#fff} / ── Faixa ───────────────────────────────────────────────────────────────── / .faixa{background:var(--marinho-fundo);color:#eef0f7;padding:clamp(2rem,4vw,2.6rem) 0} body[data-publico="trabalhador"] .faixa{background:#2a1a0e} .faixagrade{display:grid;gap:1.4rem;grid-template-columns:repeat(2,1fr);text-align:center} @media(min-width:820px){.faixagrade{grid-template-columns:repeat(4,1fr)}} .faixan{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.2vw,2.2rem);color:#fff;letter-spacing:-.02em;display:block} .faixat{font-size:.87rem;color:rgba(238,240,247,.72);line-height:1.35} / ── Seções ──────────────────────────────────────────────────────────────── / section{scroll-margin-top:80px} .secao{padding:clamp(2.6rem,6vw,5rem) 0} .secao--papel{background:var(--creme)} .secaotopo{max-width:58ch;margin:0 auto clamp(1.8rem,4vw,2.8rem);text-align:center} .olho{font-size:.8rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--acento-forte);margin:0 0 .7rem} h2{font-family:var(--display);font-weight:700;font-size:clamp(1.65rem,3.4vw,2.4rem);line-height:1.16;letter-spacing:-.022em;margin:0 0 .8rem} .secaotopo p{color:var(--tinta-suave);margin:0;font-size:1.05rem} / ── Cards de módulo / benefício ─────────────────────────────────────────── / / ══ "COMECE POR AQUI" — O MAPA DE CADA PÚBLICO (TARIFA-QR, 25/08/2026) ═══════════════════════ Logo abaixo das abas, antes de qualquer argumento de venda. ═══ POR QUE UM DESENHO, E NÃO MAIS UM BLOCO DE TEXTO ═══ Quem cai aqui não sabe o que o produto FAZ — sabe no máximo o que ele promete. Uma lista de módulos responde "o que tem"; só o desenho responde "como isso funciona junto", que é a pergunta que decide. Um dono de bar entende a operação inteira em oito segundos de figura e não entenderia em oito parágrafos. ═══ E POR QUE UM POR ABA ═══ São dois produtos. O mapa da empresa vai do cliente sentando à mesa até o dinheiro no caixa; o do trabalhador vai do cadastro ao pagamento. Um desenho só, servindo aos dois, teria de ser genérico — e mapa genérico não ensina ninguém. ═══ SVG NO HTML, SEM IMAGEM ═══ O texto do desenho é texto DE VERDADE: o buscador lê, o leitor de tela lê, e ele acompanha o tema sem uma segunda versão para o modo escuro. Uma imagem seria mais um arquivo para carregar e um `alt` para desatualizar. / .mapa{padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(1rem,2vw,1.6rem)} .mapaquadro{ background:var(--papel);border:1px solid var(--borda);border-radius:1.5rem; padding:clamp(1.2rem,3.5vw,2.2rem);box-shadow:var(--sombra); } .mapasvg{display:block;width:100%;height:auto;max-width:920px;margin-inline:auto} / ══ O DESENHO NO CELULAR — A VERSÃO EM PÉ (27/08/2026) ══════════════════════════════════════ O mapa tem 900 unidades de largura e é DEITADO: o percurso corre da esquerda para a direita. Espremido em 350px de tela o texto de 11px vira 4px, ilegível — e o desenho existe justamente para ser lido de relance. ═══ O QUE ISTO ERA, E POR QUE MUDOU ═══ Era ROLAGEM LATERAL: abaixo de 60rem o quadro guardava 720px de largura mínima e o celular arrastava o desenho para o lado, com uma dica escrita embaixo. Funcionava no sentido estrito de "dá para ver tudo", e falhava no que importa: metade do mapa nascia FORA DA TELA. Um desenho que apresenta o produto a quem chegou agora não pode depender de a pessoa descobrir que ele continua à direita — quem não arrastava saía achando que a +Frella são três caixinhas. ═══ E POR QUE NÃO É UM SEGUNDO DESENHO ═══ A objeção contra empilhar sempre foi boa: uma versão em pé escrita à mão seria um SEGUNDO desenho para manter, e no dia em que um mudasse o outro mentiria em silêncio. Ela cai porque esta versão não é escrita — é MONTADA a partir do próprio SVG, em tempo de carga (ver `empilharMapas()` no fim da página). Cada `g.mapacaixa` vira um cartão e cada `text.mapaetapa` vira o título de um grupo, na ordem do documento. Caixa nova no desenho aparece nos dois lugares sem ninguém lembrar de nada; texto corrigido, corrigido nos dois. Continua existindo UMA fonte, e ela é o SVG. ═══ E SEM JAVASCRIPT ═══ A regra base continua sendo a rolagem lateral, com a dica — é o que se vê enquanto a montagem não aconteceu, e o que fica se ela nunca acontecer. Só quando o script termina o quadro ganha `--empilhado`, e aí o deitado sai de cena. Nada some antes de haver substituto. QUEM ROLA É O QUADRO, NUNCA A PÁGINA: sem o `overflow-x:auto` aqui, os 720px vazariam para o `body` e o site inteiro passaria a deslizar horizontalmente. / / A DICA NASCE ESCONDIDA, E A REGRA BASE VEM ANTES DA MEDIA QUERY. Escrita depois, ela vencia por ordem — mesma especificidade — e a dica ficava invisível justamente na largura em que ela existe para aparecer. / .mapadica{ display:none;margin:.2rem 0 0;text-align:center; font-size:.78rem;color:var(--tinta-suave) } .mapapilha{display:none;margin:0;padding:0;list-style:none} @media (max-width:60rem){ .maparolagem{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.6rem} .maparolagem .mapasvg{min-width:720px} / A DICA SÓ APARECE ONDE HÁ O QUE ROLAR. No monitor ela seria uma instrução falsa. / .mapadica{display:block} / Montada a versão em pé, o desenho deitado e a dica de arrastar saem juntos. / .mapaquadro--empilhado .maparolagem, .mapaquadro--empilhado .mapadica{display:none} .mapaquadro--empilhado .mapapilha{display:block} } / ── OS CARTÕES DA VERSÃO EM PÉ ─────────────────────────────────────────────────────────────── O percurso vira uma coluna de ETAPAS NUMERADAS, ligadas por um trilho. O número não é enfeite: deitado, quem conta a ordem é a linha que sai de uma caixa e entra na outra; em pé, sem número, quatro grupos viram quatro listas soltas. DENTRO de um grupo os cartões não têm seta entre si, e é o mapa dizendo a verdade: as três portas de entrada são ALTERNATIVAS, e os quatro módulos que se mexem sozinhos acontecem JUNTOS. Uma seta ali ensinaria uma fila que não existe. O que é sequência é a passagem de um grupo para o próximo, e é exatamente onde o trilho está. / / O TRILHO NÃO É MAIS CSS. Ele virou um SVG desenhado por cima da coluna, com setas e chevrons — ver `desenharFios()` no fim da página. Uma borda de CSS dá uma linha; não dá seta, não dá convergência de três caixas numa só, e não sabe onde cada cartão começa e termina. / .mapapilha{position:relative} .mapafios{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} .mapafio{fill:none;stroke:var(--borda-forte);stroke-width:1.8;stroke-linecap:round} .mapafio--seta{fill:var(--borda-forte);stroke:none} .mapaetapa-bloco{position:relative;padding-left:2.5rem} .mapaetapa-bloco + .mapaetapa-bloco{margin-top:1.5rem} / O QUE NÃO É PARTE DO FLUXO SE AFASTA E PERDE O TRILHO: vagas e preço não acontecem "depois" de nada, e ligá-los na linha ensinaria uma ordem que não existe. / .mapaetapa-bloco[data-arranjo="solto"]{margin-top:2rem} .mapaetapa-bloco[data-arranjo="solto"] .mapaetapa-num{ background:transparent;color:var(--tinta-suave);border:1.5px dashed var(--borda-forte); } .mapaetapa-titulo{ position:relative;margin:0 0 .6rem;font-size:.76rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--acento-forte);line-height:1.35; } .mapaetapa-num{ position:absolute;left:-2.5rem;top:-.06rem;width:1.45rem;height:1.45rem;border-radius:50%; background:var(--acento);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:0; display:flex;align-items:center;justify-content:center; } / O VÃO ENTRE CARTÕES É ONDE O CHEVRON CABE. Com .55rem o "então" ficava colado nas bordas e o desenho voltava a parecer lista. / .mapacartoes{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none} .mapaetapa-bloco[data-arranjo="alternativas"] .mapacartoes, .mapaetapa-bloco[data-arranjo="paralelo"] .mapacartoes, .mapaetapa-bloco[data-arranjo="solto"] .mapacartoes{gap:.55rem} .mapacartao{ position:relative;z-index:1; background:var(--papel);border:1.4px solid var(--borda-forte); border-radius:.85rem;padding:.65rem .8rem; } .mapacartao--fora{background:#f1f0ed;border-color:rgba(23,25,31,.22)} .mapacartao--nos{background:var(--acento-suave);border-color:var(--acento)} .mapacartao--dinheiro{background:rgba(47,109,87,.13);border-color:var(--verde)} .mapacartao--decisao{background:rgba(238,168,30,.16);border-color:#c07d12;border-width:2px} .mapacartao-modulo{ margin:0 0 .12rem;font-size:.66rem;font-weight:700;letter-spacing:.09em; text-transform:uppercase;color:var(--tinta-suave); } .mapacartao-titulo{ margin:0;font-family:var(--display);font-size:1rem;font-weight:700; line-height:1.25;letter-spacing:-.01em; } .mapacartao-nota{margin:.22rem 0 0;font-size:.86rem;line-height:1.4;color:var(--tinta-suave)} .mapacartao-forte{ margin:.12rem 0 0;font-family:var(--display);font-size:.98rem;font-weight:700; color:var(--verde);line-height:1.3; } / AS CAIXAS DO DESENHO. Quatro papéis, quatro cores — e a leitura é essa: cinza é quem chega de fora, o acento é o que a +Frella faz, verde é dinheiro, âmbar é a decisão que fica com a empresa. / .mapacaixa rect{fill:var(--papel);stroke:var(--borda-forte);stroke-width:1.4} .mapacaixa--fora rect{fill:#f1f0ed;stroke:rgba(23,25,31,.22)} .mapacaixa--nos rect{fill:var(--acento-suave);stroke:var(--acento)} .mapacaixa--dinheiro rect{fill:rgba(47,109,87,.13);stroke:var(--verde)} .mapacaixa--decisao rect{fill:rgba(238,168,30,.16);stroke:#c07d12;stroke-width:2.2} .mapatitulo{font-family:var(--display);font-size:13.5px;font-weight:700;fill:var(--tinta);text-anchor:middle} .mapanota{font-size:11px;fill:var(--tinta-suave);text-anchor:middle} / O SELO DO MÓDULO (26/08/2026) — cada caixa passa a dizer ONDE aquilo acontece. O desenho contava um fluxo bonito e não dizia o nome de nada: quem lia entendia a operação e saía sem saber que "Cozinha" e "Caixa" são telas com nome, que ele vai procurar depois. Maiúsculo e pequeno de propósito — é etiqueta, não título, e não pode competir com a frase da caixa. / .mapamodulo{font-size:8.5px;font-weight:700;letter-spacing:.09em;text-anchor:middle; fill:var(--tinta-suave);text-transform:uppercase} .mapaforte{font-size:13px;font-weight:700;fill:var(--verde);text-anchor:middle} .mapaetapa{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;fill:var(--acento-forte);text-anchor:middle} .mapalinha{stroke:var(--borda-forte);stroke-width:1.6;fill:none} .mapalinha--tracejada{stroke-dasharray:5 4} / A LEGENDA EMBAIXO, e não dentro do desenho: dentro, ela disputaria espaço com os nós justamente na largura em que o desenho já está apertado. / .mapalegenda{ display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.4rem; margin:1.1rem 0 0;padding:0;list-style:none;font-size:.82rem;color:var(--tinta-suave) } .mapalegenda li{display:inline-flex;align-items:center;gap:.4rem} .mapabolinha{width:.7rem;height:.7rem;border-radius:.25rem;border:1.4px solid var(--borda-forte);background:#f1f0ed} .mapabolinha--nos{background:var(--acento-suave);border-color:var(--acento)} .mapabolinha--dinheiro{background:rgba(47,109,87,.13);border-color:var(--verde)} .mapabolinha--decisao{background:rgba(238,168,30,.16);border-color:#c07d12} .modulos{display:grid;gap:1.1rem;grid-template-columns:1fr} @media(min-width:680px){.modulos{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.modulos{grid-template-columns:repeat(3,1fr)}} .modulo{background:var(--papel);border:1px solid var(--borda);border-radius:1.25rem;padding:1.5rem 1.4rem;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .modulo:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--acento)} .moduloicone{width:46px;height:46px;border-radius:.85rem;display:grid;place-items:center;background:var(--acento-suave);color:var(--acento-forte);margin-bottom:1rem} .moduloicone svg{width:24px;height:24px} .modulo h3{font-family:var(--display);font-size:1.15rem;margin:0 0 .45rem;letter-spacing:-.01em} .modulo p{margin:0;color:var(--tinta-suave);font-size:.96rem} .modulo ul{margin:.8rem 0 0;padding:0;list-style:none;display:grid;gap:.32rem} .modulo li{font-size:.9rem;color:var(--tinta-suave);padding-left:1.15rem;position:relative} .modulo li::before{content:'';position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--acento)} / ── Telas do produto ────────────────────────────────────────────────────── / / CAPTURAS REAIS, e o layout existe para elas parecerem o que sao: telas, nao ilustracoes. A moldura clara com sombra e o mesmo cartao dos modulos — o site inteiro fala essa lingua. `aspect-ratio` nas largas e `object-position:top` recortam pelo TOPO: o que interessa numa captura de sistema esta em cima (titulo, acoes), e o rodape da tela nunca vende nada. ═══ ELAS SE CHAMAVAM `.tela`, E ISSO ERA UM BUG ═══ `.tela` já era o nome da TELINHA do celular desenhado no hero. Duas regras diferentes com o mesmo seletor, a segunda vencendo por ordem: o mockup do hero perdia o fundo creme e o raio de 2rem e ganhava borda e sombra de cartão, sem ninguém notar que a culpa era daqui. Captura de produto agora se chama `.captura`, e os dois voltaram a ser coisas separadas. / .capturas{display:grid;gap:1.2rem;grid-template-columns:1fr} @media(min-width:900px){.capturas{grid-template-columns:1.35fr .65fr;align-items:start}} .captura{margin:0;background:var(--papel);border:1px solid var(--borda);border-radius:1.25rem;overflow:hidden;box-shadow:var(--sombra);transition:transform .18s ease,box-shadow .18s ease} .captura:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)} .captura img{display:block;width:100%;height:auto;border-bottom:1px solid var(--borda)} .captura figcaption{padding:.95rem 1.15rem 1.1rem;font-size:.9rem;color:var(--tinta-suave)} .captura figcaption strong{color:var(--tinta);font-weight:700} / A COLUNA DA ESQUERDA empilha as capturas do aplicativo; a da direita e o celular, que e alto. / .capturasapp{display:grid;gap:1.2rem;align-content:start} .captura--larga img{aspect-ratio:16/10;object-fit:cover;object-position:top} / O CELULAR NAO E RECORTADO: o cardapio inteiro cabendo de uma vez e justamente a demonstracao. O teto de altura evita que ele estique a secao numa tela grande. / .captura--celular img{max-height:38rem;object-fit:cover;object-position:top} / ── A captura que NÃO pode ser cortada (11/09/2026) ────────────────────────── `.captura--larga` recorta tudo para 16/10 a partir do topo, e isso é bom para tela cheia de aplicativo: o rodapé da janela não interessa a ninguém. É péssimo para uma captura REENQUADRADA, que já nasceu recortada na origem para tirar alguma coisa do quadro — recortar de novo apagaria justamente o que sobrou de propósito (foi o caso do QR Code da loja online). Aqui a imagem aparece inteira, na proporção em que foi gravada. Use esta classe sempre que o enquadramento da foto for a informação, e não um acidente. / .captura--inteira img{aspect-ratio:auto;object-fit:contain;background:var(--creme)} / O CELULAR DA MESA mostra a conta que sobe da BASE da tela — recortar pelo topo esconderia o botão "Fechar a conta". O TABLET vem em tela cheia, sem recorte, abaixo do par painel + celular. / .captura--base img{object-position:bottom} .captura--tablet{max-width:62rem;margin:2.5rem auto 0} .captura--tablet img{aspect-ratio:auto} / Capturas logo abaixo de uma grade de cartões (seção do Cardápio da mesa, 18/09/2026): sem isto as duas grades encostam. Mesmo respiro que o `.cartaz` deixa embaixo dele. / .modulos + .capturas{margin-top:clamp(1.8rem,4vw,2.6rem)} / ══ O CELULAR ACOMPANHA A ROLAGEM (31/08/2026) ══════════════════════════════════════════════ A coluna da esquerda tem TRÊS capturas empilhadas e a da direita tem UMA, que é baixa. Paradas, sobrava meia tela de vazio à direita — e o vazio caía justamente ao lado das telas que mais interessam. Preso, o vão some E o argumento fica melhor: enquanto a pessoa desce pelas telas que a EQUIPE usa, a tela que o CLIENTE vê continua ao lado. É a frase da seção — "do cardápio que você monta ao cardápio que o seu cliente abre" — dita pelo layout. `top` é 5.5rem para o cartão parar ABAIXO do cabeçalho fixo, que tem 70px. Sem isso ele encostaria por baixo do logotipo. SÓ ACIMA DE 900px, que é onde existem duas colunas. Empilhado no celular, `sticky` prenderia o cartão no meio do caminho e ele cobriria o que vem depois. / @media(min-width:900px){ .captura--celular{position:sticky;top:5.5rem;align-self:start} } / ══ O CARTAZ DO ARGUMENTO PRINCIPAL ════════════════════════════════════════════════════════ Hoje ele carrega a NOTA FISCAL: a nota é emitida pelo próprio +Frella, e essa é a frase que a página existe para dizer. Ela não pode ser mais um parágrafo no meio de outros vinte. ═══ ELE JÁ FOI O CARTAZ DO PREÇO (31/08/2026) ═══ Aqui morava "empresa movimentada não paga mensalidade", e com ele vinham `.taxa`, `.degrau` e `.exemplo` — três famílias de cartão que existiam só para mostrar a conta do mês. Saíram todas junto com a seção de preço. O cartaz ficou porque o desenho é bom e o lugar dele na página é o mesmo: UM argumento, uma vez, em tamanho de cartaz. / / O VERDE MAIS CLARO DO DEGRADÊ É `--verde`, E ESSE É O TETO. Ele terminava em #3a7d63, e ali o texto de corpo (branco a 90%) dava 4,0:1 — abaixo dos 4,5:1 que texto normal precisa. O canto claro fica no pé do cartão, que é justamente onde está o parágrafo mais longo. Com o degradê parando em `--verde` a pior região dá ~5:1. Quem for clarear isto de novo: meça o canto inferior direito, não o meio. / .cartaz{ background:linear-gradient(150deg,#173d31,#245c4a 60%,var(--verde));color:#eef5f1; border-radius:1.6rem;padding:clamp(1.7rem,4vw,2.8rem);box-shadow:var(--sombra-alta); margin-bottom:clamp(1.8rem,4vw,2.6rem); } .cartaz p:first-child{margin-top:0} .cartaztitulo{ font-family:var(--display);font-weight:700;color:#fff;margin:0 0 .9rem;max-width:26ch; font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.15;letter-spacing:-.02em; } .cartaztexto{color:rgba(238,245,241,.94);margin:0;font-size:1.05rem;max-width:62ch} .cartaztexto + .cartaztexto{margin-top:.9rem} .cartaz .olho{color:#a8e0c6} .cartaz b{color:#fff} / A LINHA SOLTA QUE FECHA UMA SEÇÃO — centrada, estreita e mais clara que o corpo. Ela se chamava `.mercadonota` e vivia sob a tabela de comparação com o mercado; a tabela saiu com o preço, e o nome ficou apontando para uma seção que não existe mais. `.nota-larga` diz o que ela é: um parágrafo de fechamento, largo, sem cartão em volta. / .nota-larga{ max-width:70ch;margin:1.2rem auto 0;font-size:.92rem;color:var(--tinta-suave);text-align:center; } .nota-larga b{color:var(--tinta)} / ── Destaque ────────────────────────────────────────────────────────────── / .destaque{background:linear-gradient(150deg,var(--marinho-fundo),#2c3a72 60%,#3a2b5c);color:#eef0f7;border-radius:1.6rem;padding:clamp(1.7rem,4vw,3rem);box-shadow:var(--sombra-alta)} body[data-publico="trabalhador"] .destaque{background:linear-gradient(150deg,#2a1a0e,#5c3410 60%,#8a4a12)} .destaquegrade{display:grid;gap:2rem;align-items:center} @media(min-width:900px){.destaquegrade{grid-template-columns:1.1fr .9fr}} .destaque h2{color:#fff;margin-bottom:1rem} .destaque .olho{color:#f5a45e} .destaque p{color:rgba(238,240,247,.84);margin:0 0 1.4rem} .passos{display:grid;gap:.7rem;margin:0;padding:0;list-style:none} .passo{display:flex;gap:.9rem;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:.9rem;padding:.85rem 1rem} .passon{flex:none;width:26px;height:26px;border-radius:50%;background:var(--laranja);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.84rem;font-family:var(--display)} .passo b{display:block;color:#fff;font-size:.97rem;font-weight:600} .passo span{font-size:.89rem;color:rgba(238,240,247,.76)} / ── Planos ──────────────────────────────────────────────────────────────── / .planos{display:grid;gap:1.2rem;align-items:start} @media(min-width:860px){.planos{grid-template-columns:1fr 1.12fr}} .plano{background:var(--papel);border:1px solid var(--borda);border-radius:1.4rem;padding:1.8rem 1.6rem;box-shadow:var(--sombra)} .plano--destaque{border:2px solid var(--acento);box-shadow:var(--sombra-alta);position:relative} .planofita{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--acento);color:#fff;font-size:.76rem;font-weight:700;padding:.28rem .9rem;border-radius:999px;white-space:nowrap;box-shadow:0 6px 14px var(--acento-sombra)} .plano h3{font-family:var(--display);font-size:1.24rem;margin:0 0 .3rem} .planosub{color:var(--tinta-suave);font-size:.93rem;margin:0 0 1.2rem;min-height:2.9em} / ONDE FICAVA O VALOR (31/08/2026). Os cartões tinham `.planopreco`, `.planovalor` e `.planociclo` — um número grande no alto de cada um. Saíram com o preço; o que sobrou é esta linha, que agora diz o que a pessoa GANHA no lugar de quanto ela paga. O `min-height` continua porque ele é que mantém a lista dos dois cartões começando na mesma altura. / .planoanual{font-size:.87rem;color:var(--tinta-suave);margin:0 0 1.3rem;min-height:1.4em} .plano ul{margin:0 0 1.5rem;padding:0;list-style:none;display:grid;gap:.5rem} .plano li{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem} .plano li svg{width:18px;height:18px;flex:none;margin-top:.22rem;color:var(--verde)} .plano li[data-nao] svg{color:var(--tinta-suave);opacity:.6} .plano li[data-nao]{color:var(--tinta-suave)} .plano .btn{width:100%} / ── Os dois ramos (10/09/2026) ─────────────────────────────────────────────── ═══ POR QUE UM COMPONENTE NOVO, E NÃO `.planos` REAPROVEITADO ═══ De longe são dois cartões lado a lado, e a tentação é usar `.plano`. Não dá, e o motivo é semântico antes de ser visual: `.plano--destaque` existe para dizer "escolha ESTE", e ela pinta a borda de acento. Aqui não há escolha melhor — quem vende comida e quem vende roupa ou calçado não estão comparando nada, estão PROCURANDO O PRÓPRIO. Um dos dois com borda de destaque diria ao outro que ele é o plano B, que é exatamente a leitura que esta frente existe para desfazer. Por isso os dois cartões são idênticos em peso, e cada um tem a sua cor — verde para a comida, marinho para a loja —, sem que nenhuma delas seja `--acento`. O CARTÃO INTEIRO É O ALVO DE TOQUE, via `::after` esticado sobre o cartão a partir do link do rodapé. É o gesto que a pessoa tenta no celular (ela toca no cartão, não na frase azul), e deixar o link sozinho lá embaixo seria um alvo de uma linha de altura num cartão de oitenta pixels. O `position:relative` do cartão é o que segura esse `::after`; o texto continua selecionável porque o pseudo-elemento não tem conteúdo. / .ramos{display:grid;gap:1.2rem;align-items:stretch} @media(min-width:820px){.ramos{grid-template-columns:1fr 1fr}} .ramo{ position:relative;background:var(--papel);border:1px solid var(--borda);border-radius:1.4rem; padding:1.7rem 1.5rem;box-shadow:var(--sombra);display:flex;flex-direction:column; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; } .ramo:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)} .ramo:focus-within{border-color:var(--marinho)} .ramotopo{display:flex;gap:.9rem;align-items:center;margin-bottom:1rem} .ramoicone{ flex:none;width:52px;height:52px;border-radius:1rem;display:grid;place-items:center; background:var(--cor-suave);color:var(--cor-forte); } .ramoicone svg{width:27px;height:27px} .ramoolho{margin:0 0 .1rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cor-forte)} .ramo h3{font-family:var(--display);font-size:1.22rem;margin:0;letter-spacing:-.01em} .ramotexto{margin:0 0 1rem;color:var(--tinta-suave);font-size:.98rem} .ramo ul{margin:0 0 1.3rem;padding:0;list-style:none;display:grid;gap:.42rem} .ramo li{font-size:.94rem;color:var(--tinta-suave);padding-left:1.2rem;position:relative} .ramo li::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--cor-forte)} .ramoir{ margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;min-height:44px; font-weight:700;font-size:.98rem;color:var(--cor-forte);text-decoration:none; } .ramoir::after{content:'';position:absolute;inset:0;border-radius:1.4rem} .ramoir:hover{text-decoration:underline} .ramoir svg{width:17px;height:17px} / Os tokens de cor são declarados NO CARTÃO, e as regras acima só os consomem: trocar a cor de um ramo é uma linha, e nenhuma regra precisa saber qual cartão está pintando. / .ramo--comida{--cor-suave:#dff2e7;--cor-forte:#0f6b45} .ramo--loja{--cor-suave:#e0e5f6;--cor-forte:#2b3a80} / ── Tabela comparativa ──────────────────────────────────────────────────── / .comparativo{background:var(--papel);border:1px solid var(--borda);border-radius:1.3rem;box-shadow:var(--sombra);overflow:hidden} .tabela-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch} table{border-collapse:collapse;width:100%;min-width:640px;font-size:.94rem} thead th{ position:sticky;top:0;background:var(--creme);text-align:left;font-family:var(--display); font-size:.86rem;letter-spacing:.02em;padding:.9rem 1.1rem;border-bottom:1px solid var(--borda);white-space:nowrap; } thead th:nth-child(3){color:var(--acento-forte)} tbody th{ text-align:left;font-weight:600;padding:.85rem 1.1rem;vertical-align:top; border-bottom:1px solid var(--borda);width:26%; } tbody td{padding:.85rem 1.1rem;vertical-align:top;border-bottom:1px solid var(--borda);color:var(--tinta-suave)} tbody td:last-child{color:var(--tinta);background:var(--acento-suave)} tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} .grupo th{ background:var(--creme-fundo);font-family:var(--display);font-size:.78rem;letter-spacing:.1em; text-transform:uppercase;color:var(--tinta-suave);padding:.6rem 1.1rem;font-weight:700; } .nao{display:inline-flex;align-items:center;gap:.35rem} .nao::before{content:'—';color:var(--tinta-suave);font-weight:700} .sim{display:inline-flex;align-items:center;gap:.4rem;font-weight:500} .sim::before{content:'✓';color:var(--verde);font-weight:700} / ── FAQ ─────────────────────────────────────────────────────────────────── / .faq{max-width:760px;margin-inline:auto;display:grid;gap:.7rem} details{background:var(--papel);border:1px solid var(--borda);border-radius:1rem;padding:1rem 1.2rem;box-shadow:0 4px 12px rgba(24,22,19,.04)} details[open]{border-color:var(--acento)} summary{cursor:pointer;font-weight:600;font-size:1.01rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:'+';font-family:var(--display);font-size:1.4rem;color:var(--acento);line-height:1;flex:none} details[open] summary::after{content:'–'} details p{margin:.8rem 0 0;color:var(--tinta-suave);font-size:.96rem} / ── Chamada final ───────────────────────────────────────────────────────── / .final{background:linear-gradient(135deg,var(--marinho),#22307a 55%,#141c4d);color:#fff;text-align:center;padding:clamp(2.8rem,6vw,4.5rem) 0} body[data-publico="trabalhador"] .final{background:linear-gradient(135deg,var(--laranja),#e2620d 55%,var(--laranja-forte))} .final h2{color:#fff;max-width:22ch;margin-inline:auto} .final p{color:rgba(255,255,255,.9);max-width:50ch;margin:0 auto 2rem;font-size:1.05rem} .final .btn--contorno{background:#fff;border-color:#fff;color:var(--tinta)} / ── Rodapé ──────────────────────────────────────────────────────────────── / .rodape{background:#14161c;color:rgba(240,238,234,.62);padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;font-size:.92rem} .rodapegrade{display:grid;gap:2rem;margin-bottom:2.2rem} @media(min-width:760px){.rodapegrade{grid-template-columns:1.4fr 1fr 1fr}} .rodape h4{color:#fff;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 .8rem;font-weight:700} .rodape ul{margin:0;padding:0;list-style:none;display:grid;gap:.45rem} .rodape a{text-decoration:none;transition:color .15s} .rodape a:hover{color:var(--laranja)} .rodapebase{border-top:1px solid rgba(255,255,255,.1);padding-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;font-size:.85rem} / Legenda de tabela para leitor de tela: existe para quem navega por audio, e nao deve ocupar espaco na tela. `clip-path` em vez de `display:none` porque o segundo tira o elemento da arvore de acessibilidade junto — ele sumiria para os dois. / .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0; } / ══ "O QUE É O +FRELLA?" — O BOTÃO E O POPUP (APRESENTACAO, 27/08/2026) ═════════════════════ ═══ POR QUE ISTO EXISTE NUMA PÁGINA QUE JÁ EXPLICA TUDO ═══ A página explica um lado de cada vez: quem abre a aba da empresa lê sobre comanda, caixa e estoque, e sai sem saber que existe gente se candidatando a turno do outro lado. É a divisão certa para VENDER — e a errada para responder "o que é o +Frella?", que é uma pergunta sobre o conjunto. O popup é o único lugar da página onde as duas metades aparecem juntas. ═══ É O MESMO POPUP DO APLICATIVO ═══ Mesmo desenho, mesmo roteiro, mesmos MP3 — ver `features/auth/pages/entry/apresentacao/` no Angular. Aqui ele é reescrito em HTML e CSS puros porque este projeto não tem build; o que NÃO se reescreve é o áudio, que vem de `/assets/audio/guia/` do próprio domínio. ═══ O BOTÃO FICA SOB AS ABAS, E NÃO NO CABEÇALHO ═══ No cabeçalho ele disputaria espaço com "Entrar no aplicativo" e, no celular, um dos dois sairia de cena. Sob as abas ele responde a pergunta que as abas acabaram de fazer: quem não sabe qual dos dois lados é o seu tem, ali, o botão que conta os dois. / .publicoajuda{display:flex;justify-content:center;margin:.9rem 0 .2rem} / ═══ ELE É AZUL CLARO, E O AZUL É FIXO (31/08/2026) ═══ Era um botão branco de contorno cinza, e sumia: fica logo abaixo de duas pílulas grandes, numa faixa creme, com um botão branco de cada lado no cabeçalho. Quem não sabia qual aba era a sua passava por ele sem ver. O azul claro dá corpo a ele sem transformá-lo em alerta — continua uma superfície clicável, não um aviso. O TOM SAI DO MARINHO DA MARCA. #dae1f8 tem matiz 226°, contra os 229° de `--marinho` (#2b3a80), e a borda #6d85c8 fica na mesma família. Não é `--acento-suave` porque aquele token é uma transparência de 12%: sobre o creme ele resolve em #dfe0e5, um cinza-azulado que ninguém chama de azul claro. ═══ E POR QUE ELE NÃO SEGUE `--acento` ═══ `--acento` vira LARANJA na aba do trabalhador, e este botão vive ACIMA das duas abas: ele é a saída de quem ainda não escolheu lado nenhum. Seguindo o acento, ele mudaria de cor conforme a aba — justamente a informação que ele existe para não pressupor. E havia um custo de leitura junto: o hover pintava o texto com `--acento-forte`, e o laranja #a8500a sobre este azul dá 4,31:1 — abaixo dos 4,5:1 que texto normal precisa. Por isso a tinta também é fixa, e o hover mexe no FUNDO e na borda, nunca na cor da letra. CONTRASTE MEDIDO: tinta #1b2450 (o `--marinho-fundo`) sobre #dae1f8 dá 11,38:1, e 9,93:1 sobre o azul do hover. A borda dá 3,33:1 contra a faixa creme, que é o piso para componente. / .publicoajuda-btn{ display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; padding:.6rem 1.15rem;border:1px solid #6d85c8;border-radius:999px; background:#dae1f8;color:#1b2450; font-family:var(--fonte);font-size:.92rem;font-weight:600; box-shadow:0 6px 16px rgba(43,58,128,.14); transition:background .15s ease,border-color .15s ease,transform .15s ease; } .publicoajuda-btn svg{width:19px;height:19px;flex:none} .publicoajuda-btn:hover{background:#c7d3f4;border-color:var(--marinho);transform:translateY(-1px)} / ══ A TRILHA DE FUNDO (31/08/2026) ══════════════════════════════════════════════════════════ ═══ ELA NASCE TOCANDO, E O BOTÃO É O DESLIGA ═══ A trilha já nasceu muda, esperando um clique que quase ninguém dava. Hoje é o contrário: ela começa junto com a página, e quem não quiser desliga. O que NÃO mudou é a saída — o botão fica fixo, visível o tempo todo, e a escolha é lembrada entre visitas. Som que começa sozinho e não tem como parar continua sendo a coisa mais hostil que uma página de venda pode fazer; o que torna isto aceitável é o desliga estar sempre a um toque, e valer para sempre. ═══ E POR QUE ELE FICA DISCRETO ═══ A trilha é ambiente, não é conteúdo. O botão precisa estar SEMPRE alcançável e NUNCA competir com "Experimentar por 10 dias" — daí o canto, o tamanho pequeno e o fundo translúcido. / .trilha{ position:fixed;right:clamp(.7rem,2vw,1.2rem);bottom:clamp(.7rem,2vw,1.2rem);z-index:60; display:inline-flex;align-items:center;gap:.62rem;cursor:pointer;text-align:left; padding:.42rem .95rem .42rem .42rem;border:1px solid var(--borda-forte);border-radius:999px; background:var(--papel);color:var(--tinta);font-family:var(--fonte); box-shadow:var(--sombra); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } .trilha:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta);border-color:var(--acento)} / ═══ O DISCO E O QUE O OLHO ACHA ═══ Circulo CHEIO na cor de acento. O botao antigo era so contorno com um icone riscado do lado do texto: num canto de pagina clara, contorno some e icone riscado le como "indisponivel" — os dois erros na mesma peca, justamente na hora em que ela precisa ser tocada. Massa de cor chega ao olho antes de qualquer borda, e um triangulo de play e a unica forma que ninguem precisa aprender. / .trilhadisco{ display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;border-radius:50%; background:var(--acento);color:#fff; transition:background .15s ease,transform .15s ease; } .trilhadisco svg{width:1.15rem;height:1.15rem} .trilhadisco svg[hidden]{display:none} / DUAS LINHAS: o que fazer, e o que se vai ouvir. A segunda responde "que som e esse?" antes de a pessoa tocar — som que comeca sem se apresentar e o que faz procurar a aba para fechar. / .trilharotulo{display:flex;flex-direction:column;gap:.08rem;line-height:1.18} .trilhaacao{font-size:.84rem;font-weight:700;color:var(--tinta)} .trilhafaixa{font-size:.71rem;font-weight:600;color:var(--tinta-suave);white-space:nowrap} / Tocando, o realce baixa: o botao ja cumpriu o convite e agora e so o desliga. / .trilha[data-tocando="sim"] .trilhadisco{background:var(--acento-forte)} / ══ O CONVITE — QUANDO O NAVEGADOR RECUSOU O SOM ════════════════════════════════════════════ Este estado existe porque a pagina TENTOU tocar e nao conseguiu: Chrome, Safari e Firefox barram som automatico em quem acabou de chegar, e em janela anonima a recusa e CERTA — nao ha engajamento anterior que a libere. Ou seja: para uma boa parte das visitas este nao e o estado de excecao, e o estado NORMAL de chegada. Ele precisa ser encontrado sem ser procurado. O HALO SE EXPANDE E MORRE, em vez de so engordar e voltar: movimento que sai do objeto e o que a visao periferica pega — e a visao periferica e tudo o que este canto tem, porque o olho esta no meio da pagina. Sob `prefers-reduced-motion` a regra geral do fim do arquivo desliga as duas animacoes e sobra a borda de acento parada, que ja separa este estado do botao desligado. / @keyframes trilha-halo{ 0%{box-shadow:var(--sombra),0 0 0 0 var(--acento-sombra)} 70%{box-shadow:var(--sombra),0 0 0 16px rgba(0,0,0,0)} 100%{box-shadow:var(--sombra),0 0 0 0 rgba(0,0,0,0)} } @keyframes trilha-disco-pulso{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.09)} } .trilha[data-convite="sim"]{border-color:var(--acento);animation:trilha-halo 2.2s ease-out infinite} .trilha[data-convite="sim"] .trilhaacao{color:var(--acento-forte)} .trilha[data-convite="sim"] .trilhadisco{animation:trilha-disco-pulso 2.2s ease-in-out infinite} / No celular o nome da faixa sai: a tela e estreita e o que nao pode faltar e o disco com a acao. / @media (max-width:26rem){ .trilhafaixa{display:none} } .oque[hidden]{display:none} .oque{ position:fixed;inset:0;z-index:80; display:flex;align-items:center;justify-content:center;padding:1rem;overflow-y:auto; } / O FUNDO É UM BOTÃO DE VERDADE: tocar fora é a primeira saída que todo mundo tenta, e quem navega por teclado precisa alcançar essa saída também. / .oquefundo{position:fixed;inset:0;border:0;padding:0;cursor:pointer;background:rgba(15,20,35,.62)} .oquefolha{ position:relative;width:min(64rem,100%);max-height:94dvh;overflow-y:auto; display:flex;flex-direction:column;gap:.85rem; padding:clamp(1rem,3vw,1.6rem); background:var(--papel);border-radius:1.2rem;box-shadow:0 1.5rem 3.5rem rgba(15,20,35,.34); } / NADA AQUI DENTRO ENCOLHE. Coluna flex espreme os filhos quando o conteúdo passa da altura disponível — e passa sempre, são dez cartões. A vítima era a legenda, que tem altura mínima: parava naquele piso e a fala saía cortada no meio da frase. / .oquefolha > {flex:none} /* NO CELULAR É UMA FOLHA INTEIRA, não um cartão flutuando: num popup centrado sobrariam 8px de moldura de cada lado e a lista rolaria dentro de uma caixinha. / @media (max-width:40rem){ .oque{padding:0;align-items:stretch} .oquefolha{width:100%;min-height:100dvh;max-height:none;border-radius:0} } .oquetopo{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem} .oqueolho{margin:0 0 .15rem;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)} .oquetitulo{margin:0;font-family:var(--display);font-size:clamp(1.15rem,3.4vw,1.55rem);line-height:1.18;letter-spacing:-.02em} .oquefechar{ flex:none;width:2.3rem;height:2.3rem;cursor:pointer; border:1px solid var(--borda);border-radius:999px;background:transparent; color:var(--tinta-suave);font-size:1.4rem;line-height:1; } .oquefechar:hover{background:var(--creme);color:var(--tinta)} .oquecontroles{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .oquetocar{ display:inline-flex;align-items:center;gap:.5rem;cursor:pointer; padding:.6rem 1.1rem;border:1.5px solid var(--acento);border-radius:999px; background:var(--acento);color:#fff;font-family:var(--fonte);font-size:.92rem;font-weight:700; } .oquetocar svg{width:18px;height:18px;flex:none} / NÃO É REDUNDANTE COM O `[hidden]` DO NAVEGADOR: a regra do agente do usuário mira elementos HTML, e estes são SVG. Sem isto, esconder o ícone não esconde nada. / .oquetocar svg[hidden]{display:none} .oquetocar:hover{filter:brightness(.94)} / Tocando, o botão vira "parar" e sai da frente: ele já cumpriu o papel dele. / .oquetocar[aria-pressed="true"]{background:transparent;color:var(--acento-forte)} .oquepassos{display:flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.82rem;color:var(--tinta-suave)} .oquepassos[hidden]{display:none} .oquepasso-botao{ cursor:pointer;padding:.35rem .6rem;border:1px solid var(--borda);border-radius:.6rem; background:transparent;color:var(--tinta-suave);font-family:var(--fonte);font-size:.8rem; } .oquepasso-botao:hover{color:var(--tinta)} .oqueconta{font-variant-numeric:tabular-nums} / A LEGENDA TEM PISO DE ALTURA de propósito: as falas vão de uma linha a quatro, e sem ele o desenho inteiro saltava a cada parada — justamente enquanto a pessoa segue o cartão que acendeu. / .oquelegenda{ margin:0;min-height:4.4rem;padding:.75rem .9rem;border-radius:.9rem; background:var(--creme);color:var(--tinta);font-size:.94rem;line-height:1.5; } .oquelegenda--parada{color:var(--tinta-suave)} .oquedesenho{display:grid;gap:.85rem;grid-template-columns:1fr} / A partir daqui cabem os dois lados um ao lado do outro, com a ponte no meio. Abaixo disso eles empilham — empresa em cima, freelancer embaixo —, que é a ordem da narração. / @media (min-width:62rem){ .oquedesenho{grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch} } / Cada lado declara a própria cor, e daí para baixo nenhuma regra precisa saber de qual lado fala. Marinho é a área da empresa e laranja a do trabalhador — a mesma divisão das duas abas. / .oquelado{ display:flex;flex-direction:column;gap:.6rem;padding:.9rem; border:1.5px solid var(--borda);border-radius:1rem;background:var(--creme); transition:border-color .2s ease,box-shadow .2s ease; } .oquelado--empresa{--cor:var(--marinho);--cor-forte:#22307a;--cor-suave:rgba(43,58,128,.12)} .oquelado--trabalhador{--cor:var(--laranja);--cor-forte:var(--laranja-forte);--cor-suave:rgba(238,122,30,.13)} .oquelado[data-aceso]{border-color:var(--cor);box-shadow:0 0 0 3px var(--cor-suave)} / O ESMAECIDO VAI NO CABEÇALHO, e não no lado inteiro: no lado inteiro ele se multiplicaria com o esmaecido de cada cartão de dentro, e o que devia ficar "mais adiante" ficava ilegível. / .oquelado[data-espera] .oquelado-topo{opacity:.5} .oquelado-topo{display:flex;align-items:center;gap:.6rem;transition:opacity .2s ease} .oquelado-icone{ flex:none;display:grid;place-items:center;width:2.4rem;height:2.4rem; border-radius:.7rem;background:var(--cor-suave);font-size:1.25rem; } .oquelado-olho{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cor-forte)} .oquelado-titulo{margin:0;font-family:var(--display);font-size:1.04rem;line-height:1.25;letter-spacing:-.01em} .oquenos{display:grid;gap:.5rem;margin:0;padding:0;list-style:none} .oqueno{ display:flex;align-items:flex-start;gap:.6rem;padding:.6rem .7rem; border:1.4px solid var(--borda);border-radius:.8rem;background:var(--papel); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease,opacity .2s ease; } .oqueno[data-aceso]{border-color:var(--cor);background:var(--cor-suave);box-shadow:0 0 0 3px var(--cor-suave)} .oqueno[data-espera]{opacity:.5} .oqueno-icone{flex:none;font-size:1.1rem;line-height:1.4} .oqueno-titulo{display:block;font-size:.95rem;font-weight:700;line-height:1.25} .oqueno-nota{display:block;margin-top:.12rem;font-size:.84rem;line-height:1.4;color:var(--tinta-suave)} / `margin-top:auto` alinha os dois botões pela base: um lado tem seis módulos e o outro tem quatro. / .oquesaida{ margin-top:auto;display:inline-flex;align-items:center;justify-content:center; min-height:2.9rem;padding:0 1rem;border-radius:.85rem; background:var(--cor);color:#fff;font-weight:700;font-size:.99rem;text-decoration:none; transition:box-shadow .2s ease,filter .15s ease; } .oquesaida:hover{filter:brightness(.94)} .oquesaida[data-aceso]{box-shadow:0 0 0 4px var(--cor-suave)} / A PONTE. Sem ela o popup mostra dois produtos; com ela mostra um, e o freelancer do outro lado é quem atende a vaga que a empresa publicou. / .oqueponte{ display:flex;align-items:center;justify-content:center;margin:0; font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-suave); } .oqueponte::before,.oqueponte::after{content:'';flex:1;height:1px;background:var(--borda)} .oqueponte span{padding:0 .7rem} @media (min-width:62rem){ .oqueponte{flex-direction:column;width:2.4rem} .oqueponte::before,.oqueponte::after{width:1px;height:auto} .oqueponte span{writing-mode:vertical-rl;padding:.7rem 0} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}{transition:none!important;animation:none!important}} /* ══════════════════════════════════════════════════════════════════════════════ SÓ DAS PÁGINAS DE RAMO — o que não existe na home ══════════════════════════════════════════════════════════════════════════════ / / ── A trilha de volta ──────────────────────────────────────────────────────── Uma página de ramo é alcançada pela home, e precisa saber voltar. O link fica no topo, antes do herói, porque é onde a pessoa procura quando conclui que errou de porta — e errar de porta é um resultado LEGÍTIMO aqui: metade de quem entra numa página de ramo queria a outra. / .volta{display:flex;align-items:center;gap:.45rem;min-height:44px;font-size:.94rem;font-weight:600; color:var(--tinta-suave);text-decoration:none} .volta:hover{color:var(--acento-forte);text-decoration:underline} .volta svg{width:16px;height:16px} / ── O ouvinte da página ────────────────────────────────────────────────────── ═══ POR QUE UM PAINEL, E NÃO SÓ UM BOTÃO DE PLAY ═══ O áudio sozinho não ensina: quem está no ônibus, no silencioso, ou num aparelho que barrou o autoplay, ficaria com um botão que não faz nada visível. Então o painel mostra a LEGENDA do que está sendo dito, o número da parada, e acende a seção de que a voz fala — três coisas que funcionam sem som nenhum. O áudio é o melhor caso, não o único. `position:sticky` no rodapé: a explicação percorre a página inteira, e um painel que rola para fora leva embora a legenda e o botão de pausar junto. Ele fica com o polegar. / .voz{position:sticky;bottom:0;z-index:40;background:var(--marinho-fundo);color:#eef0f7; box-shadow:0 -8px 24px rgba(23,25,31,.22)} .vozlinha{display:flex;align-items:center;gap:.9rem;padding:.7rem 0;flex-wrap:wrap} .vozbtn{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.5rem 1.1rem; border:0;border-radius:999px;background:var(--acento);color:#fff;font:inherit;font-weight:700; font-size:.95rem;cursor:pointer} .vozbtn:hover{filter:brightness(1.08)} .vozbtn svg{width:17px;height:17px} / NÃO É REDUNDANTE COM O `[hidden]` DO NAVEGADOR — é a mesma armadilha que `.oquetocar` já documenta mais abaixo: a regra do agente do usuário mira elementos HTML, e estes são SVG. Sem isto, `el.hidden = true` não esconde nada, e o botão aparece com o "tocar" e o "pausar" lado a lado ao mesmo tempo — que foi exatamente o que aconteceu na primeira montagem desta página. / .vozbtn svg[hidden]{display:none} .voznav{display:inline-flex;gap:.4rem;margin-left:auto} .vozpasso{min-height:44px;min-width:44px;padding:.4rem .8rem;border:1px solid rgba(238,240,247,.34); border-radius:.7rem;background:transparent;color:#eef0f7;font:inherit;font-size:.9rem;cursor:pointer} .vozpasso:hover{background:rgba(238,240,247,.12)} .vozpasso[disabled]{opacity:.4;cursor:default} .vozconta{font-size:.85rem;color:rgba(238,240,247,.78);white-space:nowrap} .vozlegenda{margin:0 0 .55rem;font-size:.97rem;line-height:1.5;padding-top:.7rem; color:rgba(238,240,247,.95)} .vozlegenda b{color:#fff} @media(max-width:39.99rem){ .voznav{margin-left:0;width:100%} .vozpasso{flex:1} } / A seção de que a voz está falando. A borda é o sinal; o fundo, o reforço — quem não distingue a cor da borda ainda vê o bloco mudar de tom. / [data-parada]{scroll-margin-top:5rem} [data-parada].is-acesa{box-shadow:inset 4px 0 0 var(--acento);background:var(--acento-suave)} [data-parada].is-acesa.secao--papel{background:var(--acento-suave)} / ── O lugar reservado para uma captura que ainda não existe ────────────────── Ele NÃO é um espaço vazio bonito: é um aviso escrito, em português, dizendo que a foto não foi tirada. Um retângulo cinza sem texto seria lido como imagem que não carregou, e um print fabricado seria pior que os dois. */ .falta-foto{border:1.5px dashed var(--borda);border-radius:1.1rem;padding:1.4rem;text-align:center; color:var(--tinta-suave);font-size:.92rem;background:var(--creme)} .falta-foto b{display:block;color:var(--tinta);font-family:var(--display);margin-bottom:.3rem}