* { 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; }


    /* 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%, #0d0e08 50%, #080a05 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(60,80,20,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: 160px; object-fit: contain; filter: drop-shadow(0 0 40px rgba(120,160,40,0.35)); }
    .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: #444; margin-bottom: 0.2rem; }
    .proj-info-val { font-size: 0.85rem; color: #bbb; }
    .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; }

    /* 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; }

    /* CONTENT */
    .content-wrap { max-width: 1100px; margin: 0 auto; padding: 0 3rem 6rem; }

    /* 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: #777; 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; }

    /* MISSION ARCHETYPES */
    .archetype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
    .archetype-card { padding: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-top: 2px solid rgba(207,247,130,0.3); }
    .archetype-num { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: rgba(207,247,130,0.5); letter-spacing: 2px; margin-bottom: 0.6rem; }
    .archetype-title { font-family: 'Syne', sans-serif; font-size: 1.15rem; color: #fff; margin-bottom: 1rem; line-height: 1.3; }
    .archetype-list { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
    .archetype-list li { font-size: 0.83rem; color: #888; line-height: 1.65; padding-left: 0.8rem; border-left: 2px solid rgba(207,247,130,0.2); }
    .archetype-list li strong { color: #bbb; }

    /* TRAVERSAL SPLIT */
    .traversal-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
    .traversal-card { padding: 1.5rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); }
    .traversal-mode { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
    .traversal-icon { width: 36px; height: 36px; border: 1px solid rgba(207,247,130,0.3); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #cff782; flex-shrink: 0; }
    .traversal-mode-title { font-family: 'Syne', sans-serif; font-size: 1.2rem; color: #fff; }
    .traversal-mode-sub { font-size: 0.7rem; color: #555; text-transform: uppercase; letter-spacing: 1.5px; }
    .traversal-specs { display: flex; flex-direction: column; gap: 0.4rem; }
    .traversal-spec { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.8rem; }
    .traversal-spec-label { color: #555; font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.5px; }
    .traversal-spec-val { color: #cff782; font-family: 'DM Mono', monospace; font-size: 0.75rem; }

    /* BARREL SYSTEM */
    .barrel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
    .barrel-card { padding: 1.5rem; border: 1px solid rgba(255,255,255,0.05); }
    .barrel-card-explosive { background: rgba(200,80,40,0.05); border-color: rgba(200,80,40,0.2); border-top: 2px solid rgba(200,80,40,0.5); }
    .barrel-card-electric { background: rgba(80,140,220,0.05); border-color: rgba(80,140,220,0.2); border-top: 2px solid rgba(80,140,220,0.5); }
    .barrel-type { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem; }
    .barrel-card-explosive .barrel-type { color: #e05030; }
    .barrel-card-electric .barrel-type { color: #5090e0; }
    .barrel-title { font-family: 'Syne', sans-serif; font-size: 1.2rem; color: #fff; margin-bottom: 0.8rem; }
    .barrel-sizes { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; }
    .barrel-size-tag { font-family: 'DM Mono', monospace; font-size: 0.6rem; padding: 0.15rem 0.5rem; border-radius: 2px; }
    .barrel-card-explosive .barrel-size-tag { background: rgba(200,80,40,0.12); color: #e07050; border: 1px solid rgba(200,80,40,0.25); }
    .barrel-card-electric .barrel-size-tag { background: rgba(80,140,220,0.12); color: #70a0e0; border: 1px solid rgba(80,140,220,0.25); }
    .barrel-desc { font-size: 0.85rem; color: #888; line-height: 1.7; }

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

    /* CLOSING */
    .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: #888; 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: #888; line-height: 1.8; }
    .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: #666; line-height: 1.5; }
    .closing-btn-prev { border: 1px solid rgba(207,247,130,0.3); color: #cff782; }
    .closing-btn-prev:hover { background: rgba(207,247,130,0.1); border-color: #cff782; }

    /* SLIDER */
    /* SLIDER (overrides de página; el común vive en case.css) */
    .slider-track img { max-height: 520px; }

    /* LIGHTBOX */

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

    .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* CASE META */
    .case-meta-item { font-family: 'DM Mono', monospace; font-size: 0.72rem; color: #444; letter-spacing: 1px; }
    .case-meta-sep { color: #2a2a2a; font-size: 0.7rem; }

    @media (max-width: 768px) {
      .proj-hero-content { grid-template-columns: 1fr; padding: 4rem 1.5rem 3rem; }
      .pillars-grid, .challenges-grid, .archetype-grid, .traversal-split, .barrel-grid, .proj-info-grid { grid-template-columns: 1fr; }
      .content-wrap { padding: 0 1.5rem 4rem; }
      nav { padding: 0 1.5rem; }
      .closing-grid { grid-template-columns: 1fr; }
      .closing-card-impact { grid-column: span 1; }
      .closing-stats { grid-template-columns: 1fr; gap: 1.5rem; }
    }
    @media (max-width: 768px) { .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-mt-1 { margin-top:1rem; }
.u-video-wrap { max-width:860px; margin: 0 auto; }
.u-role-p { color:#888;font-size:0.9rem;line-height:1.8;margin-bottom:1rem; }
.u-note-box { display:flex;gap:1rem;align-items:flex-start;padding:0.9rem 1.2rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-left:3px solid rgba(207,247,130,0.25);margin-bottom:1rem; }
.u-note-icon { color:rgba(207,247,130,0.5);font-size:0.8rem;flex-shrink:0;margin-top:0.1rem; }
.u-note-text { font-size:0.82rem;color:#666;line-height:1.7;margin:0; }
.u-strong-888 { color:#888; }
.u-strong-bbb { color:#bbb; }
.u-legend-row { display:flex;gap:2rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap;margin-top:1rem; }
.u-legend-item { display:flex;align-items:center;gap:0.5rem;font-family:'DM Mono',monospace;font-size:0.65rem;color:#888;letter-spacing:1px; }
.u-dot-gold { width:10px;height:10px;border-radius:50%;background:rgba(207,247,130,0.7); }
.u-dot-blue { width:10px;height:10px;border-radius:50%;background:rgba(80,140,200,0.7); }
.u-svg-mapflow { width:100%;max-width:520px;display:block;margin:0 auto;overflow:visible; }
.u-mf-footer { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem;border-top:1px solid rgba(255,255,255,0.04);padding-top:1.2rem; }
.u-mf-label-gold { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(207,247,130,0.5);letter-spacing:2px;margin-bottom:0.4rem; }
.u-mf-label-blue { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(80,140,200,0.5);letter-spacing:2px;margin-bottom:0.4rem; }
.u-mf-desc { font-size:0.8rem;color:#666;line-height:1.7; }
.u-lead { font-size:0.88rem;color:#777;line-height:1.8;margin-bottom:1.5rem; }
.u-lead-tight { font-size:0.88rem;color:#777;line-height:1.8;margin-bottom:1.2rem; }
.u-biome-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem; }
.u-biome-card { padding:1.5rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05); }
.u-biome-card--desert { border-top:2px solid rgba(200,130,60,0.5); }
.u-biome-card--jungle { border-top:2px solid rgba(60,140,70,0.5); }
.u-biome-card--ice { border-top:2px solid rgba(80,150,220,0.5); }
.u-biome-tag--desert { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(200,130,60,0.6);letter-spacing:2px;margin-bottom:0.5rem; }
.u-biome-tag--jungle { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(60,160,80,0.6);letter-spacing:2px;margin-bottom:0.5rem; }
.u-biome-tag--ice { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(80,160,220,0.6);letter-spacing:2px;margin-bottom:0.5rem; }
.u-biome-title { font-family:'Space Grotesk',sans-serif;font-size:1.3rem;color:#fff;margin-bottom:0.3rem; }
.u-biome-sub { font-size:0.72rem;color:#555;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:1rem; }
.u-plain-list { list-style:none;display:flex;flex-direction:column;gap:0.5rem; }
.u-biome-li { font-size:0.82rem;color:#888;line-height:1.65;padding-left:0.8rem; }
.u-biome-li--desert { border-left:2px solid rgba(200,130,60,0.25); }
.u-biome-li--jungle { border-left:2px solid rgba(60,140,70,0.25); }
.u-biome-li--ice { border-left:2px solid rgba(80,150,220,0.25); }
.u-biome-li--red { border-left:2px solid rgba(200,60,60,0.2); }
.u-diagram-box { margin-top:1rem;border-top:1px solid rgba(255,255,255,0.05);padding-top:0.8rem; }
.u-diagram-label--desert { font-family:'DM Mono',monospace;font-size:0.58rem;color:rgba(200,130,60,0.5);letter-spacing:1px;margin-bottom:0.6rem; }
.u-diagram-label--jungle { font-family:'DM Mono',monospace;font-size:0.58rem;color:rgba(60,160,80,0.5);letter-spacing:1px;margin-bottom:0.6rem; }
.u-diagram-label--ice { font-family:'DM Mono',monospace;font-size:0.58rem;color:rgba(80,160,220,0.5);letter-spacing:1px;margin-bottom:0.6rem; }
.u-svg-full { width:100%; }
.u-boss-box { margin-top:1rem;padding:1.5rem;background:rgba(180,40,40,0.04);border:1px solid rgba(200,60,60,0.15);border-left:3px solid rgba(200,60,60,0.5);display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start; }
.u-boss-side { min-width:140px; }
.u-boss-tag { font-family:'DM Mono',monospace;font-size:0.6rem;color:rgba(200,60,60,0.6);letter-spacing:2px;margin-bottom:0.5rem; }
.u-boss-title { font-family:'Space Grotesk',sans-serif;font-size:1.4rem;color:#fff;white-space:nowrap; }
.u-boss-sub { font-size:0.72rem;color:#555;text-transform:uppercase;letter-spacing:1.5px;margin-top:0.3rem; }
.u-boss-grid { display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.8rem; }
.u-pipe-row { display:flex;align-items:stretch;gap:0;overflow-x:auto;padding-bottom:0.5rem; }
.u-pipe-step { min-width:130px;flex:1;padding:1.2rem 1rem;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-right:none;position:relative; }
.u-pipe-step--last { min-width:130px;flex:1;padding:1.2rem 1rem;background:rgba(207,247,130,0.04);border:1px solid rgba(207,247,130,0.2); }
.u-pipe-num { font-family:'DM Mono',monospace;font-size:0.55rem;color:rgba(207,247,130,0.5);letter-spacing:2px;margin-bottom:0.5rem; }
.u-pipe-title { font-family:'Space Grotesk',sans-serif;font-size:1.1rem;color:#fff;margin-bottom:0.5rem; }
.u-pipe-title--gold { font-family:'Space Grotesk',sans-serif;font-size:1.1rem;color:#cff782;margin-bottom:0.5rem; }
.u-pipe-desc { font-size:0.78rem;color:#666;line-height:1.6; }
.u-pipe-arrow { position:absolute;right:-10px;top:50%;transform:translateY(-50%);z-index:1;font-size:0.9rem;color:rgba(207,247,130,0.4); }
.u-svg-arena { width:100%;max-width:560px;display:block;margin:0 auto; }