@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); :root{ --bg-scene:#08100e; --bg-scene-2:#050a08; --bg-panel:#ede7d8; --ink:#25211a; --ink-soft:#79705d; --rust:#b14a2e; --gold:#a9812f; --line:#d3c9ae; --teal-glow: 46,107,94; --panel-width: 420px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;height:100%;background:var(--bg-scene);font-family:'Inter',sans-serif;color:var(--ink); overflow:hidden;} #app{ display:flex; width:100%; height:100vh; min-height:560px; overflow:hidden; } /* SCENE PANEL */ #scene-wrap{ position:relative; flex:1; min-width:0; background: radial-gradient(ellipse at 50% 42%, rgba(var(--teal-glow),0.25) 0%, rgba(var(--teal-glow),0.05) 35%, transparent 60%), radial-gradient(ellipse at 50% 100%, var(--bg-scene-2) 0%, #030504 100%); cursor:grab; } #scene-wrap.dragging{cursor:grabbing;} #scene-wrap canvas{display:block; width:100%; height:100%;} #loading-overlay { position: absolute; inset: 0; background: rgba(8, 16, 14, 0.85); display: flex; justify-content: center; align-items: center; color: #e9e0c8; font-family: 'IBM Plex Mono', monospace; font-size: 13px; z-index: 100; opacity: 1; transition: opacity 0.4s ease; pointer-events: none; } #loading-overlay.fade-out { opacity: 0; } .tip-card{ position:absolute; top:22px; right:22px; left:auto; background:#f4eede; border:1px solid var(--line); box-shadow:0 6px 18px rgba(0,0,0,0.35); padding:12px 16px 13px; width:150px; transform:rotate(2deg); font-family:'IBM Plex Mono',monospace; font-size:11px; line-height:1.65; color:var(--ink); z-index: 10; } .tip-card .tip-head{ font-family:'Fraunces',serif; font-style:italic; font-size:13px; margin-bottom:8px; color:var(--rust); } .tip-card .tip-line{ padding-left:12px; text-indent:-12px; margin-bottom:3px; } .tip-card .tip-line:last-child{margin-bottom:0;} .catalog-badge{ position:absolute; top:22px; left:22px; right:auto; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; color:#bcd8cf; text-align:left; opacity:0.75; z-index: 10; } .catalog-badge span{display:block;} .catalog-badge .num{font-size:20px; color:#e9e0c8; letter-spacing:0.02em;} .pedestal-label{ position:absolute; bottom:92px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.16em; color:rgba(233,224,200,0.45); text-transform:uppercase; pointer-events:none; z-index: 10; } /* HOTSPOTS */ #hotspot-layer{ position:absolute; inset:0; pointer-events:none; z-index: 5; } .hotspot{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px rgba(169,129,47,0.3), 0 0 15px rgba(169,129,47,0.8); cursor:pointer; pointer-events:auto; transition:transform 0.15s ease, opacity 0.3s ease; } .hotspot:hover{transform:scale(1.25);} .hotspot.active{background:var(--rust); box-shadow:0 0 0 5px rgba(177,74,46,0.35), 0 0 18px rgba(177,74,46,0.9);} .hotspot::after{ content:''; position:absolute; inset:3px; border-radius:50%; background:#f3e3ba; } .hotspot-note{ position:absolute; max-width:220px; background:#f4eede; border:1px solid var(--line); box-shadow:0 8px 25px rgba(0,0,0,0.5); padding:12px 14px; font-size:12.5px; line-height:1.55; color:var(--ink); pointer-events:none; transform:translate(-50%,-135%); z-index: 15; } .hotspot-note::after{ content:''; position:absolute; left:50%; bottom:-6px; width:12px; height:12px; margin-left:-6px; background:#f4eede; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); } /* ORGAN TABS */ #organ-strip{ position:absolute; bottom:18px; right:22px; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px; z-index: 10; } .organ-tab{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; color:rgba(233,224,200,0.6); background:rgba(233,224,200,0.05); border:1px solid rgba(233,224,200,0.15); padding:9px 16px; cursor:pointer; transition:all 0.2s ease; text-transform:uppercase; } .organ-tab:hover{color:#e9e0c8; border-color:rgba(233,224,200,0.4); background:rgba(233,224,200,0.1);} .organ-tab.active{ color:#0c1613; background:var(--gold); border-color:var(--gold); box-shadow: 0 0 15px rgba(169,129,47, 0.4); } /* Crédito flotante mínimo */ .float-credit{ position:absolute; bottom:18px; left:22px; z-index:10; font-family:'IBM Plex Mono',monospace; font-size:10px; line-height:1.5; color:rgba(233,224,200,0.55); max-width:320px; } .float-credit a{color:rgba(233,224,200,0.85); text-decoration:underline;} .legal-links{ position:absolute; left:0; right:0; bottom:44px; z-index:11; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(233,224,200,0.4); } .legal-links a{color:rgba(233,224,200,0.65); text-decoration:none; border-bottom:1px solid rgba(233,224,200,0.25);} .legal-links a:hover{color:#e9e0c8; border-bottom-color:#e9e0c8;} .brand-mark{ position:absolute; left:0; right:0; bottom:18px; z-index:12; text-align:center; pointer-events:none; } .brand-mark .brand-sig{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:0.03em; color:rgba(233,224,200,0.55); } .brand-mark .brand-icon{width:14px; height:14px; border-radius:50%; flex-shrink:0;} .brand-mark .brand-sig a{ color:rgba(233,224,200,0.8); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(233,224,200,0.35); } .brand-mark .brand-sig a:hover{color:#e9e0c8; border-bottom-color:#e9e0c8;} .brand-mark .claude-star{color:var(--rust); font-size:14px; margin:0 6px; display:inline-block;} .brand-mark .brand-inspired{ margin-top:1px; font-family:'IBM Plex Mono',monospace; font-size:8.5px; color:rgba(233,224,200,0.35); } .brand-mark .brand-inspired a{ color:rgba(233,224,200,0.5); pointer-events:auto; text-decoration:none; border-bottom:1px solid rgba(233,224,200,0.2); } .brand-mark .brand-inspired a:hover{color:rgba(233,224,200,0.8);} .reset-view-btn{ position:absolute; top:128px; left:22px; z-index:10; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:#e9e0c8; background:rgba(20,30,26,0.55); border:1px solid rgba(233,224,200,0.35); padding:9px 14px; cursor:pointer; text-transform:uppercase; transition:background 0.2s ease, border-color 0.2s ease; opacity:0; pointer-events:none; } .reset-view-btn.visible{opacity:1; pointer-events:auto;} .reset-view-btn:hover{background:rgba(20,30,26,0.85); border-color:rgba(233,224,200,0.7);} .title-card{ position:absolute; top:70px; left:22px; z-index:10; max-width:280px; } .title-card h1{ font-family:'Fraunces',serif; font-size:26px; font-weight:600; color:#e9e0c8; margin:0 0 4px; line-height:1.1; } .title-card p{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:rgba(233,224,200,0.6); margin:0; letter-spacing:0.04em; } @media (max-width:960px){ #app{flex-direction:column;} #scene-wrap{flex:1;} .title-card{max-width:220px; top:64px;} .title-card h1{font-size:20px;} .reset-view-btn{top:114px;} .pedestal-label { bottom: 120px; font-size:9px; max-width:88vw; text-align:center; white-space:normal; } .float-credit{max-width:140px; font-size:9px;} #organ-strip{flex-direction:column; align-items:flex-end;} .brand-mark .brand-sig{max-width:170px; margin:0 auto; flex-wrap:wrap; font-size:8px;} .brand-mark .brand-inspired{font-size:7.5px;} .legal-links{bottom:56px;} }