/* Josi Fraga Conceito — sistema visual dos artboards (Marcellus Sans + Jost) */

:root {
  --tinta: #221D1B;
  --papel: #FDFCFA;
  --creme: #F5F1EB;
  --terra: #724E39;
  --dourado: #BEAC7A;
  --cinza: #6B625C;
  --claro: #9C938B;
  /* era #B9AFA5, que dava 2.1:1 no papel. É onde sai "preço a confirmar",
     e com as peças de setembro isso deixou de ser caso isolado. Este tom
     passa 4.5:1 no papel e no creme, e continua mais claro que --cinza. */
  --apagado: #746D66;
  --linha: #E2DCD4;
  --linha2: #D9D2C8;
  --pad: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: Jost, system-ui, -apple-system, sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* height:auto e obrigatorio junto com max-width:100%: sem ele, uma <img> com
   width/height no HTML fica achatada quando a largura encolhe. display:block
   tira o vao de linha de base embaixo da foto. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terra); text-decoration: none; }
a:hover { color: var(--tinta); }

.wrap { max-width: 1440px; margin: 0 auto; }
.sec { padding: 64px var(--pad); }

.eyebrow { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--terra); }
.h1 {
  font-family: "Marcellus Sans", Georgia, serif; font-size: 46px; line-height: 1.2;
  letter-spacing: .15em; text-transform: uppercase; margin: 16px 0 0; font-weight: 400;
}
.h2 {
  font-family: "Marcellus Sans", Georgia, serif; font-size: 34px; line-height: 1.25;
  letter-spacing: .15em; text-transform: uppercase; margin: 14px 0 0; font-weight: 400;
}
.h3 {
  font-family: "Marcellus Sans", Georgia, serif; font-size: 26px; line-height: 1.3;
  letter-spacing: .15em; text-transform: uppercase; margin: 0; font-weight: 400;
}
.lead { color: var(--cinza); font-size: 17px; line-height: 1.65; }
.mini { font-size: 13px; color: var(--claro); line-height: 1.6; }

