:root {
  --bg: #101216;
  --bg-deep: #0A0B0E;
  --fg: #fff;
  --accent: #F7B500;
  --accent-hover: #ffcf2e;
  --card-bg: #1B1D22;
  --border-1: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.14);
  --border-3: rgba(255,255,255,.24);
  --border-4: rgba(255,255,255,.32);
  --scrim-strong: rgba(7,8,11,.94);
  --scrim-mid: rgba(7,8,11,.7);
  --scrim-soft: rgba(7,8,11,.15);
  --font-serif: 'Garamond Premier Pro', Garamond, serif;
  --font-display: 'Garamond Premier Pro Display', serif;
  --font-ui: 'Helvetica Neue LT Std', sans-serif;
}
@font-face{font-family:'Garamond Premier Pro';src:url('fonts/GaramondPremrPro.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Garamond Premier Pro';src:url('fonts/GaramondPremrPro-It.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Garamond Premier Pro';src:url('fonts/GaramondPremrPro-Med.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Garamond Premier Pro Display';src:url('fonts/GaramondPremrPro-Disp.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Garamond Premier Pro Display';src:url('fonts/GaramondPremrPro-LtDisp.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT Std';src:url('fonts/HelveticaNeueLTStd-Roman.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT Std';src:url('fonts/HelveticaNeueLTStd-Md.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT Std';src:url('fonts/HelveticaNeueLTStd-Bd.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Helvetica Neue LT Std';src:url('fonts/HelveticaNeueLTStd-Blk.otf') format('opentype');font-weight:900;font-style:normal;font-display:swap}

html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-serif);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--fg);text-decoration:none}
a:hover{color:rgba(255,255,255,.7)}
.row-scroller{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;cursor:grab;touch-action:pan-y}
.row-scroller::-webkit-scrollbar{display:none}
.row-scroller{scrollbar-width:none}
.row-scroller.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.row-scroller img{-webkit-user-drag:none;user-drag:none}
::selection{background:#fff;color:var(--bg)}
@media (max-width: 640px) { .page-gutter { padding-left:24px!important; padding-right:24px!important; } }

/* Above .detail-overlay (z-index:200) — otherwise the case detail view's
   full-screen opaque overlay completely hides the header while browsing a case. */
.nav{position:fixed;top:0;left:0;right:0;z-index:210;transition:background .3s ease,border-color .3s ease}
.nav.scrolled{background:rgba(7,8,11,.94);border-bottom:1px solid var(--border-2);backdrop-filter:blur(8px)}
.nav:not(.scrolled){background:linear-gradient(180deg,rgba(7,8,11,.75) 0%,rgba(7,8,11,0) 100%);border-bottom:1px solid transparent}
.hero{position:relative;width:100%;height:82vh;min-height:560px;overflow:hidden;background:var(--bg)}
.hero-slide{position:absolute;inset:0;transition:opacity .8s ease}
.card-landscape{flex:0 0 auto;width:300px;cursor:pointer;transition:transform .25s ease-out,box-shadow .25s ease-out;will-change:transform}
.card-landscape:hover{transform:scale(1.09) translateY(-6px);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease-out;z-index:5;box-shadow:0 18px 36px rgba(0,0,0,.55)}
.card-landscape:hover .thumb{box-shadow:0 0 0 3px var(--accent)}
.card-landscape .thumb{position:relative;width:300px;height:169px;background:var(--card-bg);overflow:hidden;border-radius:14px;transition:box-shadow .3s ease-out}
.card-portrait{flex:0 0 auto;width:248px;cursor:pointer;transition:transform .25s ease-out,box-shadow .25s ease-out;will-change:transform}
.card-portrait:hover{transform:scale(1.07) translateY(-6px);transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease-out;z-index:5;box-shadow:0 18px 36px rgba(0,0,0,.55)}
.card-portrait:hover .thumb{box-shadow:0 0 0 3px var(--accent)}
.card-portrait .thumb{position:relative;width:248px;aspect-ratio:9/16;background:var(--card-bg);overflow:hidden;border-radius:14px;transition:box-shadow .3s ease-out}
.hero-cta{font-family:var(--font-ui);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:10px;cursor:pointer;border:0}
.hero-cta-play{background:#fff;color:var(--bg)}
.hero-cta-info{background:rgba(255,255,255,.12);color:#fff;border:1px solid var(--border-3)}
.hero-dots{position:absolute;left:48px;bottom:26px;display:flex;gap:8px;z-index:2}
.hero-dot{width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);cursor:pointer;transition:width .25s ease,background .25s ease}
.hero-dot.active{width:24px;background:#fff}
.hero-arrow{position:absolute;bottom:20px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-3);background:rgba(10,11,14,.55);color:#fff;font-size:18px;cursor:pointer;z-index:2}
.hero-prev{right:96px}
.hero-next{right:48px}
.chip{flex:0 0 auto;font-family:var(--font-ui);font-weight:900;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:999px;cursor:pointer;border:1px solid var(--border-3);background:transparent;color:rgba(255,255,255,.75)}
.chip.active{border-color:#fff;background:#fff;color:var(--bg)}
.nav-links span:hover{color:#fff}
@media (max-width: 900px) { .nav-links { display:none!important; } }
.ai-chip{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.04em;padding:7px 13px;border-radius:999px;cursor:pointer;border:1px solid var(--border-3);background:rgba(10,11,14,.7);color:rgba(255,255,255,.8)}
.ai-chip:hover{border-color:var(--border-4)}
.ai-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:0 0 auto;animation:ai-pulse 1.6s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.6}}
#list-fab:hover{border-color:var(--border-4)}

.detail-overlay{position:fixed;inset:0;z-index:200;background:var(--bg-deep);overflow-y:auto}
.detail-hero{position:relative;width:100%;height:64vh;min-height:440px;overflow:hidden}
.metrics-band{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:48px;padding:30px 48px;border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2)}
.tag-chip{font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.75);border:1px solid var(--border-3);padding:7px 12px;cursor:pointer}
.body-grid{max-width:1200px;margin:0 auto;padding:44px 48px 60px;display:grid;grid-template-columns:1.7fr 1fr;gap:64px}
.ficha-box{border:1px solid var(--border-2);border-radius:18px;padding:28px;position:sticky;top:24px}
@media (max-width: 900px){ .body-grid{grid-template-columns:1fr} }

.saved-drawer{overflow:hidden}
.saved-item{transition:border-color .2s ease,transform .2s ease}
.saved-item:hover{border-color:var(--border-4);transform:translateX(-2px)}
.index-card:hover{border-color:var(--border-4)}
.btn-export-all{transition:opacity .2s ease}
.btn-export-all:hover{opacity:.85}
.toast{pointer-events:none}
@media (max-width: 640px){ .saved-drawer{width:100%!important} }