/* Montra dos produtos da Human Match (ver montra.js). Cada cartão usa a identidade do seu produto, em qualquer tema do site.
   As fontes são cortes pequenos, só com as letras de cada nome. */
@font-face { font-family: 'Montra Poppins'; src: url('/montra/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montra Kalam'; src: url('/montra/kalam-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Montra Plex'; src: url('/montra/plex-serif-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montra Inter'; src: url('/montra/inter-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.montra { width: 100%; max-width: 760px; margin: 0 auto; text-align: center; }
.montra-palco { display: grid; }
.montra-cartao {
  grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 12px 18px; border-radius: 12px;
  text-decoration: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; box-sizing: border-box;
  font: 400 .88rem/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.montra-cartao.ativo { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.montra-cartao:hover .montra-texto { text-decoration: underline; text-underline-offset: 3px; }
.montra-marca { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.montra-texto { max-width: 100%; }
.montra-icone { width: 26px; height: 26px; flex: none; }

.montra-pontos { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
.montra-ponto { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.montra-ponto::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; transition: opacity .2s, transform .2s; }
.montra-ponto[aria-current="true"]::before { opacity: .85; transform: scale(1.25); }

/* Agapone: azul-noite e dourado, como em agapone.com */
.montra-agapone { background: linear-gradient(135deg, #16224E, #0C1430); color: #DCE2F2; }
.montra-aga { display: inline-flex; align-items: center; font: 600 1.35rem/1 'Montra Poppins', 'Poppins', system-ui, sans-serif; letter-spacing: -.01em; }
.montra-aga-ouro { color: #CA980B; }
.montra-aga-p { margin-left: -.02em; }
.montra-aga-one { color: #F4F1E8; font-weight: 300; }
.montra-aga-marca { width: .95em; height: .95em; margin: 0 .02em; }

/* Escândaloku: papel, tinta e lupa */
.montra-escandaloku { background: #ede3d0; color: #2b2419; box-shadow: inset 0 0 0 1px #c9b795; }
.montra-esc { font: 700 1.3rem/1 'Montra Kalam', 'Kalam', cursive; color: #2b2419; }

/* Desde Abril: arquivo escuro e cravo */
.montra-desde-abril { background: #16181d; color: #d9d6cf; box-shadow: inset 0 0 0 1px #2c2f36; }
.montra-da { font: 600 1.15rem/1 'Montra Plex', 'IBM Plex Serif', Georgia, serif; color: #f6f3ec; }

/* New Living: preto e verde-parque */
.montra-new-living { background: #000; color: #e6e6e1; }
.montra-nl { display: block; width: 96px; height: auto; }

/* Human Match: papel claro, tinta e laranja de sinal */
.montra-humanmatch { background: #F2F1ED; color: #44433E; box-shadow: inset 0 0 0 1px #D5D3CA; }
.montra-hm { display: inline-flex; align-items: center; font: 700 1.2rem/1 'Montra Inter', 'Inter', system-ui, sans-serif; letter-spacing: -.04em; color: #0E0E0D; }
.montra-hm-glifo { width: .8em; height: .8em; margin: 0 .02em; }

@media (max-width: 560px) { .montra-cartao { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .montra-cartao, .montra-cartao.ativo { transition: none; } }