:root{
    --blue:#2A66C5; --blue-2:#5B90E8; --navy:#141830; --red:#ED1B2D;
    --teal:#17A9C4; --green:#2FA36B; --amber:#E0A72E;
    /* UI tokens — light (drafting-table) */
    --ui-bg:rgba(255,255,255,.82);
    --ui-solid:#ffffff;
    --ui-fg:#141830;
    --ui-muted:#5a6076;
    --ui-border:rgba(20,24,48,.12);
    --ui-accent:var(--blue);
    --scene-top:#eaf0f9; --scene-bot:#c1cddf;
    --hair:rgba(20,24,48,.10);
    --shadow:0 10px 40px rgba(20,30,60,.18), 0 2px 8px rgba(20,30,60,.10);
    --grid:#2A66C5;
    font-synthesis-weight:none;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --ui-bg:rgba(17,21,38,.70);
      --ui-solid:#151a30;
      --ui-fg:#eaeef8;
      --ui-muted:#98a1c0;
      --ui-border:rgba(255,255,255,.13);
      --ui-accent:var(--blue-2);
      --scene-top:#131a30; --scene-bot:#05070f;
      --hair:rgba(255,255,255,.10);
      --shadow:0 18px 50px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4);
      --grid:#3f5fa8;
    }
  }
  :root[data-theme="light"]{
    --ui-bg:rgba(255,255,255,.82); --ui-solid:#fff; --ui-fg:#141830; --ui-muted:#5a6076;
    --ui-border:rgba(20,24,48,.12); --ui-accent:var(--blue);
    --scene-top:#eaf0f9; --scene-bot:#c1cddf; --hair:rgba(20,24,48,.10);
    --shadow:0 10px 40px rgba(20,30,60,.18),0 2px 8px rgba(20,30,60,.10); --grid:#2A66C5;
  }
  :root[data-theme="dark"]{
    --ui-bg:rgba(17,21,38,.70); --ui-solid:#151a30; --ui-fg:#eaeef8; --ui-muted:#98a1c0;
    --ui-border:rgba(255,255,255,.13); --ui-accent:var(--blue-2);
    --scene-top:#131a30; --scene-bot:#05070f; --hair:rgba(255,255,255,.10);
    --shadow:0 18px 50px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4); --grid:#3f5fa8;
  }

  *{box-sizing:border-box}
  #wrap{
    position:fixed; inset:0; overflow:hidden;
    background:radial-gradient(120% 120% at 50% 12%, var(--scene-top), var(--scene-bot));
    font-family:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    color:var(--ui-fg); -webkit-font-smoothing:antialiased;
  }
  #scene{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; cursor:grab}
  #scene:active{cursor:grabbing}
  .overlay{position:absolute; z-index:5}

  /* Lockup */
  .lockup{top:22px; left:24px; max-width:min(60vw,420px); pointer-events:none}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ui-muted); margin:0 0 6px;
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 22%,transparent)}
  .title{
    font-size:clamp(20px,3.4vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.04;
    margin:0; text-wrap:balance;
  }
  .subtitle{margin:7px 0 0; font-size:13px; color:var(--ui-muted); font-weight:500}

  /* Controls */
  .controls{left:24px; bottom:24px; display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .btn{
    display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    font:inherit; font-size:13px; font-weight:600; color:var(--ui-fg);
    background:var(--ui-bg); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid var(--ui-border); border-radius:11px; padding:9px 13px;
    box-shadow:var(--shadow); transition:transform .12s ease, border-color .12s ease, background .12s ease;
  }
  .btn:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-border))}
  .btn:active{transform:translateY(0)}
  .btn[aria-pressed="true"]{border-color:var(--ui-accent); color:var(--ui-accent)}
  .btn svg{width:15px;height:15px;flex:none}
  .btn:focus-visible, .card-close:focus-visible{outline:2px solid var(--ui-accent); outline-offset:2px}
  .zoombar{right:24px; bottom:24px; display:flex; flex-direction:column; gap:8px}
  .zbtn{appearance:none; width:40px; height:40px; cursor:pointer; color:var(--ui-fg);
    background:var(--ui-bg); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border:1px solid var(--ui-border); border-radius:11px; box-shadow:var(--shadow);
    font-size:22px; line-height:1; font-weight:400; display:grid; place-items:center; transition:transform .12s, border-color .15s}
  .zbtn:hover{transform:translateY(-1px); border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-border))}
  .zbtn:active{transform:translateY(0)}
  .zbtn:focus-visible{outline:2px solid var(--ui-accent); outline-offset:2px}
  .zbtn svg{width:18px; height:18px; flex:none}
  /* Título HTML (solo en celular; en desktop se usa el 3D) */
  .title2d{display:none; top:16px; left:16px; z-index:6; pointer-events:none; font-weight:800; font-size:26px;
    line-height:1.0; letter-spacing:.01em; text-transform:uppercase; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.5)}
  @media (max-width:760px){
    .title2d{display:block}
    /* Ficha como hoja inferior (lo más abajo posible); el elemento se enfoca arriba y centrado (ver focusHot). */
    .card{ top:auto; bottom:10px; left:10px; right:10px; width:auto; max-width:none; transform:translateY(20px); padding:14px 14px 12px; }
    .card-img{ aspect-ratio:auto; height:30vh; margin-top:12px; }
  }

  /* Hint */
  .hint{right:24px; bottom:26px; font-size:12px; color:var(--ui-muted); text-align:right; pointer-events:none;
    display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
  .hint b{color:var(--ui-fg); font-weight:600}
  .hint .k{padding:2px 7px;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-bg)}

  /* Info card */
  .card{
    top:22px; right:24px; width:320px; max-width:calc(100vw - 48px);
    background:var(--ui-bg); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid var(--ui-border); border-radius:16px; box-shadow:var(--shadow);
    padding:18px 18px 16px; transform:translateX(18px); opacity:0; pointer-events:none;
    transition:opacity .22s ease, transform .22s ease;
  }
  .card.show{opacity:1; transform:none; pointer-events:auto}
  .card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
  .card-idx{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ui-accent)}
  .card h2{margin:2px 0 0; font-size:19px; font-weight:800; letter-spacing:-.01em; line-height:1.15}
  .card-sub{margin:2px 0 0; font-size:12.5px; color:var(--ui-muted)}
  .card-close{appearance:none; border:1px solid var(--ui-border); background:transparent; color:var(--ui-fg);
    width:30px;height:30px;border-radius:9px;cursor:pointer;flex:none;display:grid;place-items:center;font-size:16px;line-height:1}
  .card-close:hover{background:color-mix(in srgb,var(--ui-fg) 8%,transparent)}
  .chips{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0 0}
  .chip{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:4px 9px;border-radius:999px;
    border:1px solid transparent; display:inline-flex; align-items:center; gap:6px}
  .chip .cdot{width:7px;height:7px;border-radius:50%}
  .chip.state{}
  .stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:15px 0 0;
    background:var(--ui-border); border:1px solid var(--ui-border); border-radius:12px; overflow:hidden}
  .stat{background:var(--ui-solid); padding:11px 12px}
  .stat .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-muted);font-weight:600}
  .stat .v{font-size:17px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
  .card-note{margin:14px 0 0; font-size:11.5px; line-height:1.5; color:var(--ui-muted);
    padding-top:12px;border-top:1px dashed var(--ui-border)}
  .card-note b{color:var(--ui-fg)}
  .card-img{display:none;width:100%;margin:14px 0 0;border-radius:12px;aspect-ratio:4/3;object-fit:cover;background:var(--ui-solid);border:1px solid var(--ui-border)}
  .card-fotos{display:none;align-items:center;justify-content:center;gap:8px;width:100%;margin:14px 0 0;padding:11px 15px;border-radius:11px;cursor:pointer;
    border:1px solid transparent;background:var(--ui-accent);color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em;transition:filter .15s,transform .05s}
  .card-fotos:hover{filter:brightness(1.08)}
  .card-fotos:active{transform:translateY(1px)}
  .card-fotos svg{width:15px;height:15px;flex:none}
  .card-nav{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding-top:12px;border-top:1px dashed var(--ui-border)}
  .cnav{appearance:none;border:1px solid var(--ui-border);background:var(--ui-solid);color:var(--ui-fg);
    height:36px;flex:1;border-radius:10px;cursor:pointer;display:grid;place-items:center;
    font-size:20px;line-height:1;font-weight:700;transition:background .15s,border-color .15s,transform .05s}
  .cnav:hover{background:color-mix(in srgb,var(--ui-accent) 12%,transparent);border-color:color-mix(in srgb,var(--ui-accent) 45%,transparent)}
  .cnav:active{transform:translateY(1px)}
  .cnav-count{font-size:12px;font-weight:700;color:var(--ui-muted);font-variant-numeric:tabular-nums;flex:none;min-width:52px;text-align:center;letter-spacing:.02em}

  /* Loader — la escena WebGL (grilla + fondo animado + cubo girando) es el preloader; acá solo el texto + progreso */
  .loader{position:absolute; inset:0; z-index:20; pointer-events:none; display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:9vh; transition:opacity .5s ease; text-align:center}
  .loader.hide{opacity:0}
  .ld-wrap{width:min(80vw,300px); background:rgba(10,14,24,.42); border:1px solid rgba(255,255,255,.12); border-radius:16px;
    padding:14px 18px 16px; box-shadow:0 14px 40px rgba(0,0,0,.4); backdrop-filter:blur(8px) saturate(1.2); -webkit-backdrop-filter:blur(8px) saturate(1.2)}
  .ld-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.16);overflow:hidden;margin:11px auto 8px}
  .ld-bar i{display:block;height:100%;width:36%;border-radius:99px;background:linear-gradient(90deg,var(--ui-accent),var(--teal));animation:ld-indet 1.1s ease-in-out infinite}
  @keyframes ld-indet{0%{margin-left:-40%}100%{margin-left:112%}}
  .loader.determinate .ld-bar i{animation:none;margin-left:0;transition:width .25s ease}
  .loader p{margin:0;font-size:12.5px;color:rgba(255,255,255,.72);letter-spacing:.02em}
  .loader .big{font-size:15px;font-weight:800;color:#fff;margin-bottom:2px;letter-spacing:-.01em}
  @media (prefers-reduced-motion:reduce){ .ld-grid,.ld-blocks span,.ld-bar i{animation:none} }

  /* Debug color panel */
  .debug{ top:118px; left:24px; width:286px; max-width:calc(100vw - 48px); max-height:calc(100vh - 210px);
    background:var(--ui-bg); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5);
    border:1px solid var(--ui-border); border-radius:16px; box-shadow:var(--shadow); padding:13px 14px;
    transform:translateX(-16px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    display:block; overflow-y:auto; overscroll-behavior:contain; }
  .debug.show{ opacity:1; transform:none; pointer-events:auto }
  .dhead{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700 }
  .dhead b{ font-weight:700 }
  .dmini{ appearance:none; border:1px solid var(--ui-border); background:transparent; color:var(--ui-fg);
    border-radius:8px; padding:3px 9px; font:inherit; font-size:12px; cursor:pointer }
  .dmini:hover{ background:color-mix(in srgb,var(--ui-fg) 8%,transparent) }
  .dlist{ margin-top:11px; display:flex; flex-direction:column; gap:4px }
  .drow{ display:flex; align-items:center; gap:9px; padding:3px 5px; border-radius:8px }
  .drow:hover{ background:color-mix(in srgb,var(--ui-accent) 12%,transparent) }
  .drow input[type=color]{ width:28px; height:22px; border:1px solid var(--ui-border); border-radius:6px; padding:0; background:none; cursor:pointer; flex:none }
  .did{ font-family:ui-monospace,"Cascadia Code",Consolas,monospace; font-size:11px; color:var(--ui-accent); flex:none; min-width:76px }
  .dnm{ font-size:12px; color:var(--ui-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .dnmi{ flex:1; min-width:0; font:inherit; font-size:12px; color:var(--ui-fg); background:transparent; border:1px solid transparent; border-radius:6px; padding:2px 5px }
  .dnmi:hover{ border-color:var(--ui-border) }
  .dnmi:focus{ outline:none; border-color:var(--ui-accent); background:color-mix(in srgb,var(--ui-accent) 8%,transparent) }
  .dnote{ margin:11px 0 0; font-size:11px; color:var(--ui-muted); line-height:1.45; padding-top:10px; border-top:1px dashed var(--ui-border) }
  .dnote b{ color:var(--ui-fg) }
  .dnote code, .did code{ font-family:ui-monospace,Consolas,monospace; font-size:11px }
  .dsub{ font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ui-muted); margin:10px 0 6px }
  .dsection{ display:flex; flex-direction:column; gap:6px }
  .dslider{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ui-fg) }
  .dslider input[type=range]{ flex:1; accent-color:var(--ui-accent); height:4px }
  .dslider span{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--ui-muted); min-width:30px; text-align:right }
  .dcam{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; font-size:12px; color:var(--ui-muted); margin:2px 0 6px }
  .dcam b{ color:var(--ui-fg); font-variant-numeric:tabular-nums; font-weight:700 }
  @media (max-width:640px){ .debug{ top:auto; left:16px; right:16px; bottom:84px; width:auto; max-height:52vh; transform:translateY(16px) } .debug.show{ transform:none } }

  @media (max-width:640px){
    .lockup{top:16px;left:16px}
    .controls{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
    .hint{display:none}
    .card{top:auto; left:10px; right:10px; bottom:10px; width:auto; max-width:none;
      transform:translateY(20px)}
    .card.show{transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important; transition-duration:.05s !important}
  }