.btn {
  display: inline-block; padding: 15px 34px; border: 1px solid var(--tinta); color: var(--tinta);
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase; background: transparent;
  font-family: inherit; cursor: pointer; transition: background .18s, color .18s;
}
.btn:hover { background: var(--tinta); color: var(--papel); }
.btn-lt { border-color: #fff; color: #fff; }
.btn-lt:hover { background: #fff; color: var(--tinta); }
.btn-cheio { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn-cheio:hover { background: var(--terra); border-color: var(--terra); color: #fff; }

/* barra + cabecalho ------------------------------------------------------ */
.barra {
  background: var(--tinta); color: var(--papel); text-align: center; padding: 11px 8px;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
}
.barra a { color: var(--papel); }
/* o container inteiro (barra + cabecalho) e sticky: a barra rola pra fora
   (top negativo com a altura dela) e o cabecalho fica grudado no topo */
#topo { position: sticky; top: calc(-1 * var(--barra-h, 41px)); z-index: 40; }
.topo {
  /* marca a esquerda, nav ao lado, utilitarios a direita (padrao da referencia) */
  display: flex; align-items: center; gap: 48px;
  padding: 20px var(--pad); border-bottom: 1px solid var(--linha);
  background: var(--papel);
}
.topo nav, .topo .util {
  display: flex; gap: 32px; font-size: 13px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--cinza);
}
.topo .util { gap: 26px; justify-content: flex-end; margin-left: auto; }
.topo nav a, .topo .util a { color: var(--cinza); }
.topo nav a:hover, .topo .util a:hover, .topo a.on { color: var(--tinta); }
.topo a.on { border-bottom: 1px solid var(--tinta); }
.marca { text-align: left; display: block; }
.marca .nome {
  font-family: "Marcellus Sans", Georgia, serif; font-size: 21px; letter-spacing: .2em;
  text-indent: .2em; color: var(--tinta); line-height: 1;
}
.marca .sub {
  font-weight: 300; font-size: 9px; letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase; color: #8A8078; margin-top: 6px;
}
.hamb { display: none; background: none; border: 0; font: inherit; color: var(--cinza); cursor: pointer; padding: 0; letter-spacing: .15em; text-transform: uppercase; font-size: 13px; }

/* cabecalho flutuante (home): transparente sobre o hero, ganha fundo ao rolar */
.header-flutuante #topo { position: fixed; top: 0; left: 0; right: 0; z-index: 60; }
.header-flutuante #topo::after {
  /* scrim: garante leitura do cabecalho sobre foto clara */
  content: ''; position: absolute; inset: 0 0 -44px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(26,20,16,.5), rgba(26,20,16,0));
  transition: opacity .3s ease;
}
.header-flutuante #topo.solido::after { opacity: 0; }
.header-flutuante .topo { position: static; transition: background .3s ease, border-color .3s ease; }
.header-flutuante .topo a, .header-flutuante .marca .nome, .header-flutuante .marca .sub,
.header-flutuante .hamb { transition: color .3s ease, border-color .3s ease; }
.header-flutuante #topo:not(.solido) .topo { background: transparent; border-bottom-color: transparent; }
.header-flutuante #topo:not(.solido) .topo nav:not(.aberto) a,
.header-flutuante #topo:not(.solido) .topo .util a,
.header-flutuante #topo:not(.solido) .hamb { color: rgba(255,255,255,.92); }
.header-flutuante #topo:not(.solido) .topo nav:not(.aberto) a:hover,
.header-flutuante #topo:not(.solido) .topo .util a:hover { color: #fff; }
.header-flutuante #topo:not(.solido) .topo a.on { color: #fff; border-bottom-color: #fff; }
.header-flutuante #topo:not(.solido) .marca .nome { color: #fff; }
.header-flutuante #topo:not(.solido) .marca .sub { color: rgba(255,255,255,.72); }

/* cartao de peca --------------------------------------------------------- */
/* 3 por fileira em toda a loja (home, colecao, busca, consultoria), no desenho
   da Alquema: la o cartao mede 435px de largura com vao de 60px. A home era de
   4 colunas e o cartao ficava pequeno demais para peca de ghost mannequin, que
   ja nao ocupa a largura toda do quadro. .grade-3 continua existindo porque as
   telas de catalogo pedem por ela pelo nome; hoje as duas sao a mesma grade. */
.grade, .grade-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 40px; }
.card { display: block; color: var(--tinta); }
/* fundo TRANSPARENTE, de propósito. As peças são ghost mannequin recortado, com
   alpha: o card tem que deixar o papel do site aparecer atrás delas. Cheguei a
   pintar creme aqui como fundo de espera e ficou um quadrado creme atrás de cada
   peça recortada, destoando da página. Foto que falha continua tratada, mas pelo
   bloco .semfoto, que só existe quando falha mesmo. */
.card .pic { position: relative; aspect-ratio: 1/1; overflow: hidden; background: transparent; }
.card .pic img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity .18s ease-in-out;
}
.card .hov { opacity: 0; }
/* a troca so acontece depois que a foto de hover chegou (.com-hover, posta pelo
   JS no load): sem essa trava o card piscava vazio enquanto ela baixava */
.card:hover .pic.com-hover .still { opacity: 0; }
.card:hover .pic.com-hover .hov { opacity: 1; }
/* still quebrada e foto de hover boa: a foto de hover assume o lugar */
.card .pic.promovida .still { display: none; }
.card .pic.promovida .hov { opacity: 1; }
.card .cap { font-size: 15px; line-height: 1.4; letter-spacing: .06em; margin-top: 16px; }
.card .pr { color: var(--cinza); font-size: 15px; margin-top: 5px; }
.card .pr span { color: var(--apagado); }
.sale {
  position: absolute; left: 0; top: 0; background: var(--tinta); color: var(--papel);
  padding: 4px 10px; font-size: 13px; letter-spacing: .06em; z-index: 2;
}
.falta {
  position: absolute; left: 0; top: 0; background: rgba(114,78,57,.92); color: #FBF3E7;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; z-index: 3;
}
.vazio {
  aspect-ratio: 1/1; background: #EFEBE4; border: 1px dashed var(--linha2);
  display: flex; align-items: center; justify-content: center; color: #A79E94;
  font-size: 13px; letter-spacing: .1em; text-align: center; padding: 20px; line-height: 1.5;
}

