:root{ /* céu antes do amanhecer */ --fundo:#0a0b10; --fundo2:#07080c; --papel:#14161f; --papel2:#1c1f2b; --papel3:#232734; --tinta:#f7f2ec; --tinta2:#b6afa8; --tinta3:#847d78; --linha:#252936; --linha2:#343a4b; /* a faixa do sol nascendo */ --marca:#ff8a3d; --marca-viva:#ffa95c; --marca-clara:#2a1a10; --brasa:#ff5e4d; --brasa-fundo:#2a1210; --ouro:#ffc862; --ouro-fundo:#2a2110; /* a única cor fria da página, reservada ao que foi conferido */ --selo:#4ed8a0; --selo-fundo:#0e2620; --alerta:#ffb84d; --alerta-fundo:#241a0c; --sombra:0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.35); --sombra-alta:0 2px 6px rgba(0,0,0,.55), 0 22px 48px rgba(0,0,0,.45); --brilho:0 0 0 1px rgba(255,138,61,.18), 0 10px 40px rgba(255,94,77,.10); --raio:16px; --raio2:22px; /* A coluna lateral. Nao e cor, e medida: fica aqui porque a largura dela e o que sobra para a grade de produtos, e essa conta tem que ter um lugar so. Cresce em dois degraus conforme a tela da folga (mais abaixo). */ --lateral-largura:268px; --lateral-vao:24px; --amanhecer:linear-gradient(97deg,#ff5e4d 0%,#ff8a3d 46%,#ffc862 100%); } /* O site tem UM tema, e ele e escuro: o do nascer do sol, o que ja estava no ar. Decisao do dono em 19/08/2026: "eu ainda prefiro o tema escuro que estava, branco cansa a vista". Existiu aqui uma segunda paleta, clara, ligada por um atributo no -- foi removida INTEIRA. De proposito ela nao ficou comentada, nem guardada atras de um seletor de aparencia inofensiva, nem trocada por uma consulta a preferencia do sistema: paleta clara adormecida e um site que amanhece branco no dia em que alguem liga o gatilho sem saber o que ele faz. Nao existe alternador de tema, e nao e para existir. Se um dia o claro voltar, que volte por decisao de quem pediu, e nunca por descuido. */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--fundo);color:var(--tinta); font:16px/1.6 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; font-variant-numeric:tabular-nums} a{color:var(--marca-viva);text-underline-offset:2px} img{max-width:100%} :focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:6px} h1,h2,h3{letter-spacing:-.03em} /* O sol que nasce atrás do conteúdo. Fica no body para atravessar todas as páginas sem repetir marcação, e não rola com o texto. */ body::before{content:"";position:fixed;inset:0 0 auto;height:520px;z-index:0; pointer-events:none; background: radial-gradient(1100px 380px at 12% -12%,rgba(255,94,77,.16),transparent 62%), radial-gradient(900px 320px at 82% -18%,rgba(255,200,98,.11),transparent 60%)} .topo,main,.rodape{position:relative;z-index:1} /* ---------- topo ---------- */ .topo{position:sticky;top:0;z-index:20; background:color-mix(in srgb,var(--fundo) 82%,transparent); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid color-mix(in srgb,var(--linha) 70%,transparent)} .topo .interno{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex; align-items:center;gap:24px;flex-wrap:wrap} .marca{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17.5px; letter-spacing:-.04em;text-decoration:none;color:var(--tinta)} .marca .glifo{width:28px;height:28px;flex:none} .marca span{background:var(--amanhecer);-webkit-background-clip:text; background-clip:text;color:transparent} /* O flex-wrap nao e enfeite: os tres links somam 262px e a barra so tem 232px numa tela de 280. Sem ele o menu vazava para fora da tela e a PAGINA INTEIRA rolava para o lado -- medido no site gerado, em 280px. */ .topo nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px;font-size:14px; align-items:center} .topo nav a{color:var(--tinta2);text-decoration:none;padding:8px 13px;border-radius:10px; font-weight:500;transition:background .14s,color .14s} .topo nav a:hover{background:var(--papel2);color:var(--tinta)} main{max-width:1240px;margin:0 auto;padding:32px 24px 100px} /* ---------- abertura ---------- */ .abertura{margin:0 0 24px} .selo-linha{display:inline-flex;align-items:center;gap:8px;font-size:12px; text-transform:uppercase;letter-spacing:.16em;font-weight:700;color:var(--tinta3); margin:0 0 14px} .selo-linha::before{content:"";width:26px;height:2px;border-radius:2px; background:var(--amanhecer)} .chamada{margin:0 0 12px;font-size:clamp(29px,4.4vw,46px);line-height:1.04; letter-spacing:-.045em;font-weight:800;max-width:20ch;text-wrap:balance} .chamada em{font-style:normal;background:var(--amanhecer); -webkit-background-clip:text;background-clip:text;color:transparent} .sub{color:var(--tinta2);margin:0;max-width:58ch;font-size:16.5px;line-height:1.5} .provas{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0} .prova{display:flex;align-items:center;gap:9px;background:var(--papel); border:1px solid var(--linha);border-radius:999px;padding:9px 16px;font-size:13.5px; color:var(--tinta2)} .prova b{color:var(--tinta);font-weight:750} .prova .ponto{width:7px;height:7px;border-radius:50%;background:var(--selo);flex:none; box-shadow:0 0 0 3px color-mix(in srgb,var(--selo) 18%,transparent)} /* ---------- busca ---------- */ .painel-busca{margin:22px 0 6px;position:relative} .campo-busca{position:relative;max-width:700px} .campo-busca svg{position:absolute;left:21px;top:50%;transform:translateY(-50%); width:19px;height:19px;color:var(--tinta3);pointer-events:none} #busca{width:100%;background:var(--papel);color:var(--tinta); border:1.5px solid var(--linha2);border-radius:999px; padding:15px 22px 15px 50px;font-size:16.5px;font-family:inherit;font-weight:500; box-shadow:var(--sombra);transition:border-color .16s,box-shadow .16s} #busca::placeholder{color:var(--tinta3);font-weight:400} #busca:focus{outline:none;border-color:var(--marca);box-shadow:var(--brilho)} #busca:disabled{opacity:.5} .dica-busca{font-size:13px;color:var(--tinta3);margin:13px 0 0;display:flex; gap:7px;flex-wrap:wrap;align-items:center} .dica-busca em{font-style:normal;background:var(--papel);border:1px solid var(--linha); color:var(--tinta2);padding:5px 12px;border-radius:999px;cursor:pointer; transition:border-color .16s,color .16s} .dica-busca em:hover{border-color:var(--marca);color:var(--marca-viva)} .facetas{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px} .faceta{display:flex;flex-wrap:wrap;gap:7px;align-items:center} .faceta b{font-size:10.5px;text-transform:uppercase;letter-spacing:.14em; color:var(--tinta3);margin-right:4px;font-weight:800} .faceta button{background:var(--papel);border:1px solid var(--linha);color:var(--tinta2); border-radius:999px;padding:8px 15px;font-size:13px;cursor:pointer;font-family:inherit; font-weight:600;transition:all .14s} .faceta button:hover{border-color:var(--marca);color:var(--marca-viva)} .faceta button.ativo{background:var(--marca);border-color:var(--marca);color:#12100e} .faceta button.ativo span{color:rgba(18,16,14,.62)} .faceta button span{color:var(--tinta3);font-size:11.5px;margin-left:5px;font-weight:500} /* ---------- explorar (pushdown) ---------- */ /* Uma linha em vez de tres. O produto entra na primeira tela e quem quer navegar por categoria abre quando quiser -- sem JavaScript, so
. */ .explorar{margin:18px 0 0;border:1px solid var(--linha);border-radius:14px; background:color-mix(in srgb,var(--papel) 60%,transparent);overflow:hidden} .explorar summary{cursor:pointer;padding:13px 18px;font-size:14.5px;font-weight:650; color:var(--tinta2);display:flex;align-items:center;gap:10px;list-style:none; transition:color .14s,background .14s} .explorar summary::-webkit-details-marker{display:none} .explorar summary::before{content:"";width:8px;height:8px;flex:none; border-right:2px solid var(--marca);border-bottom:2px solid var(--marca); transform:rotate(-45deg);transition:transform .18s;margin-left:2px} .explorar[open] summary::before{transform:rotate(45deg)} .explorar summary:hover{color:var(--tinta);background:var(--papel2)} .explorar summary i{font-style:normal;color:var(--tinta3);font-weight:500;font-size:13px} .explorar .categorias{margin:0;padding:4px 18px 18px} .explorar[open]{background:var(--papel)} /* Os filtros da busca seguem a mesma regra: fechados, um por assunto, com o que esta ativo aparecendo no proprio rotulo. */ .filtros{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;align-items:flex-start} .filtro{border:1px solid var(--linha);border-radius:12px;background:var(--papel); min-width:0} .filtro summary{cursor:pointer;padding:10px 15px;font-size:13.5px;font-weight:650; color:var(--tinta2);display:flex;align-items:center;gap:8px;list-style:none; white-space:nowrap} .filtro summary::-webkit-details-marker{display:none} .filtro summary::after{content:"";width:7px;height:7px;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg);opacity:.5;margin-top:-3px} .filtro[open]{border-color:var(--linha2)} .filtro.tem-escolha{border-color:var(--marca);color:var(--marca-viva)} .filtro.tem-escolha summary{color:var(--marca-viva)} .filtro .opcoes{display:flex;flex-direction:column;gap:2px;padding:6px; max-height:340px;overflow:auto;min-width:210px} .filtro .opcoes button{background:none;border:none;text-align:left; color:var(--tinta2);border-radius:8px;padding:8px 11px;font-size:13.5px; cursor:pointer;font-family:inherit;font-weight:550;display:flex; justify-content:space-between;gap:12px} .filtro .opcoes button:hover{background:var(--papel2);color:var(--tinta)} .filtro .opcoes button.ativo{background:var(--marca-clara);color:var(--marca-viva)} .filtro .opcoes button span{color:var(--tinta3);font-size:12px;font-weight:500} .limpar-filtros{background:none;border:1px dashed var(--linha2);color:var(--tinta3); border-radius:12px;padding:10px 15px;font-size:13px;cursor:pointer; font-family:inherit;font-weight:600} .limpar-filtros:hover{border-color:var(--brasa);color:var(--brasa)} /* ---------- categorias ---------- */ .categorias{display:flex;flex-wrap:wrap;gap:9px;margin:28px 0 4px} .categorias .cat{display:inline-flex;align-items:center;gap:8px;background:var(--papel); border:1px solid var(--linha);border-radius:999px;padding:10px 17px;font-size:14px; text-decoration:none;color:var(--tinta2);font-weight:600;transition:all .14s} .categorias .cat:hover{border-color:var(--marca);color:var(--marca-viva); transform:translateY(-1px)} .categorias .cat.atual{background:var(--marca);border-color:var(--marca);color:#12100e} .categorias .cat.atual span{color:rgba(18,16,14,.6)} .categorias .cat span{font-size:12px;color:var(--tinta3);font-weight:500} /* ---------- seções ---------- */ .secao-titulo{display:flex;align-items:baseline;gap:14px;margin:44px 0 0;flex-wrap:wrap} /* O primeiro bloco cola no topo: e ele que tem que aparecer junto com a busca. */ #curadoria>section:first-child .secao-titulo{margin-top:22px} .secao-titulo h2{margin:0;font-size:23px;font-weight:780} .secao-titulo p{margin:0;color:var(--tinta3);font-size:14px} .secao-titulo .mais{margin-left:auto;font-size:13.5px;color:var(--marca-viva); text-decoration:none;font-weight:650;white-space:nowrap} .secao-titulo .mais:hover{text-decoration:underline} /* O motivo pelo qual o bloco existe. Vitrine sem critério declarado é só uma parede de produto; dizer POR QUE aquilo está ali é o produto deste site. */ .motivo{margin:8px 0 0;color:var(--tinta2);font-size:14.5px;max-width:64ch} .motivo b{color:var(--tinta);font-weight:700} /* ---------- grade e cartões ---------- */ .grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:20px;margin-top:24px} .carta{position:relative;background:var(--papel);border:1px solid var(--linha); border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column; text-decoration:none;color:inherit;box-shadow:var(--sombra); transition:transform .18s,box-shadow .18s,border-color .18s} .carta:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta); border-color:var(--linha2)} /* A moldura é branca SEMPRE, inclusive no tema escuro: `multiply` só funciona sobre branco. Sobre fundo escuro o produto some, e isso já foi medido no site publicado. */ .carta .moldura,.vitrine .moldura{position:relative;background:#fff;padding:16px; aspect-ratio:1;display:flex;align-items:center;justify-content:center} .carta img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .carta .corpo{padding:15px 17px 17px;display:flex;flex-direction:column;gap:8px;flex:1} .carta h3{margin:0;font-size:14.5px;font-weight:600;line-height:1.36; letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .linha-preco{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-top:auto} .preco{font-size:22px;font-weight:800;color:var(--tinta);letter-spacing:-.035em} .antes{font-size:13px;color:var(--tinta3);text-decoration:line-through} /* O desconto no canto da foto, não no meio do texto: é a primeira coisa que o olho procura numa vitrine de oferta. */ .selo-desconto{position:absolute;top:12px;left:12px;z-index:2; background:var(--brasa);color:#fff;font-weight:800;font-size:13px; padding:5px 11px;border-radius:10px;letter-spacing:-.02em; box-shadow:0 4px 14px rgba(255,94,77,.35)} .selo-desconto.forte{background:var(--amanhecer);color:#1a0f08} .nota{display:inline-flex;align-items:center;gap:5px;font-size:12.5px; color:var(--tinta2);font-weight:600} .nota svg{width:12px;height:12px;color:var(--ouro);flex:none} .nota i{font-style:normal;color:var(--tinta3);font-weight:500} .etiqueta{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;padding:4px 10px; border-radius:999px;background:var(--selo-fundo);color:var(--selo);width:fit-content; font-weight:700;letter-spacing:-.01em} .etiqueta.exterior{background:var(--alerta-fundo);color:var(--alerta)} .etiqueta.neutra{background:var(--papel2);color:var(--tinta3)} .etiqueta.ouro{background:var(--ouro-fundo);color:var(--ouro)} .meta{font-size:12.5px;color:var(--tinta3);display:flex;gap:8px;align-items:center; flex-wrap:wrap} .foto-vazia{width:100%;aspect-ratio:1; background:linear-gradient(160deg,var(--papel2),var(--papel3))} /* ---------- o achado do dia ---------- */ .achado{display:grid;grid-template-columns:1fr;gap:0;margin-top:24px; border:1px solid var(--linha2);border-radius:var(--raio2);overflow:hidden; background:var(--papel);box-shadow:var(--sombra-alta);text-decoration:none;color:inherit; transition:border-color .18s,box-shadow .18s} .achado:hover{border-color:var(--marca);box-shadow:var(--sombra-alta),var(--brilho)} @media(min-width:860px){.achado{grid-template-columns:minmax(0,46%) minmax(0,1fr)}} .achado .moldura{position:relative;background:#fff;padding:26px;aspect-ratio:4/3; display:flex;align-items:center;justify-content:center} .achado img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .achado .corpo{padding:30px 32px 32px;display:flex;flex-direction:column;gap:12px; justify-content:center} .achado h3{margin:0;font-size:clamp(20px,2.4vw,27px);font-weight:780;line-height:1.18} .achado .precao{font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.045em; line-height:1;margin:0} .achado .antes{font-size:16px} .achado .cta{margin-top:6px} /* ---------- página de produto ---------- */ .migalha{font-size:13.5px;color:var(--tinta3);margin:0 0 20px} .migalha a{color:var(--tinta2);text-decoration:none} .migalha a:hover{color:var(--marca-viva)} .detalhe{display:grid;grid-template-columns:1fr;gap:38px} @media(min-width:860px){.detalhe{grid-template-columns:420px 1fr}} /* O align-self:start conserta duas coisas de uma vez, e as duas apareceram medindo a pagina com a lateral ligada: esticada ate o fim da linha da grade, a vitrine desenhava borda e sombra em volta de um vazio de centenas de pixels abaixo da foto, e o proprio sticky nao fazia nada -- caixa da altura da celula nao tem para onde deslizar. */ .vitrine{border:1px solid var(--linha);border-radius:var(--raio2);overflow:hidden; box-shadow:var(--sombra);position:sticky;top:92px;align-self:start} .vitrine .moldura{aspect-ratio:1;padding:30px} .vitrine img{border-radius:4px} .titulo-produto{margin:0 0 14px;font-size:clamp(23px,3vw,32px);font-weight:780; line-height:1.16} .precao{font-size:clamp(36px,5vw,50px);font-weight:800;color:var(--tinta); letter-spacing:-.045em;line-height:1;margin:4px 0} .bloco-preco{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 6px} .bloco-preco .antes{font-size:18px} .baixou{display:inline-flex;align-items:center;gap:7px;background:var(--brasa-fundo); color:var(--brasa);font-weight:750;font-size:14px;padding:6px 13px;border-radius:999px} .atributos{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0} .atributo{font-size:12.5px;background:var(--papel2);color:var(--tinta2); border-radius:9px;padding:6px 12px;font-weight:600} .caixa{background:var(--papel);border:1px solid var(--linha);border-radius:var(--raio); padding:22px 24px;margin:22px 0;box-shadow:var(--sombra)} .caixa h2{margin:0 0 14px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--tinta3);font-weight:800} .caixa.aviso{border-color:color-mix(in srgb,var(--alerta) 34%,transparent); background:var(--alerta-fundo)} .caixa.aviso h2{color:var(--alerta)} .botao{display:inline-flex;align-items:center;justify-content:center;gap:10px; background:var(--amanhecer);color:#1a0f08;font-weight:800;font-size:16.5px; padding:16px 32px;border-radius:999px;text-decoration:none;margin-top:18px; letter-spacing:-.02em;box-shadow:0 6px 22px rgba(255,110,60,.28); transition:transform .14s,box-shadow .14s,filter .14s} .botao:hover{transform:translateY(-2px);filter:brightness(1.06); box-shadow:0 12px 32px rgba(255,110,60,.4)} .botao svg{width:17px;height:17px} .aviso-publi{font-size:12.5px;color:var(--tinta3);margin:12px 0 0;max-width:54ch} .tabela{width:100%;border-collapse:collapse;font-size:14.5px} .tabela td{padding:11px 0;border-bottom:1px solid var(--linha)} .tabela tr:last-child td{border-bottom:none} .tabela td:first-child{color:var(--tinta3)} .tabela td:last-child{text-align:right;font-weight:650} /* ---------- gráfico ---------- */ .grafico{width:100%;height:150px;display:block;margin:6px 0 2px} .grafico-linha{fill:none;stroke:var(--marca);stroke-width:2.5;stroke-linejoin:round; stroke-linecap:round} .grafico-area{fill:var(--marca);opacity:.13} .grafico-ponto{fill:var(--marca-viva)} .grafico-eixo{stroke:var(--linha2);stroke-width:1;stroke-dasharray:3 4} .grafico-rotulo{fill:var(--tinta3);font-size:11px;font-family:inherit} .legenda-grafico{font-size:12.5px;color:var(--tinta3);display:flex; justify-content:space-between;margin-top:4px} /* ---------- avisos e vazios ---------- */ .aviso{background:var(--alerta-fundo); border:1px solid color-mix(in srgb,var(--alerta) 26%,transparent); border-radius:var(--raio);padding:16px 20px;margin:26px 0;font-size:14.5px; color:var(--tinta2)} .aviso b{color:var(--tinta)} .contagem{font-size:14px;color:var(--tinta3);margin:24px 0 6px} .vazio-busca{color:var(--tinta2);background:var(--papel);border:1px solid var(--linha); border-radius:var(--raio);padding:28px;margin:24px 0;box-shadow:var(--sombra)} /* ---------- esteira infinita ---------- */ #esteira-secao{margin-top:8px} #esteira-fim{text-align:center;padding:26px 0 8px;color:var(--tinta3);font-size:14px; display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap} /* O botao existe para quem o observador nao alcanca: navegador antigo, leitor de tela, e quem prefere clicar a rolar. A esteira nao pode depender de um unico gesto. */ .ver-mais{background:var(--papel);border:1px solid var(--linha2);color:var(--tinta); border-radius:999px;padding:10px 22px;font-size:14px;font-weight:700;cursor:pointer; font-family:inherit;transition:border-color .14s,color .14s} .ver-mais:hover{border-color:var(--marca);color:var(--marca-viva)} /* Sem JavaScript a esteira nunca preenche: o rotulo "Carregando mais" ficaria para sempre na tela. A secao inteira so aparece quando o JS a liga. */ #esteira-secao{display:none} #esteira-secao.tem{display:block} /* ---------- para você ---------- */ /* Some por padrão: um bloco vazio dizendo "para você" antes de a pessoa ver qualquer produto é promessa não cumprida. O JS revela quando há histórico. */ #para-voce{display:none} #para-voce.tem{display:block} .nota-privacidade{font-size:12.5px;color:var(--tinta3);margin:10px 0 0; display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nota-privacidade button{background:none;border:1px solid var(--linha); color:var(--tinta3);border-radius:999px;padding:4px 11px;font-size:12px; cursor:pointer;font-family:inherit;font-weight:600} .nota-privacidade button:hover{border-color:var(--brasa);color:var(--brasa)} /* ---------- as duas colunas ---------- */ /* A marcacao e esta, e so esta:
...a pagina de hoje...
O