/* KIRA - Design System v1
Um tema só, o Noir. O tema Creme saiu em 19/08/2026 e virou faixa clara
(.band-creme), que redefine os tokens dentro da própria seção. */
/* Paleta oficial da KIRA. Os contrastes daqui foram MEDIDOS na tela em
20/08/2026, rodando as 9 rotas e lendo a cor real de cada texto sobre o
fundo real dele. Quem reprovou no WCAG AA foi corrigido e está anotado ao
lado. Trocar qualquer valor destes obriga a refazer a medição. */
:root {
--bg: #191410; /* 01 fundo da página */
--bg-deep: #120E0B;
--surface: #2A2019; /* 02 cartão e superfície */
--surface-2: #33271F;
--line: #40332A;
--line-soft: #2E241D;
--text: #FFFFFF; /* 03 título */
--text-2: #C9B79A; /* 04 texto e subtítulo */
--text-3: #A08D76; /* 4,53:1 no pior fundo (surface-2). #988670 dava 4,12 */
--gold: #A88A6A; /* 05 detalhe e rótulo */
--gold-soft: #C9B79A;
--gold-dim: #6B563F;
--accent-text: #A88A6A;
--btn-bg: #FFFFFF; /* 06 botão, fundo */
--btn-txt: #1E1813; /* 07 botão, texto */
--band-creme: #FFFFFF; /* 08 faixa clara */
--band-txt: #191410; /* 09 texto na faixa clara */
--bordo: #B4515A; /* so borda e fundo */
--bordo-txt: #D8757D; /* bordo como TEXTO: 4,66:1. #B4515A dava 2,94 */
--ok: #7FA07A;
--tile-1: #241B17; --tile-2: #2A2019; --tile-3: #201A15; --tile-4: #2B2318;
--photo-1: #E9DFD3; --photo-2: #EDE2D2; --photo-3: #E4D8C6; --photo-4: #F0E4CE;
--photo-base: #F6F1E9; --art: #8A7256;
--shadow: 0 24px 60px rgba(0,0,0,.55);
--img-fade: .92;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg);
color: var(--text);
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter, Arial, sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
padding-bottom: env(safe-area-inset-bottom);
transition: background .35s ease, color .35s ease;
}
.serif {
font-family: Didot, "Bodoni 72", "Playfair Display", "Times New Roman", Georgia, serif;
font-weight: 400;
letter-spacing: .005em;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
/* ---------- utilitarios ---------- */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 820px; }
.overline {
font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
color: var(--text-3); font-weight: 500;
}
.overline-gold { color: var(--accent-text); }
.section { padding-top: 72px; padding-bottom: 72px; }
.section-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 34px;
}
.section-title { font-size: 30px; line-height: 1.15; }
.section-sub { color: var(--text-2); font-size: 14px; margin-top: 8px; max-width: 46ch; }
.section-link {
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent-text); border-bottom: 1px solid var(--gold-dim);
padding-bottom: 4px; white-space: nowrap;
}
.rule { height: 1px; background: var(--line); border: 0; }
/* ---------- so para leitor de tela ---------- */
/* Fica fora da vista sem sair da arvore de acessibilidade. display:none e
visibility:hidden sumiriam tambem para o leitor de tela, que e' o contrario
do que se quer aqui. */
.so-leitor {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* O link de pular so aparece quando recebe foco pelo teclado. */
.pular {
position: absolute; left: 12px; top: -60px; z-index: 200;
background: var(--surface); color: var(--text);
border: 1px solid var(--gold); border-radius: 2px;
padding: 12px 18px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
transition: top .16s ease;
}
.pular:focus { top: 12px; }
main:focus { outline: none; }
main h1:focus { outline: none; }
/* ---------- foco visivel ---------- */
/* Quem navega por teclado precisa ver onde esta. O site nao tinha anel nenhum,
e .input:focus ainda apagava o que o navegador desenharia sozinho.
--accent-text e dourado no escuro e quase preto na faixa clara, entao o
mesmo anel serve nos dois fundos. */
:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 2px;
border-radius: 2px;
}
.input:focus-visible {
outline: 2px solid var(--accent-text);
outline-offset: 1px;
border-color: var(--gold);
}
/* ---------- header ---------- */
.header {
position: sticky; top: 0; z-index: 60;
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(160%) blur(14px);
border-bottom: 1px solid var(--line-soft);
}
.header-in {
display: flex; align-items: center; gap: 28px;
height: 68px;
}
.logo {
font-family: Didot, "Bodoni 72", "Playfair Display", Georgia, serif;
font-size: 26px; letter-spacing: .30em; padding-left: .30em;
line-height: 1;
}
/* estilo do menu do topo agora vive no bloco MENU DO TOPO COM PAINEL */
.header-actions { display: flex; align-items: center; gap: 6px; }
/* COLUNA, PORQUE O NOME VAI EMBAIXO. E a mudanca acontece AQUI, na regra que ja
existia, e nao numa regra mais forte escrita depois.
Medido em 26/08/2026: eu tinha escrito `.header-actions .icon-btn
{ display: flex }`, com especificidade maior, e ela atropelou DUAS regras de
esconder que existiam ha semanas: `.burger { display: none }`, que fez o menu
sanduiche aparecer no computador, e `.header-actions .so-desktop
{ display: none }`, que encheu o topo do celular com seis icones.
Regra mais forte escrita depois nao "acrescenta": ela atropela o que voce nem
sabia que existia. Mexer na regra original mantem a ordem de quem esconde. */
.icon-btn {
width: 40px; height: 40px; border-radius: 50%; color: var(--text-2);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.4; }
/* O CONTADOR SE PRENDE AO CANTO DO BOTAO, e nao por margem negativa.
A margem negativa foi desenhada quando o botao era um circulo de 40px sem
texto embaixo. Com o nome embaixo do icone (26/08/2026), o numero caia em
cima da palavra. `.icon-btn` e' `position: relative`, entao o canto existe. */
.cart-dot {
position: absolute; top: 2px; right: 2px; margin: 0;
min-width: 16px; height: 16px;
border-radius: 8px; background: var(--gold); color: #0E0C0A;
font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px;
}
/* ---------- hero ---------- */
.hero {
position: relative; min-height: 560px; display: grid; align-items: center;
border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
.hero { background: var(--bg-deep); }
.hero-fotos { position: absolute; inset: 0; }
.hf {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0;
animation: heroTroca 21s linear infinite, heroZoom 21s ease-in-out infinite;
transform-origin: 60% 45%;
}
.hf.f1 { animation-delay: -1s, -1s; }
.hf.f2 { animation-delay: 6s, 6s; }
.hf.f3 { animation-delay: 13s, 13s; }
@keyframes heroTroca {
0% { opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; }
}
/* O ZOOM ERA DE 9%, PARA SEMPRE, ATRÁS DO TEXTO.
A foto crescia de 1.02 para 1.11 e ficava lá, num ciclo de 21 segundos que
recomeçava. Quem estava lendo o título via o fundo se mexendo por baixo dele
o tempo todo, e foi parte do "ta tudo voando estranho".
Sobrou 2%, que é o suficiente para a troca de foto não parecer um corte seco,
e pouco o bastante para ninguém reparar enquanto lê. */
@keyframes heroZoom { 0% { transform: scale(1.0); } 34%, 100% { transform: scale(1.02); } }
.hero-veu {
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.78) 40%, rgba(8,7,6,.20) 78%, rgba(8,7,6,.05) 100%),
linear-gradient(0deg, rgba(8,7,6,.55) 0%, transparent 40%);
}
.hero-grao {
position: absolute; inset: 0; opacity: .15; mix-blend-mode: overlay; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-in { position: relative; padding: 84px 24px; max-width: 668px; }
.hero h1 { font-size: 44px; line-height: 1.06; letter-spacing: -.5px; font-weight: 400; margin: 16px 0 16px; }
@media (prefers-reduced-motion: reduce) {
.hf { animation: none; }
.hf.f1 { opacity: 1; }
}
.hero p { color: var(--text-2); font-size: 16.5px; max-width: 44ch; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
/* ---------- botoes ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
height: 50px; padding: 0 30px; border-radius: 2px;
font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
transition: all .2s ease; white-space: nowrap;
}
.btn-gold { background: var(--btn-bg, var(--gold)); color: var(--btn-txt, #0E0C0A); border: 1px solid var(--btn-bg, var(--gold)); }
.btn-gold:hover { background: var(--gold-soft); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--gold); color: var(--accent-text); }
.btn-solid { background: var(--text); color: var(--bg); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 10.5px; }
/* ---------- chips ---------- */
.chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px;
padding: 9px 18px; font-size: 12px; color: var(--text-2); letter-spacing: .04em;
}
.chip:hover, .chip.on { border-color: var(--gold); color: var(--accent-text); }
/* ---------- selos de comportamento da vendedora ----------
Descrevem o que a compradora EXPERIMENTA, nunca metrica interna: e' a
conclusao do estudo do Journal of Marketing Research sobre o selo do eBay.
Discretos de proposito: quem manda na tela continua sendo a peca e o preco. */
.selos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.selo {
font-size: 11px; letter-spacing: .03em; color: var(--text-3);
border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px;
white-space: nowrap;
}
/* O de identidade e' o unico com peso, porque e' o unico que a KIRA confere
com documento, e nao apenas observa. */
.selo-forte { color: var(--accent-text); border-color: var(--gold); }
/* ---------- a sacola, agrupada por vendedora ----------
Um bloco por vendedora ACRESCENTA elementos na tela, e o Baymard mediu que
agrupar de forma logica faz a pessoa perceber o processo como mais simples
mesmo assim. O desenho tem que ajudar isso: borda leve separando os blocos,
e o nome dela em cima, nao repetido em letra pequena em cada linha. */
.bloco-vendedora {
border: 1px solid var(--line); border-radius: 12px;
padding: 4px 18px 6px; margin-bottom: 16px;
}
.bloco-vendedora-topo {
display: flex; align-items: center; gap: 12px;
padding: 14px 0 10px; border-bottom: 1px solid var(--line);
}
.bloco-vendedora-nome {
font-size: 15px; color: var(--text-1); text-decoration: none;
display: block;
}
.bloco-vendedora-nome:hover { color: var(--accent-text); }
.bloco-vendedora .row:last-child { border-bottom: none; }
/* ---------- o preco com a protecao junto ----------
Copiado do Vinted, lido ao vivo em 26/08/2026. O numero do Baymard que
justifica: 39% das pessoas abandonam por custo extra, que e' a causa numero
um, e outros 14% por nao conseguir ver o total antes. Mostrar so' no checkout
e' o comportamento que produz esses 39%.
Fica ABAIXO do preco e menor que ele: o preco da peca continua sendo o numero
grande, porque e' por ele que ela compara com outras lojas. */
.com-protecao {
display: flex; align-items: center; gap: 8px;
margin: 4px 0 2px; font-size: 13px; color: var(--text-2);
}
.com-protecao strong { color: var(--text-1); font-weight: 500; }
/* 24px de alvo e' pouco para dedo, entao a area clicavel cresce com padding
negativo em vez de o circulo inteiro ficar grande e pesado na tela. */
.por-que-protecao {
width: 18px; height: 18px; flex: 0 0 auto;
border: 1px solid var(--line); border-radius: 999px;
background: none; color: var(--text-3);
font-size: 11px; line-height: 1; cursor: pointer;
padding: 13px; box-sizing: content-box;
background-clip: content-box;
}
.por-que-protecao:hover { border-color: var(--gold); color: var(--accent-text); }
/* ---------- quando a peca entrou ----------
Discreto de proposito: e' informacao de apoio, nao chamada. Fica entre o nome
e o preco porque e' ali que o olho passa, e some sozinho depois de 30 dias
(ver _quandoEntrou). */
.entrou {
display: inline-block; margin: 6px 0 2px;
font-size: 11.5px; color: var(--text-3); letter-spacing: .04em;
}
/* ---------- escolha da caixa, na tela de anunciar ----------
Cartao e nao chip porque cada opcao carrega tres linhas: o nome do objeto, o
que cabe dentro, e a medida em letra miuda. A pesquisa de UX (secao 15.1)
mediu que ancorar em OBJETO converte melhor que ancorar em centimetro, entao
o nome e o exemplo vem grandes e a medida vem pequena, nessa ordem.
min-height de 44px nao basta aqui: o alvo e o cartao inteiro. */
.caixa-opcao {
display: flex; flex-direction: column; gap: 4px; text-align: left;
border: 1px solid var(--line); border-radius: 10px;
padding: 14px 16px; background: none; width: 100%;
cursor: pointer; transition: border-color .15s ease;
}
.caixa-opcao:hover { border-color: var(--gold); }
.caixa-opcao.on { border-color: var(--gold); background: var(--wash, transparent); }
.caixa-nome { font-size: 14.5px; color: var(--text-1); }
.caixa-opcao.on .caixa-nome { color: var(--accent-text); }
.caixa-cabe { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.caixa-medida { font-size: 11px; color: var(--text-3); letter-spacing: .03em; }
/* Num celular estreito dois cartoes lado a lado espremem o texto do "o que
cabe", que e' justamente a informacao que faz a pessoa escolher certo. */
@media (max-width: 460px) {
/* minmax(0, 1fr) e nao "1fr": 1fr sozinho e' minmax(AUTO, 1fr), e a coluna
cresce ate o min-content do filho, estourando a tela. Vigiado por
lib/testar-mobile.js, que pegou isto aqui no mesmo dia em que foi escrito. */
.field > .grid-2:has(.caixa-opcao) { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- grade e card de produto ---------- */
.grid { display: grid; gap: 34px 24px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { display: block; }
.card-img {
position: relative; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden;
background: var(--photo-base); margin-bottom: 16px;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.card:hover .tile { transform: scale(1.035); }
.tile { transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.card-badge {
position: absolute; left: 12px; top: 12px; z-index: 2;
background: color-mix(in srgb, var(--bg) 96%, transparent); /* 82% deixava a foto decidir o contraste */
backdrop-filter: blur(8px);
border: 1px solid var(--line);
font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
padding: 5px 9px; color: var(--text-2); border-radius: 2px;
}
.card-badge.premium { color: var(--accent-text); border-color: var(--gold-dim); }
.card-fav {
position: absolute; right: 10px; top: 10px; z-index: 2;
width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
background: color-mix(in srgb, var(--bg) 70%, transparent); color: var(--text-2);
}
/* pontinho dourado no icone de conta quando ha' alguem logado: e' o unico
jeito de saber de relance, no cabecalho, se a sessao esta de pe' */
.icon-btn { position: relative; }
.conta-ponto {
position: absolute; top: 4px; right: 4px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--gold); border: 1px solid var(--bg);
}
.card-fav:hover { color: var(--bordo); }
.card-fav svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.card-brand { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.card-name { font-size: 17px; margin: 7px 0 9px; line-height: 1.3; }
.card-price { font-size: 15px; letter-spacing: .02em; }
.card-price s { color: var(--text-3); font-size: 12.5px; margin-right: 8px; }
.card-meta { font-size: 11.5px; color: var(--text-3); margin-top: 8px; display: flex; gap: 7px; align-items: center; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
/* ---------- faixa de marcas ---------- */
.brands { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.brand-cell {
background: var(--bg); padding: 30px 12px; text-align: center;
font-family: Didot, "Bodoni 72", Georgia, serif; font-size: 15px; letter-spacing: .12em;
color: var(--text-2);
}
.brand-cell:hover { color: var(--accent-text); background: var(--surface); }
/* ---------- leilao ---------- */
.auction {
background: var(--bg-deep); border: 1px solid var(--line);
display: grid; grid-template-columns: 1.1fr 1fr; align-items: center;
}
.auction-art { aspect-ratio: 16/10; position: relative; }
.auction-in { padding: 52px 48px; }
.auction h3 { font-size: 34px; line-height: 1.1; margin: 14px 0 14px; }
.lot {
display: flex; gap: 30px; margin: 26px 0 30px; padding: 20px 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.lot-k { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
.lot-v { font-size: 21px; margin-top: 5px; }
.lot-v.gold { color: var(--accent-text); }
/* ---------- editorial ---------- */
.edit-card .edit-img { aspect-ratio: 3/2; border-radius: 2px; overflow: hidden; margin-bottom: 16px; position: relative; }
.edit-card h4 { font-size: 20px; line-height: 1.28; margin: 8px 0; }
.edit-card p { font-size: 13.5px; color: var(--text-2); }
/* ---------- pagina de produto ---------- */
.pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; padding: 44px 0 80px; }
.pdp-main { aspect-ratio: 4/5; border-radius: 2px; overflow: hidden; position: relative; background: var(--photo-base); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.pdp-thumb { aspect-ratio: 1; border-radius: 2px; overflow: hidden; position: relative; border: 1px solid transparent; }
.pdp-thumb.on { border-color: var(--gold); }
.pdp h1 { font-size: 34px; line-height: 1.15; margin: 10px 0 16px; }
.pdp-price { font-size: 28px; margin-bottom: 6px; }
.pdp-parcel { font-size: 13px; color: var(--text-2); }
.spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); margin: 26px 0; }
.spec div { background: var(--bg); padding: 14px 16px; }
.spec dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.spec dd { font-size: 14px; margin-top: 5px; }
.seller-box, .box {
border: 1px solid var(--line); padding: 20px; display: flex; gap: 16px; align-items: center;
}
/* Filho de flex nasce com min-width:auto e por isso se recusa a encolher abaixo
do proprio conteudo. Sem isto, o nome da vendedora mais o selo de verificada
empurram a caixa inteira para fora da tela no celular, em vez de quebrar
linha. E' a causa raiz; o minmax(0,1fr) la em cima e' o cinto de seguranca. */
.seller-box > *, .box > * { min-width: 0; }
.seller-box b, .box b { overflow-wrap: anywhere; }
.avatar {
width: 50px; height: 50px; border-radius: 50%; flex: 0 0 auto;
background: linear-gradient(135deg, var(--tile-2), var(--tile-4));
display: grid; place-items: center; font-family: Didot, Georgia, serif; font-size: 19px;
color: var(--text);
}
.avatar.lg { width: 84px; height: 84px; font-size: 30px; }
/* .sm nasceu com a sacola agrupada por vendedora, em 26/08/2026: ali o
avatar identifica o bloco sem competir com a foto da peca. */
.avatar.sm { width: 34px; height: 34px; font-size: 14px; }
.verified { color: var(--accent-text); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.stars { color: var(--gold); letter-spacing: .12em; font-size: 13px; }
.protect { border: 1px solid var(--gold-dim); padding: 18px 20px; margin: 22px 0; display: flex; gap: 14px; }
.protect svg { width: 22px; height: 22px; stroke: var(--gold); fill: none; stroke-width: 1.3; flex: 0 0 auto; }
.protect h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 6px; }
.protect p { font-size: 13px; color: var(--text-2); }
.freight { border: 1px solid var(--line); padding: 18px 20px; margin-bottom: 24px; }
.freight-row { display: flex; gap: 10px; margin-top: 12px; }
.input {
height: 46px; background: var(--surface); border: 1px solid var(--line);
color: var(--text); padding: 0 14px; font-size: 16px; border-radius: 2px; width: 100%;
font-family: inherit;
}
/* ESTA LINHA APAGAVA O ANEL DE FOCO, E LEVOU MESES SEM NINGUEM VER.
Ela e `.input:focus`, e vinte e tantas linhas ACIMA existe
`.input:focus-visible { outline: 2px solid ... }`. As duas tem a mesma
especificidade, e no CSS, empatou, **ganha a de baixo**. Entao o conserto
que punha o anel era desfeito por esta, mais adiante no mesmo arquivo.
Medido em 20/08/2026 apertando Tab de verdade: o navegador LIGAVA o
:focus-visible e o contorno calculado saia `3px none`. Quem navega por
teclado nao via onde estava, em campo nenhum do site.
E nenhum teste de texto pegaria: a regra certa ESTA escrita no arquivo. So
calcular o estilo na tela pega.
O `:not(:focus-visible)` resolve dizendo o que a linha sempre quis dizer:
tira o anel de quem clicou com o dedo ou com o mouse, e deixa para quem
chegou pelo teclado. */
.input:focus:not(:focus-visible) { outline: none; border-color: var(--gold); }
textarea.input { height: auto; padding: 13px 14px; min-height: 96px; line-height: 1.5; resize: vertical; }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; }
.label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 8px; }
.field { margin-bottom: 20px; }
.hint { font-size: 12px; color: var(--text-3); margin-top: 7px; line-height: 1.45; }
.hint.alert { color: var(--bordo-txt); }
/* ---------- listas e tabelas ---------- */
.row {
display: flex; align-items: center; gap: 16px;
padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.row-thumb { width: 78px; aspect-ratio: 4/5; border-radius: 2px; overflow: hidden; position: relative; flex: 0 0 auto; }
.row-main { flex: 1; min-width: 0; }
.row-right { text-align: right; white-space: nowrap; }
.totals { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; }
.tot { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--text-2); }
.tot.big { font-size: 19px; color: var(--text); border-top: 1px solid var(--line); margin-top: 12px; padding-top: 18px; }
.tot .gold { color: var(--accent-text); }
.tab { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 30px; overflow-x: auto; scrollbar-width: none; }
/* NO CELULAR A FAIXA QUEBRA LINHA EM VEZ DE ROLAR.
Medido em 21/08/2026 num aparelho de 375px: a faixa da conta tinha 496px de
conteudo num espaco de 339, entao o ultimo atalho ficava fora da tela e NADA
avisava que dava para arrastar. Item que a pessoa nao ve e nao sabe procurar
e' item que nao existe.
Rolagem lateral escondida so funciona quando alguem descobre que ela existe.
Quatro atalhos curtos cabem em duas linhas sem esforco. */
@media (max-width: 560px) {
.tab { flex-wrap: wrap; overflow-x: visible; gap: 20px 24px; }
}
.tab::-webkit-scrollbar { display: none; }
/* `a` JUNTO DE `button` porque a fileira da conta virou link de verdade em
21/08/2026: eram cinco botoes sem onclick nenhum, e dois deles nasciam fora da
tela num celular de 375px. */
.tab button, .tab a {
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
padding: 0 0 14px; border-bottom: 2px solid transparent; white-space: nowrap;
/* ALVO DE TOQUE: 44px e' o minimo, e sem esta altura a faixa ficava com 26px.
Num item que rola de lado isso e' pior ainda, porque o dedo precisa acertar
enquanto a faixa desliza. */
min-height: 44px; display: inline-flex; align-items: flex-end;
text-decoration: none;
}
.tab a:hover { color: var(--accent-text); }
.tab button.on, .tab a.on { color: var(--accent-text); border-bottom-color: var(--gold); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); }
.stat { background: var(--bg); padding: 24px; }
.stat-k { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.stat-v { font-size: 30px; margin-top: 8px; }
.stat-v.gold { color: var(--accent-text); }
.stat-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* No celular a tabela nao cabe. Ela rola dentro da propria caixa em vez de
empurrar a pagina inteira de lado. */
.rola-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
th {
text-align: left; font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3); font-weight: 500; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
td { padding: 15px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:hover td { background: var(--surface); }
.pill {
display: inline-block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-2);
}
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pill.wait { color: var(--gold); border-color: var(--gold-dim); }
.pill.bad { color: var(--bordo-txt); border-color: color-mix(in srgb, var(--bordo) 45%, transparent); }
/* ---------- steps ---------- */
.steps { display: flex; gap: 0; margin-bottom: 42px; }
.step { flex: 1; text-align: center; position: relative; padding-top: 26px; }
.step::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--line);
}
.step.on::before, .step.done::before { background: var(--gold); }
.step span { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.step.on span { color: var(--accent-text); }
.step.done span { color: var(--text-2); }
/* ---------- timeline do pedido ---------- */
.time { position: relative; padding-left: 34px; }
.time::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 30px; width: 1px; background: var(--line); }
.time-item { position: relative; padding-bottom: 30px; }
.time-item::before {
content: ""; position: absolute; left: -34px; top: 5px; width: 15px; height: 15px;
border-radius: 50%; border: 1px solid var(--line); background: var(--bg);
}
.time-item.done::before { background: var(--gold); border-color: var(--gold); }
.time-item.now::before { border-color: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.time-t { font-size: 15px; }
.time-d { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-soft); background: var(--bg-deep); padding-top: 64px; padding-bottom: 40px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer h2 { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 16px; }
.footer li { list-style: none; margin-bottom: 10px; font-size: 13.5px; color: var(--text-2); }
.footer li:hover { color: var(--accent-text); }
.footer-bot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--text-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* ---------- bottom nav (mobile) ---------- */
.bnav { display: none; }
/* ---------- aviso de protótipo ---------- */
/* selo de origem do dado, na barra de desenvolvimento */
/* ---------- cabeçalho dos aplicativos internos (painel e admin) ---------- */
.header-app .logo { font-size: 20px; }
.app-badge {
font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; margin-left: 10px;
white-space: nowrap;
}
.header-admin .app-badge { color: var(--bordo-txt); border-color: var(--bordo); }
.who { font-size: 12.5px; color: var(--text-2); margin-right: 4px; white-space: nowrap; }
.footer-slim {
border-top: 1px solid var(--line-soft); margin-top: 48px; padding: 22px 0 34px;
font-size: 12px; color: var(--text-3);
}
/* ---------- responsivo ---------- */
@media (max-width: 1080px) {
.grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auction { grid-template-columns: minmax(0, 1fr); }
/* minmax(0, 1fr) e nao 1fr. "1fr" sozinho e' minmax(AUTO, 1fr), e "auto"
deixa a coluna crescer ate o min-content do filho. A caixa da vendedora
tem min-content de 344px, entao em 360px a coluna virava 344 dentro de um
espaco de 324 e a PAGINA rolava de lado. Medido em 20/08/2026. O resto do
arquivo ja usava minmax(0, 1fr); so aqui tinha ficado 1fr. */
.pdp { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 860px) {
.nav { display: none; }
.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* O NUMERO DE DINHEIRO NUNCA PARTE, NEM ENTRE O R$ E O VALOR, NEM NO MEIO
DOS DIGITOS.
Foram tres estados errados seguidos, todos medidos em 20/08/2026 no painel
da vendedora em 360px, e vale registrar os tres porque cada conserto
revelou o proximo:
1. Com 30px e espaco normal, "R$ 1.640,00" vazava 18px da celula.
2. Trocando por espaco que nao quebra, ele passou a cair inteiro para a
linha de baixo, deixando "R$" sozinho em cima.
3. Com overflow-wrap: anywhere herdado do .serif, ele partiu no meio do
numero: "1.640,0" em cima e "0" embaixo. Pior que os dois anteriores.
A saida foi dar espaco em vez de espremer: menos padding na celula e corpo
que acompanha a largura da tela. Medido: a celula tem 113px uteis em 360px
e "R$ 40.500,00", que e' o maior valor da tela, pede 111px em corpo 19. */
.stat { padding-left: 16px; padding-right: 16px; }
.stat-v { font-size: clamp(17px, 5.6vw, 30px); overflow-wrap: normal; }
}
@media (max-width: 700px) {
/* Alvo de toque de 44px, regra da Apple. Os tres botoes do seletor de
prototipo mediam 40px de altura. E' barra de desenvolvimento, nao produto,
mas quem toca nela e' gente num celular, e 4px so custam aqui dentro do
recorte de mobile: no desktop a barra continua igual. */
body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
.wrap { padding: 0 18px; }
.section { padding-top: 48px; padding-bottom: 48px; }
.section-title { font-size: 24px; }
.hero { min-height: 0; }
.hero-in { padding: 72px 18px 64px; }
.hero h1 { font-size: 34px; }
.grid { gap: 26px 14px; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* .grid-2 nunca colapsava, e diferente do grid de cards ele carrega BLOCO,
nao miniatura: caixa, linha do tempo, simulador. Em 320px cada coluna
ficava com 130px, e depois de descontar o padding da caixa e o recuo da
linha do tempo sobravam 50px para um texto de 105px. O texto vazava, a
pagina rolava de lado, e a tela era o PAINEL DA VENDEDORA, que e' a que
ela mais usa. Medido em 20/08/2026.
O grid-3 e o grid-4 continuam em duas colunas de proposito: ali sao cards
de produto, e duas colunas e' o certo no celular. */
.grid-2 { grid-template-columns: minmax(0, 1fr); }
/* PALAVRA LONGA QUEBRA EM VEZ DE VAZAR.
"Oportunidades" em serif de 21px mede 144px e a celula tinha 105px. Como
`overflow-wrap` e' `normal` por padrao, a palavra nao quebra: ela sai por
cima do vizinho. So no celular, porque no desktop sobra espaco e quebrar
palavra no meio fica feio a toa.
Vale para titulo em geral, e nao so para este caso, porque nome de peca e
nome de vendedora sao escritos por gente, e gente escreve palavra longa. */
h1, h2, h3, .card-title, .serif { overflow-wrap: anywhere; }
/* Rotulo em maiuscula com espacamento largo e' bonito e caro em pixel. Em
360px, "Compradora" com .22em media 105px numa celula de 105px, e o
espacamento que sobra depois da ultima letra empurrava 6px para fora. E'
rotulo de 11px: apertar o espacamento aqui ninguem percebe, e vazar
percebe. */
.overline { letter-spacing: .14em; }
.brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auction-in { padding: 32px 22px; }
.auction h3 { font-size: 26px; }
.pdp h1 { font-size: 26px; }
.spec { grid-template-columns: minmax(0, 1fr); }
.footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.steps { gap: 0; }
.step span { font-size: 9px; letter-spacing: .06em; }
.header-in { height: 58px; gap: 12px; }
.logo { font-size: 21px; flex: none; }
/* A barra de baixo (.bnav) ja tem Buscar, Mensagens e Perfil. Repetir no topo
estourava a linha em 35px e a pagina inteira rolava de lado. */
.section-head { flex-wrap: wrap; gap: 14px; }
.rola-x table { min-width: 540px; }
.header-actions { margin-left: auto; min-width: 0; }
.header-actions .so-desktop { display: none; }
.header-app .who { display: none; }
/* O `min-width: 0` acima deixa a CAIXA encolher, e isso resolveu um estouro
antigo. So que o BOTAO dentro dela nao encolhia junto: em 320px a caixa
ficava com 65px e o botao "Ver a loja" com 118px, entao ele vazava 53px e
o painel da VENDEDORA rolava de lado. E' a tela que ela mais usa.
Medido em 20/08/2026 em 320px, largura de iPhone SE e de celular de
entrada, que continua sendo o aparelho de quem compra maquiagem usada.
Aqui o botao aperta o proprio padrao em vez de empurrar a pagina, e o selo
do aplicativo devolve os pixels que ele estava segurando. */
.header-app .btn-sm, .header-admin .btn-sm { padding: 0 12px; }
.app-badge { margin-left: 6px; padding: 4px 7px; letter-spacing: .10em; }
/* Apertar o botao sozinho reduziu o estouro de 35px para 14px e nao zerou:
a caixa encolhe, o botao nao. Em vez de espremer mais o botao ate a
legenda virar reticencia, sai a informacao que esta REPETIDA na tela.
O selo diz "Vendedoras" logo abaixo da barra que ja mostra LOJA /
VENDEDORA / ADMIN com a ativa destacada, e o conteudo da pagina nao deixa
duvida nenhuma sobre onde a pessoa esta. Dado repetido na mesma tela e'
regra do projeto, e aqui ele estava custando o unico botao do cabecalho. */
.app-badge { display: none; }
.bnav {
display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(16px);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom);
}
.bnav a {
min-height: 60px; display: grid; place-items: center; gap: 4px; padding: 9px 0;
color: var(--text-3); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
}
.bnav a.on { color: var(--accent-text); }
.bnav svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.bnav .sell {
color: var(--bg);
}
.bnav .sell i {
display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
background: var(--gold); color: #14100B; margin-top: -12px;
}
.bnav .sell i svg { stroke: #14100B; width: 19px; height: 19px; }
.bnav .sell span { color: var(--accent-text); }
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
}
/* ---------- tiles de produto (placeholder editorial) ---------- */
.tile { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.tile-img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
.tile svg.art { width: 46%; height: 46%; stroke: var(--art); fill: none; stroke-width: 1.15; opacity: .62; }
.tile.sm svg.art { width: 58%; height: 58%; stroke-width: 1.6; }
/* veu de luz por cima da foto, de leve, para o card nao virar catalogo de e-commerce */
.tile::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: radial-gradient(58% 42% at 34% 20%, rgba(255,255,255,.14), transparent 64%);
pointer-events: none;
}
.card:hover .tile-img { transform: scale(1.04); }
/* rotulo de cada slot de foto na pagina do produto */
.slot-rotulo {
font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-3); text-align: center; margin-top: 6px;
/* Sao CINCO rotulos lado a lado. O mais comprido era "EMBALAGEM", que em
360px passava 18px da propria celula e encostava em "DETALHE". A primeira
tentativa foi encolher a letra ate 7,5px, e ai o conserto quebrava a regra
de tipografia do proprio projeto, que nao aceita rotulo abaixo de 10px.
A palavra virou "Caixa" no data.js, e aqui sobrou so um aperto pequeno no
espacamento mais a quebra de seguranca. Medido em 20/08/2026. */
letter-spacing: clamp(.06em, .5vw, .12em);
overflow-wrap: anywhere;
}
.pdp-thumb { cursor: pointer; }
.pdp-thumb.on .slot-rotulo, .pdp-thumb:hover { border-color: var(--gold); }
/* exemplo de foto no fluxo de anuncio */
.slot-exemplo { position: relative; overflow: hidden; }
.tag-exemplo {
position: absolute; left: 8px; top: 8px; z-index: 2;
font-size: 9px; letter-spacing: .10em; text-transform: uppercase;
background: rgba(0,0,0,.62); color: #fff; padding: 4px 8px; border-radius: 2px;
}
.btn-foto {
margin-top: 10px; width: 100%; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.btn-foto svg { width: 14px; height: 14px; }
.t1 { background: linear-gradient(155deg, var(--photo-1) 0%, var(--photo-base) 100%); }
.t2 { background: linear-gradient(155deg, var(--photo-2) 0%, var(--photo-base) 100%); }
.t3 { background: linear-gradient(155deg, var(--photo-3) 0%, var(--photo-base) 100%); }
.t4 { background: linear-gradient(155deg, var(--photo-4) 0%, var(--photo-base) 100%); }
.t5 { background: linear-gradient(200deg, var(--photo-2) 0%, var(--photo-4) 100%); }
.t6 { background: linear-gradient(200deg, var(--photo-1) 0%, var(--photo-3) 100%); }
/* icones soltos dentro de placeholders (upload de foto, campos vazios) */
.pdp-thumb svg:not(.art) {
width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.4;
}
/* SELO DE CONDICAO INTEIRO, sem reticencia.
Ele ficava cortado em "POUCO US..." e "NOVO ABE..." no card de 360px. E' a
pior coisa para cortar: os quatro niveis (Lacrado, Novo aberto, Pouco usado,
Usado) sao a promessa central do anuncio, e a propria tela de vender diz
"quatro niveis objetivos, sem bom e sem razoavel". Reticencia devolve a
compradora ao adjetivo vago que a KIRA prometeu nao usar.
A saida foi apertar a letra em vez de cortar a palavra: no mobile o selo tem
corpo e espacamento menores, e a maior das quatro cabe inteira.
Medido em 20/08/2026 num card de 155px. */
.card-badge {
max-width: calc(100% - 52px);
/* 8,5px cabia e era pequeno demais: a regra de tipografia do projeto nao
aceita rotulo abaixo de 10px, e este e' o rotulo que a compradora mais
procura. O corpo voltou para 9,5px e quem cedeu foi o ESPACAMENTO entre
letras, que e' enfeite. Medido em 20/08/2026 num card de 155px: assim as
quatro condicoes cabem inteiras, sem reticencia. */
font-size: 9.5px; letter-spacing: .04em; padding: 5px 7px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* NO CELULAR, QUEM ENCURTA E' O NOME DA VENDEDORA, NAO O SELO.
Aqui era `display:block` com `text-overflow:ellipsis` na linha inteira. Como
o selo "verificada" fica no fim, ele era SEMPRE a primeira coisa a sumir:
medido em 20/08/2026, cortado entre 15 e 23px em todo card em 360px. Ou
seja, a tela apagava justamente o sinal de confianca que a KIRA vende, e so
no celular, que e' onde quase todo mundo compra.
Continua flex, com o selo travado em flex:0 0 auto e o nome como unica peca
que encolhe. */
.card-meta {
display: flex; align-items: center; line-height: 1.5;
white-space: nowrap; overflow: hidden; gap: 0;
}
.card-meta .card-cond { flex: 0 0 auto; }
.card-meta .card-vend { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-meta .verified { flex: 0 0 auto; margin-left: 6px; }
.card-meta .dot { display: inline-block; vertical-align: middle; margin: 0 6px; flex: 0 0 auto; }
/* SEGUNDA METADE DO MESMO CONSERTO, 20/08/2026.
Travar o selo resolveu o selo e passou o corte para o NOME: medido em 360px,
"Atelier Bellune" recebia 53px de 78px e a pessoa lia "Atelier ...".
Cortar o nome de quem vende, numa loja cujo argumento e' que existe uma
pessoa de verdade do outro lado, apaga justamente o que a KIRA vende.
Em 155px nao cabe "Pouco usado . Atelier Bellune ✓" numa linha so, entao o
que cede e' a LINHA. O ponto vira um espacador invisivel de largura cheia:
ele empurra nome e selo para a segunda linha SEMPRE, entao todo card fica
com a mesma altura e nenhum fica com sobra pendurada. Sem mexer no HTML. */
@media (max-width: 560px) {
.card-meta { flex-wrap: wrap; }
.card-meta .dot {
flex: 1 1 100%; width: auto; height: 0; margin: 0;
background: none; border-radius: 0;
}
.card-meta .card-vend { max-width: 100%; }
.card-meta .verified { margin-left: 5px; }
}
.btn-dark { background: #3B2A20; color: #FAF7F2; border: 1px solid #3B2A20; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes fade { 0% { opacity: 0; } 6% { opacity: 1; } 33% { opacity: 1; } 39% { opacity: 0; } 100% { opacity: 0; } }
/* respeitar quem pediu menos movimento no sistema */
@media (prefers-reduced-motion: reduce) {
}
@media (max-width: 860px) {
}
/* ---------- faixa creme dentro do tema Noir ---------- */
/* Redefine os tokens no escopo da seção, então todo filho se adapta sozinho. */
.band { position: relative; }
.band-creme {
--bg: var(--band-creme, #FAF7F2);
--bg-deep: #F2ECE2;
--surface: #FFFFFF;
--surface-2: #F2ECE2;
--line: #E0D5C4;
--line-soft: #EDE4D7;
--text: var(--band-txt, #191410);
--text-2: #5A4A3C;
--text-3: #837465; /* 4,52:1 no branco. #9A8977 dava 3,38 */
--gold: #896E3A; /* 4,51:1 no branco. #B08D4A dava 2,91 */
--accent-text: var(--band-txt, #191410); /* na faixa clara o texto nunca é dourado */
--shadow: 0 18px 44px rgba(59,42,32,.10);
background: var(--band-creme, #FAF7F2);
color: var(--text);
}
.band-creme .overline-gold { color: #8A6D33; }
/* ---------- revelação ao entrar na tela ---------- */
/* Regra de ouro: conteúdo NUNCA nasce escondido no CSS. Se o JS falhar, tudo aparece.
O JS marca .pre-reveal só no que está abaixo da dobra, e tira ao entrar na tela. */
.pre-reveal {
opacity: 0; transform: translateY(14px);
transition: opacity .5s cubic-bezier(.2,.6,.2,1), transform .5s cubic-bezier(.2,.6,.2,1);
}
.pre-reveal.visivel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.pre-reveal { opacity: 1; transform: none; transition: none; }
}
/* ---------- laboratório de paleta ---------- */
.pal { padding: 34px 32px 28px; border-radius: 2px; margin-bottom: 20px; }
.pal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.pal-head b { font-size: 20px; font-weight: 400; }
.pal-num { font-size: 11px; letter-spacing: .16em; opacity: .5; margin-right: 12px; }
.pal-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: .06em; opacity: .72; }
.pal-chip i { width: 13px; height: 13px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.16); display: inline-block; }
.pal-demo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; }
.pal-txt { max-width: 42ch; }
.pal-over { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; }
.pal-txt h2 { font-size: 34px; line-height: 1.06; letter-spacing: -.5px; font-weight: 400; margin: 0 0 12px; }
.pal-txt p { font-size: 14px; margin: 0; }
.pal-btn {
display: inline-block; margin-top: 22px; padding: 13px 26px; border-radius: 2px;
font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.pal-card { border: 1px solid; border-radius: 2px; padding: 14px; }
.pal-card-img { aspect-ratio: 3/4; border-radius: 2px; margin-bottom: 12px; opacity: .82; }
.pal-card-marca { font-size: 9.5px; letter-spacing: .16em; }
.pal-notas { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(128,128,128,.28); font-size: 11px; opacity: .82; }
.ct { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; margin-left: 5px; }
.ct.ok { background: rgba(60,140,70,.18); color: #2E7D32; }
.ct.meio { background: rgba(200,150,40,.20); color: #8A6D1F; }
.ct.ruim { background: rgba(190,50,50,.18); color: #B3261E; }
@media (max-width: 860px) {
.pal { padding: 24px 18px; }
.pal-demo { grid-template-columns: minmax(0, 1fr); }
.pal-txt h2 { font-size: 27px; }
.pal-card { max-width: 260px; }
}
/* ---------- testador de base escura (só no protótipo) ---------- */
.base-lab { position: fixed; right: 16px; bottom: 16px; z-index: 60; font-size: 12px; }
.base-toggle {
background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line);
border-radius: 999px; padding: 9px 16px; cursor: pointer; min-height: 40px;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.base-toggle:hover { color: var(--accent-text); }
.base-corpo {
display: none; margin-top: 10px; width: 268px; padding: 16px;
background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.base-lab.aberto .base-corpo { display: block; }
.base-titulo { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.base-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.base-sw {
height: 44px; border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
display: flex; align-items: flex-end; padding: 6px 8px; position: relative;
}
.base-sw span { font-size: 9.5px; letter-spacing: .08em; color: #C9A961; opacity: .9; }
.base-sw.on { outline: 1px solid var(--gold); outline-offset: 2px; }
.base-atual { margin-top: 12px; font-size: 11px; color: var(--accent-text); }
.base-hint { margin-top: 6px; font-size: 10.5px; color: var(--text-3); line-height: 1.5; }
@media (max-width: 860px) {
.base-lab { right: 12px; bottom: 84px; }
.base-corpo { width: calc(100vw - 40px); max-width: 300px; }
}
/* ---------- explorador de tons ---------- */
.ton-abas { display: flex; gap: 4px; margin-bottom: 12px; }
.ton-aba {
flex: 1; padding: 8px 6px; min-height: 36px; cursor: pointer;
background: transparent; border: 1px solid var(--line); border-radius: 3px;
color: var(--text-3); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.ton-aba.on { background: var(--surface-2); color: var(--accent-text); border-color: var(--gold); }
.ton-grade { grid-template-columns: repeat(6, 1fr); gap: 5px; }
.ton-sw {
aspect-ratio: 1; border: 1px solid rgba(128,128,128,.35); border-radius: 3px;
cursor: pointer; padding: 0; min-width: 0;
}
.ton-sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
.ton-resumo { margin-top: 14px; display: grid; gap: 5px; font-size: 10.5px; color: var(--text-2); }
.ton-resumo div { display: flex; align-items: center; gap: 7px; }
.ton-resumo i { width: 12px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(128,128,128,.4); flex: none; }
.ton-ct { color: var(--text-3); }
.ton-ct b { font-weight: 500; margin-left: 4px; }
.ton-ct b.ok { color: #7FA07A; }
.ton-ct b.meio { color: #C8963C; }
.ton-ct b.ruim { color: #B4515A; }
/* ---------- editor de cores ---------- */
.ed-checagens {
position: sticky; top: 72px; z-index: 20;
background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
padding: 12px 16px; margin-bottom: 26px;
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.ed-chk-tit { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); }
#checagens { display: flex; gap: 16px; flex-wrap: wrap; }
.chk { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-2); }
.ct { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 10px; }
.ct.ok { background: rgba(127,160,122,.16); color: #7FA07A; }
.ct.meio { background: rgba(200,150,60,.18); color: #C8963C; }
.ct.ruim { background: rgba(180,81,90,.18); color: #B4515A; }
.ed-papel { border-top: 1px solid var(--line-soft); padding: 26px 0; }
.ed-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.ed-cab b { font-weight: 500; font-size: 17px; }
.ed-num { font-size: 11px; letter-spacing: .16em; color: var(--text-3); margin-right: 12px; }
.ed-hex { font-size: 12px; color: var(--accent-text); letter-spacing: .08em; }
.ed-dupla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.ed-cores { display: grid; gap: 12px; align-content: start; }
.ed-grupo { display: flex; align-items: flex-start; gap: 12px; }
.ed-grupo-nome { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); width: 66px; flex: none; padding-top: 10px; }
.ed-swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.ed-sw { width: 32px; height: 32px; border-radius: 3px; cursor: pointer; padding: 0; border: 1px solid rgba(128,128,128,.35); }
.ed-sw.on { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ---------- mini página, agora em tamanho de leitura ---------- */
.ed-amostra { margin: 0; }
.mp { border: 1px solid var(--line); border-radius: 3px; overflow: hidden; line-height: 1.45; }
.mp-topo { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; }
.mp-logo { font-size: 19px; letter-spacing: .22em; }
.mp-nav { font-size: 10px; letter-spacing: .1em; }
.mp-hero { padding: 30px 20px 26px; }
.mp-over { font-size: 9px; letter-spacing: .22em; margin-bottom: 11px; display: inline-block; }
.mp-h1 { font-size: 32px; line-height: 1.05; letter-spacing: -.5px; margin-bottom: 10px; }
.mp-h2 { font-size: 23px; letter-spacing: -.4px; margin-bottom: 6px; }
.mp-p { font-size: 12.5px; max-width: 36ch; margin-bottom: 17px; }
.mp-btns { display: flex; gap: 10px; }
.mp-btn { padding: 10px 16px; border-radius: 2px; display: inline-block; }
.mp-btn b { font-size: 9.5px; letter-spacing: .16em; font-weight: 500; }
.mp-btn.ghost { background: transparent; border: 1px solid; font-size: 9.5px; letter-spacing: .16em; }
.mp-linha { display: flex; align-items: flex-start; gap: 14px; padding: 0 20px 26px; }
.mp-card { width: 112px; border-radius: 2px; padding: 9px; }
.mp-img { aspect-ratio: 3/4; border-radius: 2px; margin-bottom: 8px; opacity: .85; }
.mp-marca { font-size: 9px; letter-spacing: .10em; }
.mp-nome { font-size: 14px; margin-top: 3px; }
.mp-fio { display: block; width: 56px; height: 1px; align-self: center; }
.mp-band { padding: 26px 20px; }
.mp-alvo {
outline: 2px dashed var(--gold); outline-offset: 3px; border-radius: 2px;
animation: pulsoAlvo 2s ease-in-out infinite;
}
@keyframes pulsoAlvo {
0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 10%, transparent); }
50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .mp-alvo { animation: none; } }
@media (max-width: 980px) {
.ed-dupla { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.ed-checagens { position: static; }
.mp-h1 { font-size: 26px; }
.ed-grupo-nome { width: 58px; }
}
/* ---------- filtros ---------- */
.lista-layout { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 34px; }
/* Loja vazia nao tem o que filtrar, entao painelFiltros() devolve string vazia e
o aside nem existe. Sem esta regra a coluna de 244px continuava reservada e o
conteudo comecava 284px para dentro, com um buraco do lado. E o botao Filtrar
do celular abriria uma gaveta vazia. */
.lista-layout:not(:has(> .filtros)) { grid-template-columns: minmax(0, 1fr); gap: 0; }
.lista-layout:not(:has(> .filtros)) .f-abrir { display: none; }
.filtros { position: sticky; top: 88px; }
.f-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.f-cab-tit { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); flex: 1; }
.f-cab-tit b { color: var(--accent-text); }
.f-limpar { background: none; border: 0; color: var(--text-3); font-size: 11px; cursor: pointer; text-decoration: underline; padding: 6px; }
.f-limpar:hover { color: var(--accent-text); }
.f-fechar { display: none; background: none; border: 0; color: var(--text-2); font-size: 15px; cursor: pointer; min-width: 44px; min-height: 44px; }
.f-grupo { border-top: 1px solid var(--line-soft); padding: 14px 0 8px; }
.f-tit { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.f-op {
display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
background: none; border: 0; cursor: pointer; padding: 6px 0; text-align: left;
color: var(--text-2); font-size: 13px;
}
.f-op:hover:not(:disabled) { color: var(--accent-text); }
.f-op:disabled { opacity: .38; cursor: default; }
.f-op.on { color: var(--accent-text); }
.f-box {
width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 2px; flex: none;
display: grid; place-items: center;
}
.f-op.on .f-box { border-color: var(--gold); background: var(--gold); }
.f-box svg { width: 12px; height: 12px; fill: none; stroke: var(--bg); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.f-rot { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.f-n { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.f-rodape { display: none; }
.f-abrir { display: none; }
.chip-ativo { border-color: var(--gold); color: var(--accent-text); }
.chip-ativo i { font-style: normal; margin-left: 6px; opacity: .7; }
@media (max-width: 980px) {
.lista-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
.f-abrir { display: inline-flex; }
/* no celular vira gaveta de baixo, nunca tela cheia */
.filtros {
position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 70;
max-height: 76vh; display: flex; flex-direction: column;
background: var(--surface); border-top: 1px solid var(--line);
border-radius: 16px 16px 0 0; padding: 16px 18px 0;
transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.6,.2,1);
box-shadow: 0 -20px 60px rgba(0,0,0,.5);
}
.filtros.aberto { transform: none; }
.f-corpo { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.f-fechar { display: block; }
.f-rodape { display: block; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); }
}
@media (prefers-reduced-motion: reduce) { .filtros { transition: none; } }
/* ---------- verificador de SKU na Anvisa ---------- */
.sku { border: 1px solid var(--line); border-left-width: 3px; border-radius: 3px; padding: 14px 16px; }
.sku-tit { font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.sku p { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.55; }
.sku-nota { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12px !important; }
.sku-neutro { border-left-color: var(--line); }
.sku-neutro .sku-tit { color: var(--text-3); }
.sku-ok { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.sku-ok .sku-tit { color: var(--ok); }
.sku-bloq { border-left-color: var(--bordo); background: color-mix(in srgb, var(--bordo) 8%, transparent); }
.sku-bloq .sku-tit { color: var(--bordo-txt); }
.sku-atencao { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.sku-atencao .sku-tit { color: var(--accent-text); }
/* ---------- notificações ---------- */
.notif-lista { display: grid; }
.notif {
display: grid; grid-template-columns: 108px 1fr auto; gap: 16px; align-items: baseline;
padding: 18px 0; border-top: 1px solid var(--line-soft); min-height: 44px;
}
.notif:last-child { border-bottom: 1px solid var(--line-soft); }
.notif-tipo { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.notif.nova .notif-tipo { color: var(--accent-text); }
.notif-tit { font-size: 14.5px; color: var(--text-2); }
.notif.nova .notif-tit { color: var(--text); font-weight: 500; }
.notif-txt { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.notif-quando { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.notif:hover .notif-tit { color: var(--accent-text); }
@media (max-width: 720px) {
.notif { grid-template-columns: minmax(0, 1fr) auto; }
.notif-tipo { grid-column: 1 / -1; }
}
/* ---------- buscas recentes, embaixo do campo ---------- */
.busca-wrap { position: relative; }
.recentes {
display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
background: var(--surface); border: 1px solid var(--line); border-radius: 4px;
box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden;
}
.recentes.aberto { display: block; }
.rec-cab {
display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
padding: 12px 16px 8px; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3);
}
.rec-cab b { color: var(--accent-text); font-weight: 500; }
.rec {
display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
padding: 10px 16px; background: none; border: 0; cursor: pointer; text-align: left;
border-top: 1px solid var(--line-soft);
}
.rec:hover { background: var(--surface-2); }
.rec-icone { display: grid; place-items: center; width: 16px; flex: none; opacity: .5; }
.rec-icone svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.rec-main { flex: 1; min-width: 0; display: block; }
.rec-termo { display: block; font-size: 14px; color: var(--text); }
.rec-filtros { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.rec-badge {
font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
background: var(--btn-bg, var(--gold)); color: var(--btn-txt, #14100B);
border-radius: 999px; padding: 5px 10px;
}
.rec-visto { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.rec.tem .rec-termo { color: var(--accent-text); }
.rec-rodape {
padding: 10px 16px 12px; font-size: 11px; color: var(--text-3);
border-top: 1px solid var(--line-soft); background: var(--bg);
}
/* ---------- categorias em breve ---------- */
.breve {
border: 1px dashed var(--line); border-radius: 3px; padding: 22px 20px;
background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.breve-tag {
display: inline-block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent-text); border: 1px solid var(--line); border-radius: 999px;
padding: 4px 10px; margin-bottom: 14px;
}
.breve h3 { font-size: 21px; letter-spacing: -.3px; margin-bottom: 6px; color: var(--text-2); }
.breve p { font-size: 12.5px; color: var(--text-3); margin: 0; }
/* ---------- navegação editorial das coleções ---------- */
/* Pílula arredondada em fila é a cara de marketplace comum, e a regra 6 do projeto
proíbe. Vira faixa de rótulos, no dialeto varejista de luxo: caixa alta pequena,
tracking positivo forte, filete separando. */
.nav-colecoes {
display: flex; align-items: stretch; justify-content: safe center; flex-wrap: nowrap;
border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
overflow-x: auto; scrollbar-width: none;
}
.nav-colecoes::-webkit-scrollbar { display: none; }
.nav-colecoes a {
position: relative; padding: 20px 18px; min-height: 44px; display: flex; align-items: center;
font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
white-space: nowrap; flex: 0 0 auto; transition: color .15s ease;
}
.nav-colecoes a + a::before {
content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 12px; background: var(--line);
}
.nav-colecoes a:hover { color: var(--accent-text); }
.nav-colecoes a::after {
content: ''; position: absolute; left: 18px; right: 18px; bottom: 14px; height: 1px;
background: var(--gold); transform: scaleX(0); transition: transform .2s ease;
}
.nav-colecoes a:hover::after { transform: scaleX(1); }
@media (max-width: 900px) {
.nav-colecoes { justify-content: flex-start; }
.nav-colecoes a { padding: 16px 14px; letter-spacing: .12em; }
.nav-colecoes a::after { left: 14px; right: 14px; }
}
/* ---------- selo KIRA VIP, peça das fundadoras ---------- */
/* Transparência exigida: a compradora precisa saber que a vendedora é sócia da
plataforma. Marketplace que destaca vendedor da casa sem dizer é publicidade
enganosa. Ver PENDENCIAS-KIRA.md, pergunta 28 para o advogado. */
.card-vip {
position: absolute; left: 12px; bottom: 12px; z-index: 2;
/* Era 8,5px, abaixo do minimo de 10px que a regra de tipografia do projeto
define para rotulo. Subiu para 10 e o espacamento cedeu no lugar, que e' a
mesma troca feita no selo de condicao. Anterior a esta leva, achado na
varredura de 20/08/2026 que procurou a MENOR fonte da tela. */
font-size: 10px; letter-spacing: .10em; text-transform: uppercase;
background: var(--btn-bg, var(--gold)); color: var(--btn-txt, #14100B);
border-radius: 999px; padding: 5px 10px;
}
.vip-aviso {
border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 3px;
padding: 16px 18px; margin: 20px 0;
}
.vip-aviso b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.vip-aviso p { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.55; }
/* ---------- foto nos blocos que antes eram so texto ---------- */
/* "Em breve": a foto entra em tom mais baixo, porque a categoria ainda nao abriu */
.breve-img {
position: relative; aspect-ratio: 16/10; overflow: hidden;
border-radius: 2px; margin-bottom: 14px; background: var(--photo-base);
}
.breve-img .tile-img { filter: grayscale(.55) brightness(.82); }
/* card de colecao: foto em cima, texto embaixo */
.col-card { display: block; padding: 0; overflow: hidden; }
.col-card-img { position: relative; aspect-ratio: 16/10; background: var(--photo-base); }
.col-card-txt { padding: 22px 24px 26px; }
.col-card:hover .tile-img { transform: scale(1.04); }
/* miniatura do produto dentro de linha de tabela (painel da vendedora e admin) */
.cel-prod { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mini {
position: relative; width: 40px; height: 50px; flex: 0 0 auto;
border-radius: 2px; overflow: hidden; background: var(--photo-base);
}
/* ---------------------------------------------------------------------------
MENU DO TOPO COM PAINEL
O painel nasce do proprio cabecalho, atravessa a largura toda e usa o mesmo
respiro editorial do resto do site. Nada de caixinha flutuante de e-commerce.
--------------------------------------------------------------------------- */
.nav { display: flex; gap: 4px; margin-left: 14px; flex: 1; align-items: center; }
.nav-link, .nav-vender {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-2); padding: 24px 14px;
border-bottom: 1px solid transparent;
}
.nav-link:hover, .nav-link.on, .nav-item.aberto .nav-link { color: var(--text); }
.nav-item.aberto .nav-link, .nav-link.on { border-bottom-color: var(--gold); }
.nav-seta { display: inline-flex; transition: transform .2s ease; opacity: .55; }
.nav-seta svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.nav-item.aberto .nav-seta { transform: rotate(180deg); opacity: 1; }
/* o botao de vender e acao, nao navegacao: tem que parecer diferente */
/* white-space: nowrap porque "Vender · em breve" quebrava em duas linhas e o
botao ficava com 56px de altura dentro de um cabecalho de 69px, saindo da
linha de base dos outros itens do menu. Medido em 23/08/2026. */
.nav-vender {
margin-left: 10px; padding: 9px 18px; border: 1px solid var(--gold);
color: var(--accent-text); border-radius: 2px; white-space: nowrap;
}
.nav-vender:hover { background: var(--gold); color: var(--btn-txt); }
/* o painel ocupa a largura do cabecalho e usa o MESMO container do conteudo da
pagina, entao tudo dentro dele alinha com a coluna de baixo. Caixinha
flutuante centrada no item vaza para fora da tela e nao alinha com nada. */
.nav-item { position: static; }
.mega {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--bg-deep);
border-top: 1px solid var(--gold);
border-bottom: 1px solid var(--line-soft);
box-shadow: 0 24px 60px rgba(0,0,0,.45);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .18s ease;
z-index: 70;
}
.nav-item.aberto .mega { opacity: 1; visibility: visible; pointer-events: auto; }
.mega-in { padding-top: 34px; padding-bottom: 38px; }
.mega-cols { display: grid; gap: 30px 40px; }
.mega-cols.mega-1 { grid-template-columns: minmax(260px, 320px); }
.mega-cols.mega-7 { grid-template-columns: repeat(7, minmax(118px, 1fr)); }
.mega-titulo {
display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent-text); margin-bottom: 14px;
}
a.mega-titulo:hover { color: var(--text); }
.mega-lista { display: flex; flex-direction: column; gap: 2px; }
.mega-lista a, .mega-marcas a {
display: flex; align-items: center; justify-content: space-between; gap: 14px;
font-size: 13.5px; color: var(--text-2); padding: 7px 0; min-height: 34px;
}
.mega-lista a:hover, .mega-marcas a:hover { color: var(--accent-text); }
.mega-lista em, .mega-marcas em {
font-style: normal; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.mega-off { font-size: 13.5px; color: var(--text-3); padding: 7px 0; }
.mega-breve { border-left: 1px solid var(--line-soft); padding-left: 26px; }
.mega-nota { font-size: 11.5px; color: var(--text-3); margin-top: 16px; line-height: 1.6; max-width: 26ch; }
.mega-nota a { color: var(--accent-text); }
.mega-marcas {
display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr));
gap: 0 28px;
}
.mega-grade { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 22px; }
.mega-card-img {
position: relative; aspect-ratio: 16/10; overflow: hidden;
border-radius: 2px; background: var(--photo-base); margin-bottom: 10px;
}
.mega-card-nome { font-size: 15px; color: var(--text); }
.mega-card-n { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-top: 3px; }
.mega-card:hover .mega-card-nome { color: var(--accent-text); }
.mega-card:hover .tile-img { transform: scale(1.05); }
/* em tela estreita o menu do topo some e vale a barra de baixo */
/* 1260px e nao 900px. Medido em 23/08/2026: o cabecalho desktop precisa de
1192px de conteudo (logo 106 + gap 28 + margem 14 + menu 792 + gap 28 +
acoes 224), e o .wrap tem max-width 1240 com 48 de padding, ou seja 1192
exatos. Folga zero. Como o .nav e' flex:1 SEM min-width:0, ele nao encolhe
abaixo do proprio conteudo e empurra o .header-actions para fora da tela:
entre 901px e ~1255px havia scroll horizontal em TODAS as rotas, pegando
notebook de 1024 e de 1152. Abaixo de 1260 o menu vai para a gaveta, que ja
lista os mesmos itens. Se um item novo entrar no menu, este numero sobe. */
@media (max-width: 1260px) {
.nav { display: none; }
}
/* ---------- foto de categoria clicavel ---------- */
.cat-capa {
display: block; position: relative; aspect-ratio: 16/10;
overflow: hidden; border-radius: 2px; margin-bottom: 14px;
background: var(--photo-base);
}
.cat-capa-ver {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
padding: 26px 16px 14px; text-align: center;
font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #fff;
background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
opacity: 0; transition: opacity .2s ease;
}
.cat-capa:hover .cat-capa-ver { opacity: 1; }
.cat-capa:hover .tile-img { transform: scale(1.04); }
/* ---------- pagina de marcas ---------- */
.alfabeto { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 40px; }
.alfabeto a {
min-width: 34px; min-height: 34px; display: grid; place-items: center;
font-size: 12px; letter-spacing: .08em; color: var(--text-2);
border: 1px solid var(--line-soft); border-radius: 2px;
}
.alfabeto a:hover { border-color: var(--gold); color: var(--accent-text); }
.marca-bloco { margin-bottom: 40px; scroll-margin-top: 96px; }
.marca-letra {
font-size: 26px; color: var(--accent-text);
padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); margin-bottom: 18px;
}
.marca-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 28px; }
.marca-item {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
min-height: 44px; padding: 10px 0; font-size: 15px; color: var(--text);
border-bottom: 1px solid var(--line-soft);
}
.marca-item:hover { color: var(--accent-text); }
.marca-item em {
font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-3); white-space: nowrap;
}
/* "Em breve" nao clica de proposito: a categoria ainda nao abriu. O cursor e o
tom mais baixo avisam isso antes da pessoa tentar clicar e nao acontecer nada. */
.breve { cursor: default; }
.breve h3, .breve p { opacity: .72; }
/* a foto de exemplo tambem e o botao de enviar: clicar nela faz o obvio */
.slot-exemplo { padding: 0; cursor: pointer; width: 100%; }
.tag-enviar {
position: absolute; inset: 0; z-index: 3;
display: grid; place-items: center;
background: rgba(0,0,0,.55); color: #fff;
font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
opacity: 0; transition: opacity .2s ease;
}
.slot-exemplo:hover .tag-enviar, .slot-exemplo:focus-visible .tag-enviar { opacity: 1; }
/* ONDE NAO EXISTE MOUSE, A ETIQUETA NAO PODE DEPENDER DE HOVER.
Medido em 20/08/2026: `.tag-enviar` so aparecia em :hover, entao no celular
os cinco quadrados mostravam foto de exemplo e NADA dizia que dava para
tocar e mandar a sua. A funcao inteira ficava invisivel justo no aparelho
onde a vendedora vai tirar a foto.
A consulta certa e `hover: none`, e nao largura de tela: o que decide e o
aparelho ter ponteiro que passa por cima, nao caber ou nao caber. Tablet
grande sem mouse tambem precisa disto; janela estreita no computador, nao.
E no toque a etiqueta vira FAIXA no rodape, nao cortina por cima: cobrir o
exemplo inteiro apagaria justamente a foto que ensina o enquadramento. */
@media (hover: none) {
.slot-exemplo .tag-enviar {
opacity: 1;
inset: auto 0 0 0;
padding: 7px 8px;
background: rgba(0,0,0,.72);
font-size: 10px;
}
}
/* ---------- menu do celular: folha que sobe, nunca tela cheia ---------- */
.burger { display: none; }
.mm, .mm-fundo { display: none; }
/* casado com o 1200px do .nav acima: onde o menu some, a gaveta tem que
aparecer, senao a pessoa fica sem navegacao nenhuma entre 901 e 1200. */
@media (max-width: 1260px) {
.burger { display: inline-flex; }
.mm-fundo {
display: block; position: fixed; inset: 0; z-index: 90;
background: rgba(0,0,0,.55);
opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.mm-fundo.aberto { opacity: 1; pointer-events: auto; }
.mm {
display: flex; flex-direction: column;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 91;
max-height: 76vh;
background: var(--bg-deep);
border-top: 1px solid var(--gold);
border-radius: 16px 16px 0 0;
transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.7,.3,1);
}
.mm.aberto { transform: translateY(0); }
.mm-topo {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.mm-corpo { overflow-y: auto; padding: 8px 20px 32px; -webkit-overflow-scrolling: touch; }
.mm-secao { padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.mm-secao:last-child { border-bottom: 0; }
.mm-titulo {
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--accent-text); margin-bottom: 8px;
}
.mm-lista a {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
min-height: 48px; padding: 8px 0; font-size: 15px; color: var(--text);
}
.mm-lista em {
font-style: normal; font-size: 11px; color: var(--text-3);
font-variant-numeric: tabular-nums;
}
}
/* ===========================================================================
ACABAMENTO
Técnica emprestada do padrão de card do BWM (tilt por variável CSS, sheen por
transform, stagger por --i, easing premium, só transform e opacity animando).
A LINGUAGEM é a da KIRA: dourado e serifa, movimento contido. Luxo não pisca.
Pesquisa 01-pesquisa/design/direcao-arte-luxo.md: duas faixas de tempo,
0.15s no micro e 0.3 a 0.5s na revelação. Nada de 1s.
=========================================================================== */
:root {
--e-saida: cubic-bezier(.16, 1, .3, 1); /* expo, para revelar */
--e-toque: cubic-bezier(.2, .8, .2, 1); /* volta do tilt */
}
/* ---------- entrada escalonada: cada elemento entra depois do anterior ------ */
/* A TELA PARAVA DE SE MEXER DEPOIS DE 1,6 SEGUNDO, e o dono viu: "agora ta pior
ainda, ta tudo voando estranho".
Eram nove elementos entrando um atrás do outro, 0,09s de atraso cada, mais o
próprio movimento de 0,68s. Somando: a pessoa via a tela se MONTANDO aos
pedaços antes de poder ler qualquer coisa.
O comentário do bloco acima diz "luxo não pisca" e logo abaixo eu tinha posto
cinco animações infinitas. Quem escreveu a regra e quem a quebrou foi a mesma
pessoa, no mesmo arquivo.
A régua agora é a Vinted, por ordem do dono: site que vende não se exibe. O
conteúdo aparece de uma vez, com um único movimento curto e sem escalonar. */
/* O CONTEÚDO NÃO PODE DEPENDER DA ANIMAÇÃO PARA APARECER.
---------------------------------------------------------------------------
Aqui estava `opacity: 0` como estado de partida, e o texto do hero só ficava
visível quando a animação terminava. Isso quer dizer que o título, o subtítulo
e o botão da primeira tela da loja dependiam de uma animação rodar.
Se ela não rodar, a loja abre em branco. E ela não roda em mais casos do que
parece: aba aberta em segundo plano (o navegador congela animação em aba
escondida), CSS que chegou pela metade, navegador antigo, extensão que corta
movimento.
Achado em 27/08/2026 por acidente, medindo com o painel do navegador oculto:
o `currentTime` da animação ficou parado em 0 e o hero inteiro com opacidade
zero. Aquilo era artefato da medição, mas o que ele mostrou é real.
Agora o conteúdo NASCE VISÍVEL e a animação é enfeite: `@starting-style` dá o
estado de entrada só a quem suporta, e quem não suporta simplesmente vê o
texto. Enfeite que some não quebra nada; conteúdo que some quebra tudo. */
.hero-in > *, .faixa-txt > * {
opacity: 1;
transform: none;
transition: opacity .32s var(--e-saida), transform .32s var(--e-saida);
}
@supports (transition-behavior: allow-discrete) {
@starting-style {
.hero-in > *, .faixa-txt > * { opacity: 0; transform: translateY(8px); }
}
}
@keyframes sobe { to { opacity: 1; transform: none; } }
/* A FAIXA NÃO PAUSA MAIS NADA. A regra antiga (`animation-play-state: paused`)
existia para segurar a entrada até a faixa aparecer na tela, e ela dependia de
a animação existir. Com o conteúdo nascendo visível, segurar seria justamente
esconder texto de quem chegou. */
/* ---------- luz varrendo o botão principal ---------- */
.btn-luz { position: relative; overflow: hidden; isolation: isolate; }
.btn-luz::after {
content: ""; position: absolute; top: 0; bottom: 0; width: 42%;
background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
transform: translateX(-180%) skewX(-16deg);
/* A LUZ VARRIA O BOTÃO PARA SEMPRE, a cada 5,4 segundos. Isso não é
acabamento, é um piscar que não para enquanto a pessoa lê. Agora ela passa
UMA vez, quando a tela abre, e some. */
animation: varre 1.4s ease-out .5s 1 forwards;
pointer-events: none;
}
@keyframes varre {
0% { transform: translateX(-180%) skewX(-16deg); }
55%, 100% { transform: translateX(320%) skewX(-16deg); }
}
.btn { transition: transform .15s var(--e-toque), background .2s ease, border-color .2s ease, color .2s ease; }
.btn-gold:hover { transform: translateY(-2px); }
/* ---------- seta de rolagem no hero ---------- */
.hero-desce { margin-top: 46px; height: 42px; }
.hero-desce span {
display: block; width: 1px; height: 42px;
background: linear-gradient(to bottom, var(--gold), transparent);
transform-origin: top;
/* A seta descia para sempre. Ela existe para dizer "tem mais abaixo", e isso
se diz uma vez: depois que a pessoa rolou, ela já sabe. */
animation: desce 2.4s ease-in-out 3;
}
@keyframes desce {
0%, 100% { transform: scaleY(.35); opacity: .45; }
50% { transform: scaleY(1); opacity: 1; }
}
/* ---------- faixa editorial ---------- */
.faixa {
position: relative; min-height: 460px; display: grid; align-items: center;
overflow: hidden; background: var(--bg-deep);
border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.faixa-fotos { position: absolute; inset: 0; }
.ff {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
opacity: 0;
animation: heroTroca 24s linear infinite, heroZoom 24s ease-in-out infinite;
transform-origin: 55% 45%;
}
.ff.f1 { animation-delay: -1s, -1s; }
.ff.f2 { animation-delay: 7s, 7s; }
.ff.f3 { animation-delay: 15s, 15s; }
.faixa-veu { position: absolute; inset: 0; }
.faixa-dir .faixa-veu {
background:
linear-gradient(90deg, transparent 0%, rgba(8,7,6,.12) 24%, rgba(8,7,6,.74) 48%, rgba(8,7,6,.94) 62%, rgba(8,7,6,.96) 100%),
linear-gradient(0deg, rgba(8,7,6,.35), transparent 46%);
}
.faixa-esq .faixa-veu {
background:
linear-gradient(90deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.94) 38%, rgba(8,7,6,.74) 52%, rgba(8,7,6,.12) 76%, transparent 100%),
linear-gradient(0deg, rgba(8,7,6,.35), transparent 46%);
}
.faixa-in { position: relative; padding-top: 76px; padding-bottom: 76px; display: flex; }
.faixa-dir .faixa-in { justify-content: flex-end; }
.faixa-txt { max-width: 46ch; }
.faixa h2 {
font-size: 34px; line-height: 1.12; letter-spacing: -.4px; font-weight: 400;
margin: 14px 0 14px;
}
.faixa p { color: var(--text-2); font-size: 15.5px; line-height: 1.7; max-width: 44ch; }
.faixa .btn { margin-top: 30px; }
/* ---------- profundidade e tilt no card de produto ---------- */
.card {
transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
transition: transform .5s var(--e-toque), box-shadow .3s ease;
will-change: auto;
}
.card.inclinando { transition: none; }
.card:hover { --ty: -4px; box-shadow: 0 30px 60px -34px rgba(0,0,0,.75); }
/* brilho que segue o cursor, discreto: é veludo, não vidro de jogo */
.card-img::after {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: radial-gradient(38% 46% at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), transparent 72%);
opacity: 0; transition: opacity .25s ease;
}
.card:hover .card-img::after { opacity: 1; }
/* ---------- respeitar quem pediu menos movimento ---------- */
@media (prefers-reduced-motion: reduce) {
.ff { animation: none; }
.ff.f1 { opacity: 1; }
.hero-in > *, .faixa-txt > * { opacity: 1; transform: none; animation: none; }
.btn-luz::after, .hero-desce span { animation: none; }
.card { transform: none; }
}
@media (max-width: 760px) {
.faixa { min-height: 380px; }
.faixa-in { padding-top: 56px; padding-bottom: 56px; }
.faixa-dir .faixa-in { justify-content: flex-start; }
.faixa h2 { font-size: 26px; }
/* no toque não existe cursor: tilt e brilho saem */
.card { transform: none; }
.card-img::after { display: none; }
}
/* Em tela estreita não sobra lado: o texto fica POR CIMA da foto, e o véu
horizontal do desktop não escurece o suficiente. Aqui ele vira vertical. */
@media (max-width: 760px) {
.hero-veu {
background:
linear-gradient(0deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.72) 42%, rgba(8,7,6,.52) 72%, rgba(8,7,6,.62) 100%);
}
.faixa-dir .faixa-veu, .faixa-esq .faixa-veu {
background:
linear-gradient(0deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.76) 46%, rgba(8,7,6,.55) 78%, rgba(8,7,6,.66) 100%);
}
.hero-cta .btn, .faixa .btn { width: 100%; }
.hero-desce { display: none; }
}
/* -------- aviso de peça da fundadora --------
CDC art. 36: a publicidade tem que ser identificada "fácil e imediatamente".
O selo "KIRA VIP" sozinho não informa nada, então quem informa é esta linha.
Ver 01-pesquisa/concorrencia/autopreferencia-plataforma.md */
.aviso-vip {
margin-top: 6px; font-size: 10.5px; letter-spacing: .08em;
text-transform: uppercase; color: var(--gold);
}
.box-vip {
margin-top: 22px; padding: 18px 20px;
border: 1px solid var(--gold-dim); border-radius: 2px;
background: color-mix(in srgb, var(--gold) 7%, transparent);
}
.box-vip p {
margin-top: 8px; font-size: 13.5px; line-height: 1.65; color: var(--text-2);
}
.box-vip b { color: var(--text); font-weight: 500; }
/* -------- seletor de ordenação --------
Não é enfeite: é o que cumpre o CDC art. 36, que manda a compradora identificar
"fácil e imediatamente" o critério. Peça de fundadora vai primeiro, e a tela diz
isso em vez de esconder. Ver 01-pesquisa/concorrencia/autopreferencia-plataforma.md */
/* .section-head e' flex-end, que serve para titulo + link "ver todos" casarem na
base. Aqui o lado direito e' uma coluna (rotulo + select + nota de 2 linhas),
entao a base ficava 58px abaixo do rotulo e o titulo "O acervo" afundava junto,
parecendo desalinhado com o Ordenar. Nesta variante o encontro e' no topo. */
.section-head:has(.lista-acoes) { align-items: flex-start; }
.lista-acoes { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ordem { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ordem-rot {
font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3);
}
/* CAMPO ABAIXO DE 16px FAZ O IPHONE DAR ZOOM SOZINHO ao ser tocado, e a tela
inteira sai do lugar sem jeito de voltar sem recarregar. Este era o unico
campo do app fora da regra: os outros 29 ja estavam em 16px, medidos em
20/08/2026. Continua parecendo pequeno na tela porque a caixa e curta e o
espacamento e apertado, mas o texto tem o tamanho que o iOS exige. */
.ordem-sel {
min-height: 44px; padding: 0 30px 0 12px;
background: transparent; border: 1px solid var(--line); border-radius: 2px;
color: var(--text); font-size: 16px; font-family: inherit;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.ordem-sel:hover { border-color: var(--gold); }
.ordem-nota {
font-size: 11.5px; color: var(--text-3); line-height: 1.55; max-width: 42ch; margin-top: 2px;
}
@media (max-width: 620px) {
.lista-acoes { width: 100%; }
.ordem { flex: 1 1 100%; }
.ordem-sel { width: 100%; }
}
/* ===========================================================================
ALVO DE TOQUE
O design system que escrevi manda 44px mínimo, e a auditoria achou 65 alvos
abaixo disso só na busca. Dedo não tem a precisão do cursor: alvo pequeno vira
toque errado, e toque errado no coração da navegação vira desistência.
Só vale onde não existe cursor. No desktop os 40px continuam, porque ali eles
funcionam e mexer estragaria o respiro do cabeçalho.
=========================================================================== */
@media (hover: none), (max-width: 900px) {
.icon-btn { min-width: 44px; min-height: 44px; }
/* coração no card: cresce a área de toque sem crescer o desenho */
.card-fav { width: 44px; height: 44px; }
.card-fav svg { width: 17px; height: 17px; }
/* linha de filtro: a linha inteira é clicável, então ela inteira precisa caber o dedo */
.f-op { min-height: 44px; padding: 10px 0; }
/* subcategoria e link de lista dentro de conteúdo */
.cat-lista a, .marca-item, .mm-lista a, .mega-lista a { min-height: 44px; }
/* dois alvos colados sem respiro viram um só para o dedo */
.nav-colecoes a { padding: 12px 0; }
}
.cat-lista a {
display: flex; align-items: center;
font-size: 13.5px; color: var(--text-2); padding: 5px 0;
}
.cat-lista a:hover { color: var(--accent-text); }
@media (hover: none), (max-width: 900px) {
.alfabeto a { min-width: 44px; min-height: 44px; }
.section-link { min-height: 44px; display: inline-flex; align-items: center; }
.chip { min-height: 44px; }
.tab button { min-height: 44px; }
.temas button { min-height: 40px; display: inline-flex; align-items: center; }
}
@media (hover: none), (max-width: 900px) {
/* .btn-sm tem 40px e é o botão de ação do admin e do painel: aprovar, bloquear */
.btn-sm { height: 44px; }
/* o logo é largo mas tem 20px de altura, e é o caminho de volta para a home */
.logo { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (hover: none), (max-width: 900px) {
/* rodapé: link de 16px é o menor do site inteiro */
.foot a, footer a { display: inline-flex; align-items: center; min-height: 44px; }
.ordem-sel { min-height: 44px; }
.input, input.input, select { min-height: 44px; }
}
/* ---------- estado vazio ----------
Quem sai do caminho feliz é quem mais precisa de ajuda, e é quem costuma
achar tela em branco. Três coisas, nesta ordem: o que aconteceu, por que não
é culpa dela, e o que fazer agora. */
.vazio {
display: flex; flex-direction: column; align-items: center; text-align: center;
padding: 56px 24px 60px;
border: 1px solid var(--line-soft); border-radius: 2px;
background: var(--surface);
}
.vazio-icone {
width: 52px; height: 52px; display: grid; place-items: center;
border: 1px solid var(--line); border-radius: 999px; margin-bottom: 20px;
}
.vazio-icone svg { width: 20px; height: 20px; stroke: var(--gold); fill: none; stroke-width: 1.3; }
.vazio h3 { font-size: 22px; color: var(--text); margin-bottom: 10px; font-weight: 400; }
.vazio p { font-size: 14px; color: var(--text-2); line-height: 1.7; max-width: 46ch; margin-bottom: 26px; }
.vazio .btn { min-width: 220px; }
.vazio-link {
margin-top: 14px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-3); border-bottom: 1px solid var(--line); padding-bottom: 3px;
min-height: 44px; display: inline-flex; align-items: center;
}
.vazio-link:hover { color: var(--accent-text); border-bottom-color: var(--gold); }
/* ===========================================================================
FOCO NO MARKETPLACE (19/08/2026)
A tira de coleções no topo saiu: eram filtros específicos disputando espaço
com o que a pessoa realmente procura numa loja de maquiagem, que é categoria
e preço. No lugar entrou a linha de categorias, com "Ver tudo" na frente.
=========================================================================== */
.nav-cats {
display: flex; align-items: center; gap: 0; flex-wrap: wrap;
border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
.nav-cats a {
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-2); padding: 16px 18px; min-height: 44px;
display: inline-flex; align-items: center; position: relative;
}
.nav-cats a + a::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 1px; height: 12px; background: var(--line);
}
.nav-cats a:hover { color: var(--accent-text); }
.nav-cat-tudo { color: var(--text) !important; font-weight: 500; }
.nav-cat-tudo::after {
content: ""; position: absolute; left: 18px; right: 18px; bottom: 12px;
height: 1px; background: var(--gold);
}
/* provas do hero: o que a pessoa quer saber antes de clicar */
.hero-provas {
display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px;
font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.hero-provas span { position: relative; }
.hero-provas span + span::before {
content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
width: 3px; height: 3px; border-radius: 50%; background: var(--gold-dim);
}
/* item do topo que ainda não abriu: aparece, mas não finge que clica */
.nav-breve {
display: inline-flex; align-items: center; gap: 7px;
font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3); padding: 24px 14px; cursor: default;
}
.nav-breve em {
font-style: normal; font-size: 9px; letter-spacing: .09em;
color: var(--gold); border: 1px solid var(--line); border-radius: 999px; /* --gold-dim dava 2,64:1 */
padding: 2px 7px;
/* sem isto o "em breve" quebrava em duas linhas dentro da pilula e empurrava
a altura de Colecoes e Marcas, tirando os dois da linha do resto do menu.
A classe irma .em-breve ja tinha o nowrap; esta aqui tinha ficado sem. */
white-space: nowrap;
}
/* atalho para o acervo inteiro, no topo do painel de Comprar */
.mega-tudo {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line-soft);
}
.mega-tudo-link {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 20px; border: 1px solid var(--line); border-radius: 2px;
background: color-mix(in srgb, var(--gold) 5%, transparent);
}
.mega-tudo-link:hover { border-color: var(--gold); }
.mega-tudo-rot { font-size: 15px; color: var(--text); }
.mega-tudo-n { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 760px) {
.nav-cats { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.nav-cats::-webkit-scrollbar { display: none; }
.nav-cats a { flex: 0 0 auto; }
.mega-tudo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.mm-tudo { border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.mm-tudo span { color: var(--accent-text); }
.mm-breve {
display: flex; align-items: center; justify-content: space-between;
min-height: 48px; font-size: 15px; color: var(--text-3);
}
.mm-breve em {
font-style: normal; font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
color: var(--gold); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px;
}
}
/* ---------- página que explica a venda ---------- */
.conta-venda {
border: 1px solid var(--gold-dim); border-radius: 2px; padding: 26px 28px;
background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.conta-linha {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 11px 0; font-size: 15px; color: var(--text-2);
}
.conta-linha b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.conta-linha .menos { color: var(--text-3); }
.conta-linha.total {
border-top: 1px solid var(--line); margin-top: 8px; padding-top: 18px; font-size: 16px;
}
.conta-linha.total b { font-size: 26px; }
.conta-venda .hint { margin-top: 16px; }
.passos { display: flex; flex-direction: column; gap: 4px; }
.passo {
display: flex; gap: 20px; align-items: flex-start;
padding: 22px 0; border-bottom: 1px solid var(--line-soft);
}
.passo:last-child { border-bottom: 0; }
.passo-n {
flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
border: 1px solid var(--gold-dim); display: grid; place-items: center;
font-size: 13px; color: var(--accent-text);
}
.passo h3 { font-size: 17px; color: var(--text); font-weight: 500; margin-bottom: 6px; }
.passo p { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.cta-final {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding-top: 8px;
}
.cta-final .btn { max-width: 420px; }
/* a barra de protótipo ficou só com o seletor de app */
/* ---------- chat ---------- */
.conv {
display: flex; align-items: center; gap: 16px; padding: 16px 0;
border-bottom: 1px solid var(--line-soft); position: relative;
}
.conv:hover .conv-topo b { color: var(--accent-text); }
.conv-main { flex: 1; min-width: 0; }
.conv-topo { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.conv-topo b { font-weight: 500; color: var(--text); }
.conv-topo span { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.conv-prod {
font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-3); margin: 4px 0 6px;
}
.conv-ult {
font-size: 13.5px; color: var(--text-2);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.conv-bola {
flex: 0 0 auto; min-width: 20px; height: 20px; border-radius: 999px;
background: var(--gold); color: var(--btn-txt);
display: grid; place-items: center; font-size: 11px;
}
.chat-peca {
display: flex; align-items: center; gap: 16px;
padding: 14px 16px; border: 1px solid var(--line); border-radius: 2px;
margin-bottom: 22px; background: var(--surface);
}
.chat-peca b { display: block; font-size: 17px; color: var(--text); }
.chat-preco { font-size: 12.5px; color: var(--text-3); margin-top: 4px; }
.chat-msgs {
display: flex; flex-direction: column; gap: 12px;
max-height: 52vh; overflow-y: auto; padding: 4px 2px 8px;
}
.msg { max-width: 78%; align-self: flex-start; }
.msg p {
background: var(--surface-2); color: var(--text); font-size: 14.5px; line-height: 1.6;
padding: 12px 16px; border-radius: 2px 14px 14px 14px;
}
.msg span { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 5px; }
.msg.minha { align-self: flex-end; text-align: right; }
.msg.minha p { background: var(--gold-dim); color: #fff; border-radius: 14px 2px 14px 14px; }
.msg.avisada p { box-shadow: inset 0 0 0 1px var(--bordo); }
.msg em {
display: block; font-style: normal; font-size: 10.5px; color: var(--bordo-txt); margin-top: 4px;
}
.chat-aviso {
margin: 14px 0 0; padding: 14px 16px;
border: 1px solid var(--bordo); border-radius: 2px;
background: color-mix(in srgb, var(--bordo) 10%, transparent);
}
.chat-aviso b { display: block; font-size: 13.5px; color: var(--text); font-weight: 500; line-height: 1.6; }
.chat-aviso span { display: block; font-size: 12px; color: var(--text-2); margin-top: 6px; }
.chat-form { display: flex; gap: 10px; margin-top: 16px; }
.chat-form .input { flex: 1; }
.chat-form .btn { flex: 0 0 auto; }
/* ---------- comparação de taxas ----------
A linha da OLX aparece com o mesmo peso das outras, e diz "não cobra" com
todas as letras. Esconder onde o concorrente ganha é publicidade enganosa por
omissão, CDC art. 37 § 1º. */
.tab-comp table { width: 100%; border-collapse: collapse; }
.tab-comp th {
text-align: left; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3); font-weight: 400; padding: 0 14px 12px 0;
border-bottom: 1px solid var(--line);
}
.tab-comp th:last-child, .tab-comp td:last-child { text-align: right; padding-right: 0; }
.tab-comp td {
padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line-soft);
font-size: 14.5px; color: var(--text-2); vertical-align: top;
}
.tab-comp td span {
display: block; font-size: 11.5px; color: var(--text-3); margin-top: 5px;
line-height: 1.55; max-width: 42ch;
}
.tab-comp td b { color: var(--text); font-weight: 500; }
.tab-comp tr.kira td { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.tab-comp tr.kira td:first-child { box-shadow: inset 3px 0 0 var(--gold); padding-left: 14px; }
.tab-comp tr.kira td b.serif { font-size: 21px; }
.tab-comp .hint { margin-top: 18px; }
@media (max-width: 620px) {
.tab-comp td { font-size: 13px; padding: 14px 8px 14px 0; }
.tab-comp td span { font-size: 11px; }
}
/* ---------- alertas ---------- */
.alerta-form { border: 1px solid var(--line); border-radius: 2px; padding: 26px 28px; }
.alertas { display: flex; flex-direction: column; gap: 4px; }
.alerta {
display: flex; align-items: center; gap: 16px;
padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.alerta.off { opacity: .5; }
.alerta-main { flex: 1; min-width: 0; }
.alerta-main b { font-size: 16px; color: var(--text); font-weight: 500; }
.alerta-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 7px 0; }
.alerta-filtros span {
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--accent-text); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}
.alerta-filtros .apagado { color: var(--text-3); border-color: transparent; padding-left: 0; }
.alerta-agora { font-size: 13px; color: var(--text-3); }
.alerta-agora a { color: var(--accent-text); border-bottom: 1px solid var(--gold-dim); }
/* a nota que explica a comissão do concorrente. Ela existe porque comparar só a
comissão engana por omissão: eles cobram mais e entregam frete dentro. */
.tab-nota {
margin-top: 22px; padding: 20px 22px;
border-left: 2px solid var(--gold); background: var(--surface);
}
.tab-nota b { display: block; font-size: 14.5px; color: var(--text); font-weight: 500; line-height: 1.55; margin-bottom: 10px; }
.tab-nota p { font-size: 13.5px; color: var(--text-2); line-height: 1.7; margin-bottom: 8px; }
.tab-nota .hint { margin-top: 12px; }
.tab-comp th:nth-child(3), .tab-comp td:nth-child(3) { text-align: right; }
.tab-comp td:nth-child(4) span { text-align: right; }
/* ---------- a conta do frete grátis ----------
Responde a objeção que toda vendedora vai ter: "mas lá o frete é grátis".
Ela pode fazer o mesmo aqui, e a conta mostra que ainda sobra mais. */
.frete-conta {
margin-top: 26px; padding: 26px 28px;
border: 1px solid var(--gold-dim); border-radius: 2px;
background: color-mix(in srgb, var(--gold) 6%, transparent);
}
.frete-conta h3 { font-size: 20px; color: var(--text); font-weight: 400; margin-bottom: 10px; }
.frete-conta > p { font-size: 14px; color: var(--text-2); line-height: 1.7; }
.fc-linhas { margin: 20px 0 18px; }
.fc-l {
display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
padding: 10px 0; font-size: 14.5px; color: var(--text-2);
}
.fc-l b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-l .menos { color: var(--text-3); }
.fc-l.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.fc-l.total b { font-size: 24px; }
.fc-l.comp { border-top: 1px dashed var(--line-soft); margin-top: 10px; padding-top: 14px; color: var(--text-3); }
.fc-l.comp b { color: var(--text-3); font-weight: 400; }
.fc-resultado {
font-size: 15.5px !important; color: var(--text) !important;
padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
margin-bottom: 16px;
}
.fc-resultado b { color: var(--accent-text); font-weight: 500; }
.frete-conta > p:last-child b { color: var(--text); font-weight: 500; }
/* ===========================================================================
DIAGRAMAÇÃO DO TÍTULO
O
quebrava em dois no desktop e em quatro no celular, deixando palavra
sozinha na última linha. Título de marca não pode ter linha órfã.
A solução tem duas partes: no desktop o
vale e as duas linhas ficam
equilibradas; no celular ele é ignorado e quem quebra é o navegador, com
text-wrap:balance, que distribui as palavras em vez de deixar sobra.
=========================================================================== */
.hero h1 {
text-wrap: balance;
hyphens: none;
/* sem max-width: o
ja define as duas linhas, e limitar por caractere
forcava quebra em cima da quebra, virando quatro linhas */
}
.hero-in p { text-wrap: pretty; } /* impede palavra sozinha no fim do parágrafo */
.faixa h2, .section-title { text-wrap: balance; }
/* as duas metades sao SPAN, nao
. Esconder um
cola as palavras: no
celular saiu "maquiagenspelos". Com span, virar bloco ou linha nao mexe no
espaco entre elas. */
.hero h1 span { display: block; }
@media (max-width: 760px) {
/* no celular quem quebra e a largura, entao as metades voltam a ser texto
corrido e o navegador equilibra */
.hero h1 span { display: inline; }
.hero h1 { font-size: 34px; line-height: 1.12; }
/* as provas viram uma coluna, para nao sobrar bolinha orfa na segunda linha */
.hero-provas { flex-direction: column; gap: 6px; }
.hero-provas span + span::before { display: none; }
}
/* fecho da tabela: a frase que a pessoa leva embora */
.tab-fecho {
margin-top: 18px; padding: 16px 20px;
border-left: 2px solid var(--gold); background: var(--surface);
font-size: 16px; color: var(--text); line-height: 1.6;
}
.tab-fecho b { color: var(--accent-text); font-weight: 500; }
/* as cinco fotos, dentro do passo. Lista aqui é legítima: a ordem importa e
cada linha é uma foto diferente, não é enfeite. */
.passo-fotos { margin: 12px 0 0; padding: 0; list-style: none; }
.passo-fotos li {
position: relative; padding: 7px 0 7px 18px;
font-size: 13.5px; color: var(--text-2); line-height: 1.65;
}
.passo-fotos li::before {
content: ""; position: absolute; left: 0; top: 15px;
width: 5px; height: 5px; border-radius: 50%; background: var(--gold-dim);
}
.passo-fotos b { color: var(--text); font-weight: 500; }
/* ---------------------------------------------------------------------------
SILHUETA DE CARREGAMENTO
---------------------------------------------------------------------------
Medido em 20/08/2026, com um banco fingindo 3 segundos de demora: a pessoa
via a vitrine escrita, as seções e os títulos, com ZERO peça e nada dizendo
que algo estava vindo. Isso não lê como "carregando", lê como "a KIRA está
vazia", e quem chega numa loja vazia vai embora antes do terceiro segundo.
Sem texto de mentira dentro da silhueta: texto falso pisca, some, e a pessoa
tenta ler. Só a forma, com a MESMA altura do cartão de verdade, para a tela
não pular quando a peça chegar.
O brilho respeita quem pediu menos movimento, e sem ele a silhueta continua
visível: ela não depende da animação para existir.
--------------------------------------------------------------------------- */
/* A PRIMEIRA VERSAO USAVA --photo-base, que e o creme do cartao. No cartao de
verdade aquilo e o fundo da foto e faz sentido; sobre o marrom da pagina, com
a peca ainda nao carregada, virava um bloco quase branco dominando a tela.
Olhado no celular em 390px: parecia site barato carregando, e a regra do
projeto e explicita sobre isso. Silhueta e' espera, nao e' conteudo: ela fica
um degrau acima do fundo, e so. */
.esqueleto .card-img,
.esq-linha {
background: linear-gradient(90deg,
rgba(255,255,255,.035) 0%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.035) 100%);
background-size: 200% 100%;
animation: esq-brilho 1.4s ease-in-out infinite;
box-shadow: none;
}
.esq-linha { height: 12px; border-radius: 2px; margin-top: 10px; }
.esqueleto .card-img { margin-bottom: 14px; }
@keyframes esq-brilho {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.esqueleto .card-img, .esq-linha { animation: none; }
}
/* =============================================================================
A MOLDURA
-----------------------------------------------------------------------------
Duas linhas verticais nas bordas da mancha, fixas na tela. E o que revista e
loja de luxo fazem para o olho saber onde o conteudo comeca e termina: sem
elas, a vitrine parece flutuar no meio do nada.
TRES CUIDADOS, e cada um ja me mordeu antes neste projeto:
1. NAO PODE CRIAR ROLAGEM LATERAL. Por isso `position: fixed` e nao um
elemento no fluxo: fixo sai da conta da largura da pagina.
2. NAO PODE COMER CLIQUE. `pointer-events: none`. Coisa que pinta por cima
sem receber toque e invisivel para teste de clique e visivel para o olho,
e foi exatamente assim que um botao ficou inalcancavel em app irmao.
3. PRECISA APARECER NA FAIXA ESCURA E NA BEGE. O site alterna as duas, e a
moldura passa por cima das duas. Cor solida serviria numa e sumiria na
outra, entao ela e' dourada com transparencia: escurece um pouco a faixa
clara e clareia um pouco a escura.
SO EM TELA LARGA. Abaixo de 1288px a mancha encosta na borda e a moldura
passaria POR CIMA do conteudo, que e o contrario do que ela existe para
fazer. No celular ela simplesmente nao existe.
============================================================================= */
@media (min-width: 1288px) {
body::before,
body::after {
content: '';
position: fixed;
top: 0;
bottom: 0;
width: 1px;
background: rgba(168, 138, 106, .30); /* dourado com transparencia */
pointer-events: none; /* nunca come clique */
z-index: 60; /* abaixo do menu (90) e do cabecalho */
}
/* 1240px de mancha, entao a borda esta a 620px do centro. Os 24px do padding
ficam DENTRO da moldura, que e o respiro entre a linha e o texto. */
body::before { left: calc(50% - 620px); }
body::after { right: calc(50% - 620px); }
}
/* Em tela muito larga a moldura sozinha fica solta. Um segundo par, bem mais
apagado e mais para fora, da a sensacao de margem de pagina impressa. */
@media (min-width: 1600px) {
.moldura-fora {
position: fixed; top: 0; bottom: 0; width: 1px;
background: rgba(168, 138, 106, .12);
pointer-events: none; z-index: 59;
}
.moldura-fora.esq { left: calc(50% - 700px); }
.moldura-fora.dir { right: calc(50% - 700px); }
}
.moldura-fora { display: none; }
@media (min-width: 1600px) { .moldura-fora { display: block; } }
/* =============================================================================
DOCUMENTO JURIDICO NA TELA
-----------------------------------------------------------------------------
Termos e politicas sao texto longo, e texto longo mal desenhado ninguem le.
Quem nao le nao consente de verdade, e consentimento que a pessoa nao leu e'
consentimento fraco, seja qual for a assinatura.
Por isso: medida de linha curta (65 caracteres), entrelinha alta, hierarquia
visivel entre os niveis de titulo, e tabela que rola sozinha em vez de
estourar a tela no celular.
============================================================================= */
.doc { font-size: 15px; line-height: 1.75; color: var(--text-2); max-width: 65ch; }
.doc h2 { font-family: var(--serif); font-size: 24px; line-height: 1.25;
color: var(--text); margin: 44px 0 12px; }
.doc h3 { font-size: 17px; color: var(--text); margin: 30px 0 8px; font-weight: 600; }
.doc h4 { font-size: 14px; color: var(--text); margin: 22px 0 6px;
letter-spacing: .06em; text-transform: uppercase; }
.doc p { margin: 0 0 14px; }
.doc b { color: var(--text); font-weight: 600; }
.doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; }
.doc li { margin-bottom: 7px; }
.doc li.cont { list-style: none; margin-left: -22px; }
/* `overflow-wrap: anywhere` NAO E DETALHE. Estes documentos citam caminho de
arquivo e URL de orgao publico dentro de crase, e `code` nao quebra palavra
longa por padrao. Medido em 21/08/2026: a URL de consulta da Anvisa media
479px numa tela de 375, e a PAGINA INTEIRA passava a rolar de lado, tirando
o texto do contrato do campo de visao. */
.doc code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: .88em; background: var(--bg-deep);
padding: 2px 5px; border-radius: 4px; color: var(--text);
overflow-wrap: anywhere; }
/* mesma razao, para link e texto solto muito comprido */
.doc, .doc p, .doc li, .doc td { overflow-wrap: anywhere; }
.doc a { color: var(--accent-text); text-decoration: underline; }
/* A CITACAO E' ONDE MORA A FONTE. Nestes documentos ela quase sempre carrega o
artigo da lei ou a decisao que sustenta o paragrafo de cima, entao ela precisa
se distinguir do corpo, e nao virar enfeite apagado. */
.doc blockquote { margin: 18px 0; padding: 2px 0 2px 18px;
border-left: 2px solid var(--gold-dim); color: var(--text-3); }
.doc blockquote p { margin: 0 0 6px; font-size: 14px; }
.doc-tabela { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; }
.doc-tabela th { text-align: left; font-weight: 600; color: var(--text);
border-bottom: 1px solid var(--line); padding: 9px 12px 9px 0;
white-space: nowrap; }
.doc-tabela td { border-bottom: 1px solid var(--line-soft); padding: 9px 12px 9px 0;
vertical-align: top; }
.doc-tabela tr:last-child td { border-bottom: 0; }
.doc-outros { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.doc-outros a { font-size: 14px; color: var(--text-2); text-decoration: none;
border-bottom: 1px solid var(--line); padding: 6px 0;
min-height: 44px; display: inline-flex; align-items: center; }
.doc-outros a:hover { color: var(--accent-text); border-color: var(--gold-dim); }
/* Grade de tons: bolinha de cor mais o codigo. Minimo de 44px de alvo, porque
sao dezenas de opcoes lado a lado num celular. */
.tom-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.tom-item { display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 12px 6px; min-height: 44px; border: 1px solid var(--line-soft);
border-radius: 10px; font-size: 11px; color: var(--text-2); text-align: center; }
.tom-item:hover { border-color: var(--gold-dim); color: var(--text); }
/* ---- aviso de armazenamento ---------------------------------------------
Fica ACIMA da barra de atalhos do celular, nunca por cima dela: barra de
aviso tapando navegacao e' o defeito classico desse componente, e no celular
ela tapa justamente o botao de vender.
Nao escurece a tela nem trava o scroll, porque nao e' decisao: e' recado. */
.aviso-guarda {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: calc(var(--bnav-h, 64px) + 12px);
width: min(680px, calc(100vw - 32px));
z-index: 55;
display: flex;
align-items: center;
gap: 16px;
padding: 14px 18px;
border-radius: 14px;
background: var(--surface-2, #16110d);
border: 1px solid rgba(168, 138, 106, .30);
box-shadow: 0 12px 34px rgba(0, 0, 0, .38);
}
.aviso-guarda p {
margin: 0;
font-size: 13px;
line-height: 1.5;
color: var(--text-2);
flex: 1;
min-width: 0;
}
.aviso-guarda .btn { flex: none; }
@media (min-width: 900px) {
.aviso-guarda { bottom: 20px; }
}
@media (max-width: 560px) {
.aviso-guarda { flex-direction: column; align-items: stretch; gap: 10px; }
.aviso-guarda .btn { width: 100%; }
}
/* ---- LINK DENTRO DE TEXTO PRECISA PARECER LINK --------------------------
Medido em 21/08/2026, comparando a cor calculada do com a do pai: TODO
link de politica do rodape saia com a mesma cor, o mesmo peso e sem
sublinhado, ou seja, identico a "Categorias" e "Ofertas", que sao itens
mortos. Na pratica ninguem descobria que Termos de uso e Privacidade eram
clicaveis, e sao justamente os dois que a lei manda estar ao alcance.
A culpa e do reset da linha 58, `a { color: inherit; text-decoration: none }`,
que existe para os cards e para a navegacao, onde o link e' o bloco inteiro
e sublinhado ficaria feio. Entao o conserto nao mexe no reset: devolve a
marca so onde o link mora DENTRO de texto corrido.
Sublinhado fino e deslocado, nao azul: a KIRA e' editorial, e o azul de
navegador quebra a paleta. O que importa e' existir sinal, nao a cor. */
/* `.footer-bot a` ENTROU EM 22/08/2026, e a falta dele foi defeito meu: assim que
o e-mail de contato entrou no rodape, ele nasceu invisivel como link, porque a
regra cobria `.footer li a` e o contato mora no rodape de baixo.
Quem pegou foi o proprio medidor de link invisivel, escrito ontem para o mesmo
defeito. Regra por lugar exato envelhece quando nasce lugar novo. */
.footer li a,
.footer-bot a,
.hint a,
.aviso-guarda a,
main p a:not(.btn),
.doc-nav a {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(168, 138, 106, .55);
transition: text-decoration-color .18s, color .18s;
}
.footer li a:hover,
.footer-bot a:hover,
.hint a:hover,
.aviso-guarda a:hover,
main p a:not(.btn):hover {
color: var(--accent-text);
text-decoration-color: currentColor;
}
/* O HOVER MORAVA NO , entao acendia tambem os itens que nao levam a lugar
nenhum, e isso ensinava a pessoa errado: ela aprendia que ali tudo clica. */
.footer li:hover { color: inherit; }
.footer li a:hover { color: var(--accent-text); }
/* ---- BOTOES IRMAOS TEM A MESMA LARGURA ----------------------------------
Medido em 21/08/2026 num celular de 375px, em quatro telas: "Declarar envio"
com 158px ao lado de "Agora nao" com 119. "Encerrar mesmo assim" com 213 ao
lado de "Deixa pra la" com 134. Um gordo do lado de um magro, que e' o que a
regra do projeto proibe.
No celular eles viram largura cheia, um embaixo do outro, e isso resolve duas
coisas de uma vez: eles ficam iguais, e o alvo de toque fica do tamanho da
tela, que e' o que importa quando a pessoa esta com o celular na mao andando.
Na tela grande ficam lado a lado com a MESMA largura, pelo `flex: 1` limitado:
sem o `max-width` dois botoes esticariam pela tela inteira, o que fica feio
num container largo. */
.acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.acoes > .btn { flex: 1 1 auto; }
@media (max-width: 560px) {
.acoes { flex-direction: column; }
.acoes > .btn { width: 100%; flex: none; }
}
@media (min-width: 561px) {
.acoes > .btn { max-width: 260px; }
}
/* OS BOTOES DENTRO DE UM CARTAO DE PECA FICAM LADO A LADO NO CELULAR
-----------------------------------------------------------------------------
Visto na foto da tela em 22/08/2026: tres acoes secundarias empilhadas em
largura total, uma embaixo da outra, dentro de CADA cartao. Com dez pecas
anunciadas viram trinta faixas iguais e a lista fica impossivel de varrer.
`.acoes` sozinha empilha de proposito, e ali esta certo: la' o botao e' a
acao principal da tela. Aqui nao e': a peca e' o assunto, os botoes sao o
que da' para fazer com ela. Duas colunas, minimo de 44px de altura mantido
pelo proprio `.btn`. */
@media (max-width: 560px) {
/* minmax(0,1fr) e nao 1fr: com `1fr` puro o rotulo mais longo estica a
coluna dele e as duas ficam desiguais. Medido: 162px x 130px. */
.acoes-cartao { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.acoes-cartao > .btn { width: auto; }
/* botao sozinho, ou o ultimo de um numero impar, ocupa a linha inteira em vez
de deixar um buraco do lado */
.acoes-cartao > .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* O SELO "EM BREVE"
-----------------------------------------------------------------------------
Nao esconde o caminho de vender, avisa. Quem toca continua chegando na tela,
que explica por que ainda nao abriu e deixa a peca ficar de rascunho. Esconder
o link faria a pessoa achar que a KIRA nao compra peca de ninguem. */
.em-breve {
display: inline-block; margin-left: 8px; padding: 2px 8px;
border: 1px solid var(--line); border-radius: 999px;
font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
color: var(--text-2); white-space: nowrap; vertical-align: middle;
}
/* Na barra de baixo o rotulo ja diz "Em breve", entao o botao so perde o
destaque de acao principal: continua tocavel e continua com 44px. */
/* Fechado, ele PARA de parecer o botao principal. Visto na foto da tela em
22/08/2026: o "+" dourado num circulo cheio e' o elemento mais chamativo da
barra inteira, e ele estava dizendo "crie alguma coisa" embaixo de um rotulo
que diz "Em breve". Convite e recusa na mesma peca. Agora ele fica igual as
outras abas: continua tocavel, continua com 44px, e nao promete. */
.bnav .sell.sell-breve i {
background: transparent; color: var(--text-3);
border: 1px solid var(--line); margin-top: 0;
width: 32px; height: 32px;
}
.bnav .sell.sell-breve i svg { stroke: var(--text-3); }
.bnav .sell.sell-breve span { color: var(--text-3); }
/* PECA SEM FOTO: DESENHO, NAO FOTO DE OUTRA PECA
-----------------------------------------------------------------------------
Os desenhos (`ART`, no data.js) existiam desde o comeco e nunca foram usados:
ate 22/08/2026 a peca sem foto recebia uma FOTO DE ESTOQUE de um batom
qualquer. Numa loja que vende autenticidade, por a foto de outro produto no
lugar do que a compradora esta olhando e' o pior erro possivel.
O `.tile` ja pinta o fundo (t1..t6) e o `.art` ja tem tamanho e cor. */
.tile.sem-foto { display: grid; place-items: center; }
/* O PROVADOR DENTRO DA PAGINA DO PRODUTO
-----------------------------------------------------------------------------
Discreto de proposito: e' informacao que ajuda a decidir, nao propaganda. O
unico destaque e' quando COMBINA, porque ali a resposta e' o motivo da compra. */
.tom-box { display: block; padding: 18px; margin: 22px 0; }
.tom-topo { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.tom-bolinha {
width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
border: 1px solid rgba(255,255,255,.22);
box-shadow: inset 0 0 0 2px rgba(0,0,0,.18);
}
.tom-veredito { font-size: 17px; margin-top: 12px; }
.tom-box.tom-combina { border-color: var(--accent); }
.tom-box.tom-combina .tom-veredito { color: var(--accent-text); }
/* ---- o tom da peca, na tela de anunciar --------------------------------- */
/* A BOLA DE COR TEM BORDA DE PROPOSITO. Tom claro de base fica quase branco, e
sem borda a bola some no fundo creme: a vendedora nao ve diferenca entre
"tom claro" e "sem cor nenhuma". */
.tom-bola { width:26px; height:26px; border-radius:999px; flex:0 0 26px;
border:1px solid rgba(0,0,0,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.tom-lista { display:flex; flex-direction:column; gap:2px; margin-top:8px;
max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.tom-op { display:flex; align-items:center; gap:12px; width:100%; min-height:48px;
padding:8px 12px; background:none; border:0; border-bottom:1px solid var(--line);
text-align:left; cursor:pointer; color:inherit; font:inherit; }
.tom-op:last-child { border-bottom:0; }
.tom-op:hover, .tom-op:focus-visible { background:rgba(0,0,0,.05); }
.tom-dito { display:flex; flex-direction:column; min-width:0; }
.tom-dito strong { font-size:14px; font-weight:600; }
.tom-dito span { font-size:12px; opacity:.7; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap; }
.tom-escolhido { display:flex; align-items:center; gap:12px; min-height:48px;
padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.tom-escolhido .tom-dito { flex:1 1 auto; }
.btn-mini { min-height:36px; padding:0 14px; font-size:12px; }
/* ---- vaga de foto sem exemplo ------------------------------------------
Ver a nota em `vAnunciar`: o exemplo de foto saiu em 23/08/2026 porque as
cinco ensinavam o contrário da instrução ao lado. O quadro continua sendo o
botão de enviar, e agora diz isso sem fingir que é uma foto. */
.slot-vazio {
position: absolute; inset: 0; display: grid; place-items: center; gap: 6px;
align-content: center; color: var(--text); opacity: .34;
}
.slot-vazio svg { width: 28px; height: 28px; fill: none; stroke: currentColor;
stroke-width: 1.2; stroke-linejoin: round; }
.slot-vazio em { font-style: normal; font-size: 11px; letter-spacing: .18em; }
/* SEM FOTO EMBAIXO, O CONVITE NAO PODE DEPENDER DE HOVER.
Com a foto de exemplo, o quadro já dizia sozinho "aqui vai uma foto" e a
etiqueta só precisava aparecer no hover. Sem ela, se a etiqueta ficar
escondida o quadro vira um quadrado morto, e a vendedora não descobre que
dá para tocar. É o mesmo defeito que já tinha acontecido no celular. */
.tag-enviar.tag-sempre {
opacity: 1; inset: auto 0 0 0; padding: 8px;
background: rgba(0,0,0,.34); font-size: 10px;
}
/* A ÂNCORA DA CONTA NÃO TEM CSS PRÓPRIO, e isso é o conserto.
Em 26/08/2026 eu troquei a fileira de sempre por uma grade de caixas, com
rótulo curto e um "voltar" só no celular. O dono olhou: "tá muito junto, muito
feio, você tirou as coisas importantes e colocou coisas que são tipo
configurações, volta ao que tava".
A grade tinha nascido para resolver a rolagem lateral num celular de 375px,
um defeito que JÁ TINHA SIDO CONSERTADO em 21/08, quando `.tab` passou a
quebrar linha abaixo de 560px. Eu troquei o que estava certo por causa de um
problema que não existia mais.
A fileira usa `.tab`, a mesma classe das outras faixas do app. O que ficou da
correção de 23/08 é só o que era defeito de verdade: ela aparece em TODAS as
telas de conta, e não só no perfil. */
/* O TOPO NAO TEM NOME EMBAIXO DO ICONE, e isso foi decidido em 26/08/2026.
Eu tinha posto legenda nos cinco atalhos porque o dono disse "os icones tudo
pequeno ali sem tar escrito o que e'". A legenda alargou a fileira, desalinhou
as alturas, empurrou a sacola para fora numa tela de 1280 e, olhando pronto,
o dono disse que a versao que ja estava no ar (sem legenda) era a certa.
Ele manda, e ele estava olhando o resultado. Quem nomeia esses atalhos e' a
barra de baixo no celular, que sempre teve INICIO, BUSCAR, MENSAGENS, PERFIL. */
/* ---- a barra de teste diz que é de teste -------------------------------- */
/* =============================================================================
A CONTA, REORGANIZADA EM 27/08/2026
-----------------------------------------------------------------------------
Antes eram sete links soltos numa fila só: "Minhas compras" e "Anunciar" lado
a lado como se fossem a mesma coisa. Reclamação do dono: "ta mt mal feito
isso". Agora são três grupos com nome, porque comprar e vender são vidas
diferentes da mesma pessoa.
============================================================================= */
/* O MENU DA CONTA E LISTA, NAO BARRA DE ABA (27/08/2026).
---------------------------------------------------------------------------
Eu tinha atendido o pedido de agrupar ("tem minhas pecas, minhas vendas e
anunciar nas mesmas abas (...) ta mt mal feito isso") mudando so o CODIGO:
os grupos nasceram dentro de `.tab`, que e' uma fila horizontal em caixa
alta. Na tela isso deu dez rotulos maiusculos do mesmo tamanho brigando
entre si, o nome do grupo com a mesma cara dos destinos, "Minhas vendas"
sobrando sozinha numa linha e tres riscos parecendo tres barras pela metade.
O dono viu e disse: "continua tudo ruim aqui horrivel mal organizado jogado".
Barra de aba e' para duas ou tres telas irmas que a pessoa alterna. Sete
destinos em tres assuntos e' MENU, e menu se desenha como lista: um item por
linha, alvo de toque inteiro, seta indicando que leva a outro lugar, e o
nome do grupo pequeno e quieto por cima, sem competir com os itens. */
.conta-menu { margin: 0 0 34px; }
.conta-menu nav + nav { margin-top: 26px; }
.conta-menu h2 {
font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-3); font-weight: 600; margin: 0 0 4px;
}
.conta-menu a {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; min-height: 52px; padding: 0 2px;
border-bottom: 1px solid var(--line-soft);
color: var(--text); font-size: 15px; text-decoration: none;
}
/* A seta e' desenhada com borda, e nao com o caractere ›, porque o › muda de
forma e de altura conforme a fonte que o aparelho tiver. */
.conta-menu a::after {
content: ''; width: 7px; height: 7px; flex: none; margin-right: 3px;
border-right: 1.5px solid var(--text-3); border-top: 1.5px solid var(--text-3);
transform: rotate(45deg);
}
.conta-menu a:hover { color: var(--accent-text); }
/* O ITEM ATUAL FICA BRANCO, e nao dourado: dourado sobre o fundo escuro e' mais
apagado que o branco, entao pintar so a cor fazia a linha onde a pessoa esta
parecer a desligada da lista. O sinal de "voce esta aqui" e' a marca a
esquerda, que some do resto. */
.conta-menu a.on { color: var(--text); box-shadow: inset 2px 0 0 var(--gold); padding-left: 12px; }
/* ENDERECO SALVO E' LINHA QUE SE ESCOLHE, e nao caixa de leitura.
Antes a tela listava os enderecos como texto e mantinha os oito campos do
formulario abertos embaixo, para sempre. */
.end-linha {
display: flex; gap: 12px; align-items: flex-start; width: 100%;
min-height: 56px; padding: 15px 16px; margin-bottom: 10px;
background: none; border: 1px solid var(--line); border-radius: 14px;
color: var(--text-2); font: inherit; font-size: 14px; text-align: left;
cursor: pointer;
}
.end-linha:hover { border-color: var(--gold-dim); }
.end-linha.on { border-color: var(--gold); }
.end-texto b { display: block; color: var(--text); font-weight: 500; margin-bottom: 3px; }
.end-marca {
width: 18px; height: 18px; border-radius: 50%; flex: none; margin-top: 1px;
border: 1px solid var(--line);
}
.end-linha.on .end-marca {
border-color: var(--gold);
background: radial-gradient(circle at center, var(--gold) 0 4.5px, transparent 4.5px);
}
/* A FAIXA DE ABAS DE UM PAR (Comprar: compras e favoritos; Vender: pecas e
vendas). Ela ocupa o lugar do rotulo de secao que estava ali, entao nao
acrescenta linha na tela: o que era enfeite virou caminho. */
.conta-seg { display: flex; gap: 6px; margin: 0 0 18px; }
.conta-seg a {
flex: 1; min-height: 44px; padding: 0 12px;
display: flex; align-items: center; justify-content: center; text-align: center;
border: 1px solid var(--line); border-radius: 999px;
color: var(--text-2); font-size: 13px; text-decoration: none; line-height: 1.2;
}
.conta-seg a:hover { color: var(--accent-text); }
.conta-seg a.on {
color: var(--text); border-color: var(--gold);
background: color-mix(in srgb, var(--gold) 14%, transparent);
}
/* A VOLTA, nas sete telas de dentro da conta.
Ela faz dois trabalhos numa linha so: diz em que conta a pessoa esta (era o
que sumia quando ela trocava de tela, reclamacao do dono em 27/08/2026) e e'
o caminho de volta para o menu. */
.volta-conta {
display: flex; align-items: center; gap: 10px;
min-height: 44px; margin-bottom: 16px;
color: var(--text-3); font-size: 13px; text-decoration: none;
}
.volta-conta::before {
content: ''; width: 7px; height: 7px; flex: none;
border-left: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
transform: rotate(45deg);
}
.volta-conta .avatar { width: 28px; height: 28px; font-size: 12px; }
.volta-conta:hover { color: var(--accent-text); }
.volta-conta:hover::before { border-color: var(--accent-text); }
/* O ACEITE DOS TERMOS, com caixa de marcar (27/08/2026).
Alvo de toque grande de propósito: a caixa sozinha tem 16px, e o rótulo
inteiro é clicável, então o alvo real é a linha toda. */
.aceite {
display: flex; gap: 11px; align-items: flex-start;
margin: 4px 0 16px; padding: 12px 14px;
border: 1px solid var(--line); cursor: pointer;
font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.aceite:hover { border-color: var(--gold-dim); }
.aceite input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.aceite a { color: var(--gold-soft); }
/* PRIVACIDADE FORA DO CAMINHO, MAS NÃO ESCONDIDA (27/08/2026).
O texto explicativo virou uma linha que abre; os botões de baixar dados e
encerrar conta continuam dentro, porque são direito da LGPD e não decoração. */
.privacidade {
border: 1px solid var(--line-soft);
margin-top: 34px; padding: 0 18px;
}
.privacidade > summary {
cursor: pointer; padding: 14px 0; list-style: none;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
color: var(--text-3); font-weight: 600;
}
.privacidade > summary::-webkit-details-marker { display: none; }
.privacidade > summary::after { content: ' +'; color: var(--gold-dim); }
.privacidade[open] > summary::after { content: ' \2212'; }
.privacidade > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.privacidade-corpo { padding-bottom: 20px; }
.privacidade-corpo p { font-size: 13.5px; color: var(--text-2); margin: 0; line-height: 1.6; }
/* AJUDA DE CAMPO: uma linha, colada ao campo que ela explica.
Régua de 27/08/2026 (reference/07-como-escrever-tela.md): a frase responde a
pergunta silenciosa que a pessoa faz ANTES de digitar, e por isso ela fica
embaixo do campo e não no espaço reservado, que some quando ela começa. */
.ajuda { font-size: 12.5px; color: var(--text-3); margin: 6px 0 0; line-height: 1.45; }
/* ---- ALVO DE TOQUE DE LINK SOLTO ----------------------------------------
MEDIDO EM 27/08/2026, no viewport de 375px, com a régua do WCAG 2.2 AA
(24x24 CSS px como mínimo). Três links de navegação estavam abaixo dela:
/entrar "Criar uma conta" 90x17
/entrar "Esqueci a senha" 91x17
/carrinho o nome da vendedora 255x23
/alertas "2 peças batem agora" 127x16
Os dois de cima são os que mais doem: são as ÚNICAS saídas da tela de
entrar, e a tela de entrar é o portão de compras, peças, vendas e conta.
Quem erra o toque conclui que o site não responde.
O CONSERTO NÃO MUDA O DESENHO. Padding com margem negativa do mesmo
tamanho: a área que o dedo alcança cresce, e nada anda de lugar na tela. É
a mesma técnica que o `.por-que-protecao` já usa aqui em cima.
FICOU DE FORA, DE PROPÓSITO: link no meio de frase corrida, como o
"anuncie" da tela de marcas (44x14). Ali a área de toque de 24px passaria
por cima da linha de cima e da de baixo, e num parágrafo com dois links em
linhas seguidas o dedo abriria o link errado. Alvo pequeno é ruim; alvo
que abre outra coisa é pior. Esses continuam pequenos e estão anotados. */
.hint-acoes a,
.alerta-agora a,
.bloco-vendedora-nome {
display: inline-block;
padding: 6px 4px;
margin: -6px -4px;
}
/* A fileira de ações tem `gap`, e o padding acima come parte dele: sem isto os
dois links encostam um no outro e o dedo não sabe qual pegou. */
.hint-acoes { gap: 6px 22px !important; }