/* Yanca Perfumaria, sistema visual "A Roseta".
A malha girih é a estrutura da página, nunca enfeite sobre ela.
Fundo branco, tinta quase preta, verde profundo como cor da casa e bronze
como única brasa. Display em didone de verdade, interface em grotesca. */
:root {
/* ---------- COR ----------
Marfim sustenta a página, tinta sustenta a autoridade comercial, e o
verde virou assinatura: ele aparece uma vez, com intenção, em vez de
voltar como fundo a cada duas seções. Bronze e rosa são brasa, não
material de construção.
Proporção de área pretendida: marfim 55, tinta 20, garrafa 15, taupe 7,
bronze e rosa 3.
Todo valor de cor da loja nasce aqui. Hexadecimal solto no meio de uma
regra é como a paleta apodrece: um dia alguém ajusta o token e metade
da página não acompanha. */
--marfim: #f7f4ef; /* o fundo da loja */
--branco: #ffffff; /* o cartão, e só ele */
--taupe: #e7e0d7; /* o poço da foto, e superfície de apoio */
--taupe-fundo: #ddd4c8;
--tinta: #141215; /* preto quente: tipografia, painel, ação */
--garrafa: #123b33; /* o verde da casa, em dose única */
--texto: #1a1819;
/* Medido contra a superfície clara mais escura da paleta, que é o taupe
fundo da faixa de kits: 6.50 no marfim, 5.44 no taupe, 4.86 no taupe
fundo. Estava em #66605c, que passava nos dois primeiros e reprovava no
terceiro, com 4.22. Continua a 2.48 de distância do texto principal, que
é o bastante para ler como secundário. */
--texto-2: #5c5754;
--sobre-escuro: #f7f4ef;
--sobre-escuro-2: rgba(247, 244, 239, 0.76);
/* O bronze de referência reprova como texto sobre marfim, 3.43. Fica para
fio, foco e detalhe, onde 3:1 basta. Para texto e para botão existe o
bronze escuro, medido em 4.57 nos dois sentidos. */
--bronze: #a97a4f;
/* Estava em #8f6743, medido só contra o marfim, onde dava 4.57. Só que ele
também cai em taupe e em taupe fundo, e lá dava 3.83 e 3.42: reprovava nas
duas superfícies mais escuras. Agora é medido contra a pior delas: 6.22 no
marfim, 5.21 no taupe e 4.65 no taupe fundo. */
--bronze-texto: #755436;
--rosa: #d8b8b5;
--erro: #9d2b2b;
--fio: rgba(20, 18, 21, 0.1);
--fio-forte: rgba(20, 18, 21, 0.26);
--fio-claro: rgba(247, 244, 239, 0.22);
--estrela: url("data:image/svg+xml,");
/* ---------- TIPOGRAFIA ----------
Newsreader é serifada editorial desenhada para tela, com eixo óptico:
ela cresce sem ficar frágil e encolhe sem fechar. Bodoni foi recusada
por ser exatamente a revista antiga que não se quer, e Fraunces por
puxar para o artesanal.
DM Sans opera tudo que é funcional. Faixa de peso de 400 a 700, latin-ext
para os acentos do português, e desenho geométrico com abertura humanista,
que é o que segura preço e nome de produto em corpo pequeno.
A display não pode cair em todo h2 e h3. Ela tem quatro endereços: o
palco, a campanha, a frase institucional e o convite. */
--face-display: 'Newsreader', 'Times New Roman', Georgia, serif;
--face-corpo: 'DM Sans', system-ui, -apple-system, sans-serif;
--face-leitura: 'DM Sans', system-ui, sans-serif;
--face-medida: 'DM Sans', system-ui, sans-serif;
/* Um token por papel, e nenhum título gigante só porque a tela cresceu:
o teto de cada clamp é o tamanho em que aquele texto ainda serve. */
--t-hero: clamp(31px, 4vw, 54px);
--t-editorial: clamp(26px, 3vw, 40px);
--t-prateleira: clamp(22px, 2.1vw, 29px);
--t-bloco: clamp(19px, 1.7vw, 23px);
--t-categoria: 16.5px;
--t-produto: 15px;
--t-preco: 19px;
--t-parcela: 12.5px;
--t-corpo: 16px;
--t-apoio: 15px;
--t-label: 11px;
--t-cta: 12.5px;
--t-rodape: 14px;
--label-espaco: 0.14em;
--peso-display: 400;
--tracking-display: -0.018em;
--entrelinha-display: 1.04;
--largura: 1400px;
--gutter: clamp(18px, 3.4vw, 48px);
--ritmo: clamp(40px, 4.6vw, 64px);
--ritmo-forte: clamp(56px, 6.2vw, 88px);
--gap-cartao: 16px;
--saida: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Transição entre páginas. O navegador faz o cruzamento sozinho na navegação
comum; quem não suporta simplesmente navega, sem quebrar nada. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
::view-transition-old(root) { animation: sumir 0.28s ease both; }
::view-transition-new(root) { animation: surgir 0.42s var(--saida) both; }
}
@keyframes sumir { to { opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: translateY(14px); } }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--fio-forte) var(--taupe); scrollbar-width: thin; }
body {
margin: 0;
background: var(--marfim);
color: var(--texto);
font-family: var(--face-corpo);
font-size: var(--t-corpo);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--rosa); color: var(--tinta); }
:where(input, textarea) { caret-color: var(--bronze); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--taupe); }
::-webkit-scrollbar-thumb { background: var(--fio-forte); }
::-webkit-scrollbar-thumb:hover { background: var(--texto-2); }
/* ---------- acessibilidade ----------
Visível só para leitor de tela. Sem clip-path a caixa de 1px ainda captura
o cursor em parte dos navegadores. */
.so-leitor {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
/* Pular para o conteúdo. Fica fora da tela até receber foco, e só então desce.
Sem ele, quem navega por teclado atravessa o letreiro, o menu inteiro e a
busca antes de chegar na vitrine, em toda página. */
.pular {
position: absolute; top: 0; left: var(--gutter); z-index: 95;
transform: translateY(-120%);
display: inline-flex; align-items: center; min-height: 44px;
padding: 0 24px; background: var(--tinta); color: var(--marfim);
font-size: 11px; font-weight: 600; letter-spacing: var(--label-espaco);
text-transform: uppercase;
transition: transform 0.3s var(--saida);
}
.pular:focus-visible { transform: translateY(0); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
/* O título nasce em sans. A serifada não pode cair sozinha em todo h2 e h3:
foi assim que ela acabou em "Rosto", "Cabelo" e nos dois portais, onde não
tem nada a dizer. Ela é convidada nome a nome, logo abaixo. */
h1, h2, h3, h4 {
font-family: var(--face-corpo);
font-optical-sizing: auto;
font-weight: 600;
letter-spacing: -0.028em;
line-height: 1.08;
text-wrap: balance;
margin: 0;
}
/* Os quatro endereços da display, e nenhum a mais: o palco, a campanha, a
frase da casa e o convite. São os momentos em que a loja fala por si; o
resto da página é comércio, e comércio fala em sans. */
.cena__titulo,
#campanha-titulo,
#casa-titulo,
.convite__dizer h2 {
font-family: var(--face-display);
font-weight: var(--peso-display);
font-optical-sizing: auto;
letter-spacing: var(--tracking-display);
line-height: var(--entrelinha-display);
}
.marca { font-weight: var(--peso-display); }
.envoltorio { max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
/* ---------- medida ---------- */
.medida {
font-family: var(--face-corpo);
font-size: var(--t-label);
font-weight: 500;
letter-spacing: var(--label-espaco);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
color: var(--texto-2);
}
.preco { letter-spacing: -0.015em; font-weight: 600; font-feature-settings: "lnum" 1; }
/* Texto de leitura. Corpo maior, entrelinha mais solta e medida curta: serifa
pede os três, e é isso que faz o parágrafo parecer escrito e não preenchido. */
.leitura {
font-family: var(--face-leitura);
font-optical-sizing: auto;
font-size: 18px;
line-height: 1.68;
letter-spacing: 0.002em;
max-width: 68ch;
} .faixa-kit p { font-family: var(--face-leitura); font-optical-sizing: auto; line-height: 1.62; }
/* ---------- amarração ---------- */
.amarracao { position: sticky; top: 0; z-index: 60; background: var(--marfim); }
/* A tarja recolhe por grid-template-rows, de 1fr para 0fr, e não por altura:
animar height ou padding repagina a cada quadro justamente enquanto a pessoa
rola, que é o pior momento possível para pedir recálculo de layout. */
.aviso-caixa { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--saida); background: var(--tinta); }
.amarracao.encolhida .aviso-caixa { grid-template-rows: 0fr; }
.aviso {
background: var(--tinta); color: var(--taupe);
text-align: center; padding: 9px 16px;
overflow: hidden; min-height: 0;
}
.aviso .medida { color: rgba(247, 244, 239, 0.82); }
/* ---------- letreiro ----------
A tarja deixa de ser texto parado e vira letreiro contínuo. É o único
movimento permanente da página, e é ele que diz de longe que a loja está
viva. Duas cópias idênticas correndo em sequência fazem o laço não ter
emenda; a animação é translate puro, então roda na GPU. */
.aviso { display: flex; overflow: hidden; gap: 0; padding-inline: 0; }
/* O único lugar que sobrou para a monoespaçada. Num letreiro que corre, o
passo igual entre as letras é o que dá o ritmo, e ali ela trabalha em vez
de posar. */
.letreiro span { font-family: var(--face-medida); font-size: 10.5px; letter-spacing: 0.14em; }
.letreiro { display: flex; flex: none; align-items: center; gap: 44px; padding-right: 44px; white-space: nowrap; }
.letreiro span { display: inline-flex; align-items: center; gap: 12px; }
.letreiro span::after { content: '◆'; font-size: 7px; opacity: 0.55; }
@media (prefers-reduced-motion: no-preference) {
/* O único lugar que sobrou para a monoespaçada. Num letreiro que corre, o
passo igual entre as letras é o que dá o ritmo, e ali ela trabalha em vez
de posar. */
.letreiro span { font-family: var(--face-medida); font-size: 10.5px; letter-spacing: 0.14em; }
.letreiro { animation: correr 38s linear infinite; }
.aviso:hover /* O único lugar que sobrou para a monoespaçada. Num letreiro que corre, o
passo igual entre as letras é o que dá o ritmo, e ali ela trabalha em vez
de posar. */
.letreiro span { font-family: var(--face-medida); font-size: 10.5px; letter-spacing: 0.14em; }
.letreiro { animation-play-state: paused; }
}
@keyframes correr { to { transform: translateX(-100%); } }
/* O contador da sacola pula quando um item entra. */
@keyframes pular { 0%, 100% { transform: scale(1) } 35% { transform: scale(1.55) } }
.sacola__conta.pulando { animation: pular 0.5s var(--saida); }
.amarracao__barra {
display: flex; align-items: center; gap: clamp(16px, 2.4vw, 36px);
min-height: 78px; border-bottom: 1px solid var(--fio);
}
/* Assinatura em dois andares, como Sephora e Natura fazem: o nome grande e
travado, a categoria miúda e muito espacejada embaixo. O espacejamento largo
também resolve a leitura do nome próprio, que precisa soar YAN ca. */
.marca { display: flex; flex-direction: column; gap: 4px; line-height: 1; white-space: nowrap; }
/* A assinatura fica na sans, e de propósito: logotipo não é título. A
serifada entrou para a voz editorial da loja, não para trocar a marca, e
serifar a assinatura mudaria a identidade em vez de refiná-la. */
.marca__nome {
font-family: var(--face-corpo);
font-weight: 600; font-size: clamp(19px, 1.85vw, 26px);
letter-spacing: 0.2em; text-transform: uppercase;
}
.marca__linha {
font-family: var(--face-corpo); font-size: 11px;
letter-spacing: 0.34em; text-transform: uppercase; color: var(--texto-2);
}
.rodape .marca__linha { color: rgba(247, 244, 239, 0.6); }
/* ---------- setas dos trilhos ---------- */
.trilho-caixa { position: relative; }
/* As setas saíram de cima do produto. Dentro do trilho elas sempre cobriam
alguma coisa, porque o trilho ocupa a largura inteira do contêiner e não
sobra margem onde pousar. No cabeçalho ficam livres, acessíveis e
alinhadas com a vitrine que comandam. */
.secao__setas { display: flex; gap: 6px; flex: none; }
.seta {
position: static; z-index: 5;
width: 46px; height: 46px; display: grid; place-items: center;
background: var(--branco); border: 1px solid var(--tinta); color: var(--tinta);
cursor: pointer; transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.seta:hover { background: var(--tinta); color: var(--taupe); }
.seta[disabled] { opacity: 0.25; cursor: default; }
.seta--esq { left: -23px; }
.seta--dir { right: -23px; }
.seta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.6; fill: none; }
@media (max-width: 1100px) { .seta { display: none; } }
/* ---------- pagamentos no rodapé ---------- */
.pagamentos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pagamento {
border: 1px solid rgba(247, 244, 239, 0.28); padding: 7px 11px;
font-family: var(--face-corpo); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
color: rgba(247, 244, 239, 0.78);
}
.navegacao { display: flex; gap: clamp(14px, 1.8vw, 28px); }
.navegacao a {
font-family: var(--face-corpo); font-size: 11.5px;
letter-spacing: 0.12em; text-transform: uppercase;
padding-block: 8px; position: relative;
}
.navegacao a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
background: var(--bronze); transform: scaleX(0); transform-origin: left;
transition: transform 0.5s var(--saida);
}
.navegacao a:hover::after, .navegacao a[aria-current]::after { transform: scaleX(1); }
.busca { margin-inline: auto; flex: 1 1 240px; max-width: 360px; position: relative; }
/* A caixa de busca era o elemento mais pesado do cabeçalho: retângulo cheio,
borda em toda a volta, do tamanho da assinatura. Vira campo de papel, sem
contorno, e só ganha traço quando recebe o cursor ou o foco. Menos moldura
é a mesma regra que já vale nos cartões. */
.busca input {
width: 100%; border: 0; border-bottom: 1px solid transparent; background: var(--taupe);
padding: 12px 14px 12px 40px; font-family: var(--face-corpo); font-size: 14px; color: var(--tinta);
transition: background 0.3s ease, border-color 0.3s ease;
}
.busca input:hover { background: var(--taupe); }
.busca input:focus { background: var(--branco); border-bottom-color: var(--tinta); outline: none; }
.busca input:focus-visible { outline: 2px solid var(--bronze); outline-offset: 1px; }
.busca input::placeholder { color: var(--texto-2); }
.busca svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; stroke: var(--texto-2); stroke-width: 1.5; fill: none; }
.ferramentas { display: flex; gap: 2px; align-items: center; }
.ferramenta { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; transition: border-color 0.3s ease; }
.ferramenta:hover { border-color: var(--fio-forte); }
.ferramenta svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.4; fill: none; }
.sacola { position: relative; }
.sacola__conta {
position: absolute; top: 4px; right: 3px; min-width: 16px; height: 16px;
display: grid; place-items: center; background: var(--tinta); color: var(--branco);
font-family: var(--face-corpo); font-size: 11px; font-variant-numeric: tabular-nums;
}
.sacola__conta[hidden] { display: none; }
/* O painel da sacola segue a mesma construção da lista de idioma: ancorado no
botão, fechado por padrão, fora do fluxo. Ele existe para o clique no ícone
ter resposta, e para a nota sobre o fechamento do pedido ter onde morar. */
.sacola__painel {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
width: min(300px, calc(100vw - 32px));
padding: 16px 18px; text-align: left;
background: var(--branco); border: 1px solid var(--fio);
box-shadow: 0 22px 40px -22px rgba(20, 18, 21, 0.45);
}
.sacola__painel[hidden] { display: none; }
.sacola__titulo { display: block; margin: 0 0 12px; color: var(--texto-2); }
.sacola__itens { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sacola__itens li {
display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
font-family: var(--face-corpo); font-size: 14px; line-height: 1.4; color: var(--tinta);
}
.sacola__qtd { flex: none; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.sacola__vazia { margin: 0; font-family: var(--face-corpo); font-size: 14px; color: var(--texto-2); }
.sacola__nota {
margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--fio);
font-family: var(--face-corpo); font-size: 12.5px; line-height: 1.5; color: var(--texto-2);
}
.sacola__limpar {
display: flex; align-items: center; justify-content: center;
width: 100%; min-height: 44px; margin-top: 12px;
background: none; border: 1px solid var(--fio-forte); cursor: pointer;
font-family: var(--face-corpo); font-size: 11px; font-weight: 600;
letter-spacing: var(--label-espaco); text-transform: uppercase; color: var(--tinta);
transition: background 0.25s ease;
}
.sacola__limpar:hover { background: var(--taupe); }
.sacola__limpar[hidden] { display: none; }
/* ---------- ações ---------- */
/* ---------- CTA principal ----------
Uma classe só para todo botão que é a ação principal da sua composição:
palco, campanha, portais, kits, convite. O secundário tem classe própria e
não entra aqui, e controle de carrossel, filtro e link de rodapé também não.
O gesto: a seta nasce apagada e recolhida na folga que já está reservada à
direita, e o texto repousa deslocado meia folga para a direita. No ponteiro
e no foco o texto volta ao centro, andando cinco pixels, e a seta entra.
Como a folga existe desde o repouso, nada muda de tamanho e a linha não
salta. */
.acao {
--folga: 10px;
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: 0;
min-height: 48px;
background: var(--tinta); color: var(--sobre-escuro);
font-family: var(--face-corpo); font-size: var(--t-cta); font-weight: 600;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 14px 34px; border: 0; border-radius: 3px; cursor: pointer;
transition: background 0.3s var(--saida), color 0.3s var(--saida);
}
.acao__texto {
translate: calc(var(--folga) / 2) 0;
transition: translate 0.3s var(--saida);
}
.acao__seta {
width: var(--folga); display: grid; place-items: center;
opacity: 0; translate: -7px 0;
transition: opacity 0.3s var(--saida), translate 0.3s var(--saida);
}
.acao:hover .acao__texto,
.acao:focus-visible .acao__texto { translate: 0 0; }
.acao:hover .acao__seta,
.acao:focus-visible .acao__seta { opacity: 1; translate: 0 0; }
/* Sem ponteiro não existe hover, então a seta já nasce visível: esconder
affordance atrás de um estado que o aparelho não tem é esconder e pronto. */
@media (hover: none) {
.acao__texto { translate: 0 0; }
.acao__seta { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
.acao__texto, .acao__seta { transition: none; }
.acao__texto { translate: 0 0; }
.acao__seta { opacity: 1; translate: 0 0; }
}
/* o brilho atravessa uma vez a cada passagem do cursor, não fica piscando */
.acao:hover { background: var(--garrafa); }
.acao--larga { width: 100%; }
.acao svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.acao-secundaria {
display: inline-flex; align-items: center; justify-content: center; gap: 12px;
font-family: var(--face-corpo); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
padding: 17px 30px; border: 1px solid var(--tinta); background: none; color: var(--tinta); cursor: pointer;
transition: background 0.35s var(--saida), color 0.35s var(--saida);
}
.acao-secundaria:hover { background: var(--tinta); color: var(--taupe); }
/* Ícone sem medida é ícone que ocupa o que sobrar. Aqui ele tem medida
própria, e não depende de o pai continuar sendo flex. */
.acao-secundaria svg { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; }
.acao-secundaria .acao__seta { width: 16px; height: 16px; flex: none; }
/* ---------- benefícios ---------- */
/* Sem grade de tabela. Um fio só em cima, para encostar a faixa no banner,
e o resto separado por espaço. Quatro células com borda dos quatro lados é
planilha, não vitrine. */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fio); }
.beneficio { display: flex; gap: 11px; align-items: center; padding: 18px clamp(14px, 1.6vw, 24px); }
.beneficio svg { width: 17px; height: 17px; stroke: var(--tinta); stroke-width: 1.4; fill: none; flex: none; margin-top: 2px; }
.beneficio strong { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.beneficio span { font-size: 12px; color: var(--texto-2); }
/* ---------- seções ---------- */
.secao { padding-block: var(--ritmo); }
.secao--taupe { background: var(--taupe); }
.secao__cabeca { display: flex; align-items: center; justify-content: flex-start; gap: 16px; margin-bottom: 32px; }
/* Só o link de texto do cabeçalho. O botão de ação tem desenho próprio, e
herdar sublinhado e padding daqui quebrava a caixa dele. */
.secao__cabeca a:not(.acao):not(.acao-secundaria) { border-bottom: 1px solid var(--fio-forte); padding-bottom: 3px; transition: border-color 0.3s ease, color 0.3s ease; }
.secao__cabeca a:not(.acao):not(.acao-secundaria):hover { border-color: var(--bronze); color: var(--bronze-texto); }
/* ---------- cartão de produto: moldura própria ---------- */
/* A barra de rolagem nativa fica escondida na vitrine. Ela é um controle de
sistema, com aparência de sistema, e embaixo de uma fileira de perfume ela
denuncia componente inacabado. A navegação continua inteira: arrasto no
dedo, roda do mouse, setas e teclado. */
.trilho {
display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr);
gap: var(--gap-cartao); overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.trilho::-webkit-scrollbar, .marcas::-webkit-scrollbar { width: 0; height: 0; display: none; }
.marcas { scrollbar-width: none; }
.trilho > * { scroll-snap-align: start; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: var(--gap-cartao); }
/* O cartão inclina na direção do cursor. Os dois ângulos entram por variável,
escritos pelo script, então o CSS continua dono da transição e da volta ao
repouso. Sem cursor, e com movimento reduzido, ele só levanta. */
.peca {
position: relative; display: flex; flex-direction: column;
/* Sem borda. Num fundo de papel, o cartão branco já se destaca sozinho, e
moldura em volta de tudo é o que faz vitrine parecer marketplace. */
background: var(--branco);
border: 1px solid transparent;
padding: 11px 11px 15px;
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
transition: border-color 0.45s var(--saida), box-shadow 0.45s var(--saida), transform 0.6s var(--saida);
}
.peca:hover {
border-color: var(--fio);
box-shadow: 0 26px 48px -28px rgba(20, 18, 21, 0.5);
transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px) translateZ(14px);
transition-duration: 0.14s;
}
/* O reflexo é uma luz que segue o cursor sobre o vidro do ladrilho, não um
gradiente decorativo: a posição vem do ponteiro e some quando ele sai. */
.peca__retrato::after {
content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
background: radial-gradient(
circle at var(--luzx, 50%) var(--luzy, 50%),
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.14) 26%,
transparent 58%
);
opacity: 0; transition: opacity 0.4s var(--saida);
}
.peca:hover .peca__retrato::after { opacity: 1; }
@media (hover: none), (prefers-reduced-motion: reduce) {
.peca__retrato::after { display: none; }
.peca { transform: none; }
.peca:hover { transform: translateY(-3px); }
}
/* Embalagem branca sobre fundo branco nao tem como ser recortada sem comer
pedaco do produto, e o recorte recusa por isso. Sem recorte, o retangulo
branco da foto aparece colado no meio do poco bege e parece defeito. Entao
o poco inteiro fica branco nesses casos: sem emenda, e sem mentir a foto. */
.peca__retrato.peca__retrato--branco { background: var(--branco); }
.peca__retrato {
position: relative; overflow: hidden;
/* 3 por 4, em pé, e não quadrado. Numa moldura quadrada o frasco fica com
metade da altura do cartão e a vitrine parece catálogo de atacado. Em pé
ele ocupa quase três quartos, que é a proporção que as lojas de
perfumaria usam porque é a forma do próprio produto. */
background: var(--taupe); aspect-ratio: 3 / 4;
display: grid; place-items: center; padding: 12px; margin-bottom: 12px;
}
/* A foto é posicionada, e não dimensionada por porcentagem. Altura em
porcentagem contra um quadro de altura indefinida não resolve, a imagem
volta ao tamanho natural e estoura o quadro: é assim que frasco de perfume
aparece decepado em cima e embaixo numa vitrine.
mix-blend-mode saiu junto: ele servia para fundir o fundo branco do JPEG
antigo com o cartão. Com a foto recortada, ele só sujava as partes claras
do frasco com a cor do fundo. */
.peca__retrato img {
position: absolute; inset: 4px;
width: calc(100% - 8px); height: calc(100% - 8px);
object-fit: contain; object-position: center;
transition: transform 0.9s var(--saida);
}
/* O zoom de 5,5% saiu: com o produto apoiado numa base, crescer a foto
inteira arrasta a linha de apoio junto e o frasco perde o chão. O que
substitui é o levantar, logo abaixo, que é menor e diz mais. */
.peca:hover .peca__retrato:not(.peca__retrato--apoiado) img { transform: scale(1.055); }
/* ---------- faixa de campanha ----------
A imagem de campanha deixa de morar só no carrossel do topo. Medindo a
página contra a referência, a nossa estava mais pálida e mais chapada:
luminância 185 contra 156, variação de tom 65 contra 84, e metade das
faixas escuras. A causa era estrutural, não de cor: um único momento de
imagem forte e depois só prateleira sobre papel claro.
A faixa é de largura total, usa a proporção da própria arte, e por isso
não corta nem sobra, do mesmo jeito que o palco. */
.faixa-campanha {
display: block; position: relative;
width: 100%; overflow: hidden;
aspect-ratio: var(--razao, 3 / 1);
background: var(--fundo-faixa, var(--marfim));
}
.faixa-campanha__arte,
.faixa-campanha__arte img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.faixa-campanha:focus-visible { outline: 3px solid var(--bronze); outline-offset: -6px; }
@media (max-width: 860px) {
.faixa-campanha {
aspect-ratio: var(--razao-pe, 1036 / 1519);
background: var(--fundo-faixa-pe, var(--fundo-faixa, var(--marfim)));
}
}
/* ---------- o produto apoiado ----------
O recorte resolveu o fundo e criou outro problema: o frasco ficava
flutuando. Objeto sem sombra de contato não parece fotografado, parece
figura colada, e era essa a distância entre o cartão e as artes do palco.
Não era resolução. Era luz.
O reflexo está assado na imagem, porque ele pertence ao frasco e anda com
ele. A sombra não: ela é desenhada aqui, porque sombra que anda junto com o
objeto nunca deixa o objeto levantar. O compositor exporta duas medidas por
produto, a largura da base e a altura em que ele apoia, e é delas que a
elipse abaixo tira o tamanho. Sem isso a sombra de um roll-on de 10ml teria
a largura da de um frasco de 200ml. */
.peca__retrato--apoiado::before {
content: '';
position: absolute;
z-index: 0;
left: 50%;
top: var(--base-altura, 85%);
width: var(--base-largura, 44%);
height: calc(var(--base-largura, 44%) * 0.17);
/* a sombra desliza para o lado oposto ao da luz: é esse desencontro que
informa que existe uma fonte de luz e, portanto, um volume */
translate: calc(-50% + var(--sombra-x, 0px)) -50%;
background: radial-gradient(
closest-side ellipse at 50% 50%,
rgba(26, 22, 20, 0.42) 0%,
rgba(26, 22, 20, 0.22) 46%,
rgba(26, 22, 20, 0.07) 72%,
transparent 100%
);
filter: blur(0.4px);
/* Cresce por escala, e não por largura e altura. Animar medida obriga o
navegador a refazer a conta de layout a cada quadro; escala é composta e
não toca no layout de ninguém. */
scale: 1;
transform-origin: center;
transition:
scale 0.5s var(--saida),
opacity 0.5s var(--saida),
translate 0.5s var(--saida);
}
/* O poço deixa de ser cor chapada e vira superfície: a luz vem de cima e o
chão escurece de leve onde o produto apoia. É o mínimo para a sombra ter
onde cair. */
.peca__retrato--apoiado {
background-image: linear-gradient(
180deg,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0) 52%,
rgba(26, 22, 20, 0.05) 100%
);
}
/* O momento autoral: a cliente chega perto e o frasco levanta da própria
sombra. A sombra abre e clareia, porque sombra de objeto afastado do chão é
maior e mais fraca. É o gesto de pegar um vidro da bancada, e só acontece
num cartão por vez, sob o ponteiro. Nada se mexe no resto da página. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.peca:hover .peca__retrato--apoiado::before,
.peca:focus-visible .peca__retrato--apoiado::before {
scale: 1.26 1.16;
opacity: 0.62;
}
.peca:hover .peca__retrato--apoiado img,
.peca:focus-visible .peca__retrato--apoiado img {
transform: translateY(-2.4%) scale(1.012);
}
}
/* No toque não existe aproximar, existe tocar. Então o mesmo gesto acontece
no toque: o frasco levanta enquanto o dedo está nele, e assenta ao soltar.
É resposta ao toque, não enfeite, e por isso continua valendo com movimento
reduzido, só mais curta. */
@media (hover: none) {
.peca:active .peca__retrato--apoiado::before {
scale: 1.22 1.12;
opacity: 0.6;
}
.peca:active .peca__retrato--apoiado img { transform: translateY(-2%); }
}
@media (prefers-reduced-motion: reduce) {
.peca__retrato--apoiado::before,
.peca__retrato--apoiado img { transition-duration: 0.12s; }
}
/* Estado sem foto. Todo tema precisa dele, e o padrão da Shopify é um
quadrado cinza com um ícone de montanha, que faz o produto parecer quebrado.
Aqui a célula continua sendo ladrilho, com a roseta no lugar do frasco. */
.peca__retrato--vazio { display: grid; place-items: center; gap: 12px; }
.peca__retrato--vazio svg { width: 62%; max-width: 140px; height: auto; stroke: var(--texto-2); stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; opacity: 0.55; }
.peca__retrato--vazio span { font-family: var(--face-corpo); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--texto-2); }
/* Compra rápida: sobe de dentro da foto ao passar o cursor, some ao sair.
Fica dentro do retrato e não rouba altura do cartão quando está escondida. */
.peca__rapido {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
display: flex; align-items: center; justify-content: center; gap: 9px;
background: var(--tinta); color: var(--taupe);
font-family: var(--face-corpo); font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 13px 10px; border: 0; cursor: pointer;
transform: translateY(101%);
transition: transform 0.45s var(--saida), background 0.3s ease;
}
.peca__rapido svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; }
.peca__rapido:hover { background: var(--tinta); }
.peca:hover .peca__rapido, .peca:focus-within .peca__rapido { transform: translateY(0); }
/* No toque o botão não some: ele fica. Escondido atrás do cursor, ele
simplesmente não existia no celular, que é onde a cliente está, e o cartão
ficava sem nenhuma ação de compra. A referência que o dono da loja apontou
mostra o botão sempre, e nisso ela está certa.
Aqui ele fica parado no pé da foto, sem deslizar, e com altura de toque. */
@media (hover: none) {
.peca__rapido {
position: static; transform: none;
min-height: 44px; padding: 12px 10px;
background: var(--tinta); color: var(--taupe);
}
.peca__retrato { margin-bottom: 0; }
.peca__marca { margin-top: 12px; }
}
.peca__selo {
position: absolute; top: 22px; left: 22px; z-index: 2;
background: var(--tinta); color: var(--taupe);
font-family: var(--face-corpo); font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase;
padding: 5px 9px;
}
.peca__marca { display: block; margin-bottom: 6px; font-size: var(--t-label); color: var(--texto-2); }
/* Altura fixa de duas linhas no nome. Sem isso o rodapé de cada cartão
pousa numa altura diferente, e é o desalinhamento de preço entre vizinhos
que faz fileira de produto parecer bagunça. */
.peca__nome {
font-family: var(--face-corpo); font-size: var(--t-produto);
font-weight: 400; line-height: 1.34; letter-spacing: -0.006em;
color: var(--texto);
margin: 0 0 12px; min-height: calc(1.34em * 2);
}
.peca__rodape { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--fio); }
.peca__preco { font-family: var(--face-corpo); font-weight: 600; font-size: var(--t-preco); letter-spacing: -0.026em; display: block; }
.peca__parcela { font-family: var(--face-corpo); font-weight: 400; font-size: var(--t-parcela); letter-spacing: 0; text-transform: none; color: var(--texto-2); display: block; margin-top: 4px; }
/* A linha de tamanho, no pe do cartao. Enquanto o preco nao existe, o que a
cliente precisa saber para comparar dois frascos e o volume, e e ele que
ocupa esse lugar. Quando o preco chegar, ele entra acima e o tamanho desce
para uma linha de apoio. */
.peca__medidas {
display: block; min-height: calc(var(--t-preco) * 1.1);
font-family: var(--face-corpo); font-size: 13px; font-weight: 500;
letter-spacing: -0.004em; line-height: 1.35; color: var(--texto-2);
}
/* Cartao sem foto nao e cartao vazio: o poco continua ocupando o lugar que a
foto vai ocupar, com a roseta da casa apagada no meio. */
.peca__sem-foto {
display: block; width: 100%; height: 100%;
background: var(--tinta);
-webkit-mask: var(--estrela) center / 52% no-repeat;
mask: var(--estrela) center / 52% no-repeat;
opacity: 0.12;
}
/* A prateleira grande entra por levas. O botao fecha a grade e separa uma
leva da outra. */
.colecao__mais { display: flex; justify-content: center; margin-top: var(--ritmo); }
.colecao__mais button { min-width: min(320px, 100%); }
/* ---------- marcas ---------- */
/* Quatro peças inteiras e uma fração clara da quinta. Card cortado por acaso
parece defeito; fração medida parece convite. */
.marcas {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 4 * var(--gap-cartao)) / 4.16);
gap: var(--gap-cartao); overflow-x: auto; padding-bottom: 4px;
}
.marcas > * { scroll-snap-align: start; }
/* O divisor é fixo, então a fração fica sempre em 16% em qualquer largura,
que é o que se quer. O que não escala é a contagem: 4,16 cartões dentro de
375px dá uma marca de 78px, que é tira, não cartão. A fração se mantém, a
contagem cai. */
@media (max-width: 1000px) { .marcas { grid-auto-columns: calc((100% - 3 * var(--gap-cartao)) / 3.16); } }
@media (max-width: 760px) { .marcas { grid-auto-columns: calc((100% - 2 * var(--gap-cartao)) / 2.16); } }
@media (max-width: 520px) { .marcas { grid-auto-columns: calc((100% - var(--gap-cartao)) / 1.42); } }
.marca-cartao {
background: var(--branco); border: 1px solid var(--fio);
padding: 30px 18px; text-align: center;
font-family: var(--face-corpo); font-size: var(--t-categoria); font-weight: 500; letter-spacing: -0.014em;
transition: background 0.4s var(--saida), color 0.4s var(--saida), border-color 0.4s var(--saida);
}
.marca-cartao span { display: block; margin-top: 8px; }
.marca-cartao:hover { background: var(--garrafa); color: var(--taupe); border-color: var(--garrafa); }
.marca-cartao:hover .medida { color: rgba(247, 244, 239, 0.84); }
/* ---------- áreas ---------- */
/* ---------- beleza ----------
Eram cinco retangulos brancos iguais, com um icone fino em cima e dois
tercos de nada embaixo: aparencia de painel de sistema, nao de vitrine.
Agora e composicao. Uma celula de abertura em tipografia pura e cinco
tiles de tamanhos diferentes, cada um com o proprio campo de cor e a
geometria da casa cortada em escala grande. Rosto ocupa duas colunas por
duas linhas, Corpo fica abaixo da abertura, e os tres restantes fecham a
base.
So Corpo tem fotografia, e e honesto: das 32 imagens do projeto, as unicas
de beleza sao as duas brumas da Victoria's Secret e um composto de
marketing da Aura. Rosto, cabelo, maos e labios nao tem foto no catalogo,
entao recebem composicao grafica em vez de imagem emprestada. */
.beleza {
background: var(--marfim);
padding-block: var(--ritmo-forte);
}
.beleza__grade {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(12px, 1.3vw, 18px);
grid-template-areas:
"abre rosto rosto"
"corpo rosto rosto"
"cabelo maos labios";
}
.beleza__abertura {
grid-area: abre;
display: flex; flex-direction: column; justify-content: center;
padding-right: clamp(0px, 1.6vw, 26px);
}
.beleza__rotulo { display: block; color: var(--bronze-texto); margin-bottom: 14px; }
.beleza__abertura h2 {
font-family: var(--face-display); font-weight: var(--peso-display);
font-optical-sizing: auto; letter-spacing: var(--tracking-display);
line-height: var(--entrelinha-display);
font-size: var(--t-editorial); margin: 0 0 16px;
}
.beleza__linha {
font-size: var(--t-apoio); line-height: 1.6; color: var(--texto-2);
margin: 0 0 26px; max-width: 30ch;
}
/* O embrulho dos tiles some da grade no desktop e so volta a existir como
caixa no celular, onde vira trilho. */
.beleza__tiles { display: contents; }
.tile {
position: relative; overflow: hidden; isolation: isolate;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 176px; padding: 20px;
color: var(--texto);
transition: box-shadow 0.3s var(--saida);
}
.tile--rosto { grid-area: rosto; --campo: var(--rosa); background: var(--campo); min-height: 368px; padding: 28px; }
.tile--corpo { grid-area: corpo; --campo: var(--taupe); background: var(--campo); }
.tile--cabelo { grid-area: cabelo; --campo: var(--garrafa); background: var(--campo); color: var(--sobre-escuro); }
.tile--maos { grid-area: maos; --campo: var(--taupe-fundo); background: var(--campo); }
.tile--labios { grid-area: labios; --campo: var(--tinta); background: var(--campo); color: var(--sobre-escuro); }
/* A linha da geometria passava por cima da legenda e cortava o texto ao
meio. O ve da propria cor do tile sobe do pe e devolve campo limpo para a
leitura, sem escurecer nem clarear a composicao. */
.tile__campo::after {
content: ''; position: absolute; inset: auto 0 0 0; height: 62%;
background: linear-gradient(to top, var(--campo) 22%, transparent 100%);
}
/* A geometria entra cortada e em escala grande, cada tile num enquadramento
diferente: e o que da presenca sem depender de foto que nao existe. */
.tile__campo { position: absolute; inset: 0; z-index: -1; display: block; }
/* Preenchida, a geometria virava adesivo de estrela. Em traco fino ela e a
mesma linha que ja desenha o fundo dos banners, e le como marca d'agua
impressa em vez de clip-art. Cada tile pega um pedaco diferente dela. */
.tile__marca {
position: absolute; height: auto; aspect-ratio: 1;
fill: none; stroke: currentColor; stroke-width: 3.2;
vector-effect: non-scaling-stroke; opacity: 0.3;
transition: scale 0.3s var(--saida), rotate 0.3s var(--saida);
}
.tile--rosto .tile__marca { width: 118%; right: -30%; top: -34%; opacity: 0.34; }
.tile--corpo .tile__marca { width: 150%; left: -58%; bottom: -70%; opacity: 0.26; }
.tile--cabelo .tile__marca { width: 168%; right: -78%; top: -56%; opacity: 0.34; }
.tile--maos .tile__marca { width: 152%; left: -64%; top: -60%; opacity: 0.28; }
.tile--labios .tile__marca { width: 176%; right: -70%; bottom: -84%; opacity: 0.34; }
/* Corpo e o unico com produto de verdade: as duas brumas, recortadas, em
escalas diferentes para nao virarem um par simetrico. */
/* O produto fica ACIMA do véu. O véu existe para proteger a legenda da linha
da geometria, não para apagar o frasco: passando por cima dele, lavava a
metade de baixo do produto e o frasco parecia boiar sem apoio. Como o
produto mora na direita e a legenda na esquerda, os dois não se encostam. */
.tile__frascos { position: absolute; inset: 0; z-index: 1; }
.tile__frascos img {
position: absolute; bottom: -6%; width: auto; object-fit: contain;
filter: drop-shadow(0 16px 20px rgba(20, 18, 21, 0.22));
transition: scale 0.3s var(--saida);
transform-origin: bottom center;
}
/* Mesma conta do cartão de marca: a altura pedida é a do produto, não a do
arquivo. A base fica um pouco abaixo da borda, então o reflexo sai do
quadro e o frasco parece apoiado na aresta do ladrilho. */
.tile__frascos img {
--p-base: 0.855;
height: calc(var(--alvo, 70%) / var(--p-alt, 0.8));
top: calc(104% - (var(--alvo, 70%) / var(--p-alt, 0.8)) * var(--p-base));
bottom: auto;
}
.tile__frascos img:first-child { --alvo: 56%; right: 30%; }
.tile__frascos img:last-child { --alvo: 68%; right: 4%; }
.tile__dizer { position: relative; z-index: 1; max-width: 22ch; }
.tile__nome {
display: block; font-size: var(--t-categoria); font-weight: 600;
letter-spacing: -0.018em; line-height: 1.16;
}
.tile--rosto .tile__nome { font-size: clamp(20px, 1.9vw, 25px); }
.tile__nota { display: block; margin-top: 5px; font-size: 13px; line-height: 1.45; opacity: 0.74; }
.tile__ir {
position: absolute; z-index: 1; top: 18px; right: 18px;
width: 34px; height: 34px; display: grid; place-items: center;
border: 1px solid currentColor; opacity: 0.4;
transition: opacity 0.3s var(--saida), translate 0.3s var(--saida);
}
.tile__ir svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.6; fill: none; }
@media (hover: hover) {
.tile:hover .tile__marca { scale: 1.02; rotate: 2deg; }
.tile:hover .tile__frascos img { scale: 1.02; }
.tile:hover .tile__ir { opacity: 1; translate: 3px 0; }
.tile:hover { box-shadow: inset 0 0 0 1px currentColor; }
}
/* Sem ponteiro o estado clicavel precisa estar visivel desde o comeco. */
@media (hover: none) {
.tile__ir { opacity: 0.85; }
}
.tile:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.tile--cabelo:focus-visible,
.tile--labios:focus-visible { outline-color: var(--rosa); }
.tile:active { scale: 0.995; }
@media (prefers-reduced-motion: reduce) {
.tile, .tile__marca, .tile__frascos img, .tile__ir { transition: none; }
.tile:hover .tile__marca, .tile:hover .tile__frascos img { scale: 1; rotate: 0deg; }
.tile:hover .tile__ir { translate: 0 0; }
.tile:active { scale: 1; }
}
@media (max-width: 1000px) {
.beleza__grade {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
"abre rosto"
"corpo rosto"
"cabelo maos"
"labios labios";
}
.tile--rosto { min-height: 320px; }
.tile--labios { min-height: 150px; }
}
@media (max-width: 620px) {
/* Trilho no celular. A abertura fica acima, os cinco tiles deslizam com
encaixe, e a fracao do proximo e medida, nao sobra de calculo. */
.beleza__grade { display: block; }
.beleza__abertura { padding-right: 0; margin-bottom: 22px; }
.beleza__linha { max-width: none; }
.beleza__tiles {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--gap-cartao)) / 1.28);
gap: var(--gap-cartao);
overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
margin-inline: calc(var(--gutter) * -1);
padding-inline: var(--gutter);
padding-bottom: 4px;
}
.beleza__tiles::-webkit-scrollbar { width: 0; height: 0; display: none; }
.tile--rosto, .tile--corpo, .tile--cabelo, .tile--maos, .tile--labios {
grid-area: auto; min-height: 210px; padding: 18px;
scroll-snap-align: start;
}
.tile--rosto .tile__nome { font-size: var(--t-categoria); }
}
/* ---------- marcas ---------- */
/* Quatro peças inteiras e uma fração clara da quinta. Card cortado por acaso
parece defeito; fração medida parece convite. */
.marcas {
display: grid; grid-auto-flow: column;
grid-auto-columns: calc((100% - 4 * var(--gap-cartao)) / 4.16);
gap: var(--gap-cartao); overflow-x: auto; padding-bottom: 4px;
}
.marcas > * { scroll-snap-align: start; }
/* O divisor é fixo, então a fração fica sempre em 16% em qualquer largura,
que é o que se quer. O que não escala é a contagem: 4,16 cartões dentro de
375px dá uma marca de 78px, que é tira, não cartão. A fração se mantém, a
contagem cai. */
@media (max-width: 1000px) { .marcas { grid-auto-columns: calc((100% - 3 * var(--gap-cartao)) / 3.16); } }
@media (max-width: 760px) { .marcas { grid-auto-columns: calc((100% - 2 * var(--gap-cartao)) / 2.16); } }
@media (max-width: 520px) { .marcas { grid-auto-columns: calc((100% - var(--gap-cartao)) / 1.42); } }
.marca-cartao {
background: var(--branco); border: 1px solid var(--fio);
padding: 30px 18px; text-align: center;
font-family: var(--face-corpo); font-size: var(--t-categoria); font-weight: 500; letter-spacing: -0.014em;
transition: background 0.4s var(--saida), color 0.4s var(--saida), border-color 0.4s var(--saida);
}
.marca-cartao span { display: block; margin-top: 8px; }
.marca-cartao:hover { background: var(--garrafa); color: var(--taupe); border-color: var(--garrafa); }
.marca-cartao:hover .medida { color: rgba(247, 244, 239, 0.84); }
/* ---------- áreas ---------- */
/* ---------- portais ----------
Eram dois