/* ========================================================================
   DRET VISUAL — brutalist editorial system
   Shared by: index.html, hubs (dret-penal-economic.html, etc.),
              temes (dret-penal-economic-tema3.html, etc.)
   ======================================================================== */

:root{
  --paper:   #F2EFE8;
  --paper-2: #E8E4D8;
  --paper-3: #DCD8CC;
  --ink:     #0A0A0A;
  --ink-soft:#1C1C1C;
  --muted:   #6B6B63;
  --rule:    #0A0A0A;
  --accent:      oklch(0.62 0.22 25);     /* hot red */
  --accent-ink:  oklch(0.35 0.14 25);
  --ok:          oklch(0.60 0.14 160);
  --warn:        oklch(0.68 0.14 75);

  /* branch swatches */
  --b-penal:        oklch(0.60 0.18 25);
  --b-penalec:      oklch(0.55 0.16 40);
  --b-civil:        oklch(0.55 0.14 300);
  --b-financer:     oklch(0.58 0.14 230);
  --b-mercantil:    oklch(0.68 0.14 75);
  --b-administ:     oklch(0.60 0.14 160);
  --b-fonaments:    oklch(0.50 0.04 60);
  --b-processal:    oklch(0.58 0.18 15);
  --b-constit:      oklch(0.62 0.12 210);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--paper); color:var(--ink); }
body{
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.grid-bg{
  background-image:
    linear-gradient(var(--paper) 0px, transparent 1px),
    linear-gradient(90deg, var(--paper) 0px, transparent 1px);
  background-size:48px 48px;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(10,10,10,.035) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:multiply; z-index:1;
}

.mono  { font-family:'JetBrains Mono', monospace; }
.serif { font-family:'Instrument Serif', serif; }
.it    { font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }

a{ color:inherit; text-decoration:none; }

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
}
.topbar-row{
  max-width:1440px; margin:0 auto;
  display:flex; align-items:stretch;
  border-top:1px solid var(--ink);
}
.topbar-row:first-child{ border-top:none; }
.tb-cell{
  padding:10px 18px;
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border-right:1px solid var(--ink);
  display:flex; align-items:center; gap:8px;
}
.tb-cell:last-child{ border-right:none; }
.tb-grow{ flex:1; }
.tb-brand{
  font-family:'Space Grotesk', sans-serif;
  font-size:14px; font-weight:700; letter-spacing:-.01em;
  text-transform:none; padding:14px 22px;
}
.tb-brand .dot{
  display:inline-block; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  margin-right:10px; vertical-align:middle;
}
.nav-links{ display:flex; }
.nav-links a{
  padding:10px 16px; border-right:1px solid var(--ink);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  transition:background .15s;
}
.nav-links a:hover, .nav-links a.active{ background:var(--ink); color:var(--paper); }

/* ============ BREADCRUMB ============ */
.crumbs{
  max-width:1440px; margin:0 auto;
  padding:14px 32px; border-bottom:1px solid var(--ink);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.crumbs a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.crumbs .sep{ color:var(--ink); }
.crumbs .here{ color:var(--ink); font-weight:700; }

/* ============ HERO ============ */
.hero{
  max-width:1440px; margin:0 auto;
  border-bottom:2px solid var(--ink);
  padding:48px 0 40px;
  position:relative;
}
.hero-inner{ padding:0 32px; }
.hero .eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
  display:inline-flex; align-items:center; gap:10px;
}
.hero .eyebrow .sq{ width:10px; height:10px; background:var(--accent); display:inline-block; }
.hero h1{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700; font-size:clamp(56px, 9vw, 132px);
  line-height:.92; letter-spacing:-0.045em;
  margin:0 0 16px; text-transform:none;
}
.hero h1 .em{ font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; letter-spacing:-.02em; }
.hero h1 .amp{ color:var(--accent); font-family:'Instrument Serif', serif; font-style:italic; font-weight:400; }
.hero .lede{
  font-family:'Instrument Serif', serif;
  font-size:clamp(20px, 2.1vw, 28px);
  line-height:1.35; max-width:900px;
  color:var(--ink-soft); margin:0;
}
.hero-meta{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--ink);
  margin-top:32px;
}
.hero-meta .cell{
  padding:14px 32px; border-right:1px solid var(--ink);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.hero-meta .cell:last-child{ border-right:none; }
.hero-meta .cell b{
  display:block; font-size:22px; font-weight:700;
  margin-bottom:2px;
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-.02em; text-transform:none; color:var(--ink);
}

/* ============ SHARED FOOTER ============ */
.site-foot{
  max-width:1440px; margin:0 auto;
  border-top:2px solid var(--ink);
  background:var(--ink); color:var(--paper);
}
.site-foot-inner{
  display:grid; grid-template-columns: 2fr 1fr 1fr;
  gap:0;
}
.site-foot .ff-cell{
  padding:32px;
  border-right:1px solid #2a2a2a;
}
.site-foot .ff-cell:last-child{ border-right:none; }
.site-foot h4{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#8a8a82; margin:0 0 14px;
}
.site-foot .ff-brand{
  font-family:'Instrument Serif', serif;
  font-size:32px; line-height:1.1;
}
.site-foot .ff-brand .amp{ color:var(--accent); font-style:italic; }
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li{ margin-bottom:8px; font-size:13px; }
.site-foot a:hover{ color:var(--accent); }
.site-foot-bottom{
  border-top:1px solid #2a2a2a;
  padding:14px 32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  color:#8a8a82;
}

/* ============ UTIL ============ */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px;
  border:2px solid var(--ink); background:var(--paper);
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  font-weight:700; cursor:pointer;
  transition:background .15s, color .15s;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn.filled{ background:var(--ink); color:var(--paper); }
.btn.filled:hover{ background:var(--accent); border-color:var(--accent); }
.btn .arrow{ font-family:'Instrument Serif', serif; font-style:italic; font-size:16px; }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border:1px solid var(--ink);
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--paper);
}
.chip.filled{ background:var(--ink); color:var(--paper); }
.chip .sq{ width:8px; height:8px; background:var(--accent); display:inline-block; }

.kicker{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}

hr.rule{
  border:none; height:0;
  border-top:2px solid var(--ink);
  margin:0;
}
hr.rule-thin{
  border:none; height:0;
  border-top:1px solid var(--ink);
  margin:0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .nav-links{ display:none; }
  .topbar-row{ flex-wrap:wrap; }
  .hero h1{ font-size:64px; letter-spacing:-.03em; }
  .hero-meta{ grid-template-columns:1fr 1fr; }
  .hero-meta .cell:nth-child(2n){ border-right:none; }
  .hero-meta .cell{ border-bottom:1px solid var(--ink); }
  .site-foot-inner{ grid-template-columns:1fr; }
  .site-foot .ff-cell{ border-right:none; border-bottom:1px solid #2a2a2a; }
}