/* hb-cards.css — HEAD BROKER · card de empreendimento
 * Fonte única. Está na vitrine e na home. Mudar aqui muda nos dois.
 * Depende das variáveis de marca da página (--navy, --azul, --verde...).
 */
:root{--zl:#4D8DFF;--zs:#1EBE5D;--zc:#8B6CFF;--zo:#17B8C4}

.hb-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.hb-grade{grid-template-columns:repeat(2,1fr);gap:18px}}
@media(max-width:660px){.hb-grade{grid-template-columns:1fr;gap:16px}}

.hb-emp{position:relative;display:block;text-decoration:none;color:#fff;border-radius:22px;
 background:#0B1526;border:1px solid rgba(255,255,255,.09);overflow:hidden;
 transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s,box-shadow .45s;
 opacity:0;transform:translateY(18px)}
.hb-emp.vis{opacity:1;transform:none}
.hb-emp:hover{transform:translateY(-7px);border-color:rgba(77,141,255,.5);box-shadow:0 24px 54px rgba(0,0,0,.55)}
.hb-emp::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .4s;
 background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(77,141,255,.16),transparent 62%)}
.hb-emp:hover::before{opacity:1}

.hb-foto{position:relative;aspect-ratio:1/1;overflow:hidden;background:#08111f}
.hb-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);
 transition:opacity .5s ease,transform 3.2s linear;will-change:opacity,transform}
.hb-foto img.on{opacity:1;transform:scale(1.11)}
.hb-foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 background:linear-gradient(180deg,rgba(6,11,20,.62) 0%,transparent 24%,transparent 44%,rgba(6,11,20,.93) 100%)}

