/* Arquivo GF — refino visual da VITRINE (/arquivogf/). Escopo html.agf-refino.
   Fixo desde 28/10/2026 (antes ficava atrás do interruptor agf_refino_vitrine). Reverter = tirar a classe
   agf-refino e o <link> de arquivogf/index.php.
   Só CSS: nenhuma regra de venda, link, portão ou preço é tocada. O grão (.agf-grain) e o tema
   escuro fixo ficam como estão. Regras: texto >= 12 px, contraste >= 4.5:1, alvo de toque 44 px,
   raios da escala do DESIGN.md, sombras neutras em camadas, movimento curto e desligável. */
html.agf-refino{
  --dark-m:rgba(240,234,248,.66);                 /* era .38 (≈3,3:1): metadado ilegível sobre #09060F */
  --agf-r:16px; --agf-ease:cubic-bezier(.22,1,.36,1);
  --agf-sh:0 1px 2px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.35);
  --agf-hl:inset 0 1px 0 rgba(255,255,255,.06);
}

/* abertura */
.agf-refino .agf-hero-eyebrow{text-transform:none;letter-spacing:0;font-size:14px;font-weight:800;color:var(--dark-t2)}
.agf-refino .agf2-topo h1{font-size:clamp(30px,5.2vw,56px);line-height:1.02;text-wrap:balance}
.agf-refino .agf2-busca-campo{border-radius:var(--agf-r);box-shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28)}
.agf-refino .agf2-busca button{border-radius:var(--agf-r);box-shadow:inset 0 0 0 999px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3),0 6px 18px rgba(0,0,0,.35);transition:transform 260ms var(--agf-ease)}
.agf-refino .agf2-busca button:active{transform:scale(.97);transition-duration:90ms}
.agf-refino .agf2-chips a{min-height:44px;padding:0 16px;font-size:14px;transition:border-color 200ms,background-color 200ms,transform 240ms var(--agf-ease)}
.agf-refino .agf2-chips a:active{transform:scale(.97)}
.agf-refino .agf2-chips{max-width:760px}
.agf-refino .agf2-nums{font-size:13px;letter-spacing:0}
.agf-refino .agf2-mural-fila img{border-radius:10px}

/* prateleiras: mais respiro e título com peso de seção */
.agf-refino .agf2-prat{padding:26px 0 8px}
.agf-refino .agf2-prat-head h2{font-size:20px;letter-spacing:-.005em}
.agf-refino .agf2-prat-head a{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.agf-refino .agf2-prat-sub{font-size:13px}
.agf-refino .agf2-abas button{min-height:40px;font-size:13px}
.agf-refino .agf2-mini-img,.agf-refino .agf2-tile,.agf-refino .agf2-anos a{border-radius:var(--agf-r)}
.agf-refino .agf2-mini-img{box-shadow:var(--agf-sh)}
.agf-refino .agf2-mini-img img{transition:transform 420ms var(--agf-ease)}
.agf-refino .agf2-mini-tit{font-size:15px}
.agf-refino .agf2-mini-meta,.agf-refino .agf2-tile-n,.agf-refino .agf2-anos a span{font-size:13px}
.agf-refino .agf2-tile{box-shadow:var(--agf-sh);transition:transform 320ms var(--agf-ease)}
.agf-refino .agf2-anos a{transition:border-color 200ms,transform 240ms var(--agf-ease)}
@media(hover:hover){.agf-refino .agf2-tile:hover,.agf-refino .agf2-anos a:hover{transform:translateY(-3px)}}

/* cards de álbum ("Acabou de chegar", grades): sombra em duas camadas, brilho de 1 px e movimento suave */
html.force-dark.agf-refino .agf-card{border-color:rgba(255,255,255,.08);border-radius:var(--agf-r);box-shadow:var(--agf-sh),var(--agf-hl);transition:transform 380ms var(--agf-ease),box-shadow 380ms var(--agf-ease)}
html.force-dark.agf-refino .agf-card:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(0,0,0,.5),0 22px 52px rgba(0,0,0,.5),var(--agf-hl)}
html.force-dark.agf-refino .agf-card:active{transform:scale(.99);transition-duration:90ms}
/* 12 px (e não 13) na data e no local: nos cards de 2 colunas do celular o nome da cidade é o que mais corta */
.agf-refino .agf-card-date,.agf-refino .agf-card-loc{font-size:12px}
.agf-refino .agf-card-count{font-size:13px}
/* No celular o local estava em 10 px e o título em 12 px. Subindo o tamanho, a cidade (que vem depois do nome do
   local) seria cortada; por isso o local passa a quebrar em até duas linhas em vez de virar reticências. */
.agf-refino .agf-card-title{font-size:14px;line-height:1.3}
.agf-refino .agf-card-loc{white-space:normal;overflow:visible;text-overflow:clip;align-items:flex-start;line-height:1.35}
.agf-refino .agf-card-loc svg{margin-top:2px;flex-shrink:0}

/* contraste: texto branco sobre gradiente de marca ficava em 2,4–3,6:1. O sombreado interno escurece só o
   fundo da pílula (o gradiente continua reconhecível) e leva o texto a >= 4,5:1. */
.agf-refino .agf-card-year,.agf-refino .agf-new-badge{box-shadow:inset 0 0 0 999px rgba(0,0,0,.3)}
.agf-refino .agf-card-year{font-size:12px}
/* aba ativa em rosa mais claro (o #E91E63 sobre #120D1E dava 4,4:1) */
.agf-refino .agf-tab.active,.agf-refino .agf-tab[aria-selected="true"],.agf-refino #tab-acervo{--pink:#FF5C8F}
/* lista dos níveis de acesso: 11 px era pequeno demais para quem decide a assinatura */
.agf-refino .agf-tier-list li{font-size:13px;line-height:1.5}

/* setas dos trilhos e sub-abas: translúcido só em camada que flutua, com fallback opaco */
.agf-refino .agf2-seta{background:rgba(15,10,25,.92)}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more){
  .agf-refino .agf-subtabs{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--dark-s)}
  .agf-refino .agf2-seta{background:#0F0A19}
}
@media (prefers-reduced-motion:reduce){
  .agf-refino .agf2-chips a,.agf-refino .agf2-busca button,.agf-refino .agf2-tile,.agf-refino .agf2-anos a,html.force-dark.agf-refino .agf-card,.agf-refino .agf2-mini-img img{transition:none}
  html.force-dark.agf-refino .agf-card:hover,.agf-refino .agf2-tile:hover,.agf-refino .agf2-anos a:hover{transform:none}
}