/* ───────────────────────── As casas do Marketing (classes de RPG) ──────────
   Cópia do bloco "As casas" do painel.css do app Comercial, com as cores das
   classes. Uma cor por casa, nos dois temas. O selo é o ícone BRANCO num
   redondo da cor dela; a capa é o gradiente da cor com o ícone grande e
   desfocado atrás e o mesmo, nítido e apagado, à direita. No pé da capa, no
   lugar da grega do Comercial, uma fileira de losangos (os pontos de vida). */
:root{--mes:#A87B12;--bar:#7A3EA8;--mag:#3B3F9E;--art:#B8560E;--arq:#2F7D3B;--esc:#1F5FBF;
  --friso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M5 1.5L8.5 5L5 8.5L1.5 5Z' fill='none' stroke='white' stroke-width='1.4'/%3E%3Ccircle cx='15' cy='5' r='1.3' fill='white'/%3E%3C/svg%3E");}
:root[data-tema="escuro"]{--mes:#E0B54A;--bar:#B184DE;--mag:#8C90E8;--art:#E8894A;--arq:#5DBB6B;--esc:#4C8DF0;}
.casa-mes{--c:var(--mes);} .casa-bar{--c:var(--bar);} .casa-mag{--c:var(--mag);}
.casa-art{--c:var(--art);} .casa-arq{--c:var(--arq);} .casa-esc{--c:var(--esc);}

.moeda{position:relative;display:inline-grid;place-items:center;border-radius:50%;flex:none;vertical-align:middle;
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--c) 72%,#fff) 0,var(--c) 55%,color-mix(in srgb,var(--c) 78%,#000) 100%);
  box-sizing:border-box;
  box-shadow:0 0 0 2px var(--card),0 4px 10px -3px rgba(0,0,0,.3);}
.moeda img{width:62%;height:62%;object-fit:contain;display:block;}

/* a capa da casa */
.capa-da-casa{position:relative;
  background:radial-gradient(120% 160% at 85% 0%,color-mix(in srgb,var(--c) 55%,#fff) 0,var(--c) 50%,color-mix(in srgb,var(--c) 72%,#000) 100%)!important;}
.capa-deco{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;}
.capa-deco::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;opacity:.32;background:var(--friso) repeat-x;background-size:28px 14px;}
.cd-borrado{position:absolute;left:-4%;top:50%;height:190%;transform:translateY(-50%);filter:blur(16px);opacity:.30;}
.cd-marca{position:absolute;right:4%;top:50%;height:80%;transform:translateY(-50%);opacity:.20;}
@media (prefers-reduced-transparency: reduce){ .cd-borrado{display:none;} }

/* os cartões das casas */
.casas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;}
.casa{background:var(--card);border-radius:24px;box-shadow:var(--shadow-card),0 0 0 1px rgba(16,24,40,.06);overflow:hidden;display:flex;flex-direction:column;}
.casa-capa{height:96px;}
.casa-corpo{padding:0 20px 20px;display:flex;flex-direction:column;gap:5px;flex:1;position:relative;}
.casa-selo{margin-top:-34px;}
.casa h3{margin:6px 0 0;font-size:19px;font-weight:600;letter-spacing:-.02em;}
.casa-cargo{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c);}
.casa-lema{font-family:'Times New Roman',Times,Georgia,serif;font-style:italic;font-size:16.5px;margin:4px 0 0;}
.casa-porque{color:var(--text-dim);font-size:13px;margin:0;}
.casa-icone{color:var(--text-dim);font-size:12px;margin:2px 0 0;}
.casa-icone code{font-size:11.5px;background:var(--mist);border-radius:6px;padding:1px 6px;}
.casa-gente{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);}
.casa-pessoa{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:inherit;width:56px;}
.casa-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;
  background-size:cover;background-position:center;box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--c,var(--ring));}
.casa-pnome{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* a fileira dos selos (prévia nos tamanhos que o app usaria) */
.selos{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;}
.selos figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.selos figcaption{font-size:11.5px;font-weight:600;color:var(--text-dim);}
.selos .tamanhos{display:flex;align-items:flex-end;gap:8px;}
.selos .colorida{width:40px;height:40px;object-fit:contain;}