.hb-segs{position:absolute;z-index:4;top:11px;left:12px;right:12px;display:flex;gap:4px;opacity:0;transition:opacity .3s}
.hb-emp:hover .hb-segs{opacity:1}
.hb-segs i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.hb-segs i b{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.hb-segs i.feito b{width:100%}
.hb-segs i.agora b{animation:hbSeg 1150ms linear forwards}
@keyframes hbSeg{from{width:0}to{width:100%}}

.hb-fase{position:absolute;z-index:4;top:26px;left:14px;padding:6px 12px;border-radius:999px;
 font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
 background:rgba(6,11,20,.72);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.hb-fase.pronto{background:rgba(30,190,93,.92);border-color:transparent}
.hb-fase.vip{background:rgba(30,111,255,.92);border-color:transparent}
.hb-fase.obra{background:rgba(242,169,59,.92);border-color:transparent;color:#1a1206}

.hb-leg{position:absolute;z-index:4;left:16px;right:16px;bottom:68px;pointer-events:none}
.hb-leg .rot{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
 color:#9DB4D6;margin-bottom:3px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.hb-leg .n{display:block;font-size:20px;line-height:1.1;font-variation-settings:'wdth' 108,'wght' 850;
 text-wrap:balance;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.hb-leg .e{display:block;margin-top:5px;font-size:11px;line-height:1.35;color:#C8D4E6;text-shadow:0 1px 10px rgba(0,0,0,.7)}

.hb-acao{position:absolute;z-index:6;left:16px;right:16px;bottom:16px;display:flex;gap:9px}
.hb-acao a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 12px;border-radius:11px;
 font-size:13px;font-weight:800;letter-spacing:.02em;text-decoration:none;color:#fff;backdrop-filter:blur(6px);
 transition:transform .25s,filter .25s}
.hb-acao a:hover{transform:scale(1.03);filter:brightness(1.1)}
.hb-acao a.sim{background:#1EBE5D;box-shadow:0 8px 22px rgba(30,190,93,.34)}
.hb-acao a.mais{background:rgba(10,20,38,.78);border:1px solid rgba(255,255,255,.26)}
.hb-acao svg{width:14px;height:14px;fill:currentColor;flex:0 0 14px}

.hb-pe{display:flex;align-items:center;gap:12px;padding:14px 15px 15px}
.hb-zona{width:42px;height:42px;flex:0 0 42px;border-radius:50%;display:grid;place-items:center;
 font-size:12.5px;font-weight:900;color:#061018;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.hb-emp:hover .hb-zona{transform:scale(1.09)}
.hb-zona.zl{background:var(--zl)}.hb-zona.zs{background:var(--zs)}
.hb-zona.zc{background:var(--zc)}.hb-zona.zo{background:var(--zo)}
.hb-txt{min-width:0;flex:1}
.hb-txt b{display:block;font-size:15.5px;font-weight:800;line-height:1.2;white-space:nowrap;overflow:hidden;
 text-overflow:ellipsis;transition:transform .4s cubic-bezier(.2,.7,.3,1);color:#fff}
.hb-emp:hover .hb-txt b{transform:translateX(3px)}
.hb-txt span{display:block;margin-top:3px;font-size:12.5px;color:#8FA0B8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-conta{flex:0 0 auto;font-size:11px;font-weight:700;color:#6C7F99;letter-spacing:.04em;
 padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.06);white-space:nowrap}

/* 12º card — o convite */
.hb-convite{position:relative;display:flex;flex-direction:column;justify-content:center;border-radius:22px;
 overflow:hidden;text-decoration:none;color:#fff;padding:30px 26px;min-height:100%;
 background:linear-gradient(155deg,#123A8A 0%,#0B1E4A 42%,#0B1526 100%);border:1px solid rgba(120,165,255,.30);
 transition:transform .45s cubic-bezier(.2,.7,.3,1),border-color .45s,box-shadow .45s;opacity:0;transform:translateY(18px)}
.hb-convite.vis{opacity:1;transform:none}
.hb-convite:hover{transform:translateY(-7px);border-color:rgba(120,165,255,.6);box-shadow:0 24px 54px rgba(0,0,0,.55)}
.hb-convite::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(420px circle at 22% 8%,rgba(77,141,255,.28),transparent 62%)}
.hb-convite::after{content:"";position:absolute;right:-70px;bottom:-70px;width:250px;height:250px;border-radius:50%;
 background:radial-gradient(circle,rgba(30,190,93,.20),transparent 68%);pointer-events:none}
.hb-convite img{position:relative;width:46px;margin-bottom:20px;opacity:.95}
.hb-convite h3{position:relative;font-size:clamp(21px,2.2vw,26px);line-height:1.12;letter-spacing:-.02em;
 font-variation-settings:'wdth' 106,'wght' 830;text-transform:uppercase;color:#fff;margin:0}
.hb-convite p{position:relative;margin:12px 0 0;font-size:14px;line-height:1.55;color:#B9C8DE;max-width:30ch}
.hb-convite .bt{position:relative;margin-top:auto;padding-top:22px}
.hb-convite .bt span{display:inline-flex;align-items:center;padding:12px 17px;border-radius:11px;font-size:13.5px;
 font-weight:800;background:#1EBE5D;box-shadow:0 8px 22px rgba(30,190,93,.34);transition:transform .25s,filter .25s}
.hb-convite:hover .bt span{transform:scale(1.03);filter:brightness(1.08)}
.hb-convite .obs{position:relative;margin-top:14px;font-size:11.5px;color:#7E90AC}

.hb-vazio{display:none;padding:34px 6px;color:#8FA0B8;font-size:15px}
.hb-vazio.on{display:block}

@media(max-width:660px){
 .hb-foto{aspect-ratio:4/3}
 .hb-leg .n{font-size:18px}
 .hb-zona{width:38px;height:38px;flex-basis:38px;font-size:11.5px}
 .hb-convite{padding:26px 22px;min-height:230px}
}
@media (prefers-reduced-motion:reduce){
 .hb-emp,.hb-convite,.hb-foto img,.hb-zona,.hb-txt b,.hb-acao a{transition:none}
 .hb-emp,.hb-convite{opacity:1;transform:none}
 .hb-segs i.agora b{animation:none;width:100%}
 .hb-foto img.on{transform:scale(1.05)}
 .hb-emp::before{display:none}
}