/* =========================================================== WEN, PELE MARFIM Pedido da própria Wen em 14/08/2026: marfim com detalhe dourado, na linha do site de curso da mãe do Gustavo, sem ser igual. COMO ISTO CARREGA, E POR QUÊ NESSA ORDEM wen.css estrutura, medida, comportamento gurroffe.css o refino: tipografia serifada, respiro, profundidade marfim.css SÓ COR Este arquivo não mexe em tamanho, espaço nem fonte de propósito. Todo o trabalho de tipografia e ritmo do gurroffe.css continua valendo, e voltar pro site escuro é tirar uma linha do html, não refazer nada. O QUE DIFERENCIA DO SITE DA MÃE DELE Lá é creme rosado com champanhe, que combina com beleza e cabelo. Aqui o negócio é pedra: o marfim puxa pro mineral em vez do rosa, o texto é grafite quente e não café, e o ouro é mais fechado, do tom do latão da logo dela. Mesma família, personalidade diferente. CONTRASTE CONFERIDO, não chutado. Medido contra o fundo #F6F3EC: texto #1B1815 15.9 ótimo suave #6E6659 5.1 passa ouro #96701F 4.1 serve pra rótulo e fio, não pra texto ouro2 #7C5A18 5.7 passa, é o do texto e do título =========================================================== */ :root{ /* --------- fundos, do mais claro ao mais fechado --------- Cinco níveis igual na versão escura, porque é a profundidade que faz não parecer template. Aqui cada degrau puxa mais pro areia. */ /* AJUSTADO EM 17/08/2026: estava puxando pro bege amarronzado. Todo o ramo subiu de claridade e perdeu carga de amarelo, pra ler como CREME e não como areia suja. */ --carvao:#FAF8F2; /* fundo da página, creme */ --carvao2:#F3F0E8; /* faixa alternada */ --pedra:#FFFEFB; /* cartão, branco quente */ --pedra2:#F7F3EA; /* cartão em destaque */ --pedra3:#EDE8DC; /* topo de gradiente */ --linha:#E9E3D6; /* fio de sempre */ --linha2:#D6CDBA; /* fio de destaque */ /* --------- o ouro --------- Na versão escura o ouro clareia pra aparecer. Aqui é o contrário: ele precisa FECHAR pra ler no marfim. Por isso o bronze2, que lá era o champanhe claro, aqui é o mais escuro dos três. */ --bronze:#926D1E; /* fio, rótulo, preenchimento de botão */ --bronze2:#7C5A18; /* título e ênfase, é o que se lê */ --bronze3:#5E4410; /* hover e pé de gradiente */ --claro:#1B1815; /* texto, grafite quente, mesmo preto da logo */ --suave:#6E6659; /* texto secundário */ --verde:#35704A; --vermelho:#A8382F; } /* ---------- fundo da página ---------- O gurroffe.css põe dois halos de ouro no fundo. Em fundo escuro eles aparecem como luz. Em marfim, na mesma opacidade, sumiriam, então sobem um pouco e viram um calor de papel. */ body{ background: radial-gradient(1200px 620px at 50% -8%, rgba(150,112,31,.09), transparent 68%), radial-gradient(760px 420px at 92% 12%, rgba(150,112,31,.05), transparent 70%), var(--carvao); background-attachment:fixed; color:var(--claro); } /* ---------- topo ---------- Estava preto translúcido nos dois arquivos. Vira marfim translúcido, e o desfoque continua, que é o que dá a sensação de vidro. */ header{ background:rgba(246,243,236,.88); /* O -webkit- não é sobra de código velho, o Safari ainda exige ele. Sem isso o topo fica translúcido SEM borrar, e o texto da página aparece através dele enquanto rola. Descoberto em 15/08/2026, quando o site passou a ser apresentado no MacBook. */ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--linha); } /* O wen.css e o gurroffe.css também declaram desfoque no topo, sem prefixo. Como esta folha carrega por último, a regra de cima já vale pros dois. Se um dia o marfim sair, põe o prefixo lá. */ /* A tarja de cima ficava clara sobre preto. Inverte. */ .tarja{background:var(--claro);color:var(--carvao)} .tarja a{color:var(--pedra3)} .tarja b{color:#FFF} /* ---------- textura de agregado ---------- O .granulado desenha pedrinha com gradiente radial, e todas as pedrinhas eram tons de cinza escuro sobre cinza mais escuro ainda. Em marfim isso vira um borrão sujo, então a base clareia e as pedrinhas ficam em tom de seixo. */ .granulado{ background-color:#DCD6C8; background-image: radial-gradient(circle at 12% 22%, #8C8578 0 1.6px, transparent 1.7px), radial-gradient(circle at 68% 14%, #B4AC9B 0 2.2px, transparent 2.3px), radial-gradient(circle at 34% 68%, #6E6659 0 1.3px, transparent 1.4px), radial-gradient(circle at 84% 74%, #C6BFAF 0 2.6px, transparent 2.7px), radial-gradient(circle at 52% 40%, #9A9285 0 1.9px, transparent 2px), radial-gradient(circle at 22% 88%, #7C7466 0 1.2px, transparent 1.3px); } /* ---------- as listras da capa saíram ---------- O gurroffe.css desenha linhas verticais finas na capa. Em fundo preto elas dão profundidade. Em marfim viram risco de giz num quadro branco, e foi a primeira coisa que o Gustavo apontou olhando no navegador. No lugar entra um halo quente vindo do topo, que dá volume sem desenhar nada por cima. */ .capa::before{ background-image:radial-gradient(900px 460px at 50% 0%, rgba(150,112,31,.10), transparent 70%); background-repeat:no-repeat; -webkit-mask-image:none; mask-image:none; } /* =========================================================== RITMO DAS SEÇÕES O site estava com UMA seção colorida e treze transparentes, ou seja, uma laje de marfim de ponta a ponta. Sem degrau, a página parece longa e feita às pressas, por mais bem escrito que seja o texto. A alternância não é decoração, ela conta a leitura: faixa clara pra ler, faixa areia pra olhar, faixa escura pra decidir. É o que o site escuro fazia com profundidade e que o claro tinha perdido. =========================================================== */ #simulador,#cores,#piscina,#regiao{background:var(--carvao2)} #servicos,#materiais,#revitalizacao,#comparacao,#obras,#depoimentos,#duvidas{ background:var(--carvao); } /* ---------- faixa escura ---------- Em vez de escrever cor por cor, a seção redefine os TOKENS dentro dela. Como todo componente do site já lê token, tudo que cai aqui dentro se inverte sozinho: cartão, fio, texto, rótulo e botão. É por isso que este arquivo consegue ser só cor. */ .escuro{ --carvao:#1B1815; --carvao2:#231E19; --pedra:#241F1A; --pedra2:#2E2822; --pedra3:#3A322A; --linha:#37302A; --linha2:#4A4038; --claro:#F6F3EC; --suave:#A79E90; --bronze:#C9A961; --bronze2:#E2CC98; --bronze3:#F0E2C2; background:var(--carvao); color:var(--claro); } .escuro .bt{background:var(--bronze);color:#1B1815;border-color:var(--bronze)} .escuro .bt:hover{background:var(--bronze3);border-color:var(--bronze3);color:#1B1815} .escuro .bt.fina{background:none;color:var(--bronze2);border-color:var(--linha2)} .escuro .bt.fina:hover{color:var(--bronze3);border-color:var(--bronze3)} /* ---------- catálogo de cor em quatro colunas ---------- Estava em cinco e sobrava duas na última fila, que é o tipo de coisa que ninguém sabe explicar mas todo mundo acha feio. São doze pedras nesta grade, então quatro fecha três filas cheias. */ /* ---------- caixa marcada, sem depender de :has() ---------- O wen.css usa .ex:has(input:checked) pra acender a caixa inteira. O :has() só existe do Safari 15.4 pra cima, e o site vai ser mostrado num MacBook que eu não sei a versão. Se o :has() não valer, a regra abaixo garante ao menos que a caixinha apareça marcada em dourado, em vez da opção não dar sinal nenhum de que foi escolhida. */ .extras .ex input{accent-color:var(--bronze);outline-offset:2px} .extras .ex input:checked{outline:2px solid var(--bronze)} .amostras.miudas{grid-template-columns:repeat(4,1fr)} @media(max-width:1000px){.amostras.miudas{grid-template-columns:repeat(3,1fr)}} @media(max-width:620px){.amostras.miudas{grid-template-columns:repeat(2,1fr)}} /* ---------- caixa de erro ---------- O texto era rosa claro, feito pra fundo escuro. Em marfim ele some. */ .erro-cx{ background:rgba(168,56,47,.07); color:#8A2C24; } /* ---------- tinturas de ouro ---------- Todas em alfa baixo, calibradas pra fundo preto. Em marfim, no mesmo valor, não aparecem. Sobem o suficiente pra marcar sem sujar. */ .faixa-ia{background:rgba(150,112,31,.075)} .faixa-ia:hover{background:rgba(150,112,31,.13)} .sugestao{background:rgba(150,112,31,.075)} tbody tr.destaque{background:rgba(150,112,31,.09)} /* ---------- botões e marcadores ---------- Preenchimento em ouro com texto quase preto. É a combinação da logo dela, e é a que passa contraste em tamanho de botão. */ .bt{background:var(--bronze);color:#FCFAF6;border-color:var(--bronze)} .bt:hover{background:var(--bronze3);border-color:var(--bronze3);color:#FCFAF6} .bt.fina{background:none;color:var(--bronze2);border-color:var(--linha2)} .bt.fina:hover{background:none;color:var(--bronze3);border-color:var(--bronze3)} .passo.on{background:var(--bronze);color:#FCFAF6} .esc.on{background:var(--bronze);color:#FCFAF6;border-color:var(--bronze)} .plano .fita{background:var(--bronze);color:#FCFAF6} .faixa-ia .ia-selo{background:var(--bronze);color:#FCFAF6} .aba-p.on{background:var(--bronze);border-color:var(--bronze);color:#FCFAF6} /* ---------- campos ---------- Em fundo escuro o campo era mais escuro que a página. Em claro tem que ser mais CLARO que a página, senão parece desativado. */ .campo input,.campo textarea,.campo select,.entrar input,.chat-linha input{ background:var(--pedra); color:var(--claro); border-color:var(--linha2); } /* o painel tem estilo próprio embutido e chama o token direto, então estes três precisam ser ditos aqui pra não ficar campo invisível */ .entrar input{background:#FFF} .ped{background:var(--pedra)} .acao{color:var(--suave)} .campo input::placeholder,.campo textarea::placeholder,.chat-linha input::placeholder{ color:#9A9285; } /* =========================================================== ETIQUETA EM CIMA DE FOTO, O ERRO QUE EU COMETI Achado em 16/08/2026, olhando o portfólio: o texto das etiquetas sumia. Elas mantêm fundo escuro de propósito, porque sentam sobre imagem, MAS a cor do texto delas vinha do token --suave e do --linha, e eu inverti os dois pra escuro na hora de fazer o marfim. Resultado: texto escuro sobre fundo escuro. A regra de manter o fundo estava certa, o que faltou foi lembrar que a cor do TEXTO vinha de token invertido junto. Lição pra qualquer inversão de tema daqui pra frente: o que fica sobre foto precisa de cor DITA, não herdada. =========================================================== */ .obra .selo-o, .og-fase,.og-parte,.og-seta, .pisc-nome, .comparador .rot, .previa-foto .trocar{ color:#EDE7DA; border-color:rgba(255,255,255,.28); } .obra .selo-o, .og-fase:not(.antes){border-color:#C9A961;color:#E7D3A6} .og-fase.antes{border-color:rgba(255,255,255,.3);color:#D8D2C6} .comparador .rot.b{color:#E7D3A6;border-color:#C9A961} .og-seta:hover,.previa-foto .trocar:hover{border-color:#C9A961;color:#E7D3A6} /* ---------- o que fica EM CIMA DE FOTO não muda ---------- Rótulo de obra, botão de trocar foto, etiqueta do comparador e nome da piscina são escuros porque sentam sobre imagem, não sobre a página. Clarear isso sumiria com eles. Ficam como estão de propósito, e esta nota existe pra ninguém "consertar" depois. .previa-foto .trocar, .comparador .rot, .comparador .puxador::after, .obra .selo-o, .og-fase, .og-parte, .og-seta, .pisc-nome =========================================================== */ /* ---------- a logo ---------- A oficial é um brasão dourado sobre círculo preto. No site escuro ela sumia, e por isso existia a versão monocromática clara. Em marfim é o contrário: a oficial fica perfeita e a monocromática é que sumiria. */ .topo .marca img.logo{height:clamp(46px,6.4vw,64px);width:auto} /* ---------- rodapé e chamada final ---------- A página fecha escurecendo. Usam a mesma inversão de token da faixa escura, por isso herdam de .escuro e não repetem cor nenhuma. */ footer,.chamada{ --carvao:#1B1815; --pedra:#241F1A; --pedra2:#2E2822; --pedra3:#3A322A; --linha:#37302A; --linha2:#4A4038; --claro:#F6F3EC; --suave:#A79E90; --bronze:#C9A961; --bronze2:#E2CC98; --bronze3:#F0E2C2; background:var(--carvao); color:var(--claro); } footer{border-top:1px solid var(--linha2)} .chamada .bt{background:var(--bronze);color:#1B1815;border-color:var(--bronze)} .chamada .bt:hover{background:var(--bronze3);border-color:var(--bronze3);color:#1B1815} .rodape-fim{border-top:1px solid rgba(255,255,255,.10)} /* ---------- selo de prévia da Solarys ---------- Ele é fixo no canto e estava passando POR CIMA do texto enquanto a página rolava, o que em demonstração pra cliente lê como site mal acabado. Fica menor, translúcido e sem capturar clique, então ele marca a prévia sem atrapalhar leitura nem botão embaixo dele. */ .previa-sol{ /* a tarja ja e escura, entao o selo nao precisa de fundo proprio: fundo em cima de fundo escuro vira mancha. So a borda fina e o texto claro, que somem no desenho da faixa. */ background:transparent; color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); font-size:.52rem; padding:5px 9px; /* O `pointer-events:none` SAIU daqui em 26/08/2026, e ele era o motivo de o clique não funcionar. Fazia sentido quando o selo era um retângulo decorativo por cima do conteúdo: deixar o clique atravessar evitava que ele roubasse o toque de quem mirava o que estava embaixo. Agora ele é um LINK pro portfólio da Solarys, e link que não recebe clique é pior que link nenhum: a pessoa tenta, não acontece nada, e conclui que o site está quebrado. Medido antes de mexer: `elementFromPoint` no meio do selo devolvia a `div.tarja`, ou seja, o clique passava reto por ele. */ opacity:.75; } .previa-sol:hover{opacity:1} /* ---------- famílias de pedra ---------- Dezoito amostras numa grade só é escolha demais e ninguém decide. Agrupado por base vira quatro decisões, e a segunda já é dentro da família que a pessoa escolheu. O número do lado do nome diz quantas misturas tem dentro, pra ela saber que vale entrar. */ .fam{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px} .fam-b{background:none;border:1px solid var(--linha2);color:var(--suave); padding:9px 16px;font-family:'Oswald',sans-serif;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:.18s; display:flex;align-items:center;gap:8px} .fam-b:hover{border-color:var(--bronze);color:var(--bronze2)} .fam-b span{font-size:.62rem;opacity:.65;border-left:1px solid currentColor;padding-left:8px} .fam-b.on{background:var(--bronze);border-color:var(--bronze);color:#FCFAF6} .fam-b.on span{opacity:.85} .fam-diz{color:var(--suave);font-size:.84rem;margin:0 0 14px} /* ---------- as pedras arrumadas por base ---------- Todas na tela, nada escondido atrás de clique. O que muda é a ordem e um rótulo em cima de cada bloco, pra vista descansar entre uma família e outra em vez de encarar dezoito quadrados de uma vez. */ .fam-tit{font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.22em; text-transform:uppercase;color:var(--bronze2);margin:20px 0 10px; display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .fam-tit:first-child{margin-top:0} .fam-tit::before{content:"";width:16px;height:1px;background:var(--bronze);flex:none} .fam-tit span{font-family:'Jost',sans-serif;font-size:.76rem;letter-spacing:0; text-transform:none;color:var(--suave)} /* ---------- borda de outra cor ---------- Nasce fechada num resumo de uma linha, porque a maioria não faz borda e abrir dezoito amostras de novo dobraria a tela pra todo mundo por causa de uma minoria. Quem faz, clica e escolhe. */ #fBorda{margin-top:14px} .borda-abre{width:100%;text-align:left;background:var(--pedra);border:1px dashed var(--linha2); color:var(--suave);padding:12px 16px;font-family:inherit;font-size:.88rem; cursor:pointer;display:flex;justify-content:space-between;align-items:center; gap:12px;transition:.18s} .borda-abre:hover{border-color:var(--bronze);color:var(--bronze2)} .borda-abre.on{border-style:solid;border-color:var(--bronze);color:var(--bronze2)} .borda-abre span{font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.16em; text-transform:uppercase;color:var(--bronze2);flex:none} .borda-cx{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px; margin-top:12px;padding:14px;background:var(--pedra2);border:1px solid var(--linha)} .borda-cx .cor.sem{display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:96px;background:var(--pedra)} .borda-cx .cor.sem .sem-txt{font-family:'Oswald',sans-serif;font-size:.74rem;letter-spacing:.1em; text-transform:uppercase;color:var(--claro)} /* =========================================================== HIERARQUIA DA CAPA, OBSERVAÇÃO DA IRMà DO GUSTAVO O olho da capa e o slogan estavam no MESMO dourado do "valoriza" do título. Três coisas douradas na mesma tela empatam, e o olho lê as duas pequenas primeiro, porque são curtas. Resultado: a pessoa lê "Fulget e Granilite" e "Onde o acabamento vira destaque", e passa batido pelo título, que é a frase que vende. Agora só o "valoriza" é dourado. O olho e o slogan viram texto de apoio, discretos, cumprindo o papel deles sem disputar. =========================================================== */ .capa .olho{color:var(--suave);opacity:.8} .capa .slogan-wen{color:var(--suave);opacity:.8} /* ---------- comparação, também dela ---------- Alto, Médio e Baixo estavam em Oswald, maiores e mais pesados que o nome da linha. O olho batia primeiro na NOTA e só depois descobria do que se tratava, que é a ordem errada: primeiro se sabe o assunto, depois quanto vale. Agora nota e rótulo têm o mesmo tamanho e a mesma fonte, e a única diferença é a cor. E a cor virou semáforo, igual em toda linha e em toda tabela do site: verde bom pra quem compra âmbar médio vermelho ruim O médio era --bronze2, o mesmo dourado do resto da página, então não lia como aviso, lia como enfeite. */ .p-l b,td.bom,td.medio,td.ruim{ font-family:inherit; font-size:.88rem; font-weight:500; letter-spacing:.02em; } .p-l span{font-size:.88rem;letter-spacing:.02em;text-transform:none;color:var(--suave)} .p-l b.bom,td.bom{color:#2F6B45} .p-l b.medio,td.medio{color:#9A6A12} .p-l b.ruim,td.ruim{color:#A8382F} /* ---------- etiquetas do comparador ---------- HOJE e COM A WEN sentam em cima da foto e competem com ela. A 80% de opacidade elas continuam legíveis e param de brigar com a imagem, que é o que a pessoa veio ver. */ .comparador .rot{opacity:.8} /* =========================================================== LETRA MAIOR, PEDIDO DA WEN E DO FILHO NA REUNIÃO DE 17/08 O texto que não está em negrito estava pequeno demais pra ler confortável, e o público aqui é gente de obra, muitas vezes lendo no celular no meio do serviço, muitas vezes com mais de quarenta anos. Subiu o corpo do texto e a altura de linha. Título não mexe: ele já estava grande, e crescer título junto só empurraria a página pra baixo sem melhorar leitura. =========================================================== */ body{font-size:17.5px;line-height:1.8} .legenda{font-size:1.08rem;line-height:1.85} .motivo p,.serv span,.p-itens li,.resp,.obra .txt,.area-l,.item span{font-size:.98rem;line-height:1.8} .selo span,.solta span,.dica-foto,.aviso,.ajuda,.p-sub{font-size:.94rem;line-height:1.75} .esc,.cor small,.campo label,.hist-dia{font-size:.92rem} .passo-diz{font-size:1.06rem;line-height:1.8} .duvidas summary{font-size:1.04rem} .serv b{font-size:1.06rem} /* =========================================================== WENIA, O BOTÃO FLUTUANTE Pedido da reunião: hoje, pra achar o assistente, a pessoa precisa ir no simulador e descer a página inteira. Ninguém faz isso. Ele passa a morar no canto, acima do WhatsApp, visível desde o primeiro segundo, e abre em painel igual mensageiro. A fonte do rótulo é a mesma família do título do site, que é onde mora a cara de marca, e não uma fonte de sistema. =========================================================== */ .wenia-b{position:fixed;right:22px;bottom:150px;z-index:70;width:58px;height:58px; border-radius:50%;background:#1B1815;border:1px solid #C9A961;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:1px;box-shadow:0 6px 22px rgba(0,0,0,.28);transition:.2s;padding:0} .wenia-b:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.34)} /* WenIA numa palavra só, com o IA em ouro pra separar sem quebrar linha. Antes eram duas linhas empilhadas e lia como duas coisas. */ .wenia-b .m{font-family:'Cormorant Garamond',serif;font-size:.98rem;font-weight:500; letter-spacing:.02em;color:#F6F3EC;line-height:1;white-space:nowrap} .wenia-b .m i{font-style:normal;color:#C9A961} .wenia-b .pisca{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%; background:#4E9E6A;border:2px solid var(--carvao)} /* ---------- o painel que abre ---------- */ .wenia-cx{position:fixed;right:22px;bottom:150px;z-index:71;width:min(390px,calc(100vw - 44px)); max-height:min(620px,calc(100vh - 190px));background:var(--pedra); border:1px solid var(--linha2);box-shadow:0 18px 50px rgba(0,0,0,.22); display:none;flex-direction:column;overflow:hidden} .wenia-cx.aberto{display:flex} .wenia-top{background:#1B1815;color:#F6F3EC;padding:15px 18px;display:flex; align-items:center;justify-content:space-between;gap:12px} .wenia-top .tit{font-family:'Cormorant Garamond',serif;font-size:1.15rem;letter-spacing:.04em} .wenia-top .sub{font-size:.72rem;color:#A79E90;display:block;margin-top:2px} .wenia-x{background:none;border:0;color:#A79E90;font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px} .wenia-x:hover{color:#FFF} .wenia-corpo{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px} .wenia-cx .fala{max-width:88%;padding:11px 15px;font-size:.95rem;line-height:1.7} .wenia-cx .fala.wen{background:var(--pedra2);align-self:flex-start;border-left:2px solid var(--bronze)} .wenia-cx .fala.eu{background:#1B1815;color:#F6F3EC;align-self:flex-end} .wenia-pe{border-top:1px solid var(--linha);padding:12px;display:flex;gap:8px} .wenia-pe input{flex:1;background:var(--carvao);border:1px solid var(--linha2);color:var(--claro); padding:11px 13px;font-family:inherit;font-size:.95rem;outline:none} .wenia-pe input:focus{border-color:var(--bronze)} .wenia-pe button{background:var(--bronze);border:0;color:#FCFAF6;padding:0 18px;cursor:pointer; font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} @media(max-width:560px){ .wenia-b{right:16px;bottom:142px;width:52px;height:52px} .wenia-cx{right:12px;left:12px;bottom:12px;width:auto;max-height:76vh} } /* chips de sugestão dentro do painel */ .wenia-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px} .wenia-chips button{background:none;border:1px solid var(--linha2);color:var(--bronze2); padding:8px 12px;font-family:inherit;font-size:.86rem;cursor:pointer; text-align:left;transition:.16s;line-height:1.4} .wenia-chips button:hover{border-color:var(--bronze);background:var(--pedra2)} .wenia-cx .fala.pensando{display:flex;gap:5px;align-items:center} .wenia-cx .fala .p{width:6px;height:6px;border-radius:50%;background:var(--bronze); animation:pisca 1.2s infinite} .wenia-cx .fala .p:nth-child(2){animation-delay:.2s} .wenia-cx .fala .p:nth-child(3){animation-delay:.4s} @keyframes pisca{0%,60%,100%{opacity:.25}30%{opacity:1}} @media(prefers-reduced-motion:reduce){.wenia-cx .fala .p{animation:none;opacity:.6}} .wenia-cx .sugestao{background:var(--pedra2);border-left:2px solid var(--bronze);padding:12px 15px} .wenia-cx .sugestao .s-tit{font-family:'Oswald',sans-serif;font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;color:var(--bronze2);margin-bottom:6px} .wenia-cx .sugestao .s-det{font-size:.9rem;color:var(--suave);margin-bottom:10px;line-height:1.6} /* ---------- os quatro quadrados de cor ---------- Escolha em dois passos, pedido da reunião. Quadrado grande com foto de verdade da família, e não bolinha de cor chapada: a graça do fulget é a pedra aparecendo, e cor lisa não mostra isso. */ .fam-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px} @media(max-width:620px){.fam-grade{grid-template-columns:repeat(2,1fr)}} .fam-q{background:var(--pedra);border:1px solid var(--linha);padding:0 0 12px;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px;transition:.18s;overflow:hidden} .fam-q:hover{border-color:var(--bronze)} .fam-q.on{border-color:var(--bronze);border-width:2px;background:var(--pedra2)} .fam-foto{display:block;width:100%;line-height:0;margin-bottom:10px} .fam-foto img{width:100%;height:86px;object-fit:cover;display:block} .fam-n{font-family:'Cormorant Garamond',serif;font-size:1.16rem;color:var(--claro);line-height:1.2} .fam-q.on .fam-n{color:var(--bronze2)} .fam-q-sub{font-size:.76rem;color:var(--suave);letter-spacing:.04em} /* ---------- a tarja de IA ---------- Era um bloco de sete linhas e ninguém lia. Virou tarja de duas linhas com o selo IA à esquerda, que se entende de relance, sem leitura. O que saiu não sumiu: virou o passo a passo, que informa na hora que a informação importa em vez de tudo de uma vez no começo. */ .selo-ia{display:flex;gap:16px;align-items:flex-start;background:var(--claro); color:var(--carvao);padding:18px 22px;margin-bottom:26px} .selo-ia-m{font-family:'Oswald',sans-serif;font-size:.82rem;letter-spacing:.14em; background:var(--bronze);color:#FCFAF6;padding:6px 12px;flex:none;line-height:1.2} .selo-ia b{display:block;font-weight:500;font-size:1.02rem;line-height:1.6;margin-bottom:4px} .selo-ia span{display:block;font-size:.94rem;opacity:.78;line-height:1.65} @media(max-width:560px){.selo-ia{flex-direction:column;gap:10px}} /* ---------- aviso de dados no formulário ---------- Discreto de propósito. Quem quer ler, lê; quem não quer, não tropeça nele no caminho do botão. */ .nota-lgpd{font-size:.78rem;line-height:1.7;color:var(--suave);margin-top:16px;max-width:62ch} .nota-lgpd a{color:var(--bronze2);border-bottom:1px solid var(--linha2)} .nota-lgpd a:hover{border-bottom-color:var(--bronze)} /* ---------- rodapé, links legais ---------- O rodapé é escuro no marfim, então link ali precisa da cor clara da paleta invertida, senão nasce cinza em cima de cinza. */ .rodape-fim a{color:var(--bronze2);display:inline-block;padding:6px 2px} .rodape-fim a:hover{color:var(--bronze3)} /* =========================================================== FAIXA DE PROMOÇÃO E CUPOM DE SAÍDA A faixa nasce pelo js, e só quando tem promoção ligada no painel. Por isso não existe regra de altura reservada aqui: sem promoção, não existe elemento nenhum, e o topo do site fica exatamente como era. =========================================================== */ /* ---------- A PRÉVIA EM IMAGEM ESTÁ FORA DO AR ---------- Aviso curto no topo do simulador, pra ela saber ANTES de escolher a foto. Discreto de propósito: não é erro, é uma promessa diferente. Vermelho aqui faria a pessoa achar que o site quebrou e sair. */ .sem-previa-agora{margin:0 0 18px;padding:12px 14px;border-left:3px solid var(--bronze); background:rgba(0,0,0,.035);font-size:.9rem;line-height:1.55;color:var(--suave)} .faixa-promo{background:var(--bronze);overflow:hidden;position:relative} .faixa-promo::before,.faixa-promo::after{content:"";position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none} .faixa-promo::before{left:0;background:linear-gradient(90deg,var(--bronze),transparent)} .faixa-promo::after{right:0;background:linear-gradient(270deg,var(--bronze),transparent)} .fp-in{display:flex;width:max-content;animation:fpcorre 28s linear infinite} .faixa-promo:hover .fp-in{animation-play-state:paused} .fp-in span{font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase; color:#FCFAF6;padding:9px 0;white-space:nowrap;display:flex;align-items:center} .fp-in span::after{content:"\2666";margin:0 26px;opacity:.5;font-size:.66rem} @keyframes fpcorre{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.fp-in{animation:none}} .cupom-fundo{position:fixed;inset:0;z-index:200;background:rgba(20,17,13,.55); -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px); display:flex;align-items:center;justify-content:center;padding:20px; animation:cupomEntra .22s ease-out} @keyframes cupomEntra{from{opacity:0}to{opacity:1}} .cupom-cx{position:relative;background:var(--pedra);border:1px solid var(--linha); max-width:420px;width:100%;padding:34px 30px 28px;text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.28)} .cupom-cx h3{font-size:clamp(1.2rem,3.6vw,1.6rem);margin:10px 0 12px;line-height:1.25} .cupom-cx p{font-size:.88rem;color:var(--suave);line-height:1.7;margin-bottom:20px} .cupom-cx .bt{width:100%;margin-bottom:10px} .cupom-cod{font-family:'Oswald',sans-serif;font-size:1.5rem;letter-spacing:.28em; color:var(--bronze2);border:1px dashed var(--bronze);padding:14px 10px; margin-bottom:20px;cursor:pointer;user-select:all;transition:.15s} .cupom-cod:hover{background:var(--pedra2);border-style:solid} .cupom-x{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--suave); font-size:1.6rem;line-height:1;cursor:pointer;padding:6px 10px} .cupom-x:hover{color:var(--claro)} .cupom-depois{background:none;border:none;color:var(--suave);font-family:inherit; font-size:.8rem;cursor:pointer;text-decoration:underline;padding:4px} .cupom-depois:hover{color:var(--claro)} /* ---------- marca tipográfica no cabeçalho ---------- Entrou em 17/08/2026, no lugar do selo redondo. A regra de altura antiga foi feita pra marca QUADRADA: aplicada numa marca deitada de 2,25 por 1, deixava o WEN minúsculo ao lado do menu. Aqui ela ganha altura menor e largura própria, que é o que equilibra os dois. */ .topo .marca img.logo{height:auto;width:clamp(120px,13vw,168px)} @media(max-width:900px){.topo .marca img.logo{width:clamp(108px,26vw,140px)}} /* ---------- a linha que tira o medo de clicar ---------- Fica colada na caixa de mandar a foto, e não na capa. A dúvida "vou ter que me cadastrar?" não existe antes de a pessoa ver o botão, então a resposta também não precisa existir antes dele. */ .tranquiliza{text-align:center;font-size:.84rem;color:var(--suave);margin-top:14px} /* ---------- o botão da WenIA é redondo ---------- Ele TINHA border-radius 50% desde o começo e mesmo assim aparecia quadrado. O culpado é o `*, ::before, ::after { border-radius: 0 !important }` do gurroffe.css, que existe de propósito: o site é de canto reto, e essa regra é o que garante isso em tudo que for acrescentado depois sem ninguém lembrar. Então aqui a exceção precisa gritar mais alto que a regra geral, e é por isso que tem !important. Não é preguiça: tirar o !important faz o botão voltar a ser quadrado na hora. Vale pra bolinha verde do canto também, que estava quadrada pelo mesmo motivo e ninguém tinha reparado. */ .wenia-b,.wenia-b .pisca{border-radius:50% !important} /* ---------- tabela dos outros pisos ---------- Substituiu quatro cartões que gastavam 1400px de celular pra dizer três palavras cada. Em tabela a pessoa lê na vertical e vê sozinha que só uma linha fica verde nas três colunas. Rola sozinha na horizontal se a tela for muito estreita, dentro do próprio quadro: a PÁGINA nunca pode rolar pro lado. */ .tab-pisos{margin-top:28px;overflow-x:auto;border:1px solid var(--linha);background:var(--pedra)} .tab-pisos table{width:100%;border-collapse:collapse;min-width:380px} .tab-pisos caption{caption-side:top;text-align:left;padding:16px 18px 12px; font-family:'Oswald',sans-serif;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--bronze2)} .tab-pisos th,.tab-pisos td{padding:13px 16px;text-align:left;font-size:.9rem; border-top:1px solid var(--linha)} .tab-pisos thead th{font-family:'Oswald',sans-serif;font-weight:500;font-size:.64rem; letter-spacing:.16em;text-transform:uppercase;color:var(--suave); border-top:0;padding-top:0} .tab-pisos tbody th{font-weight:500;color:var(--claro)} .tab-pisos td{color:var(--suave)} .tab-pisos .bom{color:#2F6B45} .tab-pisos .medio{color:#9A6A12} .tab-pisos .ruim{color:#A8382F}/* No celular a tabela estava passando de 351px e obrigava a arrastar pro lado pra ver a última coluna. São quatro palavras curtas: cabe, é só apertar o respiro. Arrastar de lado pra ler quatro palavras é o tipo de atrito que faz a pessoa pular a comparação inteira. */ @media(max-width:430px){ .tab-pisos table{min-width:0} .tab-pisos th,.tab-pisos td{padding:11px 8px;font-size:.82rem} .tab-pisos thead th{font-size:.58rem;letter-spacing:.08em} .tab-pisos caption{padding:14px 10px 10px} } /* ---------- comparação: cartão e tabela lado a lado ---------- Antes eram cinco cartões numa grade de três colunas. Sobrou um, e a grade continuou reservando as três: dois terços da largura viravam um bloco cinza vazio, que é o jeito mais rápido de um site parecer inacabado. Lado a lado além de tapar o buraco lê melhor: o que a Wen vende de um lado, o resto do mercado do outro, na mesma altura do olho. A tabela cola no topo porque o cartão é bem mais alto que ela, e tabela centralizada num vão alto fica boiando. */ .comparar{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:22px;align-items:start} .comparar .plano.destaque{grid-row:auto;grid-column:auto;margin:0} .comparar .tab-pisos{margin-top:0} @media(max-width:860px){ .comparar{grid-template-columns:1fr;gap:18px} } /* ---------- a marca IA ---------- Existe pra quem NÃO lê. A tarja de texto explicava direito e mesmo assim quem passava o olho não percebia que era inteligência artificial, porque a palavra só aparecia dentro de um parágrafo. O quadrado dourado com IA resolve isso antes da leitura: ele lê como selo, e selo a pessoa reconhece sem decifrar. É o mesmo desenho do selo-ia do simulador de propósito, pra ser a mesma coisa nas duas páginas e não parecer dois recursos diferentes. */ .chip-ia{display:inline-flex;align-items:center;gap:10px; font-family:'Oswald',sans-serif;font-size:.68rem;letter-spacing:.22em; text-transform:uppercase;color:var(--bronze2)} .chip-ia i{font-style:normal;font-size:.76rem;letter-spacing:.1em; background:var(--bronze);color:#FCFAF6;padding:5px 9px;line-height:1} /* ---------- a marca do cabeçalho, menor ---------- Pedido do Gustavo em 17/08: ela estava competindo com o menu. Marca de cabeçalho tem que identificar, não ocupar. */ /* A marca tipográfica saiu do cabeçalho em 17/08: a Wen vai mandar a marca dágua oficial dela, e identidade visual entra no plano de social media do Guilherme. O selo redondo volta, e com ele volta a regra de ALTURA, que é a certa pra marca quadrada. A wen-marca.svg continua em img/ e na página _proposta-logo/. */ .topo .marca img.logo{height:clamp(46px,6.4vw,64px);width:auto} /* =========================================================== A OBRA COMO FUNDO DA CAPA Refeito em 19/08 com as marcações do Gustavo. Três medidas mudaram, e as três vêm da mesma queixa: a foto era pequena e o texto ficava espremido no meio da tela. . a foto vai de 62% pra 72% da largura . o gradiente virou uma FAIXA ESTREITA, de 0 a 26% da foto, em vez de meia tela de véu. Fora dela a obra aparece limpa . o texto grudou na esquerda, com margem própria, em vez de seguir o .wrap centralizado A tela de referência é 1920 por 1080 com zoom em 100%, que é o monitor dele. Nessa tela TUDO da capa precisa caber sem rolar, dos selos até o título. =========================================================== */ /* Apertado de novo em 19/08: o pé dos selos ainda cortava numa tela de 1080. Cada respiro aqui foi cedendo um pouco até a capa inteira caber, e o título é o que menos cede, porque ele é o que vende. */ .capa{position:relative;overflow:hidden; padding-top:clamp(18px,1.8vw,30px);padding-bottom:clamp(18px,2vw,32px)} .capa .wrap{position:relative;z-index:2} .capa-fundo{position:absolute;top:0;right:0;width:52%;height:min(100%,86vh);z-index:1} .capa-fundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 56%;opacity:0;transition:opacity 1.1s ease} .capa-fundo img.on{opacity:1} /* ---------- a faixa do gradiente ---------- Ela é ESTREITA de propósito. A primeira versão cobria 68% da foto e lavava a obra inteira. Depois foi pra 32%, e em 25/08/2026 o Gustavo pediu pra encolher mais: a mancha ainda comia piso demais. AGORA É UM NÚMERO SÓ. Pra apertar ou afrouxar, mexe no --capa-fade aqui embaixo e mais nada: os quatro pontos da transição andam junto, e o mesmo valor vale pra versão sem color-mix. Antes eram oito números espalhados em dois blocos, e mudar um e esquecer o outro deixava o navegador antigo com um gradiente diferente do novo. 32% como estava 20% como está <- mexe aqui 14% bem discreto */ .capa-fundo{--capa-fade:20%} .capa-fundo::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to right, var(--carvao) 0%, color-mix(in srgb, var(--carvao) 90%, transparent) calc(var(--capa-fade) * 0.25), color-mix(in srgb, var(--carvao) 62%, transparent) calc(var(--capa-fade) * 0.53), color-mix(in srgb, var(--carvao) 28%, transparent) calc(var(--capa-fade) * 0.78), transparent var(--capa-fade))} @supports not (background: color-mix(in srgb, red 50%, transparent)) { .capa-fundo::after{background:linear-gradient(to right, rgba(250,248,242,1) 0%, rgba(250,248,242,.90) calc(var(--capa-fade) * 0.25), rgba(250,248,242,.62) calc(var(--capa-fade) * 0.53), rgba(250,248,242,.28) calc(var(--capa-fade) * 0.78), rgba(250,248,242,0) var(--capa-fade))} } .capa-fundo::before{content:"";position:absolute;left:0;right:0;bottom:0;height:26%; z-index:1;pointer-events:none; background:linear-gradient(to top, var(--carvao) 0%, color-mix(in srgb, var(--carvao) 26%, transparent) 55%, transparent 100%)} @supports not (background: color-mix(in srgb, red 50%, transparent)) { .capa-fundo::before{background:linear-gradient(to top, rgba(250,248,242,1) 0%, rgba(250,248,242,.26) 55%, rgba(250,248,242,0) 100%)} } /* ---------- o texto encosta na esquerda ---------- O .wrap é centralizado e tem largura máxima, então numa tela de 1920 ele deixava 260px de margem antes do título. Aqui a capa ignora isso e usa margem própria, pequena, que é o que o Gustavo marcou. */ /* O .wrap do site usa WIDTH: min(1240px,90vw) e margin auto, então mexer em max-width aqui não fazia nada, e o texto continuava centralizado com 370 pixels de margem numa tela de 1920. Aqui a largura vira 100% e a margem some, que é o que joga o texto pra esquerda de verdade. */ .capa .wrap{width:100%;max-width:none;margin:0; padding-left:clamp(20px,3.6vw,72px);padding-right:0} /* O texto para ANTES da faixa do gradiente começar. Sem isso o título cai em cima da casa e fica ilegível na hora que o rodízio troca pra uma obra clara. */ .capa .wrap > *{max-width:min(100%,44vw)} .capa .selos{max-width:min(100%,46vw)} /* ---------- CAPA SEM FOTO DO LADO ---------- 25/08/2026. A regra .capa .wrap acima ancora o texto na esquerda, e ela foi feita pra HOME, onde a metade direita e ocupada pela foto da obra. Nas outras paginas nao existe foto ali, entao sobrava meia tela vazia, e o cabecalho ficava desalinhado da grade que vem logo abaixo, que e centralizada e tem largura maxima. .capa-larga devolve o .wrap normal do site: mesma largura, mesma margem, tudo em uma coluna so. */ .capa.capa-larga .wrap{width:min(1240px,90vw);max-width:none;margin:0 auto; padding-left:0;padding-right:0} .capa.capa-larga .wrap > *{max-width:none} .capa.capa-larga .selos{max-width:none} /* ---------- caber em 1080 ---------- Cada respiro daqui foi medido pra capa inteira caber numa tela de 1920x1080 com zoom em 100%, incluindo os três selos do pé. */ .capa .olho{margin-bottom:6px} .capa h1{margin-bottom:4px;line-height:1.06} .capa .slogan-wen{margin-bottom:6px} .capa .fio{margin:10px 0} .capa .legenda{margin-bottom:16px} .capa .cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px} .capa .cta .bt{margin:0} /* =========================================================== TELA LARGA E BAIXA, QUE E O MACBOOK 25/08/2026. Toda a capa foi calibrada pra 1920x1080, e la ela cabe. Num MacBook a 100% de zoom ela estoura: o titulo quebra em TRES linhas, os botoes descem pro rodape e os tres selos ficam fora da tela. A pessoa abre o site e a primeira coisa que ve e um pedaco. A CAUSA E A UNIDADE. Todos os tamanhos daqui sao calculados em vw, ou seja, pela LARGURA. E o MacBook e largo: 1512 de largura contra uns 850 de altura util depois da barra do navegador. Largura sobra, altura falta, e o vw nao sabe disso. Entao esta faixa mexe so quando a tela e larga E baixa. Monitor grande continua exatamente como estava, e celular tambem, porque ele nem chega aqui: a regra exige 981px de largura pra cima. O que cede, na ordem em que eu cedi: . as margens entre os blocos, que ninguem nota . a coluna do texto, que alarga e faz o titulo caber em 2 linhas . o titulo, que cede por ultimo e o minimo, porque e o que vende =========================================================== */ @media (min-width:981px) and (max-height:920px) { .capa{padding-top:clamp(12px,1.2vw,20px);padding-bottom:clamp(12px,1.2vw,20px)} /* A coluna alarga o suficiente pro titulo cair de TRES linhas pra DUAS, e nao mais que isso. Na primeira tentativa eu botei 48vw e ele caiu pra UMA linha: com 129px sobrando na tela, um titulo comprido e fino atravessando a largura toda. Cabia, e ficava pior. Duas linhas e o desenho certo aqui, e a folga que sobrou foi devolvida em tamanho de letra. */ .capa .wrap > *{max-width:min(100%,44vw)} .capa .selos{max-width:min(100%,46vw)} .capa h1{font-size:clamp(1.9rem,3.9vw,3.4rem);margin-bottom:2px} .capa .olho{margin-bottom:3px} .capa .slogan-wen{margin-bottom:3px} .capa .fio{margin:7px 0} .capa .legenda{font-size:1rem;line-height:1.65;margin-bottom:12px} .capa .cta{gap:10px;margin-bottom:10px} .capa .selos{margin-top:12px;padding-top:12px;gap:clamp(12px,1.6vw,26px)} .capa .selo b{font-size:clamp(1.25rem,1.5vw,1.55rem)} } /* tela ainda mais baixa, tipo MacBook Air com a barra de favoritos aberta. Aqui o titulo cede mais um pouco, porque nao cabe de outro jeito e meio titulo na tela e pior que um titulo menor. */ @media (min-width:981px) and (max-height:800px) { /* medido em 1440x790: com 2,6rem o titulo voltava pra UMA linha e ainda sobravam 82px de tela. Cabia e ficava fraco. */ .capa h1{font-size:clamp(1.8rem,3.6vw,3.1rem)} .capa .legenda{font-size:.96rem;line-height:1.6;margin-bottom:10px} .capa .selos{margin-top:10px;padding-top:10px} .capa .selo b{font-size:clamp(1.15rem,1.35vw,1.4rem)} } /* Tela bem baixa, tipo MacBook Air 13 com a barra de favoritos aberta, ou notebook de 1366x768. Medido em 1440x720: com a regra de cima o pe dos selos passava 49px da tela. Aqui o titulo cede de verdade, e uma linha e aceitavel: titulo menor e melhor do que conteudo cortado, porque cortado a pessoa nem sabe que existe. */ @media (min-width:981px) and (max-height:745px) { .capa{padding-top:10px;padding-bottom:10px} .capa h1{font-size:clamp(1.7rem,2.9vw,2.45rem);margin-bottom:1px} .capa .olho{margin-bottom:2px} .capa .slogan-wen{margin-bottom:2px} .capa .fio{margin:5px 0} .capa .legenda{font-size:.92rem;line-height:1.55;margin-bottom:8px} .capa .cta{gap:8px;margin-bottom:8px} .capa .selos{margin-top:8px;padding-top:8px;gap:clamp(10px,1.2vw,20px)} .capa .selo b{font-size:clamp(1.05rem,1.2vw,1.25rem)} } /* ---------- os três selos ---------- Eram flex com largura automática, então cada coluna ficava do tamanho do próprio texto: "Grátis" ocupava um terço do que "Alto Tietê" ocupava, e as descrições embaixo começavam em pontos diferentes. Lido de longe parecia que cada um tinha um tamanho de fonte. Em grade de três colunas iguais eles se alinham sozinhos, e o topo das descrições bate mesmo quando uma quebra em duas linhas e a outra não, por causa do align-items. */ .capa .selos{display:grid;grid-template-columns:repeat(3,1fr);align-items:start; margin-top:18px;padding-top:16px;gap:clamp(16px,2vw,32px)} .capa .selo{max-width:none} /* ---------- os títulos dos três selos ---------- Dois defeitos, e os dois saem da mesma origem: a Cormorant Garamond estava no peso 300. 1. O TRAÇO DO A sumia. Nesse peso a barra do A vira um fio de menos de um pixel, e "Alto" lia como "/\lto". Peso 400 devolve a barra sem engordar a letra a ponto de perder a elegância. 2. O 2 PARECIA MENOR que as letras. Não era: a fonte usa algarismo antigo por padrão, que tem altura de minúscula e desce da linha, então o 2 de "2 minutos" ficava do tamanho de um "o" ao lado do "A" de "Alto Tietê". lining-nums põe o número na altura de maiúscula, que é o que o olho espera numa linha de destaque. */ .capa .selo b{font-size:clamp(1.5rem,1.7vw,1.9rem);line-height:1.15; font-weight:400; font-variant-numeric:lining-nums; -moz-font-feature-settings:"lnum"; -webkit-font-feature-settings:"lnum"; font-feature-settings:"lnum"; display:block;margin-bottom:6px} .capa .selo span{font-size:.86rem;line-height:1.6;margin-top:0} @media(max-width:820px){ .capa .selos{grid-template-columns:1fr;gap:18px} } .capa .faixa-ia{margin-top:0} @media(max-width:1180px){ .capa-fundo{width:56%;height:min(100%,74vh)} .capa-nav{left:72%} .capa .wrap > *{max-width:min(100%,440px)} } /* ---------- celular ---------- A foto sobe pro TOPO da capa, e não fica no pé: a capa de celular passa de 1400px, e uma faixa de obra depois de tudo isso está a três rolagens de distância. No topo ela é a primeira coisa que aparece. */ @media(max-width:820px){ .capa-fundo{top:0;bottom:auto;left:0;width:100%;height:min(34vh,260px)} .capa-fundo img{object-position:50% 62%} .capa-fundo::after{background:linear-gradient(to bottom, transparent 0%, transparent 46%, color-mix(in srgb, var(--carvao) 34%, transparent) 70%, color-mix(in srgb, var(--carvao) 82%, transparent) 88%, var(--carvao) 100%)} @supports not (background: color-mix(in srgb, red 50%, transparent)) { .capa-fundo::after{background:linear-gradient(to bottom, rgba(250,248,242,0) 0%, rgba(250,248,242,0) 46%, rgba(250,248,242,.34) 70%, rgba(250,248,242,.82) 88%, rgba(250,248,242,1) 100%)} } .capa-fundo::before{display:none} .capa .wrap{padding-left:20px;padding-right:20px} .capa .wrap > *{max-width:100%} .capa{padding-top:calc(min(34vh,260px) + 16px)} /* ---------- UM RESPIRO ENTRE O MENU E A FOTO ---------- A foto encostava no menu, e sem nada entre os dois eles liam como um bloco só: a faixa clara do menu parecia parte da imagem. Um respiro de 12px já separa as duas coisas. */ .capa{margin-top:12px} .capa-fundo{top:12px} } /* ---------- setas e pontinhos ---------- SEM CAIXA EM VOLTA, pedido do Gustavo em 19/08. A barra escura com desfoque separava bem do fundo e parecia um controle de vídeo colado por cima da obra. Solto na foto fica mais limpo e mais caro. O preço de tirar a caixa é que a marca precisa se defender sozinha em foto clara e em foto escura, e é isso que a sombra abaixo faz: ela segura a forma sem pintar retângulo nenhum. */ /* CENTRADAS NA FOTO, e não no canto. No canto direito elas brigavam com a coluna de botões flutuantes e ficavam espremidas na quina. O .capa-nav vive dentro do .capa-fundo, então centrar nele já põe a marca no meio da obra, que é onde o Gustavo apontou. */ /* Ela mora na .capa, e não dentro da foto, senão o texto por cima come o clique. Ver o comentário no montarCapaFundo do wen.js. O 74% é o meio da foto: a foto ocupa os 52% da direita, então o centro dela está a 100 menos 26 por cento da tela. */ .capa-nav{position:absolute;left:74%;transform:translateX(-50%); bottom:clamp(16px,2.2vw,30px); z-index:5;display:flex;align-items:center;gap:4px;padding:0} /* A ÁREA DE CLIQUE É MAIOR QUE O DESENHO. A seta tinha 24 por 24 e o ponto 13 por 13, e dedo em tela de celular erra alvo abaixo de uns 44. O padding aumenta o alvo, a margem negativa devolve o espaço, e o desenho continua do tamanho que estava. */ /* Sem margem negativa. Ela ampliava o alvo pra dentro do vizinho, e a caixa da seta acabava cobrindo a beirada do primeiro pontinho: o dedo mirava o ponto e acertava a seta. O gap do .capa-nav já dá o espaçamento, então o alvo cresce sem invadir ninguém. */ .cn-b{background:none;border:0;padding:9px;cursor:pointer;display:flex;line-height:0; color:#FFFFFF;opacity:.95;transition:.15s; filter:drop-shadow(0 1px 2px rgba(20,17,13,.9)) drop-shadow(0 0 7px rgba(20,17,13,.45))} .cn-b:hover{opacity:1;transform:scale(1.15)} .cn-b svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .cn-pontos{display:flex;gap:0;align-items:center;margin:0} /* O ALVO É O BOTÃO INTEIRO, e o ponto é só o desenho dentro dele. A primeira tentativa foi um ::after esticado em volta, e não pegou: pseudo-elemento não amplia a área de acerto do botão de forma confiável. Aqui o botão tem 30 por 30 de verdade, com fundo transparente, e o círculo é pintado por dentro. */ .cn-p{width:24px;height:24px;padding:0;border:0;cursor:pointer;position:relative; background:none;box-shadow:none;border-radius:50% !important} /* ---------- E AQUI O PONTO PRECISA DO !important TAMBEM ---------- 25/08/2026. O botao ja era redondo desde o comeco, mas quem aparece na tela e o ::before, e ELE estava quadrado: seis quadradinhos em cima da foto da obra. O motivo e o mesmo do .wenia-b algumas centenas de linhas acima, e por isso vale reler la: o gurroffe.css tem um `*, ::before, ::after { border-radius: 0 !important }` de proposito, porque o site e de canto reto. Sem !important aqui, a regra geral ganha e o ponto volta a ser quadrado. O ::before pega a regra geral igual ao elemento, e essa e a parte que engana: o botao redondo dava a impressao de que estava tudo certo, e o quadrado que aparecia era do desenho de dentro. */ .cn-p::before{content:"";position:absolute;left:50%;top:50%; width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50% !important; background:rgba(255,255,255,.78);transition:.2s; box-shadow:0 1px 2px rgba(20,17,13,.85), 0 0 6px rgba(20,17,13,.4)} .cn-p:hover::before{background:#FFFFFF;transform:scale(1.25)} .cn-p.on::before{background:#E8C97F;transform:scale(1.45); box-shadow:0 1px 3px rgba(20,17,13,.9), 0 0 9px rgba(232,201,127,.7)} @media(max-width:820px){ /* no celular a faixa está no TOPO e os flutuantes lá embaixo, então aqui não tem conflito e o recuo volta a ser pequeno */ /* no celular a foto ocupa a largura toda, então o meio dela é o meio da tela, e a barra fica no pé da faixa */ .capa-nav{left:50%;transform:translateX(-50%);right:auto; top:calc(min(34vh,260px) - 34px);bottom:auto;gap:11px} .cn-b svg{width:18px;height:18px} /* o DESENHO diminuiu no computador, mas no celular quem clica e o dedo: o alvo volta pro tamanho de antes, e o ponto continua pequeno. Alvo abaixo de uns 44 faz errar e desistir. */ .cn-b{padding:11px} .cn-p{width:30px;height:30px} } /* ---------- a tarja da IA, com o selo ---------- Ela é LARGA de propósito e escapa da coluna do texto: o simulador é o que sustenta o preço do site, então ele não pode ter a mesma largura de um parágrafo qualquer. Fica sobre a parte já limpa da foto, por isso ganha fundo próprio e uma sombra leve: sem isso o texto dela some quando a obra do rodízio for clara. */ .capa .faixa-ia{max-width:min(100%,46vw);align-items:center;gap:20px; padding:16px 26px 16px 18px;margin-top:4px; background:color-mix(in srgb, var(--carvao) 93%, transparent); border:1px solid var(--linha2); box-shadow:0 6px 26px rgba(20,17,13,.08)} @supports not (background: color-mix(in srgb, red 50%, transparent)) { .capa .faixa-ia{background:rgba(250,248,242,.93)} } .capa .faixa-ia:hover{background:var(--pedra);border-color:var(--bronze)} /* ---------- A TARJA PRECISAVA PARECER BOTAO ---------- 25/08/2026, pedido dele: "a pessoa tem que ler tudo isso pra entender que e um botao que leva pra parte da IA". Ele esta certo, e o erro era meu. A tarja inteira sempre foi um link, mas o unico sinal disso era uma setinha fina la na ponta direita, a uns 600px do comeco da frase. Ninguem le tres linhas pra descobrir se vale clicar: ou da pra ver o proximo passo em um segundo, ou a pessoa rola a pagina e vai embora. Agora tem botao de verdade, o mesmo `.bt` do resto do site, logo embaixo do texto. EMBAIXO e nao do lado de proposito: a tarja tem largura limitada, e botao ao lado espremeria o texto de tres pra cinco linhas, piorando exatamente o que ele reclamou. A setinha solta da ponta saiu junto. Com o botao ali, ela virava segunda seta dizendo a mesma coisa. */ .ia-corpo{display:flex;flex-direction:column;align-items:flex-start;gap:13px;min-width:0} .faixa-ia .ia-bt{align-self:flex-start;text-decoration:none} .ia-bt i{font-style:normal} .ia-bt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:transform .25s} /* o hover e da TARJA INTEIRA, e nao do botao: a area clicavel e a tarja toda, entao o botao tem que acender junto com ela. Se so o botao acendesse, o resto pareceria enfeite morto. */ .faixa-ia:hover .ia-bt{background:var(--bronze3);border-color:var(--bronze3)} .faixa-ia:hover .ia-bt svg{transform:translateX(3px)} @media(max-width:520px){ .ia-corpo{gap:11px} .faixa-ia .ia-bt{width:100%;justify-content:center} } .ia-medalha{flex-shrink:0;display:block;line-height:0} .ia-medalha svg{width:clamp(44px,4vw,58px);height:auto;display:block; filter:drop-shadow(0 2px 5px rgba(120,90,25,.32))} .ia-medalha .ia-letra{font-family:'Oswald',sans-serif;font-size:19px;font-weight:600; letter-spacing:.04em;fill:#5E4410} .faixa-ia:hover .ia-medalha svg{transform:rotate(-4deg);transition:transform .25s ease} @media(max-width:820px){ .capa .faixa-ia{gap:14px;padding:14px 16px;max-width:100%} .ia-medalha svg{width:42px} .ia-medalha .ia-letra{font-size:20px} } /* =========================================================== O BALÃO DA WenIA E A BOLINHA DE AVISO Forma de mensagem de conversa, com o biquinho apontando pro botão, porque essa forma a pessoa já sabe ler: ela entende que alguém falou com ela, e não que apareceu um anúncio. Fica À ESQUERDA do botão, nunca em cima: o botão precisa continuar visível e clicável enquanto o balão está aberto. =========================================================== */ .wenia-balao{position:fixed;right:92px;bottom:154px;z-index:69; max-width:min(272px,calc(100vw - 120px)); background:var(--pedra);color:var(--claro); border:1px solid var(--linha2); padding:14px 30px 14px 16px; font-size:.88rem;line-height:1.6;cursor:pointer; box-shadow:0 10px 30px rgba(20,17,13,.16); opacity:0;transform:translateX(14px) scale(.94);transform-origin:right center; transition:opacity .32s ease, transform .32s cubic-bezier(.2,.9,.3,1.2)} .wenia-balao.on{opacity:1;transform:translateX(0) scale(1)} .wenia-balao:hover{border-color:var(--bronze)} /* o biquinho, apontando pro botão */ .wenia-balao::after{content:"";position:absolute;right:-8px;bottom:20px; width:14px;height:14px;background:var(--pedra); border-right:1px solid var(--linha2);border-top:1px solid var(--linha2); transform:rotate(45deg)} .wb-x{position:absolute;top:4px;right:6px;background:none;border:0; color:var(--suave);font-size:1.15rem;line-height:1;cursor:pointer;padding:2px 5px} .wb-x:hover{color:var(--claro)} /* A bolinha vermelha. Ela é o que continua chamando depois que o balão se recolhe, e some pra sempre quando a pessoa abre o assistente. */ .wenia-n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px; background:#D7382C;color:#fff;border-radius:50% !important; font-family:'Jost',sans-serif;font-size:.68rem;font-weight:500; display:flex;align-items:center;justify-content:center; border:2px solid var(--carvao);box-shadow:0 1px 4px rgba(0,0,0,.3)} /* NO CELULAR O BALÃO VAI PRA CIMA DO BOTÃO, e não pro lado dele. Ao lado ele atravessava a tela inteira e sentava em cima do parágrafo da capa, porque numa largura de 390 não existe "ao lado". Em cima, ele encosta na coluna dos flutuantes e deixa o texto livre. O biquinho vira pra baixo junto, senão ele apontaria pro nada. */ @media(max-width:720px){ .wenia-balao{right:8px;bottom:172px;max-width:min(250px,calc(100vw - 24px)); padding:11px 26px 11px 13px;font-size:.83rem;line-height:1.5; transform-origin:bottom right;transform:translateY(10px) scale(.94)} .wenia-balao.on{transform:translateY(0) scale(1)} .wenia-balao::after{right:14px;bottom:-8px;top:auto; border-right:1px solid var(--linha2);border-top:0; border-bottom:1px solid var(--linha2);transform:rotate(45deg)} } @media(max-width:400px){ .wenia-balao{bottom:158px;max-width:min(228px,calc(100vw - 20px));font-size:.8rem} } @media(prefers-reduced-motion:reduce){ .wenia-balao{transition:opacity .2s ease} .wenia-balao.on{transform:none} } /* =========================================================== OS BOTÕES FLUTUANTES NO CELULAR Eles vinham com 52 e 48 pixels, que é tamanho de tela grande. Numa tela de 390 essa coluna vira uma parede: ela cobre o canto direito da página inteira, e nas seções com foto e legenda ela sentava em cima do texto, como aconteceu no cartão "Escadão e muro". Aqui eles caem pra 42, com o WenIA em 44 por ser o principal dos três. Continua acima do mínimo de toque, e devolve a largura da página. =========================================================== */ @media(max-width:720px){ .flutuantes{right:10px;bottom:12px;gap:8px} .flutuantes .zap,.insta{width:42px !important;height:42px !important} .flutuantes .zap svg,.insta svg{width:21px;height:21px} .wenia-b{right:10px;bottom:118px;width:44px;height:44px} .wenia-b .m{font-size:.76rem;letter-spacing:0} .wenia-n{min-width:16px;height:16px;font-size:.6rem;top:-4px;right:-4px;border-width:1.5px} } @media(max-width:400px){ .flutuantes .zap,.insta{width:38px !important;height:38px !important} .flutuantes .zap svg,.insta svg{width:19px;height:19px} .wenia-b{width:40px;height:40px;bottom:108px} .wenia-b .m{font-size:.68rem} } /* =========================================================== AVISO DE COOKIE O site NAO TEM cookie nenhum hoje, nem pixel, nem analytics, nem nada de terceiro. Guarda duas chaves no localStorage do proprio navegador, as duas so pra nao repetir a mesma coisa na cara da pessoa: se o balao da WenIA ja apareceu, e se o cupom ja apareceu. Por isso o aviso NASCE COMO AVISO, com um botao so. Barra de consentimento com "aceitar" e "recusar" pedindo permissao pra coisa que nao existe e teatro, e teatro custa conversao. QUANDO ENTRAR PIXEL DA META OU ANALYTICS: liga MEDICAO no wen.js e a mesma barra vira consentimento de verdade, com os dois botoes. Nao precisa mexer em css. Fica embaixo E A ESQUERDA de proposito: os botoes flutuantes moram embaixo a direita. No celular nao cabe lado a lado, entao a barra ocupa a largura toda e empurra os botoes pra cima enquanto aparece. =========================================================== */ /* A BARRA NASCE VISIVEL, e a animacao e so enfeite por cima. Escrito assim depois de um teste em 19/08/2026: na primeira versao ela nascia com opacity 0 e so aparecia quando a transicao de css rodasse. Num navegador com a transicao congelada, ela ficava criada, ocupando lugar, clicavel e INVISIVEL. Aviso de privacidade que ninguem ve e pior que aviso nenhum, porque parece que esta cumprindo a lei e nao esta. A BARRA NAO TEM ANIMACAO DE ENTRADA, e isso e decisao, nao esquecimento. Foram tres tentativas em 19/08/2026, cada uma falhando pelo mesmo motivo de fundo: transition + classe a transicao nao rodou, ficou em opacity 0 animation com "both" fill pra tras segura o estado INICIAL animation sem fill relogio parado em 0 aplica o primeiro quadro Em todas, o resultado era o mesmo: a barra criada, ocupando lugar, clicavel e INVISIVEL. Aviso de privacidade que ninguem ve e pior que aviso nenhum, porque parece que esta cumprindo a lei e nao esta. Entao ela simplesmente aparece. Nenhum estado visual dela depende de um quadro de animacao ter rodado. A saida continua com fade, porque la o pior caso e sumir na hora, que nao machuca ninguem. */ .aviso-ck{position:fixed;left:16px;bottom:16px;z-index:70; width:min(460px,calc(100vw - 32px)); background:var(--pedra);border:1px solid var(--linha2); box-shadow:0 10px 34px rgba(27,24,21,.13),0 2px 8px rgba(27,24,21,.07); padding:18px 20px 16px; } .aviso-ck.saindo{animation:ck-sai .3s ease forwards;pointer-events:none} @keyframes ck-sai{from{opacity:1;transform:none} to{opacity:0;transform:translateY(18px)}} @media(prefers-reduced-motion:reduce){ .aviso-ck,.aviso-ck.saindo{animation-duration:.01ms} } .aviso-ck b{display:block;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--bronze2);font-weight:400;margin-bottom:9px} .aviso-ck p{margin:0 0 14px;font-size:.86rem;line-height:1.62;color:var(--suave)} .aviso-ck p a{color:var(--bronze2);text-decoration:underline; text-underline-offset:3px;text-decoration-thickness:1px} .aviso-ck .ck-bts{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .aviso-ck button{font:inherit;font-size:.84rem;cursor:pointer; padding:10px 20px;border:1px solid var(--bronze);background:var(--bronze); color:#FFFDF7;transition:.16s;line-height:1.2} .aviso-ck button:hover{background:var(--bronze3);border-color:var(--bronze3)} .aviso-ck button.ck-2{background:none;color:var(--bronze2);border-color:var(--linha2)} .aviso-ck button.ck-2:hover{background:var(--pedra2);border-color:var(--bronze)} .aviso-ck button:focus-visible{outline:2px solid var(--bronze3);outline-offset:2px} /* enquanto a barra esta na tela, os botoes flutuantes sobem pra nao ficarem um por cima do outro */ @media(max-width:720px){ .aviso-ck{left:10px;right:10px;bottom:10px;width:auto;padding:15px 16px 14px} .aviso-ck p{font-size:.83rem;margin-bottom:12px} .aviso-ck button{flex:1 1 auto;text-align:center;padding:11px 14px} body.tem-aviso .flutuantes{bottom:calc(12px + var(--alt-aviso,150px))} body.tem-aviso .wenia-b{bottom:calc(118px + var(--alt-aviso,150px))} body.tem-aviso .wenia-balao{bottom:calc(172px + var(--alt-aviso,150px))} } @media(max-width:400px){ body.tem-aviso .flutuantes{bottom:calc(12px + var(--alt-aviso,150px))} body.tem-aviso .wenia-b{bottom:calc(108px + var(--alt-aviso,150px))} } /* a barrinha de prévia da Solarys nao pode brigar com o aviso */ /* O selo subiu pra tarja em 25/08, e o aviso de cookies fica no pe da tela. Nao se cruzam mais, entao ele nao precisa sumir. */ /* body.tem-aviso .previa-sol{display:none} */ /* ---------- puxador do comparador ---------- Ganhou seta dentro e foco visivel em 19/08/2026. Antes era uma bolinha vazia e sem teclado: lia como enfeite, e enfeite ninguem arrasta. A seta e a unica coisa da tela que diz "isto anda". */ .comparador .puxador{outline:none} .comparador .pux-setas{position:absolute;top:50%;left:50%; transform:translate(-50%,-50%);width:26px;height:12px;z-index:1; color:var(--bronze);pointer-events:none} .comparador .puxador::after{background:rgba(250,248,242,.9)} .comparador .puxador:focus-visible::after{ box-shadow:0 0 0 3px var(--bronze3);border-color:var(--bronze3)} /* ---------- os dois botoes de foto ---------- So no celular. No computador a caixa inteira ja e clicavel e recebe arrasto, e dois botoes ali em cima so ocupariam espaco. */ .solta-bts{display:none} .solta input{display:none} @media(max-width:720px), (pointer:coarse){ .solta{padding:26px 16px} /* teto de largura porque a regra tambem pega notebook com tela de toque, onde a caixa e larga: sem isso os dois botoes viravam dois retangulos de 600 pixels */ .solta-bts{display:flex;gap:10px;margin-top:18px; max-width:420px;margin-left:auto;margin-right:auto} .solta-bts button{flex:1 1 0;min-width:0;font:inherit;font-size:.83rem; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; padding:14px 8px;cursor:pointer;line-height:1.25;text-align:center; border:1px solid var(--bronze);background:var(--bronze);color:#FFFDF7} .solta-bts button:last-child{background:none;color:var(--bronze2);border-color:var(--linha2)} .solta-bts svg{width:22px;height:22px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0;flex:none} .solta-bts button:active{transform:translateY(1px)} } /* ---------- os tres flutuantes, mesmo tamanho e mesmo eixo ---------- 19/08/2026. Vinham de arquivos diferentes e por isso tinham tres medidas: whatsapp 56, instagram 52 e WenIA 58, com o WenIA ainda a 22 pixels da borda contra 18 dos outros. Empilhados, isso lia como descuido: o de cima maior que os de baixo e fora do eixo. Um tamanho so pra todos, e o mesmo afastamento, pra a coluna ficar uma coluna. */ .flutuantes .zap,.insta{width:52px !important;height:52px !important} .wenia-b{width:52px;height:52px;right:18px} @media(max-width:720px){ .flutuantes .zap,.insta{width:42px !important;height:42px !important} .wenia-b{width:42px;height:42px;right:10px} } @media(max-width:400px){ .flutuantes .zap,.insta{width:38px !important;height:38px !important} .wenia-b{width:38px;height:38px;right:10px} .wenia-b .m{font-size:.66rem} } /* ---------- desenho no piso ---------- */ .desenho-cx{border:1px solid var(--linha);border-top:0;background:var(--pedra); padding:16px 16px 14px} .desenho-cx label{display:block;font-size:.8rem;letter-spacing:.1em; text-transform:uppercase;color:var(--suave);margin-bottom:8px} .desenho-cx input[type=text]{width:100%;font:inherit;font-size:.92rem; padding:12px 14px;border:1px solid var(--linha2);background:var(--carvao2); color:var(--claro)} .desenho-cx input[type=text]:focus{outline:none;border-color:var(--bronze); background:var(--pedra)} .desenho-foto{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px} .desenho-foto button{font:inherit;font-size:.86rem;cursor:pointer;padding:10px 18px; border:1px solid var(--bronze);background:none;color:var(--bronze2);transition:.15s} .desenho-foto button:hover{background:var(--pedra2)} .desenho-foto #btDesenhoTira{border-color:var(--linha2);color:var(--suave);padding:8px 12px} .desenho-foto span{font-size:.84rem;color:var(--suave);flex:1 1 180px;min-width:0} .desenho-foto span.tem{color:var(--verde)} /* ---------- a base embaixo da amostra ---------- 21/08/2026. Duas amostras chamadas "Palha" existem, uma sobre cimento comum e outra sobre cimento branco, e na tela ficavam iguais. A base muda o resultado tanto quanto a pedra. */ .cor em{padding-bottom:2px} .cor i{display:block;padding:0 8px 9px;font-style:normal;font-size:.6rem; letter-spacing:.1em;text-transform:uppercase;color:var(--bronze2);opacity:.85; line-height:1.3} .cor.on i{opacity:1} /* =========================================================== O SIMULADOR COM CARA DE APLICATIVO 21/08/2026, pedido do Gustavo depois de eles acharem a tela trabalhosa. O conteudo nao mudou: mudou o que fica SEMPRE na tela. Numa pagina, a pessoa rola e perde a referencia: nao sabe em que passo esta nem onde fica o botao que continua. Num aplicativo, duas coisas nunca saem da vista, e sao exatamente essas duas. em cima a barra de passos, dizendo onde ela esta embaixo a acao principal, sempre ao alcance do polegar Nada disso e enfeite: os dois resolvem a mesma pergunta, que e "e agora, o que eu faco?". Quem nao sabe responder isso fecha a aba. =========================================================== */ /* ---------- a barra de passos gruda no topo ---------- */ .passos{position:sticky;top:0;z-index:40;margin:0 0 26px; background:var(--pedra);border:1px solid var(--linha); box-shadow:0 6px 18px rgba(27,24,21,.05)} .passo{position:relative;padding:15px 12px 14px} /* o passo ja cumprido ganha um tique no lugar do numero: e o jeito mais curto de dizer "isso ja foi" sem escrever nada */ .passo.feito::before{content:"";position:absolute;left:50%;top:6px; transform:translateX(-50%);width:5px;height:5px;border-radius:50%; background:var(--bronze)} /* fio de progresso embaixo da barra, como carregamento de aplicativo */ .passos::after{content:"";position:absolute;left:0;bottom:-1px;height:2px; width:var(--andado,33%);background:var(--bronze);transition:width .4s cubic-bezier(.3,.8,.3,1)} /* ---------- a acao principal gruda embaixo, no celular ---------- No computador ela continua no fim do formulario, que la a tela e grande e o botao aparece sem rolar. */ @media(max-width:720px){ .acoes-form{position:sticky;bottom:0;z-index:35;margin:22px -14px 0; padding:12px 14px calc(12px + env(safe-area-inset-bottom,0)); background:var(--pedra);border-top:1px solid var(--linha2); box-shadow:0 -6px 20px rgba(27,24,21,.08);gap:8px} .acoes-form .bt{flex:1 1 100%;text-align:center} .acoes-form .bt.fina{flex:1 1 auto} /* a barra de passos e mais baixa no celular, pra sobrar tela */ .passos{margin-bottom:20px} .passo{padding:12px 6px 11px;font-size:.62rem} } /* ---------- cada passo entra deslizando ---------- Sem fill-mode, pela mesma razao do aviso de cookie: se a animacao nao rodar, o conteudo ja esta no lugar certo. */ .tela.on{animation:tela-entra .32s cubic-bezier(.2,.7,.3,1)} @keyframes tela-entra{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} } @media(prefers-reduced-motion:reduce){.tela.on{animation-duration:.01ms}} /* ---------- o cartao de cada bloco ---------- Aplicativo separa assunto em cartao, pagina separa em titulo. Cartao e mais facil de varrer com o olho: a borda diz onde um assunto acaba e o proximo comeca, sem a pessoa ter que ler pra descobrir. */ .campo.largo{background:var(--pedra);border:1px solid var(--linha); padding:16px 16px 14px;margin-top:16px} .campo.largo > label:first-child{margin-top:0} /* =========================================================== O SIMULADOR VIRA APLICATIVO 21/08/2026. A primeira tentativa foi discreta demais: barra que gruda e cartao com borda. Quem ja sabe usar site nem nota, e quem nao sabe continua travando. O Gustavo viu isso na hora e estava certo. Quem vai usar isso e dona de casa de 60 anos decidindo o piso da entrada. Pra essa pessoa o problema nao e estetica, e QUANTIDADE DE DECISAO NA MESMA TELA. O passo 2 pedia oito coisas de uma vez, rolando, e rolar esconde o que ficou pra tras. Agora e uma pergunta por tela, do jeito que aplicativo de banco faz: . uma pergunta grande em cima, e so ela . opcoes em botao grande, que da pra acertar com o dedo torto . escolheu, ele mesmo passa pra proxima . o site em volta some, entao nao tem onde clicar errado . um botao so embaixo, sempre no mesmo lugar, dizendo o que vem O TEXTO EXPLICATIVO NAO SUMIU, ficou atras de um (?). Tela limpa le mais rapido e assusta menos, e quem quiser detalhe toca e abre. =========================================================== */ /* ---------- modo aplicativo ---------- */ body.app{overflow-x:hidden} body.app .topo,body.app .tarja,body.app .rodape,body.app .previa-sol, body.app .flutuantes,body.app .promo-faixa{display:none !important} /* ---------- A WENIA FICA, E SOZINHA ---------- 21/08/2026. WhatsApp e Instagram somem no modo aplicativo porque sao SAIDAS: levam a pessoa pra fora no meio do preenchimento, e ela ja esta engajada. A WenIA e o contrario, ela destrava a duvida e mantem a pessoa dentro, entao continua na tela, como bolinha, no lugar de sempre. Sobe acima da barra de baixo pra nao ficar uma coisa por cima da outra no passo 2. */ body.app .wenia-b{display:flex !important} body.app.no-passo2 .wenia-b{bottom:96px} body.app.no-passo2 .wenia-balao{bottom:150px} /* TUDO que nao e o simulador sai da pagina enquanto ela usa. Sem isto o corpo continuava com 8344 pixels de altura: a pessoa rolava pra baixo, caia no conteudo de venda no meio do preenchimento e a tela deixava de ser um aplicativo na hora. */ /* 03/09/2026: o aviso de manutencao entra na excecao junto do simulador. Sem isso o modo app escondia o aviso e a pagina abria vazia, que e exatamente o que a gente estava tentando evitar. */ body.app > section:not(#simulador):not(#simuladorPausado), body.app > main > section:not(#simulador):not(#simuladorPausado){display:none !important} body.app .wrap{width:min(620px,100%);padding-left:16px;padding-right:16px} body.app main,body.app section{padding-top:0} /* a barra do aplicativo, sempre no topo */ .app-topo{position:fixed;top:0;left:0;right:0;z-index:80; display:none;align-items:center;gap:10px; padding:10px 12px calc(10px);background:var(--pedra); border-bottom:1px solid var(--linha)} body.app .app-topo{display:flex} .app-topo .app-volta,.app-topo .app-x{ width:42px;height:42px;flex:none;border:1px solid var(--linha2); background:none;cursor:pointer;display:flex;align-items:center; justify-content:center;font:inherit;font-size:1.15rem;color:var(--claro); border-radius:50%;line-height:1;padding:0} .app-topo .app-volta svg{width:20px;height:20px} .app-topo .app-x{font-size:1.3rem;color:var(--suave)} /* a WenIA fica com cara de botao de verdade, e nao de icone solto: e ela que resolve a duvida que trava a pessoa no meio do formulario */ .app-topo .app-ajuda{flex:none;height:42px;padding:0 14px;cursor:pointer; border:1px solid var(--bronze);background:var(--bronze);color:#FFFDF7; font:inherit;font-size:.84rem;letter-spacing:.04em;border-radius:21px; display:flex;align-items:center;gap:7px;line-height:1} .app-topo .app-ajuda .pisca{width:7px;height:7px;border-radius:50%; background:#7FE08A;flex:none} .app-topo .app-x:hover,.app-topo .app-volta:hover{background:var(--pedra2)} .app-topo .app-ajuda:hover{background:var(--bronze3);border-color:var(--bronze3)} @media(max-width:400px){ .app-topo{gap:7px;padding:9px 9px} .app-topo .app-ajuda{padding:0 11px;font-size:.79rem} .app-topo .app-n{font-size:.62rem} .app-topo .app-n b{font-size:.74rem} } .app-topo .app-n{flex:1;text-align:center;min-width:0; font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.22em; text-transform:uppercase;color:var(--suave)} .app-topo .app-n b{display:block;color:var(--claro);font-weight:400; letter-spacing:.3em;font-size:.82rem} /* empurra o conteudo pra baixo da barra */ body.app #simulador{padding-top:74px} /* ---------- a pergunta ---------- */ .p2-cab{margin:6px 0 18px} .p2-cab h3{font-size:clamp(1.35rem,5.2vw,1.75rem);line-height:1.25; margin:0;font-weight:400;color:var(--claro)} .p2-cab .p2-ajuda{margin-top:10px;font-size:.9rem;line-height:1.6; color:var(--suave);display:none} .p2-cab.aberto .p2-ajuda{display:block} .p2-cab button{margin-top:8px;background:none;border:1px solid var(--linha2); color:var(--bronze2);font:inherit;font-size:.8rem;cursor:pointer; padding:6px 14px;border-radius:20px} .p2-cab button:hover{background:var(--pedra2)} /* ---------- uma tela por vez ---------- */ .tela2{display:none} .tela2.on{display:block;animation:t2-entra .26s cubic-bezier(.2,.7,.3,1)} @keyframes t2-entra{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.tela2.on{animation-duration:.01ms}} /* dentro da tela unica, os rotulos internos somem: a pergunta ja esta grande em cima e repetir confunde */ .tela2 > .campo > label:first-child{display:none} .tela2 .campo{margin:0} /* ---------- botao grande, de dedo ---------- */ body.app .esc{padding:17px 18px;font-size:1rem;letter-spacing:.02em; text-transform:none;min-height:56px;display:flex;align-items:center; justify-content:center;text-align:center;line-height:1.3} body.app #fMaterial,body.app #fMed{ display:grid;grid-template-columns:1fr;gap:9px} /* Os lugares sao doze, e doze botoes de largura inteira davam 684 pixels de rolagem so nessa tela. Em duas colunas cabem quase todos sem rolar, e o alvo continua grande o suficiente pro dedo. */ body.app #fLocal{display:grid;grid-template-columns:1fr 1fr;gap:9px} body.app #fLocal .esc{padding:14px 10px;font-size:.94rem;min-height:62px} body.app .fam-grade{gap:10px} body.app .fam-q{padding-bottom:12px} body.app .cores{gap:10px} /* ---------- a barra de baixo, sempre igual ---------- */ .p2-pe{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none; gap:10px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0)); background:var(--pedra);border-top:1px solid var(--linha2); box-shadow:0 -6px 20px rgba(27,24,21,.09)} body.app.no-passo2 .p2-pe{display:flex} .p2-pe .p2-volta{flex:0 0 auto;min-width:104px} .p2-pe .p2-segue{flex:1 1 auto} .p2-pe button{font:inherit;font-size:1rem;cursor:pointer;padding:15px 20px; border:1px solid var(--bronze);background:var(--bronze);color:#FFFDF7; min-height:54px;line-height:1.2} .p2-pe button:hover{background:var(--bronze3);border-color:var(--bronze3)} .p2-pe .p2-volta{background:none;color:var(--bronze2);border-color:var(--linha2)} .p2-pe .p2-volta:hover{background:var(--pedra2)} .p2-pe button[disabled]{opacity:.42;cursor:default} .p2-pe button[disabled]:hover{background:var(--bronze);border-color:var(--bronze)} /* espaco pra barra de baixo nao cobrir o fim do conteudo */ body.app.no-passo2 #simulador{padding-bottom:96px} /* ---------- pontinhos de progresso do passo 2 ---------- */ .p2-pontos{display:flex;gap:6px;justify-content:center;margin:0 0 16px} .p2-pontos i{width:7px;height:7px;border-radius:50%;background:var(--linha2); transition:.2s} .p2-pontos i.on{background:var(--bronze);transform:scale(1.3)} .p2-pontos i.feito{background:var(--bronze2);opacity:.55} /* no modo aplicativo a barra de tres passos vira so um fio fino: dois indicadores de progresso na mesma tela competem entre si */ body.app .passos{border:0;background:none;margin:0 0 14px;box-shadow:none} body.app .passo{display:none} body.app .passos::after{position:static;display:block;height:3px; background:var(--bronze);border-radius:2px} body.app .passos{background:var(--linha);height:3px;border-radius:2px} /* ---------- a moldura sai do passo 2 ---------- Medido em 21/08/2026: a pergunta ocupava 871 pixels e a moldura em volta ocupava 1100. Ou seja, mais da metade da rolagem era coisa que nao era a pergunta. Some no modo aplicativo: .selo-ia tarja de marketing, ja convenceu quem chegou aqui .passo-diz paragrafo explicando o formulario, que agora tem uma pergunta por tela e nao precisa de explicacao .acoes-form os botoes antigos, substituidos pela barra fixa O resto da pagina ja sai pela regra das secoes. */ body.app #t2 .selo-ia, body.app #t2 .passo-diz, body.app #t2 .acoes-form, body.app .selo-ia{display:none !important} body.app #t2 > .ajuda{display:none} /* a ponte pro assistente encolhe e vira uma linha, em vez de um bloco de 245 pixels no meio do caminho */ body.app .ponte-chat{padding:12px 14px;margin-top:14px} body.app .ponte-chat p,body.app .ponte-chat .olho{display:none} /* ---------- campo que faltou preencher ---------- Marca vermelha e um pulso curto. Nao e enfeite: e o que responde a pergunta "por que nao aconteceu nada quando eu apertei". */ .campo input.falta,.campo textarea.falta{ border-color:var(--vermelho) !important; background:rgba(168,56,47,.05); animation:falta-pulso .5s ease 2} @keyframes falta-pulso{ 0%,100%{box-shadow:0 0 0 0 rgba(168,56,47,0)} 50%{box-shadow:0 0 0 4px rgba(168,56,47,.16)}} @media(prefers-reduced-motion:reduce){ .campo input.falta,.campo textarea.falta{animation:none}} /* ---------- voltar onde parou ---------- */ .retomar{display:flex;align-items:center;gap:12px;flex-wrap:wrap; border:1px solid var(--bronze);background:var(--pedra2); padding:12px;margin:0 0 20px} .retomar img{width:64px;height:64px;object-fit:cover;flex:none;border:1px solid var(--linha2)} .retomar-txt{flex:1 1 140px;min-width:0} .retomar-txt b{display:block;font-weight:400;color:var(--claro);font-size:.98rem;line-height:1.3} .retomar-txt span{display:block;font-size:.82rem;color:var(--suave);margin-top:3px} .retomar-bts{display:flex;gap:8px;flex:1 1 100%} .retomar-bts .bt{flex:1 1 auto;padding:12px 14px;font-size:.9rem;text-align:center;min-height:48px} @media(min-width:560px){ .retomar-bts{flex:0 0 auto} .retomar-bts .bt{flex:0 0 auto} } /* =========================================================== LETRA E ALVO DE TOQUE NO CELULAR 21/08/2026, medido no site no ar. Duas coisas apareceram, e as duas pesam justamente pro publico que vai usar isto, que e gente mais velha decidindo o piso da casa: 26 alvos de toque com menos de 40 pixels de altura, incluindo o menu inteiro a 23 pixels 51 pedacos de texto com menos de 12,5 pixels, sendo que a BASE da pedra, que e informacao de verdade e nao enfeite, estava a 9,6 O que e rotulo decorativo pode continuar pequeno. O que e informacao nao pode: se a pessoa precisa daquilo pra escolher, ela precisa conseguir ler. =========================================================== */ @media(max-width:720px){ /* a base da pedra e a proporcao: isto e o que ela usa pra escolher. O seletor e .amostra-c em, e quem derrubava pra 0,6rem era o gurroffe.css. Aqui e a camada de cima, entao ela ganha. */ .amostra-c em,.amostra em,.cor em{font-size:.74rem !important;letter-spacing:.06em} .cor i{font-size:.7rem} /* e o menu chega nos 44 pixels que o dedo precisa */ .menu a{padding:13px 12px} /* legenda de foto e nome de obra */ .pisc-nome{font-size:.76rem} .selo-o{font-size:.7rem;padding:5px 9px} } /* o titulo fixo do passo 2 sai no modo aplicativo: cada tela ja tem a pergunta dela em cima, e o titulo antigo ficava contradizendo, tipo "Onde voce quer o revestimento" em cima da tela de observacoes */ body.app #tituloPasso2{display:none} /* ---------- a barra da geracao ---------- */ .barra-ia{width:min(340px,86%);height:6px;margin:18px auto 0; background:var(--linha);border-radius:3px;overflow:hidden} .barra-ia i{display:block;height:100%;width:0;background:var(--bronze); border-radius:3px;transition:width .45s linear} .barra-n{display:block;text-align:center;margin-top:9px; font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.14em; color:var(--bronze2)} /* ---------- OS DOIS MATERIAIS VIRARAM LINK ---------- 24/08/2026. Eram dois blocos de texto parados. Agora cada um leva pra carta de cores daquele material, entao precisam dizer que sao clicaveis: sem isso vira link escondido, que e pior que nao ter. */ a.mat{display:block;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s} a.mat:hover{border-color:var(--bronze);transform:translateY(-2px)} .mat-lk{display:block;margin-top:14px;font-family:'Oswald',sans-serif;font-size:.62rem; letter-spacing:.22em;text-transform:uppercase;color:var(--bronze2)} a.mat:hover .mat-lk{color:var(--bronze)} .mat-lk::after{content:" ƒA";font-weight:600} /* ---------- AS ABAS DA CARTA DE CORES ---------- 25/08/2026. Eram dois botoezinhos de texto, do tamanho de um link de rodape, numa pagina que e inteira sobre olhar pedra. Agora cada um mostra a textura do material, a mesma foto que aparece na secao "Fulget e Granilite" da home: a pessoa reconhece na hora que ja viu aquilo, e nao precisa ler pra saber qual e qual. O que esta escolhido tem a borda dourada e fica opaco de vez. O outro fica levemente apagado, e acende quando o mouse passa: sem isso os dois pareceriam ligados ao mesmo tempo. */ /* centralizadas: sao duas caixas de 230px numa pagina de 1240, e encostadas na esquerda elas ficavam soltas, com um vazio enorme do lado. No meio elas lem como o par de opcoes que sao. */ .cores-abas{display:flex;gap:14px;flex-wrap:wrap;justify-content:center} .cor-aba{display:block;width:230px;max-width:100%;border:1px solid var(--linha); background:var(--cx,#fff);text-decoration:none;overflow:hidden; /* a opacidade NAO entra na transicao: estado de "qual esta escolhido" tem que valer no primeiro quadro. Com transicao, um aparelho lento ou uma aba que abre em segundo plano mostram a aba certa apagada por um instante, e ai as duas parecem desligadas. */ transition:border-color .2s,transform .2s;opacity:.62} .cor-aba:hover{border-color:var(--bronze);transform:translateY(-2px);opacity:1} .cor-aba.on{border-color:var(--bronze);opacity:1;box-shadow:0 2px 0 0 var(--bronze)} .ca-foto{display:block;height:78px;overflow:hidden;line-height:0} .ca-foto img{width:100%;height:100%;object-fit:cover;display:block} .ca-txt{display:block;padding:11px 14px 13px} .ca-txt b{display:block;font-family:'Cormorant Garamond',serif;font-weight:400; font-size:1.12rem;color:var(--tinta);letter-spacing:.01em} .cor-aba.on .ca-txt b{color:var(--bronze2)} .ca-txt em{display:block;margin-top:2px;font-style:normal;font-family:'Oswald',sans-serif; font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--suave)} @media(max-width:520px){ .cores-abas{gap:10px} .cor-aba{width:calc(50% - 5px)} .ca-foto{height:64px} } /* quando um material ainda nao tem foto de amostra nenhuma */ .cores-vazio{border:1px solid var(--linha);border-left:3px solid var(--bronze); background:rgba(0,0,0,.02);padding:28px 30px;max-width:70ch} .cores-vazio h3{margin:0 0 14px;font-size:1.25rem} .cores-vazio p{margin:0 0 12px;line-height:1.65;color:var(--suave)} /* ---------- A AMOSTRA FICA DO TAMANHO DA HOME, DE PROPOSITO ---------- 25/08/2026. Eu tinha aumentado a amostra desta pagina, com o argumento de que aqui a pessoa vem pra OLHAR PEDRA. Ele olhou e mandou voltar, e ele esta certo: sao 40 cores, e amostra grande transforma a carta num rolar sem fim. Escolher entre 40 e comparar, e comparar precisa de muitas na mesma tela. Entao vale o tamanho do wen.css e nada e sobrescrito aqui. Se um dia der vontade de aumentar de novo, o motivo pra nao fazer e este. */ /* ---------- CARTAO DE COR SEM FOTO ---------- No granilite todas estao assim hoje: existe o codigo do fabricante e a descricao, e nao existe a foto da amostra. Um retangulo com o nome e melhor que nada e MUITO melhor que uma foto inventada. */ .amostra-c.sem-foto-c{background:rgba(0,0,0,.02);border:1px dashed var(--linha); display:flex;align-items:center;min-height:118px} .amostra-c.sem-foto-c figcaption{padding:14px 16px} .cat-diz{font-family:'Jost',sans-serif;font-size:.72rem;letter-spacing:.02em; text-transform:none;color:var(--suave);margin-left:10px} /* ---------- O LINK PRA CARTA INTEIRA ---------- Fica embaixo de cada fileira, alinhado a direita, e nao no meio da pagina: assim ele pertence AQUELE material e nao ao bloco todo. */ .cat-mais{text-align:right;margin-top:12px} .cat-mais a{font-family:'Oswald',sans-serif;font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;color:var(--bronze2);text-decoration:none;border-bottom:1px solid var(--linha); padding-bottom:3px;transition:.18s} .cat-mais a:hover{color:var(--bronze);border-bottom-color:var(--bronze)} .cat-mais a::after{content:" ƒA";font-weight:600} /* alvo de dedo no celular: 19px de altura e o que faz a pessoa errar o toque e desistir. O padding cresce a area sem mexer no visual. */ @media(max-width:900px){ .cat-mais{margin-top:6px} .cat-mais a{display:inline-block;padding:12px 4px} } /* ---------- O CARTAO VAZADO TEM QUE TER A MESMA ALTURA ---------- As duas fileiras da home sao grades SEPARADAS, entao elas nunca se alinham sozinhas: cada uma calcula a propria altura. Numero fixo tambem nao resolve, porque a altura do cartao com foto muda com a largura da tela. Entao o cartao vazado ganha um bloco do tamanho exato da imagem que falta, os mesmos 150px do .amostra-c img, e a legenda embaixo. Fica igual em qualquer tela, e o tracejado diz "aqui vai entrar uma foto" sem precisar escrever isso. */ .amostras .amostra-c.grande.sem-foto-c{display:block;min-height:0} .amostras .amostra-c.grande.sem-foto-c::before{ content:"";display:block;height:150px; background:repeating-linear-gradient(45deg, rgba(0,0,0,.022) 0 10px, rgba(0,0,0,.045) 10px 20px); border-bottom:1px dashed var(--linha)} .amostras .amostra-c.grande.sem-foto-c figcaption{padding:14px 16px} /* =========================================================== LETRA QUE DÁ PRA LER, EM QUALQUER TELA 25/08/2026. Pedido dele, olhando o site: "aumenta essas partes escrito claro escuro, quase não dá pra ver, lembra que velhos vão ver" e "essas descrições estão parecendo as escritas miúdas dos comerciais de remédio da tv". Ele está certo, e a parte constrangedora é que isso JÁ tinha sido medido aqui em 21/08. A seção "LETRA E ALVO DE TOQUE NO CELULAR", mais acima, contou 51 pedaços de texto abaixo de 12,5 pixels e arrumou os piores. Só que arrumou dentro de um @media(max-width:720px), ou seja, SÓ NO CELULAR. No computador continuou tudo igual, e é no computador que ele estava olhando. Diagnóstico novo, medido no site no ar em 1512 de largura: 9,6px a descrição da amostra, EM CAIXA ALTA, 73 caracteres 9,9px CLAROS, MÉDIOS, ESCUROS, o título de cada tom 10,9px a tarja do topo, que é onde está o TELEFONE dela 10,9px a lista de cidades atendidas, 117 caracteres em caixa alta 11,5px o rodapé, e ainda em cinza claro demais O TAMANHO NÃO É O PIOR. O pior é CAIXA ALTA COM ESPAÇAMENTO em frase inteira. Caixa alta tira o desenho da palavra, que é o que a pessoa reconhece de relance, e obriga a soletrar letra por letra. Em rótulo de duas palavras isso é estilo. Em frase de 73 caracteres é exatamente a letra miúda de bula que ele descreveu. A REGRA QUE FICA: caixa alta só em RÓTULO, coisa de até três palavras que a pessoa não lê, reconhece. Tudo que for FRASE vai em caixa normal, e o tamanho acompanha. =========================================================== */ /* ---------- 1. a descrição da amostra ---------- Essa é a pior de todas e a mais importante: é o texto que faz a pessoa escolher a pedra. Estava a 9,6 pixels, em caixa alta, com quase 3 pixels entre as letras. */ .amostra-c em,.amostra em,.cor em{ font-size:.88rem !important; text-transform:none !important; letter-spacing:.005em !important; line-height:1.6; font-style:normal; color:var(--suave)} /* ---------- 2. os títulos de tom, que ele circulou ---------- CLAROS, MÉDIOS, ESCUROS continuam em caixa alta, porque são rótulo de uma palavra e funcionam como marcador de seção. O que muda é o tamanho e o espaçamento: de 9,9 pra 13,1 pixels, e o espaço entre letras cai quase pela metade. */ .cat-tit{font-size:.82rem;letter-spacing:.17em} .cat-diz{font-size:.86rem;letter-spacing:.01em;margin-left:12px} .tab-pisos caption{font-size:.78rem;letter-spacing:.14em} .olho{font-size:.78rem;letter-spacing:.26em} /* ---------- 3. a tarja do topo tem o telefone dela ---------- Número de telefone em 10,9 pixels e caixa alta espaçada é o pior lugar possível pra pôr o dado mais importante da página. */ .tarja{font-size:.82rem;letter-spacing:.1em} /* ---------- 4. as cidades atendidas ---------- São 117 caracteres de nome próprio em caixa alta. Nome de cidade a pessoa reconhece pelo desenho da palavra, e caixa alta destrói justamente isso: ela procura "Mogi" e precisa ler "MOGI". */ .regiao,.regiao .cidade,.cidade{text-transform:none;letter-spacing:.01em} .cidade{font-size:.88rem} .cat-nomes .cidade{font-size:.8rem} /* ---------- 5. o menu ---------- */ .menu,.menu a{font-size:.76rem;letter-spacing:.13em} /* ---------- 6. o rodapé, só o tamanho ---------- Eu tinha escrito aqui que a cor dele reprovava em contraste, e MEDI DEPOIS: não reprova. O cinza A79E90 parece claro demais quando se olha o valor sozinho, mas o rodapé inteiro fica sobre fundo escuro, e ali ele dá 6,68 pra 1, bem acima dos 4,5 que se pede. Fica registrado porque o erro é fácil de repetir: cor não se julga sozinha, se julga contra o fundo em que ela cai de verdade. O que sobrou pra arrumar aqui foi só o tamanho, de 11,5 pra 13,1. */ .rodape-fim{font-size:.82rem;letter-spacing:.04em} .rodape a,.rodape p{font-size:.94rem} /* ---------- 7. frases que ficaram entre 13 e 14 pixels ---------- Não são gritantes como as de cima, mas somadas dão a sensação de site apertado. 15 pixels é o piso de leitura confortável. */ .capa .selo span,.selo span{font-size:.94rem;line-height:1.65} .obra p,.p-fecho,.mat p,.motivo p{font-size:.94rem;line-height:1.7} /* ---------- 8. rótulos que continuam pequenos, e tudo bem ---------- Estes são de uma ou duas palavras: ÁREA EXTERNA, ANTES, DEPOIS, ENTREGUE. A pessoa não lê, reconhece. Sobem um pouco e param por aí, senão viram título e competem com o que importa. */ .ca-txt em{font-size:.68rem;letter-spacing:.16em} .selo-o,.og-fase,.og-parte,.pisc-nome{font-size:.7rem;letter-spacing:.14em} .tab-pisos thead th{font-size:.72rem;letter-spacing:.1em} /* =========================================================== O FUNDO PARA DE SER UM BLOCO CHAPADO Também pedido dele: "deixa tipo um gradiente vindo de cima do canto, ou do outro canto, ou do meio, ou só do lado direito, tipo pelo site vai mexendo". O site é creme sobre creme, e uma seção era igual à outra. Cada seção clara agora recebe um brilho quente vindo de um canto diferente, e o canto gira conforme a página desce. Não é enfeite: é o que dá profundidade e faz a pessoa perceber que mudou de assunto sem precisar de uma linha divisória. MUITO FRACO DE PROPÓSITO. A força está num só lugar, o --brilho aqui embaixo, então dá pra calibrar tudo mexendo em um número. Se um dia parecer manchado, é esse número que desce, e não cada regra. FICAM DE FORA a capa, que já tem foto de obra atrás, e as duas faixas escuras, que têm o brilho próprio logo abaixo. */ :root{--brilho:rgba(178,145,79,.10);--brilho2:rgba(178,145,79,.055)} body > section:not(.capa):not(.escuro):not(.chamada){ background-repeat:no-repeat;background-attachment:local} /* ---------- POR QUE TEM !important AQUI ---------- Sem ele, isto simplesmente não aparece, e a primeira versão não apareceu mesmo: das treze seções da home, só duas pegaram o brilho. O motivo é que as seções são pintadas por SELETOR DE ID, na linha 138 e 139 deste arquivo, tipo `#servicos,#materiais{background:...}`. Id vale (1,0,0) de especificidade e ganha de qualquer combinação de classe, por mais comprida que ela seja. E como lá se usa a forma curta `background:`, ela zera o background-image junto. As duas seções que funcionaram por acidente foram justamente as que não têm id na lista de lá. Foi isso que entregou o problema. Mesma armadilha do border-radius dos pontinhos, algumas centenas de linhas acima, e por isso vale a mesma anotação: o !important aqui NÃO é preguiça, é o que faz a regra existir. Tirar ele apaga os gradientes do site inteiro, e sem erro nenhum no console. Ele mira só o background-image. A cor de fundo continua vindo das regras de id, então a alternância creme e areia fica intacta. O canto gira de seis em seis. Como a capa e as faixas escuras ficam de fora da conta, cada página do site pega um trecho diferente do ciclo sem ninguém escolher nada. */ body > section:nth-of-type(6n+1):not(.capa):not(.escuro):not(.chamada){ background-image:radial-gradient(820px 480px at 3% -4%, var(--brilho), transparent 64%) !important} body > section:nth-of-type(6n+2):not(.capa):not(.escuro):not(.chamada){ background-image:radial-gradient(880px 520px at 97% 4%, var(--brilho), transparent 66%) !important} body > section:nth-of-type(6n+3):not(.capa):not(.escuro):not(.chamada){ background-image:radial-gradient(760px 620px at 50% 104%, var(--brilho2), transparent 68%) !important} body > section:nth-of-type(6n+4):not(.capa):not(.escuro):not(.chamada){ background-image:linear-gradient(100deg, transparent 42%, var(--brilho2) 100%) !important} body > section:nth-of-type(6n+5):not(.capa):not(.escuro):not(.chamada){ background-image:radial-gradient(900px 500px at 8% 100%, var(--brilho), transparent 62%) !important} body > section:nth-of-type(6n+6):not(.capa):not(.escuro):not(.chamada){ background-image:radial-gradient(700px 700px at 50% 0%, var(--brilho2), transparent 60%) !important} /* as faixas escuras ganham a versão delas: o mesmo bronze, mais quente e mais aberto, senão elas ficam sendo os dois únicos retângulos chapados da página inteira */ body > section.escuro,body > section.chamada{ background-image:radial-gradient(900px 520px at 82% 0%, rgba(201,169,97,.09), transparent 66%) !important; background-repeat:no-repeat} /* =========================================================== O QUE É REDONDO PRECISA GRITAR MAIS ALTO 26/08/2026. Isto começou com ele apontando seis quadradinhos na barra da capa. Ao ir atrás, o problema era muito maior: DEZOITO lugares do site pediam forma redonda e saíam quadrados. A causa é uma só, e ela é de propósito: o gurroffe.css tem *, ::before, ::after { border-radius: 0 !important } porque o site é de canto reto, e essa regra garante isso em tudo que for acrescentado depois sem ninguém lembrar. Ela está certa. O problema é que ela também apaga o que É pra ser redondo, e apaga CALADA: o css continua dizendo 50%, o console não reclama, e só o olho pega. Estavam quadrados, entre outros: a rodinha de "gerando", que quadrada parece travada e não girando o botão flutuante do WhatsApp os pontinhos de passo do simulador os pontinhos das galerias de obra, 61 deles a bolinha do puxador de antes e depois Aqui ficam as exceções, todas juntas e num lugar só. É pra ficar assim: exceção espalhada pelo arquivo vira exceção esquecida, e daqui a três meses alguém acrescenta uma bolinha nova e ela nasce quadrada igual estas nasceram. COMO SABER SE ACONTECEU DE NOVO: procurar por border-radius sem !important nos três css. Se achou, está quadrado na tela. */ .gerando .roda, .comparador .puxador::after, .parceria .no, .zap, .wenia-cx .fala .p, .passo.feito::before, .app-topo .app-volta, .app-topo .app-x, .app-topo .app-ajuda .pisca, .p2-pontos i, .og-pontos button{border-radius:50% !important} .app-topo .app-ajuda{border-radius:21px !important} .p2-cab button{border-radius:20px !important} .barra-ia,.barra-ia i{border-radius:3px !important} body.app .passos,body.app .passos::after{border-radius:2px !important} /* ---------- A CAPA NUNCA MAIS FICA CREME ---------- 26/08/2026. O `#capaFundo` nasce vazio no html: TODA foto da capa vem do javascript, depois de uma chamada ao servidor. Se qualquer coisa nessa corrente falhar, a primeira tela do site fica um retângulo creme vazio, que é o pior lugar possível pra falhar. Esta foto é a rede de baixo. Ela é do próprio site, de `img/obras/`, e não da pasta que a Wen mexe pelo painel: assim ela não some no dia em que a Wen apagar alguma foto lá. É a rampa, que é a primeira obra do portfólio e a que ele escolheu pra abrir. O javascript põe a classe `tem-foto` DEPOIS de encaixar as fotos de verdade, e é isso que apaga esta daqui. Nessa ordem de propósito: se apagasse antes, piscaria creme no meio da troca. */ .capa-fundo{background:#EDE7DA url('img/obras/rampa-1.jpg') center/cover no-repeat} .capa-fundo.tem-foto{background-image:none} /* =========================================================== O CELULAR, QUE É DE ONDE QUASE TODO MUNDO ENTRA 26/08/2026. Ele mandou print do Android com um quadrado azul em cima da seta e pediu pra tirar, mais deslizar o dedo pra trocar a foto, mais melhorar o celular em geral, "tanto no Android quanto iPhone quanto sla os Huawei xiaomi que tem a plataforma diferente". Fui medir antes de mexer. O que estava errado de verdade: =========================================================== */ /* ---------- 1. O QUADRADO AZUL ---------- É o realce que o navegador do Android pinta em cima do que foi tocado. Ele existe pra dar retorno, e a intenção é boa, mas o retângulo azul chapado em cima de uma foto de obra estraga tudo, e ainda fica visível meio segundo depois do toque. TIRAR SÓ ISSO SERIA PIORAR. Sem realce nenhum, a pessoa toca e não sabe se pegou, e aí toca de novo. Então junto entra um retorno próprio, discreto e no tom do site, logo abaixo. */ html{-webkit-tap-highlight-color:transparent; /* alguns Android e o iPhone deitado incham o texto sozinhos. Isto trava no tamanho que foi desenhado. */ -webkit-text-size-adjust:100%;text-size-adjust:100%} /* ---------- 2. O RETORNO QUE ENTRA NO LUGAR ---------- Some no computador de propósito: lá o hover já diz tudo, e afundar botão no clique de mouse parece defeito. */ @media (hover:none){ .bt:active,.cn-b:active,.zap:active,.wenia-b:active, .esc:active,.cor:active,.cor-aba:active,.ia-bt:active{ transform:scale(.96);opacity:.85} .obra:active,.mat:active,.amostra-c:active,.links a:active{ opacity:.72} .menu a:active,.cat-mais a:active,.rodape a:active{opacity:.6} /* transição curta: 90ms sai na hora e ainda assim é visível. Mais que isso e o toque começa a parecer travado. */ .bt,.cn-b,.zap,.wenia-b,.esc,.cor,.cor-aba,.ia-bt,.obra,.mat,.amostra-c{ transition:transform .09s ease,opacity .09s ease,border-color .2s} } /* ---------- 3. O ATRASO DE MEIO SEGUNDO NO TOQUE ---------- Android antigo espera pra ver se vem um segundo toque, que seria zoom. Isso deixa todo botão do site com um atraso que a pessoa sente e não sabe nomear: parece site lento, não parece atraso. */ a,button,input,select,textarea,label,.esc,.cor,.amostra-c,.obra{touch-action:manipulation} /* ---------- 4. O IPHONE DAVA ZOOM SOZINHO NO FORMULÁRIO ---------- Campo com letra menor que 16px faz o Safari do iPhone aproximar a tela quando a pessoa toca pra escrever. A página fica torta, ela escreve sem ver o resto, e no fim precisa afastar com dois dedos. É o único campo do site abaixo de 16, e ele é justamente o do desenho no piso. Só no celular: no computador 16px ficaria grande perto do resto. */ @media(max-width:820px){ input,textarea,select,.desenho-cx input[type=text]{font-size:16px !important} } /* ---------- 5. OS BOTÕES FLUTUANTES E A BARRA DO CELULAR ---------- iPhone com entalhe, e também Xiaomi e Huawei com barra de gesto, reservam uma faixa embaixo da tela. Quem não conta com ela põe botão embaixo da barra: o dedo toca e quem responde é o sistema, não o site. O WhatsApp era o que estava mais perto disso. O env() vale 0 em quem não tem entalhe, então isto não mexe em nada nos aparelhos antigos. */ .zap{bottom:calc(18px + env(safe-area-inset-bottom,0px))} .wenia-b,.wenia-cx{bottom:calc(150px + env(safe-area-inset-bottom,0px))} .wenia-balao{bottom:calc(154px + env(safe-area-inset-bottom,0px))} .aviso-ck{bottom:calc(16px + env(safe-area-inset-bottom,0px))} @media(max-width:900px){ .flutuantes{bottom:calc(12px + env(safe-area-inset-bottom,0px))} /* precisa repetir dentro do tem-aviso: aquela regra é mais específica e ganharia desta, e aí o recuo da barra sumiria justamente enquanto o aviso de cookie está na tela */ body.tem-aviso .flutuantes{ bottom:calc(12px + var(--alt-aviso,150px) + env(safe-area-inset-bottom,0px))} } /* ---------- 7. LINK NO MEIO DO TEXTO, NO DEDO ---------- "Manda a sua cidade no WhatsApp" tinha 21 pixels de altura, porque link dentro de parágrafo é do tamanho da letra. É uma chamada de verdade, na seção que responde "vocês atendem aqui?", e errar o toque nela é perder a conversa. Padding em elemento em linha aumenta a área de acerto SEM empurrar as linhas de cima e de baixo, então o texto não se mexe. Só no dedo: no computador não faz falta e ainda atrapalha a seleção. */ @media (hover:none){ a.sublinha,p a.lk-wpp,.legenda a{padding:11px 2px;margin:-11px 0} /* o telefone do rodapé é o dado mais importante que tem lá */ .rodape a{padding:9px 0} } /* ---------- 6. DESLIZAR NÃO PODE SELECIONAR TEXTO ---------- Ao arrastar o dedo em cima do título pra trocar a foto, o Android às vezes entende como "segurar pra selecionar" e acende a alça azul de seleção no meio do gesto. */ .capa h1,.capa .slogan-wen,.capa .olho{-webkit-user-select:none;user-select:none} /* =========================================================== O CELULAR MENOS POLUÍDO 26/08/2026. Ele: "pelo celular ainda tá muita poluição, e é um site de um nível de clientes maiores, então tem que ser mais elegante o do celular e menos poluído". Fui medir a home num aparelho de 375 por 812, que é o iPhone que mais aparece: 182px o cabeçalho grudado no topo, ou seja um quinto da tela reservado o tempo todo pra uma coisa que já foi vista 220px o aviso de cookie, mais um quarto da tela 26,8 telas de rolagem na home 6,7 telas só na seção de obras Com tudo na tela ao mesmo tempo sobravam 558 de 812 pro conteúdo. Não é sensação, é aritmética: metade da tela era moldura. COMPUTADOR E TABLET NÃO MUDAM NADA. Ele foi explícito: "o site de computador tablet tal, deixa como tá porque tá bom assim". Por isso tudo aqui está dentro de media query de tela pequena. =========================================================== */ /* ---------- 1. O TOPO SAI DA FRENTE ENQUANTO SE LÊ ---------- Sai quando rola pra baixo, que é quando está lendo. Volta quando rola pra cima, que é quando está procurando o menu. É o gesto que a pessoa já faz em qualquer aplicativo. A sombra só aparece quando ele volta: assim ele se descola da página no momento em que reaparece, e não fica com peso de caixa parada o tempo todo. */ @media(max-width:820px){ header{transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s} body.topo-fora header{box-shadow:none} body:not(.topo-fora) header{box-shadow:0 6px 22px rgba(27,24,21,.07)} } @media(prefers-reduced-motion:reduce){ header{transition:none} } /* ---------- 2. O AVISO DE COOKIE VIRA BARRA ---------- Era um cartão de 220px no canto, tapando um quarto da tela bem na hora em que a pessoa chega e ainda está decidindo se fica. Como barra colada no pé, ele some do caminho do olho e continua valendo igual: mesmo texto essencial, mesmo link pra política inteira, mesmo botão. */ @media(max-width:620px){ .aviso-ck{left:0;right:0;bottom:0;width:100%; padding:calc(12px) 16px calc(12px + env(safe-area-inset-bottom,0px)); border-left:0;border-right:0;border-bottom:0; display:flex;align-items:center;gap:14px; box-shadow:0 -6px 24px rgba(27,24,21,.10)} /* o rótulo em caixa alta é redundante numa barra: o texto ao lado já começa dizendo do que se trata, e ele custava uma linha */ .aviso-ck b{display:none} .aviso-ck .ck-longo{display:none} .aviso-ck p{margin:0;flex:1;min-width:0;font-size:.8rem;line-height:1.45} .aviso-ck .ck-bts{flex:none;flex-wrap:nowrap} .aviso-ck button{padding:12px 18px;white-space:nowrap} .aviso-ck.saindo{animation:ck-sai-barra .3s ease forwards} @keyframes ck-sai-barra{from{opacity:1;transform:none} to{opacity:0;transform:translateY(100%)}} } /* o texto curto só existe pra barra: no computador o cartão continua com a explicação inteira */ .ck-curto{display:none} @media(max-width:620px){ .ck-curto{display:inline} } /* ---------- 3. AS OBRAS NA HOME ---------- Nove obras, uma embaixo da outra, davam 6,7 telas de rolagem. É a maior seção da página sozinha, e nenhuma pessoa rola sete telas de foto antes de decidir alguma coisa. Ficam QUATRO no celular. Quatro já provam o que precisa ser provado, que é obra de verdade e não banco de imagem, e o botão logo abaixo leva pra página de obras, onde estão todas com o antes e o depois lado a lado. Não some nada do site: sai da rolagem principal, não do catálogo. E as escondidas são `display:none`, então a foto delas nem chega a ser baixada no celular. */ @media(max-width:820px){ .obras .obra:nth-of-type(n+5){display:none} } /* =========================================================== O CABEÇALHO ENCOLHE EM VEZ DE SUMIR INTEIRO 26/08/2026, refinamento dele em cima do que tinha ficado: "faz as páginas sumirem também quando desce e quando sobe aparece, porque o foco é as informações do site, não as opções de página, e deixa lá em cima uma linha só mostrando as informações". Antes o cabeçalho inteiro saía. Agora ele COLAPSA: a fileira de links de página se recolhe, e fica de pé uma linha só, com a marca e o FALAR AGORA. POR QUE ISSO É MELHOR QUE SUMIR TUDO, e não é só gosto: o FALAR AGORA é o botão que converte. Sumindo o cabeçalho inteiro, quem decidiu ligar no meio da página tinha que rolar pra cima pra achar ele. Agora ele está sempre a um toque, e o que sai é justamente o que não interessa durante a leitura, que é a lista de páginas. =========================================================== */ /* ---------- O COLAPSO SAIU, E O MOTIVO É IMPORTANTE ---------- 26/08/2026, à noite. A versão que encolhia o cabeçalho pra uma linha TREMIA ao rolar. Ele mandou seis prints da mesma tela em estados diferentes: menu meio transparente, os pontinhos da capa flutuando dentro da faixa, conteúdo pulando pra cima e voltando. A CAUSA É CIRCULAR, e por isso ela piora sozinha: o menu encolhe -> o cabeçalho fica mais baixo o cabeçalho encolhe -> a ALTURA DO DOCUMENTO muda a altura muda -> o navegador corrige a posição da rolagem a rolagem se mexe -> dispara meu código de novo e ele manda encolher outra vez Isso é o que se vê como tremor. Não é lentidão nem animação mal feita: é realimentação. A regra que fica: NUNCA mudar a ALTURA de um elemento grudado no topo em resposta à rolagem. Mover ele com transform não muda o layout de nada, então não realimenta. Encolher muda. E resolve junto o que ele pediu na mesma mensagem, que a barra de cima "some toda, porque senão tampa metade da foto da capa". O FALAR AGORA vai junto, e isso está ok: o botão flutuante do WhatsApp continua fixo na tela o tempo todo, então falar com a Wen nunca fica a mais de um toque. */ @media(max-width:820px){ body.topo-fora header{transform:translateY(-100%)} } /* ---------- O MENU EM UMA LINHA SÓ ---------- Ele estava em DUAS linhas, e isso custava 106 pixels grudados no topo o tempo todo. > O comentário do wen.css conta que ele já rolou pro lado uma vez e > voltou pra duas linhas, porque "metade dos itens ficava escondida > sem nenhum aviso de que existia mais coisa". A reclamação estava > certa, e ela era do AVISO, não da rolagem. Então aqui ele volta a > ser uma linha que rola, mas com o aviso que faltava: > > . uma sombra clareando na borda direita, que diz "tem mais" > . encaixe de rolagem, pra parar sempre com item inteiro na tela > . recuo nas pontas, pra nada encostar na borda > > E "Recuperar piso" vira "Recuperar" só no celular, que sozinho > tira 5 caracteres do item mais comprido da fila. */ @media(max-width:820px){ .menu{ flex-wrap:nowrap;justify-content:flex-start; overflow-x:auto;overflow-y:hidden; scrollbar-width:none; scroll-snap-type:x proximate; padding-left:2px;padding-right:2px; /* Aqui tinha uma máscara clareando a borda direita, pra dizer que havia mais coisa. SAIU: ele olhou e não entendeu, chutou que dava pra arrastar. Sinal que precisa ser adivinhado não é sinal. No lugar entraram as setas, algumas dezenas de linhas abaixo. */ } .menu::-webkit-scrollbar{display:none} .menu a{flex:0 0 auto;scroll-snap-align:start;white-space:nowrap} /* ---------- O ITEM MAIS COMPRIDO ENCURTA AQUI ---------- "Recuperar piso" tem 95px e é o que faz a fila estourar: com ele por extenso, os seis só cabem de 393px pra cima. Abaixo disso o OBRAS some. A PRIMEIRA TENTATIVA FOI UM ::after COM O TEXTO CURTO, E ELA FALHOU CALADA. O `.menu a::after` já tem dono neste site: é o sublinhado que corre da esquerda pra direita no hover, lá no gurroffe.css. E na linha 311 de lá ele leva `display:none` no celular, porque hover não existe no dedo. Resultado: o texto curto estava escrito no css, o navegador dizia que o conteúdo era "Recuperar", e nada aparecia. O item virou um retângulo vazio de 10px entre PISCINA e OBRAS, que foi exatamente o que ele viu no print. A lição: pseudo-elemento não é espaço livre. Antes de pendurar conteúdo num ::before ou ::after, conferir se ele já não está ocupado com outra coisa nas camadas de baixo. Agora são dois textos de verdade dentro do link, e o css escolhe qual aparece. É o mesmo jeito do aviso de cookie, que já funciona, e não depende de nada estar livre. */ /* A troca pelo nome curto SAIU daqui em 26/08. Ela vivia dentro deste @media de celular e era mais específica que a regra nova, então continuava ganhando e o nome curto insistia em aparecer mesmo depois de eu ter devolvido o inteiro. Agora quem manda é o bloco lá embaixo, que só encurta abaixo de 340px. */ } /* =========================================================== O MENU CABE SEM ARRASTAR, E QUANDO NÃO CABE ELE AVISA 26/08/2026. Ele: "dá pra diminuir um pouco e deixar tudo na mesma linha e sem ter que deslizar, e se realmente precisar tem que deslizar, deixa umas setinha do lado com tipo os cantos mais escuros, porque ali do jeito que eu vi, nem dá pra saber, eu chutei que dava pra arrastar pro lado". MEDIDO NUMA TELA DE 360, que é o Android estreito mais comum: hoje 403px de fila em 328 de caixa só padding menor 367, ainda não cabe padding e espaço menores 341, ainda não cabe letra .58 + padding 5 319, CABE, com 9px de folga Então a letra desce pra .58rem, uns 9,3 pixels. É rótulo de uma palavra em caixa alta, e não texto de leitura: aqui encolher não briga com a regra de deixar o site legível pra quem tem vista cansada, que vale pro conteúdo. A ROLAGEM CONTINUA EXISTINDO, como rede. "A maioria" não é "todos": em tela de 320px, que ainda existe em aparelho de entrada e no iPhone SE antigo, seis itens não cabem numa linha sem virar letra ilegível. O que muda é que agora ela SE ANUNCIA. =========================================================== */ @media(max-width:820px){ /* ---------- POR QUE AQUI NÃO É rem ---------- 26/08/2026, à noite. Ele: "tem como adicionar lá também o recuperar piso". Não dava pra adicionar: ele já estava lá, só tinha ficado ESCONDIDO fora da tela. No aparelho dele o menu cortava depois de PISCINA, e sumiam o RECUPERAR e o OBRAS. Aqui na régua, na mesma largura, cabiam os seis. A diferença é o **ajuste de tamanho do texto do Android**, que multiplica tudo que estiver em rem. Com o texto ampliado, a fila cresce, não cabe, e dois itens saem de cena calados. Entre respeitar esse ajuste e mostrar o menu inteiro, o menu inteiro ganha: item de navegação que a pessoa NÃO VÊ não é acessível, é inexistente. Item pequeno e visível, ela pelo menos aproxima a tela e lê. Então aqui o tamanho vem da LARGURA DA TELA e não da fonte do sistema. Em vw, a conta é sempre a mesma proporção: se a tela é estreita a letra encolhe junto, e os seis cabem em qualquer aparelho, com qualquer ajuste de fonte ligado. ISTO VALE SÓ PRO MENU. O conteúdo do site continua todo em rem e continua crescendo com o ajuste da pessoa, que é onde isso realmente importa pra quem tem vista cansada. */ /* Os tres numeros sairam de medir na tela de 320px, que e a mais apertada que ainda existe. Com padding 5 e 2.9vw sobrava 0 e o OBRAS caia fora; com padding 4 e 2.65vw sobram 26px e cabem os seis, mantendo a letra MAIOR do que se eu tivesse encolhido a fonte em vez do espacamento. Entre tirar do texto e tirar do respiro, tira do respiro. */ .menu a{padding:3px 4px;letter-spacing:.04em; font-size:clamp(8px, 2.65vw, 10.2px)} /* o fio separador encolhe junto, senão ele fica desproporcional perto da letra menor */ .menu a + a::before{height:9px;margin-top:-4.5px} } .mn-ct{display:none} /* ---------- AS SETAS ---------- A máscara que clareava a borda saiu. Ela era discreta demais: ele olhou e não entendeu, chutou. Seta é desenho que todo mundo já sabe ler, e a borda escurecendo atrás dela diz que o conteúdo continua por baixo, em vez de acabar ali. Cada seta aparece SÓ do lado que tem mais coisa. Do lado que já acabou ela some, senão ela mente, e botão que mente é pior que botão nenhum. */ .menu-cx{position:relative;order:3;width:100%;min-width:0} @media(min-width:821px){ /* no computador a caixa é só um invólucro sem efeito: o menu cabe, as setas nunca aparecem, e nada muda de lugar */ .menu-cx{order:0;width:auto} } .menu-seta{ position:absolute;top:0;bottom:0;width:34px; display:none;align-items:center;justify-content:center; border:0;padding:0;cursor:pointer;z-index:2; color:var(--bronze2); -webkit-tap-highlight-color:transparent; } .menu-seta svg{width:15px;height:15px;fill:none;stroke:currentColor; stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .menu-seta.ant{left:0; background:linear-gradient(to right, var(--carvao) 42%, color-mix(in srgb, var(--carvao) 55%, transparent) 78%, transparent 100%)} .menu-seta.prox{right:0; background:linear-gradient(to left, var(--carvao) 42%, color-mix(in srgb, var(--carvao) 55%, transparent) 78%, transparent 100%)} /* navegador antigo que não conhece color-mix mostra o degradê simples, que resolve igual: o que importa é a borda escurecendo */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .menu-seta.ant{background:linear-gradient(to right,var(--carvao) 55%,transparent 100%)} .menu-seta.prox{background:linear-gradient(to left,var(--carvao) 55%,transparent 100%)} } .menu-cx.tem-esq .menu-seta.ant, .menu-cx.tem-dir .menu-seta.prox{display:flex} .menu-cx.tem-esq .menu{padding-left:30px} .menu-cx.tem-dir .menu{padding-right:30px} @media (hover:none){ .menu-seta:active{transform:scale(.9)} } /* ---------- OS FLUTUANTES ESTAVAM EM CIMA DO TÍTULO ---------- 26/08/2026, print dele: o selo do WenIA caía bem em cima do "valoriza", na segunda linha do título da capa. A causa era um buraco na pilha: o WenIA ficava a 142px do pé e os outros dois a 12px, ou seja, 46 pixels de vão entre eles. Isso esticava o conjunto até quase o meio da tela, e no meio da tela é onde mora o título. Encostando os três, a pilha inteira cabe nos 160px de baixo, que é onde o conteúdo importa menos e a pessoa rola pra ler de qualquer jeito. Botão fixo sempre vai cobrir alguma coisa: o que dá pra escolher é O QUE ele cobre. */ @media(max-width:900px){ .wenia-b{bottom:calc(104px + env(safe-area-inset-bottom,0px))} .wenia-balao{bottom:calc(108px + env(safe-area-inset-bottom,0px))} body.tem-aviso .wenia-b{bottom:calc(104px + var(--alt-aviso,150px))} body.tem-aviso .wenia-balao{bottom:calc(108px + var(--alt-aviso,150px))} } /* ---------- OS FLUTUANTES ENTRAM DEPOIS DA CAPA ---------- 26/08/2026. Print dele: o selo do WenIA em cima do "valoriza", na segunda linha do título. Medido: a faixa dos botões ocupa 48px na direita, e o título chega a invadir 28px dela. Dava pra empurrar o texto pra dentro, mas isso custaria uma linha a mais na frase principal do site, e a frase principal vale mais que o botão. O que resolve de graça é notar que eles NÃO PRECISAM estar ali. Na primeira tela já existe o FALAR AGORA grudado no topo e o PEDIR ORÇAMENTO logo abaixo do texto. Os flutuantes existem pro resto da página, onde não há botão por perto. Então eles entram depois que a capa passa, com um fade curto. De quebra, saem três objetos da primeira tela, que era a reclamação de poluição que começou tudo isso. Só no celular: no computador a tela é larga, eles ficam longe do texto e nunca atrapalharam. */ @media(max-width:820px){ .flutuantes,.wenia-b,.wenia-balao{ opacity:0;pointer-events:none; transform:translateY(10px); transition:opacity .25s ease,transform .25s ease} body.passou-capa .flutuantes, body.passou-capa .wenia-b, body.passou-capa .wenia-balao{ opacity:1;pointer-events:auto;transform:none} } /* quem desligou animação vê eles aparecerem seco, sem deslizar */ @media(prefers-reduced-motion:reduce){ .flutuantes,.wenia-b,.wenia-balao{transition:none;transform:none} } /* ---------- O SELO DE PRÉVIA VIRA LINK ---------- 26/08/2026. Ele: "quando clicar no prévia Solarys, vai pro site da Solarys, depois vai sair mesmo, mas coloca, e deixa ainda até eu falar que ela pagou o resto e assinou o contrato". Ou seja, isto tem prazo de validade combinado. Fica registrado aqui pra ninguém tirar antes nem esquecer depois: SAI QUANDO A DANI PAGAR OS R$ 500 QUE FALTAM E ASSINAR. Até lá o selo é uma vitrine da Solarys em cima do trabalho entregue. Ele já era um retângulo com texto, então virar link não muda nada no visual. O que muda é o dedo: agora precisa parecer clicável e ter alvo de toque de verdade. */ .previa-sol{text-decoration:none;cursor:pointer;transition:.18s} a.previa-sol:hover{background:var(--bronze);color:#FCFAF6;border-color:var(--bronze)} @media (hover:none){ a.previa-sol:active{transform:scale(.94);opacity:.85} /* Ele tinha 27px de altura, que é metade do que um dedo acerta bem. No celular o selo vai pro pé da página, onde ninguém está mirando nada: errar o toque ali é a diferença entre a pessoa conhecer a Solarys e não conhecer. O padding cresce o alvo sem mexer no desenho, e a margem negativa devolve o espaço que ele ocuparia. */ a.previa-sol{padding:12px 14px;margin:-6px -14px} } /* =========================================================== UM DEGRADÊ EM CADA TROCA DE ÁREA 26/08/2026, desenho dele: linha grossa na divisa entre as seções, e linhas mais finas logo abaixo. A leitura do desenho é essa: escurece na divisa e vai clareando pra dentro da seção. O PORQUE: as seções alternam creme e areia, e a diferença entre as duas cores é de propósito pequena, pra não virar zebra. Só que no celular, onde só cabe um pedaço da tela por vez, essa diferença some e a página vira uma coisa só, sem começo nem fim de assunto. Uma sombra curta no alto de cada seção resolve sem pintar linha: o olho lê "aqui mudou" mesmo sem ver as duas cores lado a lado. É UMA SOMBRA, E NÃO UM FIO. Fio divisório deixa cara de tabela e de site de modelo pronto. A sombra faz o mesmo trabalho e some quando a pessoa não está procurando por ela. */ body > section{position:relative} /* A PRIMEIRA VERSAO ERA INVISIVEL. Ela comecava em 8,5% de bronze, o que da contraste 1,06 contra o creme: existia no navegador e nao existia no olho. Ele viu e falou que a divisa nao tinha degrade nenhum, e estava certo. Agora comeca em 26% e o degrade e mais CURTO, 62px em vez de 88. Curto importa tanto quanto forte: espalhado por 88px o mesmo tom vira um lavado que ninguem lê como divisa. Concentrado, ele lê como sombra de uma area caindo sobre a outra, que e o desenho que ele fez. */ body > section::before{ content:"";position:absolute;left:0;right:0;top:0;height:62px; pointer-events:none;z-index:0; background:linear-gradient(to bottom, rgba(93,74,38,.26) 0%, rgba(93,74,38,.11) 30%, rgba(93,74,38,.035) 62%, transparent 100%); } /* nas faixas escuras a sombra some, então o degradê é de LUZ: clareia na divisa e escurece pra dentro, que é o mesmo efeito lido ao contrário */ body > section.escuro::before, body > section.chamada::before{ background:linear-gradient(to bottom, rgba(201,169,97,.22) 0%, rgba(201,169,97,.09) 35%, transparent 100%); } /* a capa não leva: ela abre a página, não troca de assunto com ninguém, e ali em cima tem foto de obra */ body > section.capa::before{display:none} /* o conteúdo passa por cima do degradê */ body > section > *{position:relative;z-index:1} /* ---------- A TARJA DO TOPO NUMA LINHA SÓ ---------- 26/08/2026. Ela quebrava em duas e a segunda linha ficava com um pedaço solto do telefone, "0941", pendurado embaixo. Feio, e ainda por cima é o dado mais importante que tem ali. Duas coisas resolveram, e as duas eram necessárias: 1. "Litoral de São Paulo" virou "Litoral de SP". Ninguém no Alto Tietê lê "SP" e fica em dúvida, e isso sozinho tirou 8 caracteres do meio da frase. 2. O tamanho passou a vir da LARGURA DA TELA, e não da fonte do sistema, pelo mesmo motivo do menu: com o texto do Android ampliado, ela voltava a quebrar. Medido: com "SP" e 13,1px ela já cabe de 360px pra cima; o que faltava era garantir os 320 e os aparelhos com fonte grande. O piso de 11px veio de medir: em 320px, 11,5px ainda cabe e 13,1 não. */ @media(max-width:820px){ .tarja{font-size:clamp(11px, 3.4vw, 13.1px);letter-spacing:.05em} } /* =========================================================== AS BOLINHAS PRECISAM CABER NA PRIMEIRA TELA DO NOTEBOOK 26/08/2026. Ele: "no mac ou no windows ou sla qualquer um que seja pc notebook, as bolinhas pra selecionar as imagens tem que tá nessa tela inicial, sem precisar deslizar nada da tela". Medido antes de mexer, e o problema é só nas telas baixas: 1280x720 bolinhas 37px ABAIXO da dobra 1366x768 52px abaixo 1440x900 cabem, 63px de sobra 1512x850 cabem, mas com 9px de sobra, ou seja raspando 1920x1080 cabem folgado O 1366x768 é o tamanho de notebook mais comum que existe, então isso pegava justamente a maioria. O PRIMEIRO CONSERTO NÃO FUNCIONOU, e o motivo é a parte que interessa: eu diminuí a altura da FOTO e as bolinhas não se mexeram um pixel. Elas parecem estar na foto, mas não estão: o `.capa-nav` mora na `.capa`, a SEÇÃO inteira, e estava preso ao pé dela com `bottom`. Isso foi de propósito lá atrás, porque dentro do `#capaFundo` o texto por cima engolia o clique. Então elas continuam onde estão, e o que muda é a conta: em vez de `bottom` na seção, `top` medido a partir da altura da foto. Assim elas voltam a acompanhar a foto sem sair de onde precisam estar pra receber clique. A ALTURA DA FOTO VIRA UM NÚMERO SÓ, o --alt-foto, usado pelos dois. Sem isso, alguém mexe numa e esquece da outra, e as bolinhas descolam da foto de novo sem ninguém entender por quê. O `calc(100vh - 150px)` é a garantia de caber: 150 é o topo fixo (49 da tarja mais 91 do cabeçalho) mais uma folga. Medido depois, dá 31px de sobra em 1280, em 1366 e em 1512, sempre igual. */ @media(min-width:821px){ .capa{--alt-foto:min(100%, 86vh, calc(100vh - 150px))} .capa-fundo{height:var(--alt-foto)} .capa-nav{top:calc(var(--alt-foto) - 56px);bottom:auto} } /* ---------- NOTEBOOK DE 768: TUDO NA PRIMEIRA TELA ---------- 26/08/2026. Ele: "deixa o botão da IA ali do lado pra ficar todas as informações da tela inicial, sem ter que deslizar a tela". MEDI A IDEIA DELE ANTES DE FAZER, e ela piora no aparelho que mais importa. Com o botão ao lado do texto, a faixa perde largura e o texto vai de 3 linhas pra 6: 1366x768 a faixa CRESCE de 172 pra 192px, e falta 86 em vez de 66 1512x850 a faixa cai pra 166px, e passa a caber por 4px Ou seja: ajuda no MacBook e atrapalha no notebook comum, que é justamente o mais vendido. Então o botão fica onde está, e o espaço veio de outro lugar. ONDE ESTAVA SOBRANDO: os degraus de altura que já existiam pulavam de 800 pra 745, e o 768 caía no de 800, que era folgado demais pra ele. Faltavam exatos 66px. Este degrau novo corta SÓ ESPAÇAMENTO, e não mexe no tamanho de letra nenhuma. É de propósito: o degrau de 745 já encolhe o título, e encolher tipografia antes de gastar o respiro é apertar pelo lado errado. Recolhidos aqui: 30 do vão acima dos botões, 16 dos selos, 12 do título, 8 da faixa e 8 da capa. Dá 74, e precisava de 66. */ @media (min-width:981px) and (max-height:795px) and (min-height:746px) { .capa{padding-top:8px;padding-bottom:8px} .capa h1{margin-top:10px} .capa .cta{margin-top:22px} .capa .faixa-ia{padding-top:12px;padding-bottom:12px} .capa .selos{margin-top:8px;padding-top:10px} } /* ---------- OS DOIS DEGRAUS QUE FALTAVAM ---------- 26/08/2026, medindo depois do degrau de 768. Sobraram dois casos: 1512x850 faltavam 2px, ou seja, raspava e não entrava 1280x720 faltavam 55px O de 850 é MacBook Air, que é o aparelho do Gustavo. O de 720 é notebook antigo, ainda comum em escritório. Nos dois o remédio é o mesmo do degrau anterior: cortar ESPAÇO, não letra. No 720 o degrau de 745 já tinha encolhido o título, mas tinha deixado intactos os 52px acima dos botões e os 34 dos selos, que é onde estava o dinheiro. */ /* MacBook Air e parecidos: um corte leve, só pra sair do limite */ @media (min-width:981px) and (max-height:870px) and (min-height:796px) { .capa .cta{margin-top:38px} .capa .selos{margin-top:12px;padding-top:12px} } /* Notebook de 720: aqui aperta de verdade, e ainda assim sem mexer no tamanho de nenhuma letra */ @media (min-width:981px) and (max-height:745px) { .capa h1{margin-top:8px} .capa .cta{margin-top:18px;margin-bottom:4px} .capa .faixa-ia{padding-top:10px;padding-bottom:10px} .capa .selos{margin-top:6px;padding-top:8px} } /* ---------- O NOME INTEIRO VOLTOU ---------- 26/08/2026. Ele: "tem que ser recuperar piso, lá como tava antes de deixar 1 linha, porque cabe". E cabe mesmo, agora. Quando eu encurtei pra "Recuperar", a fonte ainda era .58rem. Depois ela passou a vir da largura da tela, e com isso encolheu o bastante pro nome inteiro entrar. Medido em sete combinações, de 320 a 412 e até 200% de fonte do sistema: **6 de 6 em todas**, com folga de 4px no pior caso e 47 no melhor. O corte só sobrevive abaixo de 340px, onde os 4px de folga são apertados demais pra confiar: diferença de renderização de fonte entre aparelhos come isso fácil. Ali continua "Recuperar", e é a fatia mais rara do parque de aparelhos. */ .mn-lg{display:inline} .mn-ct{display:none} @media(max-width:340px){ .menu a .mn-lg{display:none} .menu a .mn-ct{display:inline} } /* ---------- A LINHA QUE DIVIDE O TOPO DA FOTO ---------- 26/08/2026, pedido dele: "deixa uma linha no meio pra ter a divisão das áreas, e um degradê escuro do centro da linha, e pra direita e pra esquerda, mas um degradê pequeno". O fio que existia era chapado de ponta a ponta, e fio chapado tem cara de tabela. Este acende no meio e apaga nas pontas, então ele marca a divisão sem virar borda de moldura: o olho lê a separação e não lê "linha". O degradê é curto de propósito, como ele pediu: some antes de 15% e depois de 85%, então as pontas ficam limpas e a marca fica só no miolo, que é por onde o olho passa. Vai num ::after e não no border-bottom porque borda não aceita degradê. ---------- E AQUI EU QUEBREI O SITE INTEIRO ---------- A primeira versão desta regra era `header{position:relative}`, pra "segurar" os pseudo-elementos. Isso ATROPELOU o `position:sticky` que vem do wen.css, e o cabeçalho deixou de grudar no topo: ele passou a rolar embora junto com a página e nunca mais voltava. Foi assim que nasceram três rodadas de conserto no código de mostrar e esconder o topo, todas mirando no lugar errado. O javascript estava certo desde o começo: ele tirava a classe `topo-fora` direitinho, e não adiantava nada, porque não existe como trazer de volta um elemento que não está mais grudado em lugar nenhum. O print do DevTools dele foi o que entregou: ``, SEM `topo-fora`, e mesmo assim nenhum cabeçalho na tela. Estado certo, resultado errado, e isso só pode ser css. `sticky` JÁ É posicionado, então pseudo-elemento absoluto se ancora nele igual. O `relative` nunca foi necessário, só destrutivo. A LIÇÃO: eu vinha conferindo se a CLASSE entrava e saía, e ela entrava e saía. Nunca conferi se o cabeçalho estava DE FATO na tela. Testar o estado interno não é testar o resultado. */ header{border-bottom:0} header::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:1px; pointer-events:none; background:linear-gradient(to right, transparent 0%, rgba(93,74,38,.10) 15%, rgba(93,74,38,.34) 50%, rgba(93,74,38,.10) 85%, transparent 100%); } /* uma sombra bem curta logo abaixo do fio, saindo do mesmo meio: é o que dá a sensação de que a foto começa DEPOIS de alguma coisa, e não colada no menu */ header::before{ content:"";position:absolute;left:0;right:0;top:100%;height:10px; pointer-events:none;z-index:1; background:radial-gradient(60% 100% at 50% 0%, rgba(93,74,38,.09) 0%, rgba(93,74,38,.03) 45%, transparent 100%); } /* ---------- OS FIOS ENTRE OS ITENS DO MENU ---------- 26/08/2026, ele: "escurece mais as linhas de divisão das páginas". Medido antes de escolher o tom, porque "mais escuro" sem número vira chute e chute erra pros dois lados: fio de antes contraste 1,15 contra a faixa, ou seja, quase invisível. Existia no código e não existia no olho texto do menu contraste 5,11 fio agora contraste 2,60 O alvo era ficar CLARAMENTE visível e ainda assim bem abaixo do texto. Fio que chega perto do peso do texto vira grade, e aí a pessoa lê a divisória junto com a palavra, o que cansa. Metade do contraste do texto é onde separador some quando não se olha pra ele e aparece quando se procura. O tom é o mesmo bronze da linha do topo e dos degradês das seções, e não um cinza novo: cinza no meio de uma paleta quente aparece como sujeira. */ .menu a + a::before{background:rgba(93,74,38,.55)} @media(max-width:820px){ /* o wen.css derruba pra opacidade .55 no celular, o que anularia metade do que acabou de ser ganho aqui */ .menu a + a::before{opacity:1} } /* ---------- A TARJA DA IA OCUPAVA MEIA TELA NO CELULAR ---------- 26/08/2026, ele: "arruma essa parte deixa um pouco menor no celular, essa parte não é pra tomar tanto espaço assim". Medida: 292px de altura numa tela de 812, ou seja, 36% da tela numa caixa só. O maior pedaço era o selo: ele quebrava pra uma linha inteira só pra ele, e sozinho custava 73px entre altura e vão. Agora ele fica NA MESMA LINHA do texto e um pouco menor. O texto perde largura e ganha uma linha, mas mesmo assim sobra: 292 vira 244, quase 50px de volta. como estava 292px selo na linha do texto 264px selo na linha e menor 244px <- este e o botão mais baixo 240px descartado Os últimos 4px sairiam do botão, e o botão é o que converte: alvo de toque não se corta pra ganhar 4 pixels. */ @media(max-width:820px){ .capa .faixa-ia{flex-wrap:nowrap;gap:11px;padding:12px 14px} .ia-medalha svg{width:34px} .ia-corpo{gap:10px} } /* ---------- A BARRA CLARA NO FIM DO SITE ---------- 26/08/2026, ele: "tira essa barra branca do fundo do site, tanto do celular quanto dos pc e notebook e tablet". Eram DOIS problemas diferentes com a mesma cara, e por isso ele viu nos três aparelhos: 1. NO COMPUTADOR E NO TABLET era o "puxar além do fim". Quando a pessoa rola passando do fim da página, o navegador mostra o fundo do documento atrás, e ele era creme enquanto o rodapé é escuro. Medido: a página termina exatamente no rodapé nos dois, então não havia faixa nenhuma no HTML, era só o elástico da rolagem. 2. NO CELULAR havia faixa de verdade: 35px de creme depois do rodapé, onde mora o selo de prévia, que lá embaixo deixa de flutuar e vira uma linha no pé. O primeiro resolve pintando o HTML de escuro. Dá pra fazer sem medo porque as DUAS pontas do site são escuras: a tarja em cima e o rodapé embaixo, os dois no mesmo #1B1815. O body continua creme, que é o fundo do conteúdo. */ html{background:#1B1815} /* O segundo: o selo vira uma faixa escura de ponta a ponta, e o site passa a terminar na mesma cor do rodapé, sem emenda. */ @media(max-width:760px){ /* O seletor e `a.previa-sol` e nao `.previa-sol` de proposito. Algumas dezenas de linhas acima existe um `@media (hover:none){ a.previa-sol{margin:-6px -14px} }`, posto pra aumentar o alvo de toque quando o selo ainda flutuava. Ele e mais especifico que uma classe sozinha e ganhava daqui. O resultado disso apareceu na medida: o selo ficava com 403px numa tela de 375, comecando em -14, e o SITE INTEIRO passava a rolar pro lado. Rolagem lateral e daquelas coisas que a pessoa sente como "site mal feito" sem saber nomear. */ a.previa-sol{ width:auto;display:block;text-align:center; background:#1B1815;color:rgba(255,255,255,.42); border:0;margin:0;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px)); } a.previa-sol:active{transform:none;opacity:.7} } /* ---------- marca tipografica do cabecalho ---------- 03/09/2026. O selo redondo saiu do topo a pedido do Gustavo: fica so a palavra, no MESMO tratamento do rodape (Oswald, caixa alta, bem espacada), na cor --claro, que e o preto da logo original. O selo continua em img/ e vale no Instagram, onde e grande e colorido. */ .topo .marca .marca-txt{ font-family:'Oswald',sans-serif; font-weight:500; font-size:clamp(1.5rem,3.2vw,2.1rem); letter-spacing:.26em; text-transform:uppercase; color:var(--claro); line-height:1; display:block; /* o espacamento a direita da ultima letra desalinha a marca do menu */ margin-right:-.26em; }