/* foto que falhou: bloco discreto na paleta da marca, com o nome da peca e o
   aviso. Nunca fica vazio nem entra outra foto no lugar. */
.semfoto { position: relative; background: #F0ECE6; min-height: 96px; }
.semfoto > img { display: none; }
.semfoto .aviso-foto {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; padding: 16px;
  /* pinta o proprio creme: quando quem falha e uma foto de bloco escuro (o
     banner do .hero, por exemplo) o texto claro ficaria ilegivel sobre a tinta */
  background: #F0ECE6;
  font-family: Jost, system-ui, sans-serif; font-size: 12px; line-height: 1.5;
  letter-spacing: .06em; text-align: center; color: var(--claro);
}
.semfoto .aviso-foto .n { color: var(--cinza); }

/* ---- reserva da altura da grade da colecao (CLS) --------------------------
   Antes do JS montar os cartoes, #lista tem 0px e a pagina inteira embaixo dele
   pula quando os cartoes entram. Aqui a altura ja nasce reservada, calculada
   com a mesma grade do CSS acima (.grade-3):
     coluna  = (largura do container - vao) / colunas
     cartao  = coluna (foto 1/1) + legenda
     total   = linhas * cartao + (linhas - 1) * vao de linha
   O padding-top em % resolve contra a largura do proprio #lista, entao o numero
   acompanha a barra de rolagem e qualquer largura de tela.
   --gr3/--gr2 = linhas com 3 e com 2 colunas (padrao: as 14 pecas do catalogo).
   Some assim que grade() roda (classe .grade-montada), para que um filtro sem
   resultado nao deixe um vao gigante. */
html:not(.grade-montada) #lista:empty { display: block; }
html:not(.grade-montada) #lista:empty::before {
  content: ''; display: block; box-sizing: content-box;
  /* 3 colunas, vao 40px, legenda 64px: linha = 33.3333% - 26.667px + 64px */
  padding-top: calc(var(--gr3, 5) * 33.3333%);
  height: calc(var(--gr3, 5) * 97.333px - 60px);
}
@media (max-width: 1000px) {
  html:not(.grade-montada) #lista:empty::before {
    /* 2 colunas, vao 24px, legenda 64px */
    padding-top: calc(var(--gr2, 7) * 50%);
    height: calc(var(--gr2, 7) * 92px - 40px);
  }
}
@media (max-width: 640px) {
  html:not(.grade-montada) #lista:empty::before {
    /* 2 colunas, vao 14px, legenda de 2 linhas (94px medidos) */
    padding-top: calc(var(--gr2, 7) * 50%);
    height: calc(var(--gr2, 7) * 115px - 28px);
  }
}

