/* ═══════════════════════════════════════════
   E Basic TI · Componentes: burbujas flotantes (QR y WhatsApp) y galería
   ═══════════════════════════════════════════ */

/* ── Burbujas flotantes (QR y WhatsApp) ── */
.fab-stack { position: fixed; right: 18px; bottom: 22px; z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.fab {
  height: 56px; width: 56px; border-radius: 9999px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.35); cursor: pointer; transition: transform .25s ease, box-shadow .25s ease;
  border: none;
}
.fab:hover { transform: translateY(-4px) scale(1.06); }
.fab-wa { background: #25d366; color: #fff; }
.fab-qr { background: var(--card); border: 1.5px solid var(--line); color: var(--primary); }
.fab-qr:hover { border-color: var(--primary); }

/* Tarjeta del QR (aparece al hover / tap) */
.qr-pop {
  position: absolute; right: 68px; bottom: 0; width: 232px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px;
  box-shadow: 0 24px 60px -16px var(--glow), 0 8px 24px -10px rgba(0,0,0,.25);
  opacity: 0; transform: translateX(14px) scale(.94); pointer-events: none;
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1.4);
}
.qr-wrap:hover .qr-pop, .qr-wrap.open .qr-pop { opacity: 1; transform: none; pointer-events: auto; }
@keyframes wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 100% { box-shadow: 0 0 0 18px rgba(37,211,102,0); } }
.fab-wa { animation: wa-pulse 2.2s ease-out infinite; }

/* ── Galería de proyecto (Cucina) ── */
.shot { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); background: var(--card); cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; display: block; }
.shot:hover img { transform: scale(1.06); }
.shot-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); background: var(--surface); border: 1.5px dashed var(--line); cursor: default; min-height: 210px; }