/*
 * Você cria? Venda no BrasiArte sem comissão (home de vendas, 12/10/2026).
 * Faixa única de captação, em bege dourado, raio de 26 px, sem animação.
 * Celular: logos das lojas em círculos sobrepostos no alto, depois o texto, os chips,
 * o botão em largura total e as dicas em lista. Tablet: logos no alto, texto e dicas
 * lado a lado. Computador: texto e dicas lado a lado com as logos embaixo do texto;
 * de 1280 px em diante, as 3 colunas (texto, dicas, logos).
 */
.hm-pq { content-visibility: auto; contain-intrinsic-size: auto 640px; margin-bottom: 36px; }

.hm-pq-faixa { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "lojas" "texto" "dicas"; gap: 22px;
               padding: 22px 18px; border-radius: 26px; color: var(--hm-tinta);
               background: radial-gradient(120% 90% at 100% 0%, rgba(232, 175, 24, .22) 0%, rgba(232, 175, 24, 0) 52%),
                           linear-gradient(160deg, var(--hm-bege) 0%, #FCEFD2 100%);
               outline: 1px solid rgba(161, 98, 7, .14); }

/* Texto, chips e botão */
.hm-pq-texto { grid-area: texto; min-width: 0; }
.hm-pq-texto .hm-pq-tit { color: var(--hm-noite); }
.hm-pq-linha { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: #44403c; max-width: 60ch; }
.hm-pq-chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hm-pq-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--hm-noite);
                  background: rgba(255, 255, 255, .78); border-radius: 999px; padding: 7px 12px; outline: 1px solid rgba(31, 94, 0, .12); }
.hm-pq-chips i { color: var(--hm-verde); font-size: 12px; }
.hm-pq-acoes { margin-top: 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.hm-pq-acoes .hm-btn { font-size: 15.5px; padding: 14px 24px; }
/* .hm .x: o ".hm a { color: inherit }" da base ganharia de uma classe só */
.hm .hm-pq-acoes .hm-btn--verde { color: #fff; }
.hm .hm-pq-planos { align-self: center; font-size: 14px; font-weight: 700; color: var(--hm-verde); display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; }
.hm-pq-planos:hover { text-decoration: underline; }
.hm-pq-nota { margin: 12px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--hm-suave); max-width: 60ch; }

/* Dicas para quem vende */
.hm-pq-dicas { grid-area: dicas; min-width: 0; background: rgba(255, 255, 255, .7); border-radius: 20px; padding: 16px; outline: 1px solid rgba(28, 25, 23, .06); }
.hm-pq-dicas-tit { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a16207; }
.hm-pq-dicas-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hm-pq-dicas-lista li + li { border-top: 1px solid rgba(28, 25, 23, .07); }
.hm .hm-pq-dica { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; min-height: 44px; }
.hm-pq-dica > i { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
                  background: #eef6e6; color: var(--hm-verde); font-size: 13px; margin-top: 1px; }
.hm-pq-dica > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hm-pq-dica-tit { font-size: 14px; line-height: 1.32; font-weight: 600; color: var(--hm-tinta);
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-pq-dica:hover .hm-pq-dica-tit { text-decoration: underline; }
.hm-pq-dica small { font-size: 11.5px; font-weight: 700; color: var(--hm-verde); }
.hm .hm-pq-todas { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--hm-verde); padding: 4px 2px; }
.hm-pq-todas:hover { text-decoration: underline; }

/* Logos das lojas: círculos sobrepostos, cada um leva à loja */
.hm-pq-lojas { grid-area: lojas; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.hm-pq-logos { list-style: none; margin: 0; padding: 0 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; }
.hm-pq-logos li { margin-left: -10px; }
.hm-pq-logo { position: relative; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; display: grid; place-items: center;
              background: #fff; box-shadow: 0 0 0 3px #fff, 0 4px 12px -4px rgba(28, 25, 23, .25); transition: transform .15s ease; }
.hm-pq-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-pq-logo:hover { transform: translateY(-2px); z-index: 1; }
.hm .hm-pq-logo:focus-visible { outline: 3px solid var(--hm-ouro); outline-offset: 3px; border-radius: 999px; z-index: 2; }
.hm .hm-pq-logo--mais { background: var(--hm-verde); color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; }
.hm-pq-legenda { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--hm-suave); }

@media (min-width: 640px) {
    .hm-pq-faixa { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "lojas lojas" "texto dicas"; gap: 24px 28px; padding: 28px; }
    .hm-pq-acoes { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
    .hm .hm-pq-planos { align-self: auto; }
    .hm-pq-linha { font-size: 15.5px; }
    .hm-pq-logo { width: 48px; height: 48px; }
    .hm-pq-dicas { align-self: start; }
}
@media (min-width: 1024px) {
    .hm-pq { contain-intrinsic-size: auto 420px; margin-bottom: 52px; }
    .hm-pq-faixa { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "texto dicas" "lojas dicas";
                   gap: 22px 40px; padding: 34px 38px; align-items: start; }
    .hm-pq-texto .hm-pq-tit { font-size: 32px; }
    .hm-pq-lojas { flex-direction: row; align-items: center; gap: 14px; }
    .hm-pq-logos { flex: 0 0 auto; flex-wrap: nowrap; }
    .hm-pq-legenda { flex: 1 1 auto; min-width: 0; }
    .hm-pq-dicas { padding: 18px 20px; }
}
@media (min-width: 1280px) {
    .hm-pq-faixa { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; grid-template-areas: "texto dicas lojas"; gap: 40px; align-items: center; }
    /* Mosaico: 4 por linha, sem sobrepor */
    .hm-pq-lojas { flex-direction: column; align-items: center; gap: 12px; }
    .hm-pq-logos { display: grid; grid-template-columns: repeat(4, 54px); gap: 10px; padding: 0; }
    .hm-pq-logos li { margin-left: 0; }
    .hm-pq-logo { width: 54px; height: 54px; }
    .hm-pq-legenda { text-align: center; max-width: 246px; }
}
@media (min-width: 1800px) {
    .hm-pq-faixa { padding: 40px 48px; gap: 56px; }
    .hm-pq-texto .hm-pq-tit { font-size: 36px; }
    .hm-pq-logos { grid-template-columns: repeat(4, 60px); gap: 12px; }
    .hm-pq-logo { width: 60px; height: 60px; }
    .hm-pq-legenda { max-width: 276px; }
}

/* Sem dicas ou sem logos (o cache veio vazio): a grade fecha sem buraco */
.hm-pq-faixa--sem-lojas { grid-template-areas: "texto" "dicas"; }
.hm-pq-faixa--sem-dicas { grid-template-areas: "lojas" "texto"; }
.hm-pq-faixa--sem-lojas.hm-pq-faixa--sem-dicas { grid-template-areas: "texto"; }
@media (min-width: 640px) {
    .hm-pq-faixa--sem-lojas { grid-template-areas: "texto dicas"; }
    .hm-pq-faixa--sem-dicas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lojas" "texto"; }
    .hm-pq-faixa--sem-lojas.hm-pq-faixa--sem-dicas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto"; }
}
@media (min-width: 1024px) {
    .hm-pq-faixa--sem-lojas { grid-template-areas: "texto dicas"; }
    .hm-pq-faixa--sem-dicas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto lojas"; align-items: center; }
}
@media (min-width: 1280px) {
    .hm-pq-faixa--sem-lojas { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "texto dicas"; }
    .hm-pq-faixa--sem-dicas { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto lojas"; }
}

@media (prefers-reduced-motion: reduce) {
    .hm-pq-logo { transition: none; }
    .hm-pq-logo:hover { transform: none; }
}