/* blocos editoriais ------------------------------------------------------ */
.hero { position: relative; overflow: hidden; background: var(--tinta); }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .txt { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 var(--pad); }
.hero .txt.dir { justify-content: flex-end; text-align: right; }
.hero .txt.meio { justify-content: center; text-align: center; }
.hero .txt.baixo { align-items: flex-end; padding-bottom: 60px; }
.hero .txt .h1, .hero .txt .h2 { color: #fff; }
.hero .txt p { color: #fff; opacity: .93; margin: 18px 0 0; font-size: 17px; line-height: 1.65; max-width: 40ch; }
.hero .txt.dir p { margin-left: auto; }
.hero .txt .eyebrow { color: #F0E4D2; }
.veu { position: absolute; inset: 0; background: rgba(0,0,0,.28); }

.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; display: block; }
.duo .txt { display: flex; flex-direction: column; justify-content: center; padding: 56px 72px; }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { position: relative; display: block; }
.tile .box { aspect-ratio: 4/5; overflow: hidden; background: #F0ECE6; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.tile:hover img { transform: scale(1.04); }
.tile .rot {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: #fff; font-size: 15px; letter-spacing: .15em; text-transform: uppercase;
}

/* avisos de dado que falta ---------------------------------------------- */
.semdado {
  background: #FBF6EC; border: 1px solid #EADFC8; padding: 13px 16px;
  font-size: 13px; line-height: 1.65; color: #7A6A4E;
}
.semdado b { font-weight: 500; }

/* formularios e listas --------------------------------------------------- */
.campo {
  border: 1px solid var(--linha2); background: var(--papel); padding: 14px 18px;
  font: 400 15px Jost, sans-serif; color: var(--tinta); width: 320px; max-width: 100%;
}
.filtro {
  border: 1px solid var(--linha2); background: transparent; padding: 9px 16px;
  font: 400 13px Jost, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cinza); cursor: pointer;
}
.filtro.on { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
.swatch { width: 26px; height: 26px; border: 1px solid var(--linha2); cursor: pointer; display: inline-block; padding: 0; }
.swatch.on { outline: 1px solid var(--tinta); outline-offset: 3px; }

/* rodape ----------------------------------------------------------------- */
.rodape { border-top: 1px solid var(--linha); padding: 64px var(--pad) 40px; }
.rodape .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.rodape .selo { background: var(--tinta); padding: 30px 34px; display: inline-block; text-align: center; }
.rodape .selo .nome {
  font-family: "Marcellus Sans", Georgia, serif; font-size: 26px; letter-spacing: .2em;
  text-indent: .2em; color: #F2EDE4; line-height: 1;
}
.rodape .selo .sub {
  font-weight: 300; font-size: 10px; letter-spacing: .5em; text-indent: .5em;
  text-transform: uppercase; color: var(--dourado); margin-top: 8px;
}
.rodape h4 { font: 400 12px Jost, sans-serif; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 20px; }
.rodape .lista { display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.rodape .lista a { color: var(--cinza); }
.rodape .lista a:hover { color: var(--tinta); }
.rodape .fim {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--claro); font-size: 13px; letter-spacing: .06em;
}

.servicos { border-top: 1px solid var(--linha); padding: 48px var(--pad); }
.servicos .cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; text-align: center; }
.servicos .t { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; margin-top: 12px; }
.servicos .d { font-size: 15px; color: var(--cinza); margin-top: 6px; }

/* etiqueta de mock ------------------------------------------------------- */
.aviso-mock {
  background: var(--terra); color: #FBF3E7; font-size: 12px; letter-spacing: .08em;
  text-align: center; padding: 8px 16px; line-height: 1.5;
}

/* pagina de conteudo ----------------------------------------------------- */
.artigo { max-width: 68ch; margin: 0 auto; }
.artigo p { color: var(--cinza); font-size: 17px; line-height: 1.75; }
.artigo h3 { margin-top: 44px; }
.linhas { border-top: 1px solid var(--linha); }
.linha-item { border-bottom: 1px solid var(--linha); padding: 22px 0; }
.linha-item h4 {
  margin: 0; font: 400 13px Jost, sans-serif; letter-spacing: .15em; text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 16px; cursor: pointer;
}
.linha-item p { color: var(--cinza); font-size: 15px; line-height: 1.7; margin: 14px 0 0; }

/* responsivo ------------------------------------------------------------- */
@media (max-width: 1000px) {
  :root { --pad: 24px; }
  .sec { padding: 48px var(--pad); }
  .h1 { font-size: 34px; }
  .h2 { font-size: 27px; }
  .grade, .grade-3 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 24px; }
  .tiles { gap: 12px; }
  .duo { grid-template-columns: 1fr; }
  .duo img { min-height: 320px; }
  .duo .txt { padding: 40px var(--pad); }
  .duo .ordem1 { order: -1; }
  .rodape .cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .servicos .cols { grid-template-columns: 1fr; gap: 28px; }
  .topo { gap: 16px; }
  .topo nav { display: none; }
  .topo nav.aberto {
    display: flex; flex-direction: column; gap: 18px; position: absolute; left: 0; right: 0;
    top: 100%; background: var(--papel); border-bottom: 1px solid var(--linha); padding: 24px var(--pad);
  }
  .hamb { display: block; }
  .topo .util { gap: 16px; font-size: 12px; }
}
@media (max-width: 640px) {
  .h1 { font-size: 28px; }
  .h2 { font-size: 23px; }
  .grade, .grade-3 { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .tiles { grid-template-columns: 1fr; }
  .rodape .cols { grid-template-columns: 1fr; }
  .card .cap { font-size: 14px; margin-top: 12px; }
  .hero .txt p { font-size: 15px; }
  .duo .txt { padding: 34px var(--pad); }
}

/* ---------- mega menu (referencia: Alquema) ---------------------------------- */
.topo nav .item { position: static; }
.topo nav .item > a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
.topo nav .mais { display: none; font-weight: 300; }
.topo nav .painel {
  display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: 70;
  background: var(--papel); border-bottom: 1px solid var(--linha);
  text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--tinta);
  box-shadow: 0 18px 30px -24px rgba(0,0,0,.25);
}
.topo nav .tem-painel:hover .painel, .topo nav .tem-painel.aberto .painel { display: block; }
/* Ponte invisivel sobre o vao entre o item e o painel (26px medidos em 17/09: link
   termina em y=94, painel comeca em y=120). Sem ela, descer o mouse ate a subcategoria
   sai do :hover do item e o painel fecha antes do clique. So existe enquanto o painel
   esta aberto, porque e pseudo-elemento dele. */
.topo nav .painel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; }
.topo nav .painel .wrap { display: grid; grid-template-columns: 1fr 220px 220px; gap: 40px; padding: 40px var(--pad) 44px; max-width: 980px; }
.topo nav .painel .cols { display: contents; }
.topo nav .painel .col .h { font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--claro); margin-bottom: 16px; }
.topo nav .painel .col a { display: flex; align-items: center; gap: 10px; color: var(--cinza); padding: 5px 0; line-height: 1.3; }
.topo nav .painel .col a:hover { color: var(--tinta); }
.topo nav .painel .sw { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.topo nav .painel .promos { display: contents; }
.topo nav .painel .promo { display: block; color: var(--tinta); }
.topo nav .painel .promo .box { aspect-ratio: 3/4; overflow: hidden; background: #F0ECE6; }
.topo nav .painel .promo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.topo nav .painel .promo:hover img { transform: scale(1.04); }
.topo nav .painel .promo .rot { margin-top: 12px; font-size: 14px; }
.topo nav .painel .promo .ver { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--claro); margin-top: 4px; border-bottom: 1px solid var(--linha2); display: inline-block; }
/* O #topo já é sticky (linha 76) e sticky também cria contexto de posicionamento,
   então o .painel do mega menu se ancora nele do mesmo jeito. A regra
   `#topo{position:relative}` que ficava aqui vinha depois e vencia por ordem,
   e com isso o cabeçalho parava de grudar em todas as páginas menos a home
   (que usa .header-flutuante, de especificidade maior). */
.header-flutuante #topo:not(.solido) .topo nav .painel a { color: var(--cinza); }
.header-flutuante #topo:not(.solido) .topo nav .painel a:hover { color: var(--tinta); }
@media (max-width: 1100px) {
  .topo nav .painel .wrap { grid-template-columns: 1fr; }
  .topo nav .painel .promos { display: none; }
}
@media (max-width: 900px) {
  .topo nav .item { width: 100%; }
  .topo nav .item > a { display: flex; justify-content: space-between; width: 100%; }
  .topo nav .mais { display: inline; }
  .topo nav .tem-painel:hover .painel { display: none; }
  .topo nav .tem-painel.aberto .painel { display: block; }
  .topo nav .painel::before { display: none; }
  .topo nav .painel { position: static; border: 0; box-shadow: none; background: transparent; }
  .topo nav .painel .wrap { grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 8px 0 18px; }
  .topo nav .painel .col .h { margin-bottom: 8px; }
  .topo nav .painel .promos { display: none; }
}

/* ---- reserva da altura do cabecalho (CLS) ---------------------------------
   O #topo nasce vazio no HTML e o site.js o preenche. Sem reserva a pagina
   inteira desce quando ele entra: media de 0,17 de CLS a 390px nas telas
   internas. Alturas medidas no proprio DOM: 121px acima de 480, 139px entre
   441 e 479 (a barra de recado quebra em duas linhas) e 160px ate 440 (o
   cabecalho tambem quebra). Vale so enquanto :empty, some sozinha depois.
   A home fica de fora: la o #topo e flutuante e sai do fluxo, entao reservar
   altura criaria o pulo contrario. */
body:not(.home) #topo:empty { min-height: 121px; }
@media (max-width: 479px) { body:not(.home) #topo:empty { min-height: 139px; } }
@media (max-width: 440px) { body:not(.home) #topo:empty { min-height: 160px; } }