/* Fontes servidas pelo proprio site: Bodoni Moda e Archivo (SIL Open Font License).
Antes vinham do fonts.googleapis.com, e o CSS de la bloqueia a renderizacao —
toda pagina esperava a internet responder antes de aparecer. */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 300;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(../fonts/Archivo-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/BodoniModa-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/BodoniModa-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/BodoniModa-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/BodoniModa-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/BodoniModa-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Bodoni Moda';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/BodoniModa-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =========================================================
NUANCE · Alta perfumaria
Tokens de cor e tipografia. Mexer aqui muda o site inteiro.
========================================================= */
:root {
--preto: #0b0a09;
--preto-suave: #121110;
--carvao: #171512;
--borda: rgba(233, 224, 209, 0.13);
--borda-forte: rgba(233, 224, 209, 0.30);
/* acento cognac: âmbar queimado, no lugar do dourado de template */
--dourado: #b8763f;
--dourado-claro:#d59b62;
--creme: #ece4d8;
--texto: #b6aea3;
--texto-fraco: #837b71;
--whatsapp: #25b558;
--whatsapp-luz: #2ecc63;
/* vermelho de desconto: forte o bastante para saltar no fundo escuro */
--vermelho: #e04b3a;
--serifa: "Bodoni Moda", "Didot", "Times New Roman", serif;
--sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
--max: 1280px;
--transicao: 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* trava o "text autosizing" do Safari: sem isto o iPhone pode recalcular
o tamanho do texto por conta própria e derrubar um campo de 16px para
baixo disso — que é justamente o gatilho do zoom ao focar */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--preto);
background-image: none;
background-attachment: fixed;
color: var(--texto);
font-family: var(--sans);
font-weight: 300;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* precisa vir depois do reset acima: sem esta linha, o "display: block"
do img anula o atributo hidden e a foto não some quando a ficha abre */
[hidden] { display: none; }
/* --- No iPhone, dois toques seguidos e próximos são lidos pelo Safari
como o gesto de ampliar a página. Trocar de miniatura (elas ficam a
~54px uma da outra) disparava exatamente isso: a página inteira dava
zoom e tudo aparecia gigante e cortado na lateral.
"manipulation" desliga só o duplo-toque; o zoom com dois dedos
continua funcionando normalmente, que é o que importa para quem
precisa aumentar para enxergar.
Vale para TUDO, e não só para os botões, porque "touch-action" não é
herdada: o dedo acerta a ![]()
que está dentro do botão da miniatura,
e declarar só no botão deixava essa brecha aberta. --- */
* {
touch-action: manipulation;
}
/* ============================ TOPO ============================ */
.topo {
position: relative;
display: flex;
justify-content: center;
align-items: center;
padding: 1.15rem clamp(1.15rem, 4vw, 2.75rem);
text-align: center;
border-bottom: 1px solid var(--borda);
/* o header inteiro paira sobre o conteúdo da página: sem isto o painel
do menu abre atrás dos frascos do banner e dos botões (que têm
z-index próprio), e não dá para clicar em nada */
z-index: 50;
}
/* a marca fica centralizada na barra inteira */
.topo__interno {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
text-align: center;
}
/* --- o hambúrguer sai do fluxo do flex, senão centralizar a marca
levando em conta a largura dele fica torto; fica ancorado no
canto direito da barra independente do texto da marca --- */
.topo__direita {
position: absolute;
top: 0;
bottom: 0;
right: clamp(1.15rem, 4vw, 2.75rem);
display: flex;
align-items: center;
/* centraliza pelo flex, não por transform: "transform" cria um contexto
de empilhamento e prenderia o z-index do painel dentro destes 40px */
}
/* --- login e cadastro moraram no header; agora abrem o painel do
menu, na frente de tudo. Os dois são vazados de propósito: o único
dourado cheio do painel é o "Ver a coleção", logo abaixo do fio --- */
.menu-painel .acesso {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-bottom: 0.6rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--borda);
}
.acesso__botao {
display: block;
width: 100%;
padding: 0.85rem 0.9rem;
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: var(--texto);
border: 1px solid var(--borda-forte);
transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
.acesso__botao:hover {
color: var(--creme);
border-color: var(--dourado);
background: rgba(201, 168, 106, 0.1);
}
/* dourado cheio sobre o preto. Hoje nenhum item de acesso usa isso —
liga de volta pondo "destaque": true no item, no products.json */
.acesso__botao--destaque {
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border-color: var(--dourado);
font-weight: 500;
}
.acesso__botao--destaque:hover {
color: var(--preto);
background: linear-gradient(180deg, #f3e4c2, var(--dourado-claro));
border-color: var(--dourado-claro);
}
.acesso__botao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
/* ------------------------ MENU HAMBÚRGUER ------------------------ */
.menu-alternador {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
padding: 0;
background: transparent;
border: 1px solid var(--borda-forte);
cursor: pointer;
transition: border-color var(--transicao), background var(--transicao);
}
.menu-alternador:hover {
border-color: var(--dourado);
background: rgba(201, 168, 106, 0.08);
}
.menu-alternador:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.menu-alternador__linha {
width: 18px;
height: 1px;
background: var(--creme);
transition: transform var(--transicao), opacity var(--transicao);
}
/* as três barras viram um X quando o painel está aberto */
.menu-alternador--aberto .menu-alternador__linha:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-alternador--aberto .menu-alternador__linha:nth-child(2) { opacity: 0; }
.menu-alternador--aberto .menu-alternador__linha:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* --- painel que desce sob o botão --- */
.menu-painel {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: min(300px, calc(100vw - 2.4rem));
padding: 0.6rem;
background: linear-gradient(165deg, var(--carvao), var(--preto-suave));
border: 1px solid var(--borda-forte);
box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.85);
opacity: 0;
transform: translateY(-8px);
transition: opacity 220ms ease, transform 220ms ease;
z-index: 40;
}
.menu-painel--aberto {
opacity: 1;
transform: translateY(0);
}
.menu-painel__colecao {
display: block;
padding: 0.85rem 0.9rem;
margin-bottom: 0.4rem;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border: 1px solid var(--dourado);
transition: background var(--transicao);
}
.menu-painel__colecao:hover { background: linear-gradient(180deg, #f3e4c2, var(--dourado-claro)); }
.menu-painel__colecao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.menu-painel__lista { display: flex; flex-direction: column; }
/* dentro do painel os links ficam em coluna, um por linha — o fio embaixo
do texto e o losango separador eram pensados para uma lista horizontal */
.menu-painel__lista .banner__link {
padding: 0.85rem 0.9rem;
color: var(--texto);
border-bottom: 1px solid var(--borda);
}
.menu-painel__lista .banner__link:last-child { border-bottom: none; }
.menu-painel__lista .banner__link::after,
.menu-painel__lista .banner__link + .banner__link::before {
display: none;
}
.menu-painel__lista .banner__link:hover,
.menu-painel__lista .banner__link.is-atual {
color: var(--dourado-claro);
background: rgba(201, 168, 106, 0.08);
}
@media (max-width: 620px) {
.menu-painel { width: min(280px, calc(100vw - 2rem)); }
}
/* no celular a marca encolhe um pouco, para sobrar respiro nas
laterais em relação ao hambúrguer ancorado no canto */
@media (max-width: 620px) {
.topo { padding: 0.85rem 1rem; }
.topo__nome { font-size: 1.25rem; letter-spacing: 0.12em; }
.topo__assinatura { font-size: 0.5rem; letter-spacing: 0.26em; }
}
/* "Olfativa" assumiu a linha de baixo da marca; manter "Alta perfumaria"
junto deixaria o topo com três linhas de texto. Ela continua no rodapé,
onde há espaço. */
.topo__assinatura { display: none; }
/* --- a marca em duas linhas: "NUANCE" em destaque, "OLFATIVA" menor
logo abaixo. As duas palavras formam um bloco só, por isso o
vira a caixa e cada palavra tem o seu próprio tamanho. --- */
.topo__nome {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.2em;
margin: 0;
font-family: var(--serifa);
font-weight: 500;
/* tamanho de referência do bloco: as duas palavras crescem juntas */
font-size: clamp(1.5rem, 3.4vw, 1.9rem);
line-height: 1;
color: var(--creme);
}
.topo__marca {
font-size: 1em;
letter-spacing: 0.16em;
text-transform: uppercase;
/* o espaçamento entre letras sobra depois da última: sem isto a
palavra fica visivelmente fora do centro */
text-indent: 0.16em;
}
.topo__sobrenome {
font-family: var(--sans);
font-weight: 400;
font-size: 0.42em;
letter-spacing: 0.4em;
text-transform: uppercase;
text-indent: 0.4em;
color: var(--dourado);
}
/* nas páginas internas o nome vira link para a home */
.topo__link {
color: inherit;
text-decoration: none;
-webkit-text-fill-color: inherit;
}
.topo__link:focus-visible { outline: 2px solid var(--dourado); outline-offset: 6px; }
/* Precisa vir DEPOIS da regra base: havia um bloco igual lá em cima, antes
dela, e por isso o nome nunca encolhia no celular. Com "Nuance Olfativa"
isso deixou de ser detalhe — em 320px o nome batia no hambúrguer. */
/* Precisa vir DEPOIS da regra base: havia um bloco igual lá em cima, antes
dela, e por isso o nome nunca encolhia no celular.
Sozinha, "Nuance" é curta e aguenta ficar grande até em tela de 320px —
é ela que tem de puxar o olho. */
@media (max-width: 620px) {
.topo__nome { font-size: clamp(1.4rem, 6.2vw, 1.75rem); }
}
.topo__chamada { display: none; }
/* =========================== BANNER =========================== */
.banner {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
align-items: end;
gap: clamp(1.5rem, 4vw, 3.5rem);
min-height: clamp(320px, 56vh, 520px);
padding: clamp(3rem, 7vw, 5rem) clamp(1.15rem, 4vw, 2.75rem) clamp(2.5rem, 5vw, 3.5rem);
overflow: hidden;
text-align: left;
border-bottom: 1px solid var(--borda);
}
/* camadas de luz dourada + textura fina, tudo em CSS */
.banner__fundo {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 46% 78% at 82% 28%, rgba(184, 118, 63, 0.20), transparent 68%),
linear-gradient(100deg, #0b0a09 42%, #17120e 100%);
}
.banner__moldura {
position: relative;
width: 100%;
max-width: 38rem;
margin-right: auto;
padding: 0;
border: none;
background: none;
}
/* --- vitrine de frascos, à direita do texto --- */
.banner__vitrine {
position: relative;
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(0.4rem, 1.6vw, 1.4rem);
height: clamp(210px, 30vw, 340px);
padding-bottom: 1.4rem;
}
/* a bancada onde os frascos se apoiam */
.banner__vitrine::before {
content: "";
position: absolute;
left: 2%;
right: 2%;
bottom: 1.4rem;
height: 1px;
background: linear-gradient(90deg,
transparent, rgba(233, 224, 209, 0.34) 22%, rgba(233, 224, 209, 0.34) 78%, transparent);
}
/* luz quente vindo de trás dos frascos */
.banner__vitrine::after {
content: "";
position: absolute;
left: 50%;
bottom: 1.4rem;
width: 92%;
height: 78%;
transform: translateX(-50%);
background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(184, 118, 63, 0.26), transparent 72%);
pointer-events: none;
z-index: 0;
}
.frasco {
position: relative;
z-index: 1;
height: var(--altura, 90%);
margin: 0;
display: flex;
align-items: flex-end;
/* os arquivos têm ~3,4% de área transparente abaixo do frasco;
sem isso ele fica pairando acima da bancada */
transform: translateY(3.4%);
}
/* quem flutua é este embrulho — o .frasco por fora fica parado */
.frasco__voo {
display: flex;
align-items: flex-end;
height: 100%;
animation: flutuarFrasco 4.6s ease-in-out infinite;
}
.frasco img {
height: 100%;
width: auto;
object-fit: contain;
filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.55));
}
@keyframes flutuarFrasco {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}
/* cada frasco no seu próprio compasso — subindo e descendo juntos
ficaria com cara de bloco único, não de objetos flutuando de verdade */
.banner__vitrine .frasco:nth-child(1) .frasco__voo { animation-duration: 4.2s; animation-delay: -0.6s; }
.banner__vitrine .frasco:nth-child(2) .frasco__voo { animation-duration: 5.1s; animation-delay: -2.1s; }
.banner__vitrine .frasco:nth-child(3) .frasco__voo { animation-duration: 4.7s; animation-delay: -0.3s; }
.banner__vitrine .frasco:nth-child(4) .frasco__voo { animation-duration: 5.4s; animation-delay: -3.4s; }
.banner__vitrine .frasco:nth-child(5) .frasco__voo { animation-duration: 4.4s; animation-delay: -1.8s; }
/* sombra de contato: aterra o frasco na bancada */
.frasco::after {
content: "";
position: absolute;
left: 50%;
bottom: 3.4%; /* acompanha a base real do frasco, não a borda do arquivo */
width: 116%;
height: 15px;
transform: translateX(-50%);
background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 70%);
pointer-events: none;
}
@media (max-width: 900px) {
.banner { grid-template-columns: 1fr; }
.banner__vitrine { height: clamp(170px, 34vw, 220px); justify-content: flex-start; }
}
/* No celular os frascos ficam — são eles que vendem. Só encolhem e
passam a servir de base para o texto, em vez de sumir. */
@media (max-width: 560px) {
.banner {
grid-template-columns: 1fr;
gap: 0;
min-height: 0;
padding: 2rem 1.15rem 0;
}
.banner__titulo { font-size: 1.75rem; }
.banner__etiqueta { margin-bottom: 1rem; }
.banner__marca { margin-top: 1.1rem; }
.banner__acoes { margin-top: 1.4rem; gap: 0.9rem 1.2rem; }
.banner__botao { width: 100%; text-align: center; }
.banner__vitrine {
display: flex;
height: 200px;
margin-top: 1.5rem;
padding-bottom: 0;
gap: 0.25rem;
}
.banner__vitrine::before { bottom: 0; left: 0; right: 0; }
.banner__vitrine::after { bottom: 0; width: 100%; }
.frasco::after { height: 10px; }
}
/* fio interno, para dar o ar de placa gravada */
.banner__etiqueta {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 0 0 1.4rem;
font-size: 0.6rem;
letter-spacing: 0.34em;
text-transform: uppercase;
color: var(--dourado-claro);
}
.banner__etiqueta::before {
content: "";
width: 34px;
height: 1px;
background: var(--dourado);
}
.banner__titulo {
margin: 0;
font-family: var(--serifa);
/* peso 500 e tracking 0.03em: o mesmo tratamento do nome dos perfumes.
Em 300 o traço fino sumia no fundo escuro e parecia outra fonte. */
font-weight: 500;
/* o piso fica acima de 1.75rem para o título nunca ficar menor
que o nome dos perfumes em telas estreitas */
font-size: clamp(1.9rem, 4.6vw, 2.8rem);
line-height: 1.26;
letter-spacing: 0.03em;
color: var(--creme);
text-wrap: balance; /* divide as linhas em blocos parecidos */
}
.banner__marca {
margin: 1.5rem 0 0.2rem;
font-family: var(--sans);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--creme);
}
.banner__frase {
margin: 0;
font-family: var(--serifa);
font-style: italic;
font-size: clamp(0.98rem, 2.2vw, 1.15rem);
color: var(--texto-fraco);
}
.banner__botao {
position: relative;
overflow: hidden;
display: inline-block;
padding: 0.9rem 2.3rem;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 300;
letter-spacing: 0.26em;
text-transform: uppercase;
text-decoration: none;
color: var(--dourado-claro);
border: 1px solid var(--borda-forte);
transition: color var(--transicao), background var(--transicao), border-color var(--transicao);
}
.banner__botao:hover {
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border-color: var(--dourado);
}
.banner__botao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
/* --- botão principal + links secundários --- */
.banner__acoes {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.8rem;
margin-top: 2.2rem;
}
.banner__link {
position: relative;
font-family: var(--sans);
font-size: 0.68rem;
font-weight: 300;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
color: var(--texto-fraco);
padding-bottom: 0.25rem;
transition: color var(--transicao);
}
/* fio dourado que cresce no hover */
.banner__link::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--dourado);
transform: scaleX(0);
transition: transform var(--transicao);
}
.banner__link:hover { color: var(--dourado-claro); }
.banner__link:hover::after { transform: scaleX(1); }
.banner__link.is-atual { color: var(--dourado-claro); }
.banner__link.is-atual::after { transform: scaleX(1); opacity: 0.5; }
.banner__link:focus-visible { outline: 2px solid var(--dourado); outline-offset: 4px; }
/* separador entre os links */
.banner__link + .banner__link::before {
content: "";
position: absolute;
left: -0.7rem;
top: 50%;
width: 3px; height: 3px;
margin-top: -2px;
transform: rotate(45deg);
border: 1px solid var(--borda-forte);
}
/* ================== CONVITE DE PRIMEIRA VISITA ================== */
.convite {
width: min(420px, calc(100vw - 2.5rem));
max-width: none;
margin: auto; /* centraliza e afasta das bordas no celular */
padding: clamp(2rem, 5vw, 2.8rem) clamp(1.5rem, 4vw, 2.4rem) clamp(1.6rem, 4vw, 2rem);
text-align: left;
color: var(--texto);
background:
radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201, 168, 106, 0.16), transparent 70%),
linear-gradient(170deg, #16130e, #0b0a08);
border: 1px solid var(--borda-forte);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.95);
}
.convite::backdrop {
background: rgba(6, 5, 4, 0.78);
backdrop-filter: blur(3px);
}
.convite[open] { animation: surgirConvite 420ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes surgirConvite {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* a área de toque é maior que o "×" desenhado: com 28px de alvo o dedo
errava e o cliente ficava preso na caixa de boas-vindas */
.convite__fechar {
position: absolute;
top: 0.15rem; right: 0.35rem;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
font-size: 1.6rem;
line-height: 1;
color: var(--texto-fraco);
background: none;
border: none;
cursor: pointer;
transition: color var(--transicao);
}
.convite__fechar:hover { color: var(--dourado-claro); }
.convite__fechar:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
/* vermelho: é o que o olho lê como desconto. Em dourado, no meio de um
site todo dourado, o número passava por enfeite */
.convite__selo {
margin: 0 0 0.5rem;
font-family: var(--serifa);
font-weight: 600;
font-size: clamp(2.4rem, 8vw, 3.2rem);
line-height: 1;
color: var(--vermelho);
}
.convite__titulo {
margin: 0;
font-family: var(--serifa);
font-weight: 500;
font-size: clamp(1.25rem, 4vw, 1.5rem);
line-height: 1.3;
letter-spacing: 0.03em;
color: var(--creme);
text-wrap: balance;
}
.convite__texto {
margin: 0 0 1.6rem;
font-size: 0.92rem;
line-height: 1.65;
color: var(--texto);
text-wrap: pretty;
}
/* mesmo verde e mesmo formato do botão de comprar: é o botão que leva ao
cadastro, então vale ter a mesma cara do que o cliente vai reencontrar
na hora de fechar o pedido */
.convite__botao {
position: relative;
overflow: hidden;
display: block;
padding: 1rem 1.4rem;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
color: #fff;
background: var(--whatsapp);
border: 1px solid transparent;
border-radius: 999px;
box-shadow: 0 10px 22px -10px rgba(37, 181, 88, 0.55);
transition: background var(--transicao), box-shadow var(--transicao);
}
.convite__botao:hover {
background: var(--whatsapp-luz);
box-shadow: 0 14px 30px -10px rgba(37, 181, 88, 0.7);
}
.convite__botao:focus-visible { outline: 2px solid var(--whatsapp-luz); outline-offset: 3px; }
/* o texto precisa ficar acima do brilho que atravessa o botão */
.convite__botao > * { position: relative; z-index: 1; }
.convite__recusa {
margin: 1.1rem 0 0;
display: block;
border-bottom-color: transparent;
color: var(--texto-fraco);
}
.convite__recusa:hover { color: var(--creme); }
/* selo do desconto na ficha de cadastro */
.promo {
display: flex;
align-items: center;
gap: 0.9rem;
margin: 0 0 1.8rem;
padding: 0.9rem 1.1rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--creme);
background: rgba(201, 168, 106, 0.08);
border: 1px solid var(--borda-forte);
}
.promo__selo {
flex-shrink: 0;
font-family: var(--serifa);
font-size: 1.5rem;
color: var(--dourado-claro);
}
/* ====================== PÁGINA DE CONTATO ====================== */
.contato {
max-width: var(--max);
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(4rem, 9vw, 7rem);
}
.contato__grade {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 1.9fr);
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.contato__subtitulo {
margin: 0 0 1rem;
font-family: var(--sans);
font-weight: 400;
font-size: 0.82rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--creme);
}
.contato__texto {
margin: 0 0 1.8rem;
font-family: var(--serifa);
font-size: 1.05rem;
line-height: 1.6;
color: var(--texto-fraco);
}
.contato__dados {
margin: 0;
padding-top: 1.4rem;
border-top: 1px solid var(--borda);
}
.contato__dados dt {
font-size: 0.62rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--texto-fraco);
}
.contato__dados dd {
margin: 0.25rem 0 1.1rem;
font-family: var(--serifa);
font-size: 1.08rem;
color: var(--creme);
}
.contato__dados a {
color: var(--dourado-claro);
text-decoration: none;
border-bottom: 1px solid var(--borda-forte);
padding-bottom: 2px;
transition: color var(--transicao), border-color var(--transicao);
}
.contato__dados a:hover { color: var(--creme); border-color: var(--dourado); }
.contato__dados a:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
/* --- campos --- */
.formulario { display: flex; flex-direction: column; }
.campo { margin-bottom: 1.5rem; }
.campo__rotulo {
display: block;
margin-bottom: 0.6rem;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--creme);
}
.campo__opcional {
margin-left: 0.35rem;
letter-spacing: 0.14em;
color: var(--texto-fraco);
}
.campo__caixa {
width: 100%;
padding: 0.95rem 1.1rem;
font-family: var(--sans);
/* 16px é o mínimo que impede o iPhone de dar zoom ao focar o campo.
Antes isso só valia dentro do @media de 760px — e o iPhone deitado
passa dos 900px de largura, então no modo paisagem o campo voltava
a 15,2px e o zoom voltava junto. Agora vale em qualquer tela. */
font-size: 1rem;
font-weight: 300;
color: var(--creme);
background: rgba(9, 8, 7, 0.6);
border: 1px solid var(--borda);
border-radius: 0;
transition: border-color var(--transicao), background var(--transicao);
-webkit-appearance: none;
appearance: none;
}
.campo__caixa::placeholder { color: var(--texto-fraco); opacity: 0.6; }
.campo__caixa:hover { border-color: var(--borda-forte); }
.campo__caixa:focus {
outline: none;
border-color: var(--dourado);
background: rgba(201, 168, 106, 0.05);
box-shadow: 0 0 0 1px rgba(201, 168, 106, 0.25);
}
.campo__caixa--alta {
min-height: 150px;
resize: vertical;
font-family: var(--sans);
line-height: 1.6;
}
.campo__caixa--erro { border-color: #c98a6a; }
.campo__erro {
margin: 0.5rem 0 0;
font-size: 0.8rem;
color: #c98a6a;
}
.formulario .botao-whats { margin-top: 0.4rem; }
.formulario__aviso {
margin: 1rem 0 0;
font-size: 0.8rem;
line-height: 1.5;
color: var(--texto-fraco);
}
.formulario__aviso--ok { color: var(--dourado-claro); }
/* --- ficha de cadastro --- */
.bloco {
margin: 0 0 1.8rem;
padding: 0;
border: none;
}
.bloco__titulo {
padding: 0 0 1.1rem;
font-size: 0.66rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--dourado);
}
.campos-linha {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 1rem;
}
.campos-linha--rua { grid-template-columns: 2.4fr 1fr; }
.campos-linha--cidade { grid-template-columns: 2.4fr 1fr; }
.campos-linha--cep {
grid-template-columns: minmax(0, 190px) 1fr;
align-items: center;
gap: 0 1.2rem;
}
.campo__dica {
margin: 0 0 1.5rem;
font-size: 0.8rem;
line-height: 1.5;
color: var(--texto-fraco);
}
.marcador {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin: 0 0 1.6rem;
font-size: 0.88rem;
line-height: 1.5;
color: var(--texto);
cursor: pointer;
}
.marcador input {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 0.1rem;
accent-color: var(--dourado);
}
.aviso-privacidade {
padding: 1.2rem 1.1rem;
font-size: 0.84rem;
line-height: 1.6;
color: var(--texto-fraco);
background: rgba(201, 168, 106, 0.05);
border: 1px solid var(--borda);
}
.aviso-privacidade p { margin: 0 0 0.7rem; }
.aviso-privacidade p:last-of-type { margin-bottom: 0; }
.aviso-privacidade__titulo {
font-size: 0.62rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--dourado);
}
.botao-texto {
margin-top: 0.9rem;
/* o traço embaixo continua rente ao texto; o respiro é só área de toque */
padding: 0.8rem 0;
font-family: var(--sans);
font-size: 0.8rem;
color: var(--dourado-claro);
text-align: left;
background: none;
border: none;
border-bottom: 1px solid var(--borda-forte);
cursor: pointer;
transition: color var(--transicao);
}
.botao-texto:hover { color: var(--creme); }
.botao-texto:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
@media (max-width: 760px) {
.contato__grade { grid-template-columns: 1fr; gap: 2.2rem; }
.contato__texto { margin-bottom: 1.2rem; }
}
@media (max-width: 560px) {
.campos-linha,
.campos-linha--rua,
.campos-linha--cidade,
.campos-linha--cep { grid-template-columns: 1fr; gap: 0; }
}
/* ================== PÁGINA DE TEXTO / FAQ ================== */
.texto {
max-width: 860px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem clamp(4rem, 9vw, 7rem);
}
/* três números-chave no alto, para quem não quer ler tudo */
.resumo {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
padding: 0;
list-style: none;
background: var(--borda);
border: 1px solid var(--borda);
}
.resumo__item {
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.4rem 1.1rem;
text-align: left;
background: var(--preto-suave);
}
.resumo__numero {
font-family: var(--serifa);
font-size: clamp(1.2rem, 3vw, 1.6rem);
color: var(--dourado-claro);
}
.resumo__rotulo {
font-size: 0.72rem;
line-height: 1.45;
letter-spacing: 0.08em;
color: var(--texto-fraco);
text-wrap: balance;
}
/* --- perguntas em sanfona --- */
.perguntas { border-top: 1px solid var(--borda); }
.pergunta { border-bottom: 1px solid var(--borda); }
.pergunta__titulo {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.15rem 0.2rem;
font-family: var(--serifa);
font-size: 1.2rem;
color: var(--creme);
cursor: pointer;
list-style: none;
transition: color var(--transicao);
}
.pergunta__titulo::-webkit-details-marker { display: none; }
.pergunta__titulo:hover { color: var(--dourado-claro); }
.pergunta__titulo:focus-visible {
outline: 2px solid var(--dourado);
outline-offset: 2px;
}
/* cruz que vira traço quando abre */
.pergunta__titulo::after {
content: "";
flex-shrink: 0;
width: 13px;
height: 13px;
margin-left: auto;
background:
linear-gradient(var(--dourado), var(--dourado)) center/13px 1px no-repeat,
linear-gradient(var(--dourado), var(--dourado)) center/1px 13px no-repeat;
transition: transform var(--transicao);
}
.pergunta[open] .pergunta__titulo { color: var(--dourado-claro); }
.pergunta[open] .pergunta__titulo::after {
background:
linear-gradient(var(--dourado), var(--dourado)) center/13px 1px no-repeat;
transform: rotate(180deg);
}
.pergunta__resposta {
padding: 0 0.2rem 1.4rem;
max-width: 62ch;
}
.pergunta__resposta p {
margin: 0 0 0.9rem;
font-size: 0.95rem;
line-height: 1.72;
color: var(--texto);
}
.pergunta__resposta p:last-child { margin-bottom: 0; }
.pergunta__resposta strong {
font-weight: 400;
color: var(--dourado-claro);
}
.pergunta__lista {
margin: 0 0 0.9rem;
padding-left: 1.1rem;
list-style: none;
}
.pergunta__lista li {
position: relative;
margin-bottom: 0.35rem;
font-size: 0.95rem;
line-height: 1.6;
color: var(--texto);
}
/* losango dourado no lugar do marcador redondo do navegador */
.pergunta__lista li::before {
content: "";
position: absolute;
left: -1.1rem;
top: 0.62em;
width: 4px;
height: 4px;
transform: rotate(45deg);
background: var(--dourado);
}
.texto__rodape {
margin-top: clamp(2.5rem, 5vw, 3.5rem);
padding-top: clamp(2rem, 4vw, 2.8rem);
text-align: center;
border-top: 1px solid var(--borda);
}
.texto__rodape p {
margin: 0 0 1.2rem;
font-family: var(--serifa);
font-size: 1.15rem;
font-style: italic;
color: var(--texto-fraco);
}
@media (max-width: 620px) {
.resumo { grid-template-columns: 1fr; }
.pergunta__titulo { font-size: 1.08rem; }
}
/* ====================== PÁGINAS INTERNAS ====================== */
.pagina {
display: flex;
align-items: center;
justify-content: center;
min-height: 52vh;
padding: clamp(3rem, 8vw, 6rem) 1.5rem;
text-align: center;
}
.pagina__moldura {
position: relative;
max-width: 640px;
padding: clamp(2.2rem, 5vw, 3.4rem) clamp(1.4rem, 4vw, 3rem);
border: 1px solid var(--borda-forte);
background: rgba(9, 8, 7, 0.55);
}
.pagina__moldura::before {
content: "";
position: absolute;
inset: 7px;
border: 1px solid rgba(201, 168, 106, 0.16);
pointer-events: none;
}
.pagina__etiqueta {
margin: 0 0 1rem;
font-size: 0.64rem;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--dourado);
}
.pagina__titulo {
margin: 0 0 1.2rem;
font-family: var(--serifa);
font-weight: 500;
font-size: clamp(1.9rem, 4.6vw, 2.8rem);
line-height: 1.26;
letter-spacing: 0.03em;
color: var(--creme);
text-wrap: balance;
}
.pagina__texto {
margin: 0 auto 2rem;
max-width: 46ch;
font-family: var(--serifa);
font-size: 1.1rem;
font-style: italic;
color: var(--texto-fraco);
}
/* notebooks de tela baixa: comprime topo e banner para o conjunto
caber na primeira tela, sem precisar rolar */
/* telas baixas: o hero encolhe, já que a barra do topo é fina */
@media (min-width: 760px) and (max-height: 850px) {
.banner { min-height: 0; padding-top: 2.6rem; padding-bottom: 2.6rem; }
}
/* ========================== GARANTIAS ========================== */
.garantias {
border-bottom: 1px solid var(--borda);
background: linear-gradient(180deg, rgba(201, 168, 106, 0.04), transparent);
}
.garantias__lista {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1.2rem, 3vw, 2.5rem);
max-width: var(--max);
margin: 0 auto;
padding: clamp(2rem, 4vw, 3rem) 1.5rem;
list-style: none;
}
.garantia {
position: relative;
text-align: left;
padding: 0 clamp(0.3rem, 1.5vw, 1rem);
}
/* fio dourado separando as colunas */
.garantia + .garantia::before {
content: "";
position: absolute;
left: calc(clamp(1.2rem, 3vw, 2.5rem) / -2);
top: 12%;
bottom: 12%;
width: 1px;
background: linear-gradient(180deg, transparent, var(--borda-forte), transparent);
}
.garantia__icone {
width: 30px;
height: 30px;
margin-bottom: 0.85rem;
fill: none;
stroke: var(--dourado);
stroke-width: 1.1;
stroke-linecap: round;
stroke-linejoin: round;
}
.garantia__titulo {
margin: 0 0 0.4rem;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--creme);
}
.garantia__texto {
margin: 0;
font-family: var(--serifa);
font-size: 1rem;
line-height: 1.45;
color: var(--texto-fraco);
text-wrap: balance;
}
@media (max-width: 860px) {
.garantias__lista { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.2rem; }
.garantia:nth-child(odd) + .garantia::before { left: -0.6rem; }
.garantia:nth-child(2n + 1)::before { display: none; }
}
/* no celular vira lista: ícone à esquerda, texto à direita.
Empilhado e centralizado ficava alto demais e jogava a vitrine para baixo. */
@media (max-width: 480px) {
.garantias__lista { grid-template-columns: 1fr; gap: 0; }
.garantia {
display: grid;
grid-template-columns: 26px 1fr;
column-gap: 1rem;
align-items: start;
padding: 1.05rem 0;
text-align: left;
}
.garantia__icone {
grid-row: span 2;
width: 26px; height: 26px;
margin: 0.15rem 0 0;
}
.garantia__texto { font-size: 0.95rem; }
.garantia + .garantia::before { display: none; }
.garantia + .garantia { border-top: 1px solid var(--borda); }
}
/* =========================== VITRINE =========================== */
.vitrine {
max-width: var(--max);
margin: 0 auto;
padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(4rem, 9vw, 7rem);
}
.vitrine__cabecalho {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem 2rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
padding-bottom: 1.1rem;
text-align: left;
border-bottom: 1px solid var(--borda);
}
.vitrine__legenda {
margin: 0;
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--texto-fraco);
}
/* --- botão do filtro, colado no título --- */
.vitrine__titulo-linha {
display: flex;
align-items: center;
gap: 0.7rem;
}
.filtro-abrir {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--creme);
background: transparent;
border: 1px solid var(--borda-forte);
border-radius: 999px;
cursor: pointer;
transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.filtro-abrir svg { width: 19px; height: 19px; }
.filtro-abrir:hover {
color: var(--dourado-claro);
border-color: var(--dourado);
background: rgba(201, 168, 106, 0.08);
}
.filtro-abrir:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; }
.filtro-abrir__contador {
position: absolute;
top: -5px;
right: -5px;
min-width: 17px;
padding: 0 0.25rem;
font-size: 0.6rem;
font-weight: 600;
line-height: 17px;
text-align: center;
color: var(--preto);
background: var(--dourado-claro);
border-radius: 999px;
}
/* --- fichas dos filtros ligados, acima da grade --- */
.filtro-ativos {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.7rem;
margin: -1rem 0 1.6rem;
}
.filtro-ativos__conta {
margin: 0;
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--texto-fraco);
}
.filtro-ativos__fichas { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtro-ficha {
padding: 0.35rem 0.7rem;
font-family: var(--sans);
font-size: 0.75rem;
color: var(--creme);
background: rgba(201, 168, 106, 0.1);
border: 1px solid var(--dourado);
border-radius: 999px;
cursor: pointer;
transition: background var(--transicao);
}
.filtro-ficha:hover { background: rgba(201, 168, 106, 0.2); }
.filtro-ficha span { color: var(--dourado-claro); margin-left: 0.15rem; }
.filtro-ativos__limpar {
padding: 0;
font-family: var(--sans);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--texto-fraco);
background: none;
border: none;
border-bottom: 1px solid var(--borda-forte);
cursor: pointer;
transition: color var(--transicao);
}
.filtro-ativos__limpar:hover { color: var(--creme); }
/* --- painel do filtro --- */
.filtro {
width: min(560px, 100%);
max-height: 88vh;
margin: auto auto 0;
padding: 0;
color: var(--texto);
background: linear-gradient(170deg, var(--carvao), var(--preto-suave));
border: 1px solid var(--borda-forte);
border-bottom: none;
box-shadow: 0 -20px 60px -25px rgba(0, 0, 0, 0.95);
}
.filtro::backdrop {
background: rgba(6, 5, 4, 0.72);
backdrop-filter: blur(3px);
}
.filtro[open] { animation: subirCarrinho 300ms cubic-bezier(0.22, 1, 0.36, 1); }
.filtro__topo {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.2rem 1.3rem 0.9rem;
border-bottom: 1px solid var(--borda);
}
.filtro__titulo {
margin: 0;
font-family: var(--serifa);
font-weight: 500;
font-size: 1.3rem;
letter-spacing: 0.04em;
color: var(--creme);
}
.filtro__fechar {
padding: 0.1rem 0.45rem;
font-size: 1.7rem;
line-height: 1;
color: var(--texto-fraco);
background: none;
border: none;
cursor: pointer;
}
.filtro__fechar:hover { color: var(--dourado-claro); }
.filtro__corpo {
max-height: 56vh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 0.3rem 1.3rem 1rem;
}
.filtro-grupo { padding: 1.05rem 0; border-bottom: 1px solid var(--borda); }
.filtro-grupo:last-child { border-bottom: none; }
.filtro-grupo__titulo {
margin: 0 0 0.7rem;
font-size: 0.62rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--dourado);
}
.filtro-grupo__opcoes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.filtro-opcao {
padding: 0.5rem 0.75rem;
font-family: var(--sans);
font-size: 0.78rem;
color: var(--texto);
background: transparent;
border: 1px solid var(--borda);
border-radius: 999px;
cursor: pointer;
transition: color var(--transicao), border-color var(--transicao), background var(--transicao);
}
.filtro-opcao:hover { color: var(--creme); border-color: var(--borda-forte); }
.filtro-opcao__n { font-size: 0.68rem; color: var(--texto-fraco); }
.filtro-opcao.is-marcada {
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border-color: var(--dourado);
font-weight: 500;
}
.filtro-opcao.is-marcada .filtro-opcao__n { color: rgba(11, 10, 9, 0.65); }
/* combinação que não sobraria nenhum perfume: continua clicável, mas
avisa antes do toque que o resultado seria vazio */
.filtro-opcao.is-vazia { opacity: 0.35; }
.filtro-opcao:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }
.filtro__rodape {
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--borda);
}
.filtro__limpar { flex-shrink: 0; }
.filtro__ver {
flex: 1;
padding: 0.9rem 1rem;
font-family: var(--sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border: 1px solid var(--dourado);
border-radius: 999px;
cursor: pointer;
transition: background var(--transicao);
}
.filtro__ver:hover { background: linear-gradient(180deg, #f3e4c2, var(--dourado-claro)); }
.filtro__ver:disabled { opacity: 0.45; cursor: not-allowed; }
/* botão de ordenar aceso quando não está no padrão da loja */
.filtro-abrir.is-ativo {
color: var(--preto);
background: linear-gradient(180deg, var(--dourado-claro), var(--dourado));
border-color: var(--dourado);
}
/* --- painel de busca: mesma casca do filtro, mas ancorado no topo ---
O filtro e o carrinho sobem do rodapé, e isso é bom para eles: são
listas de tocar. A busca não pode, porque ela abre o teclado. O
teclado do iPhone cobre quase metade de baixo da tela, o campo fica
embaixo dele, e aí o Safari tenta trazer o campo para a área visível.
Como o