/* Animação do topo da página Reformas (index.html): visão do cliente.
   O cliente faz o pedido, recebe até 4 orçamentos, escolhe um e só então
   o contato é liberado. Valores e profissionais são ilustrativos. */
.hero-art.hx{display:flex;justify-content:center;align-items:center}
.hx-stage{position:relative;width:100%;max-width:420px;aspect-ratio:420/480;perspective:1100px;font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;color:var(--ink,#1b2733)}
.hx-orb{position:absolute;border-radius:50%;filter:blur(38px);opacity:.55;pointer-events:none;animation:hx-drift 14s ease-in-out infinite}
.hx-orb.o1{width:210px;height:210px;left:-30px;top:10px;background:radial-gradient(circle,#ffb35c 0%,rgba(255,179,92,0) 70%)}
.hx-orb.o2{width:240px;height:240px;right:-40px;bottom:0;background:radial-gradient(circle,#4fd1a5 0%,rgba(79,209,165,0) 70%);animation-delay:-6s;opacity:.4}
@keyframes hx-drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18px,-14px) scale(1.08)}66%{transform:translate(-12px,12px) scale(.95)}}
.hx-grid{position:absolute;inset:6% 4%;border-radius:26px;background-image:radial-gradient(rgba(255,255,255,.22) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);pointer-events:none}
.hx-float{display:none!important}

.hx-tilt{position:absolute;left:2%;right:8%;top:8%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hx-card{position:relative;background:#fff;border-radius:18px;box-shadow:0 24px 50px rgba(6,26,44,.35),0 2px 0 rgba(255,255,255,.6) inset;padding:16px 16px 14px;animation:hx-in .8s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes hx-in{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:none}}
.hx-top{display:flex;align-items:center;gap:8px;font-size:.92rem}
.hx-live{width:10px;height:10px;border-radius:50%;background:var(--accent,#f28c28);box-shadow:0 0 0 0 rgba(242,140,40,.6);animation:hx-ping 1.6s ease-out infinite}
@keyframes hx-ping{0%{box-shadow:0 0 0 0 rgba(242,140,40,.6)}100%{box-shadow:0 0 0 10px rgba(242,140,40,0)}}
.hx-top b{font-family:Montserrat,"Source Sans 3",sans-serif;font-weight:700;color:var(--brand,#0f3d5e)}
.hx-tag{margin-left:auto;font-size:.72rem;font-weight:700;color:var(--muted,#5d6b78);background:#f1f4f7;border-radius:999px;padding:2px 9px}
.hx-req{display:flex;align-items:center;gap:12px;margin:12px 0 10px;transition:opacity .35s,transform .35s}
.hx-ic{width:46px;height:46px;flex:0 0 46px;border-radius:12px;background:#fff3e6;color:var(--accent,#f28c28);display:grid;place-items:center}
.hx-ic svg{width:24px;height:24px}
.hx-req b{display:block;font-size:1.05rem;line-height:1.2}
.hx-req small{display:block;color:var(--muted,#5d6b78);font-size:.85rem}
.hx-swap .hx-req,.hx-swap .hx-list{opacity:0;transform:translateY(6px)}
.hx-cnt{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted,#5d6b78);margin-top:2px}
.hx-cnt b{color:var(--ink,#1b2733)}
.hx-bar{height:8px;border-radius:99px;background:#edf1f5;overflow:hidden;margin:6px 0 10px}
.hx-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent,#f28c28),#ffb35c);position:relative;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.hx-bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:hx-shine 2.2s ease-in-out infinite}
@keyframes hx-shine{to{transform:translateX(100%)}}
.hx-list{display:flex;flex-direction:column;gap:8px;min-height:162px;transition:opacity .35s,transform .35s}
.hx-q{display:grid;grid-template-columns:38px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line,#e3e8ee);border-radius:12px;background:#fbfcfd;position:relative;animation:hx-qin .55s cubic-bezier(.2,.9,.25,1.15) both;transition:border-color .3s,box-shadow .3s,transform .3s,opacity .3s}
@keyframes hx-qin{from{opacity:0;transform:translateX(26px) scale(.97)}to{opacity:1;transform:none}}
.hx-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.85rem;background:var(--brand-2,#14597f)}
.hx-av{overflow:hidden;align-items:end}
.hx-av svg{width:100%;height:100%;display:block}
.hx-q:nth-child(2) .hx-av{background:#7a4fd1}
.hx-q:nth-child(3) .hx-av{background:#1f9d6b}
.hx-qn{min-width:0;line-height:1.2}
.hx-qn b{display:block;font-size:.92rem}
.hx-qn small{display:flex;align-items:center;gap:4px;color:var(--muted,#5d6b78);font-size:.78rem;white-space:nowrap}
.hx-qn small svg{width:12px;height:12px;color:#f5a623;fill:#f5a623;stroke:#f5a623}
.hx-pr{font-family:Montserrat,"Source Sans 3",sans-serif;font-weight:700;color:var(--brand,#0f3d5e);font-size:.95rem;white-space:nowrap}
.hx-pick .hx-q{opacity:.5}
.hx-pick .hx-q.on{opacity:1;border-color:var(--ok,#1f9d6b);box-shadow:0 0 0 3px rgba(31,157,107,.18),0 10px 22px rgba(31,157,107,.18);transform:scale(1.02);background:#fff}
.hx-badge{position:absolute;right:-8px;top:-10px;background:var(--ok,#1f9d6b);color:#fff;font-size:.7rem;font-weight:700;border-radius:999px;padding:3px 9px 3px 6px;display:flex;align-items:center;gap:4px;box-shadow:0 6px 14px rgba(31,157,107,.35);animation:hx-pop .45s cubic-bezier(.2,.9,.3,1.4) both}
.hx-badge svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:3}
@keyframes hx-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.hx-note{margin-top:10px;font-size:.72rem;color:#8a97a5;text-align:right}

.hx-toast{position:absolute;right:-4%;top:-16px;background:var(--brand,#0f3d5e);color:#fff;font-size:.8rem;font-weight:700;border-radius:999px;padding:6px 12px;display:flex;align-items:center;gap:6px;box-shadow:0 10px 24px rgba(6,26,44,.35);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .3s,transform .3s;pointer-events:none;transform-style:preserve-3d}
.hx-toast.on{opacity:1;transform:translateZ(30px)}
.hx-toast i{width:8px;height:8px;border-radius:50%;background:#ffc784}

.hx-lock{position:absolute;left:2%;right:8%;bottom:2%;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:11px 14px;box-shadow:0 16px 34px rgba(6,26,44,.3);font-size:.9rem;line-height:1.25;animation:hx-in .8s .3s cubic-bezier(.2,.9,.25,1.1) both}
.hx-lk{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:grid;place-items:center;background:#e9f7f1;color:var(--ok,#1f9d6b)}
.hx-lk svg{width:18px;height:18px;overflow:visible}
.hx-lk .sh{transition:transform .45s cubic-bezier(.3,1.5,.5,1);transform-origin:16px 9px}
.hx-open .hx-lk .sh{transform:translateY(-3px) rotate(-28deg)}
.hx-open .hx-lock{box-shadow:0 0 0 3px rgba(31,157,107,.25),0 16px 34px rgba(6,26,44,.3)}
.hx-lt{transition:opacity .3s}

@media (max-width:860px){
  .hero-art.hx{display:flex;margin-top:8px;padding:18px 0 10px}
  .hx-toast{right:10px}
  .hx-stage{max-width:380px;aspect-ratio:auto}
  .hx-tilt{position:relative;left:auto;right:auto;top:auto;margin:0 6% 0 0}
  .hx-lock{position:relative;left:auto;right:auto;bottom:auto;margin:8px 6% 0 0}
  .hx-orb,.hx-grid{display:none}
      }
@media (prefers-reduced-motion:reduce){
  .hx-orb,.hx-live,.hx-bar i::after{animation:none}
  .hx-card,.hx-q,.hx-lock,.hx-badge{animation:none}
  .hx-tilt{transition:none}
}