/* FabLab Demo (prueba sin registro) · prefijo .fdm- · v6.8.0.0 */

.fdm-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }

.fdm-head { text-align: center; margin: 8px 0 14px; }
.fdm-head h1 { font-size: clamp(22px, 3.4vw, 34px); font-weight: 800; color: #0F172A; margin: 0 0 6px; letter-spacing: -0.02em; }
.fdm-head p { font-size: 15px; color: #475569; margin: 0; }

.fdm-viewer-shell { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid #E2E8F0; box-shadow: 0 10px 32px rgba(0,0,0,.08); }
.fdm-viewer-shell .viewer-container { height: min(72vh, 640px) !important; }

/* ── Coach overlay ── */
#demo-coach { position: absolute; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; transition: opacity .35s; }
#demo-coach.demo-hidden { opacity: 0; pointer-events: none; }

.fdm-tip { position: absolute; background: #fff; border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #0F172A; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 230px; line-height: 1.45; }
.fdm-tip small { display: block; font-weight: 500; color: #475569; margin-top: 2px; }
.fdm-tip-left   { left: 86px; top: 38px; }
.fdm-tip-bottom { left: 50%; transform: translateX(-50%); bottom: 96px; }
.fdm-tip-center { left: 50%; top: 34%; transform: translate(-50%, -50%); text-align: center; }

#demo-coach-close { position: absolute; left: 50%; transform: translateX(-50%); top: 56%; padding: 13px 30px; border: none; border-radius: 12px; background: linear-gradient(to bottom, #60a5fa, #2563eb); color: #fff; font-size: 16px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px rgba(37, 99, 235, .45); }
#demo-coach-close:hover { transform: translateX(-50%) translateY(-2px); }

@media (max-width: 640px) {
    .fdm-tip-left { left: 78px; top: 20px; max-width: 170px; }
    .fdm-tip-bottom { bottom: 110px; max-width: 190px; }
    .fdm-tip { font-size: 12px; }
}

/* ── CTA bajo el visor ── */
.fdm-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; background: #fff; border: 1px solid #E2E8F0; border-radius: 14px; padding: 16px 20px; }
.fdm-cta p { margin: 0; font-size: 14px; color: #334155; line-height: 1.55; max-width: 560px; }
.fdm-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.fdm-btn-pri, .fdm-btn-sec { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; line-height: 1; }
.fdm-btn-pri { background: linear-gradient(to bottom, #60a5fa, #2563eb); color: #fff !important; }
.fdm-btn-sec { background: #fff; border: 1.5px solid #E2E8F0; color: #0F172A !important; }
.fdm-btn-sec:hover { border-color: #2563eb; color: #2563eb !important; }