/* =============================================================
   estilo.css — mesma identidade do PDF: fundo branco, títulos em
   EB Garamond, nomes das peças em Cormorant itálico, textos em Jost.
   ============================================================= */
:root{
  --fundo:#FFFFFF;
  --tinta:#2C2820;
  --bronze:#7A6A52;
  --bronze-claro:#A3937B;
  --ouro:#B49B6C;
  --linha:#E8E2D6;
  --suave:#FAF8F4;
  --serif:'EB Garamond',Georgia,serif;
  --italico:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;background:var(--fundo);color:var(--tinta);min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input{font-family:inherit}
em{font-family:var(--italico);font-style:italic;font-weight:500;color:var(--bronze)}

/* ---------- botões ---------- */
.botao{display:inline-block;background:var(--tinta);color:#fff;border:none;padding:15px 26px;font-size:12px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;border-radius:2px;transition:background .2s;text-align:center}
.botao:hover{background:var(--bronze)}
.botao.fantasma{background:none;border:1px solid var(--linha);color:var(--tinta)}
.botao.fantasma:hover{border-color:var(--bronze)}
.link{background:none;border:none;color:var(--bronze);font-size:12.5px;letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px}

/* ---------- entrada ---------- */
#entrada{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 16px 40px;position:relative}
#entrada > .linguas{position:absolute;top:18px;right:16px}
.entrada-cartao{max-width:400px;width:100%;text-align:center}
.marca{font-size:11px;letter-spacing:.38em;text-transform:uppercase;color:var(--bronze)}
.entrada-cartao h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,8vw,44px);line-height:1.1;margin:14px 0 0}
.fio{width:46px;height:1px;background:var(--ouro);margin:22px auto 24px}
.painel{display:flex;flex-direction:column;gap:10px}
.painel .sub{font-size:14px;line-height:1.65;color:var(--bronze);margin-bottom:14px}
.painel .sub b{font-family:var(--serif);font-weight:500;font-size:20px;color:var(--tinta)}
.painel input{width:100%;padding:14px 16px;border:1px solid var(--linha);background:#fff;font-size:15px;outline:none;border-radius:2px;transition:border-color .2s}
.painel input:focus{border-color:var(--bronze)}
.painel .botao{margin-top:6px;width:100%}
.painel .link{margin-top:8px}
.erro{color:#A05A4A;font-size:13px;min-height:18px}
.ok{color:var(--bronze);font-size:13px;line-height:1.5;min-height:18px}
.dica{font-size:12px;color:var(--bronze-claro);line-height:1.5;margin-top:14px}
.assina{margin-top:44px;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--bronze-claro)}

/* ---------- idiomas ---------- */
.linguas{display:flex;gap:2px}
.linguas button{background:none;border:none;padding:6px 7px;font-size:11.5px;letter-spacing:.14em;color:var(--bronze-claro)}
.linguas button[aria-pressed=true]{color:var(--tinta);font-weight:500;text-decoration:underline;text-underline-offset:4px}

/* ---------- topo ---------- */
.topo{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding:22px 5vw 0}
.logo{display:flex;flex-direction:column;gap:4px}
.logo-marca{font-family:var(--serif);font-size:16px;letter-spacing:.3em;text-transform:uppercase}
.logo-marca em{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--bronze)}
.logo-por{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--bronze-claro)}
.acoes{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid var(--linha);padding:8px 14px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;border-radius:2px;transition:all .2s;white-space:nowrap}
.chip:hover,.chip.ativo{background:var(--tinta);border-color:var(--tinta);color:#fff}
.chip .conta{background:var(--ouro);color:#fff;border-radius:999px;font-size:10px;min-width:17px;height:17px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;letter-spacing:0}

/* ---------- busca ---------- */
.busca-linha{padding:22px 5vw 0}
.busca{display:flex;align-items:center;gap:10px;max-width:420px;border:1px solid var(--linha);border-radius:999px;padding:0 18px;transition:border-color .2s}
.busca:focus-within{border-color:var(--bronze-claro)}
.busca input{flex:1;border:none;outline:none;background:none;font-size:14px;padding:12px 0;color:var(--tinta);min-width:0}
.busca svg{width:15px;height:15px;stroke:var(--bronze-claro);fill:none;stroke-width:1.8;flex:none}

/* ---------- cabeçalho de cada vista ---------- */
.hero{padding:42px 5vw 10px;max-width:900px}
.hero .ola{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ouro);margin-bottom:14px}
.hero h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.4vw,54px);line-height:1.08}
.hero h2 em{font-size:1.06em}
.hero p{margin-top:14px;font-size:15px;color:var(--bronze);line-height:1.7;max-width:600px}
.voltar{display:inline-block;margin:28px 5vw 0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze)}
.voltar:hover{color:var(--tinta)}

