* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
    #cur { position: fixed; width: 7px; height: 7px; background: #cff782; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: transform 0.15s, background 0.15s; opacity: 0; }
    #cur-ring { position: fixed; width: 30px; height: 30px; border: 1.5px solid #cff782; border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%,-50%); transition: width 0.25s, height 0.25s, border-radius 0.25s, border-color 0.25s; opacity: 0; }

    /* BACK TO TOP */

    /* CLOSING NOTES */
    .closing-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 1.5rem; }
    .closing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 3rem; }
    .closing-card-impact { grid-column: span 2; background: rgba(207,247,130,0.04); border-color: rgba(207,247,130,0.12); }
    .closing-card-body { font-size: 0.9rem; color: #aaa; line-height: 1.9; }
    .closing-list { list-style: none; display: flex; flex-direction: column; gap: 1.2rem; }
    .closing-list li { font-size: 0.88rem; color: #aaa; line-height: 1.8; padding-left: 0; }
    .closing-tag { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 2px; margin-right: 0.5rem; margin-bottom: 0.3rem; letter-spacing: 1px; text-transform: uppercase; }
    .closing-tag-blue { background: rgba(80,128,224,0.15); color: #7090d0; border: 1px solid rgba(80,128,224,0.2); }
    .closing-tag-green { background: rgba(80,160,96,0.15); color: #60b070; border: 1px solid rgba(80,160,96,0.2); }
    .closing-tag-gold { background: rgba(207,247,130,0.12); color: #cff782; border: 1px solid rgba(207,247,130,0.2); }
    .closing-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; padding: 1rem 0; }
    .closing-stat-label { font-size: 0.78rem; color: #888; line-height: 1.5; }
    .closing-btn-next { border: 1px solid rgba(207,247,130,0.3); color: #cff782; }
    .closing-btn-next:hover { background: rgba(207,247,130,0.1); border-color: #cff782; }
    @media (max-width: 768px) { .closing-grid { grid-template-columns: 1fr; } .closing-card-impact { grid-column: span 1; } .closing-stats { grid-template-columns: 1fr; gap: 1.5rem; } }
    .steam-btn { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 1.5rem; padding: 0.6rem 1.2rem; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); color: #aaa; text-decoration: none; font-size: 0.8rem; font-family: 'DM Sans', sans-serif; transition: all 0.2s; }
    .steam-btn:hover { background: rgba(207,247,130,0.1); border-color: rgba(207,247,130,0.4); color: #cff782; }
    .steam-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
    .case-meta-item { font-family: 'DM Mono', monospace; font-size: 0.72rem; color: #666; letter-spacing: 1px; }
    .case-meta-sep { color: #555; font-size: 0.7rem; }

    /* LATERAL PROGRESS */
    .lateral-progress { position: fixed; right: 1.5rem; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-end; }

    /* NAV */
    nav { position: fixed; top: 0; left: 0; right: 0; height: 64px; display: flex; justify-content: space-between; align-items: center; padding: 0 3rem; background: rgba(5,6,8,0.9); backdrop-filter: blur(10px); z-index: 300; border-bottom: 1px solid rgba(207,247,130,0.1); }

    /* PROGRESS BAR */

    /* HERO */
    .proj-hero { margin-top: 64px; height: 70vh; max-height: 700px; min-height: 480px; position: relative; overflow: hidden; background: linear-gradient(135deg, #050606 0%, #0a0d18 50%, #050810 100%); display: flex; align-items: flex-end; }
    .proj-hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% -20%, rgba(40,60,140,0.25) 0%, transparent 65%); }
    .proj-hero-content { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 2rem 3rem 2.5rem; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; }
    .proj-hero-logo img { max-width: 100%; max-height: 180px; object-fit: contain; filter: drop-shadow(0 0 40px rgba(80,120,220,0.4)); }
    .proj-hero-title { font-family: 'Syne', sans-serif; font-size: 3.2rem; font-weight: 700; line-height: 1.05; color: #fff; margin-bottom: 2rem; }
    .proj-hero-title em { font-style: normal; color: #cff782; }
    .platform-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
    .plat-badge { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: #aaa; border: 1px solid rgba(255,255,255,0.15); padding: 0.2rem 0.5rem; letter-spacing: 0.5px; }
    .proj-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem 1rem; }
    .proj-info-item { border-left: 2px solid rgba(207,247,130,0.25); padding-left: 0.8rem; }
    .proj-info-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; color: #666; margin-bottom: 0.2rem; }
    .proj-info-val { font-size: 0.85rem; color: #bbb; }

    /* CONTENT */
    .content-wrap { max-width: 1100px; margin: 0 auto; padding: 0 3rem 6rem; }
    .content-wrap .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.215,0.61,0.355,1), transform 0.65s cubic-bezier(0.215,0.61,0.355,1); }
    .content-wrap .reveal.visible { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: reduce) { .content-wrap .reveal { transition: none; } }

    /* SECTION */
    .proj-section { padding: 5rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
    .section-header { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 2rem; }
    .section-intro { font-size: 1rem; color: #aaa; line-height: 1.9; margin-bottom: 2.5rem; padding-left: 1.5rem; border-left: 3px solid rgba(207,247,130,0.3); max-width: 780px; }

    /* DETAIL BLOCKS */
    .detail-block { margin-bottom: 2.5rem; }
    .detail-block h4 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: #cff782; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(207,247,130,0.1); }
    .detail-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
    .detail-list li { padding: 0.9rem 1.2rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-left: 3px solid rgba(207,247,130,0.35); font-size: 0.9rem; color: #bbb; line-height: 1.75; }
    .detail-list li strong { color: #ddd; font-weight: 600; }

    /* PILLARS */
    .pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.5rem 0; }
    .pillar-card { padding: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(207,247,130,0.1); }
    .pillar-num { font-family: 'DM Mono', monospace; font-size: 1.8rem; color: rgba(207,247,130,0.12); line-height: 1; margin-bottom: 0.8rem; }
    .pillar-title { font-family: 'Syne', sans-serif; font-size: 1.2rem; color: #fff; margin-bottom: 0.6rem; }
    .pillar-desc { font-size: 0.85rem; color: #999; line-height: 1.7; }

    /* CHALLENGES */
    .challenges-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
    .challenge-card { padding: 1.3rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
    .challenge-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; }
    .challenge-label.problem { color: #a05050; }
    .challenge-label.solution { color: #50a070; }
    .challenge-text { font-size: 0.88rem; color: #aaa; line-height: 1.65; }

    /* TAKEAWAYS */
    .takeaways { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.5rem 0; }
    .takeaway { display: flex; gap: 1rem; align-items: flex-start; padding: 0.9rem 1.2rem; background: rgba(207,247,130,0.03); border: 1px solid rgba(207,247,130,0.1); }
    .takeaway-icon { color: #cff782; font-size: 0.7rem; margin-top: 0.2rem; flex-shrink: 0; }
    .takeaway-text { font-size: 0.88rem; color: #bbb; line-height: 1.65; }

    /* PACING DIAGRAM */
    .pacing-diagram { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); padding: 1.5rem 1.5rem 1rem; margin-top: 1rem; position: relative; }
    .pacing-legend { display: flex; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
    .pd-legend-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: #888; }
    .pd-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .pacing-chart { display: flex; gap: 0.5rem; align-items: stretch; }
    .pacing-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-family: 'DM Mono', monospace; font-size: 0.65rem; color: #444; padding-bottom: 1.5rem; width: 24px; text-align: right; }
    .pacing-grid { flex: 1; position: relative; height: 200px; }
    .pg-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(255,255,255,0.05); }
    .pacing-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
    .pd-event { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
    .pd-event-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.2); }
    .pd-event-name { font-family: 'DM Mono', monospace; font-size: 0.55rem; color: #666; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 2px; }
    .pacing-x-label { text-align: center; font-size: 0.65rem; color: #555; margin-top: 0.5rem; padding-left: 2rem; }

    /* LEVEL SEQUENCE */
    .seq-legend { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .seq-leg-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: #888; }
    .seq-leg-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
    .seq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.05); margin-top: 0.5rem; }
    .seq-col { background: #060608; padding: 1.2rem 0.8rem; display: flex; flex-direction: column; align-items: center; gap: 0; }
    .seq-col-title { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 2px; color: #cff782; margin-bottom: 1rem; text-transform: uppercase; border-bottom: 1px solid rgba(207,247,130,0.2); padding-bottom: 0.5rem; width: 100%; text-align: center; }
    .seq-node { width: 100%; padding: 0.5rem 0.7rem; font-size: 0.75rem; text-align: center; border-radius: 3px; margin: 0; }
    .seq-node strong { display: block; font-size: 0.78rem; margin-bottom: 0.2rem; }
    .seq-node span { font-size: 0.68rem; color: rgba(255,255,255,0.5); display: block; }
    .seq-node small { font-size: 0.62rem; color: rgba(255,255,255,0.35); display: block; margin-top: 0.2rem; }
    .seq-combat { background: rgba(224,80,80,0.15); border: 1px solid rgba(224,80,80,0.3); color: #f08080; }
    .seq-puzzle { background: rgba(224,144,48,0.15); border: 1px solid rgba(224,144,48,0.3); color: #e0a060; }
    .seq-cinematic { background: rgba(128,80,192,0.15); border: 1px solid rgba(128,80,192,0.3); color: #a080d0; }
    .seq-collectible { background: rgba(80,160,96,0.15); border: 1px solid rgba(80,160,96,0.3); color: #70c080; font-size: 0.68rem; }
    .seq-boss { background: rgba(200,0,0,0.2); border: 1px solid rgba(200,0,0,0.4); color: #ff6060; }
    .seq-special { background: rgba(80,160,192,0.15); border: 1px solid rgba(80,160,192,0.3); color: #60b0d0; }
    .seq-start { background: rgba(207,247,130,0.12); border: 1px solid rgba(207,247,130,0.3); color: #cff782; font-size: 0.75rem; font-weight: 600; }
    .seq-stream { background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.15); color: #555; font-size: 0.68rem; font-family: 'DM Mono', monospace; }
    .seq-arrow { width: 1px; height: 16px; background: rgba(255,255,255,0.1); margin: 3px auto; flex-shrink: 0; position: relative; }
    .seq-arrow::after { content: '▼'; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 0.4rem; color: rgba(255,255,255,0.2); }
    .seq-label-arrow { width: 1px; height: 28px; background: rgba(207,247,130,0.3); margin: 3px auto; flex-shrink: 0; position: relative; }
    .seq-label-text { font-size: 0.62rem; color: #cff782; text-align: center; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0; width: 100%; }
    .seq-row-branch { display: flex; gap: 0.4rem; width: 100%; justify-content: center; margin: 3px 0; }
    .seq-row-branch .seq-node { flex: 1; }
    .seq-branch { border-style: dashed; }

    /* AREA OVERVIEW */
    .sketches-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0.8rem; margin-top: 1rem; }
    .sketches-grid-item { overflow: hidden; background: #0a0a12; border: 1px solid rgba(255,255,255,0.05); cursor: pointer; }
    .sketches-grid-item img { width: 100%; height: auto; display: block; transition: transform 0.35s, opacity 0.3s; }
    .sketches-grid-item:hover img { transform: scale(1.04); opacity: 0.82; }
    .area-showcase-wrap { position: relative; cursor: pointer; overflow: hidden; border: 1px solid rgba(207,247,130,0.2); margin-top: 1rem; }
    .area-showcase-wrap img { width: 100%; height: auto; display: block; transition: transform 0.4s, opacity 0.3s; }
    .area-showcase-wrap:hover img { transform: scale(1.01); opacity: 0.9; }
    .area-showcase-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 0.3s; }
    .area-showcase-overlay span { color: #cff782; font-size: 0.9rem; border: 1px solid #cff782; padding: 0.6rem 1.2rem; background: rgba(5,6,8,0.7); }
    .area-showcase-wrap:hover .area-showcase-overlay { opacity: 1; }

    /* EXCEL CALLOUT */
    .excel-callout { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.2rem 1.5rem; background: rgba(29,111,66,0.08); border: 1px solid rgba(29,111,66,0.25); border-left: 3px solid #1D6F42; margin: 1.5rem 0; }
    .excel-callout-icon svg { width: 36px; height: 36px; flex-shrink: 0; margin-top: 0.1rem; }
    .excel-callout-title { font-size: 0.88rem; font-weight: 600; color: #4ab870; margin-bottom: 0.3rem; }
    .excel-callout-desc { font-size: 0.82rem; color: #777; line-height: 1.6; }

    /* BENTO GRID */
    .bento-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 3px; margin-top: 1rem; background: #050606; }
    .bento-item { overflow: hidden; cursor: pointer; position: relative; background: #080a0e; }
    .bento-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease, opacity 0.25s; }
    .bento-item:hover img { transform: scale(1.06); opacity: 0.85; }
    .bento-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.5rem 0.7rem; background: linear-gradient(to top, rgba(5,6,8,0.92) 0%, transparent 100%); font-family: 'DM Mono', monospace; font-size: 0.6rem; color: #888; line-height: 1.4; opacity: 0; transition: opacity 0.25s; }
    .bento-item:hover .bento-label { opacity: 1; }
    .bento-tall { grid-row: span 2; }
    .bento-wide { grid-column: span 2; }
    @media (max-width: 768px) { .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, 160px); } .bento-tall { grid-row: span 1; } .bento-wide { grid-column: span 2; } }

    /* MASONRY ECONOMY */
    @media (max-width: 768px) { }
    .scripting-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1rem; }
    .scripting-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .scripting-img { position: relative; overflow: hidden; background: #0a0a12; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
    .scripting-img img { width: 100%; height: auto; display: block; transition: transform 0.3s, opacity 0.3s; }
    .scripting-img:hover img { transform: scale(1.03); opacity: 0.8; }
    .scripting-zoom { position: absolute; top: 0.5rem; right: 0.5rem; color: #cff782; font-size: 1rem; opacity: 0; transition: opacity 0.2s; }
    .scripting-img:hover .scripting-zoom { opacity: 1; }
    .video-player { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
    .video-featured { position: relative; aspect-ratio: 16/9; background: #0a0a12; border: 1px solid rgba(207,247,130,0.2); overflow: hidden; }
    .video-featured iframe { width: 100%; height: 100%; border: none; }
    .video-thumbs { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.3rem; }
    .video-thumbs::-webkit-scrollbar { height: 3px; }
    .video-thumbs::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
    .video-thumbs::-webkit-scrollbar-thumb { background: rgba(207,247,130,0.3); }
    .video-thumb { position: relative; flex-shrink: 0; width: 140px; aspect-ratio: 16/9; overflow: hidden; border: 1px solid rgba(255,255,255,0.06); cursor: pointer; transition: border-color 0.2s; }
    .video-thumb:hover { border-color: rgba(207,247,130,0.4); }
    .video-thumb.active { border-color: #cff782; }
    .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.2s; }
    .video-thumb:hover img { opacity: 0.7; }
    .video-thumb.active img { opacity: 0.5; }
    .vthumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.2rem; opacity: 0; transition: opacity 0.2s; }
    .video-thumb:hover .vthumb-overlay { opacity: 1; }
    .video-thumb.active .vthumb-overlay { opacity: 1; color: #cff782; }
    .vthumb-num { position: absolute; bottom: 0.3rem; right: 0.4rem; font-family: 'DM Mono', monospace; font-size: 0.65rem; color: #cff782; }
    .video-wrap { position: relative; aspect-ratio: 16/9; background: #0a0a12; border: 1px solid rgba(255,255,255,0.06); overflow: hidden; }
    .video-wrap iframe { width: 100%; height: 100%; border: none; }

    /* SLIDER (overrides de página; el común vive en case.css) */
    .slider-wrap { background: #0a0a12; border: 1px solid rgba(255,255,255,0.06); }
    .slider-track img { max-height: 1000px; }
    /* ── BEFORE/AFTER COMPARE ── */
    .compare { --p: 50%; position: relative; min-width: 100%; aspect-ratio: 16 / 9; max-height: 1000px; overflow: hidden; background: #0a0a12; cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
    .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
    .compare .cmp-before { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
    .compare .cmp-divider { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; background: #cff782; transform: translateX(-50%); pointer-events: none; box-shadow: 0 0 8px rgba(207,247,130,0.5); }
    .compare .cmp-handle { position: absolute; top: 50%; left: var(--p); transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; background: #cff782; color: #050606; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; pointer-events: none; box-shadow: 0 2px 12px rgba(0,0,0,0.45); transition: transform 0.12s; }
    .compare.dragging .cmp-handle { transform: translate(-50%,-50%) scale(1.1); }
    .compare .cmp-tag { position: absolute; bottom: 0.8rem; font-family: 'DM Mono', monospace; font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase; color: #eee; background: rgba(5,6,8,0.72); padding: 0.25rem 0.6rem; border: 1px solid rgba(255,255,255,0.12); pointer-events: none; }
    .compare .cmp-tag-l { left: 0.8rem; }
    .compare .cmp-tag-r { right: 0.8rem; color: #cff782; border-color: rgba(207,247,130,0.3); }

    .pacing-cycle { position: relative; width: 340px; height: 340px; margin: 2rem auto; }
    .pacing-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px; border-radius: 50%; background: rgba(207,247,130,0.08); border: 1px solid rgba(207,247,130,0.3); display: flex; align-items: center; justify-content: center; text-align: center; }
    .pacing-center-text { font-family: 'Syne', sans-serif; font-size: 0.95rem; color: #cff782; line-height: 1.3; }
    .pacing-center-text em { font-style: normal; display: block; }
    .pacing-node { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
    .pacing-node:nth-child(1) { transform: translate(-50%,-50%) translate(0px, -130px); }
    .pacing-node:nth-child(2) { transform: translate(-50%,-50%) translate(124px, -40px); }
    .pacing-node:nth-child(3) { transform: translate(-50%,-50%) translate(76px, 108px); }
    .pacing-node:nth-child(4) { transform: translate(-50%,-50%) translate(-76px, 108px); }
    .pacing-node:nth-child(5) { transform: translate(-50%,-50%) translate(-124px, -40px); }
    .pacing-icon { width: 44px; height: 44px; border: 1px solid rgba(207,247,130,0.4); background: rgba(207,247,130,0.06); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: #cff782; border-radius: 50%; }
    .pacing-label { font-size: 0.75rem; color: #aaa; text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }

    /* Connecting arc lines between nodes via SVG overlay */
    .pacing-cycle::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(207,247,130,0.18); top: 50%; left: 50%; width: 260px; height: 260px; transform: translate(-50%,-50%); }

    /* DIVIDER */
    .inner-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(207,247,130,0.12), transparent); margin: 2.5rem 0; }

    /* FOOTER */
    footer { text-align: center; padding: 3rem; border-top: 1px solid rgba(207,247,130,0.08); }
    .foot-copy { font-size: 0.82rem; color: #666; }
    .foot-legal { font-size: 0.7rem; color: #444; margin-top: 0.5rem; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.7; }

    /* IMPACT LINE */
    .impact-line { font-family: 'DM Mono', monospace; font-size: 0.7rem; color: rgba(207,247,130,0.55); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2rem; padding: 0.6rem 0; border-top: 1px solid rgba(207,247,130,0.1); border-bottom: 1px solid rgba(207,247,130,0.1); }

    /* SLIDER CAPTION */

    @media (max-width: 768px) {
      .proj-hero-content { grid-template-columns: 1fr; padding: 4rem 1.5rem 3rem; }
      .pillars-grid, .challenges-grid,
      .proj-info-grid { grid-template-columns: repeat(2,1fr); }
      .content-wrap { padding: 0 1.5rem 4rem; }
      nav { padding: 0 1.5rem; }
      .lateral-progress { display: none; }
    }
  /* Móvil/táctil: ocultar cursor personalizado */
  @media (hover: none) {
    * { cursor: auto !important; }
    #cur, #cur-ring { display: none !important; }
  }

/* extraído de atributos inline */
.u-badges-mt { margin-top: 1rem; }
.video-wrap.u-video-860 { max-width: 860px; margin: 0 auto; }
.u-role-note { color: #888; font-size: 0.9rem; line-height: 1.8; margin-bottom: 1rem; }
.u-caption-note { font-size: 0.82rem; color: #777; line-height: 1.7; text-align: center; max-width: 760px; margin: 0.9rem auto 0; }
.closing-stats.u-stats-5 { grid-template-columns: repeat(5,1fr); }

/* dots — pacing legend & event dots & sequence legend */
.u-dot-combat { background: #e05050; }
.u-dot-puzzle { background: #e09030; }
.u-dot-cinematic { background: #5080e0; }
.u-dot-boss { background: #c00; }
.u-dot-special { background: #cff782; }
.u-dot-neutral { background: #888; }
.u-dot-seq-cinematic { background: #8050c0; }
.u-dot-collectible { background: #50a060; }
.u-dot-seq-special { background: #50a0c0; }

/* pacing grid lines */
.u-pg-100 { bottom: 100%; }
.u-pg-80 { bottom: 80%; }
.u-pg-60 { bottom: 60%; }
.u-pg-40 { bottom: 40%; }
.u-pg-20 { bottom: 20%; }
.u-pg-0 { bottom: 0%; }

/* pacing diagram event positions (left = timeline %, bottom = intensity %) */
.u-ev-start { left: 0%; bottom: 5%; }
.u-ev-cbt01 { left: 6.5%; bottom: 25%; }
.u-ev-cnm01 { left: 12%; bottom: 15%; }
.u-ev-plz01 { left: 18%; bottom: 20%; }
.u-ev-cbt02 { left: 24%; bottom: 45%; }
.u-ev-plz02 { left: 30%; bottom: 25%; }
.u-ev-cnm02 { left: 36%; bottom: 30%; }
.u-ev-cbt04 { left: 42%; bottom: 55%; }
.u-ev-plz03 { left: 48%; bottom: 35%; }
.u-ev-cbt05 { left: 54%; bottom: 50%; }
.u-ev-cbt07 { left: 60%; bottom: 70%; }
.u-ev-cnm03 { left: 66%; bottom: 45%; }
.u-ev-bc01 { left: 72%; bottom: 90%; }
.u-ev-plz04 { left: 79%; bottom: 45%; }
.u-ev-destroy { left: 88%; bottom: 20%; }
.u-ev-cnm04 { left: 100%; bottom: 10%; }