/* navegação entre categorias (dentro de uma categoria) */
.trilho{display:flex;gap:6px;overflow-x:auto;padding:20px 5vw 4px;scrollbar-width:none}
.trilho::-webkit-scrollbar{display:none}
.trilho a{flex:none;border:1px solid transparent;padding:7px 14px;font-size:12px;letter-spacing:.04em;border-radius:999px;color:var(--bronze);transition:all .2s}
.trilho a:hover{background:var(--suave);color:var(--tinta)}
.trilho a.ativo{background:var(--bronze);color:#fff}

/* ---------- capas das categorias ---------- */
.capas{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:26px 5vw 60px}
@media (min-width:700px){.capas{grid-template-columns:repeat(3,1fr);gap:20px}}
@media (min-width:1080px){.capas{grid-template-columns:repeat(4,1fr)}}
.capa{border:1px solid var(--linha);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s;background:#fff}
.capa:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,50,30,.08)}
.capa-foto{aspect-ratio:1/.9;position:relative}
.capa-foto img{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain}
.capa-nome{border-top:1px solid var(--linha);padding:14px 10px 15px;text-align:center}
.capa-nome b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;line-height:1.2}
.capa-nome span{display:block;margin-top:4px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bronze-claro)}

/* ---------- seções e grade de peças ---------- */
.secao{padding:30px 5vw 10px}
.secao-titulo{text-align:center;margin-bottom:22px}
.secao-titulo .grupo{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--bronze)}
.secao-titulo h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,34px);margin-top:4px}
.secao-titulo .fio{margin:14px auto 0}
.grade{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (min-width:700px){.grade{grid-template-columns:repeat(3,1fr);gap:22px}}
@media (min-width:1080px){.grade{grid-template-columns:repeat(4,1fr)}}

.peca{position:relative;border:1px solid var(--linha);border-radius:3px;background:#fff;display:flex;flex-direction:column;transition:transform .2s, box-shadow .2s}
.peca:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(60,50,30,.08)}
.peca > a{display:flex;flex-direction:column;flex:1}
.peca-foto{aspect-ratio:1/1;position:relative}
.peca-foto img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.peca-texto{border-top:1px solid var(--linha);padding:12px 12px 14px;text-align:center;display:flex;flex-direction:column;gap:3px;flex:1}
.peca-nome{font-family:var(--italico);font-style:italic;font-weight:500;font-size:19px;line-height:1.15}
.peca-var{font-size:12px;color:var(--bronze);line-height:1.35}
.peca-loja{margin-top:auto;padding-top:6px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-claro)}
.peca-meta{font-size:12px;color:var(--bronze)}
.faixa{font-family:var(--serif);font-size:14px;letter-spacing:.08em;color:var(--tinta)}
.faixa i{font-style:normal;color:var(--linha)}
.selo{position:absolute;top:10px;left:10px;background:var(--ouro);color:#fff;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:3px 9px;border-radius:2px}
.fav{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;border:1px solid var(--linha);background:rgba(255,255,255,.92);color:var(--bronze-claro);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s}
.fav:hover{color:var(--bronze);border-color:var(--bronze-claro)}
.fav[aria-pressed=true]{background:var(--bronze);border-color:var(--bronze);color:#fff}

.vazio{padding:60px 5vw 80px;text-align:center;color:var(--bronze);font-size:15px;line-height:1.7}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);margin-top:40px;padding:26px 5vw 46px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.faixas{font-size:12px;color:var(--bronze-claro);letter-spacing:.03em;line-height:1.8}
.faixas b{font-family:var(--serif);font-weight:400;color:var(--bronze);letter-spacing:.06em}

/* ---------- carregando ---------- */
#carregando{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:50;font-family:var(--italico);font-style:italic;font-size:20px;color:var(--bronze)}

/* ---------- aviso legal ---------- */
.modal{position:fixed;inset:0;background:rgba(44,40,32,.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:4vh 14px}
.modal-cartao{background:#fff;max-width:620px;width:100%;border-radius:4px;padding:30px;max-height:92vh;display:flex;flex-direction:column}
.modal-cartao h3{font-family:var(--serif);font-weight:400;font-size:26px;margin-bottom:14px}
.modal-texto{overflow:auto;font-size:13.5px;line-height:1.7;padding-right:8px;flex:1}
.modal-texto p{margin-bottom:12px}
.modal-texto strong{font-weight:500}
.modal-texto h4{font-family:var(--serif);font-weight:500;font-size:19px;margin:22px 0 8px}
.modal-acoes{display:flex;gap:10px;margin-top:20px}
.modal-acoes .botao{flex:1}

@media (max-width:640px){
  .topo{padding-top:16px}
  .topo{position:relative}
  .topo .linguas{position:absolute;top:14px;right:3vw}
  .acoes{width:100%;justify-content:flex-start;gap:6px}
  .chip{padding:7px 10px;font-size:10.5px;letter-spacing:.08em}
  #sair{position:absolute;top:18px;right:5vw;border:none;padding:6px 0;text-decoration:underline;text-underline-offset:3px;color:var(--bronze)}
  #sair:hover{background:none;color:var(--tinta)}
  .busca-linha{padding-top:16px}
  .hero{padding-top:30px}
  .peca-nome{font-size:17px}
  .peca-texto{padding:10px 8px 12px}
  .modal-cartao{padding:22px 18px}
}